@harbinger-ai/harbinger 0.1.0

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

@@ -0,0 +1,157 @@
+'use client';
+
+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 = new Date();
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  const yesterday = new Date(today.getTime() - 86400000);
+  const last7Days = new Date(today.getTime() - 7 * 86400000);
+  const last30Days = new Date(today.getTime() - 30 * 86400000);
+
+  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;
+}
+
+export 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);
+    }
+  };
+
+  // Load chats on mount and refresh when navigating between pages
+  useEffect(() => {
+    loadChats();
+  }, [activeChatId]);
+
+  // Reload when chats change (new chat created or title updated)
+  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 (
+      <SidebarGroup>
+        <SidebarGroupContent>
+          <div className="flex flex-col gap-2 px-2">
+            {[...Array(5)].map((_, i) => (
+              <div key={i} className="h-8 animate-pulse rounded-md bg-border/50" />
+            ))}
+          </div>
+        </SidebarGroupContent>
+      </SidebarGroup>
+    );
+  }
+
+  if (chats.length === 0) {
+    return (
+      <SidebarGroup>
+        <SidebarGroupContent>
+          <p className="px-4 py-2 text-sm text-muted-foreground">
+            No chats yet. Start a conversation!
+          </p>
+        </SidebarGroupContent>
+      </SidebarGroup>
+    );
+  }
+
+  const grouped = groupChatsByDate(chats);
+
+  return (
+    <>
+      {Object.entries(grouped).map(
+        ([label, groupChats]) =>
+          groupChats.length > 0 && (
+            <SidebarGroup key={label}>
+              <SidebarGroupLabel>{label}</SidebarGroupLabel>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {groupChats.map((chat) => (
+                    <SidebarHistoryItem
+                      key={chat.id}
+                      chat={chat}
+                      isActive={chat.id === activeChatId}
+                      onDelete={handleDelete}
+                      onStar={handleStar}
+                      onRename={handleRename}
+                    />
+                  ))}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          )
+      )}
+    </>
+  );
+}

package/lib/chat/components/sidebar-user-nav.js

@@ -0,0 +1,63 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { signOut } from "next-auth/react";
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from "./ui/dropdown-menu.js";
+import { SidebarMenu, SidebarMenuItem, SidebarMenuButton } from "./ui/sidebar.js";
+import { SettingsIcon, SunIcon, MoonIcon, BugIcon, LogOutIcon } from "./icons.js";
+import { cn } from "../utils.js";
+function SidebarUserNav({ user, collapsed }) {
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  return /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(SidebarMenuButton, { className: cn(collapsed ? "justify-center" : "justify-between"), children: [
+      /* @__PURE__ */ jsxs("div", { className: cn("flex items-center overflow-hidden", collapsed ? "" : "gap-2"), children: [
+        /* @__PURE__ */ jsx("div", { className: "flex size-6 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground text-xs font-medium", children: (user?.email?.[0] || "U").toUpperCase() }),
+        !collapsed && /* @__PURE__ */ jsx("span", { className: "truncate text-sm", children: user?.email || "User" })
+      ] }),
+      !collapsed && /* @__PURE__ */ jsxs("svg", { className: "size-4 text-muted-foreground", width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: [
+        /* @__PURE__ */ jsx("path", { d: "m7 15 5 5 5-5" }),
+        /* @__PURE__ */ jsx("path", { d: "m7 9 5-5 5 5" })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", side: "top", className: "w-56", children: [
+      /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => {
+        window.location.href = "/settings";
+      }, children: [
+        /* @__PURE__ */ jsx(SettingsIcon, { size: 14 }),
+        /* @__PURE__ */ jsx("span", { className: "ml-2", children: "Settings" })
+      ] }),
+      mounted && /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => setTheme(theme === "dark" ? "light" : "dark"), children: [
+        theme === "dark" ? /* @__PURE__ */ jsx(SunIcon, { size: 14 }) : /* @__PURE__ */ jsx(MoonIcon, { size: 14 }),
+        /* @__PURE__ */ jsx("span", { className: "ml-2", children: theme === "dark" ? "Light Mode" : "Dark Mode" })
+      ] }),
+      /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => window.open("https://github.com/stephengpope/thepopebot/issues", "_blank"), children: [
+        /* @__PURE__ */ jsx(BugIcon, { size: 14 }),
+        /* @__PURE__ */ jsx("span", { className: "ml-2", children: "Report Issues" })
+      ] }),
+      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsxs(
+        DropdownMenuItem,
+        {
+          onClick: () => signOut({ callbackUrl: "/" }),
+          className: "text-destructive",
+          children: [
+            /* @__PURE__ */ jsx(LogOutIcon, { size: 14 }),
+            /* @__PURE__ */ jsx("span", { className: "ml-2", children: "Sign Out" })
+          ]
+        }
+      )
+    ] })
+  ] }) }) });
+}
+export {
+  SidebarUserNav
+};

package/lib/chat/components/sidebar-user-nav.jsx

@@ -0,0 +1,73 @@
+'use client';
+
+import { signOut } from 'next-auth/react';
+import { useTheme } from 'next-themes';
+import { useEffect, useState } from 'react';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from './ui/dropdown-menu.js';
+import { SidebarMenu, SidebarMenuItem, SidebarMenuButton } from './ui/sidebar.js';
+import { SettingsIcon, SunIcon, MoonIcon, BugIcon, LogOutIcon } from './icons.js';
+import { cn } from '../utils.js';
+
+export function SidebarUserNav({ user, collapsed }) {
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => setMounted(true), []);
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton className={cn(collapsed ? 'justify-center' : 'justify-between')}>
+              <div className={cn('flex items-center overflow-hidden', collapsed ? '' : 'gap-2')}>
+                <div className="flex size-6 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground text-xs font-medium">
+                  {(user?.email?.[0] || 'U').toUpperCase()}
+                </div>
+                {!collapsed && (
+                  <span className="truncate text-sm">{user?.email || 'User'}</span>
+                )}
+              </div>
+              {!collapsed && (
+                <svg className="size-4 text-muted-foreground" width={16} height={16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+                  <path d="m7 15 5 5 5-5" />
+                  <path d="m7 9 5-5 5 5" />
+                </svg>
+              )}
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start" side="top" className="w-56">
+            <DropdownMenuItem onClick={() => { window.location.href = '/settings'; }}>
+              <SettingsIcon size={14} />
+              <span className="ml-2">Settings</span>
+            </DropdownMenuItem>
+            {mounted && (
+              <DropdownMenuItem onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
+                {theme === 'dark' ? <SunIcon size={14} /> : <MoonIcon size={14} />}
+                <span className="ml-2">{theme === 'dark' ? 'Light Mode' : 'Dark Mode'}</span>
+              </DropdownMenuItem>
+            )}
+            <DropdownMenuItem onClick={() => window.open('https://github.com/stephengpope/thepopebot/issues', '_blank')}>
+              <BugIcon size={14} />
+              <span className="ml-2">Report Issues</span>
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              onClick={() => signOut({ callbackUrl: '/' })}
+              className="text-destructive"
+            >
+              <LogOutIcon size={14} />
+              <span className="ml-2">Sign Out</span>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+}

package/lib/chat/components/status-bar.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../utils.js";
+function StatusBar({ status, toolCount = 0, showToolPanel, onToggleToolPanel }) {
+  const isActive = status === "streaming" || status === "submitted";
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-1.5 border-b border-white/[0.06] bg-[--card]/50 backdrop-blur-sm", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx("div", { className: cn(
+          "w-1.5 h-1.5 rounded-full",
+          isActive ? "bg-[--success] animate-pulse" : "bg-muted-foreground/40"
+        ) }),
+        /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] uppercase tracking-wider text-muted-foreground", children: isActive ? "Live" : "Ready" })
+      ] }),
+      toolCount > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className: "text-[--cyan]", children: /* @__PURE__ */ jsx("path", { d: "M13 2 3 14h9l-1 10 10-12h-9l1-10z" }) }),
+        /* @__PURE__ */ jsxs("span", { className: "font-mono text-[10px] text-muted-foreground", children: [
+          toolCount,
+          " tool",
+          toolCount !== 1 ? "s" : ""
+        ] })
+      ] })
+    ] }),
+    toolCount > 0 && /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: onToggleToolPanel,
+        className: cn(
+          "font-mono text-[10px] uppercase tracking-wider px-2 py-0.5 rounded transition-colors",
+          showToolPanel ? "text-[--cyan] bg-[--cyan]/10" : "text-muted-foreground hover:text-foreground"
+        ),
+        children: showToolPanel ? "Hide Panel" : "Show Panel"
+      }
+    )
+  ] });
+}
+export {
+  StatusBar
+};

package/lib/chat/components/status-bar.jsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { cn } from '../utils.js';
+
+export function StatusBar({ status, toolCount = 0, showToolPanel, onToggleToolPanel }) {
+  const isActive = status === 'streaming' || status === 'submitted';
+
+  return (
+    <div className="flex items-center justify-between px-4 py-1.5 border-b border-white/[0.06] bg-[--card]/50 backdrop-blur-sm">
+      <div className="flex items-center gap-3">
+        {/* Status indicator */}
+        <div className="flex items-center gap-1.5">
+          <div className={cn(
+            'w-1.5 h-1.5 rounded-full',
+            isActive ? 'bg-[--success] animate-pulse' : 'bg-muted-foreground/40'
+          )} />
+          <span className="font-mono text-[10px] uppercase tracking-wider text-muted-foreground">
+            {isActive ? 'Live' : 'Ready'}
+          </span>
+        </div>
+
+        {/* Tool count */}
+        {toolCount > 0 && (
+          <div className="flex items-center gap-1.5">
+            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" className="text-[--cyan]">
+              <path d="M13 2 3 14h9l-1 10 10-12h-9l1-10z" />
+            </svg>
+            <span className="font-mono text-[10px] text-muted-foreground">
+              {toolCount} tool{toolCount !== 1 ? 's' : ''}
+            </span>
+          </div>
+        )}
+      </div>
+
+      {/* Panel toggle */}
+      {toolCount > 0 && (
+        <button
+          onClick={onToggleToolPanel}
+          className={cn(
+            'font-mono text-[10px] uppercase tracking-wider px-2 py-0.5 rounded transition-colors',
+            showToolPanel
+              ? 'text-[--cyan] bg-[--cyan]/10'
+              : 'text-muted-foreground hover:text-foreground'
+          )}
+        >
+          {showToolPanel ? 'Hide Panel' : 'Show Panel'}
+        </button>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,157 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from "react";
+import { PageLayout } from "./page-layout.js";
+import { SpinnerIcon, RefreshIcon } from "./icons.js";
+import { getSwarmStatus } from "../actions.js";
+function formatDuration(seconds) {
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.floor(seconds / 60);
+  const secs = seconds % 60;
+  if (minutes < 60) return `${minutes}m ${secs}s`;
+  const hours = Math.floor(minutes / 60);
+  const mins = minutes % 60;
+  return `${hours}h ${mins}m`;
+}
+function timeAgo(timestamp) {
+  const seconds = Math.floor((Date.now() - new Date(timestamp).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 LoadingSkeleton() {
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: [...Array(5)].map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-14 animate-pulse rounded-md bg-border/50" }, i)) });
+}
+const conclusionBadgeStyles = {
+  success: "bg-green-500/10 text-green-500",
+  failure: "bg-red-500/10 text-red-500",
+  cancelled: "bg-yellow-500/10 text-yellow-500",
+  skipped: "bg-muted text-muted-foreground"
+};
+function SwarmWorkflowList({ runs }) {
+  if (!runs || runs.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground py-4 text-center", children: "No workflow runs." });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col divide-y divide-border", children: runs.map((run) => {
+    const isActive = run.status === "in_progress" || run.status === "queued";
+    const isRunning = run.status === "in_progress";
+    const isQueued = run.status === "queued";
+    return /* @__PURE__ */ jsxs(
+      "a",
+      {
+        href: run.html_url,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "flex items-center gap-3 py-3 px-2 -mx-2 rounded-md hover:bg-accent transition-colors no-underline text-inherit",
+        children: [
+          isRunning && /* @__PURE__ */ jsx("span", { className: "inline-block h-2.5 w-2.5 shrink-0 rounded-full bg-green-500 animate-pulse" }),
+          isQueued && /* @__PURE__ */ jsx("span", { className: "inline-block h-2.5 w-2.5 shrink-0 rounded-full bg-yellow-500" }),
+          !isActive && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium uppercase shrink-0 ${conclusionBadgeStyles[run.conclusion] || "bg-muted text-muted-foreground"}`,
+              children: run.conclusion || "unknown"
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium truncate", children: run.workflow_name || run.branch }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground shrink-0", children: isActive ? formatDuration(run.duration_seconds) : timeAgo(run.updated_at || run.started_at) }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-blue-500 shrink-0", children: "View" })
+        ]
+      },
+      run.run_id
+    );
+  }) });
+}
+function SwarmPage({ session }) {
+  const [runs, setRuns] = useState([]);
+  const [hasMore, setHasMore] = useState(false);
+  const [page, setPage] = useState(1);
+  const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
+  const fetchPage = useCallback(async (p) => {
+    try {
+      const data = await getSwarmStatus(p);
+      setRuns(data.runs || []);
+      setHasMore(data.hasMore || false);
+      setPage(p);
+    } catch (err) {
+      console.error("Failed to fetch swarm status:", err);
+    } finally {
+      setLoading(false);
+      setRefreshing(false);
+    }
+  }, []);
+  useEffect(() => {
+    fetchPage(1);
+  }, [fetchPage]);
+  useEffect(() => {
+    const interval = setInterval(() => fetchPage(page), 1e4);
+    return () => clearInterval(interval);
+  }, [fetchPage, page]);
+  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: "Swarm" }),
+      !loading && /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => {
+            setRefreshing(true);
+            fetchPage(1);
+          },
+          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"
+          ] })
+        }
+      )
+    ] }),
+    loading ? /* @__PURE__ */ jsx(LoadingSkeleton, {}) : /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(SwarmWorkflowList, { runs }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mt-4 pt-4 border-t border-border", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => {
+              setRefreshing(true);
+              fetchPage(page - 1);
+            },
+            disabled: page <= 1 || refreshing,
+            className: "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium border border-border bg-background text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50 disabled:pointer-events-none",
+            children: "Previous"
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground", children: [
+          "Page ",
+          page
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => {
+              setRefreshing(true);
+              fetchPage(page + 1);
+            },
+            disabled: !hasMore || refreshing,
+            className: "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium border border-border bg-background text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50 disabled:pointer-events-none",
+            children: "Next"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+export {
+  SwarmPage
+};