improvement(tables): click-to-select navigation, inline rename, column resize (#3496)

* improvement(tables): click-to-select navigation, inline rename, column resize

* fix(tables): address PR review comments

- Add doneRef guard to useInlineRename preventing Enter+blur double-fire
- Fix PATCH error handler: return 500 for non-validation errors, fix unreachable logger.error
- Stop click propagation on breadcrumb rename input

* fix(tables): add rows-affected check in renameTable service

Prevents silent no-op when tableId doesn't match any record.

* fix(tables): useMemo deps + placeholder memo initialCharacter check

- Use primitive editingId/editValue in useMemo deps instead of whole
  useInlineRename object (which creates a new ref every render)
- Add initialCharacter comparison to placeholderPropsAreEqual, matching
  the existing pattern in dataRowPropsAreEqual

* fix(tables): address round 2 review comments

- Mirror name validation (regex + max length) in PatchTableSchema so
  validateTableName failures return 400 instead of 500
- Add .returning() + rows-affected check to renameWorkspaceFile,
  matching the renameTable pattern
- Check response.ok before parsing JSON in useRenameWorkspaceFile,
  matching the useRenameTable pattern

* refactor(tables): reuse InlineRenameInput in BreadcrumbSegment

Replace duplicated inline input markup with the shared component.
Eliminates redundant useRef, useEffect, and input boilerplate.

* fix(tables): set doneRef in cancelRename to prevent blur-triggered save

Escape → cancelRename → input unmounts → blur → submitRename would
save instead of canceling. Now cancelRename sets doneRef like
submitRename does, blocking the subsequent blur handler.

* fix(tables): pointercancel cleanup + typed FileConflictError

- Add pointercancel handler to column resize to prevent listener leaks
  when system interrupts the pointer (touch-action override, etc.)
- Replace stringly-typed error.message.includes('already exists') with
  FileConflictError class for refactor-safe 409 status detection

* fix(tables): stable useCallback dep + rename shadowed variable

- Use listRename.startRename (stable ref) instead of whole listRename
  object in handleContextMenuRename deps
- Rename inner 'target' to 'origin' in arrow-key handler to avoid
  shadowing the outer HTMLElement 'target'

* fix(tables): move class below imports, stable submitRename, clear editingCell

- Move FileConflictError below import statements (import-first convention)
- Make submitRename a stable useCallback([]) by reading editingId and
  editValue through refs (matches existing onSaveRef pattern)
- Add setEditingCell(null) to handleEmptyRowClick for symmetry with
  handleCellClick

* feat(tables): persist column widths in table metadata

Column widths now survive navigation and page reloads. On resize-end,
widths are debounced (500ms) and saved to the table's metadata field
via a new PUT /api/table/[tableId]/metadata endpoint. On load, widths
are seeded from the server once via React Query.

* fix type checking for file viewer

* fix(tables): address review feedback — 4 fixes

1. headerRename.onSave now uses the fileId parameter directly instead
   of the selectedFile closure, preventing rename-wrong-file race
2. updateMetadataMutation uses ref pattern matching mutateRef/createRef
3. Type-to-enter filters non-numeric chars for number columns, non-date
   chars for date columns
4. renameValue only passed to actively-renaming ColumnHeaderMenu,
   preserving React.memo for other columns

* fix(tables): position-based gap rows, insert above/below, consistency fixes

- Fix gap row insert shifting: only shift rows when target position is
  occupied, preventing unnecessary displacement of rows below
- Switch to position-based indexing throughout (positionMap, maxPosition)
  instead of array-index for correct sparse position handling
- Add insert row above/below to context menu
- Use CellContent for pending values in PositionGapRows (matching PlaceholderRows)
- Add belowHeader selection overlay logic to PositionGapRows
- Remove unnecessary 500ms debounce on column width persistence

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix cells nav w keyboard

* added preview panel for html, markdown rendering, completed table

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: waleedlatif1

apps/sim/app/api/table/[tableId]/metadata/route.ts

@@ -0,0 +1,65 @@
+import { createLogger } from '@sim/logger'
+import { type NextRequest, NextResponse } from 'next/server'
+import { z } from 'zod'
+import { checkSessionOrInternalAuth } from '@/lib/auth/hybrid'
+import { generateRequestId } from '@/lib/core/utils/request'
+import type { TableMetadata } from '@/lib/table'
+import { updateTableMetadata } from '@/lib/table'
+import { accessError, checkAccess } from '@/app/api/table/utils'
+
+const logger = createLogger('TableMetadataAPI')
+
+const MetadataSchema = z.object({
+  workspaceId: z.string().min(1, 'Workspace ID is required'),
+  metadata: z.object({
+    columnWidths: z.record(z.number().positive()).optional(),
+  }),
+})
+
+interface TableRouteParams {
+  params: Promise<{ tableId: string }>
+}
+
+/** PUT /api/table/[tableId]/metadata - Update table UI metadata (column widths, etc.) */
+export async function PUT(request: NextRequest, { params }: TableRouteParams) {
+  const requestId = generateRequestId()
+  const { tableId } = await params
+
+  try {
+    const authResult = await checkSessionOrInternalAuth(request, { requireWorkflowId: false })
+    if (!authResult.success || !authResult.userId) {
+      logger.warn(`[${requestId}] Unauthorized metadata update attempt`)
+      return NextResponse.json({ error: 'Authentication required' }, { status: 401 })
+    }
+
+    const body = await request.json()
+    const validated = MetadataSchema.parse(body)
+
+    const result = await checkAccess(tableId, authResult.userId, 'write')
+    if (!result.ok) return accessError(result, requestId, tableId)
+
+    const { table } = result
+
+    if (table.workspaceId !== validated.workspaceId) {
+      return NextResponse.json({ error: 'Invalid workspace ID' }, { status: 400 })
+    }
+
+    const updated = await updateTableMetadata(
+      tableId,
+      validated.metadata,
+      table.metadata as TableMetadata | null
+    )
+
+    return NextResponse.json({ success: true, data: { metadata: updated } })
+  } catch (error) {
+    if (error instanceof z.ZodError) {
+      return NextResponse.json(
+        { error: 'Validation error', details: error.errors },
+        { status: 400 }
+      )
+    }
+
+    logger.error(`[${requestId}] Error updating table metadata:`, error)
+    return NextResponse.json({ error: 'Failed to update metadata' }, { status: 500 })
+  }
+}

apps/sim/app/api/table/[tableId]/route.ts

@@ -3,7 +3,7 @@ import { type NextRequest, NextResponse } from 'next/server'
 import { z } from 'zod'
 import { checkSessionOrInternalAuth } from '@/lib/auth/hybrid'
 import { generateRequestId } from '@/lib/core/utils/request'
-import { deleteTable, type TableSchema } from '@/lib/table'
+import { deleteTable, NAME_PATTERN, renameTable, TABLE_LIMITS, type TableSchema } from '@/lib/table'
 import { accessError, checkAccess, normalizeColumn } from '@/app/api/table/utils'
 
 const logger = createLogger('TableDetailAPI')
@@ -56,6 +56,7 @@ export async function GET(request: NextRequest, { params }: TableRouteParams) {
           schema: {
             columns: schemaData.columns.map(normalizeColumn),
           },
+          metadata: table.metadata ?? null,
           rowCount: table.rowCount,
           maxRows: table.maxRows,
           createdAt:
@@ -82,6 +83,67 @@ export async function GET(request: NextRequest, { params }: TableRouteParams) {
   }
 }
 
+const PatchTableSchema = z.object({
+  workspaceId: z.string().min(1, 'Workspace ID is required'),
+  name: z
+    .string()
+    .min(1, 'Name is required')
+    .max(
+      TABLE_LIMITS.MAX_TABLE_NAME_LENGTH,
+      `Name must be at most ${TABLE_LIMITS.MAX_TABLE_NAME_LENGTH} characters`
+    )
+    .regex(
+      NAME_PATTERN,
+      'Name must start with letter or underscore, followed by alphanumeric or underscore'
+    ),
+})
+
+/** PATCH /api/table/[tableId] - Renames a table. */
+export async function PATCH(request: NextRequest, { params }: TableRouteParams) {
+  const requestId = generateRequestId()
+  const { tableId } = await params
+
+  try {
+    const authResult = await checkSessionOrInternalAuth(request, { requireWorkflowId: false })
+    if (!authResult.success || !authResult.userId) {
+      logger.warn(`[${requestId}] Unauthorized table rename attempt`)
+      return NextResponse.json({ error: 'Authentication required' }, { status: 401 })
+    }
+
+    const body = await request.json()
+    const validated = PatchTableSchema.parse(body)
+
+    const result = await checkAccess(tableId, authResult.userId, 'write')
+    if (!result.ok) return accessError(result, requestId, tableId)
+
+    const { table } = result
+
+    if (table.workspaceId !== validated.workspaceId) {
+      return NextResponse.json({ error: 'Invalid workspace ID' }, { status: 400 })
+    }
+
+    const updated = await renameTable(tableId, validated.name, requestId)
+
+    return NextResponse.json({
+      success: true,
+      data: { table: updated },
+    })
+  } catch (error) {
+    if (error instanceof z.ZodError) {
+      return NextResponse.json(
+        { error: 'Validation error', details: error.errors },
+        { status: 400 }
+      )
+    }
+
+    logger.error(`[${requestId}] Error renaming table:`, error)
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : 'Failed to rename table' },
+      { status: 500 }
+    )
+  }
+}
+
 /** DELETE /api/table/[tableId] - Deletes a table and all its rows. */
 export async function DELETE(request: NextRequest, { params }: TableRouteParams) {
   const requestId = generateRequestId()

apps/sim/app/api/table/[tableId]/rows/route.ts

@@ -27,6 +27,7 @@ const logger = createLogger('TableRowsAPI')
 const InsertRowSchema = z.object({
   workspaceId: z.string().min(1, 'Workspace ID is required'),
   data: z.record(z.unknown(), { required_error: 'Row data is required' }),
+  position: z.number().int().min(0).optional(),
 })
 
 const BatchInsertRowsSchema = z.object({
@@ -235,6 +236,7 @@ export async function POST(request: NextRequest, { params }: TableRowsRouteParam
         data: rowData,
         workspaceId: validated.workspaceId,
         userId: authResult.userId,
+        position: validated.position,
       },
       table,
       requestId

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

@@ -3,13 +3,81 @@ import { type NextRequest, NextResponse } from 'next/server'
 import { AuditAction, AuditResourceType, recordAudit } from '@/lib/audit/log'
 import { getSession } from '@/lib/auth'
 import { generateRequestId } from '@/lib/core/utils/request'
-import { deleteWorkspaceFile } from '@/lib/uploads/contexts/workspace'
+import {
+  deleteWorkspaceFile,
+  FileConflictError,
+  renameWorkspaceFile,
+} from '@/lib/uploads/contexts/workspace'
 import { getUserEntityPermissions } from '@/lib/workspaces/permissions/utils'
 
 export const dynamic = 'force-dynamic'
 
 const logger = createLogger('WorkspaceFileAPI')
 
+/**
+ * PATCH /api/workspaces/[id]/files/[fileId]
+ * Rename a workspace file (requires write permission)
+ */
+export async function PATCH(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string; fileId: string }> }
+) {
+  const requestId = generateRequestId()
+  const { id: workspaceId, fileId } = await params
+
+  try {
+    const session = await getSession()
+    if (!session?.user?.id) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const userPermission = await getUserEntityPermissions(session.user.id, 'workspace', workspaceId)
+    if (userPermission !== 'admin' && userPermission !== 'write') {
+      logger.warn(
+        `[${requestId}] User ${session.user.id} lacks write permission for workspace ${workspaceId}`
+      )
+      return NextResponse.json({ error: 'Insufficient permissions' }, { status: 403 })
+    }
+
+    const body = await request.json()
+    const { name } = body
+
+    if (!name || typeof name !== 'string' || !name.trim()) {
+      return NextResponse.json({ error: 'Name is required' }, { status: 400 })
+    }
+
+    const updatedFile = await renameWorkspaceFile(workspaceId, fileId, name)
+
+    logger.info(`[${requestId}] Renamed workspace file: ${fileId} to "${updatedFile.name}"`)
+
+    recordAudit({
+      workspaceId,
+      actorId: session.user.id,
+      actorName: session.user.name,
+      actorEmail: session.user.email,
+      action: AuditAction.FILE_UPDATED,
+      resourceType: AuditResourceType.FILE,
+      resourceId: fileId,
+      description: `Renamed file to "${updatedFile.name}"`,
+      request,
+    })
+
+    return NextResponse.json({
+      success: true,
+      file: updatedFile,
+    })
+  } catch (error) {
+    logger.error(`[${requestId}] Error renaming workspace file:`, error)
+    return NextResponse.json(
+      {
+        success: false,
+        error: error instanceof Error ? error.message : 'Failed to rename file',
+      },
+      { status: error instanceof FileConflictError ? 409 : 500 }
+    )
+  }
+}
+
 /**
  * DELETE /api/workspaces/[id]/files/[fileId]
  * Delete a workspace file (requires write permission)

apps/sim/app/workspace/[workspaceId]/components/index.ts

@@ -1,6 +1,8 @@
 export { ErrorState, type ErrorStateProps } from './error'
+export { InlineRenameInput } from './inline-rename-input'
 export { ownerCell } from './resource/components/owner-cell/owner-cell'
 export type {
+  BreadcrumbEditing,
   BreadcrumbItem,
   CreateAction,
   DropdownOption,

apps/sim/app/workspace/[workspaceId]/components/inline-rename-input.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+
+interface InlineRenameInputProps {
+  value: string
+  onChange: (value: string) => void
+  onSubmit: () => void
+  onCancel: () => void
+}
+
+export function InlineRenameInput({ value, onChange, onSubmit, onCancel }: InlineRenameInputProps) {
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    const el = inputRef.current
+    if (el) {
+      el.focus()
+      el.select()
+    }
+  }, [])
+
+  return (
+    <input
+      ref={inputRef}
+      type='text'
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter') onSubmit()
+        if (e.key === 'Escape') onCancel()
+      }}
+      onBlur={onSubmit}
+      onClick={(e) => e.stopPropagation()}
+      className='min-w-0 flex-1 truncate border-0 bg-transparent p-0 font-medium text-[14px] text-[var(--text-body)] outline-none focus:outline-none focus:ring-0'
+    />
+  )
+}

apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/index.ts

@@ -1,2 +1,8 @@
-export type { BreadcrumbItem, CreateAction, DropdownOption, HeaderAction } from './resource-header'
+export type {
+  BreadcrumbEditing,
+  BreadcrumbItem,
+  CreateAction,
+  DropdownOption,
+  HeaderAction,
+} from './resource-header'
 export { ResourceHeader } from './resource-header'

apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx

@@ -9,6 +9,7 @@ import {
   Plus,
 } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
+import { InlineRenameInput } from '@/app/workspace/[workspaceId]/components/inline-rename-input'
 
 export interface DropdownOption {
   label: string
@@ -17,10 +18,19 @@ export interface DropdownOption {
   disabled?: boolean
 }
 
+export interface BreadcrumbEditing {
+  isEditing: boolean
+  value: string
+  onChange: (value: string) => void
+  onSubmit: () => void
+  onCancel: () => void
+}
+
 export interface BreadcrumbItem {
   label: string
   onClick?: () => void
   dropdownItems?: DropdownOption[]
+  editing?: BreadcrumbEditing
 }
 
 export interface HeaderAction {
@@ -73,6 +83,7 @@ export function ResourceHeader({
                   label={crumb.label}
                   onClick={crumb.onClick}
                   dropdownItems={crumb.dropdownItems}
+                  editing={crumb.editing}
                 />
               </Fragment>
             ))
@@ -125,12 +136,28 @@ function BreadcrumbSegment({
   label,
   onClick,
   dropdownItems,
+  editing,
 }: {
   icon?: React.ElementType
   label: string
   onClick?: () => void
   dropdownItems?: DropdownOption[]
+  editing?: BreadcrumbEditing
 }) {
+  if (editing?.isEditing) {
+    return (
+      <span className='inline-flex items-center px-[8px] py-[4px]'>
+        {Icon && <Icon className='mr-[12px] h-[14px] w-[14px] text-[var(--text-icon)]' />}
+        <InlineRenameInput
+          value={editing.value}
+          onChange={editing.onChange}
+          onSubmit={editing.onSubmit}
+          onCancel={editing.onCancel}
+        />
+      </span>
+    )
+  }
+
   const content = (
     <>
       {Icon && <Icon className='mr-[12px] h-[14px] w-[14px] text-[var(--text-icon)]' />}