theus-cli-linux-x64 1.2.1 → 1.3.0

package/vendor/chrome-extension/background.js

@@ -0,0 +1,540 @@
+// Theus en Chrome — service worker (MV3).
+//
+// Conecta con el host de mensajería nativa que sirve el CLI de Theus
+// (`com.theus.theus_code_browser_extension` → wrapper que ejecuta
+// `theus --chrome-native-host`) y atiende los `tool_request` que el CLI
+// serializa por el socket del host. Contrato de mensajes (ver
+// utils/theusInChrome/chromeNativeHost.ts en el repo del CLI):
+//
+//   host → extensión: {type:'tool_request', method, params:{id,name,arguments}}
+//                     {type:'pong'|'status_response'|'mcp_connected'|'mcp_disconnected'|'error'}
+//   extensión → host: {type:'tool_response', id, result|error}
+//                     {type:'ping'} · {type:'get_status'}
+//
+// Límite del canal host↔CLI: 16 MB por mensaje (LIMITE_CANAL_BYTES en cdp.js;
+// debe casar con MAX_CHANNEL_MESSAGE_BYTES del CLI). Los textos largos se
+// truncan igualmente (MAX_TEXT_CHARS) y las capturas se recomprimen.
+//
+// Fase 2 (control total vía chrome.debugger): cdp-core.js (lógica pura) +
+// cdp.js (sesiones CDP por pestaña, buffers y handlers). Se fusionan en
+// TOOL_HANDLERS más abajo.
+importScripts('cdp-core.js', 'cdp.js')
+
+const NATIVE_HOST = 'com.theus.theus_code_browser_extension'
+const PING_INTERVAL_MS = 20_000 // mantiene vivo el service worker y el canal
+const NAVIGATE_TIMEOUT_MS = 45_000
+const MAX_TEXT_CHARS = 180_000 // margen holgado bajo el límite de 1 MB
+const MAX_FIND_RESULTS = 25
+
+let port = null
+let reconnectDelayMs = 1_000
+let reconnectTimer = null
+let pingTimer = null
+let mcpClientCount = 0 // clientes MCP (sesiones del CLI) vistos por el host
+let lastError = null
+
+// Kuti fase 1 — estado del grabador. Expuesto en globalThis para que cdp.js
+// (cargado por importScripts, mismo ámbito global) sepa si debe reportar las
+// navegaciones del frame principal.
+const RecorderState = { grabando: false, tabGrabada: null, capturas: false }
+globalThis.__kuti = RecorderState
+
+// ---------------------------------------------------------------------------
+// Conexión con el host nativo
+// ---------------------------------------------------------------------------
+
+function connectToHost() {
+  if (port) return
+  try {
+    port = chrome.runtime.connectNative(NATIVE_HOST)
+  } catch (e) {
+    lastError = String(e)
+    scheduleReconnect()
+    return
+  }
+
+  port.onMessage.addListener(onHostMessage)
+  port.onDisconnect.addListener(() => {
+    lastError = chrome.runtime.lastError
+      ? chrome.runtime.lastError.message
+      : null
+    port = null
+    mcpClientCount = 0
+    stopPing()
+    scheduleReconnect()
+  })
+
+  reconnectDelayMs = 1_000
+  lastError = null
+  startPing()
+  safePost({ type: 'get_status' })
+}
+
+function scheduleReconnect() {
+  if (reconnectTimer) return
+  reconnectTimer = setTimeout(() => {
+    reconnectTimer = null
+    connectToHost()
+  }, reconnectDelayMs)
+  reconnectDelayMs = Math.min(reconnectDelayMs * 2, 60_000)
+}
+
+function startPing() {
+  stopPing()
+  pingTimer = setInterval(() => safePost({ type: 'ping' }), PING_INTERVAL_MS)
+}
+
+function stopPing() {
+  if (pingTimer) {
+    clearInterval(pingTimer)
+    pingTimer = null
+  }
+}
+
+function safePost(message) {
+  if (!port) return
+  try {
+    port.postMessage(message)
+  } catch (e) {
+    lastError = String(e)
+  }
+}
+
+function onHostMessage(message) {
+  if (!message || typeof message.type !== 'string') return
+  switch (message.type) {
+    case 'pong':
+    case 'status_response':
+      break
+    case 'mcp_connected':
+      mcpClientCount += 1
+      break
+    case 'mcp_disconnected':
+      mcpClientCount = Math.max(0, mcpClientCount - 1)
+      break
+    case 'tool_request':
+      void handleToolRequest(message)
+      break
+    case 'error':
+      lastError = String(message.error || 'error del host')
+      break
+    default:
+      break
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Despacho de tools
+// ---------------------------------------------------------------------------
+
+async function handleToolRequest(message) {
+  const params = message.params || {}
+  const id = typeof params.id === 'string' ? params.id : null
+  const name =
+    typeof params.name === 'string' ? params.name : String(message.method || '')
+  const args =
+    params.arguments && typeof params.arguments === 'object'
+      ? params.arguments
+      : {}
+
+  if (!id) {
+    // Sin id no hay a quién correlacionar la respuesta; no se puede atender.
+    return
+  }
+
+  try {
+    const handler = TOOL_HANDLERS[name]
+    if (!handler) {
+      respondError(id, `Tool no soportada por la extensión: ${name}`)
+      return
+    }
+    const result = await handler(args)
+    safePost({ type: 'tool_response', id, result })
+  } catch (e) {
+    respondError(id, e && e.message ? e.message : String(e))
+  }
+}
+
+function respondError(id, text) {
+  safePost({
+    type: 'tool_response',
+    id,
+    result: { content: [{ type: 'text', text }], isError: true },
+  })
+}
+
+function textResult(text) {
+  return { content: [{ type: 'text', text }] }
+}
+
+function jsonResult(data) {
+  return textResult(JSON.stringify(data, null, 2))
+}
+
+function requireTabId(args) {
+  const tabId = args.tabId
+  if (typeof tabId !== 'number' || !Number.isInteger(tabId)) {
+    throw new Error('Falta el parámetro tabId (número entero).')
+  }
+  return tabId
+}
+
+function truncate(text, max) {
+  if (typeof text !== 'string') return ''
+  if (text.length <= max) return text
+  return (
+    text.slice(0, max) +
+    `\n\n[… texto truncado: ${text.length - max} caracteres omitidos]`
+  )
+}
+
+const TOOL_HANDLERS = {
+  // Lista pestañas: id, url, title, active.
+  async tabs_context_mcp() {
+    const tabs = await chrome.tabs.query({})
+    const rows = tabs.map(t => ({
+      id: t.id,
+      url: t.url || '',
+      title: t.title || '',
+      active: Boolean(t.active),
+      windowId: t.windowId,
+    }))
+    return jsonResult({ tabs: rows })
+  },
+
+  // Abre una pestaña (url opcional) y devuelve su tabId.
+  async tabs_create_mcp(args) {
+    const createProps = {}
+    if (typeof args.url === 'string' && args.url.length > 0) {
+      createProps.url = args.url
+    }
+    const tab = await chrome.tabs.create(createProps)
+    return jsonResult({ tabId: tab.id, url: tab.pendingUrl || tab.url || '' })
+  },
+
+  // Navega la pestaña y espera al estado "complete".
+  async navigate(args) {
+    const tabId = requireTabId(args)
+    if (typeof args.url !== 'string' || args.url.length === 0) {
+      throw new Error('Falta el parámetro url.')
+    }
+    await chrome.tabs.update(tabId, { url: args.url })
+    await waitForTabComplete(tabId, NAVIGATE_TIMEOUT_MS)
+    const tab = await chrome.tabs.get(tabId)
+    return jsonResult({
+      tabId,
+      url: tab.url || '',
+      title: tab.title || '',
+      status: tab.status || 'complete',
+    })
+  },
+
+  // Texto visible del DOM.
+  async get_page_text(args) {
+    const tabId = requireTabId(args)
+    const frames = await chrome.scripting.executeScript({
+      target: { tabId },
+      func: () => (document.body ? document.body.innerText : ''),
+    })
+    const text = frames && frames[0] ? String(frames[0].result || '') : ''
+    return textResult(truncate(text, MAX_TEXT_CHARS))
+  },
+
+  // Ejecuta JS en el mundo MAIN de la página y devuelve el resultado serializado.
+  async javascript_tool(args) {
+    const tabId = requireTabId(args)
+    if (typeof args.code !== 'string') {
+      throw new Error('Falta el parámetro code.')
+    }
+    const frames = await chrome.scripting.executeScript({
+      target: { tabId },
+      world: 'MAIN',
+      func: code => {
+        try {
+          // eslint-disable-next-line no-eval
+          const value = (0, eval)(code)
+          let serialized
+          try {
+            serialized = JSON.stringify(value)
+          } catch (_e) {
+            serialized = undefined
+          }
+          if (serialized === undefined) {
+            serialized = String(value)
+          }
+          return { ok: true, value: serialized }
+        } catch (e) {
+          return { ok: false, error: e && e.message ? e.message : String(e) }
+        }
+      },
+      args: [args.code],
+    })
+    const outcome = frames && frames[0] ? frames[0].result : null
+    if (!outcome) {
+      throw new Error('La ejecución no devolvió resultado (¿pestaña protegida?).')
+    }
+    if (!outcome.ok) {
+      return {
+        content: [
+          { type: 'text', text: `Error de ejecución: ${outcome.error}` },
+        ],
+        isError: true,
+      }
+    }
+    return textResult(truncate(String(outcome.value), MAX_TEXT_CHARS))
+  },
+
+  // Busca elementos por texto visible o selector CSS y devuelve refs simples.
+  async find(args) {
+    const tabId = requireTabId(args)
+    if (typeof args.query !== 'string' || args.query.length === 0) {
+      throw new Error('Falta el parámetro query.')
+    }
+    const frames = await chrome.scripting.executeScript({
+      target: { tabId },
+      func: (query, maxResults) => {
+        function cssPath(el) {
+          const parts = []
+          let node = el
+          while (node && node.nodeType === 1 && parts.length < 6) {
+            let part = node.tagName.toLowerCase()
+            if (node.id) {
+              parts.unshift(`${part}#${node.id}`)
+              break
+            }
+            const parent = node.parentElement
+            if (parent) {
+              const siblings = Array.from(parent.children).filter(
+                c => c.tagName === node.tagName,
+              )
+              if (siblings.length > 1) {
+                part += `:nth-of-type(${siblings.indexOf(node) + 1})`
+              }
+            }
+            parts.unshift(part)
+            node = node.parentElement
+          }
+          return parts.join(' > ')
+        }
+        function describe(el, ref) {
+          const text = (el.innerText || el.value || '')
+            .trim()
+            .replace(/\s+/g, ' ')
+            .slice(0, 120)
+          return {
+            ref,
+            tag: el.tagName.toLowerCase(),
+            selector: cssPath(el),
+            role: el.getAttribute('role') || null,
+            text,
+          }
+        }
+        const found = []
+        // 1) Si la query es un selector CSS válido, úsalo tal cual.
+        try {
+          const bySelector = document.querySelectorAll(query)
+          for (const el of bySelector) {
+            if (found.length >= maxResults) break
+            found.push(describe(el, `sel-${found.length + 1}`))
+          }
+        } catch (_e) {
+          // No era un selector válido; seguimos con búsqueda por texto.
+        }
+        // 2) Búsqueda por texto visible en elementos interactivos y comunes.
+        if (found.length < maxResults) {
+          const lower = query.toLowerCase()
+          const candidates = document.querySelectorAll(
+            'a, button, input, select, textarea, label, h1, h2, h3, h4, [role], summary, li, td, th, p, span',
+          )
+          for (const el of candidates) {
+            if (found.length >= maxResults) break
+            const text = (
+              el.innerText ||
+              el.value ||
+              el.getAttribute('aria-label') ||
+              ''
+            )
+              .trim()
+              .replace(/\s+/g, ' ')
+            if (!text) continue
+            if (text.toLowerCase().includes(lower) && text.length < 400) {
+              found.push(describe(el, `txt-${found.length + 1}`))
+            }
+          }
+        }
+        return found
+      },
+      args: [args.query, MAX_FIND_RESULTS],
+    })
+    const results = frames && frames[0] && frames[0].result ? frames[0].result : []
+    return jsonResult({ query: args.query, matches: results })
+  },
+}
+
+// Fase 2: computer, read_page, form_input, resize_window,
+// read_console_messages y read_network_requests (definidos en cdp.js).
+Object.assign(TOOL_HANDLERS, CDP_TOOL_HANDLERS)
+
+// ---------------------------------------------------------------------------
+// Kuti fase 1 — grabador (captura automática de input)
+// ---------------------------------------------------------------------------
+
+// Inyecta el content script recorder.js en todos los frames de la pestaña.
+async function inyectarRecorder(tabId) {
+  await chrome.scripting.executeScript({
+    target: { tabId, allFrames: true },
+    files: ['recorder.js'],
+  })
+}
+
+// Empuja un evento del grabador al CLI por el MISMO canal nativo (host →
+// `recorder_event`, sin id de correlación). El host lo reenvía a los clientes
+// MCP; el socketClient del CLI lo reparte a sus oyentes.
+function empujarEventoGrabacion(evento) {
+  safePost({ type: 'recorder_event', evento })
+}
+
+// Hook que cdp.js llama al detectar una navegación del frame principal.
+globalThis.kutiEmitirNavegacion = function (tabId, url, capturaBase64) {
+  if (!RecorderState.grabando || tabId !== RecorderState.tabGrabada) return
+  const evento = { t: 'navigate', url: url || '', tabId, ts: Date.now() }
+  if (typeof capturaBase64 === 'string' && capturaBase64.length > 0) {
+    evento.captura = capturaBase64
+  }
+  empujarEventoGrabacion(evento)
+}
+
+Object.assign(TOOL_HANDLERS, {
+  async recorder_start(args) {
+    const tabId = requireTabId(args)
+    RecorderState.grabando = true
+    RecorderState.tabGrabada = tabId
+    RecorderState.capturas = args.capturas === true
+    try {
+      await inyectarRecorder(tabId)
+    } catch (e) {
+      RecorderState.grabando = false
+      RecorderState.tabGrabada = null
+      throw new Error(
+        `No se pudo inyectar el capturador en la pestaña ${tabId}: ${e && e.message ? e.message : e}. ` +
+          'Las páginas del navegador (chrome://…) y la Web Store no admiten grabación.',
+      )
+    }
+    // Sesión CDP para oír las navegaciones (y capturar por paso si se pidió).
+    // Si la pestaña no se puede instrumentar, se graba igual sin el paso
+    // `navegar` automático.
+    try {
+      await asegurarSesion(tabId)
+    } catch (_e) {
+      // Sin CDP: el content script sigue capturando clics/cambios/teclas.
+    }
+    return textResult(
+      'Grabación iniciada. Opera normalmente en la pestaña: tus clics, cambios de campo y teclas se capturan. ' +
+        'Mientras grabas, Chrome muestra la barra «Theus en Chrome ha empezado a depurar este navegador».',
+    )
+  },
+
+  async recorder_stop() {
+    const tabId = RecorderState.tabGrabada
+    RecorderState.grabando = false
+    RecorderState.tabGrabada = null
+    RecorderState.capturas = false
+    if (typeof tabId === 'number') {
+      try {
+        await chrome.tabs.sendMessage(tabId, { type: 'kuti_recorder_stop' })
+      } catch (_e) {
+        // El content script pudo desaparecer con una navegación: no pasa nada.
+      }
+    }
+    return textResult('Grabación detenida.')
+  },
+})
+
+function waitForTabComplete(tabId, timeoutMs) {
+  return new Promise((resolve, reject) => {
+    let settled = false
+    const timer = setTimeout(() => {
+      if (settled) return
+      settled = true
+      chrome.tabs.onUpdated.removeListener(listener)
+      reject(new Error(`La página no terminó de cargar en ${Math.round(timeoutMs / 1000)} s.`))
+    }, timeoutMs)
+    function listener(updatedTabId, changeInfo) {
+      if (updatedTabId === tabId && changeInfo.status === 'complete') {
+        if (settled) return
+        settled = true
+        clearTimeout(timer)
+        chrome.tabs.onUpdated.removeListener(listener)
+        resolve()
+      }
+    }
+    chrome.tabs.onUpdated.addListener(listener)
+    // Por si la pestaña ya estaba completa cuando llegamos.
+    chrome.tabs.get(tabId).then(tab => {
+      if (tab.status === 'complete' && !settled) {
+        settled = true
+        clearTimeout(timer)
+        chrome.tabs.onUpdated.removeListener(listener)
+        resolve()
+      }
+    }, () => {})
+  })
+}
+
+// ---------------------------------------------------------------------------
+// Estado para el popup
+// ---------------------------------------------------------------------------
+
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+  if (message && message.type === 'get_state') {
+    sendResponse({
+      hostConnected: Boolean(port),
+      cliConnected: mcpClientCount > 0,
+      cliClients: mcpClientCount,
+      recording: RecorderState.grabando,
+      lastError,
+    })
+    return false
+  }
+  // Evento del grabador (content script recorder.js). Solo se reenvía si la
+  // grabación está activa y viene de la pestaña que grabamos.
+  if (message && message.type === 'kuti_recorder_event') {
+    if (
+      RecorderState.grabando &&
+      sender &&
+      sender.tab &&
+      sender.tab.id === RecorderState.tabGrabada &&
+      message.evento &&
+      typeof message.evento === 'object'
+    ) {
+      const evento = {
+        ...message.evento,
+        tabId: sender.tab.id,
+        url: sender.url || (sender.tab && sender.tab.url) || '',
+        ts: Date.now(),
+      }
+      empujarEventoGrabacion(evento)
+    }
+    return false
+  }
+  return false
+})
+
+// Reinyecta el capturador tras cada navegación de la pestaña grabada: el
+// content script muere al cambiar de página.
+chrome.tabs.onUpdated.addListener((tabId, changeInfo) => {
+  if (
+    RecorderState.grabando &&
+    tabId === RecorderState.tabGrabada &&
+    changeInfo.status === 'complete'
+  ) {
+    inyectarRecorder(tabId).catch(() => {
+      // Página protegida o carrera con un cierre: se ignora.
+    })
+  }
+})
+
+// Arranque: conectar al host (también al instalarse o reiniciar el navegador).
+chrome.runtime.onStartup.addListener(connectToHost)
+chrome.runtime.onInstalled.addListener(connectToHost)
+connectToHost()