aboutsummaryrefslogtreecommitdiff
path: root/website/src
diff options
context:
space:
mode:
authorOgulcan Celik <ogulcancelik@gmail.com>2026-08-07 15:32:50 +0300
committerOgulcan Celik <ogulcancelik@gmail.com>2026-08-07 15:39:05 +0300
commit79a953e91e54cee5060111debf3327d6b6822f93 (patch)
treeae0c03308cecebc9c334e16fd075d58e4d6fc400 /website/src
parent322ab6a5a98db5c230b7c90881b8b4baf4cee624 (diff)
feat(website): rebuild compare page in new design with runtime positioning
Diffstat (limited to 'website/src')
-rw-r--r--website/src/components/SiteLayout.astro5
-rw-r--r--website/src/pages/compare.astro729
2 files changed, 262 insertions, 472 deletions
diff --git a/website/src/components/SiteLayout.astro b/website/src/components/SiteLayout.astro
index a8878646..aa933728 100644
--- a/website/src/components/SiteLayout.astro
+++ b/website/src/components/SiteLayout.astro
@@ -95,7 +95,7 @@ const facts = version ? `v${version} · Apache 2.0` : 'Apache 2.0';
window.herdrGround.apply(window.herdrGround.read());
</script>
<link rel="stylesheet" href="/css/style.css?v=59" />
- <link rel="stylesheet" href="/css/site.css?v=60" />
+ <link rel="stylesheet" href="/css/site.css?v=62" />
</head>
<body class="site">
<div class="hd-frame">
@@ -105,6 +105,7 @@ const facts = version ? `v${version} · Apache 2.0` : 'Apache 2.0';
<a class="lnk" href="/docs/">Docs</a>
<a class="lnk" href="/plugins/">Plugins</a>
<a class="lnk" href="/blog/">Blog</a>
+ <a class="lnk" href="/compare/">Compare</a>
<a class="ico wide" href="https://github.com/herdrdev/herdr" aria-label="Herdr on GitHub — star count">
<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82A7.64 7.64 0 0 1 8 3.87c.68 0 1.36.09 2 .26 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z" /></svg>
<b data-stars>{fmt(starCount)}</b>
@@ -126,6 +127,7 @@ const facts = version ? `v${version} · Apache 2.0` : 'Apache 2.0';
<a href="/docs/">Docs</a>
<a href="/plugins/">Plugins</a>
<a href="/blog/">Blog</a>
+ <a href="/compare/">Compare</a>
<a href="https://x.com/herdrdev">@herdrdev</a>
<div class="sheet-ground">
<span>Ground</span>
@@ -143,6 +145,7 @@ const facts = version ? `v${version} · Apache 2.0` : 'Apache 2.0';
<a href="/docs/">docs</a>
<a href="/plugins/">plugins</a>
<a href="/blog/">blog</a>
+ <a href="/compare/">compare</a>
<span>built in the terminal · © {year} Herdr, Inc.</span>
<span class="fact">{facts}</span>
<span class="out">
diff --git a/website/src/pages/compare.astro b/website/src/pages/compare.astro
index b9131be6..315d6a1b 100644
--- a/website/src/pages/compare.astro
+++ b/website/src/pages/compare.astro
@@ -1,478 +1,265 @@
-<!doctype html>
-<html lang="en">
- <head>
- <meta charset="utf-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1" />
- <title>Compare Herdr — terminal-native agent multiplexer</title>
- <meta
- name="description"
- content="Compare Herdr with tmux, Zellij, cmux, Warp, Solo, Conductor, Emdash, and Superset. See where terminal multiplexers, agent terminals, process dashboards, and worktree orchestrators differ."
- />
- <meta name="theme-color" content="#f0eee9" />
- <link rel="canonical" href="https://herdr.dev/compare/" />
+---
+import SiteLayout from '../components/SiteLayout.astro';
+---
- <meta property="og:type" content="website" />
- <meta property="og:site_name" content="Herdr" />
- <meta property="og:title" content="Compare Herdr — terminal-native agent multiplexer" />
- <meta
- property="og:description"
- content="Herdr combines tmux-style persistence, real terminal panes, agent state, direct attach, SSH workflows, and an API agents can drive."
- />
- <meta property="og:url" content="https://herdr.dev/compare/" />
- <meta property="og:image" content="https://herdr.dev/assets/og-card-v9.png" />
- <meta property="og:image:width" content="1200" />
- <meta property="og:image:height" content="630" />
- <meta property="og:image:alt" content="Herdr — run them anywhere, leave them running." />
+<SiteLayout
+ title="Compare Herdr vs tmux, Zellij, cmux, Warp & agent managers"
+ description="Compare Herdr with tmux, Zellij, cmux, Warp, Solo, Conductor, Emdash, and Superset. Multiplexers persist terminals and apps manage agents. Herdr is the runtime agents live on, with clients on top."
+ canonicalPath="/compare/"
+>
+ <main>
+ <header class="ph ph-split">
+ <div>
+ <div class="hd-eyebrow"><s></s>compare</div>
+ <h1>Apps manage the herd. Herdr <em>runs</em> it.</h1>
+ <p>
+ Most tools Herdr gets compared to are apps: a window you open to
+ manage coding agents, and a window the work depends on. Herdr is a
+ different kind of thing: a runtime. A server holds real terminals
+ open on the machine, the agents live in those, and every UI, ours
+ included, is just a client that attaches. Keep that split in mind
+ and the matrix below mostly explains itself.
+ </p>
+ </div>
+ <aside class="ph-side">
+ <b>9</b>
+ <span>tools compared · one runtime</span>
+ </aside>
+ </header>
- <meta name="twitter:card" content="summary_large_image" />
- <meta name="twitter:title" content="Compare Herdr — terminal-native agent multiplexer" />
- <meta
- name="twitter:description"
- content="Compare Herdr with tmux, Zellij, cmux, Warp, Solo, Conductor, Emdash, and Superset."
- />
- <meta name="twitter:image" content="https://herdr.dev/assets/og-card-v9.png" />
- <meta name="twitter:image:alt" content="Herdr — run them anywhere, leave them running." />
+ <section class="cmp" id="matrix">
+ <div class="fighd">
+ <span>herdr against the field</span>
+ <span class="r">scrolls sideways on a phone</span>
+ </div>
+ <div class="cmp-scroll">
+ <table>
+ <thead>
+ <tr>
+ <th>capability</th>
+ <th class="h">herdr</th>
+ <th>tmux · zellij</th>
+ <th>cmux · warp</th>
+ <th>solo</th>
+ <th>conductor · emdash · superset</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">Kind of thing</th>
+ <td class="h">runtime + clients</td>
+ <td>terminal multiplexer</td>
+ <td>terminal app</td>
+ <td>process dashboard</td>
+ <td>manager app</td>
+ </tr>
+ <tr>
+ <th scope="row">Work survives its own UI closing</th>
+ <td class="h">yes, the server owns the terminals</td>
+ <td>yes, detach</td>
+ <td>session restore</td>
+ <td>while the app is open</td>
+ <td>while the app is open</td>
+ </tr>
+ <tr>
+ <th scope="row">Runs inside your existing terminal</th>
+ <td class="h">yes</td>
+ <td>yes</td>
+ <td>replaces it</td>
+ <td class="no">no, desktop app</td>
+ <td class="no">no, desktop app</td>
+ </tr>
+ <tr>
+ <th scope="row">Semantic agent state</th>
+ <td class="h">blocked · working · done · idle</td>
+ <td class="no">—</td>
+ <td>attention cues</td>
+ <td>process status</td>
+ <td>workspace status</td>
+ </tr>
+ <tr>
+ <th scope="row">Detach, reattach, SSH in</th>
+ <td class="h">yes, any tty</td>
+ <td>yes</td>
+ <td>partial</td>
+ <td class="no">—</td>
+ <td>remote projects</td>
+ </tr>
+ <tr>
+ <th scope="row">Direct attach to one agent</th>
+ <td class="h">yes</td>
+ <td class="no">—</td>
+ <td class="no">—</td>
+ <td class="no">—</td>
+ <td class="no">—</td>
+ </tr>
+ <tr>
+ <th scope="row">API agents drive themselves</th>
+ <td class="h">read · send · wait · split · attach</td>
+ <td>terminal scripting</td>
+ <td>app APIs</td>
+ <td>MCP for processes</td>
+ <td>workflow APIs</td>
+ </tr>
+ <tr>
+ <th scope="row">Worktree and diff review flow</th>
+ <td class="h">pairs with it</td>
+ <td class="no">—</td>
+ <td>partial</td>
+ <td class="no">—</td>
+ <td>yes, their core</td>
+ </tr>
+ <tr>
+ <th scope="row">Clients on the same runtime</th>
+ <td class="h">TUI · CLI · plain SSH, more coming</td>
+ <td>its own client</td>
+ <td>the app only</td>
+ <td>the app only</td>
+ <td>the app only</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <p class="figcap">
+ The columns are categories, not enemies: Herdr pairs happily with a
+ worktree manager and runs fine inside a fancy terminal.
+ <b>The row that sorts the field is the second one:</b> what happens to
+ the agents when the thing you're looking at goes away.
+ </p>
+ </section>
- <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon.png?v=14" />
- <link rel="apple-touch-icon" href="/assets/logo.png" />
- <link rel="preload" href="/assets/jbm.woff2" as="font" type="font/woff2" crossorigin />
- <script>
- (function () {
- var saved = localStorage.getItem("herdr-palette");
- var system = window.matchMedia("(prefers-color-scheme: dark)").matches
- ? "tokyo-night"
- : "tokyo-night-day";
- document.documentElement.setAttribute("data-palette", saved || system);
- })();
- </script>
- <link rel="stylesheet" href="/css/style.css?v=39" />
- </head>
- <body>
- <header class="site-header">
- <nav class="nav" aria-label="Primary navigation">
- <a class="brand" href="/" aria-label="Herdr home">
- <span class="brand-logo" aria-hidden="true"></span>
- <span>herdr</span>
- </a>
- <details class="nav-menu">
- <summary class="nav-menu-button" aria-label="Open navigation">
- <span></span>
- <span></span>
- <span></span>
- </summary>
- <div class="nav-menu-panel">
- <a href="/">Home</a>
- <a href="/compare/" aria-current="page">Compare</a>
- <a href="/plugins/">Plugins</a>
- <a href="/blog/">Blog</a>
- <a href="/docs/quick-start/">Quick start</a>
- <a href="/docs/">Docs</a>
- <a href="/docs/socket-api/">API</a>
- <a href="/docs/install/">Install</a>
- <a href="https://github.com/herdrdev/herdr">GitHub</a>
- </div>
- </details>
- <div class="nav-links">
- <a href="/">Home</a>
- <a href="/compare/" aria-current="page">Compare</a>
- <a href="/plugins/">Plugins</a>
- <a href="/blog/">Blog</a>
- <a href="/docs/quick-start/">Quick start</a>
- <a href="/docs/">Docs</a>
- <a href="/docs/socket-api/">API</a>
- </div>
- <div class="nav-tools">
- <a class="nav-icon-link" href="https://github.com/herdrdev/herdr" aria-label="Herdr on GitHub">
- <svg viewBox="0 0 16 16" aria-hidden="true">
- <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82A7.64 7.64 0 0 1 8 3.87c.68 0 1.36.09 2 .26 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z" />
- </svg>
- </a>
- <a class="nav-icon-link" href="https://x.com/herdrdev" aria-label="Herdr on X">
- <svg viewBox="0 0 24 24" aria-hidden="true">
- <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231Zm-1.161 17.52h1.833L7.084 4.126H5.117Z" />
- </svg>
- </a>
- <a class="nav-cta" href="/docs/install/">Install</a>
- </div>
- </nav>
- </header>
-
- <main>
- <section class="hero compare-hero">
- <div class="hero-copy">
- <p class="eyebrow"><span class="status-dot dot-done"></span>Compare Herdr</p>
- <h1>The agent multiplexer that lives in your terminal.</h1>
- <p class="hero-lede">
- Herdr gives coding agents the thing tmux gave terminal users:
- persistent real panes, detach and reattach, remote access, and a
- control surface. Then it adds agent state and an API the agents can use.
- </p>
- <div class="hero-actions">
- <a class="button button-primary" href="/docs/quick-start/">Quick start</a>
- <a class="button button-secondary" href="#matrix">See the matrix</a>
- </div>
- </div>
- <div class="compare-claim-card" aria-label="Herdr positioning summary">
- <p class="section-kicker">Herdr combines</p>
- <h2>tmux persistence, agent awareness, no terminal replacement.</h2>
- <ul class="compare-checks">
- <li>Runs inside your existing terminal</li>
- <li>Owns persistent PTY sessions</li>
- <li>Attaches locally, over SSH, or directly to one agent</li>
- <li>Tracks blocked, working, done, and idle state</li>
- <li>Exposes CLI and socket APIs agents can drive</li>
- </ul>
- </div>
- </section>
-
- <section class="section compare-stack-section" id="matrix">
- <div class="section-heading-wide">
- <div>
- <p class="section-kicker">The stack</p>
- <h2>Pick the center of gravity.</h2>
- </div>
- <p>
- The question is not whether a tool can run a terminal. Most can.
- The question is whether it combines terminal-native persistence with
- agent state and agent-controlled automation.
- </p>
- </div>
-
- <div class="table-wrap comparison-matrix">
- <table>
- <thead>
- <tr>
- <th>Capability</th>
- <th>Herdr</th>
- <th>tmux / Zellij</th>
- <th>cmux / Warp</th>
- <th>Solo</th>
- <th>Conductor / Emdash / Superset</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>Runs inside your existing terminal</td>
- <td>yes</td>
- <td>yes</td>
- <td>no, terminal app</td>
- <td>no, desktop app</td>
- <td>no, app workspace</td>
- </tr>
- <tr>
- <td>Persistent PTY session runtime</td>
- <td>yes</td>
- <td>yes</td>
- <td>session/app restore</td>
- <td>managed processes</td>
- <td>embedded terminals</td>
- </tr>
- <tr>
- <td>Detach, reattach, and SSH in</td>
- <td>yes</td>
- <td>yes</td>
- <td>partial</td>
- <td>no</td>
- <td>remote projects</td>
- </tr>
- <tr>
- <td>Direct attach to one agent terminal</td>
- <td>yes</td>
- <td>no</td>
- <td>no</td>
- <td>no</td>
- <td>no</td>
- </tr>
- <tr>
- <td>Semantic agent state</td>
- <td>blocked / working / done / idle</td>
- <td>no</td>
- <td>attention or native-agent status</td>
- <td>process status</td>
- <td>workspace status</td>
- </tr>
- <tr>
- <td>Agent-shaped API</td>
- <td>read, send, wait, split, attach</td>
- <td>terminal scripting</td>
- <td>app APIs</td>
- <td>MCP for processes</td>
- <td>workflow APIs</td>
- </tr>
- <tr>
- <td>Git worktree and diff review flow</td>
- <td>pairs with it</td>
- <td>no</td>
- <td>partial</td>
- <td>no</td>
- <td>yes</td>
- </tr>
- </tbody>
- </table>
- </div>
- </section>
-
- <section class="section compare-categories-section">
- <div class="section-heading">
- <p class="section-kicker">How Herdr differs</p>
- <h2>The intersection other tools miss.</h2>
- </div>
- <div class="differ-grid">
- <article class="intersection-card">
- <span class="card-index">Herdr</span>
- <h3>Persistent terminal runtime, built for agents.</h3>
- <p>
- Herdr keeps real terminal panes alive like a multiplexer, but treats agents
- as first-class runtime objects. You can scan state, jump to blocked work,
- attach directly to one agent, and let agents read, send, split, and wait
- through the CLI/socket API.
- </p>
- <div class="intersection-pills" aria-label="Herdr strengths">
- <span>existing terminal</span>
- <span>persistent PTYs</span>
- <span>SSH attach</span>
- <span>direct agent attach</span>
- <span>agent state</span>
- <span>agent API</span>
- </div>
- </article>
- <div class="differ-list">
- <article>
- <span>tmux / Zellij</span>
- <h3>Classic multiplexers stop at terminals.</h3>
- <p>They own panes and persistence. They do not know which pane is blocked, working, done, or ready for an agent wait.</p>
- </article>
- <article>
- <span>cmux / Warp</span>
- <h3>Terminal apps replace the terminal.</h3>
- <p>They can add polished desktop UX, but the workflow moves into their app. Herdr stays inside the terminal you already use.</p>
- </article>
- <article>
- <span>Solo</span>
- <h3>Dashboards supervise processes.</h3>
- <p>Process health and auto-restart are useful, but Herdr is about persistent interactive agent panes, not dev-stack supervision.</p>
- </article>
- <article>
- <span>Conductor / Emdash / Superset</span>
- <h3>Worktree tools own review flow.</h3>
- <p>They are for branch isolation, diffs, and PRs. Herdr is the live terminal layer those agents can run inside or alongside.</p>
- </article>
- </div>
- </div>
- </section>
-
- <section class="section compare-one-liners-section">
- <div class="section-heading">
- <p class="section-kicker">One-line comparisons</p>
- <h2>Use this when deciding.</h2>
- </div>
- <div class="one-liner-list">
- <article><strong>Herdr vs tmux</strong><span>tmux persists terminals; Herdr persists agent workspaces and understands agent state.</span></article>
- <article><strong>Herdr vs Zellij</strong><span>Zellij is a modern terminal workspace; Herdr is an agent multiplexer with state, waits, and orchestration.</span></article>
- <article><strong>Herdr vs cmux</strong><span>cmux is a Mac terminal app for agents; Herdr is a terminal-native multiplexer that runs anywhere your terminal and SSH do.</span></article>
- <article><strong>Herdr vs Warp</strong><span>Warp is an agentic development platform; Herdr is the local terminal control layer for your existing agents.</span></article>
- <article><strong>Herdr vs OpenCode web</strong><span>OpenCode's web mode serves one agent over HTTP; Herdr is a terminal-native multiplexer for many agents and harnesses, reachable over plain SSH.</span></article>
- <article><strong>Herdr vs Solo</strong><span>Solo manages your dev stack; Herdr manages persistent interactive agent panes.</span></article>
- <article><strong>Herdr vs Conductor, Emdash, Superset</strong><span>They orchestrate isolated worktrees and review diffs; Herdr orchestrates live terminals and agent state.</span></article>
- </div>
- </section>
-
- <section class="final-cta compare-final-cta">
- <p class="section-kicker">Start with the multiplexer</p>
- <h2>If your agents live in terminals, put the terminals in Herdr.</h2>
- <p>
- Install Herdr, run two agents, split a pane, then detach once. The difference is obvious when the agents keep running.
- </p>
- <div class="hero-actions center">
- <a class="button button-primary" href="/docs/install/">Install Herdr</a>
- <a class="button button-secondary" href="/docs/quick-start/">Quick start</a>
- </div>
- </section>
- </main>
-
- <footer class="footer">
- <a class="brand" href="/" aria-label="Herdr home">
- <span class="brand-logo" aria-hidden="true"></span>
- <span>herdr</span>
- </a>
- <div>
- <a href="/compare/">Compare</a>
- <a href="/docs/">Docs</a>
- <a href="/docs/configuration/">Configuration</a>
- <a href="/docs/socket-api/">API</a>
- <a href="https://github.com/herdrdev/herdr/releases">Releases</a>
- <a href="mailto:hey@herdr.dev">hey@herdr.dev</a>
- </div>
- <nav class="footer-social" aria-label="Social links">
- <a href="https://github.com/herdrdev/herdr" aria-label="Herdr on GitHub">
- <svg viewBox="0 0 16 16" aria-hidden="true">
- <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82A7.64 7.64 0 0 1 8 3.87c.68 0 1.36.09 2 .26 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z" />
- </svg>
- </a>
- <a href="https://x.com/herdrdev" aria-label="Herdr on X">
- <svg viewBox="0 0 24 24" aria-hidden="true">
- <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231Zm-1.161 17.52h1.833L7.084 4.126H5.117Z" />
- </svg>
- </a>
- </nav>
- </footer>
-
- <div class="theme-hint" id="theme-hint" title="Press / or t to switch theme">
- <span class="theme-hint-dot"></span>
- <span class="theme-hint-label" id="theme-hint-label">light</span>
- <span class="theme-hint-key">[/]</span>
+ <div class="caps">
+ <div class="cap cap-flat">
+ <div class="n"><span>01</span></div>
+ <div class="cap-in">
+ <h3>Herdr is the runtime.</h3>
+ <p>
+ A server owns the terminals; every UI is a client of it. The TUI in
+ the screenshots attaches, detaches and even crashes without the
+ agents noticing. Same for the CLI, plain SSH, and whatever
+ attaches next. The TUI is the first client, not the last.
+ </p>
</div>
-
- <div class="theme-overlay" id="theme-overlay" hidden>
- <div class="theme-overlay-panel" role="dialog" aria-label="Theme switcher" aria-modal="true">
- <div class="theme-overlay-title">settings</div>
- <div class="theme-overlay-tabs"><span class="active">theme</span></div>
- <div class="theme-overlay-list" id="theme-overlay-list" role="listbox" aria-label="Themes">
- <div class="theme-sep"><span>dark</span></div>
- <button type="button" role="option" data-value="catppuccin">catppuccin</button>
- <button type="button" role="option" data-value="terminal">terminal</button>
- <button type="button" role="option" data-value="tokyo-night">tokyo night</button>
- <button type="button" role="option" data-value="dracula">dracula</button>
- <button type="button" role="option" data-value="nord">nord</button>
- <button type="button" role="option" data-value="gruvbox">gruvbox</button>
- <button type="button" role="option" data-value="one-dark">one dark</button>
- <button type="button" role="option" data-value="solarized">solarized</button>
- <button type="button" role="option" data-value="kanagawa">kanagawa</button>
- <button type="button" role="option" data-value="rose-pine">rose pine</button>
- <button type="button" role="option" data-value="vesper">vesper</button>
- <div class="theme-sep"><span>light</span></div>
- <button type="button" role="option" data-value="catppuccin-latte">catppuccin latte</button>
- <button type="button" role="option" data-value="tokyo-night-day">tokyo day</button>
- <button type="button" role="option" data-value="gruvbox-light">gruvbox light</button>
- <button type="button" role="option" data-value="one-light">one light</button>
- <button type="button" role="option" data-value="solarized-light">solarized light</button>
- <button type="button" role="option" data-value="kanagawa-lotus">kanagawa lotus</button>
- <button type="button" role="option" data-value="rose-pine-dawn">rose pine dawn</button>
- </div>
- <div class="theme-overlay-footer">
- <span class="theme-overlay-hints"><span class="key">↑↓</span> select</span>
- <span class="theme-overlay-actions"><span class="theme-apply-btn">↵ apply</span><button class="theme-close-btn" type="button" id="theme-close-btn">esc close</button></span>
- </div>
- </div>
+ <div class="ev" aria-hidden="true">
+ <div class="ev-row"><span>herdr-server</span><b><i class="beat"></i>up</b></div>
+ <div class="ev-note">4 agents · 0 clients attached · still working</div>
</div>
+ </div>
+ <div class="cap cap-flat">
+ <div class="n"><span>02</span></div>
+ <div class="cap-in">
+ <h3>Multiplexers persist terminals, not agents.</h3>
+ <p>
+ tmux gave humans persistence, and Herdr keeps that whole
+ inheritance: real PTYs, detach, SSH. What it adds is the part
+ multiplexers never had: knowing which pane is an agent, whether
+ it's blocked, and how to wait on it instead of polling it.
+ </p>
+ </div>
+ <div class="ev" aria-hidden="true">
+ <div class="ev-row"><span>tmux ls</span><b>3 sessions</b></div>
+ <div class="ev-note">which one is waiting on you? no idea</div>
+ </div>
+ </div>
+ <div class="cap cap-flat">
+ <div class="n"><span>03</span></div>
+ <div class="cap-in">
+ <h3>Terminal apps replace your terminal.</h3>
+ <p>
+ cmux and Warp can be genuinely polished, but the deal is that the
+ work moves into their window, with their renderer, on the machines
+ they support. Herdr changes nothing about your terminal. It runs
+ inside it, wherever a terminal and SSH already reach.
+ </p>
+ </div>
+ <div class="ev" aria-hidden="true">
+ <div class="ev-row"><span>ghostty · kitty · iterm · alacritty</span><b>kept</b></div>
+ <div class="ev-note">herdr runs in the one you already chose</div>
+ </div>
+ </div>
+ <div class="cap cap-flat">
+ <div class="n"><span>04</span></div>
+ <div class="cap-in">
+ <h3>Manager apps are clients without a runtime.</h3>
+ <p>
+ Conductor, Emdash and Superset manage a herd from a window:
+ worktrees, diffs, review queues. Useful, and Herdr pairs fine with
+ that flow. But a window that manages agents is not a place agents
+ live: quit the app and the herd goes with it.
+ </p>
+ </div>
+ <div class="ev" aria-hidden="true">
+ <div class="ev-row"><span>their app quits</span><b>agents stop</b></div>
+ <div class="ev-row"><span>every herdr client quits</span><b>agents keep going</b></div>
+ </div>
+ </div>
+ <div class="cap cap-flat">
+ <div class="n"><span>05</span></div>
+ <div class="cap-in">
+ <h3>Dashboards watch processes.</h3>
+ <p>
+ Solo supervises a dev stack: health, restarts, logs. Herdr's job
+ is different: interactive agent terminals that stay open, hold
+ scrollback and state, and stay yours whether or not anything is
+ watching them.
+ </p>
+ </div>
+ <div class="ev" aria-hidden="true">
+ <div class="ev-row"><span>process status</span><b>up / down</b></div>
+ <div class="ev-row"><span>agent state</span><b>blocked · working · idle</b></div>
+ </div>
+ </div>
+ </div>
- <script>
- (function () {
- var overlay = document.getElementById("theme-overlay");
- var list = document.getElementById("theme-overlay-list");
- var hintLabel = document.getElementById("theme-hint-label");
- if (!overlay || !list) return;
- var options = Array.prototype.slice.call(list.querySelectorAll("[role='option']"));
- var media = window.matchMedia("(prefers-color-scheme: dark)");
- var saved = localStorage.getItem("herdr-palette") || "";
- var committed = saved || defaultPalette();
-
- function defaultPalette() {
- return media.matches ? "tokyo-night" : "tokyo-night-day";
- }
-
- function setPalette(value) {
- document.documentElement.setAttribute("data-palette", value || defaultPalette());
- }
-
- function updateUI(value) {
- var activeValue = value || defaultPalette();
- options.forEach(function (opt) {
- opt.setAttribute("aria-selected", String(opt.dataset.value === activeValue));
- });
- var active = options.find(function (opt) { return opt.dataset.value === activeValue; });
- if (hintLabel && active) hintLabel.textContent = active.textContent.trim();
- }
-
- function openOverlay() {
- overlay.hidden = false;
- document.body.style.overflow = "hidden";
- committed = localStorage.getItem("herdr-palette") || defaultPalette();
- updateUI(committed);
- var active = list.querySelector("[aria-selected='true']") || options[0];
- if (active) active.focus();
- }
-
- function closeOverlay() {
- overlay.hidden = true;
- document.body.style.overflow = "";
- }
-
- function toggleOverlay() {
- if (overlay.hidden) openOverlay();
- else closeOverlay();
- }
-
- function preview(index) {
- if (index < 0 || index >= options.length) return;
- setPalette(options[index].dataset.value);
- updateUI(options[index].dataset.value);
- options[index].focus();
- }
-
- function commit(value) {
- setPalette(value);
- localStorage.setItem("herdr-palette", value);
- updateUI(value);
- closeOverlay();
- }
-
- function revert() {
- setPalette(committed);
- updateUI(committed);
- closeOverlay();
- }
-
- media.addEventListener("change", function () {
- if (!localStorage.getItem("herdr-palette")) {
- setPalette("");
- updateUI("");
- }
- });
-
- options.forEach(function (opt, idx) {
- opt.addEventListener("click", function () { commit(opt.dataset.value); });
- opt.addEventListener("mouseenter", function () { preview(idx); });
- });
-
- document.addEventListener("keydown", function (e) {
- if ((e.key === "t" || e.key === "/") && !e.ctrlKey && !e.metaKey && !e.altKey) {
- var tag = document.activeElement && document.activeElement.tagName;
- if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return;
- e.preventDefault();
- toggleOverlay();
- return;
- }
- if (overlay.hidden) return;
- var idx = options.indexOf(document.activeElement);
- if (e.key === "ArrowDown") {
- e.preventDefault();
- preview(idx >= 0 ? Math.min(options.length - 1, idx + 1) : 0);
- } else if (e.key === "ArrowUp") {
- e.preventDefault();
- preview(idx >= 0 ? Math.max(0, idx - 1) : options.length - 1);
- } else if (e.key === "Enter" && idx >= 0) {
- e.preventDefault();
- commit(options[idx].dataset.value);
- } else if (e.key === "Escape") {
- e.preventDefault();
- revert();
- }
- });
+ <section class="vs">
+ <div class="fighd">
+ <span>one-liners, for deciding fast</span>
+ </div>
+ <div class="vs-list">
+ <article>
+ <b>herdr vs tmux</b>
+ <p>tmux keeps terminals alive; so does Herdr. The difference is Herdr knows which terminals are agents, what state each one is in, and how to wait on them. tmux sees panes.</p>
+ </article>
+ <article>
+ <b>herdr vs zellij</b>
+ <p>Zellij is a friendlier workspace for humans in terminals. Herdr is a runtime for agents in terminals: state, waits, direct attach, and an API.</p>
+ </article>
+ <article>
+ <b>herdr vs cmux</b>
+ <p>cmux is a Mac terminal app built around agents. Herdr isn't an app: it's the runtime underneath, in whatever terminal you already use, reachable over SSH.</p>
+ </article>
+ <article>
+ <b>herdr vs warp</b>
+ <p>Warp wants to be your terminal and your platform. Herdr keeps your terminal and owns what runs inside it.</p>
+ </article>
+ <article>
+ <b>herdr vs opencode web</b>
+ <p>opencode's web mode serves one agent over HTTP. Herdr runs the whole herd: any agent CLI, many at once, from any tty.</p>
+ </article>
+ <article>
+ <b>herdr vs solo</b>
+ <p>Solo is a dashboard that supervises your dev processes. Herdr holds interactive agent terminals open whether or not anything is watching them.</p>
+ </article>
+ <article>
+ <b>herdr vs conductor, emdash, superset</b>
+ <p>Manager apps put worktrees, diffs and review queues in a window. Herdr is the layer under that kind of window: quit their app and the agents stop; detach every Herdr client and they don't.</p>
+ </article>
+ </div>
+ </section>
- var themeHint = document.getElementById("theme-hint");
- if (localStorage.getItem("herdr-theme-hint-seen") === "1") {
- themeHint.classList.add("is-seen");
- }
- themeHint.addEventListener("mouseenter", function () {
- localStorage.setItem("herdr-theme-hint-seen", "1");
- themeHint.classList.add("is-seen");
- }, { once: true });
- themeHint.addEventListener("click", toggleOverlay);
- document.getElementById("theme-close-btn").addEventListener("click", revert);
- setPalette(saved);
- updateUI(saved);
- })();
- </script>
- </body>
-</html>
+ <section class="end">
+ <span class="ram"></span>
+ <div class="in">
+ <h2>A runtime, not another window.</h2>
+ <p>
+ Install it and nothing about your setup changes: same terminal, same
+ agent CLIs. They just stop dying when a window does.
+ </p>
+ <div class="ph-actions">
+ <a class="btn-solid" href="/docs/install/">Install Herdr</a>
+ <a class="btn-ghost" href="/docs/quick-start/">Quick start</a>
+ </div>
+ </div>
+ </section>
+ </main>
+</SiteLayout>