@prmichaelsen/acp-visualizer 0.8.1 → 0.9.0

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/__root.tsx

@@ -3,12 +3,14 @@ import { useState, useCallback, useEffect } from 'react'
 import { useAutoRefresh } from '../lib/useAutoRefresh'
 import { Sidebar } from '../components/Sidebar'
 import { Header } from '../components/Header'
+import { SidePanel } from '../components/SidePanel'
 import { getProgressData } from '../services/progress-database.service'
 import { listProjects, getProjectProgressPath } from '../services/projects.service'
 import { fetchGitHubProgress } from '../services/github.service'
 import type { ProgressData } from '../lib/types'
 import type { AcpProject } from '../services/projects.service'
 import { ProgressProvider } from '../contexts/ProgressContext'
+import { SidePanelProvider } from '../contexts/SidePanelContext'
 
 import appCss from '../styles.css?url'
 
@@ -63,8 +65,8 @@ function NotFound() {
   return (
     <div className="flex items-center justify-center h-full">
       <div className="text-center">
-        <h2 className="text-xl font-semibold text-gray-200 mb-2">Page Not Found</h2>
-        <p className="text-sm text-gray-400">
+        <h2 className="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">Page Not Found</h2>
+        <p className="text-sm text-gray-600 dark:text-gray-400">
           The page you're looking for doesn't exist.
         </p>
       </div>
@@ -154,7 +156,7 @@ function RootLayout() {
   return (
     <>
       <AutoRefresh />
-      <div className="flex h-screen bg-gray-950 text-gray-100">
+      <div className="flex h-screen bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100">
         <Sidebar
           projects={context.projects}
           currentProject={currentProject}
@@ -162,12 +164,15 @@ function RootLayout() {
           onGitHubLoad={handleGitHubLoad}
         />
         <ProgressProvider data={progressData}>
-          <div className="flex-1 flex flex-col overflow-hidden">
-            <Header data={progressData} />
-            <main className="flex-1 overflow-auto">
-              <Outlet />
-            </main>
-          </div>
+          <SidePanelProvider>
+            <div className="flex-1 flex flex-col overflow-hidden">
+              <Header data={progressData} />
+              <main className="flex-1 overflow-auto bg-gray-50 dark:bg-gray-900">
+                <Outlet />
+              </main>
+            </div>
+            <SidePanel />
+          </SidePanelProvider>
         </ProgressProvider>
       </div>
     </>

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 && (