feat(files): zoom controls for inline mermaid and images in markdown, fit zoom upscaling

Author: waleedlatif1

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

@@ -473,10 +473,16 @@ function resolveSimFileUrl(src: string | undefined): string | undefined {
   try {
     const parsed = new URL(src, 'http://placeholder')
     if (parsed.origin !== 'http://placeholder') return src
-    const [, seg1, , seg3, fileId] = parsed.pathname.split('/')
+    const parts = parsed.pathname.split('/')
+    const [, seg1, , seg3, fileId] = parts
     if (seg1 === 'workspace' && seg3 === 'files' && fileId) {
       return `/api/files/view/${fileId}`
     }
+    // files/by-id/{uuid}/content — canonical VFS path used by Mothership skills; treat as embed URL
+    const [, s1, s2, byIdFileId, s4] = parts
+    if (s1 === 'files' && s2 === 'by-id' && byIdFileId && s4 === 'content') {
+      return `/api/files/view/${byIdFileId}`
+    }
   } catch {
     // not a parseable URL
   }
@@ -495,7 +501,14 @@ const STATIC_MARKDOWN_COMPONENTS = {
   ),
   'mermaid-diagram': ({ definition }: { definition?: string }) => {
     const isStreaming = useContext(MermaidStreamingCtx)
-    return <MermaidDiagram definition={definition ?? ''} isStreaming={isStreaming} />
+    return (
+      <MermaidDiagram
+        definition={definition ?? ''}
+        isStreaming={isStreaming}
+        zoomable
+        zoomClassName='h-[420px] rounded-lg'
+      />
+    )
   },
   p: ({ children }: { children?: React.ReactNode }) => (
     <p className='mb-3 break-words text-[14px] text-[var(--text-primary)] leading-[1.6] last:mb-0'>
@@ -619,12 +632,15 @@ const STATIC_MARKDOWN_COMPONENTS = {
   img: ({ src, alt }: React.ImgHTMLAttributes<HTMLImageElement>) => {
     const resolvedSrc = resolveSimFileUrl(typeof src === 'string' ? src : undefined)
     return (
-      <img
-        src={resolvedSrc}
-        alt={alt ?? ''}
-        className='my-3 max-w-full rounded-md'
-        loading='lazy'
-      />
+      <ZoomablePreview className='my-3 h-[360px] rounded-md' initialScale='fit'>
+        <img
+          src={resolvedSrc}
+          alt={alt ?? ''}
+          className='max-h-full max-w-full select-none object-contain'
+          draggable={false}
+          loading='lazy'
+        />
+      </ZoomablePreview>
     )
   },
   table: ({ children }: { children?: React.ReactNode }) => (

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

@@ -47,7 +47,7 @@ function getFitZoom(container: Size, content: Size): number {
 
   const availableWidth = Math.max(1, container.width - FIT_PADDING)
   const availableHeight = Math.max(1, container.height - FIT_PADDING)
-  return clampZoom(Math.min(1, availableWidth / content.width, availableHeight / content.height))
+  return clampZoom(Math.min(availableWidth / content.width, availableHeight / content.height))
 }
 
 function clampOffset(container: Size, content: Size, offset: Offset, zoom: number): Offset {