pilotswarm 0.5.2 → 0.5.4

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"
@@ -4072,6 +4131,55 @@ export function selectReasoningEffortPickerModal(state, maxWidth = 64) {
     };
 }
 
+export function selectContextTierPickerModal(state, maxWidth = 64) {
+    const modal = state.ui.modal;
+    if (!modal || modal.type !== "contextTierPicker") return null;
+
+    const items = Array.isArray(modal.items) ? modal.items : [];
+    const selectedIndex = Math.max(0, Number(modal.selectedIndex) || 0);
+    const contentWidth = Math.max(24, maxWidth - 4);
+
+    const rows = items.map((item, index) => {
+        const isSelected = index === selectedIndex;
+        const labelRuns = fitRuns([
+            { text: "· ", color: "gray" },
+            { text: String(item?.label || item?.id || "tier"), color: "white", bold: true },
+            ...(item?.isDefault ? [{ text: " ← model default", color: "gray" }] : []),
+        ], contentWidth);
+        return isSelected
+            ? buildActiveHighlightLine(labelRuns.map((run) => run.text).join("").padEnd(contentWidth, " "))
+            : labelRuns;
+    });
+
+    const selectedItem = items[selectedIndex] || null;
+    const modelItem = modal.modelItem || null;
+    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: "Long context costs more per token.", color: "gray" }],
+    ];
+
+    return {
+        title: modal.title || "Select context window",
+        rows,
+        selectedRowIndex: selectedIndex,
+        detailsTitle: "Context Window",
+        detailsLines,
+        idealWidth: Math.min(
+            Math.max(
+                46,
+                rows.reduce((max, row) => {
+                    if (Array.isArray(row)) return Math.max(max, flattenRunsLength(row));
+                    return Math.max(max, String(row?.text || "").length);
+                }, 0) + 4,
+            ),
+            maxWidth,
+        ),
+    };
+}
+
 export function selectSessionGroupPickerModal(state, maxWidth = 72) {
     const modal = state.ui.modal;
     if (!modal || modal.type !== "sessionGroupPicker") return null;
@@ -4638,6 +4746,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,
@@ -21,6 +22,7 @@ import {
     selectLogFilterModal,
     selectModelPickerModal,
     selectReasoningEffortPickerModal,
+    selectContextTierPickerModal,
     selectRenameSessionModal,
     selectSessionAgentPickerModal,
     selectSessionGroupNameModal,
@@ -317,6 +319,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 +350,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 +396,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 +418,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",
@@ -1059,6 +1079,60 @@ function ReasoningEffortPickerModalContainer({ controller }) {
     return React.createElement(ReasoningEffortPickerModal, { state });
 }
 
+function ContextTierPickerModal({ state }) {
+    const platform = useUiPlatform();
+    const modal = selectContextTierPickerModal(state);
+    if (!modal) return null;
+
+    const viewport = typeof platform.getViewport === "function"
+        ? platform.getViewport()
+        : { width: 120, height: 40 };
+    const width = Math.max(46, Math.min(modal.idealWidth || 64, (viewport.width || 120) - 16));
+    const listHeight = Math.max(7, Math.min(modal.rows.length + 2, 10, (viewport.height || 40) - 16));
+    const detailsHeight = Math.max(6, Math.min(8, (viewport.height || 40) - listHeight - 10));
+    const lines = modal.rows.length > 0
+        ? modal.rows
+        : [{ text: "No context windows available.", color: "gray" }];
+    const contentRows = Math.max(1, listHeight - 2);
+    const scrollOffset = Math.max(0, modal.selectedRowIndex - Math.floor(contentRows / 2));
+
+    return React.createElement(platform.Overlay, null,
+        React.createElement(platform.Column, { width },
+            React.createElement(platform.Panel, {
+                title: modal.title,
+                color: "cyan",
+                focused: false,
+                width,
+                height: listHeight,
+                lines,
+                scrollOffset,
+                scrollMode: "top",
+                marginBottom: 1,
+                fillColor: "surface",
+            }),
+            React.createElement(platform.Panel, {
+                title: modal.detailsTitle || "Context Window",
+                color: "cyan",
+                focused: false,
+                width,
+                height: detailsHeight,
+                lines: modal.detailsLines,
+                scrollOffset: 0,
+                scrollMode: "top",
+                fillColor: "surface",
+            }),
+        ));
+}
+
+function ContextTierPickerModalContainer({ controller }) {
+    const state = useControllerSelector(controller, (rootState) => ({
+        ui: {
+            modal: rootState.ui.modal,
+        },
+    }), shallowEqualObject);
+    return React.createElement(ContextTierPickerModal, { state });
+}
+
 function SessionAgentPickerModal({ state }) {
     const platform = useUiPlatform();
     const modal = selectSessionAgentPickerModal(state);
@@ -2037,6 +2111,7 @@ export function SharedPilotSwarmApp({ controller, versionLabel = null }) {
         React.createElement(HelpModalContainer, { controller }),
         React.createElement(ModelPickerModalContainer, { controller }),
         React.createElement(ReasoningEffortPickerModalContainer, { controller }),
+        React.createElement(ContextTierPickerModalContainer, { controller }),
         React.createElement(ThemePickerModalContainer, { controller }),
         React.createElement(SessionAgentPickerModalContainer, { controller }),
         React.createElement(SessionGroupPickerModalContainer, { controller }),

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

@@ -30,6 +30,7 @@ import {
     selectLogFilterModal,
     selectModelPickerModal,
     selectReasoningEffortPickerModal,
+    selectContextTierPickerModal,
     selectRenameSessionModal,
     selectSessionAgentPickerModal,
     selectSessionGroupNameModal,
@@ -1747,20 +1748,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 +1785,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 +1810,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);
 }
 
@@ -3345,6 +3353,7 @@ function ModalLayer({ controller }) {
         themePicker: selectThemePickerModal(state),
         modelPicker: selectModelPickerModal(state),
         reasoningEffortPicker: selectReasoningEffortPickerModal(state),
+        contextTierPicker: selectContextTierPickerModal(state),
         sessionAgentPicker: selectSessionAgentPickerModal(state),
         sessionGroupPicker: selectSessionGroupPickerModal(state),
         sessionGroupName: selectSessionGroupNameModal(state),
@@ -3399,6 +3408,7 @@ function ModalLayer({ controller }) {
             "themePicker",
             "modelPicker",
             "reasoningEffortPicker",
+            "contextTierPicker",
             "sessionAgentPicker",
             "sessionGroupPicker",
             "artifactPicker",
@@ -3422,6 +3432,7 @@ function ModalLayer({ controller }) {
         modalState.themePicker?.selectedRowIndex,
         modalState.modelPicker?.selectedRowIndex,
         modalState.reasoningEffortPicker?.selectedRowIndex,
+        modalState.contextTierPicker?.selectedRowIndex,
         modalState.sessionAgentPicker?.selectedRowIndex,
         modalState.sessionGroupPicker?.selectedRowIndex,
         modalState.artifactPicker?.selectedRowIndex,
@@ -3438,7 +3449,7 @@ function ModalLayer({ controller }) {
     const renderListModal = (presentation, confirmLabel = "Apply") => {
         const rows = Array.isArray(presentation.rows) ? presentation.rows : [];
         const rowItemIndexes = Array.isArray(presentation.rowItemIndexes) ? presentation.rowItemIndexes : null;
-        const usesHangingIndent = modal.type === "modelPicker" || modal.type === "reasoningEffortPicker" || modal.type === "sessionAgentPicker";
+        const usesHangingIndent = modal.type === "modelPicker" || modal.type === "reasoningEffortPicker" || modal.type === "contextTierPicker" || modal.type === "sessionAgentPicker";
         const renderedList = rowItemIndexes && rowItemIndexes.length === rows.length
             ? rows.map((row, rowIndex) => {
                 const itemIndex = rowItemIndexes[rowIndex];
@@ -3533,6 +3544,9 @@ function ModalLayer({ controller }) {
     if (modal.type === "reasoningEffortPicker" && modalState.reasoningEffortPicker) {
         return renderListModal(modalState.reasoningEffortPicker, pickerConfirmLabel);
     }
+    if (modal.type === "contextTierPicker" && modalState.contextTierPicker) {
+        return renderListModal(modalState.contextTierPicker, pickerConfirmLabel);
+    }
     if (modal.type === "sessionAgentPicker" && modalState.sessionAgentPicker) {
         return renderListModal(modalState.sessionAgentPicker, "Create Session");
     }