@prmichaelsen/acp-visualizer 0.5.0 → 0.5.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prmichaelsen/acp-visualizer",
-  "version": "0.5.0",
+  "version": "0.5.3",
   "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/lib/file-watcher.ts

@@ -15,6 +15,11 @@ export async function getFileWatcher() {
   const clients = new Set<Controller>()
 
   try {
+    // existsSync will throw on Workers where fs is stubbed
+    const { existsSync } = await import('fs')
+    if (!existsSync(filePath)) {
+      throw new Error(`File not found: ${filePath}`)
+    }
     watch(filePath, (eventType) => {
       if (eventType === 'change') {
         for (const controller of clients) {
@@ -27,7 +32,7 @@ export async function getFileWatcher() {
       }
     })
   } catch (err) {
-    console.warn('[FileWatcher] Could not watch file:', err)
+    throw new Error(`[FileWatcher] Cannot watch: ${err}`)
   }
 
   watcher = {

package/src/lib/useAutoRefresh.ts

@@ -5,6 +5,9 @@ export function useAutoRefresh() {
   const router = useRouter()
 
   useEffect(() => {
+    // Skip file-watcher SSE in hosted mode — no local filesystem to watch
+    if (import.meta.env.VITE_HOSTED) return
+
     const eventSource = new EventSource('/api/watch')
 
     eventSource.onmessage = () => {

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/api/watch.ts

@@ -1,28 +1,34 @@
 import { createFileRoute } from '@tanstack/react-router'
-import { getFileWatcher } from '../../lib/file-watcher'
 
 export const Route = createFileRoute('/api/watch')({
   server: {
     handlers: {
       GET: async () => {
-        const watcher = await getFileWatcher()
+        // In hosted mode (Cloudflare Workers), there's no filesystem to watch.
+        // Return 204 immediately instead of opening a stream that hangs forever.
+        try {
+          const { getFileWatcher } = await import('../../lib/file-watcher')
+          const watcher = await getFileWatcher()
 
-        const stream = new ReadableStream({
-          start(controller) {
-            watcher.addClient(controller)
-          },
-          cancel(controller) {
-            watcher.removeClient(controller)
-          },
-        })
+          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',
-          },
-        })
+          return new Response(stream, {
+            headers: {
+              'Content-Type': 'text/event-stream',
+              'Cache-Control': 'no-cache',
+              'Connection': 'keep-alive',
+            },
+          })
+        } catch {
+          return new Response(null, { status: 204 })
+        }
       },
     },
   },

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

@@ -5,47 +5,71 @@ export type GitHubResult =
   | { ok: true; data: ProgressData }
   | { ok: false; error: string; message: string }
 
+async function fetchBranch(
+  parseProgressYaml: (raw: string) => ProgressData,
+  owner: string,
+  repo: string,
+  branch: string,
+  headers: Record<string, string>,
+): Promise<GitHubResult> {
+  const url = `https://raw.githubusercontent.com/${owner}/${repo}/${branch}/agent/progress.yaml`
+  try {
+    const response = await fetch(url, { headers })
+    if (!response.ok) {
+      if (response.status === 404) {
+        return { ok: false, error: 'NOT_FOUND', message: `No progress.yaml found at ${owner}/${repo} (branch: ${branch})` }
+      }
+      return { ok: false, error: 'FETCH_ERROR', message: `GitHub returned ${response.status}: ${response.statusText}` }
+    }
+    const raw = await response.text()
+    const data = parseProgressYaml(raw)
+    return { ok: true, data }
+  } catch (err) {
+    return { ok: false, error: 'NETWORK_ERROR', message: err instanceof Error ? err.message : 'Failed to fetch from GitHub' }
+  }
+}
+
 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')
 
-    const branch = input.branch || 'main'
-    const url = `https://raw.githubusercontent.com/${input.owner}/${input.repo}/${branch}/agent/progress.yaml`
+    const fetchHeaders: Record<string, string> = { 'Accept': 'text/plain' }
+    if (input.token) {
+      fetchHeaders['Authorization'] = `token ${input.token}`
+    }
+
+    // If branch specified, use it directly
+    if (input.branch) {
+      return fetchBranch(parseProgressYaml, input.owner, input.repo, input.branch, fetchHeaders)
+    }
 
+    // Try GitHub API for default branch, fall back to trying main → mainline → master
+    let detectedBranch: string | null = null
     try {
-      const headers: Record<string, string> = {
-        'Accept': 'text/plain',
-      }
-      if (input.token) {
-        headers['Authorization'] = `token ${input.token}`
+      const metaRes = await fetch(`https://api.github.com/repos/${input.owner}/${input.repo}`, {
+        headers: { 'User-Agent': 'acp-visualizer', ...(input.token ? { Authorization: `token ${input.token}` } : {}) },
+      })
+      if (metaRes.ok) {
+        const meta = await metaRes.json() as { default_branch?: string }
+        detectedBranch = meta.default_branch || null
       }
+    } catch {
+      // Rate limited or network error — fall through to branch probing
+    }
 
-      const response = await fetch(url, { headers })
-
-      if (!response.ok) {
-        if (response.status === 404) {
-          return {
-            ok: false,
-            error: 'NOT_FOUND',
-            message: `No progress.yaml found at ${input.owner}/${input.repo} (branch: ${branch})`,
-          }
-        }
-        return {
-          ok: false,
-          error: 'FETCH_ERROR',
-          message: `GitHub returned ${response.status}: ${response.statusText}`,
-        }
-      }
+    const branches = detectedBranch
+      ? [detectedBranch]
+      : ['main', 'mainline', 'master']
 
-      const raw = await response.text()
-      const data = parseProgressYaml(raw)
-      return { ok: true, data }
-    } catch (err) {
-      return {
-        ok: false,
-        error: 'NETWORK_ERROR',
-        message: err instanceof Error ? err.message : 'Failed to fetch from GitHub',
-      }
+    for (const branch of branches) {
+      const result = await fetchBranch(parseProgressYaml, input.owner, input.repo, branch, fetchHeaders)
+      if (result.ok || result.error !== 'NOT_FOUND') return result
+    }
+
+    return {
+      ok: false,
+      error: 'NOT_FOUND',
+      message: `No progress.yaml found at ${input.owner}/${input.repo} (tried branches: ${branches.join(', ')})`,
     }
   })

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')

package/vite.config.ts

@@ -7,10 +7,10 @@ import { cloudflare } from '@cloudflare/vite-plugin'
 
 export default defineConfig(({ command }) => ({
   plugins: [
-    cloudflare({
-      viteEnvironment: { name: 'ssr' },
-      ...(command === 'serve' ? { config: { observability: { enabled: false } } } : {}),
-    }),
+    // Only use Cloudflare plugin for production builds — local dev uses Node.js SSR
+    ...(command === 'build'
+      ? [cloudflare({ viteEnvironment: { name: 'ssr' } })]
+      : []),
     viteTsConfigPaths({
       projects: ['./tsconfig.json'],
     }),