feat(sessions): Scrollable & collapsible queued-messages dock

packages/ui/src/features/sessions/components/QueuedMessagesDock.test.tsx

@@ -0,0 +1,134 @@
+import { Theme } from "@radix-ui/themes";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const queuedState = vi.hoisted(() => ({
+  messages: [] as Array<{ id: string; content: string; queuedAt: number }>,
+}));
+
+vi.mock("@posthog/core/sessions/sessionService", () => ({
+  SESSION_SERVICE: Symbol.for("test.session-service"),
+}));
+
+vi.mock("@posthog/di/react", () => ({
+  useService: () => ({
+    steerQueuedMessage: vi.fn().mockResolvedValue(undefined),
+  }),
+}));
+
+vi.mock("@posthog/ui/features/sessions/useSession", () => ({
+  useQueuedMessagesForTask: () => queuedState.messages,
+}));
+
+vi.mock("@posthog/ui/features/sessions/hooks/useMessagingMode", () => ({
+  useSupportsNativeSteer: () => false,
+}));
+
+vi.mock(
+  "@posthog/ui/features/sessions/hooks/useReturnQueuedMessageToEditor",
+  () => ({
+    useReturnQueuedMessageToEditor: () => vi.fn(),
+  }),
+);
+
+vi.mock("@posthog/ui/features/sessions/sessionStore", () => ({
+  sessionStoreSetters: { removeQueuedMessage: vi.fn() },
+  useSessionIsCloud: () => false,
+  useSessionSelector: <T,>(
+    _taskId: string,
+    select: (session: undefined) => T,
+  ) => select(undefined),
+}));
+
+vi.mock("@posthog/ui/primitives/toast", () => ({
+  toast: { error: vi.fn() },
+}));
+
+// Stub the per-message card so the test exercises the dock's collapse/scroll
+// shell, not the markdown/steer internals it already owns.
+vi.mock(
+  "@posthog/ui/features/sessions/components/session-update/QueuedMessageView",
+  async () => {
+    const React = await import("react");
+    return {
+      QueuedMessageView: ({ message }: { message: { content: string } }) =>
+        React.createElement(
+          "div",
+          { "data-testid": "queued-card" },
+          message.content,
+        ),
+    };
+  },
+);
+
+import { QueuedMessagesDock } from "./QueuedMessagesDock";
+
+const TWO_MESSAGES = [
+  { id: "q1", content: "first queued message", queuedAt: 1 },
+  { id: "q2", content: "second queued message", queuedAt: 2 },
+];
+
+// Each test uses a distinct taskId so the (real, per-task) collapse state in
+// sessionViewStore never bleeds between cases.
+function renderDock(taskId: string) {
+  return render(
+    <Theme>
+      <QueuedMessagesDock taskId={taskId} />
+    </Theme>,
+  );
+}
+
+describe("QueuedMessagesDock", () => {
+  beforeEach(() => {
+    queuedState.messages = [];
+  });
+
+  it("renders nothing when the queue is empty", () => {
+    queuedState.messages = [];
+    const { container } = render(<QueuedMessagesDock taskId="task-empty" />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("is expanded by default and shows every queued message with a count", () => {
+    queuedState.messages = TWO_MESSAGES;
+    renderDock("task-expanded");
+
+    expect(screen.getByText("first queued message")).toBeInTheDocument();
+    expect(screen.getByText("second queued message")).toBeInTheDocument();
+    expect(screen.getByText("2 queued")).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Collapse queued messages" }),
+    ).toHaveAttribute("aria-expanded", "true");
+  });
+
+  it("caps the list height and scrolls so it can't push the composer down", () => {
+    queuedState.messages = TWO_MESSAGES;
+    const { container } = renderDock("task-scroll");
+
+    const scroller = container.querySelector(".overflow-y-auto");
+    expect(scroller).not.toBeNull();
+    expect(scroller?.classList.contains("max-h-[30vh]")).toBe(true);
+  });
+
+  it("collapses and expands the list when the header is toggled", () => {
+    queuedState.messages = TWO_MESSAGES;
+    renderDock("task-toggle");
+
+    expect(screen.getAllByTestId("queued-card")).toHaveLength(2);
+
+    fireEvent.click(
+      screen.getByRole("button", { name: "Collapse queued messages" }),
+    );
+
+    // Collapsed: cards are hidden, but the header with the live count stays.
+    expect(screen.queryAllByTestId("queued-card")).toHaveLength(0);
+    expect(screen.getByText("2 queued")).toBeInTheDocument();
+    const trigger = screen.getByRole("button", {
+      name: "Expand queued messages",
+    });
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+
+    fireEvent.click(trigger);
+    expect(screen.getAllByTestId("queued-card")).toHaveLength(2);
+  });
+});

packages/ui/src/features/sessions/components/QueuedMessagesDock.tsx

@@ -1,3 +1,4 @@
+import { CaretDown, CaretRight, Stack } from "@phosphor-icons/react";
 import {
   SESSION_SERVICE,
   type SessionService,
@@ -11,9 +12,14 @@ import {
   useSessionIsCloud,
   useSessionSelector,
 } from "@posthog/ui/features/sessions/sessionStore";
+import {
+  useQueueCollapsed,
+  useSessionViewActions,
+} from "@posthog/ui/features/sessions/sessionViewStore";
 import { useQueuedMessagesForTask } from "@posthog/ui/features/sessions/useSession";
 import { toast } from "@posthog/ui/primitives/toast";
-import { Flex } from "@radix-ui/themes";
+import * as Collapsible from "@radix-ui/react-collapsible";
+import { Box, Flex, Text } from "@radix-ui/themes";
 
 interface QueuedMessagesDockProps {
   taskId: string;
@@ -23,6 +29,9 @@ interface QueuedMessagesDockProps {
  * Queued follow-ups pinned directly above the composer (outside the scrolling
  * thread) with per-message actions: steer it into the running turn now, return
  * it to the composer to re-read or edit, or discard it.
+ *
+ * The list is bounded and scrolls internally so a long queue never pushes the
+ * composer down or off-screen, and a header toggle lets the user collapse it.
  */
 export function QueuedMessagesDock({ taskId }: QueuedMessagesDockProps) {
   const queued = useQueuedMessagesForTask(taskId);
@@ -40,35 +49,68 @@ export function QueuedMessagesDock({ taskId }: QueuedMessagesDockProps) {
   // Cloud has no real mid-turn steer either (it would just interrupt the turn),
   // so hide it there too — the message stays queued and lands next turn.
   const canSteer = !isCompacting && !isCloud;
+  const collapsed = useQueueCollapsed(taskId);
+  const { setQueueCollapsed } = useSessionViewActions();
 
   if (queued.length === 0) return null;
 
+  const isOpen = !collapsed;
+
   return (
-    <Flex direction="column" gap="1" className="mb-1">
-      {queued.map((message) => (
-        <QueuedMessageView
-          key={message.id}
-          message={message}
-          supportsNativeSteer={supportsNativeSteer}
-          onSteer={
-            canSteer
-              ? () => {
-                  void sessionService
-                    .steerQueuedMessage(taskId, message.id)
-                    .catch(() => {
-                      toast.error(
-                        "Couldn't steer this message. It's still queued.",
-                      );
-                    });
-                }
-              : undefined
+    <Collapsible.Root
+      open={isOpen}
+      onOpenChange={(next) => setQueueCollapsed(taskId, !next)}
+      className="mb-1"
+    >
+      <Collapsible.Trigger asChild>
+        <button
+          type="button"
+          aria-label={
+            isOpen ? "Collapse queued messages" : "Expand queued messages"
           }
-          onReturnToEditor={() => returnToEditor(message)}
-          onRemove={() =>
-            sessionStoreSetters.removeQueuedMessage(taskId, message.id)
-          }
-        />
-      ))}
-    </Flex>
+          className="flex w-full items-center gap-2 rounded-sm px-1 py-0.5 text-left hover:bg-gray-3"
+        >
+          {isOpen ? (
+            <CaretDown size={12} className="text-gray-10" />
+          ) : (
+            <CaretRight size={12} className="text-gray-10" />
+          )}
+          <Stack size={14} className="shrink-0 text-gray-9" />
+          <Text className="font-medium text-[13px] text-gray-11">
+            {queued.length} queued
+          </Text>
+        </button>
+      </Collapsible.Trigger>
+      <Collapsible.Content>
+        <Box className="max-h-[30vh] overflow-y-auto">
+          <Flex direction="column" gap="1">
+            {queued.map((message) => (
+              <QueuedMessageView
+                key={message.id}
+                message={message}
+                supportsNativeSteer={supportsNativeSteer}
+                onSteer={
+                  canSteer
+                    ? () => {
+                        void sessionService
+                          .steerQueuedMessage(taskId, message.id)
+                          .catch(() => {
+                            toast.error(
+                              "Couldn't steer this message. It's still queued.",
+                            );
+                          });
+                      }
+                    : undefined
+                }
+                onReturnToEditor={() => returnToEditor(message)}
+                onRemove={() =>
+                  sessionStoreSetters.removeQueuedMessage(taskId, message.id)
+                }
+              />
+            ))}
+          </Flex>
+        </Box>
+      </Collapsible.Content>
+    </Collapsible.Root>
   );
 }

packages/ui/src/features/sessions/components/SessionView.tsx

@@ -632,7 +632,7 @@ export function SessionView({
                     />
                   </ComposerSlot>
                 ) : (
-                  <Box className="relative">
+                  <Box className="relative shrink-0">
                     <Box
                       className={`absolute inset-0 flex min-h-[66px] items-center justify-center gap-2 transition-opacity duration-200 ${
                         isRunning

packages/ui/src/features/sessions/sessionViewStore.ts

@@ -10,6 +10,12 @@ interface SessionViewState {
    * global collapse mode. Not persisted; wiped when the global mode changes.
    */
   groupOverrides: Record<string, boolean>;
+  /**
+   * Ephemeral per-task collapse of the queued-messages dock, keyed by taskId.
+   * `true` = collapsed; absent/`false` = expanded (the default). Not persisted;
+   * resets to expanded on app restart.
+   */
+  queueCollapsedByTaskId: Record<string, boolean>;
 }
 
 interface SessionViewActions {
@@ -18,6 +24,7 @@ interface SessionViewActions {
   toggleSearch: () => void;
   setGroupOverride: (id: string, expanded: boolean) => void;
   clearGroupOverrides: () => void;
+  setQueueCollapsed: (taskId: string, collapsed: boolean) => void;
 }
 
 type SessionViewStore = SessionViewState & { actions: SessionViewActions };
@@ -27,6 +34,7 @@ const useStore = create<SessionViewStore>((set) => ({
   searchQuery: "",
   showSearch: false,
   groupOverrides: {},
+  queueCollapsedByTaskId: {},
   actions: {
     setShowRawLogs: (show) => set({ showRawLogs: show }),
     setSearchQuery: (query) => set({ searchQuery: query }),
@@ -45,11 +53,20 @@ const useStore = create<SessionViewStore>((set) => ({
           ? state
           : { groupOverrides: {} },
       ),
+    setQueueCollapsed: (taskId, collapsed) =>
+      set((state) => ({
+        queueCollapsedByTaskId: {
+          ...state.queueCollapsedByTaskId,
+          [taskId]: collapsed,
+        },
+      })),
   },
 }));
 
 export const useShowRawLogs = () => useStore((s) => s.showRawLogs);
 export const useSearchQuery = () => useStore((s) => s.searchQuery);
 export const useShowSearch = () => useStore((s) => s.showSearch);
 export const useGroupOverrides = () => useStore((s) => s.groupOverrides);
+export const useQueueCollapsed = (taskId: string) =>
+  useStore((s) => s.queueCollapsedByTaskId[taskId] ?? false);
 export const useSessionViewActions = () => useStore((s) => s.actions);