feat(files): embed sim files and render mermaid diagrams in markdown preview (#4402)

* feat(files): resolve workspace file page URLs to raw content in markdown preview

* refactor(files): replace regex URL matching with URL constructor in resolveSimFileUrl

* fix(files): render mermaid diagrams in markdown preview using design tokens

Streamdown intercepts fenced code blocks before components.code is called,
so the previous mermaid branch in the code renderer was dead code. Add a
remarkMermaid plugin that transforms mermaid code nodes at the MDAST stage
via data.hName/hProperties so remark-rehype emits a <mermaid-diagram>
element that our MermaidDiagram component handles. This avoids Streamdown's
built-in mermaid renderer which uses mismatched Tailwind semantic classes.

* fix(trace): reduce default tree pane width from 360 to 280

* fix(files): guard resolveSimFileUrl against cross-origin URL hijacking

* refactor(files): use getBrowserOrigin() instead of window.location.origin

* fix(trace): reduce default tree pane width to 240

* fix(files): narrow img src type before passing to resolveSimFileUrl

* fix(files): use narrow props type for img renderer instead of runtime narrowing

* fix(files): accept full ImgHTMLAttributes for img renderer to satisfy Streamdown Components type

* fix(files): treat null getBrowserOrigin as same-origin to prevent SSR hydration mismatch

* improvement(files): use centered aspect-ratio skeleton for mmd file preview

* improvement(files): diagram-shaped skeleton card for mmd file preview

* fix(files): only rewrite relative workspace file URLs to avoid hydration mismatch

* fix(files): pass context not resolved params to parseRequest in view route

* fix(files): simplify mmd file skeleton to match pptx card pattern

* fix(files): match mmd skeleton to actual rendered layout — full-height zoomable area

* fix(sidebar): left-align folder lock icon next to name

Author: waleedlatif1

apps/sim/app/api/files/view/[id]/route.ts

@@ -0,0 +1,44 @@
+import { createLogger } from '@sim/logger'
+import type { NextRequest } from 'next/server'
+import { NextResponse } from 'next/server'
+import { fileViewContract } from '@/lib/api/contracts/storage-transfer'
+import { parseRequest } from '@/lib/api/server'
+import { checkSessionOrInternalAuth } from '@/lib/auth/hybrid'
+import { withRouteHandler } from '@/lib/core/utils/with-route-handler'
+import { USE_BLOB_STORAGE } from '@/lib/uploads/config'
+import { getFileMetadataById } from '@/lib/uploads/server/metadata'
+import { verifyFileAccess } from '@/app/api/files/authorization'
+
+const logger = createLogger('FilesViewAPI')
+
+export const GET = withRouteHandler(
+  async (request: NextRequest, context: { params: Promise<{ id: string }> }) => {
+    const parsed = await parseRequest(fileViewContract, request, context)
+    if (!parsed.success) return parsed.response
+
+    const { id } = parsed.data.params
+
+    const authResult = await checkSessionOrInternalAuth(request, { requireWorkflowId: false })
+    if (!authResult.success || !authResult.userId) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const record = await getFileMetadataById(id)
+    if (!record) {
+      logger.warn('File not found by ID', { id })
+      return NextResponse.json({ error: 'Not found' }, { status: 404 })
+    }
+
+    const hasAccess = await verifyFileAccess(record.key, authResult.userId)
+    if (!hasAccess) {
+      logger.warn('Unauthorized file view attempt', { id, userId: authResult.userId })
+      return NextResponse.json({ error: 'Forbidden' }, { status: 403 })
+    }
+
+    const storagePrefix = USE_BLOB_STORAGE ? 'blob' : 's3'
+    const servePath = `/api/files/serve/${storagePrefix}/${encodeURIComponent(record.key)}`
+    logger.info('Redirecting file view to serve path', { id, servePath })
+
+    return NextResponse.redirect(new URL(servePath, request.url), { status: 302 })
+  }
+)

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

@@ -10,7 +10,7 @@ import { Streamdown } from 'streamdown'
 import 'streamdown/styles.css'
 import { toError } from '@sim/utils/errors'
 import { generateShortId } from '@sim/utils/id'
-import { Checkbox, CopyCodeButton, highlight, languages } from '@/components/emcn'
+import { Checkbox, CopyCodeButton, highlight, languages, Skeleton } from '@/components/emcn'
 import '@/components/emcn/components/code/code.css'
 import 'prismjs/components/prism-bash'
 import 'prismjs/components/prism-css'
@@ -98,6 +98,33 @@ export const PreviewPanel = memo(function PreviewPanel({
 
 const CALLOUT_TYPES = new Set(['NOTE', 'TIP', 'WARNING', 'IMPORTANT', 'CAUTION'])
 
+function remarkMermaid() {
+  return (tree: { type: string; children?: unknown[] }) => {
+    function processNode(node: {
+      type: string
+      children?: unknown[]
+      lang?: string
+      value?: string
+      data?: Record<string, unknown>
+    }) {
+      if (!node.children) return
+      for (const child of node.children) {
+        const c = child as typeof node
+        if (c.type === 'code' && c.lang === 'mermaid') {
+          c.data = {
+            hName: 'mermaid-diagram',
+            hProperties: { definition: c.value ?? '' },
+            hChildren: [],
+          }
+        } else {
+          processNode(c)
+        }
+      }
+    }
+    processNode(tree)
+  }
+}
+
 function remarkCallouts() {
   return (tree: { type: string; children?: unknown[] }) => {
     function processNode(node: { type: string; children?: unknown[] }) {
@@ -142,7 +169,7 @@ function remarkCallouts() {
   }
 }
 
-const REMARK_PLUGINS = [remarkGfm, remarkBreaks, remarkCallouts]
+const REMARK_PLUGINS = [remarkGfm, remarkBreaks, remarkMermaid, remarkCallouts]
 const REHYPE_PLUGINS = [rehypeSlug]
 
 /**
@@ -418,13 +445,39 @@ const MermaidDiagram = memo(function MermaidDiagram({
   }
 
   if (!trimmedDefinition || !svg || renderedDefinition !== trimmedDefinition) {
+    if (zoomable) {
+      return (
+        <div className='h-full p-6'>
+          <Skeleton className='h-full w-full rounded-lg' />
+        </div>
+      )
+    }
     return <MermaidCodeBlockSkeleton />
   }
   return null
 })
 
+function resolveSimFileUrl(src: string | undefined): string | undefined {
+  if (!src) return src
+  try {
+    const parsed = new URL(src, 'http://placeholder')
+    if (parsed.origin !== 'http://placeholder') return src
+    const [, seg1, , seg3, fileId] = parsed.pathname.split('/')
+    if (seg1 === 'workspace' && seg3 === 'files' && fileId) {
+      return `/api/files/view/${fileId}`
+    }
+  } catch {
+    // not a parseable URL
+  }
+  return src
+}
+
 const STATIC_MARKDOWN_COMPONENTS = {
   pre: ({ children }: { children?: React.ReactNode }) => <>{children}</>,
+  'mermaid-diagram': ({ definition }: { definition?: string }) => {
+    const isStreaming = useContext(MermaidStreamingCtx)
+    return <MermaidDiagram definition={definition ?? ''} isStreaming={isStreaming} />
+  },
   p: ({ children }: { children?: React.ReactNode }) => (
     <p className='mb-3 break-words text-[14px] text-[var(--text-primary)] leading-[1.6] last:mb-0'>
       {children}
@@ -493,15 +546,10 @@ const STATIC_MARKDOWN_COMPONENTS = {
     )
   },
   code: ({ children, className }: { children?: React.ReactNode; className?: string }) => {
-    const isMarkdownStreaming = useContext(MermaidStreamingCtx)
     const langMatch = className?.match(/language-(\w+)/)
     const langRaw = langMatch?.[1] ?? ''
     const codeString = extractTextContent(children)
 
-    if (langRaw === 'mermaid') {
-      return <MermaidDiagram definition={codeString} isStreaming={isMarkdownStreaming} />
-    }
-
     if (!codeString) {
       return (
         <code className='whitespace-normal rounded bg-[var(--surface-5)] px-1.5 py-0.5 font-mono text-[var(--caution)]'>
@@ -562,14 +610,17 @@ const STATIC_MARKDOWN_COMPONENTS = {
     )
   },
   hr: () => <hr className='my-6 border-[var(--border)]' />,
-  img: ({ src, alt }: React.ImgHTMLAttributes<HTMLImageElement>) => (
-    <img
-      src={src as string}
-      alt={alt ?? ''}
-      className='my-3 max-w-full rounded-md'
-      loading='lazy'
-    />
-  ),
+  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'
+      />
+    )
+  },
   table: ({ children }: { children?: React.ReactNode }) => (
     <div className='my-4 max-w-full overflow-x-auto'>
       <table className='w-full border-collapse text-[13px]'>{children}</table>
@@ -832,6 +883,7 @@ const MarkdownPreview = memo(function MarkdownPreview({
           remarkPlugins={REMARK_PLUGINS}
           rehypePlugins={REHYPE_PLUGINS}
           components={MARKDOWN_COMPONENTS}
+          allowedTags={{ 'mermaid-diagram': ['definition'] }}
         >
           {markdownContent}
         </Streamdown>

apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-view/trace-view.tsx

@@ -45,7 +45,7 @@ import {
 } from '@/app/workspace/[workspaceId]/logs/components/log-details/utils'
 import { useCodeViewerFeatures } from '@/hooks/use-code-viewer'
 
-const DEFAULT_TREE_PANE_WIDTH = 360
+const DEFAULT_TREE_PANE_WIDTH = 240
 const MIN_TREE_PANE_WIDTH = 200
 const MAX_TREE_PANE_WIDTH = 600
 const INDENT_PX = 12

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx

@@ -545,18 +545,20 @@ export function FolderItem({
           />
         ) : (
           <div className='flex min-w-0 flex-1 items-center gap-2'>
-            <span
-              className='min-w-0 flex-1 truncate font-base text-[var(--text-body)]'
-              onDoubleClick={handleDoubleClick}
-            >
-              {folder.name}
-            </span>
-            {folder.locked && (
-              <Lock
-                className='h-[12px] w-[12px] flex-shrink-0 pointer-events-none text-[var(--text-icon)]'
-                aria-label='Folder is locked'
-              />
-            )}
+            <div className='flex min-w-0 flex-1 items-center gap-1'>
+              <span
+                className='min-w-0 truncate font-base text-[var(--text-body)]'
+                onDoubleClick={handleDoubleClick}
+              >
+                {folder.name}
+              </span>
+              {folder.locked && (
+                <Lock
+                  className='h-[12px] w-[12px] flex-shrink-0 pointer-events-none text-[var(--text-icon)]'
+                  aria-label='Folder is locked'
+                />
+              )}
+            </div>
             <button
               type='button'
               aria-label='Folder options'

apps/sim/lib/api/contracts/storage-transfer.ts

@@ -450,6 +450,10 @@ export const fileServeQuerySchema = z.object({
   raw: z.string().nullish(),
 })
 
+export const fileViewParamsSchema = z.object({
+  id: z.string().uuid('File ID must be a valid UUID'),
+})
+
 export const boxUploadContract = defineRouteContract({
   method: 'POST',
   path: '/api/tools/box/upload',
@@ -696,6 +700,13 @@ export const fileServeContract = defineRouteContract({
   response: { mode: 'binary' },
 })
 
+export const fileViewContract = defineRouteContract({
+  method: 'GET',
+  path: '/api/files/view/[id]',
+  params: fileViewParamsSchema,
+  response: { mode: 'binary' },
+})
+
 export type BoxUploadBody = ContractBodyInput<typeof boxUploadContract>
 export type BoxUploadResponse = ContractJsonResponse<typeof boxUploadContract>
 export type DropboxUploadBody = ContractBodyInput<typeof dropboxUploadContract>
@@ -737,3 +748,4 @@ export type TokenBoundMultipartBody = z.output<typeof tokenBoundMultipartBodySch
 export type GetMultipartPartUrlsBody = z.output<typeof getMultipartPartUrlsBodySchema>
 export type FileServeParams = ContractParamsInput<typeof fileServeContract>
 export type FileServeQuery = ContractQueryInput<typeof fileServeContract>
+export type FileViewParams = ContractParamsInput<typeof fileViewContract>

apps/sim/lib/uploads/server/metadata.ts

@@ -140,6 +140,24 @@ export async function getFileMetadataByKey(
   return record ?? null
 }
 
+/**
+ * Get file metadata by ID
+ */
+export async function getFileMetadataById(
+  id: string,
+  options?: { includeDeleted?: boolean }
+): Promise<FileMetadataRecord | null> {
+  const { includeDeleted = false } = options ?? {}
+  const conditions = [eq(workspaceFiles.id, id)]
+  if (!includeDeleted) conditions.push(isNull(workspaceFiles.deletedAt))
+  const [record] = await db
+    .select()
+    .from(workspaceFiles)
+    .where(conditions.length > 1 ? and(...conditions) : conditions[0])
+    .limit(1)
+  return record ?? null
+}
+
 /**
  * Get file metadata by context with optional workspaceId/userId filters
  */