aigetwey 1.0.1

package/dashboard/src/components/LogTable.tsx

@@ -0,0 +1,223 @@
+"use client";
+
+import { useState, useEffect, useRef, useCallback } from "react";
+import { Lamp } from "@/components/Lamp";
+import { Badge } from "@/components/Badge";
+import { Icon } from "@/components/Icon";
+import { fmt } from "@/components/ui";
+import type { UsageLog } from "@/lib/gateway";
+
+type StatusFilter = "all" | "ok" | "error";
+
+const FILTERS: { key: StatusFilter; label: string }[] = [
+  { key: "all", label: "All" },
+  { key: "ok", label: "Success" },
+  { key: "error", label: "Errors" },
+];
+
+export function LogTable({ logs: initial }: { logs: UsageLog[] }) {
+  const [logs, setLogs] = useState(initial);
+  const [filter, setFilter] = useState<StatusFilter>("all");
+  const [provFilter, setProvFilter] = useState<string>("all");
+  const [live, setLive] = useState(true);
+  const [expandedIdx, setExpandedIdx] = useState<number | null>(null);
+  const timer = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const refresh = useCallback(async () => {
+    try {
+      const res = await fetch("/api/gw/admin/logs?limit=200");
+      if (res.ok) {
+        const data = (await res.json()) as { logs: UsageLog[] };
+        setLogs(data.logs);
+      }
+    } catch { /* ignore */ }
+  }, []);
+
+  useEffect(() => {
+    if (live) {
+      timer.current = setInterval(refresh, 5000);
+      return () => { if (timer.current) clearInterval(timer.current); };
+    }
+    if (timer.current) clearInterval(timer.current);
+  }, [live, refresh]);
+
+  const providers = [...new Set(logs.map((l) => l.provider))].sort();
+
+  const okCount = logs.filter((l) => l.status >= 200 && l.status < 300).length;
+  const errCount = logs.length - okCount;
+
+  const shown = logs.filter((l) => {
+    if (filter === "ok" && !(l.status >= 200 && l.status < 300)) return false;
+    if (filter === "error" && l.status >= 200 && l.status < 300) return false;
+    if (provFilter !== "all" && l.provider !== provFilter) return false;
+    return true;
+  });
+
+  const count = (k: StatusFilter) => (k === "all" ? logs.length : k === "ok" ? okCount : errCount);
+
+  return (
+    <div className="overflow-hidden rounded-brand-lg border border-border bg-surface shadow-soft">
+      <header className="flex flex-wrap items-center justify-between gap-3 border-b border-border-subtle px-4 py-3">
+        <div className="flex items-center gap-1">
+          {FILTERS.map((f) => (
+            <button
+              key={f.key}
+              onClick={() => setFilter(f.key)}
+              className={`flex items-center gap-1.5 rounded-full px-3 py-1.5 text-[12px] font-medium transition-colors ${
+                filter === f.key ? "bg-surface-2 text-text" : "text-text-muted hover:text-text"
+              }`}
+            >
+              {f.label}
+              <span className="tnum text-text-subtle">{count(f.key)}</span>
+            </button>
+          ))}
+        </div>
+        <div className="flex items-center gap-2">
+          {providers.length > 1 && (
+            <select
+              value={provFilter}
+              onChange={(e) => setProvFilter(e.target.value)}
+              className="rounded border border-border-subtle bg-transparent px-2 py-1 text-[11px] text-text-muted focus:border-accent focus:outline-none"
+            >
+              <option value="all">All providers</option>
+              {providers.map((p) => (
+                <option key={p} value={p}>{p}</option>
+              ))}
+            </select>
+          )}
+          <button
+            onClick={() => setLive((v) => !v)}
+            className={`flex items-center gap-1 rounded-full px-2.5 py-1 text-[11px] font-medium transition-colors ${
+              live ? "bg-success/15 text-success" : "text-text-muted hover:text-text"
+            }`}
+            title={live ? "Auto-refresh ON (5s)" : "Auto-refresh OFF"}
+          >
+            <Icon name={live ? "radio_button_checked" : "radio_button_unchecked"} size={12} />
+            Live
+          </button>
+        </div>
+      </header>
+
+      {shown.length === 0 ? (
+        <div className="px-4 py-8 text-center text-[13px] text-text-muted">
+          {logs.length === 0 ? "No requests recorded yet." : "No requests match this filter."}
+        </div>
+      ) : (
+        <>
+          <div className="table-wrap">
+            <table className="w-full min-w-[720px] border-collapse">
+              <thead>
+                <tr className="text-text-subtle">
+                  {["Status", "Time", "Alias", "Provider", "Model", "In", "Out", "ms", "Mode"].map((h, i) => (
+                    <th
+                      key={h + i}
+                      className={`whitespace-nowrap px-4 pb-2.5 pt-3 text-[10px] font-medium uppercase tracking-wider ${
+                        i >= 5 && i <= 7 ? "text-right" : "text-left"
+                      }`}
+                    >
+                      {h}
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {shown.map((l, i) => {
+                  const ok = l.status >= 200 && l.status < 300;
+                  const isExpanded = expandedIdx === i;
+                  return (
+                    <tr key={i} onClick={() => setExpandedIdx(isExpanded ? null : i)} className={`border-t border-border-subtle cursor-pointer transition-colors ${isExpanded ? "bg-surface-2/60" : "hover:bg-surface-2/40"}`}>
+                      <Td>
+                        <Badge tone={ok ? "live" : "down"}>
+                          <Lamp state={ok ? "live" : "down"} />
+                          {l.status}
+                        </Badge>
+                      </Td>
+                      <Td muted title={fmt.time(l.ts)}>
+                        {fmt.ago(l.ts)} ago
+                      </Td>
+                      <Td className="text-text">{l.alias}</Td>
+                      <Td muted>{l.provider}</Td>
+                      <Td muted>{l.model}</Td>
+                      <Td right>{fmt.int(l.tokens_in)}</Td>
+                      <Td right>{fmt.int(l.tokens_out)}</Td>
+                      <Td right>{fmt.int(l.latency_ms)}</Td>
+                      <Td muted>{l.stream ? "stream" : "unary"}</Td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+
+          {expandedIdx !== null && shown[expandedIdx] && (
+            <RequestDetail log={shown[expandedIdx]} onClose={() => setExpandedIdx(null)} />
+          )}
+        </>
+      )}
+    </div>
+  );
+}
+
+function Td({
+  children,
+  muted,
+  right,
+  title,
+  className,
+}: {
+  children: React.ReactNode;
+  muted?: boolean;
+  right?: boolean;
+  title?: string;
+  className?: string;
+}) {
+  return (
+    <td
+      title={title}
+      className={`whitespace-nowrap px-4 py-2.5 tnum text-[12.5px] ${right ? "text-right" : "text-left"} ${
+        muted ? "text-text-muted" : "text-text"
+      }${className ? ` ${className}` : ""}`}
+    >
+      {children}
+    </td>
+  );
+}
+
+function RequestDetail({ log, onClose }: { log: UsageLog; onClose: () => void }) {
+  const ok = log.status >= 200 && log.status < 300;
+  const totalTokens = log.tokens_in + log.tokens_out;
+
+  return (
+    <div className="border-t border-border-subtle bg-surface-2/40 px-5 py-4">
+      <div className="mb-3 flex items-center justify-between">
+        <span className="text-[12px] font-semibold text-text">Request Details</span>
+        <button onClick={onClose} className="text-text-subtle hover:text-text">
+          <Icon name="close" size={16} />
+        </button>
+      </div>
+      <div className="grid grid-cols-2 gap-x-8 gap-y-2 text-[12px] sm:grid-cols-4">
+        <DetailCell label="Status" value={`${log.status} ${ok ? "OK" : "Error"}`} />
+        <DetailCell label="Timestamp" value={new Date(log.ts).toLocaleString()} />
+        <DetailCell label="Alias" value={log.alias} />
+        <DetailCell label="Provider" value={log.provider} />
+        <DetailCell label="Model" value={log.model} />
+        <DetailCell label="Mode" value={log.stream ? "Streaming" : "Unary"} />
+        <DetailCell label="Latency" value={`${log.latency_ms}ms`} />
+        <DetailCell label="Cost" value={fmt.cost(log.cost)} />
+        <DetailCell label="Input tokens" value={fmt.int(log.tokens_in)} />
+        <DetailCell label="Output tokens" value={fmt.int(log.tokens_out)} />
+        <DetailCell label="Cached tokens" value={fmt.int(log.cached_tokens)} />
+        <DetailCell label="Total tokens" value={fmt.int(totalTokens)} />
+      </div>
+    </div>
+  );
+}
+
+function DetailCell({ label, value }: { label: string; value: string }) {
+  return (
+    <div>
+      <span className="text-[10px] uppercase tracking-wider text-text-subtle">{label}</span>
+      <div className="tnum text-text">{value}</div>
+    </div>
+  );
+}

package/dashboard/src/components/LogoutButton.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { Button } from "./Button";
+import { Icon } from "./Icon";
+
+export function LogoutButton() {
+  const router = useRouter();
+  async function logout() {
+    await fetch("/api/logout", { method: "POST" });
+    router.replace("/login");
+    router.refresh();
+  }
+  return (
+    <Button variant="ghost" onClick={logout} className="w-full">
+      <Icon name="logout" size={17} />
+      Disconnect
+    </Button>
+  );
+}

package/dashboard/src/components/ModelPicker.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { useState } from "react";
+import { Icon } from "@/components/Icon";
+import { CapacityBadges } from "@/components/CapacityBadges";
+
+export interface ModelGroup {
+  label: string;
+  items: { value: string; label: string; tag?: string }[];
+}
+
+/**
+ * aigetwey-style model picker: a search box + provider-grouped chips you click to
+ * toggle in/out of a selection. Used by the combo form and the CLI-tool model
+ * selection so both add models the same way (click to add, click again to drop).
+ */
+export function ModelPicker({
+  title = "Add models",
+  note = "Click to add, click again to remove.",
+  groups,
+  selected,
+  onToggle,
+  onClose,
+}: {
+  title?: string;
+  note?: string;
+  groups: ModelGroup[];
+  selected: string[];
+  onToggle: (value: string) => void;
+  onClose: () => void;
+}) {
+  const [q, setQ] = useState("");
+  const needle = q.trim().toLowerCase();
+  const filtered = groups
+    .map((g) => ({
+      ...g,
+      items: needle ? g.items.filter((i) => i.value.toLowerCase().includes(needle)) : g.items,
+    }))
+    .filter((g) => g.items.length > 0);
+  const sel = new Set(selected);
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-black/60 p-6 sm:p-10" onClick={onClose}>
+      <div
+        className="flex max-h-[80vh] w-full max-w-lg flex-col rounded-brand-lg border border-border bg-surface shadow-elevated"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center justify-between border-b border-border-subtle px-4 py-3">
+          <h2 className="text-[14px] font-semibold text-text">{title}</h2>
+          <button onClick={onClose} className="text-text-subtle hover:text-text" aria-label="Close">
+            <Icon name="close" size={18} />
+          </button>
+        </div>
+
+        <div className="border-b border-border-subtle px-4 py-3">
+          <p className="mb-2 text-[12px] text-text-muted">{note}</p>
+          <div className="relative">
+            <Icon name="search" size={15} className="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-text-subtle" />
+            <input
+              autoFocus
+              value={q}
+              onChange={(e) => setQ(e.target.value)}
+              placeholder="Search models…"
+              className="w-full rounded-brand border border-border bg-bg py-2 pl-8 pr-3 text-[13px] text-text placeholder:text-text-subtle focus:border-accent focus:outline-none"
+            />
+          </div>
+        </div>
+
+        <div className="flex-1 overflow-y-auto px-4 py-3">
+          {filtered.length === 0 ? (
+            <p className="py-6 text-center text-[12.5px] text-text-subtle">No models match “{q}”.</p>
+          ) : (
+            <div className="space-y-4">
+              {filtered.map((g) => (
+                <div key={g.label}>
+                  <div className="mb-1.5 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-text-subtle">
+                    {g.label} <span className="tnum text-text-subtle/70">({g.items.length})</span>
+                  </div>
+                  <div className="flex flex-wrap gap-1.5">
+                    {g.items.map((it) => {
+                      const on = sel.has(it.value);
+                      return (
+                        <button
+                          key={it.value}
+                          type="button"
+                          onClick={() => onToggle(it.value)}
+                          className={`inline-flex items-center gap-1 rounded-brand border px-2 py-1 text-[12px] transition-colors ${
+                            on ? "border-accent bg-accent-soft text-accent" : "border-border bg-bg text-text-muted hover:border-text-subtle hover:text-text"
+                          }`}
+                        >
+                          {on && <Icon name="check" size={12} />}
+                          <span className="tnum">{it.label}</span>
+                          <CapacityBadges model={it.value} size={13} />
+                          {it.tag && <span className="rounded bg-surface-2 px-1 text-[10px] text-text-subtle">{it.tag}</span>}
+                        </button>
+                      );
+                    })}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        <div className="border-t border-border-subtle px-4 py-2 text-[11px] text-text-subtle">
+          <Icon name="neurology" size={12} className="mr-1 inline align-text-bottom text-warning" />
+          Reasoning models accept a thinking suffix — call{" "}
+          <code className="rounded bg-surface-2 px-1 text-text-muted">model(high)</code> or{" "}
+          <code className="rounded bg-surface-2 px-1 text-text-muted">model(none)</code> (high·low·medium·minimal·auto·none·or a token budget).
+        </div>
+
+        <div className="flex items-center justify-between border-t border-border-subtle px-4 py-3">
+          <span className="tnum text-[12px] text-text-subtle">{selected.length} selected</span>
+          <button onClick={onClose} className="rounded-brand bg-accent px-3.5 py-1.5 text-[13px] font-semibold text-accent-ink hover:bg-accent-hover">
+            Done
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/dashboard/src/components/ModelSelectModal.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import { Button, Input } from "@/components/Button";
+import { Checkbox } from "@/components/Checkbox";
+import { Icon } from "@/components/Icon";
+
+export interface DiscoveredModel {
+  id: string;
+  added: boolean; // already in the provider catalog
+}
+
+/**
+ * Pick which discovered models to add. Free providers can return hundreds of
+ * ids, so this is a filterable checklist (defaulting to only the not-yet-added
+ * ones selected) rather than dumping everything into the catalog.
+ */
+export function ModelSelectModal({
+  models,
+  busy,
+  onAdd,
+  onClose,
+}: {
+  models: DiscoveredModel[];
+  busy: boolean;
+  onAdd: (ids: string[]) => void;
+  onClose: () => void;
+}) {
+  const [filter, setFilter] = useState("");
+  const [picked, setPicked] = useState<Set<string>>(() => new Set(models.filter((m) => !m.added).map((m) => m.id)));
+
+  const shown = useMemo(() => {
+    const q = filter.trim().toLowerCase();
+    return q ? models.filter((m) => m.id.toLowerCase().includes(q)) : models;
+  }, [models, filter]);
+
+  function toggle(id: string) {
+    setPicked((s) => {
+      const next = new Set(s);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }
+
+  const shownPickedCount = shown.filter((m) => picked.has(m.id)).length;
+  const allShownPicked = shown.length > 0 && shownPickedCount === shown.length;
+  const someShownPicked = shownPickedCount > 0 && !allShownPicked;
+  function toggleAllShown() {
+    setPicked((s) => {
+      const next = new Set(s);
+      if (allShownPicked) shown.forEach((m) => next.delete(m.id));
+      else shown.forEach((m) => next.add(m.id));
+      return next;
+    });
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 grid place-items-center bg-black/50 p-6" onClick={onClose}>
+      <div
+        className="flex max-h-[80vh] w-full max-w-[480px] flex-col overflow-hidden rounded-brand-lg border border-border bg-surface shadow-elevated"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <header className="flex items-center justify-between border-b border-border-subtle px-4 py-3">
+          <span className="text-[14px] font-semibold text-text">{models.length} models found</span>
+          <button onClick={onClose} className="text-text-subtle hover:text-text" aria-label="Close">
+            <Icon name="close" size={18} />
+          </button>
+        </header>
+
+        <div className="border-b border-border-subtle px-4 py-2.5">
+          <Input value={filter} onChange={(e) => setFilter(e.target.value)} placeholder="filter…" autoFocus />
+        </div>
+
+        {/* select-all row: an obvious clickable control, not an ambiguous button */}
+        {shown.length > 0 && (
+          <button
+            onClick={toggleAllShown}
+            className="flex items-center gap-2.5 border-b border-border-subtle px-4 py-2 text-left hover:bg-surface-2"
+          >
+            <Checkbox checked={allShownPicked} indeterminate={someShownPicked} onChange={toggleAllShown} ariaLabel="Select all" />
+            <span className="text-[12.5px] font-medium text-text">Select all{filter ? " (filtered)" : ""}</span>
+            <span className="ml-auto tnum text-[11px] text-text-subtle">
+              {shownPickedCount}/{shown.length}
+            </span>
+          </button>
+        )}
+
+        <div className="flex-1 overflow-y-auto px-2 py-2">
+          {shown.length === 0 ? (
+            <div className="px-2 py-6 text-center text-[13px] text-text-muted">No matches.</div>
+          ) : (
+            shown.map((m) => {
+              const sel = picked.has(m.id);
+              return (
+                <button
+                  key={m.id}
+                  onClick={() => toggle(m.id)}
+                  className={`flex w-full items-center gap-2.5 rounded-brand border px-2.5 py-2 text-left transition-colors ${
+                    sel ? "border-accent/40 bg-accent-soft" : "border-transparent hover:bg-surface-2"
+                  }`}
+                >
+                  <Checkbox checked={sel} onChange={() => toggle(m.id)} ariaLabel={m.id} />
+                  <span className="flex-1 truncate text-[12.5px] text-text">{m.id}</span>
+                  {m.added && <span className="text-[11px] text-text-subtle">in catalog</span>}
+                </button>
+              );
+            })
+          )}
+        </div>
+
+        <footer className="flex items-center justify-between gap-3 border-t border-border-subtle bg-bg-alt px-4 py-2.5">
+          <span className="tnum text-[12px] text-text-muted">{picked.size} selected</span>
+          <div className="flex gap-2">
+            <Button variant="ghost" onClick={onClose}>
+              Cancel
+            </Button>
+            <Button disabled={picked.size === 0 || busy} onClick={() => onAdd([...picked])}>
+              {busy ? "Adding…" : `Add ${picked.size}`}
+            </Button>
+          </div>
+        </footer>
+      </div>
+    </div>
+  );
+}

package/dashboard/src/components/PasswordEditor.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { useState } from "react";
+import { RichCard, CardTitle } from "@/components/RichCard";
+import { Button } from "@/components/Button";
+import { Icon } from "@/components/Icon";
+import { account } from "@/lib/client";
+
+/**
+ * Change the admin password (used for the dashboard login and the gateway's
+ * /admin API). The gateway verifies the current password and stores the new one
+ * hashed; this browser's session is refreshed so you stay logged in.
+ */
+export function PasswordEditor() {
+  const [current, setCurrent] = useState("");
+  const [next, setNext] = useState("");
+  const [confirm, setConfirm] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [msg, setMsg] = useState("");
+  const [err, setErr] = useState("");
+
+  async function save() {
+    setErr("");
+    setMsg("");
+    if (next !== confirm) {
+      setErr("new password and confirmation don't match");
+      return;
+    }
+    if (next.length < 4) {
+      setErr("new password must be at least 4 characters");
+      return;
+    }
+    setBusy(true);
+    const r = await account.changePassword(current, next);
+    setBusy(false);
+    if (!r.ok) {
+      setErr(r.error ?? "could not change password");
+      return;
+    }
+    setCurrent("");
+    setNext("");
+    setConfirm("");
+    setMsg("Password changed ✓ — it's active now.");
+  }
+
+  const field = "w-full max-w-[280px] rounded-brand border border-border bg-bg px-2.5 py-1.5 text-[13px] text-text focus:border-accent focus:outline-none";
+
+  return (
+    <RichCard header={<CardTitle title="Admin password" sub="for the dashboard login + the gateway admin API" />}>
+      <div className="space-y-2.5">
+        <Row label="Current">
+          <input type="password" value={current} onChange={(e) => setCurrent(e.target.value)} className={field} autoComplete="current-password" />
+        </Row>
+        <Row label="New">
+          <input type="password" value={next} onChange={(e) => setNext(e.target.value)} className={field} autoComplete="new-password" />
+        </Row>
+        <Row label="Confirm">
+          <input type="password" value={confirm} onChange={(e) => setConfirm(e.target.value)} className={field} autoComplete="new-password" />
+        </Row>
+        <div className="flex items-center gap-2 pt-1">
+          <Button disabled={busy || !current || !next} onClick={save}>
+            {busy ? "Saving…" : "Change password"}
+          </Button>
+          {msg && (
+            <span className="flex items-center gap-1 text-[12px] text-success">
+              <Icon name="check" size={14} /> {msg}
+            </span>
+          )}
+          {err && <span className="text-[12px] text-danger">{err}</span>}
+        </div>
+        <p className="text-[11.5px] text-text-subtle">
+          The default is the one from <span className="tnum">AIGETWEY_ADMIN_PASSWORD</span> (or <span className="tnum">123456</span>). Changing it here is optional and takes effect immediately.
+        </p>
+      </div>
+    </RichCard>
+  );
+}
+
+function Row({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="flex items-center justify-between gap-3">
+      <span className="text-[12px] font-medium text-text-subtle">{label}</span>
+      {children}
+    </div>
+  );
+}