diff --git a/docs/embed.md b/docs/embed.md
new file mode 100644
index 00000000..cd05f3be
--- /dev/null
+++ b/docs/embed.md
@@ -0,0 +1,79 @@
+# Embed Routes
+
+Public iframe-embedding surface for InferenceX charts. Partner sites can embed any supported chart by iframing an `/embed/*` URL.
+
+## URL parameter contract
+
+Embed URLs use **the same `g_*` / `i_*` parameter keys as the main `/inference` site** — there is no separate embed-specific key contract to maintain. If a site key is renamed or a new key is added, the embed URL automatically benefits from the change. The only embed-specific key is `i_chart` (which chart variant to display — the main site renders both E2E and interactivity together, embeds show only one).
+
+## Supported routes
+
+| Route            | Chart                                    |
+| ---------------- | ---------------------------------------- |
+| `/embed/scatter` | Scatter (E2E throughput / interactivity) |
+
+## `/embed/scatter`
+
+### URL shape
+
+```
+/embed/scatter?g_model=DeepSeek-R1-0528&i_seq=8k%2F1k&i_prec=fp4
+  &i_metric=y_tpPerGpu&i_active=b200_sglang,gb300_dynamo-sglang&i_chart=e2e
+```
+
+### Parameters
+
+| Key        | Type   | Default            | Notes                                                                                                                                                                                                                                                                                                          |
+| ---------- | ------ | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `g_model`  | string | `DeepSeek-R1-0528` | Display model name — same as `g_model` on the main site.                                                                                                                                                                                                                                                       |
+| `i_seq`    | string | `8k/1k`            | Sequence string (e.g. `8k/1k`, `1k/1k`, `1k/8k`) — same as `i_seq` on the main site.                                                                                                                                                                                                                           |
+| `i_prec`   | string | `fp4`              | Comma-separated precision keys (e.g. `fp4`, `fp8`, `bf16`) — same as `i_prec` on the main site.                                                                                                                                                                                                                |
+| `i_metric` | string | `y_tpPerGpu`       | Y-axis metric key (e.g. `y_tpPerGpu`, `y_costh`) — same as `i_metric` on the main site.                                                                                                                                                                                                                        |
+| `i_active` | string | `` (all visible)   | Comma-separated hwKey allow-list (e.g. `b200_sglang,gb300_dynamo-sglang`). When set, the embed legend and chart universe are restricted to exactly these GPUs. Viewers can toggle them on/off but cannot add GPUs outside this set. When absent, all GPUs for the selected model/sequence/precision are shown. |
+| `i_chart`  | string | `e2e`              | Chart variant to render: `e2e` or `interactivity`. Embed-only key — the main site renders both charts together.                                                                                                                                                                                                |
+
+All other `g_*` / `i_*` keys recognized by the main site (e.g. `i_scale`, `i_hc`, `i_nolabel`) are passed through as-is and respected by the embed — the provider stack is identical. Unknown keys are silently ignored.
+
+### `i_active` — hwKey format
+
+Each hwKey token encodes hardware and inference framework together, separated by an underscore (e.g. `b200_sglang`, `gb300_dynamo-sglang`). To find valid hwKey values, visit `/inference` on the live site, open the legend, and note the identifiers shown — or use **Export → Copy embed** to get a ready-made URL with your current filters already encoded.
+
+### `i_metric` — accepted values
+
+Full `y_*` internal keys (e.g. `y_tpPerGpu`, `y_costh`). The authoritative list is in `packages/app/src/lib/chart-utils.ts` (`Y_AXIS_METRICS`).
+
+## Embed mode behavior
+
+- Site header, footer, background decorations, and navigation are hidden on all `/embed/*` routes.
+- A "SemiAnalysis InferenceX →" link appears in the chart caption (`Source: …`), deep-linking to the equivalent canonical dashboard URL. The canonical URL is built from the same embed params (minus `i_chart`), so opening it reproduces the same chart state on the main site.
+- `robots: noindex, nofollow` is set on all embed routes — they won't appear in search results.
+- An `embed_view` PostHog event is fired once on mount, capturing `referrer`, `embed_host`, `embed_chart`, `model` (`g_model`), `sequence` (`i_seq`), `precisions` (`i_prec`), `gpus` (from `i_active`), and `y_metric` (`i_metric`). This makes external embed traffic attributable in analytics.
+
+## CSP / framing
+
+Embed routes (`/embed/*`) set `Content-Security-Policy: frame-ancestors *`, allowing iframing from any origin.
+
+All other routes set `frame-ancestors 'self'` and `X-Frame-Options: SAMEORIGIN`, blocking third-party framing.
+
+## Recommended iframe snippet
+
+```html
+<iframe
+  src="https://inferencex.semianalysis.com/embed/scatter?g_model=DeepSeek-R1-0528&i_seq=8k%2F1k&i_prec=fp4&i_metric=y_tpPerGpu"
+  width="800"
+  height="500"
+  loading="lazy"
+  referrerpolicy="origin"
+  allow="clipboard-write"
+  style="border:none;border-radius:8px"
+>
+</iframe>
+```
+
+**Important — `referrerpolicy="origin"`:** many partner sites ship `<meta name="referrer" content="no-referrer">`. Without an explicit `referrerpolicy="origin"` on the `<iframe>`, the embed loses all referrer information, which breaks traffic attribution in the `embed_view` event. Use `origin` (not `strict-origin-when-cross-origin`) so the referrer is always sent.
+
+`allow="clipboard-write"` is optional but needed if you want clipboard actions inside the embedded chart to work from the parent page.
+
+You can copy the same ready-made iframe snippet from the dashboard: open the chart's **Export** menu and choose **Copy embed**.
+
+For very short iframes (around 300–400 px tall), prefer `width` ≥ 1024 if you want the legend as a side column; below that width the legend uses a collapsible row at the bottom.
diff --git a/docs/index.md b/docs/index.md
index 8a8e0d69..a5a5324d 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -15,3 +15,4 @@ Design rationale and non-obvious conventions. See [CLAUDE.md](../CLAUDE.md) for
 - [Data Transforms](./data-transforms.md) — Full pipeline from BenchmarkRow to RenderableGraph: type hierarchy, hardware key construction, derived metrics, memoization strategy
 - [State Ownership](./state-ownership.md) — Which context owns which state, availability filtering cascade, comparison date mechanics, URL param sync
 - [Blog](./blog.md) — MDX content system, SEO features (OG images, RSS, llms.txt, JSON-LD), TOC sidebar, reading progress, heading links, analytics events
+- [Embed](./embed.md) — Stable iframe-embedding surface: `/embed/*` routes, URL contract, stability guarantee, CSP, recommended snippet
diff --git a/packages/app/cypress/component/chart-buttons.cy.tsx b/packages/app/cypress/component/chart-buttons.cy.tsx
index 8915f4e9..5a9b632e 100644
--- a/packages/app/cypress/component/chart-buttons.cy.tsx
+++ b/packages/app/cypress/component/chart-buttons.cy.tsx
@@ -87,6 +87,65 @@ describe('ChartButtons', () => {
     });
   });
 
+  describe('embed scatter link', () => {
+    it('shows Copy embed when getEmbedUrl is provided and copies an iframe snippet to clipboard', () => {
+      const embedUrl = 'https://example.com/embed/scatter?model=dsr1';
+      cy.window().then((win) => {
+        cy.stub(win.navigator.clipboard, 'writeText').as('clipboardWrite');
+      });
+      cy.mount(
+        <div style={{ position: 'relative', width: 400, height: 200 }}>
+          <div id="test-chart">Chart content</div>
+          <ChartButtons
+            chartId="test-chart"
+            analyticsPrefix="test"
+            onExportCsv={cy.stub()}
+            getEmbedUrl={() => embedUrl}
+          />
+        </div>,
+      );
+      cy.get('[data-testid="export-button"]').click();
+      cy.get('[data-testid="export-embed-button"]').should('be.visible').click();
+      cy.get('@clipboardWrite').should('have.been.calledOnce');
+      cy.get('@clipboardWrite')
+        .invoke('getCall', 0)
+        .its('args')
+        .its(0)
+        .should('include', embedUrl)
+        .and('include', '<iframe')
+        .and('include', 'referrerpolicy="origin"');
+      cy.get('[data-testid="export-embed-button"]').should('contain.text', 'Copied!');
+    });
+
+    it('shows the popover when only getEmbedUrl is provided', () => {
+      cy.window().then((win) => {
+        cy.stub(win.navigator.clipboard, 'writeText').as('clipboardWrite');
+      });
+      cy.mount(
+        <div style={{ position: 'relative', width: 400, height: 200 }}>
+          <div id="test-chart">Chart content</div>
+          <ChartButtons
+            chartId="test-chart"
+            analyticsPrefix="test"
+            getEmbedUrl={() => 'https://example.com/embed/scatter?model=dsr1'}
+          />
+        </div>,
+      );
+      cy.get('[data-testid="export-button"]').click();
+      cy.get('[data-testid="export-png-button"]').should('be.visible');
+      cy.get('[data-testid="export-csv-button"]').should('not.exist');
+      cy.get('[data-testid="export-embed-button"]').should('be.visible');
+      cy.get('[data-testid="export-embed-button"]').click();
+      cy.get('@clipboardWrite').should('have.been.calledOnce');
+      cy.get('@clipboardWrite')
+        .invoke('getCall', 0)
+        .its('args')
+        .its(0)
+        .should('include', '<iframe')
+        .and('include', 'https://example.com/embed/scatter?model=dsr1');
+    });
+  });
+
   describe('hideZoomReset', () => {
     it('hides zoom reset button when hideZoomReset is true', () => {
       cy.mount(
diff --git a/packages/app/cypress/e2e/embed-scatter.cy.ts b/packages/app/cypress/e2e/embed-scatter.cy.ts
new file mode 100644
index 00000000..0d1b0c51
--- /dev/null
+++ b/packages/app/cypress/e2e/embed-scatter.cy.ts
@@ -0,0 +1,228 @@
+function joinHeader(headers: Record<string, string | string[] | undefined>, name: string): string {
+  const pair = Object.entries(headers).find(([k]) => k.toLowerCase() === name.toLowerCase());
+  const v = pair?.[1];
+  if (Array.isArray(v)) return v.join(', ');
+  return typeof v === 'string' ? v : '';
+}
+
+describe('Embed — Scatter Chart', () => {
+  describe('default URL', () => {
+    before(() => {
+      cy.visit('/embed/scatter');
+    });
+
+    it('renders the embed root container', () => {
+      cy.get('[data-testid="embed-root"]').should('exist');
+    });
+
+    it('does not render the site header or footer', () => {
+      cy.get('[data-testid="header"]').should('not.exist');
+      cy.get('[data-testid="footer"]').should('not.exist');
+    });
+
+    it('renders an SVG chart with real data', () => {
+      cy.get('[data-testid="embed-scatter-figure"]', { timeout: 15000 }).should('exist');
+      cy.get('[data-testid="embed-scatter-figure"]').find('svg').should('exist');
+      cy.contains('No data available').should('not.exist');
+    });
+
+    it('shows the SemiAnalysis InferenceX attribution link', () => {
+      cy.get('[data-testid="embed-attribution"]')
+        .should('exist')
+        .should('contain.text', 'SemiAnalysis InferenceX');
+    });
+
+    it('attribution link points to the canonical /inference URL with seeded params', () => {
+      cy.get('[data-testid="embed-attribution"]')
+        .should('have.attr', 'href')
+        .and('include', '/inference?')
+        .and('include', 'g_model=DeepSeek-R1-0528')
+        .and('include', 'i_metric=y_tpPerGpu');
+    });
+
+    it('does not show the Shift+Scroll instructions text', () => {
+      cy.get('[data-testid="embed-chart-instructions"]').should('have.text', '');
+    });
+
+    it('has robots noindex meta tag', () => {
+      // Root layout may emit its own `meta[name="robots"]` first; embed routes add a noindex tag too.
+      cy.get('meta[name="robots"][content*="noindex"]').should('exist');
+    });
+  });
+
+  describe('custom params (site-style keys)', () => {
+    before(() => {
+      cy.visit('/embed/scatter?g_model=DeepSeek-R1-0528&i_seq=8k%2F1k&i_prec=fp4&i_metric=y_costh');
+    });
+
+    it('renders chart with the custom y metric', () => {
+      cy.get('[data-testid="embed-scatter-figure"]', { timeout: 15000 }).should('exist');
+      cy.contains('No data available').should('not.exist');
+    });
+
+    it('canonical link reflects the y metric override', () => {
+      cy.get('[data-testid="embed-attribution"]')
+        .should('have.attr', 'href')
+        .and('include', 'i_metric=y_costh');
+    });
+
+    it('canonical link does not include i_chart', () => {
+      cy.get('[data-testid="embed-attribution"]')
+        .should('have.attr', 'href')
+        .and('not.include', 'i_chart');
+    });
+  });
+
+  describe('i_active param restricts legend to creator-selected GPUs', () => {
+    before(() => {
+      cy.visit('/embed/scatter?i_active=b200_sglang');
+    });
+
+    it('renders chart without "No data available"', () => {
+      cy.get('[data-testid="embed-scatter-figure"]', { timeout: 15000 }).should('exist');
+      cy.get('[data-testid="embed-scatter-figure"]').find('svg').should('exist');
+      cy.contains('No data available').should('not.exist');
+    });
+
+    it('legend contains only the allowed GPU', () => {
+      // Each GPU renders as a <li> inside [data-testid="chart-legend"].
+      // With i_active=b200_sglang, only that GPU is in the allow-list, so
+      // exactly 1 <li> should appear (fp-indicators and controls use <div>).
+      cy.get('[data-testid="embed-scatter-figure"]', { timeout: 15000 }).should('exist');
+      cy.contains('No data available').should('not.exist');
+      cy.get('[data-testid="embed-legend-panel"] [data-testid="chart-legend"] li').should(
+        'have.length',
+        1,
+      );
+    });
+  });
+
+  describe('i_chart param selects chart variant', () => {
+    it('renders e2e chart by default', () => {
+      cy.visit('/embed/scatter');
+      cy.get('[data-testid="embed-scatter-figure"]', { timeout: 15000 }).should('exist');
+    });
+
+    it('renders interactivity chart when i_chart=interactivity', () => {
+      cy.visit('/embed/scatter?i_chart=interactivity');
+      cy.get('[data-testid="embed-scatter-figure"]', { timeout: 15000 }).should('exist');
+      cy.contains('No data available').should('not.exist');
+    });
+  });
+
+  describe('CSP headers', () => {
+    it('embed routes allow framing from any origin', () => {
+      cy.request('/embed/scatter').then((resp) => {
+        const csp = joinHeader(resp.headers, 'content-security-policy');
+        expect(csp).to.include('frame-ancestors *');
+      });
+    });
+
+    it('non-embed routes restrict framing to self', () => {
+      cy.request('/').then((resp) => {
+        const csp = joinHeader(resp.headers, 'content-security-policy');
+        expect(csp).to.include("frame-ancestors 'self'");
+      });
+    });
+  });
+
+  describe('viewport responsiveness', () => {
+    it('renders chart at 600×500 (narrow iframe)', () => {
+      cy.viewport(600, 500);
+      cy.visit('/embed/scatter');
+      cy.get('[data-testid="embed-scatter-figure"]', { timeout: 15000 }).should('exist');
+      cy.get('[data-testid="embed-scatter-figure"]').find('svg').should('exist');
+      cy.get('[data-testid="embed-legend-panel"]').should('be.visible');
+    });
+
+    it('legend dropdown stays inside the card at short height (800×400)', () => {
+      cy.viewport(800, 400);
+      cy.visit('/embed/scatter');
+      cy.get('[data-testid="embed-scatter-figure"]', { timeout: 15000 }).should('exist');
+      cy.get('[data-testid="embed-legend-panel"] summary').click();
+      cy.get('[data-testid="embed-legend-dropdown"]').should('be.visible');
+      cy.get('[data-testid="embed-scatter-figure"] [data-slot="card"]').then(($card) => {
+        cy.get('[data-testid="embed-legend-dropdown"]').then(($dd) => {
+          const cardTop = $card[0].getBoundingClientRect().top;
+          const ddTop = $dd[0].getBoundingClientRect().top;
+          expect(ddTop).to.be.at.least(cardTop);
+        });
+      });
+    });
+
+    it('renders chart at 800×600', () => {
+      cy.viewport(800, 600);
+      cy.visit('/embed/scatter');
+      cy.get('[data-testid="embed-scatter-figure"]', { timeout: 15000 }).should('exist');
+      cy.get('[data-testid="embed-scatter-figure"]').find('svg').should('exist');
+      cy.get('[data-testid="embed-legend-panel"]').should('be.visible');
+    });
+
+    it('fits short iframe height without document scroll (1024×420)', () => {
+      cy.viewport(1024, 420);
+      cy.visit('/embed/scatter');
+      cy.get('[data-testid="embed-scatter-figure"]', { timeout: 15000 }).should('exist');
+      cy.get('[data-testid="scatter-graph"] svg').should('exist');
+      cy.window().then((win) => {
+        expect(win.document.documentElement.scrollHeight).to.be.at.most(420);
+      });
+      cy.get('[data-testid="scatter-graph"] svg')
+        .invoke('attr', 'height')
+        .then((h) => {
+          const n = Number(h);
+          expect(n).to.be.at.least(240);
+          expect(n).to.be.below(600);
+        });
+    });
+
+    it('floors chart SVG height at 240px when iframe is very short (1024×250)', () => {
+      cy.viewport(1024, 250);
+      cy.visit('/embed/scatter');
+      cy.get('[data-testid="embed-scatter-figure"]', { timeout: 15000 }).should('exist');
+      cy.get('[data-testid="scatter-graph"] svg').invoke('attr', 'height').should('eq', '240');
+      cy.window().then((win) => {
+        expect(win.document.documentElement.scrollHeight).to.be.above(
+          win.document.documentElement.clientHeight,
+        );
+      });
+    });
+  });
+
+  describe('unofficial run overlay', () => {
+    it('renders overlay points when unofficialrun param is provided', () => {
+      cy.intercept('GET', '/api/unofficial-run*', {
+        statusCode: 200,
+        body: {
+          runInfos: [
+            {
+              id: 99999,
+              branch: 'test-branch',
+              url: 'https://github.com/test/repo/actions/runs/99999',
+            },
+          ],
+          benchmarks: [
+            {
+              model: 'DeepSeek-R1-0528',
+              sequence: '8k/1k',
+              chart_type: 'e2e',
+              precision: 'fp4',
+              hw_type: 'b200_sglang',
+              tp: 8,
+              concurrency: 64,
+              ttft_ms: 300,
+              tpot_ms: 10,
+              e2e_latency_ms: 600,
+              total_throughput: 2000,
+              throughput_per_gpu: 250,
+              run_url: 'https://github.com/test/repo/actions/runs/99999',
+            },
+          ],
+        },
+      }).as('unofficialRun');
+
+      cy.visit('/embed/scatter?unofficialrun=99999');
+      cy.get('[data-testid="embed-scatter-figure"]', { timeout: 15000 }).should('exist');
+      cy.get('[data-testid="embed-scatter-figure"]').find('svg').should('exist');
+    });
+  });
+});
diff --git a/packages/app/next.config.ts b/packages/app/next.config.ts
index 39ab4487..69d6972a 100644
--- a/packages/app/next.config.ts
+++ b/packages/app/next.config.ts
@@ -15,6 +15,27 @@ const nextConfig: NextConfig = {
       { hostname: 'substack-post-media.s3.amazonaws.com' },
     ],
   },
+  // /embed/* routes are explicitly framable from any origin so partner sites
+  // can iframe them. All other routes are non-framable (frame-ancestors
+  // 'self' + X-Frame-Options: SAMEORIGIN). Order matters: the more specific
+  // /embed/* match comes first.
+  headers() {
+    return Promise.resolve([
+      {
+        source: '/embed/:path*',
+        headers: [{ key: 'Content-Security-Policy', value: 'frame-ancestors *' }],
+      },
+      {
+        // Negative lookahead excludes /embed/* so its CSP isn't overridden
+        // by the more general non-framable headers.
+        source: '/((?!embed/).*)',
+        headers: [
+          { key: 'Content-Security-Policy', value: "frame-ancestors 'self'" },
+          { key: 'X-Frame-Options', value: 'SAMEORIGIN' },
+        ],
+      },
+    ]);
+  },
 };
 
 const hasPostHogKeys = Boolean(
diff --git a/packages/app/src/app/embed/layout.tsx b/packages/app/src/app/embed/layout.tsx
new file mode 100644
index 00000000..f47885bb
--- /dev/null
+++ b/packages/app/src/app/embed/layout.tsx
@@ -0,0 +1,13 @@
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  robots: { index: false, follow: false },
+};
+
+export default function EmbedLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div data-testid="embed-root" className="relative flex h-screen w-full flex-col bg-background">
+      {children}
+    </div>
+  );
+}
diff --git a/packages/app/src/app/embed/scatter/embed-scatter-client.tsx b/packages/app/src/app/embed/scatter/embed-scatter-client.tsx
new file mode 100644
index 00000000..1545c13a
--- /dev/null
+++ b/packages/app/src/app/embed/scatter/embed-scatter-client.tsx
@@ -0,0 +1,95 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+
+import EmbedScatterDisplay from '@/components/embed/embed-scatter-display';
+import { GlobalFilterProvider } from '@/components/GlobalFilterContext';
+import { InferenceProvider } from '@/components/inference/InferenceContext';
+import { UnofficialRunProvider } from '@/components/unofficial-run-provider';
+import { track } from '@/lib/analytics';
+import { readEmbedChartVariant } from '@/lib/embed-params';
+import { type UrlStateParams, seedUrlState } from '@/lib/url-state';
+
+interface Props {
+  params: UrlStateParams & { i_chart?: string };
+  canonicalHref: string;
+}
+
+/**
+ * Client component for `/embed/scatter`. Seeds the internal URL-state cache
+ * synchronously before any provider mounts so the first render of the chart
+ * already reflects the requested embed params, then wraps the providers and
+ * the chart display.
+ *
+ * Embed URLs use the same `g_*` / `i_*` keys as the main site — params flow
+ * straight through `seedUrlState` with no translation. The only embed-specific
+ * key is `i_chart` (which chart variant to render).
+ *
+ * When `i_active` is present, those hwKeys become the allow-list for the embed:
+ * the legend and chart universe are restricted to exactly those GPUs. The
+ * viewer can toggle them on/off but cannot add GPUs outside the set.
+ *
+ * Lives outside the `(dashboard)` route group, so we re-establish the
+ * provider stack here (`UnofficialRunProvider` → `GlobalFilterProvider` →
+ * `InferenceProvider`). `QueryProvider` is in the root layout and inherits.
+ */
+export default function EmbedScatterClient({ params, canonicalHref }: Props) {
+  const seededRef = useRef(false);
+  if (!seededRef.current) {
+    // params are already in site-style UrlStateParams shape — seed directly.
+    const { i_chart: _chart, ...urlParams } = params;
+    seedUrlState(urlParams);
+    seededRef.current = true;
+  }
+
+  const chartType = readEmbedChartVariant(params.i_chart);
+
+  // Build the allow-list from i_active: restrict the embed legend/chart to
+  // only the GPUs the creator chose. null means "no restriction" (all GPUs).
+  const embedAllowedHwTypes = params.i_active
+    ? new Set(params.i_active.split(',').filter(Boolean))
+    : null;
+
+  // Fire `embed_view` once on mount with referrer + host so external embed
+  // traffic is attributable. Strict mode in dev double-fires effects, but
+  // that's only in dev — production fires once.
+  const trackedRef = useRef(false);
+  useEffect(() => {
+    if (trackedRef.current) return;
+    trackedRef.current = true;
+    const referrer = typeof document === 'undefined' ? '' : document.referrer;
+    let embedHost: string;
+    try {
+      embedHost = referrer ? new URL(referrer).host : '';
+    } catch {
+      embedHost = '';
+    }
+    const gpus = params.i_active ? params.i_active.split(',').filter(Boolean) : [];
+    track('embed_view', {
+      embed_chart: 'scatter',
+      chart_type: chartType,
+      model: params.g_model,
+      sequence: params.i_seq,
+      precisions: params.i_prec,
+      gpus,
+      gpu_count: gpus.length,
+      y_metric: params.i_metric,
+      referrer,
+      embed_host: embedHost,
+    });
+  }, []);
+
+  return (
+    <UnofficialRunProvider>
+      <GlobalFilterProvider>
+        <InferenceProvider activeTab="inference" embedAllowedHwTypes={embedAllowedHwTypes}>
+          <div className="flex h-screen min-h-0 flex-col p-1 sm:p-2">
+            <div className="min-h-0 flex-1">
+              <EmbedScatterDisplay chartType={chartType} canonicalHref={canonicalHref} />
+            </div>
+          </div>
+        </InferenceProvider>
+      </GlobalFilterProvider>
+    </UnofficialRunProvider>
+  );
+}
diff --git a/packages/app/src/app/embed/scatter/page.tsx b/packages/app/src/app/embed/scatter/page.tsx
new file mode 100644
index 00000000..aa2c6058
--- /dev/null
+++ b/packages/app/src/app/embed/scatter/page.tsx
@@ -0,0 +1,29 @@
+import type { Metadata } from 'next';
+
+import { SITE_URL } from '@semianalysisai/inferencex-constants';
+import { buildCanonicalHref } from '@/lib/embed-params';
+import type { UrlStateParams } from '@/lib/url-state';
+
+import EmbedScatterClient from './embed-scatter-client';
+
+export const metadata: Metadata = {
+  title: 'InferenceX — Embedded Chart',
+  robots: { index: false, follow: false },
+};
+
+export default async function EmbedScatterPage({
+  searchParams,
+}: {
+  searchParams: Promise<Record<string, string | string[] | undefined>>;
+}) {
+  const sp = await searchParams;
+  const flat: UrlStateParams & { i_chart?: string } = {};
+  for (const [k, v] of Object.entries(sp)) {
+    const val = Array.isArray(v) ? v[0] : v;
+    if (val !== undefined) {
+      (flat as Record<string, string>)[k] = val;
+    }
+  }
+  const canonicalHref = buildCanonicalHref(flat, SITE_URL);
+  return <EmbedScatterClient params={flat} canonicalHref={canonicalHref} />;
+}
diff --git a/packages/app/src/app/layout.tsx b/packages/app/src/app/layout.tsx
index 68ef3274..e7060add 100644
--- a/packages/app/src/app/layout.tsx
+++ b/packages/app/src/app/layout.tsx
@@ -7,6 +7,7 @@ import type { Metadata } from 'next';
 import { DM_Sans } from 'next/font/google';
 import localFont from 'next/font/local';
 
+import { ChromeGate } from '@/components/chrome-gate';
 import { Footer } from '@/components/footer/footer';
 import { Header } from '@/components/header/header';
 import { JsonLd } from '@/components/json-ld';
@@ -179,9 +180,11 @@ export default async function RootLayout({
         <link rel="dns-prefetch" href="https://us-assets.i.posthog.com" />
       </head>
       <body className={`${dm_sans.variable} antialiased relative min-h-screen flex flex-col`}>
-        <CircuitBackground />
-        <MinecraftBackgroundLazy />
-        <MinecraftDecorations />
+        <ChromeGate>
+          <CircuitBackground />
+          <MinecraftBackgroundLazy />
+          <MinecraftDecorations />
+        </ChromeGate>
         <PostHogProvider>
           <JsonLd data={jsonLd} />
           <QueryProvider>
@@ -193,14 +196,22 @@ export default async function RootLayout({
               disableTransitionOnChange
             >
               <PostHogPageView />
-              <VisitTracker />
-              <Header starCount={starCount} />
+              <ChromeGate>
+                <VisitTracker />
+              </ChromeGate>
+              <ChromeGate>
+                <Header starCount={starCount} />
+              </ChromeGate>
               <div className="grow flex flex-col">{children}</div>
-              <Footer starCount={starCount} />
+              <ChromeGate>
+                <Footer starCount={starCount} />
+              </ChromeGate>
             </ThemeProvider>
           </QueryProvider>
-          {process.env.VERCEL && <Analytics />}
-          {process.env.VERCEL && <SpeedInsights />}
+          <ChromeGate>
+            {process.env.VERCEL && <Analytics />}
+            {process.env.VERCEL && <SpeedInsights />}
+          </ChromeGate>
         </PostHogProvider>
       </body>
     </html>
diff --git a/packages/app/src/components/chrome-gate.tsx b/packages/app/src/components/chrome-gate.tsx
new file mode 100644
index 00000000..c92021c7
--- /dev/null
+++ b/packages/app/src/components/chrome-gate.tsx
@@ -0,0 +1,18 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import type { ReactNode } from 'react';
+
+/**
+ * Hides children on `/embed/*` routes so charts render clean for iframe
+ * embedding. All other routes render children unchanged.
+ *
+ * Wrap any element that must not appear inside partner iframes with this
+ * component. PostHog is intentionally excluded — `embed_view` events still
+ * need to fire inside the embed.
+ */
+export function ChromeGate({ children }: { children: ReactNode }) {
+  const pathname = usePathname();
+  if (pathname?.startsWith('/embed')) return null;
+  return <>{children}</>;
+}
diff --git a/packages/app/src/components/embed/embed-legend-wrapper.tsx b/packages/app/src/components/embed/embed-legend-wrapper.tsx
new file mode 100644
index 00000000..5e54b738
--- /dev/null
+++ b/packages/app/src/components/embed/embed-legend-wrapper.tsx
@@ -0,0 +1,72 @@
+'use client';
+
+import { useSyncExternalStore } from 'react';
+
+import { ChevronDown } from 'lucide-react';
+
+const LG_QUERY = '(min-width: 1024px)';
+
+function subscribeLg(onStoreChange: () => void) {
+  if (typeof window === 'undefined') return () => {};
+  const mq = window.matchMedia(LG_QUERY);
+  mq.addEventListener('change', onStoreChange);
+  return () => mq.removeEventListener('change', onStoreChange);
+}
+
+function getLgSnapshot() {
+  return typeof window !== 'undefined' && window.matchMedia(LG_QUERY).matches;
+}
+
+function getLgServerSnapshot() {
+  return false;
+}
+
+/**
+ * Embed-only legend shell.
+ *
+ * Below `lg`: a native `<details>` collapsible with a styled summary button.
+ * Closed by default. When open, content is absolutely positioned above the
+ * summary (`bottom-full`) so it overlays the chart instead of growing layout
+ * height in fill-height embeds. Content scrolls inside a viewport-clamped max
+ * height so the panel never escapes a short iframe.
+ *
+ * Above `lg`: the `<details>` UI is skipped and the legend renders in a flex
+ * column sized by the parent height container.
+ *
+ * **Single `{children}` mount:** responsive layout is chosen with
+ * `useSyncExternalStore` + `matchMedia` so React never renders the same
+ * legend subtree twice (which would drop controls like switches from one branch).
+ */
+export function EmbedLegendWrapper({ children }: { children: React.ReactNode }) {
+  const isLg = useSyncExternalStore(subscribeLg, getLgSnapshot, getLgServerSnapshot);
+
+  if (isLg) {
+    return (
+      <div data-testid="embed-legend-panel" className="lg:h-full">
+        <div className="flex h-full min-h-0 flex-col overflow-hidden">{children}</div>
+      </div>
+    );
+  }
+
+  return (
+    <div data-testid="embed-legend-panel" className="lg:h-full">
+      <div className="relative">
+        <details className="group">
+          <summary className="flex w-full cursor-pointer select-none list-none items-center justify-between rounded-md border border-border bg-background px-3 py-2 text-sm font-medium text-foreground transition-colors hover:bg-accent [&::-webkit-details-marker]:hidden">
+            <span>Legend</span>
+            <ChevronDown
+              size={14}
+              className="shrink-0 text-muted-foreground transition-transform duration-200 group-open:rotate-180"
+            />
+          </summary>
+          <div
+            data-testid="embed-legend-dropdown"
+            className="absolute bottom-full left-0 right-0 z-40 mb-1 flex max-h-[min(24rem,calc(100dvh-6rem))] min-h-0 flex-col overflow-y-auto overflow-x-hidden rounded-md border border-border bg-background shadow-lg"
+          >
+            {children}
+          </div>
+        </details>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/app/src/components/embed/embed-scatter-display.tsx b/packages/app/src/components/embed/embed-scatter-display.tsx
new file mode 100644
index 00000000..307d7774
--- /dev/null
+++ b/packages/app/src/components/embed/embed-scatter-display.tsx
@@ -0,0 +1,200 @@
+'use client';
+
+import { useCallback, useMemo } from 'react';
+
+import { EmbedLegendWrapper } from '@/components/embed/embed-legend-wrapper';
+import { useInference } from '@/components/inference/InferenceContext';
+import type { InferenceData, OverlayData } from '@/components/inference/types';
+import ScatterGraph from '@/components/inference/ui/ScatterGraph';
+import { processOverlayChartData } from '@/components/inference/utils';
+import { Card } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+import { useUnofficialRun } from '@/components/unofficial-run-provider';
+import { track } from '@/lib/analytics';
+import {
+  type Model,
+  type Precision,
+  type Sequence,
+  getModelLabel,
+  getPrecisionLabel,
+  getSequenceLabel,
+} from '@/lib/data-mappings';
+
+interface Props {
+  /** Which chart to render — `e2e` or `interactivity`. Defaults to `e2e`. */
+  chartType: 'e2e' | 'interactivity';
+  /** Canonical dashboard URL for the attribution link in the caption. */
+  canonicalHref: string;
+}
+
+/**
+ * Slim version of `ChartDisplay` for embeds: renders only the requested
+ * scatter chart with its caption, no controls / share buttons / changelog.
+ *
+ * Reads from the same `InferenceContext` as the dashboard so chart behavior
+ * (legend, zoom, overlay rendering) stays consistent.
+ */
+export default function EmbedScatterDisplay({ chartType, canonicalHref }: Props) {
+  const {
+    graphs,
+    loading,
+    selectedYAxisMetric,
+    selectedXAxisMetric,
+    selectedE2eXAxisMetric,
+    selectedPrecisions,
+    selectedModel,
+    selectedSequence,
+  } = useInference();
+
+  const { unofficialRunInfo, unofficialRunInfos, runIndexByUrl, getOverlayData } =
+    useUnofficialRun();
+
+  const overlayDataByChartType = useMemo(() => {
+    if (!unofficialRunInfo || !getOverlayData) {
+      return { e2e: null, interactivity: null };
+    }
+    const e2eRaw = getOverlayData(selectedModel, selectedSequence, 'e2e');
+    const interactivityRaw = getOverlayData(selectedModel, selectedSequence, 'interactivity');
+
+    const getRunForRow = (row: InferenceData) => {
+      const url = row.run_url ?? null;
+      if (!url) return undefined;
+      if (url in runIndexByUrl) {
+        const info = unofficialRunInfos[runIndexByUrl[url]];
+        return info ? { branch: info.branch, url: info.url } : undefined;
+      }
+      const idMatch = url.match(/\/runs\/(\d+)/u);
+      if (idMatch && idMatch[1] in runIndexByUrl) {
+        const info = unofficialRunInfos[runIndexByUrl[idMatch[1]]];
+        return info ? { branch: info.branch, url: info.url } : undefined;
+      }
+      return undefined;
+    };
+
+    const processData = (
+      rawData: { data: InferenceData[]; hardwareConfig: any } | null,
+      ct: 'e2e' | 'interactivity',
+    ): OverlayData | null => {
+      if (!rawData || rawData.data.length === 0) return null;
+      const effectiveXMetric = ct === 'e2e' ? selectedE2eXAxisMetric : selectedXAxisMetric;
+      const processed = processOverlayChartData(
+        rawData.data,
+        ct,
+        selectedYAxisMetric,
+        effectiveXMetric,
+      );
+      if (processed.length === 0) return null;
+      return {
+        data: processed,
+        hardwareConfig: rawData.hardwareConfig,
+        label: unofficialRunInfo.branch,
+        runUrl: unofficialRunInfo.url,
+        getRunForRow,
+      };
+    };
+
+    return {
+      e2e: processData(e2eRaw, 'e2e'),
+      interactivity: processData(interactivityRaw, 'interactivity'),
+    };
+  }, [
+    unofficialRunInfo,
+    unofficialRunInfos,
+    runIndexByUrl,
+    getOverlayData,
+    selectedModel,
+    selectedSequence,
+    selectedYAxisMetric,
+    selectedXAxisMetric,
+    selectedE2eXAxisMetric,
+  ]);
+
+  const targetGraph = useMemo(
+    () => graphs.find((g) => g.chartDefinition.chartType === chartType) ?? graphs[0],
+    [graphs, chartType],
+  );
+
+  const wrapLegend = useCallback(
+    (legend: React.ReactNode) => <EmbedLegendWrapper>{legend}</EmbedLegendWrapper>,
+    [],
+  );
+
+  const isFirstLoad = loading && graphs.length === 0;
+
+  if (isFirstLoad || !targetGraph) {
+    return (
+      <Card data-testid="embed-scatter-skeleton" className="border-0 p-2 md:p-3">
+        <Skeleton className="h-7 w-2/4 mb-1" />
+        <Skeleton className="h-5 w-3/4 mb-2" />
+        <Skeleton className="h-[420px] w-full" />
+      </Card>
+    );
+  }
+
+  const yLabel =
+    (targetGraph.chartDefinition[
+      `${selectedYAxisMetric}_label` as keyof typeof targetGraph.chartDefinition
+    ] as string) || '';
+  const yTitle =
+    (targetGraph.chartDefinition[
+      `${selectedYAxisMetric}_title` as keyof typeof targetGraph.chartDefinition
+    ] as string) || '';
+  const heading =
+    (targetGraph.chartDefinition[
+      `${selectedYAxisMetric}_heading` as keyof typeof targetGraph.chartDefinition
+    ] as string) || targetGraph.chartDefinition.heading;
+
+  const caption = (
+    <>
+      <h2 className="text-lg font-semibold">
+        {yTitle} {heading}
+      </h2>
+      <p className="text-sm text-muted-foreground mb-2">
+        {getModelLabel(targetGraph.model as Model)} •{' '}
+        {selectedPrecisions.map((prec) => getPrecisionLabel(prec as Precision)).join(', ')} •{' '}
+        {getSequenceLabel(targetGraph.sequence as Sequence)} • Source:{' '}
+        <a
+          data-testid="embed-attribution"
+          href={canonicalHref}
+          target="_blank"
+          rel="noopener"
+          onClick={() => track('embed_attribution_clicked', { href: canonicalHref })}
+          className="inline-flex items-center gap-1 text-foreground underline-offset-2 hover:underline"
+        >
+          SemiAnalysis InferenceX
+          <span aria-hidden>→</span>
+        </a>
+      </p>
+    </>
+  );
+
+  const overlay =
+    targetGraph.chartDefinition.chartType === 'e2e'
+      ? overlayDataByChartType.e2e
+      : overlayDataByChartType.interactivity;
+
+  return (
+    <figure
+      data-testid="embed-scatter-figure"
+      className="relative flex h-full min-h-0 flex-col rounded-lg"
+    >
+      <Card className="flex h-full min-h-0 flex-col border-0 p-2 md:p-3">
+        <ScatterGraph
+          chartId="embed-chart"
+          modelLabel={targetGraph.model}
+          data={targetGraph.data}
+          xLabel={targetGraph.chartDefinition.x_label}
+          yLabel={yLabel}
+          chartDefinition={targetGraph.chartDefinition}
+          caption={caption}
+          overlayData={overlay ?? undefined}
+          legendWrapper={wrapLegend}
+          instructions=""
+          disableLegendExpand={true}
+          compactLegend={true}
+          fillHeight
+        />
+      </Card>
+    </figure>
+  );
+}
diff --git a/packages/app/src/components/inference/InferenceContext.tsx b/packages/app/src/components/inference/InferenceContext.tsx
index 17ce37b5..2742eb06 100644
--- a/packages/app/src/components/inference/InferenceContext.tsx
+++ b/packages/app/src/components/inference/InferenceContext.tsx
@@ -61,6 +61,7 @@ export function InferenceProvider({
   activeTab,
   initialActiveHwTypes,
   compareGpuPair,
+  embedAllowedHwTypes = null,
 }: {
   children: ReactNode;
   activeTab: string;
@@ -75,6 +76,12 @@ export function InferenceProvider({
    * registry GPU base keys so other hardware never appears on the legend or plots.
    */
   compareGpuPair?: readonly [string, string];
+  /**
+   * When set (embed mode), restricts the legend/chart universe to only these
+   * hwKeys. The viewer can toggle any subset on/off but cannot add GPUs outside
+   * this set. `null` (default) means no restriction — all available GPUs shown.
+   */
+  embedAllowedHwTypes?: ReadonlySet<string> | null;
 }) {
   const isActive =
     activeTab === 'inference' || activeTab === 'historical' || activeTab === 'compare';
@@ -241,7 +248,8 @@ export function InferenceProvider({
 
   // ── Derived state ─────────────────────────────────────────────────────────
 
-  // GPU dropdown: only show configs that have data for current model + sequence + precision
+  // GPU dropdown: only show configs that have data for current model + sequence + precision.
+  // In embed mode, further restrict to the creator's allow-list.
   const availableGPUs = useMemo(() => {
     if (!availabilityRows) return [];
     const hwKeys = new Set<string>();
@@ -251,7 +259,9 @@ export function InferenceProvider({
       if (!effectivePrecisions.includes(r.precision)) continue;
       if (!r.hardware) continue;
       const hwKey = buildAvailabilityHwKey(r.hardware, r.framework, r.spec_method, r.disagg);
-      if (isKnownGpu(hwKey)) hwKeys.add(hwKey);
+      if (!isKnownGpu(hwKey)) continue;
+      if (embedAllowedHwTypes && !embedAllowedHwTypes.has(hwKey)) continue;
+      hwKeys.add(hwKey);
     }
     return [...hwKeys]
       .toSorted((a, b) => getModelSortIndex(a) - getModelSortIndex(b) || a.localeCompare(b))
@@ -259,7 +269,7 @@ export function InferenceProvider({
         value: hw,
         label: getDisplayLabel(getHardwareConfig(hw)),
       }));
-  }, [availabilityRows, dbModelKeys, effectiveSequence, effectivePrecisions]);
+  }, [availabilityRows, dbModelKeys, effectiveSequence, effectivePrecisions, embedAllowedHwTypes]);
 
   // --- Tracked config functions ---
   const buildTrackedConfigId = useCallback((point: InferenceData): string => {
@@ -446,12 +456,23 @@ export function InferenceProvider({
     [setActiveHwTypes, setActiveHwTypesDispatch],
   );
 
-  const hwTypesWithData = useChartDataFilter(
+  const rawHwTypesWithData = useChartDataFilter(
     hwFilteredPoints,
     setActiveHwTypesWithFilter,
     extractHwKey,
   );
 
+  // In embed mode, restrict the legend/chart universe to the creator's allowed
+  // GPU set. All downstream effects and toggle calls use this filtered set so
+  // the viewer can only toggle within the allowed GPUs.
+  const hwTypesWithData = useMemo(() => {
+    if (!embedAllowedHwTypes) return rawHwTypesWithData;
+    const filtered = new Set([...rawHwTypesWithData].filter((k) => embedAllowedHwTypes.has(k)));
+    // If none of the allowed GPUs have data yet, fall back to the full set
+    // (keeps the chart functional during initial load before data arrives).
+    return filtered.size > 0 ? filtered : rawHwTypesWithData;
+  }, [rawHwTypesWithData, embedAllowedHwTypes]);
+
   // Direct fallback: apply pendingHwFilter when hwTypesWithData is already populated
   // but useChartDataFilter didn't fire (e.g. re-selecting the same preset).
   useEffect(() => {
diff --git a/packages/app/src/components/inference/types.ts b/packages/app/src/components/inference/types.ts
index 5b5f9ec2..2e114025 100644
--- a/packages/app/src/components/inference/types.ts
+++ b/packages/app/src/components/inference/types.ts
@@ -349,6 +349,24 @@ export interface ScatterGraphProps {
    * on top of the official chart data with a distinct visual style (triangles).
    */
   overlayData?: OverlayData;
+  /** Wrap the legend element (e.g. collapsible container for embeds). */
+  legendWrapper?: (legend: React.ReactNode) => React.ReactNode;
+  /** Override the default instructions text below the chart. Pass `""` to hide. */
+  instructions?: string;
+  /** When true, hides the Expand/Collapse button in the legend (e.g. embed mode). */
+  disableLegendExpand?: boolean;
+  /** When true, removes the fixed h-96 on the legend container at narrow widths (e.g. embed mode). */
+  compactLegend?: boolean;
+  /**
+   * When true, chart SVG height follows the embed iframe (floored at 240px).
+   * Embed-only; dashboard leaves this unset/false.
+   */
+  fillHeight?: boolean;
+  /**
+   * When true, hides chart-control switches and actions from the legend (e.g. embed mode).
+   * Items, precision shape key, and data footnotes are still shown.
+   */
+  hideLegendControls?: boolean;
   /**
    * D3 transition duration in ms used when data or scales change. Defaults to
    * the regular interactive value (750). The replay panel passes 0 so frames
diff --git a/packages/app/src/components/inference/ui/ChartDisplay.tsx b/packages/app/src/components/inference/ui/ChartDisplay.tsx
index f0e1692a..d5f87af0 100644
--- a/packages/app/src/components/inference/ui/ChartDisplay.tsx
+++ b/packages/app/src/components/inference/ui/ChartDisplay.tsx
@@ -23,6 +23,7 @@ import { ChartShareActions, MetricAssumptionNotes } from '@/components/ui/chart-
 import { UnofficialDomainNotice } from '@/components/ui/unofficial-domain-notice';
 import { exportToCsv } from '@/lib/csv-export';
 import { inferenceChartToCsv } from '@/lib/csv-export-helpers';
+import { buildEmbedScatterUrl } from '@/lib/embed-params';
 import {
   Dialog,
   DialogContent,
@@ -369,6 +370,17 @@ export default function ChartDisplay() {
                   onExportMp4={
                     replayAvailable ? () => replayHandlesRef.current[graphIndex]?.open() : undefined
                   }
+                  getEmbedUrl={() =>
+                    buildEmbedScatterUrl({
+                      origin: window.location.origin,
+                      model: graph.model,
+                      sequence: graph.sequence,
+                      precisions: selectedPrecisions.join(','),
+                      yMetric: selectedYAxisMetric,
+                      activeGpus: [...activeHwTypes].join(','),
+                      chartType: graph.chartDefinition.chartType,
+                    })
+                  }
                   onExportCsv={() => {
                     const visibleData = graph.data.filter((d) =>
                       isTimelineMode
diff --git a/packages/app/src/components/inference/ui/ScatterGraph.tsx b/packages/app/src/components/inference/ui/ScatterGraph.tsx
index f9a73aa8..87fcd172 100644
--- a/packages/app/src/components/inference/ui/ScatterGraph.tsx
+++ b/packages/app/src/components/inference/ui/ScatterGraph.tsx
@@ -112,6 +112,12 @@ const ScatterGraph = React.memo(
     showAllHardwareTypes = false,
     hardwareConfigOverride,
     overlayData,
+    legendWrapper,
+    instructions,
+    disableLegendExpand = false,
+    compactLegend = false,
+    fillHeight = false,
+    hideLegendControls = false,
     transitionDuration = 750,
     niceAxes = true,
   }: ScatterGraphProps) => {
@@ -1899,11 +1905,15 @@ const ScatterGraph = React.memo(
         ref={chartRef}
         chartId={chartId}
         data={chartScaleData}
+        fillHeight={fillHeight}
         margin={CHART_MARGIN}
         watermark={getChartWatermark(isUnofficialRun)}
         testId="scatter-graph"
         grabCursor={true}
         caption={caption}
+        instructions={instructions}
+        legendWrapper={legendWrapper}
+        compactLegend={compactLegend}
         xScale={xScaleConfig}
         yScale={yScaleConfig}
         xAxis={xAxisConfig}
@@ -2004,130 +2014,138 @@ const ScatterGraph = React.memo(
                 })),
             ]}
             disableActiveSort={false}
-            isLegendExpanded={isLegendExpanded}
+            hideExpandButton={disableLegendExpand}
+            isLegendExpanded={disableLegendExpand ? false : isLegendExpanded}
             onExpandedChange={(expanded) => {
+              if (disableLegendExpand) return;
               setIsLegendExpanded(expanded);
               track('latency_legend_expanded', { expanded });
             }}
-            switches={[
-              ...(selectedYAxisMetric === 'y_inputTputPerGpu'
+            switches={
+              hideLegendControls
                 ? []
                 : [
+                    ...(selectedYAxisMetric === 'y_inputTputPerGpu'
+                      ? []
+                      : [
+                          {
+                            id: 'scatter-log-scale',
+                            label: 'Log Scale',
+                            checked: logScale,
+                            onCheckedChange: (checked: boolean) => {
+                              setLogScale(checked);
+                              track('latency_log_scale_toggled', { enabled: checked });
+                            },
+                          },
+                        ]),
                     {
-                      id: 'scatter-log-scale',
-                      label: 'Log Scale',
-                      checked: logScale,
+                      id: 'scatter-hide-non-optimal',
+                      label: 'Optimal Only',
+                      checked: hideNonOptimal,
                       onCheckedChange: (checked: boolean) => {
-                        setLogScale(checked);
-                        track('latency_log_scale_toggled', { enabled: checked });
+                        setHideNonOptimal(checked);
+                        track('latency_hide_non_optimal_toggled', { enabled: checked });
+                      },
+                    },
+                    {
+                      id: 'scatter-hide-point-labels',
+                      label: 'Hide Labels',
+                      checked: hidePointLabels,
+                      onCheckedChange: (checked: boolean) => {
+                        setHidePointLabels(checked);
+                        track('latency_hide_point_labels_toggled', { enabled: checked });
+                      },
+                    },
+                    {
+                      id: 'scatter-high-contrast',
+                      label: 'High Contrast',
+                      checked: highContrast,
+                      onCheckedChange: (checked: boolean) => {
+                        setHighContrast(checked);
+                        track('latency_high_contrast_toggled', { enabled: checked });
                       },
                     },
-                  ]),
-              {
-                id: 'scatter-hide-non-optimal',
-                label: 'Optimal Only',
-                checked: hideNonOptimal,
-                onCheckedChange: (checked: boolean) => {
-                  setHideNonOptimal(checked);
-                  track('latency_hide_non_optimal_toggled', { enabled: checked });
-                },
-              },
-              {
-                id: 'scatter-hide-point-labels',
-                label: 'Hide Labels',
-                checked: hidePointLabels,
-                onCheckedChange: (checked: boolean) => {
-                  setHidePointLabels(checked);
-                  track('latency_hide_point_labels_toggled', { enabled: checked });
-                },
-              },
-              {
-                id: 'scatter-high-contrast',
-                label: 'High Contrast',
-                checked: highContrast,
-                onCheckedChange: (checked: boolean) => {
-                  setHighContrast(checked);
-                  track('latency_high_contrast_toggled', { enabled: checked });
-                },
-              },
-              {
-                id: 'scatter-parallelism-labels',
-                label: 'Parallelism Labels',
-                checked: useAdvancedLabels,
-                onCheckedChange: (checked: boolean) => {
-                  setUseAdvancedLabels(checked);
-                  track('latency_advanced_labels_toggled', { enabled: checked });
-                  if (checked && !showGradientLabels) {
-                    window.dispatchEvent(
-                      new CustomEvent(GRADIENT_NUDGE_EVENT, {
-                        detail: {
-                          enableGradient: () => {
-                            setShowGradientLabels(true);
-                            setUseAdvancedLabels(false);
-                            track('latency_gradient_labels_toggled', {
-                              enabled: true,
-                              source: 'nudge',
-                            });
-                          },
-                        },
-                      }),
-                    );
-                  }
-                },
-              },
-              {
-                id: 'scatter-gradient-labels',
-                label: 'Gradient Labels',
-                checked: showGradientLabels,
-                onCheckedChange: (checked: boolean) => {
-                  setShowGradientLabels(checked);
-                  track('latency_gradient_labels_toggled', { enabled: checked });
-                },
-              },
-              {
-                id: 'scatter-line-labels',
-                label: 'Line Labels',
-                checked: showLineLabels,
-                onCheckedChange: (checked: boolean) => {
-                  setShowLineLabels(checked);
-                  track('latency_line_labels_toggled', { enabled: checked });
-                },
-              },
-              {
-                id: 'scatter-speed-overlay',
-                label: 'Bus / Race Car',
-                checked: showSpeedOverlay,
-                onCheckedChange: (checked: boolean) => {
-                  setShowSpeedOverlay(checked);
-                  track('latency_speed_overlay_toggled', { enabled: checked });
-                },
-              },
-              {
-                id: 'scatter-minecraft-overlay',
-                label: 'Donkey / Elytra',
-                checked: showMinecraftOverlay,
-                onCheckedChange: (checked: boolean) => {
-                  setShowMinecraftOverlay(checked);
-                  track('latency_minecraft_overlay_toggled', { enabled: checked });
-                },
-              },
-            ]}
-            actions={
-              effectiveOfficialHwTypes.size < hwTypesWithData.size ||
-              activeOverlayHwTypes.size < allOverlayHwTypes.size
-                ? [
                     {
-                      id: 'scatter-reset-filter',
-                      label: 'Reset filter',
-                      onClick: () => {
-                        selectAllHwTypes();
-                        setLocalOfficialOverride(null);
-                        resetOverlayHwTypes();
-                        track('latency_legend_filter_reset');
+                      id: 'scatter-parallelism-labels',
+                      label: 'Parallelism Labels',
+                      checked: useAdvancedLabels,
+                      onCheckedChange: (checked: boolean) => {
+                        setUseAdvancedLabels(checked);
+                        track('latency_advanced_labels_toggled', { enabled: checked });
+                        if (checked && !showGradientLabels) {
+                          window.dispatchEvent(
+                            new CustomEvent(GRADIENT_NUDGE_EVENT, {
+                              detail: {
+                                enableGradient: () => {
+                                  setShowGradientLabels(true);
+                                  setUseAdvancedLabels(false);
+                                  track('latency_gradient_labels_toggled', {
+                                    enabled: true,
+                                    source: 'nudge',
+                                  });
+                                },
+                              },
+                            }),
+                          );
+                        }
+                      },
+                    },
+                    {
+                      id: 'scatter-gradient-labels',
+                      label: 'Gradient Labels',
+                      checked: showGradientLabels,
+                      onCheckedChange: (checked: boolean) => {
+                        setShowGradientLabels(checked);
+                        track('latency_gradient_labels_toggled', { enabled: checked });
+                      },
+                    },
+                    {
+                      id: 'scatter-line-labels',
+                      label: 'Line Labels',
+                      checked: showLineLabels,
+                      onCheckedChange: (checked: boolean) => {
+                        setShowLineLabels(checked);
+                        track('latency_line_labels_toggled', { enabled: checked });
+                      },
+                    },
+                    {
+                      id: 'scatter-speed-overlay',
+                      label: 'Bus / Race Car',
+                      checked: showSpeedOverlay,
+                      onCheckedChange: (checked: boolean) => {
+                        setShowSpeedOverlay(checked);
+                        track('latency_speed_overlay_toggled', { enabled: checked });
+                      },
+                    },
+                    {
+                      id: 'scatter-minecraft-overlay',
+                      label: 'Donkey / Elytra',
+                      checked: showMinecraftOverlay,
+                      onCheckedChange: (checked: boolean) => {
+                        setShowMinecraftOverlay(checked);
+                        track('latency_minecraft_overlay_toggled', { enabled: checked });
                       },
                     },
                   ]
-                : []
+            }
+            actions={
+              hideLegendControls
+                ? []
+                : effectiveOfficialHwTypes.size < hwTypesWithData.size ||
+                    activeOverlayHwTypes.size < allOverlayHwTypes.size
+                  ? [
+                      {
+                        id: 'scatter-reset-filter',
+                        label: 'Reset filter',
+                        onClick: () => {
+                          selectAllHwTypes();
+                          setLocalOfficialOverride(null);
+                          resetOverlayHwTypes();
+                          track('latency_legend_filter_reset');
+                        },
+                      },
+                    ]
+                  : []
             }
             precisionIndicators={selectedPrecisions}
             enableTooltips={true}
diff --git a/packages/app/src/components/ui/chart-buttons.tsx b/packages/app/src/components/ui/chart-buttons.tsx
index 14c0e2c0..63ccf7d2 100644
--- a/packages/app/src/components/ui/chart-buttons.tsx
+++ b/packages/app/src/components/ui/chart-buttons.tsx
@@ -1,12 +1,13 @@
 'use client';
 
 import { track } from '@/lib/analytics';
-import { Download, FileSpreadsheet, Image, RotateCcw, Video } from 'lucide-react';
-import { type ReactNode, useState } from 'react';
+import { Check, CodeXml, Download, FileSpreadsheet, Image, RotateCcw, Video } from 'lucide-react';
+import { type ReactNode, useCallback, useState } from 'react';
 
 import { useChartExport } from '@/hooks/useChartExport';
 import { Button } from '@/components/ui/button';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { buildEmbedIframeSnippet } from '@/lib/embed-params';
 import { cn } from '@/lib/utils';
 
 interface ChartButtonsProps {
@@ -26,6 +27,8 @@ interface ChartButtonsProps {
   onExportCsv?: () => void;
   /** Optional callback to open the MP4 export preview (e.g., replay modal) */
   onExportMp4?: () => void;
+  /** When set, export menu includes "Copy embed" (iframe HTML built from `/embed/scatter?...`). */
+  getEmbedUrl?: () => string;
   /** Human-readable base name for exported files (e.g. "DeepSeek-R1_throughput_interactivity"). Falls back to chartId. */
   exportFileName?: string;
   /**
@@ -39,7 +42,7 @@ interface ChartButtonsProps {
 
 /**
  * Reusable chart action buttons component that provides:
- * - Export to image button with analytics tracking (or dropdown with PNG/CSV when onExportCsv is provided)
+ * - Export to image with analytics tracking, or a popover with PNG plus optional CSV / MP4 / copy embed (iframe)
  * - Reset zoom button with custom event dispatch
  *
  * Event pattern: `${analyticsPrefix}_zoom_reset_${chartId}`
@@ -54,6 +57,7 @@ export function ChartButtons({
   hideImageExport,
   onExportCsv,
   onExportMp4,
+  getEmbedUrl,
   exportFileName,
   leadingControls,
   className,
@@ -64,9 +68,35 @@ export function ChartButtons({
     exportFileName,
   });
   const [popoverOpen, setPopoverOpen] = useState(false);
+  const [copiedEmbed, setCopiedEmbed] = useState(false);
   // always include chartId in event name for consistency
   const resetEventName = zoomResetEvent || `${analyticsPrefix}_zoom_reset_${chartId}`;
 
+  const handleCopyEmbed = useCallback(async () => {
+    const url = getEmbedUrl?.();
+    if (!url) return;
+    track(`${analyticsPrefix}_embed_iframe_copied`);
+    const snippet = buildEmbedIframeSnippet(url);
+
+    try {
+      await navigator.clipboard.writeText(snippet);
+    } catch {
+      const textArea = document.createElement('textarea');
+      textArea.value = snippet;
+      document.body.append(textArea);
+      textArea.select();
+      document.execCommand('copy');
+      textArea.remove();
+    }
+
+    window.dispatchEvent(new CustomEvent('inferencex:action'));
+    setCopiedEmbed(true);
+    setTimeout(() => {
+      setCopiedEmbed(false);
+      setPopoverOpen(false);
+    }, 2000);
+  }, [analyticsPrefix, getEmbedUrl]);
+
   const handleExportPng = () => {
     setPopoverOpen(false);
     track(`${analyticsPrefix}_chart_exported`);
@@ -94,8 +124,14 @@ export function ChartButtons({
       )}
     >
       {leadingControls}
-      {onExportCsv || onExportMp4 ? (
-        <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
+      {onExportCsv || onExportMp4 || getEmbedUrl ? (
+        <Popover
+          open={popoverOpen}
+          onOpenChange={(open) => {
+            setPopoverOpen(open);
+            if (open) setCopiedEmbed(false);
+          }}
+        >
           <PopoverTrigger asChild>
             <Button
               data-testid="export-button"
@@ -144,6 +180,21 @@ export function ChartButtons({
                 Download MP4
               </button>
             )}
+            {getEmbedUrl && (
+              <button
+                type="button"
+                data-testid="export-embed-button"
+                data-ph-capture-attribute-export-type="embed"
+                data-ph-capture-attribute-chart={chartId}
+                className="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground cursor-pointer"
+                onClick={() => {
+                  void handleCopyEmbed();
+                }}
+              >
+                {copiedEmbed ? <Check size={14} /> : <CodeXml size={14} />}
+                {copiedEmbed ? 'Copied!' : 'Copy embed'}
+              </button>
+            )}
           </PopoverContent>
         </Popover>
       ) : (
diff --git a/packages/app/src/components/ui/chart-legend.tsx b/packages/app/src/components/ui/chart-legend.tsx
index 81d5f261..5ef5d33b 100644
--- a/packages/app/src/components/ui/chart-legend.tsx
+++ b/packages/app/src/components/ui/chart-legend.tsx
@@ -69,6 +69,8 @@ export interface ChartLegendProps {
   onItemHover?: (id: string) => void;
   onItemHoverEnd?: () => void;
   onItemRemove?: (name: string) => void;
+  /** When true, hides the Expand/Collapse button entirely (e.g. embed mode). */
+  hideExpandButton?: boolean;
 }
 
 export default function ChartLegend({
@@ -88,6 +90,7 @@ export default function ChartLegend({
   onItemHover,
   onItemHoverEnd,
   onItemRemove,
+  hideExpandButton = false,
 }: ChartLegendProps) {
   const isSidebar = variant === 'sidebar';
   const [hasLongText, setHasLongText] = useState(false);
@@ -315,18 +318,19 @@ export default function ChartLegend({
     </div>
   ) : null;
 
-  const expandButton = hasLongText ? (
-    <div className="hidden lg:block mt-2 no-export">
-      <button
-        onClick={handleLegendExpand}
-        className="text-xs text-accent-foreground hover:text-foreground flex items-center gap-1"
-        aria-label={isLegendExpanded ? 'Collapse legend' : 'Expand legend'}
-      >
-        {isLegendExpanded ? <ArrowRightToLine size={16} /> : <ArrowLeftToLine size={16} />}
-        {isLegendExpanded ? 'Collapse' : 'Expand'}
-      </button>
-    </div>
-  ) : null;
+  const expandButton =
+    hasLongText && !hideExpandButton ? (
+      <div className="hidden lg:block mt-2 no-export">
+        <button
+          onClick={handleLegendExpand}
+          className="text-xs text-accent-foreground hover:text-foreground flex items-center gap-1"
+          aria-label={isLegendExpanded ? 'Collapse legend' : 'Expand legend'}
+        >
+          {isLegendExpanded ? <ArrowRightToLine size={16} /> : <ArrowLeftToLine size={16} />}
+          {isLegendExpanded ? 'Collapse' : 'Expand'}
+        </button>
+      </div>
+    ) : null;
 
   // Compute li className for a legend item (shared by tooltip and non-tooltip paths)
   const itemClassName = (item: CommonLegendItemProps, isHidden: boolean) =>
diff --git a/packages/app/src/components/ui/d3-chart-wrapper.tsx b/packages/app/src/components/ui/d3-chart-wrapper.tsx
index 0392ac10..2ff338a4 100644
--- a/packages/app/src/components/ui/d3-chart-wrapper.tsx
+++ b/packages/app/src/components/ui/d3-chart-wrapper.tsx
@@ -2,6 +2,8 @@
 
 import React from 'react';
 
+import { cn } from '@/lib/utils';
+
 export interface D3ChartWrapperProps {
   chartId: string;
   svgRef: React.RefObject<SVGSVGElement | null>;
@@ -16,6 +18,14 @@ export interface D3ChartWrapperProps {
     svgRef: React.RefObject<SVGSVGElement | null>,
   ) => void;
   legendElement: React.ReactNode;
+  legendWrapper?: (legend: React.ReactNode) => React.ReactNode;
+  /** When true, removes the fixed h-96 on the legend container at narrow widths so it sizes to content. */
+  compactLegend?: boolean;
+  /**
+   * When true, chart + legend fill parent height (embed); chart column observes
+   * height for the SVG. Instructions sit below the measured SVG area.
+   */
+  fillHeight?: boolean;
   noDataOverlay?: React.ReactNode;
   caption?: React.ReactNode;
   instructions?: string;
@@ -23,6 +33,21 @@ export interface D3ChartWrapperProps {
   grabCursor?: boolean;
 }
 
+function legendShellClassName(compactLegend: boolean, fillHeight: boolean): string {
+  if (compactLegend) {
+    return cn(
+      // shrink-0 at all breakpoints so the legend bar never collapses over the chart
+      // when the chart column is flex-1 in a short viewport (was lg:shrink-0 only).
+      'relative mt-3 w-full shrink-0 lg:mt-0 lg:w-48 lg:overflow-hidden',
+      fillHeight ? 'lg:h-full' : 'lg:h-[575px]',
+    );
+  }
+  return cn(
+    'relative mt-3 h-96 w-full shrink-0 lg:mt-0 lg:w-48',
+    fillHeight ? 'lg:h-full lg:overflow-hidden' : 'lg:h-[575px]',
+  );
+}
+
 export function D3ChartWrapper({
   chartId,
   svgRef,
@@ -34,65 +59,106 @@ export function D3ChartWrapper({
   dismissTooltip,
   hideTooltipElements,
   legendElement,
+  legendWrapper,
+  compactLegend = false,
+  fillHeight = false,
   noDataOverlay,
   caption,
   instructions = 'Shift+Scroll to zoom • Drag to pan • Double-click to reset • Click a point to pin tooltip',
   testId,
   grabCursor = true,
 }: D3ChartWrapperProps) {
-  return (
-    <div id={chartId} data-testid={testId}>
-      {caption && <figcaption>{caption}</figcaption>}
-      <div className="flex flex-col lg:flex-row w-full">
-        <div ref={setContainerRef} className="relative flex-1 min-w-0">
-          <div className="relative">
-            <svg
-              ref={svgRef}
-              width="100%"
-              height={dimensions.height}
-              style={{ cursor: grabCursor ? 'grab' : undefined }}
-              onMouseDown={
-                grabCursor
-                  ? (e) => {
-                      (e.currentTarget as SVGSVGElement).style.cursor = 'grabbing';
-                    }
-                  : undefined
+  const svgBlock = (
+    <>
+      <svg
+        ref={svgRef}
+        width="100%"
+        height={dimensions.height}
+        style={{ cursor: grabCursor ? 'grab' : undefined }}
+        onMouseDown={
+          grabCursor
+            ? (e) => {
+                (e.currentTarget as SVGSVGElement).style.cursor = 'grabbing';
               }
-              onMouseUp={
-                grabCursor
-                  ? (e) => {
-                      (e.currentTarget as SVGSVGElement).style.cursor = 'grab';
-                    }
-                  : undefined
+            : undefined
+        }
+        onMouseUp={
+          grabCursor
+            ? (e) => {
+                (e.currentTarget as SVGSVGElement).style.cursor = 'grab';
               }
-              onClick={() => {
-                if (isPinned()) {
-                  dismissTooltip();
-                  hideTooltipElements(tooltipRef, svgRef);
-                }
-              }}
-            />
-            <div
-              ref={tooltipRef}
-              data-chart-tooltip
-              style={{
-                position: 'absolute',
-                opacity: pinnedPoint ? 1 : 0,
-                pointerEvents: pinnedPoint ? 'auto' : 'none',
-                display: pinnedPoint ? 'block' : 'none',
-                zIndex: 50,
-              }}
-            />
-            {noDataOverlay}
+            : undefined
+        }
+        onClick={() => {
+          if (isPinned()) {
+            dismissTooltip();
+            hideTooltipElements(tooltipRef, svgRef);
+          }
+        }}
+      />
+      <div
+        ref={tooltipRef}
+        data-chart-tooltip
+        style={{
+          position: 'absolute',
+          opacity: pinnedPoint ? 1 : 0,
+          pointerEvents: pinnedPoint ? 'auto' : 'none',
+          display: pinnedPoint ? 'block' : 'none',
+          zIndex: 50,
+        }}
+      />
+      {noDataOverlay}
+    </>
+  );
+
+  if (fillHeight) {
+    return (
+      <div id={chartId} data-testid={testId} className="flex h-full min-h-0 flex-1 flex-col">
+        {caption && <figcaption>{caption}</figcaption>}
+        <div className="flex min-h-0 w-full flex-1 flex-col lg:flex-row">
+          <div className="relative flex min-h-0 min-w-0 flex-1 flex-col">
+            <div ref={setContainerRef} className="relative min-h-0 min-w-0 flex-1">
+              <div className="relative h-full min-h-0 w-full">{svgBlock}</div>
+            </div>
+            <p
+              data-testid={`${chartId}-instructions`}
+              className="no-export mt-2 text-center text-xs text-muted-foreground"
+            >
+              {instructions}
+            </p>
+            <div className="max-h-0 overflow-hidden">
+              <div id={`${chartId}-export`} className="p-4"></div>
+            </div>
           </div>
-          <p className="no-export text-xs text-muted-foreground text-center mt-2">{instructions}</p>
-          <div className="overflow-hidden max-h-0">
+          {legendElement && (
+            <div className={legendShellClassName(compactLegend, true)}>
+              {legendWrapper ? legendWrapper(legendElement) : legendElement}
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div id={chartId} data-testid={testId}>
+      {caption && <figcaption>{caption}</figcaption>}
+      <div className="flex w-full flex-col lg:flex-row">
+        <div ref={setContainerRef} className="relative min-w-0 flex-1">
+          <div className="relative">{svgBlock}</div>
+          <p
+            data-testid={`${chartId}-instructions`}
+            className="no-export mt-2 text-center text-xs text-muted-foreground"
+          >
+            {instructions}
+          </p>
+          <div className="max-h-0 overflow-hidden">
             <div id={`${chartId}-export`} className="p-4"></div>
           </div>
         </div>
         {legendElement && (
-          <div className="w-full h-96 lg:h-[575px] lg:w-48 lg:shrink-0 relative mt-3 lg:mt-0">
-            {legendElement}
+          <div className={legendShellClassName(compactLegend, false)}>
+            {legendWrapper ? legendWrapper(legendElement) : legendElement}
           </div>
         )}
       </div>
diff --git a/packages/app/src/hooks/useResponsiveChartDimensions.ts b/packages/app/src/hooks/useResponsiveChartDimensions.ts
index a1200ec6..8581fe11 100644
--- a/packages/app/src/hooks/useResponsiveChartDimensions.ts
+++ b/packages/app/src/hooks/useResponsiveChartDimensions.ts
@@ -1,11 +1,23 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 
+const DEFAULT_MIN_HEIGHT = 240;
+
 export interface UseResponsiveChartDimensionsOptions {
   /**
-   * Fixed height value for the chart.
+   * Fixed height value for the chart when `observeHeight` is false.
    * @default 600
    */
   height?: number;
+  /**
+   * When true, chart height follows the container's observed height (clamped
+   * to `minHeight`). When false, height is the fixed `height` option.
+   */
+  observeHeight?: boolean;
+  /**
+   * Minimum chart height when `observeHeight` is true.
+   * @default 240
+   */
+  minHeight?: number;
 }
 
 export interface UseResponsiveChartDimensionsResult {
@@ -14,29 +26,39 @@ export interface UseResponsiveChartDimensionsResult {
   setContainerRef: (element: HTMLDivElement | null) => void;
 }
 
+function resolveHeight(
+  observeHeight: boolean,
+  minHeight: number,
+  fixedHeight: number,
+  observedWidth: number,
+  observedHeight: number,
+): { width: number; height: number } {
+  const width = observedWidth;
+  const height = observeHeight ? Math.max(minHeight, observedHeight) : fixedHeight;
+  return { width, height };
+}
+
 /**
  * Hook for managing responsive chart dimensions with ResizeObserver.
- * Provides a containerRef and dimensions state that automatically updates
- * when the container width changes. Height is fixed.
- *
- * @example
- * const { dimensions, setContainerRef } = useResponsiveChartDimensions({
- *   height: 600,
- * });
+ * Width always follows the container. Height is either fixed (`height`) or
+ * derived from the container when `observeHeight` is true (floored at
+ * `minHeight`).
  */
 export function useResponsiveChartDimensions(
   options: UseResponsiveChartDimensionsOptions = {},
 ): UseResponsiveChartDimensionsResult {
-  const { height = 600 } = options;
+  const {
+    height: fixedHeight = 600,
+    observeHeight = false,
+    minHeight = DEFAULT_MIN_HEIGHT,
+  } = options;
 
   const containerRef = useRef<HTMLDivElement>(null);
-  const [dimensions, setDimensions] = useState({ width: 0, height });
+  const [dimensions, setDimensions] = useState({ width: 0, height: fixedHeight });
   const resizeObserverRef = useRef<ResizeObserver | null>(null);
 
-  // ref callback for initial dimension calculation and ResizeObserver setup
   const setContainerRef = useCallback(
     (element: HTMLDivElement | null) => {
-      // clean up previous observer if container changed
       if (resizeObserverRef.current) {
         resizeObserverRef.current.disconnect();
         resizeObserverRef.current = null;
@@ -45,25 +67,40 @@ export function useResponsiveChartDimensions(
       containerRef.current = element;
 
       if (element) {
-        // set initial dimensions
-        const initialWidth = element.getBoundingClientRect().width;
-        setDimensions({ width: initialWidth, height });
+        const rect = element.getBoundingClientRect();
+        setDimensions(
+          resolveHeight(
+            observeHeight,
+            minHeight,
+            fixedHeight,
+            rect.width,
+            observeHeight ? rect.height : fixedHeight,
+          ),
+        );
 
-        // set up ResizeObserver
         resizeObserverRef.current = new ResizeObserver((entries) => {
-          if (entries[0]) {
-            const { width: observedWidth } = entries[0].contentRect;
-            setDimensions({ width: observedWidth, height });
-          }
+          const entry = entries[0];
+          if (!entry) return;
+          const { width: observedWidth, height: observedContentHeight } = entry.contentRect;
+          setDimensions((prev) => {
+            const next = resolveHeight(
+              observeHeight,
+              minHeight,
+              fixedHeight,
+              observedWidth,
+              observeHeight ? observedContentHeight : fixedHeight,
+            );
+            if (prev.width === next.width && prev.height === next.height) return prev;
+            return next;
+          });
         });
 
         resizeObserverRef.current.observe(element);
       }
     },
-    [height],
+    [fixedHeight, observeHeight, minHeight],
   );
 
-  // clean up on unmount or height change
   useEffect(
     () => () => {
       if (resizeObserverRef.current) {
@@ -73,10 +110,10 @@ export function useResponsiveChartDimensions(
     [],
   );
 
-  // update dimensions when height changes
   useEffect(() => {
-    setDimensions((prev) => ({ ...prev, height }));
-  }, [height]);
+    if (observeHeight) return;
+    setDimensions((prev) => ({ ...prev, height: fixedHeight }));
+  }, [fixedHeight, observeHeight]);
 
   return {
     dimensions,
diff --git a/packages/app/src/lib/d3-chart/D3Chart/D3Chart.tsx b/packages/app/src/lib/d3-chart/D3Chart/D3Chart.tsx
index 2a18b9cd..c4fe2dc2 100644
--- a/packages/app/src/lib/d3-chart/D3Chart/D3Chart.tsx
+++ b/packages/app/src/lib/d3-chart/D3Chart/D3Chart.tsx
@@ -19,11 +19,14 @@ function D3ChartInner<T>(
     chartId,
     data,
     height = 600,
+    fillHeight = false,
     margin,
     watermark,
     testId,
     grabCursor = true,
     instructions,
+    legendWrapper,
+    compactLegend,
     clipContent,
     xScale: xScaleConfig,
     yScale: yScaleConfig,
@@ -44,7 +47,11 @@ function D3ChartInner<T>(
   const tooltipRef = useRef<HTMLDivElement | null>(null);
   const scalesRef = useRef<{ xScale: BuiltScale; yScale: BuiltScale } | null>(null);
 
-  const { dimensions, setContainerRef } = useResponsiveChartDimensions({ height });
+  const { dimensions, setContainerRef } = useResponsiveChartDimensions({
+    height,
+    observeHeight: fillHeight,
+    minHeight: fillHeight ? 240 : undefined,
+  });
 
   const { zoomTransformRef, setupZoom } = useChartZoom({
     resetEventName: zoomConfig?.resetEventName ?? `d3chart_zoom_reset_${chartId}`,
@@ -148,6 +155,9 @@ function D3ChartInner<T>(
       testId={testId}
       grabCursor={grabCursor}
       legendElement={legendElement}
+      legendWrapper={legendWrapper}
+      compactLegend={compactLegend}
+      fillHeight={fillHeight}
       noDataOverlay={noDataOverlay}
       caption={caption}
     />
diff --git a/packages/app/src/lib/d3-chart/D3Chart/types.ts b/packages/app/src/lib/d3-chart/D3Chart/types.ts
index 3062784e..e079424f 100644
--- a/packages/app/src/lib/d3-chart/D3Chart/types.ts
+++ b/packages/app/src/lib/d3-chart/D3Chart/types.ts
@@ -244,6 +244,11 @@ export interface D3ChartProps<T = any> {
   chartId: string;
   data: T[];
   height?: number;
+  /**
+   * When true, the chart fills the parent flex height (embed iframes). Width
+   * stays responsive; height is observed and floored at 240px.
+   */
+  fillHeight?: boolean;
   margin?: ChartMargin;
   watermark?: 'logo' | 'unofficial' | 'none';
   testId?: string;
@@ -264,6 +269,8 @@ export interface D3ChartProps<T = any> {
 
   transitionDuration?: number;
   legendElement?: React.ReactNode;
+  legendWrapper?: (legend: React.ReactNode) => React.ReactNode;
+  compactLegend?: boolean;
   noDataOverlay?: React.ReactNode;
   caption?: React.ReactNode;
 
diff --git a/packages/app/src/lib/embed-params.test.ts b/packages/app/src/lib/embed-params.test.ts
new file mode 100644
index 00000000..57bbb07c
--- /dev/null
+++ b/packages/app/src/lib/embed-params.test.ts
@@ -0,0 +1,180 @@
+import { describe, it, expect } from 'vitest';
+
+import {
+  buildCanonicalHref,
+  buildEmbedIframeSnippet,
+  buildEmbedScatterUrl,
+  readEmbedChartVariant,
+} from '@/lib/embed-params';
+
+describe('readEmbedChartVariant', () => {
+  it('returns e2e by default (absent/null)', () => {
+    expect(readEmbedChartVariant(null)).toBe('e2e');
+    expect(readEmbedChartVariant(undefined)).toBe('e2e');
+    expect(readEmbedChartVariant('')).toBe('e2e');
+  });
+
+  it('returns interactivity for exact match', () => {
+    expect(readEmbedChartVariant('interactivity')).toBe('interactivity');
+  });
+
+  it('falls back to e2e for unknown values', () => {
+    expect(readEmbedChartVariant('bogus')).toBe('e2e');
+    expect(readEmbedChartVariant('e2e')).toBe('e2e');
+  });
+});
+
+describe('buildEmbedScatterUrl', () => {
+  it('emits site-style parameter keys', () => {
+    const url = buildEmbedScatterUrl({
+      origin: 'https://inferencex.example.com',
+      model: 'DeepSeek-R1-0528',
+      sequence: '8k/1k',
+      precisions: 'fp4',
+      yMetric: 'y_tpPerGpu',
+      activeGpus: '',
+      chartType: 'e2e',
+    });
+    expect(url).toMatch(/^https:\/\/inferencex\.example\.com\/embed\/scatter\?/u);
+    const sp = new URL(url).searchParams;
+    expect(sp.get('g_model')).toBe('DeepSeek-R1-0528');
+    expect(sp.get('i_seq')).toBe('8k/1k');
+    expect(sp.get('i_prec')).toBe('fp4');
+    expect(sp.get('i_metric')).toBe('y_tpPerGpu');
+    expect(sp.has('i_active')).toBe(false);
+    expect(sp.has('i_chart')).toBe(false);
+  });
+
+  it('omits i_chart for e2e (default)', () => {
+    const url = buildEmbedScatterUrl({
+      origin: 'https://example.com',
+      model: 'DeepSeek-V4-Pro',
+      sequence: '1k/1k',
+      precisions: 'fp4',
+      yMetric: 'y_costh',
+      activeGpus: '',
+      chartType: 'e2e',
+    });
+    expect(new URL(url).searchParams.has('i_chart')).toBe(false);
+  });
+
+  it('includes i_chart=interactivity when chart type is interactivity', () => {
+    const url = buildEmbedScatterUrl({
+      origin: 'https://example.com',
+      model: 'DeepSeek-V4-Pro',
+      sequence: '1k/1k',
+      precisions: 'fp4',
+      yMetric: 'y_costh',
+      activeGpus: '',
+      chartType: 'interactivity',
+    });
+    expect(new URL(url).searchParams.get('i_chart')).toBe('interactivity');
+  });
+
+  it('includes i_active when activeGpus is set', () => {
+    const url = buildEmbedScatterUrl({
+      origin: 'https://example.com',
+      model: 'DeepSeek-R1-0528',
+      sequence: '8k/1k',
+      precisions: 'fp4',
+      yMetric: 'y_tpPerGpu',
+      activeGpus: 'b200_sglang,gb300_dynamo-sglang',
+      chartType: 'e2e',
+    });
+    expect(new URL(url).searchParams.get('i_active')).toBe('b200_sglang,gb300_dynamo-sglang');
+  });
+
+  it('falls back to fp4 when precisions is empty', () => {
+    const url = buildEmbedScatterUrl({
+      origin: 'https://example.com',
+      model: 'DeepSeek-R1-0528',
+      sequence: '8k/1k',
+      precisions: '',
+      yMetric: 'y_tpPerGpu',
+      activeGpus: '',
+      chartType: 'e2e',
+    });
+    expect(new URL(url).searchParams.get('i_prec')).toBe('fp4');
+  });
+
+  it('the produced URL can be loaded by seedUrlState (site-key passthrough)', () => {
+    const url = buildEmbedScatterUrl({
+      origin: 'https://inferencex.semianalysis.com',
+      model: 'Llama-3.3-70B-Instruct-FP8',
+      sequence: '1k/8k',
+      precisions: 'fp8',
+      yMetric: 'y_costh',
+      activeGpus: 'b200_vllm',
+      chartType: 'interactivity',
+    });
+    const sp = new URL(url).searchParams;
+    // All keys are directly usable as UrlStateParams — no further translation required.
+    expect(sp.get('g_model')).toBe('Llama-3.3-70B-Instruct-FP8');
+    expect(sp.get('i_seq')).toBe('1k/8k');
+    expect(sp.get('i_prec')).toBe('fp8');
+    expect(sp.get('i_metric')).toBe('y_costh');
+    expect(sp.get('i_active')).toBe('b200_vllm');
+    expect(sp.get('i_chart')).toBe('interactivity');
+  });
+});
+
+describe('buildCanonicalHref', () => {
+  it('points to /inference and drops i_chart', () => {
+    const href = buildCanonicalHref(
+      {
+        g_model: 'DeepSeek-V4-Pro',
+        i_seq: '1k/1k',
+        i_prec: 'fp4',
+        i_metric: 'y_costh',
+        i_active: 'b200_vllm',
+        i_chart: 'interactivity',
+      } as any,
+      'https://inferencex.semianalysis.com',
+    );
+    expect(href).toContain('https://inferencex.semianalysis.com/inference?');
+    expect(href).toContain('g_model=DeepSeek-V4-Pro');
+    expect(href).toContain('i_seq=1k%2F1k');
+    expect(href).toContain('i_prec=fp4');
+    expect(href).toContain('i_metric=y_costh');
+    expect(href).toContain('i_active=b200_vllm');
+    expect(href).not.toContain('i_chart');
+  });
+
+  it('applies defaults for the four core params when the embed URL has no query string', () => {
+    // A bare /embed/scatter URL passes an empty params object.
+    // The canonical href must still include the core params so the link works.
+    const href = buildCanonicalHref({}, 'https://example.com');
+    expect(href).toContain('g_model=DeepSeek-R1-0528');
+    expect(href).toContain('i_seq=8k%2F1k');
+    expect(href).toContain('i_prec=fp4');
+    expect(href).toContain('i_metric=y_tpPerGpu');
+    expect(href).not.toContain('i_active');
+  });
+
+  it('omits i_active when not set', () => {
+    const href = buildCanonicalHref(
+      { g_model: 'DeepSeek-R1-0528', i_seq: '8k/1k', i_prec: 'fp4', i_metric: 'y_tpPerGpu' },
+      'https://example.com',
+    );
+    expect(href).not.toContain('i_active');
+  });
+});
+
+describe('buildEmbedIframeSnippet', () => {
+  it('wraps the embed URL in a recommended iframe tag', () => {
+    const url = 'https://example.com/embed/scatter?g_model=DeepSeek-R1-0528';
+    const snippet = buildEmbedIframeSnippet(url);
+    expect(snippet).toContain(`src="${url}"`);
+    expect(snippet).toContain('width="800"');
+    expect(snippet).toContain('height="500"');
+    expect(snippet).toContain('loading="lazy"');
+    expect(snippet).toContain('referrerpolicy="origin"');
+    expect(snippet).toContain('allow="clipboard-write"');
+  });
+
+  it('accepts custom width and height', () => {
+    const snippet = buildEmbedIframeSnippet('https://x.test/e', { width: '100%', height: 400 });
+    expect(snippet).toContain('width="100%"');
+    expect(snippet).toContain('height="400"');
+  });
+});
diff --git a/packages/app/src/lib/embed-params.ts b/packages/app/src/lib/embed-params.ts
new file mode 100644
index 00000000..589778bd
--- /dev/null
+++ b/packages/app/src/lib/embed-params.ts
@@ -0,0 +1,120 @@
+/**
+ * @file embed-params.ts
+ * @description Utilities for building and reading `/embed/*` route URLs.
+ *
+ * Embed URLs use the same `g_*` / `i_*` parameter keys as the main site
+ * (see `url-state.ts`) so there is no translation layer to maintain. The one
+ * embed-specific key is `i_chart` (which chart variant to show — the main site
+ * renders both E2E and interactivity together, embeds show only one).
+ *
+ * Example URL:
+ *   /embed/scatter?g_model=DeepSeek-R1-0528&i_seq=8k%2F1k&i_prec=fp4
+ *     &i_metric=y_tpPerGpu&i_active=b200_sglang,gb300_dynamo-sglang&i_chart=e2e
+ */
+
+import { PARAM_DEFAULTS, type UrlStateParams } from '@/lib/url-state';
+
+/**
+ * The four core embed-relevant params that must always appear in the canonical
+ * `/inference` link, even when not present in the embed URL itself (because
+ * the providers will apply these defaults on the client side anyway).
+ */
+const EMBED_CANONICAL_KEYS = ['g_model', 'i_seq', 'i_prec', 'i_metric'] as const;
+
+/**
+ * Read the `i_chart` embed-only param from any string value.
+ * Returns `'interactivity'` only for exact match; everything else (including
+ * absent/null) defaults to `'e2e'`.
+ */
+export function readEmbedChartVariant(value: string | null | undefined): 'e2e' | 'interactivity' {
+  return value === 'interactivity' ? 'interactivity' : 'e2e';
+}
+
+/**
+ * Build a stable `/embed/scatter?...` URL from dashboard-style chart state.
+ * Emits site-style parameter keys (`g_model`, `i_seq`, `i_prec`, `i_metric`,
+ * `i_active`, `i_chart`) so the embed URL and the main site share the same
+ * key contract with no translation layer.
+ *
+ * Note: the embed route does not carry `?unofficialrun=` / overlay data — the
+ * URL reflects official benchmark filters only.
+ */
+export function buildEmbedScatterUrl(args: {
+  origin: string;
+  /** Display model name (same as `g_model` / UI selection). */
+  model: string;
+  sequence: string;
+  precisions: string;
+  yMetric: string;
+  activeGpus: string;
+  chartType: 'e2e' | 'interactivity';
+}): string {
+  const baseOrigin = args.origin.replace(/\/$/u, '');
+  const precisions = args.precisions.trim() === '' ? 'fp4' : args.precisions;
+
+  const sp = new URLSearchParams();
+  sp.set('g_model', args.model);
+  sp.set('i_seq', args.sequence);
+  sp.set('i_prec', precisions);
+  sp.set('i_metric', args.yMetric);
+  if (args.activeGpus.trim()) sp.set('i_active', args.activeGpus.trim());
+  if (args.chartType === 'interactivity') sp.set('i_chart', 'interactivity');
+
+  return `${baseOrigin}/embed/scatter?${sp.toString()}`;
+}
+
+/**
+ * Build the canonical `/inference` URL that the embed attribution link
+ * should deep-link to. The four core embed params (`g_model`, `i_seq`,
+ * `i_prec`, `i_metric`) always appear — using `PARAM_DEFAULTS` as fallback
+ * when absent in the embed URL — so a bare `/embed/scatter` produces a
+ * fully-specified canonical link. The embed-only `i_chart` key is dropped.
+ */
+export function buildCanonicalHref(
+  params: UrlStateParams & { i_chart?: string },
+  origin: string,
+): string {
+  const sp = new URLSearchParams();
+
+  // Core params: always present (fall back to site defaults when absent).
+  for (const k of EMBED_CANONICAL_KEYS) {
+    sp.set(k, params[k] ?? PARAM_DEFAULTS[k]);
+  }
+
+  // i_active only when explicitly set (empty = all GPUs = no param needed).
+  if (params.i_active) sp.set('i_active', params.i_active);
+
+  // Pass through any additional site params the embed URL may carry,
+  // skipping keys already handled above and the embed-only i_chart.
+  const handled = new Set<string>([...EMBED_CANONICAL_KEYS, 'i_active', 'i_chart']);
+  for (const [k, v] of Object.entries(params)) {
+    if (handled.has(k) || !v) continue;
+    sp.set(k, v);
+  }
+
+  return `${origin.replace(/\/$/u, '')}/inference?${sp.toString()}`;
+}
+
+const DEFAULT_IFRAME_WIDTH = 800;
+const DEFAULT_IFRAME_HEIGHT = 500;
+
+/**
+ * Builds a partner-ready `<iframe>` snippet for an embed URL.
+ */
+export function buildEmbedIframeSnippet(
+  src: string,
+  options?: { width?: number | string; height?: number },
+): string {
+  const width = options?.width ?? DEFAULT_IFRAME_WIDTH;
+  const height = options?.height ?? DEFAULT_IFRAME_HEIGHT;
+  const widthAttr = typeof width === 'number' ? String(width) : width;
+  return `<iframe
+  src="${src}"
+  width="${widthAttr}"
+  height="${height}"
+  loading="lazy"
+  referrerpolicy="origin"
+  allow="clipboard-write"
+  style="border:none;border-radius:8px">
+</iframe>`;
+}
diff --git a/packages/app/src/lib/url-state.ts b/packages/app/src/lib/url-state.ts
index ebaa5336..566180ff 100644
--- a/packages/app/src/lib/url-state.ts
+++ b/packages/app/src/lib/url-state.ts
@@ -135,6 +135,27 @@ export function readUrlParams(): UrlStateParams {
   return _initialParams;
 }
 
+/**
+ * Synchronously seed the URL-state cache before any provider's lazy
+ * `useState(() => getUrlParam(...))` initializer fires. Used by the embed
+ * routes to translate their stable, public-contract param shape (e.g.
+ * `?model=dsr1&y=tpPerGpu&gpus=...`) into the internal `g_*` / `i_*` keys.
+ *
+ * Must be called from a top-level module-scope statement in a client
+ * component (or its server-rendered parent) so the writes happen before
+ * `InferenceProvider` mounts. Calling it after a provider initializes its
+ * state has no effect on that provider — the lazy initializer has already
+ * run by then.
+ */
+export function seedUrlState(params: UrlStateParams): void {
+  for (const [key, value] of Object.entries(params)) {
+    const urlKey = key as UrlStateKey;
+    if (value === undefined) continue;
+    _initialParams[urlKey] = value;
+    currentState[urlKey] = value;
+  }
+}
+
 /** Check whether the current URL has any share-link params. */
 export function hasAnyUrlParams(): boolean {
   if (typeof window === 'undefined') return false;