feat(files): extract PDF viewer behind SSR boundary and polish file preview

## Core architectural fix

Move all react-pdf / pdfjs-dist code into a new pdf-viewer.tsx module and
import it exclusively via next/dynamic({ ssr: false }). pdfjs-dist v5
references DOMMatrix at module evaluation time, which crashed SSR. The
previous workaround (a DOMMatrix polyfill in instrumentation.ts) is removed
in favour of this proper hard module boundary.

## PDF viewer improvements

- Cursor-anchored zoom: Ctrl/⌘+wheel and trackpad-pinch now zoom toward the
  cursor instead of the top-left corner. Toolbar ± buttons anchor to the
  viewport centre. Uses the canonical scroll-adjust formula used by map and
  canvas viewers.
- Horizontal scroll: dropping flex-col from the scroll container lets the
  zoomed pages wrapper overflow naturally and produces a horizontal scrollbar
  at zoom > 1×.
- Loading skeleton: replaced the conditional inline skeleton with an
  absolute inset-0 overlay so it fills the scroll container correctly in all
  layout contexts.
- Shadow tokens: fixed shadow-[var(--shadow-medium)] and
  shadow-[var(--shadow-card)] to use the Tailwind utility classes
  shadow-medium and shadow-card directly.

## File viewer cleanup

- data-table.tsx: wrap setInputRef in useCallback([]) so the ref callback
  has a stable identity across renders. Previously the inline function got a
  new identity on every keystroke (because editValue state changed), causing
  React to teardown/remount the ref and re-run node.select() on every
  character typed.
- preview-panel.tsx: keep useMemo on ctxValue passed to Context.Provider —
  Context uses Object.is, so a new object every render causes unnecessary
  consumer re-renders.
- resource-content.tsx: remove unnecessary useCallback/useMemo wrappers on
  handlers and derived values that have no memoization observers.

## API route

- Wrap content route with withRouteHandler for automatic request-ID tracking
  via AsyncLocalStorage; remove manual generateRequestId() calls.
- Add resourceName to audit record; add encoding param support (base64 /
  utf-8).

## Query hooks

- Include key (storage object key) in both useWorkspaceFileContent and
  useWorkspaceFileBinary query key tuples so the cache is correctly busted
  when a file is re-uploaded with a new storage key.

## Other

- Add Suspense boundaries to files/page.tsx and files/[fileId]/page.tsx
  (required for useSearchParams inside the Files component).
- Add mmd to SUPPORTED_CODE_EXTENSIONS (Mermaid diagrams).
- Add https: to CSP img-src.
- Remove ==== separator comments from lib/copilot/constants.ts.
- New dependencies: pdfjs-dist 5.4.296, mermaid 11.14.0,
  monaco-editor 0.55.1, @monaco-editor/react 4.7.0.

Author: waleedlatif1

apps/sim/app/api/workspaces/[id]/files/[fileId]/content/route.ts

@@ -2,7 +2,6 @@ import { AuditAction, AuditResourceType, recordAudit } from '@sim/audit'
 import { createLogger } from '@sim/logger'
 import { type NextRequest, NextResponse } from 'next/server'
 import { getSession } from '@/lib/auth'
-import { generateRequestId } from '@/lib/core/utils/request'
 import { withRouteHandler } from '@/lib/core/utils/with-route-handler'
 import { updateWorkspaceFileContent } from '@/lib/uploads/contexts/workspace'
 import { getUserEntityPermissions } from '@/lib/workspaces/permissions/utils'
@@ -17,7 +16,6 @@ const logger = createLogger('WorkspaceFileContentAPI')
  */
 export const PUT = withRouteHandler(
   async (request: NextRequest, { params }: { params: Promise<{ id: string; fileId: string }> }) => {
-    const requestId = generateRequestId()
     const { id: workspaceId, fileId } = await params
 
     try {
@@ -32,20 +30,19 @@ export const PUT = withRouteHandler(
         workspaceId
       )
       if (userPermission !== 'admin' && userPermission !== 'write') {
-        logger.warn(
-          `[${requestId}] User ${session.user.id} lacks write permission for workspace ${workspaceId}`
-        )
+        logger.warn(`User ${session.user.id} lacks write permission for workspace ${workspaceId}`)
         return NextResponse.json({ error: 'Insufficient permissions' }, { status: 403 })
       }
 
       const body = await request.json()
-      const { content } = body as { content: string }
+      const { content, encoding } = body as { content: string; encoding?: 'base64' | 'utf-8' }
 
       if (typeof content !== 'string') {
         return NextResponse.json({ error: 'Content must be a string' }, { status: 400 })
       }
 
-      const buffer = Buffer.from(content, 'utf-8')
+      const buffer =
+        encoding === 'base64' ? Buffer.from(content, 'base64') : Buffer.from(content, 'utf-8')
 
       const maxFileSizeBytes = 50 * 1024 * 1024
       if (buffer.length > maxFileSizeBytes) {
@@ -62,7 +59,7 @@ export const PUT = withRouteHandler(
         buffer
       )
 
-      logger.info(`[${requestId}] Updated content for workspace file: ${updatedFile.name}`)
+      logger.info(`Updated content for workspace file: ${updatedFile.name}`)
 
       recordAudit({
         workspaceId,
@@ -89,9 +86,9 @@ export const PUT = withRouteHandler(
       const status = isNotFound ? 404 : isQuotaExceeded ? 402 : 500
 
       if (status === 500) {
-        logger.error(`[${requestId}] Error updating file content:`, error)
+        logger.error('Error updating file content:', error)
       } else {
-        logger.warn(`[${requestId}] ${errorMessage}`)
+        logger.warn(errorMessage)
       }
 
       return NextResponse.json({ success: false, error: errorMessage }, { status })

apps/sim/app/workspace/[workspaceId]/files/[fileId]/page.tsx

@@ -1,3 +1,4 @@
+import { Suspense } from 'react'
 import type { Metadata } from 'next'
 import { Files } from '../files'
 
@@ -6,4 +7,10 @@ export const metadata: Metadata = {
   robots: { index: false },
 }
 
-export default Files
+export default function FilesFilePage() {
+  return (
+    <Suspense>
+      <Files />
+    </Suspense>
+  )
+}

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

@@ -1,11 +1,63 @@
-import { memo } from 'react'
+'use client'
+
+import { memo, useCallback, useState } from 'react'
+import { cn } from '@/lib/core/utils/cn'
+
+interface EditConfig {
+  onCellChange: (row: number, col: number, value: string) => void
+  onHeaderChange: (col: number, value: string) => void
+}
 
 interface DataTableProps {
   headers: string[]
   rows: string[][]
+  editConfig?: EditConfig
 }
 
-export const DataTable = memo(function DataTable({ headers, rows }: DataTableProps) {
+type EditingCell = { row: number; col: number } | null
+
+export const DataTable = memo(function DataTable({ headers, rows, editConfig }: DataTableProps) {
+  const [editingCell, setEditingCell] = useState<EditingCell>(null)
+  const [editValue, setEditValue] = useState('')
+
+  const setInputRef = useCallback((node: HTMLInputElement | null) => {
+    if (node) {
+      node.focus()
+      node.select()
+    }
+  }, [])
+
+  const startEdit = (row: number, col: number, currentValue: string) => {
+    if (!editConfig) return
+    setEditingCell({ row, col })
+    setEditValue(currentValue)
+  }
+
+  const commitEdit = () => {
+    if (!editingCell || !editConfig) return
+    const { row, col } = editingCell
+    if (row === -1) {
+      editConfig.onHeaderChange(col, editValue)
+    } else {
+      editConfig.onCellChange(row, col, editValue)
+    }
+    setEditingCell(null)
+  }
+
+  const cancelEdit = () => setEditingCell(null)
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter' || e.key === 'Tab') {
+      e.preventDefault()
+      commitEdit()
+    } else if (e.key === 'Escape') {
+      cancelEdit()
+    }
+  }
+
+  const isEditing = (row: number, col: number) =>
+    editingCell?.row === row && editingCell?.col === col
+
   return (
     <div className='overflow-x-auto rounded-md border border-[var(--border)]'>
       <table className='w-full border-collapse text-[13px]'>
@@ -14,9 +66,24 @@ export const DataTable = memo(function DataTable({ headers, rows }: DataTablePro
             {headers.map((header, i) => (
               <th
                 key={i}
-                className='whitespace-nowrap px-3 py-2 text-left font-semibold text-[12px] text-[var(--text-primary)]'
+                className={cn(
+                  'whitespace-nowrap px-3 py-2 text-left font-semibold text-[12px] text-[var(--text-primary)]',
+                  editConfig && 'cursor-pointer select-none hover:bg-[var(--surface-3)]'
+                )}
+                onClick={() => editConfig && startEdit(-1, i, String(header ?? ''))}
               >
-                {String(header ?? '')}
+                {isEditing(-1, i) ? (
+                  <input
+                    ref={setInputRef}
+                    value={editValue}
+                    onChange={(e) => setEditValue(e.target.value)}
+                    onBlur={commitEdit}
+                    onKeyDown={handleKeyDown}
+                    className='w-full min-w-[60px] bg-transparent font-semibold text-[12px] text-[var(--text-primary)] outline-none ring-1 ring-[var(--brand-secondary)] ring-inset'
+                  />
+                ) : (
+                  String(header ?? '')
+                )}
               </th>
             ))}
           </tr>
@@ -25,8 +92,26 @@ export const DataTable = memo(function DataTable({ headers, rows }: DataTablePro
           {rows.map((row, ri) => (
             <tr key={ri} className='border-[var(--border)] border-t'>
               {headers.map((_, ci) => (
-                <td key={ci} className='whitespace-nowrap px-3 py-2 text-[var(--text-secondary)]'>
-                  {String(row[ci] ?? '')}
+                <td
+                  key={ci}
+                  className={cn(
+                    'whitespace-nowrap px-3 py-2 text-[var(--text-secondary)]',
+                    editConfig && 'cursor-pointer select-none hover:bg-[var(--surface-2)]'
+                  )}
+                  onClick={() => editConfig && startEdit(ri, ci, String(row[ci] ?? ''))}
+                >
+                  {isEditing(ri, ci) ? (
+                    <input
+                      ref={setInputRef}
+                      value={editValue}
+                      onChange={(e) => setEditValue(e.target.value)}
+                      onBlur={commitEdit}
+                      onKeyDown={handleKeyDown}
+                      className='w-full min-w-[60px] bg-transparent text-[13px] text-[var(--text-secondary)] outline-none ring-1 ring-[var(--brand-secondary)] ring-inset'
+                    />
+                  ) : (
+                    String(row[ci] ?? '')
+                  )}
                 </td>
               ))}
             </tr>