fix(sidebar): drive collapsed width from server-rendered attribute

A collapsed rail painted at the expanded width then animated to 51px on
refresh: structure came from the cookie (server) while width came from
independent cookie reads (blocking script + store), so any disagreement left
the collapsed structure at the persisted expanded width until the store
corrected it.

Unify collapse into one derivation in WorkspaceChrome and drive the collapsed
width from a server-rendered data-collapsed attribute via CSS
(.sidebar-shell-outer[data-collapsed]) — the same cookie source as the
structure, so width can never diverge from it. This is shadcn's documented
pattern (data-attribute selectors over JS ternaries for collapsed dimensions).

Also removes the redundant migratedCollapsed reconciliation (the store already
seeds from the migrated cookie and hasHydrated flips in the same pre-paint
effect) and the now-unused per-Sidebar derivation; Sidebar takes isCollapsed
as a prop.

Author: waleedlatif1

apps/sim/app/_styles/globals.css

@@ -55,6 +55,17 @@
   transition: width 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
 }
 
+/**
+ * Collapsed width is driven by the server-rendered `data-collapsed` attribute —
+ * the same cookie source as the collapsed structure — so the rail can never paint
+ * at the expanded width and then snap narrow. Overrides `--sidebar-width` for the
+ * shell subtree (outer, inner, and the aside cascade from it). Must equal
+ * SIDEBAR_WIDTH.COLLAPSED in stores/constants.ts.
+ */
+.sidebar-shell-outer[data-collapsed] {
+  --sidebar-width: 51px;
+}
+
 .sidebar-container span,
 .sidebar-container .text-small {
   transition: opacity 120ms ease;

apps/sim/app/workspace/[workspaceId]/components/workspace-chrome/workspace-chrome.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect } from 'react'
+import { useEffect, useLayoutEffect } from 'react'
 import { usePathname } from 'next/navigation'
 import { cn } from '@/lib/core/utils/cn'
 import { Sidebar } from '@/app/workspace/[workspaceId]/w/components/sidebar/sidebar'
@@ -43,15 +43,34 @@ function isFullscreenPath(pathname: string | null): boolean {
  * On a direct load of a fullscreen route the wrapper mounts already collapsed,
  * so no slide plays (CSS transitions don't run on mount).
  */
-export function WorkspaceChrome({ children, initialSidebarCollapsed }: WorkspaceChromeProps) {
+export function WorkspaceChrome({
+  children,
+  initialSidebarCollapsed = false,
+}: WorkspaceChromeProps) {
   const pathname = usePathname()
   const isFullscreen = isFullscreenPath(pathname)
 
   const setOrigin = useFullscreenOriginStore((s) => s.setOrigin)
 
+  const storeIsCollapsed = useSidebarStore((s) => s.isCollapsed)
   const hasHydrated = useSidebarStore((s) => s._hasHydrated)
   const syncSidebarWidth = useSidebarStore((s) => s.syncWidth)
 
+  /**
+   * Single source of collapse for the whole chrome, driving the rail's structure,
+   * labels, and width. The server renders from the `sidebar_collapsed` cookie
+   * (`initialSidebarCollapsed`) and the store seeds from the same cookie — after
+   * the pre-paint script migrates any legacy `localStorage` flag — so prop and
+   * store agree. The prop is used until the store hydrates (keeping the first
+   * client render identical to the server), then the store takes over.
+   */
+  const isCollapsed = hasHydrated ? storeIsCollapsed : initialSidebarCollapsed
+
+  // Hydrate the persisted width before paint (collapse comes from the cookie/prop).
+  useLayoutEffect(() => {
+    void useSidebarStore.persist.rehydrate()
+  }, [])
+
   // Remember the last non-fullscreen page so a fullscreen route's Back control
   // can return there, deterministically and for any trigger.
   useEffect(() => {
@@ -95,6 +114,7 @@ export function WorkspaceChrome({ children, initialSidebarCollapsed }: Workspace
           SLIDE_TRANSITION,
           isFullscreen ? 'w-0' : 'w-[var(--sidebar-width)]'
         )}
+        data-collapsed={isCollapsed || undefined}
         aria-hidden={isFullscreen || undefined}
         suppressHydrationWarning
       >
@@ -105,7 +125,7 @@ export function WorkspaceChrome({ children, initialSidebarCollapsed }: Workspace
             isFullscreen && '-translate-x-full'
           )}
         >
-          <Sidebar initialCollapsed={initialSidebarCollapsed} />
+          <Sidebar isCollapsed={isCollapsed} />
         </div>
       </div>
       <div

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx

@@ -109,7 +109,7 @@ import { SIDEBAR_WIDTH } from '@/stores/constants'
 import { useFolderStore } from '@/stores/folders/store'
 import { useSearchModalStore } from '@/stores/modals/search/store'
 import { useProvidersStore } from '@/stores/providers'
-import { readCollapsedCookie, useSidebarStore } from '@/stores/sidebar/store'
+import { useSidebarStore } from '@/stores/sidebar/store'
 
 const logger = createLogger('Sidebar')
 
@@ -349,16 +349,14 @@ const HIDDEN_STYLE = { display: 'none' } as const
  */
 interface SidebarProps {
   /**
-   * Collapse state read from the `sidebar_collapsed` cookie in the server
-   * layout. Seeds the first (pre-hydration) render so the server emits the
-   * correct collapsed/expanded structure — without it the server can't read
-   * `localStorage` and always renders the expanded tree, which then paints
-   * skeletons and pinned-chat icons inside the 51px rail until React flips it.
+   * Authoritative collapse state, derived once in {@link WorkspaceChrome} from the
+   * `sidebar_collapsed` cookie (server prop → store after hydration) and passed in
+   * so the rail's structure, labels, and width all read a single source.
    */
-  initialCollapsed?: boolean
+  isCollapsed: boolean
 }
 
-export const Sidebar = memo(function Sidebar({ initialCollapsed = false }: SidebarProps) {
+export const Sidebar = memo(function Sidebar({ isCollapsed }: SidebarProps) {
   const params = useParams()
   const workspaceId = params.workspaceId as string
   const workflowId = params.workflowId as string | undefined
@@ -389,37 +387,9 @@ export const Sidebar = memo(function Sidebar({ initialCollapsed = false }: Sideb
   }, [initializeSearchData, filterBlocks, providerModelSignature])
 
   const setSidebarWidth = useSidebarStore((state) => state.setSidebarWidth)
-  const storeIsCollapsed = useSidebarStore((state) => state.isCollapsed)
-  const hasHydrated = useSidebarStore((state) => state._hasHydrated)
   const toggleCollapsed = useSidebarStore((state) => state.toggleCollapsed)
   const isOnWorkflowPage = !!workflowId
 
-  /**
-   * The server renders from the `sidebar_collapsed` cookie (via `initialCollapsed`)
-   * and the client store seeds from the same cookie, so both agree on the first
-   * paint. The prop is read until the store reports hydration, after which the
-   * store takes over.
-   *
-   * A legacy user whose collapse lived only in `localStorage` has no cookie at SSR
-   * (so `initialCollapsed` is false), but the pre-paint script migrates them to a
-   * cookie. Reconcile to that cookie synchronously before paint — the first render
-   * still matches the server, so there's no hydration mismatch and no narrow-rail flash.
-   */
-  const [migratedCollapsed, setMigratedCollapsed] = useState<boolean | null>(null)
-  useLayoutEffect(() => {
-    const cookieCollapsed = readCollapsedCookie()
-    if (cookieCollapsed !== initialCollapsed) setMigratedCollapsed(cookieCollapsed)
-  }, [initialCollapsed])
-  const isCollapsed = hasHydrated ? storeIsCollapsed : (migratedCollapsed ?? initialCollapsed)
-
-  /**
-   * Hydrates the persisted width before paint (collapse already came from the
-   * cookie) so any width-dependent layout settles in the same commit.
-   */
-  useLayoutEffect(() => {
-    void useSidebarStore.persist.rehydrate()
-  }, [])
-
   const isCollapsedRef = useRef(isCollapsed)
   useLayoutEffect(() => {
     isCollapsedRef.current = isCollapsed