@prmichaelsen/acp-visualizer 0.1.7 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prmichaelsen/acp-visualizer",
-  "version": "0.1.7",
+  "version": "0.2.1",
   "type": "module",
   "description": "Browser-based dashboard for visualizing ACP progress.yaml data",
   "bin": {
@@ -35,6 +35,7 @@
     "lucide-react": "^0.544.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "recharts": "^3.8.0",
     "tailwindcss": "^4.0.6",
     "typescript": "^5.7.2",
     "vite": "^7.1.7",

package/src/components/BurndownChart.tsx

@@ -0,0 +1,148 @@
+import {
+  AreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+} from 'recharts'
+import type { ProgressData } from '../lib/types'
+
+interface BurndownChartProps {
+  data: ProgressData
+}
+
+interface ChartPoint {
+  date: string
+  completed: number
+  total: number
+  remaining: number
+}
+
+function buildBurndownData(data: ProgressData): ChartPoint[] {
+  // Collect all task completion dates
+  const allTasks: Array<{ completed_date: string | null; status: string }> = []
+  for (const tasks of Object.values(data.tasks)) {
+    for (const t of tasks) {
+      allTasks.push({ completed_date: t.completed_date, status: t.status })
+    }
+  }
+
+  const total = allTasks.length
+  if (total === 0) return []
+
+  // Get sorted unique completion dates
+  const completionDates = allTasks
+    .map((t) => t.completed_date)
+    .filter((d): d is string => d != null)
+    .sort()
+
+  if (completionDates.length === 0) {
+    // No completed tasks — show single point
+    return [{ date: data.project.started || 'Start', completed: 0, total, remaining: total }]
+  }
+
+  // Build cumulative completion over time
+  const points: ChartPoint[] = []
+
+  // Start point
+  const startDate = data.project.started || completionDates[0]
+  points.push({ date: startDate, completed: 0, total, remaining: total })
+
+  // Accumulate completions by date
+  const byDate = new Map<string, number>()
+  for (const d of completionDates) {
+    byDate.set(d, (byDate.get(d) || 0) + 1)
+  }
+
+  let cumulative = 0
+  for (const [date, count] of [...byDate.entries()].sort()) {
+    cumulative += count
+    // Skip if same as start date (already added)
+    if (date === startDate && points.length === 1) {
+      points[0] = { date, completed: cumulative, total, remaining: total - cumulative }
+      continue
+    }
+    points.push({ date, completed: cumulative, total, remaining: total - cumulative })
+  }
+
+  return points
+}
+
+export function BurndownChart({ data }: BurndownChartProps) {
+  const chartData = buildBurndownData(data)
+
+  if (chartData.length === 0) {
+    return <p className="text-gray-600 text-sm">No task data for chart</p>
+  }
+
+  return (
+    <div className="bg-gray-900/50 border border-gray-800 rounded-xl p-5">
+      <h3 className="text-sm font-semibold text-gray-300 mb-4">
+        Task Completion Over Time
+      </h3>
+      <ResponsiveContainer width="100%" height={250}>
+        <AreaChart data={chartData} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>
+          <defs>
+            <linearGradient id="completedGrad" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="5%" stopColor="#22c55e" stopOpacity={0.3} />
+              <stop offset="95%" stopColor="#22c55e" stopOpacity={0} />
+            </linearGradient>
+            <linearGradient id="remainingGrad" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="5%" stopColor="#3b82f6" stopOpacity={0.2} />
+              <stop offset="95%" stopColor="#3b82f6" stopOpacity={0} />
+            </linearGradient>
+          </defs>
+          <CartesianGrid strokeDasharray="3 3" stroke="#1f2937" />
+          <XAxis
+            dataKey="date"
+            tick={{ fill: '#6b7280', fontSize: 11 }}
+            tickLine={false}
+            axisLine={{ stroke: '#374151' }}
+          />
+          <YAxis
+            tick={{ fill: '#6b7280', fontSize: 11 }}
+            tickLine={false}
+            axisLine={{ stroke: '#374151' }}
+          />
+          <Tooltip
+            contentStyle={{
+              backgroundColor: '#111827',
+              border: '1px solid #374151',
+              borderRadius: '8px',
+              fontSize: '12px',
+              color: '#e5e7eb',
+            }}
+          />
+          <Area
+            type="monotone"
+            dataKey="completed"
+            name="Completed"
+            stroke="#22c55e"
+            fill="url(#completedGrad)"
+            strokeWidth={2}
+          />
+          <Area
+            type="monotone"
+            dataKey="remaining"
+            name="Remaining"
+            stroke="#3b82f6"
+            fill="url(#remainingGrad)"
+            strokeWidth={2}
+          />
+        </AreaChart>
+      </ResponsiveContainer>
+      <div className="flex gap-6 mt-3 justify-center">
+        <div className="flex items-center gap-2 text-xs text-gray-400">
+          <div className="w-3 h-3 rounded-sm bg-green-500/30 border border-green-500" />
+          Completed
+        </div>
+        <div className="flex items-center gap-2 text-xs text-gray-400">
+          <div className="w-3 h-3 rounded-sm bg-blue-500/20 border border-blue-500" />
+          Remaining
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/MilestoneKanban.tsx

@@ -0,0 +1,104 @@
+import { StatusBadge } from './StatusBadge'
+import { ProgressBar } from './ProgressBar'
+import { TaskList } from './TaskList'
+import type { Milestone, Task, Status } from '../lib/types'
+import { useState } from 'react'
+import { ChevronDown, ChevronRight } from 'lucide-react'
+
+const columns: Array<{ status: Status; label: string; color: string }> = [
+  { status: 'not_started', label: 'Not Started', color: 'border-gray-600' },
+  { status: 'in_progress', label: 'In Progress', color: 'border-blue-500' },
+  { status: 'completed', label: 'Completed', color: 'border-green-500' },
+]
+
+interface MilestoneKanbanProps {
+  milestones: Milestone[]
+  tasks: Record<string, Task[]>
+}
+
+function KanbanCard({
+  milestone,
+  tasks,
+}: {
+  milestone: Milestone
+  tasks: Task[]
+}) {
+  const [expanded, setExpanded] = useState(false)
+
+  return (
+    <div className="bg-gray-900/50 border border-gray-800 rounded-lg p-3 hover:border-gray-700 transition-colors">
+      <div className="flex items-start justify-between gap-2 mb-2">
+        <h4 className="text-sm font-medium leading-tight">{milestone.name}</h4>
+      </div>
+      <div className="flex items-center gap-2 mb-2">
+        <div className="flex-1">
+          <ProgressBar value={milestone.progress} size="sm" />
+        </div>
+        <span className="text-xs text-gray-500 font-mono">
+          {milestone.tasks_completed}/{milestone.tasks_total}
+        </span>
+      </div>
+      {milestone.notes && (
+        <p className="text-xs text-gray-500 truncate mb-2">{milestone.notes}</p>
+      )}
+      {tasks.length > 0 && (
+        <button
+          onClick={() => setExpanded(!expanded)}
+          className="flex items-center gap-1 text-xs text-gray-500 hover:text-gray-300 transition-colors"
+        >
+          {expanded ? (
+            <ChevronDown className="w-3 h-3" />
+          ) : (
+            <ChevronRight className="w-3 h-3" />
+          )}
+          {tasks.length} task{tasks.length !== 1 ? 's' : ''}
+        </button>
+      )}
+      {expanded && (
+        <div className="mt-2 border-t border-gray-800 pt-2">
+          <TaskList tasks={tasks} />
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function MilestoneKanban({ milestones, tasks }: MilestoneKanbanProps) {
+  if (milestones.length === 0) {
+    return <p className="text-gray-600 text-sm">No milestones</p>
+  }
+
+  return (
+    <div className="grid grid-cols-3 gap-4 min-h-[300px]">
+      {columns.map((col) => {
+        const items = milestones.filter((m) => m.status === col.status)
+        return (
+          <div key={col.status} className="flex flex-col">
+            <div
+              className={`flex items-center gap-2 pb-3 mb-3 border-b-2 ${col.color}`}
+            >
+              <h3 className="text-sm font-medium text-gray-300">{col.label}</h3>
+              <span className="text-xs text-gray-500 bg-gray-800 px-1.5 py-0.5 rounded-full">
+                {items.length}
+              </span>
+            </div>
+            <div className="space-y-2 flex-1">
+              {items.map((m) => (
+                <KanbanCard
+                  key={m.id}
+                  milestone={m}
+                  tasks={tasks[m.id] || []}
+                />
+              ))}
+              {items.length === 0 && (
+                <p className="text-xs text-gray-700 text-center py-4">
+                  No milestones
+                </p>
+              )}
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}

package/src/components/Sidebar.tsx

@@ -1,10 +1,11 @@
 import { Link, useRouterState } from '@tanstack/react-router'
-import { LayoutDashboard, Flag, CheckSquare, Search } from 'lucide-react'
+import { LayoutDashboard, Flag, CheckSquare, Clock, 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' },
+  { to: '/activity' as const, icon: Clock, label: 'Activity' },
 ]
 
 export function Sidebar() {

package/src/components/ViewToggle.tsx

@@ -1,31 +1,32 @@
+export type ViewMode = 'table' | 'tree' | 'kanban'
+
 interface ViewToggleProps {
-  value: 'table' | 'tree'
-  onChange: (view: 'table' | 'tree') => void
+  value: ViewMode
+  onChange: (view: ViewMode) => void
 }
 
+const views: Array<{ id: ViewMode; label: string }> = [
+  { id: 'table', label: 'Table' },
+  { id: 'tree', label: 'Tree' },
+  { id: 'kanban', label: 'Kanban' },
+]
+
 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>
+      {views.map((v) => (
+        <button
+          key={v.id}
+          onClick={() => onChange(v.id)}
+          className={`px-3 py-1 text-xs rounded-md transition-colors ${
+            value === v.id
+              ? 'bg-gray-700 text-gray-100'
+              : 'text-gray-500 hover:text-gray-300'
+          }`}
+        >
+          {v.label}
+        </button>
+      ))}
     </div>
   )
 }

package/src/lib/yaml-loader.ts

@@ -135,7 +135,11 @@ function normalizeMilestone(raw: unknown, index: number): Milestone {
     id: safeString(known.id, `milestone_${index + 1}`),
     name: safeString(known.name, `Milestone ${index + 1}`),
     status: normalizeStatus(known.status),
-    progress: safeNumber(known.progress),
+    progress: known.progress != null
+      ? safeNumber(known.progress)
+      : safeNumber(known.tasks_total) > 0
+        ? Math.round((safeNumber(known.tasks_completed) / safeNumber(known.tasks_total)) * 100)
+        : normalizeStatus(known.status) === 'completed' ? 100 : 0,
     started: known.started ? safeString(known.started) : null,
     completed: known.completed ? safeString(known.completed) : null,
     estimated_weeks: safeString(known.estimated_weeks, '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/activity.tsx

@@ -0,0 +1,97 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { Clock } from 'lucide-react'
+
+export const Route = createFileRoute('/activity')({
+  component: ActivityPage,
+})
+
+function ActivityPage() {
+  const { progressData } = Route.useRouteContext()
+
+  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,6 +1,7 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { StatusBadge } from '../components/StatusBadge'
 import { ProgressBar } from '../components/ProgressBar'
+import { BurndownChart } from '../components/BurndownChart'
 
 export const Route = createFileRoute('/')({
   component: HomePage,
@@ -78,6 +79,9 @@ function HomePage() {
         </div>
       </div>
 
+      {/* Burndown Chart */}
+      <BurndownChart data={data} />
+
       {/* Next Steps */}
       {data.next_steps.length > 0 && (
         <div>

package/src/routes/milestones.tsx

@@ -2,7 +2,8 @@ import { createFileRoute } from '@tanstack/react-router'
 import { useState } from 'react'
 import { MilestoneTable } from '../components/MilestoneTable'
 import { MilestoneTree } from '../components/MilestoneTree'
-import { ViewToggle } from '../components/ViewToggle'
+import { MilestoneKanban } from '../components/MilestoneKanban'
+import { ViewToggle, type ViewMode } from '../components/ViewToggle'
 import { FilterBar } from '../components/FilterBar'
 import { SearchInput } from '../components/SearchInput'
 import { useFilteredData } from '../lib/useFilteredData'
@@ -14,7 +15,7 @@ export const Route = createFileRoute('/milestones')({
 
 function MilestonesPage() {
   const { progressData } = Route.useRouteContext()
-  const [view, setView] = useState<'table' | 'tree'>('table')
+  const [view, setView] = useState<ViewMode>('table')
   const [status, setStatus] = useState<Status | 'all'>('all')
   const [search, setSearch] = useState('')
 
@@ -34,16 +35,20 @@ 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} />
+      ) : (
+        <MilestoneKanban milestones={filtered.milestones} tasks={filtered.tasks} />
       )}
     </div>
   )