flowmind 1.1.0 → 1.2.3

package/dashboard/components/StatsRow.jsx

@@ -0,0 +1,65 @@
+const React = require('react');
+const { Box, Text } = require('ink');
+
+const LEVEL_NAMES = ['Egg', 'Hatchling', 'Juvenile', 'Adult', 'Elder', 'Ascended'];
+
+function StatsRow({ flowmind }) {
+  const [honorData, setHonorData] = React.useState({ points: 0, level: 0, stats: {} });
+  const [learningStats, setLearningStats] = React.useState({ totalRecords: 0, byType: {} });
+  const [aiStatus, setAiStatus] = React.useState({ initialized: false, defaultProvider: 'none' });
+
+  React.useEffect(() => {
+    if (!flowmind) return;
+    const refresh = () => {
+      try { setHonorData(flowmind.getHonorData()); } catch (e) { /* ignore */ }
+      try { flowmind.getStats().then(s => setLearningStats(s)); } catch (e) { /* ignore */ }
+      try { setAiStatus(flowmind.getAIStatus()); } catch (e) { /* ignore */ }
+    };
+    refresh();
+    const interval = setInterval(refresh, 5000);
+    return () => clearInterval(interval);
+  }, [flowmind]);
+
+  const barWidth = 16;
+  const progress = honorData.points > 0 ? Math.min(1, honorData.points / 100) : 0;
+  const filled = Math.round(progress * barWidth);
+  const progressBar = '\u2588'.repeat(filled) + '\u2591'.repeat(barWidth - filled);
+
+  return (
+    React.createElement(Box, { flexDirection: 'row' },
+      React.createElement(Box, { flexDirection: 'column', borderStyle: 'single', borderColor: 'yellow', paddingX: 1, width: '33%' },
+        React.createElement(Text, { bold: true, color: 'yellow' }, 'Honor'),
+        React.createElement(Text, null,
+          React.createElement(Text, { color: 'yellow' }, LEVEL_NAMES[honorData.level] || 'Egg'),
+          React.createElement(Text, { color: 'gray' }, ' Lv' + honorData.level)
+        ),
+        React.createElement(Text, { color: 'green' }, progressBar),
+        React.createElement(Text, { color: 'gray' }, honorData.points + '/100 pts')
+      ),
+      React.createElement(Box, { flexDirection: 'column', borderStyle: 'single', borderColor: 'cyan', paddingX: 1, width: '33%' },
+        React.createElement(Text, { bold: true, color: 'cyan' }, 'Learning'),
+        React.createElement(Text, null,
+          React.createElement(Text, { color: 'white' }, '' + (learningStats.totalRecords || 0)),
+          React.createElement(Text, { color: 'gray' }, ' records')
+        ),
+        Object.entries(learningStats.byType || {}).map(([type, count]) =>
+          React.createElement(Text, { key: type, color: 'gray' }, '  ' + type + ': ' + count)
+        ),
+        React.createElement(Text, null,
+          React.createElement(Text, { color: 'gray' }, 'AI: '),
+          React.createElement(Text, { color: aiStatus.initialized ? 'green' : 'red' }, aiStatus.initialized ? 'ok' : 'off')
+        )
+      ),
+      React.createElement(Box, { flexDirection: 'column', borderStyle: 'single', borderColor: 'blue', paddingX: 1, width: '33%' },
+        React.createElement(Text, { bold: true, color: 'blue' }, 'Components'),
+        React.createElement(Text, { color: 'gray' }, 'Registry loaded'),
+        React.createElement(Text, null,
+          React.createElement(Text, { color: 'gray' }, 'Provider: '),
+          React.createElement(Text, { color: aiStatus.initialized ? 'green' : 'red' }, aiStatus.defaultProvider || 'none')
+        )
+      )
+    )
+  );
+}
+
+module.exports = StatsRow;

package/mcp/server.js

@@ -6,6 +6,7 @@
  */
 
 const FlowMind = require('../core');
+const eventBus = require('../core/event-bus');
 
 // MCP Server 实现
 class FlowMindMCPServer {
@@ -122,106 +123,120 @@ class FlowMindMCPServer {
   async callTool(name, args) {
     await this.init();
 
+    const callStart = Date.now();
+    let result;
+
     try {
       // 核心工具
       if (name === 'flowmind_process') {
-        const result = await this.flowmind.process(args.input, args.context || {});
-        return {
+        const data = await this.flowmind.process(args.input, args.context || {});
+        result = {
           content: [{
             type: 'text',
-            text: JSON.stringify(result, null, 2)
+            text: JSON.stringify(data, null, 2)
           }]
         };
-      }
-
-      if (name === 'flowmind_list_skills') {
+      } else if (name === 'flowmind_list_skills') {
         const skills = this.flowmind.skills.list();
-        return {
+        result = {
           content: [{
             type: 'text',
             text: JSON.stringify({ skills }, null, 2)
           }]
         };
-      }
-
-      if (name === 'flowmind_get_skill') {
+      } else if (name === 'flowmind_get_skill') {
         const skill = this.flowmind.skills.get(args.name);
         if (!skill) {
-          return {
+          result = {
             content: [{
               type: 'text',
               text: JSON.stringify({ error: `Skill not found: ${args.name}` })
             }],
             isError: true
           };
+        } else {
+          result = {
+            content: [{
+              type: 'text',
+              text: JSON.stringify({
+                name: skill.name,
+                description: skill.definition?.description,
+                category: skill.definition?.category,
+                triggers: skill.definition?.triggers,
+                componentDependencies: skill.definition?.componentDependencies
+              }, null, 2)
+            }]
+          };
         }
-        return {
-          content: [{
-            type: 'text',
-            text: JSON.stringify({
-              name: skill.name,
-              description: skill.definition?.description,
-              category: skill.definition?.category,
-              triggers: skill.definition?.triggers,
-              componentDependencies: skill.definition?.componentDependencies
-            }, null, 2)
-          }]
-        };
-      }
-
-      if (name === 'flowmind_ai_status') {
+      } else if (name === 'flowmind_ai_status') {
         const status = this.flowmind.getAIStatus();
-        return {
+        result = {
           content: [{
             type: 'text',
             text: JSON.stringify(status, null, 2)
           }]
         };
-      }
-
-      if (name === 'flowmind_learning_stats') {
+      } else if (name === 'flowmind_learning_stats') {
         const stats = await this.flowmind.getStats();
-        return {
+        result = {
           content: [{
             type: 'text',
             text: JSON.stringify(stats, null, 2)
           }]
         };
-      }
-
-      // 技能工具
-      if (name.startsWith('flowmind_skill_')) {
+      } else if (name.startsWith('flowmind_skill_')) {
+        // 技能工具
         const skillName = name.replace('flowmind_skill_', '');
         const skill = this.flowmind.skills.get(skillName);
 
         if (!skill) {
-          return {
+          result = {
             content: [{
               type: 'text',
               text: JSON.stringify({ error: `Skill not found: ${skillName}` })
             }],
             isError: true
           };
+        } else {
+          const data = await this.flowmind.executeWithLearning(skill, args.input, args.context || {});
+          result = {
+            content: [{
+              type: 'text',
+              text: JSON.stringify(data, null, 2)
+            }]
+          };
         }
-
-        const result = await this.flowmind.executeWithLearning(skill, args.input, args.context || {});
-        return {
+      } else {
+        result = {
           content: [{
             type: 'text',
-            text: JSON.stringify(result, null, 2)
-          }]
+            text: JSON.stringify({ error: `Unknown tool: ${name}` })
+          }],
+          isError: true
         };
       }
 
-      return {
-        content: [{
-          type: 'text',
-          text: JSON.stringify({ error: `Unknown tool: ${name}` })
-        }],
-        isError: true
-      };
+      // Emit success event
+      eventBus.emit('mcp:tool_called', {
+        tool: name,
+        args,
+        duration: Date.now() - callStart,
+        success: !result.isError,
+        timestamp: new Date().toISOString()
+      });
+
+      return result;
 
     } catch (error) {
+      eventBus.emit('mcp:tool_called', {
+        tool: name,
+        args,
+        duration: Date.now() - callStart,
+        success: false,
+        error: error.message,
+        timestamp: new Date().toISOString()
+      });
+
       return {
         content: [{
           type: 'text',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowmind",
-  "version": "1.1.0",
+  "version": "1.2.3",
   "description": "The AI Agent That Learns How You Work - Stop repeating yourself, FlowMind learns your workflows and applies them automatically.",
   "main": "core/index.js",
   "bin": {
@@ -43,6 +43,8 @@
     "core/",
     "mcp/",
     "skills/",
+    "tui/",
+    "dashboard/",
     "scripts/",
     "templates/",
     "config/",
@@ -56,16 +58,20 @@
     "node": ">=18.0.0"
   },
   "dependencies": {
-    "commander": "^11.0.0",
     "chalk": "^4.1.2",
-    "ora": "^5.4.1",
-    "inquirer": "^8.2.6",
+    "commander": "^11.0.0",
     "fs-extra": "^11.1.1",
+    "ink": "^3.2.0",
+    "ink-spinner": "^4.0.3",
+    "ink-text-input": "^4.0.3",
+    "inquirer": "^8.2.6",
+    "ora": "^5.4.1",
+    "react": "^18.3.1",
     "uuid": "^9.0.0"
   },
   "devDependencies": {
-    "jest": "^29.7.0",
     "eslint": "^8.50.0",
+    "jest": "^29.7.0",
     "nodemon": "^3.0.1",
     "webpack": "^5.88.0",
     "webpack-cli": "^5.1.4"

package/tui/app.jsx

@@ -0,0 +1,69 @@
+const React = require('react');
+const { Box, Text, useApp, useInput } = require('ink');
+const Sidebar = require('./components/Sidebar.jsx');
+const ChatPanel = require('./components/ChatPanel.jsx');
+const ResultPanel = require('./components/ResultPanel.jsx');
+const StatusBar = require('./components/StatusBar.jsx');
+
+function App({ flowmind }) {
+  const [results, setResults] = React.useState([]);
+  const [isProcessing, setIsProcessing] = React.useState(false);
+  const mountedRef = React.useRef(true);
+  const { exit } = useApp();
+
+  React.useEffect(() => {
+    return () => { mountedRef.current = false; };
+  }, []);
+
+  useInput((input, key) => {
+    if (key.ctrl && input === 'c') exit();
+  });
+
+  const handleCommand = React.useCallback(async (input, addResponse) => {
+    setIsProcessing(true);
+    try {
+      const result = await flowmind.process(input);
+      if (!mountedRef.current) return;
+      if (result.type === 'result') {
+        const text = typeof result.data === 'string' ? result.data : JSON.stringify(result.data, null, 2);
+        addResponse(text.substring(0, 200) + (text.length > 200 ? '...' : ''));
+      } else if (result.type === 'learning') {
+        addResponse(result.message || 'Learning recorded');
+      } else if (result.type === 'error') {
+        addResponse('Error: ' + result.message);
+      }
+      setResults(prev => [...prev, result]);
+    } catch (e) {
+      if (mountedRef.current) addResponse('Error: ' + e.message);
+    } finally {
+      if (mountedRef.current) setIsProcessing(false);
+    }
+  }, [flowmind]);
+
+  const handleSkillSelect = React.useCallback((skill) => {
+    try {
+      setResults(prev => [...prev, {
+        type: 'result',
+        data: { name: skill.name, description: skill.definition?.description || 'No description', category: skill.category || 'general', path: skill.path },
+        metadata: { skill: skill.name }
+      }]);
+    } catch (e) {
+      // ignore skill select errors
+    }
+  }, []);
+
+  return (
+    React.createElement(Box, { flexDirection: 'column', width: '100%', height: '100%' },
+      React.createElement(Box, { flexDirection: 'row', flexGrow: 1 },
+        React.createElement(Sidebar, { flowmind: flowmind, width: 30, onSkillSelect: handleSkillSelect }),
+        React.createElement(Box, { flexDirection: 'column', width: '70%', flexGrow: 1 },
+          React.createElement(ChatPanel, { onSubmit: handleCommand, isProcessing: isProcessing, onExit: exit }),
+          React.createElement(ResultPanel, { results: results })
+        )
+      ),
+      React.createElement(StatusBar, { flowmind: flowmind })
+    )
+  );
+}
+
+module.exports = App;

package/tui/components/ChatPanel.jsx

@@ -0,0 +1,72 @@
+const React = require('react');
+const { Box, Text } = require('ink');
+const TextInput = require('ink-text-input').default || require('ink-text-input');
+const Spinner = require('ink-spinner').default || require('ink-spinner');
+
+function ChatPanel({ onSubmit, isProcessing, onExit }) {
+  const [input, setInput] = React.useState('');
+  const [history, setHistory] = React.useState([]);
+  const mountedRef = React.useRef(true);
+
+  React.useEffect(() => {
+    return () => { mountedRef.current = false; };
+  }, []);
+
+  const handleSubmit = (value) => {
+    if (!value.trim()) return;
+    setHistory(prev => [...prev, { role: 'user', text: value }]);
+    setInput('');
+    if (value.toLowerCase() === 'exit' || value.toLowerCase() === 'quit') {
+      if (onExit) onExit();
+      return;
+    }
+    try {
+      onSubmit(value, (response) => {
+        if (mountedRef.current) {
+          setHistory(prev => [...prev, { role: 'flowmind', text: response }]);
+        }
+      });
+    } catch (e) {
+      if (mountedRef.current) {
+        setHistory(prev => [...prev, { role: 'flowmind', text: 'Error: ' + e.message }]);
+      }
+    }
+  };
+
+  const displayHistory = history.slice(-20);
+
+  return (
+    React.createElement(Box, { flexDirection: 'column', borderStyle: 'single', borderColor: 'green', paddingX: 1 },
+      React.createElement(Text, { bold: true, color: 'green' }, 'Command Input'),
+      React.createElement(Box, { flexDirection: 'column', marginTop: 1, minHeight: 6 },
+        displayHistory.length === 0 && React.createElement(Text, { color: 'gray' }, 'Type a command to get started. Type "exit" to quit.'),
+        displayHistory.map((msg, i) =>
+          React.createElement(Box, { key: i, flexDirection: 'column' },
+            msg.role === 'user'
+              ? React.createElement(Text, null,
+                  React.createElement(Text, { color: 'green', bold: true }, '> '),
+                  React.createElement(Text, { color: 'white' }, msg.text)
+                )
+              : React.createElement(Text, null,
+                  React.createElement(Text, { color: 'cyan', bold: true }, '< '),
+                  React.createElement(Text, { color: 'cyan' }, msg.text)
+                )
+          )
+        )
+      ),
+      React.createElement(Box, { marginTop: 1 },
+        isProcessing
+          ? React.createElement(Text, { color: 'yellow' },
+              React.createElement(Spinner, { type: 'dots' }),
+              ' Processing...'
+            )
+          : React.createElement(Box, null,
+              React.createElement(Text, { color: 'green', bold: true }, '> '),
+              React.createElement(TextInput, { value: input, onChange: setInput, onSubmit: handleSubmit })
+            )
+      )
+    )
+  );
+}
+
+module.exports = ChatPanel;

package/tui/components/DragonTotem.jsx

@@ -0,0 +1,108 @@
+const React = require('react');
+const { Box, Text } = require('ink');
+
+const DRAGON_ARTS = {
+  0: [
+    '        ╭─────╮        ',
+    '       ╱  ╭─╮  ╲       ',
+    '      │  │   │  │      ',
+    '      │  │ ◎ │  │      ',
+    '      │   ╰─╯   │      ',
+    '       ╲       ╱       ',
+    '        ╰─────╯        ',
+  ],
+  1: [
+    '           ╭──╮            ',
+    '      ╭────╯  ╰───╮        ',
+    '     ╱  ◎    ╰─╯   ╲      ',
+    '    ╱    ▽           ╲     ',
+    '    ╲    ╱╲   ╱╲     ╱     ',
+    '     ╲╱╱  ╲╱╱  ╲╱╲╱       ',
+  ],
+  2: [
+    '        ╭─╮  ╭─╮             ',
+    '   ╭────╯ ╰──╯ ╰───╮         ',
+    '  ╱  ◎      ╰──╯     ╲       ',
+    ' ╱      ╭────────╮     ╲     ',
+    ' ╲     ╱ ╱╱╱╱╱╱╱╱ ╲    ╱     ',
+    '  ╲───╯ ╱╱╱╱╱╱╱╱╱╱ ╰──╱      ',
+    '   ╰─╯            ╰─╯       ',
+  ],
+  3: [
+    '      ╭───╮  ╭───╮               ',
+    '  ╭───╯   ╰──╯   ╰───╮           ',
+    ' ╱  ◎        ╰───╯     ╲         ',
+    '│     ╭──────────╮      │        ',
+    '│    ╱ ╱╱╱╱╱╱╱╱╱╱ ╲     │        ',
+    ' ╲──╯ ╱╱╱╱╱╱╱╱╱╱╱╱ ╰───╯        ',
+    '  ╲  ╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱  ╱         ',
+    '   ╲╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱          ',
+    '    ╰───╯       ╰───╯            ',
+  ],
+  4: [
+    '    ╭───╮      ╭───╮                 ',
+    '╭───╯   ╰──────╯   ╰───╮             ',
+    '│  ◎           ╰───╯     │           ',
+    '│      ╭────────────╮    │           ',
+    '│     ╱ ╱╱╱╱╱╱╱╱╱╱╱╱ ╲   │           ',
+    ' ╲───╯ ╱╱╱╱╱╱╱╱╱╱╱╱╱╱ ╰──╯          ',
+    '  ╲   ╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱  ╲          ',
+    '   ╲─╯╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╰─╲         ',
+    '    ╲╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱         ',
+    '     ╰───╯         ╰───╯             ',
+  ],
+  5: [
+    '  ★  ╭───╮          ╭───╮  ★           ',
+    '╭─╯   ╰──╯          ╰──╯   ╰─╮         ',
+    '│  ◎            ╰───╯         │         ',
+    '│       ╭──────────────╮      │         ',
+    '│      ╱ ★╱╱╱╱╱╱╱╱╱╱★╱╱ ╲     │         ',
+    ' ╲────╯ ╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱ ╰───╯         ',
+    '  ╲    ╱╱╱╱★╱╱╱╱╱╱╱╱★╱╱╱╱╱  ╲          ',
+    '   ╲──╯╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╰──╲         ',
+    '    ╲─╯╱╱╱★╱╱╱╱╱╱╱╱★╱╱╱╱╱╰──╲         ',
+    '  ★  ╲╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱  ★       ',
+    '       ╰───╯           ╰───╯            ',
+  ],
+};
+
+const LEVEL_NAMES = ['Egg', 'Hatchling', 'Juvenile', 'Adult', 'Elder', 'Ascended'];
+const LEVEL_STATES = ['dormant', 'awakening', 'growing', 'soaring', 'wise', 'transcendent'];
+const LEVEL_COLORS = ['gray', 'cyan', 'cyan', 'cyanBright', 'cyanBright', 'cyanBright'];
+
+function DragonTotem({ honorData, compact }) {
+  const points = honorData?.points || 0;
+  const level = honorData?.level || 0;
+  const art = DRAGON_ARTS[level] || DRAGON_ARTS[0];
+  const color = LEVEL_COLORS[level] || 'gray';
+  const levelName = LEVEL_NAMES[level] || 'Unknown';
+  const state = LEVEL_STATES[level] || 'unknown';
+  const nextLevelPoints = [1, 10, 30, 60, 100];
+  const nextPoints = nextLevelPoints[level] || null;
+  const pointsToNext = nextPoints !== null ? nextPoints - points : 0;
+  const lines = compact ? art.slice(0, 4) : art;
+
+  return (
+    React.createElement(Box, { flexDirection: 'column', paddingX: 1 },
+      React.createElement(Text, { bold: true, color: 'cyan' }, 'Dragon Totem'),
+      React.createElement(Box, { flexDirection: 'column', marginTop: 1 },
+        lines.map((line, i) => React.createElement(Text, { key: i, color: color }, line))
+      ),
+      React.createElement(Box, { flexDirection: 'column', marginTop: 1 },
+        React.createElement(Text, null,
+          React.createElement(Text, { color: 'yellow' }, 'Lv' + level),
+          React.createElement(Text, { color: 'white' }, ' ' + levelName),
+          React.createElement(Text, { color: 'gray' }, ' (' + state + ')')
+        ),
+        React.createElement(Text, null,
+          React.createElement(Text, { color: 'yellow' }, '' + points),
+          React.createElement(Text, { color: 'gray' }, ' pts')
+        ),
+        pointsToNext > 0 && React.createElement(Text, { color: 'gray' }, pointsToNext + ' pts to ' + LEVEL_NAMES[level + 1]),
+        pointsToNext <= 0 && level >= 5 && React.createElement(Text, { color: 'yellow' }, 'Max level!')
+      )
+    )
+  );
+}
+
+module.exports = DragonTotem;

package/tui/components/ResultPanel.jsx

@@ -0,0 +1,33 @@
+const React = require('react');
+const { Box, Text } = require('ink');
+
+function ResultPanel({ results }) {
+  const displayResults = results.slice(-30);
+
+  return (
+    React.createElement(Box, { flexDirection: 'column', borderStyle: 'single', borderColor: 'yellow', paddingX: 1, flexGrow: 1 },
+      React.createElement(Text, { bold: true, color: 'yellow' }, 'Results'),
+      React.createElement(Box, { flexDirection: 'column', marginTop: 1, overflow: 'hidden' },
+        displayResults.length === 0 && React.createElement(Text, { color: 'gray' }, 'No results yet. Execute a command to see output here.'),
+        displayResults.map((result, i) =>
+          React.createElement(Box, { key: i, flexDirection: 'column', marginBottom: 1 },
+            result.type === 'result' && React.createElement(React.Fragment, null,
+              result.metadata?.skill && React.createElement(Text, null,
+                React.createElement(Text, { color: 'gray' }, 'Skill: '),
+                React.createElement(Text, { color: 'green' }, result.metadata.skill),
+                result.metadata?.duration && React.createElement(Text, { color: 'gray' }, ' (' + result.metadata.duration + 'ms)')
+              ),
+              React.createElement(Text, { color: 'white' },
+                typeof result.data === 'string' ? result.data : JSON.stringify(result.data, null, 2)
+              )
+            ),
+            result.type === 'learning' && React.createElement(Text, { color: 'cyan' }, result.message),
+            result.type === 'error' && React.createElement(Text, { color: 'red' }, 'Error: ' + result.message)
+          )
+        )
+      )
+    )
+  );
+}
+
+module.exports = ResultPanel;

package/tui/components/Sidebar.jsx

@@ -0,0 +1,70 @@
+const React = require('react');
+const { Box, Text, useInput } = require('ink');
+const DragonTotem = require('./DragonTotem.jsx');
+
+function Sidebar({ flowmind, width, onSkillSelect }) {
+  const [selectedIndex, setSelectedIndex] = React.useState(0);
+  const [skills, setSkills] = React.useState([]);
+  const [honorData, setHonorData] = React.useState({ points: 0, level: 0, stats: {} });
+
+  React.useEffect(() => {
+    if (flowmind) {
+      try {
+        const list = flowmind.skills.list() || [];
+        setSkills(list);
+      } catch (e) {
+        setSkills([]);
+      }
+      try {
+        setHonorData(flowmind.getHonorData());
+      } catch (e) {
+        // keep default honorData
+      }
+    }
+  }, [flowmind]);
+
+  useInput((input, key) => {
+    if (key.upArrow) setSelectedIndex(prev => Math.max(0, prev - 1));
+    else if (key.downArrow) setSelectedIndex(prev => Math.min(skills.length - 1, prev + 1));
+    else if (key.return && skills[selectedIndex] && onSkillSelect) onSkillSelect(skills[selectedIndex]);
+  });
+
+  const barWidth = Math.max(10, width - 4);
+  const progress = honorData.points > 0 ? Math.min(1, honorData.points / 100) : 0;
+  const filled = Math.round(progress * barWidth);
+  const progressBar = '\u2588'.repeat(filled) + '\u2591'.repeat(barWidth - filled);
+
+  return (
+    React.createElement(Box, { flexDirection: 'column', width: width, borderStyle: 'single', borderColor: 'cyan', paddingX: 1 },
+      React.createElement(DragonTotem, { honorData: honorData, compact: true }),
+      React.createElement(Box, { flexDirection: 'column', marginTop: 1 },
+        React.createElement(Text, { bold: true, color: 'cyan' }, 'Progress'),
+        React.createElement(Text, { color: 'green' }, progressBar),
+        React.createElement(Text, { color: 'gray' }, honorData.points + '/100 pts')
+      ),
+      React.createElement(Box, { flexDirection: 'column', marginTop: 1 },
+        React.createElement(Text, { bold: true, color: 'cyan' }, 'Skills (' + skills.length + ')'),
+        React.createElement(Box, { flexDirection: 'column', marginTop: 1 },
+          skills.length === 0 && React.createElement(Text, { color: 'gray' }, 'No skills loaded'),
+          skills.map((skill, i) => {
+            const isSelected = i === selectedIndex;
+            const category = skill.category || 'general';
+            const prefix = isSelected ? '\u25B6 ' : '  ';
+            return React.createElement(Text, { key: skill.name },
+              React.createElement(Text, { color: isSelected ? 'green' : 'white' }, prefix + skill.name),
+              React.createElement(Text, { color: 'gray' }, ' [' + category + ']')
+            );
+          })
+        )
+      ),
+      React.createElement(Box, { flexDirection: 'column', marginTop: 1 },
+        React.createElement(Text, { bold: true, color: 'cyan' }, 'Stats'),
+        React.createElement(Text, { color: 'gray' }, 'Skills used: ' + (honorData.stats?.skillUseCount || 0)),
+        React.createElement(Text, { color: 'gray' }, 'Learnings: ' + (honorData.stats?.learningCount || 0)),
+        React.createElement(Text, { color: 'gray' }, 'New skills: ' + (honorData.stats?.newSkillCount || 0))
+      )
+    )
+  );
+}
+
+module.exports = Sidebar;