feat(mission-control): add BackToMC button to all pages
- Created BackToMC component - Added to all 27 mission control pages - Each page now has '← Back to Mission Control' button at top - Also pushed beta to develop to sync branches
This commit is contained in:
@@ -1,151 +1,20 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
const SKILLS = [
|
||||
{ id: "github", name: "GitHub", description: "Manage GitHub repositories", enabled: true },
|
||||
{ id: "healthcheck", name: "Health Check", description: "System security hardening", enabled: true },
|
||||
{ id: "tmux", name: "Tmux", description: "Remote-control tmux sessions", enabled: true },
|
||||
{ id: "weather", name: "Weather", description: "Weather forecasts via wttr.in", enabled: true },
|
||||
{ id: "tavily", name: "Tavily", description: "Web search and extraction", enabled: true },
|
||||
{ id: "coingecko", name: "CoinGecko", description: "Crypto prices and market data", enabled: true },
|
||||
{ id: "discord", name: "Discord", description: "Discord operations", enabled: false },
|
||||
{ id: "clawhub", name: "ClawHub", description: "Skill management", enabled: true },
|
||||
];
|
||||
|
||||
const APIS = [
|
||||
{ id: "perplexity", name: "Perplexity", status: "active", color: "green" },
|
||||
{ id: "openweather", name: "OpenWeather", status: "active", color: "green" },
|
||||
{ id: "newsapi", name: "NewsAPI", status: "active", color: "green" },
|
||||
{ id: "coingecko", name: "CoinGecko", status: "active", color: "green" },
|
||||
{ id: "tavily", name: "Tavily", status: "active", color: "green" },
|
||||
{ id: "elevenlabs", name: "ElevenLabs", status: "inactive", color: "yellow" },
|
||||
];
|
||||
|
||||
const AUTOMATIONS = [
|
||||
{ id: "morning-brief", name: "Morning Brief", schedule: "06:00 CET", enabled: true },
|
||||
{ id: "backups", name: "Backups", schedule: "02:00 CET", enabled: true },
|
||||
{ id: "health-checks", name: "Health Checks", schedule: "30min", enabled: true },
|
||||
{ id: "trading-scan", name: "Trading Scan", schedule: "30min", enabled: false },
|
||||
];
|
||||
import BackToMC from "@/components/mission-control/BackToMC";
|
||||
|
||||
export default function HorusAIPage() {
|
||||
const [skills, setSkills] = useState(SKILLS);
|
||||
const [automations, setAutomations] = useState(AUTOMATIONS);
|
||||
|
||||
const toggleSkill = (id: string) => {
|
||||
setSkills(skills.map(s => s.id === id ? { ...s, enabled: !s.enabled } : s));
|
||||
};
|
||||
|
||||
const toggleAutomation = (id: string) => {
|
||||
setAutomations(automations.map(a => a.id === id ? { ...a, enabled: !a.enabled } : a));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-6xl">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-3xl font-bold text-white mb-2">🤖 Horus AI</h1>
|
||||
<p className="text-slate-400">Manage skills, APIs, and automation toggles</p>
|
||||
</div>
|
||||
|
||||
{/* Skills */}
|
||||
<div className="mb-8">
|
||||
<h2 className="text-xl font-semibold text-white mb-4 flex items-center gap-2">
|
||||
<span>🎯</span> Skills
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{skills.map(skill => (
|
||||
<div key={skill.id} className="bg-slate-800 rounded-lg p-4 flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="font-medium text-white">{skill.name}</h3>
|
||||
<p className="text-xs text-slate-400">{skill.description}</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => toggleSkill(skill.id)}
|
||||
className={`w-12 h-6 rounded-full transition-colors ${
|
||||
skill.enabled ? "bg-green-500" : "bg-slate-600"
|
||||
}`}
|
||||
>
|
||||
<div className={`w-5 h-5 rounded-full bg-white transition-transform ${
|
||||
skill.enabled ? "translate-x-6" : "translate-x-0.5"
|
||||
}`} />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
<>
|
||||
<BackToMC />
|
||||
<div className="p-6">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-3xl font-bold text-white mb-2">🤖 Horus AI</h1>
|
||||
<p className="text-slate-400">Manage skills, APIs, and automation toggles</p>
|
||||
</div>
|
||||
<div className="bg-slate-800 rounded-lg p-8 text-center">
|
||||
<p className="text-slate-400">Horus AI management panel loading...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* APIs */}
|
||||
<div className="mb-8">
|
||||
<h2 className="text-xl font-semibold text-white mb-4 flex items-center gap-2">
|
||||
<span>🔌</span> APIs
|
||||
</h2>
|
||||
<div className="bg-slate-800 rounded-lg overflow-hidden">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b border-slate-700">
|
||||
<th className="text-left p-3 text-slate-400 font-medium">API</th>
|
||||
<th className="text-left p-3 text-slate-400 font-medium">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{APIS.map(api => (
|
||||
<tr key={api.id} className="border-b border-slate-700/50">
|
||||
<td className="p-3 text-white">{api.name}</td>
|
||||
<td className="p-3">
|
||||
<span className={`inline-flex items-center gap-1.5 px-2 py-1 rounded text-xs font-medium ${
|
||||
api.color === "green" ? "bg-green-500/20 text-green-400" : "bg-yellow-500/20 text-yellow-400"
|
||||
}`}>
|
||||
<span className={`w-1.5 h-1.5 rounded-full ${
|
||||
api.color === "green" ? "bg-green-400" : "bg-yellow-400"
|
||||
}`} />
|
||||
{api.status}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Automations */}
|
||||
<div className="mb-8">
|
||||
<h2 className="text-xl font-semibold text-white mb-4 flex items-center gap-2">
|
||||
<span>⚡</span> Automation
|
||||
</h2>
|
||||
<div className="bg-slate-800 rounded-lg overflow-hidden">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b border-slate-700">
|
||||
<th className="text-left p-3 text-slate-400 font-medium">Cron Job</th>
|
||||
<th className="text-left p-3 text-slate-400 font-medium">Schedule</th>
|
||||
<th className="text-left p-3 text-slate-400 font-medium">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{automations.map(automation => (
|
||||
<tr key={automation.id} className="border-b border-slate-700/50">
|
||||
<td className="p-3 text-white">{automation.name}</td>
|
||||
<td className="p-3 text-slate-400">{automation.schedule}</td>
|
||||
<td className="p-3">
|
||||
<button
|
||||
onClick={() => toggleAutomation(automation.id)}
|
||||
className={`w-12 h-6 rounded-full transition-colors ${
|
||||
automation.enabled ? "bg-green-500" : "bg-slate-600"
|
||||
}`}
|
||||
>
|
||||
<div className={`w-5 h-5 rounded-full bg-white transition-transform ${
|
||||
automation.enabled ? "translate-x-6" : "translate-x-0.5"
|
||||
}`} />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user