pilotswarm 0.5.22 → 0.5.24

package/ui/core/src/reducer.js

@@ -637,7 +637,8 @@ export function appReducer(state, action) {
             const hasOwnerFilter = Object.prototype.hasOwnProperty.call(settings, "sessionOwnerFilter");
             const hasLayout = Object.prototype.hasOwnProperty.call(settings, "layoutAdjustments");
             const hasChatViewMode = Object.prototype.hasOwnProperty.call(settings, "chatViewMode")
-                && (settings.chatViewMode === "summary" || settings.chatViewMode === "transcript");
+                && (settings.chatViewMode === "summary" || settings.chatViewMode === "transcript"
+                    || settings.chatViewMode === "rich");
             const hasPins = Object.prototype.hasOwnProperty.call(settings, "pinnedSessionIds");
             const hasCollapsed = Object.prototype.hasOwnProperty.call(settings, "collapsedSessionIds");
             // A pending/resolved deep-link intent outranks the profile's
@@ -701,7 +702,7 @@ export function appReducer(state, action) {
         }
 
         case "ui/chatViewMode":
-            if (action.mode !== "summary" && action.mode !== "transcript") {
+            if (action.mode !== "summary" && action.mode !== "transcript" && action.mode !== "rich") {
                 return state;
             }
             return {
@@ -1921,6 +1922,8 @@ export function appReducer(state, action) {
                 downloads: {},
             };
             const entries = normalizeArtifactEntries(action.entries);
+            // Stamped by the caller, never Date.now() here — reducers stay pure.
+            const fetchedAt = Number(action.fetchedAt) || 0;
             const hasFilename = (filename) => entries.some((entry) => entry.filename === filename);
             const selectedFilename = current.selectedFilename && hasFilename(current.selectedFilename)
                 ? current.selectedFilename
@@ -1933,6 +1936,10 @@ export function appReducer(state, action) {
                 selectedFilename,
                 loading: false,
                 loaded: true,
+                // Stored, not just computed — without this the TTL guard read
+                // undefined, treated every list as ancient, and refetched on
+                // every poll cycle. That was the ~3s flicker.
+                fetchedAt,
                 error: null,
             };
             return {
@@ -1998,6 +2005,39 @@ export function appReducer(state, action) {
             };
         }
 
+        case "files/toggleMark": {
+            const id = String(action.artifactId || "");
+            if (!id) return state;
+            const marked = new Set(state.files.markedIds || []);
+            if (marked.has(id)) marked.delete(id);
+            else marked.add(id);
+            return { ...state, files: { ...state.files, markedIds: [...marked] } };
+        }
+
+        case "files/setMarks":
+            return {
+                ...state,
+                files: {
+                    ...state.files,
+                    markedIds: Array.isArray(action.artifactIds) ? [...new Set(action.artifactIds.map(String))] : [],
+                },
+            };
+
+        case "files/previewOrigin":
+            return {
+                ...state,
+                files: {
+                    ...state.files,
+                    previewOrigin: action.origin || null,
+                    restoreArtifactId: action.origin === "chat"
+                        ? (action.restoreArtifactId ?? state.files.restoreArtifactId ?? null)
+                        : null,
+                },
+            };
+
+        case "files/clearMarks":
+            return { ...state, files: { ...state.files, markedIds: [] } };
+
         case "files/selectGlobal":
             return {
                 ...state,
@@ -2136,6 +2176,16 @@ export function appReducer(state, action) {
         }
 
         case "files/deleted": {
+            // Fall through to the existing handling, but drop the deleted id
+            // from the marks first so a bulk delete cannot leave phantoms.
+            state = {
+                ...state,
+                files: {
+                    ...state.files,
+                    markedIds: (state.files.markedIds || [])
+                        .filter((id) => id !== `${action.sessionId}/${action.filename}`),
+                },
+            };
             const bySessionId = cloneFilesBySessionId(state.files.bySessionId);
             const current = bySessionId[action.sessionId] || {
                 entries: [],

package/ui/core/src/selectors.js

@@ -12,6 +12,7 @@ import {
     extractHttpLinks,
     formatHumanDurationSeconds,
     formatTimestamp,
+    formatTimestampCompact,
     padRunsToDisplayWidth,
     parseMarkdownLines,
     shortModelName,
@@ -229,7 +230,15 @@ function shouldDecorateSessionOwners(state) {
     // distinct human owner — otherwise the owner chip is pure noise on every
     // row (you are always "you"). A narrowed owner filter is an explicit
     // multi-user context, so honor that too.
-    if (state.sessions?.ownerFilter && state.sessions.ownerFilter.all !== true) return true;
+    // A narrowed filter counts as an explicit multi-user context ONLY when it
+    // names specific owners. The DEFAULT signed-in filter already sets
+    // `all: false` AND `includeShared: true` (see
+    // defaultOwnerFilterForPrincipal), so testing either of those tagged every
+    // row in a single-user deployment with a pointless "you are you" chip.
+    // Everything else falls through to counting DISTINCT owners below, which
+    // is what the chip actually communicates.
+    const ownerFilter = state.sessions?.ownerFilter;
+    if (Array.isArray(ownerFilter?.ownerKeys) && ownerFilter.ownerKeys.length > 0) return true;
     const owners = new Set();
     for (const session of Object.values(state.sessions?.byId || {})) {
         if (!session || session.isSystem || session.isGroup) continue;
@@ -316,7 +325,38 @@ function splitTypedSessionTitle(displayTitle) {
     return { userTitle, typeTitle };
 }
 
+// Titles are plain text everywhere they are rendered (terminal runs, DOM
+// text nodes) — never interpreted as HTML. A title that arrived already
+// HTML-escaped therefore shows its entities literally ("PostgreSQL &
+// MySQL"). Decoding the handful of entities an escaper emits repairs those
+// rows on read; the write path also normalizes now, so this covers history.
+const HTML_ENTITY_REPLACEMENTS = [
+    [/&lt;/g, "<"],
+    [/&gt;/g, ">"],
+    [/&quot;/g, '"'],
+    [/&#0?39;/g, "'"],
+    [/&apos;/g, "'"],
+    [/&nbsp;/g, " "],
+    // Ampersand LAST: decoding it first would let "&amp;lt;" collapse to "<".
+    [/&amp;/g, "&"],
+];
+
+export function decodeHtmlEntitiesForDisplay(value) {
+    let text = String(value ?? "");
+    if (!text.includes("&")) return text;
+    for (const [pattern, replacement] of HTML_ENTITY_REPLACEMENTS) {
+        text = text.replace(pattern, replacement);
+    }
+    return text;
+}
+
 function buildSessionDisplayTitle(session) {
+    // Decode at the single exit so the agent-prefixed and typed-title paths
+    // are covered too, not just the bare title.
+    return decodeHtmlEntitiesForDisplay(buildRawSessionDisplayTitle(session));
+}
+
+function buildRawSessionDisplayTitle(session) {
     const title = String(session?.title || "").trim();
     const splitTitle = splitAgentPrefixedSessionTitle(session);
     if (!splitTitle) return title;
@@ -731,6 +771,37 @@ function buildSessionRowView(entry, session, state, totalDescendantCounts, visib
         badgeRuns: [],
         selectedMetaRuns: detailRuns,
         detailRuns,
+        // Structured row description for renderers that draw real chrome
+        // instead of terminal runs (the portal's rich session list): status
+        // becomes a dot, depth becomes indentation, the owner/child/cron
+        // badges become chips. Purely additive — `runs`/`titleRuns` above
+        // stay the terminal's source of truth and the TUI ignores this.
+        chrome: {
+            kind: session?.isGroup ? "group"
+                : session?.isSystem ? "system"
+                : session?.serviceKind ? "service"
+                : "session",
+            title: hasRealTitle ? rawTitle : shortId,
+            untitled: !hasRealTitle,
+            statusColor: sessionStatusColor(session, mode),
+            accentColor: mainColor,
+            pinned: isPinned,
+            selectMode,
+            checked: isSelected,
+            owner: shouldDecorateSessionOwners(state) && !session?.isSystem && !session?.isGroup
+                ? {
+                    initials: effectiveOwner ? ownerInitials(effectiveOwner) : "?",
+                    isMine: Boolean(ownerKeyForOwner(state?.auth?.principal)
+                        && ownerKeyForOwner(effectiveOwner) === ownerKeyForOwner(state?.auth?.principal)),
+                }
+                : null,
+            childBadge: collapseBadge ? { text: collapseBadge.text, color: collapseBadge.color } : null,
+            cron: Boolean(cronBadge),
+            age: relTime || null,
+            model: modelLabel || null,
+            shortId,
+            ctx: ctxRuns.length > 0 ? { text: ctxRuns[0].text, color: ctxRuns[0].color } : null,
+        },
     };
 }
 
@@ -1374,7 +1445,12 @@ function prefixRuns(text, color = "gray", options = {}) {
     }];
 }
 
-function buildChatMessagePrefix(message, options = {}) {
+// Header facts for one chat message — speaker label, label color, delivery
+// glyph, and timestamp — extracted from buildChatMessagePrefix so the rich
+// (block) chat renderer can consume the same labeling rules without the
+// terminal run/prefix shape. Returns { time, glyph, glyphColor, roleLabel,
+// roleColor }.
+function describeChatMessageHeader(message, options = {}) {
     const time = formatTimestamp(message?.createdAt || message?.time);
     // A user.message is labeled from the CURRENT VIEWER's perspective: "You"
     // for the viewer's own messages, the sender's name for anyone else. When
@@ -1459,6 +1535,15 @@ function buildChatMessagePrefix(message, options = {}) {
             : message?.role === "system"
                 ? "yellow"
                 : "white";
+    // `fromOtherPerson` lets renderers drop the speaker label for the
+    // viewer's own messages and the agent's (a 1:1 chat needs no "You:" /
+    // "Agent:" on every turn) while still naming OTHER humans in a shared
+    // session, where attribution is the whole point.
+    return { time, glyph, glyphColor, roleLabel, roleColor, fromOtherPerson };
+}
+
+function buildChatMessagePrefix(message, options = {}) {
+    const { time, glyph, glyphColor, roleLabel, roleColor } = describeChatMessageHeader(message, options);
     const prefix = time ? `[${time}] ` : "";
     const runs = [...prefixRuns(prefix, "gray")];
     if (glyph) {
@@ -2303,6 +2388,8 @@ export function selectChatLines(state, maxWidth = 80, options = {}) {
             lines.push(buildEpochDividerLine(message, maxWidth));
         } else if (message?.kind === "regen-refused") {
             lines.push(buildRegenRefusedLine(message, maxWidth));
+        } else if (message?.kind === "regen-failed") {
+            lines.push(buildRegenFailedLine(message, maxWidth));
         } else {
             const messageLines = buildChatMessageLines(message, maxWidth, buildOptions);
             appendChatBlockLines(lines, messageLines);
@@ -2319,6 +2406,97 @@ export function selectChatLines(state, maxWidth = 80, options = {}) {
     return lines.length > 0 ? lines : [{ text: "No messages yet.", color: "gray" }];
 }
 
+// True when a chat message is plain user/assistant prose the rich (block)
+// renderer can format as markdown directly. Everything with terminal-era
+// special handling — splash art, thinking cards, chrome-less summaries,
+// system/PilotSwarm cards, asked-and-answered exchanges, embedded
+// [SYSTEM: …] notice segments — stays on the line renderer, which already
+// knows every edge case.
+function isRichRenderableChatMessage(message) {
+    if (!message) return false;
+    if (message.kind === "epoch-divider" || message.kind === "regen-refused" || message.kind === "regen-failed") return false;
+    if (message.splash || message.thinking || message.noChrome) return false;
+    if (message.role !== "user" && message.role !== "assistant") return false;
+    if (message.role === "user" && parseAskedAndAnsweredExchange(message?.text || "")) return false;
+    const segments = splitSystemNoticeSegments(message?.text || "");
+    if (segments.some((segment) => segment.kind === "system")) return false;
+    return true;
+}
+
+/**
+ * Message-level view of the active chat for the rich (desktop-style) web
+ * renderer. Returns an ordered array of blocks:
+ *
+ *   { kind: "message", id, role, header, text, pendingPhase, attachments }
+ *     — plain user/assistant prose. `header` is describeChatMessageHeader()
+ *       output; `text` is the artifact-link-decorated markdown source the
+ *       renderer formats itself; `attachments` is { sessionId, attachments }
+ *       (the sentinel shape) or null.
+ *
+ *   { kind: "lines", variant, lines }
+ *     — everything else (splash, thinking cards, system cards, dividers),
+ *       pre-rendered through the exact same line builders the terminal
+ *       transcript uses, so no edge case has two implementations.
+ *
+ * The TUI never calls this; selectChatLines remains the terminal path.
+ */
+export function selectChatBlocks(state, maxWidth = 80, options = {}) {
+    const messages = selectActiveChat(state);
+    if (!messages || messages.length === 0) return [];
+
+    const viewerKey = ownerKeyForOwner(state?.auth?.principal);
+    const activeSessionId = state?.sessions?.activeSessionId;
+    const activeSession = activeSessionId ? state?.sessions?.byId?.[activeSessionId] : null;
+    const ownerKey = ownerKeyForOwner(activeSession?.owner);
+    const sharedContext = Boolean(activeSession && (
+        (activeSession.visibility && activeSession.visibility !== "private")
+        || (ownerKey && viewerKey && ownerKey !== viewerKey)
+    ));
+    const buildOptions = {
+        ...(options?.tableMode ? { tableMode: options.tableMode } : {}),
+        ...(viewerKey ? { viewerKey } : {}),
+        ...(ownerKey ? { ownerKey } : {}),
+        ...(sharedContext ? { sharedContext: true } : {}),
+    };
+
+    const blocks = [];
+    for (const message of messages) {
+        if (message?.kind === "epoch-divider") {
+            blocks.push({ kind: "lines", variant: "divider", lines: [buildEpochDividerLine(message, maxWidth)] });
+            continue;
+        }
+        if (message?.kind === "regen-failed") {
+            blocks.push({ kind: "lines", variant: "divider", lines: [buildRegenFailedLine(message, maxWidth)] });
+            continue;
+        }
+        if (message?.kind === "regen-refused") {
+            blocks.push({ kind: "lines", variant: "divider", lines: [buildRegenRefusedLine(message, maxWidth)] });
+            continue;
+        }
+        if (isRichRenderableChatMessage(message)) {
+            const attachmentLines = buildAttachmentChipLines(message, { tableMode: "sentinel" });
+            const attachmentSentinel = attachmentLines.find((line) => line?.kind === "imageAttachments") || null;
+            blocks.push({
+                kind: "message",
+                id: message?.id ?? null,
+                role: message.role,
+                header: describeChatMessageHeader(message, buildOptions),
+                text: decorateArtifactLinksForChat(message?.text || ""),
+                pendingPhase: message?.pendingPhase || null,
+                attachments: attachmentSentinel
+                    ? { sessionId: attachmentSentinel.sessionId, attachments: attachmentSentinel.attachments }
+                    : null,
+            });
+            continue;
+        }
+        const lines = buildChatMessageLines(message, maxWidth, buildOptions);
+        if (lines.length > 0) {
+            blocks.push({ kind: "lines", variant: "event", lines });
+        }
+    }
+    return blocks;
+}
+
 // A centered inline rule ("──── label ────") for transcript markers. The dash
 // runs are CAPPED (not stretched to maxWidth): the web portal wraps by pixel
 // width, and a maxWidth-long "─" run overflows a narrower pane and wraps the
@@ -2368,6 +2546,18 @@ function buildRegenRefusedLine(message, maxWidth) {
     return buildRuleLine(label, "yellow", maxWidth);
 }
 
+// A regeneration that was accepted then failed downstream. RED (vs yellow for
+// a refusal): a refusal is the system declining on purpose, a failure is the
+// pipeline breaking. Names the stage and the underlying cause, because the
+// agent's own turn will have already claimed success from the optimistic ack.
+function buildRegenFailedLine(message, maxWidth) {
+    const stage = String(message?.stage || "unknown");
+    const raw = String(message?.error || "").split("\n")[0];
+    const cause = raw.length > 120 ? `${raw.slice(0, 117)}…` : raw;
+    const label = ` ✕ regeneration failed at ${stage}${cause ? ` · ${cause}` : ""} `;
+    return buildRuleLine(label, "red", maxWidth);
+}
+
 export function selectOutboxOverlayLines(state, maxWidth = 80, options = {}) {
     const messages = selectActiveOutboxMessages(state);
     if (!messages || messages.length === 0) return [];
@@ -2764,6 +2954,40 @@ export function selectFileSessionIdsForScope(state, scope = selectFilesScope(sta
     return ordered;
 }
 
+/**
+ * Artifacts in the order they appear in the CONVERSATION.
+ *
+ * The Files list is sorted for browsing (alphabetical); the transcript order is
+ * the order the work actually happened in. Stepping through a preview opened
+ * from a chat link should follow the conversation, not the filing cabinet — so
+ * these are two distinct sequences and neither can be derived from the other.
+ *
+ * Ids are `<sessionId>/<filename>`, matching files.selectedArtifactId.
+ */
+export function selectChatOrderedArtifactIds(state) {
+    const session = selectActiveSession(state);
+    const sessionId = session?.sessionId;
+    if (!sessionId) return [];
+    const history = state.history?.bySessionId?.get?.(sessionId);
+    const events = history?.events || [];
+    const seen = new Set();
+    const ordered = [];
+    const re = /artifact:\/\/([a-f0-9-]+)\/([^\s"'{})\]]+)/g;
+    for (const event of events) {
+        const text = typeof event?.data?.content === "string" ? event.data.content : "";
+        if (!text) continue;
+        re.lastIndex = 0;
+        let m;
+        while ((m = re.exec(text)) !== null) {
+            const id = `${m[1]}/${m[2]}`;
+            if (seen.has(id)) continue;
+            seen.add(id);
+            ordered.push(id);
+        }
+    }
+    return ordered;
+}
+
 export function selectFileBrowserItems(state) {
     const scope = selectFilesScope(state);
     const activeSessionId = selectActiveSession(state)?.sessionId || null;
@@ -3516,7 +3740,9 @@ function isSequenceOrchestratorType(type) {
 }
 
 function mapEventToSequenceEntry(event) {
-    const time = formatTimestamp(event?.createdAt);
+    // Compact: the sequence TIME column is fixed-width, and the full form
+    // truncates any dated row to "26 Jul …", losing the time entirely.
+    const time = formatTimestampCompact(event?.createdAt);
     const nodeLabel = shortNodeLabel(event?.workerNodeId);
     const detailText = eventMessageText(event);
     const preview = summarizeEventPreview(detailText, 20);
@@ -3709,7 +3935,7 @@ function buildSessionStatusSequenceEntry(session) {
     const safeCreatedAtMs = Number.isFinite(createdAtMs) ? createdAtMs : Date.now();
 
     return {
-        time: formatTimestamp(safeCreatedAtMs),
+        time: formatTimestampCompact(safeCreatedAtMs),
         createdAtMs: safeCreatedAtMs,
         nodeLabel: "orch",
         color: errorKind === "failed" ? "red" : "yellow",
@@ -3768,6 +3994,39 @@ function buildNodeMapNodeUnionForWindow(state, window) {
     return Array.from(labels).sort((left, right) => left.localeCompare(right));
 }
 
+/**
+ * Strip trailing pad from the last run of a sequence line.
+ *
+ * Every column is padded to colWidth for alignment, but the FINAL column's
+ * trailing spaces align nothing — there is no column after them. With
+ * `white-space: pre` those spaces occupy real width, so every line rendered at
+ * exactly the computed width and the pane had zero tolerance for rounding
+ * between "columns x char width" and its actual pixel width. The result was a
+ * horizontal scrollbar that never went away, on content that visibly fit.
+ */
+function trimTrailingRunPad(runs) {
+    const out = runs.slice();
+    while (out.length > 0) {
+        const last = out[out.length - 1];
+        const trimmed = String(last.text ?? "").replace(/\s+$/, "");
+        if (trimmed === "") { out.pop(); continue; }
+        out[out.length - 1] = { ...last, text: trimmed };
+        break;
+    }
+    return out;
+}
+
+/** Widest rendered line, so decoration never outruns real content. */
+function sequenceLineWidth(line) {
+    if (Array.isArray(line?.runs)) {
+        return line.runs.reduce((n, r) => n + displayLength(String(r.text ?? "")), 0);
+    }
+    if (Array.isArray(line)) {
+        return line.reduce((n, r) => n + displayLength(String(r.text ?? "")), 0);
+    }
+    return displayLength(String(line?.text ?? ""));
+}
+
 function buildSequenceHeaderLine(nodeLabels, timeWidth, colWidth) {
     const runs = [
         { text: padDisplayText("TIME", timeWidth), color: "white", bold: true },
@@ -3777,12 +4036,15 @@ function buildSequenceHeaderLine(nodeLabels, timeWidth, colWidth) {
         if (index > 0) runs.push({ text: " ", color: null });
         runs.push({ text: padDisplayText(nodeLabel, colWidth), color: "white", bold: true });
     });
-    return runs;
+    return trimTrailingRunPad(runs);
 }
 
-function buildSequenceDividerLine(nodeLabels, timeWidth, colWidth) {
+function buildSequenceDividerLine(nodeLabels, timeWidth, colWidth, contentWidth = Infinity) {
+    const full = `${"-".repeat(timeWidth)} ${nodeLabels.map(() => "─".repeat(colWidth)).join(" ")}`;
+    // Clip to the widest real line: a full-width rule under short content is
+    // itself enough to force the scrollbar this trimming exists to remove.
     return plainInspectorLine(
-        `${"-".repeat(timeWidth)} ${nodeLabels.map(() => "─".repeat(colWidth)).join(" ")}`,
+        Number.isFinite(contentWidth) ? full.slice(0, Math.max(timeWidth, contentWidth)) : full,
         "gray",
     );
 }
@@ -3871,7 +4133,7 @@ function buildSequenceEventLine(entry, nodeLabels, timeWidth, colWidth) {
         }
     });
 
-    return runs;
+    return trimTrailingRunPad(runs);
 }
 
 function buildNodeMapHeaderLine(nodeLabels, colWidth) {
@@ -3977,7 +4239,13 @@ function buildSequenceViewForSession(state, session, maxWidth, options = {}) {
         .map((entry) => entry.nodeLabel)
         .filter((nodeLabel) => nodeLabel && nodeLabel !== "orch"))).sort((left, right) => left.localeCompare(right));
     const uniqueNodes = unionNodes.length > 0 ? unionNodes : activeSessionNodes;
-    const timeWidth = 8;
+    // Size the TIME column to what is actually in it. A fixed 8 fits "20:10:19"
+    // but silently truncates any dated row, which is precisely the row where
+    // the date matters. Capped so one odd stamp cannot starve the lanes.
+    const timeWidth = Math.min(13, Math.max(
+        8,
+        ...visibleEntries.map((entry) => displayLength(String(entry.time || ""))),
+    ));
     const availableWidth = Math.max(18, maxWidth);
     const maxNodes = Math.max(1, Math.floor((availableWidth - timeWidth - 1) / 6));
     let nodeLabels = ["orch", ...uniqueNodes];
@@ -4018,12 +4286,21 @@ function buildSequenceViewForSession(state, session, maxWidth, options = {}) {
         }
     }
 
+    // Decoration is sized to real content, never to the pane's nominal width:
+    // a full-width rule under short content forces the very scrollbar the
+    // trimming above exists to remove.
+    const headerLine = buildSequenceHeaderLine(nodeLabels, timeWidth, colWidth);
+    const contentWidth = lines.reduce(
+        (widest, line) => Math.max(widest, sequenceLineWidth(line)),
+        sequenceLineWidth(headerLine),
+    );
+
     return {
         stickyLines: [
             ...statsLines,
             plainInspectorLine(`Window: ${recentWindow.label}`, "gray"),
-            buildSequenceHeaderLine(nodeLabels, timeWidth, colWidth),
-            buildSequenceDividerLine(nodeLabels, timeWidth, colWidth),
+            headerLine,
+            buildSequenceDividerLine(nodeLabels, timeWidth, colWidth, contentWidth),
         ],
         lines,
     };

package/ui/core/src/state.js

@@ -129,7 +129,7 @@ export function createInitialState({ mode = "local", branding = null, themeId =
             inspectorTab: INSPECTOR_TABS[0],
             sequenceExpandedTurns: [],
             sequenceSelectedTurn: null,
-            chatViewMode: chatViewMode === "summary" ? "summary" : "transcript",
+            chatViewMode: (chatViewMode === "summary" || chatViewMode === "rich") ? chatViewMode : "transcript",
             statsViewMode: "session",
             prompt: "",
             promptCursor: 0,
@@ -201,6 +201,17 @@ export function createInitialState({ mode = "local", branding = null, themeId =
             bySessionId: {},
             fullscreen: false,
             selectedArtifactId: null,
+            // Bulk selection. Deliberately separate from selectedArtifactId:
+            // marking rows must not move the preview, which keeps showing the
+            // originally selected artifact.
+            markedIds: [],
+            // How the preview was opened. "chat" must back out to the chat
+            // pane and leave the artifact list exactly as it was; "list" backs
+            // out to the list. One back button cannot serve both without this.
+            previewOrigin: null,
+            // Selection to restore when leaving a chat-opened preview, so
+            // following a chat link never disturbs the list.
+            restoreArtifactId: null,
             filter: {
                 scope: "selectedSession",
                 query: "",

package/ui/core/src/themes/github-light.js

@@ -5,7 +5,11 @@ const githubLightTheme = createTheme({
     label: "GitHub Light",
     description: "GitHub light palette with crisp neutrals, blue actions, and high-contrast status colors.",
     page: {
-        background: "#ffffff",
+        // Canvas, deliberately NOT the same as tui.surface (#ffffff). When the
+        // page and the panes are both pure white there is nothing for a pane to
+        // sit on, and every surface-vs-transparent color-mix in the stylesheet
+        // collapses to white. GitHub's own light UI uses exactly this pairing.
+        background: "#f6f8fa",
         foreground: "#1f2328",
         overlayBackground: "#ffffff",
         overlayForeground: "#1f2328",

package/ui/core/src/themes/index.js

@@ -16,6 +16,8 @@ import darkHighContrastTheme from "./dark-high-contrast.js";
 import terminalGreenTheme from "./terminal-green.js";
 import solarizedOpsTheme from "./solarized-ops.js";
 import highContrastMonoTheme from "./high-contrast-mono.js";
+import win95Theme from "./win95.js";
+import msDosTheme from "./ms-dos.js";
 
 const THEMES = Object.freeze([
     draculaTheme,
@@ -36,6 +38,8 @@ const THEMES = Object.freeze([
     terminalGreenTheme,
     solarizedOpsTheme,
     highContrastMonoTheme,
+    win95Theme,
+    msDosTheme,
 ].sort((left, right) => left.label.localeCompare(right.label, undefined, { sensitivity: "base" })));
 
 const THEME_MAP = new Map(THEMES.map((theme) => [theme.id, theme]));

package/ui/core/src/themes/light-high-contrast.js

@@ -8,7 +8,10 @@ const lightHighContrastTheme = createTheme({
     label: "Light High Contrast",
     description: "Pure black on white with maximum-contrast accents — nothing washes out, ever.",
     page: {
-        background: "#ffffff",
+        // Canvas only — panes stay pure #ffffff (tui.surface), so "black on
+        // white" still holds for every piece of text. Without this the panes,
+        // headers and composer were all the same white as the page.
+        background: "#eef0f2",
         foreground: "#000000",
         overlayBackground: "#ffffff",
         overlayForeground: "#000000",

package/ui/core/src/themes/ms-dos.js

@@ -0,0 +1,84 @@
+import { createTheme } from "./helpers.js";
+
+// MS-DOS 2.0 (1983) — MDA/CGA, text only, no windows.
+//
+// The detail that makes or breaks this: DOS's default attribute was 0x07,
+// which is LIGHT GREY on black, not white. White (#ffffff) was attribute 15,
+// used sparingly for emphasis. A pure white-on-black theme reads as "modern
+// terminal"; #aaaaaa reads as DOS instantly.
+//
+// The palette is the CGA 16, including the quirk everyone remembers — dark
+// yellow rendered as BROWN (#aa5500), never as olive.
+//
+// DOS 2.0 itself drew no boxes; the shell was an 80x25 scrolling field. The
+// code-page-437 framing that index.css adds is how DOS APPLICATIONS looked,
+// and CP437 shipped with the original PC, so it is era-correct even though the
+// 2.0 command line never used it. A multi-pane portal needs some framing, and
+// this is the honest period answer.
+const msDosTheme = createTheme({
+    id: "ms-dos",
+    label: "MS-DOS 2.0",
+    description: "CGA light-grey on black, the 16-colour CGA palette with brown, and CP437 box framing.",
+    page: {
+        background: "#000000",
+        foreground: "#aaaaaa",
+        overlayBackground: "#000000",
+        overlayForeground: "#aaaaaa",
+        // DEVIATION, deliberate: authentic CGA dark grey is #555555, which is
+        // roughly 3:1 on black and fails the muted-contrast bar the theme suite
+        // enforces. This is the lightest grey that still reads as secondary
+        // against #aaaaaa body text while staying legible.
+        hintColor: "#8f8f8f",
+        modalBackdrop: "rgba(0, 0, 0, 0.78)",
+        modalBackground: "#000000",
+        modalBorder: "#aaaaaa",
+        modalForeground: "#aaaaaa",
+        modalMuted: "#8f8f8f",
+        // Reverse video — exactly how CGA highlighted a selection.
+        modalSelectedBackground: "#aaaaaa",
+        modalSelectedBorder: "#ffffff",
+        modalSelectedForeground: "#000000",
+    },
+    terminal: {
+        background: "#000000",
+        foreground: "#aaaaaa",
+        cursor: "#aaaaaa",
+        cursorAccent: "#000000",
+        selectionBackground: "#aaaaaa",
+        // The CGA 16, unmodified.
+        black: "#000000",
+        red: "#aa0000",
+        green: "#00aa00",
+        yellow: "#aa5500",      // brown — the CGA quirk, not olive
+        blue: "#0000aa",
+        magenta: "#aa00aa",
+        cyan: "#00aaaa",
+        white: "#aaaaaa",       // attribute 7, the DOS default
+        brightBlack: "#8f8f8f",
+        brightRed: "#ff5555",
+        brightGreen: "#55ff55",
+        brightYellow: "#ffff55",
+        brightBlue: "#5555ff",
+        brightMagenta: "#ff55ff",
+        brightCyan: "#55ffff",
+        brightWhite: "#ffffff", // attribute 15, emphasis only
+    },
+    tui: {
+        surface: "#000000",
+        // Frames are drawn in body grey so they read as CP437 line characters
+        // rather than as chrome borrowed from a modern UI.
+        border: "#aaaaaa",
+        // Bright white is reserved for emphasis, so the operator's own turns
+        // get it — the one place attribute 15 is worth spending.
+        userChat: "#ffffff",
+        userChatLabel: "#ffffff",
+        activeHighlightBackground: "#aaaaaa",
+        activeHighlightForeground: "#000000",
+        selectionBackground: "#aaaaaa",
+        selectionForeground: "#000000",
+        promptCursorBackground: "#aaaaaa",
+        promptCursorForeground: "#000000",
+    },
+});
+
+export default msDosTheme;