maka-agent 0.2.0-dev.14.20260902 → 0.2.0-dev.16.20260903

package/dist/pi-tui-pickers.js

@@ -16,9 +16,10 @@
  * 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, isKeyRepeat, matchesKey, truncateToWidth, visibleWidth, wrapTextWithAnsi, } from '@earendil-works/pi-tui';
 import { defineUiMessageCatalog, formatUiMessage, resolveUiMessageCatalog, } from '@maka/core/ui-locale';
-import { providerDefaultsOf, } 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 { TUI_COPY_RESOURCES } from './tui-copy-catalog.js';
 const TUI_PICKER_COPY = resolveUiMessageCatalog(defineUiMessageCatalog()(TUI_COPY_RESOURCES.pickers));
@@ -399,24 +400,37 @@ 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 ? '→ ' : '  ';
@@ -715,15 +729,57 @@ 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 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;
 /**
@@ -744,7 +800,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
@@ -784,6 +844,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);
     }
@@ -799,9 +872,19 @@ export class OnboardingWizard {
     }
     enterKeyPhase(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.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('');
@@ -817,6 +900,41 @@ export class OnboardingWizard {
         this.modelsSearchEditor.setText('');
         this.input.onPickProvider(provider);
     }
+    /**
+     * 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.requiresBaseUrl ? 'baseUrl' : 'key';
+    }
     submitBaseUrl(value) {
         if (!this.picked || this.phase !== 'baseUrl')
             return;
@@ -877,6 +995,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')
@@ -937,17 +1066,40 @@ 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: relays add a base-URL step, create targets an identity one. */
+    stepFor(phase) {
+        const create = this.picked?.target.kind === 'create';
+        const relay = this.picked?.requiresBaseUrl === true;
+        const total = 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')
+            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':
@@ -958,15 +1110,41 @@ export class OnboardingWizard {
                 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;
@@ -1002,11 +1180,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;
@@ -1108,6 +1289,8 @@ 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':
@@ -1118,17 +1301,43 @@ export class OnboardingWizard {
                 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),
@@ -1140,12 +1349,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),
@@ -1157,14 +1363,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),
@@ -1186,13 +1393,10 @@ export class OnboardingWizard {
         }
     }
     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),
@@ -1229,10 +1433,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),