fix(file): zero byte codegen file format + zoomable preview wrapper + mermaid errors loopback (#4400)

* fix(file): zero byte codegen file format

* address comments

* distinguish streaming from actual empty pdf

* fix mermaid diagram state mgmt

* mermaid linter errors sent back to llm

* address comments

* fix autozoom

Author: icecrasher321

apps/sim/app/api/workspaces/[id]/files/[fileId]/compiled-check/route.ts

@@ -7,6 +7,7 @@ import { getSession } from '@/lib/auth'
 import { withRouteHandler } from '@/lib/core/utils/with-route-handler'
 import { BINARY_DOC_TASKS, MAX_DOCUMENT_PREVIEW_CODE_BYTES } from '@/lib/execution/constants'
 import { runSandboxTask, SandboxUserCodeError } from '@/lib/execution/sandbox/run-task'
+import { validateMermaidSource } from '@/lib/mermaid/validate'
 import { downloadWorkspaceFile, getWorkspaceFile } from '@/lib/uploads/contexts/workspace'
 import { verifyWorkspaceMembership } from '@/app/api/workflows/utils'
 
@@ -18,9 +19,9 @@ const logger = createLogger('WorkspaceFileCompiledCheckAPI')
 /**
  * GET /api/workspaces/[id]/files/[fileId]/compiled-check
  *
- * Compiles the saved JavaScript source of a .docx / .pptx / .pdf file and
+ * Compiles or validates the saved source for generated document-like files and
  * returns whether it succeeds. Used by the file agent to self-verify generated
- * code before finalising an edit.
+ * code or diagram syntax before finalising an edit.
  *
  * Returns:
  *   200 { ok: true }
@@ -51,9 +52,10 @@ export const GET = withRouteHandler(
 
     const ext = fileRecord.name.split('.').pop()?.toLowerCase() ?? ''
     const taskId = BINARY_DOC_TASKS[ext]
-    if (!taskId) {
+    const isMermaidFile = ext === 'mmd' || ext === 'mermaid'
+    if (!taskId && !isMermaidFile) {
       return NextResponse.json(
-        { error: `Compiled check only supports .docx, .pptx, and .pdf files` },
+        { error: `Compiled check only supports .docx, .pptx, .pdf, and .mmd files` },
         { status: 422 }
       )
     }
@@ -75,7 +77,14 @@ export const GET = withRouteHandler(
       return NextResponse.json({ error: 'File source exceeds maximum size' }, { status: 413 })
     }
 
+    if (isMermaidFile) {
+      return NextResponse.json(await validateMermaidSource(code))
+    }
+
     try {
+      if (!taskId) {
+        return NextResponse.json({ error: 'Unsupported compiled check target' }, { status: 422 })
+      }
       await runSandboxTask(taskId, { code, workspaceId }, { ownerKey: `user:${session.user.id}` })
       return NextResponse.json({ ok: true })
     } catch (err) {

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

@@ -225,7 +225,11 @@ const IframePreview = memo(function IframePreview({
   )
 
   if (streamingContent !== undefined) {
-    if (!streamingSource) {
+    if (
+      !streamingSource ||
+      streamingSource.kind !== 'buffer' ||
+      streamingSource.buffer.byteLength === 0
+    ) {
       return <div className='relative flex flex-1 overflow-hidden'>{PDF_PAGE_SKELETON}</div>
     }
     return <PdfViewerCore key={streamingBufferSeq} source={streamingSource} filename={file.name} />

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/image-preview.tsx

@@ -1,121 +1,21 @@
 'use client'
 
-import { memo, useEffect, useRef, useState } from 'react'
-import { ZoomIn, ZoomOut } from 'lucide-react'
-import { Button } from '@/components/emcn'
+import { memo } from 'react'
 import type { WorkspaceFileRecord } from '@/lib/uploads/contexts/workspace'
-
-const ZOOM_MIN = 0.25
-const ZOOM_MAX = 4
-const ZOOM_WHEEL_SENSITIVITY = 0.005
-const ZOOM_BUTTON_FACTOR = 1.2
-
-const clampZoom = (z: number) => Math.min(Math.max(z, ZOOM_MIN), ZOOM_MAX)
+import { ZoomablePreview } from './zoomable-preview'
 
 export const ImagePreview = memo(function ImagePreview({ file }: { file: WorkspaceFileRecord }) {
   const serveUrl = `/api/files/serve/${encodeURIComponent(file.key)}?context=workspace`
-  const [zoom, setZoom] = useState(1)
-  const [offset, setOffset] = useState({ x: 0, y: 0 })
-  const isDragging = useRef(false)
-  const dragStart = useRef({ x: 0, y: 0 })
-  const offsetAtDragStart = useRef({ x: 0, y: 0 })
-  const offsetRef = useRef(offset)
-  offsetRef.current = offset
-
-  const containerRef = useRef<HTMLDivElement>(null)
-
-  const zoomIn = () => setZoom((z) => clampZoom(z * ZOOM_BUTTON_FACTOR))
-  const zoomOut = () => setZoom((z) => clampZoom(z / ZOOM_BUTTON_FACTOR))
-
-  useEffect(() => {
-    const el = containerRef.current
-    if (!el) return
-    const onWheel = (e: WheelEvent) => {
-      e.preventDefault()
-      if (e.ctrlKey || e.metaKey) {
-        setZoom((z) => clampZoom(z * Math.exp(-e.deltaY * ZOOM_WHEEL_SENSITIVITY)))
-      } else {
-        setOffset((o) => ({ x: o.x - e.deltaX, y: o.y - e.deltaY }))
-      }
-    }
-    el.addEventListener('wheel', onWheel, { passive: false })
-    return () => el.removeEventListener('wheel', onWheel)
-  }, [])
-
-  const handleMouseDown = (e: React.MouseEvent) => {
-    if (e.button !== 0) return
-    isDragging.current = true
-    dragStart.current = { x: e.clientX, y: e.clientY }
-    offsetAtDragStart.current = offsetRef.current
-    if (containerRef.current) containerRef.current.style.cursor = 'grabbing'
-    e.preventDefault()
-  }
-
-  const handleMouseMove = (e: React.MouseEvent) => {
-    if (!isDragging.current) return
-    setOffset({
-      x: offsetAtDragStart.current.x + (e.clientX - dragStart.current.x),
-      y: offsetAtDragStart.current.y + (e.clientY - dragStart.current.y),
-    })
-  }
-
-  const handleMouseUp = () => {
-    isDragging.current = false
-    if (containerRef.current) containerRef.current.style.cursor = 'grab'
-  }
 
   return (
-    <div
-      ref={containerRef}
-      className='relative flex flex-1 cursor-grab overflow-hidden bg-[var(--surface-1)]'
-      onMouseDown={handleMouseDown}
-      onMouseMove={handleMouseMove}
-      onMouseUp={handleMouseUp}
-      onMouseLeave={handleMouseUp}
-    >
-      <div
-        className='pointer-events-none absolute inset-0 flex items-center justify-center'
-        style={{
-          transform: `translate(${offset.x}px, ${offset.y}px) scale(${zoom})`,
-          transformOrigin: 'center center',
-        }}
-      >
-        <img
-          src={serveUrl}
-          alt={file.name}
-          className='max-h-full max-w-full select-none rounded-md object-contain'
-          draggable={false}
-          loading='eager'
-        />
-      </div>
-      <div
-        className='absolute right-4 bottom-4 flex items-center gap-1 rounded-md border border-[var(--border)] bg-[var(--surface-2)] px-2 py-1 shadow-card'
-        onMouseDown={(e) => e.stopPropagation()}
-      >
-        <Button
-          variant='ghost'
-          size='sm'
-          onClick={zoomOut}
-          disabled={zoom <= ZOOM_MIN}
-          className='h-6 w-6 p-0'
-          aria-label='Zoom out'
-        >
-          <ZoomOut className='h-3.5 w-3.5' />
-        </Button>
-        <span className='min-w-[3rem] text-center text-[11px] text-[var(--text-secondary)]'>
-          {Math.round(zoom * 100)}%
-        </span>
-        <Button
-          variant='ghost'
-          size='sm'
-          onClick={zoomIn}
-          disabled={zoom >= ZOOM_MAX}
-          className='h-6 w-6 p-0'
-          aria-label='Zoom in'
-        >
-          <ZoomIn className='h-3.5 w-3.5' />
-        </Button>
-      </div>
-    </div>
+    <ZoomablePreview className='flex flex-1' contentClassName='h-full w-full'>
+      <img
+        src={serveUrl}
+        alt={file.name}
+        className='max-h-full max-w-full select-none rounded-md object-contain'
+        draggable={false}
+        loading='eager'
+      />
+    </ZoomablePreview>
   )
 })

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/pdf-viewer.tsx

@@ -79,7 +79,7 @@ export const PdfViewerCore = memo(function PdfViewerCore({ source, filename }: P
 
   const sourceValue = source.kind === 'url' ? source.url : source.buffer
   const file = useMemo(
-    () => (source.kind === 'url' ? source.url : { data: new Uint8Array(source.buffer) }),
+    () => (source.kind === 'url' ? source.url : { data: new Uint8Array(source.buffer.slice(0)) }),
     [sourceValue]
   )