> ## Documentation Index
> Fetch the complete documentation index at: https://learn.actionist.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Onboarding

> From first launch to a configured workspace with real agents, real tools, and your company context already in place — in minutes.

<div className="mxp-hero xc-border">
  <div className="exp-eyebrow mxp-rise">FIRST FIVE MINUTES</div>

  <h2 className="mxp-hero-title mxp-rise" style={{animationDelay:'0.06s'}}>
    From first launch to first agent —{' '}
    <span style={{background:'linear-gradient(90deg,#24A4FF,#9000FF,#E3008E)',WebkitBackgroundClip:'text',backgroundClip:'text',color:'transparent'}}>in minutes.</span>
  </h2>

  <p className="mxp-hero-dek mxp-rise" style={{animationDelay:'0.13s'}}>
    Actionist sets up your workspace for you — either through a five-turn conversation that spins up starter agents before you visit the Agents page, or by importing your real company context, AI-suggested agents, and detected integrations directly from a demo session and activating them in a single click.
  </p>
</div>

<div className="w-full py-10">
  <div className="actionist-tight flex flex-col gap-2 mb-4">
    <span className="actionist-section-eyebrow">Choose your path</span>
    <h2 className="text-2xl md:text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">Two ways into Actionist.</h2>

    <p className="text-base text-gray-600 dark:text-gray-400 max-w-3xl">
      Both paths take under five minutes. The result is the same: a running workspace with agents, tools, and your company context in place.
    </p>
  </div>

  <div className="xob-paths">
    <div className="xob-path-card">
      <div className="xob-path-badge">Path A</div>
      <h3>Fresh install</h3>
      <p>You downloaded the app, signed in, and this is your first time here. Actionist opens the Pip wizard — five quick turns that name your workspace, create starter agents, optionally connect a messaging channel, and configure proactive alerts.</p>
      <div className="xob-path-time">under 2 min</div>
    </div>

    <div className="xob-path-card">
      <div className="xob-path-badge">Path B</div>
      <h3>From a demo link</h3>
      <p>You ran a demo on the Actionist demo site and received a setup link. That link carries your real company context, AI-suggested agents matched to your use case, and integrations already detected. Review the pre-built plan, then activate everything in one click.</p>
      <div className="xob-path-time">under 5 min</div>
    </div>
  </div>
</div>

<hr className="xc-divider" />

<div className="w-full py-10 xc-rise">
  <div className="actionist-tight flex flex-col gap-2 mb-8">
    <span className="actionist-section-eyebrow">Path A</span>
    <h2 className="text-2xl md:text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">Fresh install: sign in and meet Pip.</h2>

    <p className="text-base text-gray-600 dark:text-gray-400 max-w-3xl">
      After you download the app, onboarding happens in three stages: sign in, grant macOS permissions, then follow the Pip wizard through five quick turns.
    </p>
  </div>

  <h3 className="text-xl font-semibold tracking-tight text-gray-900 dark:text-gray-50 mb-4">Signing in</h3>

  <Steps>
    <Step title="Launch the app" icon="play">
      <strong>"Starting Actionist..."</strong> appears as the app bootstraps. The splash clears automatically — up to 8 seconds on first run.
    </Step>

    <Step title="Click Sign in with Browser" icon="globe">
      On the login screen, click <strong>Sign in with Browser</strong>. The app opens your default browser and enters a waiting state — you'll see your browser name and a <strong>Cancel</strong> button while authentication completes.
    </Step>

    <Step title="Complete sign-in in the browser" icon="circle-check">
      Sign in or create an account in the browser. The browser redirects back to the app automatically. A green check mark appears briefly, then the dashboard loads.
    </Step>
  </Steps>

  <Note>
    Browser sign-in has a 5-minute window. If you close the browser tab or the window times out, you'll see <strong>"Authentication timed out. Please try again."</strong> — click <strong>Sign in with Browser</strong> to start a fresh attempt.
  </Note>

  <h3 className="text-xl font-semibold tracking-tight text-gray-900 dark:text-gray-50 mt-10 mb-4">macOS permissions</h3>

  <Info>
    This step appears on macOS only. Windows users can skip ahead to the Pip wizard.
  </Info>

  Once the dashboard loads, Actionist checks whether it has the two permissions it needs for Computer Use tasks. If either is missing, the Permissions modal opens automatically.

  <div className="xob-perm-grid">
    <div className="xob-perm-row">
      <div className="xob-perm-dot" />

      <span><strong>Screen Recording</strong> — allows Actionist to see your screen</span>
    </div>

    <div className="xob-perm-row">
      <div className="xob-perm-dot" />

      <span><strong>Accessibility</strong> — allows Actionist to control UI elements</span>
    </div>
  </div>

  Click each permission row to trigger the macOS system prompt, then grant access. The modal closes automatically once both are in place.

  <Warning>
    Skipping these permissions means Computer Use tasks will fail silently the first time you run one. Grant both now and you won't hit that wall later. You can reopen this modal at any time from <strong>Settings → Permissions</strong>.
  </Warning>

  {/* TODO(image): permissions-modal — IMAGE SPEC: macOS PermissionsModal dialog. Show Screen Recording and Accessibility rows, each with its action button and status indicator (one row granted, one pending — use the real button label from the app). Purple warning banner across the top. 'Skip for now' button at the bottom right — always present while any critical permission is missing (the button switches to 'Continue' only once all permissions are granted, at which point the modal closes automatically). — replace this CSS mock with the real screenshot */}

  <div className="mxp-window" style={{margin:'24px 0'}}>
    <div className="mxp-window-bar xob-mock-titlebar">
      <span className="mxp-window-dot xob-mock-dot-red" />

      <span className="mxp-window-dot xob-mock-dot-yellow" />

      <span className="mxp-window-dot xob-mock-dot-green" />

      <span className="xob-mock-wintitle mxp-window-title">Actionist — Permissions</span>
    </div>

    <div className="xob-mock-banner-warn">
      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
        <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />

        <line x1="12" y1="9" x2="12" y2="13" />

        <line x1="12" y1="17" x2="12.01" y2="17" />
      </svg>

      Actionist needs two macOS permissions to use Computer Use features.
    </div>

    <div style={{padding:'18px 20px'}}>
      <div className="mxp-mock-row xob-mock-perm-row xob-mock-perm-granted">
        <div className="xob-mock-perm-icon xob-mock-perm-icon-green">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.8" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="20 6 9 17 4 12" />
          </svg>
        </div>

        <div className="xob-mock-perm-info">
          <span className="xob-mock-perm-name">Screen Recording</span>
          <span className="xob-mock-perm-desc">Allows Actionist to see your screen</span>
        </div>

        <span className="xob-mock-perm-status xob-mock-perm-status-ok">Granted</span>
      </div>

      <div className="mxp-mock-row xob-mock-perm-row">
        <div className="xob-mock-perm-icon xob-mock-perm-icon-purple">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
            <circle cx="12" cy="12" r="10" />

            <line x1="12" y1="8" x2="12" y2="12" />

            <line x1="12" y1="16" x2="12.01" y2="16" />
          </svg>
        </div>

        <div className="xob-mock-perm-info">
          <span className="xob-mock-perm-name">Accessibility</span>
          <span className="xob-mock-perm-desc">Allows Actionist to control UI elements</span>
        </div>

        <button className="xob-mock-perm-btn">Open Settings</button>
      </div>
    </div>

    <div className="xob-mock-footer">
      <button className="xob-mock-footer-skip">Skip for now</button>
    </div>
  </div>
</div>

<div className="w-full py-10 xc-rise">
  <div className="actionist-tight flex flex-col gap-2 mb-6">
    <span className="actionist-section-eyebrow">The Pip wizard</span>
    <h2 className="text-2xl md:text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">Five turns. Your workspace, configured.</h2>

    <p className="text-base text-gray-600 dark:text-gray-400 max-w-3xl">
      Pip is the floating help avatar at the bottom-right of the dashboard. On first launch it opens automatically. It is a fixed, scripted flow — instant to respond. Step through each turn to see exactly what Pip asks and what happens behind the scenes.
    </p>
  </div>

  <div className="xob-wiz exp-tool-shell xc-try">
    <div className="xob-turns mxp-srch-chips">
      <label htmlFor="xob-t1"><input className="mxp-r" type="radio" name="xob-turn" id="xob-t1" defaultChecked />Turn 1 — Name</label>
      <label htmlFor="xob-t2"><input className="mxp-r" type="radio" name="xob-turn" id="xob-t2" />Turn 2 — Agents</label>
      <label htmlFor="xob-t3"><input className="mxp-r" type="radio" name="xob-turn" id="xob-t3" />Turn 3 — Channel</label>
      <label htmlFor="xob-t4"><input className="mxp-r" type="radio" name="xob-turn" id="xob-t4" />Turn 4 — Nudges</label>
      <label htmlFor="xob-t5"><input className="mxp-r" type="radio" name="xob-turn" id="xob-t5" />Turn 5 — Done</label>
    </div>

    <div className="xob-progress">
      <div className="xob-prog-dot" />

      <div className="xob-prog-dot" />

      <div className="xob-prog-dot" />

      <div className="xob-prog-dot" />

      <div className="xob-prog-dot" />
    </div>

    {/* TURN 1 */}

    <div className="xob-wcard xob-wcard-1">
      <div className="xob-pip-card">
        <div className="xob-pip-bar">
          <div className="xob-pip-avatar">P</div>
          <span className="xob-pip-name">Pip · Actionist</span>
          <span className="xob-pip-sub">Turn 1 / 5</span>
        </div>

        <div className="xob-pip-body">
          <p className="xob-pip-prompt"><em>"Hi, I'm Actionist — I help you set up and run this workspace. What's your company called?"</em></p>

          <div className="xob-pip-input">
            <span style={{opacity:0.5}}>e.g. Acme Corp</span>
          </div>

          <div className="xob-pip-btn">Continue</div>
        </div>
      </div>

      <div className="xob-bts">
        <span className="xob-bts-label">Behind the scenes</span>
        The name you enter personalises agent system prompts for every session that follows. It writes to your workspace profile and surfaces wherever agents introduce themselves. You can update it later in Settings.
      </div>
    </div>

    {/* TURN 2 */}

    <div className="xob-wcard xob-wcard-2">
      <div className="xob-pip-card">
        <div className="xob-pip-bar">
          <div className="xob-pip-avatar">P</div>
          <span className="xob-pip-name">Pip · Actionist</span>
          <span className="xob-pip-sub">Turn 2 / 5</span>
        </div>

        <div className="xob-pip-body">
          <p className="xob-pip-prompt"><em>"Got it. I can pre-create a starter set: a receptionist, a customer-support agent, and an executive assistant. Want me to set those up?"</em></p>

          <div className="xob-pip-pills">
            <div className="xob-pill active">Yes, all three</div>
            <div className="xob-pill">Just the receptionist</div>
            <div className="xob-pill">Skip for now</div>
          </div>
        </div>
      </div>

      <div className="xob-bts">
        <span className="xob-bts-label">Behind the scenes</span>
        Choosing <strong>Yes, all three</strong> creates a Receptionist, Customer Support, and Executive Assistant agent immediately. <strong>Just the receptionist</strong> creates one. <strong>Skip</strong> leaves the Agents page empty — you build your own from scratch. All agents are editable at any time.
      </div>
    </div>

    {/* TURN 3 */}

    <div className="xob-wcard xob-wcard-3">
      <div className="xob-pip-card">
        <div className="xob-pip-bar">
          <div className="xob-pip-avatar">P</div>
          <span className="xob-pip-name">Pip · Actionist</span>
          <span className="xob-pip-sub">Turn 3 / 5</span>
        </div>

        <div className="xob-pip-body">
          <p className="xob-pip-prompt"><em>"Want to connect Telegram or Slack so you can reach these agents from outside the app?"</em></p>

          <div className="xob-pip-pills">
            <div className="xob-pill active">Telegram</div>
            <div className="xob-pill">Slack</div>
            <div className="xob-pill">Skip</div>
          </div>
        </div>
      </div>

      <div className="xob-bts">
        <span className="xob-bts-label">Behind the scenes</span>
        Choosing Telegram or Slack saves a deep-link that opens the correct channel setup screen after the wizard finishes. Skip leaves channels unset — you can connect them later from each agent's Channels tab.
      </div>
    </div>

    {/* TURN 4 */}

    <div className="xob-wcard xob-wcard-4">
      <div className="xob-pip-card">
        <div className="xob-pip-bar">
          <div className="xob-pip-avatar">P</div>
          <span className="xob-pip-name">Pip · Actionist</span>
          <span className="xob-pip-sub">Turn 4 / 5</span>
        </div>

        <div className="xob-pip-body">
          <p className="xob-pip-prompt"><em>"One more thing — I can nudge you when I spot something obvious to fix (an agent missing a model preset, an MCP server in needs-auth, pending marketplace updates). Want that on?"</em></p>

          <div className="xob-pip-pills">
            <div className="xob-pill active">Yes, nudge me</div>
            <div className="xob-pill">No thanks</div>
            <div className="xob-pill">I'll decide later</div>
          </div>
        </div>
      </div>

      <div className="xob-bts">
        <span className="xob-bts-label">Behind the scenes</span>
        Nudges default to off. Choosing <strong>Yes, nudge me</strong> turns proactive alerts on — Pip will surface broken configurations automatically. <strong>No thanks</strong> and <strong>I'll decide later</strong> both leave nudges off; the toggle is available later at Settings → Help Assistant.
      </div>
    </div>

    {/* TURN 5 */}

    <div className="xob-wcard xob-wcard-5">
      <div className="xob-pip-card">
        <div className="xob-pip-bar">
          <div className="xob-pip-avatar">P</div>
          <span className="xob-pip-name">Pip · Actionist</span>
          <span className="xob-pip-sub">Turn 5 / 5</span>
        </div>

        <div className="xob-pip-body">
          <p className="xob-pip-prompt"><em>"All set. Try asking me 'what needs updating?' to see the marketplace pending-update detection in action — or just ask anything about the platform."</em></p>
          <div className="xob-pip-btn">Got it</div>
        </div>
      </div>

      <div className="xob-bts">
        <span className="xob-bts-label">Behind the scenes</span>
        Clicking <strong>Got it</strong> is the moment onboarding completes — the wizard unmounts and Pip switches to its normal help-chat mode. If you close the overlay before reaching this button, the wizard reappears from Turn 1 on your next app start. There is no mid-flow save point.
      </div>
    </div>
  </div>

  {/* TODO(image): pip-wizard-turn1 — IMAGE SPEC: Pip floating overlay open against the Actionist dashboard, Turn 1 visible. Show the greeting 'Hi, I'm Actionist — I help you set up and run this workspace. What's your company called?' with the text input field below it (placeholder text 'e.g. Acme Corp') and the 'Continue' button. Pip avatar visible bottom-right. — replace this CSS mock with the real screenshot */}

  <div className="mxp-window" style={{maxWidth:'520px',margin:'24px auto'}}>
    <div className="mxp-window-bar xob-mock-titlebar">
      <span className="mxp-window-dot xob-mock-dot-red" />

      <span className="mxp-window-dot xob-mock-dot-yellow" />

      <span className="mxp-window-dot xob-mock-dot-green" />

      <span className="xob-mock-wintitle mxp-window-title">Actionist — Dashboard</span>
    </div>

    <div className="xob-mock-dashboard-bg">
      <div className="xob-mock-row" style={{opacity:'0.35'}} />

      <div className="xob-mock-row" style={{opacity:'0.25',width:'70%'}} />

      <div className="xob-mock-row" style={{opacity:'0.18',width:'55%'}} />

      <div className="xob-mock-pip-float">
        <div className="xob-pip-bar" style={{borderRadius:'18px 18px 0 0',borderBottom:'1px solid rgb(144 0 255 / 0.15)'}}>
          <div className="xob-pip-avatar">P</div>
          <span className="xob-pip-name">Pip · Actionist</span>
          <span className="xob-pip-sub">Turn 1 / 5</span>
        </div>

        <div className="xob-mock-pip-body">
          <p className="xob-mock-pip-q">"Hi, I'm Actionist — I help you set up and run this workspace. What's your company called?"</p>

          <div className="xob-mock-pip-input">
            <span style={{opacity:'0.45'}}>e.g. Acme Corp</span>
          </div>

          <div className="xob-mock-pip-cta">Continue</div>
        </div>
      </div>
    </div>
  </div>

  <Tip>
    After clicking "Got it", try typing <strong>"what needs updating?"</strong> in the Pip chat. It runs a live check across your agents and marketplace — a good first glimpse of how the proactive layer works.
  </Tip>

  {/* TODO(image): pip-wizard-turn2 — IMAGE SPEC: Pip overlay on Turn 2, showing the three pill-button choices side by side: 'Yes, all three', 'Just the receptionist', 'Skip for now'. The Turn 2 prompt text visible above the pills. Keep the pill row compact and clearly legible. — replace this CSS mock with the real screenshot */}

  <div className="mxp-window" style={{maxWidth:'520px',margin:'24px auto'}}>
    <div className="mxp-window-bar xob-mock-titlebar">
      <span className="mxp-window-dot xob-mock-dot-red" />

      <span className="mxp-window-dot xob-mock-dot-yellow" />

      <span className="mxp-window-dot xob-mock-dot-green" />

      <span className="xob-mock-wintitle mxp-window-title">Actionist — Dashboard</span>
    </div>

    <div className="xob-mock-dashboard-bg">
      <div className="xob-mock-row" style={{opacity:'0.35'}} />

      <div className="xob-mock-row" style={{opacity:'0.25',width:'70%'}} />

      <div className="xob-mock-pip-float">
        <div className="xob-pip-bar" style={{borderRadius:'18px 18px 0 0',borderBottom:'1px solid rgb(144 0 255 / 0.15)'}}>
          <div className="xob-pip-avatar">P</div>
          <span className="xob-pip-name">Pip · Actionist</span>
          <span className="xob-pip-sub">Turn 2 / 5</span>
        </div>

        <div className="xob-mock-pip-body">
          <p className="xob-mock-pip-q">"I can pre-create a starter set: a receptionist, a customer-support agent, and an executive assistant. Want me to set those up?"</p>

          <div className="xob-mock-pip-pills">
            <span className="xob-mock-pip-pill xob-mock-pip-pill-active">Yes, all three</span>
            <span className="xob-mock-pip-pill">Just the receptionist</span>
            <span className="xob-mock-pip-pill">Skip for now</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <p className="text-sm text-gray-500 dark:text-gray-400 max-w-3xl mt-4">
    Whichever option you pick, the agents are ready to use the moment Turn 5 completes. Here is what each one does out of the box.
  </p>

  {/* ---- Starter-agent recipe strip — placed after Turn 2 (starter-agents turn) ---- */}

  <div className="w-full pt-8 pb-2 xc-rise">
    <div className="actionist-tight flex flex-col gap-1 mb-4">
      <span className="actionist-section-eyebrow">Day-one value</span>
      <h2 className="text-xl md:text-2xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">What each starter agent does from the moment it exists.</h2>
    </div>

    <div className="xc-recipes">
      {/* Card 1 — Receptionist */}

      <div className="xc-recipe">
        <div className="xc-recipe-who">
          <i style={{background:'linear-gradient(135deg,#486EFF,#9000FF)'}} />

          Sam · Solo founder
        </div>

        <div className="xc-recipe-flow">
          The <em>Receptionist</em> answers inbound messages on Telegram the moment they arrive — greeting visitors, collecting their name and query, and routing urgent items to Sam's attention while queuing the rest for review. No message sits unanswered for hours.
        </div>

        <div className="xc-recipe-save">live in 10 min · saves \~3 hrs/wk</div>
      </div>

      {/* Card 2 — Customer Support */}

      <div className="xc-recipe">
        <div className="xc-recipe-who">
          <i style={{background:'linear-gradient(135deg,#4ED8A7,#24A4FF)'}} />

          Priya · Support lead
        </div>

        <div className="xc-recipe-flow">
          The <em>Customer Support</em> agent reads each incoming ticket, matches it against the knowledge base, and drafts a reply for Priya to approve — or sends it directly for routine questions. First-response time drops from hours to minutes on typical queues of 30-plus tickets a day.
        </div>

        <div className="xc-recipe-save">live in 10 min · saves \~5 hrs/wk</div>
      </div>

      {/* Card 3 — Executive Assistant */}

      <div className="xc-recipe">
        <div className="xc-recipe-who">
          <i style={{background:'linear-gradient(135deg,#7C5BFF,#E3008E)'}} />

          Maya · Marketing Manager
        </div>

        <div className="xc-recipe-flow">
          The <em>Executive Assistant</em> monitors Maya's inbox, surfaces the 4-5 items that need a decision each morning, drafts replies to the rest, and flags anything time-sensitive — so Maya opens her laptop to a curated brief rather than an unread count.
        </div>

        <div className="xc-recipe-save">live in 10 min · saves \~4 hrs/wk</div>
      </div>
    </div>

    <p style={{fontSize:'10.5px',opacity:'0.45',fontFamily:'"JetBrains Mono",monospace',marginTop:'10px',letterSpacing:'0.06em'}}>ILLUSTRATIVE — TIME ESTIMATES ARE TYPICAL FOR THE WORKFLOWS SHOWN ON THIS PAGE.</p>
  </div>

  {/* ---- End starter-agent recipe strip ---- */}
</div>

<div className="w-full py-6 xc-rise">
  <div className="actionist-tight flex flex-col gap-2 mb-6">
    <span className="actionist-section-eyebrow">Turn detail</span>
    <h2 className="text-2xl md:text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">Every turn, fully annotated.</h2>

    <p className="text-base text-gray-600 dark:text-gray-400 max-w-3xl">
      The stepper above shows what Pip shows; the accordion below shows every choice and its consequence.
    </p>
  </div>

  <AccordionGroup>
    <Accordion title="Turn 1 — Name your workspace" icon="building" defaultOpen={true}>
      Pip greets you with: <em>"Hi, I'm Actionist — I help you set up and run this workspace. What's your company called?"</em>

      Type your company name in the input (placeholder: <em>e.g. Acme Corp</em>) and click <strong>Continue</strong>. This name personalises agent system prompts for every session that follows, so enter it accurately. You can change it later in Settings.
    </Accordion>

    <Accordion title="Turn 2 — Create starter agents" icon="users">
      Pip asks: <em>"Got it. I can pre-create a starter set: a receptionist, a customer-support agent, and an executive assistant. Want me to set those up?"</em>

      | Choice                                 | What happens                                                            |
      | -------------------------------------- | ----------------------------------------------------------------------- |
      | <strong>Yes, all three</strong>        | Creates a Receptionist, Customer Support, and Executive Assistant agent |
      | <strong>Just the receptionist</strong> | Creates the Receptionist agent only                                     |
      | <strong>Skip for now</strong>          | No agents created; you build your own from the Agents page              |

      These agents are ready to use immediately after Turn 5. You can edit them at any time from the Agents page.
    </Accordion>

    <Accordion title="Turn 3 — Connect a messaging channel" icon="message-circle">
      Pip asks: <em>"Want to connect Telegram or Slack so you can reach these agents from outside the app?"</em>

      Choosing <strong>Telegram</strong> or <strong>Slack</strong> saves a deep-link that opens the correct channel setup screen after the wizard finishes. Choosing <strong>Skip</strong> leaves channels unset — you can connect them later from each agent's Channels tab.

      <Card title="Channels, in depth" icon="messages-square" href="/Folders/channels" horizontal>
        Telegram and Slack setup, routing, and credentials.
      </Card>
    </Accordion>

    <Accordion title="Turn 4 — Proactive nudges" icon="bell">
      Pip asks: <em>"One more thing — I can nudge you when I spot something obvious to fix (an agent missing a model preset, an MCP server in needs-auth, pending marketplace updates). Want that on?"</em>

      | Choice                             | What happens                                                                     |
      | ---------------------------------- | -------------------------------------------------------------------------------- |
      | <strong>Yes, nudge me</strong>     | Turns proactive alerts on — Pip will surface broken configurations automatically |
      | <strong>No thanks</strong>         | Nudges stay off                                                                  |
      | <strong>I'll decide later</strong> | Nudges stay off; toggle available later at Settings → Help Assistant             |

      Nudges default to off. If you are new to Actionist, turning them on is recommended — they act as an always-on setup guide during the first few days.
    </Accordion>

    <Accordion title="Turn 5 — Done" icon="check">
      Pip shows: <em>"All set. Try asking me 'what needs updating?' to see the marketplace pending-update detection in action — or just ask anything about the platform."</em>

      Click <strong>Got it</strong>. This is the moment onboarding completes — the wizard unmounts and Pip switches to its normal help-chat mode. If you close or dismiss the overlay before reaching this button, the wizard reappears from Turn 1 on your next app start.
    </Accordion>
  </AccordionGroup>
</div>

<hr className="xc-divider" />

<div id="handoff-path" className="w-full py-10 xc-rise">
  <div className="actionist-tight flex flex-col gap-2 mb-8">
    <span className="actionist-section-eyebrow">Path B</span>
    <h2 className="text-2xl md:text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">From demo link to live workspace.</h2>

    <p className="text-base text-gray-600 dark:text-gray-400 max-w-3xl">
      If you completed a personalised demo on the Actionist demo site, you received a setup link. That link carries everything the demo learned about your company — agents, tools, and context — ready to import with one click.
    </p>
  </div>

  <div className="mxp-pipe">
    <div className="mxp-pipe-node"><strong>Demo session</strong><span>You complete the demo flow; the site learns your company profile, suggested agents, and integrations.</span></div>

    <div className="mxp-pipe-link" />

    <div className="mxp-pipe-node"><strong>Setup link</strong><span>The link arrives by email or WhatsApp, carrying the full bundle as a signed token.</span></div>

    <div className="mxp-pipe-link d2" />

    <div className="mxp-pipe-node"><strong>Import</strong><span>Open the link, create an account or sign in — the bundle unpacks automatically.</span></div>

    <div className="mxp-pipe-link d3" />

    <div className="mxp-pipe-node"><strong>Review</strong><span>Three-step review: company details, agent selection, detected integrations.</span></div>

    <div className="mxp-pipe-link d4" />

    <div className="mxp-pipe-node"><strong>Launch</strong><span>One click applies everything. Workspace is live with agents and context in place.</span></div>
  </div>
</div>

<div className="w-full py-10 xc-rise">
  <div className="actionist-tight flex flex-col gap-2 mb-6">
    <span className="actionist-section-eyebrow">The import</span>
    <h2 className="text-2xl md:text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">Watch the bundle load.</h2>

    <p className="text-base text-gray-600 dark:text-gray-400 max-w-3xl">
      Once you create an account or sign in via the setup link, a loading screen appears with the heading <strong>"Preparing your workspace"</strong>. Three status lines animate in sequence, then the review screen takes over automatically.
    </p>
  </div>

  <div className="xob-loading">
    <p className="xob-loading-title">Preparing your workspace</p>

    <div className="xob-status-lines">
      <div className="xob-status-line">
        <div className="xob-status-icon done">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.8" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="20 6 9 17 4 12" />
          </svg>
        </div>

        <span>Importing your demo bundle…</span>
      </div>

      <div className="xob-status-line">
        <div className="xob-status-icon done">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.8" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="20 6 9 17 4 12" />
          </svg>
        </div>

        <span>Building your setup plan…</span>
      </div>

      <div className="xob-status-line">
        <div className="xob-status-icon done">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.8" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="20 6 9 17 4 12" />
          </svg>
        </div>

        <span>Ready for review…</span>
      </div>
    </div>

    <div className="xob-ready">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
        <polyline points="20 6 9 17 4 12" />
      </svg>

      Plan ready — opening review screen
    </div>
  </div>

  <h3 className="text-xl font-semibold tracking-tight text-gray-900 dark:text-gray-50 mt-10 mb-4">Getting to the review screen</h3>

  <Steps>
    <Step title="Open the link" icon="link">
      Open the setup link from your email or WhatsApp message. The entry page loads in your browser.
    </Step>

    <Step title="Create an account or sign in" icon="user-plus">
      Click <strong>Create account</strong> (purple button) or <strong>Sign in instead</strong> (outlined). If you already have an account with an organisation, you're redirected straight to the review screen.
    </Step>

    <Step title="Watch the import run" icon="loader">
      The loading screen appears with the heading <strong>"Preparing your workspace"</strong>. Three status lines animate in sequence — exactly as shown above. When the third line completes, the review screen replaces it automatically.
    </Step>
  </Steps>
</div>

<div className="w-full py-10 xc-rise">
  <div className="actionist-tight flex flex-col gap-2 mb-6">
    <span className="actionist-section-eyebrow">Review</span>
    <h2 className="text-2xl md:text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">The three review steps.</h2>

    <p className="text-base text-gray-600 dark:text-gray-400 max-w-3xl">
      The review screen gives you one chance to inspect and adjust what the demo learned before it becomes your workspace.
    </p>
  </div>

  <div className="xob-review-grid">
    <div className="mxs-tier xob-rc" style={{borderTopColor:'#486EFF'}}>
      <span className="xob-review-step">Step 1</span>
      <h4>About your company</h4>
      <p>Editable fields: Name, Website, Industry, and "What you do" — all pre-populated from your demo session. Update anything that needs correcting before launching.</p>
    </div>

    <div className="mxs-tier xob-rc" style={{borderTopColor:'#9000FF'}}>
      <span className="xob-review-step">Step 2</span>
      <h4>Pick your starter agents</h4>
      <p>Toggle cards for each AI-suggested agent. Click any card to select or deselect it. Click <strong>Customize</strong> to expand Name, Role, Description, and an <strong>Enable immediately after launch</strong> checkbox per agent.</p>
    </div>

    <div className="mxs-tier xob-rc" style={{borderTopColor:'#E3008E'}}>
      <span className="xob-review-step">Step 3</span>
      <h4>Tools we recognized</h4>
      <p>A read-only grid of integrations detected during your demo. Each shows a confidence label: <strong>Confident match</strong>, <strong>Possible match</strong>, or <strong>Detected</strong>. Actual connection happens later from each agent's settings.</p>
    </div>
  </div>

  {/* TODO(image): handoff-review-screen — IMAGE SPEC: Full handoff review screen. Step 1 'About your company' visible at top with Name, Website, Industry, and 'What you do' fields pre-filled. Step 2 'Pick your starter agents' shows 2–3 toggle cards with one expanded to show the 'Customize' panel (Name, Role, Description, 'Enable immediately after launch' checkbox). Step 3 'Tools we recognized' shows a grid of 3–4 integrations with 'Confident match' and 'Possible match' labels. Sticky action bar at the bottom: '{N} items ready to launch', 'Skip for now' outline, 'Launch setup' purple button. — replace this CSS mock with the real screenshot */}

  <div className="mxp-window" style={{margin:'24px 0'}}>
    <div className="mxp-window-bar xob-mock-titlebar">
      <span className="mxp-window-dot xob-mock-dot-red" />

      <span className="mxp-window-dot xob-mock-dot-yellow" />

      <span className="mxp-window-dot xob-mock-dot-green" />

      <span className="xob-mock-wintitle mxp-window-title">Actionist — Review your setup</span>
    </div>

    <div style={{padding:'18px 20px',display:'flex',flexDirection:'column',gap:'20px'}}>
      <div className="xob-mock-review-section">
        <span className="xob-mock-review-label">Step 1 — About your company</span>

        <div className="xob-mock-field-row">
          <div className="xob-mock-field"><span className="xob-mock-field-label">Name</span><div className="xob-mock-field-val">Acme Corp</div></div>
          <div className="xob-mock-field"><span className="xob-mock-field-label">Website</span><div className="xob-mock-field-val">acmecorp.com</div></div>
          <div className="xob-mock-field"><span className="xob-mock-field-label">Industry</span><div className="xob-mock-field-val">SaaS</div></div>
        </div>
      </div>

      <div className="xob-mock-review-section">
        <span className="xob-mock-review-label">Step 2 — Pick your starter agents</span>

        <div className="xob-mock-agent-row">
          <div className="xob-mock-agent-card xob-mock-agent-card-sel">
            <div className="xob-mock-agent-name">Receptionist</div>
            <div className="xob-mock-agent-role">First-contact handler</div>

            <div className="xob-mock-customize-row">
              <span>Name</span><span>Role</span><span>Description</span>
              <label className="xob-mock-checkbox"><input type="checkbox" defaultChecked readOnly /><span>Enable immediately after launch</span></label>
            </div>
          </div>

          <div className="xob-mock-agent-card">
            <div className="xob-mock-agent-name">Customer Support</div>
            <div className="xob-mock-agent-role">Support ticket handler</div>
          </div>

          <div className="xob-mock-agent-card">
            <div className="xob-mock-agent-name">Exec Assistant</div>
            <div className="xob-mock-agent-role">Scheduling & comms</div>
          </div>
        </div>
      </div>

      <div className="xob-mock-review-section">
        <span className="xob-mock-review-label">Step 3 — Tools we recognized</span>

        <div className="xob-mock-tools-row">
          <div className="xob-mock-tool"><span className="xob-mock-tool-name">Slack</span><span className="xob-mock-conf-badge xob-mock-conf-high">Confident match</span></div>
          <div className="xob-mock-tool"><span className="xob-mock-tool-name">Notion</span><span className="xob-mock-conf-badge xob-mock-conf-mid">Possible match</span></div>
          <div className="xob-mock-tool"><span className="xob-mock-tool-name">Gmail</span><span className="xob-mock-conf-badge xob-mock-conf-high">Confident match</span></div>
          <div className="xob-mock-tool"><span className="xob-mock-tool-name">Linear</span><span className="xob-mock-conf-badge xob-mock-conf-low">Detected</span></div>
        </div>
      </div>
    </div>

    <div className="xob-mock-action-bar">
      <span className="xob-mock-action-count">4 items ready to launch</span>
      <button className="xob-mock-action-skip">Skip for now</button>
      <button className="xob-mock-action-launch">Launch setup</button>
    </div>
  </div>

  <h3 className="text-xl font-semibold tracking-tight text-gray-900 dark:text-gray-50 mt-10 mb-4">Launching your workspace</h3>

  Once you're satisfied with the review:

  <Steps>
    <Step title="Check the action bar">
      The sticky action bar at the bottom shows <strong>"\{N} items ready to launch"</strong> — one for the company profile plus one for each selected agent.
    </Step>

    <Step title="Click Launch setup">
      The button changes to <strong>"Launching…"</strong> with a spinner while the import applies.
    </Step>

    <Step title="Done">
      On success, a green check circle animates in with a particle burst, and the screen shows <strong>"\{CompanyName} is ready"</strong> with two action buttons: <strong>View your agents</strong> and <strong>Open dashboard</strong>.
    </Step>
  </Steps>

  <Check>
    Your company context, selected agents, and integration data are now written into your workspace. Everything is live.
  </Check>

  If you want to skip setup entirely, click <strong>Skip for now</strong> in the action bar. The screen shows <strong>"Setup skipped"</strong> with a <strong>Go to dashboard</strong> button — your workspace is clean and you configure everything manually from the Agents page and each app's settings.

  {/* TODO(image): handoff-success — IMAGE SPEC: Post-apply success screen. Large animated green check circle centre-screen with subtle particle-burst effect. Below it: '{CompanyName} is ready' as the main heading, two CTA buttons side by side: 'View your agents' (purple) and 'Open dashboard' (outlined). Clean, celebratory feel — no other UI chrome visible. — replace this CSS mock with the real screenshot */}

  <div className="xob-mock-success">
    <div className="xob-mock-success-circle">
      <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
        <polyline points="20 6 9 17 4 12" />
      </svg>
    </div>

    <div className="xob-mock-success-particles">
      <span className="xob-mock-particle" style={{top:'14%',left:'38%','--dx':'-22px','--dy':'-18px'}} />

      <span className="xob-mock-particle" style={{top:'12%',left:'55%','--dx':'20px','--dy':'-24px','--c':'#9000FF'}} />

      <span className="xob-mock-particle" style={{top:'22%',left:'28%','--dx':'-28px','--dy':'-6px','--c':'#00DBFF'}} />

      <span className="xob-mock-particle" style={{top:'22%',left:'68%','--dx':'26px','--dy':'-8px','--c':'#E3008E'}} />

      <span className="xob-mock-particle" style={{top:'32%',left:'34%','--dx':'-16px','--dy':'14px','--c':'#486EFF'}} />

      <span className="xob-mock-particle" style={{top:'32%',left:'62%','--dx':'18px','--dy':'16px','--c':'#C800B3'}} />
    </div>

    <p className="xob-mock-success-heading">Acme Corp is ready</p>

    <div className="xob-mock-success-btns">
      <button className="xob-mock-btn-primary">View your agents</button>
      <button className="xob-mock-btn-outline">Open dashboard</button>
    </div>
  </div>

  <h3 className="text-xl font-semibold tracking-tight text-gray-900 dark:text-gray-50 mt-10 mb-4">If something goes wrong</h3>

  <AccordionGroup>
    <Accordion title="Setup link unavailable" icon="unlink">
      The link could not be found, or it may have expired. Reopen the original email or WhatsApp message and try the link again. If the problem persists, contact support.
    </Accordion>

    <Accordion title="Manual review needed" icon="clipboard-check">
      This appears when the email you signed in with does not match the email used during the demo session (or if you previously dismissed the setup). There is no self-serve fix — contact support for approval.
    </Accordion>

    <Accordion title="Setup already claimed" icon="lock">
      This setup link was already used to configure another workspace. Each link is single-use per organisation. Open the demo site again for a fresh link, or contact support.
    </Accordion>

    <Accordion title="Import failed" icon="triangle-alert">
      A server error occurred during import. A <strong>Retry</strong> button is available on this screen — try it once. If the error persists, contact support and include any error details shown.
    </Accordion>
  </AccordionGroup>
</div>

<div className="w-full py-10 xc-rise">
  <div className="actionist-tight flex flex-col gap-2 mb-6">
    <span className="actionist-section-eyebrow">After setup</span>
    <h2 className="text-2xl md:text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">The Tutorial pill.</h2>
  </div>

  <p className="text-base text-gray-600 dark:text-gray-400 max-w-3xl">
    Once you're past onboarding, the dashboard header shows a <strong>Tutorial</strong> pill with a <strong>2 min</strong> duration badge. Clicking it opens a short YouTube walkthrough.
  </p>

  <div className="xob-tutorial-pill">
    Tutorial
    <span className="xob-tutorial-badge">2 min</span>
  </div>

  <p className="text-sm text-gray-500 dark:text-gray-500 max-w-2xl mt-2">
    The pill reappears on every app restart — there is no permanent dismiss option in Settings.
  </p>
</div>

<hr className="xc-divider" />

<div className="w-full py-10 xc-rise">
  <div className="actionist-tight flex flex-col gap-2 mb-8">
    <span className="actionist-section-eyebrow">Common questions</span>
    <h2 className="text-2xl md:text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">Things worth knowing before you start.</h2>
  </div>

  <AccordionGroup>
    <Accordion title="The browser auth window closed before I finished signing in" icon="clock">
      Click <strong>Sign in with Browser</strong> again to open a fresh window. If the 5-minute timeout fired, you'll see <strong>"Authentication timed out. Please try again."</strong> — this is expected, not an error. Starting again resets the clock.
    </Accordion>

    <Accordion title="Why do macOS permissions matter so much?" icon="shield">
      Actionist's Computer Use feature needs both <strong>Screen Recording</strong> and <strong>Accessibility</strong> to see and operate your screen. Granting them during onboarding ensures that the first time you run an automation, it works rather than failing silently. You can re-open the Permissions modal at any time from <strong>Settings → Permissions</strong>.
    </Accordion>

    <Accordion title="Should I turn on nudges in Turn 4?" icon="bell">
      Yes, if you're new. Nudges surface actionable alerts automatically — missing model presets, MCP servers that need re-authentication, pending marketplace updates — and act as a hands-free setup guide during your first few days. You can toggle them later at <strong>Settings → Help Assistant</strong>.
    </Accordion>

    <Accordion title="The Pip wizard disappeared before I clicked 'Got it'" icon="refresh-cw">
      The wizard resumes from Turn 1 the next time you start the app — there is no mid-flow save point. This is intentional.
    </Accordion>

    <Accordion title="Does the company name I enter in Turn 1 matter?" icon="building">
      Yes. The name you enter personalises agent system prompts for every subsequent session — agents reference it in context. Make sure it's accurate. You can update it later in Settings.
    </Accordion>

    <Accordion title="My handoff link shows 'Setup already claimed'" icon="lock">
      Each handoff link is single-use per organisation. If this appears, the link was already used with a different workspace. Open the demo site to request a new personalised demo and receive a fresh link, or contact support.
    </Accordion>

    <Accordion title="I signed in with a different email than I used on the demo site" icon="mail">
      This triggers the <strong>"Manual review needed"</strong> screen. There is no self-serve fix — email mismatch requires support-side approval. Contact the team with your demo email and the email you signed in with.
    </Accordion>

    <Accordion title="Are changes I make in the handoff review saved automatically?" icon="save">
      Yes. Edits to agent name, role, description, and the <strong>Enable immediately after launch</strong> checkbox are all sent as part of the <strong>Launch setup</strong> request — there is no separate save step. Review everything before clicking the button.
    </Accordion>
  </AccordionGroup>
</div>

<div className="w-full py-10 xc-rise">
  <div className="actionist-cta-panel xc-border">
    <div className="relative z-10 flex flex-col items-center gap-5 max-w-2xl mx-auto">
      <span className="actionist-eyebrow">Ready</span>

      <h2 className="text-2xl md:text-3xl font-semibold tracking-tight text-white leading-tight">
        Your workspace is set up. Now put it to work.
      </h2>

      <p className="text-base md:text-lg text-white/85">
        Open the dashboard, pick an agent, describe a task. Actionist handles the rest.
      </p>

      <div className="flex flex-wrap items-center justify-center gap-3 pt-2">
        <a className="actionist-cta-btn-primary" href="https://app.actionist.ai" target="_blank" rel="noreferrer">
          Open the Dashboard

          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M5 12h14" />

            <path d="m12 5 7 7-7 7" />
          </svg>
        </a>

        <a className="actionist-cta-btn-secondary" href="mailto:support@actionist.ai">
          Email the team
        </a>
      </div>
    </div>
  </div>
</div>

<div className="w-full pt-2 pb-6">
  <p className="actionist-trust-line">
    Fresh install or demo handoff — under five minutes either way.<br />
    Workspace named · Agents created · Context imported · Everything live.
  </p>
</div>

<div className="w-full pb-16 xc-rise">
  <div className="actionist-tight flex flex-col gap-2 mb-6">
    <span className="actionist-section-eyebrow">Keep going</span>
    <h2 className="text-2xl md:text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">Next steps.</h2>
  </div>

  <Columns cols={4}>
    <Card title="Agents" icon="users" href="/Folders/agents">
      Configure, customise, and manage every AI employee in your workspace.
    </Card>

    <Card title="Channels" icon="messages-square" href="/Folders/channels">
      Connect Telegram and Slack so your agents work where your team already is.
    </Card>

    <Card title="Marketplace" icon="store" href="/Folders/marketplace">
      Browse and install skills, MCP servers, and workflow templates from the marketplace.
    </Card>

    <Card title="Settings" icon="settings" href="/Folders/settings">
      Update your company name, manage permissions, and configure the Help Assistant.
    </Card>
  </Columns>
</div>