From b72b4eda7f039acd2bc565dc3d6b8310160b77c7 Mon Sep 17 00:00:00 2001
From: Ian Gulliver <git@flamingcow.io>
Date: Mon, 19 Oct 2026 19:43:47 -0700
Subject: [PATCH] Rework byre.run: rainbow palette, bento features,
 remote-server pitch

---
 site/index.html | 131 +++++++++++++++++++++++++++++++++++-------------
 1 file changed, 95 insertions(+), 36 deletions(-)

diff --git a/site/index.html b/site/index.html
index 8ae4697..0257ae2 100644
--- a/site/index.html
+++ b/site/index.html
@@ -4,7 +4,7 @@
 <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 your own Mac, each on its own branch, with a lead agent that keeps track of them for you.">
+<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.svg" type="image/svg+xml">
 <style>
 @font-face {
@@ -24,8 +24,15 @@
 	--border: #d6d9de;
 	--text: #16181b;
 	--muted: #4a5260;
-	--accent: #1a45bd;
+	--accent: #1f55d6;
 	--accent-tint: #e7edfb;
+	--blue: #3d7dff;
+	--red: #ff3b4e;
+	--orange: #ff9500;
+	--green: #34d058;
+	--purple: #b05cff;
+	--cyan: #00d5f0;
+	--tint: 7%;
 }
 @media (prefers-color-scheme: dark) {
 	:root {
@@ -36,6 +43,7 @@
 		--muted: #a9b1bc;
 		--accent: #8ab4ff;
 		--accent-tint: #1e2a40;
+		--tint: 10%;
 	}
 }
 * {
@@ -46,6 +54,8 @@ body {
 	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;
@@ -75,18 +85,15 @@ h1 {
 	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;
 }
-.actions {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	gap: 16px 24px;
-}
 .download {
 	display: inline-block;
 	padding: 12px 22px;
@@ -99,37 +106,95 @@ h1 {
 .download:hover {
 	opacity: 0.9;
 }
-.note {
-	color: var(--muted);
-	font-size: 14px;
-}
 h2 {
 	margin: 56px 0 24px;
 	font-size: 22px;
 }
 .features {
 	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+	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: var(--surface);
+	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 p {
 	margin: 0;
 	color: var(--muted);
 	font-size: 14px;
 }
+.features .hero p {
+	max-width: 52em;
+	font-size: 16px;
+}
+.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);
+}
+@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;
+	}
+}
 ol {
 	margin: 0;
 	padding-left: 24px;
@@ -138,12 +203,9 @@ ol {
 ol li + li {
 	margin-top: 12px;
 }
-code {
-	padding: 1px 6px;
-	border-radius: 4px;
-	background: var(--accent-tint);
-	font-family: inherit;
-	font-size: 0.92em;
+ol li::marker {
+	color: var(--accent);
+	font-weight: 700;
 }
 footer {
 	margin-top: 72px;
@@ -158,32 +220,29 @@ footer {
 <main>
 <header>
 <img src="/icon.svg" alt="">
-<h1>A crew of coding agents,<br>running on your Mac.</h1>
-<p class="lede">byre runs Claude Code, Codex and Antigravity side by side, each on its own branch and worktree, with a lead agent that watches them all and tells you what needs you.</p>
-<div class="actions">
+<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>
-<span class="note">Free and open source. Updates itself.</span>
-</div>
 </header>
 
 <h2>What it does</h2>
 <ul class="features">
-<li><h3>Tasks</h3><p>Every task gets its own git worktree, branch and port block. Talk to its agent in a live transcript, even mid-turn.</p></li>
-<li><h3>Lead agent</h3><p>One long-running agent watches every task, points you at what needs you, and starts, messages, merges or discards tasks when you ask.</p></li>
-<li><h3>Questions, not interruptions</h3><p>Agents ask structured questions with a recommended answer. You answer with a click, from an inbox or a notification.</p></li>
-<li><h3>Cross-vendor reviews</h3><p>Every turn that changes files is reviewed by the other vendor's model. You fix or ignore each finding.</p></li>
+<li class="hero"><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></li>
+<li class="wide purple"><h3>Every server, every project</h3><p>Your servers sync through iCloud, so a new Mac finds them on first launch. Switch between servers in one window, each with as many projects as you like and its own colour.</p></li>
+<li class="green"><h3>Tasks</h3><p>Every task gets its own git worktree, branch and port block. Talk to its agent in a live transcript, even mid-turn.</p></li>
+<li class="orange"><h3>Lead agent</h3><p>One long-running agent watches every task, points you at what needs you, and starts, messages, merges or discards tasks when you ask.</p></li>
+<li class="wide red"><h3>Questions, not interruptions</h3><p>When an agent needs a decision, it lays out the options and recommends one. Pick an answer in the inbox or right from the notification, and the agent carries on.</p></li>
+<li class="wide cyan"><h3>Cross-vendor reviews</h3><p>Every turn that changes files is reviewed by the other vendor's model. The agent fixes the findings it agrees with on its own and says why it skips the rest; you can overrule any of them with a click.</p></li>
 <li><h3>One-click merge</h3><p>The agent merges main in and resolves conflicts, then byre squashes, pushes and closes the task.</p></li>
-<li><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></li>
-<li><h3>Subtasks, teams, workflows</h3><p>Agents spawn subtasks or share a worktree as a team. Workflows chain stages with fan-out and fan-in.</p></li>
-<li><h3>Hands on your Macs</h3><p>Agents can see and drive the Mac byre runs on, and the Macs you have the app open on, when a task needs it.</p></li>
+<li class="green"><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></li>
+<li class="orange"><h3>Teams and workflows</h3><p>Agents spawn subtasks or share a worktree as a team. Workflows chain stages with fan-out and fan-in.</p></li>
+<li class="purple"><h3>Hands on your Macs</h3><p>Agents can see and drive the Mac byre runs on, and the Macs you have the app open on, when a task needs it.</p></li>
 </ul>
 
 <h2>Getting started</h2>
 <ol>
-<li>Install <a href="https://tailscale.com">Tailscale</a> on every Mac you'll use. byre serves only your tailnet, and takes your identity from it.</li>
-<li>On the Mac that will run the agents, install <code>git</code>, Node.js, Google Chrome and at least one of the <code>claude</code>, <code>codex</code> and <code>agy</code> CLIs.</li>
-<li><a href="https://dl.byre.run/byre.dmg">Download byre</a>, drag it to Applications, open it and click <strong>Run byre on this Mac</strong>. It checks what's missing and tells you how to install it.</li>
-<li>Open byre on your other Macs. They find the server through iCloud.</li>
+<li><a href="https://dl.byre.run/byre.dmg">Download byre</a> 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>