extension/content.js

function injectSidebar() {
  if (document.getElementById("flowpilot-sidebar-frame")) return;

  const launcher = document.createElement("button");
  launcher.id = "flowpilot-sidebar-toggle";
  Object.assign(launcher.style, {
    position: "fixed",
    top: "20px",
    right: "20px",
    zIndex: "1000000",
    width: "44px",
    height: "44px",
    display: "grid",
    placeItems: "center",
    border: "1px solid rgba(15,23,42,0.12)",
    borderRadius: "999px",
    padding: "0",
    background: "#ffffff",
    color: "#2563eb",
    font: '700 16px "Avenir Next", "Segoe UI", sans-serif',
    cursor: "pointer",
    boxShadow: "0 8px 24px rgba(15,23,42,0.14)",
    transition: "right 180ms ease, transform 180ms ease, box-shadow 180ms ease"
  });
  launcher.setAttribute("aria-label", "Open FlowPilot");
  launcher.textContent = ">";

  const frame = document.createElement("iframe");
  frame.id = "flowpilot-sidebar-frame";
  frame.src = chrome.runtime.getURL("sidebar/index.html");
  Object.assign(frame.style, {
    position: "fixed",
    top: "0",
    right: "0",
    width: "396px",
    height: "100vh",
    border: "0",
    zIndex: "999999",
    boxShadow: "0 0 30px rgba(15,23,42,0.12)",
    background: "#f7f9fc",
    transform: "translateX(100%)",
    transition: "transform 180ms ease",
    pointerEvents: "none"
  });

  let isOpen = false;
  function syncLauncher() {
    launcher.style.right = isOpen ? "408px" : "20px";
    launcher.textContent = isOpen ? "<" : ">";
    launcher.setAttribute("aria-label", isOpen ? "Close FlowPilot" : "Open FlowPilot");
  }

  launcher.addEventListener("click", () => {
    isOpen = !isOpen;
    frame.style.transform = isOpen ? "translateX(0)" : "translateX(100%)";
    frame.style.pointerEvents = isOpen ? "auto" : "none";
    syncLauncher();
  });

  document.body.appendChild(launcher);
  document.body.appendChild(frame);
  syncLauncher();
}

injectSidebar();