@prmichaelsen/acp-visualizer 0.1.8 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prmichaelsen/acp-visualizer",
-  "version": "0.1.8",
+  "version": "0.5.0",
   "type": "module",
   "description": "Browser-based dashboard for visualizing ACP progress.yaml data",
   "bin": {
@@ -16,25 +16,36 @@
     "dev": "vite dev --port 3400 --host",
     "build": "vite build",
     "serve": "vite preview",
+    "deploy": "export $(cat .env.cloudflare.local | xargs) && npm run build && wrangler deploy",
+    "tail": "export $(cat .env.cloudflare.local | xargs) && wrangler tail",
     "test": "vitest",
     "test:run": "vitest run",
-    "test:coverage": "vitest run --coverage"
+    "test:coverage": "vitest run --coverage",
+    "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"
   },
   "dependencies": {
+    "@cloudflare/vite-plugin": "^1.28.0",
+    "@cloudflare/workers-types": "^4.20260313.1",
     "@tailwindcss/vite": "^4.0.6",
     "@tanstack/react-router": "^1.132.0",
     "@tanstack/react-start": "^1.132.0",
     "@tanstack/react-table": "^8.21.3",
     "@tanstack/router-plugin": "^1.132.0",
+    "@types/dagre": "^0.7.54",
     "@types/js-yaml": "^4.0.9",
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^5.0.4",
+    "dagre": "^0.8.5",
     "fuse.js": "^7.1.0",
     "js-yaml": "^4.1.0",
     "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/DependencyGraph.tsx

@@ -0,0 +1,196 @@
+import { useMemo } from 'react'
+import dagre from 'dagre'
+import type { ProgressData, Task, Status } from '../lib/types'
+
+interface DependencyGraphProps {
+  data: ProgressData
+}
+
+interface GraphNode {
+  id: string
+  label: string
+  status: Status
+  milestone: string
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+interface GraphEdge {
+  from: string
+  to: string
+  points: Array<{ x: number; y: number }>
+}
+
+const NODE_WIDTH = 180
+const NODE_HEIGHT = 44
+
+const statusColors: Record<Status, { bg: string; border: string; text: string }> = {
+  completed: { bg: '#22c55e15', border: '#22c55e40', text: '#4ade80' },
+  in_progress: { bg: '#3b82f615', border: '#3b82f640', text: '#60a5fa' },
+  not_started: { bg: '#6b728015', border: '#6b728040', text: '#9ca3af' },
+  wont_do: { bg: '#eab30815', border: '#eab30840', text: '#fbbf24' },
+}
+
+function buildGraph(data: ProgressData): { nodes: GraphNode[]; edges: GraphEdge[]; width: number; height: number } {
+  const g = new dagre.graphlib.Graph()
+  g.setGraph({ rankdir: 'LR', nodesep: 30, ranksep: 60, marginx: 20, marginy: 20 })
+  g.setDefaultEdgeLabel(() => ({}))
+
+  // Collect all tasks with their milestone context
+  const allTasks: Array<Task & { milestoneName: string }> = []
+  for (const milestone of data.milestones) {
+    const tasks = data.tasks[milestone.id] || []
+    for (const task of tasks) {
+      allTasks.push({ ...task, milestoneName: milestone.name })
+    }
+  }
+
+  if (allTasks.length === 0) {
+    return { nodes: [], edges: [], width: 0, height: 0 }
+  }
+
+  // Add nodes
+  for (const task of allTasks) {
+    g.setNode(String(task.id), { width: NODE_WIDTH, height: NODE_HEIGHT })
+  }
+
+  // Infer edges from task ordering within milestones (sequential dependency)
+  // Also check task notes/extra for explicit dependency references
+  for (const milestone of data.milestones) {
+    const tasks = data.tasks[milestone.id] || []
+    for (let i = 1; i < tasks.length; i++) {
+      g.setEdge(String(tasks[i - 1].id), String(tasks[i].id))
+    }
+  }
+
+  // Add cross-milestone edges: last task of milestone N → first task of milestone N+1
+  for (let i = 1; i < data.milestones.length; i++) {
+    const prevTasks = data.tasks[data.milestones[i - 1].id] || []
+    const currTasks = data.tasks[data.milestones[i].id] || []
+    if (prevTasks.length > 0 && currTasks.length > 0) {
+      g.setEdge(String(prevTasks[prevTasks.length - 1].id), String(currTasks[0].id))
+    }
+  }
+
+  dagre.layout(g)
+
+  const nodes: GraphNode[] = allTasks.map((task) => {
+    const node = g.node(String(task.id))
+    return {
+      id: String(task.id),
+      label: task.name,
+      status: task.status,
+      milestone: task.milestoneName,
+      x: node.x,
+      y: node.y,
+      width: NODE_WIDTH,
+      height: NODE_HEIGHT,
+    }
+  })
+
+  const edges: GraphEdge[] = g.edges().map((e) => {
+    const edge = g.edge(e)
+    return {
+      from: e.v,
+      to: e.w,
+      points: edge.points || [],
+    }
+  })
+
+  const graphInfo = g.graph()
+  return {
+    nodes,
+    edges,
+    width: (graphInfo.width || 800) + 40,
+    height: (graphInfo.height || 400) + 40,
+  }
+}
+
+function edgePathD(points: Array<{ x: number; y: number }>): string {
+  if (points.length < 2) return ''
+  const [start, ...rest] = points
+  return `M ${start.x} ${start.y} ${rest.map((p) => `L ${p.x} ${p.y}`).join(' ')}`
+}
+
+export function DependencyGraph({ data }: DependencyGraphProps) {
+  const { nodes, edges, width, height } = useMemo(() => buildGraph(data), [data])
+
+  if (nodes.length === 0) {
+    return (
+      <div className="text-center py-8">
+        <p className="text-gray-600 text-sm">No tasks to display in dependency graph</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="border border-gray-800 rounded-lg overflow-auto bg-gray-950/50">
+      <svg width={width} height={height} className="min-w-full">
+        <defs>
+          <marker
+            id="arrowhead"
+            viewBox="0 0 10 7"
+            refX="10"
+            refY="3.5"
+            markerWidth="8"
+            markerHeight="6"
+            orient="auto"
+          >
+            <polygon points="0 0, 10 3.5, 0 7" fill="#4b5563" />
+          </marker>
+        </defs>
+
+        {/* Edges */}
+        {edges.map((edge, i) => (
+          <path
+            key={i}
+            d={edgePathD(edge.points)}
+            fill="none"
+            stroke="#374151"
+            strokeWidth={1.5}
+            markerEnd="url(#arrowhead)"
+          />
+        ))}
+
+        {/* Nodes */}
+        {nodes.map((node) => {
+          const colors = statusColors[node.status]
+          return (
+            <g key={node.id} transform={`translate(${node.x - node.width / 2}, ${node.y - node.height / 2})`}>
+              <rect
+                width={node.width}
+                height={node.height}
+                rx={6}
+                ry={6}
+                fill={colors.bg}
+                stroke={colors.border}
+                strokeWidth={1.5}
+              />
+              <text
+                x={10}
+                y={18}
+                fill={colors.text}
+                fontSize={11}
+                fontFamily="Inter, system-ui, sans-serif"
+                fontWeight={500}
+              >
+                {node.label.length > 22 ? node.label.slice(0, 22) + '...' : node.label}
+              </text>
+              <text
+                x={10}
+                y={34}
+                fill="#6b7280"
+                fontSize={9}
+                fontFamily="Inter, system-ui, sans-serif"
+              >
+                {node.milestone}
+              </text>
+            </g>
+          )
+        })}
+      </svg>
+    </div>
+  )
+}

package/src/components/FilterBar.tsx

@@ -5,6 +5,7 @@ const statusOptions: Array<{ value: Status | 'all'; label: string }> = [
   { value: 'in_progress', label: 'In Progress' },
   { value: 'not_started', label: 'Not Started' },
   { value: 'completed', label: 'Completed' },
+  { value: 'wont_do', label: "Won't Do" },
 ]
 
 interface FilterBarProps {

package/src/components/GitHubInput.tsx

@@ -0,0 +1,65 @@
+import { useState } from 'react'
+import { Github, Loader2 } from 'lucide-react'
+
+interface GitHubInputProps {
+  onLoad: (owner: string, repo: string) => Promise<void>
+}
+
+export function GitHubInput({ onLoad }: GitHubInputProps) {
+  const [value, setValue] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const handleSubmit = async () => {
+    setError(null)
+    // Parse owner/repo from various formats
+    const cleaned = value.trim()
+      .replace(/^https?:\/\/github\.com\//, '')
+      .replace(/\.git$/, '')
+      .replace(/\/$/, '')
+
+    const parts = cleaned.split('/')
+    if (parts.length < 2) {
+      setError('Enter owner/repo (e.g. user/project)')
+      return
+    }
+
+    setLoading(true)
+    try {
+      await onLoad(parts[0], parts[1])
+      setValue('')
+    } catch {
+      setError('Failed to load')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div>
+      <div className="flex gap-1">
+        <div className="relative flex-1">
+          <Github className="absolute left-2 top-[7px] w-3.5 h-3.5 text-gray-500" />
+          <input
+            type="text"
+            value={value}
+            onChange={(e) => { setValue(e.target.value); setError(null) }}
+            onKeyDown={(e) => e.key === 'Enter' && handleSubmit()}
+            placeholder="owner/repo"
+            className="w-full bg-gray-900 border border-gray-800 rounded-md pl-7 pr-2 py-1.5 text-xs text-gray-200 placeholder-gray-600 focus:outline-none focus:border-gray-600 transition-colors"
+          />
+        </div>
+        <button
+          onClick={handleSubmit}
+          disabled={loading || !value.trim()}
+          className="px-2 py-1.5 bg-gray-800 border border-gray-700 rounded-md text-xs text-gray-300 hover:bg-gray-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+        >
+          {loading ? <Loader2 className="w-3 h-3 animate-spin" /> : 'Go'}
+        </button>
+      </div>
+      {error && (
+        <p className="text-xs text-red-400 mt-1">{error}</p>
+      )}
+    </div>
+  )
+}

package/src/components/MilestoneGantt.tsx

@@ -0,0 +1,150 @@
+import { useMemo } from 'react'
+import { StatusBadge } from './StatusBadge'
+import type { Milestone, Task } from '../lib/types'
+
+interface MilestoneGanttProps {
+  milestones: Milestone[]
+  tasks: Record<string, Task[]>
+}
+
+function parseDate(d: string | null): Date | null {
+  if (!d) return null
+  const parsed = new Date(d)
+  return isNaN(parsed.getTime()) ? null : parsed
+}
+
+function formatDate(d: Date): string {
+  return d.toISOString().slice(0, 10)
+}
+
+function daysBetween(a: Date, b: Date): number {
+  return Math.max(1, Math.round((b.getTime() - a.getTime()) / (1000 * 60 * 60 * 24)))
+}
+
+export function MilestoneGantt({ milestones, tasks }: MilestoneGanttProps) {
+  const { bars, minDate, maxDate, totalDays } = useMemo(() => {
+    const now = new Date()
+
+    // Build bars with start/end dates
+    const bars = milestones.map((m) => {
+      const start = parseDate(m.started)
+      const end = parseDate(m.completed) || (m.status === 'in_progress' ? now : null)
+
+      // Estimate end from start + estimated_weeks if no end date
+      const weeks = parseFloat(m.estimated_weeks) || 0
+      const estimatedEnd = start && weeks > 0
+        ? new Date(start.getTime() + weeks * 7 * 24 * 60 * 60 * 1000)
+        : null
+
+      return {
+        milestone: m,
+        tasks: tasks[m.id] || [],
+        start,
+        end: end || estimatedEnd,
+      }
+    }).filter((b) => b.start != null) // Only show milestones with dates
+
+    if (bars.length === 0) {
+      return { bars: [], minDate: now, maxDate: now, totalDays: 1 }
+    }
+
+    const allDates = bars.flatMap((b) => [b.start!, b.end!].filter(Boolean))
+    const minDate = new Date(Math.min(...allDates.map((d) => d.getTime())))
+    const maxDate = new Date(Math.max(...allDates.map((d) => d.getTime())))
+
+    // Add some padding
+    minDate.setDate(minDate.getDate() - 2)
+    maxDate.setDate(maxDate.getDate() + 2)
+
+    const totalDays = daysBetween(minDate, maxDate)
+
+    return { bars, minDate, maxDate, totalDays }
+  }, [milestones, tasks])
+
+  if (bars.length === 0) {
+    return (
+      <div className="text-center py-8">
+        <p className="text-gray-600 text-sm">No milestones with dates for timeline view</p>
+        <p className="text-gray-700 text-xs mt-1">
+          Add `started` dates to milestones in progress.yaml
+        </p>
+      </div>
+    )
+  }
+
+  // Generate month labels
+  const monthLabels: Array<{ label: string; left: number }> = []
+  const cursor = new Date(minDate)
+  cursor.setDate(1)
+  while (cursor <= maxDate) {
+    const daysFromStart = daysBetween(minDate, cursor)
+    const left = (daysFromStart / totalDays) * 100
+    if (left >= 0 && left <= 100) {
+      monthLabels.push({
+        label: cursor.toLocaleDateString('en-US', { month: 'short', year: '2-digit' }),
+        left,
+      })
+    }
+    cursor.setMonth(cursor.getMonth() + 1)
+  }
+
+  return (
+    <div className="border border-gray-800 rounded-lg overflow-hidden">
+      {/* Timeline header */}
+      <div className="relative h-8 bg-gray-900/50 border-b border-gray-800">
+        {monthLabels.map((m, i) => (
+          <div
+            key={i}
+            className="absolute top-0 h-full border-l border-gray-800 flex items-center"
+            style={{ left: `${Math.max(0, m.left)}%` }}
+          >
+            <span className="text-[10px] text-gray-500 pl-1.5">{m.label}</span>
+          </div>
+        ))}
+      </div>
+
+      {/* Bars */}
+      <div className="divide-y divide-gray-800/50">
+        {bars.map(({ milestone, start, end }) => {
+          const barStart = start ? (daysBetween(minDate, start) / totalDays) * 100 : 0
+          const barEnd = end ? (daysBetween(minDate, end) / totalDays) * 100 : barStart + 5
+          const barWidth = Math.max(2, barEnd - barStart)
+
+          const barColor =
+            milestone.status === 'completed'
+              ? 'bg-green-500/40 border-green-500/60'
+              : milestone.status === 'in_progress'
+                ? 'bg-blue-500/40 border-blue-500/60'
+                : 'bg-gray-500/30 border-gray-500/40'
+
+          return (
+            <div key={milestone.id} className="flex items-center h-12 px-3 hover:bg-gray-800/20">
+              {/* Label */}
+              <div className="w-48 shrink-0 flex items-center gap-2">
+                <span className="text-xs text-gray-300 truncate">{milestone.name}</span>
+              </div>
+              {/* Bar area */}
+              <div className="flex-1 relative h-6">
+                <div
+                  className={`absolute top-1 h-4 rounded-sm border ${barColor} transition-all`}
+                  style={{ left: `${barStart}%`, width: `${barWidth}%` }}
+                  title={`${milestone.name}: ${start ? formatDate(start) : '?'} → ${end ? formatDate(end) : '?'} (${milestone.progress}%)`}
+                >
+                  {/* Progress fill within bar */}
+                  <div
+                    className={`h-full rounded-sm ${
+                      milestone.status === 'completed'
+                        ? 'bg-green-500/60'
+                        : 'bg-blue-500/60'
+                    }`}
+                    style={{ width: `${milestone.progress}%` }}
+                  />
+                </div>
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}