simstudioai · waleedlatif1 · Jun 20, 2026 · Jun 19, 2026 · Jun 19, 2026 · Jun 19, 2026
diff --git a/apps/sim/app/_styles/globals.css b/apps/sim/app/_styles/globals.css
@@ -66,38 +66,11 @@
   opacity: 0;
 }
 
-html[data-sidebar-collapsed] .sidebar-container span,
-html[data-sidebar-collapsed] .sidebar-container .text-small {
-  opacity: 0;
-}
-
 .sidebar-container .sidebar-collapse-hide {
   transition: opacity 60ms ease;
 }
 
-.sidebar-container .sidebar-collapse-show {
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 120ms ease-out;
-}
-
-.sidebar-container[data-collapsed] .sidebar-collapse-hide,
-html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-hide {
-  opacity: 0;
-}
-
-.sidebar-container[data-collapsed] .sidebar-collapse-show,
-html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-show {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-remove {
-  display: none;
-}
-
-html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-btn {
-  width: 0;
+.sidebar-container[data-collapsed] .sidebar-collapse-hide {
   opacity: 0;
 }
 

diff --git a/apps/sim/app/layout.tsx b/apps/sim/app/layout.tsx
@@ -78,26 +78,36 @@ export default function RootLayout({ children }: { children: React.ReactNode })
                 // window yields a width >= MIN instead of a sub-minimum sliver.
                 var defaultSidebarWidth = 248;
                 try {
-                  var stored = localStorage.getItem('sidebar-state');
-                  if (stored) {
-                    var parsed = JSON.parse(stored);
-                    var state = parsed && parsed.state;
-                    var isCollapsed = state && state.isCollapsed;
-
-                    if (isCollapsed) {
-                      document.documentElement.style.setProperty('--sidebar-width', '51px');
-                      document.documentElement.setAttribute('data-sidebar-collapsed', '');
-                    } else {
-                      var width = state && state.sidebarWidth;
-                      var maxSidebarWidth = Math.max(248, window.innerWidth * 0.3);
-                      var finalWidth =
-                        typeof width === 'number' && isFinite(width)
-                          ? Math.min(Math.max(width, 248), maxSidebarWidth)
-                          : defaultSidebarWidth;
-                      document.documentElement.style.setProperty('--sidebar-width', finalWidth + 'px');
-                    }
+                  // Collapse comes from the cookie (independent of localStorage
+                  // parsing); the persisted width is read defensively below. Match the
+                  // value strictly so 'sidebar_collapsed=10' isn't read as collapsed.
+                  var cookieMatch = document.cookie.match(/(?:^|;\s*)sidebar_collapsed=([^;]*)/);
+                  var hasCookie = cookieMatch !== null;
+                  var collapsed = cookieMatch !== null && cookieMatch[1] === '1';
+
+                  var state = null;
+                  try {
+                    var stored = localStorage.getItem('sidebar-state');
+                    state = stored ? JSON.parse(stored).state : null;
+                  } catch (e) {}
+
+                  // One-time migration: seed the cookie from the legacy localStorage
+                  // flag for users who collapsed before the cookie existed.
+                  if (!hasCookie && state && typeof state.isCollapsed === 'boolean') {
+                    collapsed = state.isCollapsed;
+                    document.cookie = 'sidebar_collapsed=' + (collapsed ? '1' : '0') + '; path=/; max-age=31536000; samesite=lax';
+                  }
+
+                  if (collapsed) {
+                    document.documentElement.style.setProperty('--sidebar-width', '51px');
                   } else {
-                    document.documentElement.style.setProperty('--sidebar-width', defaultSidebarWidth + 'px');
+                    var width = state && state.sidebarWidth;
+                    var maxSidebarWidth = Math.max(248, window.innerWidth * 0.3);
+                    var finalWidth =
+                      typeof width === 'number' && isFinite(width)
+                        ? Math.min(Math.max(width, 248), maxSidebarWidth)
+                        : defaultSidebarWidth;
+                    document.documentElement.style.setProperty('--sidebar-width', finalWidth + 'px');
                   }
                 } catch (e) {
                   document.documentElement.style.setProperty('--sidebar-width', defaultSidebarWidth + 'px');

diff --git a/...orkspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx b/...orkspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx
@@ -371,6 +371,14 @@ interface BreadcrumbLocationPopoverProps {
   veilBoundaryRef: React.RefObject<HTMLDivElement | null>
 }
 
+/**
+ * Grace period before a hover-out dismisses the path popover. Covers the gap
+ * the pointer crosses between the trigger and the popover content (and brief
+ * jitter at their edges); re-entering either within this window cancels the
+ * close. Standard hover-intent close delay — not tied to any navigation timing.
+ */
+const POPOVER_CLOSE_DELAY_MS = 120
+
 function BreadcrumbLocationPopover({
   icon: Icon,
   breadcrumbs,
@@ -381,22 +389,44 @@ function BreadcrumbLocationPopover({
   const closeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   const rootBreadcrumb = breadcrumbs[0]
 
-  const openPopover = () => {
+  const cancelScheduledClose = () => {
     if (closeTimeoutRef.current) {
       clearTimeout(closeTimeoutRef.current)
       closeTimeoutRef.current = null
     }
+  }
+
+  /**
+   * Hover-intent open. Driven only by pointer-/keyboard-enter — never by
+   * pointer movement. This is what makes the popover dismiss cleanly on a
+   * click-to-navigate: a stationary click fires no enter event, so once
+   * {@link navigateAndClose} sets `open` false nothing re-opens it before the
+   * route swaps. (A move-driven open would re-fire under the resting cursor and
+   * flash the popover/veil back in mid-navigation.)
+   */
+  const openPopover = () => {
+    cancelScheduledClose()
     setOpen(true)
   }
 
   const scheduleClose = () => {
-    if (closeTimeoutRef.current) {
-      clearTimeout(closeTimeoutRef.current)
-    }
+    cancelScheduledClose()
     closeTimeoutRef.current = setTimeout(() => {
       setOpen(false)
       closeTimeoutRef.current = null
-    }, 120)
+    }, POPOVER_CLOSE_DELAY_MS)
+  }
+
+  /**
+   * Closes the popover up front, then runs the crumb's handler. Closing first
+   * lets the veil fade and the popover play its exit animation instead of
+   * snapping away when navigation unmounts the header.
+   */
+  const navigateAndClose = (onClick?: () => void) => {
+    if (!onClick) return
+    cancelScheduledClose()
+    setOpen(false)
+    onClick()
   }
 
   useEffect(() => {
@@ -413,15 +443,11 @@ function BreadcrumbLocationPopover({
           <button
             type='button'
             aria-label={rootBreadcrumb?.label ?? 'Path'}
-            onClick={rootBreadcrumb?.onClick}
+            onClick={() => navigateAndClose(rootBreadcrumb?.onClick)}
             onFocus={openPopover}
             onBlur={scheduleClose}
             onMouseEnter={openPopover}
             onMouseLeave={scheduleClose}
-            onMouseMove={openPopover}
-            onPointerEnter={openPopover}
-            onPointerLeave={scheduleClose}
-            onPointerMove={openPopover}
             className={cn(
               chipVariants({ flush: true }),
               'max-w-none gap-1.5 px-2 transition-colors',
@@ -457,10 +483,6 @@ function BreadcrumbLocationPopover({
           )}
           onMouseEnter={openPopover}
           onMouseLeave={scheduleClose}
-          onMouseMove={openPopover}
-          onPointerEnter={openPopover}
-          onPointerLeave={scheduleClose}
-          onPointerMove={openPopover}
         >
           <PopoverSection className='px-1.5 py-0.5 text-[var(--text-muted)] text-xs'>
             <span className='inline-flex items-center gap-1'>
@@ -474,7 +496,7 @@ function BreadcrumbLocationPopover({
                 key={`${crumb.label}-${index}`}
                 icon={crumb.icon || (index === 0 ? Icon : undefined)}
                 label={crumb.label}
-                onClick={crumb.onClick}
+                onClick={crumb.onClick ? () => navigateAndClose(crumb.onClick) : undefined}
                 active={index === breadcrumbs.length - 1}
               />
             ))}

diff --git a/apps/sim/app/workspace/[workspaceId]/components/workspace-chrome/workspace-chrome.tsx b/apps/sim/app/workspace/[workspaceId]/components/workspace-chrome/workspace-chrome.tsx
@@ -15,6 +15,8 @@ const SLIDE_TRANSITION =
 
 interface WorkspaceChromeProps {
   children: React.ReactNode
+  /** Cookie-derived collapse state from the server layout; seeds the sidebar's first render. */
+  initialSidebarCollapsed?: boolean
 }
 
 function isFullscreenPath(pathname: string | null): boolean {
@@ -41,7 +43,7 @@ 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 }: WorkspaceChromeProps) {
+export function WorkspaceChrome({ children, initialSidebarCollapsed }: WorkspaceChromeProps) {
   const pathname = usePathname()
   const isFullscreen = isFullscreenPath(pathname)
 
@@ -103,7 +105,7 @@ export function WorkspaceChrome({ children }: WorkspaceChromeProps) {
             isFullscreen && '-translate-x-full'
           )}
         >
-          <Sidebar />
+          <Sidebar initialCollapsed={initialSidebarCollapsed} />
         </div>
       </div>
       <div

diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/file-viewer.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/file-viewer.tsx
@@ -1,20 +1,14 @@
 'use client'
 
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { createLogger } from '@sim/logger'
 import { Music } from 'lucide-react'
 import dynamic from 'next/dynamic'
 import type { WorkspaceFileRecord } from '@/lib/uploads/contexts/workspace'
 import { getFileExtension } from '@/lib/uploads/utils/file-utils'
 import { useWorkspaceFileBinary, useWorkspaceFileContent } from '@/hooks/queries/workspace-files'
-import { resolveFileCategory } from './file-category'
-import type { StreamingMode } from './text-editor-state'
-import { useDocPreviewBinary } from './use-doc-preview-binary'
-
-export type { StreamingMode } from './text-editor-state'
-
 import { CsvTablePreview } from './csv-table-preview'
 import { DocxPreview } from './docx-preview'
+import { resolveFileCategory } from './file-category'
 import { ImagePreview } from './image-preview'
 import type { PdfDocumentSource } from './pdf-viewer'
 import { PptxPreview } from './pptx-preview'
@@ -27,13 +21,17 @@ import {
   resolvePreviewError,
 } from './preview-shared'
 import { TextEditor } from './text-editor'
+import { useDocPreviewBinary } from './use-doc-preview-binary'
 import { XlsxPreview } from './xlsx-preview'
 
 const PdfViewerCore = dynamic(() => import('./pdf-viewer').then((m) => m.PdfViewerCore), {
   ssr: false,
 })
 
-const logger = createLogger('FileViewer')
+const RichMarkdownEditor = dynamic(
+  () => import('./rich-markdown-editor/rich-markdown-editor').then((m) => m.RichMarkdownEditor),
+  { ssr: false, loading: () => <PreviewLoadingFrame className='flex flex-1 flex-col' /> }
+)
 
 /**
  * CSVs at or below this size load fully into the editor (editable, with an inline preview).
@@ -50,6 +48,15 @@ export function isPreviewable(file: { type: string; name: string }): boolean {
   return resolvePreviewType(file.type, file.name) !== null
 }
 
+/**
+ * Markdown files render in the inline rich editor ({@link RichMarkdownEditor}) rather than
+ * the raw Monaco editor. Toolbars use this to hide the raw/split/preview mode controls,
+ * which don't apply to the single-surface editor.
+ */
+export function isMarkdownFile(file: { type: string; name: string }): boolean {
+  return resolvePreviewType(file.type, file.name) === 'markdown'
+}
+
 /**
  * A CSV larger than {@link CSV_INLINE_EDIT_MAX_BYTES} is shown as a streamed, read-only preview —
  * the editor would OOM loading the whole file. The viewer renders {@link CsvTablePreview} for it,
@@ -84,7 +91,6 @@ interface FileViewerProps {
   onSaveStatusChange?: (status: 'idle' | 'saving' | 'saved' | 'error') => void
   saveRef?: React.MutableRefObject<(() => Promise<void>) | null>
   streamingContent?: string
-  streamingMode?: StreamingMode
   disableStreamingAutoScroll?: boolean
   previewContextKey?: string
 }
@@ -100,7 +106,6 @@ export function FileViewer({
   onSaveStatusChange,
   saveRef,
   streamingContent,
-  streamingMode,
   disableStreamingAutoScroll = false,
   previewContextKey,
 }: FileViewerProps) {
@@ -114,6 +119,14 @@ export function FileViewer({
       if (isCsvStreamOnly(file)) {
         return <UnsupportedPreview file={file} />
       }
+      // Markdown renders through the inline rich editor (non-editable) so the public share
+      // surface matches the in-app reading experience; canEdit={false} disables autosave,
+      // the bubble menu, and every other editing affordance.
+      if (isMarkdownFile(file)) {
+        return (
+          <RichMarkdownEditor key={file.id} file={file} workspaceId={workspaceId} canEdit={false} />
+        )
+      }
       return <ReadOnlyTextPreview file={file} workspaceId={workspaceId} />
     }
     // A large CSV can't be loaded whole into the editor (the browser OOMs on the full text).
@@ -122,6 +135,24 @@ export function FileViewer({
       return <CsvTablePreview key={file.id} file={file} workspaceId={workspaceId} />
     }
 
+    if (isMarkdownFile(file)) {
+      return (
+        <RichMarkdownEditor
+          key={file.id}
+          file={file}
+          workspaceId={workspaceId}
+          canEdit={canEdit}
+          autoFocus={autoFocus}
+          onDirtyChange={onDirtyChange}
+          onSaveStatusChange={onSaveStatusChange}
+          saveRef={saveRef}
+          streamingContent={streamingContent}
+          disableStreamingAutoScroll={disableStreamingAutoScroll}
+          previewContextKey={previewContextKey}
+        />
+      )
+    }
+
     return (
       <TextEditor
         file={file}
@@ -133,7 +164,6 @@ export function FileViewer({
         onSaveStatusChange={onSaveStatusChange}
         saveRef={saveRef}
         streamingContent={streamingContent}
-        streamingMode={streamingMode}
         disableStreamingAutoScroll={disableStreamingAutoScroll}
         previewContextKey={previewContextKey}
       />

diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/index.ts b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/index.ts
@@ -1,4 +1,10 @@
 export { resolveFileCategory } from './file-category'
 export type { PreviewMode } from './file-viewer'
-export { FileViewer, isCsvStreamOnly, isPreviewable, isTextEditable } from './file-viewer'
+export {
+  FileViewer,
+  isCsvStreamOnly,
+  isMarkdownFile,
+  isPreviewable,
+  isTextEditable,
+} from './file-viewer'
 export { PreviewPanel, RICH_PREVIEWABLE_EXTENSIONS, resolvePreviewType } from './preview-panel'