aboutsummaryrefslogtreecommitdiff
path: root/website/index.html
diff options
context:
space:
mode:
authorOgulcan Celik <ogulcancelik@gmail.com>2026-05-18 01:39:39 +0300
committerOgulcan Celik <ogulcancelik@gmail.com>2026-05-18 05:06:41 +0300
commitf74602b8813c4937dad505c60ca2f44b3e9b21a1 (patch)
tree84d8e27a91a6c4198c59405e6a24848e21ed227b /website/index.html
parenta3d465687b4f5cd16ce5ecc554c163dd45f15a94 (diff)
docs: redesign website and add starlight docs
Diffstat (limited to 'website/index.html')
-rw-r--r--website/index.html1126
1 files changed, 413 insertions, 713 deletions
diff --git a/website/index.html b/website/index.html
index 509412c3..935a8528 100644
--- a/website/index.html
+++ b/website/index.html
@@ -3,20 +3,20 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
- <title>herdr — tmux for agents</title>
+ <title>Herdr — terminal multiplexer for AI agents</title>
<meta
name="description"
- content="Persistent terminal multiplexer for coding agents. Detach and reattach, agents keep running. Built-in awareness for blocked, done, and working states. Lives inside your terminal."
+ content="Terminal-native agent multiplexer for coding agents. Persistent sessions, SSH attach, real terminal panes, mouse-native control, and a CLI/socket API for orchestration."
/>
- <meta name="theme-color" content="#11111b" />
+ <meta name="theme-color" content="#f7f3ea" />
<link rel="canonical" href="https://herdr.dev/" />
<meta property="og:type" content="website" />
- <meta property="og:site_name" content="herdr" />
- <meta property="og:title" content="herdr — tmux for agents" />
+ <meta property="og:site_name" content="Herdr" />
+ <meta property="og:title" content="Herdr — terminal multiplexer for AI agents" />
<meta
property="og:description"
- content="Persistent terminal multiplexer for coding agents. Detach, reattach, agents keep running."
+ content="Persistent terminal workspaces for coding agents. Detach, reattach, SSH in, and keep every agent visible."
/>
<meta property="og:url" content="https://herdr.dev/" />
<meta
@@ -27,10 +27,10 @@
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
- <meta name="twitter:title" content="herdr — tmux for agents" />
+ <meta name="twitter:title" content="Herdr — terminal multiplexer for AI agents" />
<meta
name="twitter:description"
- content="Persistent terminal multiplexer for coding agents. Detach, reattach, agents keep running."
+ content="Persistent terminal workspaces for coding agents. Detach, reattach, SSH in, and keep every agent visible."
/>
<meta
name="twitter:image"
@@ -46,762 +46,462 @@
type="font/woff2"
crossorigin
/>
- <link rel="stylesheet" href="/css/style.css?v=1bbda665" />
+ <link rel="stylesheet" href="/css/style.css?v=2c64f1d0" />
</head>
<body>
- <!-- ── Hero ── -->
- <section class="hero" id="hero">
- <div class="hero-pasture" aria-hidden="true"></div>
- <img src="/assets/logo.png" alt="herdr" class="hero-logo" />
- <span class="hero-name">herdr</span>
- <p class="hero-tagline">tmux for agents.</p>
- <div class="hero-dots">
- <span class="dot dot-blocked"></span>
- <span class="dot dot-working"></span>
- <span class="dot dot-done"></span>
- <span class="dot dot-idle"></span>
- </div>
- <div class="manifesto">
- <p>
- <strong
- >herdr is an agent multiplexer that lives in your
- terminal.</strong
- >
- </p>
- <p>
- workspaces, tabs, panes. every agent at a glance:
- <span class="text-blocked">blocked</span>,
- <span class="text-working">working</span>,
- <span class="text-done">done</span>. detach and reattach,
- agents keep running. attach locally, over ssh, or as a thin
- client to a remote server.
- </p>
- <p class="mouse-native-line">
- <span class="mouse-native-pill">mouse-native tui</span>:
- click
- <span>panes</span
- >/<span>tabs</span>/<span>workspaces</span>/<span>agents</span>,
- drag borders, select text, right-click menus.
- </p>
- <p>
- no gui app, no electron, no mac-only native wrapper. you see
- the agent's own terminal, not someone's interpretation of
- it.
- </p>
- </div>
- <div class="install-row">
- <div class="install-box">
- <span class="prompt">$</span>
- <code id="install-cmd"
- >curl -fsSL https://herdr.dev/install.sh | sh</code
- >
- </div>
- <button class="copy-btn" id="copy-btn">copy</button>
- </div>
- <div class="hero-meta">
- <a href="https://github.com/ogulcancelik/herdr">github</a> ·
- <a
- href="https://github.com/ogulcancelik/herdr/blob/master/CONFIGURATION.md"
- >docs</a
- >
- ·
- <a
- href="https://github.com/ogulcancelik/herdr/blob/master/SOCKET_API.md"
- >api</a
- >
- · linux · macos · agpl-3.0
- </div>
- </section>
-
- <div class="gap-lg"></div>
-
- <!-- ── Demo ── -->
- <div class="demo">
- <div class="demo-frame">
- <video
- autoplay
- muted
- loop
- playsinline
- preload="auto"
- poster="/assets/hero-screenshot.png"
- >
- <source src="/assets/demo-v2.mp4" type="video/mp4" />
- </video>
- </div>
- </div>
-
- <div class="gap-lg"></div>
- <hr class="section-rule" />
- <div class="gap"></div>
-
- <!-- ── Comparison ── -->
- <section class="section">
- <div class="section-heading">
- <span class="dot dot-idle"></span>
- <h2>how it compares</h2>
- </div>
- <div class="table-wrap">
- <table class="position-table">
- <thead>
- <tr>
- <th></th>
- <th>tmux</th>
- <th>gui managers</th>
- <th class="herdr-col">herdr</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>persistent sessions</td>
- <td><span class="mark-yes">✓</span></td>
- <td><span class="mark">—</span></td>
- <td class="herdr-col">
- <span class="mark-yes">✓</span>
- </td>
- </tr>
- <tr>
- <td>detach / reattach</td>
- <td><span class="mark-yes">✓</span></td>
- <td><span class="mark">—</span></td>
- <td class="herdr-col">
- <span class="mark-yes">✓</span>
- </td>
- </tr>
- <tr>
- <td>panes, tabs, workspaces</td>
- <td><span class="mark-yes">✓</span></td>
- <td><span class="mark-yes">✓</span></td>
- <td class="herdr-col">
- <span class="mark-yes">✓</span>
- </td>
- </tr>
- <tr>
- <td>agent awareness</td>
- <td><span class="mark">—</span></td>
- <td><span class="mark-yes">✓</span></td>
- <td class="herdr-col">
- <span class="mark-yes">✓</span>
- </td>
- </tr>
- <tr>
- <td>lives in your terminal</td>
- <td><span class="mark-yes">✓</span></td>
- <td><span class="mark">—</span></td>
- <td class="herdr-col">
- <span class="mark-yes">✓</span>
- </td>
- </tr>
- <tr>
- <td>real terminal views</td>
- <td><span class="mark-yes">✓</span></td>
- <td><span class="mark">—</span></td>
- <td class="herdr-col">
- <span class="mark-yes">✓</span>
- </td>
- </tr>
- <tr>
- <td>mouse-native</td>
- <td><span class="mark">—</span></td>
- <td><span class="mark-yes">✓</span></td>
- <td class="herdr-col">
- <span class="mark-yes">✓</span>
- </td>
- </tr>
- <tr>
- <td>lightweight binary</td>
- <td><span class="mark-yes">✓</span></td>
- <td><span class="mark">—</span></td>
- <td class="herdr-col">
- <span class="mark-yes">✓</span>
- </td>
- </tr>
- <tr>
- <td>agents can orchestrate</td>
- <td><span class="mark">?</span></td>
- <td><span class="mark">?</span></td>
- <td class="herdr-col">
- <span class="mark-yes">✓</span>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- </section>
-
- <div class="gap"></div>
- <hr class="section-rule" />
- <div class="gap"></div>
-
- <!-- ── Persistence ── -->
- <section class="section">
- <div class="section-heading">
- <span class="dot dot-done"></span>
- <h2>persistence</h2>
- </div>
- <div class="prose-block">
- <p>
- herdr runs as a background session server by default. run
- your agents, split panes, do your work, then press
- <strong>ctrl+b q</strong> to detach the client. close your
- terminal or laptop; the panes keep running. open herdr again
- and you reattach to the same session.
- </p>
- <p>
- named sessions give each project or context its own panes,
- tabs, workspaces, sockets, and runtime state while sharing
- the same global config.
- </p>
- </div>
- <div class="detach-flow" style="margin-top: 1.5rem">
- <div class="detach-line">
- <span class="prompt">$</span> <span class="cmd">herdr</span>
- <span class="key">--session</span>
- <span class="comment">work</span>
- </div>
- <div class="detach-line">
- <span class="prompt">$</span> <span class="cmd">herdr</span>
- <span class="key">session attach</span>
- <span class="comment">side-project</span>
+ <header class="site-header">
+ <nav class="nav" aria-label="Primary navigation">
+ <a class="brand" href="/" aria-label="Herdr home">
+ <img src="/assets/logo.png" alt="" />
+ <span>herdr</span>
+ </a>
+ <div class="nav-links">
+ <a href="/docs/">Docs</a>
+ <a href="/docs/quick-start/">Quick start</a>
+ <a href="/docs/socket-api/">API</a>
+ <a href="https://github.com/ogulcancelik/herdr">GitHub</a>
</div>
- <div class="detach-line">
- <span class="dim">
- separate sessions, same config, persistent agents.</span
- >
+ <a class="nav-cta" href="/docs/install/">Install</a>
+ </nav>
+ </header>
+
+ <main>
+ <section class="hero" id="hero">
+ <div class="hero-copy">
+ <p class="eyebrow">
+ <span class="status-dot dot-done"></span>
+ Open source · 1k+ GitHub stars
+ </p>
+ <h1>The terminal multiplexer for AI agents.</h1>
+ <p class="hero-lede">
+ Run Pi, Claude Code, Codex, OpenCode, and other agents
+ in real terminal panes. See what is
+ <span class="state blocked">blocked</span>,
+ <span class="state working">working</span>, and
+ <span class="state done">done</span>. Detach, SSH back
+ in, and keep every agent running.
+ </p>
+ <div class="hero-actions">
+ <a class="button button-primary" href="/docs/install/"
+ >Install Herdr</a
+ >
+ <a class="button button-secondary" href="/docs/"
+ >Read the docs</a
+ >
+ </div>
+ <div class="install-card" aria-label="Install command">
+ <span class="prompt">$</span>
+ <code id="install-cmd"
+ >curl -fsSL https://herdr.dev/install.sh | sh</code
+ >
+ <button id="copy-btn" type="button">Copy</button>
+ </div>
+ <p class="hero-note">
+ Linux and macOS · single Rust binary · no Electron ·
+ works inside tmux
+ </p>
</div>
- </div>
- </section>
-
- <div class="gap"></div>
- <hr class="section-rule" />
- <div class="gap"></div>
- <!-- ── Local or remote ── -->
- <section class="section">
- <div class="section-heading">
- <span class="dot dot-done"></span>
- <h2>local or remote</h2>
- </div>
- <div class="prose-block">
- <p>
- use herdr where the work lives. most days that is your
- laptop or desktop. if the code, keys, or agents live on a
- server, attach there instead.
- </p>
- </div>
- <div class="access-grid">
- <div class="access-card">
- <div class="access-kicker">local</div>
- <h3>run herdr where you work</h3>
- <p>
- start a local session on your own machine. detach,
- reattach, split panes, create tabs, and keep agents
- running while your terminal comes and goes.
- </p>
- <div class="mini-flow">
- <div>
- <span class="prompt">$</span>
- <span class="cmd">herdr</span>
+ <aside class="hero-panel" aria-label="Herdr agent overview">
+ <div class="panel-chrome">
+ <span></span>
+ <span></span>
+ <span></span>
+ </div>
+ <div class="panel-title">
+ <span>herdr</span>
+ <span>agent state</span>
+ </div>
+ <div class="workspace-list">
+ <div class="workspace active">
+ <span class="number">1</span>
+ <span class="label">api</span>
+ <span class="status-pill pill-blocked">blocked</span>
+ </div>
+ <div class="workspace">
+ <span class="number">2</span>
+ <span class="label">docs-site</span>
+ <span class="status-pill pill-working">working</span>
+ </div>
+ <div class="workspace">
+ <span class="number">3</span>
+ <span class="label">release</span>
+ <span class="status-pill pill-done">done</span>
</div>
</div>
- </div>
- <div class="access-card">
- <div class="access-kicker">ssh</div>
- <h3>ssh in, run herdr</h3>
- <p>
- use it like tmux on a remote box. herdr starts the
- session there, and your panes keep running after you
- detach.
- </p>
- <div class="mini-flow">
+ <div class="agent-list">
+ <p>agents</p>
<div>
- <span class="prompt">$</span>
- <span class="cmd">ssh</span>
- <span class="comment">you@server</span>
+ <span class="status-dot dot-blocked"></span>
+ claude-code needs approval
</div>
<div>
- <span class="prompt">$</span>
- <span class="cmd">herdr</span>
+ <span class="status-dot dot-working"></span>
+ codex running tests
</div>
+ <div>
+ <span class="status-dot dot-done"></span>
+ pi finished review
+ </div>
+ </div>
+ <div class="terminal-line">
+ <span class="prompt">$</span>
+ <span>herdr wait agent-status 1-2 --status done</span>
</div>
+ </aside>
+ </section>
+
+ <section class="demo-section" aria-label="Herdr demo">
+ <div class="demo-frame">
+ <video
+ autoplay
+ muted
+ loop
+ playsinline
+ preload="auto"
+ poster="/assets/hero-screenshot.png"
+ >
+ <source src="/assets/demo-v2.mp4" type="video/mp4" />
+ </video>
</div>
- <div class="access-card">
- <div class="access-kicker">thin client</div>
- <h3>herdr --remote host</h3>
+ </section>
+
+ <section class="section intro-section">
+ <p class="section-kicker">Why Herdr exists</p>
+ <div class="section-heading-wide">
+ <h2>
+ Coding agents moved into the terminal. The terminal
+ needs an agent-aware control plane.
+ </h2>
<p>
- run herdr on your laptop and target any ssh config host.
- herdr connects over ssh, bootstraps the remote server,
- and streams the tui back to your local terminal.
+ Herdr is not a GUI wrapper around agents. It keeps the
+ agent's own terminal alive, adds workspace structure,
+ and exposes the same control surface to humans, scripts,
+ and agents.
</p>
- <div class="mini-flow">
- <div>
- <span class="prompt">$</span>
- <span class="cmd">herdr</span>
- <span class="key">--remote</span>
- <span class="comment">workbox</span>
- </div>
- </div>
</div>
- </div>
- <div class="mobile-proof">
- <figure class="phone-shot">
- <div class="phone-shot-frame">
+ </section>
+
+ <section class="section pillars" aria-labelledby="pillars-title">
+ <div class="section-heading">
+ <p class="section-kicker">Core pillars</p>
+ <h2 id="pillars-title">The parts other tools rarely combine.</h2>
+ </div>
+ <div class="pillar-grid">
+ <article class="pillar-card">
+ <span class="card-index">01</span>
+ <h3>Detach and reattach</h3>
+ <p>
+ Herdr runs panes in a background session server. Quit
+ the client, close the terminal, and come back to the
+ same agents later.
+ </p>
+ </article>
+ <article class="pillar-card">
+ <span class="card-index">02</span>
+ <h3>Attach over SSH</h3>
+ <p>
+ Run Herdr where the code and credentials live. SSH
+ into the server and attach, or use Herdr as a thin
+ client to a remote host.
+ </p>
+ </article>
+ <article class="pillar-card">
+ <span class="card-index">03</span>
+ <h3>Real terminal panes</h3>
+ <p>
+ Every pane is a real terminal. Click panes, tabs,
+ workspaces, and agents; drag borders; select text;
+ use right-click menus.
+ </p>
+ </article>
+ <article class="pillar-card">
+ <span class="card-index">04</span>
+ <h3>State and API orchestration</h3>
+ <p>
+ The sidebar shows agent state. The CLI and socket API
+ let agents create panes, run commands, read output,
+ and wait for changes.
+ </p>
+ </article>
+ </div>
+ </section>
+
+ <section class="section feature-split">
+ <div class="feature-copy">
+ <p class="section-kicker">Terminal-native</p>
+ <h2>See the agent's terminal, not a reconstructed chat view.</h2>
+ <p>
+ GUI agent managers can summarize what an agent is doing.
+ Herdr shows the actual process in the actual terminal and
+ adds the missing layer: persistence, layout, mouse
+ controls, state awareness, and automation hooks.
+ </p>
+ <ul class="check-list">
+ <li>No web dashboard or Electron shell.</li>
+ <li>No vendor-specific wrapped terminal view.</li>
+ <li>No new account or hosted control plane.</li>
+ </ul>
+ </div>
+ <figure class="screenshot-card">
+ <img
+ src="/assets/hero-screenshot.png"
+ alt="Herdr running multiple coding agents in terminal panes"
+ loading="lazy"
+ />
+ </figure>
+ </section>
+
+ <section class="section access-section">
+ <div class="section-heading">
+ <p class="section-kicker">Local or remote</p>
+ <h2>Run Herdr where the work lives.</h2>
+ </div>
+ <div class="access-grid">
+ <article class="access-card">
+ <span class="access-label">local</span>
+ <h3>Your machine</h3>
+ <p>
+ Start a local session, split panes, create tabs, and
+ keep agents running while your terminal comes and
+ goes.
+ </p>
+ <pre><code>$ herdr</code></pre>
+ </article>
+ <article class="access-card">
+ <span class="access-label">ssh</span>
+ <h3>Any SSH client</h3>
+ <p>
+ Use Herdr like tmux on a remote box. The session
+ stays on the server after you detach.
+ </p>
+ <pre><code>$ ssh you@server
+$ herdr</code></pre>
+ </article>
+ <article class="access-card">
+ <span class="access-label">thin client</span>
+ <h3>Remote attach</h3>
+ <p>
+ Point your local Herdr client at an SSH config host
+ and stream the remote TUI back to your terminal.
+ </p>
+ <pre><code>$ herdr --remote workbox</code></pre>
+ </article>
+ </div>
+ <div class="mobile-proof">
+ <figure>
<img
src="/assets/mobile-terminal.jpeg"
- alt="herdr responsive terminal view over ssh on a phone"
+ alt="Herdr terminal view over SSH on a phone"
loading="lazy"
/>
- </div>
- <figcaption>terminal view over ssh</figcaption>
- </figure>
- <figure class="phone-shot">
- <div class="phone-shot-frame">
+ <figcaption>terminal view over SSH</figcaption>
+ </figure>
+ <figure>
<img
src="/assets/mobile-switcher.jpeg"
- alt="herdr mobile switcher showing spaces tabs and agents on a phone"
+ alt="Herdr responsive switcher on a phone"
loading="lazy"
/>
+ <figcaption>responsive switcher</figcaption>
+ </figure>
+ </div>
+ </section>
+
+ <section class="section api-section">
+ <div class="api-copy">
+ <p class="section-kicker">For agents and scripts</p>
+ <h2>The UI is also an API.</h2>
+ <p>
+ Herdr exposes workspace, tab, pane, output, and wait
+ operations through a CLI and newline-delimited JSON
+ socket API. Agents can orchestrate their own workspace
+ instead of asking you to shuffle terminals by hand.
+ </p>
+ <div class="inline-links">
+ <a href="/docs/cli-reference/">CLI reference →</a>
+ <a href="/docs/socket-api/">Socket API →</a>
+ <a href="/docs/agent-skill/">Agent skill →</a>
</div>
- <figcaption>responsive switcher</figcaption>
- </figure>
- </div>
- <p class="mobile-shout">
- screenshots taken with
- <a href="https://getmoshi.app/" target="_blank" rel="noopener">moshi</a>
- ❤️ on iphone
- </p>
- </section>
+ </div>
+ <div class="code-card" aria-label="Herdr CLI orchestration example">
+ <pre><code><span class="comment"># create workspace structure</span>
+<span class="cmd">herdr</span> workspace create <span class="flag">--cwd</span> <span class="str">~/project</span> <span class="flag">--label</span> <span class="str">api</span>
+<span class="cmd">herdr</span> tab create <span class="flag">--label</span> <span class="str">logs</span>
- <div class="gap"></div>
- <hr class="section-rule" />
- <div class="gap"></div>
+<span class="comment"># split a pane and run work</span>
+<span class="cmd">herdr</span> pane split <span class="str">1-1</span> <span class="flag">--direction</span> <span class="str">right</span>
+<span class="cmd">herdr</span> pane run <span class="str">1-2</span> <span class="str">"just test"</span>
- <!-- ── Awareness ── -->
- <section class="section">
- <div class="section-heading">
- <span class="dot dot-working"></span>
- <h2>agent awareness</h2>
- </div>
- <div class="awareness-split">
- <div class="awareness-panel">
- <div class="awareness-panel-img">
+<span class="comment"># wait, inspect, and continue</span>
+<span class="cmd">herdr</span> wait agent-status <span class="str">1-1</span> <span class="flag">--status</span> <span class="str">done</span>
+<span class="cmd">herdr</span> pane read <span class="str">1-2</span> <span class="flag">--source</span> <span class="str">recent-unwrapped</span></code></pre>
+ </div>
+ </section>
+
+ <section class="section awareness-section">
+ <div class="section-heading">
+ <p class="section-kicker">Agent awareness</p>
+ <h2>Stop checking panes one by one.</h2>
+ </div>
+ <div class="awareness-grid">
+ <article class="awareness-card">
<img
src="/assets/sidebar-workspaces.png"
- alt="workspaces"
+ alt="Herdr workspace sidebar state"
+ loading="lazy"
/>
- </div>
- <div class="awareness-panel-text">
- <h3>workspaces</h3>
+ <h3>Workspace rollups</h3>
<p>
- each workspace rolls up to its most urgent state.
- scan the full list in a glance.
+ Each workspace rolls up to its most urgent agent
+ state, so the whole session is scannable.
</p>
- </div>
- </div>
- <div class="awareness-panel">
- <div class="awareness-panel-img">
- <img src="/assets/sidebar-agents.png" alt="agents" />
- </div>
- <div class="awareness-panel-text">
- <h3>agents</h3>
+ </article>
+ <article class="awareness-card">
+ <img
+ src="/assets/sidebar-agents.png"
+ alt="Herdr agent sidebar state"
+ loading="lazy"
+ />
+ <h3>Agent list</h3>
<p>
- see which agents are running, blocked, or finished.
- no checking panes one by one.
+ See which agents are blocked, working, done, idle, or
+ unknown without opening every pane.
</p>
- </div>
+ </article>
</div>
- </div>
- <div class="state-bar">
- <div class="state-bar-item">
- <span class="dot dot-blocked"></span> blocked
- </div>
- <div class="state-bar-item">
- <span class="dot dot-working"></span> working
+ <div class="state-legend">
+ <span><i class="status-dot dot-blocked"></i>blocked</span>
+ <span><i class="status-dot dot-working"></i>working</span>
+ <span><i class="status-dot dot-done"></i>done</span>
+ <span><i class="status-dot dot-idle"></i>idle</span>
</div>
- <div class="state-bar-item">
- <span class="dot dot-done"></span> done
+ </section>
+
+ <section class="section compare-section">
+ <div class="section-heading">
+ <p class="section-kicker">Positioning</p>
+ <h2>What Herdr combines.</h2>
</div>
- <div class="state-bar-item">
- <span class="dot dot-idle"></span> idle
+ <div class="table-wrap">
+ <table>
+ <thead>
+ <tr>
+ <th>Capability</th>
+ <th>tmux</th>
+ <th>GUI agent managers</th>
+ <th>Herdr</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Persistent sessions</td>
+ <td>✓</td>
+ <td>—</td>
+ <td>✓</td>
+ </tr>
+ <tr>
+ <td>Remote SSH attach</td>
+ <td>✓</td>
+ <td>limited</td>
+ <td>✓</td>
+ </tr>
+ <tr>
+ <td>Real terminal panes</td>
+ <td>✓</td>
+ <td>—</td>
+ <td>✓</td>
+ </tr>
+ <tr>
+ <td>Mouse-native TUI</td>
+ <td>—</td>
+ <td>✓</td>
+ <td>✓</td>
+ </tr>
+ <tr>
+ <td>Agent state awareness</td>
+ <td>—</td>
+ <td>✓</td>
+ <td>✓</td>
+ </tr>
+ <tr>
+ <td>Agents can orchestrate it</td>
+ <td>—</td>
+ <td>limited</td>
+ <td>✓</td>
+ </tr>
+ </tbody>
+ </table>
</div>
- </div>
- </section>
-
- <div class="gap"></div>
- <hr class="section-rule" />
- <div class="gap"></div>
+ </section>
- <!-- ── Terminal ── -->
- <section class="section">
- <div class="section-heading">
- <span class="dot dot-idle"></span>
- <h2>lives in your terminal</h2>
- </div>
- <div class="terminal-block">
- <p>
- not a gui window. not a web dashboard. not electron.
- <strong
- >herdr runs inside whatever terminal you already
- use.</strong
- >
- a single rust binary, no dependencies, nothing to configure.
- it even works inside tmux.
- </p>
- <div class="term-pills">
- <span class="term-pill">ghostty</span>
- <span class="term-pill">alacritty</span>
- <span class="term-pill">kitty</span>
- <span class="term-pill">wezterm</span>
- <span class="term-pill">iterm2</span>
- <span class="term-pill">tmux</span>
+ <section class="section integrations-section">
+ <div class="section-heading">
+ <p class="section-kicker">Integrations</p>
+ <h2>Works with the agents you already run.</h2>
</div>
- </div>
- </section>
-
- <div class="gap"></div>
- <hr class="section-rule" />
- <div class="gap"></div>
-
- <!-- ── Agents ── -->
- <section class="section">
- <div class="section-heading">
- <span class="dot dot-blocked"></span>
- <h2>supported agents</h2>
- </div>
- <div class="table-wrap">
- <table class="agents-table">
- <thead>
- <tr>
- <th>agent</th>
- <th>idle / done</th>
- <th>working</th>
- <th>blocked</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td><a href="https://pi.dev">pi</a></td>
- <td><span class="check">✓</span></td>
- <td><span class="check">✓</span></td>
- <td><span class="partial">partial</span></td>
- </tr>
- <tr>
- <td>
- <a
- href="https://docs.anthropic.com/en/docs/claude-code"
- >claude code</a
- >
- </td>
- <td><span class="check">✓</span></td>
- <td><span class="check">✓</span></td>
- <td><span class="check">✓</span></td>
- </tr>
- <tr>
- <td>
- <a href="https://github.com/openai/codex"
- >codex</a
- >
- </td>
- <td><span class="check">✓</span></td>
- <td><span class="check">✓</span></td>
- <td><span class="check">✓</span></td>
- </tr>
- <tr>
- <td><a href="https://factory.ai">droid</a></td>
- <td><span class="check">✓</span></td>
- <td><span class="check">✓</span></td>
- <td><span class="check">✓</span></td>
- </tr>
- <tr>
- <td><a href="https://ampcode.com">amp</a></td>
- <td><span class="check">✓</span></td>
- <td><span class="check">✓</span></td>
- <td><span class="check">✓</span></td>
- </tr>
- <tr>
- <td>
- <a href="https://github.com/anomalyco/opencode"
- >opencode</a
- >
- </td>
- <td><span class="check">✓</span></td>
- <td><span class="check">✓</span></td>
- <td><span class="check">✓</span></td>
- </tr>
- <tr>
- <td>
- <a href="https://x.ai/grok"
- >grok cli</a
- >
- </td>
- <td><span class="check">✓</span></td>
- <td><span class="check">✓</span></td>
- <td><span class="check">✓</span></td>
- </tr>
- <tr>
- <td>
- <a
- href="https://github.com/google-gemini/gemini-cli"
- >gemini cli</a
- >
- </td>
- <td colspan="3">
- <span class="untested"
- >detected, not fully tested</span
- >
- </td>
- </tr>
- <tr>
- <td>
- <a href="https://cursor.com/cli"
- >cursor agent</a
- >
- </td>
- <td colspan="3">
- <span class="untested"
- >detected, not fully tested</span
- >
- </td>
- </tr>
- <tr>
- <td>
- <a href="https://github.com/cline/cline"
- >cline</a
- >
- </td>
- <td colspan="3">
- <span class="untested"
- >detected, not fully tested</span
- >
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- </section>
-
- <div class="gap"></div>
- <hr class="section-rule" />
- <div class="gap"></div>
-
- <!-- ── API ── -->
- <section class="section">
- <div class="section-heading">
- <span class="dot dot-done"></span>
- <h2>socket api</h2>
- </div>
- <div class="api-grid">
- <div class="api-text">
- <p>
- <strong>agents can use herdr too.</strong> the local
- unix socket lets agents create workspaces, split panes,
- spawn other agents, read output, and wait for state
- changes.
- </p>
- <p>
- available as CLI commands or as a reusable agent skill.
- </p>
- <div class="api-links">
- <a
- href="https://github.com/ogulcancelik/herdr/blob/master/SOCKET_API.md"
- >socket api →</a
- >
- <a
- href="https://github.com/ogulcancelik/herdr/blob/master/SKILL.md"
- >agent skill →</a
- >
- </div>
+ <div class="integration-grid">
+ <a href="/docs/integrations/#pi">Pi</a>
+ <a href="/docs/integrations/#claude-code">Claude Code</a>
+ <a href="/docs/integrations/#codex">Codex</a>
+ <a href="/docs/integrations/#opencode">OpenCode</a>
+ <span>Droid</span>
+ <span>Amp</span>
+ <span>Grok CLI</span>
+ <span>Gemini CLI</span>
</div>
- <div class="code-block">
- <pre><span class="comment"># create a workspace and tab</span>
-<span class="cmd">herdr</span> workspace create <span class="flag">--cwd</span> <span class="str">~/project</span> <span class="flag">--label</span> <span class="str">"api"</span>
-<span class="cmd">herdr</span> tab create <span class="flag">--label</span> <span class="str">"logs"</span>
-
-<span class="comment"># split a pane and run</span>
-<span class="cmd">herdr</span> pane split <span class="str">1-1</span> <span class="flag">--direction</span> <span class="str">right</span>
-<span class="cmd">herdr</span> pane run <span class="str">1-2</span> <span class="str">"npm test"</span>
+ </section>
-<span class="comment"># wait for an agent</span>
-<span class="cmd">herdr</span> wait agent-status <span class="str">1-1</span> <span class="flag">--status</span> <span class="str">done</span>
-
-<span class="comment"># read output</span>
-<span class="cmd">herdr</span> pane read <span class="str">1-2</span> <span class="flag">--source</span> <span class="str">recent</span> <span class="flag">--lines</span> <span class="str">50</span></pre>
+ <section class="final-cta">
+ <p class="section-kicker">Start small</p>
+ <h2>Install Herdr, run two agents, detach once.</h2>
+ <p>
+ The value shows up the first time work keeps running after
+ your terminal disappears.
+ </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>
- </div>
- </section>
-
- <div class="gap-lg"></div>
+ </section>
+ </main>
- <!-- ── Footer ── -->
<footer class="footer">
- <p>
- <a href="https://github.com/ogulcancelik/herdr">github</a> ·
- <a
- href="https://github.com/ogulcancelik/herdr/blob/master/CONFIGURATION.md"
- >configuration</a
- >
- ·
- <a
- href="https://github.com/ogulcancelik/herdr/blob/master/SOCKET_API.md"
- >api</a
- >
- ·
+ <a class="brand" href="/" aria-label="Herdr home">
+ <img src="/assets/logo.png" alt="" />
+ <span>herdr</span>
+ </a>
+ <div>
+ <a href="/docs/">Docs</a>
+ <a href="/docs/configuration/">Configuration</a>
+ <a href="/docs/socket-api/">API</a>
<a href="https://github.com/ogulcancelik/herdr/releases"
- >releases</a
+ >Releases</a
>
- </p>
+ </div>
</footer>
<script>
(function () {
- "use strict";
-
- var hero = document.getElementById("hero");
- var pasture = hero.querySelector(".hero-pasture");
-
- var SR = [
- [" ,ww", " wWWWWWWW_)", " `WWWWWW'", " II II"],
- [" ,ww", " wWWWWWWW_)", " `WWWWWW'", " II II"],
- ];
- var SL = [
- [" ww,", "(_WWWWWWWw", " 'WWWWWW`", " II II"],
- [" ww,", "(_WWWWWWWw", " 'WWWWWW`", " II II"],
- ];
-
- var heroW = hero.offsetWidth;
- var heroH = hero.offsetHeight;
- var heroRect = hero.getBoundingClientRect();
- var mx = -9999,
- my = -9999;
-
- document.addEventListener("mousemove", function (e) {
- mx = e.clientX - heroRect.left;
- my = e.clientY - heroRect.top;
- });
- document.addEventListener("mouseleave", function () {
- mx = -9999;
- my = -9999;
- });
-
- window.addEventListener("resize", function () {
- heroW = hero.offsetWidth;
- heroH = hero.offsetHeight;
- heroRect = hero.getBoundingClientRect();
- });
- window.addEventListener("scroll", function () {
- heroRect = hero.getBoundingClientRect();
- });
-
- var flock = [];
- var count = window.matchMedia("(max-width: 640px)").matches
- ? 3
- : 5;
-
- for (var i = 0; i < count; i++) {
- var el = document.createElement("pre");
- el.className = "sheep-el";
- var opacity = 0.04 + Math.random() * 0.035;
- var size = 9 + Math.random() * 3;
- el.style.cssText =
- "font-size:" +
- size +
- "px;color:rgba(203,166,247," +
- opacity +
- ")";
- pasture.appendChild(el);
-
- flock.push({
- el: el,
- x: Math.random() * heroW,
- y: 30 + Math.random() * (heroH - 80),
- dir: Math.random() > 0.5 ? 1 : -1,
- speed: 0.1 + Math.random() * 0.2,
- frame: 0,
- ft: 0,
- fi: 400 + Math.random() * 300,
- svx: 0,
- svy: 0,
- });
- }
-
- var last = 0;
- function tick(ts) {
- var dt = Math.min(ts - last, 100);
- last = ts;
- for (var i = 0; i < flock.length; i++) {
- var s = flock[i];
- s.ft += dt;
- if (s.ft > s.fi) {
- s.ft = 0;
- s.frame ^= 1;
- }
-
- var dx = s.x - mx,
- dy = s.y - my;
- var d = Math.sqrt(dx * dx + dy * dy);
- if (d < 120 && d > 1) {
- var f = (1 - d / 120) * 0.4;
- s.svx += (dx / d) * f;
- s.svy += (dy / d) * f;
- }
- s.x += s.svx;
- s.y += s.svy;
- s.svx *= 0.97;
- s.svy *= 0.97;
-
- s.x += s.dir * s.speed * (dt / 16);
- if (s.dir > 0 && s.x > heroW + 100) s.x = -100;
- if (s.dir < 0 && s.x < -100) s.x = heroW + 100;
- if (s.y < -40) s.y = heroH + 20;
- if (s.y > heroH + 40) s.y = -20;
- var frames = s.dir > 0 ? SR : SL;
- s.el.textContent = frames[s.frame].join("\n");
- s.el.style.transform =
- "translate3d(" + s.x + "px," + s.y + "px,0)";
- }
- requestAnimationFrame(tick);
- }
- requestAnimationFrame(function (ts) {
- last = ts;
- tick(ts);
- });
-
- // Copy
- var copyBtn = document.getElementById("copy-btn");
- var installCmd = document.getElementById("install-cmd");
-
- function fallbackCopy(text) {
- var ta = document.createElement("textarea");
- ta.value = text;
- ta.style.cssText = "position:fixed;left:-9999px";
- document.body.appendChild(ta);
- ta.select();
- document.execCommand("copy");
- document.body.removeChild(ta);
- }
-
- function showCopied() {
- copyBtn.textContent = "copied!";
- copyBtn.classList.add("copied");
- setTimeout(function () {
- copyBtn.textContent = "copy";
- copyBtn.classList.remove("copied");
- }, 2000);
- }
-
- copyBtn.addEventListener("click", function () {
- var text = installCmd.textContent;
- if (navigator.clipboard && navigator.clipboard.writeText) {
- navigator.clipboard
- .writeText(text)
- .then(showCopied)
- .catch(function () {
- fallbackCopy(text);
- showCopied();
- });
- } else {
- fallbackCopy(text);
- showCopied();
+ var button = document.getElementById("copy-btn");
+ var command = document.getElementById("install-cmd");
+ if (!button || !command) return;
+
+ button.addEventListener("click", async function () {
+ try {
+ await navigator.clipboard.writeText(
+ command.textContent.trim(),
+ );
+ button.textContent = "Copied";
+ setTimeout(function () {
+ button.textContent = "Copy";
+ }, 1500);
+ } catch (error) {
+ button.textContent = "Select";
}
});
})();