fix(webapp): fullscreen toggle remounted the chat; settle-merge missed streaming text

Confirmed both, refuted neither:

1. FloatingAgentWindow (Devin BUG, panel-layout.tsx): fullscreen and
   floating returned different element trees, so children() sat at a
   different tree position in each — flipping fullscreen unmounted and
   remounted the chat panel, resetting its session and interrupting a
   live stream. Verified with a jsdom test (mount count 1 -> 2 on
   toggle) before fixing; now one tree shape, only classes/style and a
   conditional drag-handler object change.

2. mergeSettledMessages (CodeRabbit MAJOR, settled-transcript.ts):
   stillRunning only checked tool-* parts, so a settled text message
   never replaced its still-"streaming" in-memory copy — a resumed
   prose-only chat could stay stuck showing partial text after the
   server settled it. Widened stillRunning to also treat a `text` part
   with state "streaming" as running.

Item 3 (crumbs markers) intentionally not touched.

Author: kathiekiwi

apps/webapp/app/components/dashboard-agent/panel-layout.dom.test.ts

@@ -1,5 +1,5 @@
 // @vitest-environment jsdom
-import { createElement } from "react";
+import { createElement, useEffect } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { act } from "react-dom/test-utils";
 import { afterEach, describe, expect, it } from "vitest";
@@ -174,3 +174,36 @@ describe("FloatingAgentWindow's drag-vs-click filter", () => {
     expect(view.outerLeft()).toBe(startLeft);
   });
 });
+
+describe("FloatingAgentWindow keeps its child mounted across a fullscreen toggle", () => {
+  it("never remounts the child when `fullscreen` flips (same tree shape both ways)", () => {
+    let mounts = 0;
+    function Marker() {
+      useEffect(() => {
+        mounts += 1;
+      }, []);
+      return null;
+    }
+    function Harness({ fullscreen }: { fullscreen: boolean }) {
+      return createElement(FloatingAgentWindow, { fullscreen }, () => createElement(Marker));
+    }
+
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+    act(() => {
+      root!.render(createElement(Harness, { fullscreen: false }));
+    });
+    expect(mounts).toBe(1);
+
+    act(() => {
+      root!.render(createElement(Harness, { fullscreen: true }));
+    });
+    expect(mounts).toBe(1);
+
+    act(() => {
+      root!.render(createElement(Harness, { fullscreen: false }));
+    });
+    expect(mounts).toBe(1);
+  });
+});

apps/webapp/app/components/dashboard-agent/panel-layout.tsx

@@ -91,64 +91,67 @@ export function FloatingAgentWindow({
   const gestureClassified = useRef(false);
   const ignoringGesture = useRef(false);
 
-  if (fullscreen) {
-    return (
-      <div className={agentTakeoverClassName(true)}>
-        {children({ dragHandleProps: {}, dragHandleClassName: "" })}
-      </div>
-    );
-  }
-
   const classifyGesture = (event: PointerEvent) => {
     if (gestureClassified.current) return;
     gestureClassified.current = true;
     ignoringGesture.current = !!(event.target as HTMLElement | null)?.closest(NO_DRAG_SELECTOR);
   };
 
-  const filteredDragHandleProps: Partial<PanHandlerProps> = {
-    onPanStart: (event: PointerEvent, info: PanInfo) => {
-      classifyGesture(event);
-      if (ignoringGesture.current) return;
-      setDragging(true);
-      dragHandleProps.onPanStart?.(event, info);
-    },
-    onPan: (event: PointerEvent, info: PanInfo) => {
-      classifyGesture(event);
-      if (ignoringGesture.current) return;
-      dragHandleProps.onPan?.(event, info);
-    },
-    onPanEnd: (event: PointerEvent, info: PanInfo) => {
-      gestureClassified.current = false;
-      ignoringGesture.current = false;
-      setDragging(false);
-      dragHandleProps.onPanEnd?.(event, info);
-    },
-  };
+  // Same shape as `dragHandleProps` below empty, so fullscreen (no drag) doesn't change types.
+  const filteredDragHandleProps: Partial<PanHandlerProps> = fullscreen
+    ? {}
+    : {
+        onPanStart: (event: PointerEvent, info: PanInfo) => {
+          classifyGesture(event);
+          if (ignoringGesture.current) return;
+          setDragging(true);
+          dragHandleProps.onPanStart?.(event, info);
+        },
+        onPan: (event: PointerEvent, info: PanInfo) => {
+          classifyGesture(event);
+          if (ignoringGesture.current) return;
+          dragHandleProps.onPan?.(event, info);
+        },
+        onPanEnd: (event: PointerEvent, info: PanInfo) => {
+          gestureClassified.current = false;
+          ignoringGesture.current = false;
+          setDragging(false);
+          dragHandleProps.onPanEnd?.(event, info);
+        },
+      };
 
+  // Same two-`div` shape in both modes — only classes/style change — so toggling `fullscreen`
+  // never unmounts `children`; only className/style differ.
   return (
     <div
-      style={style}
-      className="z-20 flex flex-col rounded-lg border border-border-bright bg-background-bright shadow-2xl"
+      style={fullscreen ? undefined : style}
+      className={
+        fullscreen
+          ? agentTakeoverClassName(true)
+          : "z-20 flex flex-col rounded-lg border border-border-bright bg-background-bright shadow-2xl"
+      }
     >
       {/* Clips content to the rounded corners without clipping the resize handles below,
           which sit half outside this box's edges. */}
-      <div className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-lg">
+      <div
+        className={cn("flex min-h-0 flex-1 flex-col", !fullscreen && "overflow-hidden rounded-lg")}
+      >
         {/* oxlint-disable-next-line react/refs -- the ref is only read inside event handlers, not during render. */}
         {children({
           dragHandleProps: filteredDragHandleProps,
-          dragHandleClassName: cn(
-            "select-none touch-none",
-            dragging ? "cursor-grabbing" : "cursor-grab"
-          ),
+          dragHandleClassName: fullscreen
+            ? ""
+            : cn("select-none touch-none", dragging ? "cursor-grabbing" : "cursor-grab"),
         })}
       </div>
-      {RESIZE_EDGES.map((edge) => (
-        <motion.div
-          key={edge}
-          {...resizeHandleProps(edge)}
-          className={draggableResizeHandleClassName(edge)}
-        />
-      ))}
+      {!fullscreen &&
+        RESIZE_EDGES.map((edge) => (
+          <motion.div
+            key={edge}
+            {...resizeHandleProps(edge)}
+            className={draggableResizeHandleClassName(edge)}
+          />
+        ))}
     </div>
   );
 }

apps/webapp/app/components/dashboard-agent/settled-transcript.test.ts

@@ -116,6 +116,27 @@ describe("replacing a stale running step from the re-read", () => {
     expect(merged.map((message) => message.id)).toEqual([RUNNING_STEP.id, SETTLED.id]);
     expect(merged[0]).toBe(RUNNING_STEP);
   });
+
+  // A prose-only turn: no tool part, just a `text` part the stream never marked done.
+  const RUNNING_TEXT = {
+    id: "msg_text",
+    role: "assistant",
+    parts: [{ type: "text", text: "Concurrency on the ", state: "streaming" }],
+  };
+
+  const FINISHED_TEXT = {
+    id: "msg_text",
+    role: "assistant",
+    parts: [
+      { type: "text", text: "Concurrency on the `emails` queue hit its limit.", state: "done" },
+    ],
+  };
+
+  it("swaps a still-streaming text part for its settled version too", () => {
+    const merged = mergeSettledMessages([RUNNING_TEXT], [FINISHED_TEXT]);
+    expect(merged).toEqual([FINISHED_TEXT]);
+    expect(transcriptLooksUnfinished(merged)).toBe(false);
+  });
 });
 
 describe("reading the transcript endpoint", () => {

apps/webapp/app/components/dashboard-agent/settled-transcript.ts

@@ -16,15 +16,16 @@ import {
 
 type Identified = { id: string };
 
-/** A message whose stream died mid-tool: a `tool-*` part still reads as running. */
+/** A message whose stream died mid-tool or mid-text: a part still reads as running. */
 function stillRunning(message: unknown): boolean {
   const parts = (message as { parts?: ReadonlyArray<{ type?: string; state?: string }> })?.parts;
   if (!Array.isArray(parts)) return false;
   return parts.some(
     (part) =>
-      typeof part?.type === "string" &&
-      part.type.startsWith("tool-") &&
-      IN_FLIGHT_TOOL_STATES.has(part.state ?? "")
+      (typeof part?.type === "string" &&
+        part.type.startsWith("tool-") &&
+        IN_FLIGHT_TOOL_STATES.has(part.state ?? "")) ||
+      (part?.type === "text" && part.state === "streaming")
   );
 }