diff options
| author | Ogulcan Celik <ogulcancelik@gmail.com> | 2026-05-18 01:39:39 +0300 |
|---|---|---|
| committer | Ogulcan Celik <ogulcancelik@gmail.com> | 2026-05-18 05:06:41 +0300 |
| commit | f74602b8813c4937dad505c60ca2f44b3e9b21a1 (patch) | |
| tree | 84d8e27a91a6c4198c59405e6a24848e21ed227b /website/index.html | |
| parent | a3d465687b4f5cd16ce5ecc554c163dd45f15a94 (diff) | |
docs: redesign website and add starlight docs
Diffstat (limited to 'website/index.html')
| -rw-r--r-- | website/index.html | 1126 |
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"; } }); })(); |
