change Ui

backend/api/routes.py

@@ -20,6 +20,8 @@ from backend.models.schemas import (
     FileUploadRequest,
     FileUploadResponse,
     OwnerStatusResponse,
+    StopAutomationRequest,
+    StopAutomationResponse,
     WorkflowSuggestionRequest,
 )
 from backend.storage.database import db
@@ -114,6 +116,22 @@ def deploy_workflow(request: DeployRequest) -> DeploymentResponse:
     )
 
 
+@router.post("/stop", response_model=StopAutomationResponse)
+def stop_automation(request: StopAutomationRequest) -> StopAutomationResponse:
+    try:
+        owner = db.get_owner(request.owner_id)
+    except KeyError as exc:
+        raise HTTPException(status_code=404, detail=str(exc)) from exc
+    workflows = db.deactivate_workflows(request.owner_id)
+    owner["state"] = "paused"
+    db.save_owner(owner)
+    return StopAutomationResponse(
+        status="stopped",
+        workflows=workflows,
+        message="Automation stopped.",
+    )
+
+
 @router.post("/upload-data", response_model=FileUploadResponse)
 def upload_data(request: FileUploadRequest) -> FileUploadResponse:
     parsed = parse_uploaded_payload(request.filename, request.content, request.purpose)

backend/models/schemas.py

@@ -67,6 +67,16 @@ class DeploymentResponse(BaseModel):
     message: str
 
 
+class StopAutomationRequest(BaseModel):
+    owner_id: str
+
+
+class StopAutomationResponse(BaseModel):
+    status: str
+    workflows: list[dict[str, Any]]
+    message: str
+
+
 class FileUploadRequest(BaseModel):
     owner_id: str
     filename: str

backend/storage/database.py

@@ -63,6 +63,12 @@ class InMemoryDatabase:
     def list_workflows(self, owner_id: str) -> list[dict]:
         return deepcopy(self.workflows.get(owner_id, []))
 
+    def deactivate_workflows(self, owner_id: str) -> list[dict]:
+        workflows = self.workflows.get(owner_id, [])
+        for workflow in workflows:
+            workflow["status"] = "inactive"
+        return deepcopy(workflows)
+
     def get_workflow(self, owner_id: str, workflow_id: str) -> dict:
         for workflow in self.workflows.get(owner_id, []):
             if workflow["id"] == workflow_id:

extension/content.js

@@ -3,21 +3,27 @@ function injectSidebar() {
 
   const launcher = document.createElement("button");
   launcher.id = "flowpilot-sidebar-toggle";
-  launcher.textContent = "FlowPilot";
   Object.assign(launcher.style, {
     position: "fixed",
-    top: "16px",
-    right: "16px",
+    top: "20px",
+    right: "20px",
     zIndex: "1000000",
-    border: "0",
+    width: "44px",
+    height: "44px",
+    display: "grid",
+    placeItems: "center",
+    border: "1px solid rgba(15,23,42,0.12)",
     borderRadius: "999px",
-    padding: "10px 14px",
-    background: "#a44a1f",
-    color: "#fff7f0",
-    font: '600 13px Georgia, "Times New Roman", serif',
+    padding: "0",
+    background: "#ffffff",
+    color: "#2563eb",
+    font: '700 16px "Avenir Next", "Segoe UI", sans-serif',
     cursor: "pointer",
-    boxShadow: "0 12px 28px rgba(0,0,0,0.18)"
+    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";
@@ -26,27 +32,34 @@ function injectSidebar() {
     position: "fixed",
     top: "0",
     right: "0",
-    width: "420px",
+    width: "396px",
     height: "100vh",
     border: "0",
     zIndex: "999999",
-    boxShadow: "0 0 24px rgba(0,0,0,0.15)",
-    background: "#f7f2e8",
+    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";
-    launcher.textContent = isOpen ? "Close FlowPilot" : "FlowPilot";
+    syncLauncher();
   });
 
   document.body.appendChild(launcher);
   document.body.appendChild(frame);
+  syncLauncher();
 }
 
 injectSidebar();

extension/manifest.json

@@ -3,7 +3,7 @@
   "name": "FlowPilot",
   "version": "0.1.0",
   "description": "AI workflow builder for Gmail-based small businesses.",
-  "permissions": ["storage", "activeTab", "scripting"],
+  "permissions": ["storage", "activeTab", "scripting", "identity", "identity.email"],
   "host_permissions": [
     "https://mail.google.com/*",
     "http://localhost:8000/*",

extension/sidebar/app.js

@@ -2,130 +2,468 @@ 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()
+const defaultBackendUrl = "http://localhost:8000/api";
+const setupSteps = [
+  { id: 1, label: "Describe" },
+  { id: 2, label: "Review" },
+  { id: 3, label: "Rule" },
+  { id: 4, label: "Modes" },
+  { id: 5, label: "Launch" }
 ];
 
-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");
+const state = {
+  view: "setup",
+  currentStep: 1,
+  settingsOpen: false,
+  backendUrl: defaultBackendUrl,
+  ownerEmail: "",
+  ownerId: "",
+  description: defaultDescription,
+  analysis: null,
+  selectedTaskIds: [],
+  customRule: "When a restaurant client emails, flag it as priority and move it to the top of my orders sheet.",
+  workflowSelections: {},
+  workflowCursor: 0,
+  liveStats: {
+    activeWorkflows: 0,
+    executionsToday: 0,
+    pendingEscalations: 0
+  },
+  escalations: [],
+  status: "Ready.",
+  statusError: false
+};
 
 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;
+  const profile = await getIdentityProfile();
+  if (profile) {
+    await chrome.storage.local.set({ flowpilotOwnerProfile: profile });
+  }
+  const stored = await chrome.storage.local.get(["flowpilotBackendUrl", "flowpilotOwnerProfile"]);
+  state.backendUrl = stored.flowpilotBackendUrl || defaultBackendUrl;
+  state.ownerEmail = stored.flowpilotOwnerProfile?.email || "";
+  state.ownerId = stored.flowpilotOwnerProfile?.ownerId || "";
+  if (!state.ownerEmail) {
+    setStatus("Sign into Chrome with Google to let FlowPilot identify the mailbox.", false);
+  }
+  await refreshLiveData();
+  render();
+}
+
+function render() {
+  root.innerHTML = `
+    <div class="app-shell ${state.view === "quiet" ? "app-live" : ""} ${state.view === "escalation" ? "app-alert" : ""}">
+      <div class="sidebar-shell">
+        ${renderHeader()}
+        ${state.settingsOpen ? renderSettings() : ""}
+        <main class="screen-stage">${renderBody()}</main>
+      </div>
+    </div>
+  `;
+  bindEvents();
+}
+
+function renderHeader() {
+  const indicator = getViewIndicator();
+  return `
+    <header class="topbar surface-card">
+      <div class="brand-lockup">
+        <div class="brand-mark">F</div>
+        <div>
+          <p class="brand-name">FlowPilot</p>
+          <p class="brand-subtitle">${escapeHtml(indicator.label)}</p>
+        </div>
+      </div>
+    </header>
+  `;
+}
+
+function renderSettings() {
+  return `
+    <section class="settings-panel surface-card">
+      <label class="field-label" for="flowpilot-backend-url">Backend URL</label>
+      <input id="flowpilot-backend-url" class="text-input" value="${escapeAttribute(state.backendUrl)}" />
+      <div class="button-row split-actions compact-actions">
+        <button id="flowpilot-close-settings" class="ghost-button">Close</button>
+        <button id="flowpilot-save-url" class="secondary-button">Save</button>
+      </div>
+    </section>
+  `;
+}
+
+function renderBody() {
+  if (state.view === "escalation") {
+    return EscalationPanel({ escalation: state.escalations[0] || null });
+  }
+  if (state.view === "quiet") {
+    return DashboardScreen({ stats: state.liveStats });
+  }
+
+  if (state.currentStep === 1) {
+    return OnboardingScreen({
+      description: state.description,
+      status: state.status,
+      statusError: state.statusError,
+      ownerEmail: state.ownerEmail
+    });
+  }
+  if (state.currentStep === 2) {
+    return CategorizationScreen({
+      summary: state.analysis?.summary || "Review the suggested workstreams.",
+      groups: buildTaskGroups(),
+      selectedTaskIds: state.selectedTaskIds
+    });
+  }
+  if (state.currentStep === 3) {
+    return CustomTaskInput({ value: state.customRule });
+  }
+  if (state.currentStep === 4) {
+    const tasks = getWorkflowTasks();
+    const task = tasks[state.workflowCursor];
+    return WorkflowPicker({
+      task,
+      selectedOption: task ? state.workflowSelections[task.id] || null : null,
+      current: state.workflowCursor + 1,
+      total: tasks.length
+    });
+  }
+  return DeployingScreen();
+}
+
+function bindEvents() {
+  document.getElementById("flowpilot-save-url")?.addEventListener("click", saveBackendUrl);
+  document.getElementById("flowpilot-close-settings")?.addEventListener("click", toggleSettings);
+  document.getElementById("flowpilot-open-settings")?.addEventListener("click", toggleSettings);
+  document.getElementById("flowpilot-back-button")?.addEventListener("click", goBack);
+  document.getElementById("flowpilot-back-dashboard")?.addEventListener("click", () => {
+    state.view = "quiet";
+    render();
+  });
+
+  if (state.view === "setup" && state.currentStep === 1) {
+    document.getElementById("flowpilot-business-description")?.addEventListener("input", (event) => {
+      state.description = event.target.value;
+    });
+    document.getElementById("flowpilot-analyze-button")?.addEventListener("click", analyzeBusiness);
+  }
+
+  if (state.view === "setup" && state.currentStep === 2) {
+    document.querySelectorAll("[data-task-id]").forEach((input) => {
+      input.addEventListener("change", toggleTaskSelection);
+    });
+    document.getElementById("flowpilot-continue-tasks")?.addEventListener("click", continueFromTasks);
+  }
+
+  if (state.view === "setup" && state.currentStep === 3) {
+    document.getElementById("flowpilot-custom-rule")?.addEventListener("input", (event) => {
+      state.customRule = event.target.value;
+    });
+    document.getElementById("flowpilot-skip-rule")?.addEventListener("click", goToWorkflowStep);
+    document.getElementById("flowpilot-save-rule")?.addEventListener("click", goToWorkflowStep);
+  }
+
+  if (state.view === "setup" && state.currentStep === 4) {
+    document.querySelectorAll("[data-workflow-option]").forEach((button) => {
+      button.addEventListener("click", selectWorkflowOption);
+    });
+  }
+
+  if (state.view === "setup" && state.currentStep === 5) {
+    document.getElementById("flowpilot-deploy-button")?.addEventListener("click", completeSetup);
+  }
+
+  if (state.view === "quiet") {
+    document.getElementById("flowpilot-open-escalation")?.addEventListener("click", () => {
+      if (!state.escalations.length) {
+        return;
+      }
+      state.view = "escalation";
+      render();
+    });
+    document.getElementById("flowpilot-stop-automation")?.addEventListener("click", stopAutomation);
+  }
+
+  if (state.view === "escalation") {
+    document.getElementById("flowpilot-resolve-escalation")?.addEventListener("click", () => resolveEscalation("approve"));
+    document.getElementById("flowpilot-ask-customer")?.addEventListener("click", () => resolveEscalation("ask_customer"));
+  }
+}
+
+function toggleSettings() {
+  state.settingsOpen = !state.settingsOpen;
+  render();
+}
+
+function goBack() {
+  if (state.view !== "setup") {
+    return;
+  }
+
+  if (state.currentStep === 2) {
+    state.currentStep = 1;
+  } else if (state.currentStep === 3) {
+    state.currentStep = 2;
+  } else if (state.currentStep === 4) {
+    if (state.workflowCursor > 0) {
+      state.workflowCursor -= 1;
+    } else {
+      state.currentStep = 3;
+    }
+  } else if (state.currentStep === 5) {
+    if (getWorkflowTasks().length) {
+      state.currentStep = 4;
+      state.workflowCursor = Math.max(getWorkflowTasks().length - 1, 0);
+    } else {
+      state.currentStep = 3;
+    }
+  }
 
-  saveUrlButton.addEventListener("click", saveBackendUrl);
-  analyzeButton.addEventListener("click", analyzeBusiness);
+  render();
 }
 
 async function saveBackendUrl() {
-  const nextUrl = backendUrlInput.value.trim().replace(/\/$/, "");
+  const input = document.getElementById("flowpilot-backend-url");
+  const nextUrl = (input?.value || "").trim().replace(/\/$/, "");
   if (!nextUrl) {
-    setStatus("Enter a backend URL ending in /api.", true);
-    return false;
+    setStatus("Enter a backend URL.", true);
+    render();
+    return;
   }
   if (!isSupportedBackendUrl(nextUrl)) {
     setStatus("Use either http://localhost:8000/api or an https://...hf.space/api backend.", true);
-    return false;
+    render();
+    return;
   }
   await chrome.storage.local.set({ flowpilotBackendUrl: nextUrl });
-  setStatus(`Backend saved: ${nextUrl}`);
-  return true;
+  state.backendUrl = nextUrl;
+  state.settingsOpen = false;
+  setStatus("Backend saved.");
+  render();
 }
 
 async function analyzeBusiness() {
-  const description = descriptionInput.value.trim();
-  if (!description) {
+  if (!state.description.trim()) {
     setStatus("Add a short business description before running analysis.", true);
+    render();
+    return;
+  }
+  if (!state.ownerEmail || !state.ownerId) {
+    setStatus("Could not detect the signed-in Gmail account yet.", true);
+    render();
     return;
   }
 
-  analyzeButton.disabled = true;
-  analyzeButton.textContent = "Analyzing...";
-  setStatus("Running analysis against the configured backend.");
+  setStatus("Analyzing...");
+  render();
 
   try {
-    const saved = await saveBackendUrl();
-    if (!saved) {
-      return;
-    }
     const payload = await apiRequest("/analyze", {
       method: "POST",
       body: JSON.stringify({
-        owner_id: "extension-demo-owner",
-        owner_email: "owner@example.com",
-        description
+        owner_id: state.ownerId,
+        owner_email: state.ownerEmail,
+        description: state.description.trim()
       })
     });
-    renderAnalysis(payload);
-    setStatus("Analysis loaded into the extension.");
+    state.analysis = payload;
+    state.selectedTaskIds = getDefaultSelectedTaskIds(payload);
+    state.currentStep = 2;
+    setStatus("Ready.");
+    await refreshLiveData();
   } 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("");
+  }
+  render();
+}
+
+function toggleTaskSelection(event) {
+  const taskId = event.target.dataset.taskId;
+  if (!taskId) {
+    return;
+  }
+  if (event.target.checked) {
+    if (!state.selectedTaskIds.includes(taskId)) {
+      state.selectedTaskIds.push(taskId);
+    }
+  } else {
+    state.selectedTaskIds = state.selectedTaskIds.filter((id) => id !== taskId);
+  }
+}
+
+function continueFromTasks() {
+  if (!state.selectedTaskIds.length) {
+    setStatus("Select at least one task to continue.", true);
+    render();
+    return;
+  }
+  state.currentStep = 3;
+  setStatus("Ready.");
+  render();
+}
+
+function goToWorkflowStep() {
+  state.currentStep = 4;
+  state.workflowCursor = 0;
+  render();
+}
+
+function selectWorkflowOption(event) {
+  const optionId = event.currentTarget.dataset.workflowOption;
+  const taskId = event.currentTarget.dataset.taskId;
+  if (!optionId || !taskId) {
+    return;
+  }
+  state.workflowSelections[taskId] = optionId;
+  if (state.workflowCursor < getWorkflowTasks().length - 1) {
+    state.workflowCursor += 1;
+    render();
+    return;
+  }
+  state.currentStep = 5;
+  render();
+}
+
+async function completeSetup() {
+  await refreshLiveData();
+  state.view = "quiet";
+  render();
+}
+
+async function stopAutomation() {
+  if (!state.ownerId) {
+    return;
+  }
+  try {
+    await apiRequest("/stop", {
+      method: "POST",
+      body: JSON.stringify({
+        owner_id: state.ownerId
+      })
+    });
+    await refreshLiveData();
+    setStatus("Automation stopped.");
+  } catch (error) {
+    setStatus(error.message || "Could not stop automation.", true);
+  }
+  render();
+}
+
+async function resolveEscalation(response) {
+  const escalation = state.escalations[0];
+  if (!escalation) {
+    state.view = "quiet";
+    render();
+    return;
+  }
+  try {
+    await apiRequest("/escalation-reply", {
+      method: "POST",
+      body: JSON.stringify({
+        escalation_id: escalation.id,
+        response
+      })
+    });
+  } catch (error) {
+    setStatus(error.message || "Could not resolve escalation.", true);
+  }
+  await refreshLiveData();
+  state.view = "quiet";
+  render();
+}
+
+function getDefaultSelectedTaskIds(analysis) {
+  return [
+    ...(analysis?.tasks?.fully_automatable || []),
+    ...(analysis?.tasks?.ai_assisted || [])
+  ].map((task) => task.id);
+}
+
+function buildTaskGroups() {
+  return [
+    {
+      title: "Automate",
+      items: state.analysis?.tasks?.fully_automatable || []
+    },
+    {
+      title: "Assist",
+      items: state.analysis?.tasks?.ai_assisted || []
+    },
+    {
+      title: "Manual",
+      items: state.analysis?.tasks?.manual || []
+    }
+  ];
+}
+
+function getWorkflowTasks() {
+  const lookup = new Map();
+  for (const group of buildTaskGroups()) {
+    for (const task of group.items) {
+      lookup.set(task.id, task);
+    }
+  }
+  return state.selectedTaskIds.map((id) => lookup.get(id)).filter(Boolean);
+}
+
+function getViewIndicator() {
+  if (state.view === "escalation") {
+    return { label: "Needs review" };
+  }
+  if (state.view === "quiet") {
+    return { label: "Running live" };
+  }
+  return { label: `${setupSteps[state.currentStep - 1].label}` };
 }
 
 function setStatus(message, isError = false) {
-  onboardingStatus.textContent = message;
-  onboardingStatus.classList.toggle("error-copy", isError);
+  state.status = message;
+  state.statusError = isError;
+}
+
+async function refreshLiveData() {
+  if (!state.ownerId) {
+    state.liveStats = {
+      activeWorkflows: 0,
+      executionsToday: 0,
+      pendingEscalations: 0
+    };
+    state.escalations = [];
+    return;
+  }
+
+  try {
+    const [statusPayload, escalationPayload] = await Promise.all([
+      apiRequest(`/status?owner_id=${encodeURIComponent(state.ownerId)}`),
+      apiRequest(`/escalations?owner_id=${encodeURIComponent(state.ownerId)}`)
+    ]);
+    const workflows = statusPayload.workflows || [];
+    const executions = statusPayload.recent_executions || [];
+    const pendingEscalations = (escalationPayload.items || []).filter((item) => item.status === "pending");
+
+    state.liveStats = {
+      activeWorkflows: workflows.filter((item) => item.status === "active").length,
+      executionsToday: executions.filter((item) => isToday(item.executed_at)).length,
+      pendingEscalations: pendingEscalations.length
+    };
+    state.escalations = pendingEscalations;
+  } catch {
+    state.liveStats = {
+      activeWorkflows: 0,
+      executionsToday: 0,
+      pendingEscalations: 0
+    };
+    state.escalations = [];
+  }
 }
 
 function isSupportedBackendUrl(value) {
@@ -138,3 +476,50 @@ function isSupportedBackendUrl(value) {
     return false;
   }
 }
+
+function escapeAttribute(value) {
+  return String(value).replaceAll("&", "&amp;").replaceAll('"', "&quot;");
+}
+
+function escapeHtml(value) {
+  return String(value)
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+}
+
+function isToday(value) {
+  if (!value) {
+    return false;
+  }
+  const candidate = new Date(value);
+  const now = new Date();
+  return (
+    candidate.getFullYear() === now.getFullYear() &&
+    candidate.getMonth() === now.getMonth() &&
+    candidate.getDate() === now.getDate()
+  );
+}
+
+async function getIdentityProfile() {
+  if (!chrome.identity?.getProfileUserInfo) {
+    return null;
+  }
+
+  try {
+    const profile = await new Promise((resolve) => {
+      chrome.identity.getProfileUserInfo({ accountStatus: "ANY" }, resolve);
+    });
+    if (!profile.email) {
+      return null;
+    }
+    return {
+      email: profile.email,
+      ownerId: profile.id || profile.email.toLowerCase()
+    };
+  } catch {
+    return null;
+  }
+}

extension/sidebar/components/CategorizationScreen.js

@@ -1,10 +1,49 @@
-export function CategorizationScreen() {
+export function CategorizationScreen({ summary, groups, selectedTaskIds }) {
   return `
-    <section class="screen-card" id="flowpilot-categorization-card">
-      <div class="step-label">2. AI Categorization</div>
-      <h2>Here’s what FlowPilot found</h2>
-      <p id="flowpilot-summary" class="muted">Run the analysis above to load real recommendations from the backend.</p>
-      <div id="flowpilot-categories"></div>
+    <section class="screen-card">
+      <div class="screen-intro">
+        <p class="step-label">Step 2</p>
+        <h2>Review suggestions</h2>
+        <p id="flowpilot-summary" class="screen-copy">${escapeHtml(summary)}</p>
+      </div>
+      <div class="section-topline"><span class="metric-badge">${selectedTaskIds.length} selected</span></div>
+      <div id="flowpilot-categories" class="category-grid">
+        ${groups.map((group) => renderGroup(group, selectedTaskIds)).join("")}
+      </div>
+      <div class="button-row split-actions">
+        <button id="flowpilot-back-button" class="ghost-button">Back</button>
+        <button id="flowpilot-continue-tasks" class="primary-button">Continue to rules</button>
+      </div>
     </section>
   `;
 }
+
+function renderGroup(group, selectedTaskIds) {
+  return `
+    <div class="category-group">
+      <div class="group-header">
+        <p class="group-title">${escapeHtml(group.title)}</p>
+        <span class="group-count">${group.items.length}</span>
+      </div>
+      <ul class="selection-list">
+        ${group.items.length ? group.items.map((task) => `
+          <li>
+            <label class="selection-tile">
+              <input type="checkbox" data-task-id="${escapeHtml(task.id)}" ${selectedTaskIds.includes(task.id) ? "checked" : ""} />
+              <span>${escapeHtml(task.name)}</span>
+            </label>
+          </li>
+        `).join("") : `<li class="empty-copy">No suggestions in this category.</li>`}
+      </ul>
+    </div>
+  `;
+}
+
+function escapeHtml(value) {
+  return String(value)
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+}

extension/sidebar/components/ConnectSheet.js

@@ -1,8 +1,8 @@
 export function ConnectSheet() {
   return `
     <section class="screen-card">
-      <div class="step-label">5. Connect Data</div>
-      <h2>Connect Google Sheets</h2>
+      <div class="step-label">Data</div>
+      <h2>Google Sheets</h2>
       <div class="status-row"><span>Inventory sheet</span><strong>Inventory</strong></div>
       <div class="status-row"><span>Orders sheet</span><strong>Orders</strong></div>
       <button class="secondary-button">Connect Sheet</button>

extension/sidebar/components/CustomTaskInput.js

@@ -1,9 +1,26 @@
-export function CustomTaskInput() {
+export function CustomTaskInput({ value }) {
   return `
     <section class="screen-card">
-      <div class="step-label">3. Custom Task</div>
-      <h2>Add something specific</h2>
-      <input class="text-input" value="When a restaurant client emails, flag it as priority and move it to the top of my orders sheet." />
+      <div class="screen-intro">
+        <p class="step-label">Step 3</p>
+        <h2>Add one custom instruction</h2>
+      </div>
+      <label class="field-label" for="flowpilot-custom-rule">Custom rule</label>
+      <input
+        id="flowpilot-custom-rule"
+        class="text-input"
+        value="${escapeAttribute(value)}"
+        placeholder="Optional"
+      />
+      <div class="button-row split-actions">
+        <button id="flowpilot-back-button" class="ghost-button">Back</button>
+        <button id="flowpilot-skip-rule" class="ghost-button">Skip</button>
+        <button id="flowpilot-save-rule" class="primary-button">Continue</button>
+      </div>
     </section>
   `;
 }
+
+function escapeAttribute(value) {
+  return String(value).replaceAll("&", "&amp;").replaceAll('"', "&quot;");
+}

extension/sidebar/components/DashboardScreen.js

@@ -1,18 +1,39 @@
-import { StatusBadge } from "./StatusBadge.js";
-
-export function DashboardScreen() {
+export function DashboardScreen({ stats }) {
+  const metricLine = `${stats.executionsToday} runs today`;
+  const isLive = stats.activeWorkflows > 0;
   return `
-    <section class="screen-card">
-      <div class="step-label">8. Dashboard</div>
-      <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")}
+    <section class="screen-card dashboard-card">
+      <div class="screen-intro">
+        <p class="step-label">Live operations</p>
+        <h2>${isLive ? "Your inbox operator is live" : "Automation is stopped"}</h2>
       </div>
-      <div class="dashboard-row">
-        <span>12 orders processed this week</span>
-        <strong>4.5h saved</strong>
+      <div class="dashboard-hero">
+        <div>
+          <p class="dashboard-kicker">Today</p>
+          <p class="dashboard-metric">${metricLine}</p>
+        </div>
+        <span class="topbar-status ${isLive ? "status-success" : "status-warning"}">
+          <span class="status-dot"></span>
+          <span>${isLive ? "Stable" : "Stopped"}</span>
+        </span>
+      </div>
+      <div class="dashboard-stats">
+        <div class="stat-card">
+          <span>Active workflows</span>
+          <strong>${stats.activeWorkflows}</strong>
+        </div>
+        <div class="stat-card">
+          <span>Pending escalations</span>
+          <strong>${stats.pendingEscalations}</strong>
+        </div>
+        <div class="stat-card">
+          <span>Runs completed</span>
+          <strong>${stats.executionsToday}</strong>
+        </div>
+      </div>
+      <div class="button-row split-actions compact-actions">
+        ${stats.pendingEscalations ? `<button id="flowpilot-open-escalation" class="secondary-button">Open escalation</button>` : ""}
+        ${isLive ? `<button id="flowpilot-stop-automation" class="ghost-button">Stop automation</button>` : ""}
       </div>
     </section>
   `;

extension/sidebar/components/DeployingScreen.js

@@ -1,14 +1,22 @@
 export function DeployingScreen() {
   return `
-    <section class="screen-card">
-      <div class="step-label">7. Deploy</div>
-      <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>
-        <li>Restaurant Priority Flag deployed</li>
-      </ul>
+    <section class="screen-card launch-card">
+      <div class="screen-intro">
+        <p class="step-label">Step 5</p>
+        <h2>Launch</h2>
+      </div>
+      <div class="launch-panel compact-panel">
+        <p class="launch-title">Quiet execution</p>
+        <div class="deploy-status">
+          <span class="live-dot"></span>
+          <span class="live-dot"></span>
+          <span class="live-dot"></span>
+        </div>
+      </div>
+      <div class="button-row split-actions">
+        <button id="flowpilot-back-button" class="ghost-button">Back</button>
+        <button id="flowpilot-deploy-button" class="primary-button">Go live</button>
+      </div>
     </section>
   `;
 }

extension/sidebar/components/EscalationPanel.js

@@ -1,13 +1,53 @@
-export function EscalationPanel() {
+export function EscalationPanel({ escalation }) {
+  if (!escalation) {
+    return `
+      <section class="screen-card">
+        <div class="screen-intro">
+          <p class="step-label">Escalations</p>
+          <h2>No pending escalations</h2>
+        </div>
+        <div class="button-row compact-actions">
+          <button id="flowpilot-back-dashboard" class="ghost-button">Back</button>
+        </div>
+      </section>
+    `;
+  }
+
+  const reason = escapeHtml(escalation.reason || "Needs review");
+  const source = escapeHtml(escalation.context?.source_email || escalation.context?.email_body || "No email preview available.");
+  const issue = escapeHtml(escalation.context?.message || escalation.reason || "FlowPilot paused this action.");
   return `
-    <section class="screen-card accent-card">
-      <div class="step-label">9. Escalations</div>
-      <h2>Decision needed</h2>
-      <p>An order requests mixed varieties without exact quantities.</p>
-      <div class="action-row">
-        <button class="primary-button">Ask Customer</button>
-        <button class="ghost-button">Handle Myself</button>
+    <section class="screen-card escalation-card">
+      <div class="screen-intro">
+        <p class="step-label">Needs your input</p>
+        <h2>${reason}</h2>
+      </div>
+      <div class="escalation-grid">
+        <div class="escalation-block">
+          <p class="field-label">Original email</p>
+          <p>${source}</p>
+        </div>
+        <div class="escalation-block">
+          <p class="field-label">Why it paused</p>
+          <p>${issue}</p>
+        </div>
+      </div>
+      <div class="action-row two-up">
+        <button id="flowpilot-ask-customer" class="primary-button">Ask customer</button>
+        <button id="flowpilot-resolve-escalation" class="ghost-button">Approve anyway</button>
+      </div>
+      <div class="button-row compact-actions">
+        <button id="flowpilot-back-dashboard" class="ghost-button">Back</button>
       </div>
     </section>
   `;
 }
+
+function escapeHtml(value) {
+  return String(value)
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+}

extension/sidebar/components/FileUpload.js

@@ -1,8 +1,8 @@
 export function FileUpload() {
   return `
     <section class="screen-card">
-      <div class="step-label">6. Upload Data</div>
-      <h2>Bring in price lists or external orders</h2>
+      <div class="step-label">Files</div>
+      <h2>Upload data</h2>
       <div class="upload-box">
         <p>Supported: CSV, Excel, JSON</p>
         <button class="secondary-button">Upload File</button>

extension/sidebar/components/OnboardingScreen.js

@@ -1,28 +1,31 @@
-export function OnboardingScreen() {
+export function OnboardingScreen({ description, status, statusError, ownerEmail }) {
   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"
-      />
-      <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 class="screen-intro">
+        <p class="step-label">Step 1</p>
+        <h2>Map how work moves through your inbox</h2>
       </div>
-      <label class="field-label" for="flowpilot-business-description">Business Description</label>
+      <div class="section-topline">
+        <div class="identity-chip">${ownerEmail ? escapeHtml(ownerEmail) : "Detecting Gmail account..."}</div>
+        <button id="flowpilot-open-settings" class="text-button" type="button">Backend</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>
+        placeholder="Customers email orders, I check inventory, reply, and send a weekly summary."
+      >${escapeHtml(description)}</textarea>
+      <div class="button-row action-cluster compact-actions">
+        <button id="flowpilot-analyze-button" class="primary-button">Analyze business</button>
       </div>
-      <p id="flowpilot-onboarding-status" class="muted status-copy">Connect the extension to your backend, then run analysis.</p>
+      <p id="flowpilot-onboarding-status" class="${statusError ? "status-copy error-copy" : "status-copy"}">${escapeHtml(status)}</p>
     </section>
   `;
 }
+
+function escapeHtml(value) {
+  return String(value)
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;");
+}

extension/sidebar/components/WorkflowCard.js

@@ -1,14 +1,21 @@
-export function WorkflowCard(title, mode, steps, ownerInvolvement) {
+export function WorkflowCard(taskId, optionId, mode, steps, ownerInvolvement, selectedOption) {
+  const isSelected = selectedOption === optionId;
   return `
-    <article class="workflow-card">
-      <p class="workflow-kicker">${title}</p>
+    <button
+      class="workflow-card ${isSelected ? "workflow-card-selected" : ""}"
+      data-task-id="${taskId}"
+      data-workflow-option="${optionId}"
+      aria-pressed="${isSelected ? "true" : "false"}"
+    >
+      <div class="workflow-card-topline">
+        <p class="workflow-kicker">Option ${optionId}</p>
+        <span class="selection-indicator ${isSelected ? "selection-indicator-on" : ""}">${isSelected ? "Selected" : "Pick"}</span>
+      </div>
       <h3>${mode}</h3>
       <ul>
         ${steps.map((step) => `<li>${step}</li>`).join("")}
       </ul>
-      <p class="muted">You do: ${ownerInvolvement}</p>
-      <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>
+      <p class="muted workflow-owner">Owner touch: ${ownerInvolvement}</p>
+    </button>
   `;
 }

extension/sidebar/components/WorkflowPicker.js

@@ -1,16 +1,42 @@
 import { WorkflowCard } from "./WorkflowCard.js";
 
-export function WorkflowPicker() {
+export function WorkflowPicker({ task, selectedOption, current, total }) {
+  if (!task) {
+    return `
+      <section class="screen-card">
+        <div class="screen-intro">
+          <p class="step-label">Step 4</p>
+          <h2>No workflow selected</h2>
+        </div>
+        <div class="button-row compact-actions">
+          <button id="flowpilot-back-button" class="ghost-button">Back</button>
+        </div>
+      </section>
+    `;
+  }
+
   return `
     <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="screen-intro">
+        <p class="step-label">Step 4</p>
+        <h2>${escapeHtml(task.name)}</h2>
+      </div>
+      <div class="section-topline"><span class="metric-badge">${current}/${total}</span></div>
       <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")}
-        ${WorkflowCard("Workflow C", "Log Only", ["AI extracts order", "Adds to sheet", "You reply manually"], "Reply yourself")}
+        ${WorkflowCard(task.id, "A", "Full Auto", ["Runs the task end to end", "Updates records automatically", "Sends the final customer reply"], "No review", selectedOption)}
+        ${WorkflowCard(task.id, "B", "Review First", ["Prepares the work for you", "Waits for a quick approval", "Sends only after review"], "One approval", selectedOption)}
+        ${WorkflowCard(task.id, "C", "Log Only", ["Captures request details", "Stores the context for later", "Leaves the customer reply to you"], "Manual reply", selectedOption)}
+      </div>
+      <div class="button-row compact-actions">
+        <button id="flowpilot-back-button" class="ghost-button">Back</button>
       </div>
     </section>
   `;
 }
+
+function escapeHtml(value) {
+  return String(value)
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;");
+}

extension/sidebar/styles/sidebar.css

@@ -1,187 +1,516 @@
 :root {
-  --bg: linear-gradient(180deg, #f7f2e8 0%, #efe4cf 100%);
-  --panel: rgba(255, 252, 246, 0.92);
-  --ink: #2f261d;
-  --muted: #6a5b4d;
-  --accent: #a44a1f;
-  --accent-dark: #7b3513;
-  --line: rgba(68, 50, 33, 0.12);
-  --success: #2f6a44;
-  font-family: Georgia, "Times New Roman", serif;
+  --bg: #eef3fb;
+  --bg-alt: #f7f9fc;
+  --surface: #ffffff;
+  --surface-muted: #f8fafc;
+  --ink: #0f172a;
+  --muted: #5b6b82;
+  --line: #d9e2ef;
+  --line-strong: #c3d1e3;
+  --accent: #2563eb;
+  --accent-strong: #1d4ed8;
+  --accent-soft: #dbeafe;
+  --accent-soft-strong: #bfdbfe;
+  --success: #15803d;
+  --success-soft: #dcfce7;
+  --warning: #b45309;
+  --warning-soft: #fef3c7;
+  --danger: #c2410c;
+  --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.08);
+  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.06);
+  --shadow-sm: 0 2px 10px rgba(15, 23, 42, 0.05);
+  --radius-xl: 22px;
+  --radius-lg: 16px;
+  --radius-md: 12px;
+  --radius-sm: 10px;
+  font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
 }
 
 * {
   box-sizing: border-box;
 }
 
+html,
+body {
+  min-height: 100%;
+}
+
 body {
   margin: 0;
+  background:
+    radial-gradient(circle at top right, rgba(37, 99, 235, 0.08), transparent 34%),
+    linear-gradient(180deg, var(--bg), var(--bg-alt));
   color: var(--ink);
-  background: var(--bg);
+  font: 14px/1.5 "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
 }
 
-.sidebar-shell {
+button,
+input,
+textarea {
+  font: inherit;
+}
+
+button {
+  border: 0;
+}
+
+.app-shell {
   min-height: 100vh;
-  padding: 18px;
 }
 
-.hero {
-  padding: 20px;
-  border-radius: 22px;
+.app-shell.app-live {
   background:
-    radial-gradient(circle at top left, rgba(255, 255, 255, 0.9), transparent 45%),
-    linear-gradient(135deg, rgba(164, 74, 31, 0.16), rgba(67, 104, 68, 0.18));
+    radial-gradient(circle at top right, rgba(21, 128, 61, 0.06), transparent 34%),
+    linear-gradient(180deg, var(--bg), var(--bg-alt));
+}
+
+.app-shell.app-alert {
+  background:
+    radial-gradient(circle at top right, rgba(180, 83, 9, 0.07), transparent 34%),
+    linear-gradient(180deg, var(--bg), var(--bg-alt));
+}
+
+.sidebar-shell {
+  min-height: 100vh;
+  padding: 14px;
+}
+
+.surface-card,
+.screen-card,
+.settings-panel,
+.workflow-card,
+.category-group,
+.launch-panel,
+.selection-tile,
+.stat-card,
+.escalation-block {
+  background: var(--surface);
   border: 1px solid var(--line);
+  box-shadow: var(--shadow-md);
+}
+
+.topbar,
+.settings-panel,
+.screen-card {
+  border-radius: var(--radius-xl);
 }
 
-.eyebrow,
+.topbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px;
+  margin-bottom: 10px;
+}
+
+.brand-lockup {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+
+.brand-mark {
+  display: grid;
+  place-items: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 12px;
+  background: linear-gradient(180deg, var(--accent), var(--accent-strong));
+  color: #fff;
+  font-size: 16px;
+  font-weight: 800;
+}
+
+.brand-name,
+.brand-subtitle,
+.field-label,
 .step-label,
 .workflow-kicker,
-.group-title {
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  font-size: 11px;
-  color: var(--muted);
+.dashboard-kicker,
+.group-title,
+.screen-card h2,
+.screen-copy,
+.status-copy,
+.group-count,
+.dashboard-metric,
+.launch-title,
+.workflow-card h3,
+.workflow-card p {
+  margin: 0;
+}
+
+.brand-name {
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 1.1;
 }
 
-.lede,
-.muted {
+.brand-subtitle,
+.field-label,
+.step-label,
+.workflow-kicker,
+.dashboard-kicker {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
   color: var(--muted);
 }
 
-.screen-stack {
-  display: grid;
-  gap: 14px;
-  margin-top: 14px;
+.settings-panel {
+  margin-bottom: 10px;
+  padding: 14px;
 }
 
-.screen-card,
-.workflow-card {
-  background: var(--panel);
-  border: 1px solid var(--line);
-  border-radius: 20px;
+.screen-card {
+  min-height: calc(100vh - 92px);
   padding: 16px;
-  backdrop-filter: blur(10px);
 }
 
-.accent-card {
-  border-color: rgba(164, 74, 31, 0.35);
+.screen-intro {
+  display: grid;
+  gap: 4px;
+  margin-bottom: 12px;
 }
 
-.input-area,
-.text-input {
-  width: 100%;
-  border: 1px solid var(--line);
-  border-radius: 14px;
-  padding: 12px;
-  background: rgba(255, 255, 255, 0.8);
-  color: var(--ink);
+.screen-card h2,
+.dashboard-metric,
+.launch-title {
+  letter-spacing: -0.03em;
 }
 
-.input-area {
-  min-height: 128px;
+.screen-card h2 {
+  font-size: 28px;
+  line-height: 1.08;
+  font-weight: 750;
+}
+
+.screen-copy,
+.muted,
+.settings-note,
+.empty-copy {
+  color: var(--muted);
 }
 
 .field-label {
   display: block;
-  margin: 14px 0 8px;
+  margin-bottom: 8px;
+}
+
+.identity-chip,
+.metric-badge,
+.group-count,
+.selection-indicator {
+  display: inline-flex;
+  align-items: center;
+  min-height: 30px;
+  padding: 6px 11px;
+  border-radius: 999px;
   font-size: 12px;
-  font-weight: 600;
-  color: var(--muted);
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
+  font-weight: 700;
 }
 
-.workflow-grid,
-.action-row {
-  display: grid;
-  gap: 12px;
+.identity-chip,
+.selection-indicator {
+  border: 1px solid var(--line);
+  background: var(--surface-muted);
+  color: var(--ink);
 }
 
-.button-row {
-  display: flex;
-  gap: 10px;
-  margin-top: 12px;
+.metric-badge,
+.group-count,
+.selection-indicator-on {
+  border: 1px solid var(--accent-soft-strong);
+  background: var(--accent-soft);
+  color: var(--accent-strong);
 }
 
-.dashboard-row,
-.status-row {
+.section-topline {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.text-button {
+  padding: 0;
+  background: transparent;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.text-button:hover {
+  color: var(--ink);
+}
+
+.text-input,
+.input-area {
+  width: 100%;
+  border: 1px solid var(--line);
+  border-radius: 16px;
+  padding: 14px 15px;
+  background: var(--surface);
+  color: var(--ink);
+  outline: none;
+  transition: border-color 140ms ease, box-shadow 140ms ease;
+}
+
+.text-input:focus,
+.input-area:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
+}
+
+.input-area {
+  min-height: 220px;
+  resize: vertical;
+}
+
+.button-row,
+.action-row {
+  display: flex;
+  gap: 10px;
+  margin-top: 14px;
+}
+
+.compact-actions {
   margin-top: 10px;
 }
 
+.centered-actions {
+  justify-content: center;
+}
+
+.split-actions > * {
+  flex: 1;
+}
+
 .primary-button,
 .secondary-button,
 .ghost-button {
-  border: 0;
+  min-height: 42px;
+  padding: 11px 16px;
   border-radius: 999px;
-  padding: 10px 14px;
+  font-weight: 700;
   cursor: pointer;
-  font: inherit;
+  transition: transform 140ms ease, box-shadow 140ms ease;
 }
 
 .primary-button {
   background: var(--accent);
-  color: #fff7f0;
+  color: #fff;
+  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.22);
 }
 
 .secondary-button {
-  background: rgba(164, 74, 31, 0.12);
-  color: var(--accent-dark);
+  background: var(--accent-soft);
+  color: var(--accent-strong);
+  border: 1px solid var(--accent-soft-strong);
 }
 
 .ghost-button {
-  background: transparent;
-  border: 1px solid var(--line);
+  background: var(--surface);
   color: var(--ink);
+  border: 1px solid var(--line);
 }
 
-.small-button {
-  width: 100%;
+.primary-button:hover,
+.secondary-button:hover,
+.ghost-button:hover,
+.workflow-card:hover {
+  transform: translateY(-1px);
 }
 
-.status-copy {
-  margin: 12px 0 0;
+button[disabled] {
+  opacity: 0.48;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
 }
 
-.helper-copy {
-  margin: 8px 0 0;
+.status-copy {
+  margin-top: 10px;
   font-size: 12px;
-  line-height: 1.5;
 }
 
 .error-copy {
-  color: #9e2f1f;
+  color: var(--danger);
 }
 
-.status-badge {
-  display: inline-flex;
+.category-grid,
+.workflow-grid,
+.dashboard-stats,
+.escalation-grid {
+  display: grid;
+  gap: 10px;
+}
+
+.category-group,
+.workflow-card,
+.stat-card,
+.launch-panel,
+.escalation-block {
+  padding: 14px;
+  border-radius: var(--radius-lg);
+}
+
+.group-header,
+.workflow-card-topline,
+.dashboard-hero {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.selection-list,
+.workflow-card ul {
+  margin: 10px 0 0;
+  padding-left: 0;
+  list-style: none;
+}
+
+.selection-list li + li,
+.workflow-card li + li {
+  margin-top: 8px;
+}
+
+.selection-tile {
+  display: flex;
   align-items: center;
-  border-radius: 999px;
-  padding: 6px 10px;
+  gap: 12px;
+  padding: 11px 12px;
+  border-radius: var(--radius-md);
+  background: var(--surface-muted);
+}
+
+.selection-tile input {
+  width: 18px;
+  height: 18px;
+  accent-color: var(--accent);
+}
+
+.selection-tile span {
+  font-weight: 600;
+}
+
+.workflow-card {
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+}
+
+.workflow-card-selected {
+  border-color: var(--accent-soft-strong);
+  background: #f8fbff;
+  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.08);
+}
+
+.workflow-card h3 {
+  margin-top: 10px;
+  font-size: 20px;
+  font-weight: 700;
+}
+
+.workflow-owner {
+  margin-top: 10px;
+}
+
+.dashboard-hero {
+  align-items: center;
+  padding: 14px 16px;
+  border-radius: var(--radius-lg);
+  background: linear-gradient(180deg, #f8fbff, #f3f7ff);
+  border: 1px solid var(--accent-soft-strong);
+}
+
+.dashboard-metric {
+  margin-top: 4px;
+  font-size: 28px;
+  font-weight: 750;
+}
+
+.dashboard-stats {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  margin-top: 12px;
+}
+
+.stat-card {
+  background: var(--surface-muted);
+  box-shadow: var(--shadow-sm);
+}
+
+.stat-card span {
+  display: block;
   font-size: 12px;
-  text-transform: capitalize;
+  color: var(--muted);
 }
 
-.status-active {
-  background: rgba(47, 106, 68, 0.16);
-  color: var(--success);
+.stat-card strong {
+  display: block;
+  margin-top: 4px;
+  font-size: 26px;
+  font-weight: 700;
 }
 
-.upload-box {
-  border: 1px dashed var(--line);
-  border-radius: 16px;
-  padding: 18px;
+.compact-panel {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 
-button[disabled] {
-  cursor: not-allowed;
-  opacity: 0.55;
+.deploy-status {
+  display: flex;
+  gap: 8px;
+}
+
+.live-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  background: var(--success);
+}
+
+.two-up {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
-ul {
-  padding-left: 18px;
+@media (max-width: 560px) {
+  .sidebar-shell {
+    padding: 12px;
+  }
+
+  .topbar,
+  .settings-panel,
+  .screen-card {
+    border-radius: 20px;
+  }
+
+  .screen-card {
+    min-height: calc(100vh - 84px);
+    padding: 14px;
+  }
+
+  .screen-card h2 {
+    font-size: 24px;
+  }
+
+  .dashboard-stats,
+  .two-up,
+  .split-actions {
+    grid-template-columns: 1fr;
+  }
+
+  .button-row,
+  .action-row,
+  .section-topline,
+  .compact-panel {
+    flex-direction: column;
+    align-items: stretch;
+  }
 }