Drag a pane's toolbar onto another pane to swap them

New interaction: click-and-drag any pane's toolbar onto another pane
to swap their positions in the tree. The shells / scrollback stay
intact (each leaf keeps its data; only the tree slot it occupies
changes).

Implementation:
- tree.ts: `swapLeaves(root, idA, idB)` walks the tree once,
  substituting one leaf for the other at each occurrence. The leaf
  objects themselves carry their id/distro/cwd/label/broadcast across,
  so React preserves the LeafPane instances via the flat-list keying.

- orchestration.tsx: add drag lifecycle to the context —
  dragSourceId / dragOverId (reactive) plus beginHeaderDrag,
  setHeaderDragOver, endHeaderDrag (stable methods).

- App.tsx: implement those methods. endHeaderDrag(true) swaps if
  source and over are different leaves.

- LeafPane.tsx: pointerdown on .pane-toolbar (skipped if the target
  is a button/input). 5px movement threshold before drag commits to
  prevent accidental swaps when clicking a chip etc. Pointer-capture
  the toolbar so we keep getting move events even outside it. Use
  document.elementFromPoint to find the leaf under the cursor.

- CSS: source pane fades to 40% opacity during drag; target pane
  shows a 3px dashed blue outline; toolbar shows grab/grabbing
  cursors.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/lib/layout/LeafPane.tsx

@@ -5,6 +5,7 @@ import {
   useCallback,
   type KeyboardEvent,
   type MouseEvent,
+  type PointerEvent as ReactPointerEvent,
 } from "react";
 import type { LeafNode } from "./tree";
 import { useOrchestration } from "./orchestration";
@@ -143,17 +144,104 @@ export default function LeafPane({ leaf }: { leaf: LeafNode }) {
     setStatusOk(ok);
   }, []);
 
+  // ---- header-drag swap ---------------------------------------------------
+  // Drag the toolbar onto another pane's toolbar/body to swap their tree
+  // positions. Uses a movement threshold so accidental tiny moves while
+  // clicking a label etc don't initiate a drag.
+  const DRAG_THRESHOLD_PX = 5;
+  const dragStartRef = useRef<{ x: number; y: number; armed: boolean; dragging: boolean } | null>(
+    null,
+  );
+  const isDragSource = orch.dragSourceId === leaf.id;
+  const isDragTarget =
+    orch.dragOverId === leaf.id && orch.dragSourceId !== leaf.id;
+
+  const onToolbarPointerDown = useCallback(
+    (e: ReactPointerEvent<HTMLDivElement>) => {
+      const target = e.target as HTMLElement;
+      // Skip if the click landed on an interactive child.
+      if (target.closest("button, input, .distro-menu")) return;
+      (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+      dragStartRef.current = {
+        x: e.clientX,
+        y: e.clientY,
+        armed: true,
+        dragging: false,
+      };
+      // Make this pane active (since clicking the toolbar should focus it).
+      orch.setActive(leaf.id);
+    },
+    [orch.setActive, leaf.id],
+  );
+
+  const onToolbarPointerMove = useCallback(
+    (e: ReactPointerEvent<HTMLDivElement>) => {
+      const st = dragStartRef.current;
+      if (!st || !st.armed) return;
+      const dx = e.clientX - st.x;
+      const dy = e.clientY - st.y;
+      if (!st.dragging) {
+        if (Math.hypot(dx, dy) < DRAG_THRESHOLD_PX) return;
+        st.dragging = true;
+        orch.beginHeaderDrag(leaf.id);
+        document.body.style.cursor = "grabbing";
+      }
+      // Find the leaf under the cursor.
+      const el = document.elementFromPoint(e.clientX, e.clientY);
+      const tEl = el?.closest("[data-leaf-id]");
+      const targetId = tEl?.getAttribute("data-leaf-id") ?? null;
+      orch.setHeaderDragOver(targetId);
+    },
+    [orch.beginHeaderDrag, orch.setHeaderDragOver, leaf.id],
+  );
+
+  const onToolbarPointerUp = useCallback(
+    (e: ReactPointerEvent<HTMLDivElement>) => {
+      const st = dragStartRef.current;
+      if (!st) return;
+      (e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);
+      const wasDragging = st.dragging;
+      dragStartRef.current = null;
+      if (wasDragging) {
+        document.body.style.cursor = "";
+        orch.endHeaderDrag(true);
+      }
+    },
+    [orch.endHeaderDrag],
+  );
+
+  const onToolbarPointerCancel = useCallback(
+    (e: ReactPointerEvent<HTMLDivElement>) => {
+      const st = dragStartRef.current;
+      if (!st) return;
+      (e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);
+      const wasDragging = st.dragging;
+      dragStartRef.current = null;
+      if (wasDragging) {
+        document.body.style.cursor = "";
+        orch.endHeaderDrag(false);
+      }
+    },
+    [orch.endHeaderDrag],
+  );
+
   const labelText = leaf.label ?? "(unnamed)";
 
   return (
     <div
-      className={`leaf${isActive ? " active" : ""}${isBroadcasting ? " broadcasting" : ""}`}
+      className={`leaf${isActive ? " active" : ""}${isBroadcasting ? " broadcasting" : ""}${isDragSource ? " drag-source" : ""}${isDragTarget ? " drag-target" : ""}`}
       role="group"
       aria-label={`Terminal pane: ${leaf.label ?? leaf.distro ?? "unnamed"}`}
       data-leaf-id={leaf.id}
       onPointerDown={onPaneClick}
     >
-      <div className="pane-toolbar">
+      <div
+        className="pane-toolbar"
+        onPointerDown={onToolbarPointerDown}
+        onPointerMove={onToolbarPointerMove}
+        onPointerUp={onToolbarPointerUp}
+        onPointerCancel={onToolbarPointerCancel}
+      >
         {editingLabel ? (
           <input
             ref={labelInputRef}