nothumanallowed 13.2.27 → 13.2.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nothumanallowed",
-  "version": "13.2.27",
+  "version": "13.2.29",
   "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

@@ -2586,12 +2586,14 @@ Example output:
             const hasCalendar = /calendar|agenda|calendari/i.test(task);
             const hasSearch = /cerca|search|notizie|news/i.test(task);
             const hasCanvas = /html|dashboard|visua|report/i.test(task);
+            // Extract a short search query from the task (take key noun phrases, max 80 chars)
+            const searchQueryFallback = task.replace(/^[^:]+:\s*/,'').split(/[,\n]/)[0].slice(0,80).trim() || task.slice(0,80);
             steps = [];
-            if (hasEmail) steps.push({icon:'📧',agent:'EmailAgent',label:'Controlla email',prompt:task});
-            if (hasCalendar) steps.push({icon:'📅',agent:'CalendarAgent',label:'Rivedi calendario',prompt:task});
-            if (hasSearch || steps.length === 0) steps.push({icon:'🔍',agent:'WebSearchAgent',label:'Ricerca web',prompt:task});
-            steps.push({icon:'📰',agent:'HERALD',label:'Analisi e briefing',prompt:task});
-            if (hasCanvas) steps.push({icon:'📊',agent:'CanvasAgent',label:'Dashboard HTML',prompt:task});
+            if (hasEmail) steps.push({icon:'\u{1F4E7}',agent:'EmailAgent',label:'Controlla email',prompt:'Leggi le ultime email non lette e identifica elementi urgenti'});
+            if (hasCalendar) steps.push({icon:'\u{1F4C5}',agent:'CalendarAgent',label:'Rivedi calendario',prompt:'Controlla gli eventi di oggi e identifica eventuali conflitti'});
+            if (hasSearch || steps.length === 0) steps.push({icon:'\u{1F50D}',agent:'WebSearchAgent',label:'Ricerca web',prompt:searchQueryFallback});
+            steps.push({icon:'\u{1F4F0}',agent:'HERALD',label:'Analisi e briefing',prompt:'Analizza tutti i dati forniti e scrivi un briefing esecutivo dettagliato con priorit\u00e0 e raccomandazioni'});
+            if (hasCanvas) steps.push({icon:'\u{1F4CA}',agent:'CanvasAgent',label:'Dashboard HTML',prompt:'Crea una dashboard HTML visuale con i dati del briefing'});
           }
           if (!Array.isArray(steps) || !steps.length) {
             sendJSON(res, 500, { error: 'Empty workflow plan' });
@@ -2661,9 +2663,24 @@ Example output:
             } catch (e) { toolData = `Calendar read failed: ${e.message}`; }
 
           } else if (agent === 'WebSearchAgent' || agent === 'ResearchAgent') {
-            sendToken('[Searching the web...] ');
+            sendToken('[Searching the web and reading pages...] ');
             try {
-              const searchResult = await withTimeout(executeTool('web_search', { query: stepPrompt }, config), 'WebSearch');
+              // Extract a concise search query from the step prompt (avoid sending the whole task as query)
+              // The planner should provide a short query, but if not, extract key terms
+              let searchQuery = stepPrompt;
+              // If the prompt is very long (> 120 chars), extract the core search terms
+              if (searchQuery.length > 120) {
+                // Try to extract a meaningful short query
+                const keywordMatch = searchQuery.match(/(?:cerca|search|find|ricerca|notizie su|news about|latest on|aggiornamenti su)\s+(.{5,80}?)(?:\s+(?:e|and|per|for|poi|then)|$)/i);
+                if (keywordMatch) {
+                  searchQuery = keywordMatch[1].trim();
+                } else {
+                  // Take first meaningful clause before comma/period
+                  searchQuery = searchQuery.split(/[,\.\n]/)[0].slice(0, 100).trim();
+                }
+              }
+              // Use deep search: fetches and reads top 3 pages for real content
+              const searchResult = await withTimeout(executeTool('web_search', { query: searchQuery, deep: true }, config), 25000);
               toolData = typeof searchResult === 'string' ? searchResult : JSON.stringify(searchResult);
             } catch (e) { toolData = `Web search failed: ${e.message}`; }
 
@@ -2725,128 +2742,130 @@ Example output:
           // 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. Output ONLY a single complete HTML document in ${language}. No preamble, no explanation, no markdown.
-STRICT RULES:
-- Your ENTIRE response must be valid HTML starting with <!DOCTYPE html>
-- Do NOT output markdown code blocks, JSON, or any wrapper text
-- ALL text content (titles, descriptions, labels, body text) must be in ${language}
-- Use EXACTLY this CSS template structure — only change the content inside, never the style
-
-USE THIS EXACT HTML STRUCTURE (replace placeholders with real content):
+          const canvasSystemPrompt = `You are an expert HTML report designer. Output ONLY a complete HTML document in ${language}. Start immediately with <!DOCTYPE html>. No markdown, no explanation.
+
+FORMATTING RULES — use ALL of these in the report:
+- <strong> for bold key terms and important values
+- <em> for emphasis and technical terms
+- <u> for critical warnings or deadlines
+- <ul><li> for bullet lists, <ol><li> for numbered/priority lists
+- <a href="URL" target="_blank" style="color:#22d3ee;text-decoration:underline"> for ALL source URLs — ALWAYS make URLs clickable hyperlinks, never plain text
+- Bar charts: use CSS width% on colored divs to visualize percentages/scores
+- Use <span class="badge-high">, <span class="badge-med">, <span class="badge-low"> for priority labels
+
+CONTENT RULES:
+- ALL text must be in ${language}
+- Include ALL real content from the data: titles, descriptions, URLs, key findings
+- Do NOT summarize — include specific details, names, numbers, dates from the source data
+- For each news item/source: show title as <strong>, URL as clickable <a href>, and a real summary paragraph
+- Use <blockquote> for direct quotes or key excerpts
+
+USE EXACTLY THIS CSS (do not change it, only add content):
 <!DOCTYPE html>
 <html lang="${language.slice(0,2).toLowerCase()}">
 <head>
 <meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>REPORT TITLE HERE</title>
+<meta name="viewport" content="width=device-width,initial-scale=1.0">
+<title>NHA Studio Report</title>
 <style>
 *{margin:0;padding:0;box-sizing:border-box}
-body{font-family:'Inter',system-ui,sans-serif;background:#0d0d14;color:#f0f0f5;min-height:100vh;padding:24px}
-.header{background:linear-gradient(135deg,#6366f1 0%,#22d3ee 100%);border-radius:16px;padding:32px 40px;margin-bottom:24px}
-.header h1{font-size:28px;font-weight:700;color:#fff;margin-bottom:8px}
-.header p{font-size:14px;color:rgba(255,255,255,0.8)}
-.meta{display:flex;gap:16px;margin-top:16px;flex-wrap:wrap}
-.meta span{background:rgba(255,255,255,0.2);border-radius:20px;padding:4px 12px;font-size:12px;color:#fff}
-.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-bottom:24px}
-.card{background:#15151f;border:1px solid #2a2a38;border-radius:12px;padding:20px}
-.card h2{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:#6366f1;margin-bottom:12px;font-weight:600}
-.card h3{font-size:16px;font-weight:600;color:#f0f0f5;margin-bottom:8px}
-.card p{font-size:13px;color:#8b8b9e;line-height:1.6}
-.card ul{list-style:none;padding:0}
-.card ul li{font-size:13px;color:#8b8b9e;line-height:1.8;padding-left:16px;position:relative}
-.card ul li::before{content:'›';position:absolute;left:0;color:#6366f1}
-.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;margin-right:6px;margin-bottom:4px}
-.badge-high{background:#7f1d1d;color:#ef4444}
-.badge-med{background:#713f12;color:#f59e0b}
-.badge-low{background:#14532d;color:#34d399}
-.badge-info{background:#1e1b4b;color:#6366f1}
-.section{background:#15151f;border:1px solid #2a2a38;border-radius:12px;padding:24px;margin-bottom:16px}
-.section h2{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:#22d3ee;margin-bottom:16px;font-weight:600}
-.section h3{font-size:15px;font-weight:600;color:#f0f0f5;margin-bottom:6px}
-.section p{font-size:13px;color:#8b8b9e;line-height:1.7;margin-bottom:12px}
-.priority-list{display:flex;flex-direction:column;gap:10px}
+body{font-family:'Inter',system-ui,sans-serif;background:#0d0d14;color:#f0f0f5;min-height:100vh;padding:20px;font-size:14px;line-height:1.65}
+a{color:#22d3ee;text-decoration:underline}a:hover{color:#6366f1}
+strong{color:#f0f0f5;font-weight:700}
+em{color:#a5b4fc;font-style:italic}
+u{text-decoration-color:#ef4444}
+blockquote{border-left:3px solid #6366f1;padding:8px 16px;margin:10px 0;background:#15151f;border-radius:0 8px 8px 0;color:#8b8b9e;font-style:italic}
+.header{background:linear-gradient(135deg,#4f46e5 0%,#06b6d4 100%);border-radius:16px;padding:28px 36px;margin-bottom:20px}
+.header h1{font-size:26px;font-weight:800;color:#fff;margin-bottom:6px}
+.header p{font-size:13px;color:rgba(255,255,255,0.85);margin:0}
+.meta{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
+.meta span{background:rgba(255,255,255,0.18);border-radius:20px;padding:3px 12px;font-size:11px;color:#fff;font-weight:500}
+.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-bottom:20px}
+.card{background:#15151f;border:1px solid #2a2a38;border-radius:12px;padding:18px}
+.card-label{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:#6366f1;font-weight:700;margin-bottom:8px}
+.card h3{font-size:18px;font-weight:700;color:#f0f0f5;margin-bottom:4px}
+.card p{font-size:12px;color:#8b8b9e;margin:0}
+.section{background:#15151f;border:1px solid #2a2a38;border-radius:12px;padding:22px;margin-bottom:16px}
+.section-title{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:#22d3ee;font-weight:700;margin-bottom:16px}
+.section h3{font-size:15px;font-weight:600;color:#f0f0f5;margin-bottom:6px;margin-top:14px}
+.section p{font-size:13px;color:#8b8b9e;line-height:1.7;margin-bottom:10px}
+ul{list-style:none;padding:0;margin:8px 0}
+ul li{padding:4px 0 4px 18px;position:relative;font-size:13px;color:#8b8b9e}
+ul li::before{content:'›';position:absolute;left:0;color:#6366f1;font-weight:700}
+ol{padding-left:20px;margin:8px 0}
+ol li{padding:4px 0;font-size:13px;color:#8b8b9e;line-height:1.6}
+.priority-list{display:flex;flex-direction:column;gap:8px}
 .priority-item{display:flex;align-items:flex-start;gap:12px;padding:12px;background:#1c1c28;border-radius:8px}
-.priority-num{width:28px;height:28px;border-radius:50%;background:#6366f1;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
-.priority-item h4{font-size:13px;font-weight:600;color:#f0f0f5;margin-bottom:2px}
+.priority-num{width:26px;height:26px;border-radius:50%;background:#6366f1;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
+.priority-item h4{font-size:13px;font-weight:600;color:#f0f0f5;margin-bottom:3px}
 .priority-item p{font-size:12px;color:#8b8b9e;line-height:1.5;margin:0}
-.footer{text-align:center;padding:20px;font-size:11px;color:#4a4a5e;margin-top:8px}
+.source-item{padding:14px;background:#1c1c28;border-radius:8px;margin-bottom:10px;border-left:3px solid #6366f1}
+.source-item h4{font-size:13px;font-weight:600;color:#f0f0f5;margin-bottom:4px}
+.source-item p{font-size:12px;color:#8b8b9e;line-height:1.6;margin:4px 0}
+.source-item a{font-size:11px}
+.bar-row{margin-bottom:10px}
+.bar-label{font-size:12px;color:#8b8b9e;margin-bottom:4px;display:flex;justify-content:space-between}
+.bar-track{background:#1c1c28;border-radius:4px;height:8px;overflow:hidden}
+.bar-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,#6366f1,#22d3ee)}
+.badge-high{display:inline-block;background:#7f1d1d;color:#ef4444;border-radius:12px;padding:2px 10px;font-size:10px;font-weight:700;margin-right:4px}
+.badge-med{display:inline-block;background:#713f12;color:#f59e0b;border-radius:12px;padding:2px 10px;font-size:10px;font-weight:700;margin-right:4px}
+.badge-low{display:inline-block;background:#14532d;color:#34d399;border-radius:12px;padding:2px 10px;font-size:10px;font-weight:700;margin-right:4px}
+.badge-info{display:inline-block;background:#1e1b4b;color:#a5b4fc;border-radius:12px;padding:2px 10px;font-size:10px;font-weight:700;margin-right:4px}
+.divider{border:none;border-top:1px solid #2a2a38;margin:16px 0}
+.footer{text-align:center;padding:18px;font-size:11px;color:#4a4a5e;margin-top:8px}
 </style>
 </head>
 <body>
-<!-- HEADER: put report title, subtitle, date, and 2-3 meta tags -->
-<div class="header">
-  <h1>REPLACE WITH REPORT TITLE</h1>
-  <p>REPLACE WITH SUBTITLE/DESCRIPTION</p>
-  <div class="meta">
-    <span>📅 ${today}</span>
-    <span>META TAG 2</span>
-    <span>META TAG 3</span>
-  </div>
-</div>
-
-<!-- STATS GRID: 3-4 cards with key numbers/stats -->
-<div class="grid">
-  <div class="card">
-    <h2>LABEL 1</h2>
-    <h3>STAT OR TITLE</h3>
-    <p>DESCRIPTION</p>
-  </div>
-  <!-- Add more cards for other stats -->
-</div>
-
-<!-- MAIN SECTIONS: 2-4 sections with content -->
-<div class="section">
-  <h2>SECTION LABEL</h2>
-  <div class="priority-list">
-    <div class="priority-item">
-      <div class="priority-num">1</div>
-      <div><h4>ITEM TITLE</h4><p>ITEM DESCRIPTION</p></div>
-    </div>
-    <!-- Add more priority items -->
-  </div>
-</div>
-
-<div class="footer">Generated by NHA Studio · ${today}</div>
-</body>
-</html>
-
-Fill ALL placeholder text with the actual content from the data provided. Keep ALL CSS exactly as above. Output ONLY the HTML.`;
+
+[HEADER — gradient card with h1 title, subtitle p, and .meta spans for date/stats]
+[GRID — 3-4 .card stat boxes with real numbers from the data]
+[SECTIONS — use .section with .section-title, then real content with h3, p, ul/ol, .source-item for URLs, .priority-list for ranked items, .bar-row for visual charts]
+[For every URL in the data: wrap in <a href="..." target="_blank"> as a clickable hyperlink]
+[FOOTER — "NHA Studio · ${today}"]
+
+Output ONLY the full HTML. Replace all bracketed instructions above with real HTML content.`;
 
           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)}`;
+            userMsg = `Generate a beautiful HTML dashboard report for this content. Start immediately with <!DOCTYPE html>:\n\n${context.slice(0, 10000)}`;
           } 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. Respond in ${language}.\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` : '') +
-              `\nWrite your analysis in plain text in ${language}. Do NOT output JSON, tool calls, or code blocks. Summarize the data clearly.`;
-            sysPrompt = buildSystemPrompt(agent, agentInstruction, config);
+            // These agents fetched real data — use a focused prompt (no tool definitions to avoid JSON output)
+            const agentInstruction = `You are ${agent}, a specialist AI agent inside NHA Studio. Today is ${today}. Respond entirely in ${language}.
+
+CRITICAL: Do NOT invent, hallucinate, or add any data not present in the DATA sections below. ONLY use the exact data provided.
+Do NOT output JSON, tool calls, or code blocks. Write in plain text with markdown headers.
+
+${toolData ? `## DATA FROM TOOLS:\n${toolData.slice(0, 6000)}\n` : '## DATA: No data was retrieved by this agent.\n'}
+${context ? `## OUTPUT FROM PREVIOUS AGENTS:\n${context.slice(0, 4000)}\n` : ''}
+
+Your task: ${stepPrompt}`;
+            sysPrompt = agentInstruction;
             userMsg = toolData
-              ? `Summarize the data above for: ${stepPrompt}`
+              ? `Summarize and analyze the REAL data above. Do not add anything not present in the data.`
               : context
-              ? `Based on the previous output, complete: ${stepPrompt}`
+              ? `Based ONLY on the previous agent outputs above, complete: ${stepPrompt}`
               : stepPrompt;
           } else {
             // All other agents (WriterAgent, DataAnalystAgent, specialist agents, etc.)
             // Use a focused prompt with NO TOOL_DEFINITIONS to prevent JSON/tool-call output
+            const hasRealData = !!(toolData || context);
             sysPrompt = `You are ${agent}, a specialist AI agent inside NHA Studio. Today is ${today}. You MUST respond entirely 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;
+- NEVER invent, fabricate, or hallucinate data, events, emails, meetings, or news
+- ONLY use the EXACT data provided in the DATA sections below — if no data is provided, say so clearly
+- Do NOT add fictional examples, placeholder content, or generic suggestions not grounded in the data
+- Write in plain prose, structured with markdown headers (##) and bullet points (-)
+- Be thorough and specific — this is for an executive briefing based on REAL data only
+
+${toolData ? `## LIVE DATA FROM TOOLS:\n${toolData.slice(0, 6000)}\n` : '## LIVE DATA: No tool data was fetched for this step.\n'}
+${context ? `## OUTPUT FROM PREVIOUS AGENTS:\n${context.slice(0, 6000)}\n` : ''}`;
+            userMsg = hasRealData
+              ? `Based ONLY on the real data above, complete this task: ${stepPrompt}`
+              : `No real data is available. State clearly that no data was retrieved and explain what would be needed: ${stepPrompt}`;
           }
 
           // ── Stream LLM response ───────────────────────────────────────

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.27';
+export const VERSION = '13.2.29';
 export const BASE_URL = 'https://nothumanallowed.com/cli';
 export const API_BASE = 'https://nothumanallowed.com/api/v1';
 

package/src/services/web-ui.mjs

@@ -2975,7 +2975,10 @@ function renderStudioResult() {
   var body = isHtml
     ? '<div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap"><span style="color:var(--dim);font-size:13px">&#10003; ' + t('canvas_generated') + '</span><button onclick="openCanvasPanel()" style="padding:6px 14px;background:var(--greendim);border:1px solid var(--green3);border-radius:8px;color:var(--green);font-size:12px;cursor:pointer;font-weight:700">&#x25A3; ' + t('canvas_open') + '</button></div>'
     : '<div class="md-body">' + renderMd(studioState.result) + '</div>';
-  el.innerHTML = '<div class="studio-result__title">&#10003; Workflow completato</div>' + body;
+  el.innerHTML = '<div class="studio-result__title">&#10003; ' + t('workflow_complete') + '</div>' + body;
+  // Show/hide persistent canvas button in toolbar
+  var canvasBtn = document.getElementById('studioCanvasBtn');
+  if (canvasBtn) canvasBtn.style.display = isHtml ? '' : 'none';
 }
 
 function studioSetNodeStatus(idx, status) {
@@ -3295,44 +3298,44 @@ function renderStudio(el) {
 
   // 38 specialist agents sidebar
   var SPECIALIST_AGENTS = [
-    {icon:'\\u{1F6E1}',name:'saber',desc:'Security audits, pentest, OWASP'},
-    {icon:'\\u{1F50D}',name:'zero',desc:'Vulnerability & dependency audit'},
-    {icon:'\\u2713',name:'veritas',desc:'Fact-checking & hallucination detection'},
-    {icon:'\\u{1F52C}',name:'ade',desc:'Full security review, forensics'},
-    {icon:'\\u{1F512}',name:'heimdall',desc:'OAuth, JWT, RBAC design'},
-    {icon:'\\u{1F4BB}',name:'jarvis',desc:'Full-stack architecture & API'},
-    {icon:'\\u2699',name:'forge',desc:'CI/CD, deployment, infra'},
-    {icon:'\\u{1F527}',name:'pipe',desc:'Build systems, Airflow, automation'},
-    {icon:'\\u{1F4DF}',name:'shell',desc:'Shell scripts, CLI tools'},
-    {icon:'\\u{1F41B}',name:'glitch',desc:'Debugging & root cause'},
-    {icon:'\\u{1F4CA}',name:'oracle',desc:'Data analysis, stats, ML'},
-    {icon:'\\u{1F9EE}',name:'logos',desc:'Logic, proofs, formal reasoning'},
-    {icon:'\\u{1F5FA}',name:'atlas',desc:'Terraform, CloudFormation, IaC'},
-    {icon:'\\u{1F30D}',name:'cartographer',desc:'Geo data, mapping, routing'},
-    {icon:'\\u270D',name:'scheherazade',desc:'Docs, tutorials, blog posts'},
-    {icon:'\\u{1F4DD}',name:'quill',desc:'Posts, summaries, abstracts'},
-    {icon:'\\u{1F3A8}',name:'muse',desc:'Creative brainstorming & ideation'},
-    {icon:'\\u{1F58C}',name:'murasaki',desc:'UI/UX design, accessibility'},
-    {icon:'\\u{1F517}',name:'hermes',desc:'Kafka, RabbitMQ, event-driven'},
-    {icon:'\\u{1F50C}',name:'link',desc:'Community, reputation, engagement'},
-    {icon:'\\u{1F310}',name:'mercury',desc:'Finance, market, ROI analysis'},
-    {icon:'\\u2638',name:'shogun',desc:'Kubernetes, Helm, pod security'},
-    {icon:'\\u{1F504}',name:'flux',desc:'GitOps, rollback planning'},
-    {icon:'\\u23F0',name:'cron',desc:'GitHub Actions, GitLab CI'},
-    {icon:'\\u{1F30E}',name:'babel',desc:'API integration, microservices'},
-    {icon:'\\u{1F5E3}',name:'polyglot',desc:'i18n, localization, translation'},
-    {icon:'\\u{1F4E2}',name:'herald',desc:'News analysis, trend detection'},
-    {icon:'\\u{1F4E1}',name:'echo',desc:'Content repurposing: blog→social'},
-    {icon:'\\u26A1',name:'macro',desc:'Batch processing, data migration'},
-    {icon:'\\u{1F525}',name:'prometheus',desc:'Strategy, architecture trade-offs'},
-    {icon:'\\u26A0',name:'cassandra',desc:'Risk prediction, worst-case analysis'},
-    {icon:'\\u{1F9E0}',name:'athena',desc:'Tech evaluation, benchmarks'},
-    {icon:'\\u{1F441}',name:'sauron',desc:'Performance profiling, bottlenecks'},
-    {icon:'\\u{1F3BC}',name:'conductor',desc:'Workflow orchestration'},
-    {icon:'\\u{1F9ED}',name:'navi',desc:'Data profiling, schema inference'},
-    {icon:'\\u{1F4C8}',name:'edi',desc:'A/B testing, hypothesis testing'},
-    {icon:'\\u26C8',name:'tempest',desc:'Climate, weather, environmental'},
-    {icon:'\\u{1F37D}',name:'epicure',desc:'Recipes, nutrition, dietary'},
+    {icon:'\u{1F6E1}',name:'saber',desc:'Security audits, pentest, OWASP'},
+    {icon:'\u{1F50D}',name:'zero',desc:'Vulnerability & dependency audit'},
+    {icon:'\u2713',name:'veritas',desc:'Fact-checking & hallucination detection'},
+    {icon:'\u{1F52C}',name:'ade',desc:'Full security review, forensics'},
+    {icon:'\u{1F512}',name:'heimdall',desc:'OAuth, JWT, RBAC design'},
+    {icon:'\u{1F4BB}',name:'jarvis',desc:'Full-stack architecture & API'},
+    {icon:'\u2699',name:'forge',desc:'CI/CD, deployment, infra'},
+    {icon:'\u{1F527}',name:'pipe',desc:'Build systems, Airflow, automation'},
+    {icon:'\u{1F4DF}',name:'shell',desc:'Shell scripts, CLI tools'},
+    {icon:'\u{1F41B}',name:'glitch',desc:'Debugging & root cause'},
+    {icon:'\u{1F4CA}',name:'oracle',desc:'Data analysis, stats, ML'},
+    {icon:'\u{1F9EE}',name:'logos',desc:'Logic, proofs, formal reasoning'},
+    {icon:'\u{1F5FA}',name:'atlas',desc:'Terraform, CloudFormation, IaC'},
+    {icon:'\u{1F30D}',name:'cartographer',desc:'Geo data, mapping, routing'},
+    {icon:'\u270D',name:'scheherazade',desc:'Docs, tutorials, blog posts'},
+    {icon:'\u{1F4DD}',name:'quill',desc:'Posts, summaries, abstracts'},
+    {icon:'\u{1F3A8}',name:'muse',desc:'Creative brainstorming & ideation'},
+    {icon:'\u{1F58C}',name:'murasaki',desc:'UI/UX design, accessibility'},
+    {icon:'\u{1F517}',name:'hermes',desc:'Kafka, RabbitMQ, event-driven'},
+    {icon:'\u{1F50C}',name:'link',desc:'Community, reputation, engagement'},
+    {icon:'\u{1F310}',name:'mercury',desc:'Finance, market, ROI analysis'},
+    {icon:'\u2638',name:'shogun',desc:'Kubernetes, Helm, pod security'},
+    {icon:'\u{1F504}',name:'flux',desc:'GitOps, rollback planning'},
+    {icon:'\u23F0',name:'cron',desc:'GitHub Actions, GitLab CI'},
+    {icon:'\u{1F30E}',name:'babel',desc:'API integration, microservices'},
+    {icon:'\u{1F5E3}',name:'polyglot',desc:'i18n, localization, translation'},
+    {icon:'\u{1F4E2}',name:'herald',desc:'News analysis, trend detection'},
+    {icon:'\u{1F4E1}',name:'echo',desc:'Content repurposing: blog\u2192social'},
+    {icon:'\u26A1',name:'macro',desc:'Batch processing, data migration'},
+    {icon:'\u{1F525}',name:'prometheus',desc:'Strategy, architecture trade-offs'},
+    {icon:'\u26A0',name:'cassandra',desc:'Risk prediction, worst-case analysis'},
+    {icon:'\u{1F9E0}',name:'athena',desc:'Tech evaluation, benchmarks'},
+    {icon:'\u{1F441}',name:'sauron',desc:'Performance profiling, bottlenecks'},
+    {icon:'\u{1F3BC}',name:'conductor',desc:'Workflow orchestration'},
+    {icon:'\u{1F9ED}',name:'navi',desc:'Data profiling, schema inference'},
+    {icon:'\u{1F4C8}',name:'edi',desc:'A/B testing, hypothesis testing'},
+    {icon:'\u26C8',name:'tempest',desc:'Climate, weather, environmental'},
+    {icon:'\u{1F37D}',name:'epicure',desc:'Recipes, nutrition, dietary'},
   ];
   var specialistHtml = SPECIALIST_AGENTS.map(function(t){
     var ic = t.icon;
@@ -3389,7 +3392,7 @@ function renderStudio(el) {
 
         '<div style="display:flex;align-items:center;gap:8px;margin:8px 0">' +
           '<div id="studioTokenBar" style="font-size:10px;color:var(--dim);font-family:var(--mono);flex:1"></div>' +
-          '<button id="studioCanvasBtn" onclick="var p=document.getElementById(\\x27canvasPanel\\x27);if(p)p.classList.add(\\x27open\\x27)" style="display:none;font-size:10px;padding:3px 9px;background:none;border:1px solid var(--green3);border-radius:5px;color:var(--green);cursor:pointer;font-family:var(--mono)">&#9632; Open Canvas</button>' +
+          '<button id="studioCanvasBtn" onclick="openCanvasPanel()" style="display:none;font-size:12px;padding:5px 14px;background:var(--greendim);border:1px solid var(--green3);border-radius:6px;color:var(--green);cursor:pointer;font-weight:700">&#9632; ' + t('canvas_open') + '</button>' +
         '</div>' +
         '<div class="studio-canvas" id="studioNodes"></div>' +
         '<div class="studio-log" id="studioLog" style="display:none"></div>' +