@durablex/react-ui 0.1.0-beta.3

package/src/components/TriggerEventDialog.tsx

@@ -0,0 +1,180 @@
+import { useMemo, useState, type ReactNode } from "react";
+import { ZapIcon } from "lucide-react";
+import {
+  useTriggerEvent,
+  useWorkflows,
+  type SendEventResult,
+  type WorkflowDef,
+} from "@durablex/react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../ui/dialog";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+import { parseJson } from "../lib/json-highlight";
+import { ALL_FILTER } from "../lib/run-filters";
+import { AppFilter } from "./filters/AppFilter";
+import { JsonEditor } from "./JsonEditor";
+import { TriggerEventResult } from "./TriggerEventResult";
+
+export function TriggerEventDialog({ onOpenRun }: { onOpenRun?: (runId: string) => void }) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button size="sm" variant="outline">
+          <ZapIcon /> Trigger event
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-md">
+        {open && <TriggerForm onClose={() => setOpen(false)} onOpenRun={onOpenRun} />}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// Concrete (non-wildcard) event names a workflow can be triggered by, for the
+// event-name autocomplete - a workflow with no triggers fires on its own name.
+function knownEventNames(workflows: WorkflowDef[] | undefined): string[] {
+  const names = new Set<string>();
+  for (const w of workflows ?? []) {
+    const triggers = w.triggers ?? [];
+    if (triggers.length === 0) names.add(w.name);
+    for (const t of triggers) {
+      if (t.event && !t.event.endsWith("*")) names.add(t.event);
+    }
+  }
+  return [...names].sort();
+}
+
+function TriggerForm({
+  onClose,
+  onOpenRun,
+}: {
+  onClose: () => void;
+  onOpenRun?: (runId: string) => void;
+}) {
+  const { data: workflows } = useWorkflows();
+  const eventNames = useMemo(() => knownEventNames(workflows), [workflows]);
+
+  const [name, setName] = useState("");
+  const [app, setApp] = useState<string>(ALL_FILTER);
+  const [payload, setPayload] = useState("{}");
+  const [result, setResult] = useState<SendEventResult | null>(null);
+  const fire = useTriggerEvent();
+
+  const parsed = useMemo(() => parseJson(payload), [payload]);
+  const canSubmit = name.trim() !== "" && parsed.ok && !fire.isPending;
+
+  function submit() {
+    if (!parsed.ok) return;
+    fire.mutate(
+      { name: name.trim(), app: app === ALL_FILTER ? undefined : app, data: parsed.value },
+      { onSuccess: setResult },
+    );
+  }
+
+  return (
+    <>
+      <DialogHeader>
+        <DialogTitle>Trigger event</DialogTitle>
+        <DialogDescription>
+          Fire an event into the engine. Every workflow whose trigger matches the name runs.
+        </DialogDescription>
+      </DialogHeader>
+
+      <div className="flex flex-col gap-3">
+        <Field label="Event name" htmlFor="trigger-name">
+          <Input
+            id="trigger-name"
+            list="trigger-event-names"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            placeholder="order.placed"
+            autoFocus
+          />
+          <datalist id="trigger-event-names">
+            {eventNames.map((n) => (
+              <option key={n} value={n} />
+            ))}
+          </datalist>
+        </Field>
+
+        <div className="flex flex-col gap-1.5">
+          <span className="text-xs font-medium">App</span>
+          <div>
+            <AppFilter app={app} onApp={setApp} />
+          </div>
+          <span className="text-muted-foreground text-[11px]">
+            "All apps" fires the event namespace-wide.
+          </span>
+        </div>
+
+        <Field label="Payload" htmlFor="trigger-payload" hint="JSON">
+          <JsonEditor
+            value={payload}
+            onChange={setPayload}
+            invalid={!parsed.ok}
+            ariaLabel="Event payload"
+          />
+          {!parsed.ok ? <span className="text-xs text-destructive">{parsed.error}</span> : null}
+        </Field>
+
+        {result ? (
+          <TriggerEventResult
+            result={result}
+            onOpenRun={
+              onOpenRun
+                ? (id) => {
+                    onClose();
+                    onOpenRun(id);
+                  }
+                : undefined
+            }
+          />
+        ) : null}
+        {fire.isError ? (
+          <span className="text-xs text-destructive">
+            Could not fire event:{" "}
+            {fire.error instanceof Error ? fire.error.message : "unknown error"}
+          </span>
+        ) : null}
+      </div>
+
+      <DialogFooter showCloseButton>
+        <Button disabled={!canSubmit} onClick={submit}>
+          {fire.isPending ? "Firing..." : "Fire event"}
+        </Button>
+      </DialogFooter>
+    </>
+  );
+}
+
+function Field({
+  label,
+  htmlFor,
+  hint,
+  children,
+}: {
+  label: string;
+  htmlFor: string;
+  hint?: string;
+  children: ReactNode;
+}) {
+  return (
+    <div className="flex flex-col gap-1.5">
+      <label htmlFor={htmlFor} className="flex items-center gap-1.5 text-xs font-medium">
+        {label}
+        {hint ? <span className="font-normal text-muted-foreground">{hint}</span> : null}
+      </label>
+      {children}
+    </div>
+  );
+}

package/src/components/TriggerEventResult.tsx

@@ -0,0 +1,61 @@
+import type { SendEventResult, TriggeredOutcome } from "@durablex/react";
+
+function triggerStatus(o: TriggeredOutcome): string {
+  if (o.dropped) return "dropped";
+  if (o.deduped) return "deduped";
+  if (o.debounced) return "debounced";
+  if (o.batched) return "batched";
+  if (o.skipped) return "skipped";
+  return "started";
+}
+
+function TriggerRow({
+  t,
+  onOpenRun,
+}: {
+  t: TriggeredOutcome;
+  onOpenRun?: (runId: string) => void;
+}) {
+  const status = triggerStatus(t);
+  const runId = t.runId;
+  return (
+    <li className="flex items-center justify-between gap-2 font-mono">
+      <span className="truncate">{t.workflow}</span>
+      {runId && onOpenRun ? (
+        <button
+          type="button"
+          className="text-primary hover:underline"
+          onClick={() => onOpenRun(runId)}
+        >
+          {status}
+        </button>
+      ) : (
+        <span className="text-muted-foreground">{status}</span>
+      )}
+    </li>
+  );
+}
+
+export function TriggerEventResult({
+  result,
+  onOpenRun,
+}: {
+  result: SendEventResult;
+  onOpenRun?: (runId: string) => void;
+}) {
+  const triggered = result.triggered ?? [];
+  return (
+    <div className="rounded-lg border border-border bg-muted/40 p-2.5 text-xs">
+      <div className="font-medium text-foreground">
+        Event accepted · woke {result.woke} {result.woke === 1 ? "run" : "runs"}
+      </div>
+      {triggered.length > 0 ? (
+        <ul className="mt-1.5 flex flex-col gap-1">
+          {triggered.map((t, i) => (
+            <TriggerRow key={`${t.workflow}-${i}`} t={t} onOpenRun={onOpenRun} />
+          ))}
+        </ul>
+      ) : null}
+    </div>
+  );
+}

package/src/components/WebhookBadges.tsx

@@ -0,0 +1,69 @@
+import { cn } from "../lib/utils";
+import {
+  codePillClass,
+  DELIVERY_VIEW_LABEL,
+  DELIVERY_VIEW_TOKEN,
+  type DeliveryView,
+  type EndpointHealth,
+} from "../lib/webhook-view";
+import { ResumeMark } from "./ResumeMark";
+
+function StatusPill({
+  token,
+  label,
+  small,
+  live,
+}: {
+  token: string;
+  label: string;
+  small?: boolean;
+  live?: boolean;
+}) {
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center gap-1.5 border border-transparent font-medium leading-none whitespace-nowrap",
+        small ? "h-[17px] px-1.5 text-[10px]" : "h-[19px] px-1.5 text-[11px]",
+      )}
+      style={{ backgroundColor: `var(--st-${token}-bg)`, color: `var(--st-${token}-fg)` }}
+    >
+      {live ? <ResumeMark size={small ? 12 : 13} variant="run" /> : <i className="bdot" />}
+      {label}
+    </span>
+  );
+}
+
+export function DeliveryBadge({ view, small }: { view: DeliveryView; small?: boolean }) {
+  return (
+    <StatusPill
+      token={DELIVERY_VIEW_TOKEN[view]}
+      label={DELIVERY_VIEW_LABEL[view]}
+      small={small}
+      live={view === "retrying"}
+    />
+  );
+}
+
+const HEALTH_TOKEN: Record<EndpointHealth, string> = {
+  active: "succeeded",
+  failing: "failed",
+  disabled: "cancelled",
+};
+const HEALTH_LABEL: Record<EndpointHealth, string> = {
+  active: "Active",
+  failing: "Failing",
+  disabled: "Disabled",
+};
+
+export function EndpointBadge({ health, small }: { health: EndpointHealth; small?: boolean }) {
+  return <StatusPill token={HEALTH_TOKEN[health]} label={HEALTH_LABEL[health]} small={small} />;
+}
+
+export function CodePill({ code }: { code?: number }) {
+  const k = codePillClass(code);
+  return <span className={`wh-code ${k}`}>{k === "none" ? "-" : code}</span>;
+}
+
+export function EventChip({ name }: { name: string }) {
+  return <span className="wh-evchip">{name === "*" ? "all events" : name}</span>;
+}

package/src/components/WebhookStatusBadge.tsx

@@ -0,0 +1,25 @@
+import type { DeliveryStatus } from "@durablex/react";
+import { cn } from "../lib/utils";
+
+// failed = awaiting retry, exhausted = retries spent, dead = a non-retryable response.
+const STATUS_CLASS: Record<DeliveryStatus, string> = {
+  pending: "text-muted-foreground border-border",
+  delivering: "border-sky-500/40 text-sky-600 dark:text-sky-400",
+  succeeded: "border-emerald-500/40 text-emerald-600 dark:text-emerald-400",
+  failed: "border-amber-500/40 text-amber-600 dark:text-amber-400",
+  exhausted: "border-red-500/40 text-red-600 dark:text-red-400",
+  dead: "border-red-500/40 text-red-600 dark:text-red-400",
+};
+
+export function WebhookStatusBadge({ status }: { status: DeliveryStatus }) {
+  return (
+    <span
+      className={cn(
+        "inline-flex border px-1.5 py-0.5 font-mono text-[10px] leading-none",
+        STATUS_CLASS[status],
+      )}
+    >
+      {status}
+    </span>
+  );
+}

package/src/components/WebhooksView.tsx

@@ -0,0 +1,69 @@
+import { Globe, Inbox, Send } from "lucide-react";
+import type { ComponentType } from "react";
+import { useState } from "react";
+import { DeliveriesSplit } from "./DeliveriesSplit";
+import { EndpointsTab } from "./EndpointsTab";
+import { ReceiversTab } from "./ReceiversTab";
+import { useEndpoints, useReceivers } from "@durablex/react";
+import type { WebhookTab } from "../lib/webhook-view";
+
+const TABS = [
+  { key: "deliveries", label: "Deliveries", Icon: Send },
+  { key: "endpoints", label: "Endpoints", Icon: Globe },
+  { key: "receivers", label: "Receivers", Icon: Inbox },
+] as const;
+
+export function WebhooksView({ onOpenRun }: { onOpenRun?: (runId: string) => void }) {
+  const [tab, setTab] = useState<WebhookTab>("deliveries");
+  const endpoints = useEndpoints().data?.length;
+  const receivers = useReceivers().data?.length;
+  const counts: Record<WebhookTab, number | undefined> = {
+    deliveries: undefined,
+    endpoints,
+    receivers,
+  };
+
+  return (
+    <div className="wh-root">
+      <div className="wh-subnav" role="tablist">
+        {TABS.map(({ key, label, Icon }) => (
+          <WebhookTab
+            key={key}
+            label={label}
+            Icon={Icon}
+            count={counts[key]}
+            selected={tab === key}
+            onSelect={() => setTab(key)}
+          />
+        ))}
+      </div>
+      <div className="wh-body">
+        {tab === "deliveries" && <DeliveriesSplit onOpenRun={onOpenRun} />}
+        {tab === "endpoints" && <EndpointsTab />}
+        {tab === "receivers" && <ReceiversTab />}
+      </div>
+    </div>
+  );
+}
+
+function WebhookTab({
+  label,
+  Icon,
+  count,
+  selected,
+  onSelect,
+}: {
+  label: string;
+  Icon: ComponentType<{ className?: string }>;
+  count?: number;
+  selected: boolean;
+  onSelect(): void;
+}) {
+  return (
+    <button type="button" className="wh-tab" role="tab" aria-selected={selected} onClick={onSelect}>
+      <Icon className="wh-tab-ico" />
+      <span>{label}</span>
+      {count != null && <span className="wh-count tabular-nums">{count}</span>}
+    </button>
+  );
+}

package/src/components/WorkflowDetail.tsx

@@ -0,0 +1,149 @@
+import { X } from "lucide-react";
+import { useState, type ReactNode } from "react";
+import { useRuns, useRunStats, useRunTimeSeries, type WorkflowDef } from "@durablex/react";
+import { CursorPager } from "./CursorPager";
+import { Meta } from "./Meta";
+import { RunsTable } from "./RunsTable";
+import { StatsTiles } from "./StatsTiles";
+import { SectionHeader } from "./SectionHeader";
+import { AppTag } from "./AppTag";
+import { ScheduledBadge } from "./ScheduledBadge";
+import { RunCharts } from "./charts/RunCharts";
+import { FlowControlSection } from "./FlowControlSection";
+import { TimeRangeFilter } from "./filters/TimeRangeFilter";
+import { useKeysetPager } from "../hooks/use-keyset-pager";
+import { hasFlowControl } from "../lib/flow-control";
+import { formatNextFire, formatTime } from "../lib/format";
+import { DEFAULT_RUN_SORT, type RunSortKey, toggleRunSort } from "../lib/run-sort";
+import { DEFAULT_TIME_RANGE, seriesBucketSeconds, timeLabel, windowSince } from "../lib/time-range";
+
+const RUNS_PAGE_SIZE = 30;
+
+export function WorkflowDetail({
+  workflow,
+  onClose,
+  onOpenRun,
+  renderRunAction,
+}: {
+  workflow: WorkflowDef;
+  onClose(): void;
+  onOpenRun(runId: string): void;
+  renderRunAction?: (workflow: WorkflowDef) => ReactNode;
+}) {
+  const [time, setTime] = useState(DEFAULT_TIME_RANGE);
+  const [sort, setSort] = useState(DEFAULT_RUN_SORT);
+  const onSort = (key: RunSortKey) => setSort((prev) => toggleRunSort(prev, key));
+
+  const since = windowSince(time);
+  const bucket = seriesBucketSeconds(time);
+  const scope = { app: workflow.app, workflow: workflow.name };
+
+  // Reset to the newest page whenever the time range or sort changes.
+  const { cursor, canNewer, range, goOlder, goNewer } = useKeysetPager(
+    `${time}|${sort.key}-${sort.dir}`,
+    RUNS_PAGE_SIZE,
+  );
+
+  const stats = useRunStats({ ...scope, since });
+  // Concurrency in-flight/queued are point-in-time, so they read an unwindowed count
+  // (a run executing longer than the selected range still counts as in flight).
+  const liveStats = useRunStats(scope);
+  const { data: series, isLoading: seriesLoading } = useRunTimeSeries({ ...scope, since, bucket });
+  const runs = useRuns({
+    ...scope,
+    since,
+    sort: sort.key,
+    dir: sort.dir,
+    limit: RUNS_PAGE_SIZE,
+    cursor,
+  });
+  const rows = runs.data?.runs ?? [];
+  const nextCursor = runs.data?.nextCursor ?? null;
+  const { start: rangeStart, end: rangeEnd } = range(rows.length);
+  const schedule = workflow.scheduled ? workflow.schedules?.[0] : undefined;
+
+  return (
+    <div className="run-panel">
+      <div className="panel-head">
+        <div className="ph-top">
+          <h2>
+            <span className="h2-name">{workflow.name}</span>
+          </h2>
+          <div className="ph-actions">
+            {renderRunAction?.(workflow)}
+            <button
+              type="button"
+              className="iconbtn focusable"
+              aria-label="Close"
+              onClick={onClose}
+            >
+              <X />
+            </button>
+          </div>
+        </div>
+        <div className="ph-status">
+          <AppTag app={workflow.app} />
+          {schedule && (
+            <span className="step-cell">
+              <ScheduledBadge compact />
+              <span className="font-mono text-xs">{schedule.cron}</span>
+            </span>
+          )}
+        </div>
+      </div>
+
+      <div className="panel-body">
+        <div className="metagrid">
+          <Meta label="App" value={workflow.app} />
+          <Meta label="Max attempts" value={String(workflow.maxAttempts)} />
+          <Meta label="Backoff" value={workflow.backoff} />
+          <Meta label="Schedule" value={schedule ? schedule.cron : "Not scheduled"} />
+          {schedule && <Meta label="Next fire" value={formatNextFire(schedule.nextFireAt)} />}
+          <Meta label="Registered" value={formatTime(workflow.registeredAt)} />
+          <Meta label="Updated" value={formatTime(workflow.updatedAt)} />
+        </div>
+
+        {hasFlowControl(workflow.flowControl) && workflow.flowControl && (
+          <FlowControlSection
+            fc={workflow.flowControl}
+            app={workflow.app}
+            workflow={workflow.name}
+            stats={liveStats.data}
+          />
+        )}
+
+        <StatsTiles stats={stats.data} rangeLabel={timeLabel(time)} />
+        <div className="filterbar">
+          <TimeRangeFilter time={time} onTime={setTime} />
+        </div>
+
+        <RunCharts series={series} loading={seriesLoading} />
+
+        <SectionHeader>Runs</SectionHeader>
+        <RunsTable
+          rows={rows}
+          selectedId={null}
+          onSelect={onOpenRun}
+          sort={sort}
+          onSort={onSort}
+          loading={runs.isLoading}
+          isError={runs.isError}
+          error={runs.error}
+          emptyTitle="No runs yet"
+          emptyMessage="This workflow has no runs in the selected window."
+          hideColumns={["workflow", "app"]}
+        />
+        {!runs.isLoading && rows.length > 0 && (
+          <CursorPager
+            rangeStart={rangeStart}
+            rangeEnd={rangeEnd}
+            canNewer={canNewer}
+            canOlder={nextCursor != null}
+            onNewer={goNewer}
+            onOlder={() => goOlder(nextCursor)}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/WorkflowRunAction.tsx

@@ -0,0 +1,46 @@
+import { useState } from "react";
+import { Play } from "lucide-react";
+import type { WorkflowDef } from "@durablex/react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+import { workflowRunPlan } from "../lib/workflow-run";
+import { WorkflowRunDialog } from "./WorkflowRunDialog";
+
+export function WorkflowRunAction({
+  workflow,
+  onOpenRun,
+}: {
+  workflow: WorkflowDef;
+  onOpenRun(runId: string): void;
+}) {
+  const [open, setOpen] = useState(false);
+
+  if (!workflowRunPlan(workflow).runnable) {
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <span className="btn" aria-disabled>
+            <Play /> Run
+          </span>
+        </TooltipTrigger>
+        <TooltipContent>
+          This workflow only runs on a schedule, so there is no event to fire. Manual fire-now lands
+          in a later release.
+        </TooltipContent>
+      </Tooltip>
+    );
+  }
+
+  return (
+    <>
+      <button type="button" className="btn focusable" onClick={() => setOpen(true)}>
+        <Play /> Run
+      </button>
+      <WorkflowRunDialog
+        workflow={workflow}
+        open={open}
+        onOpenChange={setOpen}
+        onOpenRun={onOpenRun}
+      />
+    </>
+  );
+}