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

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

@@ -1,8 +1,8 @@
 import { AuditAction, AuditResourceType, recordAudit } from '@sim/audit'
 import { createLogger } from '@sim/logger'
+import { toError } from '@sim/utils/errors'
 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 +17,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 +31,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 +60,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,
@@ -83,15 +81,15 @@ export const PUT = withRouteHandler(
         file: updatedFile,
       })
     } catch (error) {
-      const errorMessage = error instanceof Error ? error.message : 'Failed to update file content'
+      const errorMessage = toError(error).message || 'Failed to update file content'
       const isNotFound = errorMessage.includes('File not found')
       const isQuotaExceeded = errorMessage.includes('Storage limit exceeded')
       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 fallback={null}>
+      <Files />
+    </Suspense>
+  )
+}

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

@@ -1,11 +1,92 @@
-import { memo } from 'react'
+'use client'
+
+import { forwardRef, memo, useImperativeHandle, useRef, 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 interface DataTableHandle {
+  commitEdit: () => void
 }
 
-export const DataTable = memo(function DataTable({ headers, rows }: DataTableProps) {
+type EditingCell = { row: number; col: number } | null
+
+const DataTableBase = forwardRef<DataTableHandle, DataTableProps>(function DataTable(
+  { headers, rows, editConfig },
+  ref
+) {
+  const [editingCell, setEditingCell] = useState<EditingCell>(null)
+  const [editValue, setEditValue] = useState('')
+
+  // Always-current ref so the imperative handle doesn't go stale
+  const editStateRef = useRef({ editingCell, editValue, editConfig })
+  editStateRef.current = { editingCell, editValue, editConfig }
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      commitEdit: () => {
+        const { editingCell, editValue, editConfig } = editStateRef.current
+        if (!editingCell || !editConfig) return
+        const { row, col } = editingCell
+        if (row === -1) {
+          editConfig.onHeaderChange(col, editValue)
+        } else {
+          editConfig.onCellChange(row, col, editValue)
+        }
+        setEditingCell(null)
+      },
+    }),
+    []
+  )
+
+  const setInputRef = (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 +95,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 +121,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>
@@ -36,3 +150,5 @@ export const DataTable = memo(function DataTable({ headers, rows }: DataTablePro
     </div>
   )
 })
+
+export const DataTable = memo(DataTableBase)