SemiAnalysisAI · lalithsagar10 · Apr 30, 2026 · May 1, 2026 · May 2, 2026 · May 5, 2026
diff --git a/.env.example b/.env.example
diff --git a/.github/workflows/tests-e2e.yml b/.github/workflows/tests-e2e.yml
@@ -86,6 +86,18 @@ jobs:
         run: pnpm install --frozen-lockfile
         env:
           CYPRESS_INSTALL_BINARY: '0'
+      - name: Create CI env file
+        env:
+          DATABASE_READONLY_URL: ${{ secrets.DATABASE_READONLY_URL }}
+          GITHUB_TOKEN: ${{ secrets.INFX_MAIN_PAT }}
+        run: |
+          DB_URL="${DATABASE_READONLY_URL:-postgresql://postgres:postgres@localhost:5432/postgres}"
+          cat > .env <<EOF
+          DATABASE_READONLY_URL=$DB_URL
+          DATABASE_DRIVER=neon
+          DATABASE_SSL=true
+          GITHUB_TOKEN=${GITHUB_TOKEN:-}
+          EOF
       - name: Cache Cypress binary
         uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
         with:

diff --git a/README.md b/README.md
@@ -82,6 +82,37 @@ pnpm dev
 
 Open [http://localhost:3000](http://localhost:3000) with your browser.
 
+## Embedding Scatter Chart
+
+Use `/embed/scatter` for iframe-safe inference chart embeds.
+
+### Canonical URL contract (recommended)
+
+Use the same canonical query keys as dashboard state:
+
+- `g_model` (e.g. `DeepSeek-R1-0528`)
+- `i_seq` (e.g. `1024/1024`)
+- `i_prec` (e.g. `fp8`, comma-separated for multi-select)
+- `i_gpus` (e.g. `h200-sxm,b200-sxm,mi325x`)
+- `i_metric` (e.g. `y_tpPerGpu`)
+- `chart` (`interactivity` default, or `e2e`)
+
+Example:
+
+```text
+/embed/scatter?g_model=DeepSeek-R1-0528&i_seq=1024/1024&i_prec=fp8&i_gpus=h200-sxm,b200-sxm,mi325x&i_metric=y_tpPerGpu&chart=e2e
+```
+
+### Quick check links (local)
+
+- [Embed scatter - Interactivity](http://localhost:3000/embed/scatter?model=dsr1&gpus=h200%2Cb200%2Cmi325x&isl=1024&osl=1024&y=tpPerGpu)
+- [Embed scatter - End-to-end Latency](http://localhost:3000/embed/scatter?model=dsr1&gpus=h200%2Cb200%2Cmi325x&isl=1024&osl=1024&y=tpPerGpu&chart=e2e)
+- [Embed scatter - Canonical params](http://localhost:3000/embed/scatter?g_model=DeepSeek-R1-0528&i_seq=1024/1024&i_prec=fp8&i_gpus=h200-sxm,b200-sxm,mi325x&i_metric=y_tpPerGpu&chart=interactivity)
+
+### Alias compatibility
+
+Alias keys are still accepted for backward compatibility (`model`, `isl`/`osl`, `precision`/`prec`, `gpus`, `y`), but if both canonical and alias forms are present, canonical values take precedence.
+
 ## Development Scripts
 
 These are the main scripts you'll use during development. Admin scripts for database and cache management are listed separately below.

diff --git a/packages/app/src/app/embed/scatter/page.tsx b/packages/app/src/app/embed/scatter/page.tsx
@@ -0,0 +1,13 @@
+import type { Metadata } from 'next';
+
+import { EmbedScatterClientPage } from '@/components/embed/embed-scatter-client-page';
+
+export const metadata: Metadata = {
+  title: 'InferenceX Embed Scatter',
+  description: 'Embeddable InferenceX scatter chart.',
+  robots: { index: false, follow: false },
+};
+
+export default function EmbedScatterPage() {
+  return <EmbedScatterClientPage />;
+}
diff --git a/packages/app/src/app/layout.tsx b/packages/app/src/app/layout.tsx
@@ -4,6 +4,7 @@ import './globals.css';
 import { Analytics } from '@vercel/analytics/next';
 import { SpeedInsights } from '@vercel/speed-insights/next';
 import type { Metadata } from 'next';
+import { headers } from 'next/headers';
 import { DM_Sans } from 'next/font/google';
 import localFont from 'next/font/local';
 
@@ -168,6 +169,8 @@ export default async function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  const requestHeaders = await headers();
+  const isEmbedRoute = requestHeaders.get('x-inferencex-embed') === '1';
   const starCount = await fetchStarCount();
   return (
     <html lang="en" className={monocraft.variable} suppressHydrationWarning>
@@ -191,9 +194,9 @@ export default async function RootLayout({
               disableTransitionOnChange
             >
               <PostHogPageView />
-              <Header starCount={starCount} />
+              {!isEmbedRoute && <Header starCount={starCount} />}
               <div className="grow flex flex-col">{children}</div>
-              <Footer starCount={starCount} />
+              {!isEmbedRoute && <Footer starCount={starCount} />}
             </ThemeProvider>
           </QueryProvider>
           {process.env.VERCEL && <Analytics />}

diff --git a/packages/app/src/components/embed/embed-scatter-client-page.tsx b/packages/app/src/components/embed/embed-scatter-client-page.tsx
@@ -0,0 +1,16 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import { EmbedScatterView } from '@/components/embed/embed-scatter-view';
+
+export function EmbedScatterClientPage() {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) return null;
+  return <EmbedScatterView />;
+}
diff --git a/packages/app/src/components/embed/embed-scatter-view.tsx b/packages/app/src/components/embed/embed-scatter-view.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+import Link from 'next/link';
+import { useEffect, useMemo } from 'react';
+
+import { GlobalFilterProvider } from '@/components/GlobalFilterContext';
+import { InferenceProvider } from '@/components/inference/InferenceContext';
+import InferenceChartDisplay from '@/components/inference/ui/ChartDisplay';
+import { UnofficialRunProvider } from '@/components/unofficial-run-provider';
+import { track } from '@/lib/analytics';
+
+export function EmbedScatterView() {
+  useEffect(() => {
+    track('embed_view', {
+      embed_type: 'scatter',
+      referrer: typeof document !== 'undefined' && document.referrer ? document.referrer : 'direct',
+    });
+  }, []);
+
+  const canonicalHref = useMemo(() => {
+    if (typeof window === 'undefined') return '/inference';
+    const url = new URL(window.location.href);
+    url.pathname = '/inference';
+    return `${url.pathname}${url.search}`;
+  }, []);
+
+  return (
+    <main className="mx-auto w-full max-w-[1280px] p-2 sm:p-4">
+      <UnofficialRunProvider>
+        <GlobalFilterProvider>
+          <InferenceProvider activeTab="inference">
+            <InferenceChartDisplay />
+          </InferenceProvider>
+        </GlobalFilterProvider>
+      </UnofficialRunProvider>
+      <p className="mt-2 text-center text-xs text-muted-foreground">
+        Data by{' '}
+        <Link className="underline hover:text-foreground" href={canonicalHref} target="_blank">
+          SemiAnalysis InferenceX
+        </Link>
+      </p>
+    </main>
+  );
+}
diff --git a/packages/app/src/components/inference/ui/ChartDisplay.tsx b/packages/app/src/components/inference/ui/ChartDisplay.tsx
@@ -3,6 +3,7 @@ import { track } from '@/lib/analytics';
 import dynamic from 'next/dynamic';
 import { useMemo, useState } from 'react';
 import { BarChart3, ChevronDown, Table2, X } from 'lucide-react';
+import { usePathname, useSearchParams } from 'next/navigation';
 
 import chartDefinitions from '@/components/inference/inference-chart-config.json';
 import { useInference } from '@/components/inference/InferenceContext';
@@ -124,6 +125,11 @@ const VIEW_MODE_OPTIONS: SegmentedToggleOption<InferenceViewMode>[] = [
  * the current filtered benchmark data.
  */
 export default function ChartDisplay() {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const isEmbedRoute = pathname.startsWith('/embed/');
+  const embedChartType = searchParams.get('chart') === 'e2e' ? 'e2e' : 'interactivity';
+
   const {
     graphs,
     loading,
@@ -309,6 +315,10 @@ export default function ChartDisplay() {
     }));
   }, [graphs, overlayDataByChartType, selectedModel, selectedSequence]);
 
+  const graphsForRender = isEmbedRoute
+    ? effectiveGraphs.filter((graph) => graph.chartDefinition.chartType === embedChartType)
+    : effectiveGraphs;
+
   const displayGraphs = isFirstLoad
     ? Array.from({ length: 2 }).map((_, index) => (
         <Card key={`skeleton-${index}`}>
@@ -317,58 +327,73 @@ export default function ChartDisplay() {
           <Skeleton className="h-[600px] w-full" />
         </Card>
       ))
-    : effectiveGraphs.length === 0
+    : graphsForRender.length === 0
       ? []
-      : effectiveGraphs.map((graph, graphIndex) => (
+      : graphsForRender.map((graph, graphIndex) => (
           <section key={graphIndex} className="pt-8 md:pt-0">
             <figure data-testid="chart-figure" className="relative rounded-lg">
-              <ChartButtons
-                chartId={`chart-${graphIndex}`}
-                analyticsPrefix={
-                  selectedDateRange.startDate &&
-                  selectedDateRange.endDate &&
-                  selectedGPUs.length > 0
-                    ? 'gpu_timeseries'
-                    : graph.chartDefinition.chartType === 'e2e'
-                      ? 'latency'
-                      : 'interactivity'
-                }
-                leadingControls={
-                  <SegmentedToggle
-                    value={getViewMode(graphIndex)}
-                    options={VIEW_MODE_OPTIONS}
-                    onValueChange={(v) => handleViewModeChange(graphIndex, v)}
-                    ariaLabel="View mode"
-                    testId={`inference-view-toggle-${graphIndex}`}
-                  />
-                }
-                hideImageExport={getViewMode(graphIndex) === 'table'}
-                setIsLegendExpanded={setIsLegendExpanded}
-                exportFileName={`InferenceX_${selectedModel}_${graph.chartDefinition.chartType}`}
-                onExportCsv={() => {
-                  const isTimeline =
+              {!isEmbedRoute && (
+                <ChartButtons
+                  chartId={`chart-${graphIndex}`}
+                  analyticsPrefix={
                     selectedDateRange.startDate &&
                     selectedDateRange.endDate &&
-                    selectedGPUs.length > 0;
-                  const visibleData = graph.data.filter((d) =>
-                    isTimeline
-                      ? activeDates.has(`${d.date}_${d.hwKey}`)
-                      : activeHwTypes.has(d.hwKey as string) &&
-                        selectedPrecisions.includes(d.precision),
-                  );
-                  const { headers, rows } = inferenceChartToCsv(
-                    visibleData,
-                    graph.model,
-                    graph.sequence,
-                  );
-                  exportToCsv(
-                    `InferenceX_${selectedModel}_${graph.chartDefinition.chartType}`,
-                    headers,
-                    rows,
-                  );
-                }}
-              />
+                    selectedGPUs.length > 0
+                      ? 'gpu_timeseries'
+                      : graph.chartDefinition.chartType === 'e2e'
+                        ? 'latency'
+                        : 'interactivity'
+                  }
+                  leadingControls={
+                    <SegmentedToggle
+                      value={getViewMode(graphIndex)}
+                      options={VIEW_MODE_OPTIONS}
+                      onValueChange={(v) => handleViewModeChange(graphIndex, v)}
+                      ariaLabel="View mode"
+                      testId={`inference-view-toggle-${graphIndex}`}
+                    />
+                  }
+                  hideImageExport={getViewMode(graphIndex) === 'table'}
+                  setIsLegendExpanded={setIsLegendExpanded}
+                  exportFileName={`InferenceX_${selectedModel}_${graph.chartDefinition.chartType}`}
+                  onExportCsv={() => {
+                    const isTimeline =
+                      selectedDateRange.startDate &&
+                      selectedDateRange.endDate &&
+                      selectedGPUs.length > 0;
+                    const visibleData = graph.data.filter((d) =>
+                      isTimeline
+                        ? activeDates.has(`${d.date}_${d.hwKey}`)
+                        : activeHwTypes.has(d.hwKey as string) &&
+                          selectedPrecisions.includes(d.precision),
+                    );
+                    const { headers, rows } = inferenceChartToCsv(
+                      visibleData,
+                      graph.model,
+                      graph.sequence,
+                    );
+                    exportToCsv(
+                      `InferenceX_${selectedModel}_${graph.chartDefinition.chartType}`,
+                      headers,
+                      rows,
+                    );
+                  }}
+                />
+              )}
               <Card>
+                {isEmbedRoute && (
+                  <div className="pointer-events-none absolute top-2 right-2 z-20">
+                    <div className="pointer-events-auto">
+                      <SegmentedToggle
+                        value={getViewMode(graphIndex)}
+                        options={VIEW_MODE_OPTIONS}
+                        onValueChange={(v) => handleViewModeChange(graphIndex, v)}
+                        ariaLabel="Embed view mode"
+                        testId={`embed-inference-view-toggle-${graphIndex}`}
+                      />
+                    </div>
+                  </div>
+                )}
                 {(() => {
                   const chartCaption = (
                     <>
@@ -543,6 +568,14 @@ export default function ChartDisplay() {
           </section>
         ));
 
+  if (isEmbedRoute) {
+    return (
+      <div data-testid="inference-chart-display-embed" className="flex flex-col gap-4">
+        {displayGraphs}
+      </div>
+    );
+  }
+
   return (
     <div data-testid="inference-chart-display" className="flex flex-col gap-4">
       <section className="relative z-20">