Pin the TUI header and footer (#4)

Author: TheGreatAxios

src/tui/app.tsx

@@ -33,19 +33,25 @@ export function App({ eventEmitter, agent, sessionTitle }: AppProps): ReactNode
   };
 
   return (
-    <Box flexDirection="column" height="100%">
-      <Header
-        turnsUsed={state.turnsUsed}
-        status={state.status}
-        totalCost={state.formattedCost}
-        sessionTitle={sessionTitle}
-        latestUserMessage={state.latestUserMessage}
-      />
-      <Box flexGrow={1} flexDirection="column">
+    <Box flexDirection="column" height="100%" overflowY="hidden">
+      <Box height="auto" flexShrink={0}>
+        <Header
+          turnsUsed={state.turnsUsed}
+          status={state.status}
+          totalCost={state.formattedCost}
+          sessionTitle={sessionTitle}
+          latestUserMessage={state.latestUserMessage}
+        />
+      </Box>
+      <Box flexGrow={1} flexShrink={1} flexDirection="column" overflowY="hidden">
         <EventLog contentBlocks={state.contentBlocks} />
       </Box>
-      <ChatInput onSubmit={handleSend} />
-      <StatusBar />
+      <Box height="auto" flexShrink={0}>
+        <ChatInput onSubmit={handleSend} />
+      </Box>
+      <Box height="auto" flexShrink={0}>
+        <StatusBar />
+      </Box>
     </Box>
   );
 }

tests/unit/tui/app.test.tsx

@@ -12,20 +12,20 @@ const mockAgent = {
 
 test("App renders header and status bar", () => {
   const emitter = new EventEmitter();
-  const { lastFrame } = render(<App eventEmitter={emitter} maxTurns={30} agent={mockAgent as unknown as import("@intx/agent").Agent} />);
+  const { lastFrame } = render(<App eventEmitter={emitter} maxTurns={30} agent={mockAgent as unknown as import("@intx/agent").Agent} sessionTitle="" />);
   expect(lastFrame()).toContain("interchange-code");
   expect(lastFrame()).toContain("Ctrl+C");
 });
 
 test("App renders chat input", () => {
   const emitter = new EventEmitter();
-  const { lastFrame } = render(<App eventEmitter={emitter} maxTurns={30} agent={mockAgent as unknown as import("@intx/agent").Agent} />);
+  const { lastFrame } = render(<App eventEmitter={emitter} maxTurns={30} agent={mockAgent as unknown as import("@intx/agent").Agent} sessionTitle="" />);
   expect(lastFrame()).toContain("> ");
 });
 
 test("App renders events after they are emitted", async () => {
   const emitter = new EventEmitter();
-  const { lastFrame } = render(<App eventEmitter={emitter} maxTurns={30} agent={mockAgent as unknown as import("@intx/agent").Agent} />);
+  const { lastFrame } = render(<App eventEmitter={emitter} maxTurns={30} agent={mockAgent as unknown as import("@intx/agent").Agent} sessionTitle="" />);
 
   const event: ReactorEmittedEvent = {
     type: "inference.tool_call.start",
@@ -40,6 +40,28 @@ test("App renders events after they are emitted", async () => {
 
 test("App renders running status initially", () => {
   const emitter = new EventEmitter();
-  const { lastFrame } = render(<App eventEmitter={emitter} maxTurns={30} agent={mockAgent as unknown as import("@intx/agent").Agent} />);
+  const { lastFrame } = render(<App eventEmitter={emitter} maxTurns={30} agent={mockAgent as unknown as import("@intx/agent").Agent} sessionTitle="" />);
   expect(lastFrame()).toContain("running");
 });
+
+test("App keeps header and footer visible after many events", async () => {
+  const emitter = new EventEmitter();
+  const { lastFrame } = render(
+    <App eventEmitter={emitter} agent={mockAgent as unknown as import("@intx/agent").Agent} sessionTitle="scroll test" />,
+    { stdout: { columns: 100, rows: 12 } },
+  );
+
+  for (let i = 0; i < 25; i++) {
+    emitter.emit("event", {
+      type: "inference.tool_call.start",
+      seq: i + 1,
+      data: { name: `tool_${i}`, callId: `call_${i}` } as unknown as ReactorEmittedEvent["data"],
+    } satisfies ReactorEmittedEvent);
+  }
+
+  await new Promise((resolve) => setTimeout(resolve, 10));
+  expect(lastFrame()).toContain("interchange-code");
+  expect(lastFrame()).toContain("scroll test");
+  expect(lastFrame()).toContain("> ");
+  expect(lastFrame()).toContain("Ctrl+C");
+});