feat(ui): add skills pane in left nav and wire skills api/service

src/components/layout/LeftToolbar.tsx

@@ -9,6 +9,7 @@ import {
   Map,
   Folder,
   Table2,
+  BookOpen,
   Settings,
 } from 'lucide-react';
 import type { PaneType } from '../panes/types';
@@ -30,6 +31,7 @@ const PANE_TYPE_ICONS: Record<string, typeof LayoutList> = {
   map: Map,
   dimensions: Folder,
   table: Table2,
+  skills: BookOpen,
 };
 
 const PANE_TYPE_LABELS: Record<string, string> = {
@@ -37,9 +39,10 @@ const PANE_TYPE_LABELS: Record<string, string> = {
   map: 'Map',
   dimensions: 'Dimensions',
   table: 'Table',
+  skills: 'Skills',
 };
 
-// Pane types shown in the toolbar (excludes 'node', 'chat', and 'guides' which is in settings)
+// Pane types shown in the toolbar center section (skills is pinned above settings)
 const TOOLBAR_PANE_TYPES: PaneType[] = ['views', 'map', 'dimensions', 'table'];
 
 interface ToolbarButtonProps {
@@ -224,8 +227,16 @@ export default function LeftToolbar({
         })}
       </div>
 
-      {/* Bottom section - Settings */}
-      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+      {/* Bottom section - Skills + Settings */}
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '8px' }}>
+        <PaneTypeButton
+          icon={BookOpen}
+          label="Skills"
+          paneType="skills"
+          isOpen={openPaneTypes.has('skills')}
+          isActivePane={activePaneType === 'skills'}
+          onClick={() => onPaneTypeClick('skills')}
+        />
         <ToolbarButton
           icon={Settings}
           label="Settings"

src/components/layout/ThreePanelLayout.tsx

@@ -34,8 +34,8 @@ export interface PendingNode {
 import LeftToolbar from './LeftToolbar';
 import SplitHandle from './SplitHandle';
 
-// Pane components (ChatPane removed in rah-light, GuidesPane moved to settings)
-import { NodePane, DimensionsPane, MapPane, ViewsPane, TablePane } from '../panes';
+// Pane components (ChatPane removed in rah-light)
+import { NodePane, DimensionsPane, MapPane, ViewsPane, TablePane, SkillsPane } from '../panes';
 import QuickAddInput from '../agents/QuickAddInput';
 import type { PaneType, SlotState, PaneAction } from '../panes/types';
 
@@ -295,6 +295,7 @@ export default function ThreePanelLayout() {
             case 'GUIDE_UPDATED':
               if (typeof window !== 'undefined') {
                 window.dispatchEvent(new CustomEvent('guides:updated', { detail: data.data }));
+                window.dispatchEvent(new CustomEvent('skills:updated', { detail: data.data }));
               }
               break;
 
@@ -960,6 +961,17 @@ export default function ThreePanelLayout() {
           />
         );
 
+      case 'skills':
+        return (
+          <SkillsPane
+            slot={slot}
+            isActive={isActive}
+            onPaneAction={slot === 'A' ? handleSlotAAction : handleSlotBAction}
+            onCollapse={onCollapse}
+            onSwapPanes={slotB ? handleSwapPanes : undefined}
+          />
+        );
+
       default:
         return null;
     }