aigetwey 1.4.2 → 1.4.4

package/dashboard/src/components/LogTable.tsx

@@ -1,298 +0,0 @@
-"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" },
-];
-
-// shared control style for the filter row — bordered surface chip, accent on focus.
-const ctrl = "h-9 rounded-brand border border-border bg-surface-2 px-2.5 text-[12.5px] text-text focus:border-accent focus:outline-none";
-
-// recency presets for the request log (a live 200-row buffer, so relative
-// windows fit better than absolute dates). null = no time filter.
-const SINCE_PRESETS: { label: string; ms: number | null }[] = [
-  { label: "1h", ms: 3600_000 },
-  { label: "6h", ms: 6 * 3600_000 },
-  { label: "24h", ms: 24 * 3600_000 },
-  { label: "7d", ms: 7 * 86400_000 },
-  { label: "All", ms: null },
-];
-const sincePill = (active: boolean): string =>
-  `rounded-full px-2.5 py-1 text-[12px] font-medium transition-colors ${
-    active ? "bg-accent/15 text-accent" : "text-text-muted hover:text-text"
-  }`;
-
-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 [sinceMs, setSinceMs] = useState<number | null>(null);
-  const [live, setLive] = useState(true);
-  const [collapsed, setCollapsed] = useState(false);
-  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 sinceFloor = sinceMs !== null ? Date.now() - sinceMs : null;
-
-  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;
-    if (sinceFloor !== null && l.ts < sinceFloor) return false;
-    return true;
-  });
-
-  const hasFilters = filter !== "all" || provFilter !== "all" || sinceMs !== null;
-  const clearFilters = () => { setFilter("all"); setProvFilter("all"); setSinceMs(null); };
-
-  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-col gap-3 border-b border-border-subtle px-4 py-3">
-        <div className="flex flex-wrap items-center justify-between gap-3">
-          <div className="flex items-center gap-1.5">
-            <button
-              onClick={() => setCollapsed((v) => !v)}
-              className="flex-none rounded p-0.5 text-text-subtle transition-colors hover:text-text"
-              aria-label={collapsed ? "Expand requests" : "Collapse requests"}
-              title={collapsed ? "Expand" : "Collapse"}
-            >
-              <Icon name={collapsed ? "chevron_right" : "expand_more"} size={18} />
-            </button>
-            <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>
-          <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>
-
-        {!collapsed && (
-          <div className="flex flex-wrap items-end gap-2.5">
-            <FilterField label="Provider">
-              <select
-                value={provFilter}
-                onChange={(e) => setProvFilter(e.target.value)}
-                className={ctrl + " w-40"}
-              >
-                <option value="all">All providers</option>
-                {providers.map((p) => (
-                  <option key={p} value={p}>{p}</option>
-                ))}
-              </select>
-            </FilterField>
-            <FilterField label="Since">
-              <div className="flex h-9 items-center gap-0.5 rounded-brand border border-border bg-surface-2 px-1">
-                {SINCE_PRESETS.map((p) => (
-                  <button
-                    key={p.label}
-                    type="button"
-                    onClick={() => setSinceMs(p.ms)}
-                    className={sincePill(sinceMs === p.ms)}
-                  >
-                    {p.label}
-                  </button>
-                ))}
-              </div>
-            </FilterField>
-            <button
-              onClick={clearFilters}
-              disabled={!hasFilters}
-              className="flex h-9 items-center gap-1.5 rounded-brand border border-border bg-surface-2 px-3 text-[12.5px] font-medium text-text-muted transition-colors hover:border-text-subtle hover:text-text disabled:opacity-40 disabled:hover:border-border disabled:hover:text-text-muted"
-              title={hasFilters ? "Reset all filters" : "No filters applied"}
-            >
-              <Icon name="filter_alt_off" size={15} />
-              Clear
-            </button>
-          </div>
-        )}
-      </header>
-
-      {collapsed ? null : 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/70"}`}>
-                      <Td>
-                        <Badge tone={ok ? "live" : "down"}>
-                          <Lamp state={ok ? "live" : "down"} />
-                          {l.status}
-                        </Badge>
-                      </Td>
-                      <Td muted title={fmt.time(l.ts)} suppressHydrationWarning>
-                        {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 FilterField({ label, children }: { label: string; children: React.ReactNode }) {
-  return (
-    <label className="flex flex-col gap-1">
-      <span className="text-[10px] font-medium uppercase tracking-wider text-text-subtle">{label}</span>
-      {children}
-    </label>
-  );
-}
-
-function Td({
-  children,
-  muted,
-  right,
-  title,
-  className,
-  suppressHydrationWarning,
-}: {
-  children: React.ReactNode;
-  muted?: boolean;
-  right?: boolean;
-  title?: string;
-  className?: string;
-  suppressHydrationWarning?: boolean;
-}) {
-  return (
-    <td
-      title={title}
-      suppressHydrationWarning={suppressHydrationWarning}
-      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

@@ -1,20 +0,0 @@
-"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

@@ -1,129 +0,0 @@
-"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.",
-  searchPlaceholder = "Search models…",
-  groups,
-  selected,
-  onToggle,
-  onClose,
-  showThinkingHint = true,
-}: {
-  title?: string;
-  note?: string;
-  searchPlaceholder?: string;
-  groups: ModelGroup[];
-  selected: string[];
-  onToggle: (value: string) => void;
-  onClose: () => void;
-  /** The "reasoning models accept a thinking suffix" footer only makes sense when
-   *  picking MODELS. Provider/key pickers reuse this component, so they hide it. */
-  showThinkingHint?: boolean;
-}) {
-  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={searchPlaceholder}
-              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>
-
-        {showThinkingHint && (
-          <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

@@ -1,126 +0,0 @@
-"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

@@ -1,86 +0,0 @@
-"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>
-  );
-}