@graph8/sdk 0.373.0 → 0.374.0

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

@@ -12,6 +12,7 @@
  *   3. exportWorkbenchTable       POST .../export { row_ids, list_id | create_new_list + new_list_name, entity_type }  (write)
  *        The way finished rows leave the workbench for a list (ListPicker from the lists block).
  *   4. bulkDeleteWorkbenchRows    POST .../rows/bulk-delete { row_ids }   (destructive) ConfirmSpendDialog first.
+ *   5. "Send to sequence" opens WorkbenchSendToSequence: listSequences, sendWorkbenchRowsToSequence (external, confirmed there; locked rows skipped)
  */
 
 import { useEffect, useState } from "react";
@@ -21,6 +22,7 @@ import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
 import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
 import { g8Post } from "@/g8/lib/g8-client";
 import { ListPicker } from "@/g8/lists/components/list-picker";
+import { WorkbenchSendToSequence } from "./workbench-send-to-sequence";
 import type { ListSummary } from "@/g8/lists/components/list-picker";
 import type { CreditQuote } from "../lib/workbench-types";
 
@@ -29,16 +31,19 @@ export interface WorkbenchRowActionsProps {
   /** Row ids selected in the grid. The actions are disabled until at least one is selected. */
   rowIds: number[];
   entityType?: "contact" | "company";
+  /** Which of `rowIds` are still locked. "Send to sequence" skips them. Omit it and none are treated as locked. */
+  lockedRowIds?: number[];
   /** Called after rows were unlocked, deleted or exported so the grid can reload. */
   onChanged?: (what: "unlocked" | "deleted" | "exported") => void;
   className?: string;
 }
 
-export function WorkbenchRowActions({ tableId, rowIds, entityType = "contact", onChanged, className }: WorkbenchRowActionsProps) {
+export function WorkbenchRowActions({ tableId, rowIds, entityType = "contact", lockedRowIds, onChanged, className }: WorkbenchRowActionsProps) {
   const [quote, setQuote] = useState<CreditQuote | null>(null);
   const [confirmDelete, setConfirmDelete] = useState(false);
   const [listId, setListId] = useState<number | null>(null);
   const [notice, setNotice] = useState<string | null>(null);
+  const [sequenceOpen, setSequenceOpen] = useState(false);
   const none = rowIds.length === 0;
   // A quote prices one selection: drop it (and its "nothing to unlock" note) when the selection changes.
   const scope = rowIds.join(",");
@@ -68,8 +73,10 @@ export function WorkbenchRowActions({ tableId, rowIds, entityType = "contact", o
         <ListPicker value={listId} onChange={pick} type={entityType === "company" ? "companies" : "contacts"} allowCreate />
         <Button size="sm" variant="outline" disabled={none || listId == null} loading={exportRows.loading} onClick={() => listId != null && void exportRows.mutate(listId)}>Send to list</Button>
         <Button size="sm" variant="outline" disabled={none} loading={getQuote.loading} onClick={() => void getQuote.mutate(undefined)}>Unlock locked rows</Button>
+        <Button size="sm" variant="outline" disabled={none} aria-expanded={sequenceOpen} onClick={() => setSequenceOpen(!sequenceOpen)}>Send to sequence</Button>
         <Button size="sm" variant="outline" disabled={none} onClick={() => setConfirmDelete(true)}>Delete rows</Button>
       </div>
+      {sequenceOpen && !none ? <WorkbenchSendToSequence tableId={tableId} rowIds={rowIds} lockedRowIds={lockedRowIds} entityType={entityType} onSent={() => onChanged?.("exported")} /> : null}
       {[getQuote.error, exportRows.error, remove.error, unlock.error].filter(Boolean).map((e, i) => <ApiError key={i} error={e} title="That did not work" />)}
       {noLocked ? <p role="status" className="text-sm text-muted-foreground">None of the selected rows are locked. Nothing to unlock.</p> : null}
       {notice ? <p role="status" className="text-sm text-muted-foreground">{notice}</p> : null}

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

@@ -0,0 +1,191 @@
+"use client";
+
+/**
+ * WorkbenchSchedule: run something on this workbench on a timer. Shows the current schedule (what runs, how often, whether
+ * the scheduler is live, the next and last run) or "No schedule yet"; sets or changes it in a side sheet; removes it with a
+ * confirm. Writing a schedule and starting it are separate acts: it is saved stopped unless "Start the schedule now" is on.
+ *
+ * SDK operations, in order:
+ *   1. getWorkbenchSchedule     GET    /workbench/tables/{table_id}/schedule   (read; the API answers 404 when none is set, shown as "No schedule yet")
+ *   2. quoteWorkbenchAiRun      POST   /workbench/tables/{table_id}/ai/validate-credits { all_columns: true }   (read, free)
+ *        the price of one run-all AI pass over the pending rows. Starting an AI schedule REQUIRES its `required_credits` and
+ *        `quote_expires_at` back as `action_config.approved_max_credits` / `quote_expires_at` (the server refuses to start without them and
+ *        checks again that the cap still covers the run), so the confirm shows that number
+ *   3. setWorkbenchSchedule     PUT    /workbench/tables/{table_id}/schedule   (billable tier: a started "Run the AI columns" schedule charges on every firing)
+ *   4. deleteWorkbenchSchedule  DELETE /workbench/tables/{table_id}/schedule   (destructive, ConfirmSpendDialog; the fastest way to stop recurring spend)
+ *   5. listCrmSyncs             GET    /crm-syncs   (read, via useConnectedCrms; the CRM a "Pull records from the CRM" schedule reads)
+ *
+ * What each action needs in `action_config`, copied from the handler: run_ai needs the quote above when it is started; run_formula takes an
+ * optional `column_id` (one formula column, else all of them); crm_import needs `connection_id` and `provider_type` and a `limit` of 1 to 1000.
+ * Editing keeps the schedule's existing action_config (the formula it is scoped to, the CRM, the cap), and changing the action starts a fresh one.
+ * The cron minute must be a plain number, so a schedule runs at most once an hour. The scheduler runs in UTC.
+ */
+
+import { useState } from "react";
+import { CalendarClock } 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 { crmLabel, useConnectedCrms } from "../hooks/use-connected-crms";
+import { isNotFound } from "../lib/api-status";
+import { CRON_HINT, MAX_CRM_SCHEDULE_LIMIT, SCHEDULE_ACTIONS, SCHEDULE_FREQUENCIES, describeSchedule, scheduleSpends, schedulerTone, validCron } from "../lib/automation-types";
+import type { WorkbenchSchedule as Schedule } from "../lib/automation-types";
+import type { CreditQuote, WorkbenchColumn } from "../lib/workbench-types";
+
+export interface WorkbenchScheduleProps {
+  tableId: string;
+  /** The table's columns. With them, an action the table cannot run yet (no AI column, no formula column) is disabled; without them every action is offered. */
+  columns?: WorkbenchColumn[];
+  className?: string;
+}
+
+const selectClass = "h-9 w-full rounded-md border border-border bg-background px-2 text-sm";
+const STATE_LABEL: Record<string, string> = { active: "Running on schedule", paused: "Paused", missing: "Not registered with the scheduler", unavailable: "Scheduler unavailable" };
+const when = (iso?: string | null) => (iso ? new Date(iso).toLocaleString() : "");
+
+interface Draft {
+  action_type: string;
+  cadence: string;
+  cron: string;
+  enabled: boolean;
+  /** The action's own settings: the schedule's existing ones when editing, a fresh set when the action changes. */
+  config: Record<string, unknown>;
+}
+const BLANK: Draft = { action_type: "run_ai", cadence: "daily", cron: "", enabled: false, config: {} };
+const clampLimit = (n: number) => (Number.isFinite(n) ? Math.min(MAX_CRM_SCHEDULE_LIMIT, Math.max(1, Math.round(n))) : 100);
+
+/** The PUT body. `action_config` is sent only when there is something in it, and `extra` (the AI quote) is added on top of the draft's own. */
+function toBody(d: Draft, extra: Record<string, unknown> = {}) {
+  const config = { ...d.config, ...extra };
+  return {
+    action_type: d.action_type, ...(d.cadence === "cron" ? { cron_expression: d.cron.trim() } : { frequency: d.cadence }), enabled: d.enabled,
+    ...(Object.keys(config).length ? { action_config: config } : {}),
+  };
+}
+
+export function WorkbenchSchedule({ tableId, columns, className }: WorkbenchScheduleProps) {
+  const path = `/workbench/tables/${tableId}/schedule`;
+  const read = useG8Query(async (signal): Promise<Schedule | null> => {
+    try { return (await g8Get<Schedule>(path, undefined, { signal })).data; } catch (e) { if (isNotFound(e)) return null; throw e; }
+  }, [tableId]);
+  const [open, setOpen] = useState(false);
+  const [draft, setDraft] = useState<Draft>(BLANK);
+  const [quote, setQuote] = useState<CreditQuote | null>(null);
+  const [removing, setRemoving] = useState(false);
+  const crms = useConnectedCrms({ enabled: open && draft.action_type === "crm_import" });
+
+  const save = useG8Mutation(async (v: { d: Draft; extra?: Record<string, unknown> }) => (await g8Put(path, toBody(v.d, v.extra))).data, {
+    onSuccess: () => { setOpen(false); setQuote(null); void read.refetch(); },
+    onError: () => setQuote(null),
+  });
+  const price = useG8Mutation(async () => (await g8Post<CreditQuote>(`/workbench/tables/${tableId}/ai/validate-credits`, { all_columns: true })).data, { onSuccess: (q) => setQuote(q) });
+  const remove = useG8Mutation(async () => { try { await g8Delete(path); } catch (e) { if (!isNotFound(e)) throw e; } }, {
+    onSuccess: () => { setRemoving(false); void read.refetch(); },
+  });
+
+  const s = read.data;
+  const canAi = !columns || columns.some((c) => c.enrichment_type === "ai");
+  const formulas = (columns ?? []).filter((c) => c.column_type === "formula");
+  const canFormula = !columns || formulas.length > 0;
+  const crm = draft.action_type === "crm_import" ? (crms.connected ?? []).find((c) => c.connection_id === draft.config.connection_id) : undefined;
+  const crmReady = draft.action_type !== "crm_import" || (Boolean(draft.config.connection_id) && Boolean(draft.config.provider_type));
+  const valid = (draft.cadence !== "cron" || validCron(draft.cron)) && crmReady;
+  const edit = () => {
+    setDraft(s ? { action_type: s.action_type ?? "run_ai", cadence: s.frequency ?? "cron", cron: s.cron_expression ?? "", enabled: s.enabled === true, config: { ...(s.action_config ?? {}) } } : BLANK);
+    save.reset(); price.reset();
+    setOpen(true);
+  };
+  const submit = () => {
+    if (!valid || save.loading || price.loading) return;
+    if (draft.enabled && scheduleSpends(draft.action_type)) void price.mutate(undefined); // the server wants the quoted cap before it starts an AI schedule
+    else void save.mutate({ d: draft });
+  };
+  const affordable = quote != null && quote.can_run !== false;
+  const setAction = (action_type: string) => setDraft({ ...draft, action_type, config: {} });
+  const setConfig = (patch: Record<string, unknown>) => setDraft({ ...draft, config: { ...draft.config, ...patch } });
+
+  return (
+    <SectionCard className={className} title="Schedule" icon={<CalendarClock aria-hidden />}
+      description="Re-run this workbench on a timer, in UTC."
+      actions={s ? (<><Button size="sm" variant="outline" onClick={edit}>Edit schedule</Button><Button size="sm" variant="ghost" onClick={() => setRemoving(true)}>Remove schedule</Button></>) : (read.data === null ? <Button size="sm" onClick={edit}>Set a schedule</Button> : undefined)}>
+      {read.error ? <ApiError error={read.error} title="Could not load the schedule" onRetry={() => void read.refetch()} /> : null}
+      {remove.error ? <ApiError error={remove.error} title="Could not remove the schedule" /> : null}
+      {read.loading && read.data === undefined ? <Skeleton className="h-16 w-full" aria-label="Loading schedule" /> : null}
+      {!read.loading && !read.error && s === null ? (
+        <EmptyState compact icon={<CalendarClock strokeWidth={1.5} />} title="No schedule yet" description="Recompute formulas every night, or refresh AI columns weekly. A new schedule is saved stopped until you start it." />
+      ) : null}
+      {s ? (
+        <div className="flex flex-col gap-3">
+          <div className="flex flex-wrap items-center gap-2">
+            <p className="text-sm">{describeSchedule(s)}</p>
+            <StatusPill tone={s.enabled === true ? schedulerTone(s.scheduler_state) : "neutral"} dot>{s.enabled === true ? (STATE_LABEL[s.scheduler_state ?? ""] ?? "State unknown") : "Stopped"}</StatusPill>
+          </div>
+          {s.scheduler_error ? <p role="alert" className="text-sm text-destructive">{s.scheduler_error}</p> : null}
+          <KeyValueList columns={2} items={[
+            { label: "Next run", value: when(s.next_run_at) },
+            { label: "Last run", value: when(s.last_run_at) },
+            { label: "Last result", value: s.last_outcome ? s.last_outcome.replace(/_/g, " ") : "" },
+            { label: "Set by", value: s.updated_by_label || s.owner_label || "" },
+          ]} />
+        </div>
+      ) : null}
+
+      <FormSheet open={open} onOpenChange={setOpen} title={s ? "Edit schedule" : "Set a schedule"} description="Saved stopped unless you start it. Starting a schedule that runs AI columns charges on every run."
+        footer={(<><Button variant="ghost" onClick={() => setOpen(false)}>Cancel</Button><Button loading={save.loading || price.loading} disabled={!valid} onClick={submit}>Save schedule</Button></>)}>
+        <div className="flex flex-col gap-3">
+          <div className="flex flex-col gap-1"><Label htmlFor="wbs-run">Run</Label>
+            <select id="wbs-run" className={selectClass} value={draft.action_type} onChange={(e) => setAction(e.target.value)}>
+              {SCHEDULE_ACTIONS.map((x) => <option key={x.value} value={x.value} disabled={(x.value === "run_ai" && !canAi) || (x.value === "run_formula" && !canFormula)}>{x.label}</option>)}</select>
+            {!canAi || !canFormula ? <p className="text-xs text-text-color-muted">{!canAi ? "Add an AI column to schedule AI runs. " : ""}{!canFormula ? "Add a formula column to schedule formulas." : ""}</p> : null}</div>
+          {draft.action_type === "run_formula" && formulas.length > 0 ? (
+            <div className="flex flex-col gap-1"><Label htmlFor="wbs-formula">Formula to recompute</Label>
+              <select id="wbs-formula" className={selectClass} value={draft.config.column_id == null ? "" : String(draft.config.column_id)}
+                onChange={(e) => { const { column_id: _drop, ...rest } = draft.config; setDraft({ ...draft, config: e.target.value ? { ...rest, column_id: Number(e.target.value) } : rest }); }}>
+                <option value="">All formulas</option>{formulas.map((c) => <option key={c.id} value={String(c.id)}>{c.display_name || c.name}</option>)}</select></div>
+          ) : null}
+          {draft.action_type === "crm_import" ? (
+            <div className="grid gap-3 sm:grid-cols-2">
+              {crms.error ? <ApiError error={crms.error} title="Could not load your CRMs" onRetry={() => void crms.refetch()} className="sm:col-span-2" /> : null}
+              {crms.connected && crms.connected.length === 0 ? <p className="text-sm text-text-color-muted sm:col-span-2">No CRM is connected. Connect one in the platform app first.</p> : null}
+              <div className="flex flex-col gap-1"><Label htmlFor="wbs-crm">CRM</Label>
+                <select id="wbs-crm" className={selectClass} value={crm?.provider ?? ""} disabled={!crms.connected?.length}
+                  onChange={(e) => { const c = (crms.connected ?? []).find((x) => x.provider === e.target.value); setConfig(c ? { connection_id: c.connection_id, provider_type: c.provider, limit: draft.config.limit ?? 100 } : { connection_id: undefined, provider_type: undefined }); }}>
+                  <option value="">{crms.connected ? "Choose a CRM" : "Loading..."}</option>{(crms.connected ?? []).map((c) => <option key={c.provider} value={c.provider}>{crmLabel(c.provider)}</option>)}</select></div>
+              <div className="flex flex-col gap-1"><Label htmlFor="wbs-limit">Most records per run</Label>
+                <Input id="wbs-limit" type="number" min={1} max={MAX_CRM_SCHEDULE_LIMIT} value={Number(draft.config.limit ?? 100)} onChange={(e) => setConfig({ limit: clampLimit(Number(e.target.value)) })} />
+                <p className="text-xs text-text-color-muted">1 to {MAX_CRM_SCHEDULE_LIMIT.toLocaleString()} per run.</p></div>
+            </div>
+          ) : null}
+          <div className="flex flex-col gap-1"><Label htmlFor="wbs-freq">How often</Label>
+            <select id="wbs-freq" className={selectClass} value={draft.cadence} onChange={(e) => setDraft({ ...draft, cadence: e.target.value })}>
+              {SCHEDULE_FREQUENCIES.map((x) => <option key={x.value} value={x.value}>{x.label}</option>)}<option value="cron">Custom (cron)</option></select></div>
+          {draft.cadence === "cron" ? (
+            <div className="flex flex-col gap-1"><Label htmlFor="wbs-cron">Cron expression</Label><Input id="wbs-cron" placeholder="30 6 * * 1-5" value={draft.cron} onChange={(e) => setDraft({ ...draft, cron: e.target.value })} />
+              {draft.cron && !validCron(draft.cron) ? <p role="status" className="text-xs text-text-color-muted">{CRON_HINT}</p> : null}</div>
+          ) : null}
+          <div className="flex items-center justify-between gap-3"><Label htmlFor="wbs-on">Start the schedule now</Label><Switch id="wbs-on" aria-label="Start the schedule now" checked={draft.enabled} onCheckedChange={(on) => setDraft({ ...draft, enabled: on })} /></div>
+          {price.error ? <ApiError error={price.error} title="Could not price the AI run" /> : null}
+          {save.error ? <ApiError error={save.error} title="Could not save the schedule" /> : null}
+        </div>
+      </FormSheet>
+
+      <ConfirmSpendDialog open={quote != null} tier="billable" title="Start a recurring AI run"
+        description={affordable
+          ? `This schedule charges up to ${(quote?.required_credits ?? 0).toLocaleString()} credits on every run, for the ${(quote?.estimated_records ?? 0).toLocaleString()} rows waiting now, with nobody in the loop, until you remove or stop it. Each run is checked again against this maximum and refused if it would cost more.`
+          : `Not enough credits: one run needs ${(quote?.required_credits ?? 0).toLocaleString()} and the balance is ${(quote?.available_credits ?? 0).toLocaleString()}.`}
+        estimatedCredits={quote?.required_credits} confirmLabel={affordable ? "Start schedule" : "Not enough credits"} confirming={save.loading}
+        onConfirm={() => { if (quote && affordable) void save.mutate({ d: draft, extra: { approved_max_credits: quote.required_credits, quote_expires_at: quote.quote_expires_at } }); }}
+        onCancel={() => setQuote(null)} />
+      <ConfirmSpendDialog open={removing} tier="destructive" title="Remove this schedule" description="The workbench stops re-running on a timer. Rows and columns are not changed."
+        confirmLabel="Remove schedule" confirming={remove.loading} onConfirm={() => void remove.mutate(undefined)} onCancel={() => setRemoving(false)} />
+    </SectionCard>
+  );
+}

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

@@ -16,13 +16,16 @@
  *   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)
+ *   6. everything inside the grid: see WorkbenchGrid (runs and unlocks are billable and confirmed; filter, sort and delete a column)
+ *   7. getWorkbenchLockedRowCount GET /workbench/tables/{table_id}/locked-row-count   (read; the "Locked rows" tile, 1 credit each to unlock)
+ *   8. an opened table has four tabs (`?tab=`): Data (the grid), Automation (WorkbenchAutomation: auto-enrich, schedule, triggers, pipelines),
+ *      Import (WorkbenchDatafileImport, WorkbenchCrmImport) and Connections (WorkbenchConnections); "Edit details" opens WorkbenchTableSettings
  */
 
 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 { ArrowLeft, Globe, Pencil, Plus, Table2, Trash2, UsersRound } from "lucide-react";
+import { Button, Input, Label, Skeleton, Tabs, TabsContent, TabsList, TabsTrigger } 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";
@@ -46,6 +49,11 @@ import type { WorkbenchTable } from "../lib/workbench-types";
 import { WorkbenchGrid } from "./workbench-grid";
 import { WorkbenchRowDetail } from "./workbench-row-detail";
 import { ScraperPanel, SearchImportPanel } from "./workbench-sources";
+import { WorkbenchAutomation } from "./workbench-automation";
+import { WorkbenchConnections } from "./workbench-connections";
+import { WorkbenchCrmImport } from "./workbench-crm-import";
+import { WorkbenchDatafileImport } from "./workbench-datafile-import";
+import { WorkbenchTableSettings } from "./workbench-table-settings";
 
 export interface WorkbenchScreenProps {
   toolbarActions?: ReactNode;
@@ -60,6 +68,9 @@ const noun = (t: { entity_type?: string | null }) => (t.entity_type === "company
 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 [editing, setEditing] = useState(false);
+  const [tabParam, setTab] = useUrlState("tab");
+  const tab = ["automation", "import", "connections"].includes(tabParam ?? "") ? (tabParam as string) : "data";
   const [rowParam, setRowParam] = useUrlState("row");
   const [view, setView] = useUrlState("view");
   const full = view === "full";
@@ -67,6 +78,9 @@ function OpenTable({ tableId, onBack, renderDetailActions, className }: { tableI
   // 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(); };
+  // Locked rows cost a credit each to unlock; the count is re-read whenever rows change.
+  const locked = useG8Query(async (signal) => (await g8Get<{ locked_count?: number }>(`/workbench/tables/${tableId}/locked-row-count`, undefined, { signal })).data.locked_count ?? null, [tableId, gridKey]);
+  const entity = table?.entity_type === "company" ? "company" : "contact";
   return (
     <ScreenLayout
       className={className}
@@ -77,30 +91,49 @@ function OpenTable({ tableId, onBack, renderDetailActions, className }: { tableI
       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>
+        <Button size="sm" variant="ghost" onClick={() => setEditing(true)}><Pencil className="mr-1 size-4" aria-hidden />Edit details</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 },
+        { label: "Locked rows", value: locked.data != null ? locked.data.toLocaleString() : locked.error ? "Unavailable" : "...", hint: "One credit each to unlock" },
       ] : 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}
-      />
+      <Tabs value={tab} onValueChange={(v) => setTab(v === "data" ? null : v)} className="flex flex-col gap-4">
+        <TabsList aria-label="Workbench sections">
+          <TabsTrigger value="data">Data</TabsTrigger>
+          <TabsTrigger value="automation">Automation</TabsTrigger>
+          <TabsTrigger value="import">Import</TabsTrigger>
+          <TabsTrigger value="connections">Connections</TabsTrigger>
+        </TabsList>
+        <TabsContent value="data" className="mt-0">
+          <SplitView
+            expanded={full} onExpandedChange={(e) => setView(e ? "full" : null)}
+            list={<WorkbenchGrid key={gridKey} tableId={tableId} activeRowId={rowId} onOpenRow={(r) => setRowParam(String(r.id))} onChanged={() => void locked.refetch()} />}
+            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}
+          />
+        </TabsContent>
+        <TabsContent value="automation" className="mt-0"><WorkbenchAutomation tableId={tableId} columns={columns} entityType={entity} autoEnrich={table?.auto_enrich} onChanged={() => void refetch()} /></TabsContent>
+        <TabsContent value="import" className="mt-0 flex flex-col gap-4">
+          <WorkbenchDatafileImport tableId={tableId} columns={columns} autoEnrich={table?.auto_enrich} onImported={changed} />
+          <WorkbenchCrmImport tableId={tableId} entityType={entity} autoEnrich={table?.auto_enrich} onImported={changed} />
+        </TabsContent>
+        <TabsContent value="connections" className="mt-0"><WorkbenchConnections tableId={tableId} columns={columns} /></TabsContent>
+      </Tabs>
+      <WorkbenchTableSettings tableId={tableId} table={table} open={editing} onOpenChange={setEditing} onSaved={() => void refetch()} />
       <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>

package/blocks/workbench/components/workbench-send-to-sequence.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+/**
+ * WorkbenchSendToSequence: enroll workbench rows in a running sequence. Pick the sequence by name, pick (or create) the list the
+ * rows are saved to, then confirm: the dialog counts exactly the people who will be emailed. Locked rows are never sent (their
+ * emails are masked), and a selection with nothing sendable disables the button, because the API treats an omitted row list as
+ * "every row in the table".
+ *
+ * SDK operations, in order:
+ *   1. listSequences                 GET  /sequences?page&limit=100   (read; pages through all, running sequences with a whole-number id only)
+ *   2. listLists / createList        via ListPicker (lists block)       the list the rows are exported to before enrolling
+ *   3. sendWorkbenchRowsToSequence   POST /workbench/tables/{table_id}/send-to-sequence { sequence_id, row_ids, list_id }
+ *        (external: it EMAILS real people on the sequence's schedule; ConfirmSpendDialog with the recipient count)
+ *
+ * The confirm counts `sendable` and the request sends that same array. A sequence id the API cannot take (not a whole number)
+ * is not offered, and a paused or ended sequence is not offered either.
+ */
+
+import { useMemo, useState } from "react";
+import { Mail } from "lucide-react";
+import { Button, 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 { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Get, g8Post } from "@/g8/lib/g8-client";
+import { ListPicker } from "@/g8/lists/components/list-picker";
+import type { ListSummary } from "@/g8/lists/components/list-picker";
+import { rowsOf, sequenceAcceptsPeople, sequenceNumber } from "../lib/automation-types";
+
+export interface WorkbenchSendToSequenceProps {
+  tableId: string;
+  /** Row ids selected in the grid. */
+  rowIds: number[];
+  /** Which of those rows are still locked; they are skipped. */
+  lockedRowIds?: number[];
+  entityType?: "contact" | "company";
+  /** Called after the API accepted the enrollment. */
+  onSent?: () => void;
+  className?: string;
+}
+
+interface SequenceOption { id: number; name: string }
+interface SendResult { exported_count?: number; enrolled_count?: number; message?: string }
+
+const MAX_PAGES = 50;
+
+async function runningSequences(signal: AbortSignal): Promise<SequenceOption[]> {
+  const out: SequenceOption[] = [];
+  for (let page = 1; page <= MAX_PAGES; page++) {
+    const env = await g8Get("/sequences", { page, limit: 100 }, { signal });
+    const rows = rowsOf<{ id?: string | number; name?: string | null; status?: string | null }>(env.data);
+    for (const s of rows) {
+      const id = sequenceNumber(s.id);
+      if (id != null && sequenceAcceptsPeople(s.status)) out.push({ id, name: s.name || "Untitled sequence" });
+    }
+    if (!(env as { pagination?: { has_next?: boolean } }).pagination?.has_next || rows.length === 0) break;
+  }
+  return out;
+}
+
+export function WorkbenchSendToSequence({ tableId, rowIds, lockedRowIds = [], entityType = "contact", onSent, className }: WorkbenchSendToSequenceProps) {
+  const sequences = useG8Query(runningSequences, []);
+  const [sequenceId, setSequenceId] = useState("");
+  const [list, setList] = useState<ListSummary | null>(null);
+  const [confirming, setConfirming] = useState(false);
+  const [result, setResult] = useState<SendResult | null>(null);
+
+  const locked = useMemo(() => new Set(lockedRowIds), [lockedRowIds]);
+  const sendable = useMemo(() => rowIds.filter((id) => !locked.has(id)), [rowIds, locked]);
+  const skipped = rowIds.length - sendable.length;
+  const chosen = (sequences.data ?? []).find((s) => String(s.id) === sequenceId);
+
+  const send = useG8Mutation(
+    async (v: { sequence: SequenceOption; ids: number[]; listId: number }) =>
+      (await g8Post<SendResult>(`/workbench/tables/${tableId}/send-to-sequence`, { sequence_id: v.sequence.id, row_ids: v.ids, list_id: v.listId })).data,
+    { onSuccess: (r) => { setConfirming(false); setResult(r); onSent?.(); }, onError: () => setConfirming(false) },
+  );
+  const ready = chosen != null && list != null && sendable.length > 0;
+
+  return (
+    <div role="group" aria-label="Enroll in a sequence" className={`flex flex-col gap-3 rounded-md border border-border p-3 ${className ?? ""}`}>
+      <p className="flex items-center gap-2 text-sm font-medium"><Mail className="size-4 text-text-color-muted" aria-hidden />Enroll in a sequence</p>
+      {sequences.error ? <ApiError error={sequences.error} title="Could not load sequences" onRetry={() => void sequences.refetch()} /> : null}
+      {sequences.loading && !sequences.data ? <Skeleton className="h-9 w-full" aria-label="Loading sequences" /> : null}
+      {sequences.data && sequences.data.length === 0 ? <EmptyState compact title="No running sequences" description="Launch a sequence first, then enroll workbench rows in it." /> : null}
+      {sequences.data && sequences.data.length > 0 ? (
+        <>
+          <div className="flex flex-col gap-1">
+            <Label htmlFor={`wb-seq-${tableId}`}>Sequence</Label>
+            <select id={`wb-seq-${tableId}`} className="h-9 w-full rounded-md border border-border bg-background px-2 text-sm" value={sequenceId} onChange={(e) => { setSequenceId(e.target.value); setResult(null); }}>
+              <option value="">Choose a sequence</option>
+              {sequences.data.map((s) => <option key={s.id} value={String(s.id)}>{s.name}</option>)}
+            </select>
+          </div>
+          <div className="flex flex-col gap-1">
+            <Label>Save these people to</Label>
+            <ListPicker value={list?.id ?? null} onChange={(l) => { setList(l); setResult(null); }} type={entityType === "company" ? "companies" : "contacts"} allowCreate />
+          </div>
+        </>
+      ) : null}
+      {rowIds.length === 0 ? <p className="text-xs text-text-color-muted">Select rows first.</p> : null}
+      {rowIds.length > 0 && sendable.length === 0 ? <p className="text-xs text-text-color-muted">Every selected row is locked. Unlock them first to enroll them.</p> : null}
+      {sendable.length > 0 && skipped > 0 ? <p className="text-xs text-text-color-muted">{skipped} locked {skipped === 1 ? "row is" : "rows are"} skipped. Unlock {skipped === 1 ? "it" : "them"} first to include {skipped === 1 ? "it" : "them"}.</p> : null}
+      {send.error ? <ApiError error={send.error} title="Could not enroll the rows" /> : null}
+      {result ? <p role="status" className="text-sm text-text-color-muted">Enrolled {result.enrolled_count ?? 0} of {result.exported_count ?? sendable.length} people in the sequence.{result.message ? ` ${result.message}` : ""}</p> : null}
+      <div><Button size="sm" disabled={!ready} loading={send.loading} onClick={() => setConfirming(true)}>Enroll in sequence</Button></div>
+
+      <ConfirmSpendDialog open={confirming && ready} tier="external" title={`Enroll ${sendable.length.toLocaleString()} ${sendable.length === 1 ? "row" : "rows"} in "${chosen?.name ?? ""}"`}
+        description={`The rows are saved to "${list?.title ?? ""}", then each person is enrolled and will be emailed on the sequence's schedule. Locked rows are skipped. Once a message is out it cannot be recalled.`}
+        recipients={sendable.length} confirmLabel="Enroll rows" confirming={send.loading}
+        onConfirm={() => { if (chosen && list) void send.mutate({ sequence: chosen, ids: sendable, listId: list.id }); }} onCancel={() => setConfirming(false)} />
+    </div>
+  );
+}

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

@@ -0,0 +1,53 @@
+"use client";
+
+/**
+ * WorkbenchTableSettings: rename a workbench or change its description, in a side sheet. Sends only the fields that changed. The
+ * handler ignores a null field but applies an empty string, so a cleared description is sent as "" (a null would silently keep the old one).
+ *
+ * SDK operations:
+ *   1. updateWorkbenchTable   PUT /workbench/tables/{table_id} { name?, description? }   (write, undoable by editing again)
+ */
+
+import { useEffect, useState } from "react";
+import { Button, Input, Label, Textarea } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { FormSheet } from "@/g8/components/screen/form-sheet";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { g8Put } from "@/g8/lib/g8-client";
+import type { WorkbenchTable } from "../lib/workbench-types";
+
+export interface WorkbenchTableSettingsProps {
+  tableId: string;
+  /** The loaded table; the form is seeded from it only once it is loaded. */
+  table: Pick<WorkbenchTable, "name" | "description"> | null | undefined;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Called after a save so the caller can re-read the table. */
+  onSaved?: () => void;
+}
+
+export function WorkbenchTableSettings({ tableId, table, open, onOpenChange, onSaved }: WorkbenchTableSettingsProps) {
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  useEffect(() => { if (open && table) { setName(table.name ?? ""); setDescription(table.description ?? ""); } }, [open, table?.name, table?.description]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const originalName = table?.name ?? "";
+  const originalDescription = table?.description ?? "";
+  const nameChanged = name.trim() !== originalName && name.trim().length > 0;
+  const descChanged = description.trim() !== originalDescription;
+  const save = useG8Mutation(async () => (await g8Put(`/workbench/tables/${tableId}`, { ...(nameChanged ? { name: name.trim() } : {}), ...(descChanged ? { description: description.trim() } : {}) })).data, {
+    onSuccess: () => { onOpenChange(false); onSaved?.(); },
+  });
+
+  return (
+    <FormSheet open={open} onOpenChange={onOpenChange} title="Workbench details" description="Rename it or change what it is for."
+      footer={(<><Button variant="ghost" onClick={() => onOpenChange(false)}>Cancel</Button><Button loading={save.loading} disabled={!table || name.trim().length === 0 || (!nameChanged && !descChanged)} onClick={() => void save.mutate(undefined)}>Save details</Button></>)}>
+      <div className="flex flex-col gap-3">
+        <div className="flex flex-col gap-1"><Label htmlFor="wb-set-name">Name</Label><Input id="wb-set-name" value={name} onChange={(e) => setName(e.target.value)} /></div>
+        <div className="flex flex-col gap-1"><Label htmlFor="wb-set-desc">Description</Label><Textarea id="wb-set-desc" rows={3} value={description} onChange={(e) => setDescription(e.target.value)} />
+</div>
+        {save.error ? <ApiError error={save.error} title="Could not save the details" /> : null}
+      </div>
+    </FormSheet>
+  );
+}