docs(tables): real captures for workflow columns

Three current-UI screenshots replace placeholder markers on workflow-columns:
the live grid as the hero (three workflow groups — Company Domain, Company
Info, Lead Score Enrichment — filling columns per row, 21 running), the
Configure workflow panel at the configuration section, and a group's
input/output column mapping at the outputs section. The cascade-diagram marker
now points at the hero, which is a real three-group cascade. 5 -> 1 markers on
the page (execution-status badges still pending a capture).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: ouiliame

apps/docs/content/docs/en/tables/workflow-columns.mdx

@@ -6,12 +6,20 @@ pageType: concept
 
 import { Callout } from 'fumadocs-ui/components/callout'
 import { Card, Cards } from 'fumadocs-ui/components/card'
+import { Image } from '@/components/ui/image'
 
 A [table](/tables) is a grid of typed columns. Usually you type a column's values in. A **workflow column** is different: its values come from a [workflow](/workflows) that runs once per row. For each row, the workflow reads the columns you choose as input, runs its blocks, and writes its results back into columns on that same row.
 
 This is what makes a table active. Instead of running a workflow by hand and pasting the results in, you attach the workflow to the table and it fills each row on its own. It works a bit like a spreadsheet macro that runs on every row, except each step is a full workflow.
 
-{/* VISUAL: side-by-side. Left: traditional enrichment (table → webhook → external service → manual write-back). Right: active table (one workflow column; data stays in place, the workflow runs per row in the grid). */}
+<Image
+  src="/static/tables/workflow-columns/table-groups.png"
+  alt="A table with three workflow groups — Company Domain, Company Info, and Lead Score Enrichment — filling their output columns per row, with runs in progress"
+  width={900}
+  height={467}
+/>
+
+Here, three workflow groups fill the table left to right: one finds each company's domain, the next reads company info from it, and a lead-scoring workflow turns that into `lead_score`, `priority`, and `score_reasoning` — per row, with 21 rows running at once.
 
 Here's an example. A table of companies has one column, `company`, that you type in. A workflow reads each company name and returns whether it's a qualified lead, the reason, and a confidence score. Those three values land in three new columns:
 
@@ -30,7 +38,12 @@ A **workflow group** is the unit you configure: one workflow, plus how its input
 
 You set a group up in the column configuration sidebar, where you pick the workflow, map its inputs and outputs to columns, and set what it runs after.
 
-{/* VISUAL: column configuration sidebar. Workflow picker, input mappings (column → input field), output picker grouped by block name, "Run after" deps, "Auto-run" toggle. */}
+<Image
+  src="/static/tables/workflow-columns/configure-workflow.png"
+  alt="The Configure workflow panel: a preview of the selected workflow, the workflow picker, output column selection, the Auto-run toggle, and Run after dependencies"
+  width={500}
+  height={792}
+/>
 
 ### Input columns
 
@@ -42,7 +55,12 @@ The workflow only sees the columns you mapped. The rest of the row is left untou
 
 **Output columns** are plain columns that receive the workflow's results. Each output column is linked to one block output inside the workflow, picked by name: `qualified` is linked to the agent's `qualified` value, `reason` to its `reason`, and so on. The workflow runs once; every output you picked is written to its column. Outputs you didn't pick are discarded.
 
-{/* VISUAL: before/after. A plain `company` column, then the same table with `qualified` (boolean), `reason` (text), `confidence` (number) populated per row. */}
+<Image
+  src="/static/tables/workflow-columns/column-mapping.png"
+  alt="A workflow group's mapping: the Company domain input bound to the domain column, and each workflow output bound to an output column name"
+  width={460}
+  height={604}
+/>
 
 ### Run after
 
@@ -90,7 +108,7 @@ Because a group can run after another group's output column, you can chain group
 
 The example extends naturally: an **Enrich** group fills `industry` and `headcount` from `company`. A **Qualify** group runs after `industry` and fills `qualified`. An **Outreach** group runs after `qualified` and drafts an email. Each row advances through the groups independently, becoming eligible for the next group the moment its own Run-after columns are filled.
 
-{/* VISUAL: cascade diagram. Three group headers left to right (Enrich → Qualify → Outreach), arrows showing each group's output columns feeding the next group's Run-after. */}
+The table at the top of this page is a cascade: **Company Domain** fills `domain` from the company name, **Company Info** runs after `domain`, and **Lead Score Enrichment** runs after the info columns — three groups, left to right.
 
 ## When to use a workflow column