Fix file streaming

Author: Theodore Li

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx

@@ -80,7 +80,7 @@ export const ResourceContent = memo(function ResourceContent({
     [workspaceId, streamFileName]
   )
 
-  if (streamingFile) {
+  if (streamingFile && resource.id === 'streaming-file') {
     return (
       <div className='flex h-full flex-col overflow-hidden'>
         <FileViewer
@@ -105,6 +105,9 @@ export const ResourceContent = memo(function ResourceContent({
           workspaceId={workspaceId}
           fileId={resource.id}
           previewMode={previewMode}
+          streamingContent={
+            streamingFile ? extractFileContent(streamingFile.content) : undefined
+          }
         />
       )
 
@@ -379,9 +382,10 @@ interface EmbeddedFileProps {
   workspaceId: string
   fileId: string
   previewMode?: PreviewMode
+  streamingContent?: string
 }
 
-function EmbeddedFile({ workspaceId, fileId, previewMode }: EmbeddedFileProps) {
+function EmbeddedFile({ workspaceId, fileId, previewMode, streamingContent }: EmbeddedFileProps) {
   const { data: files = [], isLoading, isFetching } = useWorkspaceFiles(workspaceId)
   const file = useMemo(() => files.find((f) => f.id === fileId), [files, fileId])
 
@@ -409,6 +413,7 @@ function EmbeddedFile({ workspaceId, fileId, previewMode }: EmbeddedFileProps) {
         workspaceId={workspaceId}
         canEdit={true}
         previewMode={previewMode}
+        streamingContent={streamingContent}
       />
     </div>
   )

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/mothership-view.tsx

@@ -17,6 +17,40 @@ const PREVIEW_CYCLE: Record<PreviewMode, PreviewMode> = {
   preview: 'editor',
 } as const
 
+function streamFileBasename(name: string): string {
+  const n = name.replace(/\\/g, '/').trim()
+  const parts = n.split('/').filter(Boolean)
+  return parts.length ? parts[parts.length - 1]! : n
+}
+
+function fileTitlesEquivalent(streamFileName: string, resourceTitle: string): boolean {
+  return streamFileBasename(streamFileName) === streamFileBasename(resourceTitle)
+}
+
+/**
+ * Whether the active resource should show the in-progress file_write stream.
+ * The synthetic `streaming-file` tab always shows it; a real file tab shows it when
+ * the streamed `fileName` matches that resource (so users who stay on the open file see live text).
+ */
+function streamReferencesFileId(raw: string, fileId: string): boolean {
+  if (!fileId) return false
+  const escaped = fileId.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+  return new RegExp(`"fileId"\\s*:\\s*"${escaped}"`).test(raw)
+}
+
+function shouldShowStreamingFilePanel(
+  streamingFile: { fileName: string; content: string } | null | undefined,
+  active: MothershipResource | null
+): boolean {
+  if (!streamingFile || !active) return false
+  if (active.id === 'streaming-file') return true
+  if (active.type !== 'file') return false
+  const fn = streamingFile.fileName.trim()
+  if (fn && fileTitlesEquivalent(fn, active.title)) return true
+  if (active.id && streamReferencesFileId(streamingFile.content, active.id)) return true
+  return false
+}
+
 interface MothershipViewProps {
   workspaceId: string
   chatId?: string
@@ -52,6 +86,11 @@ export const MothershipView = memo(
   ) {
     const active = resources.find((r) => r.id === activeResourceId) ?? resources[0] ?? null
 
+    const streamingForActive =
+      streamingFile && active && shouldShowStreamingFilePanel(streamingFile, active)
+        ? streamingFile
+        : undefined
+
     const [previewMode, setPreviewMode] = useState<PreviewMode>('preview')
     const [prevActiveId, setPrevActiveId] = useState<string | null | undefined>(active?.id)
     const handleCyclePreview = useCallback(() => setPreviewMode((m) => PREVIEW_CYCLE[m]), [])
@@ -97,7 +136,7 @@ export const MothershipView = memo(
                 workspaceId={workspaceId}
                 resource={active}
                 previewMode={isActivePreviewable ? previewMode : undefined}
-                streamingFile={active.id === 'streaming-file' ? streamingFile : undefined}
+                streamingFile={streamingForActive}
               />
             ) : (
               <div className='flex h-full items-center justify-center text-[14px] text-[var(--text-muted)]'>

apps/sim/app/workspace/[workspaceId]/home/hooks/use-chat.ts

@@ -764,24 +764,37 @@ export function useChat(
               const delta = typeof parsed.data === 'string' ? parsed.data : ''
               if (!id || !delta) break
 
-              if (activeSubagent === 'file_write') {
-                const prev = streamingFileRef.current
-                if (prev) {
-                  const raw = prev.content + delta
-                  let fileName = prev.fileName
-                  if (!fileName) {
-                    const m = raw.match(/"fileName"\s*:\s*"([^"]+)"/)
-                    if (m) {
-                      fileName = m[1]
-                      setResources((rs) =>
-                        rs.map((r) => (r.id === 'streaming-file' ? { ...r, title: fileName } : r))
+              const toolName =
+                typeof parsed.toolName === 'string' ? parsed.toolName : ''
+              const streamWorkspaceFile =
+                activeSubagent === 'file_write' || toolName === 'workspace_file'
+
+              if (streamWorkspaceFile) {
+                let prev = streamingFileRef.current
+                if (!prev) {
+                  prev = { fileName: '', content: '' }
+                  streamingFileRef.current = prev
+                  setStreamingFile(prev)
+                  if (toolName === 'workspace_file' && activeSubagent !== 'file_write') {
+                    addResource({ type: 'file', id: 'streaming-file', title: 'Writing file...' })
+                  }
+                }
+                const raw = prev.content + delta
+                let fileName = prev.fileName
+                if (!fileName) {
+                  const m = raw.match(/"fileName"\s*:\s*"([^"]+)"/)
+                  if (m) {
+                    fileName = m[1]
+                    setResources((rs) =>
+                      rs.map((r) =>
+                        r.id === 'streaming-file' ? { ...r, title: fileName } : r
                       )
-                    }
+                    )
                   }
-                  const next = { fileName, content: raw }
-                  streamingFileRef.current = next
-                  setStreamingFile(next)
                 }
+                const next = { fileName, content: raw }
+                streamingFileRef.current = next
+                setStreamingFile(next)
               }
 
               const idx = toolMap.get(id)
@@ -875,6 +888,12 @@ export function useChat(
                 }
 
                 onToolResultRef.current?.(tc.name, tc.status === 'success', tc.result?.output)
+
+                if (tc.name === 'workspace_file') {
+                  setStreamingFile(null)
+                  streamingFileRef.current = null
+                  setResources((rs) => rs.filter((r) => r.id !== 'streaming-file'))
+                }
               }
 
               break
@@ -973,7 +992,11 @@ export function useChat(
                 activeSubagent = name
                 blocks.push({ type: 'subagent', content: name })
                 if (name === 'file_write') {
-                  setStreamingFile({ fileName: '', content: '' })
+                  const emptyFile = { fileName: '', content: '' }
+                  // Ref must be updated synchronously: tool_call_delta can arrive before React
+                  // re-renders after setStreamingFile, and the handler only appends when prev exists.
+                  streamingFileRef.current = emptyFile
+                  setStreamingFile(emptyFile)
                   addResource({ type: 'file', id: 'streaming-file', title: 'Writing file...' })
                 }
                 flush()