@durablex/react-ui 0.1.0-beta.3

package/src/lib/time-range.ts

@@ -0,0 +1,81 @@
+export const DEFAULT_TIME_RANGE = "1h";
+
+export const TIME_OPTIONS: [string, string][] = [
+  ["30s", "Last 30 seconds"],
+  ["1m", "Last 1 minute"],
+  ["10m", "Last 10 minutes"],
+  ["30m", "Last 30 minutes"],
+  ["1h", "Last 1 hour"],
+  ["12h", "Last 12 hours"],
+  ["1d", "Last 1 day"],
+  ["3d", "Last 3 days"],
+  ["7d", "Last 7 days"],
+  ["30d", "Last 30 days"],
+];
+
+const UNIT_MS: Record<string, number> = {
+  s: 1_000,
+  m: 60_000,
+  h: 3_600_000,
+  d: 86_400_000,
+};
+
+export function parseWindowMs(time: string): number | null {
+  const match = /^(\d+)([smhd])$/.exec(time.trim());
+  if (!match) return null;
+  const [, count, unit] = match;
+  const ms = unit ? UNIT_MS[unit] : undefined;
+  return ms ? Number(count) * ms : null;
+}
+
+export function timeLabel(time: string): string {
+  const preset = TIME_OPTIONS.find(([key]) => key === time);
+  return preset ? preset[1] : `Last ${time}`;
+}
+
+// Quantize "now" so the cutoff is stable across renders (an unquantized value would
+// change every millisecond and thrash the query cache). The window still slides
+// forward once per bucket; freshness within a bucket comes from polling.
+const SINCE_BUCKET_MS = 15_000;
+
+// Widths the series chart snaps to (1m..1d). Targeting ~48 buckets across the window
+// keeps bars readable.
+const NICE_BUCKET_SECONDS = [60, 300, 900, 1800, 3600, 21_600, 86_400];
+const WIDEST_BUCKET_SECONDS = 86_400;
+const TARGET_BUCKETS = 48;
+const DEFAULT_BUCKET_SECONDS = 3600;
+
+export function seriesBucketSeconds(time: string): number {
+  const windowMs = parseWindowMs(time);
+  if (windowMs == null) return DEFAULT_BUCKET_SECONDS;
+  const ideal = windowMs / 1000 / TARGET_BUCKETS;
+  return NICE_BUCKET_SECONDS.find((s) => s >= ideal) ?? WIDEST_BUCKET_SECONDS;
+}
+
+export const TIME_ZONES = ["local", "utc"] as const;
+export type TimeZoneMode = (typeof TIME_ZONES)[number];
+
+// The viewer's auto-detected IANA zone (e.g. "Europe/Madrid"), shown so "Local"
+// names the zone it resolves to.
+export const localTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+// An undefined timeZone renders in the viewer's local zone (Intl's default).
+export function bucketTickLabel(
+  ts: string,
+  bucketSeconds: number,
+  tz: TimeZoneMode = "local",
+): string {
+  const d = new Date(ts);
+  const timeZone = tz === "utc" ? "UTC" : undefined;
+  if (bucketSeconds >= 86_400) {
+    return d.toLocaleDateString([], { month: "short", day: "numeric", timeZone });
+  }
+  return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", timeZone });
+}
+
+export function windowSince(time: string): string | undefined {
+  const windowMs = parseWindowMs(time);
+  if (windowMs == null) return undefined;
+  const now = Math.floor(Date.now() / SINCE_BUCKET_MS) * SINCE_BUCKET_MS;
+  return new Date(now - windowMs).toISOString();
+}

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/lib/webhook-view.test.ts

@@ -0,0 +1,176 @@
+import { describe, expect, it } from "vitest";
+import type {
+  DeliveryStatus,
+  WebhookDelivery,
+  WebhookEndpoint,
+  WebhookEndpointStats,
+  WebhookReceiver,
+} from "@durablex/react";
+import {
+  codePillClass,
+  deliveryView,
+  endpointHealth,
+  endpointLabel,
+  endpointMeta,
+  groupDeliveriesByEndpoint,
+  receiverLabel,
+  shortUrl,
+  successRate,
+} from "./webhook-view";
+
+function delivery(over: Partial<WebhookDelivery> = {}): WebhookDelivery {
+  return {
+    id: "d1",
+    app: "billing",
+    url: "https://hooks.test/x",
+    eventKind: "run.failed",
+    status: "succeeded",
+    attemptCount: 1,
+    maxAttempts: 5,
+    createdAt: "2030-01-01T00:00:00Z",
+    updatedAt: "2030-01-01T00:00:00Z",
+    ...over,
+  };
+}
+
+function endpoint(over: Partial<WebhookEndpoint> = {}): WebhookEndpoint {
+  return {
+    id: "e1",
+    url: "https://hooks.test/x",
+    scheme: "hmac_sha256",
+    eventKinds: ["run.failed"],
+    enabled: true,
+    createdAt: "2030-01-01T00:00:00Z",
+    updatedAt: "2030-01-01T00:00:00Z",
+    ...over,
+  };
+}
+
+describe("deliveryView", () => {
+  const cases: [DeliveryStatus, number, string][] = [
+    ["succeeded", 1, "delivered"],
+    ["exhausted", 3, "failed"],
+    ["dead", 3, "failed"],
+    ["delivering", 1, "retrying"],
+    ["failed", 2, "retrying"],
+    ["pending", 0, "queued"],
+    ["pending", 1, "retrying"],
+  ];
+  it.each(cases)("%s with %d attempts -> %s", (status, attemptCount, view) => {
+    expect(deliveryView({ status, attemptCount })).toBe(view);
+  });
+});
+
+describe("endpointHealth", () => {
+  it("is disabled when the endpoint is off, regardless of deliveries", () => {
+    expect(endpointHealth(endpoint({ enabled: false }), [delivery({ status: "succeeded" })])).toBe(
+      "disabled",
+    );
+  });
+  it("is failing when the most recent delivery is terminally failed", () => {
+    expect(endpointHealth(endpoint(), [delivery({ status: "dead", attemptCount: 5 })])).toBe(
+      "failing",
+    );
+  });
+  it("is active when enabled and the latest delivery succeeded", () => {
+    expect(endpointHealth(endpoint(), [delivery({ status: "succeeded" })])).toBe("active");
+  });
+  it("is active with no deliveries yet", () => {
+    expect(endpointHealth(endpoint(), [])).toBe("active");
+  });
+});
+
+describe("successRate", () => {
+  const stats = (over: Partial<WebhookEndpointStats>): WebhookEndpointStats => ({
+    endpointId: "e1",
+    delivered: 0,
+    succeeded: 0,
+    failed: 0,
+    ...over,
+  });
+  it("is null when nothing has settled", () => {
+    expect(successRate(undefined)).toBeNull();
+    expect(successRate(stats({ delivered: 4, succeeded: 0, failed: 0 }))).toBeNull();
+  });
+  it("divides by settled deliveries, not in-flight volume", () => {
+    // 4 delivered rows but only 3 settled (2 ok + 1 failed): rate is 67%, not 50%.
+    expect(successRate(stats({ delivered: 4, succeeded: 2, failed: 1 }))).toBe(67);
+  });
+  it("is 100 when all settled deliveries succeeded", () => {
+    expect(successRate(stats({ delivered: 5, succeeded: 5, failed: 0 }))).toBe(100);
+  });
+});
+
+describe("groupDeliveriesByEndpoint", () => {
+  it("groups by endpointId and skips custom deliveries with no endpoint", () => {
+    const grouped = groupDeliveriesByEndpoint([
+      delivery({ id: "a", endpointId: "e1" }),
+      delivery({ id: "b", endpointId: "e1" }),
+      delivery({ id: "c", endpointId: "e2" }),
+      delivery({ id: "d", endpointId: undefined }),
+    ]);
+    expect(grouped.get("e1")?.map((d) => d.id)).toEqual(["a", "b"]);
+    expect(grouped.get("e2")?.map((d) => d.id)).toEqual(["c"]);
+    expect(grouped.has("")).toBe(false);
+    expect(grouped.size).toBe(2);
+  });
+});
+
+describe("endpointMeta", () => {
+  it("resolves a known endpoint to its label and failing-state", () => {
+    const ep = endpoint({ id: "e1", name: "Billing hook" });
+    const byEndpoint = new Map([["e1", [delivery({ status: "dead", attemptCount: 5 })]]]);
+    expect(endpointMeta(delivery({ endpointId: "e1" }), [ep], byEndpoint)).toEqual({
+      label: "Billing hook",
+      failing: true,
+    });
+  });
+  it("falls back to the delivery URL for a custom (no-endpoint) delivery", () => {
+    expect(
+      endpointMeta(delivery({ endpointId: undefined, url: "https://x.test/h" }), [], new Map()),
+    ).toEqual({
+      label: "x.test/h",
+      failing: false,
+    });
+  });
+});
+
+describe("labels and formatting", () => {
+  it("endpointLabel prefers name, falls back to the host", () => {
+    expect(endpointLabel(endpoint({ name: "Edge" }))).toBe("Edge");
+    expect(endpointLabel(endpoint({ name: "  ", url: "https://hooks.test/x" }))).toBe(
+      "hooks.test/x",
+    );
+  });
+  it("receiverLabel prefers name, falls back to slug", () => {
+    const rc: WebhookReceiver = {
+      id: "r1",
+      slug: "abc123",
+      eventName: "stripe.charge",
+      scheme: "hmac_sha256",
+      enabled: true,
+      createdAt: "2030-01-01T00:00:00Z",
+      updatedAt: "2030-01-01T00:00:00Z",
+    };
+    expect(receiverLabel(rc)).toBe("abc123");
+    expect(receiverLabel({ ...rc, name: "Stripe" })).toBe("Stripe");
+  });
+  it("shortUrl strips the scheme", () => {
+    expect(shortUrl("https://hooks.test/x")).toBe("hooks.test/x");
+    expect(shortUrl("http://localhost:9000/h")).toBe("localhost:9000/h");
+  });
+});
+
+describe("codePillClass", () => {
+  it.each([
+    [undefined, "none"],
+    [0, "none"],
+    [200, "ok"],
+    [201, "ok"],
+    [404, "warn"],
+    [500, "err"],
+    [503, "err"],
+  ])("%s -> %s", (code, cls) => {
+    expect(codePillClass(code)).toBe(cls);
+  });
+});

package/src/lib/webhook-view.ts

@@ -0,0 +1,113 @@
+import type {
+  WebhookDelivery,
+  WebhookEndpoint,
+  WebhookEndpointStats,
+  WebhookReceiver,
+} from "@durablex/react";
+
+// WEBHOOK_TABS are the three sub-views of the Webhooks page, mirrored into the URL so a
+// tab (and a selected delivery) is shareable like the Runs view.
+export const WEBHOOK_TABS = ["deliveries", "endpoints", "receivers"] as const;
+export type WebhookTab = (typeof WEBHOOK_TABS)[number];
+
+// DeliveryView collapses the engine's six delivery statuses into the four the dashboard
+// shows. failed (awaiting a retry) and delivering both read as "retrying"; a pending row
+// is "queued" until its first attempt; exhausted/dead are terminal "failed".
+export const DELIVERY_VIEWS = ["delivered", "retrying", "failed", "queued"] as const;
+export type DeliveryView = (typeof DELIVERY_VIEWS)[number];
+
+export function deliveryView(d: Pick<WebhookDelivery, "status" | "attemptCount">): DeliveryView {
+  switch (d.status) {
+    case "succeeded":
+      return "delivered";
+    case "exhausted":
+    case "dead":
+      return "failed";
+    case "delivering":
+    case "failed":
+      return "retrying";
+    default:
+      return d.attemptCount > 0 ? "retrying" : "queued";
+  }
+}
+
+export const DELIVERY_VIEW_TOKEN: Record<DeliveryView, string> = {
+  delivered: "succeeded",
+  retrying: "running",
+  failed: "failed",
+  queued: "queued",
+};
+
+export const DELIVERY_VIEW_LABEL: Record<DeliveryView, string> = {
+  delivered: "Delivered",
+  retrying: "Retrying",
+  failed: "Failed",
+  queued: "Queued",
+};
+
+export type EndpointHealth = "active" | "failing" | "disabled";
+
+export function endpointHealth(
+  endpoint: WebhookEndpoint,
+  recent: WebhookDelivery[],
+): EndpointHealth {
+  if (!endpoint.enabled) return "disabled";
+  const latest = recent[0];
+  if (latest && deliveryView(latest) === "failed") return "failing";
+  return "active";
+}
+
+export const shortUrl = (u: string) => u.replace(/^https?:\/\//, "");
+
+export const displayName = (name: string | undefined, fallback: string) =>
+  name && name.trim() ? name : fallback;
+
+export const endpointLabel = (e: WebhookEndpoint) => displayName(e.name, shortUrl(e.url));
+export const receiverLabel = (r: WebhookReceiver) => displayName(r.name, r.slug);
+
+export const DELIVERY_LIST_LIMIT = 200;
+
+export function groupDeliveriesByEndpoint(
+  deliveries: WebhookDelivery[],
+): Map<string, WebhookDelivery[]> {
+  const m = new Map<string, WebhookDelivery[]>();
+  for (const d of deliveries) {
+    if (!d.endpointId) continue;
+    const list = m.get(d.endpointId);
+    if (list) list.push(d);
+    else m.set(d.endpointId, [d]);
+  }
+  return m;
+}
+
+export function codePillClass(code: number | undefined): string {
+  if (code == null || code === 0) return "none";
+  if (code < 300) return "ok";
+  if (code < 500) return "warn";
+  return "err";
+}
+
+// successRate is computed over settled deliveries only (succeeded vs terminal-failed).
+// stats.delivered counts every row in the window including in-flight ones, so dividing by
+// it would understate the rate while retries are outstanding. null when nothing has settled.
+export function successRate(stats?: WebhookEndpointStats): number | null {
+  if (!stats) return null;
+  const settled = stats.succeeded + stats.failed;
+  if (settled === 0) return null;
+  return Math.round((stats.succeeded / settled) * 100);
+}
+
+// endpointMeta resolves the display label and failing-state for a delivery. Custom
+// deliveries (ctx.webhook.send) carry no endpointId, so fall back to the delivery URL.
+export function endpointMeta(
+  d: WebhookDelivery,
+  endpoints: WebhookEndpoint[],
+  byEndpoint: Map<string, WebhookDelivery[]>,
+): { label: string; failing: boolean } {
+  const ep = d.endpointId ? endpoints.find((e) => e.id === d.endpointId) : undefined;
+  if (!ep) return { label: shortUrl(d.url), failing: false };
+  return {
+    label: endpointLabel(ep),
+    failing: endpointHealth(ep, byEndpoint.get(ep.id) ?? []) === "failing",
+  };
+}

package/src/lib/workflow-run.test.ts

@@ -0,0 +1,55 @@
+import { describe, expect, it } from "vitest";
+import type { WorkflowDef, WorkflowTrigger } from "@durablex/react";
+import { workflowRunPlan } from "./workflow-run";
+
+function workflow(over: Partial<WorkflowDef> = {}): WorkflowDef {
+  return {
+    name: "send-invoice",
+    app: "billing",
+    maxAttempts: 3,
+    backoff: "exponential",
+    scheduled: false,
+    registeredAt: "2030-01-01T00:00:00Z",
+    updatedAt: "2030-01-01T00:00:00Z",
+    ...over,
+  };
+}
+
+describe("workflowRunPlan", () => {
+  it("runs on an event matching its own name when it has no triggers", () => {
+    const plan = workflowRunPlan(workflow({ triggers: undefined }));
+    expect(plan.runnable).toBe(true);
+    expect(plan.options).toEqual([
+      { value: "send-invoice", pattern: "send-invoice", isWildcard: false },
+    ]);
+  });
+
+  it("surfaces each event trigger as an option and carries the CEL filter", () => {
+    const triggers: WorkflowTrigger[] = [{ event: "invoice.created", if: "data.amount > 0" }];
+    const plan = workflowRunPlan(workflow({ triggers }));
+    expect(plan.runnable).toBe(true);
+    expect(plan.options).toEqual([
+      {
+        value: "invoice.created",
+        pattern: "invoice.created",
+        isWildcard: false,
+        filter: "data.amount > 0",
+      },
+    ]);
+  });
+
+  it("strips the trailing star from a wildcard so the user completes the name", () => {
+    const plan = workflowRunPlan(workflow({ triggers: [{ event: "invoice.*" }] }));
+    expect(plan.options[0]).toMatchObject({
+      value: "invoice.",
+      pattern: "invoice.*",
+      isWildcard: true,
+    });
+  });
+
+  it("is not runnable for a cron-only workflow (no fireable event)", () => {
+    const plan = workflowRunPlan(workflow({ scheduled: true, triggers: [{ cron: "0 * * * *" }] }));
+    expect(plan.runnable).toBe(false);
+    expect(plan.options).toEqual([]);
+  });
+});

package/src/lib/workflow-run.ts

@@ -0,0 +1,45 @@
+import type { WorkflowDef } from "@durablex/react";
+
+// A single event a workflow can be run from. `value` is what to pre-fill into the
+// event-name field: a wildcard pattern has its trailing "*" stripped so the user
+// completes a concrete name. `filter` is the trigger's CEL `if`, surfaced as a hint.
+export interface EventRunOption {
+  value: string;
+  pattern: string;
+  isWildcard: boolean;
+  filter?: string;
+}
+
+// A cron-only workflow has no event to fire and no manual fire-now endpoint, so it
+// is not runnable from the dashboard yet (Phase 4). A workflow with no triggers at
+// all runs on an event matching its own name.
+export interface WorkflowRunPlan {
+  runnable: boolean;
+  options: EventRunOption[];
+}
+
+export function workflowRunPlan(workflow: WorkflowDef): WorkflowRunPlan {
+  const triggers = workflow.triggers ?? [];
+
+  if (triggers.length === 0) {
+    return {
+      runnable: true,
+      options: [{ value: workflow.name, pattern: workflow.name, isWildcard: false }],
+    };
+  }
+
+  const options = triggers.flatMap<EventRunOption>((t) => {
+    if (!t.event) return [];
+    const isWildcard = t.event.endsWith("*");
+    return [
+      {
+        value: isWildcard ? t.event.slice(0, -1) : t.event,
+        pattern: t.event,
+        isWildcard,
+        filter: t.if,
+      },
+    ];
+  });
+
+  return { runnable: options.length > 0, options };
+}

package/src/shell/AppShell.tsx

@@ -0,0 +1,34 @@
+import type { ReactNode } from "react";
+import { SidebarInset, SidebarProvider } from "../ui/sidebar";
+import { Sidebar, type NavGroup } from "./Sidebar";
+import { Topbar } from "./Topbar";
+
+export function AppShell({
+  groups,
+  active,
+  onSelect,
+  title,
+  subtitle,
+  rightSlot,
+  sidebarFooter,
+  children,
+}: {
+  groups: NavGroup[];
+  active: string;
+  onSelect(key: string): void;
+  title: string;
+  subtitle?: string;
+  rightSlot?: ReactNode;
+  sidebarFooter?: ReactNode;
+  children: ReactNode;
+}) {
+  return (
+    <SidebarProvider>
+      <Sidebar groups={groups} active={active} onSelect={onSelect} footer={sidebarFooter} />
+      <SidebarInset className="min-w-0">
+        <Topbar title={title} subtitle={subtitle} rightSlot={rightSlot} />
+        {children}
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}

package/src/shell/Sidebar.tsx

@@ -0,0 +1,78 @@
+import type { LucideIcon } from "lucide-react";
+import type { ReactNode } from "react";
+import { DurablexLogo } from "../components/DurablexLogo";
+import {
+  Sidebar as SidebarPrimitive,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "../ui/sidebar";
+
+export interface NavItem {
+  key: string;
+  label: string;
+  icon: LucideIcon;
+  count?: number;
+}
+
+export interface NavGroup {
+  label: string;
+  items: NavItem[];
+}
+
+export function Sidebar({
+  groups,
+  active,
+  onSelect,
+  footer,
+}: {
+  groups: NavGroup[];
+  active: string;
+  onSelect(key: string): void;
+  footer?: ReactNode;
+}) {
+  return (
+    <SidebarPrimitive collapsible="icon">
+      <SidebarHeader>
+        <div className="flex items-center gap-2 px-2 py-2.5">
+          <DurablexLogo />
+        </div>
+      </SidebarHeader>
+      <SidebarContent>
+        {groups.map((group) => (
+          <SidebarGroup key={group.label}>
+            <SidebarGroupLabel>{group.label}</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {group.items.map((item) => (
+                  <SidebarMenuItem key={item.key}>
+                    <SidebarMenuButton
+                      isActive={active === item.key}
+                      tooltip={item.label}
+                      onClick={() => onSelect(item.key)}
+                    >
+                      <item.icon />
+                      <span>{item.label}</span>
+                      {item.count != null && (
+                        <span className="text-muted-foreground ml-auto font-mono text-[11px] tabular-nums group-data-[collapsible=icon]:hidden">
+                          {item.count}
+                        </span>
+                      )}
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        ))}
+      </SidebarContent>
+      {footer && <SidebarFooter>{footer}</SidebarFooter>}
+    </SidebarPrimitive>
+  );
+}

package/src/shell/Topbar.tsx

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+import { SidebarTrigger } from "../ui/sidebar";
+
+export function Topbar({
+  title,
+  subtitle,
+  rightSlot,
+}: {
+  title: string;
+  subtitle?: string;
+  rightSlot?: ReactNode;
+}) {
+  return (
+    <header className="flex h-12 shrink-0 items-center gap-2 border-b px-4">
+      <SidebarTrigger />
+      <h1 className="text-sm font-semibold tracking-tight">{title}</h1>
+      {subtitle && <span className="text-muted-foreground text-xs">{subtitle}</span>}
+      <span className="flex-1" />
+      {rightSlot}
+    </header>
+  );
+}