@aragon-agent/tui 0.0.0-stage → 0.0.1

package/dist/ui/overlays/ModelProfilePicker.js

@@ -0,0 +1,231 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Text, useInput } from 'ink';
+import stringWidth from 'string-width';
+import { pickGlyphs } from '../glyphs.js';
+import { OverlayFrame, overlayBodyRows } from '../layout/OverlayFrame.js';
+import { stripPasteFrames } from '../paste-frames.js';
+import { stripEnterFrames } from '../enter-frames.js';
+import { profileUsers, SUBAGENT_FAST_ROW_ID } from './model-profile-state.js';
+/** Move focus into view while accepting App's independent wheel/page scrolling. */
+export function useProfileScroll(props, focus) {
+    const [offset, setOffset] = useState(0);
+    useEffect(() => { props.onScrollClamp?.(0); }, []);
+    useEffect(() => { setOffset(props.scrollOffset); }, [props.scrollOffset]);
+    useEffect(() => {
+        const height = overlayBodyRows(props.maxRows, props.cols);
+        const next = focus < offset ? focus : focus >= offset + height ? focus - height + 1 : offset;
+        if (next !== offset) {
+            setOffset(next);
+            props.onScrollClamp?.(next);
+        }
+    }, [focus, props.maxRows, props.cols]);
+    return offset;
+}
+/** Cut by terminal columns, preserving surrogate pairs and wide names. */
+export function clipProfileText(value, columns) {
+    let result = '';
+    for (const point of value) {
+        if (stringWidth(result + point) > Math.max(0, columns))
+            break;
+        result += point;
+    }
+    return result;
+}
+function uniqueId(profile, entries) {
+    let length = Math.min(8, profile.id.length);
+    while (length < profile.id.length && entries.some((other) => other.id !== profile.id
+        && other.id.slice(0, length) === profile.id.slice(0, length)))
+        length++;
+    return profile.id.slice(0, length);
+}
+export function profileEndpointSummary(baseUrl) {
+    if (!baseUrl)
+        return 'Default URL';
+    try {
+        const url = new URL(baseUrl);
+        return url.username || url.password || url.search || url.hash ? 'Invalid URL' : url.host;
+    }
+    catch {
+        return 'Invalid URL';
+    }
+}
+function host(profile) {
+    return profileEndpointSummary(profile.baseUrl);
+}
+function usePickerState(props) {
+    const [index, setIndex] = useState(0);
+    const [selectedId, setSelectedId] = useState(props.profiles.entries[0]?.id);
+    const [query, setQuery] = useState('');
+    const [searching, setSearching] = useState(false);
+    const searchable = props.profiles.entries.length > 8;
+    const entries = props.profiles.entries.filter((entry) => `${entry.name} ${entry.provider} ${entry.model}`.toLocaleLowerCase()
+        .includes(query.toLocaleLowerCase()));
+    const actions = props.manager ? ['New', 'Edit', 'Duplicate', 'Delete'] : ['Create profile'];
+    // THE SUBAGENT PICKER swaps the `Current custom` row for TWO built-in rows:
+    // `Same as main` (selection id null) and `Fast tier model` (the sentinel).
+    //
+    // THE BINDING PICKER HAS NEITHER (agent-model-kits §4.5): a kit slot can only
+    // name a profile, so `prefix` is 0 there even though it is a selection page -
+    // "no profile" is not a choice a kit may make.
+    const prefix = props.role === 'subagent' ? 2 : props.role === 'binding' ? 0
+        : props.manager ? 0 : 1;
+    const count = entries.length + prefix + actions.length;
+    const cursor = Math.min(index, count - 1);
+    const focused = entries[cursor - prefix];
+    const selected = props.profiles.entries.find((entry) => entry.id === selectedId);
+    const offset = useProfileScroll(props, cursor + (searchable ? 1 : 0));
+    useEffect(() => { if (focused)
+        setSelectedId(focused.id); }, [focused?.id]);
+    return { setIndex, query, setQuery, searching, setSearching, searchable, entries,
+        actions, prefix, count, cursor, focused, selected, offset };
+}
+function usePickerInput(props, state) {
+    const { cursor, focused, selected, actions, prefix, entries, count, searching, searchable, setIndex, setQuery, setSearching } = state;
+    function activate() {
+        if (props.role === 'subagent') {
+            // Built-in rows first: `Same as main`, then `Fast tier model`.
+            if (cursor === 0) {
+                props.onSelect(null);
+                return;
+            }
+            if (cursor === 1) {
+                props.onSelect(SUBAGENT_FAST_ROW_ID);
+                return;
+            }
+        }
+        else if (!props.manager && props.role !== 'binding' && cursor === 0) {
+            props.onSelect(null);
+            return;
+        }
+        if (focused) {
+            if (props.manager)
+                setIndex(prefix + entries.length + 1);
+            else
+                props.onSelect(focused.id);
+            return;
+        }
+        const action = actions[cursor - prefix - entries.length];
+        if (action === 'New' || action === 'Create profile')
+            props.onCreate();
+        if (action === 'Edit' && selected)
+            props.onEdit(selected);
+        if (action === 'Duplicate' && selected)
+            props.onDuplicate(selected.id);
+        if (action === 'Delete' && selected)
+            props.onDelete(selected.id);
+    }
+    useInput((input, key) => {
+        if (props.isActive === false)
+            return;
+        if (key.escape) {
+            if (searching)
+                setSearching(false);
+            else
+                props.onCancel();
+            return;
+        }
+        if (searching) {
+            if (key.return || key.downArrow || key.tab) {
+                setSearching(false);
+                return;
+            }
+            if (key.backspace || key.delete)
+                setQuery((value) => [...value].slice(0, -1).join(''));
+            else if (input && !key.ctrl && !key.meta) {
+                setQuery((value) => value + stripPasteFrames(stripEnterFrames(input)));
+            }
+            setIndex(0);
+            return;
+        }
+        if (key.upArrow || (key.tab && key.shift))
+            setIndex((cursor - 1 + count) % count);
+        else if (key.downArrow || key.tab)
+            setIndex((cursor + 1) % count);
+        else if (key.return)
+            activate();
+        else if (input === '/' && searchable)
+            setSearching(true);
+        // `e` edits the focused profile directly (profile-picker-edit-key). The
+        // branch is deliberately NOT guarded by `!props.manager`: the manager page
+        // gains the same one-keystroke path (there `selected === focused`, see the
+        // effect in usePickerState), which spares the Enter-to-the-action-row hop.
+        // No-op on the `Current custom` row and the action rows (`focused` is
+        // undefined there), and the `searching` early-return above keeps `e` a
+        // query character while typing a search.
+        else if (!key.ctrl && !key.meta && input.toLowerCase() === 'e' && focused) {
+            props.onEdit(focused);
+        }
+        // `d` deletes the focused entry (D-7), symmetric with `e`: same guards,
+        // same no-ops on the built-in and action rows (`focused` is undefined
+        // there), and the `searching` early-return above keeps `d` a query
+        // character while typing a search.
+        else if (!key.ctrl && !key.meta && input.toLowerCase() === 'd' && focused) {
+            props.onDelete(focused.id);
+        }
+    });
+}
+/** The selection id this page marks with `[Selected]`, by role (6.2). */
+function currentSelectionId(props) {
+    if (props.selectedIdOverride !== undefined)
+        return props.selectedIdOverride;
+    // `subagent` and `binding` have no `${role}Id` key: their selection arrives
+    // through `selectedIdOverride`, so looking one up would read a key that does
+    // not exist on the library.
+    if (props.role === 'subagent' || props.role === 'binding')
+        return undefined;
+    return props.profiles[`${props.role}Id`];
+}
+function profilePickerLabel(props, entry) {
+    const saved = profileUsers(props.savedProfiles, entry.id, props.subagentProfileId);
+    const checked = currentSelectionId(props) === entry.id ? '[Selected] ' : '';
+    const duplicate = props.profiles.entries.some((other) => other.id !== entry.id
+        && other.name === entry.name);
+    const identity = duplicate ? `#${uniqueId(entry, props.profiles.entries)} ` : '';
+    const detail = duplicate ? ` ${host(entry)}` : '';
+    return `${identity}${checked}${entry.name}  ${entry.provider}:${entry.model}${detail}`
+        + (saved ? ` [${saved}]` : '');
+}
+function buildPickerRows(props, state) {
+    const { entries, actions, cursor, searching, searchable, query, focused, selected } = state;
+    const glyphs = pickGlyphs(props.caps);
+    const lines = [];
+    if (props.role === 'subagent') {
+        // TWO BUILT-IN ROWS (D-5), marked with the same `[Selected]` prefix the
+        // profile rows use; the fast row annotates an unusable tier honestly.
+        const current = props.selectedIdOverride ?? null;
+        lines.push(`${current === null ? '[Selected] ' : ''}Same as main`);
+        lines.push(`${current === SUBAGENT_FAST_ROW_ID ? '[Selected] ' : ''}Fast tier model`
+            + `${props.fastTierOff === true ? '  (fast tier off)' : ''}`);
+    }
+    else if (!props.manager && props.role !== 'binding')
+        lines.push('Current custom');
+    lines.push(...entries.map((entry) => profilePickerLabel(props, entry)));
+    lines.push(...actions);
+    const rows = lines.map((line, row) => _jsxs(Text, { wrap: "truncate", color: row === cursor ? props.theme.accent : props.theme.muted, children: [`${row === cursor && !searching ? glyphs.caret : ' '} `, clipProfileText(line, props.cols - 8)] }, row));
+    if (searchable)
+        rows.unshift(_jsxs(Text, { wrap: "truncate", color: props.theme.primary, children: [searching ? `${glyphs.caret} ` : '  ', "Search: ", query || '(/ to search)'] }, "search"));
+    // The subagent picker has no `Current custom` row to describe; its
+    // built-in rows already say everything there is to say.
+    const detail = props.role === 'subagent' ? focused
+        : !props.manager && props.role !== 'binding' && cursor === 0 ? props.customProfile
+            : focused ?? selected;
+    if (detail) {
+        rows.push(_jsxs(Text, { wrap: "truncate", color: props.theme.muted, children: [detail.provider, ":", detail.model || '(not set)', " ", host(detail), detail === props.customProfile ? '' : ` #${detail.id}`] }, "detail"));
+        rows.push(_jsx(Text, { wrap: "truncate", color: props.theme.muted, children: detail.apiKey ? 'Profile key: Configured'
+                : props.apiKeys[detail.provider] ? 'Shared / environment: Configured' : 'Missing API key' }, "key"));
+        rows.push(_jsx(Text, { wrap: "truncate", color: props.theme.muted, children: `Window: ${detail.contextWindow ?? 'auto'}` }, "window"));
+    }
+    return rows;
+}
+/** Profile selection and explicit management actions share one input owner. */
+export function ModelProfilePicker(props) {
+    const state = usePickerState(props);
+    usePickerInput(props, state);
+    return _jsx(OverlayFrame, { ...props, title: props.error ?? (props.manager ? 'Manage profiles'
+            : props.role === 'subagent' ? 'Subagent model'
+                : props.role === 'binding' ? 'Choose profile'
+                    : `${props.role === 'main' ? 'Main' : 'Fast'} profile`), rows: buildPickerRows(props, state), scrollOffset: state.searching ? 0 : state.offset, hint: state.searching ? 'Type search | Enter done | Esc back'
+            : props.manager ? 'Enter action | e edit | d delete | Esc back'
+                : 'Enter select | e edit | d delete | Esc back' });
+}

package/dist/ui/overlays/PlanReviewOverlay.d.ts

@@ -0,0 +1,51 @@
+/**
+ * PlanReviewOverlay — the reviewable card `submit_plan` renders (plan-mode §6.6).
+ *
+ * `OverlayFrame` MODE A (`rows`), because a 20-step plan must scroll and mode A
+ * is the only mode with a position indicator.
+ *
+ * MODE A SLICES BY ELEMENT, SO THE PROSE IS PRE-WRAPPED. `sliceWindow` counts
+ * elements, not lines, and each element must be exactly one row. The summary
+ * runs to 600 characters and a step detail to 400 — handing either over as a
+ * single `<Text>` would render the whole paragraph as one truncated line and
+ * make the frame's `1-14/22` a false statement. `wrapToRows` is what keeps the
+ * count honest.
+ *
+ * ACTIONS LIVE IN THE FRAME HINT, NOT IN `rows`. Mode A slices `rows`; an action
+ * row placed there would scroll off exactly when a long plan needs it most.
+ * Single-key actions also avoid a second selection cursor competing with the
+ * scroll cursor.
+ *
+ * `Esc` IS NOT HANDLED HERE, and neither is any resolution of the pending
+ * request: `App` owns Esc, and the bridge's `settle()` is the only place a human
+ * request is answered (R-P12). That holds in the revise sub-state too, which is
+ * why the way back from the feedback field is `<-` rather than `Esc` (R2-P1-2).
+ */
+import React from 'react';
+import type { Theme } from '../theme.js';
+import type { TermCapabilities } from '../capabilities.js';
+import type { NormalizedPlan } from '../../model/tools/human-input.js';
+export type PlanVerdict = {
+    decision: 'approved' | 'revise';
+    feedback: string;
+};
+interface PlanReviewOverlayProps {
+    isActive?: boolean;
+    plan: NormalizedPlan;
+    maxRows: number;
+    cols: number;
+    scrollOffset: number;
+    onScrollClamp: (offset: number) => void;
+    theme: Theme;
+    caps: TermCapabilities;
+    onVerdict: (verdict: PlanVerdict) => void;
+}
+export declare function PlanReviewOverlay({ isActive, plan, maxRows, cols, scrollOffset, onScrollClamp, theme, caps, onVerdict, }: PlanReviewOverlayProps): React.ReactElement;
+/**
+ * Flatten the plan into one-row elements.
+ *
+ * Exported for `plan-mode.test.ts`, which asserts that a 600-character summary
+ * really does become many rows rather than one truncated line (P1-3).
+ */
+export declare function buildPlanRows(plan: NormalizedPlan, width: number, theme: Theme, bullet: string): React.ReactElement[];
+export {};

package/dist/ui/overlays/PlanReviewOverlay.js

@@ -0,0 +1,132 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * PlanReviewOverlay — the reviewable card `submit_plan` renders (plan-mode §6.6).
+ *
+ * `OverlayFrame` MODE A (`rows`), because a 20-step plan must scroll and mode A
+ * is the only mode with a position indicator.
+ *
+ * MODE A SLICES BY ELEMENT, SO THE PROSE IS PRE-WRAPPED. `sliceWindow` counts
+ * elements, not lines, and each element must be exactly one row. The summary
+ * runs to 600 characters and a step detail to 400 — handing either over as a
+ * single `<Text>` would render the whole paragraph as one truncated line and
+ * make the frame's `1-14/22` a false statement. `wrapToRows` is what keeps the
+ * count honest.
+ *
+ * ACTIONS LIVE IN THE FRAME HINT, NOT IN `rows`. Mode A slices `rows`; an action
+ * row placed there would scroll off exactly when a long plan needs it most.
+ * Single-key actions also avoid a second selection cursor competing with the
+ * scroll cursor.
+ *
+ * `Esc` IS NOT HANDLED HERE, and neither is any resolution of the pending
+ * request: `App` owns Esc, and the bridge's `settle()` is the only place a human
+ * request is answered (R-P12). That holds in the revise sub-state too, which is
+ * why the way back from the feedback field is `<-` rather than `Esc` (R2-P1-2).
+ */
+import { useState } from 'react';
+import { Text, useInput } from 'ink';
+import { pickGlyphs } from '../glyphs.js';
+import { OverlayFrame, overlayBodyRows } from '../layout/OverlayFrame.js';
+import { wrapToRows } from '../layout/wrap-rows.js';
+import { stripPasteFrames } from '../paste-frames.js';
+import { stripEnterFrames } from '../enter-frames.js';
+/** The frame's border plus its one-column padding on each side. */
+const FRAME_CHROME_COLS = 4;
+export function PlanReviewOverlay({ isActive = true, plan, maxRows, cols, scrollOffset, onScrollClamp, theme, caps, onVerdict, }) {
+    const glyphs = pickGlyphs(caps);
+    const [feedback, setFeedback] = useState(null);
+    useInput((input, key) => {
+        if (!isActive)
+            return;
+        if (key.escape)
+            return; // App owns dismiss.
+        if (feedback !== null) {
+            if (key.return) {
+                onVerdict({ decision: 'revise', feedback: feedback.trim() });
+                return;
+            }
+            // THE WAY BACK TO THE CARD, and the reason it is `<-` and not `Esc`:
+            // `App` owns Esc here and settles the pending request with it, so a second
+            // Esc consumer in this overlay would be the `ConfirmDialog` double-resolve
+            // pattern R-P12 exists to keep out. `QuestionOverlay` already spends `<-`
+            // on "back", so this costs no key ownership. Without it the field is a
+            // one-way door — it consumes printable input and Backspace, and the only
+            // other exit throws the whole review away (R2-P1-2).
+            if (key.leftArrow) {
+                setFeedback(null);
+                return;
+            }
+            if (key.backspace || key.delete) {
+                setFeedback(feedback.slice(0, -1));
+                return;
+            }
+            // `stripPasteFrames`, NOT `input` (I-12 / P0-2). This is the THIRD consumer
+            // that appends `input` to a string; the design's table listed it as
+            // "key-driven only, inert", which was true of the version that had no
+            // free-text field. Revision feedback is exactly the kind of thing a user
+            // pastes — a failing test, a stack trace — and a framed paste appended
+            // verbatim would put NULs into text the model then reads.
+            if (input && !key.ctrl && !key.meta && !key.tab) {
+                // `stripEnterFrames` rides inside it for the newline frame a
+                // Shift+Enter broadcasts (tui-shift-enter-copy-queue 3.5): same hazard,
+                // same fix, and this order is the one that leaves no NUL in the draft.
+                setFeedback(feedback + stripPasteFrames(stripEnterFrames(input)));
+            }
+            return;
+        }
+        if (input === 'a' || input === 'A')
+            onVerdict({ decision: 'approved', feedback: '' });
+        else if (input === 'r' || input === 'R')
+            setFeedback('');
+    });
+    const width = Math.max(20, cols - FRAME_CHROME_COLS);
+    const rows = buildPlanRows(plan, width, theme, glyphs.bullet);
+    if (feedback !== null) {
+        // `esc dismiss`, NOT "esc back to the plan": `App` owns Esc for this overlay
+        // (R-P12) and settles the pending request with `null`, so Esc throws the
+        // whole review away from either sub-state. `<-` is the route back to the
+        // card, which is why it is named here too.
+        const feedbackHint = `${glyphs.enterKey} send ${glyphs.midDot} ${glyphs.arrowLeft} back ${glyphs.midDot} esc dismiss`;
+        return (_jsxs(OverlayFrame, { title: "What should change?", hint: feedbackHint, maxRows: maxRows, cols: cols, theme: theme, caps: caps, children: [overlayBodyRows(maxRows, cols) >= 2 && _jsx(Text, { wrap: "truncate", color: theme.muted, children: "The agent revises the plan and submits it again." }), _jsxs(Text, { wrap: "truncate", children: [_jsxs(Text, { color: theme.primary, bold: true, children: [glyphs.caret, ' '] }), feedback.length > 0 ? (_jsx(Text, { children: wrapToRows(feedback, Math.max(1, cols - FRAME_CHROME_COLS - 3)).at(-1) })) : (_jsx(Text, { color: theme.muted, children: "type feedback" })), _jsx(Text, { inverse: true, children: " " })] })] }));
+    }
+    return (_jsx(OverlayFrame, { title: "Review plan", hint: cols <= 48 ? "a approve r revise Esc cancel"
+            : `a approve ${glyphs.midDot} r revise ${glyphs.midDot} esc dismiss ${glyphs.midDot} ${glyphs.arrowUp}${glyphs.arrowDown} scroll`, maxRows: maxRows, cols: cols, rows: rows, scrollOffset: scrollOffset, onScrollClamp: onScrollClamp, theme: theme, caps: caps }));
+}
+/**
+ * Flatten the plan into one-row elements.
+ *
+ * Exported for `plan-mode.test.ts`, which asserts that a 600-character summary
+ * really does become many rows rather than one truncated line (P1-3).
+ */
+export function buildPlanRows(plan, width, theme, bullet) {
+    const rows = [];
+    let key = 0;
+    const push = (node, color, bold) => {
+        rows.push(_jsx(Text, { wrap: "truncate", color: color, bold: bold, children: node }, `p${key++}`));
+    };
+    push(plan.title, theme.assistant, true);
+    for (const line of wrapToRows(plan.summary, width))
+        push(line || ' ', theme.muted);
+    push(' ');
+    push('Steps', theme.accent, true);
+    plan.steps.forEach((step, i) => {
+        const number = String(i + 1).padStart(2, ' ');
+        push(`${number}  ${step.title}`);
+        for (const line of wrapToRows(step.detail, Math.max(10, width - 4))) {
+            push(`    ${line}`, theme.muted);
+        }
+    });
+    const section = (label, items) => {
+        if (items.length === 0)
+            return;
+        push(' ');
+        push(label, theme.accent, true);
+        for (const item of items) {
+            for (const line of wrapToRows(`${bullet} ${item}`, width))
+                push(line, theme.muted);
+        }
+    };
+    section('Files', plan.filesTouched);
+    section('Risks', plan.risks);
+    section('Open questions', plan.openQuestions);
+    return rows;
+}

package/dist/ui/overlays/PromptEditorPage.d.ts

@@ -0,0 +1,48 @@
+/**
+ * The prompt editor page (quick-prompt-library §4.4 / D-11).
+ *
+ * ASCII ONLY - `src/ui/**` is inside `glyphs.test.ts::inScope`. Labels and the footer
+ * are English like every other overlay; every sentence that explains a REFUSAL comes
+ * from `prompts/copy.ts`.
+ *
+ * SELF-MANAGED `OverlayFrame`, not the controlled one. The two modes are a
+ * discriminated union (`children?: undefined`), and this page lays out a multi-row
+ * body field that owns its own scrolling: handing it over as `rows` would mean the
+ * frame counts a body's lines as rows and windows them again (P2-2).
+ *
+ * TWO WAYS TO SAVE, AND THE SECOND ONE IS NOT DECORATION. `Ctrl+S` is the fast path,
+ * and it is a byte a terminal can eat (XON/XOFF) - so `Tab` to the `Save` row and
+ * `Enter` must do exactly the same thing. That is what keeps "I cannot save" from
+ * being a bug a whole class of terminals can reproduce.
+ */
+import React from 'react';
+import type { Theme } from '../theme.js';
+import type { TermCapabilities } from '../capabilities.js';
+import { type PromptLibraryState } from './prompt-library-state.js';
+export interface PromptEditorPageProps {
+    isActive: boolean;
+    state: PromptLibraryState;
+    cols: number;
+    maxRows: number;
+    theme: Theme;
+    caps: TermCapabilities;
+    reducedMotion?: boolean;
+    /** One field changed; the page never owns the text, only the caret. */
+    onDraft: (patch: {
+        title?: string;
+        content?: string;
+        description?: string;
+        tags?: string;
+    }) => void;
+    onSave: () => void;
+    onEsc: () => void;
+    onCancel: () => void;
+}
+/**
+ * The page.
+ *
+ * The draft lives in the parent (the reducer owns it, so `Save` and `Esc` can see the
+ * same text); this component owns only what no other surface needs: which row has
+ * focus, and where each single-line field's caret sits.
+ */
+export declare function PromptEditorPage(props: PromptEditorPageProps): React.ReactElement;