feat(ts): use resizeKey to rebuild Shell JSX subtree on terminal resize

Author: Yuandiaodiaodiao

src/kimi_cli_ts/ui/shell/Shell.tsx

@@ -193,12 +193,12 @@ export function Shell({
   });
 
   // ── Layout ──
-  const { staticItems } = useShellLayout(wire.messages, wire.isStreaming);
+  const { staticItems, resizeKey } = useShellLayout(wire.messages, wire.isStreaming);
   const mode = inputState.mode;
   const promptSymbol = getPromptSymbol(mode, inputState.shellMode, thinking, wire.status?.plan_mode ?? false);
 
   return (
-    <Box flexDirection="column">
+    <Box key={resizeKey} flexDirection="column">
       <Static items={staticItems}>
         {(item: any) =>
           item._isWelcome ? (

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";
 
@@ -21,16 +21,35 @@ export function useShellLayout(messages: UIMessage[], isStreaming: boolean) {
   const { stdout } = useStdout();
   const [termHeight, setTermHeight] = useState(stdout?.rows || 24);
 
+  // Monotonic counter incremented after resize settles (debounced).
+  // Used as React key on Shell's root Box to force a full subtree rebuild,
+  // which makes <Static> re-output all items at the new terminal width.
+  // Shell's own hooks (useWire, useShellInput, etc.) are unaffected because
+  // Shell itself does not unmount — only its returned JSX tree is rebuilt.
+  const [resizeKey, setResizeKey] = useState(0);
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
   useEffect(() => {
-    const onResize = () => setTermHeight(stdout?.rows || 24);
+    const onResize = () => {
+      setTermHeight(stdout?.rows || 24);
+
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+      debounceRef.current = setTimeout(() => {
+        debounceRef.current = null;
+        setResizeKey((k) => k + 1);
+      }, 300);
+    };
     stdout?.on("resize", onResize);
-    return () => { stdout?.off("resize", onResize); };
+    return () => {
+      stdout?.off("resize", onResize);
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
   }, [stdout]);
 
   const staticItems = React.useMemo(
     () => buildStaticItems(messages, isStreaming),
     [messages, isStreaming],
   );
 
-  return { termHeight, staticItems };
+  return { termHeight, staticItems, resizeKey };
 }