feat(mission-control): new sidebar structure v3.0

- 10 categories: Command, Personal, Automation, Council, Projects, Trading, Leads, Memory, Sites, System
- Expand All / Collapse All buttons
- Open All by default: Command, Personal, Automation
- Logout button in footer
- All existing pages linked
This commit is contained in:
2026-03-23 18:02:39 +01:00
parent 45af56d9cf
commit 41c255abf2
@@ -3,19 +3,38 @@
import { useState } from "react"; import { useState } from "react";
import Link from "next/link"; import Link from "next/link";
export default function MissionControlDashboard() { export default function MissionControlDashboard({ onLogout }: { onLogout?: () => void }) {
const [expandedCategory, setExpandedCategory] = useState<string | null>("council"); const [expandedCategories, setExpandedCategories] = useState<Set<string>>(new Set(["command", "personal", "automation"]));
const toggleCategory = (id: string) => {
setExpandedCategories((prev) => {
const next = new Set(prev);
if (next.has(id)) {
next.delete(id);
} else {
next.add(id);
}
return next;
});
};
const expandAll = () => {
setExpandedCategories(new Set(categories.map((c) => c.id)));
};
const collapseAll = () => {
setExpandedCategories(new Set());
};
const categories = [ const categories = [
{ {
id: "council", id: "command",
name: "Council", name: "Command",
icon: "👁️", icon: "👁️",
items: [ items: [
{ id: "temple", name: "Temple of AI", icon: "🏛️", color: "#fbbf24", href: "/mission-control/temple" }, { id: "dashboard", name: "Dashboard", icon: "🏠", color: "#3b82f6", href: "/mission-control" },
{ id: "office", name: "Claw3D Office", icon: "🏢", color: "#22c55e", href: "/mission-control/office" }, { id: "horus-chat", name: "Horus Chat", icon: "💬", color: "#8b5cf6", href: "/mission-control/claude-chat" },
{ id: "memory", name: "Daily Memory", icon: "📝", color: "#a855f7", href: "/mission-control/memory" }, { id: "voice-chat", name: "Voice Chat", icon: "🎤", color: "#06b6d4", href: "/mission-control/voice" },
{ id: "claude", name: "Claude Chat", icon: "💬", color: "#ff6154", href: "/mission-control/claude-chat" },
] ]
}, },
{ {
@@ -27,6 +46,77 @@ export default function MissionControlDashboard() {
{ id: "pdf-viewer", name: "PDF Viewer", icon: "📰", color: "#6366f1", href: "/mission-control/pdf-viewer" }, { id: "pdf-viewer", name: "PDF Viewer", icon: "📰", color: "#6366f1", href: "/mission-control/pdf-viewer" },
] ]
}, },
{
id: "automation",
name: "Automation",
icon: "⚡",
items: [
{ id: "horus-ai", name: "Horus AI", icon: "🤖", color: "#f59e0b", href: "/mission-control/horus-ai" },
{ id: "autorun", name: "Auto-Run", icon: "🔄", color: "#22c55e", href: "/mission-control/autorun" },
{ id: "exec-logs", name: "Execution Logs", icon: "📊", color: "#ef4444", href: "/mission-control/execution-logs" },
{ id: "change-log", name: "Change Log", icon: "📝", color: "#a855f7", href: "/mission-control/change-log" },
{ id: "brainown", name: "Brainown", icon: "🧠", color: "#fbbf24", href: "/mission-control/brainown" },
]
},
{
id: "council",
name: "Council",
icon: "🏛️",
items: [
{ id: "agent-roster", name: "Agent Roster", icon: "👥", color: "#8b5cf6", href: "/mission-control/agents" },
{ id: "thoth", name: "Thoth", icon: "🦉", color: "#6366f1", href: "/mission-control/agent/thoth" },
{ id: "ptah", name: "Ptah", icon: "🛠️", color: "#f59e0b", href: "/mission-control/agent/ptah" },
{ id: "seshat", name: "Seshat", icon: "📜", color: "#22c55e", href: "/mission-control/agent/seshat" },
{ id: "anubis", name: "Anubis", icon: "🐕", color: "#ef4444", href: "/mission-control/agent/anubis" },
{ id: "thoth-trading", name: "Thoth Trading", icon: "📈", color: "#10b981", href: "/mission-control/agent/thoth-trading" },
{ id: "sekhmet", name: "Sekhmet", icon: "🦁", color: "#fbbf24", href: "/mission-control/agent/sekhmet" },
{ id: "sessions", name: "Sessions", icon: "💬", color: "#06b6d4", href: "/mission-control/sessions" },
{ id: "council-chat", name: "Council Chat", icon: "🏛️", color: "#a855f7", href: "/mission-control/council" },
]
},
{
id: "projects",
name: "Projects & Tasks",
icon: "📋",
items: [
{ id: "task-board", name: "Task Board", icon: "✅", color: "#3b82f6", href: "/mission-control/tasks" },
{ id: "task-history", name: "Task History", icon: "📜", color: "#6366f1", href: "/mission-control/task-history" },
{ id: "monday", name: "Monday Board", icon: "📅", color: "#f59e0b", href: "/mission-control/monday" },
]
},
{
id: "trading",
name: "Trading",
icon: "📊",
items: [
{ id: "trading-panel", name: "Trading Panel", icon: "📈", color: "#10b981", href: "/mission-control/trading" },
{ id: "trading-chart", name: "Trading Chart", icon: "📉", color: "#ef4444", href: "/mission-control/trading-chart" },
{ id: "trading-reports", name: "Trading Reports", icon: "📔", color: "#f59e0b", href: "/mission-control/trading-reports" },
{ id: "trading-tools", name: "Trading Tools", icon: "🛠️", color: "#8b5cf6", href: "/mission-control/trading-tools" },
]
},
{
id: "leads",
name: "Leads & CRM",
icon: "💼",
items: [
{ id: "leads", name: "Lead Manager", icon: "📋", color: "#f59e0b", href: "/mission-control/leads" },
{ id: "hp-leads", name: "HP Leads", icon: "🚀", color: "#22c55e", href: "/mission-control/hp-leads" },
{ id: "hp-submissions", name: "HP Submissions", icon: "📨", color: "#ef4444", href: "/mission-control/hp-submissions" },
]
},
{
id: "memory",
name: "Memory & Research",
icon: "📝",
items: [
{ id: "daily-memory", name: "Daily Memory", icon: "📅", color: "#a855f7", href: "/mission-control/memory" },
{ id: "briefs", name: "Briefs", icon: "☀️", color: "#fbbf24", href: "/mission-control/briefs" },
{ id: "research", name: "Deep Research", icon: "🔬", color: "#3b82f6", href: "/mission-control/research" },
{ id: "transcripts", name: "Transcripts", icon: "📹", color: "#6366f1", href: "/mission-control/transcripts" },
{ id: "docs", name: "Docs", icon: "📚", color: "#10b981", href: "/mission-control/docs" },
]
},
{ {
id: "sites", id: "sites",
name: "Sites", name: "Sites",
@@ -38,22 +128,14 @@ export default function MissionControlDashboard() {
] ]
}, },
{ {
id: "tools", id: "system",
name: "Tools", name: "System",
icon: "🛠", icon: "",
items: [ items: [
{ id: "leads", name: "Lead Manager", icon: "📋", color: "#f59e0b", href: "/mission-control/leads" }, { id: "system-status", name: "System Status", icon: "📡", color: "#10b981", href: "/mission-control/system-status" },
{ id: "email", name: "Email Campaign", icon: "📧", color: "#ef4444", href: "/mission-control/email" }, { id: "skills-panel", name: "Skills Panel", icon: "🎯", color: "#f59e0b", href: "/mission-control/skills" },
{ id: "trading", name: "Trading Panel", icon: "📈", color: "#10b981", href: "/mission-control/trading" }, { id: "command-center", name: "Command Center", icon: "⌨️", color: "#ef4444", href: "/mission-control/command" },
] { id: "projects-panel", name: "Projects Panel", icon: "📁", color: "#6366f1", href: "/mission-control/projects-panel" },
},
{
id: "agents",
name: "Agents",
icon: "🤖",
items: [
{ id: "agents-list", name: "Agent Roster", icon: "👥", color: "#8b5cf6", href: "/mission-control/agents" },
{ id: "sessions", name: "Sessions", icon: "💬", color: "#06b6d4", href: "/mission-control/sessions" },
] ]
}, },
]; ];
@@ -68,7 +150,7 @@ export default function MissionControlDashboard() {
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-amber-500 to-orange-600 flex items-center justify-center text-xl">👁</div> <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-amber-500 to-orange-600 flex items-center justify-center text-xl">👁</div>
<div> <div>
<h1 className="font-bold text-lg">Mission Control</h1> <h1 className="font-bold text-lg">Mission Control</h1>
<p className="text-xs text-slate-500">Horus OS v2.0</p> <p className="text-xs text-slate-500">Horus OS v3.0</p>
</div> </div>
</div> </div>
</div> </div>
@@ -79,18 +161,18 @@ export default function MissionControlDashboard() {
<div key={category.id}> <div key={category.id}>
{/* Category Header */} {/* Category Header */}
<button <button
onClick={() => setExpandedCategory(expandedCategory === category.id ? null : category.id)} onClick={() => toggleCategory(category.id)}
className="w-full flex items-center justify-between px-2 py-2 text-xs font-semibold text-slate-400 uppercase tracking-wider hover:text-white transition-colors" className="w-full flex items-center justify-between px-2 py-2 text-xs font-semibold text-slate-400 uppercase tracking-wider hover:text-white transition-colors"
> >
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span>{category.icon}</span> <span>{category.icon}</span>
<span>{category.name}</span> <span>{category.name}</span>
</div> </div>
<span className={`transition-transform ${expandedCategory === category.id ? "rotate-90" : ""}`}></span> <span className={`transition-transform ${expandedCategories.has(category.id) ? "rotate-90" : ""}`}></span>
</button> </button>
{/* Category Items */} {/* Category Items */}
{expandedCategory === category.id && ( {expandedCategories.has(category.id) && (
<div className="ml-2 space-y-0.5 mt-1"> <div className="ml-2 space-y-0.5 mt-1">
{category.items.map((item) => ( {category.items.map((item) => (
item.external ? ( item.external ? (
@@ -128,8 +210,26 @@ export default function MissionControlDashboard() {
))} ))}
</div> </div>
{/* Expand/Collapse All Buttons */}
<div className="p-3 border-t border-slate-800 space-y-2">
<button
onClick={expandAll}
className="w-full flex items-center justify-center gap-2 px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 transition-colors text-sm text-slate-300"
>
<span></span>
<span>Expand All</span>
</button>
<button
onClick={collapseAll}
className="w-full flex items-center justify-center gap-2 px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 transition-colors text-sm text-slate-300"
>
<span></span>
<span>Collapse All</span>
</button>
</div>
{/* Footer */} {/* Footer */}
<div className="p-3 border-t border-slate-800"> <div className="p-3 border-t border-slate-800 space-y-2">
<div className="bg-slate-800/50 rounded-lg p-3"> <div className="bg-slate-800/50 rounded-lg p-3">
<div className="flex items-center gap-2 mb-1"> <div className="flex items-center gap-2 mb-1">
<div className="w-2 h-2 rounded-full bg-green-500 animate-pulse" /> <div className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
@@ -137,6 +237,14 @@ export default function MissionControlDashboard() {
</div> </div>
<p className="text-xs text-slate-500">Horus is watching 👁</p> <p className="text-xs text-slate-500">Horus is watching 👁</p>
</div> </div>
{onLogout && (
<button
onClick={onLogout}
className="w-full py-2 rounded-lg bg-red-500/20 hover:bg-red-500/30 text-red-400 text-sm font-medium transition-colors"
>
Logout
</button>
)}
</div> </div>
</div> </div>
@@ -149,7 +257,7 @@ export default function MissionControlDashboard() {
</div> </div>
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<div className="flex items-center gap-2 text-xs text-slate-500"> <div className="flex items-center gap-2 text-xs text-slate-500">
<span>Horus v2.0</span> <span>Horus v3.0</span>
</div> </div>
</div> </div>
</div> </div>