extension/sidebar/components/OnboardingScreen.js

export function OnboardingScreen({ description, status, statusError, ownerEmail }) {
  return `
    <section class="screen-card">
      <div class="screen-intro">
        <p class="step-label">Step 1</p>
        <h2>Map how work moves through your inbox</h2>
      </div>
      <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="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="${statusError ? "status-copy error-copy" : "status-copy"}">${escapeHtml(status)}</p>
    </section>
  `;
}

function escapeHtml(value) {
  return String(value)
    .replaceAll("&", "&amp;")
    .replaceAll("<", "&lt;")
    .replaceAll(">", "&gt;");
}