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

# Settings

> Configure language, billing, credentials, headless runtime, Pip, and macOS permissions — all in one place.

<div className="mxp-hero xc-border">
  <div className="exp-eyebrow mxp-rise">ONE PLACE FOR EVERYTHING</div>

  <h2 className="mxp-hero-title mxp-rise" style={{animationDelay:'0.06s'}}>
    Configure it once. <span style={{background:'linear-gradient(90deg,#24A4FF,#9000FF,#E3008E)',WebkitBackgroundClip:'text',backgroundClip:'text',color:'transparent'}}>Every agent picks it up.</span>
  </h2>

  <p className="mxp-hero-dek mxp-rise" style={{animationDelay:'0.13s'}}>
    Language, billing, encrypted credentials, headless runtime, and your assistant preferences — no hunting across menus. Change anything here, and every agent picks it up immediately.
  </p>
</div>

<div className="w-full py-6">
  {/* TODO(image): settings-overview — IMAGE SPEC: Full Settings page scroll capture. All section cards visible in order: Language, Billing (admin), Credentials Vault, Headless Runtime, Help Assistant, Permissions Required. The sticky version footer with the 'Check for Updates' button must be visible at the very bottom. Dark background, card-grid layout, gradient icon medallions on each section header. — replace this CSS mock with the real screenshot */}

  <div className="mxp-window" style={{marginTop:'16px'}} aria-label="Settings page overview illustration">
    <div className="mxp-window-bar" style={{padding:'10px 16px'}}>
      <span style={{width:10,height:10,borderRadius:'50%',background:'#FF5F57',flex:'none',display:'inline-block'}} />

      <span style={{width:10,height:10,borderRadius:'50%',background:'#FFBD2E',flex:'none',display:'inline-block'}} />

      <span style={{width:10,height:10,borderRadius:'50%',background:'#28C840',flex:'none',display:'inline-block'}} />

      <span style={{flex:1,textAlign:'center',fontSize:11.5,fontWeight:500,opacity:0.6,letterSpacing:'0.02em',fontFamily:'"JetBrains Mono",monospace'}}>Actionist — Settings</span>
    </div>

    <div style={{display:'flex',minHeight:280}}>
      <div style={{width:120,flexShrink:0,borderRight:'1px solid var(--default-border-color)',background:'rgb(244 244 246)',padding:'12px 8px',display:'flex',flexDirection:'column',gap:3}}>
        <div style={{fontSize:12,fontWeight:600,padding:'7px 10px',borderRadius:7,background:'rgb(144 0 255 / 0.12)',color:'rgb(144 0 255)',cursor:'default'}}>Settings</div>
        <div style={{fontSize:12,fontWeight:500,padding:'7px 10px',borderRadius:7,color:'rgb(80 80 90)',cursor:'default'}}>Agents</div>
        <div style={{fontSize:12,fontWeight:500,padding:'7px 10px',borderRadius:7,color:'rgb(80 80 90)',cursor:'default'}}>Apps</div>
        <div style={{fontSize:12,fontWeight:500,padding:'7px 10px',borderRadius:7,color:'rgb(80 80 90)',cursor:'default'}}>Billing</div>
      </div>

      <div style={{flex:1,padding:'14px 16px',display:'flex',flexDirection:'column',gap:8,overflow:'hidden'}}>
        <div style={{display:'flex',alignItems:'center',gap:12,padding:'10px 12px',borderRadius:10,border:'1px solid var(--default-border-color)',background:'rgb(255 255 255)'}}>
          <div style={{width:30,height:30,borderRadius:8,display:'grid',placeItems:'center',fontSize:14,flexShrink:0,background:'rgb(144 0 255 / 0.14)'}}>🌐</div>
          <div style={{flex:1,minWidth:0}}><div style={{fontSize:12.5,fontWeight:600}}>Language</div><div style={{fontSize:11,opacity:0.5,marginTop:1,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>English (US) — 22 locales available</div></div>
          <span className="xst-badge purple" style={{fontSize:'9px',padding:'2px 8px'}}>All users</span>
        </div>

        <div style={{display:'flex',alignItems:'center',gap:12,padding:'10px 12px',borderRadius:10,border:'1px solid var(--default-border-color)',background:'rgb(255 255 255)'}}>
          <div style={{width:30,height:30,borderRadius:8,display:'grid',placeItems:'center',fontSize:14,flexShrink:0,background:'rgb(245 158 11 / 0.14)'}}>💵</div>
          <div style={{flex:1,minWidth:0}}><div style={{fontSize:12.5,fontWeight:600}}>Billing</div><div style={{fontSize:11,opacity:0.5,marginTop:1,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>Pro plan · 5 seats · Active</div></div>
          <span className="xst-badge amber" style={{fontSize:'9px',padding:'2px 8px'}}>Admin only</span>
        </div>

        <div style={{display:'flex',alignItems:'center',gap:12,padding:'10px 12px',borderRadius:10,border:'1px solid var(--default-border-color)',background:'rgb(255 255 255)'}}>
          <div style={{width:30,height:30,borderRadius:8,display:'grid',placeItems:'center',fontSize:14,flexShrink:0,background:'rgb(72 110 255 / 0.14)'}}>🔒</div>
          <div style={{flex:1,minWidth:0}}><div style={{fontSize:12.5,fontWeight:600}}>Credentials Vault</div><div style={{fontSize:11,opacity:0.5,marginTop:1,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>3 credentials · All active</div></div>
          <span className="xst-badge gray" style={{fontSize:'9px',padding:'2px 8px'}}>Hidden in delegated</span>
        </div>

        <div style={{display:'flex',alignItems:'center',gap:12,padding:'10px 12px',borderRadius:10,border:'1px solid var(--default-border-color)',background:'rgb(255 255 255)'}}>
          <div style={{width:30,height:30,borderRadius:8,display:'grid',placeItems:'center',fontSize:14,flexShrink:0,background:'rgb(34 197 94 / 0.14)'}}>🖥️</div>
          <div style={{flex:1,minWidth:0}}><div style={{fontSize:12.5,fontWeight:600}}>Headless Runtime</div><div style={{fontSize:11,opacity:0.5,marginTop:1,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>Deploy to VPS · Running</div></div>
          <span className="xst-badge platform" style={{fontSize:'9px',padding:'2px 8px'}}>Desktop only</span>
        </div>

        <div style={{display:'flex',alignItems:'center',gap:12,padding:'10px 12px',borderRadius:10,border:'1px solid var(--default-border-color)',background:'rgb(255 255 255)'}}>
          <div style={{width:30,height:30,borderRadius:8,display:'grid',placeItems:'center',fontSize:14,flexShrink:0,background:'rgb(144 0 255 / 0.14)'}}>⚡</div>
          <div style={{flex:1,minWidth:0}}><div style={{fontSize:12.5,fontWeight:600}}>Help Assistant (Pip)</div><div style={{fontSize:11,opacity:0.5,marginTop:1,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>Calm mode on · Nudges off</div></div>
          <span className="xst-badge purple" style={{fontSize:'9px',padding:'2px 8px'}}>All users</span>
        </div>

        <div style={{display:'flex',alignItems:'center',gap:12,padding:'10px 12px',borderRadius:10,border:'1px solid var(--default-border-color)',background:'rgb(255 255 255)'}}>
          <div style={{width:30,height:30,borderRadius:8,display:'grid',placeItems:'center',fontSize:14,flexShrink:0,background:'rgb(72 110 255 / 0.14)'}}>🖥️</div>
          <div style={{flex:1,minWidth:0}}><div style={{fontSize:12.5,fontWeight:600}}>Permissions Required</div><div style={{fontSize:11,opacity:0.5,marginTop:1,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>Screen Recording · Accessibility</div></div>
          <span className="xst-badge platform" style={{fontSize:'9px',padding:'2px 8px'}}>macOS only</span>
        </div>

        <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',padding:'9px 12px',borderRadius:9,border:'1px solid var(--default-border-color)',background:'rgb(248 248 250)',marginTop:2}}>
          <span style={{fontFamily:'"JetBrains Mono",monospace',fontSize:11,opacity:0.55}}>v2.4.1</span>
          <span style={{fontSize:11,fontWeight:600,color:'rgb(var(--actionist-purple))',cursor:'default',padding:'4px 10px',borderRadius:6,background:'rgb(var(--actionist-purple) / 0.1)',border:'1px solid rgb(var(--actionist-purple) / 0.2)'}}>Check for Updates</span>
        </div>
      </div>
    </div>
  </div>
</div>

<div className="w-full py-10">
  <div className="actionist-tight flex flex-col gap-2 mb-6">
    <span className="actionist-section-eyebrow">The map</span>
    <h2 className="text-2xl md:text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">Seven sections, one scroll.</h2>

    <p className="text-base text-gray-600 dark:text-gray-400 max-w-3xl">
      The Settings page is a single card-grid scroll. Select a section to see its key rows, access badges, and platform notes.
    </p>
  </div>

  <div className="xst-map exp-tool-shell xc-try">
    <div className="mxp-srch-chips">
      <label htmlFor="xst-sec-lang"><input className="mxp-r" type="radio" name="xst-sec" id="xst-sec-lang" defaultChecked />Language</label>
      <label htmlFor="xst-sec-bill"><input className="mxp-r" type="radio" name="xst-sec" id="xst-sec-bill" />Billing</label>
      <label htmlFor="xst-sec-vault"><input className="mxp-r" type="radio" name="xst-sec" id="xst-sec-vault" />Credentials Vault</label>
      <label htmlFor="xst-sec-runtime"><input className="mxp-r" type="radio" name="xst-sec" id="xst-sec-runtime" />Headless Runtime</label>
      <label htmlFor="xst-sec-help"><input className="mxp-r" type="radio" name="xst-sec" id="xst-sec-help" />Help Assistant</label>
      <label htmlFor="xst-sec-perms"><input className="mxp-r" type="radio" name="xst-sec" id="xst-sec-perms" />Permissions</label>
      <label htmlFor="xst-sec-updates"><input className="mxp-r" type="radio" name="xst-sec" id="xst-sec-updates" />App Updates</label>
    </div>

    {/* LANGUAGE panel */}

    <div className="xst-map-panel xst-p-lang">
      <div className="xst-mock-section">
        <div className="xst-section-header">
          <div style={{width:32,height:32,borderRadius:8,display:'grid',placeItems:'center',fontSize:15,background:'linear-gradient(135deg,rgb(144 0 255 / 0.18),rgb(200 0 179 / 0.12))',flex:'none'}}>🌐</div>
          <span className="xst-section-title">Language</span>
          <span className="xst-badge purple">All users</span>
        </div>

        <div className="xst-section-body">
          <div className="xst-row">
            <div><div className="xst-row-label">App language</div><div className="xst-row-sub">Selects UI locale for the entire app</div></div>
            <div className="xst-row-right"><span className="xst-dropdown-chip">English (US)<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" style={{opacity:0.5,marginLeft:2}}><path d="m6 9 6 6 6-6" /></svg></span></div>
          </div>

          <div className="xst-row">
            <div><div className="xst-row-label">22 locales available</div><div className="xst-row-sub">Includes Arabic, Farsi, Urdu (RTL)</div></div>
            <div className="xst-row-right"><span className="xst-badge platform">desktop + web</span></div>
          </div>

          <div className="xst-row">
            <div><div className="xst-row-label">No save needed</div><div className="xst-row-sub">Changes take effect the moment you select a locale</div></div>
            <div className="xst-row-right"><span className="xst-badge green">instant</span></div>
          </div>
        </div>
      </div>

      <p style={{marginTop:12,fontSize:13,lineHeight:1.6,opacity:0.65,padding:'0 2px'}}>The Language card is at the top of Settings. Pick any locale from the dropdown — the entire app UI, including Clerk sign-in components and RTL layout direction, switches in a single render cycle. No restart. Saved locally; survives backend outages.</p>
    </div>

    {/* BILLING panel */}

    <div className="xst-map-panel xst-p-bill">
      <div className="xst-mock-section">
        <div className="xst-section-header">
          <div style={{width:32,height:32,borderRadius:8,display:'grid',placeItems:'center',fontSize:15,background:'linear-gradient(135deg,rgb(144 0 255 / 0.18),rgb(200 0 179 / 0.12))',flex:'none'}}>💵</div>
          <span className="xst-section-title">Billing</span>
          <span className="xst-badge amber">admin only</span>
        </div>

        <div className="xst-section-body">
          <div className="xst-row">
            <div><div className="xst-row-label">Plan</div><div className="xst-row-sub">Current subscription tier</div></div>
            <div className="xst-row-right"><span className="xst-badge purple">Pro</span></div>
          </div>

          <div className="xst-row">
            <div><div className="xst-row-label">Status</div><div className="xst-row-sub">Active, trialing, or past-due</div></div>
            <div className="xst-row-right"><span className="xst-badge green"><span className="xst-pulse green" />Active</span></div>
          </div>

          <div className="xst-row">
            <div><div className="xst-row-label">Renewal date</div><div className="xst-row-sub">End of current billing period</div></div>
            <div className="xst-row-right"><span className="xst-dropdown-chip">Jul 11, 2026</span></div>
          </div>

          <div className="xst-row">
            <div><div className="xst-row-label">Seats</div><div className="xst-row-sub">Seats on the plan</div></div>
            <div className="xst-row-right"><span className="xst-dropdown-chip">5</span></div>
          </div>

          <div className="xst-row">
            <div><div className="xst-row-label">Credit usage bar</div><div className="xst-row-sub">Used + reserved vs ceiling this period</div></div>
            <div className="xst-row-right"><span className="xst-badge platform">below the grid</span></div>
          </div>
        </div>
      </div>

      <p style={{marginTop:12,fontSize:13,lineHeight:1.6,opacity:0.65,padding:'0 2px'}}>Visible only to org admins (and delegated sessions with the <code>billing\_summary</code> scope). Non-admin members see no Billing card at all. Two actions: <strong>Upgrade to Pro</strong> (opens Stripe portal, hidden when already on business plan) and <strong>View billing details</strong> (navigates to <code>/settings/billing-new</code>).</p>
    </div>

    {/* VAULT panel */}

    <div className="xst-map-panel xst-p-vault">
      <div className="xst-mock-section">
        <div className="xst-section-header">
          <div style={{width:32,height:32,borderRadius:8,display:'grid',placeItems:'center',fontSize:15,background:'linear-gradient(135deg,rgb(144 0 255 / 0.18),rgb(200 0 179 / 0.12))',flex:'none'}}>🔒</div>
          <span className="xst-section-title">Credentials Vault</span>
          <span className="xst-badge gray">hidden in delegated sessions</span>
        </div>

        <div className="xst-section-body">
          <div className="xst-row">
            <div><div className="xst-row-label">Add credential</div><div className="xst-row-sub">Display name, provider, kind, value</div></div>
            <div className="xst-row-right"><span className="xst-badge green">API key, Token, Header, OAuth</span></div>
          </div>

          <div className="xst-row">
            <div><div className="xst-row-label">Test now</div><div className="xst-row-sub">Validates against the provider where supported</div></div>
            <div className="xst-row-right"><span className="xst-badge green">pass</span></div>
          </div>

          <div className="xst-row">
            <div><div className="xst-row-label">Rotate</div><div className="xst-row-sub">Requires credential to be enabled first</div></div>
            <div className="xst-row-right"><span className="xst-badge purple">all bindings auto-update</span></div>
          </div>

          <div className="xst-row">
            <div><div className="xst-row-label">Delete</div><div className="xst-row-sub">Gated — blocked until all consumers are unbound</div></div>
            <div className="xst-row-right"><span className="xst-badge amber">unbind consumers first</span></div>
          </div>

          <div className="xst-row">
            <div><div className="xst-row-label">Paired runtimes</div><div className="xst-row-sub">Cloud + VPS identities authorised for your workspace</div></div>
            <div className="xst-row-right"><span className="xst-badge platform">sub-panel inside vault</span></div>
          </div>
        </div>
      </div>

      <p style={{marginTop:12,fontSize:13,lineHeight:1.6,opacity:0.65,padding:'0 2px'}}>Values are encrypted at rest and never shown after save — no reveal button, no clipboard copy. If a key is lost, rotate rather than recover. The Credentials Vault card is hidden entirely when a delegated session is active.</p>
    </div>

    {/* RUNTIME panel */}

    <div className="xst-map-panel xst-p-runtime">
      <div className="xst-mock-section">
        <div className="xst-section-header">
          <div style={{width:32,height:32,borderRadius:8,display:'grid',placeItems:'center',fontSize:15,background:'linear-gradient(135deg,rgb(144 0 255 / 0.18),rgb(200 0 179 / 0.12))',flex:'none'}}>🖥️</div>
          <span className="xst-section-title">Headless Runtime</span>
          <span className="xst-badge platform">desktop only</span>
        </div>

        <div className="xst-section-body">
          <div className="xst-row">
            <div><div className="xst-row-label">Run Locally</div><div className="xst-row-sub">Runtime on your machine — good for testing</div></div>

            <div className="xst-row-right">
              <div className="xst-toggle off">
                <div className="xst-toggle-knob" />
              </div>
            </div>
          </div>

          <div className="xst-row">
            <div><div className="xst-row-label">Deploy to VPS</div><div className="xst-row-sub">Always-on runtime over SSH — no server scripting</div></div>

            <div className="xst-row-right">
              <div className="xst-toggle on">
                <div className="xst-toggle-knob" />
              </div>
            </div>
          </div>

          <div className="xst-row">
            <div><div className="xst-row-label">Telegram Bot Token</div><div className="xst-row-sub">From @BotFather — the only required field for local mode</div></div>
            <div className="xst-row-right"><span className="xst-badge purple">required</span></div>
          </div>

          <div className="xst-row">
            <div><div className="xst-row-label">Clerk M2M secret</div><div className="xst-row-sub">Never stored by Actionist — re-enter on every VPS deploy</div></div>
            <div className="xst-row-right"><span className="xst-badge amber">not stored</span></div>
          </div>
        </div>
      </div>

      <p style={{marginTop:12,fontSize:13,lineHeight:1.6,opacity:0.65,padding:'0 2px'}}>Desktop-only — the card does not appear in the web build. Two modes: <strong>Run Locally</strong> keeps the runtime on your machine (good for testing), <strong>Deploy to VPS</strong> deploys over SSH for always-on agents. After a successful VPS deploy three buttons appear: <strong>Check Status</strong>, <strong>Logs</strong>, and <strong>Stop</strong>.</p>
    </div>

    {/* HELP ASSISTANT panel */}

    <div className="xst-map-panel xst-p-help">
      <div className="xst-mock-section">
        <div className="xst-section-header">
          <div style={{width:32,height:32,borderRadius:8,display:'grid',placeItems:'center',fontSize:15,background:'linear-gradient(135deg,rgb(144 0 255 / 0.18),rgb(200 0 179 / 0.12))',flex:'none'}}>⚡</div>
          <span className="xst-section-title">Help Assistant (Pip)</span>
          <span className="xst-badge purple">All users</span>
        </div>

        <div className="xst-section-body">
          <div className="xst-row">
            <div><div className="xst-row-label">Calm mode</div><div className="xst-row-sub">Freezes idle animation, silences all contextual tips</div></div>

            <div className="xst-row-right">
              <div className="xst-toggle on">
                <div className="xst-toggle-knob" />
              </div>
            </div>
          </div>

          <div className="xst-row">
            <div><div className="xst-row-label">Hide for an hour</div><div className="xst-row-sub">Removes Pip for exactly 60 minutes — shows resumption time</div></div>
            <div className="xst-row-right"><span className="xst-badge gray">timed</span></div>
          </div>

          <div className="xst-row">
            <div><div className="xst-row-label">Proactive nudges</div><div className="xst-row-sub">Off by default — fires only for concrete gaps</div></div>

            <div className="xst-row-right">
              <div className="xst-toggle off">
                <div className="xst-toggle-knob" />
              </div>
            </div>
          </div>

          <div className="xst-row">
            <div><div className="xst-row-label">Tip catalog</div><div className="xst-row-sub">Per-tip on/off toggle — disable a tip once, never see it again</div></div>
            <div className="xst-row-right"><span className="xst-badge platform">fine-grained</span></div>
          </div>

          <div className="xst-row">
            <div><div className="xst-row-label">Reset Pip's position</div><div className="xst-row-sub">Returns Pip to bottom-right corner</div></div>
            <div className="xst-row-right"><span className="xst-badge gray">Reset</span></div>
          </div>
        </div>
      </div>

      <p style={{marginTop:12,fontSize:13,lineHeight:1.6,opacity:0.65,padding:'0 2px'}}>Four separate dials for Pip — from a full mute to a tip-by-tip opt-out. <strong>Calm mode</strong> keeps Pip visible but still and silent (good for long focused sessions). <strong>Hide for an hour</strong> removes Pip entirely for exactly 60 minutes (good for presentations). These two are distinct — use whichever fits the moment.</p>
    </div>

    {/* PERMISSIONS panel */}

    <div className="xst-map-panel xst-p-perms">
      <div className="xst-mock-section">
        <div className="xst-section-header">
          <div style={{width:32,height:32,borderRadius:8,display:'grid',placeItems:'center',fontSize:15,background:'linear-gradient(135deg,rgb(144 0 255 / 0.18),rgb(200 0 179 / 0.12))',flex:'none'}}>🖥️</div>
          <span className="xst-section-title">Permissions Required</span>
          <span className="xst-badge platform">macOS only</span>
        </div>

        <div className="xst-section-body">
          <div className="xst-row">
            <div><div className="xst-row-label">Screen Recording</div><div className="xst-row-sub">Lets Actionist read on-screen state for Computer Use</div></div>
            <div className="xst-row-right"><span className="xst-badge green">Granted</span></div>
          </div>

          <div className="xst-row">
            <div><div className="xst-row-label">Accessibility</div><div className="xst-row-sub">Lets Actionist click, type, and navigate apps on your behalf</div></div>
            <div className="xst-row-right"><span className="xst-badge amber">Not granted</span></div>
          </div>

          <div className="xst-row">
            <div><div className="xst-row-label">Grant access</div><div className="xst-row-sub">Opens macOS System Settings at the correct pane</div></div>
            <div className="xst-row-right"><span className="xst-badge platform">opens System Settings</span></div>
          </div>
        </div>
      </div>

      <p style={{marginTop:12,fontSize:13,lineHeight:1.6,opacity:0.65,padding:'0 2px'}}>The Permissions Required card only appears on macOS — determined at runtime by the system platform. Not shown on Windows or Linux. Both Screen Recording and Accessibility are required for any agent using Computer Use. Grant them here if you skipped the first-run onboarding prompt.</p>
    </div>

    {/* UPDATES panel */}

    <div className="xst-map-panel xst-p-updates">
      <div className="xst-mock-section">
        <div className="xst-section-header">
          <div style={{width:32,height:32,borderRadius:8,display:'grid',placeItems:'center',fontSize:15,background:'linear-gradient(135deg,rgb(144 0 255 / 0.18),rgb(200 0 179 / 0.12))',flex:'none'}}>↑</div>
          <span className="xst-section-title">App Updates</span>
          <span className="xst-badge gray">sticky footer</span>
        </div>

        <div className="xst-section-body">
          <div className="xst-row">
            <div><div className="xst-row-label">Current version</div><div className="xst-row-sub">Shown in the sticky footer at the bottom of Settings</div></div>
            <div className="xst-row-right"><span className="xst-dropdown-chip">v2.4.1</span></div>
          </div>

          <div className="xst-row">
            <div><div className="xst-row-label">Check for Updates</div><div className="xst-row-sub">Shows Checking... while querying the update server</div></div>
            <div className="xst-row-right"><span className="xst-badge green">Up to date</span></div>
          </div>

          <div className="xst-row">
            <div><div className="xst-row-label">Auto-reset</div><div className="xst-row-sub">Both pass and fail states reset to idle after 5 seconds</div></div>
            <div className="xst-row-right"><span className="xst-badge purple">5 s</span></div>
          </div>
        </div>
      </div>

      <p style={{marginTop:12,fontSize:13,lineHeight:1.6,opacity:0.65,padding:'0 2px'}}>The version footer is sticky at the bottom of the Settings page — always visible as you scroll. Click <strong>Check for Updates</strong> to query the update server. If the check fails, an amber <strong>Update check failed</strong> message appears. Both states auto-reset after 5 seconds — most failures are transient network blips; click again to retry.</p>
    </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">Language</span>
    <h2 className="text-2xl md:text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-50"><b className="xc-count" style={{"--xc-to":"22"}} data-suffix=" locales."><span className="xc-real">22</span></b> Instant switch.</h2>

    <p className="text-base text-gray-600 dark:text-gray-400 max-w-3xl">
      Actionist ships with 22 locales out of the box — including three right-to-left languages. Pick one and the entire app UI changes immediately. No save button, no restart.
    </p>
  </div>

  {/* Interactive: 22-locale grid */}

  <div className="xst-locale-shell exp-tool-shell xc-try">
    <div style={{fontSize:12,letterSpacing:'0.07em',textTransform:'uppercase',opacity:0.6,marginBottom:12}}>Select a locale to see the switch behavior</div>

    <div className="xst-locale-grid">
      <label className="xst-locale-chip" htmlFor="xst-loc-en-us"><input className="mxp-r" type="radio" name="xst-loc" id="xst-loc-en-us" defaultChecked /><span>English (US)</span><span style={{fontFamily:'"JetBrains Mono",monospace',fontSize:10,opacity:0.5,letterSpacing:'0.04em'}}>en-US</span></label>
      <label className="xst-locale-chip" htmlFor="xst-loc-en-gb"><input className="mxp-r" type="radio" name="xst-loc" id="xst-loc-en-gb" /><span>English (UK)</span><span style={{fontFamily:'"JetBrains Mono",monospace',fontSize:10,opacity:0.5,letterSpacing:'0.04em'}}>en-GB</span></label>
      <label className="xst-locale-chip" htmlFor="xst-loc-hi"><input className="mxp-r" type="radio" name="xst-loc" id="xst-loc-hi" /><span>Hindi</span><span style={{fontFamily:'"JetBrains Mono",monospace',fontSize:10,opacity:0.5,letterSpacing:'0.04em'}}>hi</span></label>
      <label className="xst-locale-chip" htmlFor="xst-loc-ar"><input className="mxp-r" type="radio" name="xst-loc" id="xst-loc-ar" /><span>Arabic</span><span style={{fontFamily:'"JetBrains Mono",monospace',fontSize:10,opacity:0.5,letterSpacing:'0.04em'}}>ar</span><span style={{marginLeft:'auto',fontSize:9,fontWeight:700,letterSpacing:'0.06em',textTransform:'uppercase',padding:'2px 6px',borderRadius:4,background:'rgb(72 110 255 / 0.12)',color:'#2a56e8',border:'1px solid rgb(72 110 255 / 0.28)',flex:'none'}}>RTL</span></label>
      <label className="xst-locale-chip" htmlFor="xst-loc-fr"><input className="mxp-r" type="radio" name="xst-loc" id="xst-loc-fr" /><span>French</span><span style={{fontFamily:'"JetBrains Mono",monospace',fontSize:10,opacity:0.5,letterSpacing:'0.04em'}}>fr</span></label>
      <label className="xst-locale-chip" htmlFor="xst-loc-es"><input className="mxp-r" type="radio" name="xst-loc" id="xst-loc-es" /><span>Spanish</span><span style={{fontFamily:'"JetBrains Mono",monospace',fontSize:10,opacity:0.5,letterSpacing:'0.04em'}}>es</span></label>
      <label className="xst-locale-chip" htmlFor="xst-loc-de"><input className="mxp-r" type="radio" name="xst-loc" id="xst-loc-de" /><span>German</span><span style={{fontFamily:'"JetBrains Mono",monospace',fontSize:10,opacity:0.5,letterSpacing:'0.04em'}}>de</span></label>
      <label className="xst-locale-chip" htmlFor="xst-loc-it"><input className="mxp-r" type="radio" name="xst-loc" id="xst-loc-it" /><span>Italian</span><span style={{fontFamily:'"JetBrains Mono",monospace',fontSize:10,opacity:0.5,letterSpacing:'0.04em'}}>it</span></label>
      <label className="xst-locale-chip" htmlFor="xst-loc-ml"><input className="mxp-r" type="radio" name="xst-loc" id="xst-loc-ml" /><span>Malayalam</span><span style={{fontFamily:'"JetBrains Mono",monospace',fontSize:10,opacity:0.5,letterSpacing:'0.04em'}}>ml</span></label>
      <label className="xst-locale-chip" htmlFor="xst-loc-th"><input className="mxp-r" type="radio" name="xst-loc" id="xst-loc-th" /><span>Thai</span><span style={{fontFamily:'"JetBrains Mono",monospace',fontSize:10,opacity:0.5,letterSpacing:'0.04em'}}>th</span></label>
      <label className="xst-locale-chip" htmlFor="xst-loc-ja"><input className="mxp-r" type="radio" name="xst-loc" id="xst-loc-ja" /><span>Japanese</span><span style={{fontFamily:'"JetBrains Mono",monospace',fontSize:10,opacity:0.5,letterSpacing:'0.04em'}}>ja</span></label>
      <label className="xst-locale-chip" htmlFor="xst-loc-ko"><input className="mxp-r" type="radio" name="xst-loc" id="xst-loc-ko" /><span>Korean</span><span style={{fontFamily:'"JetBrains Mono",monospace',fontSize:10,opacity:0.5,letterSpacing:'0.04em'}}>ko</span></label>
      <label className="xst-locale-chip" htmlFor="xst-loc-zh"><input className="mxp-r" type="radio" name="xst-loc" id="xst-loc-zh" /><span>Chinese</span><span style={{fontFamily:'"JetBrains Mono",monospace',fontSize:10,opacity:0.5,letterSpacing:'0.04em'}}>zh</span></label>
      <label className="xst-locale-chip" htmlFor="xst-loc-pt-br"><input className="mxp-r" type="radio" name="xst-loc" id="xst-loc-pt-br" /><span>Portuguese (BR)</span><span style={{fontFamily:'"JetBrains Mono",monospace',fontSize:10,opacity:0.5,letterSpacing:'0.04em'}}>pt-BR</span></label>
      <label className="xst-locale-chip" htmlFor="xst-loc-ru"><input className="mxp-r" type="radio" name="xst-loc" id="xst-loc-ru" /><span>Russian</span><span style={{fontFamily:'"JetBrains Mono",monospace',fontSize:10,opacity:0.5,letterSpacing:'0.04em'}}>ru</span></label>
      <label className="xst-locale-chip" htmlFor="xst-loc-fa"><input className="mxp-r" type="radio" name="xst-loc" id="xst-loc-fa" /><span>Farsi / Persian</span><span style={{fontFamily:'"JetBrains Mono",monospace',fontSize:10,opacity:0.5,letterSpacing:'0.04em'}}>fa</span><span style={{marginLeft:'auto',fontSize:9,fontWeight:700,letterSpacing:'0.06em',textTransform:'uppercase',padding:'2px 6px',borderRadius:4,background:'rgb(72 110 255 / 0.12)',color:'#2a56e8',border:'1px solid rgb(72 110 255 / 0.28)',flex:'none'}}>RTL</span></label>
      <label className="xst-locale-chip" htmlFor="xst-loc-tr"><input className="mxp-r" type="radio" name="xst-loc" id="xst-loc-tr" /><span>Turkish</span><span style={{fontFamily:'"JetBrains Mono",monospace',fontSize:10,opacity:0.5,letterSpacing:'0.04em'}}>tr</span></label>
      <label className="xst-locale-chip" htmlFor="xst-loc-es-ar"><input className="mxp-r" type="radio" name="xst-loc" id="xst-loc-es-ar" /><span>Spanish (Argentina)</span><span style={{fontFamily:'"JetBrains Mono",monospace',fontSize:10,opacity:0.5,letterSpacing:'0.04em'}}>es-AR</span></label>
      <label className="xst-locale-chip" htmlFor="xst-loc-fil"><input className="mxp-r" type="radio" name="xst-loc" id="xst-loc-fil" /><span>Filipino</span><span style={{fontFamily:'"JetBrains Mono",monospace',fontSize:10,opacity:0.5,letterSpacing:'0.04em'}}>fil</span></label>
      <label className="xst-locale-chip" htmlFor="xst-loc-ur"><input className="mxp-r" type="radio" name="xst-loc" id="xst-loc-ur" /><span>Urdu</span><span style={{fontFamily:'"JetBrains Mono",monospace',fontSize:10,opacity:0.5,letterSpacing:'0.04em'}}>ur</span><span style={{marginLeft:'auto',fontSize:9,fontWeight:700,letterSpacing:'0.06em',textTransform:'uppercase',padding:'2px 6px',borderRadius:4,background:'rgb(72 110 255 / 0.12)',color:'#2a56e8',border:'1px solid rgb(72 110 255 / 0.28)',flex:'none'}}>RTL</span></label>
      <label className="xst-locale-chip" htmlFor="xst-loc-es-mx"><input className="mxp-r" type="radio" name="xst-loc" id="xst-loc-es-mx" /><span>Spanish (Mexico)</span><span style={{fontFamily:'"JetBrains Mono",monospace',fontSize:10,opacity:0.5,letterSpacing:'0.04em'}}>es-MX</span></label>
      <label className="xst-locale-chip" htmlFor="xst-loc-id"><input className="mxp-r" type="radio" name="xst-loc" id="xst-loc-id" /><span>Indonesian</span><span style={{fontFamily:'"JetBrains Mono",monospace',fontSize:10,opacity:0.5,letterSpacing:'0.04em'}}>id</span></label>
    </div>

    <div className="xst-locale-confirm">
      <span className="xst-confirm-std">Locale saved locally. The entire app UI switches in one render cycle — no restart required. The setting survives app restarts and backend outages.</span>
      <span className="xst-confirm-rtl">RTL locale selected. The app layout direction flips to <em>right-to-left</em> immediately, including the sidebar and Clerk sign-in components. Saved locally — survives backend outages and restarts.</span>
    </div>
  </div>

  <div style={{marginTop:24}}>
    <Steps>
      <Step title="Open Settings">
        Click <strong>Settings</strong> in the sidebar. The <strong>Language</strong> card is at the top of the page.
      </Step>

      <Step title="Open the dropdown">
        Click the language dropdown. Each locale shows its country flag and name.
      </Step>

      <Step title="Pick a locale">
        Select any of the 22 supported locales. The entire app UI switches instantly — including Clerk sign-in components and layout direction for RTL languages.
      </Step>
    </Steps>
  </div>

  <Check>The chosen language is saved locally and survives app restarts, even if the backend is unreachable.</Check>

  <div className="xc-quote">
    <p>Our Tokyo, Berlin, and Cairo teams all use the same workspace. One locale switch and Actionist is native for everyone — no separate instances, no config drift.</p>
    <span>Omar · Agency owner, 22-locale team</span>
  </div>

  {/* TODO(image): language-picker-open — IMAGE SPEC: The language dropdown open and overlaid on the Settings page. Show at least 8 locales with country-flag icons and native-language names. The Arabic entry must be visible to illustrate RTL awareness. Dark background, portal-style dropdown. — replace this CSS mock with the real screenshot */}

  <div className="mxp-window" style={{marginTop:'16px',maxWidth:'580px'}} aria-label="Language picker dropdown illustration">
    <div className="mxp-window-bar" style={{padding:'10px 16px'}}>
      <span style={{width:10,height:10,borderRadius:'50%',background:'#FF5F57',flex:'none',display:'inline-block'}} />

      <span style={{width:10,height:10,borderRadius:'50%',background:'#FFBD2E',flex:'none',display:'inline-block'}} />

      <span style={{width:10,height:10,borderRadius:'50%',background:'#28C840',flex:'none',display:'inline-block'}} />

      <span style={{flex:1,textAlign:'center',fontSize:11.5,fontWeight:500,opacity:0.6,letterSpacing:'0.02em',fontFamily:'"JetBrains Mono",monospace'}}>Settings — Language</span>
    </div>

    <div style={{padding:16}}>
      <div style={{display:'flex',flexDirection:'column',gap:6,marginBottom:12}}>
        <span style={{fontSize:12,fontWeight:600,opacity:0.7}}>App language</span>

        <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',padding:'8px 12px',borderRadius:8,border:'1px solid var(--default-border-color)',background:'rgb(255 255 255)',fontSize:13,fontWeight:500,cursor:'default'}}>
          <span>English (US)</span>

          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
            <path d="m6 9 6 6 6-6" />
          </svg>
        </div>
      </div>

      <div style={{borderRadius:10,border:'1px solid var(--default-border-color)',background:'rgb(255 255 255)',overflow:'hidden',boxShadow:'0 8px 24px rgb(0 0 0 / 0.1)'}}>
        <div style={{display:'flex',alignItems:'center',gap:8,padding:'9px 14px',fontSize:12.5,cursor:'default',borderBottom:'1px solid var(--default-border-color)',background:'rgb(var(--actionist-purple) / 0.1)',fontWeight:600}}>🇺🇸 English (US) <span style={{marginLeft:'auto',fontFamily:'"JetBrains Mono",monospace',fontSize:10,opacity:0.4,letterSpacing:'0.04em'}}>en-US</span></div>
        <div style={{display:'flex',alignItems:'center',gap:8,padding:'9px 14px',fontSize:12.5,cursor:'default',borderBottom:'1px solid var(--default-border-color)'}}>🇬🇧 English (UK) <span style={{marginLeft:'auto',fontFamily:'"JetBrains Mono",monospace',fontSize:10,opacity:0.4,letterSpacing:'0.04em'}}>en-GB</span></div>
        <div style={{display:'flex',alignItems:'center',gap:8,padding:'9px 14px',fontSize:12.5,cursor:'default',borderBottom:'1px solid var(--default-border-color)'}}>🇮🇳 Hindi <span style={{marginLeft:'auto',fontFamily:'"JetBrains Mono",monospace',fontSize:10,opacity:0.4,letterSpacing:'0.04em'}}>hi</span></div>
        <div style={{display:'flex',alignItems:'center',gap:8,padding:'9px 14px',fontSize:12.5,cursor:'default',borderBottom:'1px solid var(--default-border-color)'}}>🇦🇪 Arabic <span style={{marginLeft:'auto',fontFamily:'"JetBrains Mono",monospace',fontSize:10,opacity:0.4,letterSpacing:'0.04em'}}>ar</span><span style={{marginLeft:6,fontSize:9,fontWeight:700,letterSpacing:'0.06em',textTransform:'uppercase',padding:'2px 6px',borderRadius:4,background:'rgb(72 110 255 / 0.12)',color:'#2a56e8',border:'1px solid rgb(72 110 255 / 0.28)'}}>RTL</span></div>
        <div style={{display:'flex',alignItems:'center',gap:8,padding:'9px 14px',fontSize:12.5,cursor:'default',borderBottom:'1px solid var(--default-border-color)'}}>🇫🇷 French <span style={{marginLeft:'auto',fontFamily:'"JetBrains Mono",monospace',fontSize:10,opacity:0.4,letterSpacing:'0.04em'}}>fr</span></div>
        <div style={{display:'flex',alignItems:'center',gap:8,padding:'9px 14px',fontSize:12.5,cursor:'default',borderBottom:'1px solid var(--default-border-color)'}}>🇪🇸 Spanish <span style={{marginLeft:'auto',fontFamily:'"JetBrains Mono",monospace',fontSize:10,opacity:0.4,letterSpacing:'0.04em'}}>es</span></div>
        <div style={{display:'flex',alignItems:'center',gap:8,padding:'9px 14px',fontSize:12.5,cursor:'default',borderBottom:'1px solid var(--default-border-color)'}}>🇩🇪 German <span style={{marginLeft:'auto',fontFamily:'"JetBrains Mono",monospace',fontSize:10,opacity:0.4,letterSpacing:'0.04em'}}>de</span></div>
        <div style={{display:'flex',alignItems:'center',gap:8,padding:'9px 14px',fontSize:12.5,cursor:'default'}}>🇮🇷 Italian <span style={{marginLeft:'auto',fontFamily:'"JetBrains Mono",monospace',fontSize:10,opacity:0.4,letterSpacing:'0.04em'}}>it</span></div>
      </div>
    </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">Billing</span>
    <h2 className="text-2xl md:text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">Billing at a glance.</h2>
  </div>

  <Note>
    The <strong>Billing</strong> card is only visible to <strong>org admins</strong>. Non-admin workspace members do not see it. Delegated sessions with the <code>billing\_summary</code> scope can also view it.
  </Note>

  <p className="text-base text-gray-600 dark:text-gray-400 mt-6 mb-6 max-w-3xl">
    The card gives a four-column summary of your subscription. Below the grid, a usage bar shows how much of your credit ceiling you have consumed and reserved so far this period.
  </p>

  <div className="xst-billing-grid">
    <div style={{padding:'16px 18px',borderRadius:12,border:'1px solid var(--default-border-color)',background:'rgb(250 250 250)'}}>
      <div style={{fontSize:11.5,opacity:0.55,fontWeight:500,letterSpacing:'0.04em',textTransform:'uppercase',marginBottom:6}}>Plan</div>
      <div className="exp-stat-figure" style={{fontSize:'22px',lineHeight:1.1}}>Pro</div>
      <div style={{fontSize:11.5,opacity:0.55,marginTop:3}}>Current subscription tier</div>
    </div>

    <div style={{padding:'16px 18px',borderRadius:12,border:'1px solid var(--default-border-color)',background:'rgb(250 250 250)'}}>
      <div style={{fontSize:11.5,opacity:0.55,fontWeight:500,letterSpacing:'0.04em',textTransform:'uppercase',marginBottom:6}}>Status</div>

      <div style={{marginTop:4,display:'flex',alignItems:'center',gap:6}}>
        <span className="xst-pulse green" style={{display:'inline-block'}} />

        <span style={{fontWeight:600,fontSize:14}}>Active</span>
      </div>

      <div style={{fontSize:11.5,opacity:0.55,marginTop:3}}>Active, trialing, or inactive. A past-due banner shows the grace-period end date when payment is overdue.</div>
    </div>

    <div style={{padding:'16px 18px',borderRadius:12,border:'1px solid var(--default-border-color)',background:'rgb(250 250 250)'}}>
      <div style={{fontSize:11.5,opacity:0.55,fontWeight:500,letterSpacing:'0.04em',textTransform:'uppercase',marginBottom:6}}>Renewal date</div>
      <div className="exp-stat-figure" style={{fontSize:16,lineHeight:1.1,paddingTop:4}}>Jul 11</div>
      <div style={{fontSize:11.5,opacity:0.55,marginTop:3}}>End of current period</div>
    </div>

    <div style={{padding:'16px 18px',borderRadius:12,border:'1px solid var(--default-border-color)',background:'rgb(250 250 250)'}}>
      <div style={{fontSize:11.5,opacity:0.55,fontWeight:500,letterSpacing:'0.04em',textTransform:'uppercase',marginBottom:6}}>Seats</div>
      <div className="exp-stat-figure" style={{fontSize:'22px',lineHeight:1.1}}><b className="xc-count" style={{"--xc-to":"5"}}><span className="xc-real">5</span></b></div>
      <div style={{fontSize:11.5,opacity:0.55,marginTop:3}}>Seats on the plan</div>
    </div>
  </div>

  <div style={{marginTop:8}}>
    <div style={{fontSize:11.5,opacity:0.55,marginTop:3}}>Credit usage this period</div>

    <div className="exp-bar-track" style={{margin:'8px 0 4px'}}>
      <div className="exp-bar-fill" style={{width:'42%'}} />
    </div>

    <div style={{fontSize:11.5,opacity:0.55,marginTop:3}}>42% consumed + reserved</div>
  </div>

  <div style={{marginTop:24}}>
    <Columns cols={2}>
      <Card title="Upgrade to Pro" icon="circle-arrow-up" href="/Folders/billing">
        Opens the Stripe billing portal. Hidden when you are already on the business plan.
      </Card>

      <Card title="View billing details" icon="receipt" href="/Folders/billing">
        Navigates to the full billing page at <code>/settings/billing-new</code> inside the app.
      </Card>
    </Columns>
  </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">Credentials vault</span>
    <h2 className="text-2xl md:text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">One vault. Every secret.</h2>

    <p className="text-base text-gray-600 dark:text-gray-400 max-w-3xl">
      API keys, bot tokens, and OAuth credentials live here — encrypted at rest, never revealed after save, and automatically propagated to every bound agent when you rotate them.
    </p>
  </div>

  <Warning>
    Credential values are encrypted in the vault and never shown after save. There is no reveal button and no clipboard copy of secrets. If you lose a key, rotate it — do not try to recover it from Actionist.
  </Warning>

  {/* Credential lifecycle pipeline */}

  <div className="w-full py-6">
    <div className="actionist-tight flex flex-col gap-2 mb-4">
      <h3 className="text-xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">How a credential travels.</h3>
    </div>

    <div className="mxp-pipe">
      <div className="mxp-pipe-node"><strong>Declare</strong><span>The SKILL.md names a slot — <code>env: STRIPE\_SECRET\_KEY</code> — never the value.</span></div>

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

      <div className="mxp-pipe-node"><strong>Save to vault</strong><span>Real key stored encrypted in Settings > Credentials Vault.</span></div>

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

      <div className="mxp-pipe-node"><strong>Bind per agent</strong><span>Key icon on the Skills tab maps slot to vault entry — one-time.</span></div>

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

      <div className="mxp-pipe-node"><strong>Resolve at runtime</strong><span>Secret injected silently on every run. Rotate in the vault; every skill updates automatically.</span></div>
    </div>
  </div>

  {/* TODO(image): credentials-vault-card — IMAGE SPEC: Close-up of one credential card in the Credentials Vault. Status badge must read 'Active' (green). All action buttons visible: Rename, Rotate, Test now, Disable, Delete. The 'Used by' pill list expanded, showing 1-2 example bindings (e.g. an agent name and a skill name). Dark card-on-dark background with glass-style treatment. — replace this CSS mock with the real screenshot */}

  <div style={{borderRadius:14,border:'1px solid var(--default-border-color)',background:'rgb(255 255 255)',overflow:'hidden',marginTop:18,boxShadow:'0 2px 12px rgb(0 0 0 / 0.05)'}} aria-label="Credentials vault card illustration">
    <div style={{display:'flex',alignItems:'center',gap:14,padding:'16px 20px',borderBottom:'1px solid var(--default-border-color)',background:'rgb(250 250 252)'}}>
      <div style={{width:36,height:36,borderRadius:10,background:'linear-gradient(135deg,rgb(144 0 255 / 0.18),rgb(200 0 179 / 0.12))',display:'grid',placeItems:'center',fontSize:16,flexShrink:0}}>🔒</div>

      <div style={{flex:1,minWidth:0}}>
        <div style={{fontSize:14,fontWeight:600}}>Stripe API Key</div>
        <div style={{fontSize:11.5,opacity:0.5,marginTop:2,fontFamily:'"JetBrains Mono",monospace'}}>provider: stripe · kind: api\_key</div>
      </div>

      <span className="xst-badge green" style={{flexShrink:0}}>Active</span>
    </div>

    <div style={{display:'flex',alignItems:'center',flexWrap:'wrap',gap:6,padding:'12px 20px',borderBottom:'1px solid var(--default-border-color)'}}>
      <span style={{fontSize:11,opacity:0.5,letterSpacing:'0.06em',textTransform:'uppercase',marginRight:8}}>Used by</span>
      <span style={{display:'inline-flex',alignItems:'center',padding:'3px 10px',borderRadius:999,fontSize:11,fontWeight:500,background:'rgb(72 110 255 / 0.1)',color:'#2a56e8',border:'1px solid rgb(72 110 255 / 0.25)'}}>Research Agent</span>
      <span style={{display:'inline-flex',alignItems:'center',padding:'3px 10px',borderRadius:999,fontSize:11,fontWeight:500,background:'rgb(72 110 255 / 0.1)',color:'#2a56e8',border:'1px solid rgb(72 110 255 / 0.25)'}}>summarise.skill</span>
    </div>

    <div style={{display:'flex',flexWrap:'wrap',gap:8,padding:'12px 20px'}}>
      <button style={{display:'inline-flex',alignItems:'center',padding:'5px 12px',borderRadius:7,fontSize:12,fontWeight:500,cursor:'default',border:'1px solid var(--default-border-color)',background:'rgb(248 248 250)',color:'rgb(60 55 70)'}}>Rename</button>
      <button style={{display:'inline-flex',alignItems:'center',padding:'5px 12px',borderRadius:7,fontSize:12,fontWeight:500,cursor:'default',border:'1px solid var(--default-border-color)',background:'rgb(248 248 250)',color:'rgb(60 55 70)'}}>Rotate</button>
      <button style={{display:'inline-flex',alignItems:'center',padding:'5px 12px',borderRadius:7,fontSize:12,fontWeight:500,cursor:'default',borderColor:'rgb(34 197 94 / 0.35)',background:'rgb(34 197 94 / 0.1)',color:'#16a34a',border:'1px solid rgb(34 197 94 / 0.35)'}}>Test now</button>
      <button style={{display:'inline-flex',alignItems:'center',padding:'5px 12px',borderRadius:7,fontSize:12,fontWeight:500,cursor:'default',border:'1px solid var(--default-border-color)',background:'rgb(248 248 250)',color:'rgb(60 55 70)'}}>Disable</button>
      <button style={{display:'inline-flex',alignItems:'center',padding:'5px 12px',borderRadius:7,fontSize:12,fontWeight:500,cursor:'default',borderColor:'rgb(239 68 68 / 0.3)',background:'rgb(239 68 68 / 0.08)',color:'#dc2626',border:'1px solid rgb(239 68 68 / 0.3)'}}>Delete</button>
    </div>
  </div>

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

  <AccordionGroup>
    <Accordion title="Add a credential" icon="plus" defaultOpen={true}>
      <Steps>
        <Step title="Click Add credential">
          Find the <strong>Credentials Vault</strong> section and click <strong>Add credential</strong>.
        </Step>

        <Step title="Fill the form">
          Enter a <strong>Display name</strong>, a <strong>Provider</strong> identifier (e.g. <code>github</code>), a <strong>Kind</strong>, and the <strong>Value</strong>. Use the show/hide toggle while typing to confirm the value.

          Supported kinds: <strong>API key</strong>, <strong>Token</strong>, <strong>Header secret</strong>, <strong>Client credentials</strong>.
        </Step>

        <Step title="Click Save credential">
          The value is encrypted immediately. It is never retrievable after this point.
        </Step>
      </Steps>
    </Accordion>

    <Accordion title="Test a credential" icon="flask-conical">
      Find the credential card and click <strong>Test now</strong>. Actionist probes the provider:

      * <strong>Supported providers</strong> — validated against the real provider API.
      * <strong>All other providers</strong> — structural validation (format and length check).

      A badge appears on the card: a green check for a passing test, an amber warning with a reason for a failure.
    </Accordion>

    <Accordion title="Rotate a credential" icon="rotate-cw">
      <Steps>
        <Step title="Confirm the credential is enabled">
          The <strong>Rotate</strong> button is blocked for disabled credentials. If the status shows <strong>Disabled</strong>, click <strong>Enable</strong> first. The tooltip reads: "Enable before rotating."
        </Step>

        <Step title="Click Rotate">
          Paste the new secret value into the form that appears.
        </Step>

        <Step title="Confirm">
          Click to save the new value. All existing bindings — agents, skills, channels, MCP servers — pick up the new value automatically on their next call. No manual re-binding required.
        </Step>
      </Steps>

      <Check>Existing bindings keep working during and after rotation — they pick up the new value on next use.</Check>
    </Accordion>

    <Accordion title="Disable and enable a credential" icon="toggle-left">
      Click <strong>Disable</strong> on a credential card to pause it without deleting it. Disabled credentials show an amber <strong>Disabled</strong> status badge. Bound consumers will fail until you re-enable.

      Click <strong>Enable</strong> to restore it. If you need to rotate a disabled credential, you must enable it first.
    </Accordion>

    <Accordion title="Delete a credential" icon="trash-2">
      The <strong>Delete</strong> button is intentionally gated. It stays disabled as long as any consumer references the credential.

      <Steps>
        <Step title="Remove all bindings">
          The card lists every consumer under "Used by" — agents, model presets, skills, channels, MCP servers. Remove those references first. The tooltip reads: "Unbind consumers first."
        </Step>

        <Step title="Verify usage is clear">
          If the Delete button shows "Refresh to verify usage before deleting", click the vault <strong>Refresh</strong> button to re-check.
        </Step>

        <Step title="Click Delete and confirm">
          Once all bindings are removed, <strong>Delete</strong> becomes active. Confirm in the dialog to permanently remove the credential.
        </Step>
      </Steps>
    </Accordion>
  </AccordionGroup>

  <h3 className="text-xl font-semibold tracking-tight text-gray-900 dark:text-gray-50 mt-12 mb-4">Credential status badges</h3>

  <p className="text-base text-gray-600 dark:text-gray-400 mb-4 max-w-3xl">Every credential card carries one of four statuses:</p>

  <Columns cols={4}>
    <Card title="Active" icon="circle-check" color="#22C55E">
      The credential is valid and in use.
    </Card>

    <Card title="Invalid" icon="circle-x" color="#F59E0B">
      The last validation attempt failed. Test it and rotate if the key has been revoked.
    </Card>

    <Card title="Disabled" icon="circle-minus" color="#F59E0B">
      Manually disabled. Consumers referencing this credential will fail until you re-enable it.
    </Card>

    <Card title="Needs re-auth" icon="circle-alert" color="#F59E0B">
      The OAuth flow that issued this credential requires re-authentication.
    </Card>
  </Columns>

  <Info>Re-authenticate support is not yet wired. The current workaround is to delete the credential and recreate it with a fresh token.</Info>

  <h3 className="text-xl font-semibold tracking-tight text-gray-900 dark:text-gray-50 mt-12 mb-4">Paired runtimes</h3>

  <p className="text-base text-gray-600 dark:text-gray-400 mb-6 max-w-3xl">
    The <strong>Paired runtimes</strong> sub-panel inside the Credentials Vault shows the cloud and VPS machine identities that are authorised to act on behalf of your workspace. Each entry shows a label, a host hint, a last-seen timestamp, and a status badge.
  </p>

  <Steps>
    <Step title="Click Pair runtime">
      A fresh one-time pairing code is generated and displayed.
    </Step>

    <Step title="Paste the code into the runtime">
      Copy the code and paste it into the runtime process immediately.
      <Warning>The pairing code is shown exactly once. Once you close the dialog it is gone — Actionist does not store it. Treat it like a password.</Warning>
    </Step>

    <Step title="Confirm the new identity appears">
      The runtime entry appears in the <strong>Paired runtimes</strong> panel with its label, host hint, and last-seen time.
    </Step>
  </Steps>

  <p className="text-base text-gray-600 dark:text-gray-400 mt-4 max-w-3xl">
    To revoke a runtime, click the revoke action on its entry. Revocation is immediate and permanent — a new pairing code is required to re-authorise.
  </p>

  <Note>
    The Credentials Vault is hidden entirely when a delegated session is active.
  </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">Headless runtime</span>
    <h2 className="text-2xl md:text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">Run agents when your laptop is closed.</h2>

    <p className="text-base text-gray-600 dark:text-gray-400 max-w-3xl">
      Headless Runtime keeps scheduled agents firing and Telegram bots responding around the clock — either on your local machine for testing or deployed directly to a VPS from within the app.
    </p>
  </div>

  <Info>
    <strong>Headless Runtime</strong> is a desktop-only feature. The card does not appear in the web build.
  </Info>

  {/* Branded pipeline replacing the mermaid flowchart.
        Nodes: You → Mode toggle → Local Runtime / VPS Runtime → Telegram bot / SSH deploy */}

  <div className="xst-runtime-pipe" aria-label="Headless runtime flow diagram">
    <div className="xst-rt-node" style={{borderColor:'rgb(144 0 255 / 0.4)',background:'rgb(144 0 255 / 0.07)'}}>
      <div style={{fontSize:18,lineHeight:1}}>👤</div>
      <div style={{fontSize:12.5,fontWeight:600}}>You</div>
    </div>

    <div className="xst-rt-arrow" />

    <div className="xst-rt-node" style={{borderColor:'rgb(72 110 255 / 0.4)',background:'rgb(72 110 255 / 0.07)'}}>
      <div style={{fontSize:18,lineHeight:1}}>⇅</div>
      <div style={{fontSize:12.5,fontWeight:600}}>Mode</div>
      <div style={{fontSize:10.5,opacity:0.5}}>Run Locally / Deploy to VPS</div>
    </div>

    <div className="xst-rt-split">
      <div className="xst-rt-branch">
        <div className="xst-rt-branch-line" />

        <div className="xst-rt-node" style={{borderColor:'rgb(34 197 94 / 0.4)',background:'rgb(34 197 94 / 0.07)'}}>
          <div style={{fontSize:18,lineHeight:1}}>💻</div>
          <div style={{fontSize:12.5,fontWeight:600}}>Local Runtime</div>
          <div style={{fontSize:10.5,opacity:0.5}}>your machine</div>
        </div>

        <div className="xst-rt-arrow-sm" />

        <div className="xst-rt-node" style={{borderColor:'rgb(0 219 255 / 0.4)',background:'rgb(0 219 255 / 0.06)',minWidth:'80px'}}>
          <div style={{fontSize:18,lineHeight:1}}>💬</div>
          <div style={{fontSize:12.5,fontWeight:600}}>Telegram bot</div>
        </div>
      </div>

      <div className="xst-rt-branch">
        <div className="xst-rt-branch-line" />

        <div className="xst-rt-node" style={{borderColor:'rgb(200 0 179 / 0.4)',background:'rgb(200 0 179 / 0.07)'}}>
          <div style={{fontSize:18,lineHeight:1}}>🏢</div>
          <div style={{fontSize:12.5,fontWeight:600}}>VPS Runtime</div>
          <div style={{fontSize:10.5,opacity:0.5}}>your server</div>
        </div>

        <div className="xst-rt-arrow-sm" />

        <div style={{display:'flex',flexDirection:'column',gap:8}}>
          <div className="xst-rt-node" style={{borderColor:'rgb(0 219 255 / 0.4)',background:'rgb(0 219 255 / 0.06)',minWidth:'80px'}}>
            <div style={{fontSize:18,lineHeight:1}}>💬</div>
            <div style={{fontSize:12.5,fontWeight:600}}>Telegram bot</div>
          </div>

          <div className="xst-rt-node" style={{borderColor:'rgb(0 219 255 / 0.4)',background:'rgb(0 219 255 / 0.06)',minWidth:'80px'}}>
            <div style={{fontSize:18,lineHeight:1}}>🔑</div>
            <div style={{fontSize:12.5,fontWeight:600}}>SSH deploy</div>
            <div style={{fontSize:10.5,opacity:0.5}}>no scripting</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  {/* TODO(image): headless-runtime-vps-form — IMAGE SPEC: The Headless Runtime section with the segmented 'Run Locally / Deploy to VPS' toggle visible at the top. 'Deploy to VPS' is selected. The Connection section shows fields for Host (blurred), Port (22), Username. The Authentication section is visible. The 'Test Connection' and 'Deploy to VPS' action buttons are both visible at the bottom of the card. — replace this CSS mock with the real screenshot */}

  <div className="mxp-window" style={{marginTop:'16px',maxWidth:'580px'}} aria-label="Headless runtime VPS form illustration">
    <div className="mxp-window-bar" style={{padding:'10px 16px'}}>
      <span style={{width:10,height:10,borderRadius:'50%',background:'#FF5F57',flex:'none',display:'inline-block'}} />

      <span style={{width:10,height:10,borderRadius:'50%',background:'#FFBD2E',flex:'none',display:'inline-block'}} />

      <span style={{width:10,height:10,borderRadius:'50%',background:'#28C840',flex:'none',display:'inline-block'}} />

      <span style={{flex:1,textAlign:'center',fontSize:11.5,fontWeight:500,opacity:0.6,letterSpacing:'0.02em',fontFamily:'"JetBrains Mono",monospace'}}>Settings — Headless Runtime</span>
    </div>

    <div style={{padding:16,display:'flex',flexDirection:'column',gap:14}}>
      <div style={{display:'inline-flex',borderRadius:9,border:'1px solid var(--default-border-color)',overflow:'hidden',alignSelf:'flex-start',background:'rgb(244 244 246)'}}>
        <span style={{padding:'7px 16px',fontSize:12.5,fontWeight:500,cursor:'default',color:'rgb(100 95 115)'}}>Run Locally</span>
        <span style={{padding:'7px 16px',fontSize:12.5,fontWeight:600,cursor:'default',background:'rgb(255 255 255)',color:'rgb(var(--actionist-purple))',borderRadius:8,margin:2}}>Deploy to VPS</span>
      </div>

      <div style={{display:'flex',flexDirection:'column',gap:7}}>
        <div style={{fontSize:11,fontWeight:600,letterSpacing:'0.08em',textTransform:'uppercase',opacity:0.5}}>Connection</div>

        <div style={{display:'flex',gap:8,alignItems:'center'}}>
          <div style={{flex:1,padding:'7px 11px',borderRadius:7,border:'1px solid var(--default-border-color)',background:'rgb(255 255 255)',fontSize:12,color:'rgb(70 65 85)',filter:'blur(3px)',userSelect:'none'}}>Host</div>
          <div style={{flex:'0 0 auto',width:80,padding:'7px 11px',borderRadius:7,border:'1px solid var(--default-border-color)',background:'rgb(255 255 255)',fontSize:12,color:'rgb(70 65 85)'}}>Port: 22</div>
          <div style={{flex:1,padding:'7px 11px',borderRadius:7,border:'1px solid var(--default-border-color)',background:'rgb(255 255 255)',fontSize:12,color:'rgb(70 65 85)'}}>Username</div>
        </div>

        <div style={{display:'flex',gap:8,alignItems:'center'}}>
          <div style={{flex:1,padding:'7px 11px',borderRadius:7,border:'1px solid var(--default-border-color)',background:'rgb(255 255 255)',fontSize:12,color:'rgb(70 65 85)'}}>SSH Private Key path</div>
          <span style={{display:'inline-flex',alignItems:'center',padding:'5px 12px',borderRadius:7,fontSize:12,fontWeight:500,cursor:'default',border:'1px solid var(--default-border-color)',background:'rgb(248 248 250)',color:'rgb(60 55 70)',flexShrink:0}}>Browse</span>
        </div>
      </div>

      <div style={{display:'flex',flexDirection:'column',gap:7}}>
        <div style={{fontSize:11,fontWeight:600,letterSpacing:'0.08em',textTransform:'uppercase',opacity:0.5}}>Authentication</div>
        <div style={{flex:1,padding:'7px 11px',borderRadius:7,border:'1px solid var(--default-border-color)',background:'rgb(255 255 255)',fontSize:12,color:'rgb(70 65 85)',filter:'blur(3px)',userSelect:'none'}}>Clerk M2M secret (ms\_...)</div>
      </div>

      <div style={{display:'flex',gap:8,paddingTop:4}}>
        <span style={{display:'inline-flex',alignItems:'center',padding:'5px 12px',borderRadius:7,fontSize:12,fontWeight:500,cursor:'default',border:'1px solid var(--default-border-color)',background:'rgb(248 248 250)',color:'rgb(60 55 70)'}}>Test Connection</span>
        <span style={{display:'inline-flex',alignItems:'center',padding:'5px 12px',borderRadius:7,fontSize:12,fontWeight:500,cursor:'default',borderColor:'rgb(34 197 94 / 0.35)',background:'rgb(34 197 94 / 0.1)',color:'#16a34a',border:'1px solid rgb(34 197 94 / 0.35)'}}>Deploy to VPS</span>
      </div>
    </div>
  </div>

  <Tabs>
    <Tab title="Run Locally" icon="monitor">
      Use this mode to run the agent runtime on your own machine. Good for testing before you have a VPS provisioned.

      <Steps>
        <Step title="Select Run Locally">
          In the <strong>Headless Runtime</strong> card, select the <strong>Run Locally</strong> tab.
        </Step>

        <Step title="Enter your Telegram Bot Token">
          Paste the bot token from [@BotFather](https://t.me/BotFather). This is the only required field.
        </Step>

        <Step title="Optionally restrict to specific users">
          Enter a comma-separated list of Telegram User IDs in the <strong>Allowed User IDs</strong> field to prevent strangers from messaging your bot.
        </Step>

        <Step title="Click Start Runtime">
          The status badge transitions: <strong>Stopped</strong> > <strong>Starting...</strong> > <strong>Running</strong>. When running, the badge shows the Telegram logo and "Connected."
        </Step>

        <Step title="Stop when done">
          Click <strong>Stop Runtime</strong> to halt the local process.
        </Step>
      </Steps>
    </Tab>

    <Tab title="Deploy to VPS" icon="server">
      Use this mode for persistent, always-on runtime. Actionist deploys over SSH — no server scripting required.

      <Steps>
        <Step title="Select Deploy to VPS">
          In the <strong>Headless Runtime</strong> card, select the <strong>Deploy to VPS</strong> tab.
        </Step>

        <Step title="Fill in the Connection section">
          Enter the <strong>Host</strong>, <strong>Port</strong> (default <code>22</code>), and <strong>Username</strong> for your server. Then enter the path to your <strong>SSH Private Key</strong> or click <strong>Browse</strong> to pick the file. Click <strong>Test Connection</strong> to verify access before deploying.
        </Step>

        <Step title="Paste the Clerk M2M machine secret">
          Under <strong>Authentication</strong>, paste your Clerk M2M machine secret (format: <code>ms\_...</code>). This value is <strong>not stored</strong> — you will need to enter it again on the next deploy.

          <Warning>
            Keep the Clerk M2M secret in a password manager. Actionist never stores it locally — you must re-enter it each time you deploy.
          </Warning>
        </Step>

        <Step title="Set up the Telegram Gateway">
          Paste your <strong>Bot Token</strong> and optionally set <strong>Allowed User IDs</strong>.
        </Step>

        <Step title="Click Deploy to VPS">
          If an existing paired runtime is active, a confirmation dialog lists the existing identity and its last-seen time before you proceed. Confirm to replace it.
        </Step>

        <Step title="Monitor the deployment">
          After a successful deploy, three buttons appear: <strong>Check Status</strong>, <strong>Logs</strong> (shows the last 50 lines in a scrollable panel), and <strong>Stop</strong>.
        </Step>
      </Steps>

      <Info>
        Advanced port settings: health port defaults to <code>9090</code>, file-proxy port defaults to <code>7783</code>. Leave the Base URL and File Proxy Secret blank unless you need the web dashboard file panel — the runtime and Telegram features work without them.
      </Info>
    </Tab>
  </Tabs>
</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">Help Assistant</span>
    <h2 className="text-2xl md:text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">Pip on your terms.</h2>

    <p className="text-base text-gray-600 dark:text-gray-400 max-w-3xl">
      Pip is the always-on Actionist concierge. The <strong>Help Assistant</strong> section gives you four separate dials — from a full mute to a tip-by-tip opt-out — so Pip is as helpful or as quiet as you want.
    </p>
  </div>

  <div className="xst-pip-grid">
    <div className="xst-pip-control">
      <div className="xst-pip-ctrl-head">
        <span style={{fontSize:13.5,fontWeight:600}}>Calm mode</span>

        <div className="xst-toggle on">
          <div className="xst-toggle-knob" />
        </div>
      </div>

      <p className="xst-pip-ctrl-desc">Freezes Pip's idle animation and suppresses all contextual tips. Pip remains visible but completely still. Good for long focused sessions.</p>
    </div>

    <div className="xst-pip-control">
      <div className="xst-pip-ctrl-head">
        <span style={{fontSize:13.5,fontWeight:600}}>Hide for an hour</span>
        <span className="xst-badge gray">60 min</span>
      </div>

      <p className="xst-pip-ctrl-desc">Removes Pip entirely for exactly 60 minutes. While active, the button label becomes <strong>Show Pip again</strong> and shows the resumption time. Good for presentations.</p>
    </div>

    <div className="xst-pip-control">
      <div className="xst-pip-ctrl-head">
        <span style={{fontSize:13.5,fontWeight:600}}>Proactive nudges</span>

        <div className="xst-toggle off">
          <div className="xst-toggle-knob" />
        </div>
      </div>

      <p className="xst-pip-ctrl-desc">Off by default. When enabled, Pip surfaces concrete action items inline: an agent missing a model preset, an MCP server waiting for auth, pending marketplace updates. You can also opt in during onboarding.</p>
    </div>

    <div className="xst-pip-control">
      <div className="xst-pip-ctrl-head">
        <span style={{fontSize:13.5,fontWeight:600}}>Tip catalog</span>
        <span className="xst-badge purple">fine-grained</span>
      </div>

      <p className="xst-pip-ctrl-desc">Lists every registered tip with an individual on/off toggle. Disable a tip to prevent it from ever firing again. Re-enable at any time. Keep the tips you find useful, silence the ones you do not.</p>
    </div>
  </div>

  {/* TODO(image): help-assistant-settings — IMAGE SPEC: The Help Assistant settings section in full. Calm mode toggle is ON (active state). 'Hide for an hour' button is visible. Proactive nudges toggle is OFF. Below that, the Tip catalog list shows 3-4 tip entries with individual toggles — at least one toggled off. The 'Reset Pip's position' Reset button is visible at the bottom. Dark background, consistent card style. — replace this CSS mock with the real screenshot */}

  <div className="xst-mock-section" style={{marginTop:18}} aria-label="Help Assistant settings illustration">
    <div className="xst-section-header">
      <div style={{width:32,height:32,borderRadius:8,display:'grid',placeItems:'center',fontSize:15,background:'linear-gradient(135deg,rgb(144 0 255 / 0.18),rgb(200 0 179 / 0.12))',flex:'none'}}>⚡</div>
      <span className="xst-section-title">Help Assistant (Pip)</span>
      <span className="xst-badge purple">All users</span>
    </div>

    <div className="xst-section-body">
      <div className="xst-row">
        <div><div className="xst-row-label">Calm mode</div><div className="xst-row-sub">Freezes animation, silences tips</div></div>

        <div className="xst-row-right">
          <div className="xst-toggle on">
            <div className="xst-toggle-knob" />
          </div>
        </div>
      </div>

      <div className="xst-row">
        <div><div className="xst-row-label">Hide for an hour</div><div className="xst-row-sub">Removes Pip for 60 minutes</div></div>
        <div className="xst-row-right"><span style={{display:'inline-flex',alignItems:'center',padding:'5px 12px',borderRadius:7,fontSize:12,fontWeight:500,cursor:'default',border:'1px solid var(--default-border-color)',background:'rgb(248 248 250)',color:'rgb(60 55 70)'}}>Hide Pip</span></div>
      </div>

      <div className="xst-row">
        <div><div className="xst-row-label">Proactive nudges</div><div className="xst-row-sub">Off by default</div></div>

        <div className="xst-row-right">
          <div className="xst-toggle off">
            <div className="xst-toggle-knob" />
          </div>
        </div>
      </div>

      <div className="xst-row">
        <div><div className="xst-row-label">Tip: "Connect your first app"</div><div className="xst-row-sub">Tip catalog entry</div></div>

        <div className="xst-row-right">
          <div className="xst-toggle on">
            <div className="xst-toggle-knob" />
          </div>
        </div>
      </div>

      <div className="xst-row">
        <div><div className="xst-row-label">Tip: "Set a model preset"</div><div className="xst-row-sub">Tip catalog entry</div></div>

        <div className="xst-row-right">
          <div className="xst-toggle off">
            <div className="xst-toggle-knob" />
          </div>
        </div>
      </div>

      <div className="xst-row">
        <div><div className="xst-row-label">Tip: "Try the schedule editor"</div><div className="xst-row-sub">Tip catalog entry</div></div>

        <div className="xst-row-right">
          <div className="xst-toggle on">
            <div className="xst-toggle-knob" />
          </div>
        </div>
      </div>

      <div className="xst-row">
        <div><div className="xst-row-label">Reset Pip's position</div><div className="xst-row-sub">Returns Pip to bottom-right corner</div></div>
        <div className="xst-row-right"><span style={{display:'inline-flex',alignItems:'center',padding:'5px 12px',borderRadius:7,fontSize:12,fontWeight:500,cursor:'default',border:'1px solid var(--default-border-color)',background:'rgb(248 248 250)',color:'rgb(60 55 70)'}}>Reset</span></div>
      </div>
    </div>
  </div>

  <h3 className="text-xl font-semibold tracking-tight text-gray-900 dark:text-gray-50 mt-10 mb-4">Resetting Pip's position</h3>

  <p className="text-base text-gray-600 dark:text-gray-400 max-w-3xl">
    If you have dragged Pip to an inconvenient location, click <strong>Reset</strong> under "Reset Pip's position." Pip returns to the default bottom-right corner of the screen.
  </p>
</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">Permissions</span>
    <h2 className="text-2xl md:text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">macOS permissions.</h2>
  </div>

  <Note>
    The <strong>Permissions Required</strong> card only appears on macOS. It is not shown on Windows or Linux — the gate is determined by the system platform at runtime.
  </Note>

  <p className="text-base text-gray-600 dark:text-gray-400 mt-4 mb-6 max-w-3xl">
    Actionist needs two macOS permissions to observe your screen and control UI elements for Computer Use. Without both, agents that rely on screen automation cannot run.
  </p>

  <div className="xst-perm-grid">
    <div className="xst-perm-card">
      <div className="xst-perm-name">Screen Recording <span className="xst-badge platform" style={{fontWeight:500,fontSize:10}}>macOS only</span></div>
      <p className="xst-perm-desc">Allows Actionist to see your screen. Required for any agent that uses Computer Use to read on-screen state.</p>
    </div>

    <div className="xst-perm-card">
      <div className="xst-perm-name">Accessibility <span className="xst-badge platform" style={{fontWeight:500,fontSize:10}}>macOS only</span></div>
      <p className="xst-perm-desc">Allows Actionist to control UI elements. Required for any agent that clicks, types, or navigates apps on your behalf.</p>
    </div>
  </div>

  <Steps>
    <Step title="Click Grant access">
      For each permission not yet granted, click the <strong>Grant access</strong> button on its row.
    </Step>

    <Step title="Approve in System Settings">
      macOS System Settings opens at the correct pane. Toggle the permission on for Actionist.
    </Step>

    <Step title="Return to Actionist">
      Switch back to the app. The permission row updates to reflect the granted status.
    </Step>
  </Steps>

  <Tip>
    These permissions are also requested during first-run onboarding. If you skipped them then, grant them here any time — agents will start using Computer Use the next time they run.
  </Tip>
</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">App updates</span>
    <h2 className="text-2xl md:text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">Checking for updates.</h2>
  </div>

  <p className="text-base text-gray-600 dark:text-gray-400 mb-6 max-w-3xl">
    A sticky footer at the bottom of the Settings page shows the current app version and a <strong>Check for Updates</strong> button.
  </p>

  <div style={{display:'flex',flexWrap:'wrap',gap:12,marginTop:16}}>
    <div className="xst-update-state">
      <div style={{width:32,height:32,borderRadius:8,display:'grid',placeItems:'center',fontSize:14,flex:'none',background:'rgb(72 110 255 / 0.12)'}}>
        <span className="xst-spin">⟳</span>
      </div>

      <div>
        <div style={{fontWeight:600,fontSize:13.5}}>Checking...</div>
        <div style={{fontSize:12,opacity:0.6,marginTop:2}}>Querying the update server</div>
      </div>
    </div>

    <div className="xst-update-state">
      <div style={{width:32,height:32,borderRadius:8,display:'grid',placeItems:'center',fontSize:14,flex:'none',background:'rgb(34 197 94 / 0.12)'}}>✓</div>

      <div>
        <div style={{fontWeight:600,fontSize:13.5}}>You're up to date</div>
        <div style={{fontSize:12,opacity:0.6,marginTop:2}}>Green check — no update available</div>
      </div>
    </div>

    <div className="xst-update-state">
      <div style={{width:32,height:32,borderRadius:8,display:'grid',placeItems:'center',fontSize:14,flex:'none',background:'rgb(245 158 11 / 0.12)'}}>⚠</div>

      <div>
        <div style={{fontWeight:600,fontSize:13.5}}>Update check failed</div>
        <div style={{fontSize:12,opacity:0.6,marginTop:2}}>Amber — usually a transient network blip</div>
      </div>
    </div>
  </div>

  <Steps>
    <Step title="Click Check for Updates">
      The button shows <strong>Checking...</strong> with a spinner while the update server is queried.
    </Step>

    <Step title="Read the result">
      <Check><strong>You're up to date</strong> — a green checkmark confirms no update is available.</Check>
      If the check fails, an amber <strong>Update check failed</strong> message appears instead.
    </Step>

    <Step title="Retry if needed">
      Both states auto-reset to idle after 5 seconds. Click the button again to retry.
    </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">Best practices</span>
    <h2 className="text-2xl md:text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">Getting the most out of Settings.</h2>
  </div>

  <AccordionGroup>
    <Accordion title="Test a credential before you rotate it" icon="flask-conical">
      Use <strong>Test now</strong> to confirm the current key is still valid before rotating. If it is already broken, rotating wastes a round-trip of updating every dependent agent — you will know immediately that a fresh key is needed.
    </Accordion>

    <Accordion title="The Delete button is an intentional safety gate" icon="shield">
      The <strong>Delete</strong> button stays disabled as long as any consumer — agent, model preset, skill, channel, MCP server — references the credential. Read the tooltip: it tells you exactly what is blocking deletion ("Unbind consumers first"). This prevents silent breakage across your workforce.
    </Accordion>

    <Accordion title="Language switching is instant and offline-resilient" icon="globe">
      The chosen locale is saved locally on your device, not to the backend. It survives app restarts and backend outages. There is no separate save step — the change takes effect the moment you select a locale.
    </Accordion>

    <Accordion title="VPS Clerk M2M secret: keep it in a password manager" icon="key">
      The Clerk M2M machine secret (<code>ms\_...</code>) is never stored by Actionist — by design. You re-enter it on every deploy. Store it in a password manager alongside your other deployment secrets.
    </Accordion>

    <Accordion title="Calm mode vs Hide for an hour" icon="moon">
      These two controls are distinct. <strong>Calm mode</strong> keeps Pip visible but freezes the animation and silences tips — good for long focused sessions. <strong>Hide for an hour</strong> removes Pip entirely for exactly 60 minutes — good for presentations or calls where you do not want the character visible.
    </Accordion>

    <Accordion title="Tip catalog for fine-grained Pip control" icon="list-checks">
      If one specific tip fires too often but others are useful, disable only that one in the <strong>Tip catalog</strong>. It will never fire again unless you re-enable it. You do not have to choose between all tips or no tips.
    </Accordion>

    <Accordion title="Proactive nudges are low-noise by default" icon="bell">
      Nudges are off until you opt in. When enabled, they fire only when Pip detects a concrete gap: an agent without a model preset, an MCP server waiting for auth, or pending marketplace updates. They are not marketing prompts.
    </Accordion>

    <Accordion title="Update check errors are usually transient" icon="refresh-cw">
      If <strong>Check for Updates</strong> returns "Update check failed," the button auto-resets after 5 seconds. Click it again — most failures are network blips.
    </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">Configure once</span>

      <h2 className="text-2xl md:text-3xl font-semibold tracking-tight text-white leading-tight">
        Your agents handle the rest.
      </h2>

      <p className="text-base md:text-lg text-white/85">
        Add your credentials, set your language, deploy the runtime — then let Actionist run.
      </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">
    Credentials encrypted at rest, never revealed after save.<br />
    Language saved locally · Vault-backed secrets · Per-agent scoping · Nothing leaves your workspace.
  </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={3}>
    <Card title="Credentials" icon="key" href="/Folders/credentials">
      Deep-dive into the vault: how credentials are bound, rotated, and scoped to individual agents.
    </Card>

    <Card title="Cloud runtime" icon="cloud" href="/Folders/cloud">
      Learn how Headless Runtime keeps agents firing when your laptop is closed.
    </Card>

    <Card title="Billing" icon="receipt" href="/Folders/billing">
      Understand plans, seats, usage, and the Stripe portal.
    </Card>

    <Card title="Agents" icon="users" href="/Folders/agents">
      Manage the agents that consume the credentials and runtimes you configure here.
    </Card>

    <Card title="Apps" icon="layout-grid" href="/apps">
      Install integrations — credentials are often auto-saved when you connect an app.
    </Card>

    <Card title="Getting started" icon="rocket" href="/Folders/getting-started">
      macOS permissions are also covered in the first-run onboarding guide.
    </Card>
  </Columns>
</div>