@prmichaelsen/acp-visualizer 0.8.1 → 0.8.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prmichaelsen/acp-visualizer",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "type": "module",
   "description": "Browser-based dashboard for visualizing ACP progress.yaml data",
   "bin": {

package/src/components/DocumentDetail.tsx

@@ -0,0 +1,100 @@
+import { useState, useEffect, useMemo } from 'react'
+import { Breadcrumb } from './Breadcrumb'
+import { MarkdownContent, buildLinkMap } from './MarkdownContent'
+import { getMarkdownContent, listAgentDirectory } from '../services/markdown.service'
+import { useProgressData } from '../contexts/ProgressContext'
+import type { MarkdownResult, AgentFile } from '../services/markdown.service'
+
+interface DocumentDetailProps {
+  slug: string
+  dirPath: string
+  sectionLabel: string
+  sectionHref: string
+}
+
+/** Read ?repo=owner/repo from URL */
+function getGitHubParams(): { owner: string; repo: string } | undefined {
+  if (typeof window === 'undefined') return undefined
+  const params = new URLSearchParams(window.location.search)
+  const repo = params.get('repo')
+  if (!repo) return undefined
+  const parts = repo.split('/')
+  if (parts.length < 2) return undefined
+  return { owner: parts[0], repo: parts[1] }
+}
+
+export function DocumentDetail({ slug, dirPath, sectionLabel, sectionHref }: DocumentDetailProps) {
+  const data = useProgressData()
+  const [markdown, setMarkdown] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [filePath, setFilePath] = useState<string | null>(null)
+  const linkMap = useMemo(() => (data ? buildLinkMap(data) : {}), [data])
+
+  useEffect(() => {
+    setLoading(true)
+    setMarkdown(null)
+    setError(null)
+
+    const github = getGitHubParams()
+    const relativePath = `${dirPath}/${slug}.md`
+
+    // Try the direct path first, fallback to directory listing if needed
+    getMarkdownContent({ data: { filePath: relativePath, github } })
+      .then((result: MarkdownResult) => {
+        if (result.ok) {
+          setMarkdown(result.content)
+          setFilePath(result.filePath)
+        } else {
+          // Fallback: search directory for a file containing the slug
+          return listAgentDirectory({ data: { dirPath, github } }).then((listResult) => {
+            if (listResult.ok) {
+              const match = listResult.files.find((f: AgentFile) => f.name === slug)
+              if (match) {
+                return getMarkdownContent({ data: { filePath: match.relativePath, github } })
+                  .then((mdResult: MarkdownResult) => {
+                    if (mdResult.ok) {
+                      setMarkdown(mdResult.content)
+                      setFilePath(mdResult.filePath)
+                    } else {
+                      setError(mdResult.error)
+                    }
+                  })
+              }
+            }
+            setError(result.error)
+          })
+        }
+      })
+      .catch((err: Error) => setError(err.message))
+      .finally(() => setLoading(false))
+  }, [slug, dirPath])
+
+  const displayName = slug
+    .replace(/^[a-z0-9-]+\./, '')
+    .replace(/[-_]/g, ' ')
+    .replace(/\b\w/g, (c) => c.toUpperCase())
+
+  return (
+    <div className="p-6 max-w-4xl">
+      <Breadcrumb
+        items={[
+          { label: sectionLabel, href: sectionHref },
+          { label: displayName },
+        ]}
+      />
+
+      <h1 className="text-xl font-semibold text-gray-100 mb-6">{displayName}</h1>
+
+      {loading ? (
+        <p className="text-sm text-gray-600">Loading document...</p>
+      ) : markdown ? (
+        <MarkdownContent content={markdown} basePath={filePath ?? undefined} linkMap={linkMap} />
+      ) : error ? (
+        <div className="bg-gray-900/50 border border-gray-800 rounded-xl p-4 text-sm text-gray-500">
+          No document found — {error}
+        </div>
+      ) : null}
+    </div>
+  )
+}

package/src/components/DocumentList.tsx

@@ -0,0 +1,90 @@
+import { Link } from '@tanstack/react-router'
+import { useState, useEffect } from 'react'
+import { listAgentDirectory } from '../services/markdown.service'
+import type { AgentFile } from '../services/markdown.service'
+import { FileText } from 'lucide-react'
+
+interface DocumentListProps {
+  title: string
+  dirPath: string
+  baseTo: string
+  github?: { owner: string; repo: string; branch?: string; token?: string }
+}
+
+export function DocumentList({ title, dirPath, baseTo, github }: DocumentListProps) {
+  const [files, setFiles] = useState<AgentFile[]>([])
+  const [error, setError] = useState<string | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    setLoading(true)
+    listAgentDirectory({ data: { dirPath, github } })
+      .then((result) => {
+        if (result.ok) {
+          setFiles(result.files)
+        } else {
+          setError(result.error)
+        }
+      })
+      .catch((err: Error) => setError(err.message))
+      .finally(() => setLoading(false))
+  }, [dirPath, github])
+
+  if (loading) {
+    return (
+      <div className="p-6">
+        <h2 className="text-lg font-semibold mb-4">{title}</h2>
+        <p className="text-sm text-gray-600">Loading...</p>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="p-6">
+        <h2 className="text-lg font-semibold mb-4">{title}</h2>
+        <div className="bg-gray-900/50 border border-gray-800 rounded-xl p-4 text-sm text-gray-500">
+          {error}
+        </div>
+      </div>
+    )
+  }
+
+  if (files.length === 0) {
+    return (
+      <div className="p-6">
+        <h2 className="text-lg font-semibold mb-4">{title}</h2>
+        <p className="text-sm text-gray-500">No documents found in <code className="text-gray-400">{dirPath}/</code></p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="p-6">
+      <h2 className="text-lg font-semibold mb-4">{title}</h2>
+      <div className="bg-gray-900/50 border border-gray-800 rounded-xl divide-y divide-gray-800">
+        {files.map((file) => (
+          <Link
+            key={file.name}
+            to={baseTo + '/$slug'}
+            params={{ slug: file.name }}
+            className="flex items-center gap-3 px-4 py-3 text-sm hover:bg-gray-800/50 transition-colors first:rounded-t-xl last:rounded-b-xl"
+          >
+            <FileText className="w-4 h-4 text-gray-500 shrink-0" />
+            <span className="text-gray-200">{formatName(file.name)}</span>
+          </Link>
+        ))}
+      </div>
+      <p className="text-xs text-gray-600 mt-3">{files.length} document{files.length !== 1 ? 's' : ''}</p>
+    </div>
+  )
+}
+
+/** Turn "local.dashboard-layout-routing" into "Dashboard Layout Routing" */
+function formatName(name: string): string {
+  // Strip common prefixes like "local." or "core-sdk."
+  const stripped = name.replace(/^[a-z0-9-]+\./, '')
+  return stripped
+    .replace(/[-_]/g, ' ')
+    .replace(/\b\w/g, (c) => c.toUpperCase())
+}

package/src/components/MilestoneKanban.tsx

@@ -1,5 +1,6 @@
 import { Link } from '@tanstack/react-router'
 import { StatusBadge } from './StatusBadge'
+import { PriorityBadge } from './PriorityBadge'
 import { ProgressBar } from './ProgressBar'
 import { TaskList } from './TaskList'
 import type { Milestone, Task, Status } from '../lib/types'
@@ -37,6 +38,7 @@ function KanbanCard({
         >
           {milestone.name}
         </Link>
+        <PriorityBadge priority={milestone.priority} />
       </div>
       <div className="flex items-center gap-2 mb-2">
         <div className="flex-1">

package/src/components/MilestoneTable.tsx

@@ -10,6 +10,7 @@ import {
 } from '@tanstack/react-table'
 import { ChevronDown, ChevronRight, ArrowUpDown } from 'lucide-react'
 import { StatusBadge } from './StatusBadge'
+import { PriorityBadge } from './PriorityBadge'
 import { ProgressBar } from './ProgressBar'
 import { TaskList } from './TaskList'
 import type { Milestone, Task } from '../lib/types'
@@ -68,6 +69,11 @@ export function MilestoneTable({ milestones, tasks }: MilestoneTableProps) {
       cell: (info) => <StatusBadge status={info.getValue()} />,
       size: 120,
     }),
+    columnHelper.accessor('priority', {
+      header: 'Priority',
+      cell: (info) => <PriorityBadge priority={info.getValue()} />,
+      size: 100,
+    }),
     columnHelper.accessor('progress', {
       header: 'Progress',
       cell: (info) => (

package/src/components/MilestoneTree.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { Link } from '@tanstack/react-router'
 import { ChevronDown, ChevronRight } from 'lucide-react'
 import { StatusBadge } from './StatusBadge'
+import { PriorityBadge } from './PriorityBadge'
 import { ProgressBar } from './ProgressBar'
 import { TaskList } from './TaskList'
 import { useCollapse } from '../lib/useCollapse'
@@ -45,6 +46,7 @@ function MilestoneTreeRow({
           {milestone.name}
         </Link>
         <StatusBadge status={milestone.status} />
+        <PriorityBadge priority={milestone.priority} />
         <div className="w-20">
           <ProgressBar value={milestone.progress} size="sm" />
         </div>

package/src/components/PriorityBadge.tsx

@@ -0,0 +1,20 @@
+import type { Priority } from '../lib/types'
+
+const priorityStyles: Record<Priority, string> = {
+  critical: 'bg-rose-500/20 text-rose-400',
+  high: 'bg-amber-500/20 text-amber-400',
+  medium: 'bg-blue-500/20 text-blue-400',
+  low: 'bg-zinc-500/20 text-zinc-400',
+}
+
+export function PriorityBadge({ priority }: { priority: Priority | undefined }) {
+  if (!priority) return null
+
+  return (
+    <span
+      className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium uppercase ${priorityStyles[priority] ?? priorityStyles.medium}`}
+    >
+      {priority}
+    </span>
+  )
+}

package/src/components/Sidebar.tsx

@@ -1,5 +1,5 @@
 import { Link, useRouterState } from '@tanstack/react-router'
-import { LayoutDashboard, Flag, CheckSquare, Clock, Search } from 'lucide-react'
+import { LayoutDashboard, Flag, CheckSquare, Clock, Search, PenTool, Puzzle, FileBarChart } from 'lucide-react'
 import { ProjectSelector } from './ProjectSelector'
 import { GitHubInput } from './GitHubInput'
 import type { AcpProject } from '../services/projects.service'
@@ -9,6 +9,9 @@ const navItems = [
   { to: '/milestones' as const, icon: Flag, label: 'Milestones' },
   { to: '/tasks' as const, icon: CheckSquare, label: 'Tasks' },
   { to: '/activity' as const, icon: Clock, label: 'Activity' },
+  { to: '/designs' as const, icon: PenTool, label: 'Designs' },
+  { to: '/patterns' as const, icon: Puzzle, label: 'Patterns' },
+  { to: '/reports' as const, icon: FileBarChart, label: 'Reports' },
 ]
 
 interface SidebarProps {

package/src/components/TaskList.tsx

@@ -1,5 +1,6 @@
 import { Link } from '@tanstack/react-router'
 import { StatusDot } from './StatusDot'
+import { PriorityBadge } from './PriorityBadge'
 import { ExtraFieldsBadge } from './ExtraFieldsBadge'
 import type { Task } from '../lib/types'
 
@@ -26,6 +27,7 @@ export function TaskList({ tasks }: { tasks: Task[] }) {
           >
             {task.name}
           </Link>
+          <PriorityBadge priority={task.priority} />
           {task.notes && (
             <span className="text-xs text-gray-600 ml-auto truncate max-w-[200px]">
               {task.notes}

package/src/lib/types.ts

@@ -1,6 +1,9 @@
 /** Status values for milestones and tasks */
 export type Status = 'completed' | 'in_progress' | 'not_started' | 'wont_do'
 
+/** Priority values for milestones and tasks (ACP 6.0.0+) */
+export type Priority = 'critical' | 'high' | 'medium' | 'low'
+
 /** Unknown properties from agent-maintained YAML are preserved here */
 export type ExtraFields = Record<string, unknown>
 
@@ -29,6 +32,8 @@ export interface ProjectMetadata {
 export interface Milestone {
   id: string
   name: string
+  priority: Priority
+  file: string
   status: Status
   progress: number // 0-100
   started: string | null
@@ -43,10 +48,13 @@ export interface Milestone {
 export interface Task {
   id: string
   name: string
+  priority: Priority
   status: Status
   milestone_id: string
   file: string
   estimated_hours: string
+  actual_hours: number | null
+  started: string | null
   completed_date: string | null
   notes: string
   extra: ExtraFields

package/src/lib/yaml-loader.ts

@@ -8,6 +8,7 @@ import type {
   DocumentationStats,
   ProgressSummary,
   Status,
+  Priority,
   ExtraFields,
 } from './types'
 
@@ -51,6 +52,14 @@ function normalizeStatus(value: unknown): Status {
   return 'not_started'
 }
 
+function normalizePriority(value: unknown): Priority {
+  const s = String(value || 'medium').toLowerCase()
+  if (s === 'critical') return 'critical'
+  if (s === 'high') return 'high'
+  if (s === 'low') return 'low'
+  return 'medium'
+}
+
 function safeString(value: unknown, fallback = ''): string {
   if (value == null) return fallback
   return String(value)
@@ -127,7 +136,7 @@ function normalizeProject(raw: unknown): ProjectMetadata {
 }
 
 const MILESTONE_KEYS = [
-  'id', 'name', 'status', 'progress', 'started', 'completed',
+  'id', 'name', 'priority', 'file', 'status', 'progress', 'started', 'completed',
   'estimated_weeks', 'tasks_completed', 'tasks_total', 'notes',
 ]
 
@@ -137,6 +146,8 @@ function normalizeMilestone(raw: unknown, index: number): Milestone {
   return {
     id: safeString(known.id, `milestone_${index + 1}`),
     name: safeString(known.name, `Milestone ${index + 1}`),
+    priority: normalizePriority(known.priority),
+    file: safeString(known.file),
     status: normalizeStatus(known.status),
     progress: known.progress != null
       ? safeNumber(known.progress)
@@ -154,13 +165,25 @@ function normalizeMilestone(raw: unknown, index: number): Milestone {
 }
 
 function normalizeMilestones(raw: unknown): Milestone[] {
-  if (!Array.isArray(raw)) return []
-  return raw.map((item, i) => normalizeMilestone(item, i))
+  // v6 format: milestones is a map keyed by ID (e.g. { M1: {...}, M2: {...} })
+  if (raw && typeof raw === 'object' && !Array.isArray(raw)) {
+    const obj = raw as Record<string, unknown>
+    return Object.entries(obj).map(([key, value], i) => {
+      const m = normalizeMilestone(value, i)
+      // The map key IS the milestone ID — override whatever was parsed
+      return { ...m, id: key }
+    })
+  }
+  // Pre-v6 format: milestones is an array
+  if (Array.isArray(raw)) {
+    return raw.map((item, i) => normalizeMilestone(item, i))
+  }
+  return []
 }
 
 const TASK_KEYS = [
-  'id', 'name', 'status', 'milestone_id', 'file',
-  'estimated_hours', 'completed_date', 'notes',
+  'id', 'name', 'priority', 'status', 'milestone_id', 'file',
+  'estimated_hours', 'actual_hours', 'started', 'completed_date', 'notes',
 ]
 
 function normalizeTask(raw: unknown, milestoneId: string, index: number): Task {
@@ -169,10 +192,13 @@ function normalizeTask(raw: unknown, milestoneId: string, index: number): Task {
   return {
     id: safeString(known.id, `task_${index + 1}`),
     name: safeString(known.name, `Task ${index + 1}`),
+    priority: normalizePriority(known.priority),
     status: normalizeStatus(known.status),
     milestone_id: safeString(known.milestone_id, milestoneId),
     file: safeString(known.file),
     estimated_hours: safeString(known.estimated_hours, '0'),
+    actual_hours: known.actual_hours != null ? safeNumber(known.actual_hours) : null,
+    started: known.started ? safeString(known.started) : null,
     completed_date: known.completed_date ? safeString(known.completed_date) : null,
     notes: safeString(known.notes),
     extra,
@@ -388,20 +414,30 @@ export function parseProgressYaml(raw: string): ProgressData {
     if (looseTasks.length > 0) {
       const existing = allTasks['_unassigned'] || []
       allTasks['_unassigned'] = [...existing, ...looseTasks]
-      // Add a synthetic milestone for unassigned tasks if not already present
-      if (!seenIds.has('_unassigned')) {
-        seenIds.add('_unassigned')
+    }
+
+    // Create synthetic milestones for any task keys without a matching milestone.
+    // This handles `unassigned:` (or any other key) inside the `tasks:` object
+    // that doesn't correspond to a declared milestone.
+    for (const key of Object.keys(allTasks)) {
+      if (!seenIds.has(key)) {
+        seenIds.add(key)
+        const tasks = allTasks[key]
+        const isUnassigned = key === '_unassigned' || key.toLowerCase() === 'unassigned'
+        const displayName = isUnassigned ? 'Unassigned Tasks' : key
         allMilestones.push({
-          id: '_unassigned',
-          name: 'Unassigned Tasks',
+          id: key,
+          name: displayName,
+          priority: 'medium',
+          file: '',
           status: 'in_progress',
           progress: 0,
           started: null,
           completed: null,
           estimated_weeks: '0',
-          tasks_completed: looseTasks.filter((t) => t.status === 'completed').length,
-          tasks_total: looseTasks.length,
-          notes: 'Tasks not assigned to a specific milestone',
+          tasks_completed: tasks.filter((t) => t.status === 'completed').length,
+          tasks_total: tasks.length,
+          notes: isUnassigned ? 'Tasks not assigned to a specific milestone' : `Tasks under "${key}"`,
           extra: { synthetic: true },
         })
       }

package/src/routeTree.gen.ts

@@ -11,13 +11,22 @@
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as TasksRouteImport } from './routes/tasks'
 import { Route as SearchRouteImport } from './routes/search'
+import { Route as ReportsRouteImport } from './routes/reports'
+import { Route as PatternsRouteImport } from './routes/patterns'
 import { Route as MilestonesRouteImport } from './routes/milestones'
+import { Route as DesignsRouteImport } from './routes/designs'
 import { Route as ActivityRouteImport } from './routes/activity'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as TasksIndexRouteImport } from './routes/tasks.index'
+import { Route as ReportsIndexRouteImport } from './routes/reports.index'
+import { Route as PatternsIndexRouteImport } from './routes/patterns.index'
 import { Route as MilestonesIndexRouteImport } from './routes/milestones.index'
+import { Route as DesignsIndexRouteImport } from './routes/designs.index'
 import { Route as TasksTaskIdRouteImport } from './routes/tasks.$taskId'
+import { Route as ReportsSlugRouteImport } from './routes/reports.$slug'
+import { Route as PatternsSlugRouteImport } from './routes/patterns.$slug'
 import { Route as MilestonesMilestoneIdRouteImport } from './routes/milestones.$milestoneId'
+import { Route as DesignsSlugRouteImport } from './routes/designs.$slug'
 import { Route as ApiWatchRouteImport } from './routes/api/watch'
 
 const TasksRoute = TasksRouteImport.update({
@@ -30,11 +39,26 @@ const SearchRoute = SearchRouteImport.update({
   path: '/search',
   getParentRoute: () => rootRouteImport,
 } as any)
+const ReportsRoute = ReportsRouteImport.update({
+  id: '/reports',
+  path: '/reports',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const PatternsRoute = PatternsRouteImport.update({
+  id: '/patterns',
+  path: '/patterns',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const MilestonesRoute = MilestonesRouteImport.update({
   id: '/milestones',
   path: '/milestones',
   getParentRoute: () => rootRouteImport,
 } as any)
+const DesignsRoute = DesignsRouteImport.update({
+  id: '/designs',
+  path: '/designs',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const ActivityRoute = ActivityRouteImport.update({
   id: '/activity',
   path: '/activity',
@@ -50,21 +74,51 @@ const TasksIndexRoute = TasksIndexRouteImport.update({
   path: '/',
   getParentRoute: () => TasksRoute,
 } as any)
+const ReportsIndexRoute = ReportsIndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => ReportsRoute,
+} as any)
+const PatternsIndexRoute = PatternsIndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => PatternsRoute,
+} as any)
 const MilestonesIndexRoute = MilestonesIndexRouteImport.update({
   id: '/',
   path: '/',
   getParentRoute: () => MilestonesRoute,
 } as any)
+const DesignsIndexRoute = DesignsIndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => DesignsRoute,
+} as any)
 const TasksTaskIdRoute = TasksTaskIdRouteImport.update({
   id: '/$taskId',
   path: '/$taskId',
   getParentRoute: () => TasksRoute,
 } as any)
+const ReportsSlugRoute = ReportsSlugRouteImport.update({
+  id: '/$slug',
+  path: '/$slug',
+  getParentRoute: () => ReportsRoute,
+} as any)
+const PatternsSlugRoute = PatternsSlugRouteImport.update({
+  id: '/$slug',
+  path: '/$slug',
+  getParentRoute: () => PatternsRoute,
+} as any)
 const MilestonesMilestoneIdRoute = MilestonesMilestoneIdRouteImport.update({
   id: '/$milestoneId',
   path: '/$milestoneId',
   getParentRoute: () => MilestonesRoute,
 } as any)
+const DesignsSlugRoute = DesignsSlugRouteImport.update({
+  id: '/$slug',
+  path: '/$slug',
+  getParentRoute: () => DesignsRoute,
+} as any)
 const ApiWatchRoute = ApiWatchRouteImport.update({
   id: '/api/watch',
   path: '/api/watch',
@@ -74,13 +128,22 @@ const ApiWatchRoute = ApiWatchRouteImport.update({
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/activity': typeof ActivityRoute
+  '/designs': typeof DesignsRouteWithChildren
   '/milestones': typeof MilestonesRouteWithChildren
+  '/patterns': typeof PatternsRouteWithChildren
+  '/reports': typeof ReportsRouteWithChildren
   '/search': typeof SearchRoute
   '/tasks': typeof TasksRouteWithChildren
   '/api/watch': typeof ApiWatchRoute
+  '/designs/$slug': typeof DesignsSlugRoute
   '/milestones/$milestoneId': typeof MilestonesMilestoneIdRoute
+  '/patterns/$slug': typeof PatternsSlugRoute
+  '/reports/$slug': typeof ReportsSlugRoute
   '/tasks/$taskId': typeof TasksTaskIdRoute
+  '/designs/': typeof DesignsIndexRoute
   '/milestones/': typeof MilestonesIndexRoute
+  '/patterns/': typeof PatternsIndexRoute
+  '/reports/': typeof ReportsIndexRoute
   '/tasks/': typeof TasksIndexRoute
 }
 export interface FileRoutesByTo {
@@ -88,22 +151,37 @@ export interface FileRoutesByTo {
   '/activity': typeof ActivityRoute
   '/search': typeof SearchRoute
   '/api/watch': typeof ApiWatchRoute
+  '/designs/$slug': typeof DesignsSlugRoute
   '/milestones/$milestoneId': typeof MilestonesMilestoneIdRoute
+  '/patterns/$slug': typeof PatternsSlugRoute
+  '/reports/$slug': typeof ReportsSlugRoute
   '/tasks/$taskId': typeof TasksTaskIdRoute
+  '/designs': typeof DesignsIndexRoute
   '/milestones': typeof MilestonesIndexRoute
+  '/patterns': typeof PatternsIndexRoute
+  '/reports': typeof ReportsIndexRoute
   '/tasks': typeof TasksIndexRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
   '/activity': typeof ActivityRoute
+  '/designs': typeof DesignsRouteWithChildren
   '/milestones': typeof MilestonesRouteWithChildren
+  '/patterns': typeof PatternsRouteWithChildren
+  '/reports': typeof ReportsRouteWithChildren
   '/search': typeof SearchRoute
   '/tasks': typeof TasksRouteWithChildren
   '/api/watch': typeof ApiWatchRoute
+  '/designs/$slug': typeof DesignsSlugRoute
   '/milestones/$milestoneId': typeof MilestonesMilestoneIdRoute
+  '/patterns/$slug': typeof PatternsSlugRoute
+  '/reports/$slug': typeof ReportsSlugRoute
   '/tasks/$taskId': typeof TasksTaskIdRoute
+  '/designs/': typeof DesignsIndexRoute
   '/milestones/': typeof MilestonesIndexRoute
+  '/patterns/': typeof PatternsIndexRoute
+  '/reports/': typeof ReportsIndexRoute
   '/tasks/': typeof TasksIndexRoute
 }
 export interface FileRouteTypes {
@@ -111,13 +189,22 @@ export interface FileRouteTypes {
   fullPaths:
     | '/'
     | '/activity'
+    | '/designs'
     | '/milestones'
+    | '/patterns'
+    | '/reports'
     | '/search'
     | '/tasks'
     | '/api/watch'
+    | '/designs/$slug'
     | '/milestones/$milestoneId'
+    | '/patterns/$slug'
+    | '/reports/$slug'
     | '/tasks/$taskId'
+    | '/designs/'
     | '/milestones/'
+    | '/patterns/'
+    | '/reports/'
     | '/tasks/'
   fileRoutesByTo: FileRoutesByTo
   to:
@@ -125,28 +212,46 @@ export interface FileRouteTypes {
     | '/activity'
     | '/search'
     | '/api/watch'
+    | '/designs/$slug'
     | '/milestones/$milestoneId'
+    | '/patterns/$slug'
+    | '/reports/$slug'
     | '/tasks/$taskId'
+    | '/designs'
     | '/milestones'
+    | '/patterns'
+    | '/reports'
     | '/tasks'
   id:
     | '__root__'
     | '/'
     | '/activity'
+    | '/designs'
     | '/milestones'
+    | '/patterns'
+    | '/reports'
     | '/search'
     | '/tasks'
     | '/api/watch'
+    | '/designs/$slug'
     | '/milestones/$milestoneId'
+    | '/patterns/$slug'
+    | '/reports/$slug'
     | '/tasks/$taskId'
+    | '/designs/'
     | '/milestones/'
+    | '/patterns/'
+    | '/reports/'
     | '/tasks/'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   ActivityRoute: typeof ActivityRoute
+  DesignsRoute: typeof DesignsRouteWithChildren
   MilestonesRoute: typeof MilestonesRouteWithChildren
+  PatternsRoute: typeof PatternsRouteWithChildren
+  ReportsRoute: typeof ReportsRouteWithChildren
   SearchRoute: typeof SearchRoute
   TasksRoute: typeof TasksRouteWithChildren
   ApiWatchRoute: typeof ApiWatchRoute
@@ -168,6 +273,20 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof SearchRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/reports': {
+      id: '/reports'
+      path: '/reports'
+      fullPath: '/reports'
+      preLoaderRoute: typeof ReportsRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/patterns': {
+      id: '/patterns'
+      path: '/patterns'
+      fullPath: '/patterns'
+      preLoaderRoute: typeof PatternsRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/milestones': {
       id: '/milestones'
       path: '/milestones'
@@ -175,6 +294,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof MilestonesRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/designs': {
+      id: '/designs'
+      path: '/designs'
+      fullPath: '/designs'
+      preLoaderRoute: typeof DesignsRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/activity': {
       id: '/activity'
       path: '/activity'
@@ -196,6 +322,20 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof TasksIndexRouteImport
       parentRoute: typeof TasksRoute
     }
+    '/reports/': {
+      id: '/reports/'
+      path: '/'
+      fullPath: '/reports/'
+      preLoaderRoute: typeof ReportsIndexRouteImport
+      parentRoute: typeof ReportsRoute
+    }
+    '/patterns/': {
+      id: '/patterns/'
+      path: '/'
+      fullPath: '/patterns/'
+      preLoaderRoute: typeof PatternsIndexRouteImport
+      parentRoute: typeof PatternsRoute
+    }
     '/milestones/': {
       id: '/milestones/'
       path: '/'
@@ -203,6 +343,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof MilestonesIndexRouteImport
       parentRoute: typeof MilestonesRoute
     }
+    '/designs/': {
+      id: '/designs/'
+      path: '/'
+      fullPath: '/designs/'
+      preLoaderRoute: typeof DesignsIndexRouteImport
+      parentRoute: typeof DesignsRoute
+    }
     '/tasks/$taskId': {
       id: '/tasks/$taskId'
       path: '/$taskId'
@@ -210,6 +357,20 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof TasksTaskIdRouteImport
       parentRoute: typeof TasksRoute
     }
+    '/reports/$slug': {
+      id: '/reports/$slug'
+      path: '/$slug'
+      fullPath: '/reports/$slug'
+      preLoaderRoute: typeof ReportsSlugRouteImport
+      parentRoute: typeof ReportsRoute
+    }
+    '/patterns/$slug': {
+      id: '/patterns/$slug'
+      path: '/$slug'
+      fullPath: '/patterns/$slug'
+      preLoaderRoute: typeof PatternsSlugRouteImport
+      parentRoute: typeof PatternsRoute
+    }
     '/milestones/$milestoneId': {
       id: '/milestones/$milestoneId'
       path: '/$milestoneId'
@@ -217,6 +378,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof MilestonesMilestoneIdRouteImport
       parentRoute: typeof MilestonesRoute
     }
+    '/designs/$slug': {
+      id: '/designs/$slug'
+      path: '/$slug'
+      fullPath: '/designs/$slug'
+      preLoaderRoute: typeof DesignsSlugRouteImport
+      parentRoute: typeof DesignsRoute
+    }
     '/api/watch': {
       id: '/api/watch'
       path: '/api/watch'
@@ -227,6 +395,19 @@ declare module '@tanstack/react-router' {
   }
 }
 
+interface DesignsRouteChildren {
+  DesignsSlugRoute: typeof DesignsSlugRoute
+  DesignsIndexRoute: typeof DesignsIndexRoute
+}
+
+const DesignsRouteChildren: DesignsRouteChildren = {
+  DesignsSlugRoute: DesignsSlugRoute,
+  DesignsIndexRoute: DesignsIndexRoute,
+}
+
+const DesignsRouteWithChildren =
+  DesignsRoute._addFileChildren(DesignsRouteChildren)
+
 interface MilestonesRouteChildren {
   MilestonesMilestoneIdRoute: typeof MilestonesMilestoneIdRoute
   MilestonesIndexRoute: typeof MilestonesIndexRoute
@@ -241,6 +422,33 @@ const MilestonesRouteWithChildren = MilestonesRoute._addFileChildren(
   MilestonesRouteChildren,
 )
 
+interface PatternsRouteChildren {
+  PatternsSlugRoute: typeof PatternsSlugRoute
+  PatternsIndexRoute: typeof PatternsIndexRoute
+}
+
+const PatternsRouteChildren: PatternsRouteChildren = {
+  PatternsSlugRoute: PatternsSlugRoute,
+  PatternsIndexRoute: PatternsIndexRoute,
+}
+
+const PatternsRouteWithChildren = PatternsRoute._addFileChildren(
+  PatternsRouteChildren,
+)
+
+interface ReportsRouteChildren {
+  ReportsSlugRoute: typeof ReportsSlugRoute
+  ReportsIndexRoute: typeof ReportsIndexRoute
+}
+
+const ReportsRouteChildren: ReportsRouteChildren = {
+  ReportsSlugRoute: ReportsSlugRoute,
+  ReportsIndexRoute: ReportsIndexRoute,
+}
+
+const ReportsRouteWithChildren =
+  ReportsRoute._addFileChildren(ReportsRouteChildren)
+
 interface TasksRouteChildren {
   TasksTaskIdRoute: typeof TasksTaskIdRoute
   TasksIndexRoute: typeof TasksIndexRoute
@@ -256,7 +464,10 @@ const TasksRouteWithChildren = TasksRoute._addFileChildren(TasksRouteChildren)
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   ActivityRoute: ActivityRoute,
+  DesignsRoute: DesignsRouteWithChildren,
   MilestonesRoute: MilestonesRouteWithChildren,
+  PatternsRoute: PatternsRouteWithChildren,
+  ReportsRoute: ReportsRouteWithChildren,
   SearchRoute: SearchRoute,
   TasksRoute: TasksRouteWithChildren,
   ApiWatchRoute: ApiWatchRoute,

package/src/routes/designs.$slug.tsx

@@ -0,0 +1,18 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { DocumentDetail } from '../components/DocumentDetail'
+
+export const Route = createFileRoute('/designs/$slug')({
+  component: DesignDetailPage,
+})
+
+function DesignDetailPage() {
+  const { slug } = Route.useParams()
+  return (
+    <DocumentDetail
+      slug={slug}
+      dirPath="agent/design"
+      sectionLabel="Designs"
+      sectionHref="/designs"
+    />
+  )
+}

package/src/routes/designs.index.tsx

@@ -0,0 +1,10 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { DocumentList } from '../components/DocumentList'
+
+export const Route = createFileRoute('/designs/')({
+  component: DesignsPage,
+})
+
+function DesignsPage() {
+  return <DocumentList title="Designs" dirPath="agent/design" baseTo="/designs" />
+}

package/src/routes/designs.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute, Outlet } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/designs')({
+  component: DesignsLayout,
+})
+
+function DesignsLayout() {
+  return <Outlet />
+}

package/src/routes/milestones.$milestoneId.tsx

@@ -5,6 +5,7 @@ import { Breadcrumb } from '../components/Breadcrumb'
 import { DetailHeader } from '../components/DetailHeader'
 import { ProgressBar } from '../components/ProgressBar'
 import { StatusDot } from '../components/StatusDot'
+import { PriorityBadge } from '../components/PriorityBadge'
 import { MarkdownContent, buildLinkMap } from '../components/MarkdownContent'
 import { getMarkdownContent, resolveMilestoneFile } from '../services/markdown.service'
 import type { MarkdownResult, ResolveFileResult } from '../services/markdown.service'
@@ -105,6 +106,10 @@ function MilestoneDetailPage() {
         <span className="text-xs text-gray-500">{milestone.progress}%</span>
       </div>
 
+      <div className="flex items-center gap-2 mb-4">
+        <PriorityBadge priority={milestone.priority} />
+      </div>
+
       <DetailHeader status={milestone.status} fields={fields} />
 
       {milestone.notes && (
@@ -140,6 +145,7 @@ function MilestoneDetailPage() {
                 <span className={task.status === 'completed' ? 'text-gray-500' : 'text-gray-200'}>
                   {task.name}
                 </span>
+                <PriorityBadge priority={task.priority} />
                 {task.estimated_hours && (
                   <span className="text-xs text-gray-600 ml-auto">{task.estimated_hours}h</span>
                 )}

package/src/routes/patterns.$slug.tsx

@@ -0,0 +1,18 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { DocumentDetail } from '../components/DocumentDetail'
+
+export const Route = createFileRoute('/patterns/$slug')({
+  component: PatternDetailPage,
+})
+
+function PatternDetailPage() {
+  const { slug } = Route.useParams()
+  return (
+    <DocumentDetail
+      slug={slug}
+      dirPath="agent/patterns"
+      sectionLabel="Patterns"
+      sectionHref="/patterns"
+    />
+  )
+}

package/src/routes/patterns.index.tsx

@@ -0,0 +1,10 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { DocumentList } from '../components/DocumentList'
+
+export const Route = createFileRoute('/patterns/')({
+  component: PatternsPage,
+})
+
+function PatternsPage() {
+  return <DocumentList title="Patterns" dirPath="agent/patterns" baseTo="/patterns" />
+}

package/src/routes/patterns.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute, Outlet } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/patterns')({
+  component: PatternsLayout,
+})
+
+function PatternsLayout() {
+  return <Outlet />
+}

package/src/routes/reports.$slug.tsx

@@ -0,0 +1,18 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { DocumentDetail } from '../components/DocumentDetail'
+
+export const Route = createFileRoute('/reports/$slug')({
+  component: ReportDetailPage,
+})
+
+function ReportDetailPage() {
+  const { slug } = Route.useParams()
+  return (
+    <DocumentDetail
+      slug={slug}
+      dirPath="agent/reports"
+      sectionLabel="Reports"
+      sectionHref="/reports"
+    />
+  )
+}

package/src/routes/reports.index.tsx

@@ -0,0 +1,10 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { DocumentList } from '../components/DocumentList'
+
+export const Route = createFileRoute('/reports/')({
+  component: ReportsPage,
+})
+
+function ReportsPage() {
+  return <DocumentList title="Reports" dirPath="agent/reports" baseTo="/reports" />
+}

package/src/routes/reports.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute, Outlet } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/reports')({
+  component: ReportsLayout,
+})
+
+function ReportsLayout() {
+  return <Outlet />
+}

package/src/routes/tasks.$taskId.tsx

@@ -3,6 +3,7 @@ import { useState, useEffect, useMemo } from 'react'
 import { useProgressData } from '../contexts/ProgressContext'
 import { Breadcrumb } from '../components/Breadcrumb'
 import { DetailHeader } from '../components/DetailHeader'
+import { PriorityBadge } from '../components/PriorityBadge'
 import { MarkdownContent, buildLinkMap } from '../components/MarkdownContent'
 import { getMarkdownContent } from '../services/markdown.service'
 import { resolveTaskFile } from '../services/markdown.service'
@@ -94,8 +95,13 @@ function TaskDetailPage() {
     )
   }
 
+  const hoursDisplay = task.actual_hours != null
+    ? `Est: ${task.estimated_hours}h | Actual: ${task.actual_hours}h`
+    : `${task.estimated_hours}h`
+
   const fields = [
-    { label: 'Est', value: `${task.estimated_hours}h` },
+    { label: 'Est', value: hoursDisplay },
+    ...(task.started ? [{ label: 'Started', value: task.started }] : []),
     ...(task.completed_date ? [{ label: 'Completed', value: task.completed_date }] : []),
     {
       label: 'Milestone',
@@ -123,6 +129,10 @@ function TaskDetailPage() {
 
       <h1 className="text-xl font-semibold text-gray-100 mb-3">{task.name}</h1>
 
+      <div className="flex items-center gap-2 mb-4">
+        <PriorityBadge priority={task.priority} />
+      </div>
+
       <DetailHeader status={task.status} fields={fields} />
 
       {task.notes && (

package/src/services/markdown.service.ts

@@ -115,6 +115,108 @@ async function fetchMarkdownFromGitHub(
   }
 }
 
+// ---------- listAgentDirectory ----------
+
+export type AgentFile = {
+  name: string
+  /** Relative path from project root, e.g. "agent/design/local.foo.md" */
+  relativePath: string
+}
+
+export type ListDirResult =
+  | { ok: true; files: AgentFile[] }
+  | { ok: false; files: []; error: string }
+
+export const listAgentDirectory = createServerFn({ method: 'GET' })
+  .inputValidator((input: { dirPath: string; github?: { owner: string; repo: string; branch?: string; token?: string } }) => input)
+  .handler(async ({ data: input }): Promise<ListDirResult> => {
+    if (input.github) {
+      return listDirFromGitHub(input.dirPath, input.github)
+    }
+    return listDirFromDisk(input.dirPath)
+  })
+
+async function listDirFromDisk(dirPath: string): Promise<ListDirResult> {
+  try {
+    const fs = await import('fs')
+    const path = await import('path')
+
+    const basePath = getBasePath()
+    const fullDir = path.resolve(basePath, dirPath)
+
+    if (!fs.existsSync(fullDir)) {
+      return { ok: false, files: [], error: `Directory not found: ${dirPath}` }
+    }
+
+    const entries = fs.readdirSync(fullDir)
+    const files: AgentFile[] = entries
+      .filter((f: string) => f.endsWith('.md') && !f.includes('template'))
+      .sort()
+      .map((f: string) => ({
+        name: f.replace(/\.md$/, ''),
+        relativePath: `${dirPath}/${f}`,
+      }))
+
+    return { ok: true, files }
+  } catch (err: any) {
+    return { ok: false, files: [], error: `Failed to list directory: ${dirPath}` }
+  }
+}
+
+async function listDirFromGitHub(
+  dirPath: string,
+  github: { owner: string; repo: string; branch?: string; token?: string },
+): Promise<ListDirResult> {
+  try {
+    let branch = github.branch
+    if (!branch) {
+      try {
+        const metaRes = await fetch(`https://api.github.com/repos/${github.owner}/${github.repo}`, {
+          headers: github.token ? { Authorization: `token ${github.token}` } : {},
+        })
+        if (metaRes.ok) {
+          const meta = (await metaRes.json()) as { default_branch?: string }
+          branch = meta.default_branch || 'main'
+        } else {
+          branch = 'main'
+        }
+      } catch {
+        branch = 'main'
+      }
+    }
+
+    const url = `https://api.github.com/repos/${github.owner}/${github.repo}/contents/${dirPath}?ref=${branch}`
+    const headers: Record<string, string> = {
+      Accept: 'application/vnd.github.v3+json',
+    }
+    if (github.token) {
+      headers['Authorization'] = `token ${github.token}`
+    }
+
+    const response = await fetch(url, { headers })
+
+    if (!response.ok) {
+      if (response.status === 404) {
+        return { ok: true, files: [] }
+      }
+      return { ok: false, files: [], error: `GitHub returned ${response.status}` }
+    }
+
+    const entries = (await response.json()) as Array<{ name: string; path: string; type: string }>
+    const files: AgentFile[] = entries
+      .filter((e) => e.name.endsWith('.md') && !e.name.includes('template'))
+      .sort((a, b) => a.name.localeCompare(b.name))
+      .map((e) => ({
+        name: e.name.replace(/\.md$/, ''),
+        relativePath: e.path,
+      }))
+
+    return { ok: true, files }
+  } catch (err) {
+    return { ok: false, files: [], error: `Failed to list directory from GitHub` }
+  }
+}
+
 // ---------- resolveMilestoneFile ----------
 
 export const resolveMilestoneFile = createServerFn({ method: 'GET' })