station-kit 1.0.0

package/src/app/components/login-page.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { useState, type FormEvent } from "react";
+import { login } from "../hooks/use-api";
+import { useLoginCallback } from "./auth-provider";
+
+export function LoginPage() {
+  const onSuccess = useLoginCallback();
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+    setError("");
+    setLoading(true);
+    try {
+      const ok = await login(username, password);
+      if (ok) {
+        onSuccess();
+      } else {
+        setError("Invalid credentials.");
+      }
+    } catch {
+      setError("Connection failed.");
+    }
+    setLoading(false);
+  }
+
+  return (
+    <div className="login-page">
+      <div className="login-card">
+        <div className="login-header">
+          <svg width="28" height="28" viewBox="0 0 100 100" fill="none" aria-hidden="true">
+            <path d="M50 2 L39 25 L27 50 L18 70 L10 88 L90 88 L82 70 L73 50 L61 25 Z" stroke="currentColor" strokeWidth="1.5" />
+            <line x1="50" y1="2" x2="50" y2="88" stroke="currentColor" strokeWidth="1" />
+            <line x1="16" y1="70" x2="84" y2="70" stroke="currentColor" strokeWidth="1.2" />
+            <line x1="39" y1="25" x2="61" y2="25" stroke="currentColor" strokeWidth="0.8" />
+            <line x1="27" y1="50" x2="73" y2="50" stroke="currentColor" strokeWidth="0.8" />
+            <rect x="43" y="88" width="14" height="5" fill="currentColor" opacity="0.5" />
+            <circle cx="50" cy="2" r="1.5" fill="currentColor" />
+          </svg>
+          <h1>Station</h1>
+        </div>
+        <form onSubmit={handleSubmit}>
+          <div className="login-field">
+            <label htmlFor="username">Username</label>
+            <input
+              id="username"
+              type="text"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              autoComplete="username"
+              autoFocus
+              required
+            />
+          </div>
+          <div className="login-field">
+            <label htmlFor="password">Password</label>
+            <input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              autoComplete="current-password"
+              required
+            />
+          </div>
+          {error && <div className="login-error">{error}</div>}
+          <button type="submit" className="btn btn--primary login-btn" disabled={loading}>
+            {loading ? "Signing in..." : "Sign in"}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}

package/src/app/components/node-detail.tsx

@@ -0,0 +1,158 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import Link from "next/link";
+import { StatusBadge } from "./status-badge";
+import { JsonViewer } from "./json-viewer";
+
+interface LogEntry {
+  level: string;
+  message: string;
+  timestamp: string;
+}
+
+interface NodeDetailProps {
+  node: {
+    id: string;
+    broadcastRunId: string;
+    nodeName: string;
+    signalName: string;
+    signalRunId?: string;
+    status: string;
+    skipReason?: string;
+    input?: string;
+    output?: string;
+    error?: string;
+    startedAt?: string;
+    completedAt?: string;
+  };
+  logs?: LogEntry[];
+}
+
+function duration(startedAt?: string, completedAt?: string): string {
+  if (!startedAt) return "-";
+  const start = new Date(startedAt).getTime();
+  const end = completedAt ? new Date(completedAt).getTime() : Date.now();
+  const ms = end - start;
+  if (ms < 1000) return `${ms}ms`;
+  if (ms < 60_000) return `${(ms / 1000).toFixed(1)}s`;
+  return `${(ms / 60_000).toFixed(1)}m`;
+}
+
+function CollapsibleSection({ label, children }: { label: string; children: React.ReactNode }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <div className="detail-section">
+      <button
+        className="collapsible-header"
+        onClick={() => setOpen(!open)}
+      >
+        <span className="collapsible-chevron">{open ? "\u25BE" : "\u25B8"}</span>
+        {label}
+      </button>
+      {open && <div className="collapsible-content">{children}</div>}
+    </div>
+  );
+}
+
+export function NodeDetail({ node, logs }: NodeDetailProps) {
+  const logEndRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    logEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [logs?.length]);
+
+  return (
+    <div className="workflow-panel">
+      <div className="node-detail-header">
+        <div style={{ display: "flex", alignItems: "center", gap: "0.75rem" }}>
+          <span className="node-detail-title">{node.nodeName}</span>
+          <StatusBadge status={node.status as "pending" | "running" | "completed" | "failed" | "cancelled" | "skipped"} />
+        </div>
+        <span className="node-detail-meta">
+          {node.signalName} {"\u00B7"} {duration(node.startedAt, node.completedAt)}
+        </span>
+      </div>
+
+      {node.status === "skipped" && node.skipReason && (
+        <div className="detail-section">
+          <div
+            style={{
+              fontFamily: "var(--font-mono)",
+              fontSize: "0.8125rem",
+              color: "var(--muted)",
+              padding: "0.5rem 0",
+            }}
+          >
+            Skipped: {node.skipReason}
+          </div>
+        </div>
+      )}
+
+      {node.error && (
+        <div className="detail-section">
+          <div className="error-block">{node.error}</div>
+        </div>
+      )}
+
+      {/* Logs — primary content */}
+      <div className="detail-section">
+        <div className="detail-section-label">Logs</div>
+        <div className="log-container" style={{ maxHeight: "none", minHeight: "120px" }}>
+          {(!logs || logs.length === 0) ? (
+            <div style={{
+              padding: "1rem",
+              color: "var(--muted)",
+              fontFamily: "var(--font-mono)",
+              fontSize: "0.75rem",
+            }}>
+              {node.status === "pending" ? "Waiting for execution..." :
+               node.status === "skipped" ? "Node was skipped." :
+               "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>
+
+      {/* Collapsible I/O */}
+      {node.input && (
+        <CollapsibleSection label="Input">
+          <JsonViewer data={node.input} />
+        </CollapsibleSection>
+      )}
+
+      {node.output && (
+        <CollapsibleSection label="Output">
+          <JsonViewer data={node.output} />
+        </CollapsibleSection>
+      )}
+
+      {node.signalRunId && (
+        <div className="detail-section" style={{ paddingTop: "0.25rem" }}>
+          <Link href={`/runs/${node.signalRunId}`} className="meta-value--link" style={{ fontSize: "0.8125rem" }}>
+            View signal run &rarr;
+          </Link>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/app/components/pulse-dot.tsx

@@ -0,0 +1,8 @@
+export function PulseDot({ connected }: { connected: boolean }) {
+  return (
+    <div
+      className={`pulse-dot ${connected ? "" : "pulse-dot--disconnected"}`}
+      title={connected ? "Connected" : "Disconnected"}
+    />
+  );
+}

package/src/app/components/relative-time.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+function format(date: string): string {
+  const ms = Date.now() - new Date(date).getTime();
+  if (ms < 0) return "just now";
+  const seconds = Math.floor(ms / 1000);
+  if (seconds < 5) return "just now";
+  if (seconds < 60) return `${seconds}s ago`;
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+}
+
+export function RelativeTime({ date }: { date: string }) {
+  const [text, setText] = useState(() => format(date));
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setText(format(date));
+    }, 5000);
+    return () => clearInterval(interval);
+  }, [date]);
+
+  return (
+    <span className="mono" title={new Date(date).toLocaleString()} style={{ fontSize: "0.8125rem", color: "var(--muted)" }}>
+      {text}
+    </span>
+  );
+}

package/src/app/components/run-table.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { StatusBadge } from "./status-badge";
+import { RelativeTime } from "./relative-time";
+
+interface Run {
+  id: string;
+  signalName: string;
+  status: string;
+  attempts: number;
+  maxAttempts: number;
+  createdAt: string;
+  startedAt?: string;
+  completedAt?: string;
+  error?: string;
+}
+
+function duration(startedAt?: string, completedAt?: string): string {
+  if (!startedAt) return "-";
+  const start = new Date(startedAt).getTime();
+  const end = completedAt ? new Date(completedAt).getTime() : Date.now();
+  const ms = end - start;
+  if (ms < 1000) return `${ms}ms`;
+  if (ms < 60_000) return `${(ms / 1000).toFixed(1)}s`;
+  return `${(ms / 60_000).toFixed(1)}m`;
+}
+
+function truncateError(error: string | undefined, maxLen: number): string {
+  if (!error) return "-";
+  if (error.length <= maxLen) return error;
+  return error.slice(0, maxLen) + "\u2026";
+}
+
+export function RunTable({ runs }: { runs: Run[] }) {
+  const router = useRouter();
+
+  if (runs.length === 0) {
+    return (
+      <div className="empty-state">
+        <p className="empty-state-text">No runs recorded.</p>
+      </div>
+    );
+  }
+
+  return (
+    <table className="station-table">
+      <thead>
+        <tr>
+          <th>Status</th>
+          <th>Signal</th>
+          <th>Run ID</th>
+          <th>Duration</th>
+          <th>Created</th>
+          <th>Error</th>
+        </tr>
+      </thead>
+      <tbody>
+        {runs.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 "pending" | "running" | "completed" | "failed" | "cancelled" | "skipped"} />
+            </td>
+            <td className="mono">{run.signalName}</td>
+            <td className="mono truncate" title={run.id}>
+              {run.id.slice(0, 8)}
+            </td>
+            <td className="mono">{duration(run.startedAt, run.completedAt)}</td>
+            <td>
+              <RelativeTime date={run.createdAt} />
+            </td>
+            <td
+              style={{
+                color: run.error ? "var(--rust)" : "var(--muted)",
+                fontFamily: "var(--font-mono)",
+                fontSize: "0.75rem",
+                maxWidth: "200px",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+              }}
+              title={run.error ?? undefined}
+            >
+              {truncateError(run.error, 60)}
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}

package/src/app/components/schema-form.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { useState, useEffect } from "react";
+
+interface SchemaField {
+  type: string;
+  required: boolean;
+  properties?: Record<string, SchemaField>;
+  items?: SchemaField;
+  values?: string[];
+}
+
+interface SchemaFormProps {
+  schema: SchemaField | null;
+  value: string;
+  onChange: (v: string) => void;
+}
+
+function generateTemplate(field: SchemaField): unknown {
+  switch (field.type) {
+    case "string":
+      return "";
+    case "number":
+    case "integer":
+      return 0;
+    case "boolean":
+      return false;
+    case "array":
+      return [];
+    case "enum":
+      if (field.values && field.values.length > 0) {
+        return field.values[0];
+      }
+      return "";
+    case "object": {
+      if (!field.properties) return {};
+      const obj: Record<string, unknown> = {};
+      for (const [key, childField] of Object.entries(field.properties)) {
+        obj[key] = generateTemplate(childField);
+      }
+      return obj;
+    }
+    default:
+      return null;
+  }
+}
+
+function SchemaReference({ schema }: { schema: SchemaField }) {
+  if (schema.type !== "object" || !schema.properties) return null;
+
+  const entries = Object.entries(schema.properties);
+  if (entries.length === 0) return null;
+
+  return (
+    <div className="schema-ref">
+      <div className="schema-ref-title">Expected Input</div>
+      {entries.map(([name, field]) => (
+        <div key={name} className="schema-field">
+          <span className="schema-field-name">{name}</span>
+          <span
+            className={`schema-field-type${!field.required ? " schema-field-type--optional" : ""}`}
+          >
+            {field.type}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function SchemaForm({ schema, value, onChange }: SchemaFormProps) {
+  const [parseError, setParseError] = useState<string | null>(null);
+  const [initialized, setInitialized] = useState(false);
+
+  useEffect(() => {
+    if (initialized) return;
+    if (schema && value === "{}") {
+      const template = generateTemplate(schema);
+      const templateStr = JSON.stringify(template, null, 2);
+      if (templateStr !== "{}") {
+        onChange(templateStr);
+      }
+    }
+    setInitialized(true);
+  }, [schema, value, onChange, initialized]);
+
+  function handleChange(newValue: string) {
+    onChange(newValue);
+    if (newValue.trim() === "") {
+      setParseError(null);
+      return;
+    }
+    try {
+      JSON.parse(newValue);
+      setParseError(null);
+    } catch (err: unknown) {
+      if (err instanceof SyntaxError) {
+        setParseError(err.message);
+      } else {
+        setParseError("Invalid JSON");
+      }
+    }
+  }
+
+  return (
+    <div>
+      {schema && schema.type === "object" && schema.properties && (
+        <SchemaReference schema={schema} />
+      )}
+      <textarea
+        className="input-textarea"
+        value={value}
+        onChange={(e) => handleChange(e.target.value)}
+        rows={6}
+        spellCheck={false}
+        placeholder="{}"
+      />
+      {parseError && <div className="json-parse-error">{parseError}</div>}
+    </div>
+  );
+}