@graph8/sdk 0.362.0 → 0.373.0

package/blocks/workbench/components/workbench-row-detail.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+/**
+ * WorkbenchRowDetail: one workbench row in full. Every column with its value (a recipe's `extracted_data` before the
+ * imported `raw_data`), the row's status, error and enrichment time, an edit field per plain data column, and the row
+ * actions (unlock, send to a list, delete) for this one row.
+ *
+ * SDK operations, in order:
+ *   1. getWorkbenchRow         GET   /workbench/tables/{table_id}/rows/{row_id}                  (read)
+ *   2. updateWorkbenchRow      PATCH /workbench/tables/{table_id}/rows/{row_id} { field, value } (write; one field per call)
+ *   3. via WorkbenchRowActions: quoteWorkbenchUnlock, unlockWorkbenchRows (billable, confirmed), exportWorkbenchTable,
+ *      bulkDeleteWorkbenchRows (destructive, confirmed)
+ * A locked row (credit_charged false) shows masked cells and cannot be edited until it is unlocked (1 credit per row).
+ */
+
+import { useState } from "react";
+import { Button, Input, Skeleton } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { KeyValueList } from "@/g8/components/screen/key-value-list";
+import { SectionCard } from "@/g8/components/screen/section-card";
+import { StatusPill, humanizeStatus, toneForStatus } from "@/g8/components/screen/status-pill";
+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 { cellValue, formatCell, isLocked, isMasked } from "../lib/workbench-types";
+import type { WorkbenchColumn, WorkbenchRow } from "../lib/workbench-types";
+import { WorkbenchRowActions } from "./workbench-row-actions";
+
+export interface WorkbenchRowDetailProps {
+  tableId: string;
+  rowId: number;
+  columns: WorkbenchColumn[];
+  entityType?: "contact" | "company";
+  /** Called after an edit, unlock or export so the grid can reload; `deleted` also means this row is gone. */
+  onChanged?: (what: "edited" | "unlocked" | "exported" | "deleted") => void;
+  className?: string;
+}
+
+/** The endpoint answers the row itself; tolerate a `{ row }` wrapper too. */
+function asRow(data: unknown): WorkbenchRow | null {
+  const d = data as (WorkbenchRow & { row?: WorkbenchRow }) | null | undefined;
+  return d?.row ?? (d && typeof d.id === "number" ? d : null);
+}
+
+export function WorkbenchRowDetail({ tableId, rowId, columns, entityType = "contact", onChanged, className }: WorkbenchRowDetailProps) {
+  const [draft, setDraft] = useState<{ column: string; value: string } | null>(null);
+  const row = useG8Query(async (signal) => asRow((await g8Get(`/workbench/tables/${tableId}/rows/${rowId}`, undefined, { signal })).data), [tableId, rowId]);
+  const save = useG8Mutation((v: { column: string; value: string }) => g8Patch(`/workbench/tables/${tableId}/rows/${rowId}`, { field: v.column, value: v.value }), {
+    onSuccess: () => { setDraft(null); void row.refetch(); onChanged?.("edited"); },
+  });
+
+  if (row.error) return <ApiError error={row.error} title="Could not load the row" onRetry={() => void row.refetch()} />;
+  const r = row.data;
+  if (!r) return <Skeleton className="h-32 w-full" />;
+  const locked = isLocked(r);
+
+  return (
+    <div className={`flex flex-col gap-4 ${className ?? ""}`}>
+      <div className="flex flex-wrap items-center gap-2">
+        {locked ? <StatusPill tone="warning" dot>Locked</StatusPill> : <StatusPill tone="positive" dot>Unlocked</StatusPill>}
+        {r.status ? <StatusPill tone={toneForStatus(r.status)} dot>{humanizeStatus(r.status)}</StatusPill> : null}
+      </div>
+      {r.error_message ? <p role="alert" className="text-sm text-destructive">{r.error_message}</p> : null}
+      {save.error ? <ApiError error={save.error} title="Could not save the cell" /> : null}
+      <SectionCard title="Fields" description={locked ? "Unlock this row to see and edit real values." : "Edit a plain data field and save it."}>
+        <ul className="flex flex-col gap-3">
+          {columns.map((c) => {
+            const value = cellValue(r, c);
+            const editable = !locked && (c.column_type ?? "data") === "data" && !c.enrichment_type;
+            const open = draft?.column === c.name;
+            return (
+              <li key={c.id} className="flex flex-col gap-1">
+                <span className="text-xs text-muted-foreground">{c.display_name || c.name}{c.enrichment_type ? ` (${c.enrichment_type})` : ""}</span>
+                {open ? (
+                  <div className="flex gap-2">
+                    <Input aria-label={`Edit ${c.name}`} value={draft.value} onChange={(e) => setDraft({ column: c.name, value: e.target.value })} />
+                    <Button size="sm" loading={save.loading} onClick={() => void save.mutate(draft)}>Save</Button>
+                    <Button size="sm" variant="ghost" onClick={() => setDraft(null)}>Cancel</Button>
+                  </div>
+                ) : (
+                  <div className="flex items-center justify-between gap-2">
+                    <span className={`min-w-0 break-words text-sm ${isMasked(value) ? "text-muted-foreground" : ""}`}>{isMasked(value) ? "Locked" : formatCell(value) || <span className="text-muted-foreground">-</span>}</span>
+                    {editable ? <Button size="sm" variant="ghost" aria-label={`Edit ${c.name} value`} onClick={() => setDraft({ column: c.name, value: formatCell(value) })}>Edit</Button> : null}
+                  </div>
+                )}
+              </li>
+            );
+          })}
+        </ul>
+      </SectionCard>
+      <SectionCard title="About this row">
+        <KeyValueList columns={2} items={[
+          { label: "Row id", value: String(r.id), mono: true },
+          { label: "Source", value: r.source_type ? humanizeStatus(r.source_type) : "" },
+          { label: "Enriched", value: r.enriched_at ? new Date(r.enriched_at).toLocaleString() : "" },
+          { label: "Credit charged", value: r.credit_charged == null ? "" : r.credit_charged ? "Yes" : "No, locked" },
+        ]} />
+      </SectionCard>
+      <SectionCard title="Actions" description="Unlock real emails and phones, send this row to a list, or delete it.">
+        <WorkbenchRowActions tableId={tableId} rowIds={[rowId]} entityType={entityType} onChanged={(what) => { void row.refetch(); onChanged?.(what); }} />
+      </SectionCard>
+    </div>
+  );
+}

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

@@ -0,0 +1,202 @@
+"use client";
+
+/**
+ * WorkbenchScreen: the finished Workbench page. Without `?id=` it is the list of workbenches (search, row and column
+ * counts, People or Companies, New workbench in a side sheet, confirmed delete). With `?id=<table>` it opens that table:
+ * a header with its facts and the full WorkbenchGrid (edit cells, paste or add rows, add AI / waterfall / formula
+ * columns, quote then run a column, watch progress, unlock locked rows, send rows to a list, delete rows).
+ *
+ * Composes: ScreenLayout, StatStrip, Toolbar, FormSheet, StatusPill, EntityAvatar (screen kit), WorkbenchGrid and the
+ * parts it composes (WorkbenchAddRows, ColumnRecipeEditor, RunProgress, WorkbenchRowActions), ConfirmSpendDialog.
+ *
+ * SDK operations, in order:
+ *   1. listWorkbenchTables   GET    /workbench/tables?page&limit&filter_name   (read)
+ *   2. createWorkbenchTable  POST   /workbench/tables { name, entity_type }   (write); the new table opens at once
+ *   3. deleteWorkbenchTable  DELETE /workbench/tables/{table_id}              (destructive, ConfirmSpendDialog)
+ *   4. getWorkbenchTable     GET    /workbench/tables/{table_id}              (read, via useWorkbenchTable)
+ *   5. Import people / Scrape the web: previewWorkbenchSearchImport, importWorkbenchFromSearch (billable, confirmed),
+ *      estimateWorkbenchScraperCredits, runWorkbenchScraper (billable, confirmed), getWorkbenchScraperRun (see workbench-sources.tsx)
+ *   6. everything inside the grid: see WorkbenchGrid (runs and unlocks are billable and confirmed)
+ */
+
+import { useEffect, useRef, useState } from "react";
+import type { ReactNode } from "react";
+import { ArrowLeft, Globe, Plus, Table2, Trash2, UsersRound } from "lucide-react";
+import { Button, Input, Label, Skeleton } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { useLoadMoreList } from "@/g8/hooks/use-load-more-list";
+import { byPage } from "@/g8/lib/paging";
+import { LoadMore } from "@/g8/components/paging-notices";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { EmptyState } from "@/g8/components/empty-state";
+import { EntityAvatar } from "@/g8/components/screen/entity-avatar";
+import { FormSheet } from "@/g8/components/screen/form-sheet";
+import { DetailPanel } from "@/g8/components/screen/detail-panel";
+import { SplitView } from "@/g8/components/screen/split-view";
+import { ScreenLayout } from "@/g8/components/screen/screen-layout";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import { Toolbar } from "@/g8/components/screen/toolbar";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { useUrlState } from "@/g8/hooks/use-url-state";
+import { g8Delete, g8Get, g8Post } from "@/g8/lib/g8-client";
+import { useWorkbenchTable } from "../hooks/use-workbench-table";
+import { pageItems, pageTotal } from "../lib/workbench-types";
+import type { WorkbenchTable } from "../lib/workbench-types";
+import { WorkbenchGrid } from "./workbench-grid";
+import { WorkbenchRowDetail } from "./workbench-row-detail";
+import { ScraperPanel, SearchImportPanel } from "./workbench-sources";
+
+export interface WorkbenchScreenProps {
+  toolbarActions?: ReactNode;
+  renderRowActions?: (table: WorkbenchTable) => ReactNode;
+  /** Extra buttons in an opened table's header. */
+  renderDetailActions?: (table: WorkbenchTable) => ReactNode;
+  className?: string;
+}
+
+const noun = (t: { entity_type?: string | null }) => (t.entity_type === "company" ? "Companies" : "People");
+
+function OpenTable({ tableId, onBack, renderDetailActions, className }: { tableId: string; onBack: () => void; renderDetailActions?: (t: WorkbenchTable) => ReactNode; className?: string }) {
+  const { table, columns, loading, error, refetch } = useWorkbenchTable(tableId);
+  const [source, setSource] = useState<"import" | "scrape" | null>(null);
+  const [rowParam, setRowParam] = useUrlState("row");
+  const [view, setView] = useUrlState("view");
+  const full = view === "full";
+  const rowId = rowParam ? Number(rowParam) : null;
+  // New rows arrive from outside the grid (import, scraper): remount it so it reloads, and re-read the counts.
+  const [gridKey, setGridKey] = useState(0);
+  const changed = () => { setGridKey((k) => k + 1); void refetch(); };
+  return (
+    <ScreenLayout
+      className={className}
+      eyebrow={<Button variant="ghost" size="sm" onClick={onBack}><ArrowLeft className="mr-1 size-4" aria-hidden />Back to workbenches</Button>}
+      title={table?.name ?? "Workbench"}
+      description={table ? `${noun(table)} table. Add columns that look things up or write with AI, price a run, then send finished rows to a list.` : undefined}
+      icon={<Table2 className="size-5" aria-hidden />}
+      actions={table ? (<>
+        <Button size="sm" variant="outline" onClick={() => setSource("import")}><UsersRound className="mr-1 size-4" aria-hidden />Import people</Button>
+        <Button size="sm" variant="outline" onClick={() => setSource("scrape")}><Globe className="mr-1 size-4" aria-hidden />Scrape the web</Button>
+        {renderDetailActions?.(table)}
+      </>) : undefined}
+      stats={table ? [
+        { label: "Rows", value: (table.row_count ?? 0).toLocaleString() },
+        { label: "Columns", value: columns.length.toLocaleString() },
+        { label: "Recipe columns", value: columns.filter((c) => c.enrichment_type).length },
+      ] : undefined}
+    >
+      {error ? <ApiError error={error} title="Could not open the workbench" onRetry={() => void refetch()} /> : null}
+      {loading && !table ? <Skeleton className="h-8 w-64" /> : null}
+      <SplitView
+        expanded={full} onExpandedChange={(e) => setView(e ? "full" : null)}
+        list={<WorkbenchGrid key={gridKey} tableId={tableId} activeRowId={rowId} onOpenRow={(r) => setRowParam(String(r.id))} />}
+        detailOpen={rowId != null && Number.isFinite(rowId)}
+        onCloseDetail={() => setRowParam(null)}
+        detailWidth="lg"
+        detailTitle="Row"
+        detail={rowId != null ? (
+          <DetailPanel key={rowId} onExpand={full ? undefined : () => setView("full")} onCollapse={full ? () => setView(null) : undefined} title={`Row ${rowId}`} subtitle={table?.name} onClose={() => setRowParam(null)}>
+            <WorkbenchRowDetail tableId={tableId} rowId={rowId} columns={columns} entityType={table?.entity_type === "company" ? "company" : "contact"}
+              onChanged={(what) => { if (what === "deleted") setRowParam(null); changed(); }} />
+          </DetailPanel>
+        ) : null}
+      />
+      <FormSheet open={source === "import"} onOpenChange={(o) => !o && setSource(null)} width="lg" title="Import people from a search" description="Preview for free, then import. Imported rows are locked until you unlock them.">
+        <SearchImportPanel tableId={tableId} onChanged={changed} />
+      </FormSheet>
+      <FormSheet open={source === "scrape"} onOpenChange={(o) => !o && setSource(null)} width="lg" title="Scrape the web into this table" description="Describe what to collect. You see the credit estimate before anything runs.">
+        <ScraperPanel tableId={tableId} onChanged={changed} />
+      </FormSheet>
+    </ScreenLayout>
+  );
+}
+
+/** Workbenches per read; "Load more" appends the next page. */
+const TABLE_PAGE = 100;
+
+export function WorkbenchScreen({ toolbarActions, renderRowActions, renderDetailActions, className }: WorkbenchScreenProps) {
+  const [openId, setOpenId] = useUrlState("id");
+  const [search, setSearch] = useState("");
+  const [term, setTerm] = useState("");
+  useEffect(() => { const t = setTimeout(() => setTerm(search.trim()), 250); return () => clearTimeout(t); }, [search]);
+  const [creating, setCreating] = useState(false);
+  const [name, setName] = useState("");
+  const [entity, setEntity] = useState<"contact" | "company">("contact");
+  const [deleting, setDeleting] = useState<WorkbenchTable | null>(null);
+
+  const apiTotal = useRef<number | null>(null);
+  const tableRows = useLoadMoreList(byPage<WorkbenchTable>(TABLE_PAGE, async (page, signal) => {
+    const data = (await g8Get("/workbench/tables", { page, limit: TABLE_PAGE, filter_name: term || undefined }, { signal })).data;
+    const rows = pageItems<WorkbenchTable>(data);
+    apiTotal.current = pageTotal(data, -1) >= 0 ? pageTotal(data, -1) : null;
+    return { rows, hasNext: apiTotal.current != null ? page * TABLE_PAGE < apiTotal.current : rows.length >= TABLE_PAGE };
+  }), [term], { enabled: !openId });
+  const tables = { ...tableRows, data: tableRows.data ? { rows: tableRows.data, total: apiTotal.current } : undefined };
+  const create = useG8Mutation(
+    async () => (await g8Post<WorkbenchTable>("/workbench/tables", { name: name.trim(), entity_type: entity })).data,
+    { onSuccess: (t) => { setCreating(false); setName(""); setOpenId(t.id); } },
+  );
+  const remove = useG8Mutation((id: string) => g8Delete(`/workbench/tables/${id}`), { onSuccess: () => { setDeleting(null); void tables.refetch(); } });
+
+  if (openId) return <OpenTable key={openId} tableId={openId} onBack={() => setOpenId(null)} renderDetailActions={renderDetailActions} className={className} />;
+
+  const items = tables.data?.rows ?? [];
+  const partial = tables.data?.total == null || tables.data.total > items.length;
+  const hint = partial ? "On this page" : undefined;
+  return (
+    <ScreenLayout
+      className={className}
+      title="Workbench"
+      description="Spreadsheets that fill themselves in: paste or import records, add AI and enrichment columns, then send the finished rows to a list."
+      icon={<Table2 className="size-5" aria-hidden />}
+      actions={<>{toolbarActions}<Button size="sm" onClick={() => setCreating(true)}><Plus className="mr-1 size-4" aria-hidden />New workbench</Button></>}
+      stats={[
+        { label: "Workbenches", value: (tables.data?.total ?? items.length).toLocaleString(), hint: tables.data?.total == null ? "On this page" : undefined },
+        { label: "Rows", value: items.reduce((n, t) => n + (t.row_count ?? 0), 0).toLocaleString(), hint },
+        { label: "People tables", value: items.filter((t) => t.entity_type !== "company").length, hint },
+        { label: "Company tables", value: items.filter((t) => t.entity_type === "company").length, hint },
+      ]}
+      toolbar={<Toolbar search={{ value: search, onChange: setSearch, placeholder: "Search workbenches" }} />}
+    >
+      {tables.error ? <ApiError error={tables.error} title="Could not load workbenches" onRetry={() => void tables.refetch()} /> : null}
+      {remove.error ? <ApiError error={remove.error} title="Could not delete the workbench" /> : null}
+      {tables.loading && !tables.data ? <Skeleton className="h-24 w-full" /> : null}
+      {!tables.loading && !tables.error && items.length === 0 ? (
+        <EmptyState icon={<Table2 className="size-6" aria-hidden />} title={term ? "No workbench matches" : "No workbenches yet"} description={term ? "Try another name." : "Create one, then paste rows or import people."}
+          action={!term ? <Button size="sm" onClick={() => setCreating(true)}>Create your first workbench</Button> : undefined} />
+      ) : null}
+      <ul className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+        {items.map((t) => (
+          <li key={t.id} data-testid={`workbench-${t.id}`} className="flex items-center gap-3 rounded-md border p-3">
+            <EntityAvatar name={t.name} kind={t.entity_type === "company" ? "company" : "person"} />
+            <button type="button" className="flex min-w-0 flex-1 flex-col text-left" onClick={() => setOpenId(t.id)}>
+              <span className="truncate text-sm font-medium">{t.name}</span>
+              <span className="text-xs text-muted-foreground">{(t.row_count ?? 0).toLocaleString()} rows</span>
+            </button>
+            <StatusPill tone="neutral">{noun(t)}</StatusPill>
+            {renderRowActions?.(t)}
+            <Button size="sm" variant="ghost" aria-label={`Delete ${t.name}`} onClick={() => setDeleting(t)}><Trash2 className="size-4" aria-hidden /></Button>
+          </li>
+        ))}
+      </ul>
+      <LoadMore shown={items.length} noun="workbenches" hasMore={tableRows.hasMore} loading={tableRows.loadingMore} onLoadMore={tableRows.loadMore} />
+
+      <FormSheet open={creating} onOpenChange={setCreating} title="New workbench" description="Choose what each row is. You can paste rows or import people next."
+        footer={(<><Button variant="ghost" onClick={() => setCreating(false)}>Cancel</Button><Button loading={create.loading} disabled={!name.trim()} onClick={() => void create.mutate(undefined)}>Create workbench</Button></>)}>
+        <div className="flex flex-col gap-3">
+          <div className="flex flex-col gap-1"><Label htmlFor="wb-new-name">Name</Label><Input id="wb-new-name" placeholder="Series B fintech accounts" value={name} onChange={(e) => setName(e.target.value)} /></div>
+          <div className="flex flex-col gap-1"><Label htmlFor="wb-new-kind">Rows are</Label>
+            <select id="wb-new-kind" className="h-9 rounded-md border bg-background px-2 text-sm" value={entity} onChange={(e) => setEntity(e.target.value as "contact" | "company")}>
+              <option value="contact">People</option><option value="company">Companies</option>
+            </select>
+          </div>
+          {create.error ? <ApiError error={create.error} title="Could not create the workbench" /> : null}
+        </div>
+      </FormSheet>
+
+      <ConfirmSpendDialog open={deleting != null} tier="destructive" title={`Delete "${deleting?.name ?? ""}"`} description="The table, its columns and all of its rows are removed."
+        affected={deleting?.row_count ?? undefined} confirmLabel="Delete workbench" confirming={remove.loading}
+        onConfirm={() => deleting && void remove.mutate(deleting.id)} onCancel={() => setDeleting(null)} />
+    </ScreenLayout>
+  );
+}

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

@@ -0,0 +1,194 @@
+"use client";
+
+/**
+ * WorkbenchSourcePanels: two ways to fill a workbench table with records.
+ *   - SearchImportPanel: describe the people you want (titles, industries, countries, seniority, company domains),
+ *     preview a free sample and the match count, then import them. Imported rows land LOCKED (names and companies
+ *     visible, emails and phones masked): unlock them from the table's row actions.
+ *   - ScraperPanel: describe what to collect in words ("seed-stage fintechs in Berlin"), see the credit estimate and
+ *     your available credits, run the built-in web scraper and follow its progress.
+ *
+ * SDK operations, in order:
+ *   SearchImportPanel
+ *     1. previewWorkbenchSearchImport  POST /workbench/tables/{table_id}/import/search/preview { filters, sample_size, max_result } (read, free)
+ *        -> { contacts, count }
+ *     2. importWorkbenchFromSearch     POST /workbench/tables/{table_id}/import/search { filters, max_result, skip_duplicates } (billable)
+ *        Goes through ConfirmSpendDialog first. -> { inserted, duplicates, columns_created, processed }
+ *   ScraperPanel
+ *     1. estimateWorkbenchScraperCredits GET /workbench/scraper/credit-estimate?table_id&max_results&auto_enrich (read, free)
+ *        -> { total_estimated_credits, available_credits, ... }
+ *     2. runWorkbenchScraper           POST /workbench/tables/{table_id}/scraper/runs { prompt, max_results, auto_enrich, approved_max_credits, quote_expires_at } (billable)
+ *        Goes through ConfirmSpendDialog first with the estimate; the estimate is also the cap sent back. -> { run_id, status }
+ *     3. getWorkbenchScraperRun        GET /workbench/tables/{table_id}/scraper/runs/{run_id} (read) polled with useJobPoll
+ *        -> { status, results_count, progress_pct, progress_message, error_message }
+ *
+ * Nothing runs without the confirmation. There is no stream, so the scraper run is polled with backoff.
+ */
+
+import { useState } from "react";
+import { Button, Input, Label } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useJobPoll } from "@/g8/hooks/use-job-poll";
+import { g8Get, g8Post } from "@/g8/lib/g8-client";
+
+export interface WorkbenchSourcePanelProps {
+  tableId: string;
+  /** Called after rows were added (import done, scraper run finished) so the grid can reload. */
+  onChanged?: () => void;
+  className?: string;
+}
+
+const csv = (text: string): string[] => text.split(",").map((s) => s.trim()).filter(Boolean);
+
+interface Preview { contacts?: Array<Record<string, unknown>>; count?: number }
+interface ImportResult { inserted?: number; duplicates?: number; columns_created?: number; processed?: number }
+interface Estimate { estimated_credits?: number; total_estimated_credits?: number; available_credits?: number; quote_expires_at?: string }
+interface RunStarted { run_id?: string; status?: string }
+interface ScraperRun { status?: string; results_count?: number; progress_pct?: number | null; progress_message?: string | null; error_message?: string | null }
+
+const FIELDS = [
+  { key: "job_title", label: "Job titles", placeholder: "VP Sales, Head of Sales" },
+  { key: "seniority_level", label: "Seniority", placeholder: "vp, director" },
+  { key: "company_industry", label: "Industries", placeholder: "computer software" },
+  { key: "country", label: "Countries", placeholder: "United States" },
+  { key: "company_domain", label: "Company domains", placeholder: "acme.com, globex.com" },
+] as const;
+
+/** Display name of a sampled person. Locked values arrive as "***" and are never shown. */
+function sampleName(c: Record<string, unknown>): string {
+  const text = (v: unknown) => (typeof v === "string" && v !== "***" ? v : "");
+  return [text(c.first_name), text(c.last_name)].filter(Boolean).join(" ") || "Locked contact";
+}
+
+export function SearchImportPanel({ tableId, onChanged, className }: WorkbenchSourcePanelProps) {
+  const [values, setValues] = useState<Record<string, string>>({});
+  const [max, setMax] = useState("100");
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  const filters = FIELDS.map((f) => ({ field: f.key, operator: "any_of", value: csv(values[f.key] ?? "") })).filter((f) => f.value.length > 0);
+  const key = JSON.stringify(filters);
+  const limit = Math.max(1, Math.min(Number(max) || 0, 10000));
+
+  const preview = useG8Mutation(async () => (await g8Post<Preview>(`/workbench/tables/${tableId}/import/search/preview`, { filters, sample_size: 10, max_result: limit })).data);
+  const run = useG8Mutation(
+    async () => (await g8Post<ImportResult>(`/workbench/tables/${tableId}/import/search`, { filters, max_result: limit, skip_duplicates: true })).data,
+    { onSuccess: () => { setConfirmOpen(false); onChanged?.(); } },
+  );
+  // A preview describes one set of filters: forget it when they change.
+  const [previewKey, setPreviewKey] = useState("");
+  const shown = preview.data && previewKey === key ? preview.data : null;
+  const done = run.data;
+
+  return (
+    <div className={`flex flex-col gap-3 ${className ?? ""}`}>
+      <p className="text-sm text-muted-foreground">Describe the people you want. Separate several values with commas. All filters must match.</p>
+      {FIELDS.map((f) => (
+        <div key={f.key} className="flex flex-col gap-1">
+          <Label htmlFor={`imp-${f.key}`}>{f.label}</Label>
+          <Input id={`imp-${f.key}`} placeholder={f.placeholder} value={values[f.key] ?? ""} onChange={(e) => setValues({ ...values, [f.key]: e.target.value })} />
+        </div>
+      ))}
+      <div className="flex flex-col gap-1">
+        <Label htmlFor="imp-max">Import at most</Label>
+        <Input id="imp-max" inputMode="numeric" className="w-32" value={max} onChange={(e) => setMax(e.target.value)} />
+      </div>
+      <div className="flex gap-2">
+        <Button variant="outline" size="sm" loading={preview.loading} disabled={filters.length === 0} onClick={async () => { setPreviewKey(key); await preview.mutate(undefined); }}>Preview sample</Button>
+        <Button size="sm" disabled={filters.length === 0 || !shown || (shown.count ?? 0) === 0} onClick={() => setConfirmOpen(true)}>Import {shown ? Math.min(shown.count ?? 0, limit).toLocaleString() : ""} people</Button>
+      </div>
+      {preview.error ? <ApiError error={preview.error} title="Could not preview the search" /> : null}
+      {shown ? (
+        <div role="status" className="rounded-md border p-3 text-sm">
+          <p><strong>{(shown.count ?? 0).toLocaleString()}</strong> people match. Sample:</p>
+          <ul className="mt-1 list-disc pl-5 text-muted-foreground">
+            {(shown.contacts ?? []).slice(0, 10).map((c, i) => <li key={i}>{sampleName(c)}{typeof c.job_title === "string" ? `, ${c.job_title}` : ""}{typeof c.company_name === "string" ? ` at ${c.company_name}` : ""}</li>)}
+          </ul>
+          <p className="mt-2 text-xs text-muted-foreground">Emails and phones stay locked until you unlock the rows (1 credit per row).</p>
+        </div>
+      ) : null}
+      {run.error ? <ApiError error={run.error} title="Could not import" /> : null}
+      {done ? <p role="status" className="text-sm">Imported {(done.inserted ?? 0).toLocaleString()} people{done.duplicates ? `, skipped ${done.duplicates.toLocaleString()} duplicates` : ""}. Their contact details are locked: select the rows and unlock them.</p> : null}
+      <ConfirmSpendDialog open={confirmOpen} tier="billable" title={`Import up to ${shown ? Math.min(shown.count ?? 0, limit).toLocaleString() : limit.toLocaleString()} people`}
+        description="They are added to this table with names and companies visible and contact details locked. Unlocking costs 1 credit per row."
+        affected={shown ? Math.min(shown.count ?? 0, limit) : undefined} confirmLabel="Import" confirming={run.loading}
+        onConfirm={() => void run.mutate(undefined)} onCancel={() => setConfirmOpen(false)} />
+    </div>
+  );
+}
+
+const RUNNING = new Set(["pending", "queued", "starting", "running", "in_progress", "processing"]);
+
+export function ScraperPanel({ tableId, onChanged, className }: WorkbenchSourcePanelProps) {
+  const [prompt, setPrompt] = useState("");
+  const [maxResults, setMaxResults] = useState("100");
+  const [autoEnrich, setAutoEnrich] = useState(false);
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  const [runId, setRunId] = useState<string | null>(null);
+  const count = Math.max(10, Math.min(Number(maxResults) || 0, 2000));
+  const scope = `${count}:${autoEnrich}`;
+
+  const [estimateScope, setEstimateScope] = useState("");
+  const estimate = useG8Mutation(async () => (await g8Get<Estimate>("/workbench/scraper/credit-estimate", { table_id: tableId, max_results: count, auto_enrich: autoEnrich })).data);
+  const quote = estimate.data && estimateScope === scope ? estimate.data : null;
+  const credits = quote ? (quote.total_estimated_credits ?? quote.estimated_credits ?? 0) : 0;
+
+  const [stale, setStale] = useState(false);
+  const start = useG8Mutation(
+    async () => (await g8Post<RunStarted>(`/workbench/tables/${tableId}/scraper/runs`, {
+      prompt: prompt.trim(), max_results: count, auto_enrich: autoEnrich, approved_max_credits: credits, quote_expires_at: quote?.quote_expires_at,
+    })).data,
+    { onSuccess: (r) => { setConfirmOpen(false); if (r.run_id) setRunId(r.run_id); } },
+  );
+  /** The server prices a run against the estimate's own expiry. Never invent one: an expired or missing quote is re-estimated. */
+  const confirmRun = () => {
+    const expires = quote?.quote_expires_at ? Date.parse(quote.quote_expires_at) : NaN;
+    if (!Number.isFinite(expires) || expires <= Date.now()) {
+      setConfirmOpen(false); setEstimateScope(""); estimate.reset(); setStale(true);
+      return;
+    }
+    void start.mutate(undefined);
+  };
+  const progress = useJobPoll<ScraperRun>(
+    async (signal) => (await g8Get<ScraperRun>(`/workbench/tables/${tableId}/scraper/runs/${runId}`, undefined, { signal })).data,
+    { enabled: runId != null, intervalMs: 3000, maxIntervalMs: 20000, isTerminal: (r) => !RUNNING.has(String(r.status ?? "").toLowerCase()), onDone: () => onChanged?.() },
+  );
+  const run = progress.status;
+
+  if (runId) {
+    return (
+      <div className={`flex flex-col gap-3 ${className ?? ""}`} role="status">
+        <h3 className="text-sm font-medium">{progress.done ? `Scraper ${run?.status ?? "finished"}` : "Scraping the web..."}</h3>
+        <div className="h-2 overflow-hidden rounded bg-muted" aria-label="Progress"><div className="h-full bg-primary" style={{ width: `${progress.done ? 100 : (run?.progress_pct ?? 0)}%` }} /></div>
+        <p className="text-sm">{(run?.results_count ?? 0).toLocaleString()} results collected.{run?.progress_message ? ` ${run.progress_message}` : ""}</p>
+        {run?.error_message ? <p role="alert" className="text-sm text-destructive">{run.error_message}</p> : null}
+        {progress.error ? <ApiError error={progress.error} title="Could not read the run" onRetry={() => progress.start()} /> : null}
+        {progress.done ? <Button size="sm" variant="outline" onClick={() => { setRunId(null); progress.stop(); start.reset(); }}>Start another run</Button> : null}
+      </div>
+    );
+  }
+
+  return (
+    <div className={`flex flex-col gap-3 ${className ?? ""}`}>
+      <div className="flex flex-col gap-1">
+        <Label htmlFor="scr-prompt">What should it collect?</Label>
+        <Input id="scr-prompt" placeholder="Seed-stage fintech companies in Berlin" value={prompt} onChange={(e) => setPrompt(e.target.value)} />
+      </div>
+      <div className="flex flex-col gap-1">
+        <Label htmlFor="scr-max">How many results (10 to 2,000)</Label>
+        <Input id="scr-max" inputMode="numeric" className="w-32" value={maxResults} onChange={(e) => setMaxResults(e.target.value)} />
+      </div>
+      <label className="flex items-center gap-2 text-sm"><input type="checkbox" checked={autoEnrich} onChange={(e) => setAutoEnrich(e.target.checked)} /> Enrich every result with the table's enrichment columns (costs more)</label>
+      <div className="flex gap-2">
+        <Button variant="outline" size="sm" loading={estimate.loading} disabled={!prompt.trim()} onClick={async () => { setStale(false); setEstimateScope(scope); await estimate.mutate(undefined); }}>Estimate credits</Button>
+        <Button size="sm" disabled={!prompt.trim() || !quote} onClick={() => setConfirmOpen(true)}>Run scraper</Button>
+      </div>
+      {estimate.error ? <ApiError error={estimate.error} title="Could not estimate the cost" /> : null}
+      {quote ? <p role="status" className="text-sm">Up to <strong>{credits.toLocaleString()}</strong> credits{quote.available_credits != null ? `. You have ${quote.available_credits.toLocaleString()} available.` : "."}{quote.available_credits != null && credits > quote.available_credits ? " That is more than your balance, so the run would be refused." : ""}</p> : null}
+      {stale ? <p role="status" className="text-sm">That estimate has expired. Estimate the credits again before running the scraper.</p> : null}
+      {start.error ? <ApiError error={start.error} title="Could not start the scraper" /> : null}
+      <ConfirmSpendDialog open={confirmOpen} tier="billable" title={`Scrape up to ${count.toLocaleString()} results`} description={`"${prompt.trim()}". The scraper charges per result collected; the estimate is the most this run can charge.`}
+        estimatedCredits={credits} confirmLabel="Run scraper" confirming={start.loading} onConfirm={confirmRun} onCancel={() => setConfirmOpen(false)} />
+    </div>
+  );
+}

package/blocks/workbench/components/workbench-table-list.tsx

@@ -14,13 +14,16 @@
 import { useEffect, useState } from "react";
 import { Button, Input, Label, Skeleton } from "@graph8/sdk/ui";
 import { ApiError } from "@/g8/components/api-error";
+import { useLoadMoreList } from "@/g8/hooks/use-load-more-list";
+import { byPage } from "@/g8/lib/paging";
+import { LoadMore } from "@/g8/components/paging-notices";
 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 { g8Delete, g8Get, g8Post } from "@/g8/lib/g8-client";
 import { WorkbenchGrid } from "./workbench-grid";
-import { pageItems } from "../lib/workbench-types";
+import { pageItems, pageTotal } from "../lib/workbench-types";
 import type { WorkbenchTable } from "../lib/workbench-types";
 
 export interface WorkbenchTableListProps {
@@ -29,6 +32,9 @@ export interface WorkbenchTableListProps {
   className?: string;
 }
 
+/** Workbenches per read; "Load more" appends the next page. */
+const TABLE_PAGE = 100;
+
 export function WorkbenchTableList({ onOpen, className }: WorkbenchTableListProps) {
   const [name, setName] = useState("");
   const [entity, setEntity] = useState<"contact" | "company">("contact");
@@ -39,7 +45,12 @@ export function WorkbenchTableList({ onOpen, className }: WorkbenchTableListProp
   const [opened, setOpened] = useState<WorkbenchTable | null>(null);
   const open = (t: WorkbenchTable) => { if (onOpen) onOpen(t); else setOpened(t); };
 
-  const tables = useG8Query(async (signal) => pageItems<WorkbenchTable>((await g8Get("/workbench/tables", { page: 1, limit: 100, filter_name: term || undefined }, { signal })).data), [term]);
+  const tables = useLoadMoreList(byPage<WorkbenchTable>(TABLE_PAGE, async (page, signal) => {
+    const data = (await g8Get("/workbench/tables", { page, limit: TABLE_PAGE, filter_name: term || undefined }, { signal })).data;
+    const rows = pageItems<WorkbenchTable>(data);
+    const total = pageTotal(data, -1);
+    return { rows, hasNext: total >= 0 ? page * TABLE_PAGE < total : rows.length >= TABLE_PAGE };
+  }), [term]);
   const create = useG8Mutation(
     async () => (await g8Post<WorkbenchTable>("/workbench/tables", { name: name.trim(), entity_type: entity })).data,
     { onSuccess: (t) => { setName(""); void tables.refetch(); open(t); } },
@@ -89,6 +100,7 @@ export function WorkbenchTableList({ onOpen, className }: WorkbenchTableListProp
           </li>
         ))}
       </ul>
+      <LoadMore shown={(tables.data ?? []).length} noun="workbenches" hasMore={tables.hasMore} loading={tables.loadingMore} onLoadMore={tables.loadMore} />
       <ConfirmSpendDialog
         open={deleting != null}
         tier="destructive"

package/blocks/workflows/README.md

@@ -3,6 +3,19 @@
 Editable React screens for automations: a workflow list, a step-list editor (not a canvas), trigger
 configuration and run history. Install with `npx @graph8/sdk add workflows`.
 
+## Screens
+
+`WorkflowsScreen` (`components/workflows-screen.tsx`) is the finished automations workspace; mount it as the page.
+
+- **Workflows tab**: stat strip (workflows, enabled, disabled, failed runs), search, status filter, the list with
+  Run (plan preview and run input first), Enable / Disable and Delete, and **New workflow**. Opening one (deep link
+  `?id=`) shows **Steps** (editor), **Trigger** (type, interval, cursor reset) and **Runs** for that workflow.
+- **Runs tab**: every run as a list; opening one (`?run=`) shows `RunDetail` (status, timing, who started it, error, input, output) with pause / resume / stop / restart. `&view=full` opens any record as a full page.
+- Create, run, enable and disable are `external`, delete is `destructive`: all go through `ConfirmSpendDialog`.
+  Needs `workflows:read|write|run|delete`.
+- Slots: `renderRowActions`, `renderDetailActions`, `extraDetailTabs`, `toolbarActions`. `RunPlan` and `RunDetail` are now
+  exported; `RunHistory` gained `selectedId`, `onSelectRun`, `hideDetail`, `refreshKey`, `nameFor`.
+
 | Component | What it is |
 |---|---|
 | `WorkflowList` | Workflows with run (plan preview + JSON input), enable/disable, create, delete. |

package/blocks/workflows/block.json

@@ -13,24 +13,42 @@
     "foundation"
   ],
   "operations": [
-    "list_workflows_workflows_get",
     "create_workflow_workflows_post",
-    "plan_workflow_workflows__action_id__plan_post",
-    "execute_workflow_workflows__action_id__execute_post",
-    "update_workflow_workflows__action_id__put",
     "delete_workflow_workflows__action_id__delete",
-    "get_workflow_workflows__action_id__get",
+    "execute_workflow_workflows__action_id__execute_post",
+    "get_execution_workflows_executions__execution_id__get",
     "get_node_types_schema_workflows_node_types_schema_get",
     "get_trigger_status_workflows__action_id__trigger_status_get",
-    "reset_trigger_cursor_workflows__action_id__trigger_reset_post",
+    "get_workflow_workflows__action_id__get",
     "list_workflow_executions_workflows_executions_get",
-    "get_execution_workflows_executions__execution_id__get",
+    "list_workflows_workflows_get",
     "pause_execution_workflows_executions__execution_id__pause_post",
+    "plan_workflow_workflows__action_id__plan_post",
+    "reset_trigger_cursor_workflows__action_id__trigger_reset_post",
+    "restart_execution_workflows_executions__execution_id__restart_post",
     "resume_execution_workflows_executions__execution_id__resume_post",
     "stop_execution_workflows_executions__execution_id__stop_post",
-    "restart_execution_workflows_executions__execution_id__restart_post"
+    "update_workflow_workflows__action_id__put"
   ],
   "components": [
+    {
+      "name": "WorkflowsScreen",
+      "file": "components/workflows-screen.tsx",
+      "purpose": "Finished automations workspace: stats, search, list with run/enable/delete, create, and a detail panel with steps, trigger and runs, plus a workspace-wide Runs tab.",
+      "operations": [
+        "create_workflow_workflows_post",
+        "delete_workflow_workflows__action_id__delete",
+        "execute_workflow_workflows__action_id__execute_post",
+        "list_workflow_executions_workflows_executions_get",
+        "list_workflows_workflows_get",
+        "update_workflow_workflows__action_id__put"
+      ],
+      "tiers": [
+        "read",
+        "external",
+        "destructive"
+      ]
+    },
     {
       "name": "WorkflowList",
       "file": "components/workflow-list.tsx",
@@ -183,6 +201,7 @@
     }
   ],
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18",
+    "lucide-react": ">=0.400.0"
   }
 }