@prmichaelsen/acp-visualizer 0.1.8 → 0.5.0

package/src/routeTree.gen.ts

@@ -12,6 +12,7 @@ import { Route as rootRouteImport } from './routes/__root'
 import { Route as TasksRouteImport } from './routes/tasks'
 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 ApiWatchRouteImport } from './routes/api/watch'
 
@@ -30,6 +31,11 @@ const MilestonesRoute = MilestonesRouteImport.update({
   path: '/milestones',
   getParentRoute: () => rootRouteImport,
 } as any)
+const ActivityRoute = ActivityRouteImport.update({
+  id: '/activity',
+  path: '/activity',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const IndexRoute = IndexRouteImport.update({
   id: '/',
   path: '/',
@@ -43,6 +49,7 @@ const ApiWatchRoute = ApiWatchRouteImport.update({
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
+  '/activity': typeof ActivityRoute
   '/milestones': typeof MilestonesRoute
   '/search': typeof SearchRoute
   '/tasks': typeof TasksRoute
@@ -50,6 +57,7 @@ export interface FileRoutesByFullPath {
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
+  '/activity': typeof ActivityRoute
   '/milestones': typeof MilestonesRoute
   '/search': typeof SearchRoute
   '/tasks': typeof TasksRoute
@@ -58,6 +66,7 @@ export interface FileRoutesByTo {
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
+  '/activity': typeof ActivityRoute
   '/milestones': typeof MilestonesRoute
   '/search': typeof SearchRoute
   '/tasks': typeof TasksRoute
@@ -65,14 +74,28 @@ export interface FileRoutesById {
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/milestones' | '/search' | '/tasks' | '/api/watch'
+  fullPaths:
+    | '/'
+    | '/activity'
+    | '/milestones'
+    | '/search'
+    | '/tasks'
+    | '/api/watch'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/milestones' | '/search' | '/tasks' | '/api/watch'
-  id: '__root__' | '/' | '/milestones' | '/search' | '/tasks' | '/api/watch'
+  to: '/' | '/activity' | '/milestones' | '/search' | '/tasks' | '/api/watch'
+  id:
+    | '__root__'
+    | '/'
+    | '/activity'
+    | '/milestones'
+    | '/search'
+    | '/tasks'
+    | '/api/watch'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
+  ActivityRoute: typeof ActivityRoute
   MilestonesRoute: typeof MilestonesRoute
   SearchRoute: typeof SearchRoute
   TasksRoute: typeof TasksRoute
@@ -102,6 +125,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof MilestonesRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/activity': {
+      id: '/activity'
+      path: '/activity'
+      fullPath: '/activity'
+      preLoaderRoute: typeof ActivityRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/': {
       id: '/'
       path: '/'
@@ -121,6 +151,7 @@ declare module '@tanstack/react-router' {
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
+  ActivityRoute: ActivityRoute,
   MilestonesRoute: MilestonesRoute,
   SearchRoute: SearchRoute,
   TasksRoute: TasksRoute,

package/src/routes/__root.tsx

@@ -1,26 +1,40 @@
-import { HeadContent, Scripts, createRootRoute, Outlet } from '@tanstack/react-router'
+import { HeadContent, Scripts, createRootRoute, Outlet, useRouter } from '@tanstack/react-router'
+import { useState, useCallback } from 'react'
 import { useAutoRefresh } from '../lib/useAutoRefresh'
 import { Sidebar } from '../components/Sidebar'
 import { Header } from '../components/Header'
 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 appCss from '../styles.css?url'
 
 export const Route = createRootRoute({
+  component: RootLayout,
+  notFoundComponent: NotFound,
+  shellComponent: RootDocument,
+
   beforeLoad: async () => {
     let progressData: ProgressData | null = null
+    let projects: AcpProject[] = []
 
     try {
-      const result = await getProgressData()
+      const [result, projectList] = await Promise.all([
+        getProgressData({ data: {} }),
+        listProjects(),
+      ])
       if (result.ok) {
         progressData = result.data
       }
-    } catch (error) {
-      console.error('[Root] Failed to load progress data:', error)
+      projects = projectList
+    } catch {
+      // Cloudflare Workers or other environment without filesystem
     }
 
-    return { progressData }
+    return { progressData, projects }
   },
 
   head: () => ({
@@ -40,34 +54,89 @@ export const Route = createRootRoute({
       { rel: 'stylesheet', href: appCss },
     ],
   }),
-
-  shellComponent: RootDocument,
 })
 
+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">
+          The page you're looking for doesn't exist.
+        </p>
+      </div>
+    </div>
+  )
+}
+
 function AutoRefresh() {
   useAutoRefresh()
   return null
 }
 
-function RootDocument({ children }: { children: React.ReactNode }) {
-  const { progressData } = Route.useRouteContext()
+function RootLayout() {
+  const context = Route.useRouteContext()
+  const [progressData, setProgressData] = useState(context.progressData)
+  const [currentProject, setCurrentProject] = useState<string | null>(
+    context.progressData?.project.name || null,
+  )
+
+  const handleGitHubLoad = useCallback(async (owner: string, repo: string) => {
+    const result = await fetchGitHubProgress({ data: { owner, repo } })
+    if (result.ok) {
+      setProgressData(result.data)
+      setCurrentProject(`${owner}/${repo}`)
+    } else {
+      throw new Error(result.message)
+    }
+  }, [])
+
+  const handleProjectSwitch = useCallback(async (projectId: string) => {
+    try {
+      const path = await getProjectProgressPath({ data: { projectId } })
+      if (path) {
+        const result = await getProgressData({ data: { path } })
+        if (result.ok) {
+          setProgressData(result.data)
+          setCurrentProject(projectId)
+        }
+      }
+    } catch {
+      // Project switch failed — likely no filesystem access
+    }
+  }, [])
 
   return (
-    <html lang="en">
-      <head>
-        <HeadContent />
-      </head>
-      <body>
-        <AutoRefresh />
-        <div className="flex h-screen bg-gray-950 text-gray-100">
-          <Sidebar />
+    <>
+      <AutoRefresh />
+      <div className="flex h-screen bg-gray-950 text-gray-100">
+        <Sidebar
+          projects={context.projects}
+          currentProject={currentProject}
+          onProjectSelect={handleProjectSwitch}
+          onGitHubLoad={handleGitHubLoad}
+        />
+        <ProgressProvider data={progressData}>
           <div className="flex-1 flex flex-col overflow-hidden">
             <Header data={progressData} />
             <main className="flex-1 overflow-auto">
-              {children}
+              <Outlet />
             </main>
           </div>
-        </div>
+        </ProgressProvider>
+      </div>
+    </>
+  )
+}
+
+function RootDocument({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <HeadContent />
+      </head>
+      <body>
+        {children}
         <Scripts />
       </body>
     </html>

package/src/routes/activity.tsx

@@ -0,0 +1,97 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { useProgressData } from '../contexts/ProgressContext'
+
+export const Route = createFileRoute('/activity')({
+  component: ActivityPage,
+})
+
+function ActivityPage() {
+  const progressData = useProgressData()
+
+  if (!progressData) {
+    return (
+      <div className="p-6">
+        <p className="text-gray-600 text-sm">No data loaded</p>
+      </div>
+    )
+  }
+
+  const entries = progressData.recent_work
+
+  return (
+    <div className="p-6">
+      <h2 className="text-lg font-semibold mb-4">Recent Activity</h2>
+
+      {entries.length === 0 ? (
+        <p className="text-gray-600 text-sm">No recent work entries</p>
+      ) : (
+        <div className="relative">
+          {/* Timeline line */}
+          <div className="absolute left-[15px] top-2 bottom-2 w-px bg-gray-800" />
+
+          <div className="space-y-6">
+            {entries.map((entry, i) => (
+              <div key={i} className="relative flex gap-4">
+                {/* Timeline dot */}
+                <div className="relative z-10 mt-1">
+                  <div className="w-[9px] h-[9px] rounded-full bg-blue-500 ring-4 ring-gray-950" />
+                </div>
+
+                {/* Content */}
+                <div className="flex-1 pb-2">
+                  <div className="flex items-center gap-3 mb-1">
+                    <span className="text-xs text-gray-500 font-mono">
+                      {entry.date}
+                    </span>
+                  </div>
+                  <p className="text-sm text-gray-200 mb-2">
+                    {entry.description}
+                  </p>
+                  {entry.items.length > 0 && (
+                    <ul className="space-y-1">
+                      {entry.items.map((item, j) => (
+                        <li
+                          key={j}
+                          className="text-xs text-gray-400 flex items-start gap-2"
+                        >
+                          <span className="text-gray-600 mt-0.5">•</span>
+                          {item}
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                  {Object.keys(entry.extra).length > 0 && (
+                    <div className="mt-2 text-xs text-gray-600">
+                      {Object.entries(entry.extra).map(([k, v]) => (
+                        <span key={k} className="mr-3">
+                          {k}: {String(v)}
+                        </span>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Notes section */}
+      {progressData.notes.length > 0 && (
+        <div className="mt-8">
+          <h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-3">
+            Notes
+          </h3>
+          <ul className="space-y-1.5">
+            {progressData.notes.map((note, i) => (
+              <li key={i} className="text-sm text-gray-400 flex items-start gap-2">
+                <span className="text-gray-600 mt-0.5">•</span>
+                {note}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/routes/index.tsx

@@ -1,13 +1,15 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { StatusBadge } from '../components/StatusBadge'
 import { ProgressBar } from '../components/ProgressBar'
+import { BurndownChart } from '../components/BurndownChart'
+import { useProgressData } from '../contexts/ProgressContext'
 
 export const Route = createFileRoute('/')({
   component: HomePage,
 })
 
 function HomePage() {
-  const { progressData } = Route.useRouteContext()
+  const progressData = useProgressData()
 
   if (!progressData) {
     return (
@@ -78,6 +80,9 @@ function HomePage() {
         </div>
       </div>
 
+      {/* Burndown Chart */}
+      <BurndownChart data={data} />
+
       {/* Next Steps */}
       {data.next_steps.length > 0 && (
         <div>

package/src/routes/milestones.tsx

@@ -1,20 +1,27 @@
 import { createFileRoute } from '@tanstack/react-router'
-import { useState } from 'react'
+import { useState, lazy, Suspense } from 'react'
 import { MilestoneTable } from '../components/MilestoneTable'
 import { MilestoneTree } from '../components/MilestoneTree'
-import { ViewToggle } from '../components/ViewToggle'
+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 } = Route.useRouteContext()
-  const [view, setView] = useState<'table' | 'tree'>('table')
+  const progressData = useProgressData()
+  const [view, setView] = useState<ViewMode>('table')
   const [status, setStatus] = useState<Status | 'all'>('all')
   const [search, setSearch] = useState('')
 
@@ -34,16 +41,26 @@ function MilestonesPage() {
         <h2 className="text-lg font-semibold">Milestones</h2>
         <ViewToggle value={view} onChange={setView} />
       </div>
-      <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..." />
+      {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>
-      </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/search.tsx

@@ -4,13 +4,14 @@ import { SearchInput } from '../components/SearchInput'
 import { StatusBadge } from '../components/StatusBadge'
 import { StatusDot } from '../components/StatusDot'
 import { buildSearchIndex } from '../lib/search'
+import { useProgressData } from '../contexts/ProgressContext'
 
 export const Route = createFileRoute('/search')({
   component: SearchPage,
 })
 
 function SearchPage() {
-  const { progressData } = Route.useRouteContext()
+  const progressData = useProgressData()
   const [query, setQuery] = useState('')
 
   const results = useMemo(() => {

package/src/routes/tasks.tsx

@@ -1,6 +1,7 @@
 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'
 
 export const Route = createFileRoute('/tasks')({
@@ -8,7 +9,7 @@ export const Route = createFileRoute('/tasks')({
 })
 
 function TasksPage() {
-  const { progressData } = Route.useRouteContext()
+  const progressData = useProgressData()
 
   if (!progressData) {
     return (

package/src/server.ts

@@ -0,0 +1,13 @@
+/**
+ * Cloudflare Workers Entry Point
+ *
+ * Minimal server — passes all requests to TanStack Start.
+ */
+
+import startServer from '@tanstack/react-start/server-entry'
+
+export default {
+  async fetch(request: Request, env: unknown, ctx: unknown) {
+    return (startServer as any).fetch(request, env, ctx)
+  },
+}

package/src/services/github.service.ts

@@ -0,0 +1,51 @@
+import { createServerFn } from '@tanstack/react-start'
+import type { ProgressData } from '../lib/types'
+
+export type GitHubResult =
+  | { ok: true; data: ProgressData }
+  | { ok: false; error: string; message: string }
+
+export const fetchGitHubProgress = createServerFn({ method: 'GET' })
+  .validator((input: { owner: string; repo: string; branch?: string; token?: string }) => input)
+  .handler(async ({ data: input }): Promise<GitHubResult> => {
+    const { parseProgressYaml } = await import('../lib/yaml-loader')
+
+    const branch = input.branch || 'main'
+    const url = `https://raw.githubusercontent.com/${input.owner}/${input.repo}/${branch}/agent/progress.yaml`
+
+    try {
+      const headers: Record<string, string> = {
+        'Accept': 'text/plain',
+      }
+      if (input.token) {
+        headers['Authorization'] = `token ${input.token}`
+      }
+
+      const response = await fetch(url, { headers })
+
+      if (!response.ok) {
+        if (response.status === 404) {
+          return {
+            ok: false,
+            error: 'NOT_FOUND',
+            message: `No progress.yaml found at ${input.owner}/${input.repo} (branch: ${branch})`,
+          }
+        }
+        return {
+          ok: false,
+          error: 'FETCH_ERROR',
+          message: `GitHub returned ${response.status}: ${response.statusText}`,
+        }
+      }
+
+      const raw = await response.text()
+      const data = parseProgressYaml(raw)
+      return { ok: true, data }
+    } catch (err) {
+      return {
+        ok: false,
+        error: 'NETWORK_ERROR',
+        message: err instanceof Error ? err.message : 'Failed to fetch from GitHub',
+      }
+    }
+  })

package/src/services/progress-database.service.ts

@@ -3,47 +3,25 @@ import type { ProgressData } from '../lib/types'
 
 export type ProgressResult =
   | { ok: true; data: ProgressData }
-  | { ok: false; error: 'FILE_NOT_FOUND' | 'PARSE_ERROR'; message: string; path: string }
-
-export const getProgressData = createServerFn({ method: 'GET' }).handler(
-  async (): Promise<ProgressResult> => {
-    // Dynamic imports keep fs and yaml-loader out of the client bundle
-    const { readFileSync } = await import('fs')
-    const { parseProgressYaml } = await import('../lib/yaml-loader')
-    const { getProgressYamlPath } = await import('../lib/config')
-
-    const filePath = getProgressYamlPath()
+  | { ok: false; error: 'FILE_NOT_FOUND' | 'PARSE_ERROR' | 'NO_FILESYSTEM'; message: string; path: string }
 
+export const getProgressData = createServerFn({ method: 'GET' })
+  .validator((input: { path?: string }) => input)
+  .handler(async ({ data: input }): Promise<ProgressResult> => {
     try {
-      const raw = readFileSync(filePath, 'utf-8')
+      const fs = await import('fs')
+      const { parseProgressYaml } = await import('../lib/yaml-loader')
+      const { getProgressYamlPath } = await import('../lib/config')
 
-      try {
-        const data = parseProgressYaml(raw)
-        return { ok: true, data }
-      } catch (err) {
-        return {
-          ok: false,
-          error: 'PARSE_ERROR',
-          message: err instanceof Error ? err.message : 'Failed to parse YAML',
-          path: filePath,
-        }
-      }
-    } catch (err) {
-      const code = (err as NodeJS.ErrnoException).code
-      if (code === 'ENOENT') {
-        return {
-          ok: false,
-          error: 'FILE_NOT_FOUND',
-          message: `progress.yaml not found at: ${filePath}`,
-          path: filePath,
-        }
-      }
-      return {
-        ok: false,
-        error: 'PARSE_ERROR',
-        message: err instanceof Error ? err.message : 'Failed to read file',
-        path: filePath,
+      const filePath = input.path || getProgressYamlPath()
+      const raw = fs.readFileSync(filePath, 'utf-8')
+      const data = parseProgressYaml(raw)
+      return { ok: true, data }
+    } catch (err: any) {
+      if (err?.code === 'ENOENT') {
+        return { ok: false, error: 'FILE_NOT_FOUND', message: `progress.yaml not found`, path: input.path || '' }
       }
+      // Cloudflare Workers: fs module exists but readFileSync throws
+      return { ok: false, error: 'NO_FILESYSTEM', message: 'No local filesystem — use GitHub input to load a project', path: '' }
     }
-  },
-)
+  })

package/src/services/projects.service.ts

@@ -0,0 +1,69 @@
+import { createServerFn } from '@tanstack/react-start'
+
+export interface AcpProject {
+  id: string
+  path: string
+  type: string
+  description: string
+  status: string
+  hasProgress: boolean
+}
+
+export const listProjects = createServerFn({ method: 'GET' }).handler(
+  async (): Promise<AcpProject[]> => {
+    try {
+      const { readFileSync, existsSync } = await import('fs')
+      const { resolve } = await import('path')
+      const { homedir } = await import('os')
+      const yaml = await import('js-yaml')
+
+      const projectsFile = resolve(homedir(), '.acp', 'projects.yaml')
+      if (!existsSync(projectsFile)) return []
+
+      const raw = readFileSync(projectsFile, 'utf-8')
+      const doc = yaml.load(raw, { json: true }) as Record<string, unknown>
+      const projects = (doc?.projects || {}) as Record<string, Record<string, unknown>>
+
+      return Object.entries(projects).map(([id, p]) => {
+        const projectPath = String(p.path || '')
+        const progressPath = resolve(projectPath, 'agent', 'progress.yaml')
+        return {
+          id,
+          path: projectPath,
+          type: String(p.type || 'unknown'),
+          description: String(p.description || ''),
+          status: String(p.status || 'unknown'),
+          hasProgress: existsSync(progressPath),
+        }
+      })
+    } catch {
+      // Cloudflare Workers: no filesystem
+      return []
+    }
+  },
+)
+
+export const getProjectProgressPath = createServerFn({ method: 'GET' })
+  .validator((input: { projectId: string }) => input)
+  .handler(async ({ data }): Promise<string | null> => {
+    try {
+      const { readFileSync, existsSync } = await import('fs')
+      const { resolve } = await import('path')
+      const { homedir } = await import('os')
+      const yaml = await import('js-yaml')
+
+      const projectsFile = resolve(homedir(), '.acp', 'projects.yaml')
+      if (!existsSync(projectsFile)) return null
+
+      const raw = readFileSync(projectsFile, 'utf-8')
+      const doc = yaml.load(raw, { json: true }) as Record<string, unknown>
+      const projects = (doc?.projects || {}) as Record<string, Record<string, unknown>>
+      const project = projects[data.projectId]
+      if (!project) return null
+
+      const progressPath = resolve(String(project.path), 'agent', 'progress.yaml')
+      return existsSync(progressPath) ? progressPath : null
+    } catch {
+      return null
+    }
+  })