@harbinger-ai/harbinger 0.1.1 → 0.1.3

package/lib/chat/components/settings-providers-page.jsx

@@ -0,0 +1,410 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { CpuIcon, CheckIcon, SpinnerIcon, EyeIcon, EyeOffIcon, XIcon } from './icons.js';
+import {
+  getLlmProviders,
+  saveLlmProvider,
+  setActiveProvider,
+  testLlmConnection,
+  getActiveProvider,
+} from '../actions.js';
+
+const PROVIDER_MODELS = {
+  anthropic: ['claude-sonnet-4-20250514', 'claude-opus-4-20250514', 'claude-haiku-4-5-20251001', 'claude-3-5-sonnet-20241022'],
+  openai: ['gpt-4o', 'gpt-4o-mini', 'gpt-4-turbo', 'o1', 'o1-mini', 'o3-mini'],
+  google: ['gemini-2.5-pro', 'gemini-2.5-flash', 'gemini-2.0-flash'],
+  custom: [],
+};
+
+const PROVIDER_META = {
+  anthropic: { name: 'Anthropic', keyPrefix: 'sk-ant-', keyEnv: 'ANTHROPIC_API_KEY' },
+  openai: { name: 'OpenAI', keyPrefix: 'sk-', keyEnv: 'OPENAI_API_KEY' },
+  google: { name: 'Google', keyPrefix: 'AI', keyEnv: 'GOOGLE_API_KEY' },
+  custom: { name: 'Custom', keyPrefix: '', keyEnv: 'CUSTOM_API_KEY' },
+};
+
+// ─── Provider Card ────────────────────────────────────────────────────────────
+
+function ProviderCard({ provider, config, isActive, onEdit, index }) {
+  const meta = PROVIDER_META[provider];
+  const hasKey = !!config?.apiKey;
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 8 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.25, delay: index * 0.05 }}
+      className={`rounded-lg border bg-[--card] transition-all cursor-pointer hover:border-[--cyan]/20 ${
+        isActive ? 'border-[--cyan]/30 shadow-[0_0_15px_oklch(0.7_0.17_195/8%)]' : 'border-white/[0.06]'
+      }`}
+      onClick={onEdit}
+    >
+      <div className="flex items-center gap-3 p-4">
+        <div className="flex items-center gap-1 shrink-0">
+          <div className="w-2 h-2 rounded-full bg-[#ff5f57]" />
+          <div className="w-2 h-2 rounded-full bg-[#febc2e]" />
+          <div className="w-2 h-2 rounded-full bg-[#28c840]" />
+        </div>
+        <div className="shrink-0 rounded-md bg-[--cyan]/10 p-2">
+          <CpuIcon size={16} className="text-[--cyan]" />
+        </div>
+        <div className="flex-1 min-w-0">
+          <p className="text-sm font-mono font-medium">{meta.name}</p>
+          {config?.model && (
+            <p className="text-[10px] font-mono text-muted-foreground mt-0.5 truncate">{config.model}</p>
+          )}
+        </div>
+        <div className="flex items-center gap-2 shrink-0">
+          <div className={`w-2 h-2 rounded-full ${hasKey ? 'bg-[--success]' : 'bg-muted-foreground/40'}`} />
+          <span className={`text-[10px] font-mono ${hasKey ? 'text-[--success]' : 'text-muted-foreground'}`}>
+            {hasKey ? 'configured' : 'no key'}
+          </span>
+          {isActive && (
+            <span className="inline-flex items-center rounded-full bg-[--cyan]/10 text-[--cyan] border border-[--cyan]/20 px-2 py-0.5 text-[10px] font-mono font-medium">
+              active
+            </span>
+          )}
+        </div>
+      </div>
+    </motion.div>
+  );
+}
+
+// ─── Provider Setup Form ──────────────────────────────────────────────────────
+
+function ProviderSetupForm({ provider, config, isActive, onSave, onSetActive, onClose }) {
+  const meta = PROVIDER_META[provider];
+  const models = PROVIDER_MODELS[provider];
+
+  const [apiKey, setApiKey] = useState(config?.apiKey || '');
+  const [model, setModel] = useState(config?.model || models[0] || '');
+  const [maxTokens, setMaxTokens] = useState(config?.maxTokens || 4096);
+  const [baseUrl, setBaseUrl] = useState(config?.baseUrl || '');
+  const [showKey, setShowKey] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [testing, setTesting] = useState(false);
+  const [testResult, setTestResult] = useState(null);
+
+  async function handleSave() {
+    setSaving(true);
+    try {
+      await onSave(provider, { apiKey, model, maxTokens: parseInt(maxTokens), baseUrl: baseUrl || undefined });
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function handleTest() {
+    setTesting(true);
+    setTestResult(null);
+    try {
+      const result = await testLlmConnection(provider);
+      setTestResult(result);
+    } catch (err) {
+      setTestResult({ error: err.message });
+    } finally {
+      setTesting(false);
+    }
+  }
+
+  async function handleSetActive() {
+    await onSetActive(provider, model);
+  }
+
+  const maskedKey = apiKey ? apiKey.slice(0, 8) + '•'.repeat(Math.max(0, apiKey.length - 12)) + apiKey.slice(-4) : '';
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, height: 0 }}
+      animate={{ opacity: 1, height: 'auto' }}
+      exit={{ opacity: 0, height: 0 }}
+      transition={{ duration: 0.2 }}
+      className="overflow-hidden"
+    >
+      <div className="rounded-lg border border-[--cyan]/20 bg-[--card] p-5 mt-3">
+        <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center gap-2">
+            <div className="flex items-center gap-1">
+              <div className="w-2 h-2 rounded-full bg-[#ff5f57]" />
+              <div className="w-2 h-2 rounded-full bg-[#febc2e]" />
+              <div className="w-2 h-2 rounded-full bg-[#28c840]" />
+            </div>
+            <span className="font-mono text-[10px] font-medium text-[--cyan] uppercase tracking-wider">
+              {meta.name} Setup
+            </span>
+          </div>
+          <button onClick={onClose} className="text-muted-foreground hover:text-foreground transition-colors">
+            <XIcon size={14} />
+          </button>
+        </div>
+
+        <div className="flex flex-col gap-4">
+          {/* API Key */}
+          <div>
+            <label className="block text-[10px] font-mono font-medium text-muted-foreground uppercase tracking-wider mb-1.5">
+              API Key
+            </label>
+            <div className="flex gap-2">
+              <div className="flex-1 relative">
+                <input
+                  type={showKey ? 'text' : 'password'}
+                  value={apiKey}
+                  onChange={(e) => setApiKey(e.target.value)}
+                  placeholder={meta.keyPrefix + '...'}
+                  className="w-full text-sm border border-white/[0.06] rounded-md px-3 py-2 bg-black/20 font-mono text-foreground/80 placeholder:text-muted-foreground/50 focus:outline-none focus:border-[--cyan]/40 focus:ring-1 focus:ring-[--cyan]/20 transition-colors"
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowKey(!showKey)}
+                  className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  {showKey ? <EyeOffIcon size={14} /> : <EyeIcon size={14} />}
+                </button>
+              </div>
+              <button
+                onClick={handleTest}
+                disabled={testing || !apiKey}
+                className="inline-flex items-center gap-1.5 rounded-md px-3 py-2 text-xs font-mono font-medium border border-white/[0.06] hover:bg-white/[0.04] hover:border-[--cyan]/30 hover:text-[--cyan] transition-colors disabled:opacity-50"
+              >
+                {testing ? <SpinnerIcon size={12} /> : 'Test'}
+              </button>
+            </div>
+          </div>
+
+          {/* Model */}
+          <div>
+            <label className="block text-[10px] font-mono font-medium text-muted-foreground uppercase tracking-wider mb-1.5">
+              Model
+            </label>
+            {models.length > 0 ? (
+              <select
+                value={model}
+                onChange={(e) => setModel(e.target.value)}
+                className="w-full text-sm border border-white/[0.06] rounded-md px-3 py-2 bg-black/20 font-mono text-foreground/80 focus:outline-none focus:border-[--cyan]/40 focus:ring-1 focus:ring-[--cyan]/20 transition-colors appearance-none"
+              >
+                {models.map((m) => (
+                  <option key={m} value={m}>{m}</option>
+                ))}
+              </select>
+            ) : (
+              <input
+                type="text"
+                value={model}
+                onChange={(e) => setModel(e.target.value)}
+                placeholder="model-name"
+                className="w-full text-sm border border-white/[0.06] rounded-md px-3 py-2 bg-black/20 font-mono text-foreground/80 placeholder:text-muted-foreground/50 focus:outline-none focus:border-[--cyan]/40 focus:ring-1 focus:ring-[--cyan]/20 transition-colors"
+              />
+            )}
+          </div>
+
+          {/* Max Tokens */}
+          <div>
+            <label className="block text-[10px] font-mono font-medium text-muted-foreground uppercase tracking-wider mb-1.5">
+              Max Tokens
+            </label>
+            <input
+              type="number"
+              value={maxTokens}
+              onChange={(e) => setMaxTokens(e.target.value)}
+              className="w-32 text-sm border border-white/[0.06] rounded-md px-3 py-2 bg-black/20 font-mono text-foreground/80 focus:outline-none focus:border-[--cyan]/40 focus:ring-1 focus:ring-[--cyan]/20 transition-colors"
+            />
+          </div>
+
+          {/* Base URL (custom only) */}
+          {provider === 'custom' && (
+            <div>
+              <label className="block text-[10px] font-mono font-medium text-muted-foreground uppercase tracking-wider mb-1.5">
+                Base URL
+              </label>
+              <input
+                type="text"
+                value={baseUrl}
+                onChange={(e) => setBaseUrl(e.target.value)}
+                placeholder="https://api.example.com/v1"
+                className="w-full text-sm border border-white/[0.06] rounded-md px-3 py-2 bg-black/20 font-mono text-foreground/80 placeholder:text-muted-foreground/50 focus:outline-none focus:border-[--cyan]/40 focus:ring-1 focus:ring-[--cyan]/20 transition-colors"
+              />
+            </div>
+          )}
+
+          {/* Test result */}
+          {testResult && (
+            <div className="rounded-md border border-white/[0.04] bg-black/30 overflow-hidden">
+              <div className="flex items-center gap-1.5 px-2.5 py-1.5 border-b border-white/[0.04]">
+                <div className="flex items-center gap-1">
+                  <div className="w-2 h-2 rounded-full bg-[#ff5f57]" />
+                  <div className="w-2 h-2 rounded-full bg-[#febc2e]" />
+                  <div className="w-2 h-2 rounded-full bg-[#28c840]" />
+                </div>
+                <span className="font-mono text-[9px] text-muted-foreground ml-1">connection test</span>
+                {testResult.error ? (
+                  <XIcon size={10} className="text-[--destructive] ml-auto" />
+                ) : (
+                  <CheckIcon size={10} className="text-[--success] ml-auto" />
+                )}
+              </div>
+              <pre className="text-[11px] p-2.5 font-mono overflow-auto max-h-24 whitespace-pre-wrap break-words text-foreground/80">
+                {testResult.error ? `Error: ${testResult.error}` : `Connected. Response: ${testResult.response || 'OK'}`}
+              </pre>
+            </div>
+          )}
+
+          {/* Actions */}
+          <div className="flex items-center gap-2 pt-2">
+            <button
+              onClick={handleSave}
+              disabled={saving || !apiKey}
+              className="inline-flex items-center gap-1.5 rounded-md px-4 py-2 text-xs font-mono font-medium bg-[--cyan]/10 text-[--cyan] border border-[--cyan]/20 hover:bg-[--cyan] hover:text-[--primary-foreground] transition-colors disabled:opacity-50"
+            >
+              {saving ? <SpinnerIcon size={12} /> : <CheckIcon size={12} />}
+              Save
+            </button>
+            {!isActive && apiKey && (
+              <button
+                onClick={handleSetActive}
+                className="inline-flex items-center gap-1.5 rounded-md px-4 py-2 text-xs font-mono font-medium border border-white/[0.06] hover:bg-white/[0.04] hover:border-[--cyan]/30 hover:text-[--cyan] transition-colors"
+              >
+                Set as Active
+              </button>
+            )}
+            <button
+              onClick={onClose}
+              className="inline-flex items-center gap-1.5 rounded-md px-4 py-2 text-xs font-mono font-medium border border-white/[0.06] hover:bg-white/[0.04] transition-colors text-muted-foreground"
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      </div>
+    </motion.div>
+  );
+}
+
+// ─── Stats Card ───────────────────────────────────────────────────────────────
+
+function StatsCard({ label, value, active }) {
+  return (
+    <div className={`flex flex-col items-center justify-center p-4 rounded-lg border bg-[--card] ${active ? 'border-[--cyan]/20' : 'border-white/[0.06]'}`}>
+      <span className={`text-2xl font-semibold font-mono ${active ? 'text-[--cyan]' : 'text-foreground'}`}>{value}</span>
+      <span className="font-mono text-[10px] text-muted-foreground uppercase tracking-wider mt-1">{label}</span>
+    </div>
+  );
+}
+
+// ─── Main Page ────────────────────────────────────────────────────────────────
+
+export function SettingsProvidersPage() {
+  const [loading, setLoading] = useState(true);
+  const [providers, setProviders] = useState({});
+  const [activeProviderInfo, setActiveProviderInfo] = useState(null);
+  const [editingProvider, setEditingProvider] = useState(null);
+
+  async function load() {
+    try {
+      const [provs, active] = await Promise.all([
+        getLlmProviders(),
+        getActiveProvider(),
+      ]);
+      setProviders(provs || {});
+      setActiveProviderInfo(active || {});
+    } catch {}
+    setLoading(false);
+  }
+
+  useEffect(() => { load(); }, []);
+
+  async function handleSave(provider, config) {
+    await saveLlmProvider(provider, config);
+    await load();
+    setEditingProvider(null);
+  }
+
+  async function handleSetActive(provider, model) {
+    await setActiveProvider(provider, model);
+    await load();
+    setEditingProvider(null);
+  }
+
+  if (loading) {
+    return (
+      <div className="flex flex-col gap-3">
+        {[...Array(4)].map((_, i) => (
+          <div key={i} className="h-16 animate-shimmer rounded-lg border border-white/[0.06] bg-[--card]" />
+        ))}
+      </div>
+    );
+  }
+
+  const configuredCount = Object.values(providers).filter((p) => p?.apiKey).length;
+  const providerList = ['anthropic', 'openai', 'google', 'custom'];
+
+  return (
+    <>
+      {/* Active provider banner */}
+      {activeProviderInfo?.provider && (
+        <div className="rounded-lg border border-[--cyan]/20 bg-[--cyan]/5 p-4 mb-6">
+          <div className="flex items-center gap-3">
+            <div className="shrink-0 rounded-md bg-[--cyan]/10 p-2">
+              <CpuIcon size={16} className="text-[--cyan]" />
+            </div>
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center gap-2">
+                <span className="font-mono text-[10px] font-medium text-[--cyan] uppercase tracking-wider">Active Provider</span>
+                <div className="w-2 h-2 rounded-full bg-[--success] animate-pulse" />
+              </div>
+              <p className="text-sm font-mono font-medium mt-0.5">
+                {PROVIDER_META[activeProviderInfo.provider]?.name || activeProviderInfo.provider}
+                {activeProviderInfo.model && (
+                  <span className="text-muted-foreground ml-2">/ {activeProviderInfo.model}</span>
+                )}
+              </p>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Stats */}
+      <div className="grid grid-cols-3 gap-3 mb-6">
+        <StatsCard label="Providers" value={providerList.length} />
+        <StatsCard label="Configured" value={configuredCount} />
+        <StatsCard label="Active" value={activeProviderInfo?.provider ? 1 : 0} active />
+      </div>
+
+      {/* Section Header */}
+      <div className="flex items-center gap-2 pb-2 mb-4">
+        <span className="font-mono text-[10px] font-medium text-[--cyan] uppercase tracking-wider">Configured Providers</span>
+        <span className="inline-flex items-center rounded-full bg-[--cyan]/10 px-2 py-0.5 text-[10px] font-mono font-medium text-[--cyan]">
+          {configuredCount}
+        </span>
+      </div>
+
+      {/* Provider Cards */}
+      <div className="flex flex-col gap-3">
+        {providerList.map((p, i) => (
+          <div key={p}>
+            <ProviderCard
+              provider={p}
+              config={providers[p]}
+              isActive={activeProviderInfo?.provider === p}
+              onEdit={() => setEditingProvider(editingProvider === p ? null : p)}
+              index={i}
+            />
+            <AnimatePresence>
+              {editingProvider === p && (
+                <ProviderSetupForm
+                  provider={p}
+                  config={providers[p]}
+                  isActive={activeProviderInfo?.provider === p}
+                  onSave={handleSave}
+                  onSetActive={handleSetActive}
+                  onClose={() => setEditingProvider(null)}
+                />
+              )}
+            </AnimatePresence>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+}

package/lib/chat/components/settings-secrets-page.js

@@ -1,7 +1,8 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
-import { KeyIcon, CopyIcon, CheckIcon, TrashIcon, RefreshIcon } from "./icons.js";
+import { motion } from "framer-motion";
+import { KeyIcon, CopyIcon, CheckIcon, TrashIcon, RefreshIcon, SpinnerIcon } from "./icons.js";
 import { createNewApiKey, getApiKeys, deleteApiKey } from "../actions.js";
 function timeAgo(ts) {
   if (!ts) return "Never";
@@ -46,7 +47,7 @@ function CopyButton({ text }) {
     "button",
     {
       onClick: handleCopy,
-      className: "inline-flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs font-medium border border-border bg-background text-muted-foreground hover:bg-accent hover:text-foreground",
+      className: "inline-flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs font-mono font-medium border border-white/[0.06] hover:bg-white/[0.04] hover:border-[--cyan]/30 hover:text-[--cyan] transition-colors",
       children: [
         copied ? /* @__PURE__ */ jsx(CheckIcon, { size: 14 }) : /* @__PURE__ */ jsx(CopyIcon, { size: 14 }),
         copied ? "Copied" : "Copy"
@@ -54,11 +55,10 @@ function CopyButton({ text }) {
     }
   );
 }
-function Section({ title, description, children }) {
-  return /* @__PURE__ */ jsxs("div", { className: "pb-8 mb-8 border-b border-border last:border-b-0 last:pb-0 last:mb-0", children: [
-    /* @__PURE__ */ jsx("h2", { className: "text-base font-medium mb-1", children: title }),
-    description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-4", children: description }),
-    children
+function SectionHeader({ label, description }) {
+  return /* @__PURE__ */ jsxs("div", { className: "pb-2 mb-4", children: [
+    /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] font-medium text-[--cyan] uppercase tracking-wider", children: label }),
+    description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1 font-mono", children: description })
   ] });
 }
 function ApiKeySection() {
@@ -123,93 +123,118 @@ function ApiKeySection() {
     handleCreate();
   };
   if (loading) {
-    return /* @__PURE__ */ jsx("div", { className: "h-14 animate-pulse rounded-md bg-border/50" });
+    return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: /* @__PURE__ */ jsx("div", { className: "h-16 animate-shimmer rounded-lg border border-white/[0.06] bg-[--card]" }) });
   }
   return /* @__PURE__ */ jsxs("div", { children: [
-    error && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive mb-4", children: error }),
-    newKey && /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-green-500/30 bg-green-500/5 p-4 mb-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3 mb-2", children: [
-        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-green-600 dark:text-green-400", children: "API key created \u2014 copy it now. You won't be able to see it again." }),
+    error && /* @__PURE__ */ jsx("div", { className: "rounded-md border border-[--destructive]/20 bg-[--destructive]/5 px-3 py-2 mb-4", children: /* @__PURE__ */ jsx("p", { className: "text-xs font-mono text-[--destructive]", children: error }) }),
+    newKey && /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-green-500/20 bg-green-500/5 p-4 mb-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 mb-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[#ff5f57]" }),
+          /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[#febc2e]" }),
+          /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[#28c840]" })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "font-mono text-[9px] text-green-500 ml-1", children: "new api key" }),
         /* @__PURE__ */ jsx(
           "button",
           {
             onClick: () => setNewKey(null),
-            className: "text-xs text-muted-foreground hover:text-foreground shrink-0",
+            className: "text-[10px] font-mono text-muted-foreground hover:text-foreground ml-auto",
             children: "Dismiss"
           }
         )
       ] }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs font-mono text-green-500 mb-2", children: "Copy this key now. You won't be able to see it again." }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx("code", { className: "flex-1 rounded-md bg-muted px-3 py-2 text-xs font-mono break-all select-all", children: newKey }),
+        /* @__PURE__ */ jsx("code", { className: "flex-1 rounded-md bg-black/30 border border-white/[0.04] px-3 py-2 text-[11px] font-mono break-all select-all text-foreground/80", children: newKey }),
         /* @__PURE__ */ jsx(CopyButton, { text: newKey })
       ] })
     ] }),
-    currentKey ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsx("div", { className: "shrink-0 rounded-md bg-muted p-2", children: /* @__PURE__ */ jsx(KeyIcon, { size: 16 }) }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsxs("code", { className: "text-sm font-mono", children: [
-            currentKey.keyPrefix,
-            "..."
+    currentKey ? /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: { opacity: 0, y: 8 },
+        animate: { opacity: 1, y: 0 },
+        className: "rounded-lg border border-white/[0.06] bg-[--card] hover:border-[--cyan]/20 transition-colors",
+        children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [
+            /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[#ff5f57]" }),
+            /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[#febc2e]" }),
+            /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[#28c840]" })
           ] }),
-          /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground mt-0.5", children: [
-            "Created ",
-            formatDate(currentKey.createdAt),
-            currentKey.lastUsedAt && /* @__PURE__ */ jsxs("span", { className: "ml-2", children: [
-              "\xB7 Last used ",
-              timeAgo(currentKey.lastUsedAt)
+          /* @__PURE__ */ jsx("div", { className: "shrink-0 rounded-md bg-[--cyan]/10 p-2", children: /* @__PURE__ */ jsx(KeyIcon, { size: 16, className: "text-[--cyan]" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxs("code", { className: "text-sm font-mono text-foreground", children: [
+              currentKey.keyPrefix,
+              "..."
+            ] }),
+            /* @__PURE__ */ jsxs("p", { className: "text-[10px] text-muted-foreground mt-0.5 font-mono", children: [
+              "Created ",
+              formatDate(currentKey.createdAt),
+              currentKey.lastUsedAt && /* @__PURE__ */ jsxs("span", { className: "ml-2", children: [
+                "\\u00b7 Last used ",
+                timeAgo(currentKey.lastUsedAt)
+              ] })
             ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
+            /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[--success]" }),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: handleRegenerate,
+                disabled: creating,
+                className: `inline-flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs font-mono font-medium border transition-colors disabled:opacity-50 ${confirmRegenerate ? "border-yellow-500/30 text-yellow-500 hover:bg-yellow-500/10" : "border-white/[0.06] text-muted-foreground hover:bg-white/[0.04] hover:border-[--cyan]/30 hover:text-[--cyan]"}`,
+                children: [
+                  creating ? /* @__PURE__ */ jsx(SpinnerIcon, { size: 12 }) : /* @__PURE__ */ jsx(RefreshIcon, { size: 12 }),
+                  creating ? "Generating..." : confirmRegenerate ? "Confirm" : "Regenerate"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: handleDelete,
+                className: `inline-flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs font-mono font-medium border transition-colors ${confirmDelete ? "border-[--destructive]/30 text-[--destructive] hover:bg-[--destructive]/10" : "border-white/[0.06] text-muted-foreground hover:text-[--destructive] hover:border-[--destructive]/20"}`,
+                children: [
+                  /* @__PURE__ */ jsx(TrashIcon, { size: 12 }),
+                  confirmDelete ? "Confirm" : "Delete"
+                ]
+              }
+            )
           ] })
         ] })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            onClick: handleRegenerate,
-            disabled: creating,
-            className: `inline-flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs font-medium border ${confirmRegenerate ? "border-yellow-500 text-yellow-600 hover:bg-yellow-500/10" : "border-border text-muted-foreground hover:bg-accent hover:text-foreground"} disabled:opacity-50`,
-            children: [
-              /* @__PURE__ */ jsx(RefreshIcon, { size: 12 }),
-              creating ? "Generating..." : confirmRegenerate ? "Confirm regenerate" : "Regenerate"
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            onClick: handleDelete,
-            className: `inline-flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs font-medium border ${confirmDelete ? "border-destructive text-destructive hover:bg-destructive/10" : "border-border text-muted-foreground hover:text-destructive hover:border-destructive/50"}`,
-            children: [
-              /* @__PURE__ */ jsx(TrashIcon, { size: 12 }),
-              confirmDelete ? "Confirm delete" : "Delete"
-            ]
-          }
-        )
-      ] })
-    ] }) }) : /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-dashed bg-card p-6 flex flex-col items-center text-center", children: [
-      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-3", children: "No API key configured" }),
-      /* @__PURE__ */ jsx(
+      }
+    ) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-center rounded-lg border border-white/[0.06] bg-[--card]", children: [
+      /* @__PURE__ */ jsx("div", { className: "rounded-full bg-[--cyan]/10 p-4 mb-4", children: /* @__PURE__ */ jsx(KeyIcon, { size: 24, className: "text-[--cyan]" }) }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-mono font-medium mb-1", children: "No API key configured" }),
+      /* @__PURE__ */ jsx("p", { className: "text-[11px] text-muted-foreground font-mono mb-4", children: "Generate a key to authenticate external requests to /api endpoints." }),
+      /* @__PURE__ */ jsxs(
         "button",
         {
           onClick: handleCreate,
           disabled: creating,
-          className: "inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium bg-foreground text-background hover:bg-foreground/90 disabled:opacity-50 disabled:pointer-events-none",
-          children: creating ? "Creating..." : "Create API key"
+          className: "inline-flex items-center gap-1.5 rounded-md px-4 py-2 text-xs font-mono font-medium bg-[--cyan]/10 text-[--cyan] border border-[--cyan]/20 hover:bg-[--cyan] hover:text-[--primary-foreground] transition-colors disabled:opacity-50",
+          children: [
+            creating ? /* @__PURE__ */ jsx(SpinnerIcon, { size: 12 }) : /* @__PURE__ */ jsx(KeyIcon, { size: 12 }),
+            creating ? "Creating..." : "Create API Key"
+          ]
         }
       )
     ] })
   ] });
 }
 function SettingsSecretsPage() {
-  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-    Section,
-    {
-      title: "API Key",
-      description: "Authenticates external requests to /api endpoints. Pass via the x-api-key header.",
-      children: /* @__PURE__ */ jsx(ApiKeySection, {})
-    }
-  ) });
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      SectionHeader,
+      {
+        label: "API Key",
+        description: "Authenticates external requests to /api endpoints. Pass via the x-api-key header."
+      }
+    ),
+    /* @__PURE__ */ jsx(ApiKeySection, {})
+  ] });
 }
 export {
   SettingsSecretsPage