@prmichaelsen/acp-visualizer 0.2.1 → 0.5.2

package/src/lib/types.ts

@@ -1,5 +1,5 @@
 /** Status values for milestones and tasks */
-export type Status = 'completed' | 'in_progress' | 'not_started'
+export type Status = 'completed' | 'in_progress' | 'not_started' | 'wont_do'
 
 /** Unknown properties from agent-maintained YAML are preserved here */
 export type ExtraFields = Record<string, unknown>

package/src/lib/yaml-loader-real.spec.ts

@@ -37,11 +37,64 @@ describe('parseProgressYaml with real files', () => {
     expect(totalTasks).toBeGreaterThan(0)
 
     for (const m of result.milestones) {
-      expect(['completed', 'in_progress', 'not_started']).toContain(m.status)
+      expect(['completed', 'in_progress', 'not_started', 'wont_do']).toContain(m.status)
     }
 
     console.log(
       `Parsed: ${result.milestones.length} milestones, ${totalTasks} tasks, ${result.recent_work.length} work entries`,
     )
   })
+
+  it('parses agentbase.me progress.yaml with inline milestones and standalone tasks', () => {
+    const path = '/home/prmichaelsen/.acp/projects/agentbase.me/agent/progress.yaml'
+    let raw: string
+    try {
+      raw = readFileSync(path, 'utf-8')
+    } catch {
+      console.log('Skipping — agentbase.me progress.yaml not found')
+      return
+    }
+
+    const result = parseProgressYaml(raw)
+
+    // Should find project metadata
+    expect(result.project.name).toBe('agentbase.me')
+
+    // Should find inline milestones (milestone_1_firebase_analytics, etc.)
+    expect(result.milestones.length).toBeGreaterThan(0)
+    const milestoneIds = result.milestones.map((m) => m.id)
+    expect(milestoneIds).toContain('M1')  // from milestone_1_firebase_analytics
+    expect(milestoneIds).toContain('M47') // from milestone_47_agent_memory_system
+
+    // Should find standard milestones too
+    expect(milestoneIds).toContain('M19') // from milestones: array
+    expect(milestoneIds).toContain('M21')
+
+    // Should find tasks from inline milestones
+    const m1Tasks = result.tasks['M1'] || []
+    expect(m1Tasks.length).toBeGreaterThan(0)
+    // Task 79 has wont_do status
+    const wontDoTask = m1Tasks.find((t) => String(t.id) === '79')
+    if (wontDoTask) {
+      expect(wontDoTask.status).toBe('wont_do')
+    }
+
+    // Should find standalone/unassigned tasks
+    const unassigned = result.tasks['_unassigned'] || []
+    expect(unassigned.length).toBeGreaterThan(0)
+    // Synthetic milestone should exist
+    expect(milestoneIds).toContain('_unassigned')
+
+    const totalTasks = Object.values(result.tasks).reduce(
+      (sum, ts) => sum + ts.length,
+      0,
+    )
+
+    // Should collect next_steps from next_immediate_steps too
+    expect(result.next_steps.length).toBeGreaterThan(0)
+
+    console.log(
+      `Parsed agentbase.me: ${result.milestones.length} milestones, ${totalTasks} tasks, ${unassigned.length} unassigned`,
+    )
+  })
 })

package/src/lib/yaml-loader.ts

@@ -47,6 +47,7 @@ function normalizeStatus(value: unknown): Status {
     .replace(/[\s-]/g, '_')
   if (s === 'completed' || s === 'done' || s === 'complete') return 'completed'
   if (s === 'in_progress' || s === 'active' || s === 'wip' || s === 'started') return 'in_progress'
+  if (s === 'wont_do' || s === 'won_t_do' || s === 'skipped' || s === 'cancelled' || s === 'canceled') return 'wont_do'
   return 'not_started'
 }
 
@@ -56,7 +57,9 @@ function safeString(value: unknown, fallback = ''): string {
 }
 
 function safeNumber(value: unknown, fallback = 0): number {
-  const n = Number(value)
+  // Strip trailing '%' (e.g. "100%" → "100") before parsing
+  const cleaned = typeof value === 'string' ? value.replace(/%$/, '') : value
+  const n = Number(cleaned)
   return Number.isFinite(n) ? n : fallback
 }
 
@@ -267,6 +270,84 @@ const EMPTY_PROGRESS_DATA: ProgressData = {
   progress: { planning: 0, implementation: 0, overall: 0 },
 }
 
+// --- Inline milestone extraction ---
+// Some progress.yaml files use top-level keys like `milestone_1_firebase_analytics:`
+// containing milestone metadata + inline `tasks:` arrays.
+
+const INLINE_MILESTONE_PATTERN = /^milestone_(\d+)_/
+
+function extractInlineMilestones(d: Record<string, unknown>): {
+  milestones: Milestone[]
+  tasks: Record<string, Task[]>
+} {
+  const milestones: Milestone[] = []
+  const tasks: Record<string, Task[]> = {}
+
+  for (const [key, value] of Object.entries(d)) {
+    const match = key.match(INLINE_MILESTONE_PATTERN)
+    if (!match) continue
+    const obj = asRecord(value)
+    // Extract milestone ID from the name field (e.g. "M1 - ...") or synthesize from key
+    const nameStr = safeString(obj.name)
+    const idFromName = nameStr.match(/^(M\d+)\b/)?.[1]
+    const milestoneId = idFromName || `M${match[1]}`
+
+    const milestone = normalizeMilestone(
+      { ...obj, id: milestoneId },
+      milestones.length,
+    )
+    milestones.push(milestone)
+
+    // Extract inline tasks if present
+    if (Array.isArray(obj.tasks)) {
+      tasks[milestoneId] = obj.tasks.map((t, i) =>
+        normalizeTask(t, milestoneId, i),
+      )
+    }
+  }
+
+  return { milestones, tasks }
+}
+
+// --- Standalone / unassigned task extraction ---
+
+function extractLooseTasks(
+  d: Record<string, unknown>,
+  keys: string[],
+): Task[] {
+  const result: Task[] = []
+  for (const key of keys) {
+    const arr = d[key]
+    if (Array.isArray(arr)) {
+      result.push(
+        ...arr.map((t, i) => normalizeTask(t, '_unassigned', result.length + i)),
+      )
+    }
+  }
+  return result
+}
+
+// --- next_steps from multiple sources ---
+
+function collectNextSteps(d: Record<string, unknown>): string[] {
+  const steps = normalizeStringArray(d.next_steps)
+  // next_immediate_steps may be a structured object with sub-keys or an array
+  const immediate = d.next_immediate_steps
+  if (immediate) {
+    if (Array.isArray(immediate)) {
+      steps.push(...immediate.map(String))
+    } else if (typeof immediate === 'object' && immediate !== null) {
+      // Structured object like { ready_to_implement: [...], security: [...] }
+      for (const arr of Object.values(immediate)) {
+        if (Array.isArray(arr)) {
+          steps.push(...arr.map(String))
+        }
+      }
+    }
+  }
+  return steps
+}
+
 export function parseProgressYaml(raw: string): ProgressData {
   try {
     // json: true allows duplicated keys (last wins) — common in agent-maintained YAML
@@ -276,14 +357,62 @@ export function parseProgressYaml(raw: string): ProgressData {
     }
     const d = doc as Record<string, unknown>
 
-    const milestones = normalizeMilestones(d.milestones)
+    // Standard milestones array
+    const standardMilestones = normalizeMilestones(d.milestones)
+
+    // Inline milestone_N_* top-level keys
+    const inline = extractInlineMilestones(d)
+
+    // Merge: inline milestones first (they tend to be older/lower-numbered),
+    // then standard milestones. Deduplicate by ID (standard wins).
+    const seenIds = new Set<string>()
+    const allMilestones: Milestone[] = []
+    for (const m of [...inline.milestones, ...standardMilestones]) {
+      if (!seenIds.has(m.id)) {
+        seenIds.add(m.id)
+        allMilestones.push(m)
+      }
+    }
+
+    // Standard tasks (from top-level `tasks:` key — last-wins with json: true)
+    const standardTasks = normalizeTasks(d.tasks, allMilestones)
+
+    // Merge inline tasks with standard tasks (standard wins on conflict)
+    const allTasks: Record<string, Task[]> = { ...inline.tasks }
+    for (const [key, tasks] of Object.entries(standardTasks)) {
+      allTasks[key] = tasks // standard overwrites inline for same key
+    }
+
+    // Standalone and unassigned tasks
+    const looseTasks = extractLooseTasks(d, ['standalone_tasks', 'unassigned_tasks'])
+    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')
+        allMilestones.push({
+          id: '_unassigned',
+          name: 'Unassigned Tasks',
+          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',
+          extra: { synthetic: true },
+        })
+      }
+    }
 
     return {
       project: normalizeProject(d.project),
-      milestones,
-      tasks: normalizeTasks(d.tasks, milestones),
+      milestones: allMilestones,
+      tasks: allTasks,
       recent_work: normalizeWorkEntries(d.recent_work),
-      next_steps: normalizeStringArray(d.next_steps),
+      next_steps: collectNextSteps(d),
       notes: normalizeStringArray(d.notes),
       current_blockers: normalizeStringArray(d.current_blockers),
       documentation: normalizeDocStats(d.documentation),

package/src/routes/__root.tsx

@@ -1,26 +1,43 @@
-import { HeadContent, Scripts, createRootRoute, Outlet } from '@tanstack/react-router'
+import { HeadContent, Scripts, createRootRoute, Outlet, useRouter, useRouterState } from '@tanstack/react-router'
+import { useState, useCallback, useEffect } 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()
-      if (result.ok) {
-        progressData = result.data
+    // VITE_HOSTED mode: skip filesystem access entirely (Cloudflare Workers)
+    if (!import.meta.env.VITE_HOSTED) {
+      try {
+        const [result, projectList] = await Promise.all([
+          getProgressData({ data: {} }),
+          listProjects(),
+        ])
+        if (result.ok) {
+          progressData = result.data
+        }
+        projects = projectList
+      } catch {
+        // No filesystem available
       }
-    } catch (error) {
-      console.error('[Root] Failed to load progress data:', error)
     }
 
-    return { progressData }
+    return { progressData, projects }
   },
 
   head: () => ({
@@ -40,34 +57,131 @@ 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()
+/** Read ?repo=owner/repo from current URL search params */
+function getRepoFromUrl(): { owner: string; repo: string } | null {
+  if (typeof window === 'undefined') return null
+  const params = new URLSearchParams(window.location.search)
+  const repo = params.get('repo')
+  if (!repo) return null
+  const parts = repo.split('/')
+  if (parts.length < 2) return null
+  return { owner: parts[0], repo: parts[1] }
+}
+
+/** Update ?repo= search param without full navigation */
+function setRepoInUrl(ownerRepo: string | null) {
+  if (typeof window === 'undefined') return
+  const url = new URL(window.location.href)
+  if (ownerRepo) {
+    url.searchParams.set('repo', ownerRepo)
+  } else {
+    url.searchParams.delete('repo')
+  }
+  window.history.replaceState({}, '', url.toString())
+}
+
+function RootLayout() {
+  const context = Route.useRouteContext()
+  const [progressData, setProgressData] = useState(context.progressData)
+  const [currentProject, setCurrentProject] = useState<string | null>(
+    context.progressData?.project.name || null,
+  )
+  const [initialLoadDone, setInitialLoadDone] = useState(false)
+
+  // On mount, check for ?repo= param and auto-load
+  useEffect(() => {
+    if (initialLoadDone) return
+    setInitialLoadDone(true)
+
+    const repoParam = getRepoFromUrl()
+    if (repoParam && !progressData) {
+      fetchGitHubProgress({ data: repoParam }).then((result) => {
+        if (result.ok) {
+          setProgressData(result.data)
+          setCurrentProject(`${repoParam.owner}/${repoParam.repo}`)
+        }
+      })
+    }
+  }, [initialLoadDone, progressData])
+
+  const handleGitHubLoad = useCallback(async (owner: string, repo: string) => {
+    const result = await fetchGitHubProgress({ data: { owner, repo } })
+    if (result.ok) {
+      setProgressData(result.data)
+      setCurrentProject(`${owner}/${repo}`)
+      setRepoInUrl(`${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)
+          setRepoInUrl(null) // Clear repo param for local projects
+        }
+      }
+    } 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

@@ -1,12 +1,12 @@
 import { createFileRoute } from '@tanstack/react-router'
-import { Clock } from 'lucide-react'
+import { useProgressData } from '../contexts/ProgressContext'
 
 export const Route = createFileRoute('/activity')({
   component: ActivityPage,
 })
 
 function ActivityPage() {
-  const { progressData } = Route.useRouteContext()
+  const progressData = useProgressData()
 
   if (!progressData) {
     return (

package/src/routes/index.tsx

@@ -2,22 +2,39 @@ 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) {
+    const isHosted = import.meta.env.VITE_HOSTED
+
     return (
       <div className="p-6">
-        <div className="p-4 bg-red-900/20 border border-red-800 rounded-lg">
-          <p className="text-red-400 font-medium">Failed to load progress data</p>
-          <p className="text-red-400/70 text-sm mt-1">
-            Check that progress.yaml exists and is valid YAML
-          </p>
+        <div className="p-5 bg-gray-900/50 border border-gray-800 rounded-xl text-center max-w-md mx-auto mt-12">
+          <h2 className="text-lg font-semibold mb-2">ACP Progress Visualizer</h2>
+          {isHosted ? (
+            <>
+              <p className="text-gray-400 text-sm mb-4">
+                Enter a GitHub repository in the sidebar to visualize its ACP progress.
+              </p>
+              <div className="text-xs text-gray-600 space-y-1">
+                <p>Example: <span className="font-mono text-gray-400">prmichaelsen/agent-context-protocol</span></p>
+                <p>The repo must have <span className="font-mono text-gray-400">agent/progress.yaml</span></p>
+              </div>
+            </>
+          ) : (
+            <>
+              <p className="text-red-400/70 text-sm">
+                No progress.yaml found. Make sure you're in an ACP project directory.
+              </p>
+            </>
+          )}
         </div>
       </div>
     )

package/src/routes/milestones.tsx

@@ -1,20 +1,26 @@
 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 { 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 progressData = useProgressData()
   const [view, setView] = useState<ViewMode>('table')
   const [status, setStatus] = useState<Status | 'all'>('all')
   const [search, setSearch] = useState('')
@@ -47,8 +53,14 @@ function MilestonesPage() {
         <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' })
+  .inputValidator((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',
+      }
+    }
+  })