src/ApplicationBundle/Modules/Ai/Resources/views/hivemind_widget.html.twig line 1

Open in your IDE?
  1. {#
  2.   Hivemind floating dashboard widget — included on every ERP page via the
  3.   master skeleton. Collapsed: a small "● HIVEMIND" pill bottom-right.
  4.   Expanded: a compact panel with input + transcript that talks to the same
  5.   /ai/command/parse + /ai/command/execute endpoints the full UI uses.
  7.   Complex flows (multi-step pickers, write confirms) hand off to the full
  8.   /ai/hivemind page via a "↗ open full" button.
  9. #}
  10. {% if app.user is not null or session is defined %}
  11. <style>
  12.   #hm-widget-root {
  13.     --hm-w-bg: #0c0d10;
  14.     --hm-w-bg-soft: #14161b;
  15.     --hm-w-fg: #e6edf3;
  16.     --hm-w-muted: #8a92a1;
  17.     --hm-w-rule: #232830;
  18.     --hm-w-signal: #4ade80;
  19.     --hm-w-signal-glow: rgba(74,222,128,0.5);
  20.     --hm-w-danger: #f87171;
  21.     --hm-w-success: #4ade80;
  22.     position: fixed;
  23.     bottom: 22px;
  24.     right: 22px;
  25.     z-index: 1050;
  26.     font-family: 'JetBrains Mono','Cascadia Code','Consolas','Courier New',monospace;
  27.     font-size: var(--cp-fs-sm, 12.5px);
  28.     color: var(--hm-w-fg);
  29.     transition: width 220ms ease, height 220ms ease;
  30.   }
  31.   #hm-widget-pill {
  32.     display: inline-flex;
  33.     align-items: center;
  34.     gap: 10px;
  35.     padding: 10px 16px 10px 14px;
  36.     background: var(--hm-w-bg);
  37.     border: 1px solid var(--hm-w-rule);
  38.     border-radius: 999px;
  39.     cursor: pointer;
  40.     user-select: none;
  41.     box-shadow: 0 6px 22px rgba(0,0,0,0.35);
  42.     transition: transform 160ms ease, box-shadow 160ms ease;
  43.     letter-spacing: 0.20em;
  44.     font-weight: 700;
  45.     font-size: 12px;
  46.   }
  47.   #hm-widget-pill:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.55); }
  48.   #hm-widget-pill .dot {
  49.     width: 8px; height: 8px; border-radius: 50%;
  50.     background: var(--hm-w-signal);
  51.     box-shadow: 0 0 8px var(--hm-w-signal-glow);
  52.     animation: hm-w-pulse 1.7s ease-in-out infinite;
  53.   }
  54.   @keyframes hm-w-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(1.25)} }
  56.   #hm-widget-panel {
  57.     display: none;
  58.     flex-direction: column;
  59.     width: 380px;
  60.     height: 520px;
  61.     background: var(--hm-w-bg);
  62.     border: 1px solid var(--hm-w-rule);
  63.     box-shadow: 0 14px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04);
  64.     overflow: hidden;
  65.   }
  66.   #hm-widget-root.open #hm-widget-pill   { display: none; }
  67.   #hm-widget-root.open #hm-widget-panel  { display: flex; }
  68.   #hm-widget-panel .hm-w-head {
  69.     display: flex; align-items: center; justify-content: space-between;
  70.     padding: 10px 14px; border-bottom: 1px solid var(--hm-w-rule);
  71.   }
  72.   #hm-widget-panel .hm-w-brand {
  73.     display: flex; align-items: center; gap: 9px;
  74.     font-weight: 700; letter-spacing: 0.22em; font-size: 12px;
  75.   }
  76.   #hm-widget-panel .hm-w-brand .dot {
  77.     width: 7px; height: 7px; border-radius: 50%;
  78.     background: var(--hm-w-signal); box-shadow: 0 0 6px var(--hm-w-signal-glow);
  79.   }
  80.   #hm-widget-panel .hm-w-head-actions {
  81.     display: flex; gap: 6px;
  82.   }
  83.   #hm-widget-panel .hm-w-iconbtn {
  84.     background: transparent; color: var(--hm-w-muted); border: 1px solid var(--hm-w-rule);
  85.     cursor: pointer; padding: 3px 8px; font-family: inherit; font-size: 12px;
  86.     letter-spacing: 0.16em; text-transform: uppercase;
  87.   }
  88.   #hm-widget-panel .hm-w-iconbtn:hover { color: var(--hm-w-fg); border-color: var(--hm-w-fg); }
  90.   #hm-widget-panel .hm-w-body {
  91.     flex: 1; overflow-y: auto; padding: 12px 14px;
  92.     background: linear-gradient(180deg, var(--hm-w-bg) 0%, var(--hm-w-bg-soft) 100%);
  93.   }
  94.   #hm-widget-panel .hm-w-body::-webkit-scrollbar { width: 6px; }
  95.   #hm-widget-panel .hm-w-body::-webkit-scrollbar-thumb { background: var(--hm-w-rule); border-radius: 3px; }
  97.   .hm-w-line { margin-bottom: 5px; white-space: pre-wrap; line-height: 1.55; }
  98.   .hm-w-line .pre { color: var(--hm-w-muted); margin-right: 8px; }
  99.   .hm-w-line.user .pre { color: var(--hm-w-fg); font-weight: 700; }
  100.   .hm-w-line.error  { color: var(--hm-w-danger); }
  101.   .hm-w-line.success { color: var(--hm-w-success); }
  102.   .hm-w-card {
  103.     background: rgba(255,255,255,0.025);
  104.     border: 1px solid var(--hm-w-rule);
  105.     padding: 9px 11px; margin: 8px 0 10px 18px;
  106.     font-size: 12px; line-height: 1.6;
  107.   }
  108.   .hm-w-card .row { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
  109.   .hm-w-card .row + .row { border-top: 1px dashed var(--hm-w-rule); }
  110.   .hm-w-card .k { color: var(--hm-w-muted); }
  111.   .hm-w-card .v { font-weight: 600; }
  113.   #hm-widget-panel .hm-w-foot {
  114.     display: flex; align-items: center; gap: 8px;
  115.     padding: 10px 12px; border-top: 1px solid var(--hm-w-rule);
  116.   }
  117.   #hm-widget-panel .hm-w-prompt {
  118.     color: var(--hm-w-muted); letter-spacing: 0.14em; font-size: 12px; font-weight: 700;
  119.   }
  120.   #hm-widget-panel #hm-w-input {
  121.     flex: 1; background: transparent; color: var(--hm-w-fg); border: none; outline: none;
  122.     font-family: inherit; font-size: var(--cp-fs-sm, 12.5px);
  123.   }
  124.   #hm-widget-panel #hm-w-input:disabled { opacity: 0.4; }
  125.   #hm-widget-panel .hm-w-caret {
  126.     display: inline-block; width: 7px; height: 13px; background: var(--hm-w-fg);
  127.     animation: hm-w-blink 1s steps(1) infinite;
  128.   }
  129.   @keyframes hm-w-blink { 50%{opacity:0} }
  131.   /* ── Chat-bubble layout (General). Shares hb_hivemind_ui_mode with the full
  132.      page; the compact widget renders both general + messenger as bubbles. ── */
  133.   #hm-widget-root[data-ui-mode="general"] .hm-w-body,
  134.   #hm-widget-root[data-ui-mode="messenger"] .hm-w-body {
  135.     font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  136.   }
  137.   #hm-widget-root[data-ui-mode="general"] .hm-w-line,
  138.   #hm-widget-root[data-ui-mode="messenger"] .hm-w-line {
  139.     max-width: 84%; width: fit-content; padding: 7px 11px; border-radius: 13px; margin: 5px 0;
  140.   }
  141.   #hm-widget-root[data-ui-mode="general"] .hm-w-line .pre,
  142.   #hm-widget-root[data-ui-mode="messenger"] .hm-w-line .pre { display: none; }
  143.   #hm-widget-root[data-ui-mode="general"] .hm-w-line.user,
  144.   #hm-widget-root[data-ui-mode="messenger"] .hm-w-line.user {
  145.     margin-left: auto; background: var(--hm-w-signal); color: var(--hm-w-bg); border-bottom-right-radius: 4px;
  146.   }
  147.   #hm-widget-root[data-ui-mode="general"] .hm-w-line:not(.user),
  148.   #hm-widget-root[data-ui-mode="messenger"] .hm-w-line:not(.user) {
  149.     margin-right: auto; background: var(--hm-w-bg-soft); border: 1px solid var(--hm-w-rule); border-bottom-left-radius: 4px;
  150.   }
  151.   #hm-widget-root[data-ui-mode="general"] .hm-w-card,
  152.   #hm-widget-root[data-ui-mode="messenger"] .hm-w-card {
  153.     margin: 6px auto 8px 0; max-width: 90%; border-radius: 12px;
  154.   }
  155. </style>
  157. <div id="hm-widget-root" data-ui-mode="terminal">
  158.   <div id="hm-widget-pill" title="Open Hivemind (Ctrl+`)">
  159.     <span class="dot"></span>HIVEMIND
  160.   </div>
  161.   <div id="hm-widget-panel">
  162.     <div class="hm-w-head">
  163.       <div class="hm-w-brand"><span class="dot"></span>HIVEMIND</div>
  164.       <div class="hm-w-head-actions">
  165.         <button class="hm-w-iconbtn" id="hm-w-uimode" title="Toggle chat layout (Terminal / General)" aria-label="Toggle chat layout">CHAT</button>
  166.         <a class="hm-w-iconbtn" href="{{ url('ai_hivemind') }}" title="Open full terminal">↗ FULL</a>
  167.         <button class="hm-w-iconbtn" id="hm-w-close" title="Minimise">─</button>
  168.       </div>
  169.     </div>
  170.     <div class="hm-w-body" id="hm-w-body"></div>
  171.     <div class="hm-w-foot">
  172.       <span class="hm-w-prompt">&gt;</span>
  173.       <input id="hm-w-input" type="text" placeholder="Ask something… /cash · /reports · /approvals" autocomplete="off" spellcheck="false" />
  174.       <span class="hm-w-caret"></span>
  175.     </div>
  176.   </div>
  177. </div>
  179. <script>
  180. (function () {
  181.   if (window.__hivemindWidgetInit) return;
  182.   window.__hivemindWidgetInit = true;
  184.   const root  = document.getElementById('hm-widget-root');
  185.   const pill  = document.getElementById('hm-widget-pill');
  186.   const closeBtn = document.getElementById('hm-w-close');
  187.   const body  = document.getElementById('hm-w-body');
  188.   const input = document.getElementById('hm-w-input');
  190.   const OPEN_KEY = 'hivemind.widget.open';
  191.   function setOpen(open) {
  192.     root.classList.toggle('open', !!open);
  193.     localStorage.setItem(OPEN_KEY, open ? '1' : '0');
  194.     if (open) setTimeout(() => input.focus(), 60);
  195.   }
  196.   setOpen(localStorage.getItem(OPEN_KEY) === '1');
  198.   // ── UI layout (Terminal / General) — shares hb_hivemind_ui_mode with the
  199.   //    full page. CSS only; the command pipeline is untouched. ──
  200.   const uiBtn = document.getElementById('hm-w-uimode');
  201.   const UI_MODE_KEY = 'hb_hivemind_ui_mode';
  202.   function applyUiMode(m) {
  203.     const bubble = (m === 'general' || m === 'messenger');
  204.     root.setAttribute('data-ui-mode', bubble ? 'general' : 'terminal');
  205.     if (uiBtn) { uiBtn.textContent = bubble ? 'TERM' : 'CHAT'; }
  206.   }
  207.   applyUiMode(localStorage.getItem(UI_MODE_KEY) || 'terminal');
  208.   if (uiBtn) uiBtn.addEventListener('click', () => {
  209.     const cur = localStorage.getItem(UI_MODE_KEY) || 'terminal';
  210.     const next = (cur === 'terminal') ? 'general' : 'terminal';
  211.     localStorage.setItem(UI_MODE_KEY, next);
  212.     applyUiMode(next);
  213.   });
  214.   // Reflect a change made on the full page (same key) if both are open.
  215.   window.addEventListener('storage', (e) => { if (e.key === UI_MODE_KEY) applyUiMode(e.newValue || 'terminal'); });
  217.   pill.addEventListener('click', () => setOpen(true));
  218.   closeBtn.addEventListener('click', () => setOpen(false));
  219.   // Keyboard shortcut: Ctrl + ` toggles
  220.   document.addEventListener('keydown', (e) => {
  221.     if (e.ctrlKey && e.key === '`') {
  222.       e.preventDefault();
  223.       setOpen(!root.classList.contains('open'));
  224.     }
  225.   });
  227.   function esc(s) {
  228.     return String(s == null ? '' : s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
  229.   }
  230.   function fmt(n) {
  231.     return Number(n || 0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
  232.   }
  233.   function addLine(kind, text) {
  234.     const div = document.createElement('div');
  235.     div.className = 'hm-w-line ' + kind;
  236.     div.innerHTML = '<span class="pre">' + (kind === 'user' ? '$' : '&gt;') + '</span>' + esc(text);
  237.     body.appendChild(div); body.scrollTop = body.scrollHeight;
  238.     return div;
  239.   }
  240.   function addCard(html) {
  241.     const w = document.createElement('div'); w.className = 'hm-w-card'; w.innerHTML = html;
  242.     body.appendChild(w); body.scrollTop = body.scrollHeight;
  243.     return w;
  244.   }
  245.   function row(k, v) { return '<div class="row"><span class="k">' + esc(k) + '</span><span class="v">' + esc(v) + '</span></div>'; }
  247.   function renderSimpleResult(env, body0) {
  248.     const r = body0.result || {};
  249.     switch (env.tool) {
  250.       case 'get_cash_position':
  251.         addCard(row('Cash + bank total', fmt(r.grand_total))
  252.               + row('Ledger count', r.ledger_count));
  253.         break;
  254.       case 'get_party_balance':
  255.         addCard(row('Party', (r.name || '') + ' (#' + r.party_id + ')')
  256.               + row('Invoiced', fmt(r.invoiced))
  257.               + row('Received', fmt(r.received))
  258.               + row('Due',      fmt(r.due)));
  259.         break;
  260.       case 'get_overdue_invoices':
  261.         addCard(row('Overdue invoices', r.row_count)
  262.               + row('Total due',        fmt(r.total_due)));
  263.         break;
  264.       case 'search_party':
  265.         addCard(row('Matches', (r.matches || []).map(m => '#' + m.id + ' ' + (m.name || '')).slice(0,5).join('<br>') || '—'));
  266.         break;
  267.       case 'list_pending_approvals':
  268.         addCard(row('Pending', r.row_count)
  269.               + ((r.pending || []).slice(0,5).map(p => row(p.entity_type_name + ' #' + p.entity_id, p.document_hash || '')).join('') || ''));
  270.         break;
  271.       case 'run_report':
  272.         const insights = (r.insights || []).slice(0,3).map(i => row(i.label, typeof i.value === 'number' ? fmt(i.value) : String(i.value))).join('');
  273.         addCard('<div style="font-size:11px;letter-spacing:0.18em;color:var(--hm-w-muted);text-transform:uppercase;margin-bottom:5px">' + esc(r.title || r.marker || 'Report') + '</div>' + insights + (r.summary ? '<div style="color:var(--hm-w-muted);margin-top:5px">' + esc(r.summary) + '</div>' : ''));
  274.         break;
  275.       default:
  276.         addCard(row('Result', JSON.stringify(r).slice(0, 200)));
  277.     }
  278.     if (body0.message) addLine('', body0.message);
  279.   }
  281.   async function postJson(url, payload) {
  282.     const res = await fetch(url, {
  283.       method: 'POST', credentials: 'same-origin',
  284.       headers: { 'Content-Type': 'application/json' },
  285.       body: JSON.stringify(payload),
  286.     });
  287.     let bod;
  288.     try { bod = await res.json(); } catch { bod = { message: 'Bad JSON' }; }
  289.     return { status: res.status, body: bod };
  290.   }
  292.   // Compact confirm-before-commit draft (CO6) — same approval rail as the full
  293.   // cockpit: preview here, confirm posts through /ai/command/execute (mode=confirm).
  294.   function renderWidgetDraft(draft) {
  295.     const rows = Object.entries(draft.preview || {})
  296.       .map(([k, v]) => row(k, typeof v === 'object' ? JSON.stringify(v) : String(v))).join('');
  297.     const card = addCard(
  298.       '<div style="font-weight:700;letter-spacing:.1em;color:var(--hm-w-signal);margin-bottom:6px">▸ DRAFT · '
  299.         + esc((draft.tool || '').replace(/_/g, ' ').toUpperCase()) + '</div>'
  300.       + rows
  301.       + '<div style="margin:6px 0;color:var(--hm-w-muted);font-size:11.5px">Nothing posts until you confirm.</div>'
  302.       + '<div class="hm-w-draft-actions" style="display:flex;gap:6px;margin-top:8px">'
  303.       + '<button class="hm-w-iconbtn hm-w-do-confirm">▸ CONFIRM</button>'
  304.       + '<button class="hm-w-iconbtn hm-w-do-cancel">CANCEL</button></div>');
  305.     const acts = card.querySelector('.hm-w-draft-actions');
  306.     card.querySelector('.hm-w-do-confirm').addEventListener('click', async () => {
  307.       acts.innerHTML = '<span style="color:var(--hm-w-muted);font-size:11.5px">posting…</span>';
  308.       const ex = await postJson('/ai/command/execute', {
  309.         tool: draft.tool, version: draft.version || '1.0', arguments: draft.arguments || {},
  310.         mode: 'confirm', draft_id: draft.draft_id, source: 'widget',
  311.       });
  312.       if (ex.status >= 200 && ex.status < 300 && ex.body && ex.body.success) {
  313.         addLine('success', (ex.body.message) || 'Posted.');
  314.       } else {
  315.         addLine('error', (ex.body && ex.body.message) || ('Confirm failed (HTTP ' + ex.status + ')'));
  316.       }
  317.     });
  318.     card.querySelector('.hm-w-do-cancel').addEventListener('click', () => {
  319.       acts.innerHTML = '<span style="color:var(--hm-w-muted);font-size:11.5px">cancelled</span>';
  320.     });
  321.   }
  323.   async function handle(text) {
  324.     if (!text.trim()) return;
  325.     addLine('user', text);
  326.     input.value = ''; input.disabled = true;
  327.     try {
  328.       const parseRes = await postJson('/ai/command/parse', { chat: text, conversation: [], current_page: 'widget' });
  329.       const data = parseRes.body || {};
  331.       // EL4b — chat intake pre-warm: known pitfalls for the resolved intent, up-front
  332.       // before the action runs. Count + real ids only; server attaches only when negatives
  333.       // exist (flag-gated + fail-open), so this is a no-op otherwise.
  334.       if (data.prewarm && data.prewarm.total > 0) {
  335.         const ids = (data.prewarm.items || []).map(n => '#' + n.id).join(', ');
  336.         addLine('', '⚠ heads-up — this kind of thing didn\'t work out ' + data.prewarm.total + '× before' + (ids ? ' (' + ids + ')' : ''));
  337.       }
  339.       if (data.status === 'chat') {
  340.         const reply = data.reply || data.follow_up_question || 'Hello.';
  341.         String(reply).split('\n').forEach(ln => addLine('', ln));
  342.         return;
  343.       }
  344.       if (data.status === 'error') {
  345.         addLine('error', data.follow_up_question || 'Parser error.');
  346.         return;
  347.       }
  348.       // ── AICOO: reasoning / analytical / write-by-conversation → SAME brain
  349.       //    as the full cockpit (one brain, two surfaces). ──
  350.       if (data.status === 'agent') {
  351.         const think = addLine('', '…thinking');
  352.         const ask = await postJson('/ai/command/ask', { message: text, history: [], source: 'widget' });
  353.         if (think && think.remove) think.remove();
  354.         const turn = ask.body || {};
  355.         if (!(ask.status >= 200 && ask.status < 300 && turn.success)) {
  356.           addLine('error', (turn && turn.message) || 'The assistant could not answer.');
  357.           return;
  358.         }
  359.         if (turn.answer) String(turn.answer).split('\n').forEach(ln => addLine('', ln));
  360.         const used = [...new Set((turn.sources || []).map(s => (s.tool || '').replace(/_/g, ' ')).filter(Boolean))];
  361.         if (used.length) addLine('', 'grounded on: ' + used.join(', '));
  362.         if (turn.draft && turn.draft.draft_id) renderWidgetDraft(turn.draft);
  363.         if (turn.reports && turn.reports.length) addLine('', '📊 ' + turn.reports.length + ' chart/table — ↗ open full for the visual');
  364.         return;
  365.       }
  366.       const env = data.envelope;
  367.       if (!env) { addLine('error', 'No envelope.'); return; }
  369.       // Complex flows (preview/confirm + multi-step pickers) hand off to full Hivemind.
  370.       const needsFull = env.next_intent
  371.         || env.tool === 'create_payment' || env.tool === 'create_receipt'
  372.         || env.tool === 'create_expense' || env.tool === 'create_journal_voucher'
  373.         || env.tool === 'create_contra_voucher' || env.tool === 'create_sales_order'
  374.         || env.tool === 'create_purchase_order' || env.tool === 'create_sales_proposal'
  375.         || env.tool === 'approve_document';
  376.       if (needsFull) {
  377.         addLine('', 'This needs the full terminal. Opening Hivemind…');
  378.         sessionStorage.setItem('hivemind.bootstrap_chat', text);
  379.         window.location.href = '{{ url('ai_hivemind') }}';
  380.         return;
  381.       }
  382.       if (data.status === 'needs_input') {
  383.         addLine('', data.follow_up_question || 'Need more details.');
  384.         return;
  385.       }
  386.       // Read-only flow: execute immediately
  387.       const exec = await postJson('/ai/command/execute', {
  388.         tool: env.tool, version: env.version || '1.0',
  389.         arguments: env.arguments || {}, mode: 'preview',
  390.         source: 'widget',
  391.         idempotency_key: 'widget-' + Date.now() + '-' + Math.random().toString(36).slice(2,8),
  392.       });
  393.       if (exec.status >= 200 && exec.status < 300 && exec.body.success) {
  394.         renderSimpleResult(env, exec.body);
  395.       } else {
  396.         addLine('error', exec.body.message || ('HTTP ' + exec.status));
  397.       }
  398.     } catch (e) {
  399.       addLine('error', 'Network error: ' + (e.message || String(e)));
  400.     } finally {
  401.       input.disabled = false;
  402.       input.focus();
  403.     }
  404.   }
  406.   input.addEventListener('keydown', (e) => {
  407.     if (e.key === 'Enter' && !e.shiftKey) {
  408.       e.preventDefault();
  409.       handle(input.value);
  410.     }
  411.   });
  413.   // Greet first-time openers.
  414.   if (body.children.length === 0) {
  415.     addLine('', 'Hivemind ready. Try /cash, /reports, /approvals, or ask in plain language.');
  416.   }
  418.   // If the user clicked something that needed full terminal, the widget left
  419.   // a bootstrap-chat token in sessionStorage — full Hivemind picks it up.
  420. })();
  421. </script>
  422. {% endif %}