@prmichaelsen/acp-visualizer 0.1.0

package/agent/tasks/milestone-2-dashboard-views-interaction/task-5-build-dashboard-layout-routing.md

@@ -0,0 +1,178 @@
+# Task 5: Build Dashboard Layout & Routing
+
+**Milestone**: [M2 - Dashboard Views & Interaction](../../milestones/milestone-2-dashboard-views-interaction.md)
+**Design Reference**: [Dashboard Layout & Routing](../../design/local.dashboard-layout-routing.md)
+**Estimated Time**: 3 hours
+**Dependencies**: Task 4
+**Status**: Not Started
+
+---
+
+## Objective
+
+Build the application shell with sidebar navigation, header bar, and file-based routing for all pages. This establishes the persistent layout frame that all dashboard views render within.
+
+---
+
+## Context
+
+With the data pipeline complete from Milestone 1, the app needs a proper navigation shell before individual views can be built. The layout follows a standard admin dashboard pattern: fixed sidebar on the left for navigation, a header bar showing project metadata, and a main content area where route components render via the TanStack Router Outlet. All subsequent M2 tasks depend on this layout being in place.
+
+---
+
+## Steps
+
+### 1. Update `app/routes/__root.tsx` with full layout
+
+Replace the minimal root layout with a flex container that includes the Sidebar component, and a main content area with Header and Outlet:
+
+```typescript
+// app/routes/__root.tsx
+import { createRootRoute, Outlet } from "@tanstack/react-router";
+import { Sidebar } from "../components/Sidebar";
+import { Header } from "../components/Header";
+
+export const Route = createRootRoute({
+  component: RootLayout,
+});
+
+function RootLayout() {
+  return (
+    <div className="dark min-h-screen bg-gray-950 text-gray-100 flex">
+      <Sidebar />
+      <div className="flex-1 flex flex-col">
+        <Header />
+        <main className="flex-1 overflow-auto p-6">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  );
+}
+```
+
+### 2. Create `app/components/Sidebar.tsx`
+
+Build the sidebar navigation component:
+
+- Fixed width of 14rem (`w-56`)
+- Right border (`border-r border-gray-800`)
+- Dark background (`bg-gray-950`)
+- Nav items: Overview (`/`), Milestones (`/milestones`), Tasks (`/tasks`), Activity (`/activity`)
+- Each nav item uses `<Link>` from TanStack Router with active state styling
+- SearchTrigger button at the bottom of the sidebar
+- Use `lucide-react` icons for each nav item (LayoutDashboard, Flag, CheckSquare, Activity, Search)
+
+### 3. Create `app/components/Header.tsx`
+
+Build the header bar component:
+
+- Displays project name and version from route context or loader data
+- Includes a StatusBadge showing overall project status
+- Includes a ProgressBar showing overall completion percentage
+- Styled with bottom border (`border-b border-gray-800`) and padding
+
+### 4. Create `app/components/StatusBadge.tsx`
+
+Build the color-coded status pill component:
+
+- Accepts a `status` prop: `"completed"` | `"in_progress"` | `"not_started"` | `"blocked"` | `"skipped"`
+- Renders as an inline pill with rounded corners (`rounded-full px-2.5 py-0.5 text-xs font-medium`)
+- Color mapping:
+  - `completed` → green (`bg-green-500/20 text-green-400`)
+  - `in_progress` → blue (`bg-blue-500/20 text-blue-400`)
+  - `not_started` → gray (`bg-gray-500/20 text-gray-400`)
+  - `blocked` → red (`bg-red-500/20 text-red-400`)
+  - `skipped` → purple (`bg-purple-500/20 text-purple-400`)
+
+### 5. Create `app/components/ProgressBar.tsx`
+
+Build the horizontal progress bar component:
+
+- Accepts `value` (0–100) and optional `size` (`"sm"` | `"md"`) props
+- Horizontal bar with gray-800 background track
+- Filled portion uses green-500 at 100%, blue-500 otherwise
+- Shows percentage text to the right of the bar
+- `sm` size: `h-1.5`, `md` size: `h-2.5`
+- Smooth width transition (`transition-all duration-300`)
+
+### 6. Create route placeholder files
+
+Create placeholder route components for pages to be built in subsequent tasks:
+
+- `app/routes/milestones.tsx` — "Milestones" heading with placeholder text
+- `app/routes/tasks.tsx` — "Tasks" heading with placeholder text
+- `app/routes/search.tsx` — "Search" heading with placeholder text
+
+Each route file should use `createFileRoute` and export a basic component.
+
+### 7. Apply design token styling
+
+Ensure all components follow the design token palette:
+
+- Background: `bg-gray-950`
+- Surfaces: `bg-gray-900`
+- Borders: `border-gray-800`
+- Primary text: `text-gray-100`
+- Secondary text: `text-gray-400`
+- Font: Inter for sans, JetBrains Mono for mono
+
+---
+
+## Verification
+
+- [ ] Sidebar renders at 14rem width with all nav items (Overview, Milestones, Tasks, Activity)
+- [ ] Clicking nav links navigates between routes without full page reload
+- [ ] Active nav item is visually highlighted
+- [ ] Header displays project name and version
+- [ ] StatusBadge renders correct colors for each status value
+- [ ] ProgressBar fills proportionally to value and shows percentage
+- [ ] ProgressBar is green at 100%, blue otherwise
+- [ ] All route placeholders render when navigated to
+- [ ] Dark theme styling applied consistently (bg-gray-950, gray-800 borders, gray-100 text)
+- [ ] Layout is responsive — main content area fills remaining space
+
+---
+
+## Expected Output
+
+**File Structure**:
+```
+app/
+├── components/
+│   ├── Header.tsx
+│   ├── ProgressBar.tsx
+│   ├── Sidebar.tsx
+│   └── StatusBadge.tsx
+├── routes/
+│   ├── __root.tsx (updated)
+│   ├── index.tsx (existing)
+│   ├── milestones.tsx (new)
+│   ├── tasks.tsx (new)
+│   └── search.tsx (new)
+```
+
+**Key Files Created/Modified**:
+- `app/routes/__root.tsx`: Updated with full layout (Sidebar + Header + Outlet)
+- `app/components/Sidebar.tsx`: Navigation sidebar with route links
+- `app/components/Header.tsx`: Project info header bar
+- `app/components/StatusBadge.tsx`: Reusable color-coded status pill
+- `app/components/ProgressBar.tsx`: Reusable horizontal progress bar
+- `app/routes/milestones.tsx`: Placeholder milestones page
+- `app/routes/tasks.tsx`: Placeholder tasks page
+- `app/routes/search.tsx`: Placeholder search page
+
+---
+
+## Notes
+
+- StatusBadge and ProgressBar are foundational components reused across all views in later tasks
+- The sidebar width of 14rem is fixed; the main content area uses flex-1 to fill remaining space
+- Search trigger in the sidebar will be wired to GlobalSearchContext in Task 9
+- Route context for header data will be populated by loader functions added in Task 6
+
+---
+
+**Next Task**: [Task 6: Build Overview Page](./task-6-build-overview-page.md)
+**Related Design Docs**: [Dashboard Layout & Routing](../../design/local.dashboard-layout-routing.md)
+**Estimated Completion Date**: TBD

package/agent/tasks/milestone-2-dashboard-views-interaction/task-6-build-overview-page.md

@@ -0,0 +1,141 @@
+# Task 6: Build Overview Page
+
+**Milestone**: [M2 - Dashboard Views & Interaction](../../milestones/milestone-2-dashboard-views-interaction.md)
+**Design Reference**: [Dashboard Layout & Routing](../../design/local.dashboard-layout-routing.md)
+**Estimated Time**: 2 hours
+**Dependencies**: Task 5
+**Status**: Not Started
+
+---
+
+## Objective
+
+Build the dashboard home page showing project metadata, milestone summary, next steps, and blockers. This is the first page users see and provides an at-a-glance overview of the entire project's progress.
+
+---
+
+## Context
+
+The overview page replaces the raw JSON dump from Milestone 1 with a structured, scannable dashboard. It surfaces the most important information — overall status, milestone progress, upcoming work, and blockers — in a card-based layout. This page uses the StatusBadge and ProgressBar components from Task 5 and pulls data from the progress.yaml pipeline established in Milestone 1.
+
+---
+
+## Steps
+
+### 1. Update `app/routes/index.tsx`
+
+Replace the placeholder content with structured overview components. Wire up the route's `beforeLoad` or `loader` to fetch parsed progress data via the server function from Milestone 1.
+
+```typescript
+export const Route = createFileRoute("/")({
+  loader: async () => {
+    const data = await getProgressData();
+    return { data };
+  },
+  component: OverviewPage,
+});
+```
+
+### 2. Create project metadata card
+
+Display at the top of the overview page:
+
+- Project name (large heading)
+- Version number
+- StatusBadge showing overall project status
+- Start date (formatted)
+- Description text
+
+Style with the card pattern: `bg-gray-900/50 border border-gray-800 rounded-xl p-4`.
+
+### 3. Create overall progress section
+
+Below the metadata card, show:
+
+- A large ProgressBar (md size) showing overall completion percentage
+- Computed from milestone task completion across all milestones
+- Summary stats: total milestones, completed milestones, total tasks, completed tasks
+
+### 4. Create milestone summary list
+
+Compact rows showing each milestone at a glance:
+
+- Each row: milestone name, StatusBadge, ProgressBar (sm size), task count (e.g., "3/7 tasks")
+- Rows are clickable and navigate to `/milestones` (or anchor to the specific milestone)
+- Styled as a list within a card container
+
+### 5. Create `app/components/NextSteps.tsx`
+
+Renders the `next_steps` array from progress.yaml as a checklist:
+
+- Each item displayed as a list item with a circle/check icon
+- Styled with left border accent (`border-l-2 border-blue-500`)
+- If `next_steps` is empty or undefined, render nothing (no empty state needed)
+
+### 6. Create `app/components/BlockersDisplay.tsx`
+
+Renders `current_blockers` with warning styling:
+
+- Only renders when blockers array is non-empty
+- Each blocker shown with a warning icon (AlertTriangle from lucide-react)
+- Styled with warning colors: `bg-red-500/10 border border-red-500/20 text-red-400`
+- If no blockers, component returns null (renders nothing)
+
+### 7. Apply card layout styling
+
+Arrange all sections in a responsive grid/stack layout:
+
+- Metadata card spans full width at top
+- Progress section below metadata
+- Milestone summary and next steps side by side (or stacked on narrow viewports)
+- Blockers at the bottom (when present)
+- Consistent spacing: `space-y-6` between sections
+- All cards use: `bg-gray-900/50 border border-gray-800 rounded-xl p-4`
+
+---
+
+## Verification
+
+- [ ] Overview page shows project name, version, status badge, start date, and description
+- [ ] Overall progress bar displays correct completion percentage
+- [ ] Milestone summary lists all milestones with name, status, progress, and task count
+- [ ] NextSteps component renders next_steps items as a checklist
+- [ ] BlockersDisplay shows blockers with warning styling when blockers exist
+- [ ] BlockersDisplay renders nothing when there are no blockers
+- [ ] Empty states handled gracefully (no milestones, no next steps)
+- [ ] Card styling is consistent across all sections
+- [ ] Data loads via SSR (page renders with data on first paint, no loading spinner)
+
+---
+
+## Expected Output
+
+**File Structure**:
+```
+app/
+├── components/
+│   ├── BlockersDisplay.tsx (new)
+│   └── NextSteps.tsx (new)
+├── routes/
+│   └── index.tsx (updated)
+```
+
+**Key Files Created/Modified**:
+- `app/routes/index.tsx`: Updated with structured overview layout and data loader
+- `app/components/NextSteps.tsx`: Checklist component for next_steps array
+- `app/components/BlockersDisplay.tsx`: Warning display for current_blockers array
+
+---
+
+## Notes
+
+- The overview page is the default route (`/`) and the first thing users see
+- Progress percentage is computed client-side from the milestone/task data, not stored in progress.yaml
+- The milestone summary rows on this page are a compact version; the full milestone view is in Task 7
+- StatusBadge and ProgressBar components come from Task 5
+
+---
+
+**Next Task**: [Task 7: Implement Milestone Table View](./task-7-implement-milestone-table-view.md)
+**Related Design Docs**: [Dashboard Layout & Routing](../../design/local.dashboard-layout-routing.md)
+**Estimated Completion Date**: TBD

package/agent/tasks/milestone-2-dashboard-views-interaction/task-7-implement-milestone-table-view.md

@@ -0,0 +1,153 @@
+# Task 7: Implement Milestone Table View
+
+**Milestone**: [M2 - Dashboard Views & Interaction](../../milestones/milestone-2-dashboard-views-interaction.md)
+**Design Reference**: [Table & Tree Views](../../design/local.table-tree-views.md)
+**Estimated Time**: 3 hours
+**Dependencies**: Task 5
+**Status**: Not Started
+
+---
+
+## Objective
+
+Build a sortable milestone table using @tanstack/react-table with expandable row detail. This provides the primary data-dense view for examining milestone status, progress, and associated tasks.
+
+---
+
+## Context
+
+The milestone table is the core data view of the dashboard, allowing users to see all milestones in a structured, sortable format. It uses @tanstack/react-table for column management, sorting, and row expansion. Each row can be expanded to reveal the tasks within that milestone, displayed via a reusable TaskList component. The table also introduces the ViewToggle component that switches between table and tree views (tree view is built in Task 8).
+
+---
+
+## Steps
+
+### 1. Create `app/components/MilestoneTable.tsx`
+
+Build the table component using TanStack Table:
+
+```typescript
+import { createColumnHelper, useReactTable, getCoreRowModel, getSortedRowModel, getExpandedRowModel } from "@tanstack/react-table";
+```
+
+- Use `createColumnHelper` to define typed columns
+- Use `useReactTable` with `getCoreRowModel`, `getSortedRowModel`, and `getExpandedRowModel`
+- Render table with `<table>` elements styled with Tailwind (border-collapse, full width)
+
+### 2. Define table columns
+
+Configure the following columns:
+
+| Column | Width | Content |
+|--------|-------|---------|
+| Expand | 40px | Chevron icon (ChevronRight/ChevronDown from lucide-react) |
+| Name | flex | Milestone name, linked to detail |
+| Status | 120px | StatusBadge component |
+| Progress | 140px | ProgressBar (sm) + percentage text |
+| Tasks | 80px | Completed/total count (e.g., "3/7") |
+| Started | 100px | Start date, formatted |
+| Est. Weeks | 80px | Estimated duration in weeks |
+
+### 3. Implement sort headers
+
+- Clicking a column header toggles sort direction (asc → desc → none)
+- Show visual sort indicators: ChevronUp for ascending, ChevronDown for descending
+- Sortable columns: Name, Status, Progress, Tasks, Started, Est. Weeks
+- Default sort: by natural order (no initial sort)
+
+### 4. Implement row expansion
+
+- Clicking the chevron icon in the first column toggles row expansion
+- Expanded row reveals a TaskList component showing all tasks for that milestone
+- Use `getExpandedRowModel` from TanStack Table
+- Expanded content spans all columns with appropriate padding and indentation
+
+### 5. Create `app/components/TaskList.tsx`
+
+Build the task list component for expanded milestone rows:
+
+- Indented list (`pl-8`) showing tasks within a milestone
+- Each task row shows: StatusDot, task name, truncated notes (max 80 chars), ExtraFieldsBadge
+- Styled with subtle row separators (`border-b border-gray-800/50`)
+- Used by both the table view (Task 7) and tree view (Task 8)
+
+### 6. Create `app/components/ExtraFieldsBadge.tsx`
+
+Build the badge component for tasks with extra/custom fields:
+
+- Shows a "+N" count indicating how many extra fields exist beyond standard fields (name, status, notes)
+- Only renders when extra fields are present
+- On hover, shows a tooltip with the extra fields as formatted JSON
+- Styled as a small pill: `bg-gray-700 text-gray-300 text-xs rounded px-1.5`
+
+### 7. Update `app/routes/milestones.tsx`
+
+Wire up the milestones route:
+
+- Add `beforeLoad` or `loader` to fetch progress data via SSR
+- Render a page header with "Milestones" title and ViewToggle
+- Render MilestoneTable as the default view
+- Handle empty state: show "No milestones found" message when data has no milestones
+
+### 8. Create `app/components/ViewToggle.tsx`
+
+Build the table/tree toggle component:
+
+- Two buttons: "Table" and "Tree" (or icons: List and GitBranch from lucide-react)
+- Active view button is visually highlighted (`bg-gray-700` vs `bg-transparent`)
+- Accepts `view` and `onViewChange` props
+- Compact styling: `inline-flex rounded-lg border border-gray-700`
+
+---
+
+## Verification
+
+- [ ] Table renders all milestones from progress data
+- [ ] All columns display correct data (name, status badge, progress bar, task count, dates)
+- [ ] Clicking column headers sorts the table (ascending, descending, none)
+- [ ] Sort direction indicators (chevrons) appear on sorted columns
+- [ ] Clicking expand chevron reveals TaskList for that milestone
+- [ ] TaskList shows all tasks with StatusDot, name, truncated notes
+- [ ] ExtraFieldsBadge appears for tasks with extra fields and shows "+N" count
+- [ ] ExtraFieldsBadge tooltip shows extra field details on hover
+- [ ] ViewToggle renders with Table/Tree options
+- [ ] Empty state handled when no milestones exist
+- [ ] Table scrolls horizontally on narrow viewports if needed
+
+---
+
+## Expected Output
+
+**File Structure**:
+```
+app/
+├── components/
+│   ├── ExtraFieldsBadge.tsx (new)
+│   ├── MilestoneTable.tsx (new)
+│   ├── TaskList.tsx (new)
+│   └── ViewToggle.tsx (new)
+├── routes/
+│   └── milestones.tsx (updated)
+```
+
+**Key Files Created/Modified**:
+- `app/components/MilestoneTable.tsx`: Sortable milestone table with row expansion
+- `app/components/TaskList.tsx`: Reusable task list for expanded rows (shared with tree view)
+- `app/components/ExtraFieldsBadge.tsx`: Badge showing extra field count with tooltip
+- `app/components/ViewToggle.tsx`: Table/Tree view toggle buttons
+- `app/routes/milestones.tsx`: Updated with data loader and table rendering
+
+---
+
+## Notes
+
+- TaskList is intentionally extracted as a shared component because Task 8 (tree view) reuses it
+- ExtraFieldsBadge handles the schema-agnostic nature of progress.yaml — tasks can have arbitrary extra fields
+- The table uses native `<table>` elements rather than CSS grid for better accessibility and column alignment
+- @tanstack/react-table should already be installed from Task 1
+
+---
+
+**Next Task**: [Task 8: Implement Milestone Tree View](./task-8-implement-milestone-tree-view.md)
+**Related Design Docs**: [Table & Tree Views](../../design/local.table-tree-views.md)
+**Estimated Completion Date**: TBD

package/agent/tasks/milestone-2-dashboard-views-interaction/task-8-implement-milestone-tree-view.md

@@ -0,0 +1,174 @@
+# Task 8: Implement Milestone Tree View
+
+**Milestone**: [M2 - Dashboard Views & Interaction](../../milestones/milestone-2-dashboard-views-interaction.md)
+**Design Reference**: [Table & Tree Views](../../design/local.table-tree-views.md)
+**Estimated Time**: 2 hours
+**Dependencies**: Task 7 (shares TaskList component)
+**Status**: Not Started
+
+---
+
+## Objective
+
+Build an expandable tree view showing milestone-to-task hierarchy with collapse animation. This provides an alternative to the table view, emphasizing the hierarchical structure of milestones and their tasks.
+
+---
+
+## Context
+
+While the table view (Task 7) is data-dense and sortable, the tree view offers a more visual, hierarchy-focused way to browse milestones and tasks. Users can toggle between views using the ViewToggle component. The tree view reuses the TaskList component from Task 7, and adds smooth expand/collapse animations via a custom useCollapse hook. This view is especially useful for quickly scanning which milestones have incomplete tasks.
+
+---
+
+## Steps
+
+### 1. Create `app/components/MilestoneTree.tsx`
+
+Build the tree view component:
+
+- Renders each milestone as an expandable row
+- Each row shows: expand/collapse chevron, milestone name, ProgressBar (sm), task count
+- Rows styled as cards: `bg-gray-900/50 border border-gray-800 rounded-lg` with hover effect
+- Clicking a row toggles expansion to show its tasks
+
+```typescript
+interface MilestoneTreeProps {
+  milestones: Milestone[];
+}
+```
+
+### 2. Implement expand/collapse state
+
+Manage expansion state with a Set of milestone IDs:
+
+```typescript
+const [expanded, setExpanded] = useState<Set<string>>(new Set());
+
+const toggleExpanded = (id: string) => {
+  setExpanded((prev) => {
+    const next = new Set(prev);
+    if (next.has(id)) next.delete(id);
+    else next.add(id);
+    return next;
+  });
+};
+```
+
+### 3. Implement smooth collapse animation with useCollapse hook
+
+Use the useCollapse hook for smooth height animation when expanding/collapsing milestone task lists:
+
+- Wrap the expandable content (TaskList) in a div that uses the useCollapse ref
+- Animation should feel smooth and natural (300ms cubic-bezier transition)
+- Content should not flash or jump during animation
+
+### 4. Create `app/lib/useCollapse.ts`
+
+Build the custom collapse hook:
+
+```typescript
+export function useCollapse(isOpen: boolean) {
+  const ref = useRef<HTMLDivElement>(null);
+  // ...
+}
+```
+
+- Uses a ref to measure the natural height of the content
+- When `isOpen` is true: animate height from 0 to measured height, then set to `auto`
+- When `isOpen` is false: animate height from current to 0
+- CSS transition: `height 300ms cubic-bezier(0.4, 0, 0.2, 1)`
+- Set `overflow: hidden` during animation
+- Return `{ ref, style }` for the consumer to apply
+
+### 5. Reuse TaskList component from Task 7
+
+The expanded content for each milestone tree node renders the TaskList component:
+
+- Same TaskList from Task 7 — no duplication
+- Shows StatusDot, task name, truncated notes, ExtraFieldsBadge
+- Indented within the tree node
+
+### 6. Create `app/components/StatusDot.tsx`
+
+Build the small status indicator dot:
+
+- Renders different icons/shapes based on status:
+  - `completed` → filled green circle with checkmark (`text-green-500`)
+  - `in_progress` → filled blue circle (`text-blue-500`)
+  - `not_started` → outlined gray circle (`text-gray-500`)
+- Small size: `w-3 h-3` or equivalent
+- Used in TaskList rows alongside task names
+
+### 7. Update `app/routes/milestones.tsx`
+
+Wire the ViewToggle to switch between MilestoneTable and MilestoneTree:
+
+```typescript
+const [view, setView] = useState<"table" | "tree">("table");
+
+return (
+  <div>
+    <div className="flex items-center justify-between mb-6">
+      <h1 className="text-2xl font-bold">Milestones</h1>
+      <ViewToggle view={view} onViewChange={setView} />
+    </div>
+    {view === "table" ? (
+      <MilestoneTable milestones={milestones} />
+    ) : (
+      <MilestoneTree milestones={milestones} />
+    )}
+  </div>
+);
+```
+
+---
+
+## Verification
+
+- [ ] Tree view renders all milestones as expandable rows
+- [ ] Each milestone row shows chevron, name, progress bar, and task count
+- [ ] Clicking a milestone row expands it to show the task list
+- [ ] Clicking again collapses the task list
+- [ ] Expand/collapse animation is smooth (300ms, no jumping or flashing)
+- [ ] TaskList in tree view matches TaskList in table view (same component)
+- [ ] StatusDot shows correct icon and color for each status (completed=green check, in_progress=blue dot, not_started=gray circle)
+- [ ] ViewToggle switches between table and tree views
+- [ ] View state persists when data updates (expanded milestones stay expanded)
+- [ ] Multiple milestones can be expanded simultaneously
+
+---
+
+## Expected Output
+
+**File Structure**:
+```
+app/
+├── components/
+│   ├── MilestoneTree.tsx (new)
+│   └── StatusDot.tsx (new)
+├── lib/
+│   └── useCollapse.ts (new)
+├── routes/
+│   └── milestones.tsx (updated)
+```
+
+**Key Files Created/Modified**:
+- `app/components/MilestoneTree.tsx`: Expandable tree view of milestones and tasks
+- `app/components/StatusDot.tsx`: Small colored status indicator dot
+- `app/lib/useCollapse.ts`: Custom hook for smooth expand/collapse height animation
+- `app/routes/milestones.tsx`: Updated to wire ViewToggle between table and tree views
+
+---
+
+## Notes
+
+- The tree view is intentionally simpler than the table view — it does not support sorting
+- useCollapse measures content height dynamically, so it works with variable-height task lists
+- StatusDot is a smaller, simpler alternative to StatusBadge — used inline in task rows where space is tight
+- Multiple milestones can be expanded at the same time (not accordion behavior)
+
+---
+
+**Next Task**: [Task 9: Implement Search & Filtering](./task-9-implement-search-filtering.md)
+**Related Design Docs**: [Table & Tree Views](../../design/local.table-tree-views.md)
+**Estimated Completion Date**: TBD