station-kit 1.0.0

package/src/app/hooks/use-api.ts

@@ -0,0 +1,129 @@
+"use client";
+
+const API_BASE = process.env.NEXT_PUBLIC_STATION_API ?? "http://localhost:4400";
+
+interface ApiResponse<T> {
+  data: T;
+  meta?: { total?: number };
+}
+
+interface ApiError {
+  error: string;
+  message: string;
+}
+
+async function fetchApi<T>(path: string, options?: RequestInit): Promise<ApiResponse<T>> {
+  const res = await fetch(`${API_BASE}/api${path}`, {
+    ...options,
+    credentials: "include",
+    headers: {
+      "Content-Type": "application/json",
+      ...options?.headers,
+    },
+  });
+  if (!res.ok) {
+    const err: ApiError = await res.json().catch(() => ({ error: "unknown", message: "Request failed." }));
+    throw new Error(err.message);
+  }
+  return res.json();
+}
+
+export async function checkAuth(): Promise<{ authenticated: boolean; authRequired: boolean }> {
+  const res = await fetch(`${API_BASE}/api/auth/check`, { credentials: "include" });
+  const json = await res.json();
+  return json.data;
+}
+
+export async function login(username: string, password: string): Promise<boolean> {
+  const res = await fetch(`${API_BASE}/api/auth/login`, {
+    method: "POST",
+    credentials: "include",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ username, password }),
+  });
+  return res.ok;
+}
+
+export async function logout(): Promise<void> {
+  await fetch(`${API_BASE}/api/auth/logout`, {
+    method: "POST",
+    credentials: "include",
+  });
+}
+
+export interface SchemaField {
+  type: string;
+  required: boolean;
+  properties?: Record<string, SchemaField>;
+  items?: SchemaField;
+  values?: string[];
+}
+
+export interface SignalMeta {
+  name: string;
+  filePath: string;
+  inputSchema: SchemaField | null;
+  outputSchema: SchemaField | null;
+  interval: string | null;
+  timeout: number;
+  maxAttempts: number;
+  maxConcurrency: number | null;
+  hasSteps: boolean;
+  stepNames: string[];
+}
+
+export interface BroadcastMeta {
+  name: string;
+  filePath: string;
+  nodes: Array<{ name: string; signalName: string; dependsOn: string[] }>;
+  failurePolicy: string;
+  timeout: number | null;
+  interval: string | null;
+}
+
+export function useApi() {
+  return {
+    // Health
+    getHealth: () => fetchApi<{ ok: boolean; signal: boolean; broadcast: boolean | null }>("/health"),
+
+    // Signals
+    getSignals: () => fetchApi<SignalMeta[]>("/signals"),
+    getScheduledSignals: () =>
+      fetchApi<Array<{ name: string; interval: string; nextRunAt: string | null; lastRunAt: string | null; lastStatus: string | null }>>("/signals/scheduled"),
+    getSignal: (name: string) => fetchApi<SignalMeta>(`/signals/${encodeURIComponent(name)}`),
+    getSignalRuns: (name: string) => fetchApi<any[]>(`/signals/${encodeURIComponent(name)}/runs`),
+    triggerSignal: (name: string, input?: unknown) =>
+      fetchApi<{ id: string }>(`/signals/${encodeURIComponent(name)}/trigger`, {
+        method: "POST",
+        body: JSON.stringify({ input: input ?? {} }),
+      }),
+
+    // Runs
+    getRuns: (params?: { status?: string; signalName?: string }) => {
+      const query = new URLSearchParams();
+      if (params?.status) query.set("status", params.status);
+      if (params?.signalName) query.set("signalName", params.signalName);
+      const qs = query.toString();
+      return fetchApi<any[]>(`/runs${qs ? `?${qs}` : ""}`);
+    },
+    getRunStats: () => fetchApi<{ pending: number; running: number; completed: number; failed: number; cancelled: number }>("/runs/stats"),
+    getRun: (id: string) => fetchApi<any>(`/runs/${id}`),
+    getRunSteps: (id: string) => fetchApi<any[]>(`/runs/${id}/steps`),
+    getRunLogs: (id: string) => fetchApi<Array<{ runId: string; signalName: string; level: string; message: string; timestamp: string }>>(`/runs/${id}/logs`),
+    cancelRun: (id: string) => fetchApi<{ cancelled: boolean }>(`/runs/${id}/cancel`, { method: "POST" }),
+
+    // Broadcasts
+    getBroadcasts: () => fetchApi<BroadcastMeta[]>("/broadcasts"),
+    getBroadcast: (name: string) => fetchApi<BroadcastMeta>(`/broadcasts/${encodeURIComponent(name)}`),
+    triggerBroadcast: (name: string, input?: unknown) =>
+      fetchApi<{ id: string }>(`/broadcasts/${encodeURIComponent(name)}/trigger`, {
+        method: "POST",
+        body: JSON.stringify({ input: input ?? {} }),
+      }),
+    getBroadcastRuns: (name: string) => fetchApi<any[]>(`/broadcasts/${encodeURIComponent(name)}/runs`),
+    getBroadcastRun: (id: string) => fetchApi<any>(`/broadcast-runs/${id}`),
+    getBroadcastRunNodes: (id: string) => fetchApi<any[]>(`/broadcast-runs/${id}/nodes`),
+    getBroadcastRunLogs: (id: string) => fetchApi<Array<{ runId: string; signalName: string; level: string; message: string; timestamp: string; nodeName: string }>>(`/broadcast-runs/${id}/logs`),
+    cancelBroadcastRun: (id: string) => fetchApi<{ cancelled: boolean }>(`/broadcast-runs/${id}/cancel`, { method: "POST" }),
+  };
+}

package/src/app/hooks/use-breadcrumb.ts

@@ -0,0 +1,37 @@
+"use client";
+
+import { createContext, useContext, useEffect } from "react";
+
+export interface BreadcrumbSegment {
+  label: string;
+  href?: string;
+}
+
+export interface BreadcrumbContextValue {
+  segments: BreadcrumbSegment[];
+  activeSection: string | null;
+  setSegments: (segments: BreadcrumbSegment[]) => void;
+  setActiveSection: (section: string | null) => void;
+}
+
+export const BreadcrumbContext = createContext<BreadcrumbContextValue>({
+  segments: [],
+  activeSection: null,
+  setSegments: () => {},
+  setActiveSection: () => {},
+});
+
+export function useBreadcrumb(
+  segments: BreadcrumbSegment[],
+  section: string,
+) {
+  const ctx = useContext(BreadcrumbContext);
+  useEffect(() => {
+    ctx.setSegments(segments);
+    ctx.setActiveSection(section);
+  }, [JSON.stringify(segments), section]);
+}
+
+export function useBreadcrumbContext() {
+  return useContext(BreadcrumbContext);
+}

package/src/app/hooks/use-realtime.ts

@@ -0,0 +1,68 @@
+"use client";
+
+import { useEffect, useRef, useCallback, useState } from "react";
+
+const WS_BASE = process.env.NEXT_PUBLIC_STATION_API ?? "http://localhost:4400";
+
+export interface StationEvent {
+  type: string;
+  timestamp: string;
+  data: Record<string, unknown>;
+}
+
+export function useRealtime(onEvent: (event: StationEvent) => void): { connected: boolean } {
+  const [connected, setConnected] = useState(false);
+  const onEventRef = useRef(onEvent);
+  onEventRef.current = onEvent;
+
+  useEffect(() => {
+    let ws: WebSocket | null = null;
+    let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+    let attempt = 0;
+    let closed = false;
+
+    function connect() {
+      if (closed) return;
+
+      const wsUrl = WS_BASE.replace(/^http/, "ws") + "/api/events";
+      ws = new WebSocket(wsUrl);
+
+      ws.onopen = () => {
+        setConnected(true);
+        attempt = 0;
+      };
+
+      ws.onmessage = (e) => {
+        try {
+          const event = JSON.parse(e.data) as StationEvent;
+          onEventRef.current(event);
+        } catch (err) {
+          console.error("Failed to parse WebSocket message:", err);
+        }
+      };
+
+      ws.onclose = () => {
+        setConnected(false);
+        if (!closed) {
+          const delay = Math.min(1000 * Math.pow(2, attempt), 10000);
+          attempt++;
+          reconnectTimer = setTimeout(connect, delay);
+        }
+      };
+
+      ws.onerror = () => {
+        ws?.close();
+      };
+    }
+
+    connect();
+
+    return () => {
+      closed = true;
+      if (reconnectTimer) clearTimeout(reconnectTimer);
+      ws?.close();
+    };
+  }, []);
+
+  return { connected };
+}

package/src/app/hooks/use-station.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { createContext, useContext, useCallback, useEffect, useState, type ReactNode } from "react";
+import { useRealtime, type StationEvent } from "./use-realtime";
+
+interface StationState {
+  connected: boolean;
+  events: StationEvent[];
+}
+
+const StationContext = createContext<StationState>({
+  connected: false,
+  events: [],
+});
+
+export function useStation() {
+  return useContext(StationContext);
+}
+
+export function StationProvider({ children }: { children: ReactNode }) {
+  const [events, setEvents] = useState<StationEvent[]>([]);
+
+  const handleEvent = useCallback((event: StationEvent) => {
+    setEvents((prev) => [event, ...prev].slice(0, 100));
+  }, []);
+
+  const { connected } = useRealtime(handleEvent);
+
+  return (
+    <StationContext.Provider value={{ connected, events }}>
+      {children}
+    </StationContext.Provider>
+  );
+}

package/src/app/layout.tsx

@@ -0,0 +1,42 @@
+import type { Metadata } from "next";
+import "./globals.css";
+import { Shell } from "./components/shell";
+import { ThemeProvider } from "./components/theme-provider";
+import { StationProvider } from "./hooks/use-station";
+import { BreadcrumbProvider } from "./components/breadcrumb-provider";
+import { AuthProvider } from "./components/auth-provider";
+import { LoginPage } from "./components/login-page";
+
+export const metadata: Metadata = {
+  title: "Station",
+  description: "Dashboard for station-signal",
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `(function(){try{var t=localStorage.getItem("station-theme");if(t==="dark"||t==="light"){document.documentElement.setAttribute("data-theme",t)}else if(window.matchMedia("(prefers-color-scheme:dark)").matches){document.documentElement.setAttribute("data-theme","dark")}else{document.documentElement.setAttribute("data-theme","light")}}catch(e){document.documentElement.setAttribute("data-theme","light")}})()`,
+          }}
+        />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=IBM+Plex+Mono:wght@400;500&family=Space+Grotesk:wght@300;400;500&display=swap"
+          rel="stylesheet"
+        />
+      </head>
+      <body>
+        <ThemeProvider>
+          <AuthProvider loginPage={<LoginPage />}>
+            <StationProvider>
+              <BreadcrumbProvider>
+                <Shell>{children}</Shell>
+              </BreadcrumbProvider>
+            </StationProvider>
+          </AuthProvider>
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}

package/src/app/page.tsx

@@ -0,0 +1,275 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+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 { RelativeTime } from "./components/relative-time";
+
+interface Stats {
+  pending: number;
+  running: number;
+  completed: number;
+  failed: number;
+  cancelled: number;
+}
+
+interface FailedRun {
+  id: string;
+  signalName: string;
+  status: string;
+  error?: string;
+  createdAt: string;
+}
+
+interface ScheduledSignal {
+  name: string;
+  interval: string;
+  nextRunAt: string | null;
+  lastRunAt: string | null;
+  lastStatus: string | null;
+}
+
+function formatCountdown(date: string): string {
+  const ms = new Date(date).getTime() - Date.now();
+  if (ms <= 0) return "due now";
+  const seconds = Math.floor(ms / 1000);
+  if (seconds < 60) return `in ${seconds}s`;
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `in ${minutes}m`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `in ${hours}h`;
+  return `in ${Math.floor(hours / 24)}d`;
+}
+
+export default function OverviewPage() {
+  const api = useApi();
+  const router = useRouter();
+  const { events } = useStation();
+  const [stats, setStats] = useState<Stats | null>(null);
+  const [failedRuns, setFailedRuns] = useState<FailedRun[]>([]);
+  const [scheduled, setScheduled] = useState<ScheduledSignal[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useBreadcrumb([{ label: "Overview" }], "overview");
+
+  useEffect(() => {
+    async function load() {
+      try {
+        const [statsRes, failedRes, scheduledRes] = await Promise.all([
+          api.getRunStats(),
+          api.getRuns({ status: "failed" }),
+          api.getScheduledSignals(),
+        ]);
+        setStats(statsRes.data);
+        setFailedRuns(failedRes.data.slice(0, 10));
+        setScheduled(scheduledRes.data);
+      } catch (err: unknown) {
+        if (err instanceof Error) {
+          console.error("Failed to load overview data:", err.message);
+        }
+      }
+      setLoading(false);
+    }
+    load();
+  }, []);
+
+  useEffect(() => {
+    if (events.length === 0) return;
+    const latestEvent = events[0];
+    if (latestEvent.type.startsWith("run:")) {
+      api.getRunStats().then((r) => setStats(r.data)).catch((e) => console.error("Failed to refresh stats:", e));
+      api.getRuns({ status: "failed" }).then((r) => setFailedRuns(r.data.slice(0, 10))).catch((e) => console.error("Failed to refresh failed runs:", e));
+      api.getScheduledSignals().then((r) => setScheduled(r.data)).catch((e) => console.error("Failed to refresh scheduled:", e));
+    }
+  }, [events.length]);
+
+  if (loading) {
+    return (
+      <div>
+        <h1 className="page-title">Overview</h1>
+        <div className="loading-bar"><div className="loading-bar-fill" /></div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <h1 className="page-title">Overview</h1>
+
+      {stats && (
+        <div className="stat-grid">
+          <div className="stat-card">
+            <div className="stat-card-label">Pending</div>
+            <div className="stat-card-value">{stats.pending}</div>
+          </div>
+          <div className="stat-card">
+            <div className="stat-card-label">Running</div>
+            <div className="stat-card-value" style={{ color: "var(--patina)" }}>{stats.running}</div>
+          </div>
+          <div className="stat-card">
+            <div className="stat-card-label">Completed</div>
+            <div className="stat-card-value" style={{ color: "var(--patina)" }}>{stats.completed}</div>
+          </div>
+          <div className="stat-card">
+            <div className="stat-card-label">Failed</div>
+            <div className="stat-card-value" style={{ color: "var(--rust)" }}>{stats.failed}</div>
+          </div>
+          <div className="stat-card">
+            <div className="stat-card-label">Cancelled</div>
+            <div className="stat-card-value">{stats.cancelled}</div>
+          </div>
+        </div>
+      )}
+
+      {scheduled.length > 0 && (
+        <div className="detail-section">
+          <div className="detail-section-label">Scheduled</div>
+          <table className="station-table">
+            <thead>
+              <tr>
+                <th>Signal</th>
+                <th>Interval</th>
+                <th>Next Run</th>
+                <th>Last Run</th>
+                <th>Last Status</th>
+              </tr>
+            </thead>
+            <tbody>
+              {scheduled.map((sig, i) => (
+                <tr
+                  key={sig.name}
+                  className="reveal-item clickable-row"
+                  style={{ animationDelay: `${i * 40}ms` }}
+                  onClick={() => router.push(`/signals/${encodeURIComponent(sig.name)}`)}
+                >
+                  <td className="mono">{sig.name}</td>
+                  <td className="mono" style={{ color: "var(--muted)", fontSize: "0.8125rem" }}>
+                    {sig.interval}
+                  </td>
+                  <td className="mono" style={{ fontSize: "0.8125rem", color: sig.nextRunAt ? "var(--patina)" : "var(--muted)" }}>
+                    {sig.nextRunAt ? formatCountdown(sig.nextRunAt) : "\u2014"}
+                  </td>
+                  <td>
+                    {sig.lastRunAt ? <RelativeTime date={sig.lastRunAt} /> : <span className="mono" style={{ fontSize: "0.8125rem", color: "var(--muted)" }}>{"\u2014"}</span>}
+                  </td>
+                  <td>
+                    {sig.lastStatus ? <StatusBadge status={sig.lastStatus as any} /> : <span className="mono" style={{ fontSize: "0.8125rem", color: "var(--muted)" }}>{"\u2014"}</span>}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      {failedRuns.length > 0 && (
+        <div className="detail-section">
+          <div className="detail-section-label">Recent Failures</div>
+          <table className="station-table">
+            <thead>
+              <tr>
+                <th>Status</th>
+                <th>Signal</th>
+                <th>Error</th>
+                <th>Time</th>
+              </tr>
+            </thead>
+            <tbody>
+              {failedRuns.map((run, i) => (
+                <tr
+                  key={run.id}
+                  className="reveal-item clickable-row"
+                  style={{ animationDelay: `${i * 40}ms` }}
+                  onClick={() => router.push(`/runs/${run.id}`)}
+                >
+                  <td><StatusBadge status={run.status as any} /></td>
+                  <td>
+                    <Link
+                      href={`/signals/${run.signalName}`}
+                      className="mono"
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      {run.signalName}
+                    </Link>
+                  </td>
+                  <td
+                    style={{
+                      color: "var(--rust)",
+                      fontSize: "0.8125rem",
+                      fontFamily: "var(--font-mono)",
+                      maxWidth: "300px",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap",
+                    }}
+                    title={run.error ?? ""}
+                  >
+                    {run.error ? (run.error.length > 60 ? run.error.slice(0, 60) + "..." : run.error) : "-"}
+                  </td>
+                  <td><RelativeTime date={run.createdAt} /></td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      {events.length > 0 && (
+        <div className="detail-section">
+          <div className="detail-section-label">Live Activity</div>
+          <div style={{ marginTop: "0.75rem" }}>
+            {events.slice(0, 20).map((event, i) => {
+              const signalName =
+                (event.data.run as Record<string, unknown>)?.signalName ??
+                (event.data as Record<string, unknown>).signalName ??
+                null;
+              const runId =
+                (event.data.run as Record<string, unknown>)?.id ??
+                (event.data as Record<string, unknown>).runId ??
+                null;
+              const broadcastRunId =
+                (event.data as Record<string, unknown>).broadcastRunId ?? null;
+
+              const href = broadcastRunId
+                ? `/broadcasts/${broadcastRunId}`
+                : runId
+                  ? `/runs/${runId}`
+                  : null;
+
+              return (
+                <div
+                  key={`${event.timestamp}-${i}`}
+                  className={`reveal-item${href ? " activity-row" : ""}`}
+                  style={{
+                    animationDelay: `${i * 40}ms`,
+                    fontFamily: "var(--font-mono)",
+                    fontSize: "0.75rem",
+                    color: "var(--muted)",
+                    padding: "0.375rem 0.5rem",
+                    borderBottom: "1px solid var(--concrete-dark)",
+                    display: "flex",
+                    gap: "0.75rem",
+                    alignItems: "baseline",
+                  }}
+                  onClick={href ? () => router.push(href) : undefined}
+                >
+                  <span style={{ color: "var(--rust)", minWidth: "120px" }}>{event.type}</span>
+                  {signalName && (
+                    <span style={{ color: "var(--charcoal)" }}>{String(signalName)}</span>
+                  )}
+                  <span style={{ marginLeft: "auto" }}>
+                    {new Date(event.timestamp).toLocaleTimeString()}
+                  </span>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}