@graph8/sdk 0.370.0 → 0.374.0

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

@@ -7,14 +7,19 @@
  *   - 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),
- * startEnrichment (billable, ConfirmSpendDialog), getEnrichmentJob, cancelEnrichmentJob, lookupPerson / lookupCompany
+ * createDefaultWaterfallConfig + runWaterfallPipeline (billable, ConfirmSpendDialog), getEnrichmentJob, cancelEnrichmentJob, lookupPerson / lookupCompany
  * (billable, confirmed), verifyEmail (billable, confirmed), listWaterfallConfigs, createDefaultWaterfallConfig (billable,
  * confirmed), deleteWaterfallConfig (destructive, confirmed), listContacts, getContact.
  */
@@ -31,7 +36,13 @@ import { SplitView } from "@/g8/components/screen/split-view";
 import { ScreenLayout } from "@/g8/components/screen/screen-layout";
 import { SectionCard } from "@/g8/components/screen/section-card";
 import { StatusPill } 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 { CompanyPicker } from "@/g8/pickers/components/company-picker";
+import type { CompanyOption } from "@/g8/pickers/components/company-picker";
+import { ContactPicker } from "@/g8/pickers/components/contact-picker";
+import type { ContactOption } from "@/g8/pickers/components/contact-picker";
 import { ContactDetail } from "@/g8/crm/components/contact-detail";
 import { ContactTable } from "@/g8/crm/components/contact-table";
 import type { ContactRecord } from "@/g8/crm/lib/crm-types";
@@ -42,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";
@@ -57,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";
 
 
@@ -75,7 +90,7 @@ function PipelineDetail({ config, onClose, onExpand, onCollapse }: { config: Wat
     <DetailPanel onExpand={onExpand} onCollapse={onCollapse} title={config.name} subtitle={`Fills ${config.field_to_enrich ?? "a field"} in ${plural(config.step_count, "step")}`} onClose={onClose}
       badges={config.is_active === false ? <StatusPill tone="neutral" dot>Inactive</StatusPill> : <StatusPill tone="positive" dot>Active</StatusPill>}>
       <div className="flex flex-col gap-4 p-1">
-        {config.missing_credentials.length ? <p role="alert" className="text-sm text-amber-700">No key for {config.missing_credentials.join(", ")}: those steps are skipped when it runs. Add the keys in {brand.linkLabel} settings.</p> : null}
+        {config.missing_credentials.length ? <p role="alert" className="text-sm text-warning-foreground">No key for {config.missing_credentials.join(", ")}: those steps are skipped when it runs. Add the keys in {brand.linkLabel} settings.</p> : null}
         <ol className="flex flex-col gap-2" aria-label="Pipeline steps">
           {(config.providers_detail.length ? config.providers_detail : config.providers.map((p) => ({ provider: p, is_system_provider: false, credential_source: "system" as const, credential_ready: true }))).map((p, i) => (
             <li key={`${p.provider}-${i}`} className="flex items-center gap-2 text-sm">
@@ -94,18 +109,42 @@ function PipelineDetail({ config, onClose, onExpand, onCollapse }: { config: Wat
   );
 }
 
+interface ActiveJob { job_id: string; status?: string | null; column_id?: string | null; enrichment_type?: string | null; completed?: number | null; total?: number | null; failed?: number | null; paused_at?: string | null }
+
+/** Jobs running, paused or pending in the last six hours, org-wide (GET /enrichment/active-jobs, read, free): no job id to remember. */
+function ActiveJobs({ jobParam, onOpen }: { jobParam: string; onOpen: (id: string) => void }) {
+  const q = useG8Query(async (signal) => {
+    const d = (await g8Get("/enrichment/active-jobs", undefined, { signal })).data as { jobs?: ActiveJob[] } | ActiveJob[] | undefined;
+    return (Array.isArray(d) ? d : (d?.jobs ?? [])).filter((j) => j?.job_id);
+  }, []);
+  const rows = q.data ?? [];
+  return (
+    <SectionCard title="Running now" description="Jobs from the last 6 hours, from anyone on your team." flush actions={<Button size="sm" variant="ghost" onClick={() => void q.refetch()}>Refresh</Button>}>
+      {q.error ? <div className="p-3"><ApiError error={q.error} title="Could not load running jobs" onRetry={() => void q.refetch()} /></div> : null}
+      {!q.error && q.loading && rows.length === 0 ? <p className="p-4 text-sm text-muted-foreground">Loading jobs...</p> : null}
+      {!q.error && !q.loading && rows.length === 0 ? <EmptyState title="Nothing running" description="Jobs that are running, paused or pending show here." /> : null}
+      <ul className="divide-y">{rows.map((j) => (
+        <li key={j.job_id}>
+          <button type="button" aria-label={`Open job ${j.column_id ?? j.enrichment_type ?? j.job_id}`} className={`flex w-full items-center justify-between gap-2 px-4 py-2 text-left text-sm ${j.job_id === jobParam ? "bg-muted/50" : ""}`} onClick={() => onOpen(j.job_id)}>
+            <span className="truncate">{j.column_id ?? j.enrichment_type ?? "Enrichment"}</span>
+            <span className="flex items-center gap-2 text-xs text-muted-foreground">
+              <span className="tabular-nums">{j.completed ?? 0}/{j.total ?? 0}</span>
+              <StatusPill tone={j.status === "running" ? "positive" : "neutral"} dot>{j.status ?? "unknown"}</StatusPill>
+            </span>
+          </button>
+        </li>
+      ))}</ul>
+    </SectionCard>
+  );
+}
+
 function JobsTab({ jobs, jobParam, setJobParam }: { jobs: string[]; jobParam: string; setJobParam: (v: string | null) => void }) {
   const [typed, setTyped] = useState("");
   const [view, setView] = useUrlState("view");
   const full = view === "full";
   const list = (
     <div className="flex flex-col gap-3 p-1">
-      <SectionCard title="Open a job" description="Paste a job id from the API or an earlier run.">
-        <form className="flex gap-2" onSubmit={(e) => { e.preventDefault(); if (typed.trim()) setJobParam(typed.trim()); }}>
-          <Input aria-label="Job id" value={typed} onChange={(e) => setTyped(e.target.value)} placeholder="Job id" />
-          <Button type="submit" size="sm" variant="outline" disabled={!typed.trim()}>Open</Button>
-        </form>
-      </SectionCard>
+      <ActiveJobs jobParam={jobParam} onOpen={setJobParam} />
       <SectionCard title="Started in this session" flush>
         {jobs.length === 0 ? <EmptyState title="No jobs yet" description="Enrich contacts and the job appears here, with live progress." /> : (
           <ul className="divide-y">{jobs.map((id) => (
@@ -113,6 +152,13 @@ function JobsTab({ jobs, jobParam, setJobParam }: { jobs: string[]; jobParam: st
           ))}</ul>
         )}
       </SectionCard>
+      <details className="px-1 text-sm">
+        <summary className="cursor-pointer text-muted-foreground">Open an older job by id</summary>
+        <form className="mt-2 flex gap-2" onSubmit={(e) => { e.preventDefault(); if (typed.trim()) setJobParam(typed.trim()); }}>
+          <Input aria-label="Job id" value={typed} onChange={(e) => setTyped(e.target.value)} placeholder="Job id" />
+          <Button type="submit" size="sm" variant="outline" disabled={!typed.trim()}>Open</Button>
+        </form>
+      </details>
     </div>
   );
   return (
@@ -138,8 +184,8 @@ function LookupTab() {
   const [cDomain, setCDomain] = useState("");
   const [cName, setCName] = useState("");
   const [verifyEmail, setVerifyEmail] = useState("");
-  const [contactRecord, setContactRecord] = useState("");
-  const [companyRecord, setCompanyRecord] = useState("");
+  const [contactPick, setContactPick] = useState<ContactOption | null>(null);
+  const [companyPick, setCompanyPick] = useState<CompanyOption | null>(null);
   const [applied, setApplied] = useState<string | null>(null);
   const person = { email: email.trim() || undefined, linkedin_url: linkedin.trim() || undefined, first_name: first.trim() || undefined, last_name: last.trim() || undefined, company_domain: domain.trim() || undefined };
   const company = { domain: cDomain.trim() || undefined, name: cName.trim() || undefined };
@@ -155,9 +201,15 @@ function LookupTab() {
           </div>
           <div className={FIELD}><Label htmlFor="lk-domain">Company domain</Label><Input id="lk-domain" placeholder="acme.com" value={domain} onChange={(e) => setDomain(e.target.value)} /></div>
           <p className="text-xs text-muted-foreground">Use an email, a LinkedIn URL, or first name, last name and company domain together.</p>
-          <div className={FIELD}><Label htmlFor="lk-rec">Apply to contact id (optional)</Label><Input id="lk-rec" inputMode="numeric" className="w-40" value={contactRecord} onChange={(e) => setContactRecord(e.target.value)} /></div>
+          <div className={FIELD}>
+            <Label htmlFor="lk-rec">Save the result on a contact (optional)</Label>
+            <div className="flex items-center gap-2">
+              <ContactPicker id="lk-rec" label="Contact to update" placeholder="Choose a contact" value={contactPick} onChange={setContactPick} />
+              {contactPick ? <Button size="sm" variant="ghost" onClick={() => setContactPick(null)}>Clear</Button> : null}
+            </div>
+          </div>
           <div className="flex items-center gap-2">
-            <EnrichButton kind="person" lookup={person} record={Number(contactRecord) > 0 ? { id: Number(contactRecord) } : undefined} label="Find person" variant="default" size="default" onApplied={() => setApplied(`Updated contact ${contactRecord}.`)} />
+            <EnrichButton kind="person" lookup={person} record={contactPick ? { id: contactPick.id } : undefined} label="Find person" variant="default" size="default" onApplied={() => setApplied(`Updated ${contactPick?.name ?? "the contact"}.`)} />
             {applied ? <span role="status" className="text-sm">{applied}</span> : null}
           </div>
         </div>
@@ -167,8 +219,14 @@ function LookupTab() {
           <div className="flex flex-col gap-3">
             <div className={FIELD}><Label htmlFor="lk-cdomain">Domain</Label><Input id="lk-cdomain" placeholder="acme.com" value={cDomain} onChange={(e) => setCDomain(e.target.value)} /></div>
             <div className={FIELD}><Label htmlFor="lk-cname">Name</Label><Input id="lk-cname" value={cName} onChange={(e) => setCName(e.target.value)} /></div>
-            <div className={FIELD}><Label htmlFor="lk-crec">Apply to company id (optional)</Label><Input id="lk-crec" inputMode="numeric" className="w-40" value={companyRecord} onChange={(e) => setCompanyRecord(e.target.value)} /></div>
-            <div><EnrichButton kind="company" lookup={company} record={Number(companyRecord) > 0 ? { id: Number(companyRecord) } : undefined} label="Find company" variant="default" size="default" /></div>
+            <div className={FIELD}>
+              <Label htmlFor="lk-crec">Save the result on a company (optional)</Label>
+              <div className="flex items-center gap-2">
+                <CompanyPicker id="lk-crec" label="Company to update" placeholder="Choose a company" value={companyPick} onChange={setCompanyPick} />
+                {companyPick ? <Button size="sm" variant="ghost" onClick={() => setCompanyPick(null)}>Clear</Button> : null}
+              </div>
+            </div>
+            <div><EnrichButton kind="company" lookup={company} record={companyPick ? { id: companyPick.id } : undefined} label="Find company" variant="default" size="default" /></div>
           </div>
         </SectionCard>
         <SectionCard title="Verify an email" description={`${CREDITS_PER_EMAIL_VERIFICATION} credit per check.`}>
@@ -210,17 +268,22 @@ export function EnrichmentScreen({ toolbarActions, renderDetailActions, extraDet
   const [tab, setTab] = useUrlState("tab", "list");
   const [listParam, setListParam] = useUrlState("list");
   const [picked, setPicked] = useState<number[]>([]);
+  // A finished run reloads the contact table (tableVersion) so the filled values show; the reload clears the ticks,
+  // so `runShown` keeps the panel and its result on screen until the person ticks contacts again.
+  const [tableVersion, setTableVersion] = useState(0);
+  const [runShown, setRunShown] = useState(false);
   const [opened, setOpened] = useState<ContactRecord | null>(null);
   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([]); 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 },
@@ -234,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)]">
@@ -248,10 +332,10 @@ export function EnrichmentScreen({ toolbarActions, renderDetailActions, extraDet
             detail={openPipeline ? <PipelineDetail config={openPipeline} onClose={() => setPipelineParam(null)} onExpand={full ? undefined : () => setView("full")} onCollapse={full ? () => setView(null) : undefined} /> : null} />
         ) : (
           <div className="grid min-w-0 gap-4 xl:grid-cols-2">
-            <ContactTable key={listId} listId={listId} selectable pageSize={10} onSelectionChange={(ids) => setPicked(ids)} onOpen={setOpened} />
+            <ContactTable key={listId} listId={listId} selectable pageSize={10} refreshKey={tableVersion} onSelectionChange={(ids) => setPicked(ids)} onOpen={setOpened} />
             <div className="flex min-w-0 flex-col gap-4">
               <SectionCard title={`Enrich ${picked.length} selected`} description="Fill work email or phones with a provider waterfall. You confirm the price first.">
-                {picked.length === 0 ? <p className="text-sm text-muted-foreground">Tick contacts on the left.</p> : <BulkEnrichPanel key={listId} listId={listId} contactIds={picked} onStarted={started} />}
+                {picked.length === 0 && !runShown ? <p className="text-sm text-muted-foreground">Tick contacts on the left.</p> : <BulkEnrichPanel key={listId} listId={listId} contactIds={picked} onStarted={(id) => { setRunShown(true); started(id); }} onDone={() => setTableVersion((v) => v + 1)} />}
               </SectionCard>
               {opened ? (
                 <DetailPanel key={opened.id} title={opened.full_name ?? ([opened.first_name, opened.last_name].filter(Boolean).join(" ") || `Contact #${opened.id}`)} subtitle={opened.job_title} onClose={() => setOpened(null)}>

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>
+  );
+}