pilotswarm 0.4.1 → 0.5.1

package/ui/core/src/selectors.js

@@ -1706,9 +1706,17 @@ function splashArtWidth(text) {
 function buildChatMessageLines(message, maxWidth, options = {}) {
     if (message?.splash) {
         // Swap in the narrow-viewport variant when the main art would
-        // overflow the pane (mobile portal, narrow terminals).
+        // overflow the pane (mobile portal, narrow terminals). When the
+        // width metrics keep the desktop art, still hand renderers the
+        // mobile variant (splashAlt) so environments with real media
+        // queries (the browser) can make the final call by CSS viewport —
+        // character metrics and device width can disagree.
         const useMobile = message.mobileText && splashArtWidth(message.text) > maxWidth;
-        return [{ kind: "markup", value: useMobile ? message.mobileText : message.text }];
+        return [{
+            kind: "markup",
+            value: useMobile ? message.mobileText : message.text,
+            splashAlt: !useMobile && message.mobileText ? message.mobileText : null,
+        }];
     }
 
     if (message?.thinking) {
@@ -1860,6 +1868,177 @@ function buildChatMessageLines(message, maxWidth, options = {}) {
     return renderedLines;
 }
 
+// Activity-log event types that are not surfaced as live "recent action" lines
+// in the chat pane: bookkeeping, high-frequency streaming noise, and the turn
+// bracket markers (which don't read well as prose).
+const LIVE_ACTIVITY_SKIP = new Set([
+    "assistant.usage",
+    "session.info",
+    "session.idle",
+    "session.usage_info",
+    "pending_messages.modified",
+    "pending_messages.cancelled",
+    "abort",
+    "assistant.turn_start",
+    "assistant.turn_end",
+    "assistant.streaming_progress",
+    "session.turn_completed",
+    "tool.execution_partial_result",
+    "tool.execution_progress",
+]);
+
+// Consecutive events of these types collapse into a single line (streaming
+// reasoning/intent fires many events per turn).
+const LIVE_ACTIVITY_COLLAPSE = new Set(["assistant.reasoning", "assistant.intent"]);
+
+// Friendly verbs for the live activity lines, keyed by event type. An empty
+// string means "show the detail as-is" (e.g. tool calls, where the tool name is
+// the action). Types absent from the map fall back to their cleaned detail.
+const LIVE_ACTIVITY_VERBS = {
+    "tool.execution_start": "",
+    "tool.execution_complete": "",
+    "assistant.reasoning": "Thinking",
+    "assistant.intent": "Planning",
+    "session.agent_spawned": "Spawning sub-agent",
+    "session.wait_started": "Waiting",
+    "session.input_required_started": "Awaiting input",
+    "session.command_received": "Command",
+    "session.command_completed": "Command",
+    "session.compaction_start": "Compacting context",
+    "session.compaction_complete": "Context compacted",
+    "session.dehydrated": "Dehydrating",
+    "session.hydrated": "Rehydrated",
+    "session.rehydrated": "Rehydrated",
+    "session.lossy_handoff": "Handed off to a new worker",
+    "session.error": "Error",
+    "session.cron_started": "Scheduled",
+    "session.cron_scheduled": "Scheduled",
+    "session.cron_fired": "Woke on schedule",
+    "session.cron_at_scheduled": "Scheduled",
+    "session.cron_at_started": "Scheduled",
+    "session.cron_at_fired": "Woke on schedule",
+    "system.message": "",
+};
+
+// Turn a raw activity item into a friendly one-line action label: strip the
+// timestamp and [bracket] tag, then prefix a human verb where one applies.
+function friendlyLiveActivity(item, maxLen = 96) {
+    const raw = String(item?.text || "")
+        .replace(/^\s*\d{1,2}:\d{2}(?::\d{2})?\s*/, "")
+        .replace(/^\[[^\]]+\]\s*/, "")
+        .replace(/\s+/g, " ")
+        .trim();
+    const verb = LIVE_ACTIVITY_VERBS[item?.eventType];
+    let text;
+    if (verb === undefined || verb === "") {
+        text = raw;
+    } else if (raw) {
+        text = `${verb} \u2014 ${raw}`;
+    } else {
+        text = verb;
+    }
+    text = text || "Working";
+    return text.length > maxLen ? `${text.slice(0, maxLen - 1)}\u2026` : text;
+}
+
+// Format an elapsed duration for the live activity card header (e.g. "12s",
+// "1m 05s", "1h 02m").
+function formatElapsed(ms) {
+    const totalSec = Math.max(0, Math.floor((Number(ms) || 0) / 1000));
+    if (totalSec < 60) return `${totalSec}s`;
+    const minutes = Math.floor(totalSec / 60);
+    const seconds = totalSec % 60;
+    if (minutes < 60) return `${minutes}m ${String(seconds).padStart(2, "0")}s`;
+    const hours = Math.floor(minutes / 60);
+    const mins = minutes % 60;
+    return `${hours}h ${String(mins).padStart(2, "0")}m`;
+}
+
+// Claude-style live activity: while a turn is running, surface the last few
+// actions as a short text scrollback. Assistant messages can land before the
+// turn is actually done (streamed/tool-interleaved replies), so the card is
+// governed by session status rather than by the newest transcript role.
+// `options.spinnerFrame` animates the active (latest) line's marker;
+// `options.maxActions` caps the line count.
+export function selectLiveActivityLines(state, options = {}) {
+    if (state?.ui?.chatViewMode === "summary") return [];
+    const session = selectActiveSession(state);
+    if (!session || session.isGroup) return [];
+    const status = String(session?.status || "").toLowerCase();
+    if (status !== "running") return [];
+    const history = state.history?.bySessionId?.get(session.sessionId) || null;
+    // Use the latest user message as the elapsed-time anchor when available,
+    // but do not hide the card just because assistant text has already landed;
+    // the session may still be running tools or follow-up model work.
+    const chat = Array.isArray(history?.chat) ? history.chat : [];
+    let turnStartAt = 0;
+    for (let i = chat.length - 1; i >= 0; i -= 1) {
+        const role = chat[i]?.role;
+        if (role === "user") {
+            turnStartAt = Number(chat[i]?.createdAt || 0);
+            break;
+        }
+    }
+    const activity = Array.isArray(history?.activity) ? history.activity : [];
+    const maxActions = Number.isFinite(options.maxActions) ? options.maxActions : 3;
+    const recent = [];
+    let acceptedType = null;
+    let oldestGatheredAt = 0;
+    for (let i = activity.length - 1; i >= 0 && recent.length < maxActions; i -= 1) {
+        const item = activity[i];
+        if (!item || LIVE_ACTIVITY_SKIP.has(item.eventType)) continue;
+        if (item.eventType === acceptedType && LIVE_ACTIVITY_COLLAPSE.has(item.eventType)) continue;
+        const detail = friendlyLiveActivity(item);
+        if (!detail) continue;
+        recent.unshift(detail);
+        acceptedType = item.eventType;
+        const at = Number(item.createdAt || 0);
+        if (at > 0) oldestGatheredAt = oldestGatheredAt ? Math.min(oldestGatheredAt, at) : at;
+    }
+    if (recent.length === 0) return [];
+    // Render as a bordered card: the portal turns box-drawing lines whose top
+    // row has >2 runs into a `ps-chat-card`; the terminal shows the box art.
+    // Header carries the animated spinner + "Working"; body lists the recent
+    // actions, most recent highlighted.
+    const borderColor = "cyan";
+    const spinner = String(options.spinnerFrame || "").trim() || "\u25cf";
+    const nowMs = Number.isFinite(options.now) ? options.now : Date.now();
+    const startAt = turnStartAt || oldestGatheredAt;
+    const elapsedLabel = startAt > 0 ? formatElapsed(nowMs - startAt) : "";
+    const titleRuns = [
+        { text: ` ${spinner} Working `, color: borderColor, bold: true },
+        ...(elapsedLabel ? [{ text: `\u00b7 ${elapsedLabel} `, color: "gray" }] : []),
+    ];
+    const titleWidth = titleRuns.reduce((sum, run) => sum + String(run.text || "").length, 0);
+    const maxWidth = Math.max(24, Math.min(96, Math.floor(Number(options.maxWidth) || 64)));
+    const widestBody = recent.reduce((max, detail) => Math.max(max, detail.length + 2), 0);
+    const cardWidth = Math.max(20, Math.min(maxWidth, Math.max(titleWidth + 3, widestBody + 4)));
+    const contentWidth = Math.max(1, cardWidth - 4);
+    const bodyLines = recent.map((detail, index) => {
+        const isLatest = index === recent.length - 1;
+        return fitRuns([
+            { text: isLatest ? "\u25cf " : "\u00b7 ", color: isLatest ? "cyan" : "gray", bold: isLatest },
+            { text: detail, color: isLatest ? "cyan" : "gray" },
+        ], contentWidth);
+    });
+    const topFill = Math.max(0, cardWidth - titleWidth - 3);
+    const card = [[
+        { text: "\u250c\u2500", color: borderColor },
+        ...titleRuns,
+        { text: `${"\u2500".repeat(topFill)}\u2510`, color: borderColor },
+    ]];
+    for (const runs of bodyLines) {
+        card.push([
+            { text: "\u2502 ", color: borderColor },
+            ...padRunsToDisplayWidth(runs, contentWidth),
+            { text: " \u2502", color: borderColor },
+        ]);
+    }
+    card.push([{ text: `\u2514${"\u2500".repeat(Math.max(1, cardWidth - 2))}\u2518`, color: borderColor }]);
+    card.push([{ text: "", color: null }]);
+    return card;
+}
+
 export function selectChatLines(state, maxWidth = 80, options = {}) {
     const messages = selectActiveChat(state);
     if (!messages || messages.length === 0) {
@@ -2012,10 +2191,19 @@ export function selectChatPaneChrome(state, options = {}) {
         ? null
         : buildLiveProgressState(session, history, history?.chat || [], outboxItems);
 
+    // Border top-right: status · model · context (mirrors the session-row meta),
+    // with the live turn-progress label appended while a turn is running.
+    const mode = state.connection?.mode || "local";
+    const metaRuns = buildSelectedSessionMetaRuns(session, mode);
+    const progressRuns = buildChatProgressTitleRuns(progress);
+    const titleRight = progressRuns
+        ? [...metaRuns, ...(metaRuns.length ? [{ text: " · ", color: "gray" }] : []), ...progressRuns]
+        : metaRuns;
+
     return {
         color: session.isSystem ? "yellow" : "cyan",
         title,
-        titleRight: buildChatProgressTitleRuns(progress),
+        titleRight: titleRight.length ? titleRight : null,
         animateTitleRight: Boolean(progress),
     };
 }
@@ -2751,22 +2939,24 @@ export function selectStatusBar(state) {
     const chatViewMode = state.ui?.chatViewMode === "summary" ? "summary" : "transcript";
     const chatViewHint = chatViewMode === "summary" ? "s transcript" : "s summary";
     const hints = {
-        [FOCUS_REGIONS.SESSIONS]: `up/down switch · ctrl-u/ctrl-d page · ctrl-g move group · f filter · P pin · V select · d done · D delete · r refresh · t title · ${fullscreenHint} · {/} session pane · [/] side pane · T themes · a linked items · drag copy · tab next pane · p prompt`,
-        [FOCUS_REGIONS.CHAT]: `${chatViewHint} · j/k scroll · ctrl-u/ctrl-d page · e older history · g/G top/bottom · d done · ${fullscreenHint} · {/} session pane · [/] side pane · T themes · a linked items · drag copy · tab next pane · p prompt`,
+        [FOCUS_REGIONS.SESSIONS]: `up/down switch · ctrl-u/ctrl-d page · ctrl-g move group · f filter · P pin · V select · d done · D delete · r refresh · t title · ${fullscreenHint} · [/] resize pane · {/} columns · T themes · ? help · a linked items · drag copy · tab next pane · p prompt`,
+        [FOCUS_REGIONS.CHAT]: `${chatViewHint} · j/k scroll · ctrl-u/ctrl-d page · e older history · g/G top/bottom · d done · ${fullscreenHint} · [/] resize pane · {/} columns · T themes · ? help · a linked items · drag copy · tab next pane · p prompt`,
         [FOCUS_REGIONS.INSPECTOR]: state.ui.inspectorTab === "logs"
-            ? `j/k scroll · ctrl-u/ctrl-d page · g/G top/bottom · d done · t tail · f filter · ${fullscreenHint} · left/right tab · [/] side pane · T themes · a linked items · drag copy · tab next pane`
+            ? `j/k scroll · ctrl-u/ctrl-d page · g/G top/bottom · d done · t tail · f filter · ${fullscreenHint} · left/right tab · [/] resize pane · {/} columns · T themes · ? help · a linked items · drag copy · tab next pane`
             : state.ui.inspectorTab === "stats"
-                ? `j/k scroll · ctrl-u/ctrl-d page · g/G top/bottom · f cycle session/fleet/users · d done · ${fullscreenHint} · left/right tab · [/] side pane · T themes · m next tab · tab next pane`
+                ? `j/k scroll · ctrl-u/ctrl-d page · g/G top/bottom · f cycle session/fleet/users · d done · ${fullscreenHint} · left/right tab · [/] resize pane · {/} columns · T themes · ? help · m next tab · tab next pane`
             : state.ui.inspectorTab === "files"
                 ? state.files?.fullscreen
-                    ? "a download · x delete · u/ctrl-a upload · o open · f filter · j/k scroll · ctrl-u/ctrl-d page · g/G top/bottom · d done · v/esc close fullscreen · left/right tab · {/} session pane · [/] side pane · T themes · tab next pane"
-                    : "j/k files · a download · x delete · u/ctrl-a upload · o open · f filter · ctrl-u/ctrl-d page preview · g/G preview top/bottom · d done · v fullscreen · left/right tab · {/} session pane · [/] side pane · T themes · tab next pane"
+                    ? "a download · x delete · u/ctrl-a upload · o open · f filter · j/k scroll · ctrl-u/ctrl-d page · g/G top/bottom · d done · v/esc close fullscreen · left/right tab · [/] resize pane · {/} columns · T themes · ? help · tab next pane"
+                    : "j/k files · a download · x delete · u/ctrl-a upload · o open · f filter · ctrl-u/ctrl-d page preview · g/G preview top/bottom · d done · v fullscreen · left/right tab · [/] resize pane · {/} columns · T themes · ? help · tab next pane"
                 : state.ui.inspectorTab === "history"
-                    ? `j/k scroll · ctrl-u/ctrl-d page · g/G top/bottom · f format · r refresh · a save artifact · d done · ${fullscreenHint} · left/right tab · [/] side pane · T themes · m next tab · tab next pane`
-                    : `j/k scroll · ctrl-u/ctrl-d page · g/G top/bottom · d done · ${fullscreenHint} · left/right tab · [/] side pane · T themes · h/l focus · a linked items · drag copy · m next tab · tab next pane`,
-        [FOCUS_REGIONS.ACTIVITY]: `j/k scroll · ctrl-u/ctrl-d page · g/G top/bottom · d done · ${fullscreenHint} · {/} session pane · [/] side pane · T themes · a linked items · drag copy · h left · tab next pane`,
+                    ? `j/k scroll · ctrl-u/ctrl-d page · g/G top/bottom · f format · r refresh · a save artifact · d done · ${fullscreenHint} · left/right tab · [/] resize pane · {/} columns · T themes · ? help · m next tab · tab next pane`
+                    : state.ui.inspectorTab === "sequence"
+                        ? `j/k turn · enter expand · ctrl-u/ctrl-d page · g/G top/bottom · d done · ${fullscreenHint} · left/right tab · [/] resize pane · {/} columns · T themes · ? help · m next tab · tab next pane`
+                        : `j/k scroll · ctrl-u/ctrl-d page · g/G top/bottom · d done · ${fullscreenHint} · left/right tab · [/] resize pane · {/} columns · T themes · ? help · h/l focus · a linked items · drag copy · m next tab · tab next pane`,
+        [FOCUS_REGIONS.ACTIVITY]: `j/k scroll · ctrl-u/ctrl-d page · g/G top/bottom · d done · ${fullscreenHint} · [/] resize pane · {/} columns · T themes · ? help · a linked items · drag copy · h left · tab next pane`,
         [FOCUS_REGIONS.PROMPT]: hasPendingQuestion
-            ? `type answer · enter reply · alt-enter newline · T themes · arrows move · alt-left/right word · alt-delete word · @ artifacts · @@ sessions · ${paneFullscreen ? "esc pane" : "esc sessions"}`
+            ? `type answer · enter reply · alt-enter newline · T themes · ? help · arrows move · alt-left/right word · alt-delete word · @ artifacts · @@ sessions · ${paneFullscreen ? "esc pane" : "esc sessions"}`
             : editingPendingOutbox
                 ? selectedQueuedOutbox
                     ? `queued prompt selected · d delete · up/down cycle queued · enter/esc new prompt · ${paneFullscreen ? "esc pane" : "esc sessions"}`
@@ -2777,12 +2967,18 @@ export function selectStatusBar(state) {
                     ? `type message · enter queues · enter on empty sends batch · up/down recall pending · alt-enter newline · @ artifacts · @@ sessions · ${paneFullscreen ? "esc pane" : "esc sessions"}`
                     : hasOutbox
                         ? `type message · enter queues behind durable items · up/down recall pending · alt-enter newline · @ artifacts · @@ sessions · ${paneFullscreen ? "esc pane" : "esc sessions"}`
-                        : `type message · enter send · alt-enter newline · T themes · arrows move · alt-left/right word · alt-delete word · @ artifacts · @@ sessions · ${paneFullscreen ? "esc pane" : "esc sessions"}`,
+                        : `type message · enter send · alt-enter newline · T themes · ? help · arrows move · alt-left/right word · alt-delete word · @ artifacts · @@ sessions · ${paneFullscreen ? "esc pane" : "esc sessions"}`,
     };
 
+    let right = hints[focus] || hints[FOCUS_REGIONS.SESSIONS];
+    // Surface the Stop-turn hint at the front (so truncation never eats it)
+    // exactly while a turn is running; it stays listed, grayed, in `?` help.
+    if (canStopSessionTurn(selectActiveSession(state))) {
+        right = `ctrl-x stop · ${right}`;
+    }
     return {
         left: state.ui.statusText,
-        right: hints[focus] || hints[FOCUS_REGIONS.SESSIONS],
+        right,
     };
 }
 
@@ -2848,6 +3044,15 @@ function formatCompactBytes(value) {
     return `${mb >= 10 ? Math.round(mb) : mb.toFixed(1)} MB`;
 }
 
+/** "12.4×" compression ratio (raw / stored); null when either is missing. */
+function formatCompressionRatio(rawBytes, storedBytes) {
+    const raw = Number(rawBytes);
+    const stored = Number(storedBytes);
+    if (!Number.isFinite(raw) || !Number.isFinite(stored) || raw <= 0 || stored <= 0) return null;
+    const ratio = raw / stored;
+    return `${ratio >= 10 ? ratio.toFixed(0) : ratio.toFixed(1)}×`;
+}
+
 function summarizeEventPreview(text, maxLength = 18) {
     const normalized = String(text || "")
         .replace(/\s+/g, " ")
@@ -3338,6 +3543,77 @@ function buildNodeMapHeaderLine(nodeLabels, colWidth) {
     return runs;
 }
 
+const SEQ_REASONING_EFFORTS = new Set(["low", "medium", "high", "xhigh", "minimal", "none"]);
+
+function shortModelForSequence(value) {
+    const model = String(value || "").trim();
+    if (!model) return "unknown";
+    const parts = model.split(":").filter(Boolean);
+    if (parts.length === 0) return "unknown";
+    const last = String(parts[parts.length - 1]).toLowerCase();
+    const index = parts.length > 1 && SEQ_REASONING_EFFORTS.has(last) ? parts.length - 2 : parts.length - 1;
+    return parts[Math.max(0, index)] || parts[0] || "unknown";
+}
+
+function formatTokenCountK(value) {
+    const tokens = Number(value || 0);
+    if (!Number.isFinite(tokens)) return "?K";
+    const scaled = tokens / 1000;
+    return `${scaled.toFixed(Math.abs(scaled) >= 10 ? 1 : 2)}K`;
+}
+
+function formatSeqCount(value) {
+    return Number(value || 0).toLocaleString("en-US");
+}
+
+// Turn index -> turn_completed event data, mirroring the portal's per-turn
+// completion model so the TUI sequence tab can show the same detail.
+export function buildSequenceCompletionByTurn(events) {
+    const map = new Map();
+    for (const event of events || []) {
+        if (event?.eventType !== "session.turn_completed") continue;
+        const turn = Number(event?.data?.turnIndex ?? event?.data?.iteration);
+        if (!Number.isFinite(turn)) continue;
+        map.set(turn, event.data || {});
+    }
+    return map;
+}
+
+// The magenta "Mod: ..." divider (+ optional detail lines) inserted under a
+// completed-turn row when the TUI sequence tab is showing turn expansion.
+function buildSequenceTurnLines(data, { expanded, selected, maxWidth }) {
+    const caret = expanded ? "v" : ">";
+    const model = shortModelForSequence(data?.model);
+    const dur = data?.durationMs != null ? `${(Number(data.durationMs) / 1000).toFixed(1)}s` : "n/a";
+    const dividerText = `${caret} Mod: ${model}  tok ${formatTokenCountK(data?.tokensInput)}/${formatTokenCountK(data?.tokensOutput)}  dur ${dur}`;
+    const lines = [];
+    if (selected) {
+        lines.push(buildActiveHighlightLine(padDisplayText(dividerText, Math.max(18, maxWidth))));
+    } else {
+        lines.push([{ text: dividerText, color: "magenta" }]);
+    }
+    if (expanded) {
+        const details = [
+            ["model", data?.reasoningEffort ? `${data?.model || "(unknown)"}:${data.reasoningEffort}` : (data?.model || "(unknown)")],
+            ["duration", data?.durationMs != null ? `${formatSeqCount(data.durationMs)} ms` : null],
+            ["tokens", `${formatSeqCount(data?.tokensInput)} in / ${formatSeqCount(data?.tokensOutput)} out`],
+            ["cache", `${formatSeqCount(data?.tokensCacheRead)} read / ${formatSeqCount(data?.tokensCacheWrite)} write`],
+            ["tools", `${formatSeqCount(data?.toolCalls)} calls / ${formatSeqCount(data?.toolErrors)} errors`],
+            ["names", Array.isArray(data?.toolNames) && data.toolNames.length ? data.toolNames.join(", ") : null],
+            ["worker", data?.workerNodeId || null],
+            ["result", data?.resultType || null],
+            ["error", data?.errorMessage || null],
+        ].filter(([, value]) => value != null && value !== "");
+        for (const [label, value] of details) {
+            lines.push([
+                { text: `      ${label}: `, color: "gray" },
+                { text: String(value), color: "white" },
+            ]);
+        }
+    }
+    return lines;
+}
+
 function buildSequenceViewForSession(state, session, maxWidth, options = {}) {
     const allowWideColumns = Boolean(options?.allowWideColumns);
     const statsLines = buildSequenceStatsLines(state, session, maxWidth);
@@ -3379,6 +3655,29 @@ function buildSequenceViewForSession(state, session, maxWidth, options = {}) {
         Math.floor((availableWidth - timeWidth - 1 - gapWidth) / Math.max(1, nodeLabels.length)),
     );
 
+    const expansion = options?.sequenceExpansion || null;
+    const completionByTurn = expansion ? buildSequenceCompletionByTurn(history?.events || []) : null;
+    const expandedTurns = expansion ? new Set((expansion.expandedTurns || []).map(Number)) : null;
+    const selectedTurn = expansion && expansion.selectedTurn != null ? Number(expansion.selectedTurn) : null;
+
+    const lines = [];
+    for (const entry of visibleEntries) {
+        lines.push(buildSequenceEventLine(entry, nodeLabels, timeWidth, colWidth));
+        if (expansion && entry.completedTurn != null) {
+            const turn = Number(entry.completedTurn);
+            const data = completionByTurn.get(turn);
+            if (data) {
+                for (const detailLine of buildSequenceTurnLines(data, {
+                    expanded: expandedTurns.has(turn),
+                    selected: selectedTurn === turn,
+                    maxWidth: availableWidth,
+                })) {
+                    lines.push(detailLine);
+                }
+            }
+        }
+    }
+
     return {
         stickyLines: [
             ...statsLines,
@@ -3386,7 +3685,7 @@ function buildSequenceViewForSession(state, session, maxWidth, options = {}) {
             buildSequenceHeaderLine(nodeLabels, timeWidth, colWidth),
             buildSequenceDividerLine(nodeLabels, timeWidth, colWidth),
         ],
-        lines: visibleEntries.map((entry) => buildSequenceEventLine(entry, nodeLabels, timeWidth, colWidth)),
+        lines,
     };
 }
 
@@ -4463,6 +4762,8 @@ function buildSessionStatsLines(state, session, maxWidth) {
         title: "Persistence",
         body: formatKeyValueTable([
             ["Snapshot",        formatCompactBytes(summary.snapshotSizeBytes)],
+            ["Uncompressed",    summary.rawSizeBytes ? formatCompactBytes(summary.rawSizeBytes) : null],
+            ["Compression",     formatCompressionRatio(summary.rawSizeBytes, summary.snapshotSizeBytes)],
             ["Dehydrations",    String(summary.dehydrationCount)],
             ["Hydrations",      String(summary.hydrationCount)],
             ["Lossy Handoffs",  String(summary.lossyHandoffCount)],
@@ -4492,6 +4793,8 @@ function buildSessionStatsLines(state, session, maxWidth) {
                 ["Cache Write",  formatCompactNumber(tree.totalTokensCacheWrite)],
                 ["Hit Ratio",    treeHitLabel],
                 ["Snapshot",     formatCompactBytes(tree.totalSnapshotSizeBytes)],
+                ["Uncompressed", tree.totalRawSizeBytes ? formatCompactBytes(tree.totalRawSizeBytes) : null],
+                ["Compression",  formatCompressionRatio(tree.totalRawSizeBytes, tree.totalSnapshotSizeBytes)],
                 ["Dehydrations", String(tree.totalDehydrationCount)],
                 ["Hydrations",   String(tree.totalHydrationCount)],
             ]),
@@ -5163,7 +5466,7 @@ export function selectInspector(state, options = {}) {
     switch (activeTab) {
         case "sequence": {
             const sequenceView = session
-                ? buildSequenceViewForSession(state, session, maxWidth, { allowWideColumns })
+                ? buildSequenceViewForSession(state, session, maxWidth, { allowWideColumns, sequenceExpansion: options?.sequenceExpansion || null })
                 : { stickyLines: [], lines: ["No session selected."] };
             stickyLines = sequenceView.stickyLines || [];
             lines = sequenceView.lines;
@@ -5348,6 +5651,100 @@ function buildThemeSwatchRuns(entries = []) {
     return runs;
 }
 
+const KEYBINDING_HELP = [
+    { section: "Global", bindings: [
+        ["Tab / Shift-Tab", "focus next / previous pane"],
+        ["h l   ← →", "focus left / right pane"],
+        ["p", "focus the prompt"],
+        ["[  ]", "shrink / grow the focused pane"],
+        ["{  }", "grow left / right column"],
+        ["v", "fullscreen the focused pane"],
+        ["n / r", "new session / refresh"],
+        ["a", "linked items — artifacts to download, links to open"],
+        ["m", "cycle inspector tab"],
+        ["c / d / D", "cancel / done / delete session"],
+        ["ctrl-x  (ctrl-esc)", "stop the current turn", { dim: true }],
+        ["T / N / A", "theme / model / admin"],
+        ["?", "toggle this help"],
+        ["q", "quit (double-tap)"],
+        ["Esc", "back / focus sessions"],
+    ] },
+    { section: "Sessions pane", bindings: [
+        ["j k   ↑ ↓", "move selection"],
+        ["ctrl-u / ctrl-d", "page up / down"],
+        ["ctrl-g", "move to group"],
+        ["+ / -", "expand / collapse subtree"],
+        ["t", "rename"],
+        ["P", "pin / unpin"],
+        ["V / space", "select mode / toggle selection"],
+        ["f", "filter"],
+    ] },
+    { section: "Chat / transcript", bindings: [
+        ["s", "toggle transcript / summary"],
+        ["j k   ↑ ↓", "scroll"],
+        ["ctrl-u / ctrl-d", "page"],
+        ["e", "expand older history"],
+        ["g / G", "top / bottom"],
+    ] },
+    { section: "Inspector pane", bindings: [
+        ["← →   m", "previous / next / cycle tab"],
+        ["j k", "scroll"],
+        ["enter", "expand / collapse a turn (Sequence tab)"],
+        ["logs", "t tail · f filter"],
+        ["stats", "f cycle session/fleet/users"],
+        ["files", "a download · x delete · u upload · o open · f filter · v full"],
+        ["history", "r refresh · a export · f format"],
+    ] },
+    { section: "Activity pane", bindings: [
+        ["j k   ↑ ↓", "scroll"],
+        ["g / G", "top / bottom"],
+    ] },
+    { section: "Prompt", bindings: [
+        ["enter", "send"],
+        ["alt/ctrl-j", "newline"],
+        ["ctrl-a", "attach artifact"],
+        ["@ / @@", "artifact / session reference"],
+    ] },
+    { section: "Overlays", bindings: [
+        ["Esc / q", "close"],
+        ["enter", "confirm / apply"],
+        ["j k   ↑ ↓", "navigate"],
+        ["Tab", "switch modal pane"],
+    ] },
+];
+
+export function buildHelpModalRows() {
+    const rows = [];
+    const keysWidth = 18;
+    for (const group of KEYBINDING_HELP) {
+        if (rows.length > 0) rows.push([{ text: "", color: "gray" }]);
+        rows.push([{ text: group.section, color: "cyan", bold: true }]);
+        for (const [keys, desc, opts] of group.bindings) {
+            const dim = Boolean(opts?.dim);
+            rows.push([
+                { text: "  " + String(keys).padEnd(keysWidth), color: dim ? "gray" : "yellow" },
+                { text: String(desc), color: dim ? "gray" : "white" },
+            ]);
+        }
+    }
+    return rows;
+}
+
+// TUI-only help overlay (the portal relies on tooltips). Reuses the single
+// modal slot; opened with `?` and dismissed with `?`/Esc.
+export function selectHelpModal(state, maxWidth = 88) {
+    const modal = state.ui?.modal;
+    if (!modal || modal.type !== "help") return null;
+    const rows = buildHelpModalRows();
+    const selectedRowIndex = Math.max(0, Math.min(Number(modal.selectedIndex) || 0, rows.length - 1));
+    return {
+        title: "Keybindings — ? or Esc to close",
+        idealWidth: Math.max(64, Math.min(maxWidth, 88)),
+        rows,
+        selectedRowIndex,
+    };
+}
+
 export function selectThemePickerModal(state, maxWidth = 80) {
     const modal = state.ui.modal;
     if (!modal || modal.type !== "themePicker") return null;

package/ui/core/src/state.js

@@ -126,6 +126,8 @@ export function createInitialState({ mode = "local", branding = null, themeId =
         ui: {
             focusRegion: FOCUS_REGIONS.SESSIONS,
             inspectorTab: INSPECTOR_TABS[0],
+            sequenceExpandedTurns: [],
+            sequenceSelectedTurn: null,
             chatViewMode: chatViewMode === "summary" ? "summary" : "transcript",
             statsViewMode: "session",
             prompt: "",

package/ui/react/src/chat-status.js

@@ -2,6 +2,28 @@ import React from "react";
 
 const DOT_FRAMES = [".\u00a0\u00a0", "..\u00a0", "..."];
 
+const SPINNER_FRAMES = ["\u280b", "\u2819", "\u2839", "\u2838", "\u283c", "\u2834", "\u2826", "\u2827", "\u2807", "\u280f"];
+
+// Braille spinner frame that advances while `active`, for the live activity
+// line's leading marker. Returns "" when inactive so callers can fall back to a
+// static glyph.
+export function useSpinnerFrame(active, intervalMs = 120) {
+    const [frameIndex, setFrameIndex] = React.useState(0);
+
+    React.useEffect(() => {
+        if (!active) {
+            setFrameIndex(0);
+            return undefined;
+        }
+        const timer = setInterval(() => {
+            setFrameIndex((current) => (current + 1) % SPINNER_FRAMES.length);
+        }, intervalMs);
+        return () => clearInterval(timer);
+    }, [active, intervalMs]);
+
+    return active ? SPINNER_FRAMES[frameIndex] : "";
+}
+
 export function useAnimatedDots(active, intervalMs = 360) {
     const [frameIndex, setFrameIndex] = React.useState(0);