---
// The three numbered intro steps with the hover-reveal logo panels.
const logos = import.meta.glob<string>("../../assets/logos/*.svg", {
  eager: true,
  query: "?url",
  import: "default",
});
const logo = (name: string): string => {
  const hit = Object.entries(logos).find(([k]) => k.endsWith(`/${name}.svg`));
  if (!hit) throw new Error(`missing logo ${name}`);
  return hit[1];
};
const toolLogos = ["github", "linear", "sentry", "stripe", "notion", "slack", "jira", "gmail"];
const agentLogos = ["claude", "codex", "cursor", "chatgpt", "gemini", "hermes", "copilot", "windsurf", "opencode", "zed", "grok"];
---

<ol class="doc__steps">
  <li>
    <span class="doc__num">01</span>
    <span>
      Connect{" "}
      <span class="doc__pop" tabindex="0">
        <span class="doc__pop-word">everything</span>
        <span class="doc__pop-panel" aria-hidden="true" inert>
          {toolLogos.map((n, i) => (
            <span class="doc__pop-tile" style={`--i:${i}`}><img src={logo(n)} alt="" width="18" height="18" /></span>
          ))}
          <span class="doc__pop-pill" style={`--i:${toolLogos.length}`}>any OpenAPI, GraphQL, or MCP</span>
        </span>
      </span>
      {" "}to Executor.
    </span>
  </li>
  <li>
    <span class="doc__num">02</span>
    <span>
      Give{" "}
      <span class="doc__pop" tabindex="0">
        <span class="doc__pop-word">your agent</span>
        <span class="doc__pop-panel" aria-hidden="true" inert>
          {agentLogos.map((n, i) => (
            <span class="doc__pop-tile" style={`--i:${i}`}><img src={logo(n)} alt="" width="18" height="18" /></span>
          ))}
          <span class="doc__pop-pill" style={`--i:${agentLogos.length}`}>any MCP client</span>
        </span>
      </span>
      {" "}the Executor tool.
    </span>
  </li>
  <li>
    <span class="doc__num">03</span>
    <span>That's it.</span>
  </li>
</ol>