@xingular/harness 1.5.0-unstable → 1.6.0-unstable

package/browser-extension/overlay.js

@@ -0,0 +1,97 @@
+(() => {
+  const hostId = '__xingular_agent_browser_badge__'
+  let host = document.getElementById(hostId)
+  if (host) return
+
+  host = document.createElement('div')
+  host.id = hostId
+  host.setAttribute('role', 'group')
+  host.setAttribute('aria-label', 'Xingular Agent browser controls')
+  host.style.cssText = 'all:initial;position:fixed;inset:auto 16px 16px auto;z-index:2147483647;pointer-events:auto;'
+  const root = host.attachShadow({ mode: 'closed' })
+  const style = document.createElement('style')
+  style.textContent = `
+    :host { all: initial; }
+    .badge { display:flex; align-items:center; gap:9px; padding:8px 10px 8px 12px; border:1px solid rgba(255,255,255,.16); border-radius:999px; background:#17201e; color:#f5f4ee; box-shadow:0 8px 24px rgba(0,0,0,.28); font:500 12px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing:0; }
+    .dot { width:7px; height:7px; flex:none; border-radius:50%; background:#81d5a8; box-shadow:0 0 0 3px rgba(129,213,168,.15); }
+    .badge.paused .dot { background:#e5b960; box-shadow:0 0 0 3px rgba(229,185,96,.15); }
+    .label { white-space:nowrap; }
+    button { appearance:none; border:0; border-radius:999px; padding:5px 9px; background:#2b3834; color:inherit; font:inherit; cursor:pointer; }
+    button:hover { background:#3a4b45; }
+    button:focus-visible { outline:2px solid #c5ead7; outline-offset:2px; }
+    button.stop { background:#643d3a; }
+    button.stop:hover { background:#7a4945; }
+    .pulse { position:fixed; width:14px; height:14px; margin:-7px 0 0 -7px; border:2px solid #d8f7e5; border-radius:50%; background:rgba(94,193,139,.22); box-shadow:0 0 0 4px rgba(94,193,139,.2); pointer-events:none; animation:agent-pulse .65s cubic-bezier(.2,.8,.2,1) forwards; }
+    @keyframes agent-pulse { from { opacity:.95; transform:scale(.45); } to { opacity:0; transform:scale(2.7); } }
+  `
+  const badge = document.createElement('div')
+  badge.className = 'badge'
+  const dot = document.createElement('span')
+  dot.className = 'dot'
+  const label = document.createElement('span')
+  label.className = 'label'
+  label.textContent = 'Xingular Agent is on this site'
+  const pause = document.createElement('button')
+  pause.type = 'button'
+  pause.textContent = 'Pause'
+  pause.setAttribute('aria-label', 'Pause browser control')
+  const stop = document.createElement('button')
+  stop.type = 'button'
+  stop.className = 'stop'
+  stop.textContent = 'Stop'
+  stop.setAttribute('aria-label', 'Stop browser control')
+  badge.append(dot, label, pause, stop)
+  root.append(style, badge)
+  document.documentElement.append(host)
+
+  let paused = false
+  const refresh = () => {
+    badge.classList.toggle('paused', paused)
+    label.textContent = paused ? 'Xingular Agent is paused' : 'Xingular Agent is on this site'
+    pause.textContent = paused ? 'Resume' : 'Pause'
+    pause.setAttribute('aria-label', paused ? 'Resume browser control' : 'Pause browser control')
+  }
+
+  const ask = action => chrome.runtime.sendMessage({ type: 'control', action })
+  pause.addEventListener('click', async event => {
+    event.preventDefault()
+    event.stopPropagation()
+    const result = await ask(paused ? 'resume' : 'pause').catch(() => null)
+    if (result?.ok) {
+      paused = !paused
+      refresh()
+    }
+  })
+  stop.addEventListener('click', async event => {
+    event.preventDefault()
+    event.stopPropagation()
+    await ask('stop').catch(() => null)
+  })
+
+  let mutationTimer = null
+  const observer = new MutationObserver(records => {
+    if (records.every(record => host.contains(record.target))) return
+    if (mutationTimer) clearTimeout(mutationTimer)
+    mutationTimer = setTimeout(() => chrome.runtime.sendMessage({ type: 'page-changed' }).catch(() => {}), 250)
+  })
+  const onMessage = message => {
+    if (message?.type === 'badge') {
+      paused = message.paused === true
+      refresh()
+    } else if (message?.type === 'pulse') {
+      const pulse = document.createElement('span')
+      pulse.className = 'pulse'
+      pulse.style.left = `${Number(message.x) || 0}px`
+      pulse.style.top = `${Number(message.y) || 0}px`
+      root.append(pulse)
+      setTimeout(() => pulse.remove(), 750)
+    } else if (message?.type === 'clear') {
+      observer.disconnect()
+      if (mutationTimer) clearTimeout(mutationTimer)
+      chrome.runtime.onMessage.removeListener(onMessage)
+      host.remove()
+    }
+  }
+  chrome.runtime.onMessage.addListener(onMessage)
+  observer.observe(document.documentElement, { childList: true, subtree: true, characterData: true, attributes: true, attributeFilter: ['aria-label', 'aria-expanded', 'disabled', 'href', 'role', 'value'] })
+})()

package/browser-extension/popup.css

@@ -0,0 +1,19 @@
+* { box-sizing: border-box; }
+body { width: 320px; margin: 0; background: #f4f3ec; color: #202823; font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
+main { padding: 20px; }
+h1 { margin: 0 0 8px; font-size: 19px; line-height: 1.2; letter-spacing: -.025em; }
+h2 { margin: 0 0 4px; font-size: 14px; font-weight: 650; }
+p { margin: 0 0 12px; color: #46534b; }
+#status { min-height: 22px; color: #28633f; font-weight: 600; }
+section { padding-top: 14px; border-top: 1px solid #d7d9ce; margin-top: 14px; }
+label { display: block; margin-bottom: 5px; font-weight: 600; }
+input { width: 100%; min-height: 38px; margin-bottom: 9px; border: 1px solid #a9b2a8; border-radius: 8px; padding: 8px 10px; color: #202823; background: #fff; font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; }
+button { width: 100%; min-height: 38px; margin-top: 7px; border: 0; border-radius: 8px; padding: 8px 12px; background: #23583a; color: #fff; font: inherit; font-size: 13px; font-weight: 600; line-height: 1.2; cursor: pointer; }
+button:hover { background: #19462d; }
+button:focus-visible, input:focus-visible { outline: 3px solid #91c7a4; outline-offset: 2px; }
+button:disabled { opacity: .55; cursor: default; }
+button.secondary { background: transparent; color: #35473b; border: 1px solid #a9b2a8; }
+button.secondary:hover { background: #e5e8df; }
+.note { margin-top: 16px; font-size: 12px; line-height: 1.45; }
+#error { margin-top: 12px; color: #962f2a; }
+[hidden] { display: none !important; }

package/browser-extension/popup.html

@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Xingular Agent</title>
+    <link rel="stylesheet" href="popup.css">
+  </head>
+  <body>
+    <main>
+      <h1>Brave browser access</h1>
+      <p id="status" role="status">Checking connection…</p>
+      <section id="pairing" hidden>
+        <label for="pairing-code">Pairing code</label>
+        <input id="pairing-code" autocomplete="off" spellcheck="false" placeholder="38671:ABCDEF012345">
+        <button id="connect" type="button">Connect to Harness</button>
+      </section>
+      <section id="site-access">
+        <h2 id="site-name">Current site</h2>
+        <p id="site-detail">Only the site you allow is exposed to Xingular Agent.</p>
+        <button id="allow" type="button">Allow this site</button>
+        <button id="remove" type="button" class="secondary" hidden>Remove site access</button>
+      </section>
+      <p class="note">Access covers ordinary tabs on this site. Incognito tabs are excluded. The extension does not read history or cookies.</p>
+      <p id="error" role="alert" hidden></p>
+    </main>
+    <script src="site-access.js"></script>
+    <script src="popup.js"></script>
+  </body>
+</html>

package/browser-extension/popup.js

@@ -0,0 +1,101 @@
+const statusLine = document.getElementById('status')
+const pairing = document.getElementById('pairing')
+const codeInput = document.getElementById('pairing-code')
+const connectButton = document.getElementById('connect')
+const siteName = document.getElementById('site-name')
+const siteDetail = document.getElementById('site-detail')
+const allowButton = document.getElementById('allow')
+const removeButton = document.getElementById('remove')
+const errorLine = document.getElementById('error')
+let currentOrigin = null
+let currentPermission = null
+
+function showError(message) {
+  errorLine.textContent = message
+  errorLine.hidden = !message
+}
+
+async function message(value) {
+  const response = await chrome.runtime.sendMessage(value)
+  if (!response?.ok) throw new Error(response?.error || 'The extension could not complete that action.')
+  return response.value
+}
+
+async function currentTab() {
+  const [tab] = await chrome.tabs.query({ active: true, lastFocusedWindow: true })
+  return tab || null
+}
+
+async function update() {
+  showError('')
+  const state = await message({ type: 'status' }).catch(() => ({ state: 'waiting', connected: false, paired: false }))
+  statusLine.textContent = state.connected ? (state.paused ? 'Connected · control paused' : 'Connected to Harness') : state.paired ? 'Paired · waiting for Harness' : 'Not connected to Harness'
+  pairing.hidden = state.paired
+
+  const tab = await currentTab()
+  currentOrigin = tab && !tab.incognito ? XingularSiteAccess.originOf(tab.url || '') : null
+  currentPermission = tab && !tab.incognito ? XingularSiteAccess.permissionFor(tab.url || '') : null
+  if (!currentOrigin || !currentPermission) {
+    siteName.textContent = 'No ordinary website tab selected'
+    siteDetail.textContent = tab?.incognito ? 'Incognito is never available to Xingular Agent.' : 'Open an http or https site in a normal Brave tab.'
+    allowButton.disabled = true
+    removeButton.hidden = true
+    return
+  }
+  let host = new URL(currentOrigin).host
+  try { host = new URL(tab.url).host } catch {}
+  siteName.textContent = host
+  const allowed = await XingularSiteAccess.allowed(tab.url)
+  siteDetail.textContent = allowed ? 'Xingular Agent can access normal tabs on this site.' : 'Allow this exact site before its tabs can be read or controlled.'
+  allowButton.hidden = allowed
+  allowButton.disabled = !state.connected
+  removeButton.hidden = !allowed
+}
+
+connectButton.addEventListener('click', async () => {
+  showError('')
+  const match = /^(\d{1,5}):([0-9a-f]{12})$/i.exec(codeInput.value.trim())
+  if (!match) return showError('Enter the port and code shown in Harness Browser settings.')
+  connectButton.disabled = true
+  try {
+    await message({ type: 'pair', port: Number(match[1]), code: match[2] })
+    codeInput.value = ''
+    await update()
+  } catch (error) {
+    showError(error.message)
+  } finally {
+    connectButton.disabled = false
+  }
+})
+
+allowButton.addEventListener('click', async () => {
+  showError('')
+  if (!currentOrigin) return
+  allowButton.disabled = true
+  try {
+    const granted = await XingularSiteAccess.grant(currentOrigin)
+    if (!granted) throw new Error('Brave did not grant access to this site.')
+    await message({ type: 'site-access-changed' })
+    await update()
+  } catch (error) {
+    showError(error.message)
+    allowButton.disabled = false
+  }
+})
+
+removeButton.addEventListener('click', async () => {
+  showError('')
+  if (!currentOrigin) return
+  removeButton.disabled = true
+  try {
+    await XingularSiteAccess.revoke(currentOrigin)
+    await message({ type: 'site-access-changed' })
+    await update()
+  } catch (error) {
+    showError(error.message)
+  } finally {
+    removeButton.disabled = false
+  }
+})
+
+void update()

package/browser-extension/site-access.js

@@ -0,0 +1,63 @@
+(() => {
+  const originOf = address => {
+    try {
+      const url = new URL(address)
+      return ['http:', 'https:'].includes(url.protocol) ? url.origin : null
+    } catch {
+      return null
+    }
+  }
+
+  const permissionFor = address => {
+    const origin = originOf(address)
+    if (!origin) return null
+    const url = new URL(origin)
+    // Chrome host permissions do not scope to ports. The stored origin below does.
+    return `${url.protocol}//${url.hostname}/*`
+  }
+
+  const savedOrigins = async api => {
+    const saved = await api.storage.local.get('allowedOrigins')
+    return Array.isArray(saved.allowedOrigins)
+      ? [...new Set(saved.allowedOrigins.filter(origin => typeof origin === 'string' && originOf(origin) === origin))]
+      : []
+  }
+
+  const allowed = async (address, api = chrome) => {
+    const origin = originOf(address)
+    const permission = permissionFor(address)
+    if (!origin || !permission || !(await savedOrigins(api)).includes(origin)) return false
+    return api.permissions.contains({ origins: [permission] })
+  }
+
+  const grant = async (address, api = chrome) => {
+    const origin = originOf(address)
+    const permission = permissionFor(address)
+    if (!origin || !permission || !await api.permissions.request({ origins: [permission] })) return false
+    const origins = await savedOrigins(api)
+    if (!origins.includes(origin)) origins.push(origin)
+    await api.storage.local.set({ allowedOrigins: origins })
+    return true
+  }
+
+  const revoke = async (address, api = chrome) => {
+    const origin = originOf(address)
+    const permission = permissionFor(address)
+    if (!origin || !permission) return
+    const origins = (await savedOrigins(api)).filter(saved => saved !== origin)
+    await api.storage.local.set({ allowedOrigins: origins })
+    if (!origins.some(saved => permissionFor(saved) === permission)) {
+      await api.permissions.remove({ origins: [permission] }).catch(() => false)
+    }
+  }
+
+  const forgetRemoved = async (permissions, api = chrome) => {
+    const removed = new Set(Array.isArray(permissions?.origins) ? permissions.origins : [])
+    if (!removed.size) return
+    const origins = await savedOrigins(api)
+    const remaining = origins.filter(origin => !removed.has(permissionFor(origin)))
+    if (remaining.length !== origins.length) await api.storage.local.set({ allowedOrigins: remaining })
+  }
+
+  globalThis.XingularSiteAccess = Object.freeze({ originOf, permissionFor, allowed, grant, revoke, forgetRemoved })
+})()