@1agh/maude 0.38.0 → 0.39.0

package/apps/studio/api.ts

@@ -242,6 +242,9 @@ export interface Api {
   // Persist a clipboard-pasted ACP composer image → runtime `_chat/attachments/`,
   // returns an absolute path (Phase 31 follow-up — POST /_api/acp/attachment).
   saveChatAttachment(bytes: Uint8Array): Promise<SaveAssetResult>;
+  // Resolve a content-addressed attachment name (`<sha8>.<ext>`) to its absolute
+  // path, or null (GET /_api/acp/attachment — the read side of the pair above).
+  resolveChatAttachment(name: unknown): Promise<string | null>;
   // Create a blank brief board from the browser (Phase 22 — POST /_api/canvas)
   createCanvas(input: {
     name?: unknown;
@@ -1081,6 +1084,23 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
     return { ok: true, path: fileAbs };
   }
 
+  // Read side of saveChatAttachment — resolve a content-addressed attachment
+  // name back to its absolute path under `_chat/attachments/`, or null. The
+  // name is the ONLY input and must match our own `<sha8>.<ext>` shape, so
+  // traversal is impossible by construction; the resolve() assert mirrors the
+  // write side's containment backstop. MAIN-ORIGIN ONLY at the route layer
+  // (the untrusted canvas origin never reaches the serving route).
+  async function resolveChatAttachment(name: unknown): Promise<string | null> {
+    if (typeof name !== 'string' || !/^[0-9a-f]{8}\.(?:png|jpe?g|gif|webp)$/.test(name)) {
+      return null;
+    }
+    const dir = path.join(paths.designRoot, '_chat', 'attachments');
+    const fileAbs = path.join(dir, name);
+    if (path.resolve(fileAbs) !== path.join(path.resolve(dir), name)) return null;
+    if (!(await Bun.file(fileAbs).exists())) return null;
+    return fileAbs;
+  }
+
   // Phase 22 — create a blank brief board from the browser file tree. Wired ONLY
   // on the main origin (server.ts startMainServer); the segregated canvas origin
   // (DDR-054) never exposes this — an untrusted canvas iframe must not be able to
@@ -1994,6 +2014,7 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
     saveAnnotations,
     saveAsset,
     saveChatAttachment,
+    resolveChatAttachment,
     createCanvas,
     deleteCanvas,
     editCss,

package/apps/studio/bin/_ensure-browser.mjs

@@ -292,7 +292,18 @@ export async function resolveBrowser({ download = true } = {}) {
 }
 
 // CLI entry — only when invoked directly (not when imported by readiness.ts).
-if (process.argv[1] && import.meta.url === pathToFileURL(process.argv[1]).href) {
+// `import.meta.main` is the reliable "am I the entry module?" flag under `bun
+// --compile`: the argv/url string compare below FALSELY matched inside the
+// standalone binary (embedded modules resolve to /$bunfs/root while argv[1] is
+// the binary path), so this block fired on plain import and killed the server
+// with a stray browser-path print + process.exit before Bun.serve ever ran —
+// the v0.38.0 "Starting…" hang (DDR-045-class compiled-path divergence). Bun
+// sets import.meta.main=false for imported modules; Node <24 leaves it
+// undefined, so fall back to the argv compare for the `node`-fallback CLI path
+// in ensure-browser.sh (a non-compiled process where that compare is correct).
+const runDirectly =
+  import.meta.main ?? (process.argv[1] && import.meta.url === pathToFileURL(process.argv[1]).href);
+if (runDirectly) {
   const result = await resolveBrowser({ download: !NO_DOWNLOAD });
   if (JSON_OUT) {
     process.stdout.write(

package/apps/studio/client/app.jsx

@@ -8210,6 +8210,7 @@ function App() {
                   : null
               }
               selected={selected}
+              designRel={(cfg?.designRel || cfg?.designRoot || '.design').replace(/^\/+|\/+$/g, '')}
               width={rpSize.w}
               resizing={dragSide === 'rp'}
               onClose={() => setAssistantOpen(false)}

package/apps/studio/client/panels/ChatPanel.jsx

@@ -10,7 +10,7 @@
 //
 // Native-app only — app.jsx mounts this gated on isNativeApp().
 
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 
 import {
   AssistantRuntimeProvider,
@@ -23,7 +23,14 @@ import {
   useThread,
 } from '@assistant-ui/react';
 
-import { activityLabel, createAcpConnection, makeAcpAdapter } from './acp-runtime.js';
+import {
+  activityLabel,
+  attachmentName,
+  createAcpConnection,
+  designImageRefs,
+  extractAttachmentRefs,
+  makeAcpAdapter,
+} from './acp-runtime.js';
 import { buildChatContext } from './chat-context.js';
 import { Markdown } from './chat-markdown.jsx';
 import ReadinessList, { useReadiness } from './ReadinessList.jsx';
@@ -243,10 +250,23 @@ async function uploadChatImage(file) {
 }
 
 // ── message-part renderers ──
+// Assistant text: markdown, plus a thumbnail strip for any designRoot image
+// path the agent mentioned (e.g. "/design:screenshot → Saved to: .design/…png"
+// — DDR-145). The path stays visible in the text; the strip adds the preview.
 function ChatText({ text }) {
+  const media = useContext(ChatMediaContext);
+  const refs = designImageRefs(text, media?.designRel);
   return (
     <div className="chat-bubble">
       <Markdown text={text} />
+      {refs.length ? (
+        <div className="chat-thumbrow">
+          {refs.map((src) => {
+            const file = src.split('/').pop();
+            return <ChatThumb key={src} src={src} label={`Open ${file}`} caption={file} />;
+          })}
+        </div>
+      ) : null}
     </div>
   );
 }
@@ -291,10 +311,157 @@ function ChatToolCard({ toolName, args, result, isError }) {
   );
 }
 
+// ── chat media (image thumbnails + lightbox) ──
+// Per-thread context so deeply-nested bubbles reach the single lightbox + the
+// paste-attachments map without prop-drilling through assistant-ui's renderers.
+// `chipName(token)` resolves a live chip ([image-1]) to its content-addressed
+// name via the per-chat map; `openLightbox(src)` opens the one overlay.
+const ChatMediaContext = createContext(null);
+
+function attachmentSrc(name) {
+  return `/_api/acp/attachment?name=${encodeURIComponent(name)}`;
+}
+
+// Thumbnail — a real focusable button (Enter/Space open) wrapping the served
+// image; clicking opens the shared lightbox. `src` is always one of our own
+// same-origin serve lanes (attachment route or designRoot static).
+//
+// `caption` marks a REFERENCED path (an image an assistant message merely named,
+// DDR-145) as distinct from first-class user/agent media — it prints the
+// filename under the thumb so an injected assistant can't fully borrow the
+// feed's authority by rendering an arbitrary designRoot image as if it produced
+// it (attacker F2). Pasted-image thumbs pass no caption.
+function ChatThumb({ src, label = 'Open image', caption }) {
+  const media = useContext(ChatMediaContext);
+  const btn = (
+    <button
+      type="button"
+      className="chat-thumb-btn"
+      aria-label={label}
+      onClick={() => media?.openLightbox(src)}
+    >
+      <img className="chat-thumb" src={src} alt="" loading="lazy" />
+    </button>
+  );
+  if (!caption) return btn;
+  return (
+    <figure className="chat-thumb-fig">
+      {btn}
+      <figcaption className="chat-thumb-cap" title={caption}>
+        {caption}
+      </figcaption>
+    </figure>
+  );
+}
+
+// One live-bubble chip: an image chip whose upload has resolved renders as a
+// thumbnail; file/link chips (and a still-pending image upload) keep the text
+// badge. The map entry can fill AFTER the bubble first renders (paste + Enter
+// immediately), so poll briefly until it resolves — the adapter awaits the
+// upload before sending, so this settles within the same turn.
+function ChipOrThumb({ token, kind }) {
+  const media = useContext(ChatMediaContext);
+  const [name, setName] = useState(() => (kind === 'image' ? media?.chipName(token) : null));
+  useEffect(() => {
+    if (kind !== 'image' || name || !media) return undefined;
+    let tries = 0;
+    const id = setInterval(() => {
+      const n = media.chipName(token);
+      if (n) {
+        setName(n);
+        clearInterval(id);
+      } else if (++tries > 20) {
+        clearInterval(id);
+      }
+    }, 250);
+    return () => clearInterval(id);
+  }, [kind, name, media, token]);
+  if (!name) return <span className="chat-paste-chip">{token}</span>;
+  return <ChatThumb src={attachmentSrc(name)} label="Open pasted image" />;
+}
+
+// Single fixed overlay for the enlarged image — ESC / backdrop / × close,
+// role="dialog", focus moves to the close button on open and returns to the
+// invoking thumbnail on close (mirrors tour/overlay.jsx). The capture-phase
+// key listener runs only while open, so it never collides with the composer's
+// onKeyDownCapture.
+function ChatLightbox({ src, onClose }) {
+  const closeRef = useRef(null);
+  const prevFocus = useRef(null);
+  useEffect(() => {
+    prevFocus.current = document.activeElement;
+    closeRef.current?.focus();
+    function onKey(e) {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        e.stopPropagation();
+        onClose();
+      }
+    }
+    window.addEventListener('keydown', onKey, true);
+    return () => {
+      window.removeEventListener('keydown', onKey, true);
+      try {
+        prevFocus.current?.focus?.();
+      } catch {
+        /* trigger unmounted — non-fatal */
+      }
+    };
+  }, [onClose]);
+  return (
+    <div
+      className="chat-lightbox"
+      role="dialog"
+      aria-modal="true"
+      aria-label="Pasted image"
+      onClick={onClose}
+    >
+      <img src={src} alt="pasted image, enlarged" onClick={(e) => e.stopPropagation()} />
+      <button
+        type="button"
+        ref={closeRef}
+        className="chat-lightbox-close"
+        aria-label="Close image"
+        title="Close image"
+        onClick={onClose}
+      >
+        ×
+      </button>
+    </div>
+  );
+}
+
 // User bubble keeps the collapsed chips in the transcript (Claude Code shows the
-// placeholder in history too — the real path went to the agent, not the log).
+// placeholder in history too — the real path went to the agent, not the log),
+// EXCEPT images, which render as clickable thumbnails in a strip UNDER the text
+// (inline they'd break the message's reading flow). Two spellings resolve to the
+// same thumbnail: a live chip ([image-1] → per-chat map) and the reloaded
+// transcript's expanded `_chat/attachments/` path (never printed raw).
 function UserBubble({ text }) {
-  return <div className="chat-bubble">{chipNodes(text, 'ub')}</div>;
+  const segs = extractAttachmentRefs(text);
+  const inline = [];
+  const images = [];
+  segs.forEach((seg, i) => {
+    if (seg.type === 'text') inline.push(<span key={`t-${i}`}>{seg.text}</span>);
+    else if (seg.type === 'chip' && seg.kind !== 'image')
+      inline.push(
+        <span className="chat-paste-chip" key={`c-${i}`}>
+          {seg.token}
+        </span>
+      );
+    else if (seg.type === 'chip')
+      images.push(<ChipOrThumb key={`c-${i}`} token={seg.token} kind={seg.kind} />);
+    else
+      images.push(
+        <ChatThumb key={`a-${i}`} src={attachmentSrc(seg.name)} label="Open pasted image" />
+      );
+  });
+  return (
+    <div className="chat-bubble">
+      {inline}
+      {images.length ? <div className="chat-thumbrow">{images}</div> : null}
+    </div>
+  );
 }
 
 function UserMessage() {
@@ -904,6 +1071,7 @@ function ChatThread({
   effortRef,
   activeCanvas,
   selected,
+  designRel,
   model,
   setModel,
   effort,
@@ -948,6 +1116,17 @@ function ChatThread({
     [conn, chatId, modelRef, effortRef]
   );
   const runtime = useLocalRuntime(adapter, { initialMessages });
+  // Image thumbnails + lightbox — one overlay per thread; bubbles reach it (and
+  // the chip → attachment-name resolution) through ChatMediaContext.
+  const [lightboxSrc, setLightboxSrc] = useState(null);
+  const media = useMemo(
+    () => ({
+      chipName: (token) => attachmentName(attachmentsRef.current.map.get(token) || ''),
+      openLightbox: setLightboxSrc,
+      designRel,
+    }),
+    [designRel]
+  );
   const [activeTools, setActiveTools] = useState([]);
   useEffect(() => conn.onActivity(setActiveTools), [conn]);
   // Post-turn-end continuation (the tail the client used to drop — RCA F2).
@@ -956,6 +1135,7 @@ function ChatThread({
 
   return (
     <AssistantRuntimeProvider runtime={runtime}>
+      <ChatMediaContext.Provider value={media}>
       <div className="chat-panel" style={hidden ? { display: 'none' } : undefined}>
         <StatusRow tools={activeTools} />
         <ThreadPrimitive.Root className="chat-thread">
@@ -984,7 +1164,11 @@ function ChatThread({
             attachmentsRef={attachmentsRef}
           />
         </ThreadPrimitive.Root>
+        {lightboxSrc ? (
+          <ChatLightbox src={lightboxSrc} onClose={() => setLightboxSrc(null)} />
+        ) : null}
       </div>
+      </ChatMediaContext.Provider>
     </AssistantRuntimeProvider>
   );
 }
@@ -993,6 +1177,7 @@ function ChatThread({
 export default function ChatPanel({
   activeCanvas,
   selected,
+  designRel,
   width,
   resizing,
   onClose,
@@ -1344,6 +1529,7 @@ export default function ChatPanel({
                 effortRef={effortRef}
                 activeCanvas={activeCanvas}
                 selected={selected}
+                designRel={designRel}
                 model={model}
                 setModel={setModel}
                 effort={effort}

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;
+    }
   }
 }