@prmichaelsen/acp-visualizer 0.6.0 → 0.6.1

package/package.json

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

package/src/components/MarkdownContent.tsx

@@ -8,8 +8,7 @@ interface MarkdownContentProps {
 
 export function MarkdownContent({ content, className }: MarkdownContentProps) {
   return (
-    <ReactMarkdown
-      rehypePlugins={[rehypeHighlight]}
+    <div
       className={`prose prose-invert prose-sm max-w-none
         prose-pre:bg-gray-900 prose-pre:border prose-pre:border-gray-800
         prose-code:bg-gray-800 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:text-gray-200
@@ -23,7 +22,9 @@ export function MarkdownContent({ content, className }: MarkdownContentProps) {
         prose-blockquote:border-gray-700 prose-blockquote:text-gray-400
         ${className ?? ''}`}
     >
-      {content}
-    </ReactMarkdown>
+      <ReactMarkdown rehypePlugins={[rehypeHighlight]}>
+        {content}
+      </ReactMarkdown>
+    </div>
   )
 }

package/src/routeTree.gen.ts

@@ -14,6 +14,8 @@ import { Route as SearchRouteImport } from './routes/search'
 import { Route as MilestonesRouteImport } from './routes/milestones'
 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 MilestonesIndexRouteImport } from './routes/milestones.index'
 import { Route as TasksTaskIdRouteImport } from './routes/tasks.$taskId'
 import { Route as MilestonesMilestoneIdRouteImport } from './routes/milestones.$milestoneId'
 import { Route as ApiWatchRouteImport } from './routes/api/watch'
@@ -43,6 +45,16 @@ const IndexRoute = IndexRouteImport.update({
   path: '/',
   getParentRoute: () => rootRouteImport,
 } as any)
+const TasksIndexRoute = TasksIndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => TasksRoute,
+} as any)
+const MilestonesIndexRoute = MilestonesIndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => MilestonesRoute,
+} as any)
 const TasksTaskIdRoute = TasksTaskIdRouteImport.update({
   id: '/$taskId',
   path: '/$taskId',
@@ -68,16 +80,18 @@ export interface FileRoutesByFullPath {
   '/api/watch': typeof ApiWatchRoute
   '/milestones/$milestoneId': typeof MilestonesMilestoneIdRoute
   '/tasks/$taskId': typeof TasksTaskIdRoute
+  '/milestones/': typeof MilestonesIndexRoute
+  '/tasks/': typeof TasksIndexRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/activity': typeof ActivityRoute
-  '/milestones': typeof MilestonesRouteWithChildren
   '/search': typeof SearchRoute
-  '/tasks': typeof TasksRouteWithChildren
   '/api/watch': typeof ApiWatchRoute
   '/milestones/$milestoneId': typeof MilestonesMilestoneIdRoute
   '/tasks/$taskId': typeof TasksTaskIdRoute
+  '/milestones': typeof MilestonesIndexRoute
+  '/tasks': typeof TasksIndexRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
@@ -89,6 +103,8 @@ export interface FileRoutesById {
   '/api/watch': typeof ApiWatchRoute
   '/milestones/$milestoneId': typeof MilestonesMilestoneIdRoute
   '/tasks/$taskId': typeof TasksTaskIdRoute
+  '/milestones/': typeof MilestonesIndexRoute
+  '/tasks/': typeof TasksIndexRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
@@ -101,16 +117,18 @@ export interface FileRouteTypes {
     | '/api/watch'
     | '/milestones/$milestoneId'
     | '/tasks/$taskId'
+    | '/milestones/'
+    | '/tasks/'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
     | '/activity'
-    | '/milestones'
     | '/search'
-    | '/tasks'
     | '/api/watch'
     | '/milestones/$milestoneId'
     | '/tasks/$taskId'
+    | '/milestones'
+    | '/tasks'
   id:
     | '__root__'
     | '/'
@@ -121,6 +139,8 @@ export interface FileRouteTypes {
     | '/api/watch'
     | '/milestones/$milestoneId'
     | '/tasks/$taskId'
+    | '/milestones/'
+    | '/tasks/'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
@@ -169,6 +189,20 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IndexRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/tasks/': {
+      id: '/tasks/'
+      path: '/'
+      fullPath: '/tasks/'
+      preLoaderRoute: typeof TasksIndexRouteImport
+      parentRoute: typeof TasksRoute
+    }
+    '/milestones/': {
+      id: '/milestones/'
+      path: '/'
+      fullPath: '/milestones/'
+      preLoaderRoute: typeof MilestonesIndexRouteImport
+      parentRoute: typeof MilestonesRoute
+    }
     '/tasks/$taskId': {
       id: '/tasks/$taskId'
       path: '/$taskId'
@@ -195,10 +229,12 @@ declare module '@tanstack/react-router' {
 
 interface MilestonesRouteChildren {
   MilestonesMilestoneIdRoute: typeof MilestonesMilestoneIdRoute
+  MilestonesIndexRoute: typeof MilestonesIndexRoute
 }
 
 const MilestonesRouteChildren: MilestonesRouteChildren = {
   MilestonesMilestoneIdRoute: MilestonesMilestoneIdRoute,
+  MilestonesIndexRoute: MilestonesIndexRoute,
 }
 
 const MilestonesRouteWithChildren = MilestonesRoute._addFileChildren(
@@ -207,10 +243,12 @@ const MilestonesRouteWithChildren = MilestonesRoute._addFileChildren(
 
 interface TasksRouteChildren {
   TasksTaskIdRoute: typeof TasksTaskIdRoute
+  TasksIndexRoute: typeof TasksIndexRoute
 }
 
 const TasksRouteChildren: TasksRouteChildren = {
   TasksTaskIdRoute: TasksTaskIdRoute,
+  TasksIndexRoute: TasksIndexRoute,
 }
 
 const TasksRouteWithChildren = TasksRoute._addFileChildren(TasksRouteChildren)

package/src/routes/milestones.index.tsx

@@ -0,0 +1,67 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { useState, lazy, Suspense } from 'react'
+import { MilestoneTable } from '../components/MilestoneTable'
+import { MilestoneTree } from '../components/MilestoneTree'
+import { MilestoneKanban } from '../components/MilestoneKanban'
+import { MilestoneGantt } from '../components/MilestoneGantt'
+import { ViewToggle, type ViewMode } from '../components/ViewToggle'
+import { FilterBar } from '../components/FilterBar'
+import { SearchInput } from '../components/SearchInput'
+import { useFilteredData } from '../lib/useFilteredData'
+import { useProgressData } from '../contexts/ProgressContext'
+import type { Status } from '../lib/types'
+
+// Lazy-load DependencyGraph to keep dagre out of the SSR bundle
+// (dagre uses CommonJS require() which fails on Cloudflare Workers)
+const DependencyGraph = lazy(() => import('../components/DependencyGraph').then(m => ({ default: m.DependencyGraph })))
+
+export const Route = createFileRoute('/milestones/')({
+  component: MilestonesPage,
+})
+
+function MilestonesPage() {
+  const progressData = useProgressData()
+  const [view, setView] = useState<ViewMode>('table')
+  const [status, setStatus] = useState<Status | 'all'>('all')
+  const [search, setSearch] = useState('')
+
+  const filtered = useFilteredData(progressData, { status, search })
+
+  if (!filtered) {
+    return (
+      <div className="p-6">
+        <p className="text-gray-600 text-sm">No data loaded</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="p-6">
+      <div className="flex items-center justify-between mb-4">
+        <h2 className="text-lg font-semibold">Milestones</h2>
+        <ViewToggle value={view} onChange={setView} />
+      </div>
+      {view !== 'kanban' && (
+        <div className="flex items-center gap-3 mb-4">
+          <FilterBar status={status} onStatusChange={setStatus} />
+          <div className="w-64">
+            <SearchInput value={search} onChange={setSearch} placeholder="Filter milestones..." />
+          </div>
+        </div>
+      )}
+      {view === 'table' ? (
+        <MilestoneTable milestones={filtered.milestones} tasks={filtered.tasks} />
+      ) : view === 'tree' ? (
+        <MilestoneTree milestones={filtered.milestones} tasks={filtered.tasks} />
+      ) : view === 'kanban' ? (
+        <MilestoneKanban milestones={filtered.milestones} tasks={filtered.tasks} />
+      ) : view === 'gantt' ? (
+        <MilestoneGantt milestones={filtered.milestones} tasks={filtered.tasks} />
+      ) : (
+        <Suspense fallback={<p className="text-gray-500 text-sm">Loading graph...</p>}>
+          <DependencyGraph data={filtered} />
+        </Suspense>
+      )}
+    </div>
+  )
+}

package/src/routes/milestones.tsx

@@ -1,67 +1,9 @@
-import { createFileRoute } from '@tanstack/react-router'
-import { useState, lazy, Suspense } from 'react'
-import { MilestoneTable } from '../components/MilestoneTable'
-import { MilestoneTree } from '../components/MilestoneTree'
-import { MilestoneKanban } from '../components/MilestoneKanban'
-import { MilestoneGantt } from '../components/MilestoneGantt'
-import { ViewToggle, type ViewMode } from '../components/ViewToggle'
-import { FilterBar } from '../components/FilterBar'
-import { SearchInput } from '../components/SearchInput'
-import { useFilteredData } from '../lib/useFilteredData'
-import { useProgressData } from '../contexts/ProgressContext'
-import type { Status } from '../lib/types'
-
-// Lazy-load DependencyGraph to keep dagre out of the SSR bundle
-// (dagre uses CommonJS require() which fails on Cloudflare Workers)
-const DependencyGraph = lazy(() => import('../components/DependencyGraph').then(m => ({ default: m.DependencyGraph })))
+import { createFileRoute, Outlet } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/milestones')({
-  component: MilestonesPage,
+  component: MilestonesLayout,
 })
 
-function MilestonesPage() {
-  const progressData = useProgressData()
-  const [view, setView] = useState<ViewMode>('table')
-  const [status, setStatus] = useState<Status | 'all'>('all')
-  const [search, setSearch] = useState('')
-
-  const filtered = useFilteredData(progressData, { status, search })
-
-  if (!filtered) {
-    return (
-      <div className="p-6">
-        <p className="text-gray-600 text-sm">No data loaded</p>
-      </div>
-    )
-  }
-
-  return (
-    <div className="p-6">
-      <div className="flex items-center justify-between mb-4">
-        <h2 className="text-lg font-semibold">Milestones</h2>
-        <ViewToggle value={view} onChange={setView} />
-      </div>
-      {view !== 'kanban' && (
-        <div className="flex items-center gap-3 mb-4">
-          <FilterBar status={status} onStatusChange={setStatus} />
-          <div className="w-64">
-            <SearchInput value={search} onChange={setSearch} placeholder="Filter milestones..." />
-          </div>
-        </div>
-      )}
-      {view === 'table' ? (
-        <MilestoneTable milestones={filtered.milestones} tasks={filtered.tasks} />
-      ) : view === 'tree' ? (
-        <MilestoneTree milestones={filtered.milestones} tasks={filtered.tasks} />
-      ) : view === 'kanban' ? (
-        <MilestoneKanban milestones={filtered.milestones} tasks={filtered.tasks} />
-      ) : view === 'gantt' ? (
-        <MilestoneGantt milestones={filtered.milestones} tasks={filtered.tasks} />
-      ) : (
-        <Suspense fallback={<p className="text-gray-500 text-sm">Loading graph...</p>}>
-          <DependencyGraph data={filtered} />
-        </Suspense>
-      )}
-    </div>
-  )
+function MilestonesLayout() {
+  return <Outlet />
 }

package/src/routes/tasks.index.tsx

@@ -0,0 +1,66 @@
+import { createFileRoute, Link } from '@tanstack/react-router'
+import { StatusDot } from '../components/StatusDot'
+import { ExtraFieldsBadge } from '../components/ExtraFieldsBadge'
+import { useProgressData } from '../contexts/ProgressContext'
+import type { Task } from '../lib/types'
+
+export const Route = createFileRoute('/tasks/')({
+  component: TasksPage,
+})
+
+function TasksPage() {
+  const progressData = useProgressData()
+
+  if (!progressData) {
+    return (
+      <div className="p-6">
+        <p className="text-gray-600 text-sm">No data loaded</p>
+      </div>
+    )
+  }
+
+  const allTasks: Array<Task & { milestoneName: string }> = []
+  for (const milestone of progressData.milestones) {
+    const tasks = progressData.tasks[milestone.id] || []
+    for (const task of tasks) {
+      allTasks.push({ ...task, milestoneName: milestone.name })
+    }
+  }
+
+  return (
+    <div className="p-6">
+      <h2 className="text-lg font-semibold mb-4">
+        All Tasks ({allTasks.length})
+      </h2>
+      <div className="border border-gray-800 rounded-lg overflow-hidden">
+        {allTasks.map((task) => (
+          <Link
+            key={task.id}
+            to="/tasks/$taskId"
+            params={{ taskId: task.id }}
+            className="flex items-center gap-3 px-4 py-2.5 border-b border-gray-800/50 hover:bg-gray-800/30 transition-colors"
+          >
+            <StatusDot status={task.status} />
+            <span
+              className={`flex-1 text-sm ${
+                task.status === 'completed' ? 'text-gray-500' : 'text-gray-200'
+              }`}
+            >
+              {task.name}
+            </span>
+            <span className="text-xs text-gray-600">{task.milestoneName}</span>
+            <span className="text-xs text-gray-500 font-mono w-8 text-right">
+              {task.estimated_hours}h
+            </span>
+            <ExtraFieldsBadge fields={task.extra} />
+          </Link>
+        ))}
+        {allTasks.length === 0 && (
+          <div className="px-4 py-6 text-center">
+            <p className="text-gray-600 text-sm">No tasks defined</p>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/routes/tasks.tsx

@@ -1,64 +1,9 @@
-import { createFileRoute } from '@tanstack/react-router'
-import { StatusDot } from '../components/StatusDot'
-import { ExtraFieldsBadge } from '../components/ExtraFieldsBadge'
-import { useProgressData } from '../contexts/ProgressContext'
-import type { Task } from '../lib/types'
+import { createFileRoute, Outlet } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/tasks')({
-  component: TasksPage,
+  component: TasksLayout,
 })
 
-function TasksPage() {
-  const progressData = useProgressData()
-
-  if (!progressData) {
-    return (
-      <div className="p-6">
-        <p className="text-gray-600 text-sm">No data loaded</p>
-      </div>
-    )
-  }
-
-  const allTasks: Array<Task & { milestoneName: string }> = []
-  for (const milestone of progressData.milestones) {
-    const tasks = progressData.tasks[milestone.id] || []
-    for (const task of tasks) {
-      allTasks.push({ ...task, milestoneName: milestone.name })
-    }
-  }
-
-  return (
-    <div className="p-6">
-      <h2 className="text-lg font-semibold mb-4">
-        All Tasks ({allTasks.length})
-      </h2>
-      <div className="border border-gray-800 rounded-lg overflow-hidden">
-        {allTasks.map((task) => (
-          <div
-            key={task.id}
-            className="flex items-center gap-3 px-4 py-2.5 border-b border-gray-800/50 hover:bg-gray-800/30 transition-colors"
-          >
-            <StatusDot status={task.status} />
-            <span
-              className={`flex-1 text-sm ${
-                task.status === 'completed' ? 'text-gray-500' : 'text-gray-200'
-              }`}
-            >
-              {task.name}
-            </span>
-            <span className="text-xs text-gray-600">{task.milestoneName}</span>
-            <span className="text-xs text-gray-500 font-mono w-8 text-right">
-              {task.estimated_hours}h
-            </span>
-            <ExtraFieldsBadge fields={task.extra} />
-          </div>
-        ))}
-        {allTasks.length === 0 && (
-          <div className="px-4 py-6 text-center">
-            <p className="text-gray-600 text-sm">No tasks defined</p>
-          </div>
-        )}
-      </div>
-    </div>
-  )
+function TasksLayout() {
+  return <Outlet />
 }