@1agh/maude 0.56.0 → 0.58.0

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

@@ -123,6 +123,20 @@ export function applyUpdate(parts, toolIndex, u) {
 export function createAcpConnection() {
   let ws = null;
   let openPromise = null;
+  // ── The re-attach seam (Addendum Task 8) ──────────────────────────────────
+  // The chat this connection speaks for, and how far its history has been
+  // hydrated. Both are set by `bindChat()` BEFORE the socket opens, because the
+  // `attach` frame that carries them is sent from `onopen`.
+  //
+  // `hydratedSeq` is a transcript LINE NUMBER, not a message count — the server
+  // stamps every `update` with the line it occupies, so the two are directly
+  // comparable. Frames at or below it are things the panel already rendered
+  // from the HTTP hydration, and dropping them is what stops a reload from
+  // showing the last few seconds twice.
+  let attachedChatId = null;
+  let hydratedSeq = 0;
+  /** True when the server said we re-joined a turn that is STILL running. */
+  const attachedListeners = new Set();
   let turnHandler = null; // the in-flight run()'s frame sink
   const statusListeners = new Set();
   const status = { available: null, reason: undefined, ready: false };
@@ -240,6 +254,26 @@ export function createAcpConnection() {
   }
 
   function onFrame(frame) {
+    // ── The re-attach seam (Addendum Task 8) ────────────────────────────────
+    // Drop anything the panel already rendered from its HTTP hydration. The
+    // server replays the tail on `attach` and the live stream continues past
+    // it, so without this filter a reload mid-turn would show the overlap
+    // twice. Frames with no `seq` (every non-`update` frame) are unaffected.
+    if (typeof frame.seq === 'number') {
+      if (frame.seq <= hydratedSeq) return;
+      // Advance the marker as we consume, so a SECOND reconnect on the same
+      // page (a dropped socket, not a page reload) re-attaches from where the
+      // live stream actually got to rather than from the original hydration.
+      hydratedSeq = frame.seq;
+    }
+    if (frame.t === 'attached') {
+      for (const fn of attachedListeners) fn({ chat: frame.chat, running: !!frame.running });
+      // Re-joined a turn that is STILL running: restore the busy state, or the
+      // panel would look idle while the agent keeps working (and the composer
+      // would happily start a second, concurrent turn).
+      if (frame.running) setBusy(true);
+      return;
+    }
     if (frame.t === 'ready') {
       status.ready = true;
       status.available = frame.available;
@@ -274,7 +308,17 @@ export function createAcpConnection() {
     if (frame.t === 'permission-request') {
       pendingPermissions = [
         ...pendingPermissions,
-        { id: frame.id, toolCall: frame.toolCall, options: frame.options ?? [] },
+        {
+          id: frame.id,
+          toolCall: frame.toolCall,
+          options: frame.options ?? [],
+          // feature-acp-write-path-scope — present only when the server's
+          // write-path gate declined a write tool. `{ outOfProjectWrite,
+          // resolvedPaths, scopeRoot, reason }`; absent for every ordinary
+          // permission request, so PermissionPrompt's "outside the project"
+          // copy can't fire on one.
+          scope: frame.scope ?? null,
+        },
       ];
       emitPermissions();
       return;
@@ -329,7 +373,28 @@ export function createAcpConnection() {
       const scheme = location.protocol === 'https:' ? 'wss' : 'ws';
       const sock = new WebSocket(`${scheme}://${location.host}${WS_PATH}`);
       ws = sock;
-      sock.onopen = () => resolve();
+      sock.onopen = () => {
+        // Addendum Task 8 — bind to this chat's (possibly still running) bridge
+        // and close the re-attach seam in the same frame. `hydratedSeq` is the
+        // transcript line the panel hydrated over HTTP; the server replays
+        // exactly what came after it. A reload mid-turn therefore rejoins the
+        // live stream with no hole and no doubled text.
+        //
+        // Sent unconditionally, including for a brand-new chat (seq 0, nothing
+        // to replay) — the attach is what registers the socket as a sink, so
+        // skipping it for new chats would leave them detached until the first
+        // prompt.
+        if (attachedChatId) {
+          try {
+            sock.send(
+              JSON.stringify({ t: 'attach', chat: attachedChatId, seq: hydratedSeq })
+            );
+          } catch {
+            /* the frame handlers below surface a dead socket */
+          }
+        }
+        resolve();
+      };
       sock.onerror = () => reject(new Error('Could not reach the Claude bridge.'));
       sock.onclose = () => {
         ws = null;
@@ -423,13 +488,37 @@ export function createAcpConnection() {
      * "resolved" frame; the turn just continues). A response for an id that's
      * no longer pending (already timed out, or a duplicate click) is a no-op.
      */
+    /**
+     * Bind this connection to a chat and tell it how far the panel already
+     * hydrated that chat's transcript over HTTP (`seq` — a transcript LINE
+     * number, from the `X-Maude-Chat-Seq` response header).
+     *
+     * Must be called BEFORE the socket opens: the `attach` frame is sent from
+     * `onopen`, and it is what registers this socket as a sink for the chat's
+     * (possibly still running) server-side bridge. Calling it later still
+     * works for a subsequent reconnect, it just misses the current one.
+     */
+    bindChat(chatId, seq = 0) {
+      attachedChatId = chatId || null;
+      hydratedSeq = Number.isFinite(seq) && seq > 0 ? Math.floor(seq) : 0;
+    },
+
+    /** Subscribe to `{ chat, running }` — fires once per successful attach.
+     *  `running: true` means this socket re-joined a LIVE turn. */
+    onAttached(fn) {
+      attachedListeners.add(fn);
+      return () => attachedListeners.delete(fn);
+    },
+
     async respondPermission(id, decision) {
       if (!pendingPermissions.some((p) => p.id === id)) return;
       pendingPermissions = pendingPermissions.filter((p) => p.id !== id);
       emitPermissions();
       try {
         await ensureOpen();
-        ws?.send(JSON.stringify({ t: 'permission-response', id, decision }));
+        // `chat` is echoed back from the request frame — a bridge is keyed by
+        // chat now, not by socket, so the response has to name which one.
+        ws?.send(JSON.stringify({ t: 'permission-response', id, chat: attachedChatId, decision }));
       } catch {
         /* socket unavailable — the bridge's own timeout will deny this request */
       }
@@ -446,7 +535,9 @@ export function createAcpConnection() {
       emitElicitations();
       try {
         await ensureOpen();
-        ws?.send(JSON.stringify({ t: 'elicitation-response', id, ...response }));
+        ws?.send(
+          JSON.stringify({ t: 'elicitation-response', id, chat: attachedChatId, ...response })
+        );
       } catch {
         /* socket unavailable — the bridge's own timeout will decline this request */
       }
@@ -532,7 +623,7 @@ export function createAcpConnection() {
       };
       const cancel = () => {
         try {
-          ws?.send(JSON.stringify({ t: 'cancel' }));
+          ws?.send(JSON.stringify({ t: 'cancel', chat: attachedChatId || undefined }));
         } catch {
           /* socket already gone */
         }

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

@@ -1,8 +1,11 @@
-// 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.
+// Compact, XSS-safe markdown renderer for the ACP chat feed (and, since
+// feature-studio-file-preview, arbitrary repo .md files previewed in the
+// Files tree). Builds React nodes directly (never innerHTML) so neither
+// agent output nor untrusted file content can inject markup. Covers the
+// subset a coding agent actually emits plus GFM pipe tables (common in repo
+// docs): fenced code blocks, headings, bullet + numbered lists, pipe tables,
+// 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.
@@ -47,6 +50,33 @@ function inline(text) {
   return out;
 }
 
+// GFM pipe tables: a header row, a separator row (---/:---/---:/:---:  per
+// column), then zero or more data rows — all lines containing at least one
+// unescaped `|`.
+const TABLE_ROW_RE = /\|/;
+const TABLE_SEP_CELL_RE = /^:?-+:?$/;
+
+function splitTableRow(line) {
+  let l = line.trim();
+  if (l.startsWith('|')) l = l.slice(1);
+  if (l.endsWith('|')) l = l.slice(0, -1);
+  // Split on `|` not preceded by `\` (an escaped pipe stays literal in a cell).
+  return l.split(/(?<!\\)\|/).map((c) => c.trim().replace(/\\\|/g, '|'));
+}
+
+function tableSeparatorAligns(line) {
+  const cells = splitTableRow(line);
+  if (!cells.length || !cells.every((c) => TABLE_SEP_CELL_RE.test(c))) return null;
+  return cells.map((c) => {
+    const left = c.startsWith(':');
+    const right = c.endsWith(':');
+    if (left && right) return 'center';
+    if (right) return 'right';
+    if (left) return 'left';
+    return null;
+  });
+}
+
 export function Markdown({ text }) {
   const lines = String(text).split('\n');
   const blocks = [];
@@ -108,6 +138,47 @@ export function Markdown({ text }) {
       continue;
     }
 
+    // GFM pipe table: header row + a valid separator row immediately after.
+    if (TABLE_ROW_RE.test(line) && i + 1 < lines.length) {
+      const aligns = tableSeparatorAligns(lines[i + 1]);
+      if (aligns) {
+        const header = splitTableRow(line);
+        i += 2;
+        const rows = [];
+        while (i < lines.length && lines[i].trim() !== '' && TABLE_ROW_RE.test(lines[i])) {
+          rows.push(splitTableRow(lines[i]));
+          i++;
+        }
+        blocks.push(
+          <div key={key++} className="chat-md-table-wrap">
+            <table className="chat-md-table">
+              <thead>
+                <tr>
+                  {header.map((c, ci) => (
+                    <th key={ci} style={aligns[ci] ? { textAlign: aligns[ci] } : undefined}>
+                      {inline(c)}
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {rows.map((r, ri) => (
+                  <tr key={ri}>
+                    {header.map((_, ci) => (
+                      <td key={ci} style={aligns[ci] ? { textAlign: aligns[ci] } : undefined}>
+                        {r[ci] !== undefined ? inline(r[ci]) : ''}
+                      </td>
+                    ))}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        );
+        continue;
+      }
+    }
+
     // Blank line → paragraph separator.
     if (line.trim() === '') {
       i++;

package/apps/studio/client/panels/file-preview.jsx

@@ -0,0 +1,115 @@
+// feature-studio-file-preview — inline preview for a non-canvas tree row
+// (markdown / text / image / video / audio / font). Reuses the existing
+// static byte-serving route (no new server endpoint) and the chat panel's
+// hand-rolled Markdown renderer — no new dependency.
+
+import { useEffect, useState } from 'react';
+import { Markdown } from './chat-markdown.jsx';
+
+const TEXT_PREVIEW_MAX_BYTES = 2 * 1024 * 1024; // 2 MB — beyond this, just show a size note
+
+function basename(p) {
+  return p.split('/').pop() || p;
+}
+
+// Bidi-override control chars (U+202A-E, U+2066-9) let a crafted filename
+// visually disguise its own name/extension (the classic "invoice‮gnp.exe"
+// trick) wherever we render a raw path/name as text — strip them before
+// display. Doesn't affect matching (previewKind() regexes run on the
+// unstripped name), only what a human/AT reads.
+export function sanitizeDisplayText(s) {
+  return String(s).replace(/[\u202a-\u202e\u2066-\u2069]/g, '');
+}
+
+function useFetchedText(url, enabled) {
+  const [state, setState] = useState({ loading: true, error: null, text: '', tooLarge: false });
+  useEffect(() => {
+    if (!enabled) return;
+    let cancelled = false;
+    setState({ loading: true, error: null, text: '', tooLarge: false });
+    fetch(url)
+      .then(async (r) => {
+        if (!r.ok) throw new Error(`HTTP ${r.status}`);
+        const len = Number(r.headers.get('content-length') || 0);
+        if (len > TEXT_PREVIEW_MAX_BYTES) {
+          if (!cancelled) setState({ loading: false, error: null, text: '', tooLarge: len });
+          return;
+        }
+        const text = await r.text();
+        if (!cancelled) setState({ loading: false, error: null, text, tooLarge: false });
+      })
+      .catch((err) => {
+        if (!cancelled) setState({ loading: false, error: err.message || 'Failed to load', text: '', tooLarge: false });
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [url, enabled]);
+  return state;
+}
+
+function TextPreview({ url, name, as }) {
+  const { loading, error, text, tooLarge } = useFetchedText(url, true);
+  if (loading) return <div className="st-file-preview-status">Loading {name}…</div>;
+  if (error) return <div className="st-file-preview-status st-file-preview-error">Couldn't load {name}: {error}</div>;
+  if (tooLarge) {
+    return (
+      <div className="st-file-preview-status">
+        {name} is {Math.round(tooLarge / 1024)} KB — too large to preview inline.
+      </div>
+    );
+  }
+  if (as === 'markdown') return <div className="st-file-preview-markdown"><Markdown text={text} /></div>;
+  return <pre className="st-file-preview-text">{text}</pre>;
+}
+
+// CSS-string-literal escape for a value interpolated inside url("...") —
+// filenames can contain arbitrary characters (only "/" and NUL are forbidden
+// on disk), so an unescaped `"` or `\` could break out of the string and
+// inject arbitrary rules into the live app-shell stylesheet (not just the
+// sandboxed canvas iframe). family is already alnum/hyphen-only; this covers
+// the url() side of the same interpolation.
+function cssStringEscape(s) {
+  // CSS input-preprocessing (CSS Syntax Module Level 3 §3.3) normalizes CR,
+  // CRLF, AND FORM FEED (\f, U+000C) to a single LF before tokenizing, so an
+  // unescaped \f terminates a double-quoted string exactly like \r/\n does —
+  // strip all three, not just the two obvious ones.
+  return String(s).replace(/[\\"]/g, (c) => `\\${c}`).replace(/[\r\n\f]/g, '');
+}
+
+function FontPreview({ url, name }) {
+  const family = `st-preview-font-${name.replace(/[^a-z0-9]+/gi, '-')}`;
+  return (
+    <div className="st-file-preview-font">
+      <style>{`@font-face { font-family: "${family}"; src: url("${cssStringEscape(url)}"); }`}</style>
+      <div className="st-file-preview-font-specimen" style={{ fontFamily: family }}>
+        <div className="st-file-preview-font-lg">The quick brown fox</div>
+        <div className="st-file-preview-font-md">jumps over the lazy dog</div>
+        <div className="st-file-preview-font-sm">ABCDEFGHIJKLM abcdefghijklm 0123456789</div>
+      </div>
+    </div>
+  );
+}
+
+export function FilePreview({ path, kind }) {
+  if (!path || !kind) return null;
+  const url = `/${path}`;
+  const name = sanitizeDisplayText(basename(path));
+  return (
+    <div className="st-file-preview" data-kind={kind}>
+      <h2 className="st-file-preview-header">{sanitizeDisplayText(path)}</h2>
+      <div className="st-file-preview-body">
+        {kind === 'markdown' && <TextPreview url={url} name={name} as="markdown" />}
+        {kind === 'text' && <TextPreview url={url} name={name} as="text" />}
+        {kind === 'image' && (
+          <div className="st-file-preview-image-wrap">
+            <img src={url} alt={`Preview: ${name}`} className="st-file-preview-image" />
+          </div>
+        )}
+        {kind === 'video' && <video key={url} src={url} controls className="st-file-preview-media" />}
+        {kind === 'audio' && <audio key={url} src={url} controls className="st-file-preview-audio" />}
+        {kind === 'font' && <FontPreview url={url} name={name} />}
+      </div>
+    </div>
+  );
+}

package/apps/studio/client/styles/3-shell-maude.css

@@ -219,6 +219,10 @@
 .st-sb-changes.has-changes .st-sb-changes-dot { background: var(--status-warn); }
 .st-sb-changes.has-unpushed .st-sb-changes-dot { background: var(--accent); }
 
+/* The running release. Ambient, not a state to act on — so it sits at the same
+   weight as a slot label rather than at .val's foreground. No new tokens. */
+.st-sb-version .val { color: var(--fg-3); }
+
 /* ═══ Task 4 — body row · sidebar · tree · rail ═══════════════════════════════ */
 
 /* The body flex row replaces the legacy `.app` grid: rail | sidebar | main | rpanel. */
@@ -425,6 +429,47 @@
    incomplete; auto-hides once probeSetupReadiness() reports ready. */
 .st-empty-quick-setup { pointer-events: auto; margin-top: var(--space-2); }
 
+/* ═══ feature-studio-file-preview — non-canvas file preview overlay ════════
+ * Layered above the (still-mounted) canvas iframe / empty state so switching
+ * back to a canvas is instant. Shell-token only, no hardcoded colors. */
+.st-file-preview-overlay {
+  position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column;
+  background: var(--bg-1); overflow: auto;
+}
+.st-file-preview-overlay:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.st-file-preview { display: flex; flex-direction: column; min-height: 100%; }
+.st-file-preview-header {
+  flex: none; margin: 0; padding: var(--space-3) var(--space-4); font-family: var(--font-mono);
+  font-size: var(--type-xs); font-weight: 400; color: var(--fg-2); border-bottom: 1px solid var(--border-subtle);
+  background: var(--bg-0);
+}
+.st-file-preview-body { flex: 1; padding: var(--space-6); }
+.st-file-preview-status { color: var(--fg-3); font-size: var(--type-sm); }
+.st-file-preview-error { color: var(--status-error); }
+.st-file-preview-text {
+  font-family: var(--font-mono); font-size: var(--type-xs); line-height: 1.6; color: var(--fg-1);
+  white-space: pre-wrap; word-break: break-word; background: var(--bg-0);
+  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: var(--space-4);
+}
+.st-file-preview-markdown { max-width: 720px; color: var(--fg-1); }
+.st-file-preview-image-wrap {
+  display: flex; align-items: center; justify-content: center; min-height: 200px;
+  background-image: linear-gradient(45deg, var(--bg-2) 25%, transparent 25%),
+    linear-gradient(-45deg, var(--bg-2) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, var(--bg-2) 75%),
+    linear-gradient(-45deg, transparent 75%, var(--bg-2) 75%);
+  background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0;
+  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
+}
+.st-file-preview-image { max-width: 100%; max-height: 70vh; object-fit: contain; }
+.st-file-preview-media { max-width: 100%; max-height: 70vh; display: block; }
+.st-file-preview-audio { width: 100%; }
+.st-file-preview-font { display: flex; flex-direction: column; gap: var(--space-4); }
+.st-file-preview-font-specimen { color: var(--fg-0); }
+.st-file-preview-font-lg { font-size: 40px; line-height: 1.3; }
+.st-file-preview-font-md { font-size: 24px; line-height: 1.4; }
+.st-file-preview-font-sm { font-size: 14px; line-height: 1.6; color: var(--fg-2); word-break: break-all; }
+
 /* ═══ Task 6 — right panel (Inspector / Comments) + palette + toast ═══════════ */
 .st-rpanel {
   background: var(--bg-1); border-left: 1px solid var(--border-default);
@@ -2240,10 +2285,19 @@ body.st-scrubbing, body.st-scrubbing * { cursor: ew-resize !important; user-sele
 
 /* identity rail — sidebar footer */
 .gi-rail { position: relative; flex: 0 0 auto; margin-top: auto; padding: var(--space-2) var(--space-3); border-top: 1px solid var(--border-default); display: flex; flex-direction: column; gap: var(--space-2); }
-.gi-rail-hint { font-size: var(--type-xs); color: var(--fg-2); padding: var(--space-1) var(--space-1); }
+/* Truncation the code already assumed: CloudBar.jsx documents `title` as "the
+   full sentence on hover (the rail truncates)" — and this rule did not exist,
+   so a long hub-supplied project name wrapped and grew, pushing the rail into
+   adjacent chrome. Its sibling .gi-rail-err has carried the same three
+   properties all along. `anywhere` so a single unbreakable 60-char token
+   cannot overflow horizontally either. */
+.gi-rail-hint { font-size: var(--type-xs); color: var(--fg-2); padding: var(--space-1) var(--space-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: anywhere; }
 .gi-rail-signin { width: 100%; justify-content: center; }
 .gi-rail-confirm { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-2); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-2); }
-.gi-rail-confirm .gi-rail-hint { flex: 1 1 100%; padding: 0; }
+/* …but the deep-link confirm strip is a paragraph that MUST wrap — it explains
+   both sides of a consent decision, and one ellipsised line would hide half of
+   what the person is agreeing to. */
+.gi-rail-confirm .gi-rail-hint { flex: 1 1 100%; padding: 0; white-space: normal; overflow: visible; }
 .gi-rail-err { font-size: var(--type-xs); color: var(--status-error); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .gi-avatar { border-radius: var(--radius-pill); display: grid; place-items: center; font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--accent-fg); background: var(--accent); flex: 0 0 auto; }
 .gi-rail-account { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: var(--space-1) var(--space-2); border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--fg-0); cursor: pointer; text-align: left; }

package/apps/studio/client/styles/6-acp-chat.css

@@ -619,6 +619,34 @@
     border-radius: var(--radius-sm);
     overflow-x: auto;
   }
+  .chat-md-table-wrap {
+    overflow-x: auto;
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-sm);
+  }
+  .chat-md-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: var(--type-xs);
+  }
+  .chat-md-table th,
+  .chat-md-table td {
+    padding: var(--space-2) var(--space-3);
+    text-align: left;
+    border-bottom: 1px solid var(--border-subtle);
+    white-space: pre-wrap;
+  }
+  .chat-md-table th {
+    background: var(--bg-2);
+    font-weight: 600;
+    color: var(--fg-0);
+  }
+  .chat-md-table td {
+    color: var(--fg-1);
+  }
+  .chat-md-table tbody tr:last-child td {
+    border-bottom: none;
+  }
   .chat-code code {
     font-family: var(--font-mono);
     font-size: var(--type-xs);
@@ -880,6 +908,57 @@
     gap: var(--space-2);
   }
 
+  /* feature-acp-write-path-scope Task 4 — the out-of-project WRITE variant.
+     Distinguished from an ordinary permission card because the two ask
+     materially different questions: the ordinary one is "do you want this
+     tool to run", this one is "do you want a file written somewhere your
+     project's history stack cannot roll back". The danger tint is the whole
+     point — a card that looks identical to the routine one gets clicked
+     through at the same rate. */
+  .chat-perm--outside {
+    border-color: var(--danger, #d9534f);
+  }
+  .chat-perm--outside .chat-perm-hd b {
+    color: var(--danger, #d9534f);
+  }
+  .chat-perm-outside {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+  }
+  /* The resolved absolute paths. Monospaced + wrapping at any character: these
+     are the one string on the card the user actually has to READ, and a path
+     that overflows or ellipsizes is a path whose dangerous tail is hidden —
+     the same failure the .chat-perm-hd b clamp above exists to prevent, but
+     with the opposite fix, because here truncation is what would be unsafe. */
+  .chat-perm-paths {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+  }
+  .chat-perm-path {
+    padding: var(--space-1) var(--space-2);
+    border-radius: var(--radius-xs);
+    background: var(--bg-1);
+    color: var(--fg-0);
+    font-family: var(--font-mono);
+    font-size: var(--type-xs);
+    overflow-wrap: anywhere;
+  }
+  .chat-perm-scope,
+  .chat-perm-note {
+    margin: 0;
+    font-size: var(--type-xs);
+    color: var(--fg-3);
+  }
+  .chat-perm-root {
+    font-family: var(--font-mono);
+    overflow-wrap: anywhere;
+  }
+
   /* Form-elicitation card (feature-acp-ask-user-question — AskUserQuestion +
      generic MCP form input). Same slot + shape as .chat-perm, mutually
      exclusive with it — see the mount site in ChatPanel.jsx. */