feat(islands): add board.kanban with browser update actions (#46)

Add a full-bleed kanban island that groups rows by a column field and
persists card moves through a manifest update action. Extend /api/action
to support match+set updates (insert remains for form.entry). Dogfood on
the operations example Incident board.

Co-authored-by: Luka Isailovic <23192278+lukaisailovic@users.noreply.github.com>

Author: lukaisailovic

apps/docs/content/docs/data/actions.mdx

@@ -144,11 +144,11 @@ talk an agent into a bad write still can't get past validation or escape `rollba
 ## Surfacing an action to humans
 
 An action isn't agent-only. Drop a [`form.entry`](/islands/content-and-layout#formentry) island on a
-page and point it at an action, and the runtime renders a form — one typed input per field, the
-action's types, enums, ranges, and defaults carried straight through — with a submit button that
-inserts a row. It runs the very same write path `runActions` does: validate, snapshot, insert, then
-the bound dataset's islands refresh live. The form is the human-facing mirror of the agent call,
-authored by reusing the action rather than re-declaring its fields.
+page and point it at an **insert** action, and the runtime renders a form — one typed input per field,
+the action's types, enums, ranges, and defaults carried straight through — with a submit button that
+inserts a row. Point a [`board.kanban`](/islands/content-and-layout#boardkanban) at an **update**
+action and dragging a card POSTs `match` + `set` the same way. Both share the write path
+`runActions` uses: validate, snapshot, write, then the bound dataset's islands refresh live.
 
 See [MCP Server](/mcp) for Code Mode and the full `oi` API, and [Connectors](/data/connectors) for
 syncing a provider's data into `source` datasets on a schedule, through this same write path.

apps/docs/content/docs/islands/content-and-layout.mdx

@@ -188,6 +188,52 @@ runtime's file routes and fills the whole page, so it only means something insid
 is a full workspace bound to a `data/` tree with an editable CSV and the three virtual folders above.
 </Callout>
 
+## `board.kanban`
+
+**What it is.** A full-bleed kanban board that groups rows of a dataset into columns by a status or
+stage field. **When to use it:** work queues, incident triage, or any pipeline where cards move
+between columns. Pick it over [`table.grid`](/islands/tables-and-feeds#tablegrid) /
+[`status.grid`](/islands/metrics-and-gauges#statusgrid) when the main interaction is *moving* a row
+between stages, and over [`form.entry`](#formentry) when you're reassigning an existing row rather
+than inserting one.
+
+Cards show `titleField` plus optional `details` fields. Declared `columns` always render (even when
+empty); values present in the data but missing from `columns` still appear so nothing is hidden.
+Moving a card — HTML5 drag-and-drop or the per-card column select — POSTs `match` + `set` through
+the bound update [action](/data/actions) (match on `key`, set `column`), then the dataset refreshes
+live. Without `action`, or with `readOnly: true`, the board is view-only. Renders full-bleed like
+[`content.editor`](#contenteditor) (no ordinary island card chrome).
+
+```jsonc title="manifest.json"
+{
+  "type": "board.kanban",
+  "title": "Incidents",
+  "dataset": "incidents",
+  "key": "incident_id",
+  "column": "status",
+  "titleField": "title",
+  "columns": ["investigating", "monitoring", "resolved"],
+  "details": ["severity", "service"],
+  "action": "move_incident",
+  "span": 12
+}
+```
+
+**Key options.**
+
+- `dataset`, `key`, `column`, `titleField` — required. `key` is the row identity used in the update
+  match; `column` is the field that places a card; `titleField` is the card headline.
+- `columns` (optional): ordered column values to always show, including empty ones.
+- `details` (optional): extra dataset columns shown under each card title.
+- `action` (optional): a manifest action with `mode: "update"` on the same dataset. Omit (or set
+  `readOnly`) to disable moves.
+- `readOnly` (optional, default `false`): force a viewer.
+
+<Callout type="info" title="Note">
+There's no live preview for `board.kanban` here: moves write through the action path. See the
+operations example's Incidents board for a working setup.
+</Callout>
+
 ## `form.entry`
 
 **What it is.** A data-entry form card bound to a manifest [action](/data/actions). **When to use

apps/docs/content/docs/islands/overview.mdx

@@ -80,6 +80,7 @@ Each type links to its section with a live preview and full configuration.
 | [`content.editor`](/islands/content-and-layout#contenteditor) | (none) | A full-page workspace to browse and edit markdown files (`file` or `dir`); no data. |
 | [`layout.row`](/islands/content-and-layout#layoutrow) | `islands` | A full-width structural row holding other islands. |
 | [`form.entry`](/islands/content-and-layout#formentry) | `action` | A data-entry form bound to an action; one typed input per field inserts a row. No data binding of its own. |
+| [`board.kanban`](/islands/content-and-layout#boardkanban) | `dataset`, `key`, `column`, `titleField` | A full-bleed kanban board; drag/select moves persist via an update action. |
 
 One layout construct isn't in the table because it isn't an island: a page can split into tabbed
 [`groups`](/islands/content-and-layout#tabs-groups). Groups are page structure, not a tile, so

apps/docs/content/docs/reference/manifest.mdx

@@ -252,7 +252,7 @@ A `layout.row` is a structural wrapper: it holds other islands and forces them o
 their own full-width grid row. It carries no `span`, `title`, or data binding, and it
 cannot nest another `layout.row`.
 
-**Built-in islands:** [`metric.kpi`](#metrickpi) · [`metric.scorecard`](#metricscorecard) · [`timeseries.line`](#timeseriesline) · [`category.bar`](#categorybar) · [`category.combo`](#categorycombo) · [`waterfall.bars`](#waterfallbars) · [`divergence.bars`](#divergencebars) · [`breakdown.treemap`](#breakdowntreemap) · [`distribution.heatmap`](#distributionheatmap) · [`activity.calendar`](#activitycalendar) · [`funnel.steps`](#funnelsteps) · [`rank.list`](#ranklist) · [`compare.radar`](#compareradar) · [`map.choropleth`](#mapchoropleth) · [`correlation.scatter`](#correlationscatter) · [`category.pie`](#categorypie) · [`table.grid`](#tablegrid) · [`timeline.feed`](#timelinefeed) · [`gauge.rings`](#gaugerings) · [`gauge.goal`](#gaugegoal) · [`gauge.meter`](#gaugemeter) · [`status.grid`](#statusgrid) · [`search.box`](#searchbox) · [`note.card`](#notecard) · [`source.doc`](#sourcedoc) · [`content.editor`](#contenteditor) · [`form.entry`](#formentry)
+**Built-in islands:** [`metric.kpi`](#metrickpi) · [`metric.scorecard`](#metricscorecard) · [`timeseries.line`](#timeseriesline) · [`category.bar`](#categorybar) · [`category.combo`](#categorycombo) · [`waterfall.bars`](#waterfallbars) · [`divergence.bars`](#divergencebars) · [`breakdown.treemap`](#breakdowntreemap) · [`distribution.heatmap`](#distributionheatmap) · [`activity.calendar`](#activitycalendar) · [`funnel.steps`](#funnelsteps) · [`rank.list`](#ranklist) · [`compare.radar`](#compareradar) · [`map.choropleth`](#mapchoropleth) · [`correlation.scatter`](#correlationscatter) · [`category.pie`](#categorypie) · [`table.grid`](#tablegrid) · [`timeline.feed`](#timelinefeed) · [`gauge.rings`](#gaugerings) · [`gauge.goal`](#gaugegoal) · [`gauge.meter`](#gaugemeter) · [`status.grid`](#statusgrid) · [`search.box`](#searchbox) · [`note.card`](#notecard) · [`source.doc`](#sourcedoc) · [`content.editor`](#contenteditor) · [`form.entry`](#formentry) · [`board.kanban`](#boardkanban)
 
 ### `metric.kpi`
 
@@ -730,6 +730,26 @@ A data-entry form card bound to a manifest `action` — renders one typed input
 | `fields` | `array of string` | no | the action's columns to render as inputs, in this order; omit to show every insertable column. Each must be a column of the action's dataset |
 | `submitLabel` | `string` | no | text on the submit button; defaults to "Add" |
 
+### `board.kanban`
+
+A full-bleed kanban board grouping rows into columns by a status/stage field — use for work queues, incidents, or pipeline stages. Pick this over `table.grid` / `status.grid` when cards should move between columns, and over `form.entry` when the interaction is reassigning an existing row rather than inserting one. Moving a card POSTs match+set through the bound update action; without `action` or with `readOnly`, the board is view-only.
+
+**Span:** min 6, recommended 12, max 12 (of 12). Omit `span` to render at the recommended width; below min or above max is a named error.
+
+| Field | Type | Required | Description |
+| --- | --- | --- | --- |
+| `id` | `string` | no |  |
+| `title` | `string` | no |  |
+| `span` | `number` | no |  |
+| `dataset` | `string` | yes |  |
+| `key` | `string` | yes | field uniquely identifying each card — used as the match key when moving a card via the bound update action |
+| `column` | `string` | yes | field whose value places each row into a board column (e.g. status, stage) |
+| `titleField` | `string` | yes | field shown as the card title |
+| `columns` | `array of string` | no | ordered column values to always show (including empty ones); omit to derive columns from distinct values in the data, in first-seen order. Values present in the data but missing here still appear after the listed ones so nothing is hidden |
+| `details` | `array of string` | no | optional extra fields shown on each card under the title; each must be a column of the dataset |
+| `action` | `string` | no | name of a manifest `actions` entry with mode `update` that persists a column move (match on `key`, set `column`); omit or set `readOnly` to disable moves |
+| `readOnly` | `boolean` | no | disable drag/keyboard moves — a viewer only; default false when `action` is set |
+
 ## Custom islands
 
 When no built-in fits, register a renderer in the user's project under

apps/examples/apps/operations/data/incidents.csv

@@ -2,8 +2,8 @@ incident_id,ts,service,title,severity,status,detected_by,duration_min,summary
 INC-1042,2026-05-26 03:12,payments,Elevated decline rate on card charges,Sev-2,resolved,alert,142,Upstream processor timeouts spiked declines
 INC-1043,2026-05-29 18:40,gateway,Edge latency regression after rollout,Sev-2,resolved,canary,76,Bad cache config shipped in gw build
 INC-1044,2026-06-02 11:55,search,Stale results after index rebuild,Sev-3,resolved,customer,58,Index swap left replicas serving old shards
-INC-1045,2026-06-04 12:30,payments,Failed deploy left charges queued,Sev-1,resolved,oncall,63,Migration lock blocked the charge worker
+INC-1045,2026-06-04 12:30,payments,Failed deploy left charges queued,Sev-1,investigating,oncall,63,Migration lock blocked the charge worker
 INC-1046,2026-06-08 09:25,gateway,Connection pool exhaustion at peak,Sev-1,resolved,alert,118,Rollout halved pool size under load
-INC-1047,2026-06-10 21:05,notifications,Push delivery backlog,Sev-3,resolved,alert,34,Provider rate limit throttled the sender
-INC-1048,2026-06-11 15:22,search,Query errors after schema change,Sev-2,resolved,canary,41,Renamed field broke the ranking query
+INC-1047,2026-06-10 21:05,notifications,Push delivery backlog,Sev-3,investigating,alert,34,Provider rate limit throttled the sender
+INC-1048,2026-06-11 15:22,search,Query errors after schema change,Sev-2,monitoring,canary,41,Renamed field broke the ranking query
 INC-1049,2026-06-12 14:48,gateway,Intermittent 5xx on auth callbacks,Sev-2,monitoring,oncall,95,Retries masking a slow downstream auth path

apps/examples/apps/operations/manifest.json

@@ -26,6 +26,13 @@
         "detected_by": { "enum": ["alert", "customer", "oncall", "canary"] }
       }
     },
+    "move_incident": {
+      "dataset": "incidents", "mode": "update",
+      "description": "Move an incident between board columns (status)",
+      "fields": {
+        "status": { "enum": ["investigating", "monitoring", "resolved"] }
+      }
+    },
     "log_incident_update": {
       "dataset": "incident_updates", "mode": "insert",
       "description": "Append a status update to an incident; incident_id must match an existing incidents row",
@@ -146,6 +153,25 @@
           "details": [ { "field": "deploy_id", "label": "Deploy" } ] }
       ]
     },
+    {
+      "id": "incidents-board",
+      "title": "Incident board",
+      "icon": "list-bullets",
+      "islands": [
+        {
+          "type": "board.kanban",
+          "title": "Incidents",
+          "dataset": "incidents",
+          "key": "incident_id",
+          "column": "status",
+          "titleField": "title",
+          "columns": ["investigating", "monitoring", "resolved"],
+          "details": ["severity", "service"],
+          "action": "move_incident",
+          "span": 12
+        }
+      ]
+    },
     {
       "id": "oncall",
       "title": "On-call & docs",

docs/data-app-model.md

@@ -135,6 +135,7 @@ or read `packages/schema/src/index.ts`.
 | `content.editor` | — | a full-page, data-free content workspace — browse and edit a tree of markdown files (and view CSVs) Obsidian-style; exactly one of `file` (one doc under `data/` or `docs/`) or `dir` (a directory, recursed) — both or neither is a named error; with `dir`: `include?` globs (default markdown), `csv: true` also surfaces `.csv` files as an editable table (cells + row add/delete; read-only under `readOnly`), `groups: [{id, label?, icon?, match}]` are virtual folders (globs relative to `dir`; unmatched files fall into Ungrouped); `readOnly?` makes it a viewer; edits save to the file, each save records a restorable version under `.openislands/editor.sqlite`; renders full-bleed and binds no dataset |
 | `layout.row` | `islands` | a full-width structural row holding other islands — children render on their own 12-column grid row; no `span`/`title`, no nesting, no data binding |
 | `form.entry` | `action` | a data-entry form bound to a manifest action; one typed input per field + a submit button that inserts a row (types/enums/defaults come from the action); optional `fields` subset/order and `submitLabel`; binds no dataset |
+| `board.kanban` | `dataset`, `key`, `column`, `titleField` | a full-bleed kanban board grouping rows by `column`; cards show `titleField` (+ optional `details`); `columns?` ordered values (empty columns still render); `action?` an update action (match on `key`, set `column`) so drag/select moves persist; `readOnly?` or no action disables moves |
 
 ### `content.editor` (the content workspace)
 

packages/cli/src/scaffold.ts

@@ -52,6 +52,14 @@ export function islandSkeleton(type: string): Record<string, unknown> {
     "source.doc": { type, title: "Source", kind: "link", href: "https://" },
     "content.editor": { type, title: "Content", dir: "data/docs" },
     "form.entry": { type, title: "New form", action: "TODO" },
+    "board.kanban": {
+      type,
+      title: "Board",
+      dataset: "TODO",
+      key: "TODO",
+      column: "TODO",
+      titleField: "TODO",
+    },
   };
   return base[type] ?? { type, title: "New island" };
 }

packages/compiler/src/index.ts

@@ -974,6 +974,14 @@ export function islandRequirements(island: Record<string, unknown>): { dataset:
       }
       break;
     }
+    case "board.kanban": {
+      add(island.key);
+      add(island.column);
+      add(island.titleField);
+      const details = island.details;
+      if (Array.isArray(details)) details.forEach(add);
+      break;
+    }
     case "status.grid":
       add(island.label);
       add(island.state);
@@ -1111,6 +1119,19 @@ export async function checkManifestContracts(
         continue;
       }
 
+      if (type === "board.kanban" && typeof config.action === "string" && config.action) {
+        const actionName = config.action;
+        const action = manifest.actions?.[actionName];
+        if (!action) {
+          errors.push({ kind: "island", page: page.id, index, type, field: "action", message: `unknown action '${actionName}' — declare it in manifest.actions` });
+        } else if (action.mode !== "update") {
+          errors.push({ kind: "island", page: page.id, index, type, field: "action", message: `action '${actionName}' must use mode 'update' (got '${action.mode}') so card moves can patch the column field` });
+        } else if (action.dataset !== config.dataset) {
+          errors.push({ kind: "island", page: page.id, index, type, field: "action", message: `action '${actionName}' targets dataset '${action.dataset}' but the board binds '${config.dataset as string}'` });
+        }
+        // fall through to binding checks on dataset columns
+      }
+
       const req = islandRequirements(config);
       if (!req.dataset) {
         checks.push({ page: page.id, index, type, ok: true, missingFields: [] });

packages/compiler/test/index.test.ts

@@ -53,6 +53,18 @@ describe("islandRequirements", () => {
   it("binds content.editor to no dataset and no fields", () => {
     expect(islandRequirements({ type: "content.editor", dir: "data/x" })).toEqual({ dataset: null, fields: [] });
   });
+  it("extracts board.kanban key, column, titleField, and details", () => {
+    const r = islandRequirements({
+      type: "board.kanban",
+      dataset: "tasks",
+      key: "id",
+      column: "status",
+      titleField: "title",
+      details: ["owner", "priority"],
+    });
+    expect(r.dataset).toBe("tasks");
+    expect(r.fields.toSorted()).toEqual(["id", "owner", "priority", "status", "title"]);
+  });
   it("extracts detail fields for table.grid and timeline.feed", () => {
     const table = islandRequirements({
       type: "table.grid",
@@ -274,6 +286,54 @@ describe("compile (form.entry contract check)", () => {
   });
 });
 
+const boardManifest = (island: Record<string, unknown>, actions: Record<string, unknown> = {}) => ({
+  version: 1,
+  title: "T",
+  datasets: { tasks: { source: "data/tasks.csv" } },
+  pages: [{ id: "p", islands: [{ type: "board.kanban", ...island }] }],
+  actions,
+});
+const TASKS = "id,title,status,owner\na,Alpha,todo,Ada\n";
+
+describe("compile (board.kanban contract check)", () => {
+  it("passes with bound columns and an update action on the same dataset", async () => {
+    const dir = project(
+      boardManifest(
+        { dataset: "tasks", key: "id", column: "status", titleField: "title", action: "move_task" },
+        { move_task: { dataset: "tasks", mode: "update" } },
+      ),
+      { "data/tasks.csv": TASKS },
+    );
+    const report = await compile(dir);
+    expect(report.ok, report.errors.join(" ")).toBe(true);
+  });
+
+  it("fails when a binding field is missing from the dataset", async () => {
+    const dir = project(
+      boardManifest({ dataset: "tasks", key: "id", column: "stage", titleField: "title" }),
+      { "data/tasks.csv": TASKS },
+    );
+    const report = await compile(dir);
+    expect(report.ok).toBe(false);
+    expect(report.errors.join(" ")).toContain("stage");
+    expect(report.errors.join(" ")).toContain("board.kanban");
+  });
+
+  it("fails when the action is not mode update", async () => {
+    const dir = project(
+      boardManifest(
+        { dataset: "tasks", key: "id", column: "status", titleField: "title", action: "log_task" },
+        { log_task: { dataset: "tasks", mode: "insert" } },
+      ),
+      { "data/tasks.csv": TASKS },
+    );
+    const report = await compile(dir);
+    expect(report.ok).toBe(false);
+    expect(report.errors.join(" ")).toContain("mode 'update'");
+  });
+});
+
+
 describe("compile (grouped page)", () => {
   const groupedManifest = {
     version: 1,