From a7507441f9386f51b1246240ea0074ed79561994 Mon Sep 17 00:00:00 2001
From: Arach Tchoupani <arach@tchoupani.com>
Date: Sat, 6 Jun 2026 20:34:00 -0400
Subject: [PATCH 1/2] feat(web): add live tmux peek

Add a real tmux peek endpoint and inspector panel, widen terminal defaults, smooth live activity playback, and guard local agent snapshot reads when broker snapshots are missing messages.
---
 packages/runtime/src/local-agents.test.ts     |  37 +++
 packages/runtime/src/local-agents.ts          |  17 +-
 packages/web/client/app.css                   |   9 +
 .../client/components/AgentLiveActions.tsx    |  16 +-
 .../client/components/agent-live-actions.css  |  35 ++-
 packages/web/client/index.html                |  13 ++
 packages/web/client/lib/types.ts              |  12 +
 .../scout/inspector/AgentsInspector.tsx       |   5 +
 .../scout/inspector/ConversationInspector.tsx | 152 ++++++++++---
 .../web/client/scout/inspector/TmuxPeek.tsx   | 174 +++++++++++++++
 packages/web/client/scout/slots/ctx-panel.css | 127 ++++++++++-
 .../web/client/screens/TerminalScreen.tsx     |  11 +-
 .../create-openscout-web-server.test.ts       |  86 ++++++-
 .../web/server/create-openscout-web-server.ts | 211 ++++++++++++++++++
 14 files changed, 852 insertions(+), 53 deletions(-)
 create mode 100644 packages/web/client/scout/inspector/TmuxPeek.tsx

diff --git a/packages/runtime/src/local-agents.test.ts b/packages/runtime/src/local-agents.test.ts
index 31ddd17c..97729032 100644
--- a/packages/runtime/src/local-agents.test.ts
+++ b/packages/runtime/src/local-agents.test.ts
@@ -16,6 +16,7 @@ import {
   clearEndpointFailureMetadata,
   endpointStateAfterSuccessfulSessionWarmup,
   areHarnessBinariesAvailable,
+  brokerSnapshotMessages,
   normalizeClaudeRuntimeLaunchArgs,
   normalizeLocalAgentSystemPrompt,
   renderLocalAgentSystemPromptTemplate,
@@ -494,3 +495,39 @@ describe("local agent reply cleanup", () => {
     expect(cleaned).toBe("SHAPER_BROKER_OK");
   });
 });
+
+describe("local agent broker snapshots", () => {
+  test("treats missing or malformed broker snapshot messages as empty", () => {
+    expect(brokerSnapshotMessages(undefined)).toEqual([]);
+    expect(brokerSnapshotMessages({})).toEqual([]);
+    expect(brokerSnapshotMessages({ messages: null })).toEqual([]);
+    expect(brokerSnapshotMessages({ messages: [] })).toEqual([]);
+  });
+
+  test("filters malformed broker snapshot messages", () => {
+    expect(brokerSnapshotMessages({
+      messages: {
+        valid: {
+          actorId: "agent-1",
+          body: "ready",
+          createdAt: 123,
+        },
+        missingBody: {
+          actorId: "agent-2",
+          createdAt: 124,
+        },
+        badTimestamp: {
+          actorId: "agent-3",
+          body: "bad",
+          createdAt: "124",
+        },
+      },
+    })).toEqual([
+      {
+        actorId: "agent-1",
+        body: "ready",
+        createdAt: 123,
+      },
+    ]);
+  });
+});
diff --git a/packages/runtime/src/local-agents.ts b/packages/runtime/src/local-agents.ts
index 172eef27..a11d57a2 100644
--- a/packages/runtime/src/local-agents.ts
+++ b/packages/runtime/src/local-agents.ts
@@ -234,6 +234,21 @@ interface BrokerSnapshot {
   messages: Record<string, BrokerSnapshotMessage>;
 }
 
+function isBrokerSnapshotMessage(value: unknown): value is BrokerSnapshotMessage {
+  if (!value || typeof value !== "object") return false;
+  const candidate = value as Partial<BrokerSnapshotMessage>;
+  return typeof candidate.actorId === "string"
+    && typeof candidate.body === "string"
+    && typeof candidate.createdAt === "number";
+}
+
+export function brokerSnapshotMessages(value: unknown): BrokerSnapshotMessage[] {
+  if (!value || typeof value !== "object") return [];
+  const messages = (value as { messages?: unknown }).messages;
+  if (!messages || typeof messages !== "object" || Array.isArray(messages)) return [];
+  return Object.values(messages).filter(isBrokerSnapshotMessage);
+}
+
 const DEFAULT_LOCAL_AGENT_CAPABILITIES: AgentCapability[] = ["chat", "invoke", "deliver"];
 const DEFAULT_LOCAL_AGENT_HARNESS: AgentHarness = "claude";
 const DEFAULT_ONE_TIME_LOCAL_AGENT_CARD_TTL_MS = 24 * 60 * 60 * 1000;
@@ -2420,7 +2435,7 @@ async function readBrokerMessagesSince(sinceSeconds: number): Promise<BrokerSnap
   const snapshot = await requestScoutBrokerJson<BrokerSnapshot>(baseUrl, "/v1/snapshot", {
     socketPath: resolveBrokerSocketPathForBaseUrl(baseUrl),
   });
-  return Object.values(snapshot.messages)
+  return brokerSnapshotMessages(snapshot)
     .filter((message) => normalizeBrokerTimestamp(message.createdAt) >= sinceSeconds)
     .sort((lhs, rhs) => normalizeBrokerTimestamp(lhs.createdAt) - normalizeBrokerTimestamp(rhs.createdAt));
 }
diff --git a/packages/web/client/app.css b/packages/web/client/app.css
index 2f827be8..72af8254 100644
--- a/packages/web/client/app.css
+++ b/packages/web/client/app.css
@@ -165,6 +165,15 @@
 }
 
 * { box-sizing: border-box; margin: 0; }
+
+html,
+body,
+#root {
+  min-height: 100%;
+  background: var(--bg, #050605);
+  color: var(--ink, #f3f4ee);
+}
+
 body { margin: 0; }
 
 /* ── Content shell ── */
diff --git a/packages/web/client/components/AgentLiveActions.tsx b/packages/web/client/components/AgentLiveActions.tsx
index b320367e..7a8f2547 100644
--- a/packages/web/client/components/AgentLiveActions.tsx
+++ b/packages/web/client/components/AgentLiveActions.tsx
@@ -75,9 +75,12 @@ export function AgentLiveActions({
   const canObserveTerminal = agent.transport === "tmux" && Boolean(activeSessionId);
   const canTakeover = canObserveTerminal || Boolean(resolvedCatalog?.resumeCommand);
   const hasLiveTurn = Boolean(activeSessionId) || state === "working";
+  const isCompact = variant === "compact";
   const status = hasLiveTurn
     ? activeSessionId
-      ? `Live ${shortSession(activeSessionId)}`
+      ? isCompact
+        ? canObserveTerminal ? "Live terminal" : "Live trace"
+        : `Live ${shortSession(activeSessionId)}`
       : "Working"
     : state === "ready"
       ? "Ready"
@@ -87,7 +90,12 @@ export function AgentLiveActions({
     : agent.updatedAt
       ? timeAgo(agent.updatedAt)
       : null;
-  const observeLabel = canObserveTerminal ? "Observe terminal" : "Observe trace";
+  const observeLabel = canObserveTerminal
+    ? isCompact ? "Observe" : "Observe terminal"
+    : isCompact ? "Trace" : "Observe trace";
+  const observeTitle = canObserveTerminal
+    ? "Observe the live tmux terminal"
+    : "Open the web observe trace";
 
   const openTerminal = (mode: "observe" | "takeover") => {
     onNavigate?.();
@@ -143,8 +151,8 @@ export function AgentLiveActions({
           type="button"
           className="agent-live-actions-button agent-live-actions-button--primary"
           onClick={() => canObserveTerminal ? openTerminal("observe") : openTrace()}
-          title={canObserveTerminal ? "Observe the live tmux terminal" : "Open the web observe trace"}
-          aria-label={observeLabel}
+          title={observeTitle}
+          aria-label={observeTitle}
         >
           <Eye size={13} strokeWidth={1.9} aria-hidden="true" />
           <span>{observeLabel}</span>
diff --git a/packages/web/client/components/agent-live-actions.css b/packages/web/client/components/agent-live-actions.css
index d27bc599..cec2d0e1 100644
--- a/packages/web/client/components/agent-live-actions.css
+++ b/packages/web/client/components/agent-live-actions.css
@@ -16,16 +16,18 @@
 }
 
 .agent-live-actions--compact {
-  flex-direction: column;
-  align-items: stretch;
-  gap: var(--space-sm);
-  padding: var(--space-sm) 0 0;
+  gap: var(--space-xs);
+  padding: 0;
   border: 0;
-  border-top: 1px solid color-mix(in srgb, var(--ink) 5%, transparent);
   border-radius: 0;
   background: transparent;
 }
 
+.agent-live-actions--compact .agent-live-actions-status {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
 .agent-live-actions-status {
   display: flex;
   align-items: center;
@@ -126,18 +128,22 @@
 }
 
 .agent-live-actions--compact .agent-live-actions-buttons {
-  justify-content: flex-start;
+  flex: 0 0 auto;
+  flex-wrap: nowrap;
+  justify-content: flex-end;
+  gap: var(--space-2xs);
 }
 
 .agent-live-actions--compact .agent-live-actions-button {
-  min-height: 26px;
-  padding: 0 var(--space-sm);
+  min-height: 24px;
+  padding: 0 var(--space-xs);
+  border-radius: var(--radius-sm);
   font-size: var(--text-2xs);
 }
 
 .agent-live-actions--compact .agent-live-actions-button--primary {
-  flex: 1 1 100%;
-  min-height: 30px;
+  flex: 0 0 auto;
+  min-height: 24px;
 }
 
 @media (max-width: 720px) {
@@ -149,4 +155,13 @@
   .agent-live-actions-buttons {
     justify-content: flex-start;
   }
+
+  .agent-live-actions--compact {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .agent-live-actions--compact .agent-live-actions-buttons {
+    justify-content: flex-end;
+  }
 }
diff --git a/packages/web/client/index.html b/packages/web/client/index.html
index a3f13486..5c7d7d1f 100644
--- a/packages/web/client/index.html
+++ b/packages/web/client/index.html
@@ -4,6 +4,19 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Scout</title>
+    <style>
+      html,
+      body,
+      #root {
+        min-height: 100%;
+        background: #050605;
+        color: #f3f4ee;
+      }
+
+      body {
+        margin: 0;
+      }
+    </style>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Inter+Tight:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&family=Play:wght@400;700&family=Spectral:wght@500;600&display=swap" rel="stylesheet" />
diff --git a/packages/web/client/lib/types.ts b/packages/web/client/lib/types.ts
index 74a64e2f..11602d04 100644
--- a/packages/web/client/lib/types.ts
+++ b/packages/web/client/lib/types.ts
@@ -698,6 +698,18 @@ export type AgentObservePayload = {
   data: ObserveData;
 };
 
+export type TmuxPeekPayload = {
+  available: boolean;
+  agentId: string;
+  sessionId: string | null;
+  capturedAt: number;
+  body: string;
+  lineCount: number;
+  columnCount: number;
+  truncated: boolean;
+  reason: string | null;
+};
+
 export type SessionCatalogEntry = {
   id: string;
   startedAt: number;
diff --git a/packages/web/client/scout/inspector/AgentsInspector.tsx b/packages/web/client/scout/inspector/AgentsInspector.tsx
index 6f70c796..15c43872 100644
--- a/packages/web/client/scout/inspector/AgentsInspector.tsx
+++ b/packages/web/client/scout/inspector/AgentsInspector.tsx
@@ -15,6 +15,7 @@ import { queueTakeover } from "../../lib/terminal-takeover.ts";
 import { agentIdFromConversation } from "../../lib/router.ts";
 import { useContextMenu, type MenuItem } from "../../components/ContextMenu.tsx";
 import { AgentLiveActions } from "../../components/AgentLiveActions.tsx";
+import { TmuxPeekPanel } from "./TmuxPeek.tsx";
 import type {
   Agent,
   AgentObservePayload,
@@ -514,6 +515,10 @@ function AgentContextPanel({
         variant="compact"
       />
 
+      {agent.transport === "tmux" && (
+        <TmuxPeekPanel agentId={agent.id} lines={44} columns={132} />
+      )}
+
       {/* State */}
       <Section label="State">
         <div className="flex items-baseline gap-2">
diff --git a/packages/web/client/scout/inspector/ConversationInspector.tsx b/packages/web/client/scout/inspector/ConversationInspector.tsx
index 3b6ab043..a5ecc93c 100644
--- a/packages/web/client/scout/inspector/ConversationInspector.tsx
+++ b/packages/web/client/scout/inspector/ConversationInspector.tsx
@@ -1,5 +1,5 @@
 import { ScrollText } from "lucide-react";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useScout } from "../Provider.tsx";
 import { openContent } from "../slots/openContent.ts";
 import { api } from "../../lib/api.ts";
@@ -25,6 +25,7 @@ import {
   tailKindLabel,
   tailSummary,
 } from "../../lib/tail-preview.ts";
+import { TmuxPeekPanel } from "./TmuxPeek.tsx";
 import type {
   Flight,
   Message,
@@ -40,6 +41,10 @@ const KIND_LABELS: Record<string, string> = {
   thread: "Thread",
 };
 
+const TAIL_PREVIEW_INITIAL_FRAME_SIZE = 6;
+const TAIL_PREVIEW_PLAYBACK_BATCH_SIZE = 3;
+const TAIL_PREVIEW_PLAYBACK_MS = 420;
+
 function pathLeaf(path: string | null | undefined): string | null {
   if (!path) return null;
   const normalized = path.replace(/[\\/]+$/, "");
@@ -126,6 +131,10 @@ export function ConversationInspector() {
   );
   const [catalog, setCatalog] = useState<SessionCatalogWithResume | null>(null);
   const [tailPreviewEvents, setTailPreviewEvents] = useState<TailEvent[]>([]);
+  const [visibleTailPreviewEvents, setVisibleTailPreviewEvents] = useState<TailEvent[]>([]);
+  const visibleTailPreviewEventsRef = useRef<TailEvent[]>([]);
+  const tailPlaybackPendingRef = useRef<TailEvent[]>([]);
+  const tailPlaybackTimerRef = useRef<number | null>(null);
 
   useEffect(() => {
     setCatalog(null);
@@ -164,13 +173,50 @@ export function ConversationInspector() {
     () => buildTailPreviewContext({ activeSessionId, agent, sessionMeta: meta }),
     [activeSessionId, agent, meta],
   );
+  const tailPreviewScopeKey = JSON.stringify({
+    sessionIds: tailPreviewContext.sessionIds,
+    paths: tailPreviewContext.paths,
+    projects: tailPreviewContext.projects,
+  });
   const hasTailPreviewScope =
     tailPreviewContext.sessionIds.length > 0 ||
     tailPreviewContext.paths.length > 0 ||
     tailPreviewContext.projects.length > 0;
 
+  const stopTailPlayback = useCallback(() => {
+    if (tailPlaybackTimerRef.current !== null) {
+      window.clearInterval(tailPlaybackTimerRef.current);
+      tailPlaybackTimerRef.current = null;
+    }
+    tailPlaybackPendingRef.current = [];
+  }, []);
+
+  const scheduleTailPlayback = useCallback(() => {
+    if (tailPlaybackTimerRef.current !== null) return;
+    tailPlaybackTimerRef.current = window.setInterval(() => {
+      const nextBatch = tailPlaybackPendingRef.current.slice(0, TAIL_PREVIEW_PLAYBACK_BATCH_SIZE);
+      tailPlaybackPendingRef.current = tailPlaybackPendingRef.current.slice(TAIL_PREVIEW_PLAYBACK_BATCH_SIZE);
+      if (nextBatch.length === 0) {
+        stopTailPlayback();
+        return;
+      }
+      setVisibleTailPreviewEvents((previous) => mergeTailPreviewEvents(previous, nextBatch));
+    }, TAIL_PREVIEW_PLAYBACK_MS);
+  }, [stopTailPlayback]);
+
+  useEffect(() => {
+    visibleTailPreviewEventsRef.current = visibleTailPreviewEvents;
+  }, [visibleTailPreviewEvents]);
+
+  useEffect(() => stopTailPlayback, [stopTailPlayback]);
+
   useEffect(() => {
+    stopTailPlayback();
     setTailPreviewEvents([]);
+    setVisibleTailPreviewEvents([]);
+  }, [stopTailPlayback, tailPreviewScopeKey]);
+
+  useEffect(() => {
     if (!hasTailPreviewScope) return;
     let cancelled = false;
     const params = new URLSearchParams({ limit: "180", transcripts: "true" });
@@ -186,7 +232,7 @@ export function ConversationInspector() {
     return () => {
       cancelled = true;
     };
-  }, [hasTailPreviewScope, tailPreviewContext]);
+  }, [hasTailPreviewScope, tailPreviewScopeKey]);
 
   useTailEvents(
     useCallback(
@@ -195,10 +241,45 @@ export function ConversationInspector() {
         if (!tailEventMatchesContext(event, tailPreviewContext)) return;
         setTailPreviewEvents((previous) => mergeTailPreviewEvents(previous, [event]));
       },
-      [hasTailPreviewScope, tailPreviewContext],
+      [hasTailPreviewScope, tailPreviewScopeKey],
     ),
   );
 
+  useEffect(() => {
+    if (tailPreviewEvents.length === 0) {
+      stopTailPlayback();
+      setVisibleTailPreviewEvents([]);
+      return;
+    }
+
+    const visible = visibleTailPreviewEventsRef.current;
+    const knownIds = new Set([
+      ...visible.map((event) => event.id),
+      ...tailPlaybackPendingRef.current.map((event) => event.id),
+    ]);
+    const incoming = tailPreviewEvents.filter((event) => !knownIds.has(event.id));
+    if (incoming.length === 0) return;
+
+    if (visible.length === 0) {
+      const immediate = incoming.slice(0, TAIL_PREVIEW_INITIAL_FRAME_SIZE);
+      const deferred = incoming.slice(TAIL_PREVIEW_INITIAL_FRAME_SIZE);
+      setVisibleTailPreviewEvents(mergeTailPreviewEvents([], immediate));
+      tailPlaybackPendingRef.current = mergeTailPreviewEvents(
+        tailPlaybackPendingRef.current,
+        deferred,
+      );
+    } else {
+      tailPlaybackPendingRef.current = mergeTailPreviewEvents(
+        tailPlaybackPendingRef.current,
+        incoming,
+      );
+    }
+
+    if (tailPlaybackPendingRef.current.length > 0) {
+      scheduleTailPlayback();
+    }
+  }, [scheduleTailPlayback, stopTailPlayback, tailPreviewEvents]);
+
   if (!conversationId) return null;
 
   if (!loaded) {
@@ -226,14 +307,16 @@ export function ConversationInspector() {
     latestMessage?.body?.trim() || meta?.preview?.trim() || null;
   const previewActor = latestMessage?.actorName ?? null;
   const liveSessionLabel = compactSessionId(activeSessionId);
+  const showTmuxPeek = Boolean(agent && agent.transport === "tmux");
   const liveSummary = activeFlight?.summary?.trim()
-    ?? (activeSessionId
+    ?? (activeSessionId && !showTmuxPeek
       ? "Terminal session is live."
-      : tailPreviewEvents.length > 0
+      : visibleTailPreviewEvents.length > 0 && !showTmuxPeek
         ? "Streaming matching Tail events."
         : null);
   const tailRouteQuery = buildTailRouteQuery(tailPreviewContext, tailPreviewEvents);
-  const showLiveActivity = Boolean(agent && (activeFlight || activeSessionId || tailPreviewEvents.length > 0));
+  const showLiveActivity = Boolean(agent && (activeFlight || activeSessionId || tailPreviewEvents.length > 0 || showTmuxPeek));
+  const showTailStream = visibleTailPreviewEvents.length > 0 || !showTmuxPeek;
 
   const goToAgentProfile = () => {
     if (!agentId) return;
@@ -371,32 +454,37 @@ export function ConversationInspector() {
             {liveSummary && (
               <div className="ctx-panel-live-summary">{liveSummary}</div>
             )}
-            <div className="ctx-panel-live-stream" aria-live="polite">
-              {tailPreviewEvents.length > 0 ? (
-                <ol className="ctx-panel-live-events">
-                  {tailPreviewEvents.map((event) => (
-                    <li key={event.id} className="ctx-panel-live-event">
-                      <span className="ctx-panel-live-event-kind">
-                        {tailKindLabel(event.kind)}
-                      </span>
-                      <span className="ctx-panel-live-event-summary">
-                        {tailSummary(event.summary)}
-                      </span>
-                      <span
-                        className="ctx-panel-live-event-time"
-                        title={formatAbsoluteTimestamp(event.ts)}
-                      >
-                        {timeAgo(event.ts)}
-                      </span>
-                    </li>
-                  ))}
-                </ol>
-              ) : (
-                <div className="ctx-panel-live-stream-empty">
-                  Waiting for matching Tail events
-                </div>
-              )}
-            </div>
+            {showTmuxPeek && (
+              <TmuxPeekPanel agentId={agent.id} lines={44} columns={132} />
+            )}
+            {showTailStream && (
+              <div className="ctx-panel-live-stream" aria-live="polite">
+                {visibleTailPreviewEvents.length > 0 ? (
+                  <ol className="ctx-panel-live-events">
+                    {visibleTailPreviewEvents.map((event) => (
+                      <li key={event.id} className="ctx-panel-live-event">
+                        <span className="ctx-panel-live-event-kind">
+                          {tailKindLabel(event.kind)}
+                        </span>
+                        <span className="ctx-panel-live-event-summary">
+                          {tailSummary(event.summary)}
+                        </span>
+                        <span
+                          className="ctx-panel-live-event-time"
+                          title={formatAbsoluteTimestamp(event.ts)}
+                        >
+                          {timeAgo(event.ts)}
+                        </span>
+                      </li>
+                    ))}
+                  </ol>
+                ) : (
+                  <div className="ctx-panel-live-stream-empty">
+                    Waiting for matching Tail events
+                  </div>
+                )}
+              </div>
+            )}
             {hasTailPreviewScope && (
               <button
                 type="button"
diff --git a/packages/web/client/scout/inspector/TmuxPeek.tsx b/packages/web/client/scout/inspector/TmuxPeek.tsx
new file mode 100644
index 00000000..86f90755
--- /dev/null
+++ b/packages/web/client/scout/inspector/TmuxPeek.tsx
@@ -0,0 +1,174 @@
+import { useEffect, useState, type CSSProperties } from "react";
+import { api } from "../../lib/api.ts";
+import { timeAgo } from "../../lib/time.ts";
+import type { TmuxPeekPayload } from "../../lib/types.ts";
+
+const TMUX_PEEK_LINES = 44;
+const TMUX_PEEK_COLUMNS = 132;
+const TMUX_PEEK_POLL_MS = 3_500;
+const TMUX_PEEK_IDLE_POLL_MS = 7_000;
+
+function samePeek(left: TmuxPeekPayload | null, right: TmuxPeekPayload): boolean {
+  return Boolean(
+    left &&
+    left.available === right.available &&
+    left.sessionId === right.sessionId &&
+    left.body === right.body &&
+    left.lineCount === right.lineCount &&
+    left.columnCount === right.columnCount &&
+    left.truncated === right.truncated &&
+    left.reason === right.reason,
+  );
+}
+
+export function TmuxPeekPanel({
+  agentId,
+  enabled = true,
+  lines = TMUX_PEEK_LINES,
+  columns = TMUX_PEEK_COLUMNS,
+  className,
+}: {
+  agentId: string | null | undefined;
+  enabled?: boolean;
+  lines?: number;
+  columns?: number;
+  className?: string;
+}) {
+  const [peek, setPeek] = useState<TmuxPeekPayload | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    setPeek(null);
+    setError(null);
+    if (!enabled || !agentId) {
+      setLoading(false);
+      return;
+    }
+
+    let cancelled = false;
+    let timeoutId: number | undefined;
+    let firstLoad = true;
+
+    const schedule = (delay: number) => {
+      window.clearTimeout(timeoutId);
+      timeoutId = window.setTimeout(() => {
+        void load();
+      }, delay);
+    };
+
+    const load = async () => {
+      if (cancelled) return;
+      if (document.visibilityState !== "visible") {
+        schedule(TMUX_PEEK_IDLE_POLL_MS);
+        return;
+      }
+
+      if (firstLoad) setLoading(true);
+      let nextDelay = TMUX_PEEK_POLL_MS;
+      try {
+        const params = new URLSearchParams({
+          lines: String(lines),
+          cols: String(columns),
+        });
+        const next = await api<TmuxPeekPayload>(
+          `/api/agents/${encodeURIComponent(agentId)}/tmux-peek?${params.toString()}`,
+        );
+        if (cancelled) return;
+        setError(null);
+        setPeek((previous) => samePeek(previous, next) ? previous : next);
+        nextDelay = next.available ? TMUX_PEEK_POLL_MS : TMUX_PEEK_IDLE_POLL_MS;
+      } catch (loadError) {
+        if (cancelled) return;
+        setError(loadError instanceof Error ? loadError.message : String(loadError));
+        nextDelay = TMUX_PEEK_IDLE_POLL_MS;
+      } finally {
+        if (!cancelled) {
+          firstLoad = false;
+          setLoading(false);
+          schedule(nextDelay);
+        }
+      }
+    };
+
+    const handleVisibility = () => {
+      if (document.visibilityState === "visible") {
+        window.clearTimeout(timeoutId);
+        void load();
+      }
+    };
+
+    void load();
+    document.addEventListener("visibilitychange", handleVisibility);
+    return () => {
+      cancelled = true;
+      window.clearTimeout(timeoutId);
+      document.removeEventListener("visibilitychange", handleVisibility);
+    };
+  }, [agentId, columns, enabled, lines]);
+
+  if (!enabled || !agentId) return null;
+
+  const body = peek?.body ?? "";
+  const lineCount = peek?.lineCount ?? lines;
+  const columnCount = peek?.columnCount ?? columns;
+  const fontSizePx = 6;
+  const lineHeight = 1.32;
+  const gridStyle = {
+    "--tmux-peek-columns": String(columnCount),
+    "--tmux-peek-rows": String(lineCount),
+    "--tmux-peek-font-size": `${fontSizePx}px`,
+    "--tmux-peek-line-height": String(lineHeight),
+    "--tmux-peek-height": `${Math.ceil((lineCount * fontSizePx * lineHeight) + 18)}px`,
+  } as CSSProperties;
+  const hasScreen = Boolean(peek?.available && body);
+  const status = error
+    ? error
+    : loading && !peek
+      ? "Sampling tmux..."
+      : peek?.available === false
+        ? peek.reason ?? "No tmux pane is available."
+        : hasScreen
+          ? null
+          : peek?.available
+            ? "Pane is empty."
+            : "Sampling tmux...";
+
+  return (
+    <div
+      className={`ctx-panel-tmux-peek${className ? ` ${className}` : ""}`}
+      style={gridStyle}
+    >
+      <div className="ctx-panel-tmux-peek-head">
+        <span>Terminal sample</span>
+        <span className="ctx-panel-tmux-peek-grid">
+          {columnCount}x{lineCount}
+        </span>
+        {peek?.sessionId && (
+          <span className="ctx-panel-tmux-peek-session" title={peek.sessionId}>
+            {peek.sessionId.length > 12 ? peek.sessionId.slice(0, 10) : peek.sessionId}
+          </span>
+        )}
+        {peek?.capturedAt && (
+          <time dateTime={new Date(peek.capturedAt).toISOString()}>
+            {timeAgo(peek.capturedAt)}
+          </time>
+        )}
+      </div>
+      {hasScreen ? (
+        <pre className="ctx-panel-tmux-peek-screen" aria-live="polite">
+          {body}
+        </pre>
+      ) : (
+        <div className="ctx-panel-tmux-peek-empty" aria-live="polite">
+          {status}
+        </div>
+      )}
+      {peek?.truncated && body && (
+        <div className="ctx-panel-tmux-peek-foot">
+          Last {lineCount} rows from live tmux pane
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/packages/web/client/scout/slots/ctx-panel.css b/packages/web/client/scout/slots/ctx-panel.css
index c67e0bdd..e36b530e 100644
--- a/packages/web/client/scout/slots/ctx-panel.css
+++ b/packages/web/client/scout/slots/ctx-panel.css
@@ -1284,9 +1284,112 @@
   margin: 0;
 }
 
+.ctx-panel-tmux-peek {
+  min-width: 0;
+  display: grid;
+  gap: var(--space-xs);
+  padding: var(--space-2xs);
+  border: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
+  border-radius: var(--radius-sm);
+  background: color-mix(in srgb, var(--bg) 82%, black);
+}
+
+.ctx-panel-tmux-peek-head {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+  font-family: var(--font-mono);
+  font-size: var(--text-2xs);
+  font-weight: 600;
+  letter-spacing: var(--tracking-sm);
+  text-transform: uppercase;
+  color: var(--dim);
+}
+
+.ctx-panel-tmux-peek-head span:first-child {
+  min-width: 0;
+  flex: 1;
+}
+
+.ctx-panel-tmux-peek-head time,
+.ctx-panel-tmux-peek-grid,
+.ctx-panel-tmux-peek-session {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--dim);
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ctx-panel-tmux-peek-grid {
+  flex: 0 0 auto;
+  color: color-mix(in srgb, var(--ink) 55%, var(--dim));
+}
+
+.ctx-panel-tmux-peek-session {
+  max-width: 34%;
+  color: color-mix(in srgb, var(--ink) 44%, var(--dim));
+}
+
+.ctx-panel-tmux-peek-screen,
+.ctx-panel-tmux-peek-empty {
+  min-width: 0;
+  height: var(--tmux-peek-height, 335px);
+  margin: 0;
+  padding: 8px;
+  border: 1px solid color-mix(in srgb, var(--border) 56%, transparent);
+  border-radius: 2px;
+  background: color-mix(in srgb, black 42%, var(--bg));
+  color: color-mix(in srgb, var(--ink) 78%, var(--muted));
+  font-family: var(--font-mono);
+  font-size: var(--tmux-peek-font-size, 6px);
+  line-height: var(--tmux-peek-line-height, 1.32);
+}
+
+.ctx-panel-tmux-peek-screen {
+  overflow: auto;
+  white-space: pre;
+  overflow-wrap: normal;
+  tab-size: 2;
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--ink) 18%, transparent) transparent;
+}
+
+.ctx-panel-tmux-peek-screen::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.ctx-panel-tmux-peek-screen::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.ctx-panel-tmux-peek-screen::-webkit-scrollbar-thumb {
+  border-radius: var(--radius-pill);
+  background: color-mix(in srgb, var(--ink) 18%, transparent);
+}
+
+.ctx-panel-tmux-peek-empty {
+  display: grid;
+  place-items: center;
+  color: var(--dim);
+  letter-spacing: var(--tracking-sm);
+  text-align: center;
+}
+
+.ctx-panel-tmux-peek-foot {
+  color: var(--dim);
+  font-family: var(--font-mono);
+  font-size: var(--text-2xs);
+  letter-spacing: var(--tracking-sm);
+  text-transform: uppercase;
+}
+
 .ctx-panel-live-summary {
-  min-height: 48px;
-  max-height: 48px;
+  min-height: 0;
+  max-height: 4.6em;
   padding: var(--space-2xs) var(--space-xs);
   border-radius: var(--radius-md);
   background: color-mix(in srgb, var(--ink) 4%, transparent);
@@ -1305,6 +1408,7 @@
   max-height: 104px;
   overflow-y: auto;
   overscroll-behavior: contain;
+  scrollbar-gutter: stable;
   padding: var(--space-2xs) var(--space-xs);
   border: 1px solid color-mix(in srgb, var(--border) 36%, transparent);
   border-radius: var(--radius-md);
@@ -1353,6 +1457,25 @@
   gap: var(--space-xs);
   min-height: 20px;
   font-size: var(--text-xs);
+  animation: ctx-panel-live-event-enter 160ms ease-out both;
+}
+
+@keyframes ctx-panel-live-event-enter {
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ctx-panel-live-event {
+    animation: none;
+  }
 }
 
 .ctx-panel-live-event-kind {
diff --git a/packages/web/client/screens/TerminalScreen.tsx b/packages/web/client/screens/TerminalScreen.tsx
index 7bad2ad4..2fc1e978 100644
--- a/packages/web/client/screens/TerminalScreen.tsx
+++ b/packages/web/client/screens/TerminalScreen.tsx
@@ -1,7 +1,7 @@
 import "./terminal-screen.css";
 
 import { useTerminalRelay, TerminalRelay } from "@hudsonkit";
-import { type ReactNode, useEffect, useMemo, useState } from "react";
+import { type ReactNode, useEffect, useLayoutEffect, useMemo, useState } from "react";
 import { useScout } from "../scout/Provider.tsx";
 import { api } from "../lib/api.ts";
 import { actorColor } from "../lib/colors.ts";
@@ -38,6 +38,10 @@ function shouldBootstrapTakeover(agent: Agent | null, mode: "observe" | "takeove
   return mode === "takeover" && Boolean(agent) && agent?.transport !== "tmux";
 }
 
+const SCOUT_TERMINAL_INITIAL_COLS = 132;
+const SCOUT_TERMINAL_INITIAL_ROWS = 44;
+const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+
 export function TerminalScreen({
   agentId,
   mode,
@@ -259,6 +263,11 @@ function TerminalRelayScreen({
     ...(cwd ? { cwd } : {}),
     ...(relayAgent ? { agent: relayAgent } : {}),
   });
+
+  useBrowserLayoutEffect(() => {
+    relay.resize(SCOUT_TERMINAL_INITIAL_COLS, SCOUT_TERMINAL_INITIAL_ROWS);
+  }, [relay.resize]);
+
   const terminalRelay = useMemo(() => {
     if (!readOnly) return relay;
     return {
diff --git a/packages/web/server/create-openscout-web-server.test.ts b/packages/web/server/create-openscout-web-server.test.ts
index be58e1fe..0ed7e5e5 100644
--- a/packages/web/server/create-openscout-web-server.test.ts
+++ b/packages/web/server/create-openscout-web-server.test.ts
@@ -33,6 +33,7 @@ let readUnblockRequestsResult: Array<Record<string, unknown>> = [];
 let scoutBrokerContextResult: unknown = null;
 let agentObservePayloadResult: unknown = null;
 let sessionRefObservePayloadResult: unknown = null;
+let queryAgentsResult: Array<Record<string, unknown>> = [];
 let brokerDiagnosticsResult: Record<string, unknown> = makeBrokerDiagnostics();
 let pairingStateResult: Record<string, unknown> = makePairingState();
 let pairingSessionSnapshotsResult: SessionState[] = [];
@@ -88,11 +89,11 @@ mock.module("./db-queries.ts", () => ({
     db.exec("PRAGMA busy_timeout = 250");
     db.exec("PRAGMA query_only = ON");
   },
-  queryAgentById: () => null,
-  queryAgents: () => [],
+  queryAgentById: (agentId: string) =>
+    queryAgentsResult.find((agent) => agent.id === agentId) ?? null,
+  queryAgents: () => queryAgentsResult,
   queryActivity: () => [],
   queryBrokerDiagnostics: () => brokerDiagnosticsResult,
-  queryAgentById: () => null,
   queryConversationDefinitionById: (conversationId: string) =>
     queryConversationDefinitionByIdImpl(conversationId),
   queryHeartrate: () => [],
@@ -440,6 +441,7 @@ beforeEach(() => {
   };
   scoutRelayConfigResult = {};
   brokerDiagnosticsResult = makeBrokerDiagnostics();
+  queryAgentsResult = [];
   readUnblockRequestsResult = [];
   pairingStateResult = makePairingState();
   pairingSessionSnapshotsResult = [];
@@ -689,6 +691,84 @@ describe("createOpenScoutWebServer", () => {
     expect(await response.json()).toEqual([]);
   });
 
+  test("serves a bounded tmux peek for a broker-backed agent", async () => {
+    queryAgentsResult = [
+      {
+        id: "agent-1",
+        name: "Claude Relay",
+        harness: "claude",
+        transport: "tmux",
+        harnessSessionId: "fallback-session",
+        cwd: "/tmp/project",
+        projectRoot: "/tmp/project",
+      },
+    ];
+    scoutBrokerContextResult = {
+      snapshot: {
+        endpoints: {
+          "endpoint-1": {
+            id: "endpoint-1",
+            agentId: "agent-1",
+            nodeId: "node-1",
+            harness: "claude",
+            transport: "tmux",
+            state: "active",
+            sessionId: "tmux-session",
+            pane: "%3",
+            cwd: "/tmp/project",
+            metadata: {
+              tmuxSession: "tmux-session",
+            },
+          },
+        },
+      },
+    };
+    const captureCalls: Array<Record<string, unknown>> = [];
+    const server = await createOpenScoutWebServer({
+      currentDirectory: "/tmp/openscout",
+      assetMode: "static",
+      staticRoot: makeStaticRoot(),
+      captureTmuxPane: (request) => {
+        captureCalls.push(request);
+        return { body: "\x1B[32mWorking\x1B[0m\nDone\n\n" };
+      },
+    });
+
+    const response = await server.app.request(
+      "http://localhost/api/agents/agent-1/tmux-peek?lines=12&cols=60",
+    );
+
+    expect(response.status).toBe(200);
+    const body = await response.json() as Record<string, unknown>;
+    expect(body).toMatchObject({
+      available: true,
+      agentId: "agent-1",
+      sessionId: "tmux-session",
+      lineCount: 12,
+      columnCount: 60,
+      truncated: false,
+      reason: null,
+    });
+    const rows = String(body.body).split("\n");
+    expect(rows).toHaveLength(12);
+    expect(rows.every((row) => Array.from(row).length === 60)).toBe(true);
+    expect(rows.slice(0, 9).every((row) => row === " ".repeat(60))).toBe(true);
+    expect(rows.at(-3)?.trimEnd()).toBe("Working");
+    expect(rows.at(-2)?.trimEnd()).toBe("Done");
+    expect(rows.at(-1)?.trimEnd()).toBe("");
+    expect(typeof body.capturedAt).toBe("number");
+    expect(captureCalls).toEqual([
+      expect.objectContaining({
+        agentId: "agent-1",
+        sessionId: "tmux-session",
+        paneTarget: "%3",
+        cwd: "/tmp/project",
+        lines: 12,
+        columns: 60,
+      }),
+    ]);
+  });
+
   test("serves broker diagnostics", async () => {
     const server = await createOpenScoutWebServer({
       currentDirectory: "/tmp/openscout",
diff --git a/packages/web/server/create-openscout-web-server.ts b/packages/web/server/create-openscout-web-server.ts
index 6e37c388..67aea40e 100644
--- a/packages/web/server/create-openscout-web-server.ts
+++ b/packages/web/server/create-openscout-web-server.ts
@@ -314,6 +314,21 @@ export type TerminalRunRequest = {
   agentId?: string | null;
 };
 
+export type TmuxPanePeekRequest = {
+  agentId: string;
+  sessionId: string;
+  paneTarget: string;
+  cwd: string | null;
+  lines: number;
+  columns: number;
+};
+
+export type TmuxPanePeekCapture = {
+  body: string;
+  lineCount?: number;
+  truncated?: boolean;
+};
+
 export type CreateOpenScoutWebServerOptions = {
   currentDirectory: string;
   shellStateCacheTtlMs?: number;
@@ -329,6 +344,7 @@ export type CreateOpenScoutWebServerOptions = {
   createVantageHandoff?: (request: OpenScoutVantageHandoffInput) => Promise<OpenScoutVantageHandoff>;
   terminalRelayHealthcheck?: () => Promise<boolean>;
   revealPath?: (targetPath: string) => Promise<void> | void;
+  captureTmuxPane?: (request: TmuxPanePeekRequest) => Promise<TmuxPanePeekCapture | null> | TmuxPanePeekCapture | null;
   scoutbotAssistant?: {
     invokeCodex?: ScoutbotCodexAssistantInvoker;
   };
@@ -983,6 +999,140 @@ function activeEndpointForAgent(
   return [...candidates].sort((left, right) => rank(left.state) - rank(right.state))[0] ?? null;
 }
 
+const TMUX_PEEK_DEFAULT_LINES = 44;
+const TMUX_PEEK_MIN_LINES = 10;
+const TMUX_PEEK_MAX_LINES = 80;
+const TMUX_PEEK_DEFAULT_COLUMNS = 132;
+const TMUX_PEEK_MIN_COLUMNS = 60;
+const TMUX_PEEK_MAX_COLUMNS = 200;
+const TMUX_PEEK_CAPTURE_MIN_LINES = 60;
+const TMUX_PEEK_MAX_BYTES = 48 * 1024;
+
+type TmuxPeekTarget = {
+  sessionId: string;
+  paneTarget: string;
+  cwd: string | null;
+};
+
+function parseBoundedInteger(
+  value: string | undefined,
+  fallback: number,
+  minimum: number,
+  maximum: number,
+): number {
+  const parsed = value ? Number.parseInt(value, 10) : NaN;
+  if (!Number.isFinite(parsed)) {
+    return fallback;
+  }
+  return Math.min(maximum, Math.max(minimum, parsed));
+}
+
+function parseTmuxPeekLineCount(value: string | undefined): number {
+  return parseBoundedInteger(
+    value,
+    TMUX_PEEK_DEFAULT_LINES,
+    TMUX_PEEK_MIN_LINES,
+    TMUX_PEEK_MAX_LINES,
+  );
+}
+
+function parseTmuxPeekColumnCount(value: string | undefined): number {
+  return parseBoundedInteger(
+    value,
+    TMUX_PEEK_DEFAULT_COLUMNS,
+    TMUX_PEEK_MIN_COLUMNS,
+    TMUX_PEEK_MAX_COLUMNS,
+  );
+}
+
+function stripTerminalControlSequences(value: string): string {
+  return value.replace(/\x1B(?:[@-Z\\-_]|\[[0-?]*[ -/]*[@-~])/g, "");
+}
+
+function normalizeTmuxPeekLine(line: string, columns: number): string {
+  const chars = Array.from(line);
+  const clipped = chars.length > columns ? chars.slice(0, columns).join("") : line;
+  const clippedLength = Array.from(clipped).length;
+  return `${clipped}${" ".repeat(Math.max(0, columns - clippedLength))}`;
+}
+
+function normalizeTmuxPeekBody(body: string, lines: number, columns: number): {
+  body: string;
+  lineCount: number;
+  columnCount: number;
+  truncated: boolean;
+} {
+  const cleaned = stripTerminalControlSequences(body)
+    .replace(/\r\n/g, "\n")
+    .replace(/\r/g, "\n");
+  const split = cleaned.endsWith("\n") ? cleaned.slice(0, -1).split("\n") : cleaned.split("\n");
+  const sourceRows = split.length === 1 && split[0] === "" ? [] : split;
+  const visible = sourceRows.length > lines ? sourceRows.slice(-lines) : sourceRows;
+  const rows = [...visible];
+  while (rows.length < lines) {
+    rows.unshift("");
+  }
+  return {
+    body: rows.map((line) => normalizeTmuxPeekLine(line, columns)).join("\n"),
+    lineCount: rows.length,
+    columnCount: columns,
+    truncated: sourceRows.length > lines,
+  };
+}
+
+function resolveTmuxPeekTarget(agent: ReturnType<typeof queryAgents>[number], endpoint: AgentEndpoint | null): TmuxPeekTarget | null {
+  const endpointMetadata = agentEndpointMetadata(endpoint);
+  const tmuxSession = firstMetadataString(
+    endpointMetadata.tmuxSession,
+    endpoint?.sessionId,
+    agent.harnessSessionId,
+    endpointMetadata.runtimeInstanceId,
+  );
+  const paneTarget = firstMetadataString(
+    endpoint?.pane,
+    endpointMetadata.paneTarget,
+    endpointMetadata.tmuxPane,
+    tmuxSession,
+  );
+  const tmuxBacked = agent.transport === "tmux"
+    || endpoint?.transport === "tmux"
+    || Boolean(firstMetadataString(endpointMetadata.tmuxSession));
+
+  if (!tmuxBacked || !tmuxSession || !paneTarget) {
+    return null;
+  }
+
+  return {
+    sessionId: tmuxSession,
+    paneTarget,
+    cwd: endpoint?.cwd ?? endpoint?.projectRoot ?? agent.cwd ?? agent.projectRoot ?? null,
+  };
+}
+
+function defaultCaptureTmuxPane(request: TmuxPanePeekRequest): TmuxPanePeekCapture | null {
+  try {
+    const body = execFileSync("tmux", [
+      "capture-pane",
+      "-p",
+      "-J",
+      "-t",
+      request.paneTarget,
+      "-S",
+      `-${Math.max(request.lines, TMUX_PEEK_CAPTURE_MIN_LINES)}`,
+      "-E",
+      "-",
+    ], {
+      encoding: "utf8",
+      maxBuffer: TMUX_PEEK_MAX_BYTES,
+      stdio: ["ignore", "pipe", "ignore"],
+      timeout: 1_500,
+    });
+    return { body };
+  } catch {
+    return null;
+  }
+}
+
 function parseVoxSpeechTimingRequest(value: unknown): VoxSpeechTimingRequest | null | undefined {
   if (value === undefined) {
     return undefined;
@@ -3286,6 +3436,67 @@ export async function createOpenScoutWebServer(
       }),
     );
   });
+  app.get("/api/agents/:agentId/tmux-peek", async (c) => {
+    const agentId = c.req.param("agentId");
+    const agent = queryAgents(200).find((candidate) => candidate.id === agentId)
+      ?? queryAgentById(agentId);
+    if (!agent) return c.json({ error: "agent not found" }, 404);
+
+    const broker = await loadScoutBrokerContext().catch(() => null);
+    const endpoint = broker ? activeEndpointForAgent(broker.snapshot, agentId) : null;
+    const target = resolveTmuxPeekTarget(agent, endpoint);
+    const capturedAt = Date.now();
+    const lines = parseTmuxPeekLineCount(c.req.query("lines"));
+    const columns = parseTmuxPeekColumnCount(c.req.query("cols") ?? c.req.query("columns"));
+    if (!target) {
+      return c.json({
+        available: false,
+        agentId,
+        sessionId: null,
+        capturedAt,
+        body: "",
+        lineCount: 0,
+        columnCount: columns,
+        truncated: false,
+        reason: "No tmux-backed session is registered for this agent.",
+      });
+    }
+
+    const capture = await (options.captureTmuxPane ?? defaultCaptureTmuxPane)({
+      agentId,
+      sessionId: target.sessionId,
+      paneTarget: target.paneTarget,
+      cwd: target.cwd,
+      lines,
+      columns,
+    });
+    if (!capture) {
+      return c.json({
+        available: false,
+        agentId,
+        sessionId: target.sessionId,
+        capturedAt,
+        body: "",
+        lineCount: 0,
+        columnCount: columns,
+        truncated: false,
+        reason: "The tmux pane is not available right now.",
+      });
+    }
+
+    const normalized = normalizeTmuxPeekBody(capture.body, lines, columns);
+    return c.json({
+      available: true,
+      agentId,
+      sessionId: target.sessionId,
+      capturedAt,
+      body: normalized.body,
+      lineCount: capture.lineCount ?? normalized.lineCount,
+      columnCount: normalized.columnCount,
+      truncated: capture.truncated ?? normalized.truncated,
+      reason: null,
+    });
+  });
   app.get("/api/agents/:agentId/session/context", async (c) => {
     const agentId = c.req.param("agentId");
     const { getLocalAgentContextState } =

From 5edb192f3283fe93a4eaf7f2076ca6f6c3417ee0 Mon Sep 17 00:00:00 2001
From: Arach Tchoupani <arach@tchoupani.com>
Date: Sun, 7 Jun 2026 00:12:03 -0400
Subject: [PATCH 2/2] Polish conversation context preview

---
 docs/eng/conversation-surface-inventory.md    | 116 ++++
 .../client/components/AgentLiveActions.tsx    |   8 +-
 packages/web/client/lib/message-visibility.ts |  12 +
 packages/web/client/scout/Provider.tsx        |  10 +-
 .../scout/inspector/ConversationInspector.tsx | 490 +++++++++++++---
 .../web/client/scout/inspector/TmuxPeek.tsx   |  63 +-
 packages/web/client/scout/slots/ctx-panel.css | 358 +++++++++++-
 .../web/client/screens/ConversationScreen.tsx | 541 ++++++++----------
 .../client/screens/conversation-screen.css    | 353 ++++--------
 9 files changed, 1274 insertions(+), 677 deletions(-)
 create mode 100644 docs/eng/conversation-surface-inventory.md
 create mode 100644 packages/web/client/lib/message-visibility.ts

diff --git a/docs/eng/conversation-surface-inventory.md b/docs/eng/conversation-surface-inventory.md
new file mode 100644
index 00000000..3bb36404
--- /dev/null
+++ b/docs/eng/conversation-surface-inventory.md
@@ -0,0 +1,116 @@
+# Conversation Surface Inventory
+
+## Context
+
+The web UI has several pages that are visually and behaviorally close to one
+another because they all orbit the same broker conversation/session graph. The
+direct conversation route is currently the most polished composition, but it is
+also the easiest place to notice live-panel repaint churn because it combines
+the full conversation surface with the conversation inspector, terminal peek,
+tail preview, and global broker updates.
+
+This inventory names the overlap so future cleanup can preserve the aesthetic
+direction while making refresh boundaries calmer.
+
+## Close Surfaces
+
+| Route | Primary content | Right context | Notes |
+| --- | --- | --- | --- |
+| `/c/:conversationId` | `ConversationScreen` in full-page mode | `ConversationInspector` | Best visual composition today: conversation owns the room, header metadata is compact, and live activity is beside the thread. |
+| `/agents/:agentId/c/:conversationId` | `AgentsScreen` message tab with embedded `ConversationScreen` | `AgentsInspector` | Same message body in a profile shell. Useful for agent context, but visually heavier and less conversation-native. |
+| `/agents/:agentId?tab=message` | `AgentsScreen` message tab with implied DM conversation | `AgentsInspector` | Compatibility/convenience form of the agent message route. |
+| `/messages/:conversationId` | `MessagesScreen` message index/detail shell | Slot inspector selected by route | Adjacent to conversations, but starts from inbox/filter workflow rather than the thread as the main object. |
+| `/conversations` | `ConversationsScreen` list | General inspector | Discovery/list route for broker conversations. |
+| `/channels/:channelId` | `ChannelsScreen` channel feed | `ChannelInspectorPanel` | Parallel thread implementation for channel-shaped conversations. |
+| `/agent/:conversationId` | `AgentInfoScreen` legacy profile surface | `AgentsInspector` | Legacy agent-info route that still points back to conversation/profile affordances. |
+| `/terminal/:agentId` | `TerminalScreen` observe/takeover surface | `TerminalInspector` | Runtime/session surface adjacent to the thread when terminal context is the main object. |
+
+## Inspector Overlap
+
+- `ConversationInspector` combines conversation metadata, latest message,
+  active flight state, live terminal actions, `TmuxPeekPanel`, and matching Tail
+  preview events.
+- `AgentsInspector` shows profile/context details and also includes live
+  terminal/observe affordances for the selected agent.
+- `TerminalInspector` treats the terminal as the primary object.
+- `ChannelInspectorPanel` is the channel-specific sibling for group/channel
+  conversations.
+
+## Current Refresh Risk
+
+The direct conversation page listens to several live sources at once:
+
+- broker control events for messages, conversations, invocations, and flights
+- the global agent refresh loop in `ScoutProvider`
+- terminal peek polling when the agent transport is `tmux`
+- Tail preview history and live Tail events
+
+The first cleanup should keep `/c/:conversationId` as the canonical aesthetic
+target, but scope each live source to the current conversation/agent and avoid
+resetting state when fetched payloads are unchanged.
+
+## Flicker Audit Findings
+
+On the Openscout Card conversation route, the selected tmux payload was stable
+across repeated samples: the terminal body hash stayed unchanged while
+`capturedAt` changed. That means sample freshness was not terminal activity.
+
+Likely flicker multipliers:
+
+- `ConversationInspector` previously reloaded on every `flight.updated` and
+  `invocation.requested` event, even when unrelated to the current
+  conversation. This has been scoped to the current conversation/known flight
+  and coalesced.
+- `ScoutProvider` polls `/api/agents` and also reloads agents for broad broker
+  events. The API can return byte-identical data, so replacing the `agents`
+  array still caused shell-wide React churn. Agent state now preserves the
+  previous array when the fetched payload is unchanged.
+- `TmuxPeekPanel` polls while visible, but polling is not activity. The preview
+  now preserves the previous frame when pane content is unchanged and only marks
+  a frame as changed when the terminal content changes while the panel is
+  observing. A repeated identical sample settles the panel back to an `At rest`
+  badge.
+- `ConversationScreen` still has intentional low-frequency re-renders for
+  relative timestamps (`15s`) and outstanding-turn polling (`5s` only while an
+  outstanding turn is active), but its reload path now preserves existing
+  message, flight, metadata, and attention-set references when fetched payloads
+  are unchanged.
+- `ConversationScreen.load()` also posted the read cursor on every reload. The
+  broker emits `conversation.read_cursor.updated` with a fresh `updatedAt`, so
+  the client now avoids reposting the same last-read message id from repeated
+  identical reloads.
+- Several adjacent panels still have broad `useBrokerEvents(() => load())`
+  subscriptions. They are route-dependent, but should be narrowed before those
+  surfaces are treated as canonical.
+
+## Ambient Burst Contract
+
+Conversation context should present activity as an ambient cue, not as the raw
+stream. Tail, Terminal, Observe, and Trace remain the high-granularity surfaces.
+
+For conversation inspectors:
+
+- accumulate matching broker invalidations before refetching conversation
+  metadata, with a bounded max wait so the panel cannot go stale indefinitely
+- accumulate Tail preview events into short bursts, then release them in small
+  batches with CSS-owned easing
+- keep terminal previews visible when useful, but treat tmux sampling as
+  background observation; visible motion/freshness should be based on terminal
+  content changes, not poll timestamps
+- preserve existing row and panel state while fetching or releasing bursts
+- keep animation timing and easing as module/CSS constants, not per-frame React
+  calculations
+- link to Tail for the detailed stream instead of turning the inspector into a
+  second raw event feed
+
+## Cleanup Direction
+
+- Treat `/c/:conversationId` as the canonical thread composition.
+- Keep agent-scoped message routes as compatibility/profile entry points unless
+  product navigation intentionally chooses the profile shell.
+- Extract the message feed so direct, agent, and channel routes share message
+  loading, optimistic reconciliation, and broker event scoping.
+- Share live activity components across conversation, agent, and terminal
+  inspectors with explicit refresh contracts.
+- Reserve terminal-focused routes for observe/takeover work, and keep compact
+  terminal peeks visually stable inside inspectors.
diff --git a/packages/web/client/components/AgentLiveActions.tsx b/packages/web/client/components/AgentLiveActions.tsx
index 7a8f2547..b9cb8a50 100644
--- a/packages/web/client/components/AgentLiveActions.tsx
+++ b/packages/web/client/components/AgentLiveActions.tsx
@@ -74,7 +74,7 @@ export function AgentLiveActions({
   const state = normalizeAgentState(agent.state);
   const canObserveTerminal = agent.transport === "tmux" && Boolean(activeSessionId);
   const canTakeover = canObserveTerminal || Boolean(resolvedCatalog?.resumeCommand);
-  const hasLiveTurn = Boolean(activeSessionId) || state === "working";
+  const hasLiveTurn = state === "working";
   const isCompact = variant === "compact";
   const status = hasLiveTurn
     ? activeSessionId
@@ -82,6 +82,10 @@ export function AgentLiveActions({
         ? canObserveTerminal ? "Live terminal" : "Live trace"
         : `Live ${shortSession(activeSessionId)}`
       : "Working"
+    : activeSessionId
+      ? isCompact
+        ? canObserveTerminal ? "Terminal" : "Trace"
+        : `${canObserveTerminal ? "Terminal" : "Trace"} ${shortSession(activeSessionId)}`
     : state === "ready"
       ? "Ready"
       : "No live turn";
@@ -94,7 +98,7 @@ export function AgentLiveActions({
     ? isCompact ? "Observe" : "Observe terminal"
     : isCompact ? "Trace" : "Observe trace";
   const observeTitle = canObserveTerminal
-    ? "Observe the live tmux terminal"
+    ? "Observe the tmux terminal"
     : "Open the web observe trace";
 
   const openTerminal = (mode: "observe" | "takeover") => {
diff --git a/packages/web/client/lib/message-visibility.ts b/packages/web/client/lib/message-visibility.ts
new file mode 100644
index 00000000..aef6f28e
--- /dev/null
+++ b/packages/web/client/lib/message-visibility.ts
@@ -0,0 +1,12 @@
+import type { Message } from "./types.ts";
+
+export function isNoisyConversationStatusMessage(
+  message: Pick<Message, "actorId" | "body" | "class">,
+): boolean {
+  if (message.class !== "status") return false;
+  if (message.actorId !== "system") return false;
+  return (
+    message.body.includes("failed to respond") &&
+    message.body.includes("snapshot.messages")
+  );
+}
diff --git a/packages/web/client/scout/Provider.tsx b/packages/web/client/scout/Provider.tsx
index 275092a0..873644d3 100644
--- a/packages/web/client/scout/Provider.tsx
+++ b/packages/web/client/scout/Provider.tsx
@@ -108,6 +108,14 @@ const AGENT_REFRESH_POLL_MS = 15_000;
 
 type ThemeVars = CSSProperties & Record<`--${string}`, string>;
 
+function keepPreviousIfJsonEqual<T>(previous: T, next: T): T {
+  try {
+    return JSON.stringify(previous) === JSON.stringify(next) ? previous : next;
+  } catch {
+    return next;
+  }
+}
+
 const DARK_THEME_VARS: ThemeVars = {
   "--hud-bg": "oklch(0.14 0.008 80)",
   "--hud-surface": "oklch(0.18 0.009 80)",
@@ -240,7 +248,7 @@ export function ScoutProvider({
     const request = (async () => {
       const agentsResult = await api<Agent[]>("/api/agents").catch(() => null);
       if (agentsResult) {
-        setAgents(agentsResult);
+        setAgents((previous) => keepPreviousIfJsonEqual(previous, agentsResult));
       }
     })();
 
diff --git a/packages/web/client/scout/inspector/ConversationInspector.tsx b/packages/web/client/scout/inspector/ConversationInspector.tsx
index a5ecc93c..b45f1dd0 100644
--- a/packages/web/client/scout/inspector/ConversationInspector.tsx
+++ b/packages/web/client/scout/inspector/ConversationInspector.tsx
@@ -1,5 +1,11 @@
 import { ScrollText } from "lucide-react";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { useScout } from "../Provider.tsx";
 import { openContent } from "../slots/openContent.ts";
 import { api } from "../../lib/api.ts";
@@ -8,12 +14,18 @@ import { useTailEvents } from "../../lib/tail-events.ts";
 import { agentStateLabel, normalizeAgentState } from "../../lib/agent-state.ts";
 import { stateColor } from "../../lib/colors.ts";
 import { AgentLiveActions } from "../../components/AgentLiveActions.tsx";
+import { VantageHandoffButton } from "../../components/VantageHandoffButton.tsx";
+import { isNoisyConversationStatusMessage } from "../../lib/message-visibility.ts";
 import {
   compactAgentId,
   minimalAgentDisplayName,
   minimalAgentHandle,
 } from "../../lib/agent-labels.ts";
-import { formatAbsoluteTimestamp, timeAgo } from "../../lib/time.ts";
+import {
+  compareTimestampsAsc,
+  formatAbsoluteTimestamp,
+  timeAgo,
+} from "../../lib/time.ts";
 import { agentIdFromConversation } from "../../lib/router.ts";
 import { isActiveConversationFlight } from "../../lib/conversations.ts";
 import {
@@ -41,9 +53,36 @@ const KIND_LABELS: Record<string, string> = {
   thread: "Thread",
 };
 
-const TAIL_PREVIEW_INITIAL_FRAME_SIZE = 6;
-const TAIL_PREVIEW_PLAYBACK_BATCH_SIZE = 3;
-const TAIL_PREVIEW_PLAYBACK_MS = 420;
+const INSPECTOR_REFRESH_ACCUMULATE_MS = 1_800;
+const INSPECTOR_REFRESH_MAX_WAIT_MS = 4_800;
+const TAIL_PREVIEW_PLAYBACK_BATCH_SIZE = 2;
+const TAIL_PREVIEW_PLAYBACK_MS = 120;
+const TAIL_PREVIEW_INITIAL_ACCUMULATE_MS = 650;
+const TAIL_PREVIEW_BURST_ACCUMULATE_MS = 1_800;
+
+type EventConversationRecord = {
+  id?: string | null;
+};
+
+type EventFlightRecord = {
+  id: string;
+  invocationId: string;
+  targetAgentId?: string | null;
+};
+
+type EventInvocationRecord = {
+  id: string;
+  targetAgentId?: string | null;
+  conversationId?: string | null;
+};
+
+function keepPreviousIfJsonEqual<T>(previous: T, next: T): T {
+  try {
+    return JSON.stringify(previous) === JSON.stringify(next) ? previous : next;
+  } catch {
+    return next;
+  }
+}
 
 function pathLeaf(path: string | null | undefined): string | null {
   if (!path) return null;
@@ -53,6 +92,13 @@ function pathLeaf(path: string | null | undefined): string | null {
   return parts.at(-1) ?? normalized;
 }
 
+function compactPath(path: string | null | undefined): string | null {
+  if (!path) return null;
+  const normalized = path.replace(/[\\/]+$/, "");
+  if (!normalized) return null;
+  return normalized.replace(/^\/Users\/[^/]+(?=\/|$)/, "~");
+}
+
 function flightStateLabel(state: string): string {
   switch (state) {
     case "queued": return "Queued";
@@ -90,12 +136,24 @@ export function ConversationInspector() {
           `/api/flights?conversationId=${encodeURIComponent(conversationId)}`,
         ).catch(() => [] as Flight[]),
         api<Message[]>(
-          `/api/messages?conversationId=${encodeURIComponent(conversationId)}&limit=1`,
+          `/api/messages?conversationId=${encodeURIComponent(conversationId)}&limit=8`,
         ).catch(() => [] as Message[]),
       ]);
-      setMeta(sessionMeta);
-      setFlights(activeFlights ?? []);
-      setLatestMessage(recentMessages?.[recentMessages.length - 1] ?? null);
+      setMeta((previous) => keepPreviousIfJsonEqual(previous, sessionMeta));
+      setFlights((previous) =>
+        keepPreviousIfJsonEqual(previous, activeFlights ?? []),
+      );
+      setLatestMessage((previous) =>
+        keepPreviousIfJsonEqual(
+          previous,
+          recentMessages
+            ?.filter((message) => !isNoisyConversationStatusMessage(message))
+            .sort((left, right) =>
+              compareTimestampsAsc(left.createdAt, right.createdAt),
+            )
+            .at(-1) ?? null,
+        ),
+      );
       setLoaded(true);
     } catch {
       setLoaded(true);
@@ -107,23 +165,6 @@ export function ConversationInspector() {
     void load();
   }, [load]);
 
-  useBrokerEvents((event) => {
-    if (!conversationId) return;
-    if (event.kind === "message.posted") {
-      const payload = event.payload as
-        | { message?: { conversationId?: string } }
-        | undefined;
-      if (payload?.message?.conversationId === conversationId) void load();
-      return;
-    }
-    if (
-      event.kind === "flight.updated" ||
-      event.kind === "invocation.requested"
-    ) {
-      void load();
-    }
-  });
-
   const agentId = meta?.agentId ?? agentIdFromConversation(conversationId ?? "");
   const agent = useMemo(
     () => (agentId ? agents.find((a) => a.id === agentId) ?? null : null),
@@ -133,8 +174,40 @@ export function ConversationInspector() {
   const [tailPreviewEvents, setTailPreviewEvents] = useState<TailEvent[]>([]);
   const [visibleTailPreviewEvents, setVisibleTailPreviewEvents] = useState<TailEvent[]>([]);
   const visibleTailPreviewEventsRef = useRef<TailEvent[]>([]);
+  const loadAccumulationTimerRef = useRef<number | null>(null);
+  const loadAccumulationStartedAtRef = useRef<number | null>(null);
   const tailPlaybackPendingRef = useRef<TailEvent[]>([]);
+  const tailPlaybackStartTimerRef = useRef<number | null>(null);
   const tailPlaybackTimerRef = useRef<number | null>(null);
+  const trackedInvocationIdsRef = useRef<Set<string>>(new Set());
+
+  const clearScheduledLoad = useCallback(() => {
+    if (loadAccumulationTimerRef.current !== null) {
+      window.clearTimeout(loadAccumulationTimerRef.current);
+      loadAccumulationTimerRef.current = null;
+    }
+    loadAccumulationStartedAtRef.current = null;
+  }, []);
+
+  const scheduleLoad = useCallback(() => {
+    if (!conversationId) return;
+    const now = Date.now();
+    const startedAt = loadAccumulationStartedAtRef.current ?? now;
+    loadAccumulationStartedAtRef.current = startedAt;
+    const hasWaited = now - startedAt >= INSPECTOR_REFRESH_MAX_WAIT_MS;
+    const delay = hasWaited ? 0 : INSPECTOR_REFRESH_ACCUMULATE_MS;
+
+    if (loadAccumulationTimerRef.current !== null) {
+      window.clearTimeout(loadAccumulationTimerRef.current);
+    }
+    loadAccumulationTimerRef.current = window.setTimeout(() => {
+      loadAccumulationTimerRef.current = null;
+      loadAccumulationStartedAtRef.current = null;
+      void load();
+    }, delay);
+  }, [conversationId, load]);
+
+  useEffect(() => clearScheduledLoad, [clearScheduledLoad]);
 
   useEffect(() => {
     setCatalog(null);
@@ -168,7 +241,76 @@ export function ConversationInspector() {
         .sort((l, r) => (r.startedAt ?? 0) - (l.startedAt ?? 0))[0] ?? null,
     [flights],
   );
+
+  useEffect(() => {
+    trackedInvocationIdsRef.current = new Set(
+      flights.map((flight) => flight.invocationId),
+    );
+  }, [flights]);
+
+  useEffect(() => {
+    clearScheduledLoad();
+    trackedInvocationIdsRef.current.clear();
+  }, [clearScheduledLoad, conversationId]);
+
+  useBrokerEvents((event) => {
+    if (!conversationId) return;
+    if (event.kind === "message.posted") {
+      const payload = event.payload as
+        | { message?: { conversationId?: string | null } }
+        | undefined;
+      if (payload?.message?.conversationId === conversationId) scheduleLoad();
+      return;
+    }
+    if (event.kind === "conversation.upserted") {
+      const conversation = (
+        event.payload as { conversation?: EventConversationRecord } | undefined
+      )?.conversation;
+      if (conversation?.id === conversationId) scheduleLoad();
+      return;
+    }
+    if (event.kind === "invocation.requested") {
+      const invocation = (
+        event.payload as { invocation?: EventInvocationRecord } | undefined
+      )?.invocation;
+      if (invocation?.conversationId === conversationId) {
+        trackedInvocationIdsRef.current.add(invocation.id);
+        scheduleLoad();
+        return;
+      }
+      if (
+        !invocation?.conversationId &&
+        agentId &&
+        invocation?.targetAgentId === agentId
+      ) {
+        trackedInvocationIdsRef.current.add(invocation.id);
+        scheduleLoad();
+      }
+      return;
+    }
+    if (event.kind === "flight.updated") {
+      const flight = (
+        event.payload as { flight?: EventFlightRecord } | undefined
+      )?.flight;
+      if (!flight) return;
+      const matchesLoadedFlight =
+        activeFlight?.id === flight.id ||
+        activeFlight?.invocationId === flight.invocationId ||
+        trackedInvocationIdsRef.current.has(flight.invocationId) ||
+        flights.some(
+          (candidate) =>
+            candidate.id === flight.id ||
+            candidate.invocationId === flight.invocationId,
+        );
+      if (matchesLoadedFlight) {
+        scheduleLoad();
+      }
+    }
+  });
+
   const activeSessionId = catalog?.activeSessionId ?? agent?.harnessSessionId ?? meta?.harnessSessionId ?? null;
+  const harnessSessionId = agent?.harnessSessionId ?? meta?.harnessSessionId ?? null;
+  const harnessLogPath = agent?.harnessLogPath ?? null;
   const tailPreviewContext = useMemo(
     () => buildTailPreviewContext({ activeSessionId, agent, sessionMeta: meta }),
     [activeSessionId, agent, meta],
@@ -183,7 +325,11 @@ export function ConversationInspector() {
     tailPreviewContext.paths.length > 0 ||
     tailPreviewContext.projects.length > 0;
 
-  const stopTailPlayback = useCallback(() => {
+  const clearTailPlaybackTimers = useCallback(() => {
+    if (tailPlaybackStartTimerRef.current !== null) {
+      window.clearTimeout(tailPlaybackStartTimerRef.current);
+      tailPlaybackStartTimerRef.current = null;
+    }
     if (tailPlaybackTimerRef.current !== null) {
       window.clearInterval(tailPlaybackTimerRef.current);
       tailPlaybackTimerRef.current = null;
@@ -191,24 +337,63 @@ export function ConversationInspector() {
     tailPlaybackPendingRef.current = [];
   }, []);
 
-  const scheduleTailPlayback = useCallback(() => {
+  const stopTailPlayback = useCallback(() => {
+    clearTailPlaybackTimers();
+  }, [clearTailPlaybackTimers]);
+
+  const releaseTailPlayback = useCallback(() => {
     if (tailPlaybackTimerRef.current !== null) return;
-    tailPlaybackTimerRef.current = window.setInterval(() => {
-      const nextBatch = tailPlaybackPendingRef.current.slice(0, TAIL_PREVIEW_PLAYBACK_BATCH_SIZE);
-      tailPlaybackPendingRef.current = tailPlaybackPendingRef.current.slice(TAIL_PREVIEW_PLAYBACK_BATCH_SIZE);
-      if (nextBatch.length === 0) {
-        stopTailPlayback();
-        return;
+    if (tailPlaybackStartTimerRef.current !== null) {
+      window.clearTimeout(tailPlaybackStartTimerRef.current);
+      tailPlaybackStartTimerRef.current = null;
+    }
+
+    const releaseCount = tailPlaybackPendingRef.current.length;
+    if (releaseCount === 0) return;
+
+    const emitNextBatch = () => {
+      const nextBatch = tailPlaybackPendingRef.current.slice(
+        0,
+        TAIL_PREVIEW_PLAYBACK_BATCH_SIZE,
+      );
+      tailPlaybackPendingRef.current = tailPlaybackPendingRef.current.slice(
+        TAIL_PREVIEW_PLAYBACK_BATCH_SIZE,
+      );
+      if (nextBatch.length > 0) {
+        setVisibleTailPreviewEvents((previous) =>
+          mergeTailPreviewEvents(previous, nextBatch),
+        );
+      }
+      if (tailPlaybackPendingRef.current.length > 0) return;
+      if (tailPlaybackTimerRef.current !== null) {
+        window.clearInterval(tailPlaybackTimerRef.current);
+        tailPlaybackTimerRef.current = null;
       }
-      setVisibleTailPreviewEvents((previous) => mergeTailPreviewEvents(previous, nextBatch));
-    }, TAIL_PREVIEW_PLAYBACK_MS);
-  }, [stopTailPlayback]);
+    };
+
+    emitNextBatch();
+    if (tailPlaybackPendingRef.current.length > 0) {
+      tailPlaybackTimerRef.current = window.setInterval(
+        emitNextBatch,
+        TAIL_PREVIEW_PLAYBACK_MS,
+      );
+    }
+  }, []);
+
+  const scheduleTailPlayback = useCallback((delayMs: number) => {
+    if (tailPlaybackTimerRef.current !== null) return;
+    if (tailPlaybackStartTimerRef.current !== null) return;
+    tailPlaybackStartTimerRef.current = window.setTimeout(() => {
+      tailPlaybackStartTimerRef.current = null;
+      releaseTailPlayback();
+    }, delayMs);
+  }, [releaseTailPlayback]);
 
   useEffect(() => {
     visibleTailPreviewEventsRef.current = visibleTailPreviewEvents;
   }, [visibleTailPreviewEvents]);
 
-  useEffect(() => stopTailPlayback, [stopTailPlayback]);
+  useEffect(() => clearTailPlaybackTimers, [clearTailPlaybackTimers]);
 
   useEffect(() => {
     stopTailPlayback();
@@ -260,23 +445,17 @@ export function ConversationInspector() {
     const incoming = tailPreviewEvents.filter((event) => !knownIds.has(event.id));
     if (incoming.length === 0) return;
 
-    if (visible.length === 0) {
-      const immediate = incoming.slice(0, TAIL_PREVIEW_INITIAL_FRAME_SIZE);
-      const deferred = incoming.slice(TAIL_PREVIEW_INITIAL_FRAME_SIZE);
-      setVisibleTailPreviewEvents(mergeTailPreviewEvents([], immediate));
-      tailPlaybackPendingRef.current = mergeTailPreviewEvents(
-        tailPlaybackPendingRef.current,
-        deferred,
-      );
-    } else {
-      tailPlaybackPendingRef.current = mergeTailPreviewEvents(
-        tailPlaybackPendingRef.current,
-        incoming,
-      );
-    }
+    tailPlaybackPendingRef.current = mergeTailPreviewEvents(
+      tailPlaybackPendingRef.current,
+      incoming,
+    );
 
     if (tailPlaybackPendingRef.current.length > 0) {
-      scheduleTailPlayback();
+      scheduleTailPlayback(
+        visible.length === 0
+          ? TAIL_PREVIEW_INITIAL_ACCUMULATE_MS
+          : TAIL_PREVIEW_BURST_ACCUMULATE_MS,
+      );
     }
   }, [scheduleTailPlayback, stopTailPlayback, tailPreviewEvents]);
 
@@ -293,7 +472,9 @@ export function ConversationInspector() {
   }
 
   const kindLabel = meta?.kind ? KIND_LABELS[meta.kind] ?? meta.kind : "Conversation";
-  const workspaceName = pathLeaf(meta?.workspaceRoot ?? null);
+  const workspaceRoot = meta?.workspaceRoot ?? null;
+  const workspaceName = pathLeaf(workspaceRoot);
+  const workspacePath = compactPath(workspaceRoot);
   const branch = meta?.currentBranch ?? null;
   const harness = agent?.harness ?? meta?.harness ?? null;
   const lastAt = meta?.lastMessageAt ?? latestMessage?.createdAt ?? null;
@@ -307,7 +488,44 @@ export function ConversationInspector() {
     latestMessage?.body?.trim() || meta?.preview?.trim() || null;
   const previewActor = latestMessage?.actorName ?? null;
   const liveSessionLabel = compactSessionId(activeSessionId);
+  const primarySessionId = activeSessionId ?? harnessSessionId;
+  const primarySessionLabel = compactSessionId(primarySessionId);
+  const harnessSessionLabel = compactSessionId(harnessSessionId);
+  const showHarnessSessionDetail = Boolean(
+    harnessSessionId &&
+    harnessSessionId !== primarySessionId,
+  );
+  const sessionKindLabel = [
+    harness,
+    agent?.transport,
+  ].filter(Boolean).join(" · ");
+  const showSessionContext = Boolean(activeSessionId || harnessSessionId || harnessLogPath);
   const showTmuxPeek = Boolean(agent && agent.transport === "tmux");
+  const workInMotion = Boolean(activeFlight || agentStateNormalized === "working");
+  const activityTitle = workInMotion
+    ? activeFlight
+      ? flightStateLabel(activeFlight.state)
+      : "In motion"
+    : "At rest";
+  const activitySubtitle = activeFlight?.summary?.trim()
+    ?? (lastAt
+      ? `Last update ${timeAgo(lastAt) ?? "recently"}`
+      : "No recent activity recorded");
+  const workspaceMeta = [
+    branch ? `branch ${branch}` : null,
+    harness,
+    agent?.transport,
+  ].filter(Boolean);
+  const hasWorkspaceContext = Boolean(
+    workspaceName ||
+    workspacePath ||
+    workspaceMeta.length > 0,
+  );
+  const liveSectionLabel = workInMotion
+    ? "Live activity"
+    : showTmuxPeek
+      ? "Terminal"
+      : "Activity";
   const liveSummary = activeFlight?.summary?.trim()
     ?? (activeSessionId && !showTmuxPeek
       ? "Terminal session is live."
@@ -316,8 +534,7 @@ export function ConversationInspector() {
         : null);
   const tailRouteQuery = buildTailRouteQuery(tailPreviewContext, tailPreviewEvents);
   const showLiveActivity = Boolean(agent && (activeFlight || activeSessionId || tailPreviewEvents.length > 0 || showTmuxPeek));
-  const showTailStream = visibleTailPreviewEvents.length > 0 || !showTmuxPeek;
-
+  const showTailStream = !showTmuxPeek;
   const goToAgentProfile = () => {
     if (!agentId) return;
     openContent(
@@ -385,41 +602,130 @@ export function ConversationInspector() {
 
       <section className="ctx-panel-section">
         <div className="ctx-panel-section-label">Workspace</div>
-        <div className="ctx-panel-conversation-rows">
-          {workspaceName && (
-            <Row
-              label="Project"
-              value={workspaceName}
-              title={meta?.workspaceRoot ?? undefined}
-            />
-          )}
-          {branch && <Row label="Branch" value={branch} />}
-          {harness && <Row label="Harness" value={harness} />}
-          {!workspaceName && !branch && !harness && (
-            <div className="ctx-panel-empty">No workspace metadata yet</div>
-          )}
-        </div>
+        {hasWorkspaceContext ? (
+          <div className="ctx-panel-workspace-card">
+            <div className="ctx-panel-workspace-head">
+              <div className="ctx-panel-workspace-kicker">Project</div>
+              <div
+                className="ctx-panel-workspace-title"
+                title={workspaceRoot ?? workspaceName ?? undefined}
+              >
+                {workspaceName ?? "Unscoped workspace"}
+              </div>
+            </div>
+            {workspacePath && (
+              <div className="ctx-panel-workspace-path" title={workspaceRoot ?? workspacePath}>
+                {workspacePath}
+              </div>
+            )}
+            {workspaceMeta.length > 0 && (
+              <div className="ctx-panel-workspace-strip">
+                {workspaceMeta.map((item) => (
+                  <span key={item} className="ctx-panel-workspace-chip">
+                    {item}
+                  </span>
+                ))}
+              </div>
+            )}
+          </div>
+        ) : (
+          <div className="ctx-panel-empty">No workspace metadata yet</div>
+        )}
       </section>
 
+      {showSessionContext && (
+        <section className="ctx-panel-section">
+          <div className="ctx-panel-section-label">Session</div>
+          <div className="ctx-panel-session-card">
+            <div className="ctx-panel-session-head">
+              <div className="ctx-panel-session-primary">
+                {sessionKindLabel && (
+                  <div className="ctx-panel-session-kind">{sessionKindLabel}</div>
+                )}
+                {primarySessionId && (
+                  <div className="ctx-panel-session-id" title={primarySessionId}>
+                    {primarySessionLabel ?? primarySessionId}
+                  </div>
+                )}
+              </div>
+              {agentId && primarySessionId && (
+                <VantageHandoffButton
+                  agentId={agentId}
+                  className="ctx-panel-vantage-button"
+                  statusClassName="ctx-panel-vantage-status"
+                  label="Open"
+                  openingLabel="Opening..."
+                />
+              )}
+            </div>
+            {(showHarnessSessionDetail || harnessLogPath) && (
+              <div className="ctx-panel-session-meta">
+                {showHarnessSessionDetail && harnessSessionId && (
+                  <div className="ctx-panel-session-meta-item">
+                    <span>Harness session</span>
+                    <strong title={harnessSessionId}>
+                      {harnessSessionLabel ?? harnessSessionId}
+                    </strong>
+                  </div>
+                )}
+                {harnessLogPath && (
+                  <div className="ctx-panel-session-meta-item">
+                    <span>Harness log</span>
+                    <strong title={harnessLogPath}>
+                      {pathLeaf(harnessLogPath) ?? harnessLogPath}
+                    </strong>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        </section>
+      )}
+
       <section className="ctx-panel-section">
         <div className="ctx-panel-section-label">Activity</div>
-        <div className="ctx-panel-conversation-rows">
-          {typeof messageCount === "number" && (
-            <Row label="Messages" value={`${messageCount}`} />
-          )}
-          {typeof participantCount === "number" && (
-            <Row label="In conversation" value={`${participantCount}`} />
-          )}
-          {lastAt && (
-            <Row
-              label="Last"
-              value={timeAgo(lastAt) ?? ""}
-              title={formatAbsoluteTimestamp(lastAt)}
+        <div className={`ctx-panel-activity-card${workInMotion ? " ctx-panel-activity-card--active" : ""}`}>
+          <div className="ctx-panel-activity-head">
+            <span
+              className="ctx-panel-activity-dot"
+              style={{ background: workInMotion ? "var(--green)" : stateColor(agentState) }}
             />
+            <div className="ctx-panel-activity-main">
+              <div className="ctx-panel-activity-title">{activityTitle}</div>
+              <div
+                className="ctx-panel-activity-sub"
+                title={lastAt ? formatAbsoluteTimestamp(lastAt) : undefined}
+              >
+                {activitySubtitle}
+              </div>
+            </div>
+          </div>
+          {activeFlight && (
+            <div className="ctx-panel-activity-ledger">
+              <span className="ctx-panel-activity-ledger-label">
+                {flightStateLabel(activeFlight.state)}
+              </span>
+              {activeFlight.startedAt && (
+                <span
+                  className="ctx-panel-activity-ledger-time"
+                  title={formatAbsoluteTimestamp(activeFlight.startedAt)}
+                >
+                  {timeAgo(activeFlight.startedAt)}
+                </span>
+              )}
+            </div>
           )}
-          {agentStateNormalized && (
-            <Row label="Agent" value={agentStateLabel(agentState)} />
-          )}
+          <div className="ctx-panel-activity-facts">
+            {typeof messageCount === "number" && (
+              <Fact label="Messages" value={`${messageCount}`} />
+            )}
+            {typeof participantCount === "number" && (
+              <Fact label="People" value={`${participantCount}`} />
+            )}
+            {agentStateNormalized && (
+              <Fact label="Agent" value={agentStateLabel(agentState)} />
+            )}
+          </div>
         </div>
       </section>
 
@@ -435,14 +741,14 @@ export function ConversationInspector() {
       {showLiveActivity && agent && (
         <section className="ctx-panel-section ctx-panel-conversation-live-section">
           <div className="ctx-panel-section-label">
-            <span>Live activity</span>
+            <span>{liveSectionLabel}</span>
             {liveSessionLabel && (
               <span className="ctx-panel-live-session" title={activeSessionId ?? undefined}>
                 {liveSessionLabel}
               </span>
             )}
           </div>
-          <div className="ctx-panel-live-card">
+          <div className={`ctx-panel-live-card${workInMotion ? " ctx-panel-live-card--active" : ""}`}>
             <AgentLiveActions
               agent={agent}
               catalog={catalog}
@@ -518,19 +824,17 @@ export function ConversationInspector() {
   );
 }
 
-function Row({
+function Fact({
   label,
   value,
-  title,
 }: {
   label: string;
   value: string;
-  title?: string;
 }) {
   return (
-    <div className="ctx-panel-conversation-row" title={title}>
-      <span className="ctx-panel-conversation-row-label">{label}</span>
-      <span className="ctx-panel-conversation-row-value">{value}</span>
+    <div className="ctx-panel-fact">
+      <span className="ctx-panel-fact-value">{value}</span>
+      <span className="ctx-panel-fact-label">{label}</span>
     </div>
   );
 }
diff --git a/packages/web/client/scout/inspector/TmuxPeek.tsx b/packages/web/client/scout/inspector/TmuxPeek.tsx
index 86f90755..08fe292f 100644
--- a/packages/web/client/scout/inspector/TmuxPeek.tsx
+++ b/packages/web/client/scout/inspector/TmuxPeek.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState, type CSSProperties } from "react";
 import { api } from "../../lib/api.ts";
-import { timeAgo } from "../../lib/time.ts";
+import { formatAbsoluteTimestamp } from "../../lib/time.ts";
 import type { TmuxPeekPayload } from "../../lib/types.ts";
 
 const TMUX_PEEK_LINES = 44;
@@ -8,7 +8,7 @@ const TMUX_PEEK_COLUMNS = 132;
 const TMUX_PEEK_POLL_MS = 3_500;
 const TMUX_PEEK_IDLE_POLL_MS = 7_000;
 
-function samePeek(left: TmuxPeekPayload | null, right: TmuxPeekPayload): boolean {
+function sameTerminalFrame(left: TmuxPeekPayload | null, right: TmuxPeekPayload): boolean {
   return Boolean(
     left &&
     left.available === right.available &&
@@ -21,6 +21,13 @@ function samePeek(left: TmuxPeekPayload | null, right: TmuxPeekPayload): boolean
   );
 }
 
+type TmuxPeekFrame = {
+  payload: TmuxPeekPayload;
+  observedAt: number;
+  changedAt: number | null;
+  steady: boolean;
+};
+
 export function TmuxPeekPanel({
   agentId,
   enabled = true,
@@ -34,12 +41,12 @@ export function TmuxPeekPanel({
   columns?: number;
   className?: string;
 }) {
-  const [peek, setPeek] = useState<TmuxPeekPayload | null>(null);
+  const [frame, setFrame] = useState<TmuxPeekFrame | null>(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
-    setPeek(null);
+    setFrame(null);
     setError(null);
     if (!enabled || !agentId) {
       setLoading(false);
@@ -76,7 +83,17 @@ export function TmuxPeekPanel({
         );
         if (cancelled) return;
         setError(null);
-        setPeek((previous) => samePeek(previous, next) ? previous : next);
+        setFrame((previous) => {
+          if (previous && sameTerminalFrame(previous.payload, next)) {
+            return previous.steady ? previous : { ...previous, steady: true };
+          }
+          return {
+            payload: next,
+            observedAt: previous?.observedAt ?? next.capturedAt,
+            changedAt: previous ? next.capturedAt : null,
+            steady: false,
+          };
+        });
         nextDelay = next.available ? TMUX_PEEK_POLL_MS : TMUX_PEEK_IDLE_POLL_MS;
       } catch (loadError) {
         if (cancelled) return;
@@ -84,8 +101,8 @@ export function TmuxPeekPanel({
         nextDelay = TMUX_PEEK_IDLE_POLL_MS;
       } finally {
         if (!cancelled) {
+          if (firstLoad) setLoading(false);
           firstLoad = false;
-          setLoading(false);
           schedule(nextDelay);
         }
       }
@@ -109,6 +126,7 @@ export function TmuxPeekPanel({
 
   if (!enabled || !agentId) return null;
 
+  const peek = frame?.payload ?? null;
   const body = peek?.body ?? "";
   const lineCount = peek?.lineCount ?? lines;
   const columnCount = peek?.columnCount ?? columns;
@@ -124,7 +142,7 @@ export function TmuxPeekPanel({
   const hasScreen = Boolean(peek?.available && body);
   const status = error
     ? error
-    : loading && !peek
+    : loading && !frame
       ? "Sampling tmux..."
       : peek?.available === false
         ? peek.reason ?? "No tmux pane is available."
@@ -133,6 +151,21 @@ export function TmuxPeekPanel({
           : peek?.available
             ? "Pane is empty."
             : "Sampling tmux...";
+  const frameStatusLabel = frame
+    ? frame.changedAt && !frame.steady
+      ? "Changed"
+      : frame.steady
+        ? "At rest"
+        : "Sampled"
+    : null;
+  const frameStatusAt = frame?.changedAt ?? frame?.observedAt ?? null;
+  const frameStatusTitle = frame
+    ? frame.changedAt
+      ? frame.steady
+        ? `No terminal content change since ${formatAbsoluteTimestamp(frame.changedAt)}`
+        : `Terminal content changed ${formatAbsoluteTimestamp(frame.changedAt)}`
+      : `First terminal sample observed ${formatAbsoluteTimestamp(frame.observedAt)}`
+    : undefined;
 
   return (
     <div
@@ -149,24 +182,28 @@ export function TmuxPeekPanel({
             {peek.sessionId.length > 12 ? peek.sessionId.slice(0, 10) : peek.sessionId}
           </span>
         )}
-        {peek?.capturedAt && (
-          <time dateTime={new Date(peek.capturedAt).toISOString()}>
-            {timeAgo(peek.capturedAt)}
+        {frameStatusLabel && frameStatusAt && (
+          <time
+            className="ctx-panel-tmux-peek-state"
+            dateTime={new Date(frameStatusAt).toISOString()}
+            title={frameStatusTitle}
+          >
+            {frameStatusLabel}
           </time>
         )}
       </div>
       {hasScreen ? (
-        <pre className="ctx-panel-tmux-peek-screen" aria-live="polite">
+        <pre className="ctx-panel-tmux-peek-screen">
           {body}
         </pre>
       ) : (
-        <div className="ctx-panel-tmux-peek-empty" aria-live="polite">
+        <div className="ctx-panel-tmux-peek-empty">
           {status}
         </div>
       )}
       {peek?.truncated && body && (
         <div className="ctx-panel-tmux-peek-foot">
-          Last {lineCount} rows from live tmux pane
+          Last {lineCount} rows from tmux pane
         </div>
       )}
     </div>
diff --git a/packages/web/client/scout/slots/ctx-panel.css b/packages/web/client/scout/slots/ctx-panel.css
index e36b530e..baa4fe8c 100644
--- a/packages/web/client/scout/slots/ctx-panel.css
+++ b/packages/web/client/scout/slots/ctx-panel.css
@@ -1197,36 +1197,346 @@
   margin: 0 var(--space-lg) var(--space-3xs);
 }
 
-.ctx-panel-conversation-rows {
+.ctx-panel-workspace-card {
+  margin: 0 var(--space-lg);
+  min-width: 0;
+  display: grid;
+  gap: var(--space-sm);
+  padding: var(--space-md);
+  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
+  border-radius: var(--radius-md);
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--ink) 3%, transparent), transparent),
+    color-mix(in srgb, var(--bg) 78%, var(--surface));
+}
+
+.ctx-panel-workspace-head {
+  min-width: 0;
+  display: grid;
+  gap: var(--space-3xs);
+}
+
+.ctx-panel-workspace-kicker {
+  color: var(--dim);
+  font-family: var(--font-mono);
+  font-size: var(--text-2xs);
+  font-weight: 700;
+  letter-spacing: var(--tracking-md);
+  text-transform: uppercase;
+}
+
+.ctx-panel-workspace-title {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--ink);
+  font-size: var(--text-lg);
+  font-weight: 650;
+  line-height: var(--leading-tight);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ctx-panel-workspace-path {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--muted);
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  line-height: var(--leading-snug);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ctx-panel-workspace-strip {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2xs);
+  min-width: 0;
+}
+
+.ctx-panel-workspace-chip {
+  max-width: 100%;
+  min-height: 18px;
+  display: inline-flex;
+  align-items: center;
+  overflow: hidden;
+  padding: 0 var(--space-xs);
+  border: 1px solid color-mix(in srgb, var(--border) 46%, transparent);
+  border-radius: var(--radius-sm);
+  background: color-mix(in srgb, var(--surface) 58%, transparent);
+  color: var(--dim);
+  font-family: var(--font-mono);
+  font-size: var(--text-2xs);
+  font-weight: 650;
+  letter-spacing: var(--tracking-sm);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ctx-panel-session-card {
+  margin: 0 var(--space-lg);
+  min-width: 0;
+  padding: var(--space-sm);
+  border: 1px solid color-mix(in srgb, var(--border) 54%, transparent);
+  border-radius: var(--radius-md);
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--ink) 3%, transparent), transparent),
+    color-mix(in srgb, var(--bg) 80%, var(--surface));
+}
+
+.ctx-panel-session-head {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--space-sm);
+  min-width: 0;
+}
+
+.ctx-panel-session-primary {
+  min-width: 0;
   display: flex;
   flex-direction: column;
-  padding: 0 var(--space-lg);
+  gap: var(--space-3xs);
+}
+
+.ctx-panel-session-kind {
+  color: var(--dim);
+  font-family: var(--font-mono);
+  font-size: var(--text-2xs);
+  font-weight: 650;
+  letter-spacing: var(--tracking-md);
+  text-transform: uppercase;
+}
+
+.ctx-panel-session-id {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--ink);
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  font-weight: 650;
+  letter-spacing: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ctx-panel-vantage-button {
+  min-height: 28px;
+  padding: 0 var(--space-md);
+  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
+  border-radius: var(--radius-sm);
+  background: color-mix(in srgb, var(--accent) 9%, var(--bg));
+  color: var(--accent);
+  font-family: var(--font-mono);
+  font-size: var(--text-2xs);
+  font-weight: 750;
+  letter-spacing: var(--tracking-md);
+  line-height: var(--leading-none);
+  text-transform: uppercase;
+  cursor: pointer;
+}
+
+.ctx-panel-vantage-button:hover {
+  border-color: color-mix(in srgb, var(--accent) 56%, var(--border));
+  background: color-mix(in srgb, var(--accent) 16%, var(--bg));
+  color: var(--ink);
+}
+
+.ctx-panel-vantage-button:disabled {
+  cursor: progress;
+  opacity: 0.68;
+}
+
+.ctx-panel-vantage-status {
+  grid-column: 1 / -1;
+  display: block;
+  margin-top: var(--space-xs);
+  color: var(--dim);
+  font-family: var(--font-sans);
+  font-size: var(--text-xs);
+  line-height: var(--leading-snug);
+}
+
+.ctx-panel-vantage-status--ok {
+  color: var(--green);
+}
+
+.ctx-panel-vantage-status--error {
+  color: var(--red);
+}
+
+.ctx-panel-session-meta {
+  display: grid;
+  gap: var(--space-xs);
+  margin-top: var(--space-sm);
+  padding-top: var(--space-sm);
+  border-top: 1px solid color-mix(in srgb, var(--border) 42%, transparent);
 }
 
-.ctx-panel-conversation-row {
+.ctx-panel-session-meta-item {
+  min-width: 0;
   display: grid;
-  grid-template-columns: 84px minmax(0, 1fr);
+  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
+  gap: var(--space-sm);
   align-items: baseline;
-  gap: var(--space-md);
-  padding: var(--space-3xs) 0;
+}
+
+.ctx-panel-session-meta-item span {
+  overflow: hidden;
+  color: var(--dim);
+  font-family: var(--font-mono);
+  font-size: var(--text-2xs);
+  font-weight: 650;
+  letter-spacing: var(--tracking-md);
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.ctx-panel-session-meta-item strong {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--muted);
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  letter-spacing: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ctx-panel-activity-card {
+  margin: 0 var(--space-lg);
+  min-width: 0;
+  display: grid;
+  gap: var(--space-sm);
+  padding: var(--space-md);
+  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
+  border-radius: var(--radius-md);
+  background: color-mix(in srgb, var(--bg) 78%, var(--surface));
+}
+
+.ctx-panel-activity-card--active {
+  border-color: color-mix(in srgb, var(--green) 28%, var(--border));
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--green) 6%, transparent), transparent),
+    color-mix(in srgb, var(--bg) 78%, var(--surface));
+}
+
+.ctx-panel-activity-head {
+  min-width: 0;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-sm);
+}
+
+.ctx-panel-activity-dot {
+  width: 7px;
+  height: 7px;
+  flex: 0 0 auto;
+  margin-top: 6px;
+  border-radius: 50%;
+  background: var(--dim);
+}
+
+.ctx-panel-activity-main {
+  min-width: 0;
+  flex: 1;
+  display: grid;
+  gap: var(--space-3xs);
+}
+
+.ctx-panel-activity-title {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--ink);
+  font-size: var(--text-md);
+  font-weight: 650;
+  line-height: var(--leading-tight);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ctx-panel-activity-sub {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--muted);
   font-size: var(--text-sm);
+  line-height: var(--leading-snug);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ctx-panel-activity-ledger {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: baseline;
+  gap: var(--space-sm);
+  padding-top: var(--space-sm);
+  border-top: 1px solid color-mix(in srgb, var(--border) 34%, transparent);
 }
 
-.ctx-panel-conversation-row-label {
+.ctx-panel-activity-ledger-label {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--green);
   font-family: var(--font-mono);
   font-size: var(--text-2xs);
+  font-weight: 750;
   letter-spacing: var(--tracking-md);
+  text-overflow: ellipsis;
   text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.ctx-panel-activity-ledger-time {
   color: var(--dim);
+  font-family: var(--font-mono);
+  font-size: var(--text-2xs);
+  font-variant-numeric: tabular-nums;
+}
+
+.ctx-panel-activity-facts {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--space-2xs);
 }
 
-.ctx-panel-conversation-row-value {
+.ctx-panel-fact {
+  min-width: 0;
+  display: grid;
+  gap: 1px;
+  padding: var(--space-xs);
+  border: 1px solid color-mix(in srgb, var(--border) 34%, transparent);
+  border-radius: var(--radius-sm);
+  background: color-mix(in srgb, var(--surface) 48%, transparent);
+}
+
+.ctx-panel-fact-value {
+  min-width: 0;
+  overflow: hidden;
   color: var(--ink);
   font-family: var(--font-mono);
-  font-size: var(--text-sm);
-  word-break: break-word;
-  overflow-wrap: anywhere;
+  font-size: var(--text-xs);
+  font-weight: 700;
+  line-height: var(--leading-tight);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ctx-panel-fact-label {
   min-width: 0;
+  overflow: hidden;
+  color: var(--dim);
+  font-family: var(--font-mono);
+  font-size: var(--text-2xs);
+  font-weight: 650;
+  letter-spacing: var(--tracking-sm);
+  line-height: var(--leading-tight);
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  white-space: nowrap;
 }
 
 .ctx-panel-conversation-preview .ctx-panel-section-label {
@@ -1273,8 +1583,15 @@
   gap: var(--space-sm);
   padding: var(--space-sm);
   min-height: 278px;
-  border: 1px solid color-mix(in srgb, var(--green) 22%, var(--border));
+  border: 1px solid color-mix(in srgb, var(--border) 58%, transparent);
   border-radius: var(--radius-lg);
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--ink) 3%, transparent), transparent),
+    color-mix(in srgb, var(--bg) 74%, var(--surface));
+}
+
+.ctx-panel-live-card--active {
+  border-color: color-mix(in srgb, var(--green) 22%, var(--border));
   background:
     linear-gradient(180deg, color-mix(in srgb, var(--green) 5%, transparent), transparent),
     color-mix(in srgb, var(--bg) 74%, var(--surface));
@@ -1312,7 +1629,7 @@
   flex: 1;
 }
 
-.ctx-panel-tmux-peek-head time,
+.ctx-panel-tmux-peek-state,
 .ctx-panel-tmux-peek-grid,
 .ctx-panel-tmux-peek-session {
   min-width: 0;
@@ -1457,18 +1774,23 @@
   gap: var(--space-xs);
   min-height: 20px;
   font-size: var(--text-xs);
-  animation: ctx-panel-live-event-enter 160ms ease-out both;
+  animation: ctx-panel-live-event-enter 680ms cubic-bezier(0.16, 1, 0.3, 1) both;
 }
 
 @keyframes ctx-panel-live-event-enter {
-  from {
+  0% {
     opacity: 0;
-    transform: translateY(2px);
+    transform: translateY(7px) scale(0.985);
+  }
+
+  54% {
+    opacity: 1;
+    transform: translateY(-1px) scale(1.002);
   }
 
-  to {
+  100% {
     opacity: 1;
-    transform: translateY(0);
+    transform: translateY(0) scale(1);
   }
 }
 
diff --git a/packages/web/client/screens/ConversationScreen.tsx b/packages/web/client/screens/ConversationScreen.tsx
index 9d4fec1c..f7ee51e0 100644
--- a/packages/web/client/screens/ConversationScreen.tsx
+++ b/packages/web/client/screens/ConversationScreen.tsx
@@ -1,3 +1,4 @@
+import { UserPlus } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type {
   ScoutDispatchRecord,
@@ -34,7 +35,7 @@ import {
   shouldShowConversationWorkingTurn,
 } from "../lib/conversations.ts";
 import { MessageMarkup } from "../lib/message-markup.tsx";
-import { queueTakeover } from "../lib/terminal-takeover.ts";
+import { isNoisyConversationStatusMessage } from "../lib/message-visibility.ts";
 import {
   agentIdFromConversation,
   conversationForAgent,
@@ -53,7 +54,6 @@ import { useContextMenu, type MenuItem } from "../components/ContextMenu.tsx";
 import { DictationMic } from "../components/DictationMic.tsx";
 import { copyTextToClipboard } from "../lib/clipboard.ts";
 import { MessageEmbeds } from "../components/MessageEmbeds.tsx";
-import { VantageHandoffButton } from "../components/VantageHandoffButton.tsx";
 import type {
   Agent,
   Flight,
@@ -63,18 +63,10 @@ import type {
   Message,
   Route,
   SessionEntry,
-  SessionCatalogWithResume,
 } from "../lib/types.ts";
 import "./conversation-screen.css";
 import "./ops-screen.css";
 
-const KIND_LABELS: Record<string, string> = {
-  direct: "Conversation",
-  channel: "Conversation",
-  group_direct: "Conversation",
-  thread: "Thread",
-};
-
 type SlashCommand = {
   command: string;
   label: string;
@@ -201,9 +193,9 @@ type ConversationPresence = {
 
 type TurnSnapshot = {
   latest: string;
-  signalsLabel: string;
+  activityLabel: string;
   elapsedLabel: string;
-  lastSignalLabel: string;
+  lastActivityLabel: string;
 };
 
 function pathLeaf(path: string | null | undefined): string | null {
@@ -251,6 +243,22 @@ function selectCurrentFlight(flights: Flight[]): Flight | null {
   );
 }
 
+function keepPreviousIfJsonEqual<T>(previous: T, next: T): T {
+  try {
+    return JSON.stringify(previous) === JSON.stringify(next) ? previous : next;
+  } catch {
+    return next;
+  }
+}
+
+function keepPreviousSetIfEqual<T>(previous: Set<T>, next: Set<T>): Set<T> {
+  if (previous.size !== next.size) return next;
+  for (const item of next) {
+    if (!previous.has(item)) return next;
+  }
+  return previous;
+}
+
 function mapEventFlight(
   flight: EventFlightRecord,
   conversationId: string,
@@ -352,8 +360,8 @@ function turnActivityText(item: FleetActivity): string | null {
   return null;
 }
 
-function pluralizeSignal(count: number): string {
-  return count === 1 ? "1 signal" : `${count} signals`;
+function pluralizeActivityUpdate(count: number): string {
+  return count === 1 ? "1 update" : `${count} updates`;
 }
 
 function buildTurnSnapshot(input: {
@@ -373,11 +381,11 @@ function buildTurnSnapshot(input: {
   const startedAt =
     normalizeTimestampMs(currentFlight?.startedAt) ??
     normalizeTimestampMs(turnAsk?.startedAt);
-  const lastSignalAt =
+  const lastActivityAt =
     normalizeTimestampMs(latestActivity?.ts) ??
     normalizeTimestampMs(turnAsk?.updatedAt) ??
     startedAt;
-  const signalCount = Math.max(
+  const activityCount = Math.max(
     turnActivity.length,
     turnAsk?.acknowledgedAt ? 1 : 0,
     currentFlight ? 1 : 0,
@@ -385,9 +393,9 @@ function buildTurnSnapshot(input: {
 
   return {
     latest,
-    signalsLabel: pluralizeSignal(signalCount),
+    activityLabel: pluralizeActivityUpdate(activityCount),
     elapsedLabel: startedAt ? timeAgo(startedAt, nowMs) : "now",
-    lastSignalLabel: lastSignalAt ? timeAgo(lastSignalAt, nowMs) : "now",
+    lastActivityLabel: lastActivityAt ? timeAgo(lastActivityAt, nowMs) : "now",
   };
 }
 
@@ -698,20 +706,6 @@ function DismissIcon() {
   );
 }
 
-function participantListLabel(session: SessionEntry | null): string | null {
-  if (!session) return null;
-  if (session.kind === "direct") {
-    return session.agentName ?? compactAgentId(session.agentId) ?? null;
-  }
-  const participants = session.participantIds.filter(
-    (participant) => participant !== "operator",
-  );
-  if (participants.length === 0) return null;
-  return participants
-    .map((participant) => compactAgentId(participant) ?? participant)
-    .join(", ");
-}
-
 function shortConversationIdentity(id: string): string {
   if (id.startsWith("conv.")) {
     return `conv.${id.slice("conv.".length, "conv.".length + 8)}`;
@@ -803,7 +797,7 @@ function ChannelRail({
       <div className="s-thread-rail-scroll">
         {needsYouSessions.length > 0 && (
           <div className="s-thread-rail-section s-thread-rail-section--needs-you">
-            <div className="s-thread-rail-section-label">Signals</div>
+            <div className="s-thread-rail-section-label">Needs you</div>
             {needsYouSessions.map((session) => (
               <RailItem
                 key={`needs-${session.id}`}
@@ -1148,6 +1142,7 @@ export function ConversationScreen({
   const currentFlightRef = useRef<Flight | null>(null);
   const lastForegroundRefreshAtRef = useRef(0);
   const appliedInitialDraftKeyRef = useRef<string | null>(null);
+  const lastPostedReadCursorMessageIdRef = useRef<string | null>(null);
 
   const legacyAgentId = agentIdFromConversation(conversationId);
   const agentId = sessionMeta ? sessionMeta.agentId : legacyAgentId;
@@ -1164,7 +1159,10 @@ export function ConversationScreen({
   useEffect(() => {
     api<FleetState>("/api/fleet")
       .then((fleet) => {
-        setNeedsYouIds(fleetAttentionIds(fleet));
+        const nextNeedsYouIds = fleetAttentionIds(fleet);
+        setNeedsYouIds((previous) =>
+          keepPreviousSetIfEqual(previous, nextNeedsYouIds),
+        );
       })
       .catch(() => {});
   }, []);
@@ -1176,7 +1174,7 @@ export function ConversationScreen({
         `/api/session/${encodeURIComponent(conversationId)}`,
       ).catch(() => null);
 
-      setSessionMeta(meta);
+      setSessionMeta((previous) => keepPreviousIfJsonEqual(previous, meta));
       const resolvedAgentId = meta?.agentId ?? legacyAgentId;
 
       const canonicalConversationId =
@@ -1210,39 +1208,55 @@ export function ConversationScreen({
       ]);
 
       const sortedMessages = sortMessages(conversationMessages);
-      setMessages(sortedMessages);
+      const visibleMessages = sortedMessages.filter(
+        (message) => !isNoisyConversationStatusMessage(message),
+      );
+      setMessages((previous) => keepPreviousIfJsonEqual(previous, visibleMessages));
       saveLastViewed(canonicalConversationId);
       const lastMessage = sortedMessages.at(-1);
-      if (lastMessage) {
+      if (
+        lastMessage &&
+        lastPostedReadCursorMessageIdRef.current !== lastMessage.id
+      ) {
+        lastPostedReadCursorMessageIdRef.current = lastMessage.id;
         void api(`/api/conversations/${encodeURIComponent(canonicalConversationId)}/read-cursor`, {
           method: "POST",
           body: JSON.stringify({ lastReadMessageId: lastMessage.id }),
-        }).catch(() => {});
+        }).catch(() => {
+          if (lastPostedReadCursorMessageIdRef.current === lastMessage.id) {
+            lastPostedReadCursorMessageIdRef.current = null;
+          }
+        });
       }
-      setAllFlights(activeFlights);
+      setAllFlights((previous) => keepPreviousIfJsonEqual(previous, activeFlights));
       trackedInvocationIdsRef.current = new Set(
         activeFlights.map((flight) => flight.invocationId),
       );
       const nextCurrentFlight = selectCurrentFlight(activeFlights);
       const turnAgentId = nextCurrentFlight?.agentId ?? resolvedAgentId ?? null;
-      setCurrentFlight(nextCurrentFlight);
-      setTurnActivity(
-        selectTurnActivity(
-          fleet.activity,
-          nextCurrentFlight,
-          canonicalConversationId,
-          turnAgentId,
-        ),
+      const nextTurnActivity = selectTurnActivity(
+        fleet.activity,
+        nextCurrentFlight,
+        canonicalConversationId,
+        turnAgentId,
       );
-      setTurnAsk(
-        selectTurnAsk(
-          fleet.activeAsks,
-          nextCurrentFlight,
-          canonicalConversationId,
-          turnAgentId,
-        ),
+      const nextTurnAsk = selectTurnAsk(
+        fleet.activeAsks,
+        nextCurrentFlight,
+        canonicalConversationId,
+        turnAgentId,
+      );
+      setCurrentFlight((previous) =>
+        keepPreviousIfJsonEqual(previous, nextCurrentFlight),
+      );
+      setTurnActivity((previous) =>
+        keepPreviousIfJsonEqual(previous, nextTurnActivity),
+      );
+      setTurnAsk((previous) => keepPreviousIfJsonEqual(previous, nextTurnAsk));
+      const nextNeedsYouIds = fleetAttentionIds(fleet);
+      setNeedsYouIds((previous) =>
+        keepPreviousSetIfEqual(previous, nextNeedsYouIds),
       );
-      setNeedsYouIds(fleetAttentionIds(fleet));
     } catch (cause) {
       setError(cause instanceof Error ? cause.message : String(cause));
     }
@@ -1252,16 +1266,9 @@ export function ConversationScreen({
     void load();
   }, [load]);
 
-  const [sessionCatalog, setSessionCatalog] = useState<SessionCatalogWithResume | null>(null);
-  const [takeoverSent, setTakeoverSent] = useState(false);
   useEffect(() => {
-    if (!agentId) return;
-    let cancelled = false;
-    api<SessionCatalogWithResume>(`/api/agents/${encodeURIComponent(agentId)}/session-catalog`)
-      .then((result) => { if (!cancelled) setSessionCatalog(result); })
-      .catch(() => {});
-    return () => { cancelled = true; };
-  }, [agentId]);
+    lastPostedReadCursorMessageIdRef.current = null;
+  }, [conversationId]);
 
   useEffect(() => {
     currentFlightRef.current = currentFlight;
@@ -1617,38 +1624,45 @@ export function ConversationScreen({
   const threadTitle = sessionMeta ? deriveDisplayTitle(sessionMeta) : agentName;
   const canonicalConversationId = sessionMeta?.id ?? conversationId;
   const conversationAlias = sessionMeta?.alias?.trim() || null;
-  const kindLabel = sessionMeta?.kind
-    ? (KIND_LABELS[sessionMeta.kind] ?? sessionMeta.kind)
-    : "Conversation";
-  const participantLabel = participantListLabel(sessionMeta) ?? conversationId;
   const workspaceName = pathLeaf(sessionMeta?.workspaceRoot);
-  const threadUpdatedAt =
-    sessionMeta?.lastMessageAt ??
-    messages[messages.length - 1]?.createdAt ??
-    null;
-  const threadChips = [
-    workspaceName
-      ? { label: workspaceName, title: sessionMeta?.workspaceRoot ?? undefined }
-      : null,
-    sessionMeta?.currentBranch
-      ? { label: sessionMeta.currentBranch, title: sessionMeta.currentBranch }
-      : null,
-    (agent?.harness ?? sessionMeta?.harness)
-      ? {
-          label: agent?.harness ?? sessionMeta?.harness ?? "",
-          title: undefined,
-        }
-      : null,
-  ].filter((value): value is { label: string; title: string | undefined } =>
-    Boolean(value),
+  const headerParticipants = useMemo(() => {
+    const participants: Array<{
+      id: string;
+      name: string;
+      title: string;
+      agent: Agent | null;
+      operator?: boolean;
+    }> = [
+      {
+        id: "operator",
+        name: "You",
+        title: operatorName,
+        agent: null,
+        operator: true,
+      },
+    ];
+    const participantIds = sessionMeta
+      ? sessionMeta.participantIds.filter((id) => id !== "operator")
+      : agentId
+        ? [agentId]
+        : [];
+    for (const id of participantIds) {
+      const participantAgent = resolveAgentByIdentity(scopedAgents, [id]);
+      participants.push({
+        id,
+        name: participantAgent?.name ?? compactAgentId(id) ?? id,
+        title: participantAgent?.id ?? id,
+        agent: participantAgent,
+      });
+    }
+    return participants;
+  }, [agentId, operatorName, scopedAgents, sessionMeta]);
+  const visibleHeaderParticipants = headerParticipants.slice(0, 4);
+  const hiddenHeaderParticipantCount = Math.max(
+    headerParticipants.length - visibleHeaderParticipants.length,
+    0,
   );
 
-  const participantCount = sessionMeta
-    ? sessionMeta.participantIds.length
-    : isDm
-      ? 2
-      : 1;
-
   const pinnedAsk = useMemo<FleetAsk | null>(() => {
     if (!needsYouIds.has(conversationId) && !(agentId && needsYouIds.has(agentId)))
       return null;
@@ -1679,6 +1693,7 @@ export function ConversationScreen({
             attachments: message.attachments,
             metadata: message.metadata,
           };
+          if (isNoisyConversationStatusMessage(nextMessage)) return;
 
           setMessages((previous) => {
             if (previous.some((candidate) => candidate.id === message.id))
@@ -2004,17 +2019,6 @@ export function ConversationScreen({
     void record;
   };
 
-  const stackedAvatarAgents = useMemo(() => {
-    if (!sessionMeta) return [];
-    return sessionMeta.participantIds
-      .filter((id) => id !== "operator")
-      .slice(0, 4)
-      .map((id) => {
-        const a = resolveAgentByIdentity(scopedAgents, [id]);
-        return { id, name: a?.name ?? id, agent: a ?? null };
-      });
-  }, [sessionMeta, scopedAgents]);
-
   const addableParticipantAgents = useMemo(() => {
     if (!sessionMeta) return [];
     const currentParticipants = new Set(sessionMeta.participantIds);
@@ -2087,24 +2091,18 @@ export function ConversationScreen({
   return (
     <div className={`s-thread-layout${embedded ? " s-thread-layout--embedded" : ""}`}>
       <div className="s-thread-center">
-        {!embedded && showBackNav && (
-          <BackToPicker
-            slot="conversation"
-            fallback={{ view: "inbox" }}
-            navigate={navigate}
-          />
-        )}
         {!embedded && <div
           className="s-thread-center-header"
-          onClick={() =>
-            isDm
-              ? openContent(
-                  navigate,
-                  { view: "agent-info", conversationId: canonicalConversationId },
-                  { returnTo: route },
-                )
-              : undefined
-          }
+          onClick={(event) => {
+            const target = event.target as HTMLElement | null;
+            if (target?.closest("button,a,input,select,textarea")) return;
+            if (!isDm) return;
+            openContent(
+              navigate,
+              { view: "agent-info", conversationId: canonicalConversationId },
+              { returnTo: route },
+            );
+          }}
           style={isDm ? { cursor: "pointer" } : undefined}
           onContextMenu={(e) => {
             const items: MenuItem[] = [
@@ -2135,92 +2133,93 @@ export function ConversationScreen({
             showContextMenu(e, items);
           }}
         >
+          {showBackNav && (
+            <BackToPicker
+              slot="conversation"
+              fallback={{ view: "inbox" }}
+              navigate={navigate}
+              label="Back"
+              className="s-thread-header-back"
+            />
+          )}
           <div className="s-thread-center-header-info">
             <span className="s-thread-center-header-name">{threadTitle}</span>
-            <div className="s-thread-center-header-eyebrow">
-              <span className="s-thread-center-header-kicker">
-                {kindLabel}
-              </span>
-              {threadUpdatedAt && (
-                <span
-                  className="s-thread-center-header-time"
-                  title={formatAbsoluteTimestamp(threadUpdatedAt)}
-                >
-                  {timeAgo(threadUpdatedAt)}
-                </span>
-              )}
-            </div>
           </div>
 
           <div className="s-thread-center-header-right">
-            {threadChips.length > 0 && (
-              <div className="s-thread-center-header-chips">
-                {threadChips.map((chip, index) => (
-                  <span
-                    key={`${chip.label}-${index}`}
-                    className="s-thread-center-chip"
-                    title={chip.title}
-                  >
-                    {chip.label}
+            {visibleHeaderParticipants.length > 0 && (
+              <div className="s-thread-participants" aria-label="Conversation participants">
+                {visibleHeaderParticipants.map((participant) => {
+                  const participantStyle = {
+                    background: actorColor(participant.name),
+                  } as React.CSSProperties;
+                  const content = (
+                    <>
+                      <span
+                        className="s-thread-participant-avatar"
+                        style={participantStyle}
+                        aria-hidden="true"
+                      >
+                        {participant.name[0]?.toUpperCase() ?? "?"}
+                      </span>
+                      <span className="s-thread-participant-name">
+                        {participant.name}
+                      </span>
+                    </>
+                  );
+                  if (participant.agent) {
+                    return (
+                      <button
+                        key={participant.id}
+                        type="button"
+                        className="s-thread-participant-pill s-thread-participant-pill--button"
+                        title={`Open ${participant.name} profile`}
+                        onClick={() =>
+                          openContent(
+                            navigate,
+                            {
+                              view: "agent-info",
+                              conversationId: conversationForAgent(participant.agent!.id),
+                            },
+                            { returnTo: route },
+                          )
+                        }
+                      >
+                        {content}
+                      </button>
+                    );
+                  }
+                  return (
+                    <span
+                      key={participant.id}
+                      className="s-thread-participant-pill"
+                      title={participant.title}
+                    >
+                      {content}
+                    </span>
+                  );
+                })}
+                {hiddenHeaderParticipantCount > 0 && (
+                  <span className="s-thread-participant-overflow">
+                    +{hiddenHeaderParticipantCount}
                   </span>
-                ))}
+                )}
               </div>
             )}
             {!embedded && canAddParticipants && (
               <button
                 type="button"
-                className="s-btn s-btn-sm s-thread-add-participant-trigger"
-                onClick={(event) => {
-                  event.stopPropagation();
+                className="s-thread-add-participant-trigger"
+                onClick={() => {
                   setAddParticipantError(null);
                   setAddParticipantOpen((open) => !open);
                 }}
+                title="Add participant"
+                aria-label="Add participant"
               >
-                Add participant
+                <UserPlus size={14} strokeWidth={1.9} aria-hidden="true" />
               </button>
             )}
-            {stackedAvatarAgents.length > 0 && (
-              <div className="s-thread-center-avatars">
-                {stackedAvatarAgents.map((a) => {
-                  const avatarStyle = {
-                    "--size": "22px",
-                    background: actorColor(a.name),
-                  } as React.CSSProperties;
-                  return a.agent ? (
-                    <button
-                      key={a.id}
-                      type="button"
-                      className="s-ops-avatar s-thread-center-avatar-button"
-                      style={avatarStyle}
-                      title={`Open ${a.name} profile`}
-                      aria-label={`Open ${a.name} profile`}
-                      onClick={(event) => {
-                        event.stopPropagation();
-                        openContent(
-                          navigate,
-                          { view: "agent-info", conversationId: conversationForAgent(a.agent!.id) },
-                          { returnTo: route },
-                        );
-                      }}
-                    >
-                      {a.name[0]?.toUpperCase() ?? "?"}
-                    </button>
-                  ) : (
-                    <div
-                      key={a.id}
-                      className="s-ops-avatar"
-                      style={avatarStyle}
-                      title={a.name}
-                    >
-                      {a.name[0]?.toUpperCase() ?? "?"}
-                    </div>
-                  );
-                })}
-                <span className="s-thread-center-participant-count">
-                  {participantCount}
-                </span>
-              </div>
-            )}
           </div>
         </div>}
 
@@ -2359,84 +2358,6 @@ export function ConversationScreen({
           </div>
         )}
 
-        {!embedded && isDm && agent && (agent.harnessSessionId || agent.harnessLogPath || sessionCatalog?.activeSessionId) && (
-          <details className="s-thread-meta-disclosure">
-            <summary className="s-thread-meta-toggle">
-              Session details
-            </summary>
-            <div className="s-thread-meta-block">
-              {sessionCatalog?.activeSessionId && (
-                <div className="s-thread-meta-row">
-                  <span className="s-thread-meta-row-label">Session ID</span>
-                  <span className="s-thread-meta-row-value s-thread-meta-row-value--accent" title={sessionCatalog.activeSessionId}>
-                    {sessionCatalog.activeSessionId.slice(0, 8)}
-                  </span>
-                </div>
-              )}
-              {sessionCatalog?.resumeCommand && (
-                <div className="s-thread-meta-row">
-                  <span className="s-thread-meta-row-label">Takeover</span>
-                  <span className="s-thread-meta-row-value">
-                    <button
-                      type="button"
-                      className="s-thread-meta-takeover-btn"
-                      title={sessionCatalog.resumeCommand}
-                      onClick={() => {
-                        void queueTakeover({
-                          command: sessionCatalog.resumeCommand!,
-                          cwd: sessionCatalog.resumeCwd,
-                          agentId,
-                        }).then(() =>
-                          openContent(
-                            navigate,
-                            { view: "terminal", agentId: agentId ?? undefined },
-                            { returnTo: route },
-                          ),
-                        );
-                        setTakeoverSent(true);
-                      }}
-                    >
-                      {takeoverSent ? "Going…" : `Takeover — ${sessionCatalog.resumeCommand}`}
-                    </button>
-                  </span>
-                </div>
-              )}
-              {sessionCatalog?.activeSessionId && (
-                <div className="s-thread-meta-row">
-                  <span className="s-thread-meta-row-label">Vantage</span>
-                  <span className="s-thread-meta-row-value s-thread-meta-actions">
-                    <VantageHandoffButton
-                      agentId={agentId}
-                      className="s-thread-meta-vantage-btn"
-                      statusClassName="s-thread-meta-vantage-status"
-                      label="Open in Vantage"
-                      openingLabel="Opening…"
-                    />
-                  </span>
-                </div>
-              )}
-              {agent.harnessSessionId && (
-                <div className="s-thread-meta-row">
-                  <span className="s-thread-meta-row-label">
-                    Harness Session
-                  </span>
-                  <span className="s-thread-meta-row-value">
-                    {agent.harnessSessionId}
-                  </span>
-                </div>
-              )}
-              {agent.harnessLogPath && (
-                <div className="s-thread-meta-row">
-                  <span className="s-thread-meta-row-label">Harness Log</span>
-                  <span className="s-thread-meta-row-value">
-                    {agent.harnessLogPath}
-                  </span>
-                </div>
-              )}
-            </div>
-          </details>
-        )}
-
         {error && <p className="s-thread-error">{error}</p>}
 
         <div className="s-thread-feed">
@@ -2521,49 +2442,49 @@ export function ConversationScreen({
                     data-class={rowClass}
                     onContextMenu={(e) => onMessageContextMenu(e, message)}
                   >
-                    <div className="s-thread-msg-card s-thread-msg-card--avatar-row">
-                      {(() => {
-                        const profileNav = !isYou && messageAgent
-                          ? () =>
-                              openContent(
-                                navigate,
-                                {
-                                  view: "agent-info",
-                                  conversationId: conversationForAgent(messageAgent.id),
-                                },
-                                { returnTo: route },
-                              )
-                          : null;
-                        const avatarLabel = (isYou
-                          ? operatorName[0]
-                          : message.actorName?.[0] ?? "?"
-                        ).toUpperCase();
-                        const avatarStyle = {
-                          "--size": "28px",
-                          background: actorColor(
-                            isYou ? operatorName : (message.actorName ?? "?"),
-                          ),
-                        } as React.CSSProperties;
-                        return profileNav ? (
-                          <button
-                            type="button"
-                            className="s-ops-avatar s-thread-msg-avatar s-thread-msg-avatar--nav"
-                            style={avatarStyle}
-                            onClick={profileNav}
-                            aria-label={`View profile for ${message.actorName ?? "agent"}`}
-                            title={`View profile for ${message.actorName ?? "agent"}`}
-                          >
-                            {avatarLabel}
-                          </button>
-                        ) : (
-                          <div className="s-ops-avatar s-thread-msg-avatar" style={avatarStyle}>
-                            {avatarLabel}
-                          </div>
-                        );
-                      })()}
+                    <div className="s-thread-msg-card">
                       <div className="s-thread-msg-card-content">
                         <div className="s-thread-msg-header">
                           <div className="s-thread-msg-meta">
+                            {(() => {
+                              const profileNav = !isYou && messageAgent
+                                ? () =>
+                                    openContent(
+                                      navigate,
+                                      {
+                                        view: "agent-info",
+                                        conversationId: conversationForAgent(messageAgent.id),
+                                      },
+                                      { returnTo: route },
+                                    )
+                                : null;
+                              const avatarLabel = (isYou
+                                ? operatorName[0]
+                                : message.actorName?.[0] ?? "?"
+                              ).toUpperCase();
+                              const avatarStyle = {
+                                "--size": "24px",
+                                background: actorColor(
+                                  isYou ? operatorName : (message.actorName ?? "?"),
+                                ),
+                              } as React.CSSProperties;
+                              return profileNav ? (
+                                <button
+                                  type="button"
+                                  className="s-ops-avatar s-thread-msg-avatar s-thread-msg-avatar--nav"
+                                  style={avatarStyle}
+                                  onClick={profileNav}
+                                  aria-label={`View profile for ${message.actorName ?? "agent"}`}
+                                  title={`View profile for ${message.actorName ?? "agent"}`}
+                                >
+                                  {avatarLabel}
+                                </button>
+                              ) : (
+                                <div className="s-ops-avatar s-thread-msg-avatar" style={avatarStyle}>
+                                  {avatarLabel}
+                                </div>
+                              );
+                            })()}
                             {!isYou && messageAgent ? (
                               <button
                                 type="button"
@@ -2744,8 +2665,8 @@ export function ConversationScreen({
                       </div>
                       <dl className="s-thread-turn-snapshot-stats">
                         <div className="s-thread-turn-snapshot-stat">
-                          <dt>Signals</dt>
-                          <dd>{workingTurnSnapshot.signalsLabel}</dd>
+                          <dt>Activity</dt>
+                          <dd>{workingTurnSnapshot.activityLabel}</dd>
                         </div>
                         <div className="s-thread-turn-snapshot-stat">
                           <dt>Elapsed</dt>
@@ -2753,7 +2674,7 @@ export function ConversationScreen({
                         </div>
                         <div className="s-thread-turn-snapshot-stat">
                           <dt>Last</dt>
-                          <dd>{workingTurnSnapshot.lastSignalLabel}</dd>
+                          <dd>{workingTurnSnapshot.lastActivityLabel}</dd>
                         </div>
                       </dl>
                     </div>
diff --git a/packages/web/client/screens/conversation-screen.css b/packages/web/client/screens/conversation-screen.css
index 97cfdd8b..0b99c0a2 100644
--- a/packages/web/client/screens/conversation-screen.css
+++ b/packages/web/client/screens/conversation-screen.css
@@ -178,13 +178,29 @@
 .s-thread-center-header {
   display: flex;
   align-items: center;
-  gap: var(--space-xl);
-  padding: var(--space-lg) var(--space-3xl);
+  gap: var(--space-md);
+  min-height: 62px;
+  padding: var(--space-md) var(--space-3xl);
   border-bottom: 1px solid color-mix(in srgb, var(--border) 92%, var(--surface));
   background: var(--surface);
   flex-shrink: 0;
 }
 
+.s-thread-header-back {
+  min-width: 30px;
+  height: 30px;
+  padding: 0 var(--space-sm);
+  border-color: color-mix(in srgb, var(--border) 34%, transparent);
+  background: transparent;
+  color: var(--muted);
+  font-size: var(--text-xs);
+  align-self: center;
+}
+
+.s-thread-header-back:hover {
+  background: color-mix(in srgb, var(--ink) 4%, transparent);
+}
+
 .s-thread-center-header-info {
   flex: 1;
   min-width: 0;
@@ -196,107 +212,108 @@
   font-weight: 650;
   letter-spacing: -0.02em;
   color: var(--ink);
-}
-
-.s-thread-center-header-eyebrow {
-  display: flex;
-  align-items: center;
-  gap: var(--space-xs);
-  margin-top: var(--space-3xs);
-}
-
-.s-thread-center-header-kicker {
-  font-family: var(--font-mono);
-  font-size: var(--text-2xs);
-  font-weight: 600;
-  letter-spacing: var(--tracking-md);
-  text-transform: uppercase;
-  color: var(--dim);
-}
-
-.s-thread-center-header-time {
-  font-size: var(--text-xs);
-  color: var(--dim);
-  font-variant-numeric: tabular-nums;
-}
-
-.s-thread-center-header-time::before {
-  content: "\00b7";
-  margin-right: var(--space-2xs);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .s-thread-center-header-right {
   display: flex;
   align-items: center;
   gap: var(--space-sm);
+  min-width: 0;
   flex-shrink: 0;
 }
 
-.s-thread-center-header-chips {
+.s-thread-participants {
   display: flex;
   align-items: center;
-  flex-wrap: wrap;
-  gap: var(--space-2xs);
+  gap: var(--space-xs);
+  min-width: 0;
+  max-width: min(48vw, 520px);
 }
 
-.s-thread-center-chip {
+.s-thread-participant-pill,
+.s-thread-participant-overflow {
   display: inline-flex;
   align-items: center;
-  min-height: 20px;
-  padding: 0 var(--space-sm);
-  border-radius: var(--radius-md);
-  border: 1px solid color-mix(in srgb, var(--border) 70%, var(--surface));
-  background: var(--bg);
-  font-size: var(--text-xs);
-  font-weight: 500;
-  letter-spacing: var(--tracking-xs);
-  color: var(--dim);
-  font-family: var(--font-mono);
+  height: 28px;
+  border: 1px solid color-mix(in srgb, var(--border) 58%, transparent);
+  border-radius: var(--radius-pill);
+  background: color-mix(in srgb, var(--bg) 82%, transparent);
+  color: var(--muted);
+  font-size: var(--text-sm);
 }
 
-.s-thread-center-avatars {
-  display: flex;
-  align-items: center;
+.s-thread-participant-pill {
+  gap: var(--space-xs);
+  max-width: 172px;
+  min-width: 0;
+  padding: 2px var(--space-sm) 2px 3px;
 }
 
-.s-thread-center-avatars .s-ops-avatar {
-  --size: 22px;
-  margin-left: -6px;
-  border: 2px solid var(--surface);
+button.s-thread-participant-pill {
+  font: inherit;
+  cursor: pointer;
 }
 
-.s-thread-center-avatars .s-ops-avatar:first-child {
-  margin-left: 0;
+button.s-thread-participant-pill:hover {
+  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
+  color: var(--ink);
 }
 
-.s-thread-center-avatar-button {
-  padding: 0;
+.s-thread-participant-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  flex: 0 0 auto;
+  border-radius: var(--radius-pill);
   color: var(--scout-chrome-avatar-ink);
-  cursor: pointer;
-  transition:
-    border-color 120ms ease,
-    transform 120ms ease;
+  font-size: var(--text-xs);
+  font-weight: 700;
 }
 
-.s-thread-center-avatar-button:hover {
-  border-color: color-mix(in srgb, var(--accent) 52%, var(--surface));
-  transform: translateY(-1px);
+.s-thread-participant-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.s-thread-center-avatar-button:focus-visible {
-  outline: 2px solid color-mix(in srgb, var(--accent) 75%, transparent);
-  outline-offset: 2px;
+.s-thread-participant-overflow {
+  justify-content: center;
+  min-width: 28px;
+  padding: 0 var(--space-xs);
+  color: var(--dim);
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
 }
 
-.s-thread-center-participant-count {
-  font-size: var(--text-sm);
+.s-thread-add-participant-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  flex-shrink: 0;
+  border: 1px solid color-mix(in srgb, var(--border) 48%, transparent);
+  border-radius: var(--radius-md);
+  background: color-mix(in srgb, var(--bg) 70%, transparent);
   color: var(--muted);
-  font-variant-numeric: tabular-nums;
-  margin-left: var(--space-2xs);
+  cursor: pointer;
+  transition:
+    background 120ms ease,
+    border-color 120ms ease,
+    color 120ms ease;
 }
 
-.s-thread-add-participant-trigger {
-  flex-shrink: 0;
+.s-thread-add-participant-trigger:hover {
+  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
+  background: color-mix(in srgb, var(--accent) 8%, transparent);
+  color: var(--ink);
 }
 
 .s-thread-identity-row {
@@ -542,29 +559,13 @@ button.s-thread-identity-chip:hover {
   display: flex;
   flex-direction: column;
   gap: var(--space-xs);
-  max-width: min(85%, 720px);
+  max-width: min(88%, 760px);
 }
 
 .s-thread-feed-block--you {
   align-self: flex-end;
 }
 
-.s-thread-feed-block--you .s-thread-msg-header {
-  flex-direction: row-reverse;
-}
-
-.s-thread-feed-block--you .s-thread-msg-meta {
-  flex-direction: row-reverse;
-}
-
-.s-thread-msg--you .s-thread-msg-card--avatar-row {
-  flex-direction: row-reverse;
-}
-
-.s-thread-msg--you .s-thread-msg-card-content {
-  text-align: left;
-}
-
 .s-thread-msg-permalink {
   opacity: 0;
   transition: opacity 0.15s;
@@ -619,7 +620,7 @@ button.s-thread-identity-chip:hover {
 }
 
 .s-thread-feed-block--full-width.s-thread-feed-block--you .s-thread-msg {
-  max-width: min(85%, 720px);
+  max-width: min(88%, 760px);
 }
 
 .s-thread-day-divider {
@@ -645,19 +646,26 @@ button.s-thread-identity-chip:hover {
 }
 
 .s-thread-msg {
-  max-width: min(100%, 720px);
+  max-width: min(100%, 760px);
 }
 
 .s-thread-msg-card {
   display: flex;
   flex-direction: column;
-  gap: var(--space-2xs);
-  padding: var(--space-lg) var(--space-2xl);
+  gap: var(--space-sm);
+  padding: var(--space-md) var(--space-xl);
   border-radius: var(--radius-2xl);
   border: 1px solid color-mix(in srgb, var(--border) 80%, var(--surface));
   background: var(--surface);
 }
 
+.s-thread-msg-card-content {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+}
+
 .s-thread-msg-card--avatar-row {
   flex-direction: row;
   gap: var(--space-lg);
@@ -666,16 +674,12 @@ button.s-thread-identity-chip:hover {
 
 .s-thread-msg-card--avatar-row .s-thread-msg-card-content {
   flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-xs);
 }
 
 .s-thread-msg-avatar {
-  --size: 32px;
+  --size: 24px;
   flex-shrink: 0;
-  margin-top: var(--space-3xs);
+  margin-top: 0;
 }
 
 .s-thread-msg-avatar--nav {
@@ -702,17 +706,21 @@ button.s-thread-identity-chip:hover {
 
 .s-thread-msg-header {
   display: flex;
-  align-items: center;
-  gap: var(--space-sm);
+  align-items: flex-start;
+  gap: var(--space-md);
 }
 
 .s-thread-msg-meta {
   display: flex;
   align-items: center;
+  flex: 1;
+  flex-wrap: wrap;
+  min-width: 0;
   gap: var(--space-sm);
 }
 
 .s-thread-msg-actor {
+  min-width: 0;
   font-size: var(--text-md);
   font-weight: 600;
   letter-spacing: 0;
@@ -744,6 +752,9 @@ button.s-thread-msg-actor:focus-visible {
 }
 
 .s-thread-msg-handle {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
   font-size: var(--text-xs);
   color: var(--dim);
   font-family: var(--font-mono);
@@ -777,6 +788,7 @@ button.s-thread-msg-actor:focus-visible {
 }
 
 .s-thread-msg-time {
+  flex-shrink: 0;
   font-size: var(--text-xs);
   font-family: var(--font-sans);
   color: var(--dim);
@@ -785,11 +797,6 @@ button.s-thread-msg-actor:focus-visible {
   margin-left: auto;
 }
 
-.s-thread-msg--you .s-thread-msg-time {
-  margin-left: 0;
-  margin-right: auto;
-}
-
 .s-thread-msg-card:hover .s-thread-msg-time {
   opacity: 1;
 }
@@ -798,10 +805,10 @@ button.s-thread-msg-actor:focus-visible {
   padding: 0;
   border: none;
   background: none;
-  font-size: var(--text-lg);
+  font-size: var(--text-md);
   line-height: var(--leading-normal);
   color: var(--ink);
-  letter-spacing: -0.005em;
+  letter-spacing: 0;
   white-space: pre-wrap;
   word-break: break-word;
   cursor: text;
@@ -1534,137 +1541,6 @@ button.s-thread-sidebar-participant:focus-visible {
   font-weight: 600;
 }
 
-/* ── Session meta + disclosure ── */
-
-.s-thread-meta-disclosure {
-  margin: 0 var(--space-3xl);
-  padding-top: 0;
-  border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
-}
-
-.s-thread-meta-toggle {
-  padding: var(--space-xs) 0;
-  font-size: var(--text-xs);
-  font-weight: 500;
-  color: var(--dim);
-  letter-spacing: 0.01em;
-  cursor: pointer;
-  list-style: none;
-  user-select: none;
-}
-
-.s-thread-meta-toggle::-webkit-details-marker {
-  display: none;
-}
-
-.s-thread-meta-toggle::before {
-  content: "\25B6";
-  font-size: 8px; /* below --text-2xs(9); left literal */
-  margin-right: var(--space-xs);
-  display: inline-block;
-  transition: transform 0.15s ease;
-}
-
-details[open] > .s-thread-meta-toggle::before {
-  transform: rotate(90deg);
-}
-
-.s-thread-meta-block {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-sm);
-  padding: var(--space-sm) var(--space-xl) var(--space-lg);
-  border: 1px solid color-mix(in srgb, var(--border) 80%, var(--surface));
-  border-radius: var(--radius-xl);
-  margin-bottom: var(--space-sm);
-  background: var(--bg);
-}
-
-.s-thread-meta-row {
-  display: grid;
-  grid-template-columns: 100px minmax(0, 1fr);
-  font-size: var(--text-sm);
-}
-
-.s-thread-meta-row-label {
-  font-weight: 500;
-  color: var(--dim);
-}
-
-.s-thread-meta-row-value {
-  color: var(--muted);
-  font-family: var(--font-mono);
-  word-break: break-all;
-}
-
-.s-thread-meta-row-value--accent {
-  color: var(--accent);
-}
-
-.s-thread-meta-takeover-btn {
-  font-family: var(--font-mono);
-  font-size: var(--text-sm);
-  color: var(--green);
-  background: color-mix(in srgb, var(--green) 6%, transparent);
-  border: 1px solid color-mix(in srgb, var(--green) 18%, transparent);
-  padding: var(--space-2xs) var(--space-sm);
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  transition: background 0.15s;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.s-thread-meta-takeover-btn:hover {
-  background: color-mix(in srgb, var(--green) 14%, transparent);
-}
-
-.s-thread-meta-actions {
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-  min-width: 0;
-}
-
-.s-thread-meta-vantage-btn {
-  font-family: var(--font-mono);
-  font-size: var(--text-sm);
-  color: var(--accent);
-  background: color-mix(in srgb, var(--accent) 6%, transparent);
-  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
-  padding: var(--space-2xs) var(--space-sm);
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  transition: background 0.15s;
-}
-
-.s-thread-meta-vantage-btn:hover {
-  background: color-mix(in srgb, var(--accent) 14%, transparent);
-}
-
-.s-thread-meta-vantage-btn:disabled {
-  cursor: progress;
-  opacity: 0.55;
-}
-
-.s-thread-meta-vantage-status {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--dim);
-}
-
-.s-thread-meta-vantage-status--ok {
-  color: var(--accent);
-}
-
-.s-thread-meta-vantage-status--error {
-  color: var(--red);
-}
-
 /* ── Empty / error states ── */
 
 .s-thread-empty {
@@ -1833,9 +1709,6 @@ details[open] > .s-thread-meta-toggle::before {
     margin-inline: var(--space-2xl);
   }
 
-  .s-thread-meta-disclosure {
-    margin-inline: var(--space-2xl);
-  }
 }
 
 /* ── Embedded mode (inside agent profile tabs) ── */