Skip to content

Instantly share code, notes, and snippets.

@vivekhaldar

vivekhaldar/dark-factories-slides.html

Last active March 3, 2026 14:57
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save vivekhaldar/4a2c997c7584a93b45d6c473511ec92e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save vivekhaldar/4a2c997c7584a93b45d6c473511ec92e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
dark-factories-slides.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1920, height=1080">
<title>Dark Factories for Software</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Instrument+Serif:ital@0;1&family=DM+Sans:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--bg: #09090b;
--fg: #e4e4e7;
--dim: #71717a;
--accent: #f59e0b;
--accent-dim: rgba(245, 158, 11, 0.15);
--cyan: #22d3ee;
--cyan-dim: rgba(34, 211, 238, 0.1);
--red: #ef4444;
--slide-w: 1920px;
--slide-h: 1080px;
}
html, body {
width: var(--slide-w);
height: var(--slide-h);
overflow: hidden;
background: var(--bg);
color: var(--fg);
font-family: 'DM Sans', sans-serif;
}
body::after {
content: '';
position: fixed;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 9999;
}
.deck {
position: relative;
width: var(--slide-w);
height: var(--slide-h);
}
.slide {
position: absolute;
inset: 0;
padding: 72px 100px;
display: flex;
flex-direction: column;
justify-content: center;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
pointer-events: none;
will-change: opacity, transform;
}
.slide.active {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.progress {
position: fixed;
bottom: 0;
left: 0;
height: 3px;
background: var(--accent);
transition: width 0.5s ease;
z-index: 100;
}
.counter {
position: fixed;
bottom: 28px;
right: 48px;
font-family: 'Space Mono', monospace;
font-size: 14px;
color: var(--dim);
letter-spacing: 2px;
z-index: 100;
}
/* ─── Typography ─── */
.eyebrow {
font-family: 'Space Mono', monospace;
font-size: 14px;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 20px;
}
h1 {
font-family: 'Instrument Serif', serif;
font-weight: 400;
font-size: 82px;
line-height: 1.05;
letter-spacing: -1.5px;
margin-bottom: 40px;
}
h1 em { font-style: italic; color: var(--accent); }
h2 {
font-family: 'Instrument Serif', serif;
font-weight: 400;
font-size: 60px;
line-height: 1.1;
letter-spacing: -1px;
margin-bottom: 40px;
}
h2 em { font-style: italic; color: var(--accent); }
.subtitle {
font-size: 26px;
font-weight: 300;
color: var(--dim);
line-height: 1.5;
max-width: 900px;
margin-bottom: 48px;
}
/* ─── Stat cards (Slide 1) ─── */
.stats {
display: flex;
gap: 32px;
}
.stat-card {
flex: 1;
background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 16px;
padding: 32px 28px;
position: relative;
overflow: hidden;
}
.stat-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: var(--accent);
opacity: 0.6;
}
.stat-card .company {
font-family: 'Space Mono', monospace;
font-size: 13px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 14px;
}
.stat-card .number {
font-family: 'Instrument Serif', serif;
font-size: 48px;
color: var(--fg);
line-height: 1.1;
margin-bottom: 8px;
}
.stat-card .detail {
font-size: 16px;
color: var(--dim);
line-height: 1.5;
}
.stat-card .agent-name {
font-family: 'Space Mono', monospace;
font-size: 13px;
color: rgba(255,255,255,0.25);
margin-top: 12px;
}
.stat-card .source-link {
display: inline-block;
font-family: 'Space Mono', monospace;
font-size: 11px;
color: var(--dim);
text-decoration: none;
margin-top: 10px;
padding: 4px 10px;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 6px;
transition: color 0.2s, border-color 0.2s;
}
.stat-card .source-link:hover {
color: var(--fg);
border-color: rgba(255,255,255,0.2);
}
/* ─── Company evidence columns (Theme slides) ─── */
.evidence {
display: flex;
gap: 28px;
}
.evidence-col {
flex: 1;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 14px;
padding: 28px 26px;
position: relative;
overflow: hidden;
}
.evidence-col::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
}
.evidence-col.openai::before { background: var(--accent); }
.evidence-col.ramp::before { background: var(--cyan); }
.evidence-col.spotify::before { background: #a78bfa; }
.evidence-col .co-name {
font-family: 'Space Mono', monospace;
font-size: 12px;
letter-spacing: 3px;
text-transform: uppercase;
margin-bottom: 18px;
}
.evidence-col.openai .co-name { color: var(--accent); }
.evidence-col.ramp .co-name { color: var(--cyan); }
.evidence-col.spotify .co-name { color: #a78bfa; }
.evidence-col ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 12px;
}
.evidence-col li {
font-size: 18px;
line-height: 1.5;
color: var(--fg);
padding-left: 18px;
position: relative;
}
.evidence-col li::before {
content: '›';
position: absolute;
left: 0;
color: var(--dim);
font-weight: 700;
}
.evidence-col li strong {
font-weight: 500;
}
.evidence-col.openai li strong { color: var(--accent); }
.evidence-col.ramp li strong { color: var(--cyan); }
.evidence-col.spotify li strong { color: #a78bfa; }
/* Theme headline under the h2 */
.theme-line {
font-size: 24px;
font-weight: 300;
color: var(--dim);
line-height: 1.5;
max-width: 1100px;
margin-bottom: 36px;
}
/* ─── Code block (Ralph slide) ─── */
.code-block {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(245, 158, 11, 0.2);
border-radius: 12px;
padding: 28px 36px;
font-family: 'Space Mono', monospace;
font-size: 26px;
color: var(--cyan);
margin-bottom: 40px;
display: inline-block;
}
.code-block .prompt-char { color: var(--dim); }
.code-block .kw { color: var(--accent); }
.code-block .str { color: #a78bfa; }
.code-block .pipe { color: var(--dim); }
.triad {
display: flex;
gap: 28px;
margin-bottom: 36px;
}
.triad-item {
flex: 1;
padding: 24px 24px;
border-left: 2px solid var(--accent);
background: var(--accent-dim);
border-radius: 0 10px 10px 0;
}
.triad-item .label {
font-family: 'Space Mono', monospace;
font-size: 12px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 8px;
}
.triad-item .value {
font-size: 20px;
font-weight: 400;
line-height: 1.4;
}
.punchline {
font-family: 'Instrument Serif', serif;
font-size: 32px;
font-style: italic;
color: var(--dim);
line-height: 1.4;
max-width: 1000px;
}
.punchline strong {
color: var(--fg);
font-weight: 400;
}
/* ─── Closing slide ─── */
.contrast-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
margin-bottom: 36px;
}
.contrast-box {
padding: 32px 28px;
border-radius: 14px;
}
.contrast-box.wrong {
background: rgba(239, 68, 68, 0.06);
border: 1px solid rgba(239, 68, 68, 0.15);
}
.contrast-box.right {
background: rgba(34, 211, 238, 0.06);
border: 1px solid rgba(34, 211, 238, 0.15);
}
.contrast-box .box-label {
font-family: 'Space Mono', monospace;
font-size: 13px;
letter-spacing: 3px;
text-transform: uppercase;
margin-bottom: 18px;
}
.contrast-box.wrong .box-label { color: var(--red); }
.contrast-box.right .box-label { color: var(--cyan); }
.contrast-box ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 12px;
}
.contrast-box li {
font-size: 19px;
line-height: 1.45;
color: var(--fg);
padding-left: 20px;
position: relative;
}
.contrast-box.wrong li::before {
content: '×';
position: absolute;
left: 0;
color: var(--red);
font-weight: 700;
}
.contrast-box.right li::before {
content: '→';
position: absolute;
left: 0;
color: var(--cyan);
}
.final-quote {
font-family: 'Instrument Serif', serif;
font-size: 28px;
font-style: italic;
color: var(--fg);
padding: 24px 32px;
border-left: 3px solid var(--accent);
background: var(--accent-dim);
border-radius: 0 10px 10px 0;
max-width: 1100px;
line-height: 1.45;
}
/* ─── Background glows ─── */
.bg-glow {
position: absolute;
border-radius: 50%;
filter: blur(120px);
pointer-events: none;
z-index: -1;
}
.glow-amber {
width: 500px; height: 500px;
background: rgba(245, 158, 11, 0.06);
top: -150px; right: -100px;
}
.glow-cyan {
width: 400px; height: 400px;
background: rgba(34, 211, 238, 0.04);
bottom: -100px; left: -50px;
}
.glow-purple {
width: 400px; height: 400px;
background: rgba(167, 139, 250, 0.04);
top: -100px; left: 50%;
}
/* ─── Stagger animations ─── */
.slide.active .stat-card,
.slide.active .evidence-col,
.slide.active .triad-item,
.slide.active .contrast-box {
animation: fadeUp 0.4s ease both;
}
.slide.active .stat-card:nth-child(1),
.slide.active .evidence-col:nth-child(1),
.slide.active .triad-item:nth-child(1),
.slide.active .contrast-box:nth-child(1) { animation-delay: 0.1s; }
.slide.active .stat-card:nth-child(2),
.slide.active .evidence-col:nth-child(2),
.slide.active .triad-item:nth-child(2),
.slide.active .contrast-box:nth-child(2) { animation-delay: 0.2s; }
.slide.active .stat-card:nth-child(3),
.slide.active .evidence-col:nth-child(3),
.slide.active .triad-item:nth-child(3) { animation-delay: 0.3s; }
@keyframes fadeUp {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
</head>
<body>
<div class="deck">
<!-- ═══════════ SLIDE 1: TITLE ═══════════ -->
<div class="slide active" id="s1">
<div class="bg-glow glow-amber"></div>
<div class="eyebrow">The New Reality</div>
<h1><em>Dark Factories</em><br>for Software</h1>
<p class="subtitle">Factories that run with the lights off. No humans on the floor.<br>Three companies built them — for code.</p>
<div class="stats">
<div class="stat-card">
<div class="company">OpenAI</div>
<div class="number">1M LOC</div>
<div class="detail">Every line written by Codex agents.<br>7 engineers. 5 months. 1,500 PRs.</div>
<div class="agent-name">Frontier</div>
<a class="source-link" href="https://openai.com/index/harness-engineering/" target="_blank">openai.com ↗</a>
</div>
<div class="stat-card">
<div class="company">Ramp</div>
<div class="number">30–50%</div>
<div class="detail">of all merged PRs written by their agent.<br>80% of the agent's own code — self-written.</div>
<div class="agent-name">Inspect</div>
<a class="source-link" href="https://builders.ramp.com/post/why-we-built-our-background-agent" target="_blank">builders.ramp.com ↗</a>
</div>
<div class="stat-card">
<div class="company">Spotify</div>
<div class="number">650+</div>
<div class="detail">agent-generated PRs merged per month.<br>60–90% time savings on migrations.</div>
<div class="agent-name">Honk</div>
<a class="source-link" href="https://engineering.atspotify.com/2025/11/spotifys-background-coding-agent-part-1" target="_blank">engineering.atspotify.com ↗</a>
</div>
</div>
</div>
<!-- ═══════════ SLIDE 2: THEME 1 — Engineer the Environment ═══════════ -->
<div class="slide" id="s2">
<div class="bg-glow glow-amber"></div>
<div class="eyebrow">Theme 01 / 05</div>
<h2>Humans <em>Engineer the Environment</em>,<br>Not the Code</h2>
<p class="theme-line">When agents struggle, don't write code for them — ask what capability they're missing.</p>
<div class="evidence">
<div class="evidence-col openai">
<div class="co-name">OpenAI</div>
<ul>
<li>Called it <strong>"harness engineering"</strong></li>
<li>Built custom linters, structural tests, and architectural guardrails</li>
<li>When agents failed, they built new <strong>tools and abstractions</strong> instead of coding manually</li>
</ul>
</div>
<div class="evidence-col ramp">
<div class="co-name">Ramp</div>
<ul>
<li>Built <strong>full-stack sandboxes</strong> — Postgres, Redis, Temporal per session</li>
<li>Integrated Sentry, Datadog, LaunchDarkly so agents can <strong>self-verify</strong></li>
<li>VNC + Chromium for <strong>visual verification</strong> of frontend changes</li>
</ul>
</div>
<div class="evidence-col spotify">
<div class="co-name">Spotify</div>
<ul>
<li>Plugged agents into existing <strong>Fleet Management</strong> pipeline</li>
<li>Agent is just a <strong>pluggable transformation engine</strong></li>
<li>Surrounding infra handles repo targeting, PRs, review workflows</li>
</ul>
</div>
</div>
</div>
<!-- ═══════════ SLIDE 3: THEME 2 — Verification Is the Product ═══════════ -->
<div class="slide" id="s3">
<div class="bg-glow glow-cyan"></div>
<div class="eyebrow">Theme 02 / 05</div>
<h2><em>Verification</em> Is the Product,<br>Not the Code</h2>
<p class="theme-line">None of these systems trust the agent. They invest more in checking than generating.</p>
<div class="evidence">
<div class="evidence-col openai">
<div class="co-name">OpenAI</div>
<ul>
<li>Custom linters <strong>written by Codex itself</strong></li>
<li>Structural tests enforcing layered architecture</li>
<li><strong>Agent-to-agent code review</strong> replaced human review over time</li>
<li>Automated "garbage collection" refactoring passes</li>
</ul>
</div>
<div class="evidence-col ramp">
<div class="co-name">Ramp</div>
<ul>
<li>Backend: <strong>full test suite runs in-sandbox</strong></li>
<li>Frontend: VNC screenshots <strong>embedded in PRs</strong></li>
<li>Integrated with <strong>Buildkite CI</strong> for outer loop</li>
<li>PRs authored under human tokens — can't self-approve</li>
</ul>
</div>
<div class="evidence-col spotify">
<div class="co-name">Spotify</div>
<ul>
<li>Deterministic verifiers (formatters, linters, tests)</li>
<li><strong>LLM judge vetoes ~25%</strong> of sessions for scope creep</li>
<li>Agents correct course <strong>50% of the time</strong> after veto</li>
<li>Verifiers activate by detecting component types</li>
</ul>
</div>
</div>
</div>
<!-- ═══════════ SLIDE 4: THEME 3 — Documentation as Infrastructure ═══════════ -->
<div class="slide" id="s4">
<div class="bg-glow glow-purple"></div>
<div class="eyebrow">Theme 03 / 05</div>
<h2>Documentation Became<br><em>Load-Bearing Infrastructure</em></h2>
<p class="theme-line">If it's not in the repo, it doesn't exist for the agent. Slack and Google Docs are invisible.</p>
<div class="evidence">
<div class="evidence-col openai">
<div class="co-name">OpenAI</div>
<ul>
<li><strong>AGENTS.md ~100 lines</strong> — a table of contents, not an encyclopedia</li>
<li>Structured <code>docs/</code> with ExecPlans and design specs</li>
<li>All knowledge <strong>versioned and co-located</strong> in repo</li>
<li>"Progressive disclosure" for agent context</li>
</ul>
</div>
<div class="evidence-col ramp">
<div class="co-name">Ramp</div>
<ul>
<li>Repo descriptions auto-route <strong>Slack prompts</strong> to correct codebase</li>
<li>Agent reads <strong>its own source code</strong> (OpenCode) to understand behavior</li>
<li>Non-engineers (PMs, designers) contribute via natural language prompts</li>
</ul>
</div>
<div class="evidence-col spotify">
<div class="co-name">Spotify</div>
<ul>
<li><strong>Large static prompts</strong> over dynamic MCP tools</li>
<li>Concrete <strong>before/after code examples</strong> dramatically outperform abstractions</li>
<li>Build procedures encoded in MCP, <strong>not AGENTS.md</strong></li>
<li>One change per prompt — no combining</li>
</ul>
</div>
</div>
</div>
<!-- ═══════════ SLIDE 5: THEME 4 — Constrained Agents ═══════════ -->
<div class="slide" id="s5">
<div class="bg-glow glow-amber" style="top:auto;bottom:-100px;left:200px;"></div>
<div class="eyebrow">Theme 04 / 05</div>
<h2><em>Constrained</em> Agents Outperform<br>Unconstrained Ones</h2>
<p class="theme-line">Counterintuitive: giving agents less power makes them more predictable and more useful.</p>
<div class="evidence">
<div class="evidence-col openai">
<div class="co-name">OpenAI</div>
<ul>
<li>Strict layered architecture: <strong>Types → Config → Repo → Service → Runtime → UI</strong></li>
<li>Dependency violations <strong>break the build</strong></li>
<li>"Boring technologies" with strong training data representation</li>
</ul>
</div>
<div class="evidence-col ramp">
<div class="co-name">Ramp</div>
<ul>
<li><strong>Isolated sandboxes</strong> — own Postgres, own Redis, own filesystem</li>
<li>Each session gets its own <strong>SQLite database</strong></li>
<li>Single-responsibility: accept prompt, produce diff</li>
</ul>
</div>
<div class="evidence-col spotify">
<div class="co-name">Spotify</div>
<ul>
<li>Only <strong>3 tools</strong>: Verify, Git (restricted), Bash (allowlisted)</li>
<li>More tools = more <strong>unpredictable failures</strong></li>
<li>No code search, no doc tools — context condensed into prompts upfront</li>
</ul>
</div>
</div>
</div>
<!-- ═══════════ SLIDE 6: THEME 5 — Progress on Disk ═══════════ -->
<div class="slide" id="s6">
<div class="bg-glow glow-cyan" style="top:-100px;left:auto;right:-50px;"></div>
<div class="eyebrow">Theme 05 / 05</div>
<h2>Progress Lives <em>on Disk</em>,<br>Not in Context</h2>
<p class="theme-line">The context window is ephemeral. The filesystem and git are the real state.</p>
<div class="evidence">
<div class="evidence-col openai">
<div class="co-name">OpenAI</div>
<ul>
<li><strong>Git worktrees</strong> per task with ephemeral observability stacks</li>
<li>Torn down after each task — <strong>no state carried over</strong></li>
<li>7+ hour single-prompt sessions via self-contained ExecPlans</li>
</ul>
</div>
<div class="evidence-col ramp">
<div class="co-name">Ramp</div>
<ul>
<li>Filesystem snapshots <strong>rebuilt every 30 minutes</strong></li>
<li>Warm sandbox pools for instant session startup</li>
<li>Sessions <strong>resumable from any device</strong></li>
</ul>
</div>
<div class="evidence-col spotify">
<div class="co-name">Spotify</div>
<ul>
<li><strong>Stateless containers</strong>: accept prompt, produce diff</li>
<li>10-turn limit per session, 3 retries — then fresh start</li>
<li>Agent <strong>unaware of previous sessions</strong> — state lives in code</li>
</ul>
</div>
</div>
</div>
<!-- ═══════════ SLIDE 7: RALPH LOOP ═══════════ -->
<div class="slide" id="s7">
<div class="bg-glow glow-amber" style="top:auto;bottom:-100px;right:200px;"></div>
<div class="eyebrow">The Primitive — Geoff Huntley</div>
<h2>The <em>Ralph Loop</em> Is the<br>Dark Factory Primitive</h2>
<div class="code-block">
<span class="prompt-char">$</span> <span class="kw">while</span> :; <span class="kw">do</span> cat <span class="str">PROMPT.md</span> <span class="pipe">|</span> claude-code ; <span class="kw">done</span>
</div>
<div class="triad">
<div class="triad-item">
<div class="label">Specification</div>
<div class="value">What to build</div>
</div>
<div class="triad-item">
<div class="label">Verification</div>
<div class="value">How to know it's right</div>
</div>
<div class="triad-item">
<div class="label">Loop</div>
<div class="value">Persistence through repetition</div>
</div>
</div>
<p class="punchline">Every dark factory is a production-hardened Ralph loop.<br>The complexity lives in the <strong>environment</strong>, not the orchestrator.</p>
</div>
<!-- ═══════════ SLIDE 8: CLOSING ═══════════ -->
<div class="slide" id="s8">
<div class="bg-glow glow-cyan" style="top:-100px;left:auto;right:-50px;"></div>
<div class="eyebrow">The Takeaway</div>
<h2><em>Orchestration</em> Is a Distraction</h2>
<div class="contrast-grid">
<div class="contrast-box wrong">
<div class="box-label">Complex Orchestration</div>
<ul>
<li>7 specialized agent roles &amp; supervisor hierarchies</li>
<li>Custom messaging protocols between agents</li>
<li>Shared state that can corrupt</li>
<li>Coordination as the bottleneck</li>
</ul>
</div>
<div class="contrast-box right">
<div class="box-label">Harness Engineering</div>
<ul>
<li>One agent, one task — shared-nothing</li>
<li>Fast, comprehensive verification loops</li>
<li>Filesystem and git as the only shared state</li>
<li>Environment quality as the bottleneck</li>
</ul>
</div>
</div>
<div class="final-quote">A Ralph loop with a great test suite will always beat<br>a complex orchestrator with a mediocre one.</div>
</div>
</div>
<div class="progress" id="progress"></div>
<div class="counter" id="counter"></div>
<script>
const slides = document.querySelectorAll('.slide');
const progress = document.getElementById('progress');
const counter = document.getElementById('counter');
let current = 0;
function show(idx) {
idx = Math.max(0, Math.min(idx, slides.length - 1));
slides[current].classList.remove('active');
current = idx;
slides[current].classList.add('active');
progress.style.width = ((current + 1) / slides.length * 100) + '%';
counter.textContent = String(current + 1).padStart(2, '0') + ' / ' + String(slides.length).padStart(2, '0');
}
document.addEventListener('keydown', e => {
if (e.key === 'ArrowRight' || e.key === 'ArrowDown' || e.key === ' ') {
e.preventDefault();
show(current + 1);
} else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
e.preventDefault();
show(current - 1);
}
});
show(0);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment