codeep 2.15.0 → 2.17.0

package/dist/renderer/App.js

@@ -5,14 +5,18 @@
 import { Screen } from './Screen.js';
 import { Input, LineEditor } from './Input.js';
 import { fg, style } from './ansi.js';
+import { getActionColor, formatActionTarget, getActionLabel } from './components/ActionFormatting.js';
 import { PRIMARY_COLOR, SPINNER_FRAMES, LOGO_LINES } from './components/uiConstants.js';
 import { bottomPanelHeight, chatLayout, messageOffsets, scrollOffsetForTarget, scrollWindow, formatTokenCount, statusBarRightHint, activePanel, computeInputDisplay, agentProgressBar, truncateNotification, shouldShowPasteDialog, buildPasteInfo } from './layout.js';
+import { buildAgentTimelineModel, formatElapsed, truncateMiddle, } from './components/AgentTimeline.js';
 import { parseCommandInput } from './inputParsing.js';
 import { formatWelcomeMessage } from './components/WelcomeFormatter.js';
-import { filterCommands } from './components/Autocomplete.js';
+import { filterCommands, detectMentionQuery } from './components/Autocomplete.js';
+import { suggestMentions } from '../utils/mentions.js';
 import { handleInlineStatusKey, handleInlineHelpKey, handleMenuKey, handleInlinePermissionKey, handleInlineSessionPickerKey, handleInlineConfirmKey, handleLoginKey, } from './handlers.js';
 import clipboardy from 'clipboardy';
 import { readImageFromClipboard } from '../utils/clipboard.js';
+import { estimateResourceImpact, formatResourceImpact } from '../utils/resourceImpact.js';
 // (PRIMARY_COLOR, SPINNER_FRAMES, LOGO_LINES, LOGO_HEIGHT moved to
 // ./components/uiConstants — imported above.)
 // ─── Command metadata ────────────────────────────────────────────────────────
@@ -56,6 +60,10 @@ export class App {
     agentThinking = '';
     agentWaitingForAI = false;
     agentLog = [];
+    /** Process uptime shown in the persistent footer. */
+    appStartedAt = Date.now();
+    /** Start of the current agent run; unlike app uptime, resets per task. */
+    agentStartedAt = null;
     // Paste detection state
     pasteInfo = null;
     pasteInfoOpen = false;
@@ -77,10 +85,26 @@ export class App {
     showAutocomplete = false;
     autocompleteIndex = 0;
     autocompleteItems = [];
+    // `@mention` autocomplete state — separate from the `/command` picker
+    // because mentions appear mid-sentence (not just at the start) and
+    // insert a file path (not a slash command). `mentionAtStart` is the
+    // index of the `@` in the editor value, used to replace `@query` with
+    // `@selectedPath` on Tab/Enter.
+    showMentionAutocomplete = false;
+    mentionIndex = 0;
+    mentionItems = [];
+    mentionAtStart = 0;
+    /** Project root for resolving `suggestMentions`. Cached per update. */
+    mentionRoot = '';
     // Inline confirmation dialog state
     confirmOpen = false;
     confirmOptions = null;
     confirmSelection = 'no';
+    // Inline hunk-picker state (`/apply --interactive`)
+    hunkPickerOpen = false;
+    hunkPickerOptions = null;
+    hunkPickerIndex = 0;
+    hunkPickerAccepted = [];
     // Inline menu state (renders below input/status)
     menuOpen = false;
     menuTitle = '';
@@ -306,8 +330,11 @@ export class App {
      * Set agent running state
      */
     setAgentRunning(running) {
+        const wasRunning = this.isAgentRunning;
         this.isAgentRunning = running;
         if (running) {
+            if (!wasRunning)
+                this.agentStartedAt = Date.now();
             this.agentIteration = 0;
             this.agentMaxIterations = 0;
             this.agentActions = [];
@@ -318,6 +345,7 @@ export class App {
             this.startSpinner();
         }
         else {
+            this.agentStartedAt = null;
             this.isLoading = false; // Ensure loading is cleared when agent finishes
             this.stopSpinner();
         }
@@ -507,6 +535,17 @@ export class App {
         this.confirmOpen = true;
         this.scheduleRender();
     }
+    /**
+     * Show the interactive hunk picker (`/apply --interactive`).
+     * The caller passes pre-built items + an `onComplete` callback.
+     */
+    showHunkPicker(options) {
+        this.hunkPickerOptions = options;
+        this.hunkPickerIndex = 0;
+        this.hunkPickerAccepted = [];
+        this.hunkPickerOpen = true;
+        this.scheduleRender();
+    }
     /**
      * Show permission dialog (inline, below status bar)
      */
@@ -704,6 +743,7 @@ export class App {
             loginOpen: this.loginOpen,
             menuOpen: this.menuOpen,
             showAutocomplete: this.showAutocomplete,
+            hunkPickerOpen: this.hunkPickerOpen,
         })) {
             case 'pasteInfo':
                 this.handlePasteInfoKey(event);
@@ -741,6 +781,9 @@ export class App {
             case 'menu':
                 this.handleMenuKey(event);
                 return;
+            case 'hunkPicker':
+                this.handleHunkPickerKey(event);
+                return;
         }
         // If intro is playing, skip on any key.
         if (this.showIntro) {
@@ -749,6 +792,11 @@ export class App {
         }
         // Escape to cancel streaming/loading/agent or close autocomplete
         if (event.key === 'escape') {
+            if (this.showMentionAutocomplete) {
+                this.showMentionAutocomplete = false;
+                this.scheduleRender();
+                return;
+            }
             if (this.showAutocomplete) {
                 this.showAutocomplete = false;
                 this.scheduleRender();
@@ -770,7 +818,7 @@ export class App {
             }
             return;
         }
-        // Handle autocomplete navigation
+        // Handle autocomplete navigation (`/command` picker)
         if (this.showAutocomplete) {
             if (event.key === 'up') {
                 this.autocompleteIndex = Math.max(0, this.autocompleteIndex - 1);
@@ -793,6 +841,28 @@ export class App {
                 }
             }
         }
+        // Handle `@mention` autocomplete navigation
+        if (this.showMentionAutocomplete) {
+            if (event.key === 'up') {
+                this.mentionIndex = Math.max(0, this.mentionIndex - 1);
+                this.scheduleRender();
+                return;
+            }
+            if (event.key === 'down') {
+                this.mentionIndex = Math.min(this.mentionItems.length - 1, this.mentionIndex + 1);
+                this.scheduleRender();
+                return;
+            }
+            if (event.key === 'tab') {
+                // Replace `@query` with `@selectedPath` in the editor.
+                if (this.mentionItems.length > 0) {
+                    this.applyMentionSelection();
+                    this.showMentionAutocomplete = false;
+                    this.scheduleRender();
+                    return;
+                }
+            }
+        }
         // Ctrl+L to clear
         if (event.ctrl && event.key === 'l') {
             this.clearMessages();
@@ -929,7 +999,11 @@ export class App {
      * Update autocomplete suggestions
      */
     updateAutocomplete() {
-        const result = filterCommands(this.editor.getValue(), App.COMMANDS);
+        const value = this.editor.getValue();
+        const cursorPos = this.editor.getCursorPos();
+        // `/command` picker — only when the input starts with `/` and the
+        // cursor is in the command-name segment (no space yet).
+        const result = filterCommands(value, App.COMMANDS);
         if (result === null) {
             this.showAutocomplete = false;
             this.autocompleteItems = [];
@@ -939,6 +1013,47 @@ export class App {
             this.showAutocomplete = result.items.length > 0;
             this.autocompleteIndex = result.index;
         }
+        // `@mention` picker — detect an in-progress mention at the cursor.
+        // Independent of the `/` picker so the two never compete.
+        const mention = detectMentionQuery(value, cursorPos);
+        if (mention) {
+            const root = this.options.getProjectRoot?.() ?? process.cwd();
+            this.mentionRoot = root;
+            this.mentionAtStart = mention.atStart;
+            this.mentionItems = suggestMentions({ root, query: mention.query, limit: 10 });
+            this.showMentionAutocomplete = this.mentionItems.length > 0;
+            this.mentionIndex = 0;
+        }
+        else {
+            this.showMentionAutocomplete = false;
+            this.mentionItems = [];
+        }
+    }
+    /**
+     * Replace the in-progress `@query` (from `mentionAtStart` to the
+     * cursor) with the selected mention's path. Keeps the `@` prefix and
+     * positions the cursor right after the inserted path so the user can
+     * keep typing the rest of the message.
+     */
+    applyMentionSelection() {
+        if (this.mentionItems.length === 0)
+            return;
+        const selected = this.mentionItems[this.mentionIndex];
+        const value = this.editor.getValue();
+        const cursor = this.editor.getCursorPos();
+        if (this.mentionAtStart >= value.length)
+            return;
+        // `mentionAtStart` is the index OF the `@`, so this slice EXCLUDES it —
+        // re-add the sigil or the completed path is no longer a mention and the
+        // file never gets attached.
+        const before = value.slice(0, this.mentionAtStart) + '@';
+        const after = value.slice(cursor);
+        const next = before + selected.insertPath + ' ' + after;
+        this.editor.setValue(next);
+        const newCursor = (before + selected.insertPath + ' ').length;
+        this.editor.setCursorPos(newCursor);
+        // The picker may still have matches for the new prefix — refresh.
+        this.updateAutocomplete();
     }
     /**
      * Handle inline status keys
@@ -1162,6 +1277,85 @@ export class App {
             render: () => this.scheduleRender(),
         });
     }
+    /**
+     * Handle keys in the interactive hunk picker.
+     *   y / Enter / →  accept this hunk, advance
+     *   n / ←         skip this hunk, advance
+     *   a             accept this + all remaining, finish
+     *   q / Esc       finish without accepting this hunk
+     *   ↑ / ↓         navigate (preview only — no decision)
+     */
+    handleHunkPickerKey(event) {
+        const opts = this.hunkPickerOptions;
+        if (!opts) {
+            this.hunkPickerOpen = false;
+            this.scheduleRender();
+            return;
+        }
+        const finish = () => {
+            const accepted = this.hunkPickerAccepted;
+            const cb = opts.onComplete;
+            this.hunkPickerOptions = null;
+            this.hunkPickerOpen = false;
+            this.hunkPickerAccepted = [];
+            this.hunkPickerIndex = 0;
+            cb(accepted);
+            this.scheduleRender();
+        };
+        const advance = () => {
+            if (this.hunkPickerIndex >= opts.items.length - 1) {
+                finish();
+            }
+            else {
+                this.hunkPickerIndex++;
+                this.scheduleRender();
+            }
+        };
+        const acceptCurrent = () => {
+            const item = opts.items[this.hunkPickerIndex];
+            if (item) {
+                this.hunkPickerAccepted.push({ path: item.path, hunkIndex: item.hunkIndex });
+            }
+            advance();
+        };
+        switch (event.key) {
+            case 'y':
+            case 'enter':
+            case 'right':
+                acceptCurrent();
+                return;
+            case 'n':
+            case 'left':
+                advance();
+                return;
+            case 'a':
+                // Accept current + all remaining.
+                for (let i = this.hunkPickerIndex; i < opts.items.length; i++) {
+                    const item = opts.items[i];
+                    this.hunkPickerAccepted.push({ path: item.path, hunkIndex: item.hunkIndex });
+                }
+                finish();
+                return;
+            case 'q':
+            case 'escape':
+                finish();
+                return;
+            case 'up':
+                if (this.hunkPickerIndex > 0) {
+                    this.hunkPickerIndex--;
+                    this.scheduleRender();
+                }
+                return;
+            case 'down':
+                if (this.hunkPickerIndex < opts.items.length - 1) {
+                    this.hunkPickerIndex++;
+                    this.scheduleRender();
+                }
+                return;
+            default:
+                return;
+        }
+    }
     /**
      * Submit the current input buffer (used by Enter and Escape-in-multiline)
      */
@@ -1257,6 +1451,10 @@ export class App {
             return;
         }
         this.screen.clear();
+        if (this.shouldRenderAgentTimeline(width, height)) {
+            this.renderAgentTimelineScreen(width, height);
+            return;
+        }
         // If menu or settings is open, reserve space for it at bottom
         const panelHeight = bottomPanelHeight({
             height,
@@ -1264,6 +1462,7 @@ export class App {
             pasteInfoPreviewLines: this.pasteInfo ? this.pasteInfo.preview.split('\n').length : 0,
             isAgentRunning: this.isAgentRunning,
             confirmOpen: this.confirmOpen && !!this.confirmOptions,
+            hunkPickerOpen: this.hunkPickerOpen && !!this.hunkPickerOptions,
             permissionOpen: this.permissionOpen,
             sessionPickerOpen: this.sessionPickerOpen,
             sessionPickerItemCount: this.sessionPickerItems.length,
@@ -1284,14 +1483,20 @@ export class App {
             settingsCount: SETTINGS.length,
             showAutocomplete: this.showAutocomplete,
             autocompleteItemCount: this.autocompleteItems.length,
+            mentionPickerOpen: this.showMentionAutocomplete,
+            mentionItemCount: this.mentionItems.length,
         });
         const layout = chatLayout(height, panelHeight);
         const mainHeight = layout.mainHeight;
-        const messagesStart = layout.messagesStart;
+        const headerHeight = width >= 60 && height >= 16 ? 2 : 0;
+        const messagesStart = Math.min(layout.messagesEnd, headerHeight);
         const messagesEnd = layout.messagesEnd;
         const separatorLine = layout.separatorLine;
         const inputLine = layout.inputLine;
         const statusLine = layout.statusLine;
+        if (headerHeight > 0) {
+            this.renderPersistentHeader(width);
+        }
         // Messages
         const messagesHeight = Math.max(1, messagesEnd - messagesStart + 1);
         const messagesToRender = this.getVisibleMessages(messagesHeight, width - 2);
@@ -1350,10 +1555,17 @@ export class App {
         if (this.confirmOpen && this.confirmOptions) {
             this.renderInlineConfirm(statusLine + 1, width);
         }
+        // Inline hunk picker renders BELOW status bar
+        if (this.hunkPickerOpen && this.hunkPickerOptions) {
+            this.renderInlineHunkPicker(statusLine + 1, width);
+        }
         // Inline autocomplete renders BELOW status bar
         if (this.showAutocomplete && this.autocompleteItems.length > 0 && !this.menuOpen && !this.settingsOpen && !this.helpOpen && !this.confirmOpen && !this.permissionOpen && !this.sessionPickerOpen) {
             this.renderInlineAutocomplete(statusLine + 1, width);
         }
+        else if (this.showMentionAutocomplete && this.mentionItems.length > 0 && !this.menuOpen && !this.settingsOpen && !this.helpOpen && !this.confirmOpen && !this.permissionOpen && !this.sessionPickerOpen) {
+            this.renderInlineMentionPicker(statusLine + 1, width);
+        }
         // Inline permission renders BELOW status bar
         if (this.permissionOpen) {
             this.renderInlinePermission(statusLine + 1, width);
@@ -1372,6 +1584,278 @@ export class App {
         }
         this.screen.render();
     }
+    shouldRenderAgentTimeline(width, height) {
+        if (!this.isAgentRunning || width < 92 || height < 26)
+            return false;
+        return !(this.pasteInfoOpen ||
+            this.permissionOpen ||
+            this.sessionPickerOpen ||
+            this.confirmOpen ||
+            this.hunkPickerOpen ||
+            this.statusOpen ||
+            this.helpOpen ||
+            this.settingsOpen ||
+            this.searchOpen ||
+            this.exportOpen ||
+            this.logoutOpen ||
+            this.loginOpen ||
+            this.menuOpen ||
+            this.showAutocomplete ||
+            this.showMentionAutocomplete);
+    }
+    renderPersistentHeader(width) {
+        const status = this.options.getStatus();
+        const project = status.projectPath.split('/').filter(Boolean).pop() || status.projectPath || 'no project';
+        const session = status.sessionId ? status.sessionId.slice(0, 8) : 'new';
+        const branch = status.branch || '';
+        this.screen.writeLine(0, '');
+        let x = 1;
+        const writeSegment = (label, value, valueStyle = fg.white) => {
+            const separator = x > 1 ? ' │ ' : '';
+            const required = separator.length + label.length + value.length;
+            if (x + required >= width - 1)
+                return false;
+            if (separator) {
+                this.screen.write(x, 0, separator, fg.gray);
+                x += separator.length;
+            }
+            this.screen.write(x, 0, label, fg.gray);
+            x += label.length;
+            this.screen.write(x, 0, value, valueStyle);
+            x += value.length;
+            return true;
+        };
+        const wordmark = 'CODEEP';
+        this.screen.write(x, 0, wordmark, PRIMARY_COLOR + style.bold);
+        x += wordmark.length;
+        writeSegment('', `v${status.version}`);
+        if (width >= 86)
+            writeSegment('session: ', session);
+        writeSegment('model: ', truncateMiddle(status.model || 'unknown', 22));
+        if (width >= 112)
+            writeSegment('provider: ', truncateMiddle(status.provider, 14));
+        if (width >= 128)
+            writeSegment('project: ', truncateMiddle(project, 18));
+        if (width >= 148 && branch) {
+            // Budget the separator and label before truncating. Sizing the value off
+            // `width - x` alone always overshoots writeSegment's fit guard, so a
+            // branch long enough to need truncating used to render nothing at all.
+            const branchBudget = width - x - ' │ '.length - 'branch: '.length - 2;
+            if (branchBudget >= 10) {
+                writeSegment('branch: ', truncateMiddle(branch, branchBudget), PRIMARY_COLOR);
+            }
+        }
+        this.screen.horizontalLine(1, '─', PRIMARY_COLOR);
+    }
+    renderAgentTimelineScreen(width, height) {
+        this.screen.clear();
+        this.renderPersistentHeader(width);
+        const inputY = height - 4;
+        const hintsY = height - 3;
+        const footerDividerY = height - 2;
+        const statusY = height - 1;
+        const workspaceTop = 2;
+        const workspaceBottom = inputY - 2;
+        const railWidth = width >= 132 ? Math.min(44, Math.floor(width * 0.28)) : 0;
+        const dividerX = railWidth > 0 ? width - railWidth : width;
+        const leftWidth = railWidth > 0 ? dividerX - 1 : width;
+        const timeline = buildAgentTimelineModel({
+            actions: this.agentActions,
+            thinking: this.agentThinking,
+            waitingForAI: this.agentWaitingForAI,
+            iteration: this.agentIteration,
+            maxIterations: this.agentMaxIterations,
+        });
+        const task = this.currentAgentTask();
+        this.screen.writeLine(workspaceTop, '');
+        this.screen.write(1, workspaceTop, 'YOU', PRIMARY_COLOR + style.bold);
+        this.screen.write(7, workspaceTop, 'Task:', PRIMARY_COLOR + style.bold);
+        this.screen.write(13, workspaceTop, truncateMiddle(task, Math.max(8, leftWidth - 15)), fg.white);
+        this.screen.horizontalLine(workspaceTop + 1, '─', fg.gray);
+        this.screen.writeLine(workspaceTop + 2, '');
+        this.screen.write(1, workspaceTop + 2, 'AGENT', PRIMARY_COLOR + style.bold);
+        const runLabel = this.agentWaitingForAI ? 'Choosing the next step' : 'Executing a tool';
+        this.screen.write(9, workspaceTop + 2, runLabel, fg.white);
+        const stepLabel = this.agentMaxIterations > 0
+            ? `step ${this.agentIteration}/${this.agentMaxIterations}`
+            : `step ${this.agentIteration}`;
+        if (stepLabel.length + 2 < leftWidth) {
+            this.screen.write(leftWidth - stepLabel.length - 1, workspaceTop + 2, stepLabel, fg.gray);
+        }
+        const expandedTimeline = workspaceBottom - workspaceTop >= 30;
+        let y = workspaceTop + 4;
+        if (expandedTimeline) {
+            this.screen.write(4, y, 'PLAN (HIGH LEVEL)', PRIMARY_COLOR + style.bold);
+            this.screen.write(22, y++, 'Inspect the relevant project context', fg.white);
+            this.screen.write(22, y++, 'Apply focused changes with permission checks', fg.white);
+            this.screen.write(22, y++, 'Run verification and summarize the result', fg.white);
+            this.screen.write(4, y, '─'.repeat(Math.max(8, leftWidth - 6)), fg.gray);
+            y += 2;
+        }
+        for (const stage of timeline.stages) {
+            if (y + 1 > workspaceBottom)
+                break;
+            const marker = stage.status === 'done' ? '●' : stage.status === 'active' ? '◆' : '○';
+            const markerStyle = this.timelineStatusStyle(stage.status);
+            this.screen.write(1, y, marker, markerStyle);
+            this.screen.write(2, y + 1, '│', stage.status === 'pending' ? fg.gray : markerStyle);
+            if (expandedTimeline && y + 2 <= workspaceBottom) {
+                this.screen.write(2, y + 2, '│', stage.status === 'pending' ? fg.gray : markerStyle);
+            }
+            this.screen.write(4, y, stage.id.padEnd(8), markerStyle + (stage.status === 'active' ? style.bold : ''));
+            this.screen.write(13, y, truncateMiddle(stage.summary, Math.max(8, leftWidth - 24)), stage.status === 'pending' ? fg.gray : fg.white);
+            const stateLabel = stage.status === 'done' ? 'done' : stage.status === 'active' ? 'active' : 'pending';
+            if (leftWidth > 50) {
+                this.screen.write(leftWidth - stateLabel.length - 1, y, stateLabel, markerStyle);
+            }
+            this.screen.write(13, y + 1, truncateMiddle(stage.detail, Math.max(8, leftWidth - 16)), fg.gray);
+            y += expandedTimeline ? 3 : 2;
+            if (stage.status === 'active' && y + 2 <= workspaceBottom) {
+                if (timeline.currentTarget) {
+                    const actionType = this.currentActionType();
+                    const actionLabel = actionType ? getActionLabel(actionType) : 'Working';
+                    this.screen.write(13, y, `${actionLabel}:`, PRIMARY_COLOR);
+                    this.screen.write(13 + actionLabel.length + 2, y, formatActionTarget(timeline.currentTarget, Math.max(12, leftWidth - actionLabel.length - 18)), fg.white);
+                    y++;
+                }
+                if (this.agentMaxIterations > 0) {
+                    const barWidth = Math.max(8, Math.min(36, leftWidth - 28));
+                    const bar = agentProgressBar(this.agentIteration, this.agentMaxIterations, barWidth);
+                    const percent = `${Math.round(timeline.progress * 100)}%`;
+                    this.screen.write(13, y, percent.padStart(4), PRIMARY_COLOR);
+                    this.screen.write(19, y, bar, PRIMARY_COLOR);
+                    y++;
+                }
+                if (expandedTimeline && y + 3 <= workspaceBottom) {
+                    this.screen.write(13, y, 'RECENT ACTIVITY', PRIMARY_COLOR + style.bold);
+                    this.screen.write(29, y, '─'.repeat(Math.max(4, leftWidth - 31)), fg.gray);
+                    y++;
+                    const recentActivity = this.agentLog.slice(-3);
+                    if (recentActivity.length === 0) {
+                        this.screen.write(13, y++, 'Waiting for the first completed action', fg.gray);
+                    }
+                    else {
+                        for (const entry of recentActivity) {
+                            if (y > workspaceBottom)
+                                break;
+                            const isError = entry.startsWith('✗') || entry.startsWith('!');
+                            const isActive = entry.startsWith('◆');
+                            const entryStyle = isError ? fg.red : isActive ? PRIMARY_COLOR : fg.green;
+                            this.screen.write(13, y, entry.slice(0, 1), entryStyle + style.bold);
+                            this.screen.write(15, y++, truncateMiddle(entry.slice(2), Math.max(8, leftWidth - 17)), isActive ? fg.white : fg.gray);
+                        }
+                    }
+                    y++;
+                }
+            }
+        }
+        if (railWidth > 0) {
+            this.renderAgentContextRail(dividerX, workspaceTop, workspaceBottom, railWidth, timeline);
+        }
+        this.screen.horizontalLine(inputY - 1, '─', PRIMARY_COLOR);
+        this.renderInput(inputY, width, false);
+        this.renderAgentKeyHints(hintsY, width);
+        this.screen.horizontalLine(footerDividerY, '─', fg.gray);
+        this.renderStatusBar(statusY, width);
+        this.screen.render();
+    }
+    renderAgentContextRail(dividerX, top, bottom, railWidth, timeline) {
+        for (let y = top; y <= bottom; y++) {
+            this.screen.write(dividerX, y, '│', PRIMARY_COLOR);
+        }
+        const x = dividerX + 2;
+        const contentWidth = Math.max(8, railWidth - 3);
+        let y = top + 1;
+        this.screen.write(x, y++, `CURRENT: ${timeline.currentStage}`, PRIMARY_COLOR + style.bold);
+        y++;
+        this.screen.write(x, y++, `FILES (${timeline.files.length})`, PRIMARY_COLOR + style.bold);
+        if (timeline.files.length === 0) {
+            this.screen.write(x, y++, 'No file changes yet', fg.gray);
+        }
+        else {
+            for (const file of timeline.files.slice(-6)) {
+                if (y > bottom - 7)
+                    break;
+                const marker = file.type === 'delete' ? 'D' : file.type === 'write' ? 'A' : 'M';
+                const color = file.result === 'error' ? fg.red : getActionColor(file.type);
+                this.screen.write(x, y, marker, color + style.bold);
+                this.screen.write(x + 2, y++, formatActionTarget(file.target, contentWidth - 2), file.result === 'error' ? fg.red : fg.white);
+            }
+        }
+        y++;
+        if (y <= bottom - 5) {
+            this.screen.write(x, y++, 'CHECKS', PRIMARY_COLOR + style.bold);
+            if (timeline.checks.length === 0) {
+                const activeCheck = timeline.currentStage === 'VERIFY' && timeline.currentTarget
+                    ? formatActionTarget(timeline.currentTarget, contentWidth)
+                    : 'Pending';
+                this.screen.write(x, y++, activeCheck, timeline.currentStage === 'VERIFY' ? fg.yellow : fg.gray);
+            }
+            else {
+                for (const check of timeline.checks.slice(-3)) {
+                    if (y > bottom - 3)
+                        break;
+                    const symbol = check.result === 'success' ? '✓' : '!';
+                    const color = check.result === 'success' ? fg.green : fg.red;
+                    this.screen.write(x, y, symbol, color + style.bold);
+                    this.screen.write(x + 2, y++, formatActionTarget(check.target, contentWidth - 2), fg.white);
+                }
+            }
+        }
+        const status = this.options.getStatus();
+        const contextY = Math.max(y + 1, bottom - 3);
+        if (contextY <= bottom) {
+            this.screen.write(x, contextY, 'CONTEXT', PRIMARY_COLOR + style.bold);
+            if (contextY + 1 <= bottom) {
+                const project = status.projectPath.split('/').filter(Boolean).pop() || status.projectPath;
+                this.screen.write(x, contextY + 1, truncateMiddle(project, contentWidth), fg.white);
+            }
+            if (contextY + 2 <= bottom) {
+                const branch = status.branch ? `branch ${status.branch}` : `${status.provider} · ${status.model}`;
+                this.screen.write(x, contextY + 2, truncateMiddle(branch, contentWidth), fg.gray);
+            }
+        }
+    }
+    renderAgentKeyHints(y, width) {
+        this.screen.writeLine(y, '');
+        const left = 'Keys: Enter reply · / commands · Esc stop · ↑↓ history';
+        const runStartedAt = this.agentStartedAt ?? Date.now();
+        const right = `agent: working · ${formatElapsed(Date.now() - runStartedAt)}`;
+        this.screen.write(1, y, truncateMiddle(left, Math.max(12, width - right.length - 4)), fg.gray);
+        if (right.length + 2 < width) {
+            this.screen.write(width - right.length - 1, y, right, fg.gray);
+        }
+    }
+    timelineStatusStyle(status) {
+        if (status === 'done')
+            return fg.green;
+        if (status === 'active')
+            return PRIMARY_COLOR;
+        return fg.gray;
+    }
+    currentActionType() {
+        const separator = this.agentThinking.indexOf(':');
+        if (separator < 0)
+            return '';
+        const type = this.agentThinking.slice(0, separator).trim().toLowerCase();
+        return ['read', 'search', 'list', 'fetch', 'write', 'edit', 'delete', 'mkdir', 'command'].includes(type)
+            ? type
+            : '';
+    }
+    currentAgentTask() {
+        for (let index = this.messages.length - 1; index >= 0; index--) {
+            const message = this.messages[index];
+            if (message.role !== 'user')
+                continue;
+            const task = message.content
+                .replace(/^\[DRY RUN]\s*/i, '')
+                .replace(/^\[AGENT]\s*/i, '')
+                .trim();
+            if (task)
+                return task;
+        }
+        return 'Autonomous coding task';
+    }
     /**
      * Render inline confirmation dialog below status bar
      */
@@ -1409,6 +1893,53 @@ export class App {
         // Footer
         this.screen.writeLine(y, '←/→ select • y/n quick • Enter confirm • Esc cancel', fg.gray);
     }
+    /**
+     * Render inline hunk picker (`/apply --interactive`).
+     * Shows the current hunk's diff + the y/n/a/q key legend.
+     */
+    renderInlineHunkPicker(startY, width) {
+        const opts = this.hunkPickerOptions;
+        if (!opts)
+            return;
+        const item = opts.items[this.hunkPickerIndex];
+        let y = startY;
+        this.screen.horizontalLine(y++, '─', PRIMARY_COLOR);
+        // Title + progress
+        const progress = opts.items.length > 0
+            ? ` (${this.hunkPickerIndex + 1}/${opts.items.length})`
+            : '';
+        this.screen.writeLine(y++, `${opts.title}${progress}`, PRIMARY_COLOR + style.bold);
+        if (!item) {
+            this.screen.writeLine(y++, 'No hunks to review.', fg.gray);
+            this.screen.writeLine(y, 'Press any key to close.', fg.gray);
+            return;
+        }
+        // File path + hunk header
+        this.screen.writeLine(y++, `File: ${item.path}`, fg.cyan);
+        this.screen.writeLine(y++, `Hunk: ${item.header}`, fg.gray);
+        // Diff lines (capped to available vertical space; show up to 12)
+        const maxDiffLines = 12;
+        const lines = item.lines.slice(0, maxDiffLines);
+        for (const line of lines) {
+            const prefix = line.charAt(0);
+            let color = fg.white;
+            if (prefix === '+')
+                color = fg.green;
+            else if (prefix === '-')
+                color = fg.red;
+            else if (prefix === '@')
+                color = fg.cyan;
+            // Truncate long lines to terminal width.
+            const truncated = line.length > width - 2 ? line.slice(0, width - 5) + '...' : line;
+            this.screen.writeLine(y++, `  ${truncated}`, color);
+        }
+        if (item.lines.length > maxDiffLines) {
+            this.screen.writeLine(y++, `  … (${item.lines.length - maxDiffLines} more lines)`, fg.gray);
+        }
+        y++;
+        // Key legend
+        this.screen.writeLine(y, 'y/Enter accept • n skip • a accept all • q/Esc quit • ↑/↓ navigate', fg.gray);
+    }
     /**
      * Render input line
      */
@@ -1477,12 +2008,12 @@ export class App {
             this.screen.showCursor(false);
             return;
         }
-        // Agent running state - show special prompt with gradient
+        // Keep the composer available while the agent works so the user can steer
+        // the run without losing context or waiting for the current tool to finish.
         if (this.isAgentRunning) {
+            const promptSymbol = '❯ ';
+            const maxInputWidth = Math.max(1, width - promptSymbol.length - 1);
             if (inputValue) {
-                // User is typing a reply — show their input with a prompt
-                const promptSymbol = '❯ ';
-                const maxInputWidth = width - promptSymbol.length - 1;
                 const displayInput = inputValue.length <= maxInputWidth ? inputValue : '…' + inputValue.slice(-(maxInputWidth - 1));
                 this.screen.write(0, y, promptSymbol, PRIMARY_COLOR);
                 this.screen.write(promptSymbol.length, y, displayInput + ' ');
@@ -1493,13 +2024,12 @@ export class App {
                 }
             }
             else {
-                const spinner = SPINNER_FRAMES[this.spinnerFrame];
-                const stepLabel = this.agentMaxIterations > 0
-                    ? `step ${this.agentIteration}/${this.agentMaxIterations}`
-                    : `step ${this.agentIteration}`;
-                const agentText = `${spinner} Agent working... ${stepLabel} | ${this.agentActions.length} actions (Esc · or type to reply)`;
-                this.screen.write(0, y, PRIMARY_COLOR + style.bold + agentText + style.reset);
-                this.screen.showCursor(false);
+                this.screen.write(0, y, promptSymbol, PRIMARY_COLOR + style.bold);
+                this.screen.write(promptSymbol.length, y, 'Reply to agent…', fg.gray);
+                if (!hideCursor) {
+                    this.screen.setCursor(promptSymbol.length, y);
+                    this.screen.showCursor(true);
+                }
             }
             return;
         }
@@ -1771,6 +2301,46 @@ export class App {
         const scrollInfo = items.length > maxVisible ? ` (${visibleStart + 1}-${visibleStart + visibleItems.length}/${items.length})` : '';
         this.screen.writeLine(y, `↑↓ navigate • Tab/Enter select • Esc cancel${scrollInfo}`, fg.gray);
     }
+    /**
+     * Render inline `@mention` file picker below the status bar.
+     *
+     * Mirrors the layout of `renderInlineAutocomplete` (separator → title →
+     * items → footer) but shows file paths with their parent directory as
+     * the description, and a `@` prefix instead of `/`.
+     */
+    renderInlineMentionPicker(startY, width) {
+        const items = this.mentionItems;
+        const maxVisible = Math.min(items.length, 8);
+        let y = startY;
+        // Separator line
+        this.screen.horizontalLine(y++, '─', PRIMARY_COLOR);
+        // Title
+        this.screen.writeLine(y++, 'Add file to context (@mention)', PRIMARY_COLOR + style.bold);
+        // Items: `path` + directory detail
+        const visibleStart = Math.max(0, this.mentionIndex - maxVisible + 1);
+        const visibleItems = items.slice(visibleStart, visibleStart + maxVisible);
+        for (let i = 0; i < visibleItems.length; i++) {
+            const item = visibleItems[i];
+            const actualIndex = visibleStart + i;
+            const isSelected = actualIndex === this.mentionIndex;
+            const prefix = isSelected ? '► ' : '  ';
+            const pathText = ('@' + item.label).padEnd(40);
+            if (isSelected) {
+                this.screen.write(0, y, prefix, PRIMARY_COLOR);
+                this.screen.write(prefix.length, y, pathText, PRIMARY_COLOR + style.bold);
+                this.screen.write(prefix.length + pathText.length, y, item.detail, fg.white);
+            }
+            else {
+                this.screen.write(0, y, prefix, '');
+                this.screen.write(prefix.length, y, pathText, fg.cyan);
+                this.screen.write(prefix.length + pathText.length, y, item.detail, fg.gray);
+            }
+            y++;
+        }
+        // Footer
+        const scrollInfo = items.length > maxVisible ? ` (${visibleStart + 1}-${visibleStart + visibleItems.length}/${items.length})` : '';
+        this.screen.writeLine(y, `↑↓ navigate • Tab select • Esc cancel${scrollInfo}`, fg.gray);
+    }
     /**
      * Render inline permission dialog
      */
@@ -2046,7 +2616,58 @@ export class App {
         }
         const status = this.options.getStatus();
         const stats = status.tokenStats;
-        // Left: model (gradient) · msg count · token count
+        const rightText = statusBarRightHint({
+            scrollOffset: this.scrollOffset,
+            unseenWhileScrolled: this.unseenWhileScrolled,
+            isStreaming: this.isStreaming,
+            isLoading: this.isLoading,
+        });
+        if (this.scrollOffset > 0 && this.unseenWhileScrolled > 0) {
+            this.screen.write(width - rightText.length, y, rightText, PRIMARY_COLOR);
+            return;
+        }
+        // Wide terminals get an operational footer: elapsed time and honest,
+        // explicitly-labelled resource ranges. These are estimates, never implied
+        // to be provider measurements.
+        if (width >= 110 && stats) {
+            const totalTokens = Math.max(0, stats.totalTokens);
+            const elapsed = formatElapsed(Date.now() - this.appStartedAt);
+            const leftParts = [
+                `runtime ${elapsed}`,
+                `tokens ${formatTokenCount(totalTokens)}`,
+            ];
+            if (typeof stats.estimatedCost === 'number' && stats.estimatedCost > 0) {
+                leftParts.push(`cost $${stats.estimatedCost < 0.01 ? stats.estimatedCost.toFixed(4) : stats.estimatedCost.toFixed(2)}`);
+            }
+            // Thinking-effort tier, same chip the compact fallback shows beside the
+            // model. Only present when set + supported — see getStatus.
+            if (status.reasoningEffort) {
+                leftParts.push(`effort ${status.reasoningEffort}`);
+            }
+            const leftText = leftParts.join(' · ');
+            this.screen.write(1, y, leftText, fg.gray);
+            // The right edge belongs to the hint: while streaming it reads
+            // "Esc to stop", the only on-screen affordance for interrupting a run.
+            // Claim it first, then spend whatever gap is left on the (decorative)
+            // resource estimate — never the other way around.
+            // Same right-edge column as the compact fallback and the scroll badge, so
+            // the hint doesn't shift by one when the terminal crosses 110 columns.
+            let rightEdge = width;
+            if (rightText && width - rightText.length > leftText.length + 3) {
+                rightEdge = width - rightText.length;
+                this.screen.write(rightEdge, y, rightText, fg.gray);
+            }
+            if (totalTokens > 0 && width >= 138) {
+                const impact = formatResourceImpact(estimateResourceImpact(totalTokens));
+                const impactText = `energy ${impact.energy} est · water ${impact.water} est`;
+                const impactX = rightEdge - impactText.length - 3;
+                if (impactX > leftText.length + 3) {
+                    this.screen.write(impactX, y, impactText, fg.gray);
+                }
+            }
+            return;
+        }
+        // Compact fallback: model · messages · token count.
         const modelName = status.model || '';
         const msgCount = `${this.messages.length} msg`;
         const tokenStr = stats && stats.totalTokens > 0
@@ -2073,19 +2694,6 @@ export class App {
             this.screen.write(leftX, y, ' · ', fg.gray);
             this.screen.write(leftX + 3, y, tokenStr, fg.gray);
         }
-        // Right: context-sensitive hints. While scrolled up, the "new
-        // messages below" badge takes priority — it's the only signal that
-        // the conversation moved on (addMessage no longer yanks the view).
-        const rightText = statusBarRightHint({
-            scrollOffset: this.scrollOffset,
-            unseenWhileScrolled: this.unseenWhileScrolled,
-            isStreaming: this.isStreaming,
-            isLoading: this.isLoading,
-        });
-        if (this.scrollOffset > 0 && this.unseenWhileScrolled > 0) {
-            this.screen.write(width - rightText.length, y, rightText, PRIMARY_COLOR);
-            return;
-        }
         this.screen.write(width - rightText.length, y, rightText, fg.gray);
     }
     /**
@@ -2094,20 +2702,6 @@ export class App {
     getVisibleMessages(height, width) {
         const allLines = [];
         this.codeBlockCounter.current = 0; // Reset block counter for each render pass
-        // Logo at the top, scrolls with content
-        if (height >= 20) {
-            const logoWidth = LOGO_LINES[0].length;
-            const logoX = Math.max(0, Math.floor((width - logoWidth) / 2));
-            const pad = ' '.repeat(logoX);
-            for (const line of LOGO_LINES) {
-                allLines.push({ text: pad + line, style: PRIMARY_COLOR, raw: false });
-            }
-            allLines.push({ text: '', style: '' });
-        }
-        else {
-            allLines.push({ text: ' Codeep', style: PRIMARY_COLOR, raw: false });
-            allLines.push({ text: '', style: '' });
-        }
         for (let i = 0; i < this.messages.length; i++) {
             const msg = this.messages[i];
             const cached = this.messageCache[i];