diff --git a/apps/webclaw/e2e/table-block.spec.ts b/apps/webclaw/e2e/table-block.spec.ts
new file mode 100644
index 0000000..6dd767f
--- /dev/null
+++ b/apps/webclaw/e2e/table-block.spec.ts
@@ -0,0 +1,42 @@
+import { expect, test } from '@playwright/test'
+
+test('table block edit/import/insert and persistence', async ({ page }) => {
+  await page.goto('/dev/table-block')
+  await page.evaluate(() => {
+    window.localStorage.removeItem('chat-table-workbench-blocks-v1')
+  })
+  await page.reload()
+
+  await page.getByRole('button', { name: 'Add Table Block' }).click()
+
+  await page.getByRole('button', { name: 'Empty' }).first().click()
+  const editor = page.locator('table input').first()
+  await editor.fill('alpha')
+  await editor.press('Enter')
+
+  await expect(page.getByRole('button', { name: 'alpha' })).toBeVisible()
+
+  await page.getByRole('button', { name: 'Import CSV' }).click()
+  await page.locator('textarea').first().fill('name,age\nAlice,30\nBob,29')
+  await page.getByRole('button', { name: 'Apply import' }).click()
+
+  await expect(
+    page.getByRole('button', { name: 'name', exact: true }),
+  ).toBeVisible()
+  await expect(
+    page.getByRole('button', { name: 'Alice', exact: true }),
+  ).toBeVisible()
+
+  await page.getByRole('button', { name: 'Insert to Prompt' }).click()
+
+  await expect(page.getByTestId('prompt-target')).toContainText('| name | age |')
+
+  await page.reload()
+
+  await expect(
+    page.getByRole('button', { name: 'name', exact: true }),
+  ).toBeVisible()
+  await expect(
+    page.getByRole('button', { name: 'Alice', exact: true }),
+  ).toBeVisible()
+})
diff --git a/apps/webclaw/package.json b/apps/webclaw/package.json
index 74d3627..8a0f0d5 100644
--- a/apps/webclaw/package.json
+++ b/apps/webclaw/package.json
@@ -7,6 +7,7 @@
     "build": "vite build",
     "preview": "vite preview",
     "test": "vitest run",
+    "test:e2e": "playwright test",
     "lint": "eslint",
     "format": "prettier",
     "check": "prettier --write . && eslint --fix"
@@ -41,6 +42,7 @@
     "zustand": "^5.0.11"
   },
   "devDependencies": {
+    "@playwright/test": "^1.58.2",
     "@tanstack/eslint-config": "^0.3.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.2.0",
diff --git a/apps/webclaw/playwright.config.ts b/apps/webclaw/playwright.config.ts
new file mode 100644
index 0000000..f3989e1
--- /dev/null
+++ b/apps/webclaw/playwright.config.ts
@@ -0,0 +1,17 @@
+import { defineConfig } from '@playwright/test'
+
+export default defineConfig({
+  testDir: './e2e',
+  timeout: 45_000,
+  reporter: 'list',
+  use: {
+    baseURL: 'http://127.0.0.1:3200',
+    headless: true,
+  },
+  webServer: {
+    command: 'pnpm build && pnpm exec vite preview --port 3200 --host 127.0.0.1',
+    url: 'http://127.0.0.1:3200',
+    reuseExistingServer: false,
+    timeout: 240_000,
+  },
+})
diff --git a/apps/webclaw/src/routeTree.gen.ts b/apps/webclaw/src/routeTree.gen.ts
index 9fc7637..48e43bd 100644
--- a/apps/webclaw/src/routeTree.gen.ts
+++ b/apps/webclaw/src/routeTree.gen.ts
@@ -12,6 +12,7 @@ import { Route as rootRouteImport } from './routes/__root'
 import { Route as NewRouteImport } from './routes/new'
 import { Route as ConnectRouteImport } from './routes/connect'
 import { Route as IndexRouteImport } from './routes/index'
+import { Route as DevTableBlockRouteImport } from './routes/dev.table-block'
 import { Route as ChatSessionKeyRouteImport } from './routes/chat/$sessionKey'
 import { Route as ApiStreamRouteImport } from './routes/api/stream'
 import { Route as ApiSessionsRouteImport } from './routes/api/sessions'
@@ -35,6 +36,11 @@ const IndexRoute = IndexRouteImport.update({
   path: '/',
   getParentRoute: () => rootRouteImport,
 } as any)
+const DevTableBlockRoute = DevTableBlockRouteImport.update({
+  id: '/dev/table-block',
+  path: '/dev/table-block',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const ChatSessionKeyRoute = ChatSessionKeyRouteImport.update({
   id: '/chat/$sessionKey',
   path: '/chat/$sessionKey',
@@ -82,6 +88,7 @@ export interface FileRoutesByFullPath {
   '/api/sessions': typeof ApiSessionsRoute
   '/api/stream': typeof ApiStreamRoute
   '/chat/$sessionKey': typeof ChatSessionKeyRoute
+  '/dev/table-block': typeof DevTableBlockRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
@@ -94,6 +101,7 @@ export interface FileRoutesByTo {
   '/api/sessions': typeof ApiSessionsRoute
   '/api/stream': typeof ApiStreamRoute
   '/chat/$sessionKey': typeof ChatSessionKeyRoute
+  '/dev/table-block': typeof DevTableBlockRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
@@ -107,6 +115,7 @@ export interface FileRoutesById {
   '/api/sessions': typeof ApiSessionsRoute
   '/api/stream': typeof ApiStreamRoute
   '/chat/$sessionKey': typeof ChatSessionKeyRoute
+  '/dev/table-block': typeof DevTableBlockRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
@@ -121,6 +130,7 @@ export interface FileRouteTypes {
     | '/api/sessions'
     | '/api/stream'
     | '/chat/$sessionKey'
+    | '/dev/table-block'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
@@ -133,6 +143,7 @@ export interface FileRouteTypes {
     | '/api/sessions'
     | '/api/stream'
     | '/chat/$sessionKey'
+    | '/dev/table-block'
   id:
     | '__root__'
     | '/'
@@ -145,6 +156,7 @@ export interface FileRouteTypes {
     | '/api/sessions'
     | '/api/stream'
     | '/chat/$sessionKey'
+    | '/dev/table-block'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
@@ -158,6 +170,7 @@ export interface RootRouteChildren {
   ApiSessionsRoute: typeof ApiSessionsRoute
   ApiStreamRoute: typeof ApiStreamRoute
   ChatSessionKeyRoute: typeof ChatSessionKeyRoute
+  DevTableBlockRoute: typeof DevTableBlockRoute
 }
 
 declare module '@tanstack/react-router' {
@@ -183,6 +196,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IndexRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/dev/table-block': {
+      id: '/dev/table-block'
+      path: '/dev/table-block'
+      fullPath: '/dev/table-block'
+      preLoaderRoute: typeof DevTableBlockRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/chat/$sessionKey': {
       id: '/chat/$sessionKey'
       path: '/chat/$sessionKey'
@@ -246,6 +266,7 @@ const rootRouteChildren: RootRouteChildren = {
   ApiSessionsRoute: ApiSessionsRoute,
   ApiStreamRoute: ApiStreamRoute,
   ChatSessionKeyRoute: ChatSessionKeyRoute,
+  DevTableBlockRoute: DevTableBlockRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)
diff --git a/apps/webclaw/src/routes/dev.table-block.tsx b/apps/webclaw/src/routes/dev.table-block.tsx
new file mode 100644
index 0000000..5611080
--- /dev/null
+++ b/apps/webclaw/src/routes/dev.table-block.tsx
@@ -0,0 +1,47 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { useState } from 'react'
+
+import { ChatWorkbench } from '@/screens/chat/components/chat-workbench'
+
+export const Route = createFileRoute('/dev/table-block')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  const [promptValue, setPromptValue] = useState('')
+
+  return (
+    <main className="min-h-screen bg-surface text-primary-900">
+      <div className="mx-auto max-w-[960px] px-5 py-6">
+        <h1 className="text-xl font-medium text-primary-900">Table Block E2E</h1>
+        <p className="mt-1 text-sm text-primary-700">
+          Dev page for browser-level table block verification.
+        </p>
+      </div>
+
+      <ChatWorkbench
+        sessionKey="dev-table-block-e2e"
+        onInsertToPrompt={(markdown) => {
+          const trimmed = markdown.trim()
+          if (trimmed.length === 0) return
+          setPromptValue((prev) =>
+            prev.trim().length > 0 ? `${prev.trimEnd()}\n\n${trimmed}` : trimmed,
+          )
+        }}
+      />
+
+      <div className="mx-auto max-w-[960px] px-5 pb-6">
+        <label className="block text-sm font-medium text-primary-900" htmlFor="prompt-target">
+          Prompt Target
+        </label>
+        <textarea
+          id="prompt-target"
+          data-testid="prompt-target"
+          className="mt-2 h-36 w-full rounded-lg border border-primary-200 bg-surface px-3 py-2 text-sm text-primary-900"
+          readOnly
+          value={promptValue}
+        />
+      </div>
+    </main>
+  )
+}
diff --git a/apps/webclaw/src/screens/chat/chat-screen.tsx b/apps/webclaw/src/screens/chat/chat-screen.tsx
index 16dafe4..3b8b8f7 100644
--- a/apps/webclaw/src/screens/chat/chat-screen.tsx
+++ b/apps/webclaw/src/screens/chat/chat-screen.tsx
@@ -24,6 +24,7 @@ import { ChatHeader } from './components/chat-header'
 import { ChatMessageList } from './components/chat-message-list'
 import { ChatComposer } from './components/chat-composer'
 import { GatewayStatusMessage } from './components/gateway-status-message'
+import { ChatWorkbench } from './components/chat-workbench'
 import {
   hasPendingGeneration,
   hasPendingSend,
@@ -42,7 +43,10 @@ import { useChatGenerationGuard } from './hooks/use-chat-generation-guard'
 import { shouldRedirectToConnect } from './hooks/use-chat-error-state'
 import { useChatRedirect } from './hooks/use-chat-redirect'
 import type { AttachmentFile } from '@/components/attachment-button'
-import type { ChatComposerHelpers } from './components/chat-composer'
+import type {
+  ChatComposerApi,
+  ChatComposerHelpers,
+} from './components/chat-composer'
 import { useExport } from '@/hooks/use-export'
 import { useChatSettings } from '@/hooks/use-chat-settings'
 import { cn, randomUUID } from '@/lib/utils'
@@ -68,8 +72,15 @@ export function ChatScreen({
   const [sending, setSending] = useState(false)
   const [creatingSession, setCreatingSession] = useState(false)
   const [isRedirecting, setIsRedirecting] = useState(false)
-  const { headerRef, composerRef, mainRef, pinGroupMinHeight, headerHeight } =
-    useChatMeasurements()
+  const composerApiRef = useRef<ChatComposerApi | null>(null)
+  const {
+    headerRef,
+    composerRef,
+    workbenchRef,
+    mainRef,
+    pinGroupMinHeight,
+    headerHeight,
+  } = useChatMeasurements()
   const [waitingForResponse, setWaitingForResponse] = useState(
     () => hasPendingSend() || hasPendingGeneration(),
   )
@@ -465,6 +476,11 @@ export function ChatScreen({
     gatewayStatusError,
   })
   const historyEmpty = !historyLoading && displayMessages.length === 0
+  const workbenchSessionKey =
+    activeCanonicalKey || sessionKeyForHistory || activeFriendlyId || 'new'
+  const handleInsertPromptFromBlock = useCallback((markdown: string) => {
+    composerApiRef.current?.appendToPrompt(markdown)
+  }, [])
   const gatewayNotice = useMemo(() => {
     if (!showGatewayNotice) return null
     if (!gatewayError) return null
@@ -613,11 +629,17 @@ export function ChatScreen({
                 headerHeight={headerHeight}
                 contentStyle={stableContentStyle}
               />
+              <ChatWorkbench
+                sessionKey={workbenchSessionKey}
+                onInsertToPrompt={handleInsertPromptFromBlock}
+                wrapperRef={workbenchRef}
+              />
               <ChatComposer
                 onSubmit={send}
                 isLoading={sending}
                 disabled={sending}
                 wrapperRef={composerRef}
+                apiRef={composerApiRef}
               />
             </>
           )}
diff --git a/apps/webclaw/src/screens/chat/components/chat-composer.tsx b/apps/webclaw/src/screens/chat/components/chat-composer.tsx
index a8a083e..aa79b46 100644
--- a/apps/webclaw/src/screens/chat/components/chat-composer.tsx
+++ b/apps/webclaw/src/screens/chat/components/chat-composer.tsx
@@ -1,7 +1,7 @@
 import { memo, useCallback, useRef, useState } from 'react'
 import { HugeiconsIcon } from '@hugeicons/react'
 import { ArrowUp02Icon } from '@hugeicons/core-free-icons'
-import type { Ref } from 'react'
+import type { Ref, RefObject } from 'react'
 
 import type { AttachmentFile } from '@/components/attachment-button'
 import {
@@ -21,6 +21,7 @@ type ChatComposerProps = {
   isLoading: boolean
   disabled: boolean
   wrapperRef?: Ref<HTMLDivElement>
+  apiRef?: RefObject<ChatComposerApi | null>
 }
 
 type ChatComposerHelpers = {
@@ -29,11 +30,17 @@ type ChatComposerHelpers = {
   attachments?: Array<AttachmentFile>
 }
 
+type ChatComposerApi = {
+  setValue: (value: string) => void
+  appendToPrompt: (markdown: string) => void
+}
+
 function ChatComposerComponent({
   onSubmit,
   isLoading,
   disabled,
   wrapperRef,
+  apiRef,
 }: ChatComposerProps) {
   const [attachments, setAttachments] = useState<Array<AttachmentFile>>([])
   const promptRef = useRef<HTMLTextAreaElement | null>(null)
@@ -80,6 +87,23 @@ function ChatComposerComponent({
     },
     [focusPrompt],
   )
+  const appendToPrompt = useCallback(
+    (markdown: string) => {
+      const trimmedMarkdown = markdown.trim()
+      if (trimmedMarkdown.length === 0) return
+      const current = valueRef.current.trimEnd()
+      const nextValue =
+        current.length > 0 ? `${current}\n\n${trimmedMarkdown}` : trimmedMarkdown
+      setComposerValue(nextValue)
+    },
+    [setComposerValue],
+  )
+  if (apiRef) {
+    apiRef.current = {
+      setValue: setComposerValue,
+      appendToPrompt,
+    }
+  }
   const handleSubmit = useCallback(() => {
     if (disabled) return
     const body = valueRef.current.trim()
@@ -165,4 +189,4 @@ function ChatComposerComponent({
 const MemoizedChatComposer = memo(ChatComposerComponent)
 
 export { MemoizedChatComposer as ChatComposer }
-export type { ChatComposerHelpers }
+export type { ChatComposerApi, ChatComposerHelpers }
diff --git a/apps/webclaw/src/screens/chat/components/chat-workbench.tsx b/apps/webclaw/src/screens/chat/components/chat-workbench.tsx
new file mode 100644
index 0000000..33401bb
--- /dev/null
+++ b/apps/webclaw/src/screens/chat/components/chat-workbench.tsx
@@ -0,0 +1,51 @@
+import { Button } from '@/components/ui/button'
+import type { Ref } from 'react'
+
+import { useSessionTableWorkbench } from '../hooks/use-table-workbench-blocks'
+import { TableBlock } from './table-block'
+
+type ChatWorkbenchProps = {
+  sessionKey: string
+  onInsertToPrompt: (markdown: string) => void
+  wrapperRef?: Ref<HTMLDivElement>
+}
+
+export function ChatWorkbench({
+  sessionKey,
+  onInsertToPrompt,
+  wrapperRef,
+}: ChatWorkbenchProps) {
+  const { blocks, addTableBlock, updateTableBlock, removeTableBlock } =
+    useSessionTableWorkbench(sessionKey)
+
+  return (
+    <div className="border-t border-primary-200 bg-primary-50/35" ref={wrapperRef}>
+      <div className="mx-auto w-full max-w-full px-5 py-3 sm:max-w-[768px] sm:min-w-[400px]">
+        <div className="flex items-center justify-between gap-3">
+          <p className="text-sm font-medium text-primary-900">Workbench</p>
+          <Button size="sm" variant="outline" onClick={() => addTableBlock()}>
+            Add Table Block
+          </Button>
+        </div>
+
+        {blocks.length === 0 ? (
+          <p className="mt-2 text-sm text-primary-700">
+            No table block yet. Click "Add Table Block" to create one.
+          </p>
+        ) : (
+          <div className="mt-3 space-y-3">
+            {blocks.map((block) => (
+              <TableBlock
+                key={block.id}
+                block={block}
+                onChange={(nextBlock) => updateTableBlock(block.id, nextBlock)}
+                onRemove={() => removeTableBlock(block.id)}
+                onInsertToPrompt={onInsertToPrompt}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/apps/webclaw/src/screens/chat/components/table-block.tsx b/apps/webclaw/src/screens/chat/components/table-block.tsx
new file mode 100644
index 0000000..bd5cd3d
--- /dev/null
+++ b/apps/webclaw/src/screens/chat/components/table-block.tsx
@@ -0,0 +1,417 @@
+import { useLayoutEffect, useMemo, useRef, useState } from 'react'
+
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+
+import type { WorkbenchTableBlock } from '../table-block-utils'
+import {
+  createTableColumn,
+  createTableRow,
+  tableBlockFromCsv,
+  tableBlockToCsv,
+  tableBlockToMarkdown,
+} from '../table-block-utils'
+import {
+  findNextTarget,
+  getEditTargets,
+  readTargetValue,
+  updateBlockWithValue,
+  type EditTarget,
+} from '../table-block-state-utils'
+
+type TableBlockProps = {
+  block: WorkbenchTableBlock
+  onChange: (nextBlock: WorkbenchTableBlock) => void
+  onRemove: () => void
+  onInsertToPrompt: (markdown: string) => void
+}
+
+export function TableBlock({
+  block,
+  onChange,
+  onRemove,
+  onInsertToPrompt,
+}: TableBlockProps) {
+  const [editingTarget, setEditingTarget] = useState<EditTarget | null>(null)
+  const [editingValue, setEditingValue] = useState('')
+  const [copiedMarkdown, setCopiedMarkdown] = useState(false)
+  const [copiedCsv, setCopiedCsv] = useState(false)
+  const [inserted, setInserted] = useState(false)
+  const [showCsvImport, setShowCsvImport] = useState(false)
+  const [csvDraft, setCsvDraft] = useState('')
+  const [csvError, setCsvError] = useState<string | null>(null)
+  const editInputRef = useRef<HTMLInputElement | null>(null)
+  const skipBlurCommitRef = useRef(false)
+
+  const markdown = useMemo(() => tableBlockToMarkdown(block), [block])
+  const csv = useMemo(() => tableBlockToCsv(block), [block])
+  const orderedTargets = useMemo(() => getEditTargets(block), [block])
+
+  useLayoutEffect(() => {
+    if (!editingTarget) return
+    editInputRef.current?.focus()
+    editInputRef.current?.select()
+  }, [editingTarget])
+
+  function beginEdit(target: EditTarget) {
+    const value = readTargetValue(block, target)
+    setEditingTarget(target)
+    setEditingValue(value)
+  }
+
+  function commitCurrentEdit() {
+    if (!editingTarget) return
+    const nextBlock = updateBlockWithValue(block, editingTarget, editingValue)
+    onChange(nextBlock)
+    setEditingTarget(null)
+  }
+
+  function handleCopyMarkdown() {
+    navigator.clipboard
+      .writeText(markdown)
+      .then(() => {
+        setCopiedMarkdown(true)
+        window.setTimeout(() => setCopiedMarkdown(false), 1200)
+      })
+      .catch(() => {
+        setCopiedMarkdown(false)
+      })
+  }
+
+  function handleInsertToPrompt() {
+    onInsertToPrompt(markdown)
+    setInserted(true)
+    window.setTimeout(() => setInserted(false), 1200)
+  }
+
+  function handleCopyCsv() {
+    navigator.clipboard
+      .writeText(csv)
+      .then(() => {
+        setCopiedCsv(true)
+        window.setTimeout(() => setCopiedCsv(false), 1200)
+      })
+      .catch(() => {
+        setCopiedCsv(false)
+      })
+  }
+
+  function handleDownloadCsv() {
+    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8' })
+    const url = URL.createObjectURL(blob)
+    const anchor = document.createElement('a')
+    anchor.href = url
+    anchor.download = 'table-block.csv'
+    anchor.click()
+    URL.revokeObjectURL(url)
+  }
+
+  function handleApplyCsvImport() {
+    try {
+      const importedBlock = tableBlockFromCsv(csvDraft, block.id)
+      onChange(importedBlock)
+      setCsvError(null)
+      setShowCsvImport(false)
+      setCsvDraft('')
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Invalid CSV data'
+      setCsvError(message)
+    }
+  }
+
+  function handleAddRow() {
+    onChange({
+      ...block,
+      rows: [...block.rows, createTableRow(block.columns)],
+    })
+  }
+
+  function handleRemoveRow(rowId: string) {
+    onChange({
+      ...block,
+      rows: block.rows.filter((row) => row.id !== rowId),
+    })
+  }
+
+  function handleAddColumn() {
+    const nextColumn = createTableColumn(block.columns.length)
+    onChange({
+      ...block,
+      columns: [...block.columns, nextColumn],
+      rows: block.rows.map((row) => ({
+        ...row,
+        cells: {
+          ...row.cells,
+          [nextColumn.id]: '',
+        },
+      })),
+    })
+  }
+
+  function handleRemoveColumn(columnId: string) {
+    if (block.columns.length <= 1) return
+
+    const nextColumns = block.columns.filter((column) => column.id !== columnId)
+    const nextRows = block.rows.map((row) => {
+      const nextCells = { ...row.cells }
+      delete nextCells[columnId]
+      return {
+        ...row,
+        cells: nextCells,
+      }
+    })
+
+    onChange({
+      ...block,
+      columns: nextColumns,
+      rows: nextRows,
+    })
+
+    if (editingTarget?.columnId === columnId) {
+      setEditingTarget(null)
+      setEditingValue('')
+    }
+  }
+
+  function handleEditorKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
+    if (!editingTarget) return
+
+    if (event.key === 'Enter') {
+      event.preventDefault()
+      commitCurrentEdit()
+      return
+    }
+
+    if (event.key !== 'Tab') return
+
+    event.preventDefault()
+    skipBlurCommitRef.current = true
+
+    const nextBlock = updateBlockWithValue(block, editingTarget, editingValue)
+    onChange(nextBlock)
+
+    const nextTarget = findNextTarget(
+      orderedTargets,
+      editingTarget,
+      event.shiftKey ? -1 : 1,
+    )
+
+    if (!nextTarget) {
+      setEditingTarget(null)
+      setEditingValue('')
+      return
+    }
+
+    setEditingTarget(nextTarget)
+    setEditingValue(readTargetValue(nextBlock, nextTarget))
+  }
+
+  return (
+    <section className="rounded-xl border border-primary-200 bg-surface p-3">
+      <div className="flex flex-wrap items-center gap-2">
+        <Button size="sm" variant="outline" onClick={handleAddRow}>
+          Add row
+        </Button>
+        <Button size="sm" variant="outline" onClick={handleAddColumn}>
+          Add column
+        </Button>
+        <Button size="sm" variant="secondary" onClick={handleCopyMarkdown}>
+          {copiedMarkdown ? 'Copied Markdown' : 'Copy Markdown'}
+        </Button>
+        <Button size="sm" variant="secondary" onClick={handleInsertToPrompt}>
+          {inserted ? 'Inserted' : 'Insert to Prompt'}
+        </Button>
+        <Button
+          size="sm"
+          variant="ghost"
+          onClick={() => {
+            setShowCsvImport((prev) => !prev)
+            setCsvError(null)
+          }}
+        >
+          {showCsvImport ? 'Hide CSV Import' : 'Import CSV'}
+        </Button>
+        <Button size="sm" variant="ghost" onClick={handleCopyCsv}>
+          {copiedCsv ? 'Copied CSV' : 'Copy CSV'}
+        </Button>
+        <Button size="sm" variant="ghost" onClick={handleDownloadCsv}>
+          Download CSV
+        </Button>
+        <Button size="sm" variant="ghost" onClick={onRemove}>
+          Remove block
+        </Button>
+      </div>
+
+      {showCsvImport ? (
+        <div className="mt-3 rounded-lg border border-primary-200 bg-primary-50 p-3">
+          <label className="block text-xs text-primary-700">Paste CSV</label>
+          <textarea
+            className="mt-2 h-28 w-full rounded-lg border border-primary-200 bg-surface px-3 py-2 text-sm text-primary-900 outline-none focus:ring-2 focus:ring-primary-400"
+            value={csvDraft}
+            onChange={(event) => {
+              setCsvDraft(event.target.value)
+              setCsvError(null)
+            }}
+            placeholder="name,age\nAustin,30"
+          />
+          {csvError ? (
+            <p className="mt-2 text-xs text-red-700" role="alert">
+              {csvError}
+            </p>
+          ) : null}
+          <div className="mt-2 flex items-center gap-2">
+            <Button size="sm" variant="default" onClick={handleApplyCsvImport}>
+              Apply import
+            </Button>
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={() => {
+                setShowCsvImport(false)
+                setCsvError(null)
+              }}
+            >
+              Cancel
+            </Button>
+          </div>
+        </div>
+      ) : null}
+
+      <div className="mt-3 overflow-auto rounded-lg border border-primary-200">
+        <table className="min-w-full border-collapse text-sm text-primary-900">
+          <thead>
+            <tr className="bg-primary-50">
+              <th className="w-14 border-b border-r border-primary-200 px-2 py-2 text-left font-medium">
+                #
+              </th>
+              {block.columns.map((column) => {
+                const isEditing =
+                  editingTarget?.rowId === null &&
+                  editingTarget.columnId === column.id
+
+                return (
+                  <th
+                    key={column.id}
+                    className="min-w-32 border-b border-r border-primary-200 px-2 py-2"
+                  >
+                    <div className="flex items-center gap-2">
+                      {isEditing ? (
+                        <input
+                          ref={editInputRef}
+                          value={editingValue}
+                          onChange={(event) => setEditingValue(event.target.value)}
+                          onBlur={() => {
+                            if (skipBlurCommitRef.current) {
+                              skipBlurCommitRef.current = false
+                              return
+                            }
+                            commitCurrentEdit()
+                          }}
+                          onKeyDown={handleEditorKeyDown}
+                          className="h-7 w-full rounded border border-primary-300 bg-surface px-2 text-sm outline-none focus:ring-2 focus:ring-primary-400"
+                        />
+                      ) : (
+                        <button
+                          type="button"
+                          onClick={() => beginEdit({ rowId: null, columnId: column.id })}
+                          className="flex-1 truncate text-left"
+                        >
+                          {column.name || 'Untitled'}
+                        </button>
+                      )}
+                      <button
+                        type="button"
+                        onClick={() => handleRemoveColumn(column.id)}
+                        disabled={block.columns.length <= 1}
+                        className={cn(
+                          'rounded px-1 text-xs text-primary-600 hover:bg-primary-100 hover:text-primary-900',
+                          block.columns.length <= 1 &&
+                            'cursor-not-allowed opacity-40 hover:bg-transparent',
+                        )}
+                        aria-label={`Remove ${column.name}`}
+                      >
+                        x
+                      </button>
+                    </div>
+                  </th>
+                )
+              })}
+            </tr>
+          </thead>
+          <tbody>
+            {block.rows.map((row, rowIndex) => (
+              <tr key={row.id}>
+                <td className="border-b border-r border-primary-200 px-2 py-2">
+                  <div className="flex items-center justify-between gap-2">
+                    <span className="tabular-nums text-xs text-primary-700">
+                      {rowIndex + 1}
+                    </span>
+                    <button
+                      type="button"
+                      onClick={() => handleRemoveRow(row.id)}
+                      className="rounded px-1 text-xs text-primary-600 hover:bg-primary-100 hover:text-primary-900"
+                      aria-label={`Remove row ${rowIndex + 1}`}
+                    >
+                      x
+                    </button>
+                  </div>
+                </td>
+                {block.columns.map((column) => {
+                  const isEditing =
+                    editingTarget?.rowId === row.id &&
+                    editingTarget.columnId === column.id
+                  const value = row.cells[column.id] ?? ''
+
+                  return (
+                    <td
+                      key={`${row.id}-${column.id}`}
+                      className="min-w-32 border-b border-r border-primary-200 px-2 py-2 align-top"
+                    >
+                      {isEditing ? (
+                        <input
+                          ref={editInputRef}
+                          value={editingValue}
+                          onChange={(event) => setEditingValue(event.target.value)}
+                          onBlur={() => {
+                            if (skipBlurCommitRef.current) {
+                              skipBlurCommitRef.current = false
+                              return
+                            }
+                            commitCurrentEdit()
+                          }}
+                          onKeyDown={handleEditorKeyDown}
+                          className="h-7 w-full rounded border border-primary-300 bg-surface px-2 text-sm outline-none focus:ring-2 focus:ring-primary-400"
+                        />
+                      ) : (
+                        <button
+                          type="button"
+                          onClick={() => beginEdit({ rowId: row.id, columnId: column.id })}
+                          className={cn(
+                            'w-full text-left whitespace-pre-wrap',
+                            value.length === 0 && 'text-primary-500',
+                          )}
+                        >
+                          {value || 'Empty'}
+                        </button>
+                      )}
+                    </td>
+                  )
+                })}
+              </tr>
+            ))}
+            {block.rows.length === 0 ? (
+              <tr>
+                <td
+                  colSpan={block.columns.length + 1}
+                  className="px-3 py-4 text-sm text-primary-600"
+                >
+                  {'No rows yet. Click "Add row".'}
+                </td>
+              </tr>
+            ) : null}
+          </tbody>
+        </table>
+      </div>
+    </section>
+  )
+}
diff --git a/apps/webclaw/src/screens/chat/hooks/use-chat-measurements.ts b/apps/webclaw/src/screens/chat/hooks/use-chat-measurements.ts
index 5fac4be..856c1f4 100644
--- a/apps/webclaw/src/screens/chat/hooks/use-chat-measurements.ts
+++ b/apps/webclaw/src/screens/chat/hooks/use-chat-measurements.ts
@@ -3,6 +3,7 @@ import { useLayoutEffect, useRef, useState } from 'react'
 export type ChatMeasurements = {
   headerRef: React.RefObject<HTMLDivElement | null>
   composerRef: React.RefObject<HTMLDivElement | null>
+  workbenchRef: React.RefObject<HTMLDivElement | null>
   mainRef: React.RefObject<HTMLDivElement | null>
   pinGroupMinHeight: number
   headerHeight: number
@@ -11,20 +12,23 @@ export type ChatMeasurements = {
 export function useChatMeasurements(): ChatMeasurements {
   const headerRef = useRef<HTMLDivElement | null>(null)
   const composerRef = useRef<HTMLDivElement | null>(null)
+  const workbenchRef = useRef<HTMLDivElement | null>(null)
   const mainRef = useRef<HTMLDivElement | null>(null)
   const [pinGroupMinHeight, setPinGroupMinHeight] = useState(0)
   const [headerHeight, setHeaderHeight] = useState(0)
 
-  // Measure header/composer to keep pinned group exact.
+  // Measure header/composer/workbench to keep pinned group exact.
   useLayoutEffect(() => {
     const headerEl = headerRef.current
     const composerEl = composerRef.current
+    const workbenchEl = workbenchRef.current
     const mainEl = mainRef.current
     if (!mainEl) return
 
     const applySizes = () => {
       const nextHeaderHeight = headerEl?.offsetHeight ?? 0
       const composerHeight = composerEl?.offsetHeight ?? 0
+      const workbenchHeight = workbenchEl?.offsetHeight ?? 0
       const mainHeight = mainEl.clientHeight
       mainEl.style.setProperty(
         '--chat-header-height',
@@ -34,9 +38,13 @@ export function useChatMeasurements(): ChatMeasurements {
         '--chat-composer-height',
         `${Math.max(0, composerHeight)}px`,
       )
+      mainEl.style.setProperty(
+        '--chat-workbench-height',
+        `${Math.max(0, workbenchHeight)}px`,
+      )
       setHeaderHeight(nextHeaderHeight)
       setPinGroupMinHeight(
-        Math.max(0, mainHeight - nextHeaderHeight - composerHeight),
+        Math.max(0, mainHeight - nextHeaderHeight - composerHeight - workbenchHeight),
       )
     }
 
@@ -45,12 +53,14 @@ export function useChatMeasurements(): ChatMeasurements {
     const observer = new ResizeObserver(() => applySizes())
     if (headerEl) observer.observe(headerEl)
     if (composerEl) observer.observe(composerEl)
+    if (workbenchEl) observer.observe(workbenchEl)
     return () => observer.disconnect()
   }, [])
 
   return {
     headerRef,
     composerRef,
+    workbenchRef,
     mainRef,
     pinGroupMinHeight,
     headerHeight,
diff --git a/apps/webclaw/src/screens/chat/hooks/use-table-workbench-blocks.ts b/apps/webclaw/src/screens/chat/hooks/use-table-workbench-blocks.ts
new file mode 100644
index 0000000..8242fd9
--- /dev/null
+++ b/apps/webclaw/src/screens/chat/hooks/use-table-workbench-blocks.ts
@@ -0,0 +1,127 @@
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+
+import type { WorkbenchTableBlock } from '../table-block-utils'
+import { createTableBlock } from '../table-block-utils'
+
+type TableWorkbenchDoc = {
+  blocks: Array<WorkbenchTableBlock>
+}
+
+type TableWorkbenchState = {
+  docsBySessionKey: Record<string, TableWorkbenchDoc>
+  addTableBlock: (sessionKey: string) => string
+  updateTableBlock: (
+    sessionKey: string,
+    blockId: string,
+    block: WorkbenchTableBlock,
+  ) => void
+  removeTableBlock: (sessionKey: string, blockId: string) => void
+}
+
+const EMPTY_TABLE_BLOCKS: Array<WorkbenchTableBlock> = []
+
+function normalizeSessionKey(sessionKey: string) {
+  const trimmed = sessionKey.trim()
+  return trimmed.length > 0 ? trimmed : 'new'
+}
+
+function getDoc(
+  docsBySessionKey: Record<string, TableWorkbenchDoc>,
+  sessionKey: string,
+): TableWorkbenchDoc {
+  return docsBySessionKey[sessionKey] ?? { blocks: [] }
+}
+
+const useTableWorkbenchStore = create<TableWorkbenchState>()(
+  persist(
+    (set) => ({
+      docsBySessionKey: {},
+      addTableBlock: (sessionKey) => {
+        const normalizedSessionKey = normalizeSessionKey(sessionKey)
+        const nextBlock = createTableBlock()
+
+        set((state) => {
+          const currentDoc = getDoc(state.docsBySessionKey, normalizedSessionKey)
+          return {
+            docsBySessionKey: {
+              ...state.docsBySessionKey,
+              [normalizedSessionKey]: {
+                blocks: [...currentDoc.blocks, nextBlock],
+              },
+            },
+          }
+        })
+
+        return nextBlock.id
+      },
+      updateTableBlock: (sessionKey, blockId, block) => {
+        const normalizedSessionKey = normalizeSessionKey(sessionKey)
+        set((state) => {
+          const currentDoc = getDoc(state.docsBySessionKey, normalizedSessionKey)
+          return {
+            docsBySessionKey: {
+              ...state.docsBySessionKey,
+              [normalizedSessionKey]: {
+                blocks: currentDoc.blocks.map((currentBlock) => {
+                  if (currentBlock.id !== blockId) return currentBlock
+                  return block
+                }),
+              },
+            },
+          }
+        })
+      },
+      removeTableBlock: (sessionKey, blockId) => {
+        const normalizedSessionKey = normalizeSessionKey(sessionKey)
+        set((state) => {
+          const currentDoc = getDoc(state.docsBySessionKey, normalizedSessionKey)
+          return {
+            docsBySessionKey: {
+              ...state.docsBySessionKey,
+              [normalizedSessionKey]: {
+                blocks: currentDoc.blocks.filter((block) => block.id !== blockId),
+              },
+            },
+          }
+        })
+      },
+    }),
+    {
+      name: 'chat-table-workbench-blocks-v1',
+    },
+  ),
+)
+
+export function useSessionTableWorkbench(sessionKey: string) {
+  const normalizedSessionKey = normalizeSessionKey(sessionKey)
+
+  const blocks = useTableWorkbenchStore(
+    (state) =>
+      state.docsBySessionKey[normalizedSessionKey]?.blocks ?? EMPTY_TABLE_BLOCKS,
+  )
+
+  const addTableBlock = useTableWorkbenchStore((state) => state.addTableBlock)
+  const updateTableBlock = useTableWorkbenchStore(
+    (state) => state.updateTableBlock,
+  )
+  const removeTableBlock = useTableWorkbenchStore(
+    (state) => state.removeTableBlock,
+  )
+
+  return {
+    blocks,
+    addTableBlock: function addBlock() {
+      return addTableBlock(normalizedSessionKey)
+    },
+    updateTableBlock: function updateBlock(
+      blockId: string,
+      block: WorkbenchTableBlock,
+    ) {
+      updateTableBlock(normalizedSessionKey, blockId, block)
+    },
+    removeTableBlock: function removeBlock(blockId: string) {
+      removeTableBlock(normalizedSessionKey, blockId)
+    },
+  }
+}
diff --git a/apps/webclaw/src/screens/chat/table-block-state-utils.test.ts b/apps/webclaw/src/screens/chat/table-block-state-utils.test.ts
new file mode 100644
index 0000000..ed820a5
--- /dev/null
+++ b/apps/webclaw/src/screens/chat/table-block-state-utils.test.ts
@@ -0,0 +1,88 @@
+import { describe, expect, it } from 'vitest'
+
+import type { WorkbenchTableBlock } from './table-block-utils'
+import {
+  findNextTarget,
+  getEditTargets,
+  readTargetValue,
+  updateBlockWithValue,
+} from './table-block-state-utils'
+
+function createSampleBlock(): WorkbenchTableBlock {
+  return {
+    id: 'block-1',
+    type: 'table',
+    columns: [
+      { id: 'c1', name: 'Name' },
+      { id: 'c2', name: 'Age' },
+    ],
+    rows: [
+      { id: 'r1', cells: { c1: 'Austin', c2: '30' } },
+      { id: 'r2', cells: { c1: 'WebClaw', c2: '1' } },
+    ],
+  }
+}
+
+describe('getEditTargets', function () {
+  it('orders targets as headers first then row cells', function () {
+    const block = createSampleBlock()
+
+    expect(getEditTargets(block)).toEqual([
+      { rowId: null, columnId: 'c1' },
+      { rowId: null, columnId: 'c2' },
+      { rowId: 'r1', columnId: 'c1' },
+      { rowId: 'r1', columnId: 'c2' },
+      { rowId: 'r2', columnId: 'c1' },
+      { rowId: 'r2', columnId: 'c2' },
+    ])
+  })
+})
+
+describe('findNextTarget', function () {
+  it('moves forward and wraps with tab direction', function () {
+    const targets = getEditTargets(createSampleBlock())
+
+    expect(
+      findNextTarget(targets, { rowId: 'r1', columnId: 'c2' }, 1),
+    ).toEqual({ rowId: 'r2', columnId: 'c1' })
+
+    expect(
+      findNextTarget(targets, { rowId: 'r2', columnId: 'c2' }, 1),
+    ).toEqual({ rowId: null, columnId: 'c1' })
+  })
+
+  it('moves backward and wraps with shift+tab direction', function () {
+    const targets = getEditTargets(createSampleBlock())
+
+    expect(
+      findNextTarget(targets, { rowId: null, columnId: 'c1' }, -1),
+    ).toEqual({ rowId: 'r2', columnId: 'c2' })
+  })
+})
+
+describe('readTargetValue', function () {
+  it('reads header and cell values', function () {
+    const block = createSampleBlock()
+
+    expect(readTargetValue(block, { rowId: null, columnId: 'c1' })).toBe('Name')
+    expect(readTargetValue(block, { rowId: 'r1', columnId: 'c2' })).toBe('30')
+  })
+})
+
+describe('updateBlockWithValue', function () {
+  it('updates header value without changing unrelated cells', function () {
+    const block = createSampleBlock()
+    const next = updateBlockWithValue(block, { rowId: null, columnId: 'c1' }, 'Title')
+
+    expect(next.columns[0]?.name).toBe('Title')
+    expect(next.rows[0]?.cells.c1).toBe('Austin')
+  })
+
+  it('updates target cell value', function () {
+    const block = createSampleBlock()
+    const next = updateBlockWithValue(block, { rowId: 'r2', columnId: 'c2' }, '2')
+
+    expect(next.rows[1]?.cells.c2).toBe('2')
+    expect(next.rows[0]?.cells.c2).toBe('30')
+  })
+})
diff --git a/apps/webclaw/src/screens/chat/table-block-state-utils.ts b/apps/webclaw/src/screens/chat/table-block-state-utils.ts
new file mode 100644
index 0000000..a6716dd
--- /dev/null
+++ b/apps/webclaw/src/screens/chat/table-block-state-utils.ts
@@ -0,0 +1,85 @@
+import type { WorkbenchTableBlock } from './table-block-utils'
+
+export type EditTarget = {
+  rowId: string | null
+  columnId: string
+}
+
+export function getEditTargets(block: WorkbenchTableBlock): Array<EditTarget> {
+  const headerTargets = block.columns.map((column) => ({
+    rowId: null,
+    columnId: column.id,
+  }))
+
+  const cellTargets = block.rows.flatMap((row) =>
+    block.columns.map((column) => ({
+      rowId: row.id,
+      columnId: column.id,
+    })),
+  )
+
+  return [...headerTargets, ...cellTargets]
+}
+
+export function findNextTarget(
+  targets: Array<EditTarget>,
+  current: EditTarget,
+  direction: 1 | -1,
+): EditTarget | null {
+  const currentIndex = targets.findIndex((target) => {
+    return target.rowId === current.rowId && target.columnId === current.columnId
+  })
+
+  if (currentIndex === -1 || targets.length === 0) return null
+
+  const nextIndex = currentIndex + direction
+  if (nextIndex < 0) return targets[targets.length - 1]
+  if (nextIndex >= targets.length) return targets[0]
+  return targets[nextIndex]
+}
+
+export function readTargetValue(
+  block: WorkbenchTableBlock,
+  target: EditTarget,
+): string {
+  if (target.rowId === null) {
+    const column = block.columns.find((item) => item.id === target.columnId)
+    return column?.name ?? ''
+  }
+
+  const row = block.rows.find((item) => item.id === target.rowId)
+  return row?.cells[target.columnId] ?? ''
+}
+
+export function updateBlockWithValue(
+  block: WorkbenchTableBlock,
+  target: EditTarget,
+  value: string,
+): WorkbenchTableBlock {
+  if (target.rowId === null) {
+    return {
+      ...block,
+      columns: block.columns.map((column) => {
+        if (column.id !== target.columnId) return column
+        return {
+          ...column,
+          name: value,
+        }
+      }),
+    }
+  }
+
+  return {
+    ...block,
+    rows: block.rows.map((row) => {
+      if (row.id !== target.rowId) return row
+      return {
+        ...row,
+        cells: {
+          ...row.cells,
+          [target.columnId]: value,
+        },
+      }
+    }),
+  }
+}
diff --git a/apps/webclaw/src/screens/chat/table-block-utils.test.ts b/apps/webclaw/src/screens/chat/table-block-utils.test.ts
new file mode 100644
index 0000000..2d2a256
--- /dev/null
+++ b/apps/webclaw/src/screens/chat/table-block-utils.test.ts
@@ -0,0 +1,75 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  tableBlockFromCsv,
+  tableBlockToCsv,
+  tableBlockToMarkdown,
+  type WorkbenchTableBlock,
+} from './table-block-utils'
+
+describe('tableBlockToMarkdown', function () {
+  it('serializes headers and rows into markdown table format', function () {
+    const block: WorkbenchTableBlock = {
+      id: 'block-1',
+      type: 'table',
+      columns: [
+        { id: 'c1', name: 'Name' },
+        { id: 'c2', name: 'Notes|Meta' },
+      ],
+      rows: [
+        { id: 'r1', cells: { c1: 'Austin', c2: 'line1\nline2' } },
+        { id: 'r2', cells: { c1: 'WebClaw', c2: '' } },
+      ],
+    }
+
+    expect(tableBlockToMarkdown(block)).toBe(
+      [
+        '| Name | Notes\\|Meta |',
+        '| --- | --- |',
+        '| Austin | line1<br />line2 |',
+        '| WebClaw |   |',
+      ].join('\n'),
+    )
+  })
+})
+
+describe('tableBlockFromCsv', function () {
+  it('parses quoted csv values and hydrates rows/columns', function () {
+    const block = tableBlockFromCsv(
+      'name,notes\n"Austin, Law","hello ""team"""\nBob,"line1\nline2"',
+      'block-id',
+    )
+
+    expect(block.id).toBe('block-id')
+    expect(block.type).toBe('table')
+    expect(block.columns).toHaveLength(2)
+    expect(block.columns[0]?.name).toBe('name')
+    expect(block.columns[1]?.name).toBe('notes')
+    expect(block.rows).toHaveLength(2)
+    expect(block.rows[0]?.cells[block.columns[0].id]).toBe('Austin, Law')
+    expect(block.rows[0]?.cells[block.columns[1].id]).toBe('hello "team"')
+    expect(block.rows[1]?.cells[block.columns[1].id]).toBe('line1\nline2')
+  })
+
+  it('throws on empty csv input', function () {
+    expect(() => tableBlockFromCsv('   ')).toThrow('CSV is empty')
+  })
+})
+
+describe('tableBlockToCsv', function () {
+  it('escapes commas, quotes and newlines', function () {
+    const block: WorkbenchTableBlock = {
+      id: 'block-2',
+      type: 'table',
+      columns: [
+        { id: 'c1', name: 'name' },
+        { id: 'c2', name: 'notes' },
+      ],
+      rows: [{ id: 'r1', cells: { c1: 'Austin, Law', c2: 'line1\n"line2"' } }],
+    }
+
+    expect(tableBlockToCsv(block)).toBe(
+      'name,notes\n"Austin, Law","line1\n""line2"""',
+    )
+  })
+})
diff --git a/apps/webclaw/src/screens/chat/table-block-utils.ts b/apps/webclaw/src/screens/chat/table-block-utils.ts
new file mode 100644
index 0000000..a012184
--- /dev/null
+++ b/apps/webclaw/src/screens/chat/table-block-utils.ts
@@ -0,0 +1,216 @@
+import { randomUUID } from '@/lib/utils'
+
+export type TableColumn = {
+  id: string
+  name: string
+}
+
+export type TableRow = {
+  id: string
+  cells: Record<string, string>
+}
+
+export type WorkbenchTableBlock = {
+  id: string
+  type: 'table'
+  columns: Array<TableColumn>
+  rows: Array<TableRow>
+}
+
+type CreateTableBlockOptions = {
+  columnCount?: number
+  rowCount?: number
+}
+
+export function createTableColumn(index: number): TableColumn {
+  return {
+    id: randomUUID(),
+    name: `Column ${index + 1}`,
+  }
+}
+
+export function createTableRow(columns: Array<TableColumn>): TableRow {
+  const cells: Record<string, string> = {}
+  for (const column of columns) {
+    cells[column.id] = ''
+  }
+  return {
+    id: randomUUID(),
+    cells,
+  }
+}
+
+export function createTableBlock(
+  options: CreateTableBlockOptions = {},
+): WorkbenchTableBlock {
+  const columnCount = Math.max(1, options.columnCount ?? 3)
+  const rowCount = Math.max(1, options.rowCount ?? 3)
+  const columns = Array.from({ length: columnCount }, (_, index) =>
+    createTableColumn(index),
+  )
+  const rows = Array.from({ length: rowCount }, () => createTableRow(columns))
+
+  return {
+    id: randomUUID(),
+    type: 'table',
+    columns,
+    rows,
+  }
+}
+
+export function tableBlockToMarkdown(block: WorkbenchTableBlock): string {
+  if (block.columns.length === 0) return ''
+
+  const headerLine = `| ${block.columns
+    .map((column) => escapeMarkdownCell(column.name))
+    .join(' | ')} |`
+  const separatorLine = `| ${block.columns.map(() => '---').join(' | ')} |`
+
+  const rowLines = block.rows.map((row) => {
+    const values = block.columns.map((column) => {
+      return escapeMarkdownCell(row.cells[column.id] ?? '')
+    })
+    return `| ${values.join(' | ')} |`
+  })
+
+  return [headerLine, separatorLine, ...rowLines].join('\n')
+}
+
+export function tableBlockToCsv(block: WorkbenchTableBlock): string {
+  const header = block.columns.map((column) => escapeCsvCell(column.name))
+  const rows = block.rows.map((row) =>
+    block.columns.map((column) => escapeCsvCell(row.cells[column.id] ?? '')),
+  )
+
+  return [header, ...rows].map((line) => line.join(',')).join('\n')
+}
+
+export function tableBlockFromCsv(
+  csvText: string,
+  existingBlockId?: string,
+): WorkbenchTableBlock {
+  const parsedRows = parseCsvRows(csvText)
+
+  if (parsedRows.length === 0) {
+    throw new Error('CSV is empty')
+  }
+
+  const maxColumnCount = Math.max(
+    1,
+    ...parsedRows.map((row) => Math.max(1, row.length)),
+  )
+
+  const headerValues = parsedRows[0] ?? []
+  const columns = Array.from({ length: maxColumnCount }, (_, index) => ({
+    id: randomUUID(),
+    name: (headerValues[index] ?? '').trim() || `Column ${index + 1}`,
+  }))
+
+  const dataRows = parsedRows.slice(1)
+  const rows =
+    dataRows.length > 0
+      ? dataRows.map((values) => {
+          const cells: Record<string, string> = {}
+          for (let index = 0; index < columns.length; index += 1) {
+            cells[columns[index].id] = values[index] ?? ''
+          }
+          return {
+            id: randomUUID(),
+            cells,
+          }
+        })
+      : [createTableRow(columns)]
+
+  return {
+    id: existingBlockId ?? randomUUID(),
+    type: 'table',
+    columns,
+    rows,
+  }
+}
+
+function escapeMarkdownCell(value: string): string {
+  const normalized = value.replace(/\r\n/g, '\n').replace(/\n/g, '<br />')
+  const escaped = normalized.replace(/\|/g, '\\|')
+  return escaped.length > 0 ? escaped : ' '
+}
+
+function escapeCsvCell(value: string): string {
+  const normalized = value.replace(/\r\n/g, '\n')
+  if (
+    normalized.includes(',') ||
+    normalized.includes('"') ||
+    normalized.includes('\n')
+  ) {
+    return `"${normalized.replace(/"/g, '""')}"`
+  }
+  return normalized
+}
+
+function parseCsvRows(input: string): Array<Array<string>> {
+  const trimmed = input.trim()
+  if (trimmed.length === 0) return []
+
+  const rows: Array<Array<string>> = []
+  let row: Array<string> = []
+  let cell = ''
+  let inQuotes = false
+
+  for (let index = 0; index < input.length; index += 1) {
+    const char = input[index]
+
+    if (inQuotes) {
+      if (char === '"') {
+        const next = input[index + 1]
+        if (next === '"') {
+          cell += '"'
+          index += 1
+        } else {
+          inQuotes = false
+        }
+      } else {
+        cell += char
+      }
+      continue
+    }
+
+    if (char === '"') {
+      inQuotes = true
+      continue
+    }
+
+    if (char === ',') {
+      row.push(cell)
+      cell = ''
+      continue
+    }
+
+    if (char === '\n') {
+      row.push(cell)
+      rows.push(row)
+      row = []
+      cell = ''
+      continue
+    }
+
+    if (char === '\r') {
+      continue
+    }
+
+    cell += char
+  }
+
+  if (inQuotes) {
+    throw new Error('CSV has an unclosed quote')
+  }
+
+  row.push(cell)
+  rows.push(row)
+
+  const lastRow = rows[rows.length - 1]
+  if (rows.length > 1 && lastRow.every((value) => value.length === 0)) {
+    rows.pop()
+  }
+
+  return rows
+}
diff --git a/apps/webclaw/vitest.config.ts b/apps/webclaw/vitest.config.ts
new file mode 100644
index 0000000..493d857
--- /dev/null
+++ b/apps/webclaw/vitest.config.ts
@@ -0,0 +1,15 @@
+import { URL, fileURLToPath } from 'node:url'
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
+  test: {
+    include: ['src/**/*.test.ts', 'src/**/*.test.tsx'],
+    exclude: ['e2e/**', 'node_modules/**'],
+    environment: 'node',
+  },
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ec41d4c..be339cf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -133,6 +133,9 @@ importers:
         specifier: ^5.0.11
         version: 5.0.11(@types/react@19.2.13)(react@19.2.4)(use-sync-external-store@1.6.0(react@19.2.4))
     devDependencies:
+      '@playwright/test':
+        specifier: ^1.58.2
+        version: 1.58.2
       '@tanstack/eslint-config':
         specifier: ^0.3.0
         version: 0.3.4(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
@@ -828,89 +831,105 @@ packages:
     resolution: {integrity: sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-libvips-linux-arm@1.2.4':
     resolution: {integrity: sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-libvips-linux-ppc64@1.2.4':
     resolution: {integrity: sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-libvips-linux-riscv64@1.2.4':
     resolution: {integrity: sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-libvips-linux-s390x@1.2.4':
     resolution: {integrity: sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-libvips-linux-x64@1.2.4':
     resolution: {integrity: sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-libvips-linuxmusl-arm64@1.2.4':
     resolution: {integrity: sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@img/sharp-libvips-linuxmusl-x64@1.2.4':
     resolution: {integrity: sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@img/sharp-linux-arm64@0.34.5':
     resolution: {integrity: sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-linux-arm@0.34.5':
     resolution: {integrity: sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-linux-ppc64@0.34.5':
     resolution: {integrity: sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-linux-riscv64@0.34.5':
     resolution: {integrity: sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-linux-s390x@0.34.5':
     resolution: {integrity: sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-linux-x64@0.34.5':
     resolution: {integrity: sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-linuxmusl-arm64@0.34.5':
     resolution: {integrity: sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@img/sharp-linuxmusl-x64@0.34.5':
     resolution: {integrity: sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@img/sharp-wasm32@0.34.5':
     resolution: {integrity: sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==}
@@ -987,6 +1006,11 @@ packages:
   '@oxc-project/types@0.112.0':
     resolution: {integrity: sha512-m6RebKHIRsax2iCwVpYW2ErQwa4ywHJrE4sCK3/8JK8ZZAWOKXaRJFl/uP51gaVyyXlaS4+chU1nSCdzYf6QqQ==}
 
+  '@playwright/test@1.58.2':
+    resolution: {integrity: sha512-akea+6bHYBBfA9uQqSYmlJXn61cTa+jbO87xVLCWbTqbWadRVmhxlXATaOjOgcBaWU4ePo0wB41KMFv3o35IXA==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   '@poppinss/colors@4.1.6':
     resolution: {integrity: sha512-H9xkIdFswbS8n1d6vmRd8+c10t2Qe+rZITbbDHHkQixH5+2x1FDGmi/0K+WgWiqQFKPSlIYB7jlH6Kpfn6Fleg==}
 
@@ -1031,24 +1055,28 @@ packages:
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@rolldown/binding-linux-arm64-musl@1.0.0-rc.3':
     resolution: {integrity: sha512-Z03/wrqau9Bicfgb3Dbs6SYTHliELk2PM2LpG2nFd+cGupTMF5kanLEcj2vuuJLLhptNyS61rtk7SOZ+lPsTUA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@rolldown/binding-linux-x64-gnu@1.0.0-rc.3':
     resolution: {integrity: sha512-iSXXZsQp08CSilff/DCTFZHSVEpEwdicV3W8idHyrByrcsRDVh9sGC3sev6d8BygSGj3vt8GvUKBPCoyMA4tgQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@rolldown/binding-linux-x64-musl@1.0.0-rc.3':
     resolution: {integrity: sha512-qaj+MFudtdCv9xZo9znFvkgoajLdc+vwf0Kz5N44g+LU5XMe+IsACgn3UG7uTRlCCvhMAGXm1XlpEA5bZBrOcw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@rolldown/binding-openharmony-arm64@1.0.0-rc.3':
     resolution: {integrity: sha512-U662UnMETyjT65gFmG9ma+XziENrs7BBnENi/27swZPYagubfHRirXHG2oMl+pEax2WvO7Kb9gHZmMakpYqBHQ==}
@@ -1116,66 +1144,79 @@ packages:
     resolution: {integrity: sha512-F8sWbhZ7tyuEfsmOxwc2giKDQzN3+kuBLPwwZGyVkLlKGdV1nvnNwYD0fKQ8+XS6hp9nY7B+ZeK01EBUE7aHaw==}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.57.1':
     resolution: {integrity: sha512-rGfNUfn0GIeXtBP1wL5MnzSj98+PZe/AXaGBCRmT0ts80lU5CATYGxXukeTX39XBKsxzFpEeK+Mrp9faXOlmrw==}
     cpu: [arm]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.57.1':
     resolution: {integrity: sha512-MMtej3YHWeg/0klK2Qodf3yrNzz6CGjo2UntLvk2RSPlhzgLvYEB3frRvbEF2wRKh1Z2fDIg9KRPe1fawv7C+g==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.57.1':
     resolution: {integrity: sha512-1a/qhaaOXhqXGpMFMET9VqwZakkljWHLmZOX48R0I/YLbhdxr1m4gtG1Hq7++VhVUmf+L3sTAf9op4JlhQ5u1Q==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-loong64-gnu@4.57.1':
     resolution: {integrity: sha512-QWO6RQTZ/cqYtJMtxhkRkidoNGXc7ERPbZN7dVW5SdURuLeVU7lwKMpo18XdcmpWYd0qsP1bwKPf7DNSUinhvA==}
     cpu: [loong64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-loong64-musl@4.57.1':
     resolution: {integrity: sha512-xpObYIf+8gprgWaPP32xiN5RVTi/s5FCR+XMXSKmhfoJjrpRAjCuuqQXyxUa/eJTdAE6eJ+KDKaoEqjZQxh3Gw==}
     cpu: [loong64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-ppc64-gnu@4.57.1':
     resolution: {integrity: sha512-4BrCgrpZo4hvzMDKRqEaW1zeecScDCR+2nZ86ATLhAoJ5FQ+lbHVD3ttKe74/c7tNT9c6F2viwB3ufwp01Oh2w==}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-ppc64-musl@4.57.1':
     resolution: {integrity: sha512-NOlUuzesGauESAyEYFSe3QTUguL+lvrN1HtwEEsU2rOwdUDeTMJdO5dUYl/2hKf9jWydJrO9OL/XSSf65R5+Xw==}
     cpu: [ppc64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-riscv64-gnu@4.57.1':
     resolution: {integrity: sha512-ptA88htVp0AwUUqhVghwDIKlvJMD/fmL/wrQj99PRHFRAG6Z5nbWoWG4o81Nt9FT+IuqUQi+L31ZKAFeJ5Is+A==}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-musl@4.57.1':
     resolution: {integrity: sha512-S51t7aMMTNdmAMPpBg7OOsTdn4tySRQvklmL3RpDRyknk87+Sp3xaumlatU+ppQ+5raY7sSTcC2beGgvhENfuw==}
     cpu: [riscv64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-s390x-gnu@4.57.1':
     resolution: {integrity: sha512-Bl00OFnVFkL82FHbEqy3k5CUCKH6OEJL54KCyx2oqsmZnFTR8IoNqBF+mjQVcRCT5sB6yOvK8A37LNm/kPJiZg==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.57.1':
     resolution: {integrity: sha512-ABca4ceT4N+Tv/GtotnWAeXZUZuM/9AQyCyKYyKnpk4yoA7QIAuBt6Hkgpw8kActYlew2mvckXkvx0FfoInnLg==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.57.1':
     resolution: {integrity: sha512-HFps0JeGtuOR2convgRRkHCekD7j+gdAuXM+/i6kGzQtFhlCtQkpwtNzkNj6QhCDp7DRJ7+qC/1Vg2jt5iSOFw==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-openbsd-x64@4.57.1':
     resolution: {integrity: sha512-H+hXEv9gdVQuDTgnqD+SQffoWoc0Of59AStSzTEj/feWTBAnSfSD3+Dql1ZruJQxmykT/JVY0dE8Ka7z0DH1hw==}
@@ -1279,24 +1320,28 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@tailwindcss/oxide-linux-arm64-musl@4.1.18':
     resolution: {integrity: sha512-1px92582HkPQlaaCkdRcio71p8bc8i/ap5807tPRDK/uw953cauQBT8c5tVGkOwrHMfc2Yh6UuxaH4vtTjGvHg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@tailwindcss/oxide-linux-x64-gnu@4.1.18':
     resolution: {integrity: sha512-v3gyT0ivkfBLoZGF9LyHmts0Isc8jHZyVcbzio6Wpzifg/+5ZJpDiRiUhDLkcr7f/r38SWNe7ucxmGW3j3Kb/g==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@tailwindcss/oxide-linux-x64-musl@4.1.18':
     resolution: {integrity: sha512-bhJ2y2OQNlcRwwgOAGMY0xTFStt4/wyU6pvI6LSuZpRgKQwxTec0/3Scu91O8ir7qCR3AuepQKLU/kX99FouqQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@tailwindcss/oxide-wasm32-wasi@4.1.18':
     resolution: {integrity: sha512-LffYTvPjODiP6PT16oNeUQJzNVyJl1cjIebq/rWWBF+3eDst5JGEFSc5cWxyRCJ0Mxl+KyIkqRxk1XPEs9x8TA==}
@@ -1678,41 +1723,49 @@ packages:
     resolution: {integrity: sha512-34gw7PjDGB9JgePJEmhEqBhWvCiiWCuXsL9hYphDF7crW7UgI05gyBAi6MF58uGcMOiOqSJ2ybEeCvHcq0BCmQ==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@unrs/resolver-binding-linux-arm64-musl@1.11.1':
     resolution: {integrity: sha512-RyMIx6Uf53hhOtJDIamSbTskA99sPHS96wxVE/bJtePJJtpdKGXO1wY90oRdXuYOGOTuqjT8ACccMc4K6QmT3w==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@unrs/resolver-binding-linux-ppc64-gnu@1.11.1':
     resolution: {integrity: sha512-D8Vae74A4/a+mZH0FbOkFJL9DSK2R6TFPC9M+jCWYia/q2einCubX10pecpDiTmkJVUH+y8K3BZClycD8nCShA==}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@unrs/resolver-binding-linux-riscv64-gnu@1.11.1':
     resolution: {integrity: sha512-frxL4OrzOWVVsOc96+V3aqTIQl1O2TjgExV4EKgRY09AJ9leZpEg8Ak9phadbuX0BA4k8U5qtvMSQQGGmaJqcQ==}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@unrs/resolver-binding-linux-riscv64-musl@1.11.1':
     resolution: {integrity: sha512-mJ5vuDaIZ+l/acv01sHoXfpnyrNKOk/3aDoEdLO/Xtn9HuZlDD6jKxHlkN8ZhWyLJsRBxfv9GYM2utQ1SChKew==}
     cpu: [riscv64]
     os: [linux]
+    libc: [musl]
 
   '@unrs/resolver-binding-linux-s390x-gnu@1.11.1':
     resolution: {integrity: sha512-kELo8ebBVtb9sA7rMe1Cph4QHreByhaZ2QEADd9NzIQsYNQpt9UkM9iqr2lhGr5afh885d/cB5QeTXSbZHTYPg==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@unrs/resolver-binding-linux-x64-gnu@1.11.1':
     resolution: {integrity: sha512-C3ZAHugKgovV5YvAMsxhq0gtXuwESUKc5MhEtjBpLoHPLYM+iuwSj3lflFwK3DPm68660rZ7G8BMcwSro7hD5w==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@unrs/resolver-binding-linux-x64-musl@1.11.1':
     resolution: {integrity: sha512-rV0YSoyhK2nZ4vEswT/QwqzqQXw5I6CjoaYMOX0TqBlWhojUf8P94mvI7nuJTeaCkkds3QE4+zS8Ko+GdXuZtA==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@unrs/resolver-binding-wasm32-wasi@1.11.1':
     resolution: {integrity: sha512-5u4RkfxJm+Ng7IWgkzi3qrFOvLvQYnPBmjmZQ8+szTK/b31fQCnleNl1GgEt7nIsZRIf5PLhPwT0WM+q45x/UQ==}
@@ -2262,6 +2315,11 @@ packages:
       react-dom:
         optional: true
 
+  fsevents@2.3.2:
+    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -2583,24 +2641,28 @@ packages:
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-arm64-musl@1.30.2:
     resolution: {integrity: sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-linux-x64-gnu@1.30.2:
     resolution: {integrity: sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-x64-musl@1.30.2:
     resolution: {integrity: sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-win32-arm64-msvc@1.30.2:
     resolution: {integrity: sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==}
@@ -2938,6 +3000,16 @@ packages:
     resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
     engines: {node: '>=12'}
 
+  playwright-core@1.58.2:
+    resolution: {integrity: sha512-yZkEtftgwS8CsfYo7nm0KE8jsvm6i/PTgVtB8DL726wNf6H2IMsDuxCpJj59KDaxCtSnrWan2AeDqM7JBaultg==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  playwright@1.58.2:
+    resolution: {integrity: sha512-vA30H8Nvkq/cPBnNw4Q8TWz1EJyqgpuinBcHET0YVJVFldr8JDNiU9LaWAE1KqSkRYazuaBhTpB5ZzShOezQ6A==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   postcss@8.5.6:
     resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
     engines: {node: ^10 || ^12 || >=14}
@@ -4281,6 +4353,10 @@ snapshots:
 
   '@oxc-project/types@0.112.0': {}
 
+  '@playwright/test@1.58.2':
+    dependencies:
+      playwright: 1.58.2
+
   '@poppinss/colors@4.1.6':
     dependencies:
       kleur: 4.1.5
@@ -5604,6 +5680,9 @@ snapshots:
       react: 19.2.4
       react-dom: 19.2.4(react@19.2.4)
 
+  fsevents@2.3.2:
+    optional: true
+
   fsevents@2.3.3:
     optional: true
 
@@ -6524,6 +6603,14 @@ snapshots:
 
   picomatch@4.0.3: {}
 
+  playwright-core@1.58.2: {}
+
+  playwright@1.58.2:
+    dependencies:
+      playwright-core: 1.58.2
+    optionalDependencies:
+      fsevents: 2.3.2
+
   postcss@8.5.6:
     dependencies:
       nanoid: 3.3.11