@sigrun/tui 0.1.1 → 0.2.0

package/dist/ui/sidebar.js

@@ -1,269 +0,0 @@
-/**
- * The sidebar (Task 6; restyled in C2, UI refresh): the conversation
- * TREE — rows come from B1's `buildConversationTree` (fork children
- * indent two spaces + `↳ `), names are single-line via B1's
- * `displayName` + pi-tui's `truncateToWidth`, ages right-align via B1's
- * `formatAge`, and the active row highlights accent-fg + bold. Archived
- * conversations stay hidden (the tree's `includeArchived: false`; the
- * server has no delete, archive is the hide). `+ New conversation` is
- * always the last row.
- *
- * The listing itself carries every field the rows need (`name`,
- * `archived`, `pinned`, `parent`, `lastActivityAt` ride
- * `ConversationSummary` — A1), so {@link refresh} makes ONE request: no
- * per-row meta fetch. The app re-refreshes on a 10 s poll (an unref'd
- * `setInterval` the launcher clears on dispose).
- *
- * Keyboard-first (mouse is additive): `cursor` / `moveCursor` /
- * `confirm()` are the C3 action layer's seam; a click on a row selects
- * it (`MouseRegion` per row). Selection reports to {@link onSelect}: a
- * conversation id, or `"new"` for the `+ New conversation` row
- * (creation is the app's job — the sidebar never calls
- * createConversation itself).
- */
-import { MouseRegion, Text, truncateToWidth, visibleWidth, VStack, } from "@earendil-works/pi-tui";
-import { buildConversationTree, displayName, formatAge, } from "@sigrun/shared/conversations";
-import { plainTuiTheme } from "../theme.js";
-/** The `+ New conversation` row's id (never a conversation id). */
-const NEW_ROW_ID = -1;
-export class Sidebar {
-    #client;
-    #theme;
-    #now;
-    #stack = new VStack();
-    #header;
-    #rowComponents = [];
-    /** Conversation rows only (the action row is {@link #newRow}). */
-    #rows = [];
-    /** The extension VIEW rows (U3 Task 5): one per declared view surface,
-     *  rendered under the VIEWS group header. */
-    #views = [];
-    /** The trailing `+ New conversation` action row (always present). */
-    #newRow = {
-        id: NEW_ROW_ID,
-        name: "+ New conversation",
-        depth: 0,
-        age: "",
-        active: false,
-    };
-    #activeId;
-    #cursor = 0;
-    /** Selection callback: the conversation id, or `"new"` for `+ new`. */
-    onSelect;
-    constructor(client, options) {
-        this.#client = client;
-        this.#theme = options?.theme ?? plainTuiTheme();
-        this.#now = options?.now ?? (() => new Date());
-        this.#mount();
-    }
-    /** The conversation rows, in display order (the app's boot default
-     * reads `rows[0]`); the trailing `+ New conversation` action row is
-     * NOT part of this list — it renders last via {@link #newRow}. */
-    get rows() {
-        return this.#rows;
-    }
-    /** The display list: the conversation rows plus the action row. */
-    get #display() {
-        return [...this.#rows, this.#newRow];
-    }
-    /** The cursor's row index (0-based over {@link rows}). */
-    get cursor() {
-        return this.#cursor;
-    }
-    /**
-     * Re-fetch the listing and rebuild the rows from the tree (summary
-     * fields only — no per-row meta fetch). The cursor follows its
-     * conversation when it still exists.
-     */
-    async refresh() {
-        const list = await this.#client.listConversations();
-        const previousId = this.#display[this.#cursor]?.id;
-        const tree = buildConversationTree(list.conversations, {
-            includeArchived: false,
-        });
-        const rows = [];
-        const walk = (nodes, depth) => {
-            for (const node of nodes) {
-                rows.push(this.#row(node.row, depth));
-                walk(node.children, depth + 1);
-            }
-        };
-        walk(tree, 0);
-        this.#rows = rows;
-        if (previousId !== undefined) {
-            const index = rows.findIndex((row) => row.id === previousId);
-            if (index >= 0)
-                this.#cursor = index;
-        }
-        this.#clampCursor();
-        this.#mount();
-    }
-    /**
-     * The extension views (U3 Task 5): refetch `GET /v1/extensions` and
-     * rebuild the VIEWS group (one row per declared view surface, in
-     * declaration order, status "ok" only). Panels live in the side pane,
-     * not here. Failures keep the last good list (a flaky server must
-     * never blank the sidebar).
-     */
-    async refreshViews() {
-        try {
-            const list = await this.#client.listExtensions();
-            const views = [];
-            for (const extension of list.extensions) {
-                if (extension.status !== "ok")
-                    continue;
-                for (const surface of extension.surfaces ?? []) {
-                    if (surface.placement !== "view")
-                        continue;
-                    views.push({ slug: extension.name, id: surface.id, title: surface.title });
-                }
-            }
-            this.#views = views;
-            this.#mount();
-        }
-        catch {
-            // fail quiet — the last good list stands
-        }
-    }
-    /** The extension view rows (the app's openExtView reads them). */
-    get views() {
-        return this.#views;
-    }
-    /** Select the Nth extension view (the action layer's seam). */
-    confirmView(index) {
-        const view = this.#views[index];
-        if (view === undefined)
-            return;
-        this.onSelect?.({ view: { slug: view.slug, id: view.id } });
-    }
-    /** Mark the active conversation (accent fg + bold); pass `undefined` to clear. */
-    setActive(id) {
-        if (id === this.#activeId)
-            return;
-        this.#activeId = id;
-        this.#rows = this.#rows.map((row) => row.id === NEW_ROW_ID ? row : { ...row, active: row.id === id });
-        this.#mount();
-    }
-    /** Move the cursor by `delta` rows, clamped to the list. */
-    moveCursor(delta) {
-        this.#cursor += delta;
-        this.#clampCursor();
-        this.#stack.invalidate();
-    }
-    /** Select the cursor's row (Enter — the action layer's seam). */
-    confirm() {
-        const row = this.#display[this.#cursor];
-        if (row === undefined)
-            return;
-        this.onSelect?.(row.id === NEW_ROW_ID ? "new" : row.id);
-    }
-    /** The keyboard seam: arrows move, Enter confirms (pre-C3 minimal). */
-    handleInput(data) {
-        if (data.endsWith("[A")) {
-            this.moveCursor(-1);
-        }
-        else if (data.endsWith("[B")) {
-            this.moveCursor(1);
-        }
-        else if (data === "\r") {
-            this.confirm();
-        }
-    }
-    #clampCursor() {
-        // The display list always has the action row, so it is never empty.
-        this.#cursor = Math.max(0, Math.min(this.#cursor, this.#display.length - 1));
-    }
-    #row(summary, depth) {
-        return {
-            id: summary.id,
-            name: displayName(summary),
-            depth,
-            age: formatAge(summary.lastActivityAt, this.#now()),
-            active: summary.id === this.#activeId,
-        };
-    }
-    /** One-line placeholder (pi-tui's `Text` drops whitespace-only text). */
-    #rowLine() {
-        return {
-            render: () => [""],
-            invalidate: () => { },
-        };
-    }
-    /** Rebuild the row components (header + one MouseRegion per row). */
-    #mount() {
-        this.#stack.clear();
-        this.#rowComponents = [];
-        this.#header = new Text(this.#theme.dim("CONVERSATIONS"), 1, 0);
-        this.#stack.addChild(this.#header);
-        for (const [index, row] of this.#display.entries()) {
-            const line = this.#rowLine();
-            const component = new MouseRegion(line, (event) => {
-                if (event.type === "click" && event.button === "left") {
-                    this.#cursor = index;
-                    this.confirm();
-                    return { handled: true };
-                }
-                return undefined;
-            });
-            this.#rowComponents.push(component);
-            this.#stack.addChild(component);
-        }
-        // The VIEWS group (U3 Task 5): one row per declared extension view.
-        if (this.#views.length > 0) {
-            this.#stack.addChild(new Text(this.#theme.dim("VIEWS"), 1, 0));
-            for (const view of this.#views) {
-                const line = this.#rowLine();
-                const component = new MouseRegion(line, (event) => {
-                    if (event.type === "click" && event.button === "left") {
-                        this.onSelect?.({ view: { slug: view.slug, id: view.id } });
-                        return { handled: true };
-                    }
-                    return undefined;
-                });
-                this.#rowComponents.push(component);
-                this.#stack.addChild(component);
-            }
-        }
-        this.#stack.invalidate();
-    }
-    /** One row's styled text at the render width. */
-    #rowText(row, index, width) {
-        const indent = "  ".repeat(row.depth);
-        const marker = row.depth > 0 ? "↳ " : "";
-        const cursor = index === this.#cursor ? "› " : "  ";
-        const age = row.age;
-        const nameWidth = Math.max(1, width - visibleWidth(cursor + indent + marker) - (age === "" ? 0 : age.length + 1));
-        const name = truncateToWidth(`${indent}${marker}${row.name}`, nameWidth);
-        const gap = age === "" ? "" : " ".repeat(Math.max(1, width - visibleWidth(cursor + name) - age.length));
-        let text = `${cursor}${name}${gap}${age}`;
-        text = truncateToWidth(text, width, "…", true);
-        if (row.active) {
-            return this.#theme.bold(this.#theme.fg("accent")(text));
-        }
-        if (row.id === NEW_ROW_ID) {
-            return this.#theme.fg("accent")(text);
-        }
-        return text;
-    }
-    render(width) {
-        // The row components render empty; the rows are drawn here so the
-        // width is known (right-aligned ages need it).
-        const lines = this.#stack.render(width);
-        // Header is line 0; one line per row follows (rows never wrap —
-        // truncateToWidth pins them to one line).
-        for (const [index, row] of this.#display.entries()) {
-            lines[index + 1] = this.#rowText(row, index, width);
-        }
-        // The VIEWS group rows (after the conversations + the VIEWS header).
-        if (this.#views.length > 0) {
-            const base = this.#display.length + 2; // header + rows + VIEWS header
-            for (const [index, view] of this.#views.entries()) {
-                lines[base + index] = truncateToWidth(`  ${view.title}`, width);
-            }
-        }
-        return lines;
-    }
-    invalidate() {
-        this.#stack.invalidate();
-    }
-}

package/dist/ui/status-bar.d.ts

@@ -1,77 +0,0 @@
-/**
- * The status bar (Task C1, UI refresh): exactly one rendered line —
- * left: the mode chip on the accent background + the conversation name;
- * right: `model · thinking · ctx N%`, then the hint keys. A transient
- * `message` (4 s, timer-based) replaces the hints — stream notices ride
- * here. Narrow-width policy: drop hints first, then thinking; model and
- * ctx are the two facts that never drop (what model, how full).
- *
- * A pi-tui `Component` (`render(width): string[]`, one line) — mounting
- * is the launcher's layout job (basis 1), not this component's.
- *
- * Mouse (Task C3, additive to ctrl+p/ctrl+t): a left click on the right
- * cluster's MODEL segment fires {@link StatusBar.onModelClick} (the model
- * picker), one on the THINKING segment fires
- * {@link StatusBar.onThinkingClick} (the cycle). The hit ranges mirror
- * render()'s full/compact fallback, so a narrowed bar never mis-hits a
- * dropped segment.
- */
-import type { Component, TuiMouseEvent, TuiMouseEventResult } from "@earendil-works/pi-tui";
-import type { TuiTheme } from "../theme.js";
-export interface StatusBarState {
-    /** The mode chip text (e.g. "attach"); absent → no chip. */
-    readonly mode?: string;
-    readonly conversation: string;
-    readonly model?: string;
-    /** The thinking indicator label (e.g. "thinking"); absent → dropped. */
-    readonly thinking?: string;
-    /** 0-100; absent → no ctx segment. */
-    readonly contextPct?: number;
-    readonly hints: readonly string[];
-    /** Transient notice; replaces the hints for 4 s. */
-    readonly message?: string;
-    /**
-     * The vim `:` command line (C4): rendered after `message` and NOT
-     * subject to the flash TTL — it persists for the whole command mode
-     * (a slow typist must never lose the line mid-edit).
-     */
-    readonly commandLine?: string;
-}
-export interface StatusBarOptions {
-    readonly theme: TuiTheme;
-    /** The message lifetime (ms); defaults to 4000. Tests may pin it. */
-    readonly messageMs?: number;
-}
-export declare class StatusBar implements Component {
-    /** Click sink for the right cluster's model segment (the picker). */
-    onModelClick: (() => void) | undefined;
-    /** Click sink for the right cluster's thinking segment (the cycle). */
-    onThinkingClick: (() => void) | undefined;
-    private readonly theme;
-    private readonly messageMs;
-    private state;
-    private messageTimer;
-    constructor(options: StatusBarOptions, init?: Partial<StatusBarState>);
-    /** Replace the state wholesale (the whole line is derived each render). */
-    set(state: StatusBarState): void;
-    /** The current state (the app's flash/config snapshot reads it). */
-    getState(): StatusBarState;
-    private armMessageExpiry;
-    /**
-     * The mouse surface: dispatch a left click on the model / thinking
-     * segment; everything else (the left side, ctx, hints, other buttons)
-     * passes through.
-     */
-    handleMouse(event: TuiMouseEvent): TuiMouseEventResult | undefined;
-    /**
-     * The model/thinking segments' cell ranges under render()'s layout:
-     * the full right cluster, or the compact fallback (thinking dropped).
-     * The truncated-compact case keeps the compact offsets — cells past
-     * the width cannot be clicked anyway.
-     */
-    private segmentRanges;
-    /** No cached rendering state — the line is derived each render. */
-    invalidate(): void;
-    render(width: number): string[];
-    private renderLeft;
-}

package/dist/ui/status-bar.js

@@ -1,146 +0,0 @@
-/**
- * The status bar (Task C1, UI refresh): exactly one rendered line —
- * left: the mode chip on the accent background + the conversation name;
- * right: `model · thinking · ctx N%`, then the hint keys. A transient
- * `message` (4 s, timer-based) replaces the hints — stream notices ride
- * here. Narrow-width policy: drop hints first, then thinking; model and
- * ctx are the two facts that never drop (what model, how full).
- *
- * A pi-tui `Component` (`render(width): string[]`, one line) — mounting
- * is the launcher's layout job (basis 1), not this component's.
- *
- * Mouse (Task C3, additive to ctrl+p/ctrl+t): a left click on the right
- * cluster's MODEL segment fires {@link StatusBar.onModelClick} (the model
- * picker), one on the THINKING segment fires
- * {@link StatusBar.onThinkingClick} (the cycle). The hit ranges mirror
- * render()'s full/compact fallback, so a narrowed bar never mis-hits a
- * dropped segment.
- */
-import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
-const MESSAGE_MS = 4000;
-const SEPARATOR = " · ";
-/** Build the right cluster: model · thinking · ctx N%, then hints. */
-function rightCluster(state) {
-    const parts = [];
-    if (state.model !== undefined)
-        parts.push(state.model);
-    if (state.thinking !== undefined)
-        parts.push(state.thinking);
-    if (state.contextPct !== undefined)
-        parts.push(`ctx ${Math.round(state.contextPct)}%`);
-    const head = parts.join(SEPARATOR);
-    const tail = state.commandLine ?? state.message ?? state.hints.join(" ");
-    return tail === "" ? head : `${head}${SEPARATOR}${tail}`;
-}
-/** The narrow-width right cluster: thinking (and hints) dropped. */
-function rightClusterCompact(state) {
-    const parts = [];
-    if (state.model !== undefined)
-        parts.push(state.model);
-    if (state.contextPct !== undefined)
-        parts.push(`ctx ${Math.round(state.contextPct)}%`);
-    if (state.commandLine !== undefined)
-        parts.push(state.commandLine);
-    return parts.join(SEPARATOR);
-}
-export class StatusBar {
-    /** Click sink for the right cluster's model segment (the picker). */
-    onModelClick;
-    /** Click sink for the right cluster's thinking segment (the cycle). */
-    onThinkingClick;
-    theme;
-    messageMs;
-    state;
-    messageTimer;
-    constructor(options, init) {
-        this.theme = options.theme;
-        this.messageMs = options.messageMs ?? MESSAGE_MS;
-        this.state = { conversation: "", hints: [], ...init };
-    }
-    /** Replace the state wholesale (the whole line is derived each render). */
-    set(state) {
-        this.state = state;
-        if (state.message !== undefined) {
-            this.armMessageExpiry();
-        }
-    }
-    /** The current state (the app's flash/config snapshot reads it). */
-    getState() {
-        return this.state;
-    }
-    armMessageExpiry() {
-        if (this.messageTimer !== undefined)
-            clearTimeout(this.messageTimer);
-        this.messageTimer = setTimeout(() => {
-            this.messageTimer = undefined;
-            const { message: _message, ...rest } = this.state;
-            this.state = rest;
-        }, this.messageMs);
-    }
-    /**
-     * The mouse surface: dispatch a left click on the model / thinking
-     * segment; everything else (the left side, ctx, hints, other buttons)
-     * passes through.
-     */
-    handleMouse(event) {
-        if (event.type !== "click" || event.button !== "left")
-            return undefined;
-        for (const range of this.segmentRanges(event.width)) {
-            if (event.x < range.start || event.x >= range.end)
-                continue;
-            const sink = range.kind === "model" ? this.onModelClick : this.onThinkingClick;
-            if (sink === undefined)
-                return undefined;
-            sink();
-            return { handled: true };
-        }
-        return undefined;
-    }
-    /**
-     * The model/thinking segments' cell ranges under render()'s layout:
-     * the full right cluster, or the compact fallback (thinking dropped).
-     * The truncated-compact case keeps the compact offsets — cells past
-     * the width cannot be clicked anyway.
-     */
-    segmentRanges(width) {
-        const leftWidth = visibleWidth(this.renderLeft());
-        const useFull = leftWidth + 2 + visibleWidth(rightCluster(this.state)) <= width;
-        const parts = [];
-        if (this.state.model !== undefined)
-            parts.push({ kind: "model", text: this.state.model });
-        if (useFull && this.state.thinking !== undefined)
-            parts.push({ kind: "thinking", text: this.state.thinking });
-        if (this.state.contextPct !== undefined)
-            parts.push({ kind: "ctx", text: `ctx ${Math.round(this.state.contextPct)}%` });
-        const ranges = [];
-        let cursor = leftWidth + 2;
-        for (const part of parts) {
-            const end = cursor + visibleWidth(part.text);
-            if (part.kind !== "ctx")
-                ranges.push({ kind: part.kind, start: cursor, end });
-            cursor = end + visibleWidth(SEPARATOR);
-        }
-        return ranges;
-    }
-    /** No cached rendering state — the line is derived each render. */
-    invalidate() { }
-    render(width) {
-        const left = this.renderLeft();
-        const full = `${left}  ${this.theme.fg("muted")(rightCluster(this.state))}`;
-        if (visibleWidth(full) <= width)
-            return [full];
-        const compact = `${left}  ${this.theme.fg("muted")(rightClusterCompact(this.state))}`;
-        if (visibleWidth(compact) <= width)
-            return [compact];
-        // Still too narrow: truncate the compact line to the width.
-        return [truncateToWidth(compact, width, "…", true)];
-    }
-    renderLeft() {
-        const conversation = this.theme.fg("text")(this.state.conversation);
-        if (this.state.mode === undefined || this.state.mode === "") {
-            return conversation;
-        }
-        const chip = this.theme.bg("accent")(this.theme.bold(this.state.mode));
-        return `${chip} ${conversation}`;
-    }
-}