feat(webapp): floating Ask Trigger chat window

.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

@@ -17,9 +17,10 @@ import { DashboardAgentProvider, TOGGLE_PANEL_SHORTCUT } from "./dashboardAgentL
 import { useDashboardAgentOpenRequests } from "./dashboardAgentOpenRequest";
 import {
   agentHiddenContentClassName,
-  agentTakeoverClassName,
-  readAgentFullscreen,
-  writeAgentFullscreen,
+  FloatingAgentWindow,
+  readAgentMode,
+  writeAgentMode,
+  type DashboardAgentMode,
 } from "./panel-layout";
 import { nextPendingTurnChatId } from "./pending-turn";
 import { nextVisibleChat } from "./unread-counts";
@@ -114,14 +115,13 @@ 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);
+  // Read lazily: SSR has no localStorage, so the server always renders the floating default.
+  const [mode, setMode] = useState<DashboardAgentMode>(readAgentMode);
+  const fullscreen = mode === "fullscreen";
 
-  const toggleFullscreen = useCallback(() => {
-    setFullscreen((current) => {
-      writeAgentFullscreen(!current);
-      return !current;
-    });
+  const changeMode = useCallback((next: DashboardAgentMode) => {
+    writeAgentMode(next);
+    setMode(next);
   }, []);
 
   // Pathname only: filter and search-param changes must keep fullscreen.
@@ -130,9 +130,10 @@ export function DashboardAgent({
   useEffect(() => {
     if (previousPathname.current === pathname) return;
     previousPathname.current = pathname;
-    setFullscreen((current) => {
-      if (current) writeAgentFullscreen(false);
-      return false;
+    setMode((current) => {
+      if (current !== "fullscreen") return current;
+      writeAgentMode("floating");
+      return "floating";
     });
   }, [pathname]);
   const [newChatSeq, setNewChatSeq] = useState(0);
@@ -165,8 +166,11 @@ 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);
+      setMode((current) => {
+        if (current !== "fullscreen") return current;
+        writeAgentMode("floating");
+        return "floating";
+      });
       setRequestedMessage(undefined);
       setOpenChatRequest(undefined);
       setWatchRequest(undefined);
@@ -346,7 +350,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"
@@ -356,27 +363,40 @@ export function DashboardAgent({
             <ResizablePanel id="dashboard-content" min="320px">
               <div className={agentHiddenContentClassName(fullscreen)}>{children}</div>
             </ResizablePanel>
-            <ResizableHandle
-              id="dashboard-agent-handle"
-              className={fullscreen ? "invisible" : undefined}
-            />
-            <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>
+            {mode === "rightPanel" && <ResizableHandle id="dashboard-agent-handle" />}
+            <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}>
+                {({ 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>

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

@@ -10,11 +10,15 @@ import {
 import { useLocation, useNavigate } from "@remix-run/react";
 import { useTriggerChatTransport } from "@trigger.dev/sdk/chat/react";
 import { useCallback, useEffect, useRef, useState } from "react";
+import { PlusIcon } from "~/assets/icons/PlusIcon";
+import { Button } from "~/components/primitives/Buttons";
+import { ShortcutKey } from "~/components/primitives/ShortcutKey";
 import { useToast } from "~/components/primitives/Toast";
 import { AgentQuotaNotice, AgentUpgradeBlock } from "./AgentUpgradeGate";
 import { DashboardAgentComposer } from "./DashboardAgentComposer";
 import { DashboardAgentContextBanner } from "./DashboardAgentContextBanner";
 import { DashboardAgentHero } from "./DashboardAgentHero";
+import { NEW_CHAT_SHORTCUT } from "./DashboardAgentHeader";
 import { DashboardAgentMessages, type TurnActivity } from "./DashboardAgentMessages";
 import { MESSAGE_TOO_LARGE_ERROR } from "./message-limits";
 import {
@@ -46,6 +50,23 @@ export type DashboardAgentSession = {
   lastEventId?: string;
 };
 
+/** The transport's `sessions` option for one chat. Extracted so the resume wiring is testable. */
+export function chatSessionsOption(
+  chatId: string,
+  session: DashboardAgentSession | null,
+  streaming: boolean | undefined
+) {
+  if (!session) return undefined;
+  return {
+    [chatId]: {
+      publicAccessToken: session.publicAccessToken,
+      lastEventId: session.lastEventId,
+      // Mid-turn chats must be marked streaming or the transport won't resume `session.out`.
+      isStreaming: streaming ?? false,
+    },
+  };
+}
+
 // Matches the agent's clientDataSchema input.
 export type DashboardAgentClientData = {
   userId: string;
@@ -80,6 +101,8 @@ export function DashboardAgentChat({
   onTurnSettled,
   onActivityChange,
   onQuotaChange,
+  onNewChat,
+  showNewChat,
 }: {
   chatId: string;
   initialMessages: UIMessage[];
@@ -109,6 +132,8 @@ export function DashboardAgentChat({
   onActivityChange?: (chatId: string, activity: TurnActivity | null) => void;
   /** The poll lives here, so this is where the panel learns the cap has lifted. */
   onQuotaChange?: (quota: MessageQuota) => void;
+  onNewChat: () => void;
+  showNewChat: boolean;
 }) {
   const [input, setInput] = useState("");
   // Set when the server refuses a send over the cap, so the block shows at once rather than
@@ -158,16 +183,7 @@ export function DashboardAgentChat({
       return res;
     },
     clientData,
-    sessions: session
-      ? {
-          [chatId]: {
-            publicAccessToken: session.publicAccessToken,
-            lastEventId: session.lastEventId,
-            // Mid-turn chats must be marked streaming or the transport won't resume `session.out`.
-            isStreaming: streaming ?? false,
-          },
-        }
-      : undefined,
+    sessions: chatSessionsOption(chatId, session, streaming),
     startSession: async ({ chatId }) => {
       const body = new FormData();
       body.set("intent", "start");
@@ -489,6 +505,23 @@ export function DashboardAgentChat({
                 currentPage={currentPage}
               />
             }
+            trailingAction={
+              showNewChat && (
+                <Button
+                  variant="minimal/small"
+                  className="aspect-square h-6 shrink-0 p-1 mr-[6px]"
+                  aria-label="New chat"
+                  tooltip={
+                    <span className="flex items-center">
+                      New chat
+                      <ShortcutKey shortcut={NEW_CHAT_SHORTCUT} variant="medium" />
+                    </span>
+                  }
+                  onClick={onNewChat}
+                  LeadingIcon={<PlusIcon className="size-4 text-text-dimmed" />}
+                />
+              )
+            }
           />
           {quota.kind === "within" && (
             <AgentQuotaNotice remaining={quota.remaining} limit={quota.limit} />

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

@@ -20,6 +20,7 @@ export function DashboardAgentComposer({
   isStreaming,
   focusKey,
   context,
+  trailingAction,
   layout = "docked",
   autoFocus = true,
   placeholderSuggestion,
@@ -32,6 +33,8 @@ export function DashboardAgentComposer({
   // Bump to move focus back to the textarea.
   focusKey?: string | number;
   context?: React.ReactNode;
+  // Rendered right-aligned next to `context`, below the input.
+  trailingAction?: React.ReactNode;
   layout?: DashboardAgentComposerLayout;
   autoFocus?: boolean;
   // Shown as the placeholder while the field is empty. Tab accepts it as editable
@@ -81,7 +84,6 @@ export function DashboardAgentComposer({
         isHero ? "w-full" : "bg-background-bright px-3 pb-3 pt-1"
       )}
     >
-      {isHero ? null : context}
       <div
         className={cn(
           "border border-border-bright bg-background-bright transition focus-within:border-border-brighter",
@@ -152,6 +154,12 @@ export function DashboardAgentComposer({
           )}
         </div>
       </div>
+      {isHero ? null : (
+        <div className="flex min-w-0 items-center justify-between gap-2">
+          {context ?? <span />}
+          {trailingAction}
+        </div>
+      )}
       {/* Mounted from the start, empty until there is something to say: a region that appears
           with its first message goes unannounced in several screen readers. */}
       <p className="sr-only" aria-live="polite">