SWI-11363 feat(web): Migration Preflight playground for sales demos#11
Merged
Conversation
A double-click HTML file (dist/playground.html) that runs the real translation engine in the browser: paste a customer's TwiML (or pick a curated example) and get a live works-as-is / heads-up / blocker verdict, a migration-complexity score, the translated BXML, and a forwardable report. No server, no network, works offline. Honesty invariant: reuses analyzeSource / complexityScore / translateTwiml and the compatibility matrix verbatim, so the verdict provably matches what the live adapter does in production. buildView() is the only new logic and is unit-tested; the SVG/CSS come from a Bandwidth design-system mockup. - web/: view-model, app, index.html, styles.css, examples, DM Sans fonts - scripts/build-playground.ts: esbuild bundle, inlines CSS + fonts (base64), asserts no external resource references - src/matrix/load.ts: browser-bundlable JSON import (was createRequire) - test/playground-view.test.ts: 10 tests over the curated examples - README + web/README: playground is now the headline no-accounts demo Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
kshahbw
changed the title
joshraub-bw
approved these changes
Jul 8, 2026
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What & why
A self-contained, double-click HTML file (
dist/playground.html) a sales engineer can present to a prospect — no server, no install, works offline. Paste a customer's TwiML (or pick a curated example) and it shows, live:X/10),The primary audience is the buying decisionmaker, with the technical evaluator covered by the on-demand BXML. It turns the "change one URL and your app runs on Bandwidth" pitch from an abstract slide into something a buyer sees happen to their own call flow.
The honesty invariant
The page runs the real engine in the browser —
analyzeSource,complexityScore,translateTwiml, and the compatibility matrix, reused verbatim. It does not reimplement any translation or scoring. Because the same matrix drives the live adapter and this page, the verdict provably matches production. (It even corrects the design mockup's fictions: the mockup's fake BXML used a<Bxml>root; real BXML uses<Response>.)How it's built
web/—view-model.ts(the only new logic:buildView, pure + unit-tested),app.ts(DOM/interactions),index.html,styles.css(Bandwidth design-system tokens in:root),examples.ts, and DM Sans fonts.scripts/build-playground.ts— esbuild bundle; inlines CSS + fonts (base64); asserts the output has no external resource references before writing.src/matrix/load.ts— switched fromcreateRequireto a browser-bundlable JSON import (needed to run the engine in the browser; CLI/tests unaffected).npm run playground:build→dist/playground.html(gitignored build product).Scope (intentionally narrow)
TwiML-document input only. No source-scanning (that stays in the CLI
npm run preflight), no live calls, no server. Those need a server and are out of scope for this demo tool.Verification
npm run typecheckclean · 265/265 tests (10 new over the curated examples).🤖 Generated with Claude Code