feat: add three-panel layout

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-dimension'; dimension: string; targetSlot?: 'A' | 'B' }
+  | { type: 'open-node'; nodeId: number; targetSlot?: SlotId }
+  | { 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;