@prmichaelsen/acp-visualizer 0.2.1 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prmichaelsen/acp-visualizer",
-  "version": "0.2.1",
+  "version": "0.5.0",
   "type": "module",
   "description": "Browser-based dashboard for visualizing ACP progress.yaml data",
   "bin": {
@@ -16,20 +16,30 @@
     "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",

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>
+  )
+}

package/src/components/MilestoneKanban.tsx

@@ -9,6 +9,7 @@ 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' },
+  { status: 'wont_do', label: "Won't Do", color: 'border-yellow-500' },
 ]
 
 interface MilestoneKanbanProps {
@@ -68,9 +69,21 @@ export function MilestoneKanban({ milestones, tasks }: MilestoneKanbanProps) {
     return <p className="text-gray-600 text-sm">No milestones</p>
   }
 
+  // Only show columns that have items, except always show the core 3
+  const coreStatuses = new Set<Status>(['not_started', 'in_progress', 'completed'])
+  const activeColumns = columns.filter(
+    (col) =>
+      coreStatuses.has(col.status) ||
+      milestones.some((m) => m.status === col.status),
+  )
+  const gridCols =
+    activeColumns.length <= 3
+      ? 'grid-cols-3'
+      : 'grid-cols-4'
+
   return (
-    <div className="grid grid-cols-3 gap-4 min-h-[300px]">
-      {columns.map((col) => {
+    <div className={`grid ${gridCols} gap-4 min-h-[300px]`}>
+      {activeColumns.map((col) => {
         const items = milestones.filter((m) => m.status === col.status)
         return (
           <div key={col.status} className="flex flex-col">

package/src/components/ProjectSelector.tsx

@@ -0,0 +1,66 @@
+import { ChevronDown } from 'lucide-react'
+import { useState } from 'react'
+import type { AcpProject } from '../services/projects.service'
+
+interface ProjectSelectorProps {
+  projects: AcpProject[]
+  currentProject: string | null
+  onSelect: (projectId: string) => void
+}
+
+export function ProjectSelector({
+  projects,
+  currentProject,
+  onSelect,
+}: ProjectSelectorProps) {
+  const [open, setOpen] = useState(false)
+
+  const available = projects.filter((p) => p.hasProgress)
+  const current = available.find((p) => p.id === currentProject)
+
+  if (available.length <= 1) return null
+
+  return (
+    <div className="relative">
+      <button
+        onClick={() => setOpen(!open)}
+        className="w-full flex items-center justify-between px-3 py-1.5 text-xs text-gray-400 bg-gray-900 border border-gray-800 rounded-md hover:text-gray-300 hover:border-gray-600 transition-colors"
+      >
+        <span className="truncate">
+          {current?.id || 'Select project'}
+        </span>
+        <ChevronDown className={`w-3 h-3 shrink-0 transition-transform ${open ? 'rotate-180' : ''}`} />
+      </button>
+
+      {open && (
+        <>
+          <div
+            className="fixed inset-0 z-40"
+            onClick={() => setOpen(false)}
+          />
+          <div className="absolute left-0 right-0 top-full mt-1 z-50 bg-gray-900 border border-gray-700 rounded-lg shadow-xl overflow-hidden max-h-64 overflow-y-auto">
+            {available.map((p) => (
+              <button
+                key={p.id}
+                onClick={() => {
+                  onSelect(p.id)
+                  setOpen(false)
+                }}
+                className={`w-full text-left px-3 py-2 text-xs transition-colors ${
+                  p.id === currentProject
+                    ? 'bg-gray-800 text-gray-100'
+                    : 'text-gray-400 hover:bg-gray-800/50 hover:text-gray-200'
+                }`}
+              >
+                <div className="font-medium truncate">{p.id}</div>
+                {p.description && p.description !== 'No description' && (
+                  <div className="text-gray-600 truncate mt-0.5">{p.description}</div>
+                )}
+              </button>
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  )
+}

package/src/components/Sidebar.tsx

@@ -1,5 +1,8 @@
 import { Link, useRouterState } from '@tanstack/react-router'
 import { LayoutDashboard, Flag, CheckSquare, Clock, Search } from 'lucide-react'
+import { ProjectSelector } from './ProjectSelector'
+import { GitHubInput } from './GitHubInput'
+import type { AcpProject } from '../services/projects.service'
 
 const navItems = [
   { to: '/' as const, icon: LayoutDashboard, label: 'Overview' },
@@ -8,7 +11,14 @@ const navItems = [
   { to: '/activity' as const, icon: Clock, label: 'Activity' },
 ]
 
-export function Sidebar() {
+interface SidebarProps {
+  projects?: AcpProject[]
+  currentProject?: string | null
+  onProjectSelect?: (projectId: string) => void
+  onGitHubLoad?: (owner: string, repo: string) => Promise<void>
+}
+
+export function Sidebar({ projects = [], currentProject = null, onProjectSelect, onGitHubLoad }: SidebarProps) {
   const location = useRouterState({ select: (s) => s.location })
 
   return (
@@ -18,6 +28,15 @@ export function Sidebar() {
           ACP Visualizer
         </span>
       </div>
+      {projects.length > 1 && onProjectSelect && (
+        <div className="px-3 pt-3">
+          <ProjectSelector
+            projects={projects}
+            currentProject={currentProject}
+            onSelect={onProjectSelect}
+          />
+        </div>
+      )}
       <div className="flex-1 py-2">
         {navItems.map((item) => {
           const isActive =
@@ -41,7 +60,7 @@ export function Sidebar() {
           )
         })}
       </div>
-      <div className="p-3 border-t border-gray-800">
+      <div className="p-3 border-t border-gray-800 space-y-2">
         <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"
@@ -49,6 +68,9 @@ export function Sidebar() {
           <Search className="w-4 h-4" />
           Search...
         </Link>
+        {onGitHubLoad && (
+          <GitHubInput onLoad={onGitHubLoad} />
+        )}
       </div>
     </nav>
   )

package/src/components/StatusBadge.tsx

@@ -4,12 +4,14 @@ 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',
+  wont_do: 'bg-yellow-500/15 text-yellow-500 border-yellow-500/20',
 }
 
 const statusLabels: Record<Status, string> = {
   completed: 'Completed',
   in_progress: 'In Progress',
   not_started: 'Not Started',
+  wont_do: "Won't Do",
 }
 
 export function StatusBadge({ status }: { status: Status }) {

package/src/components/StatusDot.tsx

@@ -4,6 +4,7 @@ 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' },
+  wont_do: { symbol: '✕', color: 'text-yellow-500' },
 }
 
 export function StatusDot({ status }: { status: Status }) {

package/src/components/ViewToggle.tsx

@@ -1,4 +1,4 @@
-export type ViewMode = 'table' | 'tree' | 'kanban'
+export type ViewMode = 'table' | 'tree' | 'kanban' | 'gantt' | 'graph'
 
 interface ViewToggleProps {
   value: ViewMode
@@ -9,6 +9,8 @@ const views: Array<{ id: ViewMode; label: string }> = [
   { id: 'table', label: 'Table' },
   { id: 'tree', label: 'Tree' },
   { id: 'kanban', label: 'Kanban' },
+  { id: 'gantt', label: 'Gantt' },
+  { id: 'graph', label: 'Graph' },
 ]
 
 export function ViewToggle({ value, onChange }: ViewToggleProps) {

package/src/contexts/ProgressContext.tsx

@@ -0,0 +1,22 @@
+import { createContext, useContext } from 'react'
+import type { ProgressData } from '../lib/types'
+
+const ProgressContext = createContext<ProgressData | null>(null)
+
+export function ProgressProvider({
+  data,
+  children,
+}: {
+  data: ProgressData | null
+  children: React.ReactNode
+}) {
+  return (
+    <ProgressContext.Provider value={data}>
+      {children}
+    </ProgressContext.Provider>
+  )
+}
+
+export function useProgressData(): ProgressData | null {
+  return useContext(ProgressContext)
+}