docs: add Razor Pages migration implementation plan

11-task plan covering project setup, CSS/JS assets, Board page with Kanban drag-and-drop, detail panel, search modal, Analytics page with Chart.js, Mappings page with inline CRUD, and React app removal. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-01 21:50:15 -05:00
parent e04e9573ea
commit 13b1f14344
1 changed files with 720 additions and 0 deletions
--- a/docs/plans/2026-03-01-razor-pages-migration-plan.md
+++ b/docs/plans/2026-03-01-razor-pages-migration-plan.md
@@ -0,0 +1,720 @@
 # Razor Pages Migration Implementation Plan
 > **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
 **Goal:** Replace the React/npm web UI with Razor Pages + htmx served from the existing TaskTracker.Api project, eliminating the Node toolchain entirely.
 **Architecture:** Razor Pages added to the existing TaskTracker.Api project. Pages call repositories directly via DI (no API round-trip). htmx handles partial updates, SortableJS handles drag-and-drop, Chart.js handles analytics charts. All JS vendored as static files in wwwroot — zero npm.
 **Tech Stack:** ASP.NET Razor Pages, htmx 2.0, SortableJS, Chart.js 4, vanilla JS
 **Reference files:**
 - Design doc: `docs/plans/2026-03-01-razor-pages-migration-design.md`
 - Current React source: `TaskTracker.Web/src/` (reference for feature parity)
 - Current CSS/tokens: `TaskTracker.Web/src/index.css`
 - API controllers: `TaskTracker.Api/Controllers/` (keep unchanged)
 - Entities: `TaskTracker.Core/Entities/` (WorkTask, TaskNote, ContextEvent, AppMapping)
 - Repositories: `TaskTracker.Core/Interfaces/` (ITaskRepository, IContextEventRepository, IAppMappingRepository)
 - Enums: `TaskTracker.Core/Enums/` (WorkTaskStatus, NoteType)
 ---
 ### Task 1: Project Setup — Add Razor Pages to TaskTracker.Api
 **Files:**
 - Modify: `TaskTracker.Api/Program.cs`
 - Create: `TaskTracker.Api/Pages/_ViewImports.cshtml`
 - Create: `TaskTracker.Api/Pages/_ViewStart.cshtml`
 - Create: `TaskTracker.Api/Pages/Shared/_Layout.cshtml`
 **Step 1: Update Program.cs to register Razor Pages**
 Add `builder.Services.AddRazorPages()` after the existing service registrations. Add `app.MapRazorPages()` before `app.MapControllers()`. Remove `app.UseDefaultFiles()` (Razor Pages handle routing now). Keep `app.UseStaticFiles()` for wwwroot.
 ```csharp
 // In Program.cs, after builder.Services.AddCors(...)
 builder.Services.AddRazorPages();
 // After app.UseCors()
 app.UseStaticFiles();
 app.MapRazorPages();
 app.MapControllers();
 // Remove: app.UseDefaultFiles();
 ```
 **Step 2: Create _ViewImports.cshtml**
 ```html
@using TaskTracker.Core.Entities
@using TaskTracker.Core.Enums
@using TaskTracker.Core.DTOs
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
 ```
 **Step 3: Create _ViewStart.cshtml**
 ```html
@{
    Layout = "_Layout";
 }
 ```
 **Step 4: Create _Layout.cshtml — the app shell**
 This is the shared layout with navigation bar, search modal placeholder, and script tags. Port the exact nav structure from `TaskTracker.Web/src/components/Layout.tsx`. Include the three vendored JS libraries and `app.js`.
 The layout should have:
 - `<header>` with logo, nav links (Board, Analytics, Mappings), search button (Ctrl+K hint), and "New Task" button
 - `<main>` with `@RenderBody()`
 - `<div id="search-modal">` empty container for the search modal
 - `<div id="detail-panel">` empty container for the task detail slide-in
 - Script tags for htmx, Sortable, Chart.js, and app.js
 Nav links use `<a>` tags with `asp-page` tag helpers. Active state uses a CSS class toggled by checking `ViewContext.RouteData`.
 **Step 5: Build and verify the app starts**
 Run: `dotnet build TaskTracker.Api`
 Expected: Build succeeds with no errors.
 **Step 6: Commit**
 ```
 feat(web): add Razor Pages scaffolding to API project
 ```
 ---
 ### Task 2: Static Assets — CSS and Vendored JS
 **Files:**
 - Create: `TaskTracker.Api/wwwroot/css/site.css`
 - Create: `TaskTracker.Api/wwwroot/js/app.js` (empty placeholder)
 - Download: `TaskTracker.Api/wwwroot/lib/htmx.min.js`
 - Download: `TaskTracker.Api/wwwroot/lib/Sortable.min.js`
 - Download: `TaskTracker.Api/wwwroot/lib/chart.umd.min.js`
 **Step 1: Create site.css**
 Port the design tokens and animations from `TaskTracker.Web/src/index.css`. Convert Tailwind utility patterns used across all React components into reusable CSS classes. Key sections:
 - CSS custom properties (`:root` block with all `--color-*` tokens)
 - Reset / base styles (dark background, font, box-sizing)
 - Animations (`pulse-glow`, `live-dot`, `card-glow`)
 - Scrollbar styles
 - Selection color
 - Noise grain texture overlay
 - Layout utilities (`.flex`, `.grid`, `.flex-col`, `.items-center`, `.gap-*`, etc. — only the ones actually used)
 - Component classes: `.nav-link`, `.nav-link--active`, `.btn`, `.btn--primary`, `.btn--danger`, `.btn--amber`, `.btn--emerald`, `.stat-card`, `.badge`, `.input`, `.select`, etc.
 - Kanban-specific: `.kanban-grid`, `.kanban-column`, `.task-card`, `.task-card--active`
 - Detail panel: `.detail-overlay`, `.detail-panel`, slide-in transition classes
 - Table styles for Mappings page
 - Responsive: the app is desktop-first, minimal responsive needed
 Reference: Read every React component's className strings to ensure complete coverage. The CSS file will be ~400-600 lines.
 **Step 2: Download vendored JS libraries**
 Use curl to download from CDNs:
 - htmx 2.0: `https://unpkg.com/htmx.org@2.0.4/dist/htmx.min.js`
 - SortableJS: `https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js`
 - Chart.js 4: `https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js`
 **Step 3: Create empty app.js placeholder**
 ```javascript
 // TaskTracker app.js — command palette, keyboard shortcuts, drag-and-drop wiring
 // Will be populated in later tasks
 ```
 **Step 4: Verify static files serve**
 Run the app, navigate to `/css/site.css`, `/lib/htmx.min.js` — verify 200 responses.
 **Step 5: Commit**
 ```
 feat(web): add CSS design system and vendored JS libraries
 ```
 ---
 ### Task 3: Board Page — Kanban Columns (Server-Rendered)
 **Files:**
 - Create: `TaskTracker.Api/Pages/Board.cshtml`
 - Create: `TaskTracker.Api/Pages/Board.cshtml.cs`
 - Create: `TaskTracker.Api/Pages/Partials/_KanbanColumn.cshtml`
 - Create: `TaskTracker.Api/Pages/Partials/_TaskCard.cshtml`
 - Create: `TaskTracker.Api/Pages/Partials/_CreateTaskForm.cshtml`
 - Create: `TaskTracker.Api/Pages/Partials/_FilterBar.cshtml`
 **Step 1: Create Board.cshtml.cs (PageModel)**
 The PageModel should:
 - Inject `ITaskRepository`
 - `OnGetAsync()`: Load all tasks with subtasks (`GetAllAsync(includeSubTasks: true)`), filter to top-level only (`ParentTaskId == null`), group by status into 4 column view models. Accept optional `category` and `hasSubtasks` query params for filtering.
 - `OnGetColumnAsync(WorkTaskStatus status)`: Return a single column partial (for htmx swap after drag-and-drop).
 - `OnPostCreateTaskAsync(string title, string? category)`: Create a task, return updated Pending column partial.
 - `OnPutStartAsync(int id)`: Start task (pause current active), return updated board columns.
 - `OnPutPauseAsync(int id)`: Pause task, return updated board columns.
 - `OnPutResumeAsync(int id)`: Resume task (pause current active), return updated board columns.
 - `OnPutCompleteAsync(int id)`: Complete task, return updated board columns.
 - `OnDeleteAbandonAsync(int id)`: Abandon (delete) task, return updated board columns.
 For htmx handlers, detect `Request.Headers["HX-Request"]` and return `Partial("Partials/_KanbanColumn", columnModel)` instead of the full page.
 Define a `ColumnViewModel` record: `record ColumnViewModel(WorkTaskStatus Status, string Label, string Color, List<WorkTask> Tasks)`.
 Use the same column config as the React app:
 ```csharp
 static readonly ColumnViewModel[] Columns = [
    new(WorkTaskStatus.Pending, "Pending", "#64748b", []),
    new(WorkTaskStatus.Active, "Active", "#3b82f6", []),
    new(WorkTaskStatus.Paused, "Paused", "#eab308", []),
    new(WorkTaskStatus.Completed, "Completed", "#22c55e", []),
 ];
 ```
 Category colors dictionary — same as `CATEGORY_COLORS` in `constants.ts`:
 ```csharp
 public static readonly Dictionary<string, string> CategoryColors = new()
 {
    ["Development"] = "#6366f1",
    ["Research"] = "#06b6d4",
    ["Communication"] = "#8b5cf6",
    ["DevOps"] = "#f97316",
    ["Documentation"] = "#14b8a6",
    ["Design"] = "#ec4899",
    ["Testing"] = "#3b82f6",
    ["General"] = "#64748b",
    ["Email"] = "#f59e0b",
    ["Engineering"] = "#6366f1",
    ["LaserCutting"] = "#ef4444",
    ["Unknown"] = "#475569",
 };
 ```
 **Step 2: Create Board.cshtml**
 Renders the filter bar partial and a 4-column grid. Each column rendered via `_KanbanColumn` partial.
 ```html
@page
@model TaskTracker.Api.Pages.BoardModel
 <div class="board-page">
    <partial name="Partials/_FilterBar" model="Model" />
    <div id="kanban-board" class="kanban-grid">
        @foreach (var col in Model.Columns)
        {
            <partial name="Partials/_KanbanColumn" model="col" />
        }
    </div>
 </div>
 ```
 **Step 3: Create _KanbanColumn.cshtml**
 Each column has:
 - Column header with status label, colored dot, and task count
 - `id="column-{Status}"` for htmx targeting and SortableJS group
 - `data-status="{Status}"` for JS to read on drag-and-drop
 - List of `_TaskCard` partials
 - If Pending column: include `_CreateTaskForm` partial at the bottom
 **Step 4: Create _TaskCard.cshtml**
 Each card has:
 - `id="task-{Id}"` and `data-task-id="{Id}"` for SortableJS
 - Card glow class, active pulse class if status == Active
 - Live dot indicator if Active
 - Title, category dot, elapsed time
 - Subtask progress dots (green = completed, dim = incomplete) + count
 - `hx-get="/board?handler=TaskDetail&id={Id}"` `hx-target="#detail-panel"` on click
 Reference: `TaskTracker.Web/src/components/TaskCard.tsx` for exact structure.
 Elapsed time formatting — port `formatElapsed` to a C# helper method on the PageModel or a static helper:
 ```csharp
 public static string FormatElapsed(DateTime? startedAt, DateTime? completedAt)
 {
    if (startedAt is null) return "--";
    var start = startedAt.Value;
    var end = completedAt ?? DateTime.UtcNow;
    var mins = (int)(end - start).TotalMinutes;
    if (mins < 60) return $"{mins}m";
    var hours = mins / 60;
    var remainder = mins % 60;
    if (hours < 24) return $"{hours}h {remainder}m";
    var days = hours / 24;
    return $"{days}d {hours % 24}h";
 }
 ```
 **Step 5: Create _FilterBar.cshtml**
 Category filter chips. Each chip is an `<a>` with htmx attributes:
 - `hx-get="/board?category={cat}"` `hx-target="#kanban-board"` `hx-swap="innerHTML"`
 - Active chip styled with category color background
 - "All" chip to clear filter
 **Step 6: Create _CreateTaskForm.cshtml**
 Inline form at bottom of Pending column:
 - Text input for title
 - htmx POST: `hx-post="/board?handler=CreateTask"` `hx-target="#column-Pending"` `hx-swap="outerHTML"`
 - Form submits on Enter
 **Step 7: Build and manually test**
 Run: `dotnet run --project TaskTracker.Api`
 Navigate to `/board`. Verify 4 columns render with tasks from the database.
 **Step 8: Commit**
 ```
 feat(web): add Board page with Kanban columns and task cards
 ```
 ---
 ### Task 4: Board Page — Task Detail Panel
 **Files:**
 - Create: `TaskTracker.Api/Pages/Partials/_TaskDetail.cshtml`
 - Create: `TaskTracker.Api/Pages/Partials/_SubtaskList.cshtml`
 - Create: `TaskTracker.Api/Pages/Partials/_NotesList.cshtml`
 - Modify: `TaskTracker.Api/Pages/Board.cshtml.cs` (add handler methods)
 **Step 1: Add handler methods to Board.cshtml.cs**
 - `OnGetTaskDetailAsync(int id)`: Load task by ID (with subtasks, notes), return `_TaskDetail` partial.
 - `OnPutUpdateTaskAsync(int id, string? title, string? description, string? category, int? estimatedMinutes)`: Update task fields, return updated `_TaskDetail` partial.
 - `OnPostAddSubtaskAsync(int id, string title)`: Create subtask with `parentTaskId = id`, return updated `_SubtaskList` partial.
 - `OnPutCompleteSubtaskAsync(int id)`: Complete a subtask, return updated `_SubtaskList` partial.
 - `OnPostAddNoteAsync(int id, string content)`: Add a General note, return updated `_NotesList` partial.
 - `OnGetSearchAsync(string q)`: Search tasks by title/description/category (case-insensitive contains), return `_SearchResults` partial.
 **Step 2: Create _TaskDetail.cshtml**
 Port the structure from `TaskTracker.Web/src/components/TaskDetailPanel.tsx`:
 - Close button (`onclick` calls JS to hide the panel)
 - Title: displayed as text, with `hx-get` to swap in an edit form on click (or use JS `contenteditable` with htmx `hx-put` on blur)
 - Status badge (colored pill)
 - Category: click-to-edit (same pattern as title)
 - Description section: click-to-edit textarea
 - Time section: elapsed vs estimate, progress bar
 - Estimate: click-to-edit number input
 - Subtask list partial
 - Notes list partial
 - Action buttons at bottom (status-dependent: Start/Pause/Resume/Complete/Abandon)
 Inline editing approach: Each editable field has two states (display and edit). Use htmx `hx-get` to swap the display element with an edit form, and `hx-put` on the form to save and swap back to display. Or use a small JS helper that toggles visibility and fires htmx on blur.
 Action buttons use htmx:
 ```html
 <button hx-put="/board?handler=Start&id=@task.Id"
        hx-target="#kanban-board" hx-swap="innerHTML"
        class="btn btn--primary">Start</button>
 ```
 After a status-change action, the board columns should refresh AND the detail panel should update. Use `hx-swap-oob` (out-of-band swap) to update both targets in one response, or have the JS close the panel after the action completes.
 **Step 3: Create _SubtaskList.cshtml**
 - List of subtasks with checkbox icons
 - Completed subtasks show line-through
 - Click non-completed → htmx PUT to complete, swap subtask list
 - Inline input to add new subtask → htmx POST
 **Step 4: Create _NotesList.cshtml**
 - Notes sorted chronologically
 - Type badge (Pause=amber, Resume=blue, General=subtle)
 - Relative timestamps (port the JS `formatRelativeTime` logic to C#)
 - Inline input to add new note → htmx POST
 **Step 5: Build and manually test**
 Click a task card → detail panel should slide in. Test inline editing, subtask creation, note creation, and action buttons.
 **Step 6: Commit**
 ```
 feat(web): add task detail panel with inline editing, subtasks, and notes
 ```
 ---
 ### Task 5: Board Page — Drag-and-Drop with SortableJS
 **Files:**
 - Modify: `TaskTracker.Api/wwwroot/js/app.js`
 **Step 1: Implement SortableJS wiring in app.js**
 ```javascript
 function initKanban() {
    document.querySelectorAll('.kanban-column-body').forEach(el => {
        new Sortable(el, {
            group: 'kanban',
            animation: 150,
            ghostClass: 'task-card--ghost',
            dragClass: 'task-card--dragging',
            onEnd: function(evt) {
                const taskId = evt.item.dataset.taskId;
                const fromStatus = evt.from.dataset.status;
                const toStatus = evt.to.dataset.status;
                if (fromStatus === toStatus) return;
                let handler = null;
                if (toStatus === 'Active' && fromStatus === 'Paused') handler = 'Resume';
                else if (toStatus === 'Active') handler = 'Start';
                else if (toStatus === 'Paused') handler = 'Pause';
                else if (toStatus === 'Completed') handler = 'Complete';
                else { evt.from.appendChild(evt.item); return; } // Revert if invalid
                htmx.ajax('PUT', `/board?handler=${handler}&id=${taskId}`, {
                    target: '#kanban-board',
                    swap: 'innerHTML'
                });
            }
        });
    });
 }
 ```
 Add ghost card CSS: `.task-card--ghost` gets rotation, scale, opacity matching the React DragOverlay.
 Call `initKanban()` on DOMContentLoaded and after htmx swaps (listen for `htmx:afterSwap` event on `#kanban-board`).
 **Step 2: Add htmx:afterSwap listener to re-init Sortable after board updates**
 ```javascript
 document.addEventListener('htmx:afterSwap', function(evt) {
    if (evt.detail.target.id === 'kanban-board' ||
        evt.detail.target.closest('#kanban-board')) {
        initKanban();
    }
 });
 ```
 **Step 3: Manually test drag-and-drop**
 Drag a Pending task to Active → should fire Start API call and refresh board. Drag Active to Paused → Pause. Drag Paused to Active → Resume. Drag to Completed → Complete. Drag to Pending → should revert (snap back).
 **Step 4: Commit**
 ```
 feat(web): add drag-and-drop between Kanban columns via SortableJS
 ```
 ---
 ### Task 6: Board Page — Search Modal (Ctrl+K)
 **Files:**
 - Modify: `TaskTracker.Api/wwwroot/js/app.js`
 - Create: `TaskTracker.Api/Pages/Partials/_SearchResults.cshtml`
 - Modify: `TaskTracker.Api/Pages/Board.cshtml.cs` (add search handler)
 **Step 1: Add search handler to Board.cshtml.cs**
 `OnGetSearchAsync(string? q)`:
 - If `q` is empty/null: return recent Active/Paused/Pending tasks (up to 8)
 - If `q` has value: search tasks where title, description, or category contains `q` (case-insensitive), limit 10
 - Return `_SearchResults` partial
 **Step 2: Create _SearchResults.cshtml**
 List of results, each with:
 - Status color dot
 - Title
 - Category badge
 - Each result is a link/button that navigates to `/board?task={id}` or fires JS to open the detail panel
 **Step 3: Implement search modal in app.js**
 ~80 lines of vanilla JS:
 - Ctrl+K / Cmd+K opens the modal (toggle `#search-modal` visibility)
 - Escape closes
 - Input field with debounced htmx fetch: `hx-get="/board?handler=Search&q={value}"` `hx-target="#search-results"` `hx-trigger="input changed delay:200ms"`
 - Arrow key navigation: track selected index, move highlight, Enter to navigate
 - Backdrop click closes
 The search modal HTML structure can be in `_Layout.cshtml` (hidden by default) with the results container inside it.
 **Step 4: Manually test**
 Press Ctrl+K → modal opens. Type a search term → results appear. Arrow keys move selection. Enter opens task. Escape closes.
 **Step 5: Commit**
 ```
 feat(web): add Ctrl+K command palette search modal
 ```
 ---
 ### Task 7: Analytics Page
 **Files:**
 - Create: `TaskTracker.Api/Pages/Analytics.cshtml`
 - Create: `TaskTracker.Api/Pages/Analytics.cshtml.cs`
 **Step 1: Create Analytics.cshtml.cs**
 Inject `ITaskRepository`, `IContextEventRepository`, `IAppMappingRepository`.
 `OnGetAsync(int minutes = 1440, int? taskId = null)`:
 - Load all tasks
 - Load context events for the time range
 - Load mappings
 - Compute stat cards: open tasks count, total active time, top category
 - Compute timeline data: bucket events by hour, resolve category via mappings, serialize as JSON for Chart.js
 - Compute category breakdown: group events by resolved category, count, serialize as JSON
 - Load activity feed (first 20 events, most recent first)
 `OnGetActivityFeedAsync(int minutes, int? taskId, int offset)`:
 - Return next batch of activity feed items as a partial (for htmx "Load more")
 **Step 2: Create Analytics.cshtml**
 Port structure from `TaskTracker.Web/src/pages/Analytics.tsx`:
 - Header with time range and task filter dropdowns (use `<select>` with htmx `hx-get` on change to reload the page with new params)
 - 3 stat cards (rendered server-side)
 - Timeline section: `<canvas id="timeline-chart">` + inline `<script>` that reads JSON from a `<script type="application/json">` tag and renders a Chart.js bar chart
 - Category breakdown: `<canvas id="category-chart">` + Chart.js donut
 - Activity feed: server-rendered list with "Load more" button using htmx
 Chart.js config should match the React Recharts appearance:
 - Timeline: vertical bar chart, bars colored by category, custom tooltip
 - Category: donut chart (cutout 60%), padding angle, legend on right with colored dots and percentages
 The category color resolution logic (matching app names to categories via mappings) should be done server-side and the resolved data passed to Chart.js as JSON.
 **Step 3: Build and manually test**
 Navigate to `/analytics`. Verify stat cards, charts render, activity feed loads, "Load more" works, dropdowns filter data.
 **Step 4: Commit**
 ```
 feat(web): add Analytics page with Chart.js charts and activity feed
 ```
 ---
 ### Task 8: Mappings Page
 **Files:**
 - Create: `TaskTracker.Api/Pages/Mappings.cshtml`
 - Create: `TaskTracker.Api/Pages/Mappings.cshtml.cs`
 - Create: `TaskTracker.Api/Pages/Partials/_MappingRow.cshtml`
 - Create: `TaskTracker.Api/Pages/Partials/_MappingEditRow.cshtml`
 **Step 1: Create Mappings.cshtml.cs**
 Inject `IAppMappingRepository`.
 Handlers:
 - `OnGetAsync()`: Load all mappings, render full page
 - `OnGetEditRowAsync(int id)`: Load mapping by ID, return `_MappingEditRow` partial (for inline edit)
 - `OnGetAddRowAsync()`: Return empty `_MappingEditRow` partial (for adding new)
 - `OnPostSaveAsync(int? id, string pattern, string matchType, string category, string? friendlyName)`: Create or update mapping. If `id` is null, create; otherwise update. Return `_MappingRow` partial for the saved row.
 - `OnDeleteAsync(int id)`: Delete mapping, return empty response (htmx removes the row)
 **Step 2: Create Mappings.cshtml**
 Port structure from `TaskTracker.Web/src/pages/Mappings.tsx`:
 - Header with "App Mappings" title and "Add Rule" button
 - Table with columns: Pattern, Match Type, Category, Friendly Name, Actions
 - Each row rendered via `_MappingRow` partial
 - "Add Rule" button uses htmx to insert `_MappingEditRow` at the top of the tbody
 - Empty state when no mappings
 **Step 3: Create _MappingRow.cshtml**
 Display row with:
 - Pattern (monospace)
 - Match type badge (colored: ProcessName=indigo, TitleContains=cyan, UrlContains=orange)
 - Category with colored dot
 - Friendly name
 - Edit button: `hx-get="/mappings?handler=EditRow&id={Id}"` `hx-target="closest tr"` `hx-swap="outerHTML"`
 - Delete button: `hx-delete="/mappings?handler=Delete&id={Id}"` `hx-target="closest tr"` `hx-swap="outerHTML"` `hx-confirm="Delete this mapping rule?"`
 **Step 4: Create _MappingEditRow.cshtml**
 Inline edit row (replaces the display row) with:
 - Pattern text input (autofocus)
 - Match type select (ProcessName, TitleContains, UrlContains)
 - Category text input
 - Friendly name text input
 - Save button (check icon): `hx-post="/mappings?handler=Save"` with form values
 - Cancel button (x icon): `hx-get="/mappings?handler=Row&id={Id}"` to swap back to display (or for new rows, just remove the row)
 **Step 5: Build and manually test**
 Navigate to `/mappings`. Add a new mapping, edit it, delete it. Verify inline edit and table updates.
 **Step 6: Commit**
 ```
 feat(web): add Mappings page with inline CRUD table
 ```
 ---
 ### Task 9: Detail Panel Slide-In Animation and Polish
 **Files:**
 - Modify: `TaskTracker.Api/wwwroot/css/site.css`
 - Modify: `TaskTracker.Api/wwwroot/js/app.js`
 **Step 1: Implement slide-in animation in CSS**
 The detail panel uses CSS transitions instead of Framer Motion:
 ```css
 .detail-overlay {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
 }
 .detail-overlay--open {
    opacity: 1;
    pointer-events: auto;
 }
 .detail-panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 480px;
    z-index: 50;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    /* ... background, border, shadow */
 }
 .detail-panel--open {
    transform: translateX(0);
 }
 ```
 **Step 2: Implement panel open/close logic in app.js**
 - Opening: When htmx loads the detail partial into `#detail-panel`, add `--open` classes to overlay and panel
 - Closing: Remove `--open` classes, wait for transition end, then clear the panel content
 - Backdrop click closes
 - Escape key closes (unless editing inline)
 **Step 3: Implement inline editing helpers in app.js**
 Small helper functions for click-to-edit fields:
 - `startEdit(fieldId)`: hide display element, show input, focus
 - `cancelEdit(fieldId)`: hide input, show display element
 - `saveEdit(fieldId)`: read input value, fire htmx request, on success update display
 ~30 lines of JS.
 **Step 4: Manually test**
 Click a task card → panel slides in smoothly. Click backdrop or press Escape → panel slides out. Inline edit title, description, category, estimate. Verify smooth transitions.
 **Step 5: Commit**
 ```
 feat(web): add detail panel slide-in animation and inline editing
 ```
 ---
 ### Task 10: Remove React App and Clean Up
 **Files:**
 - Delete: `TaskTracker.Web/` directory (entire React app)
 - Modify: `.gitignore` (remove node_modules entry if no longer needed)
 **Step 1: Verify all features work**
 Before deleting, do a final pass:
 - Board: 4 columns render, drag-and-drop works, task creation works, filters work
 - Detail panel: slides in, inline edit works, subtasks/notes work, action buttons work
 - Search: Ctrl+K opens, search works, keyboard navigation works
 - Analytics: stat cards, charts, activity feed, filters all work
 - Mappings: CRUD table works with inline editing
 **Step 2: Delete the React app directory**
 ```bash
 rm -rf TaskTracker.Web/
 ```
 **Step 3: Update .gitignore**
 Remove any React/Node-specific entries. Keep entries relevant to .NET.
 **Step 4: Build the full solution**
 Run: `dotnet build`
 Expected: All projects build successfully. No references to TaskTracker.Web.
 **Step 5: Commit**
 ```
 feat(web): remove React app — migration to Razor Pages complete
 ```
 ---
 ### Task 11: Final Integration Test
 **Step 1: Run the app and test end-to-end**
 Start the API: `dotnet run --project TaskTracker.Api`
 Test checklist:
 - [ ] Navigate to `/board` — Kanban columns load with tasks
 - [ ] Create a new task via inline form
 - [ ] Drag task from Pending to Active
 - [ ] Drag task from Active to Paused
 - [ ] Drag task from Paused to Active (resume)
 - [ ] Drag task to Completed
 - [ ] Click task card — detail panel slides in
 - [ ] Edit title, description, category, estimate inline
 - [ ] Add a subtask, complete it
 - [ ] Add a note
 - [ ] Use action buttons (Start, Pause, Resume, Complete, Abandon)
 - [ ] Ctrl+K search — type query, arrow navigate, enter to select
 - [ ] Category filter chips on board
 - [ ] Navigate to `/analytics` — stat cards, charts, activity feed
 - [ ] Change time range and task filter dropdowns
 - [ ] Click "Load more" on activity feed
 - [ ] Navigate to `/mappings` — table renders
 - [ ] Add a new mapping rule
 - [ ] Edit an existing mapping
 - [ ] Delete a mapping
 - [ ] Verify API endpoints still work (`/api/tasks`, `/api/mappings`, `/swagger`)
 **Step 2: Verify external consumers still work**
 - MCP server: uses `/api/*` endpoints — unchanged
 - WindowWatcher: uses `/api/context` — unchanged
 - Chrome extension: uses `/api/*` — unchanged
 - Swagger UI: `/swagger` — still accessible
 **Step 3: Commit any final fixes**
 ```
 fix(web): address integration test findings
 ```