@agi-fans/dsh-tui 0.1.1 → 0.3.0

package/lib/event-views.js

@@ -21,12 +21,19 @@ import { createTheme, SPINNER, SYMBOL } from "./theme.js";
 import { padToWidth, truncateToWidth, visibleWidth, wrapText } from "./width.js";
 import { renderTool } from "./tool-renderers.js";
 import { renderToolsPanel } from "./tools-list.js";
-import { renderHotkeysPanel } from "./hotkeys.js";
 import { renderCommandOutput, renderCommandSeparator } from "./command-output.js";
 import { renderPathMentionRows } from "./path-mentions.js";
 /** Empty starting state. */
 export function initialTranscript() {
-    return { blocks: [], status: 'idle', turn: 0 };
+    return {
+        blocks: [],
+        status: 'idle',
+        turn: 0,
+        todos: [],
+        compactCommandId: undefined,
+        nextTurnInbox: [],
+        nextStepInbox: [],
+    };
 }
 /** Extract plain text from text blocks, ignoring other block kinds. */
 function contentToText(content) {
@@ -66,8 +73,11 @@ function streamingBlock(state, turn, step) {
     return undefined;
 }
 /** Replace the trailing streaming block with a settled one, or append. */
-function settleAssistant(state, turn, step, text, reasoning) {
-    const blocks = state.blocks.slice();
+function editableBlocks(state, mutable) {
+    return mutable ? state.blocks : state.blocks.slice();
+}
+function settleAssistant(state, turn, step, text, reasoning, mutable) {
+    const blocks = editableBlocks(state, mutable);
     const last = blocks[blocks.length - 1];
     if (last?.kind === 'assistant' && last.streaming && last.turn === turn && last.step === step) {
         blocks[blocks.length - 1] = { kind: 'assistant', turn, step, text, reasoning, streaming: false };
@@ -84,23 +94,41 @@ function settleAssistant(state, turn, step, text, reasoning) {
  * @returns the next state.
  */
 export function applyEvent(state, event, presentation) {
+    return foldEvent(state, event, presentation, false);
+}
+/**
+ * Replay one immutable event log without repeatedly copying its growing block
+ * array. The mutable array is private to this fold and becomes readonly when
+ * the completed state escapes.
+ */
+export function replayEvents(events, presentations) {
+    let state = initialTranscript();
+    const indexes = { toolByCallId: new Map() };
+    for (const event of events)
+        state = foldEvent(state, event, presentations?.get(event.seq), true, indexes);
+    return state;
+}
+function foldEvent(state, event, presentation, mutable, indexes) {
     switch (event.type) {
         case 'turn/start':
-            return { ...state, status: 'running', turn: event.data.turn };
+            return { ...state, status: 'running', turn: event.data.turn, todos: [], compactCommandId: undefined };
         case 'turn/end': {
-            const blocks = state.blocks.slice();
-            const last = blocks[blocks.length - 1];
+            const last = state.blocks[state.blocks.length - 1];
+            const reason = event.data.reason;
+            const changesBlocks = (last?.kind === 'assistant' && last.streaming)
+                || reason.kind === 'error'
+                || reason.kind === 'aborted';
+            const blocks = changesBlocks ? editableBlocks(state, mutable) : state.blocks;
             if (last?.kind === 'assistant' && last.streaming) {
                 blocks[blocks.length - 1] = { ...last, streaming: false };
             }
-            const reason = event.data.reason;
             if (reason.kind === 'error') {
                 blocks.push({ kind: 'notice', level: 'error', text: 'error: ' + reason.error.code + ': ' + reason.error.message });
             }
             else if (reason.kind === 'aborted') {
                 blocks.push({ kind: 'notice', level: 'info', text: 'interrupted' });
             }
-            return { ...state, blocks, status: 'idle' };
+            return { ...state, blocks, status: 'idle', compactCommandId: undefined };
         }
         case 'user/message': {
             // Synthetic plugin injections (system-prompt runtime context, skill
@@ -111,12 +139,14 @@ export function applyEvent(state, event, presentation) {
             const text = contentToText(event.data.content);
             if (text === '')
                 return state;
-            return { ...state, blocks: [...state.blocks, { kind: 'user', text }] };
+            const blocks = editableBlocks(state, mutable);
+            blocks.push({ kind: 'user', text });
+            return { ...state, blocks };
         }
         case 'assistant/chunk': {
             const { turn, step, chunk } = event.data;
             if (chunk.type === 'text-delta') {
-                const blocks = state.blocks.slice();
+                const blocks = editableBlocks(state, mutable);
                 const last = streamingBlock(state, turn, step);
                 if (last !== undefined) {
                     const idx = blocks.length - 1;
@@ -130,7 +160,7 @@ export function applyEvent(state, event, presentation) {
                 return { ...state, blocks };
             }
             if (chunk.type === 'reasoning-delta') {
-                const blocks = state.blocks.slice();
+                const blocks = editableBlocks(state, mutable);
                 const last = streamingBlock(state, turn, step);
                 if (last !== undefined) {
                     const idx = blocks.length - 1;
@@ -144,8 +174,10 @@ export function applyEvent(state, event, presentation) {
                 return { ...state, blocks };
             }
             if (chunk.type === 'tool-call-delta') {
-                const blocks = state.blocks.slice();
-                const index = blocks.findIndex(block => block.kind === 'tool' && block.callId === chunk.id);
+                const blocks = editableBlocks(state, mutable);
+                const index = indexes === undefined
+                    ? blocks.findIndex(block => block.kind === 'tool' && block.callId === chunk.id)
+                    : indexes.toolByCallId.get(chunk.id) ?? -1;
                 const existing = blocks[index];
                 if (existing?.kind === 'tool') {
                     blocks[index] = {
@@ -160,6 +192,7 @@ export function applyEvent(state, event, presentation) {
                         kind: 'tool', callId: chunk.id, name: chunk.name ?? 'tool',
                         args: chunk.argumentsDelta, status: 'running', output: '', partial: true,
                     });
+                    indexes?.toolByCallId.set(chunk.id, blocks.length - 1);
                 }
                 return { ...state, blocks };
             }
@@ -167,7 +200,7 @@ export function applyEvent(state, event, presentation) {
         }
         case 'assistant/message': {
             const { turn, step, message } = event.data;
-            return settleAssistant(state, turn, step, contentToText(message.content), contentToReasoning(message.content));
+            return settleAssistant(state, turn, step, contentToText(message.content), contentToReasoning(message.content), mutable);
         }
         case 'tool/call': {
             const block = {
@@ -179,16 +212,43 @@ export function applyEvent(state, event, presentation) {
                 output: '',
                 ...(presentation === undefined ? {} : { presentation }),
             };
-            const blocks = state.blocks.slice();
-            const partial = blocks.findIndex(item => item.kind === 'tool' && item.callId === event.data.callId);
+            const blocks = editableBlocks(state, mutable);
+            const partial = indexes === undefined
+                ? blocks.findIndex(item => item.kind === 'tool' && item.callId === event.data.callId)
+                : indexes.toolByCallId.get(event.data.callId) ?? -1;
             if (partial >= 0)
                 blocks[partial] = block;
-            else
+            else {
                 blocks.push(block);
+                indexes?.toolByCallId.set(event.data.callId, blocks.length - 1);
+            }
             return { ...state, blocks };
         }
         case 'tool/result':
-            return applyToolResult(state, event.data.message, event.data.error, presentation);
+            return applyToolResult(state, event.data.message, event.data.error, presentation, mutable, indexes);
+        case 'todo/write':
+            return { ...state, todos: event.data.todos.map(todo => ({ ...todo })) };
+        case 'command/run':
+            if (event.data.name !== 'compact')
+                return state;
+            return {
+                ...state,
+                status: 'compacting',
+                compactCommandId: event.data.commandId,
+            };
+        case 'command/done':
+            if (state.compactCommandId !== event.data.commandId)
+                return state;
+            return { ...state, status: 'idle', compactCommandId: undefined };
+        case 'agent/inbox/spliced': {
+            const key = event.data.target === 'next-turn' ? 'nextTurnInbox' : 'nextStepInbox';
+            return {
+                ...state,
+                [key]: state[key].toSpliced(event.data.start, event.data.removedCount ?? 0, ...event.data.inserted),
+            };
+        }
+        case 'session/end-seed':
+            return { ...state, nextTurnInbox: [], nextStepInbox: [] };
         // Log-only vocabulary (boundaries, usage, compaction, approvals, ...):
         // nothing to display; the recognized core events above own the surface.
         default:
@@ -196,27 +256,38 @@ export function applyEvent(state, event, presentation) {
     }
 }
 /** Fold one tool result into its tool block. */
-function applyToolResult(state, message, error, presentation) {
+function applyToolResult(state, message, error, presentation, mutable, indexes) {
     // A tool-result message carries exactly one tool-result block; the call
     // identity and outcome live on that inner block.
     const inner = message.content[0];
     if (inner?.type !== 'tool-result')
         return state;
-    const blocks = state.blocks.slice();
+    const blocks = editableBlocks(state, mutable);
+    const indexed = indexes?.toolByCallId.get(inner.toolCallId);
+    if (indexed !== undefined) {
+        const block = blocks[indexed];
+        if (block?.kind === 'tool') {
+            blocks[indexed] = settleTool(block, inner, error, presentation);
+            return { ...state, blocks };
+        }
+    }
     for (let i = blocks.length - 1; i >= 0; i -= 1) {
         const block = blocks[i];
         if (block?.kind === 'tool' && block.callId === inner.toolCallId) {
-            blocks[i] = {
-                ...block,
-                status: error !== undefined || inner.isError === true ? 'error' : 'ok',
-                output: contentToText(inner.content),
-                ...(presentation === undefined ? {} : { presentation }),
-            };
+            blocks[i] = settleTool(block, inner, error, presentation);
             return { ...state, blocks };
         }
     }
     return state;
 }
+function settleTool(block, result, error, presentation) {
+    return {
+        ...block,
+        status: error !== undefined || result.isError === true ? 'error' : 'ok',
+        output: contentToText(result.content),
+        ...(presentation === undefined ? {} : { presentation }),
+    };
+}
 /** Collapsed tool-output preview height (OMP `DEFAULT_TERMINAL_PREVIEW_LINES`). */
 export const TOOL_COLLAPSED_LINES = 10;
 /** OMP AssistantMessage uses one horizontal cell of padding and no vertical padding. */
@@ -307,8 +378,6 @@ export function blockLines(block, theme, width, spinnerFrame = 0, toolsExpanded
         return toolBlockLines(block, theme, width, spinnerFrame, toolsExpanded);
     if (block.kind === 'toolCatalog')
         return renderToolsPanel(block.tools, theme, width, toolsExpanded);
-    if (block.kind === 'hotkeyCatalog')
-        return renderHotkeysPanel(block.bindings, theme, width);
     if (block.kind === 'commandOutput')
         return renderCommandOutput(block.command, block.text, theme, width);
     if (block.framed !== true) {
@@ -337,23 +406,52 @@ function fitFrame(lines, width) {
     });
 }
 /**
- * Scroll changes only the viewport. Cache the expensive Markdown/tool fold by
- * immutable TranscriptState identity so wheel frames slice already-rendered
- * rows instead of formatting the complete session again.
+ * Scroll, activity, inbox, and composer changes do not alter transcript blocks.
+ * Cache the expensive Markdown/tool fold by immutable block-array identity so
+ * those frames slice already-rendered rows instead of formatting the complete
+ * session again. Spinner frames matter only while a visible tool block runs.
  */
 const transcriptBodyCache = new WeakMap();
+/** Settled immutable blocks keep their expensive Markdown/tool layout. */
+const blockLinesCache = new WeakMap();
+function cachedBlockLines(block, options, theme, themeName, trueColor, spinnerFrame, expanded) {
+    const animatedSpinnerFrame = block.kind === 'tool' && block.status === 'running' ? spinnerFrame : -1;
+    const cached = blockLinesCache.get(block);
+    if (cached !== undefined
+        && cached.width === options.width
+        && cached.colors === options.colors
+        && cached.trueColor === trueColor
+        && cached.themeName === themeName
+        && cached.spinnerFrame === animatedSpinnerFrame
+        && cached.expanded === expanded)
+        return cached.lines;
+    const lines = blockLines(block, theme, options.width, spinnerFrame, expanded);
+    blockLinesCache.set(block, {
+        width: options.width,
+        colors: options.colors,
+        trueColor,
+        themeName,
+        spinnerFrame: animatedSpinnerFrame,
+        expanded,
+        lines,
+    });
+    return lines;
+}
 function renderTranscriptBody(state, options, theme, spinnerFrame) {
     const toolsExpanded = options.toolsExpanded === true;
     const expandedTools = [...(options.expandedTools ?? [])].sort().join('\0');
     const themeName = options.themeName ?? 'dark';
     const trueColor = options.trueColor === true;
-    const cached = transcriptBodyCache.get(state);
+    const animatedSpinnerFrame = state.blocks.some(block => block.kind === 'tool' && block.status === 'running')
+        ? spinnerFrame
+        : -1;
+    const cached = transcriptBodyCache.get(state.blocks);
     if (cached !== undefined
         && cached.width === options.width
         && cached.colors === options.colors
         && cached.trueColor === trueColor
         && cached.themeName === themeName
-        && cached.spinnerFrame === spinnerFrame
+        && cached.spinnerFrame === animatedSpinnerFrame
         && cached.toolsExpanded === toolsExpanded
         && cached.expandedTools === expandedTools) {
         return { lines: cached.lines, blockStarts: cached.blockStarts };
@@ -374,15 +472,15 @@ function renderTranscriptBody(state, options, theme, spinnerFrame) {
         }
         blockStarts.push(lines.length);
         const expanded = toolsExpanded || (block.kind === 'tool' && options.expandedTools?.has(block.callId) === true);
-        lines.push(...blockLines(block, theme, options.width, spinnerFrame, expanded));
+        lines.push(...cachedBlockLines(block, options, theme, themeName, trueColor, spinnerFrame, expanded));
         previous = block;
     }
-    transcriptBodyCache.set(state, {
+    transcriptBodyCache.set(state.blocks, {
         width: options.width,
         colors: options.colors,
         trueColor,
         themeName,
-        spinnerFrame,
+        spinnerFrame: animatedSpinnerFrame,
         toolsExpanded,
         expandedTools,
         lines,
@@ -393,8 +491,6 @@ function renderTranscriptBody(state, options, theme, spinnerFrame) {
 function commandSurfaceName(block) {
     if (block?.kind === 'toolCatalog')
         return 'tools';
-    if (block?.kind === 'hotkeyCatalog')
-        return 'hotkeys';
     if (block?.kind === 'commandOutput')
         return block.command;
     return undefined;
@@ -508,6 +604,103 @@ function paintImageMarkerSlice(fullText, slice, sourceStart, theme) {
     output += fullText.slice(cursor, sourceEnd);
     return output;
 }
+/** Maximum number of queued composer submissions kept visible above the editor. */
+export const QUEUED_SUBMISSION_PREVIEW = 3;
+/** Maximum number of Todo items kept visible above the composer. */
+export const TODO_PREVIEW = 5;
+function todoPreviewStart(todos) {
+    if (todos.length <= TODO_PREVIEW)
+        return 0;
+    const active = todos.findIndex(todo => todo.status === 'in_progress');
+    if (active >= 0)
+        return active;
+    const pending = todos.findIndex(todo => todo.status === 'pending');
+    return pending >= 0 ? pending : Math.max(0, todos.length - TODO_PREVIEW);
+}
+/** Compact, unframed Todo tree placed above queued messages. */
+export function renderTodos(todos, theme, width) {
+    if (todos.length === 0 || width <= 0)
+        return [];
+    const completed = todos.filter(todo => todo.status === 'completed').length;
+    const header = '  ' + theme.bold(theme.fg('accent', 'Todos'))
+        + theme.fg('dim', ` · ${completed}/${todos.length}`);
+    const start = todoPreviewStart(todos);
+    const end = Math.min(todos.length, start + TODO_PREVIEW);
+    const rows = [
+        ...(start === 0 ? [] : [`… ${start} earlier`]),
+        ...todos.slice(start, end),
+        ...(end === todos.length ? [] : [`… ${todos.length - end} more`]),
+    ];
+    const lines = [header, ...rows.map((row, index) => {
+            const branch = '  ' + theme.fg('dim', index === rows.length - 1 ? '└─' : '├─') + ' ';
+            if (typeof row === 'string')
+                return branch + theme.fg('dim', row);
+            const todo = row;
+            if (todo.status === 'completed') {
+                return branch + theme.fg('success', '☑ ' + theme.strikethrough(todo.content));
+            }
+            if (todo.status === 'in_progress') {
+                return branch + theme.fg('accent', '☐ ' + todo.content);
+            }
+            return branch + theme.fg('dim', '☐ ' + todo.content);
+        })];
+    return lines.map(line => truncateToWidth(line, width));
+}
+function queuedSubmissionLabel(submission) {
+    const text = submission.text.replaceAll('\r\n', '\n').replaceAll('\r', '\n')
+        .replaceAll('\n', ' ↵ ')
+        .replace(/\s+/gu, ' ')
+        .trim();
+    if (text !== '')
+        return text;
+    const count = submission.images.length;
+    return count === 0 ? '(empty message)' : `${count} image${count === 1 ? '' : 's'}`;
+}
+function queuedMessageLabel(message) {
+    const text = contentToText(message.content).replaceAll('\r\n', '\n').replaceAll('\r', '\n')
+        .replaceAll('\n', ' ↵ ')
+        .replace(/\s+/gu, ' ')
+        .trim();
+    if (text !== '')
+        return text;
+    const count = message.content.filter(block => block.type === 'image').length;
+    return count === 0 ? '(empty message)' : `${count} image${count === 1 ? '' : 's'}`;
+}
+/** Compact, unframed pending-message view placed immediately above the composer. */
+export function renderQueuedSubmissions(submissions, theme, width, inbox = []) {
+    const labels = [
+        ...inbox.filter(message => message.source.kind === 'user').map(queuedMessageLabel),
+        ...submissions.map(queuedSubmissionLabel),
+    ];
+    if (labels.length === 0 || width <= 0)
+        return [];
+    const start = Math.max(0, labels.length - QUEUED_SUBMISSION_PREVIEW);
+    const hidden = start;
+    const queueLabel = theme.bold(theme.fg('accent', 'Queued'));
+    const rail = '  ' + theme.fg('border', '│') + ' ';
+    const alignAction = (left, action, preserveAction = true) => {
+        const leftWidth = visibleWidth(left);
+        const actionWidth = visibleWidth(action);
+        if (leftWidth + actionWidth + 2 <= width) {
+            return left + ' '.repeat(width - leftWidth - actionWidth) + action;
+        }
+        if (!preserveAction || actionWidth + 4 >= width)
+            return truncateToWidth(left, width);
+        const paintedLeft = truncateToWidth(left, width - actionWidth - 2);
+        return paintedLeft + '  ' + action;
+    };
+    if (labels.length === 1) {
+        return [alignAction(rail + queueLabel + theme.fg('dim', ' · ') + theme.fg('text', labels[0] ?? ''), theme.fg('dim', '↑ edit'))];
+    }
+    const summary = ` · ${labels.length}${hidden === 0 ? '' : ` · ${hidden} earlier`}`;
+    const visibleLabels = labels.slice(start);
+    const lines = [
+        alignAction(rail + queueLabel + theme.fg('dim', summary), theme.fg('dim', '↑ edit latest'), false),
+        ...visibleLabels.map((label, index) => rail + theme.fg(index === visibleLabels.length - 1 ? 'accent' : 'dim', String(start + index + 1))
+            + '  ' + theme.fg('text', label)),
+    ];
+    return lines.map(line => truncateToWidth(line, width));
+}
 /**
  * Compose the welcome card, transcript, working row, and rounded editor into
  * one frame — the oh-my-pi surface.
@@ -578,7 +771,11 @@ export function renderView(state, options) {
         transcriptStart = body.length;
         body.push(...transcript.lines);
     }
-    const working = state.status === 'running' ? renderWorking(theme, spinnerFrame, undefined, width) : [];
+    const working = state.status === 'running'
+        ? renderWorking(theme, spinnerFrame, undefined, width)
+        : state.status === 'compacting'
+            ? renderWorking(theme, spinnerFrame, 'Compacting', width)
+            : [];
     const statusBar = resolveStatusBarConfig(options.statusBar, options.statusPreset);
     const inlineHint = slashInlineHint(options.input, options.inputCursor, options.commands);
     const statusFooter = renderStatusFooter({
@@ -596,7 +793,7 @@ export function renderView(state, options) {
         input: options.input,
         inputCursor: options.inputCursor,
         status: ' ' + theme.fg('accent', '🐳') + ' ',
-        border: state.status === 'running' ? 'accent' : 'border',
+        border: state.status === 'idle' ? 'border' : 'accent',
         ...(options.inputImages === undefined || options.inputImages === 0
             ? {}
             : { paintInput: (text, start) => paintImageMarkerSlice(options.input, text, start, theme) }),
@@ -617,6 +814,10 @@ export function renderView(state, options) {
     const editor = promptSelector === undefined && settings === undefined && copySelector === undefined && search === undefined
         ? renderEditor(editorOpts, theme)
         : undefined;
+    const queuedSubmissions = editor === undefined
+        ? []
+        : renderQueuedSubmissions(options.queuedSubmissions ?? [], theme, width, state.nextTurnInbox);
+    const todos = editor === undefined ? [] : renderTodos(state.todos, theme, width);
     const autocomplete = promptSelector !== undefined || settings !== undefined || copySelector !== undefined || search !== undefined
         || options.autocomplete === undefined
         ? []
@@ -624,7 +825,7 @@ export function renderView(state, options) {
     const inputLines = promptSelector?.lines ?? settings?.lines ?? copySelector?.lines ?? search?.lines
         ?? (editor === undefined ? [] : editor.lines);
     const spacer = 1;
-    const reserved = inputLines.length + working.length + spacer + autocomplete.length + statusFooter.length;
+    const reserved = inputLines.length + working.length + todos.length + queuedSubmissions.length + spacer + autocomplete.length + statusFooter.length;
     const budget = Math.max(0, height - reserved);
     const focusStart = options.focusBlock === undefined
         ? undefined
@@ -637,10 +838,12 @@ export function renderView(state, options) {
     const lines = [...visible];
     if (visible.length > 0)
         lines.push('');
-    const bottomRows = working.length + inputLines.length + autocomplete.length + statusFooter.length;
+    const bottomRows = working.length + todos.length + queuedSubmissions.length + inputLines.length + autocomplete.length + statusFooter.length;
     const fill = Math.max(0, height - lines.length - bottomRows);
     lines.push(...Array.from({ length: fill }, () => ''));
     lines.push(...working);
+    lines.push(...todos);
+    lines.push(...queuedSubmissions);
     const editorStart = lines.length;
     lines.push(...inputLines);
     lines.push(...autocomplete);
@@ -653,8 +856,9 @@ export function renderView(state, options) {
             row: editorStart + caret.row,
             column: Math.min(caret.column, width),
         },
-        cursorVisible: promptSelector?.cursorVisible
-            ?? (settings === undefined && copySelector === undefined),
+        cursorVisible: state.status === 'compacting'
+            ? false
+            : promptSelector?.cursorVisible ?? (settings === undefined && copySelector === undefined),
         ...(promptSelector?.editor !== undefined
             ? { editor: { start: editorStart + promptSelector.editor.start, rows: promptSelector.editor.rows } }
             : editor === undefined ? {} : { editor: { start: editorStart, rows: editor.lines.length } }),