Skip to content

docs: extend intro-video visuals with pages 13-17 #582

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 1 commit into from
May 17, 2026
Merged

docs: extend intro-video visuals with pages 13-17 #582

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 0 additions & 4 deletions docs/video/visuals/08-waves-lanes-worktrees.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,10 +166,6 @@
border-radius: 3px;
font-size: var(--fs-sm);
}
/* Let the subtitle span the full frame width instead of the shared 820px cap. */
.subtitle {
max-width: 100%;
}
</style>
</head>
<body>
Expand Down
6 changes: 1 addition & 5 deletions docs/video/visuals/12-dashboard-visibility.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,10 +197,6 @@
color: var(--text-dim);
}
.footer .hl { color: var(--green); }
/* Let the subtitle span the full frame width instead of the shared 820px cap. */
.subtitle {
max-width: 100%;
}
</style>
</head>
<body>
Expand All @@ -210,7 +206,7 @@
<nav class="page-nav" aria-label="Page navigation">
<a href="11-polyrepo-segments.html" aria-label="Previous">&larr;</a>
<a href="index.html" aria-label="Index">&#9675;</a>
<span class="disabled" aria-label="Next (none)">&rarr;</span>
<a href="13-why-pi.html" aria-label="Next">&rarr;</a>
</nav>
</div>
<h1>Why a web dashboard, not a CLI</h1>
Expand Down
142 changes: 142 additions & 0 deletions docs/video/visuals/13-why-pi.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>V13 — Why pi</title>
<link rel="stylesheet" href="_shared.css">
<style>
.reasons {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-bottom: 40px;
}
.reason {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 28px 26px;
border-top: 3px solid currentColor;
display: flex;
flex-direction: column;
}
.reason.r1 { color: var(--green); }
.reason.r2 { color: var(--blue); }
.reason.r3 { color: var(--amber); }
.reason-num {
font-family: var(--mono);
font-size: var(--fs-xs);
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 10px;
color: currentColor;
}
.reason-title {
font-family: var(--mono);
font-size: var(--fs-2xl);
color: var(--text);
margin-bottom: 8px;
font-weight: 600;
}
.reason-tagline {
font-size: var(--fs-lg);
color: var(--text-dim);
margin-bottom: 20px;
line-height: 1.45;
}
.reason-body {
font-size: var(--fs-md);
color: var(--text-dim);
line-height: 1.65;
margin-bottom: 22px;
flex: 1;
}
.reason-tag {
margin-top: auto;
padding: 14px 16px;
background: var(--surface-2);
border-left: 3px solid currentColor;
border-radius: 4px;
font-family: var(--mono);
font-size: var(--fs-sm);
color: var(--text);
line-height: 1.6;
}
.reason-tag .lk {
display: block;
color: currentColor;
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: var(--fs-xs);
margin-bottom: 6px;
}
.closing {
padding: 22px 26px;
background: var(--surface-2);
border: 1px dashed var(--border);
border-radius: 8px;
font-family: var(--mono);
font-size: var(--fs-md);
color: var(--text-dim);
text-align: center;
line-height: 1.65;
}
.closing .hl-g { color: var(--green); }
.closing .hl-b { color: var(--blue); }
.closing .hl-a { color: var(--amber); }
</style>
</head>
<body>
<div class="frame">
<div class="eyebrow">
<span>13 · The foundation</span>
<nav class="page-nav" aria-label="Page navigation">
<a href="12-dashboard-visibility.html" aria-label="Previous">&larr;</a>
<a href="index.html" aria-label="Index">&#9675;</a>
<a href="14-pi-capabilities.html" aria-label="Next">&rarr;</a>
</nav>
</div>
<h1>Why pi?</h1>
<p class="subtitle">Taskplane runs on top of pi. Three properties made it the obvious foundation — the same three properties that let other projects (like OpenClaw) build very different agents on the same base.</p>

<div class="reasons">
<div class="reason r1">
<div class="reason-num">01 · what won me over</div>
<div class="reason-title">Truly extensible</div>
<div class="reason-tagline">Build whatever you want on top of pi. The runtime that powers Taskplane is just one possible build.</div>
<div class="reason-body">pi is extension-first. Extensions register commands, tools, and behaviors. Nothing is hardcoded that you can't replace. The same architecture that lets OpenClaw layer its own agent on top is what lets Taskplane add an entire orchestration engine — without forking pi.</div>
<div class="reason-tag">
<span class="lk">For Taskplane</span>
/orch* commands, the review_step + wait_for_review tools, mailbox handlers, agent spawning — all live in extensions/taskplane/*. Upgrades flow through pi update with zero rewrites.
</div>
</div>

<div class="reason r2">
<div class="reason-num">02 · the deal-maker</div>
<div class="reason-title">Model agnostic</div>
<div class="reason-tagline">Anthropic, OpenAI, Bedrock, Vertex, Gemini, local Ollama — pi treats them the same. Swap any agent's model with a string.</div>
<div class="reason-body">Provider abstraction is built in. Models are configured per agent as <code>provider/model-name</code> strings. No SDK glue code, no routing layer, no fork-per-vendor. Per agent, per task, per command — different models can light up the same execution path.</div>
<div class="reason-tag">
<span class="lk">For Taskplane</span>
Cross-model reviews are non-negotiable. Worker on Opus, reviewer on GPT, merger on a third. Without pi's abstraction this means writing three SDK adapters and an in-house routing layer — and maintaining it.
</div>
</div>

<div class="reason r3">
<div class="reason-num">03 · the ethos match</div>
<div class="reason-title">Open source</div>
<div class="reason-tagline">MIT-licensed. The whole stack is inspectable. The only cost is your token bill.</div>
<div class="reason-body">No SaaS layer. No per-seat fees. No enterprise tier behind a paywall. You bring your own keys, your own machine, your own data. The full source for the agent runtime is right there if you want to read it, fork it, or patch it.</div>
<div class="reason-tag">
<span class="lk">For Taskplane</span>
Taskplane is also open source. The two together cost users nothing beyond tokens. A closed harness on top of an open agent framework would have defeated the point — pi shares the ethos.
</div>
</div>
</div>

<div class="closing">
<span class="hl-g">extensible</span> &nbsp;+&nbsp; <span class="hl-b">model-agnostic</span> &nbsp;+&nbsp; <span class="hl-a">open</span> &nbsp;·&nbsp; the right foundation for what Taskplane needed
</div>
</div>
</body>
</html>
152 changes: 152 additions & 0 deletions docs/video/visuals/14-pi-capabilities.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,152 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>V14 — Pi capabilities</title>
<link rel="stylesheet" href="_shared.css">
<style>
.capabilities {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-bottom: 32px;
}
.cap {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 22px;
border-top: 3px solid currentColor;
display: flex;
flex-direction: column;
}
.cap.c1 { color: var(--green); }
.cap.c2 { color: var(--blue); }
.cap.c3 { color: var(--amber); }
.cap.c4 { color: var(--purple); }
.cap.c5 { color: var(--pink); }
.cap.c6 { color: var(--red); }
.cap-tag {
font-family: var(--mono);
font-size: var(--fs-xs);
letter-spacing: 0.1em;
text-transform: uppercase;
color: currentColor;
margin-bottom: 10px;
}
.cap-title {
font-family: var(--mono);
font-size: var(--fs-xl);
color: var(--text);
margin-bottom: 8px;
font-weight: 600;
}
.cap-desc {
font-size: var(--fs-md);
color: var(--text-dim);
line-height: 1.6;
margin-bottom: 16px;
flex: 1;
}
.cap-example {
font-family: var(--mono);
font-size: var(--fs-sm);
background: var(--surface-2);
padding: 10px 14px;
border-radius: 4px;
color: var(--text);
border-left: 2px solid currentColor;
margin-top: auto;
}
.cap-example .com { color: var(--text-faint); }
.cap-example .kw { color: currentColor; }

.for-tp-band {
padding: 20px 26px;
background: var(--surface-2);
border: 1px dashed var(--border);
border-radius: 8px;
font-family: var(--mono);
font-size: var(--fs-md);
color: var(--text-dim);
line-height: 1.7;
}
.for-tp-band .tag {
display: inline-block;
color: var(--green);
font-size: var(--fs-xs);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-right: 12px;
padding: 4px 10px;
border: 1px solid var(--green);
border-radius: 4px;
vertical-align: middle;
}
.for-tp-band .hl { color: var(--text); }
</style>
</head>
<body>
<div class="frame">
<div class="eyebrow">
<span>14 · The engineering surface</span>
<nav class="page-nav" aria-label="Page navigation">
<a href="13-why-pi.html" aria-label="Previous">&larr;</a>
<a href="index.html" aria-label="Index">&#9675;</a>
<a href="15-how-to-get-started.html" aria-label="Next">&rarr;</a>
</nav>
</div>
<h1>What pi actually gives you</h1>
<p class="subtitle">Beyond the three big reasons in V13, here's the concrete engineering surface Taskplane builds on. Each of these is a primitive that another agent project could use just as easily.</p>

<div class="capabilities">
<div class="cap c1">
<div class="cap-tag">runtime</div>
<div class="cap-title">Local-first execution</div>
<div class="cap-desc">Runs in your terminal. Your keys, your machine, your filesystem. No cloud service, no telemetry pipeline, no shared backplane. The entire agent loop is observable from your own disk and your own process tree.</div>
<div class="cap-example"><span class="com"># install once, run anywhere</span><br><span class="kw">pi install</span> npm:taskplane</div>
</div>

<div class="cap c2">
<div class="cap-tag">capability packaging</div>
<div class="cap-title">Skills as folders</div>
<div class="cap-desc">A "skill" is a folder with a SKILL.md manifest plus any supporting files the agent needs. pi auto-discovers them and exposes them via natural-language triggers. Taskplane's create-taskplane-task skill is one of these — totally portable.</div>
<div class="cap-example"><span class="com"># skill = folder + manifest</span><br>skills/create-taskplane-task/<br>&nbsp;&nbsp;<span class="kw">SKILL.md</span></div>
</div>

<div class="cap c3">
<div class="cap-tag">extensibility</div>
<div class="cap-title">Custom tool registration</div>
<div class="cap-desc">Extensions declare tools. Agents call them the same way they call read or write. Taskplane registers review_step, wait_for_review, send_agent_message, broadcast_message, and the entire orch_* family this way.</div>
<div class="cap-example"><span class="kw">registerTool</span>(<br>&nbsp;&nbsp;<span class="kw">'review_step'</span>,<br>&nbsp;&nbsp;reviewStepHandler<br>)</div>
</div>

<div class="cap c4">
<div class="cap-tag">control plane</div>
<div class="cap-title">RPC steering</div>
<div class="cap-desc">The steer RPC injects a user-turn message into a running agent's context without killing the session. This is the primitive Taskplane's mailbox layers on top of — and what makes mid-flight course-correction possible at all.</div>
<div class="cap-example"><span class="com"># inject mid-conversation</span><br><span class="kw">rpc.steer</span>(session, msg)</div>
</div>

<div class="cap c5">
<div class="cap-tag">process model</div>
<div class="cap-title">Direct child processes</div>
<div class="cap-desc">Agents run as ordinary OS subprocesses of pi. No tmux dependency, no daemon, no message broker. A process registry tracks PIDs and liveness. Worker threads keep the engine non-blocking. Standard OS primitives all the way down.</div>
<div class="cap-example"><span class="kw">processRegistry</span><br>&nbsp;&nbsp;.spawn(agent, opts)<br>&nbsp;&nbsp;.track(pid)</div>
</div>

<div class="cap c6">
<div class="cap-tag">configurability</div>
<div class="cap-title">Composable agent prompts</div>
<div class="cap-desc">Every agent role is a markdown file with frontmatter — model, tools, standalone flag. Project-specific guidance composes on top of the base prompts shipped by extensions. Versionable, diff-able, reviewable.</div>
<div class="cap-example"><span class="com"># composes with base</span><br>.pi/agents/<br>&nbsp;&nbsp;<span class="kw">task-worker.md</span></div>
</div>
</div>

<div class="for-tp-band">
<span class="tag">For Taskplane</span>
Every primitive on this page maps to something concrete in the orchestration system. Skills give you the task-creation entry point. Custom tools give you reviews. RPC steering gives you the mailbox. Subprocess agents give you parallel lanes. Composable prompts give you the <span class="hl">supervisor / worker / reviewer / merger</span> quartet without forking a thing.
</div>
</div>
</body>
</html>
Loading