pilotswarm 0.5.2 → 0.5.3

package/package.json

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

package/tui/src/app.js

@@ -519,9 +519,20 @@ export function PilotSwarmTuiApp({ controller, platform, onRequestExit }) {
                     return;
                 }
                 if (!controller.getState().ui.prompt) {
-                    if (controller.cancelLatestQueuedOutbox) {
+                    // Empty prompt: if a message is queued, Esc retracts the
+                    // latest one and stays; otherwise Esc exits to navigation
+                    // (ESC mode) — same as pressing Esc with text. Previously
+                    // this returned unconditionally, so an empty prompt with
+                    // nothing queued swallowed Esc and never blurred.
+                    const activeId = controller.getState().sessions.activeSessionId;
+                    const queued = controller.getQueuedOutboxItems
+                        ? controller.getQueuedOutboxItems(activeId)
+                        : [];
+                    if (queued.length > 0 && controller.cancelLatestQueuedOutbox) {
                         controller.cancelLatestQueuedOutbox().catch(() => {});
+                        return;
                     }
+                    controller.handleCommand(UI_COMMANDS.FOCUS_SESSIONS).catch(() => {});
                     return;
                 }
                 controller.setPrompt("");

package/ui/core/src/controller.js

@@ -5220,11 +5220,14 @@ export class PilotSwarmUiController {
 
         const contentWidth = Math.max(20, layout.leftWidth - 4);
         const contentHeight = Math.max(1, layout.chatPaneHeight - 2);
-        const lines = [
-            ...selectChatLines(state, contentWidth),
+        const lines = selectChatLines(state, contentWidth);
+        // The live "Working" strip and the queued-prompt overlay are both
+        // pinned in the bottom-sticky region (matching the ChatPane render),
+        // so the transcript scroll math must reserve them here — not inline.
+        const bottomStickyLines = [
+            ...selectOutboxOverlayLines(state, contentWidth),
             ...selectLiveActivityLines(state),
         ];
-        const bottomStickyLines = selectOutboxOverlayLines(state, contentWidth);
         const bottomStickyHeight = Math.min(
             Math.max(0, Math.floor(contentHeight * 0.34)),
             countWrappedRenderableLines(bottomStickyLines, contentWidth),

package/ui/core/src/history.js

@@ -360,12 +360,16 @@ function buildChatMessage(event, role) {
 
     const text = extractVisibleChatText(rawText, role);
     if (!hasVisibleMessageText(text)) return null;
+    const clientMessageIds = Array.isArray(event?.data?.clientMessageIds)
+        ? event.data.clientMessageIds.filter((id) => typeof id === "string" && id)
+        : [];
     return {
         id: `${event.sessionId}:${event.seq}`,
         role: deriveChatRole(event, role, text),
         text,
         time: formatTimestamp(event.createdAt),
         createdAt: event.createdAt instanceof Date ? event.createdAt.getTime() : new Date(event.createdAt).getTime(),
+        ...(clientMessageIds.length > 0 ? { clientMessageIds } : {}),
     };
 }
 
@@ -873,13 +877,43 @@ export function appendEventToHistory(history, event) {
         loadedEventLimit,
         loadedEventCount: Math.max(Number(history?.loadedEventCount || 0), nextEvents.length),
         hasOlderEvents: Boolean(history?.hasOlderEvents),
+        // clientMessageIds whose turn was user-stopped mid-flight. Carried
+        // across appends so a prompt stays flagged even as the transcript
+        // clamps/reloads.
+        stoppedMessageIds: Array.isArray(history?.stoppedMessageIds) ? history.stoppedMessageIds : [],
     };
 
+    // A stopped turn leaves a durable session.turn_stopped carrying the
+    // interrupted prompt's clientMessageIds. Record them and retroactively
+    // flag any matching transcript message (the user.message usually lands
+    // first, at turn start; the stop lands at turn end).
+    if (event.eventType === "session.turn_stopped") {
+        const ids = Array.isArray(event?.data?.clientMessageIds)
+            ? event.data.clientMessageIds.filter((id) => typeof id === "string" && id)
+            : [];
+        if (ids.length > 0) {
+            const merged = new Set([...next.stoppedMessageIds, ...ids]);
+            next.stoppedMessageIds = Array.from(merged);
+            next.chat = next.chat.map((m) => (
+                Array.isArray(m.clientMessageIds) && m.clientMessageIds.some((id) => merged.has(id))
+                    ? { ...m, stopped: true }
+                    : m
+            ));
+        }
+        return next;
+    }
+
     if (event.eventType === "user.message") {
         next.activity.push(...buildEmbeddedSystemNoticeActivityItems(event, "user"));
         next.activity = clampHistoryItems(next.activity, loadedEventLimit);
         const message = buildChatMessage(event, "user");
         if (!message) return next;
+        // Prospective flag: covers a bulk load where the stop event arrived
+        // before this message in the reduce order.
+        if (Array.isArray(message.clientMessageIds)
+            && message.clientMessageIds.some((id) => next.stoppedMessageIds.includes(id))) {
+            message.stopped = true;
+        }
         next.chat = reconcileOptimisticMessage(next.chat, message);
         next.chat.push(message);
         next.chat = clampHistoryItems(dedupeChatMessages(next.chat), loadedEventLimit);

package/ui/core/src/selectors.js

@@ -10,7 +10,6 @@ import {
     decorateArtifactLinksForChat,
     extractArtifactLinks,
     extractHttpLinks,
-    formatDisplayDateTime,
     formatHumanDurationSeconds,
     formatTimestamp,
     padRunsToDisplayWidth,
@@ -21,9 +20,9 @@ import {
     wrapRunsToDisplayWidth,
 } from "./formatting.js";
 import {
+    computeContextPercent,
     getContextCompactionBadge,
     getContextHeaderBadge,
-    getContextListBadge,
 } from "./context-usage.js";
 import { canonicalSystemTitle } from "./system-titles.js";
 import { normalizeArtifactEntries } from "./state.js";
@@ -217,19 +216,22 @@ function ownerInitials(owner) {
 }
 
 function shouldDecorateSessionOwners(state) {
-    if (state.auth?.principal) return true;
+    // Decorate owners only when the list actually surfaces more than one
+    // 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;
-    if (Object.values(state.sessions?.byId || {}).some((session) => session?.owner)) return true;
+    const owners = new Set();
+    for (const session of Object.values(state.sessions?.byId || {})) {
+        if (!session || session.isSystem || session.isGroup) continue;
+        const key = ownerKeyForOwner(session.owner);
+        if (!key) continue;
+        owners.add(key);
+        if (owners.size > 1) return true;
+    }
     return false;
 }
 
-function buildSessionListTitle(session, brandingTitle, decorateOwners = false) {
-    const title = buildSessionTitle(session, brandingTitle);
-    if (!decorateOwners || session?.isSystem) return title;
-    const prefix = session?.owner ? ownerInitials(session.owner) : "?";
-    return `(${prefix}) ${title}`;
-}
-
 function groupMemberSessions(group, byId = {}) {
     if (!group?.isGroup || !group?.groupId) return [];
     return Object.values(byId || {}).filter((session) => (
@@ -575,68 +577,118 @@ function buildSessionRowView(entry, session, state, totalDescendantCounts, visib
 
     const mainColor = session?.isGroup ? "cyan" : session?.isSystem ? "yellow" : sessionStatusColor(session, mode);
     const effectiveOwner = effectiveSessionOwner(session, state.sessions?.byId || {});
-    const titleText = buildSessionListTitle(
-        effectiveOwner !== (session?.owner ?? null) ? { ...session, owner: effectiveOwner } : session,
-        state.branding?.title || "PilotSwarm",
-        shouldDecorateSessionOwners(state),
-    );
-    // Show the session's last-updated time at the end of the row. For groups,
-    // keep the member-count badge but append the last-updated timestamp so the
-    // row reflects the same value the list is sorted by. `formatDisplayDateTime`
-    // uses the system locale/timezone, so the timestamp renders in the
-    // browser/client local zone.
+
+    const shortId = shortSessionId(session?.sessionId);
+
+    // Row age — last-updated (the value the list is sorted by). Coarse buckets
+    // so it doesn't tick every second: <1min · Nmin · NhMMm · NdHHh · Nw.
     const rowTimestampMs = session?.updatedAt
         || session?.summaryUpdatedAt
         || session?.latestSummaryUpdatedAt
         || session?.createdAt
         || 0;
-    const formattedRowTimestamp = rowTimestampMs ? formatDisplayDateTime(rowTimestampMs) : "";
-    const titleRuns = [
-        ...prefixRuns,
-        {
-        text: titleText,
-        color: mainColor,
-        bold: Boolean(session?.isSystem),
-        },
-    ];
+    const relTime = rowTimestampMs ? formatSessionAge(rowTimestampMs) : "";
+    const modelLabel = shortModelReasoningLabel(session?.model, session?.reasoningEffort);
+
+    // A regular session with no human title otherwise renders as a bare
+    // "(guid)" — an empty, ugly line. For those, pull the meta (id · age ·
+    // model) UP onto the main line so it carries information. Titled rows keep
+    // the title on the line and expand id·age·model·ctx only when selected.
+    const rawTitle = session?.isSystem
+        ? canonicalSystemTitle(session, state.branding?.title || "PilotSwarm")
+        : buildSessionDisplayTitle(session);
+    const hasRealTitle = Boolean(session?.isSystem || session?.isGroup || (rawTitle && rawTitle.trim()));
+
+    const titleRuns = [...prefixRuns];
+    // Owner chip — only when the list actually surfaces more than one human
+    // owner (shouldDecorateSessionOwners). Otherwise it's noise on every row.
+    if (shouldDecorateSessionOwners(state) && !session?.isSystem && !session?.isGroup) {
+        const initials = effectiveOwner ? ownerInitials(effectiveOwner) : "?";
+        titleRuns.push({ text: `${initials} · `, color: "cyan" });
+    }
+    if (hasRealTitle) {
+        titleRuns.push({ text: rawTitle, color: mainColor, bold: Boolean(session?.isSystem || session?.isGroup) });
+    } else {
+        // Untitled → id · age · model on one line (no wasted title line).
+        titleRuns.push({ text: shortId, color: mainColor });
+        if (relTime) { titleRuns.push({ text: " · ", color: "gray" }); titleRuns.push({ text: relTime, color: "gray" }); }
+        if (modelLabel) { titleRuns.push({ text: " · ", color: "gray" }); titleRuns.push({ text: modelLabel, color: "green" }); }
+    }
+
     const collapseBadge = getCollapseBadge(session?.sessionId, entry, totalDescendantCounts, visibleDescendantCounts);
     if (collapseBadge) {
         titleRuns.push({ text: ` ${collapseBadge.text}`, color: collapseBadge.color, bold: collapseBadge.bold });
     }
+    // Scheduled sessions keep a compact clock glyph on the title; the full
+    // cron cadence rides in the detail line.
+    const cronBadge = getCronBadge(session);
+    if (cronBadge) {
+        titleRuns.push({ text: " ⏱", color: "magenta" });
+    }
 
+    // Right-column context %: on every row that has usage. Compaction in
+    // flight takes precedence; else green normally, amber ≥70, red ≥85.
+    const ctxRuns = [];
+    const compactionState = session?.contextUsage?.compaction?.state;
+    const ctxPercent = computeContextPercent(session?.contextUsage);
+    if (session?.isGroup) {
+        if (session?.memberCount != null) ctxRuns.push({ text: `${session.memberCount}`, color: "gray" });
+    } else if (compactionState === "running") {
+        ctxRuns.push({ text: "⇊", color: "magenta" });
+    } else if (compactionState === "failed") {
+        ctxRuns.push({ text: "!", color: "red" });
+    } else if (ctxPercent != null) {
+        ctxRuns.push({ text: `${ctxPercent}%`, color: ctxPercent >= 85 ? "red" : ctxPercent >= 70 ? "yellow" : "green" });
+    } else {
+        ctxRuns.push({ text: "—", color: "gray" });
+    }
+
+    // Kept for backward-compat consumers; groups carry a member/time meta.
     const metaRuns = [];
     if (session?.isGroup && session?.memberCount != null) {
         metaRuns.push({ text: `${session.memberCount} member${session.memberCount === 1 ? "" : "s"}`, color: "gray" });
+        if (relTime) { metaRuns.push({ text: " · ", color: "gray" }); metaRuns.push({ text: relTime, color: "gray" }); }
     }
-    if (formattedRowTimestamp) {
-        if (metaRuns.length > 0) metaRuns.push({ text: " · ", color: "gray" });
-        metaRuns.push({ text: formattedRowTimestamp, color: "gray" });
-    }
-
-    const badgeRuns = [];
 
-    for (const badge of [
-        getCronBadge(session),
-        getContextListBadge(session?.contextUsage),
-    ]) {
-        if (!badge) continue;
-        if (badgeRuns.length > 0) badgeRuns.push({ text: " ", color: "gray" });
-        badgeRuns.push({ text: badge.text, color: badge.color, bold: badge.bold });
+    // Detail — expanded under the SELECTED row. Titled rows repeat
+    // id · age · model here; untitled rows already carry those on the main
+    // line, so their detail starts at the ctx breakdown to avoid repetition.
+    const detailRuns = [];
+    const pushSep = () => { if (detailRuns.length) detailRuns.push({ text: " · ", color: "gray" }); };
+    if (session?.isGroup) {
+        detailRuns.push(...metaRuns);
+    } else {
+        if (hasRealTitle) {
+            detailRuns.push({ text: shortId, color: "cyan" });
+            if (relTime) { pushSep(); detailRuns.push({ text: relTime, color: "gray" }); }
+            if (modelLabel) { pushSep(); detailRuns.push({ text: modelLabel, color: "green" }); }
+        }
+        const cu = session?.contextUsage;
+        if (cu && Number.isFinite(cu.currentTokens) && Number.isFinite(cu.tokenLimit) && cu.tokenLimit > 0) {
+            pushSep();
+            detailRuns.push({ text: `ctx ${formatCompactNumber(cu.currentTokens)}/${formatCompactNumber(cu.tokenLimit)}`, color: "gray" });
+        }
+        const childCount = totalDescendantCounts?.[session?.sessionId];
+        if (childCount) { pushSep(); detailRuns.push({ text: `${childCount} child${childCount === 1 ? "" : "ren"}`, color: "gray" }); }
+        if (cronBadge) { pushSep(); detailRuns.push({ text: cronBadge.text, color: cronBadge.color }); }
     }
 
-    const selectedMetaRuns = buildSelectedSessionMetaRuns(session, mode);
+    // Flat runs for the TUI: title + (for titled rows) dim age + context.
     const runs = [
         ...titleRuns,
-        ...(metaRuns.length > 0 ? [{ text: " ", color: "gray" }, ...metaRuns] : []),
-        ...(badgeRuns.length > 0 ? [{ text: " ", color: "gray" }, ...badgeRuns] : []),
+        ...(hasRealTitle && relTime && !session?.isGroup ? [{ text: "  ", color: "gray" }, { text: relTime, color: "gray" }] : []),
+        ...(ctxRuns.length && !session?.isGroup ? [{ text: " · ", color: "gray" }, ...ctxRuns] : []),
+        ...(session?.isGroup && metaRuns.length ? [{ text: " ", color: "gray" }, ...metaRuns] : []),
     ];
 
     return {
         runs,
         titleRuns,
+        ctxRuns,
         metaRuns,
-        badgeRuns,
-        selectedMetaRuns,
+        badgeRuns: [],
+        selectedMetaRuns: detailRuns,
+        detailRuns,
     };
 }
 
@@ -1245,9 +1297,16 @@ function buildChatMessagePrefix(message) {
         glyph = "x";
         glyphColor = "red";
     } else if (message?.role === "user" && !message?.optimistic && !message?.pendingPhase) {
-        // Real durable user.message in transcript — show the "sent" double-check.
-        glyph = "✓✓";
-        glyphColor = "green";
+        if (message?.stopped) {
+            // Delivered, but its turn was user-stopped mid-flight — the model
+            // may not have acted on it. Amber prohibition ("no parking") sign.
+            glyph = "⊘";
+            glyphColor = "yellow";
+        } else {
+            // Real durable user.message in transcript — show the "sent" double-check.
+            glyph = "✓✓";
+            glyphColor = "green";
+        }
     }
 
     const roleColor = message?.pendingPhase === "pending"
@@ -4638,6 +4697,23 @@ function formatRelativeTime(ts) {
     return `${Math.floor(ms / 86_400_000)}d ago`;
 }
 
+// Coarse session-age buckets for the list. Seconds tick too fast and just
+// distract, so the smallest bucket is "<1min"; then whole minutes to an hour,
+// then hours+minutes, then days+hours, then weeks. No "ago" suffix — the age
+// column context makes it clear.
+function formatSessionAge(ts) {
+    if (!ts) return "—";
+    const ms = Date.now() - ts;
+    if (ms < 60_000) return "<1min";
+    const totalMin = Math.floor(ms / 60_000);
+    if (totalMin < 60) return `${totalMin}min`;
+    const totalHours = Math.floor(totalMin / 60);
+    if (totalHours < 24) return `${totalHours}h${String(totalMin % 60).padStart(2, "0")}m`;
+    const days = Math.floor(totalHours / 24);
+    if (days < 14) return `${days}d${String(totalHours % 24).padStart(2, "0")}h`;
+    return `${Math.floor(days / 7)}w`;
+}
+
 function formatLocalTimestamp(ts) {
     if (!ts) return "—";
     const date = ts instanceof Date ? ts : new Date(ts);

package/ui/react/src/components.js

@@ -10,6 +10,7 @@ import {
     selectChatPaneChrome,
     selectLiveActivityLines,
     selectChatLines,
+    selectOutboxOverlayLines,
     selectActivityPane,
     selectArtifactUploadModal,
     selectArtifactPickerModal,
@@ -317,6 +318,7 @@ const ChatPane = React.memo(function ChatPane({ controller, width, height, frame
             activeSessionId,
             activeSession: activeSessionId ? state.sessions.byId[activeSessionId] || null : null,
             activeHistory: activeSessionId ? state.history.bySessionId.get(activeSessionId) || null : null,
+            activeOutbox: activeSessionId ? state.outbox?.bySessionId?.[activeSessionId] || null : null,
             branding: state.branding,
             connectionError: state.connection.error,
             connectionMode: state.connection.mode,
@@ -347,11 +349,21 @@ const ChatPane = React.memo(function ChatPane({ controller, width, height, frame
             history: {
                 bySessionId: historyMap,
             },
+            // The queued-prompt overlay reads state.outbox; without it here the
+            // TUI ChatPane's synthetic selectorState always saw an empty outbox
+            // and rendered no "queued prompts: N" even though the item was
+            // durably queued in the real store.
+            outbox: {
+                bySessionId: chatView.activeSessionId && chatView.activeOutbox
+                    ? { [chatView.activeSessionId]: chatView.activeOutbox }
+                    : {},
+            },
         };
     }, [
         chatView.activeHistory,
         chatView.activeSessionId,
         chatView.activeSession,
+        chatView.activeOutbox,
         chatView.branding,
         chatView.chatViewMode,
         chatView.connectionError,
@@ -383,13 +395,19 @@ const ChatPane = React.memo(function ChatPane({ controller, width, height, frame
         () => (startupError ? [] : selectLiveActivityLines(selectorState, { spinnerFrame, maxWidth: contentWidth })),
         [selectorState, startupError, spinnerFrame, contentWidth],
     );
-    // Concat the isolated live-activity block so the spinner tick only recomputes
-    // the small block, not the whole transcript.
-    const chatLines = React.useMemo(
-        () => (liveActivityLines.length > 0
-            ? [...elements, [{ text: "", color: null }], ...liveActivityLines]
-            : elements),
-        [elements, liveActivityLines],
+    const outboxLines = React.useMemo(
+        () => (startupError ? [] : selectOutboxOverlayLines(selectorState, contentWidth)),
+        [selectorState, startupError, contentWidth],
+    );
+    // The queued-prompt overlay and the live "Working" strip are pinned in the
+    // bottom-sticky region (outbox above, strip at the very bottom), so they
+    // stay put at the foot of the pane instead of scrolling inline with the
+    // transcript — matching the portal. The transcript itself stays crisp.
+    const bottomStickyLines = React.useMemo(
+        () => (outboxLines.length > 0 || liveActivityLines.length > 0
+            ? [...outboxLines, ...liveActivityLines]
+            : []),
+        [outboxLines, liveActivityLines],
     );
 
     return React.createElement(platform.Panel, {
@@ -399,7 +417,8 @@ const ChatPane = React.memo(function ChatPane({ controller, width, height, frame
         focused: chatView.focused,
         width,
         height,
-        lines: chatLines,
+        lines: elements,
+        bottomStickyLines,
         scrollOffset: chatView.chatScroll,
         scrollMode: "bottom",
         paneId: "chat",

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

@@ -1747,20 +1747,25 @@ function ScrollLinesPanel({ title, titleRight = null, color, focused, actions, l
         });
     }, []);
 
-    const [scrolledUp, setScrolledUp] = React.useState(false);
-    const updateScrolledUp = React.useCallback((el) => {
+    // Edge fades follow real overflow: fade the TOP only when content is
+    // clipped above (scrolled down) and the BOTTOM only when clipped below
+    // (scrolled up). With content that fits, neither fades — the first and
+    // last lines stay crisp.
+    const [scrollShadow, setScrollShadow] = React.useState({ up: false, down: false });
+    const updateScrollShadow = React.useCallback((el) => {
         if (!el) return;
         const up = el.scrollHeight - el.scrollTop - el.clientHeight > 4;
-        setScrolledUp((current) => (current === up ? current : up));
+        const down = el.scrollTop > 4;
+        setScrollShadow((cur) => (cur.up === up && cur.down === down ? cur : { up, down }));
     }, []);
     const handleBodyScroll = React.useCallback((event) => {
         onScroll();
-        updateScrolledUp(event.currentTarget);
+        updateScrollShadow(event.currentTarget);
         if (!preserveHorizontalScroll || syncingHorizontalRef.current) return;
         syncScrollLeft(event.currentTarget, stickyRef.current);
-    }, [onScroll, preserveHorizontalScroll, syncScrollLeft, updateScrolledUp]);
+    }, [onScroll, preserveHorizontalScroll, syncScrollLeft, updateScrollShadow]);
     React.useEffect(() => {
-        updateScrolledUp(ref.current);
+        updateScrollShadow(ref.current);
     });
 
     const handleStickyScroll = React.useCallback((event) => {
@@ -1779,7 +1784,7 @@ function ScrollLinesPanel({ title, titleRight = null, color, focused, actions, l
                 normalizedSticky.map((line, index) => React.createElement(Line, { key: `sticky:${index}`, line, theme })),
             )
             : null,
-        React.createElement("div", { ref, className: `ps-scroll-panel ${className}${scrolledUp ? " is-scrolled-up" : ""}`.trim(), onScroll: handleBodyScroll, onWheel, onTouchStart, onTouchMove, onTouchEnd, onTouchCancel: onTouchEnd },
+        React.createElement("div", { ref, className: `ps-scroll-panel ${className}${scrollShadow.down ? " is-scrolled-down" : ""}${scrollShadow.up ? " is-scrolled-up" : ""}`.trim(), onScroll: handleBodyScroll, onWheel, onTouchStart, onTouchMove, onTouchEnd, onTouchCancel: onTouchEnd },
             typeof renderBody === "function"
                 ? renderBody(normalizedLines, theme)
                 : structuredBlocks
@@ -1804,25 +1809,27 @@ function SessionRowContent({ row, theme, structured = false }) {
             : row.text;
     }
 
-    const hasMeta = Array.isArray(row.metaRuns) && row.metaRuns.length > 0;
-    const hasBadges = Array.isArray(row.badgeRuns) && row.badgeRuns.length > 0;
-    const hasSelectedMeta = row.active && Array.isArray(row.selectedMetaRuns) && row.selectedMetaRuns.length > 0;
+    // Dense row: the title takes one line (clamped by CSS) and the context %
+    // is pinned to the right. The full id · time · model · ctx detail unfolds
+    // only under the selected row.
+    const ctxRuns = Array.isArray(row.ctxRuns) ? row.ctxRuns : [];
+    const detailRuns = Array.isArray(row.detailRuns)
+        ? row.detailRuns
+        : (Array.isArray(row.selectedMetaRuns) ? row.selectedMetaRuns : []);
+    const hasCtx = ctxRuns.length > 0;
+    const hasDetail = row.active && detailRuns.length > 0;
 
     return React.createElement(React.Fragment, null,
-        React.createElement("div", { className: "ps-session-row-title" },
-            React.createElement(Runs, { runs: row.titleRuns, theme }),
-            // Meta (timestamp / member count) sits inline on the title line.
-            hasMeta
-                ? React.createElement("span", { className: "ps-session-row-meta" },
-                    React.createElement(Runs, { runs: [{ text: " ", color: "gray" }, ...row.metaRuns], theme }))
+        React.createElement("div", { className: "ps-session-row-line" },
+            React.createElement("div", { className: "ps-session-row-title" },
+                React.createElement(Runs, { runs: row.titleRuns, theme })),
+            hasCtx
+                ? React.createElement("div", { className: "ps-session-row-ctx" },
+                    React.createElement(Runs, { runs: ctxRuns, theme }))
                 : null),
-        hasBadges
-            ? React.createElement("div", { className: "ps-session-row-badges" },
-                React.createElement(Runs, { runs: row.badgeRuns, theme }))
-            : null,
-        hasSelectedMeta
-            ? React.createElement("div", { className: "ps-session-row-selected-meta" },
-                React.createElement(Runs, { runs: row.selectedMetaRuns, theme }))
+        hasDetail
+            ? React.createElement("div", { className: "ps-session-row-detail" },
+                React.createElement(Runs, { runs: detailRuns, theme }))
             : null);
 }