Skip to content

feat(site): blog essay #9 — "Hand on the Tiller" (course correction & alignment) #358

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
crs48 merged 4 commits into from
Jul 3, 2026
Merged

feat(site): blog essay #9 — "Hand on the Tiller" (course correction & alignment) #358

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7597b6a
docs(exploration): explore course correction and alignment across eve…
Jul 3, 2026
2461590
feat(site): add blog essay #9 "Hand on the Tiller"
Jul 3, 2026
fafe0a2
docs(changelog): add fragment for Hand on the Tiller essay
Jul 3, 2026
688797d
docs(exploration): check off hand on the tiller course correction and…
Jul 3, 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
769 changes: 769 additions & 0 deletions ...6_[x]_HAND_ON_THE_TILLER_COURSE_CORRECTION_AND_ALIGNMENT_ACROSS_EVERY_SYSTEM.md
View file
Open in desktop

Large diffs are not rendered by default.

158 changes: 158 additions & 0 deletions site/src/components/blog/AlignmentStack.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,158 @@
---
// The "one diagram" slot for post #9 (exploration 0256), mirroring the
// HydrostaticBalance / DustBridge / GrowthVsLeverage card idiom (not-prose,
// bordered surface) so the posts read as one publication. Alignment isn't a
// single AI problem; it's a property of a NESTED stack of systems. Concentric
// shells — physics (outer) → planet → society → technology → AI (inner). The
// public debate clusters on the innermost seam (AI ↔ human) while the inner
// shells have drifted off the true axis. The cosmic-X burns at the core. All
// inline SVG; ships nothing third-party (Self-Audit parity).

// Ring centres drift rightward and up as they go inner — the "aligned" axis is
// the dashed plumb line at trueX; the inner shells have wandered off it.
const trueX = 352
const rings = [
{ name: 'Physics', cx: 352, cy: 230, r: 198, op: 0.32 },
{ name: 'Planet', cx: 357, cy: 228, r: 158, op: 0.42 },
{ name: 'Society', cx: 363, cy: 226, r: 119, op: 0.52 },
{ name: 'Technology', cx: 372, cy: 224, r: 81, op: 0.68 },
{ name: 'AI', cx: 382, cy: 222, r: 44, op: 0.9 }
]
const core = rings[rings.length - 1]

// Each layer, and the proxy that captured its goal. The technology↔human seam is
// the only one a small open-source project can actually repair.
const legend = [
{ name: 'Physics', note: 'the one setpoint you can’t game — entropy always votes', xnet: false },
{ name: 'Planet', note: 'steered by GDP; six of nine planetary boundaries crossed', xnet: false },
{ name: 'Society', note: 'steered by metrics and quarterly targets (Goodhart, org edition)', xnet: false },
{ name: 'Technology', note: 'steered by engagement, not wellbeing — the seam xNet repairs', xnet: true },
{ name: 'AI', note: 'steered by a fixed objective standing in for what we actually want', xnet: false }
]
---

<section class="not-prose my-12">
<div class="rounded-2xl border border-border bg-surface/30 p-6 dark:bg-surface/40 lg:p-8">
<h3 class="text-xl font-bold tracking-tight text-gray-900 dark:text-white">
The alignment stack
</h3>
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
Alignment is a relationship at a seam between two systems — and the systems
nest. We argue about the innermost seam while the outer ones drift.
</p>

<div class="mt-6 overflow-x-auto">
<svg
viewBox="0 0 720 452"
class="mx-auto block h-auto w-full max-w-xl"
role="img"
aria-label="Concentric shells from physics on the outside to AI at the core; the inner shells have drifted off the true axis, and the public debate clusters on the innermost AI seam."
>
<defs>
<radialGradient id="coreglow" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#7dd3fc" stop-opacity="0.95" />
<stop offset="45%" stop-color="#38bdf8" stop-opacity="0.4" />
<stop offset="100%" stop-color="#38bdf8" stop-opacity="0" />
</radialGradient>
<linearGradient id="corex" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#e0f2fe" />
<stop offset="100%" stop-color="#38bdf8" />
</linearGradient>
</defs>

<!-- the true axis: "aligned" is the plumb line the inner shells drift from -->
<line
x1={trueX}
y1="26"
x2={trueX}
y2="426"
stroke="#38bdf8"
stroke-width="1.2"
stroke-dasharray="2 7"
opacity="0.4"
/>

<!-- the nested shells -->
{
rings.map((ring) => (
<g>
<circle
cx={ring.cx}
cy={ring.cy}
r={ring.r}
fill="none"
stroke="#38bdf8"
stroke-width="1.6"
opacity={ring.op}
/>
<text
x={ring.cx}
y={ring.cy - ring.r - 8}
text-anchor="middle"
font-family="ui-sans-serif, system-ui, sans-serif"
font-size="14"
font-weight="600"
fill="#7dd3fc"
>
{ring.name}
</text>
</g>
))
}

<!-- the core: the cosmic-X, burning at the AI seam -->
<g transform={`translate(${core.cx} ${core.cy})`}>
<circle cx="0" cy="0" r="40" fill="url(#coreglow)" />
<g stroke="url(#corex)" stroke-width="5" stroke-linecap="round" transform="translate(-10 -10)">
<line x1="0" y1="0" x2="20" y2="20" />
<line x1="20" y1="0" x2="0" y2="20" />
</g>
</g>

<!-- annotation: the public debate lives on the innermost seam -->
<g font-family="ui-sans-serif, system-ui, sans-serif">
<line
x1={core.cx + core.r + 4}
y1={core.cy}
x2="560"
y2="150"
stroke="#94a3b8"
stroke-width="1.2"
opacity="0.7"
/>
<text x="566" y="140" font-size="13" font-weight="600" fill="#cbd5e1">
the public debate
</text>
<text x="566" y="158" font-size="13" fill="#94a3b8">
lives here
</text>
</g>
</svg>
</div>

<ul class="mt-6 space-y-2.5 border-t border-border pt-5">
{
legend.map((row) => (
<li class="grid gap-1.5 sm:grid-cols-[8rem_1fr] sm:gap-4 sm:items-baseline">
<span
class:list={[
'font-mono text-sm font-semibold',
row.xnet ? 'text-sky-600 dark:text-sky-400' : 'text-gray-500 dark:text-gray-400'
]}
>
{row.name}
</span>
<span class="text-sm leading-relaxed text-gray-700 dark:text-gray-200">{row.note}</span>
</li>
))
}
</ul>

<p class="mt-5 border-t border-border pt-4 text-sm leading-relaxed text-gray-600 dark:text-gray-300">
Bolt an aligned AI onto a technology layer that runs on extraction, on a
society that steers by GDP, on a planet past six of nine limits, and you
haven’t fixed the course — you’ve built a
<span class="font-semibold text-gray-900 dark:text-white">faster way to hold the wrong one</span>.
</p>
</div>
</section>
54 changes: 54 additions & 0 deletions site/src/components/blog/HonestTiller.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
---
// The honesty beat for post #9 (exploration 0256), modeled on HonestExit /
// HonestStar / HonestGarden. An essay that reaches from AI safety to the
// biosphere has to be loud about where its own metaphor thins and where a notes
// app stops being able to help — or it's just another cure-all. So we say plainly
// what "steering" does and doesn't buy.
const rows = [
{
isnt: 'The romantic “off course 90% of the time” line is a myth.',
is: 'A rocket to the Moon isn’t flailing and constantly saving itself — real Apollo was precise, and needed only one to a handful of midcourse corrections. The honest idea underneath is quieter: negative feedback. Sense the gap, close a little of it, repeat. You don’t need the exaggeration.'
},
{
isnt: 'We won’t pretend to know what everything should be aligned to.',
is: 'The whole point is that you can’t freeze “what humans want” into a fixed target and optimize it — that’s the King Midas trap. Be suspicious of anyone who claims the human utility function, us included. Steering keeps the goal open to revision; that’s the feature, not a gap.'
},
{
isnt: 'We won’t pretend software realigns the planet.',
is: 'xNet touches exactly one seam — technology ↔ human. It does nothing about carbon, GDP, or AI safety writ large. What it can do is hand one person back the instruments of course correction over their own information: undo, exit, consent, a machine they can read.'
},
{
isnt: 'We won’t pretend a good tiller picks the destination.',
is: 'Feedback is necessary, not sufficient. A steady hand can hold a bad course. Undo, exit, and consent make correction possible; they don’t choose where you’re going. That part is still yours — which is the only place it should live.'
}
]
---

<section class="not-prose my-12">
<div class="rounded-2xl border border-border bg-surface/30 p-6 dark:bg-surface/40 lg:p-8">
<h3 class="text-xl font-bold tracking-tight text-gray-900 dark:text-white">
An honest heading
</h3>
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
A metaphor that oversells itself is just more marketing. Here’s where this
one thins out.
</p>

<ul class="mt-6 space-y-5">
{
rows.map((row) => (
<li class="grid gap-3 sm:grid-cols-[1fr_1.3fr] sm:gap-5">
<div class="flex gap-2.5">
<span class="select-none text-gray-400 dark:text-gray-600">✕</span>
<p class="text-sm leading-relaxed text-gray-500 dark:text-gray-400">{row.isnt}</p>
</div>
<div class="flex gap-2.5">
<span class="select-none text-sky-500">✓</span>
<p class="text-sm leading-relaxed text-gray-700 dark:text-gray-200">{row.is}</p>
</div>
</li>
))
}
</ul>
</div>
</section>
129 changes: 129 additions & 0 deletions site/src/components/blog/TillerArt.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
---
// Decorative art for blog post #9 (exploration 0256), extracted from TillerHero so
// the same inline SVG backs both the post hero and the blog-index preview card
// (no external assets — Self-Audit parity). A small boat holds a line across open
// water toward a fixed guiding star: the cosmic-X, glowing sky-blue. The dotted
// wake behind it zig-zags — constant small course corrections — and the swings
// shrink as the boat settles onto the bearing. Steering, drawn literally: you
// never arrive at "aligned"; you hold a course.
interface Props {
/** Override the wrapper classes; defaults to full-bleed for hero use. */
class?: string
}
const { class: className = 'pointer-events-none absolute inset-0 h-full w-full' } =
Astro.props

// The guiding star (cosmic-X) and the boat; the bearing line runs between them.
const star = { x: 838, y: 92 }
const boat = { x: 300, y: 236 }

// The wake: the course already sailed, oscillating around the bearing and
// converging on it as it nears the boat (amplitude decays left→right).
const wake = [
[64, 250],
[98, 231],
[131, 251],
[165, 233],
[199, 248],
[232, 234],
[265, 245],
[298, 237]
]
.map(([x, y]) => `${x},${y}`)
.join(' ')
---

<svg
class={className}
viewBox="0 0 1040 340"
preserveAspectRatio="xMidYMid slice"
aria-hidden="true"
>
<defs>
<linearGradient id="tillerbg" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#071a28" />
<stop offset="52%" stop-color="#0a2233" />
<stop offset="62%" stop-color="#08202f" />
<stop offset="100%" stop-color="#050f18" />
</linearGradient>
<radialGradient id="starglow" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#7dd3fc" stop-opacity="0.95" />
<stop offset="45%" stop-color="#38bdf8" stop-opacity="0.4" />
<stop offset="100%" stop-color="#38bdf8" stop-opacity="0" />
</radialGradient>
<linearGradient id="starx" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#e0f2fe" />
<stop offset="100%" stop-color="#38bdf8" />
</linearGradient>
</defs>

<rect width="1040" height="340" fill="url(#tillerbg)" />

<!-- a scatter of faint stars in the night sky -->
<g fill="#7dd3fc" opacity="0.5">
<circle cx="140" cy="60" r="1.4" />
<circle cx="360" cy="42" r="1.1" />
<circle cx="520" cy="80" r="1.5" />
<circle cx="690" cy="52" r="1.2" />
<circle cx="930" cy="150" r="1.3" />
<circle cx="255" cy="110" r="1" />
<circle cx="612" cy="150" r="1" />
</g>

<!-- the sea: horizon and a few settling swells -->
<g stroke="#1e5068" stroke-width="1.4" opacity="0.55" fill="none" stroke-linecap="round">
<line x1="0" y1="212" x2="1040" y2="212" opacity="0.7" />
<path d="M0 250 Q 130 242 260 250 T 520 250 T 780 250 T 1040 250" opacity="0.5" />
<path d="M0 288 Q 150 279 300 288 T 600 288 T 900 288 T 1040 288" opacity="0.35" />
</g>

<!-- the intended course: a faint bearing line from the boat to the guiding star -->
<line
x1={boat.x}
y1={boat.y - 6}
x2={star.x}
y2={star.y + 18}
stroke="#38bdf8"
stroke-width="1.4"
stroke-dasharray="2 7"
opacity="0.5"
/>

<!-- the wake: the course already sailed — constant small corrections, converging -->
<polyline
points={wake}
fill="none"
stroke="#7dd3fc"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
stroke-dasharray="1 6"
opacity="0.75"
/>

<!-- the boat, heeled slightly to the wind, holding its line -->
<g transform={`translate(${boat.x} ${boat.y}) rotate(-6)`}>
<!-- hull -->
<path
d="M -34 0 Q -20 15 0 15 Q 20 15 34 0 Z"
fill="#0f2f42"
stroke="#7dd3fc"
stroke-width="1.6"
/>
<!-- mast -->
<line x1="-2" y1="0" x2="-2" y2="-44" stroke="#cbd5e1" stroke-width="2" stroke-linecap="round" />
<!-- sail, filled by the wind -->
<path d="M -2 -42 Q 22 -28 16 -4 L -2 -4 Z" fill="#1e5068" stroke="#7dd3fc" stroke-width="1.2" opacity="0.9" />
<!-- tiller: a short bar at the stern, the hand's small correction -->
<line x1="-34" y1="2" x2="-52" y2="-4" stroke="#38bdf8" stroke-width="2.2" stroke-linecap="round" />
</g>

<!-- the guiding star: the cosmic-X, glowing sky-blue, fixed high in the sky -->
<g transform={`translate(${star.x} ${star.y})`}>
<circle cx="0" cy="0" r="40" fill="url(#starglow)" />
<g stroke="url(#starx)" stroke-width="5.5" stroke-linecap="round" transform="translate(-11 -11)">
<line x1="0" y1="0" x2="22" y2="22" />
<line x1="22" y1="0" x2="0" y2="22" />
</g>
</g>
</svg>
38 changes: 38 additions & 0 deletions site/src/components/blog/TillerHero.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
---
// Hero band for blog post #9 (exploration 0256). The decorative art lives in
// TillerArt.astro so the same inline SVG backs both this hero and the blog-index
// preview card; this component layers the post's title/deck over it.
import TillerArt from './TillerArt.astro'

interface Props {
title: string
deck: string
date: string
readingMinutes: number
tags: string[]
}
const { title, deck, date, readingMinutes, tags } = Astro.props
---

<section class="relative overflow-hidden border-b border-border bg-surface/20 dark:bg-[#050f18]">
<TillerArt />

<div class="relative mx-auto max-w-3xl px-6 pb-14 pt-44 lg:pt-52">
<div class="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-sky-200/80">
<time datetime={date}>{date}</time>
<span aria-hidden="true">·</span>
<span>{readingMinutes} min read</span>
{
tags.map((tag) => (
<span class="rounded-full border border-sky-400/30 bg-sky-500/10 px-2 py-0.5 font-mono lowercase text-sky-200">
{tag}
</span>
))
}
</div>
<h1 class="mt-4 text-4xl font-bold tracking-tight text-white drop-shadow lg:text-5xl">
{title}
</h1>
<p class="mt-4 max-w-2xl text-lg leading-relaxed text-gray-300">{deck}</p>
</div>
</section>
Loading
Loading