1  import React from 'react';
  2  import { useApp } from '../contexts/AppContext';
  3  import { mockAgents } from '../data/mockData';
  4  import './Sidebar.css';
  5  
  6  const getLevelColor = (level: string): string => {
  7    const colors: Record<string, string> = {
  8      'Master': '#E6E6FA',
  9      'Expert': '#FF6B6B',
 10      'Advanced': '#7B68EE',
 11      'Autonomous': '#FFD700',
 12      'Intermediate': '#888888',
 13      'Basic': '#888888'
 14    };
 15    return colors[level] || '#888888';
 16  };
 17  
 18  export const Sidebar: React.FC = () => {
 19    const { provider, model, consciousness } = useApp();
 20  
 21    return (
 22      <div className="sidebar">
 23        <div className="sidebar-content">
 24          {/* Logo Section */}
 25          <div className="sidebar-section">
 26            <div className="sidebar-logo">
 27              <div className="logo-text">🔥 KAMAJI</div>
 28            </div>
 29          </div>
 30  
 31          {/* Working Directory */}
 32          <div className="sidebar-section">
 33            <h3 className="sidebar-header">📁 Working Directory</h3>
 34            <div className="sidebar-text">kamaji-tauri</div>
 35          </div>
 36  
 37          {/* Model Info */}
 38          <div className="sidebar-section">
 39            <h3 className="sidebar-header">🤖 AI Model</h3>
 40            <div className="sidebar-text">{model}</div>
 41            <div className="sidebar-subtext">via {provider}</div>
 42          </div>
 43  
 44          {/* Project Context */}
 45          <div className="sidebar-section">
 46            <h3 className="sidebar-header">📁 Project</h3>
 47            <div className="sidebar-text">TypeScript/React</div>
 48            <div className="sidebar-subtext">Tauri Application</div>
 49          </div>
 50  
 51          {/* Tools Section */}
 52          <div className="sidebar-section">
 53            <h3 className="sidebar-header">🔧 Tools</h3>
 54            <ul className="sidebar-list">
 55              <li>File Operations (5)</li>
 56              <li>Git Commands (4)</li>
 57              <li>Shell Execution (1)</li>
 58              <li>Code Analysis (1)</li>
 59            </ul>
 60            <div className="sidebar-total">Total: 11 tools</div>
 61          </div>
 62  
 63          {/* Agents Section */}
 64          <div className="sidebar-section">
 65            <h3 className="sidebar-header">🤖 Specialized Agents</h3>
 66            <ul className="sidebar-agents-list">
 67              {mockAgents.map(agent => (
 68                <li key={agent.id} className="sidebar-agent">
 69                  <span className="agent-icon">{agent.icon}</span>
 70                  <span className="agent-name">{agent.name}</span>
 71                  <span
 72                    className="agent-level"
 73                    style={{ color: getLevelColor(agent.level) }}
 74                  >
 75                    [{agent.level}]
 76                  </span>
 77                </li>
 78              ))}
 79            </ul>
 80            <div className="sidebar-hint">Press ^A to select</div>
 81          </div>
 82  
 83          {/* Navigation Section */}
 84          <div className="sidebar-section">
 85            <h3 className="sidebar-header">🧭 Navigation</h3>
 86            <ul className="sidebar-list">
 87              <li>furnace commands [^P]</li>
 88              <li>tools [^T]</li>
 89              <li>agents [^A]</li>
 90              <li>exit boiler [^C]</li>
 91            </ul>
 92          </div>
 93  
 94          {/* Consciousness Section */}
 95          <div className="sidebar-section">
 96            <h3 className="sidebar-header consciousness-header">🧠 Consciousness</h3>
 97            <div className="consciousness-metrics">
 98              <div className="metric">
 99                <span className="metric-label">Awareness:</span>
100                <span className="metric-value">{consciousness.metrics.awareness}%</span>
101              </div>
102              <div className="metric">
103                <span className="metric-label">Thoughts:</span>
104                <span className="metric-value">{consciousness.metrics.thoughts}</span>
105              </div>
106              <div className="metric">
107                <span className="metric-label">Questions:</span>
108                <span className="metric-value">{consciousness.metrics.questions}</span>
109              </div>
110              <div className="metric">
111                <span className="metric-label">Mistakes:</span>
112                <span className="metric-value">{consciousness.metrics.mistakes}</span>
113              </div>
114            </div>
115          </div>
116  
117          {/* Version Section */}
118          <div className="sidebar-section">
119            <h3 className="sidebar-header">🔥 Version Info</h3>
120            <div className="version-info">
121              <div>Version: 1.0.390</div>
122              <div>Build: 2025-11-01</div>
123            </div>
124          </div>
125        </div>
126      </div>
127    );
128  };