create-harness-vibe-coding 0.8.18 → 0.8.19

package/src/ui/pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+allowBuilds:
+  esbuild: true

package/src/ui/src/App.tsx

@@ -0,0 +1,86 @@
+import { lazy, Suspense, useState, useEffect } from 'react';
+import { Routes, Route, useLocation } from 'react-router-dom';
+import Header from './components/Header';
+import Footer from './components/Footer';
+import LoadingView from './components/LoadingView';
+import { useServerConnection } from './hooks/useServerConnection';
+import { apiFetch } from './api';
+
+const TaskList = lazy(() => import('./components/TaskList'));
+const WorkflowRoute = lazy(() => import('./components/WorkflowRoute'));
+const AgentsRoute = lazy(() => import('./components/AgentsRoute'));
+const RolesRoute = lazy(() => import('./components/RolesRoute'));
+const SettingsRoute = lazy(() => import('./components/SettingsRoute'));
+const TerminalDrawer = lazy(() => import('./components/TerminalDrawer'));
+
+function useDebugReporter(connState: string, errors: string[]) {
+  const location = useLocation();
+  useEffect(() => {
+    apiFetch('/api/debug/report', {
+      method: 'POST',
+      body: JSON.stringify({
+        connected: connState === 'connected',
+        route: location.pathname,
+        url: window.location.href,
+        errors,
+        lastUpdate: new Date().toISOString(),
+      }),
+    }).catch(() => {});
+  }, [location.pathname, connState, errors]);
+}
+
+function loadingLabel(pathname: string) {
+  if (pathname === '/workflow') return 'Loading workflow canvas';
+  if (pathname === '/agents') return 'Loading agent terminals';
+  if (pathname === '/roles') return 'Loading roles';
+  if (pathname === '/settings') return 'Loading settings';
+  return 'Loading tasks';
+}
+
+export default function App() {
+  const location = useLocation();
+  const { connState, eventSeq, lastSync, lastError } = useServerConnection();
+  const [activeTerminalSession, setActiveTerminalSession] = useState<string | null>(null);
+  const [errors, setErrors] = useState<string[]>([]);
+  const [routePulse, setRoutePulse] = useState(false);
+  const fullCanvas = location.pathname === '/workflow';
+
+  useEffect(() => {
+    const handler = (e: ErrorEvent) => setErrors(prev => [...prev, e.message].slice(-20));
+    window.addEventListener('error', handler);
+    return () => window.removeEventListener('error', handler);
+  }, []);
+
+  useEffect(() => {
+    setRoutePulse(true);
+    const timer = setTimeout(() => setRoutePulse(false), 520);
+    return () => clearTimeout(timer);
+  }, [location.pathname]);
+
+  useDebugReporter(connState, lastError ? [lastError, ...errors] : errors);
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
+      <Header />
+      {routePulse && <div className="route-progress" aria-hidden="true" />}
+      <main style={{ flex: 1, overflow: fullCanvas ? 'hidden' : 'auto', padding: fullCanvas ? 0 : '16px 20px', minHeight: 0 }}>
+        <Suspense fallback={<LoadingView label={loadingLabel(location.pathname)} fullCanvas={fullCanvas} />}>
+          <Routes>
+            <Route path="/" element={<TaskList onSelectSession={setActiveTerminalSession} />} />
+            <Route path="/tasks" element={<TaskList onSelectSession={setActiveTerminalSession} />} />
+            <Route path="/workflow" element={<WorkflowRoute onSelectSession={setActiveTerminalSession} />} />
+            <Route path="/agents" element={<AgentsRoute onSelectSession={setActiveTerminalSession} />} />
+            <Route path="/roles" element={<RolesRoute />} />
+            <Route path="/settings" element={<SettingsRoute />} />
+          </Routes>
+        </Suspense>
+      </main>
+      {activeTerminalSession && (
+        <Suspense fallback={null}>
+          <TerminalDrawer sessionId={activeTerminalSession} onClose={() => setActiveTerminalSession(null)} />
+        </Suspense>
+      )}
+      {!fullCanvas && <Footer connState={connState} eventSeq={eventSeq} lastSync={lastSync} lastError={lastError} />}
+    </div>
+  );
+}

package/src/ui/src/api.ts

@@ -0,0 +1,93 @@
+export function getAuthToken() {
+  const current = new URL(window.location.href);
+  const fromUrl = current.searchParams.get('token');
+  if (fromUrl) {
+    window.sessionStorage.setItem('wf-ui-token', fromUrl);
+    return fromUrl;
+  }
+  return window.sessionStorage.getItem('wf-ui-token') || '';
+}
+
+export async function apiFetch(path: string, init: RequestInit = {}) {
+  const token = getAuthToken();
+  const headers = new Headers(init.headers || {});
+  if (token) headers.set('Authorization', `Bearer ${token}`);
+  if (init.body && !headers.has('Content-Type')) headers.set('Content-Type', 'application/json');
+  return fetch(path, { ...init, headers });
+}
+
+export async function apiJson<T = any>(path: string, init: RequestInit = {}): Promise<T> {
+  const res = await apiFetch(path, init);
+  if (!res.ok) {
+    let message = `${path}: ${res.status}`;
+    try {
+      const body = await res.json();
+      message = body?.error?.message || message;
+    } catch {
+      // keep status message
+    }
+    throw new Error(message);
+  }
+  return res.json();
+}
+
+const jsonCache = new Map<string, { ts: number; value?: unknown; promise?: Promise<unknown> }>();
+
+export async function apiJsonCached<T = any>(
+  path: string,
+  { ttlMs = 3000, refresh = false }: { ttlMs?: number; refresh?: boolean } = {},
+): Promise<T> {
+  const key = path;
+  const now = Date.now();
+  const cached = jsonCache.get(key);
+  if (!refresh && cached) {
+    if (cached.value !== undefined && now - cached.ts < ttlMs) return cached.value as T;
+    if (cached.value !== undefined) {
+      if (!cached.promise) {
+        const promise = apiJson<T>(path)
+          .then((value) => {
+            jsonCache.set(key, { ts: Date.now(), value });
+            return value;
+          })
+          .catch((error) => {
+            jsonCache.set(key, { ts: cached.ts, value: cached.value });
+            console.debug?.('Background refresh failed', path, error);
+            return cached.value as T;
+          });
+        jsonCache.set(key, { ...cached, promise });
+      }
+      return cached.value as T;
+    }
+    if (cached.promise) return cached.promise as Promise<T>;
+  }
+
+  const promise = apiJson<T>(path)
+    .then((value) => {
+      jsonCache.set(key, { ts: Date.now(), value });
+      return value;
+    })
+    .catch((error) => {
+      jsonCache.delete(key);
+      throw error;
+    });
+  jsonCache.set(key, { ts: now, promise });
+  return promise;
+}
+
+export function invalidateApiCache(prefix?: string) {
+  if (!prefix) {
+    jsonCache.clear();
+    return;
+  }
+  for (const key of [...jsonCache.keys()]) {
+    if (key.startsWith(prefix)) jsonCache.delete(key);
+  }
+}
+
+export function wsUrl(path: string) {
+  const token = getAuthToken();
+  const url = new URL(path, window.location.href);
+  url.protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+  url.searchParams.set('token', token);
+  return url.toString();
+}