station-kit 1.0.0

package/src/app/runs/[id]/page.tsx

@@ -0,0 +1,277 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { useParams } from "next/navigation";
+import Link from "next/link";
+import { useApi } from "../../hooks/use-api";
+import { useStation } from "../../hooks/use-station";
+import { useBreadcrumb } from "../../hooks/use-breadcrumb";
+import { StatusBadge } from "../../components/status-badge";
+import { StepTimeline } from "../../components/step-timeline";
+import { JsonViewer } from "../../components/json-viewer";
+
+interface LogEntry {
+  runId: string;
+  signalName: string;
+  level: string;
+  message: string;
+  timestamp: string;
+}
+
+function formatMs(ms: number): string {
+  if (ms < 1000) return `${ms}ms`;
+  if (ms < 60_000) return `${(ms / 1000).toFixed(1)}s`;
+  if (ms < 3_600_000) return `${(ms / 60_000).toFixed(1)}m`;
+  return `${(ms / 3_600_000).toFixed(1)}h`;
+}
+
+function computeDuration(startedAt?: string, completedAt?: string): string {
+  if (!startedAt) return "\u2014";
+  const start = new Date(startedAt).getTime();
+  const end = completedAt ? new Date(completedAt).getTime() : Date.now();
+  const ms = end - start;
+  return formatMs(ms);
+}
+
+export default function RunDetailPage() {
+  const params = useParams();
+  const id = params.id as string;
+  const api = useApi();
+  const { events } = useStation();
+  const [run, setRun] = useState<any>(null);
+  const [steps, setSteps] = useState<any[]>([]);
+  const [logs, setLogs] = useState<LogEntry[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [cancelling, setCancelling] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const logEndRef = useRef<HTMLDivElement>(null);
+
+  useBreadcrumb(
+    run
+      ? [
+          { label: "Signals", href: "/signals" },
+          { label: run.signalName, href: `/signals/${encodeURIComponent(run.signalName)}` },
+          { label: `Run ${id.slice(0, 8)}` },
+        ]
+      : [{ label: "Signals", href: "/signals" }, { label: `Run ${id.slice(0, 8)}` }],
+    "signals",
+  );
+
+  useEffect(() => {
+    async function load() {
+      try {
+        const [runRes, stepsRes, logsRes] = await Promise.all([
+          api.getRun(id),
+          api.getRunSteps(id),
+          api.getRunLogs(id),
+        ]);
+        setRun(runRes.data);
+        setSteps(stepsRes.data);
+        setLogs(logsRes.data);
+      } catch (err: unknown) {
+        if (err instanceof Error) {
+          console.error("Failed to load run:", err.message);
+        }
+      }
+      setLoading(false);
+    }
+    load();
+  }, [id]);
+
+  useEffect(() => {
+    if (events.length === 0) return;
+    const latest = events[0];
+    const eventRunId = (latest.data.run as Record<string, unknown>)?.id ?? (latest.data as Record<string, unknown>)?.runId;
+    if (eventRunId === id) {
+      if (latest.type === "log:output") {
+        setLogs((prev) => [...prev, {
+          runId: latest.data.runId as string,
+          signalName: latest.data.signalName as string,
+          level: latest.data.level as string,
+          message: latest.data.message as string,
+          timestamp: (latest.data.timestamp as string) ?? latest.timestamp,
+        }]);
+      } else {
+        api.getRun(id).then((r) => setRun(r.data)).catch((e) => console.error("Failed to refresh run:", e));
+        api.getRunSteps(id).then((r) => setSteps(r.data)).catch((e) => console.error("Failed to refresh steps:", e));
+      }
+    }
+  }, [events.length, id]);
+
+  useEffect(() => {
+    logEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [logs.length]);
+
+  async function handleCancel() {
+    setCancelling(true);
+    try {
+      await api.cancelRun(id);
+      const res = await api.getRun(id);
+      setRun(res.data);
+    } catch (err: unknown) {
+      if (err instanceof Error) {
+        console.error("Cancel failed:", err.message);
+      }
+    }
+    setCancelling(false);
+  }
+
+  function handleCopyId() {
+    navigator.clipboard.writeText(run.id).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    }).catch(() => {});
+  }
+
+  if (loading) {
+    return (
+      <div>
+        <h1 className="page-title">Run</h1>
+        <div className="loading-bar"><div className="loading-bar-fill" /></div>
+      </div>
+    );
+  }
+
+  if (!run) {
+    return (
+      <div>
+        <h1 className="page-title">Run</h1>
+        <div className="empty-state">
+          <p className="empty-state-text">Run not found.</p>
+        </div>
+      </div>
+    );
+  }
+
+  const canCancel = run.status === "pending" || run.status === "running";
+
+  return (
+    <div>
+      <div className="page-header">
+        <div style={{ display: "flex", alignItems: "center", gap: "0.75rem" }}>
+          <StatusBadge status={run.status} />
+          <Link href={`/signals/${run.signalName}`} className="page-title" style={{ marginBottom: 0, textDecoration: "none" }}>
+            {run.signalName}
+          </Link>
+        </div>
+        <div className="page-header-actions">
+          {canCancel && (
+            <button className="btn btn--danger" onClick={handleCancel} disabled={cancelling}>
+              {cancelling ? "Cancelling..." : "Cancel"}
+            </button>
+          )}
+        </div>
+      </div>
+
+      <div className="detail-section">
+        <div className="detail-section-label">Metadata</div>
+        <div className="detail-grid">
+          <span className="detail-label">ID</span>
+          <span className="detail-value mono" style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
+            {run.id}
+            <button
+              onClick={handleCopyId}
+              className="btn btn--sm"
+              style={{
+                fontSize: "0.625rem",
+                padding: "0.125rem 0.375rem",
+                lineHeight: 1.2,
+              }}
+            >
+              {copied ? "copied" : "copy"}
+            </button>
+          </span>
+
+          <span className="detail-label">Signal</span>
+          <span className="detail-value">
+            <Link href={`/signals/${run.signalName}`} className="mono meta-value--link">
+              {run.signalName}
+            </Link>
+          </span>
+
+          <span className="detail-label">Kind</span>
+          <span className="detail-value">{run.kind}</span>
+
+          <span className="detail-label">Attempts</span>
+          <span className="detail-value">{run.attempts} of {run.maxAttempts}</span>
+
+          <span className="detail-label">Timeout</span>
+          <span className="detail-value mono">{run.timeout ? formatMs(run.timeout) : "\u2014"}</span>
+
+          <span className="detail-label">Duration</span>
+          <span className="detail-value mono">{computeDuration(run.startedAt, run.completedAt)}</span>
+
+          <span className="detail-label">Created</span>
+          <span className="detail-value mono">{run.createdAt}</span>
+
+          <span className="detail-label">Started</span>
+          <span className="detail-value mono">{run.startedAt ?? "\u2014"}</span>
+
+          <span className="detail-label">Completed</span>
+          <span className="detail-value mono">{run.completedAt ?? "\u2014"}</span>
+        </div>
+      </div>
+
+      {run.error && (
+        <div className="detail-section">
+          <div className="detail-section-label">Error</div>
+          <div className="error-block">{run.error}</div>
+        </div>
+      )}
+
+      <div className="detail-section">
+        <div className="detail-section-label">Input</div>
+        <JsonViewer data={run.input} />
+      </div>
+
+      {run.output && (
+        <div className="detail-section">
+          <div className="detail-section-label">Output</div>
+          <JsonViewer data={run.output} />
+        </div>
+      )}
+
+      {steps.length > 0 && (
+        <div className="detail-section">
+          <div className="detail-section-label">Steps</div>
+          <StepTimeline steps={steps} />
+        </div>
+      )}
+
+      <div className="detail-section">
+        <div className="detail-section-label">Logs</div>
+        <div className="log-container">
+          {logs.length === 0 ? (
+            <div style={{
+              padding: "1rem",
+              color: "var(--muted)",
+              fontFamily: "var(--font-mono)",
+              fontSize: "0.75rem",
+            }}>
+              {run.status === "pending" ? "Waiting for execution..." : "No log output captured."}
+            </div>
+          ) : (
+            logs.map((log, i) => (
+              <div
+                key={i}
+                className="log-line"
+                style={{
+                  color: log.level === "stderr" ? "var(--rust)" : "var(--charcoal)",
+                }}
+              >
+                <span className="log-timestamp">
+                  {new Date(log.timestamp).toLocaleTimeString()}
+                </span>
+                <span className="log-level" data-level={log.level}>
+                  {log.level === "stderr" ? "ERR" : "OUT"}
+                </span>
+                <span className="log-message">{log.message}</span>
+              </div>
+            ))
+          )}
+          <div ref={logEndRef} />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/app/signals/[name]/page.tsx

@@ -0,0 +1,250 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import { useParams } from "next/navigation";
+import { useApi, type SignalMeta, type SchemaField } from "../../hooks/use-api";
+import { useStation } from "../../hooks/use-station";
+import { useBreadcrumb } from "../../hooks/use-breadcrumb";
+import { RunTable } from "../../components/run-table";
+import { SchemaForm } from "../../components/schema-form";
+
+function formatMs(ms: number): string {
+  if (ms < 1000) return `${ms}ms`;
+  if (ms < 60_000) return `${(ms / 1000).toFixed(0)}s`;
+  if (ms < 3_600_000) return `${(ms / 60_000).toFixed(0)}m`;
+  return `${(ms / 3_600_000).toFixed(0)}h`;
+}
+
+function renderSchemaInline(schema: SchemaField): string {
+  if (schema.type === "object" && schema.properties) {
+    const fields = Object.entries(schema.properties)
+      .map(([key, field]) => `${key}: ${field.type}${field.required ? "" : "?"}`)
+      .join(", ");
+    return `{ ${fields} }`;
+  }
+  if (schema.type === "array" && schema.items) {
+    return `${renderSchemaInline(schema.items)}[]`;
+  }
+  if (schema.type === "enum" && schema.values) {
+    return schema.values.map((v) => `"${v}"`).join(" | ");
+  }
+  return schema.type;
+}
+
+const STATUS_FILTERS = ["all", "completed", "failed", "running", "pending"] as const;
+type StatusFilter = (typeof STATUS_FILTERS)[number];
+
+export default function SignalDetailPage() {
+  const params = useParams();
+  const name = params.name as string;
+  const decodedName = decodeURIComponent(name);
+  const api = useApi();
+  const { events } = useStation();
+
+  const [signal, setSignal] = useState<SignalMeta | null>(null);
+  const [runs, setRuns] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [triggering, setTriggering] = useState(false);
+  const [inputJson, setInputJson] = useState("{}");
+  const [filter, setFilter] = useState<StatusFilter>("all");
+
+  useBreadcrumb(
+    [{ label: "Signals", href: "/signals" }, { label: decodedName }],
+    "signals",
+  );
+
+  const loadRuns = useCallback(() => {
+    api.getSignalRuns(name).then((r) => setRuns(r.data)).catch((e) => console.error("Failed to refresh runs:", e));
+  }, [name]);
+
+  useEffect(() => {
+    async function load() {
+      try {
+        const [signalRes, runsRes] = await Promise.all([
+          api.getSignal(name),
+          api.getSignalRuns(name),
+        ]);
+        setSignal(signalRes.data);
+        setRuns(runsRes.data);
+      } catch (err: unknown) {
+        if (err instanceof Error) {
+          console.error("Failed to load signal:", err.message);
+        }
+      }
+      setLoading(false);
+    }
+    load();
+  }, [name]);
+
+  useEffect(() => {
+    if (events.length === 0) return;
+    const latest = events[0];
+    if (latest.type.startsWith("run:")) {
+      const eventSignal =
+        (latest.data.run as Record<string, unknown>)?.signalName ??
+        (latest.data as Record<string, unknown>).signalName;
+      if (eventSignal === decodedName) {
+        loadRuns();
+      }
+    }
+  }, [events.length, decodedName, loadRuns]);
+
+  async function handleTrigger() {
+    setTriggering(true);
+    try {
+      const input = JSON.parse(inputJson);
+      await api.triggerSignal(name, input);
+      setInputJson("{}");
+      setTimeout(loadRuns, 300);
+    } catch (err: unknown) {
+      if (err instanceof Error) {
+        console.error("Trigger failed:", err.message);
+      }
+    }
+    setTriggering(false);
+  }
+
+  if (loading) {
+    return (
+      <div>
+        <h1 className="page-title">{decodedName}</h1>
+        <div className="loading-bar"><div className="loading-bar-fill" /></div>
+      </div>
+    );
+  }
+
+  if (!signal) {
+    return (
+      <div>
+        <h1 className="page-title">{decodedName}</h1>
+        <div className="empty-state">
+          <p className="empty-state-text">Signal not found.</p>
+        </div>
+      </div>
+    );
+  }
+
+  const hasSchema = signal.inputSchema !== null || signal.outputSchema !== null;
+  const filteredRuns = filter === "all" ? runs : runs.filter((r) => r.status === filter);
+
+  return (
+    <div>
+      <div className="page-header">
+        <h1 className="page-title" style={{ marginBottom: 0 }}>{decodedName}</h1>
+        <div className="page-header-actions">
+          <button className="btn btn--primary" onClick={handleTrigger} disabled={triggering}>
+            {triggering ? "Dispatching..." : "Trigger"}
+          </button>
+        </div>
+      </div>
+
+      <div className="detail-section">
+        <div className="detail-section-label">Configuration</div>
+        <div className="config-grid">
+          <div className="config-item">
+            <span className="config-item-label">Schedule</span>
+            <span className="config-item-value">{signal.interval ?? "Manual trigger"}</span>
+          </div>
+          <div className="config-item">
+            <span className="config-item-label">Timeout</span>
+            <span className="config-item-value">{formatMs(signal.timeout)}</span>
+          </div>
+          <div className="config-item">
+            <span className="config-item-label">Max Attempts</span>
+            <span className="config-item-value">{signal.maxAttempts}</span>
+          </div>
+          <div className="config-item">
+            <span className="config-item-label">Max Concurrency</span>
+            <span className="config-item-value">{signal.maxConcurrency ?? "\u2014"}</span>
+          </div>
+          <div className="config-item">
+            <span className="config-item-label">Steps</span>
+            <span className="config-item-value">
+              {signal.hasSteps ? signal.stepNames.join(", ") : "Single handler"}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {hasSchema && (
+        <div className="detail-section">
+          <div className="detail-section-label">Schema</div>
+          <div className="schema-pair">
+            <div>
+              <div style={{
+                fontFamily: "var(--font-mono)",
+                fontSize: "0.6875rem",
+                textTransform: "uppercase",
+                letterSpacing: "0.08em",
+                color: "var(--muted)",
+                marginBottom: "0.5rem",
+              }}>
+                Input
+              </div>
+              {signal.inputSchema ? (
+                <pre className="json-viewer" style={{ fontSize: "0.75rem" }}>
+                  {renderSchemaInline(signal.inputSchema)}
+                </pre>
+              ) : (
+                <span style={{ color: "var(--muted)", fontSize: "0.8125rem" }}>None</span>
+              )}
+            </div>
+            <div>
+              <div style={{
+                fontFamily: "var(--font-mono)",
+                fontSize: "0.6875rem",
+                textTransform: "uppercase",
+                letterSpacing: "0.08em",
+                color: "var(--muted)",
+                marginBottom: "0.5rem",
+              }}>
+                Output
+              </div>
+              {signal.outputSchema ? (
+                <pre className="json-viewer" style={{ fontSize: "0.75rem" }}>
+                  {renderSchemaInline(signal.outputSchema)}
+                </pre>
+              ) : (
+                <span style={{ color: "var(--muted)", fontSize: "0.8125rem" }}>None</span>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+
+      <div className="detail-section">
+        <div className="detail-section-label">Trigger</div>
+        <SchemaForm
+          schema={signal.inputSchema}
+          value={inputJson}
+          onChange={setInputJson}
+        />
+        <div style={{ marginTop: "0.5rem" }}>
+          <button
+            className="btn btn--primary"
+            onClick={handleTrigger}
+            disabled={triggering}
+          >
+            {triggering ? "Dispatching..." : "Dispatch"}
+          </button>
+        </div>
+      </div>
+
+      <div className="detail-section">
+        <div className="detail-section-label">Run History</div>
+        <div className="filter-bar">
+          {STATUS_FILTERS.map((f) => (
+            <button
+              key={f}
+              className={`filter-btn${filter === f ? " filter-btn--active" : ""}`}
+              onClick={() => setFilter(f)}
+            >
+              {f.charAt(0).toUpperCase() + f.slice(1)}
+            </button>
+          ))}
+        </div>
+        <RunTable runs={filteredRuns} />
+      </div>
+    </div>
+  );
+}

package/src/app/signals/page.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { useApi, type SignalMeta } from "../hooks/use-api";
+import { useBreadcrumb } from "../hooks/use-breadcrumb";
+
+function formatMs(ms: number): string {
+  if (ms < 1000) return `${ms}ms`;
+  if (ms < 60_000) return `${(ms / 1000).toFixed(0)}s`;
+  if (ms < 3_600_000) return `${(ms / 60_000).toFixed(0)}m`;
+  return `${(ms / 3_600_000).toFixed(0)}h`;
+}
+
+export default function SignalsPage() {
+  const api = useApi();
+  const router = useRouter();
+  const [signals, setSignals] = useState<SignalMeta[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useBreadcrumb([{ label: "Signals" }], "signals");
+
+  useEffect(() => {
+    api.getSignals()
+      .then((res) => setSignals(res.data))
+      .catch((err: unknown) => {
+        if (err instanceof Error) {
+          console.error("Failed to load signals:", err.message);
+        }
+      })
+      .finally(() => setLoading(false));
+  }, []);
+
+  if (loading) {
+    return (
+      <div>
+        <h1 className="page-title">Signals</h1>
+        <div className="loading-bar"><div className="loading-bar-fill" /></div>
+      </div>
+    );
+  }
+
+  if (signals.length === 0) {
+    return (
+      <div>
+        <h1 className="page-title">Signals</h1>
+        <div className="empty-state">
+          <p className="empty-state-text">No signals discovered.</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <h1 className="page-title">Signals</h1>
+
+      <table className="station-table">
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Kind</th>
+            <th>Schedule</th>
+            <th>Timeout</th>
+            <th>Retries</th>
+            <th>Steps</th>
+          </tr>
+        </thead>
+        <tbody>
+          {signals.map((signal, i) => (
+            <tr
+              key={signal.name}
+              className="reveal-item clickable-row"
+              style={{ animationDelay: `${i * 40}ms` }}
+              onClick={() => router.push(`/signals/${encodeURIComponent(signal.name)}`)}
+            >
+              <td className="mono">{signal.name}</td>
+              <td style={{ color: "var(--muted)", fontSize: "0.8125rem" }}>
+                {signal.interval ? "recurring" : "trigger"}
+              </td>
+              <td className="mono" style={{ color: "var(--muted)", fontSize: "0.8125rem" }}>
+                {signal.interval ?? "\u2014"}
+              </td>
+              <td className="mono" style={{ fontSize: "0.8125rem" }}>
+                {formatMs(signal.timeout)}
+              </td>
+              <td className="mono" style={{ fontSize: "0.8125rem" }}>
+                {signal.maxAttempts > 1 ? signal.maxAttempts - 1 : "0"}
+              </td>
+              <td className="mono" style={{ fontSize: "0.8125rem" }}>
+                {signal.hasSteps ? signal.stepNames.length : "\u2014"}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/src/cli-main.ts

@@ -0,0 +1,70 @@
+import { spawn, type ChildProcess } from "node:child_process";
+import { resolve } from "node:path";
+import { loadConfig } from "./config/loader.js";
+import { createStation } from "./server/index.js";
+
+const cwd = process.cwd();
+
+const config = await loadConfig(cwd);
+
+const station = await createStation(config, cwd);
+await station.start();
+
+// Start Next.js dev server as child process
+const nextPort = config.port + 1;
+const stationRoot = resolve(import.meta.dirname, "..");
+
+const nextProcess: ChildProcess = spawn(
+  "npx",
+  ["next", "dev", "--port", String(nextPort), "--hostname", config.host],
+  {
+    cwd: stationRoot,
+    stdio: ["ignore", "pipe", "pipe"],
+    env: {
+      ...process.env,
+      NEXT_PUBLIC_STATION_API: `http://${config.host}:${config.port}`,
+    },
+  },
+);
+
+nextProcess.stdout?.on("data", (chunk: Buffer) => {
+  const msg = chunk.toString().trim();
+  if (msg) console.log(`[station:ui] ${msg}`);
+});
+
+nextProcess.stderr?.on("data", (chunk: Buffer) => {
+  const msg = chunk.toString().trim();
+  // Filter out noisy Next.js dev warnings
+  if (msg && !msg.includes("ExperimentalWarning")) {
+    console.error(`[station:ui] ${msg}`);
+  }
+});
+
+console.log(`[station] Dashboard on http://${config.host}:${nextPort}`);
+
+// Open browser
+if (config.open) {
+  const url = `http://${config.host}:${nextPort}`;
+  const { execFile } = await import("node:child_process");
+  const platform = process.platform;
+
+  await new Promise((res) => setTimeout(() => res(true), 5000));
+  if (platform === "darwin") {
+    execFile("open", [url]);
+  } else if (platform === "linux") {
+    execFile("xdg-open", [url]);
+  } else if (platform === "win32") {
+    execFile("cmd", ["/c", "start", url]);
+  }
+}
+
+// Graceful shutdown
+const shutdown = async () => {
+  console.log("\n[station] Shutting down...");
+  nextProcess.kill("SIGTERM");
+  await station.stop();
+  process.exit(0);
+};
+
+process.on("SIGINT", shutdown);
+process.on("SIGTERM", shutdown);