A practical roadmap where every phase ships a working artifact and the next one extends
it — one running codebase growing from a single API call into a multi-agent system with
memory, tools, guardrails, and evals.
12 phases1 running codebase↗ ships an artifact each stepHover for the gist · click for the full brief
);
}
function ViewToggle({ view, setView }) {
return (
);
}
/* ============================ Serpentine grid (original) ============================ */
function SerpentineBoard({ onOpen }) {
const [wide, setWide] = useState(true);
const [peek, setPeek] = useState(null);
const boardRef = useRef(null);
const cardRefs = useRef([]);
const [segs, setSegs] = useState([]);
const [dims, setDims] = useState({ w: 0, h: 0 });
const drawnRef = useRef(false);
const [drawn, setDrawn] = useState(false);
useLayoutEffect(() => {
const el = boardRef.current;
if (!el) return;
const ro = new ResizeObserver(() => setWide(el.clientWidth >= WIDE_AT));
ro.observe(el);
setWide(el.clientWidth >= WIDE_AT);
return () => ro.disconnect();
}, []);
const recompute = useCallback(() => {
const board = boardRef.current;
if (!board) return;
const b = board.getBoundingClientRect();
const out = [];
const cards = cardRefs.current;
const R = Math.round;
for (let i = 0; i < cards.length - 1; i++) {
const a = cards[i], c = cards[i + 1];
if (!a || !c) continue;
const ra = a.getBoundingClientRect();
const rc = c.getBoundingClientRect();
const A = { l: ra.left - b.left, r: ra.right - b.left, t: ra.top - b.top, btm: ra.bottom - b.top, cx: (ra.left + ra.right) / 2 - b.left, cy: (ra.top + ra.bottom) / 2 - b.top };
const C = { l: rc.left - b.left, r: rc.right - b.left, t: rc.top - b.top, btm: rc.bottom - b.top, cx: (rc.left + rc.right) / 2 - b.left, cy: (rc.top + rc.bottom) / 2 - b.top };
const sameRow = Math.abs(A.cy - C.cy) < 24;
// Snap to a shared Y (horizontal) or shared X (vertical) so lines are perfectly straight
// even if cards differ by a hairline pixel.
let d;
if (sameRow) {
const y = R((A.cy + C.cy) / 2);
d = A.cx < C.cx
? `M ${R(A.r)} ${y} L ${R(C.l)} ${y}`
: `M ${R(A.l)} ${y} L ${R(C.r)} ${y}`;
} else {
const x = R((A.cx + C.cx) / 2);
d = `M ${x} ${R(A.btm)} L ${x} ${R(C.t)}`;
}
out.push({ d, i });
}
setSegs(out);
setDims({ w: board.clientWidth, h: board.clientHeight });
if (!drawnRef.current) {
drawnRef.current = true;
requestAnimationFrame(() => requestAnimationFrame(() => setDrawn(true)));
}
}, []);
useLayoutEffect(() => {
recompute();
const onR = () => recompute();
window.addEventListener("resize", onR);
const ro = new ResizeObserver(onR);
if (boardRef.current) ro.observe(boardRef.current);
if (document.fonts && document.fonts.ready) document.fonts.ready.then(() => recompute());
const t = setTimeout(recompute, 300);
return () => { window.removeEventListener("resize", onR); ro.disconnect(); clearTimeout(t); };
}, [recompute, wide]);
return (