Spaces:
Running
Running
File size: 3,173 Bytes
021e065 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | import { useState } from 'react'
import { MessageSquare, Wrench, CheckSquare } from 'lucide-react'
import { CopilotTab } from './tabs/CopilotTab'
import { ToolsTab } from './tabs/ToolsTab'
import { ActionsTab } from './tabs/ActionsTab'
export default function InstControlPanel({ selectedEntity, entityContext, loading, setSelectedEntity, manifest, activeView }) {
const [tab, setTab] = useState('copilot')
const tabs = [
{ id:'copilot', label:'Copilot', Icon: MessageSquare },
{ id:'tools', label:'Tools', Icon: Wrench },
{ id:'actions', label:'Actions', Icon: CheckSquare },
]
return (
<div style={{
display:'flex', flexDirection:'column', height:'100%',
background:'#0F172A',
borderLeft:'1px solid rgba(255,255,255,0.06)',
width: '320px',
flexShrink: 0
}}>
{/* Header */}
<div className="px-3 py-2.5 border-b border-white/[0.06] bg-[#060a14] flex items-center justify-between flex-shrink-0">
<div className="flex items-center gap-1.5">
<span className="material-symbols-outlined text-inst-primary text-[15px] alert-pulse">sensors</span>
<span className="text-[10px] font-mono font-bold uppercase tracking-wider text-white/90">
{selectedEntity ? selectedEntity : 'CONTROL PLANE'}
</span>
</div>
{selectedEntity && (
<button onClick={() => setSelectedEntity(null)} className="text-white/40 hover:text-white/80 transition-colors duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] btn-press">
<span className="material-symbols-outlined text-[14px]">close</span>
</button>
)}
</div>
{/* Tab bar */}
<div style={{
display:'flex', flexShrink:0,
borderBottom:'1px solid rgba(255,255,255,0.06)',
}}>
{tabs.map(t => (
<button key={t.id}
onClick={() => setTab(t.id)}
style={{
flex:1, padding:'10px 4px',
display:'flex', flexDirection:'column',
alignItems:'center', gap:3,
background:'transparent', border:'none',
cursor:'pointer',
borderBottom: tab === t.id
? '2px solid #10B981' : '2px solid transparent',
color: tab === t.id ? '#10B981' : '#475569',
transition:'border-color 0.15s cubic-bezier(0.23, 1, 0.32, 1), color 0.15s cubic-bezier(0.23, 1, 0.32, 1)',
}}
>
<t.Icon size={14} />
<span style={{ fontSize:9, letterSpacing:'0.08em',
textTransform:'uppercase' }}>
{t.label}
</span>
</button>
))}
</div>
{/* Tab content */}
<div style={{ flex:1, overflow:'hidden', display:'flex', flexDirection:'column' }}>
{tab === 'copilot' && <CopilotTab activeView={activeView} selectedEntity={selectedEntity} entityContext={entityContext} loading={loading} manifest={manifest} />}
{tab === 'tools' && <ToolsTab activeView={activeView} />}
{tab === 'actions' && <ActionsTab activeView={activeView} />}
</div>
</div>
)
}
|