Tokenizer as a GitHub Copilot desktop canvas extension

[MSFT-TKENDRICK]

What & why

Surfaces the repo's tokenizer as a GitHub Copilot desktop canvas extension — a live side-panel that tokenizes text and compares input cost across Copilot models without leaving the app.

Built end-to-end with the agentic SDLC orchestrator from #1 over a dedicated SpecKit spec (specs/002-tokenizer-canvas/).

Stacked on #1. Based on msft-tkendrick/sdlc-squad-agent because the canvas was produced by — and its SDLC artifacts (facets MSF-006..010, ADR-002, squad, evals) extend — the orchestrator in #1. The diff here is only the canvas commit; GitHub retargets the base to main automatically when #1 merges. The two features stay on separate branches / separate PRs.

What is here

Canvas (.github/extensions/tokenizer/)

• extension.mjs — Copilot SDK canvas: per-instance loopback http.Server, static + /state persistence routes, SSE /events, and set_text / get_summary actions. Never writes stdout (JSON-RPC safe).
• web/{index.html,styles.css,app.js} — iframe UI on app theme tokens: live summary, color and non-color token categories, sortable 23-model cost table with over-limit flags.
• web/{tokenizer.mjs,models.mjs} — 1:1 ESM ports of src/lib/tokenizer.ts / copilotModels.ts, shared by the iframe and the Node actions.
• Session-scoped persistence keyed by sessionId under $COPILOT_HOME, outside the repo tree (ADR-002 / MSF-006).

SDLC artifacts (spec 002)

• specs/002-tokenizer-canvas/spec.md (FR-009 clarification resolved).
• docs/sdlc/002-tokenizer-canvas/ — interview, GROUNDED proof (13/13), squad manifest, 8 ASSERT evals, 7 BDD features, TDD loop, evidence (+ screenshots).
• docs/sdlc/facets/MSF-006..010, docs/sdlc/adr/ADR-002, and 7 grounded squad agents under .github/agents/squad/.
• tests/sdlc/tokenizer-canvas/ — TDD tests + Playwright visual spec + static server.

Verification

• npm test 66/66 | typecheck clean | vite build OK | design:lint 0 errors / 0 warnings.
• Canvas runtime-validated: reload -> ready, open_canvas -> loopback URL, set_text/get_summary round-trip, /state persistence, input-schema + reserved-name guards.
• Grounding 13/13 (100%); Playwright screenshots confirm a genuine render.

Try it

Open the Tokenizer canvas from the Copilot desktop app side panel.

Co-authored-by: Copilot 223556219+Copilot@users.noreply.github.com