@page-speed/agent-everywhere 0.6.0 → 0.7.0

package/README.md

@@ -171,13 +171,21 @@ import {
 
 Every region is independently optional and controllable:
 
+- **Workspace header** is persistent across the page and conversation states
+  so the chrome stays uniform: the left panel toggle, icon, title
+  (`conversationTitle`), and status line on the left; `headerActions` (your
+  page's primary action, e.g. a "+ New" button), the session reset, the
+  conversation chevron, and the right panel toggle on the right. Override the
+  status line with `headerStatus` (useful disconnected), or hide the bar with
+  `showHeader={false}`.
 - **Panels** collapse/expand with a smooth width-collapse animation (the
   outer rail animates to `0` while the inner wrapper keeps its open width, so
   content clips out instead of reflowing). Uncontrolled by default;
   controlled via `leftPanelOpen`/`onLeftPanelOpenChange` (and the right-side
-  equivalents). Built-in floating toggles render in the top corners
-  (`showPanelToggles={false}` to place `<AgentWorkspacePanelToggle side="…"/>`
-  in your own chrome). Panels are gated to `lg:` viewports.
+  equivalents). The header hosts a toggle at each end; opt into extra
+  floating toggles with `showPanelToggles`, or place
+  `<AgentWorkspacePanelToggle side="…"/>` in your own chrome. Panels are
+  gated to `lg:` viewports.
 - **Conversation layer** auto-opens on the first submit (or `activate()`),
   can be minimized back to the page without ending the session (a
   "View conversation" chip appears in the dock), and accepts a custom node via

package/dist/index.cjs

@@ -8753,12 +8753,15 @@ function AgentWorkspace({
   rightPanelOpen: rightPanelOpenProp,
   onLeftPanelOpenChange,
   onRightPanelOpenChange,
-  showPanelToggles = true,
+  showPanelToggles = false,
+  showHeader,
+  showConversationHeader,
+  headerActions,
+  headerStatus,
   conversation,
   conversationOpen: conversationOpenProp,
   onConversationOpenChange,
   conversationTitle = "AI Assistant",
-  showConversationHeader = true,
   composer = true,
   composerPlaceholder,
   composerHint,
@@ -8830,7 +8833,8 @@ function AgentWorkspace({
       onSubmit: onComposerSubmit
     }
   ) : composer;
-  const statusLine = agent ? agent.error ?? agent.statusLabel : null;
+  const headerVisible = showHeader ?? showConversationHeader ?? true;
+  const statusLine = headerStatus ?? (agent ? agent.error ?? agent.statusLabel : null);
   return /* @__PURE__ */ jsxRuntime.jsx(AgentWorkspaceContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -8869,6 +8873,69 @@ function AgentWorkspace({
               className: "border border-border/60 bg-background/80 shadow-sm backdrop-blur"
             }
           ) }),
+          headerVisible && /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              "data-workspace-header": "",
+              className: "flex shrink-0 items-center justify-between gap-3 border-b border-border bg-background px-3 py-2.5",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-2.5", children: [
+                  hasLeftPanel && /* @__PURE__ */ jsxRuntime.jsx(
+                    AgentWorkspacePanelToggle,
+                    {
+                      side: "left",
+                      className: "hidden lg:flex"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-7 shrink-0 items-center justify-center rounded-md bg-primary text-primary-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "size-3.5" }) }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate text-sm font-medium", children: conversationTitle }),
+                    statusLine && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate text-xs text-muted-foreground", children: statusLine })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
+                  headerActions,
+                  agent && /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => agent.reset(),
+                      "aria-label": "Start a new conversation",
+                      title: "New conversation",
+                      className: "flex size-8 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { className: "size-4" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setConversationOpen(!conversationOpen),
+                      "aria-label": conversationOpen ? "Hide conversation" : "Show conversation",
+                      title: conversationOpen ? "Hide conversation" : "Show conversation",
+                      className: "flex size-8 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        lucideReact.ChevronDown,
+                        {
+                          className: cn(
+                            "size-4 transition-transform duration-200",
+                            !conversationOpen && "rotate-180"
+                          )
+                        }
+                      )
+                    }
+                  ),
+                  hasRightPanel && /* @__PURE__ */ jsxRuntime.jsx(
+                    AgentWorkspacePanelToggle,
+                    {
+                      side: "right",
+                      className: "hidden lg:flex"
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative min-h-0 grow", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               "div",
@@ -8879,7 +8946,7 @@ function AgentWorkspace({
                 children
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsxs(
+            /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
                 "data-state": conversationOpen ? "open" : "closed",
@@ -8890,52 +8957,13 @@ function AgentWorkspace({
                   conversationOpen ? "translate-y-0 opacity-100" : "pointer-events-none translate-y-8 opacity-0",
                   conversationClassName
                 ),
-                children: [
-                  showConversationHeader && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center justify-between gap-3 border-b border-border bg-background px-4 py-2.5", children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-2.5", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-7 shrink-0 items-center justify-center rounded-md bg-primary text-primary-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "size-3.5" }) }),
-                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate text-sm font-medium", children: conversationTitle }),
-                        statusLine && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate text-xs text-muted-foreground", children: statusLine })
-                      ] })
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
-                      (hasLeftPanel || hasRightPanel) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mr-1 hidden items-center gap-1 border-r border-border pr-2 lg:flex", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(AgentWorkspacePanelToggle, { side: "left" }),
-                        /* @__PURE__ */ jsxRuntime.jsx(AgentWorkspacePanelToggle, { side: "right" })
-                      ] }),
-                      agent && /* @__PURE__ */ jsxRuntime.jsx(
-                        "button",
-                        {
-                          type: "button",
-                          onClick: () => agent.reset(),
-                          "aria-label": "Start a new conversation",
-                          title: "New conversation",
-                          className: "flex size-8 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground",
-                          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { className: "size-4" })
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "button",
-                        {
-                          type: "button",
-                          onClick: () => setConversationOpen(false),
-                          "aria-label": "Hide conversation",
-                          title: "Hide conversation",
-                          className: "flex size-8 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground",
-                          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "size-4" })
-                        }
-                      )
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 grow", children: conversation ?? /* @__PURE__ */ jsxRuntime.jsx(
-                    AgentConversation,
-                    {
-                      contentClassName: "mx-auto w-full max-w-3xl",
-                      showAvatars: true
-                    }
-                  ) })
-                ]
+                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 grow", children: conversation ?? /* @__PURE__ */ jsxRuntime.jsx(
+                  AgentConversation,
+                  {
+                    contentClassName: "mx-auto w-full max-w-3xl",
+                    showAvatars: true
+                  }
+                ) })
               }
             )
           ] }),