Update byre.run with recent features

TODO.md

@@ -12,6 +12,9 @@
 
 # M6 — Fan-out
 
+- Loopback address per task instead of port blocks
+  Give each task its own loopback address (127.0.0.10, 127.0.0.11, …) where it runs servers on their usual ports, in place of the ten-port block it gets now. On macOS only 127.0.0.1 is configured on lo0: binding 127.0.0.10 fails with "Can't assign requested address" (errno 49) until an alias is added (`sudo ifconfig lo0 alias 127.0.0.10 up`), and aliases are gone after a reboot. So byre needs a root step that adds the aliases at every boot (a LaunchDaemon installed with the app, or the server's install step), and a check that they're there. Test it first: add an alias, bind a server to it on a common port while another task holds the same port on another address, and confirm the preview forwards and `expose_port` work with it.
+
 # M7 — Inbox triage
 
 

site/index.html

@@ -751,6 +751,119 @@ details[open] .more {
 .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% {
@@ -1044,15 +1157,15 @@ footer {
 </div>
 </div>
 <ul class="points">
-<li><strong>Live on every screen.</strong> Answer a question on the laptop and it's gone from the iMac the same second.</li>
+<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>Close the lid.</strong> The crew lives on the server, so shut the laptop and come back to finished work.</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>
+<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>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 color.</p><span class="more"></span></summary>
+<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">
@@ -1081,21 +1194,21 @@ footer {
 </div>
 </div>
 <ul class="points">
-<li><strong>Already there.</strong> Servers sync through iCloud, so a new Mac finds them all on first launch.</li>
+<li><strong>New Mac, no setup</strong> Your servers are waiting on first launch, with nothing to type in.</li>
-<li><strong>One window.</strong> Switch between every server and all of its projects without leaving it.</li>
+<li><strong>Hop between them</strong> A picker or a shortcut flips servers and projects without opening another window.</li>
-<li><strong>Color-coded.</strong> Each server wears its own color, so you always know which one you're on.</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>Every task gets its own git worktree, branch and port block. Talk to its agent in a live transcript, even mid-turn.</p><span class="more"></span></summary>
+<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">ports 41000–41009</span></div></div>
+<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">ports 41010–41019</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">ports 41020–41029</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>
@@ -1108,9 +1221,9 @@ footer {
 </div>
 </div>
 <ul class="points">
-<li><strong>Isolated.</strong> Its own worktree, branch and ports, so parallel tasks never collide.</li>
+<li><strong>Any agent you like</strong> Claude Code, Codex or Antigravity, with the model picked per task.</li>
-<li><strong>Talk mid-turn.</strong> Message the agent while it works and it takes the note on board.</li>
+<li><strong>Interrupt politely</strong> Send a note mid-turn and the agent folds it in without starting over.</li>
-<li><strong>As many as you like.</strong> Start another whenever an idea strikes; they all run at once.</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>
@@ -1135,9 +1248,9 @@ footer {
 </div>
 </div>
 <ul class="points">
-<li><strong>Watches everything.</strong> Every task's turns, questions and reviews pass by the lead.</li>
+<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>Knows what needs you.</strong> It tells you which tasks are waiting on you, and why.</li>
+<li><strong>Learns how you work</strong> It keeps notes on your preferences and steers every agent by them.</li>
-<li><strong>Does the legwork.</strong> Ask it to start, message, merge or discard tasks, and it does.</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>
@@ -1164,9 +1277,71 @@ footer {
 </div>
 </div>
 <ul class="points">
-<li><strong>Options laid out.</strong> Every choice comes with what you get and what you give up.</li>
+<li><strong>Seconds, not meetings</strong> The trade-offs are spelled out, so you can decide between sips of coffee.</li>
-<li><strong>A recommendation.</strong> The agent always says which option it would pick, and why.</li>
+<li><strong>Opinionated</strong> The agent marks the option it would take, so agreeing is a single click.</li>
-<li><strong>Never miss one.</strong> A notification lands the moment a question does, a click away.</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>
@@ -1196,9 +1371,9 @@ footer {
 </div>
 </div>
 <ul class="points">
-<li><strong>Never stalled.</strong> Questions don't wait on you: each agent makes its best call and keeps going.</li>
+<li><strong>Lunch, not a standstill</strong> Come back to an hour of progress instead of a pile of questions.</li>
-<li><strong>Your call still counts.</strong> Answer when you're back and byre forks the task from that moment.</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>
+<li><strong>No guessing on secrets</strong> Passwords, permissions and test results still wait for you.</li>
 </ul>
 </div>
 </details></li>
@@ -1223,36 +1398,36 @@ footer {
 </div>
 </div>
 <ul class="points">
-<li><strong>Every step kept.</strong> Each turn that changes files leaves a snapshot behind it.</li>
+<li><strong>Nothing lost</strong> Every turn that changes files leaves a snapshot, so no step is ever overwritten.</li>
-<li><strong>See each step.</strong> See what changed in each snapshot, or compare it with the default branch.</li>
+<li><strong>Compare anything</strong> Line a snapshot up against the one before it, or against the default branch.</li>
-<li><strong>Fork the past.</strong> Start a new task from any snapshot, conversation included.</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>Choose a review workflow for each project. Its reviewers check the task's work after each turn that changes files. 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><span class="more"></span></summary>
+<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>Port block isn't freed when a task is discarded</b><span class="chip">medium</span><div class="reply"><span class="chip green on">fixing</span>Releasing it in the discard path.</div></div>
+<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>A second opinion.</strong> Your chosen reviewers check the task's work after each turn that changes files.</li>
+<li><strong>Mix your models</strong> Have Codex check Claude Code's work, or the other way around.</li>
-<li><strong>Triaged for you.</strong> The agent fixes what holds up and explains what it leaves.</li>
+<li><strong>Argued, not obeyed</strong> The agent pushes back on findings it thinks are wrong, and shows its reasoning.</li>
-<li><strong>Your call.</strong> Overrule any finding it skipped with one click and it gets fixed.</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>The agent merges the default branch in and resolves conflicts, then byre squashes, pushes and closes the task.</p><span class="more"></span></summary>
+<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">
@@ -1281,15 +1456,15 @@ footer {
 </div>
 </div>
 <ul class="points">
-<li><strong>Conflicts handled.</strong> The agent merges the default branch in and works through any conflicts.</li>
+<li><strong>History you can read</strong> Five turns of back-and-forth become a single change with a real title.</li>
-<li><strong>One clean commit.</strong> The whole task lands on the default branch as a single squashed commit.</li>
+<li><strong>Land it and keep going</strong> Merge the work so far and carry on in the same task.</li>
-<li><strong>Then it's done.</strong> byre pushes and closes the task, so your list stays short.</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>Agents spawn subtasks or share a worktree as a team. Workflows chain stages with fan-out and fan-in.</p><span class="more"></span></summary>
+<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>
@@ -1311,15 +1486,15 @@ footer {
 <div class="stage"><b>review</b><span class="muted">all three, together</span></div>
 </div>
 <ul class="points">
-<li><strong>Subtasks.</strong> An agent hands off pieces of work to new agents on their own branches.</li>
+<li><strong>The right agent for each part</strong> Give every stage its own vendor and model.</li>
-<li><strong>Teams.</strong> Several agents share one worktree and build the same change together.</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>Workflows.</strong> Save a pipeline once: stages fan out, fan back in, and run again.</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 can see and drive the Mac byre runs on, and the Macs you have the app open on, when a task needs it. They click through what they just built and check it works before telling you it's done.</p><span class="more"></span></summary>
+<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">
@@ -1346,9 +1521,66 @@ footer {
 </div>
 </div>
 <ul class="points">
-<li><strong>Sees the screen.</strong> Agents read screenshots and every window's controls.</li>
+<li><strong>The real thing</strong> They type into, click and scroll the actual app, not a mock of it.</li>
-<li><strong>Drives the Mac.</strong> They click, type and browse to try what they just built.</li>
+<li><strong>On the web too</strong> They drive a browser to test pages end to end.</li>
-<li><strong>Your Macs too.</strong> Any Mac with byre's app open can lend the agents a hand.</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>