@prmichaelsen/acp-visualizer 0.1.0

package/src/components/MilestoneTable.tsx

@@ -0,0 +1,167 @@
+import { Fragment, useState } from 'react'
+import {
+  createColumnHelper,
+  useReactTable,
+  getCoreRowModel,
+  getSortedRowModel,
+  flexRender,
+  type SortingState,
+} from '@tanstack/react-table'
+import { ChevronDown, ChevronRight, ArrowUpDown } from 'lucide-react'
+import { StatusBadge } from './StatusBadge'
+import { ProgressBar } from './ProgressBar'
+import { TaskList } from './TaskList'
+import type { Milestone, Task } from '@/lib/types'
+
+const columnHelper = createColumnHelper<Milestone>()
+
+interface MilestoneTableProps {
+  milestones: Milestone[]
+  tasks: Record<string, Task[]>
+}
+
+export function MilestoneTable({ milestones, tasks }: MilestoneTableProps) {
+  const [sorting, setSorting] = useState<SortingState>([])
+  const [expanded, setExpanded] = useState<Set<string>>(new Set())
+
+  const toggle = (id: string) => {
+    setExpanded((prev) => {
+      const next = new Set(prev)
+      next.has(id) ? next.delete(id) : next.add(id)
+      return next
+    })
+  }
+
+  const columns = [
+    columnHelper.display({
+      id: 'expand',
+      cell: (info) => (
+        <button
+          onClick={() => toggle(info.row.original.id)}
+          className="p-0.5 text-gray-500 hover:text-gray-300"
+        >
+          {expanded.has(info.row.original.id) ? (
+            <ChevronDown className="w-4 h-4" />
+          ) : (
+            <ChevronRight className="w-4 h-4" />
+          )}
+        </button>
+      ),
+      size: 32,
+    }),
+    columnHelper.accessor('name', {
+      header: 'Milestone',
+      cell: (info) => (
+        <span className="text-sm font-medium">{info.getValue()}</span>
+      ),
+    }),
+    columnHelper.accessor('status', {
+      header: 'Status',
+      cell: (info) => <StatusBadge status={info.getValue()} />,
+      size: 120,
+    }),
+    columnHelper.accessor('progress', {
+      header: 'Progress',
+      cell: (info) => (
+        <div className="flex items-center gap-2">
+          <div className="w-20">
+            <ProgressBar value={info.getValue()} size="sm" />
+          </div>
+          <span className="text-xs text-gray-400 font-mono w-8">
+            {info.getValue()}%
+          </span>
+        </div>
+      ),
+      size: 140,
+    }),
+    columnHelper.display({
+      id: 'tasks',
+      header: 'Tasks',
+      cell: (info) => (
+        <span className="font-mono text-xs text-gray-400">
+          {info.row.original.tasks_completed}/{info.row.original.tasks_total}
+        </span>
+      ),
+      size: 80,
+    }),
+    columnHelper.accessor('started', {
+      header: 'Started',
+      cell: (info) => (
+        <span className="text-xs text-gray-500">{info.getValue() || '—'}</span>
+      ),
+      size: 100,
+    }),
+    columnHelper.accessor('estimated_weeks', {
+      header: 'Est.',
+      cell: (info) => (
+        <span className="text-xs text-gray-500 font-mono">
+          {info.getValue()}w
+        </span>
+      ),
+      size: 60,
+    }),
+  ]
+
+  const table = useReactTable({
+    data: milestones,
+    columns,
+    state: { sorting },
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+  })
+
+  if (milestones.length === 0) {
+    return <p className="text-gray-600 text-sm">No milestones</p>
+  }
+
+  return (
+    <div className="border border-gray-800 rounded-lg overflow-hidden">
+      <table className="w-full">
+        <thead>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <tr key={headerGroup.id} className="border-b border-gray-800 bg-gray-900/50">
+              {headerGroup.headers.map((header) => (
+                <th
+                  key={header.id}
+                  className="text-left text-xs text-gray-400 font-medium px-3 py-2 cursor-pointer select-none hover:text-gray-200"
+                  style={{ width: header.getSize() !== 150 ? header.getSize() : undefined }}
+                  onClick={header.column.getToggleSortingHandler()}
+                >
+                  <div className="flex items-center gap-1">
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(header.column.columnDef.header, header.getContext())}
+                    {header.column.getCanSort() && (
+                      <ArrowUpDown className="w-3 h-3 text-gray-600" />
+                    )}
+                  </div>
+                </th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody>
+          {table.getRowModel().rows.map((row) => (
+            <Fragment key={row.id}>
+              <tr className="border-b border-gray-800/50 hover:bg-gray-800/30 transition-colors">
+                {row.getVisibleCells().map((cell) => (
+                  <td key={cell.id} className="px-3 py-2">
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </td>
+                ))}
+              </tr>
+              {expanded.has(row.original.id) && (
+                <tr>
+                  <td colSpan={columns.length} className="bg-gray-900/30 px-3 py-1">
+                    <TaskList tasks={tasks[row.original.id] || []} />
+                  </td>
+                </tr>
+              )}
+            </Fragment>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}

package/src/components/MilestoneTree.tsx

@@ -0,0 +1,84 @@
+import { useState } from 'react'
+import { ChevronDown, ChevronRight } from 'lucide-react'
+import { StatusBadge } from './StatusBadge'
+import { ProgressBar } from './ProgressBar'
+import { TaskList } from './TaskList'
+import { useCollapse } from '@/lib/useCollapse'
+import type { Milestone, Task } from '@/lib/types'
+
+interface MilestoneTreeProps {
+  milestones: Milestone[]
+  tasks: Record<string, Task[]>
+}
+
+function MilestoneTreeRow({
+  milestone,
+  tasks,
+  expanded,
+  onToggle,
+}: {
+  milestone: Milestone
+  tasks: Task[]
+  expanded: boolean
+  onToggle: () => void
+}) {
+  const collapse = useCollapse(expanded)
+
+  return (
+    <div className="border-b border-gray-800/50">
+      <button
+        onClick={onToggle}
+        className="w-full flex items-center gap-3 px-4 py-3 hover:bg-gray-800/30 transition-colors text-left"
+      >
+        {expanded ? (
+          <ChevronDown className="w-4 h-4 text-gray-500 shrink-0" />
+        ) : (
+          <ChevronRight className="w-4 h-4 text-gray-500 shrink-0" />
+        )}
+        <span className="flex-1 text-sm font-medium">{milestone.name}</span>
+        <StatusBadge status={milestone.status} />
+        <div className="w-20">
+          <ProgressBar value={milestone.progress} size="sm" />
+        </div>
+        <span className="text-xs text-gray-500 font-mono w-12 text-right">
+          {milestone.tasks_completed}/{milestone.tasks_total}
+        </span>
+      </button>
+      <div ref={collapse.ref} style={collapse.style}>
+        <div className="px-4 pb-2">
+          <TaskList tasks={tasks} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function MilestoneTree({ milestones, tasks }: MilestoneTreeProps) {
+  const [expanded, setExpanded] = useState<Set<string>>(new Set())
+
+  const toggle = (id: string) => {
+    setExpanded((prev) => {
+      const next = new Set(prev)
+      next.has(id) ? next.delete(id) : next.add(id)
+      return next
+    })
+  }
+
+  if (milestones.length === 0) {
+    return <p className="text-gray-600 text-sm">No milestones</p>
+  }
+
+  return (
+    <div className="border border-gray-800 rounded-lg overflow-hidden">
+      {milestones.map((milestone) => (
+        <MilestoneTreeRow
+          key={milestone.id}
+          milestone={milestone}
+          tasks={tasks[milestone.id] || []}
+          expanded={expanded.has(milestone.id)}
+          onToggle={() => toggle(milestone.id)}
+        />
+      ))}
+    </div>
+  )
+}

package/src/components/ProgressBar.tsx

@@ -0,0 +1,20 @@
+interface ProgressBarProps {
+  value: number
+  size?: 'sm' | 'md'
+}
+
+export function ProgressBar({ value, size = 'md' }: ProgressBarProps) {
+  const height = size === 'sm' ? 'h-1.5' : 'h-2.5'
+  const clamped = Math.min(100, Math.max(0, value))
+
+  return (
+    <div className={`w-full bg-gray-800 rounded-full ${height} overflow-hidden`}>
+      <div
+        className={`${height} rounded-full transition-all duration-300 ${
+          clamped === 100 ? 'bg-green-500' : 'bg-blue-500'
+        }`}
+        style={{ width: `${clamped}%` }}
+      />
+    </div>
+  )
+}

package/src/components/SearchInput.tsx

@@ -0,0 +1,22 @@
+import { Search } from 'lucide-react'
+
+interface SearchInputProps {
+  value: string
+  onChange: (value: string) => void
+  placeholder?: string
+}
+
+export function SearchInput({ value, onChange, placeholder = 'Search...' }: SearchInputProps) {
+  return (
+    <div className="relative">
+      <Search className="absolute left-2.5 top-2 w-4 h-4 text-gray-500" />
+      <input
+        type="text"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+        className="w-full bg-gray-900 border border-gray-800 rounded-md pl-8 pr-3 py-1.5 text-sm text-gray-200 placeholder-gray-600 focus:outline-none focus:border-gray-600 transition-colors"
+      />
+    </div>
+  )
+}

package/src/components/Sidebar.tsx

@@ -0,0 +1,54 @@
+import { Link, useRouterState } from '@tanstack/react-router'
+import { LayoutDashboard, Flag, CheckSquare, Search } from 'lucide-react'
+
+const navItems = [
+  { to: '/' as const, icon: LayoutDashboard, label: 'Overview' },
+  { to: '/milestones' as const, icon: Flag, label: 'Milestones' },
+  { to: '/tasks' as const, icon: CheckSquare, label: 'Tasks' },
+]
+
+export function Sidebar() {
+  const location = useRouterState({ select: (s) => s.location })
+
+  return (
+    <nav className="w-56 border-r border-gray-800 bg-gray-950 flex flex-col shrink-0">
+      <div className="p-4 border-b border-gray-800">
+        <span className="text-sm font-semibold text-gray-300 tracking-wide">
+          ACP Visualizer
+        </span>
+      </div>
+      <div className="flex-1 py-2">
+        {navItems.map((item) => {
+          const isActive =
+            item.to === '/'
+              ? location.pathname === '/'
+              : location.pathname.startsWith(item.to)
+
+          return (
+            <Link
+              key={item.to}
+              to={item.to}
+              className={`flex items-center gap-3 px-4 py-2 text-sm transition-colors ${
+                isActive
+                  ? 'text-gray-100 bg-gray-800/50'
+                  : 'text-gray-400 hover:text-gray-200 hover:bg-gray-800/30'
+              }`}
+            >
+              <item.icon className="w-4 h-4" />
+              {item.label}
+            </Link>
+          )
+        })}
+      </div>
+      <div className="p-3 border-t border-gray-800">
+        <Link
+          to="/search"
+          className="flex items-center gap-2 px-3 py-1.5 text-sm text-gray-500 bg-gray-900 border border-gray-800 rounded-md hover:text-gray-300 hover:border-gray-600 transition-colors"
+        >
+          <Search className="w-4 h-4" />
+          Search...
+        </Link>
+      </div>
+    </nav>
+  )
+}

package/src/components/StatusBadge.tsx

@@ -0,0 +1,23 @@
+import type { Status } from '@/lib/types'
+
+const statusStyles: Record<Status, string> = {
+  completed: 'bg-green-500/15 text-green-400 border-green-500/20',
+  in_progress: 'bg-blue-500/15 text-blue-400 border-blue-500/20',
+  not_started: 'bg-gray-500/15 text-gray-500 border-gray-500/20',
+}
+
+const statusLabels: Record<Status, string> = {
+  completed: 'Completed',
+  in_progress: 'In Progress',
+  not_started: 'Not Started',
+}
+
+export function StatusBadge({ status }: { status: Status }) {
+  return (
+    <span
+      className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs border ${statusStyles[status]}`}
+    >
+      {statusLabels[status]}
+    </span>
+  )
+}

package/src/components/StatusDot.tsx

@@ -0,0 +1,12 @@
+import type { Status } from '@/lib/types'
+
+const dotStyles: Record<Status, { symbol: string; color: string }> = {
+  completed: { symbol: '✓', color: 'text-green-400' },
+  in_progress: { symbol: '●', color: 'text-blue-400' },
+  not_started: { symbol: '○', color: 'text-gray-500' },
+}
+
+export function StatusDot({ status }: { status: Status }) {
+  const { symbol, color } = dotStyles[status]
+  return <span className={`${color} text-xs w-4 text-center`}>{symbol}</span>
+}

package/src/components/TaskList.tsx

@@ -0,0 +1,36 @@
+import { StatusDot } from './StatusDot'
+import { ExtraFieldsBadge } from './ExtraFieldsBadge'
+import type { Task } from '@/lib/types'
+
+export function TaskList({ tasks }: { tasks: Task[] }) {
+  if (tasks.length === 0) {
+    return (
+      <div className="pl-6 py-2">
+        <span className="text-xs text-gray-600">No tasks</span>
+      </div>
+    )
+  }
+
+  return (
+    <div className="pl-6 py-1 space-y-0.5">
+      {tasks.map((task) => (
+        <div key={task.id} className="flex items-center gap-2 py-1 text-sm">
+          <StatusDot status={task.status} />
+          <span
+            className={
+              task.status === 'completed' ? 'text-gray-500' : 'text-gray-200'
+            }
+          >
+            {task.name}
+          </span>
+          {task.notes && (
+            <span className="text-xs text-gray-600 ml-auto truncate max-w-[200px]">
+              {task.notes}
+            </span>
+          )}
+          <ExtraFieldsBadge fields={task.extra} />
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/components/ViewToggle.tsx

@@ -0,0 +1,31 @@
+interface ViewToggleProps {
+  value: 'table' | 'tree'
+  onChange: (view: 'table' | 'tree') => void
+}
+
+export function ViewToggle({ value, onChange }: ViewToggleProps) {
+  return (
+    <div className="flex gap-1 bg-gray-900 border border-gray-800 rounded-lg p-0.5">
+      <button
+        onClick={() => onChange('table')}
+        className={`px-3 py-1 text-xs rounded-md transition-colors ${
+          value === 'table'
+            ? 'bg-gray-700 text-gray-100'
+            : 'text-gray-500 hover:text-gray-300'
+        }`}
+      >
+        Table
+      </button>
+      <button
+        onClick={() => onChange('tree')}
+        className={`px-3 py-1 text-xs rounded-md transition-colors ${
+          value === 'tree'
+            ? 'bg-gray-700 text-gray-100'
+            : 'text-gray-500 hover:text-gray-300'
+        }`}
+      >
+        Tree
+      </button>
+    </div>
+  )
+}

package/src/lib/config.ts

@@ -0,0 +1,8 @@
+/**
+ * Resolves the path to progress.yaml from (in order):
+ * 1. PROGRESS_YAML_PATH environment variable
+ * 2. Default: ./agent/progress.yaml (relative to cwd)
+ */
+export function getProgressYamlPath(): string {
+  return process.env.PROGRESS_YAML_PATH || './agent/progress.yaml'
+}

package/src/lib/file-watcher.ts

@@ -0,0 +1,43 @@
+import { watch } from 'fs'
+import { getProgressYamlPath } from './config'
+
+type Controller = ReadableStreamDefaultController
+
+let watcher: {
+  addClient: (controller: Controller) => void
+  removeClient: (controller: Controller) => void
+} | null = null
+
+export function getFileWatcher() {
+  if (watcher) return watcher
+
+  const filePath = getProgressYamlPath()
+  const clients = new Set<Controller>()
+
+  try {
+    watch(filePath, (eventType) => {
+      if (eventType === 'change') {
+        for (const controller of clients) {
+          try {
+            controller.enqueue(new TextEncoder().encode('data: refresh\n\n'))
+          } catch {
+            clients.delete(controller)
+          }
+        }
+      }
+    })
+  } catch (err) {
+    console.warn('[FileWatcher] Could not watch file:', err)
+  }
+
+  watcher = {
+    addClient(controller: Controller) {
+      clients.add(controller)
+    },
+    removeClient(controller: Controller) {
+      clients.delete(controller)
+    },
+  }
+
+  return watcher
+}

package/src/lib/search.ts

@@ -0,0 +1,48 @@
+import Fuse from 'fuse.js'
+import type { ProgressData, Milestone, Task } from './types'
+
+export interface SearchItem {
+  type: 'milestone' | 'task'
+  milestone: Milestone
+  task?: Task
+  name: string
+  notes: string
+  extra: string
+}
+
+export function buildSearchIndex(data: ProgressData) {
+  const items: SearchItem[] = []
+
+  for (const milestone of data.milestones) {
+    items.push({
+      type: 'milestone',
+      milestone,
+      name: milestone.name,
+      notes: milestone.notes,
+      extra: JSON.stringify(milestone.extra),
+    })
+
+    const tasks = data.tasks[milestone.id] || []
+    for (const task of tasks) {
+      items.push({
+        type: 'task',
+        milestone,
+        task,
+        name: task.name,
+        notes: task.notes,
+        extra: JSON.stringify(task.extra),
+      })
+    }
+  }
+
+  return new Fuse(items, {
+    keys: [
+      { name: 'name', weight: 2 },
+      { name: 'notes', weight: 1 },
+      { name: 'extra', weight: 0.5 },
+    ],
+    threshold: 0.4,
+    includeScore: true,
+    ignoreLocation: true,
+  })
+}

package/src/lib/types.ts

@@ -0,0 +1,73 @@
+/** Status values for milestones and tasks */
+export type Status = 'completed' | 'in_progress' | 'not_started'
+
+/** Unknown properties from agent-maintained YAML are preserved here */
+export type ExtraFields = Record<string, unknown>
+
+export interface ProgressData {
+  project: ProjectMetadata
+  milestones: Milestone[]
+  tasks: Record<string, Task[]> // keyed by milestone_id
+  recent_work: WorkEntry[]
+  next_steps: string[]
+  notes: string[]
+  current_blockers: string[]
+  documentation: DocumentationStats
+  progress: ProgressSummary
+}
+
+export interface ProjectMetadata {
+  name: string
+  version: string
+  started: string
+  status: Status
+  current_milestone?: string
+  description: string
+  extra: ExtraFields
+}
+
+export interface Milestone {
+  id: string
+  name: string
+  status: Status
+  progress: number // 0-100
+  started: string | null
+  completed: string | null
+  estimated_weeks: string
+  tasks_completed: number
+  tasks_total: number
+  notes: string
+  extra: ExtraFields
+}
+
+export interface Task {
+  id: string
+  name: string
+  status: Status
+  milestone_id: string
+  file: string
+  estimated_hours: string
+  completed_date: string | null
+  notes: string
+  extra: ExtraFields
+}
+
+export interface WorkEntry {
+  date: string
+  description: string
+  items: string[]
+  extra: ExtraFields
+}
+
+export interface DocumentationStats {
+  design_documents: number
+  milestone_documents: number
+  pattern_documents: number
+  task_documents: number
+}
+
+export interface ProgressSummary {
+  planning: number
+  implementation: number
+  overall: number
+}

package/src/lib/useAutoRefresh.ts

@@ -0,0 +1,31 @@
+import { useRouter } from '@tanstack/react-router'
+import { useEffect } from 'react'
+
+export function useAutoRefresh() {
+  const router = useRouter()
+
+  useEffect(() => {
+    const eventSource = new EventSource('/api/watch')
+
+    eventSource.onmessage = () => {
+      router.invalidate()
+    }
+
+    eventSource.onerror = () => {
+      // EventSource handles reconnection automatically
+    }
+
+    // Reconnect on tab visibility change
+    const handleVisibility = () => {
+      if (document.visibilityState === 'visible') {
+        router.invalidate()
+      }
+    }
+    document.addEventListener('visibilitychange', handleVisibility)
+
+    return () => {
+      eventSource.close()
+      document.removeEventListener('visibilitychange', handleVisibility)
+    }
+  }, [router])
+}