fix(web): auto-rotate draft launcher on narrow panes

Author: pallyoung

packages/web/src/features/agent-panes/views/shared/draft-launcher.test.tsx

@@ -1,12 +1,13 @@
-import { createEvent, fireEvent, render, screen } from "@testing-library/react";
+import { act, createEvent, fireEvent, render, screen } from "@testing-library/react";
 import { createStore, Provider } from "jotai";
-import { beforeEach, describe, expect, it, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { localeAtom } from "../../../../atoms/app-ui";
 import { wsClientAtom } from "../../../../atoms/connection";
 import { WORKSPACE_PATH_DRAG_MIME } from "../../../../lib/workspace-path-drag";
 import { DraftLauncher } from "./draft-launcher";
 
 const mockUseProviderLauncher = vi.fn();
+const originalResizeObserver = global.ResizeObserver;
 
 vi.mock("../../actions/use-provider-launcher", () => ({
   useProviderLauncher: (...args: unknown[]) => mockUseProviderLauncher(...args),
@@ -31,7 +32,57 @@ function createRuntimeState(providerId: "claude" | "codex") {
   };
 }
 
+function createDraftLauncherStore() {
+  const store = createStore();
+
+  store.set(localeAtom, "en");
+  store.set(wsClientAtom, {
+    sendCommand: vi.fn(),
+    subscribe: vi.fn(() => () => {}),
+  } as never);
+
+  return store;
+}
+
+function installResizeObserverMock() {
+  let callback: ResizeObserverCallback | null = null;
+
+  class ResizeObserverMock {
+    constructor(observerCallback: ResizeObserverCallback) {
+      callback = observerCallback;
+    }
+
+    observe() {}
+    disconnect() {}
+  }
+
+  global.ResizeObserver = ResizeObserverMock as unknown as typeof ResizeObserver;
+
+  return {
+    resize(target: Element, width: number) {
+      if (!callback) {
+        throw new Error("ResizeObserver was not created");
+      }
+
+      callback(
+        [
+          {
+            target,
+            contentRect: { width },
+          } as ResizeObserverEntry,
+        ],
+        {} as ResizeObserver
+      );
+    },
+  };
+}
+
 describe("DraftLauncher", () => {
+  afterEach(() => {
+    global.ResizeObserver = originalResizeObserver;
+    vi.useRealTimers();
+  });
+
   beforeEach(() => {
     vi.clearAllMocks();
     mockUseProviderLauncher.mockReturnValue({
@@ -126,13 +177,7 @@ describe("DraftLauncher", () => {
   });
 
   it("switches draft launcher carousel panels", () => {
-    const store = createStore();
-
-    store.set(localeAtom, "en");
-    store.set(wsClientAtom, {
-      sendCommand: vi.fn(),
-      subscribe: vi.fn(() => () => {}),
-    } as never);
+    const store = createDraftLauncherStore();
 
     const { container } = render(
       <Provider store={store}>
@@ -155,6 +200,69 @@ describe("DraftLauncher", () => {
     expect(carouselTrack).toHaveClass("agent-draft-component-row--file");
   });
 
+  it("auto-rotates draft launcher carousel panels in compact layout", async () => {
+    vi.useFakeTimers();
+    const resizeObserver = installResizeObserverMock();
+    const store = createDraftLauncherStore();
+
+    const { container } = render(
+      <Provider store={store}>
+        <DraftLauncher workspaceId="ws-123" />
+      </Provider>
+    );
+
+    const launcher = container.querySelector(".agent-draft-launcher");
+    const agentButton = screen.getByRole("button", { name: "Agent" });
+    const fileButton = screen.getByRole("button", { name: "File Editor" });
+    const carouselTrack = container.querySelector(".agent-draft-component-row");
+
+    expect(launcher).not.toBeNull();
+    expect(carouselTrack).not.toHaveClass("agent-draft-component-row--file");
+
+    act(() => {
+      resizeObserver.resize(launcher as Element, 360);
+    });
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(4000);
+    });
+
+    expect(agentButton).toHaveAttribute("aria-pressed", "false");
+    expect(fileButton).toHaveAttribute("aria-pressed", "true");
+    expect(carouselTrack).toHaveClass("agent-draft-component-row--file");
+  });
+
+  it("does not auto-rotate draft launcher carousel panels in wide layout", async () => {
+    vi.useFakeTimers();
+    const resizeObserver = installResizeObserverMock();
+    const store = createDraftLauncherStore();
+
+    const { container } = render(
+      <Provider store={store}>
+        <DraftLauncher workspaceId="ws-123" />
+      </Provider>
+    );
+
+    const launcher = container.querySelector(".agent-draft-launcher");
+    const agentButton = screen.getByRole("button", { name: "Agent" });
+    const fileButton = screen.getByRole("button", { name: "File Editor" });
+    const carouselTrack = container.querySelector(".agent-draft-component-row");
+
+    expect(launcher).not.toBeNull();
+
+    act(() => {
+      resizeObserver.resize(launcher as Element, 640);
+    });
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(4000);
+    });
+
+    expect(agentButton).toHaveAttribute("aria-pressed", "true");
+    expect(fileButton).toHaveAttribute("aria-pressed", "false");
+    expect(carouselTrack).not.toHaveClass("agent-draft-component-row--file");
+  });
+
   it("renders a draft drop label when pane drag hover is active", () => {
     const store = createStore();
 

packages/web/src/features/agent-panes/views/shared/draft-launcher.tsx

@@ -1,7 +1,7 @@
 import type { Session } from "@coder-studio/core";
 import { useAtomValue, useSetAtom } from "jotai";
 import { ArrowRight, FlipHorizontal, FlipVertical, X } from "lucide-react";
-import { type DragEvent, type FC, type PointerEvent, useRef, useState } from "react";
+import { type DragEvent, type FC, type PointerEvent, useEffect, useRef, useState } from "react";
 import { dispatchCommandAtom } from "../../../../atoms/connection";
 import { sessionsAtom } from "../../../../atoms/sessions";
 import { Button, IconButton, StatusDot, Tag, ThemedIcon, Tooltip } from "../../../../components/ui";
@@ -14,6 +14,24 @@ import { buildDiagnosticsPath } from "../../../diagnostics";
 import type { PaneDropIntent } from "../../actions/pane-drag-types";
 import { type ProviderId, useProviderLauncher } from "../../actions/use-provider-launcher";
 
+const COMPACT_CAROUSEL_MAX_WIDTH_REM = 28;
+const COMPACT_CAROUSEL_INTERVAL_MS = 4000;
+
+function getCompactCarouselMaxWidthPx(): number {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    return COMPACT_CAROUSEL_MAX_WIDTH_REM * 16;
+  }
+
+  const rootFontSize = window.getComputedStyle(document.documentElement).fontSize;
+  const parsedRootFontSize = Number.parseFloat(rootFontSize);
+
+  if (!Number.isFinite(parsedRootFontSize) || parsedRootFontSize <= 0) {
+    return COMPACT_CAROUSEL_MAX_WIDTH_REM * 16;
+  }
+
+  return COMPACT_CAROUSEL_MAX_WIDTH_REM * parsedRootFontSize;
+}
+
 interface DraftLauncherDragState {
   isDragging: boolean;
   isActiveDropTarget: boolean;
@@ -47,7 +65,9 @@ export const DraftLauncher: FC<DraftLauncherProps> = ({
   const dispatch = useAtomValue(dispatchCommandAtom);
   const setSessions = useSetAtom(sessionsAtom);
   const [activePanel, setActivePanel] = useState<"agent" | "file">("agent");
+  const [isCompactCarousel, setIsCompactCarousel] = useState(false);
   const [isFileDropTarget, setIsFileDropTarget] = useState(false);
+  const draftLauncherRef = useRef<HTMLDivElement | null>(null);
   const swipeStartXRef = useRef<number | null>(null);
   const { states, launch } = useProviderLauncher(
     dispatch,
@@ -219,6 +239,62 @@ export const DraftLauncher: FC<DraftLauncherProps> = ({
     swipeStartXRef.current = null;
   };
 
+  useEffect(() => {
+    const element = draftLauncherRef.current;
+
+    if (!element) {
+      return;
+    }
+
+    const updateCompactState = (width: number) => {
+      setIsCompactCarousel(width > 0 && width <= getCompactCarouselMaxWidthPx());
+    };
+
+    updateCompactState(element.getBoundingClientRect().width);
+
+    if (typeof ResizeObserver === "function") {
+      const observer = new ResizeObserver((entries) => {
+        const entry = entries[0];
+
+        if (!entry) {
+          return;
+        }
+
+        updateCompactState(entry.contentRect.width || entry.target.getBoundingClientRect().width);
+      });
+
+      observer.observe(element);
+
+      return () => {
+        observer.disconnect();
+      };
+    }
+
+    const handleWindowResize = () => {
+      updateCompactState(element.getBoundingClientRect().width);
+    };
+
+    window.addEventListener("resize", handleWindowResize);
+
+    return () => {
+      window.removeEventListener("resize", handleWindowResize);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!isCompactCarousel) {
+      return;
+    }
+
+    const timer = window.setTimeout(() => {
+      setActivePanel((currentPanel) => (currentPanel === "agent" ? "file" : "agent"));
+    }, COMPACT_CAROUSEL_INTERVAL_MS);
+
+    return () => {
+      window.clearTimeout(timer);
+    };
+  }, [activePanel, isCompactCarousel]);
+
   return (
     <div
       className={`session-card agent-pane${dragState?.isDragging ? " draft-launcher--dragging" : ""}${dragState?.isActiveDropTarget || isFileDropTarget ? " draft-launcher--drop-target" : ""}`}
@@ -281,7 +357,7 @@ export const DraftLauncher: FC<DraftLauncherProps> = ({
         </div>
       </div>
 
-      <div className="agent-draft-launcher">
+      <div className="agent-draft-launcher" ref={draftLauncherRef}>
         <div className="agent-draft-content">
           <div className="agent-draft-component">
             <div
@@ -435,7 +511,9 @@ export const DraftLauncher: FC<DraftLauncherProps> = ({
               ))}
             </div>
 
-            <div className="agent-draft-footer">点击启动 Agent 或直接拖拽文件到右侧区域打开</div>
+            <div className="agent-draft-footer">
+              点击「启动 Agent」，或将文件拖到右侧区域直接打开。
+            </div>
           </div>
         </div>
       </div>