refactor(tables): clear the four blockers to moving the grid's view layer

Prep for relocating the table's presentational subtree to
`components/resources/table-view/`. Each of these would have made that move
either impossible or dishonest, so they land first, separately, with the tree
still behaving identically.

- `StatusBadge` moves to `components/execution-status/`. The tables grid drew it
  from `logs/utils`, which imports `getBlock` — so every table cell was pulling
  the whole block registry for a six-line badge. Three surfaces render it (logs
  list, log details, grid cells); none of them wanted that edge.
- `sim-resource-cell` imported `ChatMessageContext` from the home route's
  re-export; it is defined in `components/chat/types`. Now read from the source.
- `RemoteTableSelection` moves from the presence hook into the grid's own types,
  inverting the dependency: the overlay that draws a remote selection is
  presentational, the hook that produces it holds an authenticated socket. The
  overlay's two absolute self-imports become relative.
- `CellContent` takes an `editor` slot instead of importing `InlineEditor`.
  `apps/sim` has no `sideEffects: false`, so the static import shipped the whole
  write path (and its authenticated `useTimezone`) regardless of `isEditing`.
  `workspaceId` also becomes optional — that is the security seam the
  `cell-render` test pins, and it was previously required, so nothing could
  exercise the undefined path a share surface needs.

Interfaces consolidation from the playbook:
- One `MODULE_RESOURCE_COPY` table for both authoring surfaces; `ResourcePickerField`
  now takes a `kind` instead of five copy props. The two pickers are deliberately
  NOT merged — one takes items as props, the other wires one query per branch so an
  unwired table module never fetches workflows.
- `module-chrome.ts` now owns the interface grid geometry that was declared twice,
  including the placement custom properties, unified to `--module-row`/`--module-col`.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/interfaces/[interfaceId]/components/module-inspector/components/chat-module-fields/chat-module-fields.tsx

@@ -141,11 +141,7 @@ export function ChatModuleFields({
   return (
     <>
       <ResourcePickerField
-        title='Workflow'
-        missingMessage='This workflow is no longer in the workspace.'
-        placeholder='Select a workflow'
-        searchPlaceholder='Search workflows...'
-        emptyMessage='No workflows in this workspace'
+        kind='workflow'
         items={workflows.data}
         isLoading={workflows.isLoading}
         value={value.workflowId}

apps/sim/app/workspace/[workspaceId]/interfaces/[interfaceId]/components/module-inspector/components/form-module-fields/form-module-fields.tsx

@@ -84,11 +84,7 @@ export function FormModuleFields({
   return (
     <div className='flex flex-col'>
       <ResourcePickerField
-        title='Workflow'
-        missingMessage='This workflow is no longer in the workspace.'
-        placeholder='Select a workflow'
-        searchPlaceholder='Search workflows...'
-        emptyMessage='No workflows in this workspace'
+        kind='workflow'
         items={workflows.data}
         isLoading={workflows.isLoading}
         value={value.workflowId}

apps/sim/app/workspace/[workspaceId]/interfaces/[interfaceId]/components/module-inspector/components/resource-picker-field/resource-picker-field.test.tsx

@@ -4,6 +4,7 @@
 import { act } from 'react'
 import { createRoot, type Root } from 'react-dom/client'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import type { ModuleResourceKind } from '@/components/resources/interface-view/module-resource-copy'
 import { ResourcePickerField } from '@/app/workspace/[workspaceId]/interfaces/[interfaceId]/components/module-inspector/components/resource-picker-field/resource-picker-field'
 
 let container: HTMLDivElement
@@ -20,16 +21,11 @@ afterEach(() => {
   container.remove()
 })
 
-function render(title = 'Workflow') {
+function render(kind: ModuleResourceKind = 'workflow') {
   act(() => {
     root.render(
       <ResourcePickerField
-        title={title}
-        hint='Pick the workflow this module runs.'
-        missingMessage='This workflow is no longer in the workspace.'
-        placeholder='Select a workflow'
-        searchPlaceholder='Search workflows...'
-        emptyMessage='No workflows in this workspace'
+        kind={kind}
         items={[{ id: 'wf-1', name: 'Onboarding' }]}
         isLoading={false}
         value='wf-1'
@@ -46,13 +42,13 @@ function combobox(): HTMLElement {
 }
 
 describe('ResourcePickerField accessible names', () => {
-  it('names the combobox from the field title', () => {
+  it('names the combobox from the kind title', () => {
     render()
     expect(combobox()).toHaveAccessibleName('Workflow')
   })
 
   it('puts the name on the combobox itself, not the layout wrapper', () => {
-    render('Table')
+    render('table')
     const named = Array.from(container.querySelectorAll<HTMLElement>('[aria-label]'))
     expect(named).toHaveLength(1)
     expect(named[0]).toBe(combobox())

apps/sim/app/workspace/[workspaceId]/interfaces/[interfaceId]/components/module-inspector/components/resource-picker-field/resource-picker-field.tsx

@@ -2,6 +2,10 @@
 
 import { useMemo } from 'react'
 import { ChipCombobox, type ComboboxOption } from '@sim/emcn'
+import {
+  MODULE_RESOURCE_COPY,
+  type ModuleResourceKind,
+} from '@/components/resources/interface-view/module-resource-copy'
 import { InspectorField } from '@/app/workspace/[workspaceId]/interfaces/[interfaceId]/components/inspector-field'
 
 /** The minimal shape a pickable workspace resource exposes. */
@@ -11,13 +15,8 @@ export interface ResourcePickerItem {
 }
 
 export interface ResourcePickerFieldProps {
-  /** Field title; doubles as the combobox `aria-label`. */
-  title: string
-  /** Error shown when `value` no longer resolves against `items`. */
-  missingMessage: string
-  placeholder: string
-  searchPlaceholder: string
-  emptyMessage: string
+  /** Which workspace resource is being bound; selects the field's copy. */
+  kind: ModuleResourceKind
   /** Pickable resources — `undefined` while the list query resolves. */
   items: readonly ResourcePickerItem[] | undefined
   isLoading: boolean
@@ -34,24 +33,24 @@ export interface ResourcePickerFieldProps {
  * the chat/form workflow bindings).
  *
  * The picker gains a leading `None` entry once a resource is bound so the
- * binding can be cleared, and surfaces `missingMessage` when the bound id no
- * longer resolves — layout validation only guards writes, so a resource
- * deleted after wiring stays in the config until the user repoints it.
- * Options keep the list query's order, so every picker in the inspector
- * presents the same resources in the same order.
+ * binding can be cleared, and surfaces the kind's missing-resource message
+ * when the bound id no longer resolves — layout validation only guards writes,
+ * so a resource deleted after wiring stays in the config until the user
+ * repoints it. Options keep the list query's order, so every picker in the
+ * inspector presents the same resources in the same order.
+ *
+ * Copy comes from `MODULE_RESOURCE_COPY`, shared with the in-canvas picker so
+ * the inspector and the canvas never spell the same binding differently.
  */
 export function ResourcePickerField({
-  title,
-  missingMessage,
-  placeholder,
-  searchPlaceholder,
-  emptyMessage,
+  kind,
   items,
   isLoading,
   value,
   onChange,
   disabled = false,
 }: ResourcePickerFieldProps) {
+  const copy = MODULE_RESOURCE_COPY[kind]
   const options = useMemo<ComboboxOption[]>(() => {
     const list = (items ?? []).map((item) => ({ label: item.name, value: item.id }))
     if (!value) return list
@@ -61,19 +60,19 @@ export function ResourcePickerField({
   const missing = value !== null && items !== undefined && !items.some((item) => item.id === value)
 
   return (
-    <InspectorField title={title} error={missing ? missingMessage : undefined}>
+    <InspectorField title={copy.title} error={missing ? copy.missingMessage : undefined}>
       <ChipCombobox
         options={options}
         value={value ?? ''}
         onChange={(next) => onChange(next === '' ? null : next)}
-        placeholder={placeholder}
+        placeholder={copy.placeholder}
         searchable
-        searchPlaceholder={searchPlaceholder}
-        emptyMessage={emptyMessage}
+        searchPlaceholder={copy.searchPlaceholder}
+        emptyMessage={copy.emptyMessage}
         isLoading={isLoading}
         disabled={disabled}
         maxHeight={260}
-        aria-label={title}
+        aria-label={copy.title}
       />
     </InspectorField>
   )

apps/sim/app/workspace/[workspaceId]/interfaces/[interfaceId]/components/module-inspector/components/table-module-fields/table-module-fields.tsx

@@ -27,11 +27,7 @@ export function TableModuleFields({
 
   return (
     <ResourcePickerField
-      title='Table'
-      missingMessage='This table is no longer in the workspace.'
-      placeholder='Select a table'
-      searchPlaceholder='Search tables...'
-      emptyMessage='No tables in this workspace'
+      kind='table'
       items={tables.data}
       isLoading={tables.isLoading}
       value={value.tableId}

apps/sim/app/workspace/[workspaceId]/interfaces/[interfaceId]/components/module-inspector/module-inspector.tsx

@@ -246,11 +246,7 @@ function FileModuleFields({
   const files = useWorkspaceFiles(workspaceId)
   return (
     <ResourcePickerField
-      title='File'
-      missingMessage='This file is no longer in the workspace.'
-      placeholder='Select a file'
-      searchPlaceholder='Search files...'
-      emptyMessage='No files in this workspace'
+      kind='file'
       items={files.data}
       isLoading={files.isLoading}
       value={value.fileId}

apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx

@@ -28,6 +28,7 @@ import { ArrowDown, ArrowUp, Check, ChevronUp, Clipboard, Search, X } from 'luci
 import { useParams, useRouter } from 'next/navigation'
 import { useQueryState } from 'nuqs'
 import { createPortal } from 'react-dom'
+import { getDisplayStatus, StatusBadge } from '@/components/execution-status'
 import type { WorkflowLogRow } from '@/lib/api/contracts/logs'
 import { BASE_EXECUTION_CHARGE } from '@/lib/billing/constants'
 import { apportionCredits, dollarsToCredits } from '@/lib/billing/credits/conversion'
@@ -49,8 +50,6 @@ import {
 import {
   DELETED_WORKFLOW_LABEL,
   formatDate,
-  getDisplayStatus,
-  StatusBadge,
   TriggerBadge,
 } from '@/app/workspace/[workspaceId]/logs/utils'
 import { useCodeViewerFeatures } from '@/hooks/use-code-viewer'

apps/sim/app/workspace/[workspaceId]/logs/logs.tsx

@@ -27,6 +27,12 @@ import { formatDuration } from '@sim/utils/formatting'
 import { useQueryClient } from '@tanstack/react-query'
 import { useParams } from 'next/navigation'
 import { useQueryState } from 'nuqs'
+import {
+  getDisplayStatus,
+  type LogStatus,
+  STATUS_CONFIG,
+  StatusBadge,
+} from '@/components/execution-status'
 import type {
   WorkflowLogDetail,
   WorkflowLogRow,
@@ -92,11 +98,7 @@ import {
   DELETED_WORKFLOW_LABEL,
   extractRetryInput,
   formatDate,
-  getDisplayStatus,
-  type LogStatus,
   parseDuration,
-  STATUS_CONFIG,
-  StatusBadge,
   TriggerBadge,
 } from './utils'
 

apps/sim/app/workspace/[workspaceId]/logs/utils.ts

@@ -18,63 +18,6 @@ export const LOG_COLUMNS = {
 
 export const DELETED_WORKFLOW_LABEL = 'Deleted Workflow'
 
-export type LogStatus =
-  | 'error'
-  | 'pending'
-  | 'running'
-  | 'redacting'
-  | 'info'
-  | 'cancelled'
-  | 'cancelling'
-
-/**
- * Maps raw status string to LogStatus for display.
- * @param status - Raw status from API
- * @returns Normalized LogStatus value
- */
-export function getDisplayStatus(status: string | null | undefined): LogStatus {
-  switch (status) {
-    case 'running':
-      return 'running'
-    case 'redacting':
-      return 'redacting'
-    case 'pending':
-      return 'pending'
-    case 'cancelling':
-      return 'cancelling'
-    case 'cancelled':
-      return 'cancelled'
-    case 'failed':
-      return 'error'
-    default:
-      return 'info'
-  }
-}
-
-export const STATUS_CONFIG: Record<
-  LogStatus,
-  {
-    variant: React.ComponentProps<typeof Badge>['variant']
-    label: string
-    color: string
-    /** Whether this status appears as a filter option. Intermediary states (e.g. cancelling) are excluded. */
-    filterable: boolean
-  }
-> = {
-  error: { variant: 'red', label: 'Error', color: 'var(--text-error)', filterable: true },
-  pending: { variant: 'amber', label: 'Pending', color: '#f59e0b', filterable: true },
-  running: { variant: 'amber', label: 'Running', color: '#f59e0b', filterable: true },
-  redacting: { variant: 'amber', label: 'Redacting', color: '#f59e0b', filterable: false },
-  cancelling: { variant: 'amber', label: 'Cancelling...', color: '#f59e0b', filterable: false },
-  cancelled: { variant: 'orange', label: 'Cancelled', color: '#f97316', filterable: true },
-  info: {
-    variant: 'gray',
-    label: 'Info',
-    color: 'var(--terminal-status-info-color)',
-    filterable: true,
-  },
-}
-
 const TRIGGER_VARIANT_MAP: Record<string, React.ComponentProps<typeof Badge>['variant']> = {
   manual: 'gray-secondary',
   api: 'blue',
@@ -89,24 +32,6 @@ const TRIGGER_VARIANT_MAP: Record<string, React.ComponentProps<typeof Badge>['va
   custom_block: 'blue-secondary',
 }
 
-interface StatusBadgeProps {
-  status: LogStatus
-}
-
-/**
- * Renders a colored badge indicating log execution status.
- * @param props - Component props containing the status
- * @returns A Badge with dot indicator and status label
- */
-export function StatusBadge({ status }: StatusBadgeProps) {
-  const config = STATUS_CONFIG[status]
-  return React.createElement(
-    Badge,
-    { variant: config.variant, dot: true, size: 'sm' },
-    config.label
-  )
-}
-
 interface TriggerBadgeProps {
   trigger: string
 }

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/cell-content.tsx

@@ -1,22 +1,32 @@
 'use client'
 
+import type { ReactNode } from 'react'
 import type { RowExecutionMetadata } from '@/lib/table'
-import type { SaveReason } from '../../../types'
 import type { DisplayColumn } from '../types'
 import { CellRender, resolveCellRender } from './cell-render'
-import { InlineEditor } from './inline-editors'
 
 interface CellContentProps {
   value: unknown
   exec?: RowExecutionMetadata
   column: DisplayColumn
-  /** Current workspace id — lets string cells holding an in-workspace resource
-   *  URL render as a tagged-resource chip instead of a plain external link. */
-  workspaceId: string
+  /**
+   * Current workspace id — lets string cells holding an in-workspace resource URL
+   * render as a tagged-resource chip instead of a plain external link.
+   *
+   * Optional, and that is the security seam: the chip's renderer mounts
+   * workspace-authenticated list queries, so a surface with no workspace identity
+   * (an anonymous share) passes `undefined` and the resolver never emits that kind.
+   * See `cell-render.test.ts`.
+   */
+  workspaceId?: string
   isEditing: boolean
-  initialCharacter?: string | null
-  onSave: (value: unknown, reason: SaveReason) => void
-  onCancel: () => void
+  /**
+   * The editing surface, supplied by the host that owns the write path. Injected
+   * rather than imported so a read-only surface never pulls the inline editor —
+   * `apps/sim` has no `sideEffects: false`, so a static import would ship it
+   * regardless of `isEditing`.
+   */
+  editor?: ReactNode
   /**
    * Human-readable labels for unmet deps on this row+group, used to render a
    * "Waiting" pill when the cell hasn't run because something it depends on
@@ -29,19 +39,17 @@ interface CellContentProps {
 
 /**
  * Glue layer: maps cell inputs to a typed `CellRenderKind` (via the pure
- * resolver) and renders the corresponding JSX (via the dumb renderer). The
- * inline editor sits on top when `isEditing` is true. Adding a new cell
- * appearance is a three-step mechanical change in the colocated files.
+ * resolver) and renders the corresponding JSX (via the dumb renderer). The host's
+ * `editor` sits on top when `isEditing` is true. Adding a new cell appearance is a
+ * three-step mechanical change in the colocated files.
  */
 export function CellContent({
   value,
   exec,
   column,
   workspaceId,
   isEditing,
-  initialCharacter,
-  onSave,
-  onCancel,
+  editor,
   waitingOnLabels,
   isEnrichmentOutput,
 }: CellContentProps) {
@@ -56,16 +64,8 @@ export function CellContent({
 
   return (
     <>
-      {isEditing && (
-        <div className='absolute inset-0 z-10 flex items-center px-0'>
-          <InlineEditor
-            value={value}
-            column={column}
-            initialCharacter={initialCharacter ?? undefined}
-            onSave={onSave}
-            onCancel={onCancel}
-          />
-        </div>
+      {isEditing && editor && (
+        <div className='absolute inset-0 z-10 flex items-center px-0'>{editor}</div>
       )}
       <CellRender kind={kind} isEditing={isEditing} />
     </>