@prmichaelsen/acp-visualizer 0.1.0

package/src/routeTree.gen.ts

@@ -0,0 +1,140 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+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 IndexRouteImport } from './routes/index'
+import { Route as ApiWatchRouteImport } from './routes/api/watch'
+
+const TasksRoute = TasksRouteImport.update({
+  id: '/tasks',
+  path: '/tasks',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const SearchRoute = SearchRouteImport.update({
+  id: '/search',
+  path: '/search',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const MilestonesRoute = MilestonesRouteImport.update({
+  id: '/milestones',
+  path: '/milestones',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const ApiWatchRoute = ApiWatchRouteImport.update({
+  id: '/api/watch',
+  path: '/api/watch',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/milestones': typeof MilestonesRoute
+  '/search': typeof SearchRoute
+  '/tasks': typeof TasksRoute
+  '/api/watch': typeof ApiWatchRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/milestones': typeof MilestonesRoute
+  '/search': typeof SearchRoute
+  '/tasks': typeof TasksRoute
+  '/api/watch': typeof ApiWatchRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+  '/milestones': typeof MilestonesRoute
+  '/search': typeof SearchRoute
+  '/tasks': typeof TasksRoute
+  '/api/watch': typeof ApiWatchRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/' | '/milestones' | '/search' | '/tasks' | '/api/watch'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/' | '/milestones' | '/search' | '/tasks' | '/api/watch'
+  id: '__root__' | '/' | '/milestones' | '/search' | '/tasks' | '/api/watch'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  MilestonesRoute: typeof MilestonesRoute
+  SearchRoute: typeof SearchRoute
+  TasksRoute: typeof TasksRoute
+  ApiWatchRoute: typeof ApiWatchRoute
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/tasks': {
+      id: '/tasks'
+      path: '/tasks'
+      fullPath: '/tasks'
+      preLoaderRoute: typeof TasksRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/search': {
+      id: '/search'
+      path: '/search'
+      fullPath: '/search'
+      preLoaderRoute: typeof SearchRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/milestones': {
+      id: '/milestones'
+      path: '/milestones'
+      fullPath: '/milestones'
+      preLoaderRoute: typeof MilestonesRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/api/watch': {
+      id: '/api/watch'
+      path: '/api/watch'
+      fullPath: '/api/watch'
+      preLoaderRoute: typeof ApiWatchRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+  }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  MilestonesRoute: MilestonesRoute,
+  SearchRoute: SearchRoute,
+  TasksRoute: TasksRoute,
+  ApiWatchRoute: ApiWatchRoute,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()
+
+import type { getRouter } from './router.tsx'
+import type { createStart } from '@tanstack/react-start'
+declare module '@tanstack/react-start' {
+  interface Register {
+    ssr: true
+    router: Awaited<ReturnType<typeof getRouter>>
+  }
+}

package/src/router.tsx

@@ -0,0 +1,10 @@
+import { createRouter } from '@tanstack/react-router'
+import { routeTree } from './routeTree.gen'
+
+export const getRouter = () => {
+  return createRouter({
+    routeTree,
+    scrollRestoration: true,
+    defaultPreloadStaleTime: 30_000,
+  })
+}

package/src/routes/__root.tsx

@@ -0,0 +1,75 @@
+import { HeadContent, Scripts, createRootRoute, Outlet } from '@tanstack/react-router'
+import { useAutoRefresh } from '@/lib/useAutoRefresh'
+import { Sidebar } from '@/components/Sidebar'
+import { Header } from '@/components/Header'
+import { ProgressDatabaseService } from '@/services/progress-database.service'
+import type { ProgressData } from '@/lib/types'
+
+import appCss from '../styles.css?url'
+
+export const Route = createRootRoute({
+  beforeLoad: async () => {
+    let progressData: ProgressData | null = null
+
+    try {
+      const result = ProgressDatabaseService.getProgressData()
+      if (result.ok) {
+        progressData = result.data
+      }
+    } catch (error) {
+      console.error('[Root] Failed to load progress data:', error)
+    }
+
+    return { progressData }
+  },
+
+  head: () => ({
+    meta: [
+      { charSet: 'utf-8' },
+      {
+        name: 'viewport',
+        content: 'width=device-width, initial-scale=1',
+      },
+      { title: 'ACP Progress Visualizer' },
+      {
+        name: 'description',
+        content: 'Browser-based dashboard for visualizing ACP progress.yaml data',
+      },
+    ],
+    links: [
+      { rel: 'stylesheet', href: appCss },
+    ],
+  }),
+
+  shellComponent: RootDocument,
+})
+
+function AutoRefresh() {
+  useAutoRefresh()
+  return null
+}
+
+function RootDocument({ children }: { children: React.ReactNode }) {
+  const { progressData } = Route.useRouteContext()
+
+  return (
+    <html lang="en">
+      <head>
+        <HeadContent />
+      </head>
+      <body>
+        <AutoRefresh />
+        <div className="flex h-screen bg-gray-950 text-gray-100">
+          <Sidebar />
+          <div className="flex-1 flex flex-col overflow-hidden">
+            <Header data={progressData} />
+            <main className="flex-1 overflow-auto">
+              {children}
+            </main>
+          </div>
+        </div>
+        <Scripts />
+      </body>
+    </html>
+  )
+}

package/src/routes/api/watch.ts

@@ -0,0 +1,29 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { getFileWatcher } from '@/lib/file-watcher'
+
+export const Route = createFileRoute('/api/watch')({
+  server: {
+    handlers: {
+      GET: async () => {
+        const watcher = getFileWatcher()
+
+        const stream = new ReadableStream({
+          start(controller) {
+            watcher.addClient(controller)
+          },
+          cancel(controller) {
+            watcher.removeClient(controller)
+          },
+        })
+
+        return new Response(stream, {
+          headers: {
+            'Content-Type': 'text/event-stream',
+            'Cache-Control': 'no-cache',
+            'Connection': 'keep-alive',
+          },
+        })
+      },
+    },
+  },
+})

package/src/routes/index.tsx

@@ -0,0 +1,115 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { StatusBadge } from '@/components/StatusBadge'
+import { ProgressBar } from '@/components/ProgressBar'
+
+export const Route = createFileRoute('/')({
+  component: HomePage,
+})
+
+function HomePage() {
+  const { progressData } = Route.useRouteContext()
+
+  if (!progressData) {
+    return (
+      <div className="p-6">
+        <div className="p-4 bg-red-900/20 border border-red-800 rounded-lg">
+          <p className="text-red-400 font-medium">Failed to load progress data</p>
+          <p className="text-red-400/70 text-sm mt-1">
+            Check that progress.yaml exists and is valid YAML
+          </p>
+        </div>
+      </div>
+    )
+  }
+
+  const data = progressData
+
+  return (
+    <div className="p-6 space-y-6">
+      {/* Project Metadata */}
+      <div className="bg-gray-900/50 border border-gray-800 rounded-xl p-5">
+        <div className="flex items-start justify-between">
+          <div>
+            <h2 className="text-xl font-bold">{data.project.name}</h2>
+            <p className="text-gray-400 text-sm mt-1">{data.project.description}</p>
+          </div>
+          <div className="text-right">
+            <span className="text-xs text-gray-500 font-mono">v{data.project.version}</span>
+            <div className="mt-1">
+              <StatusBadge status={data.project.status} />
+            </div>
+          </div>
+        </div>
+        <div className="mt-4">
+          <div className="flex items-center gap-3">
+            <span className="text-xs text-gray-500">Overall Progress</span>
+            <div className="flex-1">
+              <ProgressBar value={data.progress.overall} />
+            </div>
+            <span className="text-sm font-mono text-gray-300">{data.progress.overall}%</span>
+          </div>
+        </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>
+
+      {/* Next Steps */}
+      {data.next_steps.length > 0 && (
+        <div>
+          <h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-3">
+            Next Steps
+          </h3>
+          <ul className="space-y-1.5">
+            {data.next_steps.map((step, i) => (
+              <li key={i} className="text-sm text-gray-300 flex items-start gap-2">
+                <span className="text-gray-600 mt-0.5">•</span>
+                {step}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {/* Blockers */}
+      {data.current_blockers.length > 0 && (
+        <div className="bg-red-900/10 border border-red-800/30 rounded-lg p-4">
+          <h3 className="text-sm font-semibold text-red-400 uppercase tracking-wider mb-2">
+            Blockers
+          </h3>
+          <ul className="space-y-1">
+            {data.current_blockers.map((blocker, i) => (
+              <li key={i} className="text-sm text-red-300">
+                {blocker}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/routes/milestones.tsx

@@ -0,0 +1,50 @@
+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 { FilterBar } from '@/components/FilterBar'
+import { SearchInput } from '@/components/SearchInput'
+import { useFilteredData } from '@/lib/useFilteredData'
+import type { Status } from '@/lib/types'
+
+export const Route = createFileRoute('/milestones')({
+  component: MilestonesPage,
+})
+
+function MilestonesPage() {
+  const { progressData } = Route.useRouteContext()
+  const [view, setView] = useState<'table' | 'tree'>('table')
+  const [status, setStatus] = useState<Status | 'all'>('all')
+  const [search, setSearch] = useState('')
+
+  const filtered = useFilteredData(progressData, { status, search })
+
+  if (!filtered) {
+    return (
+      <div className="p-6">
+        <p className="text-gray-600 text-sm">No data loaded</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="p-6">
+      <div className="flex items-center justify-between mb-4">
+        <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..." />
+        </div>
+      </div>
+      {view === 'table' ? (
+        <MilestoneTable milestones={filtered.milestones} tasks={filtered.tasks} />
+      ) : (
+        <MilestoneTree milestones={filtered.milestones} tasks={filtered.tasks} />
+      )}
+    </div>
+  )
+}

package/src/routes/search.tsx

@@ -0,0 +1,84 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { useState, useMemo } from 'react'
+import { SearchInput } from '@/components/SearchInput'
+import { StatusBadge } from '@/components/StatusBadge'
+import { StatusDot } from '@/components/StatusDot'
+import { buildSearchIndex } from '@/lib/search'
+
+export const Route = createFileRoute('/search')({
+  component: SearchPage,
+})
+
+function SearchPage() {
+  const { progressData } = Route.useRouteContext()
+  const [query, setQuery] = useState('')
+
+  const results = useMemo(() => {
+    if (!progressData || !query.trim()) return []
+    const index = buildSearchIndex(progressData)
+    return index.search(query).slice(0, 20)
+  }, [progressData, query])
+
+  return (
+    <div className="p-6">
+      <h2 className="text-lg font-semibold mb-4">Search</h2>
+      <div className="max-w-md mb-6">
+        <SearchInput
+          value={query}
+          onChange={setQuery}
+          placeholder="Search milestones and tasks..."
+        />
+      </div>
+
+      {query.trim() && results.length === 0 && (
+        <p className="text-gray-500 text-sm">
+          No results for "{query}"
+        </p>
+      )}
+
+      {results.length > 0 && (
+        <div className="space-y-2">
+          <p className="text-xs text-gray-500 mb-3">
+            {results.length} result{results.length !== 1 ? 's' : ''}
+          </p>
+          {results.map((result, i) => (
+            <div
+              key={i}
+              className="bg-gray-900/50 border border-gray-800 rounded-lg px-4 py-3"
+            >
+              <div className="flex items-center gap-3">
+                {result.item.type === 'task' && result.item.task ? (
+                  <>
+                    <StatusDot status={result.item.task.status} />
+                    <span className="text-sm">{result.item.task.name}</span>
+                    <span className="text-xs text-gray-600 ml-auto">
+                      {result.item.milestone.name}
+                    </span>
+                  </>
+                ) : (
+                  <>
+                    <span className="text-sm font-medium">
+                      {result.item.milestone.name}
+                    </span>
+                    <StatusBadge status={result.item.milestone.status} />
+                  </>
+                )}
+              </div>
+              {result.item.notes && (
+                <p className="text-xs text-gray-500 mt-1 truncate">
+                  {result.item.notes}
+                </p>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {!query.trim() && (
+        <p className="text-gray-600 text-sm">
+          Type to search across milestones and tasks
+        </p>
+      )}
+    </div>
+  )
+}

package/src/routes/tasks.tsx

@@ -0,0 +1,63 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { StatusDot } from '@/components/StatusDot'
+import { ExtraFieldsBadge } from '@/components/ExtraFieldsBadge'
+import type { Task } from '@/lib/types'
+
+export const Route = createFileRoute('/tasks')({
+  component: TasksPage,
+})
+
+function TasksPage() {
+  const { progressData } = Route.useRouteContext()
+
+  if (!progressData) {
+    return (
+      <div className="p-6">
+        <p className="text-gray-600 text-sm">No data loaded</p>
+      </div>
+    )
+  }
+
+  const allTasks: Array<Task & { milestoneName: string }> = []
+  for (const milestone of progressData.milestones) {
+    const tasks = progressData.tasks[milestone.id] || []
+    for (const task of tasks) {
+      allTasks.push({ ...task, milestoneName: milestone.name })
+    }
+  }
+
+  return (
+    <div className="p-6">
+      <h2 className="text-lg font-semibold mb-4">
+        All Tasks ({allTasks.length})
+      </h2>
+      <div className="border border-gray-800 rounded-lg overflow-hidden">
+        {allTasks.map((task) => (
+          <div
+            key={task.id}
+            className="flex items-center gap-3 px-4 py-2.5 border-b border-gray-800/50 hover:bg-gray-800/30 transition-colors"
+          >
+            <StatusDot status={task.status} />
+            <span
+              className={`flex-1 text-sm ${
+                task.status === 'completed' ? 'text-gray-500' : 'text-gray-200'
+              }`}
+            >
+              {task.name}
+            </span>
+            <span className="text-xs text-gray-600">{task.milestoneName}</span>
+            <span className="text-xs text-gray-500 font-mono w-8 text-right">
+              {task.estimated_hours}h
+            </span>
+            <ExtraFieldsBadge fields={task.extra} />
+          </div>
+        ))}
+        {allTasks.length === 0 && (
+          <div className="px-4 py-6 text-center">
+            <p className="text-gray-600 text-sm">No tasks defined</p>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/services/progress-database.service.ts

@@ -0,0 +1,46 @@
+import { readFileSync } from 'fs'
+import { parseProgressYaml } from '@/lib/yaml-loader'
+import { getProgressYamlPath } from '@/lib/config'
+import type { ProgressData } from '@/lib/types'
+
+export type ProgressResult =
+  | { ok: true; data: ProgressData }
+  | { ok: false; error: 'FILE_NOT_FOUND' | 'PARSE_ERROR'; message: string; path: string }
+
+export class ProgressDatabaseService {
+  static getProgressData(): ProgressResult {
+    const filePath = getProgressYamlPath()
+
+    try {
+      const raw = readFileSync(filePath, 'utf-8')
+
+      try {
+        const data = parseProgressYaml(raw)
+        return { ok: true, data }
+      } catch (err) {
+        return {
+          ok: false,
+          error: 'PARSE_ERROR',
+          message: err instanceof Error ? err.message : 'Failed to parse YAML',
+          path: filePath,
+        }
+      }
+    } catch (err) {
+      const code = (err as NodeJS.ErrnoException).code
+      if (code === 'ENOENT') {
+        return {
+          ok: false,
+          error: 'FILE_NOT_FOUND',
+          message: `progress.yaml not found at: ${filePath}`,
+          path: filePath,
+        }
+      }
+      return {
+        ok: false,
+        error: 'PARSE_ERROR',
+        message: err instanceof Error ? err.message : 'Failed to read file',
+        path: filePath,
+      }
+    }
+  }
+}

package/src/styles.css

@@ -0,0 +1,25 @@
+@import "tailwindcss";
+
+html {
+  @apply bg-gray-950;
+}
+
+body {
+  @apply m-0 bg-gray-950 min-h-screen text-gray-100;
+  font-family: "Inter", system-ui, -apple-system, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: "JetBrains Mono", "Fira Code", "Consolas", monospace;
+}
+
+/* Hide scrollbar while keeping scroll functionality */
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}

package/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "include": ["**/*.ts", "**/*.tsx"],
+  "compilerOptions": {
+    "target": "ES2022",
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["vite/client"],
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": false,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

package/vite.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite'
+import { tanstackStart } from '@tanstack/react-start/plugin/vite'
+import viteReact from '@vitejs/plugin-react'
+import viteTsConfigPaths from 'vite-tsconfig-paths'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  plugins: [
+    viteTsConfigPaths({
+      projects: ['./tsconfig.json'],
+    }),
+    tailwindcss(),
+    tanstackStart(),
+    viteReact(),
+  ],
+})