Chat: show the detected device and tell the AI about it; download progress inside the message box

app/renderer/knowledge.js

@@ -105,9 +105,10 @@ export function auditBrief(evidence, maxGaps = 8) {
 }
 
 // Messages for one chat turn. history: earlier [{role, content}] turns (already answered).
-export function chatMessages(question, passages, audit = 'none', history = []) {
+// device: what the browser saw about the device the chat runs on (chat/device.js deviceBrief), or null.
+export function chatMessages(question, passages, audit = 'none', history = [], device = null) {
   const context = passages.length ? passages.map((p, n) => `[${n + 1}] ${p.title}: ${p.text}`).join('\n') : '(no matching passages)';
-  const user = `CONTEXT:\n${context}\n\nMY AUDIT: ${audit}\n\nQUESTION: ${question}`;
+  const user = `CONTEXT:\n${context}\n\nMY AUDIT: ${audit}\n\n${device ? `MY DEVICE: ${device}\n\n` : ''}QUESTION: ${question}`;
   return [{ role: 'system', content: CHAT_SYSTEM_PROMPT }, ...history.slice(-4), { role: 'user', content: user }];
 }
 

chat/chat.css

@@ -67,7 +67,7 @@ main { flex: 1; overflow-y: auto; padding: 18px 14px 8px; }
 .primary-btn { border: 0; background: var(--accent); color: #fff; border-radius: 10px; padding: 8px 14px; font-size: 14px; font-weight: 700; }
 
 #composer { display: flex; align-items: flex-end; gap: 8px; max-width: 812px; width: 100%; margin: 0 auto; padding: 8px 14px 4px; flex-shrink: 0; }
-.input-pill { flex: 1; display: flex; background: var(--input-bg); border: 1px solid var(--border); border-radius: 22px; padding: 4px 6px 4px 16px; }
+.input-pill { position: relative; overflow: hidden; flex: 1; display: flex; background: var(--input-bg); border: 1px solid var(--border); border-radius: 22px; padding: 4px 6px 4px 16px; }
 .input-pill:focus-within { box-shadow: 0 0 0 2px var(--accent-border); }
 #input { flex: 1; border: 0; outline: 0; resize: none; background: transparent; color: var(--text); font: inherit; max-height: 180px; padding: 9px 0; }
 #input:disabled { cursor: not-allowed; }
@@ -107,3 +107,48 @@ main { flex: 1; overflow-y: auto; padding: 18px 14px 8px; }
 .ai-card .btn-row { margin-top: 10px; }
 .quick-actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
 @media (max-width: 560px) { .ai-chip { padding: 6px 8px; font-size: 12px; } }
+
+/* While the AI assistant downloads, the locked message box is the progress bar. */
+.input-pill.loading { background: linear-gradient(90deg, var(--accent-soft) var(--progress, 0%), var(--input-bg) var(--progress, 0%)); border-color: var(--accent-border); }
+.input-pill.loading::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: var(--progress, 0%); background: var(--accent); transition: width .3s; }
+.input-pill.loading #input::placeholder { color: var(--accent); opacity: 1; font-weight: 600; }
+
+/* This device: a pill above the message box; details open as a popover (computers) or a bottom sheet (phones). */
+.context-wrap { position: relative; max-width: 812px; width: 100%; margin: 0 auto; padding: 0 14px; flex-shrink: 0; }
+.context-bar { display: flex; align-items: center; gap: 10px; padding-top: 6px; min-width: 0; }
+.device-pill { display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; border: 1px solid var(--border); background: var(--panel);
+  color: var(--text); border-radius: 999px; padding: 5px 12px 5px 9px; font-size: 13px; }
+.device-pill:hover { border-color: var(--accent-border); }
+.device-pill[data-kind="chosen"] { border-color: var(--blue); }
+.device-pill[data-kind="audit"] { border-color: var(--ok); }
+.device-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+.device-ic { flex: none; } .chev { flex: none; color: var(--muted); font-size: 11px; }
+.context-note { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.device-panel { position: absolute; left: 14px; bottom: calc(100% + 8px); width: min(400px, calc(100% - 28px)); background: var(--panel); border: 1px solid var(--border);
+  border-radius: 16px; padding: 6px 16px 16px; box-shadow: 0 12px 32px rgba(0, 0, 0, .18); z-index: 15; max-height: 70dvh; overflow-y: auto; }
+.device-head { display: flex; justify-content: space-between; align-items: center; }
+.device-head h2 { font-size: 16px; margin: 0; }
+.device-panel dl { margin: 4px 0 10px; }
+.drow { display: grid; grid-template-columns: 112px 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
+.drow:last-child { border-bottom: 0; }
+.drow dt { color: var(--muted); } .drow dd { margin: 0; overflow-wrap: anywhere; }
+.drow small { display: block; color: var(--muted); font-size: 12px; }
+.device-note { background: var(--bg); border-radius: 10px; padding: 9px 11px; font-size: 13px; color: var(--muted); margin: 0 0 12px; }
+.device-audit { width: 100%; padding: 10px 14px; }
+.device-switch { margin-top: 14px; }
+.seg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
+.seg button { border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 999px; padding: 5px 10px; font-size: 13px; }
+.seg button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); font-weight: 700; }
+.sheet-backdrop { position: fixed; inset: 0; z-index: 14; background: transparent; }
+@media (max-width: 560px) {
+  .context-note { display: none; }
+  .device-pill { width: 100%; justify-content: flex-start; }
+  .device-pill .chev { margin-left: auto; }
+  .sheet-backdrop { background: rgba(0, 0, 0, .4); }
+  .device-panel { position: fixed; left: 0; right: 0; bottom: 0; width: 100%; border-radius: 18px 18px 0 0; max-height: 85dvh;
+    padding-bottom: calc(16px + env(safe-area-inset-bottom)); animation: sheet-up .2s ease-out; }
+  .device-panel::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 99px; background: var(--border); margin: 4px auto 6px; }
+  .drow { grid-template-columns: 104px 1fr; }
+}
+@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
+@media (prefers-reduced-motion: reduce) { .device-panel { animation: none; } .input-pill.loading::after { transition: none; } }

chat/chat.js

@@ -5,6 +5,7 @@ import { Knowledge, chatMessages, auditBrief, chatProblems, searchWithAudit } fr
 import { Library, findingPrompt, findingTemplate, summaryPrompt, summaryTemplate, aiPrompt, aiTemplate, writeAnswer, ANSWER_SCHEMAS } from '../app/renderer/auditor-core.js';
 import { buildReportHtml } from '../app/renderer/report.js';
 import { detectDevice } from '../mobile/detect.js';
+import { describeComputer, chosenDevice, deviceBrief, deviceIcon, osLabel, OS_CHOICES } from './device.js';
 
 const WEBLLM_URL = 'https://esm.run/@mlc-ai/web-llm@0.2.85';
 const STORE = 'devseis.chats.v1';
@@ -57,8 +58,10 @@ function getEngine() {
     const initProgressCallback = r => {
       state.progress = r.progress || 0;
       const mb = /([\d.]+)MB fetched/.exec(r.text || '');
-      status(state.cachedStart ? `Starting the AI assistant… ${Math.round(state.progress * 100)}%`
-        : `Downloading the AI assistant (one time, about 1 GB): ${Math.round(state.progress * 100)}%${mb ? ` · ${Math.round(+mb[1])} MB` : ''} · the chat opens when it is ready`, state.progress);
+      // Shown inside the (locked) message box, which fills up as the model arrives.
+      const pct = `${Math.round(state.progress * 100)}%`, narrow = matchMedia('(max-width: 560px)').matches;
+      state.progressText = state.cachedStart ? `Starting the AI… ${pct}` : narrow ? `Downloading AI… ${pct}${mb ? ` · ${Math.round(+mb[1])} MB` : ''}`
+        : `Downloading the AI assistant… ${pct}${mb ? ` · ${Math.round(+mb[1])} of about 1,000 MB` : ''}`;
       aiChip();
     };
     let engine, label;
@@ -88,11 +91,12 @@ function aiChip() {
   else if (state.engine === false) { chip.textContent = '📚 Knowledge base'; chip.title = state.modelLabel; chip.dataset.state = 'off'; }
   else { chip.textContent = '⚡ Enable AI'; chip.title = 'Download the AI assistant (about 1 GB, one time)'; chip.dataset.state = 'off'; }
   updateSend();
+  if (!$('devicePanel').classList.contains('hidden')) renderDevicePanel();
 }
 
 // With WebGPU the chat waits for the AI; the knowledge base answers alone only without WebGPU, if the AI fails to load,
 // or when the visitor chose "Not now".
-function aiPending() { return !state.kbOnly && state.engine !== false && !state.engine; }
+function aiPending() { return 'gpu' in navigator && !state.kbOnly && state.engine !== false && !state.engine; }
 
 // Instant answer straight from the knowledge base, formatted for reading.
 function quickAnswer(passages) {
@@ -146,6 +150,7 @@ function render() {
   const chat = state.current;
   $('emptyState').classList.toggle('hidden', Boolean(chat && (chat.messages.length || chat.audit)));
   $('aiCard').classList.toggle('hidden', !state.showAiCard || state.loading || Boolean(state.engine) || state.engine === false);
+  renderDevice();
   const thread = $('thread');
   thread.innerHTML = '';
   if (!chat) return renderSidebar();
@@ -191,10 +196,11 @@ async function ask(question) {
   chat.messages.push(reply);
   state.busy = true; updateSend(); render();
   try {
-    const os = chat.audit ? chat.audit.host.os_family : (state.device && (state.device.os_family || (state.device.desktop ? desktopOs() : null)));
+    const device = activeDevice();
+    const os = chat.audit ? chat.audit.host.os_family : (device.os_family === 'chromeos' ? null : device.os_family);
     const passages = searchWithAudit(state.kb, question, chat.audit, { k: 4, os });
     reply.passages = passages;
-    const messages = chatMessages(question, passages, auditBrief(chat.audit), history);
+    const messages = chatMessages(question, passages, auditBrief(chat.audit), history, chat.audit ? null : deviceBrief(device));
     reply.question = question; reply.history = history;
     if (state.engine) {
       // Typing dots until the AI's first words arrive; the knowledge-base answer is only the fallback if the AI fails.
@@ -249,7 +255,7 @@ async function rewriteWithAi(index) {
   const chat = state.current; const reply = chat && chat.messages[index];
   if (!reply || !state.engine || state.busy) return;
   state.busy = true; updateSend();
-  const messages = chatMessages(reply.question, reply.passages, auditBrief(chat.audit), reply.history || []);
+  const messages = chatMessages(reply.question, reply.passages, auditBrief(chat.audit), reply.history || [], chat.audit ? null : deviceBrief(activeDevice()));
   try { await aiAnswer(chat, reply, messages, reply.passages); } catch (error) { reply.note = `The AI could not answer: ${error.message}`; }
   state.busy = false; saveChats(); updateSend(); render();
 }
@@ -346,12 +352,91 @@ async function writeReport() {
 function updateSend() {
   const wait = aiPending();
   $('input').disabled = wait;
+  const loading = wait && state.loading;
+  $('inputPill').classList.toggle('loading', loading);
+  $('inputPill').style.setProperty('--progress', `${Math.round((state.progress || 0) * 100)}%`);
   $('input').placeholder = !wait ? 'Ask Arx about security, or add your audit report…'
-    : state.loading ? `Arx can chat once the AI assistant is ready (${Math.round((state.progress || 0) * 100)}%)…`
+    : loading ? state.progressText || 'Getting the AI assistant ready…'
       : state.showAiCard ? 'Choose "Download now" or "Not now" above to start chatting…' : 'Tap ⚡ Enable AI at the top to start chatting…';
   document.querySelectorAll('.chip[data-prompt]').forEach(c => { c.disabled = wait; });
   $('sendBtn').disabled = wait || state.busy || !$('input').value.trim();
 }
+// ---------- this device ----------
+const DEVICE_CHOICE = 'devseis.deviceChoice';
+// The device answers are for: the one the browser detected, or one the visitor picked ("my Windows PC").
+function activeDevice() { return state.deviceChoice ? chosenDevice(state.deviceChoice) : (state.device || {}); }
+
+function renderDevice() {
+  const audit = state.current && state.current.audit;
+  const d = activeDevice();
+  const ready = Boolean(state.device);
+  let text, note;
+  if (audit) {
+    const s = audit.summary, assessed = s.Compliant + s['Non-Compliant'];
+    text = `Audit · ${audit.host.os_name} ${audit.host.os_version} · ${assessed ? Math.round(s.Compliant / assessed * 100) : 0}% compliant`;
+    note = 'Answers use your audit results';
+  } else if (!ready) { text = 'Detecting this device…'; note = ''; }
+  else if (!d.os_family) { text = 'Unknown device · choose yours'; note = 'Pick a system for tailored steps'; }
+  else {
+    text = [d.chosen ? `Asking about ${d.device_model}` : d.device_model !== d.os_name ? d.device_model : null, osLabel(d), d.chosen ? null : d.browser].filter(Boolean).join(' · ');
+    note = d.chosen ? 'Steps are for the system you chose' : 'Answers are tailored to this device';
+  }
+  $('deviceIcon').textContent = audit ? '📋' : deviceIcon(d);
+  $('deviceText').textContent = text;
+  $('contextNote').textContent = note;
+  $('deviceBtn').dataset.kind = audit ? 'audit' : d.chosen ? 'chosen' : 'detected';
+  if (!$('devicePanel').classList.contains('hidden')) renderDevicePanel();
+}
+
+function renderDevicePanel() {
+  const audit = state.current && state.current.audit;
+  const real = state.device || {};
+  const d = activeDevice();
+  const row = (label, value, hint = '') => value ? `<div class="drow"><dt>${label}</dt><dd>${esc(value)}${hint ? `<small>${esc(hint)}</small>` : ''}</dd></div>` : '';
+  const unlock = real.platform_authenticator === true ? 'Available (fingerprint, face or PIN)' : real.platform_authenticator === false ? 'None found by the browser' : '';
+  const ai = state.engine ? `Ready · ${state.modelLabel}` : state.loading ? `Downloading · ${Math.round((state.progress || 0) * 100)}%`
+    : 'gpu' in navigator && state.engine !== false ? 'Supported (WebGPU)' : 'Not supported here: answers come from the knowledge base';
+  let html;
+  if (audit) {
+    const h = audit.host, s = audit.summary, assessed = s.Compliant + s['Non-Compliant'];
+    $('deviceTitle').textContent = 'Audit in this chat';
+    html = `<dl>${row('Device', h.device_model || h.hostname)}${row('System', `${h.os_name} ${h.os_version}`)}${row('Audited', String(audit.audit.started_at).slice(0, 10))}
+      ${row('Result', `${s.Compliant} of ${assessed} checks compliant · ${s['Non-Compliant']} gaps`)}</dl>
+      <p class="device-note">Arx answers from these results. Start a new chat to ask about this device instead.</p>`;
+  } else {
+    $('deviceTitle').textContent = d.chosen ? 'Device you are asking about' : 'This device';
+    const version = d.os_version && !d.version_precise && !d.chosen && d.os_family !== 'windows' ? 'Approximate: browsers hide the exact version' : '';
+    html = `<dl>${row('Device', d.device_model ? `${d.device_model}${d.arch ? ` (${d.arch})` : ''}` : '')}${row('System', d.os_family ? osLabel(d) : 'Not recognised', version)}
+      ${d.chosen ? '' : row('Browser', real.browser) + row('Screen unlock', unlock) + row('Connection', real.cellular ? 'Mobile data' : '')}${row('On-device AI', ai)}</dl>
+      <p class="device-note">🔒 Read by your browser and never uploaded. Arx uses it to give steps for this system. A web page can't see settings such as encryption or the firewall: an audit checks those.</p>
+      <button type="button" class="primary-btn device-audit" id="deviceAudit">🛡 Audit ${d.chosen ? 'a device' : 'this device'}</button>
+      <div class="device-switch"><span class="muted tiny">Asking about another device?</span><div class="seg">
+        <button type="button" data-os="" aria-pressed="${!state.deviceChoice}">${deviceIcon(real)} This device</button>
+        ${OS_CHOICES.map(([os, label]) => `<button type="button" data-os="${os}" aria-pressed="${state.deviceChoice === os}">${label}</button>`).join('')}</div></div>`;
+  }
+  $('deviceBody').innerHTML = html;
+}
+
+function toggleDevicePanel(open) {
+  $('devicePanel').classList.toggle('hidden', !open);
+  $('deviceBackdrop').classList.toggle('hidden', !open);
+  $('deviceBtn').setAttribute('aria-expanded', String(open));
+  if (open) { renderDevicePanel(); $('deviceClose').focus(); } else $('deviceBtn').focus();
+}
+$('deviceBtn').addEventListener('click', () => toggleDevicePanel($('devicePanel').classList.contains('hidden')));
+$('deviceClose').addEventListener('click', () => toggleDevicePanel(false));
+$('deviceBackdrop').addEventListener('click', () => toggleDevicePanel(false));
+document.addEventListener('keydown', e => { if (e.key === 'Escape' && !$('devicePanel').classList.contains('hidden')) toggleDevicePanel(false); });
+$('deviceBody').addEventListener('click', e => {
+  const pick = e.target.closest('[data-os]');
+  if (pick) {
+    state.deviceChoice = pick.dataset.os || null;
+    try { if (state.deviceChoice) localStorage.setItem(DEVICE_CHOICE, state.deviceChoice); else localStorage.removeItem(DEVICE_CHOICE); } catch { /* ignore */ }
+    renderDevice(); renderDevicePanel(); return;
+  }
+  if (e.target.closest('#deviceAudit')) { toggleDevicePanel(false); openAuditModal(); }
+});
+
 function closeSidebar() { $('sidebar').classList.remove('open'); $('overlay').classList.add('hidden'); }
 
 $('composer').addEventListener('submit', e => { e.preventDefault(); const q = $('input').value.trim(); $('input').value = ''; $('input').style.height = ''; updateSend(); ask(q); });
@@ -405,7 +490,8 @@ async function init() {
     detectDevice().catch(() => ({})),
     getJson('app/model-version.json', { cache: 'no-cache' }).catch(() => ({})),
   ]);
-  state.kb = new Knowledge(kb); state.device = device; state.config = config;
+  state.kb = new Knowledge(kb); state.device = await describeComputer(device); state.config = config;
+  try { state.deviceChoice = localStorage.getItem(DEVICE_CHOICE); } catch { /* ignore */ }
   // Coming back from the phone check with a fresh report.
   if (location.hash === '#audit') {
     try { const ev = JSON.parse(localStorage.getItem('devseis.lastAudit')); if (ev) { attachAudit(ev); localStorage.removeItem('devseis.lastAudit'); } } catch { /* ignore */ }

chat/device.js

@@ -0,0 +1,48 @@
+// What the chat knows about the device it runs on: the phone details from mobile/detect.js, plus the computer's OS,
+// version and chip, which a browser only partly reveals (Chromium client hints are precise; Safari and Firefox freeze
+// the macOS version, and Windows 10 and 11 look the same without hints). Nothing here is uploaded.
+
+const OS_NAMES = { macos: 'macOS', windows: 'Windows', linux: 'Linux', chromeos: 'ChromeOS', ios: 'iOS', android: 'Android' };
+const DEVICE_NAMES = { macos: 'Mac', windows: 'Windows PC', linux: 'Linux computer', chromeos: 'Chromebook', ios: 'iPhone', android: 'Android phone' };
+export const OS_CHOICES = [['windows', '🪟 Windows'], ['macos', '💻 macOS'], ['linux', '🐧 Linux'], ['ios', '📱 iPhone / iPad'], ['android', '🤖 Android']];
+
+// Fill in a computer's details (phones are already done by detectDevice).
+export async function describeComputer(device) {
+  const d = { ...device };
+  if (!d.desktop) return d;
+  const ua = navigator.userAgent;
+  d.os_family = /CrOS/.test(ua) ? 'chromeos' : /Windows/.test(ua) ? 'windows' : /Mac/.test(ua) ? 'macos' : 'linux';
+  d.os_name = OS_NAMES[d.os_family];
+  d.device_model = DEVICE_NAMES[d.os_family];
+  d.os_version = null; d.version_precise = false; d.arch = null;
+  const uaData = navigator.userAgentData;
+  if (uaData && uaData.getHighEntropyValues) {
+    try {
+      const hi = await Promise.race([uaData.getHighEntropyValues(['platformVersion', 'architecture', 'bitness']), new Promise(r => setTimeout(() => r({}), 1500))]);
+      const v = hi.platformVersion || '';
+      if (d.os_family === 'windows' && v) { d.os_version = parseInt(v, 10) >= 13 ? '11' : '10'; d.version_precise = true; }
+      if (d.os_family === 'macos' && v) { d.os_version = v.replace(/(\.0)+$/, ''); d.version_precise = true; }
+      if (hi.architecture) d.arch = hi.architecture === 'arm' ? (d.os_family === 'macos' ? 'Apple silicon' : 'ARM') : (d.os_family === 'macos' ? 'Intel' : `${hi.architecture === 'x86' ? 'x86' : hi.architecture}-${hi.bitness || '64'}`);
+    } catch { /* hints refused */ }
+  }
+  if (d.os_family === 'windows' && !d.os_version) d.os_version = '10 or 11';
+  return d;
+}
+
+// "macOS 15.6", "Windows 10 or 11", "iOS 18.6", "Linux".
+export function osLabel(d) { return [d.os_name || OS_NAMES[d.os_family] || 'Unknown system', d.os_version].filter(Boolean).join(' '); }
+
+export function deviceIcon(d) { return d.os_family === 'ios' || d.os_family === 'android' ? '📱' : '💻'; }
+
+// A device the visitor picked by hand ("I'm asking about my Windows PC").
+export function chosenDevice(family) {
+  return { os_family: family, os_name: OS_NAMES[family], os_version: null, device_model: DEVICE_NAMES[family], chosen: true };
+}
+
+// The MY DEVICE line in the chat prompt: what the browser saw, and that settings are not checked.
+export function deviceBrief(d) {
+  if (!d || !d.os_family) return null;
+  if (d.chosen) return `${osLabel(d)} (${d.os_family}), chosen by the user; its security settings have not been checked.`;
+  const model = d.device_model && d.device_model !== d.os_name ? ` on ${/^[AEIOU]/.test(d.device_model) ? 'an' : 'a'} ${d.device_model}${d.arch ? ` (${d.arch})` : ''}` : '';
+  return `${osLabel(d)} (${d.os_family})${model}, ${d.browser || 'unknown browser'}; detected by the browser, security settings not checked.`;
+}

index.html

@@ -48,12 +48,25 @@
     <div id="thread" aria-live="polite"></div>
   </main>
 
+  <div class="context-wrap" id="contextWrap">
+    <div class="context-bar">
+      <button type="button" id="deviceBtn" class="device-pill" aria-haspopup="dialog" aria-expanded="false" aria-controls="devicePanel">
+        <span class="device-ic" id="deviceIcon">💻</span><span class="device-text" id="deviceText">Detecting this device…</span><span class="chev" aria-hidden="true">▾</span>
+      </button>
+      <span class="context-note" id="contextNote">Answers are tailored to this device</span>
+    </div>
+    <div class="sheet-backdrop hidden" id="deviceBackdrop"></div>
+    <div class="device-panel hidden" id="devicePanel" role="dialog" aria-modal="false" aria-labelledby="deviceTitle">
+      <div class="device-head"><h2 id="deviceTitle">This device</h2><button type="button" class="icon-btn" id="deviceClose" aria-label="Close">✕</button></div>
+      <div id="deviceBody"></div>
+    </div>
+  </div>
   <form id="composer" autocomplete="off">
     <button type="button" id="attachBtn" class="icon-btn attach" title="Add an audit report (.json from the Devseis app)" aria-label="Add an audit report">
       <svg viewBox="0 0 24 24" width="19" height="19" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.44 11.05l-9.19 9.19a5.5 5.5 0 01-7.78-7.78l9.2-9.19a3.5 3.5 0 014.95 4.95l-9.2 9.19a1.5 1.5 0 01-2.12-2.12l8.49-8.48"/></svg>
     </button>
     <input type="file" id="fileInput" accept=".json,application/json" hidden>
-    <div class="input-pill">
+    <div class="input-pill" id="inputPill">
       <textarea id="input" rows="1" placeholder="Ask Arx about security, or add your audit report…" aria-label="Message"></textarea>
     </div>
     <button type="submit" id="sendBtn" class="send-btn" aria-label="Send" disabled>