@page-speed/agent-everywhere 0.6.0 → 0.7.0

package/dist/index.d.cts

@@ -2892,11 +2892,30 @@ interface AgentWorkspaceProps {
     onLeftPanelOpenChange?: (open: boolean) => void;
     onRightPanelOpenChange?: (open: boolean) => void;
     /**
-     * Render the built-in floating panel toggles in the top corners of the
-     * center column. Default true. Set false and mount
-     * `<AgentWorkspacePanelToggle/>` in your own chrome instead.
+     * Render extra floating panel toggles in the top corners of the center
+     * column. Default false — the persistent workspace header already hosts a
+     * toggle at each end. Mount `<AgentWorkspacePanelToggle/>` in your own
+     * chrome for fully custom placement.
      */
     showPanelToggles?: boolean;
+    /**
+     * Show the workspace header bar: left panel toggle, icon + title + status
+     * on the left; `headerActions`, reset, the conversation chevron, and the
+     * right panel toggle on the right. Default true.
+     */
+    showHeader?: boolean;
+    /** @deprecated Use `showHeader`. Honored when `showHeader` is not set. */
+    showConversationHeader?: boolean;
+    /**
+     * Host actions rendered at the start of the header's right action group —
+     * e.g. a "+ New" button that mirrors the page's primary action.
+     */
+    headerActions?: ReactNode;
+    /**
+     * Status line under the title. Defaults to the shared session's
+     * error/status label; pass this when running disconnected (no provider).
+     */
+    headerStatus?: ReactNode;
     /**
      * Custom conversation node for the slide-in layer. Defaults to
      * `<AgentConversation/>` bound to the shared session.
@@ -2905,10 +2924,8 @@ interface AgentWorkspaceProps {
     /** Controlled visibility for the conversation layer. */
     conversationOpen?: boolean;
     onConversationOpenChange?: (open: boolean) => void;
-    /** Title shown in the conversation layer's header. Default "AI Assistant". */
+    /** Title shown in the workspace header. Default "AI Assistant". */
     conversationTitle?: ReactNode;
-    /** Hide the conversation layer's header bar (title + reset + minimize). */
-    showConversationHeader?: boolean;
     /**
      * `false` removes the dock; a ReactNode replaces the default
      * `<AgentWorkspaceComposer/>`; `true`/omitted renders the default.
@@ -2933,7 +2950,7 @@ interface AgentWorkspaceProps {
  * conversation, composer) into a page-level workspace with toggleable side
  * panels and a sliding center conversation.
  */
-declare function AgentWorkspace({ children, leftPanel, rightPanel, leftPanelWidth, rightPanelWidth, defaultLeftPanelOpen, defaultRightPanelOpen, leftPanelOpen: leftPanelOpenProp, rightPanelOpen: rightPanelOpenProp, onLeftPanelOpenChange, onRightPanelOpenChange, showPanelToggles, conversation, conversationOpen: conversationOpenProp, onConversationOpenChange, conversationTitle, showConversationHeader, composer, composerPlaceholder, composerHint, onComposerSubmit, className, contentClassName, conversationClassName, leftPanelClassName, rightPanelClassName, composerClassName, }: AgentWorkspaceProps): react.JSX.Element;
+declare function AgentWorkspace({ children, leftPanel, rightPanel, leftPanelWidth, rightPanelWidth, defaultLeftPanelOpen, defaultRightPanelOpen, leftPanelOpen: leftPanelOpenProp, rightPanelOpen: rightPanelOpenProp, onLeftPanelOpenChange, onRightPanelOpenChange, showPanelToggles, showHeader, showConversationHeader, headerActions, headerStatus, conversation, conversationOpen: conversationOpenProp, onConversationOpenChange, conversationTitle, composer, composerPlaceholder, composerHint, onComposerSubmit, className, contentClassName, conversationClassName, leftPanelClassName, rightPanelClassName, composerClassName, }: AgentWorkspaceProps): react.JSX.Element;
 
 interface AgentWorkspaceComposerProps {
     /** Controlled draft value. Pair with `onChange` for caller-controlled editing. */

package/dist/index.d.ts

@@ -2892,11 +2892,30 @@ interface AgentWorkspaceProps {
     onLeftPanelOpenChange?: (open: boolean) => void;
     onRightPanelOpenChange?: (open: boolean) => void;
     /**
-     * Render the built-in floating panel toggles in the top corners of the
-     * center column. Default true. Set false and mount
-     * `<AgentWorkspacePanelToggle/>` in your own chrome instead.
+     * Render extra floating panel toggles in the top corners of the center
+     * column. Default false — the persistent workspace header already hosts a
+     * toggle at each end. Mount `<AgentWorkspacePanelToggle/>` in your own
+     * chrome for fully custom placement.
      */
     showPanelToggles?: boolean;
+    /**
+     * Show the workspace header bar: left panel toggle, icon + title + status
+     * on the left; `headerActions`, reset, the conversation chevron, and the
+     * right panel toggle on the right. Default true.
+     */
+    showHeader?: boolean;
+    /** @deprecated Use `showHeader`. Honored when `showHeader` is not set. */
+    showConversationHeader?: boolean;
+    /**
+     * Host actions rendered at the start of the header's right action group —
+     * e.g. a "+ New" button that mirrors the page's primary action.
+     */
+    headerActions?: ReactNode;
+    /**
+     * Status line under the title. Defaults to the shared session's
+     * error/status label; pass this when running disconnected (no provider).
+     */
+    headerStatus?: ReactNode;
     /**
      * Custom conversation node for the slide-in layer. Defaults to
      * `<AgentConversation/>` bound to the shared session.
@@ -2905,10 +2924,8 @@ interface AgentWorkspaceProps {
     /** Controlled visibility for the conversation layer. */
     conversationOpen?: boolean;
     onConversationOpenChange?: (open: boolean) => void;
-    /** Title shown in the conversation layer's header. Default "AI Assistant". */
+    /** Title shown in the workspace header. Default "AI Assistant". */
     conversationTitle?: ReactNode;
-    /** Hide the conversation layer's header bar (title + reset + minimize). */
-    showConversationHeader?: boolean;
     /**
      * `false` removes the dock; a ReactNode replaces the default
      * `<AgentWorkspaceComposer/>`; `true`/omitted renders the default.
@@ -2933,7 +2950,7 @@ interface AgentWorkspaceProps {
  * conversation, composer) into a page-level workspace with toggleable side
  * panels and a sliding center conversation.
  */
-declare function AgentWorkspace({ children, leftPanel, rightPanel, leftPanelWidth, rightPanelWidth, defaultLeftPanelOpen, defaultRightPanelOpen, leftPanelOpen: leftPanelOpenProp, rightPanelOpen: rightPanelOpenProp, onLeftPanelOpenChange, onRightPanelOpenChange, showPanelToggles, conversation, conversationOpen: conversationOpenProp, onConversationOpenChange, conversationTitle, showConversationHeader, composer, composerPlaceholder, composerHint, onComposerSubmit, className, contentClassName, conversationClassName, leftPanelClassName, rightPanelClassName, composerClassName, }: AgentWorkspaceProps): react.JSX.Element;
+declare function AgentWorkspace({ children, leftPanel, rightPanel, leftPanelWidth, rightPanelWidth, defaultLeftPanelOpen, defaultRightPanelOpen, leftPanelOpen: leftPanelOpenProp, rightPanelOpen: rightPanelOpenProp, onLeftPanelOpenChange, onRightPanelOpenChange, showPanelToggles, showHeader, showConversationHeader, headerActions, headerStatus, conversation, conversationOpen: conversationOpenProp, onConversationOpenChange, conversationTitle, composer, composerPlaceholder, composerHint, onComposerSubmit, className, contentClassName, conversationClassName, leftPanelClassName, rightPanelClassName, composerClassName, }: AgentWorkspaceProps): react.JSX.Element;
 
 interface AgentWorkspaceComposerProps {
     /** Controlled draft value. Pair with `onChange` for caller-controlled editing. */

package/dist/index.js

@@ -8727,12 +8727,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,
@@ -8804,7 +8807,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__ */ jsx(AgentWorkspaceContext.Provider, { value, children: /* @__PURE__ */ jsxs(
     "div",
     {
@@ -8843,6 +8847,69 @@ function AgentWorkspace({
               className: "border border-border/60 bg-background/80 shadow-sm backdrop-blur"
             }
           ) }),
+          headerVisible && /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2.5", children: [
+                  hasLeftPanel && /* @__PURE__ */ jsx(
+                    AgentWorkspacePanelToggle,
+                    {
+                      side: "left",
+                      className: "hidden lg:flex"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "flex size-7 shrink-0 items-center justify-center rounded-md bg-primary text-primary-foreground", children: /* @__PURE__ */ jsx(Sparkles, { className: "size-3.5" }) }),
+                  /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                    /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium", children: conversationTitle }),
+                    statusLine && /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-muted-foreground", children: statusLine })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
+                  headerActions,
+                  agent && /* @__PURE__ */ 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__ */ jsx(RotateCcw, { className: "size-4" })
+                    }
+                  ),
+                  /* @__PURE__ */ 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__ */ jsx(
+                        ChevronDown,
+                        {
+                          className: cn(
+                            "size-4 transition-transform duration-200",
+                            !conversationOpen && "rotate-180"
+                          )
+                        }
+                      )
+                    }
+                  ),
+                  hasRightPanel && /* @__PURE__ */ jsx(
+                    AgentWorkspacePanelToggle,
+                    {
+                      side: "right",
+                      className: "hidden lg:flex"
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
           /* @__PURE__ */ jsxs("div", { className: "relative min-h-0 grow", children: [
             /* @__PURE__ */ jsx(
               "div",
@@ -8853,7 +8920,7 @@ function AgentWorkspace({
                 children
               }
             ),
-            /* @__PURE__ */ jsxs(
+            /* @__PURE__ */ jsx(
               "div",
               {
                 "data-state": conversationOpen ? "open" : "closed",
@@ -8864,52 +8931,13 @@ function AgentWorkspace({
                   conversationOpen ? "translate-y-0 opacity-100" : "pointer-events-none translate-y-8 opacity-0",
                   conversationClassName
                 ),
-                children: [
-                  showConversationHeader && /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2.5", children: [
-                      /* @__PURE__ */ jsx("span", { className: "flex size-7 shrink-0 items-center justify-center rounded-md bg-primary text-primary-foreground", children: /* @__PURE__ */ jsx(Sparkles, { className: "size-3.5" }) }),
-                      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-                        /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium", children: conversationTitle }),
-                        statusLine && /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-muted-foreground", children: statusLine })
-                      ] })
-                    ] }),
-                    /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
-                      (hasLeftPanel || hasRightPanel) && /* @__PURE__ */ jsxs("div", { className: "mr-1 hidden items-center gap-1 border-r border-border pr-2 lg:flex", children: [
-                        /* @__PURE__ */ jsx(AgentWorkspacePanelToggle, { side: "left" }),
-                        /* @__PURE__ */ jsx(AgentWorkspacePanelToggle, { side: "right" })
-                      ] }),
-                      agent && /* @__PURE__ */ 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__ */ jsx(RotateCcw, { className: "size-4" })
-                        }
-                      ),
-                      /* @__PURE__ */ 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__ */ jsx(ChevronDown, { className: "size-4" })
-                        }
-                      )
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ jsx("div", { className: "min-h-0 grow", children: conversation ?? /* @__PURE__ */ jsx(
-                    AgentConversation,
-                    {
-                      contentClassName: "mx-auto w-full max-w-3xl",
-                      showAvatars: true
-                    }
-                  ) })
-                ]
+                children: /* @__PURE__ */ jsx("div", { className: "min-h-0 grow", children: conversation ?? /* @__PURE__ */ jsx(
+                  AgentConversation,
+                  {
+                    contentClassName: "mx-auto w-full max-w-3xl",
+                    showAvatars: true
+                  }
+                ) })
               }
             )
           ] }),