create-harness-vibe-coding 0.8.19 → 0.9.3

package/src/wf-ui-server/drivers/opencode-server.mjs

@@ -0,0 +1,486 @@
+import { spawn as nodeSpawn } from 'node:child_process';
+import net from 'node:net';
+
+const STDOUT_URL_WAIT_MS = 3000;
+const HEALTH_POLL_MS = 100;
+const DEFAULT_HEALTH_TIMEOUT_MS = 10000;
+const DEFAULT_SSE_RETRY_DELAY_MS = 250;
+const DEFAULT_KILL_GRACE_MS = 2000;
+
+const delay = (ms) => new Promise((r) => setTimeout(r, ms));
+
+function getFreePort() {
+  return new Promise((resolve, reject) => {
+    const srv = net.createServer();
+    srv.unref();
+    srv.on('error', reject);
+    srv.listen(0, '127.0.0.1', () => {
+      const { port } = srv.address();
+      srv.close(() => resolve(port));
+    });
+  });
+}
+
+function firstHttpUrlFromStdout(child) {
+  return new Promise((resolve) => {
+    let buf = '';
+    const onData = (d) => {
+      buf += typeof d === 'string' ? d : Buffer.from(d).toString('utf8');
+      const m = buf.match(/https?:\/\/127\.0\.0\.1:\d+/);
+      if (m) finish(m[0]);
+    };
+    const onExit = () => finish(null);
+    const finish = (v) => {
+      child.stdout?.off?.('data', onData);
+      child.off?.('exit', onExit);
+      resolve(v);
+    };
+    child.stdout?.on?.('data', onData);
+    child.on?.('exit', onExit);
+  });
+}
+
+export function createOpencodeServerDriver(options = {}) {
+  const {
+    command = 'opencode',
+    args = [],
+    cwd,
+    env,
+    model,
+    effortVariant = '',
+    title,
+    providerSessionId = null,
+    onEvent = () => {},
+    _spawn = nodeSpawn,
+    _fetch = globalThis.fetch.bind(globalThis),
+    healthTimeoutMs = DEFAULT_HEALTH_TIMEOUT_MS,
+    sseRetryDelayMs = DEFAULT_SSE_RETRY_DELAY_MS,
+    killGraceMs = DEFAULT_KILL_GRACE_MS,
+  } = options;
+
+  let child = null;
+  let baseUrl = null;
+  let sessionId = null;
+  let started = false;
+  let disposed = false;
+  let seq = 0;
+  let turnActive = false;
+  let pendingTurn = false;
+  let sseReader = null;
+  let permFlavor = null; // 'response' | 'reply' | null
+  const startedToolCalls = new Set();
+
+  // OpenCode's model/variant selectors belong to the prompt request. They
+  // are not options of `opencode serve` (the CLI rejects them), even though
+  // the shared resolver emits them for PTY/run launches. Preserve the exact
+  // values while removing only these generic launch pairs.
+  function splitServeArgs() {
+    const serveArgs = [];
+    let argModel = '';
+    let argVariant = '';
+    const extra = Array.isArray(args) ? args.map(String) : [];
+    for (let i = 0; i < extra.length; i++) {
+      const arg = extra[i];
+      if (arg === '--model') {
+        argModel = String(extra[++i] || '');
+        continue;
+      }
+      if (arg.startsWith('--model=')) {
+        argModel = arg.slice('--model='.length);
+        continue;
+      }
+      if (arg === '--variant') {
+        argVariant = String(extra[++i] || '');
+        continue;
+      }
+      if (arg.startsWith('--variant=')) {
+        argVariant = arg.slice('--variant='.length);
+        continue;
+      }
+      serveArgs.push(arg);
+    }
+    return {
+      serveArgs,
+      model: String(model || argModel || ''),
+      effortVariant: String(effortVariant || argVariant || ''),
+    };
+  }
+
+  const serveLaunch = splitServeArgs();
+
+  function emit(type, fields = {}, raw = null) {
+    const envelope = { seq: ++seq, type, sessionId, ...fields, raw };
+    try {
+      onEvent(envelope);
+    } catch {}
+    return envelope;
+  }
+
+  async function waitForHealth(deadline) {
+    while (Date.now() < deadline) {
+      if (child?.spawnError) throw child.spawnError;
+      try {
+        await _fetch(`${baseUrl}/health`);
+        return true;
+      } catch {}
+      await delay(HEALTH_POLL_MS);
+    }
+    return false;
+  }
+
+  async function detectPermissionFlavor() {
+    let allText = '';
+    try {
+      const res = await _fetch(`${baseUrl}/doc`);
+      if (res.ok) {
+        const doc = await res.json();
+        allText = JSON.stringify(doc);
+        const paths = doc.paths ?? {};
+        outer: for (const [p, def] of Object.entries(paths)) {
+          if (!p.includes('/permissions/')) continue;
+          const schema = def?.post?.requestBody?.content?.['application/json']?.schema;
+          if (!schema) continue;
+          const names = [...(schema.required ?? []), ...Object.keys(schema.properties ?? {})];
+          if (names.includes('response')) { permFlavor = 'response'; break outer; }
+          if (names.includes('reply')) { permFlavor = 'reply'; break outer; }
+        }
+        if (!permFlavor && allText.includes('/permissions/')) {
+          if (allText.includes('"reply"')) permFlavor = 'reply';
+          else if (allText.includes('"response"')) permFlavor = 'response';
+        }
+      }
+    } catch {}
+    if (!permFlavor) {
+      emit('error', {
+        message: 'opencode permission flavor undetected via /doc; approve will try {response} then {reply}',
+        recoverable: true,
+        phase: 'permission-detection',
+      }, null);
+    }
+  }
+
+  async function initSession() {
+    if (providerSessionId) {
+      const res = await _fetch(`${baseUrl}/session/${encodeURIComponent(providerSessionId)}`);
+      if (!res.ok) {
+        emit('error', { message: `resume failed: session ${providerSessionId} not found (HTTP ${res.status})` }, null);
+        throw new Error(`opencode resume failed: session ${providerSessionId} not found`);
+      }
+      sessionId = providerSessionId;
+      return;
+    }
+    const body = { ...(title ? { title } : {}) };
+    const res = await _fetch(`${baseUrl}/session`, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify(body),
+    });
+    if (!res.ok) throw new Error(`opencode session create failed (HTTP ${res.status})`);
+    const json = await res.json();
+    sessionId = json.id;
+    if (!sessionId) throw new Error('opencode session create returned no id');
+  }
+
+  function endTurn() {
+    if (turnActive || pendingTurn) {
+      emit('turn_ended', {}, null);
+      emit('done', {}, null);
+    }
+    turnActive = false;
+    pendingTurn = false;
+  }
+
+  function mapPart(part, delta, raw) {
+    if (!part) return;
+    switch (part.type) {
+      case 'text': {
+        const fields = { text: part.text ?? '' };
+        if (delta !== undefined && delta !== null) fields.delta = delta;
+        emit('text_delta', fields, raw);
+        break;
+      }
+      case 'reasoning': {
+        const fields = { text: part.text ?? '' };
+        if (delta !== undefined && delta !== null) fields.delta = delta;
+        emit('thinking_delta', fields, raw);
+        break;
+      }
+      case 'tool': {
+        const callId = part.callID || part.id;
+        const st = part.state ?? {};
+        if (st.status === 'pending' || st.status === 'running') {
+          if (callId && startedToolCalls.has(callId)) break;
+          if (callId) startedToolCalls.add(callId);
+          emit('tool_call_start', { callId, name: part.tool, input: st.input }, raw);
+        } else if (st.status === 'completed' || st.status === 'error') {
+          if (callId) startedToolCalls.delete(callId);
+          emit('tool_call_end', { callId, output: st.output, isError: st.status === 'error' }, raw);
+        }
+        break;
+      }
+      case 'step-start':
+        turnActive = true;
+        emit('turn_started', {}, raw);
+        break;
+      default:
+        break;
+    }
+  }
+
+  function handleServerEvent(evt) {
+    if (!evt || typeof evt !== 'object') return;
+    const props = evt.properties ?? {};
+    switch (evt.type) {
+      case 'step-start':
+        mapPart({ type: 'step-start' }, undefined, evt);
+        break;
+      case 'message.part.updated':
+        mapPart(props.part ?? evt.part, props.delta, evt);
+        break;
+      case 'permission.updated':
+      case 'permission.asked':
+        emit('permission_request', { requestId: props.id, tool: props.type, title: props.title }, evt);
+        break;
+      case 'session.idle':
+        if (props.sessionID == null || props.sessionID === sessionId) endTurn();
+        break;
+      case 'session.error':
+        emit('error', { message: props.error?.message ?? JSON.stringify(props.error ?? null) }, evt);
+        break;
+      default:
+        break;
+    }
+  }
+
+  function handleSsePayload(payload) {
+    let evt;
+    try {
+      evt = JSON.parse(payload);
+    } catch {
+      return;
+    }
+    handleServerEvent(evt);
+  }
+
+  async function consumeSse(body) {
+    const reader = body.getReader();
+    sseReader = reader;
+    const decoder = new TextDecoder();
+    let buf = '';
+    let dataLines = [];
+    let handledAny = false;
+    const flush = () => {
+      if (dataLines.length) {
+        const payload = dataLines.join('\n');
+        dataLines = [];
+        handledAny = true;
+        handleSsePayload(payload);
+      }
+    };
+    try {
+      for (;;) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buf += decoder.decode(value, { stream: true });
+        let idx;
+        while ((idx = buf.indexOf('\n')) >= 0) {
+          const line = buf.slice(0, idx).replace(/\r$/, '');
+          buf = buf.slice(idx + 1);
+          if (line === '') flush();
+          else if (line.startsWith('data:')) dataLines.push(line.slice(5).trimStart());
+        }
+      }
+      buf += decoder.decode();
+      if (buf.startsWith('data:')) dataLines.push(buf.slice(5).trimStart());
+      flush();
+      return handledAny;
+    } finally {
+      if (sseReader === reader) sseReader = null;
+    }
+  }
+
+  async function runEventLoop() {
+    let consecutiveFailures = 0;
+    while (!disposed) {
+      try {
+        const res = await _fetch(`${baseUrl}/event`, { headers: { accept: 'text/event-stream' } });
+        if (!res.ok || !res.body) throw new Error(`event stream HTTP ${res.status}`);
+        const gotData = await consumeSse(res.body);
+        if (disposed) return;
+        if (gotData) {
+          consecutiveFailures = 0;
+          continue;
+        }
+        throw new Error('event stream ended unexpectedly');
+      } catch (err) {
+        if (disposed) return;
+        consecutiveFailures++;
+        if (consecutiveFailures > 1) {
+          emit('error', { message: `event stream lost: ${err.message}`, recoverable: false }, null);
+          return;
+        }
+        await delay(sseRetryDelayMs);
+      }
+    }
+  }
+
+  async function start() {
+    if (started) throw new Error('driver already started');
+    started = true;
+    let port;
+    try {
+      port = await getFreePort();
+    } catch {}
+    child = _spawn(command, ['serve', '--port', String(port ?? 0), ...serveLaunch.serveArgs], {
+      cwd,
+      env,
+      stdio: ['ignore', 'pipe', 'pipe'],
+    });
+    child.on?.('error', (err) => {
+      child.spawnError = err;
+    });
+    child.stderr?.on?.('data', () => {});
+    const stdoutUrl = await Promise.race([
+      firstHttpUrlFromStdout(child),
+      delay(STDOUT_URL_WAIT_MS).then(() => null),
+    ]);
+    baseUrl = stdoutUrl ?? (port ? `http://127.0.0.1:${port}` : null);
+    if (!baseUrl) throw new Error('opencode serve printed no base URL and no fallback port available');
+    const healthy = await waitForHealth(Date.now() + healthTimeoutMs);
+    if (!healthy) throw new Error(`opencode serve did not become healthy at ${baseUrl} within ${healthTimeoutMs}ms`);
+    await detectPermissionFlavor();
+    await initSession();
+    void runEventLoop();
+    return { pid: child.pid, baseUrl, sessionId };
+  }
+
+  function buildPromptBody(text, meta) {
+    const body = { parts: [{ type: 'text', text }] };
+    if (serveLaunch.model) body.model = serveLaunch.model;
+    if (serveLaunch.effortVariant) body.variant = serveLaunch.effortVariant;
+    if (meta !== undefined) body.meta = meta;
+    return body;
+  }
+
+  async function sendSync(text, meta) {
+    const res = await _fetch(`${baseUrl}/session/${sessionId}/message`, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify(buildPromptBody(text, meta)),
+    });
+    if (!res.ok) {
+      emit('error', { message: `sync prompt failed (HTTP ${res.status})` }, null);
+      return { ok: false, status: res.status };
+    }
+    let parts = [];
+    try {
+      const json = await res.json();
+      parts = Array.isArray(json) ? json : (json.parts ?? []);
+    } catch {}
+    for (const part of parts) mapPart(part, undefined, part);
+    endTurn();
+    return { ok: true, sync: true };
+  }
+
+  async function send(text, meta) {
+    if (!started || !sessionId) throw new Error('driver not started');
+    pendingTurn = true;
+    const res = await _fetch(`${baseUrl}/session/${sessionId}/prompt_async`, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify(buildPromptBody(text, meta)),
+    });
+    if (res.status === 404) return sendSync(text, meta);
+    if (!res.ok) {
+      emit('error', { message: `prompt_async failed (HTTP ${res.status})` }, null);
+      return { ok: false, status: res.status };
+    }
+    return { ok: true };
+  }
+
+  async function interrupt() {
+    if (!started || !sessionId || disposed) return { ok: false };
+    turnActive = false;
+    pendingTurn = false;
+    try {
+      await _fetch(`${baseUrl}/session/${sessionId}/abort`, { method: 'POST' });
+      return { ok: true };
+    } catch (err) {
+      return { ok: false, error: err.message };
+    }
+  }
+
+  async function approve(requestId, result) {
+    if (!started || !sessionId) throw new Error('driver not started');
+    const value = typeof result === 'boolean' ? (result ? 'allow' : 'deny') : String(result ?? 'allow');
+    const url = `${baseUrl}/session/${encodeURIComponent(sessionId)}/permissions/${encodeURIComponent(requestId)}`;
+    const shapes = permFlavor
+      ? [{ key: permFlavor, body: { [permFlavor]: value } }]
+      : [
+          { key: 'response', body: { response: value } },
+          { key: 'reply', body: { reply: value } },
+        ];
+    const tried = [];
+    const finishFail = (extra = {}) => {
+      emit('error', { message: extra.message ?? 'approve failed' }, null);
+      return { ok: false, tried };
+    };
+    for (let i = 0; i < shapes.length; i++) {
+      const shape = shapes[i];
+      tried.push(shape.key);
+      let res;
+      try {
+        res = await _fetch(url, {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify(shape.body),
+        });
+      } catch (err) {
+        if (i === shapes.length - 1) return finishFail({ message: `approve failed: ${err.message}` });
+        continue;
+      }
+      if (res.ok) return { ok: true, shape: shape.key, tried };
+      if (i === shapes.length - 1) {
+        emit('error', { message: `approve failed (HTTP ${res.status})` }, null);
+        return { ok: false, tried, status: res.status };
+      }
+    }
+    return { ok: false, tried };
+  }
+
+  function closeSse() {
+    const reader = sseReader;
+    sseReader = null;
+    try {
+      reader?.cancel?.();
+    } catch {}
+  }
+
+  async function dispose(opts = {}) {
+    if (disposed) return { ok: true };
+    disposed = true;
+    if ((turnActive || pendingTurn) && sessionId && baseUrl) {
+      try {
+        await _fetch(`${baseUrl}/session/${sessionId}/abort`, { method: 'POST' });
+      } catch {}
+    }
+    closeSse();
+    if (child?.pid) {
+      child.kill?.('SIGTERM');
+      if (!(opts.force || opts.immediate)) await delay(killGraceMs);
+      if (child.exitCode == null && child.signalCode == null) child.kill?.('SIGKILL');
+    }
+    return { ok: true };
+  }
+
+  return {
+    start,
+    send,
+    steer: (text, meta) => send(text, meta),
+    interrupt,
+    approve,
+    dispose,
+  };
+}
+
+export default createOpencodeServerDriver;

package/src/wf-ui-server/excalidraw-svg.mjs

@@ -0,0 +1,141 @@
+// excalidraw-svg.mjs
+//
+// Self-contained renderer: an excalidraw scene (elements array, standard
+// excalidraw JSON) to an inline SVG string. Used by the Display node to embed
+// diagrams (`{{excalidraw:<nodeId>}}` placeholders expand to these SVGs at
+// serve time) so reports stay static and need no CDN or runtime JS.
+// Simplified rendering (shapes + text + arrows; no roughness/hand-drawn
+// effect). Deterministic: same scene -> same SVG.
+
+function esc(text) {
+  return String(text ?? '')
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}
+
+function colorOf(el, fallback = '#1e1e1e') {
+  const c = String(el.strokeColor || fallback);
+  return /^#[0-9a-f]{3,8}$/i.test(c) ? c : fallback;
+}
+
+// Fill used by the compact UI preview: plain backgroundColor values
+// (hex / rgb() / rgba() / CSS named colors) render as-is; anything else
+// (including 'transparent') falls back to no fill.
+function plainFillOf(el) {
+  const raw = String(el.backgroundColor ?? '');
+  if (!raw || raw === 'transparent' || raw === 'none') return 'none';
+  if (/^#[0-9a-fA-F]{3,8}$/.test(raw)) return raw;
+  if (/^rgba?\(/i.test(raw)) return raw;
+  if (/^[a-zA-Z-]+$/.test(raw)) return raw;
+  return 'none';
+}
+
+function sceneBounds(elements) {
+  let minX = Infinity; let minY = Infinity; let maxX = -Infinity; let maxY = -Infinity;
+  for (const el of elements) {
+    const x = Number(el.x) || 0;
+    const y = Number(el.y) || 0;
+    const w = Number(el.width) || 0;
+    const h = Number(el.height) || 0;
+    if (x < minX) minX = x;
+    if (y < minY) minY = y;
+    if (x + w > maxX) maxX = x + w;
+    if (y + h > maxY) maxY = y + h;
+    for (const p of el.points || []) {
+      const px = Number(p[0] || 0) + x;
+      const py = Number(p[1] || 0) + y;
+      if (px < minX) minX = px;
+      if (py < minY) minY = py;
+      if (px > maxX) maxX = px;
+      if (py > maxY) maxY = py;
+    }
+  }
+  if (!Number.isFinite(minX)) return { minX: 0, minY: 0, width: 300, height: 200 };
+  return { minX, minY, width: Math.max(maxX - minX, 1), height: Math.max(maxY - minY, 1) };
+}
+
+function shapeSvg(el, indent, options = {}) {
+  const w = Number(el.width) || 0;
+  const h = Number(el.height) || 0;
+  const fill = options.fillMode === 'plain'
+    ? ` fill="${plainFillOf(el)}"`
+    : (el.fillStyle === 'solid' ? ` fill="${colorOf(el, el.backgroundColor || '#ffffff')}"` : ' fill="none"');
+  const stroke = ` stroke="${colorOf(el)}" stroke-width="${Number(el.strokeWidth) || 2}" stroke-linejoin="round"`;
+  const opacity = Number(el.opacity) >= 0 ? ` opacity="${Number(el.opacity)}"` : '';
+  const pad = '  '.repeat(indent);
+  if (el.type === 'ellipse') {
+    return `${pad}<ellipse cx="${w / 2}" cy="${h / 2}" rx="${w / 2}" ry="${h / 2}"${fill}${stroke}${opacity}/>`;
+  }
+  if (el.type === 'diamond') {
+    const pts = `${w / 2},0 ${w},${h / 2} ${w / 2},${h} 0,${h / 2}`;
+    return `${pad}<polygon points="${pts}"${fill}${stroke}${opacity}/>`;
+  }
+  if (el.type === 'arrow' || el.type === 'line') {
+    const points = (el.points || []).map((p) => `${Number(p[0]) || 0},${Number(p[1]) || 0}`).join(' ');
+    if (!points) return '';
+    const marker = el.type === 'arrow'
+      ? ` marker-end="url(#ex-arrow-${el.id || 'a'})"`
+      : '';
+    return `${pad}<polyline points="${points}" fill="none"${stroke}${opacity}${marker}/>`;
+  }
+  if (el.type === 'text') {
+    const size = Number(el.fontSize) || 20;
+    const anchor = el.textAlign === 'center' ? 'middle' : el.textAlign === 'right' ? 'end' : 'start';
+    const lines = String(el.text || '').split('\n');
+    const lineHeight = Math.round(size * 1.2);
+    return lines.map((line, i) => (
+      `${pad}<text x="${w / 2}" y="${(i + 1) * lineHeight}" font-family="sans-serif" font-size="${size}" text-anchor="${anchor}" fill="${colorOf(el)}"${opacity}>${esc(line)}</text>`
+    )).join('\n');
+  }
+  if (el.type === 'freedraw') {
+    const points = (el.points || []).map((p) => `${Number(p[0]) || 0},${Number(p[1]) || 0}`).join(' ');
+    return points ? `${pad}<polyline points="${points}" fill="none"${stroke}${opacity}/>` : '';
+  }
+  // rectangle + fallback
+  return `${pad}<rect width="${w}" height="${h}"${fill}${stroke}${opacity}/>`;
+}
+
+// Renders a scene to a standalone inline <svg> (no <html> wrapper) with the
+// element transforms applied (translate to center + rotation).
+// `fit: 'contain'` makes the svg fill its container (letterboxed via
+// preserveAspectRatio) for live UI previews; the default keeps width-capped
+// sizing for static report embeds. `fillMode: 'plain'` maps backgroundColor
+// straight to fill instead of excalidraw's fillStyle semantics.
+export function renderSceneSvg(elements, { width = 800, fit = 'width', fillMode = 'excalidraw' } = {}) {
+  const list = Array.isArray(elements) ? elements : [];
+  const bounds = sceneBounds(list);
+  const pad = 24;
+  const scale = Math.min(width / (bounds.width + pad * 2), 3);
+  const height = Math.max(1, Math.round((bounds.height + pad * 2) * scale));
+  const parts = [];
+  const svgStyle = fit === 'contain'
+    ? ' style="width:100%;height:100%"'
+    : ` style="max-width:${width}px;height:auto"`;
+  const fitAttr = fit === 'contain' ? ' preserveAspectRatio="xMidYMid meet"' : '';
+  parts.push('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 '
+    + `${Math.round((bounds.width + pad * 2) * scale)} ${height}" width="100%"${fitAttr}${svgStyle}>`);
+  parts.push('  <defs><marker id="ex-arrow-a" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto"><path d="M0,0 L0,6 L9,3 z" fill="#1e1e1e"/></marker></defs>');
+  for (const el of list) {
+    const x = Number(el.x) || 0;
+    const y = Number(el.y) || 0;
+    const w = Number(el.width) || 0;
+    const h = Number(el.height) || 0;
+    const angle = Number(el.angle) || 0;
+    const inner = shapeSvg(el, 3, { fillMode });
+    if (!inner) continue;
+    const hooks = (el['data-testid'] || el['data-element-type'])
+      ? ` data-testid="${esc(el['data-testid'] ?? '')}" data-element-type="${esc(el['data-element-type'] ?? '')}"`
+      : '';
+    // Each shape is drawn with its top-left at the local origin, so recenter
+    // it on the origin (translate -w/2,-h/2) before scale/rotate; the outer
+    // translate places that origin at the element's scene center. This keeps
+    // unrotated elements from drifting down-right by half their size.
+    parts.push(`  <g${hooks} transform="translate(${(x + w / 2 - bounds.minX + pad) * scale} ${(y + h / 2 - bounds.minY + pad) * scale}) rotate(${angle}) scale(${scale}) translate(${-w / 2} ${-h / 2})">`);
+    parts.push(inner);
+    parts.push('  </g>');
+  }
+  parts.push('</svg>');
+  return parts.join('\n');
+}