Harden theme and terminal state storage for non-browser envs

- guard theme hook against missing window/document/localStorage and add server snapshot
- add in-memory fallback storage for persisted terminal state when localStorage is unavailable
- simplify brittle platform/global test setup to match new runtime-safe behavior

Author: shivamhwp

apps/server/src/terminal/Layers/Manager.test.ts

@@ -580,20 +580,9 @@ describe("TerminalManager", () => {
     expect(snapshot.status).toBe("running");
     expect(ptyAdapter.spawnInputs.length).toBeGreaterThanOrEqual(2);
     expect(ptyAdapter.spawnInputs[0]?.shell).toBe("/definitely/missing-shell");
-
-    if (process.platform === "win32") {
-      expect(
-        ptyAdapter.spawnInputs.some(
-          (input) => input.shell === "cmd.exe" || input.shell === "powershell.exe",
-        ),
-      ).toBe(true);
-    } else {
-      expect(
-        ptyAdapter.spawnInputs.some((input) =>
-          ["/bin/zsh", "/bin/bash", "/bin/sh", "zsh", "bash", "sh"].includes(input.shell),
-        ),
-      ).toBe(true);
-    }
+    expect(
+      ptyAdapter.spawnInputs.slice(1).some((input) => input.shell !== "/definitely/missing-shell"),
+    ).toBe(true);
 
     manager.dispose();
   });

apps/web/src/components/chat/MessagesTimeline.test.tsx

@@ -1,46 +1,6 @@
 import { MessageId } from "@t3tools/contracts";
 import { renderToStaticMarkup } from "react-dom/server";
-import { beforeAll, describe, expect, it, vi } from "vitest";
-
-function matchMedia() {
-  return {
-    matches: false,
-    addEventListener: () => {},
-    removeEventListener: () => {},
-  };
-}
-
-beforeAll(() => {
-  const classList = {
-    add: () => {},
-    remove: () => {},
-    toggle: () => {},
-    contains: () => false,
-  };
-
-  vi.stubGlobal("localStorage", {
-    getItem: () => null,
-    setItem: () => {},
-    removeItem: () => {},
-    clear: () => {},
-  });
-  vi.stubGlobal("window", {
-    matchMedia,
-    addEventListener: () => {},
-    removeEventListener: () => {},
-    desktopBridge: undefined,
-  });
-  vi.stubGlobal("document", {
-    documentElement: {
-      classList,
-      offsetHeight: 0,
-    },
-  });
-  vi.stubGlobal("requestAnimationFrame", (callback: FrameRequestCallback) => {
-    callback(0);
-    return 0;
-  });
-});
+import { describe, expect, it } from "vitest";
 
 describe("MessagesTimeline", () => {
   it("renders inline terminal labels with the composer chip UI", async () => {

apps/web/src/hooks/useTheme.ts

@@ -8,25 +8,36 @@ type ThemeSnapshot = {
 
 const STORAGE_KEY = "t3code:theme";
 const MEDIA_QUERY = "(prefers-color-scheme: dark)";
+const DEFAULT_THEME_SNAPSHOT: ThemeSnapshot = {
+  theme: "system",
+  systemDark: false,
+};
 
 let listeners: Array<() => void> = [];
 let lastSnapshot: ThemeSnapshot | null = null;
 let lastDesktopTheme: Theme | null = null;
+
 function emitChange() {
   for (const listener of listeners) listener();
 }
 
-function getSystemDark(): boolean {
-  return window.matchMedia(MEDIA_QUERY).matches;
+function hasThemeStorage() {
+  return typeof window !== "undefined" && typeof localStorage !== "undefined";
+}
+
+function getSystemDark() {
+  return typeof window !== "undefined" && window.matchMedia(MEDIA_QUERY).matches;
 }
 
 function getStored(): Theme {
+  if (!hasThemeStorage()) return DEFAULT_THEME_SNAPSHOT.theme;
   const raw = localStorage.getItem(STORAGE_KEY);
   if (raw === "light" || raw === "dark" || raw === "system") return raw;
-  return "system";
+  return DEFAULT_THEME_SNAPSHOT.theme;
 }
 
 function applyTheme(theme: Theme, suppressTransitions = false) {
+  if (typeof document === "undefined" || typeof window === "undefined") return;
   if (suppressTransitions) {
     document.documentElement.classList.add("no-transitions");
   }
@@ -44,6 +55,7 @@ function applyTheme(theme: Theme, suppressTransitions = false) {
 }
 
 function syncDesktopTheme(theme: Theme) {
+  if (typeof window === "undefined") return;
   const bridge = window.desktopBridge;
   if (!bridge || lastDesktopTheme === theme) {
     return;
@@ -58,9 +70,12 @@ function syncDesktopTheme(theme: Theme) {
 }
 
 // Apply immediately on module load to prevent flash
-applyTheme(getStored());
+if (typeof document !== "undefined" && hasThemeStorage()) {
+  applyTheme(getStored());
+}
 
 function getSnapshot(): ThemeSnapshot {
+  if (!hasThemeStorage()) return DEFAULT_THEME_SNAPSHOT;
   const theme = getStored();
   const systemDark = theme === "system" ? getSystemDark() : false;
 
@@ -72,7 +87,12 @@ function getSnapshot(): ThemeSnapshot {
   return lastSnapshot;
 }
 
+function getServerSnapshot() {
+  return DEFAULT_THEME_SNAPSHOT;
+}
+
 function subscribe(listener: () => void): () => void {
+  if (typeof window === "undefined") return () => {};
   listeners.push(listener);
 
   // Listen for system preference changes
@@ -100,13 +120,14 @@ function subscribe(listener: () => void): () => void {
 }
 
 export function useTheme() {
-  const snapshot = useSyncExternalStore(subscribe, getSnapshot);
+  const snapshot = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
   const theme = snapshot.theme;
 
   const resolvedTheme: "light" | "dark" =
     theme === "system" ? (snapshot.systemDark ? "dark" : "light") : theme;
 
   const setTheme = useCallback((next: Theme) => {
+    if (!hasThemeStorage()) return;
     localStorage.setItem(STORAGE_KEY, next);
     applyTheme(next, true);
     emitChange();

apps/web/src/terminalStateStore.test.ts

@@ -4,11 +4,14 @@ import { beforeEach, describe, expect, it } from "vitest";
 import { selectThreadTerminalState, useTerminalStateStore } from "./terminalStateStore";
 
 const THREAD_ID = ThreadId.makeUnsafe("thread-1");
+const TERMINAL_STATE_STORAGE_KEY = "t3code:terminal-state:v1";
 
 describe("terminalStateStore actions", () => {
   beforeEach(() => {
-    if (typeof localStorage !== "undefined") {
+    if (typeof localStorage?.clear === "function") {
       localStorage.clear();
+    } else if (typeof localStorage?.removeItem === "function") {
+      localStorage.removeItem(TERMINAL_STATE_STORAGE_KEY);
     }
     useTerminalStateStore.setState({ terminalStateByThreadId: {} });
   });

apps/web/src/terminalStateStore.ts

@@ -7,7 +7,7 @@
 
 import type { ThreadId } from "@t3tools/contracts";
 import { create } from "zustand";
-import { createJSONStorage, persist } from "zustand/middleware";
+import { createJSONStorage, persist, type StateStorage } from "zustand/middleware";
 import {
   DEFAULT_THREAD_TERMINAL_HEIGHT,
   DEFAULT_THREAD_TERMINAL_ID,
@@ -27,6 +27,34 @@ interface ThreadTerminalState {
 
 const TERMINAL_STATE_STORAGE_KEY = "t3code:terminal-state:v1";
 
+function createMemoryStorage(): StateStorage {
+  const store = new Map<string, string>();
+  return {
+    getItem: (name) => store.get(name) ?? null,
+    setItem: (name, value) => {
+      store.set(name, value);
+    },
+    removeItem: (name) => {
+      store.delete(name);
+    },
+  };
+}
+
+function createTerminalStateStorage() {
+  if (
+    typeof localStorage !== "undefined" &&
+    typeof localStorage.getItem === "function" &&
+    typeof localStorage.setItem === "function" &&
+    typeof localStorage.removeItem === "function"
+  ) {
+    return localStorage;
+  }
+
+  return createMemoryStorage();
+}
+
+const terminalStateStorage = createTerminalStateStorage();
+
 function normalizeTerminalIds(terminalIds: string[]): string[] {
   const ids = [...new Set(terminalIds.map((id) => id.trim()).filter((id) => id.length > 0))];
   return ids.length > 0 ? ids : [DEFAULT_THREAD_TERMINAL_ID];
@@ -542,7 +570,7 @@ export const useTerminalStateStore = create<TerminalStateStoreState>()(
     {
       name: TERMINAL_STATE_STORAGE_KEY,
       version: 1,
-      storage: createJSONStorage(() => localStorage),
+      storage: createJSONStorage(() => terminalStateStorage),
       partialize: (state) => ({
         terminalStateByThreadId: state.terminalStateByThreadId,
       }),