@namzu/cli 26.2.0 → 27.0.0

package/dist/tui/Picker.js

@@ -8,19 +8,121 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * live agent session lives in `agent.ts`.
  */
 import { Box, Text, useInput, useWindowSize } from 'ink';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { Fragment, useCallback, useEffect, useRef, useState } from 'react';
 import { canSelectModel } from '../integrations/providers/access.js';
 import { ALL_PROVIDER_IDS, PROVIDER_REGISTRY, signedInSubscriptionProviders, unsupportedProviderMessage, } from '../integrations/providers/index.js';
 import { describeProviderModels, verifyCredential } from './agent.js';
 import { classifyCredential, describeDisposition, keyLooksUsable, maskKey, sessionCredential, } from './credential-entry.js';
 import { modelStep } from './model-choices.js';
 import { filterModelChoices } from './model-search.js';
-import { credentialNeed, initialProviderRow, providerListRows, rowProviderId, } from './provider-list.js';
-import { moveSelection, selectionWindow } from './selection-window.js';
-import { choiceDisplayWidth, eraseLastChoiceGrapheme, truncateChoiceText, } from './terminal-choice-text.js';
+import { credentialNeed, initialProviderRow, pathProviderId, providerListRows, rowCredentialNeed, rowHasProvider, rowIndexOfProvider, rowIsUsable, rowNeedsChoice, typedCredentialEntry, } from './provider-list.js';
+import { moveSelection, selectionWindow, } from './selection-window.js';
+import { capChoiceLines, choiceDisplayWidth, eraseLastChoiceGrapheme, truncateChoiceText, wrapChoiceText, } from './terminal-choice-text.js';
 import { terminalDisplayText } from './terminal-display.js';
 import { theme } from './theme.js';
 import { useSelectionIndex } from './use-selection-index.js';
+/**
+ * Columns this screen's text area has, given the terminal's width.
+ *
+ * Derived rather than written down, because the number this replaces was a
+ * literal that counted two of the three things that take columns and forgot the
+ * third. In order:
+ *
+ *  - `HOST_INSET_X` — the app draws every screen inside a box with one column
+ *    of padding on each side (`App.tsx`'s root), so this picker's own box starts
+ *    one column in and ends one column short of the terminal.
+ *  - `BORDER_X` — this box's round border, one column per side.
+ *  - `BOX_PADDING_X` — this box's `paddingX={1}`, one column per side.
+ *
+ * The old arithmetic was `columns - 4`: the border and the padding, minus the
+ * host's inset. At 60 columns that budgeted 56 columns of text for an area of
+ * 54 — measured from a 60-column capture, where the two borders sit at columns
+ * 1 and 58, leaving 56 between them and 54 inside the padding. Every row the
+ * screen measured as fitting therefore wrapped, and the text it wrapped was the
+ * row the cursor was on.
+ */
+const HOST_INSET_X = 2;
+const BORDER_X = 2;
+const BOX_PADDING_X = 2;
+/** Columns a row of this screen's content may occupy. */
+export function pickerContentWidth(columns) {
+    return Math.max(1, columns - HOST_INSET_X - BORDER_X - BOX_PADDING_X);
+}
+/**
+ * Columns a row spends before its source: the marker, the number and the
+ * vendor's name, each written over its own width.
+ *
+ * Derived from the three, because 32 was written down here once and was the
+ * width of the BROKEN row — the one whose marker had lost the space beside it.
+ * A source measured against a row one column narrower than it is a source that
+ * wraps in the renderer after the screen has counted it as one line, which is
+ * the defect this whole window exists to prevent.
+ */
+const ROW_MARKER_WIDTH = 2;
+const ROW_NUMBER_WIDTH = 3;
+const ROW_LABEL_WIDTH = 28;
+const ROW_PREFIX_WIDTH = ROW_MARKER_WIDTH + ROW_NUMBER_WIDTH + ROW_LABEL_WIDTH;
+/** What a wrapped source line is indented by, so it lines up under the name. */
+const ROW_INDENT = ' '.repeat(ROW_PREFIX_WIDTH);
+/**
+ * Lines a row's source column may take before the rest is cut.
+ *
+ * Three is what a variable name needs at the width this was measured against
+ * (54 columns leaves 22 for the source, so `env · OPENROUTER_API_KEY` wraps to
+ * two). It is a cap rather than a measurement because a row's height is part of
+ * the box's height: without one, a forty-column terminal could make a single
+ * source a dozen lines and no window could keep the header on screen.
+ */
+const MAX_SOURCE_LINES = 3;
+/** The words above the not-detected block, which the row window reserves lines for. */
+const NOT_DETECTED_HEADING = 'Not detected — enter a credential to use these:';
+/**
+ * The line above the box that is not the box's.
+ *
+ * Ink draws this screen below whatever the app has already written — the boot
+ * banner, on the turn that shows this picker first — and a terminal keeps the
+ * last `rows` lines of all of it. A box that fills the terminal exactly
+ * therefore loses its own top border, and under that border is the notice the
+ * screen exists to deliver.
+ */
+const TRANSCRIPT_LINE_ABOVE = 1;
+/** The mark a row carries when it is the provider in force. */
+const CURRENT_MARK = '  ← current';
+/**
+ * Columns a row's source must keep before it shares its line with that mark.
+ *
+ * Twenty is the shortest this column can be and still be read: an environment
+ * variable name (`DEEPSEEK_API_KEY` is sixteen, with the word `needs` before it
+ * and the `←` mark is twelve columns of its own. Below twenty the mark moves
+ * down a line rather than cutting the answer in half.
+ */
+const MIN_SOURCE_COLUMNS = 20;
+/** What `s` does, printed above the list on the screens that offer it. */
+const SETUP_HINT = 's provider setup · check installations and access';
+/**
+ * What the screen that found nothing says, and the reason it says it.
+ *
+ * Here rather than inline because the row window counts these lines before it
+ * draws a single row: they are the operator's only way off that screen, so they
+ * are reserved first and a row is drawn with what is left over.
+ */
+const EMPTY_SCREEN_INTRO = 'namzu scans these sources, in order, for an LLM credential:';
+const EMPTY_SCREEN_HINTS = {
+    signIn: 'to sign in with a subscription — no API key, and namzu keeps it for next time.',
+    paste: 'to paste a credential now and use it for this session.',
+    durable: 'You can also set one of the env vars above (or start a local server) and restart.',
+};
+/** The sources the empty screen lists — the same set the summary line names. */
+function emptyScreenSourceLines() {
+    return [
+        ` · existing ${subscriptionProviders()
+            .map((entry) => entry.label)
+            .join(' and ')} sessions on this device`,
+        ' · subscriptions signed in to from namzu (~/.namzu/credentials.json)',
+        ' · env vars / API keys (optional alternatives: ANTHROPIC_API_KEY, OPENAI_API_KEY, …)',
+        ' · local servers (Ollama localhost:11434, LM Studio localhost:1234)',
+    ];
+}
 function subscriptionProviders() {
     return ALL_PROVIDER_IDS.map((id) => PROVIDER_REGISTRY[id]).filter((entry) => entry.subscriptionLogin !== undefined);
 }
@@ -48,26 +150,25 @@ function signInChoiceIndex(choices, provider) {
 /**
  * The provider `k` opens entry for.
  *
- * The highlighted row whenever it takes a typed credential — whichever row that
- * is, detected or not. This screen used to answer the question from the
- * registry instead: the saved provider if the picker was open because of one,
- * and otherwise the first key-capable entry, which is a provider the operator
- * may not have been looking at. A list you can move through is a list the key
+ * The highlighted row's own provider whenever the vendor takes a typed
+ * credential. This screen used to answer the question from the registry
+ * instead: the saved provider if the picker was open because of one, and
+ * otherwise the first key-capable entry, which is a provider the operator may
+ * not have been looking at. A list you can move through is a list the key
  * beside it has to follow.
  *
- * The rows that do not take one — a local server, a provider whose credential
- * arrives by sign-in — fall through to the saved provider this picker was
- * opened for: that route is why the notice above says `k`, and it must keep
- * working when the cursor happens to sit on a row that cannot use it.
+ * A row whose vendor takes none — a local server — falls through to the saved
+ * provider this picker was opened for: that route is why the notice above says
+ * `k`, and it must keep working when the cursor happens to sit on a row that
+ * cannot use it.
  *
  * Returns null when there is nothing here to enter a credential for, which the
  * caller says out loud rather than presenting a field that leads nowhere.
  */
 function keyEntryTarget(row, keyEntryFor) {
-    if (row?.kind === 'unconfigured')
-        return row.entry;
-    if (row?.kind === 'detected' && row.detected.entry.acceptsTypedCredential)
-        return row.detected.entry;
+    const onThisRow = typedCredentialEntry(row);
+    if (onThisRow)
+        return onThisRow;
     if (keyEntryFor) {
         const entry = PROVIDER_REGISTRY[keyEntryFor];
         if (entry?.acceptsTypedCredential)
@@ -75,11 +176,7 @@ function keyEntryTarget(row, keyEntryFor) {
     }
     return null;
 }
-/** Name a row the way its own line does, for a sentence about it. */
-function rowLabel(row) {
-    return row.kind === 'detected' ? row.detected.entry.label : row.entry.label;
-}
-export function Picker({ detected, currentProvider, selectionKind = 'provider-and-model', currentModel, initialView = 'providers', onSubmit, onCancel, onSetup, describeModels = describeProviderModels, onCredential, onLogin, onLoginComplete, verify = verifyCredential, keyEntryFor, notice, }) {
+export function Picker({ detected, currentProvider, selectionKind = 'provider-and-model', currentModel, initialView = 'providers', onSubmit, onCancel, onSetup, describeModels = describeProviderModels, onCredential, onLogin, onLoginComplete, verify = verifyCredential, keyEntryFor, notice, cancelExits = false, }) {
     /**
      * The one foreign operation still allowed to publish into this picker.
      *
@@ -138,6 +235,11 @@ export function Picker({ detected, currentProvider, selectionKind = 'provider-an
     // of a three-row sign-in list.
     const initialSelection = initialView === 'subscriptions' ? 0 : initialProviderRow(rows, currentProvider, keyEntryFor);
     const { selection: cursor, selectionRef: cursorRef, setSelection: setCursor, } = useSelectionIndex(initialSelection);
+    // How wide this screen's text is, and how many lines its notice takes, both
+    // of which the row window is sized against — see the list below.
+    const terminal = useWindowSize();
+    const contentWidth = pickerContentWidth(terminal.columns ?? 80);
+    const noticeLines = notice ? wrapChoiceText(notice, contentWidth).length : 0;
     const [errorHint, setErrorHint] = useState(null);
     // The ref makes a pasted query followed immediately by Enter use the new
     // filtered list, even before React has drawn another frame. Null keeps the
@@ -162,6 +264,15 @@ export function Picker({ detected, currentProvider, selectionKind = 'provider-an
     // provider, because nothing on this screen changed it — so a credential typed
     // for a saved provider would have been built for a different one.
     const [keyEntry, setKeyEntry] = useState(null);
+    // The vendor whose ways in are being chosen, while that screen is up.
+    //
+    // Held as the vendor's id and resolved against `rows` on every render, not as
+    // a row object: `rows` is derived from the props on each render, and a stored
+    // row would be the list as it looked on the keystroke that opened this screen.
+    // The screen is only ever reached from a row, so the lookup cannot come back
+    // empty while it is up.
+    const [pathVendor, setPathVendor] = useState(null);
+    const pathRow = pathVendor === null ? null : (rows.find((row) => row.vendor === pathVendor) ?? null);
     const openModels = useCallback((current, returnToProviders = true) => {
         const operation = beginOperation();
         modelQueryRef.current = null;
@@ -294,6 +405,81 @@ export function Picker({ detected, currentProvider, selectionKind = 'provider-an
             });
         }
     };
+    /**
+     * Start a subscription sign-in for one provider.
+     *
+     * Written once and reached from two places — the sign-in screen's own Enter,
+     * and the sign-in path inside a vendor row — because two copies of this would
+     * be two places for the device-code wording, the operation's ownership and the
+     * failure sentence to drift apart. It is one operation either way, so an esc
+     * from either leaves nothing running behind the screen.
+     */
+    const startSignIn = (entry) => {
+        if (!entry.subscriptionLogin)
+            return;
+        if (!onLogin) {
+            setErrorHint('Subscription sign-in is not available on this screen.');
+            return;
+        }
+        const operation = beginOperation();
+        setPathVendor(null);
+        setLoginEntry({ entry, value: '', status: 'starting' });
+        void onLogin(entry.id, operation.controller.signal)
+            .then((disposition) => {
+            if (!ownsOperation(operation))
+                return;
+            if (disposition === 'awaiting-input') {
+                setLoginEntry({
+                    entry,
+                    value: '',
+                    status: 'typing',
+                });
+                return;
+            }
+            finishOperation(operation);
+            setLoginEntry(null);
+        })
+            .catch((error) => {
+            if (!ownsOperation(operation))
+                return;
+            finishOperation(operation);
+            setLoginEntry(null);
+            setErrorHint(`Could not start sign-in: ${error instanceof Error ? error.message : String(error)}`);
+        });
+    };
+    /**
+     * Follow one way in to the flow that already exists for it.
+     *
+     * The three arms are the three flows this screen already had; nothing here
+     * builds a credential. A detected path goes on to the model step exactly as
+     * Enter on a detected row always has. A credential path opens the paste field
+     * for its provider, so the value still travels `setKeyEntry` → `acceptKey` →
+     * the session credential. A sign-in path starts the operation `l` starts.
+     */
+    const takePath = (path) => {
+        if (path.kind === 'detected') {
+            const current = path.detected;
+            if (selectionKind === 'signed-in-subscription') {
+                const operation = beginOperation();
+                onSubmit({ provider: current.entry.id }, operation.controller.signal);
+                return;
+            }
+            setPathVendor(null);
+            openModels(current);
+            return;
+        }
+        if (path.kind === 'credential') {
+            if (!onCredential) {
+                setErrorHint(`No credential can be entered for ${path.entry.label} on this screen.`);
+                return;
+            }
+            invalidateOperation();
+            setPathVendor(null);
+            setKeyEntry({ entry: path.entry, value: '', status: 'typing' });
+            return;
+        }
+        startSignIn(path.entry);
+    };
     useInput((input, key) => {
         if (loginEntry) {
             if (key.escape) {
@@ -345,6 +531,43 @@ export function Picker({ detected, currentProvider, selectionKind = 'provider-an
             }
             return;
         }
+        // One vendor's ways in. Modal like the two screens above: while it is up it
+        // owns the keyboard, so `k`, `l` and `s` cannot act on a list that is not
+        // the one on screen. Escape returns to the row that opened it rather than
+        // to the top, because the cursor here is an index into this vendor's paths
+        // and would otherwise be read as a position in the list.
+        if (pathRow) {
+            if (key.escape) {
+                invalidateOperation();
+                setPathVendor(null);
+                setCursor(Math.max(0, rows.findIndex((row) => row.vendor === pathRow.vendor)));
+                return;
+            }
+            if (key.home || key.end || key.pageUp || key.pageDown) {
+                setCursor((current) => moveSelection(current, pathRow.paths.length, key.home ? 'first' : key.end ? 'last' : key.pageUp ? 'previous-page' : 'next-page'));
+                return;
+            }
+            if (key.upArrow) {
+                setCursor((current) => moveSelection(current, pathRow.paths.length, 'previous'));
+                return;
+            }
+            if (key.downArrow) {
+                setCursor((current) => moveSelection(current, pathRow.paths.length, 'next'));
+                return;
+            }
+            if (key.return) {
+                const chosen = pathRow.paths[cursorRef.current];
+                if (!chosen)
+                    return;
+                takePath(chosen);
+                return;
+            }
+            const selected = Number.parseInt(input, 10);
+            if (Number.isFinite(selected) && selected >= 1 && selected <= pathRow.paths.length) {
+                setCursor(selected - 1);
+            }
+            return;
+        }
         // `k` opens credential entry for the highlighted row — see
         // `keyEntryTarget` for which provider that resolves to when the row takes
         // no typed credential. The empty screen has always offered it (there,
@@ -397,7 +620,7 @@ export function Picker({ detected, currentProvider, selectionKind = 'provider-an
             }
             else {
                 setErrorHint(highlighted
-                    ? `${rowLabel(highlighted)} does not take a typed credential — choose a provider that does.`
+                    ? `${highlighted.label} does not take a typed credential — choose a provider that does.`
                     : 'No provider here takes a typed credential.');
             }
             return;
@@ -405,7 +628,7 @@ export function Picker({ detected, currentProvider, selectionKind = 'provider-an
         if (modelPhase &&
             (key.leftArrow || (modelQueryRef.current === null && (input === 'p' || input === 'P')))) {
             invalidateOperation();
-            setCursor(Math.max(0, rows.findIndex((row) => rowProviderId(row) === modelPhase.provider.entry.id)));
+            setCursor(Math.max(0, rowIndexOfProvider(rows, modelPhase.provider.entry.id)));
             setModelPhase(null);
             return;
         }
@@ -424,7 +647,7 @@ export function Picker({ detected, currentProvider, selectionKind = 'provider-an
                     onCancel();
                     return;
                 }
-                setCursor(Math.max(0, rows.findIndex((row) => rowProviderId(row) === modelPhase.provider.entry.id)));
+                setCursor(Math.max(0, rowIndexOfProvider(rows, modelPhase.provider.entry.id)));
                 setModelPhase(null);
                 return;
             }
@@ -455,36 +678,7 @@ export function Picker({ detected, currentProvider, selectionKind = 'provider-an
                     onSubmit({ provider: chosen.detected.entry.id }, operation.controller.signal);
                     return;
                 }
-                if (!chosen.entry.subscriptionLogin)
-                    return;
-                if (!onLogin) {
-                    setErrorHint('Subscription sign-in is not available on this screen.');
-                    return;
-                }
-                const operation = beginOperation();
-                setLoginEntry({ entry: chosen.entry, value: '', status: 'starting' });
-                void onLogin(chosen.entry.id, operation.controller.signal)
-                    .then((disposition) => {
-                    if (!ownsOperation(operation))
-                        return;
-                    if (disposition === 'awaiting-input') {
-                        setLoginEntry({
-                            entry: chosen.entry,
-                            value: '',
-                            status: 'typing',
-                        });
-                        return;
-                    }
-                    finishOperation(operation);
-                    setLoginEntry(null);
-                })
-                    .catch((error) => {
-                    if (!ownsOperation(operation))
-                        return;
-                    finishOperation(operation);
-                    setLoginEntry(null);
-                    setErrorHint(`Could not start sign-in: ${error instanceof Error ? error.message : String(error)}`);
-                });
+                startSignIn(chosen.entry);
                 return;
             }
             const selected = Number.parseInt(input, 10);
@@ -571,39 +765,30 @@ export function Picker({ detected, currentProvider, selectionKind = 'provider-an
                 setErrorHint('No provider available.');
                 return;
             }
-            // A row with no credential has no session to open and no catalogue to
-            // ask: accepting it would submit a provider this machine holds nothing
-            // for. Enter takes the operator to the field instead, which is the same
-            // thing `k` does on this row and the only thing that can move it
-            // forward.
-            if (row.kind === 'unconfigured') {
-                if (!onCredential) {
-                    setErrorHint(`No credential can be entered for ${row.entry.label} on this screen.`);
-                    return;
-                }
-                invalidateOperation();
-                setKeyEntry({ entry: row.entry, value: '', status: 'typing' });
+            // Nothing on this row can be constructed, so there is no session to open
+            // and no catalogue to ask. The row stays visible on purpose — see the
+            // list below — so this is the only place that can decline it, and
+            // declining with the reason is the point: accepting would write the
+            // choice to preferences and hand the operator a session that refuses to
+            // start.
+            if (!rowIsUsable(row)) {
+                setErrorHint(unsupportedProviderMessage(row.detected[0]?.entry.id ?? row.vendor));
                 return;
             }
-            const current = row.detected;
-            // Detected, and still not choosable. The row stays visible on purpose
-            // — see the list below — so this is the only place that can decline
-            // it, and declining with the reason is the point: accepting would
-            // write the choice to preferences and hand the operator a session
-            // that refuses to start.
-            if (!current.entry.constructible) {
-                setErrorHint(unsupportedProviderMessage(current.entry.id));
-                return;
-            }
-            if (selectionKind === 'signed-in-subscription') {
-                const operation = beginOperation();
-                onSubmit({ provider: current.entry.id }, operation.controller.signal);
+            // More than one provider behind this row: which of them the operator
+            // means is theirs to say. Skipping the question was the defect this
+            // screen was reported with — one row asked for a key while the session
+            // it could have used sat above it — so the row asks instead of picking.
+            if (rowNeedsChoice(row)) {
+                invalidateOperation();
+                setPathVendor(row.vendor);
+                setCursor(0);
                 return;
             }
-            // Ask the provider what it has, then show the model step. The list is
-            // raced against 3s inside `describeProviderModels`, so this resolves
-            // either way and the step always has at least the default.
-            openModels(current);
+            // One provider, so Enter means exactly what it has always meant: the
+            // detected session's models, or the field that takes the credential this
+            // row is missing. `takePath` is the same call the choice screen makes.
+            takePath(row.paths[0]);
             return;
         }
         // Numeric quick-select, one keystroke per row and therefore the first nine.
@@ -618,14 +803,16 @@ export function Picker({ detected, currentProvider, selectionKind = 'provider-an
         }
     });
     // Above every screen this picker draws, so the reason is on the same frame as
-    // the choice it is asking for.
-    const noticeBox = notice || onSetup ? (_jsx(Box, { paddingBottom: 1, children: _jsxs(Box, { flexDirection: "column", children: [notice ? _jsx(Text, { color: theme.status.warn, children: notice }) : null, onSetup && !modelPhase && !loginPhase && !loginEntry && !keyEntry ? _jsx(Text, { dimColor: true, children: "s provider setup \u00B7 check installations and access" }) : null] }) })) : null;
+    // the choice it is asking for. Whether the setup hint fits beside it is
+    // decided below, where the screen's line budget is; the screens that return
+    // early cannot be showing it in any case, so they ask for it unconditionally.
+    const buildNoticeBox = (withSetupHint) => notice || onSetup ? (_jsx(Box, { paddingBottom: 1, children: _jsxs(Box, { flexDirection: "column", children: [notice ? (_jsx(WrappedLines, { text: notice, width: contentWidth, color: theme.status.warn })) : null, onSetup && withSetupHint && !modelPhase && !loginPhase && !loginEntry && !keyEntry ? (_jsx(Text, { dimColor: true, children: SETUP_HINT })) : null] }) })) : null;
     if (loginEntry) {
         const waitsForDeviceApproval = loginEntry.entry.subscriptionLogin === 'device';
         const painted = loginEntry.value
             ? `${'•'.repeat(Math.min(loginEntry.value.length, 32))}${loginEntry.value.length > 32 ? '…' : ''}`
             : '(nothing pasted yet)';
-        return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.border.focus, paddingX: 1, children: [noticeBox, _jsxs(Text, { color: theme.accent.system, bold: true, children: ["Complete ", loginEntry.entry.label, " sign-in"] }), waitsForDeviceApproval ? (_jsx(Text, { color: theme.text.muted, children: "Approve the device code shown above in your browser. esc cancels." })) : (_jsxs(_Fragment, { children: [_jsx(Text, { color: theme.text.muted, children: "Paste the authorization code, or the finished browser address, then press enter. esc cancels." }), _jsx(Box, { paddingTop: 1, children: _jsx(Text, { color: loginEntry.value ? theme.text.primary : theme.text.muted, children: painted }) })] })), _jsxs(Box, { paddingTop: 1, flexDirection: "column", children: [loginEntry.status === 'starting' ? (_jsx(Text, { color: theme.text.muted, children: waitsForDeviceApproval
+        return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.border.focus, paddingX: 1, children: [buildNoticeBox(true), _jsxs(Text, { color: theme.accent.system, bold: true, children: ["Complete ", loginEntry.entry.label, " sign-in"] }), waitsForDeviceApproval ? (_jsx(Text, { color: theme.text.muted, children: "Approve the device code shown above in your browser. esc cancels." })) : (_jsxs(_Fragment, { children: [_jsx(Text, { color: theme.text.muted, children: "Paste the authorization code, or the finished browser address, then press enter. esc cancels." }), _jsx(Box, { paddingTop: 1, children: _jsx(Text, { color: loginEntry.value ? theme.text.primary : theme.text.muted, children: painted }) })] })), _jsxs(Box, { paddingTop: 1, flexDirection: "column", children: [loginEntry.status === 'starting' ? (_jsx(Text, { color: theme.text.muted, children: waitsForDeviceApproval
                                 ? 'Waiting for browser approval…'
                                 : 'Starting browser sign-in…' })) : loginEntry.status === 'checking' ? (_jsx(Text, { color: theme.text.muted, children: "Finishing sign-in\u2026" })) : null, loginEntry.problem ? _jsx(Text, { color: theme.status.warn, children: loginEntry.problem }) : null] })] }));
     }
@@ -636,19 +823,27 @@ export function Picker({ detected, currentProvider, selectionKind = 'provider-an
         // line below is a preview of the sentence they will get, not a second
         // opinion about it.
         const kind = classifyCredential(entry, keyEntry.value);
-        return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.border.focus, paddingX: 1, children: [noticeBox, _jsxs(Box, { flexDirection: "column", paddingBottom: 1, children: [_jsxs(Text, { color: theme.accent.system, bold: true, children: ["Paste a credential for ", entry.label] }), _jsx(Text, { color: theme.text.muted, children: "An API key or a subscription token. Type or paste, then enter. esc cancels." })] }), _jsx(Text, { color: theme.text.primary, children: maskKey(keyEntry.value) || _jsx(Text, { color: theme.text.muted, children: "(nothing typed yet)" }) }), _jsxs(Box, { paddingTop: 1, flexDirection: "column", children: [keyEntry.status === 'checking' ? (_jsxs(Text, { color: theme.text.muted, children: ["Checking it with ", entry.label, "\u2026"] })) : (_jsx(Text, { color: theme.text.secondary, children: "Used for this session only \u2014 it is not written anywhere." })), keyEntry.value.length > 0 && kind === 'subscription-token' ? (_jsx(Text, { color: theme.status.warn, children: "Reads as a subscription token \u2014 it expires in a few hours and namzu has no refresh data for a pasted one." })) : null, keyEntry.problem ? _jsx(Text, { color: theme.status.warn, children: keyEntry.problem }) : null] })] }));
+        return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.border.focus, paddingX: 1, children: [buildNoticeBox(true), _jsxs(Box, { flexDirection: "column", paddingBottom: 1, children: [_jsxs(Text, { color: theme.accent.system, bold: true, children: ["Paste a credential for ", entry.label] }), _jsx(Text, { color: theme.text.muted, children: "An API key or a subscription token. Type or paste, then enter. esc cancels." })] }), _jsx(Text, { color: theme.text.primary, children: maskKey(keyEntry.value) || _jsx(Text, { color: theme.text.muted, children: "(nothing typed yet)" }) }), _jsxs(Box, { paddingTop: 1, flexDirection: "column", children: [keyEntry.status === 'checking' ? (_jsxs(Text, { color: theme.text.muted, children: ["Checking it with ", entry.label, "\u2026"] })) : (_jsx(Text, { color: theme.text.secondary, children: "Used for this session only \u2014 it is not written anywhere." })), keyEntry.value.length > 0 && kind === 'subscription-token' ? (_jsx(Text, { color: theme.status.warn, children: "Reads as a subscription token \u2014 it expires in a few hours and namzu has no refresh data for a pasted one." })) : null, keyEntry.problem ? _jsx(Text, { color: theme.status.warn, children: keyEntry.problem }) : null] })] }));
     }
     if (modelPhase) {
-        return (_jsxs(Box, { flexDirection: "column", children: [noticeBox, _jsx(ModelStepView, { providerLabel: modelPhase.provider.entry.label, otherProviders: detected
+        return (_jsxs(Box, { flexDirection: "column", children: [buildNoticeBox(true), _jsx(ModelStepView, { providerLabel: modelPhase.provider.entry.label, otherProviders: detected
                         .filter((provider) => provider.entry.constructible && provider.entry.id !== modelPhase.provider.entry.id)
                         .map((provider) => provider.entry.label), step: modelPhase.step, query: modelQuery, currentModel: currentProvider == null || currentProvider === modelPhase.provider.entry.id
                         ? currentModel
                         : undefined, cursor: cursor, errorHint: errorHint, returnToProviders: modelPhase.returnToProviders, sessionOnly: modelPhase.provider.source.kind === 'session' })] }));
     }
+    // One vendor's ways in. Drawn only where the row's paths name more than one
+    // provider — every other row is answered by Enter as it always was — so this
+    // is the one screen this change adds, and it is reached one way.
+    if (pathRow) {
+        return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.border.focus, paddingX: 1, children: [buildNoticeBox(true), _jsxs(Text, { color: theme.accent.system, bold: true, children: ["Choose a way to use ", pathRow.label] }), _jsx(Text, { color: theme.text.muted, children: pathRow.detected.length > 0
+                        ? `Already usable here — ${rowSourceText(pathRow)}.`
+                        : 'Nothing on this device is set up for it yet.' }), _jsx(Box, { flexDirection: "column", paddingTop: 1, children: pathRow.paths.map((path, index) => (_jsxs(Text, { color: index === cursor ? theme.text.primary : theme.text.muted, children: [index === cursor ? '❯' : ' ', " ", index + 1, ". ", describePath(path)] }, `${path.kind}-${pathProviderId(path)}`))) }), _jsxs(Box, { paddingTop: 1, flexDirection: "column", children: [_jsxs(Text, { color: theme.text.muted, children: ["\u2191\u2193 or 1-", pathRow.paths.length, " navigate \u00B7 enter use \u00B7 esc back"] }), errorHint ? _jsx(Text, { color: theme.status.warn, children: errorHint }) : null] })] }));
+    }
     if (loginPhase) {
         const choices = subscriptionChoices(detected);
         const existingCount = choices.filter((choice) => choice.kind === 'existing').length;
-        return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.border.focus, paddingX: 1, children: [noticeBox, _jsx(Text, { color: theme.accent.system, bold: true, children: "Choose a subscription session" }), _jsx(Text, { color: theme.text.muted, children: existingCount > 0
+        return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.border.focus, paddingX: 1, children: [buildNoticeBox(true), _jsx(Text, { color: theme.accent.system, bold: true, children: "Choose a subscription session" }), _jsx(Text, { color: theme.text.muted, children: existingCount > 0
                         ? 'Reuse a signed-in device session, or start a separate Namzu-owned sign-in.'
                         : 'No usable model session was found on this device. Start a new subscription sign-in.' }), _jsx(Box, { flexDirection: "column", paddingTop: 1, children: choices.map((choice, index) => (_jsxs(Text, { color: index === cursor ? theme.text.primary : theme.text.muted, children: [index === cursor ? '❯' : ' ', " ", index + 1, ".", ' ', choice.kind === 'existing'
                                 ? `Use existing ${choice.detected.entry.label} · ${describeSource(choice.detected)}`
@@ -667,26 +862,107 @@ export function Picker({ detected, currentProvider, selectionKind = 'provider-an
     // the cursor is the answer, and saying so again costs the line its tail: the
     // footer is one row, and the sentence with a label in it wraps.
     const namesAnotherRow = entryTarget !== null &&
-        (highlightedRow === undefined || rowProviderId(highlightedRow) !== entryTarget.id);
+        (highlightedRow === undefined || !rowHasProvider(highlightedRow, entryTarget.id));
+    // The lines this screen spends on everything that is not a row, counted from
+    // the very words it is about to draw rather than estimated, then the rows get
+    // what is left.
+    //
+    // Two defects met here. The box used to be drawn at whatever height its rows
+    // needed, and on a 60x20 terminal it was taller than the terminal: Ink
+    // scrolled it, so the top border, the title, the count and the notice — the
+    // sentence telling the operator what to do about a missing credential — were
+    // above the top of the screen. And counting rows rather than lines was not
+    // enough either, because a row whose source column wraps is two lines: the
+    // count has to be the height the row actually draws, which is why the sources
+    // are wrapped here rather than by the renderer.
+    const oneLine = (text) => wrapChoiceText(text, contentWidth).length;
+    const emptyScreenFooter = `${onLogin ? 'l: sign in · ' : ''}↑↓ or 1-9 navigate · enter or k: enter a credential · ${cancelExits ? 'esc: exit namzu' : 'esc: exit picker'}`;
+    // Everything the screen draws that is not a row, in the order it is drawn:
+    // the box's two borders, the notice and its blank, the title, the blank and
+    // the intro, the sources, then the two or three ways off the screen with the
+    // blank each one sits under, the footer with its blank, the app's status bar
+    // underneath, and the line above the box that belongs to what the app has
+    // already written — Ink draws this box below that, and a terminal shows the
+    // last `rows` of it, so a box that fills the screen exactly loses its own top
+    // border to the transcript above it. Measured at 60x20, where the boot banner
+    // is two lines and the reserved line is what keeps the notice on screen.
+    const emptyScreenChromeRows = 2 +
+        (notice ? noticeLines : 0) +
+        (notice || onSetup ? 1 : 0) +
+        (onSetup ? oneLine(SETUP_HINT) : 0) +
+        1 +
+        1 +
+        oneLine(EMPTY_SCREEN_INTRO) +
+        emptyScreenSourceLines().reduce((rows, line) => rows + oneLine(line), 0) +
+        (onLogin ? 1 + oneLine(`Press l ${EMPTY_SCREEN_HINTS.signIn}`) : 0) +
+        1 +
+        oneLine(`Or press k ${EMPTY_SCREEN_HINTS.paste}`) +
+        1 +
+        oneLine(EMPTY_SCREEN_HINTS.durable) +
+        1 +
+        oneLine(emptyScreenFooter) +
+        1 +
+        TRANSCRIPT_LINE_ABOVE;
+    // The same, for the screen that found something: two borders, the notice and
+    // its blank, the title, the subtitle and the blank under the header, the
+    // heading above the not-detected block and the blank above that, the footer's
+    // blank and its line, and the status bar. The heading is reserved whenever
+    // the list has a not-detected block, even if the window does not reach it: a
+    // row too few visible is a scroll the arrows fix, and a line too many is the
+    // header scrolled away.
+    const listSubtitle = selectionKind === 'signed-in-subscription'
+        ? `${detected.length} already usable · no API key required`
+        : `${detected.length} detected · device sessions / Namzu sign-ins / optional keys / local probes`;
+    const listFooter = `↑↓ or 1-9 navigate · enter ${selectionKind === 'signed-in-subscription' ? 'use' : 'accept'}${entryTarget
+        ? ` · k enter a credential${namesAnotherRow ? ` for ${entryTarget.label}` : ''}`
+        : ''}${onLogin && selectionKind !== 'signed-in-subscription' ? ' · l create a Namzu sign-in' : ''} · ${cancelExits ? 'esc exit namzu' : 'esc cancel'}`;
+    // What the screen keeps, in the order it gives things up.
+    //
+    // Overflow cuts the TOP of the box, and the top is where the notice sits —
+    // the sentence that says why this screen is open and what to do about it.
+    // Everything below is ranked against that: the title and the rows are the
+    // screen, the footer is how it is left, and the two blocks that only describe
+    // the screen are what go when the terminal is too short to hold them all.
+    // `5 detected · device sessions / Namzu sign-ins / optional keys / local
+    // probes` is a summary of what is already listed beneath it, and
+    // `s provider setup` advertises a key that works from other screens too.
+    const headingRows = rows.some((row) => row.detected.length === 0) ? 1 + oneLine(NOT_DETECTED_HEADING) : 0;
+    // Everything above and below the rows except those two blocks.
+    const listCoreRows = 2 +
+        (notice ? noticeLines : 0) +
+        (notice || onSetup ? 1 : 0) +
+        1 +
+        headingRows +
+        1 +
+        oneLine(listFooter) +
+        1 +
+        TRANSCRIPT_LINE_ABOVE;
+    const subtitleRows = 1 + oneLine(listSubtitle);
+    const setupHintRows = onSetup ? oneLine(SETUP_HINT) : 0;
+    const screenRows = terminal.rows ?? 24;
+    // The row under the cursor is the one the window will not drop, so it is the
+    // height the gives-way tests are measured against — a row is one line only
+    // while its source column fits, and at 50 columns a variable name is three.
+    const cursorRow = rows[Math.max(0, Math.min(cursor, rows.length - 1))];
+    const mustKeep = cursorRow ? rowHeight(cursorRow, contentWidth, CURRENT_MARK) : 1;
+    const showSubtitle = screenRows - listCoreRows - setupHintRows - subtitleRows >= mustKeep;
+    const showSetupHint = screenRows - listCoreRows - (showSubtitle ? subtitleRows : 0) - setupHintRows >= mustKeep;
+    const listChromeRows = listCoreRows + (showSubtitle ? subtitleRows : 0) + (showSetupHint ? setupHintRows : 0);
+    const rowBudget = Math.max(1, screenRows - (detected.length === 0 ? emptyScreenChromeRows : listChromeRows));
+    const listWindow = rowWindow(rows, cursor, rowBudget, contentWidth);
     if (detected.length === 0) {
-        return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.status.warn, paddingX: 1, children: [noticeBox, _jsx(Text, { color: theme.status.warn, bold: true, children: "No providers detected" }), _jsxs(Box, { paddingTop: 1, flexDirection: "column", children: [_jsx(Text, { color: theme.text.primary, children: "namzu scans these sources, in order, for an LLM credential:" }), _jsxs(Text, { color: theme.text.muted, children: [' ', "\u00B7 existing", ' ', subscriptionProviders()
-                                    .map((entry) => entry.label)
-                                    .join(' and '), ' ', "sessions on this device"] }), _jsxs(Text, { color: theme.text.muted, children: [' ', "\u00B7 subscriptions signed in to from namzu (~/.namzu/credentials.json)"] }), _jsxs(Text, { color: theme.text.muted, children: [' ', "\u00B7 env vars / API keys (optional alternatives: ANTHROPIC_API_KEY, OPENAI_API_KEY, \u2026)"] }), _jsxs(Text, { color: theme.text.muted, children: [' ', "\u00B7 local servers (Ollama localhost:11434, LM Studio localhost:1234)"] })] }), onLogin ? (_jsx(Box, { paddingTop: 1, children: _jsxs(Text, { color: theme.text.primary, children: ["Press ", _jsx(Text, { color: theme.accent.system, children: "l" }), " to sign in with a subscription \u2014 no API key, and namzu keeps it for next time."] }) })) : null, _jsx(Box, { paddingTop: 1, children: _jsxs(Text, { color: theme.text.primary, children: ["Or press ", _jsx(Text, { color: theme.accent.system, children: "k" }), " to paste a credential now and use it for this session."] }) }), _jsx(Box, { paddingTop: 1, children: _jsx(Text, { color: theme.text.secondary, children: "You can also set one of the env vars above (or start a local server) and restart." }) }), _jsx(ProviderSetupRows, { rows: rows, cursor: cursor, currentProvider: currentProvider }), _jsx(Box, { paddingTop: 1, children: _jsxs(Text, { color: theme.text.muted, children: [onLogin ? 'l: sign in · ' : '', "\u2191\u2193 or 1-9 navigate \u00B7 enter or k: enter a credential \u00B7 esc: exit picker"] }) })] }));
+        return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.status.warn, paddingX: 1, children: [buildNoticeBox(showSetupHint), _jsx(Text, { color: theme.status.warn, bold: true, children: "No providers detected" }), _jsxs(Box, { paddingTop: 1, flexDirection: "column", children: [_jsx(WrappedLines, { text: EMPTY_SCREEN_INTRO, width: contentWidth, color: theme.text.primary }), emptyScreenSourceLines().map((line) => (_jsx(WrappedLines, { text: line, width: contentWidth, color: theme.text.muted }, line)))] }), onLogin ? (_jsx(Box, { paddingTop: 1, flexDirection: "column", children: _jsx(HintLines, { text: `Press l ${EMPTY_SCREEN_HINTS.signIn}`, keyLetter: "l", width: contentWidth, color: theme.text.primary }) })) : null, _jsx(Box, { paddingTop: 1, flexDirection: "column", children: _jsx(HintLines, { text: `Or press k ${EMPTY_SCREEN_HINTS.paste}`, keyLetter: "k", width: contentWidth, color: theme.text.primary }) }), _jsx(Box, { paddingTop: 1, children: _jsx(WrappedLines, { text: EMPTY_SCREEN_HINTS.durable, width: contentWidth, color: theme.text.secondary }) }), _jsx(ProviderSetupRows, { rows: rows, cursor: cursor, currentProvider: currentProvider, visible: listWindow, contentWidth: contentWidth }), _jsx(Box, { paddingTop: 1, children: _jsx(Text, { color: theme.text.muted, children: emptyScreenFooter }) })] }));
     }
-    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.border.focus, paddingX: 1, children: [noticeBox, _jsxs(Box, { flexDirection: "column", paddingBottom: 1, children: [_jsx(Text, { color: theme.accent.system, bold: true, children: selectionKind === 'signed-in-subscription'
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.border.focus, paddingX: 1, children: [buildNoticeBox(showSetupHint), _jsxs(Box, { flexDirection: "column", paddingBottom: 1, children: [_jsx(Text, { color: theme.accent.system, bold: true, children: selectionKind === 'signed-in-subscription'
                             ? 'Choose a signed-in subscription'
-                            : 'Choose a provider' }), _jsx(Text, { color: theme.text.muted, children: selectionKind === 'signed-in-subscription'
-                            ? `${detected.length} already usable · no API key required`
-                            : `${detected.length} detected · device sessions / Namzu sign-ins / optional keys / local probes` })] }), _jsx(ProviderSetupRows, { rows: rows, cursor: cursor, currentProvider: currentProvider }), _jsxs(Box, { flexDirection: "column", paddingTop: 1, children: [_jsxs(Text, { color: theme.text.muted, children: ["\u2191\u2193 or 1-9 navigate \u00B7 enter ", selectionKind === 'signed-in-subscription' ? 'use' : 'accept', entryTarget
-                                ? ` · k enter a credential${namesAnotherRow ? ` for ${entryTarget.label}` : ''}`
-                                : '', onLogin && selectionKind !== 'signed-in-subscription'
-                                ? ' · l create a Namzu sign-in'
-                                : '', ' ', "\u00B7 esc cancel"] }), rows.length > 9 ? (_jsx(Text, { color: theme.text.muted, children: "Rows past 9 are \u2191\u2193 only: two digits cannot be told from two presses." })) : null, errorHint ? _jsx(Text, { color: theme.status.warn, children: errorHint }) : null] })] }));
+                            : 'Choose a provider' }), showSubtitle ? (_jsx(WrappedLines, { text: listSubtitle, width: contentWidth, color: theme.text.muted })) : null] }), _jsx(ProviderSetupRows, { rows: rows, cursor: cursor, currentProvider: currentProvider, visible: listWindow, contentWidth: contentWidth }), _jsxs(Box, { flexDirection: "column", paddingTop: 1, children: [_jsx(WrappedLines, { text: listFooter, width: contentWidth, color: theme.text.muted }), rows.length > 9 ? (_jsx(Text, { color: theme.text.muted, children: "Rows past 9 are \u2191\u2193 only: two digits cannot be told from two presses." })) : null, errorHint ? _jsx(Text, { color: theme.status.warn, children: errorHint }) : null] })] }));
 }
 function ModelStepView({ providerLabel, otherProviders, step, query, currentModel, cursor, errorHint, returnToProviders, sessionOnly, }) {
     const terminal = useWindowSize();
     const columns = terminal.columns ?? 80;
-    const width = Math.max(1, columns - 4);
+    // The same area the provider list measures against — see `pickerContentWidth`
+    // for the three deductions and what counting only two of them cost.
+    const width = pickerContentWidth(columns);
     const choices = step ? filterModelChoices(step.choices, query ?? '') : [];
     const noticeRows = step?.notice ? Math.ceil(choiceDisplayWidth(step.notice) / width) : 0;
     const window = selectionWindow(choices, cursor, Math.max(1, Math.min(7, (terminal.rows ?? 24) - 7 - noticeRows)));
@@ -739,47 +1015,237 @@ function ModelStepView({ providerLabel, otherProviders, step, query, currentMode
  * The appended rows carry no blank line between them. They are a work list
  * rather than a catalogue, and a machine with six of them would otherwise push
  * the box past a 24-row terminal and scroll the top of it — the detected rows —
- * out of sight.
+ * out of sight. That argument is now the behaviour: `visible` is the slice that
+ * fits, and when the whole list does not, the block boundary travels with the
+ * window so the heading stays on screen wherever the operator has scrolled to.
+ *
+ * Grouping by vendor only shortened this list, and it shortened it by exactly
+ * the duplicates: with one vendor drawn once instead of twice, nine
+ * vendors is the most this screen can ever draw, and the digit shortcut's
+ * nine-row limit is now a bound the list cannot pass rather than one it can
+ * reach and overshoot. The sentence below still guards it, because a tenth
+ * vendor in the registry would put the boundary back.
  */
-function ProviderSetupRows({ rows, cursor, currentProvider, }) {
-    // The two arms are contiguous by construction (`providerListRows` appends),
+function ProviderSetupRows({ rows, cursor, currentProvider, visible, contentWidth, }) {
+    // The two blocks are contiguous by construction (`providerListRows` appends),
     // so one boundary splits them and every row's number is its position in the
-    // whole list, whichever block it is drawn in.
-    const firstUnconfigured = rows.findIndex((row) => row.kind === 'unconfigured');
-    const detectedCount = firstUnconfigured === -1 ? rows.length : firstUnconfigured;
-    return (_jsxs(_Fragment, { children: [_jsx(Box, { flexDirection: "column", children: rows.slice(0, detectedCount).map((row, index) => row.kind === 'detected' ? (_jsx(ProviderRow, { detected: row.detected, index: index, selected: index === cursor, isCurrent: row.detected.entry.id === currentProvider }, row.detected.entry.id)) : null) }), firstUnconfigured === -1 ? null : (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: theme.text.muted, children: "Not detected \u2014 enter a credential to use these:" }), rows.slice(firstUnconfigured).map((row, offset) => row.kind === 'unconfigured' ? (_jsx(UnconfiguredProviderRow, { entry: row.entry, index: firstUnconfigured + offset, selected: firstUnconfigured + offset === cursor, isCurrent: row.entry.id === currentProvider }, row.entry.id)) : null)] }))] }));
+    // whole list, whichever block it is drawn in. The boundary is a row's own
+    // state now — whether this machine has anything for it — rather than which
+    // arm of a union it is in.
+    const firstUndetected = rows.findIndex((row) => row.detected.length === 0);
+    return (_jsx(Box, { flexDirection: "column", children: visible.items.map((row, offset) => {
+            const index = visible.start + offset;
+            // The heading is drawn above the first not-detected row, or at the
+            // top when the window has scrolled past that boundary — so the words
+            // that explain the block below are never scrolled away from it.
+            const heading = firstUndetected !== -1 &&
+                (index === firstUndetected || (offset === 0 && index > firstUndetected)) ? (_jsx(Box, { marginTop: offset === 0 ? 0 : 1, children: _jsx(Text, { color: theme.text.muted, children: NOT_DETECTED_HEADING }) }, "heading")) : null;
+            const detected = row.detected.length > 0;
+            return (_jsxs(Fragment, { children: [heading, detected ? (_jsx(DetectedVendorRow, { row: row, index: index, selected: index === cursor, isCurrent: currentProvider != null && rowHasProvider(row, currentProvider), contentWidth: contentWidth })) : (_jsx(UnconfiguredVendorRow, { row: row, index: index, selected: index === cursor, isCurrent: currentProvider != null && rowHasProvider(row, currentProvider), contentWidth: contentWidth }))] }, row.vendor));
+        }) }));
 }
 /**
- * A row for a provider nothing on this machine can serve yet.
+ * A row for a vendor nothing on this machine can serve yet.
  *
- * Deliberately a separate component from `ProviderRow` rather than one
+ * Deliberately a separate component from `DetectedVendorRow` rather than one
  * component with two modes: the detected row's shape is what operators read
  * every day, and a shared body is a body where a change for the new rows moves
  * the old ones. The columns line up because both pad the label to the same
  * width; what differs is the third one, which says what is missing instead of
  * where the credential came from.
  */
-function UnconfiguredProviderRow({ entry, index, selected, isCurrent, }) {
-    const cursor = selected ? '›' : ' ';
-    const number = `${index + 1}.`;
-    const currentMark = isCurrent ? '  ← current' : '';
-    return (_jsxs(Box, { children: [_jsxs(Text, { color: selected ? theme.border.focus : theme.text.muted, children: [cursor, " "] }), _jsxs(Text, { color: theme.text.muted, children: [number, " "] }), _jsx(Text, { color: selected ? theme.border.focus : theme.text.primary, bold: selected, children: entry.label.padEnd(28) }), _jsx(Text, { color: theme.status.warn, children: credentialNeed(entry) }), isCurrent ? _jsx(Text, { color: theme.accent.system, children: currentMark }) : null] }));
+function UnconfiguredVendorRow({ row, index, selected, isCurrent, contentWidth, }) {
+    // The variable, not "not configured": it is the one thing the operator has
+    // to act on, and it is what makes the credential durable. The colour marks
+    // the work still to do on a screen that is otherwise all done.
+    const mark = isCurrent ? CURRENT_MARK : '';
+    const source = rowSourceLines(row, contentWidth, mark);
+    const markInline = rowMarkPlacement(contentWidth, mark).inline;
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(RowLine, { cursor: selected ? '›' : ' ', number: `${index + 1}.`, label: row.label, labelColor: selected ? theme.border.focus : theme.text.primary, labelBold: selected, numberColor: selected ? theme.border.focus : theme.text.muted, source: source[0] ?? '', sourceColor: theme.status.warn, currentMark: mark, markInline: markInline }), source.slice(1).map((line, at) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: wrapped lines have no identity beyond their order.
+            _jsx(Text, { color: theme.status.warn, children: `${ROW_INDENT}${line}` }, at))), mark !== '' && !markInline ? (_jsx(Text, { color: theme.accent.system, children: `${ROW_INDENT}${mark.trimStart()}` })) : null] }));
 }
-function ProviderRow({ detected, index, selected, isCurrent, }) {
-    const cursor = selected ? '›' : ' ';
-    const number = `${index + 1}.`;
-    const label = detected.entry.label;
-    // What was found stays what is shown. A provider this build cannot construct
-    // is still genuinely on the machine, and replacing "local · localhost:1234"
-    // with the refusal would hide the discovery that makes the refusal make
-    // sense. The reason goes in the source column, where the row says what namzu
-    // knows about it.
-    const usable = detected.entry.constructible;
-    const sourceLabel = usable
-        ? describeSource(detected)
-        : `${describeSource(detected)} · unavailable in this build`;
-    const currentMark = isCurrent ? '  ← current' : '';
-    return (_jsxs(Box, { children: [_jsxs(Text, { color: selected ? theme.border.focus : theme.text.muted, children: [cursor, " "] }), _jsxs(Text, { color: theme.text.muted, children: [number, " "] }), _jsx(Text, { color: usable ? (selected ? theme.border.focus : theme.text.primary) : theme.text.muted, bold: usable && selected, dimColor: !usable, children: label.padEnd(28) }), _jsx(Text, { color: usable ? theme.text.muted : theme.status.warn, dimColor: !usable, children: sourceLabel }), isCurrent ? _jsx(Text, { color: theme.accent.system, children: currentMark }) : null] }));
+/**
+ * One row's first line: marker, number, name and source.
+ *
+ * The segments are children of ONE `<Text>` rather than siblings in a `<Box>`,
+ * and that is load-bearing rather than stylistic. A row that reaches the edge of
+ * the box is compressed, and a compressed row loses the trailing whitespace of
+ * the nodes it is built from — so the cursor row, which is one column wider
+ * than every other row because of its marker, came out as `› 6.DeepSeek` while
+ * the rows below kept their `6. `. Children of a text node are squashed into
+ * one string before anything measures or wraps them, so the space between the
+ * marker and the number is not trailing anything, and neither is the gap the
+ * padded name leaves before the source.
+ */
+function RowLine({ cursor, number, label, labelColor, labelBold, numberColor, source, sourceColor, currentMark, markInline = true, dim = false, }) {
+    return (_jsxs(Text, { children: [_jsx(Text, { color: numberColor, children: cursor }), " ", _jsx(Text, { color: numberColor, children: number }), ' ', _jsx(Text, { color: labelColor, bold: labelBold, dimColor: dim, children: label.padEnd(ROW_LABEL_WIDTH) }), _jsx(Text, { color: sourceColor, dimColor: dim, children: source }), currentMark && markInline ? (_jsx(Text, { color: theme.accent.system, children: currentMark })) : null] }));
+}
+/**
+ * A row for a vendor something on this machine can already serve.
+ *
+ * What was found stays what is shown. A provider this build cannot construct is
+ * still genuinely on the machine, and replacing "local · localhost:1234" with
+ * the refusal would hide the discovery that makes the refusal make sense. The
+ * reason goes in the source column, where the row says what namzu knows about
+ * it.
+ *
+ * The row's name is the vendor's, which is the same word the operator used to
+ * reach it — and the only place the two could differ is where one vendor is two
+ * registry ids, which is the case this screen was changed for.
+ */
+function DetectedVendorRow({ row, index, selected, isCurrent, contentWidth, }) {
+    const usable = rowIsUsable(row);
+    const mark = isCurrent ? CURRENT_MARK : '';
+    const source = rowSourceLines(row, contentWidth, mark);
+    const markInline = rowMarkPlacement(contentWidth, mark).inline;
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(RowLine, { cursor: selected ? '›' : ' ', number: `${index + 1}.`, label: row.label, labelColor: usable ? (selected ? theme.border.focus : theme.text.primary) : theme.text.muted, labelBold: usable && selected, numberColor: selected ? theme.border.focus : theme.text.muted, source: source[0] ?? '', sourceColor: usable ? theme.text.muted : theme.status.warn, currentMark: mark, markInline: markInline, dim: !usable }), source.slice(1).map((line, at) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: wrapped lines have no identity beyond their order.
+            _jsx(Text, { color: usable ? theme.text.muted : theme.status.warn, dimColor: !usable, children: `${ROW_INDENT}${line}` }, at))), mark !== '' && !markInline ? (_jsx(Text, { color: theme.accent.system, dimColor: !usable, children: `${ROW_INDENT}${mark.trimStart()}` })) : null] }));
+}
+/**
+ * Text this screen wraps before the renderer sees it.
+ *
+ * Every sentence whose line count the box is sized against goes through here,
+ * for two reasons that are the same reason. Ink's wrapping keeps the space it
+ * broke at, so a sentence that ran onto a second line began it one column to
+ * the right of the first — inside a box whose whole point is that its left edge
+ * is straight. And a line count the screen reserved has to be the line count
+ * the screen draws, which it is only if the screen is the one wrapping.
+ */
+function WrappedLines({ text, width, color, }) {
+    return (_jsx(_Fragment, { children: wrapChoiceText(text, width).map((line, at) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: wrapped lines have no identity beyond their order.
+        _jsx(Text, { color: color, children: line || ' ' }, at))) }));
+}
+/**
+ * The same, for a sentence that names a key the operator presses.
+ *
+ * The key is picked out in the accent colour wherever the wrap puts it, which
+ * is why this splits the line it wrapped rather than the text it was given: a
+ * span placed before wrapping is a span the wrap can move.
+ */
+function HintLines({ text, keyLetter, width, color, }) {
+    return (_jsx(_Fragment, { children: wrapChoiceText(text, width).map((line, at) => {
+            const words = line.split(' ');
+            const key = words.indexOf(keyLetter);
+            if (key < 0) {
+                // biome-ignore lint/suspicious/noArrayIndexKey: wrapped lines have no identity beyond their order.
+                return (_jsx(Text, { color: color, children: line }, at));
+            }
+            // biome-ignore lint/suspicious/noArrayIndexKey: wrapped lines have no identity beyond their order.
+            return (_jsxs(Text, { color: color, children: [`${words.slice(0, key).join(' ')}${key > 0 ? ' ' : ''}`, _jsx(Text, { color: theme.accent.system, children: keyLetter }), key < words.length - 1 ? ` ${words.slice(key + 1).join(' ')}` : ''] }, at));
+        }) }));
+}
+/**
+ * A row's third column, wrapped to the columns the row has left for it.
+ *
+ * Wrapped here rather than by the renderer because a row's height is part of
+ * the box's height, and the row window budgets in lines: Ink wrapping a row the
+ * screen had measured as one line tall is exactly how the box grew past the
+ * terminal and pushed its own header off the top. The count below draws the
+ * same lines it measures, so the two cannot disagree.
+ */
+function rowSourceLines(row, contentWidth, currentMark = '') {
+    const text = row.detected.length > 0 ? rowSourceText(row) : (rowCredentialNeed(row) ?? '');
+    const available = Math.max(1, rowMarkPlacement(contentWidth, currentMark).sourceColumns);
+    return capChoiceLines(wrapChoiceText(text, available), MAX_SOURCE_LINES, available);
+}
+/**
+ * Where a row's `← current` mark goes at this width, and what it leaves the
+ * source.
+ *
+ * Inline while the source keeps enough columns to be readable, and on a line of
+ * its own when it does not. The mark is twelve columns, and at 60 columns
+ * sharing the line with it left the source nine — which broke
+ * `DEEPSEEK_API_KEY` across three lines to say what the operator already knew
+ * from choosing this row.
+ */
+function rowMarkPlacement(contentWidth, currentMark) {
+    const width = contentWidth - ROW_PREFIX_WIDTH;
+    if (currentMark === '')
+        return { inline: false, sourceColumns: width };
+    const shares = width - choiceDisplayWidth(currentMark) >= MIN_SOURCE_COLUMNS;
+    return {
+        inline: shares,
+        sourceColumns: Math.max(1, width - (shares ? choiceDisplayWidth(currentMark) : 0)),
+    };
+}
+/**
+ * The lines one row occupies at this width.
+ *
+ * A row that carries the mark on a line below its source is one line taller,
+ * which is why the placement is decided by a function both the measurement and
+ * the renderer call: a height the box did not reserve is the header scrolled off
+ * the top of the terminal.
+ */
+function rowHeight(row, contentWidth, currentMark = '') {
+    const lines = rowSourceLines(row, contentWidth, currentMark).length;
+    const below = currentMark !== '' && !rowMarkPlacement(contentWidth, currentMark).inline;
+    return below ? lines + 1 : lines;
+}
+/**
+ * The rows that fit a line budget, with the row under the cursor among them.
+ *
+ * A window over ROWS and a budget in LINES, because a row is one line only
+ * while its source column fits beside the label. The cursor's row is always
+ * drawn whole — a cursor scrolled out of its own window is a screen the arrows
+ * cannot explain — and the rows around it fill what is left, half the budget
+ * above it when there is that much to show.
+ */
+function rowWindow(rows, cursor, budget, contentWidth) {
+    if (rows.length === 0)
+        return { start: 0, items: [] };
+    // The row under the cursor is the marked one when a provider is in force, and
+    // a marked row may be a line taller: see `rowHeight`.
+    const marked = rows[Math.max(0, Math.min(cursor, rows.length - 1))];
+    const heights = rows.map((row) => rowHeight(row, contentWidth, row === marked ? CURRENT_MARK : ''));
+    const at = Math.max(0, Math.min(cursor, rows.length - 1));
+    let start = at;
+    let used = heights[at] ?? 1;
+    const half = Math.max(1, Math.floor(budget / 2));
+    while (start > 0 && used < half && used + (heights[start - 1] ?? 1) <= budget) {
+        start -= 1;
+        used += heights[start] ?? 1;
+    }
+    let end = at + 1;
+    while (end < rows.length && used + (heights[end] ?? 1) <= budget) {
+        used += heights[end] ?? 1;
+        end += 1;
+    }
+    return { start, items: rows.slice(start, end) };
+}
+/**
+ * What a detected row's third column says: where what it found came from.
+ *
+ * Every source is named, not the first one. A vendor reached two ways at once —
+ * an exported key and a signed-in session — has two usable credentials, and
+ * naming one of them would be the row choosing for an operator who has not
+ * chosen anything yet. `+` joins them because the sources are joined by ` · `
+ * internally, and a list of four items reads as four discoveries.
+ */
+function rowSourceText(row) {
+    const text = row.detected.map(describeSource).join(' + ');
+    return rowIsUsable(row) ? text : `${text} · unavailable in this build`;
+}
+/**
+ * One way in, as the line that offers it.
+ *
+ * Each line borrows the wording of the screen it leads to — "Use existing …" is
+ * the sign-in screen's phrase for a session already on the device, "Sign in to …
+ * · device code" is its phrase for a new one, "a credential for …" is the paste
+ * field's title — so the operator recognises where a line goes before pressing
+ * enter on it.
+ */
+function describePath(path) {
+    switch (path.kind) {
+        case 'detected':
+            return `Use existing ${path.detected.entry.label} · ${describeSource(path.detected)}`;
+        case 'credential':
+            return `Enter a credential for ${path.entry.label} · ${credentialNeed(path.entry)}`;
+        case 'sign-in':
+            return `Sign in to ${path.entry.label} · ${path.entry.subscriptionLogin === 'device' ? 'device code' : 'browser'}`;
+    }
 }
 function describeSource(d) {
     switch (d.source.kind) {