@durablex/react-ui 0.1.0-beta.3

package/src/components/StatTileGrid.tsx

@@ -0,0 +1,71 @@
+import type { StatusFilter } from "../lib/run-filters";
+import { ResumeMark } from "./ResumeMark";
+
+export interface StatTile {
+  label: string;
+  value: number;
+  sub: string;
+  token: string;
+  mark?: boolean;
+  trend?: "up" | "down";
+  // When set, the tile is a button that filters the runs to this status (and shows
+  // an active state while that filter is on). Tiles without it stay static.
+  status?: StatusFilter;
+  active?: boolean;
+}
+
+export function StatTileGrid({
+  tiles,
+  onSelect,
+}: {
+  tiles: StatTile[];
+  onSelect?: (status: StatusFilter) => void;
+}) {
+  return (
+    <div className="stats">
+      {tiles.map((t) => {
+        const inner = (
+          <>
+            <div className="stat-top">
+              {t.mark ? (
+                <ResumeMark variant="run" size={12} className="stat-mark" />
+              ) : (
+                <i className="stat-dot" style={{ background: `var(${t.token})` }} />
+              )}
+              <span className="stat-label">{t.label}</span>
+            </div>
+            <div className="stat-val">{t.value}</div>
+            <div className="stat-sub">
+              <span className={t.trend ?? ""}>{t.sub}</span>
+            </div>
+          </>
+        );
+        if (t.status && onSelect) {
+          const status = t.status;
+          return (
+            <button
+              type="button"
+              className="stat stat-btn focusable"
+              key={t.label}
+              data-active={t.active ? "1" : "0"}
+              style={t.active ? { boxShadow: `inset 0 -2px 0 var(${t.token})` } : undefined}
+              title={
+                t.active
+                  ? `Clear the ${t.label.toLowerCase()} filter`
+                  : `Show ${t.label.toLowerCase()} runs`
+              }
+              onClick={() => onSelect(status)}
+            >
+              {inner}
+            </button>
+          );
+        }
+        return (
+          <div className="stat" key={t.label}>
+            {inner}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/StatsTiles.tsx

@@ -0,0 +1,66 @@
+import type { RunStats } from "@durablex/react";
+import type { StatusFilter } from "../lib/run-filters";
+import { StatTileGrid } from "./StatTileGrid";
+
+const EMPTY: RunStats = {
+  total: 0,
+  active: 0,
+  queued: 0,
+  running: 0,
+  succeeded: 0,
+  failed: 0,
+  successRate: 100,
+};
+
+export function StatsTiles({
+  stats,
+  rangeLabel,
+  activeStatus,
+  onFilterStatus,
+}: {
+  stats?: RunStats;
+  rangeLabel?: string;
+  activeStatus?: StatusFilter;
+  onFilterStatus?: (status: StatusFilter) => void;
+}) {
+  const s = stats ?? EMPTY;
+
+  return (
+    <StatTileGrid
+      onSelect={onFilterStatus}
+      tiles={[
+        {
+          label: "Recent",
+          value: s.total,
+          sub: rangeLabel ?? "recent",
+          token: "--muted-foreground",
+        },
+        {
+          label: "Active",
+          value: s.active,
+          sub: "in progress",
+          token: "--st-running-fg",
+          mark: true,
+        },
+        {
+          label: "Succeeded",
+          value: s.succeeded,
+          sub: `${s.successRate}% success`,
+          token: "--st-succeeded-fg",
+          trend: "up",
+          status: "succeeded",
+          active: activeStatus === "succeeded",
+        },
+        {
+          label: "Failed",
+          value: s.failed,
+          sub: s.failed ? "need attention" : "all clear",
+          token: "--st-failed-fg",
+          trend: s.failed ? "down" : undefined,
+          status: "failed",
+          active: activeStatus === "failed",
+        },
+      ]}
+    />
+  );
+}

package/src/components/StatusBadge.tsx

@@ -0,0 +1,50 @@
+import type { RunStatus, StepStatus } from "@durablex/react";
+import { cn } from "../lib/utils";
+import { ResumeMark } from "./ResumeMark";
+import { STATUS_LABELS } from "../lib/status-label";
+
+type Status = RunStatus | StepStatus;
+
+const LIVE_STATUSES: ReadonlySet<Status> = new Set(["running", "waiting"]);
+
+export function StatusBadge({
+  status,
+  small,
+  label,
+  className,
+}: {
+  status: Status;
+  small?: boolean;
+  label?: string;
+  className?: string;
+}) {
+  const live = LIVE_STATUSES.has(status);
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center gap-1.5 border border-transparent font-medium leading-none whitespace-nowrap",
+        small ? "h-[17px] px-1.5 text-[10px]" : "h-[19px] px-1.5 text-[11px]",
+        status === "skipped" && "border-dashed",
+        className,
+      )}
+      style={{
+        backgroundColor: `var(--st-${status}-bg)`,
+        color: `var(--st-${status}-fg)`,
+        borderColor:
+          status === "skipped"
+            ? "color-mix(in oklch, var(--st-skipped-fg) 40%, transparent)"
+            : undefined,
+      }}
+    >
+      {live ? (
+        <ResumeMark variant="run" size={small ? 12 : 13} className="badge-mark" />
+      ) : (
+        <span
+          className="size-[6px] shrink-0 rounded-full"
+          style={{ backgroundColor: `var(--st-${status}-fg)` }}
+        />
+      )}
+      {label ?? STATUS_LABELS[status] ?? status}
+    </span>
+  );
+}

package/src/components/StepFlow.tsx

@@ -0,0 +1,105 @@
+import { ChevronRight, TriangleAlert } from "lucide-react";
+import { Fragment, type ReactNode, useState } from "react";
+import type { Step } from "@durablex/react";
+import { formatDuration } from "../lib/format";
+import { NO_LOGS, type RunLogs, stepLogKey } from "../lib/run-logs";
+import { STATUS_LABELS } from "../lib/status-label";
+import { initialStepSelection } from "../lib/step-detail";
+import { stepDisplayStatus } from "../lib/step-display";
+import { StepGlyph } from "./StepGlyph";
+import { StepInspector } from "./StepInspector";
+
+function FlowNode({
+  step,
+  selected,
+  runPaused,
+  onSelect,
+}: {
+  step: Step;
+  selected: boolean;
+  runPaused: boolean;
+  onSelect(): void;
+}) {
+  const display = stepDisplayStatus(step.status, runPaused);
+  return (
+    <button
+      type="button"
+      className={"flow-node focusable" + (selected ? " sel" : "")}
+      data-status={display}
+      aria-pressed={selected}
+      onClick={onSelect}
+    >
+      <span className="fn-rail" />
+      <span className="fn-node">
+        <StepGlyph status={display} className="fn-gly" />
+      </span>
+      <span className="fn-name">{step.name}</span>
+      {step.attempt > 1 && <span className="fn-att">&times;{step.attempt}</span>}
+      {display !== "succeeded" && (
+        <span className="fn-status">{STATUS_LABELS[display] ?? display}</span>
+      )}
+      {step.error && <TriangleAlert className="fn-errflag" />}
+      <span className="fn-dur">{formatDuration(step.durationMs)}</span>
+    </button>
+  );
+}
+
+export function StepFlow({
+  steps,
+  workflowName,
+  runPaused,
+  logs,
+  renderStepRetry,
+}: {
+  steps: Step[];
+  workflowName: string;
+  runPaused: boolean;
+  logs: RunLogs;
+  renderStepRetry?: (stepName: string) => ReactNode;
+}) {
+  const [sel, setSel] = useState(() => initialStepSelection(steps));
+  const step = steps[sel] ?? steps[0];
+  if (!step) return null;
+
+  return (
+    <div className="stepflow">
+      <div className="flow-canvas">
+        <div className="flow-trigger">
+          <span className="flow-trigger-dot" />
+          <span>trigger</span>
+          <span className="flow-trigger-wf">{workflowName}</span>
+        </div>
+        {steps.map((s, i) => {
+          const prev = steps[i - 1];
+          return (
+            <Fragment key={`${s.index}-${s.attempt}`}>
+              <div
+                className="flow-edge"
+                data-status={prev ? prev.status : "trigger"}
+                aria-hidden="true"
+              >
+                <span className="fe-line" />
+                <ChevronRight className="fe-arrow" />
+              </div>
+              <FlowNode
+                step={s}
+                selected={i === sel}
+                runPaused={runPaused}
+                onSelect={() => setSel(i)}
+              />
+            </Fragment>
+          );
+        })}
+      </div>
+      <StepInspector
+        key={sel}
+        step={step}
+        logs={logs.byStep.get(stepLogKey(step.name, step.attempt)) ?? NO_LOGS}
+        index={sel}
+        total={steps.length}
+        runPaused={runPaused}
+        renderStepRetry={renderStepRetry}
+      />
+    </div>
+  );
+}

package/src/components/StepGlyph.tsx

@@ -0,0 +1,25 @@
+import { Check, CircleDot, Clock, Loader2, Pause, X } from "lucide-react";
+import type { ComponentType } from "react";
+import { cn } from "../lib/utils";
+import type { StepDisplayStatus } from "../lib/step-display";
+
+const GLYPH: Record<StepDisplayStatus, ComponentType<{ className?: string }>> = {
+  succeeded: Check,
+  failed: X,
+  cancelled: X,
+  running: Loader2,
+  waiting: Clock,
+  skipped: CircleDot,
+  paused: Pause,
+};
+
+export function StepGlyph({
+  status,
+  className,
+}: {
+  status: StepDisplayStatus;
+  className?: string;
+}) {
+  const Glyph = GLYPH[status] ?? CircleDot;
+  return <Glyph className={cn(className, status === "running" && "animate-spin")} />;
+}

package/src/components/StepInspector.tsx

@@ -0,0 +1,44 @@
+import { type ReactNode, useState } from "react";
+import type { LogFrame, Step } from "@durablex/react";
+import { formatDuration } from "../lib/format";
+import { stepTabs, type StepTab } from "../lib/step-detail";
+import { stepDisplayStatus } from "../lib/step-display";
+import { StepTabsView } from "./StepTabsView";
+
+// Keyed by selection in the parent so the tab resets on step change without a
+// setState-in-effect.
+export function StepInspector({
+  step,
+  logs,
+  index,
+  total,
+  runPaused,
+  renderStepRetry,
+}: {
+  step: Step;
+  logs: LogFrame[];
+  index: number;
+  total: number;
+  runPaused: boolean;
+  renderStepRetry?: (stepName: string) => ReactNode;
+}) {
+  const tabs = stepTabs(step, logs.length > 0);
+  const [tab, setTab] = useState<StepTab | null>(tabs[0] ?? null);
+  return (
+    <div className="flow-inspect">
+      <div className="fi-head">
+        <span className="fi-dot" data-status={stepDisplayStatus(step.status, runPaused)} />
+        <span className="fi-name">{step.name}</span>
+        <span className="fi-meta">
+          step {index + 1}/{total} &middot; {formatDuration(step.durationMs)}
+        </span>
+        {renderStepRetry?.(step.name)}
+      </div>
+      {tabs.length > 0 ? (
+        <StepTabsView step={step} logs={logs} tabs={tabs} tab={tab} onTab={setTab} />
+      ) : (
+        <div className="fi-empty">No output, error, or logs recorded for this step.</div>
+      )}
+    </div>
+  );
+}

package/src/components/StepRow.tsx

@@ -0,0 +1,69 @@
+import { ChevronRight } from "lucide-react";
+import { type ReactNode, useState } from "react";
+import type { LogFrame, Step } from "@durablex/react";
+import { formatDuration } from "../lib/format";
+import { STATUS_LABELS } from "../lib/status-label";
+import { stepTabs, type StepTab } from "../lib/step-detail";
+import { stepDisplayStatus } from "../lib/step-display";
+import { StepGlyph } from "./StepGlyph";
+import { StepTabsView } from "./StepTabsView";
+
+export function StepRow({
+  step,
+  index,
+  current,
+  runPaused,
+  logs,
+  renderStepRetry,
+}: {
+  step: Step;
+  index: number;
+  current: boolean;
+  runPaused: boolean;
+  logs: LogFrame[];
+  renderStepRetry?: (stepName: string) => ReactNode;
+}) {
+  const tabs = stepTabs(step, logs.length > 0);
+  const retry = renderStepRetry?.(step.name);
+  const expandable = tabs.length > 0 || retry != null;
+  const [open, setOpen] = useState(step.status === "failed");
+  const [tab, setTab] = useState<StepTab | null>(tabs[0] ?? null);
+  const display = stepDisplayStatus(step.status, runPaused);
+
+  return (
+    <div
+      className={"step" + (open ? " open" : "")}
+      data-status={display}
+      data-current={current ? "1" : undefined}
+    >
+      <button
+        type="button"
+        className={"step-row focusable" + (expandable ? "" : " static")}
+        aria-expanded={expandable ? open : undefined}
+        onClick={() => expandable && setOpen(!open)}
+      >
+        <span className="step-node">
+          <StepGlyph status={display} className="step-gly" />
+        </span>
+        <span className="step-ix">{index}</span>
+        <span className="step-name">{step.name}</span>
+        <span className="step-meta">
+          {display !== "succeeded" && (
+            <span className="step-status">{STATUS_LABELS[display] ?? display}</span>
+          )}
+          {step.attempt > 1 && <span className="step-att">&times;{step.attempt}</span>}
+          <span className="step-dur">{formatDuration(step.durationMs)}</span>
+          {expandable ? <ChevronRight className="step-chev" /> : <span className="step-chev-sp" />}
+        </span>
+      </button>
+      {open && expandable && (
+        <div className="step-body">
+          {tabs.length > 0 && (
+            <StepTabsView step={step} logs={logs} tabs={tabs} tab={tab} onTab={setTab} />
+          )}
+          {retry && <div className="step-actions">{retry}</div>}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/StepTabsView.tsx

@@ -0,0 +1,51 @@
+import { TriangleAlert } from "lucide-react";
+import type { LogFrame, Step } from "@durablex/react";
+import { STEP_TAB_LABEL, stepErrorText, type StepTab } from "../lib/step-detail";
+import { JsonBlock } from "./JsonBlock";
+import { LogList } from "./LogList";
+
+export function StepTabsView({
+  step,
+  logs,
+  tabs,
+  tab,
+  onTab,
+}: {
+  step: Step;
+  logs: LogFrame[];
+  tabs: StepTab[];
+  tab: StepTab | null;
+  onTab(t: StepTab): void;
+}) {
+  return (
+    <>
+      <div className="step-tabs" role="tablist">
+        {tabs.map((t) => (
+          <button
+            key={t}
+            type="button"
+            role="tab"
+            aria-selected={tab === t}
+            className="step-tab"
+            data-kind={t}
+            onClick={() => onTab(t)}
+          >
+            {t === "error" && <TriangleAlert className="step-tab-ico" />}
+            {STEP_TAB_LABEL[t]}
+          </button>
+        ))}
+      </div>
+      <div className="step-pane">
+        {tab === "error" ? (
+          <pre className="errbox">{stepErrorText(step)}</pre>
+        ) : tab === "logs" ? (
+          <LogList logs={logs} />
+        ) : tab === "input" ? (
+          <JsonBlock value={step.input} />
+        ) : (
+          <JsonBlock value={step.output} />
+        )}
+      </div>
+    </>
+  );
+}

package/src/components/StepTimeline.tsx

@@ -0,0 +1,87 @@
+import { type ReactNode, useEffect, useMemo, useState } from "react";
+import type { Step } from "@durablex/react";
+import { formatDuration } from "../lib/format";
+import { NO_LOGS, type RunLogs, stepLogKey } from "../lib/run-logs";
+import { initialStepSelection } from "../lib/step-detail";
+import { stepDisplayStatus } from "../lib/step-display";
+import { buildTimelineLayout } from "../lib/step-timeline";
+import { StepInspector } from "./StepInspector";
+
+export function StepTimeline({
+  steps,
+  runPaused,
+  logs,
+  renderStepRetry,
+}: {
+  steps: Step[];
+  runPaused: boolean;
+  logs: RunLogs;
+  renderStepRetry?: (stepName: string) => ReactNode;
+}) {
+  const [sel, setSel] = useState(() => initialStepSelection(steps));
+  // An unfinished step's bar extends to "now"; tick it while any step is in
+  // flight so the bar grows, and leave it frozen for a terminal or paused run.
+  const ticking = !runPaused && steps.some((s) => s.status === "running" || s.status === "waiting");
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    if (!ticking) return;
+    const id = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(id);
+  }, [ticking]);
+
+  const layout = useMemo(() => buildTimelineLayout(steps, now), [steps, now]);
+  const step = steps[sel] ?? steps[0];
+  if (!step) return null;
+
+  // Axis ticks are cumulative offsets from the run's start, so every label carries a
+  // leading "+" (the first reads "+0ms"), keeping the offset convention uniform.
+  const ticks = [0, 0.25, 0.5, 0.75, 1].map(
+    (f) => `+${formatDuration(Math.round(layout.totalMs * f))}`,
+  );
+
+  return (
+    <div className="steptl">
+      <div className="tl-canvas">
+        <div className="tl-axis" aria-hidden="true">
+          <span className="tl-axis-scale">
+            {ticks.map((label, i) => (
+              <span key={i}>{label}</span>
+            ))}
+          </span>
+        </div>
+        {layout.lanes.map((lane, i) => (
+          <button
+            key={`${lane.step.index}-${lane.step.attempt}`}
+            type="button"
+            className={"tl-row focusable" + (i === sel ? " sel" : "")}
+            aria-pressed={i === sel}
+            onClick={() => setSel(i)}
+          >
+            <span className="tl-label">{lane.step.name}</span>
+            <span className="tl-track">
+              {lane.leftPct === null ? (
+                <span className="tl-skip">not started</span>
+              ) : (
+                <span
+                  className="tl-bar"
+                  data-status={stepDisplayStatus(lane.step.status, runPaused)}
+                  style={{ left: `${lane.leftPct}%`, width: `${lane.widthPct}%` }}
+                />
+              )}
+            </span>
+            <span className="tl-dur tnum">{formatDuration(lane.step.durationMs)}</span>
+          </button>
+        ))}
+      </div>
+      <StepInspector
+        key={sel}
+        step={step}
+        logs={logs.byStep.get(stepLogKey(step.name, step.attempt)) ?? NO_LOGS}
+        index={sel}
+        total={steps.length}
+        runPaused={runPaused}
+        renderStepRetry={renderStepRetry}
+      />
+    </div>
+  );
+}

package/src/components/TableStatusRows.tsx

@@ -0,0 +1,54 @@
+import { Loader2 } from "lucide-react";
+import { TableCell, TableRow } from "../ui/table";
+
+interface TableStatusRowsProps {
+  colSpan: number;
+  isLoading: boolean;
+  hasData: boolean;
+  isError: boolean;
+  error: Error | null;
+  emptyMessage: string;
+  errorFallback: string;
+}
+
+export function TableStatusRows({
+  colSpan,
+  isLoading,
+  hasData,
+  isError,
+  error,
+  emptyMessage,
+  errorFallback,
+}: TableStatusRowsProps) {
+  if (isLoading && !hasData) {
+    return (
+      <TableRow>
+        <TableCell colSpan={colSpan} className="py-8 text-center">
+          <Loader2 className="text-muted-foreground mx-auto h-4 w-4 animate-spin" />
+        </TableCell>
+      </TableRow>
+    );
+  }
+
+  if (isError) {
+    return (
+      <TableRow>
+        <TableCell colSpan={colSpan} className="text-destructive py-6 text-center text-sm">
+          {error?.message ?? errorFallback}
+        </TableCell>
+      </TableRow>
+    );
+  }
+
+  if (!hasData) {
+    return (
+      <TableRow>
+        <TableCell colSpan={colSpan} className="text-muted-foreground py-6 text-center text-sm">
+          {emptyMessage}
+        </TableCell>
+      </TableRow>
+    );
+  }
+
+  return null;
+}