@1agh/maude 0.38.1 → 0.39.1

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

@@ -390,6 +390,114 @@ function safeJson(value) {
   }
 }
 
+// ── chat-attachment refs (image thumbnails + lightbox) ──
+// A pasted image lives in the feed under two spellings: the LIVE bubble holds
+// the collapsed chip token ([image-1] — resolved via the per-chat attachments
+// map), while a RELOADED bubble (transcript) holds the already-expanded
+// absolute path under `_chat/attachments/`. Both funnel into the same
+// `<sha8>.<ext>` name the GET /_api/acp/attachment route serves. Pure — tested
+// in test/chat-attachments.test.ts.
+const ATTACHMENT_NAME = '[0-9a-f]{8}\\.(?:png|jpe?g|gif|webp)';
+
+/**
+ * The content-addressed basename when the string is a `_chat/attachments/` path
+ * (absolute or relative), else null. Non-attachment paths never match.
+ */
+export function attachmentName(absPathOrText) {
+  const m = new RegExp(`(?:^|/)_chat/attachments/(${ATTACHMENT_NAME})$`).exec(
+    String(absPathOrText || '').trim()
+  );
+  return m ? m[1] : null;
+}
+
+/**
+ * Split bubble text into ordered segments the renderer walks:
+ *   { type:'text', text }                — plain run, rendered verbatim
+ *   { type:'chip', token, kind }         — [image|file|link-N] (live bubble)
+ *   { type:'attachment', name, raw }     — expanded _chat/attachments path (reload)
+ */
+export function extractAttachmentRefs(text) {
+  const s = String(text || '');
+  const re = new RegExp(
+    `\\[(image|file|link)-\\d+\\]|\\S*/_chat/attachments/(${ATTACHMENT_NAME})`,
+    'g'
+  );
+  const segs = [];
+  let last = 0;
+  let m;
+  while ((m = re.exec(s))) {
+    if (m.index > last) segs.push({ type: 'text', text: s.slice(last, m.index) });
+    if (m[1]) segs.push({ type: 'chip', token: m[0], kind: m[1] });
+    else segs.push({ type: 'attachment', name: m[2], raw: m[0] });
+    last = m.index + m[0].length;
+  }
+  if (last < s.length) segs.push({ type: 'text', text: s.slice(last) });
+  return segs;
+}
+
+/**
+ * Image paths under the project's design root that an ASSISTANT message text
+ * references (e.g. `/design:screenshot` replying "Saved to: .design/_history/…/
+ * 001.png") → servable same-origin URLs for the thumbnail strip (DDR-145).
+ * Render-only: the main origin already serves designRoot statics with
+ * containment; nothing outside `<designRel>/` ever matches, SVG stays excluded
+ * (scriptable), and the per-message cap bounds a hostile/hallucinated wall of
+ * paths. Returns unique URLs in first-mention order.
+ *
+ * Containment is enforced client-side, NOT delegated to the server (DDR-145
+ * security follow-up): the assistant text is partly untrusted (tool output /
+ * indirect injection), so a token carrying a `..` dot-segment or ANY
+ * percent-encoding is rejected outright — otherwise `.design/../../etc/x.png`
+ * would collapse to `/etc/x.png` in the browser (and `..%2f` would decode
+ * server-side), silently widening the fetch surface from designRel to the whole
+ * repoRoot. The server's `safePathUnderRoot` stays the backstop; this makes the
+ * client guarantee match the docstring instead of leaning on it.
+ */
+export function designImageRefs(text, designRel = '.design', cap = 6) {
+  const rel = String(designRel || '.design').replace(/^\/+|\/+$/g, '');
+  if (!rel) return [];
+  const esc = rel.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  // A path token: optional abs/relative prefix, then `<rel>/…/<img>`. Boundaries
+  // tolerate the markdown the paths arrive wrapped in (backticks, quotes,
+  // parens) and shed trailing punctuation via the lookahead.
+  // Bounded quantifiers ({0,256}/{1,256}) keep the per-start scan constant-time —
+  // a long failing candidate (attacker-influenceable assistant text) can't drive
+  // superlinear backtracking. No real designRoot path segment run approaches 256.
+  const re = new RegExp(
+    `(?:^|[\\s\`'"(\\[])((?:[^\\s\`'"()\\[\\]]{0,256}/)?${esc}/[^\\s\`'"()\\[\\]]{1,256}?\\.(?:png|jpe?g|gif|webp))(?=[\\s\`'")\\]]|[.,:;!?]|$)`,
+    'gi'
+  );
+  const urls = [];
+  let m;
+  while ((m = re.exec(String(text || ''))) && urls.length < cap) {
+    const raw = m[1];
+    const at = raw.lastIndexOf(`${rel}/`);
+    if (at !== 0 && raw[at - 1] !== '/') continue; // `not-.design/x.png` must not match
+    const relPath = raw.slice(at);
+    const url = `/${relPath}`;
+    // Traversal guard — ALLOWLIST the canonical form, don't blocklist escape
+    // spellings (DDR-145 security follow-up). Two lanes the browser/server
+    // normalize differently:
+    //  1. Reject ANY percent-encoding outright — a plain designRoot path in
+    //     assistant prose never carries `%`, but `..%2f` survives the WHATWG
+    //     `URL` parse (pathname keeps `%2F` literal) and then the SERVER's
+    //     `safePathUnderRoot` decodes it out of designRel.
+    //  2. Parse exactly as the browser will (WHATWG collapses `..` dot-segments
+    //     AND rewrites `\`→`/` for http(s)) and require the result byte-identical
+    //     AND still under `/rel/` — closes `..`, `..\`, and mixed spellings.
+    if (relPath.includes('%')) continue;
+    let canon;
+    try {
+      canon = new URL(url, 'http://x').pathname;
+    } catch {
+      continue;
+    }
+    if (canon !== url || !canon.startsWith(`/${rel}/`)) continue;
+    if (!urls.includes(url)) urls.push(url);
+  }
+  return urls;
+}
+
 // Expand collapsed paste chips ([image-1]/[file-1]/[link-1]) back to the real
 // path/URL the user pasted, so Claude receives the actual value while the chat
 // bubble keeps the compact badge. Unknown tokens (e.g. a stale one the user typed

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

@@ -1002,15 +1002,137 @@
     flex-shrink: 0;
   }
 
+  /* Pasted-image thumbnail — a focusable button in the user bubble; clicking
+     opens the lightbox. Sized like a chip row, never dominating the bubble. */
+  .chat-thumb-btn {
+    appearance: none;
+    display: inline-block;
+    padding: 0;
+    margin: 2px 0;
+    border: 0;
+    background: transparent;
+    border-radius: var(--radius-sm);
+    cursor: zoom-in;
+    line-height: 0;
+    vertical-align: middle;
+  }
+  .chat-thumb {
+    display: block;
+    max-width: 180px;
+    max-height: 140px;
+    object-fit: cover;
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-sm);
+    transition: border-color var(--dur-fast, 120ms) ease;
+  }
+  .chat-thumb-btn:hover .chat-thumb {
+    border-color: var(--border-strong);
+  }
+  .chat-thumb-btn:focus-visible {
+    outline: none;
+  }
+  .chat-thumb-btn:focus-visible .chat-thumb {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px var(--accent-tint);
+  }
+
+  /* Thumbnail strip under an assistant bubble — every designRoot image path the
+     agent mentioned (DDR-145), previewed without leaving the chat. */
+  .chat-thumbrow {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+    margin-top: var(--space-2);
+  }
+  /* A REFERENCED image (assistant merely named the path) — captioned with its
+     filename so it reads as "a file that was referenced", not first-class agent
+     media (attacker F2, DDR-145). */
+  .chat-thumb-fig {
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    max-width: 180px;
+  }
+  .chat-thumb-cap {
+    font-family: var(--font-mono);
+    font-size: var(--type-xs);
+    color: var(--fg-3);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* Lightbox — single fixed overlay above the whole shell (ESC / backdrop / ×).
+     Scrim mixes the base background so it tracks light/dark themes. z sits above
+     the shell modal band (.gi-modal 9600) but below the tour/topmost layer
+     (10050+) — an enlarged image must never bury the guided tour. */
+  .chat-lightbox {
+    position: fixed;
+    inset: 0;
+    z-index: 9700;
+    display: grid;
+    place-items: center;
+    background: color-mix(in oklch, var(--bg-0) 80%, transparent);
+    animation: chat-lightbox-in 120ms ease;
+  }
+  .chat-lightbox img {
+    max-width: 90vw;
+    max-height: 90vh;
+    object-fit: contain;
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-sm);
+    background: var(--bg-1);
+    box-shadow: var(--shadow-lg);
+  }
+  .chat-lightbox-close {
+    position: absolute;
+    top: var(--space-4);
+    right: var(--space-4);
+    appearance: none;
+    width: 32px;
+    height: 32px;
+    display: grid;
+    place-items: center;
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-sm);
+    background: var(--bg-2);
+    color: var(--fg-1);
+    font-size: var(--type-base);
+    line-height: 1;
+    cursor: pointer;
+  }
+  .chat-lightbox-close:hover {
+    color: var(--fg-0);
+    background: var(--bg-3);
+  }
+  .chat-lightbox-close:focus-visible {
+    outline: none;
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px var(--accent-tint);
+  }
+  @keyframes chat-lightbox-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
   @media (prefers-reduced-motion: reduce) {
     .chat-status-dot--working,
     .chat-tool-dot--run,
     .chat-activity-spin,
     .st-assistant[data-busy='true'],
     .chat-dot--busy,
-    .chat-msg {
+    .chat-msg,
+    .chat-lightbox {
       animation: none;
     }
+    .chat-thumb {
+      transition: none;
+    }
   }
 }