create-harness-vibe-coding 0.8.18 → 0.8.19

package/src/ui/src/hooks/useServerConnection.ts

@@ -0,0 +1,114 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { apiFetch, apiJson, wsUrl } from '../api';
+
+type ConnState = 'connecting' | 'connected' | 'reconnecting' | 'degraded' | 'disconnected';
+
+async function reportDebug(state: Record<string, unknown>) {
+  try {
+    await apiFetch('/api/debug/report', {
+      method: 'POST',
+      body: JSON.stringify(state),
+    });
+  } catch { /* debug only, ignore failures */ }
+}
+
+export function useServerConnection() {
+  const [connState, setConnState] = useState<ConnState>('disconnected');
+  const [eventSeq, setEventSeq] = useState(0);
+  const [lastSync, setLastSync] = useState<string | null>(null);
+  const [lastError, setLastError] = useState<string | null>(null);
+  const wsRef = useRef<WebSocket | null>(null);
+  const reconnectTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const mountedRef = useRef(true);
+
+  const connect = useCallback(() => {
+    if (!mountedRef.current) return;
+
+    // Clean up previous connection
+    if (wsRef.current) {
+      wsRef.current.onclose = null;
+      wsRef.current.onerror = null;
+      wsRef.current.close();
+      wsRef.current = null;
+    }
+
+    setConnState('connecting');
+
+    try {
+      const ws = new WebSocket(wsUrl('/ws/events'));
+      wsRef.current = ws;
+
+      ws.onopen = () => {
+        if (!mountedRef.current) return;
+        setConnState('connected');
+        setLastSync(new Date().toLocaleTimeString());
+        setLastError(null);
+        reportDebug({ connected: true, events: ['ws:open'] });
+      };
+
+      ws.onmessage = (event) => {
+        if (!mountedRef.current) return;
+        try {
+          const data = JSON.parse(event.data);
+          if (data.type === 'task.updated' && data.seq !== undefined) {
+            setEventSeq(data.seq);
+            setLastSync(new Date().toLocaleTimeString());
+          } else if (data.type === 'server.connected') {
+            setEventSeq(data.seq || 0);
+          }
+        } catch { /* ignore malformed messages */ }
+      };
+
+      ws.onclose = (e) => {
+        wsRef.current = null;
+        if (!mountedRef.current) return;
+        setConnState('reconnecting');
+        reportDebug({ connected: false, events: [`ws:close(${e.code})`] });
+        // Auto-reconnect after 2s
+        reconnectTimerRef.current = setTimeout(connect, 2000);
+      };
+
+      ws.onerror = () => {
+        setLastError('WS error');
+        setConnState('degraded');
+      };
+    } catch (err: any) {
+      if (!mountedRef.current) return;
+      setConnState('disconnected');
+      setLastError(err?.message || 'connection failed');
+      reportDebug({ errors: [err?.message || 'ws connect failed'] });
+      // Retry after 3s
+      reconnectTimerRef.current = setTimeout(connect, 3000);
+    }
+  }, []);
+
+  useEffect(() => {
+    mountedRef.current = true;
+    connect();
+    return () => {
+      mountedRef.current = false;
+      if (reconnectTimerRef.current) clearTimeout(reconnectTimerRef.current);
+      if (wsRef.current) {
+        wsRef.current.onclose = null; // prevent reconnect on intentional close
+        wsRef.current.close();
+        wsRef.current = null;
+      }
+    };
+  }, [connect]);
+
+  return { connState, eventSeq, lastSync, lastError };
+}
+
+export async function fetchTasks() {
+  return apiJson('/api/tasks');
+}
+
+export async function fetchTaskDetail(taskId: string) {
+  const res = await apiFetch(`/api/tasks/${encodeURIComponent(taskId)}`);
+  if (!res.ok) return null;
+  return res.json();
+}
+
+export async function fetchSettings() {
+  return apiJson('/api/settings');
+}

package/src/ui/src/index.css

@@ -0,0 +1,281 @@
+:root {
+  --bg: #ffffff;
+  --fg: #111111;
+  --muted: #6b7280;
+  --border: #e5e7eb;
+  --accent: #111111;
+  --surface: #f9fafb;
+  --danger: #dc2626;
+  --success: #16a34a;
+  --warn: #d97706;
+  --radius: 6px;
+  --header-h: 48px;
+  --footer-h: 28px;
+}
+
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html, body, #root {
+  height: 100%;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--fg);
+  background: var(--bg);
+  -webkit-font-smoothing: antialiased;
+}
+
+a { color: inherit; text-decoration: none; }
+button { font: inherit; cursor: pointer; border: none; background: none; }
+
+.route-progress {
+  position: fixed;
+  top: var(--header-h);
+  left: 0;
+  right: 0;
+  height: 2px;
+  z-index: 80;
+  overflow: hidden;
+  background: transparent;
+}
+
+.route-progress::before {
+  content: '';
+  display: block;
+  width: 42%;
+  height: 100%;
+  border-radius: 99px;
+  background: #111;
+  animation: route-progress-slide 0.7s ease-in-out infinite;
+}
+
+.loading-view {
+  min-height: 240px;
+  display: grid;
+  place-items: start;
+  padding: 20px;
+  color: var(--muted);
+}
+
+.loading-view-full {
+  min-height: 100%;
+  place-items: center;
+}
+
+.loading-card {
+  min-width: 220px;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 10px;
+  align-items: start;
+  padding: 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: rgba(255,255,255,0.88);
+  box-shadow: 0 12px 32px rgba(0,0,0,0.06);
+  backdrop-filter: blur(16px);
+}
+
+.loading-spinner {
+  width: 14px;
+  height: 14px;
+  margin-top: 2px;
+  border: 2px solid #d1d5db;
+  border-top-color: #111;
+  border-radius: 50%;
+  animation: loading-spin 0.8s linear infinite;
+}
+
+.loading-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--fg);
+  margin-bottom: 8px;
+}
+
+.loading-lines {
+  display: grid;
+  gap: 5px;
+}
+
+.loading-lines span {
+  display: block;
+  height: 7px;
+  border-radius: 99px;
+  background: linear-gradient(90deg, #eef0f3, #f8f9fb, #eef0f3);
+  background-size: 220% 100%;
+  animation: loading-shimmer 1.1s ease-in-out infinite;
+}
+
+.loading-lines span:nth-child(1) { width: 150px; }
+.loading-lines span:nth-child(2) { width: 116px; }
+.loading-lines span:nth-child(3) { width: 176px; }
+
+.wf-canvas-shell,
+.wf-canvas-shell *:not(input):not(textarea):not(select) {
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.wf-canvas-shell input,
+.wf-canvas-shell textarea,
+.wf-canvas-shell select {
+  user-select: text;
+  -webkit-user-select: text;
+}
+
+.wf-flow {
+  background: linear-gradient(180deg, #fbfbfd 0%, #f6f7f9 100%);
+}
+
+.wf-flow .react-flow__panel {
+  margin: 16px;
+}
+
+.wf-flow .react-flow__controls {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
+}
+
+.wf-flow .react-flow__controls-button {
+  width: 28px;
+  height: 28px;
+  border-bottom-color: var(--border);
+}
+
+.wf-flow .react-flow__edge-path {
+  stroke-linecap: round;
+}
+
+.wf-flow .react-flow__node {
+  font-family: inherit;
+}
+
+.wf-flow-handle {
+  width: 8px;
+  height: 8px;
+  border: 1px solid #111;
+  background: #fff;
+  opacity: 0.45;
+}
+
+.wf-flow-handle:hover {
+  opacity: 1;
+}
+
+.markdown-body {
+  color: #24292f;
+  font-size: 12px;
+  line-height: 1.55;
+  word-break: break-word;
+}
+
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4 {
+  margin: 12px 0 6px;
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+.markdown-body h1 {
+  padding-bottom: 6px;
+  border-bottom: 1px solid #d8dee4;
+  font-size: 20px;
+}
+
+.markdown-body h2 {
+  padding-bottom: 5px;
+  border-bottom: 1px solid #d8dee4;
+  font-size: 16px;
+}
+
+.markdown-body h3 { font-size: 14px; }
+.markdown-body h4 { font-size: 13px; }
+.markdown-body p,
+.markdown-body ul,
+.markdown-body ol,
+.markdown-body table,
+.markdown-body pre {
+  margin: 0 0 10px;
+}
+
+.markdown-body ul,
+.markdown-body ol {
+  padding-left: 20px;
+}
+
+.markdown-body code {
+  padding: 1px 4px;
+  border-radius: 4px;
+  background: #eff1f3;
+  font-family: "Cascadia Mono", Consolas, monospace;
+  font-size: 85%;
+}
+
+.markdown-body pre {
+  padding: 10px;
+  overflow: auto;
+  border-radius: var(--radius);
+  background: #f6f8fa;
+}
+
+.markdown-body pre code {
+  padding: 0;
+  background: transparent;
+  font-size: 11px;
+}
+
+.markdown-body table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 11px;
+}
+
+.markdown-body th,
+.markdown-body td {
+  padding: 5px 7px;
+  border: 1px solid #d0d7de;
+}
+
+.markdown-body th {
+  background: #f6f8fa;
+  font-weight: 600;
+}
+
+.markdown-body blockquote {
+  margin: 0 0 10px;
+  padding: 0 10px;
+  color: #57606a;
+  border-left: 3px solid #d0d7de;
+}
+
+@keyframes loading-spin {
+  to { transform: rotate(360deg); }
+}
+
+@keyframes loading-shimmer {
+  0% { background-position: 120% 0; }
+  100% { background-position: -120% 0; }
+}
+
+@keyframes route-progress-slide {
+  0% { transform: translateX(-110%); }
+  55% { transform: translateX(95%); }
+  100% { transform: translateX(240%); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .route-progress::before,
+  .loading-spinner,
+  .loading-lines span {
+    animation: none;
+  }
+}

package/src/ui/src/main.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>,
+);

package/src/ui/src/types.ts

@@ -0,0 +1,108 @@
+export type Session = {
+  sessionId: string;
+  taskId?: string | null;
+  peerId?: string;
+  runtime: string;
+  role?: string;
+  objective?: string;
+  status: string;
+  attachMode?: boolean;
+  wsClientCount?: number;
+  startedAt?: string;
+  updatedAt?: string;
+  blockedReason?: string | null;
+  blockedHint?: string | null;
+  ptyProvider?: string | null;
+  agentSessionId?: string | null;
+  resumeSupported?: boolean;
+  resumeArgs?: string[];
+  resumeCommand?: string | null;
+  subagentMode?: string;
+  workflowMode?: string | null;
+  model?: string;
+  provider?: string;
+  ceoPrompt?: string;
+};
+
+export type RuntimeConfigFile = {
+  scope: string;
+  path: string;
+  absolutePath: string;
+  format: 'json' | 'toml' | string;
+  fields: Record<string, string>;
+  values: Record<string, string>;
+  exists: boolean;
+  writable: boolean;
+};
+
+export type RuntimeInfo = {
+  id: string;
+  label: string;
+  command: string;
+  path: string | null;
+  version: string | null;
+  status: string;
+  launchable: boolean;
+  adapterStatus: string;
+  blockedReason?: string | null;
+  capabilities: string[];
+  configFiles?: RuntimeConfigFile[];
+};
+
+export type TaskOption = {
+  taskId: string;
+  status?: string;
+  phase?: string | null;
+};
+
+export type WorkflowNode = {
+  id: string;
+  label: string;
+  kind: string;
+  level: number;
+  status?: string;
+  skills?: string[];
+  permissions?: string[];
+  sessionId?: string;
+  taskId?: string | null;
+  runtime?: string;
+  peerId?: string;
+  model?: string;
+  provider?: string;
+  subagentMode?: string;
+  workflowMode?: string | null;
+  objective?: string;
+};
+
+export type WorkflowEdge = { from: string; to: string; relation: string };
+
+export type BuiltInWorkflow = {
+  id: string;
+  command: string;
+  label: string;
+  description?: string;
+  defaultCeoPrompt?: string;
+};
+
+export type WorkflowSnapshot = {
+  workflowId: string;
+  taskId: string | null;
+  mode: string | null;
+  phase: string | null;
+  gate: string | null;
+  rootAgentId: string;
+  availableWorkflows?: BuiltInWorkflow[];
+  subagentModes?: { id: string; label: string }[];
+  roles?: {
+    nodes: WorkflowNode[];
+    edges: WorkflowEdge[];
+  };
+  queues: {
+    acceptance?: { id?: string; text?: string; status?: string }[];
+    dependsOn?: string[];
+    blocks?: string[];
+  } | null;
+  nodes: WorkflowNode[];
+  edges: WorkflowEdge[];
+  sessions?: Session[];
+};

package/src/ui/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}

package/src/ui/vite.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  server: {
+    port: 5173,
+  },
+  build: {
+    outDir: 'dist',
+    sourcemap: true,
+  },
+});

package/src/wf-ui-server/__tests__/a2a-store.test.mjs

@@ -0,0 +1,79 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import { buildWorkflowSnapshot, ensureA2aDefaults, loadA2aSkills, loadBuiltInWorkflows } from '../a2a-store.mjs';
+import { SessionRegistry } from '../session-registry.mjs';
+import { persistSession } from '../terminal-store.mjs';
+
+function makeProject() {
+  const projectRoot = fs.mkdtempSync(path.join(os.tmpdir(), 'a2a-store-'));
+  const taskRoot = path.join(projectRoot, 'Harness', 'tasks', 'task-alpha');
+  fs.mkdirSync(taskRoot, { recursive: true });
+  fs.writeFileSync(path.join(projectRoot, 'Harness', 'PROGRESS.md'), '## Active Task\n\n- task-alpha\n');
+  fs.writeFileSync(path.join(taskRoot, 'STATE.json'), JSON.stringify({
+    schemaVersion: 1,
+    taskId: 'task-alpha',
+    status: 'active',
+    mode: 'wf',
+    phase: 'implementation',
+    gate: 'AC-GATE',
+    links: { dependsOn: [], blocks: [] },
+    acceptance: [{ id: 'AC-015', text: 'workflow', status: 'pending' }]
+  }));
+  return projectRoot;
+}
+
+test('ensureA2aDefaults writes role graph and terminal skill manifest', () => {
+  const projectRoot = makeProject();
+  try {
+    ensureA2aDefaults(projectRoot);
+    assert.ok(fs.existsSync(path.join(projectRoot, 'Harness', 'a2a', 'role-graph.json')));
+    assert.ok(fs.existsSync(path.join(projectRoot, 'Harness', 'a2a', 'workflows.json')));
+    assert.ok(fs.existsSync(path.join(projectRoot, 'Harness', 'a2a', 'skills', 'terminal-control.json')));
+    assert.equal(loadA2aSkills(projectRoot)[0].skillId, 'terminal-control');
+    assert.ok(loadBuiltInWorkflows(projectRoot).some(workflow => workflow.command === '/wf'));
+  } finally {
+    fs.rmSync(projectRoot, { recursive: true, force: true });
+  }
+});
+
+test('buildWorkflowSnapshot returns CEO hierarchy and session-linked node', () => {
+  const projectRoot = makeProject();
+  try {
+    const registry = new SessionRegistry();
+    const session = registry.create({ taskId: 'task-alpha', runtime: 'codex' });
+    registry.update(session.sessionId, { status: 'blocked', blockedReason: 'pty-adapter-missing' });
+    const workflow = buildWorkflowSnapshot(projectRoot, registry);
+    assert.equal(workflow.rootAgentId, 'ceo');
+    assert.ok(workflow.nodes.some(node => node.id === 'ceo' && node.label === 'CEO Leader'));
+    assert.ok(workflow.roles.nodes.some(node => node.id === 'ceo'));
+    assert.ok(workflow.availableWorkflows.some(item => item.command === '/wf'));
+    assert.ok(workflow.subagentModes.some(item => item.id === 'wf-subagents'));
+    assert.ok(workflow.nodes.some(node => node.id === `session-${session.sessionId}`));
+    assert.ok(workflow.edges.some(edge => edge.from === 'terminal-controller' && edge.to === `session-${session.sessionId}`));
+  } finally {
+    fs.rmSync(projectRoot, { recursive: true, force: true });
+  }
+});
+
+test('buildWorkflowSnapshot includes unbound Harness/a2a terminal sessions', () => {
+  const projectRoot = makeProject();
+  try {
+    persistSession(projectRoot, {
+      taskId: null,
+      sessionId: 'session-unbound',
+      runtime: 'opencode',
+      role: 'wf-subagent',
+      status: 'running',
+      updatedAt: '2026-07-30T00:00:00.000Z',
+    });
+    const workflow = buildWorkflowSnapshot(projectRoot, new SessionRegistry());
+    const node = workflow.nodes.find(item => item.id === 'session-session-unbound');
+    assert.equal(node.runtime, 'opencode');
+    assert.equal(node.taskId, null);
+  } finally {
+    fs.rmSync(projectRoot, { recursive: true, force: true });
+  }
+});