fix: complete the flows merge — fullscreen + hero reconciled with the watch surfaces

Author: kathiekiwi

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

@@ -13,7 +13,12 @@ import { DashboardAgentPanel } from "./DashboardAgentPanel";
 import { DashboardAgentProvider, TOGGLE_PANEL_SHORTCUT } from "./dashboardAgentLauncher";
 import { useDashboardAgentOpenRequests } from "./dashboardAgentOpenRequest";
 import {
-<<<<<<< HEAD
+  agentHiddenContentClassName,
+  agentTakeoverClassName,
+  readAgentFullscreen,
+  writeAgentFullscreen,
+} from "./panel-layout";
+import {
   showWatchWakesSummaryToast,
   showWatchWakeToast,
   WAKE_TOAST_MAX_INDIVIDUAL,
@@ -23,13 +28,6 @@ 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
@@ -59,14 +57,12 @@ 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);
@@ -77,7 +73,6 @@ export function DashboardAgent({
       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<
@@ -218,25 +213,6 @@ export function DashboardAgent({
   return (
     <DashboardAgentProvider value={context}>
       {open ? (
-<<<<<<< HEAD
-        <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={() => setPanelOpen(false)}
-              requestedMessage={requestedMessage}
-              openChatRequest={openChatRequest}
-              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
@@ -254,14 +230,16 @@ export function DashboardAgent({
             <ResizableHandle
               id="dashboard-agent-handle"
               className={fullscreen ? "invisible" : undefined}
->>>>>>> origin/feat/dashboard-agent-flows
             />
             <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}
                   promotedPrompt={promotedPrompt}
+                  onChatRead={markChatRead}
                   isFullscreen={fullscreen}
                   onToggleFullscreen={toggleFullscreen}
                 />

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

@@ -49,52 +49,33 @@ export function DashboardAgentDraft({
   );
 
   return (
-<<<<<<< HEAD
-    <>
-      <DashboardAgentSuggestedPrompts
-        onSelect={submit}
-        pageContext={pageContext}
-        promoted={promotedPrompt}
-      />
-      {watchCard}
-      <DashboardAgentComposer
-        value={input}
-        onChange={setInput}
-        onSubmit={() => submit(input)}
-        onStop={() => {}}
-        isStreaming={false}
-        context={
-          <DashboardAgentContextBanner
-            projectSlug={projectSlug}
-            environmentSlug={environmentSlug}
-            currentPage={currentPage}
-          />
-        }
-      />
-    </>
-=======
     <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}
-            />
-          }
-        />
+        // The card rides in the composer slot, directly above the field — the
+        // same place a chat puts it, so an ephemeral card reads the same in the
+        // blank state as it does mid-conversation.
+        <div className="flex w-full flex-col gap-3">
+          {watchCard}
+          <DashboardAgentComposer
+            layout="hero"
+            value={input}
+            onChange={setInput}
+            onSubmit={() => submit(input)}
+            onStop={() => {}}
+            isStreaming={false}
+            context={
+              <DashboardAgentContextBanner
+                projectSlug={projectSlug}
+                environmentSlug={environmentSlug}
+                currentPage={currentPage}
+              />
+            }
+          />
+        </div>
       }
     />
->>>>>>> origin/feat/dashboard-agent-flows
   );
 }

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

@@ -85,13 +85,10 @@ export function DashboardAgentPanel({
   requestedMessage,
   openChatRequest,
   promotedPrompt,
-<<<<<<< HEAD
   watchRequest,
   onChatRead,
-=======
   isFullscreen = false,
   onToggleFullscreen,
->>>>>>> origin/feat/dashboard-agent-flows
 }: {
   onClose: () => void;
   // Fullscreen is owned by `DashboardAgent` (it also has to hide the page
@@ -607,48 +604,6 @@ export function DashboardAgentPanel({
         onClose={onClose}
       />
 
-<<<<<<< HEAD
-      {loading ? (
-        <div className="flex flex-1 items-center justify-center">
-          <Spinner className="size-5" />
-        </div>
-      ) : active ? (
-        <DashboardAgentChat
-          key={active.chatId}
-          chatId={active.chatId}
-          initialMessages={active.messages}
-          session={active.session}
-          pendingFirstMessage={active.pendingFirstMessage}
-          streaming={active.streaming}
-          prefill={prefill && prefill.chatId === active.chatId ? prefill : undefined}
-          clientData={clientData}
-          apiOrigin={apiOrigin}
-          actionPath={actionPath}
-          projectSlug={project.slug}
-          environmentSlug={environment.slug}
-          currentPage={currentPage}
-          promotedPrompt={promotedPrompt}
-          watches={chatWatches}
-          pagePaths={pagePaths}
-          watchCard={watchCard}
-          appendedMessage={appendedMessage}
-          onWatchIntent={openWatchCard}
-          onCancelWatch={cancelWatch}
-          onTurnSettled={loadHistory}
-          onActivityChange={handleActivityChange}
-        />
-      ) : (
-        <DashboardAgentDraft
-          onSubmit={createChat}
-          projectSlug={project.slug}
-          environmentSlug={environment.slug}
-          currentPage={currentPage}
-          pageContext={pageContext}
-          promotedPrompt={promotedPrompt}
-          watchCard={watchCard}
-        />
-      )}
-=======
       {/* Always mounted, so switching to fullscreen only re-styles this column —
           the chat below it keeps its transport, session and transcript. */}
       <AgentPanelColumn fullscreen={isFullscreen}>
@@ -672,7 +627,12 @@ export function DashboardAgentPanel({
             environmentSlug={environment.slug}
             currentPage={currentPage}
             promotedPrompt={promotedPrompt}
+            watches={chatWatches}
             pagePaths={pagePaths}
+            watchCard={watchCard}
+            appendedMessage={appendedMessage}
+            onWatchIntent={openWatchCard}
+            onCancelWatch={cancelWatch}
             onTurnSettled={loadHistory}
             onActivityChange={handleActivityChange}
           />
@@ -684,10 +644,10 @@ export function DashboardAgentPanel({
             currentPage={currentPage}
             pageContext={pageContext}
             promotedPrompt={promotedPrompt}
+            watchCard={watchCard}
           />
         )}
       </AgentPanelColumn>
->>>>>>> origin/feat/dashboard-agent-flows
     </div>
   );
 }

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

@@ -1,6 +1,6 @@
 import {
   BookOpenIcon,
-  ChartBarIcon,
+  EyeIcon,
   MagnifyingGlassIcon,
   QuestionMarkCircleIcon,
   SparklesIcon,
@@ -21,7 +21,7 @@ import {
  *
  * - `promoted` / `investigate` — something to do about a problem, so they get
  *   the indigo primary the rest of the app uses for the main action.
- * - `status` — "what's going on right now", a neutral query: secondary.
+ * - `watch` — "tell me when this changes", a standing offer: secondary.
  * - `explain` — the evergreen question, the quietest of the set: tertiary.
  * - `docs` — a documentation question, so it gets the docs variant, the same
  *   style every "read the docs" button in the dashboard has.
@@ -32,7 +32,7 @@ export const PROMPT_SLOT_BUTTON: Record<
 > = {
   promoted: { variant: "primary/medium", icon: SparklesIcon },
   investigate: { variant: "primary/medium", icon: MagnifyingGlassIcon },
-  status: { variant: "secondary/medium", icon: ChartBarIcon },
+  watch: { variant: "secondary/medium", icon: EyeIcon },
   explain: { variant: "tertiary/medium", icon: QuestionMarkCircleIcon },
   docs: { variant: "docs/medium", icon: BookOpenIcon },
 };

apps/webapp/app/routes/storybook.agent-ui/manifest.ts

@@ -23,13 +23,10 @@ export type GalleryGroup =
   | "investigation"
   | "report"
   | "chart"
-<<<<<<< HEAD
   | "watches"
   | "watch-card"
   | "wakes"
-=======
   | "hero"
->>>>>>> origin/feat/dashboard-agent-flows
   | "prompts"
   | "intents"
   | "messages"
@@ -56,13 +53,10 @@ export const GALLERY_GROUPS: { group: GalleryGroup; label: string }[] = [
   { group: "investigation", label: "Investigation card" },
   { group: "report", label: "Report card" },
   { group: "chart", label: "Chart card" },
-<<<<<<< HEAD
   { group: "watches", label: "Watch chips" },
   { group: "watch-card", label: "Watch card" },
   { group: "wakes", label: "Wake banners" },
-=======
   { group: "hero", label: "Blank-state hero" },
->>>>>>> origin/feat/dashboard-agent-flows
   { group: "prompts", label: "Suggested prompts" },
   { group: "intents", label: "Intent bubbles" },
   { group: "messages", label: "Message-level states" },
@@ -236,7 +230,6 @@ export const MANIFEST: GallerySection[] = [
   },
   { sectionId: "chart-empty", title: "Empty — no data to display", group: "chart" },
 
-<<<<<<< HEAD
   // --- Watch chips ---------------------------------------------------------
   { sectionId: "watches-active", title: "Active — cancellable", group: "watches" },
   { sectionId: "watches-fired", title: "Fired", group: "watches" },
@@ -292,7 +285,8 @@ export const MANIFEST: GallerySection[] = [
     sectionId: "wake-unknown-watch",
     title: "Fired, watch not in hand — kind-agnostic",
     group: "wakes",
-=======
+  },
+
   // --- Blank-state hero -----------------------------------------------------
   // The new-chat state, with the composer inside the hero. Both widths it ships
   // at: the 380px side panel and the fullscreen takeover's centred column.
@@ -320,7 +314,6 @@ export const MANIFEST: GallerySection[] = [
     sectionId: "hero-in-chat",
     title: "Empty chat — hero without its own composer",
     group: "hero",
->>>>>>> origin/feat/dashboard-agent-flows
   },
 
   // --- Suggested prompts ---------------------------------------------------