@durablex/react-ui 0.1.0-beta.3

package/src/components/EventsList.tsx

@@ -0,0 +1,170 @@
+import { ChevronDown, ChevronRight, Radio } from "lucide-react";
+import { Fragment, useState } from "react";
+import type { EventLogRecord, TriggeredOutcome } from "@durablex/react";
+import { formatRelative } from "../lib/format";
+import { TABLE_HEAD_CLASS } from "../lib/table";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../ui/table";
+import { AppTag } from "./AppTag";
+import { TableStatusRows } from "./TableStatusRows";
+
+const EVENT_COLUMNS = 5;
+
+interface EventsListProps {
+  events?: EventLogRecord[];
+  isLoading: boolean;
+  isError: boolean;
+  error: Error | null;
+  onOpenRun?: (runId: string) => void;
+}
+
+// outcomeSummary describes what an event did: runs created, gated matches, and
+// resumed waiters. An event that matched nothing reads as a dash.
+function outcomeSummary(ev: EventLogRecord): string {
+  const runs = ev.triggered.filter((t) => t.runId).length;
+  const gated = ev.triggered.length - runs;
+  const parts: string[] = [];
+  if (runs > 0) parts.push(`${runs} run${runs === 1 ? "" : "s"}`);
+  if (gated > 0) parts.push(`${gated} gated`);
+  if (ev.woke > 0) parts.push(`woke ${ev.woke}`);
+  return parts.length > 0 ? parts.join(" · ") : "-";
+}
+
+// Flags are mutually exclusive per the engine's trigger().
+function outcomeLabel(t: TriggeredOutcome): string {
+  if (t.runId) return "ran";
+  if (t.deduped) return "deduped";
+  if (t.debounced) return "debounced";
+  if (t.batched) return "batched";
+  if (t.dropped) return "dropped";
+  if (t.skipped) return "skipped";
+  return "no run";
+}
+
+function OutcomeBadge({ outcome }: { outcome: TriggeredOutcome }) {
+  const ran = Boolean(outcome.runId);
+  return (
+    <span
+      className={
+        "border px-1.5 py-0.5 font-mono text-[10px] " +
+        (ran
+          ? "border-emerald-500/40 text-emerald-600 dark:text-emerald-400"
+          : "text-muted-foreground")
+      }
+    >
+      {outcomeLabel(outcome)}
+    </span>
+  );
+}
+
+function TriggeredRow({
+  outcome,
+  onOpenRun,
+}: {
+  outcome: TriggeredOutcome;
+  onOpenRun?: (runId: string) => void;
+}) {
+  const runId = outcome.runId;
+  return (
+    <div className="flex items-center gap-2 py-0.5">
+      <OutcomeBadge outcome={outcome} />
+      <span className="text-xs font-medium">{outcome.workflow}</span>
+      {outcome.app && <AppTag app={outcome.app} />}
+      {runId &&
+        (onOpenRun ? (
+          <button
+            type="button"
+            className="text-muted-foreground hover:text-foreground font-mono text-[11px] underline underline-offset-2"
+            onClick={() => onOpenRun(runId)}
+          >
+            {runId}
+          </button>
+        ) : (
+          <span className="text-muted-foreground font-mono text-[11px]">{runId}</span>
+        ))}
+    </div>
+  );
+}
+
+export function EventsList({ events, isLoading, isError, error, onOpenRun }: EventsListProps) {
+  const [expanded, setExpanded] = useState<string | null>(null);
+  const toggle = (id: string) => setExpanded((cur) => (cur === id ? null : id));
+
+  return (
+    <div className="rounded-md border">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead className={TABLE_HEAD_CLASS}>Received</TableHead>
+            <TableHead className={TABLE_HEAD_CLASS}>Event</TableHead>
+            <TableHead className={TABLE_HEAD_CLASS}>App</TableHead>
+            <TableHead className={TABLE_HEAD_CLASS}>Source</TableHead>
+            <TableHead className={TABLE_HEAD_CLASS}>Outcome</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableStatusRows
+            colSpan={EVENT_COLUMNS}
+            isLoading={isLoading}
+            hasData={(events?.length ?? 0) > 0}
+            isError={isError}
+            error={error}
+            emptyMessage="No events yet. Fire one with POST /events or emit from a workflow."
+            errorFallback="Failed to load events"
+          />
+          {events?.map((ev) => {
+            const open = expanded === ev.id;
+            const Chevron = open ? ChevronDown : ChevronRight;
+            return (
+              <Fragment key={ev.id}>
+                <TableRow className="cursor-pointer" onClick={() => toggle(ev.id)}>
+                  <TableCell className="text-muted-foreground px-2 py-1.5 font-mono text-[11px] whitespace-nowrap">
+                    {formatRelative(ev.receivedAt)}
+                  </TableCell>
+                  <TableCell className="px-2 py-1.5">
+                    <div className="flex items-center gap-1.5">
+                      <Chevron className="text-muted-foreground size-3.5 shrink-0" />
+                      <Radio className="text-muted-foreground size-3.5 shrink-0 opacity-70" />
+                      <span className="text-xs font-medium">{ev.name}</span>
+                    </div>
+                  </TableCell>
+                  <TableCell className="px-2 py-1.5">
+                    <AppTag app={ev.app} />
+                  </TableCell>
+                  <TableCell className="text-muted-foreground px-2 py-1.5 font-mono text-[11px]">
+                    {ev.source}
+                  </TableCell>
+                  <TableCell className="text-muted-foreground px-2 py-1.5 font-mono text-[11px]">
+                    {outcomeSummary(ev)}
+                  </TableCell>
+                </TableRow>
+                {open && (
+                  <TableRow>
+                    <TableCell colSpan={EVENT_COLUMNS} className="bg-muted/30 px-2 py-2">
+                      {ev.triggered.length > 0 ? (
+                        <div className="flex flex-col gap-0.5 pl-6">
+                          {ev.triggered.map((t) => (
+                            <TriggeredRow
+                              key={`${t.workflow}-${t.app ?? ""}`}
+                              outcome={t}
+                              onOpenRun={onOpenRun}
+                            />
+                          ))}
+                        </div>
+                      ) : (
+                        <span className="text-muted-foreground pl-6 font-mono text-[11px]">
+                          {ev.woke > 0
+                            ? `Woke ${ev.woke} waiting run(s); no new run.`
+                            : "Matched no workflow."}
+                        </span>
+                      )}
+                    </TableCell>
+                  </TableRow>
+                )}
+              </Fragment>
+            );
+          })}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}

package/src/components/EventsView.tsx

@@ -0,0 +1,24 @@
+import { useEvents } from "@durablex/react";
+import { EventsList } from "./EventsList";
+import { TriggerEventDialog } from "./TriggerEventDialog";
+
+export function EventsView({ onOpenRun }: { onOpenRun?: (runId: string) => void }) {
+  const { data: events, isLoading, isError, error } = useEvents();
+  return (
+    <div className="flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto p-4">
+      <div className="flex items-center justify-between gap-2">
+        <span className="text-muted-foreground font-mono text-[11px]">
+          {events?.length ?? 0} events · live
+        </span>
+        <TriggerEventDialog onOpenRun={onOpenRun} />
+      </div>
+      <EventsList
+        events={events}
+        isLoading={isLoading}
+        isError={isError}
+        error={error}
+        onOpenRun={onOpenRun}
+      />
+    </div>
+  );
+}

package/src/components/Facts.tsx

@@ -0,0 +1,14 @@
+export function Facts({ rows }: { rows: [string, string][] }) {
+  return (
+    <dl className="grid grid-cols-[max-content_1fr] gap-x-4 gap-y-1.5 text-xs">
+      {rows.map(([k, v]) => (
+        <div key={k} className="contents">
+          <dt className="text-muted-foreground">{k}</dt>
+          <dd className="min-w-0 truncate font-mono" title={v}>
+            {v}
+          </dd>
+        </div>
+      ))}
+    </dl>
+  );
+}

package/src/components/FlowControlBadge.tsx

@@ -0,0 +1,23 @@
+import { SlidersHorizontal } from "lucide-react";
+import { GlyphBadge } from "./GlyphBadge";
+
+// Marks a workflow that has flow-control adapters configured. compact is a bare
+// glyph for dense table cells; the full form adds a labelled chip.
+export function FlowControlBadge({
+  compact,
+  className,
+}: {
+  compact?: boolean;
+  className?: string;
+}) {
+  return (
+    <GlyphBadge
+      icon={SlidersHorizontal}
+      tone="running"
+      label="Flow control"
+      ariaLabel="Flow control configured"
+      compact={compact}
+      className={className}
+    />
+  );
+}

package/src/components/FlowControlSection.tsx

@@ -0,0 +1,82 @@
+import type { FlowControl, RunStats } from "@durablex/react";
+import { useFlowState } from "@durablex/react";
+import { SectionHeader } from "./SectionHeader";
+import { type FlowAdapter, type FlowRow, flowControlRows } from "../lib/flow-control";
+import { formatNextFire, formatRelative } from "../lib/format";
+
+interface Live {
+  stats?: RunStats;
+  pending?: number;
+  nextFireAt?: string;
+  buffered?: number;
+  oldestAt?: string;
+}
+
+// The live runtime number for the adapters that have one. concurrency reads from
+// run stats (in-flight + queued); debounce and batch read their buffer backlogs.
+// The other adapters are config-only and return null. The in-flight count is
+// workflow-wide; a keyed limit applies per scope, so it is shown as a plain count
+// (the configured limit sits in the value column) rather than a count/limit ratio.
+function liveLabel(adapter: FlowAdapter, l: Live): string | null {
+  switch (adapter) {
+    case "concurrency": {
+      const queued = l.stats?.queued ?? 0;
+      const base = `${l.stats?.running ?? 0} in-flight`;
+      return queued > 0 ? `${base} · ${queued} queued` : base;
+    }
+    case "debounce":
+      return `${l.pending ?? 0} pending${l.nextFireAt ? ` · next ${formatNextFire(l.nextFireAt)}` : ""}`;
+    case "batch":
+      return `${l.buffered ?? 0} buffered${l.oldestAt ? ` · oldest ${formatRelative(l.oldestAt)}` : ""}`;
+    default:
+      return null;
+  }
+}
+
+function FlowControlRow({ row, live }: { row: FlowRow; live: string | null }) {
+  return (
+    <div className="fc-row">
+      <span className="fc-label">{row.label}</span>
+      <span className="fc-value">{row.value}</span>
+      {row.scopeKey && <span className="fc-key">key {row.scopeKey}</span>}
+      {live && <span className="fc-live">{live}</span>}
+    </div>
+  );
+}
+
+export function FlowControlSection({
+  fc,
+  app,
+  workflow,
+  stats,
+}: {
+  fc: FlowControl;
+  app: string;
+  workflow: string;
+  stats?: RunStats;
+}) {
+  const flow = useFlowState({ app, workflow });
+  const debounce = flow.data?.debounce.find((d) => d.workflow === workflow);
+  const batch = flow.data?.batch.find((b) => b.workflow === workflow);
+
+  return (
+    <section className="flowctl">
+      <SectionHeader>Flow control</SectionHeader>
+      <div className="fc-rows">
+        {flowControlRows(fc).map((row) => (
+          <FlowControlRow
+            key={row.adapter}
+            row={row}
+            live={liveLabel(row.adapter, {
+              stats,
+              pending: debounce?.pending,
+              nextFireAt: debounce?.nextFireAt,
+              buffered: batch?.buffered,
+              oldestAt: batch?.oldestAt,
+            })}
+          />
+        ))}
+      </div>
+    </section>
+  );
+}

package/src/components/FlowSummary.tsx

@@ -0,0 +1,47 @@
+import type { RunStats } from "@durablex/react";
+import { useFlowState } from "@durablex/react";
+import { SectionHeader } from "./SectionHeader";
+import { StatTileGrid } from "./StatTileGrid";
+
+// Namespace-wide (or per-app) flow-control state: queue depth and in-flight from run
+// stats, plus the buffered totals across the debounce and batch adapters.
+export function FlowSummary({ app, stats }: { app?: string; stats?: RunStats }) {
+  const flow = useFlowState(app ? { app } : {});
+  const debouncePending = (flow.data?.debounce ?? []).reduce((n, d) => n + d.pending, 0);
+  const batchBuffered = (flow.data?.batch ?? []).reduce((n, b) => n + b.buffered, 0);
+
+  return (
+    <section className="flowsum">
+      <SectionHeader>Flow control</SectionHeader>
+      <StatTileGrid
+        tiles={[
+          {
+            label: "Queue depth",
+            value: stats?.queued ?? 0,
+            sub: "waiting to start",
+            token: "--st-queued-fg",
+          },
+          {
+            label: "In-flight",
+            value: stats?.running ?? 0,
+            sub: "executing now",
+            token: "--st-running-fg",
+            mark: true,
+          },
+          {
+            label: "Debounce pending",
+            value: debouncePending,
+            sub: "coalescing",
+            token: "--st-waiting-fg",
+          },
+          {
+            label: "Batch buffered",
+            value: batchBuffered,
+            sub: "awaiting flush",
+            token: "--st-waiting-fg",
+          },
+        ]}
+      />
+    </section>
+  );
+}

package/src/components/FormField.tsx

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+
+export function FormField({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <label className="flex flex-col gap-1">
+      <span className="text-muted-foreground text-[11px] tracking-wide uppercase">{label}</span>
+      {children}
+    </label>
+  );
+}

package/src/components/GlyphBadge.tsx

@@ -0,0 +1,41 @@
+import type { LucideIcon } from "lucide-react";
+import { cn } from "../lib/utils";
+
+// tone maps to the --st-<tone>-bg/-fg CSS token pair.
+export function GlyphBadge({
+  icon: Icon,
+  tone,
+  label,
+  ariaLabel,
+  compact,
+  className,
+}: {
+  icon: LucideIcon;
+  tone: string;
+  label: string;
+  ariaLabel?: string;
+  compact?: boolean;
+  className?: string;
+}) {
+  if (compact) {
+    return (
+      <Icon
+        className={cn("size-[13px] shrink-0", className)}
+        style={{ color: `var(--st-${tone}-fg)` }}
+        aria-label={ariaLabel ?? label}
+      />
+    );
+  }
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center gap-1 border border-transparent font-medium leading-none whitespace-nowrap h-[17px] px-1.5 text-[10px]",
+        className,
+      )}
+      style={{ backgroundColor: `var(--st-${tone}-bg)`, color: `var(--st-${tone}-fg)` }}
+    >
+      <Icon className="size-[11px] shrink-0" />
+      {label}
+    </span>
+  );
+}

package/src/components/JsonBlock.tsx

@@ -0,0 +1,48 @@
+import { useCopyToClipboard } from "../hooks/use-copy";
+import { highlightedJsonSpans } from "../lib/json-highlight";
+
+export function JsonBlock({ value }: { value: unknown }) {
+  if (value === null || value === undefined) {
+    return <p className="text-muted-foreground px-4 py-2.5 font-mono text-xs italic">null</p>;
+  }
+  const text = JSON.stringify(value, null, 2);
+  return (
+    <div
+      className="relative"
+      style={{ backgroundColor: "color-mix(in oklch, var(--foreground) 5%, var(--card))" }}
+    >
+      <CopyButton text={text} />
+      <pre className="text-foreground max-h-72 overflow-auto px-4 py-2.5 font-mono text-[11.5px] leading-[1.7] tabular-nums">
+        {highlightedJsonSpans(text).map((tok) => (
+          <span
+            key={tok.key}
+            style={{
+              color: tok.color,
+              fontWeight: tok.bold ? 500 : undefined,
+              fontStyle: tok.italic ? "italic" : undefined,
+            }}
+          >
+            {tok.text}
+          </span>
+        ))}
+      </pre>
+    </div>
+  );
+}
+
+function CopyButton({ text }: { text: string }) {
+  const { copied, copy } = useCopyToClipboard();
+  return (
+    <button
+      type="button"
+      onClick={() => copy(text)}
+      className="text-muted-foreground hover:text-foreground hover:bg-accent absolute top-[8px] right-[8px] border px-[7px] py-[2px] font-mono text-[9.5px] tracking-[0.05em] uppercase"
+      style={{
+        backgroundColor: "color-mix(in oklch, var(--card) 78%, transparent)",
+        backdropFilter: "blur(3px)",
+      }}
+    >
+      {copied ? "copied" : "copy"}
+    </button>
+  );
+}

package/src/components/JsonEditor.tsx

@@ -0,0 +1,91 @@
+import { useRef, type UIEvent } from "react";
+import { highlightedJsonSpans } from "../lib/json-highlight";
+
+// A textarea overlaid on a syntax-highlighted <pre>: the textarea's own text is
+// transparent (only its caret/selection show) so the highlighted layer reads
+// through. Both layers share identical font metrics and padding so the glyphs line
+// up; the textarea drives scrolling and the pre is scroll-synced behind it.
+const SURFACE = "whitespace-pre-wrap break-words px-2.5 py-2 font-mono text-xs leading-[1.6]";
+
+export function JsonEditor({
+  value,
+  onChange,
+  invalid = false,
+  minHeight = 150,
+  ariaLabel = "JSON payload",
+}: {
+  value: string;
+  onChange: (next: string) => void;
+  invalid?: boolean;
+  minHeight?: number;
+  ariaLabel?: string;
+}) {
+  const preRef = useRef<HTMLPreElement>(null);
+
+  const syncScroll = (e: UIEvent<HTMLTextAreaElement>) => {
+    const pre = preRef.current;
+    if (!pre) return;
+    pre.scrollTop = e.currentTarget.scrollTop;
+    pre.scrollLeft = e.currentTarget.scrollLeft;
+  };
+
+  const format = () => {
+    try {
+      onChange(JSON.stringify(JSON.parse(value), null, 2));
+    } catch {
+      // Invalid JSON has nothing to format; the invalid border already signals it.
+    }
+  };
+
+  return (
+    <div
+      data-invalid={invalid}
+      className="relative overflow-hidden rounded-lg border border-input transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 data-[invalid=true]:border-destructive data-[invalid=true]:ring-3 data-[invalid=true]:ring-destructive/20"
+      style={{ backgroundColor: "color-mix(in oklch, var(--foreground) 4%, var(--card))" }}
+    >
+      <button
+        type="button"
+        onClick={format}
+        className="text-muted-foreground hover:text-foreground hover:bg-accent absolute top-[6px] right-[6px] z-10 border px-[7px] py-[2px] font-mono text-[9.5px] tracking-[0.05em] uppercase"
+        style={{
+          backgroundColor: "color-mix(in oklch, var(--card) 78%, transparent)",
+          backdropFilter: "blur(3px)",
+        }}
+      >
+        format
+      </button>
+      <pre
+        ref={preRef}
+        aria-hidden
+        className={`text-foreground pointer-events-none m-0 overflow-hidden ${SURFACE}`}
+        style={{ minHeight, maxHeight: 320 }}
+      >
+        {highlightedJsonSpans(value).map((tok) => (
+          <span
+            key={tok.key}
+            style={{
+              color: tok.color,
+              fontWeight: tok.bold ? 500 : undefined,
+              fontStyle: tok.italic ? "italic" : undefined,
+            }}
+          >
+            {tok.text}
+          </span>
+        ))}
+        {"\n"}
+      </pre>
+      <textarea
+        aria-label={ariaLabel}
+        aria-invalid={invalid}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        onScroll={syncScroll}
+        spellCheck={false}
+        autoCapitalize="off"
+        autoCorrect="off"
+        className={`absolute inset-0 resize-none overflow-auto bg-transparent text-transparent outline-none ${SURFACE}`}
+        style={{ caretColor: "var(--foreground)" }}
+      />
+    </div>
+  );
+}

package/src/components/LogList.tsx

@@ -0,0 +1,45 @@
+import type { LogFrame } from "@durablex/react";
+import { formatTime } from "../lib/format";
+
+const LEVEL_FG: Record<LogFrame["level"], string> = {
+  debug: "var(--st-skipped-fg)",
+  info: "var(--st-running-fg)",
+  warn: "var(--st-waiting-fg)",
+  error: "var(--st-failed-fg)",
+};
+
+export function LogList({ logs }: { logs: LogFrame[] }) {
+  if (logs.length === 0) {
+    return <p className="px-4 py-2.5 font-mono text-xs text-muted-foreground italic">No logs.</p>;
+  }
+  return (
+    <div
+      className="flex max-h-72 flex-col gap-1.5 overflow-auto px-4 py-2.5 text-[12px] leading-[1.6]"
+      style={{ backgroundColor: "color-mix(in oklch, var(--foreground) 5%, var(--card))" }}
+    >
+      {logs.map((log) => {
+        const fields = log.fields && Object.keys(log.fields).length > 0 ? log.fields : null;
+        return (
+          <div key={log.seq} className="flex w-max items-baseline gap-2 whitespace-nowrap">
+            <span className="tnum text-[11px] text-muted-foreground">{formatTime(log.ts)}</span>
+            <span
+              className="font-medium uppercase text-[10px]"
+              style={{ color: LEVEL_FG[log.level] }}
+            >
+              {log.level}
+            </span>
+            <span>{log.message}</span>
+            {fields && (
+              <>
+                <span className="text-muted-foreground" aria-hidden>
+                  ·
+                </span>
+                <code className="text-[11px] text-muted-foreground">{JSON.stringify(fields)}</code>
+              </>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/Meta.tsx

@@ -0,0 +1,31 @@
+export function Meta({
+  label,
+  value,
+  error,
+  onClick,
+  title,
+}: {
+  label: string;
+  value: string;
+  error?: boolean;
+  onClick?: () => void;
+  title?: string;
+}) {
+  return (
+    <div className="meta">
+      <span className="meta-k">{label}</span>
+      {onClick ? (
+        <button
+          type="button"
+          className="meta-v cursor-pointer border-0 bg-transparent p-0 text-left underline underline-offset-2"
+          title={title}
+          onClick={onClick}
+        >
+          {value}
+        </button>
+      ) : (
+        <span className={"meta-v" + (error ? " err" : "")}>{value}</span>
+      )}
+    </div>
+  );
+}

package/src/components/OverviewView.tsx

@@ -0,0 +1,39 @@
+import { useState } from "react";
+import { useRunStats, useRunTimeSeries } from "@durablex/react";
+import { StatsTiles } from "./StatsTiles";
+import { AppFilter } from "./filters/AppFilter";
+import { TimeRangeFilter } from "./filters/TimeRangeFilter";
+import { RunCharts } from "./charts/RunCharts";
+import { FlowSummary } from "./FlowSummary";
+import { ALL_FILTER } from "../lib/run-filters";
+import { DEFAULT_TIME_RANGE, seriesBucketSeconds, timeLabel, windowSince } from "../lib/time-range";
+
+export function OverviewView() {
+  const [time, setTime] = useState(DEFAULT_TIME_RANGE);
+  const [app, setApp] = useState<string>(ALL_FILTER);
+
+  const since = windowSince(time);
+  const appParam = app === ALL_FILTER ? undefined : app;
+  const bucket = seriesBucketSeconds(time);
+
+  const stats = useRunStats({ app: appParam, since });
+  // Queue depth / in-flight are point-in-time facts, so the flow summary reads an
+  // unwindowed count - a run started before the selected range is still in flight.
+  const liveStats = useRunStats({ app: appParam });
+  const { data: series, isLoading } = useRunTimeSeries({ app: appParam, since, bucket });
+
+  return (
+    <div className="flex h-full min-h-0 flex-col">
+      <StatsTiles stats={stats.data} rangeLabel={timeLabel(time)} />
+      <div className="filterbar">
+        <TimeRangeFilter time={time} onTime={setTime} />
+        <AppFilter app={app} onApp={setApp} />
+      </div>
+
+      <div className="min-h-0 flex-1 overflow-auto">
+        <FlowSummary app={appParam} stats={liveStats.data} />
+        <RunCharts series={series} loading={isLoading} />
+      </div>
+    </div>
+  );
+}