feat: add three-panel layout

src/components/focus/FocusPanel.tsx

@@ -988,6 +988,9 @@ export default function FocusPanel({
           display: flex;
           flex-direction: column;
           min-height: 100%;
+          width: 100%;
+          max-width: 980px;
+          margin: 0 auto;
         }
 
         .empty-state {

src/components/layout/LeftToolbar.tsx

@@ -16,7 +16,7 @@ import {
   Sun,
   Moon,
 } from 'lucide-react';
-import type { PaneType } from '../panes/types';
+import type { PaneType, NavigablePaneType } from '../panes/types';
 import type { Theme } from '@/hooks/useTheme';
 
 interface LeftToolbarProps {
@@ -24,7 +24,7 @@ interface LeftToolbarProps {
   onAddStuffClick: () => void;
   onRefreshClick: () => void;
   onSettingsClick: () => void;
-  onPaneTypeClick: (paneType: PaneType) => void;
+  onPaneTypeClick: (paneType: NavigablePaneType) => void;
   isExpanded: boolean;
   onToggleExpanded: () => void;
   openTabTypes: Set<PaneType>;
@@ -36,7 +36,7 @@ interface LeftToolbarProps {
 const NAV_WIDTH_COLLAPSED = 50;
 const NAV_WIDTH_EXPANDED = 280;
 
-const VIEW_ITEMS: Array<{ paneType: PaneType; label: string; icon: typeof LayoutList }> = [
+const VIEW_ITEMS: Array<{ paneType: NavigablePaneType; label: string; icon: typeof LayoutList }> = [
   { paneType: 'views', label: 'Nodes', icon: LayoutList },
   { paneType: 'skills', label: 'Skills', icon: BookOpen },
   { paneType: 'map', label: 'Map', icon: Map },

src/components/layout/SplitHandle.tsx

@@ -1,75 +1,29 @@
 "use client";
 
-import { useState, useCallback, useEffect, useRef } from 'react';
+import { useState, useCallback, useEffect } from 'react';
-import { GripVertical } from 'lucide-react';
 
 interface SplitHandleProps {
-  isSecondPaneOpen: boolean;
+  onResize: (clientX: number) => void;
-  onOpenSecondPane: () => void;
+  title?: string;
-  onResize: (newWidthPercent: number) => void;
-  onCloseSecondPane: () => void;
-  containerRef: React.RefObject<HTMLDivElement>;
-  toolbarWidth?: number;
 }
 
 export default function SplitHandle({
-  isSecondPaneOpen,
-  onOpenSecondPane,
   onResize,
-  onCloseSecondPane,
+  title = 'Drag to resize panes',
-  containerRef,
-  toolbarWidth = 50,
 }: SplitHandleProps) {
   const [isDragging, setIsDragging] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
-  const startXRef = useRef<number>(0);
-  const startWidthRef = useRef<number>(50);
 
   const handleMouseDown = useCallback((e: React.MouseEvent) => {
     e.preventDefault();
-
-    if (!isSecondPaneOpen) {
-      // First drag opens the second pane at 50%
-      onOpenSecondPane();
-    }
-
     setIsDragging(true);
-    startXRef.current = e.clientX;
+  }, []);
-
-    // Calculate current width from container
-    if (containerRef.current) {
-      const containerWidth = containerRef.current.offsetWidth - toolbarWidth;
-      // Assume current position is at the split point
-      startWidthRef.current = 50; // Default to 50% for new split
-    }
-  }, [isSecondPaneOpen, onOpenSecondPane, containerRef, toolbarWidth]);
 
   useEffect(() => {
     if (!isDragging) return;
 
     const handleMouseMove = (e: MouseEvent) => {
-      if (!containerRef.current) return;
+      onResize(e.clientX);
-
-      const containerRect = containerRef.current.getBoundingClientRect();
-      const containerWidth = containerRect.width - toolbarWidth;
-      const mouseX = e.clientX - containerRect.left - toolbarWidth;
-
-      // Calculate what percentage of the available space should be Slot B
-      // mouseX is distance from left edge, so slotA width = mouseX
-      // slotB width = containerWidth - mouseX
-      const slotBWidthPercent = ((containerWidth - mouseX) / containerWidth) * 100;
-
-      // Clamp between 20% and 70%
-      const clampedWidth = Math.max(20, Math.min(70, slotBWidthPercent));
-
-      // If dragged to less than 15%, close the pane
-      if (slotBWidthPercent < 15) {
-        onCloseSecondPane();
-        setIsDragging(false);
-        return;
-      }
-
-      onResize(clampedWidth);
     };
 
     const handleMouseUp = () => {
@@ -87,48 +41,21 @@ export default function SplitHandle({
       document.body.style.cursor = '';
       document.body.style.userSelect = '';
     };
-  }, [isDragging, containerRef, toolbarWidth, onResize, onCloseSecondPane]);
+  }, [isDragging, onResize]);
 
-  // When second pane is closed, show a wider handle with grip icon
-  if (!isSecondPaneOpen) {
-    return (
-      <div
-        onMouseDown={handleMouseDown}
-        onMouseEnter={() => setIsHovered(true)}
-        onMouseLeave={() => setIsHovered(false)}
-        style={{
-          width: '12px',
-          cursor: 'col-resize',
-          background: isHovered ? 'var(--rah-bg-active)' : 'transparent',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          transition: 'background 0.15s ease',
-          flexShrink: 0,
-        }}
-        title="Drag to split view (⌘\)"
-      >
-        <GripVertical
-          size={12}
-          color={isHovered ? '#888' : '#444'}
-          style={{ transition: 'color 0.15s ease' }}
-        />
-      </div>
-    );
-  }
-
-  // When second pane is open, show resize handle
   return (
     <div
       onMouseDown={handleMouseDown}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
+      title={title}
       style={{
-        width: '8px',
+        width: '4px',
         cursor: 'col-resize',
-        background: isDragging ? '#22c55e' : (isHovered ? 'var(--rah-bg-active)' : 'transparent'),
+        background: isDragging ? 'var(--rah-accent-green)' : (isHovered ? 'var(--rah-bg-active)' : 'transparent'),
         transition: isDragging ? 'none' : 'background 0.15s ease',
         flexShrink: 0,
+        borderRadius: '999px',
       }}
     />
   );

src/components/nodes/FolderViewOverlay.tsx

@@ -24,6 +24,7 @@ interface FolderViewOverlayProps {
   refreshToken: number;
   onDataChanged?: () => void;
   onDimensionSelect?: (dimensionName: string | null) => void;
+  replaceWithViewsOnDimensionSelect?: boolean;
   toolbarHost?: HTMLDivElement | null;
 }
 
@@ -60,6 +61,7 @@ export default function FolderViewOverlay({
   refreshToken,
   onDataChanged,
   onDimensionSelect,
+  replaceWithViewsOnDimensionSelect = false,
   toolbarHost,
 }: FolderViewOverlayProps) {
   const [view, setView] = useState<'dimensions' | 'nodes'>('dimensions');
@@ -171,6 +173,11 @@ export default function FolderViewOverlay({
   };
 
   const handleSelectDimension = (dimension: DimensionSummary) => {
+    if (replaceWithViewsOnDimensionSelect) {
+      onDimensionSelect?.(dimension.dimension);
+      return;
+    }
+
     setSelectedDimension(dimension);
     setView('nodes');
     setNodes([]);

src/components/panes/DimensionsPane.tsx

@@ -56,6 +56,7 @@ export default function DimensionsPane({
             refreshToken={refreshToken}
             onDataChanged={onDataChanged}
             onDimensionSelect={onDimensionSelect}
+            replaceWithViewsOnDimensionSelect={true}
             toolbarHost={toolbarHost}
           />
         </div>

src/components/panes/PaneHeader.tsx

@@ -41,9 +41,10 @@ export default function PaneHeader({
     e.preventDefault();
     setIsDragOver(false);
 
+    if (!slot) return;
     const sourceSlot = e.dataTransfer.getData('application/x-rah-pane');
     if (sourceSlot && sourceSlot !== slot && onSwapPanes) {
-      onSwapPanes();
+      onSwapPanes(sourceSlot as typeof slot, slot);
     }
   };
 

src/components/panes/SkillsPane.tsx

@@ -137,7 +137,7 @@ export default function SkillsPane({
         {loading ? (
           <div style={{ color: '#555', fontSize: '13px', textAlign: 'center', paddingTop: '24px' }}>Loading...</div>
         ) : selectedSkill ? (
-          <div>
+          <div style={{ width: '100%', maxWidth: '980px', margin: '0 auto' }}>
             <div style={{ marginBottom: '12px' }}>
               <div style={{ color: '#eee', fontSize: '16px', fontWeight: 600 }}>{selectedSkill.name}</div>
               <div style={{ color: '#888', fontSize: '13px', lineHeight: 1.4, marginTop: '6px' }}>{selectedSkill.description}</div>

src/components/panes/types.ts

@@ -1,6 +1,9 @@
 import React from 'react';
 import { Node } from '@/types/database';
 
+export type SlotId = 'A' | 'B' | 'C';
+export type NavigablePaneType = Exclude<PaneType, 'node'>;
+
 // Stub type for delegation (delegation system removed in rah-light)
 export type AgentDelegation = {
   id: number;
@@ -30,18 +33,18 @@ export interface SlotState {
 
 // Actions panes can emit to the layout
 export type PaneAction =
-  | { type: 'open-node'; nodeId: number; targetSlot?: 'A' | 'B' }
+  | { type: 'open-node'; nodeId: number; targetSlot?: SlotId }
-  | { type: 'open-dimension'; dimension: string; targetSlot?: 'A' | 'B' }
+  | { type: 'open-dimension'; dimension: string; targetSlot?: SlotId }
   | { type: 'switch-pane-type'; paneType: PaneType }
   | { type: 'close-pane' };
 
 // Common props for all panes
 export interface BasePaneProps {
-  slot: 'A' | 'B';
+  slot: SlotId;
   isActive: boolean;
   onPaneAction?: (action: PaneAction) => void;
   onCollapse?: () => void;
-  onSwapPanes?: () => void;
+  onSwapPanes?: (source: SlotId, target: SlotId) => void;
   tabBar?: React.ReactNode;
 }
 
@@ -99,9 +102,9 @@ export interface TablePaneProps extends BasePaneProps {
 
 // Pane header props
 export interface PaneHeaderProps {
-  slot?: 'A' | 'B';
+  slot?: SlotId;
   onCollapse?: () => void;
-  onSwapPanes?: () => void;
+  onSwapPanes?: (source: SlotId, target: SlotId) => void;
   tabBar?: React.ReactNode;
   children?: React.ReactNode;
   toolbarHostRef?: (node: HTMLDivElement | null) => void;