Last active
June 3, 2026 02:18
-
-
Save mossbanay/44bad8fc9e8dd6db8a1bc9287cabe0c6 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Close Your Agentic Loop</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --bg: #0B0E12; | |
| --bg-2: #12161d; | |
| --ink: #ECEFF4; | |
| --muted: #8b94a6; | |
| --faint: rgba(255,255,255,.12); | |
| /* Forward path / Controller — warm */ | |
| --warm-1: #FFC15E; | |
| --warm-2: #FF7A3D; | |
| /* Feedback path / Sensor — cool */ | |
| --cool-1: #5FE3F0; | |
| --cool-2: #39A0FF; | |
| /* Plant — neutral */ | |
| --plant: #E7ECF4; | |
| --display: "Space Grotesk", "Inter", system-ui, sans-serif; | |
| --body: "Inter", system-ui, sans-serif; | |
| --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; | |
| } | |
| * { box-sizing: border-box; margin: 0; padding: 0; } | |
| html, body { | |
| height: 100%; | |
| background: var(--bg); | |
| color: var(--ink); | |
| font-family: var(--body); | |
| overflow: hidden; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| /* ---- scaled stage (fixed 1280x720 canvas) ---- */ | |
| #viewport { | |
| position: fixed; | |
| inset: 0; | |
| display: grid; | |
| place-items: center; | |
| z-index: 1; | |
| } | |
| #stage { | |
| position: relative; | |
| width: 1280px; | |
| height: 720px; | |
| transform-origin: center center; | |
| } | |
| .slide { | |
| position: absolute; | |
| inset: 0; | |
| padding: 72px 104px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: transform .55s cubic-bezier(.2,.75,.2,1), opacity .42s ease; | |
| transform: translateX(90px) scale(.985); | |
| } | |
| .slide.active { opacity: 1; pointer-events: auto; transform: none; } | |
| /* ---- typography ---- */ | |
| .kicker { | |
| font-family: var(--mono); | |
| font-size: 17px; | |
| letter-spacing: .32em; | |
| text-transform: uppercase; | |
| color: var(--warm-1); | |
| display: inline-flex; | |
| align-items: center; | |
| gap: .8em; | |
| margin-bottom: 22px; | |
| } | |
| .kicker::before { | |
| content: ""; | |
| width: 30px; height: 2px; | |
| background: linear-gradient(90deg, var(--warm-1), var(--warm-2)); | |
| } | |
| .kicker.cool { color: var(--cool-1); } | |
| .kicker.cool::before { background: linear-gradient(90deg, var(--cool-1), var(--cool-2)); } | |
| h1 { font-family: var(--display); font-weight: 700; line-height: 1.02; letter-spacing: -.02em; } | |
| h2 { | |
| font-family: var(--display); | |
| font-weight: 600; | |
| font-size: 52px; | |
| line-height: 1.06; | |
| letter-spacing: -.02em; | |
| margin-bottom: 28px; | |
| max-width: 17ch; | |
| } | |
| p { font-size: 27px; line-height: 1.5; color: #d7dbe4; max-width: 42ch; } | |
| p + p { margin-top: 18px; } | |
| strong { color: var(--ink); font-weight: 600; } | |
| code { font-family: var(--mono); font-size: .82em; color: var(--cool-1); background: rgba(95,227,240,.1); border: 1px solid var(--faint); border-radius: 6px; padding: .08em .42em; } | |
| em { color: var(--cool-1); font-style: normal; } | |
| .lead { font-size: 31px; } | |
| .muted { color: var(--muted); } | |
| .grad { background: linear-gradient(92deg, var(--warm-1), var(--warm-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } | |
| .grad-cool { background: linear-gradient(92deg, var(--cool-1), var(--cool-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } | |
| /* ---- title slide ---- */ | |
| .slide--title { align-items: flex-start; } | |
| .slide--title h1 { font-size: 118px; } | |
| .slide--title .sub { font-size: 30px; color: var(--muted); margin-top: 26px; max-width: 40ch; } | |
| .slide--title .byline { font-family: var(--mono); font-size: 18px; letter-spacing: .12em; text-transform: uppercase; color: var(--text); margin-top: 40px; } | |
| .title-mark { position: absolute; right: 96px; top: 50%; transform: translateY(-50%); width: 300px; height: 300px; opacity: .9; } | |
| /* ---- lesson slides ---- */ | |
| .slide--lesson { flex-direction: row; align-items: center; gap: 56px; } | |
| .lesson__num { | |
| font-family: var(--display); | |
| font-weight: 700; | |
| font-size: 280px; | |
| line-height: .8; | |
| background: linear-gradient(160deg, var(--warm-1), var(--warm-2)); | |
| -webkit-background-clip: text; background-clip: text; color: transparent; | |
| flex: 0 0 auto; | |
| } | |
| .lesson__body { flex: 1; min-width: 0; } | |
| .lesson__body h2 { font-size: 60px; margin-bottom: 22px; } | |
| /* ---- stat (Bun) ---- */ | |
| .stats { display: flex; gap: 64px; margin: 14px 0 30px; } | |
| .stat__num { font-family: var(--display); font-weight: 700; font-size: 92px; line-height: 1; } | |
| .stat__label { font-size: 20px; color: var(--muted); margin-top: 8px; letter-spacing: .02em; } | |
| /* ---- triad: controller / plant / sensor ---- */ | |
| .triad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 8px 0 30px; } | |
| .role { | |
| position: relative; | |
| background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)); | |
| border: 1px solid var(--faint); | |
| border-radius: 18px; | |
| padding: 26px 26px 28px; | |
| overflow: hidden; | |
| } | |
| .role::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; } | |
| .role__tag { font-family: var(--mono); font-size: 14px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); } | |
| .role__val { display: block; font-family: var(--display); font-weight: 600; font-size: 27px; margin-top: 12px; line-height: 1.18; } | |
| .role__val small { display:block; font-family: var(--body); font-weight: 400; font-size: 16px; color: var(--muted); margin-top: 8px; } | |
| .role--controller::before { background: linear-gradient(180deg, var(--warm-1), var(--warm-2)); } | |
| .role--controller .role__tag { color: var(--warm-1); } | |
| .role--sensor::before { background: linear-gradient(180deg, var(--cool-1), var(--cool-2)); } | |
| .role--sensor .role__tag { color: var(--cool-1); } | |
| .role--plant::before { background: var(--plant); } | |
| .role--plant .role__tag { color: var(--plant); } | |
| /* ---- chips (sensor zoo) ---- */ | |
| .chips { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin-top: 8px; } | |
| .chip { | |
| border: 1px solid var(--faint); | |
| border-left: 3px solid var(--accent, var(--warm-1)); | |
| border-radius: 12px; | |
| padding: 13px 16px; | |
| background: rgba(255,255,255,.025); | |
| } | |
| .chip b { font-family: var(--display); font-weight: 600; font-size: 19px; } | |
| .chip span { display: block; font-size: 15px; color: var(--muted); margin-top: 3px; } | |
| .chips.cool .chip { --accent: var(--cool-1); } | |
| /* ---- spec block (objective) ---- */ | |
| .spec { | |
| font-family: var(--mono); | |
| background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); | |
| border: 1px solid var(--faint); | |
| border-radius: 18px; | |
| padding: 34px 40px; | |
| margin: 6px 0 28px; | |
| font-size: 30px; | |
| line-height: 1.7; | |
| white-space: nowrap; | |
| max-width: max-content; | |
| } | |
| .spec .kw { color: var(--warm-1); } | |
| .spec .kw.cool { color: var(--cool-1); } | |
| /* ---- drift charts (measured vs unmeasured) ---- */ | |
| .charts { display: flex; gap: 32px; margin-top: 6px; } | |
| .chart-card { | |
| flex: 1; | |
| background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); | |
| border: 1px solid var(--faint); | |
| border-radius: 18px; | |
| padding: 22px 26px 20px; | |
| } | |
| .chart-card h3 { font-family: var(--display); font-weight: 600; font-size: 23px; } | |
| .chart-card .axisname { font-family: var(--mono); font-size: 14px; color: var(--muted); margin: 2px 0 12px; letter-spacing: .04em; } | |
| .chart-svg { width: 100%; height: auto; display: block; } | |
| .chart-svg .axis { stroke: #3a4150; stroke-width: 1.5; } | |
| .chart-svg .floor { stroke: var(--cool-1); stroke-width: 2; stroke-dasharray: 6 6; } | |
| .chart-svg .series { fill: none; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; } | |
| .chart-svg .series.cool { stroke: var(--cool-1); } | |
| .chart-svg .series.warm { stroke: var(--warm-2); } | |
| .chart-svg .clab { font-family: var(--mono); font-size: 12px; } | |
| .chart-card .cap { font-size: 16px; color: var(--muted); margin-top: 12px; line-height: 1.4; } | |
| .chart-card .cap b { color: var(--ink); font-weight: 600; } | |
| /* ---- callout / quote ---- */ | |
| blockquote { | |
| border-left: 3px solid; border-image: linear-gradient(180deg, var(--cool-1), var(--cool-2)) 1; | |
| padding-left: 26px; | |
| font-size: 26px; | |
| line-height: 1.45; | |
| color: #cdd3de; | |
| font-style: italic; | |
| max-width: 44ch; | |
| } | |
| /* ---- big bullet list ---- */ | |
| ul.big { list-style: none; max-width: 40ch; } | |
| ul.big li { font-size: 28px; line-height: 1.4; padding: 14px 0 14px 44px; position: relative; border-bottom: 1px solid var(--faint); } | |
| ul.big li:last-child { border-bottom: 0; } | |
| ul.big li::before { | |
| content: ""; position: absolute; left: 0; top: 24px; | |
| width: 12px; height: 12px; border-radius: 3px; | |
| background: linear-gradient(135deg, var(--warm-1), var(--warm-2)); | |
| } | |
| ol.fail { list-style: none; display: grid; gap: 18px; max-width: 46ch; } | |
| ol.fail li { font-size: 27px; padding: 22px 26px; border: 1px solid var(--faint); border-radius: 16px; background: rgba(255,255,255,.025); } | |
| ol.fail .n { font-family: var(--display); font-weight: 700; color: var(--warm-2); margin-right: 12px; } | |
| .pill { display:inline-block; font-family: var(--mono); font-size:15px; letter-spacing:.12em; text-transform:uppercase; padding:6px 12px; border-radius:999px; border:1px solid var(--faint); color:var(--muted); margin-bottom:18px; } | |
| /* ---- closing slide: QRs + recap ---- */ | |
| .closing { display: flex; gap: 72px; align-items: flex-start; } | |
| .recap { list-style: none; display: grid; gap: 16px; } | |
| .recap li { font-size: 23px; line-height: 1.3; padding-left: 40px; position: relative; color: #d7dbe4; } | |
| .recap .n { position: absolute; left: 0; top: -2px; font-family: var(--display); font-weight: 700; font-size: 26px; color: var(--warm-2); } | |
| .recap .lbl { font-family: var(--mono); font-size: 14px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; } | |
| /* ---- QR slide ---- */ | |
| .qr-row { display: flex; gap: 64px; margin: 14px 0 26px; } | |
| .qr-card { text-align: center; text-decoration: none; color: inherit; } | |
| .qr-card img { width: 220px; height: 220px; border-radius: 16px; display: block; margin: 0 auto; box-shadow: 0 12px 40px rgba(0,0,0,.4); } | |
| .qr-card .cap { font-size: 18px; color: var(--muted); margin-top: 14px; line-height: 1.4; } | |
| /* ---- diagrams ---- */ | |
| .diagram { width: 100%; max-width: 1000px; margin: 8px auto 0; display: block; } | |
| .diagram text { font-family: var(--display); } | |
| .node-fill { fill: rgba(255,255,255,.04); } | |
| .node-stroke-warm { stroke: url(#gWarm); } | |
| .node-stroke-cool { stroke: url(#gCool); } | |
| .node-stroke-plant { stroke: var(--plant); } | |
| /* Solid strokes: horizontal lines have a zero-height bbox, so an | |
| objectBoundingBox gradient would render nothing on them. */ | |
| .edge-warm { stroke: #FF7A3D; } | |
| .edge-cool { stroke: #39A0FF; } | |
| .elabel { fill: var(--muted); font-family: var(--mono); font-size: 17px; letter-spacing:.04em; } | |
| .nlabel { fill: var(--ink); font-weight: 600; font-size: 26px; } | |
| .ntag { fill: var(--muted); font-family: var(--mono); font-size: 13px; letter-spacing:.18em; } | |
| .dash { stroke-dasharray: 7 9; animation: dashmove 1.1s linear infinite; } | |
| @keyframes dashmove { to { stroke-dashoffset: -32; } } | |
| /* fragments */ | |
| [data-frag] { opacity: .18; transition: opacity .4s ease, transform .4s ease; } | |
| [data-frag].show { opacity: 1; } | |
| ul.big [data-frag] { transform: translateX(-8px); } | |
| ul.big [data-frag].show { transform: none; } | |
| .diagram [data-frag] { opacity: 0; } | |
| .diagram [data-frag].show { opacity: 1; } | |
| .open-loop .nlabel { transition: transform .4s ease; transform: translateY(15px); } | |
| .open-loop .ntag.show ~ .nlabel { transform: translateY(0); } | |
| blockquote[data-frag] { opacity: 0; } | |
| blockquote[data-frag].show { opacity: 1; } | |
| p[data-frag].hidden-frag { opacity: 0; } | |
| p[data-frag].hidden-frag.show { opacity: 1; } | |
| ul.big li[data-frag].hidden-frag { opacity: 0; } | |
| ul.big li[data-frag].hidden-frag.show { opacity: 1; } | |
| .charts [data-frag] { opacity: 0; } | |
| .charts [data-frag].show { opacity: 1; } | |
| /* ---- feedback catalog slides ---- */ | |
| .slide--fb ul.big { max-width: 880px; } | |
| /* ---- progression chart (variety unlocks complexity) ---- */ | |
| .prog { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; } | |
| .prog.p1 { stroke: #515b73; } | |
| .prog.p2 { stroke: #3d7fb0; } | |
| .prog.p3 { stroke: #39A0FF; } | |
| .prog.p4 { stroke: #5FE3F0; stroke-width: 4.5; } | |
| .plab { font-family: var(--mono); font-size: 15px; } | |
| .alab { font-family: var(--mono); font-size: 15px; fill: var(--muted); letter-spacing: .06em; } | |
| .loop-intro { opacity: 0; } | |
| .loop-intro.show { opacity: 1; } | |
| /* ---- chrome ---- */ | |
| #progress { position: fixed; left: 0; top: 0; height: 3px; z-index: 5; background: linear-gradient(90deg, var(--warm-1), var(--warm-2) 55%, var(--cool-1)); width: 0; transition: width .4s ease; } | |
| #counter { position: fixed; right: 22px; bottom: 16px; z-index: 5; font-family: var(--mono); font-size: 14px; color: var(--muted); letter-spacing: .1em; } | |
| .nav { position: fixed; bottom: 14px; z-index: 5; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: var(--muted); cursor: pointer; user-select: none; opacity: .5; transition: opacity .2s, background .2s; } | |
| .nav:hover { opacity: 1; background: rgba(255,255,255,.06); } | |
| #prev { left: 16px; } #next { left: 60px; } | |
| .nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="progress"></div> | |
| <div id="viewport"> | |
| <!-- shared SVG paint defs (gradients + arrow markers) used by every diagram --> | |
| <svg width="0" height="0" style="position:absolute" aria-hidden="true"><defs> | |
| <linearGradient id="gWarm" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#FFC15E"/><stop offset="1" stop-color="#FF7A3D"/></linearGradient> | |
| <linearGradient id="gCool" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#5FE3F0"/><stop offset="1" stop-color="#39A0FF"/></linearGradient> | |
| <radialGradient id="pulseG"><stop offset="0" stop-color="#fff"/><stop offset="1" stop-color="#FFC15E"/></radialGradient> | |
| <marker id="ahW" markerWidth="11" markerHeight="11" refX="7" refY="5.5" orient="auto"><path d="M0,1 L8,5.5 L0,10" fill="none" stroke="#FF7A3D" stroke-width="2"/></marker> | |
| <marker id="ahC" markerWidth="11" markerHeight="11" refX="7" refY="5.5" orient="auto"><path d="M0,1 L8,5.5 L0,10" fill="none" stroke="#39A0FF" stroke-width="2"/></marker> | |
| </defs></svg> | |
| <div id="stage"> | |
| <!-- 1 — title --> | |
| <section class="slide slide--title"> | |
| <span class="kicker">Control theory for coding agents</span> | |
| <h1>Close Your<br><span class="grad">Agentic Loop</span></h1> | |
| <p class="sub">Why the biggest AI results aren't about better prompts — they're about better feedback.</p> | |
| <p class="byline">Moss Ebeling</p> | |
| </section> | |
| <!-- 2 — you've lived this --> | |
| <section class="slide"> | |
| <h2 style="max-width:none;white-space:nowrap">Agents aren't always reliable</h2> | |
| <ul class="big" style="max-width:900px"> | |
| <li class="hidden-frag" data-frag>Breaks existing features</li> | |
| <li class="hidden-frag" data-frag>Writes poorly optimised queries for data</li> | |
| <li class="hidden-frag" data-frag>Produces insecure or exploitable code</li> | |
| <li class="hidden-frag" data-frag>Misses subtle edge cases</li> | |
| </ul> | |
| <p class="hidden-frag" style="margin-top:24px" data-frag><strong>Inconsistent, hard-to-trust results.</strong></p> | |
| </section> | |
| <!-- 3 — Bun --> | |
| <section class="slide"> | |
| <span class="kicker">And yet</span> | |
| <h2>What Bun just shipped</h2> | |
| <p>The Bun maintainers went from a stray commit — a Zig→Rust migration guide — to a <strong>shipped Rust port.</strong></p> | |
| <div class="stats"> | |
| <div><div class="stat__num grad">~8</div><div class="stat__label">DAYS</div></div> | |
| <div><div class="stat__num grad">~1M</div><div class="stat__label">LINES OF CODE</div></div> | |
| </div> | |
| <p class="lead muted">How is that possible?</p> | |
| </section> | |
| <!-- 4 — typical workflow (open loop diagram) --> | |
| <section class="slide"> | |
| <span class="kicker">A standard coding agent workflow</span> | |
| <h2>Write a prompt, get an output</h2> | |
| <svg class="diagram open-loop" viewBox="0 0 1060 230" aria-label="Open loop: prompt to agent to system to output"> | |
| <!-- edges --> | |
| <path d="M60,115 H220" fill="none" class="edge-warm" stroke-width="2.5" marker-end="url(#ahW)"/> | |
| <path d="M450,115 H610" fill="none" class="edge-warm" stroke-width="2.5" marker-end="url(#ahW)"/> | |
| <path d="M840,115 H1000" fill="none" class="edge-warm" stroke-width="2.5" marker-end="url(#ahW)"/> | |
| <text x="140" y="96" class="elabel" text-anchor="middle">prompt</text> | |
| <text x="530" y="96" class="elabel" text-anchor="middle">edits</text> | |
| <text x="920" y="96" class="elabel" text-anchor="middle">outputs</text> | |
| <!-- nodes --> | |
| <rect x="230" y="72" width="210" height="86" rx="16" class="node-fill node-stroke-warm" stroke-width="2"/> | |
| <g> | |
| <text x="335" y="138" text-anchor="middle" class="ntag" data-frag>CONTROLLER</text> | |
| <text x="335" y="108" text-anchor="middle" class="nlabel">Agent</text> | |
| </g> | |
| <rect x="620" y="72" width="210" height="86" rx="16" class="node-fill node-stroke-plant" stroke-width="2"/> | |
| <g> | |
| <text x="725" y="138" text-anchor="middle" class="ntag" data-frag>PLANT</text> | |
| <text x="725" y="108" text-anchor="middle" class="nlabel">Software</text> | |
| </g> | |
| <!-- open loop boundary — final reveal --> | |
| <g data-frag> | |
| <path d="M230,176 V188 H830 V176" fill="none" stroke="#8b94a6" stroke-width="1.5" opacity=".75"/> | |
| <text x="530" y="214" text-anchor="middle" class="ntag">OPEN LOOP SYSTEM</text> | |
| </g> | |
| </svg> | |
| </section> | |
| <!-- 5 — open loop + toaster --> | |
| <section class="slide"> | |
| <span class="kicker">Control theory</span> | |
| <h2>An <span class="grad">open loop</span> system</h2> | |
| <blockquote>is an automated system in which the output action is entirely independent of the plant (software) output.</blockquote> | |
| <p class="hidden-frag" style="margin-top:24px" data-frag>No correction path — like a <strong>toaster.</strong> 🍞</p> | |
| <p class="hidden-frag" style="margin-top:18px" data-frag>Tuning your prompts and crossing your fingers is just setting the dial.</p> | |
| </section> | |
| <!-- 6 — what's missing (build the loop) --> | |
| <section class="slide"> | |
| <h2>What's missing?</h2> | |
| <p class="lead loop-intro" data-frag="loop"><span class="grad-cool">automated feedback</span> that makes an assessment of the software and feeds it back to the agent.</p> | |
| <svg class="diagram" viewBox="0 0 1060 478" style="max-width:680px;margin:18px auto 0" aria-label="Closed control loop"> | |
| <!-- loop path (invisible) for circulating pulse --> | |
| <path id="loopPath7" d="M240,154 H800 C895,154 880,300 632,352 L520,362 L408,352 C210,332 195,225 240,168" fill="none" stroke="none"/> | |
| <!-- forward edges (warm) --> | |
| <path d="M50,154 H130" fill="none" class="edge-warm" stroke-width="2.5" marker-end="url(#ahW)"/> | |
| <path d="M350,154 H690" fill="none" class="edge-warm" stroke-width="2.5" marker-end="url(#ahW)"/> | |
| <path d="M910,154 H1015" fill="none" class="edge-warm" stroke-width="2.5" marker-end="url(#ahW)"/> | |
| <text x="52" y="134" class="elabel">prompt</text> | |
| <text x="520" y="134" class="elabel" text-anchor="middle">edits</text> | |
| <text x="958" y="134" class="elabel" text-anchor="middle">outputs</text> | |
| <!-- nodes (forward path) --> | |
| <rect x="140" y="110" width="200" height="88" rx="16" class="node-fill node-stroke-warm" stroke-width="2"/> | |
| <text x="240" y="148" text-anchor="middle" class="nlabel">Agent</text> | |
| <text x="240" y="178" text-anchor="middle" class="ntag" fill="#FFC15E">CONTROLLER</text> | |
| <rect x="700" y="110" width="200" height="88" rx="16" class="node-fill node-stroke-plant" stroke-width="2"/> | |
| <text x="800" y="148" text-anchor="middle" class="nlabel">Software</text> | |
| <text x="800" y="178" text-anchor="middle" class="ntag">PLANT</text> | |
| <!-- feedback loop — revealed on next step --> | |
| <g data-frag="loop"> | |
| <!-- measures: software -> sensor (cool) --> | |
| <path d="M812,198 C828,278 730,340 636,356" fill="none" class="edge-cool dash" stroke-width="2.5" marker-end="url(#ahC)"/> | |
| <text x="845" y="290" class="elabel" fill="#5FE3F0">measured by</text> | |
| <!-- corrects: sensor -> agent (cool) --> | |
| <path d="M404,356 C290,338 222,278 230,200" fill="none" class="edge-cool dash" stroke-width="2.5" marker-end="url(#ahC)"/> | |
| <text x="150" y="290" class="elabel" fill="#5FE3F0" text-anchor="middle">corrects</text> | |
| <rect x="420" y="320" width="200" height="86" rx="16" class="node-fill node-stroke-cool" stroke-width="2"/> | |
| <text x="520" y="357" text-anchor="middle" class="nlabel">Feedback</text> | |
| <text x="520" y="387" text-anchor="middle" class="ntag" fill="#5FE3F0">SENSOR</text> | |
| </g> | |
| <!-- closed loop boundary — final reveal --> | |
| <g data-frag> | |
| <path d="M140,440 V452 H900 V440" fill="none" stroke="#8b94a6" stroke-width="1.5" opacity=".75"/> | |
| <text x="520" y="470" text-anchor="middle" class="ntag">CLOSED LOOP SYSTEM</text> | |
| </g> | |
| </svg> | |
| </section> | |
| <!-- 7 — don't fly the plane --> | |
| <section class="slide"> | |
| <h2>Don't fly the plane yourself</h2> | |
| <p class="hidden-frag" data-frag>A pilot doesn't fight every gust — they set the course, and the flight system <strong>responds to changes in the environment automatically</strong> to hold it.</p> | |
| <p class="hidden-frag" data-frag>Do the same with your agent: define the criteria, then let it detect and correct against change on its own.</p> | |
| </section> | |
| <!-- 8 — Lesson 1 + closed loop hero --> | |
| <section class="slide slide--lesson"> | |
| <div class="lesson__num">1</div> | |
| <div class="lesson__body"> | |
| <span class="kicker">Lesson 1</span> | |
| <h2>Close your agentic loop</h2> | |
| <p>Provide <span class="grad-cool">automated feedback</span> to your agent by building a closed loop system.</p> | |
| <svg class="diagram" viewBox="0 0 1060 460" style="max-width:840px;margin:14px 0 0" aria-label="Closed control loop"> | |
| <!-- loop path (invisible) for circulating pulse --> | |
| <path id="loopPath" d="M240,154 H800 C895,154 880,300 632,352 L520,362 L408,352 C210,332 195,225 240,168" fill="none" stroke="none"/> | |
| <!-- forward edges (warm) --> | |
| <path d="M50,154 H130" fill="none" class="edge-warm" stroke-width="2.5" marker-end="url(#ahW)"/> | |
| <path d="M350,154 H690" fill="none" class="edge-warm" stroke-width="2.5" marker-end="url(#ahW)"/> | |
| <path d="M910,154 H1015" fill="none" class="edge-warm" stroke-width="2.5" marker-end="url(#ahW)"/> | |
| <text x="52" y="134" class="elabel">prompt</text> | |
| <text x="520" y="134" class="elabel" text-anchor="middle">edits</text> | |
| <text x="958" y="134" class="elabel" text-anchor="middle">outputs</text> | |
| <!-- nodes (forward path) --> | |
| <rect x="140" y="110" width="200" height="88" rx="16" class="node-fill node-stroke-warm" stroke-width="2"/> | |
| <text x="240" y="144" text-anchor="middle" class="ntag" fill="#FFC15E">CONTROLLER</text> | |
| <text x="240" y="176" text-anchor="middle" class="nlabel">Agent</text> | |
| <rect x="700" y="110" width="200" height="88" rx="16" class="node-fill node-stroke-plant" stroke-width="2"/> | |
| <text x="800" y="144" text-anchor="middle" class="ntag">PLANT</text> | |
| <text x="800" y="176" text-anchor="middle" class="nlabel">Software</text> | |
| <!-- feedback loop (cool) --> | |
| <!-- measures: software -> sensor --> | |
| <path d="M812,198 C828,278 730,340 636,356" fill="none" class="edge-cool dash" stroke-width="2.5" marker-end="url(#ahC)"/> | |
| <text x="845" y="290" class="elabel" fill="#5FE3F0">measured by</text> | |
| <!-- corrects: sensor -> agent --> | |
| <path d="M404,356 C290,338 222,278 230,200" fill="none" class="edge-cool dash" stroke-width="2.5" marker-end="url(#ahC)"/> | |
| <text x="150" y="290" class="elabel" fill="#5FE3F0" text-anchor="middle">corrects</text> | |
| <rect x="420" y="320" width="200" height="86" rx="16" class="node-fill node-stroke-cool" stroke-width="2"/> | |
| <text x="520" y="353" text-anchor="middle" class="ntag" fill="#5FE3F0">SENSOR</text> | |
| <text x="520" y="383" text-anchor="middle" class="nlabel">Feedback</text> | |
| </svg> | |
| </div> | |
| </section> | |
| <!-- 9 — Back to Bun (triad) --> | |
| <section class="slide"> | |
| <span class="kicker">Back to Bun</span> | |
| <h2>What is Bun's loop?</h2> | |
| <div class="triad"> | |
| <div class="role role--controller"><span class="role__tag">Controller</span><span class="role__val">Coding agent</span></div> | |
| <div class="role role--plant"><span class="role__tag">Plant</span><span class="role__val">Bun implementation<small>Zig → Rust</small></span></div> | |
| <div class="role role--sensor"><span class="role__tag">Sensor</span><span class="role__val">Unit tests<small>+ migration guide</small></span></div> | |
| </div> | |
| <blockquote data-frag>A valuable resource inherited from brownfield codebases are the tests, interfaces and contracts that outline your software.</blockquote> | |
| </section> | |
| <!-- 10 — what you don't measure drifts --> | |
| <section class="slide"> | |
| <span class="kicker">The risk of a single sensor</span> | |
| <h2>What you don't measure, drifts</h2> | |
| <div class="charts"> | |
| <div class="chart-card" data-frag> | |
| <h3>Correctness</h3> | |
| <div class="axisname">% tests passing · sensor attached</div> | |
| <svg class="chart-svg" viewBox="0 0 320 150" aria-label="Correctness held above a test floor"> | |
| <line class="axis" x1="34" y1="12" x2="34" y2="126"/> | |
| <line class="axis" x1="34" y1="126" x2="308" y2="126"/> | |
| <polyline class="series cool" points="34,34 72,32 108,33 132,66 162,33 210,33 246,62 288,33"/> | |
| <circle cx="294" cy="33" r="11" fill="#34d27b"/> | |
| <path d="M289,33 L292.5,37 L298.5,28" fill="none" stroke="#08130c" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/> | |
| </svg> | |
| <p class="cap">The sensor ensures regressions caught by tests are <b>addressed before moving on</b>.</p> | |
| </div> | |
| <div class="chart-card" data-frag> | |
| <h3>Performance</h3> | |
| <div class="axisname">request latency · no sensor</div> | |
| <svg class="chart-svg" viewBox="0 0 320 150" aria-label="Performance drifting with no floor"> | |
| <line class="axis" x1="34" y1="12" x2="34" y2="126"/> | |
| <line class="axis" x1="34" y1="126" x2="308" y2="126"/> | |
| <polyline class="series warm" points="34,46 79,64 124,56 169,84 214,92 259,106 290,112"/> | |
| <circle cx="296" cy="112" r="11" fill="#f0556b"/> | |
| <path d="M292,108 L300,116 M300,108 L292,116" fill="none" stroke="#1a0a0d" stroke-width="2.4" stroke-linecap="round"/> | |
| </svg> | |
| <p class="cap">Nothing measures it — so it quietly <b>drifts down</b>.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- 11 — objective --> | |
| <section class="slide"> | |
| <span class="kicker">Composing sensors</span> | |
| <h2>Feedback composes into an objective</h2> | |
| <div class="spec"> | |
| <span class="kw">maximize</span> performance<br> | |
| <span class="kw cool">subject to</span> tests still pass | |
| </div> | |
| <p>Two distinct kinds of sensor: <strong>correctness</strong> (must stay true) and <strong>quality</strong> (what "better" means).</p> | |
| </section> | |
| <!-- 12 — Liquid (triad) --> | |
| <section class="slide"> | |
| <span class="kicker">Example — Liquid</span> | |
| <h2>Two sensors at once</h2> | |
| <div class="triad"> | |
| <div class="role role--controller"><span class="role__tag">Controller</span><span class="role__val">Auto-research agent<small>Pi</small></span></div> | |
| <div class="role role--plant"><span class="role__tag">Plant</span><span class="role__val">Liquid<small>templating library</small></span></div> | |
| <div class="role role--sensor"><span class="role__tag">Sensor</span><span class="role__val">974 unit tests<small>correctness + perf metrics (objective)</small></span></div> | |
| </div> | |
| <p>Iterative agent experiments on a 20-year-old library — tests held correctness while benchmarks drove a <strong>53% speedup</strong>.</p> | |
| </section> | |
| <!-- 13 — Lesson 2 --> | |
| <section class="slide slide--lesson"> | |
| <div class="lesson__num">2</div> | |
| <div class="lesson__body"> | |
| <span class="kicker">Lesson 2</span> | |
| <h2>Give your agent<br>an objective</h2> | |
| <p>Use automated feedback to specify what must stay <em>true</em> and to guide it toward <em>better</em> outcomes.</p> | |
| </div> | |
| </section> | |
| <!-- 14 — zoom out: the sensor is the design space --> | |
| <section class="slide"> | |
| <h2>You choose<br>the <span class="grad-cool">sensor</span></h2> | |
| <svg class="diagram" viewBox="0 0 1060 430" style="max-width:600px;margin:8px auto 0" aria-label="Closed loop with the sensor highlighted"> | |
| <defs> | |
| <filter id="sensorGlow" x="-60%" y="-60%" width="220%" height="220%"> | |
| <feGaussianBlur stdDeviation="9" result="b"/> | |
| <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge> | |
| </filter> | |
| </defs> | |
| <!-- forward path (dimmed) --> | |
| <g opacity=".24"> | |
| <path d="M50,154 H130" fill="none" class="edge-warm" stroke-width="2.5" marker-end="url(#ahW)"/> | |
| <path d="M350,154 H690" fill="none" class="edge-warm" stroke-width="2.5" marker-end="url(#ahW)"/> | |
| <path d="M910,154 H1015" fill="none" class="edge-warm" stroke-width="2.5" marker-end="url(#ahW)"/> | |
| <rect x="140" y="110" width="200" height="88" rx="16" class="node-fill node-stroke-warm" stroke-width="2"/> | |
| <text x="240" y="144" text-anchor="middle" class="ntag" fill="#FFC15E">CONTROLLER</text> | |
| <text x="240" y="176" text-anchor="middle" class="nlabel">Agent</text> | |
| <rect x="700" y="110" width="200" height="88" rx="16" class="node-fill node-stroke-plant" stroke-width="2"/> | |
| <text x="800" y="144" text-anchor="middle" class="ntag">PLANT</text> | |
| <text x="800" y="176" text-anchor="middle" class="nlabel">Software</text> | |
| </g> | |
| <!-- feedback path (highlighted) --> | |
| <path d="M812,198 C828,278 730,340 636,356" fill="none" class="edge-cool dash" stroke-width="2.5" marker-end="url(#ahC)"/> | |
| <path d="M404,356 C290,338 222,278 230,200" fill="none" class="edge-cool dash" stroke-width="2.5" marker-end="url(#ahC)"/> | |
| <g filter="url(#sensorGlow)"> | |
| <rect x="420" y="320" width="200" height="86" rx="16" class="node-fill node-stroke-cool" stroke-width="3"/> | |
| <text x="520" y="353" text-anchor="middle" class="ntag" fill="#5FE3F0">SENSOR</text> | |
| <text x="520" y="383" text-anchor="middle" class="nlabel">Feedback</text> | |
| </g> | |
| </svg> | |
| </section> | |
| <!-- 15 — only sensor --> | |
| <section class="slide"> | |
| <span class="kicker">Why you can't be the sensor</span> | |
| <h2>If you're the only sensor…</h2> | |
| <ol class="fail"> | |
| <li data-frag><span class="n">1</span>In the loop every step → <strong>too slow</strong></li> | |
| <li data-frag><span class="n">2</span>Out of the loop entirely → <strong>you lose control</strong></li> | |
| </ol> | |
| <p style="margin-top:22px" data-frag><strong>Neither scales.</strong></p> | |
| </section> | |
| <!-- 16 — feedback: the compiler --> | |
| <section class="slide slide--fb"> | |
| <span class="kicker cool">The sensor zoo</span> | |
| <h2>Leverage type systems</h2> | |
| <ul class="big"> | |
| <li>Strongly typed languages like <strong>Rust and TypeScript</strong> are popular choices to use with AI</li> | |
| <li>A stronger type system can help catch some classes of errors</li> | |
| </ul> | |
| </section> | |
| <!-- 17 — feedback: visual --> | |
| <section class="slide slide--fb"> | |
| <span class="kicker cool">The sensor zoo</span> | |
| <h2>Give visual feedback</h2> | |
| <ul class="big"> | |
| <li><code>playwright</code> lets the agent see the content it produces</li> | |
| <li>Assists with spatial understanding of content & UIs</li> | |
| </ul> | |
| </section> | |
| <!-- 18 — feedback: hooks --> | |
| <section class="slide slide--fb"> | |
| <span class="kicker cool">The sensor zoo</span> | |
| <h2>Hooks</h2> | |
| <ul class="big"> | |
| <li>Provide feedback promptly after a change is made</li> | |
| <li>Configurable to fire only on specific agent actions — targeted</li> | |
| </ul> | |
| </section> | |
| <!-- 19 — feedback: adversarial review --> | |
| <section class="slide slide--fb"> | |
| <span class="kicker cool">The sensor zoo</span> | |
| <h2>Adversarial review</h2> | |
| <ul class="big"> | |
| <li>Use a different LLM to provide feedback on the implementation</li> | |
| <li>Use for code review and architectural feedback</li> | |
| </ul> | |
| </section> | |
| <!-- 20 — feedback: differential testing --> | |
| <section class="slide slide--fb"> | |
| <span class="kicker cool">The sensor zoo</span> | |
| <h2>Differential testing</h2> | |
| <ul class="big"> | |
| <li>Compare against the previous implementation's output, or a reference implementation</li> | |
| <li>Anthropic's <strong>C compiler</strong> vs gcc · new <strong>GPU kernels</strong></li> | |
| </ul> | |
| </section> | |
| <!-- 21 — feedback: property-based testing --> | |
| <section class="slide slide--fb"> | |
| <span class="kicker cool">The sensor zoo</span> | |
| <h2>Property-based testing</h2> | |
| <ul class="big"> | |
| <li>Assert the properties that must hold, not specific cases</li> | |
| <li>Throws thousands of generated inputs at your code — <code>hypothesis</code> for Python, <code>proptest</code> for Rust</li> | |
| </ul> | |
| </section> | |
| <!-- 22 — feedback: complexity constraints --> | |
| <section class="slide slide--fb"> | |
| <span class="kicker cool">The sensor zoo</span> | |
| <h2>Complexity constraints</h2> | |
| <ul class="big"> | |
| <li>Add a budget and let the agent optimize within it</li> | |
| <li>Karpathy's auto-research: what's the best LLM you can train in <strong>5min of compute</strong>?</li> | |
| <li>Or constrain the source: the best solution under <strong>10 KB</strong></li> | |
| </ul> | |
| </section> | |
| <!-- 23 — variety unlocks complexity --> | |
| <section class="slide"> | |
| <span class="kicker cool">The payoff</span> | |
| <h2 style="max-width:none;white-space:nowrap">More feedback, harder problems</h2> | |
| <svg class="chart-svg" viewBox="0 0 900 432" style="max-width:840px;margin:4px auto 0" aria-label="Each added kind of feedback lets the agent stay reliable at higher task complexity"> | |
| <!-- axes --> | |
| <line class="axis" x1="80" y1="48" x2="80" y2="392"/> | |
| <line class="axis" x1="80" y1="392" x2="884" y2="392"/> | |
| <!-- progression curves: dim → bright as feedback variety grows --> | |
| <path class="prog p1" d="M90,82 L150,82 C195,82 215,358 260,362 L884,366"/> | |
| <path class="prog p2" d="M90,82 L330,82 C375,82 395,356 440,360 L884,364"/> | |
| <path class="prog p3" d="M90,82 L500,82 C555,82 575,352 620,356 L884,360"/> | |
| <path class="prog p4" d="M90,82 L660,82 C748,82 808,232 884,300"/> | |
| <!-- curve labels --> | |
| <text class="plab" x="180" y="66" text-anchor="middle" fill="#7c879d">you only</text> | |
| <text class="plab" x="360" y="66" text-anchor="middle" fill="#3d7fb0">+ tests</text> | |
| <text class="plab" x="540" y="66" text-anchor="middle" fill="#39A0FF">+ types & tools</text> | |
| <text class="plab" x="724" y="66" text-anchor="middle" fill="#5FE3F0">+ the sensor zoo</text> | |
| <!-- axis labels --> | |
| <text class="alab" x="482" y="420" text-anchor="middle">task complexity →</text> | |
| <text class="alab" x="60" y="220" text-anchor="middle" transform="rotate(-90 60 220)">reliable output</text> | |
| </svg> | |
| <p style="max-width:62ch;margin:10px auto 0;text-align:center">Each new kind of feedback pushes the frontier — keeping the agent reliable on harder and harder work.</p> | |
| </section> | |
| <!-- 24 — Lesson 3 --> | |
| <section class="slide slide--lesson"> | |
| <div class="lesson__num">3</div> | |
| <div class="lesson__body"> | |
| <span class="kicker">Lesson 3</span> | |
| <h2>Be creative in<br>building feedback</h2> | |
| <p>Diversity helps you find the best options for your own projects — and build to higher leverage.</p> | |
| </div> | |
| </section> | |
| <!-- 25 — prediction --> | |
| <section class="slide"> | |
| <span class="kicker">Prediction</span> | |
| <h2>Engineering swings <span class="grad">back</span> toward rigor</h2> | |
| </section> | |
| <!-- 26 — where feedback could slow you down --> | |
| <section class="slide"> | |
| <span class="kicker">Caveat</span> | |
| <h2>Where feedback could slow you down</h2> | |
| <ul class="big" style="max-width:920px"> | |
| <li data-frag><strong>Too strict</strong> — feedback becomes a burden: more inertia, a parallel skeleton to maintain</li> | |
| <li data-frag><strong>Choose creatively</strong> — the right sensors mean less to maintain and rewrite</li> | |
| <li data-frag><strong>Stay flexible</strong> — lean on the type system or property-based tests, not brittle case-by-case checks</li> | |
| </ul> | |
| </section> | |
| <!-- 27 — takeaway --> | |
| <section class="slide"> | |
| <span class="kicker">Takeaway</span> | |
| <h2>Close the loop</h2> | |
| <ol class="fail" style="max-width:760px"> | |
| <li><span class="n">1</span>Give your agent automated feedback</li> | |
| <li><span class="n">2</span>Set an objective — correctness <strong>and</strong> quality</li> | |
| <li><span class="n">3</span>Be creative in building feedback</li> | |
| </ol> | |
| </section> | |
| <!-- 28 — learn more --> | |
| <section class="slide"> | |
| <span class="kicker">Learn more</span> | |
| <h2>Close your agentic loop</h2> | |
| <div class="closing"> | |
| <div style="width:470px;flex:none"> | |
| <div class="qr-row" style="gap:40px;margin:14px 0 22px"> | |
| <a class="qr-card" href="https://banay.me/dont-waste-your-backpressure/" target="_blank" rel="noopener"> | |
| <img src="data:image/png;base64,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" alt="QR to blog post" style="width:180px;height:180px"> | |
| <div class="cap">Read the original post<br>"Don't waste your back pressure"</div> | |
| </a> | |
| <a class="qr-card" href="https://www.optiver.com/join-us/jobs/?q=ai" target="_blank" rel="noopener"> | |
| <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAhAAAAIQCAIAAABfYsDeAAAKGklEQVR4nO3dwW0kNxBA0ZGhHHR0As4/kk3AFwFzmosCcAa7v+EmVBTfOw+0PWyOP+gD6+3r9fkAgD/564+fAADBAKBywgAgEQwAEsEAIBEMABLBACARDAASwQAgEQwAEsEAIBEMABLBACARDAASwQAgEQwAEsEAIBEMABLBACARDAASwQAgEQwAEsEAIBEMABLBACARDAASwQAgEQwAEsEAIBEMABLBACB5fyz28fc/q/+Jozz//XXp89b/3vVcbff3ZX/+7P3shAFAIhgAJIIBQCIYACSCAUAiGAAkggFAIhgAJIIBQCIYACSCAUAiGAAkggFAIhgAJIIBwIx5GLvPJ1ht9/kH7PV+d/997f78u+8fJwwAEsEAIBEMABLBACARDAASwQAgEQwAEsEAIBEMABLBACARDAASwQAgEQwABAOA+zhhALDnPIzd74ufdl//6udZvf5Xn//q8+y+f1Y//9W/P23/7/5+p3HCACARDAASwQAgEQwAEsEAIBEMABLBACARDAASwQAgEQwAEsEAIBEMABLBACARDAASwQDgjHkYfO88g2nzG66a9vzT/v7u8xu4lxMGAIlgAJAIBgCJYACQCAYAiWAAkAgGAIlgAJAIBgCJYACQCAYAiWAAkAgGAIlgAJAIBgCJeRg/nHkGe1n9vqbNI2EvThgAJIIBQCIYACSCAUAiGAAkggFAIhgAJIIBQCIYACSCAUAiGAAkggFAIhgAJIIBQCIYAJwxD8O8h+91db7C1fd12t+fNq9i9fqsNu15dueEAUAiGAAkggFAIhgAJIIBQCIYACSCAUAiGAAkggFAIhgAJIIBgGAAcB8nDAASwQAgEQwA9pyHMW0ewO52n2dwmt3neaw27XlO44QBQCIYACSCAUAiGAAkggFAIhgAJIIBQCIYACSCAUAiGAAkggFAIhgAJIIBQCIYACSCAUDy9vX6bJ9kS6vnB5w2P+O0+RNXnbYfTuOEAUAiGAAkggFAIhgAJIIBQCIYACSCAUAiGAAkggFAIhgAJIIBQCIYACSCAUAiGAAkggFA8v5YbPf5AdOeZ9p8gmnrf9r+XG339T9tPzwXr48TBgCJYACQCAYAiWAAkAgGAIlgAJAIBgCJYACQCAYAiWAAkAgGAIlgAJAIBgCJYACQCAYAM+ZhnGb1ffSrTbuvf9q8hNNMm+cxbX9eNW1+xlVOGAAkggFAIhgAJIIBQCIYACSCAUAiGAAkggFAIhgACAYA93HCACARDAASwQAgEQwAEsEAYMY8jNPmE0y7r3/35zlt/0z7vtPmMUzzMez3tZoTBgCJYACQCAYAiWAAkAgGAIlgAJAIBgCJYACQCAYAiWAAkAgGAIlgAJAIBgCJYACQCAYAM+ZhrLb6vvjT7ruf9jzT5jGY5/Gz57vs/t+f5+LnccIAIBEMABLBACARDAASwQAgEQwAEsEAIBEMABLBACARDAASwQAgEQwAEsEAIBEMABLBACB5+3p9PnY27b740+ZnrF5/6/m96zltv6122n67ygkDgEQwAEgEA4BEMABIBAOARDAASAQDgEQwAEgEA4BEMABIBAOARDAASAQDgEQwAEgEA4Dk/bHYaffvm7fxs502L2H1913t6nquni/ysfn+ccIAIBEMABLBACARDAASwQAgEQwAEsEAQDAAuI8TBgCJYACQCAYAiWAAkAgGAIlgAJAIBgDJ29fr8zHJtPkZ0+YBnDYvYfV8gt2fZzW/r73e79M8DAAm8L+kAEgEA4BEMABIBAOARDAASAQDgEQwAEgEA4BEMABIBAOARDAASAQDgEQwAEgEA4Dk/bG5afMPTpsXMm0+xO7Ps9rq77t6f+4+f+Jj2O/3KicMABLBACARDAASwQAgEQwAEsEAIBEMABLBACARDAASwQAgEQwAEsEAIBEMABLBACARDABmzMM47f760+w+/2D3eQbTnme11e/rtPW8ygkDgEQwAEgEA4BEMABIBAOARDAASAQDgEQwAEgEA4BEMABIBAOARDAASAQDgEQwAEgEA4AZ8zCm3Rc/bb7FtPkQ0+ZbTFuf1abNY5i2ntP2z8ew9VnNCQOARDAASAQDgEQwAEgEAwDBAOA+ThgAJIIBQCIYACSCAUAiGAAkggFAIhgAJIIBQCIYAMyYhzHtfv+r3Ke/l2n7Z9r8htXrM239r9p9/VdzwgAgEQwAEsEAIBEMABLBACARDAASwQAgEQwAEsEAIBEMABLBACARDAASwQAgEQwAEsEAYMY8jNX3v+9+H715G/yf/bza7r8X7uWEAUAiGAAkggFAIhgAJIIBQCIYACSCAUAiGAAkggFAIhgAJIIBQCIYACSCAUAiGAAkggFA8vb1+nycNA9g9fyJ3f/+7qwPkz03n+fhhAFAIhgAJIIBQCIYACSCAUAiGAAkggFAIhgAJIIBQCIYACSCAUAiGAAkggFAIhgAJIIBwJ7zMLjXtHkb0+ZVTJtPMO37rn6/q5kHcy8nDAASwQAgEQwABAOA+zhhAJAIBgCJYACQCAYAiWAAkAgGAIlgAJAIBgCJYACQCAYAiWAAkLw/FjvtPvrVVs8bmDbfwve9dz2n/R6n7Yernpvv/6ucMABIBAOARDAASAQDgEQwAEgEA4BEMABIBAOARDAASAQDgEQwAEgEA4BEMABIBAOARDAAmDEP46pp97+vNm0+we5Wr+e09zVtXshVp/3en5t/XycMABLBACARDAASwQAgEQwAEsEAIBEMABLBACARDAASwQAgEQwAEsEAIBEMABLBACARDAD2nIdx1WnzCU6bl3Da9919/sS0/bB6fT6Gfd/V79cJA4BEMABIBAOARDAASAQDgEQwAEgEA4BEMABIBAOARDAASAQDgEQwAEgEA4BEMABIBAOAM+Zh8HunzVcwz+Beq9dz2v7Z/flXc8IAIBEMABLBACARDAASwQAgEQwAEsEAIBEMABLBACARDAASwQAgEQwAEsEAIBEMABLBACAxD4PR9/vvPo9htWnfd/f9s/vzrOaEAUAiGAAkggFAIhgAJIIBQCIYACSCAUAiGAAkggFAIhgAJIIBQCIYACSCAUAiGAAkggHAGfMwdr9ffrVp8wCmmfb8V9/X6nkhpzGv5fecMABIBAOARDAASAQDgEQwAEgEA4BEMABIBAOARDAASAQDgEQwAEgEA4BEMABIBAOARDAA2HMehvv6f/Z67j6/YdrzT1ufq8yz2YsTBgCJYACQCAYAiWAAkAgGAIlgAJAIBgCJYACQCAYAiWAAkAgGAIlgAJAIBgCJYACQCAYAydvX67N9EoCjOWEAkAgGAIlgAJAIBgCJYACQCAYAiWAAkAgGAIlgAJAIBgCJYACQCAYAiWAAkAgGAIlgAJAIBgCJYACQCAYAiWAAkAgGAIlgAJAIBgCJYACQCAYAiWAAkAgGAIlgAJAIBgCJYACQCAYAiWAA8Cj+A136BKvQo0GSAAAAAElFTkSuQmCC" alt="QR to Optiver AI jobs" style="width:180px;height:180px"> | |
| <div class="cap">Work with us @ Optiver</div> | |
| </a> | |
| </div> | |
| <p class="muted" style="max-width:none">Also catch Ryan's talk <strong>"One Tool to Rule Them All"</strong> at 2:40pm in Hallway to see how this is applied at Optiver.</p> | |
| </div> | |
| <ol class="fail" style="flex:1;max-width:none;min-width:0"> | |
| <li><span class="n">1</span>Give your agent automated feedback</li> | |
| <li><span class="n">2</span>Set an objective — correctness <strong>and</strong> quality</li> | |
| <li><span class="n">3</span>Be creative in building feedback</li> | |
| </ol> | |
| </div> | |
| </section> | |
| </div> | |
| </div> | |
| <div id="counter">01 / 23</div> | |
| <div class="nav" id="prev" title="Previous"><svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg></div> | |
| <div class="nav" id="next" title="Next"><svg viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg></div> | |
| <script> | |
| (function () { | |
| const stage = document.getElementById('stage'); | |
| const slides = [...document.querySelectorAll('.slide')]; | |
| const progress = document.getElementById('progress'); | |
| const counter = document.getElementById('counter'); | |
| let current = 0; | |
| // Scale the fixed 1280x720 stage to fit the viewport. | |
| function fit() { | |
| const s = Math.min(window.innerWidth / 1280, window.innerHeight / 720); | |
| stage.style.transform = `scale(${s})`; | |
| } | |
| window.addEventListener('resize', fit); | |
| fit(); | |
| function setFrags(slide, shown) { | |
| slide.querySelectorAll('[data-frag]').forEach(f => f.classList.toggle('show', shown)); | |
| } | |
| function go(n, dir) { | |
| n = Math.max(0, Math.min(slides.length - 1, n)); | |
| if (n === current) return; | |
| const out = slides[current], inc = slides[n]; | |
| out.classList.remove('active'); | |
| out.style.transform = `translateX(${dir > 0 ? -90 : 90}px) scale(.985)`; | |
| out.style.opacity = '0'; | |
| inc.style.transition = 'none'; | |
| inc.style.transform = `translateX(${dir > 0 ? 90 : -90}px) scale(.985)`; | |
| inc.style.opacity = '0'; | |
| setFrags(inc, dir < 0); // arrive fully-revealed when stepping back | |
| void inc.offsetWidth; // reflow so the entrance animates | |
| inc.style.transition = ''; | |
| inc.classList.add('active'); | |
| inc.style.transform = ''; | |
| inc.style.opacity = ''; | |
| current = n; | |
| update(); | |
| } | |
| function update() { | |
| progress.style.width = ((current) / (slides.length - 1) * 100) + '%'; | |
| const pad = x => String(x).padStart(2, '0'); | |
| counter.textContent = `${pad(current + 1)} / ${pad(slides.length)}`; | |
| if (location.hash !== '#' + (current + 1)) history.replaceState(null, '', '#' + (current + 1)); | |
| } | |
| // Group fragments into ordered steps. Elements sharing a non-empty | |
| // data-frag value reveal together; bare data-frag elements are solo steps. | |
| function fragSteps(slide) { | |
| const steps = [], byKey = new Map(); | |
| [...slide.querySelectorAll('[data-frag]')].forEach((el, i) => { | |
| const key = el.getAttribute('data-frag') || ('' + i); | |
| if (!byKey.has(key)) { const g = []; byKey.set(key, g); steps.push(g); } | |
| byKey.get(key).push(el); | |
| }); | |
| return steps; | |
| } | |
| function nextStep() { | |
| const hidden = fragSteps(slides[current]).find(g => !g[0].classList.contains('show')); | |
| if (hidden) { hidden.forEach(e => e.classList.add('show')); return; } | |
| go(current + 1, +1); | |
| } | |
| function prevStep() { | |
| const shown = fragSteps(slides[current]).filter(g => g[0].classList.contains('show')); | |
| if (shown.length) { shown[shown.length - 1].forEach(e => e.classList.remove('show')); return; } | |
| go(current - 1, -1); | |
| } | |
| document.addEventListener('keydown', e => { | |
| switch (e.key) { | |
| case 'ArrowRight': case ' ': case 'PageDown': case 'ArrowDown': e.preventDefault(); nextStep(); break; | |
| case 'ArrowLeft': case 'PageUp': case 'ArrowUp': e.preventDefault(); prevStep(); break; | |
| case 'Home': go(0, -1); break; | |
| case 'End': go(slides.length - 1, +1); break; | |
| case 'f': case 'F': if (!document.fullscreenElement) document.documentElement.requestFullscreen(); else document.exitFullscreen(); break; | |
| } | |
| }); | |
| // click + touch | |
| document.getElementById('next').addEventListener('click', nextStep); | |
| document.getElementById('prev').addEventListener('click', prevStep); | |
| let tx = 0; | |
| addEventListener('touchstart', e => tx = e.changedTouches[0].clientX, { passive: true }); | |
| addEventListener('touchend', e => { | |
| const dx = e.changedTouches[0].clientX - tx; | |
| if (Math.abs(dx) > 50) dx < 0 ? nextStep() : prevStep(); | |
| }, { passive: true }); | |
| // deep-link | |
| function fromHash() { | |
| const n = parseInt(location.hash.slice(1), 10); | |
| if (!isNaN(n) && n >= 1 && n <= slides.length) { current = n - 1; } | |
| } | |
| fromHash(); | |
| addEventListener('hashchange', () => { const n = parseInt(location.hash.slice(1), 10) - 1; if (n !== current && n >= 0 && n < slides.length) go(n, n > current ? 1 : -1); }); | |
| slides[current].classList.add('active'); | |
| setFrags(slides[current], false); | |
| update(); | |
| // Utility for tooling/previews: jump to a 1-based slide instantly. | |
| window.gotoSlide = (n) => go(n - 1, n - 1 > current ? 1 : -1); | |
| })(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment