fix(web): allow multiple editor panes

Author: pallyoung

packages/web/src/features/agent-panes/actions/use-pane-actions.ts

@@ -11,7 +11,6 @@ import {
   closeEditorPaneById,
   closePaneBySessionId,
   convertDraftPaneToEditor,
-  enforceSingleEditorPaneInvariant,
   insertPaneAtEdge as insertPaneNodeAtEdge,
   removePaneBySessionId,
   replaceSessionInPane,
@@ -31,10 +30,9 @@ export function usePaneActions(workspaceId: string) {
     (update: PaneNode | ((current: PaneNode) => PaneNode)) => {
       const current = store.get(paneLayoutAtomFamily(workspaceId));
       const next = typeof update === "function" ? update(current) : update;
-      const normalized = enforceSingleEditorPaneInvariant(next);
-      setPaneLayout(normalized);
-      void persistUiState({ paneLayout: normalized });
-      return normalized;
+      setPaneLayout(next);
+      void persistUiState({ paneLayout: next });
+      return next;
     },
     [persistUiState, setPaneLayout, store, workspaceId]
   );

packages/web/src/features/agent-panes/atoms/editor-panes.ts

@@ -7,6 +7,10 @@ export const focusedEditorPaneIdAtomFamily = atomFamily(() => atom<string | null
 
 export const activeEditorPaneIdAtomFamily = atomFamily(() => atom<string | null>(null));
 
+export function getEditorPaneStateKey(workspaceId: string, paneId: string): string {
+  return `${workspaceId}::${paneId}`;
+}
+
 export const editorPaneActiveFilePathAtomFamily = atomFamily(() => atom<string | null>(null));
 
 export const editorPaneModeAtomFamily = atomFamily(() => atom<WorkspaceEditorMode>("preview"));

packages/web/src/features/agent-panes/atoms/pane-layout.test.ts

@@ -5,6 +5,7 @@ import {
   normalizePaneLayout,
   readLegacyPaneLayout,
   readPaneRatio,
+  toWorkspacePaneLayout,
   writePaneRatio,
 } from "./pane-layout";
 
@@ -52,7 +53,7 @@ describe("pane layout storage helpers", () => {
     });
   });
 
-  it("normalizes persisted layouts back to a single editor pane", () => {
+  it("preserves multiple editor panes from persisted layouts", () => {
     expect(
       normalizePaneLayout({
         id: "root",
@@ -69,7 +70,7 @@ describe("pane layout storage helpers", () => {
       direction: "horizontal",
       children: [
         { id: "left", type: "leaf", leafKind: "editor" },
-        { id: "right", type: "leaf", leafKind: "draft" },
+        { id: "right", type: "leaf", leafKind: "editor" },
       ],
     });
   });
@@ -97,4 +98,27 @@ describe("pane layout storage helpers", () => {
       ],
     });
   });
+
+  it("serializes pane layouts to the strict workspace uiState schema", () => {
+    expect(
+      toWorkspacePaneLayout({
+        id: "root",
+        type: "split",
+        direction: "horizontal",
+        ratio: 0.42,
+        children: [
+          { id: "left", type: "leaf", leafKind: "editor", sessionId: "ignored-session" },
+          { id: "right", type: "leaf", leafKind: "session", sessionId: "sess-1" },
+        ],
+      })
+    ).toEqual({
+      id: "root",
+      type: "split",
+      direction: "horizontal",
+      children: [
+        { id: "left", type: "leaf", leafKind: "editor" },
+        { id: "right", type: "leaf", leafKind: "session", sessionId: "sess-1" },
+      ],
+    });
+  });
 });

packages/web/src/features/agent-panes/atoms/pane-layout.ts

@@ -4,10 +4,13 @@
  * Server-backed pane layout projection owned by the agent-panes feature.
  */
 
-import type { WorkspacePaneLeafKind, WorkspacePaneNode } from "@coder-studio/core";
+import type {
+  WorkspacePaneLeafKind,
+  WorkspacePaneNode,
+  WorkspacePaneSplit,
+} from "@coder-studio/core";
 import { atom } from "jotai";
 import { atomFamily } from "jotai-family";
-import { enforceSingleEditorPaneInvariant } from "../pane-layout-tree";
 
 /**
  * Pane layout by workspace (agent pane splits).
@@ -40,7 +43,7 @@ export const defaultPaneLayout: PaneNode = {
   leafKind: "draft",
 };
 
-export const paneLayoutAtomFamily = atomFamily((workspaceId: string) =>
+export const paneLayoutAtomFamily = atomFamily((_workspaceId: string) =>
   atom<PaneNode>(defaultPaneLayout)
 );
 
@@ -77,8 +80,53 @@ export function readLegacyPaneLayout(workspaceId: string): PaneNode | null {
 export function normalizePaneLayout(
   layout: WorkspacePaneNode | PaneNode | null | undefined
 ): PaneNode | null {
-  const normalized = normalizePaneLayoutNode(layout);
-  return normalized ? enforceSingleEditorPaneInvariant(normalized) : null;
+  return normalizePaneLayoutNode(layout);
+}
+
+export function toWorkspacePaneLayout(layout: WorkspacePaneNode | PaneNode): WorkspacePaneNode {
+  if (layout.type === "leaf") {
+    const leafKind = "leafKind" in layout ? layout.leafKind : undefined;
+    const sessionId =
+      "sessionId" in layout && typeof layout.sessionId === "string" ? layout.sessionId : undefined;
+
+    if ((leafKind === "session" || !leafKind) && sessionId) {
+      return {
+        id: layout.id,
+        type: "leaf",
+        leafKind: "session",
+        sessionId,
+      };
+    }
+
+    if (leafKind === "editor") {
+      return {
+        id: layout.id,
+        type: "leaf",
+        leafKind: "editor",
+      };
+    }
+
+    return {
+      id: layout.id,
+      type: "leaf",
+      leafKind: "draft",
+    };
+  }
+
+  const next: WorkspacePaneSplit = {
+    id: layout.id,
+    type: "split",
+  };
+
+  if (layout.direction) {
+    next.direction = layout.direction;
+  }
+
+  if (layout.children) {
+    next.children = layout.children.map((child) => toWorkspacePaneLayout(child));
+  }
+
+  return next;
 }
 
 function normalizePaneLayoutNode(

packages/web/src/features/agent-panes/components/session-card.test.tsx

@@ -241,6 +241,7 @@ describe("SessionCard", () => {
         paneLayout: {
           id: "root",
           type: "leaf",
+          leafKind: "session",
           sessionId: "sess_654321",
         },
       })

packages/web/src/features/agent-panes/index.test.tsx

@@ -18,6 +18,10 @@ import {
 import { LEGACY_PANE_LAYOUT_STORAGE_KEY_PREFIX, paneLayoutAtomFamily } from "./atoms/pane-layout";
 import { AgentPanes } from "./index";
 
+function editorPaneStateKey(workspaceId: string, paneId: string): string {
+  return `${workspaceId}::${paneId}`;
+}
+
 type MockSessionCardProps = {
   dragState?: {
     isActiveDropTarget: boolean;
@@ -642,10 +646,9 @@ describe("AgentPanes", () => {
             id: "root",
             type: "split",
             direction: "horizontal",
-            ratio: 0.5,
             children: [
-              { id: "left", type: "leaf", sessionId: "sess_2" },
-              { id: "right", type: "leaf", sessionId: "sess_1" },
+              { id: "left", type: "leaf", leafKind: "session", sessionId: "sess_2" },
+              { id: "right", type: "leaf", leafKind: "session", sessionId: "sess_1" },
             ],
           },
         }),
@@ -732,10 +735,9 @@ describe("AgentPanes", () => {
             id: "root",
             type: "split",
             direction: "horizontal",
-            ratio: 0.5,
             children: [
-              { id: "left", type: "leaf" },
-              { id: "right", type: "leaf", sessionId: "sess_1" },
+              { id: "left", type: "leaf", leafKind: "draft" },
+              { id: "right", type: "leaf", leafKind: "session", sessionId: "sess_1" },
             ],
           },
         }),
@@ -834,10 +836,19 @@ describe("AgentPanes", () => {
             id: expect.stringMatching(/^split-right-left-/),
             type: "split",
             direction: "horizontal",
-            ratio: 0.5,
             children: [
-              expect.objectContaining({ id: "left", type: "leaf", sessionId: "sess_1" }),
-              expect.objectContaining({ id: "right", type: "leaf", sessionId: "sess_2" }),
+              expect.objectContaining({
+                id: "left",
+                type: "leaf",
+                leafKind: "session",
+                sessionId: "sess_1",
+              }),
+              expect.objectContaining({
+                id: "right",
+                type: "leaf",
+                leafKind: "session",
+                sessionId: "sess_2",
+              }),
             ],
           }),
         }),
@@ -1865,7 +1876,7 @@ describe("AgentPanes", () => {
     expect(await screen.findByTestId("editor-pane-root")).toBeInTheDocument();
   });
 
-  it("reuses the existing editor pane when another draft launcher opens a file", async () => {
+  it("converts another draft launcher into a new editor pane when it opens a file", async () => {
     const { store } = createAgentPaneStore({
       id: "root",
       type: "split",
@@ -1875,6 +1886,10 @@ describe("AgentPanes", () => {
         { id: "right", type: "leaf", leafKind: "draft" },
       ],
     });
+    store.set(
+      editorPaneActiveFilePathAtomFamily(editorPaneStateKey("ws-1", "left")),
+      "src/left.tsx"
+    );
 
     render(
       <Provider store={store}>
@@ -1890,12 +1905,17 @@ describe("AgentPanes", () => {
       direction: "horizontal",
       children: [
         { id: "left", type: "leaf", leafKind: "editor" },
-        { id: "right", type: "leaf", leafKind: "draft" },
+        { id: "right", type: "leaf", leafKind: "editor" },
       ],
     });
-    expect(store.get(activeEditorPaneIdAtomFamily("ws-1"))).toBe("left");
-    expect(store.get(focusedEditorPaneIdAtomFamily("ws-1"))).toBe("left");
-    expect(store.get(editorPaneActiveFilePathAtomFamily("ws-1"))).toBe("src/app.tsx");
+    expect(store.get(activeEditorPaneIdAtomFamily("ws-1"))).toBe("right");
+    expect(store.get(focusedEditorPaneIdAtomFamily("ws-1"))).toBe("right");
+    expect(store.get(editorPaneActiveFilePathAtomFamily(editorPaneStateKey("ws-1", "left")))).toBe(
+      "src/left.tsx"
+    );
+    expect(store.get(editorPaneActiveFilePathAtomFamily(editorPaneStateKey("ws-1", "right")))).toBe(
+      "src/app.tsx"
+    );
     expect(store.get(activeFilePathAtomFamily("ws-1"))).toBeNull();
   });
 
@@ -1908,7 +1928,10 @@ describe("AgentPanes", () => {
     store.set(activeEditorPaneIdAtomFamily("ws-1"), "root");
     store.set(focusedEditorPaneIdAtomFamily("ws-1"), "root");
     store.set(activeFilePathAtomFamily("ws-1"), "src/global.tsx");
-    store.set(editorPaneActiveFilePathAtomFamily("ws-1"), "src/app.tsx");
+    store.set(
+      editorPaneActiveFilePathAtomFamily(editorPaneStateKey("ws-1", "root")),
+      "src/app.tsx"
+    );
     store.set(openFilesAtomFamily("ws-1"), {
       "src/global.tsx": {
         kind: "text",
@@ -1943,7 +1966,9 @@ describe("AgentPanes", () => {
     });
     expect(store.get(activeEditorPaneIdAtomFamily("ws-1"))).toBeNull();
     expect(store.get(focusedEditorPaneIdAtomFamily("ws-1"))).toBeNull();
-    expect(store.get(editorPaneActiveFilePathAtomFamily("ws-1"))).toBeNull();
+    expect(store.get(editorPaneActiveFilePathAtomFamily(editorPaneStateKey("ws-1", "root")))).toBe(
+      null
+    );
     expect(store.get(activeFilePathAtomFamily("ws-1"))).toBe("src/global.tsx");
     expect(store.get(openFilesAtomFamily("ws-1"))).toEqual({
       "src/global.tsx": expect.objectContaining({
@@ -1962,7 +1987,10 @@ describe("AgentPanes", () => {
     store.set(activeEditorPaneIdAtomFamily("ws-1"), "root");
     store.set(focusedEditorPaneIdAtomFamily("ws-1"), "root");
     store.set(activeFilePathAtomFamily("ws-1"), "src/app.tsx");
-    store.set(editorPaneActiveFilePathAtomFamily("ws-1"), "src/app.tsx");
+    store.set(
+      editorPaneActiveFilePathAtomFamily(editorPaneStateKey("ws-1", "root")),
+      "src/app.tsx"
+    );
     store.set(openFilesAtomFamily("ws-1"), {
       "src/app.tsx": {
         kind: "text",
@@ -1983,7 +2011,9 @@ describe("AgentPanes", () => {
     fireEvent.click(screen.getByRole("button", { name: "close-editor-root" }));
 
     expect(store.get(activeFilePathAtomFamily("ws-1"))).toBe("src/app.tsx");
-    expect(store.get(editorPaneActiveFilePathAtomFamily("ws-1"))).toBeNull();
+    expect(store.get(editorPaneActiveFilePathAtomFamily(editorPaneStateKey("ws-1", "root")))).toBe(
+      null
+    );
     expect(store.get(openFilesAtomFamily("ws-1"))).toEqual({
       "src/app.tsx": expect.objectContaining({
         path: "src/app.tsx",