@bytevion/cli 0.3.0 → 0.4.0

package/dist/tui/components/App.js

@@ -0,0 +1,129 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useApp, useInput } from 'ink';
+import Spinner from 'ink-spinner';
+import React from 'react';
+import { initialState, reducer, selectSummary } from '../state.js';
+import { glyphs, tones } from '../theme.js';
+import { Brand } from './Brand.js';
+import { DoneScreen } from './DoneScreen.js';
+import { KeyStep } from './KeyStep.js';
+import { Picker } from './Picker.js';
+import { PresetStep } from './PresetStep.js';
+import { ProviderStep } from './ProviderStep.js';
+import { Stepper } from './Stepper.js';
+// Tools offered at the integrate step — mirrors the clack setup list so both paths wire the
+// same harnesses.
+const TOOLS = [
+    { value: 'skip', label: 'Skip for now' },
+    { value: 'opencode', label: 'opencode' },
+    { value: 'claude-code', label: 'Claude Code' },
+    { value: 'codex', label: 'Codex CLI' },
+    { value: 'cursor', label: 'Cursor' },
+    { value: 'cline', label: 'Cline' },
+    { value: 'aider', label: 'Aider' },
+];
+// The wizard root. Owns the reducer + all side effects (it calls the ports and dispatches the
+// results), draws the brand + 8-step stepper + the active step, and resolves the island Promise
+// via onDone. Ctrl-C / Esc at any step → {status:'cancelled'} so nothing is half-applied
+// without the user knowing.
+export function App({ plainColor, ascii, version, initial, ports, providerPresets, presetCards, onDone, }) {
+    const g = glyphs(ascii);
+    const tone = tones(plainColor);
+    const { exit } = useApp();
+    const [state, dispatch] = React.useReducer(reducer, initial, initialState);
+    const finish = React.useCallback((result) => {
+        exit();
+        onDone(result);
+    }, [exit, onDone]);
+    useInput((input, key) => {
+        if (key.escape || (key.ctrl && input === 'c'))
+            finish({ status: 'cancelled' });
+    });
+    // ---- welcome: Enter to begin (skip sign-in if already authed) ----
+    const beginWelcome = React.useCallback(() => {
+        dispatch({ type: 'GOTO', step: initial.signedIn ? 'provider' : 'signin' });
+    }, [initial.signedIn]);
+    // ---- sign-in: run the device-login port ----
+    const runSignIn = React.useCallback(async () => {
+        dispatch({ type: 'BUSY', busy: true });
+        try {
+            const r = await ports.signIn();
+            dispatch({ type: 'SIGNED_IN', email: r.email });
+        }
+        catch (err) {
+            dispatch({ type: 'ERROR', from: 'signin', message: err?.message ?? String(err) });
+        }
+    }, [ports]);
+    // ---- key: create via the port, reveal once ----
+    const createKey = React.useCallback(async (name) => {
+        dispatch({ type: 'BUSY', busy: true });
+        try {
+            const r = await ports.createByteKey(name, state.preset);
+            dispatch({ type: 'KEY_CREATED', key: r.key });
+        }
+        catch (err) {
+            dispatch({ type: 'ERROR', from: 'key', message: err?.message ?? String(err) });
+        }
+    }, [ports, state.preset]);
+    // ---- preset: apply to the org, then advance ----
+    const applyPreset = React.useCallback(async (preset) => {
+        dispatch({ type: 'BUSY', busy: true });
+        try {
+            await ports.applyPreset(preset);
+        }
+        catch {
+            // The clack path also treats this as best-effort; never block the wizard on it.
+        }
+        dispatch({ type: 'PICK_PRESET', preset });
+    }, [ports]);
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Brand, { ascii: ascii, plainColor: plainColor, version: version }), _jsx(Box, { marginTop: 1, children: _jsx(Stepper, { current: state.step, ascii: ascii, plainColor: plainColor }) }), _jsx(Box, { marginTop: 1, flexDirection: "column", children: _jsx(StepBody, { state: state, ascii: ascii, plainColor: plainColor, version: version, ports: ports, providerPresets: providerPresets, presetCards: presetCards, tools: TOOLS, dispatch: dispatch, onBeginWelcome: beginWelcome, onSignIn: runSignIn, onCreateKey: createKey, onApplyPreset: applyPreset, onFinish: finish, glyphArrow: g.arrow, glyphBullet: g.bullet, muted: tone.muted, accent: tone.accent, bad: tone.bad }) }), state.error ? (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: tone.bad, children: `${g.bullet} ${state.error.message}` }) })) : null, _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: tone.muted, children: `esc cancel  ${g.divider}  Byte never claims success it can't prove` }) })] }));
+}
+// Step router. Kept as a plain function (not a component) so the parent owns all hooks/state and
+// the per-step UI stays declarative.
+function StepBody(props) {
+    const { state, ascii, plainColor, version, ports, providerPresets, presetCards, tools, dispatch, onBeginWelcome, onSignIn, onCreateKey, onApplyPreset, onFinish, muted, accent, } = props;
+    switch (state.step) {
+        case 'welcome':
+            return _jsx(WelcomeStep, { signedIn: state.signedIn, email: state.email, accent: accent, muted: muted, onBegin: onBeginWelcome });
+        case 'signin':
+            return _jsx(SignInStep, { busy: state.busy, ascii: ascii, accent: accent, muted: muted, onSignIn: onSignIn });
+        case 'provider':
+            return (_jsx(ProviderStep, { presets: providerPresets, ports: ports, ascii: ascii, plainColor: plainColor, busy: state.busy, error: state.error?.from === 'provider' ? state.error.message : undefined, onConnected: (r) => dispatch({ type: 'PROVIDER_RESULT', status: r.status, models: r.models, connId: r.connId }), onSkip: () => dispatch({ type: 'PROVIDER_SKIP' }), onBusy: (busy) => dispatch({ type: 'BUSY', busy }), onError: (message) => dispatch({ type: 'ERROR', from: 'provider', message }) }));
+        case 'model':
+            return (_jsx(ModelStep, { models: state.models, ascii: ascii, plainColor: plainColor, accent: accent, muted: muted, onPick: (model) => dispatch({ type: 'PICK_MODEL', model }) }));
+        case 'key':
+            return (_jsx(KeyStep, { ascii: ascii, plainColor: plainColor, busy: state.busy, preset: state.preset, byteKey: state.byteKeyRevealed ? state.byteKey : undefined, existingKey: !state.byteKeyRevealed ? state.byteKey : undefined, onCreate: onCreateKey, onContinue: () => dispatch({ type: 'NEXT' }) }));
+        case 'preset':
+            return (_jsx(PresetStep, { cards: presetCards, ascii: ascii, plainColor: plainColor, busy: state.busy, initial: state.preset, onSelect: onApplyPreset }));
+        case 'integrate':
+            return (_jsx(IntegrateStep, { tools: tools, ascii: ascii, plainColor: plainColor, accent: accent, muted: muted, onPick: (connect) => dispatch({ type: 'PICK_CONNECT', connect }) }));
+        case 'done':
+            return (_jsx(DoneScreen, { summary: selectSummary(state), ascii: ascii, plainColor: plainColor, version: version, onClose: () => onFinish({ status: 'done', summary: selectSummary(state) }) }));
+        default:
+            return _jsx(Text, { children: " " });
+    }
+}
+function WelcomeStep({ signedIn, email, accent, muted, onBegin, }) {
+    useInput((_input, key) => {
+        if (key.return)
+            onBegin();
+    });
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: accent, bold: true, children: "Welcome to Byte" }), _jsx(Text, { color: muted, children: "Sign in, connect a provider, create a key, pick a mode, and wire a tool \u2014 a few keystrokes." }), signedIn ? _jsx(Text, { color: muted, children: `Already signed in${email ? ` as ${email}` : ''}.` }) : null, _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: muted, children: "Press enter to begin" }) })] }));
+}
+function SignInStep({ busy, ascii, accent, muted, onSignIn, }) {
+    useInput((_input, key) => {
+        if (key.return)
+            onSignIn();
+    }, { isActive: !busy });
+    if (busy) {
+        return (_jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { color: accent, children: _jsx(Spinner, { type: ascii ? 'line' : 'dots' }) }), _jsx(Text, { children: " Opening your browser \u2014 approve the device there\u2026" })] }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: accent, bold: true, children: "Sign in" }), _jsx(Text, { color: muted, children: "We'll open your browser for a one-time device approval." }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: muted, children: "Press enter to sign in" }) })] }));
+}
+function ModelStep({ models, ascii, plainColor, accent, muted, onPick, }) {
+    const items = React.useMemo(() => models.slice(0, 50).map((m) => ({ value: m.byte_alias, label: m.byte_alias, hint: m.model_id })), [models]);
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: accent, bold: true, children: "Default model" }), _jsx(Text, { color: muted, children: "Pick the model your tools route to by default. Type to filter." }), _jsx(Box, { marginTop: 1, children: _jsx(Picker, { items: items, onSelect: onPick, ascii: ascii, plainColor: plainColor, search: true, searchLabel: "Model" }) })] }));
+}
+function IntegrateStep({ tools, ascii, plainColor, accent, muted, onPick, }) {
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: accent, bold: true, children: "Connect a coding tool" }), _jsx(Text, { color: muted, children: "Wire a harness now, or skip and do it later with `byte integrate`." }), _jsx(Box, { marginTop: 1, children: _jsx(Picker, { items: tools, onSelect: onPick, ascii: ascii, plainColor: plainColor, initialValue: "skip" }) })] }));
+}

package/dist/tui/components/Brand.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface BrandProps {
+    ascii: boolean;
+    plainColor: boolean;
+    version: string;
+    tagline?: string;
+}
+export declare function Brand({ ascii, plainColor, version, tagline }: BrandProps): React.ReactElement;
+export {};

package/dist/tui/components/Brand.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { glyphs, gradient, tones } from '../theme.js';
+// The Byte signature: a dim `›b_` prompt glyph followed by BYTE rendered one character at a
+// time across the cyan→blue gradient, with a muted tagline + version to the right. Under
+// plainColor the gradient collapses to bold plain text; under ascii the glyph swaps to `>b_`.
+export function Brand({ ascii, plainColor, version, tagline = 'optimization gateway' }) {
+    const g = glyphs(ascii);
+    const tone = tones(plainColor);
+    const letters = 'BYTE'.split('');
+    const ramp = gradient(letters.length);
+    return (_jsxs(Box, { flexDirection: "row", alignItems: "center", children: [_jsxs(Text, { children: [_jsx(Text, { color: tone.muted, children: g.brand[0] }), _jsx(Text, { color: tone.accent, bold: true, children: g.brand[1] }), _jsx(Text, { color: tone.muted, children: g.brand[2] })] }), _jsx(Text, { children: " " }), _jsx(Text, { children: letters.map((ch, i) => (_jsx(Text, { bold: true, color: plainColor ? undefined : ramp[i], children: ch }, i))) }), _jsx(Text, { children: "  " }), _jsx(Text, { color: tone.muted, children: tagline }), _jsx(Text, { color: tone.muted, children: `  ·  v${version}` })] }));
+}

package/dist/tui/components/Card.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface CardProps {
+    label: string;
+    hint?: string;
+    blurb?: string;
+    focused: boolean;
+    ascii: boolean;
+    plainColor: boolean;
+}
+export declare function Card({ label, hint, blurb, focused, ascii, plainColor }: CardProps): React.ReactElement;
+export {};

package/dist/tui/components/Card.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { tones } from '../theme.js';
+// A selectable card: when focused it grows a left accent bar and brightens the label; the hint
+// sits inline (dim) and an optional blurb wraps underneath. Unfocused cards stay quiet so the
+// selection reads at a glance. The bar is a solid block (unicode) or '|' (ascii).
+export function Card({ label, hint, blurb, focused, ascii, plainColor }) {
+    const tone = tones(plainColor);
+    const bar = ascii ? '|' : '▌';
+    const accent = focused ? tone.accent : undefined;
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { color: focused ? tone.accent : tone.muted, children: focused ? bar : ' ' }), _jsx(Text, { children: " " }), _jsx(Text, { bold: focused, color: accent, children: label }), hint ? _jsx(Text, { color: tone.muted, children: `  ${hint}` }) : null] }), blurb ? (_jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { children: '   ' }), _jsx(Text, { color: tone.muted, dimColor: true, wrap: "wrap", children: blurb })] })) : null] }));
+}

package/dist/tui/components/DoneScreen.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { WizardSummary } from '../contract.js';
+interface DoneScreenProps {
+    summary: WizardSummary;
+    ascii: boolean;
+    plainColor: boolean;
+    version: string;
+    onClose: () => void;
+}
+export declare function DoneScreen({ summary, ascii, plainColor, version, onClose }: DoneScreenProps): React.ReactElement;
+export {};

package/dist/tui/components/DoneScreen.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useInput } from 'ink';
+import { glyphs, gradient, tones } from '../theme.js';
+import { Brand } from './Brand.js';
+// The celebratory close-out. A big gradient check, a tidy summary of what got wired, and the
+// exact next commands to run. The summary never over-claims: a provider that only saved (no
+// models) says so, and tips adapt accordingly. Enter closes the wizard.
+export function DoneScreen({ summary, ascii, plainColor, version, onClose }) {
+    const g = glyphs(ascii);
+    const tone = tones(plainColor);
+    const ramp = gradient(3);
+    useInput((_input, key) => {
+        if (key.return || key.escape)
+            onClose();
+    });
+    const providerLine = summary.provider === 'connected'
+        ? { color: tone.ok, text: summary.model ? `connected · ${summary.model}` : 'connected' }
+        : summary.provider === 'saved'
+            ? { color: tone.warn, text: 'saved (finish the key/URL, then `byte providers test`)' }
+            : summary.provider === 'failed'
+                ? { color: tone.bad, text: 'failed' }
+                : { color: tone.muted, text: 'skipped' };
+    const tips = ['byte run "hello from byte"', 'byte usage'];
+    if (summary.provider === 'skipped')
+        tips.unshift('byte providers add');
+    if (summary.provider === 'saved')
+        tips.unshift('byte providers test');
+    const Line = ({ label, children }) => (_jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { width: 12, children: _jsx(Text, { color: tone.muted, children: label }) }), _jsx(Text, { children: children })] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { flexDirection: "row", alignItems: "center", children: [_jsx(Text, { bold: true, color: plainColor ? undefined : ramp[0], children: g.check }), _jsx(Text, { children: " " }), _jsx(Text, { bold: true, color: tone.ok, children: "Setup complete." })] }), _jsxs(Box, { marginTop: 1, flexDirection: "column", borderStyle: g.border, borderColor: tone.ok, paddingX: 2, paddingY: 1, children: [_jsx(Brand, { ascii: ascii, plainColor: plainColor, version: version, tagline: "you are wired up" }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Line, { label: "Provider", children: _jsx(Text, { color: providerLine.color, children: providerLine.text }) }), summary.model ? (_jsx(Line, { label: "Model", children: _jsx(Text, { children: summary.model }) })) : null, _jsxs(Line, { label: "Mode", children: [_jsx(Text, { children: summary.preset }), _jsx(Text, { color: tone.muted, children: " applied" })] }), _jsx(Line, { label: "Byte key", children: _jsx(Text, { color: summary.byteKeyCreated ? tone.ok : tone.muted, children: summary.byteKeyCreated ? 'created' : '—' }) }), summary.connect ? (_jsxs(Line, { label: "Tool", children: [_jsx(Text, { color: tone.accent, children: summary.connect }), _jsx(Text, { color: tone.muted, children: " queued" })] })) : null] })] }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: tone.muted, children: "Next" }), tips.map((t) => (_jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { color: tone.accent, children: `  ${g.arrow} ` }), _jsx(Text, { color: tone.accent, children: t })] }, t)))] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: tone.muted, children: "Press enter to finish" }) })] }));
+}

package/dist/tui/components/Home.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { HomeData, HomeResult } from '../contract.js';
+interface HomeProps {
+    signedIn: boolean;
+    data: HomeData;
+    ascii: boolean;
+    plainColor: boolean;
+    version: string;
+    onDone: (result: HomeResult) => void;
+}
+export declare function Home({ signedIn, data, ascii, plainColor, version, onDone }: HomeProps): React.ReactElement;
+export {};

package/dist/tui/components/Home.js

@@ -0,0 +1,144 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useApp, useInput } from 'ink';
+import TextInput from 'ink-text-input';
+import React from 'react';
+import { glyphs, gradient, tones } from '../theme.js';
+import { Brand } from './Brand.js';
+import { Picker } from './Picker.js';
+// Actions that need a single text argument before they can run, with the prompt label and the
+// same defaults the clack menu used — so the Ink path collects them inline rather than firing a
+// command that would fail oclif's required-arg check.
+const NEEDS_INPUT = {
+    run: { label: 'Prompt', placeholder: 'hello from byte', fallback: 'hello from byte' },
+    compare: { label: 'Prompt to compare', placeholder: 'Summarize the latest changes', fallback: 'Summarize the latest changes' },
+    'keys:create': { label: 'Key name', placeholder: 'cli', fallback: 'cli' },
+};
+const fmtUsd = (n) => `$${(Number.isFinite(n) ? n : 0).toFixed(n >= 1 ? 2 : 4)}`;
+const fmtNum = (v) => {
+    const n = Number.isFinite(v) ? v : 0;
+    const abs = Math.abs(n);
+    if (abs >= 1_000_000)
+        return `${(n / 1_000_000).toFixed(1)}M`;
+    if (abs >= 1_000)
+        return `${(n / 1_000).toFixed(1)}K`;
+    return String(Math.round(n));
+};
+const fmtPct = (v) => {
+    if (v === undefined || !Number.isFinite(v))
+        return undefined;
+    const scaled = v <= 1 ? v * 100 : v;
+    return `${scaled.toFixed(1)}%`;
+};
+// Block sparkline driven by the theme ramp. Each value maps to a glyph and gets a per-column
+// color from the cyan→blue gradient so the series reads as a little branded bar chart.
+function Sparkline({ values, ascii, plainColor }) {
+    const g = glyphs(ascii);
+    const nums = values.map((v) => (Number.isFinite(v) ? v : 0));
+    if (!nums.length)
+        return _jsx(Text, { color: tones(plainColor).muted, children: "no activity yet" });
+    const max = Math.max(...nums);
+    const min = Math.min(...nums);
+    const span = max - min || 1;
+    const ramp = gradient(nums.length);
+    return (_jsx(Text, { children: nums.map((v, i) => {
+            const idx = Math.round(((v - min) / span) * (g.spark.length - 1));
+            const ch = g.spark[Math.max(0, Math.min(g.spark.length - 1, idx))];
+            return (_jsx(Text, { color: plainColor ? undefined : ramp[i], children: ch }, i));
+        }) }));
+}
+// Eases the saved-$ figure from 0 → target over ~700ms on mount, a small touch of life when the
+// screen opens. Disabled under ascii/plainColor (and when nothing was saved) so it never
+// animates a static or non-color terminal — those just show the final number immediately.
+function useSavingsTicker(target, animate) {
+    const [value, setValue] = React.useState(animate ? 0 : target);
+    React.useEffect(() => {
+        if (!animate || target <= 0) {
+            setValue(target);
+            return;
+        }
+        const duration = 700;
+        const stepMs = 40;
+        const steps = Math.max(1, Math.round(duration / stepMs));
+        let frame = 0;
+        const id = setInterval(() => {
+            frame += 1;
+            const t = frame / steps;
+            // ease-out cubic
+            const eased = 1 - Math.pow(1 - t, 3);
+            setValue(t >= 1 ? target : target * eased);
+            if (frame >= steps)
+                clearInterval(id);
+        }, stepMs);
+        return () => clearInterval(id);
+    }, [target, animate]);
+    return value;
+}
+const Row = ({ label, children, plainColor }) => {
+    const tone = tones(plainColor);
+    return (_jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { width: 11, children: _jsx(Text, { color: tone.muted, children: label }) }), _jsx(Text, { children: children })] }));
+};
+// The live home dashboard. A bordered card carries identity, providers, the masked key, a
+// gateway health dot, and a 7-day savings sparkline with an animated total; below it a
+// quick-actions Picker resolves to {status:'action'} (run a command) or {status:'exit'}.
+export function Home({ signedIn, data, ascii, plainColor, version, onDone }) {
+    const g = glyphs(ascii);
+    const tone = tones(plainColor);
+    const { exit } = useApp();
+    const hasSavings = data.savingsSeries.some((v) => v > 0) || data.savedTotal > 0;
+    const animate = !ascii && !plainColor && hasSavings;
+    const saved = useSavingsTicker(data.savedTotal, animate);
+    // When a chosen action needs a text argument, we switch into an inline input phase rather than
+    // resolving immediately. null = the quick-actions menu is showing.
+    const [pending, setPending] = React.useState(null);
+    const [inputValue, setInputValue] = React.useState('');
+    // Ctrl-C / Esc / q → exit. Disabled while typing so those chars reach the TextInput. Picker
+    // owns Up/Down/Enter on the menu; this only adds the escapes.
+    useInput((input, key) => {
+        if (key.escape || input === 'q' || (key.ctrl && input === 'c')) {
+            exit();
+            onDone({ status: 'exit' });
+        }
+    }, { isActive: pending === null });
+    const gateway = data.gateway === 'healthy'
+        ? { color: tone.ok, text: 'healthy' }
+        : data.gateway === 'down'
+            ? { color: tone.bad, text: 'unreachable' }
+            : { color: tone.muted, text: 'unknown' };
+    const actions = [
+        { value: 'setup', label: 'Set up Byte', hint: 'guided' },
+        { value: 'providers:add', label: 'Connect a provider' },
+        { value: 'keys:create', label: 'Create a Byte key' },
+        { value: 'integrate', label: 'Connect a tool' },
+        { value: 'run', label: 'Run a test prompt' },
+        { value: 'compare', label: 'Compare direct vs Byte', hint: 'prove the win' },
+        { value: 'usage', label: 'View usage' },
+        { value: signedIn ? 'logout' : 'login', label: signedIn ? 'Sign out' : 'Sign in' },
+        { value: 'exit', label: 'Exit' },
+    ];
+    const onAction = (value) => {
+        if (value === 'exit') {
+            exit();
+            onDone({ status: 'exit' });
+            return;
+        }
+        if (NEEDS_INPUT[value]) {
+            setInputValue('');
+            setPending(value);
+            return;
+        }
+        exit();
+        onDone({ status: 'action', commandId: value, argv: [] });
+    };
+    const submitInput = (commandId, raw) => {
+        const spec = NEEDS_INPUT[commandId];
+        const argv = [raw.trim() || spec.fallback];
+        exit();
+        onDone({ status: 'action', commandId, argv });
+    };
+    // Inline input phase: a single labelled TextInput for run/compare/keys:create.
+    if (pending) {
+        const spec = NEEDS_INPUT[pending];
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: tone.accent, bold: true, children: spec.label }), _jsxs(Box, { marginTop: 1, flexDirection: "row", children: [_jsxs(Text, { color: tone.accent, children: [g.arrow, " "] }), _jsx(TextInput, { value: inputValue, onChange: setInputValue, placeholder: spec.placeholder, onSubmit: (v) => submitInput(pending, v) })] }), _jsx(Text, { color: tone.muted, children: "Enter to run" })] }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { flexDirection: "column", borderStyle: g.border, borderColor: tone.accent, paddingX: 2, paddingY: 1, children: [_jsx(Brand, { ascii: ascii, plainColor: plainColor, version: version }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Row, { label: "Account", plainColor: plainColor, children: signedIn ? (_jsxs(Text, { children: [data.email ?? 'you', data.org ? _jsx(Text, { color: tone.muted, children: `  ·  ${data.org}` }) : null] })) : (_jsx(Text, { color: tone.warn, children: "not signed in" })) }), _jsx(Row, { label: "Providers", plainColor: plainColor, children: data.providers ? (_jsxs(Text, { children: [data.providers, " connected", data.models ? _jsx(Text, { color: tone.muted, children: `  ·  ${data.models} models` }) : null] })) : (_jsx(Text, { color: tone.muted, children: "\u2014" })) }), _jsx(Row, { label: "Byte key", plainColor: plainColor, children: data.byteKeyMasked ? _jsx(Text, { color: tone.accent, children: data.byteKeyMasked }) : _jsx(Text, { color: tone.muted, children: "\u2014" }) }), _jsxs(Row, { label: "Gateway", plainColor: plainColor, children: [_jsx(Text, { color: gateway.color, children: g.filled }), _jsx(Text, { children: ` ${gateway.text}` })] }), hasSavings ? (_jsxs(Box, { marginTop: 1, flexDirection: "row", children: [_jsx(Box, { width: 11, children: _jsx(Text, { color: tone.muted, children: "7-day" }) }), _jsx(Sparkline, { values: data.savingsSeries, ascii: ascii, plainColor: plainColor }), _jsx(Text, { children: '  ' }), _jsx(Text, { color: tone.ok, children: fmtUsd(saved) }), _jsx(Text, { color: tone.muted, children: ' saved  ·  ' }), _jsx(Text, { children: fmtNum(data.tokensTotal) }), _jsx(Text, { color: tone.muted, children: " tokens" }), fmtPct(data.hitRate) ? _jsx(Text, { color: tone.muted, children: `  ·  ${fmtPct(data.hitRate)} cache hits` }) : null] })) : null] })] }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: tone.muted, children: `What would you like to do?  ${g.divider}  ↑↓ move · enter select · q quit` }), _jsx(Box, { marginTop: 1, children: _jsx(Picker, { items: actions, onSelect: onAction, ascii: ascii, plainColor: plainColor, initialValue: signedIn ? 'setup' : 'login', pageSize: actions.length }) })] })] }));
+}

package/dist/tui/components/KeyStep.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface KeyStepProps {
+    ascii: boolean;
+    plainColor: boolean;
+    busy: boolean;
+    preset: string;
+    existingKey?: string;
+    byteKey?: string;
+    onCreate: (name: string) => void;
+    onContinue: () => void;
+}
+export declare function KeyStep({ ascii, plainColor, busy, byteKey, existingKey, onCreate, onContinue }: KeyStepProps): React.ReactElement;
+export {};

package/dist/tui/components/KeyStep.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useInput } from 'ink';
+import TextInput from 'ink-text-input';
+import Spinner from 'ink-spinner';
+import React from 'react';
+import { glyphs, tones } from '../theme.js';
+import { Panel } from './Panel.js';
+// Byte key step. If a key already exists we skip straight to a continue prompt; otherwise the
+// user names the key, it's created via the port, then revealed ONCE in a panel with the
+// "copy it now" warning. Enter past the reveal advances the wizard.
+export function KeyStep({ ascii, plainColor, busy, byteKey, existingKey, onCreate, onContinue }) {
+    const g = glyphs(ascii);
+    const tone = tones(plainColor);
+    const [name, setName] = React.useState('cli');
+    const revealed = Boolean(byteKey);
+    // Once a key is on screen, Enter continues. (TextInput is unmounted by then, so this hook
+    // owns the keystroke.)
+    useInput((_input, key) => {
+        if (key.return)
+            onContinue();
+    }, { isActive: revealed });
+    if (busy) {
+        return (_jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { color: tone.accent, children: _jsx(Spinner, { type: ascii ? 'line' : 'dots' }) }), _jsx(Text, { children: " Creating your Byte key\u2026" })] }));
+    }
+    if (revealed && byteKey) {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Panel, { title: "Your Byte API key", tone: "accent", ascii: ascii, plainColor: plainColor, children: [_jsx(Text, { color: tone.accent, children: byteKey }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: tone.warn, children: `${g.bullet} Copy it now — this is shown only once.` }) })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: tone.muted, children: "Press enter to continue" }) })] }));
+    }
+    if (existingKey) {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: tone.accent, bold: true, children: "Byte key" }), _jsx(Text, { color: tone.muted, children: "This profile already has a Byte key \u2014 reusing it." }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: tone.muted, children: "Press enter to continue" }) }), _jsx(EnterToContinue, { onContinue: onContinue })] }));
+    }
+    const valid = name.trim().length > 0;
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: tone.accent, bold: true, children: "Create a Byte key" }), _jsx(Text, { color: tone.muted, children: "This is the key your tools and SDKs will use." }), _jsxs(Box, { marginTop: 1, flexDirection: "row", children: [_jsx(Text, { color: tone.muted, children: "Name " }), _jsxs(Text, { color: tone.accent, children: [g.arrow, " "] }), _jsx(TextInput, { value: name, onChange: setName, placeholder: "cli", onSubmit: () => {
+                            if (valid)
+                                onCreate(name.trim() || 'cli');
+                        } })] }), _jsx(Text, { color: tone.muted, children: "Enter to create" })] }));
+}
+// Tiny helper: a hook-only Enter handler used when there is no TextInput to own the key.
+function EnterToContinue({ onContinue }) {
+    useInput((_input, key) => {
+        if (key.return)
+            onContinue();
+    });
+    return _jsx(Text, { children: " " });
+}

package/dist/tui/components/Panel.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+type ToneName = 'accent' | 'ok' | 'warn' | 'bad' | 'muted';
+interface PanelProps {
+    title?: string;
+    tone?: ToneName;
+    ascii: boolean;
+    plainColor: boolean;
+    children: React.ReactNode;
+}
+export declare function Panel({ title, tone, ascii, plainColor, children }: PanelProps): React.ReactElement;
+export {};

package/dist/tui/components/Panel.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { glyphs, tones } from '../theme.js';
+// A titled, bordered region. The border style follows the glyph set (round vs classic) and the
+// border + title color follow the requested tone, degrading to the terminal default under
+// plainColor. Used for the reveal-once key, errors, and grouped wizard content.
+export function Panel({ title, tone = 'accent', ascii, plainColor, children }) {
+    const g = glyphs(ascii);
+    const t = tones(plainColor);
+    const color = t[tone];
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: g.border, borderColor: color, paddingX: 1, children: [title ? (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: color, bold: true, children: title }) })) : null, children] }));
+}

package/dist/tui/components/Picker.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+export interface PickItem {
+    value: string;
+    label: string;
+    hint?: string;
+}
+interface PickerProps {
+    items: PickItem[];
+    onSelect: (value: string) => void;
+    ascii: boolean;
+    plainColor: boolean;
+    initialValue?: string;
+    search?: boolean;
+    searchLabel?: string;
+    pageSize?: number;
+    isActive?: boolean;
+}
+export declare function Picker({ items, onSelect, ascii, plainColor, initialValue, search, searchLabel, pageSize, isActive, }: PickerProps): React.ReactElement;
+export {};

package/dist/tui/components/Picker.js

@@ -0,0 +1,68 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text, useInput } from 'ink';
+import TextInput from 'ink-text-input';
+import React from 'react';
+import { glyphs, tones } from '../theme.js';
+// A keyboard-driven list: Up/Down (and j/k) move the cursor, Enter selects, with an optional
+// type-to-filter box. Long lists window around the cursor so they never blow past the screen.
+// The selected row shows the accent arrow + bold label; hints render dim and inline.
+export function Picker({ items, onSelect, ascii, plainColor, initialValue, search = false, searchLabel = 'Search', pageSize = 8, isActive = true, }) {
+    const g = glyphs(ascii);
+    const tone = tones(plainColor);
+    const [query, setQuery] = React.useState('');
+    const filtered = React.useMemo(() => {
+        if (!query.trim())
+            return items;
+        const q = query.toLowerCase();
+        return items.filter((it) => it.label.toLowerCase().includes(q) || it.value.toLowerCase().includes(q));
+    }, [items, query]);
+    const startIdx = React.useMemo(() => {
+        if (!initialValue)
+            return 0;
+        const i = items.findIndex((it) => it.value === initialValue);
+        return i >= 0 ? i : 0;
+    }, [items, initialValue]);
+    const [cursor, setCursor] = React.useState(startIdx);
+    // Clamp the cursor whenever the filtered set shrinks under it.
+    React.useEffect(() => {
+        if (cursor > filtered.length - 1)
+            setCursor(Math.max(0, filtered.length - 1));
+    }, [filtered.length, cursor]);
+    useInput((input, key) => {
+        if (key.upArrow || input === 'k') {
+            setCursor((c) => (c - 1 + filtered.length) % Math.max(1, filtered.length));
+        }
+        else if (key.downArrow || input === 'j') {
+            setCursor((c) => (c + 1) % Math.max(1, filtered.length));
+        }
+        else if (key.return) {
+            const picked = filtered[cursor];
+            if (picked)
+                onSelect(picked.value);
+        }
+    }, { isActive: isActive && !search });
+    // With search on, the TextInput owns the keystrokes; Up/Down still need to move the cursor,
+    // so a second handler runs only for the arrow keys while typing is active.
+    useInput((_input, key) => {
+        if (key.upArrow)
+            setCursor((c) => (c - 1 + filtered.length) % Math.max(1, filtered.length));
+        else if (key.downArrow)
+            setCursor((c) => (c + 1) % Math.max(1, filtered.length));
+    }, { isActive: isActive && search });
+    // Window the rows so the cursor stays visible without scrolling the whole terminal.
+    const total = filtered.length;
+    const half = Math.floor(pageSize / 2);
+    let from = Math.max(0, cursor - half);
+    const to = Math.min(total, from + pageSize);
+    from = Math.max(0, to - pageSize);
+    const window = filtered.slice(from, to);
+    return (_jsxs(Box, { flexDirection: "column", children: [search ? (_jsxs(Box, { flexDirection: "row", marginBottom: 1, children: [_jsxs(Text, { color: tone.accent, children: [g.arrow, " "] }), _jsxs(Text, { color: tone.muted, children: [searchLabel, ": "] }), _jsx(TextInput, { value: query, onChange: setQuery, placeholder: "type to filter", onSubmit: () => {
+                            const picked = filtered[cursor];
+                            if (picked)
+                                onSelect(picked.value);
+                        } })] })) : null, from > 0 ? _jsx(Text, { color: tone.muted, children: `  ${g.bullet} ${from} more above` }) : null, window.map((it, i) => {
+                const idx = from + i;
+                const focused = idx === cursor;
+                return (_jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { color: focused ? tone.accent : undefined, children: focused ? g.arrow : ' ' }), _jsx(Text, { children: " " }), _jsx(Text, { bold: focused, color: focused ? tone.accent : undefined, children: it.label }), it.hint ? _jsx(Text, { color: tone.muted, children: `  ${it.hint}` }) : null] }, it.value));
+            }), to < total ? _jsx(Text, { color: tone.muted, children: `  ${g.bullet} ${total - to} more below` }) : null, total === 0 ? _jsx(Text, { color: tone.muted, children: "  no matches" }) : null] }));
+}

package/dist/tui/components/PresetStep.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { PresetCardDTO } from '../contract.js';
+interface PresetStepProps {
+    cards: PresetCardDTO[];
+    ascii: boolean;
+    plainColor: boolean;
+    busy: boolean;
+    initial?: string;
+    onSelect: (value: string) => void;
+}
+export declare function PresetStep({ cards, ascii, plainColor, busy, initial, onSelect }: PresetStepProps): React.ReactElement;
+export {};

package/dist/tui/components/PresetStep.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useInput } from 'ink';
+import Spinner from 'ink-spinner';
+import React from 'react';
+import { glyphs, tones } from '../theme.js';
+import { Card } from './Card.js';
+// Optimization-mode picker rendered as stacked cards (label + hint + wrapped blurb). Up/Down
+// moves focus, Enter applies. Default focus lands on the passed initial (or 'maximum').
+export function PresetStep({ cards, ascii, plainColor, busy, initial = 'maximum', onSelect }) {
+    const g = glyphs(ascii);
+    const tone = tones(plainColor);
+    const startIdx = Math.max(0, cards.findIndex((c) => c.value === initial));
+    const [cursor, setCursor] = React.useState(startIdx === -1 ? 0 : startIdx);
+    useInput((input, key) => {
+        if (key.upArrow || input === 'k')
+            setCursor((c) => (c - 1 + cards.length) % cards.length);
+        else if (key.downArrow || input === 'j')
+            setCursor((c) => (c + 1) % cards.length);
+        else if (key.return)
+            onSelect(cards[cursor].value);
+    }, { isActive: !busy });
+    if (busy) {
+        return (_jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { color: tone.accent, children: _jsx(Spinner, { type: ascii ? 'line' : 'dots' }) }), _jsx(Text, { children: " Applying the optimization mode\u2026" })] }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: tone.accent, bold: true, children: "Optimization mode" }), _jsx(Text, { color: tone.muted, children: `How hard Byte optimizes every request.  ${g.divider}  ↑↓ move · enter apply` }), _jsx(Box, { marginTop: 1, flexDirection: "column", children: cards.map((c, i) => (_jsx(Box, { marginBottom: i < cards.length - 1 ? 1 : 0, children: _jsx(Card, { label: c.label, hint: c.hint, blurb: c.blurb, focused: i === cursor, ascii: ascii, plainColor: plainColor }) }, c.value))) })] }));
+}

package/dist/tui/components/ProviderStep.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { ProviderPresetDTO, WizardPorts } from '../contract.js';
+interface ProviderStepProps {
+    presets: ProviderPresetDTO[];
+    ports: WizardPorts;
+    ascii: boolean;
+    plainColor: boolean;
+    busy: boolean;
+    error?: string;
+    onConnected: (r: {
+        status: 'connected' | 'saved' | 'failed';
+        models: any[];
+        connId?: number;
+    }) => void;
+    onSkip: () => void;
+    onBusy: (busy: boolean) => void;
+    onError: (message: string) => void;
+}
+export declare function ProviderStep({ presets, ports, ascii, plainColor, busy, error, onConnected, onSkip, onBusy, onError, }: ProviderStepProps): React.ReactElement;
+export {};