@durablex/react-ui 0.1.0-beta.3

package/src/components/PayloadTabs.tsx

@@ -0,0 +1,70 @@
+import { TriangleAlert } from "lucide-react";
+import { useState } from "react";
+import type { LogFrame, Run } from "@durablex/react";
+import { formatError } from "../lib/format";
+import { JsonBlock } from "./JsonBlock";
+import { LogList } from "./LogList";
+
+// The run's panes: Error first (a failed run lands on it), then Input, Result, and
+// the run-level logs. Error and Result are mutually exclusive (a run either failed
+// or produced a result).
+const PAYLOAD_TAB_LABEL = {
+  error: "Error",
+  input: "Input",
+  result: "Result",
+  logs: "Logs",
+} as const;
+type PayloadTab = keyof typeof PAYLOAD_TAB_LABEL;
+
+function resultPlaceholder(status: Run["status"]): string {
+  if (status === "failed") return "- no result (run failed)";
+  if (status === "running" || status === "waiting" || status === "queued") {
+    return "- pending (still running)";
+  }
+  return "null";
+}
+
+export function PayloadTabs({ run, logs }: { run: Run; logs: LogFrame[] }) {
+  const hasResult = run.result !== null && run.result !== undefined;
+  const tabs: PayloadTab[] = [];
+  if (run.error) tabs.push("error");
+  tabs.push("input", "result");
+  if (logs.length > 0) tabs.push("logs");
+  const [tab, setTab] = useState<PayloadTab>(() => (run.error ? "error" : "input"));
+
+  return (
+    <div className="section">
+      <div className="io-tabs">
+        {tabs.map((t) => (
+          <button
+            key={t}
+            type="button"
+            className="io-tab"
+            data-kind={t}
+            data-on={tab === t ? "1" : "0"}
+            onClick={() => setTab(t)}
+          >
+            {t === "error" && <TriangleAlert className="step-tab-ico" />}
+            {PAYLOAD_TAB_LABEL[t]}
+            {t === "result" && !hasResult && <span className="io-null">null</span>}
+          </button>
+        ))}
+      </div>
+      {tab === "error" && run.error ? (
+        <pre className="errbox">{formatError(run.error)}</pre>
+      ) : tab === "logs" ? (
+        <LogList logs={logs} />
+      ) : tab === "input" ? (
+        <JsonBlock value={run.input} />
+      ) : hasResult ? (
+        <JsonBlock value={run.result} />
+      ) : (
+        <div className="jsonwrap">
+          <pre className="json">
+            <span className="nul">{resultPlaceholder(run.status)}</span>
+          </pre>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/ReceiverFormDialog.tsx

@@ -0,0 +1,123 @@
+import { useState } from "react";
+import { toast } from "sonner";
+import type { ReceiverInput, ReceiverPatch, WebhookReceiver } from "@durablex/react";
+import { Button } from "../ui/button";
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "../ui/dialog";
+import { Input } from "../ui/input";
+import { useCreateReceiver, useUpdateReceiver } from "@durablex/react";
+import { FormField } from "./FormField";
+import { SecretReveal } from "./SecretReveal";
+export function ReceiverFormDialog({
+  open,
+  onOpenChange,
+  receiver,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  receiver?: WebhookReceiver;
+}) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        {open && <ReceiverForm receiver={receiver} onClose={() => onOpenChange(false)} />}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function ReceiverForm({ receiver, onClose }: { receiver?: WebhookReceiver; onClose: () => void }) {
+  const editing = receiver != null;
+  const [name, setName] = useState(receiver?.name ?? "");
+  const [eventName, setEventName] = useState(receiver?.eventName ?? "");
+  const [app, setApp] = useState(receiver?.app ?? "");
+  const [rotate, setRotate] = useState(false);
+  const [secret, setSecret] = useState<string | null>(null);
+
+  const create = useCreateReceiver();
+  const update = useUpdateReceiver();
+  const pending = create.isPending || update.isPending;
+  const canSubmit = eventName.trim() !== "" && !pending;
+
+  function submit() {
+    if (!canSubmit) return;
+    if (editing) {
+      const patch: ReceiverPatch = {
+        name: name.trim(),
+        eventName: eventName.trim(),
+        app: app.trim(),
+        rotateSecret: rotate,
+      };
+      update.mutate(
+        { id: receiver.id, patch },
+        {
+          onSuccess: (res) => (res.secret ? setSecret(res.secret) : onClose()),
+          onError: (e: Error) => toast.error(`Could not save receiver: ${e.message}`),
+        },
+      );
+      return;
+    }
+    const input: ReceiverInput = {
+      name: name.trim() || undefined,
+      eventName: eventName.trim(),
+      app: app.trim() || undefined,
+    };
+    create.mutate(input, {
+      onSuccess: (res) => (res.secret ? setSecret(res.secret) : onClose()),
+      onError: (e: Error) => toast.error(`Could not save receiver: ${e.message}`),
+    });
+  }
+
+  if (secret) {
+    return <SecretReveal secret={secret} onDone={onClose} />;
+  }
+
+  return (
+    <>
+      <DialogHeader>
+        <DialogTitle>{editing ? "Edit receiver" : "Add receiver"}</DialogTitle>
+      </DialogHeader>
+      <div className="flex flex-col gap-3 py-1">
+        <FormField label="Name (optional)">
+          <Input value={name} onChange={(e) => setName(e.target.value)} placeholder="Stripe" />
+        </FormField>
+        <FormField label="Maps to event">
+          <Input
+            value={eventName}
+            onChange={(e) => setEventName(e.target.value)}
+            placeholder="stripe.charge"
+          />
+        </FormField>
+        <FormField label="App (optional)">
+          <Input value={app} onChange={(e) => setApp(e.target.value)} placeholder="default app" />
+        </FormField>
+        {editing && (
+          <>
+            <FormField label="Receive URL (immutable)">
+              <Input
+                value={`/webhooks/${receiver.slug}`}
+                readOnly
+                className="text-muted-foreground"
+              />
+            </FormField>
+            <label className="flex items-center gap-2 text-xs">
+              <input
+                type="checkbox"
+                checked={rotate}
+                onChange={(e) => setRotate(e.target.checked)}
+              />
+              Rotate signing secret (the new secret is shown once)
+            </label>
+          </>
+        )}
+      </div>
+      <DialogFooter>
+        <Button size="sm" variant="ghost" onClick={onClose} disabled={pending}>
+          Cancel
+        </Button>
+        <Button size="sm" onClick={submit} disabled={!canSubmit}>
+          {editing ? "Save changes" : "Create receiver"}
+        </Button>
+      </DialogFooter>
+    </>
+  );
+}

package/src/components/ReceiversTab.tsx

@@ -0,0 +1,194 @@
+import { Check, ChevronRight, Copy, Pencil, Plus, Power, Trash2 } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+import type { WebhookReceiver } from "@durablex/react";
+import { useConfirmAction } from "../hooks/use-confirm-action";
+import { useReceivers, useDeleteReceiver, useUpdateReceiver } from "@durablex/react";
+import { formatRelative } from "../lib/format";
+import { receiverLabel } from "../lib/webhook-view";
+import { Facts } from "./Facts";
+import { EndpointBadge } from "./WebhookBadges";
+import { ReceiverFormDialog } from "./ReceiverFormDialog";
+
+export function ReceiversTab() {
+  const receivers = useReceivers().data ?? [];
+  const [adding, setAdding] = useState(false);
+  const [editing, setEditing] = useState<WebhookReceiver | null>(null);
+
+  return (
+    <div className="content">
+      <div className="tbar">
+        <span className="text-muted-foreground font-mono text-[11px]">
+          {receivers.length} receivers
+        </span>
+        <span className="tbar-spacer" />
+        <button type="button" className="btn focusable" onClick={() => setAdding(true)}>
+          <Plus /> Add receiver
+        </button>
+      </div>
+      <div className="tablewrap">
+        {receivers.length === 0 ? (
+          <div className="placeholder">
+            <div className="ph-inner">
+              <h3>No inbound receivers</h3>
+              <p>Add a receiver to map a verified external POST onto a durablex event.</p>
+            </div>
+          </div>
+        ) : (
+          <table className="runs apps-table">
+            <thead>
+              <tr>
+                <th>Source</th>
+                <th>Status</th>
+                <th>Verification</th>
+                <th>Maps to event</th>
+                <th>App</th>
+                <th>Created</th>
+              </tr>
+            </thead>
+            <tbody>
+              {receivers.map((rc) => (
+                <ReceiverRow key={rc.id} rc={rc} onEdit={() => setEditing(rc)} />
+              ))}
+            </tbody>
+          </table>
+        )}
+      </div>
+
+      <ReceiverFormDialog open={adding} onOpenChange={setAdding} />
+      <ReceiverFormDialog
+        open={editing != null}
+        onOpenChange={(o) => !o && setEditing(null)}
+        receiver={editing ?? undefined}
+      />
+    </div>
+  );
+}
+
+function ReceiverRow({ rc, onEdit }: { rc: WebhookReceiver; onEdit(): void }) {
+  const [open, setOpen] = useState(false);
+  const dot = rc.enabled ? "var(--primary)" : "var(--muted-foreground)";
+  const path = `/webhooks/${rc.slug}`;
+
+  return (
+    <>
+      <tr className="row app-row" aria-expanded={open} onClick={() => setOpen(!open)}>
+        <td>
+          <div className="app-cell">
+            <ChevronRight className="app-chev" />
+            <i className="sq" style={{ width: 8, height: 8, background: dot }} />
+            <div className="app-id">
+              <span className="nm">{receiverLabel(rc)}</span>
+              <span className="url">{path}</span>
+            </div>
+          </div>
+        </td>
+        <td>
+          <EndpointBadge health={rc.enabled ? "active" : "disabled"} />
+        </td>
+        <td>
+          <span className="wh-verify ok">
+            <Check /> Signed
+          </span>
+        </td>
+        <td>
+          <span className="wf-name text-xs">{rc.eventName}</span>
+        </td>
+        <td>
+          <span className="text-muted-foreground text-[11px]">{rc.app || "-"}</span>
+        </td>
+        <td>
+          <span className="ts cell-mut">{formatRelative(rc.createdAt)}</span>
+        </td>
+      </tr>
+      {open && (
+        <tr className="app-detailrow">
+          <td colSpan={6}>
+            <div className="wh-od">
+              <div className="wh-od-main">
+                <div className="wh-od-sec">
+                  <div className="wh-od-h">Configuration</div>
+                  <Facts
+                    rows={[
+                      ["Receive URL", path],
+                      ["Receiver id", rc.id],
+                      ["Signature", rc.scheme],
+                      ["Maps to", rc.eventName],
+                    ]}
+                  />
+                </div>
+                <ReceiverActions rc={rc} path={path} onEdit={onEdit} />
+              </div>
+              <div className="wh-od-side">
+                <div className="wh-od-h">Verification</div>
+                <p className="text-muted-foreground text-xs">
+                  Inbound posts are HMAC-verified against this receiver's signing secret. Rotate the
+                  secret from Edit; the new value is shown once.
+                </p>
+              </div>
+            </div>
+          </td>
+        </tr>
+      )}
+    </>
+  );
+}
+
+function ReceiverActions({
+  rc,
+  path,
+  onEdit,
+}: {
+  rc: WebhookReceiver;
+  path: string;
+  onEdit(): void;
+}) {
+  const update = useUpdateReceiver();
+  const del = useDeleteReceiver();
+  const remove = useConfirmAction(() =>
+    del.mutate(rc.id, {
+      onSuccess: () => toast.success("Receiver deleted"),
+      onError: (e: Error) => toast.error(`Could not delete receiver: ${e.message}`),
+    }),
+  );
+
+  function copyUrl() {
+    void navigator.clipboard?.writeText(`${window.location.origin}${path}`).then(
+      () => toast.success("Receive URL copied"),
+      () => undefined,
+    );
+  }
+
+  return (
+    <div className="app-actions" onClick={(e) => e.stopPropagation()}>
+      <button type="button" className="btn focusable" onClick={onEdit}>
+        <Pencil /> Edit
+      </button>
+      <button type="button" className="btn focusable" onClick={copyUrl}>
+        <Copy /> Copy URL
+      </button>
+      <button
+        type="button"
+        className="btn focusable"
+        disabled={update.isPending}
+        onClick={() =>
+          update.mutate(
+            { id: rc.id, patch: { enabled: !rc.enabled } },
+            { onError: (e: Error) => toast.error(`Could not update receiver: ${e.message}`) },
+          )
+        }
+      >
+        <Power /> {rc.enabled ? "Disable" : "Enable"}
+      </button>
+      <button
+        type="button"
+        className="btn focusable"
+        style={{ color: "var(--st-failed-fg)" }}
+        disabled={del.isPending}
+        onClick={remove.trigger}
+      >
+        <Trash2 /> {remove.confirming ? "Confirm delete" : "Delete"}
+      </button>
+    </div>
+  );
+}

package/src/components/ReplayRunDialog.tsx

@@ -0,0 +1,112 @@
+import { useMemo, useState } from "react";
+import { toast } from "sonner";
+import { useReplayRun, type Run } from "@durablex/react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../ui/dialog";
+import { Button } from "../ui/button";
+import { parseJson } from "../lib/json-highlight";
+import { JsonEditor } from "./JsonEditor";
+
+export function ReplayRunDialog({
+  run,
+  open,
+  onOpenChange,
+  onOpenRun,
+}: {
+  run: Run;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onOpenRun?: (runId: string) => void;
+}) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        {open && (
+          <ReplayForm
+            key={run.id}
+            run={run}
+            onOpenRun={onOpenRun}
+            onClose={() => onOpenChange(false)}
+          />
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function ReplayForm({
+  run,
+  onOpenRun,
+  onClose,
+}: {
+  run: Run;
+  onOpenRun?: (runId: string) => void;
+  onClose: () => void;
+}) {
+  const original = useMemo(() => JSON.stringify(run.input ?? {}, null, 2), [run.input]);
+  const [payload, setPayload] = useState(original);
+  const replay = useReplayRun();
+
+  const parsed = useMemo(() => parseJson(payload), [payload]);
+  const canSubmit = parsed.ok && !replay.isPending;
+
+  function submit() {
+    if (!parsed.ok) return;
+    // Send an override only when the payload actually changed, so an unedited
+    // replay records as a plain replay rather than an edited-payload one.
+    const edited = JSON.stringify(parsed.value) !== JSON.stringify(run.input ?? {});
+    replay.mutate(
+      { runId: run.id, input: edited ? parsed.value : undefined },
+      {
+        onSuccess: (forked) => {
+          toast.success("Replay started", {
+            action: onOpenRun
+              ? { label: "View run", onClick: () => onOpenRun(forked.id) }
+              : undefined,
+          });
+          onClose();
+        },
+      },
+    );
+  }
+
+  return (
+    <>
+      <DialogHeader>
+        <DialogTitle>Replay {run.workflowName}</DialogTitle>
+        <DialogDescription>
+          Forks a new run from this input. The original run stays as history.
+        </DialogDescription>
+      </DialogHeader>
+
+      <div className="flex flex-col gap-1.5">
+        <span className="text-xs font-medium">Input</span>
+        <JsonEditor
+          value={payload}
+          onChange={setPayload}
+          invalid={!parsed.ok}
+          ariaLabel="Replay input"
+        />
+        {!parsed.ok ? <span className="text-xs text-destructive">{parsed.error}</span> : null}
+      </div>
+
+      {replay.isError ? (
+        <span className="text-xs text-destructive">
+          Could not replay: {replay.error instanceof Error ? replay.error.message : "unknown error"}
+        </span>
+      ) : null}
+
+      <DialogFooter showCloseButton>
+        <Button disabled={!canSubmit} onClick={submit}>
+          {replay.isPending ? "Replaying..." : "Replay"}
+        </Button>
+      </DialogFooter>
+    </>
+  );
+}

package/src/components/ResumeMark.tsx

@@ -0,0 +1,38 @@
+import { cn } from "../lib/utils";
+import { MARK_BARS, RESUME_TRIANGLE } from "./marks-geometry";
+
+type ResumeMarkProps = {
+  size?: number;
+  variant?: "run" | "load";
+  fault?: boolean;
+  className?: string;
+  title?: string;
+};
+
+export function ResumeMark({ size = 16, variant, fault, className, title }: ResumeMarkProps) {
+  return (
+    <span
+      className={cn("dxmark", variant && `dxm-${variant}`, className)}
+      style={{ width: size, height: size }}
+      role={title ? "img" : undefined}
+      aria-label={title}
+      aria-hidden={title ? undefined : true}
+    >
+      <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+        <g className="dxm-bars">
+          {MARK_BARS.map((b, i) => (
+            <rect key={i} {...b} fill="currentColor" />
+          ))}
+        </g>
+        {fault && (
+          <g className="dxm-fault">
+            {MARK_BARS.map((b, i) => (
+              <rect key={i} {...b} fill="var(--st-failed-fg)" />
+            ))}
+          </g>
+        )}
+        <path className="dxm-tri" d={RESUME_TRIANGLE} fill="var(--dxm-accent, var(--primary))" />
+      </svg>
+    </span>
+  );
+}

package/src/components/RetryFromStepButton.tsx

@@ -0,0 +1,44 @@
+import { Loader2, RotateCw } from "lucide-react";
+import { toast } from "sonner";
+import { useRetryFromStep } from "@durablex/react";
+import { useConfirmAction } from "../hooks/use-confirm-action";
+
+// Retry forks a new run that re-executes from this step, so like Cancel it takes a
+// two-click confirm: the first click arms, the second within the window forks.
+export function RetryFromStepButton({
+  runId,
+  stepName,
+  onOpenRun,
+}: {
+  runId: string;
+  stepName: string;
+  onOpenRun?: (runId: string) => void;
+}) {
+  const retry = useRetryFromStep();
+  const run = () =>
+    retry.mutate(
+      { runId, step: stepName },
+      {
+        onSuccess: (forked) =>
+          toast.success("Retry started", {
+            action: onOpenRun
+              ? { label: "View run", onClick: () => onOpenRun(forked.id) }
+              : undefined,
+          }),
+        onError: (err) => toast.error(`Retry failed: ${err.message}`),
+      },
+    );
+  const { confirming, trigger } = useConfirmAction(run);
+
+  return (
+    <button
+      type="button"
+      className="btn focusable fi-retry"
+      disabled={retry.isPending}
+      onClick={trigger}
+    >
+      {retry.isPending ? <Loader2 className="animate-spin" /> : <RotateCw />}{" "}
+      {confirming ? "Confirm retry" : "Retry from here"}
+    </button>
+  );
+}

package/src/components/RunCancelButton.tsx

@@ -0,0 +1,23 @@
+import { Loader2, X } from "lucide-react";
+import { useCancelRun } from "@durablex/react";
+import { useConfirmAction } from "../hooks/use-confirm-action";
+
+// Cancel is irreversible, so it takes a two-click confirm: the first click arms,
+// the second within the window cancels.
+export function RunCancelButton({ id }: { id: string }) {
+  const cancel = useCancelRun();
+  const { confirming, trigger } = useConfirmAction(() => cancel.mutate(id));
+
+  return (
+    <button
+      type="button"
+      className="btn focusable"
+      style={{ color: "var(--st-failed-fg)" }}
+      disabled={cancel.isPending}
+      onClick={trigger}
+    >
+      {cancel.isPending ? <Loader2 className="animate-spin" /> : <X />}{" "}
+      {cancel.isPending ? "Cancelling" : confirming ? "Confirm cancel" : "Cancel"}
+    </button>
+  );
+}

package/src/components/RunControlHistory.tsx

@@ -0,0 +1,71 @@
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import { useControlActions, type ControlAction } from "@durablex/react";
+import { ACTION_LABELS, actorLabel, describeControlDetail } from "../lib/control-action";
+import { formatRelative } from "../lib/format";
+
+// The runId filter matches entries where this run is the target OR the fork. Show the
+// other run relative to the one being viewed: the fork it produced, or the source it came from.
+function lineage(a: ControlAction, runId: string): { run: string; incoming: boolean } | null {
+  if (a.newRunId && a.newRunId === runId && a.runId) return { run: a.runId, incoming: true };
+  if (a.newRunId && a.runId === runId) return { run: a.newRunId, incoming: false };
+  return null;
+}
+
+function RunLink({ id, onOpenRun }: { id: string; onOpenRun?: (runId: string) => void }) {
+  if (!onOpenRun) return <span className="font-mono text-[11px]">{id}</span>;
+  return (
+    <button
+      type="button"
+      className="hover:text-foreground font-mono text-[11px] underline underline-offset-2"
+      onClick={() => onOpenRun(id)}
+    >
+      {id}
+    </button>
+  );
+}
+
+export function RunControlHistory({
+  runId,
+  onOpenRun,
+}: {
+  runId: string;
+  onOpenRun?: (runId: string) => void;
+}) {
+  const { data: actions } = useControlActions({ runId });
+  if (!actions || actions.length === 0) return null;
+
+  return (
+    <div className="mt-3 rounded-md border">
+      <div className="border-b px-2 py-1.5">
+        <span className="sec-title">Control history</span>
+      </div>
+      <ul className="divide-y">
+        {actions.map((a) => {
+          const detail = describeControlDetail(a);
+          const link = lineage(a, runId);
+          return (
+            <li key={a.id} className="flex items-center gap-2 px-2 py-1.5 text-xs">
+              <span className="font-medium">{ACTION_LABELS[a.action]}</span>
+              {detail && (
+                <span className="text-muted-foreground font-mono text-[11px]">{detail}</span>
+              )}
+              {link && (
+                <span className="text-muted-foreground flex items-center gap-1">
+                  {link.incoming ? (
+                    <ArrowLeft className="size-3 shrink-0" />
+                  ) : (
+                    <ArrowRight className="size-3 shrink-0" />
+                  )}
+                  <RunLink id={link.run} onOpenRun={onOpenRun} />
+                </span>
+              )}
+              <span className="text-muted-foreground ml-auto truncate font-mono text-[11px] whitespace-nowrap">
+                {actorLabel(a.actor)} · {formatRelative(a.createdAt)}
+              </span>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}