Keep agent panes mounted and focused

packages/app/src/components/split-container-pane-focus.test.ts

@@ -23,4 +23,13 @@ describe("shouldFocusPaneFromEventTarget", () => {
     ).toBe(true);
     expect(shouldFocusPaneFromEventTarget(null)).toBe(true);
   });
+
+  it("returns true for composer text inputs so focusing the composer focuses the pane", () => {
+    expect(
+      shouldFocusPaneFromEventTarget({
+        closest: (selector: string) =>
+          selector.includes("input") ? ({ tagName: "INPUT" } as Element) : null,
+      } as unknown as EventTarget),
+    ).toBe(true);
+  });
 });

packages/app/src/components/split-container-pane-focus.ts

@@ -1,9 +1,7 @@
 const INTERACTIVE_TARGET_SELECTOR = [
   "a",
   "button",
-  "input",
   "select",
-  "textarea",
   "[role='button']",
   "[role='link']",
   "[contenteditable='true']",

packages/app/src/components/split-container.tsx

@@ -406,6 +406,7 @@ export function SplitContainer({
     }
     return { kind: "pane" as const, pane: focusedPane };
   }, [focusModeEnabled, layout.root, layout.focusedPaneId, panesById]);
+  const renderRoot = useMemo(() => wrapRootPaneForStableMount(effectiveRoot), [effectiveRoot]);
 
   const handleDragStart = useCallback((event: DragStartEvent) => {
     const data = asWorkspaceTabDragData(event.active.data.current);
@@ -560,7 +561,7 @@ export function SplitContainer({
       onDragEnd={handleDragEnd}
     >
       <SplitNodeView
-        node={effectiveRoot}
+        node={renderRoot}
         workspaceKey={workspaceKey}
         uiTabs={uiTabs}
         focusedPaneId={layout.focusedPaneId}
@@ -1071,6 +1072,22 @@ function getNodeKey(node: SplitNode): string {
   return node.group.id;
 }
 
+function wrapRootPaneForStableMount(node: SplitNode): SplitNode {
+  if (node.kind === "group") {
+    return node;
+  }
+
+  return {
+    kind: "group",
+    group: {
+      id: `root:${node.pane.id}`,
+      direction: "horizontal",
+      children: [node],
+      sizes: [1],
+    },
+  };
+}
+
 const styles = StyleSheet.create((theme) => ({
   group: {
     flex: 1,