Make terminal scrollback configurable (#1021)

* Make terminal scrollback configurable

* Fix terminal scrollback lint violation

* Fix terminal runtime test environment split

* Fix terminal scrollback updates

---------

Co-authored-by: Mohamed Boudra <boudra.moha@gmail.com>

packages/app/src/components/terminal-emulator.tsx

@@ -116,6 +116,7 @@ interface TerminalEmulatorProps {
   streamKey: string;
   testId?: string;
   xtermTheme?: ITheme;
+  scrollbackLines: number;
   swipeGesturesEnabled?: boolean;
   onSwipeLeft?: () => void;
   onSwipeRight?: () => void;
@@ -188,6 +189,7 @@ export default function TerminalEmulator({
     foreground: "#e6e6e6",
     cursor: "#e6e6e6",
   },
+  scrollbackLines,
   swipeGesturesEnabled = false,
   onSwipeLeft,
   onSwipeRight,
@@ -206,6 +208,8 @@ export default function TerminalEmulator({
   const hostRef = useRef<HTMLDivElement | null>(null);
   const runtimeRef = useRef<TerminalEmulatorRuntime | null>(null);
   const mountedThemeRef = useRef<ITheme>(xtermTheme);
+  const scrollbackLinesRef = useRef(scrollbackLines);
+  scrollbackLinesRef.current = scrollbackLines;
   const viewportRef = useRef<HTMLElement | null>(null);
   const dragStartOffsetRef = useRef(0);
   const dragStartClientYRef = useRef(0);
@@ -289,6 +293,10 @@ export default function TerminalEmulator({
     runtimeRef.current?.setTheme({ theme: nextTheme });
   }, [themeKey]);
 
+  useEffect(() => {
+    runtimeRef.current?.setScrollback({ lines: scrollbackLines });
+  }, [scrollbackLines]);
+
   useEffect(() => {
     ensureTerminalScrollbarStyle();
   }, []);
@@ -429,6 +437,7 @@ export default function TerminalEmulator({
       root,
       host,
       initialSnapshot: initialSnapshotRef.current,
+      scrollback: scrollbackLinesRef.current,
       theme: mountedThemeRef.current,
     });
     onRendererReadyChangeRef.current?.({ streamKey, isReady: true });

packages/app/src/components/terminal-pane.tsx

@@ -35,6 +35,7 @@ import {
   shouldShowTerminalLoadingOverlay,
   type TerminalRendererReadyChange,
 } from "@/utils/terminal-renderer-readiness";
+import { useAppSettings } from "@/hooks/use-settings";
 
 interface TerminalPaneProps {
   serverId: string;
@@ -157,6 +158,7 @@ export function TerminalPane({
 }: TerminalPaneProps) {
   const isAppVisible = useAppVisible();
   const { theme } = useUnistyles();
+  const { settings } = useAppSettings();
   const xtermTheme = useMemo(() => toXtermTheme(theme.colors.terminal), [theme]);
   const isMobile = useIsCompactFormFactor();
   const mobileView = usePanelStore((state) => state.mobileView);
@@ -681,6 +683,7 @@ export function TerminalPane({
               streamKey={terminalStreamKey}
               testId="terminal-surface"
               xtermTheme={xtermTheme}
+              scrollbackLines={settings.terminalScrollbackLines}
               swipeGesturesEnabled={swipeGesturesEnabled}
               initialSnapshot={initialSnapshot}
               onRendererReadyChange={handleRendererReadyChange}