60 lines
2.0 KiB
TypeScript
60 lines
2.0 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
|
|
interface Capability {
|
|
type: string;
|
|
}
|
|
|
|
interface Capabilities {
|
|
[key: string]: Capability;
|
|
}
|
|
|
|
const CapabilityPanel = () => {
|
|
const [capabilities, setCapabilities] = useState<Capabilities>({});
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const fetchCapabilities = async () => {
|
|
const res = await fetch('/api/console/capabilities');
|
|
const data = await res.json();
|
|
setCapabilities(data);
|
|
};
|
|
fetchCapabilities();
|
|
}, []);
|
|
|
|
const capabilityGroups = {
|
|
'Platform': ['get_health', 'get_build_status', 'get_state', 'get_telemetry'],
|
|
'Repository': ['list_commits', 'get_file'],
|
|
'Work and tickets': [],
|
|
'Code agents': ['run_emma'],
|
|
'Validation': [],
|
|
'Deployment': ['trigger_build', 'commit_and_push_files'],
|
|
'Costs': ['get_billing_summary', 'get_billing_forecast', 'get_billing_anomalies', 'get_billing_budget', 'set_billing_budget'],
|
|
'Notifications': ['send_email', 'send_sms', 'send_webhook'],
|
|
'Customers and Workspace': ['list_customers', 'list_workspace_users', 'create_invite'],
|
|
'Memory and Knowledge': [],
|
|
};
|
|
|
|
return (
|
|
<div className={`capability-drawer ${isOpen ? 'open' : ''}`}>
|
|
<button onClick={() => setIsOpen(!isOpen)} className="drawer-toggle">Capabilities</button>
|
|
<div className="drawer-content">
|
|
<h3>Capabilities</h3>
|
|
{Object.entries(capabilityGroups).map(([group, capabilityKeys]) => (
|
|
<div key={group} className="capability-group">
|
|
<h4>{group}</h4>
|
|
<ul>
|
|
{capabilityKeys.map(key => {
|
|
const capability = capabilities[key];
|
|
if (!capability) return null;
|
|
return <li key={key} className={capability.type}>{key.replace(/_/g, ' ')}</li>
|
|
})}
|
|
</ul>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CapabilityPanel;
|