Files
byre/site/index.html
T

1616 lines
45 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>byre</title>
<meta name="description" content="Run many coding agents in parallel on one Mac, each on its own branch, with a lead agent that keeps track of them for you, and drive them from every Mac you use.">
<link rel="icon" href="/icon.png" type="image/png" sizes="180x180">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/icon.png">
<meta property="og:type" content="website">
<meta property="og:url" content="https://byre.run/">
<meta property="og:site_name" content="byre">
<meta property="og:title" content="byre: a crew of coding agents, on all your Macs">
<meta property="og:description" content="Run Claude Code, Codex and Antigravity side by side, each on its own branch, with a lead agent that tells you what needs you.">
<meta property="og:image" content="https://byre.run/card.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="byre: A crew of coding agents, on all your Macs.">
<meta name="twitter:card" content="summary_large_image">
<style>
@font-face {
font-family: "Atkinson Hyperlegible Mono";
font-weight: 200 800;
src: url("/fonts/atkinson-hyperlegible-mono-latin-wght-normal.woff2") format("woff2");
}
@font-face {
font-family: "Atkinson Hyperlegible Mono";
font-weight: 200 800;
src: url("/fonts/atkinson-hyperlegible-mono-latin-ext-wght-normal.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
--bg: #fbfbfa;
--surface: #f2f3f5;
--border: #d6d9de;
--text: #16181b;
--muted: #4a5260;
--accent: #1f55d6;
--accent-tint: #e7edfb;
--blue: #3d7dff;
--red: #ff3b4e;
--orange: #ff9500;
--green: #34d058;
--purple: #b05cff;
--cyan: #00d5f0;
--on-color: #15171a;
--tint: 7%;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #15171a;
--surface: #1c1f23;
--border: #353b43;
--text: #eceff3;
--muted: #a9b1bc;
--accent: #8ab4ff;
--accent-tint: #1e2a40;
--tint: 10%;
}
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background: var(--bg);
color: var(--text);
font: 16px/1.6 "Atkinson Hyperlegible Mono", ui-monospace, monospace;
border-top: 6px solid;
border-image: linear-gradient(90deg, var(--red), var(--orange), var(--green), var(--cyan), var(--blue), var(--purple)) 1;
}
main {
max-width: 960px;
margin: 0 auto;
padding: 64px 16px;
}
a {
color: var(--accent);
}
header {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 24px;
padding-bottom: 56px;
border-bottom: 1px solid var(--border);
}
header img {
width: 72px;
height: 72px;
border-radius: 16px;
}
h1 {
margin: 0;
font-size: clamp(32px, 6vw, 52px);
line-height: 1.15;
font-weight: 700;
letter-spacing: -0.02em;
}
h1 span {
background: linear-gradient(transparent 72%, color-mix(in srgb, var(--blue) 30%, transparent) 72%);
}
.lede {
margin: 0;
max-width: 44em;
color: var(--muted);
font-size: 18px;
}
.download {
display: inline-block;
padding: 12px 22px;
border-radius: 8px;
background: var(--accent);
color: var(--bg);
font-weight: 700;
text-decoration: none;
}
.download:hover {
opacity: 0.9;
}
h2 {
margin: 56px 0 24px;
font-size: 22px;
}
.features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin: 0;
padding: 0;
list-style: none;
}
.features > li {
--c: var(--blue);
padding: 20px;
border: 1px solid var(--border);
border-top: 4px solid var(--c);
border-radius: 10px;
background: color-mix(in srgb, var(--c) var(--tint), var(--surface));
}
.features .wide {
grid-column: span 2;
}
.features .hero {
grid-column: 1 / -1;
padding: 28px;
}
.features h3 {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 0 0 8px;
font-size: 16px;
}
.features h3::before {
content: "";
flex: none;
width: 10px;
height: 10px;
margin-top: calc(0.8em - 5px);
border-radius: 50%;
background: var(--c);
}
.features .hero h3 {
font-size: 22px;
}
.features summary p {
margin: 0;
color: var(--muted);
font-size: 14px;
}
.features .hero summary p {
max-width: 52em;
font-size: 16px;
}
.features summary {
position: relative;
display: block;
padding-right: 32px;
cursor: pointer;
list-style: none;
}
.features summary::-webkit-details-marker {
display: none;
}
.more {
position: absolute;
top: 4px;
right: 4px;
width: 10px;
height: 10px;
border-right: 2px solid var(--muted);
border-bottom: 2px solid var(--muted);
transform: rotate(45deg);
transition: transform 250ms cubic-bezier(0.65, 0, 0.35, 1), border-color 150ms;
}
.features summary:hover .more {
border-color: var(--c);
}
details[open] .more {
transform: translateY(5px) rotate(225deg);
}
.features > li:has(details[open]) {
grid-column: 1 / -1;
}
::view-transition-group(*) {
overflow: hidden;
border-radius: 10px;
animation-duration: 300ms;
animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
}
::view-transition-old(*),
::view-transition-new(*) {
height: 100%;
object-fit: none;
object-position: left top;
}
.detail {
margin-top: 24px;
padding-top: 24px;
border-top: 1px solid color-mix(in srgb, var(--c) 30%, var(--border));
}
.points {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin: 28px 0 0;
padding: 0;
list-style: none;
color: var(--muted);
font-size: 14px;
text-wrap: pretty;
}
.points strong {
display: block;
margin-bottom: 4px;
color: var(--text);
}
.fig {
font-size: 13px;
line-height: 1.5;
}
.fig ul {
margin: 0;
padding: 0;
list-style: none;
}
.fig i {
display: inline-block;
flex: none;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--c);
}
.fig .live {
animation: pulse 1.6s ease-in-out infinite;
}
.fig b {
font-weight: 700;
}
.muted {
color: var(--muted);
}
.split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
align-items: start;
}
.stack {
display: grid;
gap: 12px;
}
.win {
overflow: hidden;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--bg);
}
.bar {
display: flex;
align-items: center;
gap: 5px;
padding: 6px 10px;
border-bottom: 1px solid var(--border);
background: var(--surface);
color: var(--muted);
font-size: 12px;
}
.fig .bar i {
width: 7px;
height: 7px;
background: var(--border);
}
.bar i:last-of-type {
margin-right: 6px;
}
.bar .chip {
margin-left: auto;
}
.body {
padding: 12px;
}
.row {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 0;
border-top: 1px solid var(--border);
}
.row:first-child {
border-top: 0;
}
.row .end {
margin-left: auto;
color: var(--muted);
}
.chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 1px 8px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--bg);
font-size: 12px;
white-space: nowrap;
}
.chip.on {
border-color: var(--c);
background: color-mix(in srgb, var(--c) 14%, var(--bg));
}
.btn {
display: inline-block;
padding: 4px 12px;
border-radius: 6px;
background: var(--c);
color: var(--on-color);
font-size: 12px;
font-weight: 700;
white-space: nowrap;
}
.btn.ghost {
border: 1px solid var(--border);
background: var(--bg);
color: var(--text);
}
.msg {
max-width: 88%;
margin-top: 8px;
padding: 8px 10px;
border-radius: 8px;
background: var(--surface);
}
.msg:first-child {
margin-top: 0;
}
.msg.you {
margin-left: auto;
background: color-mix(in srgb, var(--c) 16%, var(--bg));
}
.msg .row {
padding: 3px 0;
border: 0;
}
.caption {
margin-top: 8px;
color: var(--muted);
font-size: 12px;
text-align: center;
}
.wires {
width: 100%;
height: 100%;
overflow: visible;
}
.wires path {
fill: none;
stroke: var(--c);
stroke-width: 2;
stroke-dasharray: 6 6;
vector-effect: non-scaling-stroke;
animation: flow 1s linear infinite;
}
.wires .off {
stroke: var(--border);
animation: none;
}
.diagram {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(48px, 2fr) minmax(0, 5fr);
}
.server {
align-self: center;
padding: 16px;
box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent);
}
.server .label {
display: flex;
justify-content: space-between;
margin-bottom: 6px;
font-weight: 700;
}
.server .label span {
color: var(--muted);
font-weight: 400;
}
.server .row:first-child {
border-top: 1px solid var(--border);
}
.server .red .end {
color: var(--text);
font-weight: 700;
}
.clients {
display: grid;
grid-template-rows: repeat(3, 1fr);
gap: 12px;
}
.client .rows {
display: flex;
align-items: center;
gap: 8px;
padding: 10px;
color: var(--muted);
font-size: 12px;
}
.rows span {
flex: 1;
height: 8px;
border-radius: 4px;
background: var(--c);
}
.client.asleep {
opacity: 0.45;
}
.servers .row.on {
margin: 0 -12px;
padding: 6px 12px;
background: color-mix(in srgb, var(--c) 12%, var(--bg));
}
.projects {
padding: 4px 0 6px 18px;
color: var(--muted);
}
.projects li::before {
content: "└ ";
color: var(--border);
}
.synced .body {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.task .body {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
.task .name {
flex-basis: 100%;
font-weight: 700;
}
.option {
display: flex;
align-items: center;
gap: 10px;
margin-top: 8px;
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: 8px;
}
.option::before {
content: "";
flex: none;
width: 12px;
height: 12px;
border: 2px solid var(--border);
border-radius: 50%;
}
.option.on {
border-color: var(--c);
background: color-mix(in srgb, var(--c) 10%, var(--bg));
}
.option.on::before {
border-color: var(--c);
background: radial-gradient(var(--c) 40%, transparent 45%);
}
.option > span {
margin-left: auto;
}
.notif {
display: flex;
gap: 12px;
padding: 14px;
border: 1px solid var(--border);
border-radius: 14px;
background: color-mix(in srgb, var(--surface) 80%, var(--bg));
box-shadow: 0 6px 24px color-mix(in srgb, var(--text) 10%, transparent);
}
.notif .app {
flex: none;
width: 32px;
height: 32px;
border-radius: 8px;
background: linear-gradient(135deg, var(--red), var(--orange), var(--purple));
}
.flow {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 16px;
}
.flow .arrow {
color: var(--muted);
}
.finding {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 6px 10px;
padding: 10px 0;
border-top: 1px solid var(--border);
}
.finding:first-child {
border-top: 0;
}
.finding .reply {
grid-column: 2 / -1;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
color: var(--muted);
}
.squash {
align-items: center;
}
.ready .body {
display: grid;
justify-items: start;
gap: 8px;
}
.graph svg {
display: block;
width: 100%;
}
.graph path {
fill: none;
stroke-width: 2;
}
.graph .line {
stroke: var(--border);
}
.graph .branch {
stroke: var(--c);
stroke-dasharray: 5 5;
animation: flow 1s linear infinite;
}
.graph .old {
fill: var(--border);
}
.graph .turn {
fill: var(--bg);
stroke: var(--muted);
stroke-width: 1.5;
}
.graph .new {
fill: var(--c);
stroke: color-mix(in srgb, var(--c) 30%, transparent);
stroke-width: 8;
}
.legend {
display: flex;
justify-content: space-between;
gap: 12px;
margin-top: 6px;
color: var(--muted);
font-size: 12px;
}
.legend b {
color: var(--text);
}
.timeline {
position: relative;
display: flex;
justify-content: space-between;
padding: 0 4%;
}
.timeline::before {
content: "";
position: absolute;
top: 50%;
left: 4%;
right: 4%;
border-top: 2px solid var(--border);
}
.node {
position: relative;
display: grid;
place-items: center;
width: 36px;
height: 36px;
border: 2px solid var(--border);
border-radius: 50%;
background: var(--bg);
font-size: 12px;
}
.node.on {
border-color: var(--c);
background: color-mix(in srgb, var(--c) 18%, var(--bg));
font-weight: 700;
}
.fork {
display: flex;
flex-direction: column;
align-items: center;
}
.fork::before {
content: "";
height: 28px;
border-left: 2px dashed var(--c);
}
.fork .win {
width: min(100%, 380px);
}
.snaps .split {
align-items: center;
}
.diff .row {
font-variant-numeric: tabular-nums;
}
.plus {
color: var(--green);
}
.minus {
color: var(--red);
}
.pipeline {
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(32px, 1fr) minmax(0, 3fr) minmax(32px, 1fr) minmax(0, 3fr);
align-items: stretch;
}
.pipeline .stack {
grid-template-rows: repeat(3, 1fr);
}
.stage {
align-self: center;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--bg);
}
.pipeline .stack .stage {
align-self: stretch;
}
.stage .muted {
display: block;
font-size: 12px;
}
.screen {
position: relative;
}
.screen .body {
display: grid;
gap: 10px;
}
.screen .title {
line-height: 20px;
}
.field {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
height: 34px;
padding: 0 10px;
border: 1px solid var(--border);
border-radius: 6px;
}
.typed {
overflow: hidden;
white-space: nowrap;
}
.email {
width: 15ch;
animation: type-email 8s infinite;
}
.password {
width: 8ch;
animation: type-password 8s infinite;
}
.screen .btn {
justify-self: end;
height: 28px;
line-height: 20px;
animation: press 8s infinite;
}
.toast {
position: absolute;
left: 12px;
bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
padding: 4px 10px;
border: 1px solid var(--c);
border-radius: 6px;
background: color-mix(in srgb, var(--c) 16%, var(--bg));
font-size: 12px;
animation: toast 8s infinite;
}
.cursor {
position: absolute;
top: 170px;
left: calc(100% - 56px);
display: flex;
align-items: flex-start;
pointer-events: none;
animation: steer 8s infinite;
}
.cursor svg {
width: 18px;
height: 18px;
fill: var(--c);
stroke: var(--bg);
stroke-width: 1;
}
.cursor .tag {
margin: 14px 0 0 -2px;
padding: 0 6px;
border-radius: 4px;
background: var(--c);
color: var(--on-color);
font-size: 11px;
font-weight: 700;
}
.log .row:nth-child(1) {
animation: log-1 8s infinite;
}
.log .row:nth-child(2) {
animation: log-2 8s infinite;
}
.log .row:nth-child(3) {
animation: log-3 8s infinite;
}
.log .row:nth-child(4) {
animation: log-4 8s infinite;
}
.fig .dim {
color: var(--muted);
}
.fig .dim i {
background: var(--border);
}
.app {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
}
.pane {
padding: 12px;
}
.pane + .pane {
border-left: 1px solid var(--border);
}
.pane.behind {
opacity: 0.4;
}
.tabs {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 10px;
}
.sheet {
position: absolute;
top: 0;
bottom: 0;
left: 10%;
right: 50%;
padding: 12px;
border-left: 1px solid var(--c);
background: color-mix(in srgb, var(--c) 8%, var(--bg));
box-shadow: -6px 0 18px color-mix(in srgb, var(--text) 10%, transparent);
}
.sheet .label {
margin-bottom: 6px;
font-weight: 700;
}
.pageview .bar .chip {
margin-left: 0;
}
.mock {
display: grid;
gap: 10px;
}
.mock .cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.mock .cards span {
height: 64px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface);
}
.mock .cards .on {
border-color: var(--c);
background: color-mix(in srgb, var(--c) 14%, var(--bg));
}
.mock .lines span {
display: block;
height: 8px;
margin-top: 6px;
border-radius: 4px;
background: var(--border);
}
.mock .lines span:last-child {
width: 60%;
}
.brow {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.box {
padding: 8px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
color: var(--muted);
text-align: center;
font-weight: 700;
}
.box small {
display: block;
font-size: 12px;
font-weight: 400;
}
.box.mid {
grid-column: 2;
}
.box.on {
border-color: var(--c);
background: color-mix(in srgb, var(--c) 14%, var(--bg));
box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent);
color: var(--text);
}
.link {
width: 0;
height: 22px;
margin: 0 auto;
border-left: 2px dashed var(--c);
}
.highlights {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 14px;
}
@keyframes steer {
0%,
4% {
top: 200px;
left: 25%;
opacity: 0;
}
12%,
32% {
top: 84px;
left: 55%;
opacity: 1;
}
40%,
52% {
top: 128px;
left: 55%;
}
60%,
64% {
top: 170px;
left: calc(100% - 56px);
transform: none;
}
62% {
transform: scale(0.85);
}
92% {
opacity: 1;
}
100% {
top: 170px;
left: calc(100% - 56px);
opacity: 0;
}
}
@keyframes type-email {
0%,
12% {
width: 0;
animation-timing-function: steps(15);
}
30%,
92% {
width: 15ch;
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes type-password {
0%,
40% {
width: 0;
animation-timing-function: steps(8);
}
50%,
92% {
width: 8ch;
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes press {
0%,
61%,
64%,
100% {
transform: none;
}
62% {
transform: scale(0.92);
}
}
@keyframes toast {
0%,
64% {
opacity: 0;
transform: translateY(6px);
}
68%,
92% {
opacity: 1;
transform: none;
}
100% {
opacity: 0;
}
}
@keyframes log-1 {
0%,
6% {
opacity: 0;
}
8%,
92% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes log-2 {
0%,
30% {
opacity: 0;
}
32%,
92% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes log-3 {
0%,
50% {
opacity: 0;
}
52%,
92% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes log-4 {
0%,
66% {
opacity: 0;
}
68%,
92% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes pulse {
50% {
opacity: 0.3;
}
}
@keyframes flow {
to {
stroke-dashoffset: -12;
}
}
@media (prefers-reduced-motion: reduce) {
.fig .live,
.wires path,
.graph .branch,
.typed,
.screen .btn,
.toast,
.cursor,
.log .row {
animation: none;
}
.more {
transition: none;
}
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
animation: none;
}
}
.features .red {
--c: var(--red);
}
.features .orange {
--c: var(--orange);
}
.features .green {
--c: var(--green);
}
.features .cyan {
--c: var(--cyan);
}
.features .purple {
--c: var(--purple);
}
.features .blue {
--c: var(--blue);
}
@media (max-width: 900px) {
.features {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 560px) {
h1 {
text-wrap: balance;
}
h1 br {
display: none;
}
.features {
grid-template-columns: 1fr;
}
.features .wide {
grid-column: auto;
}
.split,
.diagram,
.pipeline {
grid-template-columns: 1fr;
gap: 16px;
}
.wires {
display: none;
}
.clients {
grid-template-rows: none;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.client .bar i {
display: none;
}
.pipeline .stack {
grid-template-rows: none;
}
.points {
grid-template-columns: 1fr;
gap: 14px;
}
}
ol {
margin: 0;
padding-left: 24px;
max-width: 48em;
}
ol li + li {
margin-top: 12px;
}
ol li::marker {
color: var(--accent);
font-weight: 700;
}
footer {
margin-top: 72px;
padding-top: 24px;
border-top: 1px solid var(--border);
color: var(--muted);
font-size: 14px;
}
</style>
</head>
<body>
<main>
<header>
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Crect width='36' height='36' fill='%231c1f23'/%3E%3Cg transform='translate(2 2.5)' stroke='%23a9b1bc' stroke-width='1.5'%3E%3Cline x1='16' y1='16' x2='16' y2='4'/%3E%3Cline x1='16' y1='16' x2='27.4' y2='12.3'/%3E%3Cline x1='16' y1='16' x2='23.1' y2='25.7'/%3E%3Cline x1='16' y1='16' x2='8.9' y2='25.7'/%3E%3Cline x1='16' y1='16' x2='4.6' y2='12.3'/%3E%3C/g%3E%3Cg transform='translate(2 2.5)'%3E%3Ccircle fill='%233d7dff' cx='16' cy='16' r='6'/%3E%3Ccircle fill='%23ff3b4e' cx='16' cy='4' r='3.5'/%3E%3Ccircle fill='%23ff9500' cx='27.4' cy='12.3' r='3.5'/%3E%3Ccircle fill='%2334d058' cx='23.1' cy='25.7' r='3.5'/%3E%3Ccircle fill='%23b05cff' cx='8.9' cy='25.7' r='3.5'/%3E%3Ccircle fill='%2300d5f0' cx='4.6' cy='12.3' r='3.5'/%3E%3C/g%3E%3C/svg%3E" alt="">
<h1>A crew of coding agents, <br><span>on all your Macs.</span></h1>
<p class="lede">byre runs Claude Code, Codex and Antigravity side by side on one Mac, each on its own branch and worktree, with a lead agent that watches them all and tells you what needs you. Pick up from whichever Mac you're at.</p>
<a class="download" href="https://dl.byre.run/byre.dmg">Download for macOS</a>
</header>
<h2>What it does</h2>
<ul class="features">
<li class="hero"><details name="feature">
<summary><h3>One server, every Mac</h3><p>The agents run on one Mac that stays on, such as a Mac mini in a closet. Open byre on your laptop, your desk Mac, or all of them at once: each shows the same tasks, questions and transcripts live. Close the laptop and the agents keep working.</p><span class="more"></span></summary>
<div class="detail">
<div class="fig diagram" aria-hidden="true">
<div class="win server">
<div class="label">Mac mini<span>in the closet</span></div>
<ul>
<li class="row green"><i class="live"></i>fix-login<span class="end">working</span></li>
<li class="row green"><i class="live"></i>website<span class="end">working</span></li>
<li class="row red"><i></i>deploy<span class="end">needs you</span></li>
<li class="row cyan"><i></i>search<span class="end">in review</span></li>
</ul>
</div>
<svg class="wires" viewBox="0 0 100 300" preserveAspectRatio="none">
<path d="M0 150 C50 150 50 50 100 50"/>
<path d="M0 150 L100 150"/>
<path class="off" d="M0 150 C50 150 50 250 100 250"/>
</svg>
<div class="clients">
<div class="win client"><div class="bar"><i></i><i></i><i></i>MacBook Air</div><div class="rows"><span class="green"></span><span class="green"></span><span class="red"></span><span class="cyan"></span></div></div>
<div class="win client"><div class="bar"><i></i><i></i><i></i>iMac</div><div class="rows"><span class="green"></span><span class="green"></span><span class="red"></span><span class="cyan"></span></div></div>
<div class="win client asleep"><div class="bar"><i></i><i></i><i></i>MacBook Pro</div><div class="rows">lid closed</div></div>
</div>
</div>
<ul class="points">
<li><strong>In sync to the second</strong> Answer a question on the laptop and it's gone from the iMac before you turn around.</li>
<li><strong>Clock out, they don't</strong> The crew lives on the server, so go home and come back to finished work.</li>
<li><strong>From anywhere</strong> byre talks over Tailscale, so the closet Mac is one click from the coffee shop.</li>
</ul>
</div>
</details></li>
<li class="wide purple"><details name="feature">
<summary><h3>Every server, every project</h3><p>One server or five, every project shows up in one window, color-coded, on every Mac on your iCloud account.</p><span class="more"></span></summary>
<div class="detail">
<div class="fig split" aria-hidden="true">
<div class="win servers">
<div class="bar"><i></i><i></i><i></i>byre</div>
<div class="body">
<ul>
<li class="row on purple"><i></i><b>mac-mini</b><span class="end">3 projects</span></li>
</ul>
<ul class="projects">
<li>byre</li>
<li>website</li>
<li>infra</li>
</ul>
<ul>
<li class="row cyan"><i></i>studio<span class="end">2 projects</span></li>
<li class="row orange"><i></i>build-box<span class="end">5 projects</span></li>
</ul>
</div>
</div>
<div>
<div class="stack">
<div class="win synced"><div class="bar"><i></i><i></i><i></i>MacBook Air</div><div class="body"><span class="chip purple"><i></i>mac-mini</span><span class="chip cyan"><i></i>studio</span><span class="chip orange"><i></i>build-box</span></div></div>
<div class="win synced"><div class="bar"><i></i><i></i><i></i>new Mac Studio</div><div class="body"><span class="chip purple"><i></i>mac-mini</span><span class="chip cyan"><i></i>studio</span><span class="chip orange"><i></i>build-box</span></div></div>
</div>
<div class="caption">first launch, synced through iCloud</div>
</div>
</div>
<ul class="points">
<li><strong>New Mac, no setup</strong> Your servers are waiting on first launch, with nothing to type in.</li>
<li><strong>Hop between them</strong> A picker or a shortcut flips servers and projects without opening another window.</li>
<li><strong>Know where you are</strong> Each server wears its own color, so a glance tells you which one you're on.</li>
</ul>
</div>
</details></li>
<li class="green"><details name="feature">
<summary><h3>Tasks</h3><p>Start one for every idea. Each gets its own branch and worktree, so ten agents never step on each other, and you can chime in while it works.</p><span class="more"></span></summary>
<div class="detail">
<div class="fig split" aria-hidden="true">
<div class="stack">
<div class="win task"><div class="body"><span class="name">fix-login</span><span class="chip">⎇ byre/fix-login</span><span class="chip">own worktree</span><span class="chip">Claude Code</span></div></div>
<div class="win task"><div class="body"><span class="name">website</span><span class="chip">⎇ byre/website</span><span class="chip">own worktree</span><span class="chip">Codex</span></div></div>
<div class="win task"><div class="body"><span class="name">search</span><span class="chip">⎇ byre/search</span><span class="chip">own worktree</span><span class="chip">Antigravity</span></div></div>
</div>
<div class="win">
<div class="bar"><i></i><i></i><i></i>fix-login</div>
<div class="body">
<div class="msg">Moving sessions to the new table and copying the old rows across…</div>
<div class="msg you">keep the old column until the migration ships</div>
<div class="msg">Got it, I'll leave <b>legacy_id</b> in place and finish the copy.</div>
<div class="row"><i class="live"></i><span class="muted">working</span></div>
</div>
</div>
</div>
<ul class="points">
<li><strong>Any agent you like</strong> Claude Code, Codex or Antigravity, with the model picked per task.</li>
<li><strong>Interrupt politely</strong> Send a note mid-turn and the agent folds it in without starting over.</li>
<li><strong>Shell included</strong> Open terminals in the task's worktree, and save the commands you run often.</li>
</ul>
</div>
</details></li>
<li class="orange"><details name="feature">
<summary><h3>Lead agent</h3><p>One agent watches every task, points you at what needs you, and starts, merges or discards tasks when you ask.</p><span class="more"></span></summary>
<div class="detail">
<div class="fig" aria-hidden="true">
<div class="win">
<div class="bar"><i></i><i></i><i></i>Lead</div>
<div class="body">
<div class="msg">Three tasks need you:
<ul>
<li class="row red"><i></i><b>deploy</b><span class="muted">has a question about cache lifetime</span></li>
<li class="row orange"><i></i><b>website</b><span class="muted">is ready to merge</span></li>
<li class="row cyan"><i></i><b>search</b><span class="muted">got two review findings</span></li>
</ul>
</div>
<div class="msg you">merge website, and start a task to add dark mode to the docs</div>
<div class="msg">Merging website now. Started <b>docs dark mode</b>; I'll tell you when it needs you.</div>
</div>
</div>
</div>
<ul class="points">
<li><strong>The short version</strong> Ask what happened while you were out and get it task by task, in a few lines.</li>
<li><strong>Learns how you work</strong> It keeps notes on your preferences and steers every agent by them.</li>
<li><strong>Just say it</strong> "Merge website and start a dark-mode task" is a whole request, not a to-do list.</li>
</ul>
</div>
</details></li>
<li class="wide red"><details name="feature">
<summary><h3>Questions, not interruptions</h3><p>When an agent needs a decision, it lays out the options and recommends one. A notification brings you straight to it; pick an answer and the agent carries on. Every option says what you get and what you give up, so the call takes seconds.</p><span class="more"></span></summary>
<div class="detail">
<div class="fig split" aria-hidden="true">
<div class="win">
<div class="bar"><i></i><i></i><i></i>deploy · question</div>
<div class="body">
<b>How long should the download page be cached?</b>
<div class="option">1 hour<span class="muted">fresh, more load</span></div>
<div class="option on">1 day<span class="chip on">recommended</span></div>
<div class="option">1 week<span class="muted">stale after a release</span></div>
</div>
</div>
<div class="notif">
<div class="app"></div>
<div>
<b>byre · deploy</b>
<div class="muted">How long should the download page be cached?</div>
</div>
</div>
</div>
<ul class="points">
<li><strong>Seconds, not meetings</strong> The trade-offs are spelled out, so you can decide between sips of coffee.</li>
<li><strong>Opinionated</strong> The agent marks the option it would take, so agreeing is a single click.</li>
<li><strong>Wherever you are</strong> The notification finds you on whichever Mac you're using.</li>
</ul>
</div>
</details></li>
<li class="wide blue"><details name="feature">
<summary><h3>Room to focus</h3><p>Two panes, side by side: your lead on the left, one task on the right. No sidebars, no toolbars, no maze of panels. Diffs, files and terminals slide in when you ask for them and slide away when you're done.</p><span class="more"></span></summary>
<div class="detail">
<div class="fig" aria-hidden="true">
<div class="win">
<div class="bar"><i></i><i></i><i></i>byre</div>
<div class="app">
<div class="pane behind">
<div class="tabs"><span class="chip on">Lead</span><span class="chip">Notes</span><span class="chip">Status</span></div>
<div class="msg">search has two review findings; it's fixing one.</div>
<div class="msg you">show me what changed</div>
</div>
<div class="pane">
<div class="tabs"><span class="chip on">search</span><span class="chip">⌘K</span></div>
<div class="msg">Escaping quotes in the search query now.</div>
<div class="row"><i class="live"></i><span class="muted">working</span></div>
</div>
<div class="sheet">
<div class="label">search · Changes</div>
<div class="row">index/build.go<span class="end"><span class="plus">+48</span> <span class="minus">−12</span></span></div>
<div class="row">index/query.go<span class="end"><span class="plus">+6</span> <span class="minus">−1</span></span></div>
</div>
</div>
</div>
</div>
<ul class="points">
<li><strong>Nothing to arrange</strong> No panels to drag or resize: the same layout on a laptop and a 6K display.</li>
<li><strong>Peek, then back</strong> Pull up a diff over the lead, take a look, and click the strip beside it to put it away.</li>
<li><strong>⌘K to anywhere</strong> Type a few letters to jump to any task in any project.</li>
</ul>
</div>
</details></li>
<li class="cyan"><details name="feature">
<summary><h3>See what they built</h3><p>Mockups, previews, PDFs and images open right next to the conversation, in tabs you can flip between.</p><span class="more"></span></summary>
<div class="detail">
<div class="fig split" aria-hidden="true">
<div class="win">
<div class="bar"><i></i><i></i><i></i>website</div>
<div class="body">
<div class="msg">Two takes on the pricing page are in the page view.</div>
<div class="msg you">the second one, with yearly prices</div>
<div class="row"><i class="live"></i><span class="muted">working</span></div>
</div>
</div>
<div class="win pageview">
<div class="bar"><span class="chip">pricing-a.html</span><span class="chip on">pricing-b.html</span></div>
<div class="body mock">
<b>Simple pricing</b>
<div class="cards"><span></span><span class="on"></span><span></span></div>
<div class="lines"><span></span><span></span></div>
</div>
</div>
</div>
<ul class="points">
<li><strong>No browser shuffle</strong> Nothing lands in a stray browser window; it stays with the task that made it.</li>
<li><strong>Pick a favorite</strong> Ask for three takes on a design and choose with all of them in front of you.</li>
<li><strong>Still there later</strong> The Page tab keeps the last page one click away.</li>
</ul>
</div>
</details></li>
<li class="wide purple"><details name="feature">
<summary><h3>Step away, they keep going</h3><p>Flip on Away and agents stop waiting on you: each one makes its best call and keeps working. Back at your desk? Answer any question they asked, and byre forks the task from that moment with your answer.</p><span class="more"></span></summary>
<div class="detail">
<div class="fig split" aria-hidden="true">
<div class="win">
<div class="bar"><i></i><i></i><i></i>deploy<span class="chip on">AWAY · click when back</span></div>
<div class="body">
<b>How long should the download page be cached?</b>
<div class="option on">1 day<span class="chip on">agent's pick</span></div>
<div class="option">1 hour</div>
<div class="row"><i class="live"></i><span class="muted">kept working while you were away</span></div>
</div>
</div>
<div>
<div class="win">
<div class="bar"><i></i><i></i><i></i>deploy · you're back</div>
<div class="body">
<div class="option">1 day</div>
<div class="option on">1 hour<span class="chip on">your answer</span></div>
</div>
</div>
<div class="fork"><div class="win"><div class="bar"><i></i><i></i><i></i>new task</div><div class="body"><b>deploy: cache for 1 hour</b><div class="muted">forked with your answer</div></div></div></div>
</div>
</div>
<ul class="points">
<li><strong>Lunch, not a standstill</strong> Come back to an hour of progress instead of a pile of questions.</li>
<li><strong>Second thoughts welcome</strong> If you'd have chosen differently, the fork picks up from exactly where the agent chose.</li>
<li><strong>No guessing on secrets</strong> Passwords, permissions and test results still wait for you.</li>
</ul>
</div>
</details></li>
<li class="green"><details name="feature">
<summary><h3>Snapshots and forks</h3><p>Step through a task's snapshots, diff any of them, and fork a new task from any one, conversation included.</p><span class="more"></span></summary>
<div class="detail">
<div class="fig snaps" aria-hidden="true">
<div class="split">
<div>
<div class="timeline"><span class="node">#1</span><span class="node">#2</span><span class="node on">#3</span><span class="node">#4</span><span class="node">#5</span></div>
<div class="fork"><div class="win"><div class="bar"><i></i><i></i><i></i>new task</div><div class="body"><b>search: try SQLite FTS instead</b><div class="muted">forked from #3, conversation included</div></div></div></div>
</div>
<div class="win diff">
<div class="bar"><i></i><i></i><i></i>diff #2 → #3</div>
<div class="body">
<div class="row">index/build.go<span class="end"><span class="plus">+48</span> <span class="minus">−12</span></span></div>
<div class="row">index/query.go<span class="end"><span class="plus">+21</span> <span class="minus">−30</span></span></div>
<div class="row">docs/search.md<span class="end"><span class="plus">+9</span> <span class="minus">−2</span></span></div>
</div>
</div>
</div>
</div>
<ul class="points">
<li><strong>Nothing lost</strong> Every turn that changes files leaves a snapshot, so no step is ever overwritten.</li>
<li><strong>Compare anything</strong> Line a snapshot up against the one before it, or against the default branch.</li>
<li><strong>What if?</strong> Curious how another approach would have gone? Branch off an earlier point and try it.</li>
</ul>
</div>
</details></li>
<li class="wide cyan"><details name="feature">
<summary><h3>Reviews</h3><p>Every change gets a second opinion. Reviewers check each turn's work; the agent fixes what holds up, explains what it skips, and you can overrule it with a click.</p><span class="more"></span></summary>
<div class="detail">
<div class="fig" aria-hidden="true">
<div class="flow"><span class="chip">Claude Code turn</span><span class="arrow">→</span><span class="chip">snapshot 3</span><span class="arrow">→</span><span class="chip on">Codex review</span><span class="arrow">→</span><span class="chip">agent triages</span></div>
<div class="win">
<div class="bar"><i></i><i></i><i></i>search · review of snapshot 3</div>
<div class="body">
<div class="finding red"><i></i><b>A quote in the query breaks the search</b><span class="chip">medium</span><div class="reply"><span class="chip green on">fixing</span>Escaping the query before it reaches the index.</div></div>
<div class="finding orange"><i></i><b>Rename cfg to config</b><span class="chip">low</span><div class="reply"><span class="chip">ignoring</span>Matches the surrounding code.<span class="btn ghost">Fix it anyway</span></div></div>
</div>
</div>
</div>
<ul class="points">
<li><strong>Mix your models</strong> Have Codex check Claude Code's work, or the other way around.</li>
<li><strong>Argued, not obeyed</strong> The agent pushes back on findings it thinks are wrong, and shows its reasoning.</li>
<li><strong>You break ties</strong> Side with the reviewer and the fix is underway.</li>
</ul>
</div>
</details></li>
<li><details name="feature">
<summary><h3>One-click merge</h3><p>Click Merge and you're done: the agent sorts out any conflicts, and the whole task lands as one clean commit.</p><span class="more"></span></summary>
<div class="detail">
<div class="fig split squash" aria-hidden="true">
<div class="win ready">
<div class="bar"><i></i><i></i><i></i>avatars</div>
<div class="body">
<span class="chip on">ready to merge</span>
<b>Let people upload a profile photo</b>
<span class="muted">Photos are cropped to a square and resized, and initials show until one is set.</span>
<span class="btn">Merge</span>
</div>
</div>
<div class="graph">
<svg viewBox="0 0 300 120">
<path class="line" d="M10 95 H290"/>
<path class="branch" d="M60 95 C85 95 85 30 110 30 H210 C235 30 235 95 260 95"/>
<circle class="old" cx="30" cy="95" r="6"/>
<circle class="old" cx="60" cy="95" r="6"/>
<circle class="turn" cx="115" cy="30" r="4"/>
<circle class="turn" cx="138" cy="30" r="4"/>
<circle class="turn" cx="161" cy="30" r="4"/>
<circle class="turn" cx="184" cy="30" r="4"/>
<circle class="turn" cx="207" cy="30" r="4"/>
<circle class="new" cx="260" cy="95" r="9"/>
</svg>
<div class="legend"><span>5 turns on byre/avatars</span><span><b>1 commit on the default branch</b></span></div>
</div>
</div>
<ul class="points">
<li><strong>History you can read</strong> Five turns of back-and-forth become a single change with a real title.</li>
<li><strong>Land it and keep going</strong> Merge the work so far and carry on in the same task.</li>
<li><strong>A short list</strong> Merged tasks close themselves, so only live work stays in view.</li>
</ul>
</div>
</details></li>
<li class="orange"><details name="feature">
<summary><h3>Teams and workflows</h3><p>Big jobs get split up. An agent hands pieces to helpers, or a team builds one change together. Save the pipeline as a workflow and run it again any time.</p><span class="more"></span></summary>
<div class="detail">
<div class="fig pipeline" aria-hidden="true">
<div class="stage"><b>plan</b><span class="muted">one agent</span></div>
<svg class="wires" viewBox="0 0 100 300" preserveAspectRatio="none">
<path d="M0 150 C50 150 50 50 100 50"/>
<path d="M0 150 L100 150"/>
<path d="M0 150 C50 150 50 250 100 250"/>
</svg>
<div class="stack">
<div class="stage"><b>build api</b><span class="muted">Claude Code</span></div>
<div class="stage"><b>build app</b><span class="muted">Codex</span></div>
<div class="stage"><b>write docs</b><span class="muted">Antigravity</span></div>
</div>
<svg class="wires" viewBox="0 0 100 300" preserveAspectRatio="none">
<path d="M0 50 C50 50 50 150 100 150"/>
<path d="M0 150 L100 150"/>
<path d="M0 250 C50 250 50 150 100 150"/>
</svg>
<div class="stage"><b>review</b><span class="muted">all three, together</span></div>
</div>
<ul class="points">
<li><strong>The right agent for each part</strong> Give every stage its own vendor and model.</li>
<li><strong>Drawn, not written</strong> Lay out stages in the app's workflow editor; there's no config file to write.</li>
<li><strong>Back together</strong> Parallel stages meet at a final stage that sees all of their work.</li>
</ul>
</div>
</details></li>
<li class="wide purple"><details name="feature">
<summary><h3>Hands on your Macs</h3><p>Agents don't just say it works, they check. They see the screen and click through what they built, on any Mac running byre, before calling it done.</p><span class="more"></span></summary>
<div class="detail">
<div class="fig hands" aria-hidden="true">
<div class="split">
<div class="win screen">
<div class="bar"><i></i><i></i><i></i>your app · on the iMac</div>
<div class="body">
<b class="title">Sign in</b>
<div class="field"><span class="muted">Email</span><span class="typed email">ada@example.com</span></div>
<div class="field"><span class="muted">Password</span><span class="typed password">••••••••</span></div>
<span class="btn">Sign in</span>
</div>
<div class="toast green"><i></i>Signed in as Ada</div>
<div class="cursor"><svg viewBox="0 0 16 16"><path d="M2 1 L2 14 L5.5 10.5 L8 15 L10 14 L7.5 9.5 L12.5 9.5 Z"/></svg><span class="tag">fix-login</span></div>
</div>
<div class="win">
<div class="bar"><i></i><i></i><i></i>fix-login</div>
<div class="body log">
<div class="row"><i></i>found the Sign in window</div>
<div class="row"><i></i>typed a test email</div>
<div class="row"><i></i>typed the password</div>
<div class="row green"><i></i>clicked Sign in: it works</div>
</div>
</div>
</div>
</div>
<ul class="points">
<li><strong>The real thing</strong> They type into, click and scroll the actual app, not a mock of it.</li>
<li><strong>On the web too</strong> They drive a browser to test pages end to end.</li>
<li><strong>Even while it sleeps</strong> byre wakes the server's display when an agent needs to look.</li>
</ul>
</div>
</details></li>
<li class="red"><details name="feature">
<summary><h3>Diagrams, not walls of text</h3><p>Agents explain a design with a real diagram, drawn right in the conversation. Zoom in, and click a box to trace what it touches.</p><span class="more"></span></summary>
<div class="detail">
<div class="fig" aria-hidden="true">
<div class="win">
<div class="bar"><i></i><i></i><i></i>search · how a query flows<span class="chip">click to zoom</span></div>
<div class="body">
<div class="brow"><span class="box mid on">app<small>search box</small></span></div>
<div class="link"></div>
<div class="brow"><span class="box">auth<small>sessions</small></span><span class="box on">api<small>/search</small></span><span class="box">billing<small>plans</small></span></div>
<div class="link"></div>
<div class="brow"><span class="box">cache<small>one day</small></span><span class="box on">index<small>SQLite FTS</small></span><span class="box">logs<small>queries</small></span></div>
<div class="highlights"><span class="chip on">Query path</span><span class="chip">Sign-in</span><span class="chip">Billing</span></div>
</div>
</div>
</div>
<ul class="points">
<li><strong>Big picture first</strong> Get the shape of a change before you read a line of it.</li>
<li><strong>Up close</strong> Open any diagram full size and pinch into the detail.</li>
<li><strong>Guided tours</strong> Agents name highlights like "Query path" that light up one flow at a time.</li>
</ul>
</div>
</details></li>
<li class="wide green"><details name="feature">
<summary><h3>Work that starts itself</h3><p>Schedule the chores: a dependency bump every Monday, a test sweep every night. And the newest work on your default branch gets audited in the background, without a word from byre unless it finds something.</p><span class="more"></span></summary>
<div class="detail">
<div class="fig split" aria-hidden="true">
<div class="win">
<div class="bar"><i></i><i></i><i></i>website · schedules</div>
<div class="body">
<ul>
<li class="row"><i></i><b>bump dependencies</b><span class="end">Mondays at 9:00</span></li>
<li class="row"><i></i><b>flaky test sweep</b><span class="end">Daily at 2:00</span></li>
<li class="row"><i></i><b>release notes</b><span class="end">Monthly on the 1st at 8:00</span></li>
</ul>
</div>
</div>
<div class="win">
<div class="bar"><i></i><i></i><i></i>audits of main</div>
<div class="body">
<ul>
<li class="row dim"><i></i>a3f9c21<span class="end">nothing found</span></li>
<li class="row dim"><i></i>7be0d44<span class="end">nothing found</span></li>
<li class="row orange"><i class="live"></i><b>e41c0a9</b><span class="end">found a leak · needs you</span></li>
</ul>
</div>
</div>
</div>
<ul class="points">
<li><strong>On the clock</strong> Hourly, daily, on the weekdays you pick, or monthly, with one agent or a whole workflow.</li>
<li><strong>Bring your own auditor</strong> Any workflow can be the audit: a security pass, a docs check, whatever you care about.</li>
<li><strong>Only the findings</strong> An audit with nothing to report puts itself away.</li>
</ul>
</div>
</details></li>
</ul>
<h2>Getting started</h2>
<ol>
<li><a href="https://dl.byre.run/byre.dmg">Download byre</a>, sign in to Tailscale, and click <strong>Run byre on this Mac</strong>.</li>
<li>Open it on every other Mac you own. Your crew is already there.</li>
</ol>
<footer>
byre is Apache 2.0 licensed. <a href="https://g.fc.run/ai/byre">Source</a> · <a href="https://g.fc.run/ai/byre/releases">Releases</a>
</footer>
</main>
<script>
for (const [i, el] of [...document.querySelectorAll(".features > li, main > h2, main > ol, footer")].entries()) {
el.style.viewTransitionName = `block-${i}`;
}
for (const summary of document.querySelectorAll(".features summary")) {
summary.addEventListener("click", (event) => {
event.preventDefault();
const details = summary.parentElement;
document.startViewTransition(() => {
details.open = !details.open;
});
});
}
</script>
</body>
</html>