@harbinger-ai/harbinger 0.1.0

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

@@ -0,0 +1,264 @@
+'use client';
+
+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) / 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`;
+}
+
+function formatDate(ts) {
+  if (!ts) return '—';
+  return new Date(ts).toLocaleDateString(undefined, {
+    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), 2000);
+    } 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), 2000);
+    }
+  };
+
+  return (
+    <button
+      onClick={handleCopy}
+      className="inline-flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs font-medium border border-border bg-background text-muted-foreground hover:bg-accent hover:text-foreground"
+    >
+      {copied ? <CheckIcon size={14} /> : <CopyIcon size={14} />}
+      {copied ? 'Copied' : 'Copy'}
+    </button>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Section wrapper — reusable for each secrets section
+// ─────────────────────────────────────────────────────────────────────────────
+
+function Section({ title, description, children }) {
+  return (
+    <div className="pb-8 mb-8 border-b border-border last:border-b-0 last:pb-0 last:mb-0">
+      <h2 className="text-base font-medium mb-1">{title}</h2>
+      {description && (
+        <p className="text-sm text-muted-foreground mb-4">{description}</p>
+      )}
+      {children}
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// API Key section
+// ─────────────────────────────────────────────────────────────────────────────
+
+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 {
+      // ignore
+    } 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), 3000);
+      return;
+    }
+    try {
+      await deleteApiKey();
+      setCurrentKey(null);
+      setNewKey(null);
+      setConfirmDelete(false);
+    } catch {
+      // ignore
+    }
+  };
+
+  const handleRegenerate = () => {
+    if (!confirmRegenerate) {
+      setConfirmRegenerate(true);
+      setTimeout(() => setConfirmRegenerate(false), 3000);
+      return;
+    }
+    handleCreate();
+  };
+
+  if (loading) {
+    return <div className="h-14 animate-pulse rounded-md bg-border/50" />;
+  }
+
+  return (
+    <div>
+      {error && (
+        <p className="text-sm text-destructive mb-4">{error}</p>
+      )}
+
+      {/* New key banner */}
+      {newKey && (
+        <div className="rounded-lg border border-green-500/30 bg-green-500/5 p-4 mb-4">
+          <div className="flex items-start justify-between gap-3 mb-2">
+            <p className="text-sm font-medium text-green-600 dark:text-green-400">
+              API key created — copy it now. You won't be able to see it again.
+            </p>
+            <button
+              onClick={() => setNewKey(null)}
+              className="text-xs text-muted-foreground hover:text-foreground shrink-0"
+            >
+              Dismiss
+            </button>
+          </div>
+          <div className="flex items-center gap-2">
+            <code className="flex-1 rounded-md bg-muted px-3 py-2 text-xs font-mono break-all select-all">
+              {newKey}
+            </code>
+            <CopyButton text={newKey} />
+          </div>
+        </div>
+      )}
+
+      {currentKey ? (
+        <div className="rounded-lg border bg-card p-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <div className="shrink-0 rounded-md bg-muted p-2">
+                <KeyIcon size={16} />
+              </div>
+              <div>
+                <code className="text-sm font-mono">{currentKey.keyPrefix}...</code>
+                <p className="text-xs text-muted-foreground mt-0.5">
+                  Created {formatDate(currentKey.createdAt)}
+                  {currentKey.lastUsedAt && (
+                    <span className="ml-2">· Last used {timeAgo(currentKey.lastUsedAt)}</span>
+                  )}
+                </p>
+              </div>
+            </div>
+            <div className="flex items-center gap-2">
+              <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`}
+              >
+                <RefreshIcon size={12} />
+                {creating ? 'Generating...' : confirmRegenerate ? 'Confirm regenerate' : 'Regenerate'}
+              </button>
+              <button
+                onClick={handleDelete}
+                className={`inline-flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs font-medium border ${
+                  confirmDelete
+                    ? 'border-destructive text-destructive hover:bg-destructive/10'
+                    : 'border-border text-muted-foreground hover:text-destructive hover:border-destructive/50'
+                }`}
+              >
+                <TrashIcon size={12} />
+                {confirmDelete ? 'Confirm delete' : 'Delete'}
+              </button>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div className="rounded-lg border border-dashed bg-card p-6 flex flex-col items-center text-center">
+          <p className="text-sm text-muted-foreground mb-3">No API key configured</p>
+          <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"
+          >
+            {creating ? 'Creating...' : 'Create API key'}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Main page
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function SettingsSecretsPage() {
+  return (
+    <div>
+      <Section
+        title="API Key"
+        description="Authenticates external requests to /api endpoints. Pass via the x-api-key header."
+      >
+        <ApiKeySection />
+      </Section>
+
+      {/* Future sections go here, e.g.:
+      <Section title="GitHub Token" description="...">
+        <GitHubTokenSection />
+      </Section>
+      */}
+    </div>
+  );
+}

package/lib/chat/components/sidebar-history-item.js

@@ -0,0 +1,132 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { MessageIcon, TrashIcon, MoreHorizontalIcon, StarIcon, StarFilledIcon, PencilIcon } from "./icons.js";
+import { SidebarMenuButton, SidebarMenuItem, useSidebar } from "./ui/sidebar.js";
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator } from "./ui/dropdown-menu.js";
+import { ConfirmDialog } from "./ui/confirm-dialog.js";
+import { RenameDialog } from "./ui/rename-dialog.js";
+import { useChatNav } from "./chat-nav-context.js";
+import { cn } from "../utils.js";
+function SidebarHistoryItem({ chat, isActive, onDelete, onStar, onRename }) {
+  const { navigateToChat } = useChatNav();
+  const { setOpenMobile } = useSidebar();
+  const [hovered, setHovered] = useState(false);
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [confirmDelete, setConfirmDelete] = useState(false);
+  const [renameDialogOpen, setRenameDialogOpen] = useState(false);
+  const showMenu = hovered || dropdownOpen;
+  return /* @__PURE__ */ jsxs(SidebarMenuItem, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "relative group",
+        onMouseEnter: () => setHovered(true),
+        onMouseLeave: () => setHovered(false),
+        children: [
+          /* @__PURE__ */ jsxs(
+            SidebarMenuButton,
+            {
+              className: "pr-8",
+              isActive,
+              onClick: () => {
+                navigateToChat(chat.id);
+                setOpenMobile(false);
+              },
+              children: [
+                /* @__PURE__ */ jsx(MessageIcon, { size: 14 }),
+                /* @__PURE__ */ jsx("span", { className: "truncate flex-1", children: chat.title })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: cn(
+            "absolute right-1 top-1/2 -translate-y-1/2 z-10",
+            showMenu ? "opacity-100" : "opacity-0 pointer-events-none"
+          ), children: /* @__PURE__ */ jsxs(DropdownMenu, { open: dropdownOpen, onOpenChange: setDropdownOpen, children: [
+            /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: cn(
+                  "rounded-md p-1",
+                  "text-muted-foreground hover:text-foreground",
+                  "bg-foreground/10 hover:bg-foreground/15"
+                ),
+                "aria-label": "Chat options",
+                children: /* @__PURE__ */ jsx(MoreHorizontalIcon, { size: 16 })
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", side: "bottom", children: [
+              /* @__PURE__ */ jsxs(
+                DropdownMenuItem,
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onStar(chat.id);
+                  },
+                  children: [
+                    chat.starred ? /* @__PURE__ */ jsx(StarFilledIcon, { size: 14 }) : /* @__PURE__ */ jsx(StarIcon, { size: 14 }),
+                    chat.starred ? "Unstar" : "Star"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                DropdownMenuItem,
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    setRenameDialogOpen(true);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(PencilIcon, { size: 14 }),
+                    "Rename"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+              /* @__PURE__ */ jsxs(
+                DropdownMenuItem,
+                {
+                  className: "text-destructive hover:text-destructive",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    setConfirmDelete(true);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(TrashIcon, { size: 14 }),
+                    "Delete"
+                  ]
+                }
+              )
+            ] })
+          ] }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ConfirmDialog,
+      {
+        open: confirmDelete,
+        title: "Delete chat?",
+        description: "This will permanently delete this chat and all its messages.",
+        confirmLabel: "Delete",
+        onConfirm: () => {
+          setConfirmDelete(false);
+          onDelete(chat.id);
+        },
+        onCancel: () => setConfirmDelete(false)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      RenameDialog,
+      {
+        open: renameDialogOpen,
+        currentValue: chat.title || "",
+        onSave: (newTitle) => onRename(chat.id, newTitle),
+        onCancel: () => setRenameDialogOpen(false)
+      }
+    )
+  ] });
+}
+export {
+  SidebarHistoryItem
+};

package/lib/chat/components/sidebar-history-item.jsx

@@ -0,0 +1,113 @@
+'use client';
+
+import { useState } from 'react';
+import { MessageIcon, TrashIcon, MoreHorizontalIcon, StarIcon, StarFilledIcon, PencilIcon } from './icons.js';
+import { SidebarMenuButton, SidebarMenuItem, useSidebar } from './ui/sidebar.js';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator } from './ui/dropdown-menu.js';
+import { ConfirmDialog } from './ui/confirm-dialog.js';
+import { RenameDialog } from './ui/rename-dialog.js';
+import { useChatNav } from './chat-nav-context.js';
+import { cn } from '../utils.js';
+
+export function SidebarHistoryItem({ chat, isActive, onDelete, onStar, onRename }) {
+  const { navigateToChat } = useChatNav();
+  const { setOpenMobile } = useSidebar();
+  const [hovered, setHovered] = useState(false);
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [confirmDelete, setConfirmDelete] = useState(false);
+  const [renameDialogOpen, setRenameDialogOpen] = useState(false);
+
+  const showMenu = hovered || dropdownOpen;
+
+  return (
+    <SidebarMenuItem>
+      <div
+        className="relative group"
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
+      >
+        <SidebarMenuButton
+          className="pr-8"
+          isActive={isActive}
+          onClick={() => {
+            navigateToChat(chat.id);
+            setOpenMobile(false);
+          }}
+        >
+          <MessageIcon size={14} />
+          <span className="truncate flex-1">
+            {chat.title}
+          </span>
+        </SidebarMenuButton>
+
+        <div className={cn(
+          'absolute right-1 top-1/2 -translate-y-1/2 z-10',
+          showMenu ? 'opacity-100' : 'opacity-0 pointer-events-none'
+        )}>
+          <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
+            <DropdownMenuTrigger asChild>
+              <button
+                className={cn(
+                  'rounded-md p-1',
+                  'text-muted-foreground hover:text-foreground',
+                  'bg-foreground/10 hover:bg-foreground/15'
+                )}
+                aria-label="Chat options"
+              >
+                <MoreHorizontalIcon size={16} />
+              </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" side="bottom">
+              <DropdownMenuItem
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onStar(chat.id);
+                }}
+              >
+                {chat.starred ? <StarFilledIcon size={14} /> : <StarIcon size={14} />}
+                {chat.starred ? 'Unstar' : 'Star'}
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setRenameDialogOpen(true);
+                }}
+              >
+                <PencilIcon size={14} />
+                Rename
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                className="text-destructive hover:text-destructive"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setConfirmDelete(true);
+                }}
+              >
+                <TrashIcon size={14} />
+                Delete
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+      <ConfirmDialog
+        open={confirmDelete}
+        title="Delete chat?"
+        description="This will permanently delete this chat and all its messages."
+        confirmLabel="Delete"
+        onConfirm={() => {
+          setConfirmDelete(false);
+          onDelete(chat.id);
+        }}
+        onCancel={() => setConfirmDelete(false)}
+      />
+      <RenameDialog
+        open={renameDialogOpen}
+        currentValue={chat.title || ''}
+        onSave={(newTitle) => onRename(chat.id, newTitle)}
+        onCancel={() => setRenameDialogOpen(false)}
+      />
+    </SidebarMenuItem>
+  );
+}

package/lib/chat/components/sidebar-history.js

@@ -0,0 +1,115 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { SidebarHistoryItem } from "./sidebar-history-item.js";
+import { SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu } from "./ui/sidebar.js";
+import { useChatNav } from "./chat-nav-context.js";
+import { getChats, deleteChat, renameChat, starChat } from "../actions.js";
+function groupChatsByDate(chats) {
+  const now = /* @__PURE__ */ new Date();
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  const yesterday = new Date(today.getTime() - 864e5);
+  const last7Days = new Date(today.getTime() - 7 * 864e5);
+  const last30Days = new Date(today.getTime() - 30 * 864e5);
+  const groups = {
+    Starred: [],
+    Today: [],
+    Yesterday: [],
+    "Last 7 Days": [],
+    "Last 30 Days": [],
+    Older: []
+  };
+  for (const chat of chats) {
+    if (chat.starred) {
+      groups.Starred.push(chat);
+      continue;
+    }
+    const date = new Date(chat.updatedAt);
+    if (date >= today) {
+      groups.Today.push(chat);
+    } else if (date >= yesterday) {
+      groups.Yesterday.push(chat);
+    } else if (date >= last7Days) {
+      groups["Last 7 Days"].push(chat);
+    } else if (date >= last30Days) {
+      groups["Last 30 Days"].push(chat);
+    } else {
+      groups.Older.push(chat);
+    }
+  }
+  return groups;
+}
+function SidebarHistory() {
+  const [chats, setChats] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const { activeChatId, navigateToChat } = useChatNav();
+  const loadChats = async () => {
+    try {
+      const result = await getChats();
+      setChats(result);
+    } catch (err) {
+      console.error("Failed to load chats:", err);
+    } finally {
+      setLoading(false);
+    }
+  };
+  useEffect(() => {
+    loadChats();
+  }, [activeChatId]);
+  useEffect(() => {
+    const handler = () => loadChats();
+    window.addEventListener("chatsupdated", handler);
+    return () => window.removeEventListener("chatsupdated", handler);
+  }, []);
+  const handleDelete = async (chatId) => {
+    setChats((prev) => prev.filter((c) => c.id !== chatId));
+    const { success } = await deleteChat(chatId);
+    if (success) {
+      if (chatId === activeChatId) {
+        navigateToChat(null);
+      }
+    } else {
+      loadChats();
+    }
+  };
+  const handleStar = async (chatId) => {
+    setChats(
+      (prev) => prev.map((c) => c.id === chatId ? { ...c, starred: c.starred ? 0 : 1 } : c)
+    );
+    const { success } = await starChat(chatId);
+    if (!success) loadChats();
+  };
+  const handleRename = async (chatId, title) => {
+    setChats(
+      (prev) => prev.map((c) => c.id === chatId ? { ...c, title } : c)
+    );
+    const { success } = await renameChat(chatId, title);
+    if (!success) loadChats();
+  };
+  if (loading && chats.length === 0) {
+    return /* @__PURE__ */ jsx(SidebarGroup, { children: /* @__PURE__ */ jsx(SidebarGroupContent, { children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 px-2", children: [...Array(5)].map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-8 animate-pulse rounded-md bg-border/50" }, i)) }) }) });
+  }
+  if (chats.length === 0) {
+    return /* @__PURE__ */ jsx(SidebarGroup, { children: /* @__PURE__ */ jsx(SidebarGroupContent, { children: /* @__PURE__ */ jsx("p", { className: "px-4 py-2 text-sm text-muted-foreground", children: "No chats yet. Start a conversation!" }) }) });
+  }
+  const grouped = groupChatsByDate(chats);
+  return /* @__PURE__ */ jsx(Fragment, { children: Object.entries(grouped).map(
+    ([label, groupChats]) => groupChats.length > 0 && /* @__PURE__ */ jsxs(SidebarGroup, { children: [
+      /* @__PURE__ */ jsx(SidebarGroupLabel, { children: label }),
+      /* @__PURE__ */ jsx(SidebarGroupContent, { children: /* @__PURE__ */ jsx(SidebarMenu, { children: groupChats.map((chat) => /* @__PURE__ */ jsx(
+        SidebarHistoryItem,
+        {
+          chat,
+          isActive: chat.id === activeChatId,
+          onDelete: handleDelete,
+          onStar: handleStar,
+          onRename: handleRename
+        },
+        chat.id
+      )) }) })
+    ] }, label)
+  ) });
+}
+export {
+  SidebarHistory
+};