@1agh/maude 0.36.1 → 0.38.0

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

@@ -17,13 +17,23 @@ import {
   ComposerPrimitive,
   MessagePrimitive,
   ThreadPrimitive,
+  useComposer,
+  useComposerRuntime,
   useLocalRuntime,
   useThread,
 } from '@assistant-ui/react';
 
-import { createAcpConnection, makeAcpAdapter } from './acp-runtime.js';
+import { activityLabel, createAcpConnection, makeAcpAdapter } from './acp-runtime.js';
+import { buildChatContext } from './chat-context.js';
 import { Markdown } from './chat-markdown.jsx';
 import ReadinessList, { useReadiness } from './ReadinessList.jsx';
+import {
+  buildCommandModel,
+  filterCommands,
+  matchLeadingCommand,
+  normalizeName,
+  STATIC_COMMANDS,
+} from './slash-commands.js';
 
 // ── inline icons (separate panel files carry their own, like GitPanel) ──
 const Spark = ({ size = 16 }) => (
@@ -66,6 +76,15 @@ const SendArrow = ({ size = 16 }) => (
     />
   </svg>
 );
+// Token swatches — reads as "design system"; used on the empty-state DS CTA.
+const Swatches = ({ size = 15 }) => (
+  <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true">
+    <rect x="2" y="2" width="5" height="5" rx="1" fill="currentColor" />
+    <rect x="9" y="2" width="5" height="5" rx="1" fill="currentColor" opacity="0.55" />
+    <rect x="2" y="9" width="5" height="5" rx="1" fill="currentColor" opacity="0.55" />
+    <rect x="9" y="9" width="5" height="5" rx="1" fill="currentColor" opacity="0.3" />
+  </svg>
+);
 
 // Persistent quick-action verbs (prefill the composer; never fire blind). The
 // one-time `/design:setup-ds` is offered contextually in the empty state, not here.
@@ -117,6 +136,112 @@ function prettyCanvas(path) {
   return file.replace(/\.(tsx|html)$/i, '');
 }
 
+// ── pasted-path / URL → inline chip (Claude-Code-style attachment badge) ──
+// When the whole clipboard is a single path or URL, we collapse it to a short
+// literal token ([image-1] / [file-1] / [link-1]) in the textarea and stash the
+// real value in a per-chat map. The token is the actual text the caret sees, so
+// the mirror can style it as a chip WITHOUT desyncing (chip text === token text),
+// and the adapter expands it back to the real path before sending to Claude.
+const CHIP_RE = /\[(?:image|file|link)-\d+\]/g;
+const IMAGE_EXT_RE = /\.(?:png|jpe?g|gif|webp|svg|avif|bmp|heic|heif|ico|tiff?)$/i;
+
+// Classify a raw clipboard string. Returns { kind, value } only when the trimmed
+// paste is a SINGLE path/URL token (no internal whitespace) — pasting prose that
+// merely contains a link is left as a normal paste. Paths with spaces fall through
+// (kept as plain text) in this first cut.
+function classifyPaste(raw) {
+  const s = (raw || '').trim();
+  if (!s || /\s/.test(s)) return null;
+  const isUrl = /^(?:https?|ftp):\/\/[^\s]+$/i.test(s);
+  const isWinPath = /^[a-zA-Z]:\\[^\s]+$/.test(s);
+  const isAnchoredPath = /^(?:~|\.{0,2})\/[^\s]+$/.test(s); // /a, ~/a, ./a, ../a
+  const looksLikeFile = s.includes('/') && /\.[a-z0-9]{1,8}$/i.test(s); // folder/file.ext
+  if (!isUrl && !isWinPath && !isAnchoredPath && !looksLikeFile) return null;
+  const bare = s.split(/[?#]/)[0]; // strip URL query/hash before the extension test
+  const kind = IMAGE_EXT_RE.test(bare) ? 'image' : isUrl ? 'link' : 'file';
+  return { kind, value: s };
+}
+
+// Next free index for a chip kind, scanning existing tokens so deletes renumber
+// back down (paste after clearing → [image-1] again, not [image-3]).
+function nextChipIndex(text, kind) {
+  const re = new RegExp(`\\[${kind}-(\\d+)\\]`, 'g');
+  let max = 0;
+  let m;
+  while ((m = re.exec(text || ''))) max = Math.max(max, parseInt(m[1], 10));
+  return max + 1;
+}
+
+// Tokenize a string, wrapping [image|file|link-N] tokens in chip spans. Preserves
+// every character verbatim (used both in the mirror overlay and the sent-message
+// bubble), so it is safe over the caret-critical mirror.
+function chipNodes(text, keyPrefix = 'chip') {
+  const nodes = [];
+  let last = 0;
+  let m;
+  let k = 0;
+  CHIP_RE.lastIndex = 0;
+  while ((m = CHIP_RE.exec(text))) {
+    if (m.index > last) nodes.push(text.slice(last, m.index));
+    nodes.push(
+      <span className="chat-paste-chip" key={`${keyPrefix}-${k++}`}>
+        {m[0]}
+      </span>
+    );
+    last = m.index + m[0].length;
+  }
+  if (last < text.length) nodes.push(text.slice(last));
+  return nodes;
+}
+
+// First image File on the clipboard — a raw screenshot / copied image arrives as
+// bytes with no path (files, or items via getAsFile on some engines).
+function clipboardImageFile(cd) {
+  const files = cd?.files ? Array.from(cd.files) : [];
+  const fromFiles = files.find((f) => f.type && f.type.startsWith('image/'));
+  if (fromFiles) return fromFiles;
+  const items = cd?.items ? Array.from(cd.items) : [];
+  for (const it of items) {
+    if (it.kind === 'file' && it.type && it.type.startsWith('image/')) {
+      const f = it.getAsFile();
+      if (f) return f;
+    }
+  }
+  return null;
+}
+
+// Insert `chip` at the textarea caret, keeping the undo stack + assistant-ui's
+// controlled value in sync. execCommand is a real user-edit (caret follows); the
+// manual splice is the fallback where execCommand('insertText') is unavailable.
+function insertChipAtCaret(ta, chip) {
+  if (document.execCommand && document.execCommand('insertText', false, chip)) return;
+  const start = ta.selectionStart ?? ta.value.length;
+  const end = ta.selectionEnd ?? start;
+  const next = ta.value.slice(0, start) + chip + ta.value.slice(end);
+  const setter = Object.getOwnPropertyDescriptor(
+    window.HTMLTextAreaElement.prototype,
+    'value'
+  )?.set;
+  setter?.call(ta, next);
+  ta.dispatchEvent(new Event('input', { bubbles: true }));
+  const pos = start + chip.length;
+  ta.setSelectionRange(pos, pos);
+}
+
+// POST raw image bytes to the dev-server, which writes them under the runtime
+// _chat/attachments/ and returns the absolute path Claude will Read on send.
+async function uploadChatImage(file) {
+  const buf = await file.arrayBuffer();
+  const res = await fetch('/_api/acp/attachment', {
+    method: 'POST',
+    headers: { 'Content-Type': file.type || 'application/octet-stream' },
+    body: buf,
+  });
+  if (!res.ok) return null;
+  const data = await res.json().catch(() => null);
+  return (data && data.path) || null;
+}
+
 // ── message-part renderers ──
 function ChatText({ text }) {
   return (
@@ -166,12 +291,16 @@ function ChatToolCard({ toolName, args, result, isError }) {
   );
 }
 
+// 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).
+function UserBubble({ text }) {
+  return <div className="chat-bubble">{chipNodes(text, 'ub')}</div>;
+}
+
 function UserMessage() {
   return (
     <div className="chat-msg chat-msg--user">
-      <MessagePrimitive.Parts
-        components={{ Text: ({ text }) => <div className="chat-bubble">{text}</div> }}
-      />
+      <MessagePrimitive.Parts components={{ Text: UserBubble }} />
     </div>
   );
 }
@@ -193,32 +322,97 @@ function AssistantMessage() {
 }
 
 // ── sub-sections ──
-function StatusRow() {
+// "Working" is TRUE while the prompt turn is in-flight OR any tool is still
+// running — so background subagents that outlive the main turn (the ACP adapter
+// settles at the main agent's `result` while they drain, claude-agent-acp #773)
+// keep the panel from looking idle. See RCA issue-acp-subagent-activity-invisible.
+function StatusRow({ tools = [] }) {
   const running = useThread((t) => t.isRunning);
+  const working = running || tools.length > 0;
   return (
     <div className="chat-statusrow">
       <span
-        className={`chat-status-dot ${running ? 'chat-status-dot--working' : 'chat-status-dot--ready'}`}
+        className={`chat-status-dot ${working ? 'chat-status-dot--working' : 'chat-status-dot--ready'}`}
       />
-      {running ? 'Working…' : 'Ready'}
+      {working ? 'Working…' : 'Ready'}
       <span className="chat-statusrow-sep">·</span>
       <span className="chat-statusrow-cc">Claude Code</span>
     </div>
   );
 }
 
+// Live m:ss since work started — a ticking counter reads as "actively working"
+// during a long, output-quiet subagent stretch (the exact case that used to look
+// hung). Resets whenever work stops.
+function useElapsed(active) {
+  const [, tick] = useState(0);
+  const startRef = useRef(null);
+  useEffect(() => {
+    if (!active) {
+      startRef.current = null;
+      return undefined;
+    }
+    startRef.current = Date.now();
+    const id = setInterval(() => tick((n) => n + 1), 1000);
+    return () => clearInterval(id);
+  }, [active]);
+  if (!active || startRef.current == null) return null;
+  const secs = Math.floor((Date.now() - startRef.current) / 1000);
+  if (secs < 1) return null;
+  return `${Math.floor(secs / 60)}:${String(secs % 60).padStart(2, '0')}`;
+}
+
 // Live "still working" indicator — sits at the BOTTOM of the feed (under the
-// latest Claude message) so it's clear the turn is still going. Shows the
-// in-flight tool (edit/read/shell/sub-agent) when there is one, else "Working…".
+// latest Claude message). Driven by turn-in-flight OR any running tool, so a
+// background subagent stays visible ("N subagents running · 0:42") instead of
+// the feed going quiet and looking dead.
 function ActivityBar({ tools }) {
   const running = useThread((t) => t.isRunning);
-  if (!running) return null;
-  const label =
-    tools.length === 1 ? tools[0].title : tools.length > 1 ? `${tools.length} tasks running` : 'Working…';
+  const working = running || tools.length > 0;
+  const elapsed = useElapsed(working);
+  if (!working) return null;
   return (
     <div className="chat-activity" role="status" aria-live="polite">
       <span className="chat-activity-spin" aria-hidden="true" />
-      <span className="chat-activity-text">{label}</span>
+      <span className="chat-activity-text">{activityLabel(tools)}</span>
+      {elapsed ? <span className="chat-activity-elapsed">{elapsed}</span> : null}
+    </div>
+  );
+}
+
+// Post-turn-end continuation. The ACP adapter settles the prompt at the main
+// agent's first `result` (claude-agent-acp #773) but keeps streaming background
+// work — subagent results, the consolidated report — AFTER the assistant-ui run
+// ended. Those frames can't join the completed message, so acp-runtime collects
+// them and we render them here as a live "continuation" bubble instead of
+// dropping them (the answer used to only appear on reload). See RCA
+// issue-acp-subagent-activity-invisible (facet F2). Cleared when the next turn
+// starts; the durable copy lives in the transcript.
+function ContinuationBubble({ parts }) {
+  if (!parts.length) return null;
+  return (
+    <div className="chat-msg chat-msg--assistant chat-msg--continued">
+      <div className="chat-msg-role">
+        <span className="chat-msg-spark">
+          <Spark size={13} />
+        </span>
+        Claude
+      </div>
+      {parts.map((p, i) =>
+        p.type === 'text' ? (
+          <ChatText key={i} text={p.text} />
+        ) : p.type === 'reasoning' ? (
+          <ChatReasoning key={i} text={p.text} />
+        ) : p.type === 'tool-call' ? (
+          <ChatToolCard
+            key={i}
+            toolName={p.toolName}
+            args={p.args}
+            result={p.result}
+            isError={p.isError}
+          />
+        ) : null
+      )}
     </div>
   );
 }
@@ -233,6 +427,19 @@ function ChatEmpty() {
       <div className="chat-empty-sub">
         Ask for a change, a critique, or a new screen — Claude runs on your own subscription.
       </div>
+      {/* One-time contextual CTA: bootstrap a design system. Prefills the guided
+          wizard (name is required, so we never fire it blind — the composer opens
+          ready for the slug). Canvas verbs live in the persistent quick-action row. */}
+      <ThreadPrimitive.Suggestion
+        prompt="/design:setup-ds "
+        send={false}
+        className="chat-empty-cta"
+      >
+        <span className="chat-empty-cta-ic">
+          <Swatches size={15} />
+        </span>
+        Create new design system
+      </ThreadPrimitive.Suggestion>
       <div className="chat-sugs">
         {SUGGESTIONS.map((s) => (
           <ThreadPrimitive.Suggestion key={s} prompt={s} send={false} className="chat-sug">
@@ -261,24 +468,289 @@ function QuickActions() {
   );
 }
 
-function Composer({ activeCanvas, model, setModel, effort, setEffort }) {
+// Merge the static bootstrap list with the live ACP catalogue (pushed over the
+// connection). Returns `{ all, existsSet }` — see slash-commands.js.
+function useSlashCommands(conn) {
+  const [live, setLive] = useState([]);
+  useEffect(() => conn.onCommands(setLive), [conn]);
+  return useMemo(() => buildCommandModel(STATIC_COMMANDS, live), [live]);
+}
+
+// Autocomplete menu — opens upward above the composer while a slash command is
+// being typed. Keyboard-driven from the composer (see Composer); mouse hover +
+// click supported. onMouseDown (not onClick) so picking beats the textarea blur.
+function CommandPopover({ items, activeIndex, onPick, onHover }) {
+  if (!items.length) return null;
+  return (
+    <div className="chat-cmd-menu" role="listbox" data-testid="chat-cmd-menu">
+      {items.map((c, i) => (
+        <button
+          key={c.name}
+          type="button"
+          role="option"
+          aria-selected={i === activeIndex}
+          data-testid={`chat-cmd-item-${c.name.replace(/[^a-z0-9]+/gi, '-')}`}
+          className={`chat-cmd-item${i === activeIndex ? ' is-active' : ''}`}
+          onMouseEnter={() => onHover(i)}
+          onMouseDown={(e) => {
+            e.preventDefault();
+            onPick(c);
+          }}
+        >
+          <span className={`chat-cmd-name chat-cmd-name--${c.group}`}>/{c.name}</span>
+          {c.description ? <span className="chat-cmd-desc">{c.description}</span> : null}
+          {c.argHint ? <span className="chat-cmd-arg">{c.argHint}</span> : null}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+// Inline command highlight via a mirror-overlay: a div behind a transparent-text
+// textarea renders the same text, wrapping the leading command token in a pill —
+// but ONLY when that token is a command that exists (the badge gate). The mirror
+// MUST match the textarea's box model exactly (see .chat-input / .chat-input-mirror
+// in 6-acp-chat.css) or the pill drifts off the text.
+function HighlightedInput({ existsSet, attachmentsRef, onAttachChange }) {
+  const text = useComposer((c) => c.text);
+  const mirrorRef = useRef(null);
+  const match = matchLeadingCommand(text);
+  const token = match ? normalizeName(match.token) : '';
+  const highlight = !!(match && token && existsSet.has(token));
+
+  // Build the mirror: an optional leading command pill, then the remainder with
+  // any [image|file|link-N] tokens wrapped as chips. Both wrappers preserve the
+  // exact glyphs so the transparent-text textarea's caret stays aligned.
+  let head = null;
+  let bodyStart = 0;
+  if (highlight) {
+    const leadingWs = text.match(/^\s*/)[0];
+    const cmd = `/${match.token}`;
+    head = (
+      <>
+        {leadingWs}
+        <span className="chat-cmd-pill">{cmd}</span>
+      </>
+    );
+    bodyStart = leadingWs.length + cmd.length;
+  }
+  const body = text.slice(bodyStart);
+  // Trailing newline needs a zero-width guard so the mirror keeps the last line.
+  const guard = text.endsWith('\n') ? '​' : '';
+
+  // Collapse a pasted attachment into a chip token at the caret and stash its real
+  // value in the map so the adapter expands it on send. Two sources:
+  //  1) a raw clipboard image (screenshot) — insert the chip synchronously, upload
+  //     the bytes in the background, and fill the map when the path comes back. The
+  //     in-flight promise is tracked so send can await it (no literal [image-N] if
+  //     the user hits Enter before the upload lands).
+  //  2) a lone path / URL as text — resolved synchronously.
+  const onPaste = useCallback(
+    (e) => {
+      const cd = e.clipboardData;
+      const ta = e.currentTarget;
+      const { map, pending } = attachmentsRef.current;
+
+      const img = clipboardImageFile(cd);
+      if (img) {
+        e.preventDefault();
+        const chip = `[image-${nextChipIndex(ta.value, 'image')}]`;
+        map.set(chip, null); // pending — expandPasteChips leaves it literal until resolved
+        insertChipAtCaret(ta, chip);
+        onAttachChange?.();
+        const p = uploadChatImage(img)
+          .then((path) => {
+            if (path) map.set(chip, path);
+            else map.delete(chip);
+          })
+          .catch(() => map.delete(chip))
+          .finally(() => {
+            pending.delete(p);
+            onAttachChange?.();
+          });
+        pending.add(p);
+        return;
+      }
+
+      const cls = classifyPaste(cd?.getData('text/plain'));
+      if (!cls) return; // ordinary paste — let assistant-ui handle it
+      e.preventDefault();
+      const chip = `[${cls.kind}-${nextChipIndex(ta.value, cls.kind)}]`;
+      map.set(chip, cls.value);
+      insertChipAtCaret(ta, chip);
+      onAttachChange?.();
+    },
+    [attachmentsRef, onAttachChange]
+  );
+
+  return (
+    <div className="chat-input-wrap">
+      <div className="chat-input-mirror" aria-hidden="true" ref={mirrorRef}>
+        {head}
+        {chipNodes(body)}
+        {guard}
+      </div>
+      <ComposerPrimitive.Input
+        className="chat-input chat-input--overlay"
+        submitMode="enter"
+        placeholder="Ask Claude to change this canvas…"
+        onPaste={onPaste}
+        onScroll={(e) => {
+          if (mirrorRef.current) mirrorRef.current.scrollTop = e.currentTarget.scrollTop;
+        }}
+      />
+    </div>
+  );
+}
+
+function Composer({
+  activeCanvas,
+  chatCtx,
+  onCtxDismiss,
+  model,
+  setModel,
+  effort,
+  setEffort,
+  conn,
+  chatId,
+  attachmentsRef,
+}) {
   const canvasName = prettyCanvas(activeCanvas);
+  const { all, existsSet } = useSlashCommands(conn);
+  const composerRuntime = useComposerRuntime();
+  const text = useComposer((c) => c.text);
+
+  const match = matchLeadingCommand(text);
+  const [dismissed, setDismissed] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const menuOpen = !!(match && match.typing) && !dismissed;
+
+  // Attachment reveal (security — DDR-140): a chip collapses a pasted path/URL to
+  // an opaque badge, and the real value is what gets sent to the auto-approving
+  // agent. So the composer MUST show what each chip will expand to BEFORE send —
+  // otherwise a value the user can't see (e.g. one an untrusted canvas seeded onto
+  // the clipboard) rides into the prompt invisibly. `attachTick` re-renders the
+  // strip when an async image upload fills its map entry.
+  const [attachTick, setAttachTick] = useState(0);
+  const bumpAttach = useCallback(() => setAttachTick((t) => t + 1), []);
+  const chipList = useMemo(() => {
+    const map = attachmentsRef.current.map;
+    const seen = new Set();
+    const out = [];
+    for (const m of text.matchAll(/\[(?:image|file|link)-\d+\]/g)) {
+      if (seen.has(m[0])) continue;
+      seen.add(m[0]);
+      out.push({ token: m[0], value: map.get(m[0]) ?? null });
+    }
+    return out;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [text, attachTick, attachmentsRef]);
+  const items = useMemo(
+    () => (menuOpen ? filterCommands(all, match.token) : []),
+    [menuOpen, all, match?.token]
+  );
+
+  // Reset selection + un-dismiss whenever the typed token changes.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => {
+    setActiveIndex(0);
+    setDismissed(false);
+  }, [match?.token]);
+
+  // Warm the adapter the first time the user starts a slash command, so the live
+  // catalogue arrives without a full prompt. Guarded to fire once per mount.
+  const warmedRef = useRef(false);
+  useEffect(() => {
+    if (menuOpen && !warmedRef.current) {
+      warmedRef.current = true;
+      conn.warm(chatId, model, effort);
+    }
+  }, [menuOpen, conn, chatId, model, effort]);
+
+  const pick = useCallback(
+    (cmd) => {
+      composerRuntime.setText(`/${cmd.name} `);
+      setDismissed(false);
+      setActiveIndex(0);
+    },
+    [composerRuntime]
+  );
+
+  const onKeyDownCapture = useCallback(
+    (e) => {
+      if (!menuOpen || !items.length) return;
+      // Swallow navigation keys before they reach the textarea (capture phase +
+      // stopPropagation) so the menu drives them, not the caret / submit.
+      const swallow = () => {
+        e.preventDefault();
+        e.stopPropagation();
+      };
+      if (e.key === 'ArrowDown') {
+        swallow();
+        setActiveIndex((i) => (i + 1) % items.length);
+      } else if (e.key === 'ArrowUp') {
+        swallow();
+        setActiveIndex((i) => (i - 1 + items.length) % items.length);
+      } else if (e.key === 'Enter' || e.key === 'Tab') {
+        swallow();
+        pick(items[Math.min(activeIndex, items.length - 1)]);
+      } else if (e.key === 'Escape') {
+        swallow();
+        setDismissed(true);
+      }
+    },
+    [menuOpen, items, activeIndex, pick]
+  );
+
   return (
     <div className="chat-composer">
       <ThreadPrimitive.If running={false}>
-        {canvasName ? (
+        {/* Context attachment chip (feature-acp-context-hardening) — the visible
+            reveal of the fenced <maude-context> block the send will prepend
+            (built from the SAME buildChatContext result, so chip ≡ payload).
+            Removable (DDR-140); a stale selection warns instead of hiding. */}
+        {chatCtx ? (
+          <div
+            className={`chat-ctx${chatCtx.stale ? ' chat-ctx--stale' : ''}`}
+            data-testid="chat-context-chip"
+          >
+            <span className="chat-ctx-label">
+              ◆ {chatCtx.chipLabel}
+              {chatCtx.stale ? ' — canvas changed since selection' : ''}
+            </span>
+            <button
+              type="button"
+              className="chat-ctx-x"
+              aria-label="Remove canvas context from this message"
+              title="Remove canvas context from this message"
+              onClick={onCtxDismiss}
+            >
+              ×
+            </button>
+          </div>
+        ) : canvasName ? (
           <div className="chat-ctx">
             Editing: <b>{canvasName}</b>
           </div>
         ) : null}
-        {/* One box: textarea on top, a bottom toolbar (model · effort · send). */}
-        <ComposerPrimitive.Root className="chat-box">
-          <ComposerPrimitive.Input
-            className="chat-input"
-            submitMode="ctrlEnter"
-            placeholder="Ask Claude to change this canvas…"
-          />
-          <div className="chat-toolbar">
+        {/* One box: textarea on top, a bottom toolbar (model · effort · send).
+            The anchor is relative so the command popover can float above it. */}
+        <div className="chat-cmd-anchor" onKeyDownCapture={onKeyDownCapture}>
+          {menuOpen ? (
+            <CommandPopover
+              items={items}
+              activeIndex={activeIndex}
+              onPick={pick}
+              onHover={setActiveIndex}
+            />
+          ) : null}
+          <ComposerPrimitive.Root className="chat-box">
+            <HighlightedInput
+              existsSet={existsSet}
+              attachmentsRef={attachmentsRef}
+              onAttachChange={bumpAttach}
+            />
+            <div className="chat-toolbar">
             <select
               className="chat-select"
               value={model}
@@ -308,9 +780,25 @@ function Composer({ activeCanvas, model, setModel, effort, setEffort }) {
               <SendArrow />
             </ComposerPrimitive.Send>
           </div>
-        </ComposerPrimitive.Root>
+          </ComposerPrimitive.Root>
+        </div>
+        {chipList.length ? (
+          <div className="chat-attach" role="list" aria-label="Attachments — expands on send">
+            {chipList.map((c) => (
+              <div className="chat-attach-row" role="listitem" key={c.token}>
+                <span className="chat-attach-tok">{c.token}</span>
+                <span className="chat-attach-arrow" aria-hidden="true">
+                  →
+                </span>
+                <span className="chat-attach-val" title={c.value || undefined}>
+                  {c.value || 'attaching…'}
+                </span>
+              </div>
+            ))}
+          </div>
+        ) : null}
         <div className="chat-foot">
-          <span>⌘↵ to send</span>
+          <span>↵ to send · ⇧↵ newline</span>
           <span className="chat-foot-spacer" />
           <span>your Claude subscription</span>
         </div>
@@ -415,45 +903,85 @@ function ChatThread({
   modelRef,
   effortRef,
   activeCanvas,
+  selected,
   model,
   setModel,
   effort,
   setEffort,
 }) {
+  // Paste attachments: `map` = chip token ([image-1]…) → real path/URL (null while
+  // an image upload is in flight); `pending` = the in-flight upload promises. The
+  // adapter awaits `pending` then expands `map` before sending; the composer writes
+  // both on paste.
+  const attachmentsRef = useRef({ map: new Map(), pending: new Set() });
+  // Canvas/selection context attachment (feature-acp-context-hardening). One
+  // buildChatContext result drives BOTH the composer chip and the frozen block
+  // the adapter prepends at send. The ref is what the adapter reads (freeze =
+  // read-once at send); the state re-renders the chip. Dismissing the chip
+  // (DDR-140 — the attachment is removable) suppresses the context until it
+  // CHANGES (new selection / canvas), which re-arms it.
+  const [chatCtx, setChatCtx] = useState(null);
+  const [ctxDismissed, setCtxDismissed] = useState(false);
+  const contextRef = useRef(null);
+  const ctxDismissedRef = useRef(false);
+  useEffect(() => {
+    const c = buildChatContext({ canvas: activeCanvas, selected });
+    setChatCtx(c);
+    contextRef.current = c;
+    setCtxDismissed(false);
+    ctxDismissedRef.current = false;
+  }, [activeCanvas, selected]);
+  const dismissCtx = useCallback(() => {
+    setCtxDismissed(true);
+    ctxDismissedRef.current = true;
+  }, []);
   const adapter = useMemo(
     () =>
       makeAcpAdapter(
         conn,
         () => chatId,
         () => modelRef.current || null,
-        () => effortRef.current
+        () => effortRef.current,
+        () => attachmentsRef.current,
+        () => (ctxDismissedRef.current ? null : contextRef.current)
       ),
     [conn, chatId, modelRef, effortRef]
   );
   const runtime = useLocalRuntime(adapter, { initialMessages });
   const [activeTools, setActiveTools] = useState([]);
   useEffect(() => conn.onActivity(setActiveTools), [conn]);
+  // Post-turn-end continuation (the tail the client used to drop — RCA F2).
+  const [bgParts, setBgParts] = useState([]);
+  useEffect(() => conn.onBackground(setBgParts), [conn]);
 
   return (
     <AssistantRuntimeProvider runtime={runtime}>
       <div className="chat-panel" style={hidden ? { display: 'none' } : undefined}>
-        <StatusRow />
+        <StatusRow tools={activeTools} />
         <ThreadPrimitive.Root className="chat-thread">
           <ThreadPrimitive.Viewport className="chat-feed" autoScroll>
             <ThreadPrimitive.Empty>
               <ChatEmpty />
             </ThreadPrimitive.Empty>
             <ThreadPrimitive.Messages components={{ UserMessage, AssistantMessage }} />
+            {/* Background work that outlived the turn — streamed here so it's not
+                dropped (RCA F2). */}
+            <ContinuationBubble parts={bgParts} />
             {/* "still working" indicator under the latest message */}
             <ActivityBar tools={activeTools} />
           </ThreadPrimitive.Viewport>
           <QuickActions />
           <Composer
             activeCanvas={activeCanvas}
+            chatCtx={ctxDismissed ? null : chatCtx}
+            onCtxDismiss={dismissCtx}
             model={model}
             setModel={setModel}
             effort={effort}
             setEffort={setEffort}
+            conn={conn}
+            chatId={chatId}
+            attachmentsRef={attachmentsRef}
           />
         </ThreadPrimitive.Root>
       </div>
@@ -464,6 +992,7 @@ function ChatThread({
 // ── panel root ──
 export default function ChatPanel({
   activeCanvas,
+  selected,
   width,
   resizing,
   onClose,
@@ -559,13 +1088,45 @@ export default function ChatPanel({
       if (existing) return existing;
       const conn = createAcpConnection();
       connsRef.current.set(chatId, conn);
-      conn.onBusy((busy) => {
+      // Background work (subagents) can outlive the main turn — the ACP adapter
+      // settles the prompt at the main agent's `result` while they drain
+      // (claude-agent-acp #773). Track live tool activity so the menubar
+      // badge/dot + the "finished" ping reflect TRUE quiescence, not the
+      // premature turn-end. (RCA issue-acp-subagent-activity-invisible.)
+      let bgActive = false; // a tool (e.g. a subagent) is still running
+      let busyNow = false; // the prompt turn itself is in flight
+      let deferredFinish = false; // turn ended while background work continued
+      const syncAggregate = () => {
         const wasAny = [...busyRef.current.values()].some(Boolean);
-        busyRef.current.set(chatId, busy);
+        busyRef.current.set(chatId, busyNow || bgActive);
         const nowAny = [...busyRef.current.values()].some(Boolean);
         if (wasAny !== nowAny) cbRef.current.onBusyChange?.(nowAny);
-        setBusyChats((prev) => ({ ...prev, [chatId]: busy })); // reactive dot
-        if (!busy) {
+      };
+      conn.onActivity((activeTools) => {
+        bgActive = activeTools.length > 0;
+        syncAggregate();
+        if (deferredFinish && !bgActive && !busyNow) {
+          deferredFinish = false;
+          setBusyChats((prev) => ({ ...prev, [chatId]: false }));
+          cbRef.current.onFinished?.();
+          refreshChats();
+        }
+      });
+      conn.onBusy((busy) => {
+        busyNow = busy;
+        syncAggregate();
+        if (busy) {
+          deferredFinish = false; // a new turn supersedes any pending drain ping
+          setBusyChats((prev) => ({ ...prev, [chatId]: true })); // reactive dot
+          return;
+        }
+        // Turn ended. If background work is still draining, keep the dot lit and
+        // hold the "finished" ping until the activity list empties (onActivity).
+        if (bgActive) {
+          deferredFinish = true;
+          refreshChats();
+        } else {
+          setBusyChats((prev) => ({ ...prev, [chatId]: false }));
           cbRef.current.onFinished?.();
           refreshChats();
         }
@@ -782,6 +1343,7 @@ export default function ChatPanel({
                 modelRef={modelRef}
                 effortRef={effortRef}
                 activeCanvas={activeCanvas}
+                selected={selected}
                 model={model}
                 setModel={setModel}
                 effort={effort}