deepclause-sdk 0.0.74 → 0.0.76

package/dist/cli/tui.js

@@ -7,10 +7,11 @@ import { listCommands } from './commands.js';
 import { getConfigPath, loadConfig, resolveModelSlot, setModel } from './config.js';
 import { run } from './run.js';
 import { formatToolArgs } from './tool-args.js';
-import { appendConductorSessionMessages, createSessionExecutionLogWriter, createLocalSkill, createConductorSession, getConductorSessionDetail, listConductorSessions, runConductorTurn, } from '../system/runtime/conductor.js';
+import { appendConductorSessionMessages, createSessionExecutionLogWriter, createLocalSkill, createConductorSession, getConductorSessionDetail, listConductorSessions, mergeSessionUsage, runConductorTurn, } from '../system/runtime/conductor.js';
 import { getSystemAssetSourcePaths } from '../system/assets/index.js';
 import { createShellManager, describeShellExecutionBackend, } from '../system/runtime/shell-manager.js';
 import { buildToolCompletionEvent, buildToolFailureEvent, buildToolStartEvent, createShellToolEventBridge, } from '../system/runtime/shell-tool-events.js';
+import { recordTokenUsage } from '../system/runtime/token-usage.js';
 const IGNORED_LIVE_LOG_TOOLS = new Set(['set_result', 'update_memory']);
 const BUILTIN_SLASH_COMMANDS = ['new', 'sessions', 'help', 'run', 'compile', 'skill-creator', 'set-model', 'cancel', 'exit', 'quit'];
 const MODEL_SLOTS = ['gateway', 'run', 'compile'];
@@ -63,7 +64,7 @@ export class LiveExecutionPrinter {
     }
     handle(logEvent) {
         const { event } = logEvent;
-        if (event.type === 'usage' || event.type === 'finished') {
+        if (event.type === 'usage' || event.type === 'finished' || event.type === 'task_activity') {
             return;
         }
         if (event.type === 'stream') {
@@ -147,7 +148,7 @@ export class ActivityBuffer {
     activeStreamLine = '';
     handle(logEvent) {
         const { event } = logEvent;
-        if (event.type === 'usage' || event.type === 'finished') {
+        if (event.type === 'usage' || event.type === 'finished' || event.type === 'task_activity') {
             return;
         }
         if (event.type === 'stream') {
@@ -299,12 +300,141 @@ export class ActivityBuffer {
         return lines;
     }
 }
+function summarizeStepDescription(raw) {
+    const firstLine = raw.split(/\r?\n/)[0] ?? '';
+    const trimmed = firstLine.replace(/\s+/g, ' ').trim();
+    return trimmed.length > 80 ? trimmed.slice(0, 77) + '\u2026' : trimmed;
+}
+export class TaskTracker {
+    entries = [];
+    activeStack = [];
+    maxEntries = 200;
+    handle(logEvent) {
+        const { event } = logEvent;
+        if (event.type !== 'task_activity')
+            return;
+        if (event.taskState === 'started' && event.taskId) {
+            const depth = this.activeStack.length;
+            this.activeStack.push(event.taskId);
+            this.entries.push({
+                id: event.taskId,
+                description: summarizeStepDescription(event.taskDescription ?? ''),
+                state: 'started',
+                depth,
+                startedAt: Date.now(),
+            });
+            this.trim();
+        }
+        else if ((event.taskState === 'completed' || event.taskState === 'failed') && event.taskId) {
+            const idx = this.entries.findIndex(e => e.id === event.taskId);
+            if (idx >= 0) {
+                this.entries[idx].state = event.taskState;
+                this.entries[idx].completedAt = Date.now();
+            }
+            const stackIdx = this.activeStack.lastIndexOf(event.taskId);
+            if (stackIdx >= 0) {
+                this.activeStack.splice(stackIdx, 1);
+            }
+        }
+    }
+    buildPaneBody(_width) {
+        if (this.entries.length === 0) {
+            return ['No steps yet.', 'Step activity renders here.'];
+        }
+        const lines = [];
+        for (const entry of this.entries) {
+            const indent = '  '.repeat(entry.depth);
+            let marker;
+            if (entry.state === 'started') {
+                marker = '>';
+            }
+            else if (entry.state === 'completed') {
+                marker = '\u2713';
+            }
+            else {
+                marker = '\u2717';
+            }
+            lines.push(`${indent}${marker} ${entry.description}`);
+        }
+        return lines;
+    }
+    clear() {
+        this.entries.length = 0;
+        this.activeStack.length = 0;
+    }
+    trim() {
+        if (this.entries.length > this.maxEntries) {
+            this.entries.splice(0, this.entries.length - this.maxEntries);
+        }
+    }
+}
 export function releaseTuiInputStream(stream) {
     if (stream.isTTY && typeof stream.setRawMode === 'function') {
         stream.setRawMode(false);
     }
     stream.pause();
 }
+class MouseParser {
+    buffer = '';
+    feed(data, onEvent) {
+        this.buffer += data.toString('utf8');
+        while (this.buffer.length > 0) {
+            const mouseStart = this.buffer.indexOf('\u001b[<');
+            if (mouseStart === -1) {
+                if (this.buffer.length > 0) {
+                    this.buffer = '';
+                }
+                break;
+            }
+            this.buffer = this.buffer.slice(mouseStart);
+            const parsed = this.tryParseMouse();
+            if (parsed === null) {
+                if (this.buffer.length > 256) {
+                    this.buffer = '';
+                }
+                break;
+            }
+            onEvent(parsed);
+        }
+    }
+    tryParseMouse() {
+        const mIdx = this.buffer.indexOf('M', 3);
+        const mIdxSgr = this.buffer.indexOf('m', 3);
+        const end = mIdx !== -1 && (mIdxSgr === -1 || mIdx < mIdxSgr) ? mIdx : mIdxSgr;
+        if (end === -1)
+            return null;
+        const payload = this.buffer.slice(3, end);
+        const isRelease = this.buffer[end] === 'm';
+        this.buffer = this.buffer.slice(end + 1);
+        const semicolon = payload.indexOf(';');
+        if (semicolon === -1)
+            return null;
+        const secondSemicolon = payload.indexOf(';', semicolon + 1);
+        if (secondSemicolon === -1)
+            return null;
+        const cb = Number.parseInt(payload.slice(0, semicolon), 10);
+        const col = Number.parseInt(payload.slice(semicolon + 1, secondSemicolon), 10);
+        const row = Number.parseInt(payload.slice(secondSemicolon + 1), 10);
+        if (Number.isNaN(cb) || Number.isNaN(col) || Number.isNaN(row))
+            return null;
+        const shift = (cb & 4) !== 0;
+        const meta = (cb & 8) !== 0;
+        const ctrl = (cb & 16) !== 0;
+        const buttonCode = cb & 3;
+        if (isRelease) {
+            return { button: 'release', row, column: col, shift, ctrl, meta };
+        }
+        if ((cb & 64) !== 0) {
+            return { button: buttonCode === 0 ? 'wheel-up' : 'wheel-down', row, column: col, shift, ctrl, meta };
+        }
+        const isMotion = (cb & 32) !== 0;
+        if (isMotion) {
+            return { button: 'motion', row, column: col, shift, ctrl, meta };
+        }
+        const buttonMap = { 0: 'left', 1: 'middle', 2: 'right' };
+        return { button: buttonMap[buttonCode] ?? 'left', row, column: col, shift, ctrl, meta };
+    }
+}
 class FullscreenTui {
     workspaceRoot;
     options;
@@ -314,6 +444,7 @@ class FullscreenTui {
     commands = [];
     activityBySessionId = new Map();
     ephemeralMessagesBySessionId = new Map();
+    taskTrackerBySessionId = new Map();
     focusedPane = 'messages';
     uiMode = 'command';
     menuReturnMode = 'command';
@@ -327,16 +458,25 @@ class FullscreenTui {
         sessions: 0,
         messages: 0,
         process: 0,
+        tasks: 0,
         context: 0,
     };
     lastPaneMetrics = {
         sessions: { maxStart: 0, viewportLines: 0, maxStartIsExact: true },
         messages: { maxStart: 0, viewportLines: 0, maxStartIsExact: true },
         process: { maxStart: 0, viewportLines: 0, maxStartIsExact: true },
+        tasks: { maxStart: 0, viewportLines: 0, maxStartIsExact: true },
         context: { maxStart: 0, viewportLines: 0, maxStartIsExact: true },
     };
     currentPreview = null;
     currentAbortController = null;
+    toolAbortController = null;
+    toolAbortSignalRef = {};
+    mouseParser = null;
+    mouseDataHandler = null;
+    mouseEscapeState = 'idle';
+    selection = null;
+    isDraggingSelection = false;
     inputValue = '';
     cursor = 0;
     busy = false;
@@ -356,6 +496,8 @@ class FullscreenTui {
     lastRenderAt = 0;
     previousFrameLines = null;
     previousFrameSize = null;
+    resizeHandler = null;
+    wrapCache = new Map();
     constructor(workspaceRoot, options = {}) {
         this.workspaceRoot = workspaceRoot;
         this.options = options;
@@ -366,12 +508,22 @@ class FullscreenTui {
             await this.refreshCommands();
             await this.refreshSessions({ createIfMissing: true });
             this.statusLine = `Ready. Shell ${this.getShellBackend().backendLabel} in ${path.relative(this.workspaceRoot, this.shellWorkspacePath) || '.'}. F10 or Ctrl+G opens menus. Left/right changes pane when the menu is closed.`;
-            emitKeypressEvents(input);
             if (input.isTTY) {
                 input.setRawMode(true);
             }
+            emitKeypressEvents(input);
             input.on('keypress', this.onKeypress);
-            output.write('\u001b[?1049h\u001b[2J\u001b[H');
+            this.mouseParser = new MouseParser();
+            this.mouseDataHandler = (chunk) => {
+                this.mouseParser.feed(chunk, (event) => this.handleMouseEvent(event));
+            };
+            input.prependListener('data', this.mouseDataHandler);
+            this.resizeHandler = () => {
+                this.wrapCache.clear();
+                this.requestRender();
+            };
+            output.on('resize', this.resizeHandler);
+            output.write('\u001b[?1049h\u001b[?1002h\u001b[?1006h\u001b[2J\u001b[H');
             this.requestRender();
             await new Promise((resolve) => {
                 this.closeResolver = resolve;
@@ -386,16 +538,327 @@ class FullscreenTui {
                 clearInterval(this.animationTimer);
                 this.animationTimer = null;
             }
-            input.off('keypress', this.onKeypress);
+            if (this.mouseDataHandler) {
+                input.removeListener('data', this.mouseDataHandler);
+                this.mouseDataHandler = null;
+            }
+            this.mouseParser = null;
+            input.removeListener('keypress', this.onKeypress);
+            if (this.resizeHandler) {
+                output.off('resize', this.resizeHandler);
+                this.resizeHandler = null;
+            }
             releaseTuiInputStream(input);
             this.previousFrameLines = null;
             this.previousFrameSize = null;
-            output.write('\u001b[?25h\u001b[?1049l');
+            output.write('\u001b[?25h\u001b[?1006l\u001b[?1002l\u001b[?1049l');
         }
     }
     onKeypress = (text, key) => {
+        if (key.sequence === '\x1b[<') {
+            this.mouseEscapeState = 'consuming';
+            return;
+        }
+        if (this.mouseEscapeState === 'consuming') {
+            if (text === 'M' || text === 'm') {
+                this.mouseEscapeState = 'idle';
+            }
+            return;
+        }
         void this.handleKeypress(text, key);
     };
+    handleMouseEvent(event) {
+        if (event.button === 'wheel-up' || event.button === 'wheel-down') {
+            if (event.shift)
+                return;
+            const direction = event.button === 'wheel-up' ? 'up' : 'down';
+            const paneKind = this.paneKindAtPosition(event.row, event.column);
+            if (paneKind) {
+                this.focusedPane = paneKind;
+            }
+            this.scrollFocusedPane(direction, 3);
+            return;
+        }
+        if (event.button === 'left' && !event.shift && !event.ctrl && !event.meta) {
+            const menuIndex = this.menuIndexAtColumn(event.column);
+            if (menuIndex !== null && event.row === 1) {
+                this.clearSelection();
+                if (this.uiMode !== 'menu') {
+                    this.uiMode = 'menu';
+                }
+                this.menuState.activeIndex = menuIndex;
+                this.menuState.selectedIndex = 0;
+                this.menuState.typeahead = '';
+                this.requestRender();
+                return;
+            }
+            if (this.uiMode === 'menu' && event.row >= 2) {
+                const menuItemIndex = this.menuItemAtRow(event.row);
+                if (menuItemIndex !== null) {
+                    this.menuState.selectedIndex = menuItemIndex;
+                    this.requestRender();
+                    void this.activateCurrentMenuItem();
+                    return;
+                }
+            }
+            const paneKind = this.paneKindAtPosition(event.row, event.column);
+            if (!paneKind) {
+                this.clearSelection();
+                this.requestRender();
+                return;
+            }
+            const panePos = this.paneContentPosition(paneKind, event.row, event.column);
+            if (!panePos) {
+                this.clearSelection();
+                this.focusedPane = paneKind;
+                this.requestRender();
+                return;
+            }
+            this.selection = { pane: paneKind, startRow: panePos.bodyRow, startCol: panePos.innerCol, endRow: panePos.bodyRow, endCol: panePos.innerCol };
+            this.isDraggingSelection = true;
+            this.focusedPane = paneKind;
+            this.requestRender();
+            return;
+        }
+        if (event.button === 'motion' && !event.shift && this.isDraggingSelection && this.selection) {
+            const paneKind = this.paneKindAtPosition(event.row, event.column);
+            if (paneKind && paneKind === this.selection.pane) {
+                const panePos = this.paneContentPosition(paneKind, event.row, event.column);
+                if (panePos) {
+                    this.selection.endRow = panePos.bodyRow;
+                    this.selection.endCol = panePos.innerCol;
+                    this.requestRender();
+                }
+            }
+            return;
+        }
+        if (event.button === 'release' && !event.shift && this.isDraggingSelection) {
+            this.isDraggingSelection = false;
+            if (this.selection) {
+                const text = this.extractSelectionText();
+                if (text) {
+                    this.copyToClipboard(text);
+                    this.statusLine = 'Copied selection to clipboard.';
+                }
+            }
+            this.clearSelection();
+            this.requestRender();
+            return;
+        }
+        if (event.button === 'release') {
+            this.isDraggingSelection = false;
+            return;
+        }
+    }
+    clearSelection() {
+        if (this.selection) {
+            this.selection = null;
+        }
+        this.isDraggingSelection = false;
+    }
+    paneContentPosition(paneKind, screenRow, screenCol) {
+        const columns = output.columns ?? 120;
+        const rows = output.rows ?? 40;
+        if (screenRow < 2 || screenRow >= rows - 1)
+            return null;
+        if (this.uiMode !== 'command')
+            return null;
+        const contentHeight = rows - 3;
+        const widths = computePaneWidths(columns);
+        const rightHeights = computeRightPaneHeights(contentHeight);
+        const contentRow = screenRow - 2;
+        let paneLeft;
+        let paneWidth;
+        let paneTop;
+        switch (paneKind) {
+            case 'sessions':
+                paneLeft = 0;
+                paneWidth = widths.left;
+                paneTop = 0;
+                break;
+            case 'messages':
+                paneLeft = widths.left + 1;
+                paneWidth = widths.center;
+                paneTop = 0;
+                break;
+            case 'process':
+                paneLeft = widths.left + 1 + widths.center + 1;
+                paneWidth = widths.right;
+                paneTop = 0;
+                break;
+            case 'tasks':
+                paneLeft = widths.left + 1 + widths.center + 1;
+                paneWidth = widths.right;
+                paneTop = rightHeights.process;
+                break;
+            case 'context':
+                paneLeft = widths.left + 1 + widths.center + 1;
+                paneWidth = widths.right;
+                paneTop = rightHeights.process + rightHeights.tasks;
+                break;
+        }
+        if (screenCol < paneLeft + 2 || screenCol > paneLeft + paneWidth - 1)
+            return null;
+        const bodyRow = contentRow - paneTop - 1;
+        if (bodyRow < 0)
+            return null;
+        const innerCol = screenCol - paneLeft - 2;
+        return { bodyRow, innerCol };
+    }
+    extractSelectionText() {
+        if (!this.selection)
+            return '';
+        const sel = this.selection;
+        const paneBody = this.getPaneBody(sel.pane);
+        const columns = output.columns ?? 120;
+        const widths = computePaneWidths(columns);
+        const width = sel.pane === 'sessions' ? widths.left : sel.pane === 'messages' ? widths.center : widths.right;
+        const innerWidth = Math.max(1, width - 2);
+        const wrappedLines = wrapBodyLines(paneBody, innerWidth);
+        const startRow = Math.min(sel.startRow, sel.endRow);
+        const endRow = Math.max(sel.startRow, sel.endRow);
+        const startCol = sel.startRow <= sel.endRow ? sel.startCol : sel.endCol;
+        const endCol = sel.startRow <= sel.endRow ? sel.endCol : sel.startCol;
+        if (startRow === endRow) {
+            const line = wrappedLines[startRow] ?? '';
+            return this.stripAnsi(line.slice(startCol, endCol + 1));
+        }
+        const parts = [];
+        const firstLine = wrappedLines[startRow] ?? '';
+        parts.push(this.stripAnsi(firstLine.slice(startCol)));
+        for (let row = startRow + 1; row < endRow; row++) {
+            parts.push(this.stripAnsi(wrappedLines[row] ?? ''));
+        }
+        const lastLine = wrappedLines[endRow] ?? '';
+        parts.push(this.stripAnsi(lastLine.slice(0, endCol + 1)));
+        return parts.join('\n');
+    }
+    stripAnsi(text) {
+        return text.replace(/\u001b\[[0-9;]*m/g, '');
+    }
+    copyToClipboard(text) {
+        const osc52 = `\u001b]52;c;${Buffer.from(text).toString('base64')}\u0007`;
+        output.write(osc52);
+    }
+    applySelectionHighlight(lines, widths, rightHeights, _contentHeight) {
+        const sel = this.selection;
+        if (!sel)
+            return;
+        const startRow = Math.min(sel.startRow, sel.endRow);
+        const endRow = Math.max(sel.startRow, sel.endRow);
+        const startCol = sel.startRow <= sel.endRow ? sel.startCol : sel.endCol;
+        const endCol = sel.startRow <= sel.endRow ? sel.endCol : sel.startCol;
+        let paneLeft;
+        let paneWidth;
+        let paneTop;
+        switch (sel.pane) {
+            case 'sessions':
+                paneLeft = 0;
+                paneWidth = widths.left;
+                paneTop = 0;
+                break;
+            case 'messages':
+                paneLeft = widths.left + 1;
+                paneWidth = widths.center;
+                paneTop = 0;
+                break;
+            case 'process':
+                paneLeft = widths.left + 1 + widths.center + 1;
+                paneWidth = widths.right;
+                paneTop = 0;
+                break;
+            case 'tasks':
+                paneLeft = widths.left + 1 + widths.center + 1;
+                paneWidth = widths.right;
+                paneTop = rightHeights.process;
+                break;
+            case 'context':
+                paneLeft = widths.left + 1 + widths.center + 1;
+                paneWidth = widths.right;
+                paneTop = rightHeights.process + rightHeights.tasks;
+                break;
+        }
+        const innerDisplayStart = paneLeft + 1;
+        const innerDisplayEnd = paneLeft + paneWidth - 2;
+        for (let bodyRow = startRow; bodyRow <= endRow; bodyRow++) {
+            const screenLineIdx = 1 + paneTop + 1 + bodyRow;
+            if (screenLineIdx >= lines.length)
+                break;
+            const line = lines[screenLineIdx];
+            const rowStartCol = bodyRow === startRow ? innerDisplayStart + startCol : innerDisplayStart;
+            const rowEndCol = bodyRow === endRow ? innerDisplayStart + endCol + 1 : innerDisplayEnd + 1;
+            const clampedStartCol = Math.max(innerDisplayStart, rowStartCol);
+            const clampedEndCol = Math.min(innerDisplayEnd + 1, rowEndCol);
+            if (clampedStartCol >= clampedEndCol)
+                continue;
+            const strStart = displayColumnToStringIndex(line, clampedStartCol);
+            const strEnd = displayColumnToStringIndex(line, clampedEndCol);
+            const before = line.slice(0, strStart);
+            const segment = line.slice(strStart, strEnd);
+            const after = line.slice(strEnd);
+            const highlighted = this.invertAnsiColors(segment);
+            lines[screenLineIdx] = `${before}${highlighted}${after}`;
+        }
+    }
+    invertAnsiColors(text) {
+        return `\u001b[7m${text}\u001b[27m`;
+    }
+    paneKindAtPosition(row, column) {
+        const columns = output.columns ?? 120;
+        const rows = output.rows ?? 40;
+        if (row < 2 || row >= rows - 1)
+            return null;
+        if (this.uiMode !== 'command')
+            return null;
+        const widths = computePaneWidths(columns);
+        const rightHeights = computeRightPaneHeights(rows - 3);
+        const contentRow = row - 1;
+        if (column <= widths.left)
+            return 'sessions';
+        if (column <= widths.left + 1 + widths.center)
+            return 'messages';
+        if (contentRow <= rightHeights.process)
+            return 'process';
+        if (contentRow <= rightHeights.process + rightHeights.tasks)
+            return 'tasks';
+        return 'context';
+    }
+    menuIndexAtColumn(column) {
+        const menuLabels = ['Session', 'Skills', 'Files', 'Run', 'View', 'Help'];
+        let pos = 1 + measureDisplayWidth(' DeepClause ');
+        for (let i = 0; i < menuLabels.length; i++) {
+            const labelWidth = measureDisplayWidth(` [${i + 1}] ${menuLabels[i]} `);
+            if (column >= pos && column < pos + labelWidth)
+                return i;
+            pos += labelWidth;
+        }
+        return null;
+    }
+    menuItemAtRow(row) {
+        if (this.uiMode !== 'menu')
+            return null;
+        const contentRow = row - 2;
+        if (contentRow < 2)
+            return null;
+        const itemRow = contentRow - 2;
+        if (itemRow < 0)
+            return null;
+        const linesPerItem = 3;
+        const itemIndex = Math.floor(itemRow / linesPerItem);
+        const menu = this.getMenuDefinitions()[this.menuState.activeIndex];
+        if (!menu || itemIndex >= menu.items.length || itemIndex < 0)
+            return null;
+        return itemIndex;
+    }
+    async activateCurrentMenuItem() {
+        const menu = this.getMenuDefinitions()[this.menuState.activeIndex];
+        if (!menu)
+            return;
+        const item = menu.items[this.menuState.selectedIndex];
+        if (!item || item.enabled === false)
+            return;
+        await this.runMenuAction(item.id);
+    }
     async handleKeypress(text, key) {
         if ((key.ctrl && key.name === 'g') || key.name === 'f10') {
             this.toggleMenuMode();
@@ -428,6 +891,19 @@ class FullscreenTui {
             this.close();
             return;
         }
+        if (key.ctrl && key.name === 't' && this.busy) {
+            if (this.toolAbortController && !this.toolAbortController.signal.aborted) {
+                this.toolAbortController.abort('Aborted by user');
+                this.toolAbortController = null;
+                this.toolAbortSignalRef.signal = undefined;
+                this.statusLine = 'Tool execution cancelled.';
+            }
+            else {
+                this.statusLine = 'No active tool to cancel.';
+            }
+            this.requestRender();
+            return;
+        }
         if (this.uiMode === 'menu') {
             await this.handleMenuKeypress(text, key);
             return;
@@ -460,7 +936,7 @@ class FullscreenTui {
                     return;
                 }
                 if (this.cursor > 0) {
-                    this.cursor -= 1;
+                    this.cursor = this.graphemeLeftIndex(this.inputValue, this.cursor);
                 }
                 break;
             case 'right':
@@ -469,7 +945,7 @@ class FullscreenTui {
                     return;
                 }
                 if (this.cursor < this.inputValue.length) {
-                    this.cursor += 1;
+                    this.cursor = this.graphemeRightIndex(this.inputValue, this.cursor);
                 }
                 break;
             case 'home':
@@ -642,13 +1118,13 @@ class FullscreenTui {
                 return;
             case 'left':
                 if (this.cursor > 0) {
-                    this.cursor -= 1;
+                    this.cursor = this.graphemeLeftIndex(this.inputValue, this.cursor);
                     this.requestRender();
                 }
                 return;
             case 'right':
                 if (this.cursor < this.inputValue.length) {
-                    this.cursor += 1;
+                    this.cursor = this.graphemeRightIndex(this.inputValue, this.cursor);
                     this.requestRender();
                 }
                 return;
@@ -875,6 +1351,8 @@ class FullscreenTui {
         activity.pushLine(`task ${promptText}`);
         this.busy = true;
         this.currentAbortController = new AbortController();
+        this.toolAbortController = new AbortController();
+        this.toolAbortSignalRef.signal = this.toolAbortController.signal;
         this.startAnimation();
         this.statusLine = 'Running conductor...';
         this.requestRender();
@@ -886,9 +1364,12 @@ class FullscreenTui {
                 headless: true,
                 sandbox: this.options.sandbox,
                 signal: this.currentAbortController.signal,
+                toolAbortSignalRef: this.toolAbortSignalRef,
                 onUserInput: (question) => this.requestClarification(question),
                 onEvent: (event) => {
+                    this.manageToolAbortSignal(event.event);
                     activity.handle(event);
+                    this.taskTrackerFor(sessionId).handle(event);
                     this.updatePreviewFromEvent(event);
                     this.requestRender();
                 },
@@ -912,6 +1393,8 @@ class FullscreenTui {
         finally {
             this.busy = false;
             this.currentAbortController = null;
+            this.toolAbortController = null;
+            this.toolAbortSignalRef.signal = undefined;
             this.stopAnimation();
             if (this.exitRequested) {
                 this.close();
@@ -933,6 +1416,8 @@ class FullscreenTui {
         activity.pushLine(`skill /${skillName}${args.length > 0 ? ` ${args.join(' ')}` : ''}`);
         this.busy = true;
         this.currentAbortController = new AbortController();
+        this.toolAbortController = new AbortController();
+        this.toolAbortSignalRef.signal = this.toolAbortController.signal;
         this.startAnimation();
         this.statusLine = `Running /${skillName}...`;
         this.requestRender();
@@ -941,14 +1426,18 @@ class FullscreenTui {
                 sessionId: this.selectedSessionId || undefined,
                 sandbox: this.options.sandbox,
                 signal: this.currentAbortController.signal,
+                toolAbortSignalRef: this.toolAbortSignalRef,
                 onUserInput: (question) => this.requestClarification(question),
                 onEvent: (event) => {
+                    this.manageToolAbortSignal(event.event);
                     activity.handle(event);
+                    this.taskTrackerFor(sessionId).handle(event);
                     this.updatePreviewFromEvent(event);
                     this.requestRender();
                 },
             });
             activity.finish();
+            await this.refreshSessions({ selectedSessionId: this.selectedSessionId });
             await this.refreshCommands();
             this.finishExecutionPreview({
                 persist: true,
@@ -967,6 +1456,8 @@ class FullscreenTui {
         finally {
             this.busy = false;
             this.currentAbortController = null;
+            this.toolAbortController = null;
+            this.toolAbortSignalRef.signal = undefined;
             this.stopAnimation();
             if (this.exitRequested) {
                 this.close();
@@ -995,6 +1486,8 @@ class FullscreenTui {
         activity.pushLine(`run ${commandText}`);
         this.busy = true;
         this.currentAbortController = new AbortController();
+        this.toolAbortController = new AbortController();
+        this.toolAbortSignalRef.signal = this.toolAbortController.signal;
         this.startAnimation();
         this.statusLine = `Running ${commandText}...`;
         this.requestRender();
@@ -1003,14 +1496,18 @@ class FullscreenTui {
                 sessionId: this.selectedSessionId || undefined,
                 sandbox: this.options.sandbox,
                 signal: this.currentAbortController.signal,
+                toolAbortSignalRef: this.toolAbortSignalRef,
                 onUserInput: (question) => this.requestClarification(question),
                 onEvent: (event) => {
+                    this.manageToolAbortSignal(event.event);
                     activity.handle(event);
+                    this.taskTrackerFor(sessionId).handle(event);
                     this.updatePreviewFromEvent(event);
                     this.requestRender();
                 },
             });
             activity.finish();
+            await this.refreshSessions({ selectedSessionId: this.selectedSessionId });
             await this.refreshCommands();
             this.finishExecutionPreview({
                 persist: true,
@@ -1029,6 +1526,8 @@ class FullscreenTui {
         finally {
             this.busy = false;
             this.currentAbortController = null;
+            this.toolAbortController = null;
+            this.toolAbortSignalRef.signal = undefined;
             this.stopAnimation();
             if (this.exitRequested) {
                 this.close();
@@ -1056,6 +1555,8 @@ class FullscreenTui {
         activity.pushLine(`skill ${commandText}`);
         this.busy = true;
         this.currentAbortController = new AbortController();
+        this.toolAbortController = new AbortController();
+        this.toolAbortSignalRef.signal = this.toolAbortController.signal;
         this.startAnimation();
         this.statusLine = `Running /${commandName}...`;
         this.requestRender();
@@ -1065,12 +1566,15 @@ class FullscreenTui {
                 signal: this.currentAbortController.signal,
                 onUserInput: (question) => this.requestClarification(question),
                 onEvent: (event) => {
+                    this.manageToolAbortSignal(event.event);
                     activity.handle(event);
+                    this.taskTrackerFor(sessionId).handle(event);
                     this.updatePreviewFromEvent(event);
                     this.requestRender();
                 },
             });
             activity.finish();
+            await this.refreshSessions({ selectedSessionId: this.selectedSessionId });
             await this.refreshCommands();
             this.finishExecutionPreview({
                 persist: true,
@@ -1088,6 +1592,8 @@ class FullscreenTui {
         finally {
             this.busy = false;
             this.currentAbortController = null;
+            this.toolAbortController = null;
+            this.toolAbortSignalRef.signal = undefined;
             this.stopAnimation();
             if (this.exitRequested) {
                 this.close();
@@ -1119,6 +1625,8 @@ class FullscreenTui {
         activity.pushLine(`shell ${persistOutput ? '!!' : '!'}${trimmedCommand}`);
         this.busy = true;
         this.currentAbortController = new AbortController();
+        this.toolAbortController = this.currentAbortController;
+        this.toolAbortSignalRef.signal = this.toolAbortController.signal;
         this.startAnimation();
         this.statusLine = `Running ${persistOutput ? '!!' : '!'}${trimmedCommand}...`;
         this.requestRender();
@@ -1129,6 +1637,7 @@ class FullscreenTui {
                 signal: this.currentAbortController.signal,
                 onEvent: (event) => {
                     activity.handle(event);
+                    this.taskTrackerFor(sessionId).handle(event);
                     this.requestRender();
                 },
             });
@@ -1163,6 +1672,8 @@ class FullscreenTui {
         finally {
             this.busy = false;
             this.currentAbortController = null;
+            this.toolAbortController = null;
+            this.toolAbortSignalRef.signal = undefined;
             this.stopAnimation();
             if (this.exitRequested) {
                 this.close();
@@ -1247,7 +1758,7 @@ class FullscreenTui {
         this.scrollFocusedPane(offset < 0 ? 'up' : 'down', 1);
     }
     cyclePaneFocus(direction) {
-        const order = ['sessions', 'messages', 'process', 'context'];
+        const order = ['sessions', 'messages', 'process', 'tasks', 'context'];
         const currentIndex = order.indexOf(this.focusedPane);
         const nextIndex = (currentIndex + direction + order.length) % order.length;
         this.focusedPane = order[nextIndex];
@@ -1369,6 +1880,7 @@ class FullscreenTui {
                     { id: 'view.focus.sessions', label: 'Focus Sessions Pane', description: 'Focus the session list pane.' },
                     { id: 'view.focus.messages', label: 'Focus Messages Pane', description: 'Focus the conversation history pane.' },
                     { id: 'view.focus.process', label: 'Focus Execution Pane', description: 'Focus the live execution log pane.' },
+                    { id: 'view.focus.tasks', label: 'Focus Tasks Pane', description: 'Focus the step tracker pane.' },
                     { id: 'view.focus.context', label: 'Focus Context Pane', description: 'Focus the session context and token usage pane.' },
                     { id: 'view.follow', label: 'Follow Focused Pane', description: 'Jump back to the newest visible content in the active pane.' },
                     { id: 'view.palette', label: 'Open Action Palette', description: 'Search all menu actions from one picker.', shortcut: 'Ctrl+P' },
@@ -1486,6 +1998,7 @@ class FullscreenTui {
             case 'view.focus.sessions':
             case 'view.focus.messages':
             case 'view.focus.process':
+            case 'view.focus.tasks':
             case 'view.focus.context': {
                 const pane = actionId.slice('view.focus.'.length);
                 this.focusedPane = pane;
@@ -2355,6 +2868,36 @@ class FullscreenTui {
     currentProcessActivity() {
         return this.activityFor(this.selectedSessionId || 'global');
     }
+    graphemeLeftIndex(text, index) {
+        if (index <= 0)
+            return 0;
+        if (!graphemeSegmenter)
+            return index - 1;
+        const graphemes = Array.from(graphemeSegmenter.segment(text), (g) => g.segment);
+        let pos = 0;
+        for (const g of graphemes) {
+            if (pos + g.length >= index)
+                break;
+            pos += g.length;
+        }
+        return pos;
+    }
+    graphemeRightIndex(text, index) {
+        if (index >= text.length)
+            return text.length;
+        if (!graphemeSegmenter)
+            return index + 1;
+        const graphemes = Array.from(graphemeSegmenter.segment(text), (g) => g.segment);
+        let pos = 0;
+        for (const g of graphemes) {
+            if (pos >= index) {
+                pos += g.length;
+                break;
+            }
+            pos += g.length;
+        }
+        return Math.min(pos, text.length);
+    }
     insertText(text) {
         const previousInput = this.inputValue;
         this.inputValue = `${this.inputValue.slice(0, this.cursor)}${text}${this.inputValue.slice(this.cursor)}`;
@@ -2366,8 +2909,9 @@ class FullscreenTui {
             return;
         }
         const previousInput = this.inputValue;
-        this.inputValue = `${this.inputValue.slice(0, this.cursor - 1)}${this.inputValue.slice(this.cursor)}`;
-        this.cursor -= 1;
+        const deleteFrom = this.graphemeLeftIndex(this.inputValue, this.cursor);
+        this.inputValue = `${this.inputValue.slice(0, deleteFrom)}${this.inputValue.slice(this.cursor)}`;
+        this.cursor = deleteFrom;
         this.refreshCommandBarStatus(previousInput);
     }
     deleteForward() {
@@ -2448,6 +2992,14 @@ class FullscreenTui {
         this.activityBySessionId.set(key, created);
         return created;
     }
+    taskTrackerFor(sessionId) {
+        let tracker = this.taskTrackerBySessionId.get(sessionId);
+        if (!tracker) {
+            tracker = new TaskTracker();
+            this.taskTrackerBySessionId.set(sessionId, tracker);
+        }
+        return tracker;
+    }
     async persistShellCommandResult(command, result) {
         let sessionId = this.selectedSessionId;
         if (!sessionId) {
@@ -2485,6 +3037,7 @@ class FullscreenTui {
         const sessionsPane = this.buildPaneView('sessions', 'Sessions', widths.left, contentHeight);
         const messagesPane = this.buildPaneView('messages', 'Messages', widths.center, contentHeight);
         const processPane = this.buildPaneView('process', 'Execution', widths.right, rightHeights.process);
+        const tasksPane = this.buildPaneView('tasks', 'Tasks', widths.right, rightHeights.tasks);
         const contextPane = this.buildPaneView('context', 'Context', widths.right, rightHeights.context);
         const workspaceView = this.uiMode === 'command'
             ? null
@@ -2501,31 +3054,43 @@ class FullscreenTui {
         }
         else {
             for (let index = 0; index < contentHeight; index += 1) {
-                const rightLine = index < rightHeights.process
-                    ? processPane[index]
-                    : contextPane[index - rightHeights.process];
+                let rightLine;
+                if (index < rightHeights.process) {
+                    rightLine = processPane[index];
+                }
+                else if (index < rightHeights.process + rightHeights.tasks) {
+                    rightLine = tasksPane[index - rightHeights.process];
+                }
+                else {
+                    rightLine = contextPane[index - rightHeights.process - rightHeights.tasks];
+                }
                 lines.push(`${sessionsPane[index]}${gap}${messagesPane[index]}${gap}${rightLine}`);
             }
         }
         lines.push(status);
         lines.push(inputLine);
+        if (this.selection) {
+            this.applySelectionHighlight(lines, widths, rightHeights, contentHeight);
+        }
         this.paintFrame(lines, { columns, rows });
         if (workspaceView?.cursor && !this.pendingPrompt) {
             output.write(`\u001b[${workspaceView.cursor.row};${workspaceView.cursor.column}H`);
             return;
         }
-        const cursorColumn = Math.min(columns, inputPrefix.length + this.cursor + 1);
+        const textBeforeCursor = this.inputValue.slice(0, this.cursor);
+        const cursorColumn = Math.min(columns, inputPrefix.length + measureDisplayWidth(textBeforeCursor) + 1);
         output.write(`\u001b[${rows};${cursorColumn}H`);
     }
     paintFrame(lines, size) {
-        const patch = computeFramePatch(this.previousFrameLines, lines, this.previousFrameSize, size);
+        const paddedLines = lines.map((line) => padRight(line, size.columns));
+        const patch = computeFramePatch(this.previousFrameLines, paddedLines, this.previousFrameSize, size);
         let buffer = '\u001b[0m';
         if (patch.fullRender) {
-            buffer += `\u001b[H\u001b[2J${lines.join('\n')}\u001b[?25h`;
+            buffer += `\u001b[H${paddedLines.join('\n')}\u001b[?25h`;
         }
         else if (patch.changedRows.length > 0) {
             for (const change of patch.changedRows) {
-                buffer += `\u001b[${change.row};1H\u001b[2K${change.line}`;
+                buffer += `\u001b[${change.row};1H${change.line}`;
             }
             buffer += '\u001b[?25h';
         }
@@ -2533,7 +3098,7 @@ class FullscreenTui {
             buffer += '\u001b[?25h';
         }
         output.write(buffer);
-        this.previousFrameLines = [...lines];
+        this.previousFrameLines = [...paddedLines];
         this.previousFrameSize = size;
     }
     buildHeaderLine() {
@@ -2547,32 +3112,35 @@ class FullscreenTui {
         return `${sessionLabel}   ${mode}   ${skillLabel}`;
     }
     buildStatusLine() {
+        const spinner = this.busy || this.currentPreview?.entries.some((entry) => entry.pending)
+            ? ` ${currentSpinnerFrame()}`
+            : '';
         if (this.uiMode === 'menu') {
             const menu = this.getMenuDefinitions()[this.menuState.activeIndex];
-            return `Menu ${menu?.label ?? ''} | ${menu?.items[this.menuState.selectedIndex]?.description ?? 'Choose an action.'}`;
+            return `${spinner} Menu ${menu?.label ?? ''} | ${menu?.items[this.menuState.selectedIndex]?.description ?? 'Choose an action.'}`;
         }
         if ((this.uiMode === 'picker' || this.uiMode === 'palette') && this.pickerState) {
             const selected = this.pickerState.filteredItems[this.pickerState.selectedIndex];
-            return `${this.pickerState.title} | ${selected?.description ?? this.pickerState.emptyText}`;
+            return `${spinner} ${this.pickerState.title} | ${selected?.description ?? this.pickerState.emptyText}`;
         }
         if (this.uiMode === 'viewer' && this.viewerState) {
-            return `${this.viewerState.title} | ${this.viewerState.path ? path.relative(this.workspaceRoot, this.viewerState.path) : 'read-only view'}`;
+            return `${spinner} ${this.viewerState.title} | ${this.viewerState.path ? path.relative(this.workspaceRoot, this.viewerState.path) : 'read-only view'}`;
         }
         if (this.uiMode === 'editor' && this.editorState) {
             const dirty = this.editorState.dirty ? 'modified' : 'saved';
-            return `${this.editorState.title} | ${dirty} | Ln ${this.editorState.cursorLine + 1}, Col ${this.editorState.cursorColumn + 1}`;
+            return `${spinner} ${this.editorState.title} | ${dirty} | Ln ${this.editorState.cursorLine + 1}, Col ${this.editorState.cursorColumn + 1}`;
         }
         const focus = paneDisplayName(this.focusedPane);
         if (!this.pendingPrompt && this.focusedPane !== 'sessions') {
             const follow = this.paneScroll[this.focusedPane] === 0 ? 'follow' : `scroll ${this.paneScroll[this.focusedPane]}`;
-            return `${this.statusLine} | Focus ${focus} | ${follow}`;
+            return `${spinner} ${this.statusLine} | Focus ${focus} | ${follow}`;
         }
         if (this.pendingPrompt) {
             return this.pendingPrompt.kind === 'clarify'
-                ? `Clarify: ${condenseWhitespace(this.pendingPrompt.prompt)} | Focus ${focus}`
-                : `Input: ${condenseWhitespace(this.pendingPrompt.prompt)} | Focus ${focus}`;
+                ? `${spinner} Clarify: ${condenseWhitespace(this.pendingPrompt.prompt)} | Focus ${focus}`
+                : `${spinner} Input: ${condenseWhitespace(this.pendingPrompt.prompt)} | Focus ${focus}`;
         }
-        return `${this.statusLine} | Focus ${focus}`;
+        return `${spinner} ${this.statusLine} | Focus ${focus}`;
     }
     buildInputPrefix() {
         if (this.uiMode === 'menu') {
@@ -2667,6 +3235,12 @@ class FullscreenTui {
             'Use /cancel to abort the current execution.',
         ];
     }
+    buildTasksPaneBody() {
+        const tracker = this.taskTrackerFor(this.selectedSessionId);
+        const columns = output.columns ?? 120;
+        const widths = computePaneWidths(columns);
+        return tracker.buildPaneBody(widths.right);
+    }
     buildContextPaneBody() {
         if (!this.sessionDetail) {
             return ['No session selected.'];
@@ -2865,6 +3439,8 @@ class FullscreenTui {
             ['<- ->', 'Pane'],
             [this.focusedPane === 'sessions' ? 'Up/Down' : 'PgUp/PgDn', this.focusedPane === 'sessions' ? 'Select' : 'Scroll'],
             ['End', this.focusedPane === 'sessions' ? 'Bottom' : 'Follow'],
+            ['Drag', 'Select'],
+            ...(this.busy ? [['Ctrl+T', 'Cancel']] : []),
             ['/cancel', 'Stop'],
         ];
     }
@@ -2879,6 +3455,16 @@ class FullscreenTui {
             ? `${title}${this.focusedPane === kind ? ' [focus]' : ''} [follow]`
             : `${title}${this.focusedPane === kind ? ' [focus]' : ''} [-${this.paneScroll[kind]}]`;
     }
+    cachedCollectTailWrappedLines(cacheKey, body, innerWidth, limit) {
+        const cached = this.wrapCache.get(cacheKey);
+        const bodyKey = `${body.length}:${body.length > 0 ? body[body.length - 1] : ''}:${limit}`;
+        if (cached && cached.bodyRef === body && cached.bodyKey === bodyKey && cached.innerWidth === innerWidth) {
+            return { lines: cached.result, truncated: body.length > 0 && cached.result.length < body.length };
+        }
+        const result = collectTailWrappedLines(body, innerWidth, limit);
+        this.wrapCache.set(cacheKey, { bodyRef: body, bodyKey, innerWidth, result: result.lines });
+        return result;
+    }
     getRenderPaneMetrics(kind, width = paneDimensionsForKind(kind, output.columns ?? 120, output.rows ?? 40).width, height = paneDimensionsForKind(kind, output.columns ?? 120, output.rows ?? 40).height) {
         if ((kind === 'process' || kind === 'messages') && this.paneScroll[kind] === 0) {
             const innerWidth = Math.max(1, width - 2);
@@ -2886,7 +3472,7 @@ class FullscreenTui {
             const rawBody = kind === 'messages'
                 ? this.buildMessagesPaneBody({ recentEntryLimit: Math.max(8, viewportLines * 2) })
                 : this.buildProcessPaneBody({ tailLineLimit: Math.max(16, viewportLines * 4) });
-            const tail = collectTailWrappedLines(rawBody, innerWidth, viewportLines);
+            const tail = this.cachedCollectTailWrappedLines(`${kind}:tail`, rawBody, innerWidth, viewportLines);
             return {
                 lines: tail.lines,
                 start: 0,
@@ -2904,7 +3490,7 @@ class FullscreenTui {
     getPaneMetrics(kind, width = paneDimensionsForKind(kind, output.columns ?? 120, output.rows ?? 40).width, height = paneDimensionsForKind(kind, output.columns ?? 120, output.rows ?? 40).height) {
         const innerWidth = Math.max(1, width - 2);
         const rawBody = this.getPaneBody(kind);
-        const lines = wrapBodyLines(rawBody, innerWidth);
+        const lines = this.cachedWrapBodyLines(kind, rawBody, innerWidth);
         const viewportLines = Math.max(0, height - 2);
         const maxStart = Math.max(0, lines.length - viewportLines);
         if (kind === 'sessions') {
@@ -2926,6 +3512,16 @@ class FullscreenTui {
             maxStartIsExact: true,
         };
     }
+    cachedWrapBodyLines(cacheKey, body, innerWidth) {
+        const cached = this.wrapCache.get(cacheKey);
+        const bodyKey = `${body.length}:${body.length > 0 ? body[body.length - 1] : ''}`;
+        if (cached && cached.bodyRef === body && cached.bodyKey === bodyKey && cached.innerWidth === innerWidth) {
+            return cached.result;
+        }
+        const result = wrapBodyLines(body, innerWidth);
+        this.wrapCache.set(cacheKey, { bodyRef: body, bodyKey, innerWidth, result });
+        return result;
+    }
     getPaneBody(kind) {
         switch (kind) {
             case 'sessions':
@@ -2933,7 +3529,9 @@ class FullscreenTui {
             case 'messages':
                 return this.buildMessagesPaneBody();
             case 'process':
-                return this.buildProcessPaneBody();
+                return this.buildProcessPaneBody({ tailLineLimit: MAX_ACTIVITY_LINES });
+            case 'tasks':
+                return this.buildTasksPaneBody();
             case 'context':
                 return this.buildContextPaneBody();
         }
@@ -2951,8 +3549,7 @@ class FullscreenTui {
         }
     }
     formatMessageHeader(entry) {
-        const spinner = entry.pending ? ` ${currentSpinnerFrame()}` : '';
-        return formatDisplayMessageHeader(entry, spinner);
+        return formatDisplayMessageHeader(entry, '');
     }
     close() {
         if (!this.closeResolver) {
@@ -2962,6 +3559,21 @@ class FullscreenTui {
         this.closeResolver = null;
         resolve();
     }
+    manageToolAbortSignal(event) {
+        if (event.type !== 'tool_call' || !event.toolState) {
+            return;
+        }
+        if (event.toolState === 'starting' || event.toolState === 'running') {
+            if (!this.toolAbortController || this.toolAbortController.signal.aborted) {
+                this.toolAbortController = new AbortController();
+            }
+            this.toolAbortSignalRef.signal = this.toolAbortController.signal;
+        }
+        else {
+            this.toolAbortController = null;
+            this.toolAbortSignalRef.signal = undefined;
+        }
+    }
     isEditingInput() {
         return this.uiMode !== 'editor' && this.inputValue.length > 0;
     }
@@ -3254,6 +3866,7 @@ export async function runFileCommand(workspaceRoot, fileSpec, args, options = {}
     }, args, options);
 }
 async function executeRunnableCommand(workspaceRoot, target, args, options = {}) {
+    const usageByModel = {};
     const executionLog = options.sessionId
         ? createSessionExecutionLogWriter({
             workspaceRoot,
@@ -3265,6 +3878,9 @@ async function executeRunnableCommand(workspaceRoot, target, args, options = {})
         })
         : null;
     const emitLogEvent = (event) => {
+        if (event.event.type === 'usage') {
+            recordTokenUsage(usageByModel, event.modelId, event.event.usage);
+        }
         executionLog?.recordEvent(event);
         options.onEvent?.(event);
     };
@@ -3275,12 +3891,14 @@ async function executeRunnableCommand(workspaceRoot, target, args, options = {})
             stream: true,
             sandbox: options.sandbox,
             signal: options.signal,
+            toolAbortSignalRef: options.toolAbortSignalRef,
             onUserInput: options.onUserInput,
             onEvent: (event) => emitLogEvent({ scope: 'child', childSlug: target.childSlug, event }),
             onChildEvent: (childSlug, event) => emitLogEvent({ scope: 'child', childSlug, event }),
         });
         if (options.sessionId) {
             await appendConductorSessionMessages(workspaceRoot, options.sessionId, buildPersistedRunnableTranscript(target.inputText, result));
+            await mergeSessionUsage(workspaceRoot, options.sessionId, usageByModel);
         }
         await executionLog?.finish({
             status: result.error ? 'error' : 'success',
@@ -3296,6 +3914,7 @@ async function executeRunnableCommand(workspaceRoot, target, args, options = {})
                 output: [],
                 error: error.message,
             }));
+            await mergeSessionUsage(workspaceRoot, options.sessionId, usageByModel);
         }
         await executionLog?.finish({
             status: 'error',
@@ -4019,17 +4638,23 @@ function computePaneWidths(columns) {
     return { left, center, right };
 }
 function computeRightPaneHeights(totalHeight) {
-    if (totalHeight <= 8) {
-        return { process: Math.max(1, totalHeight - 1), context: 1 };
-    }
-    let process = Math.max(8, Math.floor(totalHeight * 0.58));
-    let context = totalHeight - process;
-    if (context < 6) {
-        const deficit = 6 - context;
-        process = Math.max(6, process - deficit);
-        context = totalHeight - process;
-    }
-    return { process, context };
+    if (totalHeight <= 12) {
+        return { process: Math.max(1, totalHeight - 2), tasks: 1, context: 1 };
+    }
+    let process = Math.max(6, Math.floor(totalHeight * 0.40));
+    let tasks = Math.max(4, Math.floor(totalHeight * 0.25));
+    let context = totalHeight - process - tasks;
+    if (context < 4) {
+        const deficit = 4 - context;
+        process = Math.max(4, process - deficit);
+        context = totalHeight - process - tasks;
+    }
+    if (context < 4) {
+        const deficit = 4 - context;
+        tasks = Math.max(3, tasks - deficit);
+        context = totalHeight - process - tasks;
+    }
+    return { process, tasks, context };
 }
 function buildPane(title, body, width, height, kind, active = false) {
     if (height <= 0) {
@@ -4091,6 +4716,37 @@ function expandTabs(text, tabWidth) {
 export function measureDisplayWidth(text) {
     return splitGraphemes(text).reduce((total, grapheme) => total + graphemeDisplayWidth(grapheme), 0);
 }
+function displayColumnToStringIndex(text, displayCol) {
+    let col = 0;
+    let i = 0;
+    const len = text.length;
+    while (i < len) {
+        if (text.charCodeAt(i) === 0x1b && i + 1 < len && text[i + 1] === '[') {
+            const end = text.indexOf('m', i + 2);
+            if (end !== -1) {
+                i = end + 1;
+                continue;
+            }
+        }
+        if (col >= displayCol)
+            return i;
+        const code = text.codePointAt(i);
+        const charWidth = code >= 0x1100 && (code <= 0x115f || code === 0x2329 || code === 0x232a ||
+            (code >= 0x2e80 && code <= 0xa4cf && code !== 0x303f) ||
+            (code >= 0xac00 && code <= 0xd7a3) ||
+            (code >= 0xf900 && code <= 0xfaff) ||
+            (code >= 0xfe10 && code <= 0xfe19) ||
+            (code >= 0xfe30 && code <= 0xfe6f) ||
+            (code >= 0xff01 && code <= 0xff60) ||
+            (code >= 0xffe0 && code <= 0xffe6) ||
+            (code >= 0x1f300 && code <= 0x1f9ff) ||
+            (code >= 0x20000 && code <= 0x2fffd) ||
+            (code >= 0x30000 && code <= 0x3fffd)) ? 2 : 1;
+        col += charWidth;
+        i += code > 0xffff ? 2 : 1;
+    }
+    return i;
+}
 export function padRight(text, width) {
     const visibleWidth = measureDisplayWidth(text);
     return visibleWidth >= width ? text : `${text}${' '.repeat(width - visibleWidth)}`;
@@ -4349,8 +5005,20 @@ function renderWindowBody(text, innerWidth, kind) {
             return `${border}${paint(content, ANSI.yellow, ANSI.bgBlue, ANSI.bold)}${border}`;
         }
         if (normalized.startsWith('task') || normalized.startsWith('skill')) {
-            return `${border}${paint(content, ANSI.brightWhite, ANSI.bgBlue, ANSI.bold)}${border}`;
+            return `${border}${paint(content, ANSI.brightWhite, ANSI.bgBlue, ANSI.bold)}`;
+        }
+    }
+    if (kind === 'tasks') {
+        if (text.startsWith('>')) {
+            return `${border}${paint(content, ANSI.brightCyan, ANSI.bgBlue, ANSI.bold)}${border}`;
+        }
+        if (text.startsWith('\u2713')) {
+            return `${border}${paint(content, ANSI.green, ANSI.bgBlue)}${border}`;
+        }
+        if (text.startsWith('\u2717')) {
+            return `${border}${paint(content, ANSI.red, ANSI.bgBlue)}${border}`;
         }
+        return `${border}${paint(content, ANSI.white, ANSI.bgBlue)}${border}`;
     }
     if (normalized === 'task memory' ||
         normalized === 'assistant memory' ||
@@ -4379,6 +5047,8 @@ function paneDisplayName(kind) {
             return 'Messages';
         case 'process':
             return 'Execution';
+        case 'tasks':
+            return 'Tasks';
         case 'context':
             return 'Context';
     }
@@ -4393,6 +5063,8 @@ function paneDimensionsForKind(kind, columns, rows) {
             return { width: widths.center, height: Math.max(1, rows - 3) };
         case 'process':
             return { width: widths.right, height: rightHeights.process };
+        case 'tasks':
+            return { width: widths.right, height: rightHeights.tasks };
         case 'context':
             return { width: widths.right, height: rightHeights.context };
     }