nothumanallowed 13.2.29 → 13.2.31

package/package.json

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

@@ -2544,56 +2544,85 @@ export async function cmdUI(args) {
         if (!task) { sendJSON(res, 400, { error: 'task required' }); logRequest(method, pathname, 400, Date.now() - start); return; }
 
         const plannerLang = (() => { const LANG_MAP2 = {en:'English',it:'Italian',es:'Spanish',fr:'French',de:'German',pt:'Portuguese',zh:'Chinese',ja:'Japanese',ar:'Arabic',hi:'Hindi',ru:'Russian',nl:'Dutch',pl:'Polish',tr:'Turkish',ko:'Korean'}; const lc = (config?.language||'it').slice(0,2); return LANG_MAP2[lc]||'Italian'; })();
-        const planPrompt = `You are a workflow planner. Task: "${task}"
-Language: ${plannerLang}. All prompts must be in ${plannerLang}.
 
-Output ONLY valid JSON (no markdown, no explanation, no thinking):
-{"steps":[{"icon":"EMOJI","agent":"AGENT_NAME","label":"SHORT LABEL","prompt":"INSTRUCTION IN ${plannerLang}"}]}
-
-Rules:
-- 2-5 steps max
-- Use WebSearchAgent to fetch live web data
-- Use EmailAgent/CalendarAgent/GitHubAgent/SlackAgent for personal live data
-- Use HERALD for news briefings, ORACLE for business analysis, NAVI for data analysis, ATHENA for tech evaluation, CASSANDRA for risk, MERCURY for finance, HERALD for trends, QUILL for summaries
-- Use CanvasAgent LAST only if user explicitly asks for HTML/visual/dashboard
-- icon must be a real emoji character
+        // ── Fast keyword-based planning (no LLM call needed for common patterns) ──────
+        // Detect task intent from keywords — avoids sending the full task through SENTINEL
+        const taskLow = task.toLowerCase();
+        const hasEmail = /email|mail|inbox|posta/i.test(taskLow);
+        const hasCalendar = /calendar|agenda|calendari|eventi|schedule/i.test(taskLow);
+        const hasSearch = /cerca|search|notizie|news|ultime|latest|web|internet/i.test(taskLow);
+        const hasCanvas = /html|dashboard|visua|report|grafico|chart/i.test(taskLow);
+        const hasGitHub = /github|git|issue|pr|pull request/i.test(taskLow);
+        const hasSlack = /slack|channel|messag/i.test(taskLow);
+        const hasNotion = /notion|note|page/i.test(taskLow);
+        const hasBriefing = /briefing|analisi|analizza|summary|sommario|riassunto|riepiloga/i.test(taskLow);
+        const hasFinance = /finance|mercato|market|stock|trading|finanz/i.test(taskLow);
+        const hasSecurity = /security|sicurezza|vulnerabilit|audit|pentest/i.test(taskLow);
+
+        // Extract a clean short search query from the task (to avoid SENTINEL flagging long task strings)
+        const extractSearchQuery = (t) => {
+          // Try to find an explicit search topic after keywords like "cerca", "search", "notizie su"
+          const m = t.match(/(?:cerca|search|find|ricerca|notizie su|news about|latest on|aggiornamenti su|ultime su)\s+(.{5,80}?)(?:\s+(?:e |and |per |for |poi |then )|[,\n]|$)/i);
+          if (m) return m[1].trim();
+          // Strip leading instruction prefix (everything before the first colon)
+          const stripped = t.replace(/^[^:]+:\s*/,'').split(/[,\n]/)[0].slice(0,100).trim();
+          return stripped || t.slice(0,80).trim();
+        };
+        const searchQuery = extractSearchQuery(task);
+
+        // Build plan directly from keywords — reliable, fast, no SENTINEL risk
+        const buildKeywordPlan = () => {
+          const steps = [];
+          if (hasEmail) steps.push({icon:'\u{1F4E7}',agent:'EmailAgent',label:plannerLang==='Italian'?'Controlla email':'Check emails',prompt:'Read the latest unread emails and identify urgent items, deadlines, and required actions'});
+          if (hasCalendar) steps.push({icon:'\u{1F4C5}',agent:'CalendarAgent',label:plannerLang==='Italian'?'Rivedi calendario':'Review calendar',prompt:'Check today\'s events and identify any scheduling conflicts or important meetings'});
+          if (hasGitHub) steps.push({icon:'\u{1F4BB}',agent:'GitHubAgent',label:'GitHub',prompt:'Read open issues and pull requests, identify what needs attention'});
+          if (hasSlack) steps.push({icon:'\u{1F4AC}',agent:'SlackAgent',label:'Slack',prompt:'Check recent Slack messages and identify important conversations'});
+          if (hasNotion) steps.push({icon:'\u{1F4DD}',agent:'NotionAgent',label:'Notion',prompt:'Search Notion for relevant pages and notes'});
+          if (hasSearch || (!hasEmail && !hasCalendar && !hasGitHub && !hasSlack)) {
+            steps.push({icon:'\u{1F50D}',agent:'WebSearchAgent',label:plannerLang==='Italian'?'Ricerca web':'Web search',prompt:searchQuery});
+          }
+          if (hasSecurity) {
+            steps.push({icon:'\u{1F6E1}',agent:'cassandra',label:plannerLang==='Italian'?'Analisi rischi':'Risk analysis',prompt:'Analyze the data and identify security risks and recommendations'});
+          } else if (hasFinance) {
+            steps.push({icon:'\u{1F4B0}',agent:'mercury',label:plannerLang==='Italian'?'Analisi finanziaria':'Financial analysis',prompt:'Analyze the financial data and market information'});
+          } else if (hasBriefing || steps.length > 0) {
+            steps.push({icon:'\u{1F4F0}',agent:'HERALD',label:plannerLang==='Italian'?'Analisi e briefing':'Analysis & briefing',prompt:'Based on ALL the data collected by the previous steps, write a complete executive briefing with priorities, findings, and strategic recommendations. Do NOT invent data — only use what was provided.'});
+          }
+          if (hasCanvas) steps.push({icon:'\u{1F4CA}',agent:'CanvasAgent',label:plannerLang==='Italian'?'Dashboard HTML':'HTML Dashboard',prompt:'Create a professional HTML dashboard report with the briefing data'});
+          return steps;
+        };
 
-Example output:
-{"steps":[{"icon":"🔍","agent":"WebSearchAgent","label":"Cerca notizie","prompt":"Cerca le ultime notizie su intelligenza artificiale oggi"},{"icon":"📰","agent":"HERALD","label":"Analisi notizie","prompt":"Analizza le notizie trovate e crea un briefing esecutivo"},{"icon":"📊","agent":"CanvasAgent","label":"Dashboard HTML","prompt":"Crea una dashboard HTML visuale con i risultati"}]}`;
+        // Use keyword plan directly if it covers the task well enough
+        // Only fall back to LLM planning for genuinely ambiguous tasks
+        const keywordSteps = buildKeywordPlan();
+        const taskIsComplex = !hasEmail && !hasCalendar && !hasSearch && !hasGitHub && !hasSlack && !hasBriefing && keywordSteps.length <= 1;
 
         try {
-          // Force thinking OFF for planner — we need deterministic JSON, not reasoning chains
-          const planConfig = Object.assign({}, config, { thinking: 'off' });
-          const planRaw = await callLLM(planConfig, 'You are a JSON workflow planner. Output ONLY valid JSON. No thinking, no explanation, no markdown.', planPrompt, { max_tokens: 1500 });
-          process.stderr.write('[STUDIO PLAN RAW] ' + planRaw.slice(0, 400) + '\n');
           let steps;
-          try {
-            // Strip ALL <think>...</think> blocks (greedy — handles nested/multiple)
-            let clean = planRaw;
-            let prev = '';
-            while (prev !== clean) { prev = clean; clean = clean.replace(/<think>[\s\S]*?<\/think>/g, ''); }
-            clean = clean.trim();
-            // Strip markdown fences
-            clean = clean.replace(/^```[\w]*\r?\n?/,'').replace(/\r?\n?```$/,'').trim();
-            // Extract first complete JSON object
-            const jsonMatch = clean.match(/\{[\s\S]*\}/);
-            const parsed = JSON.parse(jsonMatch ? jsonMatch[0] : clean);
-            steps = parsed.steps;
-          } catch (parseErr) {
-            process.stderr.write('[STUDIO PLAN PARSE ERR] ' + parseErr.message + '\n');
-            // Fallback: build a sensible default plan from the task keywords
-            const hasEmail = /email|mail/i.test(task);
-            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:'\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 (!taskIsComplex) {
+            // Use keyword plan directly — no LLM, no SENTINEL risk
+            process.stderr.write('[STUDIO PLAN KEYWORD] steps=' + keywordSteps.length + '\n');
+            steps = keywordSteps;
+          } else {
+            // Task is ambiguous — use LLM planner with sanitized short description
+            const shortTask = task.slice(0, 200).replace(/[`'"]/g, ' ');
+            const plannerLangStr = plannerLang;
+            const planPrompt = `Workflow planner. Goal: ${shortTask}\nLanguage: ${plannerLangStr}.\nOutput ONLY JSON:\n{"steps":[{"icon":"EMOJI","agent":"AGENT_NAME","label":"LABEL","prompt":"INSTRUCTION"}]}\nAgents: WebSearchAgent, EmailAgent, CalendarAgent, HERALD, ORACLE, ATHENA, CASSANDRA, MERCURY, QUILL, CanvasAgent (last, only if visual needed). 2-5 steps.`;
+            const planConfig = Object.assign({}, config, { thinking: 'off' });
+            const planRaw = await callLLM(planConfig, 'Output ONLY valid JSON. No explanation.', planPrompt, { max_tokens: 800 });
+            process.stderr.write('[STUDIO PLAN LLM RAW] ' + planRaw.slice(0, 400) + '\n');
+            try {
+              let clean = planRaw;
+              let prev = '';
+              while (prev !== clean) { prev = clean; clean = clean.replace(/<think>[\s\S]*?<\/think>/g, ''); }
+              clean = clean.trim().replace(/^```[\w]*\r?\n?/,'').replace(/\r?\n?```$/,'').trim();
+              const jsonMatch = clean.match(/\{[\s\S]*\}/);
+              const parsed = JSON.parse(jsonMatch ? jsonMatch[0] : clean);
+              steps = parsed.steps;
+            } catch (parseErr) {
+              process.stderr.write('[STUDIO PLAN PARSE ERR] ' + parseErr.message + '\n');
+              steps = keywordSteps;
+            }
           }
           if (!Array.isArray(steps) || !steps.length) {
             sendJSON(res, 500, { error: 'Empty workflow plan' });
@@ -2742,94 +2771,42 @@ 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 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>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: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: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}
-.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 — 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.`;
+          // ── Canvas HTML template — built server-side, guaranteed CSS ─────
+          // The LLM outputs ONLY the <body> inner HTML (no <html>, no <style>)
+          // Server wraps it in the full template. This prevents the model from ignoring CSS.
+          const NHA_CSS = `*{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;font-size:14px;line-height:1.65}a{color:#22d3ee;text-decoration:underline}a:hover{color:#818cf8}strong{color:#f0f0f5;font-weight:700}em{color:#a5b4fc;font-style:italic}u{text-decoration-color:#ef4444;text-underline-offset:2px}blockquote{border-left:3px solid #6366f1;padding:10px 16px;margin:12px 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:24px;font-weight:800;color:#fff;margin-bottom:6px}.header p{font-size:13px;color:rgba(255,255,255,.85);margin:0}.meta{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}.meta span{background:rgba(255,255,255,.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(200px,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:20px;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: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}.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}.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}`;
+
+          const wrapInNHATemplate = (bodyHtml, title) => `<!DOCTYPE html><html lang="${langCode}"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>${(title||'NHA Report').replace(/</g,'&lt;')}</title><style>${NHA_CSS}</style></head><body>${bodyHtml}</body></html>`;
+
+          const canvasSystemPrompt = `You are a professional HTML content generator. Output ONLY the HTML content that goes INSIDE the <body> tag. Do NOT output <!DOCTYPE>, <html>, <head>, <style>, or any wrapper tags — the CSS and document structure are already provided by the system.
+
+AVAILABLE CSS CLASSES (use these, they are pre-defined):
+- .header > h1, p, .meta > span (gradient header banner)
+- .grid > .card > .card-label, h3, p (stat grid)
+- .section > .section-title, h3, p (content sections)
+- .source-item > h4, p, a (news/source items with left accent)
+- .priority-list > .priority-item > .priority-num, h4, p (ranked list)
+- .bar-row > .bar-label, .bar-track > .bar-fill[style="width:X%"] (bar charts)
+- .badge-high .badge-med .badge-low .badge-info (colored badges)
+- ul > li, ol > li (bullet/numbered lists with custom styling)
+- blockquote (quoted excerpts)
+- .divider (horizontal rule)
+- .footer (footer)
+- <strong> <em> <u> (inline formatting)
+- <a href="URL" target="_blank"> (clickable links — use for ALL URLs in the data)
+
+RULES:
+- Language: ${language}. ALL text must be in ${language}.
+- Use REAL data from the input — do NOT invent or fabricate
+- URLs from the data: ALWAYS wrap in <a href="URL" target="_blank">clickable text</a>
+- Use .priority-list for action items, .source-item for each email/news source, .bar-row for any percentage data
+- Output must start with <div class="header"> and end with <div class="footer">`;
 
           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, 10000)}`;
+            userMsg = `Create a professional dashboard report for this data. Output ONLY the inner HTML body content (starting with <div class="header">):\n\n${context.slice(0, 10000)}`;
           } else if (isLiveDataAgent) {
             // 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}.
@@ -2898,50 +2875,37 @@ ${context ? `## OUTPUT FROM PREVIOUS AGENTS:\n${context.slice(0, 6000)}\n` : ''}
           }
 
           if (isCanvasAgent) {
-            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]*?)```/i);
-            if (mdMatch) html = mdMatch[1].trim();
-            // 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 = (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);
-                const titleLine = lines[0] || '';
-                const bodyLines = lines.slice(1).join('\n').trim();
-                return `<div class="card">${titleLine ? `<h2>${titleLine.replace(/</g,'&lt;')}</h2>` : ''}<p>${(bodyLines || titleLine).replace(/\n/g, '</p><p>').replace(/</g,'&lt;')}</p></div>`;
-              }).join('');
-              const safeContext = context.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/\n/g,'</p><p>');
-              html = `<!DOCTYPE html><html><head><meta charset="utf-8"><title>Report</title><style>
-*{box-sizing:border-box;margin:0;padding:0}
-body{font-family:system-ui,-apple-system,sans-serif;background:#f8fafc;color:#1e293b;padding:0}
-.header{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;padding:48px 40px;margin-bottom:32px}
-.header h1{font-size:1.8em;font-weight:700;margin-bottom:8px}
-.header p{opacity:.85;font-size:1em}
-.content{max-width:900px;margin:0 auto;padding:0 32px 48px}
-.card{background:#fff;border-radius:12px;padding:28px;margin-bottom:20px;box-shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05);border:1px solid #e2e8f0}
-.card h2{color:#6366f1;font-size:1.05em;font-weight:700;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid #f1f5f9}
-.card p{color:#475569;line-height:1.75;margin-bottom:8px}
-.card p:last-child{margin-bottom:0}
-</style></head><body>
-<div class="header"><h1>${reportTitle}</h1><p>Report generated by NHA Studio</p></div>
-<div class="content">${cardsHtml || '<div class="card"><p>' + safeContext + '</p></div>'}</div>
-</body></html>`;
+            let bodyHtml = fullOutput.trim();
+            // Strip thinking tags
+            bodyHtml = bodyHtml.replace(/<think>[\s\S]*?<\/think>/g, '').trim();
+            // Strip markdown code fences
+            const mdMatch = bodyHtml.match(/```html?\s*([\s\S]*?)```/i);
+            if (mdMatch) bodyHtml = mdMatch[1].trim();
+            // If model returned full HTML despite instructions, extract body content
+            const bodyTagMatch = bodyHtml.match(/<body[^>]*>([\s\S]*?)<\/body>/i);
+            if (bodyTagMatch) bodyHtml = bodyTagMatch[1].trim();
+            // If model returned <!DOCTYPE (full doc), extract everything after <body> open tag
+            else if (bodyHtml.includes('<!DOCTYPE') || bodyHtml.includes('<html')) {
+              const bodyStart = bodyHtml.search(/<body[^>]*>/i);
+              if (bodyStart >= 0) bodyHtml = bodyHtml.slice(bodyStart).replace(/<body[^>]*>/i, '').replace(/<\/body>[\s\S]*/i, '').trim();
+            }
+            // Fallback: if LLM output is empty or has no HTML tags, build body from context using markdown→HTML conversion
+            if (!bodyHtml || !bodyHtml.includes('<')) {
+              const reportTitle = task.slice(0, 80).replace(/</g,'&lt;');
+              const sections = context.split(/\n#{1,3} |(?=\n\n)/).filter(s => s.trim()).slice(0, 12);
+              bodyHtml = `<div class="header"><h1>${reportTitle}</h1><p>NHA Studio Report \u00b7 ${today}</p><div class="meta"><span>${today}</span></div></div>` +
+                sections.map(s => {
+                  const lines = s.replace(/\*\*/g,'').replace(/\*/g,'').trim().split('\n').filter(Boolean);
+                  const title = lines[0] || '';
+                  const body = lines.slice(1).map(l => `<p>${l.replace(/</g,'&lt;')}</p>`).join('');
+                  return `<div class="section"><div class="section-title">${title.replace(/</g,'&lt;')}</div>${body}</div>`;
+                }).join('') +
+                `<div class="footer">NHA Studio \u00b7 ${today}</div>`;
             }
+            // Always wrap in the guaranteed NHA dark CSS template
+            const finalHtml = wrapInNHATemplate(bodyHtml, task.slice(0, 60));
             sendToken('\n\n[Report generato]');
-            sendEvent({ canvas: html });
+            sendEvent({ canvas: finalHtml });
           }
 
           // Estimate token usage (aprox: 1 token ≈ 4 chars)

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

package/src/services/web-ui.mjs

@@ -3218,7 +3218,14 @@ function runStudioStep(idx, node, task, context, stepDef, signal) {
               if (ev.token) {
                 // Tool status tokens (start with '[') shown in dim color, LLM output streamed normally
                 var isStatus = ev.token.charAt(0) === '[' && ev.token.indexOf(']') > 0 && ev.token.length < 80;
-                if (!isStatus) output += ev.token;
+                if (!isStatus) {
+                  var tok = ev.token;
+                  // Insert space between tokens if missing (Qwen3/Liara emits tokens without separators)
+                  if (output && tok && !/[\s\n]$/.test(output) && !/^[\s\n.,;:!?)\]}\u2019\u0027"]/.test(tok)) {
+                    tok = ' ' + tok;
+                  }
+                  output += tok;
+                }
                 // Update live log entry
                 var entries = document.querySelectorAll('.studio-log-entry');
                 var last = entries[entries.length - 1];