fix draft launcher narrow carousel

Author: pallyoung

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

@@ -125,6 +125,36 @@ describe("DraftLauncher", () => {
     expect(screen.getByText("Select Agent")).toBeInTheDocument();
   });
 
+  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 { container } = render(
+      <Provider store={store}>
+        <DraftLauncher workspaceId="ws-123" />
+      </Provider>
+    );
+
+    const agentButton = screen.getByRole("button", { name: "Agent" });
+    const fileButton = screen.getByRole("button", { name: "File Editor" });
+    const carouselTrack = container.querySelector(".agent-draft-component-row");
+
+    expect(agentButton).toHaveAttribute("aria-pressed", "true");
+    expect(fileButton).toHaveAttribute("aria-pressed", "false");
+    expect(carouselTrack).not.toHaveClass("agent-draft-component-row--file");
+
+    fireEvent.click(fileButton);
+
+    expect(agentButton).toHaveAttribute("aria-pressed", "false");
+    expect(fileButton).toHaveAttribute("aria-pressed", "true");
+    expect(carouselTrack).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, useState } from "react";
+import { type DragEvent, type FC, type PointerEvent, useRef, useState } from "react";
 import { dispatchCommandAtom } from "../../../../atoms/connection";
 import { sessionsAtom } from "../../../../atoms/sessions";
 import { Button, IconButton, StatusDot, Tag, ThemedIcon, Tooltip } from "../../../../components/ui";
@@ -46,7 +46,9 @@ export const DraftLauncher: FC<DraftLauncherProps> = ({
   const t = useTranslation();
   const dispatch = useAtomValue(dispatchCommandAtom);
   const setSessions = useSetAtom(sessionsAtom);
+  const [activePanel, setActivePanel] = useState<"agent" | "file">("agent");
   const [isFileDropTarget, setIsFileDropTarget] = useState(false);
+  const swipeStartXRef = useRef<number | null>(null);
   const { states, launch } = useProviderLauncher(
     dispatch,
     workspaceId,
@@ -189,6 +191,34 @@ export const DraftLauncher: FC<DraftLauncherProps> = ({
     onOpenFile?.(paneId, path);
   };
 
+  const handleCarouselPointerDown = (event: PointerEvent<HTMLDivElement>) => {
+    if (event.pointerType === "mouse") {
+      return;
+    }
+
+    swipeStartXRef.current = event.clientX;
+  };
+
+  const handleCarouselPointerUp = (event: PointerEvent<HTMLDivElement>) => {
+    const startX = swipeStartXRef.current;
+    swipeStartXRef.current = null;
+
+    if (startX === null || event.pointerType === "mouse") {
+      return;
+    }
+
+    const deltaX = event.clientX - startX;
+    if (Math.abs(deltaX) < 48) {
+      return;
+    }
+
+    setActivePanel(deltaX < 0 ? "file" : "agent");
+  };
+
+  const handleCarouselPointerCancel = () => {
+    swipeStartXRef.current = null;
+  };
+
   return (
     <div
       className={`session-card agent-pane${dragState?.isDragging ? " draft-launcher--dragging" : ""}${dragState?.isActiveDropTarget || isFileDropTarget ? " draft-launcher--drop-target" : ""}`}
@@ -254,7 +284,12 @@ export const DraftLauncher: FC<DraftLauncherProps> = ({
       <div className="agent-draft-launcher">
         <div className="agent-draft-content">
           <div className="agent-draft-component">
-            <div className="agent-draft-component-row">
+            <div
+              className={`agent-draft-component-row${activePanel === "file" ? " agent-draft-component-row--file" : ""}`}
+              onPointerCancel={handleCarouselPointerCancel}
+              onPointerDown={handleCarouselPointerDown}
+              onPointerUp={handleCarouselPointerUp}
+            >
               {/* Agent panel */}
               <div className="agent-draft-panel">
                 <div className="agent-draft-panel-header">
@@ -384,6 +419,22 @@ export const DraftLauncher: FC<DraftLauncherProps> = ({
               </div>
             </div>
 
+            <div className="agent-draft-carousel-dots" role="group" aria-label="Draft panels">
+              {[
+                { id: "agent" as const, label: "Agent" },
+                { id: "file" as const, label: "File Editor" },
+              ].map((panel) => (
+                <button
+                  key={panel.id}
+                  aria-label={panel.label}
+                  aria-pressed={activePanel === panel.id}
+                  className={`agent-draft-carousel-dot${activePanel === panel.id ? " agent-draft-carousel-dot--active" : ""}`}
+                  onClick={() => setActivePanel(panel.id)}
+                  type="button"
+                />
+              ))}
+            </div>
+
             <div className="agent-draft-footer">点击启动 Agent 或直接拖拽文件到右侧区域打开</div>
           </div>
         </div>

packages/web/src/styles/components.css

@@ -7279,6 +7279,8 @@ textarea.input {
 }
 
 .agent-draft-content {
+  width: 100%;
+  max-width: 100%;
   align-items: center;
   justify-content: center;
 }
@@ -7288,12 +7290,47 @@ textarea.input {
   display: flex;
   flex-direction: column;
   gap: var(--sp-2);
+  width: fit-content;
+  max-width: 100%;
 }
 
 .agent-draft-component-row {
   display: flex;
   flex-direction: row;
+  align-items: stretch;
   gap: var(--sp-4);
+  transition: transform var(--duration-normal) var(--ease-out);
+}
+
+.agent-draft-carousel-dots {
+  display: none;
+  justify-content: center;
+  gap: var(--sp-2);
+  padding-top: var(--sp-2);
+}
+
+.agent-draft-carousel-dot {
+  appearance: none;
+  border: 0;
+  width: 6px;
+  height: 6px;
+  border-radius: var(--radius-full);
+  background: var(--text-disabled);
+  padding: 0;
+  cursor: pointer;
+  transition:
+    width var(--duration-fast) var(--ease-out),
+    background-color var(--duration-fast) var(--ease-out);
+}
+
+.agent-draft-carousel-dot:focus-visible {
+  outline: 2px solid var(--status-info-fg);
+  outline-offset: 2px;
+}
+
+.agent-draft-carousel-dot--active {
+  width: 18px;
+  background: var(--text-primary);
 }
 
 /* ── Panel ────────────────────────────────────────── */
@@ -7499,15 +7536,47 @@ textarea.input {
 }
 
 @container (max-width: 28rem) {
+  .agent-draft-component {
+    width: min(100%, 24rem);
+    overflow: hidden;
+  }
+
   .agent-draft-component-row {
-    flex-direction: column;
+    width: 200%;
+    flex-direction: row;
+    gap: 0;
+  }
+
+  .agent-draft-component-row--file {
+    transform: translateX(-50%);
+  }
+
+  .agent-draft-panel {
+    flex: 0 0 50%;
+    width: 50%;
+    align-items: stretch;
+    justify-content: center;
   }
 
   .agent-draft-panel + .agent-draft-panel {
     border-left: none;
-    border-top: 1px solid var(--border-default);
+    border-top: none;
     padding-left: var(--sp-5);
   }
+
+  .agent-draft-panel-header {
+    align-self: flex-start;
+  }
+
+  .agent-draft-panel-list,
+  .agent-draft-drop-zone,
+  .agent-provider-card {
+    width: 100%;
+  }
+
+  .agent-draft-carousel-dots {
+    display: flex;
+  }
 }
 
 .session-card {

packages/web/src/styles/components.theme.test.ts

@@ -1814,9 +1814,13 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(stylesheet).not.toContain("\n.agent-provider-card[disabled] {\n");
   });
 
-  it("keeps draft launcher provider cards adaptive inside narrow panes", () => {
+  it("keeps draft launcher provider cards and carousel adaptive inside narrow panes", () => {
     const launcher = getLastRuleBlock(".agent-draft-launcher");
     const content = getLastRuleBlock(".agent-draft-content");
+    const component = getLastRuleBlock(".agent-draft-component");
+    const carouselRow = getLastRuleBlock(".agent-draft-component-row");
+    const carouselDots = getLastRuleBlock(".agent-draft-carousel-dots");
+    const activeCarouselDot = getLastRuleBlock(".agent-draft-carousel-dot--active");
     const providerCard = getLastRuleBlock(".agent-provider-card");
     const providerBody = getLastRuleBlock(".agent-provider-card-body");
     const providerArrow = getLastRuleBlock(".agent-provider-card-arrow");
@@ -1825,9 +1829,22 @@ describe("components.css theme-sensitive surfaces", () => {
     const providerIcon = getLastRuleBlock(".agent-provider-card-icon");
 
     expect(launcher).toContain("container-type: inline-size");
+    expect(content).toContain("width: 100%");
     expect(content).toContain("max-width: 100%");
-    expect(content).toContain("background: var(--agent-draft-surface)");
-    expect(content).toContain("backdrop-filter: var(--material-backdrop-filter)");
+    expect(component).toContain("max-width: 100%");
+    expect(carouselRow).toContain("width: 200%");
+    expect(carouselRow).toContain("flex-direction: row");
+    expect(carouselRow).toContain("gap: 0");
+    expect(getLastRuleBlock(".agent-draft-component-row--file")).toContain(
+      "transform: translateX(-50%)"
+    );
+    expect(
+      getRuleBlocksFrom(stylesheet, ".agent-draft-carousel-dots").some((block) =>
+        block.includes("display: none")
+      )
+    ).toBe(true);
+    expect(carouselDots).toContain("display: flex");
+    expect(activeCarouselDot).toContain("width: 18px");
     expect(providerCard).toContain("background: var(--agent-provider-card-surface)");
     expect(providerCard).toContain("min-width: 0");
     expect(providerBody).toContain("width: 100%");
@@ -1838,9 +1855,7 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(codexCard).toContain("background: var(--state-info-bg)");
     expect(codexCard).toContain("border-color: var(--state-info-border)");
     expect(providerIcon).toContain("background: var(--icon-surface-subtle)");
-    expect(stylesheet).toMatch(
-      /@container\s*\(max-width:\s*36rem\)\s*\{[\s\S]*?\.agent-draft-providers\s*\{[\s\S]*?grid-template-columns:\s*1fr;[\s\S]*?\}/
-    );
+    expect(carouselRow).not.toContain("flex-direction: column");
   });
 
   it("keeps legacy agent pane chrome aligned to shared density and state tokens", () => {