@zergai/ztc 0.5.0-beta.1 → 0.6.0-beta.1

package/dist/ui/widgets/form.d.ts

@@ -9,6 +9,8 @@ export interface FormField {
     label: string;
     type: 'text' | 'password' | 'select' | 'multiselect';
     placeholder?: string;
+    /** The field's starting text, kept unless edited (the mirror's questionnaire shows it too). */
+    defaultValue?: string | string[];
 }
 export interface FormData {
     title: string;
@@ -26,5 +28,10 @@ export declare class FormWidget {
     cancel(): void;
     isActive(): boolean;
     handleInput(input: string, key: KeyEvent): void;
-    buildContent(): string;
+    /**
+     * The form box, as wide as its longest line (at least 48 cells) but never
+     * wider than `cols` minus the host's padding. A line that still does not
+     * fit ends in an ellipsis; every line shares the border's width.
+     */
+    buildContent(cols?: number): string;
 }

package/dist/ui/widgets/form.js

@@ -3,6 +3,8 @@
  *
  * Extracted from cli_ratatui.ts to reduce file size.
  */
+import { displayWidth, padEndDisplay } from '../core/text_width.js';
+import { isControlKey } from '../core/input.js';
 export class FormWidget {
     host;
     active = null;
@@ -13,7 +15,7 @@ export class FormWidget {
     }
     show(data) {
         this.active = data;
-        this.values = {};
+        this.values = Object.fromEntries(data.fields.flatMap(field => typeof field.defaultValue === 'string' && field.defaultValue ? [[field.name, field.defaultValue]] : []));
         this.focusedField = 0;
         this.host.render();
     }
@@ -42,7 +44,7 @@ export class FormWidget {
         // The mirror wraps this callback to dismiss the web modal and release its
         // pending entry, so skipping it would orphan the browser widget and leave a
         // live callback a later stray answer could fire (e.g. a phantom account).
-        if ((key.ctrl && input === 'c') || key.escape) {
+        if ((isControlKey(input, key, 'c')) || key.escape) {
             const callback = this.active.callback;
             this.host.addSystemMessage('Cancelled.');
             this.cancel();
@@ -101,20 +103,19 @@ export class FormWidget {
             return;
         }
     }
-    buildContent() {
+    /**
+     * The form box, as wide as its longest line (at least 48 cells) but never
+     * wider than `cols` minus the host's padding. A line that still does not
+     * fit ends in an ellipsis; every line shares the border's width.
+     */
+    buildContent(cols) {
         if (!this.active)
             return '';
         const { title, fields, submitLabel: _submitLabel = 'Submit' } = this.active;
-        const lines = [];
-        const width = 48;
-        // Helper to pad content to width
-        const pad = (s) => s.padEnd(width - 2);
-        // Border top
-        lines.push('╭' + '─'.repeat(width - 2) + '╮');
-        // Title
-        lines.push('│ ' + pad(title) + '│');
-        // Separator
-        lines.push('├' + '─'.repeat(width - 2) + '┤');
+        const body = [];
+        // Title, then a separator (null) before and after the fields.
+        body.push(` ${title}`);
+        body.push(null);
         // Fields
         for (let i = 0; i < fields.length; i++) {
             const field = fields[i];
@@ -133,17 +134,30 @@ export class FormWidget {
             else {
                 display = `${cursor}${arrow}`;
             }
-            const line = ` ${field.label}: ${display}`;
-            lines.push('│' + pad(line) + '│');
+            body.push(` ${field.label}: ${display}`);
         }
-        // Separator
-        lines.push('├' + '─'.repeat(width - 2) + '┤');
+        body.push(null);
         // Instructions
         const isLastField = this.focusedField >= fields.length - 1;
-        const inst = ` Enter: ${isLastField ? 'submit' : 'next'} | Tab: nav | Esc: cancel`;
-        lines.push('│' + pad(inst) + '│');
-        // Border bottom
-        lines.push('╰' + '─'.repeat(width - 2) + '╯');
-        return lines.join('\n');
+        body.push(` Enter: ${isLastField ? 'submit' : 'next'} | Tab: nav | Esc: cancel`);
+        const longest = Math.max(...body.map(line => (line === null ? 0 : displayWidth(line) + 1)));
+        const width = Math.max(8, Math.min(Math.max(48, longest + 2), Math.floor(cols || 80) - 2));
+        const pad = (s) => {
+            const room = width - 2;
+            if (displayWidth(s) <= room)
+                return padEndDisplay(s, room);
+            let clipped = '';
+            for (const char of s) {
+                if (displayWidth(clipped + char) > room - 1)
+                    break;
+                clipped += char;
+            }
+            return padEndDisplay(`${clipped}…`, room);
+        };
+        return [
+            '╭' + '─'.repeat(width - 2) + '╮',
+            ...body.map(line => (line === null ? '├' + '─'.repeat(width - 2) + '┤' : '│' + pad(line) + '│')),
+            '╰' + '─'.repeat(width - 2) + '╯',
+        ].join('\n');
     }
 }

package/dist/ui/widgets/index.d.ts

@@ -1,6 +1,6 @@
 export type { WidgetHost, KeyEvent, WidgetMouseEvent, MouseScrollable } from './types.js';
 export { FormWidget, type FormData, type FormField } from './form.js';
-export { SelectWidget, type SelectData } from './select.js';
+export { SelectWidget, selectOptionSummary, type SelectData } from './select.js';
 export { TextInputWidget, type TextInputData } from './text_input.js';
 export { QuestionnaireWidget, type QuestionnaireData, type QuestionnaireQuestion } from './questionnaire.js';
 export { PromptViewerWidget, formatEntryAsText, type PromptEntry, type PaneOpener } from './prompt_viewer.js';

package/dist/ui/widgets/index.js

@@ -1,5 +1,5 @@
 export { FormWidget } from './form.js';
-export { SelectWidget } from './select.js';
+export { SelectWidget, selectOptionSummary } from './select.js';
 export { TextInputWidget } from './text_input.js';
 export { QuestionnaireWidget } from './questionnaire.js';
 export { PromptViewerWidget, formatEntryAsText } from './prompt_viewer.js';

package/dist/ui/widgets/log_view.js

@@ -6,6 +6,7 @@
  * HTTP endpoint.  Polls every 2 s for new lines while active.
  */
 import { bodyBand, isInsideBand } from './panel_frame.js';
+import { isControlKey } from '../core/input.js';
 const LOG_VIEW_MAX = 5000;
 const POLL_INTERVAL_MS = 2000;
 export class LogViewWidget {
@@ -128,7 +129,7 @@ export class LogViewWidget {
         const up = key.upArrow || input === '\x1b[A';
         const down = key.downArrow || input === '\x1b[B';
         // Quit
-        if (key.escape || (key.ctrl && (input === 'c' || input === 'C')) || input === 'q' || input === 'Q') {
+        if (key.escape || (isControlKey(input, key, 'c')) || input === 'q' || input === 'Q') {
             this.cancel();
             return;
         }
@@ -145,13 +146,13 @@ export class LogViewWidget {
             return;
         }
         // Page up
-        if (input === 'b' || (key.ctrl && input === 'u')) {
+        if (input === 'b' || (isControlKey(input, key, 'u'))) {
             this.scrollOffset += 10;
             this.host.render();
             return;
         }
         // Page down
-        if (input === 'f' || (key.ctrl && input === 'd')) {
+        if (input === 'f' || (isControlKey(input, key, 'd'))) {
             this.scrollOffset = Math.max(0, this.scrollOffset - 10);
             this.host.render();
             return;

package/dist/ui/widgets/navigator_panel.js

@@ -33,6 +33,7 @@ import { TERMINAL_THEME } from '../views/theme.js';
 import { fuzzyMatch } from '../../utils/fuzzy_match.js';
 import { bottomBorder, clipText, dropLastGrapheme, fitSegments, framedLine, isInsideBand, joinColumns, lineText, planPanelSplit, sideBySideBands, stackedBands, topBorder, WHEEL_LINES, buildWidgetFrameView, widgetFrameGeometry, } from './panel_frame.js';
 import { buildTranscriptLines, transcriptHeaderText, windowedLines, TRANSCRIPT_PANE_MIN_BODY_ROWS, TRANSCRIPT_PANE_MIN_WIDTH, } from './transcript_preview.js';
+import { isControlKey } from '../core/input.js';
 /** Chrome rows: top border, filter line, footer, bottom border, one slack. */
 const CHROME_ROWS = 5;
 /** Rows kept from the highlighted row's description under it (wide layout). */
@@ -380,7 +381,7 @@ export class NavigatorPanelWidget {
             this.applyFilter();
             return;
         }
-        if (key.ctrl && input.toLowerCase() === 'c') {
+        if (isControlKey(input, key, 'c')) {
             this.cancel();
             return;
         }
@@ -400,7 +401,7 @@ export class NavigatorPanelWidget {
                 this.applyFilter();
                 return;
             }
-            if (key.ctrl && input.toLowerCase() === 'u') {
+            if (isControlKey(input, key, 'u')) {
                 this.filterText = '';
                 this.applyFilter();
                 return;
@@ -453,7 +454,7 @@ export class NavigatorPanelWidget {
             void this.host.render();
             return;
         }
-        if (key.pageUp || (key.ctrl && input.toLowerCase() === 'u')) {
+        if (key.pageUp || (isControlKey(input, key, 'u'))) {
             if (this.focus === 'preview')
                 this.scrollPreview(-this.previewPageStep());
             else
@@ -461,7 +462,7 @@ export class NavigatorPanelWidget {
             void this.host.render();
             return;
         }
-        if (key.pageDown || (key.ctrl && input.toLowerCase() === 'd')) {
+        if (key.pageDown || (isControlKey(input, key, 'd'))) {
             if (this.focus === 'preview')
                 this.scrollPreview(this.previewPageStep());
             else

package/dist/ui/widgets/panel_frame.d.ts

@@ -75,6 +75,8 @@ export declare function planPanelSplit(request: PanelSplitRequest): PanelSplit;
 export declare function joinColumns(left: string, right: string, width: number): string;
 export declare function topBorder(width: number, title: string, position: string): StyledLine;
 export declare function framedLine(segments: StyledSegment[], width: number, backgroundColor?: string): StyledLine;
+/** `╭─ Title ───╮`, the title in the accent, as a select or picker frames its rows. */
+export declare function titleBorder(width: number, title: string): StyledLine;
 export declare function bottomBorder(width: number): StyledLine;
 /** `just now`, `12m ago`, `3h ago`, `2d ago` — coarse on purpose. */
 export declare function formatRelativeTime(isoTimestamp: string, nowMs: number): string;

package/dist/ui/widgets/panel_frame.js

@@ -154,6 +154,20 @@ export function framedLine(segments, width, backgroundColor) {
         backgroundColor,
     };
 }
+/** `╭─ Title ───╮`, the title in the accent, as a select or picker frames its rows. */
+export function titleBorder(width, title) {
+    const titlePart = title ? ` ${title} ` : '';
+    // Body rows reserve 4 fixed cells ('│ ' + ' │'). The title border reserves
+    // only 3 ('╭─' + '╮'), so fill to the same interior width.
+    const fill = Math.max(0, width - 3 - displayWidth(titlePart));
+    return {
+        segments: [
+            { text: '╭─', style: { color: TERMINAL_THEME.border } },
+            { text: titlePart, style: { color: TERMINAL_THEME.accent } },
+            { text: '─'.repeat(fill) + '╮', style: { color: TERMINAL_THEME.border } },
+        ],
+    };
+}
 export function bottomBorder(width) {
     if (width <= 1)
         return { segments: [{ text: '' }] };

package/dist/ui/widgets/prompt_viewer.js

@@ -4,6 +4,7 @@
  * Gated behind admin (superuser) authentication. Shows full prompt data in real-time
  * as the agent runs, including system prompts, messages, tool definitions, and responses.
  */
+import { isControlKey } from '../core/input.js';
 import { bodyBand, isInsideBand } from './panel_frame.js';
 const MAX_ENTRIES = 50;
 export class PromptViewerWidget {
@@ -116,7 +117,7 @@ export class PromptViewerWidget {
         const right = key.rightArrow || input === '\x1b[C';
         const left = key.leftArrow || input === '\x1b[D';
         // ── Close / back ──
-        if (key.escape || (key.ctrl && (input === 'c' || input === 'C')) || input === '\x03' || input === 'q' || input === 'Q') {
+        if (key.escape || isControlKey(input, key, 'c') || input === 'q' || input === 'Q') {
             if (this.detailIndex !== null) {
                 // In detail view — go back to list instead of closing entirely
                 this.detailIndex = null;

package/dist/ui/widgets/questionnaire.js

@@ -366,7 +366,7 @@ export class QuestionnaireWidget {
         else if (key.upArrow || key.downArrow) {
             this.setOptionNote(moveVertical(state, key.upArrow ? -1 : 1).state);
         }
-        else if (key.home || isControlKey(input, key, 'a')) {
+        else if (key.home) {
             this.setOptionNote(key.meta ? moveToStart(state) : moveToLineStart(state));
         }
         else if (key.end || isControlKey(input, key, 'e')) {
@@ -453,7 +453,7 @@ export class QuestionnaireWidget {
         if (currentQ && (currentQ.type === 'text' || currentQ.type === 'textarea')) {
             const isTextarea = currentQ.type === 'textarea';
             const isOptional = currentQ.required !== true;
-            if (key.escape || (key.ctrl && input === 'c')) {
+            if (key.escape || isControlKey(input, key, 'c')) {
                 // Cancel entire questionnaire
                 const callback = this.active.callback;
                 this.cancel();
@@ -548,7 +548,7 @@ export class QuestionnaireWidget {
             return;
         }
         // Cancel: Ctrl+C or Escape
-        if ((key.ctrl && input === 'c') || key.escape) {
+        if (isControlKey(input, key, 'c') || key.escape) {
             this.host.addSystemMessage('Questionnaire cancelled.');
             const callback = this.active.callback;
             this.cancel();

package/dist/ui/widgets/reasoning_track.d.ts

@@ -0,0 +1,60 @@
+/**
+ * A model's reasoning settings as one select (SelectData.layout 'reasoning'):
+ * effort on a horizontal track moved with ← →, thinking switched with Tab,
+ * the keys spelled out underneath. Claude Code offers a model's effort the
+ * same way when switching models. The select owns opening, closing and the
+ * callback; the track owns its position, its keys and its rows.
+ */
+import type { KeyEvent } from './types.js';
+import { type StyledLine } from './panel_frame.js';
+import { type RoutePrices } from '../../utils/openrouter_prices.js';
+type Option = {
+    value: string;
+    label: string;
+    description?: string;
+};
+export declare class ReasoningTrack {
+    private readonly openedOn?;
+    private readonly levels;
+    private readonly off;
+    private index;
+    private thinking;
+    /** The routing row's position, when the model routes through OpenRouter. */
+    private route;
+    /** What each routing choice costs: still loading, unavailable (null), or Router's answer. */
+    private prices;
+    /**
+     * `openedOn` is the current setting; `resume` is the level to show, and to
+     * turn back on to, when the current setting is thinking off.
+     */
+    constructor(options: Option[], openedOn?: string | undefined, resume?: string, routing?: string);
+    /** The choice Enter makes. */
+    value(): string;
+    /** Shows what each routing choice costs under the routing row. */
+    setPrices(prices: RoutePrices | null | 'loading'): void;
+    /** The routing choice Enter makes, when there is a routing row. */
+    routing(): string | undefined;
+    /** Moves the track for ← → Home End, flips thinking for Tab, and moves the routing row for ↑ ↓. True when it changed. */
+    handleKey(key: KeyEvent): boolean;
+    /** Moving the track always means thinking, so it turns thinking back on. */
+    private move;
+    /** The framed rows: title, question, track, depth meter, switch and key hints. */
+    lines(cols: number, title: string, question: string, footer?: string): StyledLine[];
+    /**
+     * The levels between ‹ and ›, the chosen one lit. When they do not fit in
+     * `room` cells, a window grows outward from the chosen level, a side at a
+     * time, and a … marks each side that hides levels.
+     */
+    private track;
+    /**
+     * How far along the track the choice sits, then what it means. Notes that
+     * do not fit beside the meter wrap under themselves, at their · breaks.
+     */
+    private meter;
+    private switch;
+    private routes;
+    /** The chosen route's price, under the routing row, wrapped at its · breaks. */
+    private price;
+    private hints;
+}
+export {};

package/dist/ui/widgets/reasoning_track.js

@@ -0,0 +1,218 @@
+/**
+ * A model's reasoning settings as one select (SelectData.layout 'reasoning'):
+ * effort on a horizontal track moved with ← →, thinking switched with Tab,
+ * the keys spelled out underneath. Claude Code offers a model's effort the
+ * same way when switching models. The select owns opening, closing and the
+ * callback; the track owns its position, its keys and its rows.
+ */
+import { displayWidth } from '../core/text_width.js';
+import { wrapText } from '../core/wrap_text.js';
+import { TERMINAL_THEME } from '../views/theme.js';
+import { bottomBorder, framedLine, titleBorder } from './panel_frame.js';
+import { formatRoutePrice } from '../../utils/openrouter_prices.js';
+/** The option that means thinking off; the others are effort levels. */
+const OFF = 'none';
+/** Row labels share one column, so the track, meter and switch line up. */
+const EFFORT_LABEL = 'Effort    ';
+const THINKING_LABEL = 'Thinking  ';
+const ROUTING_LABEL = 'Routing   ';
+/** OpenRouter's routing choices: its own balancing, then the :floor and :nitro variants. */
+const ROUTES = [{ value: 'default', label: 'default' }, { value: 'floor', label: 'cheapest' }, { value: 'nitro', label: 'fastest' }];
+const LABEL_WIDTH = displayWidth(EFFORT_LABEL);
+const STYLE = {
+    question: { color: TERMINAL_THEME.text },
+    label: { color: TERMINAL_THEME.muted },
+    chosen: { color: TERMINAL_THEME.accent, inverse: true, bold: true },
+    level: { color: TERMINAL_THEME.muted },
+    dimmed: { color: TERMINAL_THEME.subtle },
+    lit: { color: TERMINAL_THEME.accent },
+    note: { color: TERMINAL_THEME.muted },
+    value: { color: TERMINAL_THEME.text },
+    hints: { color: TERMINAL_THEME.muted },
+};
+export class ReasoningTrack {
+    openedOn;
+    levels;
+    off;
+    index;
+    thinking;
+    /** The routing row's position, when the model routes through OpenRouter. */
+    route;
+    /** What each routing choice costs: still loading, unavailable (null), or Router's answer. */
+    prices;
+    /**
+     * `openedOn` is the current setting; `resume` is the level to show, and to
+     * turn back on to, when the current setting is thinking off.
+     */
+    constructor(options, openedOn, resume, routing) {
+        this.openedOn = openedOn;
+        if (routing !== undefined)
+            this.route = Math.max(0, ROUTES.findIndex(route => route.value === routing));
+        this.levels = options.filter(option => option.value !== OFF);
+        this.off = this.levels.length > 0 ? options.find(option => option.value === OFF) : undefined;
+        const at = (value) => value === undefined ? -1 : this.levels.findIndex(level => level.value === value);
+        this.thinking = !(openedOn === OFF && this.off);
+        this.index = [this.thinking ? at(openedOn) : -1, at(resume), at('high'), Math.floor((this.levels.length - 1) / 2)]
+            .find(index => index >= 0) ?? 0;
+    }
+    /** The choice Enter makes. */
+    value() {
+        const level = this.levels[this.index];
+        return this.thinking && level ? level.value : OFF;
+    }
+    /** Shows what each routing choice costs under the routing row. */
+    setPrices(prices) {
+        this.prices = prices;
+    }
+    /** The routing choice Enter makes, when there is a routing row. */
+    routing() {
+        return this.route === undefined ? undefined : ROUTES[this.route].value;
+    }
+    /** Moves the track for ← → Home End, flips thinking for Tab, and moves the routing row for ↑ ↓. True when it changed. */
+    handleKey(key) {
+        if ((key.upArrow || key.downArrow) && this.route !== undefined) {
+            const next = Math.max(0, Math.min(ROUTES.length - 1, this.route + (key.downArrow ? 1 : -1)));
+            const changed = next !== this.route;
+            this.route = next;
+            return changed;
+        }
+        if (key.leftArrow)
+            return this.move(this.index - 1);
+        if (key.rightArrow)
+            return this.move(this.index + 1);
+        if (key.home)
+            return this.move(0);
+        if (key.end)
+            return this.move(this.levels.length - 1);
+        if (key.tab && this.off) {
+            this.thinking = !this.thinking;
+            return true;
+        }
+        return false;
+    }
+    /** Moving the track always means thinking, so it turns thinking back on. */
+    move(index) {
+        const next = Math.max(0, Math.min(this.levels.length - 1, index));
+        const changed = next !== this.index || !this.thinking;
+        this.index = next;
+        this.thinking = true;
+        return changed;
+    }
+    /** The framed rows: title, question, track, depth meter, switch and key hints. */
+    lines(cols, title, question, footer) {
+        const width = Math.min(Math.max(cols - 4, 40), 72);
+        const interior = width - 4;
+        const framed = (segments) => framedLine(segments, width);
+        const hints = footer === undefined ? wrapParts(this.hints(), interior) : wrapText(footer, interior);
+        return [
+            titleBorder(width, title),
+            ...wrapText(question, interior).map(line => framed([{ text: line, style: STYLE.question }])),
+            framed([]),
+            framed([{ text: EFFORT_LABEL, style: STYLE.label }, ...this.track(interior - LABEL_WIDTH)]),
+            ...this.meter(interior - LABEL_WIDTH).map(row => framed([{ text: ' '.repeat(LABEL_WIDTH) }, ...row])),
+            framed([{ text: THINKING_LABEL, style: STYLE.label }, ...this.switch()]),
+            ...(this.route === undefined ? [] : [framed([{ text: ROUTING_LABEL, style: STYLE.label }, ...this.routes()])]),
+            ...this.price(interior - LABEL_WIDTH).map(line => framed([{ text: ' '.repeat(LABEL_WIDTH) }, { text: line, style: STYLE.note }])),
+            framed([]),
+            ...hints.map(line => framed([{ text: line, style: STYLE.hints }])),
+            bottomBorder(width),
+        ];
+    }
+    /**
+     * The levels between ‹ and ›, the chosen one lit. When they do not fit in
+     * `room` cells, a window grows outward from the chosen level, a side at a
+     * time, and a … marks each side that hides levels.
+     */
+    track(room) {
+        const last = this.levels.length - 1;
+        const widths = this.levels.map(level => displayWidth(level.label) + 2);
+        const cost = (start, end) => widths.slice(start, end + 1).reduce((sum, width) => sum + width, 0)
+            + (start > 0 ? 3 : 2) + (end < last ? 3 : 2);
+        let start = this.index;
+        let end = this.index;
+        if (cost(0, last) <= room) {
+            start = 0;
+            end = last;
+        }
+        else {
+            let rightNext = true;
+            while (start > 0 || end < last) {
+                const right = rightNext ? end < last : start === 0;
+                const nextStart = right ? start : start - 1;
+                const nextEnd = right ? end + 1 : end;
+                if (cost(nextStart, nextEnd) > room)
+                    break;
+                start = nextStart;
+                end = nextEnd;
+                rightNext = !right;
+            }
+        }
+        const arrow = (glyph, open) => ({ text: glyph, style: open && this.thinking ? STYLE.lit : STYLE.dimmed });
+        const segments = [arrow('‹', this.index > 0), { text: start > 0 ? ' …' : ' ', style: STYLE.dimmed }];
+        for (let index = start; index <= end; index += 1) {
+            const style = !this.thinking ? STYLE.dimmed : index === this.index ? STYLE.chosen : STYLE.level;
+            segments.push({ text: ` ${this.levels[index].label} `, style });
+        }
+        segments.push({ text: end < last ? '… ' : ' ', style: STYLE.dimmed }, arrow('›', this.index < last));
+        return segments;
+    }
+    /**
+     * How far along the track the choice sits, then what it means. Notes that
+     * do not fit beside the meter wrap under themselves, at their · breaks.
+     */
+    meter(room) {
+        const filled = this.thinking ? this.index + 1 : 0;
+        const shown = this.thinking ? this.levels[this.index] : this.off;
+        const notes = [shown?.label, shown?.description, shown && shown.value === this.openedOn ? 'current' : undefined]
+            .filter(Boolean).join(' · ');
+        const gauge = this.levels.length + 2;
+        const [first = '', ...rest] = wrapParts(notes, Math.max(1, room - gauge));
+        return [
+            [
+                { text: '▰'.repeat(filled), style: STYLE.lit },
+                { text: '▱'.repeat(this.levels.length - filled), style: STYLE.dimmed },
+                { text: '  ' },
+                { text: first, style: STYLE.note },
+            ],
+            ...rest.map(line => [{ text: ' '.repeat(gauge) }, { text: line, style: STYLE.note }]),
+        ];
+    }
+    switch() {
+        // Thinking-only models refuse off, and Claude decides for itself when to think.
+        if (!this.off)
+            return [{ text: "Can't be turned off for this model", style: STYLE.note }];
+        const choice = (chosen, label) => [
+            { text: chosen ? '●' : '○', style: chosen ? STYLE.lit : STYLE.dimmed },
+            { text: ` ${label}`, style: chosen ? STYLE.value : STYLE.note },
+        ];
+        return [...choice(this.thinking, 'On'), { text: '  ' }, ...choice(!this.thinking, 'Off')];
+    }
+    routes() {
+        return ROUTES.map((route, index) => ({ text: ` ${route.label} `, style: index === this.route ? STYLE.chosen : STYLE.level }));
+    }
+    /** The chosen route's price, under the routing row, wrapped at its · breaks. */
+    price(room) {
+        if (this.route === undefined || this.prices === undefined)
+            return [];
+        const route = ROUTES[this.route].value;
+        const price = this.prices === 'loading' ? 'Loading prices…'
+            : this.prices?.routes ? (this.prices.routes[route] ? formatRoutePrice(route, this.prices.routes[route]) : 'No provider matches your OpenRouter settings')
+                : 'Prices unavailable';
+        return wrapParts(price, room);
+    }
+    hints() {
+        return `←→ effort${this.off ? ' · Tab thinking' : ''}${this.route === undefined ? '' : ' · ↑↓ routing'} · Enter apply · Esc keep current`;
+    }
+}
+/** `text` in lines of `width`, broken at its ` · ` separators, and inside a part only when the part alone is too wide. */
+function wrapParts(text, width) {
+    const lines = [];
+    for (const part of text.split(' · ')) {
+        const last = lines.at(-1);
+        if (last !== undefined && displayWidth(`${last} · ${part}`) <= width)
+            lines[lines.length - 1] = `${last} · ${part}`;
+        else
+            lines.push(...wrapText(part, width));
+    }
+    return lines;
+}