feat(tables): give the table view source/grants/host and delete the module fork

`TableView({ source, grants, host })` joins `FileView` and `InterfaceView` as a
canonical resource view, registered in `CANONICAL_UNITS` so R1a/R2/R4/R6 now
police it. `table` moves from "no canonical view yet" to a real one.

The interfaces table module stops re-implementing a table. It had grown its own
451-line renderer — cell resolver, favicon-link builder, offset pagination — and
that fork is now three files lighter: mint a table source from the surrounding
interface source, mount the view. 163 lines become 74.

What the module gains by not being a fork: every cell kind the grid draws.
Booleans, dates, JSON, links, pinned columns, select pills, and workflow-output
state now render identically in a module and in the grid, because they are the
same component rather than an approximation of it.

The share arm is addressed by `(token, grantId)` and carries no table id at all
— the server derives it from the stored layout per request. `workspaceId` is
threaded from the source and is `undefined` there, which is what keeps the
`sim-resource` chip (and the four workspace-authenticated queries its renderer
mounts) off a public page. `cells/cell-render.test.ts` is what holds that.

Two things this deliberately does NOT do:

- It does not touch the tables page or the mothership panel. Both still mount
  the full editing shell. Making the panel read-only is a product decision about
  whether you can edit a table from chat, not a refactor, and it does not belong
  in a change whose value is deleting a fork.
- It does not unify the row page size. The page drains 1000 for client-side sort
  and filter; this view takes 100. `pageSize` is in the query key, so they do not
  share row cache — which the code now says plainly instead of claiming
  otherwise. Fixing it changes behaviour on one surface or the other.

Caught while doing it: `CellRender` returns `null` for an empty cell because the
grid's virtualizer owns row height. A panel has nothing holding the row open, so
an all-empty row collapsed. The floor lives on a wrapper in this view rather than
in `CellRender`, so the grid is untouched. A pre-existing test caught it.

Author: waleedlatif1

apps/sim/components/resources/interface-view/components/module-renderer/components/table-module/components/table-cell-value/index.ts

@@ -1,20 +1,14 @@
 'use client'
 
-import { Skeleton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@sim/emcn'
+import { useMemo } from 'react'
 import { Table as TableIcon } from '@sim/emcn/icons'
 import { ModuleResourcePicker } from '@/components/resources/interface-view/components/module-renderer/components/module-resource-picker'
-import { TableCellValue } from '@/components/resources/interface-view/components/module-renderer/components/table-module/components/table-cell-value'
-import { useModuleTable } from '@/components/resources/interface-view/components/module-renderer/components/table-module/hooks/use-module-table'
+import { interfaceModuleSeed } from '@/components/resources/interface-view/interface-scope'
 import { ResourceEmptyState } from '@/components/resources/resource-empty-state'
 import { useResourceOfKind } from '@/components/resources/resource-provider'
+import { TableView } from '@/components/resources/table-view'
 import type { InterfaceModule } from '@/lib/interfaces/types'
-import { getColumnId } from '@/lib/table/column-keys'
-
-/** Distance from the bottom of the scroller at which the next page is requested. */
-const TABLE_MODULE_PREFETCH_PX = 200
-
-/** Stable keys for the loading placeholder rows. */
-const LOADING_ROW_KEYS = ['row-1', 'row-2', 'row-3', 'row-4', 'row-5'] as const
+import { grantsForShare, shareSource, workspaceSource } from '@/resources'
 
 export interface TableModuleProps {
   module: Extract<InterfaceModule, { type: 'table' }>
@@ -28,47 +22,43 @@ export interface TableModuleProps {
 }
 
 /**
- * Read-only view of a workspace table.
+ * A workspace table inside an interface.
  *
- * Deliberately not the table editor — no sorting, filtering, or cell editing —
- * but the rows are the real ones: {@link useModuleTable} resolves them from the
- * surrounding resource and pages in more as the visitor scrolls, so a
- * large table is browsable rather than truncated at the first page. The same
- * component serves the editor and a public share; only the source differs.
+ * This module owns exactly two things: binding itself to a table, and turning
+ * the surrounding interface source into a *table* source. The table itself is
+ * the canonical {@link TableView}, so a module renders every cell kind the
+ * tables grid does — booleans, dates, JSON, links, currency, select pills —
+ * rather than the approximation it used to carry.
  *
- * An unbound module authors itself: given `onConfigChange` it renders the same
- * chooser column the empty cell offered a moment earlier, so picking the table
- * happens where the module is rather than in the inspector.
+ * The share arm addresses the table by `(token, moduleId)` and carries no table
+ * id at all: the server derives it from the stored layout on every request, so
+ * there is nothing here for a visitor to forge.
  */
 export function TableModule({ module, onConfigChange }: TableModuleProps) {
   const { source } = useResourceOfKind('interface')
   const { tableId } = module.config
-  const {
-    columns,
-    rows,
-    totalCount,
-    isPending,
-    isMissing,
-    isError,
-    hasNextPage,
-    isFetchingNextPage,
-    fetchNextPage,
-  } = useModuleTable(module)
 
-  /**
-   * Pages in the next batch as the scroller nears its end. Guarded on
-   * `hasNextPage` so the final page never fires a request, and on
-   * `isFetchingNextPage` so a fast scroll cannot queue duplicates.
-   */
-  function handleScroll(event: React.UIEvent<HTMLDivElement>): void {
-    if (!hasNextPage || isFetchingNextPage) return
-    const { scrollHeight, scrollTop, clientHeight } = event.currentTarget
-    if (scrollHeight - scrollTop - clientHeight > TABLE_MODULE_PREFETCH_PX) return
-    fetchNextPage()
-  }
+  const seed = interfaceModuleSeed(source, module.id)
+  const sharedTable = seed?.kind === 'table' ? seed.seed : null
 
-  if (source.via === 'workspace' && !tableId) {
-    if (onConfigChange) {
+  const tableSource = useMemo(() => {
+    if (source.via === 'workspace') {
+      return tableId
+        ? workspaceSource({ kind: 'table', workspaceId: source.workspaceId, resourceId: tableId })
+        : null
+    }
+    return sharedTable
+      ? shareSource({ kind: 'table', token: source.token, grantId: module.id, seed: sharedTable })
+      : null
+  }, [source, tableId, sharedTable, module.id])
+
+  if (!tableSource) {
+    /**
+     * Unbound in the editor: the module authors itself, rendering the same
+     * chooser the empty cell offered a moment earlier so picking the table
+     * happens where the module is rather than in the inspector.
+     */
+    if (source.via === 'workspace' && onConfigChange) {
       return (
         <ModuleResourcePicker
           kind='table'
@@ -80,84 +70,5 @@ export function TableModule({ module, onConfigChange }: TableModuleProps) {
     return <ResourceEmptyState icon={TableIcon} description='This table is not available.' />
   }
 
-  if (isError) {
-    /**
-     * A visitor is not told where the table lived — "in the workspace" is
-     * internal state on a public page, and naming it would leak that the share
-     * belongs to one.
-     */
-    const missingMessage =
-      source.via === 'workspace'
-        ? 'This table is no longer in the workspace.'
-        : 'This table is no longer available.'
-    return (
-      <ResourceEmptyState
-        icon={TableIcon}
-        description={isMissing ? missingMessage : 'This table could not be loaded.'}
-      />
-    )
-  }
-
-  if (isPending) {
-    return (
-      <div className='flex h-full flex-col gap-2 p-3'>
-        {LOADING_ROW_KEYS.map((key) => (
-          <Skeleton key={key} className='h-[20px] w-full' />
-        ))}
-      </div>
-    )
-  }
-
-  if (!columns || columns.length === 0) {
-    return <ResourceEmptyState icon={TableIcon} description='This table has no columns yet.' />
-  }
-
-  if (rows.length === 0) {
-    return <ResourceEmptyState icon={TableIcon} description='This table has no rows yet.' />
-  }
-
-  const remaining = totalCount !== null && totalCount > rows.length
-
-  return (
-    <div className='flex h-full min-h-0 flex-col'>
-      <div onScroll={handleScroll} className='min-h-0 flex-1 overflow-auto overscroll-contain'>
-        <Table>
-          <TableHeader>
-            <TableRow>
-              {columns.map((column) => (
-                <TableHead key={getColumnId(column)} className='whitespace-nowrap'>
-                  {column.name}
-                </TableHead>
-              ))}
-            </TableRow>
-          </TableHeader>
-          {/**
-           * EMCN's `TableBody` drops the last row's rule (`[&_tr:last-child]:border-0`)
-           * so a table can sit flush against a page. Inside a module the rows
-           * end mid-pane instead, and without the closing line the list looks
-           * truncated — restored here. `!` because that rule targets the same
-           * `tr:last-child` and would otherwise out-specify a row-level class.
-           */}
-          <TableBody className='[&_tr:last-child]:!border-b'>
-            {rows.map((row) => (
-              <TableRow key={row.id}>
-                {columns.map((column) => (
-                  <TableCell key={getColumnId(column)} className='max-w-[240px]'>
-                    <TableCellValue value={row.data[getColumnId(column)]} column={column} />
-                  </TableCell>
-                ))}
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </div>
-      {remaining ? (
-        <p className='border-[var(--border)] border-t px-3 py-2 text-[var(--text-muted)] text-caption'>
-          {isFetchingNextPage
-            ? 'Loading more rows…'
-            : `Showing ${rows.length} of ${totalCount} rows.`}
-        </p>
-      ) : null}
-    </div>
-  )
+  return <TableView source={tableSource} grants={grantsForShare('table')} host='panel' />
 }

apps/sim/components/resources/interface-view/components/module-renderer/components/table-module/components/table-cell-value/table-cell-value.tsx

@@ -1,14 +1,16 @@
 /**
  * @vitest-environment node
  *
- * A table rendered inside an interface module must format its cells the same way
- * the tables grid does. Both surfaces resolve through the column-type registry
- * (`columnTypeOf(column).formatForDisplay`), so a currency column reads
- * `$1,234.50` in both places rather than `1234.5` in one of them, and a select
- * column shows its option *name* rather than the stored option id.
+ * Every surface that draws a table resolves its cell text through the
+ * column-type registry, so a currency column reads `$1,234.50` and a select
+ * column shows its option *name* wherever it is mounted — the tables grid, an
+ * embedded panel, or a public share.
  *
- * These assert the formatting contract through the registry rather than through
- * the component, so they stay fast and cannot flake on rendering.
+ * This pins the registry contract `CellContent` depends on. It regressed once:
+ * the interface module carried its own resolver that handled only
+ * boolean/null/json/date/string and let currency and select fall through to
+ * `JSON.stringify`, so a module rendered `1234.5` and `opt_open` where the grid
+ * rendered `$1,234.50` and `Open`.
  */
 import { describe, expect, it } from 'vitest'
 import { columnTypeOf } from '@/lib/table/column-types'
@@ -18,7 +20,7 @@ function column(overrides: Partial<ColumnDefinition> & Pick<ColumnDefinition, 't
   return { id: 'col_1', name: 'col', ...overrides } as ColumnDefinition
 }
 
-describe('interface table module cell formatting', () => {
+describe('table cell display formatting', () => {
   it('formats currency through the registry, not as a bare number', () => {
     const col = column({ type: 'currency', currencyCode: 'USD' })
     const text = columnTypeOf(col).formatForDisplay(1234.5, col)
@@ -56,8 +58,8 @@ describe('interface table module cell formatting', () => {
 
   /**
    * The registry's completeness gate means every column type has a formatter;
-   * this is what lets the module use one fallback branch instead of a per-type
-   * switch that would drift from the grid's.
+   * that is what lets the cell layer use one fallback branch instead of a
+   * per-type switch that would drift from the grid's.
    */
   it('gives every column type a display formatter', () => {
     for (const type of ['string', 'number', 'boolean', 'date', 'json', 'select', 'currency']) {