@prmichaelsen/acp-visualizer 0.6.0 → 0.7.0

package/package.json

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

package/src/components/MarkdownContent.tsx

@@ -1,15 +1,75 @@
 import ReactMarkdown from 'react-markdown'
 import rehypeHighlight from 'rehype-highlight'
+import { Link } from '@tanstack/react-router'
+import type { ProgressData } from '../lib/types'
 
 interface MarkdownContentProps {
   content: string
   className?: string
+  basePath?: string
+  linkMap?: Record<string, string>
 }
 
-export function MarkdownContent({ content, className }: MarkdownContentProps) {
+/**
+ * Resolve a relative path against a base file path.
+ * e.g. resolvePath("agent/milestones/milestone-3.md", "../tasks/task-11.md")
+ *   → "agent/tasks/task-11.md"
+ */
+export function resolvePath(base: string, relative: string): string {
+  const dir = base.split('/').slice(0, -1)
+  const relParts = relative.split('/')
+  const result = [...dir]
+  for (const part of relParts) {
+    if (part === '..') result.pop()
+    else if (part !== '.') result.push(part)
+  }
+  return result.join('/')
+}
+
+/**
+ * Build a map from file paths to visualizer routes.
+ */
+export function buildLinkMap(data: ProgressData): Record<string, string> {
+  const map: Record<string, string> = {}
+  for (const ms of data.milestones) {
+    for (const task of data.tasks[ms.id] || []) {
+      if (task.file) {
+        map[task.file] = `/tasks/${task.id}`
+      }
+    }
+  }
+  return map
+}
+
+function createMarkdownLink(basePath: string, linkMap: Record<string, string>) {
+  return function MarkdownLink({
+    href,
+    children,
+    ...props
+  }: React.AnchorHTMLAttributes<HTMLAnchorElement>) {
+    if (href && !href.startsWith('http') && !href.startsWith('#')) {
+      const resolved = resolvePath(basePath, href)
+      const route = linkMap[resolved]
+      if (route) {
+        return <Link to={route}>{children}</Link>
+      }
+    }
+    return (
+      <a href={href} {...props}>
+        {children}
+      </a>
+    )
+  }
+}
+
+export function MarkdownContent({ content, className, basePath, linkMap }: MarkdownContentProps) {
+  const components =
+    basePath && linkMap
+      ? { a: createMarkdownLink(basePath, linkMap) }
+      : undefined
+
   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 +83,9 @@ export function MarkdownContent({ content, className }: MarkdownContentProps) {
         prose-blockquote:border-gray-700 prose-blockquote:text-gray-400
         ${className ?? ''}`}
     >
-      {content}
-    </ReactMarkdown>
+      <ReactMarkdown rehypePlugins={[rehypeHighlight]} components={components}>
+        {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.$milestoneId.tsx

@@ -1,11 +1,11 @@
 import { createFileRoute, Link } from '@tanstack/react-router'
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useMemo } from 'react'
 import { useProgressData } from '../contexts/ProgressContext'
 import { Breadcrumb } from '../components/Breadcrumb'
 import { DetailHeader } from '../components/DetailHeader'
 import { ProgressBar } from '../components/ProgressBar'
 import { StatusDot } from '../components/StatusDot'
-import { MarkdownContent } from '../components/MarkdownContent'
+import { MarkdownContent, buildLinkMap } from '../components/MarkdownContent'
 import { getMarkdownContent, resolveMilestoneFile } from '../services/markdown.service'
 import type { MarkdownResult, ResolveFileResult } from '../services/markdown.service'
 
@@ -29,10 +29,12 @@ function MilestoneDetailPage() {
   const data = useProgressData()
   const [markdown, setMarkdown] = useState<string | null>(null)
   const [markdownError, setMarkdownError] = useState<string | null>(null)
+  const [markdownFilePath, setMarkdownFilePath] = useState<string | null>(null)
   const [loading, setLoading] = useState(true)
 
   const milestone = data?.milestones.find((m) => m.id === milestoneId)
   const tasks = data?.tasks[milestoneId] || []
+  const linkMap = useMemo(() => (data ? buildLinkMap(data) : {}), [data])
 
   useEffect(() => {
     if (!milestoneId) return
@@ -40,6 +42,7 @@ function MilestoneDetailPage() {
     setLoading(true)
     setMarkdown(null)
     setMarkdownError(null)
+    setMarkdownFilePath(null)
 
     const github = getGitHubParams()
 
@@ -51,6 +54,7 @@ function MilestoneDetailPage() {
           return
         }
 
+        setMarkdownFilePath(resolveResult.filePath)
         return getMarkdownContent({ data: { filePath: resolveResult.filePath, github } })
           .then((mdResult: MarkdownResult) => {
             if (mdResult.ok) {
@@ -111,7 +115,7 @@ function MilestoneDetailPage() {
       {loading ? (
         <p className="text-sm text-gray-600">Loading document...</p>
       ) : markdown ? (
-        <MarkdownContent content={markdown} />
+        <MarkdownContent content={markdown} basePath={markdownFilePath ?? undefined} linkMap={linkMap} />
       ) : markdownError ? (
         <div className="bg-gray-900/50 border border-gray-800 rounded-xl p-4 text-sm text-gray-500">
           No document found — {markdownError}

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.$taskId.tsx

@@ -3,7 +3,7 @@ import { useState, useEffect, useMemo } from 'react'
 import { useProgressData } from '../contexts/ProgressContext'
 import { Breadcrumb } from '../components/Breadcrumb'
 import { DetailHeader } from '../components/DetailHeader'
-import { MarkdownContent } from '../components/MarkdownContent'
+import { MarkdownContent, buildLinkMap } from '../components/MarkdownContent'
 import { getMarkdownContent } from '../services/markdown.service'
 import { resolveTaskFile } from '../services/markdown.service'
 import type { MarkdownResult } from '../services/markdown.service'
@@ -83,6 +83,9 @@ function TaskDetailPage() {
       })
   }, [task])
 
+  const linkMap = useMemo(() => (data ? buildLinkMap(data) : {}), [data])
+  const taskFilePath = useMemo(() => resolveTaskFile(task), [task])
+
   if (!data || !task || !milestone) {
     return (
       <div className="p-6">
@@ -130,7 +133,7 @@ function TaskDetailPage() {
       {loading ? (
         <p className="text-sm text-gray-600">Loading document...</p>
       ) : markdown ? (
-        <MarkdownContent content={markdown} />
+        <MarkdownContent content={markdown} basePath={taskFilePath ?? undefined} linkMap={linkMap} />
       ) : markdownError ? (
         <div className="bg-gray-900/50 border border-gray-800 rounded-xl p-4 text-sm text-gray-500">
           No document found — {markdownError}

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 />
 }