fix: clear terminal viewport when switching sessions

Author: masterkain

apps/web/src/App.tsx

@@ -703,7 +703,24 @@ export default function App() {
     term.clear();
   }, []);
 
+  const prepareSessionSwitch = useCallback(() => {
+    const term = termRef.current;
+    if (term) {
+      term.clear();
+    }
+
+    outboxRef.current.chunks.length = 0;
+    outboxRef.current.bytes = 0;
+    outboxRef.current.droppedBytes = 0;
+    pendingResizeRef.current = null;
+
+    setOutputBytes(0);
+    setQueuedInputBytes(0);
+    setDroppedInputBytes(0);
+  }, []);
+
   const startFreshSession = useCallback(() => {
+    prepareSessionSwitch();
     setSessionMode("control");
     sessionIdRef.current = undefined;
     setSessionId("");
@@ -733,14 +750,15 @@ export default function App() {
     }
 
     connect();
-  }, [connect, setSessionMode]);
+  }, [connect, prepareSessionSwitch, setSessionMode]);
 
   const resumeSession = useCallback(
     (targetSessionId: string, mode: AttachMode = "control") => {
       if (!targetSessionId) {
         return;
       }
 
+      prepareSessionSwitch();
       setSessionMode(mode);
       sessionIdRef.current = targetSessionId;
       setSessionId(targetSessionId);
@@ -753,7 +771,7 @@ export default function App() {
 
       reconnectNow();
     },
-    [reconnectNow, setSessionMode],
+    [prepareSessionSwitch, reconnectNow, setSessionMode],
   );
 
   const resumePreviousSession = useCallback(() => {

apps/web/test/app.integration.test.tsx

@@ -29,6 +29,7 @@ const runtime = vi.hoisted(() => {
     cols = 80;
     rows = 24;
     options: { fontSize: number };
+    clearCalls = 0;
 
     private dataHandlers = new Set<(data: string) => void>();
 
@@ -55,7 +56,7 @@ const runtime = vi.hoisted(() => {
     }
 
     clear(): void {
-      // no-op for tests
+      this.clearCalls += 1;
     }
 
     dispose(): void {
@@ -337,8 +338,15 @@ describe("App integration", () => {
     await act(async () => {
       ws1.triggerOpen();
       ws1.triggerMessage({ type: "ready", sessionId: "session-old" });
+      ws1.triggerMessage({ type: "output", data: "hello\n" });
     });
 
+    expect(screen.getByTestId("output-value").getAttribute("data-bytes")).toBe(
+      "6",
+    );
+    const terminal = runtime.FakeTerminal.instances[0];
+    expect(terminal.clearCalls).toBe(0);
+
     const attachFirst = sentMessages(ws1).find(
       (message) => message.type === "attach",
     );
@@ -352,6 +360,11 @@ describe("App integration", () => {
       fireEvent.click(screen.getByTestId("session-menu-new"));
     });
 
+    expect(screen.getByTestId("output-value").getAttribute("data-bytes")).toBe(
+      "0",
+    );
+    expect(terminal.clearCalls).toBe(1);
+
     await waitFor(
       () => {
         expect(MockWebSocket.instances.length).toBe(2);
@@ -416,6 +429,9 @@ describe("App integration", () => {
       fireEvent.click(screen.getByTestId("session-menu-resume-last"));
     });
 
+    const terminal = runtime.FakeTerminal.instances[0];
+    expect(terminal.clearCalls).toBe(1);
+
     await waitFor(
       () => {
         expect(MockWebSocket.instances.length).toBe(2);