station-kit 1.0.8 → 1.0.9

package/src/app/broadcasts/dyn/[name]/dynamic-detail.tsx

@@ -0,0 +1,243 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import {
+  useApi,
+  type DynamicBroadcastSpec,
+  type DynamicValidationResult,
+  type SignalMeta,
+} from "../../../hooks/use-api";
+import { useBreadcrumb } from "../../../hooks/use-breadcrumb";
+import { BroadcastBuilder } from "../../components/broadcast-builder";
+import { SchemaForm } from "../../../components/schema-form";
+
+export function DynamicBroadcastDetail({ name }: { name: string }) {
+  const api = useApi();
+  const router = useRouter();
+  const [latest, setLatest] = useState<DynamicBroadcastSpec | null>(null);
+  const [versions, setVersions] = useState<DynamicBroadcastSpec[]>([]);
+  const [json, setJson] = useState("");
+  const [validation, setValidation] = useState<DynamicValidationResult | null>(null);
+  const [signals, setSignals] = useState<SignalMeta[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [triggerOpen, setTriggerOpen] = useState(false);
+  const [triggerInput, setTriggerInput] = useState("{}");
+  const [lastRunId, setLastRunId] = useState<string | null>(null);
+
+  useBreadcrumb(
+    [
+      { label: "Broadcasts", href: "/broadcasts" },
+      { label: name },
+    ],
+    "broadcasts",
+  );
+
+  useEffect(() => {
+    Promise.all([
+      api.getBroadcastDefinition(name),
+      api.getBroadcastDefinitionVersions(name).catch(() => ({ data: [] as DynamicBroadcastSpec[] })),
+      api.getSignals().catch(() => ({ data: [] as SignalMeta[] })),
+    ])
+      .then(([latestRes, versionsRes, signalsRes]) => {
+        setLatest(latestRes.data);
+        setJson(JSON.stringify(stripMeta(latestRes.data), null, 2));
+        setVersions(versionsRes.data);
+        setSignals(signalsRes.data);
+      })
+      .catch((err) => setError(err instanceof Error ? err.message : String(err)))
+      .finally(() => setLoading(false));
+  }, [name]);
+
+  async function handleValidate() {
+    setError(null);
+    let parsed: unknown;
+    try {
+      parsed = JSON.parse(json);
+    } catch (err) {
+      setError(`JSON parse error: ${err instanceof Error ? err.message : String(err)}`);
+      return;
+    }
+    try {
+      const res = await api.validateBroadcastDefinition(parsed as never);
+      setValidation(res.data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    }
+  }
+
+  async function handleSave() {
+    setError(null);
+    setBusy(true);
+    let parsed: unknown;
+    try {
+      parsed = JSON.parse(json);
+    } catch (err) {
+      setError(`JSON parse error: ${err instanceof Error ? err.message : String(err)}`);
+      setBusy(false);
+      return;
+    }
+    try {
+      const res = await api.saveBroadcastDefinition(parsed as never);
+      setLatest(res.data);
+      const versionsRes = await api.getBroadcastDefinitionVersions(name);
+      setVersions(versionsRes.data);
+      setValidation({ ok: true, errors: [] });
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function handleDelete() {
+    if (!confirm(`Delete dynamic broadcast "${name}"? Run history is retained.`)) return;
+    try {
+      await api.deleteBroadcastDefinition(name);
+      router.push("/broadcasts");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    }
+  }
+
+  async function handleTrigger() {
+    setError(null);
+    let parsed: unknown;
+    try {
+      parsed = JSON.parse(triggerInput);
+    } catch (err) {
+      setError(`JSON parse error: ${err instanceof Error ? err.message : String(err)}`);
+      return;
+    }
+    try {
+      const res = await api.triggerDynamicBroadcast(name, parsed);
+      setLastRunId(res.data.id);
+      setTriggerOpen(false);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    }
+  }
+
+  if (loading) {
+    return (
+      <div>
+        <h1 className="page-title">{name}</h1>
+        <div className="loading-bar"><div className="loading-bar-fill" /></div>
+      </div>
+    );
+  }
+
+  if (!latest) {
+    return (
+      <div>
+        <h1 className="page-title">{name}</h1>
+        <div className="empty-state">
+          <p className="empty-state-text">{error ?? "Not found."}</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "0.5rem" }}>
+        <h1 className="page-title" style={{ margin: 0 }}>
+          <span className="mono">{name}</span>
+          <span style={{ marginLeft: "0.5rem", color: "var(--muted)", fontSize: "0.875rem" }}>
+            v{latest.version}
+          </span>
+        </h1>
+        <div style={{ display: "flex", gap: "0.5rem" }}>
+          <button className="btn" onClick={() => setTriggerOpen(!triggerOpen)}>
+            {triggerOpen ? "Cancel" : "Trigger"}
+          </button>
+          <button className="btn btn--danger" onClick={handleDelete}>Delete</button>
+        </div>
+      </div>
+
+      {lastRunId && (
+        <div style={{
+          marginBottom: "0.75rem",
+          padding: "0.5rem 0.75rem",
+          background: "var(--success-bg, #efe)",
+          color: "var(--success, #060)",
+          borderRadius: "4px",
+          fontSize: "0.8125rem",
+        }}>
+          Triggered run <span className="mono">{lastRunId}</span>
+        </div>
+      )}
+
+      {triggerOpen && (
+        <div style={{ marginBottom: "1rem", padding: "0.75rem", border: "1px solid var(--border)", borderRadius: "4px" }}>
+          <div className="mono" style={{ fontSize: "0.75rem", color: "var(--muted)", marginBottom: "0.5rem" }}>
+            Trigger input
+          </div>
+          <SchemaForm schema={null} value={triggerInput} onChange={setTriggerInput} />
+          <div style={{ marginTop: "0.5rem" }}>
+            <button className="btn btn--primary" onClick={handleTrigger}>Dispatch</button>
+          </div>
+        </div>
+      )}
+
+      <BroadcastBuilder
+        json={json}
+        onChange={setJson}
+        validation={validation}
+        onValidationStale={() => setValidation(null)}
+        signals={signals}
+        onValidate={handleValidate}
+        onSave={handleSave}
+        saveLabel={busy ? "Saving..." : `Save (creates v${latest.version + 1})`}
+        saving={busy}
+        error={error}
+      />
+
+      {versions.length > 0 && (
+        <section style={{ marginTop: "2rem" }}>
+          <h2 style={{ fontSize: "0.875rem", textTransform: "uppercase", letterSpacing: "0.05em", color: "var(--muted)", marginBottom: "0.5rem" }}>
+            Version history
+          </h2>
+          <table className="station-table">
+            <thead>
+              <tr>
+                <th>Version</th>
+                <th>Updated</th>
+                <th>Author</th>
+                <th>Status</th>
+              </tr>
+            </thead>
+            <tbody>
+              {versions.map((v) => (
+                <tr
+                  key={v.version}
+                  className="clickable-row"
+                  onClick={() => router.push(`/broadcasts/dyn/${encodeURIComponent(name)}/v/${v.version}`)}
+                >
+                  <td className="mono">v{v.version}</td>
+                  <td className="mono" style={{ fontSize: "0.75rem", color: "var(--muted)" }}>
+                    {new Date(v.updatedAt).toLocaleString()}
+                  </td>
+                  <td className="mono" style={{ fontSize: "0.75rem", color: "var(--muted)" }}>
+                    {v.createdBy ?? "—"}
+                  </td>
+                  <td className="mono" style={{ fontSize: "0.75rem" }}>
+                    {v.deletedAt ? <span style={{ color: "var(--error, #b00)" }}>deleted</span> : v.version === latest.version ? "current" : "archived"}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </section>
+      )}
+    </div>
+  );
+}
+
+function stripMeta(spec: DynamicBroadcastSpec): Record<string, unknown> {
+  // The user only edits the durable shape; version/createdAt/etc. are server-managed.
+  const { version: _v, createdAt: _c, updatedAt: _u, deletedAt: _d, createdBy: _b, ...rest } = spec;
+  return rest;
+}

package/src/app/broadcasts/dyn/[name]/page.tsx

@@ -0,0 +1,10 @@
+import { DynamicBroadcastDetail } from "./dynamic-detail";
+
+export default async function DynamicBroadcastPage({
+  params,
+}: {
+  params: Promise<{ name: string }>;
+}) {
+  const { name } = await params;
+  return <DynamicBroadcastDetail name={decodeURIComponent(name)} />;
+}

package/src/app/broadcasts/dyn/[name]/v/[n]/page.tsx

@@ -0,0 +1,10 @@
+import { VersionView } from "./version-view";
+
+export default async function VersionPage({
+  params,
+}: {
+  params: Promise<{ name: string; n: string }>;
+}) {
+  const { name, n } = await params;
+  return <VersionView name={decodeURIComponent(name)} version={Number(n)} />;
+}

package/src/app/broadcasts/dyn/[name]/v/[n]/version-view.tsx

@@ -0,0 +1,285 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import Link from "next/link";
+import { useApi, type DynamicBroadcastSpec } from "../../../../../hooks/use-api";
+import { useBreadcrumb } from "../../../../../hooks/use-breadcrumb";
+import { ApiPanel } from "../../../../../components/api-panel";
+
+export function VersionView({ name, version }: { name: string; version: number }) {
+  const api = useApi();
+  const [versions, setVersions] = useState<DynamicBroadcastSpec[]>([]);
+  const [spec, setSpec] = useState<DynamicBroadcastSpec | null>(null);
+  const [compareTo, setCompareTo] = useState<number | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useBreadcrumb(
+    [
+      { label: "Broadcasts", href: "/broadcasts" },
+      { label: name, href: `/broadcasts/dyn/${encodeURIComponent(name)}` },
+      { label: `v${version}` },
+    ],
+    "broadcasts",
+  );
+
+  useEffect(() => {
+    Promise.all([
+      api.getBroadcastDefinitionVersions(name),
+      api.getBroadcastDefinition(name).then((r) => r.data, () => null),
+    ])
+      .then(([versionsRes]) => {
+        setVersions(versionsRes.data);
+        const found = versionsRes.data.find((v) => v.version === version);
+        setSpec(found ?? null);
+        // Default compare target = the version immediately before this one
+        const prev = versionsRes.data.find((v) => v.version === version - 1);
+        setCompareTo(prev?.version ?? null);
+      })
+      .catch((err) => setError(err instanceof Error ? err.message : String(err)))
+      .finally(() => setLoading(false));
+  }, [name, version]);
+
+  const compareSpec = useMemo(
+    () => versions.find((v) => v.version === compareTo) ?? null,
+    [versions, compareTo],
+  );
+
+  const diff = useMemo(() => {
+    if (!spec || !compareSpec) return null;
+    return computeDiff(stripVolatile(compareSpec), stripVolatile(spec));
+  }, [spec, compareSpec]);
+
+  if (loading) {
+    return (
+      <div>
+        <h1 className="page-title">{name} v{version}</h1>
+        <div className="loading-bar"><div className="loading-bar-fill" /></div>
+      </div>
+    );
+  }
+
+  if (!spec) {
+    return (
+      <div>
+        <h1 className="page-title">{name} v{version}</h1>
+        <div className="empty-state"><p className="empty-state-text">{error ?? "Version not found."}</p></div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "1rem" }}>
+        <h1 className="page-title" style={{ margin: 0 }}>
+          <span className="mono">{name}</span>
+          <span style={{ marginLeft: "0.5rem", color: "var(--muted)", fontSize: "0.875rem" }}>v{version}</span>
+          {spec.deletedAt && (
+            <span style={{
+              marginLeft: "0.75rem",
+              fontSize: "0.6875rem",
+              padding: "0.125rem 0.375rem",
+              borderRadius: "3px",
+              background: "var(--error-bg, #fee)",
+              color: "var(--error, #b00)",
+            }}>deleted</span>
+          )}
+        </h1>
+        <Link href={`/broadcasts/dyn/${encodeURIComponent(name)}`} className="btn">Back to current</Link>
+      </div>
+
+      <div style={{
+        display: "grid",
+        gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr)",
+        gap: "1rem",
+        marginBottom: "1rem",
+      }}>
+        <div>
+          <div className="mono" style={labelStyle}>Compare to</div>
+          <select
+            className="mono"
+            value={compareTo ?? ""}
+            onChange={(e) => setCompareTo(e.target.value ? Number(e.target.value) : null)}
+            style={{
+              width: "100%",
+              padding: "0.5rem 0.625rem",
+              border: "1px solid var(--border)",
+              borderRadius: "4px",
+              background: "var(--surface)",
+              color: "var(--text)",
+              fontSize: "0.875rem",
+            }}
+          >
+            <option value="">— No comparison —</option>
+            {versions
+              .filter((v) => v.version !== version)
+              .map((v) => (
+                <option key={v.version} value={v.version}>
+                  v{v.version}
+                  {v.deletedAt ? " (deleted)" : ""}
+                  {" — "}
+                  {new Date(v.updatedAt).toLocaleString()}
+                </option>
+              ))}
+          </select>
+        </div>
+        <div className="mono" style={{ fontSize: "0.75rem", color: "var(--muted)", alignSelf: "end" }}>
+          {compareSpec
+            ? `Diffing v${compareSpec.version} → v${spec.version}`
+            : "Showing the spec as-saved (no diff)."}
+        </div>
+      </div>
+
+      <div style={{
+        display: "grid",
+        gridTemplateColumns: compareSpec ? "minmax(0, 1fr) minmax(0, 1fr)" : "1fr",
+        gap: "1rem",
+      }}>
+        {compareSpec && (
+          <DiffPane title={`v${compareSpec.version}`} spec={compareSpec} highlight={diff?.removedLines ?? new Set()} side="left" />
+        )}
+        <DiffPane title={`v${spec.version}`} spec={spec} highlight={diff?.addedLines ?? new Set()} side="right" />
+      </div>
+
+      <ApiPanel
+        title="Inspect this version"
+        snippets={[
+          {
+            label: "Get this version",
+            method: "GET",
+            path: `/api/v1/broadcast-definitions/${encodeURIComponent(name)}/versions/${version}`,
+          },
+          {
+            label: "List all versions",
+            method: "GET",
+            path: `/api/v1/broadcast-definitions/${encodeURIComponent(name)}/versions`,
+          },
+        ]}
+      />
+    </div>
+  );
+}
+
+function DiffPane({
+  title,
+  spec,
+  highlight,
+  side,
+}: {
+  title: string;
+  spec: DynamicBroadcastSpec;
+  highlight: Set<number>;
+  side: "left" | "right";
+}) {
+  const lines = JSON.stringify(stripVolatile(spec), null, 2).split("\n");
+  return (
+    <div>
+      <div className="mono" style={labelStyle}>{title}</div>
+      <pre className="mono" style={{
+        margin: 0,
+        padding: "0.5rem",
+        background: "var(--surface)",
+        border: "1px solid var(--border)",
+        borderRadius: "4px",
+        fontSize: "0.75rem",
+        lineHeight: 1.5,
+        overflowX: "auto",
+        maxHeight: "640px",
+        overflowY: "auto",
+      }}>
+        {lines.map((line, i) => (
+          <div
+            key={i}
+            style={{
+              padding: "0 0.25rem",
+              background: highlight.has(i)
+                ? side === "left"
+                  ? "rgba(196, 131, 74, 0.18)"
+                  : "rgba(107, 153, 98, 0.18)"
+                : "transparent",
+              whiteSpace: "pre",
+            }}
+          >
+            {line || " "}
+          </div>
+        ))}
+      </pre>
+    </div>
+  );
+}
+
+interface DiffResult {
+  addedLines: Set<number>;
+  removedLines: Set<number>;
+}
+
+/**
+ * Line-level naive diff: marks lines unique to each side. Works well for the
+ * small JSON specs typical of broadcast definitions; for larger specs a real
+ * Myers diff would be better but is overkill here.
+ */
+function computeDiff(left: unknown, right: unknown): DiffResult {
+  const leftLines = JSON.stringify(left, null, 2).split("\n");
+  const rightLines = JSON.stringify(right, null, 2).split("\n");
+  const leftSet = new Map<string, number[]>();
+  for (let i = 0; i < leftLines.length; i++) {
+    const list = leftSet.get(leftLines[i]);
+    if (list) list.push(i);
+    else leftSet.set(leftLines[i], [i]);
+  }
+  const rightSet = new Map<string, number[]>();
+  for (let i = 0; i < rightLines.length; i++) {
+    const list = rightSet.get(rightLines[i]);
+    if (list) list.push(i);
+    else rightSet.set(rightLines[i], [i]);
+  }
+  const addedLines = new Set<number>();
+  const removedLines = new Set<number>();
+  for (let i = 0; i < rightLines.length; i++) {
+    const counterpart = leftSet.get(rightLines[i]);
+    if (!counterpart || counterpart.length === 0) {
+      addedLines.add(i);
+    } else {
+      counterpart.shift();
+    }
+  }
+  for (let i = 0; i < leftLines.length; i++) {
+    const counterpart = rightSet.get(leftLines[i]);
+    if (!counterpart || counterpart.length === 0) {
+      removedLines.add(i);
+    } else {
+      counterpart.shift();
+    }
+  }
+  return { addedLines, removedLines };
+}
+
+function stripVolatile(spec: DynamicBroadcastSpec): Omit<DynamicBroadcastSpec, "createdAt" | "updatedAt" | "deletedAt" | "createdBy" | "version"> & { version: number } {
+  const { createdAt: _c, updatedAt: _u, deletedAt: _d, createdBy: _b, ...rest } = spec;
+  // Deep-sort keys so the diff doesn't fire on insertion-order changes
+  // (e.g. spread-then-patch reorders `name` after spread).
+  return sortKeysDeep(rest) as ReturnType<typeof stripVolatile>;
+}
+
+function sortKeysDeep<T>(value: T): T {
+  if (Array.isArray(value)) {
+    return value.map((v) => sortKeysDeep(v)) as unknown as T;
+  }
+  if (value && typeof value === "object") {
+    const sorted: Record<string, unknown> = {};
+    for (const k of Object.keys(value as Record<string, unknown>).sort()) {
+      sorted[k] = sortKeysDeep((value as Record<string, unknown>)[k]);
+    }
+    return sorted as T;
+  }
+  return value;
+}
+
+const labelStyle: React.CSSProperties = {
+  display: "block",
+  fontSize: "0.75rem",
+  color: "var(--muted)",
+  textTransform: "uppercase",
+  letterSpacing: "0.05em",
+  marginBottom: "0.375rem",
+};

package/src/app/broadcasts/new/page.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { useApi, type DynamicValidationResult, type SignalMeta } from "../../hooks/use-api";
+import { useBreadcrumb } from "../../hooks/use-breadcrumb";
+import { BroadcastBuilder } from "../components/broadcast-builder";
+
+const STARTER_SPEC = JSON.stringify(
+  {
+    name: "myBroadcast",
+    failurePolicy: "fail-fast",
+    timeout: 300000,
+    nodes: [
+      {
+        name: "first",
+        signalName: "<existing-signal-name>",
+        dependsOn: [],
+      },
+    ],
+  },
+  null,
+  2,
+);
+
+export default function NewDynamicBroadcastPage() {
+  const api = useApi();
+  const router = useRouter();
+  const [json, setJson] = useState(STARTER_SPEC);
+  const [validation, setValidation] = useState<DynamicValidationResult | null>(null);
+  const [signals, setSignals] = useState<SignalMeta[]>([]);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useBreadcrumb(
+    [
+      { label: "Broadcasts", href: "/broadcasts" },
+      { label: "New dynamic" },
+    ],
+    "broadcasts",
+  );
+
+  useEffect(() => {
+    api.getSignals().then((res) => setSignals(res.data)).catch(() => {});
+  }, []);
+
+  async function handleValidate() {
+    setError(null);
+    let parsed: unknown;
+    try {
+      parsed = JSON.parse(json);
+    } catch (err) {
+      setError(`JSON parse error: ${err instanceof Error ? err.message : String(err)}`);
+      return;
+    }
+    try {
+      const res = await api.validateBroadcastDefinition(parsed as never);
+      setValidation(res.data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    }
+  }
+
+  async function handleSave() {
+    setError(null);
+    setBusy(true);
+    let parsed: unknown;
+    try {
+      parsed = JSON.parse(json);
+    } catch (err) {
+      setError(`JSON parse error: ${err instanceof Error ? err.message : String(err)}`);
+      setBusy(false);
+      return;
+    }
+    try {
+      const res = await api.saveBroadcastDefinition(parsed as never);
+      router.push(`/broadcasts/dyn/${encodeURIComponent(res.data.name)}`);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div>
+      <h1 className="page-title">New dynamic broadcast</h1>
+      <BroadcastBuilder
+        json={json}
+        onChange={setJson}
+        validation={validation}
+        onValidationStale={() => setValidation(null)}
+        signals={signals}
+        onValidate={handleValidate}
+        onSave={handleSave}
+        saveLabel={busy ? "Saving..." : "Save (creates v1)"}
+        saving={busy}
+        error={error}
+      />
+    </div>
+  );
+}