The Self-Improving Stack

diff --git a/src/lib/social-images.ts b/src/lib/social-images.tsindex 9dc3176..03a34e4 100644--- a/src/lib/social-images.ts+++ b/src/lib/social-images.ts@@ -1,7 +1,7 @@ import type { OgArtKind } from '../../tools/og-art'  /** Increment when the cover design changes so shared-link caches see a new image URL. */-const DESIGN_VERSION = '2'+const DESIGN_VERSION = '3' export const coverUrl = (slug: string) => `/og/${slug}.png?v=${DESIGN_VERSION}`  export const pageCovers = {@@ -34,7 +34,6 @@ const essayFigures: Record<string, OgArtKind> = {   'redteam-architecture': 'topology',   'self-improving-agents': 'search',   'the-ensemble-and-the-edit': 'traces',-  'the-self-improving-stack': 'topology',   'vibecoding-a-browser-agent': 'search',   'self-improving-stack-agent-runtime-topology': 'topology',   'self-improving-stack-evaluation-gates': 'search',

diff --git a/tools/og-render.ts b/tools/og-render.tsindex 2b4242f..485b2c8 100644--- a/tools/og-render.ts+++ b/tools/og-render.ts@@ -21,9 +21,10 @@ export type OgInput = {   section: string   art: OgArtKind   original?: boolean+  figure?: string } -const artCache = new Map<OgArtKind, string>()+const artCache = new Map<string, string>() const fontOptions = { loadSystemFonts: false, defaultFontFamily: 'EB Garamond',   fontFiles: FONT_SPECS.map(f => join(FONT_DIR, `${f.name}-${f.weight}.ttf`)), }@@ -37,10 +38,21 @@ export async function renderOgPng(input: OgInput): Promise<Buffer> {   const size = input.title.length > 60 ? 58 : input.title.length > 32 ? 66 : 78   // Embedded SVG images cannot inherit the parent renderer's font database.   // Rasterize the figure with the same pinned fonts before embedding it.-  let art = artCache.get(input.art)+  const key = input.figure ?? input.art+  let art = artCache.get(key)   if (!art) {-    art = new Resvg(renderOgArt(input.art), { font: fontOptions }).render().asPng().toString('base64')-    artCache.set(input.art, art)+    if (input.figure) {+      // Content validation limits this to local public SVG/PNG/JPEG files.+      // Missing or invalid images must fail the build instead of silently changing the preview.+      const bytes = await readFile(join(process.cwd(), 'public', input.figure))+      const format = input.figure.split('.').pop()+      art = format === 'svg'+        ? `data:image/png;base64,${new Resvg(bytes, { font: fontOptions }).render().asPng().toString('base64')}`+        : `data:image/${format === 'png' ? 'png' : 'jpeg'};base64,${bytes.toString('base64')}`+    } else {+      art = `data:image/png;base64,${new Resvg(renderOgArt(input.art), { font: fontOptions }).render().asPng().toString('base64')}`+    }+    artCache.set(key, art)   }   const node = box({ width: 1200, height: 630, padding: '48px 60px 36px', backgroundColor: paper,     color: ink, flexDirection: 'column', fontFamily: 'Garamond', position: 'relative' },@@ -50,7 +62,7 @@ export async function renderOgPng(input: OgInput): Promise<Buffer> {     ),     box({ flex: 1, alignItems: 'center', justifyContent: 'space-between', gap: 44 },       box({ width: 610, fontSize: size, fontWeight: 700, lineHeight: 1.04, letterSpacing: '-0.025em' }, input.title),-      h('img', { src: `data:image/png;base64,${art}`, width: 400, height: 400 }),+      h('img', { src: art, width: 400, height: 400, style: { objectFit: 'contain' } }),     ),     box({ alignItems: 'center', justifyContent: 'space-between', fontFamily: 'JetBrainsMono', fontSize: 17, color: quiet },       box({}, 'drewstone.github.io'),

export type OgArtKind = 'bcww' | 'ghz' | 'linden-winter' | 'topology' | 'traces' | 'search' | 'text'const ink = '#25231e', quiet = '#777269', rule = '#d7d2c7', blue = '#315e77', red = '#a14032', paper = '#f6f3eb'const text = (x: number, y: number, value: string, size = 22, color = ink, family = 'JetBrains Mono', anchor = 'start') =>  `<text x="${x}" y="${y}" font-family="${family}" font-size="${size}" fill="${color}" text-anchor="${anchor}">${value}</text>`const line = (x1: number, y1: number, x2: number, y2: number, color = rule, width = 2) =>  `<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" stroke="${color}" stroke-width="${width}"/>`const circle = (x: number, y: number, r: number, fill = paper, stroke = blue) =>  `<circle cx="${x}" cy="${y}" r="${r}" fill="${fill}" stroke="${stroke}" stroke-width="2"/>`const serif = (x: number, y: number, value: string, size = 28, color = ink, anchor = 'start') =>  text(x, y, value, size, color, 'EB Garamond', anchor)const caption = (label: string) => text(200, 375, label, 17, quiet, 'JetBrains Mono', 'middle')// Exact support in src/content/research/bcww.mdx; every row has probability 1/5.function bcww() {  const atoms = ['0001', '0010', '0011', '0111', '1000']  return serif(200, 30, 'Five equally likely atoms', 27, ink, 'middle') +    [...'ABCD'].map((v, i) => text(62 + i * 70, 78, v, 22, quiet, undefined, 'middle')).join('') +    atoms.map((atom, row) => {      const y = 108 + row * 44      return [...atom].map((bit, col) => {        const x = 42 + col * 70        return `<rect x="${x}" y="${y - 22}" width="40" height="38" rx="3" fill="${bit === '1' ? red : 'none'}" stroke="${bit === '1' ? red : rule}"/>` +          text(x + 20, y + 4, bit, 25, bit === '1' ? paper : ink, undefined, 'middle')      }).join('') + text(350, y + 4, '1/5', 20, quiet, undefined, 'end')    }).join('') + text(200, 345, 'F = +0.0529325 bits', 24, red, undefined, 'middle')}// These probabilities reproduce the proper-subsystem entropies, not the full GHZ density matrix.// See src/content/research/ghz.mdx, "State and marginal entropies".function ghz() {  const rows: [string, number, string][] = [['0000', 3, '3/8'], ['1111', 3, '3/8'], ['1010', 1, '1/8'], ['1001', 1, '1/8']]  return serif(200, 30, 'Entropy-equivalent marginals', 27, ink, 'middle') +    rows.map(([atom, weight, probability], i) => {      const y = 93 + i * 58      return text(0, y + 8, atom, 21) +        `<rect x="83" y="${y - 14}" width="${weight * 75}" height="29" fill="${blue}"/>` +        text(390, y + 8, probability, 22, quiet, undefined, 'end')    }).join('') + text(200, 355, 'F = +0.113302 bits', 24, red, undefined, 'middle')}// Analytic asymptotic from src/content/research/linden-winter.mdx; no sampled curve or invented measurements.function lindenWinter() {  return serif(200, 42, 'An unbounded ratio', 29, ink, 'middle') +    serif(24, 142, 'R', 52) + serif(58, 156, 'L', 26) + serif(95, 142, '=', 45) +    serif(253, 150, '2 / δ', 91, blue, 'middle') +    serif(253, 206, '+ O(1)', 43, quiet, 'middle') +    line(25, 252, 375, 252) +    serif(70, 322, 'δ → 0', 40, quiet) + serif(260, 330, '∞', 91, blue) +    caption('Asymptotic · L → ∞')}function topology() {  const xs = [64, 200, 336]  return xs.map(x => line(200, 90, x, 190, blue, 2)).join('') +    xs.map(x => line(x, 210, 200, 310, blue, 2)).join('') +    circle(200, 77, 22, blue) + xs.map(x => circle(x, 200, 22)).join('') + circle(200, 323, 22, blue) +    text(200, 38, 'delegate', 20, quiet, undefined, 'middle') +    text(248, 329, 'combine', 20, quiet) + caption('Fork / join · schematic')}function traces() {  return line(34, 71, 34, 295, blue, 3) +    [75, 181, 287].map(y => circle(34, y, 8, blue)).join('') +    serif(65, 78, 'Message', 36) + text(66, 112, 'role · content', 18, quiet) +    serif(65, 184, 'Tool call', 36) + text(66, 218, 'id · name · input', 18, quiet) +    serif(65, 290, 'Result', 36) + text(66, 324, 'call id · output', 18, quiet) + caption('Event structure')}function search() {  const level1 = [90, 310], level2 = [40, 140, 260, 360]  return level1.map(x => line(200, 78, x, 179, rule, 2)).join('') +    level2.map((x, i) => line(level1[Math.floor(i / 2)], 199, x, 294, rule, 2)).join('') +    line(200, 78, 90, 179, blue, 3) + line(90, 199, 140, 294, blue, 3) +    circle(200, 64, 18, blue) + level1.map(x => circle(x, 188, 18)).join('') +    level2.map(x => circle(x, 307, 18, x === 140 ? blue : paper)).join('') + caption('Candidate search · schematic')}export function renderOgArt(kind: OgArtKind): string {  const drawing = kind === 'bcww' ? bcww() : kind === 'ghz' ? ghz() : kind === 'linden-winter' ? lindenWinter() :

diff --git a/src/content.config.ts b/src/content.config.tsindex 39ae5b9..427f3ea 100644--- a/src/content.config.ts+++ b/src/content.config.ts@@ -39,6 +39,14 @@ const revisionSchema = z.object({   scores: z.array(judgeScoreSchema).optional(), }) +// One local image supplies both the article figure and its generated link preview.+const figureSchema = z.object({+  src: z.string().regex(/^\/(?:[a-zA-Z0-9_-]+\/)*[a-zA-Z0-9_-][a-zA-Z0-9_.-]*\.(?:svg|png|jpe?g)$/, 'Use an SVG, PNG, or JPEG path under public/'),+  alt: z.string().trim().min(1),+  caption: z.string().optional(),+  source: z.string().url().optional(),+})+ const posts = defineCollection({   loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/posts' }),   schema: z.object({@@ -49,6 +57,7 @@ const posts = defineCollection({     tags: z.array(z.string()).optional(),     draft: z.boolean().optional(),     featured: z.boolean().optional(),+    figure: figureSchema.optional(),     /**      * `original: true` marks a human-authored post. Distinct color, distinct      * AuthorBadge treatment, excluded from /traces and /experiment, and@@ -168,6 +177,7 @@ const research = defineCollection({   schema: z.object({     title: z.string(), description: z.string(), assessed: z.coerce.date(),     claim: z.string(), limitation: z.string(),+    figure: figureSchema.optional(),     record_ids: z.array(z.string()).default([]), order: z.number(),   }), })

diff --git a/src/layouts/Post.astro b/src/layouts/Post.astroindex 412fc20..9c7b31b 100644--- a/src/layouts/Post.astro+++ b/src/layouts/Post.astro@@ -1,5 +1,7 @@ --- import Base from './Base.astro'+import Figure from '../components/Figure.astro'+import type { CollectionEntry } from 'astro:content' import { coverUrl } from '../lib/social-images' import AuthorBadges from '../components/AuthorBadges.astro' import SupportingTraces from '../components/SupportingTraces.astro'@@ -43,6 +45,7 @@ interface Props {   seriesPosts?: SeriesPost[]   original?: boolean   draft?: boolean+  figure?: CollectionEntry<'posts'>['data']['figure'] }  const {@@ -59,6 +62,7 @@ const {   seriesPosts = [],   original = false,   draft = false,+  figure, } = Astro.props  function formatDate(d: Date): string {@@ -153,6 +157,7 @@ const articleJsonLd = {       )}     </header>     <div class={`prose${original ? ' prose-original' : ''}`}>+      {figure && <Figure {...figure} />}       <slot />     </div>     <Revisions revisions={revisions} repo={repo} slug={slug} />

diff --git a/src/content/posts/the-self-improving-stack.mdx b/src/content/posts/the-self-improving-stack.mdxindex acdb770..b73c291 100644--- a/src/content/posts/the-self-improving-stack.mdx+++ b/src/content/posts/the-self-improving-stack.mdx@@ -4,6 +4,11 @@ description: 'A series map for self-improving agent systems, from optimization t date: 2026-06-05 tags: ['agents', 'evals', 'systems', 'self-improvement'] draft: false+figure:+  src: '/images/software-3.svg'+  alt: 'Software 1.0: source code. Software 2.0: learned neural network weights. Software 3.0: natural-language prompts.'+  caption: 'Three representations of a program, after Andrej Karpathy. Agent systems can combine all three.'+  source: 'https://www.youtube.com/watch?v=LCEmiRjPEtQ&t=85s' series: 'the-self-improving-stack' outline_trace_id: '2026-06-05T12-08-35-196Z-gpt-5.5' human_takeover: 'complete'

#!/usr/bin/env node/** * new-post — scaffold a new blog post and open it in your editor. * * Usage: *   pnpm new "Your post title"             # default: original (human-authored) *   pnpm new "Your post title" --ai        # AI-authored (no original flag) *   pnpm new "Your post title" --slug=foo  # override slug *   pnpm new "Your post title" --no-open   # don't launch editor *   pnpm new "Your post title" --tags=design,prose * * Editor selection: $BLOG_EDITOR > $EDITOR > 'cursor'. */import { existsSync } from 'node:fs'import { writeFile } from 'node:fs/promises'import { spawn } from 'node:child_process'import { join, resolve } from 'node:path'import { fileURLToPath } from 'node:url'function parse(argv) {  const args = { title: '', open: true, ai: false, slug: null, tags: null }  const pos = []  for (const a of argv) {    if (a === '--ai') args.ai = true    else if (a === '--no-open') args.open = false    else if (a.startsWith('--slug=')) args.slug = a.slice('--slug='.length)    else if (a.startsWith('--tags=')) args.tags = a.slice('--tags='.length).split(',').map((t) => t.trim()).filter(Boolean)    else pos.push(a)  }  args.title = pos.join(' ').trim()  return args}function slugify(s) {  return s    .toLowerCase()    .replace(/['']/g, '')    .replace(/[^a-z0-9]+/g, '-')    .replace(/^-+|-+$/g, '')}function today() {  const d = new Date()  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`}function yamlList(items) {  return '[' + items.map((t) => `'${t.replace(/'/g, "\\'")}'`).join(', ') + ']'}function frontmatter({ title, date, tags, original }) {  const lines = [    '---',    `title: '${title.replace(/'/g, "\\'")}'`,    `description: ''`,    `date: ${date}`,    `tags: ${yamlList(tags)}`,  ]  if (original) lines.push('original: true')  lines.push('draft: true', '---', '')  return lines.join('\n')}function body(original) {  if (original) {    return [      '{/* AI AGENTS: DO NOT EDIT. This post is human-authored. See CLAUDE.md hard rule. */}',      '',      'Open with the thing.',      '',      'Then the next thing.',      '',    ].join('\n')  }  return ['Open with the thing.', '', 'Then the next thing.', ''].join('\n')}async function main() {  const args = parse(process.argv.slice(2))  if (!args.title) {

#!/usr/bin/env node/** * gen-graphics — generate post graphics via router.tangle.tools. * * Hits the OpenAI-compatible /v1/images/generations endpoint on the * Tangle router, which proxies to gpt-image-1 / flux-1.1-pro / flux-1.1-pro-ultra. * * Auth: *   --via=router (default) → TCLOUD_API_KEY  or  ~/.tcloud/config.json *   --via=openai           → OPENAI_API_KEY * * Usage: *   pnpm gen:graphics                            # all prompts in this file *   pnpm gen:graphics --post=autonomous-autoresearch *   pnpm gen:graphics --only=01,03,10            # subset *   pnpm gen:graphics --model=flux-1.1-pro-ultra # default: gpt-image-1 *   pnpm gen:graphics --via=openai               # bypass the router * * Output: *   public/posts/<post>/<id>.png  (web-ready, full-bleed) */import { writeFile, mkdir, readFile } from 'node:fs/promises'import { existsSync } from 'node:fs'import { join, resolve } from 'node:path'import { fileURLToPath } from 'node:url'import { homedir } from 'node:os'// ─── Config ──────────────────────────────────────────────────const DEFAULT_BASE_URL = 'https://router.tangle.tools'const DEFAULT_MODEL = 'gpt-image-1'const STYLE_PREAMBLE = [  'Monochrome technical illustration on a near-black background (#0d0d0d).',  'High-contrast white linework with sparing accents in cool violet (#a78bfa).',  'Engineering-drawing / blueprint aesthetic, minimal, geometric, restrained.',  'No text, no labels, no photorealism, no stock-illustration look, no gradient orbs.',  'Composition: clean negative space, single clear subject, restrained ornament.',].join(' ')const POSTS = {  'autonomous-autoresearch': [    {      id: '01-recursive-ouroboros',      size: '1536x1024',      prompt: 'A recursive ouroboros: a sleek figure-eight loop assembled from circuit traces, code-like glyphs, and thin geometric arrows. The loop turns back on itself, where its own output becomes its own input. Centerpiece subject. Dark void around it, single small accent of violet light at the crossing point.',    },    {      id: '02-higher-d-lattice',      size: '1536x1024',      prompt: 'A faceless slender silhouette of a humanoid agent reaches one outstretched hand into a vast 3D wireframe lattice that extends into the depth of the frame. The lattice is white pin-prick nodes connected by faint white edges; some nodes glow softly in violet. The agent is partially translucent, integrated with the lattice. The lattice represents a high-dimensional state space.',    },    {      id: '03-code-rivulets',      size: '1024x1024',      prompt: 'A minimalist computer terminal seen straight-on, off-center. Translucent ghostly hands hover above the keys, partially merged with light. Streams of fine white code-like glyphs flow out of the screen and converge into a small luminous sphere floating to the right of the monitor. The sphere represents a deployed piece of software.',    },    {      id: '04-puppeteer-stack',      size: '1024x1024',      prompt: 'Two humanoid agent silhouettes stacked vertically. The upper agent holds thin white strings (like a puppeteer) that descend to the lower agent. Behind the lower agent: a hexagonal web of UI elements (rectangles, search-bar shapes, dashboard tiles) drawn in faint white linework. The upper figure is the coding agent; the lower figure is the browser agent. Restrained, no faces, no clutter.',    },    {      id: '05-watching-dashboard',      size: '1024x1024',      prompt: 'A silhouetted humanoid agent stands in profile, facing a wall of small instrument dials and bar-meters that float in a grid in the dark. Several dials glow faintly violet, others remain white. A faint feedback line curves from the meters back to the agent. The image suggests an agent that observes the metrics generated by its own actions.',    },    {      id: '06-generalization-triptych',      size: '1536x1024',      prompt: 'An ultrawide triptych. Three side-by-side panels, separated by thin vertical white rules. LEFT panel: the same agent silhouette typing at a terminal, faint code streams. MIDDLE panel: the same silhouette gesturing toward a browser-window grid of UI rectangles. RIGHT panel: the same silhouette with hand outstretched toward an industrial robotic arm. Identical figure across all three panels to show the same pattern generalizes across substrates. Black background, white linework, one tiny violet accent per panel.',    },    {      id: '07-robot-in-feedback',      size: '1536x1024',      prompt: 'An industrial robotic arm, drawn as clean white technical lineart, mid-action picking up a small geometric block. Above and around the arm: a constellation of small white nodes connected by thin lines, suggesting an external coding agent overlaid like an aura, rewriting the arm in motion. A few nodes pulse in violet. The composition: arm grounded in the lower third, constellation filling the upper two-thirds.',    },    {      id: '08-recursive-regress',      size: '1024x1024',

---title: 'Teaching Agents to Improve Themselves'description: 'We built four composable skills that turn any coding agent into an autonomous improvement loop. Here is how they work and what they found.'date: 2026-03-18tags: ['agents', 'systems', 'meta']featured: trueauthors:  - { model: 'claude-opus-4-5', role: 'draft', date: 2026-03-18 }  - { model: 'claude-opus-4-7', role: 'diagram', date: 2026-04-23 }  - { model: 'claude-opus-4-7', role: 'polish', date: 2026-04-24 }revisions:  - { date: 2026-04-23, model: 'claude-opus-4-7', note: '5 asst turns, 5 tool calls captured', commit: 'ff1e9a5daf77cb52416273aeb7cebb5c72e26be2', trace_id: '2026-04-23T23-17-37-593Z-claude-opus-4-7' }  - { date: 2026-03-18, model: 'claude-opus-4-6', note: 'initial draft — /improve, /diagnose, /research, /evolve skills, 66→81 F1 arc, anti-overfitting rules', reconstructed: true }  - { date: 2026-04-23, model: 'claude-opus-4-7', note: 'composition diagram redrawn: /evolve becomes the outer container wrapping the three commands; phase track nested inside; switched palette to current B&W + action-color vocabulary' }  - { date: 2026-04-24, model: 'claude-opus-4-7', note: 'closing tightened to the concrete shift — one overnight run, six failure modes classified, four fixed, $30 of compute replacing two weeks of diagnostic work' }---import Chart from '../../components/Chart.astro'import Sidenote from '../../components/Sidenote.astro'Last week I was running a security audit benchmark. Three AI agents, each with a different analysis profile, auditing smart contracts from past audit contests. The results were mediocre: 66% F1 on the honest baseline.<Sidenote num={1}>F1 = harmonic mean of precision and recall. See <a href="https://en.wikipedia.org/wiki/F-score">Wikipedia</a>. We use it because both false positives (wasted triage) and false negatives (missed vulns) are costly.</Sidenote> I could read through the traces, spot the failure modes, tweak the prompts, rerun. I've done this hundreds of times. Each cycle takes a few hours.Instead, I wrote a set of skills that let the coding agent do the entire cycle itself. Discover what's broken, diagnose why, hypothesize a fix, test it, keep or revert. Four skills that compose into one autonomous loop. It ran overnight and pushed F1 to 81% without overfitting.## The problem with manual tuningEvery team building on top of LLMs has the same workflow. You run your agent/pipeline/tool against a test suite. Something fails. You read the logs. You change a prompt, adjust a threshold, add a tool. You rerun. Maybe it's better. Maybe it broke something else. You check by feel.This is prompt engineering, and it has two problems. First, it doesn't scale. You can run maybe 3-4 iterations in a day if you're disciplined.<Sidenote num={2} side="left">cf. Karpathy's <a href="https://x.com/karpathy/status/1886192184808149383">autoresearch post</a>, which found ~20 additive improvements to nanochat training by running this loop autonomously for two days.</Sidenote> Second, you can't trust your own judgment about whether a change actually helped. A 2% improvement on 50 test cases could be noise. Without statistical rigor, you're guessing.The thing is, a coding agent already has everything it needs to do this work. It can read test output. It can classify failures. It can modify code and config. It can run benchmarks. It can compare results. The missing piece is structure: a protocol that tells the agent how to do each step and when to stop.## Four skills, one loopI built four Claude Code skills that compose into the full cycle:<Chart  id="skill-composition"  code={`const W = 780, H = 300const canvas = document.createElement('canvas')canvas.width = W; canvas.height = Hconst ctx = canvas.getContext('2d')const style = getComputedStyle(document.documentElement)const fg = style.getPropertyValue('--fg').trim() || '#111'const muted = style.getPropertyValue('--fg-muted').trim() || '#4a4a4a'const faint = style.getPropertyValue('--fg-faint').trim() || '#7a7a7a'const border = style.getPropertyValue('--border').trim() || '#d4d4d4'const bg = style.getPropertyValue('--bg').trim() || '#fff'const action = style.getPropertyValue('--c-action').trim() || '#6d28d9'const actionBg = style.getPropertyValue('--c-action-bg').trim() || '#ddd6fe'ctx.fillStyle = bg; ctx.fillRect(0, 0, W, H)// --- outer /evolve container ---const evolve = { x: 24, y: 20, w: W - 48, h: 180, r: 10 }function roundRect(x, y, w, h, r) {  ctx.beginPath()  ctx.moveTo(x + r, y)  ctx.arcTo(x + w, y, x + w, y + h, r)  ctx.arcTo(x + w, y + h, x, y + h, r)  ctx.arcTo(x, y + h, x, y, r)  ctx.arcTo(x, y, x + w, y, r)  ctx.closePath()}// evolve header barctx.fillStyle = actionBgroundRect(evolve.x, evolve.y, evolve.w, 32, evolve.r)ctx.fill()// patch bottom of header so it's not rounded at the bottom edgectx.fillStyle = actionBgctx.fillRect(evolve.x, evolve.y + 16, evolve.w, 16)// outer framectx.strokeStyle = actionctx.lineWidth = 1.5roundRect(evolve.x, evolve.y, evolve.w, evolve.h, evolve.r)

#!/usr/bin/env node/** * blog-loop — lowest-friction lifecycle commands for traced blog work. * * Usage: *   pnpm blog research <post> [--harness=codex|claude-code] *   pnpm blog write <post> [--harness=codex|claude-code] [--role=draft|rewrite|polish|outline|review|publish] [--marker=<token>] *   pnpm blog finish <post> --research --harness=codex --note="source scan" *   pnpm blog finish <post> --write --harness=codex --marker=<token> --note="drafted section" */import { existsSync } from 'node:fs'import { readdir, readFile } from 'node:fs/promises'import { spawnSync } from 'node:child_process'import { join, resolve } from 'node:path'import { fileURLToPath } from 'node:url'const REPO = resolve(fileURLToPath(new URL('..', import.meta.url)))const POSTS_DIR = join(REPO, 'src', 'content', 'posts')function parse(argv) {  const [cmd, ...rest] = argv  const flags = {}  const pos = []  for (const a of rest) {    if (a.startsWith('--')) {      const eq = a.indexOf('=')      if (eq > -1) flags[a.slice(2, eq)] = a.slice(eq + 1)      else flags[a.slice(2)] = true    } else {      pos.push(a)    }  }  return { cmd, post: pos.join(' ').trim(), flags }}function field(fm, name) {  const m = fm.match(new RegExp(`^${name}:\\s*(.+)$`, 'm'))  if (!m) return null  return m[1].trim().replace(/^['"]|['"]$/g, '').replace(/''/g, "'")}async function posts() {  const files = (await readdir(POSTS_DIR)).filter((f) => f.endsWith('.mdx')).sort()  const out = []  for (const file of files) {    const path = join(POSTS_DIR, file)    const raw = await readFile(path, 'utf8')    const m = raw.match(/^---\n([\s\S]*?)\n---\n/)    if (!m) continue    out.push({      slug: file.replace(/\.mdx$/, ''),      title: field(m[1], 'title') ?? file.replace(/\.mdx$/, ''),      draft: field(m[1], 'draft') !== 'false',      original: field(m[1], 'original') === 'true',    })  }  return out}function resolvePost(all, query) {  if (!query) return null  const q = query.toLowerCase()  const exact = all.find((p) => p.slug === q)  if (exact) return exact  const hits = all.filter((p) => p.slug.includes(q) || p.title.toLowerCase().includes(q))  if (hits.length === 1) return hits[0]  if (hits.length > 1) return { ambiguous: hits }  return null}function defaultMarker(post, role) {  const stamp = new Date().toISOString().replace(/[:.]/g, '-')  return `BLOGTRACE-${post.slug}-${role}-${stamp}`}function shellEscapeDoubleQuoted(value) {  return value.replace(/\\/g, '\\\\').replace(/"/g, '\\"').replace(/\$/g, '\\$').replace(/`/g, '\\`')}function printPrompt(mode, post, harness, role, marker) {

---interface Props {  id: string  code: string}const { id, code } = Astro.props---<figure class="chart-container" id={id}>  <div class="chart-inner"></div></figure><script define:vars={{ id, code }}>  requestAnimationFrame(() => {    const container = document.querySelector(`#${id} .chart-inner`)    if (!container) return    try {      const _cw = container.clientWidth      if (_cw === 0) return      const _dimMatch = code.match(/const W\s*=\s*(\d+),\s*H\s*=\s*(\d+)/)      const _origW = _dimMatch ? parseInt(_dimMatch[1]) : 0      const _origH = _dimMatch ? parseInt(_dimMatch[2]) : 0      const _newH = _origW > 0 ? Math.round(_origH * (_cw / _origW)) : 0      const wrappedCode = `        const _origCreate = document.createElement.bind(document)        const _dpr = window.devicePixelRatio || 1        const _cw = ${_cw}        const _newH = ${_newH}        const _origW = ${_origW}        document.createElement = function(tag, opts) {          const el = _origCreate(tag, opts)          if (tag === 'canvas') {            const _origGetCtx = el.getContext.bind(el)            let _scaled = false            el.getContext = function(type, attrs) {              const ctx = _origGetCtx(type, attrs)              if (type === '2d' && !_scaled) {                _scaled = true                const _dw = el.width, _dh = el.height                if (_origW > 0 && _cw !== _dw) {                  el.width = _cw * _dpr                  el.height = _newH * _dpr                  el.style.width = _cw + 'px'                  el.style.height = _newH + 'px'                  ctx.scale(_dpr * _cw / _dw, _dpr * _newH / _dh)                } else if (_dpr > 1) {                  el.width = _dw * _dpr                  el.height = _dh * _dpr                  el.style.width = _dw + 'px'                  el.style.height = _dh + 'px'                  ctx.scale(_dpr, _dpr)                }              }              return ctx            }          }          return el        }        ${code}        document.createElement = _origCreate      `      const fn = new Function('container', wrappedCode)      fn(container)    } catch (e) {      container.textContent = `Chart error: ${e.message}`    }  })</script><style>  .chart-container {    margin: var(--space-xl) calc(-1 * var(--space-lg));  }  .chart-inner {    display: block;  }

#!/usr/bin/env node/** * trace-capture: harness-agnostic session capture for blog revisions. * * Usage: *   pnpm tsx tools/trace-capture.ts capture \ *     [--harness=claude-code|codex|manual] \ *     [--post=<slug>] \ *     [--role=outline|draft|rewrite|polish|diagram|review|publish|research] \ *     [--session=<session-id>] \ *     [--marker="<token>"] \ *     [--note=<one-line>] \ *     [--commit=<sha>] \ *     [--input=<path>]            # manual harness only *     [--kind=post|series-outline|supporting-research] *     [--attach=supporting|revision|none] *     [--latest]                  # choose latest session without requiring post file touch * *   pnpm tsx tools/trace-capture.ts capture --auto *     # detects from the latest git commit: finds changed posts, matches a *     # recent session via ~/.claude/projects or ~/.codex/sessions, writes a *     # trace per changed post, appends to frontmatter. * *   pnpm tsx tools/trace-capture.ts list *     # list existing traces grouped by post. * *   pnpm tsx tools/trace-capture.ts show <trace_id> *     # dump a trace as JSON. */import { execSync } from 'node:child_process'import { mkdir, readdir, readFile, writeFile } from 'node:fs/promises'import { join } from 'node:path'import ClaudeCodeHarness from './harness/claude-code.js'import CodexHarness from './harness/codex.js'import ManualHarness from './harness/manual.js'import { dedupeAdjacentTurns, type TraceFile, type TraceHarness, type Turn } from './harness/types.js'const ROOT = process.cwd()const POSTS_DIR = join(ROOT, 'src/content/posts')const TRACES_DIR = join(ROOT, 'traces')type Args = Record<string, string | boolean>function parseArgs(argv: string[]): { cmd: string; pos: string[]; flags: Args } {  const [cmd, ...rest] = argv  const flags: Args = {}  const pos: string[] = []  for (const a of rest) {    if (a.startsWith('--')) {      const eq = a.indexOf('=')      if (eq >= 0) flags[a.slice(2, eq)] = a.slice(eq + 1)      else flags[a.slice(2)] = true    } else pos.push(a)  }  return { cmd: cmd ?? 'capture', pos, flags }}function git(cmd: string): string {  try {    return execSync(`git ${cmd}`, { cwd: ROOT, stdio: ['ignore', 'pipe', 'ignore'] }).toString().trim()  } catch {    return ''  }}function headCommit(): string | null {  const sha = git('rev-parse HEAD')  return sha || null}function changedPostsAtHead(): string[] {  const out = git('show --no-renames --name-only --format="" HEAD')  return out    .split('\n')    .map((l) => l.trim())    .filter((l) => l.startsWith('src/content/posts/') && l.endsWith('.mdx'))    .map((l) => l.replace('src/content/posts/', '').replace(/\.mdx$/, ''))}

/** * Codex CLI harness adapter. * * Reads session JSONL files under ~/.codex/sessions/YYYY/MM/DD/rollout-*.jsonl. * Codex records events slightly differently from Claude Code but the surface * we care about (user messages, assistant messages with tool use, touched * files) is recoverable. * * Codex event shapes vary across versions; this adapter tolerates unknown * keys and extracts best-effort. If a session doesn't yield any turns the * orchestrator falls through to the next one. */import { readdir, readFile, stat } from 'node:fs/promises'import { homedir } from 'node:os'import { join } from 'node:path'import type { FindOpts, Filter, SessionRef, ToolCallDetail, Turn, TraceHarness } from './types.js'import { dedupeAdjacentTurns, summarize } from './types.js'const PATH_RE = /(?:\/Users\/[^\s"'`]+|\.?\/?[\w@.-]+(?:\/[\w@.-]+)+\.(?:mdx|ts|tsx|js|jsx|astro|py|rs|go|sh|yaml|yml|toml|md|json|css|mjs))/gasync function* walk(root: string): AsyncGenerator<string> {  let entries  try { entries = await readdir(root, { withFileTypes: true }) } catch { return }  for (const e of entries) {    const p = join(root, e.name)    if (e.isDirectory()) yield* walk(p)    else if (e.isFile() && p.endsWith('.jsonl')) yield p  }}function parseJsonl(raw: string): any[] {  const out: any[] = []  for (const line of raw.split('\n')) {    const s = line.trim()    if (!s) continue    try { out.push(JSON.parse(s)) } catch { /* skip */ }  }  return out}function extractText(value: unknown): string {  if (typeof value === 'string') return value  if (Array.isArray(value)) {    return value      .map((v) => {        if (typeof v === 'string') return v        if (typeof v?.text === 'string') return v.text        if (typeof v?.content === 'string') return v.content        return ''      })      .filter(Boolean)      .join('\n')  }  if (value && typeof value === 'object') {    const v = value as any    if (typeof v.text === 'string') return v.text    if (typeof v.content === 'string') return v.content    if (Array.isArray(v.content)) return extractText(v.content)  }  return ''}function payloadOf(ev: any): any {  return ev?.payload && typeof ev.payload === 'object' ? ev.payload : ev}function timestampOf(ev: any): string {  const p = payloadOf(ev)  const ts = ev?.timestamp ?? p?.timestamp ?? p?.ts ?? p?.created_at  return typeof ts === 'string' ? ts : ''}function sessionCwd(events: any[]): string | undefined {  for (const ev of events) {    const p = payloadOf(ev)    const cwd = p?.cwd ?? p?.payload?.cwd    if (typeof cwd === 'string') return cwd  }  return undefined

diff --git a/src/pages/experiment/index.astro b/src/pages/experiment/index.astroindex 5e1eb62..fa349be 100644--- a/src/pages/experiment/index.astro+++ b/src/pages/experiment/index.astro@@ -117,7 +117,7 @@ const sections = [ ] --- -<Base title="The experiment" description="A live record of how this blog is co-authored with AI agents. Models, revisions, captured session traces, and the human-only posts that the agents are forbidden from editing." wide>+<Base title="Writing with agents" description="AI-assisted posts, revision history, and recorded agent sessions. Human originals are marked separately." wide>   <div class="lab">     <aside class="toc" aria-label="Sections">       <div class="toc-eyebrow">The experiment</div>@@ -136,10 +136,8 @@ const sections = [       <section id="premise" class="block">         <h2 class="block-h">Premise</h2>         <p class="lede">-          This blog is a live experiment in human–AI co-authorship. Most posts here are drafted,-          edited, or revisited by AI agents under my direction. Every revision the system can-          observe is logged: the model that made it, when it landed, what changed, and (when-          captured) the full session trace that produced it.+          I write here and direct AI agents to draft and edit some posts. This page records+          their revisions: the model, date, changes, and available session traces.         </p>         <p class="lede-sub">           Some posts are mine alone &mdash; hand-written, untouched by AI. The two are kept

diff --git a/src/components/Figure.astro b/src/components/Figure.astronew file mode 100644index 0000000..ed19ab6--- /dev/null+++ b/src/components/Figure.astro@@ -0,0 +1,24 @@+---+import type { CollectionEntry } from 'astro:content'++type Props = NonNullable<CollectionEntry<'posts'>['data']['figure']>+const { src, alt, caption, source } = Astro.props+---++<figure class="post-figure">+  <a class="figure-image" href={src} aria-label="Open full-size figure">+    <img src={src} alt={alt} decoding="async" />+  </a>+  {(caption || source) && <figcaption>+    {caption}+    {source && <> <a href={source}>Source</a></>}+  </figcaption>}+</figure>++<style>+  .post-figure { margin: 1.5rem auto; max-width: 32rem; }+  .figure-image { display: block; }+  img { display: block; width: 100%; height: auto; }+  a:focus-visible { outline: 2px solid var(--c-action); outline-offset: 4px; }+  figcaption { margin-top: 0.5rem; color: var(--fg-muted); font-size: 0.875rem; line-height: 1.5; }+</style>

---import { pageCoverUrl } from '../lib/social-images'interface Props {  title: string  description?: string  wide?: boolean  image?: string // Optional explicit path or absolute URL.  type?: 'website' | 'article'  publishedTime?: Date  modifiedTime?: Date  tags?: string[]  jsonLd?: object | null // pre-built JSON-LD; injected as a script tag}const SITE_NAME = 'drew'const SITE_TAGLINE = 'Notes on systems, agents, and math.'const {  title,  description = SITE_TAGLINE,  wide = false,  image = pageCoverUrl(Astro.url.pathname),  type = 'website',  publishedTime,  modifiedTime,  tags = [],  jsonLd = null,} = Astro.propsconst year = new Date().getFullYear()const site = Astro.site ?? new URL('https://drewstone.github.io')const canonical = new URL(Astro.url.pathname, site).toString()const ogImage = image.startsWith('http')  ? image  : new URL(image, site).toString()const isHome = Astro.url.pathname === '/' || Astro.url.pathname === ''const fullTitle = isHome  ? `${SITE_NAME} · ${SITE_TAGLINE}`  : `${title} · ${SITE_NAME}`const personJsonLd = {  '@context': 'https://schema.org',  '@type': 'Person',  name: 'Drew Stone',  alternateName: 'drew',  url: site.toString(),  sameAs: ['https://github.com/drewstone', 'https://tangle.tools'],  jobTitle: 'Builder',  worksFor: {    '@type': 'Organization',    name: 'Tangle',    url: 'https://tangle.tools',  },}const websiteJsonLd = isHome  ? {      '@context': 'https://schema.org',      '@type': 'WebSite',      url: site.toString(),      name: SITE_NAME,      description: SITE_TAGLINE,      inLanguage: 'en',    }  : null---<!doctype html><html lang="en">  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width, initial-scale=1" />    <title>{fullTitle}</title>    <meta name="description" content={description} />    <link rel="canonical" href={canonical} />    <meta property="og:title" content={fullTitle} />    <meta property="og:description" content={description} />    <meta property="og:type" content={type} />    <meta property="og:url" content={canonical} />

/** * Manual harness — read a JSONL or plain-text transcript from a file or stdin. * * Useful when a revision comes from a harness we don't have an adapter for * (web Claude, API SDK, another CLI). Supply the turns directly. * * Accepted formats (auto-detected): *   1) JSONL with {role, text|content, ts?} per line *   2) Markdown with **User:** / **Assistant:** headers *   3) JSON array of {role, text} objects */import { readFile } from 'node:fs/promises'import type { FindOpts, Filter, SessionRef, Turn, TraceHarness } from './types.js'import { summarize } from './types.js'function parseMarkdownTranscript(raw: string): Turn[] {  const turns: Turn[] = []  const blocks = raw.split(/\n(?=\*\*(?:User|Assistant|System)(?:\s*\([^)]+\))?:\*\*)/i)  let seq = 0  for (const block of blocks) {    const m = block.match(/^\*\*(User|Assistant|System)(?:\s*\(([^)]+)\))?:\*\*\s*([\s\S]*)$/i)    if (!m) continue    const role = m[1].toLowerCase() as Turn['role']    const body = m[3].trim()    if (!body) continue    if (role === 'user') turns.push({ role: 'user', seq, text: summarize(body, 600), ts: '' })    else if (role === 'assistant')      turns.push({ role: 'assistant', seq, text_summary: summarize(body, 280), text: body.length < 600 ? body : undefined, ts: '' })    seq++  }  return turns}function parseTurns(raw: string): Turn[] {  const trimmed = raw.trim()  if (!trimmed) return []  if (trimmed.startsWith('[')) {    try {      const arr = JSON.parse(trimmed)      return arr        .filter((t: any) => t?.role && (t.text || t.content))        .map((t: any, index: number) => ({          role: t.role,          seq: index,          text: summarize(String(t.text ?? t.content), 600),          ts: String(t.ts ?? ''),        }))    } catch {      /* fall through */    }  }  if (trimmed.includes('\n{') || trimmed.startsWith('{')) {    const out: Turn[] = []    let seq = 0    for (const line of trimmed.split('\n')) {      const s = line.trim()      if (!s) continue      try {        const ev = JSON.parse(s)        if (!ev.role) continue        if (ev.role === 'user' || ev.role === 'system') {          out.push({ role: ev.role, seq, text: summarize(String(ev.text ?? ev.content ?? ''), 600), ts: String(ev.ts ?? '') })          seq++        } else if (ev.role === 'assistant') {          out.push({            role: 'assistant',            seq,            text_summary: summarize(String(ev.text ?? ev.content ?? ''), 280),            ts: String(ev.ts ?? ''),          })          seq++        }      } catch {        /* skip malformed */      }    }    if (out.length) return out  }  return parseMarkdownTranscript(raw)