TaskTracker/docs/plans/2026-02-26-web-ui-redesign-design.md

# 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 |