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

# Workflows

> Design visual automations that combine agents, computer use, and integrations — build once, run on a schedule forever.

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

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

  <p className="mxp-hero-dek mxp-rise" style={{animationDelay:'0.13s'}}>
    Actionist workflows are visual graphs of typed nodes — actions, conditions, loops, tools — wired together into a procedure you design once in the editor and trigger from chat, a schedule, or the Run button.
  </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">Write the procedure once. Run it forever.</h2>

    <p className="text-base text-gray-600 dark:text-gray-400 max-w-3xl">
      Every time you describe the same multi-step task from scratch, you pay twice — once to think it through and once to supervise it. A workflow locks the procedure in so you never repeat yourself.
    </p>
  </div>

  <Columns cols={2}>
    <Card title="An ad-hoc task" icon="message-circle">
      You type the steps, pick the tools, explain the context — every single time. The agent starts fresh. When something changes, you re-explain everything.
    </Card>

    <Card title="An Actionist workflow" icon="git-merge">
      You design the branching logic, variables, and tool calls once in the visual editor. Any run — from the Run button, a chat session, or a recurring schedule — reuses the exact same procedure.
    </Card>
  </Columns>

  <Note>
    Actionist stores workflows in a <strong>graph format (v2)</strong> with typed nodes and wired edges. An older linear format (v1) is preserved for backward compatibility. The visual editor always uses the graph format.
  </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">Under the hood</span>
    <h2 className="text-2xl md:text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">How a workflow moves.</h2>

    <p className="text-base text-gray-600 dark:text-gray-400 max-w-3xl">
      A trigger starts the run. Execution walks the graph node by node, evaluating conditions and loops, until it reaches the end node.
    </p>
  </div>

  <div className="xwf-graph-run">
    <div style={{display:'flex',alignItems:'center',gap:0,flexWrap:'nowrap',overflowX:'auto',paddingBottom:'4px'}}>
      <div className="xwf-gr-node" style={{animationDelay:'0.1s'}}>
        <div className="xwf-gr-dot xwf-done">▶</div>
        <span className="xwf-gr-label">Start</span>
      </div>

      <div className="xwf-gr-edge" style={{animationDelay:'0.3s'}} />

      <div className="xwf-gr-node" style={{animationDelay:'0.55s'}}>
        <div className="xwf-gr-dot xwf-done">✓</div>
        <span className="xwf-gr-label">Action batch</span>
      </div>

      <div className="xwf-gr-edge" style={{animationDelay:'0.8s'}} />

      <div className="xwf-gr-node" style={{animationDelay:'1.0s'}}>
        <div className="xwf-gr-dot xwf-done">✓</div>
        <span className="xwf-gr-label">Action batch</span>
      </div>

      <div className="xwf-gr-edge" style={{animationDelay:'1.25s'}} />

      <div className="xwf-gr-node" style={{animationDelay:'1.5s'}}>
        <div className="xwf-gr-dot xwf-active">◇</div>
        <span className="xwf-gr-label">Condition</span>
      </div>

      <div className="xwf-gr-edge" style={{position:'relative',animationDelay:'1.75s'}}>
        <span className="xwf-gr-branch-label xwf-branch-true">true</span>
      </div>

      <div className="xwf-gr-node" style={{animationDelay:'2.0s'}}>
        <div className="xwf-gr-dot">↻</div>
        <span className="xwf-gr-label">Loop</span>
      </div>

      <div className="xwf-gr-edge" style={{animationDelay:'2.25s'}} />

      <div className="xwf-gr-node" style={{animationDelay:'2.5s'}}>
        <div className="xwf-gr-dot">⊕</div>
        <span className="xwf-gr-label">Merge</span>
      </div>

      <div className="xwf-gr-edge" style={{animationDelay:'2.75s'}} />

      <div className="xwf-gr-node" style={{animationDelay:'3.0s'}}>
        <div className="xwf-gr-dot">■</div>
        <span className="xwf-gr-label">End</span>
      </div>
    </div>

    <div className="xwf-gr-branch-row">
      <div style={{fontSize:'10px',letterSpacing:'0.08em',textTransform:'uppercase',opacity:0.45,marginBottom:'2px'}}>Condition branches</div>

      <div style={{display:'flex',alignItems:'center',gap:'8px',fontFamily:'"JetBrains Mono",monospace',fontSize:'11.5px',opacity:0.75}}>
        <span className="xwf-gr-branch-label xwf-branch-true" style={{position:'static',transform:'none'}}>true</span>
        <span>evaluator passes → enters loop, iterates up to 50×, rejoins at merge</span>
      </div>

      <div style={{display:'flex',alignItems:'center',gap:'8px',fontFamily:'"JetBrains Mono",monospace',fontSize:'11.5px',opacity:0.75}}>
        <span className="xwf-gr-branch-label xwf-branch-false" style={{position:'static',transform:'none'}}>false</span>
        <span>evaluator fails or errors → skips loop, jumps directly to merge (safe path)</span>
      </div>
    </div>

    <div style={{marginTop:'18px',borderTop:'1px solid rgb(128 128 144 / 0.15)',paddingTop:'14px',fontFamily:'"JetBrains Mono",monospace',fontSize:'11.5px',lineHeight:1.8}}>
      <div className="xwf-log-line" style={{animationDelay:'0.15s'}}>
        <span style={{flex:'none',opacity:0.38,fontSize:'10px'}}>00:00.0</span>
        <span className="xwf-log-node">start</span>
        <span style={{opacity:0.75}}>trigger received — variables bound</span>
      </div>

      <div className="xwf-log-line" style={{animationDelay:'0.85s'}}>
        <span style={{flex:'none',opacity:0.38,fontSize:'10px'}}>00:00.3</span>
        <span className="xwf-log-node">action\[0]</span>
        <span style={{opacity:0.75}}>navigate → <em>app.example.com/dashboard</em></span>
      </div>

      <div className="xwf-log-line" style={{animationDelay:'1.55s'}}>
        <span style={{flex:'none',opacity:0.38,fontSize:'10px'}}>00:01.1</span>
        <span className="xwf-log-node">action\[1]</span>
        <span style={{opacity:0.75}}>extract → <em>row\_count=24</em> <span style={{color:'#6EE3B5',fontWeight:700}}>✓</span></span>
      </div>

      <div className="xwf-log-line" style={{animationDelay:'2.25s'}}>
        <span style={{flex:'none',opacity:0.38,fontSize:'10px'}}>00:01.8</span>
        <span className="xwf-log-node">condition</span>
        <span style={{opacity:0.75}}>row\_count > 0 → <span style={{color:'#6EE3B5',fontWeight:700}}>true</span> — routing to loop</span>
      </div>

      <div className="xwf-log-line" style={{animationDelay:'3.00s'}}>
        <span style={{flex:'none',opacity:0.38,fontSize:'10px'}}>00:02.4</span>
        <span className="xwf-log-node">loop\[1/24]</span>
        <span style={{opacity:0.75}}>processing row 1 of 24 — iteration cap: 50<span className="mxp-caret" /></span>
      </div>
    </div>
  </div>

  <div className="exp-surface-grid" style={{marginTop:'20px'}}>
    <div className="exp-surface-tile">
      <strong>Speed Mode on by default.</strong> Consecutive action and step nodes batch into a single CUA pass — up to 7 in graph mode. Add a condition or merge node to break a batch boundary.
    </div>

    <div className="exp-surface-tile">
      <strong>Condition fails safely.</strong> Any evaluator error defaults to <code>false</code>. Design the false branch as the guard path — retry, exit, or escalate — not the destructive step.
    </div>

    <div className="exp-surface-tile">
      <strong>Loop caps at 50 by default.</strong> For known-bounded tasks, set a tighter limit. If the evaluator is unreachable, loops exit immediately — fail-closed, not runaway.
    </div>
  </div>
</div>

<div className="w-full pb-8 xc-rise">
  {/* TODO(image): workflow-canvas-overview — IMAGE SPEC: Full-width screenshot of the workflow graph canvas. Show 6–8 mixed node types (start, two action nodes, a condition node with true/false labelled edges, a merge node, end). Left panel open on the Variables section with two typed variables visible. Toolbar at top with UNSAVED badge (orange, AlertTriangle icon) visible. — replace this CSS mock with the real screenshot */}

  <div className="mxp-window" style={{fontSize:'12px'}}>
    <div className="mxp-window-bar" style={{gap:'10px',padding:'10px 16px',background:'#ededf0'}}>
      <div style={{display:'flex',gap:'5px',flex:'none'}}>
        <span style={{width:'10px',height:'10px',borderRadius:'50%',background:'#ff5f57',display:'block'}} />

        <span style={{width:'10px',height:'10px',borderRadius:'50%',background:'#ffbd2e',display:'block'}} />

        <span style={{width:'10px',height:'10px',borderRadius:'50%',background:'#28c840',display:'block'}} />
      </div>

      <span style={{fontSize:'11px',opacity:0.55,flex:1,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>Actionist — Workflow Editor</span>

      <div style={{display:'flex',alignItems:'center',gap:'6px',flex:'none'}}>
        <span className="xwf-unsaved-badge" style={{fontSize:'9px',padding:'2px 8px'}}>△ UNSAVED</span>
        <span style={{display:'inline-flex',alignItems:'center',padding:'3px 10px',borderRadius:'6px',fontSize:'10.5px',fontWeight:600,background:'rgb(144 0 255 / 0.14)',border:'1px solid rgb(144 0 255 / 0.3)',color:'rgb(144 0 255)',cursor:'default',whiteSpace:'nowrap'}}>Save</span>
      </div>
    </div>

    <div style={{display:'flex',minHeight:'180px'}}>
      <div style={{width:'180px',flex:'none',borderRight:'1px solid var(--default-border-color)',padding:'14px 12px',display:'flex',flexDirection:'column',gap:'4px'}}>
        <div style={{fontSize:'9.5px',fontWeight:700,letterSpacing:'0.09em',textTransform:'uppercase',opacity:0.45,marginBottom:'6px'}}>Variables</div>
        <div className="exp-glass-card" style={{display:'flex',alignItems:'center',gap:'6px',padding:'5px 8px',borderRadius:'7px',fontSize:'10.5px'}}><span style={{fontFamily:'"JetBrains Mono",monospace',fontSize:'9px',color:'rgb(144 0 255)',fontWeight:600,padding:'1px 5px',borderRadius:'4px',background:'rgb(144 0 255 / 0.12)',flex:'none'}}>text</span><span style={{fontFamily:'"JetBrains Mono",monospace',fontSize:'10px',opacity:0.75,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>target\_url</span></div>
        <div className="exp-glass-card" style={{display:'flex',alignItems:'center',gap:'6px',padding:'5px 8px',borderRadius:'7px',fontSize:'10.5px'}}><span style={{fontFamily:'"JetBrains Mono",monospace',fontSize:'9px',color:'rgb(144 0 255)',fontWeight:600,padding:'1px 5px',borderRadius:'4px',background:'rgb(144 0 255 / 0.12)',flex:'none'}}>number</span><span style={{fontFamily:'"JetBrains Mono",monospace',fontSize:'10px',opacity:0.75,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>max\_results</span></div>

        <div style={{height:'1px',background:'var(--default-border-color)',margin:'6px 0'}} />

        <div style={{fontSize:'11px',padding:'4px 6px',borderRadius:'5px',opacity:0.38}}>Basic Information</div>
        <div style={{fontSize:'11px',padding:'4px 6px',borderRadius:'5px',opacity:0.38}}>Preconditions</div>
        <div style={{fontSize:'11px',padding:'4px 6px',borderRadius:'5px',opacity:0.38}}>Success Criteria</div>
        <div style={{fontSize:'11px',padding:'4px 6px',borderRadius:'5px',opacity:0.38}}>Rules</div>
      </div>

      <div style={{flex:1,padding:'20px 24px',display:'flex',alignItems:'center',justifyContent:'center',position:'relative'}}>
        <div style={{display:'flex',alignItems:'center',gap:0,flexWrap:'nowrap',overflowX:'auto'}}>
          <div style={{display:'inline-flex',alignItems:'center',gap:'5px',padding:'6px 12px',borderRadius:'10px',border:'1.5px solid rgb(110 227 181 / 0.5)',fontSize:'11px',fontWeight:600,whiteSpace:'nowrap',background:'rgb(110 227 181 / 0.07)'}}>▶ Start</div>

          <div style={{width:'24px',height:'2px',flex:'none',background:'linear-gradient(90deg,rgb(144 0 255 / 0.3),rgb(144 0 255 / 0.1))',alignSelf:'center'}} />

          <div style={{display:'inline-flex',alignItems:'center',gap:'5px',padding:'6px 12px',borderRadius:'10px',border:'1.5px solid rgb(144 0 255 / 0.35)',fontSize:'11px',fontWeight:600,whiteSpace:'nowrap',background:'rgb(144 0 255 / 0.07)'}}>◆ Action</div>

          <div style={{width:'24px',height:'2px',flex:'none',background:'linear-gradient(90deg,rgb(144 0 255 / 0.3),rgb(144 0 255 / 0.1))',alignSelf:'center'}} />

          <div style={{display:'inline-flex',alignItems:'center',gap:'5px',padding:'6px 12px',borderRadius:'10px',border:'1.5px solid rgb(144 0 255 / 0.35)',fontSize:'11px',fontWeight:600,whiteSpace:'nowrap',background:'rgb(144 0 255 / 0.07)'}}>◆ Action</div>

          <div style={{width:'24px',height:'2px',flex:'none',background:'linear-gradient(90deg,rgb(144 0 255 / 0.3),rgb(144 0 255 / 0.1))',alignSelf:'center'}} />

          <div style={{display:'inline-flex',alignItems:'center',gap:'5px',padding:'6px 12px',borderRadius:'10px',border:'1.5px solid rgb(251 146 60 / 0.4)',fontSize:'11px',fontWeight:600,whiteSpace:'nowrap',background:'rgb(251 146 60 / 0.07)'}}>◇ Condition</div>

          <div style={{display:'flex',gap:'6px',alignSelf:'center'}}>
            <span className="xwf-branch-true" style={{position:'static',transform:'none',fontSize:'8px'}}>true</span>
            <span className="xwf-branch-false" style={{position:'static',transform:'none',fontSize:'8px'}}>false</span>
          </div>

          <div style={{width:'24px',height:'2px',flex:'none',background:'linear-gradient(90deg,rgb(144 0 255 / 0.3),rgb(144 0 255 / 0.1))',alignSelf:'center'}} />

          <div style={{display:'inline-flex',alignItems:'center',gap:'5px',padding:'6px 12px',borderRadius:'10px',border:'1.5px solid rgb(110 227 181 / 0.35)',fontSize:'11px',fontWeight:600,whiteSpace:'nowrap',background:'rgb(110 227 181 / 0.05)'}}>⊕ Merge</div>

          <div style={{width:'24px',height:'2px',flex:'none',background:'linear-gradient(90deg,rgb(144 0 255 / 0.3),rgb(144 0 255 / 0.1))',alignSelf:'center'}} />

          <div style={{display:'inline-flex',alignItems:'center',gap:'5px',padding:'6px 12px',borderRadius:'10px',border:'1.5px solid rgb(255 100 80 / 0.35)',fontSize:'11px',fontWeight:600,whiteSpace:'nowrap',background:'rgb(255 100 80 / 0.05)'}}>■ End</div>
        </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">The workspace</span>
    <h2 className="text-2xl md:text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">Two halves, one editor.</h2>

    <p className="text-base text-gray-600 dark:text-gray-400 max-w-3xl">
      The workflow editor is split into a configuration panel on the left and a visual graph canvas on the right. Both must be complete before you save.
    </p>
  </div>

  <div className="xwf-editor-tour exp-tool-shell xc-try">
    <div className="mxp-srch-chips">
      <label htmlFor="xwf-ep-left"><input className="mxp-r" type="radio" name="xwf-ep" id="xwf-ep-left" defaultChecked />Left panel</label>
      <label htmlFor="xwf-ep-canvas"><input className="mxp-r" type="radio" name="xwf-ep" id="xwf-ep-canvas" />Graph canvas</label>
    </div>

    <div className="xwf-ep-panel xwf-ep-panel-left">
      <p style={{fontSize:'13.5px',opacity:0.75,marginTop:'16px',marginBottom:'0'}}>
        The left panel holds seven collapsible sections. Drag the divider to give more room to the canvas or the config.
      </p>

      <div style={{display:'flex',flexDirection:'column',gap:'6px',marginTop:'16px'}}>
        <div className="mxp-bm-item xwf-section-row" style={{animationDelay:'0.05s'}}>
          <div className="xwf-section-icon">ℹ</div>

          <div>
            <div className="xwf-section-name">Basic Information</div>
            <div className="xwf-section-blurb">Name (required) and description — shown on library cards and in the marketplace.</div>
          </div>
        </div>

        <div className="mxp-bm-item xwf-section-row" style={{animationDelay:'0.15s'}}>
          <div className="xwf-section-icon">✓</div>

          <div>
            <div className="xwf-section-name">Preconditions</div>
            <div className="xwf-section-blurb">Natural-language conditions that must be true before execution begins. Failure stops the run before the first node.</div>
          </div>
        </div>

        <div className="mxp-bm-item xwf-section-row" style={{animationDelay:'0.25s'}}>
          <div className="xwf-section-icon">◎</div>

          <div>
            <div className="xwf-section-name">Success Criteria</div>
            <div className="xwf-section-blurb">Natural-language statements that define a completed, successful run — used by the orchestration layer to evaluate true finish.</div>
          </div>
        </div>

        <div className="mxp-bm-item xwf-section-row" style={{animationDelay:'0.35s'}}>
          <div className="xwf-section-icon">○</div>

          <div>
            <div className="xwf-section-name">Domains</div>
            <div className="xwf-section-blurb">URL or domain patterns the workflow may operate on. Constrains which sites computer-use action nodes are permitted to touch.</div>
          </div>
        </div>

        <div className="mxp-bm-item xwf-section-row" style={{animationDelay:'0.45s'}}>
          <div className="xwf-section-icon">\{}</div>

          <div>
            <div className="xwf-section-name">Variables</div>
            <div className="xwf-section-blurb">Typed inputs declared at design time, filled at run time. Supported types: <code>text</code>, <code>number</code>, <code>boolean</code>, <code>date</code>, <code>select</code>.</div>
          </div>
        </div>

        <div className="mxp-bm-item xwf-section-row" style={{animationDelay:'0.55s'}}>
          <div className="xwf-section-icon">≡</div>

          <div>
            <div className="xwf-section-name">Rules</div>
            <div className="xwf-section-blurb">Hard constraints in plain language applied across every node — injected into the orchestration context before the first node runs.</div>
          </div>
        </div>

        <div className="mxp-bm-item xwf-section-row" style={{animationDelay:'0.65s'}}>
          <div className="xwf-section-icon">□</div>

          <div>
            <div className="xwf-section-name">Ask Human</div>
            <div className="xwf-section-blurb">Prompts that pause execution and surface a question to the user — for approvals, clarifications, or edge-case handling.</div>
          </div>
        </div>
      </div>

      <div className="mt-6">
        {/* TODO(image): left-panel-sections — IMAGE SPEC: The workflow left panel's collapsed icon-strip showing all 7 section icons in order: Basic Information, Preconditions, Success Criteria, Domains, Variables, Rules, Ask Human. Each icon labelled. The panel is collapsed to show only the strip. — replace this CSS mock with the real screenshot */}

        <div className="exp-tool-shell" style={{display:'flex',alignItems:'center',gap:'6px',flexWrap:'wrap',padding:'14px 16px',overflowX:'auto',margin:0}}>
          <div style={{display:'flex',flexDirection:'column',alignItems:'center',gap:'4px',fontSize:'9.5px',opacity:0.75,flex:'none',minWidth:'56px',textAlign:'center'}}><span className="xwf-section-icon" style={{width:'28px',height:'28px',fontSize:'13px'}}>ℹ</span><span>Basic Information</span></div>
          <div style={{display:'flex',flexDirection:'column',alignItems:'center',gap:'4px',fontSize:'9.5px',opacity:0.75,flex:'none',minWidth:'56px',textAlign:'center'}}><span className="xwf-section-icon" style={{width:'28px',height:'28px',fontSize:'13px'}}>✓</span><span>Preconditions</span></div>
          <div style={{display:'flex',flexDirection:'column',alignItems:'center',gap:'4px',fontSize:'9.5px',opacity:0.75,flex:'none',minWidth:'56px',textAlign:'center'}}><span className="xwf-section-icon" style={{width:'28px',height:'28px',fontSize:'13px'}}>◎</span><span>Success Criteria</span></div>
          <div style={{display:'flex',flexDirection:'column',alignItems:'center',gap:'4px',fontSize:'9.5px',opacity:0.75,flex:'none',minWidth:'56px',textAlign:'center'}}><span className="xwf-section-icon" style={{width:'28px',height:'28px',fontSize:'13px'}}>○</span><span>Domains</span></div>
          <div style={{display:'flex',flexDirection:'column',alignItems:'center',gap:'4px',fontSize:'9.5px',opacity:0.75,flex:'none',minWidth:'56px',textAlign:'center'}}><span className="xwf-section-icon" style={{width:'28px',height:'28px',fontSize:'13px'}}>\{}</span><span>Variables</span></div>
          <div style={{display:'flex',flexDirection:'column',alignItems:'center',gap:'4px',fontSize:'9.5px',opacity:0.75,flex:'none',minWidth:'56px',textAlign:'center'}}><span className="xwf-section-icon" style={{width:'28px',height:'28px',fontSize:'13px'}}>≡</span><span>Rules</span></div>
          <div style={{display:'flex',flexDirection:'column',alignItems:'center',gap:'4px',fontSize:'9.5px',opacity:0.75,flex:'none',minWidth:'56px',textAlign:'center'}}><span className="xwf-section-icon" style={{width:'28px',height:'28px',fontSize:'13px'}}>□</span><span>Ask Human</span></div>
        </div>
      </div>
    </div>

    <div className="xwf-ep-panel xwf-ep-panel-canvas">
      <p style={{fontSize:'13.5px',opacity:0.75,marginTop:'16px',marginBottom:'0'}}>
        The canvas is where you design the workflow's logic. Nodes live on the canvas; edges wire them together.
      </p>

      <div style={{display:'flex',alignItems:'center',gap:'10px',marginTop:'14px',marginBottom:'6px'}}>
        <span style={{fontSize:'12px',opacity:0.55,letterSpacing:'0.06em',textTransform:'uppercase'}}>Toolbar — live state</span>
        <span className="xwf-unsaved-badge">△ UNSAVED</span>
      </div>

      <table className="xwf-tt">
        <thead><tr><th>Control</th><th>Action</th></tr></thead>

        <tbody>
          <tr><td><code>Back (chevron)</code></td><td>Returns to the workflow list — "Back to Workflows"</td></tr>
          <tr><td><code>Undo / Redo</code></td><td>Stepped history of canvas changes</td></tr>
          <tr><td><code>Validation icon</code></td><td>Shows error or warning count; click to surface issues per node. Shakes and blocks save on hard errors.</td></tr>
          <tr><td><code>UNSAVED badge</code></td><td>Orange badge with alert icon — appears when there are unsaved changes. Disappears on save.</td></tr>
          <tr><td><code>Export (download)</code></td><td>Downloads full workflow JSON including graph, nodes, edges, variables, and rules.</td></tr>
          <tr><td><code>Import (upload)</code></td><td>Loads a workflow JSON file; fresh IDs are assigned so it never conflicts with existing workflows.</td></tr>
          <tr><td><code>Save</code></td><td>Commits the workflow. Absent on subscribed marketplace workflows — they open view-only.</td></tr>
        </tbody>
      </table>

      <Info>
        The <strong>Save</strong> button is absent when viewing a subscribed marketplace workflow. Marketplace workflows open in view-only mode — see the <a href="#subscribed-workflows">Subscribed workflows</a> section below.
      </Info>
    </div>
  </div>
</div>

<hr className="xc-divider" />

<div id="node-types" className="w-full py-10 xc-rise">
  <div className="actionist-tight flex flex-col gap-2 mb-6">
    <span className="actionist-section-eyebrow">Node vocabulary</span>
    <h2 className="text-2xl md:text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">Eleven building blocks.</h2>

    <p className="text-base text-gray-600 dark:text-gray-400 max-w-3xl">
      Every workflow is composed from these node types. Select a type below to see its fields, when to use it, and why it exists.
    </p>
  </div>

  <div className="xwf-node-explorer exp-tool-shell xc-try">
    <div className="mxp-srch-chips">
      <label htmlFor="xwf-n-action"><input className="mxp-r" type="radio" name="xwf-n" id="xwf-n-action" defaultChecked />Action</label>
      <label htmlFor="xwf-n-step"><input className="mxp-r" type="radio" name="xwf-n" id="xwf-n-step" />Step</label>
      <label htmlFor="xwf-n-condition"><input className="mxp-r" type="radio" name="xwf-n" id="xwf-n-condition" />Condition</label>
      <label htmlFor="xwf-n-loop"><input className="mxp-r" type="radio" name="xwf-n" id="xwf-n-loop" />Loop</label>
      <label htmlFor="xwf-n-custom-tool"><input className="mxp-r" type="radio" name="xwf-n" id="xwf-n-custom-tool" />Custom tool</label>
      <label htmlFor="xwf-n-file-op"><input className="mxp-r" type="radio" name="xwf-n" id="xwf-n-file-op" />File operation</label>
    </div>

    <div className="xwf-node-panel xwf-np-action xwf-node-card">
      <div className="xwf-node-card-title">
        <div className="xwf-node-icon" style={{background:'rgb(144 0 255 / 0.12)'}}>◆</div>
        <h3>Action node</h3>
        <span className="xwf-node-badge xwf-badge-execution">Execution</span>
      </div>

      <div className="xwf-node-col">
        <h4>What it does</h4>
        <p>Drives computer-use automation. Each action node has a <strong>subtype</strong> that maps to a specific CUA operation. The orchestrator executes it against the live screen.</p>
        <h4>Subtypes</h4>

        <div className="xwf-field-list">
          <div className="xwf-field"><span className="xwf-field-name">navigate</span><span className="xwf-field-type">CUA</span><span className="xwf-field-desc">load a URL</span></div>
          <div className="xwf-field"><span className="xwf-field-name">click</span><span className="xwf-field-type">CUA</span><span className="xwf-field-desc">click an element</span></div>
          <div className="xwf-field"><span className="xwf-field-name">type</span><span className="xwf-field-type">CUA</span><span className="xwf-field-desc">enter text into a field</span></div>
          <div className="xwf-field"><span className="xwf-field-name">wait</span><span className="xwf-field-type">CUA</span><span className="xwf-field-desc">pause for condition or duration</span></div>
          <div className="xwf-field"><span className="xwf-field-name">screenshot</span><span className="xwf-field-type">CUA</span><span className="xwf-field-desc">capture screen for inspection</span></div>
          <div className="xwf-field"><span className="xwf-field-name">scroll</span><span className="xwf-field-type">CUA</span><span className="xwf-field-desc">scroll to position or element</span></div>
          <div className="xwf-field"><span className="xwf-field-name">select</span><span className="xwf-field-type">CUA</span><span className="xwf-field-desc">choose a dropdown option</span></div>
          <div className="xwf-field"><span className="xwf-field-name">hover / key</span><span className="xwf-field-type">CUA</span><span className="xwf-field-desc">move cursor; send keyboard shortcut</span></div>
          <div className="xwf-field"><span className="xwf-field-name">extract</span><span className="xwf-field-type">CUA</span><span className="xwf-field-desc">pull structured data from current page</span></div>
        </div>
      </div>

      <div className="xwf-node-col">
        <h4>Key fields</h4>

        <div className="xwf-field-list">
          <div className="xwf-field"><span className="xwf-field-name">subtype</span><span className="xwf-field-type">required</span><span className="xwf-field-desc">which CUA operation to run</span></div>
          <div className="xwf-field"><span className="xwf-field-name">completionCriteria</span><span className="xwf-field-type">optional</span><span className="xwf-field-desc">successIndicators\[] and failureIndicators\[] so the orchestrator knows when done</span></div>
          <div className="xwf-field"><span className="xwf-field-name">timeoutMs</span><span className="xwf-field-type">default 120000</span><span className="xwf-field-desc">per-node timeout in ms</span></div>
          <div className="xwf-field"><span className="xwf-field-name">maxAttempts</span><span className="xwf-field-type">default 3</span><span className="xwf-field-desc">retries before the node is marked failed</span></div>
          <div className="xwf-field"><span className="xwf-field-name">evidenceHints.urlPatterns</span><span className="xwf-field-type">optional</span><span className="xwf-field-desc">eliminates false-positive completions on navigate nodes</span></div>
        </div>

        <div className="mxs-match xwf-when-box"><strong>When to use:</strong> any step that requires touching a UI — clicking buttons, filling forms, extracting table data, navigating between pages. If a direct MCP tool covers the operation, prefer a Custom tool node instead — it is faster and more reliable.</div>
      </div>
    </div>

    <div className="xwf-node-panel xwf-np-step xwf-node-card">
      <div className="xwf-node-card-title">
        <div className="xwf-node-icon" style={{background:'rgb(99 102 241 / 0.12)'}}>▶</div>
        <h3>Step node</h3>
        <span className="xwf-node-badge xwf-badge-execution">Execution</span>
      </div>

      <div className="xwf-node-col">
        <h4>What it does</h4>
        <p>A higher-level natural-language instruction. OrchAgent interprets the step and decides which tool calls or CUA operations to use. Less precise than an action node; useful for exploratory or variable steps.</p>
      </div>

      <div className="xwf-node-col">
        <h4>Key fields</h4>

        <div className="xwf-field-list">
          <div className="xwf-field"><span className="xwf-field-name">instruction</span><span className="xwf-field-type">required</span><span className="xwf-field-desc">plain-language description of what to do</span></div>
          <div className="xwf-field"><span className="xwf-field-name">completionCriteria</span><span className="xwf-field-type">optional</span><span className="xwf-field-desc">success and failure indicators for the orchestrator</span></div>
          <div className="xwf-field"><span className="xwf-field-name">timeoutMs</span><span className="xwf-field-type">default 120000</span><span className="xwf-field-desc">per-node timeout in ms</span></div>
        </div>

        <div className="mxs-match xwf-when-box"><strong>When to use:</strong> steps where the exact UI interactions vary (e.g. "summarise the top three results"), or early in workflow design when you want OrchAgent to figure out the mechanics before you pin down specific action subtypes.</div>
      </div>
    </div>

    <div className="xwf-node-panel xwf-np-condition xwf-node-card">
      <div className="xwf-node-card-title">
        <div className="xwf-node-icon" style={{background:'rgb(251 146 60 / 0.12)'}}>◇</div>
        <h3>Condition node</h3>
        <span className="xwf-node-badge xwf-badge-control">Control flow</span>
      </div>

      <div className="xwf-node-col">
        <h4>What it does</h4>
        <p>Evaluates a check and routes execution down the <strong>true</strong> or <strong>false</strong> edge. On any evaluator failure, defaults to <code>false</code> — so design the false branch as the safe path.</p>
        <h4>Check types</h4>

        <div className="xwf-field-list">
          <div className="xwf-field"><span className="xwf-field-name">element\_visible</span><span className="xwf-field-type">UI</span><span className="xwf-field-desc">element is present on screen</span></div>
          <div className="xwf-field"><span className="xwf-field-name">element\_not\_visible</span><span className="xwf-field-type">UI</span><span className="xwf-field-desc">element is absent</span></div>
          <div className="xwf-field"><span className="xwf-field-name">element\_count</span><span className="xwf-field-type">UI</span><span className="xwf-field-desc">how many of a given element exist</span></div>
          <div className="xwf-field"><span className="xwf-field-name">text\_contains</span><span className="xwf-field-type">content</span><span className="xwf-field-desc">string appears in page text</span></div>
          <div className="xwf-field"><span className="xwf-field-name">url\_contains</span><span className="xwf-field-type">content</span><span className="xwf-field-desc">string appears in current URL</span></div>
          <div className="xwf-field"><span className="xwf-field-name">number\_comparison</span><span className="xwf-field-type">numeric</span><span className="xwf-field-desc">compare value against threshold</span></div>
          <div className="xwf-field"><span className="xwf-field-name">counter</span><span className="xwf-field-type">loop</span><span className="xwf-field-desc">compare loop iteration count</span></div>
          <div className="xwf-field"><span className="xwf-field-name">custom</span><span className="xwf-field-type">NL</span><span className="xwf-field-desc">natural-language check for edge cases</span></div>
        </div>
      </div>

      <div className="xwf-node-col">
        <h4>Key fields</h4>

        <div className="xwf-field-list">
          <div className="xwf-field"><span className="xwf-field-name">checkType</span><span className="xwf-field-type">required</span><span className="xwf-field-desc">which of the 8 check types to run</span></div>
          <div className="xwf-field"><span className="xwf-field-name">parameters</span><span className="xwf-field-type">varies</span><span className="xwf-field-desc">selector, value, operator — depends on check type</span></div>
          <div className="xwf-field"><span className="xwf-field-name">trueEdge</span><span className="xwf-field-type">required</span><span className="xwf-field-desc">target node ID for the true branch</span></div>
          <div className="xwf-field"><span className="xwf-field-name">falseEdge</span><span className="xwf-field-type">required</span><span className="xwf-field-desc">target node ID for the false (safe) branch</span></div>
        </div>

        <div className="mxs-match xwf-when-box"><strong>When to use:</strong> whenever the workflow must branch based on what the agent sees — results count, URL reached, value threshold, element presence. Wire the false edge to the guard path — retry, exit, or escalate.</div>
      </div>
    </div>

    <div className="xwf-node-panel xwf-np-loop xwf-node-card">
      <div className="xwf-node-card-title">
        <div className="xwf-node-icon" style={{background:'rgb(20 184 166 / 0.12)'}}>↻</div>
        <h3>Loop node</h3>
        <span className="xwf-node-badge xwf-badge-control">Control flow</span>
      </div>

      <div className="xwf-node-col">
        <h4>What it does</h4>
        <p>Repeats a subgraph until a condition is met or <code>maxIterations</code> is reached. Default cap is <strong>50</strong>. On any evaluator error during a loop, the loop exits immediately — fail-closed, not runaway.</p>
      </div>

      <div className="xwf-node-col">
        <h4>Key fields</h4>

        <div className="xwf-field-list">
          <div className="xwf-field"><span className="xwf-field-name">maxIterations</span><span className="xwf-field-type">default 50</span><span className="xwf-field-desc">hard cap — set tighter for known-bounded lists</span></div>
          <div className="xwf-field"><span className="xwf-field-name">exitCondition</span><span className="xwf-field-type">optional</span><span className="xwf-field-desc">condition that ends the loop early</span></div>
          <div className="xwf-field"><span className="xwf-field-name">bodyEdge</span><span className="xwf-field-type">required</span><span className="xwf-field-desc">edge into the loop body subgraph</span></div>
        </div>

        <div className="mxs-match xwf-when-box"><strong>When to use:</strong> iterating over a list of rows, pages, or items where the count is not known at design time. Pair with a file-operation node inside the loop body to accumulate results without blowing up the context window.</div>
      </div>
    </div>

    <div className="xwf-node-panel xwf-np-custom-tool xwf-node-card">
      <div className="xwf-node-card-title">
        <div className="xwf-node-icon" style={{background:'rgb(56 189 248 / 0.12)'}}>⊕</div>
        <h3>Custom tool node</h3>
        <span className="xwf-node-badge xwf-badge-execution">Execution</span>
      </div>

      <div className="xwf-node-col">
        <h4>What it does</h4>
        <p>Invokes an MCP-backed or built-in tool directly by ID, bypassing computer use entirely. Faster, cheaper, and more reliable than screen automation when a direct integration exists.</p>
      </div>

      <div className="xwf-node-col">
        <h4>Key fields</h4>

        <div className="xwf-field-list">
          <div className="xwf-field"><span className="xwf-field-name">toolId</span><span className="xwf-field-type">required</span><span className="xwf-field-desc">MCP tool ID or built-in name</span></div>
          <div className="xwf-field"><span className="xwf-field-name">parameters</span><span className="xwf-field-type">varies</span><span className="xwf-field-desc">tool-specific input arguments — supports variable references</span></div>
          <div className="xwf-field"><span className="xwf-field-name">outputBinding</span><span className="xwf-field-type">optional</span><span className="xwf-field-desc">variable name to receive the tool's output</span></div>
        </div>

        <div className="mxs-match xwf-when-box"><strong>When to use:</strong> any step where a direct MCP integration covers the operation — Slack messages, Notion updates, Linear issues, database queries. If the required MCP server is disconnected, the run is blocked at initialization with an error naming the missing server.</div>
      </div>
    </div>

    <div className="xwf-node-panel xwf-np-file-op xwf-node-card">
      <div className="xwf-node-card-title">
        <div className="xwf-node-icon" style={{background:'rgb(110 227 181 / 0.12)'}}>■</div>
        <h3>File operation node</h3>
        <span className="xwf-node-badge xwf-badge-utility">Utility</span>
      </div>

      <div className="xwf-node-col">
        <h4>What it does</h4>
        <p>Reads, writes, or updates files in the workflow's isolated file workspace. Tag each operation with a purpose so the orchestrator and downstream steps know how to use the data.</p>
        <h4>Purpose tags</h4>

        <div className="xwf-field-list">
          <div className="xwf-field"><span className="xwf-field-name">memory</span><span className="xwf-field-type">tag</span><span className="xwf-field-desc">cross-step state — kept between nodes, not returned to user</span></div>
          <div className="xwf-field"><span className="xwf-field-name">context</span><span className="xwf-field-type">tag</span><span className="xwf-field-desc">injected into subsequent steps as read context</span></div>
          <div className="xwf-field"><span className="xwf-field-name">artifact</span><span className="xwf-field-type">tag</span><span className="xwf-field-desc">output returned to the user at the end of the run</span></div>
        </div>
      </div>

      <div className="xwf-node-col">
        <h4>Key fields</h4>

        <div className="xwf-field-list">
          <div className="xwf-field"><span className="xwf-field-name">operation</span><span className="xwf-field-type">required</span><span className="xwf-field-desc">read / write / append / delete</span></div>
          <div className="xwf-field"><span className="xwf-field-name">path</span><span className="xwf-field-type">required</span><span className="xwf-field-desc">file path within the isolated workspace</span></div>
          <div className="xwf-field"><span className="xwf-field-name">purpose</span><span className="xwf-field-type">required</span><span className="xwf-field-desc">memory / context / artifact</span></div>
          <div className="xwf-field"><span className="xwf-field-name">content</span><span className="xwf-field-type">write only</span><span className="xwf-field-desc">supports variable references via \$\{varName}</span></div>
        </div>

        <div className="mxs-match xwf-when-box"><strong>When to use:</strong> loop bodies producing large intermediate outputs; multi-step scrapes where results accumulate across iterations; any step that generates an artifact to hand back to the user. Keeps the context window clean — do not store large outputs in variables.</div>
      </div>
    </div>
  </div>

  <div className="mxs-tiers" style={{marginTop:'20px'}}>
    <div className="mxs-tier" style={{borderTopColor:'#818cf8'}}>
      <strong>Start / End</strong>
      <p>Every workflow begins at exactly one Start node (receives trigger payload and variable values) and exits at one or more End nodes. Multiple end nodes are allowed for different exit paths.</p>
    </div>

    <div className="mxs-tier" style={{borderTopColor:'#6EE3B5'}}>
      <strong>Merge</strong>
      <p>Joins two or more incoming edges back into a single execution path. Use it to reunite branches after a condition split so the rest of the graph sees one stream.</p>
    </div>

    <div className="mxs-tier" style={{borderTopColor:'#fb923c'}}>
      <strong>Goto / Subroutine</strong>
      <p><strong>Goto</strong> jumps execution to another node by reference — use sparingly. <strong>Subroutine</strong> embeds another workflow by ID and runs it inline; the parent waits for it to complete. Subroutines compose — they can themselves contain subroutines.</p>
    </div>
  </div>

  <div className="mt-10">
    <div className="mxp-window" style={{padding:'18px 20px',fontSize:'12px'}}>
      <div style={{fontSize:'9.5px',fontWeight:700,letterSpacing:'0.09em',textTransform:'uppercase',opacity:0.4,marginBottom:'14px'}}>Node palette</div>

      <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(120px,1fr))',gap:'8px'}}>
        <div style={{display:'flex',alignItems:'center',gap:'7px',padding:'7px 11px',borderRadius:'9px',border:'1px solid var(--default-border-color)',fontSize:'11.5px',fontWeight:500,background:'#fff',cursor:'default'}}><span style={{color:'#6EE3B5'}}>▶</span> start</div>
        <div style={{display:'flex',alignItems:'center',gap:'7px',padding:'7px 11px',borderRadius:'9px',border:'1px solid var(--default-border-color)',fontSize:'11.5px',fontWeight:500,background:'#fff',cursor:'default'}}><span style={{color:'#ff8c7a'}}>■</span> end</div>
        <div style={{display:'flex',alignItems:'center',gap:'7px',padding:'7px 11px',borderRadius:'9px',border:'1px solid var(--default-border-color)',fontSize:'11.5px',fontWeight:500,background:'#fff',cursor:'default'}}><span style={{color:'#B566FF'}}>◆</span> action</div>
        <div style={{display:'flex',alignItems:'center',gap:'7px',padding:'7px 11px',borderRadius:'9px',border:'1px solid var(--default-border-color)',fontSize:'11.5px',fontWeight:500,background:'#fff',cursor:'default'}}><span style={{color:'#fb923c'}}>◇</span> condition</div>
        <div style={{display:'flex',alignItems:'center',gap:'7px',padding:'7px 11px',borderRadius:'9px',border:'1px solid var(--default-border-color)',fontSize:'11.5px',fontWeight:500,background:'#fff',cursor:'default'}}><span style={{color:'#2DD4BF'}}>↻</span> loop</div>
        <div style={{display:'flex',alignItems:'center',gap:'7px',padding:'7px 11px',borderRadius:'9px',border:'1px solid var(--default-border-color)',fontSize:'11.5px',fontWeight:500,background:'#fff',cursor:'default'}}><span style={{color:'#6EE3B5'}}>⊕</span> merge</div>
        <div style={{display:'flex',alignItems:'center',gap:'7px',padding:'7px 11px',borderRadius:'9px',border:'1px solid var(--default-border-color)',fontSize:'11.5px',fontWeight:500,background:'#fff',cursor:'default'}}><span style={{color:'#818cf8'}}>→</span> goto</div>
        <div style={{display:'flex',alignItems:'center',gap:'7px',padding:'7px 11px',borderRadius:'9px',border:'1px solid var(--default-border-color)',fontSize:'11.5px',fontWeight:500,background:'#fff',cursor:'default'}}><span style={{color:'#818cf8'}}>⊞</span> subroutine</div>
        <div style={{display:'flex',alignItems:'center',gap:'7px',padding:'7px 11px',borderRadius:'9px',border:'1px solid var(--default-border-color)',fontSize:'11.5px',fontWeight:500,background:'#fff',cursor:'default'}}><span style={{color:'#818cf8'}}>▷</span> step</div>
        <div style={{display:'flex',alignItems:'center',gap:'7px',padding:'7px 11px',borderRadius:'9px',border:'1px solid var(--default-border-color)',fontSize:'11.5px',fontWeight:500,background:'#fff',cursor:'default'}}><span style={{color:'#38bdf8'}}>⊕</span> custom-tool</div>
        <div style={{display:'flex',alignItems:'center',gap:'7px',padding:'7px 11px',borderRadius:'9px',border:'1px solid var(--default-border-color)',fontSize:'11.5px',fontWeight:500,background:'#fff',cursor:'default'}}><span style={{color:'#6EE3B5'}}>▣</span> file-op</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">Variables</span>
    <h2 className="text-2xl md:text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">One workflow, any input.</h2>

    <p className="text-base text-gray-600 dark:text-gray-400 max-w-3xl">
      Variables are typed inputs you declare once at design time and fill in at run time. The same "extract data from site X" workflow works for any URL you supply — just change the variable.
    </p>
  </div>

  <Steps>
    <Step title="Declare the variable in the left panel" icon="plus">
      Open the <strong>Variables</strong> section of the left panel. Add a variable with a name (use <code>snake\_case</code> — it becomes the form label in the run modal), a type, and an optional default value.

      Supported types: <code>text</code>, <code>number</code>, <code>boolean</code>, <code>date</code>, <code>select</code>.
    </Step>

    <Step title="Reference it in a node parameter" icon="variable">
      In any node's detail panel, use the variable name inside a placeholder expression. Both syntaxes work:

      ```text theme={null}
      ${target_url}
      {{target_url}}
      ```

      The orchestration layer substitutes the real value before the node executes.
    </Step>

    <Step title="Fill in values at run time" icon="play">
      When you click <strong>Run workflow</strong>, a modal titled "Run Workflow" opens and lists every declared variable with its type and description. Fill them in and click <strong>Run</strong>.

      When scheduling a workflow via the Calendar, the same variables appear under "Workflow variables" — set the defaults there and they apply to every scheduled run.
    </Step>
  </Steps>

  <Tip>
    Use descriptive <code>snake\_case</code> names for variables — <code>report\_date</code>, <code>target\_url</code>, <code>max\_results</code>. The run modal displays them verbatim as form labels, so the person filling them in needs no additional documentation.
  </Tip>

  <div className="mt-8">
    {/* TODO(image): run-workflow-modal — IMAGE SPEC: The 'Run Workflow' variables modal. Show three variable fields: one text type (e.g. target_url with a URL filled in), one number type (e.g. max_results = 25), one select type (e.g. output_format = 'CSV'). The modal title reads 'Run Workflow'. The Run button is visible at the bottom-right. — replace this CSS mock with the real screenshot */}

    <div className="mxp-window" style={{maxWidth:'420px',margin:'0 auto',fontSize:'13px'}}>
      <div className="mxp-window-bar" style={{display:'flex',alignItems:'center',justifyContent:'space-between',padding:'14px 18px'}}>
        <span style={{fontWeight:650,fontSize:'14px'}}>Run Workflow</span>
        <span style={{opacity:0.35,fontSize:'14px',cursor:'default'}}>✕</span>
      </div>

      <div style={{padding:'16px 18px',display:'flex',flexDirection:'column',gap:'12px'}}>
        <div style={{display:'flex',flexDirection:'column',gap:'4px'}}>
          <label style={{display:'flex',alignItems:'center',gap:'7px',fontSize:'11.5px',fontWeight:600,opacity:0.75}}><span style={{fontFamily:'"JetBrains Mono",monospace',fontSize:'9px',color:'rgb(144 0 255)',fontWeight:600,padding:'1px 5px',borderRadius:'4px',background:'rgb(144 0 255 / 0.12)',flex:'none'}}>text</span> target\_url</label>
          <div style={{padding:'7px 11px',borderRadius:'8px',border:'1px solid var(--default-border-color)',fontSize:'12.5px',background:'#f9f9fb',fontFamily:'"JetBrains Mono",monospace',color:'inherit',opacity:0.8}}>[https://app.example.com/reports](https://app.example.com/reports)</div>
        </div>

        <div style={{display:'flex',flexDirection:'column',gap:'4px'}}>
          <label style={{display:'flex',alignItems:'center',gap:'7px',fontSize:'11.5px',fontWeight:600,opacity:0.75}}><span style={{fontFamily:'"JetBrains Mono",monospace',fontSize:'9px',color:'rgb(144 0 255)',fontWeight:600,padding:'1px 5px',borderRadius:'4px',background:'rgb(144 0 255 / 0.12)',flex:'none'}}>number</span> max\_results</label>
          <div style={{padding:'7px 11px',borderRadius:'8px',border:'1px solid var(--default-border-color)',fontSize:'12.5px',background:'#f9f9fb',fontFamily:'"JetBrains Mono",monospace',color:'inherit',opacity:0.8}}>25</div>
        </div>

        <div style={{display:'flex',flexDirection:'column',gap:'4px'}}>
          <label style={{display:'flex',alignItems:'center',gap:'7px',fontSize:'11.5px',fontWeight:600,opacity:0.75}}><span style={{fontFamily:'"JetBrains Mono",monospace',fontSize:'9px',color:'rgb(144 0 255)',fontWeight:600,padding:'1px 5px',borderRadius:'4px',background:'rgb(144 0 255 / 0.12)',flex:'none'}}>select</span> output\_format</label>
          <div style={{padding:'7px 11px',borderRadius:'8px',border:'1px solid var(--default-border-color)',fontSize:'12.5px',background:'#f9f9fb',fontFamily:'"JetBrains Mono",monospace',color:'inherit',opacity:0.8,display:'flex',alignItems:'center'}}>CSV <span style={{opacity:0.5,marginLeft:'auto'}}>▾</span></div>
        </div>
      </div>

      <div style={{display:'flex',alignItems:'center',justifyContent:'flex-end',gap:'8px',padding:'12px 18px',borderTop:'1px solid var(--default-border-color)'}}>
        <span style={{padding:'6px 14px',borderRadius:'7px',fontSize:'12px',border:'1px solid var(--default-border-color)',opacity:0.6,cursor:'default'}}>Cancel</span>
        <span style={{padding:'6px 18px',borderRadius:'7px',fontSize:'12px',fontWeight:700,cursor:'default',background:'linear-gradient(90deg,#9000FF,#E3008E)',color:'#fff',boxShadow:'0 2px 12px rgb(144 0 255 / 0.3)'}}>▶ Run</span>
      </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">Build one</span>
    <h2 className="text-2xl md:text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">Your first workflow, step by step.</h2>
  </div>

  <Steps titleSize="h3">
    <Step title="Open the workflow library" icon="layout-grid">
      In the sidebar, click <strong>Workflows</strong>. The library opens at <code>/workflows</code>, sorted by last updated. You will see three tabs at the top: <strong>All</strong>, <strong>Mine</strong>, and <strong>Subscribed</strong>.
    </Step>

    <Step title="Create a new workflow" icon="plus">
      Click <strong>+ New workflow</strong> in the hero band. The graph canvas opens at <code>/workflows/editor</code> with a blank canvas and an empty left panel.
    </Step>

    <Step title="Fill in Basic Information" icon="info">
      In the left panel, open <strong>Basic Information</strong>. Give the workflow a name and a short description. This is what teammates see on the workflow card.
    </Step>

    <Step title="Declare your variables" icon="variable">
      Open the <strong>Variables</strong> section. Add any inputs the workflow needs at run time — URLs, date ranges, IDs. Give each a descriptive <code>snake\_case</code> name and a type.
    </Step>

    <Step title="Build the graph" icon="git-merge">
      Drag node types from the palette onto the canvas. Start with a <strong>start</strong> node, add <strong>action</strong> or <strong>step</strong> nodes for each operation, connect them with edges, and add <strong>condition</strong> or <strong>loop</strong> nodes for branching. End with an <strong>end</strong> node.

      Click any node to open its detail panel and configure parameters. Reference your variables with <code>\$\{var\_name}</code> syntax.
    </Step>

    <Step title="Add Rules and completion hints" icon="scroll">
      Open the <strong>Rules</strong> section in the left panel. Add any cross-workflow constraints in plain language. For action nodes, set <code>completionCriteria</code> in the node detail panel — success and failure indicators help the orchestration layer know when a step has genuinely finished.
    </Step>

    <Step title="Validate and save" icon="check">
      The validation icon in the toolbar shows the error and warning count. Resolve any blocking errors (the icon shakes when save is blocked). Then click <strong>Save</strong> — the orange <strong>UNSAVED</strong> badge disappears.
    </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">Execution</span>
    <h2 className="text-2xl md:text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">Running a workflow.</h2>
  </div>

  <Note>
    Workflow execution is currently rolling out. You can still create, edit, import, and export workflows fully today. When execution is enabled in your build, the Run button activates — until then you will see: <em>"Workflow execution is temporarily disabled. You can still create, edit, import, and export workflows."</em>
  </Note>

  When execution is available, here is how a run works:

  <Steps>
    <Step title="Find the workflow card" icon="layout-grid">
      On the workflow library page, locate the workflow you want to run. Each card shows the workflow name, description, and last-updated time.
    </Step>

    <Step title="Click Run workflow" icon="play">
      Click <strong>Run workflow</strong> on the card. If the workflow has declared variables, a modal titled <strong>Run Workflow</strong> opens and lists each variable with its type.
    </Step>

    <Step title="Fill in variable values and run" icon="variable">
      Enter the values for this specific run and click <strong>Run</strong>. A new chat session opens titled "Workflow: \{\{title}}". Execution streams live — each step shows its tool calls, inputs, and outputs.
    </Step>

    <Step title="Watch for errors" icon="triangle-alert">
      If a required MCP server is disconnected, the run is blocked at initialization and an error names the missing server. Connect it in <strong>Settings → Apps/MCPs</strong> and try again.
    </Step>
  </Steps>

  <Info>
    Execution runs on the desktop app only. The visual editor loads in all runtimes, but run calls from web or headless environments are not supported.
  </Info>
</div>

<div id="subscribed-workflows" className="w-full py-10 xc-rise">
  <div className="actionist-tight flex flex-col gap-2 mb-6">
    <span className="actionist-section-eyebrow">Share and reuse</span>
    <h2 className="text-2xl md:text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">Portable and composable.</h2>

    <p className="text-base text-gray-600 dark:text-gray-400 max-w-3xl">
      Export a workflow for safekeeping or to share with a teammate. Install one from the marketplace and customise it for your own context.
    </p>
  </div>

  <Tabs>
    <Tab title="Import and export" icon="arrow-left-right">
      The toolbar's <strong>Export</strong> button (download icon) serialises the full workflow — graph, nodes, edges, variables, rules, left-panel config — to a single JSON file. Importing restores the workflow with freshly-assigned IDs so it does not conflict with existing workflows.

      <strong>When to export:</strong>

      * Before a major restructure — snapshot first, experiment freely.
      * To share a workflow with a teammate who does not have access to your workspace.
      * To version-control your workflows alongside the rest of your project.

      <strong>To import:</strong> click the <strong>Import</strong> button (upload icon) in any workflow editor's toolbar and select the JSON file. The imported workflow appears in your library as a new workflow.
    </Tab>

    <Tab title="Subscribed workflows" icon="store">
      Workflows installed from the marketplace appear under the <strong>Subscribed</strong> tab. They open in <strong>view-only mode</strong> — the Save button is absent and nodes are not editable. This protects the upstream source so you can receive updates from the publisher.

      <strong>To customise a subscribed workflow:</strong>

      <Steps>
        <Step title="Open the workflow card kebab menu" icon="ellipsis">
          From the <strong>Subscribed</strong> tab, find the workflow. Click the kebab (three-dot) menu on the card.
        </Step>

        <Step title="Click Duplicate" icon="copy">
          Select <strong>Duplicate</strong>. Actionist creates a copy in your library as a fully editable workflow.
        </Step>

        <Step title="Edit the duplicate" icon="pencil">
          Open the duplicate. The Save button is present and all nodes are editable. Make your changes and save.
        </Step>
      </Steps>

      <Warning>
        The duplicate is independent of the original marketplace entry. If the publisher releases an update, the subscribed version reflects it but your duplicate does not — you will need to re-duplicate or apply changes manually.
      </Warning>

      <div className="mt-6">
        {/* TODO(image): subscribed-viewonly — IMAGE SPEC: The workflow editor open on a marketplace-subscribed workflow. No Save button visible in the toolbar. Node detail panels are locked or dimmed. The 'Back to Workflows' breadcrumb is visible top-left. A 'Subscribed' status badge appears on the workflow card breadcrumb or header. — replace this CSS mock with the real screenshot */}

        <div className="mxp-window" style={{fontSize:'12px'}}>
          <div className="mxp-window-bar" style={{gap:'10px',padding:'10px 16px',background:'rgb(240 240 244)'}}>
            <div style={{display:'flex',gap:'5px',flex:'none'}}>
              <span style={{width:'10px',height:'10px',borderRadius:'50%',background:'#ff5f57',display:'block'}} />

              <span style={{width:'10px',height:'10px',borderRadius:'50%',background:'#ffbd2e',display:'block'}} />

              <span style={{width:'10px',height:'10px',borderRadius:'50%',background:'#28c840',display:'block'}} />
            </div>

            <span style={{fontSize:'11px',opacity:0.55,flex:1,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>‹ Back to Workflows  ·  <span style={{display:'inline-block',padding:'1px 7px',borderRadius:'999px',fontSize:'9.5px',fontWeight:700,letterSpacing:'0.04em',background:'rgb(56 189 248 / 0.15)',border:'1px solid rgb(56 189 248 / 0.35)',color:'#38bdf8'}}>Subscribed</span></span>

            <div style={{display:'flex',alignItems:'center',gap:'6px',flex:'none'}}>
              <span style={{display:'inline-flex',alignItems:'center',padding:'3px 10px',borderRadius:'6px',fontSize:'10.5px',fontWeight:600,background:'rgb(128 128 144 / 0.08)',border:'1px solid rgb(128 128 144 / 0.2)',color:'inherit',cursor:'default',whiteSpace:'nowrap',opacity:0.6}}>Export</span>
              <span style={{display:'inline-flex',alignItems:'center',padding:'3px 10px',borderRadius:'6px',fontSize:'10.5px',fontWeight:600,background:'rgb(128 128 144 / 0.08)',border:'1px solid rgb(128 128 144 / 0.2)',color:'inherit',cursor:'default',whiteSpace:'nowrap',opacity:0.6}}>Import</span>

              {/* No Save button — view-only */}
            </div>
          </div>

          <div style={{display:'flex',minHeight:'180px'}}>
            <div style={{flex:1,padding:'20px 24px',display:'flex',alignItems:'center',justifyContent:'center',position:'relative'}}>
              <div style={{display:'flex',alignItems:'center',gap:0,flexWrap:'nowrap',overflowX:'auto',opacity:0.55}}>
                <div style={{display:'inline-flex',alignItems:'center',gap:'5px',padding:'6px 12px',borderRadius:'10px',border:'1.5px solid rgb(110 227 181 / 0.5)',fontSize:'11px',fontWeight:600,whiteSpace:'nowrap',background:'rgb(110 227 181 / 0.07)',filter:'blur(0.4px)',pointerEvents:'none'}}>▶ Start</div>

                <div style={{width:'24px',height:'2px',flex:'none',background:'linear-gradient(90deg,rgb(144 0 255 / 0.3),rgb(144 0 255 / 0.1))',alignSelf:'center'}} />

                <div style={{display:'inline-flex',alignItems:'center',gap:'5px',padding:'6px 12px',borderRadius:'10px',border:'1.5px solid rgb(144 0 255 / 0.35)',fontSize:'11px',fontWeight:600,whiteSpace:'nowrap',background:'rgb(144 0 255 / 0.07)',filter:'blur(0.4px)',pointerEvents:'none'}}>◆ Action</div>

                <div style={{width:'24px',height:'2px',flex:'none',background:'linear-gradient(90deg,rgb(144 0 255 / 0.3),rgb(144 0 255 / 0.1))',alignSelf:'center'}} />

                <div style={{display:'inline-flex',alignItems:'center',gap:'5px',padding:'6px 12px',borderRadius:'10px',border:'1.5px solid rgb(255 100 80 / 0.35)',fontSize:'11px',fontWeight:600,whiteSpace:'nowrap',background:'rgb(255 100 80 / 0.05)',filter:'blur(0.4px)',pointerEvents:'none'}}>■ End</div>
              </div>

              <div style={{position:'absolute',bottom:'10px',left:'50%',transform:'translateX(-50%)',fontSize:'10.5px',opacity:0.55,whiteSpace:'nowrap',fontFamily:'"JetBrains Mono",monospace'}}>\[ locked ] View-only — duplicate to edit</div>
            </div>
          </div>
        </div>
      </div>
    </Tab>
  </Tabs>
</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">Limits and defaults</span>
    <h2 className="text-2xl md:text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">What the system defaults to.</h2>

    <p className="text-base text-gray-600 dark:text-gray-400 max-w-3xl">
      These values apply when you do not configure them explicitly. Most can be overridden at the node level.
    </p>
  </div>

  <div className="mxs-limits">
    <div className="mxs-limit"><b className="xc-count" style={{"--xc-to":"50"}} data-suffix=""><span className="xc-real">50</span></b><span>default loop maxIterations</span></div>
    <div className="mxs-limit"><b>120 000 ms</b><span>default per-node timeout (2 min)</span></div>
    <div className="mxs-limit"><b className="xc-count" style={{"--xc-to":"3"}} data-suffix=""><span className="xc-real">3</span></b><span>default per-node max retry attempts</span></div>
    <div className="mxs-limit"><b className="xc-count" style={{"--xc-to":"7"}} data-suffix=""><span className="xc-real">7</span></b><span>Speed Mode batch — graph workflows</span></div>
    <div className="mxs-limit"><b className="xc-count" style={{"--xc-to":"10"}} data-suffix=""><span className="xc-real">10</span></b><span>Speed Mode batch — linear workflows</span></div>
    <div className="mxs-limit"><b>false</b><span>condition evaluator failure default</span></div>
    <div className="mxs-limit"><b>break</b><span>loop failure default — exits immediately</span></div>
    <div className="mxs-limit"><b className="xc-count" style={{"--xc-to":"21"}} data-suffix=""><span className="xc-real">21</span></b><span>library page size, sorted by last updated</span></div>
  </div>

  <Info>
    Speed Mode batches consecutive action and step nodes into a single computer-use pass. This is faster but can cause ordering issues in complex graphs. If steps appear to be skipped or run out of order, add a condition or merge node to break the batch boundary.
  </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">Best practices</span>
    <h2 className="text-2xl md:text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">Build workflows that hold up.</h2>
  </div>

  <AccordionGroup>
    <Accordion title="Add completion criteria to action nodes" icon="circle-check">
      Action nodes can carry <code>completionCriteria</code> with <code>successIndicators\[]</code> and <code>failureIndicators\[]</code>, plus a per-node <code>timeoutMs</code> and <code>maxAttempts</code>. Without these, the orchestrator guesses from raw CUA output. Add <code>evidenceHints.urlPatterns\[]</code> on navigation steps to eliminate false-positive completions.
    </Accordion>

    <Accordion title="Cap loop maxIterations explicitly" icon="repeat">
      The default is 50, which is appropriate for open-ended scrapes. For known-bounded loops — iterating over a fixed-length table, processing a list with a known count — set a tighter limit. If the evaluator is unreachable, loops exit immediately (fail-closed, not runaway) — safe but still better to bound them correctly.
    </Accordion>

    <Accordion title="Use file-operation nodes for cross-step state" icon="file">
      Variables hold scalar values (strings, numbers). For large intermediate outputs — scraped tables, extracted JSON, multi-page results — use <code>file-operation</code> nodes tagged <code>purpose: 'memory'</code> or <code>'artifact'</code>. This keeps the context window clean across many steps and prevents variable bloat.
    </Accordion>

    <Accordion title="Check MCP connections before running" icon="plug">
      Custom-tool nodes reference tools by ID. If a required MCP server is disconnected, the run is blocked at initialization with an error naming the missing server IDs. Connect or reconnect them in <strong>Settings → Apps/MCPs</strong> before attempting to run.
    </Accordion>

    <Accordion title="Design the condition false branch as the safe path" icon="git-branch">
      Condition nodes default to <code>false</code> on any evaluator failure. Wire the false edge to the safer action — retry, exit, or escalate — not to the destructive or irreversible step. The true branch should be the happy path; the false branch should be the guard.
    </Accordion>

    <Accordion title="Export before editing complex workflows" icon="download">
      The toolbar Export button serialises the full workflow JSON. Import restores it with new IDs. Snapshot a working workflow before major restructuring — if something breaks mid-edit, you can reimport the last good state without losing the whole workflow.
    </Accordion>

    <Accordion title="Subscribed marketplace workflows are read-only — duplicate to edit" icon="store">
      The editor opens subscribed workflows in view-only mode (no Save button, no node editing). To customise: use the kebab menu on the card and select <strong>Duplicate</strong>. The duplicate becomes a fully editable workflow in your library.
    </Accordion>

    <Accordion title="Use descriptive snake_case variable names" icon="variable">
      Both <code>\$\{varName}</code> and <code>\{\{varName}}</code> syntax work. The run modal displays variable names verbatim as form labels — <code>target\_url</code> is self-documenting; <code>v1</code> is not. Descriptive names mean anyone filling in the modal needs no additional explanation.
    </Accordion>

    <Accordion title="Prefer custom-tool nodes over action nodes when a direct tool exists" icon="zap">
      <code>custom-tool</code> nodes invoke MCP-backed tools directly, bypassing computer use entirely. They are faster, cheaper, and more reliable than screen automation for apps that expose a proper integration. Use action nodes only when no tool covers the step.
    </Accordion>

    <Accordion title="Use subroutines to stay DRY" icon="layers">
      If the same sequence of steps appears in multiple workflows, extract it into its own workflow and embed it as a subroutine. The parent workflow waits for the subroutine to complete before continuing. Subroutines compose — a subroutine can itself contain subroutines.
    </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">In practice</span>
    <h2 className="text-2xl md:text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">From a four-hour checklist to one run.</h2>

    <p className="text-base text-gray-600 dark:text-gray-400 max-w-3xl">
      The monthly close involves the same sequence of steps every time. Below is what it looks like before and after encoding it as a workflow with built-in approval gates.
    </p>
  </div>

  <div className="xc-ba">
    <div className="xc-ba-col before">
      <div className="xc-ba-tag">Before — manual close</div>
      <div className="xc-ba-item"><span className="tm">09:00</span>Pull AR ageing report from accounting app, paste into spreadsheet</div>
      <div className="xc-ba-item"><span className="tm">09:30</span>Cross-check 23 expense line items against receipts folder manually</div>
      <div className="xc-ba-item"><span className="tm">10:15</span>Draft variance commentary, email Felix a briefing to review</div>
      <div className="xc-ba-item"><span className="tm">11:00</span>Wait for Felix to review — reminder sent if no reply by noon</div>
      <div className="xc-ba-item"><span className="tm">12:30</span>Apply Felix's edits, re-export PDF, upload to shared drive</div>
      <div className="xc-ba-item"><span className="tm">13:00</span>Post summary to Slack #finance channel, mark task complete</div>
      <div className="xc-ba-item" style={{opacity:0.6,fontStyle:'italic'}}><span className="tm" />Entire process re-briefed from scratch next month</div>
    </div>

    <div className="xc-ba-col after">
      <div className="xc-ba-tag">After — one workflow run</div>
      <div className="xc-ba-item"><span className="tm">09:00</span>Workflow triggered — variables: <strong>report\_month</strong>, <strong>expense\_threshold</strong></div>
      <div className="xc-ba-item"><span className="tm">09:02</span>Action node navigates to accounting app, extract node pulls AR ageing data</div>
      <div className="xc-ba-item"><span className="tm">09:07</span>Loop node iterates over 23 expense rows, file-operation node writes reconciliation file</div>
      <div className="xc-ba-item"><span className="tm">09:11</span>Step node drafts variance commentary from extracted data</div>
      <div className="xc-ba-item"><span className="tm">09:12</span><strong>Ask Human gate — Felix approves or edits commentary before the workflow continues</strong></div>
      <div className="xc-ba-item"><span className="tm">09:14</span>Custom-tool node exports PDF artifact, uploads to drive, posts to Slack</div>
      <div className="xc-ba-item" style={{color:'#2da876',fontWeight:600}}><span className="tm" />Same procedure runs identically next month — no re-briefing needed</div>
    </div>
  </div>

  <div className="xc-quote" style={{marginTop:'32px'}}>
    <p>You brief the process once. After that, the workflow holds the knowledge — approvals, sequencing, edge cases and all. Next month you just hit Run.</p>
    <span>Felix · Finance and Ops — illustrative scenario based on the features documented on this page</span>
  </div>
</div>

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

      <h2 className="text-2xl md:text-3xl font-semibold tracking-tight text-white leading-tight">
        Encode your first automation today.
      </h2>

      <p className="text-base md:text-lg text-white/85">
        Open the Dashboard, click <strong>New workflow</strong>, and start with the task you repeat most.
      </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">
    Design once. Run on any trigger, any schedule, any surface.<br />
    Visual graph editor · Typed variables · MCP + CUA in one graph.
  </p>
</div>

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

  <Columns cols={4}>
    <Card title="Schedules" icon="calendar-clock" href="/Folders/schedules">
      Put a workflow on a recurring schedule — daily digests, weekly reports, hourly monitors.
    </Card>

    <Card title="Computer use" icon="mouse-pointer-2" href="/Folders/computer-use">
      Understand the CUA engine that powers action nodes — vision, clicking, and screen extraction.
    </Card>

    <Card title="MCP integrations" icon="plug" href="/Folders/mcp">
      Connect the MCP servers your custom-tool nodes depend on — Slack, Notion, Linear, and more.
    </Card>

    <Card title="Marketplace" icon="store" href="/Folders/marketplace">
      Browse and install community-built workflows. Publish your own for others to reuse.
    </Card>
  </Columns>
</div>
