@prmichaelsen/acp-visualizer 0.5.0 → 0.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prmichaelsen/acp-visualizer",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "type": "module",
   "description": "Browser-based dashboard for visualizing ACP progress.yaml data",
   "bin": {
@@ -16,7 +16,7 @@
     "dev": "vite dev --port 3400 --host",
     "build": "vite build",
     "serve": "vite preview",
-    "deploy": "export $(cat .env.cloudflare.local | xargs) && npm run build && wrangler deploy",
+    "deploy": "export $(cat .env.cloudflare.local | xargs) && VITE_HOSTED=true npm run build && wrangler deploy",
     "tail": "export $(cat .env.cloudflare.local | xargs) && wrangler tail",
     "test": "vitest",
     "test:run": "vitest run",

package/src/components/DependencyGraph.tsx

@@ -35,7 +35,7 @@ const statusColors: Record<Status, { bg: string; border: string; text: string }>
 
 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.setGraph({ rankdir: 'TB', nodesep: 30, ranksep: 60, marginx: 20, marginy: 20 })
   g.setDefaultEdgeLabel(() => ({}))
 
   // Collect all tasks with their milestone context

package/src/routes/__root.tsx

@@ -1,5 +1,5 @@
-import { HeadContent, Scripts, createRootRoute, Outlet, useRouter } from '@tanstack/react-router'
-import { useState, useCallback } from 'react'
+import { HeadContent, Scripts, createRootRoute, Outlet, useRouter, useRouterState } from '@tanstack/react-router'
+import { useState, useCallback, useEffect } from 'react'
 import { useAutoRefresh } from '../lib/useAutoRefresh'
 import { Sidebar } from '../components/Sidebar'
 import { Header } from '../components/Header'
@@ -21,17 +21,20 @@ export const Route = createRootRoute({
     let progressData: ProgressData | null = null
     let projects: AcpProject[] = []
 
-    try {
-      const [result, projectList] = await Promise.all([
-        getProgressData({ data: {} }),
-        listProjects(),
-      ])
-      if (result.ok) {
-        progressData = result.data
+    // VITE_HOSTED mode: skip filesystem access entirely (Cloudflare Workers)
+    if (!import.meta.env.VITE_HOSTED) {
+      try {
+        const [result, projectList] = await Promise.all([
+          getProgressData({ data: {} }),
+          listProjects(),
+        ])
+        if (result.ok) {
+          progressData = result.data
+        }
+        projects = projectList
+      } catch {
+        // No filesystem available
       }
-      projects = projectList
-    } catch {
-      // Cloudflare Workers or other environment without filesystem
     }
 
     return { progressData, projects }
@@ -74,18 +77,59 @@ function AutoRefresh() {
   return null
 }
 
+/** Read ?repo=owner/repo from current URL search params */
+function getRepoFromUrl(): { owner: string; repo: string } | null {
+  if (typeof window === 'undefined') return null
+  const params = new URLSearchParams(window.location.search)
+  const repo = params.get('repo')
+  if (!repo) return null
+  const parts = repo.split('/')
+  if (parts.length < 2) return null
+  return { owner: parts[0], repo: parts[1] }
+}
+
+/** Update ?repo= search param without full navigation */
+function setRepoInUrl(ownerRepo: string | null) {
+  if (typeof window === 'undefined') return
+  const url = new URL(window.location.href)
+  if (ownerRepo) {
+    url.searchParams.set('repo', ownerRepo)
+  } else {
+    url.searchParams.delete('repo')
+  }
+  window.history.replaceState({}, '', url.toString())
+}
+
 function RootLayout() {
   const context = Route.useRouteContext()
   const [progressData, setProgressData] = useState(context.progressData)
   const [currentProject, setCurrentProject] = useState<string | null>(
     context.progressData?.project.name || null,
   )
+  const [initialLoadDone, setInitialLoadDone] = useState(false)
+
+  // On mount, check for ?repo= param and auto-load
+  useEffect(() => {
+    if (initialLoadDone) return
+    setInitialLoadDone(true)
+
+    const repoParam = getRepoFromUrl()
+    if (repoParam && !progressData) {
+      fetchGitHubProgress({ data: repoParam }).then((result) => {
+        if (result.ok) {
+          setProgressData(result.data)
+          setCurrentProject(`${repoParam.owner}/${repoParam.repo}`)
+        }
+      })
+    }
+  }, [initialLoadDone, progressData])
 
   const handleGitHubLoad = useCallback(async (owner: string, repo: string) => {
     const result = await fetchGitHubProgress({ data: { owner, repo } })
     if (result.ok) {
       setProgressData(result.data)
       setCurrentProject(`${owner}/${repo}`)
+      setRepoInUrl(`${owner}/${repo}`)
     } else {
       throw new Error(result.message)
     }
@@ -99,6 +143,7 @@ function RootLayout() {
         if (result.ok) {
           setProgressData(result.data)
           setCurrentProject(projectId)
+          setRepoInUrl(null) // Clear repo param for local projects
         }
       }
     } catch {

package/src/routes/index.tsx

@@ -12,13 +12,29 @@ function HomePage() {
   const progressData = useProgressData()
 
   if (!progressData) {
+    const isHosted = import.meta.env.VITE_HOSTED
+
     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 className="p-5 bg-gray-900/50 border border-gray-800 rounded-xl text-center max-w-md mx-auto mt-12">
+          <h2 className="text-lg font-semibold mb-2">ACP Progress Visualizer</h2>
+          {isHosted ? (
+            <>
+              <p className="text-gray-400 text-sm mb-4">
+                Enter a GitHub repository in the sidebar to visualize its ACP progress.
+              </p>
+              <div className="text-xs text-gray-600 space-y-1">
+                <p>Example: <span className="font-mono text-gray-400">prmichaelsen/agent-context-protocol</span></p>
+                <p>The repo must have <span className="font-mono text-gray-400">agent/progress.yaml</span></p>
+              </div>
+            </>
+          ) : (
+            <>
+              <p className="text-red-400/70 text-sm">
+                No progress.yaml found. Make sure you're in an ACP project directory.
+              </p>
+            </>
+          )}
         </div>
       </div>
     )

package/src/services/github.service.ts

@@ -6,7 +6,7 @@ export type GitHubResult =
   | { ok: false; error: string; message: string }
 
 export const fetchGitHubProgress = createServerFn({ method: 'GET' })
-  .validator((input: { owner: string; repo: string; branch?: string; token?: string }) => input)
+  .inputValidator((input: { owner: string; repo: string; branch?: string; token?: string }) => input)
   .handler(async ({ data: input }): Promise<GitHubResult> => {
     const { parseProgressYaml } = await import('../lib/yaml-loader')
 

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

@@ -6,7 +6,7 @@ export type ProgressResult =
   | { ok: false; error: 'FILE_NOT_FOUND' | 'PARSE_ERROR' | 'NO_FILESYSTEM'; message: string; path: string }
 
 export const getProgressData = createServerFn({ method: 'GET' })
-  .validator((input: { path?: string }) => input)
+  .inputValidator((input: { path?: string }) => input)
   .handler(async ({ data: input }): Promise<ProgressResult> => {
     try {
       const fs = await import('fs')

package/src/services/projects.service.ts

@@ -44,7 +44,7 @@ export const listProjects = createServerFn({ method: 'GET' }).handler(
 )
 
 export const getProjectProgressPath = createServerFn({ method: 'GET' })
-  .validator((input: { projectId: string }) => input)
+  .inputValidator((input: { projectId: string }) => input)
   .handler(async ({ data }): Promise<string | null> => {
     try {
       const { readFileSync, existsSync } = await import('fs')