@durablex/react-ui 0.1.0-beta.3

package/src/components/RunInspector.test.tsx

@@ -0,0 +1,78 @@
+import { describe, expect, it, vi } from "vitest";
+import { screen } from "@testing-library/react";
+import { RunInspector } from "./RunInspector";
+import { fakeClient, makeRun, makeStep, renderWithClient } from "../test-utils";
+
+const noop = () => {};
+
+describe("RunInspector", () => {
+  it("renders a loaded run: workflow name, id, and its steps", async () => {
+    const client = fakeClient({
+      run: makeRun({ id: "run_42", workflowName: "sendEmail", status: "succeeded" }),
+      steps: [makeStep({ name: "validate" }), makeStep({ name: "deliver", index: 1 })],
+    });
+    renderWithClient(<RunInspector runId="run_42" onClose={noop} />, client);
+
+    expect(await screen.findByText("sendEmail")).toBeTruthy();
+    expect(screen.getByText("validate")).toBeTruthy();
+    expect(screen.getByText("deliver")).toBeTruthy();
+    expect(screen.getAllByText("run_42").length).toBeGreaterThan(0);
+  });
+
+  it("shows the error message when the run fails to load", async () => {
+    const client = fakeClient({ getError: new Error("run not found") });
+    renderWithClient(<RunInspector runId="ghost" onClose={noop} />, client);
+
+    expect(await screen.findByText("run not found")).toBeTruthy();
+  });
+
+  it("offers a step retry on a TERMINAL run (slot fed runId + stepName)", async () => {
+    const renderStepRetry = vi.fn((_runId: string, stepName: string) => (
+      <span>retry:{stepName}</span>
+    ));
+    const client = fakeClient({
+      run: makeRun({ id: "run_1", status: "failed" }),
+      steps: [makeStep({ name: "validate", status: "failed", error: { message: "boom" } })],
+    });
+    renderWithClient(
+      <RunInspector runId="run_1" onClose={noop} renderStepRetry={renderStepRetry} />,
+      client,
+    );
+
+    await screen.findByText("sendEmail");
+    expect(renderStepRetry).toHaveBeenCalledWith("run_1", "validate");
+  });
+
+  it("does NOT offer a step retry on an ACTIVE run", async () => {
+    const renderStepRetry = vi.fn(() => <span>retry</span>);
+    const client = fakeClient({
+      run: makeRun({ id: "run_1", status: "running" }),
+      steps: [makeStep({ name: "validate", status: "running" })],
+    });
+    renderWithClient(
+      <RunInspector runId="run_1" onClose={noop} renderStepRetry={renderStepRetry} />,
+      client,
+    );
+
+    await screen.findByText("sendEmail");
+    expect(renderStepRetry).not.toHaveBeenCalled();
+  });
+
+  it("feeds renderActions the run and renderControlHistory the run id", async () => {
+    const renderActions = vi.fn((run: { status: string }) => <span>act:{run.status}</span>);
+    const renderControlHistory = vi.fn((id: string) => <span>hist:{id}</span>);
+    const client = fakeClient({ run: makeRun({ id: "run_7", status: "succeeded" }) });
+    renderWithClient(
+      <RunInspector
+        runId="run_7"
+        onClose={noop}
+        renderActions={renderActions}
+        renderControlHistory={renderControlHistory}
+      />,
+      client,
+    );
+
+    expect(await screen.findByText("act:succeeded")).toBeTruthy();
+    expect(screen.getByText("hist:run_7")).toBeTruthy();
+  });
+});

package/src/components/RunInspector.tsx

@@ -0,0 +1,297 @@
+import { BarChartHorizontalBig, Check, Copy, Loader2, Workflow, X } from "lucide-react";
+import { type ReactNode, useMemo, useState } from "react";
+import {
+  ACTIVE_STATUSES,
+  type Run,
+  type Step,
+  TERMINAL_STATUSES,
+  useRun,
+  useRunStats,
+  useRunStream,
+  useRunSteps,
+  useWorkflows,
+} from "@durablex/react";
+import { useCopyToClipboard } from "../hooks/use-copy";
+import { formatDuration, formatNextFire, formatTime } from "../lib/format";
+import { groupLogs, NO_LOGS, type RunLogs, stepLogKey } from "../lib/run-logs";
+import { stepProgress } from "../lib/run-progress";
+import { Meta } from "./Meta";
+import { PayloadTabs } from "./PayloadTabs";
+import { StatusBadge } from "./StatusBadge";
+import { StepFlow } from "./StepFlow";
+import { StepRow } from "./StepRow";
+import { StepTimeline } from "./StepTimeline";
+
+type StepsView = "list" | "flow" | "timeline";
+
+export interface RunInspectorProps {
+  runId: string;
+  onClose(): void;
+  onFilterByEvent?: (eventId: string, eventName?: string) => void;
+  onOpenRun?: (runId: string) => void;
+  onShowReplays?: (runId: string) => void;
+  // Control actions stay in the consumer; the kit feeds each slot the data it needs.
+  // renderStepRetry is offered only on a terminal run, so the consumer never gates it.
+  renderActions?: (run: Run) => ReactNode;
+  renderControlHistory?: (runId: string) => ReactNode;
+  renderStepRetry?: (runId: string, stepName: string) => ReactNode;
+}
+
+export function RunInspector({
+  runId,
+  onClose,
+  onFilterByEvent,
+  onOpenRun,
+  onShowReplays,
+  renderActions,
+  renderControlHistory,
+  renderStepRetry,
+}: RunInspectorProps) {
+  const run = useRun(runId);
+  const status = run.data?.status;
+  const isActive = status !== undefined && ACTIVE_STATUSES.has(status);
+  const isPaused = status === "paused";
+  const retryRunId = status !== undefined && TERMINAL_STATUSES.has(status) ? runId : undefined;
+  const steps = useRunSteps(runId, isActive);
+  const frames = useRunStream(runId);
+  const logs = useMemo(() => groupLogs(frames), [frames]);
+  const { data: workflows } = useWorkflows();
+  const replayCount = useRunStats({ replayOf: runId }, { poll: false }).data?.total ?? 0;
+  const [view, setView] = useState<StepsView>("list");
+
+  const stepRetry =
+    retryRunId && renderStepRetry
+      ? (stepName: string) => renderStepRetry(retryRunId, stepName)
+      : undefined;
+
+  if (run.isLoading) {
+    return (
+      <div className="run-panel">
+        <div className="steps-loading">
+          <Loader2 className="size-4 animate-spin" />
+        </div>
+      </div>
+    );
+  }
+
+  if (run.isError || !run.data) {
+    return (
+      <div className="run-panel">
+        <div className="fi-empty">
+          {run.error instanceof Error ? run.error.message : "Run not found."}
+        </div>
+      </div>
+    );
+  }
+
+  const r = run.data;
+  const rows = steps.data ?? [];
+  const progress = stepProgress(r, rows);
+  const wf = workflows?.find((w) => w.name === r.workflowName && w.app === r.app);
+  const scheduled = r.triggerKind === "cron";
+  const sourceEventId = r.eventId;
+  const replayOf = r.replayOf;
+  const nextFire = scheduled ? wf?.schedules?.[0]?.nextFireAt : undefined;
+
+  return (
+    <div className="run-panel">
+      <div className="panel-head">
+        <div className="ph-top">
+          <h2>
+            <span className="h2-name">{r.workflowName}</span>
+          </h2>
+          <div className="ph-actions">
+            {renderActions?.(r)}
+            <button
+              type="button"
+              className="iconbtn focusable"
+              aria-label="Close"
+              onClick={onClose}
+            >
+              <X />
+            </button>
+          </div>
+        </div>
+        <div className="ph-status">
+          <StatusBadge status={r.status} />
+          <span className="runid">
+            <span className="runid-text">{r.id}</span>
+            <CopyId id={r.id} />
+          </span>
+        </div>
+      </div>
+
+      <div className="panel-body">
+        <div className="metagrid">
+          <Meta label="Run id" value={r.id} />
+          <Meta label="App" value={r.app} />
+          {r.executedBy && <Meta label="Runner" value={r.executedBy} />}
+          <Meta label="Started" value={formatTime(r.startedAt)} />
+          <Meta label="Duration" value={formatDuration(r.durationMs)} />
+          <Meta label="Step" value={`${progress.ix}/${progress.total}`} />
+          <Meta label="Attempt" value={String(r.attempt)} />
+          {sourceEventId ? (
+            <Meta
+              label="Trigger"
+              value={r.eventName ?? "event"}
+              title="Show all runs from this event"
+              onClick={() => onFilterByEvent?.(sourceEventId, r.eventName)}
+            />
+          ) : (
+            <Meta label="Trigger" value={scheduled ? "Scheduled (cron)" : "Event"} />
+          )}
+          {nextFire && <Meta label="Next fire" value={formatNextFire(nextFire)} />}
+          {replayOf && (
+            <Meta
+              label="Replay of"
+              value={replayOf}
+              title="Open the run this was replayed from"
+              onClick={() => onOpenRun?.(replayOf)}
+            />
+          )}
+          {replayCount > 0 && (
+            <Meta
+              label="Replayed into"
+              value={`${replayCount} run${replayCount === 1 ? "" : "s"}`}
+              title="Show the runs replayed from this one"
+              onClick={() => onShowReplays?.(r.id)}
+            />
+          )}
+          <Meta label="Errors" value={String(r.errorCount)} error={r.errorCount > 0} />
+          <Meta label="Ended" value={formatTime(r.endedAt)} />
+        </div>
+
+        <PayloadTabs run={r} logs={logs.root} />
+
+        {renderControlHistory?.(r.id)}
+
+        <div className="steps-head">
+          <span className="sec-title">Steps</span>
+          <span className="steps-prog tnum">
+            {progress.ix}
+            <span className="sp-sep">/</span>
+            {progress.total}
+          </span>
+          <div className="steps-seg" role="tablist">
+            <button
+              type="button"
+              className="seg-btn"
+              role="tab"
+              aria-selected={view === "list"}
+              onClick={() => setView("list")}
+            >
+              List
+            </button>
+            <button
+              type="button"
+              className="seg-btn"
+              role="tab"
+              aria-selected={view === "flow"}
+              onClick={() => setView("flow")}
+            >
+              <Workflow className="seg-ico" />
+              Flow
+            </button>
+            <button
+              type="button"
+              className="seg-btn"
+              role="tab"
+              aria-selected={view === "timeline"}
+              onClick={() => setView("timeline")}
+            >
+              <BarChartHorizontalBig className="seg-ico" />
+              Timeline
+            </button>
+          </div>
+        </div>
+
+        <RunStepsPanel
+          loading={steps.isLoading}
+          steps={rows}
+          view={view}
+          runPaused={isPaused}
+          logs={logs}
+          workflowName={r.workflowName}
+          runId={r.id}
+          renderStepRetry={stepRetry}
+        />
+      </div>
+    </div>
+  );
+}
+
+function RunStepsPanel({
+  loading,
+  steps,
+  view,
+  runPaused,
+  logs,
+  workflowName,
+  runId,
+  renderStepRetry,
+}: {
+  loading: boolean;
+  steps: Step[];
+  view: StepsView;
+  runPaused: boolean;
+  logs: RunLogs;
+  workflowName: string;
+  runId: string;
+  renderStepRetry?: (stepName: string) => ReactNode;
+}) {
+  if (loading) {
+    return (
+      <div className="steps-loading">
+        <Loader2 className="size-3.5 animate-spin" />
+      </div>
+    );
+  }
+  if (steps.length === 0) return <div className="steps-empty">No steps recorded yet.</div>;
+  if (view === "flow") {
+    return (
+      <StepFlow
+        key={runId}
+        steps={steps}
+        workflowName={workflowName}
+        runPaused={runPaused}
+        logs={logs}
+        renderStepRetry={renderStepRetry}
+      />
+    );
+  }
+  if (view === "timeline") {
+    return (
+      <StepTimeline
+        key={runId}
+        steps={steps}
+        runPaused={runPaused}
+        logs={logs}
+        renderStepRetry={renderStepRetry}
+      />
+    );
+  }
+  return (
+    <div className="steplist">
+      {steps.map((s) => (
+        <StepRow
+          key={`${s.index}-${s.attempt}`}
+          step={s}
+          index={s.index + 1}
+          current={s.status === "running" || s.status === "waiting"}
+          runPaused={runPaused}
+          logs={logs.byStep.get(stepLogKey(s.name, s.attempt)) ?? NO_LOGS}
+          renderStepRetry={renderStepRetry}
+        />
+      ))}
+    </div>
+  );
+}
+
+function CopyId({ id }: { id: string }) {
+  const { copied, copy } = useCopyToClipboard();
+  return (
+    <button type="button" className="copy" title="Copy run id" onClick={() => copy(id)}>
+      {copied ? <Check className="size-3" /> : <Copy className="size-3" />}
+    </button>
+  );
+}

package/src/components/RunInspectorActions.tsx

@@ -0,0 +1,40 @@
+import { RotateCcw } from "lucide-react";
+import { useState } from "react";
+import { ACTIVE_STATUSES, type Run } from "@durablex/react";
+import { RunCancelButton } from "./RunCancelButton";
+import { RunPauseButton } from "./RunPauseButton";
+import { ReplayRunDialog } from "./ReplayRunDialog";
+
+// The run inspector's header controls: a live run can be paused/cancelled, a
+// terminal run replayed. onOpenRun is the navigation the replay toast uses to
+// jump to the forked run.
+export function RunInspectorActions({
+  run,
+  onOpenRun,
+}: {
+  run: Run;
+  onOpenRun?: (runId: string) => void;
+}) {
+  const isLive = ACTIVE_STATUSES.has(run.status) || run.status === "paused";
+  if (isLive) {
+    return (
+      <>
+        <RunPauseButton id={run.id} status={run.status} />
+        <RunCancelButton id={run.id} />
+      </>
+    );
+  }
+  return <ReplayButton run={run} onOpenRun={onOpenRun} />;
+}
+
+function ReplayButton({ run, onOpenRun }: { run: Run; onOpenRun?: (runId: string) => void }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <button type="button" className="btn focusable" onClick={() => setOpen(true)}>
+        <RotateCcw /> Replay
+      </button>
+      <ReplayRunDialog run={run} open={open} onOpenChange={setOpen} onOpenRun={onOpenRun} />
+    </>
+  );
+}

package/src/components/RunPauseButton.tsx

@@ -0,0 +1,34 @@
+import { Loader2, Pause, Play } from "lucide-react";
+import { usePauseRun, useResumeRun, type RunStatus } from "@durablex/react";
+
+// Reversible and cheap, so unlike Cancel these fire on a single click with no confirm.
+export function RunPauseButton({ id, status }: { id: string; status: RunStatus }) {
+  const pause = usePauseRun();
+  const resume = useResumeRun();
+
+  if (status === "paused") {
+    return (
+      <button
+        type="button"
+        className="btn focusable"
+        title="Resume - re-queues the run; it continues from the next step."
+        disabled={resume.isPending}
+        onClick={() => resume.mutate(id)}
+      >
+        {resume.isPending ? <Loader2 className="animate-spin" /> : <Play />} Resume
+      </button>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      className="btn focusable"
+      title="Pause - halts the run after the current step finishes."
+      disabled={pause.isPending}
+      onClick={() => pause.mutate(id)}
+    >
+      {pause.isPending ? <Loader2 className="animate-spin" /> : <Pause />} Pause
+    </button>
+  );
+}

package/src/components/RunnerLiveBadge.tsx

@@ -0,0 +1,11 @@
+import { StatusBadge } from "./StatusBadge";
+
+const RUNNER_BADGE = {
+  live: { status: "succeeded", label: "Live" },
+  stale: { status: "cancelled", label: "Stale" },
+} as const;
+
+export function RunnerLiveBadge({ live, small }: { live: boolean; small?: boolean }) {
+  const m = live ? RUNNER_BADGE.live : RUNNER_BADGE.stale;
+  return <StatusBadge status={m.status} label={m.label} small={small} />;
+}

package/src/components/RunsFilterBar.tsx

@@ -0,0 +1,180 @@
+import { Braces, Search, X } from "lucide-react";
+import type { ReactNode } from "react";
+import { ALL_FILTER, type RunTypeFilter, type StatusFilter } from "../lib/run-filters";
+import { AppFilter } from "./filters/AppFilter";
+import { FilterDropdown } from "./filters/FilterDropdown";
+import { FilterDropdownButton } from "./filters/FilterDropdownButton";
+import { FilterDropdownItem } from "./filters/FilterDropdownItem";
+import { TimeRangeFilter } from "./filters/TimeRangeFilter";
+
+const STATUS_OPTIONS: { value: StatusFilter; label: string; color?: string }[] = [
+  { value: ALL_FILTER, label: "All statuses" },
+  { value: "queued", label: "Queued", color: "var(--st-queued-fg)" },
+  { value: "running", label: "Running", color: "var(--st-running-fg)" },
+  { value: "paused", label: "Paused", color: "var(--st-paused-fg)" },
+  { value: "succeeded", label: "Succeeded", color: "var(--st-succeeded-fg)" },
+  { value: "failed", label: "Failed", color: "var(--st-failed-fg)" },
+  { value: "cancelled", label: "Cancelled", color: "var(--st-cancelled-fg)" },
+];
+
+const RUNTYPE_OPTIONS: { value: RunTypeFilter; label: string }[] = [
+  { value: ALL_FILTER, label: "All run types" },
+  { value: "triggered", label: "Event-triggered" },
+  { value: "scheduled", label: "Scheduled (cron)" },
+];
+
+interface RunsFilterBarProps {
+  query: string;
+  onQuery(v: string): void;
+  deep: boolean;
+  onDeep(v: boolean): void;
+  time: string;
+  onTime(v: string): void;
+  status: StatusFilter;
+  onStatus(v: StatusFilter): void;
+  app: string;
+  onApp(v: string): void;
+  runType: RunTypeFilter;
+  onRunType(v: RunTypeFilter): void;
+  shown: number;
+  action?: ReactNode;
+}
+
+export function RunsFilterBar({
+  query,
+  onQuery,
+  deep,
+  onDeep,
+  time,
+  onTime,
+  status,
+  onStatus,
+  app,
+  onApp,
+  runType,
+  onRunType,
+  shown,
+  action,
+}: RunsFilterBarProps) {
+  const statusOpt = STATUS_OPTIONS.find((o) => o.value === status);
+  const runTypeOpt = RUNTYPE_OPTIONS.find((o) => o.value === runType);
+  const activeCount =
+    (status !== ALL_FILTER ? 1 : 0) +
+    (app !== ALL_FILTER ? 1 : 0) +
+    (runType !== ALL_FILTER ? 1 : 0) +
+    (query ? 1 : 0) +
+    (deep ? 1 : 0);
+  const clearAll = () => {
+    onStatus(ALL_FILTER);
+    onApp(ALL_FILTER);
+    onRunType(ALL_FILTER);
+    onQuery("");
+    onDeep(false);
+  };
+
+  return (
+    <div className="filterbar">
+      <div className="fb-search-field">
+        <Search />
+        <input
+          placeholder={deep ? "Search input & result…" : "Search runs, ids, apps…"}
+          value={query}
+          onChange={(e) => onQuery(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Escape") onQuery("");
+          }}
+        />
+        {query && (
+          <span className="x" title="Clear search" onClick={() => onQuery("")}>
+            <X style={{ width: 12, height: 12 }} />
+          </span>
+        )}
+      </div>
+
+      <button
+        type="button"
+        className="chip"
+        data-on={deep ? "1" : "0"}
+        title="Also search run input, result, and error content"
+        onClick={() => onDeep(!deep)}
+      >
+        <Braces /> Payloads
+      </button>
+
+      <TimeRangeFilter time={time} onTime={onTime} />
+
+      <FilterDropdown
+        width={180}
+        trigger={(open, toggle) => (
+          <FilterDropdownButton
+            open={open}
+            toggle={toggle}
+            keyLabel="Status"
+            value={statusOpt?.label === "All statuses" ? "All" : (statusOpt?.label ?? "All")}
+            dot={statusOpt?.color ?? null}
+          />
+        )}
+      >
+        {(close) =>
+          STATUS_OPTIONS.map((o) => (
+            <FilterDropdownItem
+              key={o.value}
+              active={status === o.value}
+              dot={o.color ?? null}
+              label={o.label}
+              onClick={() => {
+                onStatus(o.value);
+                close();
+              }}
+            />
+          ))
+        }
+      </FilterDropdown>
+
+      <AppFilter app={app} onApp={onApp} />
+
+      <FilterDropdown
+        width={180}
+        trigger={(open, toggle) => (
+          <FilterDropdownButton
+            open={open}
+            toggle={toggle}
+            keyLabel="Run type"
+            value={
+              runType === ALL_FILTER ? "All" : (runTypeOpt?.label.replace(/ \(.*\)/, "") ?? "All")
+            }
+          />
+        )}
+      >
+        {(close) =>
+          RUNTYPE_OPTIONS.map((o) => (
+            <FilterDropdownItem
+              key={o.value}
+              active={runType === o.value}
+              label={o.label}
+              onClick={() => {
+                onRunType(o.value);
+                close();
+              }}
+            />
+          ))
+        }
+      </FilterDropdown>
+
+      {activeCount > 0 && (
+        <button
+          type="button"
+          className="fb-btn focusable"
+          title="Clear all filters"
+          onClick={clearAll}
+        >
+          <X style={{ width: 12, height: 12 }} /> Clear
+        </button>
+      )}
+
+      <span className="fb-spacer" />
+      {action}
+      <span className="fb-meta">{shown} shown</span>
+    </div>
+  );
+}