Merge remote-tracking branch 'origin/main'

Author: acartine

src/app/beats/page.tsx

@@ -35,9 +35,6 @@ import { AlertTriangle } from "lucide-react";
 import {
   isListBeatsView, parseBeatsView,
 } from "@/lib/beats-view";
-import {
-  getTerminalViewportInset,
-} from "@/lib/terminal-viewport";
 import { useBeatsQuery } from "./use-beats-query";
 import { useAgentInfoMap } from "./use-agent-info-map";
 import { useBulkActions } from "./use-bulk-actions";
@@ -79,9 +76,6 @@ function useBeatsPageState() {
   const { activeRepo, registeredRepos } = useAppStore();
   const {
     terminals,
-    panelOpen,
-    panelMinimized,
-    panelHeight,
   } = useTerminalStore();
 
   const shippingByBeatId = terminals.reduce<
@@ -117,24 +111,14 @@ function useBeatsPageState() {
     beats, detailBeatId, detailRepo, isListView,
     activeRepo,
   });
-  const listViewportInset =
-    beatsView === "queues" || beatsView === "active"
-      ? getTerminalViewportInset({
-        panelOpen,
-        panelMinimized,
-        panelHeight,
-        terminalCount: terminals.length,
-      })
-      : "0px";
-
   return {
     beatsView, isListView, viewPhase,
     isActiveView, activeRepo,
     searchQuery, detailBeatId, detailRepo,
     beats, isLoading, loadError, isDegradedError,
     hasRollingAncestor, showRepoColumn,
     agentInfoByBeatId, shippingByBeatId,
-    listViewportInset, streamingProgress,
+    streamingProgress,
     ...bulk, ...actions, ...detail,
   };
 }
@@ -262,7 +246,6 @@ function BeatsViewBody({
           onShipBeat={s.handleShipBeat}
           shippingByBeatId={s.shippingByBeatId}
           onAbortShipping={s.handleAbortShipping}
-          listViewportInset={s.listViewportInset}
           streamingProgress={
             s.streamingProgress
           }
@@ -289,7 +272,6 @@ interface BeatsListContentProps {
   onAbortShipping: (
     beatId: string,
   ) => Promise<void>;
-  listViewportInset: string;
   streamingProgress: StreamingProgress;
 }
 
@@ -303,7 +285,7 @@ function BeatsListContent(
     selectionVersion, searchQuery,
     onOpenBeat, onShipBeat,
     shippingByBeatId, onAbortShipping,
-    listViewportInset, streamingProgress,
+    streamingProgress,
   } = props;
 
   const isStreamActive =
@@ -339,10 +321,7 @@ function BeatsListContent(
     && beats.length === 0;
 
   return (
-    <div
-      className="overflow-x-auto"
-      style={{ paddingBottom: listViewportInset }}
-    >
+    <div className="overflow-x-auto">
       {isDegradedError && (
         <DegradedBanner message={loadError} />
       )}

src/app/globals.css

@@ -50,6 +50,7 @@
 
 :root {
   --radius: 0.625rem;
+  --terminal-viewport-inset: 0px;
   --background: oklch(0.988 0.01 316);
   --foreground: oklch(0.19 0.02 298);
   --card: oklch(0.996 0.008 320);
@@ -128,6 +129,10 @@
   }
   body {
     @apply bg-background text-foreground;
+    padding-bottom: var(--terminal-viewport-inset);
+    scroll-padding-bottom: var(
+      --terminal-viewport-inset
+    );
   }
 
   body[data-scroll-locked] {

src/components/providers.tsx

@@ -4,6 +4,9 @@ import { useState } from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { Toaster } from "sonner";
 import { ClientDiagnosticsRuntime } from "@/components/client-diagnostics-runtime";
+import {
+  TerminalViewportInsetSync,
+} from "@/components/terminal-viewport-inset-sync";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { useWindowFocusInvalidation } from "@/hooks/use-window-focus-invalidation";
 import { initializeDiagnostics } from "@/lib/client-perf";
@@ -28,6 +31,7 @@ export function Providers({ children }: { children: React.ReactNode }) {
   return (
     <QueryClientProvider client={queryClient}>
       <ClientDiagnosticsRuntime />
+      <TerminalViewportInsetSync />
       <GlobalQueryHooks />
       <TooltipProvider>
         {children}

src/components/terminal-viewport-inset-sync.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { useEffect } from "react";
+import {
+  getTerminalViewportInset,
+} from "@/lib/terminal-viewport";
+import { useTerminalStore } from "@/stores/terminal-store";
+
+const TERMINAL_VIEWPORT_INSET_VAR =
+  "--terminal-viewport-inset";
+
+export function TerminalViewportInsetSync() {
+  const {
+    panelOpen,
+    panelMinimized,
+    panelHeight,
+    terminals,
+  } = useTerminalStore();
+
+  useEffect(() => {
+    const inset = getTerminalViewportInset({
+      panelOpen,
+      panelMinimized,
+      panelHeight,
+      terminalCount: terminals.length,
+    });
+    document.body.style.setProperty(
+      TERMINAL_VIEWPORT_INSET_VAR,
+      inset,
+    );
+
+    return () => {
+      document.body.style.removeProperty(
+        TERMINAL_VIEWPORT_INSET_VAR,
+      );
+    };
+  }, [
+    panelHeight,
+    panelMinimized,
+    panelOpen,
+    terminals.length,
+  ]);
+
+  return null;
+}

src/lib/__tests__/beats-page-layout.test.ts

@@ -52,6 +52,12 @@ const minimizedTerminalBarSource = src(
 const terminalViewportSource = src(
   "src/lib/terminal-viewport.ts",
 );
+const providerSource = src(
+  "src/components/providers.tsx",
+);
+const insetSyncSource = src(
+  "src/components/terminal-viewport-inset-sync.tsx",
+);
 
 describe("beats page layout: scrolling and hotkeys", () => {
   it("allows vertical scrolling in the main wrapper", () => {
@@ -69,24 +75,47 @@ describe("beats page layout: scrolling and hotkeys", () => {
     );
   });
 
-  it("derives Queue/Active list bottom inset from terminal visibility state", () => {
-    expect(pageSource).toContain(
-      'beatsView === "queues" || beatsView === "active"',
+  it("syncs terminal clearance into a shared body inset", () => {
+    expect(insetSyncSource).toContain(
+      "panelOpen",
     );
-    expect(pageSource).toContain(
+    expect(insetSyncSource).toContain(
+      "panelMinimized",
+    );
+    expect(insetSyncSource).toContain(
+      "panelHeight",
+    );
+    expect(insetSyncSource).toContain(
+      "terminalCount: terminals.length",
+    );
+    expect(insetSyncSource).toContain(
       "getTerminalViewportInset",
     );
-    expect(pageSource).toContain(
-      "style={{ paddingBottom: listViewportInset }}",
+    expect(providerSource).toContain(
+      "TerminalViewportInsetSync",
+    );
+    expect(globalStylesSource).toContain(
+      "--terminal-viewport-inset: 0px;",
+    );
+    expect(globalStylesSource).toContain(
+      "padding-bottom: var(--terminal-viewport-inset);",
+    );
+    expect(globalStylesSource).toContain(
+      "scroll-padding-bottom: var(",
     );
     expect(terminalViewportSource).toContain(
       "MINIMIZED_TERMINAL_BAR_HEIGHT_PX = 32",
     );
     expect(minimizedTerminalBarSource).toContain(
       "MINIMIZED_TERMINAL_BAR_HEIGHT_PX",
     );
+    expect(pageSource).not.toContain(
+      "style={{ paddingBottom: listViewportInset }}",
+    );
   });
+});
 
+describe("beats page layout: hotkeys and search header", () => {
   it("binds Shift+H shortcut help globally for beats screens", () => {
     expect(appHeaderHooksSource).toContain(
       "useHotkeyHelpHotkey",
@@ -157,7 +186,6 @@ describe("beats page layout: scrolling and hotkeys", () => {
       "order-3",
     );
   });
-
 });
 
 describe("beats page layout: row vertical alignment", () => {

src/lib/__tests__/terminal-scroll-layout-contract.test.ts

@@ -13,46 +13,52 @@ function src(rel: string): string {
 }
 
 const pageSource = src("src/app/beats/page.tsx");
-const minimizedBarSource = src(
-  "src/components/minimized-terminal-bar.tsx",
+const providerSource = src(
+  "src/components/providers.tsx",
+);
+const insetSyncSource = src(
+  "src/components/terminal-viewport-inset-sync.tsx",
 );
 const terminalViewportSource = src(
   "src/lib/terminal-viewport.ts",
 );
+const globalCssSource = src(
+  "src/app/globals.css",
+);
 
 describe("terminal scroll layout contract", () => {
-  it("reads the terminal viewport state needed for Queue/Active insets", () => {
-    expect(pageSource).toContain(
+  it("syncs terminal viewport state into a shared body inset", () => {
+    expect(insetSyncSource).toContain(
       "panelOpen",
     );
-    expect(pageSource).toContain(
+    expect(insetSyncSource).toContain(
       "panelMinimized",
     );
-    expect(pageSource).toContain(
+    expect(insetSyncSource).toContain(
       "panelHeight",
     );
-    expect(pageSource).toContain(
+    expect(insetSyncSource).toContain(
       "terminalCount: terminals.length",
     );
   });
 
-  it("limits the terminal inset to Queue and Active views", () => {
-    expect(pageSource).toContain(
-      'beatsView === "queues" || beatsView === "active"',
-    );
-    expect(pageSource).toContain(
-      ': "0px";',
+  it("registers the terminal viewport inset sync globally", () => {
+    expect(providerSource).toContain(
+      "TerminalViewportInsetSync",
     );
   });
 
-  it("keeps minimized bar height and list inset on the same shared constant", () => {
+  it("applies the shared terminal inset through global layout styles", () => {
     expect(terminalViewportSource).toContain(
-      "MINIMIZED_TERMINAL_BAR_HEIGHT_PX",
+      "getTerminalViewportInset",
+    );
+    expect(globalCssSource).toContain(
+      "padding-bottom: var(--terminal-viewport-inset);",
     );
-    expect(minimizedBarSource).toContain(
-      "height: `${MINIMIZED_TERMINAL_BAR_HEIGHT_PX}px`",
+    expect(globalCssSource).toContain(
+      "scroll-padding-bottom: var(",
     );
-    expect(pageSource).toContain(
+    expect(pageSource).not.toContain(
       "style={{ paddingBottom: listViewportInset }}",
     );
   });