docs: finish website redesign
This commit is contained in:
Ogulcan Celik
parent
f74602b881
commit
fb94fff98d
|
|
@ -0,0 +1,6 @@
|
|||
<svg role="img" aria-label="Herdr logo" xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512" preserveAspectRatio="xMidYMid meet">
|
||||
<rect width="512" height="512" fill="#d9dad8"/>
|
||||
<g fill="#303438" transform="translate(0 512) scale(.1 -.1)" stroke="none">
|
||||
<path d="M2794 3710 c-129 -33 -299 -135 -359 -214 -21 -28 -26 -42 -21 -63 9 -38 154 -178 199 -192 32 -11 41 -9 104 23 171 86 354 70 475 -43 150 -138 150 -379 0 -511 -107 -95 -278 -94 -386 2 l-46 40 -11 -29 c-16 -40 -14 -122 4 -164 60 -144 264 -222 452 -174 360 92 559 494 430 868 -36 103 -81 173 -175 267 -71 72 -100 93 -180 132 -52 26 -127 54 -167 62 -96 21 -230 20 -319 -4z M2183 3695 c-116 -32 -221 -108 -273 -199 -17 -28 -30 -54 -30 -58 0 -4 20 1 45 12 66 28 220 68 294 76 64 7 65 7 137 83 40 41 71 77 69 79 -2 2 -21 8 -42 13 -55 12 -140 10 -200 -6z M2212 3388 c-159 -22 -390 -122 -559 -241 -299 -210 -585 -600 -609 -828 -12 -118 40 -251 125 -318 96 -76 178 -98 426 -116 110 -8 224 -21 254 -29 125 -34 230 -115 272 -211 11 -24 24 -81 30 -127 20 -170 65 -271 166 -374 34 -35 63 -65 63 -67 0 -1 -10 -27 -22 -57 -29 -76 -37 -259 -14 -350 42 -170 158 -318 311 -397 44 -23 98 -46 120 -52 22 -6 45 -14 51 -18 5 -5 15 -48 22 -96 6 -48 14 -92 17 -97 4 -6 415 -10 1131 -10 l1124 0 0 1584 0 1585 -55 -19 c-84 -29 -143 -68 -232 -154 l-83 -78 -54 49 c-111 102 -233 151 -391 160 -113 6 -199 -10 -298 -54 l-60 -27 -26 34 c-37 51 -120 134 -127 128 -3 -4 0 -34 7 -67 17 -89 7 -268 -21 -356 -103 -328 -377 -545 -688 -545 -161 0 -273 41 -373 137 -37 35 -66 75 -85 116 -79 173 -8 407 124 407 44 0 68 -14 117 -66 74 -78 167 -82 238 -9 60 62 72 147 33 231 -42 90 -120 130 -238 122 -50 -4 -85 -14 -131 -37 -89 -45 -122 -52 -176 -40 -92 20 -262 163 -302 253 -11 25 -21 45 -22 45 -1 -1 -30 -6 -65 -11z m-256 -505 c115 -88 129 -102 132 -131 2 -18 -2 -40 -9 -49 -7 -8 -69 -55 -138 -105 -103 -73 -130 -88 -151 -83 -35 8 -51 34 -48 74 3 31 12 42 83 92 44 31 80 61 82 66 1 4 -30 31 -69 58 -39 28 -77 56 -85 63 -18 19 -16 72 4 94 32 35 63 23 199 -79z m528 -88 c23 -24 28 -52 14 -82 l-13 -28 -141 -3 c-130 -2 -142 -1 -158 17 -23 26 -24 66 -1 91 16 18 32 20 151 20 105 0 136 -3 148 -15z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -0,0 +1,6 @@
|
|||
<svg role="img" aria-label="Herdr logo" xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512" preserveAspectRatio="xMidYMid meet">
|
||||
<rect width="512" height="512" fill="#d9dad8"/>
|
||||
<g fill="#303438" transform="translate(0 512) scale(.1 -.1)" stroke="none">
|
||||
<path d="M2794 3710 c-129 -33 -299 -135 -359 -214 -21 -28 -26 -42 -21 -63 9 -38 154 -178 199 -192 32 -11 41 -9 104 23 171 86 354 70 475 -43 150 -138 150 -379 0 -511 -107 -95 -278 -94 -386 2 l-46 40 -11 -29 c-16 -40 -14 -122 4 -164 60 -144 264 -222 452 -174 360 92 559 494 430 868 -36 103 -81 173 -175 267 -71 72 -100 93 -180 132 -52 26 -127 54 -167 62 -96 21 -230 20 -319 -4z M2183 3695 c-116 -32 -221 -108 -273 -199 -17 -28 -30 -54 -30 -58 0 -4 20 1 45 12 66 28 220 68 294 76 64 7 65 7 137 83 40 41 71 77 69 79 -2 2 -21 8 -42 13 -55 12 -140 10 -200 -6z M2212 3388 c-159 -22 -390 -122 -559 -241 -299 -210 -585 -600 -609 -828 -12 -118 40 -251 125 -318 96 -76 178 -98 426 -116 110 -8 224 -21 254 -29 125 -34 230 -115 272 -211 11 -24 24 -81 30 -127 20 -170 65 -271 166 -374 34 -35 63 -65 63 -67 0 -1 -10 -27 -22 -57 -29 -76 -37 -259 -14 -350 42 -170 158 -318 311 -397 44 -23 98 -46 120 -52 22 -6 45 -14 51 -18 5 -5 15 -48 22 -96 6 -48 14 -92 17 -97 4 -6 415 -10 1131 -10 l1124 0 0 1584 0 1585 -55 -19 c-84 -29 -143 -68 -232 -154 l-83 -78 -54 49 c-111 102 -233 151 -391 160 -113 6 -199 -10 -298 -54 l-60 -27 -26 34 c-37 51 -120 134 -127 128 -3 -4 0 -34 7 -67 17 -89 7 -268 -21 -356 -103 -328 -377 -545 -688 -545 -161 0 -273 41 -373 137 -37 35 -66 75 -85 116 -79 173 -8 407 124 407 44 0 68 -14 117 -66 74 -78 167 -82 238 -9 60 62 72 147 33 231 -42 90 -120 130 -238 122 -50 -4 -85 -14 -131 -37 -89 -45 -122 -52 -176 -40 -92 20 -262 163 -302 253 -11 25 -21 45 -22 45 -1 -1 -30 -6 -65 -11z m-256 -505 c115 -88 129 -102 132 -131 2 -18 -2 -40 -9 -49 -7 -8 -69 -55 -138 -105 -103 -73 -130 -88 -151 -83 -35 8 -51 34 -48 74 3 31 12 42 83 92 44 31 80 61 82 66 1 4 -30 31 -69 58 -39 28 -77 56 -85 63 -18 19 -16 72 4 94 32 35 63 23 199 -79z m528 -88 c23 -24 28 -52 14 -82 l-13 -28 -141 -3 c-130 -2 -142 -1 -158 17 -23 26 -24 66 -1 91 16 18 32 20 151 20 105 0 136 -3 148 -15z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 236 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 173 KiB |
|
|
@ -0,0 +1,6 @@
|
|||
<svg role="img" aria-label="Herdr logo" xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512" preserveAspectRatio="xMidYMid meet">
|
||||
<rect width="512" height="512" fill="#d9dad8"/>
|
||||
<g fill="#303438" transform="translate(0 512) scale(.1 -.1)" stroke="none">
|
||||
<path d="M2794 3710 c-129 -33 -299 -135 -359 -214 -21 -28 -26 -42 -21 -63 9 -38 154 -178 199 -192 32 -11 41 -9 104 23 171 86 354 70 475 -43 150 -138 150 -379 0 -511 -107 -95 -278 -94 -386 2 l-46 40 -11 -29 c-16 -40 -14 -122 4 -164 60 -144 264 -222 452 -174 360 92 559 494 430 868 -36 103 -81 173 -175 267 -71 72 -100 93 -180 132 -52 26 -127 54 -167 62 -96 21 -230 20 -319 -4z M2183 3695 c-116 -32 -221 -108 -273 -199 -17 -28 -30 -54 -30 -58 0 -4 20 1 45 12 66 28 220 68 294 76 64 7 65 7 137 83 40 41 71 77 69 79 -2 2 -21 8 -42 13 -55 12 -140 10 -200 -6z M2212 3388 c-159 -22 -390 -122 -559 -241 -299 -210 -585 -600 -609 -828 -12 -118 40 -251 125 -318 96 -76 178 -98 426 -116 110 -8 224 -21 254 -29 125 -34 230 -115 272 -211 11 -24 24 -81 30 -127 20 -170 65 -271 166 -374 34 -35 63 -65 63 -67 0 -1 -10 -27 -22 -57 -29 -76 -37 -259 -14 -350 42 -170 158 -318 311 -397 44 -23 98 -46 120 -52 22 -6 45 -14 51 -18 5 -5 15 -48 22 -96 6 -48 14 -92 17 -97 4 -6 415 -10 1131 -10 l1124 0 0 1584 0 1585 -55 -19 c-84 -29 -143 -68 -232 -154 l-83 -78 -54 49 c-111 102 -233 151 -391 160 -113 6 -199 -10 -298 -54 l-60 -27 -26 34 c-37 51 -120 134 -127 128 -3 -4 0 -34 7 -67 17 -89 7 -268 -21 -356 -103 -328 -377 -545 -688 -545 -161 0 -273 41 -373 137 -37 35 -66 75 -85 116 -79 173 -8 407 124 407 44 0 68 -14 117 -66 74 -78 167 -82 238 -9 60 62 72 147 33 231 -42 90 -120 130 -238 122 -50 -4 -85 -14 -131 -37 -89 -45 -122 -52 -176 -40 -92 20 -262 163 -302 253 -11 25 -21 45 -22 45 -1 -1 -30 -6 -65 -11z m-256 -505 c115 -88 129 -102 132 -131 2 -18 -2 -40 -9 -49 -7 -8 -69 -55 -138 -105 -103 -73 -130 -88 -151 -83 -35 8 -51 34 -48 74 3 31 12 42 83 92 44 31 80 61 82 66 1 4 -30 31 -69 58 -39 28 -77 56 -85 63 -18 19 -16 72 4 94 32 35 63 23 199 -79z m528 -88 c23 -24 28 -52 14 -82 l-13 -28 -141 -3 c-130 -2 -142 -1 -158 17 -23 26 -24 66 -1 91 16 18 32 20 151 20 105 0 136 -3 148 -15z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 137 KiB After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.3 KiB After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 127 KiB |
|
|
@ -52,10 +52,10 @@ export default defineConfig({
|
|||
integrations: [
|
||||
starlight({
|
||||
title: 'herdr',
|
||||
description: 'Terminal multiplexer for AI coding agents.',
|
||||
favicon: '/assets/logo.png',
|
||||
description: 'Terminal-native agent runtime and multiplexer.',
|
||||
favicon: '/assets/favicon.png',
|
||||
logo: {
|
||||
src: './public/assets/logo.png',
|
||||
src: './public/assets/logo.svg',
|
||||
alt: 'herdr',
|
||||
},
|
||||
social: [
|
||||
|
|
|
|||
|
|
@ -14,6 +14,8 @@
|
|||
--bg-soft: #efe8dc;
|
||||
--paper: #fffdf8;
|
||||
--paper-muted: #f6f0e6;
|
||||
--grass: #e3f3d0;
|
||||
--wool: #fff8e9;
|
||||
--ink: #151a21;
|
||||
--ink-soft: #303944;
|
||||
--muted: #687381;
|
||||
|
|
@ -61,9 +63,9 @@ body {
|
|||
margin: 0;
|
||||
min-width: 320px;
|
||||
background:
|
||||
radial-gradient(circle at 10% 0%, rgb(31 111 104 / 0.16), transparent 30rem),
|
||||
radial-gradient(circle at 90% 4rem, rgb(37 99 235 / 0.12), transparent 28rem),
|
||||
linear-gradient(180deg, #fbf8f1 0%, var(--bg) 24rem);
|
||||
radial-gradient(circle at 12% 0%, rgb(47 138 79 / 0.17), transparent 30rem),
|
||||
radial-gradient(circle at 92% 4rem, rgb(37 99 235 / 0.1), transparent 28rem),
|
||||
linear-gradient(180deg, #fbf8f1 0%, var(--bg) 36rem, var(--grass) 100%);
|
||||
}
|
||||
|
||||
body::before {
|
||||
|
|
@ -140,10 +142,50 @@ samp {
|
|||
}
|
||||
|
||||
.brand img {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 8px 24px rgb(21 26 33 / 0.12);
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border: 1px solid rgb(201 189 173 / 0.76);
|
||||
border-radius: 13px;
|
||||
background: #d9dad8;
|
||||
box-shadow: 0 10px 28px rgb(21 26 33 / 0.13);
|
||||
}
|
||||
|
||||
.brand-logo {
|
||||
cursor: context-menu;
|
||||
}
|
||||
|
||||
.logo-menu {
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
min-width: 170px;
|
||||
padding: 0.35rem;
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: 16px;
|
||||
background: rgb(255 253 248 / 0.96);
|
||||
box-shadow: 0 22px 70px rgb(21 26 33 / 0.18);
|
||||
backdrop-filter: blur(14px);
|
||||
}
|
||||
|
||||
.logo-menu a,
|
||||
.logo-menu button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
border-radius: 11px;
|
||||
background: transparent;
|
||||
color: var(--ink-soft);
|
||||
padding: 0.62rem 0.7rem;
|
||||
font: inherit;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.logo-menu a:hover,
|
||||
.logo-menu button:hover {
|
||||
background: var(--accent-soft);
|
||||
color: var(--accent-dark);
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
|
|
@ -193,12 +235,42 @@ samp {
|
|||
}
|
||||
|
||||
.hero {
|
||||
position: relative;
|
||||
max-width: 1280px;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.04fr) minmax(340px, 0.76fr);
|
||||
grid-template-columns: minmax(320px, 0.78fr) minmax(560px, 1.22fr);
|
||||
gap: 3.25rem;
|
||||
align-items: center;
|
||||
padding-top: 6.25rem;
|
||||
padding-bottom: 3.75rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-copy,
|
||||
.hero-product-shot {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero-pasture {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.hero-pasture .sheep-el {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
font-family: var(--mono);
|
||||
font-weight: 700;
|
||||
line-height: 1.08;
|
||||
white-space: pre;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.eyebrow,
|
||||
|
|
@ -225,7 +297,7 @@ samp {
|
|||
|
||||
.hero h1 {
|
||||
max-width: 760px;
|
||||
font-size: clamp(3.2rem, 8vw, 6.7rem);
|
||||
font-size: clamp(3.2rem, 6.4vw, 5.7rem);
|
||||
}
|
||||
|
||||
.hero-lede {
|
||||
|
|
@ -368,182 +440,287 @@ samp {
|
|||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.hero-panel {
|
||||
.hero-product-shot {
|
||||
margin: 0;
|
||||
transform: rotate(1.1deg);
|
||||
}
|
||||
|
||||
.hero-product-shell {
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius-lg);
|
||||
background:
|
||||
linear-gradient(180deg, rgb(255 255 255 / 0.08), transparent),
|
||||
var(--terminal);
|
||||
color: #d8e3ed;
|
||||
padding: 1rem;
|
||||
box-shadow: var(--shadow), inset 0 0 0 1px rgb(255 255 255 / 0.08);
|
||||
transform: rotate(1.25deg);
|
||||
background: var(--terminal);
|
||||
box-shadow:
|
||||
var(--shadow),
|
||||
0 0 0 1px rgb(21 26 33 / 0.1),
|
||||
0 36px 120px rgb(21 26 33 / 0.18);
|
||||
}
|
||||
|
||||
.panel-chrome {
|
||||
display: flex;
|
||||
gap: 0.45rem;
|
||||
padding: 0.2rem 0.2rem 0.9rem;
|
||||
.hero-product-shell img {
|
||||
width: 100%;
|
||||
aspect-ratio: 2560 / 1401;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.panel-chrome span {
|
||||
width: 0.72rem;
|
||||
height: 0.72rem;
|
||||
border-radius: 50%;
|
||||
background: #45515f;
|
||||
.hero-product-shot figcaption {
|
||||
margin-top: 0.85rem;
|
||||
color: var(--muted);
|
||||
font-size: 0.84rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.panel-chrome span:nth-child(1) {
|
||||
background: #ee6a72;
|
||||
}
|
||||
|
||||
.panel-chrome span:nth-child(2) {
|
||||
background: #e4b64b;
|
||||
}
|
||||
|
||||
.panel-chrome span:nth-child(3) {
|
||||
background: #5cc071;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
padding: 0.7rem 0.85rem;
|
||||
border-radius: 14px;
|
||||
background: var(--terminal-2);
|
||||
font-family: var(--mono);
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.panel-title span:last-child {
|
||||
color: #8fa0b2;
|
||||
}
|
||||
|
||||
.workspace-list,
|
||||
.agent-list {
|
||||
margin-top: 0.9rem;
|
||||
border: 1px solid rgb(255 255 255 / 0.08);
|
||||
border-radius: 18px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.workspace {
|
||||
.herdr-ui-mock {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 0.72rem;
|
||||
padding: 0.82rem 0.9rem;
|
||||
border-bottom: 1px solid rgb(255 255 255 / 0.07);
|
||||
font-family: var(--mono);
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.workspace:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.workspace.active {
|
||||
background: rgb(103 215 202 / 0.08);
|
||||
}
|
||||
|
||||
.number {
|
||||
color: #788697;
|
||||
}
|
||||
|
||||
.label {
|
||||
grid-template-columns: minmax(120px, 17%) minmax(0, 1fr);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
aspect-ratio: 2560 / 1401;
|
||||
border-radius: var(--radius-lg);
|
||||
background: #20262f;
|
||||
color: #b9c3d0;
|
||||
font-family: var(--mono);
|
||||
font-size: clamp(0.44rem, 0.72vw, 0.64rem);
|
||||
line-height: 1.38;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
box-shadow:
|
||||
var(--shadow),
|
||||
0 0 0 1px rgb(21 26 33 / 0.1),
|
||||
0 36px 120px rgb(21 26 33 / 0.18);
|
||||
}
|
||||
|
||||
.status-pill {
|
||||
border-radius: 999px;
|
||||
padding: 0.18rem 0.48rem;
|
||||
font-size: 0.68rem;
|
||||
.mock-sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
border-right: 1px solid #2b333f;
|
||||
background: #1c222b;
|
||||
}
|
||||
|
||||
.mock-sidebar-title {
|
||||
padding: 0.5rem 0.7rem;
|
||||
color: #727d8d;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.pill-blocked {
|
||||
color: #ffd9e1;
|
||||
background: rgb(196 63 95 / 0.28);
|
||||
.mock-space {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
gap: 0.45rem;
|
||||
align-items: start;
|
||||
padding: 0.55rem 0.7rem;
|
||||
color: #aeb8c6;
|
||||
}
|
||||
|
||||
.pill-working {
|
||||
color: #ffecc0;
|
||||
background: rgb(216 154 0 / 0.22);
|
||||
.mock-space.active {
|
||||
background: #282f3a;
|
||||
}
|
||||
|
||||
.pill-done {
|
||||
color: #dce7ff;
|
||||
background: rgb(37 99 235 / 0.26);
|
||||
}
|
||||
|
||||
.agent-list {
|
||||
padding: 0.9rem;
|
||||
color: #c6d1dd;
|
||||
font-family: var(--mono);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.agent-list p {
|
||||
margin: 0 0 0.7rem;
|
||||
color: #8fa0b2;
|
||||
font-family: var(--sans);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 750;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.agent-list div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
padding: 0.35rem 0;
|
||||
}
|
||||
|
||||
.terminal-line {
|
||||
margin-top: 0.9rem;
|
||||
padding: 0.82rem 0.9rem;
|
||||
border-radius: 14px;
|
||||
background: #0f1319;
|
||||
color: #a8b4c2;
|
||||
font-family: var(--mono);
|
||||
font-size: 0.72rem;
|
||||
.mock-space strong,
|
||||
.mock-agent strong {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
color: #c8d1dd;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.mock-space small,
|
||||
.mock-agent small {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin-top: 0.16rem;
|
||||
color: #6e7788;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.mock-space.active small {
|
||||
color: #d676ff;
|
||||
}
|
||||
|
||||
.mock-dot {
|
||||
width: 0.38rem;
|
||||
height: 0.38rem;
|
||||
margin-top: 0.25rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.mock-sidebar-spacer {
|
||||
flex: 1;
|
||||
min-height: 4rem;
|
||||
}
|
||||
|
||||
.mock-sidebar-row,
|
||||
.mock-agent-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0.45rem 0.7rem;
|
||||
border-top: 1px solid #2b333f;
|
||||
color: #727d8d;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.mock-agent-title {
|
||||
border-top: 0;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
.mock-agent {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
gap: 0.4rem;
|
||||
padding: 0.38rem 0.7rem;
|
||||
}
|
||||
|
||||
.mock-agent > span {
|
||||
color: #a6e3a1;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.mock-agent > div {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.mock-agent.working > span,
|
||||
.mock-agent.working small {
|
||||
color: #f4c76e;
|
||||
}
|
||||
|
||||
.mock-agent.blocked > span,
|
||||
.mock-agent.blocked small {
|
||||
color: #f07187;
|
||||
}
|
||||
|
||||
.mock-agent.done > span,
|
||||
.mock-agent.done small {
|
||||
color: #5ec8d8;
|
||||
}
|
||||
|
||||
.mock-main {
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.mock-tabs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 1.35rem;
|
||||
background: #282f3a;
|
||||
color: #6f7888;
|
||||
}
|
||||
|
||||
.mock-tabs span {
|
||||
min-width: 4.6rem;
|
||||
padding: 0.24rem 0.7rem;
|
||||
border-right: 1px solid #252c36;
|
||||
}
|
||||
|
||||
.mock-tabs span.active {
|
||||
background: #66b9f2;
|
||||
color: #111820;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.mock-tabs span:last-child {
|
||||
min-width: 2rem;
|
||||
}
|
||||
|
||||
.mock-panes {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
gap: 0.45rem;
|
||||
min-height: 0;
|
||||
padding: 0.45rem;
|
||||
}
|
||||
|
||||
.mock-pane {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid #58616f;
|
||||
background: #20262f;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.mock-pane.focused {
|
||||
border: 2px solid #61b7f4;
|
||||
padding: calc(0.75rem - 1px);
|
||||
}
|
||||
|
||||
.mock-prompt {
|
||||
margin-bottom: 0.25rem;
|
||||
color: #67c7ff;
|
||||
font-size: 1.08em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.mock-prompt em {
|
||||
color: #8b929f;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.mock-pane b {
|
||||
color: #d276ff;
|
||||
}
|
||||
|
||||
.herdr-ui-mock .cmd {
|
||||
color: #9ed987;
|
||||
}
|
||||
|
||||
.herdr-ui-mock .str {
|
||||
color: #f4c76e;
|
||||
}
|
||||
|
||||
.herdr-ui-mock pre {
|
||||
margin: 0.55rem 0 0.75rem;
|
||||
color: #c3ccd7;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.herdr-ui-mock .dim,
|
||||
.herdr-ui-mock .time {
|
||||
color: #818b9a;
|
||||
}
|
||||
|
||||
.herdr-ui-mock .blue,
|
||||
.herdr-ui-mock .url-line span {
|
||||
color: #5ec8ff;
|
||||
}
|
||||
|
||||
.herdr-ui-mock .green {
|
||||
color: #a6e3a1;
|
||||
}
|
||||
|
||||
.herdr-ui-mock .badge {
|
||||
display: inline-block;
|
||||
padding: 0.12rem 0.5rem;
|
||||
background: #95d581;
|
||||
color: #49605a;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.cursor {
|
||||
display: inline-block;
|
||||
width: 0.45rem;
|
||||
height: 0.95rem;
|
||||
background: #c8d1dd;
|
||||
vertical-align: -0.16rem;
|
||||
}
|
||||
|
||||
.demo-section {
|
||||
padding-top: 0;
|
||||
padding-bottom: 6rem;
|
||||
}
|
||||
|
||||
.demo-frame {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 30px;
|
||||
background: var(--terminal);
|
||||
box-shadow: var(--shadow), 0 0 0 1px rgb(21 26 33 / 0.08);
|
||||
}
|
||||
|
||||
.demo-frame::before {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 2.4rem;
|
||||
background:
|
||||
radial-gradient(circle at 1.4rem 50%, #ee6a72 0 0.38rem, transparent 0.4rem),
|
||||
radial-gradient(circle at 2.65rem 50%, #e4b64b 0 0.38rem, transparent 0.4rem),
|
||||
radial-gradient(circle at 3.9rem 50%, #5cc071 0 0.38rem, transparent 0.4rem),
|
||||
var(--terminal-2);
|
||||
border-bottom: 1px solid rgb(255 255 255 / 0.08);
|
||||
}
|
||||
|
||||
.demo-frame video {
|
||||
.demo-video {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
aspect-ratio: 16 / 9;
|
||||
border-radius: 28px;
|
||||
background: var(--terminal);
|
||||
object-fit: cover;
|
||||
box-shadow: var(--shadow), 0 0 0 1px rgb(21 26 33 / 0.08);
|
||||
}
|
||||
|
||||
.section {
|
||||
|
|
@ -556,6 +733,42 @@ samp {
|
|||
padding-top: 3rem;
|
||||
}
|
||||
|
||||
.intro-section .section-heading-wide h2 {
|
||||
max-width: 760px;
|
||||
}
|
||||
|
||||
.contrast-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 0.85rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.contrast-grid article {
|
||||
min-height: 150px;
|
||||
padding: 1.1rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgb(255 253 248 / 0.64);
|
||||
box-shadow: 0 16px 50px rgb(35 29 21 / 0.05);
|
||||
}
|
||||
|
||||
.contrast-grid span {
|
||||
display: block;
|
||||
color: var(--accent-dark);
|
||||
font-family: var(--mono);
|
||||
font-size: 0.74rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.contrast-grid p {
|
||||
margin: 0.85rem 0 0;
|
||||
color: var(--ink-soft);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.section-heading,
|
||||
.section-heading-wide {
|
||||
margin-bottom: 2rem;
|
||||
|
|
@ -603,7 +816,7 @@ samp {
|
|||
}
|
||||
|
||||
.pillar-card {
|
||||
min-height: 270px;
|
||||
min-height: 235px;
|
||||
padding: 1.35rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -633,7 +846,7 @@ samp {
|
|||
.pillar-card p,
|
||||
.access-card p,
|
||||
.awareness-card p {
|
||||
margin: auto 0 0;
|
||||
margin: 0.9rem 0 0;
|
||||
color: var(--muted);
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
|
@ -694,9 +907,7 @@ samp {
|
|||
|
||||
.screenshot-card img {
|
||||
width: 100%;
|
||||
height: 430px;
|
||||
object-fit: cover;
|
||||
object-position: 52% 42%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.access-grid {
|
||||
|
|
@ -706,9 +917,30 @@ samp {
|
|||
}
|
||||
|
||||
.access-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 360px;
|
||||
overflow: hidden;
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.access-card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0 0 auto;
|
||||
height: 4px;
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
.access-card:nth-child(2)::before {
|
||||
background: var(--blue);
|
||||
}
|
||||
|
||||
.access-card:nth-child(3)::before {
|
||||
background: var(--yellow);
|
||||
}
|
||||
|
||||
.access-label {
|
||||
color: var(--accent-dark);
|
||||
font-size: 0.72rem;
|
||||
|
|
@ -726,22 +958,49 @@ samp {
|
|||
}
|
||||
|
||||
.access-card pre {
|
||||
margin: 1.2rem 0 0;
|
||||
margin: auto 0 0;
|
||||
padding: 1rem;
|
||||
overflow: auto;
|
||||
border-radius: 14px;
|
||||
background: var(--terminal);
|
||||
background:
|
||||
linear-gradient(90deg, rgb(103 215 202 / 0.12), transparent 42%),
|
||||
var(--terminal);
|
||||
color: #d8e3ed;
|
||||
font-size: 0.82rem;
|
||||
line-height: 1.55;
|
||||
box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.07);
|
||||
}
|
||||
|
||||
.mobile-proof {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 0.82fr) minmax(320px, 1.18fr);
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
margin-top: 2.4rem;
|
||||
}
|
||||
|
||||
.mobile-copy h3 {
|
||||
margin: 0;
|
||||
max-width: 620px;
|
||||
color: var(--ink);
|
||||
font-size: clamp(2rem, 4vw, 3.5rem);
|
||||
letter-spacing: -0.06em;
|
||||
line-height: 0.98;
|
||||
}
|
||||
|
||||
.mobile-copy p:not(.section-kicker) {
|
||||
margin: 1.1rem 0 0;
|
||||
max-width: 520px;
|
||||
color: var(--ink-soft);
|
||||
font-size: 1.02rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.mobile-shots {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 230px));
|
||||
justify-content: center;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.mobile-proof figure {
|
||||
|
|
@ -830,12 +1089,14 @@ samp {
|
|||
}
|
||||
|
||||
.awareness-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.awareness-card img {
|
||||
width: 100%;
|
||||
min-height: 220px;
|
||||
height: 320px;
|
||||
object-fit: contain;
|
||||
border-radius: 16px;
|
||||
background: var(--terminal);
|
||||
|
|
@ -908,13 +1169,16 @@ td:last-child {
|
|||
background: rgb(217 238 233 / 0.5);
|
||||
}
|
||||
|
||||
.compare-cards {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.integration-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.integration-grid a,
|
||||
.integration-grid span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -928,9 +1192,20 @@ td:last-child {
|
|||
box-shadow: 0 12px 36px rgb(35 29 21 / 0.05);
|
||||
}
|
||||
|
||||
.integration-grid a:hover {
|
||||
border-color: var(--accent);
|
||||
background: var(--accent-soft);
|
||||
.integration-note {
|
||||
max-width: 720px;
|
||||
margin: 1.3rem 0 0;
|
||||
color: var(--ink-soft);
|
||||
font-size: 1.02rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.integration-note a {
|
||||
color: var(--accent-dark);
|
||||
font-weight: 800;
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: 0.08em;
|
||||
text-underline-offset: 0.18em;
|
||||
}
|
||||
|
||||
.final-cta {
|
||||
|
|
@ -993,12 +1268,13 @@ td:last-child {
|
|||
padding-top: 4.5rem;
|
||||
}
|
||||
|
||||
.hero-panel {
|
||||
.hero-product-shot {
|
||||
transform: none;
|
||||
max-width: 620px;
|
||||
max-width: 760px;
|
||||
}
|
||||
|
||||
.pillar-grid {
|
||||
.pillar-grid,
|
||||
.contrast-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
|
|
@ -1006,6 +1282,14 @@ td:last-child {
|
|||
.integration-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.mobile-proof {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.mobile-shots {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
|
|
@ -1032,7 +1316,7 @@ td:last-child {
|
|||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: clamp(3rem, 17vw, 4.2rem);
|
||||
font-size: clamp(2.65rem, 13.2vw, 3.65rem);
|
||||
}
|
||||
|
||||
.hero-lede {
|
||||
|
|
@ -1053,8 +1337,8 @@ td:last-child {
|
|||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
.demo-frame {
|
||||
border-radius: 20px;
|
||||
.demo-video {
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.section {
|
||||
|
|
@ -1071,12 +1355,69 @@ td:last-child {
|
|||
}
|
||||
|
||||
.pillar-grid,
|
||||
.contrast-grid,
|
||||
.access-grid,
|
||||
.awareness-grid,
|
||||
.integration-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.compare-section .table-wrap {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.compare-cards {
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.compare-cards article {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 0.5rem;
|
||||
padding: 1rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgb(255 253 248 / 0.76);
|
||||
box-shadow: 0 12px 36px rgb(35 29 21 / 0.05);
|
||||
}
|
||||
|
||||
.compare-cards h3 {
|
||||
grid-column: 1 / -1;
|
||||
margin: 0 0 0.25rem;
|
||||
color: var(--ink);
|
||||
font-size: 1.05rem;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
.compare-cards span {
|
||||
display: grid;
|
||||
gap: 0.25rem;
|
||||
padding: 0.65rem 0.55rem;
|
||||
border-radius: 14px;
|
||||
background: var(--paper-muted);
|
||||
color: var(--muted);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.compare-cards b {
|
||||
color: var(--ink-soft);
|
||||
font-size: 0.9rem;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.compare-cards .herdr {
|
||||
background: var(--accent-soft);
|
||||
color: var(--accent-dark);
|
||||
}
|
||||
|
||||
.compare-cards .herdr b {
|
||||
color: var(--accent-dark);
|
||||
}
|
||||
|
||||
.pillar-card {
|
||||
min-height: auto;
|
||||
}
|
||||
|
|
@ -1086,11 +1427,15 @@ td:last-child {
|
|||
}
|
||||
|
||||
.screenshot-card img {
|
||||
height: 300px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.mobile-proof {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
.access-card {
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.mobile-shots {
|
||||
grid-template-columns: minmax(0, 230px);
|
||||
}
|
||||
|
||||
.final-cta {
|
||||
|
|
@ -1117,17 +1462,20 @@ td:last-child {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.hero-panel {
|
||||
margin-inline: -0.2rem;
|
||||
.hero-product-shot {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.workspace,
|
||||
.agent-list,
|
||||
.terminal-line {
|
||||
font-size: 0.72rem;
|
||||
.hero-pasture {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-proof {
|
||||
.hero-product-shot figcaption {
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.mobile-proof,
|
||||
.mobile-shots {
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
|
|
@ -1142,5 +1490,7 @@ td:last-child {
|
|||
*::before,
|
||||
*::after {
|
||||
scroll-behavior: auto !important;
|
||||
animation-duration: 0.001ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
|
|
@ -3,20 +3,20 @@
|
|||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Herdr — terminal multiplexer for AI agents</title>
|
||||
<title>Herdr — one terminal for the whole herd</title>
|
||||
<meta
|
||||
name="description"
|
||||
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."
|
||||
content="Terminal-native agent runtime and multiplexer. Run AI coding agents in real panes, detach and reattach, SSH in, see state, and orchestrate through the CLI/socket API."
|
||||
/>
|
||||
<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 — terminal multiplexer for AI agents" />
|
||||
<meta property="og:title" content="Herdr — one terminal for the whole herd" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="Persistent terminal workspaces for coding agents. Detach, reattach, SSH in, and keep every agent visible."
|
||||
content="Terminal-native agent runtime and multiplexer. Detach, reattach, SSH in, and keep every agent visible."
|
||||
/>
|
||||
<meta property="og:url" content="https://herdr.dev/" />
|
||||
<meta
|
||||
|
|
@ -25,19 +25,22 @@
|
|||
/>
|
||||
<meta property="og:image:width" content="1200" />
|
||||
<meta property="og:image:height" content="630" />
|
||||
<meta property="og:image:alt" content="Herdr — One terminal. The whole herd." />
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="Herdr — terminal multiplexer for AI agents" />
|
||||
<meta name="twitter:title" content="Herdr — one terminal for the whole herd" />
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content="Persistent terminal workspaces for coding agents. Detach, reattach, SSH in, and keep every agent visible."
|
||||
content="Terminal-native agent runtime and multiplexer. Detach, reattach, SSH in, and keep every agent visible."
|
||||
/>
|
||||
<meta
|
||||
name="twitter:image"
|
||||
content="https://herdr.dev/assets/og-card-v2.png"
|
||||
/>
|
||||
<meta name="twitter:image:alt" content="Herdr — One terminal. The whole herd." />
|
||||
|
||||
<link rel="icon" type="image/png" href="/assets/logo.png" />
|
||||
<link rel="icon" href="/favicon.ico" sizes="any" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon.png" />
|
||||
<link rel="apple-touch-icon" href="/assets/logo.png" />
|
||||
<link
|
||||
rel="preload"
|
||||
|
|
@ -46,13 +49,13 @@
|
|||
type="font/woff2"
|
||||
crossorigin
|
||||
/>
|
||||
<link rel="stylesheet" href="/css/style.css?v=2c64f1d0" />
|
||||
<link rel="stylesheet" href="/css/style.css?v=3f0e9b12" />
|
||||
</head>
|
||||
<body>
|
||||
<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="" />
|
||||
<img class="brand-logo" src="/assets/logo.svg" alt="" />
|
||||
<span>herdr</span>
|
||||
</a>
|
||||
<div class="nav-links">
|
||||
|
|
@ -67,23 +70,25 @@
|
|||
|
||||
<main>
|
||||
<section class="hero" id="hero">
|
||||
<div class="hero-pasture" aria-hidden="true"></div>
|
||||
<div class="hero-copy">
|
||||
<p class="eyebrow">
|
||||
<span class="status-dot dot-done"></span>
|
||||
Open source · 1k+ GitHub stars
|
||||
Terminal-native agent runtime
|
||||
</p>
|
||||
<h1>The terminal multiplexer for AI agents.</h1>
|
||||
<h1>One terminal. The whole herd.</h1>
|
||||
<p class="hero-lede">
|
||||
Run Pi, Claude Code, Codex, OpenCode, and other agents
|
||||
in real terminal panes. See what is
|
||||
Herdr is an agent runtime that runs inside your terminal.
|
||||
Keep your shell, SSH setup, fonts, and keybinds; add
|
||||
tmux-style persistence, mouse-native panes,
|
||||
<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.
|
||||
<span class="state done">done</span> agent state, and an
|
||||
API agents can drive.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a class="button button-primary" href="/docs/install/"
|
||||
>Install Herdr</a
|
||||
<a class="button button-primary" href="/docs/quick-start/"
|
||||
>Quick start</a
|
||||
>
|
||||
<a class="button button-secondary" href="/docs/"
|
||||
>Read the docs</a
|
||||
|
|
@ -97,291 +102,129 @@
|
|||
<button id="copy-btn" type="button">Copy</button>
|
||||
</div>
|
||||
<p class="hero-note">
|
||||
Linux and macOS · single Rust binary · no Electron ·
|
||||
works inside tmux
|
||||
Real terminal panes · mouse and keyboard native · single
|
||||
Rust binary · Linux and macOS · no Electron
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<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 class="agent-list">
|
||||
<p>agents</p>
|
||||
<div>
|
||||
<span class="status-dot dot-blocked"></span>
|
||||
claude-code needs approval
|
||||
</div>
|
||||
<div>
|
||||
<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"
|
||||
<figure class="hero-product-shot">
|
||||
<div
|
||||
class="herdr-ui-mock"
|
||||
role="img"
|
||||
aria-label="Stylized Herdr session with spaces, tabs, agent states, terminal panes, and a local docs server"
|
||||
>
|
||||
<source src="/assets/demo-v2.mp4" type="video/mp4" />
|
||||
</video>
|
||||
</div>
|
||||
</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>
|
||||
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>
|
||||
</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"
|
||||
/>
|
||||
<aside class="mock-sidebar">
|
||||
<div class="mock-sidebar-title">spaces</div>
|
||||
<div class="mock-space active">
|
||||
<span class="mock-dot dot-idle"></span>
|
||||
<div><strong>herdr</strong><small>master</small></div>
|
||||
</div>
|
||||
<div class="mock-space">
|
||||
<span class="mock-dot dot-blocked"></span>
|
||||
<div><strong>llm-proxy</strong><small>master</small></div>
|
||||
</div>
|
||||
<div class="mock-space">
|
||||
<span class="mock-dot dot-done"></span>
|
||||
<div><strong>qmp</strong><small>autoresearch/qmp-ra…</small></div>
|
||||
</div>
|
||||
<div class="mock-sidebar-spacer"></div>
|
||||
<div class="mock-sidebar-row"><span>new</span><span>menu</span></div>
|
||||
<div class="mock-agent-title"><span>agents</span><span>all</span></div>
|
||||
<div class="mock-agent"><span>✓</span><div><strong>doc</strong><small>idle · pi</small></div></div>
|
||||
<div class="mock-agent working"><span>⠴</span><div><strong>custom-row</strong><small>working · pi</small></div></div>
|
||||
<div class="mock-agent blocked"><span>◉</span><div><strong>llm-proxy</strong><small>blocked · claude</small></div></div>
|
||||
<div class="mock-agent done"><span>●</span><div><strong>qmp</strong><small>done · codex</small></div></div>
|
||||
</aside>
|
||||
<section class="mock-main">
|
||||
<div class="mock-tabs">
|
||||
<span>doc</span><span>custom-row</span><span class="active">herdr</span><span>+</span>
|
||||
</div>
|
||||
<div class="mock-panes">
|
||||
<div class="mock-pane focused">
|
||||
<div class="mock-prompt"><span>~/Projects/herdr</span> <em>master</em></div>
|
||||
<div><b>❯</b> <span class="cmd">printf</span> <span class="str">"one terminal. the whole herd.\n"</span> | <span class="cmd">cowsay</span></div>
|
||||
<pre>-------------------------------
|
||||
< one terminal. the whole herd. >
|
||||
-------------------------------
|
||||
\ ^__^
|
||||
\ (oo)\_______
|
||||
(__)\ )\/\
|
||||
||----w |
|
||||
|| ||</pre>
|
||||
<div class="mock-prompt"><span>~/Projects/herdr</span> <em>master</em></div>
|
||||
<div><b>❯</b> <span class="cursor"></span></div>
|
||||
</div>
|
||||
<div class="mock-pane">
|
||||
<div class="mock-prompt"><span>~/Projects/herdr-worktrees/docs-site/website</span> <em>docs-site*</em></div>
|
||||
<div><b>❯</b> <span class="cmd">bun</span> run dev</div>
|
||||
<div class="dim">$ node scripts/prepare-docs.mjs && astro dev</div>
|
||||
<div><span class="time">02:10:44</span> <span class="blue">[types]</span> Generated 0ms</div>
|
||||
<div><span class="time">02:10:44</span> <span class="blue">[content]</span> Synced content</div>
|
||||
<br />
|
||||
<div><span class="badge">astro</span> <span class="green">v5.18.1</span> ready in 668 ms</div>
|
||||
<br />
|
||||
<div class="url-line">┃ Local <span>http://localhost:4321/</span></div>
|
||||
<div class="dim"> Network use --host to expose</div>
|
||||
<br />
|
||||
<div><span class="time">02:10:44</span> <span class="green">watching for file changes...</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<figcaption>
|
||||
The whole herd in one terminal.
|
||||
</figcaption>
|
||||
</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 terminal view over SSH on a phone"
|
||||
loading="lazy"
|
||||
/>
|
||||
<figcaption>terminal view over SSH</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img
|
||||
src="/assets/mobile-switcher.jpeg"
|
||||
alt="Herdr responsive switcher on a phone"
|
||||
loading="lazy"
|
||||
/>
|
||||
<figcaption>responsive switcher</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<section class="demo-section" aria-label="Herdr demo">
|
||||
<video
|
||||
class="demo-video"
|
||||
autoplay
|
||||
muted
|
||||
loop
|
||||
playsinline
|
||||
preload="auto"
|
||||
poster="/assets/hero-session.png"
|
||||
>
|
||||
<source src="/assets/demo-v2.mp4" type="video/mp4" />
|
||||
</video>
|
||||
</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>
|
||||
<section class="section intro-section">
|
||||
<p class="section-kicker">The missing layer</p>
|
||||
<div class="section-heading-wide">
|
||||
<h2>
|
||||
Keep your terminal. Add the control surface.
|
||||
</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.
|
||||
Desktop agent terminals give you app UI. tmux gives you
|
||||
persistence. Herdr sits between them: a lightweight TUI
|
||||
process with real terminal panes, clickable layout,
|
||||
agent state, detach/reattach, remote attach, and a
|
||||
runtime API.
|
||||
</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>
|
||||
</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>
|
||||
|
||||
<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>
|
||||
|
||||
<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="Herdr workspace sidebar state"
|
||||
loading="lazy"
|
||||
/>
|
||||
<h3>Workspace rollups</h3>
|
||||
<p>
|
||||
Each workspace rolls up to its most urgent agent
|
||||
state, so the whole session is scannable.
|
||||
</p>
|
||||
<div class="contrast-grid" aria-label="What Herdr is not">
|
||||
<article>
|
||||
<span>not a terminal emulator</span>
|
||||
<p>Use Ghostty, Kitty, iTerm, Alacritty, or any terminal you already trust.</p>
|
||||
</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 blocked, working, done, idle, or
|
||||
unknown without opening every pane.
|
||||
</p>
|
||||
<article>
|
||||
<span>not a browser dashboard</span>
|
||||
<p>No web view, hosted control plane, account, or reconstructed chat surface.</p>
|
||||
</article>
|
||||
<article>
|
||||
<span>more than tmux for agents</span>
|
||||
<p>Persistence plus mouse-native panes, state rollups, and commands agents can call.</p>
|
||||
</article>
|
||||
</div>
|
||||
<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>
|
||||
</section>
|
||||
|
||||
<section class="section compare-section">
|
||||
<div class="section-heading">
|
||||
<p class="section-kicker">Positioning</p>
|
||||
<h2>What Herdr combines.</h2>
|
||||
<h2>The terminal-native control layer.</h2>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
|
|
@ -433,31 +276,283 @@ $ herdr</code></pre>
|
|||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="compare-cards" aria-label="Mobile comparison">
|
||||
<article>
|
||||
<h3>Persistent sessions</h3>
|
||||
<span>tmux <b>✓</b></span>
|
||||
<span>apps <b>—</b></span>
|
||||
<span class="herdr">Herdr <b>✓</b></span>
|
||||
</article>
|
||||
<article>
|
||||
<h3>Remote SSH attach</h3>
|
||||
<span>tmux <b>✓</b></span>
|
||||
<span>apps <b>limited</b></span>
|
||||
<span class="herdr">Herdr <b>✓</b></span>
|
||||
</article>
|
||||
<article>
|
||||
<h3>Real terminal panes</h3>
|
||||
<span>tmux <b>✓</b></span>
|
||||
<span>apps <b>—</b></span>
|
||||
<span class="herdr">Herdr <b>✓</b></span>
|
||||
</article>
|
||||
<article>
|
||||
<h3>Mouse-native TUI</h3>
|
||||
<span>tmux <b>—</b></span>
|
||||
<span>apps <b>✓</b></span>
|
||||
<span class="herdr">Herdr <b>✓</b></span>
|
||||
</article>
|
||||
<article>
|
||||
<h3>Agent state awareness</h3>
|
||||
<span>tmux <b>—</b></span>
|
||||
<span>apps <b>✓</b></span>
|
||||
<span class="herdr">Herdr <b>✓</b></span>
|
||||
</article>
|
||||
<article>
|
||||
<h3>Agents can orchestrate it</h3>
|
||||
<span>tmux <b>—</b></span>
|
||||
<span>apps <b>limited</b></span>
|
||||
<span class="herdr">Herdr <b>✓</b></span>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section feature-split">
|
||||
<div class="feature-copy">
|
||||
<p class="section-kicker">Your terminal</p>
|
||||
<h2>Same shell, same keybinds, real panes.</h2>
|
||||
<p>
|
||||
Herdr does not replace your terminal or wrap agents in a
|
||||
reconstructed chat view. It runs real processes in PTYs,
|
||||
then adds layout, click targets, state, persistence, and
|
||||
automation around them.
|
||||
</p>
|
||||
<ul class="check-list">
|
||||
<li>Use the mouse for panes, tabs, workspaces, and menus.</li>
|
||||
<li>Keep your terminal fonts, shortcuts, SSH, and shell setup.</li>
|
||||
<li>Stay keyboard-first, or disable mouse input entirely.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="screenshot-card">
|
||||
<img
|
||||
src="/assets/terminal-panes.png"
|
||||
alt="Herdr showing real terminal panes side by side"
|
||||
loading="lazy"
|
||||
/>
|
||||
</figure>
|
||||
</section>
|
||||
|
||||
<section class="section pillars" aria-labelledby="pillars-title">
|
||||
<div class="section-heading">
|
||||
<p class="section-kicker">Core pillars</p>
|
||||
<h2 id="pillars-title">Why terminal users switch.</h2>
|
||||
</div>
|
||||
<div class="pillar-grid">
|
||||
<article class="pillar-card">
|
||||
<span class="card-index">01</span>
|
||||
<h3>Survives disconnects</h3>
|
||||
<p>
|
||||
Panes keep running in a background session server.
|
||||
Close the terminal, lose SSH, or detach on purpose;
|
||||
come back to the same herd later.
|
||||
</p>
|
||||
</article>
|
||||
<article class="pillar-card">
|
||||
<span class="card-index">02</span>
|
||||
<h3>Runs where code lives</h3>
|
||||
<p>
|
||||
Use Herdr locally, inside any SSH session, or as a
|
||||
thin client to a remote host. Keep credentials and
|
||||
repos on the machine doing the work.
|
||||
</p>
|
||||
</article>
|
||||
<article class="pillar-card">
|
||||
<span class="card-index">03</span>
|
||||
<h3>Mouse-native TUI</h3>
|
||||
<p>
|
||||
Click panes, tabs, workspaces, and agents. Drag
|
||||
borders, select text, use right-click menus, then
|
||||
stay on the keyboard whenever that is faster.
|
||||
</p>
|
||||
</article>
|
||||
<article class="pillar-card">
|
||||
<span class="card-index">04</span>
|
||||
<h3>Agents can drive it</h3>
|
||||
<p>
|
||||
The CLI and socket API let agents create panes, run
|
||||
commands, read output, wait for changes, and operate
|
||||
their workspace without hand-shuffled terminals.
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
</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">
|
||||
<div class="mobile-copy">
|
||||
<p class="section-kicker">Responsive TUI</p>
|
||||
<h3>Mobile-first when the terminal gets small.</h3>
|
||||
<p>
|
||||
Herdr stays usable over SSH from a phone or tablet.
|
||||
The terminal view remains real, while narrow screens
|
||||
get a switcher built for touch-sized decisions.
|
||||
</p>
|
||||
</div>
|
||||
<div class="mobile-shots">
|
||||
<figure>
|
||||
<img
|
||||
src="/assets/mobile-terminal.jpeg"
|
||||
alt="Herdr terminal view over SSH on a phone"
|
||||
loading="lazy"
|
||||
/>
|
||||
<figcaption>terminal over SSH</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img
|
||||
src="/assets/mobile-switcher.jpeg"
|
||||
alt="Herdr responsive switcher on a phone"
|
||||
loading="lazy"
|
||||
/>
|
||||
<figcaption>responsive switcher</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section api-section">
|
||||
<div class="api-copy">
|
||||
<p class="section-kicker">Runtime surface</p>
|
||||
<h2>The UI is also a control surface.</h2>
|
||||
<p>
|
||||
Herdr exposes workspace, tab, pane, output, and wait
|
||||
operations through a CLI and newline-delimited JSON
|
||||
socket API. Agents can operate 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>
|
||||
</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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>Keep the herd in sight.</h2>
|
||||
</div>
|
||||
<div class="awareness-grid">
|
||||
<article class="awareness-card">
|
||||
<img
|
||||
src="/assets/sidebar-workspaces.png"
|
||||
alt="Herdr workspace sidebar state"
|
||||
loading="lazy"
|
||||
/>
|
||||
<h3>Workspace rollups</h3>
|
||||
<p>
|
||||
Each workspace rolls up to its most urgent agent
|
||||
state, so the whole session is scannable.
|
||||
</p>
|
||||
</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 blocked, working, done, idle, or
|
||||
unknown without opening every pane.
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
<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>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="section integrations-section">
|
||||
<div class="section-heading">
|
||||
<p class="section-kicker">Integrations</p>
|
||||
<h2>Works with the agents you already run.</h2>
|
||||
<h2>Bring your existing agents into the herd.</h2>
|
||||
</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>Pi</span>
|
||||
<span>Claude Code</span>
|
||||
<span>Codex</span>
|
||||
<span>OpenCode</span>
|
||||
<span>Droid</span>
|
||||
<span>Amp</span>
|
||||
<span>Grok CLI</span>
|
||||
<span>Gemini CLI</span>
|
||||
</div>
|
||||
<p class="integration-note">
|
||||
Any terminal agent works in Herdr. Use the Herdr API to add
|
||||
richer state, orchestration, and custom workflows;
|
||||
<a href="/docs/integrations/">see example integrations</a>
|
||||
or build your own for anything.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="final-cta">
|
||||
<p class="section-kicker">Start small</p>
|
||||
<p class="section-kicker">Start the herd</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.
|
||||
The value shows up the first time the herd keeps running
|
||||
after your terminal disappears.
|
||||
</p>
|
||||
<div class="hero-actions center">
|
||||
<a class="button button-primary" href="/docs/install/"
|
||||
|
|
@ -472,7 +567,7 @@ $ herdr</code></pre>
|
|||
|
||||
<footer class="footer">
|
||||
<a class="brand" href="/" aria-label="Herdr home">
|
||||
<img src="/assets/logo.png" alt="" />
|
||||
<img class="brand-logo" src="/assets/logo.svg" alt="" />
|
||||
<span>herdr</span>
|
||||
</a>
|
||||
<div>
|
||||
|
|
@ -485,7 +580,192 @@ $ herdr</code></pre>
|
|||
</div>
|
||||
</footer>
|
||||
|
||||
<div class="logo-menu" id="logo-menu" hidden>
|
||||
<a href="/assets/logo.svg" download="herdr-logo.svg">Download SVG</a>
|
||||
<a href="/assets/logo.png" download="herdr-logo.png">Download PNG</a>
|
||||
<button type="button" id="copy-logo-url">Copy SVG URL</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
var menu = document.getElementById("logo-menu");
|
||||
var copyButton = document.getElementById("copy-logo-url");
|
||||
var logos = document.querySelectorAll(".brand-logo");
|
||||
if (!menu || !logos.length) return;
|
||||
|
||||
function hideMenu() {
|
||||
menu.hidden = true;
|
||||
}
|
||||
|
||||
function showMenu(event) {
|
||||
event.preventDefault();
|
||||
menu.hidden = false;
|
||||
var menuWidth = menu.offsetWidth;
|
||||
var menuHeight = menu.offsetHeight;
|
||||
var left = Math.min(event.clientX, window.innerWidth - menuWidth - 12);
|
||||
var top = Math.min(event.clientY, window.innerHeight - menuHeight - 12);
|
||||
menu.style.left = Math.max(12, left) + "px";
|
||||
menu.style.top = Math.max(12, top) + "px";
|
||||
}
|
||||
|
||||
logos.forEach(function (logo) {
|
||||
logo.addEventListener("contextmenu", showMenu);
|
||||
});
|
||||
|
||||
document.addEventListener("click", function (event) {
|
||||
if (!menu.contains(event.target)) hideMenu();
|
||||
});
|
||||
document.addEventListener("keydown", function (event) {
|
||||
if (event.key === "Escape") hideMenu();
|
||||
});
|
||||
window.addEventListener("scroll", hideMenu, { passive: true });
|
||||
window.addEventListener("resize", hideMenu);
|
||||
|
||||
if (copyButton) {
|
||||
copyButton.addEventListener("click", async function () {
|
||||
var url = new URL("/assets/logo.svg", window.location.href).href;
|
||||
try {
|
||||
await navigator.clipboard.writeText(url);
|
||||
copyButton.textContent = "Copied";
|
||||
setTimeout(function () {
|
||||
copyButton.textContent = "Copy SVG URL";
|
||||
}, 1500);
|
||||
} catch (error) {
|
||||
window.prompt("Copy logo URL", url);
|
||||
}
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
||||
(function () {
|
||||
var hero = document.getElementById("hero");
|
||||
var pasture = hero && hero.querySelector(".hero-pasture");
|
||||
var reduceMotion = window.matchMedia(
|
||||
"(prefers-reduced-motion: reduce)",
|
||||
).matches;
|
||||
|
||||
if (hero && pasture && !reduceMotion) {
|
||||
var sheepRight = [
|
||||
[" ,ww", " wWWWWWWW)", " `WWWWWW'", " /I I\\"],
|
||||
[" ,ww", " wWWWWWWW)", " `WWWWWW'", " I\\ /I "],
|
||||
];
|
||||
var sheepLeft = [
|
||||
[" ww,", "(WWWWWWWw", " 'WWWWWW`", " /I I\\"],
|
||||
[" ww,", "(WWWWWWWw", " 'WWWWWW`", " I\\ /I "],
|
||||
];
|
||||
var colors = [
|
||||
"31,111,104",
|
||||
"37,99,235",
|
||||
"21,26,33",
|
||||
"154,106,0",
|
||||
];
|
||||
|
||||
var heroWidth = hero.offsetWidth;
|
||||
var heroHeight = hero.offsetHeight;
|
||||
var heroRect = hero.getBoundingClientRect();
|
||||
var mouseX = -9999;
|
||||
var mouseY = -9999;
|
||||
var flock = [];
|
||||
var count = window.matchMedia("(max-width: 900px)").matches
|
||||
? 8
|
||||
: 16;
|
||||
|
||||
document.addEventListener("mousemove", function (event) {
|
||||
mouseX = event.clientX - heroRect.left;
|
||||
mouseY = event.clientY - heroRect.top;
|
||||
});
|
||||
document.addEventListener("mouseleave", function () {
|
||||
mouseX = -9999;
|
||||
mouseY = -9999;
|
||||
});
|
||||
window.addEventListener("resize", function () {
|
||||
heroWidth = hero.offsetWidth;
|
||||
heroHeight = hero.offsetHeight;
|
||||
heroRect = hero.getBoundingClientRect();
|
||||
});
|
||||
window.addEventListener("scroll", function () {
|
||||
heroRect = hero.getBoundingClientRect();
|
||||
});
|
||||
|
||||
for (var i = 0; i < count; i += 1) {
|
||||
var sheep = document.createElement("pre");
|
||||
sheep.className = "sheep-el";
|
||||
var color = colors[i % colors.length];
|
||||
var opacity = 0.045 + Math.random() * 0.045;
|
||||
var size = 8.5 + Math.random() * 4.5;
|
||||
sheep.style.cssText =
|
||||
"font-size:" +
|
||||
size +
|
||||
"px;color:rgba(" +
|
||||
color +
|
||||
"," +
|
||||
opacity +
|
||||
")";
|
||||
pasture.appendChild(sheep);
|
||||
|
||||
flock.push({
|
||||
el: sheep,
|
||||
x: Math.random() * heroWidth,
|
||||
y: 24 + Math.random() * Math.max(heroHeight - 64, 120),
|
||||
dir: Math.random() > 0.5 ? 1 : -1,
|
||||
speed: 0.08 + Math.random() * 0.2,
|
||||
frame: 0,
|
||||
frameTime: 0,
|
||||
frameInterval: 420 + Math.random() * 320,
|
||||
shoveX: 0,
|
||||
shoveY: 0,
|
||||
});
|
||||
}
|
||||
|
||||
var lastFrame = 0;
|
||||
function tick(timestamp) {
|
||||
var delta = Math.min(timestamp - lastFrame, 100);
|
||||
lastFrame = timestamp;
|
||||
|
||||
for (var i = 0; i < flock.length; i += 1) {
|
||||
var sheep = flock[i];
|
||||
sheep.frameTime += delta;
|
||||
if (sheep.frameTime > sheep.frameInterval) {
|
||||
sheep.frameTime = 0;
|
||||
sheep.frame ^= 1;
|
||||
}
|
||||
|
||||
var dx = sheep.x - mouseX;
|
||||
var dy = sheep.y - mouseY;
|
||||
var distance = Math.sqrt(dx * dx + dy * dy);
|
||||
if (distance < 150 && distance > 1) {
|
||||
var force = (1 - distance / 150) * 0.48;
|
||||
sheep.shoveX += (dx / distance) * force;
|
||||
sheep.shoveY += (dy / distance) * force;
|
||||
}
|
||||
|
||||
sheep.x += sheep.shoveX;
|
||||
sheep.y += sheep.shoveY;
|
||||
sheep.shoveX *= 0.965;
|
||||
sheep.shoveY *= 0.965;
|
||||
sheep.x += sheep.dir * sheep.speed * (delta / 16);
|
||||
|
||||
if (sheep.dir > 0 && sheep.x > heroWidth + 120) sheep.x = -120;
|
||||
if (sheep.dir < 0 && sheep.x < -120) sheep.x = heroWidth + 120;
|
||||
if (sheep.y < -48) sheep.y = heroHeight + 24;
|
||||
if (sheep.y > heroHeight + 48) sheep.y = -24;
|
||||
|
||||
var frames = sheep.dir > 0 ? sheepRight : sheepLeft;
|
||||
sheep.el.textContent = frames[sheep.frame].join("\n");
|
||||
sheep.el.style.transform =
|
||||
"translate3d(" + sheep.x + "px," + sheep.y + "px,0)";
|
||||
}
|
||||
|
||||
requestAnimationFrame(tick);
|
||||
}
|
||||
|
||||
requestAnimationFrame(function (timestamp) {
|
||||
lastFrame = timestamp;
|
||||
tick(timestamp);
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
||||
(function () {
|
||||
var button = document.getElementById("copy-btn");
|
||||
var command = document.getElementById("install-cmd");
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ async function preparePublicAssets() {
|
|||
'latest.json',
|
||||
'robots.txt',
|
||||
'sitemap.xml',
|
||||
'favicon.ico',
|
||||
'_headers',
|
||||
'_redirects',
|
||||
]) {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
---
|
||||
title: Herdr documentation
|
||||
description: Terminal multiplexer for AI coding agents.
|
||||
description: Terminal-native agent runtime and multiplexer.
|
||||
template: splash
|
||||
hero:
|
||||
tagline: Run agents in real terminal panes, keep sessions alive, attach over SSH, and orchestrate everything from the CLI or socket API.
|
||||
tagline: "One terminal for the whole herd: real panes, persistent sessions, SSH attach, state awareness, and CLI/socket orchestration."
|
||||
image:
|
||||
file: ../../../public/assets/logo.png
|
||||
file: ../../../public/assets/logo.svg
|
||||
actions:
|
||||
- text: Install Herdr
|
||||
link: /docs/install/
|
||||
|
|
@ -16,14 +16,14 @@ hero:
|
|||
|
||||
import { Card, CardGrid } from '@astrojs/starlight/components';
|
||||
|
||||
Herdr is a terminal-native agent multiplexer. It gives AI coding agents persistent terminal workspaces with panes, tabs, mouse control, state awareness, and an API that agents can use themselves.
|
||||
Herdr is a terminal-native agent runtime and multiplexer. It gives the whole herd persistent terminal workspaces with panes, tabs, mouse control, state awareness, and an API that agents can use themselves.
|
||||
|
||||
```bash
|
||||
curl -fsSL https://herdr.dev/install.sh | sh
|
||||
herdr
|
||||
```
|
||||
|
||||
## Core model
|
||||
## Core runtime
|
||||
|
||||
<CardGrid>
|
||||
<Card title="Detach and reattach">
|
||||
|
|
@ -41,7 +41,7 @@ herdr
|
|||
|
||||
[Learn concepts →](/docs/concepts/)
|
||||
</Card>
|
||||
<Card title="State and orchestration">
|
||||
<Card title="Runtime API">
|
||||
See agent status in the sidebar and drive workspaces, tabs, panes, waits, and output reads through the CLI or socket API.
|
||||
|
||||
[Read the API guide →](/docs/socket-api/)
|
||||
|
|
|
|||
Loading…
Reference in New Issue