@zergai/ztc 0.2.6-dev.36101352252 → 0.2.7-dev.36236183737

package/dist/panes/model_catalog.js

@@ -1,6 +1,7 @@
-import { getKimiModelInfo, getSupportedCodexReasoningEfforts, KIMI_CODE_MODEL_IDS, KIMI_MODEL_IDS, KIMI_MODEL_INFO, OFFICIAL_CODEX_MODEL_IDS, OFFICIAL_CODEX_MODEL_INFO, } from '../utils/models.js';
+import { GPT_6_API_EFFORTS, getKimiModelInfo, getSupportedCodexReasoningEfforts, KIMI_CODE_MODEL_IDS, KIMI_MODEL_IDS, KIMI_MODEL_INFO, OFFICIAL_CODEX_MODEL_IDS, OFFICIAL_CODEX_MODEL_INFO, } from '../utils/models.js';
 import { DEEPSEEK_FLASH_EFFORTS, DEEPSEEK_FLASH_MODEL, MODAL_DEEPSEEK_FLASH_EFFORTS, MODAL_DEEPSEEK_FLASH_MODEL } from '../utils/deepseek.js';
-export const PANE_PROVIDERS = ['anthropic', 'claude_code', 'openai', 'codex_app_server', 'codex_legacy', 'gemini', 'deepseek', 'modal', 'kimi', 'kimi_code'];
+import { FIREWORKS_CHAT_MODELS, FIREWORKS_FUNDED_MODEL } from '../utils/fireworks.js';
+export const PANE_PROVIDERS = ['anthropic', 'claude_code', 'openai', 'codex_app_server', 'codex_legacy', 'gemini', 'deepseek', 'fireworks', 'modal', 'kimi', 'kimi_code'];
 export const MODEL_CATALOG = [
     {
         provider: 'anthropic',
@@ -25,6 +26,10 @@ export const MODEL_CATALOG = [
         provider: 'openai',
         label: 'OpenAI',
         models: [
+            { id: 'gpt-6-sol', name: 'GPT-6 Sol', aliases: ['gpt6sol', 'gpt-6 sol'],
+                defaultReasoningEffort: 'medium', supportedReasoningEfforts: GPT_6_API_EFFORTS },
+            { id: 'gpt-6-luna', name: 'GPT-6 Luna', aliases: ['gpt6luna', 'gpt-6 luna'],
+                defaultReasoningEffort: 'medium', supportedReasoningEfforts: GPT_6_API_EFFORTS },
             { id: 'gpt-5.4', name: 'GPT-5.4', aliases: ['gpt54', 'gpt5.4'] },
             { id: 'gpt-5.4-mini', name: 'GPT-5.4 Mini', aliases: ['gpt54mini', 'gpt-5.4 mini', 'gpt5.4mini'] },
             { id: 'gpt-5.4-nano', name: 'GPT-5.4 Nano', aliases: ['gpt54nano', 'gpt-5.4 nano', 'gpt5.4nano'] },
@@ -87,6 +92,19 @@ export const MODEL_CATALOG = [
         label: 'Kimi Code (subscription)',
         models: KIMI_CODE_MODEL_IDS.map(makeKimiCatalogModel),
     },
+    // Last on purpose: Fireworks reuses upstream slugs such as `kimi-k3`, and a
+    // bare id must resolve to the provider's own model before a Router mirror.
+    {
+        provider: 'fireworks',
+        label: 'Fireworks via Zerg Router',
+        models: FIREWORKS_CHAT_MODELS.map(model => ({
+            id: model.slug,
+            name: model.name,
+            description: model.slug === FIREWORKS_FUNDED_MODEL
+                ? 'Serverless through Zerg Router. Funded on platform credits unless your workspace holds a Fireworks key.'
+                : 'Serverless through Zerg Router. Needs a workspace Fireworks key.',
+        })),
+    },
 ];
 const PROVIDER_SET = new Set(PANE_PROVIDERS);
 const MODEL_BY_ID = new Map();
@@ -141,6 +159,10 @@ function makeKimiCatalogModel(id) {
 }
 function getCodexModelAliases(id) {
     switch (id) {
+        case 'gpt-6-sol':
+            return ['gpt6sol', 'gpt-6 sol'];
+        case 'gpt-6-luna':
+            return ['gpt6luna', 'gpt-6 luna'];
         case 'gpt-5.6-sol':
             return ['gpt-5.6', 'gpt56', 'gpt5.6', 'gpt56sol', 'sol'];
         case 'gpt-5.6-terra':

package/dist/panes/ztc_launch.js

@@ -1,6 +1,7 @@
 import { existsSync } from 'fs';
 import { dirname, join } from 'path';
 import { generateSessionId } from '../session.js';
+import { activeProfile } from '../config/profiles.js';
 const CHILD_ZTC_SCRIPT_RE = /(?:^|[\\/])cli_(?:main|ratatui)\.(?:js|ts)$/;
 function filterChildZtcArgs(args) {
     const skipFlags = new Set([
@@ -28,6 +29,7 @@ function filterChildZtcArgs(args) {
         '--session-id',
         '--provider',
         '--model',
+        '--profile',
         '--cwd',
         '--mode',
         '--prompt',
@@ -37,6 +39,8 @@ function filterChildZtcArgs(args) {
     const filtered = [];
     for (let i = 0; i < args.length; i++) {
         const arg = args[i];
+        if (arg === '--')
+            break;
         if (i === 0 && arg === 'resume') {
             if (args[i + 1] && !args[i + 1].startsWith('-')) {
                 i++;
@@ -64,6 +68,8 @@ export function buildZtcPaneLaunchCommand(spec, argv = process.argv) {
     }
     const parentArgs = filterChildZtcArgs(argv.slice(2));
     const childArgs = [...parentArgs, ...(spec.extraArgs || [])];
+    if (!childArgs.includes('--profile'))
+        childArgs.push('--profile', activeProfile());
     if (spec.session.mode === 'resume') {
         childArgs.push('--resume', spec.session.id);
     }

package/dist/router_auth.js

@@ -1,17 +1,18 @@
 import { createHash, randomBytes, randomUUID } from 'node:crypto';
 import { chmod, mkdir, readFile, rename, unlink, writeFile } from 'node:fs/promises';
-import { homedir, hostname } from 'node:os';
+import { hostname } from 'node:os';
 import { join } from 'node:path';
 import { spawn } from 'node:child_process';
 import { setTimeout as delay } from 'node:timers/promises';
 import { getVersion } from './utils/version.js';
+import { profileConfigDir } from './config/profiles.js';
 export const DEFAULT_ROUTER_ORIGIN = 'https://zergrouter.com';
 /** Local, actionable routing failures whose messages contain no remote payload. */
 export class RouterConfigurationError extends Error {
 }
 const terminalOutput = (message, stream) => { process[stream].write(message); };
 function credentialDirectory() {
-    return process.env.ZTC_CONFIG_DIR || join(homedir(), '.ztc');
+    return profileConfigDir();
 }
 function credentialPath() {
     return join(credentialDirectory(), 'router-auth.json');

package/dist/session.d.ts

@@ -24,6 +24,8 @@ export interface SessionMetadata {
     cwd: string;
     model: string;
     provider: string;
+    /** Config profile selected for this session; absent in sessions saved before profiles. */
+    configProfile?: string;
     createdAt: string;
     updatedAt: string;
     messageCount: number;

package/dist/session.js

@@ -19,6 +19,7 @@ import { homedir } from 'os';
 import { createHash } from 'crypto';
 import { writeFileAtomic } from './utils/atomic_write.js';
 import { stripEphemeralMessages } from './utils/ephemeral.js';
+import { activeProfile } from './config/profiles.js';
 /**
  * Schema version for on-disk Session payloads.
  *
@@ -681,6 +682,7 @@ export async function saveSession(sessionId, cwd, messages, model, provider, mux
             cwd,
             model,
             provider,
+            configProfile: activeProfile(),
             createdAt: existingSession?.metadata.createdAt || new Date().toISOString(),
             updatedAt: new Date().toISOString(),
             messageCount: messages.length,
@@ -775,6 +777,7 @@ export async function saveSessionToFile(path, sessionId, cwd, messages, model, p
             cwd,
             model,
             provider,
+            configProfile: activeProfile(),
             createdAt,
             updatedAt: new Date().toISOString(),
             messageCount: messages.length,

package/dist/types.d.ts

@@ -12,12 +12,29 @@ export type TodoStatus = typeof TODO_STATUSES[number];
  */
 export declare const AGENT_STATUS_LABELS: Record<AgentStatus, string>;
 export type InputMode = 'queue' | 'interrupt';
+/**
+ * When a busy-turn submission should reach the model.
+ *
+ * - `subturn`: insert after the current tool call finishes, inside the running
+ *   turn (Enter). Falls back to a fresh turn when no tool boundary remains.
+ * - `end-of-turn`: hold until the agent finishes the whole turn (Tab).
+ *
+ * This is the message's own intent, independent of `InputMode`. `InputMode`
+ * only selects what *Enter* does while busy; it must never strand a message the
+ * user queued with Tab.
+ */
+export type DeliveryIntent = 'subturn' | 'end-of-turn';
 /** A single entry in the outbound message queue. Plain data — JSON-safe. */
 export interface QueueEntry {
     id: string;
     text: string;
     attachments?: MessageAttachment[];
     queuedAt: Date;
+    /**
+     * Delivery timing for this entry. Absent on legacy persisted entries means
+     * `end-of-turn` (the conservative "wait for the whole turn" behavior).
+     */
+    delivery?: DeliveryIntent;
 }
 export interface ToolCall {
     id: string;
@@ -86,9 +103,11 @@ export interface AgentState {
      * undefined falls back to MODEL_CONTEXT_WINDOWS.
      */
     contextWindow?: number;
+    /** Raw input tokens for the last model call, before durable-context adjustments. */
+    cacheInputTokens?: number;
     /**
-     * Provider-reported cached input for the last turn, as a subset of
-     * `contextTokens`. Absent means the provider reported no cache accounting —
+     * Provider-reported cached input for the last model call, as a subset of
+     * `cacheInputTokens`. Absent means the provider reported no cache accounting —
      * NOT a 0% hit rate. See `cacheHitRate` in utils/context.ts.
      */
     cachedInputTokens?: number;
@@ -167,6 +186,8 @@ export type AgentEvent = {
     usage: TokenUsage;
     contextTokens?: number;
     contextWindow?: number;
+    cacheInputTokens?: number;
+    contextCachedInputTokens?: number;
 } | {
     type: 'api_retry';
     attempt: number;

package/dist/ui/views/app.d.ts

@@ -65,6 +65,8 @@ interface AppViewProps {
     statusLine?: StatusLineSettings;
     /** Effort in effect for the active model; undefined follows the provider. */
     effort?: CodexReasoningEffort;
+    /** Saved effort the active model rejects; the status line flags it. */
+    unsupportedEffort?: CodexReasoningEffort;
     /**
      * When true, the message-list region is painted by the mux pane via
      * scrollback (Phase 1+ of always-scrolling rollout) and the Ink
@@ -104,5 +106,5 @@ export declare function getAppLayoutMetrics({ rows, cols, inputState, commands,
     widgetHeight: number;
     transcriptHeight: number;
 };
-export declare function buildAppView({ messages, agentState, inputState, sessionId, sessionName, cols, rows, commands, completion, hasApiKey, version, contextLength, contextEstimated, contextStatus, provider, model, emulationId, inputMode, toast, spinnerLabel, spinnerFrame, lastEventAt, stallHintMs, debug, expandToolOutputs, showThinking, renderer, showHeader, showMessages, isRecording, recordingDevice, audioLevel, partialTranscript, todos, showTodos, activeTask, taskStartedAt, mode, authEmail, authWorkspace, backgroundRunning, widgetContent, widgetView: providedWidgetView, queuePreview, queueTotal, queueSelectedIndex, externalTranscript, compactWidget, agentActive, statusLine, effort, }: AppViewProps): LayoutNode;
+export declare function buildAppView({ messages, agentState, inputState, sessionId, sessionName, cols, rows, commands, completion, hasApiKey, version, contextLength, contextEstimated, contextStatus, provider, model, emulationId, inputMode, toast, spinnerLabel, spinnerFrame, lastEventAt, stallHintMs, debug, expandToolOutputs, showThinking, renderer, showHeader, showMessages, isRecording, recordingDevice, audioLevel, partialTranscript, todos, showTodos, activeTask, taskStartedAt, mode, authEmail, authWorkspace, backgroundRunning, widgetContent, widgetView: providedWidgetView, queuePreview, queueTotal, queueSelectedIndex, externalTranscript, compactWidget, agentActive, statusLine, effort, unsupportedEffort, }: AppViewProps): LayoutNode;
 export {};

package/dist/ui/views/app.js

@@ -93,7 +93,7 @@ export function getAppLayoutMetrics({ rows, cols, inputState, commands = [], com
     // the menu instead of reserving a partial row or displacing the status line.
     const completionHeight = activeCompletion?.kind === 'usage'
         ? Math.min(1, completionBudget)
-        : completionBudget >= 2 ? Math.min(selectionCompletionRows(activeCompletion), completionBudget) : 0;
+        : completionBudget >= 2 ? selectionCompletionRows(activeCompletion, completionBudget) : 0;
     const inputHeight = Math.min(inputLineCount + previewLines, maxInputLines) + completionHeight + inputOverhead;
     const auxiliaryBudget = Math.max(0, rows - headerHeight - statusHeight - activityHeight - inputHeight - transcriptReserve);
     const { queueHeight, todoHeight } = splitAuxiliaryBudget(auxiliaryBudget, rawQueueHeight, rawTodoHeight);
@@ -148,7 +148,7 @@ export function getAppLayoutMetrics({ rows, cols, inputState, commands = [], com
 }
 export function buildAppView({ messages, agentState, inputState, sessionId, sessionName, cols, rows, commands, completion, hasApiKey, version = '0.1.0', contextLength, contextEstimated, contextStatus, provider, model, emulationId, inputMode, toast, spinnerLabel, spinnerFrame, lastEventAt, stallHintMs, debug = false, expandToolOutputs = false, showThinking = true, renderer, showHeader = true, showMessages = true, isRecording = false, recordingDevice, audioLevel = -60, partialTranscript = '', todos = [], showTodos = true, activeTask = null, taskStartedAt = null, mode = 'normal', authEmail, authWorkspace, backgroundRunning = 0, widgetContent = null, widgetView: providedWidgetView = null, queuePreview = [], queueTotal = 0, queueSelectedIndex = null, externalTranscript = false, compactWidget = false, agentActive = agentState.status === 'thinking'
     || agentState.status === 'streaming'
-    || agentState.status === 'tool_use', statusLine, effort, }) {
+    || agentState.status === 'tool_use', statusLine, effort, unsupportedEffort, }) {
     // A compact widget (the question form) sizes to its own content. Deriving the
     // row count here keeps the widget region and the transcript reserve aligned
     // with what the frame actually paints.
@@ -269,6 +269,7 @@ export function buildAppView({ messages, agentState, inputState, sessionId, sess
             model,
             emulationId,
             effort,
+            unsupportedEffort,
             inputMode,
             toast,
             debug,

package/dist/ui/views/completion_menu.js

@@ -42,10 +42,10 @@ export function buildCompletionMenu(view, cols) {
     if (view.kind === 'usage') {
         return { menu: box([text(clip(`Usage: ${view.usage ?? ''}`, width), muted)], { paddingX: 2, height: 1 }) };
     }
-    const rowCount = Math.max(1, Math.min(SELECTION_VISIBLE_ROWS, view.visibleRows ?? SELECTION_VISIBLE_ROWS));
-    const first = Math.max(0, view.selected - rowCount + 1, Math.min(view.firstVisible ?? 0, view.selected));
+    const rowCount = Math.max(1, view.visibleRows ?? SELECTION_VISIBLE_ROWS);
+    const first = Math.min(Math.max(0, view.candidates.length - rowCount), Math.max(0, view.selected - rowCount + 1, Math.min(view.firstVisible ?? 0, view.selected)));
     const kind = view.kind ?? (view.provider ? 'model' : 'provider');
-    const title = kind === 'model' ? `Models · ${view.provider ?? ''}` : kind === 'command' ? 'Commands' : 'Providers';
+    const title = kind === 'model' ? `Models · ${view.provider ?? ''}` : kind === 'command' ? 'Commands' : view.mixed ? 'Providers & models' : 'Providers';
     const count = view.candidates.length ? `${view.selected + 1}/${view.candidates.length}` : '0 results';
     const state = view.loading ? ' · loading' : view.unavailable ? ' · cached' : '';
     const heading = clip(title + state, Math.max(1, width - displayWidth(count) - 2));
@@ -84,10 +84,10 @@ export function buildCompletionMenu(view, cols) {
         rows.push(text(clip(empty, width), muted));
     }
     const selected = view.candidates[view.selected];
-    const action = kind === 'command' ? selected?.needsArgument ? 'open' : 'run' : 'apply';
+    const enterAction = selected && view.query === selected.value && !selected.needsArgument ? 'run' : 'fill';
     const hints = view.candidates.length ? [
-        `↑↓ move · Tab fill · Enter ${action} · Esc close`,
-        `↑↓ · Tab fill · ↵ ${action} · Esc`,
+        enterAction === 'run' ? '↑↓ move · Tab fill · Enter run · Esc close' : '↑↓ move · Tab/Enter fill · Esc close',
+        enterAction === 'run' ? '↑↓ · Tab fill · ↵ run · Esc' : '↑↓ · Tab/↵ fill · Esc',
         '↑↓  Tab  ↵  Esc',
     ] : [kind === 'command' ? 'Keep typing · Esc close' : 'Enter exact ID · Esc close', '↵ exact ID · Esc', '↵  Esc'];
     const hint = hints.find(value => displayWidth(value) <= width) ?? hints.at(-1);

package/dist/ui/views/input_area.d.ts

@@ -18,7 +18,7 @@ interface InputAreaViewProps {
     spinnerFrame?: string | null;
     inputMode?: string;
 }
-interface RenderToken {
+export interface RenderToken {
     text: string;
     style?: {
         color?: string;
@@ -42,6 +42,7 @@ export declare function wrapInputSegments(segments: InputSegment[], cursor: {
     cursorLine: number;
     cursorCol: number;
 };
+export declare function renderLineWithCursorTokens(line: RenderToken[], cursorCol: number, isCursorLine: boolean): RenderToken[];
 export declare function estimateInputLines(segments: InputSegment[], cols: number): number;
 export declare function buildInputAreaView({ state, placeholder, disabled, commands, completion, cols, maxInputLines, badgePreview, showBadgePreview, debug, renderContent, spinnerLabel, spinnerFrame }: InputAreaViewProps): LayoutNode;
 export {};

package/dist/ui/views/input_area.js

@@ -145,9 +145,9 @@ export function wrapInputSegments(segments, cursor, cols, prefixWidth = promptWi
     }
     return { lines, cursorLine, cursorCol };
 }
-function renderLineWithCursor(line, cursorCol, isCursorLine) {
+export function renderLineWithCursorTokens(line, cursorCol, isCursorLine) {
     if (!isCursorLine)
-        return line.map(token => text(token.text, token.style));
+        return line;
     const nodes = [];
     let col = 0;
     let cursorRendered = false;
@@ -165,17 +165,17 @@ function renderLineWithCursor(line, cursorCol, isCursorLine) {
         }
         if (cursorOffset >= 0) {
             if (cursorOffset)
-                nodes.push(text(token.text.slice(0, cursorOffset), token.style));
-            nodes.push(text(token.text.slice(cursorOffset, cursorEnd), { ...token.style, inverse: true }));
+                nodes.push({ text: token.text.slice(0, cursorOffset), style: token.style });
+            nodes.push({ text: token.text.slice(cursorOffset, cursorEnd), style: { ...token.style, inverse: true } });
             if (cursorEnd < token.text.length)
-                nodes.push(text(token.text.slice(cursorEnd), token.style));
+                nodes.push({ text: token.text.slice(cursorEnd), style: token.style });
         }
         else {
-            nodes.push(text(token.text, token.style));
+            nodes.push(token);
         }
     }
     if (!cursorRendered && cursorCol === col)
-        nodes.push(text(' ', { inverse: true }));
+        nodes.push({ text: ' ', style: { inverse: true } });
     return nodes;
 }
 export function estimateInputLines(segments, cols) {
@@ -222,7 +222,8 @@ export function buildInputAreaView({ state, placeholder, disabled = false, comma
                     : sourceLine === lastLine - 1 && lastLine < wrapped.lines.length ? '↧ ' : '  ';
             const segments = [
                 text(prefix, { color: promptColor, bold: index === 0 }),
-                ...renderLineWithCursor(line, wrapped.cursorCol, sourceLine === wrapped.cursorLine),
+                ...renderLineWithCursorTokens(line, wrapped.cursorCol, sourceLine === wrapped.cursorLine)
+                    .map(token => text(token.text, token.style)),
             ];
             return box(segments, { flexDirection: 'row' });
         });

package/dist/ui/views/status_bar.d.ts

@@ -18,6 +18,8 @@ interface StatusBarProps {
     emulationId?: string;
     /** Effort in effect for the active model; undefined follows the provider. */
     effort?: CodexReasoningEffort;
+    /** Saved effort the active model rejects, shown so it is not silently ignored. */
+    unsupportedEffort?: CodexReasoningEffort;
     inputMode?: 'queue' | 'interrupt';
     toast?: string | null;
     spinnerLabel?: string | null;

package/dist/ui/views/status_bar.js

@@ -104,7 +104,7 @@ function statusItemForms(item, props) {
     // Undefined when the provider reports no cache accounting. The field is then
     // omitted rather than painted as 0%, so an unknown rate is never read as a
     // measured miss.
-    const cacheShare = cacheHitRate(props.state.cachedInputTokens, usedTokens);
+    const cacheShare = cacheHitRate(props.state.cachedInputTokens, props.state.cacheInputTokens ?? usedTokens);
     const cacheLabel = cacheShare === undefined ? undefined : `${Math.round(cacheShare)}%`;
     const percentage = props.contextStatus ? `${Math.round(props.contextStatus.percentage)}%` : undefined;
     const remaining = props.contextStatus ? `${Math.max(0, Math.round(props.contextStatus.remaining))}%` : undefined;
@@ -172,8 +172,19 @@ function statusItemForms(item, props) {
                 short: emulation && `emu:${emulation}`,
                 long: emulation && `Emulating ${emulation}`,
             };
-        case 'effort':
-            return { raw: props.effort, short: props.effort && `eff ${props.effort}`, long: props.effort && `Effort ${props.effort}` };
+        case 'effort': {
+            const unsupported = props.unsupportedEffort;
+            if (!unsupported) {
+                return { raw: props.effort, short: props.effort && `eff ${props.effort}`, long: props.effort && `Effort ${props.effort}` };
+            }
+            return {
+                raw: unsupported,
+                short: props.effort ? `eff ${props.effort} (${unsupported} n/a)` : `eff ${unsupported} n/a`,
+                long: props.effort
+                    ? `Effort ${props.effort} (${unsupported} unsupported by this model)`
+                    : `Effort ${unsupported} unsupported by this model`,
+            };
+        }
         case 'reasoning':
             // The field is the thinking switch, so the short form says the thing the
             // user is actually turning on rather than restating the flag.
@@ -212,7 +223,7 @@ function statusItemColor(item, props) {
         case 'model':
         case 'provider-model': return TERMINAL_THEME.muted;
         case 'emulation': return TERMINAL_THEME.info;
-        case 'effort': return TERMINAL_THEME.muted;
+        case 'effort': return props.unsupportedEffort ? TERMINAL_THEME.attention : TERMINAL_THEME.muted;
         case 'reasoning': return reasoningEnabled(props.effort) ? TERMINAL_THEME.info : TERMINAL_THEME.muted;
         case 'input-mode': return TERMINAL_THEME.attention;
         case 'version': return TERMINAL_THEME.subtle;

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

@@ -46,6 +46,15 @@ export interface ColorPanelSurface {
 export declare class ColorPanelWidget {
     private readonly host;
     private active;
+    /**
+     * Column the painted frame starts on, in surface coordinates.
+     *
+     * Zero unless the terminal is wide enough to trigger the shared cap, in which
+     * case it is that centring margin. The wheel bands add it back: a notch lands
+     * in terminal columns, so without it a capped page would scroll from a pane
+     * that is no longer under the pointer.
+     */
+    private frameInset;
     private draft;
     private focus;
     private presetIndex;

package/dist/ui/widgets/color_panel.js

@@ -25,7 +25,7 @@ import { displayWidth, padEndDisplay } from '../core/text_width.js';
 import { TERMINAL_THEME } from '../views/theme.js';
 import { COLOR_PRESETS, blendOver, formatColor, parseColor } from '../../config/colors.js';
 import { fuzzyMatch } from '../../utils/fuzzy_match.js';
-import { bodyBand, bottomBorder, clipText, dropLastGrapheme, framedLine, isInsideBand, lineText, planPanelSplit, sideBySideBands, stackedBands, topBorder, WHEEL_LINES, } from './panel_frame.js';
+import { widgetFrameGeometry, bodyBand, bottomBorder, clipText, dropLastGrapheme, framedLine, isInsideBand, lineText, planPanelSplit, sideBySideBands, stackedBands, topBorder, WHEEL_LINES, } from './panel_frame.js';
 const CHANNEL_ORDER = ['hex', 'r', 'g', 'b', 'a'];
 const CHANNEL_LABELS = {
     hex: 'Hex',
@@ -76,6 +76,15 @@ function presetsFor(data) {
 export class ColorPanelWidget {
     host;
     active = null;
+    /**
+     * Column the painted frame starts on, in surface coordinates.
+     *
+     * Zero unless the terminal is wide enough to trigger the shared cap, in which
+     * case it is that centring margin. The wheel bands add it back: a notch lands
+     * in terminal columns, so without it a capped page would scroll from a pane
+     * that is no longer under the pointer.
+     */
+    frameInset = 0;
     draft = { r: 255, g: 255, b: 255, a: 1 };
     focus = 'presets';
     presetIndex = 0;
@@ -324,28 +333,33 @@ export class ColorPanelWidget {
     // ── Rendering ─────────────────────────────────────────────────────────────
     buildSurface(cols, maxRows) {
         const lines = this.buildSurfaceLines(cols, maxRows);
-        return {
-            content: lines.map(lineText).join('\n'),
-            view: box(lines.map(line => box(line.segments.map(segment => (segment.backgroundColor
-                // A swatch needs a filled cell, which is a background on the run and
-                // not a colour on the glyph.
-                ? box([text(segment.text, segment.style)], {
-                    flexDirection: 'row',
-                    height: 1,
-                    flexShrink: 0,
-                    backgroundColor: segment.backgroundColor,
-                })
-                : text(segment.text, segment.style))), {
+        // This panel keeps its own view builder rather than the shared one: a swatch
+        // needs a filled cell, which is a background on the run and not a colour on
+        // the glyph. The centring margin still goes on the frame, so it lands on the
+        // same column as every other page.
+        const frame = box(lines.map(line => box(line.segments.map(segment => (segment.backgroundColor
+            ? box([text(segment.text, segment.style)], {
                 flexDirection: 'row',
                 height: 1,
                 flexShrink: 0,
-                backgroundColor: line.backgroundColor,
-            })), {
-                flexDirection: 'column',
-                height: lines.length,
-                flexShrink: 0,
-                backgroundColor: TERMINAL_THEME.bg,
-            }),
+                backgroundColor: segment.backgroundColor,
+            })
+            : text(segment.text, segment.style))), {
+            flexDirection: 'row',
+            height: 1,
+            flexShrink: 0,
+            backgroundColor: line.backgroundColor,
+        })), {
+            flexDirection: 'column',
+            height: lines.length,
+            flexShrink: 0,
+            backgroundColor: TERMINAL_THEME.bg,
+        });
+        return {
+            content: lines.map(lineText).join('\n'),
+            view: this.frameInset > 0
+                ? box([frame], { flexDirection: 'column', marginLeft: this.frameInset, flexShrink: 0 })
+                : frame,
             lineCount: lines.length,
         };
     }
@@ -358,9 +372,10 @@ export class ColorPanelWidget {
         if (maxRows !== undefined && maxRows <= 0)
             return [];
         const termCols = Math.max(1, Math.floor(cols || process.stdout.columns || 80));
-        // The host embeds the surface in a `paddingX: 1` column, so `cols - 2` is
-        // the full usable width.
-        const width = Math.max(1, termCols - 2);
+        // The host embeds the surface in a `paddingX: 1` column, so the frame asks
+        // for `termCols - 2`; the shared cap bounds the frame and it sits flush left.
+        const { width, inset } = widgetFrameGeometry(termCols);
+        this.frameInset = inset;
         const height = Math.max(1, Math.floor(maxRows ?? 20));
         const innerWidth = Math.max(0, width - 4);
         const lines = [topBorder(width, this.active.label, this.currentValue())];
@@ -415,7 +430,7 @@ export class ColorPanelWidget {
                     ...padRow(channels.rows[index], split.previewWidth),
                 ], width));
             }
-            this.presetsBand = sideBySideBands(headingRow, lines.length - 1, split.listWidth, split.previewWidth).list;
+            this.presetsBand = sideBySideBands(headingRow, lines.length - 1, split.listWidth, split.previewWidth, this.frameInset).list;
         }
         else if (placement === 'bottom') {
             const channelRows = this.channelRows(innerWidth);
@@ -436,7 +451,7 @@ export class ColorPanelWidget {
             for (let index = 0; index < channelCapacity; index += 1) {
                 lines.push(framedLine(channels.rows[index]?.segments ?? [], width));
             }
-            this.presetsBand = stackedBands({ top: presetsTop - presetCapacity + 1, bottom: presetsTop }, { top: channelsTop, bottom: lines.length - 1 }, innerWidth).list;
+            this.presetsBand = stackedBands({ top: presetsTop - presetCapacity + 1, bottom: presetsTop }, { top: channelsTop, bottom: lines.length - 1 }, innerWidth, this.frameInset).list;
         }
         else {
             // Too short for two panes: the one being worked in takes the whole body.
@@ -446,7 +461,7 @@ export class ColorPanelWidget {
             for (let index = 0; index < bodyRows; index += 1) {
                 lines.push(framedLine(windowed.rows[index]?.segments ?? [], width));
             }
-            this.presetsBand = bodyBand(top, lines.length - 1, innerWidth);
+            this.presetsBand = bodyBand(top, lines.length - 1, innerWidth, this.frameInset);
         }
         // Each preview row is framed like every other line, so the bar is painted
         // inside the page rather than across it.

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

@@ -88,6 +88,15 @@ export declare class NavigatorPanelWidget {
     private refreshInFlight;
     private lastBodyRows;
     private lastInnerWidth;
+    /**
+     * Column the painted frame starts on, in surface coordinates.
+     *
+     * Zero unless the terminal is wide enough to trigger the shared cap, in which
+     * case it is that centring margin. The wheel bands add it back: a notch lands
+     * in terminal columns, so without it a capped page would scroll from a pane
+     * that is no longer under the pointer.
+     */
+    private frameInset;
     private lastSplit;
     private visibleCache;
     private focus;

package/dist/ui/widgets/navigator_panel.js

@@ -28,11 +28,10 @@
  * Secondary keys and the filter share one keyboard, as in the other pickers:
  * letters are actions until `/` (or any unused letter) opens the query.
  */
-import { box, text } from '../core/index.js';
 import { displayWidth, padEndDisplay } from '../core/text_width.js';
 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, } from './panel_frame.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';
 /** Chrome rows: top border, filter line, footer, bottom border, one slack. */
 const CHROME_ROWS = 5;
@@ -51,6 +50,15 @@ export class NavigatorPanelWidget {
     refreshInFlight = false;
     lastBodyRows = 1;
     lastInnerWidth = 78;
+    /**
+     * Column the painted frame starts on, in surface coordinates.
+     *
+     * Zero unless the terminal is wide enough to trigger the shared cap, in which
+     * case it is that centring margin. The wheel bands add it back: a notch lands
+     * in terminal columns, so without it a capped page would scroll from a pane
+     * that is no longer under the pointer.
+     */
+    frameInset = 0;
     lastSplit = null;
     visibleCache = null;
     focus = 'list';
@@ -559,17 +567,7 @@ export class NavigatorPanelWidget {
         const lines = this.buildSurfaceLines(cols, maxRows);
         return {
             content: lines.map(lineText).join('\n'),
-            view: box(lines.map(line => box(line.segments.map(segment => text(segment.text, segment.style)), {
-                flexDirection: 'row',
-                height: 1,
-                flexShrink: 0,
-                backgroundColor: line.backgroundColor,
-            })), {
-                flexDirection: 'column',
-                height: Math.max(1, lines.length),
-                flexShrink: 0,
-                backgroundColor: TERMINAL_THEME.bg,
-            }),
+            view: buildWidgetFrameView(lines, this.frameInset),
             lineCount: lines.length,
         };
     }
@@ -602,7 +600,8 @@ export class NavigatorPanelWidget {
         if (maxRows !== undefined && maxRows <= 0)
             return [];
         const termCols = Math.max(1, Math.floor(cols || process.stdout.columns || 80));
-        const width = Math.max(1, termCols - 2);
+        const { width, inset } = widgetFrameGeometry(termCols);
+        this.frameInset = inset;
         const height = Math.max(1, Math.floor(maxRows ?? 20));
         const innerWidth = Math.max(0, width - 4);
         this.lastInnerWidth = innerWidth;
@@ -691,7 +690,7 @@ export class NavigatorPanelWidget {
                 ...(previewRow ? previewRow.segments : []),
             ], width));
         }
-        this.paneBands = sideBySideBands(bandTop, lines.length - 1, split.listWidth, paneWidth);
+        this.paneBands = sideBySideBands(bandTop, lines.length - 1, split.listWidth, paneWidth, this.frameInset);
     }
     /** Transcript under the list, with its own heading — a narrow terminal. */
     drawStackedPane(lines, split, width, innerWidth) {
@@ -722,7 +721,7 @@ export class NavigatorPanelWidget {
             lines.push(framedLine(previewRow ? previewRow.segments : [], width));
         }
         // Stacked, the panes share the full width and are told apart by rows.
-        this.paneBands = stackedBands({ top: listTop, bottom: listBottom }, { top: previewTop, bottom: lines.length - 1 }, innerWidth);
+        this.paneBands = stackedBands({ top: listTop, bottom: listBottom }, { top: previewTop, bottom: lines.length - 1 }, innerWidth, this.frameInset);
     }
     previewHeaderText() {
         const entry = this.selectedEntry();
@@ -733,6 +732,8 @@ export class NavigatorPanelWidget {
             scroll: this.previewScroll,
             viewportRows: this.previewViewportRows,
             focused: this.focus === 'preview',
+            // One cell of the heading's column is the gutter between the two panes.
+            maxWidth: Math.max(8, (this.lastSplit?.previewWidth ?? 0) - 1),
         });
     }
     previewRenderLines() {