@page-speed/agent-everywhere 0.6.0 → 0.8.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
@@ -187,6 +195,11 @@ Every region is independently optional and controllable:
   optional attach affordance (`onAttach`), and a circular send button. Pass
   `composer={false}` to drop it, a node to replace it, or `onComposerSubmit`
   to intercept submits.
+- **Loading states**: render `<AgentWorkspaceSkeleton/>` while the page's data
+  loads — it mirrors the workspace geometry (panel rails, header, dock) with
+  pulsing placeholders so the resolved layout doesn't shift. Pass `children`
+  for a custom center skeleton, and `leftPanel={false}` / `rightPanel={false}`
+  / `composer={false}` to match the page's configuration.
 - **Programmatic control** from anywhere inside: `useAgentWorkspace()` exposes
   `toggleLeftPanel`, `setRightPanelOpen`, `openConversation`,
   `closeConversation`, and friends for dynamic layout scenarios.

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
+                  }
+                ) })
               }
             )
           ] }),
@@ -8983,6 +9011,96 @@ function AgentWorkspace({
     }
   ) });
 }
+var Pulse = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("animate-pulse rounded-md bg-muted", className) });
+var PanelSkeleton = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col", children: [
+  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center justify-between px-4 pb-2 pt-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Pulse, { className: "h-5 w-28" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Pulse, { className: "size-8 rounded-lg" })
+  ] }),
+  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 grow space-y-4 overflow-hidden px-4 py-3", children: [3, 6].map((rows, section) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Pulse, { className: "h-3 w-24" }),
+    Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Pulse, { className: "size-4 shrink-0 rounded-full" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 grow space-y-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Pulse, { className: "h-3.5 w-3/4" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Pulse, { className: "h-3 w-1/2" })
+      ] })
+    ] }, i))
+  ] }, section)) }),
+  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "shrink-0 space-y-2 border-t border-border px-4 py-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Pulse, { className: "h-3 w-full" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Pulse, { className: "h-3 w-2/3" })
+  ] })
+] });
+var DefaultContentSkeleton = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 p-6", children: [
+  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Pulse, { className: "h-8 w-40" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Pulse, { className: "h-8 w-28" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Pulse, { className: "ml-auto h-8 w-20" })
+  ] }),
+  Array.from({ length: 9 }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx(Pulse, { className: "h-10 w-full" }, i))
+] });
+function AgentWorkspaceSkeleton({
+  leftPanel = true,
+  rightPanel = true,
+  leftPanelWidth = 320,
+  rightPanelWidth = 460,
+  showHeader = true,
+  composer = true,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-workspace-skeleton": "",
+      className: cn(
+        "flex h-full w-full overflow-hidden bg-background text-foreground",
+        className
+      ),
+      children: [
+        leftPanel && /* @__PURE__ */ jsxRuntime.jsx(
+          "aside",
+          {
+            "aria-hidden": true,
+            className: "hidden h-full shrink-0 overflow-hidden border-r border-border lg:block",
+            style: { width: leftPanelWidth },
+            children: /* @__PURE__ */ jsxRuntime.jsx(PanelSkeleton, {})
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full min-w-0 grow flex-col", children: [
+          showHeader && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center justify-between gap-3 border-b border-border px-3 py-2.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-2.5", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Pulse, { className: "hidden size-8 rounded-lg lg:block" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Pulse, { className: "size-7 rounded-md" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Pulse, { className: "h-4 w-36" }),
+                /* @__PURE__ */ jsxRuntime.jsx(Pulse, { className: "h-3 w-20" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-1.5", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Pulse, { className: "h-8 w-20 rounded-md" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Pulse, { className: "size-8 rounded-lg" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Pulse, { className: "size-8 rounded-lg" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Pulse, { className: "hidden size-8 rounded-lg lg:block" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 grow overflow-hidden", children: children ?? /* @__PURE__ */ jsxRuntime.jsx(DefaultContentSkeleton, {}) }),
+          composer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 border-t border-border px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto w-full max-w-3xl", children: /* @__PURE__ */ jsxRuntime.jsx(Pulse, { className: "h-[52px] w-full rounded-2xl" }) }) })
+        ] }),
+        rightPanel && /* @__PURE__ */ jsxRuntime.jsx(
+          "aside",
+          {
+            "aria-hidden": true,
+            className: "hidden h-full shrink-0 overflow-hidden border-l border-border lg:block",
+            style: { width: rightPanelWidth },
+            children: /* @__PURE__ */ jsxRuntime.jsx(PanelSkeleton, {})
+          }
+        )
+      ]
+    }
+  );
+}
 
 exports.AgentAvatar = AgentAvatar;
 exports.AgentComposer = AgentComposer;
@@ -8993,6 +9111,7 @@ exports.AgentSurface = AgentSurface;
 exports.AgentWorkspace = AgentWorkspace;
 exports.AgentWorkspaceComposer = AgentWorkspaceComposer;
 exports.AgentWorkspacePanelToggle = AgentWorkspacePanelToggle;
+exports.AgentWorkspaceSkeleton = AgentWorkspaceSkeleton;
 exports.AllocationBreakdown = AllocationBreakdown;
 exports.AnalyticsDashboard = AnalyticsDashboard;
 exports.Avatar = Avatar;