station-kit 1.0.8 → 1.1.0

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

@@ -0,0 +1,166 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { useRouter } from "next/navigation";
+import { useApi } from "../../hooks/use-api";
+import { useBreadcrumb } from "../../hooks/use-breadcrumb";
+import { ScheduleForm, type ScheduleFormValue } from "../components/schedule-form";
+import { ApiPanel } from "../../components/api-panel";
+
+const INITIAL: ScheduleFormValue = {
+  kind: "signal",
+  target: "",
+  interval: "5m",
+  input: "{}",
+  enabled: true,
+};
+
+const INTERVAL_REGEX = /^(\d+)(ms|s|m|h|d|w)$/i;
+const UNIT_MS: Record<string, number> = {
+  ms: 1, s: 1000, m: 60_000, h: 3_600_000, d: 86_400_000, w: 604_800_000,
+};
+
+function parseIntervalLocal(s: string): number | null {
+  const m = INTERVAL_REGEX.exec(s.trim());
+  if (!m) return null;
+  return Number(m[1]) * UNIT_MS[m[2].toLowerCase()];
+}
+
+export default function NewSchedulePage() {
+  const api = useApi();
+  const router = useRouter();
+  const [value, setValue] = useState<ScheduleFormValue>(INITIAL);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useBreadcrumb(
+    [
+      { label: "Schedules", href: "/schedules" },
+      { label: "New" },
+    ],
+    "schedules",
+  );
+
+  // Compute the next 5 fire times locally so users can see the cadence
+  // before saving.
+  const previewFires = useMemo(() => {
+    const ms = parseIntervalLocal(value.interval);
+    if (ms === null || ms <= 0) return [];
+    const now = Date.now();
+    const out: string[] = [];
+    for (let i = 1; i <= 5; i++) {
+      out.push(new Date(now + ms * i).toISOString());
+    }
+    return out;
+  }, [value.interval]);
+
+  async function handleSave() {
+    setError(null);
+    if (!value.target) {
+      setError("Target is required.");
+      return;
+    }
+    let inputParsed: unknown = undefined;
+    if (value.input.trim()) {
+      try {
+        inputParsed = JSON.parse(value.input);
+      } catch (err) {
+        setError(`Input JSON parse error: ${err instanceof Error ? err.message : String(err)}`);
+        return;
+      }
+    }
+    setBusy(true);
+    try {
+      const res = await api.createSchedule({
+        kind: value.kind,
+        target: value.target,
+        interval: value.interval,
+        input: inputParsed,
+        enabled: value.enabled,
+      });
+      router.push(`/schedules/${res.data.id}`);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div>
+      <h1 className="page-title">New schedule</h1>
+
+      <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 2fr) minmax(0, 1fr)", gap: "2rem" }}>
+        <div>
+          <ScheduleForm value={value} onChange={setValue} />
+
+          {error && (
+            <div style={{
+              marginTop: "1rem",
+              padding: "0.625rem 0.75rem",
+              background: "var(--error-bg, #fee)",
+              color: "var(--error, #b00)",
+              border: "1px solid var(--error, #b00)",
+              borderRadius: "4px",
+              fontSize: "0.8125rem",
+              maxWidth: "640px",
+            }}>{error}</div>
+          )}
+
+          <div style={{ marginTop: "1.5rem", display: "flex", gap: "0.5rem" }}>
+            <button className="btn btn--primary" onClick={handleSave} disabled={busy}>
+              {busy ? "Creating..." : "Create schedule"}
+            </button>
+            <button className="btn" onClick={() => router.push("/schedules")}>Cancel</button>
+          </div>
+        </div>
+
+        <aside>
+          <h3 className="mono" style={{ fontSize: "0.75rem", color: "var(--muted)", textTransform: "uppercase", letterSpacing: "0.05em", marginBottom: "0.5rem" }}>
+            Next fire times (preview)
+          </h3>
+          {previewFires.length === 0 ? (
+            <div className="mono" style={{ fontSize: "0.75rem", color: "var(--error, #b00)" }}>
+              Invalid interval. Use formats like &quot;30s&quot;, &quot;5m&quot;, &quot;1h&quot;, &quot;1d&quot;, &quot;1w&quot;.
+            </div>
+          ) : (
+            <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
+              {previewFires.map((iso, i) => (
+                <li key={i} className="mono" style={{
+                  fontSize: "0.8125rem",
+                  padding: "0.375rem 0",
+                  borderBottom: "1px dashed var(--border)",
+                  color: i === 0 ? "var(--text)" : "var(--muted)",
+                }}>
+                  {new Date(iso).toLocaleString()}
+                </li>
+              ))}
+            </ul>
+          )}
+        </aside>
+      </div>
+
+      <ApiPanel
+        title="Create this schedule"
+        snippets={[
+          {
+            label: "POST /api/v1/schedules",
+            method: "POST",
+            path: "/api/v1/schedules",
+            body: {
+              kind: value.kind,
+              target: value.target,
+              interval: value.interval,
+              enabled: value.enabled,
+              input: tryParse(value.input),
+            },
+          },
+        ]}
+      />
+    </div>
+  );
+}
+
+function tryParse(s: string): unknown {
+  try { return JSON.parse(s); } catch { return s; }
+}

package/src/app/schedules/page.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useApi, type Schedule } from "../hooks/use-api";
+import { useBreadcrumb } from "../hooks/use-breadcrumb";
+import { ApiPanel } from "../components/api-panel";
+
+const KIND_LABEL: Record<Schedule["kind"], string> = {
+  signal: "Signal",
+  "broadcast-static": "Broadcast (file)",
+  "broadcast-dynamic": "Broadcast (dynamic)",
+};
+
+export default function SchedulesPage() {
+  const api = useApi();
+  const router = useRouter();
+  const [schedules, setSchedules] = useState<Schedule[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useBreadcrumb([{ label: "Schedules" }], "schedules");
+
+  useEffect(() => {
+    api.getSchedules()
+      .then((res) => setSchedules(res.data))
+      .catch((err) => setError(err instanceof Error ? err.message : String(err)))
+      .finally(() => setLoading(false));
+  }, []);
+
+  if (loading) {
+    return (
+      <div>
+        <h1 className="page-title">Schedules</h1>
+        <div className="loading-bar"><div className="loading-bar-fill" /></div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "1rem" }}>
+        <h1 className="page-title" style={{ margin: 0 }}>Schedules</h1>
+        <Link href="/schedules/new" className="btn btn--primary">+ New schedule</Link>
+      </div>
+
+      {error && (
+        <div style={{
+          marginBottom: "1rem",
+          padding: "0.625rem 0.75rem",
+          background: "var(--error-bg, #fee)",
+          color: "var(--error, #b00)",
+          borderRadius: "4px",
+          fontSize: "0.8125rem",
+        }}>{error}</div>
+      )}
+
+      {schedules.length === 0 ? (
+        <div className="empty-state">
+          <p className="empty-state-text">
+            No schedules yet. <Link href="/schedules/new">Create one</Link> to fire signals or broadcasts on intervals.
+          </p>
+        </div>
+      ) : (
+        <table className="station-table">
+          <thead>
+            <tr>
+              <th>Target</th>
+              <th>Kind</th>
+              <th>Interval</th>
+              <th>Next run</th>
+              <th>Last run</th>
+              <th>Status</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody>
+            {schedules.map((s) => (
+              <tr
+                key={s.id}
+                className="clickable-row"
+                onClick={() => router.push(`/schedules/${s.id}`)}
+              >
+                <td className="mono">{s.target}</td>
+                <td className="mono" style={{ fontSize: "0.75rem", color: "var(--muted)" }}>{KIND_LABEL[s.kind]}</td>
+                <td className="mono">{s.interval}</td>
+                <td className="mono" style={{ fontSize: "0.75rem", color: "var(--muted)" }}>
+                  {new Date(s.nextRunAt).toLocaleString()}
+                </td>
+                <td className="mono" style={{ fontSize: "0.75rem", color: "var(--muted)" }}>
+                  {s.lastRunAt ? new Date(s.lastRunAt).toLocaleString() : "—"}
+                </td>
+                <td className="mono" style={{ fontSize: "0.75rem" }}>
+                  <span style={{
+                    padding: "0.125rem 0.375rem",
+                    borderRadius: "3px",
+                    background: s.enabled ? "var(--success-bg, #efe)" : "var(--surface)",
+                    color: s.enabled ? "var(--success, #060)" : "var(--muted)",
+                  }}>
+                    {s.enabled ? "enabled" : "disabled"}
+                  </span>
+                </td>
+                <td></td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+
+      <ApiPanel
+        title="List & manage schedules"
+        snippets={[
+          { label: "List all", method: "GET", path: "/api/v1/schedules" },
+          { label: "List by kind", method: "GET", path: "/api/v1/schedules", query: { kind: "signal" } },
+          {
+            label: "Create",
+            method: "POST",
+            path: "/api/v1/schedules",
+            body: { kind: "signal", target: "<signalName>", interval: "5m", enabled: true, input: {} },
+          },
+        ]}
+      />
+    </div>
+  );
+}

package/src/config/schema.ts

@@ -1,10 +1,20 @@
 import type { SignalQueueAdapter } from "station-signal";
 import type { BroadcastQueueAdapter } from "station-broadcast";
+import type { ScheduleAdapter } from "station-schedules";
+import type { ApiKeyStorageAdapter } from "../server/auth/keys.js";
+import type { LogStorageAdapter } from "../server/log-store.js";
 
 export interface AuthConfig {
   username: string;
   password: string;
   sessionTtlMs?: number;
+  /**
+   * Pluggable storage backend for API keys. Defaults to a JSON file at
+   * `<dataDir>/station-keys.json` (no native dependencies required).
+   * Provide a custom adapter to host keys in SQLite, Postgres, MySQL,
+   * Redis, etc.
+   */
+  keyStorage?: ApiKeyStorageAdapter;
 }
 
 export interface RunnerConfig {
@@ -27,6 +37,19 @@ export interface StationConfig {
   host: string;
   adapter?: SignalQueueAdapter;
   broadcastAdapter?: BroadcastQueueAdapter;
+  /**
+   * Optional schedule storage adapter. When provided, runtime-editable
+   * schedules are persisted here and reconciled by both runners.
+   */
+  scheduleAdapter?: ScheduleAdapter;
+  /**
+   * Pluggable storage backend for run logs. Defaults to a `FileLogStorage`
+   * (append-only JSONL file at `<dataDir>/station-logs.jsonl`, no native
+   * dependencies). The default is single-process only — for multi-process
+   * deployments or guaranteed durability, implement `LogStorageAdapter`
+   * against Postgres, MySQL, Redis, S3, etc., and pass it here.
+   */
+  logStorage?: LogStorageAdapter;
   signalsDir?: string;
   broadcastsDir?: string;
   stationDir: string;
@@ -85,6 +108,8 @@ export function resolveConfig(input: StationUserConfig): StationConfig {
     host: input.host ?? envHost ?? DEFAULTS.host,
     adapter: input.adapter,
     broadcastAdapter: input.broadcastAdapter,
+    scheduleAdapter: input.scheduleAdapter,
+    logStorage: input.logStorage,
     signalsDir: input.signalsDir,
     broadcastsDir: input.broadcastsDir,
     stationDir: input.stationDir ?? DEFAULTS.stationDir,