@graph8/sdk 0.361.0 → 0.370.0

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

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

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

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

package/blocks/workflows/README.md

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

package/blocks/workflows/block.json

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

package/blocks/workflows/components/run-history.tsx

@@ -28,6 +28,8 @@ import { EmptyState } from "@/g8/components/empty-state";
 import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
 import { TERMINAL_STATUSES, WAITING_STATUSES, payload, str } from "../lib/graph";
 import type { ExecutionRow, Rec } from "../lib/graph";
+import { rowActivationProps } from "@/g8/hooks/use-row-activation";
+import { pluralWord } from "@/g8/lib/plural";
 
 export interface RunHistoryProps {
   /** Only this workflow's runs. Omit for every workflow. */
@@ -35,6 +37,15 @@ export interface RunHistoryProps {
   /** Open this run's detail first (for example the id returned by WorkflowList's onRunStarted). */
   initialExecutionId?: string;
   pageSize?: number;
+  /** Controlled selection (a run id). With it, the host owns which run is open (for example from the URL). */
+  selectedId?: string | null;
+  onSelectRun?: (executionId: string | null) => void;
+  /** Hide the built-in detail column when the host shows the run elsewhere (see RunDetail). */
+  hideDetail?: boolean;
+  /** Change this number to reload the list (for example after RunDetail paused or stopped a run). */
+  refreshKey?: number;
+  /** Show the workflow's name next to each run when the list spans several workflows. */
+  nameFor?: (actionId: string) => string | undefined;
   className?: string;
 }
 
@@ -50,7 +61,8 @@ const VERB_COPY: Record<Verb, { title: string; description: string; label: strin
 const allowed = (status: string): Verb[] =>
   status === "running" ? ["pause", "stop"] : status === "paused" || status === "pending_approval" ? ["resume", "stop"] : TERMINAL_STATUSES.includes(status) ? ["restart"] : [];
 
-function Detail({ executionId, onChanged }: { executionId: string; onChanged: () => void }) {
+/** One run in full: status, timing, who started it, error, input and output, and the controls its status allows. */
+export function RunDetail({ executionId, onChanged }: { executionId: string; onChanged: () => void }) {
   const [verb, setVerb] = useState<Verb | null>(null);
   const poll = useJobPoll<Rec>(async (signal) => payload(await g8Get(`/workflows/executions/${encodeURIComponent(executionId)}`, undefined, { signal })), {
     isTerminal: (e) => TERMINAL_STATUSES.includes(str(e.status)) || WAITING_STATUSES.includes(str(e.status)),
@@ -67,6 +79,13 @@ function Detail({ executionId, onChanged }: { executionId: string; onChanged: ()
         {poll.error ? <ApiError error={poll.error} title="Could not read this run" onRetry={poll.start} /> : null}
         {act.error ? <ApiError error={act.error} title="That action failed" /> : null}
         <p>Status: <strong>{status.replace(/_/g, " ")}</strong>{e.duration_ms != null ? ` in ${Math.round(Number(e.duration_ms) / 100) / 10}s` : ""}</p>
+        <dl className="grid grid-cols-2 gap-x-3 gap-y-1 text-xs">
+          <dt className="text-muted-foreground">Run id</dt><dd className="font-mono break-all">{executionId}</dd>
+          <dt className="text-muted-foreground">Workflow</dt><dd className="font-mono break-all">{str(e.action_id)}</dd>
+          <dt className="text-muted-foreground">Started by</dt><dd>{str(e.triggered_by ?? e.trigger_type)}</dd>
+          <dt className="text-muted-foreground">Started</dt><dd>{e.started_at || e.created_at ? new Date(str(e.started_at ?? e.created_at)).toLocaleString() : ""}</dd>
+          <dt className="text-muted-foreground">Finished</dt><dd>{e.completed_at ? new Date(str(e.completed_at)).toLocaleString() : ""}</dd>
+        </dl>
         {e.error_message ? <p className="text-destructive">{str(e.error_message)}</p> : null}
         {e.input_data ? <details><summary>Input</summary><pre className="overflow-auto text-xs">{JSON.stringify(e.input_data, null, 2)}</pre></details> : null}
         {e.output_data ? <details open><summary>Output</summary><pre className="overflow-auto text-xs">{JSON.stringify(e.output_data, null, 2)}</pre></details> : null}
@@ -82,13 +101,15 @@ function Detail({ executionId, onChanged }: { executionId: string; onChanged: ()
   );
 }
 
-export function RunHistory({ actionId, initialExecutionId, pageSize = 25, className }: RunHistoryProps) {
+export function RunHistory({ actionId, initialExecutionId, pageSize = 25, selectedId, onSelectRun, hideDetail, refreshKey, nameFor, className }: RunHistoryProps) {
   const [status, setStatus] = useState("");
   const [offset, setOffset] = useState(0);
-  const [selected, setSelected] = useState<string | null>(initialExecutionId ?? null);
+  const [innerSel, setInnerSel] = useState<string | null>(initialExecutionId ?? null);
+  const selected = selectedId !== undefined ? selectedId : innerSel;
+  const setSelected = (id: string | null) => { setInnerSel(id); onSelectRun?.(id); };
   const list = useG8Query(
     (signal) => g8Get("/workflows/executions", { action_id: actionId, status_filter: status || undefined, limit: pageSize, offset }, { signal }),
-    [actionId, status, offset, pageSize],
+    [actionId, status, offset, pageSize, refreshKey],
   );
   const body = payload(list.data);
   const rows = (Array.isArray(body.executions) ? body.executions : []) as ExecutionRow[];
@@ -103,17 +124,18 @@ export function RunHistory({ actionId, initialExecutionId, pageSize = 25, classN
         <Button size="sm" variant="outline" onClick={() => void list.refetch()}>Refresh</Button>
       </div>
       {list.error ? <ApiError error={list.error} onRetry={() => void list.refetch()} /> : null}
-      <div className="grid gap-4 lg:grid-cols-2">
+      <div className={hideDetail ? "" : "grid gap-4 lg:grid-cols-2"}>
         <div>
           {list.loading && !list.data ? <div className="space-y-2" aria-busy="true">{[0, 1, 2].map((i) => <Skeleton key={i} className="h-10 w-full" />)}</div> : !list.error && rows.length === 0 ? (
             <EmptyState title="No runs yet" description="Runs appear here when a trigger fires or someone runs the workflow." />
           ) : (
             <Table>
-              <TableHeader><TableRow><TableHead>Started</TableHead><TableHead>Status</TableHead><TableHead>By</TableHead></TableRow></TableHeader>
+              <TableHeader><TableRow><TableHead>Started</TableHead>{nameFor ? <TableHead>Workflow</TableHead> : null}<TableHead>Status</TableHead><TableHead>By</TableHead></TableRow></TableHeader>
               <TableBody>
                 {rows.map((r) => (
-                  <TableRow key={r.execution_id} data-state={selected === r.execution_id ? "selected" : undefined}>
+                  <TableRow key={r.execution_id} data-state={selected === r.execution_id ? "selected" : undefined} {...rowActivationProps(() => setSelected(r.execution_id))}>
                     <TableCell><button type="button" className="hover:underline" onClick={() => setSelected(r.execution_id)}>{new Date(str(r.started_at ?? r.created_at)).toLocaleString()}</button></TableCell>
+                    {nameFor ? <TableCell>{nameFor(r.action_id) ?? ""}</TableCell> : null}
                     <TableCell className="capitalize">{r.status.replace(/_/g, " ")}</TableCell>
                     <TableCell>{r.triggered_by ?? r.trigger_type ?? ""}</TableCell>
                   </TableRow>
@@ -122,14 +144,14 @@ export function RunHistory({ actionId, initialExecutionId, pageSize = 25, classN
             </Table>
           )}
           <div className="mt-3 flex items-center justify-between text-sm">
-            <span className="text-muted-foreground">{total} {total === 1 ? "run" : "runs"}</span>
+            <span className="text-muted-foreground">{total} {pluralWord(total, "run")}</span>
             <div className="flex gap-2">
               <Button size="sm" variant="outline" disabled={offset === 0} onClick={() => setOffset(Math.max(0, offset - pageSize))}>Previous</Button>
               <Button size="sm" variant="outline" disabled={offset + pageSize >= total} onClick={() => setOffset(offset + pageSize)}>Next</Button>
             </div>
           </div>
         </div>
-        <div>{selected ? <Detail key={selected} executionId={selected} onChanged={() => void list.refetch()} /> : <p className="text-muted-foreground text-sm">Select a run to see its input, output and errors.</p>}</div>
+        {hideDetail ? null : <div>{selected ? <RunDetail key={selected} executionId={selected} onChanged={() => void list.refetch()} /> : <p className="text-muted-foreground text-sm">Select a run to see its input, output and errors.</p>}</div>}
       </div>
     </div>
   );

package/blocks/workflows/components/trigger-config.tsx

@@ -26,6 +26,7 @@ import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
 import { useWorkflow } from "../hooks/use-workflow";
 import { asRec, nodeIdOf, nodesOf, payload, setStep, str, triggerOf } from "../lib/graph";
 import type { Rec } from "../lib/graph";
+import { useBrand } from "@/g8/hooks/use-brand";
 
 export interface TriggerConfigProps {
   actionId: string;
@@ -100,6 +101,7 @@ function Form({ actionId, config, save, saveAndRefresh, trigger, types, onSaved
 }
 
 export function TriggerConfig({ actionId, onSaved, className }: TriggerConfigProps) {
+  const brand = useBrand();
   const wf = useWorkflow(actionId);
   const status = useG8Query((signal) => g8Get(`/workflows/${encodeURIComponent(actionId)}/trigger-status`, undefined, { signal }), [actionId]);
   const catalog = useG8Query((signal) => g8Get("/workflows/node-types/schema", { node_type: "trigger", detail: "slim" }, { signal }), []);
@@ -127,7 +129,7 @@ export function TriggerConfig({ actionId, onSaved, className }: TriggerConfigPro
       </Card>
       {catalog.error ? <p className="mb-2 text-xs">The trigger catalog could not be loaded; the current type is still editable.</p> : null}
       {trigger ? <Form key={JSON.stringify(trigger.config)} actionId={actionId} config={wf.config} save={wf.save} saveAndRefresh={wf.saveAndRefresh} trigger={trigger} types={types} onSaved={refresh} /> : (
-        <p className="text-muted-foreground text-sm">There is no trigger node to configure ({nodesOf(wf.config).length} steps). Add a trigger step in the graph8 app.</p>
+        <p className="text-muted-foreground text-sm">There is no trigger node to configure ({nodesOf(wf.config).length} steps). Add a trigger step in the {brand.linkLabel} app.</p>
       )}
     </div>
   );

package/blocks/workflows/components/workflow-editor.tsx

@@ -26,6 +26,7 @@ import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
 import { useWorkflow } from "../hooks/use-workflow";
 import { addStep, asRec, canMove, isLinear, moveStep, newStep, nodeIdOf, nodeNameOf, nodeTypeOf, orderedSteps, payload, removeStep, setStep, str } from "../lib/graph";
 import type { Rec, WfNode } from "../lib/graph";
+import { useBrand } from "@/g8/hooks/use-brand";
 
 export interface WorkflowEditorProps {
   actionId: string;
@@ -85,6 +86,7 @@ function AddStep({ onAdd }: { onAdd: (type: string) => void }) {
 }
 
 export function WorkflowEditor({ actionId, onSaved, className }: WorkflowEditorProps) {
+  const brand = useBrand();
   const wf = useWorkflow(actionId);
   // The draft remembers which workflow it belongs to, so switching `actionId` can never show or save the old one.
   const [draftState, setDraftState] = useState<{ id: string; config: Rec } | null>(null);
@@ -113,7 +115,7 @@ export function WorkflowEditor({ actionId, onSaved, className }: WorkflowEditorP
           <Button disabled={!draft} onClick={() => setConfirm(true)}>Save workflow</Button>
         </div>
       </div>
-      {!linear ? <p className="text-muted-foreground mb-3 text-sm">This workflow branches, so steps can be renamed and reconfigured here but not added, moved or removed. Use the graph8 app to change its shape.</p> : null}
+      {!linear ? <p className="text-muted-foreground mb-3 text-sm">This workflow branches, so steps can be renamed and reconfigured here but not added, moved or removed. Use the {brand.linkLabel} app to change its shape.</p> : null}
       {wf.save.error ? <ApiError error={wf.save.error} title="Could not save the workflow" /> : null}
       <div className="mb-4 space-y-3">
         {steps.map((s, i) => (