File size: 3,931 Bytes
16f6f5c | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | <svg viewBox="0 0 760 360" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Progressive disclosure: skill loading happens in three stages of growing context cost">
<defs>
<style>
text { font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace; }
.title { font-size: 14px; fill: #c9d1d9; font-weight: 700; }
.stage { font-size: 12px; fill: #c9d1d9; font-weight: 700; }
.label { font-size: 11px; fill: #c9d1d9; }
.dim { font-size: 10px; fill: #8b949e; }
.badge { font-size: 10px; fill: #0d1117; font-weight: 700; }
.panel { fill: #161b22; stroke: #30363d; stroke-width: 1; }
.arrow { stroke: #30363d; stroke-width: 1.5; fill: none; }
</style>
<marker id="arrowhead" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto">
<path d="M0,0 L8,4 L0,8 z" fill="#30363d"/>
</marker>
</defs>
<rect width="760" height="360" fill="#0d1117"/>
<text x="30" y="32" class="title">Progressive Disclosure</text>
<text x="30" y="50" class="dim">An agent loads only what it needs, when it needs it.</text>
<!-- Stage 1: scan metadata -->
<rect class="panel" x="30" y="80" width="220" height="240" rx="6"/>
<circle cx="50" cy="105" r="11" fill="#3fb950"/>
<text x="46" y="109" class="badge">1</text>
<text x="70" y="109" class="stage">Scan metadata</text>
<text x="50" y="135" class="dim">All skills, name + description only</text>
<!-- context bar tiny -->
<text x="50" y="170" class="label">context cost</text>
<rect x="50" y="178" width="180" height="14" fill="#21262d" stroke="#30363d"/>
<rect x="50" y="178" width="14" height="14" fill="#3fb950"/>
<text x="50" y="208" class="dim">~100 tokens</text>
<text x="50" y="240" class="label">always loaded</text>
<text x="50" y="258" class="dim">discovery is cheap, so the</text>
<text x="50" y="272" class="dim">agent can keep the full</text>
<text x="50" y="286" class="dim">catalog in memory.</text>
<line x1="250" y1="200" x2="280" y2="200" class="arrow" marker-end="url(#arrowhead)"/>
<!-- Stage 2: activate one skill -->
<rect class="panel" x="280" y="80" width="220" height="240" rx="6"/>
<circle cx="300" cy="105" r="11" fill="#58a6ff"/>
<text x="296" y="109" class="badge">2</text>
<text x="320" y="109" class="stage">Activate skill</text>
<text x="300" y="135" class="dim">Full SKILL.md loaded into context</text>
<text x="300" y="170" class="label">context cost</text>
<rect x="300" y="178" width="180" height="14" fill="#21262d" stroke="#30363d"/>
<rect x="300" y="178" width="60" height="14" fill="#58a6ff"/>
<text x="300" y="208" class="dim">~2-5k tokens</text>
<text x="300" y="240" class="label">on match only</text>
<text x="300" y="258" class="dim">the description triggered;</text>
<text x="300" y="272" class="dim">instructions, examples, and</text>
<text x="300" y="286" class="dim">guardrails come along.</text>
<line x1="500" y1="200" x2="530" y2="200" class="arrow" marker-end="url(#arrowhead)"/>
<!-- Stage 3: pull deep refs / scripts -->
<rect class="panel" x="530" y="80" width="200" height="240" rx="6"/>
<circle cx="550" cy="105" r="11" fill="#bc8cff"/>
<text x="546" y="109" class="badge">3</text>
<text x="570" y="109" class="stage">Pull on demand</text>
<text x="550" y="135" class="dim">scripts/, references/, assets/</text>
<text x="550" y="170" class="label">context cost</text>
<rect x="550" y="178" width="160" height="14" fill="#21262d" stroke="#30363d"/>
<rect x="550" y="178" width="160" height="14" fill="#bc8cff" opacity="0.85"/>
<text x="550" y="208" class="dim">paid per file read</text>
<text x="550" y="240" class="label">deferred</text>
<text x="550" y="258" class="dim">heavy material stays on</text>
<text x="550" y="272" class="dim">disk until the agent calls</text>
<text x="550" y="286" class="dim">for it explicitly.</text>
</svg>
|