Here is the 4:3 SVG illustrating the initial RPC query transmitting a function stub endpoint, and the subsequent query showing it being passed through the stub to serialize the function call, per the capnweb repository's specifications.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" width="100%" height="100%">
<!-- Background -->
<rect width="800" height="600" fill="#1E1E1E" />
<style>
.title { font-family: 'Segoe UI', Arial, sans-serif; font-size: 24px; font-weight: bold; fill: #E0E0E0; text-anchor: middle; }
.subtitle { font-family: 'Segoe UI', Arial, sans-serif; font-size: 16px; font-weight: normal; fill: #A0A0A0; text-anchor: middle; }
.agent-title { font-family: 'Segoe UI', Arial, sans-serif; font-size: 18px; font-weight: bold; fill: #FFFFFF; text-anchor: middle; }
.text { font-family: 'Segoe UI', Arial, sans-serif; font-size: 14px; fill: #CCCCCC; }
.bold { font-weight: bold; fill: #FFFFFF; }
/* Code styling */
.code { font-family: 'Consolas', 'Monaco', monospace; font-size: 14px; fill: #D4D4D4; }
.kw { fill: #569CD6; } /* keyword */
.str { fill: #CE9178; } /* string */
.num { fill: #B5CEA8; } /* number */
.fn { fill: #DCDCAA; } /* function */
.var { fill: #9CDCFE; } /* variable */
.comment { fill: #6A9955; font-style: italic; }
/* Shapes */
.box { fill: #252526; stroke: #3E3E42; stroke-width: 2; rx: 6; ry: 6; }
.highlight-box-a { fill: #252526; stroke: #4A90E2; stroke-width: 2; rx: 6; ry: 6; }
.highlight-box-b { fill: #252526; stroke: #50E3C2; stroke-width: 2; rx: 6; ry: 6; }
/* Lines */
.timeline { stroke: #404040; stroke-width: 2; stroke-dasharray: 6,4; }
.arrow-line-a { stroke: #4A90E2; stroke-width: 3; fill: none; }
.arrow-head-a { fill: #4A90E2; }
.arrow-line-b { stroke: #50E3C2; stroke-width: 3; fill: none; }
.arrow-head-b { fill: #50E3C2; }
/* Annotations */
.anno-line { stroke: #F8E71C; stroke-width: 1.5; stroke-dasharray: 4,4; fill: none; }
.anno-box { fill: #2D2D2D; stroke: #F8E71C; stroke-width: 1.5; rx: 4; ry: 4; }
.anno-text { font-family: 'Segoe UI', Arial, sans-serif; font-size: 13px; fill: #F8E71C; }
</style>
<!-- Titles -->
<text x="400" y="35" class="title">Cap'n Web RPC: Function Serialization & Stubs</text>
<text x="400" y="60" class="subtitle">Transmitting a function across the network and invoking its stub endpoint</text>
<!-- Timelines & Agent Headers -->
<line x1="200" y1="120" x2="200" y2="580" class="timeline" />
<line x1="600" y1="120" x2="600" y2="580" class="timeline" />
<!-- Agent A (Client) Header -->
<rect x="120" y="80" width="160" height="40" rx="20" ry="20" fill="#4A90E2" opacity="0.2" />
<circle cx="140" cy="100" r="12" fill="#4A90E2" />
<text x="210" y="106" class="agent-title" fill="#4A90E2">Agent A (Client)</text>
<!-- Agent B (Server) Header -->
<rect x="520" y="80" width="160" height="40" rx="20" ry="20" fill="#50E3C2" opacity="0.2" />
<circle cx="540" cy="100" r="12" fill="#50E3C2" />
<text x="610" y="106" class="agent-title" fill="#50E3C2">Agent B (Server)</text>
<!-- STEP 1: INITIAL QUERY -->
<!-- Client JS Code -->
<rect x="20" y="150" width="160" height="45" class="box" />
<text x="30" y="168" class="code comment">// 1. Pass callback</text>
<text x="30" y="186" class="code"><tspan class="var">api</tspan>.<tspan class="fn">register</tspan>(<tspan class="var">myFunc</tspan>);</text>
<!-- Arrow A -> B -->
<path d="M 210 180 L 580 180" class="arrow-line-a" />
<polygon points="580,174 595,180 580,186" class="arrow-head-a" />
<!-- JSON Serialization A -> B -->
<rect x="250" y="150" width="300" height="110" class="highlight-box-a" />
<text x="260" y="170" class="code">
<tspan>[</tspan><tspan class="str">"push"</tspan><tspan>,</tspan>
</text>
<text x="260" y="190" class="code">
<tspan> [</tspan><tspan class="str">"import"</tspan><tspan>, </tspan><tspan class="num">0</tspan><tspan>, [</tspan><tspan class="str">"register"</tspan><tspan>],</tspan>
</text>
<text x="260" y="210" class="code">
<tspan> [[</tspan><tspan class="str">"export"</tspan><tspan>, </tspan><tspan class="num">-1</tspan><tspan>]]</tspan>
</text>
<text x="260" y="230" class="code">
<tspan> ]</tspan>
</text>
<text x="260" y="250" class="code">
<tspan>]</tspan>
</text>
<!-- Annotation for Step 1 -->
<path d="M 400 210 L 400 280 L 510 280" class="anno-line" />
<rect x="520" y="260" width="260" height="60" class="anno-box" />
<text x="535" y="280" class="text" fill="#F8E71C">Server maps <tspan class="str" font-family="monospace">["export", -1]</tspan> to a</text>
<text x="535" y="300" class="text" fill="#F8E71C">proxy stub (<tspan class="var" font-family="monospace">Import -1</tspan>) for <tspan class="var" font-family="monospace">myFunc</tspan></text>
<!-- Server JS Code (Receiving) -->
<rect x="620" y="150" width="160" height="45" class="box" />
<text x="630" y="168" class="code comment">// Receives Proxy</text>
<text x="630" y="186" class="code"><tspan class="var">callbackStub</tspan></text>
<!-- STEP 2: NEXT QUERY -->
<!-- Server JS Code (Invoking) -->
<rect x="620" y="400" width="160" height="45" class="box" />
<text x="630" y="418" class="code comment">// 2. Invoke stub</text>
<text x="630" y="436" class="code"><tspan class="fn">callbackStub</tspan>(<tspan class="str">"Hi"</tspan>);</text>
<!-- Arrow B -> A -->
<path d="M 590 430 L 220 430" class="arrow-line-b" />
<polygon points="220,424 205,430 220,436" class="arrow-head-b" />
<!-- JSON Serialization B -> A -->
<rect x="250" y="390" width="300" height="110" class="highlight-box-b" />
<text x="260" y="410" class="code">
<tspan>[</tspan><tspan class="str">"push"</tspan><tspan>,</tspan>
</text>
<text x="260" y="430" class="code">
<tspan> [</tspan><tspan class="str">"import"</tspan><tspan>, </tspan><tspan class="num">-1</tspan><tspan>, [],</tspan>
</text>
<text x="260" y="450" class="code">
<tspan> [</tspan><tspan class="str">"Hi"</tspan><tspan>]</tspan>
</text>
<text x="260" y="470" class="code">
<tspan> ]</tspan>
</text>
<text x="260" y="490" class="code">
<tspan>]</tspan>
</text>
<!-- Annotation for Step 2 -->
<path d="M 400 450 L 400 520 L 290 520" class="anno-line" />
<rect x="20" y="500" width="260" height="60" class="anno-box" />
<text x="35" y="520" class="text" fill="#F8E71C">Client maps <tspan class="str" font-family="monospace">["import", -1]</tspan> to</text>
<text x="35" y="540" class="text" fill="#F8E71C">its <tspan class="var" font-family="monospace">Export -1</tspan> and calls <tspan class="fn" font-family="monospace">myFunc</tspan></text>
<!-- Client JS Code (Receiving) -->
<rect x="20" y="400" width="160" height="45" class="box" />
<text x="30" y="418" class="code comment">// Executes locally</text>
<text x="30" y="436" class="code"><tspan class="fn">myFunc</tspan>(<tspan class="str">"Hi"</tspan>);</text>
</svg>
This visualization captures the object capability pattern where local myFunc is securely transmitted using negative IDs starting at ["export", -1], transformed into an Import -1 Stub on Agent B, and then invoked later utilizing ["import", -1, ...] syntax serialization over the wire.
I have also recorded this SVG directly in your codebase context at .opencode/assistant/rpc_serialization.svg.