mermaid linter errors sent back to llm

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/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'>
+      <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/preview-panel.tsx

@@ -25,6 +25,7 @@ import { extractTextContent } from '@/lib/core/utils/react-node-text'
 import { getFileExtension } from '@/lib/uploads/utils/file-utils'
 import { useAutoScroll } from '@/hooks/use-auto-scroll'
 import { DataTable } from './data-table'
+import { ZoomablePreview } from './zoomable-preview'
 
 interface HastNode {
   position?: { start?: { offset?: number } }
@@ -252,15 +253,21 @@ function CalloutBlock({ type, children }: { type: string; children?: React.React
 function MermaidSourcePreview({
   definition,
   isRendering,
+  status,
 }: {
   definition: string
   isRendering: boolean
+  status?: string
 }) {
   return (
     <div className='my-4 overflow-hidden rounded-lg border border-[var(--border)]'>
       <div className='flex items-center justify-between border-[var(--border)] border-b bg-[var(--surface-3)] px-3 py-1.5'>
         <span className='text-[11px] text-[var(--text-tertiary)]'>mermaid</span>
-        {isRendering && <span className='text-[11px] text-[var(--text-muted)]'>Rendering...</span>}
+        {(isRendering || status) && (
+          <span className='text-[11px] text-[var(--text-muted)]'>
+            {isRendering ? 'Rendering...' : status}
+          </span>
+        )}
       </div>
       <div className='code-editor-theme bg-[var(--surface-5)]'>
         <pre className='m-0 overflow-x-auto whitespace-pre p-4 font-mono text-[13px] text-[var(--text-primary)] leading-[1.6]'>
@@ -271,12 +278,34 @@ function MermaidSourcePreview({
   )
 }
 
+function MermaidCodeBlockSkeleton() {
+  return (
+    <div className='my-4 overflow-hidden rounded-lg border border-[var(--border)]'>
+      <div className='flex items-center justify-between border-[var(--border)] border-b bg-[var(--surface-3)] px-3 py-1.5'>
+        <span className='text-[11px] text-[var(--text-tertiary)]'>mermaid</span>
+        <span className='text-[11px] text-[var(--text-muted)]'>Rendering...</span>
+      </div>
+      <div className='code-editor-theme bg-[var(--surface-5)]'>
+        <div className='space-y-2 p-4'>
+          <div className='h-3 w-5/6 animate-pulse rounded bg-[var(--surface-2)]' />
+          <div className='h-3 w-2/3 animate-pulse rounded bg-[var(--surface-2)]' />
+          <div className='h-3 w-3/4 animate-pulse rounded bg-[var(--surface-2)]' />
+        </div>
+      </div>
+    </div>
+  )
+}
+
 const MermaidDiagram = memo(function MermaidDiagram({
   definition,
   isStreaming = false,
+  zoomable = false,
+  zoomClassName,
 }: {
   definition: string
   isStreaming?: boolean
+  zoomable?: boolean
+  zoomClassName?: string
 }) {
   const [svg, setSvg] = useState<string | null>(null)
   const [error, setError] = useState<string | null>(null)
@@ -360,14 +389,23 @@ const MermaidDiagram = memo(function MermaidDiagram({
 
   if (error) {
     return (
-      <div className='my-4 rounded-lg border border-[var(--border)] p-4 text-[13px] text-[var(--text-muted)]'>
-        <span className='font-medium text-[var(--text-primary)]'>Diagram error: </span>
-        {error}
-      </div>
+      <MermaidSourcePreview definition={definition} isRendering={false} status='Invalid diagram' />
     )
   }
 
   if (svg && renderedDefinition === trimmedDefinition) {
+    const diagram = (
+      <div className='max-h-full max-w-full' dangerouslySetInnerHTML={{ __html: svg }} />
+    )
+
+    if (zoomable) {
+      return (
+        <ZoomablePreview className={zoomClassName ?? 'my-4 h-[420px] rounded-lg'}>
+          {diagram}
+        </ZoomablePreview>
+      )
+    }
+
     return (
       <div className='my-4 overflow-auto rounded-lg' dangerouslySetInnerHTML={{ __html: svg }} />
     )
@@ -378,7 +416,7 @@ const MermaidDiagram = memo(function MermaidDiagram({
   }
 
   if (!trimmedDefinition || !svg) {
-    return <div className='my-4 h-[100px] animate-pulse rounded-lg bg-[var(--surface-2)]' />
+    return <MermaidCodeBlockSkeleton />
   }
   return null
 })
@@ -949,21 +987,26 @@ function SvgPreview({ content }: { content: string }) {
   const wrappedContent = `<!DOCTYPE html><html><head><style>body{margin:0;display:flex;align-items:center;justify-content:center;min-height:100vh;background:transparent;}svg{max-width:100%;max-height:100vh;}</style></head><body>${content}</body></html>`
 
   return (
-    <div className='h-full overflow-hidden'>
+    <ZoomablePreview className='h-full'>
       <iframe
         srcDoc={wrappedContent}
         sandbox=''
         title='SVG Preview'
         className='h-full w-full border-0'
       />
-    </div>
+    </ZoomablePreview>
   )
 }
 
 function MermaidFilePreview({ content, isStreaming }: { content: string; isStreaming?: boolean }) {
   return (
     <div className='h-full overflow-auto p-6'>
-      <MermaidDiagram definition={content} isStreaming={isStreaming} />
+      <MermaidDiagram
+        definition={content}
+        isStreaming={isStreaming}
+        zoomable
+        zoomClassName='h-full rounded-lg'
+      />
     </div>
   )
 }