docs: finalize portfolio README and product polish

Author: jesusdev98

README.md

@@ -1,3 +1,4 @@
+````md
 <div align="center">
 
 # DevBreak
@@ -20,13 +21,7 @@ DevBreak is a portfolio-grade productivity workspace built with Angular. It comb
 
 The product is intentionally calm: it helps users move work forward without turning productivity into a noisy scoring system.
 
-## Screenshots
-
-> Add final screenshots before publishing.
-
-| Workspace | Focus Mode | Settings |
-| --- | --- | --- |
-| `docs/screenshots/workspace.png` | `docs/screenshots/focus-mode.png` | `docs/screenshots/settings.png` |
+---
 
 ## Highlights
 
@@ -35,12 +30,15 @@ The product is intentionally calm: it helps users move work forward without turn
 - Advanced filters, sorting, density modes, and search
 - Focus ownership mode with active-task workflow
 - Timer and Pomodoro sessions with resilient timestamp-based persistence
-- Adaptive wellness reminders for hydration, posture, and movement
+- Adaptive wellness reminders for hydration, posture, and movement recovery
 - Contextual recovery suggestions and lightweight wellness consistency tracking
 - Keyboard shortcut personalization with conflict prevention
+- Workspace and daily productivity reset actions
 - Dark/light themes, reduced-motion support, and responsive layouts
 - Cypress E2E coverage for core workflows, persistence, keyboard, and accessibility behavior
 
+---
+
 ## Product Philosophy
 
 DevBreak is not a Pomodoro clone and not a fitness tracker. It is a focused workspace that treats productivity and recovery as part of the same workflow.
@@ -53,6 +51,8 @@ Wellness guidance is intentionally subtle:
 - no invasive notifications
 - supportive summaries only after meaningful activity exists
 
+---
+
 ## Architecture
 
 The app uses a modular feature structure with service-owned state and presentational component boundaries.
@@ -70,29 +70,33 @@ src/app/
       services/
   models/
   services/
-```
+````
 
 Key architectural choices:
 
-- RxJS streams for timer, workspace mode, focus, wellness, and derived UI state
-- LocalStorage persistence with validation and safe fallbacks
-- Angular CDK DragDrop for board interactions
-- Focused presentational components for settings, timer actions, wellness cards, and insights
-- CSS variables for density, theme, and responsive ergonomics
-- Minimal global state, no backend assumptions, no heavyweight store layer
+* RxJS streams for timer, workspace mode, focus, wellness, and derived UI state
+* LocalStorage persistence with validation and safe fallbacks
+* Angular CDK DragDrop for board interactions
+* Focused presentational component boundaries for settings, timer actions, wellness cards, and insights
+* CSS variables for density, theme, and responsive ergonomics
+* Minimal global state, no backend assumptions, no heavyweight store layer
+
+---
 
 ## Accessibility
 
 DevBreak includes an accessibility pass across semantics, keyboard behavior, screen-reader feedback, and motion preferences.
 
-- Landmark and heading structure
-- Accessible form labels and icon/control labels
-- Visible focus states
-- ESC handling and focus restoration
-- Keyboard activation parity for primary workflows
-- ARIA live regions for meaningful state changes
-- `prefers-reduced-motion` support
-- Cypress coverage for keyboard and accessibility-critical flows
+* Landmark and heading structure
+* Accessible form labels and icon/control labels
+* Visible focus states
+* ESC handling and focus restoration
+* Keyboard activation parity for primary workflows
+* ARIA live regions for meaningful state changes
+* `prefers-reduced-motion` support
+* Cypress coverage for keyboard and accessibility-critical flows
+
+---
 
 ## Testing & Reliability
 
@@ -102,11 +106,17 @@ npm run build
 npm run e2e
 ```
 
+Current validation status:
+
+* 56 automated tests passing
+* Production build passing
+* Cypress workflow coverage stable
+
 Coverage includes:
 
-- Unit tests for timer persistence, wellness heuristics, shortcuts, filters, density, and component behavior
-- Cypress E2E tests for Kanban, focus sessions, persistence restore, keyboard workflows, and reduced-motion smoke coverage
-- Production build validation through Angular budgets
+* Unit tests for timer persistence, wellness heuristics, shortcuts, filters, density, and component behavior
+* Cypress E2E tests for Kanban, focus sessions, persistence restore, keyboard workflows, and reduced-motion smoke coverage
+* Production build validation through Angular budgets
 
 Note for local Windows shells: if Cypress inherits `ELECTRON_RUN_AS_NODE`, clear it before running E2E.
 
@@ -116,16 +126,20 @@ $env:CYPRESS_SKIP_VERIFY='true'
 npm run e2e
 ```
 
+---
+
 ## Tech Stack
 
-- Angular
-- TypeScript
-- RxJS
-- SCSS
-- Angular CDK
-- Vitest / Angular unit testing
-- Cypress
-- GitHub Actions
+* Angular
+* TypeScript
+* RxJS
+* SCSS
+* Angular CDK
+* Vitest / Angular unit testing
+* Cypress
+* GitHub Actions
+
+---
 
 ## Getting Started
 
@@ -148,6 +162,8 @@ Production build:
 npm run build
 ```
 
+---
+
 ## Deployment
 
 The app is static-build ready.
@@ -175,23 +191,30 @@ Install Command: npm ci
 
 For SPA fallback routing, add a Vercel rewrite if routes are introduced later.
 
+---
+
 ## GitHub Actions
 
 Workflows are intentionally lightweight:
 
-- CI: install, unit tests, production build
-- Pages deploy: install, unit tests, production build, upload static artifact
+* CI: install, unit tests, production build
+* Pages deploy: install, unit tests, production build, upload static artifact
 
 Cypress remains available for local and future CI expansion without making the default pipeline heavy.
 
+---
+
 ## Portfolio Notes
 
 DevBreak demonstrates production-minded frontend work:
 
-- product-oriented UX decisions
-- accessible keyboard-first interaction design
-- resilient local persistence
-- maintainable Angular boundaries
-- responsive operational UI
-- calm wellness-aware behavior
-- meaningful automated reliability coverage
+* product-oriented UX decisions
+* accessible keyboard-first interaction design
+* resilient local persistence
+* maintainable Angular boundaries
+* responsive operational UI
+* calm wellness-aware behavior
+* meaningful automated reliability coverage
+
+```
+```

src/app/features/kanban/components/kanban-board/kanban-board-archive.component.scss

@@ -44,16 +44,26 @@
   overscroll-behavior: contain;
   padding: 0 0.85rem 0.85rem;
   scrollbar-width: thin;
-  scrollbar-color: color-mix(in srgb, var(--accent) 42%, transparent) transparent;
+  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
 }
 
 .kanban-archive__list::-webkit-scrollbar {
-  width: 8px;
+  width: 9px;
+}
+
+.kanban-archive__list::-webkit-scrollbar-track {
+  border-radius: 999px;
+  background: var(--scrollbar-track);
 }
 
 .kanban-archive__list::-webkit-scrollbar-thumb {
+  border: 2px solid var(--scrollbar-track);
   border-radius: 999px;
-  background: color-mix(in srgb, var(--accent) 34%, transparent);
+  background: var(--scrollbar-thumb);
+}
+
+.kanban-archive__list::-webkit-scrollbar-thumb:hover {
+  background: var(--scrollbar-thumb-hover);
 }
 
 @media (max-width: 980px) {

src/app/features/kanban/components/kanban-board/kanban-board-toolbar.component.scss

@@ -1,6 +1,6 @@
 .kanban-board__toolbar {
-  display: grid;
-  grid-template-columns: minmax(14rem, 22rem) minmax(0, 1fr) auto auto;
+  display: flex;
+  flex-wrap: wrap;
   align-items: end;
   gap: var(--kb-toolbar-gap);
   flex: 0 0 auto;
@@ -9,8 +9,9 @@
 
 .kanban-search {
   display: grid;
+  flex: 1 1 16rem;
   gap: 0.3rem;
-  width: min(100%, 22rem);
+  max-width: 22rem;
   min-width: 0;
 }
 
@@ -50,16 +51,11 @@
 
 .kanban-filters {
   display: flex;
+  flex: 999 1 22rem;
+  flex-wrap: wrap;
   align-items: center;
   gap: 0.4rem;
   min-width: 0;
-  overflow-x: auto;
-  padding-bottom: 0.05rem;
-  scrollbar-width: none;
-}
-
-.kanban-filters::-webkit-scrollbar {
-  display: none;
 }
 
 .kanban-filter-chip {
@@ -108,6 +104,7 @@
 
 .kanban-sort {
   display: grid;
+  flex: 0 1 12rem;
   gap: 0.3rem;
   min-width: 9.8rem;
 }
@@ -127,6 +124,8 @@
 
 .kanban-density {
   display: inline-flex;
+  flex: 0 0 auto;
+  flex-wrap: wrap;
   align-items: center;
   gap: 0.2rem;
   min-width: 0;
@@ -165,13 +164,44 @@
   color: var(--accent);
 }
 
+.kanban-toolbar-action {
+  flex: 0 0 auto;
+  min-width: 0;
+  padding: var(--kb-chip-padding-y) var(--kb-chip-padding-x);
+  border: 1px solid var(--border-subtle);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--text-muted);
+  font: inherit;
+  font-size: calc(var(--kb-control-font-size) - 0.06rem);
+  font-weight: 800;
+  cursor: pointer;
+}
+
+.kanban-toolbar-action:hover,
+.kanban-toolbar-action:focus-visible {
+  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
+  background: color-mix(in srgb, var(--accent) 8%, transparent);
+  color: var(--text-secondary);
+}
+
 @media (max-width: 980px) {
   .kanban-board__toolbar {
-    grid-template-columns: minmax(0, 1fr);
     align-items: stretch;
   }
 
+  .kanban-search,
   .kanban-sort {
+    flex-basis: 100%;
+    max-width: none;
     min-width: 0;
   }
+
+  .kanban-filters {
+    flex-basis: 100%;
+  }
+
+  .kanban-density {
+    justify-content: flex-start;
+  }
 }

src/app/features/kanban/components/kanban-board/kanban-board.component.html

@@ -63,6 +63,13 @@ <h2 id="kanban-title">Kanban</h2>
           {{ density.label }}
         </button>
       </div>
+
+      <button
+        type="button"
+        class="kanban-toolbar-action"
+        (click)="resetWorkspace()">
+        Reset workspace
+      </button>
     </div>
 
     <app-task-create (createTask)="createTask($event)"></app-task-create>

src/app/features/kanban/components/kanban-board/kanban-board.component.spec.ts

@@ -29,6 +29,7 @@ describe('KanbanBoardComponent', () => {
     | 'createTask'
     | 'updateTask'
     | 'handleDrop'
+    | 'resetWorkspace'
   >;
   let shortcutService: Pick<ShortcutService, 'formatCombo' | 'getCombo' | 'matches'>;
   let workspaceModeService: Pick<WorkspaceModeService, 'getSelectedMode'>;
@@ -62,6 +63,7 @@ describe('KanbanBoardComponent', () => {
       createTask: vi.fn(() => tasks),
       updateTask: vi.fn(() => tasks),
       handleDrop: vi.fn(() => tasks),
+      resetWorkspace: vi.fn(() => []),
     };
     shortcutService = {
       formatCombo: vi.fn((combo: string) => combo),
@@ -110,6 +112,15 @@ describe('KanbanBoardComponent', () => {
     expect(component.tasksFor('todo').map((item: Task) => item.id)).toEqual(['2']);
   });
 
+  it('keeps completed tasks visible in the default active board', () => {
+    const component = createComponent();
+
+    expect(component.tasksFor('done').map((item: Task) => item.title)).toEqual([
+      'Done alpha',
+      'Done beta',
+    ]);
+  });
+
   it('blocks focus task actions outside Focus mode', () => {
     const component = createComponent();
 
@@ -144,6 +155,18 @@ describe('KanbanBoardComponent', () => {
     expect(wellnessReminderEngine.recordTaskCreated).toHaveBeenCalled();
   });
 
+  it('resets the workspace through the kanban service', () => {
+    const component = createComponent();
+
+    component.activeQuickAddStatus = 'todo';
+    component.resetWorkspace();
+
+    expect(kanbanService.resetWorkspace).toHaveBeenCalled();
+    expect(component.tasks).toEqual([]);
+    expect(component.activeQuickAddStatus).toBeNull();
+    expect(component.boardAnnouncement).toBe('Workspace reset');
+  });
+
   function createComponent(): any {
     return new KanbanBoardComponent(
       kanbanService as KanbanService,