@durablex/react-ui 0.1.0-beta.3

package/package.json

@@ -0,0 +1,86 @@
+{
+  "name": "@durablex/react-ui",
+  "version": "0.1.0-beta.3",
+  "description": "Styled, themeable React components for durablex - the shell, run tables, and status views built on @durablex/react.",
+  "license": "Apache-2.0",
+  "type": "module",
+  "homepage": "https://github.com/easydep/durablex#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/easydep/durablex.git",
+    "directory": "packages/react-ui"
+  },
+  "bugs": {
+    "url": "https://github.com/easydep/durablex/issues"
+  },
+  "keywords": [
+    "durable",
+    "workflow",
+    "react",
+    "components",
+    "ui",
+    "durablex"
+  ],
+  "exports": {
+    ".": {
+      "bun": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": "./src/styles.css"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist",
+    "src",
+    "LICENSE",
+    "NOTICE"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "@durablex/react": "0.1.0-beta.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.18.0",
+    "radix-ui": "^1.5.0",
+    "react-resizable-panels": "^4.11.2",
+    "recharts": "3.8.0",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.6.0"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "prepublishOnly": "tsdown",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  },
+  "devDependencies": {
+    "@tanstack/react-query": "^5.101.2",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "jsdom": "^29.1.1",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "tsdown": "^0.22.3",
+    "typescript": "^5",
+    "vitest": "^4.1.9"
+  }
+}

package/src/components/AnimatedDurablexMark.tsx

@@ -0,0 +1,35 @@
+import { MARK_BARS, RESUME_TRIANGLE } from "./marks-geometry";
+
+export function AnimatedDurablexMark({
+  size = 22,
+  className,
+}: {
+  size?: number;
+  className?: string;
+}) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      className={className ? `dx-mark ${className}` : "dx-mark"}
+      role="img"
+      aria-label="Durablex: a run crashes, then resumes from its last checkpoint"
+    >
+      <g className="dx-bars">
+        {MARK_BARS.map((b, i) => (
+          <rect key={i} {...b} fill="currentColor" />
+        ))}
+      </g>
+      <g className="dx-fault">
+        {MARK_BARS.map((b, i) => (
+          <rect key={i} {...b} fill="var(--dx-fault)" />
+        ))}
+      </g>
+      <g className="dx-resume">
+        <path d={RESUME_TRIANGLE} fill="var(--primary)" />
+      </g>
+    </svg>
+  );
+}

package/src/components/AppStatusBadge.tsx

@@ -0,0 +1,17 @@
+import type { AppStatus } from "@durablex/react";
+import { StatusBadge } from "./StatusBadge";
+
+const APP_BADGE: Record<
+  AppStatus,
+  { status: "succeeded" | "running" | "failed" | "cancelled"; label: string }
+> = {
+  connected: { status: "succeeded", label: "Connected" },
+  syncing: { status: "running", label: "Syncing" },
+  error: { status: "failed", label: "Error" },
+  disconnected: { status: "cancelled", label: "Disconnected" },
+};
+
+export function AppStatusBadge({ status, small }: { status: AppStatus; small?: boolean }) {
+  const m = APP_BADGE[status];
+  return <StatusBadge status={m.status} label={m.label} small={small} />;
+}

package/src/components/AppTag.tsx

@@ -0,0 +1,17 @@
+import { appHue } from "../lib/app-color";
+import { cn } from "../lib/utils";
+
+export function AppTag({ app, className }: { app: string; className?: string }) {
+  return (
+    <span className={cn("inline-flex items-center gap-[6px] text-xs", className)}>
+      <span
+        className="size-[9px] shrink-0 border"
+        style={{
+          backgroundColor: appHue(app),
+          borderColor: "color-mix(in oklch, var(--foreground) 18%, transparent)",
+        }}
+      />
+      {app}
+    </span>
+  );
+}

package/src/components/AppsView.tsx

@@ -0,0 +1,226 @@
+import { useMemo, useState } from "react";
+import { useApps, type AppInfo, type AppStatus, type Runner } from "@durablex/react";
+import { appHue } from "../lib/app-color";
+import { formatRelative } from "../lib/format";
+import { AppStatusBadge } from "./AppStatusBadge";
+import { Meta } from "./Meta";
+import { RunnerLiveBadge } from "./RunnerLiveBadge";
+import { StatusBadge } from "./StatusBadge";
+
+interface AppTile {
+  label: string;
+  value: number;
+  sub: string;
+  color: string;
+}
+
+export function AppsView() {
+  const { data: apps, isLoading } = useApps();
+
+  const tiles = useMemo<AppTile[]>(() => {
+    const by = (s: AppStatus) => apps.filter((a) => a.status === s).length;
+    const issues = by("error") + by("disconnected");
+    return [
+      {
+        label: "Apps",
+        value: apps.length,
+        sub: "connected endpoints",
+        color: "var(--muted-foreground)",
+      },
+      {
+        label: "Connected",
+        value: by("connected"),
+        sub: "healthy",
+        color: "var(--st-succeeded-fg)",
+      },
+      { label: "Syncing", value: by("syncing"), sub: "in progress", color: "var(--st-running-fg)" },
+      {
+        label: "Issues",
+        value: issues,
+        sub: issues ? "need attention" : "all clear",
+        color: issues ? "var(--st-failed-fg)" : "var(--muted-foreground)",
+      },
+    ];
+  }, [apps]);
+
+  return (
+    <div className="content">
+      <div className="stats">
+        {tiles.map((t) => (
+          <div className="stat" key={t.label}>
+            <div className="stat-top">
+              <i className="stat-dot" style={{ background: t.color }} />
+              <span className="stat-label">{t.label}</span>
+            </div>
+            <div className="stat-val">{t.value}</div>
+            <div className="stat-sub">
+              <span>{t.sub}</span>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div className="tbar">
+        <span className="meta">{apps.length} apps</span>
+      </div>
+
+      <div className="tablewrap">
+        <table className="runs apps-table">
+          <thead>
+            <tr>
+              <th>App</th>
+              <th>Status</th>
+              <th className="num">Workflows</th>
+              <th className="num">Runs</th>
+              <th>Last activity</th>
+            </tr>
+          </thead>
+          <tbody>
+            {isLoading && apps.length === 0 ? (
+              <tr className="table-status">
+                <td colSpan={5}>Loading apps…</td>
+              </tr>
+            ) : apps.length === 0 ? (
+              <tr className="table-status">
+                <td colSpan={5}>No apps yet. Start a runner to register one via the SDK.</td>
+              </tr>
+            ) : (
+              apps.map((app) => <AppRow key={app.name} app={app} />)
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+function AppRow({ app }: { app: AppInfo }) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <tr className="row app-row" aria-expanded={open} onClick={() => setOpen((o) => !o)}>
+        <td>
+          <div className="app-cell">
+            <ChevronGlyph />
+            <i className="sq" style={{ background: appHue(app.name) }} />
+            <div className="app-id">
+              <span className="nm">{app.name}</span>
+            </div>
+          </div>
+        </td>
+        <td>
+          <AppStatusBadge status={app.status} />
+        </td>
+        <td className="num">
+          <span className="dur">{app.workflowCount}</span>
+        </td>
+        <td className="num">
+          <span className="dur">{app.runCount}</span>
+        </td>
+        <td>
+          <span className="ts cell-mut">
+            {app.lastSyncAt ? formatRelative(app.lastSyncAt) : "-"}
+          </span>
+        </td>
+      </tr>
+      {open && (
+        <tr className="app-detailrow">
+          <td colSpan={5}>
+            <div className="app-detail-list">
+              <div className="app-sub">Synced workflows · {app.workflows.length}</div>
+              {app.workflows.length ? (
+                app.workflows.map((w) => (
+                  <div className="app-wf" key={w.name}>
+                    <span className="app-wf-name">{w.name}</span>
+                    {w.lastStatus ? (
+                      <StatusBadge status={w.lastStatus} small />
+                    ) : (
+                      <span className="cell-mut" style={{ fontSize: 11 }}>
+                        no runs
+                      </span>
+                    )}
+                  </div>
+                ))
+              ) : (
+                <div className="cell-mut" style={{ fontSize: 12, padding: "4px 0" }}>
+                  No workflows registered.
+                </div>
+              )}
+
+              <div className="app-sub">Connected runners · {app.runners.length}</div>
+              {app.runners.length ? (
+                app.runners.map((rn) => <RunnerRow key={rn.runnerId} runner={rn} />)
+              ) : (
+                <div className="cell-mut" style={{ fontSize: 12, padding: "4px 0" }}>
+                  No runners connected.
+                </div>
+              )}
+            </div>
+          </td>
+        </tr>
+      )}
+    </>
+  );
+}
+
+function RunnerRow({ runner }: { runner: Runner }) {
+  const rows = runnerMetaRows(runner);
+  return (
+    <div className="runner-block">
+      <div className="app-wf">
+        <span className="app-wf-name" title={runner.url}>
+          {runner.runnerId}
+        </span>
+        <span className="runner-row-end">
+          <span className="cell-mut" style={{ fontSize: 11 }}>
+            {runner.lastSeenAt ? formatRelative(runner.lastSeenAt) : "-"}
+          </span>
+          <RunnerLiveBadge live={runner.live} small />
+        </span>
+      </div>
+      {rows.length > 0 && (
+        <div className="metagrid runner-meta">
+          {rows.map((r) => (
+            <Meta key={r.label} label={r.label} value={r.value} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// runnerMetaRows builds the handshake fields a runner actually reported - absent
+// ones are dropped rather than shown blank (no mock fields).
+function runnerMetaRows(r: Runner): { label: string; value: string }[] {
+  const rows: { label: string; value: string }[] = [];
+  if (r.framework) rows.push({ label: "framework", value: r.framework });
+  if (r.runtime) rows.push({ label: "runtime", value: r.runtime });
+  const sdk = [r.sdkName, r.version].filter(Boolean).join(" ");
+  if (sdk) rows.push({ label: "sdk", value: sdk });
+  if (r.region) rows.push({ label: "region", value: r.region });
+  if (r.keyFingerprint) {
+    const match =
+      r.keyMatches === true ? " (matches)" : r.keyMatches === false ? " (mismatch)" : "";
+    rows.push({ label: "key", value: r.keyFingerprint + match });
+  }
+  if (r.url) rows.push({ label: "endpoint", value: r.url });
+  return rows;
+}
+
+function ChevronGlyph() {
+  return (
+    <svg
+      className="app-chev"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.8}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="m9 6 6 6-6 6" />
+    </svg>
+  );
+}

package/src/components/BulkReplayButton.tsx

@@ -0,0 +1,52 @@
+import { Loader2, RotateCcw } from "lucide-react";
+import { toast } from "sonner";
+import { useBulkReplay, type BulkReplayFilter } from "@durablex/react";
+import { useConfirmAction } from "../hooks/use-confirm-action";
+
+// Two-click confirm since it forks every matching finished run at once; the engine
+// caps the fan-out and reports the outcome counts.
+export function BulkReplayButton({ filter }: { filter: BulkReplayFilter }) {
+  const bulk = useBulkReplay();
+  const run = () =>
+    bulk.mutate(filter, {
+      onSuccess: (res) =>
+        toast.success(`Replayed ${res.replayed} run${res.replayed === 1 ? "" : "s"}`, {
+          description: res.capped
+            ? "Only the newest matches were replayed; narrow the filter."
+            : undefined,
+        }),
+      onError: (err) => toast.error(`Bulk replay failed: ${err.message}`),
+    });
+  const { confirming, trigger } = useConfirmAction(run);
+
+  if (bulk.isPending) {
+    return (
+      <span className="fb-btn" aria-disabled>
+        <Loader2 style={{ width: 12, height: 12 }} className="animate-spin" /> Replaying
+      </span>
+    );
+  }
+
+  if (bulk.isSuccess) {
+    const r = bulk.data;
+    const title = `matched ${r.matched}, skipped ${r.skipped}, failed ${r.failed}${r.capped ? ", capped" : ""}`;
+    return (
+      <span className="fb-meta" title={title}>
+        Replayed {r.replayed}
+        {r.capped ? "+" : ""}
+      </span>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      className="fb-btn focusable"
+      title="Replay all finished runs matching the current filter"
+      onClick={trigger}
+    >
+      <RotateCcw style={{ width: 12, height: 12 }} />{" "}
+      {confirming ? "Confirm replay" : "Replay matching"}
+    </button>
+  );
+}

package/src/components/CursorPager.tsx

@@ -0,0 +1,50 @@
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+interface CursorPagerProps {
+  rangeStart: number;
+  rangeEnd: number;
+  canNewer: boolean;
+  canOlder: boolean;
+  onNewer(): void;
+  onOlder(): void;
+}
+
+export function CursorPager({
+  rangeStart,
+  rangeEnd,
+  canNewer,
+  canOlder,
+  onNewer,
+  onOlder,
+}: CursorPagerProps) {
+  if (rangeEnd === 0) return null;
+
+  return (
+    <div className="pager">
+      <span className="pager-range">
+        {rangeStart}-{rangeEnd}
+      </span>
+      <span className="fb-spacer" />
+      <div className="pager-nav">
+        <button
+          type="button"
+          className="pg-btn focusable"
+          disabled={!canNewer}
+          aria-label="Newer runs"
+          onClick={onNewer}
+        >
+          <ChevronLeft />
+        </button>
+        <button
+          type="button"
+          className="pg-btn focusable"
+          disabled={!canOlder}
+          aria-label="Older runs"
+          onClick={onOlder}
+        >
+          <ChevronRight />
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/components/DeliveriesSplit.tsx

@@ -0,0 +1,187 @@
+import { Inbox, RotateCw, Search, Send, X } from "lucide-react";
+import { useMemo, useState } from "react";
+import type { WebhookDelivery } from "@durablex/react";
+import { useDeliveries, useEndpoints } from "@durablex/react";
+import { formatRelative } from "../lib/format";
+import {
+  DELIVERY_LIST_LIMIT,
+  type DeliveryView,
+  deliveryView,
+  endpointMeta,
+  groupDeliveriesByEndpoint,
+  shortUrl,
+} from "../lib/webhook-view";
+import { CodePill, DeliveryBadge } from "./WebhookBadges";
+import { DeliveryDetail } from "./DeliveryDetail";
+
+const SPLIT_FILTERS: [DeliveryView | "all", string][] = [
+  ["all", "All"],
+  ["delivered", "Delivered"],
+  ["retrying", "Retrying"],
+  ["failed", "Failed"],
+  ["queued", "Queued"],
+];
+
+function DeliveryListItem({
+  d,
+  label,
+  failing,
+  selected,
+  onClick,
+}: {
+  d: WebhookDelivery;
+  label: string;
+  failing: boolean;
+  selected: boolean;
+  onClick(): void;
+}) {
+  const view = deliveryView(d);
+  return (
+    <button
+      type="button"
+      className="whs-item"
+      data-selected={selected ? "1" : "0"}
+      onClick={onClick}
+    >
+      <span className="whs-accent" />
+      <div className="whs-item-main">
+        <div className="whs-item-top">
+          <span className="whs-ev">{d.eventKind}</span>
+          <span className="whs-time">{formatRelative(d.createdAt)}</span>
+        </div>
+        <div className="whs-item-bot">
+          <DeliveryBadge view={view} small />
+          <span className="whs-ep">
+            <i
+              className="sq"
+              style={{ background: failing ? "var(--st-failed-fg)" : "var(--primary)" }}
+            />
+            {label}
+          </span>
+          {d.attemptCount > 1 && (
+            <span
+              className={
+                "whs-att-tag" + (view === "failed" ? " err" : view === "retrying" ? " warn" : "")
+              }
+            >
+              <RotateCw />
+              {d.attemptCount}/{d.maxAttempts}
+            </span>
+          )}
+          <CodePill code={d.lastStatusCode} />
+        </div>
+      </div>
+    </button>
+  );
+}
+
+export function DeliveriesSplit({ onOpenRun }: { onOpenRun?: (runId: string) => void }) {
+  const { data } = useDeliveries({ limit: DELIVERY_LIST_LIMIT });
+  const endpointsData = useEndpoints().data;
+  const endpoints = useMemo(() => endpointsData ?? [], [endpointsData]);
+  const all = useMemo(() => data?.deliveries ?? [], [data]);
+  const [view, setView] = useState<DeliveryView | "all">("all");
+  const [query, setQuery] = useState("");
+
+  const byEndpoint = useMemo(() => groupDeliveriesByEndpoint(all), [all]);
+
+  const rows = useMemo(() => {
+    let r = all;
+    if (view !== "all") r = r.filter((d) => deliveryView(d) === view);
+    const q = query.trim().toLowerCase();
+    if (q) {
+      r = r.filter((d) => {
+        const { label } = endpointMeta(d, endpoints, byEndpoint);
+        return (
+          d.eventKind.toLowerCase().includes(q) ||
+          d.id.toLowerCase().includes(q) ||
+          shortUrl(d.url).toLowerCase().includes(q) ||
+          label.toLowerCase().includes(q)
+        );
+      });
+    }
+    return r;
+  }, [all, endpoints, byEndpoint, view, query]);
+
+  const [selId, setSelId] = useState<string | null>(null);
+  const sel = rows.find((d) => d.id === selId) ?? rows[0] ?? null;
+
+  return (
+    <div className="whs">
+      <div className="whs-list">
+        <div className="whs-toolbar">
+          <div className="fb-search-field whs-search2">
+            <Search />
+            <input
+              placeholder="Search deliveries…"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Escape") setQuery("");
+              }}
+            />
+            {query && (
+              <span className="x" onClick={() => setQuery("")} title="Clear">
+                <X style={{ width: 12, height: 12 }} />
+              </span>
+            )}
+          </div>
+          <div className="whs-chips">
+            {SPLIT_FILTERS.map(([k, label]) => (
+              <button
+                key={k}
+                type="button"
+                className="chip"
+                data-on={view === k ? "1" : "0"}
+                onClick={() => setView(k)}
+              >
+                {label}
+              </button>
+            ))}
+          </div>
+          <div className="whs-count">
+            {rows.length === all.length
+              ? `${all.length} deliveries`
+              : `${rows.length} of ${all.length} deliveries`}
+          </div>
+        </div>
+        <div className="whs-scroll">
+          {rows.length ? (
+            rows.map((d) => {
+              const { label, failing } = endpointMeta(d, endpoints, byEndpoint);
+              return (
+                <DeliveryListItem
+                  key={d.id}
+                  d={d}
+                  label={label}
+                  failing={failing}
+                  selected={sel?.id === d.id}
+                  onClick={() => setSelId(d.id)}
+                />
+              );
+            })
+          ) : (
+            <div className="whs-empty">
+              <Inbox className="ico" />
+              <span>No deliveries match.</span>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="whs-detail">
+        {sel ? (
+          <DeliveryDetail key={sel.id} deliveryId={sel.id} embedded onOpenRun={onOpenRun} />
+        ) : (
+          <div className="panel-empty">
+            <div>
+              <Send className="mx-auto mb-2.5 size-6 opacity-60" />
+              <div className="text-foreground mb-1 font-semibold">No delivery selected</div>
+              <div>Pick a delivery from the list to inspect its payload and attempts.</div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}