| 6 | type Tab = 'agents' | 'skills' | 'metrics'; |
| 7 | |
| 8 | export const RightSidebar: React.FC = () => { |
| 9 | const [activeTab, setActiveTab] = useState<Tab>('agents'); |
| 10 | const toggleRightSidebar = useUIStore((s) => s.toggleRightSidebar); |
| 11 | |
| 12 | const tabs = [ |
| 13 | { id: 'agents' as Tab, icon: Robot, label: 'Agents' }, |
| 14 | { id: 'skills' as Tab, icon: Books, label: 'Skills' }, |
| 15 | { id: 'metrics' as Tab, icon: ChartBar, label: 'Metrics' }, |
| 16 | ]; |
| 17 | |
| 18 | return ( |
| 19 | <aside className="h-full bg-[var(--surface)] border-l border-[var(--border)] flex flex-col w-[var(--sidebar-width-right)]"> |
| 20 | <div className="flex items-center border-b border-[var(--border)]"> |
| 21 | <button |
| 22 | onClick={toggleRightSidebar} |
| 23 | className="p-2.5 text-[var(--text-muted)] hover:text-[var(--text)] hover:bg-[var(--surface-2)] transition-colors shrink-0" |
| 24 | title="Hide panel" |
| 25 | > |
| 26 | <SidebarSimple size={16} weight="fill" className="scale-x-[-1]" /> |
| 27 | </button> |
| 28 | {tabs.map((tab) => ( |
| 29 | <button |
| 30 | key={tab.id} |
| 31 | onClick={() => setActiveTab(tab.id)} |
| 32 | className={cn( |
| 33 | "flex-1 flex flex-col items-center gap-1 py-3 transition-all relative group", |
| 34 | activeTab === tab.id |
| 35 | ? "text-[var(--text)]" |
| 36 | : "text-[var(--text-muted)] hover:text-[var(--text)]" |
| 37 | )} |
| 38 | > |
| 39 | <tab.icon size={20} weight={activeTab === tab.id ? "fill" : "regular"} /> |
| 40 | <span className="text-[10px] font-bold uppercase tracking-wider">{tab.label}</span> |
| 41 | {activeTab === tab.id && ( |
| 42 | <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-[var(--accent)]" /> |
| 43 | )} |
| 44 | </button> |
| 45 | ))} |
| 46 | </div> |
| 47 | |
| 48 | <div className="flex-1 overflow-y-auto custom-scrollbar p-4"> |
| 49 | {activeTab === 'agents' && ( |
| 50 | <div className="space-y-4"> |
| 51 | <h3 className="text-xs font-bold text-[var(--text-muted)] uppercase tracking-widest flex items-center gap-2"> |
| 52 | <Cpu size={14} weight="duotone" /> |
| 53 | Active Agents |
| 54 | </h3> |
| 55 | <div className="p-4 rounded-xl border border-[var(--border)] bg-[var(--surface-2)]/50 text-center space-y-2"> |
| 56 | <div className="w-10 h-10 rounded-full bg-[var(--surface)] border border-[var(--border)] flex items-center justify-center mx-auto"> |
| 57 | <TerminalWindow size={20} weight="duotone" className="text-[var(--text)]" /> |
| 58 | </div> |
| 59 | <p className="text-xs font-medium">No agents running</p> |
| 60 | <p className="text-[10px] text-[var(--text-muted)]">Spawn an agent from the chat to see progress here.</p> |
| 61 | </div> |
| 62 | </div> |
| 63 | )} |
| 64 | |
| 65 | {activeTab === 'skills' && ( |