horus
45af56d9cf
Also added: - Memory API endpoints - Briefs API endpoints - AnveVoice stats API - Claude spawn API - TTS proxy - Cleopatra voice widget - api-auth middleware
547 lines
27 KiB
TypeScript
547 lines
27 KiB
TypeScript
"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>
|
||
);
|
||
}
|