@kyro-cms/admin 0.3.2 → 0.3.5

package/src/components/ApiKeysManager.tsx

@@ -1,22 +1,15 @@
-import React, { useState, useEffect } from "react";
-import { apiGet, apiPost, apiDelete } from "../lib/api";
+import React, { useState } from "react";
+import { apiPost } from "../lib/api";
+import { useResourceManager } from "../lib/useResourceManager";
+import { useUIStore } from "../lib/stores";
 import {
-  Key,
-  Plus,
-  Trash2,
-  Copy,
-  CheckCircle2,
-  Clock,
-  Shield,
-  Zap,
-  AlertTriangle,
-  X,
-  Info,
-  Terminal,
-  ExternalLink,
-  Code,
-} from "lucide-react";
-import { ConfirmModal, Modal, ModalContent, ModalActions } from "./ui/Modal";
+  Key, Plus, Trash2, Copy, CheckCircle2, Clock,
+  Shield, Zap, AlertTriangle, Info, Terminal,
+  Code, RefreshCw,
+} from "./ui/icons";
+import { PageHeader } from "./ui/PageHeader";
+import { Badge } from "./ui/Badge";
+import { Modal, ModalContent, ModalActions } from "./ui/Modal";
 
 interface ApiKeyItem {
   id: string;
@@ -26,81 +19,85 @@ interface ApiKeyItem {
   permissions?: string[];
   lastUsed?: string;
   createdAt: string;
+  expiresAt?: string;
 }
 
+interface PermissionsOption {
+  label: string;
+  value: string;
+}
+
+const ALL_PERMISSIONS: PermissionsOption[] = [
+  { label: "All (*)", value: "*" },
+  { label: "Posts — Read", value: "posts:read" },
+  { label: "Posts — Create", value: "posts:create" },
+  { label: "Posts — Update", value: "posts:update" },
+  { label: "Posts — Delete", value: "posts:delete" },
+  { label: "Pages — Read", value: "pages:read" },
+  { label: "Pages — Create", value: "pages:create" },
+  { label: "Pages — Update", value: "pages:update" },
+  { label: "Pages — Delete", value: "pages:delete" },
+  { label: "Users — Read", value: "users:read" },
+  { label: "Users — Admin", value: "users:admin" },
+  { label: "Media — Read", value: "media:read" },
+  { label: "Media — Upload", value: "media:upload" },
+  { label: "API Keys — Read", value: "apikeys:read" },
+  { label: "API Keys — Admin", value: "apikeys:admin" },
+];
+
 export function ApiKeysManager() {
-  const [keys, setKeys] = useState<ApiKeyItem[]>([]);
-  const [loading, setLoading] = useState(false);
+  const { items: keys, loading, create, update, remove, isCreateModalOpen, setIsCreateModalOpen } =
+    useResourceManager<ApiKeyItem>(
+      React.useMemo(() => ({
+        endpoint: "/api/keys",
+        transformLoad: (data) => (data as ApiKeyItem[]).map((k) => ({
+          ...k,
+          keyPrefix: k.keyPrefix || k.key?.substring(0, 8) || "",
+        })),
+      }), [])
+    );
+
   const [newKey, setNewKey] = useState<ApiKeyItem | null>(null);
-  const [showCreateModal, setShowCreateModal] = useState(false);
-  const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [showHelpModal, setShowHelpModal] = useState(false);
-  const [showAlertModal, setShowAlertModal] = useState(false);
-  const [alertMessage, setAlertMessage] = useState("");
-  const [deleteKeyId, setDeleteKeyId] = useState<string | null>(null);
   const [newKeyName, setNewKeyName] = useState("");
+  const [newKeyPermissions, setNewKeyPermissions] = useState<string[]>(["*"]);
+  const [newKeyExpires, setNewKeyExpires] = useState("");
   const [copiedId, setCopiedId] = useState<string | null>(null);
   const [createError, setCreateError] = useState("");
-
-  const loadKeys = async () => {
-    setLoading(true);
-    try {
-      const data = await apiGet("/api/keys");
-      setKeys(
-        data.map((k: any) => ({
-          ...k,
-          key: k.key,
-          keyPrefix: k.keyPrefix || k.key?.substring(0, 8) || "",
-        })),
-      );
-    } catch (e) {
-      console.error(e);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    loadKeys();
-  }, []);
+  const [rotatingId, setRotatingId] = useState<string | null>(null);
+  const { alert, confirm: kyroConfirm } = useUIStore();
 
   const handleCreateKey = async () => {
-    if (!newKeyName.trim()) {
-      setCreateError("Please enter a name for the API key");
-      return;
-    }
-
+    if (!newKeyName.trim()) { setCreateError("Name is required"); return; }
     try {
-      const created = await apiPost("/api/keys", { name: newKeyName });
+      const data: Record<string, unknown> = { name: newKeyName, permissions: newKeyPermissions };
+      if (newKeyExpires) data.expiresAt = new Date(newKeyExpires).toISOString();
+      const created = await create(data);
       setNewKey(created);
-      setShowCreateModal(false);
       setNewKeyName("");
+      setNewKeyPermissions(["*"]);
+      setNewKeyExpires("");
       setCreateError("");
-      loadKeys();
-    } catch (e) {
-      console.error(e);
-      setCreateError("Failed to create API key");
-    }
-  };
-
-  const handleDeleteKey = async (id: string) => {
-    setDeleteKeyId(id);
-    setShowDeleteModal(true);
+    } catch { setCreateError("Failed to create API key"); }
   };
 
-  const confirmDeleteKey = async () => {
-    if (!deleteKeyId) return;
-
-    try {
-      await apiDelete(`/api/keys/${deleteKeyId}`);
-      loadKeys();
-    } catch (e) {
-      console.error(e);
-      setAlertMessage("Failed to delete API key");
-      setShowAlertModal(true);
-    }
-    setShowDeleteModal(false);
-    setDeleteKeyId(null);
+  const handleRotateKey = (key: ApiKeyItem) => {
+    kyroConfirm({
+      title: "Rotate API Key",
+      message: `Are you sure you want to regenerate the key "${key.name}"? The current key will stop working immediately and this action cannot be undone.`,
+      variant: "danger",
+      onConfirm: async () => {
+        setRotatingId(key.id);
+        try {
+          const rotated = await apiPost<ApiKeyItem>(`/api/keys/${key.id}/rotate`);
+          setNewKey(rotated);
+        } catch {
+          alert({ title: "Error", message: "Failed to rotate key. Please try again." });
+        } finally {
+          setRotatingId(null);
+        }
+      },
+    });
   };
 
   const copyToClipboard = (key: string, id: string) => {
@@ -110,314 +107,396 @@ export function ApiKeysManager() {
   };
 
   return (
-    <div className="w-full space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700 px-8 pb-32">
-      {/* Header */}
-      <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-6 pt-4">
-        <div>
+    <div className="w-full space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700 pb-32">
+
+      <PageHeader
+        title="API Keys"
+        description="Programmatic tokens for secure infrastructure integration."
+        icon={Key}
+        actions={
           <div className="flex items-center gap-3">
-            <h1 className="text-4xl font-black tracking-tighter text-[var(--kyro-text-primary)]">
-              API <span className="text-[var(--kyro-primary)]">Keys</span>
-            </h1>
             <button
               type="button"
               onClick={() => setShowHelpModal(true)}
-              className="p-2 rounded-lg text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-primary)] hover:bg-[var(--kyro-surface-accent)] transition-all"
-              title="Learn how API keys work"
+              className="px-4 py-2 bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] rounded-xl font-bold text-xs border border-[var(--kyro-border)] hover:bg-[var(--kyro-surface)] transition-all flex items-center gap-2"
             >
-              <Info className="w-5 h-5" />
+              <Info className="w-4 h-4" />
+              <span>Integration Guide</span>
+            </button>
+            <button
+              type="button"
+              onClick={() => { setNewKeyName(""); setCreateError(""); setIsCreateModalOpen(true); }}
+              className="px-6 py-2.5 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-xl font-bold text-sm shadow-xl shadow-[var(--kyro-primary)]/10 hover:scale-[1.02] active:scale-[0.98] transition-all flex items-center gap-2"
+            >
+              <Plus className="w-4 h-4" />
+              <span>Create Access Key</span>
             </button>
           </div>
-          <p className="text-[var(--kyro-text-secondary)] mt-1 font-medium opacity-70">
-            Secure tokens for authenticating API requests.
-          </p>
-        </div>
-        <button
-          type="button"
-          onClick={() => {
-            setNewKeyName("");
-            setCreateError("");
-            setShowCreateModal(true);
-          }}
-          className="flex items-center gap-2 px-6 py-3 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-full font-black text-sm shadow-xl hover:opacity-90 active:scale-95 transition-all"
-        >
-          <Plus className="w-4 h-4" />
-          Create API Key
-        </button>
-      </div>
+        }
+      />
 
-      {/* How to Use Section */}
-      <div className="grid md:grid-cols-2 gap-4">
-        {/* Quick Start */}
-        <div className="surface-tile p-6">
-          <div className="flex items-center gap-2 mb-3">
-            <Terminal className="w-5 h-5 text-[var(--kyro-primary)]" />
-            <h3 className="font-bold">Quick Start</h3>
-          </div>
-          <p className="text-sm text-[var(--kyro-text-secondary)] opacity-70 mb-3">
-            Include your API key in requests:
-          </p>
-          <div className="space-y-2">
-            <div className="bg-[var(--kyro-bg-secondary)] rounded-lg p-3 font-mono text-xs border border-[var(--kyro-border)]">
-              <div className="text-[var(--kyro-text-muted)] mb-2">
-                Example request:
-              </div>
-              <div className="text-[var(--kyro-primary)]">curl -X GET \</div>
-              <div className="text-[var(--kyro-text-secondary)]">
-                {" "}
-                https://yoursite.com/api/posts \
+      <div className="grid md:grid-cols-2 gap-6">
+        {/* Terminal Card 1 */}
+        <div className="group relative overflow-hidden bg-[var(--kyro-bg-secondary)] border border-[var(--kyro-border)] rounded-[2rem] p-1 hover:border-[var(--kyro-primary)]/30 transition-all duration-500">
+          <div className="p-6 bg-[var(--kyro-surface)] rounded-[1.8rem] h-full">
+            <div className="flex items-center justify-between mb-6">
+              <div className="flex items-center gap-3">
+                <div className="p-2 bg-blue-500/10 rounded-lg">
+                  <Terminal className="w-4 h-4 text-blue-500" />
+                </div>
+                <h3 className="text-xs font-bold uppercase tracking-widest opacity-60">Shell / CURL</h3>
               </div>
-              <div className="text-[var(--kyro-text-secondary)]">
-                {" "}
-                -H "Authorization: ApiKey kyro_xxx"
+              <div className="flex gap-1.5">
+                <div className="w-2.5 h-2.5 rounded-full bg-red-500/20" />
+                <div className="w-2.5 h-2.5 rounded-full bg-amber-500/20" />
+                <div className="w-2.5 h-2.5 rounded-full bg-green-500/20" />
               </div>
             </div>
-            <button
-              type="button"
-              onClick={() => {
-                navigator.clipboard.writeText(
-                  'curl -X GET https://yoursite.com/api/posts -H "Authorization: ApiKey YOUR_KEY"',
-                );
-              }}
-              className="text-xs text-[var(--kyro-primary)] hover:underline flex items-center gap-1"
-            >
-              <Copy className="w-3 h-3" /> Copy curl example
-            </button>
+
+            <div className="relative group/code">
+              <pre className="p-5 bg-[var(--kyro-bg)] rounded-2xl border border-[var(--kyro-border)] font-mono text-[10px] leading-relaxed overflow-x-auto">
+                <div className="flex gap-4">
+                  <span className="opacity-20 select-none w-4">1</span>
+                  <span><span className="text-[var(--kyro-primary)]">curl</span> -X GET \</span>
+                </div>
+                <div className="flex gap-4">
+                  <span className="opacity-20 select-none w-4">2</span>
+                  <span>  https://api.yoursite.com/v1/posts \</span>
+                </div>
+                <div className="flex gap-4">
+                  <span className="opacity-20 select-none w-4">3</span>
+                  <span>  -H <span className="text-green-500">"Authorization: ApiKey kyro_xxx"</span></span>
+                </div>
+              </pre>
+              <button
+                type="button"
+                onClick={() => navigator.clipboard.writeText('curl -X GET https://api.yoursite.com/v1/posts -H "Authorization: ApiKey YOUR_KEY"')}
+                className="absolute top-3 right-3 p-2 bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-lg opacity-0 group-hover/code:opacity-100 transition-opacity hover:text-[var(--kyro-primary)] shadow-sm"
+              >
+                <Copy className="w-3.5 h-3.5" />
+              </button>
+            </div>
           </div>
         </div>
 
-        {/* JavaScript/Fetch */}
-        <div className="surface-tile p-6">
-          <div className="flex items-center gap-2 mb-3">
-            <Code className="w-5 h-5 text-[var(--kyro-primary)]" />
-            <h3 className="font-bold">JavaScript / Fetch</h3>
-          </div>
-          <div className="bg-[var(--kyro-bg-secondary)] rounded-lg p-3 font-mono text-xs border border-[var(--kyro-border)]">
-            <div className="text-[var(--kyro-text-muted)] mb-2">
-              Example code:
-            </div>
-            <div>
-              <span className="text-[var(--kyro-primary)]">await fetch</span>(
-              <span className="text-green-600">'https://api'</span>, {"{"}
+        {/* Terminal Card 2 */}
+        <div className="group relative overflow-hidden bg-[var(--kyro-bg-secondary)] border border-[var(--kyro-border)] rounded-[2rem] p-1 hover:border-[var(--kyro-primary)]/30 transition-all duration-500">
+          <div className="p-6 bg-[var(--kyro-surface)] rounded-[1.8rem] h-full">
+            <div className="flex items-center justify-between mb-6">
+              <div className="flex items-center gap-3">
+                <div className="p-2 bg-indigo-500/10 rounded-lg">
+                  <Code className="w-4 h-4 text-indigo-500" />
+                </div>
+                <h3 className="text-xs font-bold uppercase tracking-widest opacity-60">JavaScript SDK</h3>
+              </div>
+              <div className="flex gap-1.5">
+                <div className="w-2.5 h-2.5 rounded-full bg-red-500/20" />
+                <div className="w-2.5 h-2.5 rounded-full bg-amber-500/20" />
+                <div className="w-2.5 h-2.5 rounded-full bg-green-500/20" />
+              </div>
             </div>
-            <div> headers: {"{"}</div>
-            <div>
-              {" "}
-              <span className="text-green-600">'Authorization'</span>:{" "}
-              <span className="text-yellow-700">'ApiKey kyro_xxx'</span>,
+
+            <div className="relative group/code">
+              <pre className="p-5 bg-[var(--kyro-bg)] rounded-2xl border border-[var(--kyro-border)] font-mono text-[10px] leading-relaxed overflow-x-auto">
+                <div className="flex gap-4">
+                  <span className="opacity-20 select-none w-4">1</span>
+                  <span><span className="text-indigo-400">const</span> res = <span className="text-indigo-400">await</span> <span className="text-blue-400">fetch</span>(url, {"{"}</span>
+                </div>
+                <div className="flex gap-4">
+                  <span className="opacity-20 select-none w-4">2</span>
+                  <span>  headers: {"{"} </span>
+                </div>
+                <div className="flex gap-4">
+                  <span className="opacity-20 select-none w-4">3</span>
+                  <span>    <span className="text-green-500">'Authorization'</span>: <span className="text-green-500">'ApiKey xxx'</span></span>
+                </div>
+                <div className="flex gap-4">
+                  <span className="opacity-20 select-none w-4">4</span>
+                  <span>  {"}"}</span>
+                </div>
+                <div className="flex gap-4">
+                  <span className="opacity-20 select-none w-4">5</span>
+                  <span>{"}"});</span>
+                </div>
+              </pre>
+              <button
+                type="button"
+                onClick={() => navigator.clipboard.writeText('await fetch(url, { headers: { "Authorization": "ApiKey YOUR_KEY" } })')}
+                className="absolute top-3 right-3 p-2 bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-lg opacity-0 group-hover/code:opacity-100 transition-opacity hover:text-[var(--kyro-primary)] shadow-sm"
+              >
+                <Copy className="w-3.5 h-3.5" />
+              </button>
             </div>
-            <div> {"}"}</div>
-            <div>{"}"})</div>
           </div>
         </div>
       </div>
 
-      {/* Best Practices */}
-      <div className="surface-tile p-4 bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)]">
-        <div className="flex items-start gap-3">
-          <Shield className="w-5 h-5 text-amber-600 flex-shrink-0" />
-          <div>
-            <h4 className="font-bold text-[var(--kyro-text-primary)] mb-2">
-              Best Practices for API Keys
-            </h4>
-            <ul className="text-sm text-[var(--kyro-text-secondary)] grid md:grid-cols-2 gap-2">
-              <li className="flex items-center gap-2">
-                <span className="text-amber-600">•</span> Never commit to
-                version control
-              </li>
-              <li className="flex items-center gap-2">
-                <span className="text-amber-600">•</span> Store in environment
-                variables
-              </li>
-              <li className="flex items-center gap-2">
-                <span className="text-amber-600">•</span> Use separate keys per
-                app
-              </li>
-              <li className="flex items-center gap-2">
-                <span className="text-amber-600">•</span> Revoke unused keys
-              </li>
-            </ul>
+      <div className="flex surface-tile flex-col gap-8">
+        {/* Warning/Best Practices Banner */}
+        <div className="relative overflow-hidden p-6 rounded-3xl border border-[var(--kyro-border)] bg-gradient-to-br from-[var(--kyro-surface-accent)] to-transparent group">
+          <div className="absolute top-0 right-0 p-8 opacity-5 group-hover:opacity-10 transition-opacity">
+            <Shield className="w-32 h-32 rotate-12" />
           </div>
-        </div>
-      </div>
 
-      {/* New Key Alert */}
-      {newKey && (
-        <div className="surface-tile p-8 bg-green-500/10 border border-green-500/20">
-          <div className="flex items-start gap-4">
-            <div className="p-3 bg-green-500/20 rounded-2xl">
-              <CheckCircle2 className="w-6 h-6 text-green-500" />
+          <div className="flex items-start gap-4 relative z-10">
+            <div className="p-3 bg-amber-500/10 rounded-2xl">
+              <Shield className="w-6 h-6 text-amber-500" />
             </div>
-            <div className="flex-1">
-              <h3 className="text-xl font-black text-green-600 mb-2">
-                API Key Created Successfully
-              </h3>
-              <p className="text-sm text-[var(--kyro-text-secondary)] mb-4">
-                Copy this key now.{" "}
-                <span className="text-red-500 font-bold">
-                  This is the only time it will be shown.
-                </span>
+            <div>
+              <h4 className="text-lg font-bold text-[var(--kyro-text-primary)] mb-1">Security Best Practices</h4>
+              <p className="text-sm text-[var(--kyro-text-secondary)] opacity-60 mb-4 max-w-2xl">
+                API keys grant full access to your resources. Treat them with the same level of security as your passwords.
               </p>
-              <div className="flex items-center gap-3">
-                <code className="flex-1 p-4 bg-[var(--kyro-bg)] border border-green-500/30 rounded-xl font-mono text-sm break-all">
-                  {newKey.key}
-                </code>
+              <div className="grid sm:grid-cols-2 gap-x-8 gap-y-2">
+                {[
+                  "Never commit keys to version control",
+                  "Rotate keys every 90 days",
+                  "Use specific permissions (least privilege)",
+                  "Store keys in secure environment variables"
+                ].map((text, i) => (
+                  <div key={i} className="flex items-center gap-2 text-xs font-medium text-[var(--kyro-text-secondary)]">
+                    <div className="w-1.5 h-1.5 rounded-full bg-amber-500/50" />
+                    {text}
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Success Banner for New Keys */}
+        {newKey && (
+          <div className="relative overflow-hidden p-8 rounded-3xl border border-green-500/30 bg-green-500/5 backdrop-blur-xl animate-in fade-in slide-in-from-top-4 duration-500">
+            <div className="flex items-start gap-6">
+              <div className="p-4 bg-green-500/10 rounded-2xl">
+                <CheckCircle2 className="w-8 h-8 text-green-500" />
+              </div>
+              <div className="flex-1">
+                <div className="flex items-center justify-between mb-2">
+                  <h3 className="text-xl font-bold text-green-500">API Key Generated</h3>
+                  <Badge variant="success" className="text-[10px] font-bold">New</Badge>
+                </div>
+                <p className="text-sm text-[var(--kyro-text-secondary)] mb-6">
+                  This is the <span className="text-green-500 font-bold uppercase tracking-tight">only time</span> the full key will be shown. Please store it securely.
+                </p>
+
+                <div className="flex flex-col sm:flex-row gap-3">
+                  <div className="flex-1 flex items-center gap-3 p-4 bg-[var(--kyro-bg)] border border-[var(--kyro-border)] rounded-2xl font-mono text-sm break-all group relative">
+                    <span className="opacity-80 select-all">{newKey.key}</span>
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => copyToClipboard(newKey.key!, newKey.id)}
+                    className="flex items-center justify-center gap-2 px-8 py-4 bg-[var(--kyro-primary)] text-white rounded-2xl font-bold hover:scale-[1.02] active:scale-[0.98] transition-all shadow-lg shadow-[var(--kyro-primary)]/20"
+                  >
+                    {copiedId === newKey.id ? <CheckCircle2 className="w-5 h-5" /> : <Copy className="w-5 h-5" />}
+                    <span>{copiedId === newKey.id ? "Copied" : "Copy Key"}</span>
+                  </button>
+                </div>
+
                 <button
                   type="button"
-                  onClick={() => copyToClipboard(newKey.key!, newKey.id)}
-                  className="p-4 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-xl hover:opacity-90 flex-shrink-0"
-                  title="Copy to clipboard"
+                  onClick={() => setNewKey(null)}
+                  className="mt-6 text-xs font-bold uppercase tracking-widest text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] transition-colors"
                 >
-                  {copiedId === newKey.id ? (
-                    <CheckCircle2 className="w-5 h-5" />
-                  ) : (
-                    <Copy className="w-5 h-5" />
-                  )}
+                  Dismiss Message
                 </button>
               </div>
             </div>
           </div>
-          <button
-            type="button"
-            onClick={() => setNewKey(null)}
-            className="mt-6 text-sm font-bold text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)]"
-          >
-            I've copied my key - dismiss this message
-          </button>
-        </div>
-      )}
-
-      {/* Keys List */}
-      <section className="space-y-6">
-        <div className="flex items-center gap-2 px-2">
-          <Key className="w-4 h-4 text-[var(--kyro-primary)] opacity-40" />
-          <span className="text-[10px] font-black uppercase tracking-widest opacity-40">
-            Your API Keys
-          </span>
-        </div>
+        )}
 
-        {loading ? (
-          <div className="surface-tile p-8 text-center">Loading...</div>
-        ) : keys.length === 0 ? (
-          <div className="surface-tile p-12 text-center border-2 border-dashed border-[var(--kyro-border)]">
-            <div className="w-16 h-16 mx-auto mb-6 bg-[var(--kyro-surface-accent)] rounded-2xl flex items-center justify-center">
-              <Shield className="w-8 h-8 text-[var(--kyro-text-secondary)] opacity-20" />
+        <section className="space-y-6">
+          <div className="flex items-center justify-between px-2">
+            <div className="flex items-center gap-2">
+              <div className="w-1 h-4 bg-[var(--kyro-primary)] rounded-full" />
+              <h2 className="text-sm font-medium tracking-[0.2em] opacity-40">Active Credentials</h2>
+            </div>
+            <div className="text-[10px] font-bold opacity-40">
+              {keys.length} KEY{keys.length !== 1 && "S"}
             </div>
-            <h3 className="text-lg font-black mb-2">No API Keys Yet</h3>
-            <p className="text-sm text-[var(--kyro-text-secondary)] opacity-60 mb-6">
-              Create your first API key to authenticate with the API.
-            </p>
-            <button
-              type="button"
-              onClick={() => setShowCreateModal(true)}
-              className="px-6 py-3 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-full font-black text-sm hover:opacity-90 transition-all"
-            >
-              <Plus className="w-4 h-4 inline mr-2" />
-              Create Your First Key
-            </button>
           </div>
-        ) : (
-          <div className="grid gap-4">
-            {keys.map((key) => (
-              <div
-                key={key.id}
-                className="surface-tile p-6 group hover:border-[var(--kyro-primary)] transition-all"
+
+          {loading ? (
+            <div className="flex items-center justify-center p-20 surface-tile rounded-3xl opacity-50 italic">
+              Synchronizing with vault...
+            </div>
+          ) : keys.length === 0 ? (
+            <div className="p-16 text-center rounded-[3rem] border-2 border-dashed border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)]/30">
+              <div className="w-20 h-20 mx-auto mb-6 bg-gradient-to-tr from-[var(--kyro-surface)] to-[var(--kyro-surface-accent)] rounded-3xl flex items-center justify-center shadow-xl border border-[var(--kyro-border)]">
+                <Key className="w-10 h-10 text-[var(--kyro-primary)]" />
+              </div>
+              <h3 className="text-2xl font-bold mb-3">Initialize Your Access</h3>
+              <p className="text-sm text-[var(--kyro-text-secondary)] opacity-60 mb-8 max-w-sm mx-auto">
+                No API credentials found. Generate a key to begin interacting with the Kyro CMS programmatic interface.
+              </p>
+              <button
+                type="button"
+                onClick={() => setIsCreateModalOpen(true)}
+                className="inline-flex items-center gap-3 px-8 py-4 bg-[var(--kyro-primary)] text-white rounded-2xl font-bold hover:scale-[1.05] transition-all shadow-xl shadow-[var(--kyro-primary)]/10"
               >
-                <div className="flex items-start justify-between gap-6">
-                  <div className="flex-1">
-                    <div className="flex items-center gap-3 mb-3">
-                      <h3 className="text-lg font-black">{key.name}</h3>
-                      <span className="px-2 py-0.5 bg-green-500/10 text-green-500 rounded-full text-[8px] font-black uppercase">
-                        Active
-                      </span>
-                    </div>
-                    <div className="flex items-center gap-2 text-sm font-mono text-[var(--kyro-text-secondary)] opacity-50 mb-4">
-                      <Key className="w-3 h-3" />
-                      <span>{key.keyPrefix}••••••••</span>
-                      <span className="text-[10px] opacity-40">
-                        (prefix shown)
-                      </span>
-                    </div>
-                    <div className="flex items-center gap-6 text-[10px] font-black uppercase opacity-40">
-                      <div className="flex items-center gap-2">
-                        <Clock className="w-3 h-3" />
-                        {key.lastUsed
-                          ? `Last used: ${new Date(key.lastUsed).toLocaleDateString()}`
-                          : "Never used"}
+                <Plus className="w-5 h-5" />
+                Generate API Key
+              </button>
+            </div>
+          ) : (
+            <div className="grid gap-4">
+              {keys.map((key) => (
+                <div
+                  key={key.id}
+                  className="group relative overflow-hidden bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-3xl p-6 hover:border-[var(--kyro-primary)]/50 transition-all duration-300"
+                >
+                  <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-6 relative z-10">
+                    <div className="flex-1">
+                      <div className="flex items-center gap-3 mb-4">
+                        <div className="p-2.5 bg-[var(--kyro-surface-accent)] rounded-xl group-hover:bg-[var(--kyro-primary)]/10 transition-colors">
+                          <Key className="w-5 h-5 text-[var(--kyro-text-secondary)] group-hover:text-[var(--kyro-primary)] transition-colors" />
+                        </div>
+                        <div>
+                          <h3 className="text-lg font-bold group-hover:text-[var(--kyro-primary)] transition-colors">{key.name}</h3>
+                          <div className="flex items-center gap-2 mt-0.5">
+                            <span className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
+                            <span className="text-[10px] font-bold uppercase tracking-wider text-green-500">Live</span>
+                          </div>
+                        </div>
                       </div>
-                      <div className="flex items-center gap-2">
-                        <Zap className="w-3 h-3" />
-                        Created: {new Date(key.createdAt).toLocaleDateString()}
+
+                      <div className="grid sm:grid-cols-3 gap-6 pt-2">
+                        <div className="space-y-1">
+                          <span className="text-[9px] font-bold uppercase tracking-widest opacity-30">Key Snippet</span>
+                          <div className="font-mono text-sm opacity-60 tracking-tighter">
+                            {key.keyPrefix}<span className="opacity-20">••••••••••••••••</span>
+                          </div>
+                        </div>
+                        <div className="space-y-1 border-l border-[var(--kyro-border)] pl-6">
+                          <span className="text-[9px] font-bold uppercase tracking-widest opacity-30">Usage Context</span>
+                          <div className="flex flex-wrap gap-1">
+                            {key.permissions?.includes("*") ? (
+                              <Badge variant="warning" className="text-[8px] font-bold uppercase px-1.5">Full Access</Badge>
+                            ) : (
+                              key.permissions?.slice(0, 2).map((p) => (
+                                <Badge key={p} variant="outline" className="text-[8px] font-bold px-1.5 opacity-60">{p}</Badge>
+                              ))
+                            )}
+                            {key.permissions && key.permissions.length > 2 && (
+                              <span className="text-[8px] font-bold opacity-30">+{key.permissions.length - 2} more</span>
+                            )}
+                          </div>
+                        </div>
+                        <div className="space-y-1 border-l border-[var(--kyro-border)] pl-6">
+                          <span className="text-[9px] font-bold uppercase tracking-widest opacity-30">Last Activity</span>
+                          <div className="text-[10px] font-bold opacity-60 flex items-center gap-1.5">
+                            <Clock className="w-3 h-3" />
+                            {key.lastUsed ? new Date(key.lastUsed).toLocaleDateString() : "Never used"}
+                          </div>
+                        </div>
                       </div>
                     </div>
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <button
-                      type="button"
-                      onClick={() =>
-                        copyToClipboard(
-                          key.key || `${key.keyPrefix}...`,
-                          key.id,
-                        )
-                      }
-                      className="p-3 bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-xl hover:bg-[var(--kyro-surface)] flex items-center gap-2"
-                    >
-                      {copiedId === key.id ? (
-                        <CheckCircle2 className="w-4 h-4 text-green-500" />
-                      ) : (
-                        <Copy className="w-4 h-4" />
-                      )}
-                      <span className="text-xs font-medium">
-                        {copiedId === key.id ? "Copied!" : "Copy"}
-                      </span>
-                    </button>
-                    <button
-                      type="button"
-                      onClick={() => handleDeleteKey(key.id)}
-                      className="p-3 text-red-500 bg-red-500/10 rounded-xl hover:bg-red-500/20"
-                      title="Delete API key"
-                    >
-                      <Trash2 className="w-4 h-4" />
-                    </button>
+
+                    <div className="flex items-center gap-2 lg:bg-[var(--kyro-surface-accent)]/50 lg:p-2 lg:rounded-2xl lg:opacity-0 group-hover:opacity-100 transition-all duration-300 lg:translate-x-4 group-hover:translate-x-0">
+                      <button
+                        type="button"
+                        onClick={() => copyToClipboard(key.key || `${key.keyPrefix}...`, key.id)}
+                        className="flex-1 lg:flex-none p-3 bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-xl hover:border-[var(--kyro-primary)] transition-all flex items-center justify-center gap-2"
+                        title="Copy key"
+                      >
+                        {copiedId === key.id ? <CheckCircle2 className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4" />}
+                        <span className="text-xs font-bold">{copiedId === key.id ? "Copied" : "Copy"}</span>
+                      </button>
+
+                      <div className="w-px h-6 bg-[var(--kyro-border)] mx-1 hidden lg:block" />
+
+                      <button
+                        type="button"
+                        onClick={() => handleRotateKey(key)}
+                        disabled={rotatingId === key.id}
+                        className="p-3 bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-xl hover:border-[var(--kyro-primary)] transition-all group/rotate"
+                        title="Rotate Key"
+                      >
+                        <RefreshCw className={`w-4 h-4 text-[var(--kyro-text-secondary)] group-hover/rotate:text-[var(--kyro-primary)] ${rotatingId === key.id ? "animate-spin" : ""}`} />
+                      </button>
+
+                      <button
+                        type="button"
+                        onClick={() => remove(key.id, "API Key")}
+                        className="p-3 bg-red-500/5 border border-red-500/10 rounded-xl hover:bg-red-500/10 hover:border-red-500/30 transition-all group/delete"
+                        title="Revoke Access"
+                      >
+                        <Trash2 className="w-4 h-4 text-red-500/50 group-hover/delete:text-red-500" />
+                      </button>
+                    </div>
                   </div>
                 </div>
-              </div>
-            ))}
-          </div>
-        )}
-      </section>
+              ))}
+            </div>
+          )}
+        </section>
+      </div>
 
       {/* Create Modal */}
-      <Modal
-        open={showCreateModal}
-        onClose={() => setShowCreateModal(false)}
-        title="Create New API Key"
-      >
+      <Modal size="lg" open={isCreateModalOpen} onClose={() => setIsCreateModalOpen(false)} title="Create New API Key">
         <ModalContent>
-          <p className="text-sm text-[var(--kyro-text-secondary)] mb-4">
-            Give your API key a descriptive name to identify its purpose. You
-            can create multiple keys for different use cases.
-          </p>
-          <input
-            type="text"
-            value={newKeyName}
-            onChange={(e) => {
-              setNewKeyName(e.target.value);
-              setCreateError("");
-            }}
-            placeholder="e.g., Production App, Staging, Mobile App"
-            className="w-full px-4 py-3 bg-[var(--kyro-bg)] border border-[var(--kyro-border)] rounded-xl text-[var(--kyro-text-primary)] focus:outline-none focus:border-[var(--kyro-primary)]"
-            onKeyDown={(e) => e.key === "Enter" && handleCreateKey()}
-          />
-          {createError && (
-            <p className="mt-2 text-sm text-red-500">{createError}</p>
-          )}
-          <div className="mt-4 p-4 bg-amber-500/10 border border-amber-500/20 rounded-xl flex items-start gap-3">
-            <AlertTriangle className="w-5 h-5 text-amber-500 flex-shrink-0 mt-0.5" />
+          <div className="space-y-5">
+            <div>
+              <label className="block text-xs font-bold mb-1.5 text-[var(--kyro-text-secondary)]">Name</label>
+              <input
+                type="text"
+                value={newKeyName}
+                onChange={(e) => { setNewKeyName(e.target.value); setCreateError(""); }}
+                placeholder="e.g., Production App, Staging, Mobile App"
+                className="w-full px-4 py-3 bg-[var(--kyro-bg)] border border-[var(--kyro-border)] rounded-xl text-[var(--kyro-text-primary)] focus:outline-none focus:border-[var(--kyro-primary)]"
+                onKeyDown={(e) => e.key === "Enter" && handleCreateKey()}
+              />
+              {createError && <p className="mt-1.5 text-xs text-red-500">{createError}</p>}
+            </div>
+
             <div>
-              <p className="text-xs font-bold text-amber-600 mb-1">Important</p>
-              <p className="text-xs text-[var(--kyro-text-secondary)]">
-                The API key will be shown only once after creation. Copy it
-                immediately and store it securely.
+              <label className="block text-xs font-bold mb-1.5 text-[var(--kyro-text-secondary)]">Permissions</label>
+              <div className="space-y-1 max-h-48 overflow-y-auto">
+                {ALL_PERMISSIONS.map((opt) => (
+                  <label key={opt.value} className="flex items-center gap-3 p-2 rounded-lg hover:bg-[var(--kyro-surface-accent)] cursor-pointer">
+                    <input
+                      type="checkbox"
+                      checked={newKeyPermissions.includes(opt.value)}
+                      onChange={(e) => {
+                        if (opt.value === "*") {
+                          setNewKeyPermissions(e.target.checked ? ["*"] : []);
+                        } else {
+                          setNewKeyPermissions(
+                            e.target.checked
+                              ? [...newKeyPermissions.filter((p) => p !== "*"), opt.value]
+                              : newKeyPermissions.filter((p) => p !== opt.value)
+                          );
+                        }
+                      }}
+                      className="accent-[var(--kyro-primary)]"
+                    />
+                    <span className="text-sm font-mono">{opt.label}</span>
+                  </label>
+                ))}
+              </div>
+              <p className="mt-1 text-[10px] text-[var(--kyro-text-muted)]">
+                Select specific permissions or choose "*" for full access.
+              </p>
+            </div>
+
+            <div>
+              <label className="block text-xs font-bold mb-1.5 text-[var(--kyro-text-secondary)]">Expires (optional)</label>
+              <input
+                type="datetime-local"
+                value={newKeyExpires}
+                onChange={(e) => setNewKeyExpires(e.target.value)}
+                className="w-full px-4 py-3 bg-[var(--kyro-bg)] border border-[var(--kyro-border)] rounded-xl text-[var(--kyro-text-primary)] focus:outline-none focus:border-[var(--kyro-primary)]"
+              />
+              <p className="mt-1 text-[10px] text-[var(--kyro-text-muted)]">
+                Leave empty for no expiration. Time is in UTC.
+              </p>
+            </div>
+
+            <div className="p-3 bg-amber-500/10 border border-amber-500/20 rounded-xl flex items-start gap-2.5">
+              <AlertTriangle className="w-4 h-4 text-amber-500 flex-shrink-0 mt-0.5" />
+              <p className="text-[11px] text-amber-600 font-medium">
+                The key will be shown only once after creation — copy it immediately.
               </p>
             </div>
           </div>
@@ -425,8 +504,8 @@ export function ApiKeysManager() {
         <ModalActions>
           <button
             type="button"
-            onClick={() => setShowCreateModal(false)}
-            className="px-4 py-2 rounded-lg font-medium text-sm border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] hover:text-[var(--kyro-text-primary)] transition-colors"
+            onClick={() => setIsCreateModalOpen(false)}
+            className="px-4 py-2 rounded-lg font-medium text-sm border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] transition-colors"
           >
             Cancel
           </button>
@@ -440,70 +519,24 @@ export function ApiKeysManager() {
         </ModalActions>
       </Modal>
 
-      {/* Delete Confirmation Modal */}
-      <Modal
-        open={showDeleteModal}
-        onClose={() => setShowDeleteModal(false)}
-        title="Delete API Key"
-        variant="danger"
-      >
-        <ModalContent>
-          <p className="text-sm text-[var(--kyro-text-secondary)] mb-4">
-            Are you sure you want to delete this API key? This action cannot be
-            undone.
-          </p>
-          <div className="p-4 bg-red-500/10 border border-red-500/20 rounded-xl">
-            <p className="text-sm font-medium text-red-500">
-              Any applications or integrations using this key will immediately
-              lose access.
-            </p>
-          </div>
-        </ModalContent>
-        <ModalActions>
-          <button
-            type="button"
-            onClick={() => setShowDeleteModal(false)}
-            className="px-4 py-2 rounded-lg font-medium text-sm border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] hover:text-[var(--kyro-text-primary)] transition-colors"
-          >
-            Keep Key
-          </button>
-          <button
-            type="button"
-            onClick={confirmDeleteKey}
-            className="px-4 py-2 rounded-lg font-medium text-sm bg-red-500 text-white hover:bg-red-600 transition-colors"
-          >
-            Delete Permanently
-          </button>
-        </ModalActions>
-      </Modal>
-
       {/* Help Modal */}
-      <Modal
-        open={showHelpModal}
-        onClose={() => setShowHelpModal(false)}
-        title="How API Keys Work"
-      >
+      <Modal size="lg" open={showHelpModal} onClose={() => setShowHelpModal(false)} title="How API Keys Work">
         <ModalContent>
           <div className="space-y-6">
             <div>
               <h4 className="font-bold mb-2">What is an API key?</h4>
               <p className="text-sm text-[var(--kyro-text-secondary)]">
-                An API key is a unique token that authenticates your requests to
-                the API. Think of it as a password that's specifically for
-                programmatic access.
+                An API key is a unique token that authenticates your requests to the API. Think of it as a password that's specifically for programmatic access.
               </p>
             </div>
             <div>
               <h4 className="font-bold mb-2">How to use it</h4>
               <p className="text-sm text-[var(--kyro-text-secondary)] mb-3">
-                Add your API key to the Authorization header of your HTTP
-                requests:
+                Add your API key to the Authorization header of your HTTP requests:
               </p>
               <div className="bg-[var(--kyro-bg)] rounded-lg p-4 font-mono text-sm space-y-2">
                 <div>
-                  <span className="text-[var(--kyro-text-secondary)]">
-                    Authorization:
-                  </span>{" "}
+                  <span className="text-[var(--kyro-text-secondary)]">Authorization:</span>{" "}
                   <span className="text-[var(--kyro-primary)]">ApiKey </span>
                   <span className="text-green-500">kyro_xxxxxxxxxxxx</span>
                 </div>
@@ -513,9 +546,7 @@ export function ApiKeysManager() {
               <h4 className="font-bold mb-2">Best practices</h4>
               <ul className="text-sm text-[var(--kyro-text-secondary)] space-y-2 list-disc list-inside">
                 <li>Never share your API key publicly</li>
-                <li>
-                  Store it securely (environment variables, secrets manager)
-                </li>
+                <li>Store it securely (environment variables, secrets manager)</li>
                 <li>Create separate keys for different applications</li>
                 <li>Revoke keys that are no longer in use</li>
               </ul>
@@ -532,28 +563,6 @@ export function ApiKeysManager() {
           </button>
         </ModalActions>
       </Modal>
-
-      {/* Alert Modal */}
-      <Modal
-        open={showAlertModal}
-        onClose={() => setShowAlertModal(false)}
-        title="Error"
-      >
-        <ModalContent>
-          <p className="text-sm text-[var(--kyro-text-secondary)]">
-            {alertMessage}
-          </p>
-        </ModalContent>
-        <ModalActions>
-          <button
-            type="button"
-            onClick={() => setShowAlertModal(false)}
-            className="px-4 py-2 rounded-lg font-medium text-sm bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] hover:opacity-90 transition-colors"
-          >
-            OK
-          </button>
-        </ModalActions>
-      </Modal>
     </div>
   );
-}
+}