> ## 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.

# Computer Use

> When there's no API, Actionist sees and clicks — vision-driven screen automation in plain language.

<div className="mxp-hero xc-border">
  <div className="exp-eyebrow mxp-rise">VISION-DRIVEN AUTOMATION</div>

  <h2 className="mxp-hero-title mxp-rise" style={{animationDelay:'0.06s'}}>
    If you can click it,{' '}
    <span style={{background:'linear-gradient(90deg,#24A4FF,#9000FF,#E3008E)',WebkitBackgroundClip:'text',backgroundClip:'text',color:'transparent'}}>Actionist can automate it.</span>
  </h2>

  <p className="mxp-hero-dek mxp-rise" style={{animationDelay:'0.13s'}}>
    Legacy tools, API-less web apps, multi-step wizards — describe the goal in a sentence and the agent handles every click, keystroke, and page load. No connector, no script, no browser extension required.
  </p>
</div>

<div className="w-full py-10">
  <div className="actionist-tight flex flex-col gap-2 mb-6">
    <span className="actionist-section-eyebrow">The loop</span>
    <h2 className="text-2xl md:text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">The cycle that runs every action.</h2>

    <p className="text-base text-gray-600 dark:text-gray-400 max-w-3xl">
      Actionist runs a tight perceive-decide-act loop for every step. It captures the screen, sends it to a vision model, receives an action instruction, executes it, then loops back. Repeat until done.
    </p>
  </div>

  <div className="exp-tool-shell" style={{padding:'36px 28px 28px'}}>
    <div className="xcu-loop" style={{position:'relative',display:'flex',alignItems:'center',justifyContent:'center',margin:'32px auto 8px',width:'100%',maxWidth:'620px',minHeight:'320px'}}>
      <svg className="xcu-loop-svg" style={{width:'300px',height:'300px',flex:'none'}} viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id="xcuArcGrad" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stopColor="#24A4FF" stopOpacity="0" />

            <stop offset="30%" stopColor="#9000FF" stopOpacity="1" />

            <stop offset="100%" stopColor="#E3008E" stopOpacity="0.6" />
          </linearGradient>
        </defs>

        {/* Track ring */}

        <circle className="xcu-arc-track" cx="150" cy="150" r="108" />

        {/* Travelling pulse */}

        <circle className="xcu-arc-pulse" cx="150" cy="150" r="108" transform="rotate(-90 150 150)" />
      </svg>

      {/* Phase nodes */}

      <div className="xcu-node xcu-node-a" style={{top:'-8px',left:'50%',transform:'translateX(-50%)'}}>
        <div className="xcu-node-dot">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <rect x="2" y="3" width="20" height="14" rx="2" />

            <path d="M8 21h8M12 17v4" />
          </svg>
        </div>

        <strong>Perceive</strong>
        <span>Screenshot sent to vision model</span>
      </div>

      <div className="xcu-node xcu-node-b" style={{bottom:'-8px',left:'4%'}}>
        <div className="xcu-node-dot">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />

            <circle cx="12" cy="12" r="10" />

            <path d="M12 17h.01" />
          </svg>
        </div>

        <strong>Decide</strong>
        <span>Model plans the next action</span>
      </div>

      <div className="xcu-node xcu-node-c" style={{bottom:'-8px',right:'4%'}}>
        <div className="xcu-node-dot">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M5 12h14" />

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

        <strong>Act</strong>
        <span>Click, type, or navigate</span>
      </div>

      <div style={{position:'absolute',top:'50%',left:'50%',transform:'translate(-50%,-50%)',textAlign:'center',pointerEvents:'none'}}>
        <div style={{fontFamily:'"JetBrains Mono",monospace',fontSize:'10.5px',letterSpacing:'0.12em',textTransform:'uppercase',color:'rgb(75 85 99)',opacity:0.55,lineHeight:1.6}}>
          repeats<br />until done
        </div>
      </div>
    </div>

    <div className="exp-surface-grid" style={{marginTop:'44px',gridTemplateColumns:'repeat(3,1fr)'}}>
      <div className="exp-surface-tile" style={{padding:'16px'}}>
        <strong style={{display:'block',fontSize:'12.5px',fontWeight:700,letterSpacing:'0.04em',textTransform:'uppercase',color:'rgb(144 0 255)',marginBottom:'5px'}}>Perceive</strong>
        <p style={{margin:0,fontSize:'12.5px',lineHeight:1.5,color:'rgb(75 85 99)',opacity:0.8}}>A screenshot of the active display is captured and sent to a vision model. Every loop starts fresh — the agent sees the actual current state, not a cached assumption.</p>
      </div>

      <div className="exp-surface-tile" style={{padding:'16px'}}>
        <strong style={{display:'block',fontSize:'12.5px',fontWeight:700,letterSpacing:'0.04em',textTransform:'uppercase',color:'rgb(144 0 255)',marginBottom:'5px'}}>Decide</strong>
        <p style={{margin:0,fontSize:'12.5px',lineHeight:1.5,color:'rgb(75 85 99)',opacity:0.8}}>The vision model interprets the screenshot against your task goal and produces a precise action instruction: click a coordinate, type text, press a key, or call a wait.</p>
      </div>

      <div className="exp-surface-tile" style={{padding:'16px'}}>
        <strong style={{display:'block',fontSize:'12.5px',fontWeight:700,letterSpacing:'0.04em',textTransform:'uppercase',color:'rgb(144 0 255)',marginBottom:'5px'}}>Act</strong>
        <p style={{margin:0,fontSize:'12.5px',lineHeight:1.5,color:'rgb(75 85 99)',opacity:0.8}}>Actionist executes the instruction through OS-level input — the same accessibility APIs a human uses. The screen changes, a new screenshot is captured, and the loop runs again.</p>
      </div>
    </div>
  </div>

  <div className="actionist-tight flex flex-col gap-2 mt-8 mb-4">
    <h2 className="text-2xl md:text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">The API wall is gone.</h2>

    <p className="text-base text-gray-600 dark:text-gray-400 max-w-3xl">
      Every team has tools that resist automation — a vendor portal, an internal dashboard, a multi-step wizard. Computer Use dissolves that wall. If it is visible on screen, it is automatable.
    </p>
  </div>

  <Columns cols={2}>
    <Card title="Before Computer Use" icon="circle-x">
      Legacy desktop apps, sites without APIs, and multi-step web flows stay manual. Every repetitive task costs a human hour. Building a connector takes an engineer.
    </Card>

    <Card title="With Computer Use" icon="circle-check">
      Actionist captures the screen, sends it to a vision model, receives action instructions, and executes them through OS-level input. Describe the goal — the agent handles every click.
    </Card>
  </Columns>

  <Note>
    Computer Use runs on the <strong>macOS desktop app</strong>. The web app shows a desktop-only notice when you attempt to use it.
  </Note>
</div>

<hr className="xc-divider" />

<div className="w-full py-10 xc-rise">
  <div className="actionist-tight flex flex-col gap-2 mb-6">
    <span className="actionist-section-eyebrow">Setup</span>
    <h2 id="grant-permissions" className="text-2xl md:text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">Grant the two required permissions.</h2>

    <p className="text-base text-gray-600 dark:text-gray-400 max-w-3xl">
      Actionist needs <strong>Screen Recording</strong> (to see your screen) and <strong>Accessibility</strong> (to control UI elements). Both must be granted before any automation runs.
    </p>
  </div>

  {/* Ambient permission step strip */}

  <div className="mxp-pipe" style={{margin:'28px 0 10px'}}>
    <div className="mxp-pipe-node"><strong>Red banner</strong><span>appears</span></div>

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

    <div className="mxp-pipe-node"><strong>Permissions</strong><span>Required section</span></div>

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

    <div className="mxp-pipe-node"><strong>Screen Recording</strong><span>grant access</span></div>

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

    <div className="mxp-pipe-node"><strong>Accessibility</strong><span>grant access</span></div>

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

    <div className="mxp-pipe-node"><strong>All systems</strong><span>active</span></div>
  </div>

  <Steps>
    <Step title="Look for the red banner" icon="triangle-alert">
      If either permission is missing, Actionist shows: <em>"Critical system permissions missing. Core app functions are disabled."</em> Click <strong>Fix in Settings</strong>.
    </Step>

    <Step title="Open Permissions Required" icon="shield">
      Settings opens to the <strong>Permissions Required</strong> section. The subtitle reads: <em>"Actionist needs Screen Recording and Accessibility permissions to observe your screen and perform actions."</em>
    </Step>

    <Step title="Grant Screen Recording" icon="monitor">
      Click <strong>Grant access</strong> next to <strong>Screen Recording</strong>. Actionist opens System Settings > Privacy & Security > Screen Recording automatically. Toggle Actionist on. macOS may ask you to restart the app.
    </Step>

    <Step title="Grant Accessibility" icon="mouse-pointer">
      Return to Actionist. Click <strong>Grant access</strong> next to <strong>Accessibility</strong>. Repeat the same System Settings toggle step.
    </Step>

    <Step title="Confirm success" icon="check">
      A toast appears: <em>"Permissions granted! All system features are now active."</em> You are ready to automate.
    </Step>
  </Steps>

  <div className="mt-8">
    {/* TODO(image): permissions-required-settings — IMAGE SPEC: Settings > Permissions Required. Show two permission rows: Screen Recording (description: 'Allows Actionist to see your screen') with a green checkmark in the granted state, and Accessibility (description: 'Allows Actionist to control UI elements') showing its 'Grant access' button. The section subtitle 'Actionist needs Screen Recording and Accessibility permissions to observe your screen and perform actions.' must be legible at the top. — replace this CSS mock with the real screenshot */}

    <div className="mxp-window xcu-mock-permissions">
      <div className="mxp-window-bar">
        <span className="mxp-window-dot" />

        <span className="mxp-window-dot" />

        <span className="mxp-window-dot" />

        <span className="mxp-window-title">Settings — Permissions Required</span>
      </div>

      <div style={{padding:'20px 22px 24px'}}>
        <div style={{fontSize:'16px',fontWeight:650,color:'rgb(17 24 39)',marginBottom:'5px'}}>Permissions Required</div>
        <div style={{fontSize:'12.5px',lineHeight:1.55,color:'rgb(107 114 128)',marginBottom:'18px',maxWidth:'500px'}}>Actionist needs Screen Recording and Accessibility permissions to observe your screen and perform actions.</div>

        <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',gap:'14px',padding:'14px 16px',borderRadius:'10px',border:'1px solid rgb(229 231 235)',background:'rgb(255 255 255)',marginBottom:'10px'}}>
          <div style={{display:'flex',alignItems:'center',gap:'12px',color:'rgb(107 114 128)',minWidth:0}}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <rect x="2" y="3" width="20" height="14" rx="2" />

              <path d="M8 21h8M12 17v4" />
            </svg>

            <div>
              <div style={{fontSize:'13.5px',fontWeight:600,color:'rgb(17 24 39)',marginBottom:'2px'}}>Screen Recording</div>
              <div style={{fontSize:'12px',color:'rgb(107 114 128)',opacity:0.8}}>Allows Actionist to see your screen</div>
            </div>
          </div>

          <span style={{display:'inline-flex',alignItems:'center',gap:'5px',padding:'5px 11px',borderRadius:'999px',fontSize:'11px',fontWeight:600,letterSpacing:'0.04em',textTransform:'uppercase',whiteSpace:'nowrap',flexShrink:0,border:'1px solid rgb(34 197 94 / 0.4)',background:'rgb(34 197 94 / 0.08)',color:'rgb(21 128 61)'}}>
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
              <path d="M20 6 9 17l-5-5" />
            </svg>

            Granted
          </span>
        </div>

        <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',gap:'14px',padding:'14px 16px',borderRadius:'10px',border:'1px solid rgb(229 231 235)',background:'rgb(255 255 255)',marginBottom:'10px'}}>
          <div style={{display:'flex',alignItems:'center',gap:'12px',color:'rgb(107 114 128)',minWidth:0}}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
            </svg>

            <div>
              <div style={{fontSize:'13.5px',fontWeight:600,color:'rgb(17 24 39)',marginBottom:'2px'}}>Accessibility</div>
              <div style={{fontSize:'12px',color:'rgb(107 114 128)',opacity:0.8}}>Allows Actionist to control UI elements</div>
            </div>
          </div>

          <span style={{display:'inline-flex',alignItems:'center',padding:'6px 14px',borderRadius:'8px',fontSize:'12px',fontWeight:600,whiteSpace:'nowrap',flexShrink:0,border:'1px solid rgb(144 0 255 / 0.35)',color:'rgb(124 0 217)',background:'rgb(144 0 255 / 0.07)'}}>Grant access</span>
        </div>
      </div>
    </div>
  </div>

  <Info>
    In chat, if you trigger an automation before permissions are granted, a <strong>Grant Permission</strong> button appears inline in the input area — tapping it opens the same Settings flow described above.
  </Info>
</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">A session, live</span>
    <h2 className="text-2xl md:text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">Watch a task unfold step by step.</h2>

    <p className="text-base text-gray-600 dark:text-gray-400 max-w-3xl">
      Send any task in plain language. Actionist classifies the request, opens a Computer Use session, and starts working. The AI Process panel feeds every step label in real time — you never wonder what the agent is doing.
    </p>
  </div>

  <div className="mxp-window">
    <div className="mxp-window-bar">
      <span className="mxp-window-dot" />

      <span className="mxp-window-dot" />

      <span className="mxp-window-dot" />

      <span className="mxp-window-title">AI Process — session · maya</span>

      <span className="xcu-status-pill running" style={{marginLeft:'auto'}}>
        <span className="xcu-pulse-dot" />

        running
      </span>
    </div>

    <div className="mxp-window-body">
      <div className="mxp-s1"><span className="mxp-stream-event">task received · 09:41:22</span></div>

      <div className="mxp-stream-line mxp-s2">
        <span className="mxp-stream-time">you</span>
        <span className="mxp-stream-text">Open Notion, find my task list, and mark <em>Weekly report</em> as done.</span>
      </div>

      <div className="mxp-s3"><span className="mxp-stream-event">computer use session started</span></div>

      <div className="mxp-stream-line mxp-s4">
        <span className="mxp-stream-time">step 1</span>
        <span className="mxp-stream-text">Opening <em>Safari</em> — bringing window to front.</span>
      </div>

      <div className="mxp-stream-line mxp-s5">
        <span className="mxp-stream-time">step 2</span>
        <span className="mxp-stream-text">Clicking address bar. Typing <em>app.notion.so</em>. Pressing Return.</span>
      </div>

      <div className="mxp-stream-line mxp-s6">
        <span className="mxp-stream-time">step 3</span>

        <span className="mxp-stream-text">
          <span className="xcu-status-pill wait" style={{marginRight:'7px'}}>
            <span className="xcu-pulse-dot amber" />

            waiting
          </span>

          Intelligent wait — page loading. Holding for content to settle.
        </span>
      </div>

      <div className="mxp-stream-line mxp-s7">
        <span className="mxp-stream-time">step 4</span>
        <span className="mxp-stream-text">Navigating to <em>My Tasks</em> in left sidebar. Clicking.</span>
      </div>

      <div className="mxp-stream-line mxp-s8">
        <span className="mxp-stream-time">step 5</span>
        <span className="mxp-stream-text">Scanning task list. Found <em>Weekly report</em> — row 7.</span>
      </div>

      <div className="mxp-stream-line mxp-s9">
        <span className="mxp-stream-time">step 6</span>
        <span className="mxp-stream-text">Clicking checkbox next to <em>Weekly report</em>.</span>
      </div>

      <div className="mxp-stream-line mxp-s10">
        <span className="mxp-stream-time">step 7</span>
        <span className="mxp-stream-text">Confirming check state — item marked complete.</span>
      </div>

      <div className="xcu-s11"><span className="mxp-stream-event">session complete · 09:41:51</span></div>

      <div className="mxp-stream-line xcu-s12">
        <span className="mxp-stream-time">maya</span>

        <span className="mxp-stream-text">
          <span className="xcu-status-pill done" style={{marginRight:'7px'}}>
            <span className="xcu-pulse-dot green" />

            done
          </span>

          Done. <em>Weekly report</em> is checked off in your Notion task list.<span className="mxp-caret" />
        </span>
      </div>
    </div>
  </div>

  <div className="exp-surface-grid" style={{marginTop:'22px'}}>
    <div className="exp-surface-tile">
      <strong>Input locked while running.</strong> The chat input shows <em>"Automation in progress..."</em> and is non-interactive. A Stop button is the only control — preventing accidental overlap with new tasks.
    </div>

    <div className="exp-surface-tile">
      <strong>Intelligent waits.</strong> Actionist inserts automatic pauses after navigation, form submissions, and search requests. These let the page settle — they are not lag, they are deliberate pacing.
    </div>

    <div className="exp-surface-tile">
      <strong>One task at a time.</strong> Only one Computer Use session can run simultaneously. If you send a new task while one is running, it will fail. Click Stop first.
    </div>
  </div>

  <Steps>
    <Step title="Open an agent's chat" icon="message-square">
      Select any agent from the chat selector. Make sure it has <strong>Screen Automation (Actionist)</strong> enabled on its Tools tab.
    </Step>

    <Step title="Describe the task" icon="pencil">
      Type what you want — for example: <em>"Open Safari, go to app.notion.so, find my task list, and mark the item called 'Weekly report' as done."</em>
    </Step>

    <Step title="Watch it work" icon="eye">
      The input area shows <em>"Automation in progress..."</em> and is non-interactive while the session runs. Open the <strong>AI Process</strong> tab in the right sidebar to see a live feed of every step the agent takes.
    </Step>

    <Step title="Receive the result" icon="circle-check">
      When the task is complete, the agent sends a message and the input area returns to normal. The AI Process tab keeps the full step history for review.
    </Step>
  </Steps>

  <div className="mt-8">
    {/* TODO(image): automation-in-progress-chat — IMAGE SPEC: Chat window mid-automation. The input area shows 'Automation in progress...' as placeholder text. The right sidebar 'AI Process' tab is active, displaying 3–4 recent step labels such as 'Opening Safari', 'Clicking address bar', and 'Typing URL'. The chat messages above show the user's original task and the agent's starting acknowledgment message. — replace this CSS mock with the real screenshot */}

    <div className="mxp-window xcu-mock-inprogress">
      <div className="mxp-window-bar">
        <span className="mxp-window-dot" />

        <span className="mxp-window-dot" />

        <span className="mxp-window-dot" />

        <span className="mxp-window-title">chat · maya</span>

        <span className="xcu-status-pill running" style={{marginLeft:'auto',fontSize:'9.5px'}}>
          <span className="xcu-pulse-dot" />running
        </span>
      </div>

      <div className="xcu-mock-split">
        <div className="xcu-mock-chat-col">
          <div className="xcu-bubble user" style={{marginBottom:'10px'}}>
            <div className="xcu-bubble-avatar user-av">S</div>
            <div className="xcu-bubble-body">Open Safari, find my Notion task list, and mark Weekly report as done.</div>
          </div>

          <div className="xcu-bubble agent">
            <div className="xcu-bubble-avatar">M</div>
            <div className="xcu-bubble-body">On it — opening Safari now.</div>
          </div>

          <div className="xcu-mock-input-locked">
            <span>Automation in progress...</span>

            <span className="xcu-input-btn stop" style={{fontSize:'10px',padding:'4px 10px'}}>
              <svg width="8" height="8" viewBox="0 0 24 24" fill="currentColor">
                <rect x="3" y="3" width="18" height="18" rx="2" />
              </svg>

              Stop
            </span>
          </div>
        </div>

        <div className="xcu-mock-process-col">
          <div className="xcu-mock-process-header">AI Process</div>
          <div className="xcu-mock-process-row xcu-mock-pr-done">Opening Safari</div>
          <div className="xcu-mock-process-row xcu-mock-pr-done">Clicking address bar</div>
          <div className="xcu-mock-process-row xcu-mock-pr-active">Typing app.notion.so<span className="mxp-caret" style={{width:'5px',height:'11px'}} /></div>

          <div className="xcu-mock-process-row xcu-mock-pr-wait">
            <span className="xcu-pulse-dot amber" style={{width:'6px',height:'6px'}} />

            Waiting for page
          </div>
        </div>
      </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-6">
    <span className="actionist-section-eyebrow">Safe by design</span>
    <h2 className="text-2xl md:text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">Passwords and payment info.</h2>

    <p className="text-base text-gray-600 dark:text-gray-400 max-w-3xl">
      Actionist's agent is explicitly instructed never to proceed autonomously when it encounters a password field, payment form, or ambiguous choice. It stops and asks you instead. Delegation stays safe.
    </p>
  </div>

  <div className="xcu-gate exp-tool-shell xc-try">
    <div className="mxp-srch-chips" style={{marginBottom:'18px'}}>
      <label htmlFor="xgr"><input className="mxp-r" type="radio" name="xcu-gp" id="xgr" defaultChecked />Running normally</label>
      <label htmlFor="xgp"><input className="mxp-r" type="radio" name="xcu-gp" id="xgp" />Password field encountered</label>
      <label htmlFor="xgs"><input className="mxp-r" type="radio" name="xcu-gp" id="xgs" />After you reply</label>
    </div>

    {/* Panel A — running normally */}

    <div className="xcu-gate-panel xcu-pr">
      <div className="mxp-window">
        <div className="mxp-window-bar">
          <span className="mxp-window-dot" />

          <span className="mxp-window-dot" />

          <span className="mxp-window-dot" />

          <span className="mxp-window-title">chat · maya</span>

          <span className="xcu-status-pill running" style={{marginLeft:'auto'}}>
            <span className="xcu-pulse-dot" />running
          </span>
        </div>

        <div className="xcu-chat">
          <div className="xcu-bubble user">
            <div className="xcu-bubble-avatar user-av">S</div>
            <div className="xcu-bubble-body">Log in to the vendor portal and download the latest invoice.</div>
          </div>

          <div className="xcu-bubble agent">
            <div className="xcu-bubble-avatar">M</div>
            <div className="xcu-bubble-body">On it. Opening the vendor portal now.</div>
          </div>
        </div>

        <div className="xcu-input-bar">
          <span className="xcu-input-placeholder">Automation in progress...</span>

          <span className="xcu-input-btn stop">
            <svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor">
              <rect x="3" y="3" width="18" height="18" rx="2" />
            </svg>

            Stop
          </span>
        </div>
      </div>
    </div>

    {/* Panel B — password gate */}

    <div className="xcu-gate-panel xcu-pp">
      <div className="mxp-window">
        <div className="mxp-window-bar">
          <span className="mxp-window-dot" />

          <span className="mxp-window-dot" />

          <span className="mxp-window-dot" />

          <span className="mxp-window-title">chat · maya</span>

          <span className="xcu-status-pill wait" style={{marginLeft:'auto'}}>
            <span className="xcu-pulse-dot amber" />waiting
          </span>
        </div>

        <div className="xcu-chat">
          <div className="xcu-bubble user">
            <div className="xcu-bubble-avatar user-av">S</div>
            <div className="xcu-bubble-body">Log in to the vendor portal and download the latest invoice.</div>
          </div>

          <div className="xcu-bubble agent">
            <div className="xcu-bubble-avatar">M</div>
            <div className="xcu-bubble-body">On it. Opening the vendor portal now.</div>
          </div>

          <div className="xcu-bubble agent">
            <div className="xcu-bubble-avatar">M</div>

            <div className="xcu-bubble-body">
              Please enter your login password for <strong>vendor.example.com</strong> to continue.
            </div>
          </div>

          <div className="xcu-wait-card">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#FFAF24" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <circle cx="12" cy="12" r="10" />

              <path d="M12 8v4M12 16h.01" />
            </svg>

            <span style={{color:'#FFAF24',fontWeight:600}}>Waiting for your input.</span>
          </div>
        </div>

        <div className="xcu-input-bar">
          <span className="xcu-input-placeholder">Reply to continue...</span>

          <span className="xcu-input-btn send">
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
              <path d="m5 12 14 0" />

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

            Send
          </span>
        </div>
      </div>

      <p style={{fontSize:'13px',opacity:0.65,marginTop:'10px'}}>The AI Process feed is frozen. No further tool calls run until you reply. No credential is ever sent to the model — your reply goes directly to the session continuation.</p>
    </div>

    {/* Panel C — resumed */}

    <div className="xcu-gate-panel xcu-ps">
      <div className="mxp-window">
        <div className="mxp-window-bar">
          <span className="mxp-window-dot" />

          <span className="mxp-window-dot" />

          <span className="mxp-window-dot" />

          <span className="mxp-window-title">chat · maya</span>

          <span className="xcu-status-pill done" style={{marginLeft:'auto'}}>
            <span className="xcu-pulse-dot green" />done
          </span>
        </div>

        <div className="xcu-chat">
          <div className="xcu-bubble agent">
            <div className="xcu-bubble-avatar">M</div>
            <div className="xcu-bubble-body">Please enter your login password for <strong>vendor.example.com</strong> to continue.</div>
          </div>

          <div className="xcu-bubble user">
            <div className="xcu-bubble-avatar user-av">S</div>
            <div className="xcu-bubble-body" style={{fontStyle:'italic',opacity:0.6}}>●●●●●●●●</div>
          </div>

          <div className="xcu-bubble agent">
            <div className="xcu-bubble-avatar">M</div>
            <div className="xcu-bubble-body">Logged in. Navigating to invoices. Found the latest — <strong>INV-2041</strong>. Downloading now.<span className="mxp-caret" /></div>
          </div>
        </div>

        <div className="xcu-input-bar">
          <span className="xcu-input-placeholder">Message Maya...</span>

          <span className="xcu-input-btn send">
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
              <path d="m5 12 14 0" />

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

            Send
          </span>
        </div>
      </div>

      <p style={{fontSize:'13px',opacity:0.65,marginTop:'10px'}}>The session resumes from exactly where it paused — no context lost. The agent uses your reply for the current field and continues the task.</p>
    </div>
  </div>

  <Steps>
    <Step title="Agent reaches a credential or payment field" icon="lock">
      The Computer Use session pauses. No tool call is made — the agent sends a text-only question in chat, for example: <em>"Please enter your password for app.notion.so"</em>.
    </Step>

    <Step title="Input area changes to 'Reply to continue...'" icon="message-circle">
      The input placeholder changes to <em>"Reply to continue..."</em> and a card in the chat shows <em>"Waiting for your input."</em> The AI Process feed is frozen.
    </Step>

    <Step title="Type your answer and press Enter" icon="keyboard">
      Type the credential or your choice and press Enter. The response is queued for the agent's next turn.
    </Step>

    <Step title="Agent proceeds" icon="arrow-right">
      The session resumes automatically. The agent uses the input for the current field and continues the task.
    </Step>
  </Steps>

  <div className="mt-6">
    {/* TODO(image): password-gate-card — IMAGE SPEC: Chat window paused for credential input. A card in the chat body reads 'Waiting for your input' with the agent's question below it (example: 'Please enter your login password for app.notion.so'). The input area placeholder reads 'Reply to continue...'. Chat messages above show the in-progress task context. — replace this CSS mock with the real screenshot */}

    <div className="mxp-window xcu-mock-gate">
      <div className="mxp-window-bar">
        <span className="mxp-window-dot" />

        <span className="mxp-window-dot" />

        <span className="mxp-window-dot" />

        <span className="mxp-window-title">chat · maya</span>

        <span className="xcu-status-pill wait" style={{marginLeft:'auto',fontSize:'9.5px'}}>
          <span className="xcu-pulse-dot amber" />waiting
        </span>
      </div>

      <div style={{padding:'16px 18px'}}>
        <div className="xcu-bubble agent" style={{marginBottom:'10px'}}>
          <div className="xcu-bubble-avatar">M</div>
          <div className="xcu-bubble-body">Log in to the vendor portal and download the latest invoice.</div>
        </div>

        <div className="xcu-bubble agent" style={{marginBottom:'10px'}}>
          <div className="xcu-bubble-avatar">M</div>
          <div className="xcu-bubble-body">Please enter your login password for <strong>vendor.example.com</strong> to continue.</div>
        </div>

        <div className="xcu-wait-card" style={{marginLeft:0,marginBottom:'12px'}}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#FFAF24" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <circle cx="12" cy="12" r="10" />

            <path d="M12 8v4M12 16h.01" />
          </svg>

          <span style={{color:'#FFAF24',fontWeight:600}}>Waiting for your input.</span>
        </div>
      </div>

      <div className="xcu-input-bar" style={{borderRadius:'0 0 14px 14px'}}>
        <span className="xcu-input-placeholder">Reply to continue...</span>

        <span className="xcu-input-btn send">
          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
            <path d="m5 12 14 0" />

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

          Send
        </span>
      </div>
    </div>
  </div>

  <Danger>
    Never include passwords, API keys, or payment card numbers in the task description itself. The agent is designed to stop and ask — let it. Putting credentials in the task message is unsafe and unnecessary.
  </Danger>
</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">Session controls</span>
    <h2 className="text-2xl md:text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">Control an automation in progress.</h2>

    <p className="text-base text-gray-600 dark:text-gray-400 max-w-3xl">
      While <em>"Automation in progress..."</em> is shown, the chat input area gives you a live stop control — and the agent itself will pause and ask whenever it needs you.
    </p>
  </div>

  <Tabs>
    <Tab title="Stop" icon="square">
      Clicking the <strong>Stop</strong> button in the chat input area cancels the in-flight API request immediately, then exits the loop. The input area shows <em>"Stopping..."</em> and then <em>"Stopping automation..."</em> while teardown completes. After teardown, the session closes and the input area returns to normal.

      Use Stop when you want to redirect the task or start a completely different one.
    </Tab>

    <Tab title="Agent-initiated pauses" icon="message-circle">
      The agent pauses itself whenever it needs your input — a password field, a payment form, or a genuinely ambiguous decision. It sends a text-only question in chat and waits. Reply in the input area and the session continues from exactly where it stopped, with no context lost.
    </Tab>
  </Tabs>

  <div className="mt-8">
    {/* TODO(image): stop-control — IMAGE SPEC: Chat interface during an active Computer Use session showing the Stop button in the chat input area. The input area placeholder reads 'Automation in progress...'. The AI Process tab is visible in the right sidebar showing recent step labels. — replace this CSS mock with the real screenshot */}

    <div className="mxp-window xcu-mock-stop">
      <div className="mxp-window-bar">
        <span className="mxp-window-dot" />

        <span className="mxp-window-dot" />

        <span className="mxp-window-dot" />

        <span className="mxp-window-title">chat · maya</span>

        <span className="xcu-status-pill running" style={{marginLeft:'auto',fontSize:'9.5px'}}>
          <span className="xcu-pulse-dot" />running
        </span>
      </div>

      <div className="xcu-mock-split">
        <div className="xcu-mock-chat-col">
          <div className="xcu-bubble user" style={{marginBottom:'10px'}}>
            <div className="xcu-bubble-avatar user-av">S</div>
            <div className="xcu-bubble-body">Open the vendor portal and export the Q2 report.</div>
          </div>

          <div className="xcu-bubble agent">
            <div className="xcu-bubble-avatar">M</div>
            <div className="xcu-bubble-body">On it. Navigating to the vendor portal now.</div>
          </div>

          <div className="xcu-mock-input-locked">
            <span>Automation in progress...</span>

            <span className="xcu-input-btn stop" style={{fontSize:'10px',padding:'4px 10px'}}>
              <svg width="8" height="8" viewBox="0 0 24 24" fill="currentColor">
                <rect x="3" y="3" width="18" height="18" rx="2" />
              </svg>

              Stop
            </span>
          </div>
        </div>

        <div className="xcu-mock-process-col">
          <div className="xcu-mock-process-header">AI Process</div>
          <div className="xcu-mock-process-row xcu-mock-pr-done">Opening Safari</div>
          <div className="xcu-mock-process-row xcu-mock-pr-done">Navigating to portal</div>
          <div className="xcu-mock-process-row xcu-mock-pr-active">Locating export button<span className="mxp-caret" style={{width:'5px',height:'11px'}} /></div>
        </div>
      </div>
    </div>
  </div>

  <Warning>
    Only one Computer Use task can run at a time. If you send a new task while one is already running, it will fail. Click <strong>Stop</strong> to end the current session before starting another.
  </Warning>
</div>

<hr className="xc-divider" />

<div className="w-full py-10 xc-rise">
  <div className="actionist-tight flex flex-col gap-2 mb-6">
    <span className="actionist-section-eyebrow">Real-world use</span>
    <h2 className="text-2xl md:text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">Where the API wall used to stop you.</h2>

    <p className="text-base text-gray-600 dark:text-gray-400 max-w-3xl">
      Every team has a handful of portals and tools that resist automation — no API, no integration, just a browser and a grind. Computer Use dissolves that wall in plain language.
    </p>
  </div>

  {/* --- Before / After: vendor portal data entry --- */}

  <div className="xc-ba">
    <div className="xc-ba-col before">
      <div className="xc-ba-tag">Before — manual entry</div>
      <div className="xc-ba-item"><span className="tm">09:05</span>Open vendor portal in browser</div>
      <div className="xc-ba-item"><span className="tm">09:07</span>Log in, navigate to New Submission</div>
      <div className="xc-ba-item"><span className="tm">09:09</span>Copy invoice number from spreadsheet</div>
      <div className="xc-ba-item"><span className="tm">09:12</span>Paste into 14 individual form fields</div>
      <div className="xc-ba-item"><span className="tm">09:19</span>Attach PDF, scroll to confirm checkboxes</div>
      <div className="xc-ba-item"><span className="tm">09:23</span>Submit — wait for confirmation screen</div>
      <div className="xc-ba-item"><span className="tm">09:25</span>Screenshot confirmation, paste into Slack</div>
    </div>

    <div className="xc-ba-col after">
      <div className="xc-ba-tag">After — one sentence to CUA</div>
      <div className="xc-ba-item">Describe the task once in plain language</div>
      <div className="xc-ba-item">Agent opens the portal, logs in, fills every field</div>
      <div className="xc-ba-item">Attaches the PDF from your Downloads folder</div>
      <div className="xc-ba-item">Confirms all checkboxes, submits the form</div>
      <div className="xc-ba-item">Returns a confirmation number in chat</div>
      <div className="xc-ba-item" style={{opacity:0.55,fontStyle:'italic'}}>saves \~18 min per submission</div>
    </div>
  </div>

  <p className="text-sm text-gray-500 dark:text-gray-500 max-w-xl mt-5">
    The pattern works for any portal — here is what the same flow looks like over a phone-style channel.
  </p>

  {/* --- Phone vignette: Lena posts a job to a no-API board --- */}

  <div style={{marginTop:'20px'}}>
    <div className="xc-phone">
      <div className="xc-phone-head">
        <div className="xc-phone-ava" style={{background:'linear-gradient(135deg,#C800B3,#FF0068)'}}>L</div>

        <div>
          <strong>Lena</strong>
          <span className="handle">@lena\_actionist\_bot</span>
        </div>

        <span className="xc-phone-online">ONLINE</span>
      </div>

      <div className="xc-phone-body">
        <div className="xc-bub me">
          Post the Senior Backend Engineer role to Northwind Careers. Title: Senior Backend Engineer. Team: Platform. Location: Remote — EU. Use the standard JD from the shared doc.
          <span className="t">10:14</span>
        </div>

        <div className="xc-phone-badge">TOOL · SCREEN\_AUTOMATION</div>

        <div className="xc-bub them">
          Got it. Opening Northwind Careers portal now. I will navigate to Post a Job, fill in the title, team, location, and paste the JD. I will pause if a login or confirmation step needs you.
          <span className="t">10:14</span>
        </div>

        <div className="xc-phone-badge">SEEN · READING CONTEXT</div>

        <div className="xc-bub them">
          Done. The listing is live. Here is the confirmation:
          <span className="t">10:17</span>
        </div>

        <div className="xc-phone-card">
          <div className="xc-phone-card-body">
            <strong>Senior Backend Engineer posted</strong>
            <span>Northwind Careers · Ref NW-2041 · Remote EU · Active</span>
          </div>

          <div className="xc-phone-actions">
            <span style={{color:'#9b45ff'}}>View listing</span>
            <span style={{color:'#FB6962'}}>Take down</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <p className="text-sm text-gray-500 dark:text-gray-500 max-w-xl mt-5">
    The Northwind Careers portal has no public API. The agent navigates it the same way Lena would — opening the browser, clicking through the form, and pasting the job description — in about 3 minutes instead of 15.
  </p>
</div>

<hr className="xc-divider" />

<div className="w-full py-10 xc-rise">
  <div className="actionist-tight flex flex-col gap-2 mb-6">
    <span className="actionist-section-eyebrow">Best practices</span>
    <h2 className="text-2xl md:text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">Writing tasks that work.</h2>

    <p className="text-base text-gray-600 dark:text-gray-400 max-w-3xl">
      Computer Use interprets your intent from plain language. A few habits make the difference between a task that completes in one shot and one that needs redirecting.
    </p>
  </div>

  <AccordionGroup>
    <Accordion title="Name the target app explicitly" icon="monitor" defaultOpen={true}>
      Say <em>"Open Safari, go to..."</em> rather than just <em>"go to..."</em>. The agent sees the entire screen and needs to know which window or app to bring forward. Naming the app removes ambiguity at the first step, where mistakes compound.
    </Accordion>

    <Accordion title="Describe the goal, not every click" icon="target">
      Write what you want the result to be, not a step-by-step click script. <em>"Mark 'Weekly report' as done in my Notion task list"</em> is better than <em>"click the checkbox next to the third row."</em> The agent plans the clicks — you set the destination.
    </Accordion>

    <Accordion title="Use chat for one-offs; use workflows for recurring tasks" icon="repeat">
      A chat message is the fastest path to a single automation run. For tasks you repeat daily — morning triage, end-of-day reports, status updates — put the same task description in a workflow node and schedule it. Workflow nodes are reviewable, editable, and schedulable; a chat session is ephemeral.
    </Accordion>

    <Accordion title="Minimize the Actionist window, do not close it" icon="minimize-2">
      The agent minimizes Actionist automatically if the chat window is obstructing its target area. Closing Actionist while an automation is running terminates the session immediately. Keep the app running in the background.
    </Accordion>

    <Accordion title="Expect short pauses after key actions — this is intentional" icon="timer">
      Actionist inserts automatic waits after navigation, form submissions, and search requests. These pauses let the page settle before the next action fires. They are not lag — they are deliberate pacing that prevents the agent from acting on a partially-loaded screen.
    </Accordion>

    <Accordion title="Check the AI Process panel if the agent appears stuck" icon="activity">
      The <strong>AI Process</strong> tab in the right sidebar shows a live feed of every step label. If a session seems frozen, open this panel to see the last action the agent attempted — it tells you exactly what happened before the pause.
    </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">Agent configuration</span>
    <h2 className="text-2xl md:text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">Enabling screen automation on an agent.</h2>

    <p className="text-base text-gray-600 dark:text-gray-400 max-w-3xl">
      Screen automation is a built-in agent tool. It is scoped per agent so you can restrict which of your agents can operate the screen.
    </p>
  </div>

  <div className="mxs-limits" style={{gridTemplateColumns:'repeat(auto-fit,minmax(180px,1fr))'}}>
    <div className="mxs-limit" style={{padding:'18px 20px',borderTopWidth:'3px',borderTopColor:'#9000FF'}}>
      <b>Built-in</b>
      <span>Screen Automation (Actionist) ships as a first-party tool — no install, no connector.</span>
    </div>

    <div className="mxs-limit" style={{padding:'18px 20px',borderTopWidth:'3px',borderTopColor:'#9000FF'}}>
      <b>Per-agent</b>
      <span>Toggle it independently on each agent's Tools tab. Off by default for pure data-processing agents.</span>
    </div>

    <div className="mxs-limit" style={{padding:'18px 20px',borderTopWidth:'3px',borderTopColor:'#9000FF'}}>
      <b>Approval-aware</b>
      <span>Respects the agent's approval mode. "Guarded auto" or lower still prompts on sensitive screen actions.</span>
    </div>
  </div>

  <Columns cols={2}>
    <Card title="The tool" icon="mouse-pointer-2">
      <Badge color="purple" size="sm">Built-in</Badge>
      <p className="mt-3">The tool is named <strong>Screen Automation (Actionist)</strong> and described as <em>"Click, type, navigate via CUA."</em> Toggle it on the agent's <strong>Tools</strong> tab in the studio.</p>
    </Card>

    <Card title="Scoping" icon="shield-check">
      Turn the tool off for agents that should never touch the screen — a pure data-processing agent or a Slack bot, for example. An agent without this tool cannot initiate a Computer Use session even if asked.
    </Card>
  </Columns>

  <Note>
    The <strong>Screen Automation (Actionist)</strong> tool respects the agent's approval mode. With approval mode set to "Guarded auto" or lower, sensitive screen actions will still prompt for your confirmation.
  </Note>
</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">Under the hood</span>
    <h2 className="text-2xl md:text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">From task to result in four stops.</h2>
  </div>

  <div className="mxp-pipe">
    <div className="mxp-pipe-node">
      <strong>Task message</strong>
      <span>Plain-language goal sent to the agent in chat or from a workflow node.</span>
    </div>

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

    <div className="mxp-pipe-node">
      <strong>Session open</strong>
      <span>Agent invokes Screen Automation (Actionist). Input locks. AI Process feed begins.</span>
    </div>

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

    <div className="mxp-pipe-node">
      <strong>Perceive–Decide–Act loop</strong>
      <span>Screenshot → vision model → action → repeat, until goal is met or agent pauses.</span>
    </div>

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

    <div className="mxp-pipe-node">
      <strong>Result message</strong>
      <span>Agent sends a completion message. Session closes. Input unlocks. Full history in AI Process.</span>
    </div>
  </div>
</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">One sentence away</span>

      <h2 className="text-2xl md:text-3xl font-semibold tracking-tight text-white leading-tight">
        Your first screen-automation task is waiting.
      </h2>

      <p className="text-base md:text-lg text-white/85">
        Grant the permissions, describe the goal, and watch Actionist handle every click. No script, no connector, no extension.
      </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 xc-rise">
  <p className="actionist-trust-line">
    The agent stops and asks before it ever touches a password or payment field.<br />
    Built-in safety gates · Live step feed · You stay in control.
  </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 which agents have Screen Automation enabled on their Tools tab.
    </Card>

    <Card title="Workflows" icon="git-merge" href="/Folders/workflows">
      Wrap a Computer Use task in a workflow node to make it reviewable and schedulable.
    </Card>

    <Card title="Schedules" icon="calendar-clock" href="/Folders/schedules">
      Schedule a CUA-backed workflow to run every morning without being asked.
    </Card>

    <Card title="Credentials" icon="key" href="/Folders/credentials">
      Store credentials in the vault so sensitive workflows stay safe and organized.
    </Card>
  </Columns>
</div>
