aigetwey 1.0.1

package/dashboard/src/components/Checkbox.tsx

@@ -0,0 +1,40 @@
+import { Icon } from "./Icon";
+
+/**
+ * Themed checkbox. Native checkboxes look out of place on the dark Haulix
+ * surface, so this is a button styled to match: filled with the accent + a
+ * check glyph when on, a bordered box when off. `indeterminate` renders a dash
+ * for "some selected" (drives the select-all row).
+ */
+export function Checkbox({
+  checked,
+  indeterminate,
+  onChange,
+  className,
+  ariaLabel,
+}: {
+  checked: boolean;
+  indeterminate?: boolean;
+  onChange: () => void;
+  className?: string;
+  ariaLabel?: string;
+}) {
+  const on = checked || indeterminate;
+  return (
+    <button
+      type="button"
+      role="checkbox"
+      aria-checked={indeterminate ? "mixed" : checked}
+      aria-label={ariaLabel}
+      onClick={(e) => {
+        e.stopPropagation();
+        onChange();
+      }}
+      className={`flex h-[18px] w-[18px] flex-none items-center justify-center rounded-[5px] border transition-colors ${
+        on ? "border-accent bg-accent text-accent-ink" : "border-border bg-bg text-transparent hover:border-text-subtle"
+      }${className ? ` ${className}` : ""}`}
+    >
+      <Icon name={indeterminate ? "remove" : "check"} size={13} />
+    </button>
+  );
+}

package/dashboard/src/components/CliToolConfig.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { Badge } from "@/components/Badge";
+import { Icon } from "@/components/Icon";
+import { Empty } from "@/components/ui";
+import { CLI_TOOLS } from "@/lib/cliTools";
+import type { EndpointPayload } from "@/lib/gateway";
+
+/** Grid of CLI tool setup cards. Each links to a step-by-step detail page. */
+export function CliToolConfig() {
+  const [port, setPort] = useState<number | null>(null);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    void (async () => {
+      const res = await fetch("/api/gw/admin/endpoint");
+      if (!res.ok) {
+        setError("could not reach the gateway");
+        return;
+      }
+      setPort(((await res.json()) as EndpointPayload).port);
+    })();
+  }, []);
+
+  if (error) return <Empty>{error}</Empty>;
+
+  return (
+    <div>
+      <div className="mb-6">
+        <h1 className="text-[22px] font-semibold tracking-tight text-text">CLI Tools</h1>
+        <p className="mt-1 text-[13px] text-text-muted">
+          Point your coding tools at the gateway. {port ? `Listening on port ${port}.` : ""}
+        </p>
+      </div>
+
+      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+        {CLI_TOOLS.map((t) => (
+          <Link
+            key={t.id}
+            href={`/tools/${t.id}`}
+            className="group rounded-brand-lg border border-border bg-surface p-4 shadow-soft transition-colors hover:border-text-subtle"
+          >
+            <div className="flex items-center justify-between gap-2">
+              <span className="flex items-center gap-2.5">
+                <span className="flex h-8 w-8 items-center justify-center rounded-brand bg-surface-2 text-text-muted group-hover:text-text">
+                  <Icon name={t.icon} size={18} />
+                </span>
+                <span className="text-[14px] font-semibold text-text">{t.name}</span>
+              </span>
+              <Badge tone="info">{t.format}</Badge>
+            </div>
+            <p className="mt-2 text-[12.5px] text-text-muted">{t.blurb}</p>
+            <span className="mt-3 inline-flex items-center gap-1 text-[12px] text-text-subtle group-hover:text-text">
+              Setup <Icon name="arrow_forward" size={14} />
+            </span>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}

package/dashboard/src/components/ConfigEditor.tsx

@@ -0,0 +1,199 @@
+"use client";
+
+import { useEffect, useState, useCallback, useRef } from "react";
+import { Button } from "@/components/Button";
+import { Badge } from "@/components/Badge";
+import { RichCard, CardTitle } from "@/components/RichCard";
+import { Icon } from "@/components/Icon";
+import { Empty } from "@/components/ui";
+import { PricingEditor } from "@/components/PricingEditor";
+import { PasswordEditor } from "@/components/PasswordEditor";
+import { stringify } from "yaml";
+import type { MaskedConfig } from "@/lib/gateway";
+
+/**
+ * Settings — structured cards (instance summary, per-model pricing, backup) with
+ * the raw config editor tucked into an Advanced disclosure. Saving the YAML
+ * re-validates (zod) and hot-reloads on the gateway; an invalid edit is rejected
+ * with the message and the live config keeps serving. Masked keys (sk-…1234) left
+ * unchanged are restored server-side.
+ */
+export function ConfigEditor() {
+  const [text, setText] = useState("");
+  const [original, setOriginal] = useState("");
+  const [info, setInfo] = useState<MaskedConfig["server"] | null>(null);
+  const [error, setError] = useState("");
+  const [saved, setSaved] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [loading, setLoading] = useState(true);
+
+  const reload = useCallback(async () => {
+    setLoading(true);
+    const res = await fetch("/api/gw/admin/config");
+    if (!res.ok) {
+      setError("could not reach the gateway");
+      setLoading(false);
+      return;
+    }
+    const cfg = (await res.json()) as MaskedConfig;
+    const yaml = stringify(cfg);
+    setText(yaml);
+    setOriginal(yaml);
+    setInfo(cfg.server);
+    setError("");
+    setLoading(false);
+  }, []);
+
+  useEffect(() => {
+    void reload();
+  }, [reload]);
+
+  async function save() {
+    setBusy(true);
+    setError("");
+    setSaved(false);
+    const res = await fetch("/api/gw/admin/config", {
+      method: "PUT",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ text }),
+    });
+    setBusy(false);
+    if (res.ok) {
+      setSaved(true);
+      setTimeout(() => setSaved(false), 2000);
+      await reload();
+    } else {
+      const body = (await res.json().catch(() => ({}))) as { error?: string };
+      setError(body.error ?? "validation failed");
+    }
+  }
+
+  const fileInput = useRef<HTMLInputElement>(null);
+
+  // Export the UNMASKED backup straight through the proxy. The download attribute
+  // forces a save with our filename even though the proxy labels it as JSON.
+  function exportConfig() {
+    const a = document.createElement("a");
+    a.href = "/api/gw/admin/config/export";
+    a.download = "aigetwey-config.yaml";
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+  }
+
+  // Load a backup file INTO the editor (not a blind apply) so it goes through the
+  // same validate + hot-reload path on Save, and the operator reviews it first.
+  async function importFile(e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    e.target.value = "";
+    if (!file) return;
+    setText(await file.text());
+    setError("");
+  }
+
+  const dirty = text !== original;
+  const keyCount = info?.api_keys.length ?? 0;
+
+  return (
+    <div>
+      <div className="mb-6">
+        <h1 className="text-[22px] font-semibold tracking-tight text-text">Settings</h1>
+        <p className="mt-1 text-[13px] text-text-muted">Instance details, model pricing, and backup.</p>
+      </div>
+
+      <div className="grid gap-4">
+        <RichCard header={<CardTitle title="Instance" sub="read-only" />}>
+          {info ? (
+            <div className="space-y-2.5 text-[13px]">
+              <Row label="Listen address">
+                <span className="tnum text-text">{info.host}:{info.port}</span>
+              </Row>
+              <Row label="Gateway auth">
+                <Badge tone={keyCount > 0 ? "live" : "warn"}>
+                  {keyCount > 0 ? `${keyCount} key${keyCount > 1 ? "s" : ""}` : "disabled (localhost only)"}
+                </Badge>
+              </Row>
+              <Row label="Admin password">
+                <span className="text-text-subtle">seeded from AIGETWEY_ADMIN_PASSWORD — change it below</span>
+              </Row>
+            </div>
+          ) : (
+            <Empty>Loading…</Empty>
+          )}
+        </RichCard>
+
+        <PasswordEditor />
+
+        <PricingEditor />
+
+        <RichCard
+          header={
+            <>
+              <CardTitle title="Backup" sub="full config including real keys" />
+              <div className="flex items-center gap-2">
+                <input ref={fileInput} type="file" accept=".yaml,.yml,.json,text/*" className="hidden" onChange={importFile} />
+                <Button variant="ghost" disabled={busy} onClick={exportConfig} title="Download the full config (includes real keys)">
+                  <Icon name="download" size={14} /> Export
+                </Button>
+                <Button variant="ghost" disabled={busy} onClick={() => fileInput.current?.click()} title="Load a backup file into the Advanced editor">
+                  <Icon name="upload" size={14} /> Import
+                </Button>
+              </div>
+            </>
+          }
+        >
+          <p className="text-[12.5px] text-text-muted">
+            Export downloads the live config as YAML with unmasked keys — keep it safe. Import loads a file into
+            the raw editor below for review; it only applies when you Save there.
+          </p>
+        </RichCard>
+
+        <details className="group overflow-hidden rounded-brand-lg border border-border bg-surface shadow-soft">
+          <summary className="flex cursor-pointer list-none items-center justify-between gap-3 px-4 py-3 [&::-webkit-details-marker]:hidden">
+            <CardTitle title="Advanced — raw config" sub="YAML, validated + hot-reloaded on save" />
+            <span className="flex items-center gap-2">
+              {dirty && <span className="text-[12px] text-warning">unsaved changes</span>}
+              {saved && (
+                <span className="flex items-center gap-1 text-[12px] text-success">
+                  <Icon name="check" size={14} /> saved
+                </span>
+              )}
+              <Icon name="expand_more" size={18} className="text-text-subtle transition-transform group-open:rotate-180" />
+            </span>
+          </summary>
+
+          <div className="border-t border-border-subtle p-4">
+            <div className="mb-3 flex items-center justify-end gap-2">
+              <Button variant="ghost" disabled={!dirty || busy} onClick={() => setText(original)}>Revert</Button>
+              <Button disabled={!dirty || busy} onClick={save}>{busy ? "Saving…" : "Save & reload"}</Button>
+            </div>
+            {error && (
+              <pre className="mb-3 overflow-x-auto whitespace-pre-wrap rounded-brand border border-danger/40 bg-danger/8 px-3 py-2 text-[12px] text-danger">
+                {error}
+              </pre>
+            )}
+            {loading ? (
+              <Empty>Loading…</Empty>
+            ) : (
+              <textarea
+                value={text}
+                onChange={(e) => setText(e.target.value)}
+                spellCheck={false}
+                className="h-[55vh] w-full resize-none rounded-brand border border-border bg-bg p-4 font-mono text-[12.5px] leading-relaxed text-text focus:border-accent focus:outline-none"
+              />
+            )}
+          </div>
+        </details>
+      </div>
+    </div>
+  );
+}
+
+function Row({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="flex items-center justify-between gap-3">
+      <span className="text-text-subtle">{label}</span>
+      {children}
+    </div>
+  );
+}

package/dashboard/src/components/ConfirmModal.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { Button } from "@/components/Button";
+import { Icon } from "@/components/Icon";
+
+interface ConfirmModalProps {
+  title: string;
+  message: string;
+  confirmLabel?: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+  busy?: boolean;
+}
+
+export function ConfirmModal({ title, message, confirmLabel = "Delete", onConfirm, onCancel, busy }: ConfirmModalProps) {
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-6" onClick={onCancel}>
+      <div
+        className="w-full max-w-sm rounded-brand-lg border border-border bg-surface p-5 shadow-elevated"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="mb-2 flex items-center gap-2">
+          <span className="flex h-7 w-7 items-center justify-center rounded-full bg-danger/10 text-danger">
+            <Icon name="warning" size={16} />
+          </span>
+          <h2 className="text-[15px] font-semibold text-text">{title}</h2>
+        </div>
+        <p className="mb-4 text-[12.5px] text-text-muted">{message}</p>
+        <div className="flex justify-end gap-2">
+          <Button variant="ghost" onClick={onCancel}>Cancel</Button>
+          <Button variant="danger" disabled={busy} onClick={onConfirm}>{confirmLabel}</Button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/dashboard/src/components/CooldownTimer.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Icon } from "./Icon";
+import { fmt } from "./ui";
+
+/**
+ * Live countdown from a gateway-snapshot remaining-ms. Counts down locally each
+ * second from render. Used for both key cooldowns (danger tone) and quota window
+ * resets (muted tone). Renders nothing once it hits zero unless `keepZero`.
+ */
+export function CooldownTimer({
+  ms,
+  tone = "danger",
+  icon = "timer",
+  keepZero = false,
+}: {
+  ms: number;
+  tone?: "danger" | "muted";
+  icon?: string;
+  keepZero?: boolean;
+}) {
+  const [until] = useState(() => Date.now() + ms);
+  const [remaining, setRemaining] = useState(() => Math.max(0, ms));
+
+  useEffect(() => {
+    const tick = () => setRemaining(Math.max(0, until - Date.now()));
+    tick();
+    const id = setInterval(tick, 1000);
+    return () => clearInterval(id);
+  }, [until]);
+
+  if (remaining <= 0 && !keepZero) return null;
+
+  const color = tone === "danger" ? "text-danger" : "text-text-muted";
+  return (
+    <span className={`inline-flex items-center gap-1 tnum text-[12px] ${color}`}>
+      <Icon name={icon} size={13} />
+      {remaining <= 0 ? "now" : fmt.duration(remaining)}
+    </span>
+  );
+}