icopilot 2.3.3 → 2.3.5

package/CHANGELOG.md

@@ -5,6 +5,31 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [Unreleased]
+
+## [2.3.5] — 2026-06-30
+
+### Fixed
+- **Release workflow** — bumped `package.json` version to `2.3.5` to match the `v2.3.5` git tag; the previous publish attempt was rejected by npm because version `2.3.4` was already published
+
+## [2.3.4] — 2026-06-29
+
+### Fixed
+- **Screen stacking / infinite box loop** — input box borders no longer stack on every submission; `drawBoxTop()` now erases the previous bottom border with ANSI cursor-up + clear-line sequences before drawing a fresh frame
+- **`/m` slash command tokenizer** — commands like `/model`, `/provider set <name>`, and `/plan` were truncated to their first character; replaced `indexOf`-based slicing with `split(/\s+/)` so the full command name is always parsed correctly
+
+### Changed
+- **Splash banner** — replaced pixel-art block logo with the standard figlet-style ASCII logo rendered in bold cyan (`#58A6FF`); status indicators updated to `● Provider: GitHub Models (default: …)` and `● Session: Active (…)` with a dim divider
+- **Hotkey dock** — updated footer to `Ctrl+C Exit  │  Ctrl+R Clear History  │  Tab Autocomplete`
+- **Terminal resize** — `process.stdout.on('resize')` added alongside `SIGWINCH` for portability (e.g. Windows ConPTY); resize also resets the pending-erase counter to avoid misaligned cursors
+
+### Added
+- **`src/ui/spinner.ts`** — `Spinner` class with `start(label)`, `update(label)`, `stop(success?)` using braille frames at 80 ms; degrades gracefully to plain text in non-TTY environments
+- **`src/ui/select.ts`** — `selectMenu(choices, initial?)` arrow-key `❯` selection menu; auto-selects the first item in non-TTY mode
+- **Autopilot progress UX** — each step now shows a live spinner that resolves to `✔` or `✖`; when `requireApproval` is enabled a between-step `selectMenu` asks "Continue / Abort" instead of running blindly
+- **Plan-mode file confirmations** — `confirm()` Y/N prompts replaced with `select()` arrow-key menus (`❯ Apply changes / Skip`) for all file write proposals
+- **`@file` mention hint** — ghost text shows `file/path` after a bare `@` token in the input field
+
 ## [2.1.0] — 2026-06-28
 
 ### Added — v2.1 Competitive Parity

package/dist/commands/slash.js

@@ -284,10 +284,13 @@ export async function handleSlash(line, ctx) {
         }
         return done(false, modePrefix.forwardInput, modePrefix.turnMode ?? null);
     }
-    const spaceIndex = trimmed.indexOf(' ');
-    const cmd = (spaceIndex === -1 ? trimmed.slice(1) : trimmed.slice(1, spaceIndex)).trim();
-    const arg = spaceIndex === -1 ? '' : trimmed.slice(spaceIndex + 1).trim();
-    const rest = arg ? arg.split(/\s+/) : [];
+    // Tokenize: split on whitespace so "/model gpt-4o" → ["model","gpt-4o"]
+    // This avoids premature character slicing that truncated commands like
+    // "/model" to "/m" when multi-byte or invisible whitespace was present.
+    const tokens = trimmed.slice(1).split(/\s+/);
+    const cmd = tokens[0] ?? '';
+    const rest = tokens.slice(1);
+    const arg = rest.join(' ');
     const s = ctx.session;
     const roleManager = getRoleManager(s.state.cwd);
     const normalizedCommand = cmd.toLowerCase();

package/dist/modes/autopilot.js

@@ -1,6 +1,8 @@
 import { Session } from '../session/session.js';
 import { hookManager } from '../hooks/lifecycle.js';
 import { theme } from '../ui/theme.js';
+import { Spinner } from '../ui/spinner.js';
+import { selectMenu } from '../ui/select.js';
 import { runTurn } from './turn.js';
 export const AUTOPILOT_MAX_STEPS = 10;
 const AUTOPILOT_REQUIRE_APPROVAL_DEFAULT = true;
@@ -86,17 +88,40 @@ export async function runAutopilot(goal, opts = {}) {
     session.setAutopilotEnabled(false);
     session.setMode('ask');
     session.setSystemPrompt(buildAutopilotSystemPrompt(normalizedGoal));
+    const requireApproval = opts.requireApproval ?? AUTOPILOT_REQUIRE_APPROVAL_DEFAULT;
     try {
         for (let step = 1; step <= maxSteps; step++) {
-            process.stdout.write(theme.dim(`\n[autopilot] step ${step} of ${maxSteps}\n`));
-            await runTurn({
-                session,
-                userInput: buildAutopilotTurnPrompt(normalizedGoal, step, maxSteps),
-                signal,
-            });
+            const spinner = new Spinner();
+            spinner.start(`Step ${step} of ${maxSteps} …`);
+            let stepError;
+            try {
+                await runTurn({
+                    session,
+                    userInput: buildAutopilotTurnPrompt(normalizedGoal, step, maxSteps),
+                    signal,
+                });
+            }
+            catch (err) {
+                stepError = err;
+            }
+            const success = stepError == null;
+            spinner.stop(success);
+            if (!success) {
+                process.stdout.write(theme.err(`\n✖ step ${step} failed: ${stepError?.message ?? stepError}\n`));
+                break;
+            }
             if (isAutopilotComplete(findLastAssistantMessage(session.state.messages))) {
                 return session;
             }
+            // When requireApproval is on, pause between steps so the user can review.
+            if (requireApproval && step < maxSteps) {
+                process.stdout.write('\n');
+                const choice = await selectMenu(['Continue to next step', 'Abort autopilot']);
+                if (choice !== 0) {
+                    process.stdout.write(theme.dim('\nautopilot aborted by user.\n'));
+                    return session;
+                }
+            }
         }
         process.stdout.write(theme.warn(`\n⚠  autopilot stopped after ${maxSteps} steps.\n`));
         return session;

package/dist/modes/interactive.js

@@ -3,7 +3,7 @@ import os from 'node:os';
 import path from 'node:path';
 import { Session } from '../session/session.js';
 import { theme, banner } from '../ui/theme.js';
-import { createPrompt, prefix } from '../ui/prompt.js';
+import { createPrompt, prefix, invalidateBoxBottom } from '../ui/prompt.js';
 import { handleSlash } from '../commands/slash.js';
 import { loadAliases, resolveAlias } from '../commands/alias-cmd.js';
 import { MetricsCollector } from '../commands/metrics-cmd.js';
@@ -83,6 +83,9 @@ export async function runInteractive(initialMode = 'ask', opts = {}) {
                 const resolvedLine = resolveAlias(next.line, loadAliases()) ?? next.line;
                 currentAbort = new AbortController();
                 try {
+                    // Any output printed during processing must not be erased by the
+                    // next input-box render, so invalidate the pending-erase counter.
+                    invalidateBoxBottom();
                     if (next.scheduled) {
                         process.stdout.write(theme.dim(`\n[schedule] ${next.line}\n`));
                     }

package/dist/modes/tui.js

@@ -1,10 +1,13 @@
 import readline from 'node:readline';
 import { Writable } from 'node:stream';
+import simpleGit from 'simple-git';
 import { loadAliases, resolveAlias } from '../commands/alias-cmd.js';
 import { MetricsCollector } from '../commands/metrics-cmd.js';
 import { handleSlash } from '../commands/slash.js';
 import { Session } from '../session/session.js';
 import { altScreenEnter, altScreenExit, clear, hideCursor, showCursor, size, } from '../ui/screen.js';
+import { WORKSPACE_TABS, renderTabBar, renderHero, renderStatusDock, magentaSeparator, renderFooter, } from '../ui/tui-layout.js';
+import { safeUnicode } from '../ui/theme.js';
 import { handlePostTurnContextBudget } from './auto-compact.js';
 import { backgroundTaskManager } from './background.js';
 import { runAutopilot } from './autopilot.js';
@@ -12,6 +15,7 @@ import { runTurn } from './turn.js';
 import { hookManager } from '../hooks/lifecycle.js';
 const VERSION = '1.3.0';
 const FRAME_MS = 33;
+const CREDIT_BUDGET = 1000;
 export async function runTui(initialMode = 'ask', opts = {}) {
     const session = new Session({ mode: initialMode });
     await session.initializeGitContext();
@@ -39,7 +43,33 @@ export async function runTui(initialMode = 'ask', opts = {}) {
     let cleaned = false;
     let frame;
     let currentAbort = null;
+    let activeTab = 0;
+    let gitBranch = '';
+    let branchInFlight = false;
+    let lastCwd = session.state.cwd;
     const pendingInputs = [];
+    // Resolve the current git branch once (and on cwd change) for the status dock.
+    // A simple in-flight guard avoids overlapping lookups racing to set gitBranch.
+    const refreshBranch = () => {
+        if (branchInFlight)
+            return;
+        branchInFlight = true;
+        void (async () => {
+            try {
+                const git = simpleGit(session.state.cwd);
+                if (await git.checkIsRepo()) {
+                    gitBranch = (await git.revparse(['--abbrev-ref', 'HEAD'])).trim();
+                    markDirty();
+                }
+            }
+            catch {
+                /* not a git repo — leave the branch blank */
+            }
+            finally {
+                branchInFlight = false;
+            }
+        })();
+    };
     const rl = readline.createInterface({
         input: process.stdin,
         output: silentOutput,
@@ -58,7 +88,7 @@ export async function runTui(initialMode = 'ask', opts = {}) {
         process.stdout.write = originalWrite;
         process.stdout.off('resize', onResize);
         process.off('SIGINT', onSigint);
-        process.stdin.off('keypress', markDirty);
+        process.stdin.off('keypress', onKeypress);
         if (frame)
             clearInterval(frame);
         rl.close();
@@ -81,38 +111,69 @@ export async function runTui(initialMode = 'ask', opts = {}) {
             return;
         dirty = false;
         const { rows, cols } = size();
+        // Refresh branch if cwd changed since the last render.
+        if (session.state.cwd !== lastCwd) {
+            lastCwd = session.state.cwd;
+            refreshBranch();
+        }
+        // Absolute row anchors (1-indexed for ANSI cursor positioning):
+        //   row 1            → tabbed navigation header
+        //   rows 2..dockRow-1 → hero canvas + conversation timeline
+        //   dockRow           → status dock (locked 3 rows above the bottom)
+        //   dockRow + 1       → magenta boundary line
+        //   dockRow + 2       → input dock
+        //   rows (bottom)     → persistent footer
+        const tabRow = 1;
         const chatTop = 2;
-        const chatBottom = Math.max(chatTop, rows - 3);
+        // The status dock is locked exactly 3 rows above the absolute bottom, so the
+        // four bottom rows are: dock, magenta separator, input dock, footer.
+        const dockRow = Math.max(chatTop, rows - 3);
+        const separatorRow = Math.min(dockRow + 1, rows);
+        const inputRow = Math.min(dockRow + 2, rows);
+        const footerRow = Math.min(dockRow + 3, rows);
+        const chatBottom = dockRow - 1;
         const chatHeight = Math.max(1, chatBottom - chatTop + 1);
         writeRaw('\x1b[2J\x1b[H');
-        writeRaw(statusLine(session, cols, busy));
-        const lines = wrapLines(chat.trimEnd(), Math.max(1, cols));
+        // Row 0 — tabbed navigation header.
+        writeRaw(`\x1b[${tabRow};1H`);
+        writeRaw(renderTabBar(activeTab, cols));
+        // Conversation timeline (hero canvas shown only while it is empty).
+        const showHero = !chat.trim();
+        const heroLines = showHero ? heroCanvas(session, cols) : [];
+        const lines = showHero ? heroLines : wrapLines(chat.trimEnd(), Math.max(1, cols));
         const visible = lines.slice(-chatHeight);
         for (let i = 0; i < chatHeight; i++) {
             writeRaw(`\x1b[${chatTop + i};1H`);
-            writeRaw(pad(visible[i] || '', cols));
+            // Hero lines are already padded to the full width (and carry ANSI), so
+            // they are written verbatim; plain chat lines are padded here.
+            writeRaw(showHero ? visible[i] || '' : padToCols(visible[i] || '', cols));
         }
-        // separator with thinking indicator
-        writeRaw(`\x1b[${Math.max(1, rows - 2)};1H`);
+        // Status dock — left: cwd + branch, right: live consumption metrics.
+        writeRaw(`\x1b[${dockRow};1H`);
+        writeRaw(statusDock(session, gitBranch, cols, busy));
+        // Magenta boundary line.
+        writeRaw(`\x1b[${separatorRow};1H`);
         if (busy) {
             const thinkLabel = ' ◆ Copilot is thinking… ';
             const sideLen = Math.max(0, Math.floor((cols - thinkLabel.length) / 2));
-            writeRaw('─'.repeat(sideLen) +
+            writeRaw('\x1b[35m' +
+                '─'.repeat(sideLen) +
                 thinkLabel +
-                '─'.repeat(Math.max(0, cols - sideLen - thinkLabel.length)));
+                '─'.repeat(Math.max(0, cols - sideLen - thinkLabel.length)) +
+                '\x1b[0m');
         }
         else {
-            writeRaw('─'.repeat(cols));
+            writeRaw(magentaSeparator(cols));
         }
-        writeRaw(`\x1b[${Math.max(1, rows - 1)};1H`);
+        // Input dock — a single dedicated line bracket below the separator.
+        writeRaw(`\x1b[${inputRow};1H`);
         const promptIcon = busy ? '\x1b[33m◆\x1b[0m' : '\x1b[32m❯\x1b[0m';
-        const prompt = `${promptIcon} ${rl.line || ''}`;
-        writeRaw(pad(prompt, cols));
-        writeRaw(`\x1b[${rows};1H`);
-        const hint = busy
-            ? '\x1b[2m Ctrl+C to cancel  \x1b[0m'
-            : '\x1b[2m Enter to send  •  /help for commands  •  /suggest for shell commands \x1b[0m';
-        writeRaw(pad(hint, cols));
+        const buffer = (rl.line || '').replace(/\t/g, '');
+        writeRaw('\x1b[2K');
+        writeRaw(padToCols(`${promptIcon} ${buffer}`, cols));
+        // Absolute bottom row — persistent footer legend.
+        writeRaw(`\x1b[${footerRow};1H`);
+        writeRaw(renderFooter(cols));
     };
     const appendCaptured = (chunk) => {
         const text = Buffer.isBuffer(chunk) ? chunk.toString('utf8') : String(chunk);
@@ -227,11 +288,22 @@ export async function runTui(initialMode = 'ask', opts = {}) {
         if (running)
             cleanup();
     });
-    process.stdin.on('keypress', markDirty);
+    const onKeypress = (_ch, key) => {
+        // Tab / Shift+Tab cycles the workspace navigation tabs.
+        if (key?.name === 'tab') {
+            const delta = key.shift ? -1 : 1;
+            activeTab = (activeTab + delta + WORKSPACE_TABS.length) % WORKSPACE_TABS.length;
+        }
+        markDirty();
+    };
+    process.stdin.on('keypress', onKeypress);
     altScreenEnter();
     hideCursor();
     clear();
-    chat = 'Welcome to iCopilot TUI prototype. Type /help for commands.\n';
+    // An empty timeline makes the renderer show the hero/branding canvas (with its
+    // tip bulletins) until the first turn produces conversation output.
+    chat = '';
+    refreshBranch();
     frame = setInterval(render, FRAME_MS);
     try {
         await new Promise((resolve) => {
@@ -254,12 +326,29 @@ export async function runTui(initialMode = 'ask', opts = {}) {
         });
     }
 }
-function statusLine(session, cols, busy) {
-    const mode = session.state.mode.toUpperCase();
+function heroCanvas(session, cols) {
+    const modelShort = session.state.model.replace('openai/', '').replace('github/', '');
+    return renderHero({
+        version: VERSION,
+        provider: 'GitHub Models',
+        experimental: '/experimental [Active]',
+        tips: [
+            'Tip: Run /doctor to diagnose your environment configuration and tool availability.',
+            'Tool access is determined by your configured role and policy settings.',
+            `Active model: ${modelShort}. Type /help for commands or @ to target files.`,
+        ],
+    }, cols);
+}
+function statusDock(session, branch, cols, busy) {
     const modelShort = session.state.model.replace('openai/', '').replace('github/', '');
-    const busyBadge = busy ? ' \x1b[33m◆ WORKING\x1b[0;7m' : '';
-    const text = ` \x1b[1miCopilot\x1b[0;7m v${VERSION}${busyBadge}  │  model: ${modelShort}  │  mode: ${mode}  │  Ctrl+C to exit `;
-    return `\x1b[7m${pad(text, cols)}\x1b[0m`;
+    // Nerd-font git branch glyph (U+F02A2) when supported, plain label otherwise.
+    const branchIcon = safeUnicode ? '\u{F02A2} ' : 'git:';
+    const branchLabel = branch ? ` [${branchIcon}${branch}]` : '';
+    const left = `${session.state.cwd}${branchLabel}`;
+    const used = Math.min(CREDIT_BUDGET, Math.ceil(session.tokenUsage() / 1000));
+    const working = busy ? ' \x1b[33m◆ WORKING\x1b[0m  │ ' : '';
+    const right = `${working}Usage: ${used}/${CREDIT_BUDGET} credits  │  ${modelShort}`;
+    return renderStatusDock(left, right, cols);
 }
 function wrapLines(text, width) {
     const out = [];
@@ -271,7 +360,7 @@ function wrapLines(text, width) {
     }
     return out.length ? out : [''];
 }
-function pad(text, cols) {
+function padToCols(text, cols) {
     const clipped = text.length > cols ? text.slice(0, cols) : text;
     return clipped + ' '.repeat(Math.max(0, cols - clipped.length));
 }

package/dist/tools/file-ops.js

@@ -1,7 +1,7 @@
 import fs from 'node:fs';
 import path from 'node:path';
 import { createPatch } from 'diff';
-import { confirm } from '@inquirer/prompts';
+import { select } from '@inquirer/prompts';
 import { config } from '../config.js';
 import { theme } from '../ui/theme.js';
 import { formatAutoCheckResult, runAutoLint } from './auto-check.js';
@@ -35,8 +35,12 @@ export async function proposeWrite(relPath, newContent) {
     const remembered = toolMemory.isWriteRemembered(abs);
     const ok = config.autoApprove ||
         remembered ||
-        (await confirm({
+        (await select({
             message: exists ? 'Apply this patch?' : 'Create this new file?',
+            choices: [
+                { name: '❯ Apply changes', value: true },
+                { name: '  Skip', value: false },
+            ],
             default: false,
         }).catch(() => false));
     if (!ok) {
@@ -45,10 +49,14 @@ export async function proposeWrite(relPath, newContent) {
         return { wrote: false, path: abs, bytes: 0 };
     }
     if (!config.autoApprove && !remembered) {
-        const remember = await confirm({
+        const remember = (await select({
             message: 'Remember this write path for the session?',
+            choices: [
+                { name: '  Yes — skip confirmation next time', value: true },
+                { name: '  No', value: false },
+            ],
             default: false,
-        }).catch(() => false);
+        }).catch(() => false));
         if (remember)
             toolMemory.rememberWrite(abs);
     }
@@ -100,8 +108,12 @@ export async function proposeWriteBatch(items) {
     const remembered = prepared.every((item) => toolMemory.isWriteRemembered(item.abs));
     const ok = config.autoApprove ||
         remembered ||
-        (await confirm({
+        (await select({
             message: 'Apply all patches?',
+            choices: [
+                { name: '❯ Apply all changes', value: true },
+                { name: '  Skip all', value: false },
+            ],
             default: false,
         }).catch(() => false));
     if (!ok) {
@@ -113,10 +125,14 @@ export async function proposeWriteBatch(items) {
         };
     }
     if (!config.autoApprove && !remembered) {
-        const remember = await confirm({
+        const remember = (await select({
             message: 'Remember these write paths for the session?',
+            choices: [
+                { name: '  Yes — skip confirmation next time', value: true },
+                { name: '  No', value: false },
+            ],
             default: false,
-        }).catch(() => false);
+        }).catch(() => false));
         if (remember)
             prepared.forEach((item) => toolMemory.rememberWrite(item.abs));
     }

package/dist/ui/prompt.js

@@ -2,6 +2,14 @@ import readline from 'node:readline';
 import { theme, safeUnicode } from './theme.js';
 import { defaultContext } from '../util/completion.js';
 import { attachKeybindings, applyKeybindingConfig, } from '../util/keybindings.js';
+/**
+ * Call this whenever content is written to stdout between two read() calls
+ * (e.g. streamed LLM output) so we don't accidentally erase that content
+ * when the next input box is rendered.
+ */
+export function invalidateBoxBottom() {
+    pendingEraseLines = 0;
+}
 // ─── Slash command completer ───────────────────────────────────────────────
 function slashCompleter(line) {
     const ctx = defaultContext();
@@ -26,7 +34,18 @@ const PLACEHOLDER = 'Enter @ to mention files or / for commands...';
 function boxWidth() {
     return Math.max(60, (process.stdout.columns || 80) - 6);
 }
+// Track lines printed by drawBoxBottom() so the next read() can erase them
+// before drawing a fresh top border (prevents infinite box stacking).
+let pendingEraseLines = 0;
 function drawBoxTop() {
+    if (pendingEraseLines > 0 && process.stdout.isTTY) {
+        // Erase the bottom border printed by the previous submission:
+        //   drawBoxBottom writes "\n<border>\n" = 2 extra lines below the readline line.
+        for (let i = 0; i < pendingEraseLines; i++) {
+            process.stdout.write('\x1b[1A\x1b[2K'); // cursor up + clear line
+        }
+        pendingEraseLines = 0;
+    }
     const w = boxWidth();
     const colorEnabled = theme.dim('') !== ''; // cheap color-enabled check
     const line = colorEnabled ? theme.dim(`  ╭${'─'.repeat(w)}╮`) : `  ╭${'─'.repeat(w)}╮`;
@@ -36,11 +55,15 @@ function drawBoxBottom() {
     const w = boxWidth();
     const line = theme.dim(`  ╰${'─'.repeat(w)}╯`);
     process.stdout.write('\n' + line + '\n');
+    // Two lines were added below the readline line: the blank line (\n) and the
+    // border line itself.  The trailing \n moves the cursor one further line down,
+    // so we need to go back 2 lines on the next drawBoxTop() call.
+    pendingEraseLines = 2;
 }
 // ─── Persistent footer (scroll-region docked) ──────────────────────────────
 const FOOTER_KEYS = safeUnicode
-    ? '  Ctrl+C Exit  │  Tab Autocomplete  │  @file Context  │  Ctrl+R Clear'
-    : '  Ctrl+C Exit  |  Tab Autocomplete  |  @file Context  |  Ctrl+R Clear';
+    ? '  Ctrl+C Exit  │  Ctrl+R Clear History  │  Tab Autocomplete'
+    : '  Ctrl+C Exit  |  Ctrl+R Clear History  |  Tab Autocomplete';
 let footerInstalled = false;
 function footerLine(cols) {
     const text = FOOTER_KEYS;
@@ -83,10 +106,16 @@ export function createPrompt(keybindingMode) {
     if (isTTY)
         installFooter();
     const onResize = () => {
-        if (isTTY && footerInstalled)
+        if (isTTY && footerInstalled) {
+            pendingEraseLines = 0; // can't reliably erase across a resize
             installFooter();
+        }
     };
     process.on('SIGWINCH', onResize);
+    // Also listen on stdout directly for environments that emit 'resize'
+    // instead of (or in addition to) SIGWINCH (e.g. Windows ConPTY).
+    if (isTTY)
+        process.stdout.on('resize', onResize);
     // ── Ghost text helpers ────────────────────────────────────────────────
     const clearGhost = () => {
         if (!activeGhost || !isTTY)
@@ -138,6 +167,12 @@ export function createPrompt(keybindingMode) {
                 drawGhost(PLACEHOLDER);
                 return;
             }
+            // Hint after a partial @mention: show "→ @<token>" in dim text.
+            const atMatch = line.match(/@([\w./\\-]*)$/);
+            if (atMatch) {
+                drawGhost(atMatch[0].length > 1 ? '' : 'file/path');
+                return;
+            }
             if (!/^\/\w/.test(line))
                 return;
             const [hits] = slashCompleter(line);
@@ -178,6 +213,7 @@ export function createPrompt(keybindingMode) {
             removeFooter();
             process.off('SIGWINCH', onResize);
             if (isTTY) {
+                process.stdout.off('resize', onResize);
                 process.stdin.removeListener('keypress', onKeypressClear);
                 process.stdin.removeListener('keypress', onKeypressDraw);
             }

package/dist/ui/select.js

@@ -0,0 +1,82 @@
+import readline from 'node:readline';
+import { theme, safeUnicode } from './theme.js';
+const CURSOR = safeUnicode ? '❯' : '>';
+const BLANK = ' ';
+/**
+ * Render an interactive arrow-key selection menu.
+ *
+ * @param choices   List of option labels to display.
+ * @param initial   Initially selected index (default 0).
+ * @returns         Resolves with the index of the chosen option, or -1 if
+ *                  the user pressed Escape / Ctrl-C.
+ *
+ * Example:
+ *   ❯ Run this command
+ *     Revise command instructions
+ *     Abort operation
+ */
+export async function selectMenu(choices, initial = 0) {
+    if (!process.stdin.isTTY || !process.stdout.isTTY) {
+        // Non-interactive: auto-select the first option.
+        return 0;
+    }
+    return new Promise((resolve) => {
+        let selected = Math.max(0, Math.min(initial, choices.length - 1));
+        readline.emitKeypressEvents(process.stdin);
+        const wasRaw = process.stdin.isRaw ?? false;
+        process.stdin.setRawMode(true);
+        const render = () => {
+            // Erase all previously drawn lines.
+            for (let i = 0; i < choices.length; i++) {
+                process.stdout.write('\x1b[2K\r');
+                if (i < choices.length - 1)
+                    process.stdout.write('\x1b[1A');
+            }
+            // Re-draw.
+            for (let i = 0; i < choices.length; i++) {
+                const active = i === selected;
+                const cursor = active ? theme.brand(CURSOR) : BLANK;
+                const label = active ? choices[i] : theme.dim(choices[i] ?? '');
+                process.stdout.write(`  ${cursor} ${label}`);
+                if (i < choices.length - 1)
+                    process.stdout.write('\n');
+            }
+        };
+        // Draw initial menu.
+        process.stdout.write('\n');
+        for (const choice of choices) {
+            process.stdout.write(`  ${BLANK} ${theme.dim(choice)}\n`);
+        }
+        // Move cursor back up to rewrite from the first line.
+        for (let i = 0; i < choices.length; i++) {
+            process.stdout.write('\x1b[1A');
+        }
+        render();
+        const onKeypress = (_ch, key) => {
+            if (!key)
+                return;
+            if (key.name === 'up') {
+                selected = (selected - 1 + choices.length) % choices.length;
+                render();
+            }
+            else if (key.name === 'down') {
+                selected = (selected + 1) % choices.length;
+                render();
+            }
+            else if (key.name === 'return' || key.name === 'enter') {
+                cleanup(selected);
+            }
+            else if (key.name === 'escape' || (key.ctrl && key.name === 'c')) {
+                cleanup(-1);
+            }
+        };
+        const cleanup = (result) => {
+            process.stdin.removeListener('keypress', onKeypress);
+            if (!wasRaw)
+                process.stdin.setRawMode(false);
+            process.stdout.write('\n');
+            resolve(result);
+        };
+        process.stdin.on('keypress', onKeypress);
+    });
+}

package/dist/ui/spinner.js

@@ -0,0 +1,50 @@
+import { theme } from './theme.js';
+const FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+const INTERVAL_MS = 80;
+/**
+ * A simple TTY spinner that renders a label next to a rotating braille frame.
+ * Falls back to a plain text prefix when the terminal is not a TTY or when
+ * Unicode / colours are disabled.
+ */
+export class Spinner {
+    timer = null;
+    frame = 0;
+    label = '';
+    isTTY;
+    constructor() {
+        this.isTTY = Boolean(process.stdout.isTTY);
+    }
+    start(label) {
+        this.label = label;
+        this.frame = 0;
+        if (!this.isTTY) {
+            process.stdout.write(`  … ${label}\n`);
+            return;
+        }
+        this.render();
+        this.timer = setInterval(() => this.render(), INTERVAL_MS);
+    }
+    update(label) {
+        this.label = label;
+        if (!this.isTTY) {
+            process.stdout.write(`  … ${label}\n`);
+        }
+    }
+    stop(success = true) {
+        if (this.timer !== null) {
+            clearInterval(this.timer);
+            this.timer = null;
+        }
+        if (this.isTTY) {
+            // Overwrite the spinner line with a final status icon + label.
+            process.stdout.write('\r\x1b[2K');
+            const icon = success ? theme.ok('✔') : theme.err('✖');
+            process.stdout.write(`  ${icon} ${this.label}\n`);
+        }
+    }
+    render() {
+        const f = FRAMES[this.frame % FRAMES.length] ?? FRAMES[0];
+        this.frame++;
+        process.stdout.write(`\r\x1b[2K  ${theme.dim(f)} ${this.label}`);
+    }
+}

package/dist/ui/theme.js

@@ -50,29 +50,16 @@ export const theme = {
     },
 };
 export const safeUnicode = process.platform !== 'win32' || Boolean(process.env.WT_SESSION);
-// ─── Pixel-art logo ────────────────────────────────────────────────────────
-// 5-row "ICOPILOT" in full-block characters (2-space gaps between letters).
-//   I=2   C=4   O=4   P=4   I=2   L=4   O=4   T=4
-const LOGO_ROWS = [
-    '██  ████  ████  ████  ██  █     ████  ████',
-    '██  ██    █  █  █  █  ██  █     █  █   ██ ',
-    '██  ██    █  █  ████  ██  █     █  █   ██ ',
-    '██  ██    █  █  █     ██  █     █  █   ██ ',
-    '██  ████  ████  █     ██  ████  ████   ██ ',
+// ─── ASCII logo (figlet "iCopilot") ──────────────────────────────────────────
+// Rendered in cyan/light-blue to match GitHub Copilot's design language.
+const ASCII_LOGO_LINES = [
+    ' ___               _ _       _   ',
+    '|_ _|___ ___  _ __(_) | ___ | |_ ',
+    " | |/ __/ _ \\| '_ \\ | |/ _ \\| __|",
+    ' | | (_| (_) | |_) | | | (_) | |_ ',
+    '|___\\___\\___/| .__/|_|_|\\___/ \\__|',
+    '             |_|                  ',
 ];
-// ─── Pilot mascot (5 rows) ─────────────────────────────────────────────────
-// Purple frame (#A371F7), cyan accents (#39D2D2).
-function buildMascot(c) {
-    const fr = (s) => c.hex('#A371F7')(s);
-    const cy = (s) => c.hex('#39D2D2')(s);
-    return [
-        fr(' ╭─────╮ '),
-        fr(' │') + cy('◉') + fr('   ') + cy('◉') + fr('│ '),
-        fr(' │') + c.hex('#A371F7')(' ─── ') + fr('│ '),
-        fr(' ╰──') + cy('┬') + fr('──╯ '),
-        cy('  ▶') + c.hex('#A371F7')(' pilot '),
-    ];
-}
 export function banner(version, model, sessionDir) {
     if (!colorEnabled()) {
         return [
@@ -84,30 +71,29 @@ export function banner(version, model, sessionDir) {
     }
     const { c, name } = palette();
     const green = name === 'light' ? '#166534' : '#3FB950';
-    // Render logo rows in light-blue (#58A6FF)
-    const logoRows = LOGO_ROWS.map((r) => c.hex('#58A6FF').bold(r));
-    const mascotRows = buildMascot(c);
-    // Side-by-side: mascot (10 visible chars) + logo
-    const combined = logoRows.map((lr, i) => `  ${mascotRows[i] ?? '          '}  ${lr}`).join('\n');
+    const blue = '#58A6FF';
+    // Render ASCII logo in cyan/light-blue
+    const logo = ASCII_LOGO_LINES.map((row) => `  ${c.hex(blue).bold(row)}`).join('\n');
     const sessDir = sessionDir ?? '~/.icopilot/sessions/';
+    const divider = `  ${c.gray('─'.repeat(50))}`;
     const diag1 = `  ${c.hex(green)('●')} ` +
-        `${c.gray('Connected to')} ${c.hex('#58A6FF').bold('GitHub Models')} ` +
-        `${c.gray('[' + model + ']')}`;
+        `${c.gray('Provider:')} ${c.hex(blue).bold('GitHub Models')} ` +
+        `${c.gray('(default: ' + model + ')')}`;
     const diag2 = `  ${c.hex(green)('●')} ` +
-        `${c.gray('Session:')} ${c.hex('#58A6FF')('Active')} ` +
+        `${c.gray('Session: ')} ${c.hex(blue)('Active')} ` +
         `${c.gray('(' + sessDir + ')')}`;
     const hints = safeUnicode
         ? `${c.gray('/help')} for commands  ${c.gray('@file')} to add context  ${c.gray('Tab')} to autocomplete`
         : `/help for commands  @file to add context  Tab to autocomplete`;
     return [
         '',
-        combined,
-        '',
-        `  ${c.gray('v' + version)}  ${c.gray('·')}  ${c.hex('#58A6FF')(model)}`,
+        logo,
         '',
         diag1,
         diag2,
+        divider,
         '',
+        `  ${c.gray('v' + version)}  ${c.gray('·')}  ${c.hex(blue)(model)}`,
         `  ${hints}`,
         '',
     ].join('\n');

package/dist/ui/tui-layout.js

@@ -0,0 +1,121 @@
+/**
+ * Pure, side-effect-free rendering helpers for the full-screen TUI.
+ *
+ * Every function returns a string (or array of strings) that is painted at an
+ * absolute coordinate by the renderer in `modes/tui.ts`. Keeping these helpers
+ * pure makes the visual geometry unit-testable without spawning a PTY.
+ *
+ * The colour language follows the modern engineering-agent CLIs:
+ *   - deep blue (`\x1b[44m`) track for the tabbed navigation header
+ *   - magenta (`\x1b[35m`) single line as the conversation/input boundary
+ */
+/** Workspace navigation contexts shown in the Row-0 tab bar. */
+export const WORKSPACE_TABS = ['Session', 'Issues', 'Pull requests', 'Gists', 'Settings'];
+const RESET = '\x1b[0m';
+const BLUE_BG = '\x1b[44m';
+const MAGENTA = '\x1b[35m';
+// eslint-disable-next-line no-control-regex
+const ANSI_RE = /\x1b\[[0-?]*[ -/]*[@-~]/g;
+/** Remove ANSI escape sequences from a string. */
+export function stripAnsi(text) {
+    return text.replace(ANSI_RE, '');
+}
+/** Visible (printable) width of a string, ignoring ANSI escape sequences. */
+export function visibleWidth(text) {
+    return stripAnsi(text).length;
+}
+/**
+ * Pad (or clip) a string to an exact visible width. Clipping is performed on
+ * the plain text so we never emit a half-written escape sequence.
+ */
+export function padVisible(text, cols) {
+    const width = visibleWidth(text);
+    if (width === cols)
+        return text;
+    if (width < cols)
+        return text + ' '.repeat(cols - width);
+    // Too long: fall back to the plain text and hard-clip it.
+    return stripAnsi(text).slice(0, cols);
+}
+/**
+ * Row 0 — the persistent tabbed navigation header.
+ *
+ *   [Session]   Issues   Pull requests   Gists   Settings
+ *
+ * The active tab is wrapped in brackets and brightened; the whole row sits on a
+ * deep-blue background track that spans the full terminal width.
+ */
+export function renderTabBar(activeIndex, cols) {
+    const active = ((activeIndex % WORKSPACE_TABS.length) + WORKSPACE_TABS.length) % WORKSPACE_TABS.length;
+    const gap = '   ';
+    const plainParts = WORKSPACE_TABS.map((tab, i) => (i === active ? `[${tab}]` : ` ${tab} `));
+    const plain = plainParts.join(gap);
+    if (plain.length > cols) {
+        // Degrade gracefully on narrow terminals: blue track + clipped plain text.
+        return `${BLUE_BG}${plain.slice(0, cols)}${RESET}`;
+    }
+    const coloredParts = WORKSPACE_TABS.map((tab, i) => i === active ? `\x1b[1;97m[${tab}]\x1b[22;39m` : `\x1b[2;37m ${tab} \x1b[22;39m`);
+    const colored = coloredParts.join(gap);
+    const fill = ' '.repeat(Math.max(0, cols - plain.length));
+    return `${BLUE_BG}${colored}${fill}${RESET}`;
+}
+/**
+ * Section B — the left-aligned hero/branding canvas. Returns one string per
+ * row so the renderer can place it line-by-line from the top of the timeline.
+ */
+export function renderHero(info, cols) {
+    const bullet = '\x1b[35m●\x1b[0m';
+    const lines = [];
+    lines.push(padVisible(`\x1b[1miCopilot CLI Agent v${info.version}\x1b[0m  │  Provider: ${info.provider}`, cols));
+    if (info.experimental) {
+        lines.push(padVisible(`Experimental Capabilities: ${info.experimental}`, cols));
+    }
+    lines.push(padVisible('', cols));
+    for (const tip of info.tips ?? []) {
+        lines.push(padVisible(`${bullet} ${tip}`, cols));
+    }
+    return lines;
+}
+/**
+ * Section C — the horizontal status dock. The left context (cwd + git branch)
+ * is left-aligned; the right context (usage metrics + model) is right-aligned.
+ * When the two would overlap, the left side is clipped to preserve the metrics.
+ */
+export function renderStatusDock(left, right, cols) {
+    const leftWidth = visibleWidth(left);
+    const rightWidth = visibleWidth(right);
+    // Right side alone fills or overflows the terminal — show only right side.
+    if (rightWidth >= cols) {
+        return stripAnsi(right).slice(0, cols);
+    }
+    if (leftWidth + 1 + rightWidth > cols) {
+        const room = Math.max(0, cols - rightWidth - 1);
+        const clippedLeft = stripAnsi(left).slice(0, room);
+        const gap = ' '.repeat(Math.max(0, cols - clippedLeft.length - rightWidth));
+        return `${clippedLeft}${gap}${right}`;
+    }
+    const gap = ' '.repeat(cols - leftWidth - rightWidth);
+    return `${left}${gap}${right}`;
+}
+/** The full-width magenta boundary line that separates timeline from input. */
+export function magentaSeparator(cols) {
+    return `${MAGENTA}${'─'.repeat(Math.max(0, cols))}${RESET}`;
+}
+/** Absolute bottom-row footer with the persistent keybinding legend. */
+export function renderFooter(cols) {
+    const legend = '[Ctrl+C] Quit  │  [PageUp/Down] Scroll Output  │  [/] System Commands  │  [@] Target Context';
+    return `\x1b[2m${padVisible(legend, cols)}\x1b[0m`;
+}
+/**
+ * Tokenise a slash command by splitting on whitespace thresholds rather than
+ * fixed slices: `/model gpt-4o` → { command: 'model', args: ['gpt-4o'] }.
+ */
+export function parseSlashCommand(input) {
+    const trimmed = input.trim();
+    if (!trimmed.startsWith('/'))
+        return null;
+    const [command, ...args] = trimmed.slice(1).split(/\s+/);
+    if (!command)
+        return null;
+    return { command, args };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "icopilot",
-  "version": "2.3.3",
+  "version": "2.3.5",
   "description": "iCopilot — terminal-native agentic CLI powered by GitHub Models",
   "type": "module",
   "bin": {