improve performance

Author: icecrasher321

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

@@ -30,6 +30,16 @@ const EXTENSIONS = createMarkdownEditorExtensions({
   placeholder: "Write something, or press '/' for commands…",
 })
 
+/**
+ * Each streamed re-sync re-parses the whole accumulating body and rebuilds the ProseMirror doc —
+ * ~O(n) per frame (~22ms at 60KB; see {@link parseMarkdownToDoc}). Below this size we re-sync every
+ * frame for a smooth reveal; at or above it we throttle to {@link STREAM_REPARSE_THROTTLE_MS} so a
+ * large file doesn't saturate the main thread with full re-parses the reader can't follow anyway. The
+ * settle path always re-seeds the exact final body, so throttling only affects mid-stream cadence.
+ */
+const STREAM_REPARSE_THROTTLE_THRESHOLD = 40_000
+const STREAM_REPARSE_THROTTLE_MS = 120
+
 interface RichMarkdownEditorProps {
   file: WorkspaceFileRecord
   workspaceId: string
@@ -184,9 +194,6 @@ export function LoadedRichMarkdownEditor({
   const [initialContent] = useState<JSONContent | string>(() =>
     streamingAtMountRef.current ? '' : parseMarkdownToDoc(splitFrontmatter(content).body)
   )
-  // Frontmatter held aside and re-attached on every change (the editor never shows it); re-derived per
-  // stream→settle in the settle effect, so a repeat stream uses the new doc's frontmatter, not a stale one.
-  const frontmatterRef = useRef(settledRef.current?.frontmatter ?? '')
   const onChangeRef = useRef(onChange)
   onChangeRef.current = onChange
   const onSaveShortcutRef = useRef(onSaveShortcut)
@@ -300,22 +307,18 @@ export function LoadedRichMarkdownEditor({
     },
     onUpdate: ({ editor }) => {
       const md = postProcessSerializedMarkdown(editor.getMarkdown())
-      onChangeRef.current(applyFrontmatter(frontmatterRef.current, md))
+      onChangeRef.current(applyFrontmatter(settledRef.current?.frontmatter ?? '', md))
     },
   })
   editorInstanceRef.current = editor
 
-  // Stream content in read-only until it settles, then lock the verdict + frontmatter and hand off; after
-  // that only `canEdit` touches the editor (it owns the content, so no sync can clobber a user edit).
   const lastSyncedBodyRef = useRef<string | null>(null)
-  // Tracks whether the previous run was streaming so the settle branch re-locks on every stream→settle:
-  // one instance can receive several agent edits in a chat (kept mounted by `previewContextKey`), so the
-  // verdict/frontmatter must follow the latest stream, not the first settled snapshot.
+
   const wasStreamingRef = useRef(streamingAtMountRef.current)
-  // Coalesce streamed chunks to one re-parse per animation frame — a fast agent emits many per frame and
-  // each would re-parse the whole accumulating body. Read-only while streaming, so only the latest renders.
+
   const pendingStreamBodyRef = useRef<string | null>(null)
   const streamRafRef = useRef<number | null>(null)
+  const lastStreamParseAtRef = useRef(0)
   useEffect(() => {
     if (!editor) return
     if (isStreaming) {
@@ -324,11 +327,26 @@ export function LoadedRichMarkdownEditor({
       if (body === lastSyncedBodyRef.current) return
       pendingStreamBodyRef.current = body
       if (streamRafRef.current !== null) return
-      streamRafRef.current = requestAnimationFrame(() => {
-        streamRafRef.current = null
+      // Self-re-arming tick: it parses the latest pending body, but for a large body that exceeds the
+      // re-parse budget it re-schedules instead (a cheap length+clock check, no parse) until enough
+      // time has passed — so newer chunks keep updating `pendingStreamBodyRef` and only the latest is
+      // ever parsed. Settle cancels any in-flight tick and re-seeds the final body.
+      const tick = () => {
         const pending = pendingStreamBodyRef.current
-        if (pending === null || pending === lastSyncedBodyRef.current) return
+        if (pending === null || pending === lastSyncedBodyRef.current) {
+          streamRafRef.current = null
+          return
+        }
+        if (
+          pending.length > STREAM_REPARSE_THROTTLE_THRESHOLD &&
+          performance.now() - lastStreamParseAtRef.current < STREAM_REPARSE_THROTTLE_MS
+        ) {
+          streamRafRef.current = requestAnimationFrame(tick)
+          return
+        }
+        streamRafRef.current = null
         lastSyncedBodyRef.current = pending
+        lastStreamParseAtRef.current = performance.now()
         const el = containerRef.current
         const pinnedToBottom = el ? el.scrollHeight - el.scrollTop - el.clientHeight < 80 : false
         editor.setEditable(false)
@@ -337,7 +355,8 @@ export function LoadedRichMarkdownEditor({
           emitUpdate: false,
         })
         if (!disableStreamingAutoScroll && el && pinnedToBottom) el.scrollTop = el.scrollHeight
-      })
+      }
+      streamRafRef.current = requestAnimationFrame(tick)
       return
     }
     // Drop a frame scheduled just before settle so it can't land afterward and clobber the final content.
@@ -352,7 +371,6 @@ export function LoadedRichMarkdownEditor({
     if (isInitialSettle || wasStreamingRef.current) {
       wasStreamingRef.current = false
       settledRef.current = lockSettled(content)
-      frontmatterRef.current = settledRef.current.frontmatter
       // Re-seed only if the settled body differs from the last streamed chunk — it usually doesn't,
       // and an extra setContent would needlessly rebuild the doc and drop selection/scroll.
       const body = splitFrontmatter(content).body

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/text-editor-state.test.ts

@@ -10,19 +10,24 @@ import {
 } from './text-editor-state'
 
 function ready(content: string, savedContent = content): TextEditorContentState {
-  return { phase: 'ready', content, savedContent, lastStreamedContent: null }
+  return { phase: 'ready', content, savedContent, lastStreamedContent: null, hasBaseline: true }
 }
 
 function streaming(
   content: string,
   lastStreamedContent: string,
-  savedContent = ''
+  savedContent = '',
+  hasBaseline = true
 ): TextEditorContentState {
-  return { phase: 'streaming', content, savedContent, lastStreamedContent }
+  return { phase: 'streaming', content, savedContent, lastStreamedContent, hasBaseline }
 }
 
-function reconciling(content: string, savedContent = ''): TextEditorContentState {
-  return { phase: 'reconciling', content, savedContent, lastStreamedContent: null }
+function reconciling(
+  content: string,
+  savedContent = '',
+  hasBaseline = true
+): TextEditorContentState {
+  return { phase: 'reconciling', content, savedContent, lastStreamedContent: null, hasBaseline }
 }
 
 describe("reducer 'edit' action", () => {
@@ -144,6 +149,7 @@ describe('syncTextEditorContentState — static fetch updates', () => {
       content: 'user edit',
       savedContent: 'v1',
       lastStreamedContent: null,
+      hasBaseline: true,
     }
     const next = syncTextEditorContentState(state, {
       canReconcileToFetchedContent: true,
@@ -241,6 +247,7 @@ describe('syncTextEditorContentState — reconciling', () => {
       content: 'streamed',
       savedContent: 'v1',
       lastStreamedContent: null,
+      hasBaseline: true,
     }
     const next = syncTextEditorContentState(state, {
       canReconcileToFetchedContent: true,
@@ -431,3 +438,69 @@ describe('syncTextEditorContentState — mothership streamed-file lifecycle (rep
     expect(state.content).toBe(state.savedContent)
   })
 })
+
+/**
+ * When the user opens an existing, non-empty file's tab while the agent is already mid-stream on it,
+ * streaming begins from `uninitialized` before the content fetch resolves — so `savedContent` is the
+ * placeholder `''`. The first fetched value to arrive is the file's PRE-EDIT content, not the agent's
+ * write; it must be adopted as the baseline, never finalized to (which would flash stale content and,
+ * if the agent had stopped, let the user edit over the agent's write).
+ */
+describe('syncTextEditorContentState — stream begins before fetch on an existing file', () => {
+  it('adopts the first fetched content as the baseline instead of finalizing to it mid-stream', () => {
+    const preEdit = '# Original\n\nold content'
+    const agentWrite = '# Original\n\nold content, plus a new section.'
+
+    // 1. Editor mounts mid-stream: chunk arrives before the fetch resolves.
+    let state = syncTextEditorContentState(INITIAL_TEXT_EDITOR_CONTENT_STATE, {
+      canReconcileToFetchedContent: true,
+      fetchedContent: undefined,
+      streamingContent: '# Original\n\nold',
+    })
+    expect(state.phase).toBe('streaming')
+    expect(state.savedContent).toBe('')
+    expect(state.hasBaseline).toBe(false)
+
+    // 2. The fetch resolves to the file's pre-edit content WHILE streaming. Adopt it as the baseline;
+    //    do NOT finalize (the agent hasn't persisted its write yet).
+    state = syncTextEditorContentState(state, {
+      canReconcileToFetchedContent: true,
+      fetchedContent: preEdit,
+      streamingContent: '# Original\n\nold content, plus',
+    })
+    expect(state.phase).toBe('streaming')
+    expect(state.content).toBe('# Original\n\nold content, plus')
+    expect(state.savedContent).toBe(preEdit)
+    expect(state.hasBaseline).toBe(true)
+
+    // 3. Stream ends; the refetch is still the pre-edit content → hold in reconciling, never finalize
+    //    to stale (savedContent === fetched, so it has not "advanced").
+    state = syncTextEditorContentState(state, {
+      canReconcileToFetchedContent: true,
+      fetchedContent: preEdit,
+      streamingContent: undefined,
+    })
+    expect(state.phase).toBe('reconciling')
+
+    // 4. The agent's write lands (advanced past the adopted baseline) → finalize to it.
+    state = syncTextEditorContentState(state, {
+      canReconcileToFetchedContent: true,
+      fetchedContent: agentWrite,
+      streamingContent: undefined,
+    })
+    expect(state.phase).toBe('ready')
+    expect(state.content).toBe(agentWrite)
+    expect(state.savedContent).toBe(agentWrite)
+  })
+
+  it('still finalizes mid-stream once a real baseline is established (no regression)', () => {
+    // With hasBaseline=true, an advancing fetch finalizes immediately — the established-baseline path.
+    const next = syncTextEditorContentState(streaming('v1 chunk', 'v1 chunk', 'v1'), {
+      canReconcileToFetchedContent: true,
+      fetchedContent: 'v2',
+      streamingContent: 'chunk',
+    })
+    expect(next.phase).toBe('ready')
+    expect(next.content).toBe('v2')
+  })
+})

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/text-editor-state.ts

@@ -5,6 +5,13 @@ export interface TextEditorContentState {
   content: string
   savedContent: string
   lastStreamedContent: string | null
+  /**
+   * Whether `savedContent` is the file's real baseline (not the initial placeholder). False only
+   * before the first fetched content has been observed — e.g. a stream that began before the initial
+   * fetch resolved. While false, a fetched value is treated as the baseline to adopt, not as the
+   * agent's write advancing past the baseline (which would finalize the editor to stale content).
+   */
+  hasBaseline: boolean
 }
 
 export interface SyncTextEditorContentStateOptions {
@@ -23,6 +30,7 @@ export const INITIAL_TEXT_EDITOR_CONTENT_STATE: TextEditorContentState = {
   content: '',
   savedContent: '',
   lastStreamedContent: null,
+  hasBaseline: false,
 }
 
 function finalizeTextEditorContentState(
@@ -33,7 +41,8 @@ function finalizeTextEditorContentState(
     state.phase === 'ready' &&
     state.content === nextContent &&
     state.savedContent === nextContent &&
-    state.lastStreamedContent === null
+    state.lastStreamedContent === null &&
+    state.hasBaseline
   ) {
     return state
   }
@@ -43,17 +52,30 @@ function finalizeTextEditorContentState(
     content: nextContent,
     savedContent: nextContent,
     lastStreamedContent: null,
+    hasBaseline: true,
   }
 }
 
 function moveTextEditorContentStateToStreaming(
   state: TextEditorContentState,
-  nextContent: string
+  nextContent: string,
+  fetchedBaseline?: string
 ): TextEditorContentState {
+  // A stream that begins before the initial fetch resolves leaves `savedContent` at its placeholder.
+  // The first fetched value to arrive during the stream IS the file's pre-edit baseline (the agent
+  // hasn't persisted its write yet), so adopt it. Without this, a later refetch of that same pre-edit
+  // content would read as an "advance" past the placeholder and finalize the editor to stale content
+  // mid-stream. Empty-file creates are unaffected: their baseline genuinely is ''.
+  const adoptBaseline = !state.hasBaseline && fetchedBaseline !== undefined
+  const savedContent = adoptBaseline ? fetchedBaseline : state.savedContent
+  const hasBaseline = state.hasBaseline || adoptBaseline
+
   if (
     state.phase === 'streaming' &&
     state.content === nextContent &&
-    state.lastStreamedContent === nextContent
+    state.lastStreamedContent === nextContent &&
+    state.savedContent === savedContent &&
+    state.hasBaseline === hasBaseline
   ) {
     return state
   }
@@ -63,6 +85,8 @@ function moveTextEditorContentStateToStreaming(
     phase: 'streaming',
     content: nextContent,
     lastStreamedContent: nextContent,
+    savedContent,
+    hasBaseline,
   }
 }
 
@@ -92,7 +116,12 @@ export function syncTextEditorContentState(
       fetchedContent !== undefined &&
       state.lastStreamedContent !== null &&
       fetchedContent === state.lastStreamedContent
-    const hasFetchedAdvanced = fetchedContent !== undefined && fetchedContent !== state.savedContent
+    // Only an ESTABLISHED baseline makes "fetched differs from savedContent" mean "the agent's write
+    // advanced". Before the baseline is established (stream started before the fetch resolved),
+    // savedContent is a placeholder, so the file's own pre-edit content would falsely read as an
+    // advance and finalize to stale content; instead it is adopted as the baseline in moveToStreaming.
+    const hasFetchedAdvanced =
+      fetchedContent !== undefined && state.hasBaseline && fetchedContent !== state.savedContent
 
     if (
       (state.phase === 'streaming' || state.phase === 'reconciling') &&
@@ -110,7 +139,7 @@ export function syncTextEditorContentState(
       return finalizeTextEditorContentState(state, fetchedContent)
     }
 
-    return moveTextEditorContentStateToStreaming(state, nextContent)
+    return moveTextEditorContentStateToStreaming(state, nextContent, fetchedContent)
   }
 
   if (state.phase === 'streaming' || state.phase === 'reconciling') {
@@ -182,6 +211,7 @@ export function textEditorContentReducer(
         phase: 'ready',
         savedContent: action.content,
         lastStreamedContent: null,
+        hasBaseline: true,
       }
     default:
       return state

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/use-editable-file-content.ts

@@ -129,19 +129,6 @@ export function useEditableFileContent({
   const updateContentRef = useRef(updateContent)
   updateContentRef.current = updateContent
 
-  // Pace only the streamed text (never user edits) so the preview reveals at the same word-by-word
-  // cadence as chat. Off-stream it reverts to undefined so the engine reconciles to the agent's
-  // persisted write; snapOnNonAppend shows in-place rewrites/patches in full instead of re-revealing.
-  const pacedStreamingContent = useSmoothText(
-    streamingContent ?? '',
-    streamingContent !== undefined,
-    {
-      snapOnNonAppend: true,
-    }
-  )
-  const effectiveStreamingContent =
-    streamingContent !== undefined ? pacedStreamingContent : undefined
-
   const {
     content,
     savedContent,
@@ -152,11 +139,20 @@ export function useEditableFileContent({
   } = useFileContentState({
     canReconcileToFetchedContent: file.key.length > 0,
     fetchedContent,
-    streamingContent: effectiveStreamingContent,
+    streamingContent,
   })
 
   const isStreamInteractionLocked = isStreamPhaseLocked || Boolean(isAgentEditing)
 
+  // Pace the streamed reveal for DISPLAY only. The reducer above keeps the true content so
+  // reconciliation, dirty tracking, and saves are never thrown off by the paced prefix. Pacing is
+  // gated on the stream phase (not the agent-edit lock) and fed '' off-stream, so a user's own typing
+  // is never throttled; snapOnNonAppend shows in-place rewrites/patches in full, not re-revealed.
+  const pacedReveal = useSmoothText(isStreamPhaseLocked ? content : '', isStreamPhaseLocked, {
+    snapOnNonAppend: true,
+  })
+  const displayContent = isStreamPhaseLocked ? pacedReveal : content
+
   const contentRef = useRef(content)
   contentRef.current = content
 
@@ -192,11 +188,16 @@ export function useEditableFileContent({
   }, [saveImmediately, saveRef])
 
   return {
-    content,
+    content: displayContent,
     setDraftContent,
     isInitialized,
     isStreamInteractionLocked,
-    isContentLoading: streamingContent === undefined && isLoading,
+    // `!isInitialized` mirrors `hasContentError`: once any content (fetched OR streamed) has
+    // initialized the editor, never fall back to the loading frame. A stream that finishes before the
+    // initial file fetch resolves flips `streamingContent` to undefined while `isLoading` is still
+    // true — without this guard that would unmount the settled editor (losing the read-only→editable
+    // hand-off, scroll, and parsed doc) until the fetch lands.
+    isContentLoading: streamingContent === undefined && isLoading && !isInitialized,
     hasContentError: streamingContent === undefined && Boolean(error) && !isInitialized,
     saveStatus,
     saveImmediately,