maka-agent 0.2.0-dev.3.20260830 → 0.2.0-dev.31.20260913

package/dist/pi-tui-pickers.js

@@ -16,10 +16,12 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { CombinedAutocompleteProvider, Editor, Key, SelectList, decodeKittyPrintable, isKeyRepeat, matchesKey, truncateToWidth, visibleWidth, } from '@earendil-works/pi-tui';
+import { CombinedAutocompleteProvider, Editor, Key, SelectList, decodeKittyPrintable, isKeyRelease, isKeyRepeat, matchesKey, truncateToWidth, visibleWidth, wrapTextWithAnsi, } from '@earendil-works/pi-tui';
 import { defineUiMessageCatalog, formatUiMessage, resolveUiMessageCatalog, } from '@maka/core/ui-locale';
-import { PROVIDER_DEFAULTS } from '@maka/core/llm-connections';
+import { providerDefaultsOf, validateSlug, } from '@maka/core/llm-connections';
+import { CONNECTION_NAME_MAX_LENGTH } from '@maka/core/runtime-policy';
 import { ansi, editorTheme, selectListTheme, stripAnsi } from './tui-ansi.js';
+import { stripUnfocusedCursorStyle } from './tui-editor-render.js';
 import { TUI_COPY_RESOURCES } from './tui-copy-catalog.js';
 const TUI_PICKER_COPY = resolveUiMessageCatalog(defineUiMessageCatalog()(TUI_COPY_RESOURCES.pickers));
 export function onboardingFailureMessage(failure, locale) {
@@ -33,6 +35,9 @@ export function onboardingFailureMessage(failure, locale) {
             return copy.onboardingRequestFailed;
     }
 }
+export function onboardingOAuthFailureMessage(reason, locale) {
+    return TUI_PICKER_COPY[locale].oauthFailures[reason];
+}
 export class MakaAutocompleteProvider {
     fileProvider;
     slashCommands;
@@ -399,42 +404,46 @@ export class UserQuestionOverlay {
     }
     render(width) {
         const safeWidth = Math.max(1, width);
-        const lines = [
-            padLine(`${this.input.title} ${ansi.accent(this.input.rightLabel)}`, safeWidth),
-            padLine(ansi.dim(this.input.hint), safeWidth),
-            padLine('', safeWidth),
+        // The title wraps like the option rows: a long question must not lose its
+        // tail to a hard cut at the terminal width (#4610).
+        const wrappedTitle = wrapTextWithAnsi(`${this.input.title} ${ansi.accent(this.input.rightLabel)}`, safeWidth);
+        const titleLines = (wrappedTitle.length > 0 ? wrappedTitle : ['']).map((line) => padLine(line, safeWidth));
+        const hint = padLine(ansi.dim(this.input.hint), safeWidth);
+        const blank = padLine('', safeWidth);
+        const divider = padLine(ansi.accent('-'.repeat(safeWidth)), safeWidth);
+        const inputRows = this.renderInputRow(safeWidth);
+        const optionRows = this.input.options.map((option, index) => formatUserQuestionOptionRow(option, index === this.activeIndex, safeWidth));
+        const assemble = (title, options) => [
+            ...title,
+            hint,
+            blank,
+            ...options.flat(),
+            ...inputRows,
+            divider,
         ];
-        this.input.options.forEach((option, index) => {
-            lines.push(this.renderOptionRow(option, index === this.activeIndex, safeWidth));
-        });
-        lines.push(...this.renderInputRow(safeWidth));
-        lines.push(padLine(ansi.accent('-'.repeat(safeWidth)), safeWidth));
-        return lines;
-    }
-    renderOptionRow(option, active, width) {
-        const prefix = active ? '→ ' : '  ';
-        const body = option.description
-            ? `${option.label}  ${active ? option.description : ansi.dim(option.description)}`
-            : option.label;
-        return formatPickerItemLine(`${prefix}${body}`, width);
+        const full = assemble(titleLines, optionRows);
+        const budget = this.input.maxRows?.() ?? Number.POSITIVE_INFINITY;
+        if (full.length <= budget)
+            return full;
+        // Over budget pi-tui would slice(0, maxHeight) — silently dropping the
+        // input row and divider. Degrade instead: cap the title at two lines and
+        // give every option an equal share of the remaining rows, each ending in
+        // a visible ellipsis when clamped. Only a terminal too short for one row
+        // per option still overflows, falling back to the pre-existing clip.
+        const cappedTitle = clampRowsWithEllipsis(titleLines, 2, safeWidth);
+        const fixedRows = cappedTitle.length + 2 + inputRows.length + 1;
+        const optionBudget = Math.max(this.input.options.length, budget - fixedRows);
+        const perOption = Math.max(1, Math.floor(optionBudget / Math.max(1, this.input.options.length)));
+        return assemble(cappedTitle, optionRows.map((rows) => clampRowsWithEllipsis(rows, perOption, safeWidth)));
     }
     renderInputRow(width) {
-        const prefix = this.onInputRow ? '→ ' : '  ';
-        const contentWidth = Math.max(1, width - USER_QUESTION_ROW_PREFIX_WIDTH);
-        // Focused only while the input row is highlighted: that both shows the block
-        // cursor and emits the hardware-cursor marker (#1064) so IME candidate windows
-        // anchor to the edited text instead of the terminal bottom.
+        const marker = this.onInputRow ? '→' : ' ';
+        // Focus controls the IME marker and our cursor-visibility adapter (#1064).
         this.editor.focused = this.onInputRow;
         if (!this.onInputRow && this.editor.getText().length === 0) {
-            return [padLine(`${prefix}${ansi.dim(this.input.placeholder)}`, width)];
-        }
-        // Drop the editor's own top/bottom border rows; keep just its content lines
-        // so the answer reads as one row of the list.
-        const editorLines = this.editor.render(contentWidth).slice(1, -1);
-        if (editorLines.length === 0) {
-            return [padLine(`${prefix}${ansi.dim(this.input.placeholder)}`, width)];
+            return [padLine(`${marker} ${ansi.dim(this.input.placeholder)}`, width)];
         }
-        return editorLines.map((line, index) => padLine(`${index === 0 ? prefix : '  '}${line}`, width));
+        return renderFieldRow(this.editor, marker, width);
     }
 }
 export function modelPickerItems(currentModel, models, locale) {
@@ -480,12 +489,12 @@ export function modelChoiceConnectionLabels(choices) {
     const labels = new Map();
     for (const connection of connections) {
         let label = connection.base;
-        if (used.has(label) && connection.connectionId) {
+        if (used.has(label)) {
             label = `${connection.base} · ${connection.connectionId}`;
         }
         let suffix = 2;
         while (used.has(label)) {
-            label = `${connection.base} · ${connection.connectionId ?? connection.connectionSlug} · ${suffix}`;
+            label = `${connection.base} · ${connection.connectionId} · ${suffix}`;
             suffix += 1;
         }
         used.add(label);
@@ -527,11 +536,118 @@ function matchesModelChoice(choice, query) {
         return true;
     if (choice.providerType.toLowerCase().includes(query))
         return true;
-    const providerLabel = PROVIDER_DEFAULTS[choice.providerType]?.label;
-    if (providerLabel && providerLabel.toLowerCase().includes(query))
+    // Both provider names, not just the one the row shows: the dense `menuLabel`
+    // drops the qualifier the full label carries ("Google Gemini" → "Google"), so
+    // searching only the displayed one loses `gemini`, and searching only the full
+    // one loses a qualifier that exists nowhere else ("OpenAI OAuth").
+    const provider = providerDefaultsOf(choice.providerType);
+    if (provider?.label.toLowerCase().includes(query))
+        return true;
+    if (provider?.menuLabel?.toLowerCase().includes(query))
         return true;
     return false;
 }
+export class SessionSearchOverlay {
+    tui;
+    input;
+    renderWidth = 0;
+    searchEditor;
+    copy;
+    choices;
+    filtered;
+    list;
+    selectedValue;
+    scopeLabel;
+    constructor(tui, input) {
+        this.tui = tui;
+        this.input = input;
+        this.copy = getTuiPickerCopy(input.locale);
+        this.choices = input.choices;
+        this.filtered = input.choices;
+        this.scopeLabel = input.scopeLabel;
+        this.list = this.buildList();
+        this.searchEditor = new Editor(tui, editorTheme(), { paddingX: 0 });
+        this.searchEditor.onChange = (text) => this.applyQuery(text);
+    }
+    updateChoices(choices, scopeLabel) {
+        this.choices = choices;
+        this.scopeLabel = scopeLabel;
+        this.applyQuery(this.searchEditor.getText());
+    }
+    buildList() {
+        const list = new SelectList(this.filtered.map(({ item }) => item), 10, selectListTheme(), {
+            minPrimaryColumnWidth: 20,
+            maxPrimaryColumnWidth: Math.max(20, this.renderWidth - 30),
+        });
+        const selectedIndex = this.filtered.findIndex(({ item }) => item.value === this.selectedValue);
+        if (selectedIndex >= 0)
+            list.setSelectedIndex(selectedIndex);
+        list.onSelectionChange = (item) => {
+            this.selectedValue = item.value;
+        };
+        list.onSelect = (item) => {
+            this.selectedValue = item.value;
+            this.input.onSelect(item);
+        };
+        list.onCancel = () => this.input.onCancel();
+        return list;
+    }
+    applyQuery(text) {
+        const query = text.trim().toLocaleLowerCase();
+        this.filtered = query
+            ? this.choices.filter((choice) => choice.searchText.includes(query))
+            : this.choices;
+        this.list = this.buildList();
+    }
+    invalidate() {
+        this.searchEditor.invalidate();
+        this.list.invalidate();
+    }
+    handleInput(data) {
+        if (matchesKey(data, Key.escape) || matchesKey(data, Key.ctrl('c'))) {
+            this.input.onCancel();
+            return;
+        }
+        if (matchesKey(data, Key.tab) && !isKeyRelease(data) && !isKeyRepeat(data)) {
+            this.input.onToggleScope();
+            return;
+        }
+        if (matchesKey(data, Key.up) || matchesKey(data, Key.down) || matchesKey(data, Key.enter)) {
+            if (matchesKey(data, Key.enter) && isKeyRepeat(data))
+                return;
+            this.list.handleInput(data);
+            return;
+        }
+        this.searchEditor.handleInput(data);
+    }
+    render(width) {
+        const safeWidth = Math.max(1, width);
+        if (safeWidth !== this.renderWidth) {
+            this.renderWidth = safeWidth;
+            this.list = this.buildList();
+        }
+        this.searchEditor.focused = true;
+        return [
+            padLine(`${this.copy.resumeSessionTitle} ${ansi.accent(this.scopeLabel)}`, safeWidth),
+            padLine(ansi.dim(this.copy.sessionSearchHint), safeWidth),
+            padLine('', safeWidth),
+            ...this.renderFieldRow(safeWidth),
+            padLine('', safeWidth),
+            ...(this.filtered.length === 0
+                ? [padLine(ansi.dim(this.copy.noMatchingSessions), safeWidth)]
+                : this.list.render(safeWidth).map((line) => formatPickerItemLine(line, safeWidth))),
+            padLine(ansi.accent('-'.repeat(safeWidth)), safeWidth),
+        ];
+    }
+    renderFieldRow(width) {
+        const prefix = `${this.copy.searchLabel} `;
+        const contentWidth = Math.max(1, width - visibleWidth(prefix));
+        const editorLines = this.searchEditor.render(contentWidth).slice(1, -1);
+        return editorLines.length > 0
+            ? editorLines.map((line, index) => padLine(`${index === 0 ? prefix : ' '.repeat(prefix.length)}${line}`, width))
+            : [padLine(prefix, width)];
+    }
+}
 export function getTuiPickerCopy(locale) {
     return TUI_PICKER_COPY[locale];
 }
@@ -629,14 +745,7 @@ export class ModelSearchOverlay {
         ];
     }
     renderFieldRow(editor, label, width) {
-        const prefix = `${label} `;
-        const prefixWidth = visibleWidth(prefix);
-        const contentWidth = Math.max(1, width - prefixWidth);
-        const editorLines = editor.render(contentWidth).slice(1, -1);
-        if (editorLines.length === 0) {
-            return [padLine(prefix, width)];
-        }
-        return editorLines.map((line, index) => padLine(`${index === 0 ? prefix : ' '.repeat(prefixWidth)}${line}`, width));
+        return renderFieldRow(editor, label, width);
     }
 }
 /**
@@ -709,25 +818,76 @@ function formatPickerItemLine(line, width) {
     const padded = padLine(line, width);
     return stripAnsi(line).startsWith('→ ') ? ansi.reverse(padded) : padded;
 }
+/**
+ * One AskUserQuestion option row, wrapped instead of truncated (#4610): the
+ * option body is the decision content, and options routinely carry long
+ * trade-off descriptions that a hard cut at the terminal width made
+ * unreadable. Continuation lines indent under the option body, aligned past
+ * the `→ `/`  ` marker; the active row's highlight band covers every wrapped
+ * line, not just the first.
+ */
+export function formatUserQuestionOptionRow(option, active, width) {
+    const safeWidth = Math.max(1, width);
+    const prefix = active ? '→ ' : '  ';
+    const body = option.description
+        ? `${option.label}  ${active ? option.description : ansi.dim(option.description)}`
+        : option.label;
+    const wrapped = wrapTextWithAnsi(body, Math.max(1, safeWidth - USER_QUESTION_ROW_PREFIX_WIDTH));
+    const continuation = ' '.repeat(USER_QUESTION_ROW_PREFIX_WIDTH);
+    return (wrapped.length > 0 ? wrapped : ['']).map((line, index) => {
+        const padded = padLine(`${index === 0 ? prefix : continuation}${line}`, safeWidth);
+        return active ? ansi.reverse(padded) : padded;
+    });
+}
+/**
+ * Cap an already-formatted wrapped row group at `maxRows`, folding the last
+ * kept line into an ellipsis so the elision is visible. truncateToWidth is
+ * ANSI-aware, so an active (reversed) line keeps its closing SGR.
+ */
+export function clampRowsWithEllipsis(rows, maxRows, width) {
+    if (rows.length <= maxRows)
+        return rows;
+    const keep = Math.max(1, maxRows);
+    const kept = rows.slice(0, keep);
+    // truncateToWidth only appends its marker when it actually cuts, and the
+    // kept row is already padded to full width — so cut one column short and
+    // add the ellipsis by hand to guarantee the elision stays visible.
+    const shortened = truncateToWidth(kept[kept.length - 1] ?? '', Math.max(1, width - 1), '');
+    kept[kept.length - 1] = padLine(`${shortened}…`, width);
+    return kept;
+}
 function padLine(text, width) {
     const safeWidth = Math.max(1, width);
     const trimmed = visibleWidth(text) > safeWidth ? truncateToWidth(text, safeWidth, '') : text;
     return `${trimmed}${' '.repeat(Math.max(0, safeWidth - visibleWidth(trimmed)))}`;
 }
-function keyEntryHint(copy, hasConnection, returnsToBaseUrl) {
+function renderFieldRow(editor, label, width) {
+    const prefix = `${label} `;
+    const prefixWidth = visibleWidth(prefix);
+    const contentWidth = Math.max(1, width - prefixWidth);
+    // These field editors have no autocomplete rows. Keep Editor's wrapping and
+    // scrolling, but omit its top/bottom borders.
+    const lines = editor.render(contentWidth).slice(1, -1);
+    const editorLines = stripUnfocusedCursorStyle(lines, editor.focused);
+    if (editorLines.length === 0)
+        return [padLine(prefix, width)];
+    return editorLines.map((line, index) => padLine(`${index === 0 ? prefix : ' '.repeat(prefixWidth)}${line}`, width));
+}
+function keyEntryHint(copy, hasConnection, returnsTo) {
     const action = hasConnection ? 'reuse' : 'enter';
-    const destination = returnsToBaseUrl ? 'baseUrl' : 'provider';
-    return copy.keyHints[action][destination];
+    return copy.keyHints[action][returnsTo];
+}
+/** The union's discriminant sits on `target.kind`, one level down — TS will
+ *  not narrow the entry from that check alone, so route through this guard. */
+function isCreateEntry(entry) {
+    return entry.target.kind === 'create';
 }
 const ONBOARDING_MODELS_MAX_VISIBLE = 10;
 /**
- * One input field, four phases. The same overlay is the provider search, the
- * API-key field, the searchable model multi-select, and the in-frame success —
- * so onboarding never pushes its prompt/verifying/failure/saving/success notices
- * into the transcript. Status lives in a single status line beside the field
- * instead of the top entry flow (#1098 UX). `Esc` always moves back exactly one
- * level (models → key → provider → close); late async results are ignored after
- * back/close/retry because the runner bumps its attempt id on every transition.
+ * One overlay owns the provider, credentials or OAuth, models, and success
+ * phases, so onboarding never pushes progress or failures into the transcript.
+ * Late async results are ignored after back, close, or retry because the runner
+ * bumps its attempt id on every transition.
  */
 export class OnboardingWizard {
     tui;
@@ -738,7 +898,11 @@ export class OnboardingWizard {
     searchEditor;
     baseUrlEditor;
     keyEditor;
+    nameEditor;
+    slugEditor;
     modelsSearchEditor;
+    identityFocus = 'name';
+    identityNameDraft = '';
     filtered;
     list;
     // Models phase state. Selection seeds from the picked provider's enabled set
@@ -751,6 +915,8 @@ export class OnboardingWizard {
     modelScroll = 0;
     successCount = 0;
     successWarning;
+    oauthPresentation;
+    oauthStatus = { kind: 'starting' };
     copy;
     constructor(tui, input) {
         this.tui = tui;
@@ -778,6 +944,19 @@ export class OnboardingWizard {
             if (this.picked)
                 this.input.onSubmitKey(value);
         };
+        this.nameEditor = new Editor(tui, editorTheme(), { paddingX: 0 });
+        this.nameEditor.onSubmit = (value) => {
+            // Enter on the optional name advances to the slug field in-frame. The
+            // Editor clears itself on submit, so capture the value here and restore
+            // the visible text — Esc back from the slug field must not find a blank
+            // name, and the slug submit reads the draft, not the editor.
+            this.identityNameDraft = value;
+            this.nameEditor.setText(value);
+            this.identityFocus = 'slug';
+            this.status = { kind: 'prompt' };
+        };
+        this.slugEditor = new Editor(tui, editorTheme(), { paddingX: 0 });
+        this.slugEditor.onSubmit = (value) => this.submitIdentity(value);
         this.modelsSearchEditor = new Editor(tui, editorTheme(), { paddingX: 0 });
         this.modelsSearchEditor.onChange = (text) => this.applyModelQuery(text);
     }
@@ -787,15 +966,31 @@ export class OnboardingWizard {
             const provider = this.filtered.find((candidate) => onboardingProviderKey(candidate) === item.value);
             if (!provider)
                 return;
-            this.enterKeyPhase(provider);
+            this.enterProvider(provider);
         };
         return list;
     }
-    enterKeyPhase(provider) {
+    enterProvider(provider) {
         this.picked = provider;
-        // A relay has no registry endpoint, so the wizard must collect one
+        // A create target stops at the identity step first: name and slug come
+        // prefilled with the Host-derived defaults, and accepting them verbatim
+        // sends the same bare target a build without this step would send.
+        // A relay has no registry endpoint, so the wizard must still collect one
         // before the key — the deferred phase-2 step from #1254 (#3405).
-        this.phase = provider.requiresBaseUrl ? 'baseUrl' : 'key';
+        const create = isCreateEntry(provider);
+        this.phase = create
+            ? 'identity'
+            : provider.setupMethod === 'oauth'
+                ? 'oauth'
+                : provider.requiresBaseUrl
+                    ? 'baseUrl'
+                    : 'key';
+        if (create) {
+            this.identityFocus = 'name';
+            this.nameEditor.setText(provider.label);
+            this.identityNameDraft = provider.label;
+            this.slugEditor.setText(provider.suggestedSlug);
+        }
         this.status = { kind: 'prompt' };
         this.baseUrlEditor.setText('');
         this.keyEditor.setText('');
@@ -810,6 +1005,46 @@ export class OnboardingWizard {
         this.modelScroll = 0;
         this.modelsSearchEditor.setText('');
         this.input.onPickProvider(provider);
+        if (!create && provider.setupMethod === 'oauth')
+            this.startOAuth();
+    }
+    /**
+     * Slug submit on the identity step. The name field needs no validation of
+     * its own beyond the catalog's length cap: empty or untouched means the
+     * provider label stays. An empty or untouched slug likewise keeps the
+     * Host-derived identity — only a genuinely edited slug crosses the wire,
+     * and it must pass the same rule the catalog decoder enforces.
+     */
+    submitIdentity(rawSlug) {
+        const picked = this.picked;
+        if (!picked || !isCreateEntry(picked) || this.phase !== 'identity')
+            return;
+        const slug = rawSlug.trim();
+        const name = this.identityNameDraft.trim();
+        if (name.length > CONNECTION_NAME_MAX_LENGTH) {
+            this.identityFocus = 'name';
+            this.status = { kind: 'error', text: this.copy.identityNameTooLong };
+            return;
+        }
+        const customSlug = slug.length > 0 && slug !== picked.suggestedSlug ? slug : null;
+        if (customSlug !== null) {
+            const error = validateSlug(customSlug);
+            if (error) {
+                this.identityFocus = 'slug';
+                this.status = { kind: 'error', text: this.copy.identitySlugInvalid };
+                return;
+            }
+        }
+        const defaultName = picked.label;
+        this.input.onSubmitIdentity({
+            slug: customSlug,
+            name: name.length > 0 && name !== defaultName ? name : null,
+        });
+        this.status = { kind: 'prompt' };
+        this.phase =
+            picked.setupMethod === 'oauth' ? 'oauth' : picked.requiresBaseUrl ? 'baseUrl' : 'key';
+        if (picked.setupMethod === 'oauth')
+            this.startOAuth();
     }
     submitBaseUrl(value) {
         if (!this.picked || this.phase !== 'baseUrl')
@@ -862,6 +1097,10 @@ export class OnboardingWizard {
         this.filtered = next;
         this.list = this.buildList();
     }
+    setProviders(providers) {
+        this.input.providers = providers;
+        this.applyQuery(this.searchEditor.getText());
+    }
     applyModelQuery(text) {
         const query = text.trim().toLowerCase();
         this.filteredModels = query
@@ -871,6 +1110,17 @@ export class OnboardingWizard {
         this.modelHighlight = 0;
         this.modelScroll = 0;
     }
+    /** Runner hook: the Host rejected the requested slug — bounce back to the
+     *  identity step with the user's text intact so they can edit it. */
+    setIdentityError(text) {
+        if (this.picked?.target.kind !== 'create')
+            return;
+        this.phase = 'identity';
+        this.identityFocus = 'slug';
+        this.status = { kind: 'error', text };
+        this.keyEditor.setText('');
+        this.keyEditor.disableSubmit = false;
+    }
     /** Runner hook: verify is in flight. Lock the key field and show progress. */
     setVerifying() {
         if (this.phase !== 'key')
@@ -886,12 +1136,63 @@ export class OnboardingWizard {
         this.keyEditor.disableSubmit = false;
         this.keyEditor.setText('');
     }
+    startOAuth() {
+        this.oauthPresentation = undefined;
+        this.oauthStatus = { kind: 'starting' };
+        this.input.onStartOAuth();
+    }
+    setOAuthPresentation(presentation) {
+        if (this.phase !== 'oauth' ||
+            (this.oauthStatus.kind !== 'starting' && this.oauthStatus.kind !== 'waiting'))
+            return;
+        this.oauthPresentation = presentation;
+        this.oauthStatus = { kind: 'waiting' };
+    }
+    setOAuthCancelling() {
+        if (this.phase !== 'oauth')
+            return;
+        this.oauthStatus = { kind: 'cancelling' };
+    }
+    setOAuthUnconfirmed() {
+        if (this.phase !== 'oauth')
+            return;
+        this.oauthStatus = { kind: 'unconfirmed' };
+    }
+    setOAuthAuthenticated(loadingModels = true) {
+        if (this.phase !== 'oauth')
+            return;
+        this.oauthStatus = { kind: 'authenticated', loadingModels };
+    }
+    setOAuthError(text) {
+        if (this.phase !== 'oauth')
+            return;
+        this.oauthStatus = { kind: 'error', text };
+    }
+    setOAuthModelError(text) {
+        if (this.phase !== 'oauth')
+            return;
+        this.oauthStatus = { kind: 'authenticated', loadingModels: false, modelError: text };
+    }
+    setOAuthCancelled() {
+        if (this.phase !== 'oauth')
+            return;
+        if (this.picked?.target.kind === 'create') {
+            this.phase = 'identity';
+            this.identityFocus = 'slug';
+        }
+        else {
+            this.phase = 'search';
+            this.picked = undefined;
+        }
+        this.status = { kind: 'prompt' };
+        this.oauthPresentation = undefined;
+    }
     /** Runner hook: verify succeeded — advance to the models step with fresh
      *  discovered models. Selection seeds from the picked provider's enabled set
      *  on first entry (existing connections preserve it; new ones start empty);
      *  a re-verify preserves the user's toggles, dropping ids no longer discovered. */
     setModels(models) {
-        if (this.phase !== 'key')
+        if (this.phase !== 'key' && this.phase !== 'oauth')
             return;
         this.models = models;
         if (!this.modelsInitialized) {
@@ -931,36 +1232,91 @@ export class OnboardingWizard {
         this.searchEditor.invalidate();
         this.baseUrlEditor.invalidate();
         this.keyEditor.invalidate();
+        this.nameEditor.invalidate();
+        this.slugEditor.invalidate();
         this.modelsSearchEditor.invalidate();
         this.list.invalidate();
     }
-    /** Step label: relays have four steps (the base-URL one), the rest three. */
-    step(position) {
-        return `${position}/${this.picked?.requiresBaseUrl ? 4 : 3}`;
+    /** Step label: create targets add identity; relays add Base URL. */
+    stepFor(phase) {
+        const selectedItem = this.list.getSelectedItem();
+        const entry = this.picked ??
+            this.filtered.find((candidate) => selectedItem !== null && onboardingProviderKey(candidate) === selectedItem.value);
+        const create = entry?.target.kind === 'create';
+        const oauth = entry?.setupMethod === 'oauth';
+        const relay = entry?.requiresBaseUrl === true;
+        const total = oauth ? 3 + (create ? 1 : 0) : 3 + (create ? 1 : 0) + (relay ? 1 : 0);
+        let position = 1;
+        if (phase === 'search')
+            return `1/${total}`;
+        if (create) {
+            position += 1;
+            if (phase === 'identity')
+                return `${position}/${total}`;
+        }
+        if (relay) {
+            position += 1;
+            if (phase === 'baseUrl')
+                return `${position}/${total}`;
+        }
+        position += 1;
+        if (phase === 'key' || phase === 'oauth')
+            return `${position}/${total}`;
+        return `${total}/${total}`;
     }
     handleInput(data) {
         switch (this.phase) {
             case 'search':
                 return this.handleSearchInput(data);
+            case 'identity':
+                return this.handleIdentityInput(data);
             case 'baseUrl':
                 return this.handleBaseUrlInput(data);
             case 'key':
                 return this.handleKeyInput(data);
+            case 'oauth':
+                return this.handleOAuthInput(data);
             case 'models':
                 return this.handleModelsInput(data);
             case 'success':
                 return this.handleSuccessInput(data);
         }
     }
-    handleBaseUrlInput(data) {
+    handleIdentityInput(data) {
         if (matchesKey(data, Key.ctrl('c'))) {
             this.input.onCancel();
             return;
         }
         if (matchesKey(data, Key.escape)) {
+            // One level back: slug field → name field → provider search.
+            if (this.identityFocus === 'slug') {
+                this.identityFocus = 'name';
+                this.status = { kind: 'prompt' };
+                return;
+            }
             this.phase = 'search';
             this.picked = undefined;
             this.status = { kind: 'prompt' };
+            this.input.onBack();
+            return;
+        }
+        (this.identityFocus === 'name' ? this.nameEditor : this.slugEditor).handleInput(data);
+    }
+    handleBaseUrlInput(data) {
+        if (matchesKey(data, Key.ctrl('c'))) {
+            this.input.onCancel();
+            return;
+        }
+        if (matchesKey(data, Key.escape)) {
+            // One level back: a create target returns to its identity step.
+            if (this.picked?.target.kind === 'create') {
+                this.phase = 'identity';
+            }
+            else {
+                this.phase = 'search';
+                this.picked = undefined;
+            }
+            this.status = { kind: 'prompt' };
             this.baseUrlEditor.setText('');
             this.input.onBack();
             return;
@@ -996,11 +1352,14 @@ export class OnboardingWizard {
             return;
         }
         if (matchesKey(data, Key.escape)) {
-            // One level back: a relay returns to its base-URL step, everything
-            // else to the provider search.
+            // One level back: a relay returns to its base-URL step, a create target
+            // to its identity step, everything else to the provider search.
             if (this.picked?.requiresBaseUrl) {
                 this.phase = 'baseUrl';
             }
+            else if (this.picked?.target.kind === 'create') {
+                this.phase = 'identity';
+            }
             else {
                 this.phase = 'search';
                 this.picked = undefined;
@@ -1018,17 +1377,58 @@ export class OnboardingWizard {
             return;
         this.keyEditor.handleInput(data);
     }
+    handleOAuthInput(data) {
+        if (matchesKey(data, Key.ctrl('c'))) {
+            this.input.onCancel();
+            return;
+        }
+        if (matchesKey(data, Key.escape)) {
+            if (this.oauthStatus.kind === 'unconfirmed') {
+                this.input.onCancel();
+                return;
+            }
+            if (this.oauthStatus.kind === 'starting' || this.oauthStatus.kind === 'waiting') {
+                this.oauthStatus = { kind: 'cancelling' };
+                this.input.onCancelOAuth();
+                return;
+            }
+            if (this.oauthStatus.kind === 'authenticated') {
+                this.phase = 'search';
+                this.picked = undefined;
+                this.input.onReturnToProviders();
+            }
+            else if (this.oauthStatus.kind === 'error') {
+                this.setOAuthCancelled();
+                this.input.onBack();
+            }
+            return;
+        }
+        if ((matchesKey(data, Key.enter) || matchesKey(data, Key.return)) && !isKeyRepeat(data)) {
+            if (this.oauthStatus.kind === 'error' || this.oauthStatus.kind === 'unconfirmed')
+                this.startOAuth();
+            else if (this.oauthStatus.kind === 'authenticated' && !this.oauthStatus.loadingModels) {
+                this.oauthStatus = { kind: 'authenticated', loadingModels: true };
+                this.input.onContinueOAuth();
+            }
+        }
+    }
     handleModelsInput(data) {
         if (matchesKey(data, Key.ctrl('c'))) {
             this.input.onCancel();
             return;
         }
         if (matchesKey(data, Key.escape)) {
-            // models → key (one level back); query/selection state survives.
-            this.phase = 'key';
+            // An OAuth login is already durable here: return to its signed-in screen
+            // instead of implying identity/authentication can be rolled back.
+            this.phase = this.picked?.setupMethod === 'oauth' ? 'oauth' : 'key';
             this.status = { kind: 'prompt' };
-            this.keyEditor.setText('');
-            this.keyEditor.disableSubmit = false;
+            if (this.phase === 'oauth') {
+                this.oauthStatus = { kind: 'authenticated', loadingModels: false };
+            }
+            else {
+                this.keyEditor.setText('');
+                this.keyEditor.disableSubmit = false;
+            }
             this.input.onBack();
             return;
         }
@@ -1102,27 +1502,57 @@ export class OnboardingWizard {
         switch (this.phase) {
             case 'search':
                 return this.renderSearch(safeWidth);
+            case 'identity':
+                return this.renderIdentity(safeWidth);
             case 'baseUrl':
                 return this.renderBaseUrl(safeWidth);
             case 'key':
                 return this.renderKey(safeWidth);
+            case 'oauth':
+                return this.renderOAuth(safeWidth);
             case 'models':
                 return this.renderModels(safeWidth);
             case 'success':
                 return this.renderSuccess(safeWidth);
         }
     }
+    focusOnly(active) {
+        for (const editor of [
+            this.searchEditor,
+            this.nameEditor,
+            this.slugEditor,
+            this.baseUrlEditor,
+            this.keyEditor,
+            this.modelsSearchEditor,
+        ]) {
+            editor.focused = editor === active;
+        }
+    }
+    renderIdentity(width) {
+        this.focusOnly(this.identityFocus === 'name' ? this.nameEditor : this.slugEditor);
+        const label = this.picked?.label ?? '';
+        return [
+            padLine(`${this.copy.setupTitle} ${ansi.dim(`· ${this.stepFor('identity')}`)} ${ansi.accent(label)}`, width),
+            padLine(ansi.dim(this.copy.identityHint), width),
+            padLine('', width),
+            ...this.renderFieldRow(this.nameEditor, this.copy.connectionNameLabel, width),
+            padLine('', width),
+            ...this.renderFieldRow(this.slugEditor, this.copy.connectionSlugLabel, width),
+            padLine('', width),
+            padLine(this.status.kind === 'error'
+                ? ansi.red(`✗ ${this.status.text}`)
+                : ansi.dim(this.copy.continueAction), width),
+            padLine(ansi.accent('-'.repeat(width)), width),
+        ];
+    }
     renderBaseUrl(width) {
-        this.searchEditor.focused = false;
-        this.baseUrlEditor.focused = true;
-        this.keyEditor.focused = false;
-        this.modelsSearchEditor.focused = false;
+        this.focusOnly(this.baseUrlEditor);
         const label = this.picked?.label ?? '';
         const hint = this.picked?.target.kind === 'existing'
             ? this.copy.reuseBaseUrlHint
             : this.copy.enterBaseUrlHint;
         return [
-            padLine(`${this.copy.setupTitle} ${ansi.dim(`· ${this.step(2)}`)} ${ansi.accent(label)}`, width),
+            padLine(`${this.copy.setupTitle} ${ansi.dim(`· ${this.stepFor('baseUrl')}`)} ${ansi.accent(label)}`, width),
             padLine(ansi.dim(hint), width),
             padLine('', width),
             ...this.renderFieldRow(this.baseUrlEditor, this.copy.baseUrlLabel, width),
@@ -1134,12 +1564,9 @@ export class OnboardingWizard {
         ];
     }
     renderSearch(width) {
-        this.searchEditor.focused = true;
-        this.baseUrlEditor.focused = false;
-        this.keyEditor.focused = false;
-        this.modelsSearchEditor.focused = false;
+        this.focusOnly(this.searchEditor);
         return [
-            padLine(`${this.copy.setupTitle} ${ansi.dim(`· ${this.step(1)}`)} ${ansi.accent(String(this.filtered.length))}`, width),
+            padLine(`${this.copy.setupTitle} ${ansi.dim(`· ${this.stepFor('search')}`)} ${ansi.accent(String(this.filtered.length))}`, width),
             padLine(ansi.dim(this.copy.providerSearchHint), width),
             padLine('', width),
             ...this.renderFieldRow(this.searchEditor, this.copy.searchLabel, width),
@@ -1151,14 +1578,15 @@ export class OnboardingWizard {
         ];
     }
     renderKey(width) {
-        this.searchEditor.focused = false;
-        this.baseUrlEditor.focused = false;
-        this.keyEditor.focused = this.status.kind === 'prompt' || this.status.kind === 'error';
-        this.modelsSearchEditor.focused = false;
+        this.focusOnly(this.status.kind === 'prompt' || this.status.kind === 'error' ? this.keyEditor : null);
         const label = this.picked?.label ?? '';
-        const hint = keyEntryHint(this.copy, this.picked?.target.kind === 'existing', this.picked?.requiresBaseUrl === true);
+        const hint = keyEntryHint(this.copy, this.picked?.target.kind === 'existing', this.picked?.requiresBaseUrl === true
+            ? 'baseUrl'
+            : this.picked?.target.kind === 'create'
+                ? 'identity'
+                : 'provider');
         return [
-            padLine(`${this.copy.setupTitle} ${ansi.dim(`· ${this.step(this.picked?.requiresBaseUrl ? 3 : 2)}`)} ${ansi.accent(label)}`, width),
+            padLine(`${this.copy.setupTitle} ${ansi.dim(`· ${this.stepFor('key')}`)} ${ansi.accent(label)}`, width),
             padLine(ansi.dim(hint), width),
             padLine('', width),
             ...this.renderFieldRow(this.keyEditor, this.copy.apiKeyLabel, width),
@@ -1179,14 +1607,56 @@ export class OnboardingWizard {
                 return ansi.dim(this.copy.submitAction);
         }
     }
+    renderOAuth(width) {
+        this.focusOnly(null);
+        const label = this.picked?.label ?? '';
+        const lines = [
+            padLine(`${this.copy.setupTitle} ${ansi.dim(`· ${this.stepFor('oauth')}`)} ${ansi.accent(label)}`, width),
+            padLine(this.oauthStatus.kind === 'authenticated'
+                ? ansi.dim(this.copy.oauthBackHint)
+                : ansi.dim(this.oauthStatus.kind === 'unconfirmed'
+                    ? this.copy.oauthRecheckAction
+                    : this.copy.oauthHint), width),
+            padLine('', width),
+        ];
+        if (this.oauthPresentation) {
+            lines.push(padLine(this.oauthPresentation.url, width));
+            lines.push(padLine('', width));
+            if (this.oauthPresentation.stateHint) {
+                lines.push(padLine(`${this.copy.oauthCodeLabel}: ${this.oauthPresentation.stateHint}`, width));
+                lines.push(padLine('', width));
+            }
+        }
+        lines.push(padLine(this.renderOAuthStatusLine(), width));
+        lines.push(padLine(ansi.accent('-'.repeat(width)), width));
+        return lines;
+    }
+    renderOAuthStatusLine() {
+        switch (this.oauthStatus.kind) {
+            case 'starting':
+                return `${ansi.yellow('⠋')} ${this.copy.oauthStarting}`;
+            case 'waiting':
+                return `${ansi.yellow('⠋')} ${this.copy.oauthWaiting}`;
+            case 'cancelling':
+                return `${ansi.yellow('⠋')} ${this.copy.oauthCancelling}`;
+            case 'unconfirmed':
+                return ansi.yellow(this.copy.oauthUnconfirmed);
+            case 'authenticated':
+                if (this.oauthStatus.loadingModels) {
+                    return `${ansi.yellow('⠋')} ${this.copy.oauthLoadingModels}`;
+                }
+                return this.oauthStatus.modelError
+                    ? ansi.red(`✗ ${this.copy.oauthRetryModelsAction} · ${this.oauthStatus.modelError}`)
+                    : ansi.green(`✓ ${this.copy.oauthContinueToModels}`);
+            case 'error':
+                return ansi.red(`✗ ${this.oauthStatus.text} · ${this.copy.oauthRetryAction}`);
+        }
+    }
     renderModels(width) {
-        this.searchEditor.focused = false;
-        this.baseUrlEditor.focused = false;
-        this.keyEditor.focused = false;
-        this.modelsSearchEditor.focused = this.status.kind !== 'saving';
+        this.focusOnly(this.status.kind !== 'saving' ? this.modelsSearchEditor : null);
         const label = this.picked?.label ?? '';
         const lines = [
-            padLine(`${this.copy.setupTitle} ${ansi.dim(`· ${this.step(this.picked?.requiresBaseUrl ? 4 : 3)}`)} ${ansi.accent(label)}`, width),
+            padLine(`${this.copy.setupTitle} ${ansi.dim(`· ${this.stepFor('models')}`)} ${ansi.accent(label)}`, width),
             padLine(ansi.dim(this.copy.modelSelectionHint), width),
             padLine('', width),
             ...this.renderFieldRow(this.modelsSearchEditor, this.copy.searchLabel, width),
@@ -1223,10 +1693,7 @@ export class OnboardingWizard {
         }
     }
     renderSuccess(width) {
-        this.searchEditor.focused = false;
-        this.baseUrlEditor.focused = false;
-        this.keyEditor.focused = false;
-        this.modelsSearchEditor.focused = false;
+        this.focusOnly(null);
         const label = this.picked?.label ?? '';
         return [
             padLine(`${this.copy.setupTitle} ${ansi.dim(`· ${this.copy.complete}`)} ${ansi.accent(label)}`, width),
@@ -1238,13 +1705,6 @@ export class OnboardingWizard {
         ];
     }
     renderFieldRow(editor, label, width) {
-        const prefix = `${label} `;
-        const prefixWidth = visibleWidth(prefix);
-        const contentWidth = Math.max(1, width - prefixWidth);
-        const editorLines = editor.render(contentWidth).slice(1, -1);
-        if (editorLines.length === 0) {
-            return [padLine(prefix, width)];
-        }
-        return editorLines.map((line, index) => padLine(`${index === 0 ? prefix : ' '.repeat(prefixWidth)}${line}`, width));
+        return renderFieldRow(editor, label, width);
     }
 }