Merge branch 'feat/dashboard-agent-flows' into feat/dashboard-agent-watch

Author: kathiekiwi

.server-changes/dashboard-agent-hero-and-fullscreen.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+A new chat with the agent now opens with a bigger prompt field and one-click suggestions for the page you're on. You can also expand the agent to fill the screen and collapse it back to the side panel, keeping your conversation.

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

@@ -13,6 +13,7 @@ import { DashboardAgentPanel } from "./DashboardAgentPanel";
 import { DashboardAgentProvider, TOGGLE_PANEL_SHORTCUT } from "./dashboardAgentLauncher";
 import { useDashboardAgentOpenRequests } from "./dashboardAgentOpenRequest";
 import {
+<<<<<<< HEAD
   showWatchWakesSummaryToast,
   showWatchWakeToast,
   WAKE_TOAST_MAX_INDIVIDUAL,
@@ -22,6 +23,13 @@ import {
 // How often the closed panel asks whether a watch woke a chat. A wake is worth
 // noticing within a minute, and the count is one indexed query.
 const UNREAD_POLL_INTERVAL_MS = 60_000;
+=======
+  agentHiddenContentClassName,
+  agentTakeoverClassName,
+  readAgentFullscreen,
+  writeAgentFullscreen,
+} from "./panel-layout";
+>>>>>>> origin/feat/dashboard-agent-flows
 
 /**
  * Mounts the dashboard agent in the env layout. Renders the page content
@@ -51,12 +59,25 @@ export function DashboardAgent({
   const actionPath = `/resources/orgs/${organization.slug}/projects/${project.slug}/env/${environment.slug}/dashboard-agent`;
 
   const [open, setOpen] = useState(false);
+<<<<<<< HEAD
   const [unreadWakes, setUnreadWakes] = useState(0);
   // Wakes already toasted this session. Session-scoped on purpose: a wake that
   // arrived overnight deserves the toast on the first poll after a reload, but a
   // wake the user has already been shown (and maybe dismissed) must not come
   // back every 60s while the chat stays unread.
   const toastedWakes = useRef(new Set<string>());
+=======
+  // The side panel is the default; someone who last worked fullscreen gets
+  // fullscreen back. Read lazily so SSR always renders the side panel.
+  const [fullscreen, setFullscreen] = useState(readAgentFullscreen);
+
+  const toggleFullscreen = useCallback(() => {
+    setFullscreen((current) => {
+      writeAgentFullscreen(!current);
+      return !current;
+    });
+  }, []);
+>>>>>>> origin/feat/dashboard-agent-flows
   // A request from `openWith`, handed to the panel. `seq` makes repeat requests
   // with the same text distinct, so the panel can tell them apart.
   const [requestedMessage, setRequestedMessage] = useState<
@@ -197,6 +218,7 @@ export function DashboardAgent({
   return (
     <DashboardAgentProvider value={context}>
       {open ? (
+<<<<<<< HEAD
         <ResizablePanelGroup
           orientation="horizontal"
           autosaveId="dashboard-agent-split"
@@ -214,9 +236,39 @@ export function DashboardAgent({
               watchRequest={watchRequest}
               promotedPrompt={promotedPrompt}
               onChatRead={markChatRead}
+=======
+        // `relative` is the takeover's containing block: in fullscreen the panel
+        // is pinned over this box — everything right of the side nav — while the
+        // split, the page content and the panel itself all stay mounted. Toggling
+        // fullscreen is a class change, nothing more, so the open chat's
+        // transport and transcript survive it. See `panel-layout.tsx`.
+        <div className="relative h-full min-h-0">
+          <ResizablePanelGroup
+            orientation="horizontal"
+            autosaveId="dashboard-agent-split"
+            className="h-full min-h-0"
+          >
+            <ResizablePanel id="dashboard-content" min="320px">
+              <div className={agentHiddenContentClassName(fullscreen)}>{children}</div>
+            </ResizablePanel>
+            <ResizableHandle
+              id="dashboard-agent-handle"
+              className={fullscreen ? "invisible" : undefined}
+>>>>>>> origin/feat/dashboard-agent-flows
             />
-          </ResizablePanel>
-        </ResizablePanelGroup>
+            <ResizablePanel id="dashboard-agent-panel" default="380px" min="320px" max="720px">
+              <div className={agentTakeoverClassName(fullscreen)}>
+                <DashboardAgentPanel
+                  onClose={() => setPanelOpen(false)}
+                  requestedMessage={requestedMessage}
+                  promotedPrompt={promotedPrompt}
+                  isFullscreen={fullscreen}
+                  onToggleFullscreen={toggleFullscreen}
+                />
+              </div>
+            </ResizablePanel>
+          </ResizablePanelGroup>
+        </div>
       ) : (
         <div className="h-full min-h-0 overflow-hidden">{children}</div>
       )}

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

@@ -9,8 +9,8 @@ import { useToast } from "~/components/primitives/Toast";
 import { AgentQuotaNotice, AgentUpgradeBlock } from "./AgentUpgradeGate";
 import { DashboardAgentComposer } from "./DashboardAgentComposer";
 import { DashboardAgentContextBanner } from "./DashboardAgentContextBanner";
+import { DashboardAgentHero } from "./DashboardAgentHero";
 import { DashboardAgentMessages, type TurnActivity } from "./DashboardAgentMessages";
-import { DashboardAgentSuggestedPrompts } from "./DashboardAgentSuggestedPrompts";
 import { createTranscriptOrder, orderTranscript } from "./message-order";
 import { appendRunFilters, pendingNavigateIntents } from "./navigate-target";
 import type { AgentPageContext } from "./page-context-types";
@@ -385,7 +385,9 @@ export function DashboardAgentChat({
           be sent, so the prompts would flash for a frame before the transcript
           replaced them. Gate on that pending send. */}
       {messages.length === 0 && !pendingFirstMessage ? (
-        <DashboardAgentSuggestedPrompts
+        // The blank state, minus the composer: this chat already has one docked
+        // below.
+        <DashboardAgentHero
           onSelect={submit}
           pageContext={clientData.pageContext}
           promoted={promotedPrompt}

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

@@ -3,6 +3,13 @@ import { useEffect, useRef } from "react";
 import { Button } from "~/components/primitives/Buttons";
 import { cn } from "~/utils/cn";
 
+/**
+ * - `docked` — the composer at the bottom of the panel, one line tall at rest.
+ * - `hero` — the composer in the blank-state hero: a large field with the send
+ *   button (and the context chip) on a row inside it.
+ */
+export type DashboardAgentComposerLayout = "docked" | "hero";
+
 export function DashboardAgentComposer({
   value,
   onChange,
@@ -11,6 +18,8 @@ export function DashboardAgentComposer({
   isStreaming,
   focusKey,
   context,
+  layout = "docked",
+  autoFocus = true,
 }: {
   value: string;
   onChange: (value: string) => void;
@@ -23,29 +32,73 @@ export function DashboardAgentComposer({
   // The context chip. It describes the message about to be sent, so it belongs
   // in the composer's footer rather than at the top of the panel.
   context?: React.ReactNode;
+  // Where this composer is mounted. `docked` (the default) is the panel footer
+  // and renders exactly as it always has.
+  layout?: DashboardAgentComposerLayout;
+  // Off only where a composer isn't the thing the user came for — the storybook
+  // gallery renders several at once and must not steal the page's focus.
+  autoFocus?: boolean;
 }) {
   const ref = useRef<HTMLTextAreaElement>(null);
 
   useEffect(() => {
     const el = ref.current;
-    if (!el) return;
+    if (!el || !autoFocus) return;
     el.focus();
     // Caret after any prefilled text, so typing continues the sentence.
     el.setSelectionRange(el.value.length, el.value.length);
-  }, [focusKey]);
+  }, [focusKey, autoFocus]);
+
+  const isHero = layout === "hero";
+
+  const sendButton = isStreaming ? (
+    // Grey, not red: stopping is a normal thing to do mid-answer, not a
+    // destructive action.
+    <Button
+      variant="minimal/small"
+      className="aspect-square h-6 p-1"
+      aria-label="Stop generating"
+      tooltip="Stop generating"
+      onClick={onStop}
+      LeadingIcon={<StopIcon className="size-4 text-text-dimmed" />}
+    />
+  ) : (
+    <Button
+      variant="primary/small"
+      className="aspect-square h-6 p-1"
+      aria-label="Send"
+      tooltip="Send"
+      onClick={onSubmit}
+      disabled={!value.trim()}
+      LeadingIcon={<ArrowUpIcon className="size-4" />}
+    />
+  );
 
   return (
     // No top border: the transcript scrolls behind the footer, which is what the
     // gradient in `ChatTranscript`'s scroller edge is for.
-    <div className="flex shrink-0 flex-col gap-1.5 bg-background-bright px-3 pb-3 pt-1">
-      {context}
-      <div className="rounded-md border border-border-bright bg-background-bright p-1 transition focus-within:border-border-brighter">
-        <div className="flex items-end gap-1">
-          {/* One text line tall at rest (matches the button height), grows with
-              content up to the cap. rows={1} + field-sizing-content do the work. */}
+    <div
+      className={cn(
+        "flex shrink-0 flex-col gap-1.5",
+        isHero ? "w-full" : "bg-background-bright px-3 pb-3 pt-1"
+      )}
+    >
+      {/* In the hero the context chip rides on the field's own bottom row, next
+          to the send button, so the field reads as one block. */}
+      {isHero ? null : context}
+      <div
+        className={cn(
+          "border border-border-bright bg-background-bright transition focus-within:border-border-brighter",
+          isHero ? "rounded-lg p-2" : "rounded-md p-1"
+        )}
+      >
+        <div className={isHero ? "flex flex-col gap-1.5" : "flex items-end gap-1"}>
+          {/* Docked: one text line tall at rest (matches the button height),
+              growing with content up to the cap. Hero: three lines at rest, the
+              same growth. rows + field-sizing-content do the work. */}
           <textarea
             ref={ref}
-            rows={1}
+            rows={isHero ? 3 : 1}
             value={value}
             onChange={(e) => onChange(e.target.value)}
             onKeyDown={(e) => {
@@ -57,30 +110,17 @@ export function DashboardAgentComposer({
             placeholder="Type a message…"
             aria-label="Message the dashboard agent"
             className={cn(
-              "max-h-[40vh] flex-1 resize-none border-0 bg-transparent px-1.5 py-0.5 text-sm leading-6 text-text-bright placeholder-text-dimmed outline-hidden ring-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control field-sizing-content focus:outline-hidden focus:ring-0"
+              "max-h-[40vh] flex-1 resize-none border-0 bg-transparent px-1.5 py-0.5 text-sm leading-6 text-text-bright placeholder-text-dimmed outline-hidden ring-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control field-sizing-content focus:outline-hidden focus:ring-0",
+              isHero && "w-full"
             )}
           />
-          {isStreaming ? (
-            // Grey, not red: stopping is a normal thing to do mid-answer, not a
-            // destructive action.
-            <Button
-              variant="minimal/small"
-              className="aspect-square h-6 p-1"
-              aria-label="Stop generating"
-              tooltip="Stop generating"
-              onClick={onStop}
-              LeadingIcon={<StopIcon className="size-4 text-text-dimmed" />}
-            />
+          {isHero ? (
+            <div className="flex min-w-0 items-center justify-between gap-2">
+              {context ?? <span />}
+              {sendButton}
+            </div>
           ) : (
-            <Button
-              variant="primary/small"
-              className="aspect-square h-6 p-1"
-              aria-label="Send"
-              tooltip="Send"
-              onClick={onSubmit}
-              disabled={!value.trim()}
-              LeadingIcon={<ArrowUpIcon className="size-4" />}
-            />
+            sendButton
           )}
         </div>
       </div>

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

@@ -2,15 +2,19 @@ import type { SuggestedPrompt } from "@internal/dashboard-agent-contracts";
 import { useCallback, useState } from "react";
 import { DashboardAgentComposer } from "./DashboardAgentComposer";
 import { DashboardAgentContextBanner } from "./DashboardAgentContextBanner";
-import { DashboardAgentSuggestedPrompts } from "./DashboardAgentSuggestedPrompts";
+import { DashboardAgentHero } from "./DashboardAgentHero";
 import type { AgentPageContext } from "./page-context-types";
 
 /**
- * The new-chat "draft" state: suggested prompts + composer with no transport
- * mounted and no chat id yet. The chat id is server-owned, so the first send
- * goes to the panel's `create` call, which generates the id and returns it;
- * only then does the real `DashboardAgentChat` mount. The client never invents
- * a chat id.
+ * The new-chat "draft" state: the blank-state hero — title, subtitle, the field
+ * you type in and the suggested prompts — with no transport mounted and no chat
+ * id yet. The chat id is server-owned, so the first send goes to the panel's
+ * `create` call, which generates the id and returns it; only then does the real
+ * `DashboardAgentChat` mount. The client never invents a chat id.
+ *
+ * The composer lives inside the hero here and docks to the bottom of the panel
+ * once a chat exists — the same component either way, so nothing about the field
+ * (focus, caret, keybindings) changes across that switch.
  */
 export function DashboardAgentDraft({
   onSubmit,
@@ -45,6 +49,7 @@ export function DashboardAgentDraft({
   );
 
   return (
+<<<<<<< HEAD
     <>
       <DashboardAgentSuggestedPrompts
         onSelect={submit}
@@ -67,5 +72,29 @@ export function DashboardAgentDraft({
         }
       />
     </>
+=======
+    <DashboardAgentHero
+      onSelect={submit}
+      pageContext={pageContext}
+      promoted={promotedPrompt}
+      composer={
+        <DashboardAgentComposer
+          layout="hero"
+          value={input}
+          onChange={setInput}
+          onSubmit={() => submit(input)}
+          onStop={() => {}}
+          isStreaming={false}
+          context={
+            <DashboardAgentContextBanner
+              projectSlug={projectSlug}
+              environmentSlug={environmentSlug}
+              currentPage={currentPage}
+            />
+          }
+        />
+      }
+    />
+>>>>>>> origin/feat/dashboard-agent-flows
   );
 }

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

@@ -1,3 +1,4 @@
+import { ArrowsPointingInIcon, ArrowsPointingOutIcon } from "@heroicons/react/20/solid";
 import { useState } from "react";
 import { CrossIcon } from "~/assets/icons/CrossIcon";
 import { PlusIcon } from "~/assets/icons/PlusIcon";
@@ -34,6 +35,8 @@ export function DashboardAgentHeader({
   onOpenHistory,
   onSelectChat,
   onDeleteChat,
+  onToggleFullscreen,
+  isFullscreen,
   onClose,
 }: {
   // The active chat's title (the panel owns resolving it). Titles are written by
@@ -50,6 +53,9 @@ export function DashboardAgentHeader({
   onOpenHistory: () => void;
   onSelectChat: (chatId: string) => void;
   onDeleteChat: (chatId: string) => void;
+  /** Swap between the side panel and the fullscreen takeover. */
+  onToggleFullscreen: () => void;
+  isFullscreen: boolean;
   onClose: () => void;
 }) {
   const [isHistoryOpen, setHistoryOpen] = useState(false);
@@ -104,6 +110,20 @@ export function DashboardAgentHeader({
             LeadingIcon={<PlusIcon className="size-4 text-text-dimmed" />}
           />
         )}
+        <Button
+          variant="minimal/small"
+          className="aspect-square h-6 p-1"
+          aria-label={isFullscreen ? "Collapse into the side panel" : "Expand"}
+          tooltip={isFullscreen ? "Collapse into the side panel" : "Expand"}
+          onClick={onToggleFullscreen}
+          LeadingIcon={
+            isFullscreen ? (
+              <ArrowsPointingInIcon className="size-4 text-text-dimmed" />
+            ) : (
+              <ArrowsPointingOutIcon className="size-4 text-text-dimmed" />
+            )
+          }
+        />
         {/* Esc is handled by the panel (only while focus is inside it), so the
             key is shown here rather than registered as a global shortcut. */}
         <Button