@consultancy-outfit/ai-draftsman-cli 2.0.0 → 2.2.0

package/extension/chrome/EXTENSION_ID

@@ -0,0 +1 @@
+fooaeahnnnhnbdhidpmaepmdmbnjllbk

package/extension/chrome/background.js

@@ -0,0 +1,315 @@
+// AI Draftsman for Chrome — service worker.
+//
+// Connects to the native messaging host (com.aidraftsman.browser). The host is a small process Chrome starts for us;
+// the AI Draftsman CLI and desktop app talk to it, and it forwards their browser requests here as
+//   { id, action, args }   and expects back   { id, ok: true, result } | { id, ok: false, error }.
+// Actions: list_tabs, navigate, read_page, click, type.
+
+const HOST = 'com.aidraftsman.browser';
+const MAX_TEXT = 20000;
+const MAX_ELEMENTS = 150;
+const LOG_LIMIT = 100;
+
+let port = null;
+let connected = false;
+/** When true the user pressed Stop: every request is refused until they resume. */
+let paused = false;
+
+chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true }).catch(() => {});
+
+async function log(kind, text) {
+  const { log: entries = [] } = await chrome.storage.session.get('log');
+  entries.push({ t: Date.now(), kind, text });
+  await chrome.storage.session.set({ log: entries.slice(-LOG_LIMIT) });
+}
+
+async function setState() {
+  await chrome.storage.session.set({ state: { connected, paused } });
+}
+
+function connect() {
+  if (port) return;
+  try {
+    port = chrome.runtime.connectNative(HOST);
+  } catch (e) {
+    port = null;
+    return;
+  }
+  port.onMessage.addListener(onRequest);
+  port.onDisconnect.addListener(() => {
+    const reason = chrome.runtime.lastError?.message;
+    port = null;
+    connected = false;
+    setState();
+    enqueue(async () => {
+      const chat = await getChat();
+      if (!chat.running) return;
+      chat.running = false;
+      const reply = chat.messages[chat.messages.length - 1];
+      if (reply?.role === 'assistant') reply.error = 'Connection to AI Draftsman was lost.';
+      await saveChat(chat);
+    });
+    log('error', reason ? `Host disconnected: ${reason}` : 'Host disconnected.');
+  });
+  connected = true;
+  port.postMessage({ type: 'hello', version: chrome.runtime.getManifest().version });
+  setState();
+  log('info', 'Connected to the AI Draftsman bridge.');
+}
+
+// A service worker sleeps; the alarm wakes it and reconnects if the host is gone.
+chrome.alarms.create('reconnect', { periodInMinutes: 0.5 });
+chrome.alarms.onAlarm.addListener(() => connect());
+chrome.runtime.onStartup.addListener(connect);
+chrome.runtime.onInstalled.addListener(connect);
+connect();
+
+chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
+  if (message?.type === 'pause') {
+    paused = !!message.value;
+    setState();
+    log('info', paused ? 'Stopped by you. Browser actions are refused.' : 'Resumed.');
+    sendResponse({ ok: true });
+  } else if (message?.type === 'chat_send') {
+    enqueue(() => chatSend(String(message.text || ''), message.mode));
+    sendResponse({ ok: true });
+  } else if (message?.type === 'chat_stop') {
+    enqueue(async () => {
+      const chat = await getChat();
+      if (chat.running && port) port.postMessage({ type: 'chat_stop', id: chat.chatId });
+    });
+    sendResponse({ ok: true });
+  } else if (message?.type === 'chat_clear') {
+    enqueue(async () => {
+      const chat = await getChat();
+      if (chat.running && port) port.postMessage({ type: 'chat_stop', id: chat.chatId });
+      await saveChat({ messages: [], running: false, session: '', mode: chat.mode, chatId: '' });
+    });
+    sendResponse({ ok: true });
+  } else if (message?.type === 'reconnect') {
+    connect();
+    sendResponse({ ok: true });
+  }
+  return false;
+});
+
+// ---- chat -----------------------------------------------------------------------------------------------------
+// The transcript lives in storage.session so the side panel can close and reopen without losing it.
+// chat = { messages: [{role:'user', text} | {role:'assistant', text, steps:[{id,label,state}], error?}],
+//          running, session, mode, chatId }
+
+async function getChat() {
+  const { chat } = await chrome.storage.session.get('chat');
+  return chat || { messages: [], running: false, session: '', mode: 'read', chatId: '' };
+}
+const saveChat = (chat) => chrome.storage.session.set({ chat });
+/** Chat updates read-modify-write storage; run them one at a time so streamed events cannot overwrite each other. */
+let chatQueue = Promise.resolve();
+const enqueue = (fn) => (chatQueue = chatQueue.then(fn, fn));
+
+async function chatSend(text, mode) {
+  const chat = await getChat();
+  if (chat.running || !text.trim()) return;
+  chat.mode = mode === 'act' ? 'act' : 'read';
+  chat.messages.push({ role: 'user', text });
+  if (!port || !connected) {
+    chat.messages.push({ role: 'assistant', text: '', steps: [], error: 'Not connected to AI Draftsman. Run `ad browser install`, then reload the extension.' });
+    return saveChat(chat);
+  }
+  chat.messages.push({ role: 'assistant', text: '', steps: [] });
+  chat.running = true;
+  chat.chatId = `chat-${Date.now()}`;
+  await saveChat(chat);
+  port.postMessage({ type: 'chat', id: chat.chatId, text, mode: chat.mode, resume: chat.session || undefined });
+  await log('info', `Chat: ${text.slice(0, 60)}`);
+}
+
+async function onChatEvent(message) {
+  const chat = await getChat();
+  if (message.id !== chat.chatId) return;
+  const reply = chat.messages[chat.messages.length - 1];
+  if (!reply || reply.role !== 'assistant') return;
+  const e = message.event || {};
+  if (e.kind === 'text') reply.text = reply.text ? `${reply.text}\n\n${e.text}` : e.text;
+  else if (e.kind === 'tool') reply.steps.push({ id: e.id, label: e.label, state: 'running' });
+  else if (e.kind === 'tool_result') {
+    const step = reply.steps.find((s) => s.id === e.id);
+    if (step) step.state = e.error ? 'error' : 'done';
+  } else if (e.kind === 'session') chat.session = e.sessionId;
+  else if (e.kind === 'done') {
+    chat.running = false;
+    if (!reply.text && e.text) reply.text = e.text;
+  } else if (e.kind === 'error') {
+    chat.running = false;
+    reply.error = e.text;
+  }
+  await saveChat(chat);
+}
+
+async function onRequest(request) {
+  if (request?.type === 'chat_event') return enqueue(() => onChatEvent(request));
+  const { id, action, args = {} } = request || {};
+  if (typeof id !== 'string') return;
+  const reply = (body) => port?.postMessage({ id, ...body });
+  if (paused) {
+    await log('error', `Refused ${action}: stopped by you.`);
+    return reply({ ok: false, error: 'The user stopped AI Draftsman in the browser. Ask them to resume it.' });
+  }
+  try {
+    const result = await run(action, args);
+    reply({ ok: true, result });
+  } catch (e) {
+    const message = e instanceof Error ? e.message : String(e);
+    await log('error', `${action} failed: ${message}`);
+    reply({ ok: false, error: message });
+  }
+}
+
+async function targetTab(args) {
+  if (Number.isInteger(args.tab_id)) return chrome.tabs.get(args.tab_id);
+  const [tab] = await chrome.tabs.query({ active: true, lastFocusedWindow: true });
+  if (!tab) throw new Error('No active tab. Open a page in Chrome first.');
+  return tab;
+}
+
+function assertScriptable(tab) {
+  if (!/^https?:/i.test(tab.url || '')) {
+    throw new Error(`Tab ${tab.id} is ${tab.url || 'blank'}, which AI Draftsman cannot read. Navigate it to an http(s) page first.`);
+  }
+}
+
+async function mark(tab) {
+  await chrome.action.setBadgeBackgroundColor({ color: '#d97706', tabId: tab.id });
+  await chrome.action.setBadgeText({ text: 'AI', tabId: tab.id });
+}
+
+async function waitForLoad(tabId, timeoutMs = 15000) {
+  const start = Date.now();
+  for (;;) {
+    const tab = await chrome.tabs.get(tabId);
+    if (tab.status === 'complete') return tab;
+    if (Date.now() - start > timeoutMs) return tab;
+    await new Promise((r) => setTimeout(r, 120));
+  }
+}
+
+async function run(action, args) {
+  switch (action) {
+    case 'list_tabs': {
+      const tabs = await chrome.tabs.query({});
+      await log('read', `Listed ${tabs.length} tabs`);
+      return tabs.map((t) => ({ tab_id: t.id, active: t.active, title: t.title, url: t.url }));
+    }
+    case 'navigate': {
+      let tab;
+      if (Number.isInteger(args.tab_id)) tab = await chrome.tabs.update(args.tab_id, { url: args.url });
+      else tab = await chrome.tabs.create({ url: args.url });
+      await mark(tab);
+      const done = await waitForLoad(tab.id);
+      await log('act', `Opened ${args.url}`);
+      return { tab_id: done.id, title: done.title, url: done.url };
+    }
+    case 'read_page': {
+      const tab = await targetTab(args);
+      assertScriptable(tab);
+      await mark(tab);
+      const [{ result }] = await chrome.scripting.executeScript({ target: { tabId: tab.id }, func: pageSnapshot, args: [MAX_TEXT, MAX_ELEMENTS] });
+      await log('read', `Read "${result.title}" (${result.elements} elements)`);
+      return `tab_id: ${tab.id}\ntitle: ${result.title}\nurl: ${result.url}\n\n${result.text}\n\nInteractive elements:\n${result.list}`;
+    }
+    case 'click': {
+      const tab = await targetTab(args);
+      assertScriptable(tab);
+      await mark(tab);
+      const [{ result }] = await chrome.scripting.executeScript({ target: { tabId: tab.id }, func: pageClick, args: [args.ref] });
+      if (!result.ok) throw new Error(result.error);
+      await log('act', `Clicked [${args.ref}] ${result.label}`);
+      return `Clicked [${args.ref}] ${result.label}. Read the page again before the next step.`;
+    }
+    case 'type': {
+      const tab = await targetTab(args);
+      assertScriptable(tab);
+      await mark(tab);
+      const [{ result }] = await chrome.scripting.executeScript({
+        target: { tabId: tab.id },
+        func: pageType,
+        args: [args.ref, String(args.text ?? ''), !!args.submit],
+      });
+      if (!result.ok) throw new Error(result.error);
+      await log('act', `Typed into [${args.ref}] ${result.label}`);
+      return `Typed into [${args.ref}] ${result.label}.${args.submit ? ' Pressed Enter.' : ''} Read the page again before the next step.`;
+    }
+    default:
+      throw new Error(`Unknown action "${action}".`);
+  }
+}
+
+// ---- functions below run INSIDE the page (executeScript serialises them: no closures) -----------------------------
+
+function pageSnapshot(maxText, maxElements) {
+  const visible = (el) => {
+    const r = el.getBoundingClientRect();
+    const s = getComputedStyle(el);
+    return r.width > 0 && r.height > 0 && s.visibility !== 'hidden' && s.display !== 'none';
+  };
+  for (const old of document.querySelectorAll('[data-ad-ref]')) old.removeAttribute('data-ad-ref');
+  const selector = 'a[href],button,input:not([type=hidden]),select,textarea,[role=button],[role=link],[role=tab],[contenteditable=true]';
+  const lines = [];
+  let n = 0;
+  for (const el of document.querySelectorAll(selector)) {
+    if (n >= maxElements) break;
+    if (!visible(el) || el.disabled) continue;
+    const tag = el.tagName.toLowerCase();
+    const type = tag === 'input' ? el.type || 'text' : el.getAttribute('role') || tag;
+    const label = (el.getAttribute('aria-label') || el.innerText || el.value || el.placeholder || el.title || el.name || '').trim().replace(/\s+/g, ' ').slice(0, 80);
+    el.setAttribute('data-ad-ref', String(n));
+    const extra = tag === 'a' ? ` -> ${new URL(el.href, location.href).pathname}` : type === 'password' ? ' (password field: do not fill)' : '';
+    lines.push(`[${n}] ${type} "${label}"${extra}`);
+    n++;
+  }
+  const text = (document.body?.innerText || '').replace(/\n{3,}/g, '\n\n').trim();
+  return {
+    title: document.title,
+    url: location.href,
+    text: text.length > maxText ? text.slice(0, maxText) + `\n… [truncated ${text.length - maxText} characters]` : text,
+    list: lines.join('\n') || '(none)',
+    elements: n,
+  };
+}
+
+function pageClick(ref) {
+  const el = document.querySelector(`[data-ad-ref="${ref}"]`);
+  if (!el) return { ok: false, error: `No element [${ref}] on this page. Call read_page again to get fresh refs.` };
+  const label = (el.getAttribute('aria-label') || el.innerText || el.value || '').trim().replace(/\s+/g, ' ').slice(0, 60);
+  el.scrollIntoView({ block: 'center' });
+  el.focus?.();
+  el.click();
+  return { ok: true, label };
+}
+
+function pageType(ref, text, submit) {
+  const el = document.querySelector(`[data-ad-ref="${ref}"]`);
+  if (!el) return { ok: false, error: `No element [${ref}] on this page. Call read_page again to get fresh refs.` };
+  if (el instanceof HTMLInputElement && el.type === 'password') {
+    return { ok: false, error: 'This is a password field. AI Draftsman never types into password fields; ask the user to enter it.' };
+  }
+  const label = (el.getAttribute('aria-label') || el.placeholder || el.name || el.tagName).toString().slice(0, 60);
+  el.scrollIntoView({ block: 'center' });
+  el.focus();
+  if (el.isContentEditable) {
+    el.textContent = text;
+  } else if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
+    // Frameworks track the value through the native setter; assigning .value directly can be ignored.
+    const proto = el instanceof HTMLInputElement ? HTMLInputElement.prototype : HTMLTextAreaElement.prototype;
+    Object.getOwnPropertyDescriptor(proto, 'value').set.call(el, text);
+  } else {
+    return { ok: false, error: `Element [${ref}] is not something you can type into.` };
+  }
+  el.dispatchEvent(new Event('input', { bubbles: true }));
+  el.dispatchEvent(new Event('change', { bubbles: true }));
+  if (submit) {
+    if (el.form?.requestSubmit) el.form.requestSubmit();
+    else el.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', code: 'Enter', bubbles: true }));
+  }
+  return { ok: true, label };
+}

package/extension/chrome/logo.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="48 -6 64 64" width="64" height="64" role="img" aria-label="AI Draftsman">
+  <defs>
+    <linearGradient id="face" x1="0" y1="16" x2="0" y2="36" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#6C3FCB"/>
+      <stop offset="1" stop-color="#F5A623"/>
+    </linearGradient>
+  </defs>
+  <rect x="48" y="-6" width="64" height="64" rx="14" fill="#17112B"/>
+  <rect x="55.75" y="11.9" width="48.5" height="28.2" rx="14.1" fill="none" stroke="#FFFFFF" stroke-width="5.3"/>
+  <circle cx="89.62" cy="25.99" r="10" fill="url(#face)"/>
+  <circle cx="86" cy="24" r="3" fill="#FFFFFF"/>
+  <circle cx="93.24" cy="24" r="3" fill="#FFFFFF"/>
+</svg>

package/extension/chrome/manifest.json

@@ -0,0 +1,34 @@
+{
+  "manifest_version": 3,
+  "name": "AI Draftsman for Chrome",
+  "version": "0.1.0",
+  "description": "Lets the AI Draftsman CLI and desktop app use your Chrome: read the page, click, type, open links. Concept build.",
+  "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAtdqIlcOylVwytn5cwb4dVC70QNneoUFFCvhDepF20owMMJ1EoY6iCMUxqpymIF9KWkFbC8uuODNX7rfuWdA9Rpn7z/t40WCCI1M6UHahAflI28bOmvLe8Q1ie7KBhM3MUCuDuEckjbMuAotTz9qLqA2bB1BgyPrEZqOLHQHsp7Hu7iP51biYiMIPQzcRW3j8DI/LqYEkSXY9k6fqCGoLR7yl/pnLxx9y8WWxG3mHOYS28J+WQwr6ma+we5ijboUZ20TVQKncFWK7COguKEuC8ZzGguYnxlKmMFR5Fsu46zFz+CZVCjh9IjgPGrqKw44XmvpQKmCb1OEPT7bfS8VJKwIDAQAB",
+  "minimum_chrome_version": "116",
+  "permissions": [
+    "nativeMessaging",
+    "tabs",
+    "scripting",
+    "sidePanel",
+    "storage",
+    "alarms"
+  ],
+  "host_permissions": [
+    "http://*/*",
+    "https://*/*"
+  ],
+  "background": {
+    "service_worker": "background.js"
+  },
+  "side_panel": {
+    "default_path": "sidepanel.html"
+  },
+  "action": {
+    "default_title": "AI Draftsman for Chrome"
+  },
+  "icons": {
+    "16": "icons/16.png",
+    "48": "icons/48.png",
+    "128": "icons/128.png"
+  }
+}

package/extension/chrome/sidepanel.html

@@ -0,0 +1,104 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>AI Draftsman for Chrome</title>
+<style>
+  :root { --bg:#faf8ff; --fg:#1d1633; --dim:#6b6385; --card:#fff; --line:#e4ddf5; --brand:#6c3fcb; --brand-soft:#ece6fb; --amber:#d98a0b; --ok:#15803d; --bad:#b91c1c; }
+  @media (prefers-color-scheme: dark) { :root { --bg:#120e20; --fg:#efeaff; --dim:#a79fc4; --card:#1c1630; --line:#2f2750; --brand:#a78bfa; --brand-soft:#2b2150; --amber:#f5a623; --ok:#4ade80; --bad:#f87171; } }
+  * { box-sizing: border-box; }
+  html, body { height:100%; }
+  body { margin:0; background:var(--bg); color:var(--fg); font:14px/1.45 system-ui, sans-serif; display:flex; flex-direction:column; }
+  header { padding:12px 16px 0; }
+  h1 { font-size:15px; margin:0; display:flex; align-items:center; gap:8px; }
+  .wordmark { flex:none; height:20px; width:auto; color:var(--fg); }
+  .conn { margin-left:auto; display:flex; align-items:center; gap:6px; font-size:12px; font-weight:400; color:var(--dim); }
+  .dot { width:9px; height:9px; border-radius:50%; background:var(--bad); flex:none; }
+  .dot.on { background:var(--ok); }
+  .tabs { display:flex; gap:4px; margin-top:10px; border-bottom:1px solid var(--line); }
+  .tab { background:none; border:0; border-bottom:2px solid transparent; color:var(--dim); padding:8px 12px; font:inherit; cursor:pointer; }
+  .tab[aria-selected="true"] { color:var(--fg); border-bottom-color:var(--brand); font-weight:600; }
+  button:focus-visible, textarea:focus-visible, select:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
+  main { flex:1; min-height:0; display:flex; flex-direction:column; }
+  [hidden] { display:none !important; }
+
+  #chatView { flex:1; min-height:0; display:flex; flex-direction:column; }
+  #thread { flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:12px; }
+  .empty { color:var(--dim); font-size:13px; }
+  .suggest { display:flex; flex-direction:column; gap:6px; margin-top:10px; }
+  .suggest button { text-align:left; background:var(--card); border:1px solid var(--line); color:var(--fg); border-radius:8px; padding:8px 10px; font:inherit; cursor:pointer; }
+  .msg { max-width:92%; white-space:pre-wrap; overflow-wrap:anywhere; }
+  .msg.user { align-self:flex-end; background:var(--brand-soft); border-radius:12px 12px 2px 12px; padding:8px 12px; }
+  .msg.assistant { align-self:flex-start; }
+  .steps { display:flex; flex-direction:column; gap:4px; margin-bottom:6px; }
+  .step { font-size:12px; color:var(--dim); display:flex; gap:6px; align-items:center; }
+  .step::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--dim); flex:none; }
+  .step.running::before { background:var(--amber); animation:pulse 1s ease-in-out infinite; }
+  .step.done::before { background:var(--ok); } .step.error::before { background:var(--bad); }
+  .err { color:var(--bad); font-size:13px; }
+  .typing { color:var(--dim); font-size:13px; }
+  @keyframes pulse { 50% { opacity:.3; } }
+  @media (prefers-reduced-motion: reduce) { .step.running::before { animation:none; } }
+
+  form { border-top:1px solid var(--line); padding:10px 16px 12px; background:var(--bg); }
+  .composer { display:flex; gap:8px; align-items:flex-end; }
+  textarea { flex:1; resize:none; min-height:38px; max-height:120px; font:inherit; color:var(--fg); background:var(--card); border:1px solid var(--line); border-radius:10px; padding:8px 10px; }
+  .send { border:1px solid var(--brand); background:var(--brand); color:#fff; border-radius:10px; padding:8px 14px; font:inherit; cursor:pointer; }
+  .send.stop { background:transparent; color:var(--brand); }
+  .opts { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:8px; font-size:12px; color:var(--dim); flex-wrap:wrap; }
+  select { font:inherit; font-size:12px; color:var(--fg); background:var(--card); border:1px solid var(--line); border-radius:6px; padding:3px 6px; }
+  .link { background:none; border:0; color:var(--dim); font:inherit; font-size:12px; cursor:pointer; text-decoration:underline; padding:0; }
+
+  #activityView { padding:14px 16px; overflow-y:auto; }
+  .card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px; margin-bottom:12px; }
+  .row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
+  .sub { color:var(--dim); font-size:12px; }
+  .btn { font:inherit; border:1px solid var(--brand); background:var(--brand); color:#fff; border-radius:8px; padding:6px 12px; cursor:pointer; }
+  .btn.ghost { background:transparent; color:var(--brand); }
+  ul { list-style:none; margin:8px 0 0; padding:0; }
+  li { padding:6px 0; border-top:1px solid var(--line); font-size:13px; }
+  li:first-child { border-top:0; }
+  .t { color:var(--dim); font-size:11px; margin-right:6px; font-variant-numeric:tabular-nums; }
+  .k { font-size:11px; text-transform:uppercase; letter-spacing:.04em; margin-right:6px; color:var(--dim); }
+  li.act .k { color:var(--brand); } li.error .k { color:var(--bad); }
+</style>
+</head>
+<body>
+  <header>
+    <h1><svg class="wordmark" viewBox="0 0 287 45" role="img" aria-label="AI Draftsman"><defs><linearGradient id="adg" x1="89.6201" y1="25.9941" x2="89.6201" y2="35.9941" gradientUnits="userSpaceOnUse"><stop stop-color="#6C3FCB"/><stop offset="1" stop-color="#F5A623"/></linearGradient></defs><path d="M247.697 42.532V37.7203C244.557 41.2428 240.648 43 235.967 43C231.541 43 227.762 41.3742 224.648 38.1227C221.549 34.8547 220 30.9873 220 26.5287C220 21.9881 221.615 18.1043 224.836 14.8773C228.082 11.6258 231.967 10 236.5 10C241.057 10 244.943 11.6258 248.164 14.8773C251.385 18.1043 253 21.9881 253 26.5287V42.5238H247.697V42.532ZM247.697 26.5369C247.697 23.4742 246.598 20.8467 244.393 18.6626C242.189 16.4538 239.557 15.3536 236.5 15.3536C233.467 15.3536 230.844 16.4538 228.639 18.6626C226.434 20.8467 225.336 23.4742 225.336 26.5369C225.336 29.5997 226.434 32.2354 228.639 34.4441C230.844 36.6283 233.467 37.7203 236.5 37.7203C239.533 37.7203 242.164 36.6283 244.393 34.4441C246.598 32.2354 247.697 29.5997 247.697 26.5369Z" fill="currentColor"/><path d="M28.1639 40.0897C24.959 43.366 21.0738 45 16.5 45C11.9426 45 8.05738 43.366 4.83607 40.0897C1.61475 36.7966 0 32.8332 0 28.1994C0 23.6494 1.54918 19.6943 4.64754 16.3342C7.7623 12.9992 11.541 11.3317 15.9672 11.3317C20.623 11.3317 24.5328 13.1501 27.6967 16.7867V1H33V28.1994C33 32.8332 31.3852 36.7966 28.1639 40.0897ZM27.6967 28.1994C27.6967 25.0739 26.5984 22.3925 24.3934 20.1636C22.1885 17.9095 19.5574 16.7867 16.5 16.7867C13.4672 16.7867 10.8443 17.9095 8.63934 20.1636C6.43443 22.3925 5.33607 25.0739 5.33607 28.1994C5.33607 31.3249 6.43443 34.0147 8.63934 36.2687C10.8443 38.4976 13.4672 39.6121 16.5 39.6121C19.5328 39.6121 22.1639 38.4976 24.3934 36.2687C26.5984 34.0147 27.6967 31.3249 27.6967 28.1994Z" fill="currentColor"/><path d="M120.158 7.91147C118.544 9.59142 117.742 11.6024 117.742 13.9609V16.1374H122.916V21.4917H117.742V43H112.599V21.4834H110V16.1291H112.599V13.9527C112.599 10.2783 113.95 7.03426 116.653 4.22055C119.355 1.40685 122.471 0 126 0V5.35431C123.735 5.36259 121.795 6.21497 120.158 7.91147Z" fill="currentColor"/><path d="M208.653 42.9917V22.9934C208.653 20.9445 207.983 19.1787 206.636 17.7044C205.273 16.1802 203.62 15.4223 201.669 15.4223C199.529 15.4223 197.835 16.1302 196.579 17.5462C195.322 18.9788 194.694 20.8029 194.694 23.0018V43H189.314V22.9934C189.314 20.7945 188.686 18.9788 187.43 17.5379C186.215 16.1219 184.529 15.4139 182.364 15.4139C180.388 15.4139 178.736 16.1719 177.397 17.6961C176.058 19.1787 175.38 20.9445 175.38 22.9851V42.9833H170V22.9934C170 19.4869 171.198 16.4467 173.587 13.8647C176.017 11.291 178.942 10 182.364 10C186.364 10 189.587 11.5492 192.017 14.656C194.405 11.5492 197.628 10 201.669 10C205.107 10 208.025 11.291 210.413 13.8647C212.802 16.4467 214 19.4869 214 22.9934V42.9917H208.653Z" fill="currentColor"/><path d="M281.626 42.9917V24.0762C281.626 21.6858 280.771 19.6535 279.071 17.9626C277.387 16.2718 275.364 15.4306 273.008 15.4306C270.628 15.4306 268.596 16.2802 266.921 17.9626C265.237 19.6535 264.399 21.6941 264.399 24.0762V43H259V24.0762C259 20.3614 260.41 17.0798 263.23 14.2479C266.05 11.416 269.309 10 273.017 10C276.699 10 279.95 11.416 282.77 14.2479C285.59 17.0798 287 20.3531 287 24.0762V43H281.626V42.9917Z" fill="currentColor"/><path d="M46.9112 17.9563C45.2296 19.6476 44.3929 21.6887 44.3929 24.0714V43H39V24.0798C39 20.364 40.4083 17.0815 43.2249 14.2489C46.0414 11.4163 49.297 10 53 10V15.4236C50.6225 15.4236 48.5929 16.2651 46.9112 17.9563Z" fill="currentColor"/><path d="M165 33.785C165 36.3474 164.055 38.5239 162.165 40.3143C160.275 42.1048 158.034 43 155.45 43C153.242 43 151.268 42.3347 149.529 40.996C147.765 39.6409 146.652 37.9326 146.184 35.8711L151.402 34.4667C151.486 34.943 151.653 35.3865 151.912 35.7807C152.172 36.175 152.473 36.5199 152.832 36.7992C153.192 37.0784 153.593 37.3001 154.045 37.4726C154.488 37.6369 154.956 37.7272 155.45 37.7272C156.596 37.7272 157.574 37.3412 158.377 36.5692C159.205 35.7972 159.614 34.8691 159.614 33.785C159.614 32.0767 158.435 30.6887 156.085 29.6292C154.028 28.6929 152.456 27.9701 151.36 27.4691C150.265 26.9681 149.654 26.6807 149.529 26.5986C147.171 24.9559 146 22.5495 146 19.3793C146 16.8168 146.937 14.6157 148.802 12.7842C150.691 10.9281 152.941 10 155.55 10C157.691 10 159.631 10.6735 161.371 12.0286C163.11 13.3591 164.222 15.0674 164.716 17.1536L159.464 18.5251C158.979 16.398 157.674 15.3385 155.55 15.3385C154.446 15.3385 153.468 15.7327 152.623 16.5294C151.82 17.3178 151.419 18.2705 151.419 19.3711C151.419 21.063 152.598 22.4345 154.948 23.494C156.989 24.4303 158.544 25.1531 159.623 25.6705C160.702 26.1797 161.32 26.4918 161.471 26.5903C163.829 28.2658 165 30.6558 165 33.785Z" fill="currentColor"/><path d="M137.322 16.1271V43H131.643V16.1271H126V10.7376H131.643V0H137.322V10.7459H143V16.1353H137.322V16.1271Z" fill="currentColor"/><path d="M102.189 14.2087C98.9044 10.899 94.9427 9.24414 90.2958 9.24414H69.9444C65.3226 9.24414 61.3609 10.899 58.0512 14.2087C54.7666 17.4933 53.1201 21.4466 53.1201 26.0685C53.1201 30.6068 54.6997 34.5433 57.859 37.8697C61.035 41.1794 64.888 42.8343 69.4012 42.8343C69.5851 42.8343 69.7606 42.8176 69.9444 42.8092H90.2958C94.8257 42.6755 98.6369 40.9036 101.713 37.4602V42.8982H107.12V26.0685C107.12 21.4466 105.482 17.4933 102.189 14.2087ZM98.3444 34.1171C96.0794 36.3403 93.3965 37.4518 90.2958 37.4518H69.9444C66.852 37.4518 64.1775 36.3403 61.9293 34.1171C59.681 31.8688 58.5611 29.1859 58.5611 26.0685C58.5611 22.951 59.6894 20.2765 61.9293 18.0533C64.1775 15.805 66.852 14.6851 69.9444 14.6851H90.2958C93.4133 14.6851 96.0961 15.8134 98.3444 18.0533C100.593 20.2765 101.713 22.951 101.713 26.0685C101.713 29.1859 100.593 31.8688 98.3444 34.1171Z" fill="currentColor"/><path d="M101.695 26.0357C101.695 29.1532 100.576 31.8361 98.3273 34.0843C96.0539 36.3075 93.3794 37.4191 90.2787 37.4191H69.9273C68.3811 37.4191 66.9352 37.1433 65.598 36.5833C64.2691 36.0317 63.0321 35.1959 61.9122 34.0843C59.6639 31.8361 58.5439 29.1532 58.5439 26.0357C58.5439 22.9182 59.6639 20.2437 61.9122 18.0206C64.1604 15.7723 66.8266 14.6523 69.9273 14.6523H90.2787C91.8332 14.6523 93.2875 14.9365 94.6247 15.4965C95.9703 16.0565 97.1989 16.8922 98.3273 18.0206C100.576 20.2437 101.695 22.9182 101.695 26.0357Z" fill="white"/><path d="M89.4551 35.9941C88.1093 35.9941 86.8567 35.7532 85.7225 35.2712C84.5715 34.7893 83.4965 34.0406 82.5317 33.0682C80.5765 31.0716 79.6201 28.7566 79.6201 25.9941C79.6201 23.2317 80.5681 20.9339 82.5317 18.9632C84.4953 16.9666 86.7636 15.9941 89.4551 15.9941H89.7513C91.0886 15.9941 92.3497 16.2437 93.5008 16.7256C94.6688 17.2248 95.7183 17.9477 96.7086 18.9546C98.6722 20.9253 99.6201 23.2317 99.6201 25.9941C99.6201 28.7566 98.6637 31.0716 96.7086 33.0682C94.728 35.0389 92.4513 35.9941 89.7513 35.9941H89.4551Z" fill="url(#adg)"/><circle cx="86" cy="24" r="3" fill="#fff"/><circle cx="93.2402" cy="24" r="3" fill="#fff"/></svg><span class="conn"><span id="dot" class="dot"></span><span id="status">Connecting…</span></span></h1>
+    <div class="tabs" role="tablist">
+      <button class="tab" role="tab" id="tabChat" aria-selected="true">Chat</button>
+      <button class="tab" role="tab" id="tabActivity" aria-selected="false">Activity</button>
+    </div>
+  </header>
+
+  <main>
+    <section id="chatView">
+      <div id="thread" aria-live="polite"></div>
+      <form id="form">
+        <div class="composer">
+          <textarea id="input" rows="1" placeholder="Ask AI Draftsman about this page…" aria-label="Message"></textarea>
+          <button type="submit" id="send" class="send">Send</button>
+        </div>
+        <div class="opts">
+          <label>Allow: <select id="mode"><option value="read">Read pages only</option><option value="act">Read and act</option></select></label>
+          <button type="button" class="link" id="clear">New chat</button>
+        </div>
+      </form>
+    </section>
+
+    <section id="activityView" hidden>
+      <div class="card">
+        <p class="sub" id="hint" style="margin:0 0 10px"></p>
+        <div class="row">
+          <button id="stop" class="btn">Stop AI Draftsman</button>
+          <button id="reconnect" class="btn ghost">Reconnect</button>
+        </div>
+      </div>
+      <div class="card"><strong>Activity</strong><ul id="log"></ul></div>
+    </section>
+  </main>
+  <script src="sidepanel.js"></script>
+</body>
+</html>

package/extension/chrome/sidepanel.js

@@ -0,0 +1,157 @@
+const $ = (id) => document.getElementById(id);
+
+const SUGGESTIONS = ['What is on this page?', 'List my open tabs', 'Fill in the quote form with name Sam and quantity 4'];
+let lastState = {};
+let modeTouched = false;let lastChat = { messages: [], running: false, mode: 'read' };
+
+// ---- tabs --------------------------------------------------------------------------------------------------------
+function showTab(name) {
+  const chat = name === 'chat';
+  $('chatView').hidden = !chat;
+  $('activityView').hidden = chat;
+  $('tabChat').setAttribute('aria-selected', String(chat));
+  $('tabActivity').setAttribute('aria-selected', String(!chat));
+}
+$('tabChat').addEventListener('click', () => showTab('chat'));
+$('tabActivity').addEventListener('click', () => showTab('activity'));
+
+// ---- status + activity -------------------------------------------------------------------------------------------
+function renderState(state, entries) {
+  const { connected = false, paused = false } = state || {};
+  $('dot').className = 'dot' + (connected && !paused ? ' on' : '');
+  $('status').textContent = paused ? 'Stopped by you' : connected ? 'Connected' : 'Not connected';
+  $('hint').textContent = paused
+    ? 'Every browser request is refused until you resume.'
+    : connected
+      ? 'The CLI, desktop app and this chat can use this browser. Stop blocks all of them.'
+      : 'Run `ad browser install`, then reload this extension.';
+  $('stop').textContent = paused ? 'Resume' : 'Stop AI Draftsman';
+  const list = $('log');
+  list.textContent = '';
+  if (!entries || entries.length === 0) {
+    const li = document.createElement('li');
+    li.className = 'sub';
+    li.textContent = 'Nothing yet.';
+    list.append(li);
+    return;
+  }
+  for (const e of entries.slice().reverse()) {
+    const li = document.createElement('li');
+    li.className = e.kind;
+    const t = document.createElement('span');
+    t.className = 't';
+    t.textContent = new Date(e.t).toLocaleTimeString();
+    const k = document.createElement('span');
+    k.className = 'k';
+    k.textContent = e.kind === 'act' ? 'did' : e.kind;
+    li.append(t, k, document.createTextNode(e.text));
+    list.append(li);
+  }
+}
+
+// ---- chat ---------------------------------------------------------------------------------------------------------
+function renderChat(chat) {
+  lastChat = chat;
+  const thread = $('thread');
+  const nearBottom = thread.scrollHeight - thread.scrollTop - thread.clientHeight < 80;
+  thread.textContent = '';
+  if (chat.messages.length === 0) {
+    const empty = document.createElement('div');
+    empty.className = 'empty';
+    empty.textContent = 'Ask about the page you are on, or ask AI Draftsman to do something in your browser.';
+    const box = document.createElement('div');
+    box.className = 'suggest';
+    for (const s of SUGGESTIONS) {
+      const b = document.createElement('button');
+      b.type = 'button';
+      b.textContent = s;
+      b.addEventListener('click', () => send(s));
+      box.append(b);
+    }
+    thread.append(empty, box);
+  }
+  chat.messages.forEach((m, i) => {
+    const el = document.createElement('div');
+    el.className = `msg ${m.role}`;
+    if (m.role === 'user') {
+      el.textContent = m.text;
+    } else {
+      if (m.steps?.length) {
+        const steps = document.createElement('div');
+        steps.className = 'steps';
+        for (const s of m.steps) {
+          const row = document.createElement('div');
+          row.className = `step ${s.state}`;
+          row.textContent = s.label;
+          steps.append(row);
+        }
+        el.append(steps);
+      }
+      if (m.text) el.append(document.createTextNode(m.text));
+      if (m.error) {
+        const err = document.createElement('div');
+        err.className = 'err';
+        err.textContent = m.error;
+        el.append(err);
+      }
+      if (!m.text && !m.error && chat.running && i === chat.messages.length - 1) {
+        const typing = document.createElement('div');
+        typing.className = 'typing';
+        typing.textContent = 'Working…';
+        el.append(typing);
+      }
+    }
+    thread.append(el);
+  });
+  if (!modeTouched) $('mode').value = chat.mode || 'read';
+  const sendBtn = $('send');
+  sendBtn.textContent = chat.running ? 'Stop' : 'Send';
+  sendBtn.className = chat.running ? 'send stop' : 'send';
+  if (nearBottom || chat.running) thread.scrollTop = thread.scrollHeight;
+}
+
+function send(text) {
+  const value = String(text || '').trim();
+  if (!value || lastChat.running) return;
+  void chrome.runtime.sendMessage({ type: 'chat_send', text: value, mode: $('mode').value });
+  $('input').value = '';
+  autosize();
+}
+
+$('form').addEventListener('submit', (e) => {
+  e.preventDefault();
+  if (lastChat.running) void chrome.runtime.sendMessage({ type: 'chat_stop' });
+  else send($('input').value);
+});
+$('input').addEventListener('keydown', (e) => {
+  if (e.key === 'Enter' && !e.shiftKey) {
+    e.preventDefault();
+    $('form').requestSubmit();
+  }
+});
+function autosize() {
+  const el = $('input');
+  el.style.height = 'auto';
+  el.style.height = `${Math.min(el.scrollHeight, 120)}px`;
+}
+$('input').addEventListener('input', autosize);
+$('mode').addEventListener('change', () => (modeTouched = true));
+$('clear').addEventListener('click', () => chrome.runtime.sendMessage({ type: 'chat_clear' }));
+
+// ---- controls + sync ---------------------------------------------------------------------------------------------
+$('stop').addEventListener('click', async () => {
+  const { state } = await chrome.storage.session.get('state');
+  await chrome.runtime.sendMessage({ type: 'pause', value: !state?.paused });
+});
+$('reconnect').addEventListener('click', () => chrome.runtime.sendMessage({ type: 'reconnect' }));
+
+async function refresh() {
+  const { state, log, chat } = await chrome.storage.session.get(['state', 'log', 'chat']);
+  lastState = state || {};
+  renderState(state, log);
+  renderChat(chat || { messages: [], running: false, mode: 'read' });
+}
+chrome.storage.onChanged.addListener((_c, area) => {
+  if (area === 'session') void refresh();
+});
+void refresh();

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@consultancy-outfit/ai-draftsman-cli",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "description": "AI Draftsman standalone CLI",
   "type": "module",
   "files": [
     "dist",
+    "extension",
     "README.md"
   ],
   "bin": {