@1agh/maude 0.30.0 → 0.32.0

package/apps/studio/client/panels/acp-runtime.js

@@ -0,0 +1,286 @@
+// Phase 31 (DDR-123) — client glue between assistant-ui's local runtime and the
+// dev-server ACP bridge (`/_ws/acp`). One persistent socket per ChatPanel mount;
+// the bridge lazy-spawns the user's `claude` on the first prompt, so just opening
+// the panel costs nothing. A custom `ChatModelAdapter` translates the bridge's
+// JSON frames into the streamed assistant message parts assistant-ui renders.
+
+const WS_PATH = '/_ws/acp';
+
+/** Connection wrapper around the loopback `/_ws/acp` socket. */
+export function createAcpConnection() {
+  let ws = null;
+  let openPromise = null;
+  let turnHandler = null; // the in-flight run()'s frame sink
+  const statusListeners = new Set();
+  const status = { available: null, reason: undefined, ready: false };
+
+  // Live "what's running now" — in-flight tool calls (a tool_call with no
+  // completed/failed tool_call_update yet). Surfaced as the activity bar so
+  // background work is visible at a glance, not only buried in the text.
+  const activityListeners = new Set();
+  const activeTools = new Map(); // toolCallId → { title, kind }
+
+  // Turn-busy signal — true while a prompt turn is in flight. Drives the
+  // menubar Assistant badge + the "finished" notification.
+  const busyListeners = new Set();
+  let busy = false;
+
+  function emitStatus() {
+    for (const fn of statusListeners) fn({ ...status });
+  }
+
+  function setBusy(next) {
+    if (busy === next) return;
+    busy = next;
+    for (const fn of busyListeners) fn(busy);
+  }
+
+  function emitActivity() {
+    const snapshot = [...activeTools.values()];
+    for (const fn of activityListeners) fn(snapshot);
+  }
+
+  function trackActivity(frame) {
+    if (frame.t === 'update') {
+      const u = frame.update;
+      if (u.sessionUpdate === 'tool_call') {
+        activeTools.set(u.toolCallId, { title: u.title || u.kind || 'tool', kind: u.kind });
+        emitActivity();
+      } else if (
+        u.sessionUpdate === 'tool_call_update' &&
+        (u.status === 'completed' || u.status === 'failed')
+      ) {
+        if (activeTools.delete(u.toolCallId)) emitActivity();
+      }
+    } else if (frame.t === 'turn-end' || frame.t === 'error') {
+      if (activeTools.size) {
+        activeTools.clear();
+        emitActivity();
+      }
+    }
+  }
+
+  function onFrame(frame) {
+    if (frame.t === 'ready') {
+      status.ready = true;
+      status.available = frame.available;
+      status.reason = frame.reason;
+      emitStatus();
+      return;
+    }
+    // Everything else belongs to the active prompt turn.
+    trackActivity(frame);
+    if (turnHandler) turnHandler(frame);
+  }
+
+  function ensureOpen() {
+    if (ws && (ws.readyState === WebSocket.OPEN || ws.readyState === WebSocket.CONNECTING)) {
+      return openPromise;
+    }
+    openPromise = new Promise((resolve, reject) => {
+      const scheme = location.protocol === 'https:' ? 'wss' : 'ws';
+      const sock = new WebSocket(`${scheme}://${location.host}${WS_PATH}`);
+      ws = sock;
+      sock.onopen = () => resolve();
+      sock.onerror = () => reject(new Error('Could not reach the Claude bridge.'));
+      sock.onclose = () => {
+        ws = null;
+        status.ready = false;
+        emitStatus();
+      };
+      sock.onmessage = (e) => {
+        try {
+          onFrame(JSON.parse(e.data));
+        } catch {
+          /* ignore malformed frame */
+        }
+      };
+    });
+    return openPromise;
+  }
+
+  return {
+    onStatus(fn) {
+      statusListeners.add(fn);
+      fn({ ...status });
+      return () => statusListeners.delete(fn);
+    },
+
+    onActivity(fn) {
+      activityListeners.add(fn);
+      fn([...activeTools.values()]);
+      return () => activityListeners.delete(fn);
+    },
+
+    /**
+     * Drive one prompt turn. Async-generates the bridge's `update` frames until
+     * `turn-end`; throws on `error`; sends `cancel` when `abortSignal` aborts.
+     */
+    async *prompt(text, chatId, abortSignal, model, effort) {
+      await ensureOpen();
+      const queue = [];
+      let wake = null;
+      let ended = false;
+      let failure = null;
+      turnHandler = (frame) => {
+        if (frame.t === 'turn-end') ended = true;
+        else if (frame.t === 'error') failure = frame.message || 'The Claude bridge errored.';
+        else queue.push(frame); // update / connected / permission
+        if (wake) {
+          const w = wake;
+          wake = null;
+          w();
+        }
+      };
+      const cancel = () => {
+        try {
+          ws?.send(JSON.stringify({ t: 'cancel' }));
+        } catch {
+          /* socket already gone */
+        }
+      };
+      abortSignal?.addEventListener('abort', cancel, { once: true });
+      setBusy(true);
+      try {
+        ws.send(
+          JSON.stringify({
+            t: 'prompt',
+            text,
+            chat: chatId || undefined,
+            model: model || undefined,
+            effort: effort || undefined,
+          })
+        );
+        for (;;) {
+          while (queue.length) yield queue.shift();
+          if (failure) throw new Error(failure);
+          if (ended) return;
+          await new Promise((r) => {
+            wake = r;
+          });
+        }
+      } finally {
+        turnHandler = null;
+        setBusy(false);
+        abortSignal?.removeEventListener('abort', cancel);
+      }
+    },
+
+    onBusy(fn) {
+      busyListeners.add(fn);
+      fn(busy);
+      return () => busyListeners.delete(fn);
+    },
+
+    get busy() {
+      return busy;
+    },
+
+    close() {
+      try {
+        ws?.close();
+      } catch {
+        /* already closed */
+      }
+      ws = null;
+    },
+  };
+}
+
+function lastUserText(messages) {
+  for (let i = messages.length - 1; i >= 0; i--) {
+    const m = messages[i];
+    if (m.role !== 'user') continue;
+    return (m.content || [])
+      .filter((p) => p.type === 'text')
+      .map((p) => p.text)
+      .join('')
+      .trim();
+  }
+  return '';
+}
+
+function safeJson(value) {
+  try {
+    return JSON.stringify(value ?? {});
+  } catch {
+    return '{}';
+  }
+}
+
+/**
+ * assistant-ui `ChatModelAdapter` over the ACP bridge. Streams text + tool-call
+ * parts, preserving the order in which the agent emits them. `available_commands_update`
+ * and `usage_update` are intentionally dropped (chrome noise, not chat content).
+ */
+export function makeAcpAdapter(conn, getChatId, getModel, getEffort) {
+  return {
+    async *run({ messages, abortSignal }) {
+      const text = lastUserText(messages);
+      if (!text) return;
+
+      const parts = [];
+      const toolIndex = new Map();
+
+      for await (const frame of conn.prompt(
+        text,
+        getChatId(),
+        abortSignal,
+        getModel?.(),
+        getEffort?.()
+      )) {
+        if (frame.t !== 'update') continue;
+        const u = frame.update;
+        switch (u.sessionUpdate) {
+          case 'agent_message_chunk': {
+            if (u.content?.type !== 'text') break;
+            const last = parts[parts.length - 1];
+            if (last && last.type === 'text') {
+              parts[parts.length - 1] = { ...last, text: last.text + u.content.text };
+            } else {
+              parts.push({ type: 'text', text: u.content.text });
+            }
+            break;
+          }
+          case 'agent_thought_chunk': {
+            // Extended-thinking — rendered as a collapsed "Thinking" disclosure
+            // (assistant-ui reasoning part) so it's available but not in the way.
+            if (u.content?.type !== 'text') break;
+            const last = parts[parts.length - 1];
+            if (last && last.type === 'reasoning') {
+              parts[parts.length - 1] = { ...last, text: last.text + u.content.text };
+            } else {
+              parts.push({ type: 'reasoning', text: u.content.text });
+            }
+            break;
+          }
+          case 'tool_call': {
+            toolIndex.set(u.toolCallId, parts.length);
+            parts.push({
+              type: 'tool-call',
+              toolCallId: u.toolCallId,
+              toolName: u.title || u.kind || 'tool',
+              args: u.rawInput ?? {},
+              argsText: safeJson(u.rawInput),
+              result: undefined,
+            });
+            break;
+          }
+          case 'tool_call_update': {
+            const idx = toolIndex.get(u.toolCallId);
+            if (idx == null) break;
+            parts[idx] = {
+              ...parts[idx],
+              result: u.rawOutput ?? parts[idx].result,
+              isError: u.status === 'failed',
+            };
+            break;
+          }
+          default:
+            break; // plan / thought / commands / usage — not rendered in v1
+        }
+        yield { content: parts.slice() };
+      }
+    },
+  };
+}

package/apps/studio/client/panels/chat-markdown.jsx

@@ -0,0 +1,138 @@
+// Compact, XSS-safe markdown renderer for the ACP chat feed. Builds React nodes
+// directly (never innerHTML) so agent output can't inject markup. Covers the
+// subset a coding agent actually emits: fenced code blocks, headings, bullet +
+// numbered lists, bold / italic / inline code, and http(s) links. Anything else
+// falls through as plain (pre-wrapped) text. No new dependency.
+
+function safeHref(url) {
+  // Only allow http(s) — never javascript:/data:/etc.
+  return /^https?:\/\//i.test(url) ? url : null;
+}
+
+// Inline tokenizer: `code`, **bold**, *italic*, [text](url).
+const INLINE_RE = /(`[^`]+`)|(\*\*[^*]+\*\*)|(\*[^*\n]+\*)|(\[[^\]]+\]\([^)\s]+\))/g;
+
+function inline(text) {
+  const out = [];
+  let last = 0;
+  let key = 0;
+  let m;
+  INLINE_RE.lastIndex = 0;
+  // biome-ignore lint/suspicious/noAssignInExpressions: standard regex exec loop
+  while ((m = INLINE_RE.exec(text)) !== null) {
+    if (m.index > last) out.push(text.slice(last, m.index));
+    const tok = m[0];
+    if (tok.startsWith('`')) {
+      out.push(<code key={key++}>{tok.slice(1, -1)}</code>);
+    } else if (tok.startsWith('**')) {
+      out.push(<strong key={key++}>{tok.slice(2, -2)}</strong>);
+    } else if (tok.startsWith('*')) {
+      out.push(<em key={key++}>{tok.slice(1, -1)}</em>);
+    } else {
+      const link = /\[([^\]]+)\]\(([^)\s]+)\)/.exec(tok);
+      const href = link && safeHref(link[2]);
+      out.push(
+        href ? (
+          <a key={key++} href={href} target="_blank" rel="noreferrer noopener">
+            {link[1]}
+          </a>
+        ) : (
+          link ? link[1] : tok
+        )
+      );
+    }
+    last = m.index + tok.length;
+  }
+  if (last < text.length) out.push(text.slice(last));
+  return out;
+}
+
+export function Markdown({ text }) {
+  const lines = String(text).split('\n');
+  const blocks = [];
+  let i = 0;
+  let key = 0;
+
+  const isList = (l) => /^\s*[-*]\s/.test(l) || /^\s*\d+\.\s/.test(l);
+
+  while (i < lines.length) {
+    const line = lines[i];
+
+    // Fenced code block.
+    if (line.trimStart().startsWith('```')) {
+      const buf = [];
+      i++;
+      while (i < lines.length && !lines[i].trimStart().startsWith('```')) {
+        buf.push(lines[i]);
+        i++;
+      }
+      i++; // closing fence
+      blocks.push(
+        <pre key={key++} className="chat-code">
+          <code>{buf.join('\n')}</code>
+        </pre>
+      );
+      continue;
+    }
+
+    // Heading → a styled paragraph (chat doesn't want giant h1s).
+    if (/^#{1,6}\s/.test(line)) {
+      blocks.push(
+        <p key={key++} className="chat-md-h">
+          {inline(line.replace(/^#{1,6}\s/, ''))}
+        </p>
+      );
+      i++;
+      continue;
+    }
+
+    // List (consecutive list lines).
+    if (isList(line)) {
+      const ordered = /^\s*\d+\.\s/.test(line);
+      const items = [];
+      while (i < lines.length && isList(lines[i])) {
+        items.push(<li key={items.length}>{inline(lines[i].replace(/^\s*(?:[-*]|\d+\.)\s/, ''))}</li>);
+        i++;
+      }
+      blocks.push(
+        ordered ? (
+          <ol key={key++} className="chat-md-list">
+            {items}
+          </ol>
+        ) : (
+          <ul key={key++} className="chat-md-list">
+            {items}
+          </ul>
+        )
+      );
+      continue;
+    }
+
+    // Blank line → paragraph separator.
+    if (line.trim() === '') {
+      i++;
+      continue;
+    }
+
+    // Paragraph: gather consecutive non-special lines.
+    const buf = [line];
+    i++;
+    while (
+      i < lines.length &&
+      lines[i].trim() !== '' &&
+      !lines[i].trimStart().startsWith('```') &&
+      !/^#{1,6}\s/.test(lines[i]) &&
+      !isList(lines[i])
+    ) {
+      buf.push(lines[i]);
+      i++;
+    }
+    blocks.push(
+      <p key={key++} className="chat-md-p">
+        {inline(buf.join('\n'))}
+      </p>
+    );
+  }
+
+  return <>{blocks}</>;
+}

package/apps/studio/client/panels/git-grouping.js

@@ -0,0 +1,86 @@
+// Pure grouping helpers for the Changes panel (GitPanel.jsx) — framework-free so
+// they unit-test without a DOM. DDR-115 follow-up: group changed files by parent
+// canvas + its supporting sidecars (same-stem `.meta.json`, slug-matched
+// `.annotations.svg`), mirroring the server's `expandSidecars` notion of "travels
+// with the canvas" so the visual grouping is honest with what a unit commits.
+
+export const CANVAS_RE = /\.(tsx|html)$/i;
+export const META_RE = /\.meta\.json$/i;
+export const ANNOT_RE = /\.annotations\.svg$/i;
+
+/** Display name for a file (last path segment, sidecar/canvas extension stripped). */
+export function baseName(p) {
+  const s = (String(p).split('/').pop() || String(p)).replace(ANNOT_RE, '').replace(META_RE, '');
+  return s.replace(/\.(tsx|html|css|svg|json)$/i, '');
+}
+
+/** Friendly label for a collapsed supporting file under a canvas. */
+export function supportLabel(p) {
+  if (META_RE.test(p)) return 'Layout & settings';
+  if (ANNOT_RE.test(p)) return 'Annotations';
+  return baseName(p);
+}
+
+export function stripDesignRel(p, designRel) {
+  const s = String(p).replace(/^\/+|\/+$/g, '');
+  const prefix = `${(designRel || '.design').replace(/^\/+|\/+$/g, '')}/`;
+  return s.startsWith(prefix) ? s.slice(prefix.length) : s;
+}
+
+/** Mirror api.ts `fileSlug`: repo-relative canvas path → annotation slug, so the
+ *  slug-named `<slug>.annotations.svg` (which is NOT a same-stem sibling) can be
+ *  attached to its parent canvas. */
+export function canvasSlug(p, designRel) {
+  return stripDesignRel(p, designRel)
+    .replace(/\//g, '-')
+    .replace(/\s+/g, '_')
+    .replace(CANVAS_RE, '')
+    .replace(/^\.+/, '')
+    .toLowerCase();
+}
+
+/**
+ * Group changed files into canvas "units" — a parent canvas + its supporting
+ * sidecars. Files with no parent canvas in the changeset become standalone
+ * "other" units (config, DS tokens, an orphan sidecar).
+ *
+ * @param {{path: string, status: string}[]} files
+ * @param {string} designRel
+ * @returns {{ canvasUnits: Unit[], otherUnits: Unit[] }}
+ *   where Unit = { key, kind: 'canvas'|'other', primary, supporting: file[] }
+ */
+export function buildUnits(files, designRel) {
+  const canvases = files.filter((f) => CANVAS_RE.test(f.path));
+  const canvasByBase = new Map(); // base path (no ext) → canvas file
+  const canvasBySlug = new Map(); // annotation slug → canvas file
+  for (const c of canvases) {
+    canvasByBase.set(c.path.replace(CANVAS_RE, ''), c);
+    canvasBySlug.set(canvasSlug(c.path, designRel), c);
+  }
+  const supporting = new Map(); // canvas.path → sidecar[]
+  const consumed = new Set(); // sidecar paths attached to a canvas
+  const attach = (canvas, f) => {
+    const arr = supporting.get(canvas.path);
+    if (arr) arr.push(f);
+    else supporting.set(canvas.path, [f]);
+    consumed.add(f.path);
+  };
+  for (const f of files) {
+    if (META_RE.test(f.path)) {
+      const c = canvasByBase.get(f.path.replace(META_RE, ''));
+      if (c) attach(c, f);
+    } else if (ANNOT_RE.test(f.path)) {
+      const c = canvasBySlug.get(stripDesignRel(f.path, designRel).replace(ANNOT_RE, '').toLowerCase());
+      if (c) attach(c, f);
+    }
+  }
+  const byName = (a, b) => baseName(a.primary.path).localeCompare(baseName(b.primary.path));
+  const canvasUnits = canvases
+    .map((c) => ({ key: c.path, kind: 'canvas', primary: c, supporting: supporting.get(c.path) ?? [] }))
+    .sort(byName);
+  const otherUnits = files
+    .filter((f) => !CANVAS_RE.test(f.path) && !consumed.has(f.path))
+    .map((f) => ({ key: f.path, kind: 'other', primary: f, supporting: [] }))
+    .sort(byName);
+  return { canvasUnits, otherUnits };
+}

package/apps/studio/client/styles/0-reset.css

@@ -11,6 +11,10 @@ html, body {
   line-height: 1.45;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  /* WebKit (Safari + WKWebView) text inflation can re-grow text that the canvas
+     scales down during zoom-out, undoing the shrink. Pin it off. No-op on Blink. */
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
 }
 
 button { font: inherit; }