@durablex/react-ui 0.1.0-beta.3

package/src/components/DeliveryDetail.tsx

@@ -0,0 +1,188 @@
+import { Loader2, RotateCw, X } from "lucide-react";
+import { toast } from "sonner";
+import type { AttemptOutcome, WebhookDeliveryAttempt } from "@durablex/react";
+import { useConfirmAction } from "../hooks/use-confirm-action";
+import { useDelivery, useRedeliverDelivery } from "@durablex/react";
+import { formatDuration, formatNextFire, formatTime } from "../lib/format";
+import { JsonBlock } from "./JsonBlock";
+import { Meta } from "./Meta";
+import { WebhookStatusBadge } from "./WebhookStatusBadge";
+
+const OUTCOME_CLASS: Record<AttemptOutcome, string> = {
+  succeeded: "text-emerald-600 dark:text-emerald-400",
+  http_error: "text-amber-600 dark:text-amber-400",
+  timeout: "text-amber-600 dark:text-amber-400",
+  connection_error: "text-red-600 dark:text-red-400",
+  skipped: "text-muted-foreground",
+};
+
+function AttemptRow({ a }: { a: WebhookDeliveryAttempt }) {
+  return (
+    <div className="border-border flex flex-col gap-1 border-b px-3 py-2 last:border-b-0">
+      <div className="flex items-center gap-2 text-[11px]">
+        <span className="text-muted-foreground font-mono">#{a.attempt}</span>
+        <span className={"font-mono " + (OUTCOME_CLASS[a.outcome] ?? "text-foreground")}>
+          {a.outcome}
+        </span>
+        {a.statusCode != null && a.statusCode > 0 && (
+          <span className="font-mono tabular-nums">HTTP {a.statusCode}</span>
+        )}
+        <span className="text-muted-foreground ml-auto font-mono">
+          {formatDuration(a.durationMs)}
+        </span>
+        <span className="text-muted-foreground font-mono">{formatTime(a.createdAt)}</span>
+      </div>
+      {a.error && (
+        <div className="text-red-600 dark:text-red-400 font-mono text-[11px] break-words">
+          {a.error}
+        </div>
+      )}
+      {a.responseSnippet && (
+        <div className="text-muted-foreground bg-muted/40 max-h-24 overflow-y-auto px-2 py-1 font-mono text-[11px] break-words whitespace-pre-wrap">
+          {a.responseSnippet}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function DeliveryDetail({
+  deliveryId,
+  onClose,
+  onOpenRun,
+  embedded,
+}: {
+  deliveryId: string;
+  onClose?: () => void;
+  onOpenRun?: (runId: string) => void;
+  embedded?: boolean;
+}) {
+  const { data, isLoading, isError, error } = useDelivery(deliveryId);
+
+  if (isLoading) {
+    return (
+      <div className="run-panel">
+        <div className="steps-loading">
+          <Loader2 className="size-4 animate-spin" />
+        </div>
+      </div>
+    );
+  }
+  if (isError || !data) {
+    return (
+      <div className="run-panel">
+        <div className="fi-empty">
+          {error instanceof Error ? error.message : "Delivery not found."}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="run-panel">
+      <div className="panel-head">
+        <div className="ph-top">
+          <h2>
+            <WebhookStatusBadge status={data.status} />
+            <span className="h2-name font-mono text-[13px]">{data.eventKind}</span>
+          </h2>
+          <div className="ph-actions">
+            {data.status !== "pending" && data.status !== "delivering" && (
+              <RedeliverButton id={data.id} />
+            )}
+            {!embedded && (
+              <button
+                type="button"
+                className="iconbtn focusable"
+                aria-label="Close"
+                onClick={onClose}
+              >
+                <X className="size-3.5" />
+              </button>
+            )}
+          </div>
+        </div>
+        <div className="ph-status">
+          <span className="runid" title={data.url}>
+            <span className="runid-text">{data.url}</span>
+          </span>
+        </div>
+      </div>
+
+      <div className="min-h-0 flex-1 overflow-y-auto">
+        <div className="metagrid">
+          <Meta label="App" value={data.app || "-"} />
+          <Meta label="Attempts" value={`${data.attemptCount}/${data.maxAttempts}`} />
+          {data.sourceRunId != null && (
+            <SourceRunMeta runId={data.sourceRunId} onOpenRun={onOpenRun} />
+          )}
+          {data.endpointId && <Meta label="Endpoint" value={data.endpointId} />}
+          {data.nextAttemptAt && (
+            <Meta label="Next attempt" value={formatNextFire(data.nextAttemptAt)} />
+          )}
+          <Meta label="Created" value={formatTime(data.createdAt)} />
+        </div>
+
+        <div className="section">
+          <div className="text-muted-foreground border-border border-b px-3 py-1.5 text-[10px] tracking-wider uppercase">
+            Attempts ({data.attempts.length})
+          </div>
+          {data.attempts.length === 0 ? (
+            <div className="text-muted-foreground px-3 py-3 text-[11px]">
+              No attempts yet; awaiting the sweeper.
+            </div>
+          ) : (
+            data.attempts.map((a) => <AttemptRow key={a.id} a={a} />)
+          )}
+        </div>
+
+        {data.payload != null && (
+          <div className="section">
+            <div className="text-muted-foreground border-border border-b px-3 py-1.5 text-[10px] tracking-wider uppercase">
+              Payload
+            </div>
+            <div className="px-3 py-2">
+              <JsonBlock value={data.payload} />
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function RedeliverButton({ id }: { id: string }) {
+  const redeliver = useRedeliverDelivery();
+  const { confirming, trigger } = useConfirmAction(() =>
+    redeliver.mutate(id, {
+      onSuccess: () => toast.success("Delivery re-queued"),
+      onError: (e: Error) => toast.error(`Could not redeliver: ${e.message}`),
+    }),
+  );
+  return (
+    <button
+      type="button"
+      className="btn focusable"
+      disabled={redeliver.isPending}
+      onClick={trigger}
+    >
+      {redeliver.isPending ? (
+        <Loader2 className="size-3 animate-spin" />
+      ) : (
+        <RotateCw className="size-3" />
+      )}
+      {confirming ? "Confirm redeliver" : "Redeliver"}
+    </button>
+  );
+}
+
+function SourceRunMeta({ runId, onOpenRun }: { runId: string; onOpenRun?: (id: string) => void }) {
+  return (
+    <Meta
+      label="Source run"
+      value={runId}
+      onClick={onOpenRun ? () => onOpenRun(runId) : undefined}
+      title={`Open run ${runId}`}
+    />
+  );
+}

package/src/components/DurablexLogo.tsx

@@ -0,0 +1,12 @@
+import { AnimatedDurablexMark } from "./AnimatedDurablexMark";
+
+export function DurablexLogo() {
+  return (
+    <span className="text-foreground inline-flex items-center gap-2.5">
+      <AnimatedDurablexMark size={30} className="shrink-0" />
+      <span className="text-xl font-semibold tracking-tight group-data-[collapsible=icon]:hidden">
+        Durable<span className="text-primary">x</span>
+      </span>
+    </span>
+  );
+}

package/src/components/EndpointFormDialog.tsx

@@ -0,0 +1,153 @@
+import { useState } from "react";
+import { toast } from "sonner";
+import {
+  type EndpointInput,
+  type EndpointPatch,
+  SUBSCRIBABLE_EVENT_KINDS,
+  type SubscribableEventKind,
+  type WebhookEndpoint,
+} from "@durablex/react";
+import { Button } from "../ui/button";
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "../ui/dialog";
+import { Input } from "../ui/input";
+import { useCreateEndpoint, useUpdateEndpoint } from "@durablex/react";
+import { FormField } from "./FormField";
+import { SecretReveal } from "./SecretReveal";
+export function EndpointFormDialog({
+  open,
+  onOpenChange,
+  endpoint,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  endpoint?: WebhookEndpoint;
+}) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        {open && <EndpointForm endpoint={endpoint} onClose={() => onOpenChange(false)} />}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function EndpointForm({ endpoint, onClose }: { endpoint?: WebhookEndpoint; onClose: () => void }) {
+  const editing = endpoint != null;
+  const [name, setName] = useState(endpoint?.name ?? "");
+  const [url, setUrl] = useState(endpoint?.url ?? "");
+  const [app, setApp] = useState(endpoint?.app ?? "");
+  const [kinds, setKinds] = useState<Set<SubscribableEventKind>>(
+    () => new Set((endpoint?.eventKinds ?? []).filter(isSubscribable)),
+  );
+  const [rotate, setRotate] = useState(false);
+  const [secret, setSecret] = useState<string | null>(null);
+
+  const create = useCreateEndpoint();
+  const update = useUpdateEndpoint();
+  const pending = create.isPending || update.isPending;
+  const canSubmit = url.trim() !== "" && kinds.size > 0 && !pending;
+
+  function toggleKind(k: SubscribableEventKind) {
+    setKinds((prev) => {
+      const next = new Set(prev);
+      if (next.has(k)) next.delete(k);
+      else next.add(k);
+      return next;
+    });
+  }
+
+  function submit() {
+    if (!canSubmit) return;
+    const eventKinds = [...kinds];
+    if (editing) {
+      const patch: EndpointPatch = {
+        name: name.trim(),
+        url: url.trim(),
+        app: app.trim(),
+        eventKinds,
+        rotateSecret: rotate,
+      };
+      update.mutate(
+        { id: endpoint.id, patch },
+        {
+          onSuccess: (res) => {
+            if (res.secret) setSecret(res.secret);
+            else onClose();
+          },
+          onError: (e: Error) => toast.error(`Could not save endpoint: ${e.message}`),
+        },
+      );
+      return;
+    }
+    const input: EndpointInput = {
+      name: name.trim() || undefined,
+      url: url.trim(),
+      app: app.trim() || undefined,
+      eventKinds,
+    };
+    create.mutate(input, {
+      onSuccess: (res) => (res.secret ? setSecret(res.secret) : onClose()),
+      onError: (e: Error) => toast.error(`Could not save endpoint: ${e.message}`),
+    });
+  }
+
+  if (secret) {
+    return <SecretReveal secret={secret} onDone={onClose} />;
+  }
+
+  return (
+    <>
+      <DialogHeader>
+        <DialogTitle>{editing ? "Edit endpoint" : "Add endpoint"}</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="Acme Production"
+          />
+        </FormField>
+        <FormField label="Destination URL">
+          <Input
+            value={url}
+            onChange={(e) => setUrl(e.target.value)}
+            placeholder="https://hooks.example.com/dx"
+          />
+        </FormField>
+        <FormField label="App (optional, restricts to one app)">
+          <Input value={app} onChange={(e) => setApp(e.target.value)} placeholder="all apps" />
+        </FormField>
+        <fieldset className="flex flex-col gap-1.5">
+          <legend className="text-muted-foreground mb-1 text-[11px] tracking-wide uppercase">
+            Subscribed events
+          </legend>
+          {SUBSCRIBABLE_EVENT_KINDS.map((k) => (
+            <label key={k} className="flex items-center gap-2 font-mono text-xs">
+              <input type="checkbox" checked={kinds.has(k)} onChange={() => toggleKind(k)} />
+              {k}
+            </label>
+          ))}
+        </fieldset>
+        {editing && (
+          <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 endpoint"}
+        </Button>
+      </DialogFooter>
+    </>
+  );
+}
+
+function isSubscribable(k: string): k is SubscribableEventKind {
+  return (SUBSCRIBABLE_EVENT_KINDS as readonly string[]).includes(k);
+}

package/src/components/EndpointRow.tsx

@@ -0,0 +1,172 @@
+import { ChevronRight, ExternalLink, Pencil, Power, Trash2 } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+import type { WebhookDelivery, WebhookEndpoint, WebhookEndpointStats } from "@durablex/react";
+import { useConfirmAction } from "../hooks/use-confirm-action";
+import { useDeleteEndpoint, useUpdateEndpoint } from "@durablex/react";
+import { formatRelative } from "../lib/format";
+import {
+  deliveryView,
+  endpointHealth,
+  endpointLabel,
+  shortUrl,
+  successRate,
+} from "../lib/webhook-view";
+import { Facts } from "./Facts";
+import { CodePill, DeliveryBadge, EndpointBadge, EventChip } from "./WebhookBadges";
+
+export function EndpointRow({
+  ep,
+  stats,
+  recent,
+  onEdit,
+}: {
+  ep: WebhookEndpoint;
+  stats?: WebhookEndpointStats;
+  recent: WebhookDelivery[];
+  onEdit(): void;
+}) {
+  const [open, setOpen] = useState(false);
+  const health = endpointHealth(ep, recent);
+  const rate = successRate(stats);
+  const dot =
+    health === "failing"
+      ? "var(--st-failed-fg)"
+      : health === "disabled"
+        ? "var(--muted-foreground)"
+        : "var(--primary)";
+
+  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">{endpointLabel(ep)}</span>
+              <span className="url">{shortUrl(ep.url)}</span>
+            </div>
+          </div>
+        </td>
+        <td>
+          <EndpointBadge health={health} />
+        </td>
+        <td>
+          <div className="wh-evchips">
+            {ep.eventKinds.slice(0, 2).map((e) => (
+              <EventChip key={e} name={e} />
+            ))}
+            {ep.eventKinds.length > 2 && (
+              <span className="wh-evmore">+{ep.eventKinds.length - 2}</span>
+            )}
+          </div>
+        </td>
+        <td className="num">
+          <span className="dur">{rate == null ? "-" : `${rate}%`}</span>
+        </td>
+        <td className="num">
+          <span className="dur">{stats?.delivered ?? 0}</span>
+        </td>
+        <td>
+          <span className="ts cell-mut">
+            {stats?.lastDelivery ? formatRelative(stats.lastDelivery) : "-"}
+          </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={[
+                      ["URL", ep.url],
+                      ["Endpoint id", ep.id],
+                      ["Signing secret", "sealed - rotate to reset"],
+                      ["Created", formatRelative(ep.createdAt)],
+                    ]}
+                  />
+                </div>
+                <div className="wh-od-sec">
+                  <div className="wh-od-h">Subscribed events · {ep.eventKinds.length}</div>
+                  <div className="wh-evchips wrap">
+                    {ep.eventKinds.map((e) => (
+                      <EventChip key={e} name={e} />
+                    ))}
+                  </div>
+                </div>
+                <EndpointActions ep={ep} onEdit={onEdit} />
+              </div>
+              <div className="wh-od-side">
+                <div className="wh-od-h">Recent deliveries · {recent.length}</div>
+                {recent.length ? (
+                  <div className="wh-reclist">
+                    {recent.slice(0, 12).map((d) => (
+                      <div className="wh-rec" key={d.id}>
+                        <span className="wh-rec-ev">{d.eventKind}</span>
+                        <span className="wh-rec-meta">
+                          <CodePill code={d.lastStatusCode} />
+                          <DeliveryBadge view={deliveryView(d)} small />
+                          <span className="wh-rec-at">{formatRelative(d.createdAt)}</span>
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                ) : (
+                  <div className="wh-rec-empty">No deliveries yet.</div>
+                )}
+              </div>
+            </div>
+          </td>
+        </tr>
+      )}
+    </>
+  );
+}
+
+function EndpointActions({ ep, onEdit }: { ep: WebhookEndpoint; onEdit(): void }) {
+  const update = useUpdateEndpoint();
+  const del = useDeleteEndpoint();
+  const remove = useConfirmAction(() =>
+    del.mutate(ep.id, {
+      onSuccess: () => toast.success("Endpoint deleted"),
+      onError: (e: Error) => toast.error(`Could not delete endpoint: ${e.message}`),
+    }),
+  );
+
+  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"
+        disabled={update.isPending}
+        onClick={() =>
+          update.mutate(
+            { id: ep.id, patch: { enabled: !ep.enabled } },
+            { onError: (e: Error) => toast.error(`Could not update endpoint: ${e.message}`) },
+          )
+        }
+      >
+        <Power /> {ep.enabled ? "Disable" : "Enable"}
+      </button>
+      <a className="btn focusable" href={ep.url} target="_blank" rel="noreferrer">
+        <ExternalLink /> Open endpoint
+      </a>
+      <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/EndpointsTab.tsx

@@ -0,0 +1,83 @@
+import { Plus } from "lucide-react";
+import { useMemo, useState } from "react";
+import type { WebhookEndpoint } from "@durablex/react";
+import { useDeliveries, useEndpoints, useEndpointStats } from "@durablex/react";
+import { DELIVERY_LIST_LIMIT, groupDeliveriesByEndpoint } from "../lib/webhook-view";
+import { EndpointFormDialog } from "./EndpointFormDialog";
+import { EndpointRow } from "./EndpointRow";
+
+const STATS_WINDOW = 24 * 60 * 60 * 1000;
+
+export function EndpointsTab() {
+  // Lazy initializer: reads the clock once at mount so the boundary is stable across re-renders.
+  const [since] = useState(() => new Date(Date.now() - STATS_WINDOW).toISOString());
+  const endpoints = useEndpoints().data ?? [];
+  const statsData = useEndpointStats(since).data;
+  const deliveriesData = useDeliveries({ limit: DELIVERY_LIST_LIMIT }).data?.deliveries;
+  const [adding, setAdding] = useState(false);
+  const [editing, setEditing] = useState<WebhookEndpoint | null>(null);
+
+  const statsById = useMemo(
+    () => new Map((statsData ?? []).map((s) => [s.endpointId, s])),
+    [statsData],
+  );
+  const recentById = useMemo(
+    () => groupDeliveriesByEndpoint(deliveriesData ?? []),
+    [deliveriesData],
+  );
+
+  return (
+    <div className="content">
+      <div className="tbar">
+        <span className="text-muted-foreground font-mono text-[11px]">
+          {endpoints.length} endpoints
+        </span>
+        <span className="tbar-spacer" />
+        <button type="button" className="btn focusable" onClick={() => setAdding(true)}>
+          <Plus /> Add endpoint
+        </button>
+      </div>
+      <div className="tablewrap">
+        {endpoints.length === 0 ? (
+          <div className="placeholder">
+            <div className="ph-inner">
+              <h3>No outbound endpoints</h3>
+              <p>Add an endpoint to deliver run lifecycle events to an external URL.</p>
+            </div>
+          </div>
+        ) : (
+          <table className="runs apps-table">
+            <thead>
+              <tr>
+                <th>Endpoint</th>
+                <th>Status</th>
+                <th>Events</th>
+                <th className="num">Success</th>
+                <th className="num">Sent · 24h</th>
+                <th>Last delivery</th>
+              </tr>
+            </thead>
+            <tbody>
+              {endpoints.map((ep) => (
+                <EndpointRow
+                  key={ep.id}
+                  ep={ep}
+                  stats={statsById.get(ep.id)}
+                  recent={recentById.get(ep.id) ?? []}
+                  onEdit={() => setEditing(ep)}
+                />
+              ))}
+            </tbody>
+          </table>
+        )}
+      </div>
+
+      <EndpointFormDialog open={adding} onOpenChange={setAdding} />
+      <EndpointFormDialog
+        open={editing != null}
+        onOpenChange={(o) => !o && setEditing(null)}
+        endpoint={editing ?? undefined}
+      />
+    </div>
+  );
+}