Every engineering team shipping AI agents into production eventually hits the exact same wall: the model can solve Olympiad-level math in milliseconds, yet it still tells a customer on live chat that your return policy is 90 days when you changed it last week, or approves an $800 refund without manager sign-off.
In The five layers of agentic context, Sanity co-founder and CEO Magnus Hillestad breaks down why the common advice to "just give the agent context" falls apart at scale. Building on Evan Armstrong's observation that value is shifting from systems of record (which store data) to context layers (which store meaning), Magnus makes a crucial architectural correction: context is not a singular thing.
Instead of dumping every Slack thread, ticket, database row, and policy doc into a single vector "company brain" (the 2026 equivalent of a 2016 data lake turning into a data swamp), production agents rely on five distinct layers of context: Situation, Records, Memory, Process, and Canon. Each layer turns at its own pace, has its own owner, and fails in its own unique way. And most importantly: Canon only turns when someone signs off.
Interactive demo: the Situation to Canon wheel
To bring the mechanical model from the Sanity article to life on CodingCat.dev, I built an interactive HTML and SVG version of the five-wheel apparatus below. Notice the pulsing signal on the right-hand lever: click the handle to start the machine and sign off a Canon revision, or click any of the five layer plates along the linear track to move the read-head carriage and inspect that layer's telemetry.
{
"_key": "b06_html",
"_type": "htmlBlock",
"html": "<div id=\"cc-sanity-wheel-root\" style=\"width:100%;max-width:1040px;margin:24px auto;background:#070709;border:1px solid #27272f;border-radius:16px;padding:20px 24px;color:#f8fafc;font-family:Inter,system-ui,sans-serif;box-shadow:0 20px 50px rgba(0,0,0,0.75);\">\n <style>\n #cc-sanity-wheel-root * { box-sizing: border-box; }\n #cc-sanity-wheel-root .cc-hdr { display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:1px solid #1c1c22;padding-bottom:12px;margin-bottom:12px; }\n #cc-sanity-wheel-root .cc-pill { display:inline-flex;align-items:center;gap:8px;font-family:'IBM Plex Mono',monospace;font-size:12px;padding:5px 12px;border-radius:999px;background:#121217;border:1px solid #2e2e38;color:#94a3b8; }\n #cc-sanity-wheel-root .cc-pill.active { border-color:#ff5500;color:#fff;background:rgba(255,85,0,0.14); }\n #cc-sanity-wheel-root .cc-dot { width:8px;height:8px;border-radius:50%;background:#ff5500;box-shadow:0 0 8px #ff5500; }\n #cc-sanity-wheel-root .cc-pill.active .cc-dot { background:#c5e86c;box-shadow:0 0 8px #c5e86c; }\n @keyframes ccRing1 { 0% { r:17px;opacity:0.95;stroke-width:2.5px; } 100% { r:44px;opacity:0;stroke-width:0.5px; } }\n @keyframes ccRing2 { 0% { r:17px;opacity:0.8;stroke-width:2px; } 100% { r:58px;opacity:0;stroke-width:0.3px; } }\n @keyframes ccFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-4px); } }\n #cc-sanity-wheel-root .cc-ring-1 { animation:ccRing1 1.75s cubic-bezier(0.16,1,0.3,1) infinite;pointer-events:none; }\n #cc-sanity-wheel-root .cc-ring-2 { animation:ccRing2 1.75s cubic-bezier(0.16,1,0.3,1) 0.55s infinite;pointer-events:none; }\n #cc-sanity-wheel-root .cc-callout { animation:ccFloat 2.2s ease-in-out infinite;cursor:pointer; }\n #cc-sanity-wheel-root .cc-handle { cursor:pointer; }\n #cc-sanity-wheel-root .cc-handle:hover .cc-knob-out { stroke:#ff7a33;stroke-width:2.8px; }\n #cc-sanity-wheel-root .cc-plate { cursor:pointer; }\n #cc-sanity-wheel-root .cc-deck { margin-top:14px;display:grid;grid-template-columns:1.3fr 1fr;gap:14px; }\n @media(max-width:780px){ #cc-sanity-wheel-root .cc-deck { grid-template-columns:1fr; } }\n #cc-sanity-wheel-root .cc-card { background:#141418;border:1px solid #27272f;border-radius:10px;padding:14px 16px; }\n #cc-sanity-wheel-root .cc-btn { font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;padding:8px 12px;border-radius:7px;border:1px solid #383846;background:#1c1c24;color:#fff;cursor:pointer; }\n #cc-sanity-wheel-root .cc-btn-pri { background:#ff5500;border-color:#ff7733; }\n #cc-sanity-wheel-root .cc-bars { display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:10px; }\n #cc-sanity-wheel-root .cc-col { background:#101015;border:1px solid #22222b;border-radius:6px;padding:6px 4px;text-align:center;cursor:pointer;font-family:'IBM Plex Mono',monospace; }\n #cc-sanity-wheel-root .cc-col.sel { border-color:#ff5500; }\n </style>\n <div class=\"cc-hdr\">\n <div>\n <div style=\"font-size:20px;font-weight:700;\">The five layers of agentic context</div>\n <div style=\"font-size:14px;color:#94a3b8;margin-top:3px;\">Each wheel turns at its own pace. <strong style=\"color:#fff;\">Canon only turns when someone signs off.</strong></div>\n </div>\n <div class=\"cc-pill\" id=\"cc-status-pill\"><span class=\"cc-dot\"></span><span id=\"cc-status-txt\">SIGNAL READY - CLICK HANDLE TO START</span></div>\n </div>\n <div style=\"background:#040405;border-radius:12px;border:1px solid #19191f;overflow:hidden;\">\n <svg id=\"cc-wheel-svg\" viewBox=\"0 0 1024 600\" style=\"width:100%;height:auto;display:block;\">\n <defs>\n <linearGradient id=\"ccDarkDrum\" x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n <stop offset=\"0%\" stop-color=\"#222226\"/><stop offset=\"28%\" stop-color=\"#1b1b1f\"/><stop offset=\"44%\" stop-color=\"#28282e\"/><stop offset=\"62%\" stop-color=\"#141417\"/><stop offset=\"100%\" stop-color=\"#070709\"/>\n </linearGradient>\n <linearGradient id=\"ccDarkFace\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n <stop offset=\"0%\" stop-color=\"#1b1b1f\"/><stop offset=\"100%\" stop-color=\"#0b0b0e\"/>\n </linearGradient>\n <linearGradient id=\"ccCanonDrum\" x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n <stop offset=\"0%\" stop-color=\"#ff6b1a\"/><stop offset=\"28%\" stop-color=\"#ff7e38\"/><stop offset=\"42%\" stop-color=\"#ff9357\"/><stop offset=\"56%\" stop-color=\"#f54d00\"/><stop offset=\"84%\" stop-color=\"#c43800\"/><stop offset=\"100%\" stop-color=\"#8c2500\"/>\n </linearGradient>\n <linearGradient id=\"ccCanonFace\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n <stop offset=\"0%\" stop-color=\"#e64600\"/><stop offset=\"100%\" stop-color=\"#992a00\"/>\n </linearGradient>\n <linearGradient id=\"ccBaseTop\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n <stop offset=\"0%\" stop-color=\"#18181c\"/><stop offset=\"100%\" stop-color=\"#0c0c0e\"/>\n </linearGradient>\n <linearGradient id=\"ccPillarFront\" x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n <stop offset=\"0%\" stop-color=\"#1e1e22\"/><stop offset=\"100%\" stop-color=\"#0b0b0d\"/>\n </linearGradient>\n <linearGradient id=\"ccPillarSide\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n <stop offset=\"0%\" stop-color=\"#151518\"/><stop offset=\"100%\" stop-color=\"#09090b\"/>\n </linearGradient>\n </defs>\n <rect width=\"1024\" height=\"600\" fill=\"#040406\"/>\n <g id=\"cc-base\">\n <path d=\"M 22 332 L 736 584 Q 758 592 776 580 L 994 434 L 994 447 L 776 593 Q 758 603 736 595 L 22 344 Z\" fill=\"#09090b\" stroke=\"#363640\" stroke-width=\"1.1\"/>\n <path d=\"M 22 304 L 736 556 Q 758 564 776 552 L 994 406 L 994 434 L 776 580 Q 758 592 736 584 L 22 332 Z\" fill=\"#101014\" stroke=\"#454552\" stroke-width=\"1.2\"/>\n <path d=\"M 22 304 Q 14 298 25 290 L 214 166 Q 228 157 246 163 L 988 392 Q 1002 398 994 406 L 776 552 Q 758 564 736 556 Z\" fill=\"url(#ccBaseTop)\" stroke=\"#4c4c5a\" stroke-width=\"1.3\"/>\n <polygon points=\"94,296 128,273 778,497 744,520\" fill=\"#0b0b0e\" stroke=\"#3c3c48\" stroke-width=\"1.1\"/>\n <line x1=\"101\" y1=\"292\" x2=\"751\" y2=\"516\" stroke=\"#5a5a6a\" stroke-width=\"1.4\"/>\n <line x1=\"108\" y1=\"287\" x2=\"758\" y2=\"511\" stroke=\"#434350\" stroke-width=\"1.1\"/>\n <line x1=\"115\" y1=\"282\" x2=\"765\" y2=\"506\" stroke=\"#5a5a6a\" stroke-width=\"1.4\"/>\n <polygon points=\"62,317 94,296 744,520 712,541\" fill=\"#131318\" stroke=\"#33333e\" stroke-width=\"1\"/>\n <g id=\"cc-ticks\"></g>\n <polygon points=\"74,284 86,288 86,314 74,310\" fill=\"#151519\" stroke=\"#525260\"/>\n <polygon points=\"86,288 131,257 131,283 86,314\" fill=\"#0f0f13\" stroke=\"#454552\"/>\n <polygon points=\"74,284 119,253 131,257 86,288\" fill=\"#222228\" stroke=\"#686878\"/>\n <polygon points=\"728,509 740,513 740,539 728,535\" fill=\"#151519\" stroke=\"#525260\"/>\n <polygon points=\"740,513 785,482 785,508 740,539\" fill=\"#0f0f13\" stroke=\"#454552\"/>\n <polygon points=\"728,509 773,478 785,482 740,513\" fill=\"#222228\" stroke=\"#686878\"/>\n </g>\n <g id=\"cc-plates\"></g>\n <g id=\"cc-left-pillar\">\n <polygon points=\"164,258 206,272 288,216 246,202\" fill=\"#1b1b20\" stroke=\"#4d4d5a\"/>\n <polygon points=\"176,94 202,103 202,270 176,261\" fill=\"url(#ccPillarFront)\" stroke=\"#555564\"/>\n <polygon points=\"202,103 284,44 284,214 202,270\" fill=\"url(#ccPillarSide)\" stroke=\"#454552\"/>\n <polygon points=\"176,94 258,35 284,44 202,103\" fill=\"#24242b\" stroke=\"#6e6e80\"/>\n </g>\n <g id=\"cc-drums\"></g>\n <g id=\"cc-bridge\">\n <polygon points=\"508,26 528,33 528,108 508,101\" fill=\"#141418\" stroke=\"#4c4c5a\"/>\n <polygon points=\"434,52 514,12 536,19 456,59\" fill=\"#1e1e24\" stroke=\"#5a5a6a\"/>\n <g id=\"cc-plunger-mem\">\n <path d=\"M 498,76 L 512,72 L 524,76 L 524,132 C 524,138 498,138 498,132 Z\" fill=\"#16161b\" stroke=\"#686878\" stroke-width=\"1.2\"/>\n <path d=\"M 505,135 A 6,4 0 1,1 517,135\" fill=\"none\" stroke=\"#8a8a9e\" stroke-width=\"1.2\"/>\n </g>\n <g id=\"cc-plunger-can\">\n <path d=\"M 711,152 L 725,148 L 737,152 L 737,206 C 737,212 711,212 711,206 Z\" fill=\"#16161b\" stroke=\"#9a9aae\" stroke-width=\"1.3\"/>\n <path d=\"M 718,209 A 6,4 0 1,1 730,209\" fill=\"none\" stroke=\"#ffd4be\" stroke-width=\"1.3\"/>\n </g>\n <polygon points=\"434,52 798,177 798,193 434,68\" fill=\"#17171c\" stroke=\"#5a5a6a\"/>\n <polygon points=\"434,52 452,42 816,166 798,177\" fill=\"#23232a\" stroke=\"#6e6e80\"/>\n <line id=\"cc-beam-sig\" x1=\"510\" y1=\"73\" x2=\"724\" y2=\"147\" stroke=\"#ff5500\" stroke-width=\"2.5\" stroke-dasharray=\"8 6\" opacity=\"0\"/>\n <polygon points=\"594,95 624,105 624,123 594,113\" fill=\"#16161b\" stroke=\"#5d5d6e\"/>\n <polygon points=\"624,105 646,92 646,110 624,123\" fill=\"#101014\" stroke=\"#4c4c5a\"/>\n <polygon points=\"594,95 616,82 646,92 624,105\" fill=\"#282832\" stroke=\"#7c7c90\"/>\n <circle id=\"cc-relay-led\" cx=\"620\" cy=\"94\" r=\"3\" fill=\"#3a3a46\"/>\n </g>\n <g id=\"cc-right-pillar\">\n <polygon points=\"722,455 768,471 854,412 808,396\" fill=\"#1d1d22\" stroke=\"#555564\"/>\n <polygon points=\"734,202 768,214 768,469 734,457\" fill=\"url(#ccPillarFront)\" stroke=\"#5e5e6e\"/>\n <polygon points=\"768,214 844,162 844,417 768,469\" fill=\"url(#ccPillarSide)\" stroke=\"#50505e\"/>\n <polygon points=\"734,202 810,150 844,162 768,214\" fill=\"#25252d\" stroke=\"#7a7a8e\"/>\n <polygon points=\"752,161 798,177 798,193 752,177\" fill=\"#17171c\" stroke=\"#5a5a6a\"/>\n <polygon points=\"752,161 770,151 816,166 798,177\" fill=\"#23232a\" stroke=\"#6e6e80\"/>\n <ellipse cx=\"806\" cy=\"322\" rx=\"22\" ry=\"34\" transform=\"rotate(18 806 322)\" fill=\"#111115\" stroke=\"#585868\" stroke-width=\"1.4\"/>\n <ellipse cx=\"808\" cy=\"323\" rx=\"17\" ry=\"26\" transform=\"rotate(18 808 323)\" fill=\"#0c0c0f\" stroke=\"#454554\"/>\n <ellipse cx=\"798\" cy=\"388\" rx=\"13\" ry=\"20\" transform=\"rotate(18 798 388)\" fill=\"#121216\" stroke=\"#68687a\"/>\n <ellipse cx=\"802\" cy=\"390\" rx=\"11\" ry=\"17\" transform=\"rotate(18 802 390)\" fill=\"#19191f\" stroke=\"#7c7c90\"/>\n <g id=\"cc-handle-btn\" class=\"cc-handle\" role=\"button\" tabindex=\"0\">\n <rect x=\"748\" y=\"245\" width=\"110\" height=\"175\" fill=\"transparent\"/>\n <circle id=\"cc-r1\" class=\"cc-ring-1\" cx=\"817\" cy=\"282\" r=\"18\" fill=\"none\" stroke=\"#ff5500\"/>\n <circle id=\"cc-r2\" class=\"cc-ring-2\" cx=\"817\" cy=\"282\" r=\"18\" fill=\"none\" stroke=\"#ff7a33\"/>\n <line id=\"cc-rod-b\" x1=\"798\" y1=\"388\" x2=\"813\" y2=\"294\" stroke=\"#9494a8\" stroke-width=\"7\" stroke-linecap=\"round\"/>\n <line id=\"cc-rod-c\" x1=\"798\" y1=\"388\" x2=\"813\" y2=\"294\" stroke=\"#18181f\" stroke-width=\"4.2\" stroke-linecap=\"round\"/>\n <line id=\"cc-rod-f\" x1=\"802\" y1=\"390\" x2=\"817\" y2=\"296\" stroke=\"#d4d4e4\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <circle id=\"cc-knob\" class=\"cc-knob-out\" cx=\"817\" cy=\"282\" r=\"16\" fill=\"#18181e\" stroke=\"#e2e8f0\" stroke-width=\"2\"/>\n </g>\n <g id=\"cc-callout\" class=\"cc-callout\" role=\"button\">\n <path d=\"M 880,235 L 836,268\" fill=\"none\" stroke=\"#ff5500\" stroke-width=\"2\" stroke-dasharray=\"4 3\"/>\n <polygon points=\"833,271 838,261 844,268\" fill=\"#ff5500\"/>\n <rect x=\"832\" y=\"192\" width=\"176\" height=\"44\" rx=\"8\" fill=\"#141010\" stroke=\"#ff5500\" stroke-width=\"1.8\"/>\n <circle cx=\"848\" cy=\"207\" r=\"4\" fill=\"#ff5500\"/>\n <text x=\"859\" y=\"211\" fill=\"#ff7a33\" font-family=\"monospace\" font-size=\"10\" font-weight=\"700\">SIGNAL READY</text>\n <text id=\"cc-badge-sub\" x=\"844\" y=\"227\" fill=\"#ffffff\" font-family=\"monospace\" font-size=\"10.5\" font-weight=\"600\">CLICK HANDLE TO START</text>\n </g>\n </g>\n <g id=\"cc-carriage\">\n <polygon points=\"586,448 644,410 704,431 646,469\" fill=\"#1c1c22\" stroke=\"#585868\"/>\n <polygon points=\"586,448 646,469 646,483 586,462\" fill=\"#121216\" stroke=\"#4a4a58\"/>\n <polygon points=\"646,469 704,431 704,445 646,483\" fill=\"#0d0d10\" stroke=\"#3e3e4a\"/>\n <ellipse cx=\"645\" cy=\"436\" rx=\"16\" ry=\"10\" fill=\"#1e1e24\" stroke=\"#78788c\"/>\n <path d=\"M 633,366 L 633,435 C 633,441 657,441 657,435 L 657,366 Z\" fill=\"url(#ccPillarFront)\" stroke=\"#68687a\"/>\n <polygon points=\"614,324 654,338 654,380 614,366\" fill=\"#16161b\" stroke=\"#5e5e70\"/>\n <polygon points=\"654,338 678,322 678,364 654,380\" fill=\"#101014\" stroke=\"#4e4e5e\"/>\n <polygon points=\"614,324 638,308 678,322 654,338\" fill=\"#24242c\" stroke=\"#7c7c90\"/>\n <circle cx=\"634\" cy=\"348\" r=\"3.2\" fill=\"#ff5500\"/>\n <ellipse cx=\"664\" cy=\"360\" rx=\"5\" ry=\"12\" fill=\"#22222a\" stroke=\"#7e7e94\"/>\n </g>\n </svg>\n </div>\n <div class=\"cc-deck\">\n <div class=\"cc-card\">\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;\">\n <span id=\"cc-hud-title\" style=\"font-family:monospace;font-size:12px;font-weight:700;padding:3px 9px;border-radius:4px;background:rgba(255,85,0,0.18);border:1px solid #ff5500;color:#ff945e;\">LAYER 5 · CANON</span>\n <span id=\"cc-hud-cadence\" style=\"font-family:monospace;font-size:12px;color:#94a3b8;\">Cadence: Human Sign-Off Only</span>\n </div>\n <div id=\"cc-hud-desc\" style=\"font-size:13.5px;line-height:1.45;color:#e2e8f0;\">Product facts, policies, documentation, approved claims, positioning, and brand. Authored, reviewed, and signed off by humans before agents repeat it to customers.</div>\n </div>\n <div class=\"cc-card\">\n <div style=\"display:flex;gap:8px;flex-wrap:wrap;\">\n <button type=\"button\" class=\"cc-btn cc-btn-pri\" id=\"cc-btn-pull\">⚡ Click Handle to Start</button>\n <button type=\"button\" class=\"cc-btn\" id=\"cc-btn-scan\">⇄ Scan All 5 Layers</button>\n <button type=\"button\" class=\"cc-btn\" id=\"cc-btn-reset\">⏸ Reset</button>\n </div>\n <div class=\"cc-bars\" id=\"cc-bars\">\n <div class=\"cc-col\" data-idx=\"0\"><div style=\"font-size:10px;color:#94a3b8;\">SITUATION</div><div id=\"cc-v0\" style=\"font-size:11px;font-weight:700;margin-top:2px;\">IDLE</div></div>\n <div class=\"cc-col\" data-idx=\"1\"><div style=\"font-size:10px;color:#94a3b8;\">RECORDS</div><div id=\"cc-v1\" style=\"font-size:11px;font-weight:700;margin-top:2px;\">IDLE</div></div>\n <div class=\"cc-col\" data-idx=\"2\"><div style=\"font-size:10px;color:#94a3b8;\">MEMORY</div><div id=\"cc-v2\" style=\"font-size:11px;font-weight:700;margin-top:2px;\">IDLE</div></div>\n <div class=\"cc-col\" data-idx=\"3\"><div style=\"font-size:10px;color:#94a3b8;\">PROCESS</div><div id=\"cc-v3\" style=\"font-size:11px;font-weight:700;margin-top:2px;\">IDLE</div></div>\n <div class=\"cc-col sel\" data-idx=\"4\"><div style=\"font-size:10px;color:#94a3b8;\">CANON</div><div id=\"cc-v4\" style=\"font-size:11px;font-weight:700;color:#ff7a33;margin-top:2px;\">LOCKED</div></div>\n </div>\n </div>\n </div>\n <script>\n (function(){\n var NS=\"http://www.w3.org/2000/svg\",SX=107,SY=37,ANG=19.075,RAD=ANG*Math.PI/180,UX=Math.cos(RAD),UY=Math.sin(RAD),VX=Math.sin(RAD),VY=-Math.cos(RAD),RMAJ=96,RMIN=46,WX=62,WY=21.45,CX0=268,CY0=138,RIBS=18;\n var INFO=[\n {n:\"SITUATION\",b:\"LAYER 1 · SITUATION\",c:\"Cadence: Ephemeral (Minutes / Hours)\",s:\"FAST\",w:1.85,d:\"Who the agent is talking to, what they have already said, what they are trying to do, and what has happened so far in the live session.\"},\n {n:\"RECORDS\",b:\"LAYER 2 · RECORDS\",c:\"Cadence: Continuous (System of Record)\",s:\"STEADY\",w:0.82,d:\"Customers, orders, SKUs, transactions, call transcripts, and history. Owned by the transactional systems of record that produce it.\"},\n {n:\"MEMORY\",b:\"LAYER 3 · MEMORY\",c:\"Cadence: Cross-Session Learning\",s:\"STEPPED\",w:0.35,d:\"Which answers solved a problem, what customers corrected, and what returning users prefer across conversations. Reviewed lessons move into Canon.\"},\n {n:\"PROCESS\",b:\"LAYER 4 · PROCESS\",c:\"Cadence: Governance & Workflows\",s:\"SLOW\",w:0.12,d:\"Who owns content, who approves a change, what an agent may do on its own, and when a person needs to be in the loop.\"},\n {n:\"CANON\",b:\"LAYER 5 · CANON\",c:\"Cadence: Human Sign-Off Only\",s:\"SIGN-OFF\",w:0,d:\"Product facts, policies, documentation, approved claims, positioning, and brand. The layer the agent repeats out loud to customers.\"}\n ];\n var ticks=document.getElementById(\"cc-ticks\");\n for(var i=0;i<=40;i++){\n var t=i/40,x1=72+t*650,y1=319+t*224.8,len=(i%8===0)?10:((i%4===0)?7:4.5);\n var l=document.createElementNS(NS,\"line\");\n l.setAttribute(\"x1\",x1);l.setAttribute(\"y1\",y1);l.setAttribute(\"x2\",x1+len*0.78);l.setAttribute(\"y2\",y1-len*0.62);\n l.setAttribute(\"stroke\",(i%8===0)?\"#88889a\":\"#4a4a58\");ticks.appendChild(l);\n }\n var platesG=document.getElementById(\"cc-plates\"),plates=[];\n INFO.forEach(function(inf,idx){\n var x0=131+idx*SX,y0=359+idx*SY,w=96,dy=33.2,h=33,g=document.createElementNS(NS,\"g\");\n g.setAttribute(\"class\",\"cc-plate\");\n var p=document.createElementNS(NS,\"polygon\");\n p.setAttribute(\"points\",x0+\",\"+y0+\" \"+(x0+w)+\",\"+(y0+dy)+\" \"+(x0+w)+\",\"+(y0+dy+h)+\" \"+x0+\",\"+(y0+h));\n p.setAttribute(\"fill\",idx===4?\"#161210\":\"#0e0e12\");p.setAttribute(\"stroke\",idx===4?\"#fff\":\"#454554\");p.setAttribute(\"stroke-width\",idx===4?\"1.6\":\"1.1\");\n var tx=x0+48,ty=y0+dy*0.5+h*0.58,txt=document.createElementNS(NS,\"text\");\n txt.setAttribute(\"x\",tx);txt.setAttribute(\"y\",ty);txt.setAttribute(\"text-anchor\",\"middle\");txt.setAttribute(\"fill\",idx===4?\"#fff\":\"#cbd5e1\");\n txt.setAttribute(\"font-family\",\"monospace\");txt.setAttribute(\"font-size\",\"12\");txt.setAttribute(\"font-weight\",idx===4?\"700\":\"500\");txt.setAttribute(\"letter-spacing\",\"0.08em\");\n txt.setAttribute(\"transform\",\"translate(\"+tx+\",\"+ty+\") skewY(19.1) translate(\"+(-tx)+\",\"+(-ty)+\")\");\n txt.textContent=inf.n;g.appendChild(p);g.appendChild(txt);\n g.addEventListener(\"click\",function(){selectIdx(idx,true);});\n platesG.appendChild(g);plates.push(p);\n });\n function ePt(cx,cy,rmaj,rmin,th){return {x:cx+rmaj*Math.cos(th)*VX-rmin*Math.sin(th)*UX,y:cy+rmaj*Math.cos(th)*VY-rmin*Math.sin(th)*UY};}\n var drumsG=document.getElementById(\"cc-drums\"),drums=[];\n INFO.forEach(function(_,idx){\n var isC=(idx===4),cx1=CX0+idx*SX,cy1=CY0+idx*SY,cx2=cx1+WX,cy2=cy1+WY,g=document.createElementNS(NS,\"g\");\n g.style.cursor=\"pointer\";g.addEventListener(\"click\",function(){selectIdx(idx,true);});\n var be=document.createElementNS(NS,\"ellipse\");\n be.setAttribute(\"cx\",cx1);be.setAttribute(\"cy\",cy1);be.setAttribute(\"rx\",RMIN);be.setAttribute(\"ry\",RMAJ);\n be.setAttribute(\"transform\",\"rotate(\"+ANG+\" \"+cx1+\" \"+cy1+\")\");be.setAttribute(\"fill\",isC?\"#b83700\":\"#121215\");be.setAttribute(\"stroke\",isC?\"#ff9e66\":\"#78788a\");\n g.appendChild(be);\n var t1=ePt(cx1,cy1,RMAJ,RMIN,0),b1=ePt(cx1,cy1,RMAJ,RMIN,Math.PI),t2=ePt(cx2,cy2,RMAJ,RMIN,0),b2=ePt(cx2,cy2,RMAJ,RMIN,Math.PI);\n var bp=document.createElementNS(NS,\"path\");\n bp.setAttribute(\"d\",\"M \"+t1.x+\" \"+t1.y+\" A \"+RMIN+\" \"+RMAJ+\" \"+ANG+\" 0 0 \"+b1.x+\" \"+b1.y+\" L \"+b2.x+\" \"+b2.y+\" A \"+RMIN+\" \"+RMAJ+\" \"+ANG+\" 0 1 \"+t2.x+\" \"+t2.y+\" Z\");\n bp.setAttribute(\"fill\",isC?\"url(#ccCanonDrum)\":\"url(#ccDarkDrum)\");bp.setAttribute(\"stroke\",isC?\"#ff945e\":\"#78788a\");g.appendChild(bp);\n var rLines=[];\n for(var r=0;r<RIBS;r++){var rl=document.createElementNS(NS,\"line\");rl.setAttribute(\"stroke\",isC?\"#ffaa77\":\"#626274\");rl.setAttribute(\"stroke-width\",\"1.2\");g.appendChild(rl);rLines.push(rl);}\n var fe=document.createElementNS(NS,\"ellipse\");\n fe.setAttribute(\"cx\",cx2);fe.setAttribute(\"cy\",cy2);fe.setAttribute(\"rx\",RMIN);fe.setAttribute(\"ry\",RMAJ);\n fe.setAttribute(\"transform\",\"rotate(\"+ANG+\" \"+cx2+\" \"+cy2+\")\");fe.setAttribute(\"fill\",isC?\"url(#ccCanonFace)\":\"url(#ccDarkFace)\");fe.setAttribute(\"stroke\",isC?\"#ffa372\":\"#78788a\");\n g.appendChild(fe);\n [0.91,0.81,0.72].forEach(function(sc,ri){\n var re=document.createElementNS(NS,\"ellipse\"),rcx=cx2+(ri===2?6.5:(ri===1?3.2:0)),rcy=cy2+(ri===2?2.2:(ri===1?1.1:0));\n re.setAttribute(\"cx\",rcx);re.setAttribute(\"cy\",rcy);re.setAttribute(\"rx\",RMIN*sc);re.setAttribute(\"ry\",RMAJ*sc);\n re.setAttribute(\"transform\",\"rotate(\"+ANG+\" \"+rcx+\" \"+rcy+\")\");re.setAttribute(\"fill\",ri===2?(isC?\"#c93b00\":\"#0b0b0e\"):\"none\");re.setAttribute(\"stroke\",isC?\"#ff8547\":\"#4a4a58\");\n g.appendChild(re);\n });\n drumsG.appendChild(g);drums.push({rLines:rLines,cx1:cx1,cy1:cy1,cx2:cx2,cy2:cy2});\n });\n function drawRibs(d,ph){\n for(var r=0;r<RIBS;r++){\n var th=(ph+(r*2*Math.PI)/RIBS)%(2*Math.PI);if(th<0)th+=2*Math.PI;\n var vis=Math.sin(th),ln=d.rLines[r];\n if(vis<=0.02){ln.setAttribute(\"opacity\",\"0\");}else{\n var p1=ePt(d.cx1,d.cy1,RMAJ,RMIN,th),p2=ePt(d.cx2,d.cy2,RMAJ,RMIN,th);\n ln.setAttribute(\"x1\",p1.x.toFixed(1));ln.setAttribute(\"y1\",p1.y.toFixed(1));ln.setAttribute(\"x2\",p2.x.toFixed(1));ln.setAttribute(\"y2\",p2.y.toFixed(1));\n ln.setAttribute(\"opacity\",Math.min(0.95,0.22+0.73*Math.pow(vis,0.65)).toFixed(2));\n }\n }\n }\n var running=false,revs=0,phases=[0.15,0.42,0.78,1.12,0.28],canonTarget=phases[4],cPos=4,cTarget=4,queue=[],qTimer=0,hAnim=false,hTime=0,bAnim=false,bTime=0;\n drums.forEach(function(d,i){drawRibs(d,phases[i]);});\n function selectIdx(idx,move){\n var inf=INFO[idx];\n document.getElementById(\"cc-hud-title\").textContent=inf.b;\n document.getElementById(\"cc-hud-cadence\").textContent=idx===4?(inf.c+\" (Rev #\"+revs+\")\"):inf.c;\n document.getElementById(\"cc-hud-desc\").textContent=inf.d;\n plates.forEach(function(p,i){p.setAttribute(\"stroke\",i===idx?\"#ff5500\":(i===4?\"#fff\":\"#454554\"));});\n var cols=document.querySelectorAll(\"#cc-bars .cc-col\");\n cols.forEach(function(c,i){c.classList.toggle(\"sel\",i===idx);});\n if(move){queue=[];cTarget=idx;}\n }\n function pullHandle(){\n hAnim=true;hTime=0;bAnim=true;bTime=0;\n var wasIdle=!running;running=true;revs+=1;canonTarget+=(2*Math.PI)/9;\n queue=wasIdle?[0,1,2,3,4]:[2,4];cTarget=queue.shift();selectIdx(cTarget,false);\n document.getElementById(\"cc-status-pill\").classList.add(\"active\");\n document.getElementById(\"cc-status-txt\").textContent=\"ACTIVE · CANON SIGNED OFF (REV #\"+revs+\")\";\n document.getElementById(\"cc-badge-sub\").textContent=\"CLICK TO SIGN OFF CANON\";\n document.getElementById(\"cc-btn-pull\").textContent=\"⚡ Pull Handle (Sign Off Canon)\";\n INFO.forEach(function(inf,i){document.getElementById(\"cc-v\"+i).textContent=i===4?(\"REV #\"+revs):inf.s;});\n }\n document.getElementById(\"cc-handle-btn\").addEventListener(\"click\",pullHandle);\n document.getElementById(\"cc-callout\").addEventListener(\"click\",pullHandle);\n document.getElementById(\"cc-btn-pull\").addEventListener(\"click\",pullHandle);\n document.getElementById(\"cc-btn-scan\").addEventListener(\"click\",function(){if(!running){pullHandle();return;}queue=[1,2,3,4];cTarget=0;selectIdx(0,false);});\n document.getElementById(\"cc-btn-reset\").addEventListener(\"click\",function(){\n running=false;queue=[];cTarget=4;selectIdx(4,false);\n document.getElementById(\"cc-status-pill\").classList.remove(\"active\");\n document.getElementById(\"cc-status-txt\").textContent=\"SIGNAL READY - CLICK HANDLE TO START\";\n document.getElementById(\"cc-badge-sub\").textContent=\"CLICK HANDLE TO START\";\n document.getElementById(\"cc-btn-pull\").textContent=\"⚡ Click Handle to Start\";\n INFO.forEach(function(_,i){document.getElementById(\"cc-v\"+i).textContent=i===4?\"LOCKED\":\"IDLE\";});\n });\n document.querySelectorAll(\"#cc-bars .cc-col\").forEach(function(col){\n col.addEventListener(\"click\",function(){selectIdx(parseInt(col.getAttribute(\"data-idx\"),10),true);});\n });\n var last=performance.now();\n function loop(now){\n var dt=Math.min(0.05,(now-last)/1000);last=now;\n if(hAnim){\n hTime+=dt;var p=hTime/0.68;\n if(p>=1){hAnim=false;p=0;}else{p=p<0.38?Math.sin((p/0.38)*(Math.PI/2)):Math.cos(((p-0.38)/0.62)*(Math.PI/2));}\n var kx=817-p*51,ky=282+p*68,rx=813-p*47,ry=294+p*60;\n document.getElementById(\"cc-rod-b\").setAttribute(\"x2\",rx);document.getElementById(\"cc-rod-b\").setAttribute(\"y2\",ry);\n document.getElementById(\"cc-rod-c\").setAttribute(\"x2\",rx);document.getElementById(\"cc-rod-c\").setAttribute(\"y2\",ry);\n document.getElementById(\"cc-rod-f\").setAttribute(\"x2\",rx+4);document.getElementById(\"cc-rod-f\").setAttribute(\"y2\",ry+2);\n document.getElementById(\"cc-knob\").setAttribute(\"cx\",kx);document.getElementById(\"cc-knob\").setAttribute(\"cy\",ky);\n document.getElementById(\"cc-r1\").setAttribute(\"cx\",kx);document.getElementById(\"cc-r1\").setAttribute(\"cy\",ky);\n document.getElementById(\"cc-r2\").setAttribute(\"cx\",kx);document.getElementById(\"cc-r2\").setAttribute(\"cy\",ky);\n }\n if(bAnim){\n bTime+=dt;var bp=bTime/1.1;\n if(bp>=1){bAnim=false;document.getElementById(\"cc-beam-sig\").setAttribute(\"opacity\",\"0\");document.getElementById(\"cc-relay-led\").setAttribute(\"fill\",\"#3a3a46\");document.getElementById(\"cc-plunger-mem\").setAttribute(\"transform\",\"translate(0,0)\");document.getElementById(\"cc-plunger-can\").setAttribute(\"transform\",\"translate(0,0)\");}\n else{var py=Math.sin(bp*Math.PI)*4.5;document.getElementById(\"cc-plunger-mem\").setAttribute(\"transform\",\"translate(0,\"+py+\")\");document.getElementById(\"cc-plunger-can\").setAttribute(\"transform\",\"translate(0,\"+py+\")\");document.getElementById(\"cc-beam-sig\").setAttribute(\"opacity\",Math.sin(bp*Math.PI).toFixed(2));document.getElementById(\"cc-relay-led\").setAttribute(\"fill\",\"#ff5500\");}\n }\n if(running){\n for(var i=0;i<4;i++){\n phases[i]+=INFO[i].w*dt*(i===2?(0.3+1.4*Math.pow(0.5+0.5*Math.sin(now*0.0045),3)):1);\n drawRibs(drums[i],phases[i]);\n }\n }\n var cd=canonTarget-phases[4];if(Math.abs(cd)>0.0005){phases[4]+=cd*Math.min(1,dt*7.5);drawRibs(drums[4],phases[4]);}\n var diff=cTarget-cPos;\n if(Math.abs(diff)>0.008){cPos+=diff*Math.min(1,dt*5.2);}else{cPos=cTarget;if(queue.length>0){qTimer+=dt;if(qTimer>=0.42){qTimer=0;cTarget=queue.shift();selectIdx(cTarget,false);}}}\n var u=cPos-4;document.getElementById(\"cc-carriage\").setAttribute(\"transform\",\"translate(\"+(u*SX).toFixed(1)+\",\"+(u*SY).toFixed(1)+\")\");\n requestAnimationFrame(loop);\n }\n requestAnimationFrame(loop);\n })();\n </script>\n</div>"
}
Breaking down the five layers of agentic context
Why does the wheel metaphor work so well for engineering teams? Because in a real production stack, context does not mutate at a uniform clock speed. Treating live conversational state the same way you treat approved pricing or refund policies guarantees hallucinations and compliance failures. Here is how the five layers compare across velocity, ownership, and failure modes:
{
"_key": "b09_table",
"_type": "table",
"rows": [
{
"_key": "r0",
"_type": "row",
"cells": [
"Context Layer",
"Wheel Velocity / Lifespan",
"What It Contains",
"Primary Owner",
"Failure Mode When Missing or Ungoverned"
]
},
{
"_key": "r1",
"_type": "row",
"cells": [
"1. Situation",
"Fastest (minutes to hours)",
"Who the agent is talking to right now, what was already said, and current session state",
"Runtime / session state",
"Every turn starts from zero; the agent suggests the exact fix the user already tried"
]
},
{
"_key": "r2",
"_type": "row",
"cells": [
"2. Records",
"Continuous (real-time transactions)",
"Customers, orders, SKUs, transactions, call transcripts, and account history",
"Systems of record (CRM, ERP, DB)",
"The agent cannot verify order facts or personalize responses to the user's actual history"
]
},
{
"_key": "r3",
"_type": "row",
"cells": [
"3. Memory",
"Stepped (cross-conversation learning)",
"Which answers solved a problem, user corrections, and returning customer preferences",
"Agent learning loop (needs human review)",
"Missing memory repeats mistakes; unreviewed memory learns bad habits like handing out unapproved discounts"
]
},
{
"_key": "r4",
"_type": "row",
"cells": [
"4. Process",
"Slow (operational rules and mandate)",
"Who owns content, approval flows, permissions, and when a human must be in the loop",
"Operations and engineering governance",
"The agent acts outside its mandate, such as approving an $800 refund when anything over $600 needs sign-off"
]
},
{
"_key": "r5",
"_type": "row",
"cells": [
"5. Canon",
"Human sign-off only (locked ratchet)",
"Product facts, policies, documentation, approved claims, positioning, and brand",
"Content / Context Operations team",
"The agent confidently repeats outdated or contradictory claims your business does not stand behind"
]
}
]
}
Why "company brains" turn into data swamps for customer-facing agents
One of the sharpest insights in Magnus's piece is his comparison between today's all-in-one "company brain" vector stores and the data lakes of a decade ago. Internally, pointing an enterprise search bot at Slack, Notion, and Jira works fine because employees have enough institutional awareness to spot an outdated thread from 2024.
Customer-facing agents do not have that luxury. When your pricing page says $49, an old blog post says $39, and a sales battle card in Google Drive says something else, an agent reading your raw web pages burns extra tokens trying to reconcile contradictions, or worse, quotes the wrong price to a buyer. Moving from unstructured "pages" to a structured content model gives both humans and agents a single source of truth.
The overhead bridge: how Memory and Records promote into Canon
Look closely at the top of the mechanical wheel apparatus above: an overhead bridge arm connects the Memory drum (Wheel 3) directly to the orange Canon drum (Wheel 5). That mechanical link represents the most important operational loop in agentic engineering:
- **Signals flow in from Records and Memory: **Sales call transcripts, support tickets, and agent memory surface recurring customer corrections or product changes.
- **Content teams act as Context teams: **Instead of letting unreviewed agent memory drift into production policy, humans review candidate updates, resolve contradictions across sources, and sign off via Sanity Workflows.
- **Compiled Canon ships over MCP: **At Everything *[NYC] 2026, Matt Chamberlain from Braze demonstrated this exact loop by compiling Braze's public documentation into a Sanity Knowledge Base served over an MCP endpoint, watching sales calls for market changes, and routing proposed battle-card updates to humans for sign-off.
Why precompiled Canon makes fast, cheap models viable in production
If an agent has to grep raw documents and synthesize what your business stands for from scratch on every prompt, you are forced to pay for slow, frontier-class reasoning models on every turn. When Sanity Context precompiles Canon into a structured Knowledge Base exposed over MCP, the map of verified facts and relationships is already drawn. A smaller, faster, cheaper model can answer with low latency, and a lightweight classifier can verify every outgoing response against Canon before the customer ever sees it.
How the interactive HTML/SVG wheel is built
If you want to embed the Situation-to-Canon wheel in your own docs or architecture decks, the entire component uses zero external dependencies: just inline SVG geometry projected along a 19.075-degree isometric axle and a 60fps requestAnimationFrame loop. Each drum projects 18 radial ribs across the visible front-left half of a tilted ellipse, while the Canon drum remains locked until the handle click handler increments the target phase:
// Parametric isometric projection for each rotating context drum
const AXIS_ANGLE_DEG = 19.075;
const RAD = (AXIS_ANGLE_DEG * Math.PI) / 180;
const UX = Math.cos(RAD), UY = Math.sin(RAD);
const VX = Math.sin(RAD), VY = -Math.cos(RAD);
function ellipsePoint(cx, cy, rMaj, rMin, theta) {
return {
x: cx + rMaj * Math.cos(theta) * VX - rMin * Math.sin(theta) * UX,
y: cy + rMaj * Math.cos(theta) * VY - rMin * Math.sin(theta) * UY,
};
}
// Handle click signal: ratchets Canon forward by one approved step
function onHandleClick() {
machineRunning = true;
canonSignOffCount += 1;
canonTargetPhase += (2 * Math.PI) / 9; // +40 deg ratchet step
triggerOverheadBridgePulse(); // Plungers stamp Memory -> Canon
}
The bottom line for AI engineers
Magnus closes the article with a rule of thumb that belongs on every AI engineer's desk: the more autonomy you give an agent, the more of its context needs to be canon. Read the full post on the Sanity blog, try pulling the sign-off handle on the wheel above, and let us know on CodingCat.dev how you are governing canonical context in your own agent loops!
Top comments (0)