improvement(tables): fix cell editing flash, batch API docs, and UI polish (#3507)

* fix: show text cursor in chunk editor and ensure textarea fills container

Add cursor-text to the editor wrapper so the whole area shows a text
cursor. Click on empty space focuses the textarea. Changed textarea from
h-full/w-full to flex-1/min-h-0 so it properly fills the flex container.

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

* improvement(tables): fix cell editing flash, add batch API docs, and UI polish

Fix stale-data flash when saving inline cell edits by using TanStack Query's
isPending+variables pattern instead of manual cache writes. Also adds OpenAPI
docs for batch table endpoints, DatePicker support in row modal, duplicate row
in context menu, and styling improvements.

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

* fix: remove dead resolveColumnFromEvent callback

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

* fix: unify paste undo into single create-rows action

Batch-created rows from paste now push one `create-rows` undo entry
instead of N individual `create-row` entries, so a single Ctrl+Z
reverses the entire paste operation.

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

* fix: validate dates in inline editor and displayToStorage

InlineDateEditor now validates computed values via Date.parse before
saving, preventing invalid strings like "hello" from being sent to the
server. displayToStorage now rejects out-of-range month/day values
(e.g. 13/32) instead of producing invalid YYYY-MM-DD strings.

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

* fix: accept ISO date format in inline date editor

Fall back to raw draft input when displayToStorage returns null, so
valid ISO dates like "2024-03-15" pasted or typed directly are
accepted instead of silently discarded. Date.parse still validates
the final value.

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

* fix: add ISO date support to displayToStorage and fix picker Escape

displayToStorage now recognizes YYYY-MM-DD input directly, so ISO
dates typed or pasted work correctly for both saving and picker sync.

DatePicker Escape now refocuses the input instead of saving, so the
user can press Escape again to cancel or Enter to confirm — matching
the expected cancel behavior.

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

* fix: remove dead paste boundary check

The totalR guard in handlePaste could never trigger since totalR
included pasteRows.length, making targetRow always < totalR.
Remove the unused variable and simplify the selection focus calc.

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

* update openapi

---------

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

Author: waleedlatif1

apps/docs/openapi.json

@@ -690,6 +690,10 @@ export async function PATCH(request: NextRequest, { params }: TableRowsRoutePara
     if (
       errorMessage.includes('Row size exceeds') ||
       errorMessage.includes('Schema validation') ||
+      errorMessage.includes('must be valid') ||
+      errorMessage.includes('must be string') ||
+      errorMessage.includes('must be number') ||
+      errorMessage.includes('must be boolean') ||
       errorMessage.includes('must be unique') ||
       errorMessage.includes('Unique constraint violation') ||
       errorMessage.includes('Cannot set unique column') ||

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

@@ -65,6 +65,7 @@ const CreateTableSchema = z.object({
       ),
   }),
   workspaceId: z.string().min(1, 'Workspace ID is required'),
+  initialRowCount: z.number().int().min(0).max(100).optional(),
 })
 
 const ListTablesSchema = z.object({
@@ -133,6 +134,7 @@ export async function POST(request: NextRequest) {
         userId: authResult.userId,
         maxRows: planLimits.maxRowsPerTable,
         maxTables: planLimits.maxTables,
+        initialRowCount: params.initialRowCount,
       },
       requestId
     )

apps/sim/app/api/table/route.ts

@@ -125,9 +125,14 @@ export function ChunkEditor({
 
   return (
     <div className='flex flex-1 flex-col overflow-hidden'>
-      <div className='flex flex-1 overflow-hidden'>
+      <div
+        className='flex min-h-0 flex-1 cursor-text overflow-hidden'
+        onClick={(e) => {
+          if (e.target === e.currentTarget) textareaRef.current?.focus()
+        }}
+      >
         {tokenizerOn ? (
-          <div className='h-full w-full overflow-y-auto whitespace-pre-wrap break-words p-[24px] font-sans text-[14px] text-[var(--text-body)]'>
+          <div className='h-full w-full cursor-default overflow-y-auto whitespace-pre-wrap break-words p-[24px] font-sans text-[14px] text-[var(--text-body)]'>
             {tokenStrings.map((token, index) => (
               <span
                 key={index}
@@ -153,7 +158,7 @@ export function ChunkEditor({
                     ? 'This chunk is synced from a connector and cannot be edited'
                     : 'Read-only view'
             }
-            className='h-full w-full resize-none border-0 bg-transparent p-[24px] font-sans text-[14px] text-[var(--text-body)] outline-none placeholder:text-[var(--text-subtle)]'
+            className='min-h-0 flex-1 resize-none border-0 bg-transparent p-[24px] font-sans text-[14px] text-[var(--text-body)] outline-none placeholder:text-[var(--text-subtle)]'
             disabled={!canEdit}
             readOnly={!canEdit}
             spellCheck={false}

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/chunk-editor/chunk-editor.tsx

@@ -5,16 +5,19 @@ import {
   PopoverDivider,
   PopoverItem,
 } from '@/components/emcn'
-import { ArrowDown, ArrowUp, Pencil, Trash } from '@/components/emcn/icons'
+import { ArrowDown, ArrowUp, Duplicate, Pencil, Trash } from '@/components/emcn/icons'
 import type { ContextMenuState } from '../../types'
 
+const ICON = 'h-3.5 w-3.5'
+
 interface ContextMenuProps {
   contextMenu: ContextMenuState
   onClose: () => void
   onEditCell: () => void
   onDelete: () => void
   onInsertAbove: () => void
   onInsertBelow: () => void
+  onDuplicate: () => void
   selectedRowCount?: number
   disableEdit?: boolean
   disableInsert?: boolean
@@ -28,6 +31,7 @@ export function ContextMenu({
   onDelete,
   onInsertAbove,
   onInsertBelow,
+  onDuplicate,
   selectedRowCount = 1,
   disableEdit = false,
   disableInsert = false,
@@ -61,7 +65,7 @@ export function ContextMenu({
               onClose()
             }}
           >
-            <Pencil />
+            <Pencil className={ICON} />
             Edit cell
           </PopoverItem>
         )}
@@ -72,7 +76,7 @@ export function ContextMenu({
             onClose()
           }}
         >
-          <ArrowUp />
+          <ArrowUp className={ICON} />
           Insert row above
         </PopoverItem>
         <PopoverItem
@@ -82,19 +86,29 @@ export function ContextMenu({
             onClose()
           }}
         >
-          <ArrowDown />
+          <ArrowDown className={ICON} />
           Insert row below
         </PopoverItem>
+        <PopoverItem
+          disabled={disableInsert || selectedRowCount > 1}
+          onClick={() => {
+            onDuplicate()
+            onClose()
+          }}
+        >
+          <Duplicate className={ICON} />
+          Duplicate row
+        </PopoverItem>
         <PopoverDivider />
         <PopoverItem
           disabled={disableDelete}
           onClick={() => {
             onDelete()
             onClose()
           }}
-          className='text-[var(--text-error)] focus:text-[var(--text-error)]'
+          className='!text-[var(--text-error)] [&_svg]:!text-[var(--text-error)]'
         >
-          <Trash />
+          <Trash className={ICON} />
           {deleteLabel}
         </PopoverItem>
       </PopoverContent>

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/context-menu/context-menu.tsx

@@ -6,6 +6,7 @@ import { useParams } from 'next/navigation'
 import {
   Button,
   Checkbox,
+  DatePicker,
   Input,
   Label,
   Modal,
@@ -292,10 +293,17 @@ function ColumnField({ column, value, onChange }: ColumnFieldProps) {
           className='font-mono text-[12px]'
           required={column.required}
         />
+      ) : column.type === 'date' ? (
+        <DatePicker
+          mode='single'
+          value={formatValueForInput(value, column.type) || undefined}
+          onChange={(dateStr) => onChange(dateStr)}
+          placeholder='Select date'
+        />
       ) : (
         <Input
           id={column.name}
-          type={column.type === 'number' ? 'number' : column.type === 'date' ? 'date' : 'text'}
+          type={column.type === 'number' ? 'number' : 'text'}
           value={formatValueForInput(value, column.type)}
           onChange={(e) => onChange(e.target.value)}
           placeholder={`Enter ${column.name}`}