thepopebot 1.1.2 → 1.2.3

package/lib/chat/components/messages.js

@@ -0,0 +1,63 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useEffect, useState } from "react";
+import { PreviewMessage, ThinkingMessage } from "./message.js";
+import { Greeting } from "./greeting.js";
+import { ArrowDown } from "lucide-react";
+function Messages({ messages, status }) {
+  const containerRef = useRef(null);
+  const endRef = useRef(null);
+  const [isAtBottom, setIsAtBottom] = useState(true);
+  useEffect(() => {
+    if (isAtBottom && endRef.current) {
+      endRef.current.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [messages, status, isAtBottom]);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const handleScroll = () => {
+      const { scrollTop, scrollHeight, clientHeight } = container;
+      setIsAtBottom(scrollHeight - scrollTop - clientHeight < 40);
+    };
+    container.addEventListener("scroll", handleScroll, { passive: true });
+    return () => container.removeEventListener("scroll", handleScroll);
+  }, []);
+  const scrollToBottom = () => {
+    endRef.current?.scrollIntoView({ behavior: "smooth" });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute inset-0 touch-pan-y overflow-y-auto",
+        ref: containerRef,
+        children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex min-w-0 max-w-4xl flex-col gap-4 px-2 py-4 md:gap-6 md:px-4", children: [
+          messages.length === 0 && /* @__PURE__ */ jsx(Greeting, {}),
+          messages.map((message, index) => /* @__PURE__ */ jsx(
+            PreviewMessage,
+            {
+              message,
+              isLoading: status === "streaming" && index === messages.length - 1
+            },
+            message.id
+          )),
+          status === "submitted" && /* @__PURE__ */ jsx(ThinkingMessage, {}),
+          /* @__PURE__ */ jsx("div", { className: "min-h-[24px] shrink-0", ref: endRef })
+        ] })
+      }
+    ),
+    !isAtBottom && /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "absolute bottom-4 left-1/2 z-10 -translate-x-1/2 rounded-full border border-border bg-background p-2 shadow-lg hover:bg-muted",
+        onClick: scrollToBottom,
+        "aria-label": "Scroll to bottom",
+        children: /* @__PURE__ */ jsx(ArrowDown, { className: "size-4" })
+      }
+    )
+  ] });
+}
+export {
+  Messages
+};

package/lib/chat/components/messages.jsx

@@ -0,0 +1,72 @@
+'use client';
+
+import { useRef, useEffect, useState } from 'react';
+import { PreviewMessage, ThinkingMessage } from './message.js';
+import { Greeting } from './greeting.js';
+import { ArrowDown } from 'lucide-react';
+
+export function Messages({ messages, status }) {
+  const containerRef = useRef(null);
+  const endRef = useRef(null);
+  const [isAtBottom, setIsAtBottom] = useState(true);
+
+  // Auto-scroll to bottom when new messages arrive
+  useEffect(() => {
+    if (isAtBottom && endRef.current) {
+      endRef.current.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [messages, status, isAtBottom]);
+
+  // Track scroll position
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const handleScroll = () => {
+      const { scrollTop, scrollHeight, clientHeight } = container;
+      setIsAtBottom(scrollHeight - scrollTop - clientHeight < 40);
+    };
+
+    container.addEventListener('scroll', handleScroll, { passive: true });
+    return () => container.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  const scrollToBottom = () => {
+    endRef.current?.scrollIntoView({ behavior: 'smooth' });
+  };
+
+  return (
+    <div className="relative flex-1">
+      <div
+        className="absolute inset-0 touch-pan-y overflow-y-auto"
+        ref={containerRef}
+      >
+        <div className="mx-auto flex min-w-0 max-w-4xl flex-col gap-4 px-2 py-4 md:gap-6 md:px-4">
+          {messages.length === 0 && <Greeting />}
+
+          {messages.map((message, index) => (
+            <PreviewMessage
+              key={message.id}
+              message={message}
+              isLoading={status === 'streaming' && index === messages.length - 1}
+            />
+          ))}
+
+          {status === 'submitted' && <ThinkingMessage />}
+
+          <div className="min-h-[24px] shrink-0" ref={endRef} />
+        </div>
+      </div>
+
+      {!isAtBottom && (
+        <button
+          className="absolute bottom-4 left-1/2 z-10 -translate-x-1/2 rounded-full border border-border bg-background p-2 shadow-lg hover:bg-muted"
+          onClick={scrollToBottom}
+          aria-label="Scroll to bottom"
+        >
+          <ArrowDown className="size-4" />
+        </button>
+      )}
+    </div>
+  );
+}

package/lib/chat/components/notifications-page.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { PageLayout } from "./page-layout.js";
+import { BellIcon } from "./icons.js";
+import { getNotifications, markNotificationsRead } from "../actions.js";
+function timeAgo(ts) {
+  const seconds = Math.floor((Date.now() - ts) / 1e3);
+  if (seconds < 60) return "just now";
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  if (days < 30) return `${days}d ago`;
+  const months = Math.floor(days / 30);
+  return `${months}mo ago`;
+}
+function NotificationsPage({ session }) {
+  const [notifications, setNotifications] = useState([]);
+  const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    async function load() {
+      try {
+        const result = await getNotifications();
+        setNotifications(result);
+        await markNotificationsRead();
+      } catch (err) {
+        console.error("Failed to load notifications:", err);
+      } finally {
+        setLoading(false);
+      }
+    }
+    load();
+  }, []);
+  return /* @__PURE__ */ jsxs(PageLayout, { session, children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between mb-6", children: /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold", children: "Notifications" }) }),
+    /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground mb-4", children: [
+      notifications.length,
+      " ",
+      notifications.length === 1 ? "notification" : "notifications"
+    ] }),
+    loading ? /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: [...Array(5)].map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-14 animate-pulse rounded-md bg-border/50" }, i)) }) : notifications.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground py-8 text-center", children: "No notifications yet." }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col divide-y divide-border", children: notifications.map((n) => /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 px-3 py-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "mt-0.5 shrink-0 text-muted-foreground", children: /* @__PURE__ */ jsx(BellIcon, { size: 16 }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm whitespace-pre-wrap", children: n.notification }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: timeAgo(n.createdAt) })
+      ] })
+    ] }, n.id)) })
+  ] });
+}
+export {
+  NotificationsPage
+};

package/lib/chat/components/notifications-page.jsx

@@ -0,0 +1,83 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { PageLayout } from './page-layout.js';
+import { BellIcon } from './icons.js';
+import { getNotifications, markNotificationsRead } from '../actions.js';
+
+function timeAgo(ts) {
+  const seconds = Math.floor((Date.now() - ts) / 1000);
+  if (seconds < 60) return 'just now';
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  if (days < 30) return `${days}d ago`;
+  const months = Math.floor(days / 30);
+  return `${months}mo ago`;
+}
+
+export function NotificationsPage({ session }) {
+  const [notifications, setNotifications] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    async function load() {
+      try {
+        const result = await getNotifications();
+        setNotifications(result);
+        // Mark all as read on view
+        await markNotificationsRead();
+      } catch (err) {
+        console.error('Failed to load notifications:', err);
+      } finally {
+        setLoading(false);
+      }
+    }
+    load();
+  }, []);
+
+  return (
+    <PageLayout session={session}>
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-2xl font-semibold">Notifications</h1>
+      </div>
+
+      {/* Count */}
+      <p className="text-sm text-muted-foreground mb-4">
+        {notifications.length} {notifications.length === 1 ? 'notification' : 'notifications'}
+      </p>
+
+      {/* Notification list */}
+      {loading ? (
+        <div className="flex flex-col gap-3">
+          {[...Array(5)].map((_, i) => (
+            <div key={i} className="h-14 animate-pulse rounded-md bg-border/50" />
+          ))}
+        </div>
+      ) : notifications.length === 0 ? (
+        <p className="text-sm text-muted-foreground py-8 text-center">
+          No notifications yet.
+        </p>
+      ) : (
+        <div className="flex flex-col divide-y divide-border">
+          {notifications.map((n) => (
+            <div key={n.id} className="flex items-start gap-3 px-3 py-3">
+              <div className="mt-0.5 shrink-0 text-muted-foreground">
+                <BellIcon size={16} />
+              </div>
+              <div className="flex-1 min-w-0">
+                <p className="text-sm whitespace-pre-wrap">{n.notification}</p>
+                <span className="text-xs text-muted-foreground">
+                  {timeAgo(n.createdAt)}
+                </span>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </PageLayout>
+  );
+}

package/lib/chat/components/page-layout.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AppSidebar } from "./app-sidebar.js";
+import { SidebarProvider, SidebarInset } from "./ui/sidebar.js";
+import { ChatNavProvider } from "./chat-nav-context.js";
+function defaultNavigateToChat(id) {
+  if (id) {
+    window.location.href = `/chat/${id}`;
+  } else {
+    window.location.href = "/";
+  }
+}
+function PageLayout({ session, children }) {
+  return /* @__PURE__ */ jsx(ChatNavProvider, { value: { activeChatId: null, navigateToChat: defaultNavigateToChat }, children: /* @__PURE__ */ jsxs(SidebarProvider, { children: [
+    /* @__PURE__ */ jsx(AppSidebar, { user: session.user }),
+    /* @__PURE__ */ jsx(SidebarInset, { children: /* @__PURE__ */ jsx("div", { className: "flex flex-col h-full max-w-4xl mx-auto w-full px-4 py-6", children }) })
+  ] }) });
+}
+export {
+  PageLayout
+};

package/lib/chat/components/page-layout.jsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { AppSidebar } from './app-sidebar.js';
+import { SidebarProvider, SidebarInset } from './ui/sidebar.js';
+import { ChatNavProvider } from './chat-nav-context.js';
+
+function defaultNavigateToChat(id) {
+  if (id) {
+    window.location.href = `/chat/${id}`;
+  } else {
+    window.location.href = '/';
+  }
+}
+
+export function PageLayout({ session, children }) {
+  return (
+    <ChatNavProvider value={{ activeChatId: null, navigateToChat: defaultNavigateToChat }}>
+      <SidebarProvider>
+        <AppSidebar user={session.user} />
+        <SidebarInset>
+          <div className="flex flex-col h-full max-w-4xl mx-auto w-full px-4 py-6">
+            {children}
+          </div>
+        </SidebarInset>
+      </SidebarProvider>
+    </ChatNavProvider>
+  );
+}

package/lib/chat/components/settings-layout.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { PageLayout } from "./page-layout.js";
+import { KeyIcon } from "./icons.js";
+const TABS = [
+  { id: "secrets", label: "Secrets", href: "/settings/secrets", icon: KeyIcon }
+];
+function SettingsLayout({ session, children }) {
+  const [activePath, setActivePath] = useState("");
+  useEffect(() => {
+    setActivePath(window.location.pathname);
+  }, []);
+  return /* @__PURE__ */ jsxs(PageLayout, { session, children: [
+    /* @__PURE__ */ jsx("div", { className: "mb-6", children: /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold", children: "Settings" }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex gap-1 border-b border-border mb-6", children: TABS.map((tab) => {
+      const isActive = activePath === tab.href || activePath.startsWith(tab.href + "/");
+      const Icon = tab.icon;
+      return /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href: tab.href,
+          className: `inline-flex items-center gap-2 px-3 py-2 text-sm font-medium border-b-2 transition-colors ${isActive ? "border-foreground text-foreground" : "border-transparent text-muted-foreground hover:text-foreground hover:border-border"}`,
+          children: [
+            /* @__PURE__ */ jsx(Icon, { size: 14 }),
+            tab.label
+          ]
+        },
+        tab.id
+      );
+    }) }),
+    children
+  ] });
+}
+export {
+  SettingsLayout
+};

package/lib/chat/components/settings-layout.jsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { PageLayout } from './page-layout.js';
+import { KeyIcon } from './icons.js';
+
+const TABS = [
+  { id: 'secrets', label: 'Secrets', href: '/settings/secrets', icon: KeyIcon },
+];
+
+export function SettingsLayout({ session, children }) {
+  const [activePath, setActivePath] = useState('');
+
+  useEffect(() => {
+    setActivePath(window.location.pathname);
+  }, []);
+
+  return (
+    <PageLayout session={session}>
+      {/* Header */}
+      <div className="mb-6">
+        <h1 className="text-2xl font-semibold">Settings</h1>
+      </div>
+
+      {/* Tab navigation */}
+      <div className="flex gap-1 border-b border-border mb-6">
+        {TABS.map((tab) => {
+          const isActive = activePath === tab.href || activePath.startsWith(tab.href + '/');
+          const Icon = tab.icon;
+          return (
+            <a
+              key={tab.id}
+              href={tab.href}
+              className={`inline-flex items-center gap-2 px-3 py-2 text-sm font-medium border-b-2 transition-colors ${
+                isActive
+                  ? 'border-foreground text-foreground'
+                  : 'border-transparent text-muted-foreground hover:text-foreground hover:border-border'
+              }`}
+            >
+              <Icon size={14} />
+              {tab.label}
+            </a>
+          );
+        })}
+      </div>
+
+      {/* Tab content */}
+      {children}
+    </PageLayout>
+  );
+}

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

@@ -0,0 +1,216 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { KeyIcon, CopyIcon, CheckIcon, TrashIcon, RefreshIcon } from "./icons.js";
+import { createNewApiKey, getApiKeys, deleteApiKey } from "../actions.js";
+function timeAgo(ts) {
+  if (!ts) return "Never";
+  const seconds = Math.floor((Date.now() - ts) / 1e3);
+  if (seconds < 60) return "just now";
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  if (days < 30) return `${days}d ago`;
+  const months = Math.floor(days / 30);
+  return `${months}mo ago`;
+}
+function formatDate(ts) {
+  if (!ts) return "\u2014";
+  return new Date(ts).toLocaleDateString(void 0, {
+    year: "numeric",
+    month: "short",
+    day: "numeric"
+  });
+}
+function CopyButton({ text }) {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch {
+      const textarea = document.createElement("textarea");
+      textarea.value = text;
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand("copy");
+      document.body.removeChild(textarea);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "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",
+      children: [
+        copied ? /* @__PURE__ */ jsx(CheckIcon, { size: 14 }) : /* @__PURE__ */ jsx(CopyIcon, { size: 14 }),
+        copied ? "Copied" : "Copy"
+      ]
+    }
+  );
+}
+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 ApiKeySection() {
+  const [currentKey, setCurrentKey] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [creating, setCreating] = useState(false);
+  const [newKey, setNewKey] = useState(null);
+  const [confirmDelete, setConfirmDelete] = useState(false);
+  const [confirmRegenerate, setConfirmRegenerate] = useState(false);
+  const [error, setError] = useState(null);
+  const loadKey = async () => {
+    try {
+      const result = await getApiKeys();
+      setCurrentKey(result);
+    } catch {
+    } finally {
+      setLoading(false);
+    }
+  };
+  useEffect(() => {
+    loadKey();
+  }, []);
+  const handleCreate = async () => {
+    if (creating) return;
+    setCreating(true);
+    setError(null);
+    setConfirmRegenerate(false);
+    try {
+      const result = await createNewApiKey();
+      if (result.error) {
+        setError(result.error);
+      } else {
+        setNewKey(result.key);
+        await loadKey();
+      }
+    } catch {
+      setError("Failed to create API key");
+    } finally {
+      setCreating(false);
+    }
+  };
+  const handleDelete = async () => {
+    if (!confirmDelete) {
+      setConfirmDelete(true);
+      setTimeout(() => setConfirmDelete(false), 3e3);
+      return;
+    }
+    try {
+      await deleteApiKey();
+      setCurrentKey(null);
+      setNewKey(null);
+      setConfirmDelete(false);
+    } catch {
+    }
+  };
+  const handleRegenerate = () => {
+    if (!confirmRegenerate) {
+      setConfirmRegenerate(true);
+      setTimeout(() => setConfirmRegenerate(false), 3e3);
+      return;
+    }
+    handleCreate();
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { className: "h-14 animate-pulse rounded-md bg-border/50" });
+  }
+  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." }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setNewKey(null),
+            className: "text-xs text-muted-foreground hover:text-foreground shrink-0",
+            children: "Dismiss"
+          }
+        )
+      ] }),
+      /* @__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(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,
+            "..."
+          ] }),
+          /* @__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__ */ 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(
+        "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"
+        }
+      )
+    ] })
+  ] });
+}
+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, {})
+    }
+  ) });
+}
+export {
+  SettingsSecretsPage
+};