feat(rah-light): replace workflows with guides system

- Remove entire workflow system (API routes, services, tools, components)
- Add guides system from main ra-h repo (for external agent integration)
- Update pane types: 'workflows' → 'guides' throughout
- Update LeftToolbar to show guides icon instead of workflows
- Update SettingsModal with GuidesViewer tab
- Add GuidesPane for browsing guides in main UI
- Clean up prompts to remove workflow references
- Update tool registry to remove workflow tools
- Add gray-matter package for frontmatter parsing

Guides are essential for RA-H Light as they help external agents
(via MCP) understand the knowledge base context and usage patterns.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/components/panes/GuidesPane.tsx

@@ -0,0 +1,230 @@
+"use client";
+
+import { useState, useEffect } from 'react';
+import { ArrowLeft } from 'lucide-react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import PaneHeader from './PaneHeader';
+import type { BasePaneProps } from './types';
+
+interface GuideMeta {
+  name: string;
+  description: string;
+}
+
+interface Guide extends GuideMeta {
+  content: string;
+}
+
+export default function GuidesPane({
+  slot,
+  isActive,
+  onPaneAction,
+  onCollapse,
+  onSwapPanes,
+  tabBar,
+}: BasePaneProps) {
+  const [guides, setGuides] = useState<GuideMeta[]>([]);
+  const [selectedGuide, setSelectedGuide] = useState<Guide | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetchGuides();
+
+    const handleGuideUpdated = () => { fetchGuides(); };
+    window.addEventListener('guides:updated', handleGuideUpdated);
+    return () => window.removeEventListener('guides:updated', handleGuideUpdated);
+  }, []);
+
+  const fetchGuides = async () => {
+    try {
+      const res = await fetch('/api/guides');
+      const data = await res.json();
+      if (data.success) {
+        setGuides(data.data);
+      }
+    } catch (err) {
+      console.error('[GuidesPane] Failed to fetch guides:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSelectGuide = async (name: string) => {
+    try {
+      const res = await fetch(`/api/guides/${encodeURIComponent(name)}`);
+      const data = await res.json();
+      if (data.success) {
+        setSelectedGuide(data.data);
+      }
+    } catch (err) {
+      console.error('[GuidesPane] Failed to fetch guide:', err);
+    }
+  };
+
+  const handleBack = () => {
+    setSelectedGuide(null);
+  };
+
+  return (
+    <div style={{
+      height: '100%',
+      display: 'flex',
+      flexDirection: 'column',
+      background: 'transparent',
+      overflow: 'hidden',
+    }}>
+      <PaneHeader slot={slot} onCollapse={onCollapse} onSwapPanes={onSwapPanes} tabBar={tabBar}>
+        {selectedGuide && (
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+            <button
+              onClick={handleBack}
+              style={{
+                background: 'none',
+                border: 'none',
+                color: '#888',
+                cursor: 'pointer',
+                display: 'flex',
+                alignItems: 'center',
+                padding: '4px',
+                borderRadius: '4px',
+              }}
+              onMouseEnter={e => { e.currentTarget.style.color = '#ccc'; }}
+              onMouseLeave={e => { e.currentTarget.style.color = '#888'; }}
+            >
+              <ArrowLeft size={16} />
+            </button>
+            <span style={{ color: '#ccc', fontSize: '13px', fontWeight: 500 }}>
+              {selectedGuide.name}
+            </span>
+          </div>
+        )}
+      </PaneHeader>
+
+      <div style={{ flex: 1, minHeight: 0, overflow: 'auto', padding: '12px' }}>
+        {loading ? (
+          <div style={{ color: '#555', fontSize: '13px', textAlign: 'center', paddingTop: '24px' }}>
+            Loading...
+          </div>
+        ) : selectedGuide ? (
+          <div className="guide-content" style={{ color: '#ccc', fontSize: '13px', lineHeight: '1.6' }}>
+            <ReactMarkdown
+              remarkPlugins={[remarkGfm]}
+              components={{
+                h1: ({ children }) => (
+                  <h1 style={{ fontSize: '18px', fontWeight: 600, color: '#eee', margin: '0 0 16px 0' }}>{children}</h1>
+                ),
+                h2: ({ children }) => (
+                  <h2 style={{ fontSize: '15px', fontWeight: 600, color: '#ddd', margin: '20px 0 8px 0' }}>{children}</h2>
+                ),
+                h3: ({ children }) => (
+                  <h3 style={{ fontSize: '14px', fontWeight: 600, color: '#ccc', margin: '16px 0 6px 0' }}>{children}</h3>
+                ),
+                p: ({ children }) => (
+                  <p style={{ margin: '0 0 12px 0' }}>{children}</p>
+                ),
+                ul: ({ children }) => (
+                  <ul style={{ margin: '0 0 12px 0', paddingLeft: '20px' }}>{children}</ul>
+                ),
+                ol: ({ children }) => (
+                  <ol style={{ margin: '0 0 12px 0', paddingLeft: '20px' }}>{children}</ol>
+                ),
+                li: ({ children }) => (
+                  <li style={{ margin: '0 0 4px 0' }}>{children}</li>
+                ),
+                code: ({ className, children, ...props }) => {
+                  const isInline = !className;
+                  if (isInline) {
+                    return (
+                      <code style={{
+                        background: '#1a1a1a',
+                        padding: '2px 6px',
+                        borderRadius: '4px',
+                        fontSize: '12px',
+                        color: '#22c55e',
+                      }} {...props}>{children}</code>
+                    );
+                  }
+                  return (
+                    <code style={{
+                      display: 'block',
+                      background: '#0d0d0d',
+                      padding: '12px',
+                      borderRadius: '6px',
+                      fontSize: '12px',
+                      overflowX: 'auto',
+                      margin: '0 0 12px 0',
+                      color: '#aaa',
+                      whiteSpace: 'pre-wrap',
+                    }} {...props}>{children}</code>
+                  );
+                },
+                pre: ({ children }) => (
+                  <pre style={{ margin: '0 0 12px 0' }}>{children}</pre>
+                ),
+                strong: ({ children }) => (
+                  <strong style={{ color: '#eee', fontWeight: 600 }}>{children}</strong>
+                ),
+                hr: () => (
+                  <hr style={{ border: 'none', borderTop: '1px solid #2a2a2a', margin: '16px 0' }} />
+                ),
+                blockquote: ({ children }) => (
+                  <blockquote style={{
+                    borderLeft: '3px solid #333',
+                    paddingLeft: '12px',
+                    margin: '0 0 12px 0',
+                    color: '#999',
+                  }}>{children}</blockquote>
+                ),
+              }}
+            >
+              {selectedGuide.content}
+            </ReactMarkdown>
+          </div>
+        ) : (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+            {guides.length === 0 ? (
+              <div style={{ color: '#555', fontSize: '13px', textAlign: 'center', paddingTop: '24px' }}>
+                No guides found
+              </div>
+            ) : (
+              guides.map((guide) => (
+                <button
+                  key={guide.name}
+                  onClick={() => handleSelectGuide(guide.name)}
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: '4px',
+                    padding: '12px',
+                    background: '#161616',
+                    border: '1px solid #222',
+                    borderRadius: '8px',
+                    cursor: 'pointer',
+                    textAlign: 'left',
+                    transition: 'all 0.15s ease',
+                  }}
+                  onMouseEnter={e => {
+                    e.currentTarget.style.background = '#1a1a1a';
+                    e.currentTarget.style.borderColor = '#333';
+                  }}
+                  onMouseLeave={e => {
+                    e.currentTarget.style.background = '#161616';
+                    e.currentTarget.style.borderColor = '#222';
+                  }}
+                >
+                  <span style={{ color: '#ddd', fontSize: '13px', fontWeight: 500 }}>
+                    {guide.name}
+                  </span>
+                  <span style={{ color: '#777', fontSize: '12px', lineHeight: '1.4' }}>
+                    {guide.description}
+                  </span>
+                </button>
+              ))
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/components/panes/WorkflowsPane.tsx

@@ -1,93 +0,0 @@
-"use client";
-
-import { useState } from 'react';
-import PaneHeader from './PaneHeader';
-import { WorkflowsPaneProps, AgentDelegation } from './types';
-
-export default function WorkflowsPane({
-  slot,
-  isActive,
-  onPaneAction,
-  onCollapse,
-  onSwapPanes,
-  delegations,
-  onNodeClick,
-  openTabsData = [],
-  activeTabId = null,
-  activeDimension,
-}: WorkflowsPaneProps) {
-  return (
-    <div style={{
-      height: '100%',
-      display: 'flex',
-      flexDirection: 'column',
-      background: 'transparent',
-      overflow: 'hidden',
-    }}>
-      <PaneHeader slot={slot} onCollapse={onCollapse} onSwapPanes={onSwapPanes} />
-
-      <div style={{ flex: 1, minHeight: 0, overflow: 'hidden' }}>
-        <WorkflowsListView />
-      </div>
-    </div>
-  );
-}
-
-// Workflows list view - simplified for rah-light (delegation system removed)
-function WorkflowsListView() {
-  return (
-    <div style={{
-      height: '100%',
-      display: 'flex',
-      flexDirection: 'column',
-      background: 'transparent',
-      overflow: 'hidden'
-    }}>
-      {/* Header */}
-      <div style={{
-        padding: '16px 20px',
-        borderBottom: '1px solid #1a1a1a',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between'
-      }}>
-        <span style={{
-          color: '#e5e5e5',
-          fontSize: '13px',
-          fontWeight: 600,
-          textTransform: 'uppercase',
-          letterSpacing: '0.08em'
-        }}>
-          Workflows
-        </span>
-      </div>
-
-      {/* Content */}
-      <div style={{
-        flex: 1,
-        overflow: 'auto',
-        padding: '12px',
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-        gap: '16px'
-      }}>
-        <div style={{
-          color: '#666',
-          fontSize: '12px',
-          textAlign: 'center',
-          padding: '40px 20px',
-          maxWidth: '300px'
-        }}>
-          <p style={{ marginBottom: '16px' }}>
-            Workflows are available via MCP server integration.
-          </p>
-          <p style={{ color: '#555', fontSize: '11px' }}>
-            Connect your coding agent (Claude Code, Cursor, etc.) via MCP to run workflows like Integrate, Extract, and more.
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-}

src/components/panes/index.ts

@@ -1,5 +1,5 @@
 export { default as NodePane } from './NodePane';
-export { default as WorkflowsPane } from './WorkflowsPane';
+export { default as GuidesPane } from './GuidesPane';
 export { default as DimensionsPane } from './DimensionsPane';
 export { default as MapPane } from './MapPane';
 export { default as ViewsPane } from './ViewsPane';

src/components/panes/types.ts

@@ -15,7 +15,7 @@ export type AgentDelegation = {
 };
 
 // The five pane types (chat removed in rah-light)
-export type PaneType = 'node' | 'workflows' | 'dimensions' | 'map' | 'views';
+export type PaneType = 'node' | 'guides' | 'dimensions' | 'map' | 'views';
 
 // State for each slot
 export interface SlotState {
@@ -68,14 +68,7 @@ export interface HighlightedPassage {
 
 // ChatPaneProps removed in rah-light
 
-// WorkflowsPane specific props
-export interface WorkflowsPaneProps extends BasePaneProps {
-  delegations: AgentDelegation[];
-  onNodeClick?: (nodeId: number) => void;
-  openTabsData?: Node[];
-  activeTabId?: number | null;
-  activeDimension?: string | null;
-}
+// GuidesPaneProps - just uses BasePaneProps (guides are self-contained)
 
 // DimensionsPane specific props
 export interface DimensionsPaneProps extends BasePaneProps {
@@ -110,7 +103,7 @@ export interface PaneHeaderProps {
 // Labels for pane types
 export const PANE_LABELS: Record<PaneType, string> = {
   node: 'Nodes',
-  workflows: 'Workflows',
+  guides: 'Guides',
   dimensions: 'Dimensions',
   map: 'Map',
   views: 'Feed',
@@ -124,5 +117,5 @@ export const DEFAULT_SLOT_A: SlotState = {
 };
 
 export const DEFAULT_SLOT_B: SlotState = {
-  type: 'workflows',
+  type: 'guides',
 };