@code-yeongyu/senpi 2026.8.19 → 2026.8.20

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

@@ -70,6 +70,7 @@ import { createMermaidMarkdownTransformer } from "./components/mermaid.js";
 import { getModelFullId, mergeFavoritePatternsForPersist, } from "./components/model-favorites.js";
 import { ModelSelectorComponent } from "./components/model-selector.js";
 import { formatAuthSelectorProviderType, OAuthSelectorComponent, } from "./components/oauth-selector.js";
+import { DEFAULT_TAIL_BUDGET, DEFAULT_WARM_CHUNK_SIZE, ProgressiveTranscriptContainer, } from "./components/progressive-transcript-container.js";
 import { ScopedModelsSelectorComponent } from "./components/scoped-models-selector.js";
 import { SessionSelectorComponent } from "./components/session-selector.js";
 import { SettingsSelectorComponent } from "./components/settings-selector.js";
@@ -90,6 +91,7 @@ import { applyKeybindingsFileEdit, seedKeybindingsFile } from "./keybindings-com
 import { refreshModelCatalogs } from "./model-catalog-refresh.js";
 import { getModelSearchText } from "./model-search.js";
 import { isRiskyMainModel, RISKY_MAIN_MODEL_WARNING } from "./risky-main-model-warning.js";
+import { splitTrailingAssistantContent } from "./split-trailing-assistant-text.js";
 import { DEFAULT_SMOOTH_FPS, StreamingRevealController } from "./streaming-reveal.js";
 import { getAvailableThemes, getAvailableThemesWithPaths, getEditorTheme, getMarkdownTheme, getThemeByName, onThemeChange, setRegisteredThemes, stopThemeWatcher, Theme, theme, } from "./theme/theme.js";
 import { InteractiveThemeController } from "./theme/theme-controller.js";
@@ -142,6 +144,8 @@ function isCompactionCostNotice(item) {
     return "type" in item && item.type === "compaction_cost";
 }
 const DEAD_TERMINAL_ERROR_CODES = new Set(["EIO", "EPIPE", "ENOTCONN"]);
+const DEFAULT_RETRY_STATUS_REFRESH_INTERVAL_MS = 80;
+const LARGE_SESSION_RETRY_STATUS_REFRESH_INTERVAL_MS = 60_000;
 const DEFAULT_WORKING_STATUS_REFRESH_INTERVAL_MS = 600;
 const DEFAULT_WORKING_STATUS_MESSAGE_ANIMATION_INTERVAL_MS = 32;
 const LARGE_SESSION_WORKING_STATUS_REFRESH_INTERVAL_MS = 60_000;
@@ -464,6 +468,7 @@ export class InteractiveMode {
         this.managedToolStatusStarted = false;
         // Streaming message tracking
         this.streamingComponent = undefined;
+        this.trailingAssistantComponent = undefined;
         this.streamingMessage = undefined;
         // Tool execution tracking: toolCallId -> component
         this.pendingTools = new Map();
@@ -560,7 +565,14 @@ export class InteractiveMode {
         this.ui.setClearOnShrink(this.settingsManager.getClearOnShrink());
         this.headerContainer = new Container();
         this.loadedResourcesContainer = new Container();
-        this.chatContainer = new Container();
+        // Resuming a long session paints a bounded, fully-styled tail first and warms
+        // the earlier history in background chunks, so /resume is not blocked on
+        // Markdown-rendering every persisted message before the first frame.
+        this.chatContainer = new ProgressiveTranscriptContainer({
+            tailBudget: DEFAULT_TAIL_BUDGET,
+            warmChunkSize: DEFAULT_WARM_CHUNK_SIZE,
+            requestRender: () => this.ui.requestRender(),
+        });
         this.documentContainer = new Container();
         this.documentContainer.addChild(this.headerContainer);
         this.documentContainer.addChild(this.loadedResourcesContainer);
@@ -796,7 +808,11 @@ export class InteractiveMode {
         }
         previousUi.stop({ preserveScreen: true });
         previousUi.setFocus(null);
-        previousUi.clear();
+        // Detach, not clear: the same live components (spinners, reveals, extension
+        // widgets) are remounted on nextUi below. clear() would dispose them,
+        // killing every interval they own while they keep rendering static frames
+        // forever — the TUI then never self-repaints until an input event forces one.
+        previousUi.detachAll();
         if (TuiLayouts.isViewportTUI(previousUi))
             previousUi.setLayoutRoot(undefined);
         const nextUi = createInteractiveTui({
@@ -1563,25 +1579,32 @@ export class InteractiveMode {
             const first = collisionList[0]?.collision;
             if (!first)
                 continue;
-            lines.push(theme.fg("warning", `  "${name}" collision:`));
-            lines.push(theme.fg("dim", `    ${theme.fg("success", "✓")} ${this.formatPathWithSource(first.winnerPath, this.findSourceInfoForPath(first.winnerPath, sourceInfos))}`));
+            lines.push({ text: `  "${name}" collision:`, tone: "warning" });
+            lines.push({
+                text: `    ✓ ${this.formatPathWithSource(first.winnerPath, this.findSourceInfoForPath(first.winnerPath, sourceInfos))}`,
+                tone: "warning",
+            });
             for (const d of collisionList) {
                 if (d.collision) {
-                    lines.push(theme.fg("dim", `    ${theme.fg("warning", "✗")} ${this.formatPathWithSource(d.collision.loserPath, this.findSourceInfoForPath(d.collision.loserPath, sourceInfos))} (skipped)`));
+                    lines.push({
+                        text: `    ✗ ${this.formatPathWithSource(d.collision.loserPath, this.findSourceInfoForPath(d.collision.loserPath, sourceInfos))} (skipped)`,
+                        tone: "warning",
+                    });
                 }
             }
         }
         for (const d of otherDiagnostics) {
+            const tone = d.type === "error" ? "error" : "warning";
             if (d.path) {
                 const formattedPath = this.formatPathWithSource(d.path, this.findSourceInfoForPath(d.path, sourceInfos));
-                lines.push(theme.fg(d.type === "error" ? "error" : "warning", `  ${formattedPath}`));
-                lines.push(theme.fg(d.type === "error" ? "error" : "warning", `    ${d.message}`));
+                lines.push({ text: `  ${formattedPath}`, tone });
+                lines.push({ text: `    ${d.message}`, tone });
             }
             else {
-                lines.push(theme.fg(d.type === "error" ? "error" : "warning", `  ${d.message}`));
+                lines.push({ text: `  ${d.message}`, tone });
             }
         }
-        return lines.join("\n");
+        return lines;
     }
     showLoadedResources(options) {
         // Resource rendering is idempotent; chat clears no longer clear this separate container.
@@ -1710,17 +1733,22 @@ export class InteractiveMode {
             }
         }
         if (showDiagnostics) {
+            const addDiagnosticNotice = (title, diagnostics) => {
+                this.loadedResourcesContainer.addChild(buildNoticeBox({
+                    title,
+                    tone: "warning",
+                    why: "Conflicting or invalid loaded resources were found.",
+                    extra: this.formatDiagnostics(diagnostics, sourceInfos),
+                }, { expanded: this.toolOutputExpanded }, theme));
+                this.loadedResourcesContainer.addChild(new Spacer(1));
+            };
             const skillDiagnostics = skillsResult.diagnostics;
             if (skillDiagnostics.length > 0) {
-                const warningLines = this.formatDiagnostics(skillDiagnostics, sourceInfos);
-                this.loadedResourcesContainer.addChild(new Text(`${theme.fg("warning", "[Skill conflicts]")}\n${warningLines}`, 0, 0));
-                this.loadedResourcesContainer.addChild(new Spacer(1));
+                addDiagnosticNotice("Skill conflicts", skillDiagnostics);
             }
             const promptDiagnostics = promptsResult.diagnostics;
             if (promptDiagnostics.length > 0) {
-                const warningLines = this.formatDiagnostics(promptDiagnostics, sourceInfos);
-                this.loadedResourcesContainer.addChild(new Text(`${theme.fg("warning", "[Prompt conflicts]")}\n${warningLines}`, 0, 0));
-                this.loadedResourcesContainer.addChild(new Spacer(1));
+                addDiagnosticNotice("Prompt conflicts", promptDiagnostics);
             }
             const extensionDiagnostics = [];
             const extensionErrors = this.session.resourceLoader.getExtensions().errors;
@@ -1739,15 +1767,11 @@ export class InteractiveMode {
             const shortcutDiagnostics = this.session.extensionRunner.getShortcutDiagnostics();
             extensionDiagnostics.push(...shortcutDiagnostics);
             if (extensionDiagnostics.length > 0) {
-                const warningLines = this.formatDiagnostics(extensionDiagnostics, sourceInfos);
-                this.loadedResourcesContainer.addChild(new Text(`${theme.fg("warning", "[Extension issues]")}\n${warningLines}`, 0, 0));
-                this.loadedResourcesContainer.addChild(new Spacer(1));
+                addDiagnosticNotice("Extension issues", extensionDiagnostics);
             }
             const themeDiagnostics = themesResult.diagnostics;
             if (themeDiagnostics.length > 0) {
-                const warningLines = this.formatDiagnostics(themeDiagnostics, sourceInfos);
-                this.loadedResourcesContainer.addChild(new Text(`${theme.fg("warning", "[Theme conflicts]")}\n${warningLines}`, 0, 0));
-                this.loadedResourcesContainer.addChild(new Spacer(1));
+                addDiagnosticNotice("Theme conflicts", themeDiagnostics);
             }
         }
     }
@@ -3376,7 +3400,10 @@ export class InteractiveMode {
             case "message_update":
                 if (this.streamingComponent && event.message.role === "assistant") {
                     this.streamingMessage = event.message;
-                    this.streamingReveal.setTarget(this.streamingMessage);
+                    {
+                        const { head } = splitTrailingAssistantContent(event.message.content);
+                        this.streamingReveal.setTarget({ ...event.message, content: head });
+                    }
                     for (const content of this.streamingMessage.content) {
                         if (content.type === "toolCall") {
                             let component = this.pendingTools.get(content.id);
@@ -3396,6 +3423,7 @@ export class InteractiveMode {
                             }
                         }
                     }
+                    this.syncTrailingAssistantText(event.message);
                     this.ui.requestRender();
                 }
                 break;
@@ -3419,7 +3447,8 @@ export class InteractiveMode {
                         errorMessage = abortedErrorLabel(undefined, this.session.retryAttempt);
                         this.streamingMessage.errorMessage = errorMessage;
                     }
-                    this.streamingComponent.updateContent(this.streamingMessage, false);
+                    this.syncTrailingAssistantText(this.streamingMessage);
+                    this.trailingAssistantComponent = undefined;
                     this.addContinuityNotice(this.streamingMessage);
                     if (this.streamingMessage.stopReason === "aborted" || this.streamingMessage.stopReason === "error") {
                         if (!errorMessage) {
@@ -3492,13 +3521,17 @@ export class InteractiveMode {
             case "tool_execution_end": {
                 this.handleToolExecutionEnd(event);
                 this.toolArgsReveal.finish(event.toolCallId);
-                const component = this.pendingTools.get(event.toolCallId);
-                if (component) {
-                    this.toolResultReveal.finish(event.toolCallId);
-                    component.updateResult({ ...event.result, isError: event.isError });
-                    this.pendingTools.delete(event.toolCallId);
-                    this.ui.requestRender();
+                let component = this.pendingTools.get(event.toolCallId);
+                if (!component) {
+                    component = this.createToolExecutionComponent(event.toolName, event.toolCallId, {});
+                    component.setExpanded(this.toolOutputExpanded);
+                    this.chatContainer.addChild(component);
+                    this.pendingTools.set(event.toolCallId, component);
                 }
+                this.toolResultReveal.finish(event.toolCallId);
+                component.updateResult({ ...event.result, isError: event.isError });
+                this.pendingTools.delete(event.toolCallId);
+                this.ui.requestRender();
                 break;
             }
             case "agent_end":
@@ -3769,8 +3802,7 @@ export class InteractiveMode {
             }
             case "summarization_retry_scheduled": {
                 this.showError(event.errorMessage);
-                this.showStatusIndicator(new RetryStatusIndicator(this.ui, event.attempt, event.maxAttempts, event.delayMs));
-                this.ui.requestRender();
+                this.showSummarizationRetryStatusIndicator(event);
                 break;
             }
             case "summarization_retry_attempt_start": {
@@ -3811,7 +3843,15 @@ export class InteractiveMode {
         }
     }
     showRetryStatusIndicator(event) {
-        this.showStatusIndicator(new RetryStatusIndicator(this.ui, event.attempt, event.maxAttempts, event.delayMs));
+        this.showRetryStatusIndicatorWithCadence(event);
+    }
+    showSummarizationRetryStatusIndicator(event) {
+        this.showRetryStatusIndicatorWithCadence(event);
+    }
+    showRetryStatusIndicatorWithCadence(event) {
+        const refreshIntervalMs = largeSessionWorkingStatusInterval(this.sessionManager.getEntries().length, DEFAULT_RETRY_STATUS_REFRESH_INTERVAL_MS, LARGE_SESSION_RETRY_STATUS_REFRESH_INTERVAL_MS);
+        const indicator = refreshIntervalMs === DEFAULT_RETRY_STATUS_REFRESH_INTERVAL_MS ? undefined : { intervalMs: refreshIntervalMs };
+        this.showStatusIndicator(new RetryStatusIndicator(this.ui, event.attempt, event.maxAttempts, event.delayMs, indicator));
         this.ui.requestRender();
     }
     /** Extract text content from a user message */
@@ -3957,6 +3997,29 @@ export class InteractiveMode {
             }
         }
     }
+    syncTrailingAssistantText(message) {
+        if (!this.streamingComponent)
+            return;
+        const { head, tail } = splitTrailingAssistantContent(message.content);
+        this.streamingComponent.updateContent({ ...message, content: head }, true);
+        if (tail.length === 0) {
+            if (this.trailingAssistantComponent) {
+                this.chatContainer.detachChild(this.trailingAssistantComponent);
+                this.trailingAssistantComponent = undefined;
+            }
+            return;
+        }
+        const tailMessage = { ...message, content: tail };
+        if (!this.trailingAssistantComponent) {
+            this.trailingAssistantComponent = new AssistantMessageComponent(tailMessage, this.hideThinkingBlock, this.getMarkdownThemeWithSettings(), this.hiddenThinkingLabel, this.outputPad, this.getMarkdownTransformers());
+            this.trailingAssistantComponent.setExpanded(this.toolOutputExpanded);
+            this.chatContainer.addChild(this.trailingAssistantComponent);
+            return;
+        }
+        this.trailingAssistantComponent.updateContent(tailMessage, true);
+        this.chatContainer.detachChild(this.trailingAssistantComponent);
+        this.chatContainer.addChild(this.trailingAssistantComponent);
+    }
     createToolExecutionComponent(toolName, toolCallId, args) {
         if (this.chrome) {
             return new ToolExecutionComponent(toolName, toolCallId, args, {
@@ -4555,48 +4618,43 @@ export class InteractiveMode {
         this.ui.requestRender();
     }
     showNewVersionNotification(newVersion) {
-        const action = theme.fg("accent", BRAND?.update?.command ?? `${APP_NAME} update`);
-        const updateInstruction = theme.fg("muted", `New version ${newVersion} is available. Run `) + action;
+        const action = BRAND?.update?.command ?? `${APP_NAME} update`;
         const changelogUrl = getReleaseChangelogUrl(newVersion);
-        const changelogLink = getCapabilities().hyperlinks
-            ? hyperlink(theme.fg("accent", changelogUrl), changelogUrl)
-            : theme.fg("accent", changelogUrl);
-        const changelogLine = theme.fg("muted", "Changelog: ") + changelogLink;
-        this.chatContainer.addChild(new Spacer(1));
-        this.chatContainer.addChild(new DynamicBorder((text) => theme.fg("warning", text)));
-        this.chatContainer.addChild(new Text(`${theme.bold(theme.fg("warning", "Update Available"))}\n${updateInstruction}\n${changelogLine}`, 1, 0));
-        this.chatContainer.addChild(new DynamicBorder((text) => theme.fg("warning", text)));
-        this.ui.requestRender();
+        const changelogLink = getCapabilities().hyperlinks ? hyperlink(changelogUrl, changelogUrl) : changelogUrl;
+        this.showNoticeBox({
+            title: "Update Available",
+            tone: "warning",
+            why: `New version ${newVersion} is available. Run ${action}`,
+            extra: [{ text: `Changelog: ${changelogLink}`, tone: "accent" }],
+        });
     }
     showRiskyMainModelWarning(model) {
         if (!model || !isRiskyMainModel(model))
             return;
-        this.chatContainer.addChild(new Spacer(1));
-        this.chatContainer.addChild(new DynamicBorder((text) => theme.fg("error", text)));
-        this.chatContainer.addChild(new Text(`${theme.bold(theme.fg("error", "Risky model warning"))}\n${theme.fg("error", RISKY_MAIN_MODEL_WARNING)}`, 1, 0));
-        this.chatContainer.addChild(new DynamicBorder((text) => theme.fg("error", text)));
-        this.ui.requestRender();
+        this.showNoticeBox({ title: "Risky model warning", tone: "error", why: RISKY_MAIN_MODEL_WARNING });
     }
     showSettingsSourceSelected(event) {
         this.showStatus(`Settings: ${path.basename(event.path)} (${event.format.toUpperCase()})`);
     }
     showHighReasoningWarning(event) {
         const { title, body } = buildHighReasoningWarning({ id: event.modelId, provider: event.provider }, event.thinkingLevel);
-        this.chatContainer.addChild(new Spacer(1));
-        this.chatContainer.addChild(new DynamicBorder((text) => theme.fg("error", text)));
-        this.chatContainer.addChild(new Text(`${theme.bold(theme.fg("error", title))}\n${body.map((line) => theme.fg("error", line)).join("\n")}`, 1, 0));
-        this.chatContainer.addChild(new DynamicBorder((text) => theme.fg("error", text)));
-        this.ui.requestRender();
+        this.showNoticeBox({
+            title,
+            tone: "error",
+            why: body[0] ?? "High reasoning may affect reliability or cost.",
+            extra: body.slice(1).map((text) => ({ text, tone: "error" })),
+        });
     }
     showPackageUpdateNotification(packages) {
-        const action = theme.fg("accent", `${APP_NAME} update --extensions`);
-        const updateInstruction = theme.fg("muted", "Package updates are available. Run ") + action;
-        const packageLines = packages.map((pkg) => `- ${pkg}`).join("\n");
-        this.chatContainer.addChild(new Spacer(1));
-        this.chatContainer.addChild(new DynamicBorder((text) => theme.fg("warning", text)));
-        this.chatContainer.addChild(new Text(`${theme.bold(theme.fg("warning", "Package Updates Available"))}\n${updateInstruction}\n${theme.fg("muted", "Packages:")}\n${packageLines}`, 1, 0));
-        this.chatContainer.addChild(new DynamicBorder((text) => theme.fg("warning", text)));
-        this.ui.requestRender();
+        this.showNoticeBox({
+            title: "Package Updates Available",
+            tone: "warning",
+            why: `Package updates are available. Run ${APP_NAME} update --extensions`,
+            extra: [
+                { text: "Packages:", tone: "dim" },
+                ...packages.map((pkg) => ({ text: `- ${pkg}`, tone: "dim" })),
+            ],
+        });
     }
     /**
      * Get all queued messages (read-only).
@@ -6189,7 +6247,6 @@ export class InteractiveMode {
             this.showWarning(veto.reason ?? "Reload blocked by an extension.");
             return;
         }
-        this.resetExtensionUI();
         const reloadBox = new Container();
         const borderColor = (s) => theme.fg("border", s);
         reloadBox.addChild(new DynamicBorder(borderColor));
@@ -6215,6 +6272,13 @@ export class InteractiveMode {
             if (chatRestoredBeforeSessionStart) {
                 return;
             }
+            // Reset extension UI only once the reload is actually proceeding (this
+            // callback runs after reload()'s internal veto re-check, right before the
+            // new runner's session_start re-registers extension UI). Resetting before
+            // reload() destroyed live extension footers/widgets/tickers on a vetoed
+            // or failed reload with nothing left to restore them, so the TUI stopped
+            // self-repainting until an input event forced a frame.
+            this.resetExtensionUI();
             this.hideThinkingBlock = this.settingsManager.getHideThinkingBlock();
             this.outputPad = this.settingsManager.getOutputPad();
             this.rebuildChatFromMessages();
@@ -6718,9 +6782,7 @@ export class InteractiveMode {
         ].join("\n");
         fs.mkdirSync(path.dirname(debugLogPath), { recursive: true });
         fs.writeFileSync(debugLogPath, debugData);
-        this.chatContainer.addChild(new Spacer(1));
-        this.chatContainer.addChild(new Text(`${theme.fg("accent", "✓ Debug log written")}\n${theme.fg("muted", debugLogPath)}`, 1, 1));
-        this.ui.requestRender();
+        this.showNoticeBox({ title: "✓ Debug log written", tone: "success", why: debugLogPath });
     }
     handleArminSaysHi() {
         this.chatContainer.addChild(new Spacer(1));