gigaclaw 1.4.0

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

@@ -0,0 +1,87 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Streamdown } from 'streamdown';
+import { PageLayout } from './page-layout.js';
+import { BellIcon } from './icons.js';
+import { linkSafety } from './message.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 gap-3">
+          {notifications.map((n) => (
+            <div key={n.id} className="flex items-start gap-3 p-4 border border-border rounded-lg">
+              <div className="mt-0.5 shrink-0 text-muted-foreground">
+                <BellIcon size={16} />
+              </div>
+              <div className="flex-1 min-w-0">
+                <div className="text-sm prose-sm">
+                  <Streamdown mode="static" linkSafety={linkSafety}>{n.notification}</Streamdown>
+                </div>
+                <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, contentClassName }) {
+  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: contentClassName || "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, contentClassName }) {
+  return (
+    <ChatNavProvider value={{ activeChatId: null, navigateToChat: defaultNavigateToChat }}>
+      <SidebarProvider>
+        <AppSidebar user={session.user} />
+        <SidebarInset>
+          <div className={contentClassName || "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/pull-requests-page.js

@@ -0,0 +1,103 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from "react";
+import { PageLayout } from "./page-layout.js";
+import { GitPullRequestIcon, SpinnerIcon, RefreshIcon } from "./icons.js";
+import { getPullRequests } from "../actions.js";
+function timeAgo(ts) {
+  const seconds = Math.floor((Date.now() - new Date(ts).getTime()) / 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 PullRequestsPage({ session }) {
+  const [pullRequests, setPullRequests] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
+  const fetchPRs = useCallback(async () => {
+    try {
+      const result = await getPullRequests();
+      setPullRequests(result);
+    } catch (err) {
+      console.error("Failed to load pull requests:", err);
+    } finally {
+      setLoading(false);
+      setRefreshing(false);
+    }
+  }, []);
+  useEffect(() => {
+    fetchPRs();
+  }, [fetchPRs]);
+  useEffect(() => {
+    const interval = setInterval(() => fetchPRs(), 6e4);
+    return () => clearInterval(interval);
+  }, [fetchPRs]);
+  return /* @__PURE__ */ jsxs(PageLayout, { session, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-6", children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold", children: "Pull Requests" }),
+      !loading && /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => {
+            setRefreshing(true);
+            fetchPRs();
+          },
+          disabled: refreshing,
+          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 disabled:opacity-50 disabled:pointer-events-none",
+          children: refreshing ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(SpinnerIcon, { size: 14 }),
+            " Refreshing..."
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(RefreshIcon, { size: 14 }),
+            " Refresh"
+          ] })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground mb-4", children: [
+      pullRequests.length,
+      " open ",
+      pullRequests.length === 1 ? "pull request" : "pull requests"
+    ] }),
+    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)) }) : pullRequests.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground py-8 text-center", children: "No open pull requests." }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: pullRequests.map((pr) => /* @__PURE__ */ jsxs(
+      "a",
+      {
+        href: pr.html_url,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "flex items-start gap-3 p-4 border border-border rounded-lg hover:bg-accent transition-colors no-underline text-inherit",
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "mt-0.5 shrink-0 text-muted-foreground", children: /* @__PURE__ */ jsx(GitPullRequestIcon, { size: 16 }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxs("div", { className: "text-sm font-medium", children: [
+              "#",
+              pr.number,
+              " ",
+              pr.title
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground mt-1", children: [
+              pr.head_branch,
+              " \u2192 ",
+              pr.base_branch,
+              " \xB7 opened by ",
+              pr.user,
+              " \xB7 ",
+              timeAgo(pr.created_at)
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-blue-500 shrink-0 mt-1", children: "View \u2192" })
+        ]
+      },
+      pr.id
+    )) })
+  ] });
+}
+export {
+  PullRequestsPage
+};

package/lib/chat/components/pull-requests-page.jsx

@@ -0,0 +1,113 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { PageLayout } from './page-layout.js';
+import { GitPullRequestIcon, SpinnerIcon, RefreshIcon } from './icons.js';
+import { getPullRequests } from '../actions.js';
+
+function timeAgo(ts) {
+  const seconds = Math.floor((Date.now() - new Date(ts).getTime()) / 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 PullRequestsPage({ session }) {
+  const [pullRequests, setPullRequests] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
+
+  const fetchPRs = useCallback(async () => {
+    try {
+      const result = await getPullRequests();
+      setPullRequests(result);
+    } catch (err) {
+      console.error('Failed to load pull requests:', err);
+    } finally {
+      setLoading(false);
+      setRefreshing(false);
+    }
+  }, []);
+
+  // Initial load
+  useEffect(() => { fetchPRs(); }, [fetchPRs]);
+
+  // Auto-refresh every 60 seconds
+  useEffect(() => {
+    const interval = setInterval(() => fetchPRs(), 60000);
+    return () => clearInterval(interval);
+  }, [fetchPRs]);
+
+  return (
+    <PageLayout session={session}>
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-2xl font-semibold">Pull Requests</h1>
+        {!loading && (
+          <button
+            onClick={() => { setRefreshing(true); fetchPRs(); }}
+            disabled={refreshing}
+            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 disabled:opacity-50 disabled:pointer-events-none"
+          >
+            {refreshing ? (
+              <><SpinnerIcon size={14} /> Refreshing...</>
+            ) : (
+              <><RefreshIcon size={14} /> Refresh</>
+            )}
+          </button>
+        )}
+      </div>
+
+      {/* Count */}
+      <p className="text-sm text-muted-foreground mb-4">
+        {pullRequests.length} open {pullRequests.length === 1 ? 'pull request' : 'pull requests'}
+      </p>
+
+      {/* PR 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>
+      ) : pullRequests.length === 0 ? (
+        <p className="text-sm text-muted-foreground py-8 text-center">
+          No open pull requests.
+        </p>
+      ) : (
+        <div className="flex flex-col gap-3">
+          {pullRequests.map((pr) => (
+            <a
+              key={pr.id}
+              href={pr.html_url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-start gap-3 p-4 border border-border rounded-lg hover:bg-accent transition-colors no-underline text-inherit"
+            >
+              <div className="mt-0.5 shrink-0 text-muted-foreground">
+                <GitPullRequestIcon size={16} />
+              </div>
+              <div className="flex-1 min-w-0">
+                <div className="text-sm font-medium">
+                  #{pr.number} {pr.title}
+                </div>
+                <div className="text-xs text-muted-foreground mt-1">
+                  {pr.head_branch} &rarr; {pr.base_branch} &middot; opened by {pr.user} &middot; {timeAgo(pr.created_at)}
+                </div>
+              </div>
+              <span className="text-xs text-blue-500 shrink-0 mt-1">
+                View &rarr;
+              </span>
+            </a>
+          ))}
+        </div>
+      )}
+    </PageLayout>
+  );
+}

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

@@ -0,0 +1,39 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { PageLayout } from "./page-layout.js";
+import { ClockIcon, ZapIcon, KeyIcon } from "./icons.js";
+const TABS = [
+  { id: "crons", label: "Crons", href: "/settings/crons", icon: ClockIcon },
+  { id: "triggers", label: "Triggers", href: "/settings/triggers", icon: ZapIcon },
+  { 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,53 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { PageLayout } from './page-layout.js';
+import { ClockIcon, ZapIcon, KeyIcon } from './icons.js';
+
+const TABS = [
+  { id: 'crons', label: 'Crons', href: '/settings/crons', icon: ClockIcon },
+  { id: 'triggers', label: 'Triggers', href: '/settings/triggers', icon: ZapIcon },
+  { 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
+};