/** * Interactive mode for the coding agent. * Handles TUI rendering and user interaction, delegating business logic to AgentSession. */ import * as crypto from "node:crypto"; import * as fs from "node:fs"; import * as os from "node:os"; import * as path from "node:path"; import type { AgentMessage } from "@mariozechner/pi-agent-core"; import { type AssistantMessage, getOAuthProviders, type ImageContent, type Message, type Model, type OAuthProvider, } from "@mariozechner/pi-ai"; import type { AutocompleteItem, EditorAction, EditorComponent, EditorTheme, KeyId, MarkdownTheme, OverlayHandle, OverlayOptions, SlashCommand, } from "@mariozechner/pi-tui"; import { CombinedAutocompleteProvider, type Component, Container, fuzzyFilter, Loader, Markdown, matchesKey, ProcessTerminal, Spacer, Text, TruncatedText, TUI, visibleWidth, } from "@mariozechner/pi-tui"; import { spawn, spawnSync } from "child_process"; import { APP_NAME, getAuthPath, getDebugLogPath, getShareViewerUrl, isBunBinary, isBunRuntime, VERSION, } from "../../config.js"; import { type AgentSession, type AgentSessionEvent, parseSkillBlock } from "../../core/agent-session.js"; import type { CompactionResult } from "../../core/compaction/index.js"; import type { ExtensionContext, ExtensionRunner, ExtensionUIContext, ExtensionUIDialogOptions, ExtensionWidgetOptions, } from "../../core/extensions/index.js"; import { FooterDataProvider, type ReadonlyFooterDataProvider } from "../../core/footer-data-provider.js"; import { type AppAction, KeybindingsManager } from "../../core/keybindings.js"; import { createCompactionSummaryMessage } from "../../core/messages.js"; import { resolveModelScope } from "../../core/model-resolver.js"; import type { ResourceDiagnostic } from "../../core/resource-loader.js"; import { type SessionContext, SessionManager } from "../../core/session-manager.js"; import type { TruncationResult } from "../../core/tools/truncate.js"; import { getChangelogPath, getNewEntries, parseChangelog } from "../../utils/changelog.js"; import { copyToClipboard } from "../../utils/clipboard.js"; import { extensionForImageMimeType, readClipboardImage } from "../../utils/clipboard-image.js"; import { ensureTool } from "../../utils/tools-manager.js"; import { ArminComponent } from "./components/armin.js"; import { AssistantMessageComponent } from "./components/assistant-message.js"; import { BashExecutionComponent } from "./components/bash-execution.js"; import { BorderedLoader } from "./components/bordered-loader.js"; import { BranchSummaryMessageComponent } from "./components/branch-summary-message.js"; import { CompactionSummaryMessageComponent } from "./components/compaction-summary-message.js"; import { CustomEditor } from "./components/custom-editor.js"; import { CustomMessageComponent } from "./components/custom-message.js"; import { DynamicBorder } from "./components/dynamic-border.js"; import { ExtensionEditorComponent } from "./components/extension-editor.js"; import { ExtensionInputComponent } from "./components/extension-input.js"; import { ExtensionSelectorComponent } from "./components/extension-selector.js"; import { FooterComponent } from "./components/footer.js"; import { appKey, appKeyHint, editorKey, keyHint, rawKeyHint } from "./components/keybinding-hints.js"; import { LoginDialogComponent } from "./components/login-dialog.js"; import { ModelSelectorComponent } from "./components/model-selector.js"; import { OAuthSelectorComponent } from "./components/oauth-selector.js"; import { ScopedModelsSelectorComponent } from "./components/scoped-models-selector.js"; import { SessionSelectorComponent } from "./components/session-selector.js"; import { SettingsSelectorComponent } from "./components/settings-selector.js"; import { SkillInvocationMessageComponent } from "./components/skill-invocation-message.js"; import { ToolExecutionComponent } from "./components/tool-execution.js"; import { TreeSelectorComponent } from "./components/tree-selector.js"; import { UserMessageComponent } from "./components/user-message.js"; import { UserMessageSelectorComponent } from "./components/user-message-selector.js"; import { getAvailableThemes, getAvailableThemesWithPaths, getEditorTheme, getMarkdownTheme, getThemeByName, initTheme, onThemeChange, setRegisteredThemes, setTheme, setThemeInstance, Theme, type ThemeColor, theme, } from "./theme/theme.js"; /** Interface for components that can be expanded/collapsed */ interface Expandable { setExpanded(expanded: boolean): void; } function isExpandable(obj: unknown): obj is Expandable { return typeof obj === "object" && obj !== null && "setExpanded" in obj && typeof obj.setExpanded === "function"; } type CompactionQueuedMessage = { text: string; mode: "steer" | "followUp"; }; /** * Options for InteractiveMode initialization. */ export interface InteractiveModeOptions { /** Providers that were migrated to auth.json (shows warning) */ migratedProviders?: string[]; /** Warning message if session model couldn't be restored */ modelFallbackMessage?: string; /** Initial message to send on startup (can include @file content) */ initialMessage?: string; /** Images to attach to the initial message */ initialImages?: ImageContent[]; /** Additional messages to send after the initial message */ initialMessages?: string[]; /** Force verbose startup (overrides quietStartup setting) */ verbose?: boolean; } export class InteractiveMode { private session: AgentSession; private ui: TUI; private chatContainer: Container; private pendingMessagesContainer: Container; private statusContainer: Container; private defaultEditor: CustomEditor; private editor: EditorComponent; private autocompleteProvider: CombinedAutocompleteProvider | undefined; private fdPath: string | undefined; private editorContainer: Container; private footer: FooterComponent; private footerDataProvider: FooterDataProvider; private keybindings: KeybindingsManager; private version: string; private isInitialized = false; private onInputCallback?: (text: string) => void; private loadingAnimation: Loader | undefined = undefined; private pendingWorkingMessage: string | undefined = undefined; private readonly defaultWorkingMessage = "Working..."; private lastSigintTime = 0; private lastEscapeTime = 0; private changelogMarkdown: string | undefined = undefined; // Status line tracking (for mutating immediately-sequential status updates) private lastStatusSpacer: Spacer | undefined = undefined; private lastStatusText: Text | undefined = undefined; // Streaming message tracking private streamingComponent: AssistantMessageComponent | undefined = undefined; private streamingMessage: AssistantMessage | undefined = undefined; // Tool execution tracking: toolCallId -> component private pendingTools = new Map(); // Tool output expansion state private toolOutputExpanded = false; // Thinking block visibility state private hideThinkingBlock = false; // Skill commands: command name -> skill file path private skillCommands = new Map(); // Agent subscription unsubscribe function private unsubscribe?: () => void; // Track if editor is in bash mode (text starts with !) private isBashMode = false; // Track current bash execution component private bashComponent: BashExecutionComponent | undefined = undefined; // Track pending bash components (shown in pending area, moved to chat on submit) private pendingBashComponents: BashExecutionComponent[] = []; // Auto-compaction state private autoCompactionLoader: Loader | undefined = undefined; private autoCompactionEscapeHandler?: () => void; // Auto-retry state private retryLoader: Loader | undefined = undefined; private retryEscapeHandler?: () => void; // Messages queued while compaction is running private compactionQueuedMessages: CompactionQueuedMessage[] = []; // Shutdown state private shutdownRequested = false; // Extension UI state private extensionSelector: ExtensionSelectorComponent | undefined = undefined; private extensionInput: ExtensionInputComponent | undefined = undefined; private extensionEditor: ExtensionEditorComponent | undefined = undefined; // Extension widgets (components rendered above/below the editor) private extensionWidgetsAbove = new Map(); private extensionWidgetsBelow = new Map(); private widgetContainerAbove!: Container; private widgetContainerBelow!: Container; // Custom footer from extension (undefined = use built-in footer) private customFooter: (Component & { dispose?(): void }) | undefined = undefined; // Built-in header (logo + keybinding hints + changelog) private builtInHeader: Component | undefined = undefined; // Custom header from extension (undefined = use built-in header) private customHeader: (Component & { dispose?(): void }) | undefined = undefined; // Convenience accessors private get agent() { return this.session.agent; } private get sessionManager() { return this.session.sessionManager; } private get settingsManager() { return this.session.settingsManager; } constructor( session: AgentSession, private options: InteractiveModeOptions = {}, ) { this.session = session; this.version = VERSION; this.ui = new TUI(new ProcessTerminal(), this.settingsManager.getShowHardwareCursor()); this.chatContainer = new Container(); this.pendingMessagesContainer = new Container(); this.statusContainer = new Container(); this.widgetContainerAbove = new Container(); this.widgetContainerBelow = new Container(); this.keybindings = KeybindingsManager.create(); const editorPaddingX = this.settingsManager.getEditorPaddingX(); this.defaultEditor = new CustomEditor(this.ui, getEditorTheme(), this.keybindings, { paddingX: editorPaddingX }); this.editor = this.defaultEditor; this.editorContainer = new Container(); this.editorContainer.addChild(this.editor as Component); this.footerDataProvider = new FooterDataProvider(); this.footer = new FooterComponent(session, this.footerDataProvider); this.footer.setAutoCompactEnabled(session.autoCompactionEnabled); // Load hide thinking block setting this.hideThinkingBlock = this.settingsManager.getHideThinkingBlock(); // Register themes from resource loader and initialize setRegisteredThemes(this.session.resourceLoader.getThemes().themes); initTheme(this.settingsManager.getTheme(), true); } private setupAutocomplete(fdPath: string | undefined): void { // Define commands for autocomplete const slashCommands: SlashCommand[] = [ { name: "settings", description: "Open settings menu" }, { name: "model", description: "Select model (opens selector UI)", getArgumentCompletions: (prefix: string): AutocompleteItem[] | null => { // Get available models (scoped or from registry) const models = this.session.scopedModels.length > 0 ? this.session.scopedModels.map((s) => s.model) : this.session.modelRegistry.getAvailable(); if (models.length === 0) return null; // Create items with provider/id format const items = models.map((m) => ({ id: m.id, provider: m.provider, label: `${m.provider}/${m.id}`, })); // Fuzzy filter by model ID + provider (allows "opus anthropic" to match) const filtered = fuzzyFilter(items, prefix, (item) => `${item.id} ${item.provider}`); if (filtered.length === 0) return null; return filtered.map((item) => ({ value: item.label, label: item.id, description: item.provider, })); }, }, { name: "scoped-models", description: "Enable/disable models for Ctrl+P cycling" }, { name: "export", description: "Export session to HTML file" }, { name: "share", description: "Share session as a secret GitHub gist" }, { name: "copy", description: "Copy last agent message to clipboard" }, { name: "name", description: "Set session display name" }, { name: "session", description: "Show session info and stats" }, { name: "changelog", description: "Show changelog entries" }, { name: "hotkeys", description: "Show all keyboard shortcuts" }, { name: "fork", description: "Create a new fork from a previous message" }, { name: "tree", description: "Navigate session tree (switch branches)" }, { name: "login", description: "Login with OAuth provider" }, { name: "logout", description: "Logout from OAuth provider" }, { name: "new", description: "Start a new session" }, { name: "compact", description: "Manually compact the session context" }, { name: "resume", description: "Resume a different session" }, { name: "reload", description: "Reload extensions, skills, prompts, and themes" }, ]; // Convert prompt templates to SlashCommand format for autocomplete const templateCommands: SlashCommand[] = this.session.promptTemplates.map((cmd) => ({ name: cmd.name, description: cmd.description, })); // Convert extension commands to SlashCommand format const extensionCommands: SlashCommand[] = (this.session.extensionRunner?.getRegisteredCommands() ?? []).map( (cmd) => ({ name: cmd.name, description: cmd.description ?? "(extension command)", getArgumentCompletions: cmd.getArgumentCompletions, }), ); // Build skill commands from session.skills (if enabled) this.skillCommands.clear(); const skillCommandList: SlashCommand[] = []; if (this.settingsManager.getEnableSkillCommands()) { for (const skill of this.session.resourceLoader.getSkills().skills) { const commandName = `skill:${skill.name}`; this.skillCommands.set(commandName, skill.filePath); skillCommandList.push({ name: commandName, description: skill.description }); } } // Setup autocomplete this.autocompleteProvider = new CombinedAutocompleteProvider( [...slashCommands, ...templateCommands, ...extensionCommands, ...skillCommandList], process.cwd(), fdPath, ); this.defaultEditor.setAutocompleteProvider(this.autocompleteProvider); } private rebuildAutocomplete(): void { this.setupAutocomplete(this.fdPath); } async init(): Promise { if (this.isInitialized) return; // Load changelog (only show new entries, skip for resumed sessions) this.changelogMarkdown = this.getChangelogForDisplay(); // Setup autocomplete with fd tool for file path completion this.fdPath = await ensureTool("fd"); this.setupAutocomplete(this.fdPath); // Add header with keybindings from config (unless silenced) if (this.options.verbose || !this.settingsManager.getQuietStartup()) { const logo = theme.bold(theme.fg("accent", APP_NAME)) + theme.fg("dim", ` v${this.version}`); // Build startup instructions using keybinding hint helpers const kb = this.keybindings; const hint = (action: AppAction, desc: string) => appKeyHint(kb, action, desc); const instructions = [ hint("interrupt", "to interrupt"), hint("clear", "to clear"), rawKeyHint(`${appKey(kb, "clear")} twice`, "to exit"), hint("exit", "to exit (empty)"), hint("suspend", "to suspend"), keyHint("deleteToLineEnd", "to delete to end"), hint("cycleThinkingLevel", "to cycle thinking"), rawKeyHint(`${appKey(kb, "cycleModelForward")}/${appKey(kb, "cycleModelBackward")}`, "to cycle models"), hint("selectModel", "to select model"), hint("expandTools", "to expand tools"), hint("toggleThinking", "to toggle thinking"), hint("externalEditor", "for external editor"), rawKeyHint("/", "for commands"), rawKeyHint("!", "to run bash"), rawKeyHint("!!", "to run bash (no context)"), hint("followUp", "to queue follow-up"), hint("dequeue", "to edit all queued messages"), hint("pasteImage", "to paste image"), rawKeyHint("drop files", "to attach"), ].join("\n"); this.builtInHeader = new Text(`${logo}\n${instructions}`, 1, 0); // Setup UI layout this.ui.addChild(new Spacer(1)); this.ui.addChild(this.builtInHeader); this.ui.addChild(new Spacer(1)); // Add changelog if provided if (this.changelogMarkdown) { this.ui.addChild(new DynamicBorder()); if (this.settingsManager.getCollapseChangelog()) { const versionMatch = this.changelogMarkdown.match(/##\s+\[?(\d+\.\d+\.\d+)\]?/); const latestVersion = versionMatch ? versionMatch[1] : this.version; const condensedText = `Updated to v${latestVersion}. Use ${theme.bold("/changelog")} to view full changelog.`; this.ui.addChild(new Text(condensedText, 1, 0)); } else { this.ui.addChild(new Text(theme.bold(theme.fg("accent", "What's New")), 1, 0)); this.ui.addChild(new Spacer(1)); this.ui.addChild(new Markdown(this.changelogMarkdown.trim(), 1, 0, this.getMarkdownThemeWithSettings())); this.ui.addChild(new Spacer(1)); } this.ui.addChild(new DynamicBorder()); } } else { // Minimal header when silenced this.builtInHeader = new Text("", 0, 0); if (this.changelogMarkdown) { // Still show changelog notification even in silent mode this.ui.addChild(new Spacer(1)); const versionMatch = this.changelogMarkdown.match(/##\s+\[?(\d+\.\d+\.\d+)\]?/); const latestVersion = versionMatch ? versionMatch[1] : this.version; const condensedText = `Updated to v${latestVersion}. Use ${theme.bold("/changelog")} to view full changelog.`; this.ui.addChild(new Text(condensedText, 1, 0)); } } this.ui.addChild(this.chatContainer); this.ui.addChild(this.pendingMessagesContainer); this.ui.addChild(this.statusContainer); this.renderWidgets(); // Initialize with default spacer this.ui.addChild(this.widgetContainerAbove); this.ui.addChild(this.editorContainer); this.ui.addChild(this.widgetContainerBelow); this.ui.addChild(this.footer); this.ui.setFocus(this.editor); this.setupKeyHandlers(); this.setupEditorSubmitHandler(); // Start the UI this.ui.start(); this.isInitialized = true; // Set terminal title this.updateTerminalTitle(); // Initialize extensions with TUI-based UI context await this.initExtensions(); // Subscribe to agent events this.subscribeToAgent(); // Set up theme file watcher onThemeChange(() => { this.ui.invalidate(); this.updateEditorBorderColor(); this.ui.requestRender(); }); // Set up git branch watcher (uses provider instead of footer) this.footerDataProvider.onBranchChange(() => { this.ui.requestRender(); }); // Initialize available provider count for footer display await this.updateAvailableProviderCount(); } /** * Update terminal title with session name and cwd. */ private updateTerminalTitle(): void { const cwdBasename = path.basename(process.cwd()); const sessionName = this.sessionManager.getSessionName(); if (sessionName) { this.ui.terminal.setTitle(`π - ${sessionName} - ${cwdBasename}`); } else { this.ui.terminal.setTitle(`π - ${cwdBasename}`); } } /** * Run the interactive mode. This is the main entry point. * Initializes the UI, shows warnings, processes initial messages, and starts the interactive loop. */ async run(): Promise { await this.init(); // Start version check asynchronously this.checkForNewVersion().then((newVersion) => { if (newVersion) { this.showNewVersionNotification(newVersion); } }); this.renderInitialMessages(); // Show startup warnings const { migratedProviders, modelFallbackMessage, initialMessage, initialImages, initialMessages } = this.options; if (migratedProviders && migratedProviders.length > 0) { this.showWarning(`Migrated credentials to auth.json: ${migratedProviders.join(", ")}`); } const modelsJsonError = this.session.modelRegistry.getError(); if (modelsJsonError) { this.showError(`models.json error: ${modelsJsonError}`); } if (modelFallbackMessage) { this.showWarning(modelFallbackMessage); } // Process initial messages if (initialMessage) { try { await this.session.prompt(initialMessage, { images: initialImages }); } catch (error: unknown) { const errorMessage = error instanceof Error ? error.message : "Unknown error occurred"; this.showError(errorMessage); } } if (initialMessages) { for (const message of initialMessages) { try { await this.session.prompt(message); } catch (error: unknown) { const errorMessage = error instanceof Error ? error.message : "Unknown error occurred"; this.showError(errorMessage); } } } // Main interactive loop while (true) { const userInput = await this.getUserInput(); try { await this.session.prompt(userInput); } catch (error: unknown) { const errorMessage = error instanceof Error ? error.message : "Unknown error occurred"; this.showError(errorMessage); } } } /** * Check npm registry for a newer version. */ private async checkForNewVersion(): Promise { if (process.env.PI_SKIP_VERSION_CHECK) return undefined; try { const response = await fetch("https://registry.npmjs.org/@mariozechner/pi-coding-agent/latest"); if (!response.ok) return undefined; const data = (await response.json()) as { version?: string }; const latestVersion = data.version; if (latestVersion && latestVersion !== this.version) { return latestVersion; } return undefined; } catch { return undefined; } } /** * Get changelog entries to display on startup. * Only shows new entries since last seen version, skips for resumed sessions. */ private getChangelogForDisplay(): string | undefined { // Skip changelog for resumed/continued sessions (already have messages) if (this.session.state.messages.length > 0) { return undefined; } const lastVersion = this.settingsManager.getLastChangelogVersion(); const changelogPath = getChangelogPath(); const entries = parseChangelog(changelogPath); if (!lastVersion) { // Fresh install - just record the version, don't show changelog this.settingsManager.setLastChangelogVersion(VERSION); return undefined; } else { const newEntries = getNewEntries(entries, lastVersion); if (newEntries.length > 0) { this.settingsManager.setLastChangelogVersion(VERSION); return newEntries.map((e) => e.content).join("\n\n"); } } return undefined; } private getMarkdownThemeWithSettings(): MarkdownTheme { return { ...getMarkdownTheme(), codeBlockIndent: this.settingsManager.getCodeBlockIndent(), }; } // ========================================================================= // Extension System // ========================================================================= private formatDisplayPath(p: string): string { const home = os.homedir(); let result = p; // Replace home directory with ~ if (result.startsWith(home)) { result = `~${result.slice(home.length)}`; } return result; } /** * Get a short path relative to the package root for display. */ private getShortPath(fullPath: string, source: string): string { // For npm packages, show path relative to node_modules/pkg/ const npmMatch = fullPath.match(/node_modules\/(@?[^/]+(?:\/[^/]+)?)\/(.*)/); if (npmMatch && source.startsWith("npm:")) { return npmMatch[2]; } // For git packages, show path relative to repo root const gitMatch = fullPath.match(/git\/[^/]+\/[^/]+\/(.*)/); if (gitMatch && source.startsWith("git:")) { return gitMatch[1]; } // For local/auto, just use formatDisplayPath return this.formatDisplayPath(fullPath); } private getDisplaySourceInfo( source: string, scope: string, ): { label: string; scopeLabel?: string; color: "accent" | "muted" } { if (source === "local") { if (scope === "user") { return { label: "user", color: "muted" }; } if (scope === "project") { return { label: "project", color: "muted" }; } if (scope === "temporary") { return { label: "path", scopeLabel: "temp", color: "muted" }; } return { label: "path", color: "muted" }; } if (source === "cli") { return { label: "path", scopeLabel: scope === "temporary" ? "temp" : undefined, color: "muted" }; } const scopeLabel = scope === "user" ? "user" : scope === "project" ? "project" : scope === "temporary" ? "temp" : undefined; return { label: source, scopeLabel, color: "accent" }; } private getScopeGroup(source: string, scope: string): "user" | "project" | "path" { if (source === "cli" || scope === "temporary") return "path"; if (scope === "user") return "user"; if (scope === "project") return "project"; return "path"; } private isPackageSource(source: string): boolean { return source.startsWith("npm:") || source.startsWith("git:"); } private buildScopeGroups( paths: string[], metadata: Map, ): Array<{ scope: "user" | "project" | "path"; paths: string[]; packages: Map }> { const groups: Record< "user" | "project" | "path", { scope: "user" | "project" | "path"; paths: string[]; packages: Map } > = { user: { scope: "user", paths: [], packages: new Map() }, project: { scope: "project", paths: [], packages: new Map() }, path: { scope: "path", paths: [], packages: new Map() }, }; for (const p of paths) { const meta = this.findMetadata(p, metadata); const source = meta?.source ?? "local"; const scope = meta?.scope ?? "project"; const groupKey = this.getScopeGroup(source, scope); const group = groups[groupKey]; if (this.isPackageSource(source)) { const list = group.packages.get(source) ?? []; list.push(p); group.packages.set(source, list); } else { group.paths.push(p); } } return [groups.user, groups.project, groups.path].filter( (group) => group.paths.length > 0 || group.packages.size > 0, ); } private formatScopeGroups( groups: Array<{ scope: "user" | "project" | "path"; paths: string[]; packages: Map }>, options: { formatPath: (p: string) => string; formatPackagePath: (p: string, source: string) => string; }, ): string { const lines: string[] = []; for (const group of groups) { lines.push(` ${theme.fg("accent", group.scope)}`); const sortedPaths = [...group.paths].sort((a, b) => a.localeCompare(b)); for (const p of sortedPaths) { lines.push(theme.fg("dim", ` ${options.formatPath(p)}`)); } const sortedPackages = Array.from(group.packages.entries()).sort(([a], [b]) => a.localeCompare(b)); for (const [source, paths] of sortedPackages) { lines.push(` ${theme.fg("mdLink", source)}`); const sortedPackagePaths = [...paths].sort((a, b) => a.localeCompare(b)); for (const p of sortedPackagePaths) { lines.push(theme.fg("dim", ` ${options.formatPackagePath(p, source)}`)); } } } return lines.join("\n"); } /** * Find metadata for a path, checking parent directories if exact match fails. * Package manager stores metadata for directories, but we display file paths. */ private findMetadata( p: string, metadata: Map, ): { source: string; scope: string; origin: string } | undefined { // Try exact match first const exact = metadata.get(p); if (exact) return exact; // Try parent directories (package manager stores directory paths) let current = p; while (current.includes("/")) { current = current.substring(0, current.lastIndexOf("/")); const parent = metadata.get(current); if (parent) return parent; } return undefined; } /** * Format a path with its source/scope info from metadata. */ private formatPathWithSource( p: string, metadata: Map, ): string { const meta = this.findMetadata(p, metadata); if (meta) { const shortPath = this.getShortPath(p, meta.source); const { label, scopeLabel } = this.getDisplaySourceInfo(meta.source, meta.scope); const labelText = scopeLabel ? `${label} (${scopeLabel})` : label; return `${labelText} ${shortPath}`; } return this.formatDisplayPath(p); } /** * Format resource diagnostics with nice collision display using metadata. */ private formatDiagnostics( diagnostics: readonly ResourceDiagnostic[], metadata: Map, ): string { const lines: string[] = []; // Group collision diagnostics by name const collisions = new Map(); const otherDiagnostics: ResourceDiagnostic[] = []; for (const d of diagnostics) { if (d.type === "collision" && d.collision) { const list = collisions.get(d.collision.name) ?? []; list.push(d); collisions.set(d.collision.name, list); } else { otherDiagnostics.push(d); } } // Format collision diagnostics grouped by name for (const [name, collisionList] of collisions) { const first = collisionList[0]?.collision; if (!first) continue; lines.push(theme.fg("warning", ` "${name}" collision:`)); // Show winner lines.push( theme.fg("dim", ` ${theme.fg("success", "✓")} ${this.formatPathWithSource(first.winnerPath, metadata)}`), ); // Show all losers for (const d of collisionList) { if (d.collision) { lines.push( theme.fg( "dim", ` ${theme.fg("warning", "✗")} ${this.formatPathWithSource(d.collision.loserPath, metadata)} (skipped)`, ), ); } } } // Format other diagnostics (skill name collisions, parse errors, etc.) for (const d of otherDiagnostics) { if (d.path) { // Use metadata-aware formatting for paths const sourceInfo = this.formatPathWithSource(d.path, metadata); lines.push(theme.fg(d.type === "error" ? "error" : "warning", ` ${sourceInfo}`)); lines.push(theme.fg(d.type === "error" ? "error" : "warning", ` ${d.message}`)); } else { lines.push(theme.fg(d.type === "error" ? "error" : "warning", ` ${d.message}`)); } } return lines.join("\n"); } private showLoadedResources(options?: { extensionPaths?: string[]; force?: boolean }): void { const shouldShow = options?.force || this.options.verbose || !this.settingsManager.getQuietStartup(); if (!shouldShow) { return; } const metadata = this.session.resourceLoader.getPathMetadata(); const sectionHeader = (name: string, color: ThemeColor = "mdHeading") => theme.fg(color, `[${name}]`); const contextFiles = this.session.resourceLoader.getAgentsFiles().agentsFiles; if (contextFiles.length > 0) { const contextList = contextFiles.map((f) => theme.fg("dim", ` ${this.formatDisplayPath(f.path)}`)).join("\n"); this.chatContainer.addChild(new Text(`${sectionHeader("Context")}\n${contextList}`, 0, 0)); this.chatContainer.addChild(new Spacer(1)); } const skills = this.session.resourceLoader.getSkills().skills; if (skills.length > 0) { const skillPaths = skills.map((s) => s.filePath); const groups = this.buildScopeGroups(skillPaths, metadata); const skillList = this.formatScopeGroups(groups, { formatPath: (p) => this.formatDisplayPath(p), formatPackagePath: (p, source) => this.getShortPath(p, source), }); this.chatContainer.addChild(new Text(`${sectionHeader("Skills")}\n${skillList}`, 0, 0)); this.chatContainer.addChild(new Spacer(1)); } const skillDiagnostics = this.session.resourceLoader.getSkills().diagnostics; if (skillDiagnostics.length > 0) { const warningLines = this.formatDiagnostics(skillDiagnostics, metadata); this.chatContainer.addChild(new Text(`${theme.fg("warning", "[Skill conflicts]")}\n${warningLines}`, 0, 0)); this.chatContainer.addChild(new Spacer(1)); } const templates = this.session.promptTemplates; if (templates.length > 0) { const templatePaths = templates.map((t) => t.filePath); const groups = this.buildScopeGroups(templatePaths, metadata); const templateByPath = new Map(templates.map((t) => [t.filePath, t])); const templateList = this.formatScopeGroups(groups, { formatPath: (p) => { const template = templateByPath.get(p); return template ? `/${template.name}` : this.formatDisplayPath(p); }, formatPackagePath: (p) => { const template = templateByPath.get(p); return template ? `/${template.name}` : this.formatDisplayPath(p); }, }); this.chatContainer.addChild(new Text(`${sectionHeader("Prompts")}\n${templateList}`, 0, 0)); this.chatContainer.addChild(new Spacer(1)); } const promptDiagnostics = this.session.resourceLoader.getPrompts().diagnostics; if (promptDiagnostics.length > 0) { const warningLines = this.formatDiagnostics(promptDiagnostics, metadata); this.chatContainer.addChild(new Text(`${theme.fg("warning", "[Prompt conflicts]")}\n${warningLines}`, 0, 0)); this.chatContainer.addChild(new Spacer(1)); } const extensionPaths = options?.extensionPaths ?? []; if (extensionPaths.length > 0) { const groups = this.buildScopeGroups(extensionPaths, metadata); const extList = this.formatScopeGroups(groups, { formatPath: (p) => this.formatDisplayPath(p), formatPackagePath: (p, source) => this.getShortPath(p, source), }); this.chatContainer.addChild(new Text(`${sectionHeader("Extensions", "mdHeading")}\n${extList}`, 0, 0)); this.chatContainer.addChild(new Spacer(1)); } const extensionDiagnostics: ResourceDiagnostic[] = []; const extensionErrors = this.session.resourceLoader.getExtensions().errors; if (extensionErrors.length > 0) { for (const error of extensionErrors) { extensionDiagnostics.push({ type: "error", message: error.error, path: error.path }); } } const shortcutDiagnostics = this.session.extensionRunner?.getShortcutDiagnostics() ?? []; extensionDiagnostics.push(...shortcutDiagnostics); if (extensionDiagnostics.length > 0) { const warningLines = this.formatDiagnostics(extensionDiagnostics, metadata); this.chatContainer.addChild(new Text(`${theme.fg("warning", "[Extension issues]")}\n${warningLines}`, 0, 0)); this.chatContainer.addChild(new Spacer(1)); } // Show loaded themes (excluding built-in) const loadedThemes = this.session.resourceLoader.getThemes().themes; const customThemes = loadedThemes.filter((t) => t.sourcePath); if (customThemes.length > 0) { const themePaths = customThemes.map((t) => t.sourcePath!); const groups = this.buildScopeGroups(themePaths, metadata); const themeList = this.formatScopeGroups(groups, { formatPath: (p) => this.formatDisplayPath(p), formatPackagePath: (p, source) => this.getShortPath(p, source), }); this.chatContainer.addChild(new Text(`${sectionHeader("Themes")}\n${themeList}`, 0, 0)); this.chatContainer.addChild(new Spacer(1)); } const themeDiagnostics = this.session.resourceLoader.getThemes().diagnostics; if (themeDiagnostics.length > 0) { const warningLines = this.formatDiagnostics(themeDiagnostics, metadata); this.chatContainer.addChild(new Text(`${theme.fg("warning", "[Theme conflicts]")}\n${warningLines}`, 0, 0)); this.chatContainer.addChild(new Spacer(1)); } } /** * Initialize the extension system with TUI-based UI context. */ private async initExtensions(): Promise { const extensionRunner = this.session.extensionRunner; if (!extensionRunner) { this.showLoadedResources({ extensionPaths: [], force: false }); return; } // Create extension UI context const uiContext = this.createExtensionUIContext(); await this.session.bindExtensions({ uiContext, commandContextActions: { waitForIdle: () => this.session.agent.waitForIdle(), newSession: async (options) => { if (this.loadingAnimation) { this.loadingAnimation.stop(); this.loadingAnimation = undefined; } this.statusContainer.clear(); const success = await this.session.newSession({ parentSession: options?.parentSession }); if (!success) { return { cancelled: true }; } if (options?.setup) { await options.setup(this.sessionManager); } this.chatContainer.clear(); this.pendingMessagesContainer.clear(); this.compactionQueuedMessages = []; this.streamingComponent = undefined; this.streamingMessage = undefined; this.pendingTools.clear(); this.chatContainer.addChild(new Spacer(1)); this.chatContainer.addChild(new Text(`${theme.fg("accent", "✓ New session started")}`, 1, 1)); this.ui.requestRender(); return { cancelled: false }; }, fork: async (entryId) => { const result = await this.session.fork(entryId); if (result.cancelled) { return { cancelled: true }; } this.chatContainer.clear(); this.renderInitialMessages(); this.editor.setText(result.selectedText); this.showStatus("Forked to new session"); return { cancelled: false }; }, navigateTree: async (targetId, options) => { const result = await this.session.navigateTree(targetId, { summarize: options?.summarize, customInstructions: options?.customInstructions, replaceInstructions: options?.replaceInstructions, label: options?.label, }); if (result.cancelled) { return { cancelled: true }; } this.chatContainer.clear(); this.renderInitialMessages(); if (result.editorText) { this.editor.setText(result.editorText); } this.showStatus("Navigated to selected point"); return { cancelled: false }; }, }, shutdownHandler: () => { this.shutdownRequested = true; }, onError: (error) => { this.showExtensionError(error.extensionPath, error.error, error.stack); }, }); this.setupExtensionShortcuts(extensionRunner); this.showLoadedResources({ extensionPaths: extensionRunner.getExtensionPaths(), force: false }); } /** * Get a registered tool definition by name (for custom rendering). */ private getRegisteredToolDefinition(toolName: string) { const tools = this.session.extensionRunner?.getAllRegisteredTools() ?? []; const registeredTool = tools.find((t) => t.definition.name === toolName); return registeredTool?.definition; } /** * Set up keyboard shortcuts registered by extensions. */ private setupExtensionShortcuts(extensionRunner: ExtensionRunner): void { const shortcuts = extensionRunner.getShortcuts(this.keybindings.getEffectiveConfig()); if (shortcuts.size === 0) return; // Create a context for shortcut handlers const createContext = (): ExtensionContext => ({ ui: this.createExtensionUIContext(), hasUI: true, cwd: process.cwd(), sessionManager: this.sessionManager, modelRegistry: this.session.modelRegistry, model: this.session.model, isIdle: () => !this.session.isStreaming, abort: () => this.session.abort(), hasPendingMessages: () => this.session.pendingMessageCount > 0, shutdown: () => { this.shutdownRequested = true; }, getContextUsage: () => this.session.getContextUsage(), compact: (options) => { void (async () => { try { const result = await this.executeCompaction(options?.customInstructions, false); if (result) { options?.onComplete?.(result); } } catch (error) { const err = error instanceof Error ? error : new Error(String(error)); options?.onError?.(err); } })(); }, }); // Set up the extension shortcut handler on the default editor this.defaultEditor.onExtensionShortcut = (data: string) => { for (const [shortcutStr, shortcut] of shortcuts) { // Cast to KeyId - extension shortcuts use the same format if (matchesKey(data, shortcutStr as KeyId)) { // Run handler async, don't block input Promise.resolve(shortcut.handler(createContext())).catch((err) => { this.showError(`Shortcut handler error: ${err instanceof Error ? err.message : String(err)}`); }); return true; } } return false; }; } /** * Set extension status text in the footer. */ private setExtensionStatus(key: string, text: string | undefined): void { this.footerDataProvider.setExtensionStatus(key, text); this.ui.requestRender(); } /** * Set an extension widget (string array or custom component). */ private setExtensionWidget( key: string, content: string[] | ((tui: TUI, thm: Theme) => Component & { dispose?(): void }) | undefined, options?: ExtensionWidgetOptions, ): void { const placement = options?.placement ?? "aboveEditor"; const removeExisting = (map: Map) => { const existing = map.get(key); if (existing?.dispose) existing.dispose(); map.delete(key); }; removeExisting(this.extensionWidgetsAbove); removeExisting(this.extensionWidgetsBelow); if (content === undefined) { this.renderWidgets(); return; } let component: Component & { dispose?(): void }; if (Array.isArray(content)) { // Wrap string array in a Container with Text components const container = new Container(); for (const line of content.slice(0, InteractiveMode.MAX_WIDGET_LINES)) { container.addChild(new Text(line, 1, 0)); } if (content.length > InteractiveMode.MAX_WIDGET_LINES) { container.addChild(new Text(theme.fg("muted", "... (widget truncated)"), 1, 0)); } component = container; } else { // Factory function - create component component = content(this.ui, theme); } const targetMap = placement === "belowEditor" ? this.extensionWidgetsBelow : this.extensionWidgetsAbove; targetMap.set(key, component); this.renderWidgets(); } private clearExtensionWidgets(): void { for (const widget of this.extensionWidgetsAbove.values()) { widget.dispose?.(); } for (const widget of this.extensionWidgetsBelow.values()) { widget.dispose?.(); } this.extensionWidgetsAbove.clear(); this.extensionWidgetsBelow.clear(); this.renderWidgets(); } private resetExtensionUI(): void { if (this.extensionSelector) { this.hideExtensionSelector(); } if (this.extensionInput) { this.hideExtensionInput(); } if (this.extensionEditor) { this.hideExtensionEditor(); } this.ui.hideOverlay(); this.setExtensionFooter(undefined); this.setExtensionHeader(undefined); this.clearExtensionWidgets(); this.footerDataProvider.clearExtensionStatuses(); this.footer.invalidate(); this.setCustomEditorComponent(undefined); this.defaultEditor.onExtensionShortcut = undefined; this.updateTerminalTitle(); if (this.loadingAnimation) { this.loadingAnimation.setMessage( `${this.defaultWorkingMessage} (${appKey(this.keybindings, "interrupt")} to interrupt)`, ); } } // Maximum total widget lines to prevent viewport overflow private static readonly MAX_WIDGET_LINES = 10; /** * Render all extension widgets to the widget container. */ private renderWidgets(): void { if (!this.widgetContainerAbove || !this.widgetContainerBelow) return; this.renderWidgetContainer(this.widgetContainerAbove, this.extensionWidgetsAbove, true, true); this.renderWidgetContainer(this.widgetContainerBelow, this.extensionWidgetsBelow, false, false); this.ui.requestRender(); } private renderWidgetContainer( container: Container, widgets: Map, spacerWhenEmpty: boolean, leadingSpacer: boolean, ): void { container.clear(); if (widgets.size === 0) { if (spacerWhenEmpty) { container.addChild(new Spacer(1)); } return; } if (leadingSpacer) { container.addChild(new Spacer(1)); } for (const component of widgets.values()) { container.addChild(component); } } /** * Set a custom footer component, or restore the built-in footer. */ private setExtensionFooter( factory: | ((tui: TUI, thm: Theme, footerData: ReadonlyFooterDataProvider) => Component & { dispose?(): void }) | undefined, ): void { // Dispose existing custom footer if (this.customFooter?.dispose) { this.customFooter.dispose(); } // Remove current footer from UI if (this.customFooter) { this.ui.removeChild(this.customFooter); } else { this.ui.removeChild(this.footer); } if (factory) { // Create and add custom footer, passing the data provider this.customFooter = factory(this.ui, theme, this.footerDataProvider); this.ui.addChild(this.customFooter); } else { // Restore built-in footer this.customFooter = undefined; this.ui.addChild(this.footer); } this.ui.requestRender(); } /** * Set a custom header component, or restore the built-in header. */ private setExtensionHeader(factory: ((tui: TUI, thm: Theme) => Component & { dispose?(): void }) | undefined): void { // Header may not be initialized yet if called during early initialization if (!this.builtInHeader) { return; } // Dispose existing custom header if (this.customHeader?.dispose) { this.customHeader.dispose(); } // Remove current header from UI if (this.customHeader) { this.ui.removeChild(this.customHeader); } else { this.ui.removeChild(this.builtInHeader); } if (factory) { // Create and add custom header at position 1 (after initial spacer) this.customHeader = factory(this.ui, theme); this.ui.children.splice(1, 0, this.customHeader); } else { // Restore built-in header at position 1 this.customHeader = undefined; this.ui.children.splice(1, 0, this.builtInHeader); } this.ui.requestRender(); } /** * Create the ExtensionUIContext for extensions. */ private createExtensionUIContext(): ExtensionUIContext { return { select: (title, options, opts) => this.showExtensionSelector(title, options, opts), confirm: (title, message, opts) => this.showExtensionConfirm(title, message, opts), input: (title, placeholder, opts) => this.showExtensionInput(title, placeholder, opts), notify: (message, type) => this.showExtensionNotify(message, type), setStatus: (key, text) => this.setExtensionStatus(key, text), setWorkingMessage: (message) => { if (this.loadingAnimation) { if (message) { this.loadingAnimation.setMessage(message); } else { this.loadingAnimation.setMessage( `${this.defaultWorkingMessage} (${appKey(this.keybindings, "interrupt")} to interrupt)`, ); } } else { // Queue message for when loadingAnimation is created (handles agent_start race) this.pendingWorkingMessage = message; } }, setWidget: (key, content, options) => this.setExtensionWidget(key, content, options), setFooter: (factory) => this.setExtensionFooter(factory), setHeader: (factory) => this.setExtensionHeader(factory), setTitle: (title) => this.ui.terminal.setTitle(title), custom: (factory, options) => this.showExtensionCustom(factory, options), setEditorText: (text) => this.editor.setText(text), getEditorText: () => this.editor.getText(), editor: (title, prefill) => this.showExtensionEditor(title, prefill), setEditorComponent: (factory) => this.setCustomEditorComponent(factory), get theme() { return theme; }, getAllThemes: () => getAvailableThemesWithPaths(), getTheme: (name) => getThemeByName(name), setTheme: (themeOrName) => { if (themeOrName instanceof Theme) { setThemeInstance(themeOrName); this.ui.requestRender(); return { success: true }; } const result = setTheme(themeOrName, true); if (result.success) { this.ui.requestRender(); } return result; }, }; } /** * Show a selector for extensions. */ private showExtensionSelector( title: string, options: string[], opts?: ExtensionUIDialogOptions, ): Promise { return new Promise((resolve) => { if (opts?.signal?.aborted) { resolve(undefined); return; } const onAbort = () => { this.hideExtensionSelector(); resolve(undefined); }; opts?.signal?.addEventListener("abort", onAbort, { once: true }); this.extensionSelector = new ExtensionSelectorComponent( title, options, (option) => { opts?.signal?.removeEventListener("abort", onAbort); this.hideExtensionSelector(); resolve(option); }, () => { opts?.signal?.removeEventListener("abort", onAbort); this.hideExtensionSelector(); resolve(undefined); }, { tui: this.ui, timeout: opts?.timeout }, ); this.editorContainer.clear(); this.editorContainer.addChild(this.extensionSelector); this.ui.setFocus(this.extensionSelector); this.ui.requestRender(); }); } /** * Hide the extension selector. */ private hideExtensionSelector(): void { this.extensionSelector?.dispose(); this.editorContainer.clear(); this.editorContainer.addChild(this.editor); this.extensionSelector = undefined; this.ui.setFocus(this.editor); this.ui.requestRender(); } /** * Show a confirmation dialog for extensions. */ private async showExtensionConfirm( title: string, message: string, opts?: ExtensionUIDialogOptions, ): Promise { const result = await this.showExtensionSelector(`${title}\n${message}`, ["Yes", "No"], opts); return result === "Yes"; } /** * Show a text input for extensions. */ private showExtensionInput( title: string, placeholder?: string, opts?: ExtensionUIDialogOptions, ): Promise { return new Promise((resolve) => { if (opts?.signal?.aborted) { resolve(undefined); return; } const onAbort = () => { this.hideExtensionInput(); resolve(undefined); }; opts?.signal?.addEventListener("abort", onAbort, { once: true }); this.extensionInput = new ExtensionInputComponent( title, placeholder, (value) => { opts?.signal?.removeEventListener("abort", onAbort); this.hideExtensionInput(); resolve(value); }, () => { opts?.signal?.removeEventListener("abort", onAbort); this.hideExtensionInput(); resolve(undefined); }, { tui: this.ui, timeout: opts?.timeout }, ); this.editorContainer.clear(); this.editorContainer.addChild(this.extensionInput); this.ui.setFocus(this.extensionInput); this.ui.requestRender(); }); } /** * Hide the extension input. */ private hideExtensionInput(): void { this.extensionInput?.dispose(); this.editorContainer.clear(); this.editorContainer.addChild(this.editor); this.extensionInput = undefined; this.ui.setFocus(this.editor); this.ui.requestRender(); } /** * Show a multi-line editor for extensions (with Ctrl+G support). */ private showExtensionEditor(title: string, prefill?: string): Promise { return new Promise((resolve) => { this.extensionEditor = new ExtensionEditorComponent( this.ui, this.keybindings, title, prefill, (value) => { this.hideExtensionEditor(); resolve(value); }, () => { this.hideExtensionEditor(); resolve(undefined); }, ); this.editorContainer.clear(); [Showing lines 1-1517 of 4253 (50.0KB limit). Use offset=1518 to continue.]