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

# Help & Support

> Report bugs, track feature requests, and reach the Actionist team, without leaving the app.

<div className="mxp-hero xc-border">
  <div className="exp-eyebrow mxp-rise">BUILT INTO THE APP</div>

  <h2 className="mxp-hero-title mxp-rise" style={{animationDelay:'0.06s'}}>
    Your support channel, <span style={{background:'linear-gradient(90deg,#24A4FF,#9000FF,#E3008E)',WebkitBackgroundClip:'text',backgroundClip:'text',color:'transparent'}}>inside the work.</span>
  </h2>

  <p className="mxp-hero-dek mxp-rise" style={{animationDelay:'0.13s'}}>
    Report a bug, suggest a feature, or ask us anything. We reply within one business day, and every status change shows up here as it happens, no browser tab 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 idea</span>
    <h2 className="text-2xl md:text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">Not a ticket portal. A pipeline.</h2>

    <p className="text-base text-gray-600 dark:text-gray-400 max-w-3xl">
      Support lives at the same address as your work: no browser tab, no email thread, no guessing whether your report landed.
    </p>
  </div>

  <Columns cols={2}>
    <Card title="Somewhere else" icon="external-link">
      You file a ticket in a browser portal, receive an auto-reply by email, and periodically check back hoping something changed. Context lives in five different tabs.
    </Card>

    <Card title="Inside Actionist" icon="life-buoy">
      You raise the ticket from the app, attach a screenshot or recording, optionally include the day's diagnostic log in one click, and watch status advance in a structured pipeline, right here, as it happens.
    </Card>
  </Columns>

  <Note>
    The response SLA shown in the app is "within one business day." This is the current UI string. Confirm with the team if you need a contractual guarantee for your use case.
  </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">Ticket types</span>
    <h2 className="text-2xl md:text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">Three types, each with its own pipeline.</h2>

    <p className="text-base text-gray-600 dark:text-gray-400 max-w-3xl">
      Pick the type when you raise a ticket. The pipeline you see on the detail view then matches how that type of report actually moves through the queue. Select a type to watch its stages animate:
    </p>
  </div>

  <div className="xsp-psw exp-tool-shell xc-try">
    <div className="mxp-srch-chips">
      <label htmlFor="xt-b"><input className="mxp-r" type="radio" name="xt" id="xt-b" defaultChecked />Bug report</label>
      <label htmlFor="xt-f"><input className="mxp-r" type="radio" name="xt" id="xt-f" />Feature request</label>
      <label htmlFor="xt-g"><input className="mxp-r" type="radio" name="xt" id="xt-g" />General support</label>
    </div>

    {/* Bug report panel */}

    <div className="xsp-pipe-panel xsp-pp-bug">
      <div className="xsp-pipeline">
        <div className="xsp-pn">
          <strong>Submitted</strong>
          <span>Received and under review</span>
        </div>

        <div className="xsp-plk" />

        <div className="xsp-pn is-current">
          <strong>Verified</strong>
          <span>Bug confirmed as reproducible</span>
        </div>

        <div className="xsp-plk d2" />

        <div className="xsp-pn">
          <strong>Fixed</strong>
          <span>Resolved, ships in next update</span>
        </div>

        <div className="xsp-plk d3" />

        <div className="xsp-pn">
          <strong>Closed</strong>
          <span>No further action needed</span>
        </div>
      </div>

      <div style={{display:'flex',flexDirection:'column',gap:'6px',marginTop:'14px'}}>
        <div className="xsp-diag-row"><span className="xsp-pill xsp-pill-submitted">Submitted</span><span>Your report has been received and is under review.</span></div>
        <div className="xsp-diag-row"><span className="xsp-pill xsp-pill-verified">Verified</span><span>The team has confirmed the bug is reproducible. Not yet fixed, but acknowledged.</span></div>
        <div className="xsp-diag-row"><span className="xsp-pill xsp-pill-fixed">Fixed</span><span>The issue has been resolved. Usually shipped in the next update.</span></div>
        <div className="xsp-diag-row"><span className="xsp-pill xsp-pill-closed">Closed</span><span>No further action needed.</span></div>
      </div>
    </div>

    {/* Feature request panel */}

    <div className="xsp-pipe-panel xsp-pp-feat">
      <div className="xsp-pipeline">
        <div className="xsp-pn">
          <strong>Submitted</strong>
          <span>Received and being considered</span>
        </div>

        <div className="xsp-plk" />

        <div className="xsp-pn is-current">
          <strong>Approved</strong>
          <span>On the roadmap, committed</span>
        </div>

        <div className="xsp-plk d2" />

        <div className="xsp-pn">
          <strong>Implemented</strong>
          <span>Feature has shipped</span>
        </div>

        <div className="xsp-plk d3" />

        <div className="xsp-pn">
          <strong>Closed</strong>
          <span>Complete</span>
        </div>
      </div>

      <div style={{display:'flex',flexDirection:'column',gap:'6px',marginTop:'14px'}}>
        <div className="xsp-diag-row"><span className="xsp-pill xsp-pill-submitted">Submitted</span><span>Your request has been received and is being considered.</span></div>
        <div className="xsp-diag-row"><span className="xsp-pill xsp-pill-approved">Approved</span><span>The feature is on the roadmap. Not yet built, but committed.</span></div>
        <div className="xsp-diag-row"><span className="xsp-pill xsp-pill-implemented">Implemented</span><span>The feature has shipped.</span></div>
        <div className="xsp-diag-row"><span className="xsp-pill xsp-pill-closed">Closed</span><span>Complete.</span></div>
      </div>
    </div>

    {/* General support panel */}

    <div className="xsp-pipe-panel xsp-pp-gen">
      <div className="xsp-pipeline">
        <div className="xsp-pn">
          <strong>Submitted</strong>
          <span>Question received</span>
        </div>

        <div className="xsp-plk" />

        <div className="xsp-pn is-current">
          <strong>Answered</strong>
          <span>Team has replied. Check the Activity thread</span>
        </div>

        <div className="xsp-plk d2" />

        <div className="xsp-pn">
          <strong>Closed</strong>
          <span>Resolved</span>
        </div>
      </div>

      <div style={{display:'flex',flexDirection:'column',gap:'6px',marginTop:'14px'}}>
        <div className="xsp-diag-row"><span className="xsp-pill xsp-pill-submitted">Submitted</span><span>Your question has been received.</span></div>
        <div className="xsp-diag-row"><span className="xsp-pill xsp-pill-answered">Answered</span><span>The team has replied. Check the Activity thread.</span></div>
        <div className="xsp-diag-row"><span className="xsp-pill xsp-pill-closed">Closed</span><span>Resolved.</span></div>
      </div>
    </div>
  </div>

  <div className="exp-surface-grid" style={{marginTop:'22px'}}>
    <div className="exp-surface-tile">
      <strong>Bug reports include repro steps</strong> and ideally a screen recording so the team can reproduce the exact failure path before investigating.
    </div>

    <div className="exp-surface-tile">
      <strong>Feature requests work best as problems.</strong> "I need bulk CSV import because I manage 50+ agents" gives the team far more than "add CSV import."
    </div>

    <div className="exp-surface-tile">
      <strong>Approved ≠ Implemented.</strong> Approved means on the roadmap. Implemented means shipped. Do not mistake the earlier stage for completion.
    </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">Navigation</span>
    <h2 className="text-2xl md:text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">Getting to Help & Support.</h2>
  </div>

  <Steps>
    <Step title="Click the lifebuoy icon" icon="life-buoy">
      Look for the lifebuoy in the <strong>bottom section</strong> of the left sidebar. It is always visible. No need to scroll or open a settings panel.
    </Step>

    <Step title="Read the stats banner" icon="chart-column">
      Three cards load immediately: <strong>Bugs</strong>, <strong>Feature requests</strong>, and <strong>General support</strong>: each showing counts at each pipeline stage. This gives you a live snapshot of your open reports before looking at any individual ticket.
    </Step>

    <Step title="Browse your submissions" icon="list">
      Below the stats is the <strong>All submissions</strong> table. Columns show type, title, status, and last-updated time. Tickets with new admin activity carry a <strong>New</strong> badge; that badge clears the moment you open the ticket.
    </Step>
  </Steps>

  {/* TODO(image): support-list-view. IMAGE SPEC: Full-page screenshot of the Support list view: stats banner at top with three cards (Bug count, Feature request count, General support count) and pipeline stage breakdowns visible on each card; filter pills (All / Bugs / Features / General) below the banner; Search title input; All submissions table with sample tickets showing type icons, titles, status pills, and at least one ticket with a 'New' badge highlighted. Replace this CSS mock with the real screenshot */}

  <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">Help & Support</span>
    </div>

    <div style={{padding:'18px'}}>
      <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:'12px',marginBottom:'16px'}}>
        <div className="xsp-mock-stat-card">
          <div style={{width:'28px',height:'28px',borderRadius:'7px',flex:'none',marginTop:'2px',background:'rgb(255 0 104 / 0.14)'}} />

          <div>
            <div style={{fontSize:'12px',fontWeight:600,marginBottom:'6px'}}>Bug reports</div>

            <div style={{display:'flex',flexWrap:'wrap',gap:'4px'}}>
              <span className="xsp-mock-stage">Submitted <b>2</b></span>
              <span className="xsp-mock-stage">Verified <b>1</b></span>
              <span className="xsp-mock-stage">Fixed <b>0</b></span>
            </div>
          </div>
        </div>

        <div className="xsp-mock-stat-card">
          <div style={{width:'28px',height:'28px',borderRadius:'7px',flex:'none',marginTop:'2px',background:'rgb(200 0 179 / 0.14)'}} />

          <div>
            <div style={{fontSize:'12px',fontWeight:600,marginBottom:'6px'}}>Feature requests</div>

            <div style={{display:'flex',flexWrap:'wrap',gap:'4px'}}>
              <span className="xsp-mock-stage">Submitted <b>3</b></span>
              <span className="xsp-mock-stage">Approved <b>1</b></span>
              <span className="xsp-mock-stage">Implemented <b>2</b></span>
            </div>
          </div>
        </div>

        <div className="xsp-mock-stat-card">
          <div style={{width:'28px',height:'28px',borderRadius:'7px',flex:'none',marginTop:'2px',background:'rgb(72 110 255 / 0.14)'}} />

          <div>
            <div style={{fontSize:'12px',fontWeight:600,marginBottom:'6px'}}>General support</div>

            <div style={{display:'flex',flexWrap:'wrap',gap:'4px'}}>
              <span className="xsp-mock-stage">Submitted <b>1</b></span>
              <span className="xsp-mock-stage">Answered <b>2</b></span>
            </div>
          </div>
        </div>
      </div>

      <div style={{display:'flex',alignItems:'center',gap:'8px',marginBottom:'12px',flexWrap:'wrap'}}>
        <span className="xsp-mock-fpill active">All</span>
        <span className="xsp-mock-fpill">Bugs</span>
        <span className="xsp-mock-fpill">Features</span>
        <span className="xsp-mock-fpill">General</span>
        <div style={{marginLeft:'auto',fontSize:'12px',padding:'4px 12px',borderRadius:'7px',border:'1px solid var(--default-border-color)',background:'#fff',opacity:0.45,fontStyle:'italic',minWidth:'160px'}}>Search title…</div>
      </div>

      <div>
        <div className="xsp-mock-tr" style={{fontSize:'10.5px',fontWeight:700,letterSpacing:'0.08em',textTransform:'uppercase',opacity:0.45,paddingBottom:'8px'}}>
          <span className="xsp-mock-tc xsp-tc-type">Type</span>
          <span className="xsp-mock-tc xsp-tc-title">Title</span>
          <span className="xsp-mock-tc xsp-tc-status">Status</span>
          <span className="xsp-mock-tc xsp-tc-time">Updated</span>
        </div>

        <div className="xsp-mock-tr">
          <span className="xsp-mock-tc xsp-tc-type"><span className="xsp-pill" style={{background:'rgb(255 0 104 / 0.1)',color:'#FF0068',border:'1px solid rgb(255 0 104 / 0.3)'}}>Bug</span></span>
          <span className="xsp-mock-tc xsp-tc-title">Login button unresponsive after 2FA on Safari iOS <span className="xsp-new-badge-sm">New</span></span>
          <span className="xsp-mock-tc xsp-tc-status"><span className="xsp-pill xsp-pill-verified">Verified</span></span>
          <span className="xsp-mock-tc xsp-tc-time" style={{opacity:0.45,fontSize:'11.5px'}}>2 hr ago</span>
        </div>

        <div className="xsp-mock-tr">
          <span className="xsp-mock-tc xsp-tc-type"><span className="xsp-pill" style={{background:'rgb(200 0 179 / 0.1)',color:'#C800B3',border:'1px solid rgb(200 0 179 / 0.3)'}}>Feature</span></span>
          <span className="xsp-mock-tc xsp-tc-title">Bulk CSV import for skills</span>
          <span className="xsp-mock-tc xsp-tc-status"><span className="xsp-pill xsp-pill-approved">Approved</span></span>
          <span className="xsp-mock-tc xsp-tc-time" style={{opacity:0.45,fontSize:'11.5px'}}>Yesterday</span>
        </div>

        <div className="xsp-mock-tr">
          <span className="xsp-mock-tc xsp-tc-type"><span className="xsp-pill" style={{background:'rgb(72 110 255 / 0.1)',color:'#486EFF',border:'1px solid rgb(72 110 255 / 0.3)'}}>General</span></span>
          <span className="xsp-mock-tc xsp-tc-title">How do I share an agent with a teammate?</span>
          <span className="xsp-mock-tc xsp-tc-status"><span className="xsp-pill xsp-pill-answered">Answered</span></span>
          <span className="xsp-mock-tc xsp-tc-time" style={{opacity:0.45,fontSize:'11.5px'}}>3 days ago</span>
        </div>

        <div className="xsp-mock-tr">
          <span className="xsp-mock-tc xsp-tc-type"><span className="xsp-pill" style={{background:'rgb(255 0 104 / 0.1)',color:'#FF0068',border:'1px solid rgb(255 0 104 / 0.3)'}}>Bug</span></span>
          <span className="xsp-mock-tc xsp-tc-title">Workflow editor freezes on large branching diagrams</span>
          <span className="xsp-mock-tc xsp-tc-status"><span className="xsp-pill xsp-pill-submitted">Submitted</span></span>
          <span className="xsp-mock-tc xsp-tc-time" style={{opacity:0.45,fontSize:'11.5px'}}>4 days ago</span>
        </div>
      </div>
    </div>
  </div>

  <AccordionGroup>
    <Accordion title="Filtering and searching" icon="funnel" defaultOpen={true}>
      Use the filter pills (<strong>All</strong>, <strong>Bugs</strong>, <strong>Features</strong>, <strong>General</strong>) to narrow the table to one type. To find a specific ticket by title, type in the <strong>Search title</strong> box. The search fires after you have typed at least 3 characters (a hint appears for shorter input) with a short debounce so results update as you type. The list is paginated at 20 tickets per page.
    </Accordion>

    <Accordion title="The New badge" icon="bell">
      A <strong>New</strong> pill appears on any ticket that has received a new admin reply or a status update since you last opened it. Opening the ticket clears the badge. It reappears the next time new activity arrives.
    </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">Raise a ticket</span>
    <h2 className="text-2xl md:text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">The two-step wizard.</h2>

    <p className="text-base text-gray-600 dark:text-gray-400 max-w-3xl">
      Click <strong>Raise a Ticket</strong> in the banner to open the wizard. Two steps: pick a type, then fill in the details. Below is what each step looks like:
    </p>
  </div>

  {/* Step 1 mock */}

  <div className="mxp-window">
    <div style={{display:'flex',alignItems:'center',padding:'12px 20px',borderBottom:'1px solid var(--default-border-color)',fontSize:'12px',fontWeight:600,letterSpacing:'0.06em',textTransform:'uppercase',opacity:0.65}}>
      <span style={{padding:'4px 12px',borderRadius:'999px',background:'rgb(144 0 255 / 0.14)',color:'rgb(144 0 255)',opacity:1}}>Step 1. Pick a type</span>

      <span style={{width:'24px',height:'1px',background:'var(--default-border-color)',flex:'none',display:'block'}} />

      <span style={{padding:'4px 12px',borderRadius:'999px'}}>Step 2, Fill in details</span>
    </div>

    <div className="exp-surface-grid">
      <div className="exp-surface-tile xsp-tc">
        <div style={{width:'32px',height:'32px',borderRadius:'8px',display:'flex',alignItems:'center',justifyContent:'center',marginBottom:'12px',background:'rgb(255 0 104 / 0.12)'}}>
          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#FF0068" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M12 8a4 4 0 0 0-4 4v4" />

            <path d="M12 8a4 4 0 0 1 4 4v4" />

            <path d="M12 2v6" />

            <path d="M4 6l2 2" />

            <path d="M20 6l-2 2" />

            <path d="M4 18l2-2" />

            <path d="M20 18l-2-2" />

            <path d="M8 20h8" />
          </svg>
        </div>

        <strong>Bug report</strong>
        <p>Something isn't working the way it should. Reports include repro steps and ideally a recording.</p>
      </div>

      <div className="exp-surface-tile xsp-tc">
        <div style={{width:'32px',height:'32px',borderRadius:'8px',display:'flex',alignItems:'center',justifyContent:'center',marginBottom:'12px',background:'rgb(72 110 255 / 0.12)'}}>
          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#486EFF" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <circle cx="12" cy="12" r="10" />

            <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />

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

        <strong>General support</strong>
        <p>A question, an account issue, or a how-do-I. Anything that doesn't fit the other two.</p>
      </div>

      <div className="exp-surface-tile xsp-tc">
        <div style={{width:'32px',height:'32px',borderRadius:'8px',display:'flex',alignItems:'center',justifyContent:'center',marginBottom:'12px',background:'rgb(200 0 179 / 0.12)'}}>
          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#C800B3" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5" />

            <path d="M9 18h6" />

            <path d="M10 22h4" />
          </svg>
        </div>

        <strong>Feature request</strong>
        <p>A new capability or an improvement to an existing one. The more "why" the better.</p>
      </div>
    </div>
  </div>

  {/* Step 2 mock */}

  <div className="mxp-window" style={{marginTop:'16px'}}>
    <div style={{display:'flex',alignItems:'center',padding:'12px 20px',borderBottom:'1px solid var(--default-border-color)',fontSize:'12px',fontWeight:600,letterSpacing:'0.06em',textTransform:'uppercase',opacity:0.65}}>
      <span style={{padding:'4px 12px',borderRadius:'999px'}}>Step 1. Pick a type</span>

      <span style={{width:'24px',height:'1px',background:'var(--default-border-color)',flex:'none',display:'block'}} />

      <span style={{padding:'4px 12px',borderRadius:'999px',background:'rgb(144 0 255 / 0.14)',color:'rgb(144 0 255)',opacity:1}}>Step 2, Fill in details</span>
    </div>

    <div className="xsp-form-mock">
      <div style={{display:'flex',flexDirection:'column',gap:'14px'}}>
        <div>
          <div className="xsp-form-field-label">Title <span style={{color:'rgb(255 0 104)',marginLeft:'2px'}}>\*</span></div>
          <div className="xsp-form-input-mock">Login button unresponsive after 2FA on Safari iOS</div>
          <div style={{fontSize:'11px',opacity:0.45,marginTop:'4px',fontFamily:'"JetBrains Mono",monospace'}}>45/120 characters · keep it specific</div>
        </div>

        <div>
          <div className="xsp-form-field-label">Description <span style={{color:'rgb(255 0 104)',marginLeft:'2px'}}>\*</span></div>
          <div className="xsp-form-input-mock" style={{minHeight:'56px'}}>After completing 2FA on iPhone Safari, tapping <strong>Login</strong> does nothing. Refreshing the page clears the session. Repro rate: 9/10 attempts.</div>
        </div>

        <div>
          <div className="xsp-form-field-label">Related area</div>
          <div className="xsp-form-input-mock">Account</div>
        </div>

        <div className="xsp-diag-row">
          <div className="xsp-checkbox-mock" />

          <span style={{fontSize:'13px'}}>Include diagnostic logs to help us debug</span>
          <span className="xsp-view-link">View</span>
        </div>
      </div>

      <div className="exp-glass-card xsp-form-tips">
        <div className="xsp-form-tips-title">Bug tips</div>

        <ul style={{margin:'0',padding:'0',listStyle:'none'}}>
          <li>Describe the exact steps to reproduce, not just the result.</li>
          <li>Include the OS, browser, and app version.</li>
          <li>A screen recording is worth a thousand words.</li>
          <li>One bug per ticket. Easier to track and close.</li>
        </ul>
      </div>
    </div>
  </div>

  <Steps>
    <Step title="Step 1 — pick a type" icon="layout-grid">
      Three cards appear: <strong>Bug report</strong>, <strong>General support</strong>, <strong>Feature request</strong>. Click one to advance to the form. Each card includes a one-line description to help you choose the right channel.

      {/* TODO(image): raise-ticket-step1. IMAGE SPEC: Step 1 of the 'Raise a new ticket' modal. Three cards side-by-side: 'Bug report' (bug icon, description 'Something isn't working the way it should. Reports include repro steps and ideally a recording.'), 'General support' (circle-help icon, description 'A question, an account issue, or a how-do-I. Anything that doesn't fit the other two.'), and 'Feature request' (lightbulb icon, description 'A new capability or an improvement to an existing one. The more why the better.'). The modal header reads 'Raise a new ticket' and the step label reads 'Pick a type'. Replace this CSS mock with the real screenshot */}

      <div className="mxp-window">
        <div className="mxp-window-bar" style={{justifyContent:'space-between'}}>
          <span className="mxp-window-title" style={{marginLeft:0,opacity:1,fontSize:'14px',fontWeight:600,fontFamily:'inherit',letterSpacing:'normal'}}>Raise a new ticket</span>
          <span style={{fontSize:'14px',opacity:0.4,cursor:'default'}}>✕</span>
        </div>

        <div style={{padding:'8px 20px',fontSize:'11px',fontWeight:700,letterSpacing:'0.1em',textTransform:'uppercase',opacity:0.5,borderBottom:'1px solid var(--default-border-color)'}}>Pick a type</div>

        <div className="exp-surface-grid" style={{padding:'16px 20px',paddingTop:'8px'}}>
          <div className="exp-surface-tile xsp-tc">
            <div style={{width:'32px',height:'32px',borderRadius:'8px',display:'flex',alignItems:'center',justifyContent:'center',marginBottom:'12px',background:'rgb(255 0 104 / 0.12)'}}>
              <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#FF0068" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M12 8a4 4 0 0 0-4 4v4" />

                <path d="M12 8a4 4 0 0 1 4 4v4" />

                <path d="M12 2v6" />

                <path d="M4 6l2 2" />

                <path d="M20 6l-2 2" />

                <path d="M4 18l2-2" />

                <path d="M20 18l-2-2" />

                <path d="M8 20h8" />
              </svg>
            </div>

            <strong>Bug report</strong>
            <p>Something isn't working the way it should. Reports include repro steps and ideally a recording.</p>
          </div>

          <div className="exp-surface-tile xsp-tc">
            <div style={{width:'32px',height:'32px',borderRadius:'8px',display:'flex',alignItems:'center',justifyContent:'center',marginBottom:'12px',background:'rgb(72 110 255 / 0.12)'}}>
              <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#486EFF" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <circle cx="12" cy="12" r="10" />

                <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />

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

            <strong>General support</strong>
            <p>A question, an account issue, or a how-do-I. Anything that doesn't fit the other two.</p>
          </div>

          <div className="exp-surface-tile xsp-tc">
            <div style={{width:'32px',height:'32px',borderRadius:'8px',display:'flex',alignItems:'center',justifyContent:'center',marginBottom:'12px',background:'rgb(200 0 179 / 0.12)'}}>
              <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#C800B3" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5" />

                <path d="M9 18h6" />

                <path d="M10 22h4" />
              </svg>
            </div>

            <strong>Feature request</strong>
            <p>A new capability or an improvement to an existing one. The more "why" the better.</p>
          </div>
        </div>
      </div>
    </Step>

    <Step title="Step 2 — fill in the details" icon="file-text">
      The form opens. A tab bar at the top lets you switch type without losing your draft. Fill in the required fields:

      * **Title**: 8 to 120 characters. The placeholder changes per type.
      * **Description**: at least 20 characters.
      * **Related area**: choose the area of the app: Actions, Apps, Agent, Skills, Workflows, Account, Billing, or Other.

      A contextual tips sidebar on the right shows per-type writing guidance.

      {/* TODO(image): raise-ticket-step2-bug. IMAGE SPEC: Step 2 of the wizard with Bug type selected. Title field showing 'Login button unresponsive after 2FA on Safari iOS'. Description field partially filled. Related area dropdown visible. Diagnostic log checkbox ('Include diagnostic logs to help us debug') and 'View' link visible in the lower section. Tips sidebar on the right showing bug-specific guidance text. Character counter '45/120 characters · keep it specific' visible below the title field. Replace this CSS mock with the real screenshot */}

      <div style={{margin:'10px 0',padding:'10px 14px',borderRadius:'8px',borderLeft:'3px solid rgb(144 0 255/0.4)',background:'rgb(144 0 255/0.04)',fontSize:'12.5px',opacity:0.75,fontStyle:'italic'}}>
        See the Step 2 wizard mock rendered above. It shows the exact fields and tips layout described here.
      </div>
    </Step>

    <Step title="Attach screenshots or recordings" icon="paperclip">
      Drag files onto the attachment drop zone or click to browse. You can attach up to 5 files, each up to 10 MB. Accepted formats: `.png`, `.jpg`, `.jpeg`, `.mp4`, `.mov`. Remove any file individually before submitting.

      <Info>
        Video files (`.mp4`, `.mov`) upload successfully and are visible to support admins. The in-app lightbox shows a placeholder, download the file to play it.
      </Info>
    </Step>

    <Step title="Opt in to diagnostic logs (bug tickets on desktop)" icon="file-code">
      This step only applies to bug tickets raised from the desktop app. Tick <strong>Include diagnostic logs to help us debug</strong> to bundle today's app log with the ticket. Click <strong>View</strong> first to preview what will be sent before you consent.

      See [Diagnostic log consent](#diagnostic-log-consent) below for full detail.
    </Step>

    <Step title="Submit" icon="check">
      Click the submit button. <strong>Report this bug</strong>, <strong>Ask a question</strong>, or <strong>Suggest a feature</strong> depending on type. If you try to close the wizard with unsaved input, a confirmation dialog appears: <strong>Discard</strong> to abandon the draft, or <strong>Keep editing</strong> to return to it. On success the modal closes and the list refreshes automatically.
    </Step>
  </Steps>

  <Warning>
    If you close the wizard before submitting, you will see a "Discard this ticket?" confirmation. Click <strong>Keep editing</strong> to go back to your draft. It is not saved once you confirm discard.
  </Warning>
</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">Diagnostic logs</span>
    <h2 id="diagnostic-log-consent" className="text-2xl md:text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">Diagnostic log consent.</h2>

    <p className="text-base text-gray-600 dark:text-gray-400 max-w-3xl">
      One checkbox bundles the day's app log with a bug ticket. No log-hunting, no copy-paste. Entirely opt-in.
    </p>
  </div>

  <Columns cols={3}>
    <Card title="What gets sent" icon="file-text">
      Today's app log (<code>app-YYYY-MM-DD.log</code>). The log is admin-only. It does not appear in your ticket attachments list.
    </Card>

    <Card title="Preview and consent" icon="eye">
      Click <strong>View</strong> to read the last 256 KB before you tick the box. If the file is larger, the preview is truncated but the full file is always uploaded. The label <em>"Showing last 256 KB of \[size]. Full file is uploaded."</em> appears when truncation occurs.
    </Card>

    <Card title="When you will not see it" icon="slash">
      The checkbox appears on bug tickets raised from the desktop app, because the log file it attaches is written on your own machine. It is not shown in the web app, and the preview reports that no log file was found when you are running a development build.
    </Card>
  </Columns>

  {/* Diagnostic log preview mock */}

  <div className="mxp-window" style={{marginTop:'24px'}}>
    <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">app-2026-06-11.log (preview)</span>
    </div>

    <div className="xsp-log-body">
      <div>\[2026-06-11 09:14:02] INFO  scheduler:start agents=4 interval=60s</div>
      <div>\[2026-06-11 09:14:03] INFO  ipc:ready channel=main-renderer</div>
      <div>\[2026-06-11 09:14:11] INFO  auth:clerk status=signed-in user=[you@example.com](mailto:you@example.com)</div>
      <div>\[2026-06-11 09:22:47] WARN  workflow:run id=wf\_8Bx2 step=send-email retry=1</div>
      <div>\[2026-06-11 09:22:51] ERROR workflow:run id=wf\_8Bx2 step=send-email error="SMTP\_TIMEOUT after 4000ms"</div>
      <div>\[2026-06-11 11:45:12] INFO  mcp:connect server=gmail status=ok</div>
      <div>\[2026-06-11 14:30:00] INFO  schedule:fire agent=maya task="daily-digest"</div>
      <div>\[2026-06-11 14:30:09] INFO  schedule:complete agent=maya duration=8741ms</div>
    </div>

    <div className="xsp-log-footer">Showing last 256 KB of 1.2 MB. Full file is uploaded.</div>
  </div>

  {/* TODO(image): diagnostic-log-preview. IMAGE SPEC: Diagnostic log preview panel open inside the bug-ticket Step 2 form. Shows several lines of timestamped log content. Footer bar at the bottom of the preview reads 'Showing last 256 KB of 1.2 MB. Full file is uploaded.' The 'Include diagnostic logs to help us debug' checkbox above the preview is ticked. The 'View' link is visible next to the checkbox label. Replace this CSS mock with the real screenshot */}

  <div style={{margin:'20px 0'}}>
    <div className="xsp-diag-row" style={{marginBottom:'10px',maxWidth:'520px'}}>
      <div className="xsp-checkbox-mock" />

      <span style={{fontSize:'13px'}}>Include diagnostic logs to help us debug</span>
      <span className="xsp-view-link">View</span>
    </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">app-2026-06-11.log (preview)</span>
      </div>

      <div className="xsp-log-body">
        <div>\[2026-06-11 09:14:02] INFO  scheduler:start agents=4 interval=60s</div>
        <div>\[2026-06-11 09:14:03] INFO  ipc:ready channel=main-renderer</div>
        <div>\[2026-06-11 09:14:11] INFO  auth:clerk status=signed-in user=[you@example.com](mailto:you@example.com)</div>
        <div>\[2026-06-11 09:22:47] WARN  workflow:run id=wf\_8Bx2 step=send-email retry=1</div>
        <div>\[2026-06-11 09:22:51] ERROR workflow:run id=wf\_8Bx2 step=send-email error="SMTP\_TIMEOUT after 4000ms"</div>
        <div>\[2026-06-11 11:45:12] INFO  mcp:connect server=gmail status=ok</div>
      </div>

      <div className="xsp-log-footer">Showing last 256 KB of 1.2 MB. Full file is uploaded.</div>
    </div>
  </div>

  <Info>
    App logs are only written in packaged, production builds of the desktop app. In development or beta environments the preview may show "No log file found for today.". This is normal. Nothing is uploaded in dev mode.
  </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">Ticket detail</span>
    <h2 className="text-2xl md:text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">Following a ticket after you raise it.</h2>

    <p className="text-base text-gray-600 dark:text-gray-400 max-w-3xl">
      Click any row in the submissions table to open the full ticket. The detail view shows everything in one place: your original description, the pipeline stage, the full conversation thread, and the reply composer. Watch the thread build:
    </p>
  </div>

  <div className="mxp-window">
    {/* Bar */}

    <div className="mxp-window-bar" style={{justifyContent:'space-between'}}>
      <div style={{display:'flex',alignItems:'center',gap:'7px'}}>
        <div className="mxp-window-dot" />

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

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

        <span className="mxp-window-title">ticket · #1042 · Login button unresponsive after 2FA</span>
      </div>

      <span className="xsp-new-badge">New</span>
    </div>

    {/* Progress bar */}

    <div className="xsp-progress-bar">
      <span className="xsp-prog-label done">Submitted</span>

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

      <span className="xsp-prog-label active">Verified</span>

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

      <span className="xsp-prog-label">Fixed</span>

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

      <span className="xsp-prog-label">Closed</span>
    </div>

    {/* Activity thread */}

    <div style={{padding:'16px 18px',display:'flex',flexDirection:'column',gap:'10px'}}>
      <div className="xsp-thread-msg user-msg mxp-s1">
        <div className="xsp-msg-meta"><span className="xsp-who you">You</span><span>Today at 09:31</span></div>
        After completing 2FA on iPhone Safari, tapping Login does nothing. Refreshing clears the session. Repro rate: 9/10 attempts. Diagnostic log attached.
      </div>

      <div className="mxp-s2" style={{display:'flex',alignItems:'center',justifyContent:'center',gap:'6px',padding:'6px 14px',borderRadius:'999px',fontSize:'11px',letterSpacing:'0.05em',textTransform:'uppercase',border:'1px solid var(--default-border-color)',color:'rgb(90 90 110)',background:'rgb(0 0 0 / 0.02)',alignSelf:'center',width:'fit-content',margin:'0 auto',animation:'xfi 0.45s ease both'}}>
        status changed: Submitted <span style={{margin:'0 4px',opacity:0.5}}>→</span> Verified
      </div>

      <div className="xsp-thread-msg admin-msg mxp-s3">
        <div className="xsp-msg-meta"><span className="xsp-who admin">Admin</span><span>Today at 11:14</span></div>
        Thanks for the detailed report. Reproduced the exact flow on Safari 17.4.1 / iOS 17.4. The issue is a race condition in the session cookie write after TOTP validation. We have a fix in review. Will update you once it ships.
      </div>

      <div className="xsp-thread-msg user-msg mxp-s4">
        <div className="xsp-msg-meta"><span className="xsp-who you">You</span><span>Today at 11:22</span></div>
        Appreciate the quick turnaround. Any workaround in the meantime? Trying Chrome on iOS seems to work, but we have users who only use Safari.
      </div>

      <div className="xsp-thread-msg admin-msg mxp-s5">
        <div className="xsp-msg-meta"><span className="xsp-who admin">Admin</span><span>Today at 11:48</span></div>
        Chrome on iOS is a safe workaround for now, you're right that it avoids the issue. The fix targets the next patch release, which we aim to ship within 48 hours.<span className="mxp-caret" />
      </div>
    </div>

    {/* Composer */}

    <div className="xsp-composer">
      <div className="xsp-composer-input">Reply to thread…</div>
      <div className="xsp-composer-btn">Send reply</div>
    </div>
  </div>

  {/* TODO(image): ticket-detail-thread. IMAGE SPEC: Ticket detail view for a Bug report. At the top: original description and a thumbnail attachment. Below: status progress bar with four stages (Submitted → Verified → Fixed → Closed), 'Verified' highlighted as current. Below that: Activity section showing one user message, one Admin-labelled admin reply, and one synthesized status-change event in chronological order. At the bottom: reply composer with 'Send reply' button. Replace this CSS mock with the real screenshot */}

  <p className="text-base text-gray-600 dark:text-gray-400 max-w-3xl">
    The <strong>status progress bar</strong> reflects the pipeline for that ticket's type. Bug tickets show the four-stage bug flow; feature requests show their own four stages; general tickets show their three. The current stage is highlighted.
  </p>

  <p className="text-base text-gray-600 dark:text-gray-400 max-w-3xl mt-4">
    The <strong>Activity</strong> section is chronological. You will see your own messages, replies from the Actionist team labelled <strong>Admin</strong>, and synthesized status-change events when the ticket moves through the pipeline. Type in the composer at the bottom and click <strong>Send reply</strong> to add a message at any open stage.
  </p>

  <Note>
    Once a ticket reaches <strong>Closed</strong> status, the reply composer is disabled and the message "This ticket is closed." appears. If the same issue recurs, click the inline <strong>Raise new ticket</strong> button that appears in the closed-ticket view. It opens a fresh wizard.
  </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">Helper chat</span>
    <h2 className="text-2xl md:text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">Raise a ticket through the Actionist helper.</h2>

    <p className="text-base text-gray-600 dark:text-gray-400 max-w-3xl">
      You don't have to open the wizard. The Actionist helper can guide you through ticket creation conversationally, useful when you spot an issue mid-workflow and don't want to break your flow.
    </p>
  </div>

  <div className="mxp-window" style={{marginBottom:'24px'}}>
    <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 · Actionist helper</span>
    </div>

    <div className="mxp-window-body" style={{minHeight:'auto',padding:'14px 18px'}}>
      <div className="mxp-stream-line mxp-s1"><span className="mxp-stream-time">helper</span><span className="mxp-stream-text">Hi there! I'm here to help. Are you facing a bug, or do you have a question or suggestion for us?</span></div>
      <div className="mxp-stream-line mxp-s2"><span className="mxp-stream-time">you</span><span className="mxp-stream-text">I found a bug with the login flow on Safari iOS.</span></div>
      <div className="mxp-s3" style={{margin:'8px 0'}}><span className="mxp-stream-event">support skill matched, collecting details</span></div>
      <div className="mxp-stream-line mxp-s4"><span className="mxp-stream-time">helper</span><span className="mxp-stream-text">Got it. Bug report. Can you describe what happens and the steps to reproduce it?</span></div>
      <div className="mxp-stream-line mxp-s5"><span className="mxp-stream-time">you</span><span className="mxp-stream-text">After 2FA the login button does nothing. Repros 9 out of 10 times on iPhone Safari.</span></div>
      <div className="mxp-stream-line mxp-s6"><span className="mxp-stream-time">helper</span><span className="mxp-stream-text">Would you like to include today's diagnostic log? I'll show you a preview before attaching anything.<span className="mxp-caret" /></span></div>
    </div>
  </div>

  When you navigate to the Help & Support page, the helper greets you:

  > <em>"Hi \[name]! I'm here to help. Are you facing a bug, or do you have a question or suggestion for us?"</em>

  Click <strong>Start chat</strong> to begin, or type directly in the chat at any time from anywhere in the app.

  <Steps>
    <Step title="Describe the issue or request" icon="message-square">
      Say something like "I found a bug" or "I want to request a feature." The helper identifies the intent and loads the support skill automatically. It is not visible in your skills list and activates transparently.
    </Step>

    <Step title="The helper guides through required fields" icon="list-checks">
      It collects title, description, and related area through conversation. For bug tickets it asks for steps to reproduce before proceeding.
    </Step>

    <Step title="Consent for diagnostic logs and attachments" icon="shield-check">
      The helper asks whether you would like to include the diagnostic log and any attachments before submitting. Nothing is sent without your explicit agreement.
    </Step>

    <Step title="The helper submits on your behalf" icon="check">
      On your approval the ticket is created and immediately appears in your Help & Support list. The same ticket you would have raised through the wizard.
    </Step>
  </Steps>

  <Tip>
    Type "I found a bug with \[area]" or "I have a question about \[topic]" in any Actionist chat to raise a ticket without leaving your current workflow. The helper handles the rest.
  </Tip>
</div>

<div className="w-full py-10 xc-rise">
  <div className="xc-quote">
    <p>I spotted the issue mid-workflow, typed two sentences to the helper, ticked the log checkbox, and the ticket was in the queue before I'd even switched tabs. The whole thing took under a minute.</p>
    <span>Priya: support lead, managing 120+ inbound tickets a week</span>
  </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">Best practices</span>
    <h2 className="text-2xl md:text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">Tips for getting the most from support.</h2>
  </div>

  <AccordionGroup>
    <Accordion title="Search needs at least 3 characters" icon="search">
      If the submissions table seems unresponsive to typing, check that your input is at least 3 characters. Shorter input is silently ignored. The hint "Type at least 3 characters to search" appears below the field for shorter input.
    </Accordion>

    <Accordion title="Preview the diagnostic log before ticking the box" icon="eye">
      Click <strong>View</strong> next to "Include diagnostic logs to help us debug" before enabling the checkbox. The preview shows the last 256 KB of the log file so you can confirm the content before consenting. The log is admin-only and does not appear in your ticket attachments.
    </Accordion>

    <Accordion title="Diagnostic logs only exist in production builds" icon="package">
      If the preview shows "No log file found for today.", you are likely on a development or beta build. App logs are only written in packaged production releases. The diagnostic feature is simply unavailable in that environment.
    </Accordion>

    <Accordion title="Switch ticket type without losing your draft" icon="refresh-cw">
      While on Step 2 of the wizard, use the tab bar at the top to change the ticket type. The title, description, and area fields are preserved when you switch, only the type label updates.
    </Accordion>

    <Accordion title="Video files upload but don't preview in-app" icon="video">
      `.mp4` and `.mov` attachments are accepted, uploaded, and fully visible to support admins. The in-app lightbox shows a placeholder message. Download the file to play it locally.
    </Accordion>

    <Accordion title="Closed ticket? Use the inline button" icon="circle-x">
      When a ticket is <strong>Closed</strong> the reply composer is disabled. If the issue persists, click the inline <strong>Raise new ticket</strong> button in the closed-ticket view to open a fresh wizard.
    </Accordion>

    <Accordion title="Frame feature requests as problems, not solutions" icon="lightbulb">
      The in-app tips sidebar says: "Frame the problem you're trying to solve, not just the solution." A request like "I need bulk CSV import for skills because I manage 50+ agents across clients" gives the team far more to work with than "Add CSV import."
    </Accordion>

    <Accordion title="Approved and Implemented are two different stages" icon="git-commit-horizontal">
      <strong>Approved</strong> means the feature is on the roadmap. The team has accepted it but has not yet built it. <strong>Implemented</strong> means it has shipped. Similarly, <strong>Verified</strong> confirms a bug is reproducible; <strong>Fixed</strong> means it has been resolved. Do not mistake the earlier stage for completion.
    </Accordion>
  </AccordionGroup>
</div>

<hr className="xc-divider" />

<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 click away</span>

      <h2 className="text-2xl md:text-3xl font-semibold tracking-tight text-white leading-tight">
        Something broken or something missing?
      </h2>

      <p className="text-base md:text-lg text-white/85">
        Click the lifebuoy, raise a ticket, and the team will pick it up. Status updates appear here as they happen.
      </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">
    Support lives where your work lives: no context switching, no lost threads.<br />
    Structured pipelines · Status in real time · Agent-assisted creation.
  </p>
</div>

<div className="w-full pb-16">
  <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">Related pages.</h2>
  </div>

  <Columns cols={4}>
    <Card title="Getting started" icon="rocket" href="/Folders/getting-started">
      Find the support icon in the sidebar and get oriented with the full app layout.
    </Card>

    <Card title="Agents" icon="users" href="/Folders/agents">
      Raise a ticket under the Agent area if you run into an issue with agent behavior.
    </Card>

    <Card title="Skills" icon="puzzle" href="/Folders/skills">
      Skills-related tickets belong under the Skills area in the dropdown.
    </Card>

    <Card title="Apps & integrations" icon="layout-grid" href="/apps">
      MCP server and app connection issues route to the Apps area.
    </Card>
  </Columns>
</div>