From 36b5c74bc5b37b288eeaedb95ec0997ca86fa2fa Mon Sep 17 00:00:00 2001
From: Eric Allam <eallam@icloud.com>
Date: Fri, 26 Jun 2026 10:17:41 +0100
Subject: [PATCH] feat(webapp): move the in-dashboard agent launcher into the
 page header

The agent was launched from a button pinned to the bottom-right of every page, which floated over page controls (for example the run inspector's action bar). It now opens from a compact "Chat" button on the far right of the page header, and toggles to "Collapse" while the panel is open. The panel and launcher read "Chat" in the UI.

The launcher only renders on env-scoped pages where the agent is enabled, gated by the same feature flag, so nothing changes for users who don't have it.
---
 .../dashboard-agent/DashboardAgent.tsx        | 66 ++++++++-----------
 .../dashboard-agent/DashboardAgentChat.tsx    |  4 +-
 .../dashboard-agent/DashboardAgentHeader.tsx  |  2 +-
 .../dashboardAgentLauncher.tsx                | 48 ++++++++++++++
 .../app/components/primitives/PageHeader.tsx  |  6 +-
 5 files changed, 84 insertions(+), 42 deletions(-)
 create mode 100644 apps/webapp/app/components/dashboard-agent/dashboardAgentLauncher.tsx

diff --git a/apps/webapp/app/components/dashboard-agent/DashboardAgent.tsx b/apps/webapp/app/components/dashboard-agent/DashboardAgent.tsx
index 47e280da1f1..2796c8516df 100644
--- a/apps/webapp/app/components/dashboard-agent/DashboardAgent.tsx
+++ b/apps/webapp/app/components/dashboard-agent/DashboardAgent.tsx
@@ -1,4 +1,3 @@
-import { SparklesIcon } from "@heroicons/react/20/solid";
 import { useState } from "react";
 import {
   ResizableHandle,
@@ -6,17 +5,19 @@ import {
   ResizablePanelGroup,
 } from "~/components/primitives/Resizable";
 import { DashboardAgentPanel } from "./DashboardAgentPanel";
+import { DashboardAgentProvider } from "./dashboardAgentLauncher";
 
 /**
  * Mounts the dashboard agent in the env layout. Renders the page content
- * (`children` = the route Outlet); when the agent is open it splits the layout
- * into a resizable content + agent panel using the shared Resizable primitive,
- * with `autosaveId` persisting the width. When closed it's a floating launcher.
+ * (`children` = the route Outlet) and shares the open/close state via context so
+ * the page-header launcher (`DashboardAgentLauncher`) can toggle it. When open it
+ * splits the layout into a resizable content + agent panel, `autosaveId` persists
+ * the width.
  *
- * `hasAccess` is resolved server-side in the env layout loader (via
- * `canAccessDashboardAgent`: global env, admins/impersonators, then the
- * global/per-org feature flag, default off), so the launcher is hidden unless
- * the agent is enabled. The resource routes enforce the same check server-side.
+ * `hasAccess` is resolved server-side in the env layout loader
+ * (`canAccessDashboardAgent`); when false we render the content untouched and
+ * never expose the context, so the launcher stays hidden. The resource routes
+ * enforce the same check server-side.
  */
 export function DashboardAgent({
   children,
@@ -31,36 +32,25 @@ export function DashboardAgent({
     return <div className="h-full min-h-0">{children}</div>;
   }
 
-  if (!open) {
-    return (
-      <div className="relative h-full min-h-0">
-        <div className="h-full overflow-hidden">{children}</div>
-        <button
-          type="button"
-          aria-label="Open the dashboard agent"
-          onClick={() => setOpen(true)}
-          className="fixed bottom-4 right-4 z-40 flex items-center gap-1.5 rounded-full border border-charcoal-650 bg-background-bright px-3.5 py-2 text-sm text-text-bright shadow-lg transition hover:border-charcoal-550"
-        >
-          <SparklesIcon className="size-4 text-indigo-500" />
-          Ask the agent
-        </button>
-      </div>
-    );
-  }
-
   return (
-    <ResizablePanelGroup
-      orientation="horizontal"
-      autosaveId="dashboard-agent-split"
-      className="h-full min-h-0"
-    >
-      <ResizablePanel id="dashboard-content" min="320px">
-        <div className="h-full overflow-hidden">{children}</div>
-      </ResizablePanel>
-      <ResizableHandle id="dashboard-agent-handle" />
-      <ResizablePanel id="dashboard-agent-panel" default="380px" min="320px" max="720px">
-        <DashboardAgentPanel onClose={() => setOpen(false)} />
-      </ResizablePanel>
-    </ResizablePanelGroup>
+    <DashboardAgentProvider value={{ open, setOpen }}>
+      {open ? (
+        <ResizablePanelGroup
+          orientation="horizontal"
+          autosaveId="dashboard-agent-split"
+          className="h-full min-h-0"
+        >
+          <ResizablePanel id="dashboard-content" min="320px">
+            <div className="h-full overflow-hidden">{children}</div>
+          </ResizablePanel>
+          <ResizableHandle id="dashboard-agent-handle" />
+          <ResizablePanel id="dashboard-agent-panel" default="380px" min="320px" max="720px">
+            <DashboardAgentPanel onClose={() => setOpen(false)} />
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      ) : (
+        <div className="h-full min-h-0 overflow-hidden">{children}</div>
+      )}
+    </DashboardAgentProvider>
   );
 }
diff --git a/apps/webapp/app/components/dashboard-agent/DashboardAgentChat.tsx b/apps/webapp/app/components/dashboard-agent/DashboardAgentChat.tsx
index 1c6b3e9552c..e6662ca8494 100644
--- a/apps/webapp/app/components/dashboard-agent/DashboardAgentChat.tsx
+++ b/apps/webapp/app/components/dashboard-agent/DashboardAgentChat.tsx
@@ -101,7 +101,7 @@ export function DashboardAgentChat({
       const res = await fetch(actionPath, { method: "POST", body });
       const data = (await res.json()) as { publicAccessToken?: string; error?: string };
       if (!res.ok || !data.publicAccessToken) {
-        throw new Error(data.error ?? "The dashboard agent couldn't start.");
+        throw new Error(data.error ?? "The chat couldn't start.");
       }
       return { publicAccessToken: data.publicAccessToken };
     },
@@ -112,7 +112,7 @@ export function DashboardAgentChat({
       const res = await fetch(actionPath, { method: "POST", body });
       const data = (await res.json()) as { token?: string; error?: string };
       if (!res.ok || !data.token) {
-        throw new Error(data.error ?? "Couldn't refresh the dashboard agent token.");
+        throw new Error(data.error ?? "Couldn't refresh the chat token.");
       }
       return data.token;
     },
diff --git a/apps/webapp/app/components/dashboard-agent/DashboardAgentHeader.tsx b/apps/webapp/app/components/dashboard-agent/DashboardAgentHeader.tsx
index c782e5f13c3..8b96dd06c01 100644
--- a/apps/webapp/app/components/dashboard-agent/DashboardAgentHeader.tsx
+++ b/apps/webapp/app/components/dashboard-agent/DashboardAgentHeader.tsx
@@ -14,7 +14,7 @@ export function DashboardAgentHeader({
 }) {
   return (
     <div className="flex items-center justify-between border-b border-grid-bright px-3 py-2">
-      <span className="text-sm font-medium text-text-bright">Dashboard agent</span>
+      <span className="text-sm font-medium text-text-bright">Chat</span>
       <div className="flex items-center gap-0.5">
         <IconButton label="New chat" icon={PencilSquareIcon} onClick={onNewChat} />
         <IconButton
diff --git a/apps/webapp/app/components/dashboard-agent/dashboardAgentLauncher.tsx b/apps/webapp/app/components/dashboard-agent/dashboardAgentLauncher.tsx
new file mode 100644
index 00000000000..90d5a60eb9e
--- /dev/null
+++ b/apps/webapp/app/components/dashboard-agent/dashboardAgentLauncher.tsx
@@ -0,0 +1,48 @@
+import { ChatBubbleLeftRightIcon, ChevronDoubleRightIcon } from "@heroicons/react/20/solid";
+import { createContext, useContext } from "react";
+import { cn } from "~/utils/cn";
+
+type DashboardAgentContextValue = {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+};
+
+const DashboardAgentContext = createContext<DashboardAgentContextValue | null>(null);
+
+export const DashboardAgentProvider = DashboardAgentContext.Provider;
+
+// Null outside the env layout (no provider) or when the agent is gated off, so
+// the launcher self-hides everywhere it can't open.
+export function useDashboardAgent() {
+  return useContext(DashboardAgentContext);
+}
+
+export function DashboardAgentLauncher() {
+  const agent = useDashboardAgent();
+  if (!agent) {
+    return null;
+  }
+
+  const { open, setOpen } = agent;
+
+  return (
+    <button
+      type="button"
+      aria-label={open ? "Collapse chat" : "Open chat"}
+      onClick={() => setOpen(!open)}
+      className={cn(
+        "flex shrink-0 items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs text-text-bright transition",
+        open
+          ? "border-charcoal-550 bg-charcoal-750"
+          : "border-charcoal-650 bg-background-bright hover:border-charcoal-550"
+      )}
+    >
+      {open ? (
+        <ChevronDoubleRightIcon className="size-3.5 text-text-dimmed" />
+      ) : (
+        <ChatBubbleLeftRightIcon className="size-3.5 text-indigo-500" />
+      )}
+      {open ? "Collapse" : "Chat"}
+    </button>
+  );
+}
diff --git a/apps/webapp/app/components/primitives/PageHeader.tsx b/apps/webapp/app/components/primitives/PageHeader.tsx
index 1b5e3be5579..31fa8104dd4 100644
--- a/apps/webapp/app/components/primitives/PageHeader.tsx
+++ b/apps/webapp/app/components/primitives/PageHeader.tsx
@@ -8,6 +8,7 @@ import { Header2 } from "./Headers";
 import { LoadingBarDivider } from "./LoadingBarDivider";
 import { SimpleTooltip } from "./Tooltip";
 import { EnvironmentBanner } from "../navigation/EnvironmentBanner";
+import { DashboardAgentLauncher } from "../dashboard-agent/dashboardAgentLauncher";
 
 type WithChildren = {
   children: React.ReactNode;
@@ -24,7 +25,10 @@ export function NavBar({ children }: WithChildren) {
   return (
     <div>
       <div className="grid h-10 w-full grid-rows-[auto_1px] bg-background-bright">
-        <div className="flex w-full items-center justify-between pl-3 pr-2">{children}</div>
+        <div className="flex w-full items-center gap-2 pl-3 pr-2">
+          <div className="flex flex-1 items-center justify-between">{children}</div>
+          <DashboardAgentLauncher />
+        </div>
         <LoadingBarDivider isLoading={isLoading} />
       </div>
       {showUpgradePrompt.shouldShow && organization ? <UpgradePrompt /> : <EnvironmentBanner />}