chore: initial commit of TaskTracker project

Existing ASP.NET API with vanilla JS SPA, WindowWatcher, Chrome extension, and MCP server. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-26 22:08:45 -05:00
commit e12f78c479
66 changed files with 5170 additions and 0 deletions
@@ -0,0 +1,200 @@
+# TaskTracker Web UI Redesign
+
+**Date**: 2026-02-26
+**Status**: Approved
+
+## Overview
+
+Ground-up redesign of the TaskTracker web UI. Replace the current vanilla JS SPA in `wwwroot/` with a React-based Kanban board application in a separate `TaskTracker.Web` project.
+
+## Tech Stack
+
+- **Framework**: React 19, TypeScript
+- **Build**: Vite
+- **Styling**: Tailwind CSS
+- **Drag-and-drop**: @dnd-kit/core + @dnd-kit/sortable
+- **Data fetching**: @tanstack/react-query
+- **Routing**: react-router-dom
+- **Charts**: Recharts
+- **HTTP**: Axios
+- **Icons**: lucide-react
+- **Font**: Inter
+
+Dev server on port 5173, proxies `/api` to `localhost:5200`.
+
+## Project Structure
+
+```
+TaskTracker.Web/
+├── index.html
+├── package.json
+├── vite.config.ts
+├── tailwind.config.ts
+├── tsconfig.json
+├── src/
+│   ├── main.tsx
+│   ├── App.tsx
+│   ├── api/
+│   │   ├── client.ts          # Axios wrapper → localhost:5200
+│   │   ├── tasks.ts           # useTasksQuery, useStartTask, etc.
+│   │   ├── context.ts         # useContextSummary, useRecentEvents
+│   │   └── mappings.ts        # useMappings, useCreateMapping
+│   ├── components/
+│   │   ├── Layout.tsx          # Sidebar + top bar + content area
+│   │   ├── KanbanBoard.tsx
+│   │   ├── KanbanColumn.tsx
+│   │   ├── TaskCard.tsx
+│   │   ├── TaskModal.tsx
+│   │   ├── SearchBar.tsx
+│   │   └── ...
+│   ├── pages/
+│   │   ├── Board.tsx           # Kanban board (main view)
+│   │   ├── Analytics.tsx       # Context tracking visualizations
+│   │   ├── Mappings.tsx        # App-to-category mapping management
+│   │   └── Settings.tsx        # (future)
+│   ├── types/                  # TypeScript types matching API DTOs
+│   └── lib/                    # Utilities, constants, theme tokens
+└── public/
+```
+
+## Pages & Features
+
+### Kanban Board (main page)
+
+Four columns: Pending, Active, Paused, Completed.
+
+**Drag-and-drop behavior**:
+- Pending → Active: calls `PUT /tasks/{id}/start` (auto-pauses any active task)
+- Active → Paused: calls `PUT /tasks/{id}/pause`
+- Paused → Active: calls `PUT /tasks/{id}/resume`
+- Any → Completed: calls `PUT /tasks/{id}/complete`
+- Dragging to Pending from other columns is blocked
+- Optimistic updates via TanStack Query; rolls back on API error
+
+**Task card displays**:
+- Title
+- Category badge (color-coded)
+- Elapsed time (live-updating for active task)
+- Progress bar (actual vs estimated time, if estimate set)
+- Subtask count indicator (e.g., "2/4 subtasks done")
+- Active task gets a pulsing cyan accent border
+
+**"+ Add Task"** button in Pending column opens quick-create form.
+
+**Card click** opens the Task Detail Panel.
+
+**Filter bar** below board header:
+- Category filter chips
+- Date range picker
+- "Has subtasks" toggle
+- Filters are additive (AND), shown as dismissible chips
+
+### Task Detail Panel
+
+Slide-over panel from the right (~400px), board visible behind (dimmed).
+
+**Sections**:
+- **Header**: Title (inline editable), status, category dropdown
+- **Description**: Inline editable text area
+- **Time**: Elapsed display, estimate input field, progress bar (actual/estimated)
+- **Subtasks**: Checklist of child tasks. Check to complete, "+" to add new subtask (creates child task via API)
+- **Notes**: Chronological list with type badges (Pause, Resume, General). "+" for inline add
+- **Actions**: Context-aware buttons (Start/Pause/Resume/Complete/Abandon)
+
+Close with Escape or click outside.
+
+### Analytics Page
+
+Three visualization sections, filterable by time range and task.
+
+**Filters** (top bar):
+- Time range: Today, Last 7 days, Last 30 days, Custom
+- Task filter: All Tasks or specific task
+
+**Timeline**:
+- Horizontal swim lane showing app usage blocks, color-coded by category
+- Task lifecycle markers (started/paused/resumed/completed) as annotations
+- Hover shows app name, window title, duration
+
+**Category Breakdown**:
+- Donut chart + horizontal bar list with time and percentage per category
+- Colors match category badges
+
+**Activity Feed**:
+- Reverse-chronological log of context events
+- Each row: colored dot, timestamp, app name, window title/URL
+- Task lifecycle events interleaved
+- Paginated with "Load more"
+
+### Mappings Page
+
+CRUD table for app-to-category rules.
+- Columns: Pattern, Match Type, Category (color badge), Friendly Name, Edit/Delete actions
+- "+ Add Rule" opens inline form row at top
+- Inline editing on existing rows
+
+### Search
+
+Global search bar in top bar, always visible.
+- Client-side search over task titles and descriptions
+- Results as dropdown below search bar
+- Keyboard navigable (arrows, Enter, Escape)
+
+## New Features (require API changes)
+
+- **Time estimates**: New field on WorkTask entity for estimated duration. Progress bar = elapsed / estimated.
+- **Subtask progress rollup**: Parent task cards show child completion count (may be client-side calculation from existing data).
+
+## Visual Design
+
+**Palette**:
+- Background: `#0f1117` (deep charcoal)
+- Surface/cards: `#1a1d27`
+- Accent primary: `#6366f1` (electric indigo)
+- Accent secondary: `#06b6d4` (vivid cyan)
+- Success: `#10b981` (emerald)
+- Warning: `#f59e0b` (amber)
+- Danger: `#f43f5e` (rose)
+- Per-category saturated colors: dev=indigo, research=cyan, comms=violet, devops=orange
+
+**Typography**:
+- Font: Inter
+- Body: 13px / Medium (500)
+- Labels: 11px
+- Headings: 18px / Semibold (600)
+
+**Visual details**:
+- Subtle gradient on sidebar
+- Colored left border on task cards (category color)
+- Active task: soft glowing cyan border animation
+- Column headers: subtle colored underline per status
+- Smooth transitions on drag, hover, panel open/close
+- Colored-tint shadows for depth
+
+**Layout**:
+- Sidebar: ~60px collapsed, ~200px expanded, icon + label nav
+- Top bar: search, minimal
+- Board: full remaining width, columns flex evenly
+- Detail panel: ~400px, slides from right, overlays board
+
+## API Endpoints Used
+
+| Endpoint | Used By |
+|----------|---------|
+| `GET /api/tasks` | Board, Search |
+| `GET /api/tasks/active` | Board (active indicator) |
+| `GET /api/tasks/{id}` | Detail panel |
+| `POST /api/tasks` | New task, new subtask |
+| `PUT /api/tasks/{id}/start` | Drag to Active |
+| `PUT /api/tasks/{id}/pause` | Drag to Paused |
+| `PUT /api/tasks/{id}/resume` | Drag to Active from Paused |
+| `PUT /api/tasks/{id}/complete` | Drag to Completed, subtask checkbox |
+| `DELETE /api/tasks/{id}` | Abandon button |
+| `GET /api/tasks/{taskId}/notes` | Detail panel notes |
+| `POST /api/tasks/{taskId}/notes` | Add note |
+| `GET /api/context/summary` | Analytics category breakdown |
+| `GET /api/context/recent` | Analytics timeline + feed |
+| `GET /api/mappings` | Mappings page, category colors |
+| `POST /api/mappings` | Add mapping |
+| `PUT /api/mappings/{id}` | Edit mapping |
+| `DELETE /api/mappings/{id}` | Delete mapping |