HenryLach · HenryLach · May 19, 2026 · May 18, 2026 · May 18, 2026 · May 19, 2026
@@ -165,5 +165,6 @@ <h1>The road to Taskplane</h1>
       vibe → ralph → parallel ralph → <span class="hl">taskplane</span> · ~1M lines of AI-generated code along the way
     </div>
   </div>
+<script src="nav.js"></script>
 </body>
 </html>
@@ -146,5 +146,6 @@ <h1>Light factory vs dark factory</h1>
       autonomy is fine — <span class="hl">inspectable autonomy is the goal</span>
     </div>
   </div>
+<script src="nav.js"></script>
 </body>
 </html>
@@ -201,5 +201,6 @@ <h1>The agent quartet</h1>
       <span class="hl-p">supervisor</span> <span class="arrow">→</span> spawns <span class="hl-g">worker</span> per lane <span class="arrow">→</span> worker calls <span class="hl-a">reviewer</span> at step boundaries <span class="arrow">→</span> wave completes <span class="arrow">→</span> <span class="hl-b">merger</span> combines lanes <span class="arrow">→</span> next wave
     </div>
   </div>
+<script src="nav.js"></script>
 </body>
 </html>
@@ -198,5 +198,6 @@ <h1>Anatomy of a Taskplane task packet</h1>
     </div>
 
   </div>
+<script src="nav.js"></script>
 </body>
 </html>
@@ -194,5 +194,6 @@ <h1>Where Taskplane sits on the determinism spectrum</h1>
       <span class="hl">only the contents of the model's tokens differ.</span>
     </div>
   </div>
+<script src="nav.js"></script>
 </body>
 </html>
@@ -281,5 +281,6 @@ <h1>Cross-model reviews</h1>
     </div>
 
   </div>
+<script src="nav.js"></script>
 </body>
 </html>
@@ -224,5 +224,6 @@ <h1>The file-based mailbox</h1>
       </div>
     </div>
   </div>
+<script src="nav.js"></script>
 </body>
 </html>
@@ -179,6 +179,12 @@
     .lanes { min-width: 540px; }
     .rules { grid-template-columns: 1fr; }
   }
+
+  /* Page-specific override: this page is the tallest of the deck and
+     spills past one 16:9 viewport on desktop with the shared 48px body
+     padding-bottom. Trim it to 20px here so the whole page fits without
+     a vertical scrollbar at standard desktop aspect ratios. */
+  body { padding-bottom: 20px; }
 </style>
 </head>
 <body>
@@ -318,5 +324,6 @@ <h1>Batch, waves, lanes, worktrees, tasks</h1>
       </div>
     </div>
   </div>
+<script src="nav.js"></script>
 </body>
 </html>
@@ -276,5 +276,6 @@ <h1>How Taskplane uses branches</h1>
       your <span class="pink">working branch</span> is sacred — <span class="hl">never touched</span> until <code style="font-family:var(--mono); color:var(--green); background:var(--bg); padding:1px 5px; border-radius:3px;">/orch-integrate</code>
     </div>
   </div>
+<script src="nav.js"></script>
 </body>
 </html>
@@ -220,5 +220,6 @@ <h1>Semantic merge vs git merge</h1>
       merge health monitor polls every 2 min · <span class="hl-a">stale at 10</span> · <span class="hl-r">stuck at 20</span> · emits events, never kills autonomously
     </div>
   </div>
+<script src="nav.js"></script>
 </body>
 </html>
@@ -295,5 +295,6 @@ <h1>Polyrepo: tasks decompose into segments</h1>
       </div>
     </div>
   </div>
+<script src="nav.js"></script>
 </body>
 </html>
@@ -257,5 +257,6 @@ <h1>Why a web dashboard, not a CLI</h1>
       one tab. all the truth. <span class="hl">no babysitting required.</span>
     </div>
   </div>
+<script src="nav.js"></script>
 </body>
 </html>
@@ -145,5 +145,6 @@ <h1>Why pi?</h1>
       <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>
+<script src="nav.js"></script>
 </body>
 </html>
@@ -158,5 +158,6 @@ <h1>What pi actually gives you</h1>
       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>
+<script src="nav.js"></script>
 </body>
 </html>
@@ -217,5 +217,6 @@ <h1>Getting started: install and test</h1>
     </div>
 
   </div>
+<script src="nav.js"></script>
 </body>
 </html>
@@ -291,5 +291,6 @@ <h1>How to get started on real work</h1>
       A clear, well-scoped <code>PROMPT.md</code> is the difference between an agent that delivers and one that drifts. Time spent here compounds across every lane in every wave.
     </div>
   </div>
+<script src="nav.js"></script>
 </body>
 </html>
@@ -297,5 +297,6 @@ <h1>Sage — the post-batch quality gate</h1>
       <span class="dim">Taskplane runs the batch.</span> &nbsp;Sage <em>reviews</em> it. &nbsp;<span class="dim">·</span> &nbsp;separate extensions, one workflow
     </div>
   </div>
+<script src="nav.js"></script>
 </body>
 </html>
@@ -216,5 +216,6 @@ <h1>Table of Contents</h1>
       </a>
     </div>
   </div>
+<script src="nav.js"></script>
 </body>
 </html>
@@ -0,0 +1,84 @@
+// Taskplane Overview · page-deck navigation
+// ----------------------------------------------------------------------------
+// Two input modes layered on the existing prev/index/next links inside
+// .page-nav, so they stay the single source of navigation truth:
+//
+//   * Desktop : ArrowLeft / ArrowRight on the keyboard fire the prev/next links.
+//   * Touch   : horizontal swipes fire the prev/next links — UNLESS the swipe
+//               started inside a horizontally scrollable container (e.g. the
+//               page-09 git-graph card or the page-08 wave cards), in which
+//               case the inner scroll takes priority.
+//
+// The script is a no-op on the index page (no .page-nav element).
+// ----------------------------------------------------------------------------
+
+(function () {
+  'use strict';
+
+  function navLink(label) {
+    return document.querySelector('.page-nav a[aria-label="' + label + '"]');
+  }
+
+  // --- Keyboard ----------------------------------------------------------
+  document.addEventListener('keydown', function (e) {
+    // Don't hijack arrows when the user is typing somewhere editable.
+    var tag = (e.target.tagName || '').toLowerCase();
+    if (tag === 'input' || tag === 'textarea' || e.target.isContentEditable) {
+      return;
+    }
+    // Ignore when modifier keys are held — those are likely browser shortcuts.
+    if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
+
+    var link = null;
+    if (e.key === 'ArrowLeft')  link = navLink('Previous');
+    if (e.key === 'ArrowRight') link = navLink('Next');
+    if (link) {
+      e.preventDefault();
+      link.click();
+    }
+  });
+
+  // --- Touch (swipe) -----------------------------------------------------
+  var startX = null;
+  var startY = null;
+
+  // Walk up the DOM looking for a horizontally scrollable ancestor. If one
+  // exists, the user is probably trying to pan that inner content, so we
+  // surrender the swipe.
+  function startedInsideHorizontalScroll(el) {
+    while (el && el !== document.body && el !== document.documentElement) {
+      if (el.scrollWidth > el.clientWidth + 1) return true;
+      el = el.parentElement;
+    }
+    return false;
+  }
+
+  document.addEventListener('touchstart', function (e) {
+    if (startedInsideHorizontalScroll(e.target)) {
+      startX = null;
+      return;
+    }
+    var t = e.changedTouches[0];
+    startX = t.screenX;
+    startY = t.screenY;
+  }, { passive: true });
+
+  document.addEventListener('touchend', function (e) {
+    if (startX === null) return;
+    var t = e.changedTouches[0];
+    var dx = t.screenX - startX;
+    var dy = t.screenY - startY;
+    startX = null;
+    startY = null;
+
+    // Threshold: at least 70px horizontal movement, and the gesture must
+    // be predominantly horizontal (2x more X than Y). Anything mushier is
+    // treated as a tap / vertical scroll and ignored.
+    var absDx = Math.abs(dx);
+    var absDy = Math.abs(dy);
+    if (absDx < 70 || absDx < absDy * 2) return;
+
+    var link = dx > 0 ? navLink('Previous') : navLink('Next');
+    if (link) link.click();
+  }, { passive: true });
+})();
@@ -143,7 +143,10 @@ body {
 
 body {
   min-height: 100vh;
-  padding: var(--page-pad-y) var(--page-pad-x);
+  /* No top padding: the sticky .eyebrow sits flush against the viewport
+     top from page load, so it's always in its docked position. Side and
+     bottom padding remain. */
+  padding: 0 var(--page-pad-x) var(--page-pad-y);
 }
 
 
@@ -165,14 +168,24 @@ body {
   font-size: var(--fs-eyebrow);
   letter-spacing: 0.12em;
   text-transform: uppercase;
-  margin-bottom: 12px;
+  margin-bottom: 16px;
   /* Three-column grid: title (left) · wordmark (center) · nav (right).
      1fr / auto / 1fr keeps the wordmark perfectly centered regardless of
      how wide the title or nav columns end up. */
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
   gap: 16px;
+
+  /* Docked at the top of the viewport so the nav buttons are always
+     reachable. position: sticky keeps the eyebrow in normal flow until
+     the page scrolls past it, then pins it to top: 0. */
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background: var(--bg);
+  border-bottom: 1px solid var(--border);
+  padding-block: 10px;
 }
 .eyebrow > :first-child { justify-self: start; }
 .eyebrow > .page-nav    { justify-self: end; }
@@ -186,27 +199,40 @@ body {
   justify-self: center;
 }
 
-/* Subtle per-page navigation: prev / index / next. Placed inside .eyebrow. */
+/* Per-page navigation: prev / index / next. Lives inside .eyebrow.
+   Sized large (~2x the title) and tinted green so the controls read as
+   primary actions on every viewport, with 44x44 hit areas for touch. */
 .page-nav {
   display: inline-flex;
   align-items: center;
-  gap: 14px;
+  gap: 8px;
   letter-spacing: normal;
   text-transform: none;
-  font-size: var(--fs-lg);
+  font-size: calc(var(--fs-lg) * 2);
   line-height: 1;
 }
 .page-nav a,
 .page-nav span {
-  color: var(--text-faint);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 44px;
+  min-height: 44px;
+  padding: 4px 6px;
+  color: var(--green);
   text-decoration: none;
-  transition: color 0.15s ease;
+  transition: color 0.15s ease, transform 0.15s ease;
 }
 .page-nav a:hover {
-  color: var(--green);
+  color: var(--text);
+  transform: translateY(-1px);
+}
+.page-nav a:active {
+  transform: translateY(0);
 }
 .page-nav .disabled {
-  opacity: 0.3;
+  color: var(--text-faint);
+  opacity: 0.35;
   cursor: default;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -165,5 +165,6 @@ <h1>The road to Taskplane</h1> @@
           vibe → ralph → parallel ralph → <span class="hl">taskplane</span> · ~1M lines of AI-generated code along the way
         </div>
       </div>
+    <script src="nav.js"></script>
     </body>
     </html>