Always-visible pane with spawn animation

When the last visible pane is killed or detached, auto-spawn a replacement so
the content area is never blank. The replacement receives the removed pane's
id as paneToCopy (dead infrastructure for now — future work will copy cwd and
terminal kind from it). Split also records paneToCopy → the pane it was split
from.

Freshly-spawned panes animate in via a clip-path reveal on the dockview group
(header + body together). clip-path is used instead of scale so the selection
overlay's getBoundingClientRect stays accurate during the animation.

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

Author: nedtwigg

docs/specs/layout.md

@@ -294,7 +294,7 @@ Dockview's separator borders, sash handles, and groupview borders are all set to
 7. **Asymmetric back-navigation**: breadcrumb tracks last direction + origin for opposite-direction return.
 8. **Center drop merges panels**: intercepted at group-level `model.onWillDrop` and converted to a swap.
 9. **Group drag has null panelId**: falls back to `api.getGroup(groupId).activePanel.id`.
-10. **Auto-spawn on empty**: `onDidRemovePanel` creates a new session when the last pane is removed and no doors exist.
+10. **Auto-spawn on empty**: `onDidRemovePanel` creates a new session whenever the last visible pane is removed, whether or not doors exist — there is always a pane visible. The new pane receives the just-removed pane's id as `paneToCopy` for future cwd/terminal-kind inheritance.
 
 ## Files
 

lib/src/components/Pond.tsx

@@ -432,6 +432,10 @@ export const RenamingIdContext = createContext<string | null>(null);
 export const ZoomedContext = createContext(false);
 export const WindowFocusedContext = createContext(true);
 
+// Transient set of pane ids that were just created (split or empty-state auto-spawn).
+// TerminalPanel consumes (and removes) its id on first mount to trigger a spawn animation.
+export const FreshlySpawnedContext = createContext<Set<string>>(new Set());
+
 const ARROW_OPPOSITES: Record<string, string> = {
   ArrowLeft: 'ArrowRight', ArrowRight: 'ArrowLeft',
   ArrowUp: 'ArrowDown', ArrowDown: 'ArrowUp',
@@ -459,6 +463,7 @@ function TerminalPanel({ api }: IDockviewPanelProps) {
   const selectedId = useContext(SelectedIdContext);
   const actions = useContext(PondActionsContext);
   const { elements: panelElements, bumpVersion } = useContext(PanelElementsContext);
+  const freshlySpawned = useContext(FreshlySpawnedContext);
   const isFocused = mode === 'passthrough' && selectedId === api.id;
   const elRef = useRef<HTMLDivElement>(null);
 
@@ -472,6 +477,29 @@ function TerminalPanel({ api }: IDockviewPanelProps) {
     };
   }, [api.id, panelElements, bumpVersion]);
 
+  // Freshly spawned: animate the whole dockview group (header + body) as one unit.
+  // We target api.group.element instead of elRef so the tab header animates too.
+  // Using clip-path (not transform) is deliberate — transforms would make
+  // SelectionOverlay's getBoundingClientRect capture the scaled rect and lag
+  // behind the pane until the animation ends.
+  useLayoutEffect(() => {
+    if (!freshlySpawned.has(api.id)) return;
+    freshlySpawned.delete(api.id);
+    const groupEl = api.group?.element;
+    if (!groupEl) return;
+    groupEl.classList.add('pane-spawning');
+    const onEnd = (ev: AnimationEvent) => {
+      if (ev.animationName !== 'pane-spawn') return;
+      groupEl.classList.remove('pane-spawning');
+      groupEl.removeEventListener('animationend', onEnd);
+    };
+    groupEl.addEventListener('animationend', onEnd);
+    return () => {
+      groupEl.removeEventListener('animationend', onEnd);
+      groupEl.classList.remove('pane-spawning');
+    };
+  }, [api, freshlySpawned]);
+
   return (
     <div ref={elRef} className="h-full w-full" onMouseDown={() => actions.onClickPanel(api.id)}>
       <TerminalPane id={api.id} isFocused={isFocused} />
@@ -975,6 +1003,14 @@ export function Pond({
     return `pane-${(++paneCounterRef.current).toString(36)}-${Math.random().toString(36).substring(2, 7)}`;
   }, []);
 
+  // newPaneId -> sourcePaneId for panes born from a split or the empty-state auto-spawn.
+  // Nothing reads this yet; it exists so future work can copy cwd / terminal kind from the source.
+  const paneToCopyByIdRef = useRef(new Map<string, string>());
+
+  // Ids of panes that were just spawned (split or empty-state auto-spawn). TerminalPanel
+  // consumes its id on first mount to play an entrance animation.
+  const freshlySpawnedRef = useRef(new Set<string>());
+
   // Consumed once in handleReady to restore existing sessions
   const initialPaneIdsRef = useRef(initialPaneIds);
   const restoredLayoutRef = useRef(restoredLayout);
@@ -1292,14 +1328,15 @@ export function Pond({
       }
     });
 
-    // Auto-create a pane when all panes are killed/detached.
-    // Note: this fires synchronously from api.removePanel(). During detachPanel,
-    // detachedRef is updated AFTER removePanel returns, so detachedRef.current.length
-    // is still 0 here — which is correct: we want a new pane when the last visible
-    // pane is detached (the door isn't a pane).
-    e.api.onDidRemovePanel(() => {
-      if (e.api.totalPanels === 0 && detachedRef.current.length === 0) {
+    // Always keep one pane visible: when the last visible pane is removed (killed
+    // or detached), spawn a fresh one — regardless of whether doors exist. Carry
+    // the just-removed pane's id forward as paneToCopy so future work can copy
+    // cwd / terminal kind from it.
+    e.api.onDidRemovePanel((removed) => {
+      if (e.api.totalPanels === 0) {
         const id = generatePaneId();
+        paneToCopyByIdRef.current.set(id, removed.id);
+        freshlySpawnedRef.current.add(id);
         e.api.addPanel({ id, component: 'terminal', tabComponent: 'terminal', title: '<unnamed>' });
         selectPanel(id);
       }
@@ -1744,6 +1781,8 @@ export function Pond({
     if (!api) return;
     const newId = generatePaneId();
     const ref = id && api.getPanel(id) ? id : null;
+    if (ref) paneToCopyByIdRef.current.set(newId, ref);
+    freshlySpawnedRef.current.add(newId);
     api.addPanel({
       id: newId,
       component: 'terminal',
@@ -1821,6 +1860,7 @@ export function Pond({
           <RenamingIdContext.Provider value={renamingPaneId}>
           <ZoomedContext.Provider value={zoomed}>
           <WindowFocusedContext.Provider value={windowFocused}>
+          <FreshlySpawnedContext.Provider value={freshlySpawnedRef.current}>
           <div className="flex-1 min-h-0 flex flex-col bg-surface text-foreground font-sans overflow-hidden">
             {/* Dockview */}
             <div className="flex-1 min-h-0 relative p-1.5">
@@ -1849,6 +1889,7 @@ export function Pond({
             )}
 
           </div>
+          </FreshlySpawnedContext.Provider>
           </WindowFocusedContext.Provider>
           </ZoomedContext.Provider>
           </RenamingIdContext.Provider>

lib/src/theme.css

@@ -145,3 +145,16 @@ body.vscode-light {
   60% { translate: -3px; }
   80% { translate: 2px; }
 }
+
+@keyframes pane-spawn {
+  from { opacity: 0; clip-path: inset(0 9% 18% 9%); }
+  to   { opacity: 1; clip-path: inset(0 0 0 0); }
+}
+
+.pane-spawning {
+  animation: pane-spawn 440ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pane-spawning { animation: none; }
+}