From 7cefff59fd3ed7cd3fbd4f7b15df860a50908c69 Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Wed, 26 Aug 2026 14:09:23 +0000
Subject: [PATCH 01/43] feat(webapp): draggable/resizable window primitive

useDraggableResizable hook (framer-motion pan gestures, pure geometry
helpers) for a floating window draggable and resizable from any edge,
clamped to the viewport. Adds a storybook demo route.
---
 .../primitives/DraggableResizable.tsx         | 156 ++++++++++++++++++
 .../primitives/draggableResizableMath.test.ts | 125 ++++++++++++++
 .../primitives/draggableResizableMath.ts      |  75 +++++++++
 .../storybook.draggable-resizable/route.tsx   |  46 ++++++
 apps/webapp/app/routes/storybook/route.tsx    |   1 +
 apps/webapp/vitest.config.ts                  |   1 +
 6 files changed, 404 insertions(+)
 create mode 100644 apps/webapp/app/components/primitives/DraggableResizable.tsx
 create mode 100644 apps/webapp/app/components/primitives/draggableResizableMath.test.ts
 create mode 100644 apps/webapp/app/components/primitives/draggableResizableMath.ts
 create mode 100644 apps/webapp/app/routes/storybook.draggable-resizable/route.tsx

diff --git a/apps/webapp/app/components/primitives/DraggableResizable.tsx b/apps/webapp/app/components/primitives/DraggableResizable.tsx
new file mode 100644
index 00000000000..c864422251f
--- /dev/null
+++ b/apps/webapp/app/components/primitives/DraggableResizable.tsx
@@ -0,0 +1,156 @@
+import { useCallback, useEffect, useRef, useState, type CSSProperties } from "react";
+import { type PanInfo } from "framer-motion";
+import { cn } from "~/utils/cn";
+import {
+  clampPosition,
+  clampRectToViewport,
+  clampSize,
+  resizeRect,
+  type Point,
+  type Rect,
+  type ResizeEdge,
+  type Size,
+} from "./draggableResizableMath";
+
+export type { ResizeEdge } from "./draggableResizableMath";
+
+export type UseDraggableResizableOptions = {
+  initial: Rect;
+  minSize: Size;
+  maxSize?: Size;
+  /** Minimum distance kept from the viewport edges. Defaults to 8px. */
+  viewportPadding?: number;
+};
+
+/** Spread onto a framer-motion `motion.div` — drag/resize tracking rides on its pan gesture. */
+export type PanHandlerProps = {
+  onPanStart: (event: PointerEvent, info: PanInfo) => void;
+  onPan: (event: PointerEvent, info: PanInfo) => void;
+  onPanEnd: (event: PointerEvent, info: PanInfo) => void;
+};
+
+export type UseDraggableResizableResult = {
+  /**
+   * position:fixed with left/top/width/height set from state. `x`/`y` are the
+   * top-left corner in viewport coordinates — if the window docks bottom-right,
+   * derive the initial x/y from `window.innerWidth/innerHeight - w/h - padding`.
+   */
+  style: CSSProperties;
+  dragHandleProps: PanHandlerProps;
+  resizeHandleProps: (edge: ResizeEdge) => PanHandlerProps;
+  position: Point;
+  size: Size;
+};
+
+function getViewport() {
+  return { width: window.innerWidth, height: window.innerHeight };
+}
+
+export function useDraggableResizable({
+  initial,
+  minSize,
+  maxSize,
+  viewportPadding = 8,
+}: UseDraggableResizableOptions): UseDraggableResizableResult {
+  const [rect, setRect] = useState<Rect>(() => {
+    const size = clampSize({ w: initial.w, h: initial.h }, minSize, maxSize);
+    return { ...clampPosition(initial, size, getViewport(), viewportPadding), ...size };
+  });
+  const rectRef = useRef(rect);
+  // oxlint-disable-next-line react/refs -- mirrors state into a ref for use inside gesture callbacks, not for rendering.
+  rectRef.current = rect;
+
+  // Snapshot of the rect at gesture start; framer-motion's PanInfo.offset is
+  // cumulative from pan start, so every onPan step re-applies it to this.
+  const startRectRef = useRef(rect);
+
+  // Re-clamp on viewport resize so the box never strands off-screen.
+  useEffect(() => {
+    const onResize = () => {
+      setRect((current) => clampRectToViewport(current, getViewport(), viewportPadding));
+    };
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, [viewportPadding]);
+
+  const dragHandleProps: PanHandlerProps = {
+    onPanStart: useCallback(() => {
+      startRectRef.current = rectRef.current;
+    }, []),
+    onPan: useCallback(
+      (_event, info: PanInfo) => {
+        const startRect = startRectRef.current;
+        const nextPosition = clampPosition(
+          { x: startRect.x + info.offset.x, y: startRect.y + info.offset.y },
+          { w: startRect.w, h: startRect.h },
+          getViewport(),
+          viewportPadding
+        );
+        setRect((current) => ({ ...current, ...nextPosition }));
+      },
+      [viewportPadding]
+    ),
+    onPanEnd: useCallback(() => {}, []),
+  };
+
+  const resizeHandleProps = useCallback(
+    (edge: ResizeEdge): PanHandlerProps => ({
+      onPanStart: () => {
+        startRectRef.current = rectRef.current;
+      },
+      onPan: (_event, info: PanInfo) => {
+        const startRect = startRectRef.current;
+        const resized = resizeRect(edge, startRect, info.offset.x, info.offset.y, minSize, maxSize);
+        setRect(clampRectToViewport(resized, getViewport(), viewportPadding));
+      },
+      onPanEnd: () => {},
+    }),
+    [minSize, maxSize, viewportPadding]
+  );
+
+  return {
+    style: {
+      position: "fixed",
+      left: rect.x,
+      top: rect.y,
+      width: rect.w,
+      height: rect.h,
+    },
+    dragHandleProps,
+    resizeHandleProps,
+    position: { x: rect.x, y: rect.y },
+    size: { w: rect.w, h: rect.h },
+  };
+}
+
+const EDGE_CURSOR: Record<ResizeEdge, string> = {
+  n: "cursor-ns-resize",
+  s: "cursor-ns-resize",
+  e: "cursor-ew-resize",
+  w: "cursor-ew-resize",
+  ne: "cursor-nesw-resize",
+  sw: "cursor-nesw-resize",
+  nw: "cursor-nwse-resize",
+  se: "cursor-nwse-resize",
+};
+
+const EDGE_POSITION: Record<ResizeEdge, string> = {
+  n: "inset-x-0 top-0 h-1.5 -translate-y-1/2",
+  s: "inset-x-0 bottom-0 h-1.5 translate-y-1/2",
+  e: "inset-y-0 right-0 w-1.5 translate-x-1/2",
+  w: "inset-y-0 left-0 w-1.5 -translate-x-1/2",
+  ne: "right-0 top-0 h-3 w-3 translate-x-1/2 -translate-y-1/2",
+  nw: "left-0 top-0 h-3 w-3 -translate-x-1/2 -translate-y-1/2",
+  se: "right-0 bottom-0 h-3 w-3 translate-x-1/2 translate-y-1/2",
+  sw: "left-0 bottom-0 h-3 w-3 -translate-x-1/2 translate-y-1/2",
+};
+
+/** Thin hit area for one resize edge/corner, styled to match ResizableHandle. Spread `resizeHandleProps(edge)` onto it. */
+export function DraggableResizeHandleClassName(edge: ResizeEdge, className?: string) {
+  return cn(
+    "absolute z-10 touch-none select-none",
+    EDGE_CURSOR[edge],
+    EDGE_POSITION[edge],
+    className
+  );
+}
diff --git a/apps/webapp/app/components/primitives/draggableResizableMath.test.ts b/apps/webapp/app/components/primitives/draggableResizableMath.test.ts
new file mode 100644
index 00000000000..030ae1209ca
--- /dev/null
+++ b/apps/webapp/app/components/primitives/draggableResizableMath.test.ts
@@ -0,0 +1,125 @@
+import { describe, expect, it } from "vitest";
+import {
+  clamp,
+  clampPosition,
+  clampRectToViewport,
+  clampSize,
+  resizeRect,
+} from "./draggableResizableMath";
+
+describe("clamp", () => {
+  it("clamps to the bounds", () => {
+    expect(clamp(5, 0, 10)).toBe(5);
+    expect(clamp(-5, 0, 10)).toBe(0);
+    expect(clamp(15, 0, 10)).toBe(10);
+  });
+});
+
+describe("clampSize", () => {
+  it("enforces the min size", () => {
+    expect(clampSize({ w: 10, h: 10 }, { w: 100, h: 50 })).toEqual({ w: 100, h: 50 });
+  });
+
+  it("enforces the max size when given", () => {
+    expect(clampSize({ w: 1000, h: 1000 }, { w: 100, h: 50 }, { w: 400, h: 300 })).toEqual({
+      w: 400,
+      h: 300,
+    });
+  });
+
+  it("is a no-op within bounds", () => {
+    expect(clampSize({ w: 200, h: 150 }, { w: 100, h: 50 }, { w: 400, h: 300 })).toEqual({
+      w: 200,
+      h: 150,
+    });
+  });
+});
+
+describe("clampPosition", () => {
+  const viewport = { width: 1000, height: 800 };
+
+  it("keeps a rect fully within the padded viewport", () => {
+    expect(clampPosition({ x: -50, y: -50 }, { w: 300, h: 200 }, viewport, 10)).toEqual({
+      x: 10,
+      y: 10,
+    });
+    expect(clampPosition({ x: 5000, y: 5000 }, { w: 300, h: 200 }, viewport, 10)).toEqual({
+      x: 690,
+      y: 590,
+    });
+  });
+
+  it("is a no-op when already inside bounds", () => {
+    expect(clampPosition({ x: 100, y: 100 }, { w: 300, h: 200 }, viewport, 10)).toEqual({
+      x: 100,
+      y: 100,
+    });
+  });
+
+  it("falls back to padding when the box is larger than the viewport", () => {
+    expect(clampPosition({ x: 100, y: 100 }, { w: 2000, h: 2000 }, viewport, 10)).toEqual({
+      x: 10,
+      y: 10,
+    });
+  });
+});
+
+describe("clampRectToViewport", () => {
+  it("clamps position while leaving size untouched", () => {
+    expect(
+      clampRectToViewport({ x: -100, y: 50, w: 300, h: 200 }, { width: 1000, height: 800 }, 10)
+    ).toEqual({ x: 10, y: 50, w: 300, h: 200 });
+  });
+});
+
+describe("resizeRect", () => {
+  const start = { x: 100, y: 100, w: 300, h: 200 };
+  const minSize = { w: 100, h: 80 };
+
+  it("east edge grows width, keeps x/y", () => {
+    expect(resizeRect("e", start, 50, 0, minSize)).toEqual({ x: 100, y: 100, w: 350, h: 200 });
+  });
+
+  it("south edge grows height, keeps x/y", () => {
+    expect(resizeRect("s", start, 0, 40, minSize)).toEqual({ x: 100, y: 100, w: 300, h: 240 });
+  });
+
+  it("west edge shrinks width and moves x to keep the right edge fixed", () => {
+    expect(resizeRect("w", start, 50, 0, minSize)).toEqual({ x: 150, y: 100, w: 250, h: 200 });
+  });
+
+  it("north edge shrinks height and moves y to keep the bottom edge fixed", () => {
+    expect(resizeRect("n", start, 0, 30, minSize)).toEqual({ x: 100, y: 130, w: 300, h: 170 });
+  });
+
+  it("corner edges combine both axes", () => {
+    expect(resizeRect("nw", start, 20, 20, minSize)).toEqual({
+      x: 120,
+      y: 120,
+      w: 280,
+      h: 180,
+    });
+    expect(resizeRect("se", start, -20, -20, minSize)).toEqual({
+      x: 100,
+      y: 100,
+      w: 280,
+      h: 180,
+    });
+  });
+
+  it("respects min size when shrinking past it", () => {
+    expect(resizeRect("e", start, -1000, 0, minSize)).toEqual({ x: 100, y: 100, w: 100, h: 200 });
+    // west edge: width clamps to min, x stops moving with it
+    expect(resizeRect("w", start, 1000, 0, minSize)).toEqual({ x: 300, y: 100, w: 100, h: 200 });
+  });
+
+  it("respects max size when growing past it", () => {
+    const maxSize = { w: 400, h: 300 };
+    expect(resizeRect("se", start, 1000, 1000, minSize, maxSize)).toEqual({
+      x: 100,
+      y: 100,
+      w: 400,
+      h: 300,
+    });
+  });
+});
diff --git a/apps/webapp/app/components/primitives/draggableResizableMath.ts b/apps/webapp/app/components/primitives/draggableResizableMath.ts
new file mode 100644
index 00000000000..f46bf6b5872
--- /dev/null
+++ b/apps/webapp/app/components/primitives/draggableResizableMath.ts
@@ -0,0 +1,75 @@
+// Pure geometry helpers for useDraggableResizable. No DOM/React here so they're easy to unit test.
+
+export type Point = { x: number; y: number };
+export type Size = { w: number; h: number };
+export type Rect = Point & Size;
+export type ResizeEdge = "n" | "e" | "s" | "w" | "ne" | "nw" | "se" | "sw";
+export type Viewport = { width: number; height: number };
+
+export function clamp(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value));
+}
+
+export function clampSize(size: Size, minSize: Size, maxSize?: Size): Size {
+  return {
+    w: clamp(size.w, minSize.w, maxSize?.w ?? Infinity),
+    h: clamp(size.h, minSize.h, maxSize?.h ?? Infinity),
+  };
+}
+
+/** Keeps the rect's top-left within [padding, viewport - padding - size], shrinking padding if the viewport is too small to honor it. */
+export function clampPosition(
+  position: Point,
+  size: Size,
+  viewport: Viewport,
+  padding: number
+): Point {
+  const maxX = Math.max(padding, viewport.width - padding - size.w);
+  const maxY = Math.max(padding, viewport.height - padding - size.h);
+  return {
+    x: clamp(position.x, padding, maxX),
+    y: clamp(position.y, padding, maxY),
+  };
+}
+
+export function clampRectToViewport(rect: Rect, viewport: Viewport, padding: number): Rect {
+  const position = clampPosition(
+    { x: rect.x, y: rect.y },
+    { w: rect.w, h: rect.h },
+    viewport,
+    padding
+  );
+  return { ...position, w: rect.w, h: rect.h };
+}
+
+/**
+ * Applies a pointer delta to `start` for the given resize edge, respecting min/max size.
+ * North/west edges move the opposite corner too so the far edge stays put.
+ */
+export function resizeRect(
+  edge: ResizeEdge,
+  start: Rect,
+  dx: number,
+  dy: number,
+  minSize: Size,
+  maxSize?: Size
+): Rect {
+  let { x, y, w, h } = start;
+
+  if (edge.includes("e")) {
+    w = clamp(start.w + dx, minSize.w, maxSize?.w ?? Infinity);
+  }
+  if (edge.includes("s")) {
+    h = clamp(start.h + dy, minSize.h, maxSize?.h ?? Infinity);
+  }
+  if (edge.includes("w")) {
+    w = clamp(start.w - dx, minSize.w, maxSize?.w ?? Infinity);
+    x = start.x + (start.w - w);
+  }
+  if (edge.includes("n")) {
+    h = clamp(start.h - dy, minSize.h, maxSize?.h ?? Infinity);
+    y = start.y + (start.h - h);
+  }
+
+  return { x, y, w, h };
+}
diff --git a/apps/webapp/app/routes/storybook.draggable-resizable/route.tsx b/apps/webapp/app/routes/storybook.draggable-resizable/route.tsx
new file mode 100644
index 00000000000..2fc7cad4da5
--- /dev/null
+++ b/apps/webapp/app/routes/storybook.draggable-resizable/route.tsx
@@ -0,0 +1,46 @@
+import { motion } from "framer-motion";
+import { ComponentNames } from "../storybook/StoryKit";
+import {
+  DraggableResizeHandleClassName,
+  useDraggableResizable,
+  type ResizeEdge,
+} from "~/components/primitives/DraggableResizable";
+
+const EDGES: ResizeEdge[] = ["n", "e", "s", "w", "ne", "nw", "se", "sw"];
+
+export default function Story() {
+  const { style, dragHandleProps, resizeHandleProps } = useDraggableResizable({
+    initial: { x: 120, y: 120, w: 360, h: 240 },
+    minSize: { w: 200, h: 140 },
+    maxSize: { w: 640, h: 480 },
+  });
+
+  return (
+    <div className="h-full">
+      <div className="px-4 pt-4">
+        <ComponentNames names={["DraggableResizable.tsx"]} />
+      </div>
+      <div
+        style={style}
+        className="flex flex-col overflow-hidden rounded-md border border-grid-bright bg-background-bright shadow-lg"
+      >
+        <motion.div
+          {...dragHandleProps}
+          className="flex h-8 shrink-0 cursor-grab touch-none select-none items-center bg-background-dimmed px-3 text-xs text-text-dimmed active:cursor-grabbing"
+        >
+          Drag me
+        </motion.div>
+        <div className="flex flex-1 items-center justify-center text-sm text-text-dimmed">
+          Resize from any edge or corner
+        </div>
+        {EDGES.map((edge) => (
+          <motion.div
+            key={edge}
+            {...resizeHandleProps(edge)}
+            className={DraggableResizeHandleClassName(edge)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/webapp/app/routes/storybook/route.tsx b/apps/webapp/app/routes/storybook/route.tsx
index 35f51682938..e76ba520236 100644
--- a/apps/webapp/app/routes/storybook/route.tsx
+++ b/apps/webapp/app/routes/storybook/route.tsx
@@ -95,6 +95,7 @@ const sections: StorySection[] = [
       { name: "Page header", slug: "page-header" },
       { name: "Tree view", slug: "tree-view" },
       { name: "Resizable", slug: "resizable" },
+      { name: "Draggable resizable", slug: "draggable-resizable" },
       { name: "Animated panel", slug: "animated-panel" },
       { name: "Accordion", slug: "accordion" },
     ],
diff --git a/apps/webapp/vitest.config.ts b/apps/webapp/vitest.config.ts
index dabe517bf4f..3ccfd214c8f 100644
--- a/apps/webapp/vitest.config.ts
+++ b/apps/webapp/vitest.config.ts
@@ -22,6 +22,7 @@ export default defineConfig({
       "app/components/runs/**/*.test.ts",
       "app/components/dashboard-agent/**/*.test.ts",
       "app/components/queues/**/*.test.ts",
+      "app/components/primitives/**/*.test.ts",
       "app/routes/storybook.agent-ui/*.test.ts",
       "app/presenters/v3/reports/**/*.test.ts",
     ],

From c46f8b90f14006721eec340ac1a1be98868e4095 Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Wed, 26 Aug 2026 14:21:05 +0000
Subject: [PATCH 02/43] fix(webapp): SSR-safe viewport read and viewport-aware
 resize clamping

getViewport() no longer reads window during SSR; the resize effect
re-clamps once on mount. resizeRect now caps per-edge growth against
the viewport before deriving x/y, so the far edge never drifts. Drops
gratuitous useCallback in handler literals, renames the className
helper to reflect it returns a string.
---
 .../primitives/DraggableResizable.tsx         | 79 +++++++++--------
 .../primitives/draggableResizableMath.test.ts | 86 +++++++++++++++++--
 .../primitives/draggableResizableMath.ts      | 22 +++--
 .../storybook.draggable-resizable/route.tsx   |  4 +-
 4 files changed, 139 insertions(+), 52 deletions(-)

diff --git a/apps/webapp/app/components/primitives/DraggableResizable.tsx b/apps/webapp/app/components/primitives/DraggableResizable.tsx
index c864422251f..33cb19c0f76 100644
--- a/apps/webapp/app/components/primitives/DraggableResizable.tsx
+++ b/apps/webapp/app/components/primitives/DraggableResizable.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState, type CSSProperties } from "react";
+import { useEffect, useRef, useState, type CSSProperties } from "react";
 import { type PanInfo } from "framer-motion";
 import { cn } from "~/utils/cn";
 import {
@@ -10,6 +10,7 @@ import {
   type Rect,
   type ResizeEdge,
   type Size,
+  type Viewport,
 } from "./draggableResizableMath";
 
 export type { ResizeEdge } from "./draggableResizableMath";
@@ -42,7 +43,12 @@ export type UseDraggableResizableResult = {
   size: Size;
 };
 
-function getViewport() {
+function getViewport(): Viewport {
+  // SSR: no window. Report an unbounded viewport so the initial clamp is a no-op;
+  // the mount-time effect below re-clamps against the real viewport once hydrated.
+  if (typeof window === "undefined") {
+    return { width: Infinity, height: Infinity };
+  }
   return { width: window.innerWidth, height: window.innerHeight };
 }
 
@@ -64,49 +70,54 @@ export function useDraggableResizable({
   // cumulative from pan start, so every onPan step re-applies it to this.
   const startRectRef = useRef(rect);
 
-  // Re-clamp on viewport resize so the box never strands off-screen.
+  // Re-clamp on viewport resize (and once on mount, since SSR renders against
+  // an unbounded viewport) so the box never strands off-screen.
   useEffect(() => {
     const onResize = () => {
       setRect((current) => clampRectToViewport(current, getViewport(), viewportPadding));
     };
+    onResize();
     window.addEventListener("resize", onResize);
     return () => window.removeEventListener("resize", onResize);
   }, [viewportPadding]);
 
   const dragHandleProps: PanHandlerProps = {
-    onPanStart: useCallback(() => {
+    onPanStart: () => {
       startRectRef.current = rectRef.current;
-    }, []),
-    onPan: useCallback(
-      (_event, info: PanInfo) => {
-        const startRect = startRectRef.current;
-        const nextPosition = clampPosition(
-          { x: startRect.x + info.offset.x, y: startRect.y + info.offset.y },
-          { w: startRect.w, h: startRect.h },
-          getViewport(),
-          viewportPadding
-        );
-        setRect((current) => ({ ...current, ...nextPosition }));
-      },
-      [viewportPadding]
-    ),
-    onPanEnd: useCallback(() => {}, []),
+    },
+    onPan: (_event, info: PanInfo) => {
+      const startRect = startRectRef.current;
+      const nextPosition = clampPosition(
+        { x: startRect.x + info.offset.x, y: startRect.y + info.offset.y },
+        { w: startRect.w, h: startRect.h },
+        getViewport(),
+        viewportPadding
+      );
+      setRect((current) => ({ ...current, ...nextPosition }));
+    },
+    onPanEnd: () => {},
   };
 
-  const resizeHandleProps = useCallback(
-    (edge: ResizeEdge): PanHandlerProps => ({
-      onPanStart: () => {
-        startRectRef.current = rectRef.current;
-      },
-      onPan: (_event, info: PanInfo) => {
-        const startRect = startRectRef.current;
-        const resized = resizeRect(edge, startRect, info.offset.x, info.offset.y, minSize, maxSize);
-        setRect(clampRectToViewport(resized, getViewport(), viewportPadding));
-      },
-      onPanEnd: () => {},
-    }),
-    [minSize, maxSize, viewportPadding]
-  );
+  const resizeHandleProps = (edge: ResizeEdge): PanHandlerProps => ({
+    onPanStart: () => {
+      startRectRef.current = rectRef.current;
+    },
+    onPan: (_event, info: PanInfo) => {
+      const startRect = startRectRef.current;
+      const resized = resizeRect(
+        edge,
+        startRect,
+        info.offset.x,
+        info.offset.y,
+        minSize,
+        maxSize,
+        getViewport(),
+        viewportPadding
+      );
+      setRect(clampRectToViewport(resized, getViewport(), viewportPadding));
+    },
+    onPanEnd: () => {},
+  });
 
   return {
     style: {
@@ -146,7 +157,7 @@ const EDGE_POSITION: Record<ResizeEdge, string> = {
 };
 
 /** Thin hit area for one resize edge/corner, styled to match ResizableHandle. Spread `resizeHandleProps(edge)` onto it. */
-export function DraggableResizeHandleClassName(edge: ResizeEdge, className?: string) {
+export function draggableResizeHandleClassName(edge: ResizeEdge, className?: string) {
   return cn(
     "absolute z-10 touch-none select-none",
     EDGE_CURSOR[edge],
diff --git a/apps/webapp/app/components/primitives/draggableResizableMath.test.ts b/apps/webapp/app/components/primitives/draggableResizableMath.test.ts
index 030ae1209ca..455d2b31417 100644
--- a/apps/webapp/app/components/primitives/draggableResizableMath.test.ts
+++ b/apps/webapp/app/components/primitives/draggableResizableMath.test.ts
@@ -75,31 +75,54 @@ describe("clampRectToViewport", () => {
 describe("resizeRect", () => {
   const start = { x: 100, y: 100, w: 300, h: 200 };
   const minSize = { w: 100, h: 80 };
+  // Generous viewport so it never becomes the binding constraint for `start`-based cases.
+  const viewport = { width: 1000, height: 800 };
+  const padding = 10;
 
   it("east edge grows width, keeps x/y", () => {
-    expect(resizeRect("e", start, 50, 0, minSize)).toEqual({ x: 100, y: 100, w: 350, h: 200 });
+    expect(resizeRect("e", start, 50, 0, minSize, undefined, viewport, padding)).toEqual({
+      x: 100,
+      y: 100,
+      w: 350,
+      h: 200,
+    });
   });
 
   it("south edge grows height, keeps x/y", () => {
-    expect(resizeRect("s", start, 0, 40, minSize)).toEqual({ x: 100, y: 100, w: 300, h: 240 });
+    expect(resizeRect("s", start, 0, 40, minSize, undefined, viewport, padding)).toEqual({
+      x: 100,
+      y: 100,
+      w: 300,
+      h: 240,
+    });
   });
 
   it("west edge shrinks width and moves x to keep the right edge fixed", () => {
-    expect(resizeRect("w", start, 50, 0, minSize)).toEqual({ x: 150, y: 100, w: 250, h: 200 });
+    expect(resizeRect("w", start, 50, 0, minSize, undefined, viewport, padding)).toEqual({
+      x: 150,
+      y: 100,
+      w: 250,
+      h: 200,
+    });
   });
 
   it("north edge shrinks height and moves y to keep the bottom edge fixed", () => {
-    expect(resizeRect("n", start, 0, 30, minSize)).toEqual({ x: 100, y: 130, w: 300, h: 170 });
+    expect(resizeRect("n", start, 0, 30, minSize, undefined, viewport, padding)).toEqual({
+      x: 100,
+      y: 130,
+      w: 300,
+      h: 170,
+    });
   });
 
   it("corner edges combine both axes", () => {
-    expect(resizeRect("nw", start, 20, 20, minSize)).toEqual({
+    expect(resizeRect("nw", start, 20, 20, minSize, undefined, viewport, padding)).toEqual({
       x: 120,
       y: 120,
       w: 280,
       h: 180,
     });
-    expect(resizeRect("se", start, -20, -20, minSize)).toEqual({
+    expect(resizeRect("se", start, -20, -20, minSize, undefined, viewport, padding)).toEqual({
       x: 100,
       y: 100,
       w: 280,
@@ -108,18 +131,63 @@ describe("resizeRect", () => {
   });
 
   it("respects min size when shrinking past it", () => {
-    expect(resizeRect("e", start, -1000, 0, minSize)).toEqual({ x: 100, y: 100, w: 100, h: 200 });
+    expect(resizeRect("e", start, -1000, 0, minSize, undefined, viewport, padding)).toEqual({
+      x: 100,
+      y: 100,
+      w: 100,
+      h: 200,
+    });
     // west edge: width clamps to min, x stops moving with it
-    expect(resizeRect("w", start, 1000, 0, minSize)).toEqual({ x: 300, y: 100, w: 100, h: 200 });
+    expect(resizeRect("w", start, 1000, 0, minSize, undefined, viewport, padding)).toEqual({
+      x: 300,
+      y: 100,
+      w: 100,
+      h: 200,
+    });
   });
 
   it("respects max size when growing past it", () => {
     const maxSize = { w: 400, h: 300 };
-    expect(resizeRect("se", start, 1000, 1000, minSize, maxSize)).toEqual({
+    expect(resizeRect("se", start, 1000, 1000, minSize, maxSize, viewport, padding)).toEqual({
       x: 100,
       y: 100,
       w: 400,
       h: 300,
     });
   });
+
+  it("caps west-edge growth at maxSize.w and keeps the right edge fixed", () => {
+    const maxSize = { w: 250, h: 300 };
+    const result = resizeRect("w", start, -1000, 0, minSize, maxSize, viewport, padding);
+    expect(result).toEqual({ x: 150, y: 100, w: 250, h: 200 });
+    expect(result.x + result.w).toBe(start.x + start.w);
+  });
+
+  it("caps north-edge growth at maxSize.h and keeps the bottom edge fixed", () => {
+    const maxSize = { w: 400, h: 150 };
+    const result = resizeRect("n", start, 0, -1000, minSize, maxSize, viewport, padding);
+    expect(result).toEqual({ x: 100, y: 150, w: 300, h: 150 });
+    expect(result.y + result.h).toBe(start.y + start.h);
+  });
+
+  it("caps west-edge growth at the viewport padding and keeps the right edge fixed", () => {
+    const nearLeftEdge = { x: 20, y: 100, w: 300, h: 200 };
+    const result = resizeRect("w", nearLeftEdge, -10000, 0, minSize, undefined, viewport, padding);
+    expect(result.x).toBe(padding);
+    expect(result.x + result.w).toBe(nearLeftEdge.x + nearLeftEdge.w);
+  });
+
+  it("caps north-edge growth at the viewport padding and keeps the bottom edge fixed", () => {
+    const nearTopEdge = { x: 100, y: 15, w: 300, h: 200 };
+    const result = resizeRect("n", nearTopEdge, 0, -10000, minSize, undefined, viewport, padding);
+    expect(result.y).toBe(padding);
+    expect(result.y + result.h).toBe(nearTopEdge.y + nearTopEdge.h);
+  });
+
+  it("caps east-edge growth at the viewport padding", () => {
+    const nearRightEdge = { x: 850, y: 100, w: 300, h: 200 };
+    const result = resizeRect("e", nearRightEdge, 10000, 0, minSize, undefined, viewport, padding);
+    expect(result.x).toBe(nearRightEdge.x);
+    expect(result.x + result.w).toBe(viewport.width - padding);
+  });
 });
diff --git a/apps/webapp/app/components/primitives/draggableResizableMath.ts b/apps/webapp/app/components/primitives/draggableResizableMath.ts
index f46bf6b5872..fe19168930c 100644
--- a/apps/webapp/app/components/primitives/draggableResizableMath.ts
+++ b/apps/webapp/app/components/primitives/draggableResizableMath.ts
@@ -43,8 +43,10 @@ export function clampRectToViewport(rect: Rect, viewport: Viewport, padding: num
 }
 
 /**
- * Applies a pointer delta to `start` for the given resize edge, respecting min/max size.
- * North/west edges move the opposite corner too so the far edge stays put.
+ * Applies a pointer delta to `start` for the given resize edge, respecting min/max size
+ * and the viewport bounds. North/west edges move the opposite corner too so the far edge
+ * stays put — the per-edge cap is derived from the *fixed* far edge, so growth can never
+ * push it past the viewport padding.
  */
 export function resizeRect(
   edge: ResizeEdge,
@@ -52,22 +54,28 @@ export function resizeRect(
   dx: number,
   dy: number,
   minSize: Size,
-  maxSize?: Size
+  maxSize: Size | undefined,
+  viewport: Viewport,
+  padding: number
 ): Rect {
   let { x, y, w, h } = start;
 
   if (edge.includes("e")) {
-    w = clamp(start.w + dx, minSize.w, maxSize?.w ?? Infinity);
+    const maxW = Math.min(maxSize?.w ?? Infinity, viewport.width - padding - start.x);
+    w = clamp(start.w + dx, minSize.w, maxW);
   }
   if (edge.includes("s")) {
-    h = clamp(start.h + dy, minSize.h, maxSize?.h ?? Infinity);
+    const maxH = Math.min(maxSize?.h ?? Infinity, viewport.height - padding - start.y);
+    h = clamp(start.h + dy, minSize.h, maxH);
   }
   if (edge.includes("w")) {
-    w = clamp(start.w - dx, minSize.w, maxSize?.w ?? Infinity);
+    const maxW = Math.min(maxSize?.w ?? Infinity, start.x + start.w - padding);
+    w = clamp(start.w - dx, minSize.w, maxW);
     x = start.x + (start.w - w);
   }
   if (edge.includes("n")) {
-    h = clamp(start.h - dy, minSize.h, maxSize?.h ?? Infinity);
+    const maxH = Math.min(maxSize?.h ?? Infinity, start.y + start.h - padding);
+    h = clamp(start.h - dy, minSize.h, maxH);
     y = start.y + (start.h - h);
   }
 
diff --git a/apps/webapp/app/routes/storybook.draggable-resizable/route.tsx b/apps/webapp/app/routes/storybook.draggable-resizable/route.tsx
index 2fc7cad4da5..43db4997150 100644
--- a/apps/webapp/app/routes/storybook.draggable-resizable/route.tsx
+++ b/apps/webapp/app/routes/storybook.draggable-resizable/route.tsx
@@ -1,7 +1,7 @@
 import { motion } from "framer-motion";
 import { ComponentNames } from "../storybook/StoryKit";
 import {
-  DraggableResizeHandleClassName,
+  draggableResizeHandleClassName,
   useDraggableResizable,
   type ResizeEdge,
 } from "~/components/primitives/DraggableResizable";
@@ -37,7 +37,7 @@ export default function Story() {
           <motion.div
             key={edge}
             {...resizeHandleProps(edge)}
-            className={DraggableResizeHandleClassName(edge)}
+            className={draggableResizeHandleClassName(edge)}
           />
         ))}
       </div>

From 8d8b0395f0114644206024736b03ddf8f3217c4a Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Wed, 26 Aug 2026 14:20:36 +0000
Subject: [PATCH 03/43] feat(webapp): dashboard agent as a floating
 bottom-right window

Replace the slide-in right column with a draggable, resizable floating
chat window (variant-1 style), default and only mode now.
---
 .../dashboard-agent/DashboardAgent.tsx        | 61 ++++++--------
 .../dashboard-agent/DashboardAgentPanel.tsx   | 37 +++++----
 .../dashboard-agent/panel-layout.tsx          | 74 +++++++++++++++++
 .../route.tsx                                 | 79 +++++++++++++++++++
 4 files changed, 198 insertions(+), 53 deletions(-)
 create mode 100644 apps/webapp/app/routes/storybook.dashboard-agent-floating/route.tsx

diff --git a/apps/webapp/app/components/dashboard-agent/DashboardAgent.tsx b/apps/webapp/app/components/dashboard-agent/DashboardAgent.tsx
index 3d356d9b548..f6f2a3e3269 100644
--- a/apps/webapp/app/components/dashboard-agent/DashboardAgent.tsx
+++ b/apps/webapp/app/components/dashboard-agent/DashboardAgent.tsx
@@ -1,11 +1,6 @@
 import type { SuggestedPrompt, WatchSpec } from "@internal/dashboard-agent-contracts";
 import { useLocation } from "@remix-run/react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import {
-  ResizableHandle,
-  ResizablePanel,
-  ResizablePanelGroup,
-} from "~/components/primitives/Resizable";
 import { useEnvironment } from "~/hooks/useEnvironment";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
@@ -17,7 +12,7 @@ import { DashboardAgentProvider, TOGGLE_PANEL_SHORTCUT } from "./dashboardAgentL
 import { useDashboardAgentOpenRequests } from "./dashboardAgentOpenRequest";
 import {
   agentHiddenContentClassName,
-  agentTakeoverClassName,
+  FloatingAgentWindow,
   readAgentFullscreen,
   writeAgentFullscreen,
 } from "./panel-layout";
@@ -346,39 +341,29 @@ export function DashboardAgent({
   return (
     <DashboardAgentProvider value={context}>
       {open ? (
-        // `relative` is the takeover's containing block.
+        // `relative` is the fullscreen takeover's containing block; the non-fullscreen
+        // window is a page-wide floating overlay and doesn't need it.
         <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}
-            />
-            <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>
-          </ResizablePanelGroup>
+          <div className={agentHiddenContentClassName(fullscreen)}>{children}</div>
+          <FloatingAgentWindow fullscreen={fullscreen}>
+            {(dragHandleProps) => (
+              <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}
+                dragHandleProps={dragHandleProps}
+              />
+            )}
+          </FloatingAgentWindow>
         </div>
       ) : (
         <div className="h-full min-h-0 overflow-hidden">{children}</div>
diff --git a/apps/webapp/app/components/dashboard-agent/DashboardAgentPanel.tsx b/apps/webapp/app/components/dashboard-agent/DashboardAgentPanel.tsx
index 986c3f9bdf7..740800558ed 100644
--- a/apps/webapp/app/components/dashboard-agent/DashboardAgentPanel.tsx
+++ b/apps/webapp/app/components/dashboard-agent/DashboardAgentPanel.tsx
@@ -1,7 +1,9 @@
 import type { UIMessage } from "@ai-sdk/react";
 import { useLocation } from "@remix-run/react";
 import { generateFriendlyId } from "@trigger.dev/core/v3/isomorphic";
+import { motion } from "framer-motion";
 import { useCallback, useEffect, useMemo, useReducer, useRef, useState } from "react";
+import type { PanHandlerProps } from "~/components/primitives/DraggableResizable";
 import { AgentSpinner } from "~/components/primitives/Spinner";
 import { useToast } from "~/components/primitives/Toast";
 import { useAgentPageContext } from "~/hooks/useAgentPageContext";
@@ -84,10 +86,13 @@ export function DashboardAgentPanel({
   onTurnActivityChange,
   isFullscreen = false,
   onToggleFullscreen,
+  dragHandleProps,
 }: {
   onClose: () => void;
   isFullscreen?: boolean;
   onToggleFullscreen?: () => void;
+  /** Spread onto the header, which is the floating window's drag handle. */
+  dragHandleProps?: Partial<PanHandlerProps>;
   // Every `seq` below distinguishes repeat requests with identical contents.
   requestedMessage?: { text: string; seq: number };
   openChatRequest?: { chatId: string; seq: number };
@@ -589,7 +594,7 @@ export function DashboardAgentPanel({
   return (
     <div
       ref={panelRef}
-      className="flex h-full flex-col bg-background-bright animate-in slide-in-from-right-2 duration-150"
+      className="flex h-full flex-col bg-background-bright animate-in fade-in zoom-in-95 duration-150"
       // A React handler, not a global hotkey, so Esc stays scoped to the panel.
       onKeyDown={(event) => {
         if (
@@ -604,20 +609,22 @@ export function DashboardAgentPanel({
         onClose();
       }}
     >
-      <DashboardAgentHeader
-        title={headerTitle}
-        chats={chats}
-        currentChatId={active?.chatId ?? ""}
-        thinkingChatId={thinkingChatId}
-        onNewChat={newChat}
-        showNewChat={active !== null}
-        onOpenHistory={loadHistory}
-        onSelectChat={switchChat}
-        onDeleteChat={deleteChat}
-        onToggleFullscreen={onToggleFullscreen ?? (() => {})}
-        isFullscreen={isFullscreen}
-        onClose={onClose}
-      />
+      <motion.div {...dragHandleProps}>
+        <DashboardAgentHeader
+          title={headerTitle}
+          chats={chats}
+          currentChatId={active?.chatId ?? ""}
+          thinkingChatId={thinkingChatId}
+          onNewChat={newChat}
+          showNewChat={active !== null}
+          onOpenHistory={loadHistory}
+          onSelectChat={switchChat}
+          onDeleteChat={deleteChat}
+          onToggleFullscreen={onToggleFullscreen ?? (() => {})}
+          isFullscreen={isFullscreen}
+          onClose={onClose}
+        />
+      </motion.div>
 
       {/* Always mounted, so the chat keeps its transport, session and transcript. */}
       <AgentPanelColumn fullscreen={isFullscreen}>
diff --git a/apps/webapp/app/components/dashboard-agent/panel-layout.tsx b/apps/webapp/app/components/dashboard-agent/panel-layout.tsx
index 15f581ed310..a10b4f1d1c3 100644
--- a/apps/webapp/app/components/dashboard-agent/panel-layout.tsx
+++ b/apps/webapp/app/components/dashboard-agent/panel-layout.tsx
@@ -1,9 +1,46 @@
 // Both class helpers apply to always-rendered wrappers, so toggling fullscreen is a
 // class change only and the open chat's transport, session and transcript survive it.
+import { useMemo } from "react";
+import { motion } from "framer-motion";
+import {
+  useDraggableResizable,
+  type PanHandlerProps,
+  type ResizeEdge,
+} from "~/components/primitives/DraggableResizable";
 import { cn } from "~/utils/cn";
 
 const AGENT_FULLSCREEN_STORAGE_KEY = "tdev:dashboard-agent:fullscreen";
 
+// V1 floating window: 380x512, bottom-right, matching the gallery's own panel frame.
+const FLOATING_WIDTH = 380;
+const FLOATING_HEIGHT = 512;
+const FLOATING_MARGIN = 16;
+const FLOATING_MIN_SIZE = { w: 320, h: 360 };
+const RESIZE_EDGES: ResizeEdge[] = ["n", "e", "s", "w", "ne", "nw", "se", "sw"];
+
+const RESIZE_HANDLE_CLASS: Record<ResizeEdge, string> = {
+  n: "absolute inset-x-2 top-0 h-1.5 cursor-n-resize",
+  s: "absolute inset-x-2 bottom-0 h-1.5 cursor-s-resize",
+  e: "absolute inset-y-2 right-0 w-1.5 cursor-e-resize",
+  w: "absolute inset-y-2 left-0 w-1.5 cursor-w-resize",
+  ne: "absolute right-0 top-0 size-3 cursor-ne-resize",
+  nw: "absolute left-0 top-0 size-3 cursor-nw-resize",
+  se: "absolute right-0 bottom-0 size-3 cursor-se-resize",
+  sw: "absolute left-0 bottom-0 size-3 cursor-sw-resize",
+};
+
+function initialFloatingRect() {
+  if (typeof window === "undefined") {
+    return { x: 0, y: 0, w: FLOATING_WIDTH, h: FLOATING_HEIGHT };
+  }
+  return {
+    x: window.innerWidth - FLOATING_WIDTH - FLOATING_MARGIN,
+    y: window.innerHeight - FLOATING_HEIGHT - FLOATING_MARGIN,
+    w: FLOATING_WIDTH,
+    h: FLOATING_HEIGHT,
+  };
+}
+
 export function readAgentFullscreen(): boolean {
   if (typeof window === "undefined") return false;
   try {
@@ -32,6 +69,43 @@ export function agentHiddenContentClassName(fullscreen: boolean): string {
   return cn("h-full overflow-hidden", fullscreen && "invisible");
 }
 
+/**
+ * The floating chat window: `useDraggableResizable`-positioned bottom-right, draggable
+ * and resizable across the whole page. Fullscreen swaps it back to the same takeover the
+ * old right-column mode used, which needs `children` positioned inside a `relative`
+ * ancestor — the caller (`DashboardAgent`) supplies that.
+ */
+export function FloatingAgentWindow({
+  fullscreen,
+  children,
+}: {
+  fullscreen: boolean;
+  children: (dragHandleProps: Partial<PanHandlerProps>) => React.ReactNode;
+}) {
+  const initial = useMemo(() => initialFloatingRect(), []);
+  const { style, dragHandleProps, resizeHandleProps } = useDraggableResizable({
+    initial,
+    minSize: FLOATING_MIN_SIZE,
+    viewportPadding: FLOATING_MARGIN,
+  });
+
+  if (fullscreen) {
+    return <div className={agentTakeoverClassName(true)}>{children({})}</div>;
+  }
+
+  return (
+    <div
+      style={style}
+      className="z-20 flex flex-col overflow-hidden rounded-lg border border-border-bright bg-background-bright shadow-2xl"
+    >
+      {children(dragHandleProps)}
+      {RESIZE_EDGES.map((edge) => (
+        <motion.div key={edge} {...resizeHandleProps(edge)} className={RESIZE_HANDLE_CLASS[edge]} />
+      ))}
+    </div>
+  );
+}
+
 export function AgentPanelColumn({
   fullscreen,
   children,
diff --git a/apps/webapp/app/routes/storybook.dashboard-agent-floating/route.tsx b/apps/webapp/app/routes/storybook.dashboard-agent-floating/route.tsx
new file mode 100644
index 00000000000..258e3b880dd
--- /dev/null
+++ b/apps/webapp/app/routes/storybook.dashboard-agent-floating/route.tsx
@@ -0,0 +1,79 @@
+import { motion } from "framer-motion";
+import { useState } from "react";
+import { ComponentNames } from "../storybook/StoryKit";
+import { ChatText, ChatTranscript, ChatTurn } from "~/components/dashboard-agent/chat-layout";
+import { DashboardAgentHeader } from "~/components/dashboard-agent/DashboardAgentHeader";
+import type { DashboardAgentChat } from "~/components/dashboard-agent/DashboardAgentHistory";
+import { FloatingAgentWindow } from "~/components/dashboard-agent/panel-layout";
+import { Button } from "~/components/primitives/Buttons";
+import { Header1 } from "~/components/primitives/Headers";
+import { Paragraph } from "~/components/primitives/Paragraph";
+
+const NO_CHATS: DashboardAgentChat[] = [];
+
+/**
+ * The dashboard agent's default (and only) mode: a floating window docked at the
+ * bottom of the page, draggable across the whole page and resizable by its edges and
+ * corners. Static content only — this demos the shell (`FloatingAgentWindow`, the real
+ * `DashboardAgentHeader`, and `agentTakeoverClassName` fullscreen), not a live backend.
+ */
+export default function Story() {
+  const [open, setOpen] = useState(true);
+  const [fullscreen, setFullscreen] = useState(false);
+
+  return (
+    <div className="relative flex h-screen flex-col gap-4 p-6">
+      <div className="px-4 pt-4">
+        <ComponentNames
+          names={["DashboardAgent.tsx", "panel-layout.tsx", "DraggableResizable.tsx"]}
+        />
+      </div>
+      <div className="flex max-w-3xl flex-col gap-1">
+        <Header1>Dashboard agent — floating window</Header1>
+        <Paragraph variant="small">
+          Drag the header anywhere on the page, resize from any edge or corner. Expand takes over
+          the page the same way the old side panel did.
+        </Paragraph>
+      </div>
+      {!open && (
+        <div className="px-4">
+          <Button variant="primary/medium" onClick={() => setOpen(true)}>
+            Open chat
+          </Button>
+        </div>
+      )}
+      {open && (
+        <FloatingAgentWindow fullscreen={fullscreen}>
+          {(dragHandleProps) => (
+            <div className="flex h-full flex-col bg-background-bright">
+              <motion.div {...dragHandleProps}>
+                <DashboardAgentHeader
+                  title="New chat"
+                  chats={NO_CHATS}
+                  currentChatId=""
+                  thinkingChatId={null}
+                  onNewChat={() => {}}
+                  showNewChat={false}
+                  onOpenHistory={() => {}}
+                  onSelectChat={() => {}}
+                  onDeleteChat={() => {}}
+                  onToggleFullscreen={() => setFullscreen((f) => !f)}
+                  isFullscreen={fullscreen}
+                  onClose={() => setOpen(false)}
+                />
+              </motion.div>
+              <ChatTranscript>
+                <ChatTurn speaker="user">
+                  <ChatText speaker="user" text="Why did the queue back up around 2pm?" />
+                </ChatTurn>
+                <ChatTurn>
+                  <ChatText text="Concurrency on the `emails` queue hit its limit at 14:02 and stayed there for about 12 minutes. I can show you the runs that queued behind it." />
+                </ChatTurn>
+              </ChatTranscript>
+            </div>
+          )}
+        </FloatingAgentWindow>
+      )}
+    </div>
+  );
+}

From 4b93738cb8b3263f58d30c0fa2fbba89a2f2122d Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Wed, 26 Aug 2026 14:30:26 +0000
Subject: [PATCH 04/43] fix(webapp): floating chat window review follow-ups

Drop dead exports for knip, register the storybook route, grab cursor
on the drag handle, and a source guard against the right-column mode
coming back.
---
 .../dashboard-agent/DashboardAgentPanel.tsx   | 16 +++++++++++-
 .../floating-window-mode.test.ts              | 26 +++++++++++++++++++
 .../dashboard-agent/panel-layout.tsx          |  2 +-
 apps/webapp/app/routes/storybook/route.tsx    |  1 +
 4 files changed, 43 insertions(+), 2 deletions(-)
 create mode 100644 apps/webapp/app/components/dashboard-agent/floating-window-mode.test.ts

diff --git a/apps/webapp/app/components/dashboard-agent/DashboardAgentPanel.tsx b/apps/webapp/app/components/dashboard-agent/DashboardAgentPanel.tsx
index 740800558ed..462d1dd16f5 100644
--- a/apps/webapp/app/components/dashboard-agent/DashboardAgentPanel.tsx
+++ b/apps/webapp/app/components/dashboard-agent/DashboardAgentPanel.tsx
@@ -53,6 +53,7 @@ import {
 import { AgentPanelColumn } from "./panel-layout";
 import { markerAfterActiveChat, markerAfterActivity } from "./thinking-marker";
 import { concurrencyPath } from "~/utils/pathBuilder";
+import { cn } from "~/utils/cn";
 
 function serializePageContext(pageContext: AgentPageContext): string | undefined {
   try {
@@ -132,6 +133,8 @@ export function DashboardAgentPanel({
   const [loading, setLoading] = useState(
     () => readLastChat(storageKey)?.path === location.pathname
   );
+  // Cursor feedback only; the drag itself is handled by `dragHandleProps`.
+  const [draggingWindow, setDraggingWindow] = useState(false);
 
   const currentPage = agentPageLabel(pageContext, location.pathname);
 
@@ -609,7 +612,18 @@ export function DashboardAgentPanel({
         onClose();
       }}
     >
-      <motion.div {...dragHandleProps}>
+      <motion.div
+        {...dragHandleProps}
+        onPanStart={(event, info) => {
+          setDraggingWindow(true);
+          dragHandleProps?.onPanStart?.(event, info);
+        }}
+        onPanEnd={(event, info) => {
+          setDraggingWindow(false);
+          dragHandleProps?.onPanEnd?.(event, info);
+        }}
+        className={cn("select-none", draggingWindow ? "cursor-grabbing" : "cursor-grab")}
+      >
         <DashboardAgentHeader
           title={headerTitle}
           chats={chats}
diff --git a/apps/webapp/app/components/dashboard-agent/floating-window-mode.test.ts b/apps/webapp/app/components/dashboard-agent/floating-window-mode.test.ts
new file mode 100644
index 00000000000..c39879014f8
--- /dev/null
+++ b/apps/webapp/app/components/dashboard-agent/floating-window-mode.test.ts
@@ -0,0 +1,26 @@
+// Source-level guard: the floating window is the default and only mode. A regression to
+// the old slide-in-from-the-right column would reintroduce `ResizablePanelGroup` here —
+// this fails red the moment it comes back, instead of waiting for a visual regression.
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { describe, expect, it } from "vitest";
+
+const DIR = __dirname;
+
+function read(file: string): string {
+  return readFileSync(join(DIR, file), "utf8");
+}
+
+describe("DashboardAgent.tsx stays on the floating window, not the right-column mode", () => {
+  const source = read("DashboardAgent.tsx");
+
+  it("never reintroduces the right-column ResizablePanelGroup", () => {
+    expect(source).not.toContain("ResizablePanelGroup");
+    expect(source).not.toContain("ResizablePanel");
+    expect(source).not.toContain("ResizableHandle");
+  });
+
+  it("renders the open panel through FloatingAgentWindow", () => {
+    expect(source).toContain("FloatingAgentWindow");
+  });
+});
diff --git a/apps/webapp/app/components/dashboard-agent/panel-layout.tsx b/apps/webapp/app/components/dashboard-agent/panel-layout.tsx
index a10b4f1d1c3..a35d5d1fba6 100644
--- a/apps/webapp/app/components/dashboard-agent/panel-layout.tsx
+++ b/apps/webapp/app/components/dashboard-agent/panel-layout.tsx
@@ -59,7 +59,7 @@ export function writeAgentFullscreen(fullscreen: boolean): void {
   }
 }
 
-export function agentTakeoverClassName(fullscreen: boolean): string {
+function agentTakeoverClassName(fullscreen: boolean): string {
   return fullscreen ? "absolute inset-0 z-10 bg-background-bright" : "h-full";
 }
 
diff --git a/apps/webapp/app/routes/storybook/route.tsx b/apps/webapp/app/routes/storybook/route.tsx
index e76ba520236..f754a3ec14e 100644
--- a/apps/webapp/app/routes/storybook/route.tsx
+++ b/apps/webapp/app/routes/storybook/route.tsx
@@ -137,6 +137,7 @@ const sections: StorySection[] = [
       { name: "Investigation card", slug: "agent-investigation" },
       { name: "Watch card", slug: "agent-watch" },
       { name: "Icons & Buttons", slug: "ai-agent" },
+      { name: "Floating chat window", slug: "dashboard-agent-floating" },
     ],
   },
 ];

From 9e3662834a7da4f0697e60ec90c654c6640d90aa Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Wed, 26 Aug 2026 15:36:27 +0000
Subject: [PATCH 05/43] fix(webapp): keep the Ask Trigger button visible while
 chat is open

Clicking it while open re-affirms the single floating window instead
of doing nothing, matching what live testing expected.
---
 .../dashboard-agent/dashboardAgentLauncher.tsx           | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/apps/webapp/app/components/dashboard-agent/dashboardAgentLauncher.tsx b/apps/webapp/app/components/dashboard-agent/dashboardAgentLauncher.tsx
index 052824aa25c..f864ec70600 100644
--- a/apps/webapp/app/components/dashboard-agent/dashboardAgentLauncher.tsx
+++ b/apps/webapp/app/components/dashboard-agent/dashboardAgentLauncher.tsx
@@ -46,12 +46,11 @@ export function DashboardAgentLauncher() {
   }
 
   const { open, setOpen, unreadWakes, unreadWork } = agent;
-  if (open) {
-    return null;
-  }
-
   const hasUnread = unreadWakes > 0 || unreadWork > 0;
 
+  // Stays visible while the window is open: there is only ever one floating window (it's
+  // fixed-position and already on top of everything), so a click while open is a no-op — it
+  // never spawns a second window, it just re-affirms the one that's already there.
   return (
     <SimpleTooltip
       asChild
@@ -59,7 +58,7 @@ export function DashboardAgentLauncher() {
       disableHoverableContent
       content={
         <span className="flex items-center">
-          Open chat
+          {open ? "Chat open" : "Open chat"}
           <ShortcutKey shortcut={TOGGLE_PANEL_SHORTCUT} variant="medium" />
         </span>
       }

From b9e9e14814224cfed8df28bdc3c3e74e83985e16 Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Wed, 26 Aug 2026 15:47:48 +0000
Subject: [PATCH 06/43] fix(webapp): eliminate the drag/resize gesture-baseline
 race

framer-motion defers onPanStart/onPanEnd by a frame (its internal
scheduler) but calls onPan synchronously, so a gesture-start rect
snapshot captured in onPanStart could still be stale (or the
mount-time initial rect) when a gesture's first onPan landed. Switch
to framer's per-event `delta` folded onto the latest committed rect
via functional setState, so there's no baseline left to race.
---
 .../primitives/DraggableResizable.tsx         | 56 ++++++--------
 .../primitives/draggableResizableMath.test.ts | 75 +++++++++++++++++++
 .../primitives/draggableResizableMath.ts      | 42 +++++++++++
 3 files changed, 139 insertions(+), 34 deletions(-)

diff --git a/apps/webapp/app/components/primitives/DraggableResizable.tsx b/apps/webapp/app/components/primitives/DraggableResizable.tsx
index 33cb19c0f76..7531eb7dc61 100644
--- a/apps/webapp/app/components/primitives/DraggableResizable.tsx
+++ b/apps/webapp/app/components/primitives/DraggableResizable.tsx
@@ -1,11 +1,12 @@
-import { useEffect, useRef, useState, type CSSProperties } from "react";
+import { useEffect, useState, type CSSProperties } from "react";
 import { type PanInfo } from "framer-motion";
 import { cn } from "~/utils/cn";
 import {
+  applyDragDelta,
+  applyResizeDelta,
   clampPosition,
   clampRectToViewport,
   clampSize,
-  resizeRect,
   type Point,
   type Rect,
   type ResizeEdge,
@@ -62,13 +63,6 @@ export function useDraggableResizable({
     const size = clampSize({ w: initial.w, h: initial.h }, minSize, maxSize);
     return { ...clampPosition(initial, size, getViewport(), viewportPadding), ...size };
   });
-  const rectRef = useRef(rect);
-  // oxlint-disable-next-line react/refs -- mirrors state into a ref for use inside gesture callbacks, not for rendering.
-  rectRef.current = rect;
-
-  // Snapshot of the rect at gesture start; framer-motion's PanInfo.offset is
-  // cumulative from pan start, so every onPan step re-applies it to this.
-  const startRectRef = useRef(rect);
 
   // Re-clamp on viewport resize (and once on mount, since SSR renders against
   // an unbounded viewport) so the box never strands off-screen.
@@ -81,40 +75,34 @@ export function useDraggableResizable({
     return () => window.removeEventListener("resize", onResize);
   }, [viewportPadding]);
 
+  // Each onPan step folds `info.delta` (movement since the *last* event, not cumulative)
+  // onto the latest committed rect via the functional setState form. No gesture-start
+  // snapshot is kept: framer-motion defers onPanStart/onPanEnd by a frame but calls onPan
+  // synchronously, so a ref-based baseline captured in onPanStart can still be stale (or
+  // the mount-time initial rect) when the first onPan of a gesture lands. Delta + functional
+  // update has no baseline to go stale, so gestures compose correctly back-to-back.
   const dragHandleProps: PanHandlerProps = {
-    onPanStart: () => {
-      startRectRef.current = rectRef.current;
-    },
+    onPanStart: () => {},
     onPan: (_event, info: PanInfo) => {
-      const startRect = startRectRef.current;
-      const nextPosition = clampPosition(
-        { x: startRect.x + info.offset.x, y: startRect.y + info.offset.y },
-        { w: startRect.w, h: startRect.h },
-        getViewport(),
-        viewportPadding
-      );
-      setRect((current) => ({ ...current, ...nextPosition }));
+      setRect((current) => applyDragDelta(current, info.delta, getViewport(), viewportPadding));
     },
     onPanEnd: () => {},
   };
 
   const resizeHandleProps = (edge: ResizeEdge): PanHandlerProps => ({
-    onPanStart: () => {
-      startRectRef.current = rectRef.current;
-    },
+    onPanStart: () => {},
     onPan: (_event, info: PanInfo) => {
-      const startRect = startRectRef.current;
-      const resized = resizeRect(
-        edge,
-        startRect,
-        info.offset.x,
-        info.offset.y,
-        minSize,
-        maxSize,
-        getViewport(),
-        viewportPadding
+      setRect((current) =>
+        applyResizeDelta(
+          edge,
+          current,
+          info.delta,
+          minSize,
+          maxSize,
+          getViewport(),
+          viewportPadding
+        )
       );
-      setRect(clampRectToViewport(resized, getViewport(), viewportPadding));
     },
     onPanEnd: () => {},
   });
diff --git a/apps/webapp/app/components/primitives/draggableResizableMath.test.ts b/apps/webapp/app/components/primitives/draggableResizableMath.test.ts
index 455d2b31417..b44c6d6d4c2 100644
--- a/apps/webapp/app/components/primitives/draggableResizableMath.test.ts
+++ b/apps/webapp/app/components/primitives/draggableResizableMath.test.ts
@@ -1,10 +1,13 @@
 import { describe, expect, it } from "vitest";
 import {
+  applyDragDelta,
+  applyResizeDelta,
   clamp,
   clampPosition,
   clampRectToViewport,
   clampSize,
   resizeRect,
+  type Rect,
 } from "./draggableResizableMath";
 
 describe("clamp", () => {
@@ -191,3 +194,75 @@ describe("resizeRect", () => {
     expect(result.x + result.w).toBe(viewport.width - padding);
   });
 });
+
+// These reproduce the live-testing symptoms: framer-motion defers onPanStart/onPanEnd by a
+// frame (via its internal scheduler) but calls onPan synchronously, so a gesture-start
+// snapshot captured in onPanStart can be stale — or still the mount-time initial rect — when
+// a gesture's first onPan lands. applyDragDelta/applyResizeDelta take framer's per-event
+// `delta` (not the cumulative `offset`) and fold it onto whatever rect is passed in, so the
+// hook can drive them with `setRect(current => apply...(current, ...))` and never needs a
+// separate baseline that could go stale. Simulating "gesture A steps, then gesture B steps,
+// no reset in between" is exactly what a stale-baseline bug would fail on.
+describe("applyResizeDelta / applyDragDelta — gesture sequencing", () => {
+  const start: Rect = { x: 100, y: 100, w: 300, h: 200 };
+  const minSize = { w: 100, h: 80 };
+  const viewport = { width: 1000, height: 800 };
+  const padding = 10;
+
+  it("symptom 1: a second resize gesture on the same edge continues from the first gesture's end, with no reset between them", () => {
+    let rect = start;
+    // Gesture A: five 4px steps east (total +20).
+    for (let i = 0; i < 5; i++) {
+      rect = applyResizeDelta("e", rect, { x: 4, y: 0 }, minSize, undefined, viewport, padding);
+    }
+    expect(rect.w).toBe(320);
+
+    // Gesture B starts immediately — no onPanStart-equivalent call, matching framer's
+    // deferred-onPanStart timing where the first onPan of a new gesture can land first.
+    for (let i = 0; i < 3; i++) {
+      rect = applyResizeDelta("e", rect, { x: 10, y: 0 }, minSize, undefined, viewport, padding);
+    }
+    // Continues from gesture A's end (320), not from a stale baseline (e.g. back to 300).
+    expect(rect.w).toBe(350);
+  });
+
+  it("symptom 2: a drag gesture right after a resize gesture continues from the resized rect, not a stale one", () => {
+    let rect = applyResizeDelta(
+      "se",
+      start,
+      { x: 50, y: 30 },
+      minSize,
+      undefined,
+      viewport,
+      padding
+    );
+    expect(rect).toEqual({ x: 100, y: 100, w: 350, h: 230 });
+
+    // Drag starts immediately after, no reset — same race window as symptom 2.
+    rect = applyDragDelta(rect, { x: 20, y: 5 }, viewport, padding);
+    expect(rect).toEqual({ x: 120, y: 105, w: 350, h: 230 });
+  });
+
+  it("symptom 3/4: a resize right after a drag continues from the dragged position, never snapping back toward a stale/initial rect", () => {
+    // Move well away from wherever `start` or a mount-time initial rect might sit.
+    let rect = applyDragDelta(start, { x: 200, y: 150 }, viewport, padding);
+    expect(rect).toEqual({ x: 300, y: 250, w: 300, h: 200 });
+
+    // Resizing next must clamp against the *current* x/y (300, 250), not `start` (100, 100)
+    // or any other stale baseline — a stale baseline pinned near the right edge would show
+    // up here as the box jumping back toward x=690 (the viewport-clamped position for `start`
+    // near the right edge) instead of resizing in place.
+    rect = applyResizeDelta("e", rect, { x: 10, y: 0 }, minSize, undefined, viewport, padding);
+    expect(rect.x).toBe(300);
+    expect(rect.w).toBe(310);
+  });
+
+  it("dragging right never magnets to the viewport edge before the box actually reaches it", () => {
+    let rect: Rect = { x: 500, y: 100, w: 300, h: 200 };
+    // Small rightward steps, well short of the right edge (max x = 1000 - 10 - 300 = 690).
+    for (let i = 0; i < 5; i++) {
+      rect = applyDragDelta(rect, { x: 10, y: 0 }, viewport, padding);
+    }
+    expect(rect.x).toBe(550);
+  });
+});
diff --git a/apps/webapp/app/components/primitives/draggableResizableMath.ts b/apps/webapp/app/components/primitives/draggableResizableMath.ts
index fe19168930c..42e8ad22f2e 100644
--- a/apps/webapp/app/components/primitives/draggableResizableMath.ts
+++ b/apps/webapp/app/components/primitives/draggableResizableMath.ts
@@ -81,3 +81,45 @@ export function resizeRect(
 
   return { x, y, w, h };
 }
+
+/**
+ * Applies one incremental pan step (framer-motion's `PanInfo.delta` — the movement since
+ * the *previous* event, not cumulative from gesture start) to `current` and re-clamps.
+ *
+ * Deliberately incremental rather than start-snapshot + cumulative-offset: framer-motion
+ * defers `onPanStart`/`onPanEnd` by a frame (via its internal scheduler) while `onPan`
+ * fires synchronously, so a start-rect ref captured in `onPanStart` can still hold a
+ * stale (or the mount-time initial) value when the gesture's first `onPan` lands — every
+ * later step then computes off the wrong baseline. Folding each step onto `current`
+ * (always the latest committed rect, via React's functional `setState`) has no baseline
+ * to go stale, so the race can't happen. Safe to call across gesture boundaries with no
+ * reset in between — each call is self-contained.
+ */
+export function applyDragDelta(
+  current: Rect,
+  delta: Point,
+  viewport: Viewport,
+  padding: number
+): Rect {
+  const nextPosition = clampPosition(
+    { x: current.x + delta.x, y: current.y + delta.y },
+    { w: current.w, h: current.h },
+    viewport,
+    padding
+  );
+  return { ...current, ...nextPosition };
+}
+
+/** Resize counterpart of {@link applyDragDelta} — same incremental-step rationale. */
+export function applyResizeDelta(
+  edge: ResizeEdge,
+  current: Rect,
+  delta: Point,
+  minSize: Size,
+  maxSize: Size | undefined,
+  viewport: Viewport,
+  padding: number
+): Rect {
+  const resized = resizeRect(edge, current, delta.x, delta.y, minSize, maxSize, viewport, padding);
+  return clampRectToViewport(resized, viewport, padding);
+}

From a07500a373abe599c871989976a4d9d82b6e5110 Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Wed, 26 Aug 2026 15:55:55 +0000
Subject: [PATCH 07/43] test(webapp): jsdom regression test for the pan-gesture
 ordering fix
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Pure-function tests can't fail on the deferred-onPanStart race by
construction. This drives the hook's real handlers in framer's actual
order (onPan, onPan, then a late onPanStart, then onPan) — fails
against an offset+baseline shape, passes with the delta fold.
---
 .../primitives/DraggableResizable.dom.test.ts |  95 ++++++
 apps/webapp/package.json                      |   1 +
 pnpm-lock.yaml                                | 314 +++++++++++++++++-
 3 files changed, 398 insertions(+), 12 deletions(-)
 create mode 100644 apps/webapp/app/components/primitives/DraggableResizable.dom.test.ts

diff --git a/apps/webapp/app/components/primitives/DraggableResizable.dom.test.ts b/apps/webapp/app/components/primitives/DraggableResizable.dom.test.ts
new file mode 100644
index 00000000000..426af1477cc
--- /dev/null
+++ b/apps/webapp/app/components/primitives/DraggableResizable.dom.test.ts
@@ -0,0 +1,95 @@
+// @vitest-environment jsdom
+//
+// Drives the hook's own handlers in framer-motion's *real* callback order, not the
+// pure math functions: framer-motion defers onPanStart/onPanEnd by a frame (its internal
+// scheduler) while onPan fires synchronously, so a real gesture can deliver one or more
+// onPan events before the onPanStart for that same gesture lands. A startRectRef-based
+// implementation resets its baseline to the *already-moved* rect when the late onPanStart
+// finally fires, corrupting every subsequent onPan in the gesture. This file proves the
+// hook survives that ordering; draggableResizableMath.test.ts's pure-function tests can't,
+// since they call the (already-fixed) math directly and have no callback ordering to get
+// wrong.
+import { createElement } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { act } from "react-dom/test-utils";
+import { afterEach, describe, expect, it } from "vitest";
+import type { PanInfo } from "framer-motion";
+import {
+  useDraggableResizable,
+  type UseDraggableResizableOptions,
+  type UseDraggableResizableResult,
+} from "./DraggableResizable";
+
+let container: HTMLDivElement | undefined;
+let root: Root | undefined;
+
+afterEach(() => {
+  if (root) {
+    act(() => root!.unmount());
+  }
+  container?.remove();
+  container = undefined;
+  root = undefined;
+});
+
+function renderHook(options: UseDraggableResizableOptions) {
+  let latest!: UseDraggableResizableResult;
+  function Harness() {
+    // oxlint-disable-next-line react/globals -- test harness capturing the hook's return value.
+    latest = useDraggableResizable(options);
+    return null;
+  }
+  container = document.createElement("div");
+  document.body.appendChild(container);
+  root = createRoot(container);
+  act(() => {
+    root!.render(createElement(Harness));
+  });
+  return {
+    get current() {
+      return latest;
+    },
+  };
+}
+
+// `offset` is populated alongside `delta` (framer-motion always sends both) so a reverted
+// offset+baseline implementation runs its real math instead of crashing on `undefined` —
+// it must fail on the *value*, not on a missing field.
+function fakePanInfo(deltaX: number, offsetX: number): PanInfo {
+  return {
+    delta: { x: deltaX, y: 0 },
+    offset: { x: offsetX, y: 0 },
+    point: { x: 0, y: 0 },
+    velocity: { x: 0, y: 0 },
+  };
+}
+
+const fakeEvent = {} as PointerEvent;
+
+describe("useDraggableResizable — framer's real onPan/onPanStart ordering", () => {
+  const initial = { x: 100, y: 100, w: 300, h: 200 };
+  const minSize = { w: 100, h: 80 };
+
+  it("drag: two onPan events land before their onPanStart, and the gesture still ends up at initial.x + cumulative delta", () => {
+    const hook = renderHook({ initial, minSize });
+
+    act(() => hook.current.dragHandleProps.onPan(fakeEvent, fakePanInfo(10, 10)));
+    act(() => hook.current.dragHandleProps.onPan(fakeEvent, fakePanInfo(10, 20)));
+    // Late on purpose: framer-motion's onStart is scheduled via its frame queue, onMove isn't.
+    act(() => hook.current.dragHandleProps.onPanStart(fakeEvent, fakePanInfo(0, 20)));
+    act(() => hook.current.dragHandleProps.onPan(fakeEvent, fakePanInfo(10, 30)));
+
+    expect(hook.current.position.x).toBe(initial.x + 30);
+  });
+
+  it("resize: two onPan events land before their onPanStart, and the gesture still ends up at initial.w + cumulative delta", () => {
+    const hook = renderHook({ initial, minSize });
+
+    act(() => hook.current.resizeHandleProps("e").onPan(fakeEvent, fakePanInfo(10, 10)));
+    act(() => hook.current.resizeHandleProps("e").onPan(fakeEvent, fakePanInfo(10, 20)));
+    act(() => hook.current.resizeHandleProps("e").onPanStart(fakeEvent, fakePanInfo(0, 20)));
+    act(() => hook.current.resizeHandleProps("e").onPan(fakeEvent, fakePanInfo(10, 30)));
+
+    expect(hook.current.size.w).toBe(initial.w + 30);
+  });
+});
diff --git a/apps/webapp/package.json b/apps/webapp/package.json
index 788342f23bb..db786ed44a8 100644
--- a/apps/webapp/package.json
+++ b/apps/webapp/package.json
@@ -255,6 +255,7 @@
     "engine.io": "^6.6.7",
     "esbuild": "^0.15.10",
     "evalite": "1.0.0-beta.16",
+    "jsdom": "^30.0.1",
     "supertest": "^7.0.0",
     "tailwind-scrollbar": "^4.0.2",
     "tsx": "^4.20.6",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a7a0a3e5d54..ca0822bdfc2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -154,7 +154,7 @@ importers:
         version: 7.0.2
       vitest:
         specifier: 4.1.7
-        version: 4.1.7(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/coverage-v8@4.1.7)(vite@6.4.3(@types/node@24.13.3)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.1)(tsx@3.12.2)(yaml@2.9.0))
+        version: 4.1.7(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/coverage-v8@4.1.7)(jsdom@30.0.1)(vite@6.4.3(@types/node@24.13.3)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.1)(tsx@3.12.2)(yaml@2.9.0))
 
   apps/supervisor:
     dependencies:
@@ -874,6 +874,9 @@ importers:
       evalite:
         specifier: 1.0.0-beta.16
         version: 1.0.0-beta.16(ai@6.0.116(zod@3.25.76))(better-sqlite3@11.10.0)(bufferutil@4.0.9)
+      jsdom:
+        specifier: ^30.0.1
+        version: 30.0.1
       supertest:
         specifier: ^7.0.0
         version: 7.0.0
@@ -992,7 +995,7 @@ importers:
         version: link:../../packages/cli-v3
       vitest:
         specifier: 4.1.7
-        version: 4.1.7(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/coverage-v8@4.1.7)(vite@6.4.3(@types/node@24.13.3)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.1)(tsx@4.22.4)(yaml@2.9.0))
+        version: 4.1.7(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/coverage-v8@4.1.7)(jsdom@30.0.1)(vite@6.4.3(@types/node@24.13.3)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.1)(tsx@4.22.4)(yaml@2.9.0))
 
   internal-packages/dashboard-agent-contracts:
     dependencies:
@@ -1005,7 +1008,7 @@ importers:
         version: 7.0.2
       vitest:
         specifier: 4.1.7
-        version: 4.1.7(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/coverage-v8@4.1.7)(vite@6.4.3(@types/node@24.13.3)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.1)(tsx@4.22.4)(yaml@2.9.0))
+        version: 4.1.7(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/coverage-v8@4.1.7)(jsdom@30.0.1)(vite@6.4.3(@types/node@24.13.3)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.1)(tsx@4.22.4)(yaml@2.9.0))
 
   internal-packages/dashboard-agent-db:
     dependencies:
@@ -1040,7 +1043,7 @@ importers:
         version: 6.0.1
       vitest:
         specifier: 4.1.7
-        version: 4.1.7(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/coverage-v8@4.1.7)(vite@6.4.3(@types/node@24.13.3)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.1)(tsx@4.22.4)(yaml@2.9.0))
+        version: 4.1.7(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/coverage-v8@4.1.7)(jsdom@30.0.1)(vite@6.4.3(@types/node@24.13.3)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.1)(tsx@4.22.4)(yaml@2.9.0))
 
   internal-packages/emails:
     dependencies:
@@ -1096,7 +1099,7 @@ importers:
         version: link:../testcontainers
       vitest:
         specifier: 4.1.7
-        version: 4.1.7(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/coverage-v8@4.1.7)(vite@6.4.3(@types/node@24.13.3)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.1)(tsx@4.22.4)(yaml@2.9.0))
+        version: 4.1.7(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/coverage-v8@4.1.7)(jsdom@30.0.1)(vite@6.4.3(@types/node@24.13.3)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.1)(tsx@4.22.4)(yaml@2.9.0))
 
   internal-packages/metrics-pipeline:
     dependencies:
@@ -1137,7 +1140,7 @@ importers:
         version: 7.0.2
       vitest:
         specifier: 4.1.7
-        version: 4.1.7(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/coverage-v8@4.1.7)(vite@6.4.3(@types/node@24.13.3)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.1)(tsx@4.22.4)(yaml@2.9.0))
+        version: 4.1.7(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/coverage-v8@4.1.7)(jsdom@30.0.1)(vite@6.4.3(@types/node@24.13.3)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.1)(tsx@4.22.4)(yaml@2.9.0))
 
   internal-packages/otlp-importer:
     dependencies:
@@ -1286,7 +1289,7 @@ importers:
         version: 6.0.1
       vitest:
         specifier: 4.1.7
-        version: 4.1.7(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/coverage-v8@4.1.7)(vite@6.4.3(@types/node@24.13.3)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.1)(tsx@4.22.4)(yaml@2.9.0))
+        version: 4.1.7(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/coverage-v8@4.1.7)(jsdom@30.0.1)(vite@6.4.3(@types/node@24.13.3)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.1)(tsx@4.22.4)(yaml@2.9.0))
 
   internal-packages/run-store:
     dependencies:
@@ -1357,7 +1360,7 @@ importers:
         version: 7.0.2
       vitest:
         specifier: 4.1.7
-        version: 4.1.7(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/coverage-v8@4.1.7)(vite@6.4.3(@types/node@24.13.3)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.1)(tsx@4.22.4)(yaml@2.9.0))
+        version: 4.1.7(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/coverage-v8@4.1.7)(jsdom@30.0.1)(vite@6.4.3(@types/node@24.13.3)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.1)(tsx@4.22.4)(yaml@2.9.0))
 
   internal-packages/sso:
     dependencies:
@@ -2253,6 +2256,14 @@ packages:
   '@ark/util@0.46.0':
     resolution: {integrity: sha512-JPy/NGWn/lvf1WmGCPw2VGpBg5utZraE84I7wli18EDF3p3zc/e9WolT35tINeZO3l7C77SjqRJeAUoT0CvMRg==}
 
+  '@asamuzakjp/css-color@6.0.7':
+    resolution: {integrity: sha512-vC/bk1Lz7Tn/EfU9/apOTBk80/8dyGyWMowPoV1tJ52muDGsDqt2HPT2klrFUiY60MQmQv9q8yIht15JnBgDGw==}
+    engines: {node: ^22.13.0 || >=24.0.0}
+
+  '@asamuzakjp/dom-selector@8.3.2':
+    resolution: {integrity: sha512-93Z1N+BQNXysodoicpOIyNh2drHfz/CTf9nnT0FEx72GJcIiwgydD7tGAr78j41LsYn3hlRn+LdGPuBLn1Bl8Q==}
+    engines: {node: ^22.13.0 || >=24.0.0}
+
   '@aws-crypto/crc32@5.2.0':
     resolution: {integrity: sha512-nLbCWqQNgUiwwtFsen1AdzAtvuLRsQS8rYgMuxCrdKf9kOssamGLuPwyTY9wyYblNr9+1XM8v6zoDTPPSIeANg==}
     engines: {node: '>=16.0.0'}
@@ -2897,6 +2908,10 @@ packages:
   '@braintree/sanitize-url@7.1.2':
     resolution: {integrity: sha512-jigsZK+sMF/cuiB7sERuo9V7N9jx+dhmHHnQyDSVdpZwVutaBu7WvNYqMDLSgFgfB30n452TP3vjDAvFC973mA==}
 
+  '@bramus/specificity@2.4.2':
+    resolution: {integrity: sha512-ctxtJ/eA+t+6q2++vj5j7FYX3nRu311q1wfYH3xjlLOsczhlhxAg2FWNUXhpGvAw3BWo1xBcvOV6/YLc2r5FJw==}
+    hasBin: true
+
   '@bufbuild/protobuf@1.10.0':
     resolution: {integrity: sha512-QDdVFLoN93Zjg36NoQPZfsVH9tZew7wKDKyV5qRdj8ntT4wQCOradQjRaTdwMhWUYsgKsvCINKKm87FdEk96Ag==}
 
@@ -3048,6 +3063,42 @@ packages:
     peerDependencies:
       '@bufbuild/protobuf': ^1.4.2
 
+  '@csstools/color-helpers@6.1.1':
+    resolution: {integrity: sha512-gLNsunvwf3mCi5u5o46/Z/JcJMnhbHSaZ69rkgPzNM3J4s8hWwpPUQB6/tt0EDFyCiWzxANlx+2LJwpYj4zS1w==}
+    engines: {node: '>=20.19.0'}
+
+  '@csstools/css-calc@3.3.0':
+    resolution: {integrity: sha512-c5ihYsPkdG6JCkU2zTMm4+k6r7RXuGxtWYhu5DHMIiF1FHzrfmHL5so11AoFpUv/tu61xfcmT4AmKoFfMPoqdQ==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^4.0.0
+      '@csstools/css-tokenizer': ^4.0.0
+
+  '@csstools/css-color-parser@4.2.0':
+    resolution: {integrity: sha512-5+5LEmFuY1AjXdYhmgjTJogtQnP1evJ1zrBZGUNZ0thkpwnnmKxcHdAMn/OtFjAb25zA+jKDVYVRl+5G7rjv1A==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^4.0.0
+      '@csstools/css-tokenizer': ^4.0.0
+
+  '@csstools/css-parser-algorithms@4.0.0':
+    resolution: {integrity: sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      '@csstools/css-tokenizer': ^4.0.0
+
+  '@csstools/css-syntax-patches-for-csstree@1.1.8':
+    resolution: {integrity: sha512-CpMLjAvwQg3BL5S0IeqsZNMH7EQrEWi0kLKOC13ZBF0ZwERiLWlibNPJr8G1kdU3Ms/r2KiNrF81pUh2HwAHdg==}
+    peerDependencies:
+      css-tree: ^3.2.1
+    peerDependenciesMeta:
+      css-tree:
+        optional: true
+
+  '@csstools/css-tokenizer@4.0.0':
+    resolution: {integrity: sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==}
+    engines: {node: '>=20.19.0'}
+
   '@date-fns/tz@1.4.1':
     resolution: {integrity: sha512-P5LUNhtbj6YfI3iJjw5EL9eUAG6OitD0W3fWQcpQjDRc/QIsL0tRNuO1PcDvPccWL1fSTXXdE1ds+l95DV/OFA==}
 
@@ -4205,6 +4256,15 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@exodus/bytes@1.15.1':
+    resolution: {integrity: sha512-S6mL0yNB/Abt9Ei4tq8gDhcczc4S3+vQ4ra7vxnAf+YHC02srtqxKKZghx2Dq6p0e66THKwR6r8N6P95wEty7Q==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+    peerDependencies:
+      '@noble/hashes': ^1.8.0 || ^2.0.0
+    peerDependenciesMeta:
+      '@noble/hashes':
+        optional: true
+
   '@fastify/accept-negotiator@2.0.1':
     resolution: {integrity: sha512-/c/TW2bO/v9JeEgoD/g1G5GxGeCF1Hafdf79WPmUlgYiBXummY0oX3VVq4yFkKKVBKDNlaDUYoab7g38RpPqCQ==}
 
@@ -8651,6 +8711,9 @@ packages:
   better-sqlite3@11.10.0:
     resolution: {integrity: sha512-EwhOpyXiOEL/lKzHz9AW1msWFNzGc/z+LzeB3/jnFJpxu+th2yqvzsSWas1v9jgs9+xiXJcD5A8CJxAG2TaghQ==}
 
+  bidi-js@1.0.3:
+    resolution: {integrity: sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==}
+
   big.js@6.2.2:
     resolution: {integrity: sha512-y/ie+Faknx7sZA5MfGA2xKlu0GDv8RWrXGsmlteyJQ2lvoKv9GBK/fpRMc2qlSoBAgNxrixICFCBefIq8WCQpQ==}
 
@@ -9356,6 +9419,10 @@ packages:
     resolution: {integrity: sha512-WboRycPNsVw3B3TL559F7kuBUM4d8CgMEvk6xEJlOp7OBPjt6G7z8WMWlD2rOFZLk6OYfFIUGsCOWzcQH9K2og==}
     engines: {node: '>= 6'}
 
+  data-urls@7.0.0:
+    resolution: {integrity: sha512-23XHcCF+coGYevirZceTVD7NdJOqVn+49IHyxgszm+JIiHLoB2TkmPtsYkNWT1pvRSGkc35L6NHs0yHkN2SumA==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+
   data-view-buffer@1.0.1:
     resolution: {integrity: sha512-0lht7OugA5x3iJLOWFhWK/5ehONdprk0ISXqVFn/NFrDu+cuc8iADFrGQz5BnRK7LLU3JmkbXSxaqX+/mXYtUA==}
     engines: {node: '>= 0.4'}
@@ -9823,6 +9890,10 @@ packages:
     resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
     engines: {node: '>=0.12'}
 
+  entities@8.0.0:
+    resolution: {integrity: sha512-zwfzJecQ/Uej6tusMqwAqU/6KL2XaB2VZ2Jg54Je6ahNBGNH6Ek6g3jjNCF0fG9EWQKGZNddNjU5F1ZQn/sBnA==}
+    engines: {node: '>=20.19.0'}
+
   env-paths@3.0.0:
     resolution: {integrity: sha512-dtJUTepzMW3Lm/NPxRf3wP4642UWhjL2sQxc+ym2YMj1m/H2zDNQOlezafzkHwn6sMstjHTwG6iQQsctDW/b1A==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -10695,6 +10766,10 @@ packages:
     resolution: {integrity: sha512-r0EI+HBMcXadMrugk0GCQ+6BQV39PiWAZVfq7oIckeGiN7sjRGyQxPdft3nQekFTCQbYxLBH+/axZMeH8UX6+w==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
+  html-encoding-sniffer@6.0.0:
+    resolution: {integrity: sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+
   html-escaper@2.0.2:
     resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
 
@@ -10991,6 +11066,9 @@ packages:
     resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
     engines: {node: '>=12'}
 
+  is-potential-custom-element-name@1.0.1:
+    resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
+
   is-promise@4.0.0:
     resolution: {integrity: sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==}
 
@@ -11147,6 +11225,15 @@ packages:
     resolution: {integrity: sha512-CY6crGq313MX8GkwvB7tzgp99vjQxY1++5y10/BKN/GUfHqWaOGQMNZkBvqSzsZKWk/ijwHlWzzkLulsGHhjWQ==}
     hasBin: true
 
+  jsdom@30.0.1:
+    resolution: {integrity: sha512-52v7mUVUfNQVYYqE1lcdaymWL0njO7lTLUog6ZvW2U5KsbiLk/GnZlVJ+qx0xfNJZ6Gn+KSpPNE52vurbxZwrA==}
+    engines: {node: ^22.22.2 || ^24.15.0 || >=26.0.0}
+    peerDependencies:
+      canvas: ^3.2.3
+    peerDependenciesMeta:
+      canvas:
+        optional: true
+
   jsep@1.4.0:
     resolution: {integrity: sha512-B7qPcEVE3NVkmSJbaYxvv4cHkVW7DQsZz13pUMrfS8z8Q/BuShN+gcTXrUlPiGqM2/t/EEaI030bpxMqY8gMlw==}
     engines: {node: '>= 10.16.0'}
@@ -11503,6 +11590,10 @@ packages:
     resolution: {integrity: sha512-B5Y16Jr9LB9dHVkh6ZevG+vAbOsNOYCX+sXvFWFu7B3Iz5mijW3zdbMyhsh8ANd2mSWBYdJgnqi+mL7/LrOPYg==}
     engines: {node: 20 || >=22}
 
+  lru-cache@11.5.2:
+    resolution: {integrity: sha512-4pfM1Ff0x50o0tQwb5ucw/RzNyD0/YJME6IVcStalZuMWxdt3sR3huStTtxz4PUmvZfRguvDejasvQ2kifR11g==}
+    engines: {node: 20 || >=22}
+
   lru-cache@4.1.5:
     resolution: {integrity: sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==}
 
@@ -12484,6 +12575,9 @@ packages:
   parse5@7.3.0:
     resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==}
 
+  parse5@8.0.1:
+    resolution: {integrity: sha512-z1e/HMG90obSGeidlli3hj7cbocou0/wa5HacvI3ASx34PecNjNQeaHNo5WIZpWofN9kgkqV1q5YvXe3F0FoPw==}
+
   parseley@0.12.1:
     resolution: {integrity: sha512-e6qHKe3a9HWr0oMRVDTRhKce+bRO8VGQR3NyVwcjwrbhMmFCX9KszEV35+rn4AdilFAq9VPxP/Fe1wC9Qjd2lw==}
 
@@ -12937,6 +13031,10 @@ packages:
   pumpify@1.5.1:
     resolution: {integrity: sha512-oClZI37HvuUJJxSKKrC17bZ9Cu0ZYhEAGPsPUy9KlMUmv9dKX2o77RUmq7f3XjIxbwyGwYzbzQ1L2Ks8sIradQ==}
 
+  punycode@2.3.1:
+    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
+    engines: {node: '>=6'}
+
   pure-rand@6.1.0:
     resolution: {integrity: sha512-bVWawvoZoBYpp6yIoQtQXHZjmz35RSVHnUOTefl8Vcjr8snTPY1wnpSPMWekcFwbxI6gtmT7rSYPFvz71ldiOA==}
 
@@ -13557,6 +13655,10 @@ packages:
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
+  saxes@6.0.0:
+    resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
+    engines: {node: '>=v12.22.7'}
+
   scheduler@0.23.2:
     resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
 
@@ -14026,6 +14128,9 @@ packages:
     peerDependencies:
       react: 18.3.1
 
+  symbol-tree@3.2.4:
+    resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
+
   sync-content@2.0.4:
     resolution: {integrity: sha512-w3ioiBmbaogob33WdLnuwFk+8tpePI58CTWKqtdAgEqc2hfGuSwP02gPETqNX/3PLS5skv5a1wQR0gbaa2W0XQ==}
     engines: {node: 20 || >=22}
@@ -14211,9 +14316,17 @@ packages:
   toposort@2.0.2:
     resolution: {integrity: sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==}
 
+  tough-cookie@6.0.2:
+    resolution: {integrity: sha512-exgYmnmL/sJpR3upZfXG5PoatXQii55xAiXGXzY+sROLZ/Y+SLcp9PgJNI9Vz37HpQ74WvDcLT8eqm+kV3FzrA==}
+    engines: {node: '>=16'}
+
   tr46@0.0.3:
     resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
 
+  tr46@6.0.0:
+    resolution: {integrity: sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==}
+    engines: {node: '>=20'}
+
   tree-kill@1.2.2:
     resolution: {integrity: sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==}
     hasBin: true
@@ -14510,6 +14623,10 @@ packages:
     resolution: {integrity: sha512-IDxfleLmmbSskfWSUATiN1nfn2rDuvnMOqb5CWR92iIfojA0Ud+ulOAAEQ57LPr9rWmsreUyf5lwyao+7GNNVw==}
     engines: {node: '>=20.18.1'}
 
+  undici@8.10.0:
+    resolution: {integrity: sha512-HvltHd7avK13QIw/oLe4qoOLyoVSoafqJ2jYOrtMRBkbYT31eiBQ8O0ehRKZiEZCMEyLFQNIADpgCWC5fALvYQ==}
+    engines: {node: '>=22.19.0'}
+
   unicode-emoji-modifier-base@1.0.0:
     resolution: {integrity: sha512-yLSH4py7oFH3oG/9K+XWrz1pSi3dfUrWEnInbxMfArOfc1+33BlGPQtLsOYwvdMy11AwUBetYuaRxSPqgkq+8g==}
     engines: {node: '>=4'}
@@ -14856,6 +14973,10 @@ packages:
   w3c-keyname@2.2.8:
     resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
 
+  w3c-xmlserializer@5.0.0:
+    resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
+    engines: {node: '>=18'}
+
   walk-up-path@4.0.0:
     resolution: {integrity: sha512-3hu+tD8YzSLGuFYtPRb48vdhKMi0KQV5sn+uWr8+7dMEq/2G/dtLrdDinkLjqq5TIbIBjYJ4Ax/n3YiaW7QM8A==}
     engines: {node: 20 || >=22}
@@ -14883,6 +15004,22 @@ packages:
   webidl-conversions@3.0.1:
     resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
 
+  webidl-conversions@8.0.1:
+    resolution: {integrity: sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==}
+    engines: {node: '>=20'}
+
+  whatwg-mimetype@5.0.0:
+    resolution: {integrity: sha512-sXcNcHOC51uPGF0P/D4NVtrkjSU2fNsm9iog4ZvZJsL3rjoDAzXZhkm2MWt1y+PUdggKAYVoMAIYcs78wJ51Cw==}
+    engines: {node: '>=20'}
+
+  whatwg-url@16.0.1:
+    resolution: {integrity: sha512-1to4zXBxmXHV3IiSSEInrreIlu02vUOvrhxJJH5vcxYTBDAx51cqZiKdyTxlecdKNSjj8EcxGBxNf6Vg+945gw==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+
+  whatwg-url@17.1.0:
+    resolution: {integrity: sha512-3GeworPmc2ZfEEHP7lEbUfBX/L75wdEsi0rLNhXcXxnoN5jyq0SL5gCy06SGW2cyTIZdTvWIDQNQoza++vKeaw==}
+    engines: {node: ^22.14.0 || >=24.0.0}
+
   whatwg-url@5.0.0:
     resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
 
@@ -14969,10 +15106,17 @@ packages:
     resolution: {integrity: sha512-xrcqhWDvtZ7WLmt8G4f3hHy37iK7D2idtosRgkeiSPZEPmBShp0VfmRBLWAPC6zLF48APJ21yfea+RfQMF4/Aw==}
     engines: {node: '>= 4.0'}
 
+  xml-name-validator@5.0.0:
+    resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==}
+    engines: {node: '>=18'}
+
   xml-naming@0.1.0:
     resolution: {integrity: sha512-k8KO9hrMyNk6tUWqUfkTEZbezRRpONVOzUTnc97VnCvyj6Tf9lyUR9EDAIeiVLv56jsMcoXEwjW8Kv5yPY52lw==}
     engines: {node: '>=16.0.0'}
 
+  xmlchars@2.2.0:
+    resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
+
   xmlhttprequest-ssl@2.0.0:
     resolution: {integrity: sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==}
     engines: {node: '>=0.4.0'}
@@ -15263,6 +15407,21 @@ snapshots:
 
   '@ark/util@0.46.0': {}
 
+  '@asamuzakjp/css-color@6.0.7':
+    dependencies:
+      '@csstools/css-calc': 3.3.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-color-parser': 4.2.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-tokenizer': 4.0.0
+      lru-cache: 11.5.2
+
+  '@asamuzakjp/dom-selector@8.3.2':
+    dependencies:
+      bidi-js: 1.0.3
+      css-tree: 3.2.1
+      is-potential-custom-element-name: 1.0.1
+      lru-cache: 11.5.2
+
   '@aws-crypto/crc32@5.2.0':
     dependencies:
       '@aws-crypto/util': 5.2.0
@@ -17009,6 +17168,10 @@ snapshots:
 
   '@braintree/sanitize-url@7.1.2': {}
 
+  '@bramus/specificity@2.4.2':
+    dependencies:
+      css-tree: 3.2.1
+
   '@bufbuild/protobuf@1.10.0': {}
 
   '@bugsnag/cuid@3.1.1': {}
@@ -17286,6 +17449,30 @@ snapshots:
     dependencies:
       '@bufbuild/protobuf': 1.10.0
 
+  '@csstools/color-helpers@6.1.1': {}
+
+  '@csstools/css-calc@3.3.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
+    dependencies:
+      '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-tokenizer': 4.0.0
+
+  '@csstools/css-color-parser@4.2.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
+    dependencies:
+      '@csstools/color-helpers': 6.1.1
+      '@csstools/css-calc': 3.3.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-tokenizer': 4.0.0
+
+  '@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0)':
+    dependencies:
+      '@csstools/css-tokenizer': 4.0.0
+
+  '@csstools/css-syntax-patches-for-csstree@1.1.8(css-tree@3.2.1)':
+    optionalDependencies:
+      css-tree: 3.2.1
+
+  '@csstools/css-tokenizer@4.0.0': {}
+
   '@date-fns/tz@1.4.1': {}
 
   '@depot/cli-darwin-arm64@0.0.1-cli.2.80.0':
@@ -17942,6 +18129,8 @@ snapshots:
   '@esbuild/win32-x64@0.28.0':
     optional: true
 
+  '@exodus/bytes@1.15.1': {}
+
   '@fastify/accept-negotiator@2.0.1': {}
 
   '@fastify/ajv-compiler@4.0.5':
@@ -22376,7 +22565,7 @@ snapshots:
       obug: 2.1.1
       std-env: 4.1.0
       tinyrainbow: 3.1.0
-      vitest: 4.1.7(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/coverage-v8@4.1.7)(vite@6.4.3(@types/node@24.13.3)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.1)(tsx@3.12.2)(yaml@2.9.0))
+      vitest: 4.1.7(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/coverage-v8@4.1.7)(jsdom@30.0.1)(vite@6.4.3(@types/node@24.13.3)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.1)(tsx@3.12.2)(yaml@2.9.0))
 
   '@vitest/expect@4.1.7':
     dependencies:
@@ -22871,6 +23060,10 @@ snapshots:
       prebuild-install: 7.1.3
     optional: true
 
+  bidi-js@1.0.3:
+    dependencies:
+      require-from-string: 2.0.2
+
   big.js@6.2.2: {}
 
   binary-extensions@2.2.0: {}
@@ -23659,6 +23852,13 @@ snapshots:
 
   data-uri-to-buffer@3.0.1: {}
 
+  data-urls@7.0.0:
+    dependencies:
+      whatwg-mimetype: 5.0.0
+      whatwg-url: 16.0.1
+    transitivePeerDependencies:
+      - '@noble/hashes'
+
   data-view-buffer@1.0.1:
     dependencies:
       call-bind: 1.0.8
@@ -24054,6 +24254,8 @@ snapshots:
 
   entities@6.0.1: {}
 
+  entities@8.0.0: {}
+
   env-paths@3.0.0: {}
 
   environment@1.1.0: {}
@@ -25312,6 +25514,12 @@ snapshots:
     dependencies:
       lru-cache: 7.18.3
 
+  html-encoding-sniffer@6.0.0:
+    dependencies:
+      '@exodus/bytes': 1.15.1
+    transitivePeerDependencies:
+      - '@noble/hashes'
+
   html-escaper@2.0.2: {}
 
   html-to-text@9.0.5:
@@ -25579,6 +25787,8 @@ snapshots:
 
   is-plain-obj@4.1.0: {}
 
+  is-potential-custom-element-name@1.0.1: {}
+
   is-promise@4.0.0: {}
 
   is-reference@3.0.3:
@@ -25708,6 +25918,32 @@ snapshots:
     dependencies:
       argparse: 2.0.1
 
+  jsdom@30.0.1:
+    dependencies:
+      '@asamuzakjp/css-color': 6.0.7
+      '@asamuzakjp/dom-selector': 8.3.2
+      '@bramus/specificity': 2.4.2
+      '@csstools/css-syntax-patches-for-csstree': 1.1.8(css-tree@3.2.1)
+      '@exodus/bytes': 1.15.1
+      css-tree: 3.2.1
+      data-urls: 7.0.0
+      decimal.js: 10.6.0
+      html-encoding-sniffer: 6.0.0
+      is-potential-custom-element-name: 1.0.1
+      lru-cache: 11.5.2
+      parse5: 8.0.1
+      saxes: 6.0.0
+      symbol-tree: 3.2.4
+      tough-cookie: 6.0.2
+      undici: 8.10.0
+      w3c-xmlserializer: 5.0.0
+      webidl-conversions: 8.0.1
+      whatwg-mimetype: 5.0.0
+      whatwg-url: 17.1.0
+      xml-name-validator: 5.0.0
+    transitivePeerDependencies:
+      - '@noble/hashes'
+
   jsep@1.4.0: {}
 
   jsesc@3.0.2: {}
@@ -26020,6 +26256,8 @@ snapshots:
 
   lru-cache@11.2.4: {}
 
+  lru-cache@11.5.2: {}
+
   lru-cache@4.1.5:
     dependencies:
       pseudomap: 1.0.2
@@ -27047,7 +27285,7 @@ snapshots:
 
   node-abi@3.89.0:
     dependencies:
-      semver: 7.8.5
+      semver: 7.8.1
     optional: true
 
   node-abort-controller@3.1.1: {}
@@ -27503,6 +27741,10 @@ snapshots:
     dependencies:
       entities: 6.0.1
 
+  parse5@8.0.1:
+    dependencies:
+      entities: 8.0.0
+
   parseley@0.12.1:
     dependencies:
       leac: 0.6.0
@@ -27938,6 +28180,8 @@ snapshots:
       inherits: 2.0.4
       pump: 2.0.1
 
+  punycode@2.3.1: {}
+
   pure-rand@6.1.0: {}
 
   qrcode.react@4.2.0(react@18.3.1):
@@ -28722,6 +28966,10 @@ snapshots:
 
   safer-buffer@2.1.2: {}
 
+  saxes@6.0.0:
+    dependencies:
+      xmlchars: 2.2.0
+
   scheduler@0.23.2:
     dependencies:
       loose-envify: 1.4.0
@@ -29309,6 +29557,8 @@ snapshots:
       react: 18.3.1
       use-sync-external-store: 1.2.2(react@18.3.1)
 
+  symbol-tree@3.2.4: {}
+
   sync-content@2.0.4:
     dependencies:
       glob: 13.0.6
@@ -29521,8 +29771,16 @@ snapshots:
 
   toposort@2.0.2: {}
 
+  tough-cookie@6.0.2:
+    dependencies:
+      tldts: 7.4.10
+
   tr46@0.0.3: {}
 
+  tr46@6.0.0:
+    dependencies:
+      punycode: 2.3.1
+
   tree-kill@1.2.2: {}
 
   trim-lines@3.0.1: {}
@@ -29853,6 +30111,8 @@ snapshots:
 
   undici@7.29.0: {}
 
+  undici@8.10.0: {}
+
   unicode-emoji-modifier-base@1.0.0: {}
 
   unicorn-magic@0.1.0: {}
@@ -30203,7 +30463,7 @@ snapshots:
       tsx: 4.22.4
       yaml: 2.9.0
 
-  vitest@4.1.7(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/coverage-v8@4.1.7)(vite@6.4.3(@types/node@24.13.3)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.1)(tsx@3.12.2)(yaml@2.9.0)):
+  vitest@4.1.7(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/coverage-v8@4.1.7)(jsdom@30.0.1)(vite@6.4.3(@types/node@24.13.3)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.1)(tsx@3.12.2)(yaml@2.9.0)):
     dependencies:
       '@vitest/expect': 4.1.7
       '@vitest/mocker': 4.1.7(vite@6.4.3(@types/node@24.13.3)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.1)(tsx@3.12.2)(yaml@2.9.0))
@@ -30229,10 +30489,11 @@ snapshots:
       '@opentelemetry/api': 1.9.1
       '@types/node': 24.13.3
       '@vitest/coverage-v8': 4.1.7(vitest@4.1.7)
+      jsdom: 30.0.1
     transitivePeerDependencies:
       - msw
 
-  vitest@4.1.7(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/coverage-v8@4.1.7)(vite@6.4.3(@types/node@24.13.3)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.1)(tsx@4.22.4)(yaml@2.9.0)):
+  vitest@4.1.7(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/coverage-v8@4.1.7)(jsdom@30.0.1)(vite@6.4.3(@types/node@24.13.3)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.1)(tsx@4.22.4)(yaml@2.9.0)):
     dependencies:
       '@vitest/expect': 4.1.7
       '@vitest/mocker': 4.1.7(vite@6.4.3(@types/node@24.13.3)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.1)(tsx@4.22.4)(yaml@2.9.0))
@@ -30258,11 +30519,16 @@ snapshots:
       '@opentelemetry/api': 1.9.1
       '@types/node': 24.13.3
       '@vitest/coverage-v8': 4.1.7(vitest@4.1.7)
+      jsdom: 30.0.1
     transitivePeerDependencies:
       - msw
 
   w3c-keyname@2.2.8: {}
 
+  w3c-xmlserializer@5.0.0:
+    dependencies:
+      xml-name-validator: 5.0.0
+
   walk-up-path@4.0.0: {}
 
   warning@4.0.3:
@@ -30287,6 +30553,26 @@ snapshots:
 
   webidl-conversions@3.0.1: {}
 
+  webidl-conversions@8.0.1: {}
+
+  whatwg-mimetype@5.0.0: {}
+
+  whatwg-url@16.0.1:
+    dependencies:
+      '@exodus/bytes': 1.15.1
+      tr46: 6.0.0
+      webidl-conversions: 8.0.1
+    transitivePeerDependencies:
+      - '@noble/hashes'
+
+  whatwg-url@17.1.0:
+    dependencies:
+      '@exodus/bytes': 1.15.1
+      tr46: 6.0.0
+      webidl-conversions: 8.0.1
+    transitivePeerDependencies:
+      - '@noble/hashes'
+
   whatwg-url@5.0.0:
     dependencies:
       tr46: 0.0.3
@@ -30374,8 +30660,12 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.3
 
+  xml-name-validator@5.0.0: {}
+
   xml-naming@0.1.0: {}
 
+  xmlchars@2.2.0: {}
+
   xmlhttprequest-ssl@2.0.0: {}
 
   xtend@4.0.2: {}

From c2044a12735986846d256efa119514601aa026b9 Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Wed, 26 Aug 2026 16:02:32 +0000
Subject: [PATCH 08/43] fix(webapp): Ask Trigger button closes the chat when
 clicked while open

Toggles instead of re-affirming a no-op; tooltip says "Close chat" when open.
---
 .../dashboard-agent/dashboardAgentLauncher.tsx           | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/apps/webapp/app/components/dashboard-agent/dashboardAgentLauncher.tsx b/apps/webapp/app/components/dashboard-agent/dashboardAgentLauncher.tsx
index f864ec70600..d3fb7bf1f01 100644
--- a/apps/webapp/app/components/dashboard-agent/dashboardAgentLauncher.tsx
+++ b/apps/webapp/app/components/dashboard-agent/dashboardAgentLauncher.tsx
@@ -48,9 +48,8 @@ export function DashboardAgentLauncher() {
   const { open, setOpen, unreadWakes, unreadWork } = agent;
   const hasUnread = unreadWakes > 0 || unreadWork > 0;
 
-  // Stays visible while the window is open: there is only ever one floating window (it's
-  // fixed-position and already on top of everything), so a click while open is a no-op — it
-  // never spawns a second window, it just re-affirms the one that's already there.
+  // Stays visible while the window is open, and toggles it: there is only ever one floating
+  // window, so open->click closes it rather than re-affirming a no-op.
   return (
     <SimpleTooltip
       asChild
@@ -58,7 +57,7 @@ export function DashboardAgentLauncher() {
       disableHoverableContent
       content={
         <span className="flex items-center">
-          {open ? "Chat open" : "Open chat"}
+          {open ? "Close chat" : "Open chat"}
           <ShortcutKey shortcut={TOGGLE_PANEL_SHORTCUT} variant="medium" />
         </span>
       }
@@ -67,7 +66,7 @@ export function DashboardAgentLauncher() {
           <Button
             variant="ask-trigger/small"
             aria-label={hasUnread ? `${ASK_AGENT_LABEL}, unread updates` : ASK_AGENT_LABEL}
-            onClick={() => setOpen(true)}
+            onClick={() => setOpen(!open)}
           >
             {ASK_AGENT_LABEL}
           </Button>

From 6e80fbe2e3c1e7b56ae593cf744075e7e8af9112 Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Wed, 26 Aug 2026 16:07:53 +0000
Subject: [PATCH 09/43] fix(webapp): agent-ui story demos the floating window
 shell

Chat UI gallery gets a live floating-window section (drag, resize,
real header) and drops the "side panel" wording. Reuse
draggableResizeHandleClassName from the primitive instead of a local
duplicate. Move the floating-chat-window story next to Chat UI and
drop the now-standalone draggable-resizable story.
---
 .../dashboard-agent/panel-layout.tsx          | 18 ++---
 .../app/routes/storybook.agent-ui/manifest.ts | 16 ++++-
 .../app/routes/storybook.agent-ui/route.tsx   | 70 ++++++++++++++++++-
 .../storybook.draggable-resizable/route.tsx   | 46 ------------
 apps/webapp/app/routes/storybook/route.tsx    |  3 +-
 5 files changed, 89 insertions(+), 64 deletions(-)
 delete mode 100644 apps/webapp/app/routes/storybook.draggable-resizable/route.tsx

diff --git a/apps/webapp/app/components/dashboard-agent/panel-layout.tsx b/apps/webapp/app/components/dashboard-agent/panel-layout.tsx
index a35d5d1fba6..11eca0e46cb 100644
--- a/apps/webapp/app/components/dashboard-agent/panel-layout.tsx
+++ b/apps/webapp/app/components/dashboard-agent/panel-layout.tsx
@@ -3,6 +3,7 @@
 import { useMemo } from "react";
 import { motion } from "framer-motion";
 import {
+  draggableResizeHandleClassName,
   useDraggableResizable,
   type PanHandlerProps,
   type ResizeEdge,
@@ -18,17 +19,6 @@ const FLOATING_MARGIN = 16;
 const FLOATING_MIN_SIZE = { w: 320, h: 360 };
 const RESIZE_EDGES: ResizeEdge[] = ["n", "e", "s", "w", "ne", "nw", "se", "sw"];
 
-const RESIZE_HANDLE_CLASS: Record<ResizeEdge, string> = {
-  n: "absolute inset-x-2 top-0 h-1.5 cursor-n-resize",
-  s: "absolute inset-x-2 bottom-0 h-1.5 cursor-s-resize",
-  e: "absolute inset-y-2 right-0 w-1.5 cursor-e-resize",
-  w: "absolute inset-y-2 left-0 w-1.5 cursor-w-resize",
-  ne: "absolute right-0 top-0 size-3 cursor-ne-resize",
-  nw: "absolute left-0 top-0 size-3 cursor-nw-resize",
-  se: "absolute right-0 bottom-0 size-3 cursor-se-resize",
-  sw: "absolute left-0 bottom-0 size-3 cursor-sw-resize",
-};
-
 function initialFloatingRect() {
   if (typeof window === "undefined") {
     return { x: 0, y: 0, w: FLOATING_WIDTH, h: FLOATING_HEIGHT };
@@ -100,7 +90,11 @@ export function FloatingAgentWindow({
     >
       {children(dragHandleProps)}
       {RESIZE_EDGES.map((edge) => (
-        <motion.div key={edge} {...resizeHandleProps(edge)} className={RESIZE_HANDLE_CLASS[edge]} />
+        <motion.div
+          key={edge}
+          {...resizeHandleProps(edge)}
+          className={draggableResizeHandleClassName(edge)}
+        />
       ))}
     </div>
   );
diff --git a/apps/webapp/app/routes/storybook.agent-ui/manifest.ts b/apps/webapp/app/routes/storybook.agent-ui/manifest.ts
index 4870b53a6d5..9ca21a46ec9 100644
--- a/apps/webapp/app/routes/storybook.agent-ui/manifest.ts
+++ b/apps/webapp/app/routes/storybook.agent-ui/manifest.ts
@@ -55,6 +55,7 @@ export type GalleryGroup =
   | "watches"
   | "watch-card"
   | "wakes"
+  | "shell"
   | "hero"
   | "prompts"
   | "intents"
@@ -69,6 +70,7 @@ export type GallerySection = {
 };
 
 export const GALLERY_GROUPS: { group: GalleryGroup; page: GalleryPageId; label: string }[] = [
+  { group: "shell", page: "chat", label: "Floating window" },
   { group: "hero", page: "chat", label: "Blank-state hero" },
   { group: "prompts", page: "chat", label: "Suggested prompts" },
   { group: "messages", page: "chat", label: "Message-level states" },
@@ -86,10 +88,20 @@ export const GALLERY_GROUPS: { group: GalleryGroup; page: GalleryPageId; label:
 ];
 
 export const MANIFEST: GallerySection[] = [
-  { sectionId: "hero-panel", title: "Side panel (380px) — no page context", group: "hero" },
+  {
+    sectionId: "shell-floating-window",
+    title: "Draggable, resizable — the default and only chat mode",
+    group: "shell",
+  },
+
+  {
+    sectionId: "hero-panel",
+    title: "Floating window content (380px) — no page context",
+    group: "hero",
+  },
   {
     sectionId: "hero-panel-contextual",
-    title: "Side panel — failed run on the page",
+    title: "Floating window — failed run on the page",
     group: "hero",
   },
   { sectionId: "hero-fullscreen", title: "Fullscreen takeover — centred column", group: "hero" },
diff --git a/apps/webapp/app/routes/storybook.agent-ui/route.tsx b/apps/webapp/app/routes/storybook.agent-ui/route.tsx
index b1b2b732464..e59ba962a64 100644
--- a/apps/webapp/app/routes/storybook.agent-ui/route.tsx
+++ b/apps/webapp/app/routes/storybook.agent-ui/route.tsx
@@ -1,21 +1,84 @@
 import type { UIMessage } from "@ai-sdk/react";
 import type { AgentPageContext, SuggestedPrompt } from "@internal/dashboard-agent-contracts";
+import { motion } from "framer-motion";
 import { useState } from "react";
 import { demoFixtures, DemoIntentBubble } from "~/components/dashboard-agent/demo";
-import { ChatProgress, ChatTranscript, ChatTurn } from "~/components/dashboard-agent/chat-layout";
+import {
+  ChatProgress,
+  ChatText,
+  ChatTranscript,
+  ChatTurn,
+} from "~/components/dashboard-agent/chat-layout";
 import { DashboardAgentComposer } from "~/components/dashboard-agent/DashboardAgentComposer";
 import { DashboardAgentContextBanner } from "~/components/dashboard-agent/DashboardAgentContextBanner";
+import { DashboardAgentHeader } from "~/components/dashboard-agent/DashboardAgentHeader";
+import type { DashboardAgentChat } from "~/components/dashboard-agent/DashboardAgentHistory";
 import { DashboardAgentHero } from "~/components/dashboard-agent/DashboardAgentHero";
 import { DashboardAgentMessages } from "~/components/dashboard-agent/DashboardAgentMessages";
 import { DashboardAgentSuggestedPrompts } from "~/components/dashboard-agent/DashboardAgentSuggestedPrompts";
-import { AgentPanelColumn } from "~/components/dashboard-agent/panel-layout";
+import { AgentPanelColumn, FloatingAgentWindow } from "~/components/dashboard-agent/panel-layout";
 import { liveProgress } from "~/components/dashboard-agent/progress-line";
 import type { WakeWatch } from "~/components/dashboard-agent/WakeBanner";
 import { WatchChips, type WatchChip } from "~/components/dashboard-agent/WatchChips";
+import { Button } from "~/components/primitives/Buttons";
 import { cn } from "~/utils/cn";
 import { demoTranscripts, investigationBlock, type DemoTranscript } from "./fixtures";
 import { fixtureResolveUri, GalleryPage, noop, PANEL_FRAME } from "./gallery";
 
+const NO_CHATS: DashboardAgentChat[] = [];
+
+/**
+ * The dashboard agent's default (and only) mode: a floating window docked bottom-right,
+ * draggable across the whole page and resizable by its edges and corners. Toggled open
+ * here so the section demos the live shell, not a screenshot of it.
+ */
+function FloatingWindowHarness() {
+  const [open, setOpen] = useState(true);
+  const [fullscreen, setFullscreen] = useState(false);
+
+  return (
+    <>
+      <div className={cn(PANEL_FRAME, "flex h-24 items-center justify-center")}>
+        <Button variant="primary/medium" onClick={() => setOpen((current) => !current)}>
+          {open ? "Close chat" : "Open chat"}
+        </Button>
+      </div>
+      {open && (
+        <FloatingAgentWindow fullscreen={fullscreen}>
+          {(dragHandleProps) => (
+            <div className="flex h-full flex-col bg-background-bright">
+              <motion.div {...dragHandleProps}>
+                <DashboardAgentHeader
+                  title="New chat"
+                  chats={NO_CHATS}
+                  currentChatId=""
+                  thinkingChatId={null}
+                  onNewChat={noop}
+                  showNewChat={false}
+                  onOpenHistory={noop}
+                  onSelectChat={noop}
+                  onDeleteChat={noop}
+                  onToggleFullscreen={() => setFullscreen((current) => !current)}
+                  isFullscreen={fullscreen}
+                  onClose={() => setOpen(false)}
+                />
+              </motion.div>
+              <ChatTranscript>
+                <ChatTurn speaker="user">
+                  <ChatText speaker="user" text="Why did the queue back up around 2pm?" />
+                </ChatTurn>
+                <ChatTurn>
+                  <ChatText text="Concurrency on the `emails` queue hit its limit at 14:02 and stayed there for about 12 minutes. I can show you the runs that queued behind it." />
+                </ChatTurn>
+              </ChatTranscript>
+            </div>
+          )}
+        </FloatingAgentWindow>
+      )}
+    </>
+  );
+}
+
 const { demoIntents, demoWatches, demoPageContexts, demoInvestigations } = demoFixtures;
 
 function MessageHarness({
@@ -242,6 +305,8 @@ function WakeHarness({ message, watches }: { message: UIMessage; watches?: WakeW
 }
 
 const STATES: Record<string, React.ReactNode> = {
+  "shell-floating-window": <FloatingWindowHarness />,
+
   "hero-panel": <HeroHarness context={demoPageContexts.other} />,
   "hero-panel-contextual": <HeroHarness context={demoPageContexts.failedRun} />,
   "hero-fullscreen": <HeroHarness context={demoPageContexts.failedRun} fullscreen />,
@@ -338,6 +403,7 @@ export default function Story() {
       page="chat"
       states={STATES}
       componentNames={[
+        "panel-layout.tsx",
         "DashboardAgentComposer.tsx",
         "DashboardAgentMessages.tsx",
         "DashboardAgentHero.tsx",
diff --git a/apps/webapp/app/routes/storybook.draggable-resizable/route.tsx b/apps/webapp/app/routes/storybook.draggable-resizable/route.tsx
deleted file mode 100644
index 43db4997150..00000000000
--- a/apps/webapp/app/routes/storybook.draggable-resizable/route.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { motion } from "framer-motion";
-import { ComponentNames } from "../storybook/StoryKit";
-import {
-  draggableResizeHandleClassName,
-  useDraggableResizable,
-  type ResizeEdge,
-} from "~/components/primitives/DraggableResizable";
-
-const EDGES: ResizeEdge[] = ["n", "e", "s", "w", "ne", "nw", "se", "sw"];
-
-export default function Story() {
-  const { style, dragHandleProps, resizeHandleProps } = useDraggableResizable({
-    initial: { x: 120, y: 120, w: 360, h: 240 },
-    minSize: { w: 200, h: 140 },
-    maxSize: { w: 640, h: 480 },
-  });
-
-  return (
-    <div className="h-full">
-      <div className="px-4 pt-4">
-        <ComponentNames names={["DraggableResizable.tsx"]} />
-      </div>
-      <div
-        style={style}
-        className="flex flex-col overflow-hidden rounded-md border border-grid-bright bg-background-bright shadow-lg"
-      >
-        <motion.div
-          {...dragHandleProps}
-          className="flex h-8 shrink-0 cursor-grab touch-none select-none items-center bg-background-dimmed px-3 text-xs text-text-dimmed active:cursor-grabbing"
-        >
-          Drag me
-        </motion.div>
-        <div className="flex flex-1 items-center justify-center text-sm text-text-dimmed">
-          Resize from any edge or corner
-        </div>
-        {EDGES.map((edge) => (
-          <motion.div
-            key={edge}
-            {...resizeHandleProps(edge)}
-            className={draggableResizeHandleClassName(edge)}
-          />
-        ))}
-      </div>
-    </div>
-  );
-}
diff --git a/apps/webapp/app/routes/storybook/route.tsx b/apps/webapp/app/routes/storybook/route.tsx
index f754a3ec14e..09e6bcf0639 100644
--- a/apps/webapp/app/routes/storybook/route.tsx
+++ b/apps/webapp/app/routes/storybook/route.tsx
@@ -95,7 +95,6 @@ const sections: StorySection[] = [
       { name: "Page header", slug: "page-header" },
       { name: "Tree view", slug: "tree-view" },
       { name: "Resizable", slug: "resizable" },
-      { name: "Draggable resizable", slug: "draggable-resizable" },
       { name: "Animated panel", slug: "animated-panel" },
       { name: "Accordion", slug: "accordion" },
     ],
@@ -132,12 +131,12 @@ const sections: StorySection[] = [
     title: "Trigger Agent",
     items: [
       { name: "Chat UI", slug: "agent-ui" },
+      { name: "Floating chat window", slug: "dashboard-agent-floating" },
       { name: "View blocks", slug: "agent-view-blocks" },
       { name: "Report view", slug: "agent-report" },
       { name: "Investigation card", slug: "agent-investigation" },
       { name: "Watch card", slug: "agent-watch" },
       { name: "Icons & Buttons", slug: "ai-agent" },
-      { name: "Floating chat window", slug: "dashboard-agent-floating" },
     ],
   },
 ];

From e1dab30f358dcb003c82e2cdda679dd43a1635f1 Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Wed, 26 Aug 2026 16:17:48 +0000
Subject: [PATCH 10/43] fix(webapp): close the storybook floating-chat demo on
 route change

Scoped to the storybook stories; the real dashboard chat still
persists across navigation.
---
 .../webapp/app/routes/storybook.agent-ui/route.tsx | 14 +++++++++++++-
 .../storybook.dashboard-agent-floating/route.tsx   | 14 +++++++++++++-
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/apps/webapp/app/routes/storybook.agent-ui/route.tsx b/apps/webapp/app/routes/storybook.agent-ui/route.tsx
index e59ba962a64..3ac8a72871b 100644
--- a/apps/webapp/app/routes/storybook.agent-ui/route.tsx
+++ b/apps/webapp/app/routes/storybook.agent-ui/route.tsx
@@ -1,7 +1,8 @@
 import type { UIMessage } from "@ai-sdk/react";
 import type { AgentPageContext, SuggestedPrompt } from "@internal/dashboard-agent-contracts";
+import { useLocation } from "@remix-run/react";
 import { motion } from "framer-motion";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { demoFixtures, DemoIntentBubble } from "~/components/dashboard-agent/demo";
 import {
   ChatProgress,
@@ -36,6 +37,17 @@ function FloatingWindowHarness() {
   const [open, setOpen] = useState(true);
   const [fullscreen, setFullscreen] = useState(false);
 
+  // Storybook only: the demo window must not follow you to another story. The real
+  // dashboard's chat intentionally persists across navigation — this effect is scoped to
+  // this story route and has no equivalent in DashboardAgent.tsx.
+  const { pathname } = useLocation();
+  const previousPathname = useRef(pathname);
+  useEffect(() => {
+    if (previousPathname.current === pathname) return;
+    previousPathname.current = pathname;
+    setOpen(false);
+  }, [pathname]);
+
   return (
     <>
       <div className={cn(PANEL_FRAME, "flex h-24 items-center justify-center")}>
diff --git a/apps/webapp/app/routes/storybook.dashboard-agent-floating/route.tsx b/apps/webapp/app/routes/storybook.dashboard-agent-floating/route.tsx
index 258e3b880dd..ca67297e23a 100644
--- a/apps/webapp/app/routes/storybook.dashboard-agent-floating/route.tsx
+++ b/apps/webapp/app/routes/storybook.dashboard-agent-floating/route.tsx
@@ -1,5 +1,6 @@
+import { useLocation } from "@remix-run/react";
 import { motion } from "framer-motion";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { ComponentNames } from "../storybook/StoryKit";
 import { ChatText, ChatTranscript, ChatTurn } from "~/components/dashboard-agent/chat-layout";
 import { DashboardAgentHeader } from "~/components/dashboard-agent/DashboardAgentHeader";
@@ -21,6 +22,17 @@ export default function Story() {
   const [open, setOpen] = useState(true);
   const [fullscreen, setFullscreen] = useState(false);
 
+  // Storybook only: the demo window must not follow you to another story. The real
+  // dashboard's chat intentionally persists across navigation — this effect is scoped to
+  // this story route and has no equivalent in DashboardAgent.tsx.
+  const { pathname } = useLocation();
+  const previousPathname = useRef(pathname);
+  useEffect(() => {
+    if (previousPathname.current === pathname) return;
+    previousPathname.current = pathname;
+    setOpen(false);
+  }, [pathname]);
+
   return (
     <div className="relative flex h-screen flex-col gap-4 p-6">
       <div className="px-4 pt-4">

From 90b4002f4841eaed36867a82e32cad050f615715 Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Wed, 26 Aug 2026 16:22:02 +0000
Subject: [PATCH 11/43] feat(webapp): dot-matrix variants of the
 Investigate/Watch icons for comparison

Storybook only, in the ai-agent story's new "Action icons" tab next
to the current heroicons versions. Not wired into the app.
---
 .../app/assets/icons/InvestigateDotIcon.tsx   | 25 +++++++
 apps/webapp/app/assets/icons/WatchDotIcon.tsx | 25 +++++++
 .../webapp/app/assets/icons/dotMatrixIcon.tsx | 51 +++++++++++++
 .../app/routes/storybook.ai-agent/route.tsx   | 74 ++++++++++++++++++-
 4 files changed, 174 insertions(+), 1 deletion(-)
 create mode 100644 apps/webapp/app/assets/icons/InvestigateDotIcon.tsx
 create mode 100644 apps/webapp/app/assets/icons/WatchDotIcon.tsx
 create mode 100644 apps/webapp/app/assets/icons/dotMatrixIcon.tsx

diff --git a/apps/webapp/app/assets/icons/InvestigateDotIcon.tsx b/apps/webapp/app/assets/icons/InvestigateDotIcon.tsx
new file mode 100644
index 00000000000..1fd0d952230
--- /dev/null
+++ b/apps/webapp/app/assets/icons/InvestigateDotIcon.tsx
@@ -0,0 +1,25 @@
+import { DotMatrixIcon } from "./dotMatrixIcon";
+
+// Dot-matrix ("LED"/flip-dot) variant of the Investigate action's magnifying-glass icon
+// (heroicons `MagnifyingGlassIcon`), for comparison in storybook.ai-agent. 8x8 grid: a
+// coarse ring for the lens, a 3-dot diagonal for the handle. Not used anywhere in the app.
+const BITMAP = [
+  ".oooo...",
+  "o....o..",
+  "o....o..",
+  "o....o..",
+  ".oooo...",
+  ".....o..",
+  "......o.",
+  ".......o",
+];
+
+export function InvestigateDotIcon({
+  className,
+  style,
+}: {
+  className?: string;
+  style?: React.CSSProperties;
+}) {
+  return <DotMatrixIcon bitmap={BITMAP} className={className} style={style} />;
+}
diff --git a/apps/webapp/app/assets/icons/WatchDotIcon.tsx b/apps/webapp/app/assets/icons/WatchDotIcon.tsx
new file mode 100644
index 00000000000..acbe3b0bf71
--- /dev/null
+++ b/apps/webapp/app/assets/icons/WatchDotIcon.tsx
@@ -0,0 +1,25 @@
+import { DotMatrixIcon } from "./dotMatrixIcon";
+
+// Dot-matrix ("LED"/flip-dot) variant of the Watch action's eye icon (heroicons
+// `EyeIcon`), for comparison in storybook.ai-agent. 8x8 grid: an almond outline with a
+// 2x2 pupil block. Not used anywhere in the app.
+const BITMAP = [
+  "........",
+  "..oooo..",
+  ".o....o.",
+  "o..oo..o",
+  "o..oo..o",
+  ".o....o.",
+  "..oooo..",
+  "........",
+];
+
+export function WatchDotIcon({
+  className,
+  style,
+}: {
+  className?: string;
+  style?: React.CSSProperties;
+}) {
+  return <DotMatrixIcon bitmap={BITMAP} className={className} style={style} />;
+}
diff --git a/apps/webapp/app/assets/icons/dotMatrixIcon.tsx b/apps/webapp/app/assets/icons/dotMatrixIcon.tsx
new file mode 100644
index 00000000000..f66391aed34
--- /dev/null
+++ b/apps/webapp/app/assets/icons/dotMatrixIcon.tsx
@@ -0,0 +1,51 @@
+/**
+ * Coarse dot-matrix ("LED"/flip-dot) rendering of an icon silhouette: a bitmap of "o"/"."
+ * rows becomes a grid of `currentColor` circles at a fixed viewBox, so it drops in
+ * anywhere a normal icon does. Used by the storybook-only dot-matrix icon variants —
+ * not wired into any live UI.
+ */
+export function DotMatrixIcon({
+  bitmap,
+  className,
+  style,
+  size = 24,
+  dotRadius = 1.15,
+}: {
+  /** Equal-length rows, "o" = dot on. Read top to bottom, left to right. */
+  bitmap: string[];
+  className?: string;
+  /** `width`/`height` here override `size`, matching how heroicons is usually sized. */
+  style?: React.CSSProperties;
+  size?: number;
+  dotRadius?: number;
+}) {
+  const rows = bitmap.length;
+  const cols = bitmap[0]?.length ?? 0;
+  const cellW = size / cols;
+  const cellH = size / rows;
+
+  return (
+    <svg
+      className={className}
+      style={style}
+      width={size}
+      height={size}
+      viewBox={`0 0 ${size} ${size}`}
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      {bitmap.flatMap((row, r) =>
+        [...row].map((cell, c) =>
+          cell === "o" ? (
+            <circle
+              key={`${r}-${c}`}
+              cx={c * cellW + cellW / 2}
+              cy={r * cellH + cellH / 2}
+              r={dotRadius}
+            />
+          ) : null
+        )
+      )}
+    </svg>
+  );
+}
diff --git a/apps/webapp/app/routes/storybook.ai-agent/route.tsx b/apps/webapp/app/routes/storybook.ai-agent/route.tsx
index c8359ceba34..5315ddc6a2c 100644
--- a/apps/webapp/app/routes/storybook.ai-agent/route.tsx
+++ b/apps/webapp/app/routes/storybook.ai-agent/route.tsx
@@ -1,5 +1,8 @@
+import { EyeIcon, MagnifyingGlassIcon } from "@heroicons/react/20/solid";
 import { ComponentNames } from "../storybook/StoryKit";
 import { type CSSProperties, useEffect, useMemo, useRef, useState } from "react";
+import { InvestigateDotIcon } from "~/assets/icons/InvestigateDotIcon";
+import { WatchDotIcon } from "~/assets/icons/WatchDotIcon";
 import { LogoIcon } from "~/components/LogoIcon";
 import { Button, type ButtonVariant } from "~/components/primitives/Buttons";
 import {
@@ -28,7 +31,9 @@ export default function Story() {
   return (
     <div className="flex flex-col gap-4 p-6">
       <div className="px-4 pt-4">
-        <ComponentNames names={["AgentDotMatrix.tsx"]} />
+        <ComponentNames
+          names={["AgentDotMatrix.tsx", "InvestigateDotIcon.tsx", "WatchDotIcon.tsx"]}
+        />
       </div>
       <div className="flex max-w-3xl flex-col gap-1">
         <Header1>Trigger Agent — Icons & Buttons</Header1>
@@ -47,6 +52,9 @@ export default function Story() {
           <ClientTabsTrigger variant="underline" value="orbit-dots">
             Orbit dots
           </ClientTabsTrigger>
+          <ClientTabsTrigger variant="underline" value="action-icons">
+            Action icons
+          </ClientTabsTrigger>
         </ClientTabsList>
         <ClientTabsContent value="dot-matrix">
           <DotMatrixTab />
@@ -57,6 +65,9 @@ export default function Story() {
         <ClientTabsContent value="orbit-dots">
           <OrbitDotsTab />
         </ClientTabsContent>
+        <ClientTabsContent value="action-icons">
+          <ActionIconsTab />
+        </ClientTabsContent>
       </ClientTabs>
     </div>
   );
@@ -254,6 +265,67 @@ function ToggleableMatrix({
   );
 }
 
+// --- Action icons (current vs dot-matrix) ---------------------------------------
+
+const ACTION_ICON_SIZES = [16, 20, 24];
+
+function ActionIconRow({
+  label,
+  CurrentIcon,
+  DotIcon,
+}: {
+  label: string;
+  CurrentIcon: React.ComponentType<{ className?: string; style?: CSSProperties }>;
+  DotIcon: React.ComponentType<{ className?: string; style?: CSSProperties }>;
+}) {
+  return (
+    <div className="flex flex-col gap-3">
+      <Header2 className="text-sm">{label}</Header2>
+      <div className="flex flex-wrap gap-8 rounded-md border border-grid-bright bg-background-bright px-6 py-5">
+        {ACTION_ICON_SIZES.map((s) => (
+          <div key={`current-${s}`} className="flex flex-col items-center gap-2">
+            <CurrentIcon className="text-text-bright" style={{ width: s, height: s }} />
+            <div className="text-[10px] uppercase tracking-wide text-text-dimmed">
+              current · {s}px
+            </div>
+          </div>
+        ))}
+        {ACTION_ICON_SIZES.map((s) => (
+          <div key={`dot-${s}`} className="flex flex-col items-center gap-2">
+            <DotIcon className="text-text-bright" style={{ width: s, height: s }} />
+            <div className="text-[10px] uppercase tracking-wide text-text-dimmed">
+              dot-matrix · {s}px
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Comparison only: the current heroicons Investigate/Watch icons next to a coarse
+ * dot-matrix ("LED"/flip-dot) variant, so the owner can pick one. Neither
+ * `InvestigateDotIcon` nor `WatchDotIcon` is wired into `InvestigateButton.tsx` /
+ * `WatchButton.tsx` — this tab is the only place they render.
+ */
+function ActionIconsTab() {
+  return (
+    <div className="flex flex-col gap-6 py-6">
+      <Paragraph variant="small" className="mt-2 -mb-3 max-w-3xl">
+        The Investigate and Watch action icons, current (heroicons, filled) vs an 8x8 dot-matrix
+        silhouette in the same style as the logo above. `currentColor`, same box.
+      </Paragraph>
+      <ActionIconRow
+        label="Investigate"
+        CurrentIcon={MagnifyingGlassIcon}
+        DotIcon={InvestigateDotIcon}
+      />
+      <ActionIconRow label="Watch" CurrentIcon={EyeIcon} DotIcon={WatchDotIcon} />
+    </div>
+  );
+}
+
 // --- Logo morph (crisp logo -> orbits) -----------------------------------------
 
 function LogoMorphTab() {

From 3e7007aedd63ab456c8dff35cab6852914b2f58e Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Wed, 26 Aug 2026 16:31:28 +0000
Subject: [PATCH 12/43] fix(webapp): rounder dot-matrix icons in the ai-agent
 Shape library

Investigate (magnifier + glasses), Watch (eye) and Alert (bell), all
generated from circular/elliptical bands instead of hand-drawn
corners, with a smaller edge dot to soften the curve. Moved into the
Shape library section; dropped the separate Action icons tab.
---
 apps/webapp/app/assets/icons/AlertDotIcon.tsx |  29 +++++
 .../app/assets/icons/InvestigateDotIcon.tsx   |  24 ++--
 .../icons/InvestigateGlassesDotIcon.tsx       |  24 ++++
 apps/webapp/app/assets/icons/WatchDotIcon.tsx |  22 ++--
 .../webapp/app/assets/icons/dotMatrixIcon.tsx |  24 ++--
 .../app/routes/storybook.ai-agent/route.tsx   | 108 +++++++-----------
 6 files changed, 132 insertions(+), 99 deletions(-)
 create mode 100644 apps/webapp/app/assets/icons/AlertDotIcon.tsx
 create mode 100644 apps/webapp/app/assets/icons/InvestigateGlassesDotIcon.tsx

diff --git a/apps/webapp/app/assets/icons/AlertDotIcon.tsx b/apps/webapp/app/assets/icons/AlertDotIcon.tsx
new file mode 100644
index 00000000000..398a5d5c28b
--- /dev/null
+++ b/apps/webapp/app/assets/icons/AlertDotIcon.tsx
@@ -0,0 +1,29 @@
+import { DotMatrixIcon } from "./dotMatrixIcon";
+
+// Dot-matrix ("LED"/flip-dot) variant of an Alert bell icon, for the Investigate/Watch
+// comparison set in storybook.ai-agent's shape library: a rounded bell body (circular
+// annulus arc, "s" softening the edge) over a flared lip, with a clapper dot. Not used
+// anywhere in the app.
+const BITMAP = [
+  ".....o.....",
+  "....sss....",
+  "...os.so...",
+  "..o.....o..",
+  "..o.....o..",
+  "..o.....o..",
+  "..ss...ss..",
+  ".ooooooooo.",
+  ".....o.....",
+  "....ooo....",
+  ".....o.....",
+];
+
+export function AlertDotIcon({
+  className,
+  style,
+}: {
+  className?: string;
+  style?: React.CSSProperties;
+}) {
+  return <DotMatrixIcon bitmap={BITMAP} className={className} style={style} />;
+}
diff --git a/apps/webapp/app/assets/icons/InvestigateDotIcon.tsx b/apps/webapp/app/assets/icons/InvestigateDotIcon.tsx
index 1fd0d952230..19dae370010 100644
--- a/apps/webapp/app/assets/icons/InvestigateDotIcon.tsx
+++ b/apps/webapp/app/assets/icons/InvestigateDotIcon.tsx
@@ -1,17 +1,21 @@
 import { DotMatrixIcon } from "./dotMatrixIcon";
 
 // Dot-matrix ("LED"/flip-dot) variant of the Investigate action's magnifying-glass icon
-// (heroicons `MagnifyingGlassIcon`), for comparison in storybook.ai-agent. 8x8 grid: a
-// coarse ring for the lens, a 3-dot diagonal for the handle. Not used anywhere in the app.
+// (heroicons `MagnifyingGlassIcon`), for comparison in storybook.ai-agent's shape
+// library. 10x10, generated from a true circular annulus (not hand-drawn corners) so
+// the ring reads round rather than stair-stepped; "s" softens the band's inner/outer
+// edge. Not used anywhere in the app.
 const BITMAP = [
-  ".oooo...",
-  "o....o..",
-  "o....o..",
-  "o....o..",
-  ".oooo...",
-  ".....o..",
-  "......o.",
-  ".......o",
+  "...s......",
+  ".sosso....",
+  ".o....o...",
+  "ss....o...",
+  ".s....o...",
+  ".o...ss...",
+  "..ooos....",
+  ".......o..",
+  "........o.",
+  ".........o",
 ];
 
 export function InvestigateDotIcon({
diff --git a/apps/webapp/app/assets/icons/InvestigateGlassesDotIcon.tsx b/apps/webapp/app/assets/icons/InvestigateGlassesDotIcon.tsx
new file mode 100644
index 00000000000..547669c87ef
--- /dev/null
+++ b/apps/webapp/app/assets/icons/InvestigateGlassesDotIcon.tsx
@@ -0,0 +1,24 @@
+import { DotMatrixIcon } from "./dotMatrixIcon";
+
+// Dot-matrix ("LED"/flip-dot) spectacles variant of Investigate, for comparison against
+// the magnifier in storybook.ai-agent's shape library: two rounded lens rings (circular
+// annuli, "s" softening the edge) joined by a short bridge. Not used anywhere in the app.
+const BITMAP = [
+  "................",
+  "..sos......sos..",
+  ".ss..o....ss..o.",
+  ".o...s.oo.o...s.",
+  ".o...o....o...o.",
+  "..osss.....osss.",
+  "................",
+];
+
+export function InvestigateGlassesDotIcon({
+  className,
+  style,
+}: {
+  className?: string;
+  style?: React.CSSProperties;
+}) {
+  return <DotMatrixIcon bitmap={BITMAP} className={className} style={style} />;
+}
diff --git a/apps/webapp/app/assets/icons/WatchDotIcon.tsx b/apps/webapp/app/assets/icons/WatchDotIcon.tsx
index acbe3b0bf71..b18cfd112dd 100644
--- a/apps/webapp/app/assets/icons/WatchDotIcon.tsx
+++ b/apps/webapp/app/assets/icons/WatchDotIcon.tsx
@@ -1,17 +1,19 @@
 import { DotMatrixIcon } from "./dotMatrixIcon";
 
 // Dot-matrix ("LED"/flip-dot) variant of the Watch action's eye icon (heroicons
-// `EyeIcon`), for comparison in storybook.ai-agent. 8x8 grid: an almond outline with a
-// 2x2 pupil block. Not used anywhere in the app.
+// `EyeIcon`), for comparison in storybook.ai-agent's shape library. 9x9, generated from
+// an elliptical band (not hand-drawn corners) so the almond outline reads round; "s"
+// softens the band's inner/outer edge. Not used anywhere in the app.
 const BITMAP = [
-  "........",
-  "..oooo..",
-  ".o....o.",
-  "o..oo..o",
-  "o..oo..o",
-  ".o....o.",
-  "..oooo..",
-  "........",
+  ".........",
+  ".........",
+  "..sooos..",
+  ".o..o..o.",
+  ".o.ooo.o.",
+  ".o..o..o.",
+  "..sooos..",
+  ".........",
+  ".........",
 ];
 
 export function WatchDotIcon({
diff --git a/apps/webapp/app/assets/icons/dotMatrixIcon.tsx b/apps/webapp/app/assets/icons/dotMatrixIcon.tsx
index f66391aed34..a699f131eb4 100644
--- a/apps/webapp/app/assets/icons/dotMatrixIcon.tsx
+++ b/apps/webapp/app/assets/icons/dotMatrixIcon.tsx
@@ -1,8 +1,9 @@
 /**
- * Coarse dot-matrix ("LED"/flip-dot) rendering of an icon silhouette: a bitmap of "o"/"."
- * rows becomes a grid of `currentColor` circles at a fixed viewBox, so it drops in
- * anywhere a normal icon does. Used by the storybook-only dot-matrix icon variants —
- * not wired into any live UI.
+ * Coarse dot-matrix ("LED"/flip-dot) rendering of an icon silhouette: a bitmap of
+ * "o"/"s"/"." rows becomes a grid of `currentColor` circles at a fixed viewBox, so it
+ * drops in anywhere a normal icon does. "s" is a smaller dot — used at the inner/outer
+ * edge of a curved band so the silhouette reads rounder instead of stair-stepped. Used
+ * by the storybook-only dot-matrix icon variants — not wired into any live UI.
  */
 export function DotMatrixIcon({
   bitmap,
@@ -10,14 +11,16 @@ export function DotMatrixIcon({
   style,
   size = 24,
   dotRadius = 1.15,
+  smallDotRadius = dotRadius * 0.6,
 }: {
-  /** Equal-length rows, "o" = dot on. Read top to bottom, left to right. */
+  /** Equal-length rows: "o" = full dot, "s" = small dot, "." = off. */
   bitmap: string[];
   className?: string;
   /** `width`/`height` here override `size`, matching how heroicons is usually sized. */
   style?: React.CSSProperties;
   size?: number;
   dotRadius?: number;
+  smallDotRadius?: number;
 }) {
   const rows = bitmap.length;
   const cols = bitmap[0]?.length ?? 0;
@@ -35,16 +38,17 @@ export function DotMatrixIcon({
       xmlns="http://www.w3.org/2000/svg"
     >
       {bitmap.flatMap((row, r) =>
-        [...row].map((cell, c) =>
-          cell === "o" ? (
+        [...row].map((cell, c) => {
+          if (cell !== "o" && cell !== "s") return null;
+          return (
             <circle
               key={`${r}-${c}`}
               cx={c * cellW + cellW / 2}
               cy={r * cellH + cellH / 2}
-              r={dotRadius}
+              r={cell === "s" ? smallDotRadius : dotRadius}
             />
-          ) : null
-        )
+          );
+        })
       )}
     </svg>
   );
diff --git a/apps/webapp/app/routes/storybook.ai-agent/route.tsx b/apps/webapp/app/routes/storybook.ai-agent/route.tsx
index 5315ddc6a2c..cacc751bda8 100644
--- a/apps/webapp/app/routes/storybook.ai-agent/route.tsx
+++ b/apps/webapp/app/routes/storybook.ai-agent/route.tsx
@@ -1,7 +1,8 @@
-import { EyeIcon, MagnifyingGlassIcon } from "@heroicons/react/20/solid";
 import { ComponentNames } from "../storybook/StoryKit";
 import { type CSSProperties, useEffect, useMemo, useRef, useState } from "react";
+import { AlertDotIcon } from "~/assets/icons/AlertDotIcon";
 import { InvestigateDotIcon } from "~/assets/icons/InvestigateDotIcon";
+import { InvestigateGlassesDotIcon } from "~/assets/icons/InvestigateGlassesDotIcon";
 import { WatchDotIcon } from "~/assets/icons/WatchDotIcon";
 import { LogoIcon } from "~/components/LogoIcon";
 import { Button, type ButtonVariant } from "~/components/primitives/Buttons";
@@ -32,7 +33,13 @@ export default function Story() {
     <div className="flex flex-col gap-4 p-6">
       <div className="px-4 pt-4">
         <ComponentNames
-          names={["AgentDotMatrix.tsx", "InvestigateDotIcon.tsx", "WatchDotIcon.tsx"]}
+          names={[
+            "AgentDotMatrix.tsx",
+            "InvestigateDotIcon.tsx",
+            "InvestigateGlassesDotIcon.tsx",
+            "WatchDotIcon.tsx",
+            "AlertDotIcon.tsx",
+          ]}
         />
       </div>
       <div className="flex max-w-3xl flex-col gap-1">
@@ -52,9 +59,6 @@ export default function Story() {
           <ClientTabsTrigger variant="underline" value="orbit-dots">
             Orbit dots
           </ClientTabsTrigger>
-          <ClientTabsTrigger variant="underline" value="action-icons">
-            Action icons
-          </ClientTabsTrigger>
         </ClientTabsList>
         <ClientTabsContent value="dot-matrix">
           <DotMatrixTab />
@@ -65,9 +69,6 @@ export default function Story() {
         <ClientTabsContent value="orbit-dots">
           <OrbitDotsTab />
         </ClientTabsContent>
-        <ClientTabsContent value="action-icons">
-          <ActionIconsTab />
-        </ClientTabsContent>
       </ClientTabs>
     </div>
   );
@@ -191,6 +192,36 @@ function DotMatrixTab() {
           </div>
         ))}
       </div>
+      <Paragraph variant="small" className="mt-2 -mb-3 max-w-3xl">
+        Action icon candidates — rounded dot-matrix silhouettes, generated from circular/ elliptical
+        bands rather than hand-drawn corners. `currentColor`, same box as any other icon. Not wired
+        into `InvestigateButton.tsx` / `WatchButton.tsx` — comparison only.
+      </Paragraph>
+      <div className="flex flex-wrap items-end gap-8 rounded-md border border-grid-bright bg-background-bright px-6 py-5">
+        <div className="flex flex-col items-center gap-2">
+          <InvestigateDotIcon className="text-text-bright" style={{ width: 32, height: 32 }} />
+          <div className="text-[10px] uppercase tracking-wide text-text-dimmed">
+            investigate — magnifier
+          </div>
+        </div>
+        <div className="flex flex-col items-center gap-2">
+          <InvestigateGlassesDotIcon
+            className="text-text-bright"
+            style={{ width: 32, height: 32 }}
+          />
+          <div className="text-[10px] uppercase tracking-wide text-text-dimmed">
+            investigate — glasses
+          </div>
+        </div>
+        <div className="flex flex-col items-center gap-2">
+          <WatchDotIcon className="text-text-bright" style={{ width: 32, height: 32 }} />
+          <div className="text-[10px] uppercase tracking-wide text-text-dimmed">watch — eye</div>
+        </div>
+        <div className="flex flex-col items-center gap-2">
+          <AlertDotIcon className="text-text-bright" style={{ width: 32, height: 32 }} />
+          <div className="text-[10px] uppercase tracking-wide text-text-dimmed">alert — bell</div>
+        </div>
+      </div>
     </div>
   );
 }
@@ -265,67 +296,6 @@ function ToggleableMatrix({
   );
 }
 
-// --- Action icons (current vs dot-matrix) ---------------------------------------
-
-const ACTION_ICON_SIZES = [16, 20, 24];
-
-function ActionIconRow({
-  label,
-  CurrentIcon,
-  DotIcon,
-}: {
-  label: string;
-  CurrentIcon: React.ComponentType<{ className?: string; style?: CSSProperties }>;
-  DotIcon: React.ComponentType<{ className?: string; style?: CSSProperties }>;
-}) {
-  return (
-    <div className="flex flex-col gap-3">
-      <Header2 className="text-sm">{label}</Header2>
-      <div className="flex flex-wrap gap-8 rounded-md border border-grid-bright bg-background-bright px-6 py-5">
-        {ACTION_ICON_SIZES.map((s) => (
-          <div key={`current-${s}`} className="flex flex-col items-center gap-2">
-            <CurrentIcon className="text-text-bright" style={{ width: s, height: s }} />
-            <div className="text-[10px] uppercase tracking-wide text-text-dimmed">
-              current · {s}px
-            </div>
-          </div>
-        ))}
-        {ACTION_ICON_SIZES.map((s) => (
-          <div key={`dot-${s}`} className="flex flex-col items-center gap-2">
-            <DotIcon className="text-text-bright" style={{ width: s, height: s }} />
-            <div className="text-[10px] uppercase tracking-wide text-text-dimmed">
-              dot-matrix · {s}px
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-/**
- * Comparison only: the current heroicons Investigate/Watch icons next to a coarse
- * dot-matrix ("LED"/flip-dot) variant, so the owner can pick one. Neither
- * `InvestigateDotIcon` nor `WatchDotIcon` is wired into `InvestigateButton.tsx` /
- * `WatchButton.tsx` — this tab is the only place they render.
- */
-function ActionIconsTab() {
-  return (
-    <div className="flex flex-col gap-6 py-6">
-      <Paragraph variant="small" className="mt-2 -mb-3 max-w-3xl">
-        The Investigate and Watch action icons, current (heroicons, filled) vs an 8x8 dot-matrix
-        silhouette in the same style as the logo above. `currentColor`, same box.
-      </Paragraph>
-      <ActionIconRow
-        label="Investigate"
-        CurrentIcon={MagnifyingGlassIcon}
-        DotIcon={InvestigateDotIcon}
-      />
-      <ActionIconRow label="Watch" CurrentIcon={EyeIcon} DotIcon={WatchDotIcon} />
-    </div>
-  );
-}
-
 // --- Logo morph (crisp logo -> orbits) -----------------------------------------
 
 function LogoMorphTab() {

From 2825e45cefcfeda38ab3906aea3e2a2791a5ece0 Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Wed, 26 Aug 2026 16:37:03 +0000
Subject: [PATCH 13/43] fix(webapp): dot-matrix icons drawn on the exact Shape
 library grid

Magnifier, glasses, eye, bell now sit on the same MATRIX x MATRIX grid
nodes as DOT_SHAPES (exported dotMatrixGeometry from AgentDotMatrix),
same pitch and dot radius, no off-grid or resized dots. Shown
Face-options-style: faint full grid behind the lit silhouette.
---
 apps/webapp/app/assets/icons/AlertDotIcon.tsx | 25 +++------
 .../app/assets/icons/InvestigateDotIcon.tsx   | 26 +++-------
 .../icons/InvestigateGlassesDotIcon.tsx       | 20 +++-----
 apps/webapp/app/assets/icons/WatchDotIcon.tsx | 23 +++------
 .../webapp/app/assets/icons/dotMatrixIcon.tsx | 51 +++++++++++--------
 .../components/primitives/AgentDotMatrix.tsx  | 14 ++++-
 .../app/routes/storybook.ai-agent/route.tsx   | 18 ++++---
 7 files changed, 83 insertions(+), 94 deletions(-)

diff --git a/apps/webapp/app/assets/icons/AlertDotIcon.tsx b/apps/webapp/app/assets/icons/AlertDotIcon.tsx
index 398a5d5c28b..30880dc20c6 100644
--- a/apps/webapp/app/assets/icons/AlertDotIcon.tsx
+++ b/apps/webapp/app/assets/icons/AlertDotIcon.tsx
@@ -1,29 +1,18 @@
 import { DotMatrixIcon } from "./dotMatrixIcon";
 
-// Dot-matrix ("LED"/flip-dot) variant of an Alert bell icon, for the Investigate/Watch
-// comparison set in storybook.ai-agent's shape library: a rounded bell body (circular
-// annulus arc, "s" softening the edge) over a flared lip, with a clapper dot. Not used
-// anywhere in the app.
-const BITMAP = [
-  ".....o.....",
-  "....sss....",
-  "...os.so...",
-  "..o.....o..",
-  "..o.....o..",
-  "..o.....o..",
-  "..ss...ss..",
-  ".ooooooooo.",
-  ".....o.....",
-  "....ooo....",
-  ".....o.....",
-];
+// Dot-matrix bell variant for the Investigate/Watch comparison set, drawn on the same
+// 5x5 grid as the Shape library: knob, rounded dome sides, flared lip, clapper. For
+// comparison in storybook.ai-agent; not used anywhere in the app.
+const BITMAP = ["..o..", ".ooo.", "o...o", "ooooo", "..o.."];
 
 export function AlertDotIcon({
   className,
   style,
+  showGrid,
 }: {
   className?: string;
   style?: React.CSSProperties;
+  showGrid?: boolean;
 }) {
-  return <DotMatrixIcon bitmap={BITMAP} className={className} style={style} />;
+  return <DotMatrixIcon bitmap={BITMAP} className={className} style={style} showGrid={showGrid} />;
 }
diff --git a/apps/webapp/app/assets/icons/InvestigateDotIcon.tsx b/apps/webapp/app/assets/icons/InvestigateDotIcon.tsx
index 19dae370010..2719932a4a2 100644
--- a/apps/webapp/app/assets/icons/InvestigateDotIcon.tsx
+++ b/apps/webapp/app/assets/icons/InvestigateDotIcon.tsx
@@ -1,29 +1,19 @@
 import { DotMatrixIcon } from "./dotMatrixIcon";
 
-// Dot-matrix ("LED"/flip-dot) variant of the Investigate action's magnifying-glass icon
-// (heroicons `MagnifyingGlassIcon`), for comparison in storybook.ai-agent's shape
-// library. 10x10, generated from a true circular annulus (not hand-drawn corners) so
-// the ring reads round rather than stair-stepped; "s" softens the band's inner/outer
-// edge. Not used anywhere in the app.
-const BITMAP = [
-  "...s......",
-  ".sosso....",
-  ".o....o...",
-  "ss....o...",
-  ".s....o...",
-  ".o...ss...",
-  "..ooos....",
-  ".......o..",
-  "........o.",
-  ".........o",
-];
+// Dot-matrix variant of the Investigate action's magnifying-glass icon (heroicons
+// `MagnifyingGlassIcon`), drawn on the same 5x5 grid as the Shape library — a rounded
+// ring (the "circle" shape) with one corner extended into a handle stub. For comparison
+// in storybook.ai-agent; not used anywhere in the app.
+const BITMAP = [".ooo.", "o...o", "o...o", "o...o", ".oooo"];
 
 export function InvestigateDotIcon({
   className,
   style,
+  showGrid,
 }: {
   className?: string;
   style?: React.CSSProperties;
+  showGrid?: boolean;
 }) {
-  return <DotMatrixIcon bitmap={BITMAP} className={className} style={style} />;
+  return <DotMatrixIcon bitmap={BITMAP} className={className} style={style} showGrid={showGrid} />;
 }
diff --git a/apps/webapp/app/assets/icons/InvestigateGlassesDotIcon.tsx b/apps/webapp/app/assets/icons/InvestigateGlassesDotIcon.tsx
index 547669c87ef..3d4498daeff 100644
--- a/apps/webapp/app/assets/icons/InvestigateGlassesDotIcon.tsx
+++ b/apps/webapp/app/assets/icons/InvestigateGlassesDotIcon.tsx
@@ -1,24 +1,18 @@
 import { DotMatrixIcon } from "./dotMatrixIcon";
 
-// Dot-matrix ("LED"/flip-dot) spectacles variant of Investigate, for comparison against
-// the magnifier in storybook.ai-agent's shape library: two rounded lens rings (circular
-// annuli, "s" softening the edge) joined by a short bridge. Not used anywhere in the app.
-const BITMAP = [
-  "................",
-  "..sos......sos..",
-  ".ss..o....ss..o.",
-  ".o...s.oo.o...s.",
-  ".o...o....o...o.",
-  "..osss.....osss.",
-  "................",
-];
+// Dot-matrix spectacles variant of Investigate, drawn on the same 5x5 grid as the Shape
+// library: two lens blocks with a gap for the bridge. For comparison against the
+// magnifier in storybook.ai-agent; not used anywhere in the app.
+const BITMAP = [".....", "oo.oo", "oo.oo", ".....", "....."];
 
 export function InvestigateGlassesDotIcon({
   className,
   style,
+  showGrid,
 }: {
   className?: string;
   style?: React.CSSProperties;
+  showGrid?: boolean;
 }) {
-  return <DotMatrixIcon bitmap={BITMAP} className={className} style={style} />;
+  return <DotMatrixIcon bitmap={BITMAP} className={className} style={style} showGrid={showGrid} />;
 }
diff --git a/apps/webapp/app/assets/icons/WatchDotIcon.tsx b/apps/webapp/app/assets/icons/WatchDotIcon.tsx
index b18cfd112dd..1f5855eefe8 100644
--- a/apps/webapp/app/assets/icons/WatchDotIcon.tsx
+++ b/apps/webapp/app/assets/icons/WatchDotIcon.tsx
@@ -1,27 +1,18 @@
 import { DotMatrixIcon } from "./dotMatrixIcon";
 
-// Dot-matrix ("LED"/flip-dot) variant of the Watch action's eye icon (heroicons
-// `EyeIcon`), for comparison in storybook.ai-agent's shape library. 9x9, generated from
-// an elliptical band (not hand-drawn corners) so the almond outline reads round; "s"
-// softens the band's inner/outer edge. Not used anywhere in the app.
-const BITMAP = [
-  ".........",
-  ".........",
-  "..sooos..",
-  ".o..o..o.",
-  ".o.ooo.o.",
-  ".o..o..o.",
-  "..sooos..",
-  ".........",
-  ".........",
-];
+// Dot-matrix variant of the Watch action's eye icon (heroicons `EyeIcon`), drawn on the
+// same 5x5 grid as the Shape library: an outline ring with a pupil dot at center. For
+// comparison in storybook.ai-agent; not used anywhere in the app.
+const BITMAP = [".....", ".ooo.", "o.o.o", ".ooo.", "....."];
 
 export function WatchDotIcon({
   className,
   style,
+  showGrid,
 }: {
   className?: string;
   style?: React.CSSProperties;
+  showGrid?: boolean;
 }) {
-  return <DotMatrixIcon bitmap={BITMAP} className={className} style={style} />;
+  return <DotMatrixIcon bitmap={BITMAP} className={className} style={style} showGrid={showGrid} />;
 }
diff --git a/apps/webapp/app/assets/icons/dotMatrixIcon.tsx b/apps/webapp/app/assets/icons/dotMatrixIcon.tsx
index a699f131eb4..1421a981b64 100644
--- a/apps/webapp/app/assets/icons/dotMatrixIcon.tsx
+++ b/apps/webapp/app/assets/icons/dotMatrixIcon.tsx
@@ -1,31 +1,32 @@
+import { dotMatrixGeometry, MATRIX } from "~/components/primitives/AgentDotMatrix";
+
 /**
- * Coarse dot-matrix ("LED"/flip-dot) rendering of an icon silhouette: a bitmap of
- * "o"/"s"/"." rows becomes a grid of `currentColor` circles at a fixed viewBox, so it
- * drops in anywhere a normal icon does. "s" is a smaller dot — used at the inner/outer
- * edge of a curved band so the silhouette reads rounder instead of stair-stepped. Used
- * by the storybook-only dot-matrix icon variants — not wired into any live UI.
+ * A silhouette drawn on the exact same grid as the Shape library's `AgentDotMatrix`
+ * shapes ("Face options" in storybook.ai-agent): `MATRIX`x`MATRIX` nodes, same pitch,
+ * same dot radius (`dotMatrixGeometry`) — every lit dot sits on a grid node, none
+ * off-grid, none resized. `currentColor`, so it drops in anywhere a normal icon does.
+ * Used by the storybook-only dot-matrix icon variants — not wired into any live UI.
  */
 export function DotMatrixIcon({
   bitmap,
   className,
   style,
   size = 24,
-  dotRadius = 1.15,
-  smallDotRadius = dotRadius * 0.6,
+  /** Faint always-visible grid, matching "Face options" (`gridAtRest`) at its own default opacity. */
+  showGrid = false,
+  gridOpacity = 0.18,
 }: {
-  /** Equal-length rows: "o" = full dot, "s" = small dot, "." = off. */
+  /** Exactly `MATRIX` rows of `MATRIX` chars: "o" = lit, "." = off. */
   bitmap: string[];
   className?: string;
   /** `width`/`height` here override `size`, matching how heroicons is usually sized. */
   style?: React.CSSProperties;
   size?: number;
-  dotRadius?: number;
-  smallDotRadius?: number;
+  showGrid?: boolean;
+  gridOpacity?: number;
 }) {
-  const rows = bitmap.length;
-  const cols = bitmap[0]?.length ?? 0;
-  const cellW = size / cols;
-  const cellH = size / rows;
+  const { pitch, dotR } = dotMatrixGeometry(size);
+  const center = (i: number) => i * pitch + pitch / 2;
 
   return (
     <svg
@@ -37,18 +38,24 @@ export function DotMatrixIcon({
       fill="currentColor"
       xmlns="http://www.w3.org/2000/svg"
     >
-      {bitmap.flatMap((row, r) =>
-        [...row].map((cell, c) => {
-          if (cell !== "o" && cell !== "s") return null;
+      {showGrid &&
+        Array.from({ length: MATRIX * MATRIX }, (_, i) => {
+          const r = Math.floor(i / MATRIX);
+          const c = i % MATRIX;
           return (
             <circle
-              key={`${r}-${c}`}
-              cx={c * cellW + cellW / 2}
-              cy={r * cellH + cellH / 2}
-              r={cell === "s" ? smallDotRadius : dotRadius}
+              key={`ghost-${r}-${c}`}
+              cx={center(c)}
+              cy={center(r)}
+              r={dotR}
+              opacity={gridOpacity}
             />
           );
-        })
+        })}
+      {bitmap.flatMap((row, r) =>
+        [...row].map((cell, c) =>
+          cell === "o" ? <circle key={`${r}-${c}`} cx={center(c)} cy={center(r)} r={dotR} /> : null
+        )
       )}
     </svg>
   );
diff --git a/apps/webapp/app/components/primitives/AgentDotMatrix.tsx b/apps/webapp/app/components/primitives/AgentDotMatrix.tsx
index 976d7f25d55..e598f30e8d5 100644
--- a/apps/webapp/app/components/primitives/AgentDotMatrix.tsx
+++ b/apps/webapp/app/components/primitives/AgentDotMatrix.tsx
@@ -25,7 +25,19 @@ import { useThemeMode } from "~/hooks/useThemeMode";
 //   into it. The default playlist is sequenced so every consecutive pair of
 //   shapes shares dots.
 
-const MATRIX = 5;
+export const MATRIX = 5;
+
+/**
+ * The grid geometry every dot in the library shares: a `MATRIX`x`MATRIX` grid, dot
+ * centered per cell, radius 30% of the cell pitch (never below 0.75px). Static icon
+ * variants (e.g. `dotMatrixIcon.tsx`) reuse this so they read as native shape-library
+ * members instead of a different dot system.
+ */
+export function dotMatrixGeometry(size: number) {
+  const pitch = size / MATRIX;
+  const dotR = Math.max(0.75, pitch * 0.3);
+  return { pitch, dotR };
+}
 
 // --- shapes (5-line bitmaps: "o" = dot on) ---------------------------------
 
diff --git a/apps/webapp/app/routes/storybook.ai-agent/route.tsx b/apps/webapp/app/routes/storybook.ai-agent/route.tsx
index cacc751bda8..980bebe8c98 100644
--- a/apps/webapp/app/routes/storybook.ai-agent/route.tsx
+++ b/apps/webapp/app/routes/storybook.ai-agent/route.tsx
@@ -193,13 +193,18 @@ function DotMatrixTab() {
         ))}
       </div>
       <Paragraph variant="small" className="mt-2 -mb-3 max-w-3xl">
-        Action icon candidates — rounded dot-matrix silhouettes, generated from circular/ elliptical
-        bands rather than hand-drawn corners. `currentColor`, same box as any other icon. Not wired
-        into `InvestigateButton.tsx` / `WatchButton.tsx` — comparison only.
+        Action icon candidates — silhouettes on the exact same grid as the shapes above (same
+        `dotMatrixGeometry`, grid always visible, same as "Face options"). Every lit dot sits on a
+        grid node; none off-grid, none resized. `currentColor`, same box as any other icon. Not
+        wired into `InvestigateButton.tsx` / `WatchButton.tsx` — comparison only.
       </Paragraph>
       <div className="flex flex-wrap items-end gap-8 rounded-md border border-grid-bright bg-background-bright px-6 py-5">
         <div className="flex flex-col items-center gap-2">
-          <InvestigateDotIcon className="text-text-bright" style={{ width: 32, height: 32 }} />
+          <InvestigateDotIcon
+            className="text-text-bright"
+            style={{ width: 32, height: 32 }}
+            showGrid
+          />
           <div className="text-[10px] uppercase tracking-wide text-text-dimmed">
             investigate — magnifier
           </div>
@@ -208,17 +213,18 @@ function DotMatrixTab() {
           <InvestigateGlassesDotIcon
             className="text-text-bright"
             style={{ width: 32, height: 32 }}
+            showGrid
           />
           <div className="text-[10px] uppercase tracking-wide text-text-dimmed">
             investigate — glasses
           </div>
         </div>
         <div className="flex flex-col items-center gap-2">
-          <WatchDotIcon className="text-text-bright" style={{ width: 32, height: 32 }} />
+          <WatchDotIcon className="text-text-bright" style={{ width: 32, height: 32 }} showGrid />
           <div className="text-[10px] uppercase tracking-wide text-text-dimmed">watch — eye</div>
         </div>
         <div className="flex flex-col items-center gap-2">
-          <AlertDotIcon className="text-text-bright" style={{ width: 32, height: 32 }} />
+          <AlertDotIcon className="text-text-bright" style={{ width: 32, height: 32 }} showGrid />
           <div className="text-[10px] uppercase tracking-wide text-text-dimmed">alert — bell</div>
         </div>
       </div>

From 308c7d43507157f57968849d2c6eacd895cb4fa3 Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Wed, 26 Aug 2026 16:56:08 +0000
Subject: [PATCH 14/43] feat(webapp): five more Investigate dot-matrix icon
 candidates
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Radar, fingerprint, crosshair, flashlight, sonar ping — same true
MATRIX bitmap contract as the existing four. Grouped with the
magnifier and glasses in the Shape library so all seven compare
side by side.
---
 .../app/assets/icons/CrosshairDotIcon.tsx     | 18 +++++++
 .../app/assets/icons/FingerprintDotIcon.tsx   | 19 +++++++
 .../app/assets/icons/FlashlightDotIcon.tsx    | 19 +++++++
 apps/webapp/app/assets/icons/RadarDotIcon.tsx | 19 +++++++
 apps/webapp/app/assets/icons/SonarDotIcon.tsx | 18 +++++++
 .../app/routes/storybook.ai-agent/route.tsx   | 53 ++++++++++++-------
 6 files changed, 127 insertions(+), 19 deletions(-)
 create mode 100644 apps/webapp/app/assets/icons/CrosshairDotIcon.tsx
 create mode 100644 apps/webapp/app/assets/icons/FingerprintDotIcon.tsx
 create mode 100644 apps/webapp/app/assets/icons/FlashlightDotIcon.tsx
 create mode 100644 apps/webapp/app/assets/icons/RadarDotIcon.tsx
 create mode 100644 apps/webapp/app/assets/icons/SonarDotIcon.tsx

diff --git a/apps/webapp/app/assets/icons/CrosshairDotIcon.tsx b/apps/webapp/app/assets/icons/CrosshairDotIcon.tsx
new file mode 100644
index 00000000000..954dc6655bb
--- /dev/null
+++ b/apps/webapp/app/assets/icons/CrosshairDotIcon.tsx
@@ -0,0 +1,18 @@
+import { DotMatrixIcon } from "./dotMatrixIcon";
+
+// Dot-matrix crosshair variant of Investigate, drawn on the same 5x5 grid as the Shape
+// library: four axis ticks (N/S/E/W) and a center dot, diagonals left empty. For
+// comparison in storybook.ai-agent; not used anywhere in the app.
+const BITMAP = ["..o..", ".....", "o.o.o", ".....", "..o.."];
+
+export function CrosshairDotIcon({
+  className,
+  style,
+  showGrid,
+}: {
+  className?: string;
+  style?: React.CSSProperties;
+  showGrid?: boolean;
+}) {
+  return <DotMatrixIcon bitmap={BITMAP} className={className} style={style} showGrid={showGrid} />;
+}
diff --git a/apps/webapp/app/assets/icons/FingerprintDotIcon.tsx b/apps/webapp/app/assets/icons/FingerprintDotIcon.tsx
new file mode 100644
index 00000000000..a4213512698
--- /dev/null
+++ b/apps/webapp/app/assets/icons/FingerprintDotIcon.tsx
@@ -0,0 +1,19 @@
+import { DotMatrixIcon } from "./dotMatrixIcon";
+
+// Dot-matrix fingerprint variant of Investigate, drawn on the same 5x5 grid as the
+// Shape library: gapped, asymmetric arcs curling from top-left to bottom-right, like
+// fingerprint ridges. For comparison in storybook.ai-agent; not used anywhere in the
+// app.
+const BITMAP = [".ooo.", "o....", "o.o..", "o.o.o", ".o.o."];
+
+export function FingerprintDotIcon({
+  className,
+  style,
+  showGrid,
+}: {
+  className?: string;
+  style?: React.CSSProperties;
+  showGrid?: boolean;
+}) {
+  return <DotMatrixIcon bitmap={BITMAP} className={className} style={style} showGrid={showGrid} />;
+}
diff --git a/apps/webapp/app/assets/icons/FlashlightDotIcon.tsx b/apps/webapp/app/assets/icons/FlashlightDotIcon.tsx
new file mode 100644
index 00000000000..1f888e2345e
--- /dev/null
+++ b/apps/webapp/app/assets/icons/FlashlightDotIcon.tsx
@@ -0,0 +1,19 @@
+import { DotMatrixIcon } from "./dotMatrixIcon";
+
+// Dot-matrix flashlight variant of Investigate, drawn on the same 5x5 grid as the Shape
+// library: a solid body block top-left, and a cone of light spreading and thinning
+// toward the bottom-right (one fewer dot per row out). For comparison in
+// storybook.ai-agent; not used anywhere in the app.
+const BITMAP = ["oo...", "oo.o.", ".o.o.", "..o.o", "...o."];
+
+export function FlashlightDotIcon({
+  className,
+  style,
+  showGrid,
+}: {
+  className?: string;
+  style?: React.CSSProperties;
+  showGrid?: boolean;
+}) {
+  return <DotMatrixIcon bitmap={BITMAP} className={className} style={style} showGrid={showGrid} />;
+}
diff --git a/apps/webapp/app/assets/icons/RadarDotIcon.tsx b/apps/webapp/app/assets/icons/RadarDotIcon.tsx
new file mode 100644
index 00000000000..e2d854a8a09
--- /dev/null
+++ b/apps/webapp/app/assets/icons/RadarDotIcon.tsx
@@ -0,0 +1,19 @@
+import { DotMatrixIcon } from "./dotMatrixIcon";
+
+// Dot-matrix radar variant of Investigate, drawn on the same 5x5 grid as the Shape
+// library: a dotted circle, a sweep line from the center, and one blip dot breaking the
+// ring's symmetry at the sweep's current position. For comparison in
+// storybook.ai-agent; not used anywhere in the app.
+const BITMAP = ["..o..", ".o.o.", "o.o.o", ".o.o.", "..o.o"];
+
+export function RadarDotIcon({
+  className,
+  style,
+  showGrid,
+}: {
+  className?: string;
+  style?: React.CSSProperties;
+  showGrid?: boolean;
+}) {
+  return <DotMatrixIcon bitmap={BITMAP} className={className} style={style} showGrid={showGrid} />;
+}
diff --git a/apps/webapp/app/assets/icons/SonarDotIcon.tsx b/apps/webapp/app/assets/icons/SonarDotIcon.tsx
new file mode 100644
index 00000000000..216759058ad
--- /dev/null
+++ b/apps/webapp/app/assets/icons/SonarDotIcon.tsx
@@ -0,0 +1,18 @@
+import { DotMatrixIcon } from "./dotMatrixIcon";
+
+// Dot-matrix sonar-ping variant of Investigate, drawn on the same 5x5 grid as the Shape
+// library: a center ping dot with two symmetric concentric dotted rings expanding
+// outward. For comparison in storybook.ai-agent; not used anywhere in the app.
+const BITMAP = ["..o..", ".o.o.", "o.o.o", ".o.o.", "..o.."];
+
+export function SonarDotIcon({
+  className,
+  style,
+  showGrid,
+}: {
+  className?: string;
+  style?: React.CSSProperties;
+  showGrid?: boolean;
+}) {
+  return <DotMatrixIcon bitmap={BITMAP} className={className} style={style} showGrid={showGrid} />;
+}
diff --git a/apps/webapp/app/routes/storybook.ai-agent/route.tsx b/apps/webapp/app/routes/storybook.ai-agent/route.tsx
index 980bebe8c98..cffb5258182 100644
--- a/apps/webapp/app/routes/storybook.ai-agent/route.tsx
+++ b/apps/webapp/app/routes/storybook.ai-agent/route.tsx
@@ -1,8 +1,13 @@
 import { ComponentNames } from "../storybook/StoryKit";
 import { type CSSProperties, useEffect, useMemo, useRef, useState } from "react";
 import { AlertDotIcon } from "~/assets/icons/AlertDotIcon";
+import { CrosshairDotIcon } from "~/assets/icons/CrosshairDotIcon";
+import { FingerprintDotIcon } from "~/assets/icons/FingerprintDotIcon";
+import { FlashlightDotIcon } from "~/assets/icons/FlashlightDotIcon";
 import { InvestigateDotIcon } from "~/assets/icons/InvestigateDotIcon";
 import { InvestigateGlassesDotIcon } from "~/assets/icons/InvestigateGlassesDotIcon";
+import { RadarDotIcon } from "~/assets/icons/RadarDotIcon";
+import { SonarDotIcon } from "~/assets/icons/SonarDotIcon";
 import { WatchDotIcon } from "~/assets/icons/WatchDotIcon";
 import { LogoIcon } from "~/components/LogoIcon";
 import { Button, type ButtonVariant } from "~/components/primitives/Buttons";
@@ -37,6 +42,11 @@ export default function Story() {
             "AgentDotMatrix.tsx",
             "InvestigateDotIcon.tsx",
             "InvestigateGlassesDotIcon.tsx",
+            "RadarDotIcon.tsx",
+            "FingerprintDotIcon.tsx",
+            "CrosshairDotIcon.tsx",
+            "FlashlightDotIcon.tsx",
+            "SonarDotIcon.tsx",
             "WatchDotIcon.tsx",
             "AlertDotIcon.tsx",
           ]}
@@ -76,6 +86,13 @@ export default function Story() {
 
 // --- Dot matrix (5x5) ---------------------------------------------------------
 
+/** Any `*DotIcon` component: the shared shape shared by every icon in the candidate lists below. */
+type DotIconComponent = React.ComponentType<{
+  className?: string;
+  style?: CSSProperties;
+  showGrid?: boolean;
+}>;
+
 function DotMatrixTab() {
   return (
     <div className="flex flex-col gap-6 py-6">
@@ -199,26 +216,24 @@ function DotMatrixTab() {
         wired into `InvestigateButton.tsx` / `WatchButton.tsx` — comparison only.
       </Paragraph>
       <div className="flex flex-wrap items-end gap-8 rounded-md border border-grid-bright bg-background-bright px-6 py-5">
-        <div className="flex flex-col items-center gap-2">
-          <InvestigateDotIcon
-            className="text-text-bright"
-            style={{ width: 32, height: 32 }}
-            showGrid
-          />
-          <div className="text-[10px] uppercase tracking-wide text-text-dimmed">
-            investigate — magnifier
-          </div>
-        </div>
-        <div className="flex flex-col items-center gap-2">
-          <InvestigateGlassesDotIcon
-            className="text-text-bright"
-            style={{ width: 32, height: 32 }}
-            showGrid
-          />
-          <div className="text-[10px] uppercase tracking-wide text-text-dimmed">
-            investigate — glasses
+        {(
+          [
+            [InvestigateDotIcon, "investigate — magnifier"],
+            [InvestigateGlassesDotIcon, "investigate — glasses"],
+            [RadarDotIcon, "investigate — radar"],
+            [FingerprintDotIcon, "investigate — fingerprint"],
+            [CrosshairDotIcon, "investigate — crosshair"],
+            [FlashlightDotIcon, "investigate — flashlight"],
+            [SonarDotIcon, "investigate — sonar ping"],
+          ] as [DotIconComponent, string][]
+        ).map(([Icon, label]) => (
+          <div key={label} className="flex flex-col items-center gap-2">
+            <Icon className="text-text-bright" style={{ width: 32, height: 32 }} showGrid />
+            <div className="text-[10px] uppercase tracking-wide text-text-dimmed">{label}</div>
           </div>
-        </div>
+        ))}
+      </div>
+      <div className="flex flex-wrap items-end gap-8 rounded-md border border-grid-bright bg-background-bright px-6 py-5">
         <div className="flex flex-col items-center gap-2">
           <WatchDotIcon className="text-text-bright" style={{ width: 32, height: 32 }} showGrid />
           <div className="text-[10px] uppercase tracking-wide text-text-dimmed">watch — eye</div>

From 597879d3e3cd1d625c70d05e353c222091821ce8 Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Wed, 26 Aug 2026 17:02:45 +0000
Subject: [PATCH 15/43] fix(webapp): replace dot-matrix icon candidates with an
 interactive editor

Remove the nine candidate icon files and their story rows. In their
place: a clickable MATRIXxMATRIX grid (dotMatrixGeometry, 1.5x the
candidates' size) that toggles dots green and reads back as a
MATRIX-line bitmap string. Keeps MATRIX/dotMatrixGeometry in
AgentDotMatrix.tsx; drops the now-unconsumed static icon renderer.
---
 apps/webapp/app/assets/icons/AlertDotIcon.tsx |  18 ---
 .../app/assets/icons/CrosshairDotIcon.tsx     |  18 ---
 .../app/assets/icons/FingerprintDotIcon.tsx   |  19 ---
 .../app/assets/icons/FlashlightDotIcon.tsx    |  19 ---
 .../app/assets/icons/InvestigateDotIcon.tsx   |  19 ---
 .../icons/InvestigateGlassesDotIcon.tsx       |  18 ---
 apps/webapp/app/assets/icons/RadarDotIcon.tsx |  19 ---
 apps/webapp/app/assets/icons/SonarDotIcon.tsx |  18 ---
 apps/webapp/app/assets/icons/WatchDotIcon.tsx |  18 ---
 .../webapp/app/assets/icons/dotMatrixIcon.tsx |  62 ---------
 .../app/routes/storybook.ai-agent/route.tsx   | 121 +++++++++---------
 11 files changed, 61 insertions(+), 288 deletions(-)
 delete mode 100644 apps/webapp/app/assets/icons/AlertDotIcon.tsx
 delete mode 100644 apps/webapp/app/assets/icons/CrosshairDotIcon.tsx
 delete mode 100644 apps/webapp/app/assets/icons/FingerprintDotIcon.tsx
 delete mode 100644 apps/webapp/app/assets/icons/FlashlightDotIcon.tsx
 delete mode 100644 apps/webapp/app/assets/icons/InvestigateDotIcon.tsx
 delete mode 100644 apps/webapp/app/assets/icons/InvestigateGlassesDotIcon.tsx
 delete mode 100644 apps/webapp/app/assets/icons/RadarDotIcon.tsx
 delete mode 100644 apps/webapp/app/assets/icons/SonarDotIcon.tsx
 delete mode 100644 apps/webapp/app/assets/icons/WatchDotIcon.tsx
 delete mode 100644 apps/webapp/app/assets/icons/dotMatrixIcon.tsx

diff --git a/apps/webapp/app/assets/icons/AlertDotIcon.tsx b/apps/webapp/app/assets/icons/AlertDotIcon.tsx
deleted file mode 100644
index 30880dc20c6..00000000000
--- a/apps/webapp/app/assets/icons/AlertDotIcon.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { DotMatrixIcon } from "./dotMatrixIcon";
-
-// Dot-matrix bell variant for the Investigate/Watch comparison set, drawn on the same
-// 5x5 grid as the Shape library: knob, rounded dome sides, flared lip, clapper. For
-// comparison in storybook.ai-agent; not used anywhere in the app.
-const BITMAP = ["..o..", ".ooo.", "o...o", "ooooo", "..o.."];
-
-export function AlertDotIcon({
-  className,
-  style,
-  showGrid,
-}: {
-  className?: string;
-  style?: React.CSSProperties;
-  showGrid?: boolean;
-}) {
-  return <DotMatrixIcon bitmap={BITMAP} className={className} style={style} showGrid={showGrid} />;
-}
diff --git a/apps/webapp/app/assets/icons/CrosshairDotIcon.tsx b/apps/webapp/app/assets/icons/CrosshairDotIcon.tsx
deleted file mode 100644
index 954dc6655bb..00000000000
--- a/apps/webapp/app/assets/icons/CrosshairDotIcon.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { DotMatrixIcon } from "./dotMatrixIcon";
-
-// Dot-matrix crosshair variant of Investigate, drawn on the same 5x5 grid as the Shape
-// library: four axis ticks (N/S/E/W) and a center dot, diagonals left empty. For
-// comparison in storybook.ai-agent; not used anywhere in the app.
-const BITMAP = ["..o..", ".....", "o.o.o", ".....", "..o.."];
-
-export function CrosshairDotIcon({
-  className,
-  style,
-  showGrid,
-}: {
-  className?: string;
-  style?: React.CSSProperties;
-  showGrid?: boolean;
-}) {
-  return <DotMatrixIcon bitmap={BITMAP} className={className} style={style} showGrid={showGrid} />;
-}
diff --git a/apps/webapp/app/assets/icons/FingerprintDotIcon.tsx b/apps/webapp/app/assets/icons/FingerprintDotIcon.tsx
deleted file mode 100644
index a4213512698..00000000000
--- a/apps/webapp/app/assets/icons/FingerprintDotIcon.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { DotMatrixIcon } from "./dotMatrixIcon";
-
-// Dot-matrix fingerprint variant of Investigate, drawn on the same 5x5 grid as the
-// Shape library: gapped, asymmetric arcs curling from top-left to bottom-right, like
-// fingerprint ridges. For comparison in storybook.ai-agent; not used anywhere in the
-// app.
-const BITMAP = [".ooo.", "o....", "o.o..", "o.o.o", ".o.o."];
-
-export function FingerprintDotIcon({
-  className,
-  style,
-  showGrid,
-}: {
-  className?: string;
-  style?: React.CSSProperties;
-  showGrid?: boolean;
-}) {
-  return <DotMatrixIcon bitmap={BITMAP} className={className} style={style} showGrid={showGrid} />;
-}
diff --git a/apps/webapp/app/assets/icons/FlashlightDotIcon.tsx b/apps/webapp/app/assets/icons/FlashlightDotIcon.tsx
deleted file mode 100644
index 1f888e2345e..00000000000
--- a/apps/webapp/app/assets/icons/FlashlightDotIcon.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { DotMatrixIcon } from "./dotMatrixIcon";
-
-// Dot-matrix flashlight variant of Investigate, drawn on the same 5x5 grid as the Shape
-// library: a solid body block top-left, and a cone of light spreading and thinning
-// toward the bottom-right (one fewer dot per row out). For comparison in
-// storybook.ai-agent; not used anywhere in the app.
-const BITMAP = ["oo...", "oo.o.", ".o.o.", "..o.o", "...o."];
-
-export function FlashlightDotIcon({
-  className,
-  style,
-  showGrid,
-}: {
-  className?: string;
-  style?: React.CSSProperties;
-  showGrid?: boolean;
-}) {
-  return <DotMatrixIcon bitmap={BITMAP} className={className} style={style} showGrid={showGrid} />;
-}
diff --git a/apps/webapp/app/assets/icons/InvestigateDotIcon.tsx b/apps/webapp/app/assets/icons/InvestigateDotIcon.tsx
deleted file mode 100644
index 2719932a4a2..00000000000
--- a/apps/webapp/app/assets/icons/InvestigateDotIcon.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { DotMatrixIcon } from "./dotMatrixIcon";
-
-// Dot-matrix variant of the Investigate action's magnifying-glass icon (heroicons
-// `MagnifyingGlassIcon`), drawn on the same 5x5 grid as the Shape library — a rounded
-// ring (the "circle" shape) with one corner extended into a handle stub. For comparison
-// in storybook.ai-agent; not used anywhere in the app.
-const BITMAP = [".ooo.", "o...o", "o...o", "o...o", ".oooo"];
-
-export function InvestigateDotIcon({
-  className,
-  style,
-  showGrid,
-}: {
-  className?: string;
-  style?: React.CSSProperties;
-  showGrid?: boolean;
-}) {
-  return <DotMatrixIcon bitmap={BITMAP} className={className} style={style} showGrid={showGrid} />;
-}
diff --git a/apps/webapp/app/assets/icons/InvestigateGlassesDotIcon.tsx b/apps/webapp/app/assets/icons/InvestigateGlassesDotIcon.tsx
deleted file mode 100644
index 3d4498daeff..00000000000
--- a/apps/webapp/app/assets/icons/InvestigateGlassesDotIcon.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { DotMatrixIcon } from "./dotMatrixIcon";
-
-// Dot-matrix spectacles variant of Investigate, drawn on the same 5x5 grid as the Shape
-// library: two lens blocks with a gap for the bridge. For comparison against the
-// magnifier in storybook.ai-agent; not used anywhere in the app.
-const BITMAP = [".....", "oo.oo", "oo.oo", ".....", "....."];
-
-export function InvestigateGlassesDotIcon({
-  className,
-  style,
-  showGrid,
-}: {
-  className?: string;
-  style?: React.CSSProperties;
-  showGrid?: boolean;
-}) {
-  return <DotMatrixIcon bitmap={BITMAP} className={className} style={style} showGrid={showGrid} />;
-}
diff --git a/apps/webapp/app/assets/icons/RadarDotIcon.tsx b/apps/webapp/app/assets/icons/RadarDotIcon.tsx
deleted file mode 100644
index e2d854a8a09..00000000000
--- a/apps/webapp/app/assets/icons/RadarDotIcon.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { DotMatrixIcon } from "./dotMatrixIcon";
-
-// Dot-matrix radar variant of Investigate, drawn on the same 5x5 grid as the Shape
-// library: a dotted circle, a sweep line from the center, and one blip dot breaking the
-// ring's symmetry at the sweep's current position. For comparison in
-// storybook.ai-agent; not used anywhere in the app.
-const BITMAP = ["..o..", ".o.o.", "o.o.o", ".o.o.", "..o.o"];
-
-export function RadarDotIcon({
-  className,
-  style,
-  showGrid,
-}: {
-  className?: string;
-  style?: React.CSSProperties;
-  showGrid?: boolean;
-}) {
-  return <DotMatrixIcon bitmap={BITMAP} className={className} style={style} showGrid={showGrid} />;
-}
diff --git a/apps/webapp/app/assets/icons/SonarDotIcon.tsx b/apps/webapp/app/assets/icons/SonarDotIcon.tsx
deleted file mode 100644
index 216759058ad..00000000000
--- a/apps/webapp/app/assets/icons/SonarDotIcon.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { DotMatrixIcon } from "./dotMatrixIcon";
-
-// Dot-matrix sonar-ping variant of Investigate, drawn on the same 5x5 grid as the Shape
-// library: a center ping dot with two symmetric concentric dotted rings expanding
-// outward. For comparison in storybook.ai-agent; not used anywhere in the app.
-const BITMAP = ["..o..", ".o.o.", "o.o.o", ".o.o.", "..o.."];
-
-export function SonarDotIcon({
-  className,
-  style,
-  showGrid,
-}: {
-  className?: string;
-  style?: React.CSSProperties;
-  showGrid?: boolean;
-}) {
-  return <DotMatrixIcon bitmap={BITMAP} className={className} style={style} showGrid={showGrid} />;
-}
diff --git a/apps/webapp/app/assets/icons/WatchDotIcon.tsx b/apps/webapp/app/assets/icons/WatchDotIcon.tsx
deleted file mode 100644
index 1f5855eefe8..00000000000
--- a/apps/webapp/app/assets/icons/WatchDotIcon.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { DotMatrixIcon } from "./dotMatrixIcon";
-
-// Dot-matrix variant of the Watch action's eye icon (heroicons `EyeIcon`), drawn on the
-// same 5x5 grid as the Shape library: an outline ring with a pupil dot at center. For
-// comparison in storybook.ai-agent; not used anywhere in the app.
-const BITMAP = [".....", ".ooo.", "o.o.o", ".ooo.", "....."];
-
-export function WatchDotIcon({
-  className,
-  style,
-  showGrid,
-}: {
-  className?: string;
-  style?: React.CSSProperties;
-  showGrid?: boolean;
-}) {
-  return <DotMatrixIcon bitmap={BITMAP} className={className} style={style} showGrid={showGrid} />;
-}
diff --git a/apps/webapp/app/assets/icons/dotMatrixIcon.tsx b/apps/webapp/app/assets/icons/dotMatrixIcon.tsx
deleted file mode 100644
index 1421a981b64..00000000000
--- a/apps/webapp/app/assets/icons/dotMatrixIcon.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { dotMatrixGeometry, MATRIX } from "~/components/primitives/AgentDotMatrix";
-
-/**
- * A silhouette drawn on the exact same grid as the Shape library's `AgentDotMatrix`
- * shapes ("Face options" in storybook.ai-agent): `MATRIX`x`MATRIX` nodes, same pitch,
- * same dot radius (`dotMatrixGeometry`) — every lit dot sits on a grid node, none
- * off-grid, none resized. `currentColor`, so it drops in anywhere a normal icon does.
- * Used by the storybook-only dot-matrix icon variants — not wired into any live UI.
- */
-export function DotMatrixIcon({
-  bitmap,
-  className,
-  style,
-  size = 24,
-  /** Faint always-visible grid, matching "Face options" (`gridAtRest`) at its own default opacity. */
-  showGrid = false,
-  gridOpacity = 0.18,
-}: {
-  /** Exactly `MATRIX` rows of `MATRIX` chars: "o" = lit, "." = off. */
-  bitmap: string[];
-  className?: string;
-  /** `width`/`height` here override `size`, matching how heroicons is usually sized. */
-  style?: React.CSSProperties;
-  size?: number;
-  showGrid?: boolean;
-  gridOpacity?: number;
-}) {
-  const { pitch, dotR } = dotMatrixGeometry(size);
-  const center = (i: number) => i * pitch + pitch / 2;
-
-  return (
-    <svg
-      className={className}
-      style={style}
-      width={size}
-      height={size}
-      viewBox={`0 0 ${size} ${size}`}
-      fill="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      {showGrid &&
-        Array.from({ length: MATRIX * MATRIX }, (_, i) => {
-          const r = Math.floor(i / MATRIX);
-          const c = i % MATRIX;
-          return (
-            <circle
-              key={`ghost-${r}-${c}`}
-              cx={center(c)}
-              cy={center(r)}
-              r={dotR}
-              opacity={gridOpacity}
-            />
-          );
-        })}
-      {bitmap.flatMap((row, r) =>
-        [...row].map((cell, c) =>
-          cell === "o" ? <circle key={`${r}-${c}`} cx={center(c)} cy={center(r)} r={dotR} /> : null
-        )
-      )}
-    </svg>
-  );
-}
diff --git a/apps/webapp/app/routes/storybook.ai-agent/route.tsx b/apps/webapp/app/routes/storybook.ai-agent/route.tsx
index cffb5258182..a30c13e4ca4 100644
--- a/apps/webapp/app/routes/storybook.ai-agent/route.tsx
+++ b/apps/webapp/app/routes/storybook.ai-agent/route.tsx
@@ -1,14 +1,5 @@
 import { ComponentNames } from "../storybook/StoryKit";
 import { type CSSProperties, useEffect, useMemo, useRef, useState } from "react";
-import { AlertDotIcon } from "~/assets/icons/AlertDotIcon";
-import { CrosshairDotIcon } from "~/assets/icons/CrosshairDotIcon";
-import { FingerprintDotIcon } from "~/assets/icons/FingerprintDotIcon";
-import { FlashlightDotIcon } from "~/assets/icons/FlashlightDotIcon";
-import { InvestigateDotIcon } from "~/assets/icons/InvestigateDotIcon";
-import { InvestigateGlassesDotIcon } from "~/assets/icons/InvestigateGlassesDotIcon";
-import { RadarDotIcon } from "~/assets/icons/RadarDotIcon";
-import { SonarDotIcon } from "~/assets/icons/SonarDotIcon";
-import { WatchDotIcon } from "~/assets/icons/WatchDotIcon";
 import { LogoIcon } from "~/components/LogoIcon";
 import { Button, type ButtonVariant } from "~/components/primitives/Buttons";
 import {
@@ -22,13 +13,16 @@ import { Paragraph } from "~/components/primitives/Paragraph";
 import {
   AgentDotMatrix,
   AgentMonoLogo,
+  dotMatrixGeometry,
   DOT_MATRIX_PALETTES,
   DOT_SHAPES,
   EXTRA_FACE_SHAPES,
   FACE_SHAPES,
+  MATRIX,
   type DotMatrixPaletteName,
   type DotShapeName,
 } from "~/components/primitives/AgentDotMatrix";
+import { cn } from "~/utils/cn";
 
 // Experiments for the trigger.dev AI dashboard-agent identity: a resting logo
 // that animates while the agent thinks. Each tab is a separate experiment.
@@ -37,20 +31,7 @@ export default function Story() {
   return (
     <div className="flex flex-col gap-4 p-6">
       <div className="px-4 pt-4">
-        <ComponentNames
-          names={[
-            "AgentDotMatrix.tsx",
-            "InvestigateDotIcon.tsx",
-            "InvestigateGlassesDotIcon.tsx",
-            "RadarDotIcon.tsx",
-            "FingerprintDotIcon.tsx",
-            "CrosshairDotIcon.tsx",
-            "FlashlightDotIcon.tsx",
-            "SonarDotIcon.tsx",
-            "WatchDotIcon.tsx",
-            "AlertDotIcon.tsx",
-          ]}
-        />
+        <ComponentNames names={["AgentDotMatrix.tsx"]} />
       </div>
       <div className="flex max-w-3xl flex-col gap-1">
         <Header1>Trigger Agent — Icons & Buttons</Header1>
@@ -86,13 +67,6 @@ export default function Story() {
 
 // --- Dot matrix (5x5) ---------------------------------------------------------
 
-/** Any `*DotIcon` component: the shared shape shared by every icon in the candidate lists below. */
-type DotIconComponent = React.ComponentType<{
-  className?: string;
-  style?: CSSProperties;
-  showGrid?: boolean;
-}>;
-
 function DotMatrixTab() {
   return (
     <div className="flex flex-col gap-6 py-6">
@@ -210,43 +184,70 @@ function DotMatrixTab() {
         ))}
       </div>
       <Paragraph variant="small" className="mt-2 -mb-3 max-w-3xl">
-        Action icon candidates — silhouettes on the exact same grid as the shapes above (same
-        `dotMatrixGeometry`, grid always visible, same as "Face options"). Every lit dot sits on a
-        grid node; none off-grid, none resized. `currentColor`, same box as any other icon. Not
-        wired into `InvestigateButton.tsx` / `WatchButton.tsx` — comparison only.
+        Icon editor — same grid as the shapes above (`dotMatrixGeometry`, `MATRIX`x`MATRIX`), at
+        1.5x the size the candidates were shown at. Click a dot to toggle it; the bitmap below reads
+        back as a `MATRIX`-line string, ready to paste into a shape definition.
       </Paragraph>
       <div className="flex flex-wrap items-end gap-8 rounded-md border border-grid-bright bg-background-bright px-6 py-5">
-        {(
-          [
-            [InvestigateDotIcon, "investigate — magnifier"],
-            [InvestigateGlassesDotIcon, "investigate — glasses"],
-            [RadarDotIcon, "investigate — radar"],
-            [FingerprintDotIcon, "investigate — fingerprint"],
-            [CrosshairDotIcon, "investigate — crosshair"],
-            [FlashlightDotIcon, "investigate — flashlight"],
-            [SonarDotIcon, "investigate — sonar ping"],
-          ] as [DotIconComponent, string][]
-        ).map(([Icon, label]) => (
-          <div key={label} className="flex flex-col items-center gap-2">
-            <Icon className="text-text-bright" style={{ width: 32, height: 32 }} showGrid />
-            <div className="text-[10px] uppercase tracking-wide text-text-dimmed">{label}</div>
-          </div>
-        ))}
-      </div>
-      <div className="flex flex-wrap items-end gap-8 rounded-md border border-grid-bright bg-background-bright px-6 py-5">
-        <div className="flex flex-col items-center gap-2">
-          <WatchDotIcon className="text-text-bright" style={{ width: 32, height: 32 }} showGrid />
-          <div className="text-[10px] uppercase tracking-wide text-text-dimmed">watch — eye</div>
-        </div>
-        <div className="flex flex-col items-center gap-2">
-          <AlertDotIcon className="text-text-bright" style={{ width: 32, height: 32 }} showGrid />
-          <div className="text-[10px] uppercase tracking-wide text-text-dimmed">alert — bell</div>
-        </div>
+        <DotGridEditor />
       </div>
     </div>
   );
 }
 
+// 1.5x the 32px candidate icons this replaced.
+const EDITOR_SIZE = 48;
+
+/** Interactive `MATRIX`x`MATRIX` grid: click a dot to toggle it on (accent) or off (ghost). */
+function DotGridEditor() {
+  const [lit, setLit] = useState<boolean[]>(() => new Array(MATRIX * MATRIX).fill(false));
+  const { pitch, dotR } = dotMatrixGeometry(EDITOR_SIZE);
+  const center = (i: number) => i * pitch + pitch / 2;
+
+  const toggle = (index: number) => {
+    setLit((current) => current.map((value, i) => (i === index ? !value : value)));
+  };
+
+  const rows = useMemo(
+    () =>
+      Array.from({ length: MATRIX }, (_, r) =>
+        Array.from({ length: MATRIX }, (_, c) => (lit[r * MATRIX + c] ? "#" : ".")).join("")
+      ),
+    [lit]
+  );
+
+  return (
+    <div className="flex flex-col items-start gap-2">
+      <svg
+        width={EDITOR_SIZE}
+        height={EDITOR_SIZE}
+        viewBox={`0 0 ${EDITOR_SIZE} ${EDITOR_SIZE}`}
+        className="rounded-md border border-grid-bright"
+      >
+        {lit.map((isLit, i) => {
+          const r = Math.floor(i / MATRIX);
+          const c = i % MATRIX;
+          return (
+            <circle
+              key={i}
+              cx={center(c)}
+              cy={center(r)}
+              r={dotR}
+              fill="currentColor"
+              opacity={isLit ? 1 : 0.25}
+              className={cn("cursor-pointer", isLit ? "text-success" : "text-text-dimmed")}
+              onClick={() => toggle(i)}
+            />
+          );
+        })}
+      </svg>
+      <pre className="rounded border border-grid-bright bg-charcoal-900 px-2 py-1 font-mono text-[10px] leading-tight text-text-dimmed">
+        {rows.join("\n")}
+      </pre>
+    </div>
+  );
+}
+
 function AskTriggerButton({ variant, matrixSize }: { variant: ButtonVariant; matrixSize: number }) {
   const [active, setActive] = useState(false);
   const timeout = useRef<ReturnType<typeof setTimeout>>();

From cb9f4785b662246136cd6d461800ed09e720bdcb Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Wed, 26 Aug 2026 17:27:41 +0000
Subject: [PATCH 16/43] feat(webapp): render the owner's 10 drawn dot-matrix
 icon bitmaps

One generic DotGrid component (shared with the editor) renders each
as a numbered row, editor size and 20px, ghost-grid style. #2/#5 are
an intentional duplicate pair.
---
 .../app/routes/storybook.ai-agent/route.tsx   | 115 ++++++++++++++----
 1 file changed, 90 insertions(+), 25 deletions(-)

diff --git a/apps/webapp/app/routes/storybook.ai-agent/route.tsx b/apps/webapp/app/routes/storybook.ai-agent/route.tsx
index a30c13e4ca4..28fc03c4bec 100644
--- a/apps/webapp/app/routes/storybook.ai-agent/route.tsx
+++ b/apps/webapp/app/routes/storybook.ai-agent/route.tsx
@@ -191,18 +191,69 @@ function DotMatrixTab() {
       <div className="flex flex-wrap items-end gap-8 rounded-md border border-grid-bright bg-background-bright px-6 py-5">
         <DotGridEditor />
       </div>
+      <Paragraph variant="small" className="mt-2 -mb-3 max-w-3xl">
+        Owner-drawn candidates, exactly as given — editor size and {CANDIDATE_SMALL_SIZE}px, so
+        legibility at icon size is judgeable. #2 and #5 are identical (an A/B pair).
+      </Paragraph>
+      <OwnerBitmapsRow />
     </div>
   );
 }
 
 // 1.5x the 32px candidate icons this replaced.
 const EDITOR_SIZE = 48;
+// Within the 16-24px range action icons render at.
+const CANDIDATE_SMALL_SIZE = 20;
+
+/**
+ * Renders a flat `MATRIX * MATRIX` lit/unlit array on the shared grid geometry —
+ * `dotMatrixGeometry`, so pitch and dot radius always match the Shape library above.
+ * Shared by the interactive editor (`onToggle`) and the static owner-bitmap previews.
+ */
+function DotGrid({
+  lit,
+  size,
+  litClassName = "text-success",
+  onToggle,
+}: {
+  lit: boolean[];
+  size: number;
+  litClassName?: string;
+  onToggle?: (index: number) => void;
+}) {
+  const { pitch, dotR } = dotMatrixGeometry(size);
+  const center = (i: number) => i * pitch + pitch / 2;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox={`0 0 ${size} ${size}`}
+      className="rounded-md border border-grid-bright"
+    >
+      {lit.map((isLit, i) => {
+        const r = Math.floor(i / MATRIX);
+        const c = i % MATRIX;
+        return (
+          <circle
+            key={i}
+            cx={center(c)}
+            cy={center(r)}
+            r={dotR}
+            fill="currentColor"
+            opacity={isLit ? 1 : 0.25}
+            className={cn(onToggle && "cursor-pointer", isLit ? litClassName : "text-text-dimmed")}
+            onClick={onToggle ? () => onToggle(i) : undefined}
+          />
+        );
+      })}
+    </svg>
+  );
+}
 
 /** Interactive `MATRIX`x`MATRIX` grid: click a dot to toggle it on (accent) or off (ghost). */
 function DotGridEditor() {
   const [lit, setLit] = useState<boolean[]>(() => new Array(MATRIX * MATRIX).fill(false));
-  const { pitch, dotR } = dotMatrixGeometry(EDITOR_SIZE);
-  const center = (i: number) => i * pitch + pitch / 2;
 
   const toggle = (index: number) => {
     setLit((current) => current.map((value, i) => (i === index ? !value : value)));
@@ -218,29 +269,7 @@ function DotGridEditor() {
 
   return (
     <div className="flex flex-col items-start gap-2">
-      <svg
-        width={EDITOR_SIZE}
-        height={EDITOR_SIZE}
-        viewBox={`0 0 ${EDITOR_SIZE} ${EDITOR_SIZE}`}
-        className="rounded-md border border-grid-bright"
-      >
-        {lit.map((isLit, i) => {
-          const r = Math.floor(i / MATRIX);
-          const c = i % MATRIX;
-          return (
-            <circle
-              key={i}
-              cx={center(c)}
-              cy={center(r)}
-              r={dotR}
-              fill="currentColor"
-              opacity={isLit ? 1 : 0.25}
-              className={cn("cursor-pointer", isLit ? "text-success" : "text-text-dimmed")}
-              onClick={() => toggle(i)}
-            />
-          );
-        })}
-      </svg>
+      <DotGrid lit={lit} size={EDITOR_SIZE} onToggle={toggle} />
       <pre className="rounded border border-grid-bright bg-charcoal-900 px-2 py-1 font-mono text-[10px] leading-tight text-text-dimmed">
         {rows.join("\n")}
       </pre>
@@ -248,6 +277,42 @@ function DotGridEditor() {
   );
 }
 
+function bitmapToLit(bitmap: string[]): boolean[] {
+  return bitmap.flatMap((row) => [...row].map((cell) => cell === "#"));
+}
+
+// Owner-drawn in the editor above, 5-line `MATRIX` bitmaps, exactly as given.
+const OWNER_BITMAPS: { id: number; bitmap: string[] }[] = [
+  { id: 1, bitmap: ["#.#.#", ".#.#.", "#...#", ".#.#.", "#.#.#"] },
+  { id: 2, bitmap: [".###.", "#####", "#.#.#", ".###.", "....."] },
+  { id: 3, bitmap: [".....", ".###.", "#.#.#", ".###.", "....."] },
+  { id: 4, bitmap: ["..#..", ".###.", "##.##", ".###.", "..#.."] },
+  // Same as #2 — the owner may be A/B-ing it; rendered anyway.
+  { id: 5, bitmap: [".###.", "#####", "#.#.#", ".###.", "....."] },
+  { id: 6, bitmap: [".###.", "#.#.#", "#####", "#.#.#", ".###."] },
+  { id: 7, bitmap: ["..#..", "..#..", "##.##", "..#..", "..#.."] },
+  { id: 8, bitmap: [".###.", "#...#", "#...#", "#####", "..#.."] },
+  { id: 9, bitmap: [".###.", "#####", "#.#.#", "#####", "..#.."] },
+  { id: 10, bitmap: [".###.", "#####", "#####", "..#..", "..#.."] },
+];
+
+function OwnerBitmapsRow() {
+  return (
+    <div className="flex flex-wrap items-end gap-8 rounded-md border border-grid-bright bg-background-bright px-6 py-5">
+      {OWNER_BITMAPS.map(({ id, bitmap }) => {
+        const lit = bitmapToLit(bitmap);
+        return (
+          <div key={id} className="flex flex-col items-end gap-2">
+            <DotGrid lit={lit} size={EDITOR_SIZE} litClassName="text-text-bright" />
+            <DotGrid lit={lit} size={CANDIDATE_SMALL_SIZE} litClassName="text-text-bright" />
+            <div className="text-[10px] uppercase tracking-wide text-text-dimmed">#{id}</div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
 function AskTriggerButton({ variant, matrixSize }: { variant: ButtonVariant; matrixSize: number }) {
   const [active, setActive] = useState(false);
   const timeout = useRef<ReturnType<typeof setTimeout>>();

From 1b644e723377651fcfb00114891dbd9819f89ff9 Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Wed, 26 Aug 2026 17:37:53 +0000
Subject: [PATCH 17/43] fix(webapp): Investigate/Watch surfaces use the Ask
 Trigger glyph; drop editor's owner-bitmap row

Every feature surface (buttons, suggested prompts, chat history
status, watch card, watch result block) now renders AgentMonoLogo
instead of the heroicons magnifier/eye, matching the Ask Trigger nav
button. Unrelated magnifiers/eyes (search inputs, admin search,
password-visibility toggles) are untouched.

storybook.ai-agent: remove the owner-drawn candidates row and the
editor's description text; the interactive editor stays.
---
 .../dashboard-agent/DashboardAgentHistory.tsx |  5 +-
 .../DashboardAgentSuggestedPrompts.tsx        |  7 ++-
 .../dashboard-agent/InvestigateButton.tsx     |  5 +-
 .../dashboard-agent/WatchButton.tsx           |  5 +-
 .../components/dashboard-agent/WatchCard.tsx  |  4 +-
 .../dashboard-agent/WatchResultBlock.tsx      | 26 +++++-----
 .../app/routes/storybook.ai-agent/route.tsx   | 48 -------------------
 7 files changed, 27 insertions(+), 73 deletions(-)

diff --git a/apps/webapp/app/components/dashboard-agent/DashboardAgentHistory.tsx b/apps/webapp/app/components/dashboard-agent/DashboardAgentHistory.tsx
index 3bc84c16938..424d17bd581 100644
--- a/apps/webapp/app/components/dashboard-agent/DashboardAgentHistory.tsx
+++ b/apps/webapp/app/components/dashboard-agent/DashboardAgentHistory.tsx
@@ -1,5 +1,6 @@
-import { MagnifyingGlassIcon, TrashIcon } from "@heroicons/react/20/solid";
+import { TrashIcon } from "@heroicons/react/20/solid";
 import { formatDurationMilliseconds } from "@trigger.dev/core/v3/utils/durations";
+import { AgentMonoLogo } from "~/components/primitives/AgentDotMatrix";
 import { Button } from "~/components/primitives/Buttons";
 import { Dialog, DialogContent, DialogHeader } from "~/components/primitives/Dialog";
 import { FormButtons } from "~/components/primitives/FormButtons";
@@ -42,7 +43,7 @@ function ProcessIcon({ process }: { process: ChatProcess }) {
   return (
     <span title={label} aria-label={label} role="img" className="shrink-0 text-text-dimmed">
       {process === "investigating" ? (
-        <MagnifyingGlassIcon className="size-3.5" />
+        <AgentMonoLogo size={14} decorative />
       ) : (
         <AgentSpinner size={14} />
       )}
diff --git a/apps/webapp/app/components/dashboard-agent/DashboardAgentSuggestedPrompts.tsx b/apps/webapp/app/components/dashboard-agent/DashboardAgentSuggestedPrompts.tsx
index 4892352356f..6045c4476c7 100644
--- a/apps/webapp/app/components/dashboard-agent/DashboardAgentSuggestedPrompts.tsx
+++ b/apps/webapp/app/components/dashboard-agent/DashboardAgentSuggestedPrompts.tsx
@@ -1,13 +1,12 @@
 import {
   BookOpenIcon,
   ChartBarIcon,
-  EyeIcon,
-  MagnifyingGlassIcon,
   QuestionMarkCircleIcon,
   SparklesIcon,
 } from "@heroicons/react/20/solid";
 import type { AgentPageContext, SuggestedPrompt } from "@internal/dashboard-agent-contracts";
 import { useMemo, useState } from "react";
+import { AgentMonoLogo } from "~/components/primitives/AgentDotMatrix";
 import { Button, type ButtonVariant } from "~/components/primitives/Buttons";
 import type { RenderIcon } from "~/components/primitives/Icon";
 import {
@@ -20,8 +19,8 @@ import {
 const PROMPT_SLOT_BUTTON: Record<ResolvedPromptSlot, { variant: ButtonVariant; icon: RenderIcon }> =
   {
     promoted: { variant: "primary/small", icon: SparklesIcon },
-    investigate: { variant: "primary/small", icon: MagnifyingGlassIcon },
-    watch: { variant: "secondary/small", icon: EyeIcon },
+    investigate: { variant: "primary/small", icon: <AgentMonoLogo size={16} decorative /> },
+    watch: { variant: "secondary/small", icon: <AgentMonoLogo size={16} decorative /> },
     status: { variant: "secondary/small", icon: ChartBarIcon },
     explain: { variant: "tertiary/small", icon: QuestionMarkCircleIcon },
     docs: { variant: "docs/small", icon: BookOpenIcon },
diff --git a/apps/webapp/app/components/dashboard-agent/InvestigateButton.tsx b/apps/webapp/app/components/dashboard-agent/InvestigateButton.tsx
index f109941af5d..b134b60844c 100644
--- a/apps/webapp/app/components/dashboard-agent/InvestigateButton.tsx
+++ b/apps/webapp/app/components/dashboard-agent/InvestigateButton.tsx
@@ -1,4 +1,4 @@
-import { MagnifyingGlassIcon } from "@heroicons/react/20/solid";
+import { AgentMonoLogo } from "~/components/primitives/AgentDotMatrix";
 import { Button } from "~/components/primitives/Buttons";
 import { useDashboardAgent } from "./dashboardAgentLauncher";
 
@@ -30,8 +30,7 @@ export function InvestigateButton({
     <Button
       type="button"
       variant={`${variant}/${size}`}
-      LeadingIcon={MagnifyingGlassIcon}
-      leadingIconClassName={variant === "primary" ? undefined : "text-text-dimmed"}
+      LeadingIcon={<AgentMonoLogo size={16} decorative />}
       fullWidth={fullWidth}
       textAlignLeft={fullWidth}
       className={className}
diff --git a/apps/webapp/app/components/dashboard-agent/WatchButton.tsx b/apps/webapp/app/components/dashboard-agent/WatchButton.tsx
index 25b000cd656..100d9ecb975 100644
--- a/apps/webapp/app/components/dashboard-agent/WatchButton.tsx
+++ b/apps/webapp/app/components/dashboard-agent/WatchButton.tsx
@@ -1,5 +1,5 @@
-import { EyeIcon } from "@heroicons/react/20/solid";
 import type { WatchSpec } from "@internal/dashboard-agent-contracts";
+import { AgentMonoLogo } from "~/components/primitives/AgentDotMatrix";
 import { Button } from "~/components/primitives/Buttons";
 import { useDashboardAgent } from "./dashboardAgentLauncher";
 import { watchTooltipLabel } from "~/presenters/v3/dashboardAgent";
@@ -31,8 +31,7 @@ export function WatchButton({
     <Button
       type="button"
       variant={`${variant}/${size}`}
-      LeadingIcon={EyeIcon}
-      leadingIconClassName={variant === "primary" ? undefined : "text-text-dimmed"}
+      LeadingIcon={<AgentMonoLogo size={16} decorative />}
       fullWidth={fullWidth}
       textAlignLeft={fullWidth}
       className={className}
diff --git a/apps/webapp/app/components/dashboard-agent/WatchCard.tsx b/apps/webapp/app/components/dashboard-agent/WatchCard.tsx
index e395dcecf10..365a47ee2f3 100644
--- a/apps/webapp/app/components/dashboard-agent/WatchCard.tsx
+++ b/apps/webapp/app/components/dashboard-agent/WatchCard.tsx
@@ -10,7 +10,6 @@
  * Pure component: draft in, markup and callbacks out. Draft rules live in
  * `watch-card.ts` and wording in `app/presenters/v3/dashboardAgent`.
  */
-import { EyeIcon } from "@heroicons/react/20/solid";
 import {
   WATCH_WINDOW_HOURS_OPTIONS,
   watchCadenceOptions,
@@ -18,6 +17,7 @@ import {
   type WatchKind,
 } from "@internal/dashboard-agent-contracts";
 import { useId, useState } from "react";
+import { AgentMonoLogo } from "~/components/primitives/AgentDotMatrix";
 import { Button } from "~/components/primitives/Buttons";
 import { Checkbox } from "~/components/primitives/Checkbox";
 import { Input } from "~/components/primitives/Input";
@@ -167,7 +167,7 @@ export function WatchCard({
   return (
     <ChatSystemBlock
       label="Watch"
-      icon={<EyeIcon className="size-3.5 shrink-0 text-text-dimmed" />}
+      icon={<AgentMonoLogo size={14} decorative />}
       actions={
         <>
           {/* One confirm, expanded or not: an expanded card is submitted as shown. */}
diff --git a/apps/webapp/app/components/dashboard-agent/WatchResultBlock.tsx b/apps/webapp/app/components/dashboard-agent/WatchResultBlock.tsx
index 551a9683ef5..bb9f208c8e1 100644
--- a/apps/webapp/app/components/dashboard-agent/WatchResultBlock.tsx
+++ b/apps/webapp/app/components/dashboard-agent/WatchResultBlock.tsx
@@ -10,31 +10,35 @@
  * append time by `app/presenters/v3/dashboardAgent`, so a later copy change never rewrites what
  * a user was already told.
  */
-import { CheckCircleIcon, EyeIcon, InformationCircleIcon } from "@heroicons/react/20/solid";
+import { CheckCircleIcon, InformationCircleIcon } from "@heroicons/react/20/solid";
 import type { WatchResultBlock as WatchResultBlockPayload } from "@internal/dashboard-agent-contracts";
+import { AgentMonoLogo } from "~/components/primitives/AgentDotMatrix";
 import { ChatSystemBlock } from "./chat-layout";
 import { TONE_ICON_COLOR } from "./agent-badges";
 import { cn } from "~/utils/cn";
 
 /**
  * Icon and label per outcome. A confirmation is not a success (nothing has happened
- * yet) so it wears the neutral eye; the check belongs to the one-shot that did
- * answer the question.
+ * yet) so it wears the neutral Ask Trigger glyph; the check belongs to the one-shot
+ * that did answer the question.
  */
 const OUTCOME = {
-  watching: { label: "Watch", Icon: EyeIcon, tone: "neutral" },
-  already_true: { label: "Watch", Icon: CheckCircleIcon, tone: "success" },
-  impossible: { label: "Watch", Icon: InformationCircleIcon, tone: "neutral" },
+  watching: { label: "Watch", icon: <AgentMonoLogo size={14} decorative /> },
+  already_true: {
+    label: "Watch",
+    icon: <CheckCircleIcon className={cn("size-3.5 shrink-0", TONE_ICON_COLOR.success)} />,
+  },
+  impossible: {
+    label: "Watch",
+    icon: <InformationCircleIcon className={cn("size-3.5 shrink-0", TONE_ICON_COLOR.neutral)} />,
+  },
 } as const;
 
 export function WatchResultBlock({ block }: { block: WatchResultBlockPayload }) {
-  const { label, Icon, tone } = OUTCOME[block.outcome] ?? OUTCOME.watching;
+  const { label, icon } = OUTCOME[block.outcome] ?? OUTCOME.watching;
 
   return (
-    <ChatSystemBlock
-      label={label}
-      icon={<Icon className={cn("size-3.5 shrink-0", TONE_ICON_COLOR[tone])} />}
-    >
+    <ChatSystemBlock label={label} icon={icon}>
       <p className="text-sm text-text-bright">{block.headline}</p>
       {block.lifetime ? <p className="text-xs text-text-dimmed">{block.lifetime}</p> : null}
       {block.detail ? <p className="text-xs text-text-dimmed">{block.detail}</p> : null}
diff --git a/apps/webapp/app/routes/storybook.ai-agent/route.tsx b/apps/webapp/app/routes/storybook.ai-agent/route.tsx
index 28fc03c4bec..1eb17a8a949 100644
--- a/apps/webapp/app/routes/storybook.ai-agent/route.tsx
+++ b/apps/webapp/app/routes/storybook.ai-agent/route.tsx
@@ -183,27 +183,15 @@ function DotMatrixTab() {
           </div>
         ))}
       </div>
-      <Paragraph variant="small" className="mt-2 -mb-3 max-w-3xl">
-        Icon editor — same grid as the shapes above (`dotMatrixGeometry`, `MATRIX`x`MATRIX`), at
-        1.5x the size the candidates were shown at. Click a dot to toggle it; the bitmap below reads
-        back as a `MATRIX`-line string, ready to paste into a shape definition.
-      </Paragraph>
       <div className="flex flex-wrap items-end gap-8 rounded-md border border-grid-bright bg-background-bright px-6 py-5">
         <DotGridEditor />
       </div>
-      <Paragraph variant="small" className="mt-2 -mb-3 max-w-3xl">
-        Owner-drawn candidates, exactly as given — editor size and {CANDIDATE_SMALL_SIZE}px, so
-        legibility at icon size is judgeable. #2 and #5 are identical (an A/B pair).
-      </Paragraph>
-      <OwnerBitmapsRow />
     </div>
   );
 }
 
 // 1.5x the 32px candidate icons this replaced.
 const EDITOR_SIZE = 48;
-// Within the 16-24px range action icons render at.
-const CANDIDATE_SMALL_SIZE = 20;
 
 /**
  * Renders a flat `MATRIX * MATRIX` lit/unlit array on the shared grid geometry —
@@ -277,42 +265,6 @@ function DotGridEditor() {
   );
 }
 
-function bitmapToLit(bitmap: string[]): boolean[] {
-  return bitmap.flatMap((row) => [...row].map((cell) => cell === "#"));
-}
-
-// Owner-drawn in the editor above, 5-line `MATRIX` bitmaps, exactly as given.
-const OWNER_BITMAPS: { id: number; bitmap: string[] }[] = [
-  { id: 1, bitmap: ["#.#.#", ".#.#.", "#...#", ".#.#.", "#.#.#"] },
-  { id: 2, bitmap: [".###.", "#####", "#.#.#", ".###.", "....."] },
-  { id: 3, bitmap: [".....", ".###.", "#.#.#", ".###.", "....."] },
-  { id: 4, bitmap: ["..#..", ".###.", "##.##", ".###.", "..#.."] },
-  // Same as #2 — the owner may be A/B-ing it; rendered anyway.
-  { id: 5, bitmap: [".###.", "#####", "#.#.#", ".###.", "....."] },
-  { id: 6, bitmap: [".###.", "#.#.#", "#####", "#.#.#", ".###."] },
-  { id: 7, bitmap: ["..#..", "..#..", "##.##", "..#..", "..#.."] },
-  { id: 8, bitmap: [".###.", "#...#", "#...#", "#####", "..#.."] },
-  { id: 9, bitmap: [".###.", "#####", "#.#.#", "#####", "..#.."] },
-  { id: 10, bitmap: [".###.", "#####", "#####", "..#..", "..#.."] },
-];
-
-function OwnerBitmapsRow() {
-  return (
-    <div className="flex flex-wrap items-end gap-8 rounded-md border border-grid-bright bg-background-bright px-6 py-5">
-      {OWNER_BITMAPS.map(({ id, bitmap }) => {
-        const lit = bitmapToLit(bitmap);
-        return (
-          <div key={id} className="flex flex-col items-end gap-2">
-            <DotGrid lit={lit} size={EDITOR_SIZE} litClassName="text-text-bright" />
-            <DotGrid lit={lit} size={CANDIDATE_SMALL_SIZE} litClassName="text-text-bright" />
-            <div className="text-[10px] uppercase tracking-wide text-text-dimmed">#{id}</div>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
 function AskTriggerButton({ variant, matrixSize }: { variant: ButtonVariant; matrixSize: number }) {
   const [active, setActive] = useState(false);
   const timeout = useRef<ReturnType<typeof setTimeout>>();

From aed73d567594d853c96499ff8ae1760b418b9ade Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Wed, 26 Aug 2026 17:44:18 +0000
Subject: [PATCH 18/43] fix(webapp): live watch result block uses the chat
 spinner, not a static glyph
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

WatchResultBlock's "watching" outcome (a watch just created and still
live) now shows AgentSpinner — the same animated dot-matrix spinner
the chat uses while thinking, and what WatchChips already shows for
an active watch. The one-shot terminal outcomes keep their icons.
---
 .../components/dashboard-agent/WatchResultBlock.tsx    | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/webapp/app/components/dashboard-agent/WatchResultBlock.tsx b/apps/webapp/app/components/dashboard-agent/WatchResultBlock.tsx
index bb9f208c8e1..309f674f3ee 100644
--- a/apps/webapp/app/components/dashboard-agent/WatchResultBlock.tsx
+++ b/apps/webapp/app/components/dashboard-agent/WatchResultBlock.tsx
@@ -12,18 +12,18 @@
  */
 import { CheckCircleIcon, InformationCircleIcon } from "@heroicons/react/20/solid";
 import type { WatchResultBlock as WatchResultBlockPayload } from "@internal/dashboard-agent-contracts";
-import { AgentMonoLogo } from "~/components/primitives/AgentDotMatrix";
+import { AgentSpinner } from "~/components/primitives/Spinner";
 import { ChatSystemBlock } from "./chat-layout";
 import { TONE_ICON_COLOR } from "./agent-badges";
 import { cn } from "~/utils/cn";
 
 /**
- * Icon and label per outcome. A confirmation is not a success (nothing has happened
- * yet) so it wears the neutral Ask Trigger glyph; the check belongs to the one-shot
- * that did answer the question.
+ * Icon and label per outcome. `watching` is a live watch, still running — same
+ * spinner the chat uses while the agent is responding, not a static glyph. The
+ * one-shot outcomes are terminal (nothing left to watch), so they keep their icons.
  */
 const OUTCOME = {
-  watching: { label: "Watch", icon: <AgentMonoLogo size={14} decorative /> },
+  watching: { label: "Watch", icon: <AgentSpinner size={14} /> },
   already_true: {
     label: "Watch",
     icon: <CheckCircleIcon className={cn("size-3.5 shrink-0", TONE_ICON_COLOR.success)} />,

From 73d0dde7ab932f51c12ddb36dfd08acfbeeaa8f7 Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Wed, 26 Aug 2026 17:56:36 +0000
Subject: [PATCH 19/43] fix(webapp): revert Investigate/Watch icons to original
 inside the chat panel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Ask Trigger glyph swap stays only outside the chat window
(InvestigateButton, WatchButton — page CTAs that open the chat).
Surfaces rendered inside the panel tree revert to their original
icons: suggested-prompt chips, chat history's investigating status,
and the watch draft card header. The active-watch spinner in
WatchResultBlock is untouched.
---
 .../components/dashboard-agent/DashboardAgentHistory.tsx   | 5 ++---
 .../dashboard-agent/DashboardAgentSuggestedPrompts.tsx     | 7 ++++---
 apps/webapp/app/components/dashboard-agent/WatchCard.tsx   | 4 ++--
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/webapp/app/components/dashboard-agent/DashboardAgentHistory.tsx b/apps/webapp/app/components/dashboard-agent/DashboardAgentHistory.tsx
index 424d17bd581..3bc84c16938 100644
--- a/apps/webapp/app/components/dashboard-agent/DashboardAgentHistory.tsx
+++ b/apps/webapp/app/components/dashboard-agent/DashboardAgentHistory.tsx
@@ -1,6 +1,5 @@
-import { TrashIcon } from "@heroicons/react/20/solid";
+import { MagnifyingGlassIcon, TrashIcon } from "@heroicons/react/20/solid";
 import { formatDurationMilliseconds } from "@trigger.dev/core/v3/utils/durations";
-import { AgentMonoLogo } from "~/components/primitives/AgentDotMatrix";
 import { Button } from "~/components/primitives/Buttons";
 import { Dialog, DialogContent, DialogHeader } from "~/components/primitives/Dialog";
 import { FormButtons } from "~/components/primitives/FormButtons";
@@ -43,7 +42,7 @@ function ProcessIcon({ process }: { process: ChatProcess }) {
   return (
     <span title={label} aria-label={label} role="img" className="shrink-0 text-text-dimmed">
       {process === "investigating" ? (
-        <AgentMonoLogo size={14} decorative />
+        <MagnifyingGlassIcon className="size-3.5" />
       ) : (
         <AgentSpinner size={14} />
       )}
diff --git a/apps/webapp/app/components/dashboard-agent/DashboardAgentSuggestedPrompts.tsx b/apps/webapp/app/components/dashboard-agent/DashboardAgentSuggestedPrompts.tsx
index 6045c4476c7..4892352356f 100644
--- a/apps/webapp/app/components/dashboard-agent/DashboardAgentSuggestedPrompts.tsx
+++ b/apps/webapp/app/components/dashboard-agent/DashboardAgentSuggestedPrompts.tsx
@@ -1,12 +1,13 @@
 import {
   BookOpenIcon,
   ChartBarIcon,
+  EyeIcon,
+  MagnifyingGlassIcon,
   QuestionMarkCircleIcon,
   SparklesIcon,
 } from "@heroicons/react/20/solid";
 import type { AgentPageContext, SuggestedPrompt } from "@internal/dashboard-agent-contracts";
 import { useMemo, useState } from "react";
-import { AgentMonoLogo } from "~/components/primitives/AgentDotMatrix";
 import { Button, type ButtonVariant } from "~/components/primitives/Buttons";
 import type { RenderIcon } from "~/components/primitives/Icon";
 import {
@@ -19,8 +20,8 @@ import {
 const PROMPT_SLOT_BUTTON: Record<ResolvedPromptSlot, { variant: ButtonVariant; icon: RenderIcon }> =
   {
     promoted: { variant: "primary/small", icon: SparklesIcon },
-    investigate: { variant: "primary/small", icon: <AgentMonoLogo size={16} decorative /> },
-    watch: { variant: "secondary/small", icon: <AgentMonoLogo size={16} decorative /> },
+    investigate: { variant: "primary/small", icon: MagnifyingGlassIcon },
+    watch: { variant: "secondary/small", icon: EyeIcon },
     status: { variant: "secondary/small", icon: ChartBarIcon },
     explain: { variant: "tertiary/small", icon: QuestionMarkCircleIcon },
     docs: { variant: "docs/small", icon: BookOpenIcon },
diff --git a/apps/webapp/app/components/dashboard-agent/WatchCard.tsx b/apps/webapp/app/components/dashboard-agent/WatchCard.tsx
index 365a47ee2f3..e395dcecf10 100644
--- a/apps/webapp/app/components/dashboard-agent/WatchCard.tsx
+++ b/apps/webapp/app/components/dashboard-agent/WatchCard.tsx
@@ -10,6 +10,7 @@
  * Pure component: draft in, markup and callbacks out. Draft rules live in
  * `watch-card.ts` and wording in `app/presenters/v3/dashboardAgent`.
  */
+import { EyeIcon } from "@heroicons/react/20/solid";
 import {
   WATCH_WINDOW_HOURS_OPTIONS,
   watchCadenceOptions,
@@ -17,7 +18,6 @@ import {
   type WatchKind,
 } from "@internal/dashboard-agent-contracts";
 import { useId, useState } from "react";
-import { AgentMonoLogo } from "~/components/primitives/AgentDotMatrix";
 import { Button } from "~/components/primitives/Buttons";
 import { Checkbox } from "~/components/primitives/Checkbox";
 import { Input } from "~/components/primitives/Input";
@@ -167,7 +167,7 @@ export function WatchCard({
   return (
     <ChatSystemBlock
       label="Watch"
-      icon={<AgentMonoLogo size={14} decorative />}
+      icon={<EyeIcon className="size-3.5 shrink-0 text-text-dimmed" />}
       actions={
         <>
           {/* One confirm, expanded or not: an expanded card is submitted as shown. */}

From 4474a858caf59e9743e3bd9919c0ddd387a6dfe3 Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Wed, 26 Aug 2026 18:32:17 +0000
Subject: [PATCH 20/43] docs(webapp): add server-changes note for the floating
 chat window

---
 .server-changes/floating-chat-window.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .server-changes/floating-chat-window.md

diff --git a/.server-changes/floating-chat-window.md b/.server-changes/floating-chat-window.md
new file mode 100644
index 00000000000..b7e32aeb9ed
--- /dev/null
+++ b/.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.

From 144767470e31fde43a2b2d62cc988ee2597a82f6 Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Wed, 26 Aug 2026 18:54:25 +0000
Subject: [PATCH 21/43] fix(webapp): trim verbose comments; drag/resize gate
 fixes; kill duplicate floating-window demo

Comment sweep: cap every survivor at two sentences, drop what-comments
and a stale dotMatrixIcon.tsx reference, across panel-layout,
DraggableResizable, draggableResizableMath, WatchResultBlock and the
storybook routes.

Gate fixes from cross-model review:
- resizeRect: minSize now wins over a viewport-derived cap smaller
  than it, for all four resize directions (+4 tests).
- Header drag no longer engages when a gesture starts on a button/
  link/input inside it.
- Fullscreen (no dragHandleProps.onPan) no longer applies drag cursor
  classes or local pan-state handlers.
- Ask Trigger's "Close chat" tooltip drops the new-chat shortcut key.
- Resize handles no longer get clipped by the window's
  overflow-hidden (moved to an inner content wrapper).
- Drag handle gets touch-action:none so touch drags don't fight
  scrolling.
- Dot-grid editor dots are keyboard-operable (role=button, Enter/
  Space toggles).
- storybook.dashboard-agent-floating: mount-gates the demo window
  (avoids an SSR/client position mismatch) and resets fullscreen on
  every close path.
- New panel-layout.dom.test.ts: initialFloatingRect against a stubbed
  viewport, and a hook-level render proving the rect (and the minSize
  fix) survive the real wiring.

Remove the "Floating window" section from storybook.agent-ui: the
standalone storybook.dashboard-agent-floating route is the one
floating-window demo going forward.
---
 .../dashboard-agent/DashboardAgentPanel.tsx   | 52 ++++++++--
 .../dashboard-agent/WatchResultBlock.tsx      |  6 +-
 .../dashboardAgentLauncher.tsx                | 12 ++-
 .../dashboard-agent/panel-layout.dom.test.ts  | 97 +++++++++++++++++++
 .../dashboard-agent/panel-layout.tsx          | 25 +++--
 .../components/primitives/AgentDotMatrix.tsx  |  7 +-
 .../primitives/DraggableResizable.dom.test.ts | 13 +--
 .../primitives/DraggableResizable.tsx         | 10 +-
 .../primitives/draggableResizableMath.test.ts | 46 ++++++---
 .../primitives/draggableResizableMath.ts      | 31 +++---
 .../app/routes/storybook.agent-ui/manifest.ts |  8 --
 .../app/routes/storybook.agent-ui/route.tsx   | 84 +---------------
 .../app/routes/storybook.ai-agent/route.tsx   | 24 +++--
 .../route.tsx                                 | 27 ++++--
 14 files changed, 256 insertions(+), 186 deletions(-)
 create mode 100644 apps/webapp/app/components/dashboard-agent/panel-layout.dom.test.ts

diff --git a/apps/webapp/app/components/dashboard-agent/DashboardAgentPanel.tsx b/apps/webapp/app/components/dashboard-agent/DashboardAgentPanel.tsx
index 462d1dd16f5..88a5405ae24 100644
--- a/apps/webapp/app/components/dashboard-agent/DashboardAgentPanel.tsx
+++ b/apps/webapp/app/components/dashboard-agent/DashboardAgentPanel.tsx
@@ -135,6 +135,10 @@ export function DashboardAgentPanel({
   );
   // Cursor feedback only; the drag itself is handled by `dragHandleProps`.
   const [draggingWindow, setDraggingWindow] = useState(false);
+  // Fullscreen passes no drag handlers at all (an empty object), so pan wiring is a no-op there.
+  const isDraggable = !!dragHandleProps?.onPan;
+  // Set when a gesture starts on a header button/link, so its onPan steps are dropped too.
+  const ignoringGesture = useRef(false);
 
   const currentPage = agentPageLabel(pageContext, location.pathname);
 
@@ -614,15 +618,45 @@ export function DashboardAgentPanel({
     >
       <motion.div
         {...dragHandleProps}
-        onPanStart={(event, info) => {
-          setDraggingWindow(true);
-          dragHandleProps?.onPanStart?.(event, info);
-        }}
-        onPanEnd={(event, info) => {
-          setDraggingWindow(false);
-          dragHandleProps?.onPanEnd?.(event, info);
-        }}
-        className={cn("select-none", draggingWindow ? "cursor-grabbing" : "cursor-grab")}
+        onPanStart={
+          isDraggable
+            ? (event, info) => {
+                // Buttons/links inside the header (history, new chat, expand, close) sit
+                // above the drag handle; a click there must not move the window.
+                if (
+                  (event.target as HTMLElement | null)?.closest("button, a, input, [role=button]")
+                ) {
+                  ignoringGesture.current = true;
+                  return;
+                }
+                ignoringGesture.current = false;
+                setDraggingWindow(true);
+                dragHandleProps?.onPanStart?.(event, info);
+              }
+            : undefined
+        }
+        onPan={
+          isDraggable
+            ? (event, info) => {
+                if (ignoringGesture.current) return;
+                dragHandleProps?.onPan?.(event, info);
+              }
+            : undefined
+        }
+        onPanEnd={
+          isDraggable
+            ? (event, info) => {
+                ignoringGesture.current = false;
+                setDraggingWindow(false);
+                dragHandleProps?.onPanEnd?.(event, info);
+              }
+            : undefined
+        }
+        className={cn(
+          "select-none",
+          isDraggable && "touch-none",
+          isDraggable && (draggingWindow ? "cursor-grabbing" : "cursor-grab")
+        )}
       >
         <DashboardAgentHeader
           title={headerTitle}
diff --git a/apps/webapp/app/components/dashboard-agent/WatchResultBlock.tsx b/apps/webapp/app/components/dashboard-agent/WatchResultBlock.tsx
index 309f674f3ee..6b8f9abe907 100644
--- a/apps/webapp/app/components/dashboard-agent/WatchResultBlock.tsx
+++ b/apps/webapp/app/components/dashboard-agent/WatchResultBlock.tsx
@@ -17,11 +17,7 @@ import { ChatSystemBlock } from "./chat-layout";
 import { TONE_ICON_COLOR } from "./agent-badges";
 import { cn } from "~/utils/cn";
 
-/**
- * Icon and label per outcome. `watching` is a live watch, still running — same
- * spinner the chat uses while the agent is responding, not a static glyph. The
- * one-shot outcomes are terminal (nothing left to watch), so they keep their icons.
- */
+/** `watching` is a live watch, so it gets the chat's spinner; the terminal outcomes keep static icons. */
 const OUTCOME = {
   watching: { label: "Watch", icon: <AgentSpinner size={14} /> },
   already_true: {
diff --git a/apps/webapp/app/components/dashboard-agent/dashboardAgentLauncher.tsx b/apps/webapp/app/components/dashboard-agent/dashboardAgentLauncher.tsx
index d3fb7bf1f01..64a0379f784 100644
--- a/apps/webapp/app/components/dashboard-agent/dashboardAgentLauncher.tsx
+++ b/apps/webapp/app/components/dashboard-agent/dashboardAgentLauncher.tsx
@@ -56,10 +56,14 @@ export function DashboardAgentLauncher() {
       tabbable
       disableHoverableContent
       content={
-        <span className="flex items-center">
-          {open ? "Close chat" : "Open chat"}
-          <ShortcutKey shortcut={TOGGLE_PANEL_SHORTCUT} variant="medium" />
-        </span>
+        open ? (
+          "Close chat"
+        ) : (
+          <span className="flex items-center">
+            Open chat
+            <ShortcutKey shortcut={TOGGLE_PANEL_SHORTCUT} variant="medium" />
+          </span>
+        )
       }
       button={
         <span className="relative inline-flex shrink-0">
diff --git a/apps/webapp/app/components/dashboard-agent/panel-layout.dom.test.ts b/apps/webapp/app/components/dashboard-agent/panel-layout.dom.test.ts
new file mode 100644
index 00000000000..ea8adddffb8
--- /dev/null
+++ b/apps/webapp/app/components/dashboard-agent/panel-layout.dom.test.ts
@@ -0,0 +1,97 @@
+// @vitest-environment jsdom
+import { createElement } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { act } from "react-dom/test-utils";
+import { afterEach, describe, expect, it } from "vitest";
+import type { PanInfo } from "framer-motion";
+import { useDraggableResizable } from "~/components/primitives/DraggableResizable";
+import {
+  FLOATING_HEIGHT,
+  FLOATING_MARGIN,
+  FLOATING_MIN_SIZE,
+  FLOATING_WIDTH,
+  initialFloatingRect,
+} from "./panel-layout";
+
+let container: HTMLDivElement | undefined;
+let root: Root | undefined;
+
+afterEach(() => {
+  if (root) {
+    act(() => root!.unmount());
+  }
+  container?.remove();
+  container = undefined;
+  root = undefined;
+});
+
+function stubViewport(width: number, height: number) {
+  Object.defineProperty(window, "innerWidth", { value: width, configurable: true });
+  Object.defineProperty(window, "innerHeight", { value: height, configurable: true });
+}
+
+describe("initialFloatingRect", () => {
+  it("docks bottom-right, sized to FLOATING_WIDTH/HEIGHT, padded by FLOATING_MARGIN", () => {
+    stubViewport(1200, 900);
+    expect(initialFloatingRect()).toEqual({
+      x: 1200 - FLOATING_WIDTH - FLOATING_MARGIN,
+      y: 900 - FLOATING_HEIGHT - FLOATING_MARGIN,
+      w: FLOATING_WIDTH,
+      h: FLOATING_HEIGHT,
+    });
+  });
+});
+
+// Same render-hook pattern as DraggableResizable.dom.test.ts.
+function renderDraggableResizable() {
+  let latest!: ReturnType<typeof useDraggableResizable>;
+  function Harness() {
+    // oxlint-disable-next-line react/globals -- test harness capturing the hook's return value.
+    latest = useDraggableResizable({
+      initial: initialFloatingRect(),
+      minSize: FLOATING_MIN_SIZE,
+      viewportPadding: FLOATING_MARGIN,
+    });
+    return null;
+  }
+  container = document.createElement("div");
+  document.body.appendChild(container);
+  root = createRoot(container);
+  act(() => {
+    root!.render(createElement(Harness));
+  });
+  return {
+    get current() {
+      return latest;
+    },
+  };
+}
+
+const fakeEvent = {} as PointerEvent;
+function fakePanInfo(dx: number, dy: number): PanInfo {
+  return {
+    delta: { x: dx, y: dy },
+    offset: { x: dx, y: dy },
+    point: { x: 0, y: 0 },
+    velocity: { x: 0, y: 0 },
+  };
+}
+
+describe("the floating window's rect, wired with panel-layout's own constants", () => {
+  it("renders at initialFloatingRect's position and size", () => {
+    stubViewport(1200, 900);
+    const hook = renderDraggableResizable();
+    expect(hook.current.position).toEqual({
+      x: 1200 - FLOATING_WIDTH - FLOATING_MARGIN,
+      y: 900 - FLOATING_HEIGHT - FLOATING_MARGIN,
+    });
+    expect(hook.current.size).toEqual({ w: FLOATING_WIDTH, h: FLOATING_HEIGHT });
+  });
+
+  it("never shrinks below FLOATING_MIN_SIZE even against a viewport smaller than it", () => {
+    stubViewport(300, 300);
+    const hook = renderDraggableResizable();
+    act(() => hook.current.resizeHandleProps("e").onPan(fakeEvent, fakePanInfo(0, 0)));
+    expect(hook.current.size.w).toBe(FLOATING_MIN_SIZE.w);
+  });
+});
diff --git a/apps/webapp/app/components/dashboard-agent/panel-layout.tsx b/apps/webapp/app/components/dashboard-agent/panel-layout.tsx
index 11eca0e46cb..b391d9cb006 100644
--- a/apps/webapp/app/components/dashboard-agent/panel-layout.tsx
+++ b/apps/webapp/app/components/dashboard-agent/panel-layout.tsx
@@ -13,13 +13,13 @@ import { cn } from "~/utils/cn";
 const AGENT_FULLSCREEN_STORAGE_KEY = "tdev:dashboard-agent:fullscreen";
 
 // V1 floating window: 380x512, bottom-right, matching the gallery's own panel frame.
-const FLOATING_WIDTH = 380;
-const FLOATING_HEIGHT = 512;
-const FLOATING_MARGIN = 16;
-const FLOATING_MIN_SIZE = { w: 320, h: 360 };
+export const FLOATING_WIDTH = 380;
+export const FLOATING_HEIGHT = 512;
+export const FLOATING_MARGIN = 16;
+export const FLOATING_MIN_SIZE = { w: 320, h: 360 };
 const RESIZE_EDGES: ResizeEdge[] = ["n", "e", "s", "w", "ne", "nw", "se", "sw"];
 
-function initialFloatingRect() {
+export function initialFloatingRect() {
   if (typeof window === "undefined") {
     return { x: 0, y: 0, w: FLOATING_WIDTH, h: FLOATING_HEIGHT };
   }
@@ -59,12 +59,7 @@ export function agentHiddenContentClassName(fullscreen: boolean): string {
   return cn("h-full overflow-hidden", fullscreen && "invisible");
 }
 
-/**
- * The floating chat window: `useDraggableResizable`-positioned bottom-right, draggable
- * and resizable across the whole page. Fullscreen swaps it back to the same takeover the
- * old right-column mode used, which needs `children` positioned inside a `relative`
- * ancestor — the caller (`DashboardAgent`) supplies that.
- */
+/** Fullscreen needs a `relative` ancestor for `agentTakeoverClassName`; the caller (`DashboardAgent`) supplies it. */
 export function FloatingAgentWindow({
   fullscreen,
   children,
@@ -86,9 +81,13 @@ export function FloatingAgentWindow({
   return (
     <div
       style={style}
-      className="z-20 flex flex-col overflow-hidden rounded-lg border border-border-bright bg-background-bright shadow-2xl"
+      className="z-20 flex flex-col rounded-lg border border-border-bright bg-background-bright shadow-2xl"
     >
-      {children(dragHandleProps)}
+      {/* 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">
+        {children(dragHandleProps)}
+      </div>
       {RESIZE_EDGES.map((edge) => (
         <motion.div
           key={edge}
diff --git a/apps/webapp/app/components/primitives/AgentDotMatrix.tsx b/apps/webapp/app/components/primitives/AgentDotMatrix.tsx
index e598f30e8d5..caf0533d1e6 100644
--- a/apps/webapp/app/components/primitives/AgentDotMatrix.tsx
+++ b/apps/webapp/app/components/primitives/AgentDotMatrix.tsx
@@ -27,12 +27,7 @@ import { useThemeMode } from "~/hooks/useThemeMode";
 
 export const MATRIX = 5;
 
-/**
- * The grid geometry every dot in the library shares: a `MATRIX`x`MATRIX` grid, dot
- * centered per cell, radius 30% of the cell pitch (never below 0.75px). Static icon
- * variants (e.g. `dotMatrixIcon.tsx`) reuse this so they read as native shape-library
- * members instead of a different dot system.
- */
+/** Shared so anything else drawing on this grid stays visually identical to the shape library. */
 export function dotMatrixGeometry(size: number) {
   const pitch = size / MATRIX;
   const dotR = Math.max(0.75, pitch * 0.3);
diff --git a/apps/webapp/app/components/primitives/DraggableResizable.dom.test.ts b/apps/webapp/app/components/primitives/DraggableResizable.dom.test.ts
index 426af1477cc..2a2f42f47d1 100644
--- a/apps/webapp/app/components/primitives/DraggableResizable.dom.test.ts
+++ b/apps/webapp/app/components/primitives/DraggableResizable.dom.test.ts
@@ -1,14 +1,9 @@
 // @vitest-environment jsdom
 //
-// Drives the hook's own handlers in framer-motion's *real* callback order, not the
-// pure math functions: framer-motion defers onPanStart/onPanEnd by a frame (its internal
-// scheduler) while onPan fires synchronously, so a real gesture can deliver one or more
-// onPan events before the onPanStart for that same gesture lands. A startRectRef-based
-// implementation resets its baseline to the *already-moved* rect when the late onPanStart
-// finally fires, corrupting every subsequent onPan in the gesture. This file proves the
-// hook survives that ordering; draggableResizableMath.test.ts's pure-function tests can't,
-// since they call the (already-fixed) math directly and have no callback ordering to get
-// wrong.
+// Framer-motion can deliver onPan before onPanStart for the same gesture (its scheduler
+// defers onPanStart by a frame); a start-rect-ref implementation would corrupt its
+// baseline when the late onPanStart lands. This drives the hook's real handlers to prove
+// it survives that ordering, unlike the pure-math tests in draggableResizableMath.test.ts.
 import { createElement } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { act } from "react-dom/test-utils";
diff --git a/apps/webapp/app/components/primitives/DraggableResizable.tsx b/apps/webapp/app/components/primitives/DraggableResizable.tsx
index 7531eb7dc61..eddcb06dd31 100644
--- a/apps/webapp/app/components/primitives/DraggableResizable.tsx
+++ b/apps/webapp/app/components/primitives/DraggableResizable.tsx
@@ -75,12 +75,10 @@ export function useDraggableResizable({
     return () => window.removeEventListener("resize", onResize);
   }, [viewportPadding]);
 
-  // Each onPan step folds `info.delta` (movement since the *last* event, not cumulative)
-  // onto the latest committed rect via the functional setState form. No gesture-start
-  // snapshot is kept: framer-motion defers onPanStart/onPanEnd by a frame but calls onPan
-  // synchronously, so a ref-based baseline captured in onPanStart can still be stale (or
-  // the mount-time initial rect) when the first onPan of a gesture lands. Delta + functional
-  // update has no baseline to go stale, so gestures compose correctly back-to-back.
+  // Each onPan step folds `info.delta` onto the latest committed rect via functional
+  // setState, with no gesture-start baseline kept: framer-motion can deliver onPan before
+  // onPanStart (its scheduler defers onPanStart by a frame), which would make a ref-based
+  // baseline stale.
   const dragHandleProps: PanHandlerProps = {
     onPanStart: () => {},
     onPan: (_event, info: PanInfo) => {
diff --git a/apps/webapp/app/components/primitives/draggableResizableMath.test.ts b/apps/webapp/app/components/primitives/draggableResizableMath.test.ts
index b44c6d6d4c2..c0f7ecf0490 100644
--- a/apps/webapp/app/components/primitives/draggableResizableMath.test.ts
+++ b/apps/webapp/app/components/primitives/draggableResizableMath.test.ts
@@ -195,14 +195,38 @@ describe("resizeRect", () => {
   });
 });
 
-// These reproduce the live-testing symptoms: framer-motion defers onPanStart/onPanEnd by a
-// frame (via its internal scheduler) but calls onPan synchronously, so a gesture-start
-// snapshot captured in onPanStart can be stale — or still the mount-time initial rect — when
-// a gesture's first onPan lands. applyDragDelta/applyResizeDelta take framer's per-event
-// `delta` (not the cumulative `offset`) and fold it onto whatever rect is passed in, so the
-// hook can drive them with `setRect(current => apply...(current, ...))` and never needs a
-// separate baseline that could go stale. Simulating "gesture A steps, then gesture B steps,
-// no reset in between" is exactly what a stale-baseline bug would fail on.
+describe("resizeRect — minSize wins over a viewport-derived cap smaller than it", () => {
+  const minSize = { w: 320, h: 360 };
+
+  it("east: a narrow viewport still floors width at minSize.w", () => {
+    const start = { x: 100, y: 50, w: 300, h: 400 };
+    const viewport = { width: 350, height: 800 };
+    expect(resizeRect("e", start, 1000, 0, minSize, undefined, viewport, 16).w).toBe(320);
+  });
+
+  it("south: a short viewport still floors height at minSize.h", () => {
+    const start = { x: 50, y: 100, w: 400, h: 300 };
+    const viewport = { width: 800, height: 400 };
+    expect(resizeRect("s", start, 0, 1000, minSize, undefined, viewport, 16).h).toBe(360);
+  });
+
+  it("west: a small fixed right edge still floors width at minSize.w", () => {
+    const start = { x: 10, y: 50, w: 50, h: 400 };
+    const viewport = { width: 1000, height: 800 };
+    expect(resizeRect("w", start, -1000, 0, minSize, undefined, viewport, 16).w).toBe(320);
+  });
+
+  it("north: a small fixed bottom edge still floors height at minSize.h", () => {
+    const start = { x: 50, y: 10, w: 400, h: 50 };
+    const viewport = { width: 1000, height: 800 };
+    expect(resizeRect("n", start, 0, -1000, minSize, undefined, viewport, 16).h).toBe(360);
+  });
+});
+
+// These reproduce the live-testing symptoms: framer-motion can deliver a gesture's first
+// onPan before its onPanStart, so a baseline captured in onPanStart can be stale.
+// applyDragDelta/applyResizeDelta avoid that by folding framer's per-event `delta` onto
+// whatever rect is passed in, with no baseline to go stale.
 describe("applyResizeDelta / applyDragDelta — gesture sequencing", () => {
   const start: Rect = { x: 100, y: 100, w: 300, h: 200 };
   const minSize = { w: 100, h: 80 };
@@ -248,10 +272,8 @@ describe("applyResizeDelta / applyDragDelta — gesture sequencing", () => {
     let rect = applyDragDelta(start, { x: 200, y: 150 }, viewport, padding);
     expect(rect).toEqual({ x: 300, y: 250, w: 300, h: 200 });
 
-    // Resizing next must clamp against the *current* x/y (300, 250), not `start` (100, 100)
-    // or any other stale baseline — a stale baseline pinned near the right edge would show
-    // up here as the box jumping back toward x=690 (the viewport-clamped position for `start`
-    // near the right edge) instead of resizing in place.
+    // Resize must clamp against the current x/y (300, 250), not `start` — a stale baseline
+    // would show up as x jumping back toward 690, the viewport-clamped position near the edge.
     rect = applyResizeDelta("e", rect, { x: 10, y: 0 }, minSize, undefined, viewport, padding);
     expect(rect.x).toBe(300);
     expect(rect.w).toBe(310);
diff --git a/apps/webapp/app/components/primitives/draggableResizableMath.ts b/apps/webapp/app/components/primitives/draggableResizableMath.ts
index 42e8ad22f2e..5668b6e9803 100644
--- a/apps/webapp/app/components/primitives/draggableResizableMath.ts
+++ b/apps/webapp/app/components/primitives/draggableResizableMath.ts
@@ -60,21 +60,29 @@ export function resizeRect(
 ): Rect {
   let { x, y, w, h } = start;
 
+  // `minSize` wins over the viewport cap: a tiny viewport must not shrink the box
+  // below its minimum, so every per-edge cap is floored at the matching min dimension.
   if (edge.includes("e")) {
-    const maxW = Math.min(maxSize?.w ?? Infinity, viewport.width - padding - start.x);
+    const maxW = Math.max(
+      minSize.w,
+      Math.min(maxSize?.w ?? Infinity, viewport.width - padding - start.x)
+    );
     w = clamp(start.w + dx, minSize.w, maxW);
   }
   if (edge.includes("s")) {
-    const maxH = Math.min(maxSize?.h ?? Infinity, viewport.height - padding - start.y);
+    const maxH = Math.max(
+      minSize.h,
+      Math.min(maxSize?.h ?? Infinity, viewport.height - padding - start.y)
+    );
     h = clamp(start.h + dy, minSize.h, maxH);
   }
   if (edge.includes("w")) {
-    const maxW = Math.min(maxSize?.w ?? Infinity, start.x + start.w - padding);
+    const maxW = Math.max(minSize.w, Math.min(maxSize?.w ?? Infinity, start.x + start.w - padding));
     w = clamp(start.w - dx, minSize.w, maxW);
     x = start.x + (start.w - w);
   }
   if (edge.includes("n")) {
-    const maxH = Math.min(maxSize?.h ?? Infinity, start.y + start.h - padding);
+    const maxH = Math.max(minSize.h, Math.min(maxSize?.h ?? Infinity, start.y + start.h - padding));
     h = clamp(start.h - dy, minSize.h, maxH);
     y = start.y + (start.h - h);
   }
@@ -83,17 +91,10 @@ export function resizeRect(
 }
 
 /**
- * Applies one incremental pan step (framer-motion's `PanInfo.delta` — the movement since
- * the *previous* event, not cumulative from gesture start) to `current` and re-clamps.
- *
- * Deliberately incremental rather than start-snapshot + cumulative-offset: framer-motion
- * defers `onPanStart`/`onPanEnd` by a frame (via its internal scheduler) while `onPan`
- * fires synchronously, so a start-rect ref captured in `onPanStart` can still hold a
- * stale (or the mount-time initial) value when the gesture's first `onPan` lands — every
- * later step then computes off the wrong baseline. Folding each step onto `current`
- * (always the latest committed rect, via React's functional `setState`) has no baseline
- * to go stale, so the race can't happen. Safe to call across gesture boundaries with no
- * reset in between — each call is self-contained.
+ * Applies one incremental pan step (framer's per-event `delta`, not cumulative `offset`)
+ * to `current` and re-clamps. Incremental rather than start-snapshot-based because
+ * framer-motion can deliver a gesture's first `onPan` before its `onPanStart`, which
+ * would leave a snapshot baseline stale.
  */
 export function applyDragDelta(
   current: Rect,
diff --git a/apps/webapp/app/routes/storybook.agent-ui/manifest.ts b/apps/webapp/app/routes/storybook.agent-ui/manifest.ts
index 9ca21a46ec9..bb99835f1b0 100644
--- a/apps/webapp/app/routes/storybook.agent-ui/manifest.ts
+++ b/apps/webapp/app/routes/storybook.agent-ui/manifest.ts
@@ -55,7 +55,6 @@ export type GalleryGroup =
   | "watches"
   | "watch-card"
   | "wakes"
-  | "shell"
   | "hero"
   | "prompts"
   | "intents"
@@ -70,7 +69,6 @@ export type GallerySection = {
 };
 
 export const GALLERY_GROUPS: { group: GalleryGroup; page: GalleryPageId; label: string }[] = [
-  { group: "shell", page: "chat", label: "Floating window" },
   { group: "hero", page: "chat", label: "Blank-state hero" },
   { group: "prompts", page: "chat", label: "Suggested prompts" },
   { group: "messages", page: "chat", label: "Message-level states" },
@@ -88,12 +86,6 @@ export const GALLERY_GROUPS: { group: GalleryGroup; page: GalleryPageId; label:
 ];
 
 export const MANIFEST: GallerySection[] = [
-  {
-    sectionId: "shell-floating-window",
-    title: "Draggable, resizable — the default and only chat mode",
-    group: "shell",
-  },
-
   {
     sectionId: "hero-panel",
     title: "Floating window content (380px) — no page context",
diff --git a/apps/webapp/app/routes/storybook.agent-ui/route.tsx b/apps/webapp/app/routes/storybook.agent-ui/route.tsx
index 3ac8a72871b..b1b2b732464 100644
--- a/apps/webapp/app/routes/storybook.agent-ui/route.tsx
+++ b/apps/webapp/app/routes/storybook.agent-ui/route.tsx
@@ -1,96 +1,21 @@
 import type { UIMessage } from "@ai-sdk/react";
 import type { AgentPageContext, SuggestedPrompt } from "@internal/dashboard-agent-contracts";
-import { useLocation } from "@remix-run/react";
-import { motion } from "framer-motion";
-import { useEffect, useRef, useState } from "react";
+import { useState } from "react";
 import { demoFixtures, DemoIntentBubble } from "~/components/dashboard-agent/demo";
-import {
-  ChatProgress,
-  ChatText,
-  ChatTranscript,
-  ChatTurn,
-} from "~/components/dashboard-agent/chat-layout";
+import { ChatProgress, ChatTranscript, ChatTurn } from "~/components/dashboard-agent/chat-layout";
 import { DashboardAgentComposer } from "~/components/dashboard-agent/DashboardAgentComposer";
 import { DashboardAgentContextBanner } from "~/components/dashboard-agent/DashboardAgentContextBanner";
-import { DashboardAgentHeader } from "~/components/dashboard-agent/DashboardAgentHeader";
-import type { DashboardAgentChat } from "~/components/dashboard-agent/DashboardAgentHistory";
 import { DashboardAgentHero } from "~/components/dashboard-agent/DashboardAgentHero";
 import { DashboardAgentMessages } from "~/components/dashboard-agent/DashboardAgentMessages";
 import { DashboardAgentSuggestedPrompts } from "~/components/dashboard-agent/DashboardAgentSuggestedPrompts";
-import { AgentPanelColumn, FloatingAgentWindow } from "~/components/dashboard-agent/panel-layout";
+import { AgentPanelColumn } from "~/components/dashboard-agent/panel-layout";
 import { liveProgress } from "~/components/dashboard-agent/progress-line";
 import type { WakeWatch } from "~/components/dashboard-agent/WakeBanner";
 import { WatchChips, type WatchChip } from "~/components/dashboard-agent/WatchChips";
-import { Button } from "~/components/primitives/Buttons";
 import { cn } from "~/utils/cn";
 import { demoTranscripts, investigationBlock, type DemoTranscript } from "./fixtures";
 import { fixtureResolveUri, GalleryPage, noop, PANEL_FRAME } from "./gallery";
 
-const NO_CHATS: DashboardAgentChat[] = [];
-
-/**
- * The dashboard agent's default (and only) mode: a floating window docked bottom-right,
- * draggable across the whole page and resizable by its edges and corners. Toggled open
- * here so the section demos the live shell, not a screenshot of it.
- */
-function FloatingWindowHarness() {
-  const [open, setOpen] = useState(true);
-  const [fullscreen, setFullscreen] = useState(false);
-
-  // Storybook only: the demo window must not follow you to another story. The real
-  // dashboard's chat intentionally persists across navigation — this effect is scoped to
-  // this story route and has no equivalent in DashboardAgent.tsx.
-  const { pathname } = useLocation();
-  const previousPathname = useRef(pathname);
-  useEffect(() => {
-    if (previousPathname.current === pathname) return;
-    previousPathname.current = pathname;
-    setOpen(false);
-  }, [pathname]);
-
-  return (
-    <>
-      <div className={cn(PANEL_FRAME, "flex h-24 items-center justify-center")}>
-        <Button variant="primary/medium" onClick={() => setOpen((current) => !current)}>
-          {open ? "Close chat" : "Open chat"}
-        </Button>
-      </div>
-      {open && (
-        <FloatingAgentWindow fullscreen={fullscreen}>
-          {(dragHandleProps) => (
-            <div className="flex h-full flex-col bg-background-bright">
-              <motion.div {...dragHandleProps}>
-                <DashboardAgentHeader
-                  title="New chat"
-                  chats={NO_CHATS}
-                  currentChatId=""
-                  thinkingChatId={null}
-                  onNewChat={noop}
-                  showNewChat={false}
-                  onOpenHistory={noop}
-                  onSelectChat={noop}
-                  onDeleteChat={noop}
-                  onToggleFullscreen={() => setFullscreen((current) => !current)}
-                  isFullscreen={fullscreen}
-                  onClose={() => setOpen(false)}
-                />
-              </motion.div>
-              <ChatTranscript>
-                <ChatTurn speaker="user">
-                  <ChatText speaker="user" text="Why did the queue back up around 2pm?" />
-                </ChatTurn>
-                <ChatTurn>
-                  <ChatText text="Concurrency on the `emails` queue hit its limit at 14:02 and stayed there for about 12 minutes. I can show you the runs that queued behind it." />
-                </ChatTurn>
-              </ChatTranscript>
-            </div>
-          )}
-        </FloatingAgentWindow>
-      )}
-    </>
-  );
-}
-
 const { demoIntents, demoWatches, demoPageContexts, demoInvestigations } = demoFixtures;
 
 function MessageHarness({
@@ -317,8 +242,6 @@ function WakeHarness({ message, watches }: { message: UIMessage; watches?: WakeW
 }
 
 const STATES: Record<string, React.ReactNode> = {
-  "shell-floating-window": <FloatingWindowHarness />,
-
   "hero-panel": <HeroHarness context={demoPageContexts.other} />,
   "hero-panel-contextual": <HeroHarness context={demoPageContexts.failedRun} />,
   "hero-fullscreen": <HeroHarness context={demoPageContexts.failedRun} fullscreen />,
@@ -415,7 +338,6 @@ export default function Story() {
       page="chat"
       states={STATES}
       componentNames={[
-        "panel-layout.tsx",
         "DashboardAgentComposer.tsx",
         "DashboardAgentMessages.tsx",
         "DashboardAgentHero.tsx",
diff --git a/apps/webapp/app/routes/storybook.ai-agent/route.tsx b/apps/webapp/app/routes/storybook.ai-agent/route.tsx
index 1eb17a8a949..6278f990a3d 100644
--- a/apps/webapp/app/routes/storybook.ai-agent/route.tsx
+++ b/apps/webapp/app/routes/storybook.ai-agent/route.tsx
@@ -193,20 +193,14 @@ function DotMatrixTab() {
 // 1.5x the 32px candidate icons this replaced.
 const EDITOR_SIZE = 48;
 
-/**
- * Renders a flat `MATRIX * MATRIX` lit/unlit array on the shared grid geometry —
- * `dotMatrixGeometry`, so pitch and dot radius always match the Shape library above.
- * Shared by the interactive editor (`onToggle`) and the static owner-bitmap previews.
- */
+/** Renders a flat `MATRIX * MATRIX` lit/unlit array using `dotMatrixGeometry`, so pitch and dot radius always match the Shape library above. */
 function DotGrid({
   lit,
   size,
-  litClassName = "text-success",
   onToggle,
 }: {
   lit: boolean[];
   size: number;
-  litClassName?: string;
   onToggle?: (index: number) => void;
 }) {
   const { pitch, dotR } = dotMatrixGeometry(size);
@@ -230,8 +224,22 @@ function DotGrid({
             r={dotR}
             fill="currentColor"
             opacity={isLit ? 1 : 0.25}
-            className={cn(onToggle && "cursor-pointer", isLit ? litClassName : "text-text-dimmed")}
+            className={cn(
+              onToggle && "cursor-pointer focus-visible:outline focus-visible:outline-2",
+              isLit ? "text-success" : "text-text-dimmed"
+            )}
             onClick={onToggle ? () => onToggle(i) : undefined}
+            {...(onToggle && {
+              role: "button",
+              tabIndex: 0,
+              "aria-pressed": isLit,
+              "aria-label": `Dot ${r + 1}, ${c + 1}`,
+              onKeyDown: (event: React.KeyboardEvent) => {
+                if (event.key !== "Enter" && event.key !== " ") return;
+                event.preventDefault();
+                onToggle(i);
+              },
+            })}
           />
         );
       })}
diff --git a/apps/webapp/app/routes/storybook.dashboard-agent-floating/route.tsx b/apps/webapp/app/routes/storybook.dashboard-agent-floating/route.tsx
index ca67297e23a..54205959c3d 100644
--- a/apps/webapp/app/routes/storybook.dashboard-agent-floating/route.tsx
+++ b/apps/webapp/app/routes/storybook.dashboard-agent-floating/route.tsx
@@ -12,15 +12,22 @@ import { Paragraph } from "~/components/primitives/Paragraph";
 
 const NO_CHATS: DashboardAgentChat[] = [];
 
-/**
- * The dashboard agent's default (and only) mode: a floating window docked at the
- * bottom of the page, draggable across the whole page and resizable by its edges and
- * corners. Static content only — this demos the shell (`FloatingAgentWindow`, the real
- * `DashboardAgentHeader`, and `agentTakeoverClassName` fullscreen), not a live backend.
- */
+/** Static content only: this demos the shell (drag, resize, fullscreen), not a live backend. */
 export default function Story() {
   const [open, setOpen] = useState(true);
   const [fullscreen, setFullscreen] = useState(false);
+  const closeWindow = () => {
+    setOpen(false);
+    setFullscreen(false);
+  };
+
+  // SSR has no window, so the initial rect (and hydrated one) would mismatch; render the
+  // demo only once mounted client-side.
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    // oxlint-disable-next-line react/set-state-in-effect -- SSR has no window; flips once client-mounted.
+    setMounted(true);
+  }, []);
 
   // Storybook only: the demo window must not follow you to another story. The real
   // dashboard's chat intentionally persists across navigation — this effect is scoped to
@@ -30,7 +37,7 @@ export default function Story() {
   useEffect(() => {
     if (previousPathname.current === pathname) return;
     previousPathname.current = pathname;
-    setOpen(false);
+    closeWindow();
   }, [pathname]);
 
   return (
@@ -47,14 +54,14 @@ export default function Story() {
           the page the same way the old side panel did.
         </Paragraph>
       </div>
-      {!open && (
+      {mounted && !open && (
         <div className="px-4">
           <Button variant="primary/medium" onClick={() => setOpen(true)}>
             Open chat
           </Button>
         </div>
       )}
-      {open && (
+      {mounted && open && (
         <FloatingAgentWindow fullscreen={fullscreen}>
           {(dragHandleProps) => (
             <div className="flex h-full flex-col bg-background-bright">
@@ -71,7 +78,7 @@ export default function Story() {
                   onDeleteChat={() => {}}
                   onToggleFullscreen={() => setFullscreen((f) => !f)}
                   isFullscreen={fullscreen}
-                  onClose={() => setOpen(false)}
+                  onClose={closeWindow}
                 />
               </motion.div>
               <ChatTranscript>

From 8ce45c3aa265fb2c13c8b38244b97fec8be3ae46 Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Wed, 26 Aug 2026 19:06:58 +0000
Subject: [PATCH 22/43] fix(webapp): drag filter opts out by marker, not tag,
 and lives in the shell

closest("button, a, input, [role=button]") rejected pans starting on
the header title, since the whole title (including the truncated
text) sits inside a Popover trigger <button>. Replace with an opt-out
marker (data-agent-no-drag) on the header's action-button group and
on the popover trigger's chevron only, so the title text stays
draggable while Radix's click-to-open behavior is untouched.

Move the filter and cursor/touch-action state out of
DashboardAgentPanel and into FloatingAgentWindow itself, so every
consumer (the real panel, the standalone story) gets identical
behavior instead of reimplementing it. New tests in
panel-layout.dom.test.ts drive the filter directly: a pan starting on
ordinary content drags, one starting on a data-agent-no-drag element
doesn't.
---
 .../dashboard-agent/DashboardAgent.tsx        |  3 +-
 .../dashboard-agent/DashboardAgentHeader.tsx  |  2 +-
 .../dashboard-agent/DashboardAgentPanel.tsx   | 55 ++--------------
 .../dashboard-agent/panel-layout.dom.test.ts  | 64 +++++++++++++++++++
 .../dashboard-agent/panel-layout.tsx          | 63 ++++++++++++++++--
 .../app/components/primitives/Popover.tsx     |  7 +-
 .../route.tsx                                 |  4 +-
 7 files changed, 136 insertions(+), 62 deletions(-)

diff --git a/apps/webapp/app/components/dashboard-agent/DashboardAgent.tsx b/apps/webapp/app/components/dashboard-agent/DashboardAgent.tsx
index f6f2a3e3269..85d60e5bf53 100644
--- a/apps/webapp/app/components/dashboard-agent/DashboardAgent.tsx
+++ b/apps/webapp/app/components/dashboard-agent/DashboardAgent.tsx
@@ -346,7 +346,7 @@ export function DashboardAgent({
         <div className="relative h-full min-h-0">
           <div className={agentHiddenContentClassName(fullscreen)}>{children}</div>
           <FloatingAgentWindow fullscreen={fullscreen}>
-            {(dragHandleProps) => (
+            {({ dragHandleProps, dragHandleClassName }) => (
               <DashboardAgentPanel
                 onClose={() => setPanelOpen(false)}
                 requestedMessage={requestedMessage}
@@ -361,6 +361,7 @@ export function DashboardAgent({
                 isFullscreen={fullscreen}
                 onToggleFullscreen={toggleFullscreen}
                 dragHandleProps={dragHandleProps}
+                dragHandleClassName={dragHandleClassName}
               />
             )}
           </FloatingAgentWindow>
diff --git a/apps/webapp/app/components/dashboard-agent/DashboardAgentHeader.tsx b/apps/webapp/app/components/dashboard-agent/DashboardAgentHeader.tsx
index 1b6e5bb9db3..970377efc07 100644
--- a/apps/webapp/app/components/dashboard-agent/DashboardAgentHeader.tsx
+++ b/apps/webapp/app/components/dashboard-agent/DashboardAgentHeader.tsx
@@ -103,7 +103,7 @@ export function DashboardAgentHeader({
         onConfirm={onDeleteChat}
       />
 
-      <div className="flex shrink-0 items-center gap-0.5">
+      <div className="flex shrink-0 items-center gap-0.5" data-agent-no-drag>
         {showNewChat && (
           <Button
             variant="minimal/small"
diff --git a/apps/webapp/app/components/dashboard-agent/DashboardAgentPanel.tsx b/apps/webapp/app/components/dashboard-agent/DashboardAgentPanel.tsx
index 88a5405ae24..8e867d8803f 100644
--- a/apps/webapp/app/components/dashboard-agent/DashboardAgentPanel.tsx
+++ b/apps/webapp/app/components/dashboard-agent/DashboardAgentPanel.tsx
@@ -53,7 +53,6 @@ import {
 import { AgentPanelColumn } from "./panel-layout";
 import { markerAfterActiveChat, markerAfterActivity } from "./thinking-marker";
 import { concurrencyPath } from "~/utils/pathBuilder";
-import { cn } from "~/utils/cn";
 
 function serializePageContext(pageContext: AgentPageContext): string | undefined {
   try {
@@ -88,12 +87,14 @@ export function DashboardAgentPanel({
   isFullscreen = false,
   onToggleFullscreen,
   dragHandleProps,
+  dragHandleClassName,
 }: {
   onClose: () => void;
   isFullscreen?: boolean;
   onToggleFullscreen?: () => void;
-  /** Spread onto the header, which is the floating window's drag handle. */
+  /** Spread onto the header, which is the floating window's drag handle; already filtered by `FloatingAgentWindow`. */
   dragHandleProps?: Partial<PanHandlerProps>;
+  dragHandleClassName?: string;
   // Every `seq` below distinguishes repeat requests with identical contents.
   requestedMessage?: { text: string; seq: number };
   openChatRequest?: { chatId: string; seq: number };
@@ -133,13 +134,6 @@ export function DashboardAgentPanel({
   const [loading, setLoading] = useState(
     () => readLastChat(storageKey)?.path === location.pathname
   );
-  // Cursor feedback only; the drag itself is handled by `dragHandleProps`.
-  const [draggingWindow, setDraggingWindow] = useState(false);
-  // Fullscreen passes no drag handlers at all (an empty object), so pan wiring is a no-op there.
-  const isDraggable = !!dragHandleProps?.onPan;
-  // Set when a gesture starts on a header button/link, so its onPan steps are dropped too.
-  const ignoringGesture = useRef(false);
-
   const currentPage = agentPageLabel(pageContext, location.pathname);
 
   const pagePaths = useMemo<Record<string, string>>(
@@ -616,48 +610,7 @@ export function DashboardAgentPanel({
         onClose();
       }}
     >
-      <motion.div
-        {...dragHandleProps}
-        onPanStart={
-          isDraggable
-            ? (event, info) => {
-                // Buttons/links inside the header (history, new chat, expand, close) sit
-                // above the drag handle; a click there must not move the window.
-                if (
-                  (event.target as HTMLElement | null)?.closest("button, a, input, [role=button]")
-                ) {
-                  ignoringGesture.current = true;
-                  return;
-                }
-                ignoringGesture.current = false;
-                setDraggingWindow(true);
-                dragHandleProps?.onPanStart?.(event, info);
-              }
-            : undefined
-        }
-        onPan={
-          isDraggable
-            ? (event, info) => {
-                if (ignoringGesture.current) return;
-                dragHandleProps?.onPan?.(event, info);
-              }
-            : undefined
-        }
-        onPanEnd={
-          isDraggable
-            ? (event, info) => {
-                ignoringGesture.current = false;
-                setDraggingWindow(false);
-                dragHandleProps?.onPanEnd?.(event, info);
-              }
-            : undefined
-        }
-        className={cn(
-          "select-none",
-          isDraggable && "touch-none",
-          isDraggable && (draggingWindow ? "cursor-grabbing" : "cursor-grab")
-        )}
-      >
+      <motion.div {...dragHandleProps} className={dragHandleClassName}>
         <DashboardAgentHeader
           title={headerTitle}
           chats={chats}
diff --git a/apps/webapp/app/components/dashboard-agent/panel-layout.dom.test.ts b/apps/webapp/app/components/dashboard-agent/panel-layout.dom.test.ts
index ea8adddffb8..0fd5e3e8945 100644
--- a/apps/webapp/app/components/dashboard-agent/panel-layout.dom.test.ts
+++ b/apps/webapp/app/components/dashboard-agent/panel-layout.dom.test.ts
@@ -10,7 +10,9 @@ import {
   FLOATING_MARGIN,
   FLOATING_MIN_SIZE,
   FLOATING_WIDTH,
+  FloatingAgentWindow,
   initialFloatingRect,
+  type FloatingDragProps,
 } from "./panel-layout";
 
 let container: HTMLDivElement | undefined;
@@ -95,3 +97,65 @@ describe("the floating window's rect, wired with panel-layout's own constants",
     expect(hook.current.size.w).toBe(FLOATING_MIN_SIZE.w);
   });
 });
+
+// Mirrors the real header: a title-like element (draggable) beside a
+// `data-agent-no-drag` action (opted out), same as DashboardAgentHeader's button group.
+function renderFloatingAgentWindow() {
+  let latest!: FloatingDragProps;
+  function Harness() {
+    return createElement(FloatingAgentWindow, { fullscreen: false }, (drag: FloatingDragProps) => {
+      // oxlint-disable-next-line react/globals -- test harness capturing the render-prop's value.
+      latest = drag;
+      return createElement(
+        "div",
+        null,
+        createElement("span", { "data-testid": "title" }, "Chat title"),
+        createElement("button", { "data-agent-no-drag": "", "data-testid": "action" }, "Close")
+      );
+    });
+  }
+  container = document.createElement("div");
+  document.body.appendChild(container);
+  root = createRoot(container);
+  act(() => {
+    root!.render(createElement(Harness));
+  });
+  return {
+    get dragHandleProps() {
+      return latest.dragHandleProps;
+    },
+    outerLeft: () => (container!.firstElementChild as HTMLDivElement).style.left,
+    titleEl: () => container!.querySelector<HTMLElement>('[data-testid="title"]')!,
+    actionEl: () => container!.querySelector<HTMLElement>('[data-testid="action"]')!,
+  };
+}
+
+describe("FloatingAgentWindow's drag-vs-click filter", () => {
+  it("drags when a gesture starts on ordinary content, like the header title", () => {
+    stubViewport(1200, 900);
+    const view = renderFloatingAgentWindow();
+    const startLeft = view.outerLeft();
+
+    act(() => {
+      const target = view.titleEl() as unknown as PointerEvent["target"];
+      view.dragHandleProps.onPanStart!({ target } as PointerEvent, fakePanInfo(0, 0));
+      view.dragHandleProps.onPan!({ target } as PointerEvent, fakePanInfo(-20, 0));
+    });
+
+    expect(view.outerLeft()).not.toBe(startLeft);
+  });
+
+  it("does not drag when a gesture starts on a data-agent-no-drag element", () => {
+    stubViewport(1200, 900);
+    const view = renderFloatingAgentWindow();
+    const startLeft = view.outerLeft();
+
+    act(() => {
+      const target = view.actionEl() as unknown as PointerEvent["target"];
+      view.dragHandleProps.onPanStart!({ target } as PointerEvent, fakePanInfo(0, 0));
+      view.dragHandleProps.onPan!({ target } as PointerEvent, fakePanInfo(-20, 0));
+    });
+
+    expect(view.outerLeft()).toBe(startLeft);
+  });
+});
diff --git a/apps/webapp/app/components/dashboard-agent/panel-layout.tsx b/apps/webapp/app/components/dashboard-agent/panel-layout.tsx
index b391d9cb006..26a0a6b83a4 100644
--- a/apps/webapp/app/components/dashboard-agent/panel-layout.tsx
+++ b/apps/webapp/app/components/dashboard-agent/panel-layout.tsx
@@ -1,7 +1,7 @@
 // Both class helpers apply to always-rendered wrappers, so toggling fullscreen is a
 // class change only and the open chat's transport, session and transcript survive it.
-import { useMemo } from "react";
-import { motion } from "framer-motion";
+import { useMemo, useRef, useState } from "react";
+import { motion, type PanInfo } from "framer-motion";
 import {
   draggableResizeHandleClassName,
   useDraggableResizable,
@@ -10,6 +10,16 @@ import {
 } from "~/components/primitives/DraggableResizable";
 import { cn } from "~/utils/cn";
 
+// Mark an element (e.g. a header button, or just its icon) with `data-agent-no-drag` so a
+// pan starting on it never drags the window.
+const NO_DRAG_SELECTOR = "[data-agent-no-drag]";
+
+/** Spread onto the drag handle; `dragHandleClassName` already carries cursor/touch-action/select-none. */
+export type FloatingDragProps = {
+  dragHandleProps: Partial<PanHandlerProps>;
+  dragHandleClassName: string;
+};
+
 const AGENT_FULLSCREEN_STORAGE_KEY = "tdev:dashboard-agent:fullscreen";
 
 // V1 floating window: 380x512, bottom-right, matching the gallery's own panel frame.
@@ -59,13 +69,18 @@ export function agentHiddenContentClassName(fullscreen: boolean): string {
   return cn("h-full overflow-hidden", fullscreen && "invisible");
 }
 
-/** Fullscreen needs a `relative` ancestor for `agentTakeoverClassName`; the caller (`DashboardAgent`) supplies it. */
+/**
+ * Fullscreen needs a `relative` ancestor for `agentTakeoverClassName`; the caller
+ * (`DashboardAgent`) supplies it. Owns the drag-vs-click filter so every consumer (the real
+ * panel, the standalone story) gets identical behavior: a pan starting on a
+ * `data-agent-no-drag` element (or a descendant of one) never moves the window.
+ */
 export function FloatingAgentWindow({
   fullscreen,
   children,
 }: {
   fullscreen: boolean;
-  children: (dragHandleProps: Partial<PanHandlerProps>) => React.ReactNode;
+  children: (drag: FloatingDragProps) => React.ReactNode;
 }) {
   const initial = useMemo(() => initialFloatingRect(), []);
   const { style, dragHandleProps, resizeHandleProps } = useDraggableResizable({
@@ -73,11 +88,40 @@ export function FloatingAgentWindow({
     minSize: FLOATING_MIN_SIZE,
     viewportPadding: FLOATING_MARGIN,
   });
+  const [dragging, setDragging] = useState(false);
+  // Set for the rest of a gesture that started on a no-drag element, since framer-motion
+  // can deliver onPan before onPanStart and the target is only known at start.
+  const ignoringGesture = useRef(false);
 
   if (fullscreen) {
-    return <div className={agentTakeoverClassName(true)}>{children({})}</div>;
+    return (
+      <div className={agentTakeoverClassName(true)}>
+        {children({ dragHandleProps: {}, dragHandleClassName: "" })}
+      </div>
+    );
   }
 
+  const filteredDragHandleProps: Partial<PanHandlerProps> = {
+    onPanStart: (event: PointerEvent, info: PanInfo) => {
+      if ((event.target as HTMLElement | null)?.closest(NO_DRAG_SELECTOR)) {
+        ignoringGesture.current = true;
+        return;
+      }
+      ignoringGesture.current = false;
+      setDragging(true);
+      dragHandleProps.onPanStart?.(event, info);
+    },
+    onPan: (event: PointerEvent, info: PanInfo) => {
+      if (ignoringGesture.current) return;
+      dragHandleProps.onPan?.(event, info);
+    },
+    onPanEnd: (event: PointerEvent, info: PanInfo) => {
+      ignoringGesture.current = false;
+      setDragging(false);
+      dragHandleProps.onPanEnd?.(event, info);
+    },
+  };
+
   return (
     <div
       style={style}
@@ -86,7 +130,14 @@ export function FloatingAgentWindow({
       {/* 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">
-        {children(dragHandleProps)}
+        {/* oxlint-disable-next-line react/refs -- filteredDragHandleProps' closures only touch the ref inside their own event handlers, not during this render. */}
+        {children({
+          dragHandleProps: filteredDragHandleProps,
+          dragHandleClassName: cn(
+            "select-none touch-none",
+            dragging ? "cursor-grabbing" : "cursor-grab"
+          ),
+        })}
       </div>
       {RESIZE_EDGES.map((edge) => (
         <motion.div
diff --git a/apps/webapp/app/components/primitives/Popover.tsx b/apps/webapp/app/components/primitives/Popover.tsx
index 0f1a82df3a6..ffa99a84806 100644
--- a/apps/webapp/app/components/primitives/Popover.tsx
+++ b/apps/webapp/app/components/primitives/Popover.tsx
@@ -223,7 +223,12 @@ function PopoverArrowTrigger({
       >
         {children}
       </Paragraph>
-      <DropdownIcon className={cn("size-4 min-w-4 transition", variantStyles.icon)} />
+      {/* Wrapper only: `data-agent-no-drag` is an opt-out marker some draggable-window hosts
+          check via `closest()`, so the icon (not the title text beside it) can decline a drag
+          without changing this primitive's layout (`contents` keeps the icon as the flex item). */}
+      <span data-agent-no-drag className="contents">
+        <DropdownIcon className={cn("size-4 min-w-4 transition", variantStyles.icon)} />
+      </span>
     </PopoverTrigger>
   );
 }
diff --git a/apps/webapp/app/routes/storybook.dashboard-agent-floating/route.tsx b/apps/webapp/app/routes/storybook.dashboard-agent-floating/route.tsx
index 54205959c3d..a7dabb934b1 100644
--- a/apps/webapp/app/routes/storybook.dashboard-agent-floating/route.tsx
+++ b/apps/webapp/app/routes/storybook.dashboard-agent-floating/route.tsx
@@ -63,9 +63,9 @@ export default function Story() {
       )}
       {mounted && open && (
         <FloatingAgentWindow fullscreen={fullscreen}>
-          {(dragHandleProps) => (
+          {({ dragHandleProps, dragHandleClassName }) => (
             <div className="flex h-full flex-col bg-background-bright">
-              <motion.div {...dragHandleProps}>
+              <motion.div {...dragHandleProps} className={dragHandleClassName}>
                 <DashboardAgentHeader
                   title="New chat"
                   chats={NO_CHATS}

From c59cf0efd074d2caf78fd368503eef68dc06e6ea Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Wed, 26 Aug 2026 19:59:25 +0000
Subject: [PATCH 23/43] fix(webapp): classify a drag gesture on whichever pan
 event lands first

onPan can arrive before onPanStart, so a gesture starting on a
data-agent-no-drag element could leak its first delta(s) before
ignoringGesture was set. Both handlers now classify the gesture once
(gestureClassified) using whichever event's target shows up first.
New test drives onPan before onPanStart from a no-drag target and
asserts zero movement.

Also drop a gratuitous useMemo over a 25-item array in
storybook.ai-agent's DotGridEditor (CodeRabbit nitpick).
---
 .../dashboard-agent/panel-layout.dom.test.ts  | 16 ++++++++++++++
 .../dashboard-agent/panel-layout.tsx          | 21 ++++++++++++-------
 .../app/routes/storybook.ai-agent/route.tsx   |  8 ++-----
 3 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/apps/webapp/app/components/dashboard-agent/panel-layout.dom.test.ts b/apps/webapp/app/components/dashboard-agent/panel-layout.dom.test.ts
index 0fd5e3e8945..db43a3b3a9f 100644
--- a/apps/webapp/app/components/dashboard-agent/panel-layout.dom.test.ts
+++ b/apps/webapp/app/components/dashboard-agent/panel-layout.dom.test.ts
@@ -158,4 +158,20 @@ describe("FloatingAgentWindow's drag-vs-click filter", () => {
 
     expect(view.outerLeft()).toBe(startLeft);
   });
+
+  it("does not leak a delta when onPan for a no-drag target lands before its onPanStart", () => {
+    stubViewport(1200, 900);
+    const view = renderFloatingAgentWindow();
+    const startLeft = view.outerLeft();
+
+    act(() => {
+      const target = view.actionEl() as unknown as PointerEvent["target"];
+      // Framer-motion's real ordering: onPan can arrive first.
+      view.dragHandleProps.onPan!({ target } as PointerEvent, fakePanInfo(-20, 0));
+      view.dragHandleProps.onPanStart!({ target } as PointerEvent, fakePanInfo(0, 0));
+      view.dragHandleProps.onPan!({ target } as PointerEvent, fakePanInfo(-20, 0));
+    });
+
+    expect(view.outerLeft()).toBe(startLeft);
+  });
 });
diff --git a/apps/webapp/app/components/dashboard-agent/panel-layout.tsx b/apps/webapp/app/components/dashboard-agent/panel-layout.tsx
index 26a0a6b83a4..6f5e584a346 100644
--- a/apps/webapp/app/components/dashboard-agent/panel-layout.tsx
+++ b/apps/webapp/app/components/dashboard-agent/panel-layout.tsx
@@ -89,8 +89,10 @@ export function FloatingAgentWindow({
     viewportPadding: FLOATING_MARGIN,
   });
   const [dragging, setDragging] = useState(false);
-  // Set for the rest of a gesture that started on a no-drag element, since framer-motion
-  // can deliver onPan before onPanStart and the target is only known at start.
+  // Framer-motion can deliver onPan before onPanStart, so the no-drag check runs on
+  // whichever event lands first; `gestureClassified` makes sure it only runs once per
+  // gesture (a late onPanStart must not re-decide after onPan already classified it).
+  const gestureClassified = useRef(false);
   const ignoringGesture = useRef(false);
 
   if (fullscreen) {
@@ -101,21 +103,26 @@ export function FloatingAgentWindow({
     );
   }
 
+  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) => {
-      if ((event.target as HTMLElement | null)?.closest(NO_DRAG_SELECTOR)) {
-        ignoringGesture.current = true;
-        return;
-      }
-      ignoringGesture.current = false;
+      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);
diff --git a/apps/webapp/app/routes/storybook.ai-agent/route.tsx b/apps/webapp/app/routes/storybook.ai-agent/route.tsx
index 6278f990a3d..e14d8333b87 100644
--- a/apps/webapp/app/routes/storybook.ai-agent/route.tsx
+++ b/apps/webapp/app/routes/storybook.ai-agent/route.tsx
@@ -255,12 +255,8 @@ function DotGridEditor() {
     setLit((current) => current.map((value, i) => (i === index ? !value : value)));
   };
 
-  const rows = useMemo(
-    () =>
-      Array.from({ length: MATRIX }, (_, r) =>
-        Array.from({ length: MATRIX }, (_, c) => (lit[r * MATRIX + c] ? "#" : ".")).join("")
-      ),
-    [lit]
+  const rows = Array.from({ length: MATRIX }, (_, r) =>
+    Array.from({ length: MATRIX }, (_, c) => (lit[r * MATRIX + c] ? "#" : ".")).join("")
   );
 
   return (

From e70583318dcf11870d9359a5366e59f93bbcec41 Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Wed, 26 Aug 2026 20:22:03 +0000
Subject: [PATCH 24/43] fix(webapp): resume a chat's in-flight turn on reopen;
 final comment sweep
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closing the panel already keeps the server turn alive
(teardownCancelsTurn returns false for panel-closed and chat-switched).
The missing piece was resume-on-reopen: opening a chat never marked it
streaming, so the transport never resumed the live `.out` stream and a
mid-turn reopen showed a stalled transcript.

resolveOpenedChat now derives `streaming` from whether the fetched
transcript still looks mid-turn (the same transcriptLooksUnfinished
check already used to poll a just-settled turn), and DashboardAgentPanel
already spreads it into ActiveChat, so useTriggerChatTransport's
isStreaming resume engages on reopen.

Chat-switch design decision: unchanged, matches the packet's
preference — teardownCancelsTurn already keeps chat-switched turns
alive, same as panel-closed, so switching away and back also resumes.

A true SSE integration test is impractical in jsdom; resume-wiring.test.ts
source-checks the streaming/isStreaming/stopGeneration wiring instead,
alongside new resolveOpenedChat unit tests for the streaming derivation.

Final comment sweep over the branch diff: every comment capped at two
plain lines, non-critical/signpost ones removed.
---
 .../floating-window-mode.test.ts              |  4 +-
 .../dashboard-agent/opened-chat.test.ts       | 42 ++++++++++++++++++-
 .../components/dashboard-agent/opened-chat.ts |  7 +++-
 .../dashboard-agent/panel-layout.dom.test.ts  |  1 -
 .../dashboard-agent/panel-layout.tsx          | 13 ++----
 .../dashboard-agent/resume-wiring.test.ts     | 24 +++++++++++
 .../primitives/DraggableResizable.dom.test.ts | 12 ++----
 .../primitives/DraggableResizable.tsx         | 12 ++----
 .../app/components/primitives/Popover.tsx     |  5 +--
 .../primitives/draggableResizableMath.test.ts |  6 +--
 .../primitives/draggableResizableMath.ts      | 16 ++-----
 .../route.tsx                                 |  4 +-
 12 files changed, 90 insertions(+), 56 deletions(-)
 create mode 100644 apps/webapp/app/components/dashboard-agent/resume-wiring.test.ts

diff --git a/apps/webapp/app/components/dashboard-agent/floating-window-mode.test.ts b/apps/webapp/app/components/dashboard-agent/floating-window-mode.test.ts
index c39879014f8..e826517e3c6 100644
--- a/apps/webapp/app/components/dashboard-agent/floating-window-mode.test.ts
+++ b/apps/webapp/app/components/dashboard-agent/floating-window-mode.test.ts
@@ -1,6 +1,4 @@
-// Source-level guard: the floating window is the default and only mode. A regression to
-// the old slide-in-from-the-right column would reintroduce `ResizablePanelGroup` here —
-// this fails red the moment it comes back, instead of waiting for a visual regression.
+// Guards against reintroducing the old right-column ResizablePanelGroup.
 import { readFileSync } from "node:fs";
 import { join } from "node:path";
 import { describe, expect, it } from "vitest";
diff --git a/apps/webapp/app/components/dashboard-agent/opened-chat.test.ts b/apps/webapp/app/components/dashboard-agent/opened-chat.test.ts
index 0f38b54f752..6b05b925d1d 100644
--- a/apps/webapp/app/components/dashboard-agent/opened-chat.test.ts
+++ b/apps/webapp/app/components/dashboard-agent/opened-chat.test.ts
@@ -10,18 +10,37 @@ const message: UIMessage = {
   parts: [{ type: "text", text: "why did this run fail?" }],
 };
 
+// A tool call the stream died on: still `input-available`, no result part.
+const unfinishedMessage: UIMessage = {
+  id: "msg_2",
+  role: "assistant",
+  parts: [{ type: "tool-run_query", state: "input-available" } as never],
+};
+
 describe("resolveOpenedChat", () => {
   it("opens a chat that has messages", () => {
     const opened = resolveOpenedChat(CHAT_ID, { messages: [message], session: null });
 
-    expect(opened).toEqual({ kind: "chat", chatId: CHAT_ID, messages: [message], session: null });
+    expect(opened).toEqual({
+      kind: "chat",
+      chatId: CHAT_ID,
+      messages: [message],
+      session: null,
+      streaming: false,
+    });
   });
 
   it("still opens a chat that exists but has no messages", () => {
     const opened = resolveOpenedChat(CHAT_ID, { messages: [], session: null });
 
     expect(opened.kind).toBe("chat");
-    expect(opened).toEqual({ kind: "chat", chatId: CHAT_ID, messages: [], session: null });
+    expect(opened).toEqual({
+      kind: "chat",
+      chatId: CHAT_ID,
+      messages: [],
+      session: null,
+      streaming: false,
+    });
   });
 
   it("treats a chat with no messages field the same way", () => {
@@ -54,4 +73,23 @@ describe("resolveOpenedChat", () => {
   it("has no session when the token is missing", () => {
     expect(resolveOpenedChat(CHAT_ID, { messages: [message] })).toMatchObject({ session: null });
   });
+
+  // The bug this guards: closing mid-turn and reopening must resume, not show a stalled turn.
+  it("marks streaming when the fetched transcript still looks mid-turn", () => {
+    const opened = resolveOpenedChat(CHAT_ID, {
+      messages: [message, unfinishedMessage],
+      session: { publicAccessToken: "pat_1", lastEventId: "evt_9" },
+    });
+
+    expect(opened).toMatchObject({ streaming: true });
+  });
+
+  it("is not streaming once the transcript settles", () => {
+    const opened = resolveOpenedChat(CHAT_ID, {
+      messages: [message],
+      session: { publicAccessToken: "pat_1", lastEventId: "evt_9" },
+    });
+
+    expect(opened).toMatchObject({ streaming: false });
+  });
 });
diff --git a/apps/webapp/app/components/dashboard-agent/opened-chat.ts b/apps/webapp/app/components/dashboard-agent/opened-chat.ts
index f9dd64f89e9..404145eb718 100644
--- a/apps/webapp/app/components/dashboard-agent/opened-chat.ts
+++ b/apps/webapp/app/components/dashboard-agent/opened-chat.ts
@@ -1,4 +1,5 @@
 import type { UIMessage } from "@ai-sdk/react";
+import { transcriptLooksUnfinished } from "./settled-transcript";
 
 export type OpenedChatResponse = {
   messages?: UIMessage[];
@@ -11,6 +12,8 @@ export type OpenedChat =
       chatId: string;
       messages: UIMessage[];
       session: { publicAccessToken: string; lastEventId?: string } | null;
+      // True if the transcript still reads as mid-turn, so the transport resumes it.
+      streaming: boolean;
     }
   // Deleted, or belonging to someone else: the read failed, so there is no chat to show.
   | { kind: "gone" };
@@ -23,15 +26,17 @@ export function resolveOpenedChat(
   if (!response) return { kind: "gone" };
 
   const session = response.session;
+  const messages = response.messages ?? [];
   return {
     kind: "chat",
     chatId,
-    messages: response.messages ?? [],
+    messages,
     session: session?.publicAccessToken
       ? {
           publicAccessToken: session.publicAccessToken,
           lastEventId: session.lastEventId ?? undefined,
         }
       : null,
+    streaming: transcriptLooksUnfinished(messages),
   };
 }
diff --git a/apps/webapp/app/components/dashboard-agent/panel-layout.dom.test.ts b/apps/webapp/app/components/dashboard-agent/panel-layout.dom.test.ts
index db43a3b3a9f..d7486767457 100644
--- a/apps/webapp/app/components/dashboard-agent/panel-layout.dom.test.ts
+++ b/apps/webapp/app/components/dashboard-agent/panel-layout.dom.test.ts
@@ -44,7 +44,6 @@ describe("initialFloatingRect", () => {
   });
 });
 
-// Same render-hook pattern as DraggableResizable.dom.test.ts.
 function renderDraggableResizable() {
   let latest!: ReturnType<typeof useDraggableResizable>;
   function Harness() {
diff --git a/apps/webapp/app/components/dashboard-agent/panel-layout.tsx b/apps/webapp/app/components/dashboard-agent/panel-layout.tsx
index 6f5e584a346..224cde232e7 100644
--- a/apps/webapp/app/components/dashboard-agent/panel-layout.tsx
+++ b/apps/webapp/app/components/dashboard-agent/panel-layout.tsx
@@ -69,12 +69,7 @@ export function agentHiddenContentClassName(fullscreen: boolean): string {
   return cn("h-full overflow-hidden", fullscreen && "invisible");
 }
 
-/**
- * Fullscreen needs a `relative` ancestor for `agentTakeoverClassName`; the caller
- * (`DashboardAgent`) supplies it. Owns the drag-vs-click filter so every consumer (the real
- * panel, the standalone story) gets identical behavior: a pan starting on a
- * `data-agent-no-drag` element (or a descendant of one) never moves the window.
- */
+/** Fullscreen needs a `relative` ancestor for `agentTakeoverClassName`, supplied by the caller. */
 export function FloatingAgentWindow({
   fullscreen,
   children,
@@ -89,9 +84,7 @@ export function FloatingAgentWindow({
     viewportPadding: FLOATING_MARGIN,
   });
   const [dragging, setDragging] = useState(false);
-  // Framer-motion can deliver onPan before onPanStart, so the no-drag check runs on
-  // whichever event lands first; `gestureClassified` makes sure it only runs once per
-  // gesture (a late onPanStart must not re-decide after onPan already classified it).
+  // onPan can arrive before onPanStart, so the no-drag check runs once, on whichever fires first.
   const gestureClassified = useRef(false);
   const ignoringGesture = useRef(false);
 
@@ -137,7 +130,7 @@ export function FloatingAgentWindow({
       {/* 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">
-        {/* oxlint-disable-next-line react/refs -- filteredDragHandleProps' closures only touch the ref inside their own event handlers, not during this render. */}
+        {/* oxlint-disable-next-line react/refs -- the ref is only read inside event handlers, not during render. */}
         {children({
           dragHandleProps: filteredDragHandleProps,
           dragHandleClassName: cn(
diff --git a/apps/webapp/app/components/dashboard-agent/resume-wiring.test.ts b/apps/webapp/app/components/dashboard-agent/resume-wiring.test.ts
new file mode 100644
index 00000000000..ffc094cd78e
--- /dev/null
+++ b/apps/webapp/app/components/dashboard-agent/resume-wiring.test.ts
@@ -0,0 +1,24 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+// Structural guard: a live SSE resume is impractical in jsdom, so this pins the wiring
+// instead. `opened-chat.test.ts` covers the `streaming` value; this covers it reaching the transport.
+describe("the panel's resume wiring, source-checked", () => {
+  const chat = readFileSync(new URL("./DashboardAgentChat.tsx", import.meta.url), "utf8");
+  const panel = readFileSync(new URL("./DashboardAgentPanel.tsx", import.meta.url), "utf8");
+
+  it("marks a reopened chat's session isStreaming from the `streaming` prop", () => {
+    expect(chat).toContain("isStreaming: streaming ?? false");
+  });
+
+  it("only stopGeneration is called from the explicit Stop button and the gated teardown", () => {
+    const calls = [...chat.matchAll(/transport\.stopGeneration\(/g)];
+    expect(calls).toHaveLength(1);
+    expect(chat).toContain("if (!teardownCancelsTurn(reason)) return;");
+  });
+
+  it("passes the opened chat's streaming flag through to the mounted chat", () => {
+    expect(panel).toContain("setActive({ ...opened, organizationId: organization.id });");
+    expect(panel).toContain("streaming={active.streaming}");
+  });
+});
diff --git a/apps/webapp/app/components/primitives/DraggableResizable.dom.test.ts b/apps/webapp/app/components/primitives/DraggableResizable.dom.test.ts
index 2a2f42f47d1..50e1d360f42 100644
--- a/apps/webapp/app/components/primitives/DraggableResizable.dom.test.ts
+++ b/apps/webapp/app/components/primitives/DraggableResizable.dom.test.ts
@@ -1,9 +1,6 @@
 // @vitest-environment jsdom
-//
-// Framer-motion can deliver onPan before onPanStart for the same gesture (its scheduler
-// defers onPanStart by a frame); a start-rect-ref implementation would corrupt its
-// baseline when the late onPanStart lands. This drives the hook's real handlers to prove
-// it survives that ordering, unlike the pure-math tests in draggableResizableMath.test.ts.
+// Framer-motion can deliver onPan before onPanStart; drives the real handlers to prove
+// the hook survives that ordering (draggableResizableMath.test.ts only covers the math).
 import { createElement } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { act } from "react-dom/test-utils";
@@ -47,9 +44,8 @@ function renderHook(options: UseDraggableResizableOptions) {
   };
 }
 
-// `offset` is populated alongside `delta` (framer-motion always sends both) so a reverted
-// offset+baseline implementation runs its real math instead of crashing on `undefined` —
-// it must fail on the *value*, not on a missing field.
+// `offset` is set too (framer always sends both), so a reverted implementation fails on
+// the value, not on a missing field.
 function fakePanInfo(deltaX: number, offsetX: number): PanInfo {
   return {
     delta: { x: deltaX, y: 0 },
diff --git a/apps/webapp/app/components/primitives/DraggableResizable.tsx b/apps/webapp/app/components/primitives/DraggableResizable.tsx
index eddcb06dd31..bdf9c7b2224 100644
--- a/apps/webapp/app/components/primitives/DraggableResizable.tsx
+++ b/apps/webapp/app/components/primitives/DraggableResizable.tsx
@@ -32,11 +32,7 @@ export type PanHandlerProps = {
 };
 
 export type UseDraggableResizableResult = {
-  /**
-   * position:fixed with left/top/width/height set from state. `x`/`y` are the
-   * top-left corner in viewport coordinates — if the window docks bottom-right,
-   * derive the initial x/y from `window.innerWidth/innerHeight - w/h - padding`.
-   */
+  /** position:fixed from state; `x`/`y` are the top-left corner in viewport coordinates. */
   style: CSSProperties;
   dragHandleProps: PanHandlerProps;
   resizeHandleProps: (edge: ResizeEdge) => PanHandlerProps;
@@ -75,10 +71,8 @@ export function useDraggableResizable({
     return () => window.removeEventListener("resize", onResize);
   }, [viewportPadding]);
 
-  // Each onPan step folds `info.delta` onto the latest committed rect via functional
-  // setState, with no gesture-start baseline kept: framer-motion can deliver onPan before
-  // onPanStart (its scheduler defers onPanStart by a frame), which would make a ref-based
-  // baseline stale.
+  // Folds `info.delta` via functional setState, no gesture-start baseline: onPan can
+  // arrive before onPanStart, which would make a ref-based baseline stale.
   const dragHandleProps: PanHandlerProps = {
     onPanStart: () => {},
     onPan: (_event, info: PanInfo) => {
diff --git a/apps/webapp/app/components/primitives/Popover.tsx b/apps/webapp/app/components/primitives/Popover.tsx
index ffa99a84806..2d178dc62af 100644
--- a/apps/webapp/app/components/primitives/Popover.tsx
+++ b/apps/webapp/app/components/primitives/Popover.tsx
@@ -223,9 +223,8 @@ function PopoverArrowTrigger({
       >
         {children}
       </Paragraph>
-      {/* Wrapper only: `data-agent-no-drag` is an opt-out marker some draggable-window hosts
-          check via `closest()`, so the icon (not the title text beside it) can decline a drag
-          without changing this primitive's layout (`contents` keeps the icon as the flex item). */}
+      {/* `data-agent-no-drag`: an opt-out marker draggable-window hosts check via closest().
+          `contents` keeps this wrapper invisible to layout. */}
       <span data-agent-no-drag className="contents">
         <DropdownIcon className={cn("size-4 min-w-4 transition", variantStyles.icon)} />
       </span>
diff --git a/apps/webapp/app/components/primitives/draggableResizableMath.test.ts b/apps/webapp/app/components/primitives/draggableResizableMath.test.ts
index c0f7ecf0490..5c9d5f6177c 100644
--- a/apps/webapp/app/components/primitives/draggableResizableMath.test.ts
+++ b/apps/webapp/app/components/primitives/draggableResizableMath.test.ts
@@ -223,10 +223,8 @@ describe("resizeRect — minSize wins over a viewport-derived cap smaller than i
   });
 });
 
-// These reproduce the live-testing symptoms: framer-motion can deliver a gesture's first
-// onPan before its onPanStart, so a baseline captured in onPanStart can be stale.
-// applyDragDelta/applyResizeDelta avoid that by folding framer's per-event `delta` onto
-// whatever rect is passed in, with no baseline to go stale.
+// onPan can arrive before onPanStart, so these prove the delta-folding approach has no
+// baseline to go stale across back-to-back gestures.
 describe("applyResizeDelta / applyDragDelta — gesture sequencing", () => {
   const start: Rect = { x: 100, y: 100, w: 300, h: 200 };
   const minSize = { w: 100, h: 80 };
diff --git a/apps/webapp/app/components/primitives/draggableResizableMath.ts b/apps/webapp/app/components/primitives/draggableResizableMath.ts
index 5668b6e9803..dfeecd2ca8e 100644
--- a/apps/webapp/app/components/primitives/draggableResizableMath.ts
+++ b/apps/webapp/app/components/primitives/draggableResizableMath.ts
@@ -42,12 +42,8 @@ export function clampRectToViewport(rect: Rect, viewport: Viewport, padding: num
   return { ...position, w: rect.w, h: rect.h };
 }
 
-/**
- * Applies a pointer delta to `start` for the given resize edge, respecting min/max size
- * and the viewport bounds. North/west edges move the opposite corner too so the far edge
- * stays put — the per-edge cap is derived from the *fixed* far edge, so growth can never
- * push it past the viewport padding.
- */
+// North/west edges move the opposite corner too, so the cap is derived from the fixed far
+// edge and growth can't push it past the viewport padding.
 export function resizeRect(
   edge: ResizeEdge,
   start: Rect,
@@ -90,12 +86,8 @@ export function resizeRect(
   return { x, y, w, h };
 }
 
-/**
- * Applies one incremental pan step (framer's per-event `delta`, not cumulative `offset`)
- * to `current` and re-clamps. Incremental rather than start-snapshot-based because
- * framer-motion can deliver a gesture's first `onPan` before its `onPanStart`, which
- * would leave a snapshot baseline stale.
- */
+// Incremental (framer's per-event `delta`), not start-snapshot-based, since onPan can
+// arrive before onPanStart and leave a snapshot baseline stale.
 export function applyDragDelta(
   current: Rect,
   delta: Point,
diff --git a/apps/webapp/app/routes/storybook.dashboard-agent-floating/route.tsx b/apps/webapp/app/routes/storybook.dashboard-agent-floating/route.tsx
index a7dabb934b1..a778d11f823 100644
--- a/apps/webapp/app/routes/storybook.dashboard-agent-floating/route.tsx
+++ b/apps/webapp/app/routes/storybook.dashboard-agent-floating/route.tsx
@@ -29,9 +29,7 @@ export default function Story() {
     setMounted(true);
   }, []);
 
-  // Storybook only: the demo window must not follow you to another story. The real
-  // dashboard's chat intentionally persists across navigation — this effect is scoped to
-  // this story route and has no equivalent in DashboardAgent.tsx.
+  // Storybook only: closes the demo on route change. The real chat intentionally persists.
   const { pathname } = useLocation();
   const previousPathname = useRef(pathname);
   useEffect(() => {

From 8e411e1e00cfc52168e5e6596014552aa621ce87 Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Wed, 26 Aug 2026 20:32:29 +0000
Subject: [PATCH 25/43] fix(webapp): resume prose-only turns too; behavioral
 resume test; restore a comment clause

transcriptLooksUnfinished only checked open investigations and
in-flight tool parts, so a text-only assistant reply mid-stream
derived streaming:false on reopen. OR in a new check: the last
assistant message has a `text` part with state "streaming".

resume-wiring.test.ts: extracted the transport's per-chat sessions
option into chatSessionsOption (DashboardAgentChat.tsx) and test it
behaviorally, feeding it a real resolveOpenedChat result instead of
grepping for a source substring. Retitled the stopGeneration test to
say what it actually checks (occurrence count, not call sites).

panel-layout.tsx: restored the clause that FloatingAgentWindow owns
the drag-vs-click filter, so the panel and the story stay identical.
---
 .../dashboard-agent/DashboardAgentChat.tsx    | 28 +++++----
 .../dashboard-agent/panel-layout.tsx          |  5 +-
 .../dashboard-agent/progress-line.ts          |  7 +++
 .../dashboard-agent/resume-wiring.test.ts     | 58 +++++++++++++++----
 .../settled-transcript.test.ts                | 16 +++++
 .../dashboard-agent/settled-transcript.ts     | 13 ++++-
 6 files changed, 104 insertions(+), 23 deletions(-)

diff --git a/apps/webapp/app/components/dashboard-agent/DashboardAgentChat.tsx b/apps/webapp/app/components/dashboard-agent/DashboardAgentChat.tsx
index c36a9692e71..0cc0942b72f 100644
--- a/apps/webapp/app/components/dashboard-agent/DashboardAgentChat.tsx
+++ b/apps/webapp/app/components/dashboard-agent/DashboardAgentChat.tsx
@@ -46,6 +46,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;
@@ -158,16 +175,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");
diff --git a/apps/webapp/app/components/dashboard-agent/panel-layout.tsx b/apps/webapp/app/components/dashboard-agent/panel-layout.tsx
index 224cde232e7..0bf19dcba2f 100644
--- a/apps/webapp/app/components/dashboard-agent/panel-layout.tsx
+++ b/apps/webapp/app/components/dashboard-agent/panel-layout.tsx
@@ -69,7 +69,10 @@ export function agentHiddenContentClassName(fullscreen: boolean): string {
   return cn("h-full overflow-hidden", fullscreen && "invisible");
 }
 
-/** Fullscreen needs a `relative` ancestor for `agentTakeoverClassName`, supplied by the caller. */
+/**
+ * Owns the drag-vs-click filter, so the panel and the standalone story behave identically.
+ * Fullscreen needs a `relative` ancestor for `agentTakeoverClassName`, supplied by the caller.
+ */
 export function FloatingAgentWindow({
   fullscreen,
   children,
diff --git a/apps/webapp/app/components/dashboard-agent/progress-line.ts b/apps/webapp/app/components/dashboard-agent/progress-line.ts
index 0f9c1bcd95e..f853ab94af1 100644
--- a/apps/webapp/app/components/dashboard-agent/progress-line.ts
+++ b/apps/webapp/app/components/dashboard-agent/progress-line.ts
@@ -106,6 +106,13 @@ export function inFlightToolName(messages: ReadonlyArray<ProgressMessage>): stri
   return null;
 }
 
+/** A prose-only turn has no tool part to catch; a `text` part mid-stream has `state: "streaming"`. */
+export function hasUnfinishedTextPart(messages: ReadonlyArray<ProgressMessage>): boolean {
+  const last = messages[messages.length - 1];
+  if (!last || last.role !== "assistant") return false;
+  return partsOf(last).some((part) => part?.type === "text" && part.state === "streaming");
+}
+
 /** Must stay non-null for the whole in-flight period: null unmounts, and a gap blinks. */
 export function liveProgress(
   messages: ReadonlyArray<ProgressMessage>,
diff --git a/apps/webapp/app/components/dashboard-agent/resume-wiring.test.ts b/apps/webapp/app/components/dashboard-agent/resume-wiring.test.ts
index ffc094cd78e..8efb1194726 100644
--- a/apps/webapp/app/components/dashboard-agent/resume-wiring.test.ts
+++ b/apps/webapp/app/components/dashboard-agent/resume-wiring.test.ts
@@ -1,19 +1,57 @@
 import { readFileSync } from "node:fs";
 import { describe, expect, it } from "vitest";
+import { chatSessionsOption } from "./DashboardAgentChat";
+import { resolveOpenedChat } from "./opened-chat";
 
-// Structural guard: a live SSE resume is impractical in jsdom, so this pins the wiring
-// instead. `opened-chat.test.ts` covers the `streaming` value; this covers it reaching the transport.
-describe("the panel's resume wiring, source-checked", () => {
-  const chat = readFileSync(new URL("./DashboardAgentChat.tsx", import.meta.url), "utf8");
-  const panel = readFileSync(new URL("./DashboardAgentPanel.tsx", import.meta.url), "utf8");
+const CHAT_ID = "chat_abc123";
+
+// A tool call the stream died on: still `input-available`, no result part.
+const unfinishedMessage = {
+  id: "msg_2",
+  role: "assistant",
+  parts: [{ type: "tool-run_query", state: "input-available" }],
+};
+
+describe("the transport's sessions option, built from a real resolveOpenedChat result", () => {
+  it("marks isStreaming when the reopened chat's transcript still looks mid-turn", () => {
+    const opened = resolveOpenedChat(CHAT_ID, {
+      messages: [unfinishedMessage],
+      session: { publicAccessToken: "pat_1", lastEventId: "evt_9" },
+    });
+    if (opened.kind !== "chat") throw new Error("expected a chat");
 
-  it("marks a reopened chat's session isStreaming from the `streaming` prop", () => {
-    expect(chat).toContain("isStreaming: streaming ?? false");
+    const sessions = chatSessionsOption(CHAT_ID, opened.session, opened.streaming);
+
+    expect(sessions?.[CHAT_ID]?.isStreaming).toBe(true);
   });
 
-  it("only stopGeneration is called from the explicit Stop button and the gated teardown", () => {
-    const calls = [...chat.matchAll(/transport\.stopGeneration\(/g)];
-    expect(calls).toHaveLength(1);
+  it("does not mark isStreaming once the transcript has settled", () => {
+    const settledMessage = { id: "msg_1", role: "user", parts: [{ type: "text", text: "hi" }] };
+    const opened = resolveOpenedChat(CHAT_ID, {
+      messages: [settledMessage],
+      session: { publicAccessToken: "pat_1", lastEventId: "evt_9" },
+    });
+    if (opened.kind !== "chat") throw new Error("expected a chat");
+
+    const sessions = chatSessionsOption(CHAT_ID, opened.session, opened.streaming);
+
+    expect(sessions?.[CHAT_ID]?.isStreaming).toBe(false);
+  });
+
+  it("omits the session entirely when there is none to resume", () => {
+    expect(chatSessionsOption(CHAT_ID, null, true)).toBeUndefined();
+  });
+});
+
+// Structural: a live SSE resume is impractical in jsdom, so the teardown decision is
+// pinned by source instead of driven end to end.
+describe("the chat's teardown decision, source-checked", () => {
+  const chat = readFileSync(new URL("./DashboardAgentChat.tsx", import.meta.url), "utf8");
+  const panel = readFileSync(new URL("./DashboardAgentPanel.tsx", import.meta.url), "utf8");
+
+  it("has exactly one `transport.stopGeneration(` call site, gated by teardownCancelsTurn", () => {
+    const occurrences = [...chat.matchAll(/transport\.stopGeneration\(/g)];
+    expect(occurrences).toHaveLength(1);
     expect(chat).toContain("if (!teardownCancelsTurn(reason)) return;");
   });
 
diff --git a/apps/webapp/app/components/dashboard-agent/settled-transcript.test.ts b/apps/webapp/app/components/dashboard-agent/settled-transcript.test.ts
index 1adcb6efe58..884f7348782 100644
--- a/apps/webapp/app/components/dashboard-agent/settled-transcript.test.ts
+++ b/apps/webapp/app/components/dashboard-agent/settled-transcript.test.ts
@@ -171,10 +171,26 @@ describe("deciding whether a settled turn is worth re-reading", () => {
     parts: [{ type: "tool-get_report", toolCallId: "call_1", state: "input-available" }],
   };
 
+  // A prose-only reply: no tool part to catch, just a `text` part still streaming.
+  const DANGLING_TEXT = {
+    id: "msg_dangling_text",
+    role: "assistant",
+    parts: [{ type: "text", text: "Concurrency on the ", state: "streaming" }],
+  };
+
   it("re-reads when the stream died mid-tool, not only when a card is open", () => {
     expect(transcriptLooksUnfinished([DANGLING_TOOL])).toBe(true);
   });
 
+  it("re-reads when the stream died mid-text, with no tool part at all", () => {
+    expect(transcriptLooksUnfinished([DANGLING_TEXT])).toBe(true);
+  });
+
+  it("leaves a finished text part alone", () => {
+    const finished = { ...DANGLING_TEXT, parts: [{ type: "text", text: "Done.", state: "done" }] };
+    expect(transcriptLooksUnfinished([finished])).toBe(false);
+  });
+
   it("re-reads while a card is still open", () => {
     expect(transcriptLooksUnfinished([OPEN])).toBe(true);
   });
diff --git a/apps/webapp/app/components/dashboard-agent/settled-transcript.ts b/apps/webapp/app/components/dashboard-agent/settled-transcript.ts
index 187d67f5588..b9bc281e282 100644
--- a/apps/webapp/app/components/dashboard-agent/settled-transcript.ts
+++ b/apps/webapp/app/components/dashboard-agent/settled-transcript.ts
@@ -1,4 +1,9 @@
-import { IN_FLIGHT_TOOL_STATES, inFlightToolName, liveInvestigation } from "./progress-line";
+import {
+  hasUnfinishedTextPart,
+  IN_FLIGHT_TOOL_STATES,
+  inFlightToolName,
+  liveInvestigation,
+} from "./progress-line";
 
 /**
  * Re-reading the stored transcript once a turn settles.
@@ -65,7 +70,11 @@ export function hasOpenInvestigation(messages: ReadonlyArray<unknown>): boolean
  * not the only shape a re-read has to recover from.
  */
 export function transcriptLooksUnfinished(messages: ReadonlyArray<unknown>): boolean {
-  return hasOpenInvestigation(messages) || inFlightToolName(messages as never) !== null;
+  return (
+    hasOpenInvestigation(messages) ||
+    inFlightToolName(messages as never) !== null ||
+    hasUnfinishedTextPart(messages as never)
+  );
 }
 
 /**

From 8dea45a0973278b202ef679600a510bfd194f771 Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Wed, 26 Aug 2026 20:50:18 +0000
Subject: [PATCH 26/43] fix(webapp): fullscreen toggle remounted the chat;
 settle-merge missed streaming text
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 .../dashboard-agent/panel-layout.dom.test.ts  | 35 +++++++-
 .../dashboard-agent/panel-layout.tsx          | 85 ++++++++++---------
 .../settled-transcript.test.ts                | 21 +++++
 .../dashboard-agent/settled-transcript.ts     |  9 +-
 4 files changed, 104 insertions(+), 46 deletions(-)

diff --git a/apps/webapp/app/components/dashboard-agent/panel-layout.dom.test.ts b/apps/webapp/app/components/dashboard-agent/panel-layout.dom.test.ts
index d7486767457..cdda296b6b2 100644
--- a/apps/webapp/app/components/dashboard-agent/panel-layout.dom.test.ts
+++ b/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);
+  });
+});
diff --git a/apps/webapp/app/components/dashboard-agent/panel-layout.tsx b/apps/webapp/app/components/dashboard-agent/panel-layout.tsx
index 0bf19dcba2f..0c4593348ba 100644
--- a/apps/webapp/app/components/dashboard-agent/panel-layout.tsx
+++ b/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>
   );
 }
diff --git a/apps/webapp/app/components/dashboard-agent/settled-transcript.test.ts b/apps/webapp/app/components/dashboard-agent/settled-transcript.test.ts
index 884f7348782..eafb42b8c16 100644
--- a/apps/webapp/app/components/dashboard-agent/settled-transcript.test.ts
+++ b/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", () => {
diff --git a/apps/webapp/app/components/dashboard-agent/settled-transcript.ts b/apps/webapp/app/components/dashboard-agent/settled-transcript.ts
index b9bc281e282..61a8ff885a4 100644
--- a/apps/webapp/app/components/dashboard-agent/settled-transcript.ts
+++ b/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")
   );
 }
 

From 00051e92ff1dde93959f6f5ce3280c70f7031ae8 Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Fri, 28 Aug 2026 06:22:50 +0000
Subject: [PATCH 27/43] fix(webapp): raise dashboard agent chat z-index to 30

---
 apps/webapp/app/components/dashboard-agent/panel-layout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/webapp/app/components/dashboard-agent/panel-layout.tsx b/apps/webapp/app/components/dashboard-agent/panel-layout.tsx
index 0c4593348ba..ade035d2930 100644
--- a/apps/webapp/app/components/dashboard-agent/panel-layout.tsx
+++ b/apps/webapp/app/components/dashboard-agent/panel-layout.tsx
@@ -128,7 +128,7 @@ export function FloatingAgentWindow({
       className={
         fullscreen
           ? agentTakeoverClassName(true)
-          : "z-20 flex flex-col rounded-lg border border-border-bright bg-background-bright shadow-2xl"
+          : "z-30 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,

From 91dbd9b9b94577386769d3338236a057afc04eeb Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Fri, 28 Aug 2026 06:28:47 +0000
Subject: [PATCH 28/43] feat(webapp): add chat display mode icons

---
 .../app/assets/icons/ChatFloatingPanel.tsx    | 23 +++++++++++++++++++
 .../app/assets/icons/ChatFullScreen.tsx       | 20 ++++++++++++++++
 .../app/assets/icons/ChatRightPanel.tsx       | 20 ++++++++++++++++
 3 files changed, 63 insertions(+)
 create mode 100644 apps/webapp/app/assets/icons/ChatFloatingPanel.tsx
 create mode 100644 apps/webapp/app/assets/icons/ChatFullScreen.tsx
 create mode 100644 apps/webapp/app/assets/icons/ChatRightPanel.tsx

diff --git a/apps/webapp/app/assets/icons/ChatFloatingPanel.tsx b/apps/webapp/app/assets/icons/ChatFloatingPanel.tsx
new file mode 100644
index 00000000000..ccb283128c5
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/apps/webapp/app/assets/icons/ChatFullScreen.tsx b/apps/webapp/app/assets/icons/ChatFullScreen.tsx
new file mode 100644
index 00000000000..39a2df5be32
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/apps/webapp/app/assets/icons/ChatRightPanel.tsx b/apps/webapp/app/assets/icons/ChatRightPanel.tsx
new file mode 100644
index 00000000000..e7056149906
--- /dev/null
+++ b/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>
+  );
+}

From 23b958f96d493cd04f5643e1bf79044639ca7eb2 Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Fri, 28 Aug 2026 06:36:16 +0000
Subject: [PATCH 29/43] feat(webapp): chat display mode switcher (floating,
 right panel, fullscreen)

---
 .../dashboard-agent/DashboardAgent.tsx        | 111 ++++++++++++------
 .../dashboard-agent/DashboardAgentHeader.tsx  |  70 +++++++----
 .../dashboard-agent/DashboardAgentPanel.tsx   |  16 +--
 .../dashboard-agent/panel-layout.tsx          |  23 ++--
 .../route.tsx                                 |  14 ++-
 5 files changed, 160 insertions(+), 74 deletions(-)

diff --git a/apps/webapp/app/components/dashboard-agent/DashboardAgent.tsx b/apps/webapp/app/components/dashboard-agent/DashboardAgent.tsx
index 85d60e5bf53..128badf3755 100644
--- a/apps/webapp/app/components/dashboard-agent/DashboardAgent.tsx
+++ b/apps/webapp/app/components/dashboard-agent/DashboardAgent.tsx
@@ -1,6 +1,11 @@
 import type { SuggestedPrompt, WatchSpec } from "@internal/dashboard-agent-contracts";
 import { useLocation } from "@remix-run/react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "~/components/primitives/Resizable";
 import { useEnvironment } from "~/hooks/useEnvironment";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
@@ -12,9 +17,11 @@ import { DashboardAgentProvider, TOGGLE_PANEL_SHORTCUT } from "./dashboardAgentL
 import { useDashboardAgentOpenRequests } from "./dashboardAgentOpenRequest";
 import {
   agentHiddenContentClassName,
+  agentTakeoverClassName,
   FloatingAgentWindow,
-  readAgentFullscreen,
-  writeAgentFullscreen,
+  readAgentMode,
+  writeAgentMode,
+  type DashboardAgentMode,
 } from "./panel-layout";
 import { nextPendingTurnChatId } from "./pending-turn";
 import { nextVisibleChat } from "./unread-counts";
@@ -110,13 +117,12 @@ export function DashboardAgent({
     setUnreadWork(initialUnreadWork);
   }, [environment.id, initialUnreadWakes, initialUnreadWork]);
   // Read lazily so SSR always renders the side panel.
-  const [fullscreen, setFullscreen] = useState(readAgentFullscreen);
+  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.
@@ -125,9 +131,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);
@@ -160,8 +167,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);
@@ -344,27 +354,60 @@ export function DashboardAgent({
         // `relative` is the fullscreen takeover's containing block; the non-fullscreen
         // window is a page-wide floating overlay and doesn't need it.
         <div className="relative h-full min-h-0">
-          <div className={agentHiddenContentClassName(fullscreen)}>{children}</div>
-          <FloatingAgentWindow fullscreen={fullscreen}>
-            {({ 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}
-                isFullscreen={fullscreen}
-                onToggleFullscreen={toggleFullscreen}
-                dragHandleProps={dragHandleProps}
-                dragHandleClassName={dragHandleClassName}
-              />
-            )}
-          </FloatingAgentWindow>
+          {mode === "rightPanel" ? (
+            <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" />
+              <ResizablePanel id="dashboard-agent-panel" default="380px" min="320px" max="720px">
+                <div className={agentTakeoverClassName(false)}>
+                  <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}
+                  />
+                </div>
+              </ResizablePanel>
+            </ResizablePanelGroup>
+          ) : (
+            <>
+              <div className={agentHiddenContentClassName(fullscreen)}>{children}</div>
+              <FloatingAgentWindow fullscreen={fullscreen}>
+                {({ 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>
+            </>
+          )}
         </div>
       ) : (
         <div className="h-full min-h-0 overflow-hidden">{children}</div>
diff --git a/apps/webapp/app/components/dashboard-agent/DashboardAgentHeader.tsx b/apps/webapp/app/components/dashboard-agent/DashboardAgentHeader.tsx
index 970377efc07..bf2486a5a78 100644
--- a/apps/webapp/app/components/dashboard-agent/DashboardAgentHeader.tsx
+++ b/apps/webapp/app/components/dashboard-agent/DashboardAgentHeader.tsx
@@ -1,9 +1,17 @@
-import { ArrowsPointingInIcon, ArrowsPointingOutIcon } from "@heroicons/react/20/solid";
 import { useState } from "react";
+import { ChatFloatingPanel } from "~/assets/icons/ChatFloatingPanel";
+import { ChatFullScreen } from "~/assets/icons/ChatFullScreen";
+import { ChatRightPanel } from "~/assets/icons/ChatRightPanel";
 import { CrossIcon } from "~/assets/icons/CrossIcon";
 import { PlusIcon } from "~/assets/icons/PlusIcon";
 import { Button } from "~/components/primitives/Buttons";
-import { Popover, PopoverArrowTrigger, PopoverContent } from "~/components/primitives/Popover";
+import {
+  Popover,
+  PopoverArrowTrigger,
+  PopoverContent,
+  PopoverMenuItem,
+  PopoverTrigger,
+} from "~/components/primitives/Popover";
 import { ShortcutKey } from "~/components/primitives/ShortcutKey";
 import type { Shortcut } from "~/hooks/useShortcutKeys";
 import {
@@ -12,6 +20,14 @@ import {
   type DashboardAgentChat,
 } from "./DashboardAgentHistory";
 import { chatHistoryTriggerLabel } from "./header-labels";
+import type { DashboardAgentMode } from "./panel-layout";
+
+const MODE_OPTIONS: { mode: DashboardAgentMode; label: string; Icon: typeof ChatFloatingPanel }[] =
+  [
+    { mode: "floating", label: "Floating window", Icon: ChatFloatingPanel },
+    { mode: "rightPanel", label: "Side panel", Icon: ChatRightPanel },
+    { mode: "fullscreen", label: "Fullscreen", Icon: ChatFullScreen },
+  ];
 
 // Display only. The key is registered once, in `DashboardAgent`; registering it
 // anywhere else makes the keystroke fire twice.
@@ -31,8 +47,8 @@ export function DashboardAgentHeader({
   onOpenHistory,
   onSelectChat,
   onDeleteChat,
-  onToggleFullscreen,
-  isFullscreen,
+  mode,
+  onModeChange,
   onClose,
 }: {
   title: string;
@@ -44,13 +60,16 @@ export function DashboardAgentHeader({
   onOpenHistory: () => void;
   onSelectChat: (chatId: string) => void;
   onDeleteChat: (chatId: string) => void;
-  onToggleFullscreen: () => void;
-  isFullscreen: boolean;
+  mode: DashboardAgentMode;
+  onModeChange: (mode: DashboardAgentMode) => void;
   onClose: () => void;
 }) {
   const [isHistoryOpen, setHistoryOpen] = useState(false);
   const [historyOpenedAt, setHistoryOpenedAt] = useState<number | null>(null);
   const [pendingDelete, setPendingDelete] = useState<DashboardAgentChat | null>(null);
+  const [isModeMenuOpen, setModeMenuOpen] = useState(false);
+  const CurrentModeIcon =
+    MODE_OPTIONS.find((option) => option.mode === mode)?.Icon ?? ChatFloatingPanel;
 
   return (
     <div className="flex h-10 shrink-0 items-center justify-between gap-2 border-b border-grid-bright pl-1 pr-1.5">
@@ -119,20 +138,31 @@ 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" />
-            )
-          }
-        />
+        <Popover open={isModeMenuOpen} onOpenChange={setModeMenuOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="minimal/small"
+              className="aspect-square h-6 p-1"
+              aria-label="Change chat display mode"
+              tooltip="Display mode"
+              LeadingIcon={<CurrentModeIcon className="size-4 text-text-dimmed" />}
+            />
+          </PopoverTrigger>
+          <PopoverContent align="end" className="w-44 p-1">
+            {MODE_OPTIONS.map(({ mode: option, label, Icon }) => (
+              <PopoverMenuItem
+                key={option}
+                icon={Icon}
+                title={label}
+                isSelected={option === mode}
+                onClick={() => {
+                  onModeChange(option);
+                  setModeMenuOpen(false);
+                }}
+              />
+            ))}
+          </PopoverContent>
+        </Popover>
         <Button
           variant="minimal/small"
           className="aspect-square h-6 p-1"
diff --git a/apps/webapp/app/components/dashboard-agent/DashboardAgentPanel.tsx b/apps/webapp/app/components/dashboard-agent/DashboardAgentPanel.tsx
index 8e867d8803f..f4d8fff6d86 100644
--- a/apps/webapp/app/components/dashboard-agent/DashboardAgentPanel.tsx
+++ b/apps/webapp/app/components/dashboard-agent/DashboardAgentPanel.tsx
@@ -50,7 +50,7 @@ import {
   settleReadChats,
   unreadWorkCount,
 } from "./unread-counts";
-import { AgentPanelColumn } from "./panel-layout";
+import { AgentPanelColumn, type DashboardAgentMode } from "./panel-layout";
 import { markerAfterActiveChat, markerAfterActivity } from "./thinking-marker";
 import { concurrencyPath } from "~/utils/pathBuilder";
 
@@ -84,14 +84,14 @@ export function DashboardAgentPanel({
   onChatRead,
   onUnreadWorkChange,
   onTurnActivityChange,
-  isFullscreen = false,
-  onToggleFullscreen,
+  mode = "floating",
+  onModeChange,
   dragHandleProps,
   dragHandleClassName,
 }: {
   onClose: () => void;
-  isFullscreen?: boolean;
-  onToggleFullscreen?: () => void;
+  mode?: DashboardAgentMode;
+  onModeChange?: (mode: DashboardAgentMode) => void;
   /** Spread onto the header, which is the floating window's drag handle; already filtered by `FloatingAgentWindow`. */
   dragHandleProps?: Partial<PanHandlerProps>;
   dragHandleClassName?: string;
@@ -621,14 +621,14 @@ export function DashboardAgentPanel({
           onOpenHistory={loadHistory}
           onSelectChat={switchChat}
           onDeleteChat={deleteChat}
-          onToggleFullscreen={onToggleFullscreen ?? (() => {})}
-          isFullscreen={isFullscreen}
+          mode={mode}
+          onModeChange={onModeChange ?? (() => {})}
           onClose={onClose}
         />
       </motion.div>
 
       {/* Always mounted, so the chat keeps its transport, session and transcript. */}
-      <AgentPanelColumn fullscreen={isFullscreen}>
+      <AgentPanelColumn fullscreen={mode === "fullscreen"}>
         {loading ? (
           <div className="flex flex-1 items-center justify-center">
             <AgentSpinner size={20} />
diff --git a/apps/webapp/app/components/dashboard-agent/panel-layout.tsx b/apps/webapp/app/components/dashboard-agent/panel-layout.tsx
index ade035d2930..04b623ba02b 100644
--- a/apps/webapp/app/components/dashboard-agent/panel-layout.tsx
+++ b/apps/webapp/app/components/dashboard-agent/panel-layout.tsx
@@ -21,6 +21,9 @@ export type FloatingDragProps = {
 };
 
 const AGENT_FULLSCREEN_STORAGE_KEY = "tdev:dashboard-agent:fullscreen";
+const AGENT_MODE_STORAGE_KEY = "tdev:dashboard-agent:mode";
+
+export type DashboardAgentMode = "floating" | "rightPanel" | "fullscreen";
 
 // V1 floating window: 380x512, bottom-right, matching the gallery's own panel frame.
 export const FLOATING_WIDTH = 380;
@@ -41,25 +44,31 @@ export function initialFloatingRect() {
   };
 }
 
-export function readAgentFullscreen(): boolean {
-  if (typeof window === "undefined") return false;
+// Reads the old boolean key once, so a browser that only ever knew fullscreen keeps its
+// choice after the upgrade to three modes.
+export function readAgentMode(): DashboardAgentMode {
+  if (typeof window === "undefined") return "floating";
   try {
-    return window.localStorage.getItem(AGENT_FULLSCREEN_STORAGE_KEY) === "true";
+    const stored = window.localStorage.getItem(AGENT_MODE_STORAGE_KEY);
+    if (stored === "floating" || stored === "rightPanel" || stored === "fullscreen") return stored;
+    return window.localStorage.getItem(AGENT_FULLSCREEN_STORAGE_KEY) === "true"
+      ? "fullscreen"
+      : "floating";
   } catch {
-    return false;
+    return "floating";
   }
 }
 
-export function writeAgentFullscreen(fullscreen: boolean): void {
+export function writeAgentMode(mode: DashboardAgentMode): void {
   if (typeof window === "undefined") return;
   try {
-    window.localStorage.setItem(AGENT_FULLSCREEN_STORAGE_KEY, fullscreen ? "true" : "false");
+    window.localStorage.setItem(AGENT_MODE_STORAGE_KEY, mode);
   } catch {
     /* ignore */
   }
 }
 
-function agentTakeoverClassName(fullscreen: boolean): string {
+export function agentTakeoverClassName(fullscreen: boolean): string {
   return fullscreen ? "absolute inset-0 z-10 bg-background-bright" : "h-full";
 }
 
diff --git a/apps/webapp/app/routes/storybook.dashboard-agent-floating/route.tsx b/apps/webapp/app/routes/storybook.dashboard-agent-floating/route.tsx
index a778d11f823..a4cac20fbca 100644
--- a/apps/webapp/app/routes/storybook.dashboard-agent-floating/route.tsx
+++ b/apps/webapp/app/routes/storybook.dashboard-agent-floating/route.tsx
@@ -5,7 +5,10 @@ import { ComponentNames } from "../storybook/StoryKit";
 import { ChatText, ChatTranscript, ChatTurn } from "~/components/dashboard-agent/chat-layout";
 import { DashboardAgentHeader } from "~/components/dashboard-agent/DashboardAgentHeader";
 import type { DashboardAgentChat } from "~/components/dashboard-agent/DashboardAgentHistory";
-import { FloatingAgentWindow } from "~/components/dashboard-agent/panel-layout";
+import {
+  FloatingAgentWindow,
+  type DashboardAgentMode,
+} from "~/components/dashboard-agent/panel-layout";
 import { Button } from "~/components/primitives/Buttons";
 import { Header1 } from "~/components/primitives/Headers";
 import { Paragraph } from "~/components/primitives/Paragraph";
@@ -15,10 +18,11 @@ const NO_CHATS: DashboardAgentChat[] = [];
 /** Static content only: this demos the shell (drag, resize, fullscreen), not a live backend. */
 export default function Story() {
   const [open, setOpen] = useState(true);
-  const [fullscreen, setFullscreen] = useState(false);
+  const [mode, setMode] = useState<DashboardAgentMode>("floating");
+  const fullscreen = mode === "fullscreen";
   const closeWindow = () => {
     setOpen(false);
-    setFullscreen(false);
+    setMode("floating");
   };
 
   // SSR has no window, so the initial rect (and hydrated one) would mismatch; render the
@@ -74,8 +78,8 @@ export default function Story() {
                   onOpenHistory={() => {}}
                   onSelectChat={() => {}}
                   onDeleteChat={() => {}}
-                  onToggleFullscreen={() => setFullscreen((f) => !f)}
-                  isFullscreen={fullscreen}
+                  mode={mode}
+                  onModeChange={setMode}
                   onClose={closeWindow}
                 />
               </motion.div>

From 78cca263d5c3029247c39cf58e361b55866797ef Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Fri, 28 Aug 2026 06:42:58 +0000
Subject: [PATCH 30/43] feat(webapp): move chat context and new-chat button
 under input; 360px floating default

---
 .../dashboard-agent/DashboardAgentChat.tsx    | 25 +++++++++++++++++++
 .../DashboardAgentComposer.tsx                | 10 +++++++-
 .../dashboard-agent/DashboardAgentHeader.tsx  | 20 ---------------
 .../dashboard-agent/DashboardAgentPanel.tsx   |  4 +--
 .../dashboard-agent/panel-layout.tsx          |  2 +-
 .../route.tsx                                 |  2 --
 6 files changed, 37 insertions(+), 26 deletions(-)

diff --git a/apps/webapp/app/components/dashboard-agent/DashboardAgentChat.tsx b/apps/webapp/app/components/dashboard-agent/DashboardAgentChat.tsx
index 0cc0942b72f..05f79f67480 100644
--- a/apps/webapp/app/components/dashboard-agent/DashboardAgentChat.tsx
+++ b/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 {
@@ -97,6 +101,8 @@ export function DashboardAgentChat({
   onTurnSettled,
   onActivityChange,
   onQuotaChange,
+  onNewChat,
+  showNewChat,
 }: {
   chatId: string;
   initialMessages: UIMessage[];
@@ -126,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
@@ -497,6 +505,23 @@ export function DashboardAgentChat({
                 currentPage={currentPage}
               />
             }
+            trailingAction={
+              showNewChat && (
+                <Button
+                  variant="minimal/small"
+                  className="aspect-square h-6 shrink-0 p-1"
+                  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} />
diff --git a/apps/webapp/app/components/dashboard-agent/DashboardAgentComposer.tsx b/apps/webapp/app/components/dashboard-agent/DashboardAgentComposer.tsx
index 3ecfba0fe9d..147f599326b 100644
--- a/apps/webapp/app/components/dashboard-agent/DashboardAgentComposer.tsx
+++ b/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">
diff --git a/apps/webapp/app/components/dashboard-agent/DashboardAgentHeader.tsx b/apps/webapp/app/components/dashboard-agent/DashboardAgentHeader.tsx
index bf2486a5a78..a5a0e0ac1b3 100644
--- a/apps/webapp/app/components/dashboard-agent/DashboardAgentHeader.tsx
+++ b/apps/webapp/app/components/dashboard-agent/DashboardAgentHeader.tsx
@@ -3,7 +3,6 @@ import { ChatFloatingPanel } from "~/assets/icons/ChatFloatingPanel";
 import { ChatFullScreen } from "~/assets/icons/ChatFullScreen";
 import { ChatRightPanel } from "~/assets/icons/ChatRightPanel";
 import { CrossIcon } from "~/assets/icons/CrossIcon";
-import { PlusIcon } from "~/assets/icons/PlusIcon";
 import { Button } from "~/components/primitives/Buttons";
 import {
   Popover,
@@ -42,8 +41,6 @@ export function DashboardAgentHeader({
   chats,
   currentChatId,
   thinkingChatId,
-  onNewChat,
-  showNewChat,
   onOpenHistory,
   onSelectChat,
   onDeleteChat,
@@ -55,8 +52,6 @@ export function DashboardAgentHeader({
   chats: DashboardAgentChat[];
   currentChatId: string;
   thinkingChatId?: string | null;
-  onNewChat: () => void;
-  showNewChat: boolean;
   onOpenHistory: () => void;
   onSelectChat: (chatId: string) => void;
   onDeleteChat: (chatId: string) => void;
@@ -123,21 +118,6 @@ export function DashboardAgentHeader({
       />
 
       <div className="flex shrink-0 items-center gap-0.5" data-agent-no-drag>
-        {showNewChat && (
-          <Button
-            variant="minimal/small"
-            className="aspect-square h-6 p-1"
-            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" />}
-          />
-        )}
         <Popover open={isModeMenuOpen} onOpenChange={setModeMenuOpen}>
           <PopoverTrigger asChild>
             <Button
diff --git a/apps/webapp/app/components/dashboard-agent/DashboardAgentPanel.tsx b/apps/webapp/app/components/dashboard-agent/DashboardAgentPanel.tsx
index f4d8fff6d86..72d681121ab 100644
--- a/apps/webapp/app/components/dashboard-agent/DashboardAgentPanel.tsx
+++ b/apps/webapp/app/components/dashboard-agent/DashboardAgentPanel.tsx
@@ -616,8 +616,6 @@ export function DashboardAgentPanel({
           chats={chats}
           currentChatId={active?.chatId ?? ""}
           thinkingChatId={thinkingChatId}
-          onNewChat={newChat}
-          showNewChat={active !== null}
           onOpenHistory={loadHistory}
           onSelectChat={switchChat}
           onDeleteChat={deleteChat}
@@ -663,6 +661,8 @@ export function DashboardAgentPanel({
             onTurnSettled={loadHistory}
             onActivityChange={handleActivityChange}
             onQuotaChange={handleQuotaChange}
+            onNewChat={newChat}
+            showNewChat={active !== null}
           />
         ) : (
           <DashboardAgentDraft
diff --git a/apps/webapp/app/components/dashboard-agent/panel-layout.tsx b/apps/webapp/app/components/dashboard-agent/panel-layout.tsx
index 04b623ba02b..0aac3698590 100644
--- a/apps/webapp/app/components/dashboard-agent/panel-layout.tsx
+++ b/apps/webapp/app/components/dashboard-agent/panel-layout.tsx
@@ -27,7 +27,7 @@ export type DashboardAgentMode = "floating" | "rightPanel" | "fullscreen";
 
 // V1 floating window: 380x512, bottom-right, matching the gallery's own panel frame.
 export const FLOATING_WIDTH = 380;
-export const FLOATING_HEIGHT = 512;
+export const FLOATING_HEIGHT = 360;
 export const FLOATING_MARGIN = 16;
 export const FLOATING_MIN_SIZE = { w: 320, h: 360 };
 const RESIZE_EDGES: ResizeEdge[] = ["n", "e", "s", "w", "ne", "nw", "se", "sw"];
diff --git a/apps/webapp/app/routes/storybook.dashboard-agent-floating/route.tsx b/apps/webapp/app/routes/storybook.dashboard-agent-floating/route.tsx
index a4cac20fbca..29e560a79c2 100644
--- a/apps/webapp/app/routes/storybook.dashboard-agent-floating/route.tsx
+++ b/apps/webapp/app/routes/storybook.dashboard-agent-floating/route.tsx
@@ -73,8 +73,6 @@ export default function Story() {
                   chats={NO_CHATS}
                   currentChatId=""
                   thinkingChatId={null}
-                  onNewChat={() => {}}
-                  showNewChat={false}
                   onOpenHistory={() => {}}
                   onSelectChat={() => {}}
                   onDeleteChat={() => {}}

From 581c25bea068e045aafdfbf790875fbdc3d35cb6 Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Fri, 28 Aug 2026 06:49:06 +0000
Subject: [PATCH 31/43] fix(webapp): keep chat mounted across display modes;
 update mode guard test

---
 .../dashboard-agent/DashboardAgent.tsx        | 66 +++++++---------
 .../floating-window-mode.test.ts              | 17 ++--
 .../dashboard-agent/panel-layout.dom.test.ts  | 40 +++++-----
 .../dashboard-agent/panel-layout.tsx          | 78 +++++++++++--------
 .../route.tsx                                 |  3 +-
 5 files changed, 107 insertions(+), 97 deletions(-)

diff --git a/apps/webapp/app/components/dashboard-agent/DashboardAgent.tsx b/apps/webapp/app/components/dashboard-agent/DashboardAgent.tsx
index 128badf3755..5d83c41ed99 100644
--- a/apps/webapp/app/components/dashboard-agent/DashboardAgent.tsx
+++ b/apps/webapp/app/components/dashboard-agent/DashboardAgent.tsx
@@ -17,7 +17,6 @@ import { DashboardAgentProvider, TOGGLE_PANEL_SHORTCUT } from "./dashboardAgentL
 import { useDashboardAgentOpenRequests } from "./dashboardAgentOpenRequest";
 import {
   agentHiddenContentClassName,
-  agentTakeoverClassName,
   FloatingAgentWindow,
   readAgentMode,
   writeAgentMode,
@@ -116,7 +115,7 @@ export function DashboardAgent({
     setUnreadWakes(initialUnreadWakes);
     setUnreadWork(initialUnreadWork);
   }, [environment.id, initialUnreadWakes, initialUnreadWork]);
-  // Read lazily so SSR always renders the side panel.
+  // Read lazily: SSR has no localStorage, so the server always renders the floating default.
   const [mode, setMode] = useState<DashboardAgentMode>(readAgentMode);
   const fullscreen = mode === "fullscreen";
 
@@ -351,42 +350,33 @@ export function DashboardAgent({
   return (
     <DashboardAgentProvider value={context}>
       {open ? (
-        // `relative` is the fullscreen takeover's containing block; the non-fullscreen
-        // window is a page-wide floating overlay and doesn't need it.
+        // `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">
-          {mode === "rightPanel" ? (
-            <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" />
-              <ResizablePanel id="dashboard-agent-panel" default="380px" min="320px" max="720px">
-                <div className={agentTakeoverClassName(false)}>
-                  <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}
-                  />
-                </div>
-              </ResizablePanel>
-            </ResizablePanelGroup>
-          ) : (
-            <>
+          <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>
-              <FloatingAgentWindow fullscreen={fullscreen}>
+            </ResizablePanel>
+            <ResizableHandle
+              id="dashboard-agent-handle"
+              className={mode === "rightPanel" ? undefined : "hidden"}
+            />
+            <ResizablePanel
+              id="dashboard-agent-panel"
+              default={mode === "rightPanel" ? "380px" : "0px"}
+              min={mode === "rightPanel" ? "320px" : "0px"}
+              max={mode === "rightPanel" ? "720px" : "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.
+              className={mode === "rightPanel" ? undefined : "!overflow-visible"}
+            >
+              <FloatingAgentWindow mode={mode}>
                 {({ dragHandleProps, dragHandleClassName }) => (
                   <DashboardAgentPanel
                     onClose={() => setPanelOpen(false)}
@@ -406,8 +396,8 @@ export function DashboardAgent({
                   />
                 )}
               </FloatingAgentWindow>
-            </>
-          )}
+            </ResizablePanel>
+          </ResizablePanelGroup>
         </div>
       ) : (
         <div className="h-full min-h-0 overflow-hidden">{children}</div>
diff --git a/apps/webapp/app/components/dashboard-agent/floating-window-mode.test.ts b/apps/webapp/app/components/dashboard-agent/floating-window-mode.test.ts
index e826517e3c6..87002db9b55 100644
--- a/apps/webapp/app/components/dashboard-agent/floating-window-mode.test.ts
+++ b/apps/webapp/app/components/dashboard-agent/floating-window-mode.test.ts
@@ -1,4 +1,6 @@
-// Guards against reintroducing the old right-column ResizablePanelGroup.
+// Guards the tree-shape invariant: DashboardAgent.tsx must mount FloatingAgentWindow
+// exactly once, never branch it behind a mode check, and gate the right-column sizing
+// on `mode === "rightPanel"` rather than swapping in a whole separate element tree.
 import { readFileSync } from "node:fs";
 import { join } from "node:path";
 import { describe, expect, it } from "vitest";
@@ -9,16 +11,19 @@ function read(file: string): string {
   return readFileSync(join(DIR, file), "utf8");
 }
 
-describe("DashboardAgent.tsx stays on the floating window, not the right-column mode", () => {
+describe("DashboardAgent.tsx keeps one tree shape across display modes", () => {
   const source = read("DashboardAgent.tsx");
 
-  it("never reintroduces the right-column ResizablePanelGroup", () => {
-    expect(source).not.toContain("ResizablePanelGroup");
-    expect(source).not.toContain("ResizablePanel");
-    expect(source).not.toContain("ResizableHandle");
+  it("mounts FloatingAgentWindow exactly once, unconditionally", () => {
+    const occurrences = source.match(/<FloatingAgentWindow\b/g) ?? [];
+    expect(occurrences).toHaveLength(1);
   });
 
   it("renders the open panel through FloatingAgentWindow", () => {
     expect(source).toContain("FloatingAgentWindow");
   });
+
+  it('gates the right-column sizing on mode === "rightPanel", not a branch around FloatingAgentWindow', () => {
+    expect(source).toContain('mode === "rightPanel" ? "380px" : "0px"');
+  });
 });
diff --git a/apps/webapp/app/components/dashboard-agent/panel-layout.dom.test.ts b/apps/webapp/app/components/dashboard-agent/panel-layout.dom.test.ts
index cdda296b6b2..b1bbefc5a94 100644
--- a/apps/webapp/app/components/dashboard-agent/panel-layout.dom.test.ts
+++ b/apps/webapp/app/components/dashboard-agent/panel-layout.dom.test.ts
@@ -12,6 +12,7 @@ import {
   FLOATING_WIDTH,
   FloatingAgentWindow,
   initialFloatingRect,
+  type DashboardAgentMode,
   type FloatingDragProps,
 } from "./panel-layout";
 
@@ -102,7 +103,7 @@ describe("the floating window's rect, wired with panel-layout's own constants",
 function renderFloatingAgentWindow() {
   let latest!: FloatingDragProps;
   function Harness() {
-    return createElement(FloatingAgentWindow, { fullscreen: false }, (drag: FloatingDragProps) => {
+    return createElement(FloatingAgentWindow, { mode: "floating" }, (drag: FloatingDragProps) => {
       // oxlint-disable-next-line react/globals -- test harness capturing the render-prop's value.
       latest = drag;
       return createElement(
@@ -175,8 +176,8 @@ describe("FloatingAgentWindow's drag-vs-click filter", () => {
   });
 });
 
-describe("FloatingAgentWindow keeps its child mounted across a fullscreen toggle", () => {
-  it("never remounts the child when `fullscreen` flips (same tree shape both ways)", () => {
+describe("FloatingAgentWindow keeps its child mounted across every mode transition", () => {
+  it("never remounts the child across any of the three modes (same tree shape always)", () => {
     let mounts = 0;
     function Marker() {
       useEffect(() => {
@@ -184,26 +185,29 @@ describe("FloatingAgentWindow keeps its child mounted across a fullscreen toggle
       }, []);
       return null;
     }
-    function Harness({ fullscreen }: { fullscreen: boolean }) {
-      return createElement(FloatingAgentWindow, { fullscreen }, () => createElement(Marker));
+    function Harness({ mode }: { mode: DashboardAgentMode }) {
+      return createElement(FloatingAgentWindow, { mode }, () => 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);
+    // Every pairwise transition among the three modes, in both directions.
+    const sequence: DashboardAgentMode[] = [
+      "floating",
+      "rightPanel",
+      "floating",
+      "fullscreen",
+      "rightPanel",
+      "fullscreen",
+      "floating",
+    ];
+    for (const mode of sequence) {
+      act(() => {
+        root!.render(createElement(Harness, { mode }));
+      });
+      expect(mounts).toBe(1);
+    }
   });
 });
diff --git a/apps/webapp/app/components/dashboard-agent/panel-layout.tsx b/apps/webapp/app/components/dashboard-agent/panel-layout.tsx
index 0aac3698590..1828b550ee4 100644
--- a/apps/webapp/app/components/dashboard-agent/panel-layout.tsx
+++ b/apps/webapp/app/components/dashboard-agent/panel-layout.tsx
@@ -1,4 +1,4 @@
-// Both class helpers apply to always-rendered wrappers, so toggling fullscreen is a
+// Both class helpers apply to always-rendered wrappers, so switching display mode is a
 // class change only and the open chat's transport, session and transcript survive it.
 import { useMemo, useRef, useState } from "react";
 import { motion, type PanInfo } from "framer-motion";
@@ -68,7 +68,7 @@ export function writeAgentMode(mode: DashboardAgentMode): void {
   }
 }
 
-export function agentTakeoverClassName(fullscreen: boolean): string {
+function agentTakeoverClassName(fullscreen: boolean): string {
   return fullscreen ? "absolute inset-0 z-10 bg-background-bright" : "h-full";
 }
 
@@ -81,14 +81,18 @@ export function agentHiddenContentClassName(fullscreen: boolean): string {
 /**
  * Owns the drag-vs-click filter, so the panel and the standalone story behave identically.
  * Fullscreen needs a `relative` ancestor for `agentTakeoverClassName`, supplied by the caller.
+ * Always mounted as the sole wrapper of `children` across all three modes — the caller must
+ * never branch its own tree around this component, or a mode switch remounts the chat.
  */
 export function FloatingAgentWindow({
-  fullscreen,
+  mode,
   children,
 }: {
-  fullscreen: boolean;
+  mode: DashboardAgentMode;
   children: (drag: FloatingDragProps) => React.ReactNode;
 }) {
+  const fullscreen = mode === "fullscreen";
+  const docked = mode === "rightPanel";
   const initial = useMemo(() => initialFloatingRect(), []);
   const { style, dragHandleProps, resizeHandleProps } = useDraggableResizable({
     initial,
@@ -106,54 +110,62 @@ export function FloatingAgentWindow({
     ignoringGesture.current = !!(event.target as HTMLElement | null)?.closest(NO_DRAG_SELECTOR);
   };
 
-  // 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 shape as `dragHandleProps` below empty, so a mode with no drag doesn't change types.
+  const filteredDragHandleProps: Partial<PanHandlerProps> =
+    fullscreen || docked
+      ? {}
+      : {
+          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`
+  // Same two-`div` shape in all three modes — only classes/style change — so switching `mode`
   // never unmounts `children`; only className/style differ.
   return (
     <div
-      style={fullscreen ? undefined : style}
+      style={fullscreen || docked ? undefined : style}
       className={
         fullscreen
           ? agentTakeoverClassName(true)
-          : "z-30 flex flex-col rounded-lg border border-border-bright bg-background-bright shadow-2xl"
+          : docked
+            ? "flex h-full flex-col"
+            : "z-30 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={cn("flex min-h-0 flex-1 flex-col", !fullscreen && "overflow-hidden rounded-lg")}
+        className={cn(
+          "flex min-h-0 flex-1 flex-col",
+          !fullscreen && !docked && "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: fullscreen
-            ? ""
-            : cn("select-none touch-none", dragging ? "cursor-grabbing" : "cursor-grab"),
+          dragHandleClassName:
+            fullscreen || docked
+              ? ""
+              : cn("select-none touch-none", dragging ? "cursor-grabbing" : "cursor-grab"),
         })}
       </div>
       {!fullscreen &&
+        !docked &&
         RESIZE_EDGES.map((edge) => (
           <motion.div
             key={edge}
diff --git a/apps/webapp/app/routes/storybook.dashboard-agent-floating/route.tsx b/apps/webapp/app/routes/storybook.dashboard-agent-floating/route.tsx
index 29e560a79c2..14e1d7e616f 100644
--- a/apps/webapp/app/routes/storybook.dashboard-agent-floating/route.tsx
+++ b/apps/webapp/app/routes/storybook.dashboard-agent-floating/route.tsx
@@ -19,7 +19,6 @@ const NO_CHATS: DashboardAgentChat[] = [];
 export default function Story() {
   const [open, setOpen] = useState(true);
   const [mode, setMode] = useState<DashboardAgentMode>("floating");
-  const fullscreen = mode === "fullscreen";
   const closeWindow = () => {
     setOpen(false);
     setMode("floating");
@@ -64,7 +63,7 @@ export default function Story() {
         </div>
       )}
       {mounted && open && (
-        <FloatingAgentWindow fullscreen={fullscreen}>
+        <FloatingAgentWindow mode={mode}>
           {({ dragHandleProps, dragHandleClassName }) => (
             <div className="flex h-full flex-col bg-background-bright">
               <motion.div {...dragHandleProps} className={dragHandleClassName}>

From 727f5926a498622b3c4223f3bba2df01fdc3baef Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Fri, 28 Aug 2026 07:01:57 +0000
Subject: [PATCH 32/43] fix(webapp): floating chat default height 600px

---
 apps/webapp/app/components/dashboard-agent/panel-layout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/webapp/app/components/dashboard-agent/panel-layout.tsx b/apps/webapp/app/components/dashboard-agent/panel-layout.tsx
index 1828b550ee4..7e52d84e53e 100644
--- a/apps/webapp/app/components/dashboard-agent/panel-layout.tsx
+++ b/apps/webapp/app/components/dashboard-agent/panel-layout.tsx
@@ -27,7 +27,7 @@ export type DashboardAgentMode = "floating" | "rightPanel" | "fullscreen";
 
 // V1 floating window: 380x512, bottom-right, matching the gallery's own panel frame.
 export const FLOATING_WIDTH = 380;
-export const FLOATING_HEIGHT = 360;
+export const FLOATING_HEIGHT = 600;
 export const FLOATING_MARGIN = 16;
 export const FLOATING_MIN_SIZE = { w: 320, h: 360 };
 const RESIZE_EDGES: ResizeEdge[] = ["n", "e", "s", "w", "ne", "nw", "se", "sw"];

From 984eac5f24e2f9ac09c9e4fd06b2d5e1c31b358c Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Fri, 28 Aug 2026 07:07:36 +0000
Subject: [PATCH 33/43] fix(webapp): add right margin to new chat button

---
 .../app/components/dashboard-agent/DashboardAgentChat.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/webapp/app/components/dashboard-agent/DashboardAgentChat.tsx b/apps/webapp/app/components/dashboard-agent/DashboardAgentChat.tsx
index 05f79f67480..026ed700ebf 100644
--- a/apps/webapp/app/components/dashboard-agent/DashboardAgentChat.tsx
+++ b/apps/webapp/app/components/dashboard-agent/DashboardAgentChat.tsx
@@ -509,7 +509,7 @@ export function DashboardAgentChat({
               showNewChat && (
                 <Button
                   variant="minimal/small"
-                  className="aspect-square h-6 shrink-0 p-1"
+                  className="aspect-square h-6 shrink-0 p-1 mr-[6px]"
                   aria-label="New chat"
                   tooltip={
                     <span className="flex items-center">

From a8c28b14b35c4906bb2e93f5ba4f4b3f227c5262 Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Fri, 28 Aug 2026 07:07:56 +0000
Subject: [PATCH 34/43] fix(webapp): restore fullscreen chat centering

---
 .../components/dashboard-agent/DashboardAgent.tsx  |  3 ++-
 .../dashboard-agent/floating-window-mode.test.ts   |  5 +++++
 .../dashboard-agent/panel-layout.dom.test.ts       | 14 ++++++++++++++
 3 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/apps/webapp/app/components/dashboard-agent/DashboardAgent.tsx b/apps/webapp/app/components/dashboard-agent/DashboardAgent.tsx
index 5d83c41ed99..803bd52f06d 100644
--- a/apps/webapp/app/components/dashboard-agent/DashboardAgent.tsx
+++ b/apps/webapp/app/components/dashboard-agent/DashboardAgent.tsx
@@ -374,7 +374,8 @@ export function DashboardAgent({
               max={mode === "rightPanel" ? "720px" : "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.
-              className={mode === "rightPanel" ? undefined : "!overflow-visible"}
+              // Tailwind v4's important modifier is a trailing `!`, not a leading one.
+              className={mode === "rightPanel" ? undefined : "overflow-visible!"}
             >
               <FloatingAgentWindow mode={mode}>
                 {({ dragHandleProps, dragHandleClassName }) => (
diff --git a/apps/webapp/app/components/dashboard-agent/floating-window-mode.test.ts b/apps/webapp/app/components/dashboard-agent/floating-window-mode.test.ts
index 87002db9b55..3ad1a0e7562 100644
--- a/apps/webapp/app/components/dashboard-agent/floating-window-mode.test.ts
+++ b/apps/webapp/app/components/dashboard-agent/floating-window-mode.test.ts
@@ -26,4 +26,9 @@ describe("DashboardAgent.tsx keeps one tree shape across display modes", () => {
   it('gates the right-column sizing on mode === "rightPanel", not a branch around FloatingAgentWindow', () => {
     expect(source).toContain('mode === "rightPanel" ? "380px" : "0px"');
   });
+
+  it("unclips the degenerate panel with Tailwind v4's trailing-bang important modifier", () => {
+    expect(source).toContain('"overflow-visible!"');
+    expect(source).not.toContain('"!overflow-visible"');
+  });
 });
diff --git a/apps/webapp/app/components/dashboard-agent/panel-layout.dom.test.ts b/apps/webapp/app/components/dashboard-agent/panel-layout.dom.test.ts
index b1bbefc5a94..f6213c7a08f 100644
--- a/apps/webapp/app/components/dashboard-agent/panel-layout.dom.test.ts
+++ b/apps/webapp/app/components/dashboard-agent/panel-layout.dom.test.ts
@@ -211,3 +211,17 @@ describe("FloatingAgentWindow keeps its child mounted across every mode transiti
     }
   });
 });
+
+describe("FloatingAgentWindow's fullscreen geometry", () => {
+  it("pins the exact takeover classes from before the mode switcher (8dea45a09)", () => {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+    act(() => {
+      root!.render(createElement(FloatingAgentWindow, { mode: "fullscreen" }, () => null));
+    });
+    const outer = container.firstElementChild as HTMLDivElement;
+    expect(outer.className).toBe("absolute inset-0 z-10 bg-background-bright");
+    expect(outer.getAttribute("style")).toBeNull();
+  });
+});

From 971c108dc2884a121df380b2ec1e9e81f52d1673 Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Fri, 28 Aug 2026 07:24:34 +0000
Subject: [PATCH 35/43] feat(webapp): compact animated chat mode toggle

---
 .../dashboard-agent/DashboardAgentHeader.tsx  | 118 ++++++++++++------
 1 file changed, 80 insertions(+), 38 deletions(-)

diff --git a/apps/webapp/app/components/dashboard-agent/DashboardAgentHeader.tsx b/apps/webapp/app/components/dashboard-agent/DashboardAgentHeader.tsx
index a5a0e0ac1b3..e1713a22087 100644
--- a/apps/webapp/app/components/dashboard-agent/DashboardAgentHeader.tsx
+++ b/apps/webapp/app/components/dashboard-agent/DashboardAgentHeader.tsx
@@ -1,16 +1,11 @@
-import { useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { useEffect, useRef, useState } from "react";
 import { ChatFloatingPanel } from "~/assets/icons/ChatFloatingPanel";
 import { ChatFullScreen } from "~/assets/icons/ChatFullScreen";
 import { ChatRightPanel } from "~/assets/icons/ChatRightPanel";
 import { CrossIcon } from "~/assets/icons/CrossIcon";
 import { Button } from "~/components/primitives/Buttons";
-import {
-  Popover,
-  PopoverArrowTrigger,
-  PopoverContent,
-  PopoverMenuItem,
-  PopoverTrigger,
-} from "~/components/primitives/Popover";
+import { Popover, PopoverArrowTrigger, PopoverContent } from "~/components/primitives/Popover";
 import { ShortcutKey } from "~/components/primitives/ShortcutKey";
 import type { Shortcut } from "~/hooks/useShortcutKeys";
 import {
@@ -23,8 +18,8 @@ import type { DashboardAgentMode } from "./panel-layout";
 
 const MODE_OPTIONS: { mode: DashboardAgentMode; label: string; Icon: typeof ChatFloatingPanel }[] =
   [
-    { mode: "floating", label: "Floating window", Icon: ChatFloatingPanel },
-    { mode: "rightPanel", label: "Side panel", Icon: ChatRightPanel },
+    { mode: "floating", label: "Floating", Icon: ChatFloatingPanel },
+    { mode: "rightPanel", label: "Right panel", Icon: ChatRightPanel },
     { mode: "fullscreen", label: "Fullscreen", Icon: ChatFullScreen },
   ];
 
@@ -36,6 +31,80 @@ export const NEW_CHAT_SHORTCUT: Shortcut = {
   enabledOnInputElements: true,
 };
 
+function ModeToggle({
+  mode,
+  onModeChange,
+}: {
+  mode: DashboardAgentMode;
+  onModeChange: (mode: DashboardAgentMode) => void;
+}) {
+  const [isExpanded, setExpanded] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const currentOption = MODE_OPTIONS.find((option) => option.mode === mode) ?? MODE_OPTIONS[0];
+  const otherOptions = MODE_OPTIONS.filter((option) => option.mode !== mode);
+
+  useEffect(() => {
+    if (!isExpanded) return;
+
+    function handlePointerDown(event: PointerEvent) {
+      if (!containerRef.current?.contains(event.target as Node)) {
+        setExpanded(false);
+      }
+    }
+
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key === "Escape") {
+        setExpanded(false);
+      }
+    }
+
+    document.addEventListener("pointerdown", handlePointerDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isExpanded]);
+
+  return (
+    <div ref={containerRef} className="flex items-center">
+      <AnimatePresence initial={false}>
+        {isExpanded &&
+          otherOptions.map(({ mode: option, label, Icon }) => (
+            <motion.div
+              key={option}
+              initial={{ opacity: 0, width: 0, x: 8 }}
+              animate={{ opacity: 1, width: "auto", x: 0 }}
+              exit={{ opacity: 0, width: 0, x: 8 }}
+              transition={{ duration: 0.15 }}
+              className="overflow-hidden"
+            >
+              <Button
+                variant="minimal/small"
+                className="aspect-square h-6 p-1"
+                aria-label={label}
+                tooltip={label}
+                onClick={() => {
+                  onModeChange(option);
+                  setExpanded(false);
+                }}
+                LeadingIcon={<Icon className="size-4 text-text-dimmed" />}
+              />
+            </motion.div>
+          ))}
+      </AnimatePresence>
+      <Button
+        variant="minimal/small"
+        className="aspect-square h-6 p-1"
+        aria-label="Change chat display mode"
+        tooltip={currentOption.label}
+        onClick={() => setExpanded((open) => !open)}
+        LeadingIcon={<currentOption.Icon className="size-4 text-text-dimmed" />}
+      />
+    </div>
+  );
+}
+
 export function DashboardAgentHeader({
   title,
   chats,
@@ -62,9 +131,6 @@ export function DashboardAgentHeader({
   const [isHistoryOpen, setHistoryOpen] = useState(false);
   const [historyOpenedAt, setHistoryOpenedAt] = useState<number | null>(null);
   const [pendingDelete, setPendingDelete] = useState<DashboardAgentChat | null>(null);
-  const [isModeMenuOpen, setModeMenuOpen] = useState(false);
-  const CurrentModeIcon =
-    MODE_OPTIONS.find((option) => option.mode === mode)?.Icon ?? ChatFloatingPanel;
 
   return (
     <div className="flex h-10 shrink-0 items-center justify-between gap-2 border-b border-grid-bright pl-1 pr-1.5">
@@ -118,31 +184,7 @@ export function DashboardAgentHeader({
       />
 
       <div className="flex shrink-0 items-center gap-0.5" data-agent-no-drag>
-        <Popover open={isModeMenuOpen} onOpenChange={setModeMenuOpen}>
-          <PopoverTrigger asChild>
-            <Button
-              variant="minimal/small"
-              className="aspect-square h-6 p-1"
-              aria-label="Change chat display mode"
-              tooltip="Display mode"
-              LeadingIcon={<CurrentModeIcon className="size-4 text-text-dimmed" />}
-            />
-          </PopoverTrigger>
-          <PopoverContent align="end" className="w-44 p-1">
-            {MODE_OPTIONS.map(({ mode: option, label, Icon }) => (
-              <PopoverMenuItem
-                key={option}
-                icon={Icon}
-                title={label}
-                isSelected={option === mode}
-                onClick={() => {
-                  onModeChange(option);
-                  setModeMenuOpen(false);
-                }}
-              />
-            ))}
-          </PopoverContent>
-        </Popover>
+        <ModeToggle mode={mode} onModeChange={onModeChange} />
         <Button
           variant="minimal/small"
           className="aspect-square h-6 p-1"

From 2d91412ba179ce17d649b19c9a183b61ca43a4a4 Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Fri, 28 Aug 2026 07:31:03 +0000
Subject: [PATCH 36/43] fix(webapp): collapse degenerate resizable tracks so
 fullscreen fits viewport

---
 .../dashboard-agent/DashboardAgent.tsx        | 14 ++---
 .../floating-window-mode.test.ts              |  3 +-
 .../dashboard-agent/panel-layout.dom.test.ts  | 55 +++++++++++++++++++
 3 files changed, 64 insertions(+), 8 deletions(-)

diff --git a/apps/webapp/app/components/dashboard-agent/DashboardAgent.tsx b/apps/webapp/app/components/dashboard-agent/DashboardAgent.tsx
index 803bd52f06d..e7c2fd1784d 100644
--- a/apps/webapp/app/components/dashboard-agent/DashboardAgent.tsx
+++ b/apps/webapp/app/components/dashboard-agent/DashboardAgent.tsx
@@ -363,15 +363,15 @@ export function DashboardAgent({
             <ResizablePanel id="dashboard-content" min="320px">
               <div className={agentHiddenContentClassName(fullscreen)}>{children}</div>
             </ResizablePanel>
-            <ResizableHandle
-              id="dashboard-agent-handle"
-              className={mode === "rightPanel" ? undefined : "hidden"}
-            />
+            {mode === "rightPanel" && <ResizableHandle id="dashboard-agent-handle" />}
             <ResizablePanel
               id="dashboard-agent-panel"
-              default={mode === "rightPanel" ? "380px" : "0px"}
-              min={mode === "rightPanel" ? "320px" : "0px"}
-              max={mode === "rightPanel" ? "720px" : "0px"}
+              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.
diff --git a/apps/webapp/app/components/dashboard-agent/floating-window-mode.test.ts b/apps/webapp/app/components/dashboard-agent/floating-window-mode.test.ts
index 3ad1a0e7562..cb4b2bbe49a 100644
--- a/apps/webapp/app/components/dashboard-agent/floating-window-mode.test.ts
+++ b/apps/webapp/app/components/dashboard-agent/floating-window-mode.test.ts
@@ -24,7 +24,8 @@ describe("DashboardAgent.tsx keeps one tree shape across display modes", () => {
   });
 
   it('gates the right-column sizing on mode === "rightPanel", not a branch around FloatingAgentWindow', () => {
-    expect(source).toContain('mode === "rightPanel" ? "380px" : "0px"');
+    expect(source).toContain('collapsed={mode !== "rightPanel"}');
+    expect(source).toContain('{mode === "rightPanel" && <ResizableHandle');
   });
 
   it("unclips the degenerate panel with Tailwind v4's trailing-bang important modifier", () => {
diff --git a/apps/webapp/app/components/dashboard-agent/panel-layout.dom.test.ts b/apps/webapp/app/components/dashboard-agent/panel-layout.dom.test.ts
index f6213c7a08f..8fe1d2ad473 100644
--- a/apps/webapp/app/components/dashboard-agent/panel-layout.dom.test.ts
+++ b/apps/webapp/app/components/dashboard-agent/panel-layout.dom.test.ts
@@ -1,4 +1,5 @@
 // @vitest-environment jsdom
+import { Panel, PanelGroup, PanelResizer } from "@window-splitter/react";
 import { createElement, useEffect } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { act } from "react-dom/test-utils";
@@ -16,6 +17,12 @@ import {
   type FloatingDragProps,
 } from "./panel-layout";
 
+(globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver ??= class {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+};
+
 let container: HTMLDivElement | undefined;
 let root: Root | undefined;
 
@@ -225,3 +232,51 @@ describe("FloatingAgentWindow's fullscreen geometry", () => {
     expect(outer.getAttribute("style")).toBeNull();
   });
 });
+
+// Mirrors DashboardAgent.tsx's grid: a content panel, a handle only in rightPanel mode,
+// and an agent panel that's either sized (rightPanel) or truly collapsed (otherwise).
+// A leftover fixed-pixel track from a hidden-not-unmounted handle, or from a "0px" panel
+// that doesn't actually collapse, pushes the grid past its own container's width.
+function renderDashboardAgentGrid(rightPanel: boolean) {
+  container = document.createElement("div");
+  document.body.appendChild(container);
+  root = createRoot(container);
+  act(() => {
+    root!.render(
+      createElement(
+        PanelGroup,
+        { orientation: "horizontal" },
+        createElement(Panel, { id: "dashboard-content", min: "320px" }),
+        rightPanel
+          ? createElement(PanelResizer, { id: "dashboard-agent-handle", size: "3px" })
+          : null,
+        createElement(Panel, {
+          id: "dashboard-agent-panel",
+          default: "380px",
+          min: "320px",
+          max: "720px",
+          collapsible: true,
+          collapsed: !rightPanel,
+          collapsedSize: "0px",
+        })
+      )
+    );
+  });
+  return container.firstElementChild as HTMLElement;
+}
+
+describe("DashboardAgent's degenerate grid tracks outside rightPanel", () => {
+  it("unmounts the handle and collapses the agent panel to a bare 0px track", () => {
+    const group = renderDashboardAgentGrid(false);
+    expect(group.querySelector('[data-splitter-type="handle"]')).toBeNull();
+    const columns = group.style.gridTemplateColumns;
+    expect(columns.endsWith("0px")).toBe(true);
+    expect(columns).not.toMatch(/\b3px\b/);
+  });
+
+  it("keeps the handle and a real sized track in rightPanel mode", () => {
+    const group = renderDashboardAgentGrid(true);
+    expect(group.querySelector('[data-splitter-type="handle"]')).not.toBeNull();
+    expect(group.style.gridTemplateColumns).toMatch(/\b3px\b/);
+  });
+});

From 07a8480ba8b1c3fa221e0dee2c04794cd9d1a406 Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Fri, 28 Aug 2026 09:21:33 +0000
Subject: [PATCH 37/43] fix(webapp): fullscreen chat column fills takeover
 height

---
 .../app/components/dashboard-agent/panel-layout.dom.test.ts | 6 ++++--
 apps/webapp/app/components/dashboard-agent/panel-layout.tsx | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/apps/webapp/app/components/dashboard-agent/panel-layout.dom.test.ts b/apps/webapp/app/components/dashboard-agent/panel-layout.dom.test.ts
index 8fe1d2ad473..f1fe4b739fe 100644
--- a/apps/webapp/app/components/dashboard-agent/panel-layout.dom.test.ts
+++ b/apps/webapp/app/components/dashboard-agent/panel-layout.dom.test.ts
@@ -220,7 +220,7 @@ describe("FloatingAgentWindow keeps its child mounted across every mode transiti
 });
 
 describe("FloatingAgentWindow's fullscreen geometry", () => {
-  it("pins the exact takeover classes from before the mode switcher (8dea45a09)", () => {
+  it("pins the exact takeover classes, including the flex column that fills the takeover's height", () => {
     container = document.createElement("div");
     document.body.appendChild(container);
     root = createRoot(container);
@@ -228,7 +228,9 @@ describe("FloatingAgentWindow's fullscreen geometry", () => {
       root!.render(createElement(FloatingAgentWindow, { mode: "fullscreen" }, () => null));
     });
     const outer = container.firstElementChild as HTMLDivElement;
-    expect(outer.className).toBe("absolute inset-0 z-10 bg-background-bright");
+    expect(outer.className).toBe("absolute inset-0 z-10 flex flex-col bg-background-bright");
+    expect(outer.classList.contains("flex")).toBe(true);
+    expect(outer.classList.contains("flex-col")).toBe(true);
     expect(outer.getAttribute("style")).toBeNull();
   });
 });
diff --git a/apps/webapp/app/components/dashboard-agent/panel-layout.tsx b/apps/webapp/app/components/dashboard-agent/panel-layout.tsx
index 7e52d84e53e..802bb09e3c7 100644
--- a/apps/webapp/app/components/dashboard-agent/panel-layout.tsx
+++ b/apps/webapp/app/components/dashboard-agent/panel-layout.tsx
@@ -69,7 +69,7 @@ export function writeAgentMode(mode: DashboardAgentMode): void {
 }
 
 function agentTakeoverClassName(fullscreen: boolean): string {
-  return fullscreen ? "absolute inset-0 z-10 bg-background-bright" : "h-full";
+  return fullscreen ? "absolute inset-0 z-10 flex flex-col bg-background-bright" : "h-full";
 }
 
 // `invisible` rather than `display: none`: only this preserves the computed layout, so

From e091137f6e8eb7d35634649fd268fe333927c7ae Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Fri, 28 Aug 2026 14:55:13 +0000
Subject: [PATCH 38/43] fix(webapp): clear floating geometry when chat docks

---
 .../dashboard-agent/panel-layout.dom.test.ts  | 77 +++++++++++++++++++
 .../dashboard-agent/panel-layout.tsx          | 14 +++-
 2 files changed, 89 insertions(+), 2 deletions(-)

diff --git a/apps/webapp/app/components/dashboard-agent/panel-layout.dom.test.ts b/apps/webapp/app/components/dashboard-agent/panel-layout.dom.test.ts
index f1fe4b739fe..1a5d18646bf 100644
--- a/apps/webapp/app/components/dashboard-agent/panel-layout.dom.test.ts
+++ b/apps/webapp/app/components/dashboard-agent/panel-layout.dom.test.ts
@@ -267,6 +267,83 @@ function renderDashboardAgentGrid(rightPanel: boolean) {
   return container.firstElementChild as HTMLElement;
 }
 
+describe("FloatingAgentWindow clears floating geometry when it docks", () => {
+  it("leaves no stale position/left/top/width/height after a drag, then switching to rightPanel", () => {
+    stubViewport(1200, 900);
+    let latest!: FloatingDragProps;
+    function Harness({ mode }: { mode: DashboardAgentMode }) {
+      return createElement(FloatingAgentWindow, { mode }, (drag: FloatingDragProps) => {
+        // oxlint-disable-next-line react/globals -- test harness capturing the render-prop's value.
+        latest = drag;
+        return null;
+      });
+    }
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+    act(() => {
+      root!.render(createElement(Harness, { mode: "floating" }));
+    });
+    act(() => {
+      latest.dragHandleProps.onPanStart!(fakeEvent, fakePanInfo(0, 0));
+      latest.dragHandleProps.onPan!(fakeEvent, fakePanInfo(-40, -10));
+    });
+
+    act(() => {
+      root!.render(createElement(Harness, { mode: "rightPanel" }));
+    });
+
+    const node = container.firstElementChild as HTMLDivElement;
+    expect(node.style.position).toBe("");
+    expect(node.style.left).toBe("");
+    expect(node.style.top).toBe("");
+    expect(node.style.width).toBe("");
+    expect(node.style.height).toBe("");
+  });
+
+  // Mirrors FloatingAgentWindow's own style ternary directly against the resize path
+  // (which changes width/height, not just position — resizeHandleProps isn't exposed
+  // through the render prop, so this drives the same underlying hook instead).
+  it("leaves no stale geometry after a resize (width/height change), then docking", () => {
+    stubViewport(1200, 900);
+    let latest!: ReturnType<typeof useDraggableResizable>;
+    // Matches FloatingAgentWindow's own fix: an explicit reset object, not `undefined` —
+    // a dropped style key isn't guaranteed to clear on every style-application layer.
+    const clearedStyle = {
+      position: undefined,
+      left: undefined,
+      top: undefined,
+      width: undefined,
+      height: undefined,
+    };
+    function Mirror({ docked }: { docked: boolean }) {
+      // oxlint-disable-next-line react/globals -- test harness capturing the hook's return value.
+      latest = useDraggableResizable({
+        initial: initialFloatingRect(),
+        minSize: FLOATING_MIN_SIZE,
+        viewportPadding: FLOATING_MARGIN,
+      });
+      return createElement("div", { style: docked ? clearedStyle : latest.style });
+    }
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+    act(() => {
+      root!.render(createElement(Mirror, { docked: false }));
+    });
+    act(() => latest.resizeHandleProps("e").onPan(fakeEvent, fakePanInfo(60, 0)));
+
+    act(() => {
+      root!.render(createElement(Mirror, { docked: true }));
+    });
+
+    const node = container.firstElementChild as HTMLDivElement;
+    expect(node.style.position).toBe("");
+    expect(node.style.width).toBe("");
+    expect(node.style.height).toBe("");
+  });
+});
+
 describe("DashboardAgent's degenerate grid tracks outside rightPanel", () => {
   it("unmounts the handle and collapses the agent panel to a bare 0px track", () => {
     const group = renderDashboardAgentGrid(false);
diff --git a/apps/webapp/app/components/dashboard-agent/panel-layout.tsx b/apps/webapp/app/components/dashboard-agent/panel-layout.tsx
index 802bb09e3c7..5488212f92d 100644
--- a/apps/webapp/app/components/dashboard-agent/panel-layout.tsx
+++ b/apps/webapp/app/components/dashboard-agent/panel-layout.tsx
@@ -1,6 +1,6 @@
 // Both class helpers apply to always-rendered wrappers, so switching display mode is a
 // class change only and the open chat's transport, session and transcript survive it.
-import { useMemo, useRef, useState } from "react";
+import { useMemo, useRef, useState, type CSSProperties } from "react";
 import { motion, type PanInfo } from "framer-motion";
 import {
   draggableResizeHandleClassName,
@@ -32,6 +32,16 @@ export const FLOATING_MARGIN = 16;
 export const FLOATING_MIN_SIZE = { w: 320, h: 360 };
 const RESIZE_EDGES: ResizeEdge[] = ["n", "e", "s", "w", "ne", "nw", "se", "sw"];
 
+// A dropped key (not just `undefined`) doesn't reliably clear on every style-application
+// layer, so docked/fullscreen explicitly resets every key the floating rect ever sets.
+const CLEARED_FLOATING_STYLE: CSSProperties = {
+  position: undefined,
+  left: undefined,
+  top: undefined,
+  width: undefined,
+  height: undefined,
+};
+
 export function initialFloatingRect() {
   if (typeof window === "undefined") {
     return { x: 0, y: 0, w: FLOATING_WIDTH, h: FLOATING_HEIGHT };
@@ -138,7 +148,7 @@ export function FloatingAgentWindow({
   // never unmounts `children`; only className/style differ.
   return (
     <div
-      style={fullscreen || docked ? undefined : style}
+      style={fullscreen || docked ? CLEARED_FLOATING_STYLE : style}
       className={
         fullscreen
           ? agentTakeoverClassName(true)

From 5ff2924cffbaabb55df4ed4387b3f04a6513826c Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Fri, 28 Aug 2026 15:01:05 +0000
Subject: [PATCH 39/43] docs(webapp): mention chat display modes in release
 note

---
 .server-changes/floating-chat-window.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.server-changes/floating-chat-window.md b/.server-changes/floating-chat-window.md
index b7e32aeb9ed..caef07f812e 100644
--- a/.server-changes/floating-chat-window.md
+++ b/.server-changes/floating-chat-window.md
@@ -3,4 +3,4 @@ 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.
+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.

From 599ee5913da9ec63dde3f41ab6802b6cee269f68 Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Fri, 28 Aug 2026 15:13:28 +0000
Subject: [PATCH 40/43] fix(webapp): keep resize handle mounted so mode
 switches never remount the chat

---
 .../dashboard-agent/DashboardAgent.tsx        |  7 +-
 .../floating-window-mode.test.ts              |  8 +-
 .../dashboard-agent/panel-layout.dom.test.ts  | 87 +++++++++++++++++--
 .../dashboard-agent/panel-layout.tsx          |  3 +-
 4 files changed, 95 insertions(+), 10 deletions(-)

diff --git a/apps/webapp/app/components/dashboard-agent/DashboardAgent.tsx b/apps/webapp/app/components/dashboard-agent/DashboardAgent.tsx
index e7c2fd1784d..30060dede0b 100644
--- a/apps/webapp/app/components/dashboard-agent/DashboardAgent.tsx
+++ b/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,
@@ -363,7 +364,11 @@ export function DashboardAgent({
             <ResizablePanel id="dashboard-content" min="320px">
               <div className={agentHiddenContentClassName(fullscreen)}>{children}</div>
             </ResizablePanel>
-            {mode === "rightPanel" && <ResizableHandle id="dashboard-agent-handle" />}
+            <ResizableHandle
+              id="dashboard-agent-handle"
+              size={mode === "rightPanel" ? "3px" : "0px"}
+              className={collapsibleHandleClassName(mode === "rightPanel")}
+            />
             <ResizablePanel
               id="dashboard-agent-panel"
               default="380px"
diff --git a/apps/webapp/app/components/dashboard-agent/floating-window-mode.test.ts b/apps/webapp/app/components/dashboard-agent/floating-window-mode.test.ts
index cb4b2bbe49a..e1ec956ac9c 100644
--- a/apps/webapp/app/components/dashboard-agent/floating-window-mode.test.ts
+++ b/apps/webapp/app/components/dashboard-agent/floating-window-mode.test.ts
@@ -25,7 +25,13 @@ describe("DashboardAgent.tsx keeps one tree shape across display modes", () => {
 
   it('gates the right-column sizing on mode === "rightPanel", not a branch around FloatingAgentWindow', () => {
     expect(source).toContain('collapsed={mode !== "rightPanel"}');
-    expect(source).toContain('{mode === "rightPanel" && <ResizableHandle');
+  });
+
+  it("keeps ResizableHandle always mounted — a conditional handle shifts sibling keys and remounts the chat", () => {
+    const occurrences = source.match(/<ResizableHandle\b/g) ?? [];
+    expect(occurrences).toHaveLength(1);
+    expect(source).not.toMatch(/mode === "rightPanel" &&\s*<ResizableHandle/);
+    expect(source).toContain('size={mode === "rightPanel" ? "3px" : "0px"}');
   });
 
   it("unclips the degenerate panel with Tailwind v4's trailing-bang important modifier", () => {
diff --git a/apps/webapp/app/components/dashboard-agent/panel-layout.dom.test.ts b/apps/webapp/app/components/dashboard-agent/panel-layout.dom.test.ts
index 1a5d18646bf..58c5c1c15c2 100644
--- a/apps/webapp/app/components/dashboard-agent/panel-layout.dom.test.ts
+++ b/apps/webapp/app/components/dashboard-agent/panel-layout.dom.test.ts
@@ -1,9 +1,9 @@
 // @vitest-environment jsdom
 import { Panel, PanelGroup, PanelResizer } from "@window-splitter/react";
-import { createElement, useEffect } from "react";
+import { createElement, useEffect, type ReactNode } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { act } from "react-dom/test-utils";
-import { afterEach, describe, expect, it } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import type { PanInfo } from "framer-motion";
 import { useDraggableResizable } from "~/components/primitives/DraggableResizable";
 import {
@@ -239,6 +239,10 @@ describe("FloatingAgentWindow's fullscreen geometry", () => {
 // and an agent panel that's either sized (rightPanel) or truly collapsed (otherwise).
 // A leftover fixed-pixel track from a hidden-not-unmounted handle, or from a "0px" panel
 // that doesn't actually collapse, pushes the grid past its own container's width.
+// The handle is ALWAYS mounted (only its `size` varies) — PanelGroup keys children by
+// index after dropping falsy ones (@window-splitter/react's useIndexedChildren), so a
+// conditionally-rendered handle shifts the agent panel's key on every mode switch and
+// remounts the whole chat subtree beneath it.
 function renderDashboardAgentGrid(rightPanel: boolean) {
   container = document.createElement("div");
   document.body.appendChild(container);
@@ -249,9 +253,10 @@ function renderDashboardAgentGrid(rightPanel: boolean) {
         PanelGroup,
         { orientation: "horizontal" },
         createElement(Panel, { id: "dashboard-content", min: "320px" }),
-        rightPanel
-          ? createElement(PanelResizer, { id: "dashboard-agent-handle", size: "3px" })
-          : null,
+        createElement(PanelResizer, {
+          id: "dashboard-agent-handle",
+          size: rightPanel ? "3px" : "0px",
+        }),
         createElement(Panel, {
           id: "dashboard-agent-panel",
           default: "380px",
@@ -345,9 +350,9 @@ describe("FloatingAgentWindow clears floating geometry when it docks", () => {
 });
 
 describe("DashboardAgent's degenerate grid tracks outside rightPanel", () => {
-  it("unmounts the handle and collapses the agent panel to a bare 0px track", () => {
+  it("keeps the handle mounted but collapses it and the agent panel to bare 0px tracks", () => {
     const group = renderDashboardAgentGrid(false);
-    expect(group.querySelector('[data-splitter-type="handle"]')).toBeNull();
+    expect(group.querySelector('[data-splitter-type="handle"]')).not.toBeNull();
     const columns = group.style.gridTemplateColumns;
     expect(columns.endsWith("0px")).toBe(true);
     expect(columns).not.toMatch(/\b3px\b/);
@@ -359,3 +364,71 @@ describe("DashboardAgent's degenerate grid tracks outside rightPanel", () => {
     expect(group.style.gridTemplateColumns).toMatch(/\b3px\b/);
   });
 });
+
+// Mirrors DashboardAgent.tsx's real PanelGroup/Panel/PanelResizer shape (not the
+// FloatingAgentWindow-standalone test above, which never puts a handle between the
+// panels and so is blind to the sibling-key-shift bug this pins).
+function renderDashboardAgentGridTree(rightPanel: boolean, agentChild: ReactNode) {
+  return createElement(
+    PanelGroup,
+    { orientation: "horizontal" },
+    createElement(Panel, { id: "dashboard-content", min: "320px" }),
+    createElement(PanelResizer, {
+      id: "dashboard-agent-handle",
+      size: rightPanel ? "3px" : "0px",
+    }),
+    createElement(
+      Panel,
+      {
+        id: "dashboard-agent-panel",
+        default: "380px",
+        min: "320px",
+        max: "720px",
+        collapsible: true,
+        collapsed: !rightPanel,
+        collapsedSize: "0px",
+      },
+      agentChild
+    )
+  );
+}
+
+describe("DashboardAgent's real grid tree never remounts the chat across mode switches", () => {
+  it("keeps the agent panel's child mounted across floating/rightPanel/fullscreen transitions", () => {
+    let mounts = 0;
+    function Marker() {
+      useEffect(() => {
+        mounts += 1;
+      }, []);
+      return null;
+    }
+
+    // jsdom reports every rect as 0x0; the library divides by the group's measured
+    // width when a mode switch changes a panel's size, so it needs a non-zero stand-in.
+    const rectSpy = vi
+      .spyOn(HTMLElement.prototype, "getBoundingClientRect")
+      .mockReturnValue({ width: 1000, height: 600, x: 0, y: 0, top: 0, left: 0 } as DOMRect);
+
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+
+    const sequence: DashboardAgentMode[] = [
+      "floating",
+      "rightPanel",
+      "floating",
+      "fullscreen",
+      "rightPanel",
+    ];
+    try {
+      for (const mode of sequence) {
+        act(() => {
+          root!.render(renderDashboardAgentGridTree(mode === "rightPanel", createElement(Marker)));
+        });
+        expect(mounts).toBe(1);
+      }
+    } finally {
+      rectSpy.mockRestore();
+    }
+  });
+});
diff --git a/apps/webapp/app/components/dashboard-agent/panel-layout.tsx b/apps/webapp/app/components/dashboard-agent/panel-layout.tsx
index 5488212f92d..1d6138c2a8b 100644
--- a/apps/webapp/app/components/dashboard-agent/panel-layout.tsx
+++ b/apps/webapp/app/components/dashboard-agent/panel-layout.tsx
@@ -25,7 +25,8 @@ const AGENT_MODE_STORAGE_KEY = "tdev:dashboard-agent:mode";
 
 export type DashboardAgentMode = "floating" | "rightPanel" | "fullscreen";
 
-// V1 floating window: 380x512, bottom-right, matching the gallery's own panel frame.
+// V1 floating window: FLOATING_WIDTH x FLOATING_HEIGHT, bottom-right, matching the
+// gallery's own panel frame.
 export const FLOATING_WIDTH = 380;
 export const FLOATING_HEIGHT = 600;
 export const FLOATING_MARGIN = 16;

From 7088a1a3c4bce10673cca0c20ebb255032cd6ed1 Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Fri, 28 Aug 2026 15:14:11 +0000
Subject: [PATCH 41/43] fix(webapp): mode toggle escape, aria, external
 collapse

---
 .../DashboardAgentHeader.dom.test.ts          | 91 +++++++++++++++++++
 .../dashboard-agent/DashboardAgentHeader.tsx  | 42 ++++++---
 2 files changed, 121 insertions(+), 12 deletions(-)
 create mode 100644 apps/webapp/app/components/dashboard-agent/DashboardAgentHeader.dom.test.ts

diff --git a/apps/webapp/app/components/dashboard-agent/DashboardAgentHeader.dom.test.ts b/apps/webapp/app/components/dashboard-agent/DashboardAgentHeader.dom.test.ts
new file mode 100644
index 00000000000..5c4beb07fbb
--- /dev/null
+++ b/apps/webapp/app/components/dashboard-agent/DashboardAgentHeader.dom.test.ts
@@ -0,0 +1,91 @@
+// @vitest-environment jsdom
+import { createElement } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { act } from "react-dom/test-utils";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { OperatingSystemContextProvider } from "~/components/primitives/OperatingSystemProvider";
+import { ShortcutsProvider } from "~/components/primitives/ShortcutsProvider";
+import { ModeToggle } from "./DashboardAgentHeader";
+
+function withProviders(children: React.ReactNode) {
+  return createElement(
+    OperatingSystemContextProvider,
+    { platform: "mac" },
+    createElement(ShortcutsProvider, null, children)
+  );
+}
+
+let container: HTMLDivElement | undefined;
+let root: Root | undefined;
+
+afterEach(() => {
+  if (root) {
+    act(() => root!.unmount());
+  }
+  container?.remove();
+  container = undefined;
+  root = undefined;
+});
+
+function renderToggle(mode: "floating" | "rightPanel" | "fullscreen", onModeChange: () => void) {
+  container = document.createElement("div");
+  document.body.appendChild(container);
+  root = createRoot(container);
+  act(() => {
+    root!.render(withProviders(createElement(ModeToggle, { mode, onModeChange })));
+  });
+  return container;
+}
+
+// Row-reverse layout keeps the trigger as the first button in DOM order.
+function getTrigger(el: HTMLElement) {
+  return el.querySelectorAll("button")[0] as HTMLButtonElement;
+}
+
+function expandToggle(el: HTMLElement) {
+  const trigger = getTrigger(el);
+  act(() => {
+    trigger.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+  });
+}
+
+describe("ModeToggle", () => {
+  it("collapses on Escape without changing mode, and marks the event handled", () => {
+    const onModeChange = vi.fn();
+    const el = renderToggle("floating", onModeChange);
+    expandToggle(el);
+    expect(getTrigger(el).getAttribute("aria-expanded")).toBe("true");
+
+    // cancelable: true, like a real native keydown; otherwise preventDefault() is a no-op.
+    const escapeEvent = new KeyboardEvent("keydown", {
+      key: "Escape",
+      bubbles: true,
+      cancelable: true,
+    });
+    act(() => {
+      document.dispatchEvent(escapeEvent);
+    });
+
+    expect(escapeEvent.defaultPrevented).toBe(true);
+    expect(getTrigger(el).getAttribute("aria-expanded")).toBe("false");
+    expect(onModeChange).not.toHaveBeenCalled();
+  });
+
+  it("collapses when mode changes externally", () => {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+    const onModeChange = vi.fn();
+    act(() => {
+      root!.render(withProviders(createElement(ModeToggle, { mode: "floating", onModeChange })));
+    });
+    expandToggle(container);
+    expect(getTrigger(container).getAttribute("aria-expanded")).toBe("true");
+
+    act(() => {
+      root!.render(withProviders(createElement(ModeToggle, { mode: "fullscreen", onModeChange })));
+    });
+
+    expect(getTrigger(container).getAttribute("aria-expanded")).toBe("false");
+  });
+});
diff --git a/apps/webapp/app/components/dashboard-agent/DashboardAgentHeader.tsx b/apps/webapp/app/components/dashboard-agent/DashboardAgentHeader.tsx
index e1713a22087..54bab3535eb 100644
--- a/apps/webapp/app/components/dashboard-agent/DashboardAgentHeader.tsx
+++ b/apps/webapp/app/components/dashboard-agent/DashboardAgentHeader.tsx
@@ -31,7 +31,7 @@ export const NEW_CHAT_SHORTCUT: Shortcut = {
   enabledOnInputElements: true,
 };
 
-function ModeToggle({
+export function ModeToggle({
   mode,
   onModeChange,
 }: {
@@ -40,9 +40,23 @@ function ModeToggle({
 }) {
   const [isExpanded, setExpanded] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
   const currentOption = MODE_OPTIONS.find((option) => option.mode === mode) ?? MODE_OPTIONS[0];
   const otherOptions = MODE_OPTIONS.filter((option) => option.mode !== mode);
 
+  useEffect(() => {
+    // oxlint-disable-next-line react/set-state-in-effect -- collapses when `mode` changes externally (e.g. route-driven).
+    setExpanded(false);
+  }, [mode]);
+
+  // Button doesn't forward arbitrary aria props, so set them directly on the node.
+  useEffect(() => {
+    const el = triggerRef.current;
+    if (!el) return;
+    el.setAttribute("aria-haspopup", "true");
+    el.setAttribute("aria-expanded", String(isExpanded));
+  }, [isExpanded]);
+
   useEffect(() => {
     if (!isExpanded) return;
 
@@ -52,22 +66,34 @@ function ModeToggle({
       }
     }
 
+    // Capture phase + preventDefault: DashboardAgentPanel's own Escape handler
+    // (bubble phase) checks defaultPrevented before closing the whole panel.
     function handleKeyDown(event: KeyboardEvent) {
       if (event.key === "Escape") {
+        event.preventDefault();
         setExpanded(false);
       }
     }
 
     document.addEventListener("pointerdown", handlePointerDown);
-    document.addEventListener("keydown", handleKeyDown);
+    document.addEventListener("keydown", handleKeyDown, true);
     return () => {
       document.removeEventListener("pointerdown", handlePointerDown);
-      document.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener("keydown", handleKeyDown, true);
     };
   }, [isExpanded]);
 
   return (
-    <div ref={containerRef} className="flex items-center">
+    <div ref={containerRef} className="flex flex-row-reverse items-center">
+      <Button
+        ref={triggerRef}
+        variant="minimal/small"
+        className="aspect-square h-6 p-1"
+        aria-label="Change chat display mode"
+        tooltip={currentOption.label}
+        onClick={() => setExpanded((open) => !open)}
+        LeadingIcon={<currentOption.Icon className="size-4 text-text-dimmed" />}
+      />
       <AnimatePresence initial={false}>
         {isExpanded &&
           otherOptions.map(({ mode: option, label, Icon }) => (
@@ -93,14 +119,6 @@ function ModeToggle({
             </motion.div>
           ))}
       </AnimatePresence>
-      <Button
-        variant="minimal/small"
-        className="aspect-square h-6 p-1"
-        aria-label="Change chat display mode"
-        tooltip={currentOption.label}
-        onClick={() => setExpanded((open) => !open)}
-        LeadingIcon={<currentOption.Icon className="size-4 text-text-dimmed" />}
-      />
     </div>
   );
 }

From fe35c952ca2b18173fc1d319aaba58ecf95c9521 Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Fri, 28 Aug 2026 15:39:28 +0000
Subject: [PATCH 42/43] fix(webapp): keep draft chat composer in the hero block

---
 .../dashboard-agent/DashboardAgentChat.tsx    | 50 +++++++++++++------
 1 file changed, 34 insertions(+), 16 deletions(-)

diff --git a/apps/webapp/app/components/dashboard-agent/DashboardAgentChat.tsx b/apps/webapp/app/components/dashboard-agent/DashboardAgentChat.tsx
index 026ed700ebf..6496a870e7d 100644
--- a/apps/webapp/app/components/dashboard-agent/DashboardAgentChat.tsx
+++ b/apps/webapp/app/components/dashboard-agent/DashboardAgentChat.tsx
@@ -449,18 +449,48 @@ export function DashboardAgentChat({
     onActivityChange?.(chatId, activity);
   }, [chatId, activity, onActivityChange]);
 
+  const isDraftState = messages.length === 0 && !pendingFirstMessage;
+
+  const contextBanner = (
+    <DashboardAgentContextBanner
+      projectSlug={projectSlug}
+      environmentSlug={environmentSlug}
+      currentPage={currentPage}
+    />
+  );
+
   return (
     <>
       <WatchChips
         watches={watches.filter((watch) => watch.status === "active")}
         onCancel={onCancelWatch}
       />
-      {messages.length === 0 && !pendingFirstMessage ? (
+      {isDraftState ? (
         <DashboardAgentHero
           onSelect={submit}
           pageContext={clientData.pageContext}
           promoted={promotedPrompt}
           promptsDisabledReason={atMessageCap ? MESSAGE_QUOTA_REACHED_REASON : undefined}
+          composer={
+            atMessageCap ? (
+              <AgentUpgradeBlock
+                limit={messageCapLimit}
+                planResolved={messageCapPlanResolved}
+                context={contextBanner}
+              />
+            ) : (
+              <DashboardAgentComposer
+                layout="hero"
+                value={input}
+                onChange={setInput}
+                onSubmit={() => submit(input)}
+                onStop={stop}
+                isStreaming={isStreaming}
+                focusKey={sendRequest?.seq}
+                context={contextBanner}
+              />
+            )
+          }
         />
       ) : (
         <DashboardAgentMessages
@@ -477,17 +507,11 @@ export function DashboardAgentChat({
         />
       )}
       {watchCard ? <div className="px-3 pb-2">{watchCard}</div> : null}
-      {atMessageCap ? (
+      {isDraftState ? null : atMessageCap ? (
         <AgentUpgradeBlock
           limit={messageCapLimit}
           planResolved={messageCapPlanResolved}
-          context={
-            <DashboardAgentContextBanner
-              projectSlug={projectSlug}
-              environmentSlug={environmentSlug}
-              currentPage={currentPage}
-            />
-          }
+          context={contextBanner}
         />
       ) : (
         <>
@@ -498,13 +522,7 @@ export function DashboardAgentChat({
             onStop={stop}
             isStreaming={isStreaming}
             focusKey={sendRequest?.seq}
-            context={
-              <DashboardAgentContextBanner
-                projectSlug={projectSlug}
-                environmentSlug={environmentSlug}
-                currentPage={currentPage}
-              />
-            }
+            context={contextBanner}
             trailingAction={
               showNewChat && (
                 <Button

From 153c64b4f711f547a0ab28dee167c0de07531f09 Mon Sep 17 00:00:00 2001
From: Katia Bulatova <katherine.bulatova@gmail.com>
Date: Fri, 28 Aug 2026 16:09:35 +0000
Subject: [PATCH 43/43] fix(webapp): launcher aria-label reflects open state

---
 .../app/components/dashboard-agent/dashboardAgentLauncher.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/webapp/app/components/dashboard-agent/dashboardAgentLauncher.tsx b/apps/webapp/app/components/dashboard-agent/dashboardAgentLauncher.tsx
index 64a0379f784..e623565fb15 100644
--- a/apps/webapp/app/components/dashboard-agent/dashboardAgentLauncher.tsx
+++ b/apps/webapp/app/components/dashboard-agent/dashboardAgentLauncher.tsx
@@ -69,7 +69,7 @@ export function DashboardAgentLauncher() {
         <span className="relative inline-flex shrink-0">
           <Button
             variant="ask-trigger/small"
-            aria-label={hasUnread ? `${ASK_AGENT_LABEL}, unread updates` : ASK_AGENT_LABEL}
+            aria-label={open ? "Close chat" : hasUnread ? `${ASK_AGENT_LABEL}, unread updates` : ASK_AGENT_LABEL}
             onClick={() => setOpen(!open)}
           >
             {ASK_AGENT_LABEL}