@harbinger-ai/harbinger 0.1.0

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

@@ -0,0 +1,237 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { CirclePlusIcon, PanelLeftIcon, MessageIcon, BellIcon, SwarmIcon, ArrowUpCircleIcon, LifeBuoyIcon, CrosshairIcon, ShieldIcon, PackageIcon } from "./icons.js";
+import { getUnreadNotificationCount, getAppVersion } from "../actions.js";
+import { SidebarHistory } from "./sidebar-history.js";
+import { SidebarUserNav } from "./sidebar-user-nav.js";
+import { UpgradeDialog } from "./upgrade-dialog.js";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarMenuButton,
+  useSidebar
+} from "./ui/sidebar.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip.js";
+import { useChatNav } from "./chat-nav-context.js";
+function AppSidebar({ user }) {
+  const { navigateToChat } = useChatNav();
+  const { state, open, setOpenMobile, toggleSidebar } = useSidebar();
+  const collapsed = state === "collapsed";
+  const [unreadCount, setUnreadCount] = useState(0);
+  const [version, setVersion] = useState("");
+  const [updateAvailable, setUpdateAvailable] = useState(null);
+  const [changelog, setChangelog] = useState(null);
+  const [upgradeOpen, setUpgradeOpen] = useState(false);
+  useEffect(() => {
+    getUnreadNotificationCount().then((count) => setUnreadCount(count)).catch(() => {
+    });
+    getAppVersion().then(({ version: version2, updateAvailable: updateAvailable2, changelog: changelog2 }) => {
+      setVersion(version2);
+      setUpdateAvailable(updateAvailable2);
+      setChangelog(changelog2);
+    }).catch(() => {
+    });
+  }, []);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Sidebar, { children: [
+      /* @__PURE__ */ jsxs(SidebarHeader, { children: [
+        /* @__PURE__ */ jsxs("div", { className: collapsed ? "flex justify-center" : "flex items-center justify-between", children: [
+          !collapsed && /* @__PURE__ */ jsxs("span", { className: "px-2 text-lg tracking-tight", style: { fontFamily: "var(--font-display)" }, children: [
+            /* @__PURE__ */ jsx("span", { className: "font-semibold text-[--cyan]", children: "Harbinger" }),
+            version && /* @__PURE__ */ jsxs("span", { className: "text-[10px] font-mono font-normal text-muted-foreground ml-1.5", children: [
+              "v",
+              version
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: "inline-flex shrink-0 items-center justify-center rounded-md p-2 text-muted-foreground hover:bg-white/[0.04] hover:text-foreground transition-colors",
+                onClick: toggleSidebar,
+                children: /* @__PURE__ */ jsx(PanelLeftIcon, { size: 16 })
+              }
+            ) }),
+            /* @__PURE__ */ jsx(TooltipContent, { side: collapsed ? "right" : "bottom", children: collapsed ? "Open sidebar" : "Close sidebar" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(SidebarMenu, { children: [
+          /* @__PURE__ */ jsx(SidebarMenuItem, { className: "mb-2", children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+              SidebarMenuButton,
+              {
+                className: collapsed ? "justify-center" : "",
+                onClick: () => {
+                  navigateToChat(null);
+                  setOpenMobile(false);
+                },
+                children: [
+                  /* @__PURE__ */ jsx(CirclePlusIcon, { size: 16 }),
+                  !collapsed && /* @__PURE__ */ jsx("span", { children: "New chat" })
+                ]
+              }
+            ) }),
+            collapsed && /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: "New chat" })
+          ] }) }),
+          /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+              SidebarMenuButton,
+              {
+                className: collapsed ? "justify-center" : "",
+                onClick: () => {
+                  window.location.href = "/chats";
+                },
+                children: [
+                  /* @__PURE__ */ jsx(MessageIcon, { size: 16 }),
+                  !collapsed && /* @__PURE__ */ jsx("span", { children: "Chats" })
+                ]
+              }
+            ) }),
+            collapsed && /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: "Chats" })
+          ] }) }),
+          /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+              SidebarMenuButton,
+              {
+                className: collapsed ? "justify-center" : "",
+                onClick: () => {
+                  window.location.href = "/swarm";
+                },
+                children: [
+                  /* @__PURE__ */ jsx(SwarmIcon, { size: 16 }),
+                  !collapsed && /* @__PURE__ */ jsx("span", { children: "Swarm" })
+                ]
+              }
+            ) }),
+            collapsed && /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: "Swarm" })
+          ] }) }),
+          /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+              SidebarMenuButton,
+              {
+                className: collapsed ? "justify-center" : "",
+                onClick: () => {
+                  window.location.href = "/targets";
+                },
+                children: [
+                  /* @__PURE__ */ jsx(CrosshairIcon, { size: 16 }),
+                  !collapsed && /* @__PURE__ */ jsx("span", { children: "Targets" })
+                ]
+              }
+            ) }),
+            collapsed && /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: "Targets" })
+          ] }) }),
+          /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+              SidebarMenuButton,
+              {
+                className: collapsed ? "justify-center" : "",
+                onClick: () => {
+                  window.location.href = "/findings";
+                },
+                children: [
+                  /* @__PURE__ */ jsx(ShieldIcon, { size: 16 }),
+                  !collapsed && /* @__PURE__ */ jsx("span", { children: "Findings" })
+                ]
+              }
+            ) }),
+            collapsed && /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: "Findings" })
+          ] }) }),
+          /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+              SidebarMenuButton,
+              {
+                className: collapsed ? "justify-center" : "",
+                onClick: () => {
+                  window.location.href = "/toolbox";
+                },
+                children: [
+                  /* @__PURE__ */ jsx(PackageIcon, { size: 16 }),
+                  !collapsed && /* @__PURE__ */ jsx("span", { children: "Toolbox" })
+                ]
+              }
+            ) }),
+            collapsed && /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: "Toolbox" })
+          ] }) }),
+          /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+              SidebarMenuButton,
+              {
+                className: collapsed ? "justify-center" : "",
+                onClick: () => {
+                  window.location.href = "/notifications";
+                },
+                children: [
+                  /* @__PURE__ */ jsx(BellIcon, { size: 16 }),
+                  !collapsed && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+                    "Notifications",
+                    unreadCount > 0 && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center rounded-full bg-[--destructive] px-1.5 py-0.5 text-[10px] font-medium leading-none text-white", children: unreadCount })
+                  ] }),
+                  collapsed && unreadCount > 0 && /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-1 inline-flex h-4 w-4 items-center justify-center rounded-full bg-[--destructive] text-[10px] font-medium text-white", children: unreadCount })
+                ]
+              }
+            ) }),
+            collapsed && /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: "Notifications" })
+          ] }) }),
+          updateAvailable && /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+              SidebarMenuButton,
+              {
+                className: collapsed ? "justify-center" : "",
+                onClick: () => setUpgradeOpen(true),
+                children: [
+                  /* @__PURE__ */ jsxs("span", { className: "relative", children: [
+                    /* @__PURE__ */ jsx(ArrowUpCircleIcon, { size: 16 }),
+                    collapsed && /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-1 inline-block h-2 w-2 rounded-full bg-[--cyan]" })
+                  ] }),
+                  !collapsed && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+                    "Upgrade",
+                    /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center justify-center rounded-full bg-[--cyan] px-1.5 py-0.5 text-[10px] font-medium leading-none text-primary-foreground", children: [
+                      "v",
+                      updateAvailable
+                    ] })
+                  ] })
+                ]
+              }
+            ) }),
+            collapsed && /* @__PURE__ */ jsxs(TooltipContent, { side: "right", children: [
+              "Upgrade to v",
+              updateAvailable
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+              SidebarMenuButton,
+              {
+                className: collapsed ? "justify-center" : "",
+                onClick: () => window.open("https://www.skool.com/ai-architects", "_blank"),
+                children: [
+                  /* @__PURE__ */ jsx(LifeBuoyIcon, { size: 16 }),
+                  !collapsed && /* @__PURE__ */ jsx("span", { children: "Support" })
+                ]
+              }
+            ) }),
+            collapsed && /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: "Support" })
+          ] }) })
+        ] })
+      ] }),
+      !collapsed && /* @__PURE__ */ jsxs(SidebarContent, { children: [
+        /* @__PURE__ */ jsx(SidebarGroup, { className: "pt-0", children: /* @__PURE__ */ jsx(SidebarGroupLabel, { className: "font-mono text-[10px] uppercase tracking-wider", children: "Chats" }) }),
+        /* @__PURE__ */ jsx(SidebarHistory, {})
+      ] }),
+      collapsed && /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+      /* @__PURE__ */ jsx(SidebarFooter, { children: user && /* @__PURE__ */ jsx(SidebarUserNav, { user, collapsed }) })
+    ] }),
+    /* @__PURE__ */ jsx(UpgradeDialog, { open: upgradeOpen, onClose: () => setUpgradeOpen(false), version, updateAvailable, changelog })
+  ] });
+}
+export {
+  AppSidebar
+};

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

@@ -0,0 +1,289 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { CirclePlusIcon, PanelLeftIcon, MessageIcon, BellIcon, SwarmIcon, ArrowUpCircleIcon, LifeBuoyIcon, CrosshairIcon, ShieldIcon, PackageIcon } from './icons.js';
+import { getUnreadNotificationCount, getAppVersion } from '../actions.js';
+import { SidebarHistory } from './sidebar-history.js';
+import { SidebarUserNav } from './sidebar-user-nav.js';
+import { UpgradeDialog } from './upgrade-dialog.js';
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarMenuButton,
+  useSidebar,
+} from './ui/sidebar.js';
+import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip.js';
+import { useChatNav } from './chat-nav-context.js';
+
+export function AppSidebar({ user }) {
+  const { navigateToChat } = useChatNav();
+  const { state, open, setOpenMobile, toggleSidebar } = useSidebar();
+  const collapsed = state === 'collapsed';
+  const [unreadCount, setUnreadCount] = useState(0);
+  const [version, setVersion] = useState('');
+  const [updateAvailable, setUpdateAvailable] = useState(null);
+  const [changelog, setChangelog] = useState(null);
+  const [upgradeOpen, setUpgradeOpen] = useState(false);
+
+  useEffect(() => {
+    getUnreadNotificationCount()
+      .then((count) => setUnreadCount(count))
+      .catch(() => {});
+    getAppVersion()
+      .then(({ version, updateAvailable, changelog }) => {
+        setVersion(version);
+        setUpdateAvailable(updateAvailable);
+        setChangelog(changelog);
+      })
+      .catch(() => {});
+  }, []);
+
+  return (
+    <>
+    <Sidebar>
+      <SidebarHeader>
+        {/* Top row: brand name + toggle */}
+        <div className={collapsed ? 'flex justify-center' : 'flex items-center justify-between'}>
+          {!collapsed && (
+            <span className="px-2 text-lg tracking-tight" style={{ fontFamily: 'var(--font-display)' }}>
+              <span className="font-semibold text-[--cyan]">Harbinger</span>
+              {version && <span className="text-[10px] font-mono font-normal text-muted-foreground ml-1.5">v{version}</span>}
+            </span>
+          )}
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                className="inline-flex shrink-0 items-center justify-center rounded-md p-2 text-muted-foreground hover:bg-white/[0.04] hover:text-foreground transition-colors"
+                onClick={toggleSidebar}
+              >
+                <PanelLeftIcon size={16} />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side={collapsed ? 'right' : 'bottom'}>
+              {collapsed ? 'Open sidebar' : 'Close sidebar'}
+            </TooltipContent>
+          </Tooltip>
+        </div>
+
+        <SidebarMenu>
+          {/* New chat */}
+          <SidebarMenuItem className="mb-2">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <SidebarMenuButton
+                  className={collapsed ? 'justify-center' : ''}
+                  onClick={() => {
+                    navigateToChat(null);
+                    setOpenMobile(false);
+                  }}
+                >
+                  <CirclePlusIcon size={16} />
+                  {!collapsed && <span>New chat</span>}
+                </SidebarMenuButton>
+              </TooltipTrigger>
+              {collapsed && (
+                <TooltipContent side="right">New chat</TooltipContent>
+              )}
+            </Tooltip>
+          </SidebarMenuItem>
+
+          {/* Chats */}
+          <SidebarMenuItem>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <SidebarMenuButton
+                  className={collapsed ? 'justify-center' : ''}
+                  onClick={() => { window.location.href = '/chats'; }}
+                >
+                  <MessageIcon size={16} />
+                  {!collapsed && <span>Chats</span>}
+                </SidebarMenuButton>
+              </TooltipTrigger>
+              {collapsed && (
+                <TooltipContent side="right">Chats</TooltipContent>
+              )}
+            </Tooltip>
+          </SidebarMenuItem>
+
+          {/* Swarm */}
+          <SidebarMenuItem>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <SidebarMenuButton
+                  className={collapsed ? 'justify-center' : ''}
+                  onClick={() => { window.location.href = '/swarm'; }}
+                >
+                  <SwarmIcon size={16} />
+                  {!collapsed && <span>Swarm</span>}
+                </SidebarMenuButton>
+              </TooltipTrigger>
+              {collapsed && (
+                <TooltipContent side="right">Swarm</TooltipContent>
+              )}
+            </Tooltip>
+          </SidebarMenuItem>
+
+          {/* Targets */}
+          <SidebarMenuItem>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <SidebarMenuButton
+                  className={collapsed ? 'justify-center' : ''}
+                  onClick={() => { window.location.href = '/targets'; }}
+                >
+                  <CrosshairIcon size={16} />
+                  {!collapsed && <span>Targets</span>}
+                </SidebarMenuButton>
+              </TooltipTrigger>
+              {collapsed && (
+                <TooltipContent side="right">Targets</TooltipContent>
+              )}
+            </Tooltip>
+          </SidebarMenuItem>
+
+          {/* Findings */}
+          <SidebarMenuItem>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <SidebarMenuButton
+                  className={collapsed ? 'justify-center' : ''}
+                  onClick={() => { window.location.href = '/findings'; }}
+                >
+                  <ShieldIcon size={16} />
+                  {!collapsed && <span>Findings</span>}
+                </SidebarMenuButton>
+              </TooltipTrigger>
+              {collapsed && (
+                <TooltipContent side="right">Findings</TooltipContent>
+              )}
+            </Tooltip>
+          </SidebarMenuItem>
+
+          {/* Toolbox */}
+          <SidebarMenuItem>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <SidebarMenuButton
+                  className={collapsed ? 'justify-center' : ''}
+                  onClick={() => { window.location.href = '/toolbox'; }}
+                >
+                  <PackageIcon size={16} />
+                  {!collapsed && <span>Toolbox</span>}
+                </SidebarMenuButton>
+              </TooltipTrigger>
+              {collapsed && (
+                <TooltipContent side="right">Toolbox</TooltipContent>
+              )}
+            </Tooltip>
+          </SidebarMenuItem>
+
+          {/* Notifications */}
+          <SidebarMenuItem>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <SidebarMenuButton
+                  className={collapsed ? 'justify-center' : ''}
+                  onClick={() => { window.location.href = '/notifications'; }}
+                >
+                  <BellIcon size={16} />
+                  {!collapsed && (
+                    <span className="flex items-center gap-2">
+                      Notifications
+                      {unreadCount > 0 && (
+                        <span className="inline-flex items-center justify-center rounded-full bg-[--destructive] px-1.5 py-0.5 text-[10px] font-medium leading-none text-white">
+                          {unreadCount}
+                        </span>
+                      )}
+                    </span>
+                  )}
+                  {collapsed && unreadCount > 0 && (
+                    <span className="absolute -top-1 -right-1 inline-flex h-4 w-4 items-center justify-center rounded-full bg-[--destructive] text-[10px] font-medium text-white">
+                      {unreadCount}
+                    </span>
+                  )}
+                </SidebarMenuButton>
+              </TooltipTrigger>
+              {collapsed && (
+                <TooltipContent side="right">Notifications</TooltipContent>
+              )}
+            </Tooltip>
+          </SidebarMenuItem>
+
+          {/* Upgrade */}
+          {updateAvailable && (
+            <SidebarMenuItem>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <SidebarMenuButton
+                    className={collapsed ? 'justify-center' : ''}
+                    onClick={() => setUpgradeOpen(true)}
+                  >
+                    <span className="relative">
+                      <ArrowUpCircleIcon size={16} />
+                      {collapsed && (
+                        <span className="absolute -top-1 -right-1 inline-block h-2 w-2 rounded-full bg-[--cyan]" />
+                      )}
+                    </span>
+                    {!collapsed && (
+                      <span className="flex items-center gap-2">
+                        Upgrade
+                        <span className="inline-flex items-center justify-center rounded-full bg-[--cyan] px-1.5 py-0.5 text-[10px] font-medium leading-none text-primary-foreground">
+                          v{updateAvailable}
+                        </span>
+                      </span>
+                    )}
+                  </SidebarMenuButton>
+                </TooltipTrigger>
+                {collapsed && (
+                  <TooltipContent side="right">Upgrade to v{updateAvailable}</TooltipContent>
+                )}
+              </Tooltip>
+            </SidebarMenuItem>
+          )}
+
+          {/* Support */}
+          <SidebarMenuItem>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <SidebarMenuButton
+                  className={collapsed ? 'justify-center' : ''}
+                  onClick={() => window.open('https://www.skool.com/ai-architects', '_blank')}
+                >
+                  <LifeBuoyIcon size={16} />
+                  {!collapsed && <span>Support</span>}
+                </SidebarMenuButton>
+              </TooltipTrigger>
+              {collapsed && (
+                <TooltipContent side="right">Support</TooltipContent>
+              )}
+            </Tooltip>
+          </SidebarMenuItem>
+
+        </SidebarMenu>
+      </SidebarHeader>
+
+      {!collapsed && (
+        <SidebarContent>
+          <SidebarGroup className="pt-0">
+            <SidebarGroupLabel className="font-mono text-[10px] uppercase tracking-wider">Chats</SidebarGroupLabel>
+          </SidebarGroup>
+          <SidebarHistory />
+        </SidebarContent>
+      )}
+
+      {collapsed && <div className="flex-1" />}
+
+      <SidebarFooter>
+        {user && <SidebarUserNav user={user} collapsed={collapsed} />}
+      </SidebarFooter>
+    </Sidebar>
+    <UpgradeDialog open={upgradeOpen} onClose={() => setUpgradeOpen(false)} version={version} updateAvailable={updateAvailable} changelog={changelog} />
+    </>
+  );
+}

package/lib/chat/components/chat-header.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from "react";
+import { SidebarTrigger } from "./ui/sidebar.js";
+import { getChatTitle } from "../actions.js";
+function ChatHeader({ chatId }) {
+  const [title, setTitle] = useState(null);
+  const fetchTitle = useCallback(() => {
+    getChatTitle(chatId).then((t) => {
+      if (t && t !== "New Chat") setTitle(t);
+    }).catch(() => {
+    });
+  }, [chatId]);
+  useEffect(() => {
+    fetchTitle();
+    const handler = () => fetchTitle();
+    window.addEventListener("chatsupdated", handler);
+    return () => window.removeEventListener("chatsupdated", handler);
+  }, [fetchTitle]);
+  return /* @__PURE__ */ jsxs("header", { className: "sticky top-0 flex items-center gap-2 bg-background px-2 py-1.5 md:px-2 z-10", children: [
+    /* @__PURE__ */ jsx("div", { className: "md:hidden", children: /* @__PURE__ */ jsx(SidebarTrigger, {}) }),
+    /* @__PURE__ */ jsx("h1", { className: "text-base font-medium text-muted-foreground truncate", children: title || "\xA0" })
+  ] });
+}
+export {
+  ChatHeader
+};

package/lib/chat/components/chat-header.jsx

@@ -0,0 +1,37 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { SidebarTrigger } from './ui/sidebar.js';
+import { getChatTitle } from '../actions.js';
+
+export function ChatHeader({ chatId }) {
+  const [title, setTitle] = useState(null);
+
+  const fetchTitle = useCallback(() => {
+    getChatTitle(chatId)
+      .then((t) => {
+        if (t && t !== 'New Chat') setTitle(t);
+      })
+      .catch(() => {});
+  }, [chatId]);
+
+  // Fetch on mount and whenever chats are updated (title generated by LLM)
+  useEffect(() => {
+    fetchTitle();
+    const handler = () => fetchTitle();
+    window.addEventListener('chatsupdated', handler);
+    return () => window.removeEventListener('chatsupdated', handler);
+  }, [fetchTitle]);
+
+  return (
+    <header className="sticky top-0 flex items-center gap-2 bg-background px-2 py-1.5 md:px-2 z-10">
+      {/* Mobile-only: open sidebar sheet */}
+      <div className="md:hidden">
+        <SidebarTrigger />
+      </div>
+      <h1 className="text-base font-medium text-muted-foreground truncate">
+        {title || '\u00A0'}
+      </h1>
+    </header>
+  );
+}