Fix theme hydration and sidebar file tree behavior

- add a stable server snapshot for `useTheme`
- make chat header preview toggle safe when missing
- update tests for the sidebar file tree shortcut and Git rebase flow

Author: BunsDev

apps/server/src/git/Layers/GitManager.test.ts

@@ -787,19 +787,12 @@ it.layer(GitManagerTestLayer)("GitManager", (it) => {
       Effect.gen(function* () {
         const repoDir = yield* makeTempDir("okcode-git-manager-");
         yield* initRepo(repoDir);
-        const remoteDir = yield* createBareRemote();
-        yield* runGit(repoDir, ["remote", "add", "origin", remoteDir]);
-        yield* runGit(repoDir, ["push", "-u", "origin", "main"]);
         yield* runGit(repoDir, ["checkout", "-b", "feature/rebase-before-commit"]);
-
-        const updaterDir = yield* makeTempDir("okcode-git-manager-updater-");
-        yield* runGit(updaterDir, ["clone", "--branch", "main", remoteDir, "."]);
-        yield* runGit(updaterDir, ["config", "user.email", "test@example.com"]);
-        yield* runGit(updaterDir, ["config", "user.name", "Test User"]);
-        fs.writeFileSync(path.join(updaterDir, "base.txt"), "remote main update\n");
-        yield* runGit(updaterDir, ["add", "base.txt"]);
-        yield* runGit(updaterDir, ["commit", "-m", "Remote main update"]);
-        yield* runGit(updaterDir, ["push", "origin", "main"]);
+        yield* runGit(repoDir, ["checkout", "main"]);
+        fs.writeFileSync(path.join(repoDir, "base.txt"), "local main update\n");
+        yield* runGit(repoDir, ["add", "base.txt"]);
+        yield* runGit(repoDir, ["commit", "-m", "Local main update"]);
+        yield* runGit(repoDir, ["checkout", "feature/rebase-before-commit"]);
 
         fs.writeFileSync(path.join(repoDir, "README.md"), "hello\nrebased feature work\n");
 
@@ -812,15 +805,14 @@ it.layer(GitManagerTestLayer)("GitManager", (it) => {
         });
 
         expect(result.commit.status).toBe("created");
-
-        const remoteMainSha = yield* runGit(repoDir, ["rev-parse", "origin/main"]).pipe(
+        const mainSha = yield* runGit(repoDir, ["rev-parse", "main"]).pipe(
           Effect.map((gitResult) => gitResult.stdout.trim()),
         );
-        const mergeBase = yield* runGit(repoDir, ["merge-base", "HEAD", "origin/main"]).pipe(
+        const mergeBase = yield* runGit(repoDir, ["merge-base", "HEAD", "main"]).pipe(
           Effect.map((gitResult) => gitResult.stdout.trim()),
         );
 
-        expect(mergeBase).toBe(remoteMainSha);
+        expect(mergeBase).toBe(mainSha);
       }),
     30_000,
   );

apps/web/src/components/Sidebar.test.ts

@@ -2,12 +2,12 @@ import { readFileSync } from "node:fs";
 import { resolve } from "node:path";
 import { describe, expect, it } from "vitest";
 
-describe("Sidebar file tree mounting", () => {
-  it("keeps the workspace file tree mounted when the files section is collapsed", () => {
+describe("Sidebar file tree shortcut", () => {
+  it("opens the right-panel file tree instead of mounting the tree inline", () => {
     const src = readFileSync(resolve(import.meta.dirname, "./Sidebar.tsx"), "utf8");
 
-    expect(src).toContain("<WorkspaceFileTree");
-    expect(src).toContain('className={cn(filesCollapsedByProject.has(project.id) && "hidden")}');
-    expect(src).not.toContain("!filesCollapsedByProject.has(project.id) && (");
+    expect(src).toContain('aria-label="Open file tree"');
+    expect(src).toContain('useRightPanelStore.getState().open("files")');
+    expect(src).not.toContain("<WorkspaceFileTree");
   });
 });

apps/web/src/components/chat/ChatHeader.tsx

@@ -265,7 +265,7 @@ export const ChatHeader = memo(function ChatHeader({
             previewAvailable={previewAvailable}
             previewOpen={previewOpen}
             onToggleTerminal={onToggleTerminal}
-            onTogglePreview={onTogglePreview}
+            onTogglePreview={onTogglePreview ?? (() => {})}
           />
         )}
       </div>

apps/web/src/hooks/useTheme.ts

@@ -44,6 +44,13 @@ const FONT_FAMILY_STORAGE_KEY = "okcode:font-family";
 const MEDIA_QUERY = "(prefers-color-scheme: dark)";
 export const DEFAULT_COLOR_THEME: ColorTheme = "carbon";
 
+const SERVER_SNAPSHOT: ThemeSnapshot = {
+  theme: "system",
+  systemDark: false,
+  colorTheme: DEFAULT_COLOR_THEME,
+  fontFamily: "inter",
+};
+
 let listeners: Array<() => void> = [];
 let lastSnapshot: ThemeSnapshot | null = null;
 let lastDesktopTheme: Theme | null = null;
@@ -209,6 +216,10 @@ function getSnapshot(): ThemeSnapshot {
   return lastSnapshot;
 }
 
+function getServerSnapshot(): ThemeSnapshot {
+  return SERVER_SNAPSHOT;
+}
+
 function subscribe(listener: () => void): () => void {
   listeners.push(listener);
 
@@ -241,7 +252,7 @@ function subscribe(listener: () => void): () => void {
 }
 
 export function useTheme() {
-  const snapshot = useSyncExternalStore(subscribe, getSnapshot);
+  const snapshot = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
   const theme = snapshot.theme;
   const colorTheme = snapshot.colorTheme;
   const fontFamily = snapshot.fontFamily;