@harbinger-ai/harbinger 0.1.2 → 0.1.4

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

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

@@ -1,7 +1,8 @@
 'use client';
 
 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) {
@@ -19,7 +20,7 @@ function timeAgo(ts) {
 }
 
 function formatDate(ts) {
-  if (!ts) return '—';
+  if (!ts) return '\u2014';
   return new Date(ts).toLocaleDateString(undefined, {
     year: 'numeric',
     month: 'short',
@@ -50,7 +51,7 @@ function CopyButton({ text }) {
   return (
     <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"
     >
       {copied ? <CheckIcon size={14} /> : <CopyIcon size={14} />}
       {copied ? 'Copied' : 'Copy'}
@@ -58,25 +59,20 @@ function CopyButton({ text }) {
   );
 }
 
-// ─────────────────────────────────────────────────────────────────────────────
-// Section wrapper — reusable for each secrets section
-// ─────────────────────────────────────────────────────────────────────────────
+// ─── Section Header ──────────────────────────────────────────────────────────
 
-function Section({ title, description, children }) {
+function SectionHeader({ label, description }) {
   return (
-    <div className="pb-8 mb-8 border-b border-border last:border-b-0 last:pb-0 last:mb-0">
-      <h2 className="text-base font-medium mb-1">{title}</h2>
+    <div className="pb-2 mb-4">
+      <span className="font-mono text-[10px] font-medium text-[--cyan] uppercase tracking-wider">{label}</span>
       {description && (
-        <p className="text-sm text-muted-foreground mb-4">{description}</p>
+        <p className="text-xs text-muted-foreground mt-1 font-mono">{description}</p>
       )}
-      {children}
     </div>
   );
 }
 
-// ─────────────────────────────────────────────────────────────────────────────
-// API Key section
-// ─────────────────────────────────────────────────────────────────────────────
+// ─── API Key section ─────────────────────────────────────────────────────────
 
 function ApiKeySection() {
   const [currentKey, setCurrentKey] = useState(null);
@@ -92,7 +88,6 @@ function ApiKeySection() {
       const result = await getApiKeys();
       setCurrentKey(result);
     } catch {
-      // ignore
     } finally {
       setLoading(false);
     }
@@ -133,9 +128,7 @@ function ApiKeySection() {
       setCurrentKey(null);
       setNewKey(null);
       setConfirmDelete(false);
-    } catch {
-      // ignore
-    }
+    } catch {}
   };
 
   const handleRegenerate = () => {
@@ -148,31 +141,43 @@ function ApiKeySection() {
   };
 
   if (loading) {
-    return <div className="h-14 animate-pulse rounded-md bg-border/50" />;
+    return (
+      <div className="flex flex-col gap-3">
+        <div className="h-16 animate-shimmer rounded-lg border border-white/[0.06] bg-[--card]" />
+      </div>
+    );
   }
 
   return (
     <div>
       {error && (
-        <p className="text-sm text-destructive mb-4">{error}</p>
+        <div className="rounded-md border border-[--destructive]/20 bg-[--destructive]/5 px-3 py-2 mb-4">
+          <p className="text-xs font-mono text-[--destructive]">{error}</p>
+        </div>
       )}
 
       {/* New key banner */}
       {newKey && (
-        <div className="rounded-lg border border-green-500/30 bg-green-500/5 p-4 mb-4">
-          <div className="flex items-start justify-between gap-3 mb-2">
-            <p className="text-sm font-medium text-green-600 dark:text-green-400">
-              API key created — copy it now. You won't be able to see it again.
-            </p>
+        <div className="rounded-lg border border-green-500/20 bg-green-500/5 p-4 mb-4">
+          <div className="flex items-center gap-1.5 mb-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-[9px] text-green-500 ml-1">new api key</span>
             <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"
             >
               Dismiss
             </button>
           </div>
+          <p className="text-xs font-mono text-green-500 mb-2">
+            Copy this key now. You won't be able to see it again.
+          </p>
           <div className="flex items-center gap-2">
-            <code className="flex-1 rounded-md bg-muted px-3 py-2 text-xs font-mono break-all select-all">
+            <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">
               {newKey}
             </code>
             <CopyButton text={newKey} />
@@ -181,58 +186,73 @@ function ApiKeySection() {
       )}
 
       {currentKey ? (
-        <div className="rounded-lg border bg-card p-4">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-3">
-              <div className="shrink-0 rounded-md bg-muted p-2">
-                <KeyIcon size={16} />
-              </div>
-              <div>
-                <code className="text-sm font-mono">{currentKey.keyPrefix}...</code>
-                <p className="text-xs text-muted-foreground mt-0.5">
-                  Created {formatDate(currentKey.createdAt)}
-                  {currentKey.lastUsedAt && (
-                    <span className="ml-2">· Last used {timeAgo(currentKey.lastUsedAt)}</span>
-                  )}
-                </p>
-              </div>
+        <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"
+        >
+          <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">
+              <KeyIcon size={16} className="text-[--cyan]" />
             </div>
-            <div className="flex items-center gap-2">
+            <div className="flex-1 min-w-0">
+              <code className="text-sm font-mono text-foreground">{currentKey.keyPrefix}...</code>
+              <p className="text-[10px] text-muted-foreground mt-0.5 font-mono">
+                Created {formatDate(currentKey.createdAt)}
+                {currentKey.lastUsedAt && (
+                  <span className="ml-2">\u00b7 Last used {timeAgo(currentKey.lastUsedAt)}</span>
+                )}
+              </p>
+            </div>
+            <div className="flex items-center gap-2 shrink-0">
+              <div className="w-2 h-2 rounded-full bg-[--success]" />
               <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 ${
+                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 text-yellow-600 hover:bg-yellow-500/10'
-                    : 'border-border text-muted-foreground hover:bg-accent hover:text-foreground'
-                } disabled:opacity-50`}
+                    ? '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]'
+                }`}
               >
-                <RefreshIcon size={12} />
-                {creating ? 'Generating...' : confirmRegenerate ? 'Confirm regenerate' : 'Regenerate'}
+                {creating ? <SpinnerIcon size={12} /> : <RefreshIcon size={12} />}
+                {creating ? 'Generating...' : confirmRegenerate ? 'Confirm' : 'Regenerate'}
               </button>
               <button
                 onClick={handleDelete}
-                className={`inline-flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs font-medium border ${
+                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 text-destructive hover:bg-destructive/10'
-                    : 'border-border text-muted-foreground hover:text-destructive hover:border-destructive/50'
+                    ? 'border-[--destructive]/30 text-[--destructive] hover:bg-[--destructive]/10'
+                    : 'border-white/[0.06] text-muted-foreground hover:text-[--destructive] hover:border-[--destructive]/20'
                 }`}
               >
                 <TrashIcon size={12} />
-                {confirmDelete ? 'Confirm delete' : 'Delete'}
+                {confirmDelete ? 'Confirm' : 'Delete'}
               </button>
             </div>
           </div>
-        </div>
+        </motion.div>
       ) : (
-        <div className="rounded-lg border border-dashed bg-card p-6 flex flex-col items-center text-center">
-          <p className="text-sm text-muted-foreground mb-3">No API key configured</p>
+        <div className="flex flex-col items-center justify-center py-12 text-center rounded-lg border border-white/[0.06] bg-[--card]">
+          <div className="rounded-full bg-[--cyan]/10 p-4 mb-4">
+            <KeyIcon size={24} className="text-[--cyan]" />
+          </div>
+          <p className="text-sm font-mono font-medium mb-1">No API key configured</p>
+          <p className="text-[11px] text-muted-foreground font-mono mb-4">
+            Generate a key to authenticate external requests to /api endpoints.
+          </p>
           <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"
+            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"
           >
-            {creating ? 'Creating...' : 'Create API key'}
+            {creating ? <SpinnerIcon size={12} /> : <KeyIcon size={12} />}
+            {creating ? 'Creating...' : 'Create API Key'}
           </button>
         </div>
       )}
@@ -240,25 +260,16 @@ function ApiKeySection() {
   );
 }
 
-// ─────────────────────────────────────────────────────────────────────────────
-// Main page
-// ─────────────────────────────────────────────────────────────────────────────
+// ─── Main Page ───────────────────────────────────────────────────────────────
 
 export function SettingsSecretsPage() {
   return (
     <div>
-      <Section
-        title="API Key"
+      <SectionHeader
+        label="API Key"
         description="Authenticates external requests to /api endpoints. Pass via the x-api-key header."
-      >
-        <ApiKeySection />
-      </Section>
-
-      {/* Future sections go here, e.g.:
-      <Section title="GitHub Token" description="...">
-        <GitHubTokenSection />
-      </Section>
-      */}
+      />
+      <ApiKeySection />
     </div>
   );
 }