@graph8/sdk 0.373.0 → 0.374.0

package/blocks/workbench/components/workbench-crm-import.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+/**
+ * WorkbenchCrmImport: pull contacts or companies from a connected CRM into this workbench. Lists only CRMs that are connected,
+ * asks how many records at most (the API allows 1 to 10,000), and confirms before reading the CRM. Connecting a CRM happens in
+ * the platform app (OAuth), so with none connected the panel links there.
+ *
+ * SDK operations, in order:
+ *   1. listCrmSyncs             GET  /crm-syncs   (read, via useConnectedCrms; the CRMs and whether each has a connection id)
+ *   2. importWorkbenchFromCrm   POST /workbench/tables/{table_id}/import/crm { provider_type, connection_id, entity_type, limit }
+ *        (external tier: it READS the organisation's own CRM. Nobody is contacted and no credit is charged by the import itself;
+ *        ConfirmSpendDialog says so. If the workbench auto-enriches, every imported record then spends.)
+ */
+
+import { useState } from "react";
+import { DatabaseZap } from "lucide-react";
+import { Button, Input, Label, Skeleton } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { EmptyState } from "@/g8/components/empty-state";
+import { SectionCard } from "@/g8/components/screen/section-card";
+import { useBrand, brandUrl } from "@/g8/hooks/use-brand";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { g8Post } from "@/g8/lib/g8-client";
+import { crmLabel, useConnectedCrms } from "../hooks/use-connected-crms";
+
+export interface WorkbenchCrmImportProps {
+  tableId: string;
+  /** Are the rows people or companies? Sets the CRM object that is read. Default people. */
+  entityType?: "contact" | "company";
+  autoEnrich?: boolean | null;
+  onImported?: () => void;
+  className?: string;
+}
+
+interface Result { imported?: number; duplicates?: number; columns_created?: number }
+
+const MIN_LIMIT = 1;
+const MAX_LIMIT = 10000;
+const DEFAULT_LIMIT = 100;
+const INTEGRATIONS_PATH = "/studio/settings?tab=integrations";
+const label = crmLabel;
+const clamp = (n: number) => (Number.isFinite(n) ? Math.min(MAX_LIMIT, Math.max(MIN_LIMIT, Math.round(n))) : DEFAULT_LIMIT);
+
+export function WorkbenchCrmImport({ tableId, entityType = "contact", autoEnrich, onImported, className }: WorkbenchCrmImportProps) {
+  const brand = useBrand();
+  const syncs = useConnectedCrms();
+  const [provider, setProvider] = useState("");
+  const [limit, setLimit] = useState(DEFAULT_LIMIT);
+  const [confirming, setConfirming] = useState(false);
+  const [result, setResult] = useState<Result | null>(null);
+
+  const connected = syncs.connected ?? [];
+  const chosen = connected.find((s) => s.provider === provider);
+  const noun = entityType === "company" ? "companies" : "contacts";
+  const run = useG8Mutation(async (c: { provider: string; connection_id: string }) =>
+    (await g8Post<Result>(`/workbench/tables/${tableId}/import/crm`, { provider_type: c.provider, connection_id: c.connection_id, entity_type: entityType, limit: clamp(limit) })).data, {
+    onSuccess: (r) => { setConfirming(false); setResult(r); onImported?.(); },
+    onError: () => setConfirming(false),
+  });
+  const n = (v?: number) => (v ?? 0).toLocaleString();
+
+  return (
+    <SectionCard className={className} title="Import from a CRM" icon={<DatabaseZap aria-hidden />} description={`Pull ${noun} from a connected CRM into this workbench.`}>
+      {syncs.error ? <ApiError error={syncs.error} title="Could not load your CRMs" onRetry={() => void syncs.refetch()} /> : null}
+      {syncs.loading && !syncs.connected ? <Skeleton className="h-9 w-full" aria-label="Loading CRMs" /> : null}
+      {syncs.connected && connected.length === 0 ? (
+        <EmptyState compact icon={<DatabaseZap strokeWidth={1.5} />} title="No CRM connected" description="Connect a CRM in the platform app, then come back to import its records."
+          action={<Button asChild size="sm" variant="outline"><a href={brandUrl(brand, INTEGRATIONS_PATH)} target="_blank" rel="noreferrer">Connect a CRM</a></Button>} />
+      ) : null}
+      {connected.length > 0 ? (
+        <div className="flex flex-col gap-3">
+          <div className="grid gap-3 sm:grid-cols-2">
+            <div className="flex flex-col gap-1"><Label htmlFor={`wb-crm-${tableId}`}>CRM</Label>
+              <select id={`wb-crm-${tableId}`} className="h-9 w-full rounded-md border border-border bg-background px-2 text-sm" value={provider} onChange={(e) => { setProvider(e.target.value); setResult(null); }}>
+                <option value="">Choose a CRM</option>{connected.map((s) => <option key={s.provider} value={s.provider}>{label(s.provider)}</option>)}</select></div>
+            <div className="flex flex-col gap-1"><Label htmlFor={`wb-crm-n-${tableId}`}>Most records to pull</Label>
+              <Input id={`wb-crm-n-${tableId}`} type="number" min={MIN_LIMIT} max={MAX_LIMIT} value={limit} onChange={(e) => setLimit(clamp(Number(e.target.value)))} /></div>
+          </div>
+          {autoEnrich ? <p role="status" className="text-sm text-text-color-muted">Auto-enrich is on for this workbench, so every imported record will be enriched and charged.</p> : null}
+          {run.error ? <ApiError error={run.error} title="Could not import from the CRM" /> : null}
+          {result ? <p role="status" className="text-sm text-text-color-muted">Imported {n(result.imported)} records, {n(result.duplicates)} duplicates skipped, {n(result.columns_created)} new columns.</p> : null}
+          <div><Button size="sm" disabled={!chosen} loading={run.loading} onClick={() => setConfirming(true)}>{chosen ? `Import from ${label(chosen.provider)}` : "Import from a CRM"}</Button></div>
+        </div>
+      ) : null}
+      <ConfirmSpendDialog open={confirming && chosen != null} tier="external" title={`Pull records from ${chosen ? label(chosen.provider) : "the CRM"}`}
+        description={`Reads up to ${clamp(limit).toLocaleString()} ${noun} from your CRM into this workbench. Nobody is contacted and the import itself charges no credits.${autoEnrich ? " Auto-enrich is on, so those records are then enriched and charged." : ""}`}
+        confirmLabel="Pull records" confirming={run.loading} onConfirm={() => chosen && void run.mutate(chosen)} onCancel={() => setConfirming(false)} />
+    </SectionCard>
+  );
+}

package/blocks/workbench/components/workbench-datafile-import.tsx

@@ -0,0 +1,154 @@
+"use client";
+
+/**
+ * WorkbenchDatafileImport: import the rows of a file that is ALREADY uploaded, optionally with an AI-suggested mapping from the
+ * file's headers to this workbench's columns. The API takes a datafile id (the upload itself is not part of the developer API),
+ * so the person pastes the id and, for a mapping, the file's header names.
+ *
+ * SDK operations, in order:
+ *   1. suggestWorkbenchMappings       POST /workbench/tables/{table_id}/suggest-mappings { source_columns, target_fields }
+ *        (billable tier: ONE AI call, no published price, so ConfirmSpendDialog states that and shows no number; nothing is mapped or imported by it)
+ *   2. getWorkbenchMappingSuggestion  GET  /workbench/tables/{table_id}/suggest-mappings/{job_id}   (read; polled until completed or failed, an unknown status keeps polling)
+ *   3. importWorkbenchDatafile        POST /workbench/tables/{table_id}/import/datafile { datafile_id, skip_duplicates, column_mapping? }   (write, free)
+ *
+ * Only mappings the person kept are sent (an unmapped header is left out of `column_mapping`). If the workbench auto-enriches, the
+ * imported rows will spend: the import then goes through a billable ConfirmSpendDialog (no number: no price is published for rows
+ * that have not arrived), and without auto-enrich it does not need one. Changing the headers drops a mapping job in flight.
+ */
+
+import { useEffect, useState } from "react";
+import { FileUp, Sparkles } from "lucide-react";
+import { Button, Input, Label, Switch } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { SectionCard } from "@/g8/components/screen/section-card";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { g8Get, g8Post } from "@/g8/lib/g8-client";
+import { mappingDone } from "../lib/automation-types";
+import type { MappingSuggestion } from "../lib/automation-types";
+import type { WorkbenchColumn } from "../lib/workbench-types";
+
+export interface WorkbenchDatafileImportProps {
+  tableId: string;
+  columns?: WorkbenchColumn[];
+  /** The table's auto-enrich flag: imported rows then spend, and the panel warns. */
+  autoEnrich?: boolean | null;
+  /** Called after rows were imported so the grid can reload. */
+  onImported?: () => void;
+  /** Milliseconds between checks of a mapping job. Default 1500. */
+  pollMs?: number;
+  className?: string;
+}
+
+interface MapRow { source: string; target: string; confidence?: number }
+interface ImportResult { inserted?: number; duplicates?: number; columns_created?: number }
+
+const MAX_HEADERS = 100;
+const MAX_POLLS = 40;
+const plural = (n: number, one: string, many: string) => `${n.toLocaleString()} ${n === 1 ? one : many}`;
+
+/** Unique, trimmed, non-empty header names, in the order typed. */
+export function parseHeaders(text: string): string[] {
+  return [...new Set(text.split(",").map((h) => h.trim()).filter((h) => h.length > 0 && h.length <= 255))].slice(0, MAX_HEADERS);
+}
+
+export function WorkbenchDatafileImport({ tableId, columns = [], autoEnrich, onImported, pollMs = 1500, className }: WorkbenchDatafileImportProps) {
+  const [datafileId, setDatafileId] = useState("");
+  const [headers, setHeaders] = useState("");
+  const [skipDup, setSkipDup] = useState(true);
+  const [mapping, setMapping] = useState<MapRow[] | null>(null);
+  const [asking, setAsking] = useState(false);
+  const [confirmImport, setConfirmImport] = useState(false);
+  const [job, setJob] = useState<string | null>(null);
+  const [mapError, setMapError] = useState<string | null>(null);
+  const [result, setResult] = useState<ImportResult | null>(null);
+
+  const targets = columns.map((c) => c.name);
+  const sources = parseHeaders(headers);
+  const base = `/workbench/tables/${tableId}/suggest-mappings`;
+
+  const apply = (s: MappingSuggestion) => {
+    setJob(null);
+    if (s.status === "failed") { setMapError(s.message || "The mapping job failed. Map the columns by hand or try again."); return; }
+    const byName = new Map((s.mappings ?? []).map((m) => [m.source ?? "", m]));
+    setMapping(sources.map((source) => {
+      const m = byName.get(source);
+      return { source, target: m?.target && targets.includes(m.target) ? m.target : "", confidence: m?.confidence };
+    }));
+  };
+  const suggest = useG8Mutation(async () => (await g8Post<MappingSuggestion>(base, { source_columns: sources, target_fields: targets })).data, {
+    onSuccess: (s) => { setAsking(false); if (mappingDone(s.status)) apply(s); else if (s.job_id) setJob(s.job_id); else setMapError("No mapping job was started. Try again."); },
+    onError: () => setAsking(false),
+  });
+  const run = useG8Mutation(async () => {
+    const column_mapping = Object.fromEntries((mapping ?? []).filter((m) => m.target).map((m) => [m.source, m.target]));
+    return (await g8Post<ImportResult>(`/workbench/tables/${tableId}/import/datafile`, { datafile_id: datafileId.trim(), skip_duplicates: skipDup, ...(Object.keys(column_mapping).length ? { column_mapping } : {}) })).data;
+  }, { onSuccess: (r) => { setConfirmImport(false); setResult(r); onImported?.(); }, onError: () => setConfirmImport(false) });
+
+  // Follow the mapping job: check at once, then every pollMs, until it is completed or failed (anything else keeps going).
+  useEffect(() => {
+    if (!job) return;
+    let stop = false;
+    let tries = 0;
+    let timer: ReturnType<typeof setTimeout> | undefined;
+    const tick = async () => {
+      try {
+        const s = (await g8Get<MappingSuggestion>(`${base}/${encodeURIComponent(job)}`)).data;
+        if (stop) return;
+        if (mappingDone(s.status)) { apply(s); return; }
+      } catch { if (!stop) { setJob(null); setMapError("Could not check the mapping job. Try again."); } return; }
+      if (++tries >= MAX_POLLS) { if (!stop) { setJob(null); setMapError("The mapping is taking too long. Try again in a moment."); } return; }
+      timer = setTimeout(() => void tick(), pollMs);
+    };
+    void tick();
+    return () => { stop = true; if (timer) clearTimeout(timer); };
+  }, [job]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const waiting = suggest.loading || job != null;
+  return (
+    <SectionCard className={className} title="Import a file" icon={<FileUp aria-hidden />}
+      description="Bring in the rows of a file that is already uploaded. Free, and rows land unlocked.">
+      <div className="flex flex-col gap-3">
+        <div className="flex flex-col gap-1"><Label htmlFor={`wb-df-${tableId}`}>Datafile id</Label>
+          <Input id={`wb-df-${tableId}`} placeholder="The id of the uploaded file" value={datafileId} onChange={(e) => { setDatafileId(e.target.value); setResult(null); }} />
+          <p className="text-xs text-text-color-muted">The developer API imports a file that is already uploaded. Upload it in the platform app first, then paste its id here.</p></div>
+        <div className="flex flex-col gap-1"><Label htmlFor={`wb-hd-${tableId}`}>File headers</Label>
+          <Input id={`wb-hd-${tableId}`} placeholder="Name, Email, Company (optional, for a suggested mapping)" value={headers} onChange={(e) => { setHeaders(e.target.value); setMapping(null); setMapError(null); setJob(null); }} /></div>
+        <div className="flex flex-wrap items-center gap-2">
+          <Button size="sm" variant="outline" disabled={sources.length === 0 || targets.length === 0 || waiting} loading={waiting} onClick={() => { setMapError(null); setAsking(true); }}>
+            <Sparkles className="mr-1 size-4" aria-hidden />Suggest column mapping</Button>
+          {sources.length > 0 && targets.length === 0 ? <span className="text-xs text-text-color-muted">Add a column to this workbench first.</span> : null}
+        </div>
+        {mapError ? <p role="alert" className="text-sm text-destructive">{mapError}</p> : null}
+        {suggest.error ? <ApiError error={suggest.error} title="Could not ask for a mapping" /> : null}
+        {mapping ? (
+          <ul className="flex flex-col gap-2" aria-label="Suggested mapping">
+            {mapping.map((m, i) => (
+              <li key={m.source} className="flex flex-wrap items-center gap-2">
+                <span className="w-40 truncate text-sm">{m.source}</span>
+                <select aria-label={`Map ${m.source} to`} className="h-9 min-w-40 flex-1 rounded-md border border-border bg-background px-2 text-sm" value={m.target}
+                  onChange={(e) => setMapping(mapping.map((x, j) => (j === i ? { ...x, target: e.target.value, confidence: undefined } : x)))}>
+                  <option value="">Do not import</option>{columns.map((c) => <option key={c.id} value={c.name}>{c.display_name || c.name}</option>)}</select>
+                {m.target && m.confidence ? <StatusPill tone={m.confidence >= 0.8 ? "positive" : "warning"}>{Math.round(m.confidence * 100)}% sure</StatusPill> : null}
+              </li>
+            ))}
+          </ul>
+        ) : null}
+        {autoEnrich ? <p role="status" className="text-sm text-text-color-muted">Auto-enrich is on for this workbench, so every imported row will be enriched and charged.</p> : null}
+        {run.error ? <ApiError error={run.error} title="Could not import the file" /> : null}
+        {result ? <p role="status" className="text-sm text-text-color-muted">Imported {plural(result.inserted ?? 0, "row", "rows")}, {plural(result.duplicates ?? 0, "duplicate", "duplicates")} skipped, {plural(result.columns_created ?? 0, "new column", "new columns")}.</p> : null}
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          <div className="flex items-center gap-2"><Switch id={`wb-skip-${tableId}`} aria-label="Skip rows already in the workbench" checked={skipDup} onCheckedChange={setSkipDup} /><Label htmlFor={`wb-skip-${tableId}`}>Skip rows already in the workbench</Label></div>
+          <Button size="sm" loading={run.loading} disabled={!datafileId.trim()} onClick={() => { if (autoEnrich) setConfirmImport(true); else void run.mutate(undefined); }}>Import file</Button>
+        </div>
+      </div>
+      <ConfirmSpendDialog open={confirmImport} tier="billable" title="Import into an auto-enriching workbench"
+        description="Auto-enrich is on, so every imported row is then enriched and charged, with nobody in the loop. No total is published for rows that have not arrived yet, so none is shown. The import itself is free."
+        confirmLabel="Import and enrich" confirming={run.loading} onConfirm={() => void run.mutate(undefined)} onCancel={() => setConfirmImport(false)} />
+      <ConfirmSpendDialog open={asking} tier="billable" title="Suggest a column mapping"
+        description="This makes one AI call to match your file headers to this workbench's columns. No price is published for it, so none is shown. Nothing is mapped or imported until you press Import."
+        confirmLabel="Suggest mapping" confirming={suggest.loading} onConfirm={() => void suggest.mutate(undefined)} onCancel={() => setAsking(false)} />
+    </SectionCard>
+  );
+}

package/blocks/workbench/components/workbench-grid.tsx

@@ -14,19 +14,24 @@
  *   (the panels it opens call: addWorkbenchRow, pasteImportWorkbenchRows, addWorkbenchColumn, saveWorkbenchColumnAiConfig,
  *    saveWorkbenchWaterfall, createWorkbenchFormulaColumns, mapWorkbenchColumn, quote*Run + run* (billable, confirmed),
  *    getWorkbenchHistory, getWorkbenchAnalytics, quoteWorkbenchUnlock, unlockWorkbenchRows (billable, confirmed),
- *    exportWorkbenchTable, bulkDeleteWorkbenchRows (destructive, confirmed))
+ *    exportWorkbenchTable, bulkDeleteWorkbenchRows (destructive, confirmed), sendWorkbenchRowsToSequence (external, confirmed))
+ *   5. queryWorkbenchRows     POST  /workbench/tables/{table_id}/rows/query { start_row, end_row, filter_model, sort_model }  (read, free)
+ *        Used instead of (3) only while a filter or sort is set: a text "contains" filter on one column and/or a sort by one column.
+ *   6. deleteWorkbenchColumn  DELETE /workbench/tables/{table_id}/columns/{column_id}   (destructive, ConfirmSpendDialog; removes the column's values from every row)
  *
  * A locked row (credit_charged false) shows masked cells and cannot be edited: unlock it first (1 credit per row).
  * Cells show `extracted_data` (what a recipe wrote) before `raw_data` (what was imported).
  */
 
 import { useEffect, useState } from "react";
+import { Trash2 } from "lucide-react";
 import { Button, Input, Skeleton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@graph8/sdk/ui";
 import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
 import { EmptyState } from "@/g8/components/empty-state";
 import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
 import { useG8Query } from "@/g8/hooks/use-g8-query";
-import { g8Get, g8Patch } from "@/g8/lib/g8-client";
+import { g8Delete, g8Get, g8Patch, g8Post } from "@/g8/lib/g8-client";
 import { useWorkbenchTable } from "../hooks/use-workbench-table";
 import { cellValue, formatCell, isLocked, isMasked, pageItems, pageTotal } from "../lib/workbench-types";
 import type { RunTarget, WorkbenchColumn, WorkbenchRow } from "../lib/workbench-types";
@@ -43,18 +48,29 @@ export interface WorkbenchGridProps {
   onOpenRow?: (row: WorkbenchRow) => void;
   /** Highlights the open row. */
   activeRowId?: number | null;
+  /** Called whenever the grid reloaded its rows after an action (edit, add, run, unlock, delete), so a header count can refresh. */
+  onChanged?: () => void;
   className?: string;
 }
 
 type Panel = "rows" | "columns" | "selection" | null;
 
+const selectClass = "h-9 rounded-md border border-border bg-background px-2 text-sm";
+
+/** The value after it stopped changing for `ms`, so typing a filter does not fire a request per keystroke. */
+function useDebounced<T>(value: T, ms = 300): T {
+  const [v, setV] = useState(value);
+  useEffect(() => { const t = setTimeout(() => setV(value), ms); return () => clearTimeout(t); }, [value, ms]);
+  return v;
+}
+
 function runTarget(column: WorkbenchColumn): RunTarget | null {
   if (column.enrichment_type === "waterfall") return { kind: "waterfall", columnId: column.id };
   if (column.enrichment_type === "ai") return { kind: "ai-column", columnId: column.id };
   return null;
 }
 
-export function WorkbenchGrid({ tableId, pageSize = 100, onOpenRow, activeRowId, className }: WorkbenchGridProps) {
+export function WorkbenchGrid({ tableId, pageSize = 100, onOpenRow, activeRowId, onChanged, className }: WorkbenchGridProps) {
   const [end, setEnd] = useState(pageSize);
   const [panel, setPanel] = useState<Panel>(null);
   const [selected, setSelected] = useState<number[]>([]);
@@ -62,7 +78,32 @@ export function WorkbenchGrid({ tableId, pageSize = 100, onOpenRow, activeRowId,
   const [running, setRunning] = useState<WorkbenchColumn | null>(null);
   const { table, columns, loading: metaLoading, error: metaError, refetch: refetchMeta } = useWorkbenchTable(tableId);
 
-  const rows = useG8Query(async (signal) => (await g8Get(`/workbench/tables/${tableId}/rows`, { start_row: 0, end_row: end }, { signal })).data, [tableId, end]);
+  // A filter or sort goes through the query endpoint (same row shape); with neither set the plain read is used, exactly as before.
+  const [filterCol, setFilterCol] = useState("");
+  const [filterText, setFilterText] = useState("");
+  const [sortCol, setSortCol] = useState("");
+  const [sortDir, setSortDir] = useState<"asc" | "desc">("asc");
+  const [deletingColumn, setDeletingColumn] = useState<WorkbenchColumn | null>(null);
+  const term = useDebounced(filterText.trim());
+  const filtering = filterCol !== "" && term !== "";
+  const sorting = sortCol !== "";
+  const rows = useG8Query(async (signal) => {
+    if (!filtering && !sorting) return (await g8Get(`/workbench/tables/${tableId}/rows`, { start_row: 0, end_row: end }, { signal })).data;
+    return (await g8Post(`/workbench/tables/${tableId}/rows/query`, {
+      start_row: 0, end_row: end,
+      ...(filtering ? { filter_model: { [filterCol]: { filterType: "text", type: "contains", filter: term } } } : {}),
+      ...(sorting ? { sort_model: [{ colId: sortCol, sort: sortDir }] } : {}),
+    }, { signal })).data;
+  }, [tableId, end, filtering ? filterCol : "", filtering ? term : "", sortCol, sortDir]);
+  const removeColumn = useG8Mutation((c: WorkbenchColumn) => g8Delete(`/workbench/tables/${tableId}/columns/${c.id}`), {
+    onSuccess: (_r, c) => {
+      setDeletingColumn(null);
+      if (filterCol === c.name) { setFilterCol(""); setFilterText(""); }
+      if (sortCol === c.name) setSortCol("");
+      reload();
+    },
+    onError: () => setDeletingColumn(null),
+  });
   const items = pageItems<WorkbenchRow>(rows.data);
   const total = pageTotal(rows.data, items.length);
   const save = useG8Mutation(
@@ -71,16 +112,17 @@ export function WorkbenchGrid({ tableId, pageSize = 100, onOpenRow, activeRowId,
   );
   // Selection and open panels belong to one table and one set of rows: drop them when the table changes,
   // and prune the selection to rows that still exist after any reload (delete, import, run).
-  useEffect(() => { setSelected([]); setEditing(null); setRunning(null); setEnd(pageSize); }, [tableId, pageSize]);
+  useEffect(() => { setSelected([]); setEditing(null); setRunning(null); setEnd(pageSize); setFilterCol(""); setFilterText(""); setSortCol(""); }, [tableId, pageSize]);
   useEffect(() => {
     if (rows.loading || !rows.data) return;
     const alive = new Set(items.map((r) => r.id));
     setSelected((cur) => (cur.every((id) => alive.has(id)) ? cur : cur.filter((id) => alive.has(id))));
   }, [rows.data, rows.loading]); // eslint-disable-line react-hooks/exhaustive-deps
-  const reload = () => { void rows.refetch(); void refetchMeta(); };
+  const reload = () => { void rows.refetch(); void refetchMeta(); onChanged?.(); };
   const toggle = (id: number) => setSelected(selected.includes(id) ? selected.filter((x) => x !== id) : [...selected, id]);
   const allOn = items.length > 0 && items.every((r) => selected.includes(r.id));
   const entityType = table?.entity_type === "company" ? "company" : "contact";
+  const lockedSelected = items.filter((r) => selected.includes(r.id) && isLocked(r)).map((r) => r.id);
 
   if (metaError) return <ApiError error={metaError} title="Could not load the table" onRetry={() => void refetchMeta()} />;
 
@@ -100,14 +142,30 @@ export function WorkbenchGrid({ tableId, pageSize = 100, onOpenRow, activeRowId,
 
       {panel === "rows" ? <WorkbenchAddRows tableId={tableId} columns={columns} onAdded={reload} /> : null}
       {panel === "columns" ? <ColumnRecipeEditor tableId={tableId} columns={columns} entityType={entityType} onSaved={reload} /> : null}
-      {panel === "selection" ? <WorkbenchRowActions tableId={tableId} rowIds={selected} entityType={entityType} onChanged={(what) => { if (what !== "exported") setSelected([]); reload(); }} /> : null}
+      {panel === "selection" ? <WorkbenchRowActions tableId={tableId} rowIds={selected} lockedRowIds={lockedSelected} entityType={entityType} onChanged={(what) => { if (what !== "exported") setSelected([]); reload(); }} /> : null}
       {running ? (
         <div className="rounded-md border p-3">
           <RunProgress key={running.id} tableId={tableId} target={runTarget(running)!} rowIds={selected.length ? selected : undefined} label={running.display_name || running.name} onFinished={reload} />
           <Button size="sm" variant="ghost" onClick={() => setRunning(null)}>Close</Button>
         </div>
       ) : null}
+      {columns.length > 0 ? (
+        <div className="flex flex-wrap items-end gap-2" role="search" aria-label="Filter and sort rows">
+          <select aria-label="Filter column" className={selectClass} value={filterCol} onChange={(e) => setFilterCol(e.target.value)}>
+            <option value="">Filter by column</option>{columns.map((c) => <option key={c.id} value={c.name}>{c.display_name || c.name}</option>)}
+          </select>
+          <Input aria-label="Filter rows" className="w-48" placeholder="Contains..." disabled={filterCol === ""} value={filterText} onChange={(e) => setFilterText(e.target.value)} />
+          <select aria-label="Sort by" className={selectClass} value={sortCol} onChange={(e) => setSortCol(e.target.value)}>
+            <option value="">No sort</option>{columns.map((c) => <option key={c.id} value={c.name}>{c.display_name || c.name}</option>)}
+          </select>
+          <select aria-label="Sort direction" className={selectClass} value={sortDir} disabled={sortCol === ""} onChange={(e) => setSortDir(e.target.value as "asc" | "desc")}>
+            <option value="asc">Ascending</option><option value="desc">Descending</option>
+          </select>
+          {filtering ? <span className="pb-2 text-xs text-muted-foreground">{total.toLocaleString()} matching {total === 1 ? "row" : "rows"}</span> : null}
+        </div>
+      ) : null}
       {save.error ? <ApiError error={save.error} title="Could not save the cell" /> : null}
+      {removeColumn.error ? <ApiError error={removeColumn.error} title="Could not delete the column" /> : null}
       {rows.error ? <ApiError error={rows.error} title="Could not load the rows" onRetry={() => void rows.refetch()} /> : null}
 
       {(metaLoading || rows.loading) && items.length === 0 ? <Skeleton className="h-40 w-full" /> : null}
@@ -127,6 +185,7 @@ export function WorkbenchGrid({ tableId, pageSize = 100, onOpenRow, activeRowId,
                         <span>{c.display_name || c.name}</span>
                         {c.enrichment_type ? <span className="rounded bg-muted px-1 text-xs">{c.enrichment_type}</span> : null}
                         {target ? <Button size="sm" variant="ghost" aria-label={`Run ${c.display_name || c.name}`} onClick={() => setRunning(c)}>Run</Button> : null}
+                        <Button size="sm" variant="ghost" aria-label={`Delete column ${c.display_name || c.name}`} onClick={() => setDeletingColumn(c)}><Trash2 className="size-3.5" aria-hidden /></Button>
                       </div>
                     </TableHead>
                   );
@@ -159,6 +218,10 @@ export function WorkbenchGrid({ tableId, pageSize = 100, onOpenRow, activeRowId,
           </Table>
         </div>
       ) : null}
+      <ConfirmSpendDialog open={deletingColumn != null} tier="destructive" title={`Delete the column "${deletingColumn?.display_name || deletingColumn?.name || ""}"`}
+        description="The values in this column are removed from every row, and any recipe on it stops. This cannot be undone."
+        affected={total} confirmLabel="Delete column" confirming={removeColumn.loading}
+        onConfirm={() => deletingColumn && void removeColumn.mutate(deletingColumn)} onCancel={() => setDeletingColumn(null)} />
       {items.length < total ? <div><Button size="sm" variant="outline" loading={rows.loading} onClick={() => setEnd(end + pageSize)}>Load more ({items.length.toLocaleString()} of {total.toLocaleString()})</Button></div> : null}
     </div>
   );

package/blocks/workbench/components/workbench-pipelines.tsx

@@ -0,0 +1,173 @@
+"use client";
+
+/**
+ * WorkbenchPipelines: a pipeline is an ordered run of the table's recipe columns (AI columns, provider waterfalls,
+ * formulas) that starts on an event (rows added, a webhook call, an email with a PDF, a scraper run). Lists the pipelines
+ * with a switch each, opens one to read its start and steps, creates one in a side sheet (always saved switched OFF), renames
+ * or switches one, and deletes with a confirm.
+ *
+ * SDK operations, in order:
+ *   1. listWorkbenchPipelines   GET    /workbench/tables/{table_id}/pipelines                 (read)
+ *   2. getWorkbenchPipeline     GET    /workbench/tables/{table_id}/pipelines/{pipeline_id}   (read; the detail sheet)
+ *   3. createWorkbenchPipeline  POST   /workbench/tables/{table_id}/pipelines                 (billable tier: created DISABLED, so nothing is armed)
+ *   4. updateWorkbenchPipeline  PUT    /workbench/tables/{table_id}/pipelines/{pipeline_id}   (billable tier: ENABLING one with AI or waterfall steps arms spend; sends only `enabled`)
+ *   5. deleteWorkbenchPipeline  DELETE /workbench/tables/{table_id}/pipelines/{pipeline_id}   (destructive, ConfirmSpendDialog; a 404 means already gone)
+ *
+ * An enabled pipeline runs its AI and provider steps on every new row and charges for them. graph8 publishes no total up
+ * front, so the enable confirm says so and shows no number. Steps with branches or list exports that other tools created are
+ * shown read-only and are never rewritten here: an enable or disable sends only `enabled`.
+ */
+
+import { useState } from "react";
+import { GitBranch } from "lucide-react";
+import { Button, Input, Label, Skeleton, Switch } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { EmptyState } from "@/g8/components/empty-state";
+import { FormSheet } from "@/g8/components/screen/form-sheet";
+import { KeyValueList } from "@/g8/components/screen/key-value-list";
+import { SectionCard } from "@/g8/components/screen/section-card";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Delete, g8Get, g8Post, g8Put } from "@/g8/lib/g8-client";
+import { isNotFound } from "../lib/api-status";
+import { PIPELINE_STARTS, STEP_TYPES, labelOf, pipelineSpends, rowsOf } from "../lib/automation-types";
+import type { WorkbenchPipeline, WorkbenchPipelineStep } from "../lib/automation-types";
+import type { WorkbenchColumn } from "../lib/workbench-types";
+
+export interface WorkbenchPipelinesProps {
+  tableId: string;
+  /** The table's columns: its recipe columns (AI, waterfall, formula) become the steps you can pick. */
+  columns?: WorkbenchColumn[];
+  className?: string;
+}
+
+const selectClass = "h-9 w-full rounded-md border border-border bg-background px-2 text-sm";
+const SPEND_NOTE = "An enabled pipeline runs its AI and provider steps on every new row and charges for them. No total is published up front, so none is shown.";
+const newStepId = () => `step_${Math.random().toString(36).slice(2, 10)}`;
+
+/** The step a recipe column becomes, or null when it cannot be one (an AI column with no group yet). */
+function stepFor(c: WorkbenchColumn): WorkbenchPipelineStep | null {
+  const name = c.display_name || c.name;
+  if (c.enrichment_type === "ai") return c.enrichment_group_id ? { id: newStepId(), type: "ai_group", name, enabled: true, group_id: c.enrichment_group_id } : null;
+  if (c.enrichment_type === "waterfall") return { id: newStepId(), type: "waterfall", name, enabled: true, column_id: c.id };
+  if (c.column_type === "formula") return { id: newStepId(), type: "formula", name, enabled: true, column_id: c.id };
+  return null;
+}
+
+function PipelineDetail({ tableId, pipeline, onClose }: { tableId: string; pipeline: WorkbenchPipeline | null; onClose: () => void }) {
+  const read = useG8Query(async (signal) => (await g8Get<WorkbenchPipeline>(`/workbench/tables/${tableId}/pipelines/${pipeline?.id}`, undefined, { signal })).data, [tableId, pipeline?.id], { enabled: pipeline != null });
+  const p = read.data ?? pipeline;
+  return (
+    <FormSheet open={pipeline != null} onOpenChange={(o) => !o && onClose()} title={pipeline?.name ?? "Pipeline"} description="Read-only: the start and the steps, in the order they run.">
+      {read.error ? <ApiError error={read.error} title="Could not load the pipeline" onRetry={() => void read.refetch()} /> : null}
+      {read.loading && !read.data ? <Skeleton className="h-16 w-full" aria-label="Loading pipeline" /> : null}
+      {p ? (
+        <div className="flex flex-col gap-4">
+          <KeyValueList items={[
+            { label: "Starts when", value: labelOf(PIPELINE_STARTS, p.start?.type ?? p.start_type) },
+            { label: "State", value: p.enabled ? "On" : "Off" },
+            { label: "Steps", value: String((p.steps ?? []).length) },
+          ]} />
+          <ol className="flex flex-col gap-2">
+            {(p.steps ?? []).map((s, i) => (
+              <li key={s.id} className="flex items-center gap-3 rounded-md border border-border p-3">
+                <span className="flex size-6 items-center justify-center rounded-full bg-muted text-xs">{i + 1}</span>
+                <div className="min-w-0 flex-1"><p className="truncate text-sm font-medium">{s.name}</p><p className="text-xs text-text-color-muted">{labelOf(STEP_TYPES, s.type)}</p></div>
+                {s.enabled === false ? <StatusPill tone="neutral">Skipped</StatusPill> : null}
+              </li>
+            ))}
+          </ol>
+        </div>
+      ) : null}
+    </FormSheet>
+  );
+}
+
+export function WorkbenchPipelines({ tableId, columns = [], className }: WorkbenchPipelinesProps) {
+  const path = `/workbench/tables/${tableId}/pipelines`;
+  const list = useG8Query(async (signal) => rowsOf<WorkbenchPipeline>((await g8Get(path, undefined, { signal })).data), [tableId]);
+  const [creating, setCreating] = useState(false);
+  const [name, setName] = useState("");
+  const [start, setStart] = useState("ingest");
+  const [picked, setPicked] = useState<number[]>([]);
+  const [viewing, setViewing] = useState<WorkbenchPipeline | null>(null);
+  const [enabling, setEnabling] = useState<WorkbenchPipeline | null>(null);
+  const [deleting, setDeleting] = useState<WorkbenchPipeline | null>(null);
+  const [busyId, setBusyId] = useState<string | null>(null);
+
+  const recipeColumns = columns.filter((c) => c.enrichment_type || c.column_type === "formula");
+  const create = useG8Mutation(async () => {
+    const steps = recipeColumns.filter((c) => picked.includes(c.id)).map(stepFor).filter((s): s is WorkbenchPipelineStep => s != null);
+    return (await g8Post(path, { name: name.trim(), start: { type: start }, steps, enabled: false })).data;
+  }, { onSuccess: () => { setCreating(false); setName(""); setPicked([]); void list.refetch(); } });
+  const toggle = useG8Mutation(async (v: { pipeline: WorkbenchPipeline; enabled: boolean }) => { setBusyId(v.pipeline.id); return (await g8Put(`${path}/${v.pipeline.id}`, { enabled: v.enabled })).data; }, {
+    onSuccess: () => { setBusyId(null); setEnabling(null); void list.refetch(); },
+    onError: () => { setBusyId(null); setEnabling(null); },
+  });
+  const remove = useG8Mutation(async (p: WorkbenchPipeline) => { try { await g8Delete(`${path}/${p.id}`); } catch (e) { if (!isNotFound(e)) throw e; } }, {
+    onSuccess: () => { setDeleting(null); void list.refetch(); },
+  });
+  const items = list.data ?? [];
+  const open = () => { create.reset(); setCreating(true); };
+
+  return (
+    <SectionCard className={className} title="Pipelines" icon={<GitBranch aria-hidden />}
+      description="Run your AI, provider and formula columns in order whenever new data arrives."
+      actions={<Button size="sm" onClick={open}>New pipeline</Button>}>
+      {list.error ? <ApiError error={list.error} title="Could not load pipelines" onRetry={() => void list.refetch()} /> : null}
+      {toggle.error ? <ApiError error={toggle.error} title="Could not change the pipeline" /> : null}
+      {remove.error ? <ApiError error={remove.error} title="Could not delete the pipeline" /> : null}
+      {list.loading && !list.data ? <Skeleton className="h-16 w-full" aria-label="Loading pipelines" /> : null}
+      {!list.loading && !list.error && items.length === 0 ? (
+        <EmptyState compact icon={<GitBranch strokeWidth={1.5} />} title="No pipelines yet" description="Chain your recipe columns so they run in order on every new row."
+          action={<Button size="sm" onClick={open}>New pipeline</Button>} />
+      ) : null}
+      <ul className="flex flex-col divide-y divide-border">
+        {items.map((p) => (
+          <li key={p.id} className="flex flex-wrap items-center gap-3 py-3">
+            <div className="min-w-0 flex-1">
+              <p className="flex items-center gap-2 text-sm font-medium"><span className="truncate">{p.name}</span>{pipelineSpends(p) ? <StatusPill tone="warning">Uses credits</StatusPill> : null}</p>
+              <p className="text-xs text-text-color-muted">Starts on: {labelOf(PIPELINE_STARTS, p.start?.type ?? p.start_type)}, {(p.steps ?? []).length} {(p.steps ?? []).length === 1 ? "step" : "steps"}</p>
+            </div>
+            <Switch aria-label={`Enable pipeline ${p.name}`} checked={p.enabled === true} disabled={busyId === p.id}
+              onCheckedChange={(on) => { if (on && pipelineSpends(p)) setEnabling(p); else void toggle.mutate({ pipeline: p, enabled: on }); }} />
+            <Button size="sm" variant="outline" aria-label={`View pipeline ${p.name}`} onClick={() => setViewing(p)}>View</Button>
+            <Button size="sm" variant="ghost" aria-label={`Delete pipeline ${p.name}`} onClick={() => setDeleting(p)}>Delete</Button>
+          </li>
+        ))}
+      </ul>
+
+      <FormSheet open={creating} onOpenChange={setCreating} title="New pipeline" description="Saved switched off. Turn it on from the list when you are ready."
+        footer={(<><Button variant="ghost" onClick={() => setCreating(false)}>Cancel</Button><Button loading={create.loading} disabled={!name.trim()} onClick={() => void create.mutate(undefined)}>Create pipeline</Button></>)}>
+        <div className="flex flex-col gap-3">
+          <div className="flex flex-col gap-1"><Label htmlFor="wbp-name">Pipeline name</Label><Input id="wbp-name" placeholder="Enrich inbound leads" value={name} onChange={(e) => setName(e.target.value)} /></div>
+          <div className="flex flex-col gap-1"><Label htmlFor="wbp-start">Starts when</Label>
+            <select id="wbp-start" className={selectClass} value={start} onChange={(e) => setStart(e.target.value)}>{PIPELINE_STARTS.map((x) => <option key={x.value} value={x.value}>{x.label}</option>)}</select></div>
+          <fieldset className="flex flex-col gap-2 rounded-md border border-border p-3">
+            <legend className="px-1 text-xs text-text-color-muted">Steps, in column order</legend>
+            {recipeColumns.length === 0 ? <p className="text-sm text-text-color-muted">Add an AI, waterfall or formula column to this workbench first. Its columns become the steps.</p> : null}
+            {recipeColumns.map((c) => {
+              const usable = stepFor(c) != null;
+              return (
+                <label key={c.id} className="flex items-center gap-2 text-sm">
+                  <input type="checkbox" aria-label={c.display_name || c.name} disabled={!usable} checked={picked.includes(c.id)} onChange={(e) => setPicked(e.target.checked ? [...picked, c.id] : picked.filter((x) => x !== c.id))} />
+                  <span>{c.display_name || c.name}</span>
+                  <span className="text-xs text-text-color-muted">{c.enrichment_type === "ai" ? "AI" : c.enrichment_type === "waterfall" ? "Waterfall" : "Formula"}{usable ? "" : ", configure it first"}</span>
+                </label>
+              );
+            })}
+          </fieldset>
+          {create.error ? <ApiError error={create.error} title="Could not create the pipeline" /> : null}
+        </div>
+      </FormSheet>
+
+      <PipelineDetail tableId={tableId} pipeline={viewing} onClose={() => setViewing(null)} />
+      <ConfirmSpendDialog open={enabling != null} tier="billable" title={`Enable "${enabling?.name ?? ""}"`} description={SPEND_NOTE} confirmLabel="Enable pipeline" confirming={toggle.loading}
+        onConfirm={() => enabling && void toggle.mutate({ pipeline: enabling, enabled: true })} onCancel={() => setEnabling(null)} />
+      <ConfirmSpendDialog open={deleting != null} tier="destructive" title={`Delete "${deleting?.name ?? ""}"`} description="The pipeline stops running. Rows and columns are not changed."
+        confirmLabel="Delete pipeline" confirming={remove.loading} onConfirm={() => deleting && void remove.mutate(deleting)} onCancel={() => setDeleting(null)} />
+    </SectionCard>
+  );
+}