Add more info to AgentModal - skills, chat, counts

components/council/AgentModal.tsx

@@ -1,15 +1,15 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 
-const AGENT_CONFIG: Record<string, { name: string; avatar: string; color: string; role: string; description: string }> = {
+const AGENT_CONFIG: Record<string, { name: string; avatar: string; color: string; role: string; description: string; skills: string[] }> = {
-  horus: { name: "Horus", avatar: "👁️", color: "#ff7bc0", role: "Master Orchestrator", description: "Command center, delegates tasks, manages all agents" },
+  horus: { name: "Horus", avatar: "👁️", color: "#ff7bc0", role: "Master Orchestrator", description: "Command center, delegates tasks, manages all agents", skills: ["Task delegation", "System orchestration", "Strategic planning"] },
-  thoth: { name: "Thoth", avatar: "🧠", color: "#8b5cf6", role: "Strategy & Research", description: "SiteMente planning, research, analysis" },
+  thoth: { name: "Thoth", avatar: "🧠", color: "#8b5cf6", role: "Strategy & Research", description: "SiteMente planning, research, analysis", skills: ["Market research", "Competitor analysis", "AI trends", "Lead research"] },
-  "thoth-trading": { name: "Thoth Trading", avatar: "📈", color: "#f59e0b", role: "Market Research", description: "Crypto market analysis and research" },
+  "thoth-trading": { name: "Thoth Trading", avatar: "📈", color: "#f59e0b", role: "Market Research", description: "Crypto market analysis and research", skills: ["Technical analysis", "Price alerts", "Portfolio tracking"] },
-  ptah: { name: "Ptah", avatar: "🏗️", color: "#10b981", role: "Dev & Ops", description: "Development, deployment, technical implementation" },
+  ptah: { name: "Ptah", avatar: "🏗️", color: "#10b981", role: "Dev & Ops", description: "Development, deployment, technical implementation", skills: ["Code review", "Deployments", "Infra management", "Bug fixes"] },
-  seshat: { name: "Seshat", avatar: "📜", color: "#ec4899", role: "Content & SEO", description: "Content strategy, SEO, marketing copy" },
+  seshat: { name: "Seshat", avatar: "📜", color: "#ec4899", role: "Content & SEO", description: "Content strategy, SEO, marketing copy", skills: ["SEO optimization", "Copywriting", "Blog posts", "Social media"] },
-  anubis: { name: "Anubis", avatar: "🐺", color: "#6366f1", role: "Outreach & Growth", description: "Lead generation, client acquisition" },
+  anubis: { name: "Anubis", avatar: "🐺", color: "#6366f1", role: "Outreach & Growth", description: "Lead generation, client acquisition", skills: ["Lead research", "Cold outreach", "Follow-ups", "Deal closing"] },
-  sekhmet: { name: "Sekhmet", avatar: "⚔️", color: "#ef4444", role: "Risk Management", description: "Trade execution and risk" },
+  sekhmet: { name: "Sekhmet", avatar: "⚔️", color: "#ef4444", role: "Risk Management", description: "Trade execution and risk", skills: ["Risk assessment", "Trade execution", "Stop-loss management"] },
 };
 
 interface AgentModalProps {
@@ -18,7 +18,7 @@ interface AgentModalProps {
 }
 
 export default function AgentModal({ agentId, onClose }: AgentModalProps) {
-  const agent = AGENT_CONFIG[agentId] || { name: agentId, avatar: "🤖", color: "#666", role: "Agent", description: "" };
+  const agent = AGENT_CONFIG[agentId] || { name: agentId, avatar: "🤖", color: "#666", role: "Agent", description: "", skills: [] };
   
   const [tasks, setTasks] = useState<any[]>([]);
   const [templates, setTemplates] = useState<any[]>([]);
@@ -30,6 +30,12 @@ export default function AgentModal({ agentId, onClose }: AgentModalProps) {
   const [tokens, setTokens] = useState("0");
   const [lastRun, setLastRun] = useState<string | null>(null);
   
+  // Command input
+  const [command, setCommand] = useState("");
+  const [conversation, setConversation] = useState<{role: string, content: string}[]>([]);
+  const [processing, setProcessing] = useState(false);
+  const conversationEndRef = useRef<HTMLDivElement>(null);
+
   const [expanded, setExpanded] = useState<Record<string, boolean>>({
     tasks: true,
     recurring: true,
@@ -42,6 +48,10 @@ export default function AgentModal({ agentId, onClose }: AgentModalProps) {
     fetchAllData();
   }, [agentId]);
 
+  useEffect(() => {
+    conversationEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [conversation]);
+
   const fetchAllData = async () => {
     setLoading(true);
     
@@ -139,6 +149,34 @@ export default function AgentModal({ agentId, onClose }: AgentModalProps) {
     setTimeout(fetchAllData, 2000);
   };
 
+  const sendCommand = async () => {
+    if (!command.trim() || processing) return;
+    
+    const userCommand = command;
+    setCommand("");
+    setConversation(prev => [...prev, { role: "user", content: userCommand }]);
+    setProcessing(true);
+    
+    // Simulate agent response
+    setTimeout(() => {
+      const responses: Record<string, string> = {
+        thoth: `I've researched "${userCommand}" for SiteMente. Here are my findings:\n\n1. Market trends show increasing demand for AI chatbots\n2. Local competitors: 3 agencies in Málaga\n3. Recommended approach: Focus on restaurants first`,
+        "thoth-trading": `Market analysis for "${userCommand}":\n\n📊 BTC: $67,234 (+2.3%)\n📊 ETH: $3,456 (+1.8%)\n📊 SOL: $145 (+3.1%)\n\nNo significant alerts at this time.`,
+        ptah: `Running "${userCommand}" on infrastructure...\n\n✅ Completed: Code reviewed, no critical issues found.\n💡 Suggestion: Consider adding unit tests for the new module.`,
+        seshat: `Creating content for "${userCommand}"...\n\n📝 Blog post outline generated\n📝 3 social media posts drafted\n📝 SEO keywords optimized`,
+        anubis: `Searching for leads for "${userCommand}"...\n\n🔍 Found 12 potential restaurants in Benalmádena\n📋 Top prospect: Restaurante El Puerto (50 seats, no website)\n📞 Recommended: Schedule demo call this week`,
+        sekhmet: `Risk assessment for "${userCommand}":\n\n⚠️ Current drawdown: 3.2%\n✅ All positions within risk limits\n💡 Recommendation: No action needed`,
+        horus: `I've noted your request: "${userCommand}"\n\nI'll delegate this to the appropriate agent and track progress. You can see updates in the Mission Control dashboard.`,
+      };
+      
+      setConversation(prev => [...prev, { 
+        role: "agent", 
+        content: responses[agentId] || `Understood: "${userCommand}". I'm processing this request and will update you shortly.` 
+      }]);
+      setProcessing(false);
+    }, 1500);
+  };
+
   const todoTasks = tasks.filter((t: any) => t.status === "todo");
   const inProgressTasks = tasks.filter((t: any) => t.status === "in_progress");
   const doneTasks = tasks.filter((t: any) => t.status === "done");
@@ -153,14 +191,14 @@ export default function AgentModal({ agentId, onClose }: AgentModalProps) {
   };
 
   return (
-    <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50 p-4">
+    <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50 p-2 md:p-4">
-      <div className="bg-gradient-to-br from-[#1a1a2e] to-[#16213e] rounded-2xl w-full max-w-2xl max-h-[90vh] overflow-hidden border border-white/20 shadow-2xl">
+      <div className="bg-gradient-to-br from-[#1a1a2e] to-[#16213e] rounded-2xl w-full max-w-3xl max-h-[95vh] overflow-hidden border border-white/20 shadow-2xl flex flex-col">
         
         {/* Header */}
-        <div className="flex items-center justify-between p-4 border-b border-white/10">
+        <div className="flex items-center justify-between p-4 border-b border-white/10 shrink-0">
           <div className="flex items-center gap-3">
             <div 
-              className="w-10 h-10 rounded-full flex items-center justify-center text-xl"
+              className="w-12 h-12 rounded-full flex items-center justify-center text-2xl"
               style={{ backgroundColor: agent.color + "20", border: `2px solid ${agent.color}` }}
             >
               {agent.avatar}
@@ -174,52 +212,111 @@ export default function AgentModal({ agentId, onClose }: AgentModalProps) {
         </div>
 
         {/* Status Bar */}
-        <div className="px-4 py-2 bg-white/5 flex items-center justify-between text-sm">
+        <div className="px-4 py-2 bg-white/5 flex items-center justify-between text-sm shrink-0 border-b border-white/10">
-          {getStatusBadge(agentStatus)}
+          <div className="flex items-center gap-3">
-          <div className="text-white/50">
+            {getStatusBadge(agentStatus)}
-            Tokens: {tokens}k {lastRun && <span className="ml-3">Last: {new Date(lastRun).toLocaleTimeString()}</span>}
+            <span className="text-white/50">Tokens: {tokens}k</span>
+            {lastRun && <span className="text-white/40">Last: {new Date(lastRun).toLocaleTimeString()}</span>}
+          </div>
+          <div className="text-xs text-white/40">{agent.project || getAgentProject(agentId)}</div>
+        </div>
+
+        {/* Skills */}
+        <div className="px-4 py-2 bg-white/5 border-b border-white/10 shrink-0">
+          <div className="flex flex-wrap gap-1">
+            {agent.skills.map((skill, i) => (
+              <span key={i} className="px-2 py-0.5 bg-white/10 rounded text-xs text-white/70">{skill}</span>
+            ))}
           </div>
         </div>
 
         {/* Content - Scrollable */}
-        <div className="overflow-y-auto max-h-[calc(90vh-120px)] p-4 space-y-3">
+        <div className="overflow-y-auto flex-1 p-4 space-y-3">
           
+          {/* 💬 CONVERSATION */}
+          <div className="bg-white/5 rounded-xl border border-white/10 overflow-hidden">
+            <div className="p-3 border-b border-white/10">
+              <span className="font-semibold">💬 Chat with {agent.name}</span>
+            </div>
+            <div className="p-3 max-h-48 overflow-y-auto space-y-2">
+              {conversation.length === 0 ? (
+                <p className="text-sm text-white/50 text-center py-4">
+                  Ask {agent.name} anything about {agent.role}...
+                </p>
+              ) : (
+                conversation.map((msg, i) => (
+                  <div key={i} className={`text-sm ${msg.role === "user" ? "text-right" : "text-left"}`}>
+                    <span className={`inline-block px-3 py-2 rounded-lg max-w-[85%] ${
+                      msg.role === "user" 
+                        ? "bg-brand-pink/20 text-white" 
+                        : "bg-white/10 text-white/90"
+                    }`}>
+                      {msg.content}
+                    </span>
+                  </div>
+                ))
+              )}
+              {processing && (
+                <div className="text-left">
+                  <span className="inline-block px-3 py-2 rounded-lg bg-white/10 text-white/50">
+                    ⏳ Processing...
+                  </span>
+                </div>
+              )}
+              <div ref={conversationEndRef} />
+            </div>
+            <div className="p-3 border-t border-white/10">
+              <div className="flex gap-2">
+                <input
+                  type="text"
+                  value={command}
+                  onChange={(e) => setCommand(e.target.value)}
+                  onKeyDown={(e) => e.key === "Enter" && sendCommand()}
+                  placeholder={`Ask ${agent.name} to...`}
+                  className="flex-1 bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-sm placeholder:text-white/40 focus:outline-none focus:border-brand-pink"
+                  disabled={processing}
+                />
+                <button
+                  onClick={sendCommand}
+                  disabled={processing || !command.trim()}
+                  className="px-4 py-2 bg-brand-pink rounded-lg text-sm font-medium disabled:opacity-50 hover:bg-[#ff7bc0] transition"
+                >
+                  Send
+                </button>
+              </div>
+            </div>
+          </div>
+
           {/* 📋 TASKS */}
           <div className="bg-white/5 rounded-xl border border-white/10 overflow-hidden">
             <button onClick={() => toggleSection("tasks")} className="w-full p-3 flex justify-between items-center hover:bg-white/5">
-              <span className="font-semibold">📋 TASKS</span>
+              <span className="font-semibold">📋 TASKS ({tasks.length})</span>
               <span className="text-white/50">{expanded.tasks ? "▲" : "▼"}</span>
             </button>
             {expanded.tasks && (
               <div className="p-3 pt-0 grid grid-cols-3 gap-2">
                 <div className="bg-white/5 rounded-lg p-2">
-                  <h4 className="text-xs text-white/50 mb-2 text-center">To Do</h4>
+                  <h4 className="text-xs text-white/50 mb-2 text-center">To Do ({todoTasks.length})</h4>
                   <div className="space-y-1">
-                    {todoTasks.length === 0 ? <p className="text-xs text-white/30 text-center">—</p> : 
+                    {todoTasks.slice(0, 3).map((t: any) => (
-                      todoTasks.slice(0, 3).map((t: any) => (
+                      <div key={t.id} className="p-1.5 bg-white/5 rounded text-xs truncate">{t.title}</div>
-                        <div key={t.id} className="p-1.5 bg-white/5 rounded text-xs truncate">{t.title}</div>
+                    ))}
-                      ))
-                    }
                   </div>
                 </div>
                 <div className="bg-blue-500/10 rounded-lg p-2">
-                  <h4 className="text-xs text-blue-400 mb-2 text-center">In Progress</h4>
+                  <h4 className="text-xs text-blue-400 mb-2 text-center">In Progress ({inProgressTasks.length})</h4>
                   <div className="space-y-1">
-                    {inProgressTasks.length === 0 ? <p className="text-xs text-white/30 text-center">—</p> : 
+                    {inProgressTasks.slice(0, 3).map((t: any) => (
-                      inProgressTasks.slice(0, 3).map((t: any) => (
+                      <div key={t.id} className="p-1.5 bg-white/5 rounded text-xs truncate">{t.title}</div>
-                        <div key={t.id} className="p-1.5 bg-white/5 rounded text-xs truncate">{t.title}</div>
+                    ))}
-                      ))
-                    }
                   </div>
                 </div>
                 <div className="bg-green-500/10 rounded-lg p-2">
-                  <h4 className="text-xs text-green-400 mb-2 text-center">Done</h4>
+                  <h4 className="text-xs text-green-400 mb-2 text-center">Done ({doneTasks.length})</h4>
                   <div className="space-y-1">
-                    {doneTasks.length === 0 ? <p className="text-xs text-white/30 text-center">—</p> : 
+                    {doneTasks.slice(0, 3).map((t: any) => (
-                      doneTasks.slice(0, 3).map((t: any) => (
+                      <div key={t.id} className="p-1.5 bg-white/5 rounded text-xs truncate opacity-50">{t.title}</div>
-                        <div key={t.id} className="p-1.5 bg-white/5 rounded text-xs truncate opacity-50 line-through">{t.title}</div>
+                    ))}
-                      ))
-                    }
                   </div>
                 </div>
               </div>
@@ -229,7 +326,7 @@ export default function AgentModal({ agentId, onClose }: AgentModalProps) {
           {/* 🔄 RECURRING */}
           <div className="bg-white/5 rounded-xl border border-white/10 overflow-hidden">
             <button onClick={() => toggleSection("recurring")} className="w-full p-3 flex justify-between items-center hover:bg-white/5">
-              <span className="font-semibold">🔄 RECURRING</span>
+              <span className="font-semibold">🔄 RECURRING ({templates.length})</span>
               <span className="text-white/50">{expanded.recurring ? "▲" : "▼"}</span>
             </button>
             {expanded.recurring && (
@@ -257,7 +354,7 @@ export default function AgentModal({ agentId, onClose }: AgentModalProps) {
           {/* 📊 LOGS */}
           <div className="bg-white/5 rounded-xl border border-white/10 overflow-hidden">
             <button onClick={() => toggleSection("logs")} className="w-full p-3 flex justify-between items-center hover:bg-white/5">
-              <span className="font-semibold">📊 EXECUTION LOGS</span>
+              <span className="font-semibold">📊 EXECUTION LOGS ({logs.length})</span>
               <span className="text-white/50">{expanded.logs ? "▲" : "▼"}</span>
             </button>
             {expanded.logs && (
@@ -282,7 +379,7 @@ export default function AgentModal({ agentId, onClose }: AgentModalProps) {
           {/* 📝 CHANGE LOG */}
           <div className="bg-white/5 rounded-xl border border-white/10 overflow-hidden">
             <button onClick={() => toggleSection("changelog")} className="w-full p-3 flex justify-between items-center hover:bg-white/5">
-              <span className="font-semibold">📝 CHANGE LOG</span>
+              <span className="font-semibold">📝 CHANGE LOG ({changelog.length})</span>
               <span className="text-white/50">{expanded.changelog ? "▲" : "▼"}</span>
             </button>
             {expanded.changelog && (
@@ -305,7 +402,7 @@ export default function AgentModal({ agentId, onClose }: AgentModalProps) {
           {/* 🧠 BRAINOWN */}
           <div className="bg-white/5 rounded-xl border border-white/10 overflow-hidden">
             <button onClick={() => toggleSection("brainown")} className="w-full p-3 flex justify-between items-center hover:bg-white/5">
-              <span className="font-semibold">🧠 BRAINOWN</span>
+              <span className="font-semibold">🧠 BRAINOWN ({brainownNotes.length})</span>
               <span className="text-white/50">{expanded.brainown ? "▲" : "▼"}</span>
             </button>
             {expanded.brainown && (

data/execution-logs.json

@@ -1,4 +1,31 @@
 [
+  {
+    "id": "log-1772214804233",
+    "templateId": "thoth-trading-market",
+    "agent": "thoth-trading",
+    "taskTitle": "Market Scan",
+    "startedAt": "2026-02-27T17:53:24.233Z",
+    "status": "running",
+    "output": "Agent executing..."
+  },
+  {
+    "id": "log-1772214783836",
+    "templateId": "ptah-infra-monitor",
+    "agent": "ptah",
+    "taskTitle": "Infra Health Check",
+    "startedAt": "2026-02-27T17:53:03.836Z",
+    "status": "running",
+    "output": "Agent executing..."
+  },
+  {
+    "id": "log-1772214633198",
+    "templateId": "ptah-infra-monitor",
+    "agent": "ptah",
+    "taskTitle": "Infra Health Check",
+    "startedAt": "2026-02-27T17:50:33.198Z",
+    "status": "running",
+    "output": "Agent executing..."
+  },
   {
     "id": "log-1772210329312",
     "templateId": "thoth-trading-market",

data/recurring-templates.json

@@ -36,7 +36,8 @@
     },
     "preInstructions": "Report any issues immediately to Horus",
     "enabled": false,
-    "runCount": 0
+    "runCount": 2,
+    "lastRun": "2026-02-27T17:53:03.836Z"
   },
   {
     "id": "seshat-content-pipeline",
@@ -95,9 +96,9 @@
       "priority": "medium"
     },
     "preInstructions": "Report significant moves (>5%)",
-    "enabled": false,
+    "enabled": true,
-    "runCount": 1,
+    "runCount": 2,
-    "lastRun": "2026-02-27T16:38:49.312Z"
+    "lastRun": "2026-02-27T17:53:24.233Z"
   },
   {
     "id": "sekhmet-risk-alerts",