fix ui

extension/manifest.json

@@ -4,7 +4,11 @@
   "version": "0.1.0",
   "description": "AI workflow builder for Gmail-based small businesses.",
   "permissions": ["storage", "activeTab", "scripting"],
-  "host_permissions": ["https://mail.google.com/*", "http://localhost:8000/*"],
+  "host_permissions": [
+    "https://mail.google.com/*",
+    "http://localhost:8000/*",
+    "https://*.hf.space/*"
+  ],
   "background": {
     "service_worker": "background.js"
   },

extension/sidebar/app.js

@@ -0,0 +1,121 @@
+import { OnboardingScreen } from "./components/OnboardingScreen.js";
+import { CategorizationScreen } from "./components/CategorizationScreen.js";
+import { CustomTaskInput } from "./components/CustomTaskInput.js";
+import { WorkflowPicker } from "./components/WorkflowPicker.js";
+import { ConnectSheet } from "./components/ConnectSheet.js";
+import { FileUpload } from "./components/FileUpload.js";
+import { DeployingScreen } from "./components/DeployingScreen.js";
+import { DashboardScreen } from "./components/DashboardScreen.js";
+import { EscalationPanel } from "./components/EscalationPanel.js";
+import { apiRequest } from "./hooks/useApi.js";
+import { TaskCategoryGroup } from "./components/TaskCategoryGroup.js";
+
+const root = document.getElementById("root");
+const defaultDescription =
+  "I run an apple orchard. Customers email me orders, I check inventory in my Google Sheet, reply with pickup details, and every Friday I count weekly orders.";
+
+const steps = [
+  OnboardingScreen(),
+  CategorizationScreen(),
+  CustomTaskInput(),
+  WorkflowPicker(),
+  ConnectSheet(),
+  FileUpload(),
+  DeployingScreen(),
+  DashboardScreen(),
+  EscalationPanel()
+];
+
+root.innerHTML = `
+  <div class="sidebar-shell">
+    <header class="hero">
+      <p class="eyebrow">FlowPilot</p>
+      <h1>Build inbox automations without leaving Gmail</h1>
+      <p class="lede">Describe the business, choose workflows, and let the backend deploy them.</p>
+    </header>
+    <main class="screen-stack">${steps.join("")}</main>
+  </div>
+`;
+
+const backendUrlInput = document.getElementById("flowpilot-backend-url");
+const saveUrlButton = document.getElementById("flowpilot-save-url");
+const descriptionInput = document.getElementById("flowpilot-business-description");
+const analyzeButton = document.getElementById("flowpilot-analyze-button");
+const onboardingStatus = document.getElementById("flowpilot-onboarding-status");
+const summary = document.getElementById("flowpilot-summary");
+const categories = document.getElementById("flowpilot-categories");
+
+init();
+
+async function init() {
+  const stored = await chrome.storage.local.get("flowpilotBackendUrl");
+  backendUrlInput.value = stored.flowpilotBackendUrl || "https://technophyle-flow-pilot.hf.space/api";
+  descriptionInput.value = defaultDescription;
+
+  saveUrlButton.addEventListener("click", saveBackendUrl);
+  analyzeButton.addEventListener("click", analyzeBusiness);
+}
+
+async function saveBackendUrl() {
+  const nextUrl = backendUrlInput.value.trim().replace(/\/$/, "");
+  if (!nextUrl) {
+    setStatus("Enter a backend URL ending in /api.", true);
+    return;
+  }
+  await chrome.storage.local.set({ flowpilotBackendUrl: nextUrl });
+  setStatus(`Backend saved: ${nextUrl}`);
+}
+
+async function analyzeBusiness() {
+  const description = descriptionInput.value.trim();
+  if (!description) {
+    setStatus("Add a short business description before running analysis.", true);
+    return;
+  }
+
+  analyzeButton.disabled = true;
+  analyzeButton.textContent = "Analyzing...";
+  setStatus("Running analysis against the configured backend.");
+
+  try {
+    await saveBackendUrl();
+    const payload = await apiRequest("/analyze", {
+      method: "POST",
+      body: JSON.stringify({
+        owner_id: "extension-demo-owner",
+        owner_email: "owner@example.com",
+        description
+      })
+    });
+    renderAnalysis(payload);
+    setStatus("Analysis loaded into the extension.");
+  } catch (error) {
+    setStatus(error.message || "Could not reach the backend.", true);
+  } finally {
+    analyzeButton.disabled = false;
+    analyzeButton.textContent = "Analyze My Process";
+  }
+}
+
+function renderAnalysis(payload) {
+  summary.textContent = payload.summary || "Analysis complete.";
+  categories.innerHTML = [
+    TaskCategoryGroup(
+      "Can Be Fully Automated",
+      (payload.tasks?.fully_automatable || []).map((task) => task.name)
+    ),
+    TaskCategoryGroup(
+      "AI-Assisted",
+      (payload.tasks?.ai_assisted || []).map((task) => task.name)
+    ),
+    TaskCategoryGroup(
+      "Keep Manual",
+      (payload.tasks?.manual || []).map((task) => task.name)
+    )
+  ].join("");
+}
+
+function setStatus(message, isError = false) {
+  onboardingStatus.textContent = message;
+  onboardingStatus.classList.toggle("error-copy", isError);
+}

extension/sidebar/app.jsx

@@ -1,34 +0,0 @@
-import { OnboardingScreen } from "./components/OnboardingScreen.jsx";
-import { CategorizationScreen } from "./components/CategorizationScreen.jsx";
-import { CustomTaskInput } from "./components/CustomTaskInput.jsx";
-import { WorkflowPicker } from "./components/WorkflowPicker.jsx";
-import { ConnectSheet } from "./components/ConnectSheet.jsx";
-import { FileUpload } from "./components/FileUpload.jsx";
-import { DeployingScreen } from "./components/DeployingScreen.jsx";
-import { DashboardScreen } from "./components/DashboardScreen.jsx";
-import { EscalationPanel } from "./components/EscalationPanel.jsx";
-
-const root = document.getElementById("root");
-
-const steps = [
-  OnboardingScreen(),
-  CategorizationScreen(),
-  CustomTaskInput(),
-  WorkflowPicker(),
-  ConnectSheet(),
-  FileUpload(),
-  DeployingScreen(),
-  DashboardScreen(),
-  EscalationPanel()
-];
-
-root.innerHTML = `
-  <div class="sidebar-shell">
-    <header class="hero">
-      <p class="eyebrow">FlowPilot</p>
-      <h1>Build inbox automations without leaving Gmail</h1>
-      <p class="lede">Describe the business, choose workflows, and let the backend deploy them.</p>
-    </header>
-    <main class="screen-stack">${steps.join("")}</main>
-  </div>
-`;

extension/sidebar/components/{CategorizationScreen.jsx → CategorizationScreen.js}

@@ -1,13 +1,10 @@
-import { TaskCategoryGroup } from "./TaskCategoryGroup.jsx";
-
 export function CategorizationScreen() {
   return `
-    <section class="screen-card">
+    <section class="screen-card" id="flowpilot-categorization-card">
       <div class="step-label">2. AI Categorization</div>
       <h2>Here’s what FlowPilot found</h2>
-      ${TaskCategoryGroup("Can Be Fully Automated", ["Order processing", "Weekly order summary report"])}
-      ${TaskCategoryGroup("AI-Assisted", ["Availability inquiries", "Low inventory alerts"])}
-      ${TaskCategoryGroup("Keep Manual", ["Custom requests", "VIP relationship messages"])}
+      <p id="flowpilot-summary" class="muted">Run the analysis above to load real recommendations from the backend.</p>
+      <div id="flowpilot-categories"></div>
     </section>
   `;
 }

extension/sidebar/components/{DashboardScreen.jsx → DashboardScreen.js}

@@ -1,4 +1,4 @@
-import { StatusBadge } from "./StatusBadge.jsx";
+import { StatusBadge } from "./StatusBadge.js";
 
 export function DashboardScreen() {
   return `

extension/sidebar/components/OnboardingScreen.js

@@ -0,0 +1,27 @@
+export function OnboardingScreen() {
+  return `
+    <section class="screen-card">
+      <div class="step-label">1. Describe Business</div>
+      <h2>What does your business handle every day?</h2>
+      <label class="field-label" for="flowpilot-backend-url">Backend URL</label>
+      <input
+        id="flowpilot-backend-url"
+        class="text-input"
+        placeholder="https://technophyle-flow-pilot.hf.space/api"
+      />
+      <div class="button-row">
+        <button id="flowpilot-save-url" class="ghost-button">Save URL</button>
+      </div>
+      <label class="field-label" for="flowpilot-business-description">Business Description</label>
+      <textarea
+        id="flowpilot-business-description"
+        class="input-area"
+        placeholder="I run an apple orchard. Customers email me orders..."
+      ></textarea>
+      <div class="button-row">
+        <button id="flowpilot-analyze-button" class="primary-button">Analyze My Process</button>
+      </div>
+      <p id="flowpilot-onboarding-status" class="muted status-copy">Connect the extension to your backend, then run analysis.</p>
+    </section>
+  `;
+}

extension/sidebar/components/OnboardingScreen.jsx

@@ -1,10 +0,0 @@
-export function OnboardingScreen() {
-  return `
-    <section class="screen-card">
-      <div class="step-label">1. Describe Business</div>
-      <h2>What does your business handle every day?</h2>
-      <textarea class="input-area" placeholder="I run an apple orchard. Customers email me orders..."></textarea>
-      <button class="primary-button">Analyze My Process</button>
-    </section>
-  `;
-}

extension/sidebar/components/{WorkflowPicker.jsx → WorkflowPicker.js}

@@ -1,4 +1,4 @@
-import { WorkflowCard } from "./WorkflowCard.jsx";
+import { WorkflowCard } from "./WorkflowCard.js";
 
 export function WorkflowPicker() {
   return `

extension/sidebar/hooks/useApi.js

@@ -5,5 +5,10 @@ export async function apiRequest(path, options = {}) {
     headers: { "Content-Type": "application/json" },
     ...options
   });
-  return response.json();
+  const data = await response.json().catch(() => ({}));
+  if (!response.ok) {
+    const message = data?.detail || `Request failed with status ${response.status}`;
+    throw new Error(message);
+  }
+  return data;
 }

extension/sidebar/index.html

@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="./app.jsx"></script>
+    <script type="module" src="./app.js"></script>
   </body>
 </html>

extension/sidebar/styles/sidebar.css

@@ -82,12 +82,28 @@ body {
   min-height: 128px;
 }
 
+.field-label {
+  display: block;
+  margin: 14px 0 8px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
 .workflow-grid,
 .action-row {
   display: grid;
   gap: 12px;
 }
 
+.button-row {
+  display: flex;
+  gap: 10px;
+  margin-top: 12px;
+}
+
 .dashboard-row,
 .status-row {
   display: flex;
@@ -127,6 +143,14 @@ body {
   width: 100%;
 }
 
+.status-copy {
+  margin: 12px 0 0;
+}
+
+.error-copy {
+  color: #9e2f1f;
+}
+
 .status-badge {
   display: inline-flex;
   align-items: center;