aigetwey 1.4.2 → 1.4.4

package/dashboard/src/components/BudgetForm.tsx

@@ -1,256 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { adminApi } from "@/lib/client";
-import { Button, Input, Field } from "@/components/Button";
-import { Icon } from "@/components/Icon";
-import { ModelPicker, type ModelGroup } from "@/components/ModelPicker";
-import type { BudgetStatus, ModelsPayload } from "@/lib/gateway";
-
-const WINDOWS = ["5h", "24h", "7day", "30day"] as const;
-type ScopeType = "global" | "provider" | "model";
-
-/** Segment-pill button style — selected = accent, matches the Unit toggle. */
-const pill = (active: boolean): string =>
-  `rounded-brand px-3 py-1.5 text-[13px] font-medium transition-colors ${
-    active ? "bg-accent/12 text-accent" : "bg-surface-2 text-text-muted hover:text-text"
-  }`;
-
-/**
- * A labelled field group for BUTTON controls. Unlike `Field` (a <label>, which
- * forwards a pointer click to its first control and would swallow pill clicks),
- * this is a plain <div> so each pill button receives its own click.
- */
-function Group({ label, children }: { label: string; children: React.ReactNode }) {
-  return (
-    <div className="flex flex-col gap-1.5">
-      <span className="text-[11px] font-medium uppercase tracking-wider text-text-subtle">{label}</span>
-      {children}
-    </div>
-  );
-}
-
-const SCOPES: { id: ScopeType; icon: string; label: string; hint: string }[] = [
-  { id: "global", icon: "public", label: "Global", hint: "Cap total spend across the whole gateway." },
-  { id: "provider", icon: "dns", label: "Per provider", hint: "Cap one provider's spend." },
-  { id: "model", icon: "neurology", label: "Per model", hint: "Cap one upstream model's spend." },
-];
-
-/**
- * Inline Add / Edit panel for a scoped budget — same shape as the "Add a
- * provider" flow: step 1 picks the scope (card grid, add only), step 2 is the
- * field set. Editing jumps straight to step 2 with the scope locked (the scope
- * is the budget's identity); every other field stays editable.
- */
-export function BudgetForm({
-  initial,
-  onSaved,
-  onCancel,
-}: {
-  initial: BudgetStatus | null;
-  onSaved: () => void;
-  onCancel: () => void;
-}) {
-  const editing = initial !== null;
-  const [scopeType, setScopeType] = useState<ScopeType | null>(
-    initial && initial.scope.type !== "key" ? initial.scope.type : null,
-  );
-  const [scopeId, setScopeId] = useState(
-    initial && initial.scope.type !== "global" && initial.scope.type !== "key" ? initial.scope.id : "",
-  );
-  const [catalog, setCatalog] = useState<ModelsPayload | null>(null);
-  const [pickerOpen, setPickerOpen] = useState(false);
-  const [unit, setUnit] = useState<"usd" | "tokens">(initial?.unit ?? "usd");
-  const [limit, setLimit] = useState(String(initial?.limit ?? ""));
-  const [window, setWindow] = useState<(typeof WINDOWS)[number]>(initial?.window ?? "30day");
-  const [alertAt, setAlertAt] = useState(initial ? String(Math.round(initial.alert_at * 100)) : "80");
-  const [note, setNote] = useState(initial?.note ?? "");
-  const [error, setError] = useState("");
-  const [saving, setSaving] = useState(false);
-
-  useEffect(() => {
-    void adminApi.models().then((r) => { if (r.ok && r.data) setCatalog(r.data); });
-  }, []);
-
-  const providerGroups: ModelGroup[] = catalog?.providers.length
-    ? [{ label: "Providers", items: catalog.providers.map((p) => ({ value: p.id, label: p.id })) }]
-    : [];
-  // one entry per distinct upstream model id (a budget keys on usage.model), grouped by provider.
-  const modelGroups: ModelGroup[] = (catalog?.providers ?? [])
-    .filter((p) => p.models.length > 0)
-    .map((p) => ({ label: p.id, items: p.models.map((m) => ({ value: m.id, label: m.id })) }));
-  const scopeIdLabel = scopeId;
-
-  async function save() {
-    const limitNum = Number(limit);
-    if (!Number.isFinite(limitNum) || limitNum <= 0) return setError("limit must be a positive number");
-    const alertPct = Number(alertAt);
-    if (!Number.isFinite(alertPct) || alertPct <= 0 || alertPct > 100) return setError("alert % must be 1–100");
-    if (scopeType !== "global" && !scopeId.trim()) return setError(`pick a ${scopeType}`);
-    const scope =
-      scopeType === "global" ? { type: "global" as const } : { type: scopeType!, id: scopeId.trim() };
-    setSaving(true);
-    setError("");
-    try {
-      const r = await adminApi.setBudget({ scope, unit, limit: limitNum, window, alert_at: alertPct / 100, note: note.trim() || undefined });
-      if (!r.ok) return setError(r.error ?? "could not save budget");
-      onSaved();
-    } finally {
-      setSaving(false);
-    }
-  }
-
-  const panel = "mb-5 rounded-brand-lg border border-border bg-surface p-5 shadow-soft";
-
-  // step 1 (add only): pick the scope.
-  if (scopeType === null) {
-    return (
-      <div className={panel}>
-        <div className="flex items-start justify-between gap-3">
-          <div>
-            <h2 className="text-[14px] font-semibold text-text">Add a budget</h2>
-            <p className="mt-0.5 text-[12.5px] text-text-muted">Pick what this budget caps — the rest is one short form.</p>
-          </div>
-          <button type="button" onClick={onCancel} className="flex-none text-text-subtle hover:text-text" aria-label="Cancel">
-            <Icon name="close" size={18} />
-          </button>
-        </div>
-        <div className="mt-4 grid gap-3 sm:grid-cols-3">
-          {SCOPES.map((s) => (
-            <button
-              key={s.id}
-              type="button"
-              onClick={() => { setScopeType(s.id); setScopeId(""); }}
-              className="group flex items-start gap-3 rounded-brand-lg border border-border bg-bg p-4 text-left transition-colors hover:border-accent hover:bg-accent-soft"
-            >
-              <span className="flex h-10 w-10 flex-none items-center justify-center rounded-brand bg-surface-2 text-text-muted group-hover:text-accent">
-                <Icon name={s.icon} size={20} />
-              </span>
-              <span className="min-w-0">
-                <span className="block text-[13.5px] font-semibold text-text">{s.label}</span>
-                <span className="mt-1 block text-[11.5px] text-text-muted">{s.hint}</span>
-              </span>
-            </button>
-          ))}
-        </div>
-      </div>
-    );
-  }
-
-  const scopeMeta = SCOPES.find((s) => s.id === scopeType)!;
-
-  // step 2: the field set.
-  return (
-    <div className={panel}>
-      <div className="mb-4 flex items-center gap-2.5 border-b border-border-subtle pb-4">
-        <span className="flex h-8 w-8 items-center justify-center rounded-brand bg-surface-2 text-text-muted">
-          <Icon name={scopeMeta.icon} size={17} />
-        </span>
-        <div>
-          <div className="text-[13.5px] font-semibold text-text">{editing ? "Edit budget" : scopeMeta.label}</div>
-          <div className="tnum text-[11px] text-text-subtle">
-            {scopeType === "global" ? "whole gateway" : `${scopeType} · ${editing ? initial!.label : scopeIdLabel || "—"}`}
-          </div>
-        </div>
-        {editing ? null : (
-          <button
-            type="button"
-            onClick={() => { setScopeType(null); setError(""); }}
-            className="ml-auto inline-flex items-center gap-1 text-[12px] text-text-subtle hover:text-text"
-          >
-            <Icon name="arrow_back" size={14} /> change scope
-          </button>
-        )}
-      </div>
-
-      <div className="space-y-3">
-        {/* scope target — only when adding; editing locks the scope (shown in the header) */}
-        {!editing && scopeType !== "global" && (
-          <Group label={scopeType === "provider" ? "Provider" : scopeType === "model" ? "Model" : "API key"}>
-            <button
-              type="button"
-              onClick={() => setPickerOpen(true)}
-              className="flex w-full items-center justify-between rounded-brand border border-border bg-bg px-3 py-2 text-left text-[13px] transition-colors hover:border-accent"
-            >
-              <span className={scopeId ? "text-text" : "text-text-subtle"}>
-                {scopeId ? scopeIdLabel : scopeType === "provider" ? "Choose a provider…" : scopeType === "model" ? "Choose a model…" : "Choose an API key…"}
-              </span>
-              <Icon name="search" size={15} className="text-text-subtle" />
-            </button>
-          </Group>
-        )}
-
-        <Group label="Unit">
-          <div className="flex flex-wrap gap-2">
-            <button type="button" onClick={() => setUnit("usd")} className={pill(unit === "usd")}>USD</button>
-            <button type="button" onClick={() => setUnit("tokens")} className={pill(unit === "tokens")}>Tokens</button>
-          </div>
-        </Group>
-        <Field label="Limit" hint={unit === "usd" ? "$" : "tokens"}>
-          <Input value={limit} onChange={(e) => setLimit(e.target.value)} inputMode="decimal" placeholder={unit === "usd" ? "50.00" : "1000000"} />
-        </Field>
-        <Group label="Window">
-          <div className="flex flex-wrap gap-2">
-            {WINDOWS.map((w) => (
-              <button key={w} type="button" onClick={() => setWindow(w)} className={pill(window === w)}>{w}</button>
-            ))}
-          </div>
-        </Group>
-        <Group label="Alert at">
-          <div className="flex items-center gap-3">
-            <input
-              type="range"
-              min={0}
-              max={100}
-              step={1}
-              value={Math.max(0, Math.min(100, Number(alertAt) || 0))}
-              onChange={(e) => setAlertAt(e.target.value)}
-              className="range-accent flex-1"
-              style={{
-                background: `linear-gradient(to right, var(--color-accent) ${Math.max(0, Math.min(100, Number(alertAt) || 0))}%, var(--color-surface-2) ${Math.max(0, Math.min(100, Number(alertAt) || 0))}%)`,
-              }}
-              aria-label="Alert threshold percent"
-            />
-            <div className="relative w-16 flex-none">
-              <Input
-                value={alertAt}
-                onChange={(e) => {
-                  const v = e.target.value.replace(/[^\d]/g, "");
-                  if (v === "") return setAlertAt("");
-                  setAlertAt(String(Math.max(0, Math.min(100, Number(v)))));
-                }}
-                inputMode="numeric"
-                className="pr-5 text-center tnum"
-                aria-label="Alert threshold percent (type)"
-              />
-              <span className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-[12px] text-text-subtle">%</span>
-            </div>
-          </div>
-          <p className="text-[11px] text-text-subtle">Warn once spend crosses this share of the limit.</p>
-        </Group>
-        <Field label="Note" hint="optional">
-          <Input value={note} onChange={(e) => setNote(e.target.value)} maxLength={200} placeholder="e.g. client X cap" />
-        </Field>
-      </div>
-
-      {error && <div className="mt-2 text-[12px] text-danger">{error}</div>}
-      <div className="mt-4 flex justify-end gap-2">
-        <Button type="button" variant="ghost" onClick={onCancel}>Cancel</Button>
-        <Button type="button" disabled={saving} onClick={save}>{saving ? "Saving…" : editing ? "Save changes" : "Add budget"}</Button>
-      </div>
-
-      {pickerOpen && scopeType !== "global" && (
-        <ModelPicker
-          title={scopeType === "provider" ? "Select a provider" : "Select a model"}
-          note={`Click a ${scopeType} to scope this budget to it.`}
-          searchPlaceholder={scopeType === "provider" ? "Search providers…" : "Search models…"}
-          groups={scopeType === "provider" ? providerGroups : modelGroups}
-          selected={scopeId ? [scopeId] : []}
-          onToggle={(v) => { setScopeId(v); setPickerOpen(false); }}
-          onClose={() => setPickerOpen(false)}
-          showThinkingHint={scopeType === "model"}
-        />
-      )}
-    </div>
-  );
-}

package/dashboard/src/components/BudgetTracker.tsx

@@ -1,181 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { adminApi } from "@/lib/client";
-import { Badge } from "@/components/Badge";
-import { RichCard, CardTitle } from "@/components/RichCard";
-import { CooldownTimer } from "@/components/CooldownTimer";
-import { fmt, Empty } from "@/components/ui";
-import { BudgetForm } from "@/components/BudgetForm";
-import { Button } from "@/components/Button";
-import { Icon } from "@/components/Icon";
-import type { BudgetStatus, KeyUsageRow } from "@/lib/gateway";
-
-/**
- * Budget Tracker — scoped spend budgets (global / per-provider / per-model /
- * per-key) with an Add / Edit / Remove flow: consumption vs limit, a fill bar,
- * and a live reset countdown.
- */
-export function BudgetTracker() {
-  const [budgets, setBudgets] = useState<BudgetStatus[]>([]);
-  const [keys, setKeys] = useState<KeyUsageRow[]>([]);
-  const [loaded, setLoaded] = useState(false);
-  const [form, setForm] = useState<{ open: boolean; initial: BudgetStatus | null }>({ open: false, initial: null });
-  const [error, setError] = useState("");
-
-  const refresh = () => {
-    void adminApi.budgets().then((r) => {
-      if (!r.ok) setError(r.error ?? "could not reach the gateway");
-      else { setBudgets(r.data?.budgets ?? []); }
-      setLoaded(true);
-    });
-    void adminApi.keysUsage().then((r) => { if (r.ok) setKeys(r.data?.keys ?? []); });
-  };
-
-  useEffect(() => { refresh(); }, []);
-
-  if (error) return <Empty>{error}</Empty>;
-  if (!loaded) return <Empty>Loading...</Empty>;
-
-  return (
-    <div>
-      <div className="mb-6">
-        <h1 className="text-[22px] font-semibold tracking-tight text-text">Budgets</h1>
-        <p className="mt-1 text-[13px] text-text-muted">
-          Spend caps (USD or tokens) with live reset countdowns.
-        </p>
-      </div>
-
-      {/* -- Budgets -- */}
-      <div className="mb-6">
-        <div className="mb-3 flex items-center justify-between">
-          <h2 className="text-[15px] font-semibold text-text">Overall</h2>
-          {!form.open && (
-            <Button onClick={() => setForm({ open: true, initial: null })}>
-              <Icon name="add" size={16} /> Add budget
-            </Button>
-          )}
-        </div>
-
-        {form.open && (
-          <BudgetForm
-            key={form.initial?.key ?? "new"}
-            initial={form.initial}
-            onSaved={() => { setForm({ open: false, initial: null }); refresh(); }}
-            onCancel={() => setForm({ open: false, initial: null })}
-          />
-        )}
-
-        {budgets.filter((b) => b.scope.type !== "key").length === 0 ? (
-          !form.open && <Empty>No budgets yet. Add one to cap spend globally, per provider, or per model.</Empty>
-        ) : (
-          <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
-            {budgets.filter((b) => b.scope.type !== "key").map((b) => (
-              <RichCard
-                key={b.key}
-                header={
-                  <>
-                    <CardTitle title={b.label} sub={`${b.scope.type} · ${b.window}`} />
-                    <Badge tone={b.exhausted ? "down" : b.alert ? "warn" : "live"}>
-                      {b.exhausted ? "exhausted" : b.alert ? "alert" : "active"}
-                    </Badge>
-                  </>
-                }
-              >
-                <div className="space-y-2.5">
-                  {b.note && <p className="text-[12px] text-text-muted">{b.note}</p>}
-                  <div className="h-1.5 overflow-hidden rounded-full bg-surface-2">
-                    <div
-                      className={`h-full rounded-full transition-all ${b.exhausted ? "bg-danger" : b.alert ? "bg-warning" : "bg-accent"}`}
-                      style={{ width: `${Math.min(100, Math.round(b.pct * 100))}%` }}
-                    />
-                  </div>
-                  <div className="flex items-center justify-between text-[12px]">
-                    <span className="tnum text-text-muted">
-                      {b.unit === "usd"
-                        ? `$${b.spent.toFixed(2)} / $${b.limit.toFixed(2)}`
-                        : `${fmt.compact(b.spent)} / ${fmt.compact(b.limit)} tokens`}
-                      {b.est_converse != null
-                        ? b.unit === "usd" ? ` · ~${fmt.compact(b.est_converse)} tok` : ` · ~$${b.est_converse.toFixed(2)}`
-                        : " · —"}
-                    </span>
-                    <CooldownTimer ms={b.reset_in_ms} tone="muted" icon="restart_alt" keepZero />
-                  </div>
-                  <div className="flex items-center gap-2 border-t border-border-subtle pt-2.5">
-                    <Button variant="ghost" className="px-2.5 py-1 text-[12px]" onClick={() => setForm({ open: true, initial: b })}>
-                      <Icon name="edit" size={14} /> Edit
-                    </Button>
-                    <Button
-                      variant="danger"
-                      className="px-2.5 py-1 text-[12px]"
-                      onClick={async () => { const r = await adminApi.clearBudget(b.key); if (!r.ok) setError(r.error ?? "could not remove budget"); refresh(); }}
-                    >
-                      <Icon name="delete" size={14} /> Remove
-                    </Button>
-                  </div>
-                </div>
-              </RichCard>
-            ))}
-          </div>
-        )}
-      </div>
-
-      {/* -- Keys -- */}
-      <div>
-        <h2 className="mb-3 text-[15px] font-semibold text-text">Keys</h2>
-        {keys.length === 0 ? (
-          <Empty>No gateway keys yet. Add one on the Endpoint page.</Empty>
-        ) : (
-          <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
-            {keys.map((k) => (
-              <RichCard
-                key={k.fingerprint}
-                header={
-                  <>
-                    <CardTitle title={k.name} sub={k.budget ? `key · ${k.budget.window}` : "key · no limit"} />
-                    {k.expires && Date.now() > k.expires ? (
-                      <Badge tone="down">expired</Badge>
-                    ) : k.budget?.exhausted ? (
-                      <Badge tone="down">exhausted</Badge>
-                    ) : (
-                      <Badge tone="live">active</Badge>
-                    )}
-                  </>
-                }
-              >
-                <div className="space-y-2.5">
-                  {k.budget ? (
-                    <>
-                      <div className="h-1.5 overflow-hidden rounded-full bg-surface-2">
-                        <div
-                          className={`h-full rounded-full transition-all ${k.budget.exhausted ? "bg-danger" : k.budget.alert ? "bg-warning" : "bg-accent"}`}
-                          style={{ width: `${Math.min(100, Math.round(k.budget.pct * 100))}%` }}
-                        />
-                      </div>
-                      <div className="flex items-center justify-between text-[12px]">
-                        <span className="tnum text-text-muted">
-                          {k.budget.unit === "usd"
-                            ? `$${k.budget.spent.toFixed(2)} / $${k.budget.limit.toFixed(2)}`
-                            : `${fmt.compact(k.budget.spent)} / ${fmt.compact(k.budget.limit)} tokens`}
-                        </span>
-                        <CooldownTimer ms={k.budget.reset_in_ms} tone="muted" icon="restart_alt" keepZero />
-                      </div>
-                    </>
-                  ) : (
-                    <div className="flex items-center justify-between text-[12px]">
-                      <span className="tnum text-text-muted">${k.spent.toFixed(2)} spent</span>
-                      <span className="text-text-subtle">no limit</span>
-                    </div>
-                  )}
-                  <div className="text-[11px] text-text-subtle">
-                    {k.expires ? `expires ${fmt.date(k.expires)}` : "no expiry"}
-                  </div>
-                </div>
-              </RichCard>
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

package/dashboard/src/components/Button.tsx

@@ -1,60 +0,0 @@
-import type { ButtonHTMLAttributes } from "react";
-
-type Variant = "primary" | "ghost" | "danger";
-
-const VARIANTS: Record<Variant, string> = {
-  primary: "bg-accent text-accent-ink shadow-warm hover:bg-accent-hover border border-transparent font-semibold",
-  ghost: "bg-transparent text-text-muted border border-border hover:text-text hover:border-text-subtle",
-  danger: "bg-transparent text-text-muted border border-border hover:text-danger hover:border-danger/50",
-};
-
-export function Button({
-  variant = "primary",
-  className,
-  ...props
-}: ButtonHTMLAttributes<HTMLButtonElement> & { variant?: Variant }) {
-  return (
-    <button
-      className={`inline-flex items-center justify-center gap-1.5 rounded-brand px-3.5 py-2 text-[13px] font-medium transition-colors duration-150 cursor-pointer disabled:opacity-45 disabled:cursor-not-allowed ${VARIANTS[variant]}${className ? ` ${className}` : ""}`}
-      {...props}
-    />
-  );
-}
-
-export function Input({ className, ...props }: React.InputHTMLAttributes<HTMLInputElement>) {
-  return (
-    <input
-      className={`w-full rounded-brand border border-border bg-bg px-3 py-2 text-[13px] text-text placeholder:text-text-subtle focus:border-accent focus:outline-none transition-colors${className ? ` ${className}` : ""}`}
-      {...props}
-    />
-  );
-}
-
-export function Select({ className, ...props }: React.SelectHTMLAttributes<HTMLSelectElement>) {
-  return (
-    <select
-      className={`w-full rounded-brand border border-border bg-bg px-3 py-2 text-[13px] text-text focus:border-accent focus:outline-none transition-colors${className ? ` ${className}` : ""}`}
-      {...props}
-    />
-  );
-}
-
-export function Field({
-  label,
-  hint,
-  children,
-}: {
-  label: string;
-  hint?: string;
-  children: React.ReactNode;
-}) {
-  return (
-    <label className="flex flex-col gap-1.5">
-      <span className="text-[11px] font-medium uppercase tracking-wider text-text-subtle">
-        {label}
-        {hint && <span className="ml-1.5 lowercase tracking-normal text-text-subtle/70">· {hint}</span>}
-      </span>
-      {children}
-    </label>
-  );
-}

package/dashboard/src/components/CapacityBadges.tsx

@@ -1,40 +0,0 @@
-"use client";
-
-import { getCapabilitiesForModel, type Caps } from "@/lib/capabilities";
-import { Icon } from "@/components/Icon";
-
-/**
- * Per-model capability icons, aigetwey's own CapacityBadges + CAPACITY_META.
- * Caps are DERIVED from the model id (not stored per-model) via the same resolver
- * aigetwey uses, so badges match wherever the model appears. Only set caps render.
- */
-const CAPACITY_META: Record<string, { icon: string; label: string; desc: string; color: string }> = {
-  vision: { icon: "visibility", label: "Vision", desc: "Supports image input", color: "text-info" },
-  reasoning: { icon: "neurology", label: "Reasoning", desc: "Supports reasoning / thinking", color: "text-warning" },
-};
-
-export function CapacityBadges({
-  model,
-  provider = null,
-  size = 15,
-  className = "",
-}: {
-  model: string;
-  provider?: string | null;
-  size?: number;
-  className?: string;
-}) {
-  const caps = getCapabilitiesForModel(provider, model);
-  const active = Object.keys(CAPACITY_META).filter((k) => caps[k as keyof Caps]);
-  if (active.length === 0) return null;
-
-  return (
-    <span className={`inline-flex flex-none items-center gap-0.5 ${className}`}>
-      {active.map((k) => (
-        <span key={k} title={`${CAPACITY_META[k]!.label} — ${CAPACITY_META[k]!.desc}`} className="leading-none">
-          <Icon name={CAPACITY_META[k]!.icon} size={size} className={CAPACITY_META[k]!.color} />
-        </span>
-      ))}
-    </span>
-  );
-}

package/dashboard/src/components/Checkbox.tsx

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

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