@prmichaelsen/acp-visualizer 0.7.1 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prmichaelsen/acp-visualizer",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "type": "module",
   "description": "Browser-based dashboard for visualizing ACP progress.yaml data",
   "bin": {
@@ -24,7 +24,8 @@
     "cf-secrets:e1": "tsx scripts/upload-cloudflare-secrets.ts -- --env .env.e1.local",
     "cf-secrets:prod": "tsx scripts/upload-cloudflare-secrets.ts -- --env .env.prod.local",
     "typecheck": "tsc --noEmit",
-    "cf-typegen": "wrangler types"
+    "cf-typegen": "wrangler types",
+    "visualizer": "visualizer"
   },
   "dependencies": {
     "@cloudflare/vite-plugin": "^1.28.0",

package/src/components/EstimateChart.tsx

@@ -0,0 +1,129 @@
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Legend,
+  Cell,
+} from 'recharts'
+import type { ProgressData } from '../lib/types'
+
+interface EstimateChartProps {
+  data: ProgressData
+}
+
+interface MilestoneEstimate {
+  name: string
+  estimated: number
+  actual: number | null
+  status: string
+}
+
+function buildEstimateData(data: ProgressData): MilestoneEstimate[] {
+  return data.milestones.map((m) => {
+    const tasks = data.tasks[m.id] || []
+
+    // Sum estimated hours from tasks
+    const estimated = tasks.reduce((sum, t) => {
+      const h = parseFloat(t.estimated_hours)
+      return sum + (isNaN(h) ? 0 : h)
+    }, 0)
+
+    // Calculate actual hours from milestone dates if completed
+    let actual: number | null = null
+    if (m.status === 'completed' && m.started && m.completed) {
+      const start = new Date(m.started)
+      const end = new Date(m.completed)
+      const days = Math.max(1, (end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24))
+      // Assume ~6 productive hours per day
+      actual = Math.round(days * 6 * 10) / 10
+    }
+
+    // Truncate long names
+    const label = m.name.length > 30 ? m.name.slice(0, 28) + '...' : m.name
+
+    return { name: label, estimated, actual, status: m.status }
+  })
+}
+
+export function EstimateChart({ data }: EstimateChartProps) {
+  const chartData = buildEstimateData(data)
+
+  if (chartData.length === 0) {
+    return null
+  }
+
+  const hasActuals = chartData.some((d) => d.actual !== null)
+
+  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">
+        Estimated vs Actual Hours
+      </h3>
+      <ResponsiveContainer width="100%" height={Math.max(200, chartData.length * 50 + 40)}>
+        <BarChart
+          data={chartData}
+          layout="vertical"
+          margin={{ top: 5, right: 20, bottom: 5, left: 10 }}
+        >
+          <CartesianGrid strokeDasharray="3 3" stroke="#1f2937" horizontal={false} />
+          <XAxis
+            type="number"
+            tick={{ fill: '#6b7280', fontSize: 11 }}
+            tickLine={false}
+            axisLine={{ stroke: '#374151' }}
+            label={{ value: 'Hours', position: 'insideBottomRight', offset: -5, fill: '#6b7280', fontSize: 11 }}
+          />
+          <YAxis
+            type="category"
+            dataKey="name"
+            width={180}
+            tick={{ fill: '#9ca3af', fontSize: 11 }}
+            tickLine={false}
+            axisLine={{ stroke: '#374151' }}
+          />
+          <Tooltip
+            contentStyle={{
+              backgroundColor: '#111827',
+              border: '1px solid #374151',
+              borderRadius: '8px',
+              fontSize: '12px',
+              color: '#e5e7eb',
+            }}
+            formatter={(value: unknown, name: unknown) => [
+              `${value}h`,
+              name === 'estimated' ? 'Estimated' : 'Actual',
+            ]}
+          />
+          <Legend
+            wrapperStyle={{ fontSize: '12px', color: '#9ca3af' }}
+            formatter={(value: string) => (value === 'estimated' ? 'Estimated' : 'Actual')}
+          />
+          <Bar dataKey="estimated" fill="#3b82f6" barSize={14} radius={[0, 4, 4, 0]} />
+          {hasActuals && (
+            <Bar dataKey="actual" barSize={14} radius={[0, 4, 4, 0]}>
+              {chartData.map((entry, i) => (
+                <Cell
+                  key={i}
+                  fill={
+                    entry.actual !== null && entry.actual > entry.estimated
+                      ? '#ef4444'
+                      : '#22c55e'
+                  }
+                />
+              ))}
+            </Bar>
+          )}
+        </BarChart>
+      </ResponsiveContainer>
+      {!hasActuals && (
+        <p className="text-xs text-gray-600 text-center mt-2">
+          Actual hours will appear once milestones have start and completion dates
+        </p>
+      )}
+    </div>
+  )
+}

package/src/routes/index.tsx

@@ -2,6 +2,7 @@ import { createFileRoute } from '@tanstack/react-router'
 import { StatusBadge } from '../components/StatusBadge'
 import { ProgressBar } from '../components/ProgressBar'
 import { BurndownChart } from '../components/BurndownChart'
+import { EstimateChart } from '../components/EstimateChart'
 import { useProgressData } from '../contexts/ProgressContext'
 
 export const Route = createFileRoute('/')({
@@ -69,32 +70,8 @@ function HomePage() {
         </div>
       </div>
 
-      {/* Milestones Summary */}
-      <div>
-        <h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-3">
-          Milestones ({data.milestones.length})
-        </h3>
-        <div className="space-y-2">
-          {data.milestones.map((m) => (
-            <div
-              key={m.id}
-              className="bg-gray-900/50 border border-gray-800 rounded-lg px-4 py-3 flex items-center gap-4"
-            >
-              <span className="flex-1 text-sm font-medium">{m.name}</span>
-              <StatusBadge status={m.status} />
-              <div className="w-24">
-                <ProgressBar value={m.progress} size="sm" />
-              </div>
-              <span className="text-xs text-gray-500 font-mono w-16 text-right">
-                {m.tasks_completed}/{m.tasks_total}
-              </span>
-            </div>
-          ))}
-          {data.milestones.length === 0 && (
-            <p className="text-gray-600 text-sm">No milestones defined</p>
-          )}
-        </div>
-      </div>
+      {/* Estimated vs Actual */}
+      <EstimateChart data={data} />
 
       {/* Burndown Chart */}
       <BurndownChart data={data} />

package/src/routes/milestones.index.tsx

@@ -1,5 +1,5 @@
-import { createFileRoute } from '@tanstack/react-router'
-import { useState, lazy, Suspense } from 'react'
+import { createFileRoute, useNavigate } from '@tanstack/react-router'
+import { lazy, Suspense, useCallback } from 'react'
 import { MilestoneTable } from '../components/MilestoneTable'
 import { MilestoneTree } from '../components/MilestoneTree'
 import { MilestoneKanban } from '../components/MilestoneKanban'
@@ -10,20 +10,40 @@ import { SearchInput } from '../components/SearchInput'
 import { useFilteredData } from '../lib/useFilteredData'
 import { useProgressData } from '../contexts/ProgressContext'
 import type { Status } from '../lib/types'
+import { z } from 'zod'
 
 // 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 })))
 
+const viewModes = ['table', 'tree', 'kanban', 'gantt', 'graph'] as const
+const statuses = ['all', 'completed', 'in_progress', 'not_started', 'wont_do'] as const
+
 export const Route = createFileRoute('/milestones/')({
   component: MilestonesPage,
+  validateSearch: z.object({
+    view: z.enum(viewModes).default('tree'),
+    status: z.enum(statuses).default('all'),
+    q: z.string().default(''),
+  }),
 })
 
 function MilestonesPage() {
   const progressData = useProgressData()
-  const [view, setView] = useState<ViewMode>('table')
-  const [status, setStatus] = useState<Status | 'all'>('all')
-  const [search, setSearch] = useState('')
+  const { view, status, q: search } = Route.useSearch()
+  const navigate = useNavigate({ from: Route.fullPath })
+
+  const setView = useCallback((v: ViewMode) => {
+    navigate({ search: (prev) => ({ ...prev, view: v }), replace: true })
+  }, [navigate])
+
+  const setStatus = useCallback((s: Status | 'all') => {
+    navigate({ search: (prev) => ({ ...prev, status: s }), replace: true })
+  }, [navigate])
+
+  const setSearch = useCallback((q: string) => {
+    navigate({ search: (prev) => ({ ...prev, q: q || undefined }), replace: true })
+  }, [navigate])
 
   const filtered = useFilteredData(progressData, { status, search })