indusagi-coding-agent 0.1.0

package/dist/modes/interactive/components/diff.js

@@ -0,0 +1,132 @@
+import * as Diff from "diff";
+import { theme } from "../theme/theme.js";
+/**
+ * Parse diff line to extract prefix, line number, and content.
+ * Format: "+123 content" or "-123 content" or " 123 content" or "     ..."
+ */
+function parseDiffLine(line) {
+    const match = line.match(/^([+-\s])(\s*\d*)\s(.*)$/);
+    if (!match)
+        return null;
+    return { prefix: match[1], lineNum: match[2], content: match[3] };
+}
+/**
+ * Replace tabs with spaces for consistent rendering.
+ */
+function replaceTabs(text) {
+    return text.replace(/\t/g, "   ");
+}
+/**
+ * Compute word-level diff and render with inverse on changed parts.
+ * Uses diffWords which groups whitespace with adjacent words for cleaner highlighting.
+ * Strips leading whitespace from inverse to avoid highlighting indentation.
+ */
+function renderIntraLineDiff(oldContent, newContent) {
+    const wordDiff = Diff.diffWords(oldContent, newContent);
+    let removedLine = "";
+    let addedLine = "";
+    let isFirstRemoved = true;
+    let isFirstAdded = true;
+    for (const part of wordDiff) {
+        if (part.removed) {
+            let value = part.value;
+            // Strip leading whitespace from the first removed part
+            if (isFirstRemoved) {
+                const leadingWs = value.match(/^(\s*)/)?.[1] || "";
+                value = value.slice(leadingWs.length);
+                removedLine += leadingWs;
+                isFirstRemoved = false;
+            }
+            if (value) {
+                removedLine += theme.inverse(value);
+            }
+        }
+        else if (part.added) {
+            let value = part.value;
+            // Strip leading whitespace from the first added part
+            if (isFirstAdded) {
+                const leadingWs = value.match(/^(\s*)/)?.[1] || "";
+                value = value.slice(leadingWs.length);
+                addedLine += leadingWs;
+                isFirstAdded = false;
+            }
+            if (value) {
+                addedLine += theme.inverse(value);
+            }
+        }
+        else {
+            removedLine += part.value;
+            addedLine += part.value;
+        }
+    }
+    return { removedLine, addedLine };
+}
+/**
+ * Render a diff string with colored lines and intra-line change highlighting.
+ * - Context lines: dim/gray
+ * - Removed lines: red, with inverse on changed tokens
+ * - Added lines: green, with inverse on changed tokens
+ */
+export function renderDiff(diffText, _options = {}) {
+    const lines = diffText.split("\n");
+    const result = [];
+    let i = 0;
+    while (i < lines.length) {
+        const line = lines[i];
+        const parsed = parseDiffLine(line);
+        if (!parsed) {
+            result.push(theme.fg("toolDiffContext", line));
+            i++;
+            continue;
+        }
+        if (parsed.prefix === "-") {
+            // Collect consecutive removed lines
+            const removedLines = [];
+            while (i < lines.length) {
+                const p = parseDiffLine(lines[i]);
+                if (!p || p.prefix !== "-")
+                    break;
+                removedLines.push({ lineNum: p.lineNum, content: p.content });
+                i++;
+            }
+            // Collect consecutive added lines
+            const addedLines = [];
+            while (i < lines.length) {
+                const p = parseDiffLine(lines[i]);
+                if (!p || p.prefix !== "+")
+                    break;
+                addedLines.push({ lineNum: p.lineNum, content: p.content });
+                i++;
+            }
+            // Only do intra-line diffing when there's exactly one removed and one added line
+            // (indicating a single line modification). Otherwise, show lines as-is.
+            if (removedLines.length === 1 && addedLines.length === 1) {
+                const removed = removedLines[0];
+                const added = addedLines[0];
+                const { removedLine, addedLine } = renderIntraLineDiff(replaceTabs(removed.content), replaceTabs(added.content));
+                result.push(theme.fg("toolDiffRemoved", `-${removed.lineNum} ${removedLine}`));
+                result.push(theme.fg("toolDiffAdded", `+${added.lineNum} ${addedLine}`));
+            }
+            else {
+                // Show all removed lines first, then all added lines
+                for (const removed of removedLines) {
+                    result.push(theme.fg("toolDiffRemoved", `-${removed.lineNum} ${replaceTabs(removed.content)}`));
+                }
+                for (const added of addedLines) {
+                    result.push(theme.fg("toolDiffAdded", `+${added.lineNum} ${replaceTabs(added.content)}`));
+                }
+            }
+        }
+        else if (parsed.prefix === "+") {
+            // Standalone added line
+            result.push(theme.fg("toolDiffAdded", `+${parsed.lineNum} ${replaceTabs(parsed.content)}`));
+            i++;
+        }
+        else {
+            // Context line
+            result.push(theme.fg("toolDiffContext", ` ${parsed.lineNum} ${replaceTabs(parsed.content)}`));
+            i++;
+        }
+    }
+    return result.join("\n");
+}

package/dist/modes/interactive/components/dynamic-border.js

@@ -0,0 +1,19 @@
+import { theme } from "../theme/theme.js";
+/**
+ * Dynamic border component that adjusts to viewport width.
+ *
+ * Note: When used from extensions loaded via jiti, the global `theme` may be undefined
+ * because jiti creates a separate module cache. Always pass an explicit color
+ * function when using DynamicBorder in components exported for extension use.
+ */
+export class DynamicBorder {
+    constructor(color = (str) => theme.fg("border", str)) {
+        this.color = color;
+    }
+    invalidate() {
+        // No cached state to invalidate currently
+    }
+    render(width) {
+        return [this.color("─".repeat(Math.max(1, width)))];
+    }
+}

package/dist/modes/interactive/components/extension-editor.js

@@ -0,0 +1,96 @@
+/**
+ * Multi-line editor component for extensions.
+ * Supports Ctrl+G for external editor.
+ */
+import { spawnSync } from "node:child_process";
+import * as fs from "node:fs";
+import * as os from "node:os";
+import * as path from "node:path";
+import { Container, Editor, getEditorKeybindings, Spacer, Text, } from "indusagi/tui";
+import { getEditorTheme, theme } from "../theme/theme.js";
+import { DynamicBorder } from "./dynamic-border.js";
+import { appKeyHint, keyHint } from "./keybinding-hints.js";
+export class ExtensionEditorComponent extends Container {
+    constructor(tui, keybindings, title, prefill, onSubmit, onCancel, options) {
+        super();
+        this.tui = tui;
+        this.keybindings = keybindings;
+        this.onSubmitCallback = onSubmit;
+        this.onCancelCallback = onCancel;
+        // Add top border
+        this.addChild(new DynamicBorder());
+        this.addChild(new Spacer(1));
+        // Add title
+        this.addChild(new Text(theme.fg("accent", title), 1, 0));
+        this.addChild(new Spacer(1));
+        // Create editor
+        this.editor = new Editor(tui, getEditorTheme(), options);
+        if (prefill) {
+            this.editor.setText(prefill);
+        }
+        // Wire up Enter to submit (Shift+Enter for newlines, like the main editor)
+        this.editor.onSubmit = (text) => {
+            this.onSubmitCallback(text);
+        };
+        this.addChild(this.editor);
+        this.addChild(new Spacer(1));
+        // Add hint
+        const hasExternalEditor = !!(process.env.VISUAL || process.env.EDITOR);
+        const hint = keyHint("selectConfirm", "submit") +
+            "  " +
+            keyHint("newLine", "newline") +
+            "  " +
+            keyHint("selectCancel", "cancel") +
+            (hasExternalEditor ? `  ${appKeyHint(this.keybindings, "externalEditor", "external editor")}` : "");
+        this.addChild(new Text(hint, 1, 0));
+        this.addChild(new Spacer(1));
+        // Add bottom border
+        this.addChild(new DynamicBorder());
+    }
+    handleInput(keyData) {
+        const kb = getEditorKeybindings();
+        // Escape or Ctrl+C to cancel
+        if (kb.matches(keyData, "selectCancel")) {
+            this.onCancelCallback();
+            return;
+        }
+        // External editor (app keybinding)
+        if (this.keybindings.matches(keyData, "externalEditor")) {
+            this.openExternalEditor();
+            return;
+        }
+        // Forward to editor
+        this.editor.handleInput(keyData);
+    }
+    openExternalEditor() {
+        const editorCmd = process.env.VISUAL || process.env.EDITOR;
+        if (!editorCmd) {
+            return;
+        }
+        const currentText = this.editor.getText();
+        const tmpFile = path.join(os.tmpdir(), `indusagi-extension-editor-${Date.now()}.md`);
+        try {
+            fs.writeFileSync(tmpFile, currentText, "utf-8");
+            this.tui.stop();
+            const [editor, ...editorArgs] = editorCmd.split(" ");
+            const result = spawnSync(editor, [...editorArgs, tmpFile], {
+                stdio: "inherit",
+            });
+            if (result.status === 0) {
+                const newContent = fs.readFileSync(tmpFile, "utf-8").replace(/\n$/, "");
+                this.editor.setText(newContent);
+            }
+        }
+        finally {
+            try {
+                fs.unlinkSync(tmpFile);
+            }
+            catch {
+                // Ignore cleanup errors
+            }
+            this.tui.start();
+            // Force full re-render since external editor uses alternate screen
+            this.tui.requestRender(true);
+        }
+    }
+}

package/dist/modes/interactive/components/extension-input.js

@@ -0,0 +1,54 @@
+/**
+ * Simple text input component for extensions.
+ */
+import { Container, getEditorKeybindings, Input, Spacer, Text } from "indusagi/tui";
+import { theme } from "../theme/theme.js";
+import { CountdownTimer } from "./countdown-timer.js";
+import { DynamicBorder } from "./dynamic-border.js";
+import { keyHint } from "./keybinding-hints.js";
+export class ExtensionInputComponent extends Container {
+    get focused() {
+        return this._focused;
+    }
+    set focused(value) {
+        this._focused = value;
+        this.input.focused = value;
+    }
+    constructor(title, _placeholder, onSubmit, onCancel, opts) {
+        super();
+        // Focusable implementation - propagate to input for IME cursor positioning
+        this._focused = false;
+        this.onSubmitCallback = onSubmit;
+        this.onCancelCallback = onCancel;
+        this.baseTitle = title;
+        this.addChild(new DynamicBorder());
+        this.addChild(new Spacer(1));
+        this.titleText = new Text(theme.fg("accent", title), 1, 0);
+        this.addChild(this.titleText);
+        this.addChild(new Spacer(1));
+        if (opts?.timeout && opts.timeout > 0 && opts.tui) {
+            this.countdown = new CountdownTimer(opts.timeout, opts.tui, (s) => this.titleText.setText(theme.fg("accent", `${this.baseTitle} (${s}s)`)), () => this.onCancelCallback());
+        }
+        this.input = new Input();
+        this.addChild(this.input);
+        this.addChild(new Spacer(1));
+        this.addChild(new Text(`${keyHint("selectConfirm", "submit")}  ${keyHint("selectCancel", "cancel")}`, 1, 0));
+        this.addChild(new Spacer(1));
+        this.addChild(new DynamicBorder());
+    }
+    handleInput(keyData) {
+        const kb = getEditorKeybindings();
+        if (kb.matches(keyData, "selectConfirm") || keyData === "\n") {
+            this.onSubmitCallback(this.input.getValue());
+        }
+        else if (kb.matches(keyData, "selectCancel")) {
+            this.onCancelCallback();
+        }
+        else {
+            this.input.handleInput(keyData);
+        }
+    }
+    dispose() {
+        this.countdown?.dispose();
+    }
+}

package/dist/modes/interactive/components/extension-selector.js

@@ -0,0 +1,70 @@
+/**
+ * Generic selector component for extensions.
+ * Displays a list of string options with keyboard navigation.
+ */
+import { Container, getEditorKeybindings, Spacer, Text } from "indusagi/tui";
+import { theme } from "../theme/theme.js";
+import { CountdownTimer } from "./countdown-timer.js";
+import { DynamicBorder } from "./dynamic-border.js";
+import { keyHint, rawKeyHint } from "./keybinding-hints.js";
+export class ExtensionSelectorComponent extends Container {
+    constructor(title, options, onSelect, onCancel, opts) {
+        super();
+        this.selectedIndex = 0;
+        this.options = options;
+        this.onSelectCallback = onSelect;
+        this.onCancelCallback = onCancel;
+        this.baseTitle = title;
+        this.addChild(new DynamicBorder());
+        this.addChild(new Spacer(1));
+        this.titleText = new Text(theme.fg("accent", title), 1, 0);
+        this.addChild(this.titleText);
+        this.addChild(new Spacer(1));
+        if (opts?.timeout && opts.timeout > 0 && opts.tui) {
+            this.countdown = new CountdownTimer(opts.timeout, opts.tui, (s) => this.titleText.setText(theme.fg("accent", `${this.baseTitle} (${s}s)`)), () => this.onCancelCallback());
+        }
+        this.listContainer = new Container();
+        this.addChild(this.listContainer);
+        this.addChild(new Spacer(1));
+        this.addChild(new Text(rawKeyHint("↑↓", "navigate") +
+            "  " +
+            keyHint("selectConfirm", "select") +
+            "  " +
+            keyHint("selectCancel", "cancel"), 1, 0));
+        this.addChild(new Spacer(1));
+        this.addChild(new DynamicBorder());
+        this.updateList();
+    }
+    updateList() {
+        this.listContainer.clear();
+        for (let i = 0; i < this.options.length; i++) {
+            const isSelected = i === this.selectedIndex;
+            const text = isSelected
+                ? theme.fg("accent", "→ ") + theme.fg("accent", this.options[i])
+                : `  ${theme.fg("text", this.options[i])}`;
+            this.listContainer.addChild(new Text(text, 1, 0));
+        }
+    }
+    handleInput(keyData) {
+        const kb = getEditorKeybindings();
+        if (kb.matches(keyData, "selectUp") || keyData === "k") {
+            this.selectedIndex = Math.max(0, this.selectedIndex - 1);
+            this.updateList();
+        }
+        else if (kb.matches(keyData, "selectDown") || keyData === "j") {
+            this.selectedIndex = Math.min(this.options.length - 1, this.selectedIndex + 1);
+            this.updateList();
+        }
+        else if (kb.matches(keyData, "selectConfirm") || keyData === "\n") {
+            const selected = this.options[this.selectedIndex];
+            if (selected)
+                this.onSelectCallback(selected);
+        }
+        else if (kb.matches(keyData, "selectCancel")) {
+            this.onCancelCallback();
+        }
+    }
+    dispose() {
+        this.countdown?.dispose();
+    }
+}

package/dist/modes/interactive/components/footer.js

@@ -0,0 +1,213 @@
+import { truncateToWidth, visibleWidth } from "indusagi/tui";
+import { theme } from "../theme/theme.js";
+/**
+ * Sanitize text for display in a single-line status.
+ * Removes newlines, tabs, carriage returns, and other control characters.
+ */
+function sanitizeStatusText(text) {
+    // Replace newlines, tabs, carriage returns with space, then collapse multiple spaces
+    return text
+        .replace(/[\r\n\t]/g, " ")
+        .replace(/ +/g, " ")
+        .trim();
+}
+/**
+ * Format token counts (similar to web-ui)
+ */
+function formatTokens(count) {
+    if (count < 1000)
+        return count.toString();
+    if (count < 10000)
+        return `${(count / 1000).toFixed(1)}k`;
+    if (count < 1000000)
+        return `${Math.round(count / 1000)}k`;
+    if (count < 10000000)
+        return `${(count / 1000000).toFixed(1)}M`;
+    return `${Math.round(count / 1000000)}M`;
+}
+/**
+ * Footer component that shows pwd, token stats, and context usage.
+ * Computes token/context stats from session, gets git branch and extension statuses from provider.
+ */
+export class FooterComponent {
+    constructor(session, footerData) {
+        this.session = session;
+        this.footerData = footerData;
+        this.autoCompactEnabled = true;
+    }
+    setAutoCompactEnabled(enabled) {
+        this.autoCompactEnabled = enabled;
+    }
+    /**
+     * No-op: git branch caching now handled by provider.
+     * Kept for compatibility with existing call sites in interactive-mode.
+     */
+    invalidate() {
+        // No-op: git branch is cached/invalidated by provider
+    }
+    /**
+     * Clean up resources.
+     * Git watcher cleanup now handled by provider.
+     */
+    dispose() {
+        // Git watcher cleanup handled by provider
+    }
+    render(width) {
+        const state = this.session.state;
+        // Calculate cumulative usage from ALL session entries (not just post-compaction messages)
+        let totalInput = 0;
+        let totalOutput = 0;
+        let totalCacheRead = 0;
+        let totalCacheWrite = 0;
+        let totalCost = 0;
+        for (const entry of this.session.sessionManager.getEntries()) {
+            if (entry.type === "message" && entry.message.role === "assistant") {
+                totalInput += entry.message.usage.input;
+                totalOutput += entry.message.usage.output;
+                totalCacheRead += entry.message.usage.cacheRead;
+                totalCacheWrite += entry.message.usage.cacheWrite;
+                totalCost += entry.message.usage.cost.total;
+            }
+        }
+        // Get last assistant message for context percentage calculation (skip aborted messages)
+        const lastAssistantMessage = state.messages
+            .slice()
+            .reverse()
+            .find((m) => m.role === "assistant" && m.stopReason !== "aborted");
+        // Calculate context percentage from last message (input + output + cacheRead + cacheWrite)
+        const contextTokens = lastAssistantMessage
+            ? lastAssistantMessage.usage.input +
+                lastAssistantMessage.usage.output +
+                lastAssistantMessage.usage.cacheRead +
+                lastAssistantMessage.usage.cacheWrite
+            : 0;
+        const contextWindow = state.model?.contextWindow || 0;
+        const contextPercentValue = contextWindow > 0 ? (contextTokens / contextWindow) * 100 : 0;
+        const contextPercent = contextPercentValue.toFixed(1);
+        // Replace home directory with ~
+        let pwd = process.cwd();
+        const home = process.env.HOME || process.env.USERPROFILE;
+        if (home && pwd.startsWith(home)) {
+            pwd = `~${pwd.slice(home.length)}`;
+        }
+        // Add git branch if available
+        const branch = this.footerData.getGitBranch();
+        if (branch) {
+            pwd = `${pwd} (${branch})`;
+        }
+        // Add session name if set
+        const sessionName = this.session.sessionManager.getSessionName();
+        if (sessionName) {
+            pwd = `${pwd} • ${sessionName}`;
+        }
+        // Truncate path if too long to fit width
+        if (pwd.length > width) {
+            const half = Math.floor(width / 2) - 2;
+            if (half > 0) {
+                const start = pwd.slice(0, half);
+                const end = pwd.slice(-(half - 1));
+                pwd = `${start}...${end}`;
+            }
+            else {
+                pwd = pwd.slice(0, Math.max(1, width));
+            }
+        }
+        // Build stats line
+        const statsParts = [];
+        if (totalInput)
+            statsParts.push(`↑${formatTokens(totalInput)}`);
+        if (totalOutput)
+            statsParts.push(`↓${formatTokens(totalOutput)}`);
+        if (totalCacheRead)
+            statsParts.push(`R${formatTokens(totalCacheRead)}`);
+        if (totalCacheWrite)
+            statsParts.push(`W${formatTokens(totalCacheWrite)}`);
+        // Show cost with "(sub)" indicator if using OAuth subscription
+        const usingSubscription = state.model ? this.session.modelRegistry.isUsingOAuth(state.model) : false;
+        if (totalCost || usingSubscription) {
+            const costStr = `$${totalCost.toFixed(3)}${usingSubscription ? " (sub)" : ""}`;
+            statsParts.push(costStr);
+        }
+        // Colorize context percentage based on usage
+        let contextPercentStr;
+        const autoIndicator = this.autoCompactEnabled ? " (auto)" : "";
+        const contextPercentDisplay = `${contextPercent}%/${formatTokens(contextWindow)}${autoIndicator}`;
+        if (contextPercentValue > 90) {
+            contextPercentStr = theme.fg("error", contextPercentDisplay);
+        }
+        else if (contextPercentValue > 70) {
+            contextPercentStr = theme.fg("warning", contextPercentDisplay);
+        }
+        else {
+            contextPercentStr = contextPercentDisplay;
+        }
+        statsParts.push(contextPercentStr);
+        let statsLeft = statsParts.join(" ");
+        // Add model name on the right side, plus thinking level if model supports it
+        const modelName = state.model?.id || "no-model";
+        // Add thinking level hint if model supports reasoning and thinking is enabled
+        let rightSide = modelName;
+        if (state.model?.reasoning) {
+            const thinkingLevel = state.thinkingLevel || "off";
+            if (thinkingLevel !== "off") {
+                rightSide = `${modelName} • ${thinkingLevel}`;
+            }
+        }
+        // Prepend the provider in parenthesis to the right side if there's multiple providers
+        if (this.footerData.getAvailableProviderCount() > 1 && state.model) {
+            rightSide = `(${state.model.provider}) ${rightSide}`;
+        }
+        let statsLeftWidth = visibleWidth(statsLeft);
+        const rightSideWidth = visibleWidth(rightSide);
+        // If statsLeft is too wide, truncate it
+        if (statsLeftWidth > width) {
+            // Truncate statsLeft to fit width (no room for right side)
+            const plainStatsLeft = statsLeft.replace(/\x1b\[[0-9;]*m/g, "");
+            statsLeft = `${plainStatsLeft.substring(0, width - 3)}...`;
+            statsLeftWidth = visibleWidth(statsLeft);
+        }
+        // Calculate available space for padding (minimum 2 spaces between stats and model)
+        const minPadding = 2;
+        const totalNeeded = statsLeftWidth + minPadding + rightSideWidth;
+        let statsLine;
+        if (totalNeeded <= width) {
+            // Both fit - add padding to right-align model
+            const padding = " ".repeat(width - statsLeftWidth - rightSideWidth);
+            statsLine = statsLeft + padding + rightSide;
+        }
+        else {
+            // Need to truncate right side
+            const availableForRight = width - statsLeftWidth - minPadding;
+            if (availableForRight > 3) {
+                // Truncate to fit (strip ANSI codes for length calculation, then truncate raw string)
+                const plainRightSide = rightSide.replace(/\x1b\[[0-9;]*m/g, "");
+                const truncatedPlain = plainRightSide.substring(0, availableForRight);
+                // For simplicity, just use plain truncated version (loses color, but fits)
+                const padding = " ".repeat(width - statsLeftWidth - truncatedPlain.length);
+                statsLine = statsLeft + padding + truncatedPlain;
+            }
+            else {
+                // Not enough space for right side at all
+                statsLine = statsLeft;
+            }
+        }
+        // Apply dim to each part separately. statsLeft may contain color codes (for context %)
+        // that end with a reset, which would clear an outer dim wrapper. So we dim the parts
+        // before and after the colored section independently.
+        const dimStatsLeft = theme.fg("dim", statsLeft);
+        const remainder = statsLine.slice(statsLeft.length); // padding + rightSide
+        const dimRemainder = theme.fg("dim", remainder);
+        const lines = [theme.fg("dim", pwd), dimStatsLeft + dimRemainder];
+        // Add extension statuses on a single line, sorted by key alphabetically
+        const extensionStatuses = this.footerData.getExtensionStatuses();
+        if (extensionStatuses.size > 0) {
+            const sortedStatuses = Array.from(extensionStatuses.entries())
+                .sort(([a], [b]) => a.localeCompare(b))
+                .map(([, text]) => sanitizeStatusText(text));
+            const statusLine = sortedStatuses.join(" ");
+            // Truncate to terminal width with dim ellipsis for consistency with footer style
+            lines.push(truncateToWidth(statusLine, width, theme.fg("dim", "...")));
+        }
+        return lines;
+    }
+}

package/dist/modes/interactive/components/index.js

@@ -0,0 +1,31 @@
+// UI Components for extensions
+export { ArminComponent } from "./armin.js";
+export { AssistantMessageComponent } from "./assistant-message.js";
+export { BashExecutionComponent } from "./bash-execution.js";
+export { BorderedLoader } from "./bordered-loader.js";
+export { BranchSummaryMessageComponent } from "./branch-summary-message.js";
+export { CompactionSummaryMessageComponent } from "./compaction-summary-message.js";
+export { CustomEditor } from "./custom-editor.js";
+export { CustomMessageComponent } from "./custom-message.js";
+export { renderDiff } from "./diff.js";
+export { DynamicBorder } from "./dynamic-border.js";
+export { ExtensionEditorComponent } from "./extension-editor.js";
+export { ExtensionInputComponent } from "./extension-input.js";
+export { ExtensionSelectorComponent } from "./extension-selector.js";
+export { FooterComponent } from "./footer.js";
+export { appKey, appKeyHint, editorKey, keyHint, rawKeyHint } from "./keybinding-hints.js";
+export { LoginDialogComponent } from "./login-dialog.js";
+export { ModelSelectorComponent } from "./model-selector.js";
+export { OAuthSelectorComponent } from "./oauth-selector.js";
+export { ScopedModelsSelectorComponent } from "./scoped-models-selector.js";
+export { SessionSelectorComponent } from "./session-selector.js";
+export { SettingsSelectorComponent } from "./settings-selector.js";
+export { ShowImagesSelectorComponent } from "./show-images-selector.js";
+export { SkillInvocationMessageComponent } from "./skill-invocation-message.js";
+export { ThemeSelectorComponent } from "./theme-selector.js";
+export { ThinkingSelectorComponent } from "./thinking-selector.js";
+export { ToolExecutionComponent } from "./tool-execution.js";
+export { TreeSelectorComponent } from "./tree-selector.js";
+export { UserMessageComponent } from "./user-message.js";
+export { UserMessageSelectorComponent } from "./user-message-selector.js";
+export { truncateToVisualLines } from "./visual-truncate.js";

package/dist/modes/interactive/components/keybinding-hints.js

@@ -0,0 +1,60 @@
+/**
+ * Utilities for formatting keybinding hints in the UI.
+ */
+import { getEditorKeybindings } from "indusagi/tui";
+import { theme } from "../theme/theme.js";
+/**
+ * Format keys array as display string (e.g., ["ctrl+c", "escape"] -> "ctrl+c/escape").
+ */
+function formatKeys(keys) {
+    if (keys.length === 0)
+        return "";
+    if (keys.length === 1)
+        return keys[0];
+    return keys.join("/");
+}
+/**
+ * Get display string for an editor action.
+ */
+export function editorKey(action) {
+    return formatKeys(getEditorKeybindings().getKeys(action));
+}
+/**
+ * Get display string for an app action.
+ */
+export function appKey(keybindings, action) {
+    return formatKeys(keybindings.getKeys(action));
+}
+/**
+ * Format a keybinding hint with consistent styling: dim key, muted description.
+ * Looks up the key from editor keybindings automatically.
+ *
+ * @param action - Editor action name (e.g., "selectConfirm", "expandTools")
+ * @param description - Description text (e.g., "to expand", "cancel")
+ * @returns Formatted string with dim key and muted description
+ */
+export function keyHint(action, description) {
+    return theme.fg("dim", editorKey(action)) + theme.fg("muted", ` ${description}`);
+}
+/**
+ * Format a keybinding hint for app-level actions.
+ * Requires the KeybindingsManager instance.
+ *
+ * @param keybindings - KeybindingsManager instance
+ * @param action - App action name (e.g., "interrupt", "externalEditor")
+ * @param description - Description text
+ * @returns Formatted string with dim key and muted description
+ */
+export function appKeyHint(keybindings, action, description) {
+    return theme.fg("dim", appKey(keybindings, action)) + theme.fg("muted", ` ${description}`);
+}
+/**
+ * Format a raw key string with description (for non-configurable keys like ↑↓).
+ *
+ * @param key - Raw key string
+ * @param description - Description text
+ * @returns Formatted string with dim key and muted description
+ */
+export function rawKeyHint(key, description) {
+    return theme.fg("dim", key) + theme.fg("muted", ` ${description}`);
+}