{{ define "title" }}CircleCI CLI{{ end }}
{{ define "description" }}The CircleCI CLI brings pipelines, workflows, jobs, and artifacts to your terminal — scriptable, JSON-friendly, and built for CI.{{ end }}
{{ define "llms_href" }}llms.txt{{ end }}
{{ define "body_class" }}has-site-nav page-home{{ end }}
{{ define "main" }}
  {{ partial "navbar.html" (dict "root" "") }}

  <main class="site-main">

    {{/* ── Hero ──────────────────────────────────────────────────────────── */}}
    <section>
      <div class="hero-inner">

        {{/* Left column — text + install picker */}}
        <div>
          <h1 class="hero-title">CircleCI in your<br>command line.</h1>
          <p class="hero-desc">
            Trigger and watch runs, inspect workflows and jobs, pull down
            artifacts, and validate config — all from your terminal. Every
            data-returning command speaks <code>--json</code>, so it drops
            straight into scripts and CI.
          </p>

          <div class="hero-install-wrap" id="install-picker">
            <div class="install-bar">
              <button class="install-dropdown-btn" id="install-dropdown-btn"
                      type="button" aria-haspopup="listbox" aria-expanded="false"
                      aria-controls="install-menu">
                <span id="install-selected-label">macOS — Homebrew</span>
                <svg class="install-dropdown-chevron" viewBox="0 0 16 16" fill="none" aria-hidden="true">
                  <path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </button>
            </div>

            <ul class="install-menu" id="install-menu" role="listbox" aria-label="Installation method" hidden>
              <li role="option"
                  tabindex="-1"
                  data-cmd="brew install circleci"
                  data-platform="macos"
                  aria-selected="true">
                macOS — Homebrew
              </li>
              <li class="picker-divider" aria-hidden="true"></li>
              <li role="option"
                  tabindex="-1"
                  data-cmd="winget install --id CircleCI.CLI"
                  data-platform="windows"
                  aria-selected="false">
                Windows — WinGet
              </li>
              <li class="picker-divider" aria-hidden="true"></li>
              <li role="option"
                  tabindex="-1"
                  data-cmd="curl -1sLf \
  'https://packages.circleci.com/public/setup.deb.sh' \
  | sudo -E bash"
                  data-cmd2="sudo apt install circleci"
                  data-platform="linux"
                  aria-selected="false">
                Linux — apt (Debian, Ubuntu, Mint, Raspberry Pi)
              </li>
              <li role="option"
                  tabindex="-1"
                  data-cmd="curl -1sLf \
  'https://packages.circleci.com/public/setup.rpm.sh' \
  | sudo -E bash"
                  data-cmd2="sudo dnf install circleci"
                  aria-selected="false">
                Linux — rpm (Fedora, RHEL, SUSE, Amazon)
              </li>
              <li class="picker-divider" aria-hidden="true"></li>
              <li role="option"
                  tabindex="-1"
                  data-cmd="brew install circleci"
                  aria-selected="false">
                Linux — Homebrew
              </li>
              <li role="option"
                  tabindex="-1"
                  data-cmd="sudo snap install circleci"
                  data-cmd2="sudo snap connect circleci:password-manager-service"
                  aria-selected="false">
                Linux — Snap
              </li>
            </ul>
          </div>

          <section class="hero-tip" aria-labelledby="hero-tip-install">
            <h2 class="hero-tip-title" id="hero-tip-install">Install</h2>

            {{/* Install command(s) for the platform chosen in the picker above.
                 Step 1 always shows; step 2 appears only for package managers that
                 need a second command (apt, rpm, snap), driven by the selected
                 option's data-cmd2. Both are populated by the picker JS below. */}}
            <div class="hero-tip-steps">
              <div class="hero-tip-bar">
                <span class="install-cmd-wrap"><span class="install-prompt">$ </span><span id="install-step1">brew install circleci</span></span>
                {{ partial "copy-button.html" (dict "copyTarget" "install-step1") }}
              </div>
              <div class="hero-tip-bar" id="install-step2-bar" hidden>
                <span class="install-cmd-wrap"><span class="install-prompt">$ </span><span id="install-step2"></span></span>
                {{ partial "copy-button.html" (dict "copyTarget" "install-step2") }}
              </div>
            </div>

            <h2 class="hero-tip-title" id="hero-tip-title">Authenticate</h2>
            <div class="hero-tip-row">
              <div class="hero-tip-bar">
                <span class="install-cmd-wrap"><span class="install-prompt">$ </span>circleci auth login</span>
                {{ partial "copy-button.html" (dict "cmd" "circleci auth login") }}
              </div>
              <span class="hero-tip-or">or</span>
              <div class="hero-tip-bar">
                <span class="install-cmd-wrap"><span class="install-prompt">$ </span>circleci auth signup</span>
                {{ partial "copy-button.html" (dict "cmd" "circleci auth signup") }}
              </div>
            </div>

            <h2 class="hero-tip-title" id="hero-tip-title-2">Ready to run</h2>
            <div class="hero-tip-bar">
              <span class="install-cmd-wrap"><span class="install-prompt">$ </span>circleci run get</span>
              {{ partial "copy-button.html" (dict "cmd" "circleci run get") }}
            </div>
          </section>

          <p class="hero-ref-link"><a href="reference/">View command reference &rarr;</a></p>

          <p class="hero-fine">
            Looking for something else? See the
            <a href="https://github.com/CircleCI-Public/circleci-cli/releases">latest release</a>
            for prebuilt binaries and Linux packages.
          </p>

        </div>

        {{/* Right column — terminal screenshot */}}
        <div class="hero-screenshot">
          <img src="img/run-get.svg" alt="Running 'circleci run get -b main' in a terminal" loading="lazy">
        </div>

      </div>
    </section>

  </main>

  <footer class="site-footer">
    <div class="site-footer-inner">
      <div class="site-footer-legal">
        <span>© 2026 Circle Internet Services, Inc.</span>
        <a class="footer-link" href="https://circleci.com/legal/terms-of-use/">Terms of Use</a>
        <a class="footer-link" href="https://circleci.com/legal/privacy/">Privacy Policy</a>
      </div>
      <div class="site-footer-social">
        <a class="social-link" href="https://circleci.com/blog/feed.xml" aria-label="CircleCI blog RSS feed">
          <svg class="social-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M19.199 24C19.199 13.467 10.533 4.8 0 4.8V0c13.165 0 24 10.835 24 24h-4.801zM3.291 17.415c1.814 0 3.293 1.479 3.293 3.295 0 1.813-1.485 3.29-3.301 3.29C1.47 24 0 22.523 0 20.71s1.475-3.294 3.291-3.295zM15.909 24h-4.665c0-6.169-5.075-11.245-11.244-11.245V8.09c8.727 0 15.909 7.184 15.909 15.91z"/></svg>
        </a>
        <a class="social-link" href="https://www.linkedin.com/company/circleci" aria-label="CircleCI on LinkedIn">
          <svg class="social-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.225 0z"/></svg>
        </a>
        <a class="social-link" href="https://github.com/circleci" aria-label="CircleCI on GitHub">
          <svg class="social-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
        </a>
        <a class="social-link" href="https://twitch.tv/circleci" aria-label="CircleCI on Twitch">
          <svg class="social-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714z"/></svg>
        </a>
      </div>
    </div>
  </footer>

  <script>
  (function () {
    var picker   = document.getElementById('install-picker');
    var btn      = document.getElementById('install-dropdown-btn');
    var menu     = document.getElementById('install-menu');
    var lbl      = document.getElementById('install-selected-label');
    var step1El  = document.getElementById('install-step1');
    var step2El  = document.getElementById('install-step2');
    var step2Bar = document.getElementById('install-step2-bar');

    function opts() { return Array.from(menu.querySelectorAll('[role="option"]')); }

    // Reflect the chosen platform's command(s) into the Install section. The
    // second bar is shown only when the option carries a data-cmd2 (apt, rpm, snap).
    function applyCmds(opt) {
      step1El.textContent = opt.dataset.cmd;
      var cmd2 = opt.dataset.cmd2;
      if (cmd2) {
        step2El.textContent = cmd2;
        step2Bar.hidden = false;
      } else {
        step2El.textContent = '';
        step2Bar.hidden = true;
      }
    }

    function open() {
      menu.hidden = false;
      btn.setAttribute('aria-expanded', 'true');
      var sel = menu.querySelector('[aria-selected="true"]') || opts()[0];
      if (sel) sel.focus();
    }

    function close(returnFocus) {
      menu.hidden = true;
      btn.setAttribute('aria-expanded', 'false');
      if (returnFocus) btn.focus();
    }

    // Apply an option as the current selection: aria state, button label, and
    // the Install command bars. Does not open or close the menu.
    function setSelection(opt) {
      opts().forEach(function (el) { el.setAttribute('aria-selected', 'false'); });
      opt.setAttribute('aria-selected', 'true');
      lbl.textContent = opt.textContent.trim();
      applyCmds(opt);
    }

    function select(opt) {
      setSelection(opt);
      close(true);
    }

    btn.addEventListener('click', function () { menu.hidden ? open() : close(false); });

    menu.addEventListener('click', function (e) {
      var opt = e.target.closest('[role="option"]');
      if (opt) select(opt);
    });

    menu.addEventListener('keydown', function (e) {
      var list = opts();
      var idx  = list.indexOf(document.activeElement);
      if (e.key === 'ArrowDown') {
        e.preventDefault();
        list[(idx + 1) % list.length].focus();
      } else if (e.key === 'ArrowUp') {
        e.preventDefault();
        list[(idx - 1 + list.length) % list.length].focus();
      } else if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        if (idx !== -1) select(list[idx]);
      }
    });

    document.addEventListener('click', function (e) {
      if (!picker.contains(e.target)) close(false);
    });

    document.addEventListener('keydown', function (e) {
      if (e.key === 'Escape' && !menu.hidden) close(true);
    });

    // Detect the visitor's OS to pre-select a sensible install method. Prefers
    // the modern User-Agent Client Hints API (navigator.userAgentData.platform,
    // Chromium only), falling back to the deprecated navigator.platform and then
    // userAgent for Safari/Firefox. Returns 'macos' | 'windows' | 'linux' | null.
    function detectPlatform() {
      var hint = (navigator.userAgentData && navigator.userAgentData.platform) || '';
      var s = (hint || navigator.platform || navigator.userAgent || '').toLowerCase();
      if (/android|iphone|ipad|ipod/.test(s)) return null; // no CLI on mobile
      if (s.indexOf('mac') !== -1) return 'macos';
      if (s.indexOf('win') !== -1) return 'windows';
      if (s.indexOf('linux') !== -1 || s.indexOf('x11') !== -1) return 'linux';
      return null;
    }

    // Pre-select the option matching the visitor's OS; fall back to the HTML
    // default (macOS) when the platform is unknown or unsupported. Runs on load.
    var plat    = detectPlatform();
    var initial = (plat && menu.querySelector('[data-platform="' + plat + '"]'))
               || menu.querySelector('[aria-selected="true"]')
               || opts()[0];
    if (initial) setSelection(initial);
  })();

  document.querySelectorAll('.copy-btn').forEach(function (btn) {
    var icon = btn.querySelector('svg');
    var checkSVG = '<polyline points="2.5,8 6,12 13.5,4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>';
    var originalHTML = icon.innerHTML;
    btn.addEventListener('click', function () {
      var text = btn.dataset.cmd || document.getElementById(btn.dataset.copyTarget).textContent;
      navigator.clipboard.writeText(text).then(function () {
        icon.innerHTML = checkSVG;
        setTimeout(function () { icon.innerHTML = originalHTML; }, 2000);
      }).catch(function () {
        btn.setAttribute('aria-label', 'Copy failed');
        setTimeout(function () { btn.setAttribute('aria-label', 'Copy command'); }, 2000);
      });
    });
  });
  </script>

{{ end }}