improvement(rich-md-editor): streaming, performance, minor bugfixes (#5148)

* fix(files): isAgentEditing flag passthrough

* use smooth streaming hook

* improve performance

* remove comments

* improvement(rich-md-editor): reveal bubble after drag-select, keep it on-screen for tall selections, restyle task-list checkbox

* improvement(share-modal): use Send icon in the share file header

* improvement(rich-md-editor): pin the formatting toolbar so it stays put while scrolling

* improvement(rich-md-editor): show the formatting toolbar in the mothership file view

* 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.

* feat(rich-md-editor): let focused editors claim shortcuts from the global command registry

* refactor(rich-md-editor): freeze the formatting toolbar on scroll and extract the shared toolbar button

* feat(rich-md-editor): add a link hover card and claim Cmd+K for the link shortcut

* fix(rich-md-editor): portal the toolbar + link card to body so a transformed ancestor can't offset them; align fade with the tooltip

* fix(rich-md-editor): hide the code line-wrap toggle in read-only

* fix(sidebar): pass isCollapsed to Sidebar in the error fallback

The error UI renders Sidebar outside WorkspaceChrome, so it has no derived
collapse state; feed it the same source of truth via readCollapsedCookie() now
that isCollapsed is a required prop.

* address greptile comment

* docs(rich-md-editor): note why table cells escape only pipes (renderChildren pre-escapes backslashes)

* fix(rich-md-editor): lock the editor immediately when an agent edit starts, even if the body is unchanged

---------

Co-authored-by: waleed <walif6@gmail.com>

Author: icecrasher321

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]/files/components/file-viewer/file-viewer.tsx

@@ -91,6 +91,7 @@ interface FileViewerProps {
   onSaveStatusChange?: (status: 'idle' | 'saving' | 'saved' | 'error') => void
   saveRef?: React.MutableRefObject<(() => Promise<void>) | null>
   streamingContent?: string
+  isAgentEditing?: boolean
   disableStreamingAutoScroll?: boolean
   previewContextKey?: string
 }
@@ -106,6 +107,7 @@ export function FileViewer({
   onSaveStatusChange,
   saveRef,
   streamingContent,
+  isAgentEditing,
   disableStreamingAutoScroll = false,
   previewContextKey,
 }: FileViewerProps) {
@@ -147,6 +149,7 @@ export function FileViewer({
           onSaveStatusChange={onSaveStatusChange}
           saveRef={saveRef}
           streamingContent={streamingContent}
+          isAgentEditing={isAgentEditing}
           disableStreamingAutoScroll={disableStreamingAutoScroll}
           previewContextKey={previewContextKey}
         />
@@ -164,6 +167,7 @@ export function FileViewer({
         onSaveStatusChange={onSaveStatusChange}
         saveRef={saveRef}
         streamingContent={streamingContent}
+        isAgentEditing={isAgentEditing}
         disableStreamingAutoScroll={disableStreamingAutoScroll}
         previewContextKey={previewContextKey}
       />

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/code-block.tsx

@@ -179,7 +179,7 @@ function CodeBlockView({ node, updateAttributes, editor, getPos }: ReactNodeView
               {label}
             </span>
           ))}
-        {!isMermaid && (
+        {!isMermaid && editor.isEditable && (
           <button
             type='button'
             aria-label='Toggle line wrap'

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/extensions.ts

@@ -42,6 +42,9 @@ const PipeSafeTable = Table.extend({
   renderMarkdown: (node: JSONContent, h: MarkdownRendererHelpers) =>
     renderTableToMarkdown(node, {
       ...h,
+      // `renderChildren` already markdown-escapes backslashes; here we only add the table-specific
+      // pipe escaping on top. (CodeQL flags the missing backslash escape, but escaping it again would
+      // double-escape and break round-trip idempotency — see the table round-trip tests.)
       renderChildren: (nodes, separator) =>
         h.renderChildren(nodes, separator).replace(/\|/g, '\\|'),
     })

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/bubble-menu.tsx

@@ -1,4 +1,6 @@
-import { useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { posToDOMRect } from '@tiptap/core'
+import { PluginKey } from '@tiptap/pm/state'
 import type { Editor } from '@tiptap/react'
 import { useEditorState } from '@tiptap/react'
 import { BubbleMenu } from '@tiptap/react/menus'
@@ -13,56 +15,35 @@ import {
   List,
   ListChecks,
   ListOrdered,
-  type LucideIcon,
   Strikethrough,
   TextQuote,
   Unlink,
 } from 'lucide-react'
-import { Tooltip } from '@/components/emcn'
-import { cn } from '@/lib/core/utils/cn'
 import { normalizeLinkHref } from '../markdown-fidelity'
+import { ToolbarButton, ToolbarDivider } from './toolbar-button'
 
-interface ToolbarButtonProps {
-  icon: LucideIcon
-  label: string
-  shortcut?: string
-  isActive: boolean
-  onClick: () => void
+/**
+ * Whether the formatting toolbar may show for the given range: the editor is editable, the range
+ * isn't inside a code block, and it covers some non-whitespace text. Single source of truth shared by
+ * `shouldShow` and the pointer-release reveal so the two can't drift apart.
+ */
+function hasFormattableSelection(editor: Editor, from: number, to: number): boolean {
+  if (!editor.isEditable || editor.isActive('codeBlock')) return false
+  return editor.state.doc.textBetween(from, to, ' ').trim().length > 0
 }
 
-function ToolbarButton({ icon: Icon, label, shortcut, isActive, onClick }: ToolbarButtonProps) {
-  return (
-    <Tooltip.Root>
-      <Tooltip.Trigger asChild>
-        <button
-          type='button'
-          aria-label={label}
-          aria-pressed={isActive}
-          onMouseDown={(event) => event.preventDefault()}
-          onClick={onClick}
-          className={cn(
-            'flex size-[28px] items-center justify-center rounded-md text-[var(--text-icon)] outline-none transition-colors focus-visible:bg-[var(--surface-hover)] [&_svg]:size-[14px]',
-            isActive
-              ? 'bg-[var(--surface-active)] text-[var(--text-body)]'
-              : 'hover-hover:bg-[var(--surface-hover)]'
-          )}
-        >
-          <Icon />
-        </button>
-      </Tooltip.Trigger>
-      <Tooltip.Content>
-        {shortcut ? <Tooltip.Shortcut keys={shortcut}>{label}</Tooltip.Shortcut> : label}
-      </Tooltip.Content>
-    </Tooltip.Root>
-  )
-}
+// Pin the toolbar to the viewport (fixed) and never attach a scroll listener, so once it's placed for
+// a selection it stays put while the document scrolls instead of tracking the text — matching Linear.
+const FLOATING_OPTIONS = { strategy: 'fixed' } as const
 
-function ToolbarDivider() {
-  return <div className='mx-0.5 h-[18px] w-px bg-[var(--border-1)]' />
-}
+// Render into the body so a transformed/clipping ancestor (e.g. the mothership panels) can't reparent
+// the fixed-positioned toolbar and shift it off the selection.
+const APPEND_TO_BODY = () => document.body
 
 interface EditorBubbleMenuProps {
   editor: Editor
+  /** The editor's scrollable viewport, used to keep the toolbar on-screen for selections taller than it. */
+  scrollContainerRef: React.RefObject<HTMLDivElement | null>
 }
 
 /**
@@ -71,12 +52,16 @@ interface EditorBubbleMenuProps {
  * live in the `/` slash menu. Active states are read through {@link useEditorState} so the bar
  * stays correct without re-rendering the editor on every transaction.
  */
-export function EditorBubbleMenu({ editor }: EditorBubbleMenuProps) {
+export function EditorBubbleMenu({ editor, scrollContainerRef }: EditorBubbleMenuProps) {
   const [linkValue, setLinkValue] = useState<string | null>(null)
   const linkInputRef = useRef<HTMLInputElement>(null)
   const linkRangeRef = useRef<{ from: number; to: number } | null>(null)
   const isEditingLink = linkValue !== null
 
+  // Explicit key so `setMeta` can target this menu to reveal it after a drag-select.
+  const bubbleMenuKey = useMemo(() => new PluginKey('markdownBubbleMenu'), [])
+  const isPointerDownRef = useRef(false)
+
   const active = useEditorState({
     editor,
     selector: ({ editor: e }) => ({
@@ -109,6 +94,38 @@ export function EditorBubbleMenu({ editor }: EditorBubbleMenuProps) {
     }
   }, [editor])
 
+  // Reveal the toolbar only once a drag-select finishes (Linear-style); `shouldShow` keeps it hidden
+  // while the pointer is down. Keyboard selection has no pointer, so it still shows live.
+  useEffect(() => {
+    const dom = editor.view.dom
+    const onPointerDown = () => {
+      isPointerDownRef.current = true
+    }
+    const onPointerUp = () => {
+      if (!isPointerDownRef.current || editor.isDestroyed) return
+      isPointerDownRef.current = false
+      const { from, to } = editor.state.selection
+      if (hasFormattableSelection(editor, from, to)) {
+        // `show` alone leaves the bar visible-but-unpositioned (its updatePosition no-ops until shown),
+        // so a second `updatePosition` anchors it. Both are step-free, so the doc isn't marked dirty.
+        editor.commands.setMeta(bubbleMenuKey, 'show')
+        editor.commands.setMeta(bubbleMenuKey, 'updatePosition')
+      }
+    }
+    // A release outside the window delivers no mouseup; clear the flag on blur so it can't stay wedged.
+    const onWindowBlur = () => {
+      isPointerDownRef.current = false
+    }
+    dom.addEventListener('mousedown', onPointerDown)
+    window.addEventListener('mouseup', onPointerUp)
+    window.addEventListener('blur', onWindowBlur)
+    return () => {
+      dom.removeEventListener('mousedown', onPointerDown)
+      window.removeEventListener('mouseup', onPointerUp)
+      window.removeEventListener('blur', onWindowBlur)
+    }
+  }, [editor, bubbleMenuKey])
+
   const openLinkEditor = () => {
     if (editor.isActive('codeBlock') || editor.isActive('code')) return
     const { from, to } = editor.state.selection
@@ -158,9 +175,41 @@ export function EditorBubbleMenu({ editor }: EditorBubbleMenuProps) {
     setLinkValue(null)
   }
 
+  // Freeze the anchor per selection: the rect is computed once (in viewport coordinates) and reused on
+  // every scroll/resize reposition, so the toolbar stays where it first appeared instead of tracking
+  // the moving text — matching Linear. A new selection recomputes it. A selection taller than the
+  // viewport (e.g. select-all) is clamped into the visible area so the bar isn't placed off-screen.
+  const anchorCacheRef = useRef<{ key: string; rect: DOMRect } | null>(null)
+  const resolveAnchor = useCallback(() => {
+    const { view, state } = editor
+    if (!view.dom.isConnected) return null
+    const { from, to } = state.selection
+    const key = `${from}:${to}`
+    if (anchorCacheRef.current?.key !== key) {
+      const selection = posToDOMRect(view, from, to)
+      const viewport = scrollContainerRef.current?.getBoundingClientRect()
+      const rect =
+        viewport && selection.height > viewport.height
+          ? new DOMRect(
+              selection.left,
+              Math.min(Math.max(selection.top, viewport.top), viewport.bottom),
+              selection.width,
+              0
+            )
+          : selection
+      anchorCacheRef.current = { key, rect }
+    }
+    const { rect } = anchorCacheRef.current
+    return { getBoundingClientRect: () => rect, getClientRects: () => [rect] }
+  }, [editor, scrollContainerRef])
+
   return (
     <BubbleMenu
       editor={editor}
+      pluginKey={bubbleMenuKey}
+      getReferencedVirtualElement={resolveAnchor}
+      options={FLOATING_OPTIONS}
+      appendTo={APPEND_TO_BODY}
       role='toolbar'
       aria-label='Text formatting'
       updateDelay={0}
@@ -169,10 +218,11 @@ export function EditorBubbleMenu({ editor }: EditorBubbleMenuProps) {
         // can't be applied to a doc that must not mutate.
         if (!e.isEditable) return false
         if (isEditingLink) return true
-        if (e.isActive('codeBlock')) return false
-        return e.state.doc.textBetween(from, to, ' ').trim().length > 0
+        // Suppressed mid-drag; the pointer-release handler forces it back open once the selection sticks.
+        if (isPointerDownRef.current) return false
+        return hasFormattableSelection(e, from, to)
       }}
-      className='fade-in-0 z-[var(--z-popover)] flex animate-in items-center gap-0.5 rounded-lg border border-[var(--border)] bg-[var(--bg)] p-1 shadow-sm duration-100 motion-reduce:animate-none'
+      className='fade-in-0 z-[var(--z-popover)] flex animate-in items-center gap-0.5 rounded-lg border border-[var(--border)] bg-[var(--bg)] p-1 shadow-sm duration-150 ease-out motion-reduce:animate-none'
     >
       {isEditingLink ? (
         <>