Skip to content

docs: introduction-to-taskplane video storyboard + supporting visuals #580

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
HenryLach merged 2 commits into from
May 17, 2026
Merged

docs: introduction-to-taskplane video storyboard + supporting visuals #580

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
93cd44a
docs: add introduction-to-taskplane video storyboard and supporting v…
HenryLach May 17, 2026
2777c8a
Merge branch 'main' into docs/intro-video-visuals
HenryLach May 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
367 changes: 367 additions & 0 deletions docs/video/introduction-to-taskplane-storyboard.md
View file
Open in desktop

Large diffs are not rendered by default.

159 changes: 159 additions & 0 deletions docs/video/visuals/01-origin-timeline.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,159 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>V1 — Origin timeline</title>
<link rel="stylesheet" href="_shared.css">
<style>
/* V1-only: faint grid pattern behind the timeline */
body {
background-image:
linear-gradient(to right, rgba(48,54,61,0.18) 1px, transparent 1px),
linear-gradient(to bottom, rgba(48,54,61,0.18) 1px, transparent 1px);
background-size: 32px 32px;
}
.timeline {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-top: 24px;
}
.timeline::before {
content: '';
position: absolute;
top: 36px;
left: 6%;
right: 6%;
height: 2px;
background: linear-gradient(90deg, var(--red) 0%, var(--amber) 33%, var(--blue) 66%, var(--green) 100%);
opacity: 0.55;
border-radius: 2px;
z-index: 0;
}
.stage { position: relative; z-index: 1; }
.marker {
width: 72px;
height: 72px;
margin: 0 auto 20px;
border-radius: 50%;
background: var(--surface);
border: 2px solid currentColor;
display: flex; align-items: center; justify-content: center;
font-family: var(--mono);
font-size: var(--fs-4xl);
font-weight: 700;
}
.stage-1 { color: var(--red); }
.stage-2 { color: var(--amber); }
.stage-3 { color: var(--blue); }
.stage-4 { color: var(--green); }
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 20px;
height: calc(100% - 92px);
}
.card-title {
font-family: var(--mono);
font-size: var(--fs-2xl);
margin-bottom: 8px;
color: var(--text);
}
.card-meta {
font-family: var(--mono);
font-size: var(--fs-xs);
color: var(--text-faint);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 12px;
}
.card-desc {
font-size: var(--fs-lg);
line-height: 1.55;
color: var(--text-dim);
margin-bottom: 16px;
}
.lesson {
font-family: var(--mono);
font-size: var(--fs-sm);
padding: 8px 10px;
border-radius: 4px;
background: var(--surface-2);
border-left: 3px solid currentColor;
line-height: 1.5;
}
.lesson .lk { color: var(--text-faint); font-weight: 500; }
.lesson .lv { color: var(--text); }
.footer-tag {
margin-top: 56px;
font-family: var(--mono);
font-size: var(--fs-md);
color: var(--text-faint);
text-align: center;
}
.footer-tag .hl { color: var(--green); }
</style>
</head>
<body>
<div class="frame">
<div class="eyebrow">
<span>1 · Origin</span>
<nav class="page-nav" aria-label="Page navigation">
<span class="disabled" aria-label="Previous (none)">&larr;</span>
<a href="index.html" aria-label="Index">&#9675;</a>
<a href="02-light-factory-vs-dark.html" aria-label="Next">&rarr;</a>
</nav>
</div>
<h1>The road to Taskplane</h1>
<p class="subtitle">A million lines of AI-generated code. Three failed harnesses. Each failure produced a design rule.</p>

<div class="timeline">
<div class="stage stage-1">
<div class="marker">01</div>
<div class="card">
<div class="card-title">Vibe coding</div>
<div class="card-meta">stage one · chat-driven</div>
<div class="card-desc">Paste, regenerate, accept. Fast for greenfield prototypes. Falls apart the moment the codebase outgrows the model's working memory.</div>
<div class="lesson"><span class="lk">lesson →</span> <span class="lv">A working memory must live outside the model.</span></div>
</div>
</div>

<div class="stage stage-2">
<div class="marker">02</div>
<div class="card">
<div class="card-title">Ralph Wiggum loop</div>
<div class="card-meta">stage two · single agent, single prompt</div>
<div class="card-desc">One prompt, run it forever. The agent grinds. Beautiful for narrow problems. Drops context across iterations and can't survive long-running work.</div>
<div class="lesson"><span class="lk">lesson →</span> <span class="lv">State must be on disk. <code>STATUS.md</code> was born here.</span></div>
</div>
</div>

<div class="stage stage-3">
<div class="marker">03</div>
<div class="card">
<div class="card-title">Parallel Ralph</div>
<div class="card-meta">stage three · many agents, one repo</div>
<div class="card-desc">More loops, more throughput — and a cascade of silent collisions. Two agents both "complete." One overwrites the other. Git stops being a safety net.</div>
<div class="lesson"><span class="lk">lesson →</span> <span class="lv">Worktrees. Lanes. A real DAG. And a merge that understands intent.</span></div>
</div>
</div>

<div class="stage stage-4">
<div class="marker">04</div>
<div class="card">
<div class="card-title">Taskplane</div>
<div class="card-meta">today · deterministic orchestration</div>
<div class="card-desc">Four agents. Verbose packets. File-backed state. Worktree isolation. Cross-model reviews. Semantic merges. A web-based dashboard to drive observability.</div>
<div class="lesson"><span class="lk">rule →</span> <span class="lv">Autonomy is fine. Inspectable autonomy is the goal.</span></div>
</div>
</div>
</div>

<div class="footer-tag">
vibe → ralph → parallel ralph → <span class="hl">taskplane</span> · ~1M lines of AI-generated code along the way
</div>
</div>
</body>
</html>
143 changes: 143 additions & 0 deletions docs/video/visuals/02-light-factory-vs-dark.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,143 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>V2 — Light factory vs dark factory</title>
<link rel="stylesheet" href="_shared.css">
<style>
.split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
}
.panel {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 32px;
position: relative;
overflow: hidden;
}
.panel.dark {
background: linear-gradient(135deg, #0a0c10 0%, #14181f 100%);
}
.panel.light {
background: linear-gradient(135deg, #131a22 0%, #1a2330 100%);
border-color: rgba(126, 231, 135, 0.25);
}
.panel-label {
font-family: var(--mono);
font-size: var(--fs-sm);
letter-spacing: 0.15em;
text-transform: uppercase;
margin-bottom: 14px;
}
.panel.dark .panel-label { color: var(--red); }
.panel.light .panel-label { color: var(--green); }
.panel-title {
font-size: var(--fs-5xl);
margin-bottom: 8px;
font-weight: 600;
}
.panel-tagline {
color: var(--text-dim);
font-size: var(--fs-lg);
margin-bottom: 24px;
line-height: 1.55;
}
.traits { list-style: none; }
.trait {
display: flex;
gap: 12px;
padding: 12px 0;
border-top: 1px solid rgba(48,54,61,0.6);
align-items: flex-start;
}
.trait:last-child { border-bottom: 1px solid rgba(48,54,61,0.6); }
.glyph {
flex-shrink: 0;
width: 22px; height: 22px;
border-radius: 4px;
display: flex; align-items: center; justify-content: center;
font-family: var(--mono); font-size: var(--fs-lg);
margin-top: 1px;
}
.panel.dark .glyph { background: rgba(255, 123, 114, 0.12); color: var(--red); }
.panel.light .glyph { background: rgba(126, 231, 135, 0.12); color: var(--green); }
.trait-text { font-family: var(--mono); font-size: var(--fs-md); line-height: 1.55; color: var(--text); }
.trait-text .dim { color: var(--text-faint); }

.floor-banner {
margin-top: 24px;
font-family: var(--mono);
font-size: var(--fs-md);
color: var(--text-faint);
padding: 16px 20px;
background: var(--surface-2);
border: 1px dashed var(--border);
border-radius: 8px;
line-height: 1.6;
text-align: center;
}
.panel.dark .floor-banner { border-color: rgba(255, 123, 114, 0.25); color: rgba(255, 123, 114, 0.85); }
.panel.light .floor-banner { border-color: rgba(126, 231, 135, 0.25); color: rgba(126, 231, 135, 0.85); }

.footer-note {
margin-top: 40px;
text-align: center;
font-family: var(--mono);
font-size: var(--fs-md);
color: var(--text-faint);
}
.footer-note .hl { color: var(--green); }
</style>
</head>
<body>
<div class="frame">
<div class="eyebrow">
<span>2 · Philosophy</span>
<nav class="page-nav" aria-label="Page navigation">
<a href="01-origin-timeline.html" aria-label="Previous">&larr;</a>
<a href="index.html" aria-label="Index">&#9675;</a>
<a href="03-agent-quartet.html" aria-label="Next">&rarr;</a>
</nav>
</div>
<h1>Light factory vs dark factory</h1>
<p class="subtitle">Two ways to run autonomous agents but the light factory model gives you the visibility you need to steer effectively.</p>

<div class="split">
<div class="panel dark">
<div class="panel-label">Dark factory</div>
<div class="panel-title">"Just trust the agent"</div>
<div class="panel-tagline">Single opaque prompt. Agent decides everything. You see the receipts only when it's over.</div>
<ul class="traits">
<li class="trait"><div class="glyph">✕</div><div class="trait-text">One-line prompts. <span class="dim">No file scope, no dependencies, no guardrails.</span></div></li>
<li class="trait"><div class="glyph">✕</div><div class="trait-text">In-memory state. <span class="dim">Crash = lose the work and the plan.</span></div></li>
<li class="trait"><div class="glyph">✕</div><div class="trait-text">Shared working directory. <span class="dim">Silent collisions. Last writer wins.</span></div></li>
<li class="trait"><div class="glyph">✕</div><div class="trait-text">No review surface. <span class="dim">Same model writes, same model evaluates. Confirmation bias.</span></div></li>
<li class="trait"><div class="glyph">✕</div><div class="trait-text">Black-box telemetry. <span class="dim">Spinner spinning. $8 burning. No clue why.</span></div></li>
</ul>
<div class="floor-banner">visibility → 0 · recoverability → 0 · operator clarity → 0</div>
</div>

<div class="panel light">
<div class="panel-label">Light factory · Taskplane</div>
<div class="panel-title">"Show the work"</div>
<div class="panel-tagline">The plan is on disk. The progress is on disk. The decisions are on disk. The orchestration is deterministic around the model's randomness.</div>
<ul class="traits">
<li class="trait"><div class="glyph">✓</div><div class="trait-text">Verbose task packets. <span class="dim">PROMPT.md + STATUS.md. What, why, and where to write.</span></div></li>
<li class="trait"><div class="glyph">✓</div><div class="trait-text">File-backed state. <span class="dim">.DONE, STATUS.md, batch-state.json. Resume from any crash.</span></div></li>
<li class="trait"><div class="glyph">✓</div><div class="trait-text">Worktree isolation. <span class="dim">Every lane is its own checkout. No collisions, ever.</span></div></li>
<li class="trait"><div class="glyph">✓</div><div class="trait-text">Cross-model reviews. <span class="dim">Different family on the other side. Independent quality gate.</span></div></li>
<li class="trait"><div class="glyph">✓</div><div class="trait-text">Dashboard reads disk. <span class="dim">SSE-streamed truth. Cannot lie. Doesn't decide.</span></div></li>
</ul>
<div class="floor-banner">visibility → full · recoverability → atomic · operator clarity → first-class</div>
</div>
</div>

<div class="footer-note">
autonomy is fine — <span class="hl">inspectable autonomy is the goal</span>
</div>
</div>
</body>
</html>
Loading