@graph8/sdk 0.370.0 → 0.373.0

package/blocks/enrichment/block.json

@@ -11,7 +11,8 @@
     "finished EnrichmentScreen page"
   ],
   "dependsOn": [
-    "lists"
+    "lists",
+    "pickers"
   ],
   "operations": [
     "cancel_enrichment_job_enrichment_jobs__job_id__cancel_post",
@@ -22,6 +23,8 @@
     "get_company_companies__company_id__get",
     "get_contact_contacts__contact_id__get",
     "get_enrichment_job_enrichment_jobs__job_id__get",
+    "list_active_enrichment_jobs_enrichment_active_jobs_get",
+    "list_companies_companies_get",
     "list_contact_fields_fields_get",
     "list_contacts_contacts_get",
     "list_enrichment_providers_enrichment_providers_get",
@@ -30,6 +33,7 @@
     "lookup_company_enrichment_lookup_company_post",
     "lookup_person_enrichment_lookup_person_post",
     "preflight_enrichment_enrichment_preflight_post",
+    "run_waterfall_pipeline_enrichment_waterfall_enrich_post",
     "start_enrichment_enrichment_enrich_post",
     "update_company_companies__company_id__patch",
     "update_contact_contacts__contact_id__patch",
@@ -68,11 +72,13 @@
     {
       "name": "BulkEnrichPanel",
       "file": "components/bulk-enrich-panel.tsx",
-      "purpose": "Fill a field for many contacts of a list: free preflight, credit estimate in ConfirmSpendDialog, start the job, poll it with useJobPoll, cancel. With no props it is a whole page (pick a list, tick contacts).",
+      "purpose": "Fill a field for many contacts of a list: free preflight, credit estimate in ConfirmSpendDialog, create or reuse the field's pipeline and run it, poll it with useJobPoll, cancel. With no props it is a whole page (pick a list, tick contacts).",
       "operations": [
         "list_enrichment_providers_enrichment_providers_get",
+        "list_waterfall_configs_enrichment_waterfall_configs_get",
         "preflight_enrichment_enrichment_preflight_post",
-        "start_enrichment_enrichment_enrich_post",
+        "create_default_waterfall_config_enrichment_waterfall_configs_post",
+        "run_waterfall_pipeline_enrichment_waterfall_enrich_post",
         "get_enrichment_job_enrichment_jobs__job_id__get",
         "cancel_enrichment_job_enrichment_jobs__job_id__cancel_post",
         "list_lists_lists_get",
@@ -108,8 +114,14 @@
       "name": "EnrichmentScreen",
       "file": "components/enrichment-screen.tsx",
       "purpose": "Finished enrichment page: enrich a list, one-off lookups and email verification, pipelines and the provider catalog.",
-      "operations": [],
-      "tiers": []
+      "operations": [
+        "list_contacts_contacts_get",
+        "list_companies_companies_get",
+        "list_active_enrichment_jobs_enrichment_active_jobs_get"
+      ],
+      "tiers": [
+        "read"
+      ]
     },
     {
       "name": "EnrichmentJobDetail",
@@ -150,7 +162,7 @@
     {
       "file": "recipes/bulk-enrich-and-poll.ts",
       "title": "Enrich many contacts of a list and wait for the job",
-      "when": "Filling work emails or phones for a list. Order: preflight (free: counts, missing provider keys and the credit quote) -> a human approves the quote -> start the job -> poll it (the API has no streams or webhook for completion) -> read provider errors if nothing was written. Contact ids must be on the list; ids not on it are skipped and not charged. Never enrich contacts you only have as masked search results: save them to a list first."
+      "when": "Filling work emails or phones for a list. Order: preflight (free: counts, missing provider keys and the credit quote) -> a human approves the quote -> create or reuse the field's pipeline and run it -> poll it (the API has no streams or webhook for completion) -> read provider errors if nothing was written. Contact ids must be on the list; ids not on it are skipped and not charged. Never enrich contacts you only have as masked search results: save them to a list first."
     },
     {
       "file": "recipes/waterfall-pipeline.ts",
@@ -201,7 +213,7 @@
   "defaults": [
     {
       "decision": "Providers a bulk run tries",
-      "default": "prospeo then dropcontact (the API's own default), filtered to those in the provider catalog; editable in the panel",
+      "default": "The API's own per field (work email: prospeo then dropcontact; phones: leadmagic, prospeo, apollo), kept to providers in the catalog that the field supports; editable in the panel. A list that already has a pipeline for the field runs with that pipeline's providers",
       "askHuman": false
     },
     {

package/blocks/enrichment/components/bulk-enrich-panel.tsx

@@ -7,21 +7,31 @@
  *
  * SDK operations, in order:
  *   1. listEnrichmentProviders  GET  /enrichment/providers            (read)    provider choices, graph8-funded vs own key
+ *   1b. listWaterfallConfigs    GET  /enrichment/waterfall/configs?list_id (read)  the list's own pipeline for the field, if any:
+ *        a run reuses it with ITS providers, so the quote and the confirm are priced with those, not the chosen ones.
  *   2. preflightEnrichment      POST /enrichment/preflight            (read, free; nothing is written or charged)
  *        { list_id, contact_ids, mode: "waterfall", providers, target_field }  -> contact_count, not_in_list,
  *        missing_credentials, warnings, credits_per_record, max_total_credits
- *   3. startEnrichment          POST /enrichment/enrich               (billable)  202 { job_id, status }
- *        Goes through ConfirmSpendDialog first with `max_total_credits` (or 2 credits x contacts when the
- *        preflight could not price it). There is no balance read, so this is an estimate of the most it can charge.
- *   4. getEnrichmentJob         GET  /enrichment/jobs/{job_id}        (read)    polled with useJobPoll (no streams), backoff;
+ *   After ConfirmSpendDialog (with `max_total_credits`, or 2 credits x contacts when the preflight could not price it;
+ *   there is no balance read, so this is an estimate of the most it can charge):
+ *   3. createDefaultWaterfallConfig POST /enrichment/waterfall/configs { list_id, name, field, providers }  (billable tier, free)
+ *        Creates the list's pipeline for that field, or reuses the one it already has (`created: false`; it then runs
+ *        with ITS providers). The column_id is kept, so a retry after step 4 failed does not create it again.
+ *   4. runWaterfallPipeline     POST /enrichment/waterfall/enrich { column_id, list_id, record_ids }  (billable) 202 { job_id, status }
+ *        A 202 whose status is "error" (or a 502) means the job never started: shown as a failure, never polled.
+ *   5. getEnrichmentJob         GET  /enrichment/jobs/{job_id}        (read)    polled with useJobPoll (no streams), backoff;
  *        read once more with ?include_provider_errors=true when nothing was enriched or some records failed.
- *   5. cancelEnrichmentJob      POST /enrichment/jobs/{job_id}/cancel (write, free; records already done keep their data and charge)
+ *   6. cancelEnrichmentJob      POST /enrichment/jobs/{job_id}/cancel (write, free; records already done keep their data and charge)
+ *
+ * When the job ends, every cached `contacts` query is refreshed (and the page mode's ContactTable reloads) so the
+ * filled values show. The panel does not use POST /enrichment/enrich (startEnrichment): before the API fix of
+ * 2026-10-16 that route dispatched the field name instead of a pipeline and silently enriched nothing.
  *
  * The contacts must be on `listId`; ids not on it are skipped and not charged. Locked contacts are enriched
  * like any other once they sit in a list.
  */
 
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { Button } from "@graph8/sdk/ui";
 import { ApiError } from "@/g8/components/api-error";
 import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
@@ -29,19 +39,23 @@ 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 { g8Get, g8Post } from "@/g8/lib/g8-client";
+import { g8QueryCache } from "@/g8/lib/g8-cache";
 import { ContactTable } from "@/g8/crm/components/contact-table";
 import { ListPicker } from "@/g8/lists/components/list-picker";
 import { plural } from "@/g8/lib/plural";
 import { useProviders } from "../hooks/use-providers";
-import { CREDITS_PER_RECORD_ESTIMATE, TARGET_FIELDS, estimateCredits, isJobTerminal } from "../lib/enrichment-types";
-import type { EnrichJob, Preflight, TargetField } from "../lib/enrichment-types";
+import { CREDITS_PER_RECORD_ESTIMATE, FIELD_PROVIDERS, TARGET_FIELDS, estimateCredits, isJobTerminal, providersForField } from "../lib/enrichment-types";
+import type { EnrichJob, Preflight, TargetField, WaterfallConfigSummary, WaterfallPipelineResult } from "../lib/enrichment-types";
 import { useBrand } from "@/g8/hooks/use-brand";
 
 export interface BulkEnrichPanelProps {
   /** With `listId` and `contactIds` it is just the enrichment panel. Omit them and it is a whole page: pick a list, tick contacts, enrich. */
   listId?: number;
   contactIds?: number[];
-  /** Providers tried, in order, when the person has not chosen. Default: prospeo, dropcontact (the API's own default). */
+  /**
+   * Providers tried, in order, when the person has not chosen. Kept to the providers the field supports. Default: the
+   * API's own per field (work email: prospeo, dropcontact; phones: leadmagic, prospeo, apollo).
+   */
   defaultProviders?: string[];
   defaultField?: TargetField;
   /** Called when the job reached a final state. */
@@ -51,37 +65,64 @@ export interface BulkEnrichPanelProps {
   className?: string;
 }
 
-const DEFAULT_PROVIDERS = ["prospeo", "dropcontact"];
+type StartedRun = { job: EnrichJob; pipeline: WaterfallPipelineResult; asked: string[] };
 
-function BulkEnrichCore({ listId, contactIds, defaultProviders = DEFAULT_PROVIDERS, defaultField = "work_email", onDone, onStarted, className }: BulkEnrichPanelProps & { listId: number; contactIds: number[] }) {
+function BulkEnrichCore({ listId, contactIds, defaultProviders, defaultField = "work_email", onDone, onStarted, className }: BulkEnrichPanelProps & { listId: number; contactIds: number[] }) {
   const brand = useBrand();
   const [field, setField] = useState<TargetField>(defaultField);
   const [chosen, setChosen] = useState<string[] | null>(null);
   const [confirmOpen, setConfirmOpen] = useState(false);
   const [jobId, setJobId] = useState<string | null>(null);
+  const [run, setRun] = useState<StartedRun | null>(null);
+  // The pipeline step 3 created or reused, kept per list/field/providers so a retry does not create it twice.
+  const pipelineRef = useRef<{ key: string; pipeline: WaterfallPipelineResult } | null>(null);
   const catalog = useProviders();
 
   const known = new Set(catalog.providers.map((p) => p.provider));
-  const providers = chosen ?? defaultProviders.filter((p) => known.size === 0 || known.has(p));
+  const providers = chosen ?? providersForField(field, defaultProviders).filter((p) => known.size === 0 || known.has(p));
+  const offered = catalog.providers.filter((p) => FIELD_PROVIDERS[field].includes(p.provider) && !providers.includes(p.provider));
   const column = TARGET_FIELDS.find((f) => f.value === field)!;
   const ids = [...new Set(contactIds)];
 
+  // The list's own pipeline for this field wins over the chosen providers (the API reuses it), so price that one.
+  const saved = useG8Query(
+    async (signal) => (await g8Get<{ configs: WaterfallConfigSummary[] }>("/enrichment/waterfall/configs", { list_id: listId }, { signal })).data.configs ?? [],
+    [listId],
+    { enabled: !jobId },
+  );
+  const existing = saved.data?.find((c) => c.field_to_enrich === column.target && c.providers.length > 0) ?? null;
+  const runProviders = existing ? existing.providers : providers;
+
   const preflight = useG8Query(
-    async (signal) => (await g8Post<Preflight>("/enrichment/preflight", { list_id: listId, contact_ids: ids, mode: "waterfall", providers, target_field: column.target }, { signal })).data,
-    [listId, ids.join(","), providers.join(","), field],
+    async (signal) => (await g8Post<Preflight>("/enrichment/preflight", { list_id: listId, contact_ids: ids, mode: "waterfall", providers: runProviders, target_field: column.target }, { signal })).data,
+    [listId, ids.join(","), runProviders.join(","), field],
     { enabled: ids.length > 0 && !jobId },
   );
   const quote = preflight.data;
   const credits = estimateCredits(quote, ids.length);
   const runnable = quote ? quote.contact_count - quote.not_in_list.length : ids.length;
 
-  const start = useG8Mutation(() => g8Post<{ job_id: string }>("/enrichment/enrich", { contact_ids: ids, list_id: listId, fields_config: { [column.column]: providers } }), {
-    onSuccess: (res) => { setConfirmOpen(false); setJobId(res.data.job_id); onStarted?.(res.data.job_id); },
+  const start = useG8Mutation(async (): Promise<StartedRun> => {
+    const key = `${listId}|${column.target}|${providers.join(",")}`;
+    let pipeline = pipelineRef.current?.key === key ? pipelineRef.current.pipeline : null;
+    if (!pipeline) {
+      pipeline = (await g8Post<WaterfallPipelineResult>("/enrichment/waterfall/configs", { list_id: listId, name: `${column.label} enrichment`, field: column.target, providers })).data;
+      pipelineRef.current = { key, pipeline };
+    }
+    const job = (await g8Post<EnrichJob>("/enrichment/waterfall/enrich", { column_id: pipeline.column_id, list_id: listId, record_ids: ids })).data;
+    if (!job?.job_id || String(job.status).toLowerCase() === "error") throw new Error("The enrichment did not start, so nothing was charged. Try again in a minute.");
+    return { job, pipeline, asked: providers };
+  }, {
+    onSuccess: (res) => { setConfirmOpen(false); setRun(res); setJobId(res.job.job_id); onStarted?.(res.job.job_id); },
   });
   const job = useJobPoll<EnrichJob>(
     async (signal) => (await g8Get<EnrichJob>(`/enrichment/jobs/${jobId}`, undefined, { signal })).data,
-    { enabled: jobId != null, intervalMs: 2000, isTerminal: (j) => isJobTerminal(j.status), onDone: (j) => onDone?.(j) },
+    {
+      enabled: jobId != null, intervalMs: 2000, isTerminal: (j) => isJobTerminal(j.status),
+      onDone: (j) => { void g8QueryCache.invalidate(["contacts"]); onDone?.(j); },
+    },
   );
+  const reused = run && !run.pipeline.created && run.pipeline.providers?.length && run.pipeline.providers.join() !== run.asked.join() ? run.pipeline.providers : null;
   const cancel = useG8Mutation(() => g8Post(`/enrichment/jobs/${jobId}/cancel`, {}));
   const finished = job.status;
   const nothingWritten = job.done && ((finished?.successful_enrichments ?? 0) === 0 || (finished?.failed_enrichments ?? 0) > 0);
@@ -106,9 +147,10 @@ function BulkEnrichCore({ listId, contactIds, defaultProviders = DEFAULT_PROVIDE
     const pct = total ? Math.round(((j?.completed ?? 0) / total) * 100) : 0;
     return (
       <div className={`flex flex-col gap-3 ${className ?? ""}`} role="status">
-        <h3 className="text-base font-semibold">{job.done ? (j?.status === "completed" ? "Enrichment finished" : `Enrichment ${j?.status}`) : "Enriching..."}</h3>
+        <h3 className="text-base font-medium">{job.done ? (j?.status === "completed" ? "Enrichment finished" : `Enrichment ${j?.status}`) : "Enriching..."}</h3>
         <div className="h-2 overflow-hidden rounded bg-muted" aria-label="Progress"><div className="h-full bg-primary transition-all" style={{ width: `${job.done ? 100 : pct}%` }} /></div>
         <p className="text-sm">{j?.completed ?? 0} of {total} contacts processed{j?.successful_enrichments != null ? `, ${j.successful_enrichments} enriched, ${j.failed_enrichments ?? 0} failed` : ""}.{j?.total_credits_used != null ? ` ${j.total_credits_used} credits used.` : ""}</p>
+        {reused ? <p className="text-xs text-muted-foreground">This list already had a {column.label.toLowerCase()} pipeline, so it ran with its providers: {reused.join(" > ")}.</p> : null}
         {j?.warnings?.map((w) => <p key={w} className="text-xs text-muted-foreground">{w}</p>)}
         {job.error ? <ApiError error={job.error} title="Could not read the job" onRetry={() => job.start()} /> : null}
         {errors.data?.length ? (
@@ -119,7 +161,7 @@ function BulkEnrichCore({ listId, contactIds, defaultProviders = DEFAULT_PROVIDE
         {cancel.error ? <ApiError error={cancel.error} title="Could not cancel" /> : null}
         <div className="flex gap-2">
           {!job.done ? <Button variant="outline" size="sm" loading={cancel.loading} onClick={() => void cancel.mutate(undefined)}>Cancel</Button> : null}
-          {job.done ? <Button size="sm" variant="outline" onClick={() => { setJobId(null); job.stop(); }}>Enrich more</Button> : null}
+          {job.done ? <Button size="sm" variant="outline" onClick={() => { setJobId(null); setRun(null); job.stop(); }}>Enrich more</Button> : null}
         </div>
       </div>
     );
@@ -129,7 +171,7 @@ function BulkEnrichCore({ listId, contactIds, defaultProviders = DEFAULT_PROVIDE
     <div className={`flex flex-col gap-4 ${className ?? ""}`}>
       <div className="flex flex-wrap items-center gap-3">
         <label className="flex items-center gap-2 text-sm">Fill
-          <select aria-label="Field to fill" className="h-9 rounded-md border bg-background px-2" value={field} onChange={(e) => setField(e.target.value as TargetField)}>
+          <select aria-label="Field to fill" className="h-9 rounded-md border bg-background px-2" value={field} onChange={(e) => { setField(e.target.value as TargetField); setChosen(null); }}>
             {TARGET_FIELDS.map((f) => <option key={f.value} value={f.value}>{f.label}</option>)}
           </select>
         </label>
@@ -139,7 +181,11 @@ function BulkEnrichCore({ listId, contactIds, defaultProviders = DEFAULT_PROVIDE
       <fieldset className="flex flex-col gap-1">
         <legend className="mb-1 text-sm font-medium">Providers, tried in this order</legend>
         {catalog.error ? <ApiError error={catalog.error} title="Could not load providers" onRetry={() => void catalog.refetch()} /> : null}
-        {providers.map((p, i) => (
+        {existing ? (
+          <p className="text-sm text-muted-foreground" data-testid="saved-pipeline">
+            This list already has a {column.label.toLowerCase()} pipeline (&quot;{existing.name}&quot;), so a run uses its providers: {existing.providers.join(" > ")}. Delete it under Pipelines to choose others.
+          </p>
+        ) : providers.map((p, i) => (
           <div key={p} className="flex items-center gap-2 text-sm">
             <span className="w-6 text-muted-foreground">{i + 1}.</span><span className="w-32 font-medium">{p}</span>
             <Button variant="ghost" size="sm" aria-label={`Move ${p} up`} disabled={i === 0} onClick={() => move(p, -1)}>Up</Button>
@@ -148,7 +194,7 @@ function BulkEnrichCore({ listId, contactIds, defaultProviders = DEFAULT_PROVIDE
           </div>
         ))}
         <div className="flex flex-wrap gap-1">
-          {catalog.providers.filter((p) => !providers.includes(p.provider)).map((p) => (
+          {(existing ? [] : offered).map((p) => (
             <Button key={p.provider} variant="outline" size="sm" onClick={() => toggleProvider(p.provider)}>Add {p.provider}{p.byok_configured ? " (your key)" : p.system_funded ? "" : " (needs a key)"}</Button>
           ))}
         </div>
@@ -159,14 +205,14 @@ function BulkEnrichCore({ listId, contactIds, defaultProviders = DEFAULT_PROVIDE
         <div className="rounded-md border p-3 text-sm" aria-label="Preflight">
           <p><strong>{runnable.toLocaleString()}</strong> of {quote.contact_count.toLocaleString()} contacts will be enriched{quote.not_in_list.length ? `; ${quote.not_in_list.length} are not on this list and are skipped (not charged)` : ""}{quote.duplicates_removed ? `; ${quote.duplicates_removed} duplicates removed` : ""}.</p>
           <p className="mt-1">{quote.max_total_credits != null ? `At most ${quote.max_total_credits.toLocaleString()} credits (${quote.credits_per_record} per record).` : `About ${credits.toLocaleString()} credits (${CREDITS_PER_RECORD_ESTIMATE} per record, the API's flat estimate).`} Records that already have a value or find nothing cost less.</p>
-          {quote.missing_credentials.length ? <p role="alert" className="mt-1 text-amber-700">No API key for {quote.missing_credentials.join(", ")}: those steps are skipped. Add the keys in {brand.linkLabel} settings.</p> : null}
+          {quote.missing_credentials.length ? <p role="alert" className="mt-1 text-warning-foreground">No API key for {quote.missing_credentials.join(", ")}: those steps are skipped. Add the keys in {brand.linkLabel} settings.</p> : null}
           {quote.warnings.map((w) => <p key={w} className="mt-1 text-xs text-muted-foreground">{w}</p>)}
         </div>
       ) : null}
       {start.error ? <ApiError error={start.error} title="Could not start the enrichment" /> : null}
 
       <div className="flex justify-end">
-        <Button disabled={ids.length === 0 || providers.length === 0 || preflight.loading || runnable === 0 || Boolean(preflight.error)} onClick={() => setConfirmOpen(true)}>
+        <Button disabled={ids.length === 0 || runProviders.length === 0 || preflight.loading || runnable === 0 || Boolean(preflight.error)} onClick={() => setConfirmOpen(true)}>
           Enrich {plural(runnable, "contact")}
         </Button>
       </div>
@@ -175,7 +221,7 @@ function BulkEnrichCore({ listId, contactIds, defaultProviders = DEFAULT_PROVIDE
         open={confirmOpen}
         tier="billable"
         title={`Enrich ${runnable.toLocaleString()} contacts: ${column.label.toLowerCase()}`}
-        description={`Providers in order: ${providers.join(", ")}. The estimate is the most this run can charge; your balance is not checked here.`}
+        description={`Providers in order: ${runProviders.join(", ")}${existing ? ` (the list's saved ${column.label.toLowerCase()} pipeline)` : ""}. The estimate is the most this run can charge; your balance is not checked here.`}
         estimatedCredits={credits}
         affected={runnable}
         confirmLabel="Start enrichment"
@@ -194,15 +240,18 @@ function BulkEnrichCore({ listId, contactIds, defaultProviders = DEFAULT_PROVIDE
 export function BulkEnrichPanel(props: BulkEnrichPanelProps) {
   const [listId, setListId] = useState<number | undefined>(undefined);
   const [picked, setPicked] = useState<number[]>([]);
+  const [tableVersion, setTableVersion] = useState(0);
   if (props.listId != null && props.contactIds) return <BulkEnrichCore {...props} listId={props.listId} contactIds={props.contactIds} />;
   const { listId: _l, contactIds: _c, ...rest } = props;
+  // A finished run reloads the table so the filled values show (this also clears the ticked contacts).
+  const done = (job: EnrichJob) => { setTableVersion((v) => v + 1); props.onDone?.(job); };
   return (
     <div className={`flex flex-col gap-4 ${props.className ?? ""}`}>
       <ListPicker value={listId} allowCreate={false} onChange={(l) => { setListId(l.id); setPicked([]); }} />
       {listId != null ? (
         <>
-          <ContactTable listId={listId} selectable pageSize={10} onSelectionChange={(ids) => setPicked(ids)} />
-          <BulkEnrichCore {...rest} className={undefined} listId={listId} contactIds={picked} />
+          <ContactTable listId={listId} selectable pageSize={10} refreshKey={tableVersion} onSelectionChange={(ids) => setPicked(ids)} />
+          <BulkEnrichCore {...rest} className={undefined} listId={listId} contactIds={picked} onDone={done} />
         </>
       ) : <p className="text-sm text-muted-foreground">Choose a list to enrich its contacts.</p>}
     </div>

package/blocks/enrichment/components/email-verify-badge.tsx

@@ -63,9 +63,9 @@ export function classifyVerification(status: string | null | undefined, isValid?
 
 const STYLE: Record<VerifyState, string> = {
   unverified: "bg-muted text-muted-foreground",
-  valid: "bg-emerald-100 text-emerald-800",
-  risky: "bg-amber-100 text-amber-800",
-  invalid: "bg-red-100 text-red-800",
+  valid: "bg-positive text-positive-foreground",
+  risky: "bg-warning text-warning-foreground",
+  invalid: "bg-error text-error-foreground",
   unverifiable: "bg-muted text-muted-foreground",
 };
 const LABEL: Record<VerifyState, string> = { unverified: "Unverified", valid: "Valid", risky: "Risky", invalid: "Invalid", unverifiable: "Couldn't verify" };

package/blocks/enrichment/components/enrich-button.tsx

@@ -138,7 +138,7 @@ export function EnrichButton({ kind, lookup, record, recordLoaded = false, label
                 <li key={k} className="flex items-center gap-2">
                   {target ? <input type="checkbox" aria-label={`Apply ${k}`} checked={ticked.has(k)} onChange={() => setTicked((t) => { const n = new Set(t); if (!n.delete(k)) n.add(k); return n; })} /> : null}
                   <span className="w-36 text-muted-foreground">{k.replace(/_/g, " ")}</span><span className="truncate">{v}</span>
-                  {target?.checked && target.existing[k] && !isMaskedValue(target.existing[k]) && target.existing[k] !== v ? <span className="text-xs text-amber-600">replaces {String(target.existing[k])}</span> : null}
+                  {target?.checked && target.existing[k] && !isMaskedValue(target.existing[k]) && target.existing[k] !== v ? <span className="text-xs text-warning-foreground">replaces {String(target.existing[k])}</span> : null}
                 </li>
               ))}
               {Object.keys(fields).length === 0 ? <li className="text-muted-foreground">The match had no fields to show.</li> : null}

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

@@ -14,7 +14,7 @@
  * 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 +31,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";
@@ -75,7 +81,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 +100,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 +143,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 +175,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 +192,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 +210,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,6 +259,10 @@ 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");
@@ -220,7 +273,7 @@ export function EnrichmentScreen({ toolbarActions, renderDetailActions, extraDet
   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); };
 
   const stats = tab === "providers" && catalog.providers.length > 0 ? [
     { label: "Providers", value: catalog.providers.length },
@@ -248,10 +301,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/waterfall-config.tsx

@@ -13,6 +13,9 @@
  *        providers, whatever name and providers were sent. The form then says so instead of claiming a new pipeline.
  *   4. deleteWaterfallConfig         DELETE /enrichment/waterfall/configs/{column_id}   (destructive, ConfirmSpendDialog)
  *
+ * The provider choices follow the chosen field (the API refuses a provider that cannot fill it with 400
+ * `unsupported_provider_for_field`): changing the field drops selected providers that no longer fit and says which.
+ *
  * Providers on graph8's system key spend credits when the pipeline RUNS; providers on the org's own key (BYOK) do not.
  * A BYOK provider without a key is listed under `missing_credentials` and is skipped at run time.
  */
@@ -27,7 +30,7 @@ import { useG8Query } from "@/g8/hooks/use-g8-query";
 import { g8Delete, g8Get, g8Post } from "@/g8/lib/g8-client";
 import { plural } from "@/g8/lib/plural";
 import { useProviders } from "../hooks/use-providers";
-import { TARGET_FIELDS } from "../lib/enrichment-types";
+import { FIELD_PROVIDERS, TARGET_FIELDS } from "../lib/enrichment-types";
 import type { TargetField, WaterfallConfigSummary } from "../lib/enrichment-types";
 import { useBrand } from "@/g8/hooks/use-brand";
 
@@ -54,6 +57,8 @@ export function WaterfallConfig({ listId, onChanged, onOpen, selectedId, onLoade
   const [deleting, setDeleting] = useState<WaterfallConfigSummary | null>(null);
   // The answer to the last create when the API reused the list's pipeline for that field instead of creating one.
   const [reused, setReused] = useState<{ name?: string; field: TargetField; providers: string[]; asked: string[] } | null>(null);
+  // Providers dropped by the last field change, with the field they cannot fill, so the person sees why they went.
+  const [dropped, setDropped] = useState<{ providers: string[]; field: TargetField } | null>(null);
   const catalog = useProviders();
 
   const configs = useG8Query((signal) => g8Get<{ configs: WaterfallConfigSummary[] }>("/enrichment/waterfall/configs", { list_id: listId }, { signal }), [listId]);
@@ -76,6 +81,16 @@ export function WaterfallConfig({ listId, onChanged, onOpen, selectedId, onLoade
   const loadedRef = useRef(onLoaded);
   loadedRef.current = onLoaded;
   useEffect(() => { if (configs.data) loadedRef.current?.(configs.data.data.configs ?? []); }, [configs.data]);
+  const fieldLabel = TARGET_FIELDS.find((f) => f.value === field)?.label ?? field;
+  const allowed = FIELD_PROVIDERS[field];
+  const unfit = order.filter((p) => !allowed.includes(p));
+  const changeField = (next: TargetField) => {
+    const gone = order.filter((p) => !FIELD_PROVIDERS[next].includes(p));
+    setField(next);
+    setOrder(order.filter((p) => FIELD_PROVIDERS[next].includes(p)));
+    setDropped(gone.length ? { providers: gone, field: next } : null);
+    setReused(null);
+  };
   const byName = new Map(catalog.providers.map((p) => [p.provider, p]));
   const systemUsed = order.filter((p) => byName.get(p)?.system_funded && !byName.get(p)?.byok_configured);
   const move = (p: string, d: number) => {
@@ -102,7 +117,7 @@ export function WaterfallConfig({ listId, onChanged, onOpen, selectedId, onLoade
                 <Button variant="ghost" size="sm" onClick={() => setDeleting(c)}>Delete</Button>
               </div>
               <p className="text-xs text-muted-foreground">{c.field_to_enrich ?? "field"}: {c.providers.join(" > ") || "no providers"} ({plural(c.step_count, "step")})</p>
-              {c.missing_credentials.length ? <p role="alert" className="mt-1 text-xs text-amber-700">Skipped at run time, no key: {c.missing_credentials.join(", ")}</p> : null}
+              {c.missing_credentials.length ? <p role="alert" className="mt-1 text-xs text-warning-foreground">Skipped at run time, no key: {c.missing_credentials.join(", ")}</p> : null}
             </li>
           ))}
         </ul>
@@ -113,7 +128,7 @@ export function WaterfallConfig({ listId, onChanged, onOpen, selectedId, onLoade
         <div className="flex flex-wrap items-end gap-3">
           <div className="flex flex-col gap-1"><Label htmlFor="wf-name">Name</Label><Input id="wf-name" className="w-64" value={name} onChange={(e) => setName(e.target.value)} /></div>
           <div className="flex flex-col gap-1"><Label htmlFor="wf-field">Fill</Label>
-            <select id="wf-field" className="h-9 rounded-md border bg-background px-2 text-sm" value={field} onChange={(e) => setField(e.target.value as TargetField)}>
+            <select id="wf-field" className="h-9 rounded-md border bg-background px-2 text-sm" value={field} onChange={(e) => changeField(e.target.value as TargetField)}>
               {TARGET_FIELDS.map((f) => <option key={f.value} value={f.value}>{f.label}</option>)}
             </select>
           </div>
@@ -130,9 +145,14 @@ export function WaterfallConfig({ listId, onChanged, onOpen, selectedId, onLoade
             </li>
           ))}
         </ol>
-        <div className="flex flex-wrap gap-1">
-          {catalog.providers.filter((p) => !order.includes(p.provider)).map((p) => (
-            <Button key={p.provider} variant="outline" size="sm" onClick={() => setOrder([...order, p.provider])}>Add {p.provider}</Button>
+        {dropped ? (
+          <p role="status" className="text-xs text-muted-foreground">
+            Removed {dropped.providers.join(", ")}: {dropped.providers.length === 1 ? "it cannot" : "they cannot"} find a {TARGET_FIELDS.find((f) => f.value === dropped.field)?.label.toLowerCase()}.
+          </p>
+        ) : null}
+        <div role="group" className="flex flex-wrap gap-1" aria-label="Provider choices" title={`Providers that can find a ${fieldLabel.toLowerCase()}`}>
+          {catalog.providers.filter((p) => allowed.includes(p.provider) && !order.includes(p.provider)).map((p) => (
+            <Button key={p.provider} variant="outline" size="sm" onClick={() => { setDropped(null); setOrder([...order, p.provider]); }}>Add {p.provider}</Button>
           ))}
         </div>
         <label className="flex items-center gap-2 text-sm"><input type="checkbox" checked={skipExisting} onChange={(e) => setSkipExisting(e.target.checked)} /> Skip contacts that already have a value</label>
@@ -143,7 +163,7 @@ export function WaterfallConfig({ listId, onChanged, onOpen, selectedId, onLoade
             {reused.providers.length && reused.providers.join() !== reused.asked.join() ? ` It keeps its providers: ${reused.providers.join(" > ")}. Delete it first to use ${reused.asked.join(" > ")}.` : ""}
           </p>
         ) : null}
-        <div className="flex justify-end"><Button disabled={!name.trim() || order.length === 0} onClick={() => setConfirmCreate(true)}>Create pipeline</Button></div>
+        <div className="flex justify-end"><Button disabled={!name.trim() || order.length === 0 || unfit.length > 0} onClick={() => setConfirmCreate(true)}>Create pipeline</Button></div>
       </section>
 
       <ConfirmSpendDialog open={confirmCreate} tier="billable" title={`Create pipeline "${name.trim()}"`}