@durablex/react-ui 0.1.0-beta.3

package/src/components/WorkflowRunDialog.tsx

@@ -0,0 +1,187 @@
+import { useMemo, useState, type ReactNode } from "react";
+import { useTriggerEvent, type SendEventResult, type WorkflowDef } from "@durablex/react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../ui/dialog";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+import { parseJson } from "../lib/json-highlight";
+import { workflowRunPlan, type EventRunOption } from "../lib/workflow-run";
+import { AppTag } from "./AppTag";
+import { JsonEditor } from "./JsonEditor";
+import { TriggerEventResult } from "./TriggerEventResult";
+
+export function WorkflowRunDialog({
+  workflow,
+  open,
+  onOpenChange,
+  onOpenRun,
+}: {
+  workflow: WorkflowDef;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onOpenRun: (runId: string) => void;
+}) {
+  // A cron-only workflow has no fireable trigger, so RunForm (which reads options[0]) is
+  // only mounted when there is at least one option. WorkflowRunAction already gates on this.
+  const runnable = workflowRunPlan(workflow).options.length > 0;
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        {open && runnable && (
+          <RunForm
+            key={workflow.name}
+            workflow={workflow}
+            onClose={() => onOpenChange(false)}
+            onOpenRun={onOpenRun}
+          />
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function RunForm({
+  workflow,
+  onClose,
+  onOpenRun,
+}: {
+  workflow: WorkflowDef;
+  onClose: () => void;
+  onOpenRun: (runId: string) => void;
+}) {
+  const { options } = workflowRunPlan(workflow);
+  const [selected, setSelected] = useState(0);
+  // RunForm is only mounted when options is non-empty; the fallback keeps the type total.
+  const option: EventRunOption = options[selected] ??
+    options[0] ?? { value: "", pattern: "", isWildcard: false };
+
+  const [eventName, setEventName] = useState(option.value);
+  const [payload, setPayload] = useState("{}");
+  const [result, setResult] = useState<SendEventResult | null>(null);
+  const fire = useTriggerEvent();
+
+  const parsed = useMemo(() => parseJson(payload), [payload]);
+  const canSubmit = eventName.trim() !== "" && parsed.ok && !fire.isPending;
+
+  function pick(index: number) {
+    const opt = options[index];
+    if (!opt) return;
+    setSelected(index);
+    setEventName(opt.value);
+  }
+
+  function submit() {
+    if (!parsed.ok) return;
+    fire.mutate(
+      { name: eventName.trim(), app: workflow.app, data: parsed.value },
+      { onSuccess: setResult },
+    );
+  }
+
+  return (
+    <>
+      <DialogHeader>
+        <DialogTitle>Run {workflow.name}</DialogTitle>
+        <DialogDescription>
+          Fires this workflow's triggering event. Any other workflow whose trigger matches the event
+          also runs.
+        </DialogDescription>
+      </DialogHeader>
+
+      <div className="flex flex-col gap-3">
+        <div className="flex flex-col gap-2 rounded-lg border border-border bg-muted/30 p-2.5 text-xs">
+          {options.length > 1 && (
+            <Row label="Trigger">
+              <div className="flex flex-wrap gap-1.5">
+                {options.map((o, i) => (
+                  <button
+                    key={o.pattern}
+                    type="button"
+                    className="chip focusable font-mono"
+                    data-on={i === selected ? "1" : "0"}
+                    aria-pressed={i === selected}
+                    onClick={() => pick(i)}
+                  >
+                    {o.pattern}
+                  </button>
+                ))}
+              </div>
+            </Row>
+          )}
+
+          <Row label="Event">
+            {option.isWildcard ? (
+              <Input
+                value={eventName}
+                onChange={(e) => setEventName(e.target.value)}
+                aria-label="Event name"
+                className="h-7"
+                autoFocus
+              />
+            ) : (
+              <span className="font-mono">{option.pattern}</span>
+            )}
+          </Row>
+
+          <Row label="App">
+            <AppTag app={workflow.app} />
+          </Row>
+
+          {option.isWildcard && (
+            <p className="text-muted-foreground">
+              <code className="font-mono">{option.pattern}</code> is a wildcard - complete the event
+              name above.
+            </p>
+          )}
+          {option.filter && (
+            <p className="text-muted-foreground">
+              Only runs when: <code className="font-mono">{option.filter}</code>
+            </p>
+          )}
+        </div>
+
+        <div className="flex flex-col gap-1.5">
+          <span className="text-xs font-medium">Payload</span>
+          <JsonEditor value={payload} onChange={setPayload} invalid={!parsed.ok} />
+          {!parsed.ok ? <span className="text-xs text-destructive">{parsed.error}</span> : null}
+        </div>
+
+        {result ? (
+          <TriggerEventResult
+            result={result}
+            onOpenRun={(id) => {
+              onClose();
+              onOpenRun(id);
+            }}
+          />
+        ) : null}
+        {fire.isError ? (
+          <span className="text-xs text-destructive">
+            Could not run: {fire.error instanceof Error ? fire.error.message : "unknown error"}
+          </span>
+        ) : null}
+      </div>
+
+      <DialogFooter showCloseButton>
+        <Button disabled={!canSubmit} onClick={submit}>
+          {fire.isPending ? "Running..." : "Run"}
+        </Button>
+      </DialogFooter>
+    </>
+  );
+}
+
+function Row({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <div className="flex items-center gap-2">
+      <span className="text-muted-foreground w-12 shrink-0">{label}</span>
+      {children}
+    </div>
+  );
+}

package/src/components/WorkflowsView.tsx

@@ -0,0 +1,168 @@
+import { type KeyboardEvent, type ReactNode, useState } from "react";
+import { useWorkflows, type WorkflowDef } from "@durablex/react";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "../ui/resizable";
+import { hasFlowControl } from "../lib/flow-control";
+import { ALL_FILTER } from "../lib/run-filters";
+import { formatNextFire, formatTime } from "../lib/format";
+import { AppFilter } from "./filters/AppFilter";
+import { AppTag } from "./AppTag";
+import { ScheduledBadge } from "./ScheduledBadge";
+import { FlowControlBadge } from "./FlowControlBadge";
+import { WorkflowDetail } from "./WorkflowDetail";
+
+const WORKFLOW_COLUMNS = 6;
+// A workflow is identified by (app, name); JSON-encode the pair so the key can't
+// collide for different splits of the same concatenation (e.g. a|bc vs ab|c).
+const workflowKey = (w: { app: string; name: string }) => JSON.stringify([w.app, w.name]);
+
+export function WorkflowsView({
+  onOpenRun,
+  renderRunAction,
+}: {
+  onOpenRun(runId: string): void;
+  renderRunAction?: (workflow: WorkflowDef) => ReactNode;
+}) {
+  const { data, isLoading, isError, error } = useWorkflows();
+  const [app, setApp] = useState<string>(ALL_FILTER);
+  const [selectedKey, setSelectedKey] = useState<string | null>(null);
+
+  const rows = (data ?? []).filter((w) => app === ALL_FILTER || w.app === app);
+  const selected = (data ?? []).find((w) => workflowKey(w) === selectedKey) ?? null;
+
+  return (
+    <ResizablePanelGroup orientation="horizontal" className="min-h-0 flex-1">
+      <ResizablePanel minSize="30%">
+        <div className="content">
+          <div className="tbar">
+            <span className="meta">{rows.length} workflows</span>
+            <span className="tbar-spacer" />
+            <AppFilter app={app} onApp={setApp} align="right" />
+          </div>
+
+          <div className="tablewrap">
+            <table className="runs">
+              <thead>
+                <tr>
+                  <th>Name</th>
+                  <th>App</th>
+                  <th>Schedule</th>
+                  <th>Next run</th>
+                  <th className="num">Max attempts</th>
+                  <th>Backoff</th>
+                </tr>
+              </thead>
+              <tbody>
+                {isLoading && rows.length === 0 ? (
+                  <tr className="table-status">
+                    <td colSpan={WORKFLOW_COLUMNS}>Loading workflows…</td>
+                  </tr>
+                ) : isError ? (
+                  <tr className="table-status">
+                    <td colSpan={WORKFLOW_COLUMNS}>
+                      {error instanceof Error ? error.message : "Failed to load workflows"}
+                    </td>
+                  </tr>
+                ) : rows.length === 0 ? (
+                  <tr className="table-status">
+                    <td colSpan={WORKFLOW_COLUMNS}>
+                      No workflows registered. Start a runner to register one.
+                    </td>
+                  </tr>
+                ) : (
+                  rows.map((w) => (
+                    <WorkflowRow
+                      key={workflowKey(w)}
+                      workflow={w}
+                      selected={workflowKey(w) === selectedKey}
+                      onSelect={() => setSelectedKey(workflowKey(w))}
+                    />
+                  ))
+                )}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </ResizablePanel>
+      {selected && (
+        <>
+          <ResizableHandle withHandle />
+          <ResizablePanel defaultSize="42%" minSize="28%" maxSize="68%">
+            <WorkflowDetail
+              key={selectedKey ?? ""}
+              workflow={selected}
+              onClose={() => setSelectedKey(null)}
+              onOpenRun={onOpenRun}
+              renderRunAction={renderRunAction}
+            />
+          </ResizablePanel>
+        </>
+      )}
+    </ResizablePanelGroup>
+  );
+}
+
+function WorkflowRow({
+  workflow: w,
+  selected,
+  onSelect,
+}: {
+  workflow: WorkflowDef;
+  selected: boolean;
+  onSelect(): void;
+}) {
+  const onKeyDown = (e: KeyboardEvent<HTMLTableRowElement>) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      onSelect();
+    }
+  };
+  const schedule = w.scheduled ? w.schedules?.[0] : undefined;
+
+  return (
+    <tr
+      className="row focusable"
+      tabIndex={0}
+      data-selected={selected ? "1" : "0"}
+      onClick={onSelect}
+      onKeyDown={onKeyDown}
+    >
+      <td>
+        <div className="wf-cell">
+          <span className="wf-name">{w.name}</span>
+          {hasFlowControl(w.flowControl) && <FlowControlBadge compact />}
+        </div>
+      </td>
+      <td>
+        <AppTag app={w.app} />
+      </td>
+      <td>
+        {schedule ? (
+          <div className="step-cell">
+            <ScheduledBadge compact />
+            <span className="font-mono text-xs">{schedule.cron}</span>
+            {w.schedules && w.schedules.length > 1 && (
+              <span className="cell-mut">+{w.schedules.length - 1}</span>
+            )}
+          </div>
+        ) : (
+          <span className="cell-mut">-</span>
+        )}
+      </td>
+      <td>
+        {schedule ? (
+          <span className="cell-mut" title={formatTime(schedule.nextFireAt)}>
+            {formatNextFire(schedule.nextFireAt)}
+          </span>
+        ) : (
+          <span className="cell-mut">-</span>
+        )}
+      </td>
+      <td className="num">
+        <span className="dur">{w.maxAttempts}</span>
+      </td>
+      <td>
+        <span className="cell-mut font-mono text-xs">{w.backoff}</span>
+      </td>
+    </tr>
+  );
+}

package/src/components/charts/ChartCard.tsx

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+import { SectionHeader } from "../SectionHeader";
+
+export function ChartCard({
+  title,
+  action,
+  children,
+}: {
+  title: string;
+  action?: ReactNode;
+  children: ReactNode;
+}) {
+  return (
+    <section className="border-b">
+      <SectionHeader action={action}>{title}</SectionHeader>
+      <div className="p-3">{children}</div>
+    </section>
+  );
+}

package/src/components/charts/RunCharts.tsx

@@ -0,0 +1,31 @@
+import { useState } from "react";
+import type { RunSeries } from "@durablex/react";
+import { TimeZoneFilter } from "../filters/TimeZoneFilter";
+import type { TimeZoneMode } from "../../lib/time-range";
+import { ChartCard } from "./ChartCard";
+import { RunLatencyChart } from "./RunLatencyChart";
+import { RunsOverTimeChart } from "./RunsOverTimeChart";
+
+export function RunCharts({ series, loading }: { series?: RunSeries; loading: boolean }) {
+  // tz governs the wall clock both time axes render in; the toggle lives on the
+  // first chart since it applies to the whole pair.
+  const [tz, setTz] = useState<TimeZoneMode>("local");
+
+  if (!series || series.buckets.length === 0) {
+    return (
+      <div className="text-muted-foreground grid h-40 place-items-center text-xs">
+        {loading ? "Loading…" : "No runs in this window yet."}
+      </div>
+    );
+  }
+  return (
+    <>
+      <ChartCard title="Runs over time" action={<TimeZoneFilter tz={tz} onTz={setTz} />}>
+        <RunsOverTimeChart series={series} tz={tz} />
+      </ChartCard>
+      <ChartCard title="Run latency">
+        <RunLatencyChart series={series} tz={tz} />
+      </ChartCard>
+    </>
+  );
+}

package/src/components/charts/RunLatencyChart.tsx

@@ -0,0 +1,71 @@
+import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";
+import type { RunSeries } from "@durablex/react";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "../../ui/chart";
+import { bucketTickLabel, type TimeZoneMode } from "../../lib/time-range";
+
+const CONFIG: ChartConfig = {
+  avgMs: { label: "Avg", color: "var(--chart-1)" },
+  maxMs: { label: "Max", color: "var(--chart-4)" },
+};
+
+// formatMs renders a duration compactly for the axis/tooltip: sub-second in ms,
+// otherwise seconds.
+function formatMs(ms: number): string {
+  return ms < 1000 ? `${ms}ms` : `${(ms / 1000).toFixed(ms < 10_000 ? 1 : 0)}s`;
+}
+
+export function RunLatencyChart({ series, tz }: { series: RunSeries; tz: TimeZoneMode }) {
+  const rows = series.buckets.map((b) => ({
+    ts: b.ts,
+    avgMs: b.avgMs ?? null,
+    maxMs: b.maxMs ?? null,
+  }));
+  return (
+    <ChartContainer config={CONFIG} className="aspect-auto h-56 w-full">
+      <LineChart data={rows} margin={{ left: 4, right: 8, top: 8 }}>
+        <CartesianGrid vertical={false} />
+        <XAxis
+          dataKey="ts"
+          tickLine={false}
+          axisLine={false}
+          tickMargin={8}
+          minTickGap={24}
+          tickFormatter={(ts) => bucketTickLabel(ts, series.bucketSeconds, tz)}
+        />
+        <YAxis tickLine={false} axisLine={false} width={40} tickFormatter={formatMs} />
+        <ChartTooltip
+          content={
+            <ChartTooltipContent
+              formatter={(v) => formatMs(Number(v))}
+              labelFormatter={(_, p) =>
+                bucketTickLabel(String(p[0]?.payload.ts), series.bucketSeconds, tz)
+              }
+            />
+          }
+        />
+        <ChartLegend content={<ChartLegendContent />} />
+        <Line
+          dataKey="avgMs"
+          type="monotone"
+          stroke="var(--color-avgMs)"
+          dot={false}
+          connectNulls
+        />
+        <Line
+          dataKey="maxMs"
+          type="monotone"
+          stroke="var(--color-maxMs)"
+          dot={false}
+          connectNulls
+        />
+      </LineChart>
+    </ChartContainer>
+  );
+}

package/src/components/charts/RunsOverTimeChart.tsx

@@ -0,0 +1,60 @@
+import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts";
+import type { RunSeries } from "@durablex/react";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "../../ui/chart";
+import { bucketTickLabel, type TimeZoneMode } from "../../lib/time-range";
+
+// The statuses stacked into each bucket bar, in draw order, each themed by the
+// shared status token so the chart reads the same as the run badges.
+const STATUS_SERIES = [
+  { key: "succeeded", label: "Succeeded", color: "var(--st-succeeded-fg)" },
+  { key: "failed", label: "Failed", color: "var(--st-failed-fg)" },
+  { key: "cancelled", label: "Cancelled", color: "var(--st-cancelled-fg)" },
+  { key: "running", label: "Running", color: "var(--st-running-fg)" },
+  { key: "waiting", label: "Waiting", color: "var(--st-running-fg)" },
+  { key: "queued", label: "Queued", color: "var(--st-queued-fg)" },
+  { key: "paused", label: "Paused", color: "var(--st-paused-fg)" },
+] as const;
+
+const CONFIG: ChartConfig = Object.fromEntries(
+  STATUS_SERIES.map((s) => [s.key, { label: s.label, color: s.color }]),
+);
+
+export function RunsOverTimeChart({ series, tz }: { series: RunSeries; tz: TimeZoneMode }) {
+  const rows = series.buckets.map((b) => ({ ts: b.ts, ...b.counts }));
+  return (
+    <ChartContainer config={CONFIG} className="aspect-auto h-56 w-full">
+      <BarChart data={rows} margin={{ left: 4, right: 8, top: 8 }}>
+        <CartesianGrid vertical={false} />
+        <XAxis
+          dataKey="ts"
+          tickLine={false}
+          axisLine={false}
+          tickMargin={8}
+          minTickGap={24}
+          tickFormatter={(ts) => bucketTickLabel(ts, series.bucketSeconds, tz)}
+        />
+        <YAxis tickLine={false} axisLine={false} width={28} allowDecimals={false} />
+        <ChartTooltip
+          content={
+            <ChartTooltipContent
+              labelFormatter={(_, p) =>
+                bucketTickLabel(String(p[0]?.payload.ts), series.bucketSeconds, tz)
+              }
+            />
+          }
+        />
+        <ChartLegend content={<ChartLegendContent />} />
+        {STATUS_SERIES.map((s) => (
+          <Bar key={s.key} dataKey={s.key} stackId="runs" fill={`var(--color-${s.key})`} />
+        ))}
+      </BarChart>
+    </ChartContainer>
+  );
+}

package/src/components/filters/AppFilter.tsx

@@ -0,0 +1,65 @@
+import { useMemo } from "react";
+import { useWorkflows } from "@durablex/react";
+import { appHue } from "../../lib/app-color";
+import { ALL_FILTER } from "../../lib/run-filters";
+import { FilterDropdown } from "./FilterDropdown";
+import { FilterDropdownButton } from "./FilterDropdownButton";
+import { FilterDropdownItem } from "./FilterDropdownItem";
+
+export function AppFilter({
+  app,
+  onApp,
+  align,
+  width = 190,
+}: {
+  app: string;
+  onApp(app: string): void;
+  align?: "right";
+  width?: number;
+}) {
+  const { data } = useWorkflows();
+  const apps = useMemo(() => [...new Set((data ?? []).map((w) => w.app))].sort(), [data]);
+
+  return (
+    <FilterDropdown
+      align={align}
+      width={width}
+      trigger={(open, toggle) => (
+        <FilterDropdownButton
+          open={open}
+          toggle={toggle}
+          keyLabel="App"
+          value={app === ALL_FILTER ? "All" : app}
+          dot={app === ALL_FILTER ? null : appHue(app)}
+        />
+      )}
+    >
+      {(close) => (
+        <>
+          <FilterDropdownItem
+            active={app === ALL_FILTER}
+            dot={null}
+            label="All apps"
+            onClick={() => {
+              onApp(ALL_FILTER);
+              close();
+            }}
+          />
+          <div className="dd-sep" />
+          {apps.map((a) => (
+            <FilterDropdownItem
+              key={a}
+              active={app === a}
+              dot={appHue(a)}
+              label={a}
+              onClick={() => {
+                onApp(a);
+                close();
+              }}
+            />
+          ))}
+        </>
+      )}
+    </FilterDropdown>
+  );
+}

package/src/components/filters/FilterDropdown.tsx

@@ -0,0 +1,33 @@
+import { useCallback, useRef, useState, type ReactNode } from "react";
+import { useClickOutside } from "./use-click-outside";
+
+export function FilterDropdown({
+  trigger,
+  align,
+  width,
+  children,
+}: {
+  trigger: (open: boolean, toggle: () => void) => ReactNode;
+  align?: "right";
+  width?: number;
+  children: (close: () => void) => ReactNode;
+}) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  const close = useCallback(() => setOpen(false), []);
+  useClickOutside(ref, close);
+
+  return (
+    <div className="dd" ref={ref}>
+      {trigger(open, () => setOpen((o) => !o))}
+      {open && (
+        <div
+          className={align === "right" ? "dd-menu right" : "dd-menu"}
+          style={width ? { minWidth: width } : undefined}
+        >
+          {children(close)}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/filters/FilterDropdownButton.tsx

@@ -0,0 +1,31 @@
+import { ChevronDown } from "lucide-react";
+
+export function FilterDropdownButton({
+  open,
+  toggle,
+  keyLabel,
+  value,
+  dot,
+}: {
+  open: boolean;
+  toggle: () => void;
+  keyLabel?: string;
+  value: string;
+  dot?: string | null;
+}) {
+  return (
+    <button
+      type="button"
+      className="dd-btn focusable"
+      data-open={open ? "1" : "0"}
+      onClick={toggle}
+    >
+      {keyLabel && <span className="dd-key">{keyLabel}</span>}
+      <span className="dd-val">
+        {dot && <span className="vdot" style={{ background: dot }} />}
+        {value}
+      </span>
+      <ChevronDown className="dd-chev" />
+    </button>
+  );
+}