pzero-operator 0.1.6 → 0.1.8

package/dist/modes/interactive/interactive-mode.js

@@ -6,7 +6,7 @@ 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 { CombinedAutocompleteProvider, Container, fuzzyFilter, Loader, Markdown, matchesKey, ProcessTerminal, Spacer, setKeybindings, Text, TruncatedText, TUI, visibleWidth, } from "@operator/tui";
+import { CombinedAutocompleteProvider, Container, fuzzyFilter, Loader, Markdown, matchesKey, ProcessTerminal, Spacer, setKeybindings, Text, TruncatedText, TUI, truncateToWidth, visibleWidth, } from "@operator/tui";
 import { spawn, spawnSync } from "child_process";
 import { APP_NAME, getAgentDir, getDebugLogPath, getShareViewerUrl, getUpdateInstruction, VERSION, } from "../../config.js";
 import { parseSkillBlock } from "../../core/agent-session.js";
@@ -24,6 +24,7 @@ import { getChangelogPath, getNewEntries, parseChangelog } from "../../utils/cha
 import { copyToClipboard } from "../../utils/clipboard.js";
 import { extensionForImageMimeType, readClipboardImage } from "../../utils/clipboard-image.js";
 import { parseGitUrl } from "../../utils/git.js";
+import { detectSupportedImageMimeTypeFromFile } from "../../utils/mime.js";
 import { killTrackedDetachedChildren } from "../../utils/shell.js";
 import { ensureTool } from "../../utils/tools-manager.js";
 import { ArminComponent } from "./components/armin.js";
@@ -89,6 +90,133 @@ class StartupHeroText extends Text {
         clearInterval(this.interval);
     }
 }
+function fitLine(line, width) {
+    const fitted = truncateToWidth(line ?? "", Math.max(0, width), theme.fg("dim", "..."));
+    const padding = Math.max(0, width - visibleWidth(fitted));
+    return fitted + " ".repeat(padding);
+}
+function framedLines(lines, width, title = " OPERATOR ") {
+    if (width < 8)
+        return lines;
+    const innerWidth = Math.max(1, width - 4);
+    const titleText = truncateToWidth(title, Math.max(0, innerWidth - 2), "");
+    const topFill = Math.max(0, width - 3 - visibleWidth(titleText));
+    const top = theme.fg("borderAccent", "┌") + theme.bold(theme.fg("accent", titleText)) + theme.fg("borderAccent", "─".repeat(topFill) + "┐");
+    const bottom = theme.fg("borderAccent", "└" + "─".repeat(width - 2) + "┘");
+    return [
+        top,
+        ...lines.map((line) => theme.fg("borderAccent", "│ ") + fitLine(line, innerWidth) + theme.fg("borderAccent", " │")),
+        bottom,
+    ];
+}
+function formatTokensCompact(count) {
+    if (!count)
+        return "0";
+    if (count < 1000)
+        return String(count);
+    if (count < 10000)
+        return `${(count / 1000).toFixed(1)}k`;
+    if (count < 1000000)
+        return `${Math.round(count / 1000)}k`;
+    return `${(count / 1000000).toFixed(1)}M`;
+}
+function renderGauge(value, width) {
+    const pct = Number.isFinite(value) ? Math.max(0, Math.min(100, value)) : 0;
+    const slots = Math.max(6, Math.min(18, width - 10));
+    const filled = Math.round((slots * pct) / 100);
+    return `[${theme.fg("borderAccent", "█".repeat(filled))}${theme.fg("dim", "░".repeat(slots - filled))}] ${pct.toFixed(1)}%`;
+}
+function getSpinnerFrame(frame) {
+    const frames = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+    return frames[frame % frames.length] || "•";
+}
+function formatReasoningLevel(level) {
+    const normalized = level === "low" || level === "medium" || level === "high" ? level : "off";
+    if (normalized === "low")
+        return `${theme.fg("success", "[LOW]")} ${theme.fg("success", "•")} ${theme.fg("dim", "light analysis")}`;
+    if (normalized === "medium")
+        return `${theme.fg("warning", "[MEDIUM]")} ${theme.fg("warning", "••")} ${theme.fg("dim", "balanced depth")}`;
+    if (normalized === "high")
+        return `${theme.fg("error", "[HIGH]")} ${theme.fg("error", "•••")} ${theme.fg("dim", "deep reasoning")}`;
+    return `${theme.fg("accent", "[FAST]")} ${theme.fg("accent", "⚡")} ${theme.fg("dim", "direct output")}`;
+}
+function formatReasoningLegend() {
+    return [
+        `${theme.fg("accent", "FAST")} ${theme.fg("dim", "⚡")}`,
+        `${theme.fg("success", "LOW")} ${theme.fg("success", "•")}`,
+        `${theme.fg("warning", "MED")} ${theme.fg("warning", "••")}`,
+        `${theme.fg("error", "HIGH")} ${theme.fg("error", "•••")}`,
+    ].join(theme.fg("dim", "  "));
+}
+function displayThinkingLevel(level) {
+    return level === "off" ? "fast" : level;
+}
+class OperatorWorkspaceLayout {
+    mode;
+    frame = 0;
+    interval;
+    constructor(mode) {
+        this.mode = mode;
+        this.interval = setInterval(() => {
+            this.frame = (this.frame + 1) % 24;
+            this.mode.ui.requestRender();
+        }, 380);
+        this.interval.unref?.();
+    }
+    dispose() {
+        clearInterval(this.interval);
+    }
+    render(width) {
+        const terminalHeight = this.mode.ui.terminal.rows || 30;
+        const headerHeight = this.mode.headerContainer.render(width).length;
+        const outerFrame = width >= 72;
+        const contentWidth = outerFrame ? Math.max(1, width - 4) : width;
+        const maxRows = Math.max(8, terminalHeight - headerHeight - (outerFrame ? 2 : 0));
+        const renderBody = (bodyLines) => outerFrame ? framedLines(bodyLines, width, this.mode.fullHistoryView ? " OPERATOR / FULL CHAT " : " OPERATOR / WORKSPACE ") : bodyLines;
+        if (contentWidth < 96) {
+            const leftLines = this.clampLeftLines(this.renderLeft(contentWidth), maxRows);
+            return renderBody([
+                ...leftLines,
+                theme.fg("borderMuted", "─".repeat(Math.max(0, contentWidth))),
+                ...this.mode.renderOperatorSidebar(contentWidth).slice(0, Math.max(0, maxRows - leftLines.length - 1)),
+            ]);
+        }
+        const gutter = 3;
+        const leftWidth = Math.max(64, Math.floor(contentWidth * 0.65) - 1);
+        const rightWidth = Math.max(28, contentWidth - leftWidth - gutter);
+        const separator = theme.fg("borderMuted", " │ ");
+        const leftLines = this.clampLeftLines(this.renderLeft(leftWidth), maxRows);
+        const rightLines = this.mode.renderOperatorSidebar(rightWidth).slice(0, maxRows);
+        const rowCount = this.mode.fullHistoryView ? Math.max(maxRows, leftLines.length) : maxRows;
+        const rightStart = Math.max(0, rowCount - maxRows);
+        const lines = [];
+        for (let i = 0; i < rowCount; i++) {
+            const rightIndex = this.mode.fullHistoryView ? i - rightStart : i;
+            lines.push(fitLine(leftLines[i] ?? "", leftWidth) + separator + fitLine(rightLines[rightIndex] ?? "", rightWidth));
+        }
+        return renderBody(lines);
+    }
+    renderLeft(width) {
+        const components = [
+            this.mode.chatContainer,
+            this.mode.pendingMessagesContainer,
+            this.mode.statusContainer,
+            this.mode.widgetContainerAbove,
+            this.mode.editorDeckContainer,
+            this.mode.editorContainer,
+            this.mode.widgetContainerBelow,
+        ];
+        return components.flatMap((component) => component.render(width));
+    }
+    clampLeftLines(lines, maxRows) {
+        if (this.mode.fullHistoryView)
+            return lines;
+        if (lines.length <= maxRows)
+            return lines;
+        const marker = theme.fg("dim", `... ${lines.length - maxRows + 1} earlier lines hidden in current view ...`);
+        return [marker, ...lines.slice(-(maxRows - 1))];
+    }
+}
 function isUnknownModel(model) {
     return !!model && model.provider === "unknown" && model.id === "unknown" && model.api === "unknown";
 }
@@ -126,6 +254,7 @@ export class InteractiveMode {
     fdPath;
     editorDeckContainer;
     editorContainer;
+    workspaceLayout;
     footer;
     footerDataProvider;
     // Stored so the same manager can be injected into custom editors, selectors, and extension UI.
@@ -155,6 +284,7 @@ export class InteractiveMode {
     isFirstUserMessage = true;
     // Tool output expansion state
     toolOutputExpanded = false;
+    fullHistoryView = false;
     // Thinking block visibility state
     hideThinkingBlock = false;
     // Skill commands: command name -> skill file path
@@ -177,6 +307,7 @@ export class InteractiveMode {
     retryEscapeHandler;
     // Messages queued while compaction is running
     compactionQueuedMessages = [];
+    pendingImageAttachments = [];
     // Shutdown state
     shutdownRequested = false;
     // Extension UI state
@@ -238,6 +369,7 @@ export class InteractiveMode {
         this.editorDeckContainer = new Container();
         this.editorContainer = new Container();
         this.editorContainer.addChild(this.editor);
+        this.workspaceLayout = new OperatorWorkspaceLayout(this);
         this.footerDataProvider = new FooterDataProvider(this.sessionManager.getCwd());
         this.footer = new FooterComponent(this.session, this.footerDataProvider);
         this.footer.setAutoCompactEnabled(this.session.autoCompactionEnabled);
@@ -472,15 +604,8 @@ export class InteractiveMode {
             this.builtInHeader = new Text("", 0, 0);
             this.headerContainer.addChild(this.builtInHeader);
         }
-        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.editorDeckContainer);
-        this.ui.addChild(this.editorContainer);
-        this.ui.addChild(this.widgetContainerBelow);
-        this.ui.addChild(this.footer);
+        this.ui.addChild(this.workspaceLayout);
         this.ui.setFocus(this.editor);
         this.setupKeyHandlers();
         this.setupEditorSubmitHandler();
@@ -591,7 +716,9 @@ export class InteractiveMode {
                     continue;
                 }
                 this.dismissStartupHero();
-                await this.session.prompt(userInput);
+                const text = typeof userInput === "string" ? userInput : userInput.text;
+                const images = typeof userInput === "string" ? undefined : userInput.images;
+                await this.session.prompt(text, { images });
             }
             catch (error) {
                 const errorMessage = error instanceof Error ? error.message : "Unknown error occurred";
@@ -1512,22 +1639,12 @@ export class InteractiveMode {
         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
+            // Custom footer is rendered inside the right sidebar.
             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();
     }
@@ -1981,6 +2098,7 @@ export class InteractiveMode {
         this.ui.onDebug = () => this.handleDebugCommand();
         this.defaultEditor.onAction("app.model.select", () => this.showModelSelector());
         this.defaultEditor.onAction("app.tools.expand", () => this.toggleToolOutputExpansion());
+        this.defaultEditor.onAction("app.history.full", () => this.toggleFullHistoryView());
         this.defaultEditor.onAction("app.thinking.toggle", () => this.toggleThinkingBlockVisibility());
         this.defaultEditor.onAction("app.editor.external", () => this.openExternalEditor());
         this.defaultEditor.onAction("app.message.followUp", () => this.handleFollowUp());
@@ -2007,14 +2125,15 @@ export class InteractiveMode {
             if (!image) {
                 return;
             }
-            // Write to temp file
-            const tmpDir = os.tmpdir();
             const ext = extensionForImageMimeType(image.mimeType) ?? "png";
-            const fileName = `operator-clipboard-${crypto.randomUUID()}.${ext}`;
-            const filePath = path.join(tmpDir, fileName);
-            fs.writeFileSync(filePath, Buffer.from(image.bytes));
-            // Insert file path directly
-            this.editor.insertTextAtCursor?.(filePath);
+            this.pendingImageAttachments.push({
+                type: "image",
+                data: Buffer.from(image.bytes).toString("base64"),
+                mimeType: image.mimeType,
+                filename: `clipboard-${crypto.randomUUID()}.${ext}`,
+            });
+            this.showStatus(`Image attached (${this.pendingImageAttachments.length})`);
+            this.updateEditorDeck();
             this.ui.requestRender();
         }
         catch {
@@ -2024,7 +2143,9 @@ export class InteractiveMode {
     setupEditorSubmitHandler() {
         this.defaultEditor.onSubmit = async (text) => {
             text = text.trim();
-            if (!text)
+            const { text: normalizedText, images } = await this.preparePromptPayload(text);
+            text = normalizedText;
+            if (!text && !images?.length)
                 return;
             if (DISABLED_SLASH_COMMANDS.has(text) || Array.from(DISABLED_SLASH_COMMANDS).some((command) => text.startsWith(`${command} `))) {
                 this.editor.setText("");
@@ -2059,28 +2180,30 @@ export class InteractiveMode {
                 }
                 const value = text.startsWith("/thinking ") ? text.slice(10).trim().toLowerCase() : "";
                 if (!value) {
-                    const selected = await this.showExtensionSelector("Select analysis depth", ["low", "medium", "high"]);
+                    const selected = await this.showExtensionSelector("Select analysis depth", ["fast", "low", "medium", "high"]);
                     if (!selected) {
                         this.showStatus("Analysis depth selection cancelled");
                         return;
                     }
-                    this.session.setThinkingLevel(selected);
+                    this.session.setThinkingLevel(selected === "fast" ? "off" : selected);
                     const after = this.session.thinkingLevel || "off";
                     this.footer.invalidate();
                     this.updateEditorBorderColor();
-                    this.showStatus(`Analysis depth: ${after}`);
+                    this.showStatus(`Analysis depth: ${displayThinkingLevel(after)}`);
                     return;
                 }
-                if (!["low", "medium", "high"].includes(value)) {
-                    this.showStatus("Use /thinking low, /thinking medium, or /thinking high");
+                if (!["fast", "low", "medium", "high"].includes(value)) {
+                    this.showStatus("Use /thinking fast, /thinking low, /thinking medium, or /thinking high");
                     return;
                 }
                 const before = this.session.thinkingLevel || "off";
-                this.session.setThinkingLevel(value);
+                this.session.setThinkingLevel(value === "fast" ? "off" : value);
                 const after = this.session.thinkingLevel || "off";
                 this.footer.invalidate();
                 this.updateEditorBorderColor();
-                this.showStatus(before === after ? `Analysis depth unchanged: ${after}` : `Analysis depth: ${after}`);
+                this.showStatus(before === after
+                    ? `Analysis depth unchanged: ${displayThinkingLevel(after)}`
+                    : `Analysis depth: ${displayThinkingLevel(after)}`);
                 return;
             }
             if (text === "/copy") {
@@ -2145,7 +2268,7 @@ export class InteractiveMode {
                 const command = isExcluded ? text.slice(2).trim() : text.slice(1).trim();
                 if (command) {
                     if (this.session.isBashRunning) {
-                        this.showWarning("A bash command is already running. Press Ctrl+C to cancel it first.");
+                        this.showWarning("A shell command is already running. Press Ctrl+C to cancel it first.");
                         this.editor.setText(text);
                         return;
                     }
@@ -2167,10 +2290,10 @@ export class InteractiveMode {
                 if (this.isExtensionCommand(text)) {
                     this.editor.addToHistory?.(text);
                     this.editor.setText("");
-                    await this.session.prompt(text);
+                    await this.session.prompt(text, { images });
                 }
                 else {
-                    this.queueCompactionMessage(text, "steer");
+                    this.queueCompactionMessage(text, "steer", images);
                 }
                 return;
             }
@@ -2179,7 +2302,7 @@ export class InteractiveMode {
             if (this.session.isStreaming) {
                 this.editor.addToHistory?.(text);
                 this.editor.setText("");
-                await this.session.prompt(text, { streamingBehavior: "steer" });
+                await this.session.prompt(text, { streamingBehavior: "steer", images });
                 this.updatePendingMessagesDisplay();
                 this.ui.requestRender();
                 return;
@@ -2188,9 +2311,11 @@ export class InteractiveMode {
             // First, move any pending bash components to chat
             this.flushPendingBashComponents();
             if (this.onInputCallback) {
-                this.onInputCallback(text);
+                this.onInputCallback({ text, images });
             }
             this.editor.addToHistory?.(text);
+            this.pendingImageAttachments = [];
+            this.updateEditorDeck();
         };
     }
     subscribeToAgent() {
@@ -2206,6 +2331,7 @@ export class InteractiveMode {
         switch (event.type) {
             case "agent_start":
                 this.ui.terminal.setProgress(true);
+                this.fullHistoryView = false;
                 // Restore main escape handler if retry handler is still active
                 // (retry success event fires later, but we need main handler now)
                 if (this.retryEscapeHandler) {
@@ -2483,7 +2609,11 @@ export class InteractiveMode {
         const textBlocks = typeof message.content === "string"
             ? [{ type: "text", text: message.content }]
             : message.content.filter((c) => c.type === "text");
-        return textBlocks.map((c) => c.text).join("");
+        const imageCount = typeof message.content === "string"
+            ? 0
+            : message.content.filter((c) => c.type === "image").length;
+        const text = textBlocks.map((c) => c.text).join("");
+        return imageCount > 0 ? `${text}\n\n[Attached images: ${imageCount}]` : text;
     }
     /**
      * Show a status message in the chat.
@@ -2670,6 +2800,50 @@ export class InteractiveMode {
             };
         });
     }
+    async buildImageAttachmentsFromPaths(text) {
+        const attachments = [];
+        const keptLines = [];
+        const lines = text.split("\n");
+        for (const line of lines) {
+            const candidate = line.trim();
+            if (!candidate) {
+                keptLines.push(line);
+                continue;
+            }
+            const resolvedPath = path.isAbsolute(candidate)
+                ? candidate
+                : path.resolve(this.sessionManager.getCwd(), candidate);
+            if (!fs.existsSync(resolvedPath)) {
+                keptLines.push(line);
+                continue;
+            }
+            const mimeType = await detectSupportedImageMimeTypeFromFile(resolvedPath).catch(() => null);
+            if (!mimeType) {
+                keptLines.push(line);
+                continue;
+            }
+            attachments.push({
+                type: "image",
+                data: fs.readFileSync(resolvedPath).toString("base64"),
+                mimeType,
+                filename: path.basename(resolvedPath),
+            });
+        }
+        return {
+            text: keptLines.join("\n").trim(),
+            images: attachments,
+        };
+    }
+    async preparePromptPayload(text) {
+        const pathAttachments = await this.buildImageAttachmentsFromPaths(text);
+        const images = [...this.pendingImageAttachments, ...pathAttachments.images];
+        this.pendingImageAttachments = [];
+        this.updateEditorDeck();
+        return {
+            text: pathAttachments.text || text,
+            images: images.length > 0 ? images : undefined,
+        };
+    }
     rebuildChatFromMessages() {
         this.chatContainer.clear();
         const context = this.sessionManager.buildSessionContext();
@@ -2779,33 +2953,36 @@ export class InteractiveMode {
     }
     async handleFollowUp() {
         const text = (this.editor.getExpandedText?.() ?? this.editor.getText()).trim();
-        if (!text)
+        if (!text && this.pendingImageAttachments.length === 0)
+            return;
+        if (!this.session.isStreaming && !this.session.isCompacting) {
+            if (this.editor.onSubmit) {
+                this.editor.onSubmit(text);
+            }
             return;
+        }
+        const payload = await this.preparePromptPayload(text);
         // Queue input during compaction (extension commands execute immediately)
         if (this.session.isCompacting) {
-            if (this.isExtensionCommand(text)) {
-                this.editor.addToHistory?.(text);
+            if (this.isExtensionCommand(payload.text)) {
+                this.editor.addToHistory?.(payload.text);
                 this.editor.setText("");
-                await this.session.prompt(text);
+                await this.session.prompt(payload.text, { images: payload.images });
             }
             else {
-                this.queueCompactionMessage(text, "followUp");
+                this.queueCompactionMessage(payload.text, "followUp", payload.images);
             }
             return;
         }
         // Alt+Enter queues a follow-up message (waits until agent finishes)
         // This handles extension commands (execute immediately), prompt template expansion, and queueing
         if (this.session.isStreaming) {
-            this.editor.addToHistory?.(text);
+            this.editor.addToHistory?.(payload.text);
             this.editor.setText("");
-            await this.session.prompt(text, { streamingBehavior: "followUp" });
+            await this.session.prompt(payload.text, { streamingBehavior: "followUp", images: payload.images });
             this.updatePendingMessagesDisplay();
             this.ui.requestRender();
         }
-        // If not streaming, Alt+Enter acts like regular Enter (trigger onSubmit)
-        else if (this.editor.onSubmit) {
-            this.editor.onSubmit(text);
-        }
     }
     handleDequeue() {
         const restored = this.restoreQueuedMessagesToEditor();
@@ -2829,17 +3006,105 @@ export class InteractiveMode {
     }
     updateEditorDeck() {
         this.editorDeckContainer.clear();
-        const modeLabel = this.isBashMode ? "shell lane" : "prompt lane";
-        const stateLabel = this.isInterruptibleWorkActive()
-            ? "live processing  •  ctrl+c interrupt"
-            : `ready  •  ${keyText("tui.input.submit")} send`;
+        const modeLabel = this.isBashMode ? "shell" : "prompt";
+        const stateLabel = this.isInterruptibleWorkActive() ? "active" : "ready";
+        const imageLabel = this.pendingImageAttachments.length > 0
+            ? theme.fg("warning", `${this.pendingImageAttachments.length} image${this.pendingImageAttachments.length > 1 ? "s" : ""}`)
+            : "";
         const hintLabel = this.isBashMode
-            ? `! shell  •  ${keyText("app.clear")} interrupt  •  ${keyText("app.model.select")} engines`
-            : `/ commands  •  ${keyText("app.thinking.cycle")} analysis  •  ${keyText("app.model.select")} engines  •  ${keyText("app.editor.external")} external editor`;
-        this.editorDeckContainer.addChild(new Text(theme.bold(theme.fg("accent", `INPUT DECK // ${modeLabel}`)), 0, 0));
-        this.editorDeckContainer.addChild(new Text(theme.fg("dim", `${stateLabel}  •  ${hintLabel}`), 0, 0));
+            ? theme.fg("dim", `! shell | ${keyText("app.clear")} stop`)
+            : theme.fg("dim", `/ cmd | ${keyText("app.history.full")} full | ${keyText("app.thinking.cycle")} `) +
+                formatReasoningLegend() +
+                theme.fg("dim", ` | ${keyText("app.model.select")} model`);
+        this.editorDeckContainer.addChild(new TruncatedText(theme.bold(theme.fg(this.isBashMode ? "warning" : "accent", `INPUT ${modeLabel}`)) +
+            theme.fg("dim", "  |  ") +
+            theme.fg(this.isInterruptibleWorkActive() ? "warning" : "success", stateLabel) +
+            (imageLabel ? theme.fg("dim", "  |  ") + imageLabel : "") +
+            theme.fg("dim", "  |  ") +
+            hintLabel, 0, 0));
         this.editorDeckContainer.addChild(new Spacer(1));
     }
+    renderOperatorSidebar(width) {
+        const state = this.session.state;
+        const contextUsage = this.session.getContextUsage();
+        const contextWindow = contextUsage?.contextWindow ?? state.model?.contextWindow ?? 0;
+        const contextPercent = contextUsage?.percent ?? 0;
+        let totalInput = 0;
+        let totalOutput = 0;
+        let totalCacheRead = 0;
+        for (const entry of this.session.sessionManager.getEntries()) {
+            if (entry.type === "message" && entry.message.role === "assistant") {
+                totalInput += entry.message.usage.input;
+                totalOutput += entry.message.usage.output;
+                totalCacheRead += entry.message.usage.cacheRead;
+            }
+        }
+        const cwd = this.session.sessionManager.getCwd().replace(process.env.HOME || "", "~");
+        const sessionName = this.session.sessionManager.getSessionName() || "unnamed";
+        const modelName = state.model?.id || "no-model";
+        const providerName = state.model?.provider || "none";
+        const thinking = state.model?.reasoning ? this.session.thinkingLevel || "off" : "off";
+        const reasoningText = formatReasoningLevel(thinking);
+        const active = this.isInterruptibleWorkActive();
+        const activeTools = this.pendingTools.size;
+        const queued = this.session.pendingMessageCount || 0;
+        const activeToolNames = this.session.getActiveToolNames?.() || [];
+        const toolText = activeToolNames.length ? activeToolNames.slice(0, 6).join(", ") : "read, bash, edit, write";
+        const pulse = active ? ["●", "●", "●", "○"][Math.floor((this.workspaceLayout.frame % 24) / 6)] : "●";
+        const loadingMessage = this.loadingAnimation?.message || this.defaultWorkingMessage;
+        const spinner = getSpinnerFrame(this.workspaceLayout.frame);
+        const rule = theme.fg("borderMuted", "─".repeat(Math.max(0, width)));
+        const section = (name) => fitLine(theme.bold(theme.fg("accent", `▌ ${name}`)) + theme.fg("borderMuted", " " + "─".repeat(Math.max(0, width - visibleWidth(name) - 4))), width);
+        const label = (name, value, color = "text") => fitLine(theme.fg("dim", `${name.padEnd(10)} `) + theme.fg(color, value), width);
+        const rawLabel = (name, value) => fitLine(theme.fg("dim", `${name.padEnd(10)} `) + value, width);
+        const lines = [
+            theme.bold(fitLine(theme.fg("accent", "OPERATOR CONTROL"), width)),
+            fitLine(theme.fg("dim", "agent loop dashboard"), width),
+            rule,
+            section("RUN"),
+            label("state", `${pulse} ${active ? "RUNNING" : "READY"}`, active ? "warning" : "success"),
+            label("phase", active ? "working / verify" : "waiting input", active ? "accent" : "muted"),
+            label("queue", `${queued} pending`, queued ? "warning" : "text"),
+            ...(active
+                ? [
+                    rawLabel("activity", `${theme.fg("accent", spinner)} ${theme.fg("text", loadingMessage)}`),
+                    "",
+                ]
+                : []),
+            ...(!active ? [""] : []),
+            section("CONTEXT"),
+            fitLine(renderGauge(contextPercent, width), width),
+            label("window", `${formatTokensCompact(contextWindow)} tokens`),
+            label("usage", `↑${formatTokensCompact(totalInput)} ↓${formatTokensCompact(totalOutput)} R${formatTokensCompact(totalCacheRead)}`),
+            label("history", this.fullHistoryView ? "full view" : "compact", this.fullHistoryView ? "warning" : "text"),
+            "",
+            section("ENGINE"),
+            label("model", modelName),
+            rawLabel("reason", reasoningText),
+            label("provider", providerName),
+            "",
+            section("WORKSPACE"),
+            label("path", cwd),
+            label("thread", sessionName),
+            "",
+            section("TOOLS"),
+            label("active", `${activeTools} running`, activeTools ? "warning" : "text"),
+            fitLine(theme.fg("text", toolText), width),
+            "",
+            rule,
+            fitLine(theme.fg("dim", `${keyText("app.clear")} stop  ${keyText("app.history.full")} full chat`), width),
+            fitLine(theme.fg("dim", `${keyText("app.thinking.cycle")} reason: `) + formatReasoningLegend(), width),
+            fitLine(theme.fg("dim", `${keyText("app.model.select")} model  ${keyText("app.editor.external")} editor`), width),
+        ];
+        const extensionStatuses = this.footerDataProvider.getExtensionStatuses();
+        if (extensionStatuses.size > 0) {
+            lines.splice(lines.length - 3, 0, "", fitLine(theme.fg("accent", "EXTENSIONS"), width), ...Array.from(extensionStatuses.values()).slice(0, 4).map((value) => fitLine(theme.fg("text", String(value).replace(/[\r\n\t]/g, " ")), width)));
+        }
+        if (this.customFooter) {
+            lines.splice(lines.length - 3, 0, "", ...this.customFooter.render(width).map((line) => fitLine(line, width)));
+        }
+        return lines;
+    }
     cycleThinkingLevel() {
         if (this.isBusyForModelOrThinkingChange()) {
             this.showBusyModelOrThinkingStatus();
@@ -2852,7 +3117,7 @@ export class InteractiveMode {
         else {
             this.footer.invalidate();
             this.updateEditorBorderColor();
-            this.showStatus(`Analysis depth: ${newLevel}`);
+            this.showStatus(`Analysis depth: ${displayThinkingLevel(newLevel)}`);
         }
     }
     async cycleModel(direction) {
@@ -2880,6 +3145,19 @@ export class InteractiveMode {
     toggleToolOutputExpansion() {
         this.setToolsExpanded(!this.toolOutputExpanded);
     }
+    toggleFullHistoryView() {
+        if (this.isInterruptibleWorkActive()) {
+            this.fullHistoryView = false;
+            this.showStatus("Full conversation view is available after the current run finishes");
+            this.ui.requestRender();
+            return;
+        }
+        this.fullHistoryView = !this.fullHistoryView;
+        this.showStatus(this.fullHistoryView
+            ? "Full conversation view enabled. Press Ctrl+R again to return to compact view."
+            : "Compact conversation view enabled.");
+        this.ui.requestRender();
+    }
     setToolsExpanded(expanded) {
         this.toolOutputExpanded = expanded;
         const activeHeader = this.customHeader ?? this.builtInHeader;
@@ -3044,8 +3322,8 @@ export class InteractiveMode {
         }
         return allQueued.length;
     }
-    queueCompactionMessage(text, mode) {
-        this.compactionQueuedMessages.push({ text, mode });
+    queueCompactionMessage(text, mode, images) {
+        this.compactionQueuedMessages.push({ text, mode, images });
         this.editor.addToHistory?.(text);
         this.editor.setText("");
         this.updatePendingMessagesDisplay();
@@ -3077,13 +3355,13 @@ export class InteractiveMode {
                 // When retry is pending, queue messages for the retry turn
                 for (const message of queuedMessages) {
                     if (this.isExtensionCommand(message.text)) {
-                        await this.session.prompt(message.text);
+                        await this.session.prompt(message.text, { images: message.images });
                     }
                     else if (message.mode === "followUp") {
-                        await this.session.followUp(message.text);
+                        await this.session.followUp(message.text, message.images);
                     }
                     else {
-                        await this.session.steer(message.text);
+                        await this.session.steer(message.text, message.images);
                     }
                 }
                 this.updatePendingMessagesDisplay();
@@ -3094,7 +3372,7 @@ export class InteractiveMode {
             if (firstPromptIndex === -1) {
                 // All extension commands - execute them all
                 for (const message of queuedMessages) {
-                    await this.session.prompt(message.text);
+                    await this.session.prompt(message.text, { images: message.images });
                 }
                 return;
             }
@@ -3103,22 +3381,22 @@ export class InteractiveMode {
             const firstPrompt = queuedMessages[firstPromptIndex];
             const rest = queuedMessages.slice(firstPromptIndex + 1);
             for (const message of preCommands) {
-                await this.session.prompt(message.text);
+                await this.session.prompt(message.text, { images: message.images });
             }
             // Send first prompt (starts streaming)
-            const promptPromise = this.session.prompt(firstPrompt.text).catch((error) => {
+            const promptPromise = this.session.prompt(firstPrompt.text, { images: firstPrompt.images }).catch((error) => {
                 restoreQueue(error);
             });
             // Queue remaining messages
             for (const message of rest) {
                 if (this.isExtensionCommand(message.text)) {
-                    await this.session.prompt(message.text);
+                    await this.session.prompt(message.text, { images: message.images });
                 }
                 else if (message.mode === "followUp") {
-                    await this.session.followUp(message.text);
+                    await this.session.followUp(message.text, message.images);
                 }
                 else {
-                    await this.session.steer(message.text);
+                    await this.session.steer(message.text, message.images);
                 }
             }
             this.updatePendingMessagesDisplay();
@@ -4320,7 +4598,7 @@ export class InteractiveMode {
             if (this.bashComponent) {
                 this.bashComponent.setComplete(undefined, false);
             }
-            this.showError(`Bash command failed: ${error instanceof Error ? error.message : "Unknown error"}`);
+            this.showError(`Shell command failed: ${error instanceof Error ? error.message : "Unknown error"}`);
         }
         this.bashComponent = undefined;
         this.ui.requestRender();
@@ -4351,6 +4629,7 @@ export class InteractiveMode {
             this.loadingAnimation.stop();
             this.loadingAnimation = undefined;
         }
+        this.workspaceLayout.dispose();
         this.clearExtensionTerminalInputListeners();
         this.footer.dispose();
         this.footerDataProvider.dispose();