@graph8/sdk 0.373.0 → 0.374.0

package/blocks/enrichment/components/enrichment-job-detail.tsx

@@ -10,10 +10,15 @@
  *        read once more with ?include_provider_errors=true when nothing was enriched or some records failed
  *        -> { status, total, completed, successful_enrichments, failed_enrichments, total_credits_used, warnings, provider_errors }
  *   2. cancelEnrichmentJob  POST /enrichment/jobs/{job_id}/cancel   (write, free; records already done keep their data and charge)
+ *   3. pauseEnrichmentJob   POST /enrichment/jobs/{job_id}/pause    (write, free; stops further charges until resumed)
+ *   4. resumeEnrichmentJob  POST /enrichment/jobs/{job_id}/resume   (billable, ConfirmSpendDialog; carries on with, and charges for, the records not yet reached)
+ * The state shown is always the server's: after Pause or Resume the job is read again, never assumed.
  */
 
+import { useState } from "react";
 import { Button } from "@graph8/sdk/ui";
 import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
 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";
@@ -37,6 +42,9 @@ export function EnrichmentJobDetail({ jobId, onDone, className }: EnrichmentJobD
     { intervalMs: 2000, isTerminal: (j) => isJobTerminal(j.status), onDone },
   );
   const cancel = useG8Mutation(() => g8Post(`/enrichment/jobs/${jobId}/cancel`, {}));
+  const [resuming, setResuming] = useState(false);
+  const pause = useG8Mutation(() => g8Post(`/enrichment/jobs/${jobId}/pause`, {}), { onSuccess: () => job.start() });
+  const resume = useG8Mutation(() => g8Post(`/enrichment/jobs/${jobId}/resume`, {}), { onSuccess: () => { setResuming(false); job.start(); }, onError: () => setResuming(false) });
   const j = job.status;
   const problems = job.done && j != null && ((j.successful_enrichments ?? 0) === 0 || (j.failed_enrichments ?? 0) > 0);
   const errors = useG8Query(
@@ -45,6 +53,8 @@ export function EnrichmentJobDetail({ jobId, onDone, className }: EnrichmentJobD
     { enabled: problems },
   );
   const total = j?.total ?? 0;
+  const state = String(j?.status ?? "").toLowerCase();
+  const remaining = Math.max(0, total - (j?.completed ?? 0));
   const pct = total ? Math.min(100, Math.round(((j?.completed ?? 0) / total) * 100)) : 0;
 
   if (job.error && !j) return <ApiError error={job.error} title="Could not read the job" onRetry={() => job.start()} />;
@@ -52,10 +62,15 @@ export function EnrichmentJobDetail({ jobId, onDone, className }: EnrichmentJobD
     <div className={`flex flex-col gap-4 ${className ?? ""}`} role="status">
       <div className="flex items-center gap-2">
         {j ? <StatusPill tone={toneForStatus(j.status)} dot>{humanizeStatus(j.status)}</StatusPill> : <span className="text-sm text-muted-foreground">Loading...</span>}
+        {!job.done && state === "paused" ? <Button size="sm" onClick={() => setResuming(true)}>Resume job</Button> : null}
+        {!job.done && (state === "running" || state === "pending") ? <Button size="sm" variant="outline" loading={pause.loading} onClick={() => void pause.mutate(undefined)}>Pause job</Button> : null}
         {!job.done && j ? <Button size="sm" variant="outline" loading={cancel.loading} onClick={() => void cancel.mutate(undefined)}>Cancel job</Button> : null}
       </div>
       <div className="h-2 overflow-hidden rounded bg-muted" aria-label="Progress"><div className="h-full bg-primary" style={{ width: `${job.done ? 100 : pct}%` }} /></div>
+      {j?.paused_at && state === "paused" ? <p className="text-sm text-muted-foreground">Paused {new Date(j.paused_at).toLocaleString()}. Nothing more is enriched or charged until you resume.</p> : null}
       {cancel.error ? <ApiError error={cancel.error} title="Could not cancel" /> : null}
+      {pause.error ? <ApiError error={pause.error} title="Could not pause" /> : null}
+      {resume.error ? <ApiError error={resume.error} title="Could not resume" /> : null}
       <SectionCard title="Result">
         <KeyValueList columns={2} items={[
           { label: "Job id", value: jobId, mono: true, wide: true },
@@ -73,6 +88,9 @@ export function EnrichmentJobDetail({ jobId, onDone, className }: EnrichmentJobD
           </ul>
         </SectionCard>
       ) : null}
+      <ConfirmSpendDialog open={resuming} tier="billable" title="Resume this job" affected={remaining}
+        description="The job carries on with the records it had not reached and charges for them as it goes. Records already enriched are not charged again. The API does not quote a total for a resume, so no credit figure is shown."
+        confirmLabel="Resume" confirming={resume.loading} onConfirm={() => void resume.mutate(undefined)} onCancel={() => setResuming(false)} />
     </div>
   );
 }

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

@@ -7,10 +7,15 @@
  *   - Look up: find one person or company by email, LinkedIn, name and domain (2 credits only when found) and verify
  *     an email address (1 credit). Nothing is written to a record without a tick.
  *   - Pipelines: the saved provider waterfalls of a list, create and delete them.
+ *   - List pipelines: ordered chains of steps run over a whole list (templates, build, price, run, watch, stop, edit, delete).
+ *   - Auto-enrichment: what a list enriches by itself as records are added, and the workspace-wide switch and merge rule.
+ *   - Jobs: running and recent jobs with live progress; pause, resume or cancel one.
+ *   - Activity: how much ran, how often it worked, which fields it filled.
  *   - Providers: which providers graph8 funds, which need your own key, and what each action costs.
  *
  * Composes: ScreenLayout, StatStrip, SplitView, DetailPanel, SectionCard, KeyValueList, StatusPill (screen kit),
- * BulkEnrichPanel, WaterfallConfig, EnrichButton, EmailVerifyBadge, ContactTable / ContactDetail (crm), ListPicker (lists).
+ * BulkEnrichPanel, WaterfallConfig, ListPipelines, AutoEnrichmentConfigs, AutoEnrichmentSettings, EnrichmentActivity, EnrichButton,
+ * EmailVerifyBadge, ContactTable / ContactDetail (crm), ListPicker (lists). Deep link from a list: `?tab=list-pipelines&list=<list id>`.
  * Provider keys are added in graph8 settings (no API), so the Providers tab links out for them.
  *
  * SDK operations (inside the parts it composes): listEnrichmentProviders, preflightEnrichment (read),
@@ -48,7 +53,11 @@ import { CREDITS_PER_EMAIL_VERIFICATION, CREDITS_PER_FOUND_LOOKUP } from "../lib
 import { BulkEnrichPanel } from "./bulk-enrich-panel";
 import { EmailVerifyBadge } from "./email-verify-badge";
 import { EnrichButton } from "./enrich-button";
+import { AutoEnrichmentConfigs } from "./auto-enrichment-configs";
+import { AutoEnrichmentSettings } from "./auto-enrichment-settings";
+import { EnrichmentActivity } from "./enrichment-activity";
 import { EnrichmentJobDetail } from "./enrichment-job-detail";
+import { ListPipelines } from "./list-pipelines";
 import { WaterfallConfig } from "./waterfall-config";
 import type { WaterfallConfigSummary } from "../lib/enrichment-types";
 import { useBrand, brandUrl } from "@/g8/hooks/use-brand";
@@ -63,7 +72,7 @@ export interface EnrichmentScreenProps {
   className?: string;
 }
 
-const TABS = [{ id: "list", label: "Enrich a list" }, { id: "lookup", label: "Look up" }, { id: "pipelines", label: "Pipelines" }, { id: "jobs", label: "Jobs" }, { id: "providers", label: "Providers" }];
+const TABS = [{ id: "list", label: "Enrich a list" }, { id: "lookup", label: "Look up" }, { id: "pipelines", label: "Pipelines" }, { id: "list-pipelines", label: "List pipelines" }, { id: "auto", label: "Auto-enrichment" }, { id: "jobs", label: "Jobs" }, { id: "activity", label: "Activity" }, { id: "providers", label: "Providers" }];
 const FIELD = "flex flex-col gap-1";
 
 
@@ -267,13 +276,14 @@ export function EnrichmentScreen({ toolbarActions, renderDetailActions, extraDet
   const catalog = useProviders(tab === "providers");
   const [jobParam, setJobParam] = useUrlState("job");
   const [pipelineParam, setPipelineParam] = useUrlState("pipeline");
+  const [, setListPipelineParam] = useUrlState("lp");
   const [view, setView] = useUrlState("view");
   const full = view === "full";
   const [jobs, setJobs] = useState<string[]>([]);
   useEffect(() => setJobs(loadJobs()), []);
   const started = (id: string) => setJobs((cur) => { const next = [id, ...cur.filter((x) => x !== id)]; rememberJobs(next); return next; });
   const listId = listParam ? Number(listParam) : null;
-  const pick = (id: number) => { setListParam(String(id)); setPicked([]); setRunShown(false); setOpened(null); setPipelineParam(null); };
+  const pick = (id: number) => { setListParam(String(id)); setPicked([]); setRunShown(false); setOpened(null); setPipelineParam(null); setListPipelineParam(null); };
 
   const stats = tab === "providers" && catalog.providers.length > 0 ? [
     { label: "Providers", value: catalog.providers.length },
@@ -287,7 +297,28 @@ export function EnrichmentScreen({ toolbarActions, renderDetailActions, extraDet
   const openPipeline = (loaded.listId === listId ? loaded.configs : []).find((c) => c.column_id === pipelineParam);
   if (tab === "lookup") body = <LookupTab />;
   else if (tab === "jobs") body = <JobsTab jobs={jobs} jobParam={jobParam} setJobParam={setJobParam} />;
+  else if (tab === "activity") body = <EnrichmentActivity />;
   else if (tab === "providers") body = <ProvidersTab settingsUrl={providerSettingsUrl} />;
+  else if (tab === "list-pipelines" || tab === "auto") {
+    body = (
+      <div className="grid gap-4 lg:grid-cols-[18rem_minmax(0,1fr)]">
+        <ListRail listId={listId} onPick={pick} />
+        {listId == null ? (
+          <EmptyState icon={<Sparkles className="size-6" aria-hidden />} title="Choose a list" description={tab === "auto" ? "Automatic enrichment belongs to a list. Pick one to see what it runs on new records." : "Pipelines belong to a list. Pick one to see, build and run them."} />
+        ) : tab === "auto" ? (
+          <div className="flex min-w-0 flex-col gap-6">
+            <AutoEnrichmentConfigs key={listId} listId={listId} />
+            <section aria-label="Workspace settings" className="flex flex-col gap-2">
+              <h3 className="text-sm font-medium">Workspace-wide settings</h3>
+              <AutoEnrichmentSettings />
+            </section>
+          </div>
+        ) : (
+          <div className="min-w-0"><ListPipelines key={listId} listId={listId} /></div>
+        )}
+      </div>
+    );
+  }
   else {
     body = (
       <div className="grid gap-4 lg:grid-cols-[18rem_minmax(0,1fr)]">

package/blocks/enrichment/components/list-pipelines.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+/**
+ * ListPipelines: the pipelines of one list (ordered chains of enrichment steps run over the whole list) with the open
+ * pipeline beside them. Pick a ready-made template or build one, then open it to price it, run it, watch it and stop it.
+ *
+ * Composes PipelineDetail (run, stop, on/off, delete, history), PipelineEditor (create, edit) and PipelineTemplates.
+ * The open pipeline is in the URL (`?lp=<pipeline id>`) so a refresh or a shared link comes back to it.
+ *
+ * SDK operations (the list read here; the rest are inside the parts above):
+ *   1. listListPipelines  GET /enrichment/lists/{list_id}/pipelines  (read, free)  every pipeline of the list with its latest run
+ *
+ * The list is not paged by the API. A run that is active is re-read after it settles, so on/off and last-run state
+ * always come from the server, never from what this screen assumes.
+ */
+
+import { useState } from "react";
+import { Layers, Plus, Sparkles } from "lucide-react";
+import { Button } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { EmptyState } from "@/g8/components/empty-state";
+import { DetailPanel } from "@/g8/components/screen/detail-panel";
+import { SectionCard } from "@/g8/components/screen/section-card";
+import { SplitView } from "@/g8/components/screen/split-view";
+import { StatusPill, humanizeStatus, toneForStatus } from "@/g8/components/screen/status-pill";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { useUrlState } from "@/g8/hooks/use-url-state";
+import { g8Get } from "@/g8/lib/g8-client";
+import { plural } from "@/g8/lib/plural";
+import { enabledSteps, itemsOf } from "../lib/pipeline-types";
+import type { ListPipeline } from "../lib/pipeline-types";
+import { PipelineDetail } from "./pipeline-detail";
+import { PipelineEditor } from "./pipeline-editor";
+import { PipelineTemplates } from "./pipeline-templates";
+
+export interface ListPipelinesProps {
+  listId: number;
+  /** Called after any change, for example to refresh a sibling table. */
+  onChanged?: () => void;
+  className?: string;
+}
+
+export function ListPipelines({ listId, onChanged, className }: ListPipelinesProps) {
+  const [open, setOpen] = useUrlState("lp");
+  const [view, setView] = useUrlState("view");
+  const [editing, setEditing] = useState<ListPipeline | "new" | null>(null);
+  const [templates, setTemplates] = useState(false);
+  const pipelines = useG8Query(async (signal) => itemsOf<ListPipeline>((await g8Get(`/enrichment/lists/${listId}/pipelines`, undefined, { signal })).data), [listId]);
+  const rows = pipelines.data ?? [];
+  const selected = rows.find((p) => p.id === open);
+  const full = view === "full";
+  const changed = () => { void pipelines.refetch(); onChanged?.(); };
+
+  const list = (
+    <SectionCard title="List pipelines" description="Each one runs its steps, in order, over every record on this list."
+      actions={<div className="flex gap-2"><Button size="sm" variant="outline" onClick={() => setTemplates(true)}><Sparkles className="mr-1 size-4" aria-hidden />Templates</Button><Button size="sm" onClick={() => setEditing("new")}><Plus className="mr-1 size-4" aria-hidden />New pipeline</Button></div>} flush>
+      {pipelines.error ? <div className="p-3"><ApiError error={pipelines.error} title="Could not load pipelines" onRetry={() => void pipelines.refetch()} /></div> : null}
+      {!pipelines.error && pipelines.loading && !pipelines.data ? <p className="p-4 text-sm text-muted-foreground">Loading pipelines...</p> : null}
+      {!pipelines.error && pipelines.data && rows.length === 0 ? (
+        <EmptyState icon={<Layers className="size-6" aria-hidden />} title="No pipelines on this list" description="Start from a template, or build your own from the enrichment steps this list can use."
+          action={<Button size="sm" onClick={() => setTemplates(true)}>Start from a template</Button>} />
+      ) : null}
+      <ul className="divide-y">{(pipelines.error ? [] : rows).map((p) => (
+        <li key={p.id}>
+          <button type="button" aria-label={`Open pipeline ${p.name}`} className={`flex w-full items-center justify-between gap-3 px-4 py-3 text-left ${p.id === open ? "bg-muted/50" : ""}`} onClick={() => setOpen(p.id)}>
+            <span className="min-w-0">
+              <span className="block truncate text-sm font-medium">{p.name}</span>
+              <span className="block text-xs text-muted-foreground">{plural(enabledSteps(p).length, "step")}</span>
+            </span>
+            <span className="flex shrink-0 items-center gap-2">
+              {p.last_run ? <StatusPill tone={toneForStatus(p.last_run.status)} dot>{humanizeStatus(p.last_run.status)}</StatusPill> : null}
+              <StatusPill tone={p.enabled ? "positive" : "neutral"}>{p.enabled ? "On" : "Off"}</StatusPill>
+            </span>
+          </button>
+        </li>
+      ))}</ul>
+    </SectionCard>
+  );
+
+  return (
+    <div className={className}>
+      <SplitView list={list} expanded={full} onExpandedChange={(e) => setView(e ? "full" : null)} detailOpen={selected != null} onCloseDetail={() => setOpen(null)} detailTitle="Pipeline"
+        detail={selected ? (
+          <DetailPanel key={selected.id} title={selected.name} subtitle={plural(selected.steps.length, "step")} onClose={() => setOpen(null)}
+            onExpand={full ? undefined : () => setView("full")} onCollapse={full ? () => setView(null) : undefined}
+            badges={<StatusPill tone={selected.enabled ? "positive" : "neutral"} dot>{selected.enabled ? "On" : "Off"}</StatusPill>}>
+            <PipelineDetail key={selected.id} listId={listId} pipeline={selected} onChanged={changed} onEdit={() => setEditing(selected)} onDeleted={() => { setOpen(null); changed(); }} />
+          </DetailPanel>
+        ) : null} />
+      {editing ? (
+        <PipelineEditor key={editing === "new" ? "new" : editing.id} listId={listId} pipeline={editing === "new" ? undefined : editing} open onOpenChange={(o) => { if (!o) setEditing(null); }}
+          onSaved={(saved) => { setOpen(saved.id); changed(); }} />
+      ) : null}
+      <PipelineTemplates listId={listId} open={templates} onOpenChange={setTemplates} existing={rows} onAdded={(p) => { setOpen(p.id); changed(); }} />
+    </div>
+  );
+}

package/blocks/enrichment/components/pipeline-detail.tsx

@@ -0,0 +1,214 @@
+"use client";
+
+/**
+ * PipelineDetail: one list pipeline in full, and everything you can do to it: run it (priced first), watch the run,
+ * stop it, turn it on or off, edit it, delete it, and read its past runs.
+ *
+ * SDK operations, in order:
+ *   1. listPipelineStepOptions  GET    /enrichment/lists/{list_id}/pipeline-step-options                (read)    names the steps
+ *   2. estimateListPipeline     POST   /enrichment/lists/{list_id}/pipelines/{id}/estimate              (read, FREE) prices the run for THIS list
+ *        -> { can_run, required_credits (an upper bound: run conditions are ignored), available_credits, estimated_evaluations, steps[], reason }
+ *   3. runListPipeline          POST   /enrichment/lists/{list_id}/pipelines/{id}/runs                  (billable, ConfirmSpendDialog)
+ *        charges per record per step; also turns a pipeline that is off on, as the app does
+ *   4. getPipelineRun           GET    /enrichment/lists/pipeline-runs/{run_id}                         (read) polled with useJobPoll
+ *   5. cancelListPipelineRun    POST   /enrichment/lists/{list_id}/pipelines/{id}/cancel                (write, free) the step in flight finishes
+ *   6. listListPipelineRuns     GET    /enrichment/lists/{list_id}/pipelines/{id}/runs                  (read) the latest runs, newest first
+ *   7. setPipelineEnabled       POST   /enrichment/lists/{list_id}/pipelines/{id}/enabled { enabled }   (billable tier, ConfirmSpendDialog)
+ *        a flag only: in this API a pipeline runs when you run it, so turning it on does not start or charge anything
+ *   8. deleteListPipeline       DELETE /enrichment/lists/{list_id}/pipelines/{id}                       (destructive, ConfirmSpendDialog; 409 while running)
+ *
+ * The price in the run confirm is the estimate's own number for this exact list and pipeline, never a constant. The
+ * confirm opens only after the estimate has loaded; a run the estimate refuses (`can_run: false`) shows the API's
+ * reason and never reaches the confirm.
+ */
+
+import { useState } from "react";
+import { Pencil, Play, Square, Trash2 } from "lucide-react";
+import { Button } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { useConfirmAction } from "@/g8/components/confirmed-action";
+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 { useJobPoll } from "@/g8/hooks/use-job-poll";
+import { g8Delete, g8Get, g8Post } from "@/g8/lib/g8-client";
+import { plural } from "@/g8/lib/plural";
+import { enabledSteps, itemsOf, percentOf, runBlockedReason, runIsActive, skipReasonLabel, stepLabel } from "../lib/pipeline-types";
+import type { ListPipeline, PipelineEstimate, PipelineRun, StepOption, StepProgress } from "../lib/pipeline-types";
+
+export interface PipelineDetailProps {
+  listId: number;
+  pipeline: ListPipeline;
+  /** Reload the pipelines after anything changed (a run started or finished, on/off, stop). */
+  onChanged: () => void;
+  onEdit: () => void;
+  /** Called after the pipeline was deleted. */
+  onDeleted: () => void;
+  className?: string;
+}
+
+const base = (listId: number, id: string) => `/enrichment/lists/${listId}/pipelines/${id}`;
+const when = (iso?: string | null) => (iso ? new Date(iso).toLocaleString(undefined, { dateStyle: "medium", timeStyle: "short" }) : "");
+
+function StepRows({ progress }: { progress: StepProgress[] }) {
+  if (progress.length === 0) return <p className="text-sm text-muted-foreground">No step has started yet.</p>;
+  return (
+    <ul className="flex flex-col gap-3" aria-label="Run progress">
+      {progress.map((p, i) => {
+        const pct = percentOf(p.processed_records, p.total_records);
+        const skipped = Object.entries(p.skipped_by_reason ?? {}).filter(([, n]) => n > 0);
+        return (
+          <li key={`${p.step_index}-${i}`} className="flex flex-col gap-1">
+            <div className="flex items-center justify-between gap-2 text-sm">
+              <span className="truncate font-medium">{p.name || `Step ${p.step_index + 1}`}</span>
+              <span className="flex items-center gap-2 text-xs text-muted-foreground">
+                <span className="tabular-nums">{pct == null ? "-" : `${(p.processed_records ?? 0).toLocaleString()} of ${(p.total_records ?? 0).toLocaleString()}`}</span>
+                {p.status ? <StatusPill tone={toneForStatus(p.status)} dot>{humanizeStatus(p.status)}</StatusPill> : null}
+              </span>
+            </div>
+            <div className="h-1.5 overflow-hidden rounded bg-muted" aria-label={`Step ${p.step_index + 1} progress`}><div className="h-full bg-primary" style={{ width: `${pct ?? 0}%` }} /></div>
+            <p className="text-xs text-muted-foreground tabular-nums">{(p.successful ?? 0).toLocaleString()} enriched, {(p.failed ?? 0).toLocaleString()} failed{skipped.map(([r, n]) => `, ${n.toLocaleString()} ${skipReasonLabel(r)}`).join("")}</p>
+            {p.note ? <p className="text-xs text-muted-foreground">{p.note}</p> : null}
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
+/** Polls one active run (a fresh instance per run id) and shows its steps; reports when it is no longer running. */
+function RunStatus({ runId, initial, onSettled }: { runId: string; initial?: PipelineRun | null; onSettled: () => void }) {
+  const poll = useJobPoll<PipelineRun>(
+    async (signal) => (await g8Get<PipelineRun>(`/enrichment/lists/pipeline-runs/${runId}`, undefined, { signal })).data,
+    { intervalMs: 2000, isTerminal: (r) => !runIsActive(r.status), onDone: onSettled },
+  );
+  const run = poll.status ?? initial ?? undefined;
+  if (poll.error && !run) return <ApiError error={poll.error} title="Could not read the run" onRetry={() => poll.start()} />;
+  return (
+    <div className="flex flex-col gap-2" role="status">
+      <div className="flex items-center gap-2 text-sm">
+        {run ? <StatusPill tone={toneForStatus(run.status)} dot>{humanizeStatus(run.status)}</StatusPill> : <span className="text-muted-foreground">Starting...</span>}
+        {run ? <span className="text-xs text-muted-foreground">Step {Math.min(run.current_index + 1, run.total_steps)} of {run.total_steps}</span> : null}
+      </div>
+      {poll.error && run ? <p role="alert" className="text-xs text-destructive">Could not refresh the run. Showing the last known progress.</p> : null}
+      {run?.error ? <p role="alert" className="text-sm text-destructive">{run.error}</p> : null}
+      <StepRows progress={run?.step_progress ?? []} />
+    </div>
+  );
+}
+
+export function PipelineDetail({ listId, pipeline, onChanged, onEdit, onDeleted, className }: PipelineDetailProps) {
+  const [historyKey, setHistoryKey] = useState(0);
+  const [started, setStarted] = useState<string | null>(null);
+  const [blocked, setBlocked] = useState<string | null>(null);
+  const { ask, dialog, failure } = useConfirmAction();
+  const options = useG8Query(async (signal) => itemsOf<StepOption>((await g8Get(`/enrichment/lists/${listId}/pipeline-step-options`, undefined, { signal })).data), [listId], { key: ["enrichment", "step-options", listId], staleTime: 30_000 });
+  const history = useG8Query(async (signal) => itemsOf<PipelineRun>((await g8Get(`${base(listId, pipeline.id)}/runs`, undefined, { signal })).data, "runs"), [listId, pipeline.id, historyKey]);
+  const price = useG8Mutation(async () => (await g8Post<PipelineEstimate>(`${base(listId, pipeline.id)}/estimate`, {})).data);
+  const stop = useG8Mutation(async () => g8Post(`${base(listId, pipeline.id)}/cancel`, {}), { onSuccess: () => { setStarted(null); setHistoryKey((k) => k + 1); onChanged(); } });
+
+  const menu = options.data ?? [];
+  const active = runIsActive(pipeline.last_run?.status) || started != null;
+  const runId = started ?? (runIsActive(pipeline.last_run?.status) ? pipeline.last_run?.run_id ?? null : null);
+  const live = enabledSteps(pipeline);
+  const reason = active ? "A run is in progress." : runBlockedReason(pipeline);
+  const settled = () => { setStarted(null); setHistoryKey((k) => k + 1); onChanged(); };
+
+  const startRun = (est: PipelineEstimate) => ask({
+    tier: "billable",
+    title: `Run "${pipeline.name}" over this list`,
+    estimatedCredits: est.required_credits,
+    confirmLabel: "Run pipeline",
+    description: (
+      <div className="flex flex-col gap-2">
+        <p>{plural(est.estimated_evaluations, "record check")} across {plural(est.steps.length, "step")}. This is an upper bound: run conditions are ignored when pricing, so the real charge can be lower.</p>
+        <ul className="list-disc pl-5">{est.steps.map((s) => <li key={s.step_id}>{s.name}: {plural(s.estimated_records, "record")}, up to {plural(s.required_credits, "credit")}</li>)}</ul>
+        <p>Your balance is {est.available_credits.toLocaleString()} credits{est.available_credits < est.required_credits ? ", which may not cover every step: the run stops cleanly when credits run out" : ""}.</p>
+        {pipeline.enabled ? null : <p>This also turns the pipeline on.</p>}
+      </div>
+    ),
+    run: async () => { const res = await g8Post<PipelineRun>(`${base(listId, pipeline.id)}/runs`, {}); setStarted(res.data.run_id); onChanged(); },
+  });
+  const onRun = async () => {
+    setBlocked(null);
+    const est = await price.mutate(undefined);
+    if (!est) return;
+    if (est.can_run) startRun(est);
+    else setBlocked(est.reason || "The API did not give a reason this run cannot start.");
+  };
+  const setEnabled = (next: boolean) => ask({
+    tier: "billable",
+    title: `${next ? "Turn on" : "Turn off"} "${pipeline.name}"`,
+    confirmLabel: next ? "Turn on" : "Turn off",
+    description: next ? "Marks the pipeline as on. It does not start a run and charges nothing by itself: a run starts when you press Run, and shows its price first." : "Marks the pipeline as off. Running it again turns it back on. A run already in progress is not stopped.",
+    run: () => g8Post(`${base(listId, pipeline.id)}/enabled`, { enabled: next }),
+    onDone: onChanged,
+  });
+  const remove = () => ask({
+    tier: "destructive",
+    title: `Delete pipeline "${pipeline.name}"`,
+    description: "Its steps and run history go. Values it already wrote stay on the records. A running pipeline cannot be deleted.",
+    affected: 1,
+    tolerateStatus: [404],
+    run: () => g8Delete(base(listId, pipeline.id)),
+    onDone: onDeleted,
+  });
+
+  return (
+    <div className={`flex flex-col gap-4 ${className ?? ""}`}>
+      <div className="flex flex-wrap items-center gap-2">
+        <Button size="sm" disabled={reason != null || price.loading} loading={price.loading} onClick={() => void onRun()}><Play className="mr-1 size-4" aria-hidden />{price.loading ? "Pricing..." : "Run"}</Button>
+        {active ? <Button size="sm" variant="outline" loading={stop.loading} onClick={() => void stop.mutate(undefined)}><Square className="mr-1 size-4" aria-hidden />Stop run</Button> : null}
+        <Button size="sm" variant="outline" disabled={active} onClick={() => setEnabled(!pipeline.enabled)}>{pipeline.enabled ? "Turn off" : "Turn on"}</Button>
+        <Button size="sm" variant="outline" disabled={active} onClick={onEdit}><Pencil className="mr-1 size-4" aria-hidden />Edit</Button>
+        <Button size="sm" variant="ghost" disabled={active} onClick={remove}><Trash2 className="mr-1 size-4" aria-hidden />Delete</Button>
+      </div>
+      {reason ? <p className="text-xs text-muted-foreground">{reason}</p> : null}
+      {blocked ? <p role="alert" className="text-sm text-destructive">Cannot run: {blocked}</p> : null}
+      {price.error ? <ApiError error={price.error} title="Could not price the run" /> : null}
+      {stop.error ? <ApiError error={stop.error} title="Could not stop the run" /> : null}
+      {failure ? <ApiError error={failure} title="That did not go through" /> : null}
+
+      <SectionCard title="Steps" description={`${plural(live.length, "step")} will run, in this order.`}>
+        <ol className="flex flex-col gap-2" aria-label="Pipeline steps">
+          {pipeline.steps.map((s, i) => (
+            <li key={s.id} className="flex flex-col gap-0.5 text-sm">
+              <span className="flex items-center gap-2"><span className="w-5 text-muted-foreground">{i + 1}.</span><span className="font-medium">{stepLabel(s, menu)}</span>{s.enabled === false ? <StatusPill tone="neutral">Off</StatusPill> : null}</span>
+              <span className="pl-7 text-xs text-muted-foreground">{s.skip_existing_values === false ? "Overwrites existing values" : "Fills only empty values"}{s.skip_recently_enriched === false ? "" : ", skips records enriched recently"}{s.run_condition ? `. Runs only when: ${s.run_condition}` : ""}</span>
+            </li>
+          ))}
+        </ol>
+      </SectionCard>
+
+      {runId ? (
+        <SectionCard title="Current run"><RunStatus key={runId} runId={runId} initial={pipeline.last_run} onSettled={settled} /></SectionCard>
+      ) : pipeline.last_run ? (
+        <SectionCard title="Last run" description={when(pipeline.last_run.started_at)}>
+          <div className="flex flex-col gap-2">
+            <StatusPill tone={toneForStatus(pipeline.last_run.status)} dot>{humanizeStatus(pipeline.last_run.status)}</StatusPill>
+            {pipeline.last_run.error ? <p role="alert" className="text-sm text-destructive">{pipeline.last_run.error}</p> : null}
+            <StepRows progress={pipeline.last_run.step_progress ?? []} />
+          </div>
+        </SectionCard>
+      ) : <p className="text-sm text-muted-foreground">This pipeline has not run yet.</p>}
+
+      <SectionCard title="Run history" description="The latest runs, newest first." flush>
+        {history.error ? <div className="p-3"><ApiError error={history.error} title="Could not load run history" onRetry={() => void history.refetch()} /></div> : null}
+        {!history.error && history.loading && !history.data ? <p className="p-4 text-sm text-muted-foreground">Loading runs...</p> : null}
+        {!history.error && history.data && history.data.length === 0 ? <p className="p-4 text-sm text-muted-foreground">No finished runs yet.</p> : null}
+        <ul className="divide-y">{(history.error ? [] : history.data ?? []).map((r) => (
+          <li key={r.run_id} className="flex items-center justify-between gap-2 px-4 py-2 text-sm">
+            <span>{when(r.started_at) || "Run"}</span>
+            <StatusPill tone={toneForStatus(r.status)} dot>{humanizeStatus(r.status)}</StatusPill>
+          </li>
+        ))}</ul>
+      </SectionCard>
+
+      <KeyValueList columns={2} items={[{ label: "State", value: pipeline.enabled ? "On" : "Off" }, { label: "Created", value: when(pipeline.created_at) }]} />
+      <ConfirmSpendDialog {...dialog} />
+    </div>
+  );
+}

package/blocks/enrichment/components/pipeline-editor.tsx

@@ -0,0 +1,144 @@
+"use client";
+
+/**
+ * PipelineEditor: create or edit a list pipeline (an ordered chain of enrichment steps that runs over a whole list)
+ * in a side sheet. Steps are picked from the configs this list can already use (AI groups and provider waterfalls);
+ * each step can be turned off, told to fill only empty values, or to skip recently enriched records.
+ *
+ * SDK operations, in order:
+ *   1. listPipelineStepOptions  GET  /enrichment/lists/{list_id}/pipeline-step-options   (read, free)  the menu steps are picked from
+ *   2. createListPipeline       POST /enrichment/lists/{list_id}/pipelines               (billable tier; saved TURNED OFF, nothing runs)
+ *   3. updateListPipeline       PUT  /enrichment/lists/{list_id}/pipelines/{pipeline_id} (billable tier; replaces the steps, keeps on/off)
+ * Both saves go through ConfirmSpendDialog. Saving never runs the pipeline and charges nothing in this API: a run is a
+ * separate, priced step (see PipelineDetail). The dialog says so, because its generic tier note talks about credits.
+ *
+ * An edit seeds from the pipeline row the list already loaded (a full record) and sends the whole step list back with
+ * every field of every step kept (run conditions and builder state included), changing only what was edited. Saving
+ * is disabled until the step menu has loaded, and while nothing changed.
+ */
+
+import { useState } from "react";
+import { ArrowDown, ArrowUp, Trash2 } from "lucide-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 { FormSheet } from "@/g8/components/screen/form-sheet";
+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 { g8Get, g8Post, g8Put } from "@/g8/lib/g8-client";
+import { plural } from "@/g8/lib/plural";
+import { itemsOf, moveItem, pipelineChanged, savePayload, stepFromOption, stepLabel } from "../lib/pipeline-types";
+import type { ListPipeline, PipelineStep, StepOption } from "../lib/pipeline-types";
+
+export interface PipelineEditorProps {
+  listId: number;
+  /** The pipeline to edit; omit to create a new one. */
+  pipeline?: ListPipeline;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Called with the saved pipeline after the API accepted it. */
+  onSaved?: (pipeline: ListPipeline) => void;
+}
+
+const MAX_STEPS = 20;
+const toggle = "flex items-center gap-2 text-xs text-muted-foreground";
+
+export function PipelineEditor({ listId, pipeline, open, onOpenChange, onSaved }: PipelineEditorProps) {
+  const [name, setName] = useState(pipeline?.name ?? "");
+  const [steps, setSteps] = useState<PipelineStep[]>(() => (pipeline?.steps ?? []).map((s) => ({ ...s })));
+  const [confirming, setConfirming] = useState(false);
+  const [pick, setPick] = useState("");
+  const options = useG8Query(async (signal) => itemsOf<StepOption>((await g8Get(`/enrichment/lists/${listId}/pipeline-step-options`, undefined, { signal })).data), [listId], { enabled: open, key: ["enrichment", "step-options", listId], staleTime: 30_000 });
+  const menu = options.data ?? [];
+  const editing = pipeline != null;
+  const save = useG8Mutation(
+    async () => {
+      const body = savePayload(name, steps);
+      const res = editing
+        ? await g8Put<ListPipeline>(`/enrichment/lists/${listId}/pipelines/${pipeline.id}`, body)
+        : await g8Post<ListPipeline>(`/enrichment/lists/${listId}/pipelines`, body);
+      return res.data;
+    },
+    { onSuccess: (saved) => { setConfirming(false); onSaved?.(saved); onOpenChange(false); }, onError: () => setConfirming(false) },
+  );
+
+  const available = menu.filter((o) => !steps.some((s) => s.config_ref === o.config_ref && s.type === o.type));
+  const patch = (i: number, change: Partial<PipelineStep>) => setSteps((cur) => cur.map((s, at) => (at === i ? { ...s, ...change } : s)));
+  const addStep = () => {
+    const option = available.find((o) => `${o.type}:${o.config_ref}` === pick);
+    if (!option) return;
+    setSteps((cur) => [...cur, stepFromOption(option, cur.map((s) => s.id))]);
+    setPick("");
+  };
+  const valid = name.trim().length > 0 && name.trim().length <= 255 && steps.length > 0 && steps.length <= MAX_STEPS;
+  const dirty = editing ? pipelineChanged(pipeline, name, steps) : true;
+  const ready = valid && dirty && !options.loading && !options.error;
+
+  return (
+    <FormSheet
+      open={open}
+      onOpenChange={onOpenChange}
+      title={editing ? `Edit ${pipeline.name}` : "New list pipeline"}
+      description="Steps run in order over every record on the list. Saving does not run anything."
+      width="lg"
+      footer={<>
+        <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>Cancel</Button>
+        <Button type="button" disabled={!ready} onClick={() => setConfirming(true)}>{editing ? "Save changes" : "Save pipeline"}</Button>
+      </>}
+    >
+      <div className="flex flex-col gap-1">
+        <Label htmlFor="pl-name">Name</Label>
+        <Input id="pl-name" value={name} maxLength={255} onChange={(e) => setName(e.target.value)} />
+      </div>
+      {options.error ? <ApiError error={options.error} title="Could not load the steps you can use" onRetry={() => void options.refetch()} /> : null}
+      <section className="flex flex-col gap-2" aria-label="Steps">
+        <h3 className="text-sm font-medium">Steps</h3>
+        {steps.length === 0 ? <p className="text-sm text-muted-foreground">Add at least one step.</p> : null}
+        <ol className="flex flex-col gap-2">
+          {steps.map((s, i) => (
+            <li key={s.id} className="rounded-md border p-3" data-testid="editor-step">
+              <div className="flex items-center gap-2">
+                <span className="w-5 text-sm text-muted-foreground">{i + 1}.</span>
+                <span className="min-w-0 flex-1 truncate text-sm font-medium">{stepLabel(s, menu)}</span>
+                <StatusPill tone="neutral">{s.type === "ai" ? "AI" : "Providers"}</StatusPill>
+                <Button type="button" variant="ghost" size="sm" aria-label={`Move step ${i + 1} up`} disabled={i === 0} onClick={() => setSteps((cur) => moveItem(cur, i, -1))}><ArrowUp className="size-4" aria-hidden /></Button>
+                <Button type="button" variant="ghost" size="sm" aria-label={`Move step ${i + 1} down`} disabled={i === steps.length - 1} onClick={() => setSteps((cur) => moveItem(cur, i, 1))}><ArrowDown className="size-4" aria-hidden /></Button>
+                <Button type="button" variant="ghost" size="sm" aria-label={`Remove step ${i + 1}`} onClick={() => setSteps((cur) => cur.filter((_, at) => at !== i))}><Trash2 className="size-4" aria-hidden /></Button>
+              </div>
+              <div className="mt-2 flex flex-col gap-1 pl-7">
+                <label className={toggle}><input type="checkbox" checked={s.enabled !== false} onChange={(e) => patch(i, { enabled: e.target.checked })} /> Run this step</label>
+                <label className={toggle}><input type="checkbox" checked={s.skip_existing_values !== false} onChange={(e) => patch(i, { skip_existing_values: e.target.checked })} /> Fill only empty values</label>
+                <label className={toggle}><input type="checkbox" checked={s.skip_recently_enriched !== false} onChange={(e) => patch(i, { skip_recently_enriched: e.target.checked })} /> Skip records enriched recently</label>
+                {s.run_condition ? <p className="text-xs text-muted-foreground">Runs only when: {s.run_condition}</p> : null}
+              </div>
+            </li>
+          ))}
+        </ol>
+        <div className="flex items-end gap-2">
+          <div className="flex min-w-0 flex-1 flex-col gap-1">
+            <Label htmlFor="pl-add">Add a step</Label>
+            <select id="pl-add" className="h-9 rounded-md border bg-background px-2 text-sm" value={pick} disabled={options.loading || steps.length >= MAX_STEPS} onChange={(e) => setPick(e.target.value)}>
+              <option value="">{options.loading ? "Loading steps..." : available.length ? "Choose a step" : "No more steps to add"}</option>
+              {available.map((o) => <option key={`${o.type}:${o.config_ref}`} value={`${o.type}:${o.config_ref}`}>{o.name}{o.is_qualification ? " (qualification)" : ""}</option>)}
+            </select>
+          </div>
+          <Button type="button" variant="outline" disabled={!pick} onClick={addStep}>Add step</Button>
+        </div>
+        {!options.loading && !options.error && menu.length === 0 ? <p className="text-xs text-muted-foreground">This list has no enrichment configs yet. Create a provider waterfall in the Pipelines tab, then come back.</p> : null}
+        {steps.length >= MAX_STEPS ? <p className="text-xs text-muted-foreground">A pipeline can have at most {MAX_STEPS} steps.</p> : null}
+      </section>
+      {save.error ? <ApiError error={save.error} title="Could not save the pipeline" /> : null}
+      <ConfirmSpendDialog
+        open={confirming}
+        tier="billable"
+        title={editing ? `Save changes to "${name.trim()}"` : `Save pipeline "${name.trim()}"`}
+        description={`${editing ? `Replaces the pipeline's steps with the ${plural(steps.length, "step")} shown; it stays ${pipeline.enabled ? "on" : "off"}. ` : `Saves ${plural(steps.length, "step")}, turned off. `}Saving does not run the pipeline and charges nothing. You see the price before every run.`}
+        confirmLabel="Save"
+        confirming={save.loading}
+        onConfirm={() => void save.mutate(undefined)}
+        onCancel={() => setConfirming(false)}
+      />
+    </FormSheet>
+  );
+}