@prmichaelsen/acp-visualizer 0.5.2 → 0.5.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prmichaelsen/acp-visualizer",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "type": "module",
   "description": "Browser-based dashboard for visualizing ACP progress.yaml data",
   "bin": {

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/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/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' })
   .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/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'],
     }),