@durablex/react-ui 0.1.0-beta.3

package/src/components/filters/FilterDropdownItem.tsx

@@ -0,0 +1,37 @@
+import { Check } from "lucide-react";
+
+export function FilterDropdownItem({
+  active,
+  dot,
+  label,
+  right,
+  onClick,
+}: {
+  active: boolean;
+  dot?: string | null;
+  label: string;
+  right?: string;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      className="dd-item focusable"
+      data-on={active ? "1" : "0"}
+      onClick={onClick}
+    >
+      {dot !== undefined && (
+        <span
+          className="dd-dot"
+          style={{
+            background: dot || "transparent",
+            border: dot ? "0" : "1px solid var(--border)",
+          }}
+        />
+      )}
+      <span className="dd-lbl">{label}</span>
+      {right != null && <span className="dd-rt">{right}</span>}
+      {active && <Check className="dd-check" />}
+    </button>
+  );
+}

package/src/components/filters/TimeRangeFilter.tsx

@@ -0,0 +1,43 @@
+import { TIME_OPTIONS, timeLabel } from "../../lib/time-range";
+import { FilterDropdown } from "./FilterDropdown";
+import { FilterDropdownButton } from "./FilterDropdownButton";
+import { FilterDropdownItem } from "./FilterDropdownItem";
+
+export function TimeRangeFilter({ time, onTime }: { time: string; onTime(time: string): void }) {
+  return (
+    <FilterDropdown
+      width={210}
+      trigger={(open, toggle) => (
+        <FilterDropdownButton open={open} toggle={toggle} keyLabel="Time" value={timeLabel(time)} />
+      )}
+    >
+      {(close) => (
+        <>
+          <div className="dd-search">
+            <input
+              placeholder="Relative time (5s, 1m, 2d)…"
+              onKeyDown={(e) => {
+                const v = (e.target as HTMLInputElement).value.trim();
+                if (e.key === "Enter" && v) {
+                  onTime(v);
+                  close();
+                }
+              }}
+            />
+          </div>
+          {TIME_OPTIONS.map(([k, l]) => (
+            <FilterDropdownItem
+              key={k}
+              active={time === k}
+              label={l}
+              onClick={() => {
+                onTime(k);
+                close();
+              }}
+            />
+          ))}
+        </>
+      )}
+    </FilterDropdown>
+  );
+}

package/src/components/filters/TimeZoneFilter.tsx

@@ -0,0 +1,40 @@
+import { localTimeZone, type TimeZoneMode } from "../../lib/time-range";
+import { FilterDropdown } from "./FilterDropdown";
+import { FilterDropdownButton } from "./FilterDropdownButton";
+import { FilterDropdownItem } from "./FilterDropdownItem";
+
+const OPTIONS: [TimeZoneMode, string][] = [
+  ["local", `Local · ${localTimeZone}`],
+  ["utc", "UTC"],
+];
+
+export function TimeZoneFilter({ tz, onTz }: { tz: TimeZoneMode; onTz(tz: TimeZoneMode): void }) {
+  return (
+    <FilterDropdown
+      align="right"
+      width={220}
+      trigger={(open, toggle) => (
+        <FilterDropdownButton
+          open={open}
+          toggle={toggle}
+          keyLabel="Zone"
+          value={tz === "utc" ? "UTC" : "Local"}
+        />
+      )}
+    >
+      {(close) =>
+        OPTIONS.map(([k, l]) => (
+          <FilterDropdownItem
+            key={k}
+            active={tz === k}
+            label={l}
+            onClick={() => {
+              onTz(k);
+              close();
+            }}
+          />
+        ))
+      }
+    </FilterDropdown>
+  );
+}

package/src/components/filters/use-click-outside.ts

@@ -0,0 +1,18 @@
+import { useEffect, type RefObject } from "react";
+
+export function useClickOutside(ref: RefObject<HTMLElement | null>, onClose: () => void) {
+  useEffect(() => {
+    const onDown = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) onClose();
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("mousedown", onDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [ref, onClose]);
+}

package/src/components/filters-pager.test.tsx

@@ -0,0 +1,94 @@
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { fakeClient, renderWithClient } from "../test-utils";
+import { ALL_FILTER } from "../lib/run-filters";
+import { CursorPager } from "./CursorPager";
+import { RunsFilterBar } from "./RunsFilterBar";
+
+const noop = () => {};
+
+function filterBarProps() {
+  return {
+    query: "",
+    onQuery: noop,
+    deep: false,
+    onDeep: noop,
+    time: "1h",
+    onTime: noop,
+    status: ALL_FILTER,
+    onStatus: noop,
+    app: ALL_FILTER,
+    onApp: noop,
+    runType: ALL_FILTER,
+    onRunType: noop,
+    shown: 0,
+  };
+}
+
+describe("RunsFilterBar", () => {
+  it("hides Clear until a filter is active, then clears every facet", () => {
+    const onStatus = vi.fn();
+    const onApp = vi.fn();
+    const onRunType = vi.fn();
+    const onQuery = vi.fn();
+    const onDeep = vi.fn();
+    renderWithClient(
+      <RunsFilterBar
+        {...filterBarProps()}
+        status="failed"
+        onStatus={onStatus}
+        onApp={onApp}
+        onRunType={onRunType}
+        onQuery={onQuery}
+        onDeep={onDeep}
+      />,
+      fakeClient(),
+    );
+    fireEvent.click(screen.getByTitle("Clear all filters"));
+    expect(onStatus).toHaveBeenCalledWith("all");
+    expect(onApp).toHaveBeenCalledWith("all");
+    expect(onRunType).toHaveBeenCalledWith("all");
+    expect(onQuery).toHaveBeenCalledWith("");
+    expect(onDeep).toHaveBeenCalledWith(false);
+  });
+
+  it("fires onStatus when a status option is picked", () => {
+    const onStatus = vi.fn();
+    renderWithClient(<RunsFilterBar {...filterBarProps()} onStatus={onStatus} />, fakeClient());
+    fireEvent.click(screen.getByText("Status"));
+    fireEvent.click(screen.getByText("Succeeded"));
+    expect(onStatus).toHaveBeenCalledWith("succeeded");
+  });
+
+  it("shows the current shown count", () => {
+    renderWithClient(<RunsFilterBar {...filterBarProps()} shown={7} />, fakeClient());
+    expect(screen.getByText("7 shown")).toBeTruthy();
+  });
+});
+
+describe("CursorPager", () => {
+  const base = { rangeStart: 1, rangeEnd: 30, onNewer: noop, onOlder: noop };
+
+  it("renders nothing on an empty range", () => {
+    const { container } = render(
+      <CursorPager {...base} rangeEnd={0} canNewer={false} canOlder={false} />,
+    );
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("disables the bound the cursor cannot cross", () => {
+    render(<CursorPager {...base} canNewer={false} canOlder />);
+    expect(screen.getByLabelText("Newer runs").hasAttribute("disabled")).toBe(true);
+    expect(screen.getByLabelText("Older runs").hasAttribute("disabled")).toBe(false);
+  });
+
+  it("fires the nav handlers when enabled", () => {
+    const onNewer = vi.fn();
+    const onOlder = vi.fn();
+    render(<CursorPager {...base} canNewer canOlder onNewer={onNewer} onOlder={onOlder} />);
+    fireEvent.click(screen.getByLabelText("Newer runs"));
+    fireEvent.click(screen.getByLabelText("Older runs"));
+    expect(onNewer).toHaveBeenCalledOnce();
+    expect(onOlder).toHaveBeenCalledOnce();
+  });
+});

package/src/components/marks-geometry.ts

@@ -0,0 +1,10 @@
+export const MARK_BARS = [
+  { x: 3, y: 3, width: 4, height: 18 },
+  { x: 7, y: 3, width: 10, height: 4 },
+  { x: 7, y: 17, width: 10, height: 4 },
+  { x: 17, y: 3, width: 4, height: 18 },
+  { x: 0, y: 10.6, width: 3, height: 2.8 },
+  { x: 21, y: 10.6, width: 3, height: 2.8 },
+];
+
+export const RESUME_TRIANGLE = "M10 8.4 L15.4 12 L10 15.6 Z";

package/src/components/replay-dialog.test.tsx

@@ -0,0 +1,18 @@
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { fakeClient, makeRun, renderWithClient } from "../test-utils";
+import { ReplayRunDialog } from "./ReplayRunDialog";
+
+describe("ReplayRunDialog", () => {
+  it("replays with no override when the input is unchanged", async () => {
+    const replay = vi.fn(async () => makeRun({ id: "run_fork" }));
+    const run = makeRun({ id: "run_1", workflowName: "sendEmail", input: { to: "a@b.c" } });
+    renderWithClient(
+      <ReplayRunDialog run={run} open onOpenChange={() => {}} />,
+      fakeClient({ replay }),
+    );
+
+    fireEvent.click(await screen.findByText("Replay"));
+    await waitFor(() => expect(replay).toHaveBeenCalledWith("run_1", undefined));
+  });
+});

package/src/components/run-components.test.tsx

@@ -0,0 +1,126 @@
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import type { LogFrame } from "@durablex/react";
+import { DEFAULT_RUN_SORT } from "../lib/run-sort";
+import { makeRun, makeStep } from "../test-utils";
+import { JsonBlock } from "./JsonBlock";
+import { LogList } from "./LogList";
+import { PayloadTabs } from "./PayloadTabs";
+import { RunsTable } from "./RunsTable";
+import { StepRow } from "./StepRow";
+
+const noop = () => {};
+
+function logFrame(overrides: Partial<LogFrame> = {}): LogFrame {
+  return {
+    kind: "log",
+    seq: 1,
+    ts: "2026-07-01T00:00:00.000Z",
+    runId: "run_1",
+    level: "info",
+    message: "hello world",
+    scope: "@root",
+    attempt: 1,
+    ...overrides,
+  };
+}
+
+describe("PayloadTabs", () => {
+  it("lands on the Error tab for a failed run", () => {
+    const run = makeRun({ status: "failed", error: { message: "kaboom" }, input: { a: 1 } });
+    render(<PayloadTabs run={run} logs={[]} />);
+    expect(screen.getByText("kaboom")).toBeTruthy();
+  });
+
+  it("defaults to Input and switches to Result on click", () => {
+    const run = makeRun({ status: "succeeded", input: { in: "payload" }, result: { out: "done" } });
+    const { container } = render(<PayloadTabs run={run} logs={[]} />);
+    expect(container.textContent).toContain('"in"');
+    fireEvent.click(screen.getByText("Result"));
+    expect(container.textContent).toContain('"out"');
+  });
+});
+
+describe("StepRow", () => {
+  it("auto-opens a failed step and shows its error", () => {
+    const step = makeStep({ name: "charge", status: "failed", error: { message: "declined" } });
+    render(<StepRow step={step} index={1} current={false} runPaused={false} logs={[]} />);
+    expect(screen.getByText("charge")).toBeTruthy();
+    expect(screen.getByText("declined")).toBeTruthy();
+  });
+
+  it("expands a succeeded step on click to reveal its output", () => {
+    const step = makeStep({ name: "fetch", status: "succeeded", output: { rows: 3 } });
+    const { container } = render(
+      <StepRow step={step} index={1} current={false} runPaused={false} logs={[]} />,
+    );
+    expect(container.textContent).not.toContain('"rows"');
+    fireEvent.click(screen.getByText("fetch"));
+    expect(container.textContent).toContain('"rows"');
+  });
+});
+
+describe("RunsTable", () => {
+  const baseProps = {
+    selectedId: null,
+    onSelect: noop,
+    sort: DEFAULT_RUN_SORT,
+    onSort: noop,
+    emptyTitle: "No runs yet",
+    emptyMessage: "Trigger a workflow.",
+  };
+
+  it("shows the empty state when there are no rows", () => {
+    render(<RunsTable {...baseProps} rows={[]} loading={false} isError={false} error={null} />);
+    expect(screen.getByText("No runs yet")).toBeTruthy();
+  });
+
+  it("shows an error state", () => {
+    render(
+      <RunsTable {...baseProps} rows={[]} loading={false} isError error={new Error("offline")} />,
+    );
+    expect(screen.getByText("Failed to load runs")).toBeTruthy();
+  });
+
+  it("renders run rows and fires onReplay", () => {
+    const onReplay = vi.fn();
+    render(
+      <RunsTable
+        {...baseProps}
+        rows={[makeRun({ id: "run_9", workflowName: "nightlyReport" })]}
+        loading={false}
+        isError={false}
+        error={null}
+        onReplay={onReplay}
+      />,
+    );
+    expect(screen.getByText("nightlyReport")).toBeTruthy();
+  });
+});
+
+describe("JsonBlock", () => {
+  it("renders a null placeholder", () => {
+    render(<JsonBlock value={null} />);
+    expect(screen.getByText("null")).toBeTruthy();
+  });
+
+  it("renders object content as escaped text", () => {
+    const { container } = render(<JsonBlock value={{ user: "ada" }} />);
+    expect(container.textContent).toContain('"user"');
+    expect(container.textContent).toContain('"ada"');
+    expect(container.querySelector("script")).toBeNull();
+  });
+});
+
+describe("LogList", () => {
+  it("shows an empty message with no logs", () => {
+    render(<LogList logs={[]} />);
+    expect(screen.getByText("No logs.")).toBeTruthy();
+  });
+
+  it("renders log message and level", () => {
+    render(<LogList logs={[logFrame({ message: "started", level: "warn" })]} />);
+    expect(screen.getByText("started")).toBeTruthy();
+    expect(screen.getByText("warn")).toBeTruthy();
+  });
+});

package/src/components/run-controls.test.tsx

@@ -0,0 +1,97 @@
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { fakeClient, makeControlAction, makeRun, renderWithClient } from "../test-utils";
+import { BulkReplayButton } from "./BulkReplayButton";
+import { RetryFromStepButton } from "./RetryFromStepButton";
+import { RunCancelButton } from "./RunCancelButton";
+import { RunControlHistory } from "./RunControlHistory";
+import { RunPauseButton } from "./RunPauseButton";
+
+describe("RunPauseButton", () => {
+  it("pauses a running run", async () => {
+    const pause = vi.fn(async () => makeRun({ status: "paused" }));
+    renderWithClient(<RunPauseButton id="run_1" status="running" />, fakeClient({ pause }));
+    fireEvent.click(screen.getByText("Pause"));
+    await waitFor(() => expect(pause).toHaveBeenCalledWith("run_1"));
+  });
+
+  it("resumes a paused run", async () => {
+    const resume = vi.fn(async () => makeRun({ status: "queued" }));
+    renderWithClient(<RunPauseButton id="run_1" status="paused" />, fakeClient({ resume }));
+    fireEvent.click(screen.getByText("Resume"));
+    await waitFor(() => expect(resume).toHaveBeenCalledWith("run_1"));
+  });
+});
+
+describe("RunCancelButton", () => {
+  it("arms on the first click and cancels on the second", async () => {
+    const cancel = vi.fn(async () => makeRun({ status: "cancelled" }));
+    renderWithClient(<RunCancelButton id="run_1" />, fakeClient({ cancel }));
+
+    fireEvent.click(screen.getByText("Cancel"));
+    expect(cancel).not.toHaveBeenCalled();
+    expect(screen.getByText("Confirm cancel")).toBeTruthy();
+
+    fireEvent.click(screen.getByText("Confirm cancel"));
+    await waitFor(() => expect(cancel).toHaveBeenCalledWith("run_1"));
+  });
+});
+
+describe("RetryFromStepButton", () => {
+  it("forks from the step on the confirmed click", async () => {
+    const retryFromStep = vi.fn(async () => makeRun({ id: "run_fork" }));
+    renderWithClient(
+      <RetryFromStepButton runId="run_1" stepName="charge" />,
+      fakeClient({ retryFromStep }),
+    );
+
+    fireEvent.click(screen.getByText("Retry from here"));
+    expect(retryFromStep).not.toHaveBeenCalled();
+
+    fireEvent.click(screen.getByText("Confirm retry"));
+    await waitFor(() => expect(retryFromStep).toHaveBeenCalledWith("run_1", "charge"));
+  });
+});
+
+describe("BulkReplayButton", () => {
+  it("replays the filter on the confirmed click and reports the count", async () => {
+    const bulkReplay = vi.fn(async () => ({
+      matched: 5,
+      replayed: 3,
+      skipped: 2,
+      failed: 0,
+      capped: false,
+    }));
+    renderWithClient(<BulkReplayButton filter={{ app: "default" }} />, fakeClient({ bulkReplay }));
+
+    fireEvent.click(screen.getByText("Replay matching"));
+    fireEvent.click(screen.getByText("Confirm replay"));
+    await waitFor(() => expect(bulkReplay).toHaveBeenCalledWith({ app: "default" }));
+    await waitFor(() => expect(screen.getByText("Replayed 3")).toBeTruthy());
+  });
+});
+
+describe("RunControlHistory", () => {
+  it("renders nothing when there is no history", () => {
+    const { container } = renderWithClient(
+      <RunControlHistory runId="run_1" />,
+      fakeClient({ controlActions: [] }),
+    );
+    expect(container.querySelector(".sec-title")).toBeNull();
+  });
+
+  it("links to a forked run and fires onOpenRun", async () => {
+    const onOpenRun = vi.fn();
+    renderWithClient(
+      <RunControlHistory runId="run_1" onOpenRun={onOpenRun} />,
+      fakeClient({
+        controlActions: [
+          makeControlAction({ action: "replay", runId: "run_1", newRunId: "run_fork" }),
+        ],
+      }),
+    );
+    const link = await screen.findByText("run_fork");
+    fireEvent.click(link);
+    expect(onOpenRun).toHaveBeenCalledWith("run_fork");
+  });
+});

package/src/hooks/use-confirm-action.ts

@@ -0,0 +1,19 @@
+import { useState } from "react";
+
+const CONFIRM_MS = 3000;
+
+// Two-click confirm for a destructive or bulk action: the first trigger arms and
+// returns; a second trigger within the window runs the action. Auto-disarms after.
+export function useConfirmAction(action: () => void, ms = CONFIRM_MS) {
+  const [confirming, setConfirming] = useState(false);
+  const trigger = () => {
+    if (!confirming) {
+      setConfirming(true);
+      setTimeout(() => setConfirming(false), ms);
+      return;
+    }
+    setConfirming(false);
+    action();
+  };
+  return { confirming, trigger };
+}

package/src/hooks/use-copy.ts

@@ -0,0 +1,22 @@
+import { useCallback, useState } from "react";
+
+// Copy text and flip `copied` for a beat. navigator.clipboard is undefined in non-secure
+// contexts (http on a non-localhost host), so guard it rather than throwing on click.
+export function useCopyToClipboard(resetMs = 1200) {
+  const [copied, setCopied] = useState(false);
+
+  const copy = useCallback(
+    (text: string) => {
+      void navigator.clipboard?.writeText(text).then(
+        () => {
+          setCopied(true);
+          setTimeout(() => setCopied(false), resetMs);
+        },
+        () => undefined,
+      );
+    },
+    [resetMs],
+  );
+
+  return { copied, copy };
+}

package/src/hooks/use-keyset-pager.ts

@@ -0,0 +1,34 @@
+import { useState } from "react";
+
+// Keyset cursor stack: `cursor` loads the current page; the stack holds the cursors of
+// earlier pages so "Newer" can walk back. Page 0 (newest) uses no cursor. Passing a new
+// `resetKey` (a filter/sort signature) snaps back to the newest page during render.
+export function useKeysetPager(resetKey: string, pageSize: number) {
+  const [cursor, setCursor] = useState<string | undefined>(undefined);
+  const [prev, setPrev] = useState<(string | undefined)[]>([]);
+
+  const [pageKey, setPageKey] = useState(resetKey);
+  if (pageKey !== resetKey) {
+    setPageKey(resetKey);
+    setCursor(undefined);
+    setPrev([]);
+  }
+
+  const depth = prev.length;
+
+  function range(rowCount: number) {
+    return { start: rowCount ? depth * pageSize + 1 : 0, end: depth * pageSize + rowCount };
+  }
+  function goOlder(nextCursor: string | null) {
+    if (!nextCursor) return;
+    setPrev((s) => [...s, cursor]);
+    setCursor(nextCursor);
+  }
+  function goNewer() {
+    if (prev.length === 0) return;
+    setCursor(prev[prev.length - 1]);
+    setPrev((s) => s.slice(0, -1));
+  }
+
+  return { cursor, canNewer: depth > 0, range, goOlder, goNewer };
+}

package/src/hooks/use-mobile.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState(() => window.innerWidth < MOBILE_BREAKPOINT);
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return isMobile;
+}