@graph8/sdk 0.362.0 → 0.373.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);
@@ -105,7 +107,7 @@ export function WorkflowEditor({ actionId, onSaved, className }: WorkflowEditorP
   return (
     <div className={className}>
       <div className="mb-4 flex flex-wrap items-center gap-2">
-        <h2 className="text-lg font-semibold">{str(wf.workflow.name, "Workflow")}</h2>
+        <h2 className="text-lg font-medium">{str(wf.workflow.name, "Workflow")}</h2>
         <span className="text-muted-foreground text-sm">{wf.workflow.enabled === false ? "Disabled" : "Enabled"}</span>
         <div className="ml-auto flex items-center gap-2">
           {draft ? <span className="text-sm">Unsaved changes</span> : 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) => (

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

@@ -26,8 +26,14 @@ import { EmptyState } from "@/g8/components/empty-state";
 import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
 import { blankConfig, payload, str } from "../lib/graph";
 import type { Rec, WorkflowRow } from "../lib/graph";
+import { rowActivationProps } from "@/g8/hooks/use-row-activation";
+import { RecordLink } from "@/g8/components/screen/record-link";
+import { pluralWord } from "@/g8/lib/plural";
+import { useBrand } from "@/g8/hooks/use-brand";
 
 export interface WorkflowListProps {
+  /** URL param the host screen reads for this record type. With it the name is a real link (Cmd-click opens it in a new tab); without it a plain button. */
+  linkParam?: string;
   /** Open a workflow in your WorkflowEditor route. */
   onOpen?: (actionId: string) => void;
   /** Called with `(actionId, executionId)` after a run starts, so you can show RunHistory. */
@@ -55,7 +61,8 @@ function planFacts(plan: Rec): { credits?: number; audience?: number; steps: num
   };
 }
 
-function RunPlan({ actionId, input, setInput }: { actionId: string; input: string; setInput: (v: string) => void }) {
+export function RunPlan({ actionId, input, setInput }: { actionId: string; input: string; setInput: (v: string) => void }) {
+  const brand = useBrand();
   const plan = useG8Query((signal) => g8Post(`/workflows/${encodeURIComponent(actionId)}/plan`, {}, { signal }), [actionId]);
   const facts = planFacts(payload(plan.data));
   let valid = true;
@@ -64,9 +71,9 @@ function RunPlan({ actionId, input, setInput }: { actionId: string; input: strin
     <div className="space-y-2 text-left">
       {plan.loading ? <Skeleton className="h-4 w-48" /> : plan.error ? <p className="text-xs">The preview is unavailable; the run still works.</p> : (
         <p className="text-xs" data-testid="run-plan">
-          {facts.steps} steps{facts.audience != null ? `, ${facts.audience.toLocaleString()} contacts in scope` : ""}
+          {facts.steps} {pluralWord(facts.steps, "step")}{facts.audience != null ? `, ${facts.audience.toLocaleString()} ${pluralWord(facts.audience, "contact")} in scope` : ""}
           {facts.credits != null ? `, about ${Math.round(facts.credits).toLocaleString()} credits (advisory)` : ""}
-          {facts.approval ? ", waits for a human approval" : ""}{facts.external ? ", contacts people or systems outside graph8" : ""}.
+          {facts.approval ? ", waits for a human approval" : ""}{facts.external ? `, contacts people or systems outside ${brand.linkLabel}` : ""}.
         </p>
       )}
       <label className="block text-xs font-medium" htmlFor="run-input">Run input (JSON)</label>
@@ -86,7 +93,7 @@ function confirmCopy(p: Pending): { tier: "external" | "destructive"; title: str
   return { tier: "destructive", title: `Delete "${p.workflow.name}"`, label: "Delete", description: "The workflow and its trigger are removed. Past runs stay in history." };
 }
 
-export function WorkflowList({ onOpen, onRunStarted, className }: WorkflowListProps) {
+export function WorkflowList({ linkParam, onOpen, onRunStarted, className }: WorkflowListProps) {
   const list = useG8Query((signal) => g8Get("/workflows", undefined, { signal }), []);
   const [name, setName] = useState("");
   const [pending, setPending] = useState<Pending | null>(null);
@@ -128,8 +135,8 @@ export function WorkflowList({ onOpen, onRunStarted, className }: WorkflowListPr
           <TableHeader><TableRow><TableHead>Name</TableHead><TableHead>Status</TableHead><TableHead>Category</TableHead><TableHead className="text-right">Actions</TableHead></TableRow></TableHeader>
           <TableBody>
             {rows.map((w) => (
-              <TableRow key={w.action_id}>
-                <TableCell><button type="button" className="font-medium hover:underline" onClick={() => onOpen?.(w.action_id)}>{w.name}</button>{w.description ? <div className="text-muted-foreground text-xs">{w.description}</div> : null}</TableCell>
+              <TableRow key={w.action_id} {...(onOpen ? rowActivationProps(() => onOpen(w.action_id)) : {})}>
+                <TableCell>{onOpen ? <RecordLink param={linkParam} id={w.action_id} onOpen={() => onOpen(w.action_id)}>{w.name}</RecordLink> : <span className="font-medium">{w.name}</span>}{w.description ? <div className="text-muted-foreground text-xs">{w.description}</div> : null}</TableCell>
                 <TableCell>{w.enabled === false ? "Disabled" : "Enabled"}</TableCell>
                 <TableCell>{w.category ?? ""}</TableCell>
                 <TableCell className="space-x-1 text-right">

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

@@ -0,0 +1,193 @@
+"use client";
+
+/**
+ * WorkflowsScreen: the finished automations workspace. Two tabs.
+ *   Workflows: stat strip (workflows, enabled, disabled, failed runs), search and status filter, the list with
+ *              Run / Enable-Disable / Delete per row, and for the open workflow (deep link ?id=) a detail panel with
+ *              Steps (WorkflowEditor), Trigger (TriggerConfig) and Runs (RunHistory for this workflow).
+ *   Runs:      every run across all workflows as a list; opening one (deep link ?run=) shows the full run (status, timing,
+ *              who started it, error, input, output) with pause / resume / stop / restart.
+ * "New workflow" asks for a name, creates a manual-trigger workflow and opens it so steps can be added. Starting a
+ * run shows the plan preview (steps, audience, advisory credits) and the run input first, inside the confirm.
+ *
+ * Composes: WorkflowEditor, TriggerConfig, RunHistory, RunPlan (from WorkflowList).
+ *
+ * SDK operations of its own, in the order used:
+ *   1. GET    /workflows                     (workflows.listWorkflows)   read   `{ actions, total }`
+ *   2. GET    /workflows/executions?status_filter=failed&limit=1   (workflows.listWorkflowExecutions)  read   failed-run count
+ *   3. POST   /workflows                     (workflows.createWorkflow)  external -> ConfirmSpendDialog
+ *   4. POST   /workflows/{id}/plan, then POST /workflows/{id}/execute { input_data }   (plan read; execute external -> ConfirmSpendDialog)
+ *   5. PUT    /workflows/{id} { enabled }    (workflows.updateWorkflow)  external -> ConfirmSpendDialog
+ *   6. DELETE /workflows/{id}                (workflows.deleteWorkflow)  destructive -> ConfirmSpendDialog
+ * Slot props: renderRowActions, renderDetailActions, extraDetailTabs, toolbarActions.
+ */
+import { useEffect, useState, type ReactNode } from "react";
+import { Plus, Workflow } from "lucide-react";
+import { Button, Input, Skeleton } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { EmptyState } from "@/g8/components/empty-state";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Delete, g8Get, g8Post, g8Put } from "@/g8/lib/g8-client";
+import { DetailPanel } from "@/g8/components/screen/detail-panel";
+import { FormSheet } from "@/g8/components/screen/form-sheet";
+import { ScreenLayout } from "@/g8/components/screen/screen-layout";
+import { SplitView } from "@/g8/components/screen/split-view";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import { Toolbar } from "@/g8/components/screen/toolbar";
+import { useUrlState } from "@/g8/hooks/use-url-state";
+import { blankConfig, payload, str } from "../lib/graph";
+import type { WorkflowRow } from "../lib/graph";
+import { RunDetail, RunHistory } from "./run-history";
+import { RunPlan } from "./workflow-list";
+import { TriggerConfig } from "./trigger-config";
+import { WorkflowEditor } from "./workflow-editor";
+
+export interface WorkflowsScreenProps {
+  renderRowActions?: (workflow: WorkflowRow) => ReactNode;
+  renderDetailActions?: (workflow: WorkflowRow) => ReactNode;
+  extraDetailTabs?: Array<{ id: string; label: string; render: (workflow: WorkflowRow) => ReactNode }>;
+  toolbarActions?: ReactNode;
+  className?: string;
+}
+
+type Pending =
+  | { kind: "create"; name: string }
+  | { kind: "run"; workflow: WorkflowRow }
+  | { kind: "toggle"; workflow: WorkflowRow }
+  | { kind: "delete"; workflow: WorkflowRow };
+
+const SCREEN_TABS = [{ id: "workflows", label: "Workflows" }, { id: "runs", label: "Runs" }];
+const FILTERS = [{ id: "", label: "All" }, { id: "enabled", label: "Enabled" }, { id: "disabled", label: "Disabled" }];
+const isOn = (w: WorkflowRow) => w.enabled !== false;
+
+function copyFor(p: Pending): { tier: "external" | "destructive"; title: string; label: string; description?: string } {
+  if (p.kind === "create") return { tier: "external", title: `Create workflow "${p.name || "Untitled workflow"}"`, label: "Create", description: "A manual-trigger workflow with no steps yet. Add steps in the editor." };
+  if (p.kind === "run") return { tier: "external", title: `Run "${p.workflow.name}"`, label: "Run now" };
+  if (p.kind === "toggle") {
+    const on = isOn(p.workflow);
+    return { tier: "external", title: `${on ? "Disable" : "Enable"} "${p.workflow.name}"`, label: on ? "Disable" : "Enable", description: on ? "Its trigger stops firing." : "Its trigger starts firing and the workflow can act on real contacts." };
+  }
+  return { tier: "destructive", title: `Delete "${p.workflow.name}"`, label: "Delete", description: "The workflow and its trigger are removed. Past runs stay in history." };
+}
+
+export function WorkflowsScreen({ renderRowActions, renderDetailActions, extraDetailTabs, toolbarActions, className }: WorkflowsScreenProps) {
+  const [tab, setTab] = useUrlState("tab", "workflows");
+  const [selected, setSelected] = useUrlState("id", "");
+  const [search, setSearch] = useState("");
+  const [filter, setFilter] = useState("");
+  const [newName, setNewName] = useState("");
+  const [sheet, setSheet] = useState(false);
+  const [pending, setPending] = useState<Pending | null>(null);
+  const [input, setInput] = useState("{}");
+  const [run, setRun] = useUrlState("run", "");
+  const [view, setView] = useUrlState("view", "");
+  const closeWorkflow = () => { setSelected(""); setView(""); };
+  const closeRun = () => { setRun(""); setView(""); };
+  const expand = { expanded: view === "full", onExpandedChange: (e: boolean) => setView(e ? "full" : "") };
+  const [runsKey, setRunsKey] = useState(0);
+  const q = search.trim().toLowerCase();
+  useEffect(() => setInput("{}"), [pending]);
+
+  const list = useG8Query((signal) => g8Get("/workflows", undefined, { signal }), []);
+  const failed = useG8Query((signal) => g8Get("/workflows/executions", { status_filter: "failed", limit: 1 }, { signal }), []);
+  const all = (Array.isArray(payload(list.data).actions) ? payload(list.data).actions : []) as WorkflowRow[];
+  const failedTotal = payload(failed.data).total_count;
+  const rows = all.filter((w) => (!q || `${w.name} ${w.description ?? ""}`.toLowerCase().includes(q)) && (!filter || (filter === "enabled") === isOn(w)));
+  const open = all.find((w) => w.action_id === selected);
+
+  const act = useG8Mutation(async (p: Pending) => {
+    if (p.kind === "create") return g8Post("/workflows", { name: p.name || "Untitled workflow", description: "", config: blankConfig(p.name || "Untitled workflow") });
+    const base = `/workflows/${encodeURIComponent(p.workflow.action_id)}`;
+    if (p.kind === "run") return g8Post(`${base}/execute`, { input_data: JSON.parse(input || "{}") });
+    if (p.kind === "toggle") return g8Put(base, { enabled: !isOn(p.workflow) });
+    return g8Delete(base);
+  }, {
+    onSuccess: (res, p) => {
+      setPending(null);
+      if (p.kind === "create") { setNewName(""); setSheet(false); const id = str(payload(res).action_id); if (id) { setSelected(id); setTab("workflows"); } }
+      if (p.kind === "run") { setTab("runs"); setRun(str(payload(res).execution_id)); }
+      if (p.kind === "delete" && selected === p.workflow.action_id) setSelected("");
+      void list.refetch();
+      void failed.refetch();
+    },
+  });
+  let inputOk = true;
+  try { JSON.parse(input || "{}"); } catch { inputOk = false; }
+  const copy = pending ? copyFor(pending) : null;
+
+  const detail = open ? (
+    <DetailPanel title={open.name} subtitle={open.description ?? open.category ?? undefined} onClose={closeWorkflow} onExpand={() => setView("full")}
+      badges={<StatusPill tone={isOn(open) ? "positive" : "neutral"} dot>{isOn(open) ? "Enabled" : "Disabled"}</StatusPill>}
+      actions={<>
+        <Button size="sm" onClick={() => setPending({ kind: "run", workflow: open })}>Run</Button>
+        {renderDetailActions?.(open)}
+      </>}
+      tabs={[
+        { id: "steps", label: "Steps", content: <WorkflowEditor key={open.action_id} actionId={open.action_id} onSaved={() => void list.refetch()} /> },
+        { id: "trigger", label: "Trigger", content: <TriggerConfig key={open.action_id} actionId={open.action_id} onSaved={() => void list.refetch()} /> },
+        { id: "runs", label: "Runs", content: <RunHistory key={open.action_id} actionId={open.action_id} /> },
+        ...(extraDetailTabs ?? []).map((t) => ({ id: t.id, label: t.label, content: t.render(open) })),
+      ]} />
+  ) : selected && !list.loading ? <EmptyState title="Workflow not found" description="It may have been deleted." /> : null;
+
+  const listView = (
+    <div className="flex flex-col gap-3">
+      <Toolbar search={{ value: search, onChange: setSearch, placeholder: "Search workflows" }} actions={toolbarActions}
+        filters={<div role="group" aria-label="Status" className="flex gap-1">{FILTERS.map((f) => <Button key={f.id || "all"} size="sm" variant={filter === f.id ? "default" : "outline"} onClick={() => setFilter(f.id)}>{f.label}</Button>)}</div>} />
+      {list.error ? <ApiError error={list.error} title="Could not load workflows" onRetry={() => void list.refetch()} /> : null}
+      {act.error ? <ApiError error={act.error} title="That action failed" /> : null}
+      {list.loading && !list.data ? <div className="space-y-2" aria-busy="true">{[0, 1, 2].map((i) => <Skeleton key={i} className="h-14 w-full" />)}</div> : null}
+      <ul className="rounded-md border">
+        {rows.map((w) => (
+          <li key={w.action_id} className={`flex items-center gap-2 border-b px-3 py-2 ${w.action_id === selected ? "bg-accent" : ""}`}>
+            <button type="button" data-testid={`workflow-${w.action_id}`} onClick={() => setSelected(w.action_id)} className="min-w-0 flex-1 text-left">
+              <span className="block truncate text-sm font-medium">{w.name}</span>
+              <span className="block truncate text-xs text-muted-foreground">{w.description || w.category || "No description"}</span>
+            </button>
+            <StatusPill tone={isOn(w) ? "positive" : "neutral"} dot>{isOn(w) ? "Enabled" : "Disabled"}</StatusPill>
+            <Button size="sm" variant="outline" onClick={() => setPending({ kind: "run", workflow: w })}>Run</Button>
+            <Button size="sm" variant="ghost" onClick={() => setPending({ kind: "toggle", workflow: w })}>{isOn(w) ? "Disable" : "Enable"}</Button>
+            <Button size="sm" variant="ghost" aria-label={`Delete ${w.name}`} onClick={() => setPending({ kind: "delete", workflow: w })}>Delete</Button>
+            {renderRowActions?.(w)}
+          </li>
+        ))}
+      </ul>
+      {!list.loading && !list.error && rows.length === 0 ? (
+        <EmptyState title={all.length ? "No workflows match" : "No workflows yet"} description="A workflow runs steps automatically when its trigger fires or when you run it."
+          action={all.length ? undefined : <Button onClick={() => setSheet(true)}>New workflow</Button>} />
+      ) : null}
+    </div>
+  );
+
+  const current = tab === "runs" ? "runs" : "workflows";
+  return (
+    <ScreenLayout className={className} title="Workflows" description="Automations that run when something happens, or when you press Run."
+      icon={<Workflow className="size-5" />} tabs={SCREEN_TABS} activeTab={current} onTabChange={setTab}
+      actions={<Button onClick={() => setSheet(true)}><Plus className="mr-1 size-4" />New workflow</Button>}
+      stats={current === "workflows" ? [
+        { label: "Workflows", value: String(all.length) },
+        { label: "Enabled", value: String(all.filter(isOn).length), tone: "positive" },
+        { label: "Disabled", value: String(all.filter((w) => !isOn(w)).length) },
+        { label: "Failed runs", value: typeof failedTotal === "number" ? failedTotal.toLocaleString() : "-", tone: failedTotal ? "negative" : "neutral" },
+      ] : undefined}>
+      {current === "runs" ? (
+        <SplitView list={<RunHistory hideDetail selectedId={run || null} onSelectRun={(id) => setRun(id ?? "")} refreshKey={runsKey} nameFor={(id) => all.find((w) => w.action_id === id)?.name} />}
+          detailOpen={Boolean(run)} onCloseDetail={closeRun} {...expand} detailWidth="lg"
+          detail={run ? <DetailPanel title="Run" subtitle={run} onClose={closeRun} onExpand={() => setView("full")}
+            tabs={[{ id: "run", label: "Run", content: <RunDetail key={run} executionId={run} onChanged={() => setRunsKey((k) => k + 1)} /> }]} /> : null} />
+      ) : <SplitView list={listView} detail={detail} detailOpen={Boolean(selected)} onCloseDetail={closeWorkflow} {...expand} detailWidth="xl" />}
+
+      <FormSheet open={sheet} onOpenChange={setSheet} title="New workflow" description="Starts with a manual trigger and an end step. You add the steps next."
+        footer={<><Button variant="ghost" onClick={() => setSheet(false)}>Cancel</Button><Button onClick={() => setPending({ kind: "create", name: newName.trim() })}>Create</Button></>}>
+        <div className="flex flex-col gap-1"><label className="text-sm font-medium" htmlFor="wf-name">Name</label><Input id="wf-name" value={newName} onChange={(e) => setNewName(e.target.value)} placeholder="Workflow name" /></div>
+      </FormSheet>
+      {pending && copy ? (
+        <ConfirmSpendDialog open tier={copy.tier} title={copy.title} confirmLabel={copy.label} confirming={act.loading} affected={pending.kind === "delete" ? 1 : undefined}
+          description={pending.kind === "run" ? <RunPlan actionId={pending.workflow.action_id} input={input} setInput={setInput} /> : copy.description}
+          onConfirm={() => { if (pending.kind !== "run" || inputOk) void act.mutate(pending); }} onCancel={() => setPending(null)} />
+      ) : null}
+    </ScreenLayout>
+  );
+}