@graph8/sdk 0.361.0 → 0.370.0

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