Table Node Display & Presentation Sizing

Summary

Two intertwined improvements:

  1. Table node display upgrades — editor canvas toggle (info ↔ data preview), two presentation view modes (rich cards + traditional table)
  2. General presentation display settings — any node with presentationInput/presentationOutput gets configurable grid columns and element sizing, stored per-node with per-card overrides

Data Model

PresentationDisplay type

interface PresentationDisplay {
  columns?: 1 | 2 | 3 | 4          // cards per row (default: auto based on type)
  elementSize?: "sm" | "md" | "lg"  // media element size within cards (default: "md")
  viewMode?: string                 // node-type-specific, e.g. "cards" | "table" for loop
}

Storage

  1. Node data — node.data.presentationDisplay: PresentationDisplay — builder sets defaults in the config panel
  2. Card meta override — presentationSettings.cardMeta[nodeId].display: Partial<PresentationDisplay> — per-card override in presentation edit mode

Resolution

Merge cardMeta.display over node.data.presentationDisplay, then apply auto-defaults when neither is set:

Node type Default columns Default elementSize Default viewMode
Image output 2 md —
Video output 1 md —
Audio output 1 md —
Text output 1 — —
Loop (has image cols) 1 md cards
Loop (text-only cols) 1 md table

Editor — Table Node Canvas Preview

The loop node component (loop-node.tsx) adds a toggle between two views.

Info view (current default)

Unchanged: row × column count, column type badges.

Data view

Config panel data tab

The config panel (input-configs.tsx LoopConfig) adds a “Data” tab alongside the existing column/row editor:

Persistence

Toggle state is ephemeral (React state), not saved to workflow.

Presentation/App Mode — Table Views

The LoopInputCard is rebuilt to support two view modes controlled by presentationDisplay.viewMode.

Cards view (viewMode: "cards")

Table view (viewMode: "table")

Default behavior

When viewMode is not set: default to "cards" if any column has type image-url, video-url, or audio-url; default to "table" otherwise.

General Display Settings for All Node Types

Every node with presentationInput or presentationOutput gets access to presentationDisplay settings.

Available controls per node type

Node Type Columns Element Size View Mode
Image output 1–4 (default 2) sm/md/lg image —
Video output 1–4 (default 1) sm/md/lg player —
Audio output 1–4 (default 1) sm/md/lg player —
Text output 1–4 (default 1) — —
Table/Loop input 1–4 (default 1) sm/md/lg media cards / table

Builder configuration — config panel

New “Presentation” section at the bottom of each node’s config panel. Only visible when the node has presentationInput or presentationOutput set. Contains:

Builder configuration — presentation edit mode

The existing card gear/edit UI in presentation view gets the same controls as overrides, stored in cardMeta[nodeId].display.

Fan-out outputs

When a node produces multiple results from list execution, columns controls the result grid layout (e.g., 3 generated images in a 3-column grid vs single-column list).

Element size mapping reference

Context sm md lg
Cards view — image 64px 128px 256px
Table view — thumbnail 40px 64px 96px
Canvas data preview 24px 24px 24px
Image output card 200px max-h 400px max-h 70vh max-h
Video output card 200px max-h 400px max-h 70vh max-h
Audio output card 40px player height, no waveform 56px player height, mini waveform 80px player height, full waveform

Files to modify

Types

Editor — table node

Presentation display settings

App runner

Table presentation views

Presentation edit mode

Output card sizing

Published apps

presentationDisplay lives on node.data, which is persisted in the workflow’s nodes JSONB column. Published app snapshots (published_apps.nodes) copy the full JSONB, so display settings are automatically included. The app-runner rendering path must consume display settings from the snapshot — no additional snapshotting logic needed.

Responsive behavior

On narrow viewports (mobile app-runner shell, <640px), columns clamps to a max of 2 regardless of the builder’s setting. This prevents 3- or 4-column grids from becoming unusable on small screens.

Out of scope