refactor UI

extension/content.js

@@ -1,5 +1,24 @@
 function injectSidebar() {
   if (document.getElementById("flowpilot-sidebar-frame")) return;
+
+  const launcher = document.createElement("button");
+  launcher.id = "flowpilot-sidebar-toggle";
+  launcher.textContent = "FlowPilot";
+  Object.assign(launcher.style, {
+    position: "fixed",
+    top: "16px",
+    right: "16px",
+    zIndex: "1000000",
+    border: "0",
+    borderRadius: "999px",
+    padding: "10px 14px",
+    background: "#a44a1f",
+    color: "#fff7f0",
+    font: '600 13px Georgia, "Times New Roman", serif',
+    cursor: "pointer",
+    boxShadow: "0 12px 28px rgba(0,0,0,0.18)"
+  });
+
   const frame = document.createElement("iframe");
   frame.id = "flowpilot-sidebar-frame";
   frame.src = chrome.runtime.getURL("sidebar/index.html");
@@ -12,8 +31,21 @@ function injectSidebar() {
     border: "0",
     zIndex: "999999",
     boxShadow: "0 0 24px rgba(0,0,0,0.15)",
-    background: "#f7f2e8"
+    background: "#f7f2e8",
+    transform: "translateX(100%)",
+    transition: "transform 180ms ease",
+    pointerEvents: "none"
+  });
+
+  let isOpen = false;
+  launcher.addEventListener("click", () => {
+    isOpen = !isOpen;
+    frame.style.transform = isOpen ? "translateX(0)" : "translateX(100%)";
+    frame.style.pointerEvents = isOpen ? "auto" : "none";
+    launcher.textContent = isOpen ? "Close FlowPilot" : "FlowPilot";
   });
+
+  document.body.appendChild(launcher);
   document.body.appendChild(frame);
 }
 

extension/sidebar/app.js

@@ -60,10 +60,15 @@ async function saveBackendUrl() {
   const nextUrl = backendUrlInput.value.trim().replace(/\/$/, "");
   if (!nextUrl) {
     setStatus("Enter a backend URL ending in /api.", true);
-    return;
+    return false;
+  }
+  if (!isSupportedBackendUrl(nextUrl)) {
+    setStatus("Use either http://localhost:8000/api or an https://...hf.space/api backend.", true);
+    return false;
   }
   await chrome.storage.local.set({ flowpilotBackendUrl: nextUrl });
   setStatus(`Backend saved: ${nextUrl}`);
+  return true;
 }
 
 async function analyzeBusiness() {
@@ -78,7 +83,10 @@ async function analyzeBusiness() {
   setStatus("Running analysis against the configured backend.");
 
   try {
-    await saveBackendUrl();
+    const saved = await saveBackendUrl();
+    if (!saved) {
+      return;
+    }
     const payload = await apiRequest("/analyze", {
       method: "POST",
       body: JSON.stringify({
@@ -119,3 +127,14 @@ function setStatus(message, isError = false) {
   onboardingStatus.textContent = message;
   onboardingStatus.classList.toggle("error-copy", isError);
 }
+
+function isSupportedBackendUrl(value) {
+  try {
+    const url = new URL(value);
+    const isLocal = url.protocol === "http:" && url.hostname === "localhost" && url.pathname === "/api";
+    const isSpace = url.protocol === "https:" && url.hostname.endsWith(".hf.space") && url.pathname === "/api";
+    return isLocal || isSpace;
+  } catch {
+    return false;
+  }
+}

extension/sidebar/components/DashboardScreen.js

@@ -4,7 +4,8 @@ export function DashboardScreen() {
   return `
     <section class="screen-card">
       <div class="step-label">8. Dashboard</div>
-      <h2>Live automation status</h2>
+      <h2>Dashboard Preview</h2>
+      <p class="muted">Real workflow health and counts will appear here after deploy/status wiring.</p>
       <div class="dashboard-row">
         <span>3 active workflows</span>
         ${StatusBadge("active")}

extension/sidebar/components/DeployingScreen.js

@@ -2,7 +2,8 @@ export function DeployingScreen() {
   return `
     <section class="screen-card">
       <div class="step-label">7. Deploy</div>
-      <h2>Building your workflows...</h2>
+      <h2>Deployment Preview</h2>
+      <p class="muted">This section is a visual stub until deploy actions are connected.</p>
       <ul class="status-list">
         <li>Order Processing (Full Auto) deployed</li>
         <li>Weekly Order Summary deployed for Fridays at 8:00 AM</li>

extension/sidebar/components/OnboardingScreen.js

@@ -9,6 +9,7 @@ export function OnboardingScreen() {
         class="text-input"
         placeholder="https://technophyle-flow-pilot.hf.space/api"
       />
+      <p class="muted helper-copy">Supported today: localhost for development or a *.hf.space/api backend.</p>
       <div class="button-row">
         <button id="flowpilot-save-url" class="ghost-button">Save URL</button>
       </div>

extension/sidebar/components/TaskCategoryGroup.js

@@ -1,10 +1,22 @@
 export function TaskCategoryGroup(title, items) {
+  const safeItems = items.length
+    ? items.map((item) => `<li><label><input type="checkbox" checked /> ${escapeHtml(item)}</label></li>`).join("")
+    : `<li class="muted">No tasks in this category yet.</li>`;
   return `
     <div class="category-group">
-      <p class="group-title">${title}</p>
+      <p class="group-title">${escapeHtml(title)}</p>
       <ul>
-        ${items.map((item) => `<li><label><input type="checkbox" checked /> ${item}</label></li>`).join("")}
+        ${safeItems}
       </ul>
     </div>
   `;
 }
+
+function escapeHtml(value) {
+  return String(value)
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+}

extension/sidebar/components/WorkflowCard.js

@@ -7,7 +7,8 @@ export function WorkflowCard(title, mode, steps, ownerInvolvement) {
         ${steps.map((step) => `<li>${step}</li>`).join("")}
       </ul>
       <p class="muted">You do: ${ownerInvolvement}</p>
-      <button class="primary-button small-button">Choose</button>
+      <button class="primary-button small-button" disabled>Choose</button>
+      <p class="muted helper-copy">Preview only. Workflow selection is the next wiring step.</p>
     </article>
   `;
 }

extension/sidebar/components/WorkflowPicker.js

@@ -5,6 +5,7 @@ export function WorkflowPicker() {
     <section class="screen-card">
       <div class="step-label">4. Pick Workflows</div>
       <h2>Order Processing</h2>
+      <p class="muted">These cards are illustrative until we wire real workflow suggestions from the backend.</p>
       <div class="workflow-grid">
         ${WorkflowCard("Workflow A", "Full Auto", ["AI extracts order", "Checks sheet inventory", "Updates sheet and replies"], "Nothing unless alerted")}
         ${WorkflowCard("Workflow B", "Review First", ["AI extracts order", "Shows summary in sidebar", "You approve before sending"], "One click per order")}

extension/sidebar/styles/sidebar.css

@@ -147,6 +147,12 @@ body {
   margin: 12px 0 0;
 }
 
+.helper-copy {
+  margin: 8px 0 0;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
 .error-copy {
   color: #9e2f1f;
 }
@@ -171,6 +177,11 @@ body {
   padding: 18px;
 }
 
+button[disabled] {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
 ul {
   padding-left: 18px;
 }