@bubblebrain-ai/bubble 0.0.63 → 0.0.65

package/dist/tui/components/rewind-picker.js

@@ -0,0 +1,317 @@
+import chalk from "chalk";
+import { matchesKey, truncateToWidth, visibleWidth, } from "@bubblebrain-ai/pi-tui";
+import { safeSheetText } from "./bottom-sheet.js";
+import { darkTheme } from "../model/theme.js";
+import { themeBackground, themeDim, themeForeground } from "../model/theme-style.js";
+const SCOPE_ORDER = ["all", "chat", "code"];
+export const REWIND_SCOPE_LABEL = {
+    all: "conversation + files",
+    chat: "conversation only",
+    code: "files only",
+};
+function fill(text, width) {
+    const clipped = truncateToWidth(text, Math.max(0, width), "…");
+    return clipped + " ".repeat(Math.max(0, width - visibleWidth(clipped)));
+}
+function panelLine(text, width, selected = false, theme = darkTheme) {
+    const safeWidth = Math.max(1, width);
+    const rail = themeForeground(theme.accent, "▎");
+    if (safeWidth === 1)
+        return themeBackground(theme.backgroundPanel, rail);
+    const body = themeBackground(selected ? theme.traceSelectedBg : theme.backgroundPanel, fill(text, safeWidth - 1));
+    return `${themeBackground(theme.backgroundPanel, rail)}${body}`;
+}
+function cycleScope(scope, delta) {
+    const index = SCOPE_ORDER.indexOf(scope);
+    return SCOPE_ORDER[(index + delta + SCOPE_ORDER.length) % SCOPE_ORDER.length];
+}
+/** Grok-style prompt-area rewind sheet: filled surface, accent rail, and full-row selection. */
+export class RewindPickerComponent {
+    callbacks;
+    focused = false;
+    phase;
+    points = [];
+    selected = 0;
+    choice = 0;
+    scope = "all";
+    error = "";
+    hitRows = [];
+    constructor(initialPhase, points, callbacks) {
+        this.callbacks = callbacks;
+        this.phase = initialPhase;
+        this.setPoints(points);
+    }
+    getPhase() {
+        return this.phase;
+    }
+    getSelectedPoint() {
+        return this.points[this.selected];
+    }
+    showLoading() {
+        this.phase = "loading";
+        this.choice = 0;
+        this.callbacks.onScopeChange(undefined, this.scope);
+        this.callbacks.onRender();
+    }
+    showPicker(points) {
+        this.setPoints(points);
+        if (this.points.length === 0) {
+            this.showError("No undoable prompts.");
+            return;
+        }
+        this.phase = "picker";
+        this.choice = 0;
+        this.emitPreview();
+        this.callbacks.onRender();
+    }
+    showExecuting() {
+        this.phase = "executing";
+        this.callbacks.onRender();
+    }
+    showError(message) {
+        this.phase = "error";
+        this.error = safeSheetText(message).replace(/\n+/g, " ");
+        this.callbacks.onScopeChange(undefined, this.scope);
+        this.callbacks.onRender();
+    }
+    render(width) {
+        const theme = this.callbacks.theme ?? darkTheme;
+        const safeWidth = Math.max(1, Math.floor(width));
+        this.hitRows = [];
+        switch (this.phase) {
+            case "loading":
+                return this.finish([this.line(themeForeground(theme.muted, "  Loading rewind points..."), safeWidth)], safeWidth);
+            case "executing":
+                return this.finish([this.line(themeForeground(theme.muted, "  Rewinding..."), safeWidth)], safeWidth);
+            case "cancel-offer":
+                return this.renderCancelOffer(safeWidth);
+            case "confirm":
+                return this.renderConfirm(safeWidth);
+            case "error":
+                return this.renderError(safeWidth);
+            case "picker":
+                return this.renderPicker(safeWidth);
+        }
+    }
+    handleInput(data) {
+        if (this.phase === "loading" || this.phase === "executing")
+            return;
+        if (matchesKey(data, "escape") || matchesKey(data, "ctrl+c")) {
+            this.callbacks.onCancel();
+            return;
+        }
+        if (this.phase === "error") {
+            if (matchesKey(data, "enter"))
+                this.callbacks.onCancel();
+            return;
+        }
+        if (this.phase === "picker") {
+            if (matchesKey(data, "up") || data === "k")
+                return this.movePoint(-1);
+            if (matchesKey(data, "down") || data === "j")
+                return this.movePoint(1);
+            if (matchesKey(data, "pageUp"))
+                return this.movePoint(-this.visiblePointBudget());
+            if (matchesKey(data, "pageDown"))
+                return this.movePoint(this.visiblePointBudget());
+            if (matchesKey(data, "left") || data === "h" || matchesKey(data, "shift+tab"))
+                return this.stepScope(-1);
+            if (matchesKey(data, "right") || data === "l" || matchesKey(data, "tab"))
+                return this.stepScope(1);
+            if (matchesKey(data, "enter") && this.getSelectedPoint()) {
+                this.phase = "confirm";
+                this.choice = 0;
+                this.callbacks.onRender();
+            }
+            return;
+        }
+        if (this.phase === "cancel-offer") {
+            if (data === "y")
+                return this.callbacks.onCancelRun();
+            if (data === "n")
+                return this.callbacks.onCancel();
+            if (matchesKey(data, "up") || data === "k")
+                return this.moveChoice(-1, 2);
+            if (matchesKey(data, "down") || data === "j" || matchesKey(data, "tab"))
+                return this.moveChoice(1, 2);
+            if (matchesKey(data, "enter"))
+                return this.activateCancelChoice();
+            return;
+        }
+        if (data === "y")
+            return this.confirm();
+        if (data === "n")
+            return this.callbacks.onCancel();
+        if (matchesKey(data, "left") || data === "h" || matchesKey(data, "shift+tab"))
+            return this.stepScope(-1);
+        if (matchesKey(data, "right") || data === "l" || matchesKey(data, "tab"))
+            return this.stepScope(1);
+        if (matchesKey(data, "up") || data === "k")
+            return this.moveChoice(-1, 2);
+        if (matchesKey(data, "down") || data === "j")
+            return this.moveChoice(1, 2);
+        if (matchesKey(data, "enter")) {
+            if (this.choice === 0)
+                this.confirm();
+            else
+                this.callbacks.onCancel();
+        }
+    }
+    handleMouse(event) {
+        if (event.kind === "leave")
+            return false;
+        const hit = this.hitRows[event.y];
+        if (!hit)
+            return false;
+        if (event.kind === "move")
+            return this.hover(hit);
+        if (event.release || (event.button & 3) !== 0)
+            return false;
+        this.hover(hit);
+        this.activate(hit);
+        return true;
+    }
+    invalidate() { }
+    renderPicker(width) {
+        const theme = this.callbacks.theme ?? darkTheme;
+        const rows = [];
+        rows.push(this.line(`  ${chalk.bold(themeForeground(theme.accent, "Rewind to which turn?"))}`, width));
+        rows.push(this.line(`  ${themeDim(theme.dim, "Restore:")} ${themeForeground(theme.accent, REWIND_SCOPE_LABEL[this.scope])}`, width));
+        const budget = this.visiblePointBudget();
+        const start = Math.max(0, Math.min(this.selected - budget + 1, Math.max(0, this.points.length - budget)));
+        for (let index = start; index < Math.min(this.points.length, start + budget); index += 1) {
+            const point = this.points[index];
+            const selected = index === this.selected;
+            const fileNote = point.fileCount > 0
+                ? ` · ${point.fileCount} file${point.fileCount === 1 ? "" : "s"}`
+                : "";
+            const plain = `  · ${safeSheetText(point.turn.preview)}${fileNote}`;
+            rows.push(this.line(selected ? chalk.bold(themeForeground(theme.inputText, plain)) : themeForeground(theme.muted, plain), width, selected, { kind: "point", index }));
+        }
+        rows.push(this.line(themeDim(theme.dim, "  ↑/↓ or j/k choose · ←/→ scope · Enter · Esc cancel"), width));
+        return this.finish(rows, width);
+    }
+    renderCancelOffer(width) {
+        const theme = this.callbacks.theme ?? darkTheme;
+        const rows = [
+            this.line(`  ${chalk.bold(themeForeground(theme.accent, "A turn is currently running."))}`, width),
+            this.line(themeForeground(theme.muted, "  Cancel it before rewinding?"), width),
+            this.choiceLine("y", "Cancel turn and rewind", this.choice === 0, width, { kind: "cancel-choice", index: 0 }),
+            this.choiceLine("n", "Let it finish", this.choice === 1, width, { kind: "cancel-choice", index: 1 }),
+            this.line(themeDim(theme.dim, "  ↑/↓ choose · Enter confirm · Esc dismiss"), width),
+        ];
+        return this.finish(rows, width);
+    }
+    renderConfirm(width) {
+        const theme = this.callbacks.theme ?? darkTheme;
+        const point = this.getSelectedPoint();
+        const preview = point?.turn.preview ?? "this turn";
+        const title = truncateToWidth(`  Rewind to “${safeSheetText(preview)}”?`, Math.max(1, width - 1), "…");
+        const rows = [
+            this.line(chalk.bold(themeForeground(theme.accent, title)), width),
+            this.line(`  ${themeDim(theme.dim, "Restore:")} ${themeForeground(theme.accent, REWIND_SCOPE_LABEL[this.scope])} ${themeDim(theme.dim, "(←/→ change)")}`, width),
+            this.choiceLine("y", "Yes", this.choice === 0, width, { kind: "confirm-choice", index: 0 }),
+            this.choiceLine("n", "No", this.choice === 1, width, { kind: "confirm-choice", index: 1 }),
+            this.line(themeDim(theme.dim, "  ↑/↓ choose · Enter confirm · Esc dismiss"), width),
+        ];
+        return this.finish(rows, width);
+    }
+    renderError(width) {
+        const theme = this.callbacks.theme ?? darkTheme;
+        const rows = [
+            this.line(`  ${chalk.bold(themeForeground(theme.error, "Rewind failed"))}`, width),
+            this.line(`  ${themeForeground(theme.inputText, this.error)}`, width),
+            this.choiceLine("Esc", "Dismiss", true, width, { kind: "dismiss" }),
+        ];
+        return this.finish(rows, width);
+    }
+    line(text, width, selected = false, hit) {
+        this.hitRows.push(hit);
+        return panelLine(text, width, selected, this.callbacks.theme ?? darkTheme);
+    }
+    choiceLine(key, label, selected, width, hit) {
+        const theme = this.callbacks.theme ?? darkTheme;
+        const marker = selected ? "●" : "○";
+        const plain = `  ${key.padEnd(4)} (${marker}) ${label}`;
+        return this.line(selected ? chalk.bold(themeForeground(theme.inputText, plain)) : themeForeground(theme.muted, plain), width, selected, hit);
+    }
+    finish(rows, width) {
+        return rows.map((row) => truncateToWidth(row, Math.max(1, width), ""));
+    }
+    setPoints(points) {
+        // Grok puts the newest rewind point first.
+        this.points = [...points].sort((a, b) => b.turnIndex - a.turnIndex);
+        this.selected = Math.min(this.selected, Math.max(0, this.points.length - 1));
+    }
+    visiblePointBudget() {
+        return Math.max(1, Math.min(10, this.callbacks.getTerminalRows() - 7));
+    }
+    movePoint(delta) {
+        if (this.points.length === 0)
+            return;
+        const next = Math.max(0, Math.min(this.points.length - 1, this.selected + delta));
+        if (next === this.selected)
+            return;
+        this.selected = next;
+        this.emitPreview();
+        this.callbacks.onRender();
+    }
+    moveChoice(delta, count) {
+        this.choice = Math.max(0, Math.min(count - 1, this.choice + delta));
+        this.callbacks.onRender();
+    }
+    stepScope(delta) {
+        this.scope = cycleScope(this.scope, delta);
+        this.callbacks.onScopeChange(this.getSelectedPoint(), this.scope);
+        this.callbacks.onRender();
+    }
+    emitPreview() {
+        const point = this.getSelectedPoint();
+        if (point)
+            this.callbacks.onPreview(point, this.scope);
+    }
+    confirm() {
+        const point = this.getSelectedPoint();
+        if (point)
+            this.callbacks.onConfirm(point, this.scope);
+    }
+    activateCancelChoice() {
+        if (this.choice === 0)
+            this.callbacks.onCancelRun();
+        else
+            this.callbacks.onCancel();
+    }
+    hover(hit) {
+        if (hit.kind === "point") {
+            if (hit.index === this.selected)
+                return false;
+            this.selected = hit.index;
+            this.emitPreview();
+            return true;
+        }
+        if (hit.kind === "cancel-choice" || hit.kind === "confirm-choice") {
+            if (hit.index === this.choice)
+                return false;
+            this.choice = hit.index;
+            return true;
+        }
+        return false;
+    }
+    activate(hit) {
+        if (hit.kind === "point") {
+            this.phase = "confirm";
+            this.choice = 0;
+            return;
+        }
+        if (hit.kind === "cancel-choice")
+            return this.activateCancelChoice();
+        if (hit.kind === "confirm-choice") {
+            if (hit.index === 0)
+                this.confirm();
+            else
+                this.callbacks.onCancel();
+            return;
+        }
+        this.callbacks.onCancel();
+    }
+}

package/dist/tui/components/session-picker.d.ts

@@ -0,0 +1,49 @@
+import { type Component, type Focusable, type TuiMouseEvent } from "@bubblebrain-ai/pi-tui";
+import type { SessionSummary } from "../../session.js";
+import { type Theme } from "../model/theme.js";
+export type SessionPickerScope = "project" | "all";
+export interface SessionPickerComponentOptions {
+    currentCwd: string;
+    currentSessions: SessionSummary[];
+    allSessions: SessionSummary[];
+    activeFile: string;
+    getTerminalRows(): number;
+    onSelect(file: string): void;
+    onNewSession(): void;
+    onClose(): void;
+    onRender(): void;
+    theme?: Theme;
+}
+/** Centered session browser with project/all scopes and a first-class fresh-session action. */
+export declare class SessionPickerComponent implements Component, Focusable {
+    private readonly options;
+    focused: boolean;
+    private scope;
+    private selectedKey;
+    private hoveredKey;
+    private closeHovered;
+    private hoveredTab;
+    private offset;
+    private bodyRows;
+    private frameWidth;
+    private rows;
+    private selectableKeys;
+    private hitRows;
+    private tabHits;
+    constructor(options: SessionPickerComponentOptions);
+    render(width: number): string[];
+    handleInput(data: string): void;
+    handleMouse(event: TuiMouseEvent): boolean;
+    invalidate(): void;
+    private visibleSessions;
+    private buildRows;
+    private renderRow;
+    private renderTabs;
+    private renderFooter;
+    private frameLine;
+    private preferredKey;
+    private setScope;
+    private move;
+    private selectAt;
+    private activate;
+}

package/dist/tui/components/session-picker.js

@@ -0,0 +1,303 @@
+import chalk from "chalk";
+import { matchesKey, truncateToWidth, visibleWidth, } from "@bubblebrain-ai/pi-tui";
+import { formatRelativeTime } from "../recent-activity.js";
+import { parseTerminalMouseWheel } from "../model/terminal-mouse.js";
+import { darkTheme } from "../model/theme.js";
+import { themeBackground, themeDim, themeForeground } from "../model/theme-style.js";
+const MAX_PANEL_HEIGHT = 30;
+function fit(value, width, ellipsis = "") {
+    if (width <= 0)
+        return "";
+    const clipped = truncateToWidth(value, width, ellipsis);
+    return clipped + " ".repeat(Math.max(0, width - visibleWidth(clipped)));
+}
+function alignSides(left, right, width) {
+    if (!right)
+        return fit(left, width, "…");
+    const gap = 2;
+    const rightWidth = Math.min(visibleWidth(right), Math.max(0, Math.floor(width * 0.42)));
+    const clippedRight = truncateToWidth(right, rightWidth, "…");
+    const leftWidth = Math.max(0, width - visibleWidth(clippedRight) - gap);
+    return `${fit(left, leftWidth, "…")}${" ".repeat(gap)}${clippedRight}`;
+}
+function dedupeSessions(sessions) {
+    const seen = new Set();
+    return sessions.filter((session) => {
+        if (seen.has(session.file))
+            return false;
+        seen.add(session.file);
+        return true;
+    });
+}
+/** Centered session browser with project/all scopes and a first-class fresh-session action. */
+export class SessionPickerComponent {
+    options;
+    focused = false;
+    scope = "project";
+    selectedKey = "new";
+    hoveredKey;
+    closeHovered = false;
+    hoveredTab;
+    offset = 0;
+    bodyRows = 0;
+    frameWidth = 0;
+    rows = [];
+    selectableKeys = [];
+    hitRows = [];
+    tabHits = [];
+    constructor(options) {
+        this.options = options;
+        this.selectedKey = this.preferredKey(options.currentSessions);
+    }
+    render(width) {
+        const theme = this.options.theme ?? darkTheme;
+        const frameWidth = Math.max(1, Math.floor(width));
+        const frameHeight = Math.max(1, Math.min(MAX_PANEL_HEIGHT, this.options.getTerminalRows() - 4));
+        this.frameWidth = frameWidth;
+        if (frameWidth < 40 || frameHeight < 10) {
+            return [truncateToWidth("Sessions requires a 40 × 10 terminal · Esc close", frameWidth, "")]
+                .slice(0, frameHeight);
+        }
+        const innerWidth = frameWidth - 2;
+        const horizontal = "─".repeat(innerWidth);
+        const close = this.closeHovered
+            ? chalk.bold(themeForeground(theme.inputText, "[✗]"))
+            : themeForeground(theme.muted, "[✗]");
+        const topDashCount = Math.max(0, frameWidth - 7);
+        const top = themeForeground(theme.border, `┌${"─".repeat(topDashCount)}`) + ` ${close} ` + themeForeground(theme.border, "┐");
+        const bottom = themeForeground(theme.border, `└${horizontal}┘`);
+        const separator = themeForeground(theme.border, `├${horizontal}┤`);
+        const tabs = this.frameLine(this.renderTabs(innerWidth), innerWidth);
+        this.rows = this.buildRows();
+        this.selectableKeys = this.rows
+            .filter((row) => row.kind !== "header")
+            .map((row) => row.key);
+        if (!this.selectableKeys.includes(this.selectedKey))
+            this.selectedKey = this.preferredKey(this.visibleSessions());
+        this.bodyRows = Math.max(1, frameHeight - 5);
+        const selectedRow = this.rows.findIndex((row) => row.key === this.selectedKey);
+        if (selectedRow < this.offset)
+            this.offset = selectedRow;
+        if (selectedRow >= this.offset + this.bodyRows)
+            this.offset = selectedRow - this.bodyRows + 1;
+        this.offset = Math.max(0, Math.min(this.offset, Math.max(0, this.rows.length - this.bodyRows)));
+        const contentWidth = Math.max(1, innerWidth - 4);
+        const visible = this.rows.slice(this.offset, this.offset + this.bodyRows);
+        while (visible.length < this.bodyRows)
+            visible.push({ kind: "header", key: `empty:${visible.length}`, label: "" });
+        this.hitRows = [];
+        const bodyStart = 3;
+        const body = visible.map((row, index) => {
+            const localY = bodyStart + index;
+            const selectable = row.kind !== "header";
+            if (selectable)
+                this.hitRows[localY] = { key: row.key, row: localY };
+            const selected = selectable && row.key === this.selectedKey;
+            const hovered = selectable && row.key === this.hoveredKey;
+            const text = this.renderRow(row, contentWidth);
+            const padded = `  ${fit(text, contentWidth, "…")}  `;
+            const styled = selected
+                ? chalk.bold(themeForeground(theme.inputText, themeBackground(theme.traceSelectedBg, fit(padded, innerWidth))))
+                : hovered
+                    ? themeForeground(theme.inputText, themeBackground(theme.traceHoverBg, fit(padded, innerWidth)))
+                    : themeBackground(theme.backgroundPanel, fit(padded, innerWidth));
+            return `${themeForeground(theme.border, "│")}${styled}${themeForeground(theme.border, "│")}`;
+        });
+        const footer = this.frameLine(this.renderFooter(innerWidth), innerWidth);
+        return [top, tabs, separator, ...body, footer, bottom]
+            .slice(0, frameHeight)
+            .map((line) => truncateToWidth(line, frameWidth, ""));
+    }
+    handleInput(data) {
+        const wheel = parseTerminalMouseWheel(data);
+        if (wheel.length > 0) {
+            for (const direction of wheel)
+                this.move(direction === "up" ? -3 : 3);
+            return;
+        }
+        if (matchesKey(data, "escape") || matchesKey(data, "ctrl+c"))
+            return this.options.onClose();
+        if (matchesKey(data, "tab"))
+            return this.setScope(this.scope === "project" ? "all" : "project");
+        if (matchesKey(data, "right") || data === "l")
+            return this.setScope("all");
+        if (matchesKey(data, "shift+tab") || matchesKey(data, "left") || data === "h")
+            return this.setScope("project");
+        if (matchesKey(data, "up") || data === "k")
+            return this.move(-1);
+        if (matchesKey(data, "down") || data === "j")
+            return this.move(1);
+        if (matchesKey(data, "pageUp"))
+            return this.move(-Math.max(1, this.bodyRows - 1));
+        if (matchesKey(data, "pageDown"))
+            return this.move(Math.max(1, this.bodyRows - 1));
+        if (matchesKey(data, "home"))
+            return this.selectAt(0);
+        if (matchesKey(data, "end") || data === "G")
+            return this.selectAt(this.selectableKeys.length - 1);
+        if (matchesKey(data, "enter"))
+            this.activate(this.selectedKey);
+    }
+    handleMouse(event) {
+        if (event.kind === "leave") {
+            const changed = this.closeHovered || this.hoveredKey !== undefined || this.hoveredTab !== undefined;
+            this.closeHovered = false;
+            this.hoveredKey = undefined;
+            this.hoveredTab = undefined;
+            return changed;
+        }
+        const overClose = event.y === 0
+            && event.x >= Math.max(0, this.frameWidth - 6)
+            && event.x < this.frameWidth - 1;
+        const tab = this.tabHits.find((hit) => event.y === 1 && event.x >= hit.start && event.x < hit.end);
+        const hit = this.hitRows[event.y];
+        if (event.kind === "move") {
+            const nextHovered = hit?.key;
+            const nextTab = tab?.scope;
+            const changed = this.closeHovered !== overClose || this.hoveredKey !== nextHovered || this.hoveredTab !== nextTab;
+            this.closeHovered = overClose;
+            this.hoveredKey = nextHovered;
+            this.hoveredTab = nextTab;
+            return changed;
+        }
+        if (event.release || (event.button & 3) !== 0)
+            return false;
+        if (overClose) {
+            this.options.onClose();
+            return true;
+        }
+        if (tab) {
+            this.setScope(tab.scope);
+            return true;
+        }
+        if (hit) {
+            this.selectedKey = hit.key;
+            this.activate(hit.key);
+            return true;
+        }
+        return false;
+    }
+    invalidate() { }
+    visibleSessions() {
+        return this.scope === "project"
+            ? dedupeSessions(this.options.currentSessions)
+            : dedupeSessions(this.options.allSessions);
+    }
+    buildRows() {
+        const sessions = this.visibleSessions();
+        const rows = [{ kind: "new", key: "new" }];
+        if (this.scope === "project") {
+            rows.push({ kind: "header", key: "header:project", label: this.options.currentCwd });
+            rows.push(...sessions.map((session) => ({ kind: "session", key: session.file, session })));
+            return rows;
+        }
+        const grouped = new Map();
+        for (const session of sessions) {
+            const key = session.cwdLabel;
+            const group = grouped.get(key);
+            if (group)
+                group.push(session);
+            else
+                grouped.set(key, [session]);
+        }
+        const groups = [...grouped.entries()].sort((a, b) => {
+            if (a[0] === this.options.currentCwd)
+                return -1;
+            if (b[0] === this.options.currentCwd)
+                return 1;
+            return (b[1][0]?.mtime ?? 0) - (a[1][0]?.mtime ?? 0);
+        });
+        for (const [label, group] of groups) {
+            rows.push({ kind: "header", key: `header:${label}`, label });
+            rows.push(...group.map((session) => ({ kind: "session", key: session.file, session })));
+        }
+        return rows;
+    }
+    renderRow(row, width) {
+        const theme = this.options.theme ?? darkTheme;
+        if (row.kind === "header")
+            return row.label ? themeDim(theme.dim, truncateToWidth(row.label, width, "…")) : "";
+        if (row.kind === "new")
+            return alignSides(themeForeground(theme.accent, "＋ New session"), themeDim(theme.dim, "Start fresh"), width);
+        const current = row.session.file === this.options.activeFile;
+        const marker = current ? themeForeground(theme.accent, "●") : " ";
+        const label = `${marker} ${row.session.title || row.session.preview || row.session.name}`;
+        const count = `${row.session.messageCount} msg${row.session.messageCount === 1 ? "" : "s"}`;
+        const meta = current ? `${count} · current` : `${count} · ${formatRelativeTime(row.session.mtime)}`;
+        return alignSides(label, themeDim(theme.dim, meta), width);
+    }
+    renderTabs(width) {
+        const theme = this.options.theme ?? darkTheme;
+        const tabs = [
+            { scope: "project", label: "Current project" },
+            { scope: "all", label: "All projects" },
+        ];
+        const pieces = ["  "];
+        let cursor = 2;
+        this.tabHits = [];
+        for (let index = 0; index < tabs.length; index += 1) {
+            const tab = tabs[index];
+            if (index > 0) {
+                pieces.push("   ");
+                cursor += 3;
+            }
+            this.tabHits.push({ scope: tab.scope, start: cursor + 1, end: cursor + 1 + visibleWidth(tab.label) });
+            const active = tab.scope === this.scope;
+            const hovered = tab.scope === this.hoveredTab;
+            pieces.push(active
+                ? chalk.bold(themeForeground(theme.inputText, themeBackground(theme.traceSelectedBg, tab.label)))
+                : hovered
+                    ? themeForeground(theme.inputText, themeBackground(theme.traceHoverBg, tab.label))
+                    : themeForeground(theme.muted, tab.label));
+            cursor += visibleWidth(tab.label);
+        }
+        const count = `${this.visibleSessions().length} session${this.visibleSessions().length === 1 ? "" : "s"}`;
+        return alignSides(pieces.join(""), themeDim(theme.dim, count), width);
+    }
+    renderFooter(width) {
+        const theme = this.options.theme ?? darkTheme;
+        const plain = width >= 68
+            ? "Tab/←/→ scope  |  ↑/↓ choose  |  Enter open  |  Esc close"
+            : "Tab scope  |  ↑/↓ choose  |  Enter  |  Esc";
+        const left = Math.max(0, Math.floor((width - visibleWidth(plain)) / 2));
+        return fit(`${" ".repeat(left)}${themeDim(theme.dim, plain)}`, width);
+    }
+    frameLine(content, width) {
+        const theme = this.options.theme ?? darkTheme;
+        return `${themeForeground(theme.border, "│")}${fit(content, width)}${themeForeground(theme.border, "│")}`;
+    }
+    preferredKey(sessions) {
+        return sessions.find((session) => session.file !== this.options.activeFile)?.file ?? "new";
+    }
+    setScope(scope) {
+        if (scope === this.scope)
+            return;
+        this.scope = scope;
+        this.offset = 0;
+        this.hoveredKey = undefined;
+        const sessions = this.visibleSessions();
+        if (!sessions.some((session) => session.file === this.selectedKey))
+            this.selectedKey = this.preferredKey(sessions);
+        this.options.onRender();
+    }
+    move(delta) {
+        if (this.selectableKeys.length === 0)
+            return;
+        const current = Math.max(0, this.selectableKeys.indexOf(this.selectedKey));
+        this.selectAt(Math.max(0, Math.min(this.selectableKeys.length - 1, current + delta)));
+    }
+    selectAt(index) {
+        const key = this.selectableKeys[index];
+        if (!key || key === this.selectedKey)
+            return;
+        this.selectedKey = key;
+        this.options.onRender();
+    }
+    activate(key) {
+        if (key === "new") {
+            this.options.onNewSession();
+            return;
+        }
+        this.options.onSelect(key);
+    }
+}