@etus/seven-skill 0.1.0-beta.3 → 0.1.0-beta.4

package/extension/content/content-script.js

@@ -0,0 +1,340 @@
+/* global chrome */
+
+(() => {
+  if (globalThis.__SEVEN_UI_GUARDIAN__) return
+  globalThis.__SEVEN_UI_GUARDIAN__ = true
+
+  const previousOutlines = new Map()
+  let findings = []
+  let overlaysVisible = true
+  let live = null
+  let selected = null
+  let hover = null
+  let selecting = false
+  let requestId = null
+  let originalHTML = ""
+  let variants = []
+  let variantIndex = 0
+  let liveStyle = null
+
+  function selectorFor(element) {
+    if (!(element instanceof Element)) return ""
+    const escape = (value) => globalThis.CSS?.escape ? CSS.escape(value) : String(value).replace(/[^a-zA-Z0-9_-]/g, "\\$&")
+    if (element.id && document.querySelectorAll(`#${escape(element.id)}`).length === 1) return `#${escape(element.id)}`
+    for (const name of ["data-testid", "data-slot"]) {
+      const value = element.getAttribute(name)
+      if (value) {
+        const candidate = `[${name}="${value.replace(/["\\]/g, "\\$&")}"]`
+        if (document.querySelectorAll(candidate).length === 1) return candidate
+      }
+    }
+    const parts = []
+    let current = element
+    while (current && current !== document.documentElement && parts.length < 7) {
+      let part = current.tagName.toLowerCase()
+      const peers = current.parentElement ? [...current.parentElement.children].filter((item) => item.tagName === current.tagName) : []
+      if (peers.length > 1) part += `:nth-of-type(${peers.indexOf(current) + 1})`
+      parts.unshift(part)
+      const candidate = parts.join(" > ")
+      if (document.querySelectorAll(candidate).length === 1) return candidate
+      current = current.parentElement
+    }
+    return parts.join(" > ")
+  }
+
+  function rememberOutline(element) {
+    if (!previousOutlines.has(element)) previousOutlines.set(element, element.style.outline)
+  }
+
+  function clearOutlines() {
+    for (const [element, outline] of previousOutlines) {
+      if (element.isConnected) element.style.outline = outline
+    }
+    previousOutlines.clear()
+  }
+
+  function renderFindingOutlines() {
+    clearOutlines()
+    if (!overlaysVisible) return
+    for (const finding of findings) {
+      if (!finding.selector) continue
+      let element
+      try { element = document.querySelector(finding.selector) } catch { continue }
+      if (!element) continue
+      rememberOutline(element)
+      element.style.outline = "2px solid #146c5a"
+      element.style.outlineOffset = "2px"
+    }
+  }
+
+  function computedEvidence(element) {
+    const style = getComputedStyle(element)
+    const names = [
+      "display", "position", "color", "background-color", "font-family", "font-size", "font-weight",
+      "line-height", "letter-spacing", "border-radius", "border-color", "border-width", "box-shadow",
+      "padding", "margin", "gap", "width", "height", "max-width", "min-height", "align-items", "justify-content",
+    ]
+    return Object.fromEntries(names.map((name) => [name, style.getPropertyValue(name)]))
+  }
+
+  function evidence(element) {
+    const rect = element.getBoundingClientRect()
+    return {
+      selector: selectorFor(element),
+      tag: element.tagName.toLowerCase(),
+      text: (element.textContent || "").trim().slice(0, 8_000),
+      outerHTML: element.outerHTML.slice(0, 100_000),
+      computedStyles: computedEvidence(element),
+      rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
+    }
+  }
+
+  function bridgeRequest(path, { method = "GET", body } = {}) {
+    if (!live) return Promise.resolve({ ok: false, data: { error: "Live desconectado" } })
+    return chrome.runtime.sendMessage({
+      action: "seven-live-request",
+      serverUrl: live.serverUrl,
+      token: live.token,
+      path,
+      method,
+      body,
+    })
+  }
+
+  function panel() {
+    return document.querySelector("seven-live-panel")?.shadowRoot
+  }
+
+  function setStatus(message, kind = "") {
+    const output = panel()?.querySelector("[data-status]")
+    if (!output) return
+    output.textContent = message
+    output.dataset.kind = kind
+  }
+
+  function stopSelecting() {
+    selecting = false
+    document.documentElement.style.cursor = ""
+    if (hover && hover !== selected) hover.style.outline = previousOutlines.get(hover) || ""
+    hover = null
+  }
+
+  function onPointerMove(event) {
+    if (!selecting) return
+    const host = document.querySelector("seven-live-panel")
+    if (host && event.composedPath().includes(host)) return
+    const next = event.composedPath().find((item) => item instanceof Element && item !== host && !host?.contains(item))
+    if (!next || next === hover) return
+    if (hover && hover !== selected) hover.style.outline = previousOutlines.get(hover) || ""
+    hover = next
+    rememberOutline(hover)
+    hover.style.outline = "2px solid #74c69d"
+    hover.style.outlineOffset = "2px"
+  }
+
+  function onSelect(event) {
+    if (!selecting || !hover) return
+    event.preventDefault()
+    event.stopPropagation()
+    selected = hover
+    rememberOutline(selected)
+    selected.style.outline = "3px solid #146c5a"
+    selected.style.outlineOffset = "2px"
+    originalHTML = selected.outerHTML
+    stopSelecting()
+    const label = panel()?.querySelector("[data-target]")
+    if (label) label.textContent = `${selected.tagName.toLowerCase()} · ${selectorFor(selected)}`
+    setStatus("Elemento selecionado")
+  }
+
+  function safeNode(html) {
+    if (/<\s*(?:script|iframe|object|embed|link|meta)\b|\bon[a-z]+\s*=|javascript\s*:/i.test(html)) throw new Error("Preview executável recusado")
+    const template = document.createElement("template")
+    template.innerHTML = html.trim()
+    if (template.content.children.length !== 1) throw new Error("A direção precisa ter uma raiz HTML")
+    for (const element of template.content.querySelectorAll("*")) {
+      for (const attribute of [...element.attributes]) {
+        if (/^on/i.test(attribute.name) || /^(?:javascript|data):/i.test(attribute.value)) element.removeAttribute(attribute.name)
+      }
+    }
+    return template.content.firstElementChild
+  }
+
+  function renderVariant(index) {
+    if (!selected || !variants[index]) return
+    const variant = variants[index]
+    const node = safeNode(variant.html)
+    selected.replaceWith(node)
+    selected = node
+    liveStyle?.remove()
+    liveStyle = null
+    if (variant.css) {
+      if (/@import\b|url\s*\(/i.test(variant.css)) throw new Error("CSS de preview com rede recusado")
+      liveStyle = document.createElement("style")
+      liveStyle.dataset.sevenLive = requestId
+      liveStyle.textContent = variant.css
+      document.head.appendChild(liveStyle)
+    }
+    variantIndex = index
+    const label = panel()?.querySelector("[data-variant]")
+    if (label) label.textContent = `${index + 1}/${variants.length} · ${variant.label}`
+    setStatus("Preview local; ainda não é código-fonte")
+  }
+
+  function restoreOriginal() {
+    if (!selected || !originalHTML) return
+    const node = safeNode(originalHTML)
+    selected.replaceWith(node)
+    selected = node
+    liveStyle?.remove()
+    liveStyle = null
+  }
+
+  async function waitForReply(id) {
+    for (let attempt = 0; attempt < 600 && requestId === id; attempt++) {
+      const response = await bridgeRequest(`/reply?id=${encodeURIComponent(id)}`)
+      if (response.status === 200 && response.data) return response.data
+      await new Promise((resolve) => setTimeout(resolve, 1_000))
+    }
+    throw new Error("Tempo de espera do agente esgotado")
+  }
+
+  async function generate() {
+    if (!selected) return setStatus("Selecione um elemento primeiro", "error")
+    const root = panel()
+    setStatus("Aguardando o agente…")
+    const response = await bridgeRequest("/events", {
+      method: "POST",
+      body: {
+        type: "generate",
+        pageUrl: location.href,
+        action: root.querySelector("[data-action]").value,
+        prompt: root.querySelector("[data-prompt]").value,
+        count: 3,
+        target: evidence(selected),
+      },
+    })
+    if (!response.ok) return setStatus(response.data?.error || "Falha ao enviar", "error")
+    requestId = response.data.id
+    try {
+      const reply = await waitForReply(requestId)
+      variants = reply.variants || []
+      if (!variants.length) return setStatus(reply.message || "O agente não entregou previews", "error")
+      renderVariant(0)
+      root.querySelector("[data-variants]").hidden = false
+    } catch (error) {
+      setStatus(error.message, "error")
+    }
+  }
+
+  async function decide(type) {
+    if (!requestId || !selected) return
+    const variant = variants[variantIndex]
+    if (type === "discard") restoreOriginal()
+    const response = await bridgeRequest("/events", {
+      method: "POST",
+      body: {
+        type,
+        pageUrl: location.href,
+        requestId,
+        variantId: variant?.id || "",
+        target: evidence(selected),
+      },
+    })
+    if (!response.ok) return setStatus(response.data?.error || "Falha ao registrar decisão", "error")
+    setStatus(type === "accept" ? "Aceita; aguardando aplicação e validação no código" : "Descartada e restaurada")
+    requestId = null
+    variants = []
+    panel().querySelector("[data-variants]").hidden = true
+  }
+
+  function mountLivePanel() {
+    if (document.querySelector("seven-live-panel")) return
+    const host = document.createElement("seven-live-panel")
+    const root = host.attachShadow({ mode: "open" })
+    root.innerHTML = `
+      <style>
+        :host { all: initial; position: fixed; z-index: 2147483647; right: 16px; bottom: 16px; color: #17332d; font: 13px/1.4 Inter, system-ui, sans-serif; }
+        .panel { width: 320px; padding: 14px; border: 1px solid #b8d9cf; border-radius: 16px; background: #f6fbf9; box-shadow: 0 16px 50px rgba(15, 60, 49, .22); }
+        h1 { margin: 0 0 10px; font-size: 15px; } label { display: grid; gap: 4px; margin-top: 8px; color: #44635b; }
+        select, textarea, button { box-sizing: border-box; width: 100%; font: inherit; }
+        select, textarea { border: 1px solid #9ec8bb; border-radius: 8px; background: white; padding: 8px; color: #17332d; }
+        textarea { min-height: 58px; resize: vertical; }
+        button { border: 1px solid #146c5a; border-radius: 8px; background: #146c5a; color: white; padding: 8px 10px; cursor: pointer; }
+        button.secondary { background: transparent; color: #146c5a; } .row { display: flex; gap: 6px; margin-top: 8px; }
+        .target { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #44635b; }
+        .status { min-height: 20px; margin-top: 8px; color: #44635b; } .status[data-kind=error] { color: #9b2c2c; }
+        .variant { margin-top: 8px; font-weight: 600; } [hidden] { display: none !important; }
+      </style>
+      <div class="panel">
+        <h1>Seven Live</h1>
+        <div class="target" data-target>Nenhum elemento selecionado</div>
+        <div class="row"><button data-select>Selecionar elemento</button><button class="secondary" data-close>Fechar</button></div>
+        <label>Ação<select data-action><option>polish</option><option>bolder</option><option>quieter</option><option>distill</option><option>harden</option><option>colorize</option><option>typeset</option><option>layout</option><option>delight</option><option>adapt</option></select></label>
+        <label>Direção opcional<textarea data-prompt placeholder="O que deve melhorar sem sair do Seven?"></textarea></label>
+        <button data-generate style="margin-top:8px">Gerar 3 direções</button>
+        <div data-variants hidden><div class="variant" data-variant></div><div class="row"><button class="secondary" data-prev>Anterior</button><button class="secondary" data-next>Próxima</button></div><div class="row"><button data-accept>Aceitar</button><button class="secondary" data-discard>Descartar</button></div></div>
+        <div class="status" data-status>Conectado ao bridge local</div>
+      </div>`
+    document.documentElement.appendChild(host)
+    root.querySelector("[data-select]").addEventListener("click", () => {
+      selecting = true
+      document.documentElement.style.cursor = "crosshair"
+      setStatus("Clique no elemento da página")
+    })
+    root.querySelector("[data-close]").addEventListener("click", () => disconnectLive())
+    root.querySelector("[data-generate]").addEventListener("click", () => generate())
+    root.querySelector("[data-prev]").addEventListener("click", () => renderVariant((variantIndex - 1 + variants.length) % variants.length))
+    root.querySelector("[data-next]").addEventListener("click", () => renderVariant((variantIndex + 1) % variants.length))
+    root.querySelector("[data-accept]").addEventListener("click", () => decide("accept"))
+    root.querySelector("[data-discard]").addEventListener("click", () => decide("discard"))
+  }
+
+  function disconnectLive() {
+    stopSelecting()
+    liveStyle?.remove()
+    liveStyle = null
+    document.querySelector("seven-live-panel")?.remove()
+    live = null
+  }
+
+  document.addEventListener("pointermove", onPointerMove, true)
+  document.addEventListener("click", onSelect, true)
+
+  chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
+    if (message.action === "seven-findings") {
+      findings = Array.isArray(message.findings) ? message.findings : []
+      overlaysVisible = message.visible !== false
+      renderFindingOutlines()
+      sendResponse({ ok: true })
+    } else if (message.action === "seven-toggle") {
+      overlaysVisible = message.visible !== false
+      renderFindingOutlines()
+      sendResponse({ ok: true })
+    } else if (message.action === "seven-highlight") {
+      const element = document.querySelector(message.selector)
+      element?.scrollIntoView({ behavior: "smooth", block: "center" })
+      if (element) {
+        rememberOutline(element)
+        element.style.outline = "3px solid #74c69d"
+      }
+      sendResponse({ ok: Boolean(element) })
+    } else if (message.action === "seven-live-connect") {
+      live = { serverUrl: message.serverUrl, token: message.token }
+      bridgeRequest("/health").then((response) => {
+        if (!response.ok) {
+          disconnectLive()
+          sendResponse({ ok: false, error: response.data?.error || "Bridge indisponível" })
+          return
+        }
+        mountLivePanel()
+        sendResponse({ ok: true })
+      })
+      return true
+    } else if (message.action === "seven-live-disconnect") {
+      disconnectLive()
+      sendResponse({ ok: true })
+    }
+    return false
+  })
+})()