feat(webapp): floating Ask Trigger chat window

feat(webapp): floating Ask Trigger chat window

The Ask Trigger chat can be shown as a draggable, resizable floating
window that docks to the viewport edges, as a right-hand side panel, or
fullscreen. The default mode is an account preference; switching modes
within a session is temporary. Chat history and an in-flight turn
survive mode switches and navigation, and reopening the chat mid-turn
resumes the active stream where it left off. The layout is built on a
new draggable/resizable primitive and dedicated layout components with
mode detection. The chat transport now follows the latest `fetch`,
`accessToken` and `startSession` options, so a chat kept open across
project or environment navigation sends later messages to the current
target, and its output stream reads the live fetch on every reconnect.

Mono-RevId: 6a3db06b99b204495b6c7f49303e7a3d64930611

Author: kathiekiwi

.changeset/chat-transport-follows-options.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/sdk": patch
+---
+
+`useTriggerChatTransport` now picks up changes to `accessToken`, `startSession` and `fetch` on re-render, so a chat that stays mounted while the surrounding page changes no longer keeps sending to the endpoint captured on first render.

.server-changes/floating-chat-window.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+Ask Trigger now opens as a floating window you can drag anywhere and resize, and the chat header lets you switch it to a right-side panel or fullscreen. Choose the position it opens in from your account settings.

apps/webapp/app/assets/icons/AISparkleIcon.tsx

@@ -7,6 +7,7 @@ export function AISparkleIcon({ className }: { className?: string }) {
       viewBox="0 0 24 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
     >
       <path
         fillRule="evenodd"

apps/webapp/app/assets/icons/ChatFloatingPanel.tsx

@@ -0,0 +1,23 @@
+export function ChatFloatingPanel({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M19 5H5C3.89543 5 3 5.89543 3 7V17C3 18.1046 3.89543 19 5 19H19C20.1046 19 21 18.1046 21 17V7C21 5.89543 20.1046 5 19 5Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M17 10H15C14.4477 10 14 10.4477 14 11V15C14 15.5523 14.4477 16 15 16H17C17.5523 16 18 15.5523 18 15V11C18 10.4477 17.5523 10 17 10Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

apps/webapp/app/assets/icons/ChatFullScreen.tsx

@@ -0,0 +1,20 @@
+export function ChatFullScreen({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M19 5H5C3.89543 5 3 5.89543 3 7V17C3 18.1046 3.89543 19 5 19H19C20.1046 19 21 18.1046 21 17V7C21 5.89543 20.1046 5 19 5Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinejoin="round"
+      />
+      <rect x="5" y="7" width="14" height="10" rx="0.5" fill="currentColor" />
+    </svg>
+  );
+}

apps/webapp/app/assets/icons/ChatRightPanel.tsx

@@ -0,0 +1,20 @@
+export function ChatRightPanel({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M19 5H5C3.89543 5 3 5.89543 3 7V17C3 18.1046 3.89543 19 5 19H19C20.1046 19 21 18.1046 21 17V7C21 5.89543 20.1046 5 19 5Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinejoin="round"
+      />
+      <rect x="15" y="7" width="4" height="10" rx="0.5" fill="currentColor" />
+    </svg>
+  );
+}

apps/webapp/app/components/dashboard-agent/AgentChart.tsx

@@ -5,7 +5,7 @@ import { useEffect, useState } from "react";
 import { QueryResultsChart } from "~/components/code/QueryResultsChart";
 import type { ChartConfiguration } from "~/components/metrics/QueryWidget";
 import { Button } from "~/components/primitives/Buttons";
-import { AgentSpinner } from "~/components/primitives/Spinner";
+import { TextShimmer } from "~/components/primitives/TextShimmer";
 import { useOptionalEnvironment } from "~/hooks/useEnvironment";
 import { useOptionalOrganization } from "~/hooks/useOrganizations";
 import { useOptionalProject } from "~/hooks/useProject";
@@ -158,9 +158,8 @@ export function AgentChart({
       ) : null}
       <div className={cn(AGENT_CHART_PLOT_CLASS)}>
         {state.status === "loading" ? (
-          <div className="flex h-full items-center justify-center gap-2 text-xs text-text-dimmed">
-            <AgentSpinner size={12} />
-            Running query…
+          <div className="flex h-full items-center justify-center text-xs text-text-dimmed">
+            <TextShimmer>Running query…</TextShimmer>
           </div>
         ) : state.status === "error" ? (
           <div className="flex h-full items-center justify-center px-3 text-center text-xs text-error">

apps/webapp/app/components/dashboard-agent/AgentUpgradeGate.tsx

@@ -1,5 +1,5 @@
 import { Link } from "@remix-run/react";
-import { AgentMonoLogo } from "~/components/primitives/AgentDotMatrix";
+import { AISparkleIcon } from "~/assets/icons/AISparkleIcon";
 import { LinkButton } from "~/components/primitives/Buttons";
 import { textLinkClassName } from "~/components/primitives/TextLink";
 import { useOrganization } from "~/hooks/useOrganizations";
@@ -26,7 +26,7 @@ export function AgentUpgradeBlock({
       {context}
       <div className="mt-1.5 flex flex-col gap-2 rounded-md border border-border-bright bg-background-dimmed p-3">
         <div className="flex items-center gap-1.5">
-          <AgentMonoLogo size={16} decorative className="shrink-0" />
+          <AISparkleIcon className="size-4 shrink-0" />
           <span className="text-sm font-medium text-text-bright">
             Upgrade to unlock {ASK_AGENT_LABEL}
           </span>

apps/webapp/app/components/dashboard-agent/AskAgentButton.tsx

@@ -1,6 +1,6 @@
 import { Button } from "~/components/primitives/Buttons";
 import { SimpleTooltip } from "~/components/primitives/Tooltip";
-import { AgentIcon, AGENT_ICON_ACCENT_CLASS, ASK_AGENT_LABEL } from "./agent-identity";
+import { AgentIcon, ASK_AGENT_LABEL } from "./agent-identity";
 import { requestDashboardAgent, useDashboardAgentAvailable } from "./dashboardAgentOpenRequest";
 
 // Goes through the open-request bridge rather than the provider context, so it works
@@ -9,14 +9,12 @@ export function AskAgentButton({
   prompt,
   label = ASK_AGENT_LABEL,
   iconOnly = false,
-  variant = "small-menu-item",
   className,
   fallback = null,
 }: {
   prompt?: string;
   label?: string;
   iconOnly?: boolean;
-  variant?: "small-menu-item" | "secondary/small" | "primary/small";
   className?: string;
   fallback?: React.ReactNode;
 }) {
@@ -26,10 +24,9 @@ export function AskAgentButton({
   const button = (
     <Button
       type="button"
-      variant={variant}
+      variant="small-menu-item"
       data-action="ask-agent"
       LeadingIcon={AgentIcon}
-      leadingIconClassName={AGENT_ICON_ACCENT_CLASS}
       className={className}
       aria-label={iconOnly ? label : undefined}
       onClick={() => requestDashboardAgent(prompt)}

apps/webapp/app/components/dashboard-agent/DashboardAgent.tsx

@@ -2,6 +2,7 @@ import type { SuggestedPrompt, WatchSpec } from "@internal/dashboard-agent-contr
 import { useLocation } from "@remix-run/react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
+  collapsibleHandleClassName,
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
@@ -10,16 +11,16 @@ import { useEnvironment } from "~/hooks/useEnvironment";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { useShortcutKeys } from "~/hooks/useShortcutKeys";
+import { useUser } from "~/hooks/useUser";
 import { useAskAiAvailability } from "~/hooks/useAskAiAvailability";
 import { agentDeepLinkParams, ASK_AI_SHORTCUT, askAiChannelTarget } from "./ask-ai-channels";
 import { DashboardAgentPanel } from "./DashboardAgentPanel";
 import { DashboardAgentProvider, TOGGLE_PANEL_SHORTCUT } from "./dashboardAgentLauncher";
 import { useDashboardAgentOpenRequests } from "./dashboardAgentOpenRequest";
 import {
   agentHiddenContentClassName,
-  agentTakeoverClassName,
-  readAgentFullscreen,
-  writeAgentFullscreen,
+  FloatingAgentWindow,
+  useAgentPanelMode,
 } from "./panel-layout";
 import { nextPendingTurnChatId } from "./pending-turn";
 import { nextVisibleChat } from "./unread-counts";
@@ -35,6 +36,10 @@ import {
 
 const TOASTED_WAKES_STORAGE_KEY = "tdev:dashboard-agent:toasted-wakes";
 
+// Superseded by the account preference; a stray value here would otherwise pin the mode
+// forever if this cleanup effect never ran.
+const STALE_MODE_STORAGE_KEYS = ["tdev:dashboard-agent:mode", "tdev:dashboard-agent:fullscreen"];
+
 // Shorter than the poll interval, so a stuck request is dropped before the next tick.
 const UNREAD_REQUEST_TIMEOUT_MS = 30_000;
 
@@ -60,6 +65,8 @@ export function DashboardAgent({
   const organization = useOrganization();
   const project = useProject();
   const environment = useEnvironment();
+  const user = useUser();
+  const modePreference = user.dashboardPreferences.chatOpenMode;
   const actionPath = `/resources/orgs/${organization.slug}/projects/${project.slug}/env/${environment.slug}/dashboard-agent`;
 
   const [open, setOpen] = useState(false);
@@ -114,14 +121,21 @@ export function DashboardAgent({
     setUnreadWakes(initialUnreadWakes);
     setUnreadWork(initialUnreadWork);
   }, [environment.id, initialUnreadWakes, initialUnreadWork]);
-  // Read lazily so SSR always renders the side panel.
-  const [fullscreen, setFullscreen] = useState(readAgentFullscreen);
+  // Every open starts from the account preference; in-chat switches (toggle, drag-to-dock)
+  // are transient and never write it back.
+  const { mode, changeMode, resetToPreference, revertFullscreen } = useAgentPanelMode(
+    modePreference,
+    open
+  );
+  const fullscreen = mode === "fullscreen";
 
-  const toggleFullscreen = useCallback(() => {
-    setFullscreen((current) => {
-      writeAgentFullscreen(!current);
-      return !current;
-    });
+  // Superseded localStorage keys; harmless to skip if storage is unavailable.
+  useEffect(() => {
+    try {
+      for (const key of STALE_MODE_STORAGE_KEYS) window.localStorage.removeItem(key);
+    } catch {
+      /* ignore */
+    }
   }, []);
 
   // Pathname only: filter and search-param changes must keep fullscreen.
@@ -130,11 +144,8 @@ export function DashboardAgent({
   useEffect(() => {
     if (previousPathname.current === pathname) return;
     previousPathname.current = pathname;
-    setFullscreen((current) => {
-      if (current) writeAgentFullscreen(false);
-      return false;
-    });
-  }, [pathname]);
+    revertFullscreen();
+  }, [pathname, revertFullscreen]);
   const [newChatSeq, setNewChatSeq] = useState(0);
   const [requestedMessage, setRequestedMessage] = useState<
     { text: string; seq: number } | undefined
@@ -165,13 +176,14 @@ export function DashboardAgent({
       setOpen(false);
       // Pending requests must be dropped or a stale one re-applies on the next open.
       visibleChat.current = null;
-      setFullscreen(false);
-      writeAgentFullscreen(false);
+      // Any transient in-chat mode switch applied only until close; the next open
+      // starts from the account preference again.
+      resetToPreference();
       setRequestedMessage(undefined);
       setOpenChatRequest(undefined);
       setWatchRequest(undefined);
     },
-    [openPanel]
+    [openPanel, resetToPreference]
   );
 
   const openChat = useCallback(
@@ -346,7 +358,10 @@ export function DashboardAgent({
   return (
     <DashboardAgentProvider value={context}>
       {open ? (
-        // `relative` is the takeover's containing block.
+        // `relative` is the fullscreen takeover's containing block. The ResizablePanelGroup
+        // stays mounted across all three modes — only its sizing/handle degenerate outside
+        // rightPanel — so `FloatingAgentWindow` (and the chat panel inside it) sits at the
+        // same tree position in every mode and a mode switch never remounts it.
         <div className="relative h-full min-h-0">
           <ResizablePanelGroup
             orientation="horizontal"
@@ -358,25 +373,42 @@ export function DashboardAgent({
             </ResizablePanel>
             <ResizableHandle
               id="dashboard-agent-handle"
-              className={fullscreen ? "invisible" : undefined}
+              size={mode === "rightPanel" ? "3px" : "0px"}
+              className={collapsibleHandleClassName(mode === "rightPanel")}
             />
-            <ResizablePanel id="dashboard-agent-panel" default="380px" min="320px" max="720px">
-              <div className={agentTakeoverClassName(fullscreen)}>
-                <DashboardAgentPanel
-                  onClose={() => setPanelOpen(false)}
-                  requestedMessage={requestedMessage}
-                  openChatRequest={openChatRequest}
-                  watchRequest={watchRequest}
-                  newChatSeq={newChatSeq}
-                  promotedPrompt={promotedPrompt}
-                  onChatRead={markChatRead}
-                  // The panel's own count, off the chat list it has already marked read.
-                  onUnreadWorkChange={setUnreadWork}
-                  onTurnActivityChange={handleTurnActivityChange}
-                  isFullscreen={fullscreen}
-                  onToggleFullscreen={toggleFullscreen}
-                />
-              </div>
+            <ResizablePanel
+              id="dashboard-agent-panel"
+              default="380px"
+              min="320px"
+              max="720px"
+              collapsible
+              collapsed={mode !== "rightPanel"}
+              collapsedSize="0px"
+              // Non-rightPanel modes render through position:fixed/absolute, which must
+              // escape this panel's own clipping box to avoid being cut to its 0px width.
+              // Tailwind v4's important modifier is a trailing `!`, not a leading one.
+              className={mode === "rightPanel" ? undefined : "overflow-visible!"}
+            >
+              <FloatingAgentWindow mode={mode} onRequestModeChange={changeMode}>
+                {({ dragHandleProps, dragHandleClassName }) => (
+                  <DashboardAgentPanel
+                    onClose={() => setPanelOpen(false)}
+                    requestedMessage={requestedMessage}
+                    openChatRequest={openChatRequest}
+                    watchRequest={watchRequest}
+                    newChatSeq={newChatSeq}
+                    promotedPrompt={promotedPrompt}
+                    onChatRead={markChatRead}
+                    // The panel's own count, off the chat list it has already marked read.
+                    onUnreadWorkChange={setUnreadWork}
+                    onTurnActivityChange={handleTurnActivityChange}
+                    mode={mode}
+                    onModeChange={changeMode}
+                    dragHandleProps={dragHandleProps}
+                    dragHandleClassName={dragHandleClassName}
+                  />
+                )}
+              </FloatingAgentWindow>
             </ResizablePanel>
           </ResizablePanelGroup>
         </div>