@durablex/react-ui 0.1.0-beta.3

package/src/components/RunsTable.tsx

@@ -0,0 +1,110 @@
+import { AlertTriangle, Inbox } from "lucide-react";
+import { useMemo } from "react";
+import type { Run } from "@durablex/react";
+import { expectedStepTotals } from "../lib/run-progress";
+import type { RunSort, RunSortKey } from "../lib/run-sort";
+import { RunsTableHead } from "./RunsTableHead";
+import { RunsTableLoader } from "./RunsTableLoader";
+import { RunsTablePlaceholder } from "./RunsTablePlaceholder";
+import { RunsTableRow } from "./RunsTableRow";
+
+interface RunsTableProps {
+  rows: Run[];
+  selectedId: string | null;
+  onSelect(id: string): void;
+  sort: RunSort;
+  onSort(key: RunSortKey): void;
+  loading: boolean;
+  isError: boolean;
+  error: Error | null;
+  emptyTitle: string;
+  emptyMessage: string;
+  hideColumns?: RunSortKey[];
+  onReplay?(id: string): void;
+}
+
+export function RunsTable({
+  rows,
+  selectedId,
+  onSelect,
+  sort,
+  onSort,
+  loading,
+  isError,
+  error,
+  emptyTitle,
+  emptyMessage,
+  hideColumns,
+  onReplay,
+}: RunsTableProps) {
+  const expectedSteps = useMemo(() => expectedStepTotals(rows), [rows]);
+
+  if (loading && rows.length === 0) {
+    return (
+      <div className="tablewrap">
+        <RunsTableLoader />
+      </div>
+    );
+  }
+
+  if (isError) {
+    return (
+      <div className="tablewrap">
+        <RunsTablePlaceholder
+          icon={AlertTriangle}
+          title="Failed to load runs"
+          message={error?.message ?? "Something went wrong."}
+        />
+      </div>
+    );
+  }
+
+  if (rows.length === 0) {
+    return (
+      <div className="tablewrap">
+        <RunsTablePlaceholder icon={Inbox} title={emptyTitle} message={emptyMessage} />
+      </div>
+    );
+  }
+
+  return (
+    <div className="tablewrap">
+      <table className="runs">
+        <thead>
+          <tr>
+            {!hideColumns?.includes("workflow") && (
+              <RunsTableHead label="Workflow" sortKey="workflow" sort={sort} onSort={onSort} />
+            )}
+            <RunsTableHead label="Status" sortKey="status" sort={sort} onSort={onSort} />
+            {!hideColumns?.includes("app") && (
+              <RunsTableHead label="App" sortKey="app" sort={sort} onSort={onSort} />
+            )}
+            <th>Current step</th>
+            <RunsTableHead label="Started" sortKey="started" sort={sort} onSort={onSort} />
+            <RunsTableHead
+              label="Duration"
+              sortKey="duration"
+              sort={sort}
+              onSort={onSort}
+              numeric
+            />
+            {onReplay && <th aria-label="Actions" />}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((run) => (
+            <RunsTableRow
+              key={run.id}
+              run={run}
+              selected={selectedId === run.id}
+              onSelect={onSelect}
+              hideColumns={hideColumns}
+              stepTotal={expectedSteps.get(run.workflowName)}
+              onReplay={onReplay}
+            />
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/src/components/RunsTableHead.tsx

@@ -0,0 +1,19 @@
+import type { RunSort, RunSortKey } from "../lib/run-sort";
+
+interface RunsTableHeadProps {
+  label: string;
+  sortKey: RunSortKey;
+  sort: RunSort;
+  onSort(key: RunSortKey): void;
+  numeric?: boolean;
+}
+
+export function RunsTableHead({ label, sortKey, sort, onSort, numeric }: RunsTableHeadProps) {
+  const active = sort.key === sortKey;
+  return (
+    <th className={numeric ? "sortable num" : "sortable"} onClick={() => onSort(sortKey)}>
+      {label}
+      {active && <span className="arrow">{sort.dir === "asc" ? "↑" : "↓"}</span>}
+    </th>
+  );
+}

package/src/components/RunsTableLoader.tsx

@@ -0,0 +1,10 @@
+import { ResumeMark } from "./ResumeMark";
+
+export function RunsTableLoader() {
+  return (
+    <div className="runloader">
+      <ResumeMark size={44} variant="load" fault className="loadmark" title="Loading runs" />
+      <div className="runloader-cap">Replaying runs…</div>
+    </div>
+  );
+}

package/src/components/RunsTablePlaceholder.tsx

@@ -0,0 +1,19 @@
+import type { LucideIcon } from "lucide-react";
+
+interface RunsTablePlaceholderProps {
+  icon: LucideIcon;
+  title: string;
+  message: string;
+}
+
+export function RunsTablePlaceholder({ icon: Icon, title, message }: RunsTablePlaceholderProps) {
+  return (
+    <div className="placeholder">
+      <div className="ph-inner">
+        <Icon className="ico" />
+        <h3>{title}</h3>
+        <p>{message}</p>
+      </div>
+    </div>
+  );
+}

package/src/components/RunsTableRow.tsx

@@ -0,0 +1,103 @@
+import { RotateCcw } from "lucide-react";
+import type { KeyboardEvent } from "react";
+import { type Run, TERMINAL_STATUSES } from "@durablex/react";
+import { formatDuration, formatRelative } from "../lib/format";
+import { stepCellLabel } from "../lib/run-progress";
+import type { RunSortKey } from "../lib/run-sort";
+import { AppTag } from "./AppTag";
+import { ScheduledBadge } from "./ScheduledBadge";
+import { StatusBadge } from "./StatusBadge";
+
+interface RunsTableRowProps {
+  run: Run;
+  selected: boolean;
+  onSelect(id: string): void;
+  hideColumns?: RunSortKey[];
+  stepTotal?: number;
+  onReplay?(id: string): void;
+}
+
+export function RunsTableRow({
+  run,
+  selected,
+  onSelect,
+  hideColumns,
+  stepTotal,
+  onReplay,
+}: RunsTableRowProps) {
+  const onKeyDown = (e: KeyboardEvent<HTMLTableRowElement>) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      onSelect(run.id);
+    }
+  };
+
+  return (
+    <tr
+      className="row focusable"
+      tabIndex={0}
+      data-selected={selected ? "1" : "0"}
+      onClick={() => onSelect(run.id)}
+      onKeyDown={onKeyDown}
+    >
+      {!hideColumns?.includes("workflow") && (
+        <td>
+          <div className="wf-cell">
+            <span className="wf-name">{run.workflowName}</span>
+            {run.triggerKind === "cron" && <ScheduledBadge compact />}
+          </div>
+        </td>
+      )}
+      <td>
+        <StatusBadge status={run.status} />
+      </td>
+      {!hideColumns?.includes("app") && (
+        <td>
+          <AppTag app={run.app} />
+        </td>
+      )}
+      <td>
+        <div className="step-cell">
+          {run.stepCount > 0 ? (
+            <>
+              <span className="ix" style={{ color: `var(--st-${run.status}-fg)` }}>
+                {stepCellLabel(run, stepTotal)}
+              </span>
+              {run.currentStepName && <span>{run.currentStepName}</span>}
+            </>
+          ) : (
+            <span className="cell-mut">-</span>
+          )}
+          {run.status === "failed" && run.error?.message && (
+            <span className="run-err" title={run.error.message}>
+              {run.error.message.split("\n")[0]}
+            </span>
+          )}
+        </div>
+      </td>
+      <td>
+        <span className="ts cell-mut">{formatRelative(run.startedAt)}</span>
+      </td>
+      <td className="num">
+        <span className="dur">{formatDuration(run.durationMs)}</span>
+      </td>
+      {onReplay && (
+        <td className="row-actions">
+          {TERMINAL_STATUSES.has(run.status) && (
+            <button
+              type="button"
+              className="row-action focusable"
+              title="Replay this run"
+              onClick={(e) => {
+                e.stopPropagation();
+                onReplay(run.id);
+              }}
+            >
+              <RotateCcw className="size-3.5" /> Replay
+            </button>
+          )}
+        </td>
+      )}
+    </tr>
+  );
+}

package/src/components/RunsView.test.tsx

@@ -0,0 +1,46 @@
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, screen } from "@testing-library/react";
+import { fakeClient, renderWithClient } from "../test-utils";
+import { ALL_FILTER } from "../lib/run-filters";
+import { DEFAULT_RUN_SORT } from "../lib/run-sort";
+import { RunsView, type RunsViewState } from "./RunsView";
+
+const noop = () => {};
+
+function baseState(overrides: Partial<RunsViewState> = {}): RunsViewState {
+  return {
+    status: ALL_FILTER,
+    app: ALL_FILTER,
+    runType: ALL_FILTER,
+    time: "1h",
+    q: "",
+    deep: false,
+    sort: DEFAULT_RUN_SORT,
+    run: null,
+    event: null,
+    replayOf: null,
+    ...overrides,
+  };
+}
+
+describe("RunsView", () => {
+  it("renders the filter bar and, by default, the write surface", () => {
+    renderWithClient(<RunsView state={baseState()} onChange={noop} />, fakeClient());
+    expect(screen.getByText("Status")).toBeTruthy();
+    expect(screen.getByText("Replay matching")).toBeTruthy();
+  });
+
+  it("routes a filter change through onChange", () => {
+    const onChange = vi.fn();
+    renderWithClient(<RunsView state={baseState()} onChange={onChange} />, fakeClient());
+    fireEvent.click(screen.getByText("Status"));
+    fireEvent.click(screen.getByText("Cancelled"));
+    expect(onChange).toHaveBeenCalledWith({ status: "cancelled" });
+  });
+
+  it("omits the write surface when readOnly", () => {
+    renderWithClient(<RunsView state={baseState()} onChange={noop} readOnly />, fakeClient());
+    expect(screen.getByText("Status")).toBeTruthy();
+    expect(screen.queryByText("Replay matching")).toBeNull();
+  });
+});

package/src/components/RunsView.tsx

@@ -0,0 +1,243 @@
+import { X } from "lucide-react";
+import { toast } from "sonner";
+import { type TriggerKind, useReplayRun, useRuns, useRunStats } from "@durablex/react";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "../ui/resizable";
+import { useKeysetPager } from "../hooks/use-keyset-pager";
+import { ALL_FILTER, type RunTypeFilter, type StatusFilter } from "../lib/run-filters";
+import { type RunSort, type RunSortKey, toggleRunSort } from "../lib/run-sort";
+import { timeLabel, windowSince } from "../lib/time-range";
+import { BulkReplayButton } from "./BulkReplayButton";
+import { CursorPager } from "./CursorPager";
+import { RetryFromStepButton } from "./RetryFromStepButton";
+import { RunControlHistory } from "./RunControlHistory";
+import { RunInspector } from "./RunInspector";
+import { RunInspectorActions } from "./RunInspectorActions";
+import { RunsFilterBar } from "./RunsFilterBar";
+import { RunsTable } from "./RunsTable";
+import { StatsTiles } from "./StatsTiles";
+
+const PAGE_SIZE = 30;
+
+const RUN_TYPE_TO_TRIGGER: Record<RunTypeFilter, TriggerKind | undefined> = {
+  all: undefined,
+  triggered: "event",
+  scheduled: "cron",
+};
+
+export interface RunsViewState {
+  status: StatusFilter;
+  app: string;
+  runType: RunTypeFilter;
+  time: string;
+  q: string;
+  deep: boolean;
+  sort: RunSort;
+  run: string | null;
+  event: string | null;
+  replayOf: string | null;
+}
+
+export interface RunsViewProps {
+  state: RunsViewState;
+  onChange: (patch: Partial<RunsViewState>, opts?: { push?: boolean }) => void;
+  // Omit the write surface (run controls, replay, bulk replay) for a read-only embed.
+  readOnly?: boolean;
+}
+
+export function RunsView({ state, onChange, readOnly = false }: RunsViewProps) {
+  const {
+    app,
+    runType,
+    time,
+    q: query,
+    deep,
+    sort,
+    run: selectedRunId,
+    event,
+    replayOf,
+    status,
+  } = state;
+  const openRun = (id: string) => onChange({ run: id }, { push: true });
+  const onSort = (key: RunSortKey) => onChange({ sort: toggleRunSort(sort, key) });
+
+  const replay = useReplayRun();
+  const onReplay = (id: string) =>
+    replay.mutate(
+      { runId: id },
+      {
+        onSuccess: (forked) =>
+          toast.success("Replay started", {
+            action: { label: "View run", onClick: () => openRun(forked.id) },
+          }),
+        onError: (err) => toast.error(`Replay failed: ${err.message}`),
+      },
+    );
+
+  const since = windowSince(time);
+  const appParam = app === ALL_FILTER ? undefined : app;
+  const statusParam = status === ALL_FILTER ? undefined : status;
+  const runTypeParam = RUN_TYPE_TO_TRIGGER[runType];
+  const search = query.trim() || undefined;
+
+  const filterKey = `${statusParam ?? ""}|${appParam ?? ""}|${runTypeParam ?? ""}|${event ?? ""}|${replayOf ?? ""}|${time}|${search ?? ""}|${deep ? "d" : ""}|${sort.key}-${sort.dir}`;
+  const { cursor, canNewer, range, goOlder, goNewer } = useKeysetPager(filterKey, PAGE_SIZE);
+
+  const { data, isLoading, isError, error } = useRuns({
+    app: appParam,
+    status: statusParam,
+    runType: runTypeParam,
+    eventId: event ?? undefined,
+    replayOf: replayOf ?? undefined,
+    q: search,
+    deep,
+    since,
+    sort: sort.key,
+    dir: sort.dir,
+    limit: PAGE_SIZE,
+    cursor,
+  });
+  const stats = useRunStats({ app: appParam, since });
+
+  const rows = data?.runs ?? [];
+  const nextCursor = data?.nextCursor ?? null;
+  const { start: rangeStart, end: rangeEnd } = range(rows.length);
+
+  const filtersActive = Boolean(
+    search || statusParam || appParam || runTypeParam || event || replayOf,
+  );
+
+  let emptyMessage: string;
+  if (deep && search) {
+    emptyMessage = "No runs contain that text in their input, result, or error.";
+  } else if (filtersActive) {
+    emptyMessage = "No runs match the current filter. Clear filters to see all recent runs.";
+  } else {
+    emptyMessage = "Trigger a workflow to see its run appear here.";
+  }
+
+  return (
+    <ResizablePanelGroup orientation="horizontal" className="min-h-0 flex-1">
+      <ResizablePanel minSize="30%">
+        <div className="flex h-full min-h-0 flex-col">
+          <StatsTiles
+            stats={stats.data}
+            rangeLabel={timeLabel(time)}
+            activeStatus={status}
+            onFilterStatus={(s) => onChange({ status: status === s ? ALL_FILTER : s })}
+          />
+          <RunsFilterBar
+            query={query}
+            onQuery={(v) => onChange({ q: v })}
+            deep={deep}
+            onDeep={(v) => onChange({ deep: v })}
+            time={time}
+            onTime={(v) => onChange({ time: v })}
+            status={status}
+            onStatus={(v) => onChange({ status: v })}
+            app={app}
+            onApp={(v) => onChange({ app: v })}
+            runType={runType}
+            onRunType={(v) => onChange({ runType: v })}
+            shown={rows.length}
+            action={
+              readOnly ? undefined : (
+                <BulkReplayButton
+                  key={filterKey}
+                  filter={{ app: appParam, status: statusParam, runType: runTypeParam, since }}
+                />
+              )
+            }
+          />
+          {event && (
+            <div className="flex items-center gap-2 border-b px-3 py-1.5">
+              <span className="text-muted-foreground text-xs">Runs triggered by event</span>
+              <span className="text-[11px]" title={event}>
+                {rows[0]?.eventName ?? event}
+              </span>
+              <button
+                type="button"
+                className="text-muted-foreground hover:text-foreground inline-flex items-center gap-1 text-xs"
+                onClick={() => onChange({ event: null })}
+              >
+                <X className="size-3" /> clear
+              </button>
+            </div>
+          )}
+          {replayOf && (
+            <div className="flex items-center gap-2 border-b px-3 py-1.5">
+              <span className="text-muted-foreground text-xs">Runs replayed from</span>
+              <button
+                type="button"
+                className="text-[11px] hover:underline"
+                title={`Open source run ${replayOf}`}
+                onClick={() => onChange({ run: replayOf }, { push: true })}
+              >
+                {rows[0]?.workflowName ?? replayOf}
+              </button>
+              <button
+                type="button"
+                className="text-muted-foreground hover:text-foreground inline-flex items-center gap-1 text-xs"
+                onClick={() => onChange({ replayOf: null })}
+              >
+                <X className="size-3" /> clear
+              </button>
+            </div>
+          )}
+          <RunsTable
+            rows={rows}
+            selectedId={selectedRunId}
+            onSelect={openRun}
+            sort={sort}
+            onSort={onSort}
+            loading={isLoading}
+            isError={isError}
+            error={error}
+            emptyTitle={filtersActive ? "No runs match" : "No runs yet"}
+            emptyMessage={emptyMessage}
+            onReplay={readOnly ? undefined : onReplay}
+          />
+          {!isLoading && rows.length > 0 && (
+            <CursorPager
+              rangeStart={rangeStart}
+              rangeEnd={rangeEnd}
+              canNewer={canNewer}
+              canOlder={nextCursor != null}
+              onNewer={goNewer}
+              onOlder={() => goOlder(nextCursor)}
+            />
+          )}
+        </div>
+      </ResizablePanel>
+      {selectedRunId && (
+        <>
+          <ResizableHandle withHandle />
+          <ResizablePanel defaultSize="38%" minSize="24%" maxSize="65%">
+            <RunInspector
+              key={selectedRunId}
+              runId={selectedRunId}
+              onClose={() => onChange({ run: null })}
+              onFilterByEvent={(id) => onChange({ event: id, run: null })}
+              onOpenRun={openRun}
+              onShowReplays={(id) => onChange({ replayOf: id, run: null }, { push: true })}
+              renderActions={
+                readOnly
+                  ? undefined
+                  : (run) => <RunInspectorActions run={run} onOpenRun={openRun} />
+              }
+              renderControlHistory={
+                readOnly ? undefined : (id) => <RunControlHistory runId={id} onOpenRun={openRun} />
+              }
+              renderStepRetry={
+                readOnly
+                  ? undefined
+                  : (rid, stepName) => (
+                      <RetryFromStepButton runId={rid} stepName={stepName} onOpenRun={openRun} />
+                    )
+              }
+            />
+          </ResizablePanel>
+        </>
+      )}
+    </ResizablePanelGroup>
+  );
+}

package/src/components/ScheduledBadge.tsx

@@ -0,0 +1,15 @@
+import { Clock } from "lucide-react";
+import { GlyphBadge } from "./GlyphBadge";
+
+export function ScheduledBadge({ compact, className }: { compact?: boolean; className?: string }) {
+  return (
+    <GlyphBadge
+      icon={Clock}
+      tone="scheduled"
+      label="Scheduled"
+      ariaLabel="Scheduled (cron)"
+      compact={compact}
+      className={className}
+    />
+  );
+}

package/src/components/SecretReveal.tsx

@@ -0,0 +1,45 @@
+import { Check, Copy, TriangleAlert } from "lucide-react";
+import { Button } from "../ui/button";
+import { DialogFooter, DialogHeader, DialogTitle } from "../ui/dialog";
+import { useCopyToClipboard } from "../hooks/use-copy";
+
+export function SecretReveal({ secret, onDone }: { secret: string; onDone: () => void }) {
+  const { copied, copy } = useCopyToClipboard();
+
+  return (
+    <>
+      <DialogHeader>
+        <DialogTitle>Signing secret</DialogTitle>
+      </DialogHeader>
+      <div className="flex flex-col gap-3 py-1">
+        <div className="text-muted-foreground flex items-start gap-2 text-xs">
+          <TriangleAlert
+            className="mt-0.5 size-3.5 shrink-0"
+            style={{ color: "var(--st-waiting-fg)" }}
+          />
+          <span>Copy this secret now. It is stored encrypted and cannot be shown again.</span>
+        </div>
+        <div className="bg-muted flex items-center gap-2 border px-2.5 py-2">
+          <code className="flex-1 truncate font-mono text-xs">{secret}</code>
+          <button
+            type="button"
+            className="iconbtn focusable"
+            aria-label="Copy secret"
+            onClick={() => copy(secret)}
+          >
+            {copied ? (
+              <Check className="size-3.5" style={{ color: "var(--st-succeeded-fg)" }} />
+            ) : (
+              <Copy className="size-3.5" />
+            )}
+          </button>
+        </div>
+      </div>
+      <DialogFooter>
+        <Button size="sm" onClick={onDone}>
+          Done
+        </Button>
+      </DialogFooter>
+    </>
+  );
+}

package/src/components/SectionHeader.tsx

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+
+export function SectionHeader({ children, action }: { children: ReactNode; action?: ReactNode }) {
+  return (
+    <div className="text-muted-foreground flex min-h-9 items-center justify-between border-b px-3 py-2 text-xs font-medium tracking-tight">
+      <span>{children}</span>
+      {action}
+    </div>
+  );
+}