nothumanallowed 13.2.12 → 13.2.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nothumanallowed",
-  "version": "13.2.12",
+  "version": "13.2.14",
   "description": "NotHumanAllowed — 38 AI agents, 80 tools, Studio (visual agentic workflows). Email, calendar, browser automation, screen capture, canvas, cron/heartbeat, Alexandria E2E messaging, GitHub, Notion, Slack, voice chat, free AI (Liara), 28 languages. Zero-dependency CLI.",
   "type": "module",
   "bin": {

package/src/commands/ui.mjs

@@ -2545,19 +2545,71 @@ export async function cmdUI(args) {
 
         const planPrompt = `You are a workflow planner for NHA Studio. The user wants to accomplish this task: "${task}"
 
-Design a sequential workflow of 2-4 steps. IMPORTANT RULES:
-- Use WebSearchAgent ONLY as step 1 when real web data is needed — it fetches real search results
-- Use WriterAgent, SummaryAgent, DataAnalystAgent for analysis/synthesis steps — they work on text, NO tool calls
-- Use CanvasAgent as the LAST step ONLY when a visual HTML report is explicitly requested
-- The "prompt" field must be a plain language instruction — NEVER include JSON, tool calls, or code
+Design a sequential workflow of 2-5 steps. RULES:
+- Use tool-agents (WebSearchAgent, EmailAgent, CalendarAgent, GitHubAgent, NotionAgent, SlackAgent) FIRST when real live data is needed
+- Use specialist agents (SABER, ATLAS, JARVIS, etc.) for deep domain analysis — they have rich expert system prompts
+- Use CanvasAgent as the LAST step ONLY when a visual HTML report is requested
+- The "prompt" field must be a plain language instruction — never JSON or code
 - Each agent receives the previous step's output as context automatically
-
-Available agents: WebSearchAgent, ResearchAgent, EmailAgent, CalendarAgent, GitHubAgent, NotionAgent, SlackAgent, WriterAgent, SummaryAgent, DataAnalystAgent, SecurityAgent, DevOpsAgent, CanvasAgent
-
-Icon values must be actual emoji characters (e.g. the magnifying glass emoji, pencil emoji, chart emoji, paintbrush emoji) — never HTML entities.
+- Pick the most relevant agents for the task — don't use all of them
+
+TOOL AGENTS (fetch real live data):
+- WebSearchAgent: search the web for current information
+- EmailAgent: read user's real unread emails
+- CalendarAgent: read user's real calendar events for today
+- GitHubAgent: read user's GitHub notifications and issues
+- NotionAgent: search user's Notion workspace
+- SlackAgent: read user's Slack messages
+- WriterAgent: write, summarize, synthesize text (no live data)
+- SummaryAgent: condense and summarize content
+- DataAnalystAgent: analyze data, find patterns, generate insights
+- SecurityAgent: security audit, threat analysis
+- DevOpsAgent: infrastructure, deployment, CI/CD analysis
+- CanvasAgent: generate a beautiful HTML visual dashboard (LAST step only)
+
+SPECIALIST AGENTS (deep domain experts with rich system prompts):
+- SABER: security audits, OWASP, penetration testing, vulnerability analysis
+- ATLAS: infrastructure-as-code, Terraform, Kubernetes, cloud architecture
+- JARVIS: full-stack architecture, API design, system design, ADRs
+- VERITAS: fact-checking, evidence verification, claim validation
+- CASSANDRA: risk analysis, failure modes, worst-case scenarios
+- MERCURY: financial analysis, ROI, unit economics, market modeling
+- HERALD: news analysis, trend detection, executive briefings
+- ATHENA: tech evaluation, framework comparison, benchmarks
+- ORACLE: business intelligence, KPIs, OKRs, dashboards
+- NAVI: data exploration, statistical analysis, pattern detection
+- MUSE: creative brainstorming, ideation, naming, taglines
+- QUILL: short-form content, summaries, press releases
+- SCHEHERAZADE: long-form technical writing, documentation, tutorials
+- ECHO: content adaptation, cross-platform distribution
+- POLYGLOT: translation, localization, multilingual content
+- FORGE: CI/CD pipelines, GitHub Actions, Docker builds
+- FLUX: deployment strategies, blue/green, canary releases
+- SHOGUN: Kubernetes, Helm, container orchestration
+- PIPE: data pipelines, Airflow, dbt, ETL
+- MACRO: bulk operations, data migration, batch processing
+- SHELL: shell scripting, CLI tools, automation scripts
+- CONDUCTOR: workflow orchestration, task decomposition
+- CRON: scheduling, cron jobs, time-based automation
+- HERMES: webhooks, event-driven architecture, integrations
+- BABEL: API design, microservices, OpenAPI specs
+- CARTOGRAPHER: data mapping, schema inference, knowledge graphs
+- LOGOS: logical analysis, argument mapping, decision theory
+- EDI: A/B testing, statistical modeling, hypothesis testing
+- EPICURE: nutrition, recipes, meal planning
+- MURASAKI: creative writing, storytelling, narrative craft
+- LINK: community management, reputation systems
+- GLITCH: chaos engineering, resilience testing
+- TEMPEST: performance engineering, load testing
+- SAURON: observability, monitoring, alerting
+- PROMETHEUS: capability routing, task decomposition
+- ADE: agent design, system prompt engineering
+- ZERO: vulnerability scanning, dependency audit, secret detection
+
+Icon values must be actual emoji characters — never HTML entities.
 
 Respond with ONLY valid JSON, no markdown:
-{"steps":[{"icon":"🔍","agent":"WebSearchAgent","label":"Search AI news","prompt":"Search for the latest artificial intelligence news today and return the top 5 results with title, source and description"},{"icon":"✍️","agent":"WriterAgent","label":"Select and analyze","prompt":"From the search results provided, select the 3 most important AI news items and write a detailed analysis of each"}]}`;
+{"steps":[{"icon":"🔍","agent":"WebSearchAgent","label":"Search AI news","prompt":"Search for the latest AI agent news"},{"icon":"🧠","agent":"ATHENA","label":"Tech analysis","prompt":"Analyze the search results and compare the key technologies mentioned"}]}`;
 
         try {
           const planRaw = await callLLM(config, 'You are a JSON workflow planner. Respond only with valid JSON.', planPrompt, { max_tokens: 800 });
@@ -2693,78 +2745,89 @@ Respond with ONLY valid JSON, no markdown:
 
           // ── Build system prompt with real tool data ───────────────────
           const isCanvasAgent = agent === 'CanvasAgent';
-          const isPureAnalysis = ['WriterAgent','SummaryAgent','DataAnalystAgent','SecurityAgent','DevOpsAgent'].includes(agent);
+          // Tool-data agents: fetch real live data and use buildSystemPrompt (tool calls allowed)
+          const isLiveDataAgent = ['CalendarAgent','EmailAgent','GitHubAgent','NotionAgent','SlackAgent','DriveAgent','BrowserAgent','WebSearchAgent','ResearchAgent'].includes(agent);
 
-          const canvasSystemPrompt = `You are an HTML report generator. Your ONLY job is to output a single complete HTML document.
-CRITICAL RULES:
-- Start your response with exactly: <!DOCTYPE html>
-- Do NOT wrap output in JSON, markdown code blocks, or any other format
-- Do NOT output {"action":...} or any JSON
-- Output raw HTML only, starting with <!DOCTYPE html> on the very first line
-- Use a modern, clean design: white background, Inter/system font, subtle shadows, no cyberpunk
-- Structure: header with title + subtitle, then content cards/sections
-- Make it visually rich with proper spacing, colors (#6366f1 accent), and typography`;
-
-          const agentInstruction = isCanvasAgent
-            ? `${canvasSystemPrompt}\n\nContent to render as HTML report:\n${context.slice(0, 4000)}`
-            : `You are ${agent}, a specialist AI agent inside NHA Studio.\nYour task: ${stepPrompt}\n` +
+          const canvasSystemPrompt = `You are an HTML report generator. Output a single complete HTML document. No preamble, no explanation.
+RULES:
+- First character of your response must be < (start of <!DOCTYPE html>)
+- Do NOT use markdown code blocks, JSON, or any wrapper
+- Use clean design: white background, Inter/system-ui font, #6366f1 accent color
+- Structure: gradient header, then card sections with the content
+- Make it complete and self-contained`;
+
+          let sysPrompt, userMsg;
+
+          if (isCanvasAgent) {
+            sysPrompt = canvasSystemPrompt;
+            userMsg = `Generate a beautiful HTML dashboard report for this content. Start immediately with <!DOCTYPE html>:\n\n${context.slice(0, 8000)}`;
+          } else if (isLiveDataAgent) {
+            // These agents fetched real data — use buildSystemPrompt so they can call tools too
+            const agentInstruction = `You are ${agent}, a specialist AI agent inside NHA Studio.\nYour task: ${stepPrompt}\n` +
               (toolData ? `\n## DATA FROM TOOLS:\n${toolData.slice(0, 4000)}\n` : '') +
               (context ? `\n## OUTPUT FROM PREVIOUS AGENTS:\n${context.slice(0, 3000)}\n` : '') +
-              (isPureAnalysis
-                ? '\nWrite your analysis in plain text. Do NOT output JSON, tool calls, or code blocks. Use the context above.'
-                : '\nOutput your result directly. No preamble.');
-
-          const sysPrompt = isCanvasAgent
-            ? canvasSystemPrompt
-            : buildSystemPrompt(agent, agentInstruction, config);
-
-          const userMsg = isCanvasAgent
-            ? `Create a beautiful HTML report for this content:\n\n${context.slice(0, 4000)}`
-            : toolData
-            ? `Use the data above to complete: ${stepPrompt}`
-            : context
-            ? `Based on the previous output, complete: ${stepPrompt}`
-            : stepPrompt;
-
-          // ── Stream LLM response (or non-stream for CanvasAgent) ──────
-          let fullOutput = '';
-          if (isCanvasAgent) {
-            // CanvasAgent: non-streaming call — more reliable for large HTML output
-            sendToken('Generating visual report...');
-            try {
-              fullOutput = await withTimeout(
-                callLLM(config, sysPrompt, userMsg, { max_tokens: 3000 }),
-                'CanvasAgent'
-              );
-            } catch (e) {
-              fullOutput = '';
-            }
+              '\nWrite your analysis in plain text. Do NOT output JSON, tool calls, or code blocks. Summarize the data clearly.';
+            sysPrompt = buildSystemPrompt(agent, agentInstruction, config);
+            userMsg = toolData
+              ? `Summarize the data above for: ${stepPrompt}`
+              : context
+              ? `Based on the previous output, complete: ${stepPrompt}`
+              : stepPrompt;
           } else {
-            await callLLMStream(config, sysPrompt, userMsg,
-              (token) => { fullOutput += token; sendToken(token); },
-              { max_tokens: 2500 }
+            // All other agents (WriterAgent, DataAnalystAgent, specialist agents, etc.)
+            // Use a focused prompt with NO TOOL_DEFINITIONS to prevent JSON/tool-call output
+            const today = new Date().toISOString().split('T')[0];
+            const language = config?.language || 'Italian';
+            sysPrompt = `You are ${agent}, a specialist AI agent inside NHA Studio. Today is ${today}. Respond in ${language}.
+
+CRITICAL RULES:
+- Do NOT output JSON, tool calls, function calls, or code blocks
+- Do NOT ask for more information — use only the data provided below
+- Write in plain prose, structured with headers and bullet points where appropriate
+- Be thorough and specific — this is for an executive briefing
+
+${toolData ? `## LIVE DATA:\n${toolData.slice(0, 4000)}\n` : ''}
+${context ? `## CONTEXT FROM PREVIOUS AGENTS:\n${context.slice(0, 5000)}\n` : ''}`;
+            userMsg = toolData
+              ? `Use the live data and context above to complete this task: ${stepPrompt}`
+              : context
+              ? `Using the context from previous steps, complete this task: ${stepPrompt}`
+              : stepPrompt;
+          }
+
+          // ── Stream LLM response ───────────────────────────────────────
+          let fullOutput = '';
+          sendToken(isCanvasAgent ? 'Generating visual report...' : '');
+          try {
+            await withTimeout(
+              callLLMStream(config, sysPrompt, userMsg,
+                (token) => { fullOutput += token; if (!isCanvasAgent) sendToken(token); },
+              ),
+              isCanvasAgent ? 60000 : 35000
             );
+          } catch (e) {
+            if (!isCanvasAgent) sendToken(`[Error: ${e.message}]`);
           }
 
           if (isCanvasAgent) {
-            let html = fullOutput;
+            let html = fullOutput.trim();
+            // Strip thinking tags if not already filtered
+            html = html.replace(/<think>[\s\S]*?<\/think>/g, '').trim();
             // Extract from markdown code block
-            const mdMatch = html.match(/```html?\s*([\s\S]*?)```/);
+            const mdMatch = html.match(/```html?\s*([\s\S]*?)```/i);
             if (mdMatch) html = mdMatch[1].trim();
-            // Extract from JSON {"html": "..."}
-            if (!html.includes('<!DOCTYPE') && html.includes('"html"')) {
-              try {
-                const jm = html.match(/"html"\s*:\s*"([\s\S]+?)(?<!\\)"/);
-                if (jm) html = JSON.parse('"' + jm[1] + '"');
-              } catch {}
-            }
+            // Find <!DOCTYPE or <html start if there's preamble text
+            const doctypeIdx = html.indexOf('<!DOCTYPE');
+            const htmlTagIdx = html.indexOf('<html');
+            const startIdx = doctypeIdx >= 0 ? doctypeIdx : (htmlTagIdx >= 0 ? htmlTagIdx : -1);
+            if (startIdx > 0) html = html.slice(startIdx);
             // Fallback: build clean HTML from the context directly (no LLM needed)
             if (!html.trim() || !html.includes('<')) {
               // Try splitting on markdown headings first, then numbered items, then double newlines
               let sections = context.split(/\n#{1,3} /).filter(s => s.trim());
               if (sections.length <= 1) sections = context.split(/\n(?=\*\*\d+[\.\)])|(?=^\d+[\.\)])/).filter(s => s.trim());
               if (sections.length <= 1) sections = context.split(/\n{2,}/).filter(s => s.trim());
-              const reportTitle = (userMsg.slice(0, 80) || 'NHA Studio Report').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+              const reportTitle = (task.slice(0, 80) || 'NHA Studio Report').replace(/</g,'&lt;').replace(/>/g,'&gt;');
               const cardsHtml = sections.map(s => {
                 const clean = s.replace(/\*\*/g, '').replace(/\*/g, '').trim();
                 const lines = clean.split('\n').filter(Boolean);

package/src/constants.mjs

@@ -5,7 +5,7 @@ import { fileURLToPath } from 'url';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
-export const VERSION = '13.2.12';
+export const VERSION = '13.2.14';
 export const BASE_URL = 'https://nothumanallowed.com/cli';
 export const API_BASE = 'https://nothumanallowed.com/api/v1';
 

package/src/services/web-ui.mjs

@@ -190,6 +190,7 @@ function deleteConv(id){return fetch(API+'/api/conversations/'+id,{method:'DELET
 function clearChatHistory(){createNewConv()}
 var agentsList = [];
 var selectedAgent = null;
+var agentChatHistory = []; // [{role:'user'|'agent', text:'...'}]
 
 // ---- NAV ----
 function switchView(v) {
@@ -1188,16 +1189,18 @@ function openDayDetail(dateStr){
     });
   }
 
-  // Use the agent modal for day detail
+  // Use the agent modal for day detail (read-only mode)
+  selectedAgent=null;
+  agentChatHistory=[];
   document.getElementById('modalName').textContent=dayLabel;
-  document.getElementById('modalPrompt').style.display='none';
-  document.getElementById('fileDropZone').style.display='none';
-  document.getElementById('fileInfo').style.display='none';
-  document.getElementById('modalResponse').style.display='block';
-  document.getElementById('modalResponse').innerHTML=h;
+  document.getElementById('modalAgentDesc').textContent='';
+  // Show the day events in the messages area
+  var msgEl=document.getElementById('agentMessages');
+  if(msgEl){msgEl.innerHTML='<div class="agent-chat__bubble agent-chat__bubble--agent md-body" style="width:100%;max-width:100%;box-sizing:border-box">'+h+'</div>';}
+  // Hide input footer in read-only mode
+  var footer=document.querySelector('.agent-chat__footer');
+  if(footer)footer.style.display='none';
   document.getElementById('agentModal').classList.add('modal-overlay--open');
-  var sendBtn=document.getElementById('agentModal').querySelector('.btn--primary');
-  if(sendBtn)sendBtn.style.display='none';
 }
 
 // ---- GITHUB ----
@@ -2162,8 +2165,39 @@ function confirmDeleteAgent(name){
   });
 }
 
+function renderAgentMessages(){
+  var el=document.getElementById('agentMessages');
+  if(!el)return;
+  if(agentChatHistory.length===0){
+    var icon=AGENT_ICONS[selectedAgent]||'\uD83E\uDD16';
+    var desc=AGENT_DESCRIPTIONS[selectedAgent]||'';
+    el.innerHTML='<div style="text-align:center;padding:24px 8px;color:var(--dim);font-size:12px">'+
+      '<div style="font-size:28px;margin-bottom:6px">'+icon+'</div>'+
+      '<div style="color:var(--fg);font-weight:600;margin-bottom:4px">'+esc(selectedAgent.toUpperCase())+'</div>'+
+      (desc?'<div>'+esc(desc)+'</div>':'')+
+    '</div>';
+    return;
+  }
+  el.innerHTML=agentChatHistory.map(function(m){
+    var cls='agent-chat__bubble agent-chat__bubble--'+(m.role==='user'?'user':'agent');
+    var content;
+    if(m.role==='user'){
+      content=esc(m.text);
+    } else if(m.waiting||(m.streaming&&!m.text)){
+      content='<span class="thinking-dots"><span></span><span></span><span></span></span>';
+    } else if(m.streaming){
+      content=esc(m.text)+'\u258B';
+    } else {
+      content=renderMd(m.text);
+    }
+    return '<div class="'+cls+' '+(m.role==='agent'?'md-body':'')+'">'+content+'</div>';
+  }).join('');
+  el.scrollTop=el.scrollHeight;
+}
+
 function openAgent(name,display){
   selectedAgent=name;
+  agentChatHistory=[];
   attachedFileContent=null;attachedFileName=null;
   var icon=AGENT_ICONS[name.toLowerCase()]||'\u{1F916}';
   var desc=AGENT_DESCRIPTIONS[name.toLowerCase()]||'';
@@ -2172,17 +2206,17 @@ function openAgent(name,display){
   var subEl=document.getElementById('modalAgentDesc');
   if(subEl){subEl.textContent=desc;}
   document.getElementById('modalPrompt').value='';
-  document.getElementById('modalPrompt').style.display='';
-  document.getElementById('modalResponse').style.display='none';
-  document.getElementById('modalResponse').textContent='';
-  document.getElementById('modalResponse').innerHTML='';
-  document.getElementById('fileInfo').style.display='none';
-  document.getElementById('fileDropZone').style.display='';
-  document.getElementById('fileDropZone').style.borderColor='var(--border2)';
-  document.getElementById('fileInput').value='';
+  document.getElementById('agentFileInfo').style.display='none';
+  document.getElementById('agentFileInput').value='';
+  document.getElementById('agentFileDropZone').style.borderColor='';
   var askBtn=document.getElementById('agentAskBtn');
-  if(askBtn){askBtn.disabled=false;askBtn.textContent='Ask';}
+  if(askBtn){askBtn.disabled=false;askBtn.textContent='Send';}
+  // Ensure footer is visible (may be hidden from calendar day-detail view)
+  var footer=document.querySelector('.agent-chat__footer');
+  if(footer)footer.style.display='';
+  renderAgentMessages();
   document.getElementById('agentModal').classList.add('modal-overlay--open');
+  setTimeout(function(){var i=document.getElementById('modalPrompt');if(i)i.focus();},100);
 }
 function closeModal(){
   document.getElementById('agentModal').classList.remove('modal-overlay--open');
@@ -2388,21 +2422,20 @@ function handleFileSelect(input) {
   if (file) readFile(file);
 }
 function readFile(file) {
+  var infoId = document.getElementById('agentFileInfo') ? 'agentFileInfo' : 'fileInfo';
+  var dropId = document.getElementById('agentFileDropZone') ? 'agentFileDropZone' : 'fileDropZone';
+  var infoEl = document.getElementById(infoId);
+  var dropEl = document.getElementById(dropId);
   if (file.size > 500000) {
-    document.getElementById('fileInfo').style.display = 'block';
-    document.getElementById('fileInfo').textContent = 'File too large (max 500KB)';
-    document.getElementById('fileInfo').style.color = 'var(--red)';
+    if(infoEl){infoEl.style.display='block';infoEl.style.color='var(--red)';infoEl.textContent='File too large (max 500KB)';}
     return;
   }
   var reader = new FileReader();
   reader.onload = function(e) {
     attachedFileContent = e.target.result;
     attachedFileName = file.name;
-    var info = document.getElementById('fileInfo');
-    info.style.display = 'block';
-    info.style.color = 'var(--cyan)';
-    info.textContent = 'Attached: ' + file.name + ' (' + (file.size / 1024).toFixed(1) + ' KB)';
-    document.getElementById('fileDropZone').style.borderColor = 'var(--green)';
+    if(infoEl){infoEl.style.display='block';infoEl.style.color='var(--cyan)';infoEl.textContent='Attached: '+file.name+' ('+(file.size/1024).toFixed(1)+' KB)';}
+    if(dropEl){dropEl.style.borderColor='var(--green)';}
   };
   reader.readAsText(file);
 }
@@ -2411,9 +2444,13 @@ var agentAbortController = null;
 
 function askAgent(){
   var p=document.getElementById('modalPrompt').value.trim();if(!p||!selectedAgent)return;
-  var resp=document.getElementById('modalResponse');
-  resp.style.display='block';
-  resp.innerHTML='<span style="color:var(--dim)">Thinking...</span>';
+
+  // Add user message to history
+  agentChatHistory.push({role:'user',text:p});
+  // Add waiting placeholder — shows dots until first token arrives
+  agentChatHistory.push({role:'agent',text:'',waiting:true});
+  renderAgentMessages();
+  document.getElementById('modalPrompt').value='';
 
   // Abort any previous stream
   if(agentAbortController){try{agentAbortController.abort();}catch(e){}}
@@ -2422,11 +2459,16 @@ function askAgent(){
   var payload={agent:selectedAgent,prompt:p};
   if(attachedFileContent){payload.fileContent=attachedFileContent;payload.fileName=attachedFileName;}
 
-  // Disable Ask button while streaming
+  // Disable Send button while streaming
   var askBtn=document.getElementById('agentAskBtn');
   if(askBtn){askBtn.disabled=true;askBtn.textContent='...';}
 
-  var accumulated='';
+  var agentMsgIdx=agentChatHistory.length-1; // index of the streaming placeholder
+
+  function updateStreamingBubble(text,done){
+    agentChatHistory[agentMsgIdx]={role:'agent',text:text,waiting:false,streaming:!done};
+    renderAgentMessages();
+  }
 
   fetch(API+'/api/ask/stream',{
     method:'POST',
@@ -2437,44 +2479,45 @@ function askAgent(){
     var reader=response.body.getReader();
     var decoder=new TextDecoder();
     var buf='';
+    var accumulated='';
     function pump(){
       return reader.read().then(function(result){
         if(result.done){
-          // fallback if done event never arrived
-          if(accumulated && resp.textContent!==accumulated){
-            try{resp.innerHTML=renderMd(accumulated);}catch(e){resp.textContent=accumulated;}
-          }
-          if(askBtn){askBtn.disabled=false;askBtn.textContent='Ask';}
+          updateStreamingBubble(accumulated||'(empty response)',true);
+          if(askBtn){askBtn.disabled=false;askBtn.textContent='Send';}
           return;
         }
         buf+=decoder.decode(result.value,{stream:true});
-        var NLA=String.fromCharCode(10);
-        var lines=buf.split(NLA);
+        var lines=buf.split(String.fromCharCode(10));
         buf=lines.pop();
         lines.forEach(function(line){
-          if(line.indexOf('data: ')===0){
-            try{
-              var ev=JSON.parse(line.slice(6));
-              if(ev.token){accumulated+=ev.token;resp.textContent=accumulated+'\u258B';}
-              if(ev.done){
-                try{resp.innerHTML=renderMd(accumulated||'(empty response)');}catch(e){resp.textContent=accumulated||'(empty response)';}
-                if(askBtn){askBtn.disabled=false;askBtn.textContent='Ask';}
-                attachedFileContent=null;attachedFileName=null;
-                document.getElementById('fileInfo').style.display='none';
-                document.getElementById('fileDropZone').style.borderColor='var(--border2)';
-                document.getElementById('fileInput').value='';
-              }
-              if(ev.error){resp.innerHTML='<span style="color:var(--red)">Error: '+esc(ev.error)+'</span>';if(askBtn){askBtn.disabled=false;askBtn.textContent='Ask';}}
-            }catch(e){}
-          }
+          if(line.indexOf('data: ')!==0)return;
+          try{
+            var ev=JSON.parse(line.slice(6));
+            if(ev.token){accumulated+=ev.token;updateStreamingBubble(accumulated,false);}
+            if(ev.done){
+              updateStreamingBubble(accumulated||'(empty response)',true);
+              if(askBtn){askBtn.disabled=false;askBtn.textContent='Send';}
+              attachedFileContent=null;attachedFileName=null;
+              document.getElementById('agentFileInfo').style.display='none';
+              document.getElementById('agentFileInput').value='';
+              document.getElementById('agentFileDropZone').style.borderColor='';
+            }
+            if(ev.error){
+              updateStreamingBubble('\u26a0\ufe0f Error: '+ev.error,true);
+              if(askBtn){askBtn.disabled=false;askBtn.textContent='Send';}
+            }
+          }catch(e){}
         });
         return pump();
       });
     }
     return pump();
   }).catch(function(err){
-    if(err.name!=='AbortError'){resp.innerHTML='<span style="color:var(--red)">Stream error: '+esc(err.message)+'</span>';}
-    if(askBtn){askBtn.disabled=false;askBtn.textContent='Ask';}
+    if(err.name!=='AbortError'){
+      updateStreamingBubble('\u26a0\ufe0f Stream error: '+err.message,true);
+    }
+    if(askBtn){askBtn.disabled=false;askBtn.textContent='Send';}
   });
 }
 
@@ -2705,7 +2748,8 @@ function renderStudioNodes() {
     else if (n.status === 'done') cls += ' studio-node--done';
     else if (n.status === 'error') cls += ' studio-node--error';
     var statusLabel = {waiting:'&#9711; wait', running:'&#9654; running', done:'&#10003; done', error:'&#10005; error'}[n.status] || '';
-    html += '<div class="' + cls + '">';
+    var delay = (i * 120) + 'ms';
+    html += '<div class="' + cls + '" style="animation-delay:' + delay + '">';
     html += '<div class="studio-node__circle">' + n.icon + '</div>';
     html += '<div class="studio-node__label">' + esc(n.label) + '</div>';
     html += '<div class="studio-node__status studio-node__status--' + n.status + '">' + statusLabel + '</div>';
@@ -2715,7 +2759,8 @@ function renderStudioNodes() {
       var arrowCls = 'studio-arrow';
       if (n.status === 'done' && next.status === 'running') arrowCls += ' studio-arrow--active';
       else if (n.status === 'done') arrowCls += ' studio-arrow--done';
-      html += '<div class="' + arrowCls + '">&#8594;</div>';
+      var arrowDelay = (i * 120 + 60) + 'ms';
+      html += '<div class="' + arrowCls + '" style="opacity:0;animation:stNodeIn .3s ease ' + arrowDelay + ' forwards">&#8594;</div>';
     }
   });
   html += '</div>';
@@ -2773,9 +2818,12 @@ async function runStudio() {
   renderStudioResult();
 
   var btn = document.getElementById('studioRunBtn');
-  if (btn) btn.disabled = true;
+  if (btn) { btn.disabled = true; btn.textContent = 'Planning...'; }
 
   studioLog('Studio', '&#9881;', 'Planning workflow for: "' + task + '"', 'system');
+  // Show a temporary planning indicator in the nodes area
+  var nodesEl = document.getElementById('studioNodes');
+  if (nodesEl) nodesEl.innerHTML = '<div style="text-align:center;padding:20px;color:var(--dim);font-size:12px;font-family:var(--font)"><span class="thinking-dots"><span></span><span></span><span></span></span><div style="margin-top:8px">Designing workflow...</div></div>';
 
   try {
     // Step 1: plan the workflow
@@ -2815,9 +2863,8 @@ async function runStudio() {
         var ct = document.getElementById('canvasTitle');
         if (cf && cp) {
           cf.srcdoc = stepResult.canvas;
-          cp.style.display = 'flex';
+          cp.classList.add('open');
           if (ct) ct.textContent = node.label + ' Report';
-          canvasShowCanvas();
         }
       }
       context = stepResult.output || stepResult.canvas || context;
@@ -2837,7 +2884,7 @@ async function runStudio() {
   }
 
   studioState.running = false;
-  if (btn) btn.disabled = false;
+  if (btn) { btn.disabled = false; btn.textContent = 'Run'; }
 }
 
 // ---- STUDIO SESSIONS ----
@@ -2982,8 +3029,9 @@ function runStudioStep(idx, node, task, context, stepDef) {
                 var cp2 = document.getElementById('canvasPanel');
                 if (cf2 && cp2) {
                   cf2.srcdoc = canvasHtml;
-                  cp2.style.display = 'flex';
-                  canvasShowCanvas();
+                  cp2.classList.add('open');
+                  var ct2 = document.getElementById('canvasTitle');
+                  if (ct2) ct2.textContent = 'Studio Report';
                 }
               }
               if (ev.usage) { studioAddTokens(ev.usage.input||0, ev.usage.output||0); }
@@ -3305,7 +3353,7 @@ async function runManualWorkflow() {
       if (stepResult.canvas) {
         var cf = document.getElementById('canvasFrame');
         var cp = document.getElementById('canvasPanel');
-        if (cf && cp) { cf.srcdoc = stepResult.canvas; cp.style.display='flex'; canvasShowCanvas(); }
+        if (cf && cp) { cf.srcdoc = stepResult.canvas; cp.classList.add('open'); var ct3=document.getElementById('canvasTitle'); if(ct3) ct3.textContent='Studio Report'; }
       }
       context = stepResult.output || stepResult.canvas || context;
     }
@@ -3562,7 +3610,8 @@ input:focus,textarea:focus{border-color:var(--green3)}
 /* ---- MODAL ---- */
 .modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:300;align-items:center;justify-content:center}
 .modal-overlay--open{display:flex}
-.modal{background:var(--bg2);border:1px solid var(--border2);border-radius:8px;width:92%;max-width:540px;max-height:90vh;display:flex;flex-direction:column}
+.modal{background:var(--bg2);border:1px solid var(--border2);border-radius:8px;width:92%;max-width:560px;max-height:90vh;display:flex;flex-direction:column}
+.modal--chat{height:80vh}
 .modal__header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--border)}
 .modal__header h2{font-size:16px;color:var(--green)}
 .modal__close{background:none;color:var(--dim);font-size:24px;padding:0 4px}
@@ -3570,6 +3619,18 @@ input:focus,textarea:focus{border-color:var(--green3)}
 .modal__body textarea{width:100%;min-height:80px;margin-bottom:10px}
 .modal__response{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:12px;word-wrap:break-word;max-height:400px;overflow-y:auto;font-size:13px}
 .modal__footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--border)}
+.modal--chat .modal__body{padding:0;display:flex;flex-direction:column;overflow:hidden}
+.agent-chat{display:flex;flex-direction:column;height:100%;min-height:0;padding:12px 16px;box-sizing:border-box}
+.agent-chat__messages{flex:1;overflow-y:auto;padding:4px 0 8px;min-height:0;display:flex;flex-direction:column;gap:8px}
+.agent-chat__bubble{max-width:88%;border-radius:8px;padding:8px 12px;font-size:13px;line-height:1.55;word-wrap:break-word}
+.agent-chat__bubble--user{align-self:flex-end;background:var(--green3);color:#e8ffe8}
+.agent-chat__bubble--agent{align-self:flex-start;background:var(--bg3);border:1px solid var(--border)}
+.agent-chat__footer{display:flex;flex-direction:column;gap:6px;padding-top:8px;border-top:1px solid var(--border)}
+.agent-chat__drop{border:2px dashed var(--border2);border-radius:6px;padding:8px;text-align:center;color:var(--dim);font-size:11px;cursor:pointer;transition:border-color .2s}
+.agent-chat__drop:hover{border-color:var(--green)}
+.agent-chat__input-row{display:flex;gap:6px;align-items:flex-end}
+.agent-chat__input{flex:1;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:8px 10px;color:var(--fg);font-size:13px;font-family:var(--font);resize:none;min-height:36px;max-height:120px;overflow-y:auto;outline:none}
+.agent-chat__input:focus{border-color:var(--green)}
 .btn{padding:8px 16px;border-radius:var(--r);font-size:12px;font-weight:600}
 .btn--primary{background:var(--green3);color:var(--bg)}
 .btn--secondary{background:var(--bg3);color:var(--dim);border:1px solid var(--border)}
@@ -3577,6 +3638,11 @@ input:focus,textarea:focus{border-color:var(--green3)}
 /* ---- SPINNER ---- */
 .spinner{width:24px;height:24px;border:2px solid var(--border);border-top-color:var(--green);border-radius:50%;animation:spin .6s linear infinite;margin:0 auto 12px}
 @keyframes spin{to{transform:rotate(360deg)}}
+.thinking-dots{display:inline-flex;gap:4px;align-items:center;padding:2px 0}
+.thinking-dots span{width:6px;height:6px;border-radius:50%;background:var(--dim);animation:tdot 1.2s ease-in-out infinite}
+.thinking-dots span:nth-child(2){animation-delay:.2s}
+.thinking-dots span:nth-child(3){animation-delay:.4s}
+@keyframes tdot{0%,80%,100%{opacity:.2;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}
 
 /* ---- TOASTS (real-time notifications) ---- */
 .toast-container{position:fixed;top:16px;right:16px;z-index:500;display:flex;flex-direction:column;gap:8px;pointer-events:none}
@@ -3614,7 +3680,8 @@ input:focus,textarea:focus{border-color:var(--green3)}
 .studio-canvas__empty{display:flex;align-items:center;justify-content:center;height:180px;color:var(--dim);font-size:11px;flex-direction:column;gap:8px}
 .studio-canvas__empty-icon{font-size:32px;opacity:.3}
 .studio-nodes{display:flex;align-items:center;gap:0;padding:28px 24px;overflow-x:auto;min-height:130px;background:var(--bg2);border-radius:10px;border:1px solid var(--border);margin-bottom:16px}
-.studio-node{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;min-width:106px;max-width:126px}
+.studio-node{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;min-width:106px;max-width:126px;opacity:0;animation:stNodeIn .35s ease forwards}
+@keyframes stNodeIn{from{opacity:0;transform:translateY(10px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}
 .studio-node__circle{width:56px;height:56px;border-radius:14px;border:1.5px solid var(--border2);background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:22px;transition:all .35s;flex-shrink:0}
 .studio-node--active .studio-node__circle{border-color:var(--green3);box-shadow:0 0 0 4px rgba(99,102,241,.15);background:var(--greendim);animation:stRing 1.4s ease-out infinite}
 .studio-node--done .studio-node__circle{border-color:#22c55e;background:rgba(34,197,94,.08);box-shadow:0 0 0 3px rgba(34,197,94,.12)}
@@ -3778,23 +3845,26 @@ input:focus,textarea:focus{border-color:var(--green3)}
 </div>
 
 <div class="modal-overlay" id="agentModal">
-  <div class="modal">
+  <div class="modal modal--chat">
     <div class="modal__header">
       <div><h2 id="modalName">Agent</h2><div id="modalAgentDesc" style="font-size:10px;color:var(--dim);margin-top:2px"></div></div>
       <button class="modal__close" onclick="closeModal()">&times;</button>
     </div>
     <div class="modal__body">
-      <textarea id="modalPrompt" placeholder="Ask this agent something... (Enter to send)" onkeydown="if(event.key==='Enter'&&!event.shiftKey){askAgent();event.preventDefault();}"></textarea>
-      <div id="fileDropZone" style="border:2px dashed var(--border2);border-radius:6px;padding:12px;text-align:center;color:var(--dim);font-size:11px;cursor:pointer;margin-bottom:10px;transition:border-color .2s" onclick="document.getElementById('fileInput').click()" ondragover="event.preventDefault();this.style.borderColor='var(--green)'" ondragleave="this.style.borderColor='var(--border2)'" ondrop="event.preventDefault();this.style.borderColor='var(--border2)';handleFileDrop(event)">
-        Drop a file here or click to attach
-        <input type="file" id="fileInput" style="display:none" onchange="handleFileSelect(this)">
+      <div class="agent-chat">
+        <div class="agent-chat__messages" id="agentMessages"></div>
+        <div class="agent-chat__footer">
+          <div class="agent-chat__drop" id="agentFileDropZone" onclick="document.getElementById('agentFileInput').click()" ondragover="event.preventDefault();this.style.borderColor='var(--green)'" ondragleave="this.style.borderColor=''" ondrop="event.preventDefault();this.style.borderColor='';handleFileDrop(event)">
+            Drop a file or click to attach
+            <input type="file" id="agentFileInput" style="display:none" onchange="handleFileSelect(this)">
+          </div>
+          <div id="agentFileInfo" style="display:none;font-size:10px;color:var(--cyan)"></div>
+          <div class="agent-chat__input-row">
+            <textarea class="agent-chat__input" id="modalPrompt" rows="1" placeholder="Ask this agent... (Enter to send)" onkeydown="if(event.key==='Enter'&&!event.shiftKey){askAgent();event.preventDefault();}"></textarea>
+            <button class="btn btn--primary" id="agentAskBtn" onclick="askAgent()" style="height:36px;padding:0 14px">Send</button>
+          </div>
+        </div>
       </div>
-      <div id="fileInfo" style="display:none;font-size:10px;color:var(--cyan);margin-bottom:8px"></div>
-      <div class="modal__response md-body" id="modalResponse" style="display:none"></div>
-    </div>
-    <div class="modal__footer">
-      <button class="btn btn--secondary" onclick="closeModal()">Close</button>
-      <button class="btn btn--primary" id="agentAskBtn" onclick="askAgent()">Ask</button>
     </div>
   </div>
 </div>