feat(webapp): floating Ask Trigger chat window

.server-changes/chat-open-mode-account-preference.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+You can now set your preferred Ask Trigger chat position (floating, right panel, or fullscreen) in your account settings — it's used every time you open the chat.

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

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+Ask Trigger now opens as a floating window at the bottom of the page that you can drag anywhere and resize. The Ask Trigger button toggles the chat open and closed. You can also switch to a right-side panel or fullscreen view using a toggle in the chat header.

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/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,19 @@ 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);
+  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 +142,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 +174,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 +356,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 +371,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>