Stabilize sidebar rendering and add saved layouts

apps/web/src/hooks/useLayoutActions.ts

@@ -137,29 +137,28 @@ export function useLayoutActions(): UseLayoutActionsResult {
       const diffViewerOpen = diffState.isOpen;
       const simulationOpen = useSimulationViewerStore.getState().isOpen;
       const previewState = usePreviewStateStore.getState();
-      const previewOpen = projectId
-        ? (previewState.openByProjectId[projectId] ?? false)
-        : false;
+      const previewOpen = projectId ? (previewState.openByProjectId[projectId] ?? false) : false;
 
       const terminalStoreState = useTerminalStateStore.getState();
       const threadTerminal = threadId
         ? selectThreadTerminalState(terminalStoreState.terminalStateByThreadId, threadId)
         : null;
 
-      const previewDock = projectId
-        ? (previewState.dockByProjectId[projectId] ?? null)
-        : null;
-      const previewSize = projectId
-        ? (previewState.sizeByProjectId[projectId] ?? null)
-        : null;
+      const previewDock = projectId ? (previewState.dockByProjectId[projectId] ?? null) : null;
+      const previewSize = projectId ? (previewState.sizeByProjectId[projectId] ?? null) : null;
 
       const now = Date.now();
       return {
         id: generateLayoutId(),
         name: name.trim().slice(0, 128) || "Untitled Layout",
         createdAt: now,
         updatedAt: now,
-        activePanel: resolveActivePanel(codeViewerOpen, diffViewerOpen, previewOpen, simulationOpen),
+        activePanel: resolveActivePanel(
+          codeViewerOpen,
+          diffViewerOpen,
+          previewOpen,
+          simulationOpen,
+        ),
         terminalOpen: threadTerminal?.terminalOpen ?? false,
         terminalHeight: threadTerminal?.terminalHeight ?? null,
         sidebarWidths: readSidebarWidths(),

apps/web/src/layoutStore.ts

@@ -51,7 +51,13 @@ export interface SavedLayout {
 const LAYOUT_STORAGE_KEY = "okcode:saved-layouts:v1";
 const MAX_SAVED_LAYOUTS = 32;
 
-const VALID_PANELS = new Set<string>(["none", "code-viewer", "diff-viewer", "preview", "simulation"]);
+const VALID_PANELS = new Set<string>([
+  "none",
+  "code-viewer",
+  "diff-viewer",
+  "preview",
+  "simulation",
+]);
 const VALID_DOCKS = new Set<string>(["left", "right", "top", "bottom"]);
 
 // ─── Validation helpers ─────────────────────────────────────────────
@@ -100,8 +106,10 @@ function normalizeLayout(raw: unknown): SavedLayout | null {
   return {
     id: obj.id.trim(),
     name: obj.name.trim().slice(0, 128),
-    createdAt: typeof obj.createdAt === "number" && Number.isFinite(obj.createdAt) ? obj.createdAt : now,
-    updatedAt: typeof obj.updatedAt === "number" && Number.isFinite(obj.updatedAt) ? obj.updatedAt : now,
+    createdAt:
+      typeof obj.createdAt === "number" && Number.isFinite(obj.createdAt) ? obj.createdAt : now,
+    updatedAt:
+      typeof obj.updatedAt === "number" && Number.isFinite(obj.updatedAt) ? obj.updatedAt : now,
     activePanel: isValidPanel(obj.activePanel) ? obj.activePanel : "none",
     terminalOpen: typeof obj.terminalOpen === "boolean" ? obj.terminalOpen : false,
     terminalHeight: isFinitePositiveOrNull(obj.terminalHeight) ? obj.terminalHeight : null,
@@ -254,7 +262,10 @@ export const useLayoutStore = create<LayoutStoreState>((set) => ({
       const nextLayouts = state.savedLayouts.filter((l) => l.id !== id);
       if (nextLayouts.length === state.savedLayouts.length) return state;
       const nextActiveId = state.activeLayoutId === id ? null : state.activeLayoutId;
-      const next: PersistedLayoutState = { savedLayouts: nextLayouts, activeLayoutId: nextActiveId };
+      const next: PersistedLayoutState = {
+        savedLayouts: nextLayouts,
+        activeLayoutId: nextActiveId,
+      };
       persistState(next);
       return next;
     });

apps/web/src/routes/_chat.test.ts

@@ -0,0 +1,11 @@
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { describe, expect, it } from "vitest";
+
+describe("chat route sidebar chrome", () => {
+  it("keeps the left sidebar off the backdrop blur path", () => {
+    const src = readFileSync(resolve(import.meta.dirname, "./_chat.tsx"), "utf8");
+
+    expect(src).not.toContain("backdrop-blur-sm");
+  });
+});

apps/web/src/routes/_chat.tsx

@@ -255,7 +255,9 @@ function ChatRouteLayout() {
           <Sidebar
             side="left"
             collapsible="offcanvas"
-            className="border-r-2 border-border/60 bg-card/80 text-foreground backdrop-blur-sm shadow-[2px_0_12px_-4px_rgba(0,0,0,0.08)] dark:border-border/40 dark:bg-card/60 dark:shadow-[2px_0_16px_-4px_rgba(0,0,0,0.3)]"
+            // Keep the primary sidebar on a simpler paint path. The blur layer is
+            // visually nice, but it is also the most likely source of display-only shimmer.
+            className="border-r-2 border-border/60 bg-card/80 text-foreground shadow-[2px_0_12px_-4px_rgba(0,0,0,0.08)] dark:border-border/40 dark:bg-card/60 dark:shadow-[2px_0_16px_-4px_rgba(0,0,0,0.3)]"
             style={
               {
                 "--sidebar-background-opacity": settings.sidebarOpacity,