feat(mission-control): restore MC tabs - temple, office, memory, claude, pdf-viewer, resume, resume-upload, temple-3d, demos
Also added: - Memory API endpoints - Briefs API endpoints - AnveVoice stats API - Claude spawn API - TTS proxy - Cleopatra voice widget - api-auth middleware
This commit is contained in:
@@ -1,720 +1,172 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { useMissionControl } from "@/lib/mission-control/store";
|
||||
import { TaskStatus } from "@/lib/mission-control/types";
|
||||
import HorusChat from "./HorusChat";
|
||||
import MondayBoard from "./MondayBoard";
|
||||
import { TaskCardsPanel } from "./TaskCardsPanel";
|
||||
import { TaskHistoryPanel } from "./TaskHistoryPanel";
|
||||
import { TradingPanel } from "./TradingPanel";
|
||||
import AIManagement from "@/components/ai-management/AIManagement";
|
||||
import Council from "@/components/council/Council";
|
||||
import AutoRunPanel from "./AutoRunPanel";
|
||||
import ExecutionLogsPanel from "./ExecutionLogsPanel";
|
||||
import ChangeLogPanel from "./ChangeLogPanel";
|
||||
import BrainownPanel from "./BrainownPanel";
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
|
||||
interface SidebarItem {
|
||||
id: string;
|
||||
name: string;
|
||||
icon: string;
|
||||
color?: string;
|
||||
category: string;
|
||||
}
|
||||
export default function MissionControlDashboard() {
|
||||
const [expandedCategory, setExpandedCategory] = useState<string | null>("council");
|
||||
|
||||
interface SidebarCategory {
|
||||
id: string;
|
||||
name: string;
|
||||
icon: string;
|
||||
items: SidebarItem[];
|
||||
}
|
||||
|
||||
const sidebarCategories: SidebarCategory[] = [
|
||||
{ id: "council", name: "Council", icon: "🏛️", items: [
|
||||
{ id: "teams", name: "Agent Teams", icon: "👥", category: "council" },
|
||||
{ id: "golden-notes", name: "Golden Notes", icon: "🔥", category: "golden-notes" },
|
||||
{ id: "daily-feedback", name: "Daily Feedback", icon: "📝", category: "daily-feedback" },
|
||||
{ id: "ai-settings", name: "AI Settings", icon: "🤖", category: "council-settings" },
|
||||
]},
|
||||
{ id: "leads", name: "Leads", icon: "📈", items: [
|
||||
{ id: "leads-crm", name: "CRM", icon: "📊", category: "leads" },
|
||||
{ id: "hp-submissions", name: "HP Submissions", icon: "📬", category: "hp-submissions" },
|
||||
{ id: "dashboard", name: "Client Dashboard", icon: "🏢", category: "dashboard" },
|
||||
]},
|
||||
{ id: "projects", name: "Projects", icon: "🎯", items: [
|
||||
{ id: "monday", name: "Monday Board", icon: "📊", category: "monday" },
|
||||
{ id: "sitemente", name: "SiteMente", icon: "🌐", color: "#ff7bc0", category: "projects" },
|
||||
{ id: "demos", name: "Demo Pages", icon: "🎨", category: "demos" },
|
||||
{ id: "holacompi", name: "HolaCompi", icon: "🤝", color: "#6366f1", category: "projects" },
|
||||
{ id: "hookd", name: "Hookd", icon: "📌", color: "#4F46E5", category: "hookd" },
|
||||
{ id: "arabredox", name: "Arabredox", icon: "💚", color: "#22c55e", category: "projects" },
|
||||
{ id: "infrastructure", name: "Infra", icon: "⚙️", color: "#10b981", category: "projects" },
|
||||
]},
|
||||
{ id: "trading", name: "Trading", icon: "📈", items: [
|
||||
{ id: "trading-research", name: "Deep Research", icon: "🔬", category: "trading" },
|
||||
{ id: "trading-strategies", name: "Strategies", icon: "🎯", category: "trading" },
|
||||
{ id: "trading-execution", name: "Execution", icon: "⚡", category: "trading" },
|
||||
{ id: "trading-journal", name: "Journal", icon: "📔", category: "trading" },
|
||||
]},
|
||||
{ id: "tasks", name: "Tasks", icon: "✓", items: [
|
||||
{ id: "task-cards", name: "Task Cards", icon: "☑️", category: "task-cards" },
|
||||
{ id: "task-history", name: "History", icon: "📜", category: "task-history" },
|
||||
]},
|
||||
{ id: "chat", name: "Chat", icon: "💬", items: [
|
||||
{ id: "voice", name: "Voice Chat", icon: "🎤", category: "chat" },
|
||||
{ id: "horus-chat", name: "Horus Chat", icon: "👁️", category: "horus-chat" },
|
||||
]},
|
||||
{ id: "automation", name: "Automation", icon: "⚡", items: [
|
||||
{ id: "autorun", name: "Auto-Run", icon: "🔄", category: "autorun" },
|
||||
{ id: "execution-logs", name: "Exec Logs", icon: "📊", category: "execution-logs" },
|
||||
{ id: "changelog", name: "Change Log", icon: "📝", category: "changelog" },
|
||||
{ id: "brainown", name: "Brainown", icon: "🧠", category: "brainown" },
|
||||
]},
|
||||
{ id: "calendar", name: "Calendar", icon: "📅", items: [
|
||||
{ id: "brief", name: "Morning Brief", icon: "☀️", category: "calendar" },
|
||||
{ id: "briefs", name: "All Briefs", icon: "📋", category: "briefs" },
|
||||
{ id: "transcripts", name: "Transcripts", icon: "🎬", category: "transcripts" },
|
||||
]},
|
||||
{ id: "memory", name: "Memory", icon: "🧠", items: [
|
||||
{ id: "logs", name: "Session Logs", icon: "📝", category: "memory" },
|
||||
{ id: "snapshots", name: "Snapshots", icon: "📸", category: "snapshots" },
|
||||
{ id: "research", name: "Deep Research", icon: "🔍", category: "research" },
|
||||
]},
|
||||
{ id: "docs", name: "Docs", icon: "📚", items: [
|
||||
{ id: "docs-index", name: "Documentation", icon: "📚", category: "docs" },
|
||||
]},
|
||||
];
|
||||
|
||||
const statusConfig: Record<TaskStatus, { label: string; color: string }> = {
|
||||
todo: { label: "To Do", color: "text-white/70" },
|
||||
in_progress: { label: "In Progress", color: "text-yellow-400" },
|
||||
done: { label: "Done", color: "text-green-400" },
|
||||
blocked: { label: "Blocked", color: "text-red-400" },
|
||||
paused: { label: "Paused", color: "text-gray-400" },
|
||||
};
|
||||
|
||||
interface MissionControlDashboardProps {
|
||||
onLogout?: () => void;
|
||||
}
|
||||
|
||||
export default function MissionControlDashboard({ onLogout }: MissionControlDashboardProps) {
|
||||
const { tasks, toggleTask, updateTaskStatus, addTask, getProjectProgress, getTasksByProject } = useMissionControl();
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [selectedItem, setSelectedItem] = useState<string>("sitemente");
|
||||
const [filter, setFilter] = useState<TaskStatus | "all">("all");
|
||||
const [expandedCategories, setExpandedCategories] = useState<string[]>(["projects"]);
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [showAddTask, setShowAddTask] = useState(false);
|
||||
const [newTaskTitle, setNewTaskTitle] = useState("");
|
||||
const [newTaskProject, setNewTaskProject] = useState("sitemente");
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === "/" && !e.ctrlKey && !e.metaKey) {
|
||||
const target = e.target as HTMLElement;
|
||||
if (target.tagName !== "INPUT" && target.tagName !== "TEXTAREA") {
|
||||
e.preventDefault();
|
||||
document.getElementById("search-input")?.focus();
|
||||
}
|
||||
}
|
||||
if (e.key === "n" && (e.ctrlKey || e.metaKey)) {
|
||||
e.preventDefault();
|
||||
setShowAddTask(true);
|
||||
}
|
||||
if (e.key === "Escape") {
|
||||
setShowAddTask(false);
|
||||
setSearchQuery("");
|
||||
}
|
||||
};
|
||||
window.addEventListener("keydown", handleKeyDown);
|
||||
return () => window.removeEventListener("keydown", handleKeyDown);
|
||||
}, []);
|
||||
|
||||
let selectedCategory = sidebarCategories.find(c => c.items.some(i => i.id === selectedItem));
|
||||
let currentItem = selectedCategory?.items.find(i => i.id === selectedItem);
|
||||
|
||||
const projectTasks = currentItem?.category === "projects" ? getTasksByProject(selectedItem as any) : tasks;
|
||||
const filteredTasks = filter === "all" ? projectTasks : projectTasks.filter((t) => t.status === filter);
|
||||
const searchedTasks = searchQuery ? filteredTasks.filter(t => t.title.toLowerCase().includes(searchQuery.toLowerCase())) : filteredTasks;
|
||||
const progress = currentItem?.category === "projects" ? getProjectProgress(selectedItem as any) : 0;
|
||||
|
||||
const toggleCategory = (catId: string) => setExpandedCategories(prev => prev.includes(catId) ? prev.filter(id => id !== catId) : [...prev, catId]);
|
||||
const collapseAll = () => setExpandedCategories([]);
|
||||
const todayTasks = projectTasks.filter(t => t.priority === "critical" || t.status === "in_progress").slice(0, 3);
|
||||
|
||||
const exportTasks = () => {
|
||||
const data = JSON.stringify(projectTasks, null, 2);
|
||||
const blob = new Blob([data], { type: "application/json" });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = `tasks-${new Date().toISOString().split("T")[0]}.json`;
|
||||
a.click();
|
||||
};
|
||||
|
||||
const handleAddTask = () => {
|
||||
if (!newTaskTitle.trim()) return;
|
||||
addTask({ title: newTaskTitle, description: "", status: "todo", priority: "medium", project: newTaskProject as any });
|
||||
setShowAddTask(false);
|
||||
setNewTaskTitle("");
|
||||
};
|
||||
|
||||
if (!mounted) {
|
||||
return (
|
||||
<div className="min-h-screen bg-[#1a1625] text-white flex items-center justify-center">
|
||||
<div className="text-white/60">Loading...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Golden Notes - moved to Council tab
|
||||
// Removed from home page per user request
|
||||
const categories = [
|
||||
{
|
||||
id: "council",
|
||||
name: "Council",
|
||||
icon: "👁️",
|
||||
items: [
|
||||
{ id: "temple", name: "Temple of AI", icon: "🏛️", color: "#fbbf24", href: "/mission-control/temple" },
|
||||
{ id: "office", name: "Claw3D Office", icon: "🏢", color: "#22c55e", href: "/mission-control/office" },
|
||||
{ id: "memory", name: "Daily Memory", icon: "📝", color: "#a855f7", href: "/mission-control/memory" },
|
||||
{ id: "claude", name: "Claude Chat", icon: "💬", color: "#ff6154", href: "/mission-control/claude-chat" },
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "personal",
|
||||
name: "Personal",
|
||||
icon: "👤",
|
||||
items: [
|
||||
{ id: "resume", name: "Resume Builder", icon: "📄", color: "#10b981", href: "/mission-control/resume" },
|
||||
{ id: "pdf-viewer", name: "PDF Viewer", icon: "📰", color: "#6366f1", href: "/mission-control/pdf-viewer" },
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "sites",
|
||||
name: "Sites",
|
||||
icon: "🌐",
|
||||
items: [
|
||||
{ id: "sitemente", name: "SiteMente", icon: "🌐", color: "#3b82f6", href: "https://sitemente.com", external: true },
|
||||
{ id: "hostpioneers", name: "HostPioneers", icon: "🚀", color: "#22c55e", href: "https://hostpioneers.com", external: true },
|
||||
{ id: "immortalz", name: "Immortalz", icon: "🎮", color: "#a855f7", href: "https://immortalz.org", external: true },
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "tools",
|
||||
name: "Tools",
|
||||
icon: "🛠️",
|
||||
items: [
|
||||
{ id: "leads", name: "Lead Manager", icon: "📋", color: "#f59e0b", href: "/mission-control/leads" },
|
||||
{ id: "email", name: "Email Campaign", icon: "📧", color: "#ef4444", href: "/mission-control/email" },
|
||||
{ id: "trading", name: "Trading Panel", icon: "📈", color: "#10b981", href: "/mission-control/trading" },
|
||||
]
|
||||
},
|
||||
{
|
||||
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" },
|
||||
]
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#1a1625] text-white flex">
|
||||
<aside className="w-64 border-r border-white/10 bg-[#1a1625] p-4">
|
||||
<div className="flex items-center gap-3 mb-6 pb-4 border-b border-white/10">
|
||||
<div className="w-10 h-10 rounded-xl bg-brand-pink flex items-center justify-center text-xl">👁️</div>
|
||||
<div><h1 className="font-bold">Mission Control</h1><p className="text-xs text-white/50">Horus AI Assistant</p></div>
|
||||
<div className="flex h-screen bg-slate-950 text-white overflow-hidden">
|
||||
{/* Sidebar */}
|
||||
<div className="w-64 bg-slate-900 border-r border-slate-800 flex flex-col flex-shrink-0">
|
||||
{/* Logo */}
|
||||
<div className="p-4 border-b border-slate-800">
|
||||
<div className="flex items-center gap-3">
|
||||
<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>
|
||||
<h1 className="font-bold text-lg">Mission Control</h1>
|
||||
<p className="text-xs text-slate-500">Horus OS v2.0</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav className="space-y-1">
|
||||
{sidebarCategories.map((category) => (
|
||||
|
||||
{/* Navigation */}
|
||||
<div className="flex-1 overflow-y-auto p-3 space-y-1">
|
||||
{categories.map((category) => (
|
||||
<div key={category.id}>
|
||||
<button onClick={() => toggleCategory(category.id)} className="w-full flex items-center justify-between px-3 py-2 rounded-lg text-sm font-medium text-white/70 hover:bg-white/5 hover:text-white transition">
|
||||
<span className="flex items-center gap-2"><span>{category.icon}</span><span>{category.name}</span></span>
|
||||
<span className={`transition ${expandedCategories.includes(category.id) ? "rotate-90" : ""}`}>▶</span>
|
||||
{/* Category Header */}
|
||||
<button
|
||||
onClick={() => setExpandedCategory(expandedCategory === category.id ? null : 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"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<span>{category.icon}</span>
|
||||
<span>{category.name}</span>
|
||||
</div>
|
||||
<span className={`transition-transform ${expandedCategory === category.id ? "rotate-90" : ""}`}>▶</span>
|
||||
</button>
|
||||
{expandedCategories.includes(category.id) && (
|
||||
<div className="ml-4 mt-1 space-y-1">
|
||||
|
||||
{/* Category Items */}
|
||||
{expandedCategory === category.id && (
|
||||
<div className="ml-2 space-y-0.5 mt-1">
|
||||
{category.items.map((item) => (
|
||||
<button key={item.id} onClick={() => setSelectedItem(item.id)} className={`w-full flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition ${selectedItem === item.id ? "bg-white/10 text-white border border-white/20" : "text-white/60 hover:bg-white/5 hover:text-white"}`}>
|
||||
<span>{item.icon}</span><span>{item.name}</span>
|
||||
</button>
|
||||
item.external ? (
|
||||
<a
|
||||
key={item.id}
|
||||
href={item.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-3 px-3 py-2 rounded-lg transition-all text-sm text-slate-400 hover:bg-slate-800/50 hover:text-white"
|
||||
>
|
||||
<span className="text-base">{item.icon}</span>
|
||||
<span className="flex-1">{item.name}</span>
|
||||
{item.color && (
|
||||
<span className="w-2 h-2 rounded-full" style={{ backgroundColor: item.color }} />
|
||||
)}
|
||||
<span className="text-xs">↗</span>
|
||||
</a>
|
||||
) : (
|
||||
<Link
|
||||
key={item.id}
|
||||
href={item.href || "#"}
|
||||
className="flex items-center gap-3 px-3 py-2 rounded-lg transition-all text-sm text-slate-400 hover:bg-slate-800/50 hover:text-white"
|
||||
>
|
||||
<span className="text-base">{item.icon}</span>
|
||||
<span className="flex-1">{item.name}</span>
|
||||
{item.color && (
|
||||
<span className="w-2 h-2 rounded-full" style={{ backgroundColor: item.color }} />
|
||||
)}
|
||||
</Link>
|
||||
)
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</nav>
|
||||
<div className="mt-6 pt-4 border-t border-white/10">
|
||||
<p className="text-xs text-white/40 uppercase mb-2 px-3">Quick</p>
|
||||
<a href="/" className="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-white/60 hover:bg-white/5 hover:text-white transition">🏠 SiteMente Site</a>
|
||||
<button onClick={collapseAll} className="w-full flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-white/60 hover:bg-white/5 hover:text-white transition">⊖ Collapse All</button>
|
||||
{onLogout && (
|
||||
<button onClick={onLogout} className="w-full flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-red-400 hover:bg-red-500/10 transition">🚪 Logout</button>
|
||||
)}
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main className="flex-1 p-6 overflow-y-auto">
|
||||
<header className="flex items-center justify-between mb-6 pb-4 border-b border-white/10">
|
||||
{/* Footer */}
|
||||
<div className="p-3 border-t border-slate-800">
|
||||
<div className="bg-slate-800/50 rounded-lg p-3">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<div className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
|
||||
<span className="text-xs text-green-400 font-medium">Systems Operational</span>
|
||||
</div>
|
||||
<p className="text-xs text-slate-500">Horus is watching 👁️</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex-1 flex flex-col overflow-hidden">
|
||||
{/* Top Bar */}
|
||||
<div className="h-14 bg-slate-900/50 border-b border-slate-800 flex items-center justify-between px-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<button onClick={() => { setSelectedItem("sitemente"); setExpandedCategories(["projects"]); }} className="w-10 h-10 rounded-xl bg-brand-pink flex items-center justify-center text-xl hover:bg-[#ff7bc0] transition">👁️</button>
|
||||
<div>
|
||||
<h2 className="text-xl font-bold flex items-center gap-2"><span>{currentItem?.icon}</span><span>{currentItem?.name}</span></h2>
|
||||
<p className="text-sm text-white/50">{currentItem?.category === "projects" ? `${progress}% complete` : `${tasks.length} total tasks`}</p>
|
||||
<span className="text-slate-400 text-sm">Mission Control</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2 text-xs text-slate-500">
|
||||
<span>Horus v2.0</span>
|
||||
</div>
|
||||
</div>
|
||||
{currentItem?.category === "projects" && (
|
||||
<div className="h-12 w-12 rounded-full border-4 border-brand-pink bg-white/10">
|
||||
<svg className="h-full w-full -rotate-90" viewBox="0 0 36 36">
|
||||
<circle cx="18" cy="18" r="16" fill="none" stroke="currentColor" strokeWidth="3" className="text-white/20" />
|
||||
<circle cx="18" cy="18" r="16" fill="none" stroke="currentColor" strokeWidth="3" strokeDasharray={`${progress}, 100`} className="text-brand-pink" />
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
</div>
|
||||
|
||||
{currentItem?.category === "chat" && <div className="rounded-xl border border-white/10 bg-white/5 p-6"><HorusChat /></div>}
|
||||
|
||||
{currentItem?.category === "horus-chat" && (
|
||||
<div className="h-full">
|
||||
<HorusChat />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{currentItem?.category === "monday" && <div className="h-full"><MondayBoard /></div>}
|
||||
|
||||
{currentItem?.category === "council" && currentItem?.id === "teams" && <div className="rounded-xl border border-white/10 bg-white/5 p-6"><Council /></div>}
|
||||
|
||||
{currentItem?.category === "council-settings" && <div className="rounded-xl border border-white/10 bg-white/5 p-6"><AIManagement /></div>}
|
||||
|
||||
{currentItem?.category === "golden-notes" && (
|
||||
<div className="rounded-xl border border-amber-500/30 bg-gradient-to-br from-[#1a1625] to-[#2d1f3d] p-6">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<span className="text-amber-400 text-2xl">🔥</span>
|
||||
<h3 className="font-bold text-amber-400 text-xl">Golden Notes</h3>
|
||||
</div>
|
||||
<p className="text-white/60 mb-6">Insights and wisdom from the agent council</p>
|
||||
<div className="space-y-4">
|
||||
<div className="p-4 rounded-lg bg-white/5 border border-amber-500/20">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className="text-amber-400">👁️</span>
|
||||
<span className="font-semibold text-amber-400">HORUS</span>
|
||||
</div>
|
||||
<ul className="text-sm text-white/80 space-y-1">
|
||||
<li>• Your frame: "safe" → should be "leading"</li>
|
||||
<li>• Own the Egyptian-Scandinavian contrast</li>
|
||||
<li>• Fun first, lead often, let go</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="p-4 rounded-lg bg-white/5 border border-blue-500/20">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className="text-blue-400">👁️</span>
|
||||
<span className="font-semibold text-blue-400">THOTH (Strategy)</span>
|
||||
</div>
|
||||
<ul className="text-sm text-white/80 space-y-1">
|
||||
<li>• Stop tracking "case notes" — creates attachment</li>
|
||||
<li>• Signal intent early: comfort → curiosity → desire</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="p-4 rounded-lg bg-white/5 border border-green-500/20">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className="text-green-400">🏗️</span>
|
||||
<span className="font-semibold text-green-400">PTAH (Builder)</span>
|
||||
</div>
|
||||
<ul className="text-sm text-white/80 space-y-1">
|
||||
<li>• You're over-engineering. Strip it down.</li>
|
||||
<li>• Friendzone = too much comfort before desire</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="p-4 rounded-lg bg-white/5 border border-yellow-500/20">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className="text-yellow-400">📜</span>
|
||||
<span className="font-semibold text-yellow-400">SESHAT (Records)</span>
|
||||
</div>
|
||||
<ul className="text-sm text-white/80 space-y-1">
|
||||
<li>• Delete case notes entirely</li>
|
||||
<li>• Write forward, analyze backward less</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="p-4 rounded-lg bg-white/5 border border-purple-500/20">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className="text-purple-400">🐺</span>
|
||||
<span className="font-semibold text-purple-400">ANUBIS (Connector)</span>
|
||||
</div>
|
||||
<ul className="text-sm text-white/80 space-y-1">
|
||||
<li>• Calm + leading = attractive | Calm + passive = friend</li>
|
||||
<li>• Make small demands, create reasons to meet</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="p-4 rounded-lg bg-white/5 border border-cyan-500/20">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className="text-cyan-400">📈</span>
|
||||
<span className="font-semibold text-cyan-400">THOTH TRADING (Observer)</span>
|
||||
</div>
|
||||
<ul className="text-sm text-white/80 space-y-1">
|
||||
<li>• You're in accumulation, need breakout</li>
|
||||
<li>• Introduce escalation every 7-10 messages</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="p-4 rounded-lg bg-white/5 border border-red-500/20">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className="text-red-400">⚔️</span>
|
||||
<span className="font-semibold text-red-400">SEKHMET (Action)</span>
|
||||
</div>
|
||||
<ul className="text-sm text-white/80 space-y-1">
|
||||
<li>• You're too nice in approach</li>
|
||||
<li>• Tease more, challenge more, lead more</li>
|
||||
</ul>
|
||||
</div>
|
||||
{/* Content Area */}
|
||||
<div className="flex-1 overflow-y-auto p-6">
|
||||
<div className="h-full flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="text-8xl mb-6 opacity-50">👁️</div>
|
||||
<h2 className="text-2xl font-bold mb-2">Mission Control</h2>
|
||||
<p className="text-slate-500 max-w-md">
|
||||
Your AI command center. Select a tool from the sidebar to begin.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{currentItem?.category === "daily-feedback" && (
|
||||
<div className="rounded-xl border border-blue-500/30 bg-gradient-to-br from-[#1a1625] to-[#1a2a3d] p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-blue-400 text-2xl">📝</span>
|
||||
<h3 className="font-bold text-blue-400 text-xl">Daily Feedback</h3>
|
||||
</div>
|
||||
<span className="text-xs text-white/50">{new Date().toLocaleDateString()}</span>
|
||||
</div>
|
||||
<p className="text-white/60 mb-4">End-of-day insights from all agents. Select notes to promote to Golden.</p>
|
||||
|
||||
<div className="space-y-4 mb-6">
|
||||
<div className="p-4 rounded-lg bg-white/5 border border-blue-500/20">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-amber-400">👁️</span>
|
||||
<span className="font-semibold">HORUS</span>
|
||||
</div>
|
||||
<label className="flex items-center gap-2 text-xs cursor-pointer">
|
||||
<input type="checkbox" className="w-4 h-4 rounded accent-brand-pink" />
|
||||
<span className="text-white/60">Promote to Golden</span>
|
||||
</label>
|
||||
</div>
|
||||
<textarea className="w-full bg-white/5 border border-white/10 rounded-lg p-3 text-sm text-white/80 resize-none" rows={3} placeholder="What did you learn today?" />
|
||||
</div>
|
||||
|
||||
<div className="p-4 rounded-lg bg-white/5 border border-blue-500/20">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-blue-400">👁️</span>
|
||||
<span className="font-semibold">THOTH</span>
|
||||
</div>
|
||||
<label className="flex items-center gap-2 text-xs cursor-pointer">
|
||||
<input type="checkbox" className="w-4 h-4 rounded accent-brand-pink" />
|
||||
<span className="text-white/60">Promote to Golden</span>
|
||||
</label>
|
||||
</div>
|
||||
<textarea className="w-full bg-white/5 border border-white/10 rounded-lg p-3 text-sm text-white/80 resize-none" rows={3} placeholder="What did you learn today?" />
|
||||
</div>
|
||||
|
||||
<div className="p-4 rounded-lg bg-white/5 border border-blue-500/20">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-green-400">🏗️</span>
|
||||
<span className="font-semibold">PTAH</span>
|
||||
</div>
|
||||
<label className="flex items-center gap-2 text-xs cursor-pointer">
|
||||
<input type="checkbox" className="w-4 h-4 rounded accent-brand-pink" />
|
||||
<span className="text-white/60">Promote to Golden</span>
|
||||
</label>
|
||||
</div>
|
||||
<textarea className="w-full bg-white/5 border border-white/10 rounded-lg p-3 text-sm text-white/80 resize-none" rows={3} placeholder="What did you learn today?" />
|
||||
</div>
|
||||
|
||||
<div className="p-4 rounded-lg bg-white/5 border border-blue-500/20">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-purple-400">🐺</span>
|
||||
<span className="font-semibold">ANUBIS</span>
|
||||
</div>
|
||||
<label className="flex items-center gap-2 text-xs cursor-pointer">
|
||||
<input type="checkbox" className="w-4 h-4 rounded accent-brand-pink" />
|
||||
<span className="text-white/60">Promote to Golden</span>
|
||||
</label>
|
||||
</div>
|
||||
<textarea className="w-full bg-white/5 border border-white/10 rounded-lg p-3 text-sm text-white/80 resize-none" rows={3} placeholder="What did you learn today?" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button className="w-full py-3 bg-brand-pink hover:bg-[#ff7bc0] rounded-lg font-medium transition">
|
||||
💾 Save & Promote Selected
|
||||
</button>
|
||||
|
||||
<p className="text-xs text-white/40 mt-4 text-center">
|
||||
Feedback auto-generates at 9pm CET. Edit and promote what matters.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{currentItem?.category === "trading" && <TradingPanel />}
|
||||
|
||||
{currentItem?.category === "calendar" && (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-xl border border-white/10 bg-white/5 p-6">
|
||||
<h3 className="text-lg font-semibold mb-4">📅 Morning Brief</h3>
|
||||
<p className="text-white/60 mb-4">Daily intelligence at 6am CET</p>
|
||||
<a href="/morning-brief" className="inline-flex items-center gap-2 px-4 py-2 bg-brand-pink rounded-lg text-sm font-medium hover:bg-[#ff7bc0] transition">☀️ Open Calendar</a>
|
||||
</div>
|
||||
<HorusChat />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{currentItem?.category === "briefs" && (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-xl border border-white/10 bg-white/5 p-6">
|
||||
<h3 className="text-lg font-semibold mb-4">📋 All Briefs</h3>
|
||||
<p className="text-white/60 mb-4">Morning, EOD, and Amun reports</p>
|
||||
<a href="/mission-control/briefs" className="inline-flex items-center gap-2 px-4 py-2 bg-brand-pink rounded-lg text-sm font-medium hover:bg-[#ff7bc0] transition">📋 Open Briefs</a>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{currentItem?.category === "transcripts" && (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-xl border border-white/10 bg-white/5 p-6">
|
||||
<h3 className="text-lg font-semibold mb-4">🎬 YouTube Transcripts</h3>
|
||||
<p className="text-white/60 mb-4">Save and organize video transcripts for learning</p>
|
||||
<a href="/mission-control/transcripts" className="inline-flex items-center gap-2 px-4 py-2 bg-brand-pink rounded-lg text-sm font-medium hover:bg-[#ff7bc0] transition">🎬 Open Transcripts</a>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{currentItem?.category === "research" && (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-xl border border-white/10 bg-white/5 p-6">
|
||||
<h3 className="text-lg font-semibold mb-4">🔍 Deep Research</h3>
|
||||
<p className="text-white/60 mb-4">AI-powered research using Tavily API</p>
|
||||
<a href="/mission-control/research" className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 rounded-lg text-sm font-medium hover:bg-blue-700 transition">🔍 Open Research</a>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* BMHQ Automation Panels */}
|
||||
{currentItem?.category === "autorun" && (
|
||||
<div className="rounded-xl border border-green-500/30 bg-gradient-to-br from-[#1a2a1a] to-[#1a2a2a] p-6">
|
||||
<AutoRunPanel />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{currentItem?.category === "execution-logs" && (
|
||||
<div className="rounded-xl border border-blue-500/30 bg-gradient-to-br from-[#1a1a2a] to-[#1a2a3a] p-6">
|
||||
<ExecutionLogsPanel />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{currentItem?.category === "changelog" && (
|
||||
<div className="rounded-xl border border-purple-500/30 bg-gradient-to-br from-[#2a1a2a] to-[#2a1a3a] p-6">
|
||||
<ChangeLogPanel />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{currentItem?.category === "brainown" && (
|
||||
<div className="rounded-xl border border-pink-500/30 bg-gradient-to-br from-[#2a1a2a] to-[#3a2a3a] p-6">
|
||||
<BrainownPanel />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{currentItem?.category === "memory" && (
|
||||
<div className="rounded-xl border border-white/10 bg-white/5 p-6">
|
||||
<h3 className="text-lg font-semibold mb-4">🧠 Memory & Logs</h3>
|
||||
<p className="text-white/60 mb-4">Session history and daily logs</p>
|
||||
<div className="space-y-2 text-sm text-white/70"><p>Memory is stored in:</p><ul className="text-white/50 space-y-1"><li>• localStorage (browser)</li><li>• GitHub repo (daily commits)</li><li>• MEMORY.md (curated)</li></ul></div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{currentItem?.category === "snapshots" && (
|
||||
<div className="rounded-xl border border-white/10 bg-white/5 p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-semibold">📸 Daily Snapshots</h3>
|
||||
<span className="text-xs text-white/50">Last 7 days</span>
|
||||
</div>
|
||||
<p className="text-white/60 mb-4">Weekly snapshots of Mission Control state</p>
|
||||
<div className="space-y-2">
|
||||
<div className="p-3 rounded-lg bg-white/5 border border-white/10">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-medium">2026-02-22</span>
|
||||
<span className="text-xs text-green-400">✓ Saved</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-3 rounded-lg bg-white/5 border border-white/10">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-medium">2026-02-21</span>
|
||||
<span className="text-xs text-green-400">✓ Saved</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-3 rounded-lg bg-white/5 border border-white/10">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-medium">2026-02-20</span>
|
||||
<span className="text-xs text-green-400">✓ Saved</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-3 rounded-lg bg-white/5 border border-white/10 opacity-50">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-medium">2026-02-19</span>
|
||||
<span className="text-xs text-white/40">-</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs text-white/40 mt-4 text-center">
|
||||
Snapshots taken daily at midnight. Max 7 days retained.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{currentItem?.category === "docs" && (
|
||||
<div className="rounded-xl border border-white/10 bg-white/5 p-6">
|
||||
<h3 className="text-lg font-semibold mb-4">📚 Documentation</h3>
|
||||
<p className="text-white/60 mb-4">Long-term docs and guides</p>
|
||||
<div className="space-y-3">
|
||||
<a href="/mission-control/docs" target="_blank" className="flex items-center gap-3 p-3 rounded-lg bg-white/5 hover:bg-white/10 transition">
|
||||
<span className="text-2xl">📖</span>
|
||||
<div><p className="font-medium">Docs Index</p><p className="text-xs text-white/50">All documentation</p></div>
|
||||
</a>
|
||||
<a href="https://github.com/HaithamEKhalifa/SiteMente" target="_blank" className="flex items-center gap-3 p-3 rounded-lg bg-white/5 hover:bg-white/10 transition">
|
||||
<span className="text-2xl">🐙</span>
|
||||
<div><p className="font-medium">GitHub Repo</p><p className="text-xs text-white/50">Source code & issues</p></div>
|
||||
</a>
|
||||
<a href="https://sitemente.com" target="_blank" className="flex items-center gap-3 p-3 rounded-lg bg-white/5 hover:bg-white/10 transition">
|
||||
<span className="text-2xl">🌐</span>
|
||||
<div><p className="font-medium">Live Site</p><p className="text-xs text-white/50">sitemente.com</p></div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Task Cards View */}
|
||||
{currentItem?.category === "task-cards" && (
|
||||
<TaskCardsPanel tasks={tasks} toggleTask={toggleTask} />
|
||||
)}
|
||||
|
||||
{/* Task History View */}
|
||||
{currentItem?.category === "task-history" && (
|
||||
<TaskHistoryPanel />
|
||||
)}
|
||||
{currentItem?.category === "demos" && (
|
||||
<div className="rounded-xl border border-white/10 bg-white/5 p-6">
|
||||
<div className="text-center py-8">
|
||||
<div className="text-5xl mb-4">🎨</div>
|
||||
<h3 className="text-xl font-bold mb-2">Demo Pages</h3>
|
||||
<p className="text-white/60 mb-6">Vertical demo pages for SiteMente</p>
|
||||
<div className="flex flex-wrap justify-center gap-3">
|
||||
<a href="/demos" target="_blank" className="px-4 py-2 bg-brand-pink rounded-lg text-sm font-medium hover:bg-[#ff7bc0] transition">🌐 All Demos</a>
|
||||
<a href="/demos?vertical=real-estate" target="_blank" className="px-4 py-2 bg-green-500/20 border border-green-500/30 rounded-lg text-sm hover:bg-green-500/30 transition">🏠 Real Estate</a>
|
||||
<a href="/demos?vertical=restaurant" target="_blank" className="px-4 py-2 bg-yellow-500/20 border border-yellow-500/30 rounded-lg text-sm hover:bg-yellow-500/30 transition">🍽️ Restaurant</a>
|
||||
<a href="/demos?vertical=clinic" target="_blank" className="px-4 py-2 bg-cyan-500/20 border border-cyan-500/30 rounded-lg text-sm hover:bg-cyan-500/30 transition">⚕️ Clinic</a>
|
||||
<a href="/demos?vertical=home-services" target="_blank" className="px-4 py-2 bg-purple-500/20 border border-purple-500/30 rounded-lg text-sm hover:bg-purple-500/30 transition">🔧 Home Services</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{currentItem?.category === "leads" && (
|
||||
<div className="rounded-xl border border-white/10 bg-white/5 p-6">
|
||||
<div className="text-center py-8">
|
||||
<div className="text-5xl mb-4">📈</div>
|
||||
<h3 className="text-xl font-bold mb-2">Leads CRM</h3>
|
||||
<p className="text-white/60 mb-6">Track and manage your leads</p>
|
||||
<div className="flex flex-wrap justify-center gap-3">
|
||||
<a href="/leads" target="_blank" className="px-4 py-2 bg-brand-pink rounded-lg text-sm font-medium hover:bg-[#ff7bc0] transition">📈 Open Leads CRM</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{currentItem?.category === "hp-submissions" && (
|
||||
<div className="rounded-xl border border-white/10 bg-white/5 p-6">
|
||||
<div className="text-center py-8">
|
||||
<div className="text-5xl mb-4">📬</div>
|
||||
<h3 className="text-xl font-bold mb-2">HP Submissions</h3>
|
||||
<p className="text-white/60 mb-6">HostPioneers contact form submissions</p>
|
||||
<div className="flex flex-wrap justify-center gap-3">
|
||||
<a href="/mission-control/hp-submissions" target="_blank" className="px-4 py-2 bg-brand-pink rounded-lg text-sm font-medium hover:bg-[#ff7bc0] transition">📬 View Submissions</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{currentItem?.category === "dashboard" && (
|
||||
<div className="rounded-xl border border-white/10 bg-white/5 p-6">
|
||||
<div className="text-center py-8">
|
||||
<div className="text-5xl mb-4">🏢</div>
|
||||
<h3 className="text-xl font-bold mb-2">Client Dashboard</h3>
|
||||
<p className="text-white/60 mb-6">Where your clients see bookings & leads</p>
|
||||
<div className="flex flex-wrap justify-center gap-3">
|
||||
<a href="/dashboard" target="_blank" className="px-4 py-2 bg-brand-pink rounded-lg text-sm font-medium hover:bg-[#ff7bc0] transition">🏢 Open Dashboard Demo</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
{currentItem?.category === "projects" && (
|
||||
<>
|
||||
{todayTasks.length > 0 && (
|
||||
<div className="mb-6 p-4 rounded-xl border border-brand-pink/30 bg-brand-pink/10">
|
||||
<p className="text-xs text-brand-pink font-medium mb-2">🎯 TODAY'S FOCUS</p>
|
||||
<div className="space-y-2">{todayTasks.map(task => (
|
||||
<div key={task.id} className="flex items-center gap-2 text-sm">
|
||||
<span className={`w-2 h-2 rounded-full ${task.status === "in_progress" ? "bg-yellow-400" : "bg-red-400"}`} />
|
||||
<span className="truncate">{task.title}</span>
|
||||
</div>
|
||||
))}</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="flex-1 relative">
|
||||
<span className="absolute left-3 top-1/2 -translate-y-1/2 text-white/40">🔍</span>
|
||||
<input id="search-input" type="text" value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} placeholder="Search tasks... (press /)" className="w-full bg-white/10 border border-white/20 rounded-lg pl-9 pr-4 py-2 text-sm placeholder:text-white/40 focus:outline-none focus:border-brand-pink" />
|
||||
</div>
|
||||
<button onClick={() => setShowAddTask(!showAddTask)} className="px-4 py-2 bg-brand-pink rounded-lg text-sm font-medium hover:bg-[#ff7bc0] transition">+ Add</button>
|
||||
<button onClick={exportTasks} className="px-3 py-2 bg-white/10 rounded-lg text-sm hover:bg-white/20 transition">📥</button>
|
||||
</div>
|
||||
{showAddTask && (
|
||||
<div className="mb-4 p-4 rounded-xl border border-brand-pink/30 bg-brand-pink/5">
|
||||
<input type="text" value={newTaskTitle} onChange={(e) => setNewTaskTitle(e.target.value)} placeholder="New task title..." className="w-full bg-white/10 border border-white/20 rounded-lg px-4 py-2 text-sm placeholder:text-white/40 focus:outline-none focus:border-brand-pink mb-3" autoFocus onKeyDown={(e) => e.key === "Enter" && handleAddTask()} />
|
||||
<div className="flex items-center gap-2">
|
||||
<select value={newTaskProject} onChange={(e) => setNewTaskProject(e.target.value)} className="bg-white/10 border border-white/20 rounded-lg px-3 py-1.5 text-sm">
|
||||
<option value="sitemente">SiteMente</option>
|
||||
<option value="holacompi">HolaCompi</option>
|
||||
<option value="arabredox">Arabredox</option>
|
||||
<option value="infrastructure">Infrastructure</option>
|
||||
<option value="hookd">Hookd</option>
|
||||
</select>
|
||||
<button onClick={handleAddTask} className="px-4 py-1.5 bg-brand-pink rounded-lg text-sm font-medium">Add Task</button>
|
||||
<button onClick={() => setShowAddTask(false)} className="px-3 py-1.5 text-sm text-white/60 hover:text-white">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="mb-4 grid grid-cols-4 gap-3">
|
||||
{(["todo", "in_progress", "done", "blocked"] as TaskStatus[]).map((status) => {
|
||||
const count = projectTasks.filter((t) => t.status === status).length;
|
||||
const config = statusConfig[status];
|
||||
return (
|
||||
<button key={status} onClick={() => setFilter(filter === status ? "all" : status)} className={`rounded-xl border p-3 text-center transition ${filter === status ? "border-white/40 bg-white/10" : "border-white/10 bg-white/5 hover:border-white/20"}`}>
|
||||
<p className={`text-xl font-bold ${config.color}`}>{count}</p>
|
||||
<p className="text-xs text-white/50">{config.label}</p>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="rounded-xl border border-white/10 bg-white/5">
|
||||
<div className="border-b border-white/10 px-4 py-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="font-semibold">{currentItem?.name}{searchQuery && <span className="ml-2 text-white/50 text-sm">({searchedTasks.length} results)</span>}</h2>
|
||||
<p className="text-sm text-white/50">{filteredTasks.filter((t) => t.status === "done").length} / {filteredTasks.length} done</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="divide-y divide-white/5 max-h-[500px] overflow-y-auto">
|
||||
{searchedTasks.map((task) => (
|
||||
<div key={task.id} className={`flex items-center gap-3 px-4 py-3 transition hover:bg-white/5 ${task.status === "done" ? "opacity-50" : ""}`}>
|
||||
<button onClick={() => toggleTask(task.id)} className={`flex-shrink-0 w-5 h-5 rounded-full border-2 flex items-center justify-center transition ${task.status === "done" ? "border-green-500 bg-green-500 text-white" : "border-white/30 hover:border-white/50"}`}>
|
||||
{task.status === "done" && <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" /></svg>}
|
||||
</button>
|
||||
<div className="flex-1 min-w-0"><p className={`text-sm font-medium truncate ${task.status === "done" ? "line-through text-white/50" : ""}`}>{task.title}</p></div>
|
||||
{task.priority === "critical" && <span className="px-2 py-0.5 rounded-full bg-red-500/20 text-red-400 text-xs">CRITICAL</span>}
|
||||
<select value={task.status} onChange={(e) => updateTaskStatus(task.id, e.target.value as TaskStatus)} className="text-xs bg-transparent border border-white/20 rounded px-2 py-1">
|
||||
<option value="todo">To Do</option><option value="in_progress">In Progress</option><option value="done">Done</option><option value="blocked">Blocked</option>
|
||||
</select>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{searchedTasks.length === 0 && <div className="px-4 py-8 text-center text-white/50 text-sm">No tasks match.</div>}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{currentItem?.category === "hookd" && (
|
||||
<div className="rounded-xl border border-white/10 bg-white/5 p-6">
|
||||
<div className="text-center py-8">
|
||||
<div className="text-5xl mb-4">📌</div>
|
||||
<h3 className="text-xl font-bold mb-2">Hookd</h3>
|
||||
<p className="text-white/60 mb-6">Save, organize and AI-sort your X content</p>
|
||||
<div className="flex flex-wrap justify-center gap-3 mb-4">
|
||||
<a href="/extensions/hookd" target="_blank" className="px-4 py-2 bg-indigo-600 rounded-lg text-sm font-medium hover:bg-indigo-700 transition">📥 Download Extension</a>
|
||||
<a href="https://github.com/HaithamEKhalifa/hookd" target="_blank" className="px-4 py-2 bg-white/10 rounded-lg text-sm hover:bg-white/20 transition">🐙 GitHub</a>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4 max-w-md mx-auto mt-6 text-left">
|
||||
<div className="bg-white/5 rounded-lg p-3">
|
||||
<span className="text-lg">📥</span>
|
||||
<p className="text-xs text-white/60 mt-1">DM Organizer</p>
|
||||
</div>
|
||||
<div className="bg-white/5 rounded-lg p-3">
|
||||
<span className="text-lg">🐦</span>
|
||||
<p className="text-xs text-white/60 mt-1">Feed Saver</p>
|
||||
</div>
|
||||
<div className="bg-white/5 rounded-lg p-3">
|
||||
<span className="text-lg">🤖</span>
|
||||
<p className="text-xs text-white/60 mt-1">AI Processing</p>
|
||||
</div>
|
||||
<div className="bg-white/5 rounded-lg p-3">
|
||||
<span className="text-lg">🏷️</span>
|
||||
<p className="text-xs text-white/60 mt-1">Custom Tags</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,546 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
interface Agent {
|
||||
id: string;
|
||||
name: string;
|
||||
role: string;
|
||||
symbol: string;
|
||||
status: "active" | "idle" | "busy" | "offline";
|
||||
currentTask: string;
|
||||
location: string;
|
||||
templeArea: string;
|
||||
tasksCompleted: number;
|
||||
}
|
||||
|
||||
interface TempleRoom {
|
||||
id: string;
|
||||
name: string;
|
||||
agent: Agent | null;
|
||||
status: "active" | "inactive";
|
||||
description: string;
|
||||
}
|
||||
|
||||
const ANVEVOICE_API_KEY = "anvk_6a217415c671b8e613df1f0b37f72c492a91b625";
|
||||
const CLEOPATRA_BOT_ID = "022ae3d3-ed11-45a9-b663-f4a6dfa34f77";
|
||||
|
||||
export default function TempleOfAIDashboard() {
|
||||
const [activeRoom, setActiveRoom] = useState<string>("sanctuary");
|
||||
const [anvevoiceStats, setAnvevoiceStats] = useState<any>(null);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
// Egyptian Agents
|
||||
const agents: Agent[] = [
|
||||
{ id: "horus", name: "Horus", role: "Master Orchestrator", symbol: "👁️", status: "active", currentTask: "Monitoring all systems", location: "Sanctuary", templeArea: "Head", tasksCompleted: 847 },
|
||||
{ id: "cleopatra", name: "Cleopatra", role: "Voice AI / Sales", symbol: "👑", status: "active", currentTask: "Conversing with visitor", location: "Hall 2", templeArea: "Voice Lab", tasksCompleted: 234 },
|
||||
{ id: "anubis", name: "Anubis", role: "Outreach / Lead Gen", symbol: "🐕", status: "busy", currentTask: "Qualifying lead #4521", location: "Entrance", templeArea: "Reception", tasksCompleted: 156 },
|
||||
{ id: "thoth", name: "Thoth", role: "Research / Strategy", symbol: "🐦", status: "idle", currentTask: "Analyzing market trends", location: "Pylon 2", templeArea: "Research", tasksCompleted: 89 },
|
||||
{ id: "ptah", name: "Ptah", role: "Development / Ops", symbol: "🔨", status: "active", currentTask: "Deploying SiteMente v2.1", location: "Courtyard", templeArea: "Workspace", tasksCompleted: 312 },
|
||||
{ id: "seshat", name: "Seshat", role: "Content / SEO", symbol: "📝", status: "idle", currentTask: "Writing blog post", location: "Courtyard", templeArea: "Workspace", tasksCompleted: 445 },
|
||||
{ id: "sekhmet", name: "Sekhmet", role: "Trading / Risk", symbol: "🦁", status: "active", currentTask: "Monitoring BTC position", location: "Courtyard", templeArea: "Trading", tasksCompleted: 67 },
|
||||
{ id: "maat", name: "Maat", role: "Quality Assurance", symbol: "⚖️", status: "idle", currentTask: "Reviewing code quality", location: "Pylon 3", templeArea: "QA Lab", tasksCompleted: 198 },
|
||||
];
|
||||
|
||||
const templeRooms: TempleRoom[] = [
|
||||
{ id: "sanctuary", name: "Holy of Holies", agent: agents[0], status: "active", description: "Horus commands from the golden throne. The Eye of Providence sees all." },
|
||||
{ id: "hall2", name: "Hall of Queens", agent: agents[1], status: "active", description: "Cleopatra's voice echoes through the halls. Visitors feel welcomed." },
|
||||
{ id: "pylon3", name: "Pylon of Maat", agent: agents[7], status: "active", description: "The Feather of Truth guards quality standards." },
|
||||
{ id: "pylon2", name: "Pylon of Thoth", agent: agents[3], status: "active", description: "Sacred knowledge flows through ibis-headed archives." },
|
||||
{ id: "hypostyle", name: "Hypostyle Hall", agent: null, status: "active", description: "The great meeting hall. Columns reach to heaven." },
|
||||
{ id: "courtyard", name: "Courtyard", agent: null, status: "active", description: "Ptah builds, Seshat writes, Sekhmet trades. The heart beats strong." },
|
||||
{ id: "entrance", name: "Avenue of Sphinxes", agent: agents[2], status: "active", description: "Anubis greets visitors. No soul passes unseen." },
|
||||
];
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
switch(status) {
|
||||
case "active": return "bg-green-500";
|
||||
case "busy": return "bg-yellow-500";
|
||||
case "idle": return "bg-blue-500";
|
||||
case "offline": return "bg-gray-500";
|
||||
default: return "bg-gray-500";
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusText = (status: string) => {
|
||||
switch(status) {
|
||||
case "active": return "Working";
|
||||
case "busy": return "On Task";
|
||||
case "idle": return "Ready";
|
||||
case "offline": return "Offline";
|
||||
default: return status;
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// Fetch AnveVoice stats
|
||||
const fetchStats = async () => {
|
||||
try {
|
||||
const res = await fetch("/api/anvevoice-stats");
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
setAnvevoiceStats(data);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Failed to fetch AnveVoice stats");
|
||||
}
|
||||
};
|
||||
fetchStats();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-amber-950 via-stone-900 to-amber-950 p-6">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-amber-200 via-yellow-400 to-amber-200 mb-2">
|
||||
🏛️ TEMPLE OF AI
|
||||
</h1>
|
||||
<p className="text-amber-300/80 text-lg">
|
||||
Where Ancient Wisdom Meets Machine Intelligence
|
||||
</p>
|
||||
<div className="flex justify-center gap-4 mt-4">
|
||||
<span className="px-4 py-1 bg-amber-500/20 text-amber-300 rounded-full text-sm border border-amber-500/30">
|
||||
🟢 {agents.filter(a => a.status === "active").length} Active
|
||||
</span>
|
||||
<span className="px-4 py-1 bg-yellow-500/20 text-yellow-300 rounded-full text-sm border border-yellow-500/30">
|
||||
🟡 {agents.filter(a => a.status === "busy").length} Busy
|
||||
</span>
|
||||
<span className="px-4 py-1 bg-blue-500/20 text-blue-300 rounded-full text-sm border border-blue-500/30">
|
||||
🔵 {agents.filter(a => a.status === "idle").length} Ready
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Temple Visualization */}
|
||||
<div className="max-w-7xl mx-auto grid lg:grid-cols-3 gap-6">
|
||||
|
||||
{/* Left Column - Temple Map */}
|
||||
<div className="lg:col-span-1">
|
||||
<div className="bg-stone-900/80 backdrop-blur rounded-2xl border border-amber-500/20 p-6">
|
||||
<h2 className="text-xl font-bold text-amber-200 mb-4 flex items-center gap-2">
|
||||
🗺️ Temple Map
|
||||
</h2>
|
||||
|
||||
{/* Vertical Temple Layout */}
|
||||
<div className="space-y-2">
|
||||
{/* Sanctuary */}
|
||||
<div
|
||||
onClick={() => setActiveRoom("sanctuary")}
|
||||
className={`p-3 rounded-xl border-2 cursor-pointer transition-all ${
|
||||
activeRoom === "sanctuary"
|
||||
? "border-yellow-400 bg-yellow-500/20"
|
||||
: "border-amber-700/50 bg-stone-800/50 hover:border-amber-500"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-2xl">👁️</span>
|
||||
<div>
|
||||
<p className="font-bold text-amber-200">HOLY OF HOLIES</p>
|
||||
<p className="text-xs text-amber-400/60">{agents[0].name} - {agents[0].role}</p>
|
||||
</div>
|
||||
<span className={`w-3 h-3 rounded-full ${getStatusColor(agents[0].status)} ml-auto`}></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Hall 2 */}
|
||||
<div className="flex items-center justify-center">
|
||||
<div className="w-0 h-0 border-l-8 border-r-8 border-t-8 border-l-transparent border-r-transparent border-t-amber-600"></div>
|
||||
</div>
|
||||
<div
|
||||
onClick={() => setActiveRoom("hall2")}
|
||||
className={`p-3 rounded-xl border-2 cursor-pointer transition-all ${
|
||||
activeRoom === "hall2"
|
||||
? "border-yellow-400 bg-yellow-500/20"
|
||||
: "border-amber-700/50 bg-stone-800/50 hover:border-amber-500"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-2xl">👑</span>
|
||||
<div>
|
||||
<p className="font-bold text-amber-200">HALL OF QUEENS</p>
|
||||
<p className="text-xs text-amber-400/60">{agents[1].name} - Voice AI</p>
|
||||
</div>
|
||||
<span className={`w-3 h-3 rounded-full ${getStatusColor(agents[1].status)} ml-auto`}></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Pylon 3 */}
|
||||
<div className="flex items-center justify-center">
|
||||
<div className="w-8 h-4 bg-amber-800 rounded-sm"></div>
|
||||
</div>
|
||||
<div
|
||||
onClick={() => setActiveRoom("pylon3")}
|
||||
className={`p-3 rounded-xl border-2 cursor-pointer transition-all ${
|
||||
activeRoom === "pylon3"
|
||||
? "border-yellow-400 bg-yellow-500/20"
|
||||
: "border-amber-700/50 bg-stone-800/50 hover:border-amber-500"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-2xl">⚖️</span>
|
||||
<div>
|
||||
<p className="font-bold text-amber-200">PYLON OF MAAT</p>
|
||||
<p className="text-xs text-amber-400/60">{agents[7].name} - Quality</p>
|
||||
</div>
|
||||
<span className={`w-3 h-3 rounded-full ${getStatusColor(agents[7].status)} ml-auto`}></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Pylon 2 */}
|
||||
<div className="flex items-center justify-center">
|
||||
<div className="w-8 h-4 bg-amber-800 rounded-sm"></div>
|
||||
</div>
|
||||
<div
|
||||
onClick={() => setActiveRoom("pylon2")}
|
||||
className={`p-3 rounded-xl border-2 cursor-pointer transition-all ${
|
||||
activeRoom === "pylon2"
|
||||
? "border-yellow-400 bg-yellow-500/20"
|
||||
: "border-amber-700/50 bg-stone-800/50 hover:border-amber-500"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-2xl">🐦</span>
|
||||
<div>
|
||||
<p className="font-bold text-amber-200">PYLON OF THOTH</p>
|
||||
<p className="text-xs text-amber-400/60">{agents[3].name} - Research</p>
|
||||
</div>
|
||||
<span className={`w-3 h-3 rounded-full ${getStatusColor(agents[3].status)} ml-auto`}></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Hypostyle Hall */}
|
||||
<div className="flex items-center justify-center">
|
||||
<div className="w-8 h-4 bg-amber-700 rounded-sm"></div>
|
||||
</div>
|
||||
<div
|
||||
onClick={() => setActiveRoom("hypostyle")}
|
||||
className={`p-3 rounded-xl border-2 cursor-pointer transition-all ${
|
||||
activeRoom === "hypostyle"
|
||||
? "border-yellow-400 bg-yellow-500/20"
|
||||
: "border-amber-700/50 bg-stone-800/50 hover:border-amber-500"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-2xl">⛫</span>
|
||||
<div>
|
||||
<p className="font-bold text-amber-200">HYPOSTYLE HALL</p>
|
||||
<p className="text-xs text-amber-400/60">Conference - Standups</p>
|
||||
</div>
|
||||
<span className="w-3 h-3 rounded-full bg-green-500 ml-auto"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Courtyard */}
|
||||
<div className="flex items-center justify-center">
|
||||
<div className="w-8 h-4 bg-amber-600 rounded-sm"></div>
|
||||
</div>
|
||||
<div
|
||||
onClick={() => setActiveRoom("courtyard")}
|
||||
className={`p-3 rounded-xl border-2 cursor-pointer transition-all ${
|
||||
activeRoom === "courtyard"
|
||||
? "border-yellow-400 bg-yellow-500/20"
|
||||
: "border-amber-700/50 bg-stone-800/50 hover:border-amber-500"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-2xl">🏛️</span>
|
||||
<div>
|
||||
<p className="font-bold text-amber-200">COURTYARD</p>
|
||||
<p className="text-xs text-amber-400/60">Ptah 🔨 | Seshat 📝 | Sekhmet 🦁</p>
|
||||
</div>
|
||||
<span className="w-3 h-3 rounded-full bg-green-500 ml-auto"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Entrance */}
|
||||
<div className="flex items-center justify-center">
|
||||
<div className="w-8 h-4 bg-amber-500 rounded-sm"></div>
|
||||
</div>
|
||||
<div
|
||||
onClick={() => setActiveRoom("entrance")}
|
||||
className={`p-3 rounded-xl border-2 cursor-pointer transition-all ${
|
||||
activeRoom === "entrance"
|
||||
? "border-yellow-400 bg-yellow-500/20"
|
||||
: "border-amber-700/50 bg-stone-800/50 hover:border-amber-500"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-2xl">🐕</span>
|
||||
<div>
|
||||
<p className="font-bold text-amber-200">AVENUE OF SPHINXES</p>
|
||||
<p className="text-xs text-amber-400/60">{agents[2].name} - Reception</p>
|
||||
</div>
|
||||
<span className={`w-3 h-3 rounded-full ${getStatusColor(agents[2].status)} ml-auto`}></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Center Column - Active Room Details */}
|
||||
<div className="lg:col-span-1">
|
||||
<div className="bg-stone-900/80 backdrop-blur rounded-2xl border border-amber-500/20 p-6">
|
||||
<h2 className="text-xl font-bold text-amber-200 mb-4">
|
||||
{templeRooms.find(r => r.id === activeRoom)?.name}
|
||||
</h2>
|
||||
|
||||
<div className="space-y-4">
|
||||
{activeRoom === "sanctuary" && (
|
||||
<>
|
||||
<div className="text-center py-8">
|
||||
<span className="text-8xl">👁️</span>
|
||||
<h3 className="text-2xl font-bold text-yellow-400 mt-4">HORUS</h3>
|
||||
<p className="text-amber-300">Master Orchestrator</p>
|
||||
</div>
|
||||
<div className="bg-yellow-500/10 rounded-xl p-4 border border-yellow-500/30">
|
||||
<p className="text-yellow-200 font-medium">🗣️ Current Task:</p>
|
||||
<p className="text-amber-300 mt-1">{agents[0].currentTask}</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="bg-stone-800/50 rounded-lg p-3 text-center">
|
||||
<p className="text-2xl font-bold text-yellow-400">847</p>
|
||||
<p className="text-xs text-amber-400/60">Tasks Done</p>
|
||||
</div>
|
||||
<div className="bg-stone-800/50 rounded-lg p-3 text-center">
|
||||
<p className="text-2xl font-bold text-green-400">99.9%</p>
|
||||
<p className="text-xs text-amber-400/60">Uptime</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{activeRoom === "hall2" && (
|
||||
<>
|
||||
<div className="text-center py-8">
|
||||
<span className="text-8xl">👑</span>
|
||||
<h3 className="text-2xl font-bold text-yellow-400 mt-4">CLEOPATRA</h3>
|
||||
<p className="text-amber-300">Voice AI / Sales</p>
|
||||
<div className="mt-2 inline-flex items-center gap-2 px-3 py-1 bg-green-500/20 rounded-full border border-green-500/30">
|
||||
<span className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></span>
|
||||
<span className="text-green-300 text-sm">Live on AnveVoice</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-purple-500/10 rounded-xl p-4 border border-purple-500/30">
|
||||
<p className="text-purple-200 font-medium">🗣️ Welcome Message:</p>
|
||||
<p className="text-amber-300 mt-1 italic">"Hola! Soy Cleopatra, tu asistente de ventas de HostPioneers. Como puedo ayudarte hoy?"</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="bg-stone-800/50 rounded-lg p-3 text-center">
|
||||
<p className="text-2xl font-bold text-purple-400">234</p>
|
||||
<p className="text-xs text-amber-400/60">Conversations</p>
|
||||
</div>
|
||||
<div className="bg-stone-800/50 rounded-lg p-3 text-center">
|
||||
<p className="text-2xl font-bold text-green-400">89%</p>
|
||||
<p className="text-xs text-amber-400/60">Lead Capture</p>
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
href="https://anvevoice.com/dashboard"
|
||||
target="_blank"
|
||||
className="block w-full py-3 bg-purple-600 hover:bg-purple-500 text-center rounded-xl font-bold text-white transition-colors"
|
||||
>
|
||||
📊 View AnveVoice Dashboard
|
||||
</a>
|
||||
</>
|
||||
)}
|
||||
|
||||
{activeRoom === "courtyard" && (
|
||||
<>
|
||||
<div className="text-center py-4">
|
||||
<span className="text-6xl">🏛️</span>
|
||||
<h3 className="text-xl font-bold text-yellow-400 mt-4">THE WORKING HEART</h3>
|
||||
<p className="text-amber-300">Where the heart beats strong</p>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-3 bg-stone-800/50 rounded-lg p-3">
|
||||
<span className="text-2xl">🔨</span>
|
||||
<div className="flex-1">
|
||||
<p className="font-bold text-amber-200">Ptah - Dev/Ops</p>
|
||||
<p className="text-xs text-amber-400/60">{agents[5].currentTask}</p>
|
||||
</div>
|
||||
<span className={`w-2 h-2 rounded-full ${getStatusColor(agents[5].status)}`}></span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 bg-stone-800/50 rounded-lg p-3">
|
||||
<span className="text-2xl">📝</span>
|
||||
<div className="flex-1">
|
||||
<p className="font-bold text-amber-200">Seshat - Content</p>
|
||||
<p className="text-xs text-amber-400/60">{agents[6].currentTask}</p>
|
||||
</div>
|
||||
<span className={`w-2 h-2 rounded-full ${getStatusColor(agents[6].status)}`}></span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 bg-stone-800/50 rounded-lg p-3">
|
||||
<span className="text-2xl">🦁</span>
|
||||
<div className="flex-1">
|
||||
<p className="font-bold text-amber-200">Sekhmet - Trading</p>
|
||||
<p className="text-xs text-amber-400/60">{agents[7].currentTask}</p>
|
||||
</div>
|
||||
<span className={`w-2 h-2 rounded-full ${getStatusColor(agents[7].status)}`}></span>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{activeRoom === "hypostyle" && (
|
||||
<>
|
||||
<div className="text-center py-8">
|
||||
<span className="text-8xl">⛫</span>
|
||||
<h3 className="text-2xl font-bold text-yellow-400 mt-4">MEETING HALL</h3>
|
||||
<p className="text-amber-300">Where decisions are made</p>
|
||||
</div>
|
||||
<div className="bg-stone-800/50 rounded-xl p-4">
|
||||
<h4 className="text-amber-200 font-medium mb-3">📅 Next Standup</h4>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-2xl">⏰</span>
|
||||
<div>
|
||||
<p className="text-white font-medium">9:00 AM - Daily Standup</p>
|
||||
<p className="text-amber-400/60 text-sm">All agents gather</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-stone-800/50 rounded-xl p-4">
|
||||
<h4 className="text-amber-200 font-medium mb-3">📋 Sprint Status</h4>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-amber-300">Progress</span>
|
||||
<span className="text-green-400">72%</span>
|
||||
</div>
|
||||
<div className="w-full bg-stone-700 rounded-full h-2">
|
||||
<div className="bg-green-500 h-2 rounded-full" style={{ width: "72%" }}></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{activeRoom === "entrance" && (
|
||||
<>
|
||||
<div className="text-center py-8">
|
||||
<span className="text-8xl">🐕</span>
|
||||
<h3 className="text-2xl font-bold text-yellow-400 mt-4">ANUBIS</h3>
|
||||
<p className="text-amber-300">Guardian of Leads</p>
|
||||
</div>
|
||||
<div className="bg-stone-800/50 rounded-xl p-4">
|
||||
<h4 className="text-amber-200 font-medium mb-3">🎯 Lead Pipeline</h4>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-amber-300">New Today</span>
|
||||
<span className="text-yellow-400">23</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-amber-300">Qualified</span>
|
||||
<span className="text-green-400">8</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-amber-300">Conversion</span>
|
||||
<span className="text-blue-400">34%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{(activeRoom === "pylon2" || activeRoom === "pylon3") && (
|
||||
<>
|
||||
<div className="text-center py-8">
|
||||
<span className="text-8xl">{activeRoom === "pylon2" ? "🐦" : "⚖️"}</span>
|
||||
<h3 className="text-2xl font-bold text-yellow-400 mt-4">
|
||||
{activeRoom === "pylon2" ? "THOTH" : "MAAT"}
|
||||
</h3>
|
||||
<p className="text-amber-300">
|
||||
{activeRoom === "pylon2" ? "Knowledge Keeper" : "Quality Guardian"}
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-stone-800/50 rounded-xl p-4">
|
||||
<h4 className="text-amber-200 font-medium mb-3">
|
||||
{activeRoom === "pylon2" ? "🔬 Research" : "✓ Quality Metrics"}
|
||||
</h4>
|
||||
<div className="space-y-2">
|
||||
{activeRoom === "pylon2" ? (
|
||||
<>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-amber-300">Market Analysis</span>
|
||||
<span className="text-green-400">Complete</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-amber-300">Competitor Report</span>
|
||||
<span className="text-yellow-400">In Progress</span>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-amber-300">Code Coverage</span>
|
||||
<span className="text-green-400">94%</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-amber-300">Bugs Fixed</span>
|
||||
<span className="text-blue-400">12</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column - All Agents */}
|
||||
<div className="lg:col-span-1">
|
||||
<div className="bg-stone-900/80 backdrop-blur rounded-2xl border border-amber-500/20 p-6">
|
||||
<h2 className="text-xl font-bold text-amber-200 mb-4">
|
||||
👥 Divine Council
|
||||
</h2>
|
||||
|
||||
<div className="space-y-3">
|
||||
{agents.map(agent => (
|
||||
<div
|
||||
key={agent.id}
|
||||
className="bg-stone-800/50 rounded-xl p-3 hover:bg-stone-700/50 transition-colors cursor-pointer"
|
||||
onClick={() => setActiveRoom(agent.location === "Entrance" ? "entrance" : agent.location === "Hall 2" ? "hall2" : agent.location === "Pylon 2" ? "pylon2" : agent.location === "Pylon 3" ? "pylon3" : agent.location === "Courtyard" ? "courtyard" : "sanctuary")}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-2xl">{agent.symbol}</span>
|
||||
<div className="flex-1">
|
||||
<p className="font-bold text-amber-200">{agent.name}</p>
|
||||
<p className="text-xs text-amber-400/60">{agent.role}</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<span className={`w-2 h-2 rounded-full ${getStatusColor(agent.status)} inline-block`}></span>
|
||||
<p className="text-xs text-amber-400/60 mt-1">{getStatusText(agent.status)}</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs text-amber-300/60 mt-2 ml-9 truncate">
|
||||
{agent.currentTask}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Cleopatra's Voice Widget */}
|
||||
<div className="mt-6 pt-6 border-t border-amber-500/20">
|
||||
<h3 className="text-lg font-bold text-purple-300 mb-3">🎙️ Cleopatra Voice</h3>
|
||||
<div className="bg-purple-900/30 rounded-xl p-4 border border-purple-500/20">
|
||||
<p className="text-purple-200 text-sm mb-3">Test Cleopatra's voice AI on AnveVoice:</p>
|
||||
<a
|
||||
href="https://anvevoice.com/dashboard"
|
||||
target="_blank"
|
||||
className="block w-full py-2 bg-purple-600 hover:bg-purple-500 text-center rounded-lg font-medium text-white text-sm transition-colors"
|
||||
>
|
||||
Open Voice Dashboard
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="text-center mt-8 text-amber-400/40 text-sm">
|
||||
<p>🏛️ Temple of AI - Ancient Wisdom Meets Machine Intelligence</p>
|
||||
<p className="mt-1">Powered by HostPioneers | Built on OpenClaw & AnveVoice</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user