-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathconnections-primer.html
More file actions
199 lines (184 loc) · 10.8 KB
/
connections-primer.html
File metadata and controls
199 lines (184 loc) · 10.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Why team size compounds — a two-minute primer</title>
<style>
:root{
--bg:#FAF8F3;--surface:#fff;--text:#2C2C2A;--muted:#5F5E5A;--subtle:#B4B2A9;
--border:rgba(44,44,42,0.10);--link:#185FA5;
--blue:#185fa5;--blue-bg:#e6f1fb;--blue-b:#378add;--blue-text:#0c447c;
--red:#cf222e;--red-bg:#fcebeb;--red-b:#e24b4a;--red-text:#791f1f;
--green:#1a7f37;--green-bg:#eaf3de;--green-b:#97c459;--green-text:#27500a;
--amber:#ba7517;--amber-bg:#faeeda;--amber-b:#ef9f27;--amber-text:#633806;
}
@media(prefers-color-scheme:dark){
:root{
--bg:#1A1A18;--surface:#242422;--text:#E8E6DE;--muted:#B4B2A9;--subtle:#5F5E5A;
--border:rgba(255,255,255,0.08);--link:#85B7EB;
--blue:#79c0ff;--blue-bg:#042C53;--blue-b:#85B7EB;--blue-text:#B5D4F4;
--red:#f85149;--red-bg:#501313;--red-b:#F09595;--red-text:#F7C1C1;
--green:#3fb950;--green-bg:#04342C;--green-b:#5DCAA5;--green-text:#9FE1CB;
--amber:#d29922;--amber-bg:#412402;--amber-b:#FAC775;--amber-text:#FAC775;
}
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
background:var(--bg);color:var(--text);font-size:16px;line-height:1.7;}
.page{max-width:640px;margin:0 auto;padding:48px 24px 72px;}
.breadcrumb{font-size:12px;color:var(--subtle);margin-bottom:28px;}
.breadcrumb a{color:var(--subtle);text-decoration:none;}
.breadcrumb a:hover{color:var(--link);}
h1{font-size:28px;font-weight:600;letter-spacing:-.02em;line-height:1.2;margin-bottom:10px;}
.lede{font-size:16px;color:var(--muted);line-height:1.6;margin-bottom:32px;}
p{color:var(--muted);margin-bottom:14px;font-size:15px;}
p strong{color:var(--text);font-weight:500;}
hr{border:none;border-top:.5px solid var(--border);margin:32px 0;}
.stage{margin:28px 0;}
.stage-label{font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;
color:var(--subtle);margin-bottom:12px;}
.dot-row{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap;}
.dot-person{display:flex;flex-direction:column;align-items:center;gap:4px;}
.dot{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;
justify-content:center;font-size:12px;font-weight:600;}
.dot.dev{background:var(--blue-bg);color:var(--blue-text);border:.5px solid var(--blue-b);}
.dot.agent{background:var(--green-bg);color:var(--green-text);border:.5px solid var(--green-b);
width:26px;height:26px;font-size:10px;}
.dot-name{font-size:11px;color:var(--subtle);}
.line-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px;}
.line-chip{font-size:12px;padding:3px 10px;border-radius:20px;}
.line-chip.safe{background:var(--green-bg);color:var(--green-text);border:.5px solid var(--green-b);}
.line-chip.warn{background:var(--amber-bg);color:var(--amber-text);border:.5px solid var(--amber-b);}
.line-chip.danger{background:var(--red-bg);color:var(--red-text);border:.5px solid var(--red-b);}
.count-row{display:flex;align-items:baseline;gap:8px;margin:12px 0 4px;}
.count-big{font-size:32px;font-weight:600;letter-spacing:-.02em;}
.count-label{font-size:14px;color:var(--muted);}
.big-table{width:100%;border-collapse:collapse;margin:16px 0;}
.big-table th{text-align:left;font-size:12px;font-weight:600;text-transform:uppercase;
letter-spacing:.3px;color:var(--subtle);padding:6px 8px;
border-bottom:.5px solid var(--border);}
.big-table td{padding:8px 8px;font-size:14px;border-bottom:.5px solid var(--border);color:var(--muted);}
.big-table td:last-child{font-weight:600;text-align:right;}
.big-table tr.hi td{background:var(--red-bg);color:var(--red-text);}
.big-table tr.hi td:last-child{color:var(--red-text);}
.big-table tr.mid td{background:var(--amber-bg);color:var(--amber-text);}
.big-table tr.mid td:last-child{color:var(--amber-text);}
.callout{border-left:3px solid var(--blue-b);background:var(--blue-bg);
padding:14px 18px;border-radius:0 8px 8px 0;margin:20px 0;
font-size:14px;color:var(--blue-text);line-height:1.6;}
.callout strong{font-weight:600;}
.back-link{display:inline-block;margin-top:32px;font-size:14px;color:var(--link);
text-decoration:none;}
.back-link:hover{text-decoration:underline;}
footer{margin-top:48px;padding-top:18px;border-top:.5px solid var(--border);
font-size:12px;color:var(--subtle);}
footer a{color:var(--subtle);text-decoration:none;}
footer a:hover{color:var(--link);}
</style>
</head>
<body>
<div class="page">
<p class="breadcrumb"><a href="/pick-the-fight.html">← Pick the right fight</a></p>
<h1>Why team size compounds</h1>
<p class="lede">A two-minute explanation for why adding one developer makes coordination harder than it looks — and why AI agents make it dramatically worse.</p>
<hr style="margin-top:0">
<p><strong>The basic idea:</strong> Every person on a team needs to stay in sync with every other person. As you add people, the number of those sync relationships grows much faster than headcount. This isn’t a technology problem — it’s a fundamental property of teams.</p>
<div class="stage">
<div class="stage-label">Step 1 — two developers</div>
<div class="dot-row">
<div class="dot-person"><div class="dot dev">D1</div><div class="dot-name">Dev 1</div></div>
<span style="font-size:20px;color:var(--subtle)">↔</span>
<div class="dot-person"><div class="dot dev">D2</div><div class="dot-name">Dev 2</div></div>
</div>
<div class="line-row">
<span class="line-chip safe">D1 ↔ D2 1 pair</span>
</div>
<p style="font-size:14px">Two developers, one relationship to manage. Easy — a daily standup handles it.</p>
</div>
<div class="stage">
<div class="stage-label">Step 2 — five developers</div>
<div class="dot-row">
<div class="dot-person"><div class="dot dev">D1</div></div>
<div class="dot-person"><div class="dot dev">D2</div></div>
<div class="dot-person"><div class="dot dev">D3</div></div>
<div class="dot-person"><div class="dot dev">D4</div></div>
<div class="dot-person"><div class="dot dev">D5</div></div>
</div>
<div class="line-row">
<span class="line-chip safe">D1↔D2</span>
<span class="line-chip safe">D1↔D3</span>
<span class="line-chip safe">D1↔D4</span>
<span class="line-chip safe">D1↔D5</span>
<span class="line-chip warn">D2↔D3</span>
<span class="line-chip warn">D2↔D4</span>
<span class="line-chip warn">D2↔D5</span>
<span class="line-chip warn">D3↔D4</span>
<span class="line-chip warn">D3↔D5</span>
<span class="line-chip warn">D4↔D5</span>
</div>
<p style="font-size:14px">Five developers, <strong>ten pairs</strong> to keep in sync. Manageable, but you’re starting to need pull requests and structured reviews — not just Slack.</p>
</div>
<div class="stage">
<div class="stage-label">Step 3 — five developers, each running 3 AI agents</div>
<p style="font-size:14px;margin-bottom:12px">Now each developer isn’t working alone — they’re running 3 AI agents in parallel. Each agent is making changes to the codebase. That’s 15 active workers, not 5.</p>
<div class="dot-row" style="gap:6px">
<div class="dot-person"><div class="dot dev" style="font-size:10px">D1</div>
<div style="display:flex;gap:3px;margin-top:3px">
<div class="dot agent">A</div><div class="dot agent">A</div><div class="dot agent">A</div>
</div>
</div>
<div class="dot-person"><div class="dot dev" style="font-size:10px">D2</div>
<div style="display:flex;gap:3px;margin-top:3px">
<div class="dot agent">A</div><div class="dot agent">A</div><div class="dot agent">A</div>
</div>
</div>
<div class="dot-person"><div class="dot dev" style="font-size:10px">D3</div>
<div style="display:flex;gap:3px;margin-top:3px">
<div class="dot agent">A</div><div class="dot agent">A</div><div class="dot agent">A</div>
</div>
</div>
<div class="dot-person"><div class="dot dev" style="font-size:10px">D4</div>
<div style="display:flex;gap:3px;margin-top:3px">
<div class="dot agent">A</div><div class="dot agent">A</div><div class="dot agent">A</div>
</div>
</div>
<div class="dot-person"><div class="dot dev" style="font-size:10px">D5</div>
<div style="display:flex;gap:3px;margin-top:3px">
<div class="dot agent">A</div><div class="dot agent">A</div><div class="dot agent">A</div>
</div>
</div>
</div>
<div class="count-row">
<span class="count-big" style="color:var(--red)">105</span>
<span class="count-label">potential collision pairs — none of which know about each other</span>
</div>
<p style="font-size:14px">The agents belonging to Dev 1 don’t know what the agents belonging to Dev 2 are doing. They all have access to the same codebase. When two of them make changes to the same file, no one is warned in advance — the problem only appears when the code is merged.</p>
</div>
<hr>
<p><strong>The full picture across team sizes:</strong></p>
<table class="big-table">
<thead>
<tr><th>Team size</th><th>Developer pairs</th><th>With 3 agents each</th><th>Coordination load</th></tr>
</thead>
<tbody>
<tr><td>1 developer</td><td>0 pairs</td><td>3 agents, 3 pairs</td><td style="color:var(--green-text);font-weight:600">You manage all of them</td></tr>
<tr><td>2 developers</td><td>1 pair</td><td>6 agents, 15 pairs</td><td style="color:var(--green-text)">Slack handles it</td></tr>
<tr class="mid"><td>3 developers</td><td>3 pairs</td><td>9 agents, 36 pairs</td><td>Starting to need structure</td></tr>
<tr class="mid"><td>5 developers</td><td>10 pairs</td><td>15 agents, 105 pairs</td><td>Informal breaks down here</td></tr>
<tr class="hi"><td>8 developers</td><td>28 pairs</td><td>24 agents, 276 pairs</td><td>Requires platform coordination</td></tr>
<tr class="hi"><td>10 developers</td><td>45 pairs</td><td>30 agents, 435 pairs</td><td>No informal system survives this</td></tr>
</tbody>
</table>
<div class="callout">
<strong>The key insight:</strong> Developer pairs grow manageable with structure. Agent pairs grow faster and are completely invisible — no agent knows what any other agent is doing, unless there’s a platform coordinating them. That platform is GitHub. The pull request is what forces agents to negotiate before merging.
</div>
<p>This is why the fight isn’t about which AI model is smarter. A smarter agent working in isolation still creates the same invisible collision problem. The question is whether the agents are operating on shared ground — shared codebase state, shared decisions, shared memory of why things were built the way they were.</p>
<a class="back-link" href="/pick-the-fight.html">← Back to the seller guide</a>
<footer>
<a href="/">claynelson.github.io</a> ·
<a href="/team-scale-math.html">See the live simulation →</a>
</footer>
</div>
</body>
</html>