@tianmucreations/jeeves 0.2.0 → 0.3.0

package/dist/components/Footer.js

@@ -1,114 +1,86 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { Box, Text } from 'ink';
-import { useSession, DEFAULT_CONTEXT_TOKENS } from '../state/session.js';
-import { UsageBar, usageFraction, usageColor, benefitColor } from './UsageBar.js';
+import { Box, Text, useStdout } from 'ink';
+import { useSession } from '../state/session.js';
+import { allowanceToday } from '../agent/spending.js';
+import { isAuto, workerModel } from '../agent/auto.js';
+import { isDirectService, CUSTOM_SERVICE_ID } from '../providers/direct-services.js';
 export function shortModelName(model) {
     const short = model.split('/').pop();
     return short && short.length > 0 ? short : model;
 }
-export function compactNumber(value) {
-    if (value >= 1_000_000)
-        return `${(value / 1_000_000).toFixed(1)}M`;
-    if (value >= 1000)
-        return `${(value / 1000).toFixed(1)}k`;
-    return `${Math.round(value)}`;
-}
-function pct(fraction) {
-    return `${Math.round(fraction * 100)}%`;
-}
-function forecastContext(contextTokens, tokensPerMinute) {
-    if (tokensPerMinute <= 0 || contextTokens <= 0)
-        return '';
-    const minutes = (DEFAULT_CONTEXT_TOKENS - contextTokens) / tokensPerMinute;
-    if (minutes <= 0 || minutes > 600)
-        return '';
-    return `~${Math.max(1, Math.round(minutes))}m left`;
-}
-function forecastRateReset(resetEpochSeconds) {
-    if (!resetEpochSeconds)
-        return '';
-    const seconds = resetEpochSeconds - Date.now() / 1000;
-    if (seconds <= 0 || seconds > 3600)
-        return '';
-    return `resets in ${Math.max(1, Math.round(seconds / 60))}m`;
-}
-export function Footer() {
-    const s = useSession();
-    const contextTokens = s.estimateContextTokens();
-    const tpm = s.tokensPerMinute();
-    const cacheRate = s.cacheHitRate();
-    if (s.footerExpanded !== null) {
-        let bar = {
-            label: 'context',
-            value: contextTokens,
-            max: DEFAULT_CONTEXT_TOKENS,
-            suffix: forecastContext(contextTokens, tpm),
-        };
-        if (s.footerExpanded === 'session') {
-            bar = { label: 'session', value: s.tokensIn + s.tokensOut, max: DEFAULT_CONTEXT_TOKENS, suffix: '' };
-        }
-        else if (s.footerExpanded === 'cache' && cacheRate !== null) {
-            bar = {
-                label: 'cache',
-                value: s.tokensCached,
-                max: s.tokensIn,
-                unit: 'of input read from cache',
-                suffix: '',
-                goodWhenFull: true,
-            };
-        }
-        else if (s.footerExpanded === 'today' && s.spend > 0 && s.creditLimit) {
-            bar = { label: 'today', value: s.spend, max: s.creditLimit, suffix: '' };
-        }
-        else if (s.footerExpanded === 'credit' && s.creditRemaining !== null && s.creditLimit) {
-            bar = {
-                label: 'credit',
-                value: s.creditLimit - s.creditRemaining,
-                max: s.creditLimit,
-                unit: 'used',
-                suffix: `· $${s.creditRemaining.toFixed(2)} ${s.creditIsAccount ? 'left' : 'key cap'}`,
-            };
-        }
-        else if (s.footerExpanded === 'speed' && s.rateLimit && s.rateLimit.limit > 0) {
-            bar = {
-                label: 'speed',
-                value: s.rateLimit.limit - s.rateLimit.remaining,
-                max: s.rateLimit.limit,
-                suffix: forecastRateReset(s.rateLimit.reset),
-            };
-        }
-        return (_jsxs(Box, { justifyContent: "space-between", children: [_jsx(Text, { dimColor: true, children: shortModelName(s.model) }), _jsxs(Text, { dimColor: true, children: [_jsx(UsageBar, { label: bar.label, value: bar.value, max: bar.max, unit: bar.unit, width: 20, goodWhenFull: bar.goodWhenFull }), bar.suffix ? _jsxs(Text, { dimColor: true, children: [" ", bar.suffix] }) : null] })] }));
+const money = (value) => `$${value.toFixed(2)}`;
+// The info bar says only what is worth a glance: which model is working (left),
+// and on the right what today has cost and what is left - or, for a flat-rate
+// plan, whether it has allowance. Warnings appear only when they matter.
+export function footerSegments(info) {
+    const busy = info.busyNote ?? (info.tidying ? 'tidying up…' : null);
+    const direct = isDirectService(info.providerId);
+    if (busy && info.providerId !== 'openrouter' && !direct)
+        return [{ text: busy }];
+    if (info.providerId === 'zai') {
+        if (info.planResetAt === null)
+            return [{ text: 'flat-rate plan' }];
+        const when = info.planResetAt ? ` · resets @ ${info.planResetAt}` : '';
+        return [{ text: `plan used up${when}`, color: 'red' }];
     }
-    // The compact view shows every metric at all times - nothing needs a key press.
-    const sessionFraction = usageFraction(s.tokensIn + s.tokensOut, DEFAULT_CONTEXT_TOKENS);
-    const contextFraction = usageFraction(contextTokens, DEFAULT_CONTEXT_TOKENS);
+    if (info.providerId === 'ollama') {
+        return [{ text: 'on this computer · free' }];
+    }
+    // A compatible service lists no prices, so its spending can't be worked out.
+    if (info.providerId === CUSTOM_SERVICE_ID) {
+        return [{ text: 'cost not tracked' }];
+    }
+    const spent = info.todaySpend ?? 0;
+    // Compared in whole cents, so $2.40 of $3.00 is exactly 80%.
+    const cents = Math.round(spent * 100);
+    const limitCents = Math.round(info.allowance * 100);
     const segments = [
         {
-            key: 'session',
-            render: _jsxs(Text, { color: usageColor(sessionFraction), children: ["sess ", pct(sessionFraction)] }),
-        },
-        {
-            key: 'context',
-            render: _jsxs(Text, { color: usageColor(contextFraction), children: ["ctx ", pct(contextFraction)] }),
-        },
-        {
-            key: 'cache',
-            render: cacheRate === null ? (_jsx(Text, { children: "cache \u2014" })) : (_jsxs(Text, { color: benefitColor(cacheRate), children: ["cache ", pct(cacheRate)] })),
-        },
-        {
-            key: 'today',
-            render: _jsxs(Text, { children: ["today $", s.spend.toFixed(2)] }),
-        },
-        {
-            key: 'credit',
-            render: (_jsx(Text, { children: s.creditRemaining !== null
-                    ? s.creditIsAccount
-                        ? `$${s.creditRemaining.toFixed(2)} left`
-                        : `$${s.creditRemaining.toFixed(2)} key cap`
-                    : '$— left' })),
+            // "~": worked out from the company's price list, not reported by it.
+            text: `today ${direct ? '~' : ''}${info.todaySpend === null ? '$—' : money(spent)} of ${money(info.allowance)}`,
+            color: cents >= limitCents ? 'red' : cents * 10 >= limitCents * 8 ? 'yellow' : undefined,
         },
     ];
-    const visible = segments.filter((segment) => !s.hiddenMetrics.includes(segment.key));
-    return (_jsxs(Box, { justifyContent: "space-between", children: [_jsx(Text, { dimColor: true, children: shortModelName(s.model) }), _jsxs(Text, { dimColor: true, children: [visible.map((segment, index) => (_jsxs(React.Fragment, { children: [index > 0 ? ' · ' : null, segment.render] }, segment.key))), visible.length > 0 ? ' · ' : null, _jsxs(Text, { children: [compactNumber(tpm), " tpm"] })] })] }));
+    if (busy)
+        segments.unshift({ text: busy });
+    // The companies don't tell a key what credit is left.
+    if (direct)
+        return segments;
+    if (info.creditRemaining === null) {
+        segments.push({ text: '$— left' });
+        return segments;
+    }
+    const remaining = info.creditRemaining;
+    const color = remaining < 1 ? 'red' : remaining < 5 ? 'yellow' : undefined;
+    segments.push({ text: `${money(remaining)} ${info.creditIsAccount ? 'left' : 'key limit'}`, color });
+    if (remaining < 1)
+        segments.push({ text: 'credit low - top up', color: 'red' });
+    return segments;
+}
+// The model name gives way first so the right side never wraps the bar.
+export function fitModelName(name, available) {
+    if (available <= 1)
+        return '';
+    return name.length <= available ? name : name.slice(0, available - 1) + '…';
+}
+export function Footer() {
+    const s = useSession();
+    const { stdout } = useStdout();
+    const columns = Math.max(stdout.columns ?? 80, 40);
+    const segments = footerSegments({
+        providerId: s.providerId,
+        allowance: allowanceToday(),
+        tidying: s.tidying,
+        busyNote: s.busyNote,
+        todaySpend: s.todaySpend,
+        creditRemaining: s.creditRemaining,
+        creditIsAccount: s.creditIsAccount,
+        planResetAt: s.planResetAt,
+    });
+    const rightWidth = segments.reduce((sum, segment) => sum + segment.text.length, 0) + 3 * (segments.length - 1);
+    // In Auto mode the bar names the model actually working: "auto · deepseek-v4-flash-0731".
+    const name = isAuto(s.model) ? `auto · ${shortModelName(s.activeModel ?? workerModel())}` : shortModelName(s.model);
+    const model = fitModelName(name, columns - rightWidth - 2);
+    return (_jsxs(Box, { justifyContent: "space-between", children: [_jsx(Text, { children: model }), _jsx(Text, { children: segments.map((segment, index) => (_jsxs(React.Fragment, { children: [index > 0 ? _jsx(Text, { dimColor: true, children: " \u00B7 " }) : null, _jsx(Text, { color: segment.color, dimColor: !segment.color, children: segment.text })] }, segment.text))) })] }));
 }

package/dist/components/Input.js

@@ -1,13 +1,51 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { Text, useInput } from 'ink';
+import { useEffect, useRef, useState } from 'react';
+import { Text, useCursor, useInput, useStdout } from 'ink';
 import { runTurn } from '../agent/loop.js';
 import { answerApproval } from '../agent/permissions.js';
 import { useSession } from '../state/session.js';
-export function Input({ scrollPage = 10 }) {
+import { BLOCK_CURSOR, inputFrameRow } from '../ink/cursor.js';
+import { isMouseSequence, handleMouseInput } from '../ink/mouse.js';
+import { inputView, dropLastChar } from './input-layout.js';
+export function Input({ scrollPage = 10, width = 76 }) {
     const [value, setValue] = useState('');
+    // The text lives in a ref as well as state: the keystroke handler reads and
+    // writes the ref, so two keys arriving before React re-renders never build on
+    // a stale value.
+    const valueRef = useRef('');
     const s = useSession();
+    const { stdout } = useStdout();
+    const { setCursorPosition } = useCursor();
+    const view = inputView(valueRef.current, width);
+    const showingText = !s.approvalPending && s.transcriptScrollUp === 0;
+    // The block cursor sits at the text insertion point: two columns in (the
+    // border's │ and its padding space) plus the visible text's width, measured
+    // with stringWidth so wide characters count. y is the input row, third from
+    // the bottom (info bar, bottom border, input); inputFrameRow carries the +1
+    // Ink's fullscreen frames need. Set during render, as Ink documents: useCursor
+    // hands the position to Ink in its own useInsertionEffect, which runs before
+    // this commit's frame is written - a useLayoutEffect call runs after that and
+    // only lands a frame late (measured: the cursor stayed hidden when the window
+    // opened). Hidden while the row shows a hint instead of the text.
+    setCursorPosition(showingText ? { x: 2 + view.width, y: inputFrameRow(stdout.rows ?? 24) } : undefined);
+    // The terminal's real cursor becomes a steady block for the whole session; it is
+    // restored to the shell's default shape by the AlternateScreen exit paths.
+    useEffect(() => {
+        try {
+            process.stdout.write(BLOCK_CURSOR);
+        }
+        catch {
+            // A closed stream must never crash the app.
+        }
+    }, []);
     useInput((input, key) => {
+        // SGR mouse events arrive as CSI chunks Ink cannot resolve; the wheel
+        // scrolls the transcript and every other mouse event is consumed here so
+        // none of it ever lands in the text.
+        if (isMouseSequence(input)) {
+            handleMouseInput(input);
+            return;
+        }
         if (s.pickerOpen || s.keysOpen || s.wizardActive || s.helpOpen)
             return;
         if (s.approvalPending) {
@@ -26,25 +64,9 @@ export function Input({ scrollPage = 10 }) {
             s.toggleShowLastReasoning();
             return;
         }
-        if (key.tab) {
-            s.tabFooter();
-            return;
-        }
-        if (key.escape) {
-            s.escapeFooter();
-            return;
-        }
-        if (key.return) {
-            const text = value.trim();
-            if (text && s.status !== 'working') {
-                setValue('');
-                s.followTranscript();
-                void runTurn(text);
-            }
-            return;
-        }
-        // The terminal's own scrollback is off (alternate screen), so the arrow and
-        // page keys scroll the transcript region instead, three lines per press.
+        // The alternate screen has no native scrollback, so these keys scroll the
+        // transcript region itself (Claude Code's bindings): arrows move 3 rows,
+        // Page Up/Down a full page, End jumps back to the newest and re-follows.
         if (key.upArrow) {
             s.scrollTranscript(3);
             return;
@@ -61,16 +83,45 @@ export function Input({ scrollPage = 10 }) {
             s.scrollTranscript(-scrollPage);
             return;
         }
+        if (key.end) {
+            s.followTranscript();
+            return;
+        }
+        // Anything typed while reading history returns to the newest first.
+        if (key.return) {
+            const text = valueRef.current.trim();
+            // /exit is honoured even mid-turn so a wedged request can never trap the user.
+            if (text === '/exit' || (text && s.status !== 'working')) {
+                s.followTranscript();
+                valueRef.current = '';
+                setValue('');
+                void runTurn(text);
+            }
+            return;
+        }
         if (key.backspace || key.delete) {
-            setValue((v) => v.slice(0, -1));
+            s.followTranscript();
+            valueRef.current = dropLastChar(valueRef.current);
+            setValue(valueRef.current);
             return;
         }
         if (!input || key.ctrl || key.meta)
             return;
-        setValue((v) => v + input);
+        s.followTranscript();
+        valueRef.current += input;
+        setValue(valueRef.current);
     });
     if (s.approvalPending) {
         return _jsx(Text, { color: "yellow", children: "y = allow \u00B7 n = deny" });
     }
-    return (_jsxs(Text, { children: [_jsx(Text, { bold: true, children: '> ' }), value ? _jsx(Text, { children: value }) : _jsx(Text, { dimColor: true, children: "ask anything" })] }));
+    // While the transcript is scrolled away from the newest, the prompt is replaced
+    // by Claude Code's reading-history hint; End (or any typing) returns to the live
+    // conversation.
+    if (s.transcriptScrollUp > 0) {
+        return _jsx(Text, { dimColor: true, children: "reading history \u2014 press End to return" });
+    }
+    // Trailing spaces are dimmed: invisible on screen, but it makes the frame's
+    // bytes differ from the same text without them, keeping Ink on its full-frame
+    // path (see input-layout.ts).
+    return (_jsx(Text, { children: value ? (_jsxs(Text, { children: [view.text, view.trailingSpaces ? _jsx(Text, { dimColor: true, children: view.trailingSpaces }) : null] })) : (_jsx(Text, { dimColor: true, children: "ask anything" })) }));
 }

package/dist/components/KeysManager.js

@@ -2,16 +2,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from 'react';
 import { Box, Text, useInput } from 'ink';
 import { session, useSession } from '../state/session.js';
-import { PROVIDER_ROWS, storeOpenRouterKey, removeOpenRouterKey, storeZaiKey, removeZaiKey, storedKeyProviders, getKeySource, refreshCredit, } from '../providers/index.js';
+import { PROVIDER_ROWS, storeOpenRouterKey, removeOpenRouterKey, storeZaiKey, removeZaiKey, storedKeyProviders, getKeySource, refreshCredit, storeDirectKey, removeServiceKey, customServiceName, } from '../providers/index.js';
+import { directService, isDirectService, CUSTOM_SERVICE_ID } from '../providers/direct-services.js';
+import { everydayModel } from '../providers/catalogue.js';
+import { setDefaultModel, setDefaultProvider } from '../platform/config.js';
 import { setKey, deleteKey } from '../keys/store.js';
 import { keyLooksValid } from '../commands/keys.js';
-// The keys screen shows one extra row the model picker does not: the optional
-// OpenRouter management key, which unlocks the real account balance.
-const KEY_ROWS = [
-    PROVIDER_ROWS[0],
-    { id: 'openrouter-management', label: 'OpenRouter (account)' },
-    ...PROVIDER_ROWS.slice(1),
-];
+import { isMouseSequence } from '../ink/mouse.js';
+// Every service Jeeves connects to. The optional OpenRouter management key (it unlocks
+// the real account balance) is for /keys only, and the compatible service needs its
+// address too, so it is set up in /model - the first-run wizard keeps to the essentials.
+const KEY_ROWS = [PROVIDER_ROWS[0], { id: 'openrouter-management', label: 'OpenRouter account' }, ...PROVIDER_ROWS.slice(1)];
+const WIZARD_ROWS = KEY_ROWS.filter((row) => row.id !== 'openrouter-management' && row.id !== CUSTOM_SERVICE_ID);
 function rowLabel(id) {
     return KEY_ROWS.find((row) => row.id === id)?.label ?? id;
 }
@@ -19,6 +21,7 @@ export function KeysManager({ mode, rows, columns }) {
     const s = useSession();
     const [phase, setPhase] = useState(mode === 'wizard' ? { kind: 'ask' } : { kind: 'list' });
     const [cursor, setCursor] = useState(0);
+    const visibleRows = mode === 'wizard' ? WIZARD_ROWS : KEY_ROWS;
     const [hidden, setHidden] = useState('');
     const [stored, setStored] = useState([]);
     const [note, setNote] = useState('');
@@ -33,7 +36,7 @@ export function KeysManager({ mode, rows, columns }) {
             if (getKeySource() === 'keychain')
                 return 'key stored in your Mac keychain';
             if (getKeySource() === 'env')
-                return 'key in the .env development file';
+                return 'key in a local file - add it with /keys to store it safely';
             return stored.includes('openrouter') ? 'key stored in your Mac keychain' : 'no key';
         }
         if (rowId === 'openrouter-management') {
@@ -45,8 +48,11 @@ export function KeysManager({ mode, rows, columns }) {
             return stored.includes('zai') ? 'key stored - GLM Coding Plan ready' : 'no key - add one to use the flat plan';
         }
         if (rowId === 'ollama')
-            return 'local - no key needed';
-        return stored.includes(rowId) ? 'key saved - direct connection coming' : 'add key with /keys';
+            return 'runs on this computer - no key needed';
+        if (rowId === CUSTOM_SERVICE_ID) {
+            return stored.includes(rowId) ? `${customServiceName()} - address and key stored` : 'add it in /model, under Other service';
+        }
+        return stored.includes(rowId) ? 'key stored - direct connection ready' : 'no key';
     }
     function finishWizard(message, connected) {
         if (connected) {
@@ -93,6 +99,37 @@ export function KeysManager({ mode, rows, columns }) {
             }
             return;
         }
+        if (isDirectService(provider)) {
+            const label = directService(provider).label;
+            setNote(`Checking the key with ${label}…`);
+            const result = await storeDirectKey(provider, key);
+            setNote('');
+            if (result === 'rejected') {
+                setNote(`${label} didn't accept that key - press Enter to paste it again.`);
+                return;
+            }
+            if (result === 'keychain') {
+                setNote('The Mac keychain was not reachable - press Enter and try again.');
+                return;
+            }
+            refreshStored();
+            const unchecked = result === 'saved-unchecked' ? ` ${label} couldn't be reached to check it just now.` : '';
+            if (mode === 'wizard') {
+                // First launch: start straight away on the company's everyday model.
+                const model = await everydayModel(provider, key);
+                if (model) {
+                    session.setProvider(provider);
+                    session.setModel(model);
+                    setDefaultProvider(provider);
+                    setDefaultModel(model);
+                }
+                finishWizard(`Your ${label} key is saved.${unchecked} Jeeves will use ${model ?? 'its everyday model'} - type /model to change.`, true);
+            }
+            else {
+                setPhase({ kind: 'saved', message: `Your ${label} key is saved.${unchecked} Choose ${label} in /model to use it.` });
+            }
+            return;
+        }
         const saved = await setKey(provider, key);
         if (!saved) {
             setNote('The Mac keychain was not reachable - press Enter and try again.');
@@ -123,7 +160,7 @@ export function KeysManager({ mode, rows, columns }) {
             const fallback = await removeOpenRouterKey();
             refreshStored();
             const message = fallback === 'env'
-                ? 'The key was removed from your keychain - the .env development key is still active.'
+                ? 'The key was removed from your keychain - a key in a local file is still being used.'
                 : 'The key was removed. You are signed out until a new key is added.';
             if (fallback !== 'env')
                 session.setStatus('disconnected');
@@ -140,14 +177,18 @@ export function KeysManager({ mode, rows, columns }) {
             await deleteKey(provider);
             refreshStored();
             void refreshCredit();
-            setPhase({ kind: 'saved', message: 'The management key was removed - the info bar shows the key cap again.' });
+            setPhase({ kind: 'saved', message: "The management key was removed - the info bar shows the key's spending limit again." });
             return;
         }
-        await deleteKey(provider);
+        await removeServiceKey(provider);
         refreshStored();
+        if (session.providerId === provider)
+            session.setStatus('disconnected');
         setPhase({ kind: 'saved', message: `The saved key for ${rowLabel(provider)} was removed.` });
     }
     useInput((input, key) => {
+        if (isMouseSequence(input))
+            return;
         if (phase.kind === 'ask') {
             const answer = input.toLowerCase();
             if (answer === 'y') {
@@ -226,14 +267,18 @@ export function KeysManager({ mode, rows, columns }) {
             return;
         }
         if (key.downArrow) {
-            setCursor((current) => Math.min(KEY_ROWS.length - 1, current + 1));
+            setCursor((current) => Math.min(visibleRows.length - 1, current + 1));
             return;
         }
         if (key.return) {
-            const row = KEY_ROWS[cursor];
+            const row = visibleRows[cursor];
+            if (row?.id === CUSTOM_SERVICE_ID) {
+                setNote('Add it in /model, under Other service - it needs a web address as well as a key.');
+                return;
+            }
             if (!row || row.id === 'ollama') {
                 if (mode === 'wizard' && row?.id === 'ollama') {
-                    finishWizard('Ollama runs locally - no key needed.', false);
+                    finishWizard('Ollama runs on this computer - no key needed.', false);
                 }
                 return;
             }
@@ -244,7 +289,7 @@ export function KeysManager({ mode, rows, columns }) {
         }
         const answer = input.toLowerCase();
         if (answer === 'd') {
-            const row = KEY_ROWS[cursor];
+            const row = visibleRows[cursor];
             if (!row)
                 return;
             const hasStored = stored.includes(row.id) || (row.id === 'openrouter' && getKeySource() !== null);
@@ -263,7 +308,7 @@ export function KeysManager({ mode, rows, columns }) {
                 : phase.kind === 'saved'
                     ? 'Saved'
                     : mode === 'wizard'
-                        ? 'Which provider should provide your AI?'
+                        ? 'Which AI service should do the thinking?'
                         : 'Keys - stored in your Mac keychain';
     const hint = phase.kind === 'ask'
         ? 'y = yes · n = not now'
@@ -277,5 +322,5 @@ export function KeysManager({ mode, rows, columns }) {
                         ? '↑↓ move · Enter choose · Esc back'
                         : '↑↓ move · Enter add or replace · d remove · Esc close';
     return (_jsxs(Box, { flexDirection: "column", height: rows, children: [_jsx(Text, { dimColor: true, children: title }), _jsxs(Box, { flexDirection: "column", flexGrow: 1, justifyContent: "center", children: [phase.kind === 'ask' && _jsx(Text, { children: '  Add an API key?' }), phase.kind === 'list' &&
-                        KEY_ROWS.map((row, index) => (_jsxs(Text, { inverse: index === cursor, children: [`${row.label}`.padEnd(14), _jsx(Text, { dimColor: true, children: statusFor(row.id) })] }, row.id))), phase.kind === 'enter-key' && (_jsxs(Text, { children: [_jsxs(Text, { children: ["Paste the ", phase.label, " key (it stays hidden): "] }), _jsx(Text, { inverse: true, children: " " })] })), phase.kind === 'confirm-remove' && (_jsxs(Text, { children: ["Remove the ", phase.label, " key from your Mac keychain? ", _jsxs(Text, { dimColor: true, children: ["(", hint, ")"] })] })), phase.kind === 'saved' && _jsx(Text, { children: phase.message })] }), note ? (_jsx(Text, { color: "yellow", children: note })) : (_jsx(Text, { dimColor: true, children: hint }))] }));
+                        visibleRows.map((row, index) => (_jsxs(Text, { inverse: index === cursor, children: [` ${row.label}`.padEnd(21), _jsx(Text, { dimColor: true, children: statusFor(row.id) })] }, row.id))), phase.kind === 'enter-key' && (_jsxs(Text, { children: [_jsxs(Text, { children: ["Paste the ", phase.label, " key (it stays hidden): "] }), _jsx(Text, { inverse: true, children: " " })] })), phase.kind === 'confirm-remove' && (_jsxs(Text, { children: ["Remove the ", phase.label, " key from your Mac keychain?"] })), phase.kind === 'saved' && _jsx(Text, { children: phase.message })] }), note ? (_jsx(Text, { color: "yellow", children: note })) : (_jsx(Text, { dimColor: true, children: hint }))] }));
 }