Embeddable charts

[adibarra]

A stable embed URL for InferenceX charts that can be iframed into external docs and partner sites.

Example URL shape:
Feel free to change to fit your design.

• /embed/scatter?model=dsr1&framework=vllm&gpus=h200,b200,mi325x&isl=1024&osl=1024&y=tpPerGpu

Requirements

• An /embed/scatter route that renders a real chart for a given URL state, suitable for iframe embedding at common widths (600px, 800px, full-width). Legend collapses gracefully on narrow widths.
• An embed mode that hides the share buttons, top nav, and footer, and shows a small "SemiAnalysis InferenceX" attribution link back to the canonical page.
• Frame-ancestors CSP that allows embedding for /embed/* routes only, leaving the rest of the site non-framable.
• A canonical, stable embed URL shape we are willing to commit to keeping working long-term.
• embed_view analytics event capturing referrer so external embed traffic is attributable.

Nice to have

• Support for other chart types we have on the site like bar charts, radar, etc.
• Generalized embed builder UI for partners to construct their own embed URLs.

[functionstackx]

@claude can u try fixing this and openning an PR and send me PR link

[github-actions]

Claude finished @functionstackx's task in 15m 28s —— View job • Create PR ➔

---

Embeddable charts — implementation complete, push blocked by permissions

• Explore codebase: scatter chart, contexts, share-link utils, layout, CSP
• Add seedUrlState to url-state.ts and ChromeGate to root layout
• Build embed-params translator + tests
• Implement /embed/scatter page with attribution and embed_view analytics
• Add frame-ancestors CSP via next.config.ts headers
• Add E2E test for /embed/scatter
• Verify in Playwright; typecheck, lint, unit tests, Cypress E2E (all green)
• Commit locally (bb8bf0a)
• Push to origin — blocked: token lacks push permission on SemiAnalysisAI/InferenceX-app (403 denied to Klaud-Cold)

What was built

Stable embed surface at /embed/scatter for iframing the inference scatter chart into partner sites. Closes #269.

URL contract (committed long-term, lives in packages/app/src/lib/embed-params.ts):

/embed/scatter?model=<dbKey>&isl=<n>&osl=<n>&precisions=<csv>&gpus=<csv>&y=<metric>&chart=<e2e|interactivity>

• model — DB model key (dsr1, gptoss120b, llama70b, qwen3.5, kimik2.5, kimik2.6, glm5, glm5.1, dsv4, …). Default dsr1.
• isl / osl — sequence input/output token lengths. Default 8192 / 1024.
• precisions — comma-separated precision keys. Default fp4.
• gpus — comma-separated hwKeys (e.g. b300_sglang,gb300_dynamo-sglang). Default empty (all available). Filters legend-active set.
• y — y-axis metric (short or full form: tpPerGpu or y_tpPerGpu, also costh, costn, costr, tpPerMw, …). Default tpPerGpu.
• chart — e2e or interactivity. Default e2e.

Translation maps embed params to internal g_* / i_* keys via a synchronous seedUrlState call before the providers' lazy URL-param initializers fire.

Embed-only chrome:

• Header & Footer hidden via <ChromeGate> (packages/app/src/components/chrome-gate.tsx) on /embed/*.
• Small SemiAnalysis InferenceX → attribution link at the bottom-right of the embed view, deep-linking to /inference with the equivalent g_model, i_seq, i_active, i_prec, i_metric params.
• Robots noindex,nofollow on the route.

CSP / framing (packages/app/next.config.ts):

• /embed/:path*: Content-Security-Policy: frame-ancestors * (embeddable from any origin).
• All other routes: Content-Security-Policy: frame-ancestors 'self' + X-Frame-Options: SAMEORIGIN (non-framable). Verified via curl -I.

Analytics:

• embed_view event fires on mount with chart_type, embed_chart, model, sequence, precisions, gpus, gpu_count, y_metric, referrer, embed_host.
• embed_attribution_clicked on the canonical-link CTA.

Files

• packages/app/src/lib/embed-params.ts (+ embed-params.test.ts — 13 unit tests)
• packages/app/src/lib/url-state.ts — added seedUrlState
• packages/app/src/app/embed/layout.tsx
• packages/app/src/app/embed/scatter/page.tsx (server, builds canonical href)
• packages/app/src/app/embed/scatter/embed-scatter-client.tsx (seeds + tracks embed_view)
• packages/app/src/components/embed/embed-scatter-display.tsx
• packages/app/src/components/embed/embed-attribution.tsx
• packages/app/src/components/chrome-gate.tsx
• packages/app/src/app/layout.tsx — wraps Header / Footer in <ChromeGate>
• packages/app/next.config.ts — headers() for CSP / X-Frame-Options
• packages/app/cypress/e2e/embed-scatter.cy.ts — 5 E2E specs

Verification

Check	Result
pnpm typecheck	✅
pnpm exec oxlint	✅ 0 warnings, 0 errors
pnpm fmt (oxfmt)	✅
pnpm test:unit (app)	✅ 1742 passing
Cypress embed-scatter.cy.ts	✅ 5/5 passing
Cypress inference-chart.cy.ts	✅ 9/9 passing (no regression)
Cypress sanity.cy.ts	✅ 5/5 passing (no regression)
Playwright /embed/scatter (default, narrow 600px, custom GPU filter, y=costh)	✅ chart renders real data, no console errors, legend collapses below chart on narrow widths
curl -I /embed/scatter	frame-ancestors * present, X-Frame-Options absent ✅
curl -I /inference	frame-ancestors 'self' + X-Frame-Options: SAMEORIGIN ✅

Push failure

remote: Permission to SemiAnalysisAI/InferenceX-app.git denied to Klaud-Cold.
fatal: ... 403

The token in this workflow run has push: false on the repo. The commit bb8bf0a is on local branch claude/issue-269-20260505-0339 but cannot be pushed. To unblock:

1. Grant the Klaud-Cold bot installation push access on SemiAnalysisAI/InferenceX-app, or
2. Re-run with a token that has contents: write, or
3. Apply the patch manually — happy to attach a .patch file or paste the diff if helpful.

Once pushed, you'll be able to open the PR via:

· branch claude/issue-269-20260505-0339

[functionstackx]

@claude retry again, you got correct perms now

[github-actions]

Claude finished @functionstackx's task in 11m 51s —— View job • claude/issue-269-20260505-0421

---

Embeddable charts — implemented and pushed ✅

• Explore codebase: scatter chart, contexts, share-link utils, layout, CSP
• Add seedUrlState to url-state.ts and ChromeGate to root layout
• Build embed-params translator + tests
• Implement /embed/scatter page with attribution and embed_view analytics
• Add frame-ancestors CSP via next.config.ts headers
• Add E2E test for /embed/scatter
• pnpm typecheck / pnpm lint / pnpm fmt / pnpm test:unit — all clean (1749 unit tests)
• Cypress: embed-scatter.cy.ts (7/7), inference-chart.cy.ts (9/9), sanity.cy.ts (5/5)
• Verify in Playwright at 1280px and 600px — chart renders real data, no console errors
• Commit cb9a6ff pushed to origin/claude/issue-269-20260505-0421

Create a PR

Files

• packages/app/src/lib/embed-params.ts (+ .test.ts, 13 unit tests)
• packages/app/src/lib/url-state.ts — added seedUrlState
• packages/app/src/app/embed/layout.tsx
• packages/app/src/app/embed/scatter/page.tsx (server, builds canonical href)
• packages/app/src/app/embed/scatter/embed-scatter-client.tsx (seeds + tracks embed_view)
• packages/app/src/components/embed/embed-scatter-display.tsx
• packages/app/src/components/embed/embed-attribution.tsx
• packages/app/src/components/chrome-gate.tsx
• packages/app/src/app/layout.tsx — wraps Header / Footer in <ChromeGate>
• packages/app/next.config.ts — headers() for CSP / X-Frame-Options
• packages/app/cypress/e2e/embed-scatter.cy.ts — 7 specs
  • Branch: claude/issue-269-20260505-0421 • Commit: cb9a6ff

[rafaykhan-source]

Currently taking a look at this issue!