feat(ts): handle terminal resize by remounting Shell UI

Re-render Ink on terminal resize so <Static> scrollback reflows to the
new width instead of staying garbled.  The soul/wire/app stay alive —
only the UI layer unmounts and re-renders.

Author: Yuandiaodiaodiao

src/kimi_cli_ts/cli/index.ts

@@ -363,6 +363,9 @@ program
             // Pending reload info — set by onReload, checked after waitUntilExit
             let pendingReload: { sessionId: string; prefillText?: string } | null = null;
 
+            // Resize remount: UI-only unmount/re-render without touching app/soul.
+            let pendingResizeRemount = false;
+
             // pushEvent will be set by Shell's onWireReady callback
             pushEvent = null;
 
@@ -375,8 +378,11 @@ program
               inkUnmountFn?.();
             };
 
-            // Create a UILoopFn that translates Wire messages → WireUIEvent for Shell
-            const createShellUILoopFn = (pe: (event: WireUIEvent) => void): UILoopFn => {
+            // Create a UILoopFn that translates Wire messages → WireUIEvent for Shell.
+            // Uses the outer `pushEvent` variable (not a parameter) so that after a
+            // resize remount, the running UILoopFn automatically routes events to the
+            // new Shell instance's wire once onWireReady updates pushEvent.
+            const createShellUILoopFn = (): UILoopFn => {
               return async (wire) => {
                 const uiSide = wire.uiSide(true);
                 while (true) {
@@ -387,6 +393,8 @@ program
                     if (err instanceof QueueShutDown) break;
                     throw err;
                   }
+                  const pe = pushEvent;
+                  if (!pe) continue; // Shell not mounted yet (between resize remounts)
                   const t = msg.__wireType ?? "";
                   if (t === "TurnBegin") {
                     const raw = msg.user_input;
@@ -475,6 +483,18 @@ program
               process.exit(1);
             }
 
+            // ── Render loop: re-renders Ink on resize without recreating app ──
+            // Inner loop handles resize remounts (UI-only). Outer loop handles
+            // full reloads (session switch — app.shutdown + KimiCLI.create).
+            let rootHubQueue: any = null;
+            let rootHubStarted = false;
+            let initialPromptFired = false;
+            // eslint-disable-next-line no-constant-condition
+            while (true) {
+            pushEvent = null;
+            pendingResizeRemount = false;
+            inkUnmountFn = null;
+
             const { waitUntilExit, unmount: inkUnmount } = render(
               React.createElement(Shell, {
                 modelName: app.soul.modelName,
@@ -490,7 +510,7 @@ program
                   currentCancelController = cancelController;
                   const wireFile = app.session.wireFile ? new WireFile(app.session.wireFile) : undefined;
                   try {
-                    await runSoul(app.soul, input, createShellUILoopFn(pushEvent!), cancelController, {
+                    await runSoul(app.soul, input, createShellUILoopFn(), cancelController, {
                       wireFile,
                       runtime: app.soul.runtime,
                     });
@@ -536,6 +556,10 @@ program
                 onReload: (newSessionId: string, prefill?: string) => {
                   triggerReload(newSessionId, prefill);
                 },
+                onResizeRemount: () => {
+                  pendingResizeRemount = true;
+                  inkUnmountFn?.();
+                },
                 extraSlashCommands: app.soul.availableSlashCommands,
               }),
               { exitOnCtrlC: false },
@@ -546,8 +570,11 @@ program
             // Start background task to forward RootWireHub events to UI.
             // ApprovalRequests flow through ApprovalRuntime → RootWireHub,
             // NOT through the soul's Wire, so we need a separate subscriber.
-            let rootHubQueue: any = null;
-            if (app.soul.runtime.rootWireHub) {
+            // Set up once before the inner render loop — survives resize remounts
+            // because it reads the outer `pushEvent` variable which gets updated on
+            // each Shell mount via onWireReady.
+            if (!rootHubStarted && app.soul.runtime.rootWireHub) {
+              rootHubStarted = true;
               rootHubQueue = app.soul.runtime.rootWireHub.subscribe();
               (async () => {
                 try {
@@ -583,12 +610,13 @@ program
               })();
             }
 
-            // Run initial prompt if provided (only on first iteration)
-            if (currentPrompt) {
+            // Run initial prompt if provided (only on first render, not on resize remounts)
+            if (currentPrompt && !initialPromptFired) {
+              initialPromptFired = true;
               const cancelController = new AbortController();
               currentCancelController = cancelController;
               const wireFile = app.session.wireFile ? new WireFile(app.session.wireFile) : undefined;
-              runSoul(app.soul, currentPrompt, createShellUILoopFn(pushEvent!), cancelController, {
+              runSoul(app.soul, currentPrompt, createShellUILoopFn(), cancelController, {
                 wireFile,
                 runtime: app.soul.runtime,
               }).catch((err) => {
@@ -597,6 +625,18 @@ program
             }
 
             await waitUntilExit();
+
+            // Resize remount: only re-render Ink, keep app/soul/wire alive.
+            // The inner render loop continues; soul streams reconnect via pushEvent.
+            if (pendingResizeRemount) {
+              currentPrefillText = undefined; // Don't re-show prefill text
+              continue; // → inner render loop
+            }
+
+            // Not a resize — break out to outer loop for reload or exit
+            break;
+            } // end inner render loop
+
             disableBracketedPaste();
             if (rootHubQueue && app.soul.runtime.rootWireHub) {
               app.soul.runtime.rootWireHub.unsubscribe(rootHubQueue);

src/kimi_cli_ts/ui/renderer/index.ts

@@ -135,6 +135,10 @@ function hasEraseScreen(s: string): boolean {
 
 // ── stdout.write Wrapper ────────────────────────────────
 
+// Saved reference to the original stdout.write before wrapping.
+// Used by writeRawToStdout() to bypass the erase-screen stripping.
+let _originalStdoutWrite: typeof process.stdout.write | null = null;
+
 function installWrapper(stream: NodeJS.WriteStream): void {
   if (!stream.isTTY) {
     log("wrapper: skip (not TTY)");
@@ -148,6 +152,7 @@ function installWrapper(stream: NodeJS.WriteStream): void {
   (stream as any).__rendererWrapped = true;
 
   const originalWrite = stream.write.bind(stream) as typeof stream.write;
+  _originalStdoutWrite = originalWrite;
   let buffer: string[] = [];
   let inSyncBlock = false;
   let syncWriteCount = 0;
@@ -257,6 +262,19 @@ export function getLastFrameHeight(): number {
   return (process.stdout as any).__lastFrameHeight ?? 5;
 }
 
+/**
+ * Write directly to stdout, bypassing the erase-screen stripping wrapper.
+ * Use this for intentional terminal clears (e.g., resize-triggered reload)
+ * where we actually want \x1b[2J/\x1b[3J to reach the terminal.
+ */
+export function writeRawToStdout(data: string): void {
+  if (_originalStdoutWrite) {
+    _originalStdoutWrite(data);
+  } else {
+    process.stdout.write(data);
+  }
+}
+
 // ── Public API ──────────────────────────────────────────
 
 let installed = false;

src/kimi_cli_ts/ui/shell/Shell.tsx

@@ -32,7 +32,7 @@ import { setActiveTheme } from "../theme.ts";
 import { createAllCommands } from "./shell-commands.ts";
 import { useShellCallbacks } from "./useShellCallbacks.ts";
 import { getPromptSymbol } from "./usePromptSymbol.ts";
-import { getLastFrameHeight } from "../renderer/index.ts";
+import { getLastFrameHeight, writeRawToStdout } from "../renderer/index.ts";
 import { useShellLayout } from "./useShellLayout.ts";
 import type { WireUIEvent } from "./events.ts";
 import type { ApprovalResponseKind } from "../../wire/types.ts";
@@ -52,6 +52,8 @@ export interface ShellProps {
   onApprovalResponse?: (requestId: string, decision: ApprovalResponseKind, feedback?: string) => void;
   onWireReady?: (pushEvent: (event: WireUIEvent) => void) => void;
   onReload?: (sessionId: string, prefillText?: string) => void;
+  /** UI-only remount (no app restart). Used for terminal resize. */
+  onResizeRemount?: () => void;
   extraSlashCommands?: SlashCommand[];
 }
 
@@ -72,6 +74,7 @@ export function Shell({
   onApprovalResponse,
   onWireReady,
   onReload,
+  onResizeRemount,
   extraSlashCommands = [],
 }: ShellProps) {
   const { exit } = useApp();
@@ -193,7 +196,22 @@ export function Shell({
   });
 
   // ── Layout ──
-  const { staticItems } = useShellLayout(wire.messages, wire.isStreaming);
+  // On terminal resize, trigger a full Shell reload so <Static> scrollback
+  // is re-rendered at the new terminal width instead of staying garbled.
+  const handleTerminalResize = useCallback(() => {
+    if (onResizeRemount) {
+      // Clear scrollback to remove garbled <Static> content before remounting.
+      // Uses writeRawToStdout to bypass patchInkLogUpdate's erase-screen stripping.
+      writeRawToStdout("\x1b[3J\x1b[2J\x1b[H");
+      onResizeRemount();
+    }
+  }, [onResizeRemount]);
+
+  const { staticItems } = useShellLayout({
+    messages: wire.messages,
+    isStreaming: wire.isStreaming,
+    onTerminalResize: handleTerminalResize,
+  });
   const mode = inputState.mode;
   const promptSymbol = getPromptSymbol(mode, inputState.shellMode, thinking, wire.status?.plan_mode ?? false);
 

src/kimi_cli_ts/ui/shell/useShellLayout.ts

@@ -2,7 +2,7 @@
  * useShellLayout.ts — Terminal height tracking and static items computation.
  */
 
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useStdout } from "ink";
 import type { UIMessage } from "./events.ts";
 
@@ -16,15 +16,43 @@ export function buildStaticItems(messages: UIMessage[], isStreaming: boolean): S
   return [welcome, ...msgs];
 }
 
+interface ShellLayoutOptions {
+  messages: UIMessage[];
+  isStreaming: boolean;
+  /** Called when terminal is resized. Debounced to avoid rapid-fire triggers. */
+  onTerminalResize?: () => void;
+}
+
 /** Hook that tracks terminal height and exposes layout helpers. */
-export function useShellLayout(messages: UIMessage[], isStreaming: boolean) {
+export function useShellLayout({ messages, isStreaming, onTerminalResize }: ShellLayoutOptions) {
   const { stdout } = useStdout();
   const [termHeight, setTermHeight] = useState(stdout?.rows || 24);
 
+  // Keep callback in a ref so the resize listener always calls the latest version
+  // without re-subscribing on every render.
+  const onResizeRef = useRef(onTerminalResize);
+  onResizeRef.current = onTerminalResize;
+
+  // Debounce timer ref to collapse rapid resize events into a single callback.
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
   useEffect(() => {
-    const onResize = () => setTermHeight(stdout?.rows || 24);
-    stdout?.on("resize", onResize);
-    return () => { stdout?.off("resize", onResize); };
+    const handleResize = () => {
+      setTermHeight(stdout?.rows || 24);
+
+      // Debounce the external callback — terminal resize can fire many events
+      // when the user drags the window edge.
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+      debounceRef.current = setTimeout(() => {
+        debounceRef.current = null;
+        onResizeRef.current?.();
+      }, 300);
+    };
+    stdout?.on("resize", handleResize);
+    return () => {
+      stdout?.off("resize", handleResize);
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
   }, [stdout]);
 
   const staticItems = React.useMemo(