Persist terminal history across tab switches

Render all view children always — each component returns null when
inactive instead of being unmounted. This keeps WmuxTerminal instances
mounted so their state, subscriptions, and buffers survive tab switches.
No replay flash, no hidden elements, no external state management.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: shmuel hizmi

packages/wmux-client-terminal/src/components/WmuxApp.tsx

@@ -335,23 +335,18 @@ export const WmuxApp = (props: {
             width={SIDEBAR_WIDTH}
           />
 
-          {/* Content area — all children stay mounted, inactive ones hidden */}
+          {/* Content area — children stay mounted, return null when inactive */}
           <box flexGrow={1} flexDirection="column">
-            {searchOpen ? (
+            {searchOpen && (
               <SearchOverlay
                 categories={categories}
                 onSelectCategory={selectCategory}
                 onSelectTab={selectTab}
                 onOpenFile={openFile}
                 onClose={handleSearchClose}
               />
-            ) : null}
-            {React.Children.map(children, (child) => {
-              const childId = ((child as React.ReactElement).props as { id?: string }).id;
-              if (!childId) return null;
-              if (searchOpen || childId !== activeTabId) return null;
-              return child;
-            })}
+            )}
+            {children}
             {!searchOpen && !hasActiveChild && (
               activeTabId.startsWith("file::") ? (
                 <LocalFileViewer filePath={activeTabId.slice(6)} />

packages/wmux-client-terminal/src/components/WmuxFileContent.tsx

@@ -1,5 +1,6 @@
 /** @jsxImportSource @opentui/react */
 import type { ReactNode } from "react";
+import { usePrefixContext } from "./FocusContext";
 
 interface WmuxFileContentProps {
   readonly id: string;
@@ -9,7 +10,9 @@ interface WmuxFileContentProps {
   readonly children?: ReactNode;
 }
 
-export const WmuxFileContent = ({ name, content }: WmuxFileContentProps): ReactNode => {
+export const WmuxFileContent = ({ id, name, content }: WmuxFileContentProps): ReactNode => {
+  const { activeTabId } = usePrefixContext();
+  if (activeTabId !== id) return null;
   const lines = content.split("\n");
   const gutterWidth = String(lines.length).length + 1;
 

packages/wmux-client-terminal/src/components/WmuxIframe.tsx

@@ -1,5 +1,6 @@
 /** @jsxImportSource @opentui/react */
 import type { ReactNode } from "react";
+import { usePrefixContext } from "./FocusContext";
 
 interface WmuxIframeProps {
   readonly id: string;
@@ -8,7 +9,10 @@ interface WmuxIframeProps {
   readonly children?: ReactNode;
 }
 
-export const WmuxIframe = ({ name, url }: WmuxIframeProps): ReactNode => (
+export const WmuxIframe = ({ id, name, url }: WmuxIframeProps): ReactNode => {
+  const { activeTabId } = usePrefixContext();
+  if (activeTabId !== id) return null;
+  return (
   <box flexGrow={1} justifyContent="center" alignItems="center" flexDirection="column" gap={1}>
     <text fg="#98989d">
       <strong>{name}</strong>
@@ -18,4 +22,5 @@ export const WmuxIframe = ({ name, url }: WmuxIframeProps): ReactNode => (
     </text>
     <text fg="#636366">Open in browser to view</text>
   </box>
-);
+  );
+};

packages/wmux-client-terminal/src/components/WmuxTerminal.tsx

@@ -2,7 +2,7 @@
 import { useState, useEffect, useRef, useCallback, type ReactNode } from "react";
 import { useKeyboard, useTerminalDimensions } from "@opentui/react";
 import { fromBase64, toBase64 } from "../utils/base64";
-import { TerminalBuffer, type StyledLine, type StyledSegment } from "../utils/ansi";
+import { getOrCreateBuffer, type StyledLine, type StyledSegment } from "../utils/ansi";
 import { usePrefixContext } from "./FocusContext";
 
 const SIDEBAR_WIDTH = 30;
@@ -49,15 +49,11 @@ export const WmuxTerminal = (props: WmuxTerminalProps): ReactNode => {
   const [lines, setLines] = useState<readonly StyledLine[]>([]);
   const { width, height } = useTerminalDimensions();
   const sentResizeRef = useRef<string>("");
-  const termBufRef = useRef<TerminalBuffer | null>(null);
 
-  const getTerminalBuffer = useCallback((): TerminalBuffer => {
-    if (!termBufRef.current) {
-      const cols = Math.max(10, width - SIDEBAR_WIDTH - 2);
-      termBufRef.current = new TerminalBuffer(cols);
-    }
-    return termBufRef.current;
-  }, [width]);
+  const getTerminalBuffer = useCallback(() => {
+    const cols = Math.max(10, width - SIDEBAR_WIDTH - 2);
+    return getOrCreateBuffer(id, cols);
+  }, [width, id]);
 
   const isActiveTerminal = activeTabId === id && status === "running";
 
@@ -106,6 +102,9 @@ export const WmuxTerminal = (props: WmuxTerminalProps): ReactNode => {
     sendResize({ cols: contentWidth, rows: contentHeight });
   }, [width, height, sendResize, getTerminalBuffer]);
 
+  // Component stays mounted for state persistence — return null when not visible
+  if (activeTabId !== id) return null;
+
   if (status === "idle") {
     return (
       <box flexGrow={1} justifyContent="center" alignItems="center" flexDirection="column" gap={1}>

packages/wmux-client-terminal/src/utils/ansi.ts

@@ -488,3 +488,23 @@ export const parseAnsiOutput = (raw: string): readonly StyledLine[] => {
 export const createDefaultState = (): { fg: undefined; bg: undefined; bold: false; italic: false; underline: false } => ({
   fg: undefined, bg: undefined, bold: false, italic: false, underline: false,
 });
+
+// ── Persistent buffer registry ──────────────────────────────
+// Buffers survive component unmount/remount so terminal history
+// is preserved across tab switches.
+
+const bufferRegistry = new Map<string, TerminalBuffer>();
+
+export const getOrCreateBuffer = (id: string, cols?: number): TerminalBuffer => {
+  const existing = bufferRegistry.get(id);
+  if (existing) return existing;
+  const buf = new TerminalBuffer(cols);
+  bufferRegistry.set(id, buf);
+  return buf;
+};
+
+export const resetBuffer = (id: string, cols?: number): TerminalBuffer => {
+  const buf = new TerminalBuffer(cols);
+  bufferRegistry.set(id, buf);
+  return buf;
+};