pilotswarm 0.5.15 → 0.5.17

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pilotswarm",
-    "version": "0.5.15",
+    "version": "0.5.17",
     "description": "PilotSwarm application package: terminal UI, browser portal + Web API server, and MCP server — one install, three bins.",
     "type": "module",
     "license": "MIT",
@@ -78,7 +78,7 @@
         "hono": "^4.12.10",
         "ink": "^6.8.0",
         "jose": "^6.2.2",
-        "pilotswarm-sdk": "^0.5.15",
+        "pilotswarm-sdk": "^0.5.17",
         "react": "^19.2.4",
         "react-dom": "^19.2.4",
         "ws": "^8.18.2"

package/tui/plugins/.mcp.json

@@ -1 +1,7 @@
-{}
+{
+  "deepwiki": {
+    "type": "http",
+    "url": "https://mcp.deepwiki.com/mcp",
+    "tools": ["*"]
+  }
+}

package/tui/plugins/agents/deepwiki.agent.md

@@ -0,0 +1,44 @@
+---
+schemaVersion: 2
+version: 1.0.0
+name: deepwiki
+title: DeepWiki Code Explorer
+description: Answers questions about any public GitHub repository using the DeepWiki MCP server. Loads ONLY the DeepWiki MCP — no other servers — demonstrating per-agent MCP scoping.
+mcpServers:
+  - deepwiki
+inheritDefaultMcpServers: false
+initialPrompt: >
+  Introduce yourself as the DeepWiki Code Explorer. Ask the user which public
+  GitHub repository (owner/repo) they want to explore and what they want to know.
+---
+
+# DeepWiki Code Explorer
+
+You answer questions about **public GitHub codebases** using the **DeepWiki**
+MCP server — the only MCP server available to you. DeepWiki serves
+AI-generated documentation grounded in a repository's code.
+
+Your DeepWiki tools:
+- `read_wiki_structure` — list the documentation topics/sections for a repo.
+- `read_wiki_contents` — read the full generated documentation for a repo.
+- `ask_question` — ask a natural-language question about a repo and get an
+  answer grounded in its code and docs.
+
+All of these take a repository as `owner/repo` (for example `facebook/react`).
+
+How to work:
+1. Identify the target repository as `owner/repo`. If the user names a project
+   without the owner, or it's ambiguous, ask which `owner/repo` they mean
+   before calling a tool.
+2. For a specific question, prefer `ask_question`. For an overview or to find
+   the right area first, start with `read_wiki_structure`, then drill in with
+   `read_wiki_contents` or `ask_question`.
+3. Ground every answer in what DeepWiki returns and name the repo (and the
+   topic/section) you drew from. If DeepWiki has no coverage for a repo, say so
+   plainly instead of guessing.
+4. Keep answers focused and technical; quote identifiers and file/module names
+   when they help.
+
+You have no web browsing and cannot clone or read repositories directly —
+everything comes through the DeepWiki MCP server. If a question can't be
+answered from DeepWiki, say what's missing.

package/tui/src/node-sdk-transport.js

@@ -1037,8 +1037,20 @@ export class NodeSdkTransport {
             : null;
         if (profile?.githubCopilotKeySet === true) return effectiveModel;
 
-        throw new Error(
-            "GitHub Copilot key not configured. Set GITHUB_TOKEN on the worker or set your per-user GitHub Copilot key in Admin before creating GitHub Copilot model sessions.",
+        // The caller never picked this Copilot model — it came from the
+        // catalog default. Fall back to the first non-Copilot model instead
+        // of failing a session the user has no key for.
+        if (!model && typeof this.mgmt.listModels === "function") {
+            const fallback = (this.mgmt.listModels() || [])
+                .find((entry) => entry?.providerType !== "github" && entry?.qualifiedName);
+            if (fallback) return fallback.qualifiedName;
+        }
+
+        throw Object.assign(
+            new Error(
+                "GitHub Copilot key missing or invalid. Set GITHUB_TOKEN on the worker or configure your per-user GitHub Copilot key in Admin before using GitHub Copilot models.",
+            ),
+            { code: "GHCP_KEY_MISSING", status: 400 },
         );
     }
 

package/ui/core/src/controller.js

@@ -216,6 +216,22 @@ const CONTEXT_TIER_LABELS = {
     long_context: "Long context (larger window, higher cost)",
 };
 
+function formatContextWindowSize(value) {
+    const tokens = Number(value);
+    if (!Number.isSafeInteger(tokens) || tokens <= 0) return null;
+    if (tokens % 1_000_000 === 0) return `${tokens / 1_000_000}M`;
+    if (tokens % 1_000 === 0) return `${tokens / 1_000}K`;
+    return tokens.toLocaleString("en-US");
+}
+
+function formatContextTierLabel(tier, tokenLimit) {
+    const size = formatContextWindowSize(tokenLimit);
+    if (!size) return CONTEXT_TIER_LABELS[tier] || tier;
+    return tier === "long_context"
+        ? `Long context (${size} tokens, higher cost)`
+        : `Default (${size} tokens)`;
+}
+
 function extractSessionModelFromEvents(events = []) {
     // Only explicit model-change events may update the session's model.
     // Deriving it from any event that happens to carry a `model` field lets
@@ -1103,6 +1119,7 @@ export class PilotSwarmUiController {
             text: String(prompt || ""),
             createdAt: Date.now(),
             phase: normalizedPhase,
+            attempted: false,
             clientMessageIds: [id],
         };
     }
@@ -1122,9 +1139,9 @@ export class PilotSwarmUiController {
     }
 
     getEditableOutboxItems(sessionId) {
-        // Only pending items are editable/cancelable on the client; queued items
-        // are durable and need a durable cancel API to remove.
-        return this.getPendingOutboxItems(sessionId);
+        // Attempted envelopes are immutable because the server may already
+        // have accepted their IDs even when the client saw a transport error.
+        return this.getPendingOutboxItems(sessionId).filter((item) => item?.attempted !== true);
     }
 
     getPromptEditSessionMatch(sessionId = this.getState().sessions.activeSessionId) {
@@ -1412,7 +1429,11 @@ export class PilotSwarmUiController {
             return false;
         }
 
-        const pendingItems = this.getPendingOutboxItems(sessionId);
+        const allPendingItems = this.getPendingOutboxItems(sessionId);
+        const attemptedItem = allPendingItems.find((item) => item?.attempted === true);
+        const pendingItems = attemptedItem
+            ? [attemptedItem]
+            : allPendingItems.filter((item) => item?.attempted !== true);
         if (pendingItems.length === 0) return false;
 
         // Merge all current pending items into a single durable envelope.
@@ -1430,6 +1451,7 @@ export class PilotSwarmUiController {
             text: mergedText,
             createdAt: pendingItems[0].createdAt || Date.now(),
             phase: "pending",
+            attempted: true,
             clientMessageIds: mergedClientMessageIds,
         };
         const pendingIdSet = new Set(pendingItems.map((item) => item.id));
@@ -1480,10 +1502,11 @@ export class PilotSwarmUiController {
                     }
                 }, 6000);
             } else {
-                // Transient failure: revert the merged envelope back to the
-                // original pending items so the user can edit/retry them.
-                const reverted = items.flatMap((item) => (
-                    item.id === mergedItem.id ? pendingItems : [item]
+                // Transient failure: preserve the exact attempted envelope.
+                // Re-merging it with fresh messages could make server-side
+                // duplicate suppression drop the fresh content too.
+                const reverted = items.map((item) => (
+                    item.id === mergedItem.id ? { ...mergedItem, phase: "pending", attempted: true } : item
                 ));
                 this.setSessionOutboxItems(sessionId, reverted);
             }
@@ -3763,7 +3786,8 @@ export class PilotSwarmUiController {
         const items = supported.map((tier) => ({
             id: tier,
             tier,
-            label: CONTEXT_TIER_LABELS[tier] || tier,
+            tokenLimit: modelItem?.contextWindowSizes?.[tier] || null,
+            label: formatContextTierLabel(tier, modelItem?.contextWindowSizes?.[tier]),
             isDefault: selectedTier === tier,
         }));
         const selectedIndex = Math.max(0, items.findIndex((item) => item.id === selectedTier));
@@ -3800,25 +3824,38 @@ export class PilotSwarmUiController {
         const groupedModels = typeof this.transport.getModelsByProvider === "function"
             ? this.transport.getModelsByProvider()
             : groupModelsByProvider(models);
+        // Whether the current user has a per-user GitHub Copilot key:
+        // true/false when known, null when the transport can't tell (then
+        // no model gets disabled — never lock models out on a guess).
+        const ghcpUserKeySet = await this._resolveGhcpUserKeySet();
         const items = [];
         const groups = groupedModels
             .map((group) => ({
                 providerId: group.providerId,
                 providerType: group.type || group.providerType,
                 models: (group.models || []).map((model) => {
+                    const providerType = model.providerType || group.type || group.providerType;
+                    // Copilot models with no worker-level token are unusable
+                    // for users who haven't stored their own GitHub key.
+                    const ghcpKeyMissing = providerType === "github"
+                        && model.credentialAvailable === false
+                        && ghcpUserKeySet === false;
                     const item = {
                         id: model.qualifiedName,
                         qualifiedName: model.qualifiedName,
                         modelName: model.modelName || model.qualifiedName,
                         providerId: model.providerId || group.providerId,
-                        providerType: model.providerType || group.type || group.providerType,
+                        providerType,
                         description: model.description || "",
                         cost: model.cost || null,
                         supportedReasoningEfforts: normalizeReasoningEfforts(model.supportedReasoningEfforts),
                         defaultReasoningEffort: model.defaultReasoningEffort || null,
                         supportedContextTiers: normalizeContextTiers(model.supportedContextTiers),
                         defaultContextTier: model.defaultContextTier || null,
+                        contextWindowSizes: model.contextWindowSizes || null,
                         isDefault: defaultModel === model.qualifiedName,
+                        ghcpKeyMissing,
+                        disabled: ghcpKeyMissing,
                     };
                     items.push(item);
                     return item;
@@ -3827,7 +3864,12 @@ export class PilotSwarmUiController {
             .filter((group) => group.models.length > 0);
 
         const preferredModel = sessionOptions?.model || defaultModel;
-        const selectedIndex = Math.max(0, items.findIndex((model) => model.qualifiedName === preferredModel));
+        // Never preselect a key-blocked Copilot model: when the preferred
+        // model (often the catalog default) is unusable, land on the first
+        // usable model instead.
+        let selectedIndex = items.findIndex((model) => model.qualifiedName === preferredModel && !model.disabled);
+        if (selectedIndex < 0) selectedIndex = items.findIndex((model) => !model.disabled);
+        if (selectedIndex < 0) selectedIndex = 0;
         this.dispatch({
             type: "ui/modal",
             modal: {
@@ -3843,6 +3885,27 @@ export class PilotSwarmUiController {
         this.dispatch({ type: "ui/status", text: "Select a model and press Enter" });
     }
 
+    async _resolveGhcpUserKeySet() {
+        // Freshest signal first: the profile the Admin console loaded in this
+        // session (updates immediately after the user saves a key there).
+        const adminProfile = this.getState().admin?.profile;
+        if (typeof adminProfile?.githubCopilotKeySet === "boolean") {
+            return adminProfile.githubCopilotKeySet;
+        }
+        if (typeof this.transport.getCurrentUserProfile !== "function") return null;
+        try {
+            const profile = await this.transport.getCurrentUserProfile();
+            if (profile && typeof profile.githubCopilotKeySet === "boolean") {
+                return profile.githubCopilotKeySet;
+            }
+            // Profile fetch succeeded but no stored flag — a user with no
+            // profile row has no key.
+            return false;
+        } catch {
+            return null;
+        }
+    }
+
     async openSwitchModelPicker(onApplied = null) {
         // Callers (e.g. the portal Manage modal) can be notified when a switch
         // is actually applied — distinct from cancelling the picker — so they
@@ -4903,6 +4966,16 @@ export class PilotSwarmUiController {
         }
         if (modal.type === "modelPicker") {
             const item = modal.items?.[modal.selectedIndex || 0];
+            if (item?.disabled) {
+                // Keep the picker open — the selection is unusable, not wrong.
+                this.dispatch({
+                    type: "ui/status",
+                    text: item.ghcpKeyMissing
+                        ? "This model needs a GitHub Copilot key — add yours in the Admin console first"
+                        : "This model is not available",
+                });
+                return;
+            }
             const previousFocus = modal.previousFocus;
             this.dispatch({ type: "ui/modal", modal: null });
             if (previousFocus) {
@@ -5243,6 +5316,7 @@ export class PilotSwarmUiController {
             const items = this.getSessionOutbox(currentUi.promptEdit.sessionId);
             const nextItems = items.map((item) => (
                 item.id === currentUi.promptEdit.itemId && item.phase === "pending"
+                    && item.attempted !== true
                     ? { ...item, text: nextPrompt }
                     : item
             ));

package/ui/core/src/formatting.js

@@ -567,8 +567,11 @@ function splitMarkdownTableCells(line) {
     return cells;
 }
 
+// GFM delimiter cells are `:?-+:?` — one dash is enough, so `--:` and `-` are
+// as valid as `---`. Requiring three dashes silently demoted whole tables to
+// raw pipe text whenever a model emitted the shorter alignment form.
 function isMarkdownTableSeparatorRow(cells) {
-    return cells.length > 0 && cells.every((cell) => /^:?-{3,}:?$/.test(String(cell || "").replace(/\s+/g, "")));
+    return cells.length > 0 && cells.every((cell) => /^:?-+:?$/.test(String(cell || "").replace(/\s+/g, "")));
 }
 
 function displayWidth(value) {
@@ -992,6 +995,7 @@ export function buildMessageCardLines({
     borderColor = "gray",
     bodyColor = null,
     fitToContent = false,
+    tableMode = null,
 } = {}) {
     const maxWidth = Math.max(fitToContent ? 12 : 20, Number(width) || (fitToContent ? 12 : 20));
     const maxContentWidth = Math.max(1, maxWidth - 4);
@@ -999,6 +1003,30 @@ export function buildMessageCardLines({
         { text: ` ${String(title || "SYSTEM").toUpperCase()} `, color: titleColor, bold: true },
         ...(timestamp ? [{ text: ` ${String(timestamp)} `, color: "gray" }] : []),
     ];
+
+    // Sentinel mode (browser portal): the card is laid out with CSS, so
+    // emit cardStart/cardEnd bounds around the UNWRAPPED markdown body
+    // instead of drawing box art. Hard-wrapping here would mangle
+    // preformatted content (box-drawn tables, ASCII art) that the browser
+    // renders as real HTML tables or scrollable lines.
+    if (tableMode === "sentinel") {
+        const sentinelBodyLines = parseMarkdownLines(String(body || ""), {
+            width: maxContentWidth,
+            tableMode,
+        });
+        const sentinelTinted = bodyColor
+            ? sentinelBodyLines.map((lineRuns) => (Array.isArray(lineRuns)
+                ? recolorRuns(lineRuns, bodyColor)
+                : lineRuns))
+            : sentinelBodyLines;
+        return [
+            { kind: "cardStart", runs: titleRuns, borderColor },
+            ...sentinelTinted,
+            { kind: "cardEnd" },
+            [{ text: "", color: null }],
+        ];
+    }
+
     const bodyLines = parseMarkdownLines(String(body || ""), { width: maxContentWidth });
     const normalizedBodyLines = bodyLines.length > 0
         ? bodyLines.flatMap((lineRuns) => wrapRunsToDisplayWidth(lineRuns, maxContentWidth))

package/ui/core/src/reducer.js

@@ -186,10 +186,61 @@ function areStructuredValuesEqual(left, right) {
     return true;
 }
 
+function sessionUpdateTimestampMs(session) {
+    const value = session?.updatedAt;
+    if (typeof value === "number" && Number.isFinite(value)) return value;
+    if (value instanceof Date) return value.getTime();
+    const parsed = Date.parse(value || "");
+    return Number.isFinite(parsed) ? parsed : 0;
+}
+
+// True when `nextSession` carries no newer information than what we already
+// hold. Both timestamps must be present — an update with no `updatedAt` is
+// treated as newer, because we cannot prove otherwise.
+function isSameOrOlderSessionUpdate(previousSession, nextSession) {
+    const previousAt = sessionUpdateTimestampMs(previousSession);
+    const nextAt = sessionUpdateTimestampMs(nextSession);
+    return previousAt > 0 && nextAt > 0 && nextAt <= previousAt;
+}
+
+// A run that has ended for good. These are authoritative and must always land,
+// even from an update that looks stale — stranding a finished session as
+// "running" is far worse than a brief wrong status.
+const TERMINAL_SESSION_STATUSES = new Set(["completed", "failed", "cancelled", "error"]);
+
+// Session state is written from several concurrent sources: the session-list
+// poll, live events, and a per-session detail fetch. They do not agree
+// instant-to-instant, and the list poll in particular can report a status the
+// orchestration has already moved on from — observed live as:
+//
+//   sessions/loaded  running + waiting -> waiting   prevAt == incomingAt
+//   sessions/merged  waiting + running -> running   (105ms later)
+//
+// while the server's own session row and orchestration both read "running"
+// throughout. Consumers gated on status === "running" — the live-activity
+// strip, the composer's Stop button — blink off for the width of that gap.
+//
+// Refuse ANY non-terminal downgrade out of "running" unless the incoming
+// update is genuinely newer. Deliberately not restricted to idle-like
+// statuses: the status actually observed clobbering a live run was "waiting",
+// and an earlier version of this guard missed the bug by excluding it.
+// Terminal statuses are exempt so a finished run can never be stranded, and
+// the timestamp test means a real transition (which carries a newer
+// updatedAt) still lands immediately.
+function shouldPreserveRunningStatus(previousSession, nextSession) {
+    const nextStatus = String(nextSession?.status ?? "").toLowerCase();
+    return previousSession?.status === "running"
+        && nextStatus !== "running"
+        && !TERMINAL_SESSION_STATUSES.has(nextStatus)
+        && isSameOrOlderSessionUpdate(previousSession, nextSession);
+}
+
 function mergeDefinedSessionFields(previousSession = {}, nextSession = {}) {
     let merged = previousSession || {};
+    const preserveRunning = shouldPreserveRunningStatus(previousSession, nextSession);
     for (const [key, value] of Object.entries(nextSession || {})) {
         if (value === undefined) continue;
+        if (key === "status" && preserveRunning) continue;
         if (key === "pendingQuestion" && isAnsweredPendingQuestion(previousSession, value)) {
             if (merged === previousSession) {
                 merged = { ...(previousSession || {}) };

package/ui/core/src/selectors.js

@@ -1923,6 +1923,7 @@ function buildChatMessageLines(message, maxWidth, options = {}) {
                     width: Math.max(20, maxWidth),
                     titleColor: USER_CHAT_COLOR,
                     borderColor: USER_CHAT_COLOR,
+                    tableMode: options.tableMode,
                 }),
                 ...buildChatMessageLines({
                     ...message,
@@ -2000,6 +2001,7 @@ function buildChatMessageLines(message, maxWidth, options = {}) {
             width: Math.max(20, maxWidth),
             titleColor: message?.cardTitleColor || (message?.role === "system" ? "yellow" : "cyan"),
             borderColor: message?.cardBorderColor || "gray",
+            tableMode: options.tableMode,
             ...(isSystemCard ? { bodyColor: "gray", fitToContent: true } : {}),
         });
     }
@@ -3778,7 +3780,7 @@ function buildNodeMapHeaderLine(nodeLabels, colWidth) {
     return runs;
 }
 
-const SEQ_REASONING_EFFORTS = new Set(["low", "medium", "high", "xhigh", "minimal", "none"]);
+const SEQ_REASONING_EFFORTS = new Set(["none", "minimal", "low", "medium", "high", "xhigh", "max"]);
 
 function shortModelForSequence(value) {
     const model = String(value || "").trim();
@@ -4086,10 +4088,12 @@ export function selectModelPickerModal(state, maxWidth = 72) {
                 ? modal.items.findIndex((item) => item.id === model.id)
                 : -1;
             const isSelected = itemIndex === selectedIndex;
+            const isDisabled = Boolean(model.disabled);
             const labelRuns = fitRuns([
                 { text: "· ", color: "gray" },
-                { text: model.modelName || model.qualifiedName || model.id, color: "white", bold: Boolean(model.isDefault) },
+                { text: model.modelName || model.qualifiedName || model.id, color: isDisabled ? "gray" : "white", bold: Boolean(model.isDefault) && !isDisabled },
                 ...(model.cost ? [{ text: ` [${model.cost}]`, color: "gray" }] : []),
+                ...(isDisabled ? [{ text: " ⊘ needs GitHub key", color: "yellow" }] : []),
                 ...(model.isDefault ? [{ text: " ← current default", color: "gray" }] : []),
             ], contentWidth);
 
@@ -4126,6 +4130,9 @@ export function selectModelPickerModal(state, maxWidth = 72) {
                 ? [[{ text: `Reasoning: ${supportedReasoning.join(", ")}`, color: "gray" }]]
                 : []),
             ...(defaultReasoning ? [[{ text: `Default reasoning: ${defaultReasoning}`, color: "gray" }]] : []),
+            ...(selectedItem.disabled
+                ? [[{ text: "Unavailable: requires a GitHub Copilot key. Add yours in the Admin console, then reopen this picker.", color: "yellow" }]]
+                : []),
             [{ text: "", color: "gray" }],
             [{
                 text: selectedItem.description || "No description available for this model.",
@@ -4298,11 +4305,12 @@ export function selectContextTierPickerModal(state, maxWidth = 64) {
 
     const selectedItem = items[selectedIndex] || null;
     const modelItem = modal.modelItem || null;
+    const selectedLabel = selectedItem?.label || selectedItem?.id;
     const detailsLines = [
         [{ text: modelItem?.modelName || modelItem?.qualifiedName || "Selected model", color: "white", bold: true }],
         [{ text: `${modelItem?.providerId || "provider"} (${modelItem?.providerType || "provider"})`, color: "gray" }],
         [{ text: "", color: "gray" }],
-        [{ text: selectedItem?.id ? `Using context window: ${selectedItem.id}` : "Choose a context window.", color: "white" }],
+        [{ text: selectedLabel ? `Using context window: ${selectedLabel}` : "Choose a context window.", color: "white" }],
         [{ text: "Long context costs more per token.", color: "gray" }],
     ];
 

package/ui/react/src/web-app.js

@@ -422,8 +422,9 @@ function normalizeLines(lines) {
             continue;
         }
         // Sentinel kinds preserved as-is so parseStructuredChatBlocks can
-        // recognize and render them (e.g. markdownTable → HTML <table>).
-        if (line?.kind === "markdownTable") {
+        // recognize and render them (e.g. markdownTable → HTML <table>,
+        // cardStart/cardEnd → styled card with structured body).
+        if (line?.kind === "markdownTable" || line?.kind === "cardStart" || line?.kind === "cardEnd") {
             normalized.push(line);
             continue;
         }
@@ -593,6 +594,23 @@ export function isScrollViewportAtBottom(node) {
     return getScrollDistanceToBottom(node) <= SCROLL_BOTTOM_EPSILON_PX;
 }
 
+export function computeAnchoredScrollTop(
+    node,
+    scrollOffset,
+    scrollMode,
+    preservePausedStickyScroll = false,
+) {
+    if (!node) return 0;
+    const maxScroll = Math.max(0, node.scrollHeight - node.clientHeight);
+    if (preservePausedStickyScroll) {
+        return Math.max(0, Math.min(node.scrollTop, maxScroll));
+    }
+    const offsetPixels = Math.max(0, Number(scrollOffset) || 0) * SCROLL_ROW_HEIGHT;
+    return scrollMode === "bottom"
+        ? Math.max(0, maxScroll - offsetPixels)
+        : Math.min(maxScroll, offsetPixels);
+}
+
 function useScrollSync(ref, lines, scrollOffset, scrollMode, paneKey, controller, { stickyBottom = false } = {}) {
     const normalizedLines = React.useMemo(() => normalizeLines(lines), [lines]);
     // Programmatic scrollTop assignments fire a 'scroll' event that would
@@ -612,6 +630,23 @@ function useScrollSync(ref, lines, scrollOffset, scrollMode, paneKey, controller
     // or its momentum is in flight, the DOM is the source of truth and state
     // echoes of our own scroll dispatches must not snap the pane back.
     const userScrollRef = React.useRef({ touching: false, lastUserScrollAt: 0, lastDispatchedOffset: null });
+    const viewportSizeRef = React.useRef({ width: null, height: null });
+    const [viewportRevision, setViewportRevision] = React.useState(0);
+
+    React.useLayoutEffect(() => {
+        const node = ref.current;
+        if (!node || typeof ResizeObserver === "undefined") return;
+        viewportSizeRef.current = { width: node.clientWidth, height: node.clientHeight };
+        const observer = new ResizeObserver(() => {
+            const next = { width: node.clientWidth, height: node.clientHeight };
+            const previous = viewportSizeRef.current;
+            if (next.width === previous.width && next.height === previous.height) return;
+            viewportSizeRef.current = next;
+            setViewportRevision((revision) => revision + 1);
+        });
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [ref]);
 
     React.useLayoutEffect(() => {
         const node = ref.current;
@@ -631,17 +666,16 @@ function useScrollSync(ref, lines, scrollOffset, scrollMode, paneKey, controller
             previousViewportStateRef.current = { scrollMode, scrollOffset };
             return;
         }
-        const maxScroll = Math.max(0, node.scrollHeight - node.clientHeight);
         const preservePausedStickyScroll = stickyBottom
             && scrollMode === "top"
             && previousViewportState?.scrollMode === "top"
             && previousViewportState?.scrollOffset === scrollOffset;
-        const offsetPixels = Math.max(0, Number(scrollOffset) || 0) * SCROLL_ROW_HEIGHT;
-        const nextScrollTop = preservePausedStickyScroll
-            ? Math.max(0, Math.min(node.scrollTop, maxScroll))
-            : scrollMode === "bottom"
-                ? Math.max(0, maxScroll - offsetPixels)
-                : Math.min(maxScroll, offsetPixels);
+        const nextScrollTop = computeAnchoredScrollTop(
+            node,
+            scrollOffset,
+            scrollMode,
+            preservePausedStickyScroll,
+        );
         if (Math.abs(node.scrollTop - nextScrollTop) > PROGRAMMATIC_SCROLL_TOLERANCE_PX) {
             const pendingProgrammaticScroll = { target: nextScrollTop };
             programmaticScrollRef.current = pendingProgrammaticScroll;
@@ -658,7 +692,7 @@ function useScrollSync(ref, lines, scrollOffset, scrollMode, paneKey, controller
             scrollMode,
             scrollOffset,
         };
-    }, [normalizedLines, ref, scrollMode, scrollOffset, stickyBottom]);
+    }, [normalizedLines, ref, scrollMode, scrollOffset, stickyBottom, viewportRevision]);
 
     const onScroll = React.useCallback(() => {
         const node = ref.current;
@@ -1415,6 +1449,30 @@ function parseStructuredChatBlocks(lines = []) {
             continue;
         }
 
+        // Sentinel card bounds emitted by buildMessageCardLines in sentinel
+        // mode. The body lines between the bounds are UNWRAPPED, so parse
+        // them recursively — box-drawn/markdown tables inside the card
+        // become real HTML tables instead of hard-wrapped box art.
+        if (currentLine?.kind === "cardStart") {
+            const innerLines = [];
+            index += 1;
+            while (index < lines.length && lines[index]?.kind !== "cardEnd") {
+                innerLines.push(lines[index]);
+                index += 1;
+            }
+            if (index < lines.length) index += 1;
+            if (index < lines.length && lineText(lines[index]).trim().length === 0) {
+                index += 1;
+            }
+            blocks.push({
+                type: "card",
+                headerRuns: Array.isArray(currentLine.runs) ? currentLine.runs : [],
+                borderColor: currentLine.borderColor || "gray",
+                blocks: parseStructuredChatBlocks(innerLines),
+            });
+            continue;
+        }
+
         // Sentinel markdown-table line emitted by parseMarkdownLines when
         // tableMode === "sentinel". Carries the raw header + rows so the
         // portal renders a real HTML table with markdown cell content (so
@@ -1563,9 +1621,15 @@ function parseStructuredChatBlocks(lines = []) {
 
 function StructuredChatBlocks({ lines, theme }) {
     const blocks = React.useMemo(() => parseStructuredChatBlocks(lines), [lines]);
+    return React.createElement(StructuredBlockList, { blocks, theme });
+}
 
+// Renders parsed chat blocks; sentinel card blocks recurse through this list
+// so structured content (box/markdown tables, code fences) inside a card
+// renders exactly the same as it does at top level.
+function StructuredBlockList({ blocks, theme }) {
     return React.createElement(React.Fragment, null,
-        blocks.map((block, index) => {
+        (blocks || []).map((block, index) => {
             if (block.type === "preserve") {
                 const variantClass = block.splashVariant ? ` is-splash-${block.splashVariant}` : "";
                 return React.createElement("div", { key: `preserve:${index}`, className: `ps-chat-preserve-block${variantClass}` },
@@ -1593,10 +1657,12 @@ function StructuredChatBlocks({ lines, theme }) {
                 React.createElement("header", { className: "ps-chat-card-header" },
                     React.createElement(Runs, { runs: block.headerRuns, theme })),
                 React.createElement("div", { className: "ps-chat-card-body" },
-                    (block.bodyLines || []).map((bodyRuns, bodyIndex) => React.createElement("div", {
-                        key: `card:${index}:line:${bodyIndex}`,
-                        className: "ps-chat-card-line",
-                    }, React.createElement(Runs, { runs: bodyRuns, theme })) )));
+                    Array.isArray(block.blocks)
+                        ? React.createElement(StructuredBlockList, { blocks: block.blocks, theme })
+                        : (block.bodyLines || []).map((bodyRuns, bodyIndex) => React.createElement("div", {
+                            key: `card:${index}:line:${bodyIndex}`,
+                            className: "ps-chat-card-line",
+                        }, React.createElement(Runs, { runs: bodyRuns, theme })) )));
             }
 
             if (block.type === "table") {
@@ -2193,7 +2259,7 @@ function SessionPane({ controller, actions = null, panelClassName = "", structur
             },
             React.createElement("div", {
                 className: "ps-line ps-session-row-content",
-                style: { paddingInlineStart: `${Math.max(0, row.depth) * 18}px` },
+                style: { paddingInlineStart: `${Math.max(0, row.depth) * 4}px` },
             },
                 React.createElement(SessionRowContent, { row, theme, structured: structuredRows })),
             )),
@@ -4119,7 +4185,7 @@ function ModalLayer({ controller }) {
                 return React.createElement("button", {
                     key: item?.id || `row:${rowIndex}`,
                     type: "button",
-                    className: `ps-list-button ps-modal-list-button${itemIndex === modal.selectedIndex ? " is-selected" : ""}${usesHangingIndent ? " is-hanging" : ""}`,
+                    className: `ps-list-button ps-modal-list-button${itemIndex === modal.selectedIndex ? " is-selected" : ""}${usesHangingIndent ? " is-hanging" : ""}${item?.disabled ? " is-disabled" : ""}`,
                     onClick: () => controller.dispatch({ type: "ui/modalSelection", index: itemIndex }),
                 },
                 React.createElement("div", { className: "ps-line ps-modal-list-line" },
@@ -4128,7 +4194,7 @@ function ModalLayer({ controller }) {
             : (modal.items || []).map((item, index) => React.createElement("button", {
                 key: item.id || index,
                 type: "button",
-                className: `ps-list-button ps-modal-list-button${index === modal.selectedIndex ? " is-selected" : ""}${usesHangingIndent ? " is-hanging" : ""}`,
+                className: `ps-list-button ps-modal-list-button${index === modal.selectedIndex ? " is-selected" : ""}${usesHangingIndent ? " is-hanging" : ""}${item?.disabled ? " is-disabled" : ""}`,
                 onClick: () => controller.dispatch({ type: "ui/modalSelection", index }),
             },
             React.createElement("div", { className: "ps-line ps-modal-list-line" },