Merge remote-tracking branch 'origin/main' into tuba-2

The collapsed tool group now reads "N tool calls · Label 'arg'" so the
operator sees the current command at a glance. While a turn is active,
the most recent agent text stays outside the group as visible narration.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

.claude/settings.local.json

@@ -12,7 +12,14 @@
       "Bash(npm test:*)",
       "Bash(cargo check:*)",
       "Bash(cargo clippy:*)",
-      "Bash(cargo test:*)"
+      "Bash(cargo test:*)",
+      "Bash(source:*)",
+      "Bash(git remote get-url:*)",
+      "Bash(git push:*)",
+      "Bash(git checkout:*)",
+      "Bash(git -C /home/naps62/tea/maestro merge grazioso-2 --no-edit)",
+      "Bash(git -C /home/naps62/tea/maestro push)",
+      "Bash(curl:*)"
     ]
   }
 }

.gitea/workflows/ci.yml

@@ -9,7 +9,7 @@ on:
 
 concurrency:
   group: ci-${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: ${{ github.ref != 'refs/heads/main' }}
+  cancel-in-progress: true
 
 env:
   CARGO_TERM_COLOR: always

crates/maestro-daemon/src/session.rs

@@ -2916,17 +2916,16 @@ async fn mark_session_dead_with_worktree_settlement(
                 // Release anyone attached; the scrollback survives for a later
                 // attach.
                 record.bridge.seal();
-                let session = record.session.clone();
                 let worktree = record
                     .worktree_base_repo
                     .clone()
                     .zip(record.worktree_path.clone());
-                Some((session, worktree))
+                Some(worktree)
             }
             _ => None,
         }
     };
-    let Some((mut session, worktree)) = flipped else {
+    let Some(worktree) = flipped else {
         return false;
     };
     let stream = inner
@@ -2943,9 +2942,6 @@ async fn mark_session_dead_with_worktree_settlement(
     if settle_worktree {
         if let Some(wt) = &worktree {
             if settle_worktree_on_exit(inner, id, wt).await {
-                // The tree is settled (removed); a stale "in the way" would
-                // describe something the session no longer holds.
-                session.blocked_work = None;
                 let mut sessions = inner.sessions.lock().await;
                 if let Some(record) = sessions.get_mut(&id) {
                     record.session.worktree = None;
@@ -2957,13 +2953,17 @@ async fn mark_session_dead_with_worktree_settlement(
         }
     }
     // Settle has now been applied or refused either way (#115): from here on
-    // its outcomes are safe to observe.
-    {
+    // its outcomes are safe to observe. Re-read the session from the record
+    // so the sidecar write includes any updates (e.g. a haiku rename) that
+    // landed between the initial clone and now.
+    let session = {
         let mut sessions = inner.sessions.lock().await;
-        if let Some(record) = sessions.get_mut(&id) {
-            record.settled = true;
-        }
-    }
+        let Some(record) = sessions.get_mut(&id) else {
+            return false;
+        };
+        record.settled = true;
+        record.session.clone()
+    };
 
     let _ = inner.sidecar.write(&session);
     let _ = inner.events.send(CatalogEvent::SessionUpdated { session });

crates/maestro-daemon/tests/autoname.rs

@@ -11,14 +11,14 @@ use common::TmuxFixture;
 use maestro_daemon::sidecar::SidecarStore;
 use maestro_daemon::worktree::WorktreeManager;
 use maestro_daemon::SessionManager;
-use maestro_protocol::{display, CatalogEvent, CreateSessionRequest, NameSource};
+use maestro_protocol::{display, CatalogEvent, CreateSessionRequest, NameSource, SessionStatus};
 use tempfile::TempDir;
 use uuid::Uuid;
 
 struct Fixture {
     manager: SessionManager,
     sidecar: SidecarStore,
-    _tmux: TmuxFixture,
+    tmux: TmuxFixture,
     _state_dir: TempDir,
 }
 
@@ -35,7 +35,7 @@ fn fixture() -> Fixture {
     Fixture {
         manager,
         sidecar,
-        _tmux: tmux,
+        tmux,
         _state_dir: state_dir,
     }
 }
@@ -171,3 +171,37 @@ async fn a_blank_name_changes_nothing() {
     let live = fx.sidecar.read(id).unwrap().unwrap();
     assert_eq!(display::name_source(&live), NameSource::Generated);
 }
+
+/// A session that dies naturally (liveness watcher marks it dead) must not
+/// overwrite a haiku rename that landed before the death. Regression test for
+/// the stale-clone sidecar write in `mark_session_dead`.
+#[tokio::test]
+async fn session_death_preserves_the_haiku_name() {
+    let fx = fixture();
+    let id = spawn(&fx.manager, None).await;
+
+    fx.manager.claim_autoname(id).await.unwrap();
+    fx.manager.apply_autoname(id, "haiku-name").await.unwrap();
+
+    // Verify the sidecar has Haiku before the session dies.
+    let before = fx.sidecar.read(id).unwrap().unwrap();
+    assert_eq!(display::name_source(&before), NameSource::Haiku);
+
+    // Kill the tmux session directly so the liveness watcher picks it up.
+    fx.tmux.tmux.kill_session(id).expect("kill tmux directly");
+    fx.manager
+        .start_liveness_watcher(std::time::Duration::from_millis(25));
+
+    common::wait_for_async(std::time::Duration::from_secs(3), || async {
+        fx.manager.status(id).await == Some(SessionStatus::Dead)
+    })
+    .await;
+
+    let after = fx.sidecar.read(id).unwrap().unwrap();
+    assert_eq!(
+        display::name_source(&after),
+        NameSource::Haiku,
+        "mark_session_dead must not overwrite a haiku rename in the sidecar"
+    );
+    assert_eq!(display::custom_name(&after), Some("haiku-name"));
+}

crates/maestro-daemon/tests/embedded_bundle.rs

@@ -13,14 +13,14 @@ async fn embedded_index_is_real_spa_not_placeholder() {
     let html = String::from_utf8(body.to_vec()).unwrap();
 
     assert!(
-        html.contains(r#"id="app""#),
+        html.contains(r#"id="root""#),
         "served index is missing the SPA mount point; got:\n{html}"
     );
     assert!(
         !html.contains("maestro is running"),
         "served index is the placeholder, not the built bundle"
     );
-    // Stronger signal than `id="app"` (which appears in both source and built
+    // Stronger signal than `id="root"` (which appears in both source and built
     // HTML): the vite build rewrites the entry to a hashed `/assets/index-<hash>`
     // bundle, whereas the un-built source references `/src/main.ts`. This catches
     // both an empty/placeholder embed and the staleness case.

crates/maestro-daemon/tests/web_ui.rs

@@ -59,7 +59,7 @@ async fn root_serves_the_spa_shell() {
             .map(|v| v.starts_with("text/html")),
         Some(true)
     );
-    assert!(resp.text().await.unwrap().contains(r#"id="app""#));
+    assert!(resp.text().await.unwrap().contains(r#"id="root""#));
 }
 
 #[tokio::test]
@@ -69,7 +69,7 @@ async fn client_side_route_falls_back_to_the_shell() {
         .await
         .unwrap();
     assert_eq!(resp.status(), 200);
-    assert!(resp.text().await.unwrap().contains(r#"id="app""#));
+    assert!(resp.text().await.unwrap().contains(r#"id="root""#));
 }
 
 /// An unmatched API path must 404 rather than fall through to the SPA shell:

docs/STRUCTURED-VIEW.md

@@ -194,12 +194,15 @@ choices, not daemon ones.
   appear *between* tool rows in the same turn are absorbed into the group
   (intermediate narration); the last `AgentText` with no subsequent tool stays
   outside as the prominent final answer. While a turn is still active
-  (responding or thinking), the most recent intermediate `AgentText` or
-  `AgentThought` in the group is kept outside as visible narration — replaced
-  by the next text row when one arrives, and absorbed into the group when the
-  turn ends. The header still reads "N tool calls" (counting only tool rows).
-  Opening the group reveals tools and intermediate text in chronological
-  order, with the text rendered in a subdued style.
+  (responding or thinking), the most recent trailing text or thought row is
+  kept outside as visible narration — the operator always sees the agent's
+  latest reasoning without opening the group. It is replaced by the next text
+  row when one arrives, and absorbed into the group when the turn ends (unless
+  it is `AgentText`, which stays outside as the final answer). The collapsed
+  header reads "N tool calls · Label 'arg'" where the label and argument come
+  from the last tool row's `splitToolTitle` — the operator sees which command
+  is current at a glance. Opening the group reveals tools and intermediate
+  text in chronological order, with the text rendered in a subdued style.
 - The web client's user, agent, thought, tool-detail, and notice text blocks
   copy their complete source text when clicked or keyboard-activated.
 - The web client consumes `available_commands_update` notices as the live

web/src/components/kit/DesignKit.tsx

@@ -0,0 +1,382 @@
+// Dev-only design kit (#254), React port of the deleted kit.ts + kit.css.
+// Specimen page for the Tailwind token mapping (tailwind.config.ts ->
+// src/styles.css) so the visual system can be reviewed as a whole. Loads on
+// `?kit` (see index.tsx) and never ships to a production bundle.
+
+import { useState, type ReactNode } from "react";
+
+import { ActivityRail, STATE_WORDS } from "../sidebar/ActivityRail.js";
+import { SessionCard, type SessionCardProps } from "../sidebar/SessionCard.js";
+import { PaneTitle } from "../layout/PaneTitle.js";
+import { PALETTES, useTheme, type Palette } from "../../contexts/ThemeContext.js";
+import type { Session } from "../../types.js";
+
+/** The accent each palette lands on, read from styles.css — shown so all six
+ * are comparable at a glance without switching the live one one at a time. */
+const PALETTE_ACCENT: Record<Palette, string> = {
+  graphite: "oklch(0.92 0.005 256)",
+  "ice-cyan": "oklch(0.85 0.115 205)",
+  periwinkle: "oklch(0.75 0.125 275)",
+  "amber-phosphor": "oklch(0.85 0.16 85)",
+  ember: "oklch(0.78 0.16 40)",
+  orchid: "oklch(0.78 0.13 320)",
+};
+
+const COLOR_TOKENS = [
+  "--bg",
+  "--bg-grid",
+  "--surface",
+  "--surface-2",
+  "--surface-3",
+  "--border",
+  "--border-strong",
+  "--ink",
+  "--muted",
+  "--faint",
+  "--accent",
+  "--accent-strong",
+  "--accent-ink",
+  "--accent-tint",
+  "--accent-fill",
+  "--live",
+  "--danger",
+  "--danger-tint",
+  "--warn",
+  "--term-bg",
+] as const;
+
+// Tailwind's content scanner needs each utility to appear as a literal,
+// contiguous string in source — a template-built `w-${token}` is invisible
+// to it, so every scale below pairs the token label with its whole class name.
+const SPACING_TOKENS = [
+  { token: "sp-1", widthClass: "w-sp-1" },
+  { token: "sp-2", widthClass: "w-sp-2" },
+  { token: "sp-3", widthClass: "w-sp-3" },
+  { token: "sp-4", widthClass: "w-sp-4" },
+  { token: "sp-5", widthClass: "w-sp-5" },
+  { token: "sp-6", widthClass: "w-sp-6" },
+  { token: "sp-8", widthClass: "w-sp-8" },
+] as const;
+const RADIUS_TOKENS = [
+  { token: "r-1", radiusClass: "rounded-r-1" },
+  { token: "r-2", radiusClass: "rounded-r-2" },
+  { token: "r-3", radiusClass: "rounded-r-3" },
+  { token: "r-pill", radiusClass: "rounded-r-pill" },
+] as const;
+const FONT_SIZE_TOKENS = [
+  { token: "fs-11", sizeClass: "text-fs-11" },
+  { token: "fs-12", sizeClass: "text-fs-12" },
+  { token: "fs-13", sizeClass: "text-fs-13" },
+  { token: "fs-14", sizeClass: "text-fs-14" },
+  { token: "fs-15", sizeClass: "text-fs-15" },
+  { token: "fs-17", sizeClass: "text-fs-17" },
+  { token: "fs-20", sizeClass: "text-fs-20" },
+] as const;
+const Z_INDEX_TOKENS = [
+  { name: "z-sticky", value: 10 },
+  { name: "z-backdrop", value: 40 },
+  { name: "z-modal", value: 50 },
+  { name: "z-toast", value: 60 },
+] as const;
+
+function Section({
+  title,
+  note,
+  children,
+}: {
+  title: string;
+  note?: string;
+  children: ReactNode;
+}) {
+  return (
+    <section className="border-t border-border py-sp-6 first:border-t-0 first:pt-0">
+      <h2 className="text-fs-17 font-semibold text-ink">{title}</h2>
+      {note && <p className="mt-sp-1 max-w-[70ch] text-fs-12 text-muted">{note}</p>}
+      <div className="mt-sp-4 flex flex-wrap gap-sp-4">{children}</div>
+    </section>
+  );
+}
+
+function Specimen({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="flex flex-col items-start gap-sp-2">
+      <div className="flex min-h-[48px] items-center rounded-r-2 border border-border bg-surface p-sp-3">
+        {children}
+      </div>
+      <span className="font-mono text-fs-11 text-faint">{label}</span>
+    </div>
+  );
+}
+
+function fakeSession(overrides: Partial<Session>): Session {
+  return {
+    id: "00000000-0000-0000-0000-000000000000",
+    cwd: "/home/dev/maestro",
+    command: "claude",
+    env: {},
+    metadata: {},
+    status: "Running",
+    created_at: new Date().toISOString(),
+    activity_since: new Date(Date.now() - 4 * 60_000).toISOString(),
+    ...overrides,
+  };
+}
+
+const NOOP_CARD_HANDLERS: Omit<SessionCardProps, "session" | "depth" | "now" | "highlighted" | "active" | "open" | "previewing" | "renaming"> = {
+  onSelect: () => {},
+  onOpenMenu: () => {},
+  onSpawnSimilar: () => {},
+  onKill: () => {},
+  onRenameCommit: () => {},
+  onRenameCancel: () => {},
+};
+
+const CARD_SPECIMENS: Array<{ label: string; props: Omit<SessionCardProps, keyof typeof NOOP_CARD_HANDLERS> }> = [
+  {
+    label: "idle",
+    props: {
+      session: fakeSession({ command: "bash" }),
+      depth: 0,
+      now: Date.now(),
+      highlighted: false,
+      active: false,
+      open: false,
+      previewing: false,
+      renaming: false,
+    },
+  },
+  {
+    label: "active, focused",
+    props: {
+      session: fakeSession({ activity: "Active", command: "vite dev" }),
+      depth: 0,
+      now: Date.now(),
+      highlighted: false,
+      active: true,
+      open: true,
+      previewing: false,
+      renaming: false,
+    },
+  },
+  {
+    label: "awaiting-input",
+    props: {
+      session: fakeSession({ activity: "AwaitingInput", activity_since: new Date(Date.now() - 12_000).toISOString() }),
+      depth: 0,
+      now: Date.now(),
+      highlighted: false,
+      active: false,
+      open: false,
+      previewing: false,
+      renaming: false,
+    },
+  },
+  {
+    label: "error",
+    props: {
+      session: fakeSession({ activity: "Error", activity_detail: "tests failing", activity_since: new Date(Date.now() - 7_200_000).toISOString() }),
+      depth: 0,
+      now: Date.now(),
+      highlighted: false,
+      active: false,
+      open: false,
+      previewing: false,
+      renaming: false,
+    },
+  },
+  {
+    label: "previewing",
+    props: {
+      session: fakeSession({ command: "opencode" }),
+      depth: 0,
+      now: Date.now(),
+      highlighted: false,
+      active: false,
+      open: false,
+      previewing: true,
+      renaming: false,
+    },
+  },
+  {
+    label: "exited",
+    props: {
+      session: fakeSession({ status: "Dead", command: "btop" }),
+      depth: 0,
+      now: Date.now(),
+      highlighted: false,
+      active: false,
+      open: false,
+      previewing: false,
+      renaming: false,
+    },
+  },
+];
+
+const ACTIVITY_STATES = Object.keys(STATE_WORDS) as Array<keyof typeof STATE_WORDS>;
+
+export function DesignKit() {
+  const { theme, palette, toggleTheme, setPalette } = useTheme();
+  // "open" is deliberately display:none in the real app (.mv-pane's rule,
+  // styles.css) — a streaming pane already shows it's connected — so start on
+  // a state the kit page can actually show.
+  const [attachState, setAttachState] = useState<"connecting" | "open" | "closed">("connecting");
+
+  return (
+    // #root is a fixed-height, overflow-hidden flex column (main.css) built for
+    // the app shell's own internal scrolling — this page needs its own scroll
+    // container to match, or everything past the first viewport is clipped.
+    <div className="h-full overflow-y-auto bg-bg text-ink">
+      <header className="flex items-center justify-between border-b border-border px-sp-4 py-sp-3">
+        <h1 className="text-fs-20 font-semibold">
+          maestro<span className="text-accent">_</span> · design kit
+        </h1>
+        <div className="flex items-center gap-sp-2">
+          <button type="button" className="btn btn-ghost" onClick={toggleTheme}>
+            {theme === "dark" ? "☀ light" : "☾ dark"}
+          </button>
+        </div>
+      </header>
+
+      <main className="mx-auto max-w-5xl px-sp-4 py-sp-4">
+        <Section
+          title="Colour palettes"
+          note="6 palettes, picked via data-palette on <html> through ThemeContext. Switching one recolours every token below live."
+        >
+          {PALETTES.map((p) => (
+            <button
+              key={p}
+              type="button"
+              onClick={() => setPalette(p)}
+              className={`flex flex-col items-center gap-sp-1 rounded-r-2 border p-sp-2 ${
+                p === palette ? "border-accent" : "border-border"
+              }`}
+            >
+              <span
+                className="h-sp-6 w-sp-8 rounded-r-1"
+                style={{ background: PALETTE_ACCENT[p] }}
+              />
+              <span className="font-mono text-fs-11 text-muted">{p}</span>
+            </button>
+          ))}
+        </Section>
+
+        <Section title="Colour tokens" note="Current palette + theme, applied through var(--token).">
+          {COLOR_TOKENS.map((t) => (
+            <div key={t} className="flex flex-col items-start gap-sp-1">
+              <div
+                className="h-sp-8 w-sp-8 rounded-r-2 border border-border"
+                style={{ background: `var(${t})` }}
+              />
+              <span className="font-mono text-fs-11 text-faint">{t}</span>
+            </div>
+          ))}
+        </Section>
+
+        <Section title="Typography" note="fontSize -> var(--fs-N), from tailwind.config.ts.">
+          {FONT_SIZE_TOKENS.map(({ token, sizeClass }) => (
+            <Specimen key={token} label={token}>
+              <span className={`font-mono ${sizeClass}`}>Sessions</span>
+            </Specimen>
+          ))}
+        </Section>
+
+        <Section title="Spacing scale" note="spacing -> var(--sp-N).">
+          {SPACING_TOKENS.map(({ token, widthClass }) => (
+            <div key={token} className="flex flex-col items-start gap-sp-1">
+              <div className={`h-sp-3 bg-accent ${widthClass}`} />
+              <span className="font-mono text-fs-11 text-faint">{token}</span>
+            </div>
+          ))}
+        </Section>
+
+        <Section title="Border radii" note="borderRadius -> var(--r-N).">
+          {RADIUS_TOKENS.map(({ token, radiusClass }) => (
+            <div key={token} className="flex flex-col items-start gap-sp-1">
+              <div className={`h-sp-6 w-sp-8 border-2 border-accent ${radiusClass}`} />
+              <span className="font-mono text-fs-11 text-faint">{token}</span>
+            </div>
+          ))}
+        </Section>
+
+        <Section title="Z-index scale" note="zIndex -> var(--z-*).">
+          {Z_INDEX_TOKENS.map((z) => (
+            <div key={z.name} className="flex items-baseline gap-sp-2 font-mono text-fs-12">
+              <span className="text-muted">{z.name}</span>
+              <span className="text-ink">{z.value}</span>
+            </div>
+          ))}
+        </Section>
+
+        <Section title="Buttons" note="Terminal-native bracket chrome — .btn / .btn-primary / .btn-ghost / .btn-icon / .btn-danger.">
+          <Specimen label="btn">
+            <button type="button" className="btn">Cancel</button>
+          </Specimen>
+          <Specimen label="btn-primary">
+            <button type="button" className="btn btn-primary">+ Spawn</button>
+          </Specimen>
+          <Specimen label="btn-ghost">
+            <button type="button" className="btn btn-ghost">Dismiss</button>
+          </Specimen>
+          <Specimen label="btn-icon">
+            <button type="button" className="btn btn-icon">✕</button>
+          </Specimen>
+          <Specimen label="btn-danger">
+            <button type="button" className="btn btn-danger">Kill</button>
+          </Specimen>
+          <Specimen label="btn:disabled">
+            <button type="button" className="btn btn-primary" disabled>+ Spawn</button>
+          </Specimen>
+        </Section>
+
+        <Section title="Activity rail" note="ActivityRail.tsx — one state per session card, colour-coded and never colour-only (title/aria-label carry the word).">
+          {ACTIVITY_STATES.map((slug) => (
+            <Specimen key={slug} label={`${slug} · ${STATE_WORDS[slug]}`}>
+              <div className="relative h-[32px] w-[24px] overflow-hidden rounded-r-1 bg-surface-2">
+                <ActivityRail activity={slug} />
+              </div>
+            </Specimen>
+          ))}
+        </Section>
+
+        <Section title="Session cards" note="SessionCard.tsx, docs/SIDEBAR.md states.">
+          <div className="w-full max-w-sm divide-y divide-border rounded-r-2 border border-border bg-surface-2">
+            {CARD_SPECIMENS.map(({ label, props }) => (
+              <div key={label} className="relative">
+                <SessionCard {...props} {...NOOP_CARD_HANDLERS} />
+              </div>
+            ))}
+          </div>
+        </Section>
+
+        <Section title="Terminal chrome" note="attach-header + attach-body, as worn by TerminalPane/StructuredPane.">
+          <div className="w-full max-w-lg overflow-hidden rounded-r-2 border border-border">
+            <div className="attach-header">
+              <PaneTitle
+                sessionId="11111111-2222-3333-4444-555555555555"
+                session={fakeSession({ command: "claude" })}
+              />
+              <span className="flex-1" />
+              <button
+                type="button"
+                className="attach-state"
+                data-state={attachState}
+                onClick={() =>
+                  setAttachState((s) => (s === "open" ? "connecting" : s === "connecting" ? "closed" : "open"))
+                }
+                title="Click to cycle"
+              >
+                {attachState}
+              </button>
+              <button type="button" className="btn btn-icon disconnect" title="Disconnect">
+                ⏻
+              </button>
+            </div>
+            <div className="attach-body h-[120px] items-start">
+              <span className="font-mono text-fs-13 text-muted">$ pnpm test</span>
+            </div>
+          </div>
+        </Section>
+      </main>
+    </div>
+  );
+}

web/src/components/structured/StructuredPane.test.tsx

@@ -175,7 +175,7 @@ describe("tool rows and activity groups", () => {
       chunk("agent:2", "agent_text", "the answer"),
     ]);
 
-    const head = screen.getByText("2 tool calls").closest("button")!;
+    const head = screen.getByText(/^2 tool calls/).closest("button")!;
     expect(head.getAttribute("aria-expanded")).toBe("false");
     // The final answer stays outside the group; the intermediate text is in it.
     expect(document.querySelector(".st-tool-group")!.contains(screen.getByText("the answer"))).toBe(false);

web/src/components/structured/StructuredPane.tsx

@@ -354,6 +354,8 @@ export const StructuredPane = forwardRef<StructuredPaneHandle, StructuredPanePro
                     key={item.id}
                     id={item.id}
                     toolCount={item.group.toolCount}
+                    lastToolLabel={item.group.lastToolLabel}
+                    lastToolArg={item.group.lastToolArg}
                     expanded={expandedGroups.has(item.id)}
                     onExpandedChange={(expanded) => setGroupExpanded(item.id, expanded)}
                   >

web/src/components/structured/ToolGroup.tsx

@@ -1,19 +1,27 @@
 // A turn's collapsed activity block: two or more tool rows after the same
 // `User` row, plus the narration absorbed between them. The header counts tool
-// rows only (docs/STRUCTURED-VIEW.md); opening it reveals tools and text in
-// chronological order.
+// rows only (docs/STRUCTURED-VIEW.md) and shows the last/current tool label so
+// the operator sees activity at a glance without expanding. Opening it reveals
+// tools and text in chronological order.
 
 import type { ReactNode } from "react";
 
 export interface ToolGroupProps {
   id: string;
   toolCount: number;
+  /** Label of the last (or running) tool, e.g. "Execute". */
+  lastToolLabel: string;
+  /** Argument of the last tool, e.g. "`git status`". */
+  lastToolArg: string;
   expanded: boolean;
   onExpandedChange(expanded: boolean): void;
   children: ReactNode;
 }
 
-export function ToolGroup({ id, toolCount, expanded, onExpandedChange, children }: ToolGroupProps) {
+export function ToolGroup({ id, toolCount, lastToolLabel, lastToolArg, expanded, onExpandedChange, children }: ToolGroupProps) {
+  const summary = lastToolArg
+    ? `${toolCount} tool calls · ${lastToolLabel} \u2018${lastToolArg}\u2019`
+    : `${toolCount} tool calls`;
   return (
     <div className="st-tool-group" data-tool-group-id={id}>
       <button
@@ -25,7 +33,7 @@ export function ToolGroup({ id, toolCount, expanded, onExpandedChange, children
         <span className="st-tool-group-glyph" aria-hidden="true">
           ›
         </span>
-        <span className="st-tool-group-title">{`${toolCount} tool calls`}</span>
+        <span className="st-tool-group-title">{summary}</span>
       </button>
       <div
         className={

web/src/components/structured/model.test.ts

@@ -151,6 +151,33 @@ describe("activity grouping", () => {
     expect(ended.rows.map((r) => r.id)).toEqual(["tool:1", "tool:2", "thought:1", "thought:2"]);
   });
 
+  it("keeps the newest agent_text outside while the turn is still live", () => {
+    const rows = [
+      text("user:1", "user", "go"),
+      tool("tool:1"),
+      text("agent:1", "agent_text", "working on it"),
+      tool("tool:2"),
+      text("agent:2", "agent_text", "almost done"),
+    ];
+    const live = activityGroupsByTurn(rows, null, true).get("turn:user:1")!;
+    // "almost done" stays outside as visible narration while the turn is live
+    expect(live.rows.map((r) => r.id)).toEqual(["tool:1", "agent:1", "tool:2"]);
+    const ended = activityGroupsByTurn(rows, null, false).get("turn:user:1")!;
+    // Once ended, the final agent_text stays outside as the answer
+    expect(ended.rows.map((r) => r.id)).toEqual(["tool:1", "agent:1", "tool:2"]);
+  });
+
+  it("tracks the last tool's label and argument for the collapsed header", () => {
+    const rows = [
+      text("user:1", "user", "go"),
+      row("tool:1", "tool_call", { title: "Read(src/main.ts)", status: "completed" }),
+      row("tool:2", "tool_call", { title: "Execute(git status)", kind: "execute", status: "completed" }),
+    ];
+    const group = activityGroupsByTurn(rows, null, false).get("turn:user:1")!;
+    expect(group.lastToolLabel).toBe("Execute");
+    expect(group.lastToolArg).toBe("git status");
+  });
+
   it("absorbs a resolved approval, never the pending one", () => {
     const rows = [
       text("user:1", "user", "go"),

web/src/components/structured/model.ts

@@ -148,6 +148,9 @@ export interface ActivityGroup {
   toolCount: number;
   /** Tools plus absorbed intermediate text/approvals, in transcript order. */
   rows: TranscriptRow[];
+  /** `splitToolTitle` of the last tool row — the collapsed header shows it. */
+  lastToolLabel: string;
+  lastToolArg: string;
 }
 
 /**
@@ -158,6 +161,10 @@ export interface ActivityGroup {
  * the currently pending one) are absorbed the same way. The *last* agent text
  * with no subsequent tool stays standalone (the prominent final answer).
  *
+ * While a turn is still live, the most recent text or thought row trailing the
+ * group also stays outside as visible narration — the operator always sees the
+ * agent's latest reasoning without opening the group.
+ *
  * Returns groups keyed by `turn:<userId>`.
  */
 export function activityGroupsByTurn(
@@ -197,23 +204,36 @@ export function activityGroupsByTurn(
       continue;
     }
     if (row.kind === "tool_call" || row.kind === "tool_diff") {
-      const group = groups.get(currentGid) ?? { toolCount: count, rows: [] };
+      const group = groups.get(currentGid) ?? { toolCount: count, rows: [], lastToolLabel: "", lastToolArg: "" };
       // Flush any pending rows — a tool follows, so they're intermediate.
       group.rows.push(...pending);
       pending = [];
       group.rows.push(row);
+      const tool = (row.data ?? {}) as { title?: string; name?: string | null; kind?: string };
+      const { label, arg } = splitToolTitle(tool.title, tool.name ?? undefined, tool.kind);
+      group.lastToolLabel = label;
+      group.lastToolArg = arg;
       groups.set(currentGid, group);
     }
   }
-  // A final agent text is the answer, so it stays outside. Thought rows are
-  // working commentary, though: when a turn already has a disclosure they
-  // belong with its activity even if the next tool call has not arrived yet.
-  // While the turn is still live the most recent one stays outside as visible
-  // narration (docs/STRUCTURED-VIEW.md), and is absorbed when the turn ends.
+  // Trailing text/thought rows after the last tool in this turn.
+  // While the turn is still live, the newest one stays outside as visible
+  // narration — the operator always sees the agent's latest reasoning.
+  // A final agent_text (the "answer") stays outside regardless.
   const lastGroup = groups.get(currentGid);
-  if (lastGroup && pending.length > 0 && pending.every((row) => row.kind === "agent_thought")) {
-    const absorb = turnActive ? pending.slice(0, -1) : pending;
-    lastGroup.rows.push(...absorb);
+  if (lastGroup && pending.length > 0) {
+    const allThoughts = pending.every((row) => row.kind === "agent_thought");
+    if (allThoughts) {
+      // Pure thoughts: absorb all when done, keep the newest outside while live.
+      const absorb = turnActive ? pending.slice(0, -1) : pending;
+      lastGroup.rows.push(...absorb);
+    } else if (turnActive) {
+      // Mixed or agent_text trailing: keep the very last row outside while live,
+      // absorb the rest.
+      lastGroup.rows.push(...pending.slice(0, -1));
+    }
+    // When the turn ends with agent_text last, nothing extra is absorbed — the
+    // text stays outside as the final answer.
   }
 
   return groups;

web/src/components/structured/structured.css

@@ -1093,7 +1093,7 @@
   position: relative;
   width: 40px;
   padding: 0;
-  border-color: color-mix(in oklab, var(--danger) 35%, var(--border));
+  border-color: transparent;
   color: var(--danger);
 }
 
@@ -1287,6 +1287,7 @@
   border-color: transparent;
   background: transparent;
   color: var(--muted);
+  align-self: center;
 }
 
 .structured-attach:hover {

web/src/index.tsx

@@ -1,5 +1,6 @@
 import { createRoot } from "react-dom/client";
 import { App } from "./App.js";
+import { ThemeProvider } from "./contexts/ThemeContext.js";
 import "./main.css";
 
 const container = document.getElementById("root");
@@ -7,4 +8,18 @@ if (!container) {
   throw new Error("missing #root element");
 }
 
-createRoot(container).render(<App />);
+const root = createRoot(container);
+
+// Dev-only: `?kit` renders the standalone design kit instead of the app
+// shell (#254). Dynamic import keeps it out of the production bundle.
+if (import.meta.env.DEV && new URLSearchParams(location.search).has("kit")) {
+  void import("./components/kit/DesignKit.js").then(({ DesignKit }) => {
+    root.render(
+      <ThemeProvider>
+        <DesignKit />
+      </ThemeProvider>,
+    );
+  });
+} else {
+  root.render(<App />);
+}