From 81eb72dae37bfdaef27555951e612ef37759ce08 Mon Sep 17 00:00:00 2001
From: adibarra <93070681+adibarra@users.noreply.github.com>
Date: Wed, 27 May 2026 12:23:12 -0500
Subject: [PATCH 01/11] perf(nudges): lazy-load FeedbackForm so 210-line modal
 leaves landing critical path

---
 packages/app/src/lib/nudges/registry.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/app/src/lib/nudges/registry.tsx b/packages/app/src/lib/nudges/registry.tsx
index e0e84dd5..ff9003ce 100644
--- a/packages/app/src/lib/nudges/registry.tsx
+++ b/packages/app/src/lib/nudges/registry.tsx
@@ -7,10 +7,18 @@ import {
   Sparkles,
   Star,
 } from 'lucide-react';
+import dynamic from 'next/dynamic';
 
 import { GITHUB_OWNER, GITHUB_REPO } from '@semianalysisai/inferencex-constants';
 
-import { FEEDBACK_SUBMITTED_EVENT, FeedbackForm } from '@/components/feedback-modal';
+import { FEEDBACK_SUBMITTED_EVENT } from '@/components/feedback-modal';
+
+// Keep the ~210-line FeedbackForm out of the landing/dashboard initial JS;
+// it only renders after the eligibility event fires (see feedback-modal nudge below).
+const FeedbackForm = dynamic(
+  () => import('@/components/feedback-modal').then((m) => m.FeedbackForm),
+  { ssr: false },
+);
 import { GitHubIcon } from '@/components/ui/github-icon';
 import { STARRED_EVENT, STARRED_KEY, saveStarred } from '@/lib/star-storage';
 import { FEEDBACK_ELIGIBLE_EVENT } from '@/lib/visit-tracking';

From 08219f62dcc761d0d6ab8aa76182406e39df880f Mon Sep 17 00:00:00 2001
From: adibarra <93070681+adibarra@users.noreply.github.com>
Date: Wed, 27 May 2026 12:23:40 -0500
Subject: [PATCH 02/11] refactor(compare): drop dead generateStaticParams under
 force-dynamic

---
 packages/app/src/app/compare-per-dollar/[slug]/page.tsx | 9 ---------
 packages/app/src/app/compare/[slug]/page.tsx            | 9 ---------
 2 files changed, 18 deletions(-)

diff --git a/packages/app/src/app/compare-per-dollar/[slug]/page.tsx b/packages/app/src/app/compare-per-dollar/[slug]/page.tsx
index deede577..b2b432e2 100644
--- a/packages/app/src/app/compare-per-dollar/[slug]/page.tsx
+++ b/packages/app/src/app/compare-per-dollar/[slug]/page.tsx
@@ -11,7 +11,6 @@ import {
   compareModelDisplayLabel,
   parseCompareSlug,
 } from '@/lib/compare-slug';
-import { getAllComparableCompareSlugs } from '@/lib/compare-availability';
 import { getGpuSpecs } from '@/lib/constants';
 import {
   buildBreadcrumbJsonLd,
@@ -36,14 +35,6 @@ interface Props {
   searchParams: Promise<Record<string, string | string[] | undefined>>;
 }
 
-export async function generateStaticParams() {
-  // Mirror the /compare route's static params — only (model, pair) combos with
-  // benchmark data on both sides. Direct URL hits to non-enumerated combos
-  // still render via the dynamic SSR path (with the empty-state fallback).
-  const slugs = await getAllComparableCompareSlugs();
-  return slugs.map(({ modelSlug, a, b }) => ({ slug: canonicalCompareSlug(modelSlug, a, b) }));
-}
-
 export async function generateMetadata({ params }: Props): Promise<Metadata> {
   const { slug } = await params;
   const parsed = parseCompareSlug(slug);
diff --git a/packages/app/src/app/compare/[slug]/page.tsx b/packages/app/src/app/compare/[slug]/page.tsx
index d6c660ec..9e09c691 100644
--- a/packages/app/src/app/compare/[slug]/page.tsx
+++ b/packages/app/src/app/compare/[slug]/page.tsx
@@ -11,7 +11,6 @@ import {
   compareModelDisplayLabel,
   parseCompareSlug,
 } from '@/lib/compare-slug';
-import { getAllComparableCompareSlugs } from '@/lib/compare-availability';
 import {
   buildBreadcrumbJsonLd,
   buildJsonLd,
@@ -35,14 +34,6 @@ interface Props {
   searchParams: Promise<Record<string, string | string[] | undefined>>;
 }
 
-export async function generateStaticParams() {
-  // Only enumerate (model, pair) combos with benchmark data on both sides.
-  // Direct URL hits to non-enumerated combos still render via the dynamic
-  // SSR path (with the empty-state fallback).
-  const slugs = await getAllComparableCompareSlugs();
-  return slugs.map(({ modelSlug, a, b }) => ({ slug: canonicalCompareSlug(modelSlug, a, b) }));
-}
-
 export async function generateMetadata({ params }: Props): Promise<Metadata> {
   const { slug } = await params;
   const parsed = parseCompareSlug(slug);

From 04da466af91f6773c85addee9cdae8aa38a5d575 Mon Sep 17 00:00:00 2001
From: adibarra <93070681+adibarra@users.noreply.github.com>
Date: Wed, 27 May 2026 12:23:49 -0500
Subject: [PATCH 03/11] fix(compare): lowercase slug before canonical-redirect
 check to stop 308 cache pollution

---
 packages/app/src/app/compare-per-dollar/[slug]/page.tsx | 4 +++-
 packages/app/src/app/compare/[slug]/page.tsx            | 5 ++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/app/src/app/compare-per-dollar/[slug]/page.tsx b/packages/app/src/app/compare-per-dollar/[slug]/page.tsx
index b2b432e2..b5feb98c 100644
--- a/packages/app/src/app/compare-per-dollar/[slug]/page.tsx
+++ b/packages/app/src/app/compare-per-dollar/[slug]/page.tsx
@@ -75,7 +75,9 @@ export default async function ComparePerDollarPage({ params, searchParams }: Pro
   // alias model resolution, GPU alphabetical order — but redirect target lives
   // under /compare-per-dollar/. Query string is preserved across the hop.
   const canonical = canonicalCompareSlug(parsed.model.slug, parsed.a, parsed.b);
-  if (canonical !== slug) {
+  // canonical is always lowercase; compare against lowercased input so mixed-case
+  // URLs don't emit a fresh 308 + CDN cache entry every hit.
+  if (canonical !== slug.toLowerCase()) {
     const qs = Object.entries(sp)
       .flatMap(([k, v]) => {
         if (Array.isArray(v)) return v.map((vv) => [k, vv] as const);
diff --git a/packages/app/src/app/compare/[slug]/page.tsx b/packages/app/src/app/compare/[slug]/page.tsx
index 9e09c691..b957028e 100644
--- a/packages/app/src/app/compare/[slug]/page.tsx
+++ b/packages/app/src/app/compare/[slug]/page.tsx
@@ -79,7 +79,10 @@ export default async function ComparePage({ params, searchParams }: Props) {
   // redirect — the original PR #351 redirect dropped these, but with bare slugs
   // now redirecting unconditionally we need to keep them.
   const canonical = canonicalCompareSlug(parsed.model.slug, parsed.a, parsed.b);
-  if (canonical !== slug) {
+  // canonical is always lowercase; compare against lowercased input so mixed-case
+  // URLs (e.g. /compare/H100-vs-H200) don't emit a fresh 308 + CDN cache entry
+  // every hit when they actually match the canonical content.
+  if (canonical !== slug.toLowerCase()) {
     const qs = Object.entries(sp)
       .flatMap(([k, v]) => {
         if (Array.isArray(v)) return v.map((vv) => [k, vv] as const);

From 73d558b7e85074338192caecd73950f53816a6fd Mon Sep 17 00:00:00 2001
From: adibarra <93070681+adibarra@users.noreply.github.com>
Date: Wed, 27 May 2026 12:23:58 -0500
Subject: [PATCH 04/11] fix(json-ld): escape >, & in addition to < per HTML5
 script-content spec

---
 packages/app/src/components/json-ld.test.ts | 18 ++++++++++++++++++
 packages/app/src/components/json-ld.tsx     | 10 +++++++---
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/packages/app/src/components/json-ld.test.ts b/packages/app/src/components/json-ld.test.ts
index 0cc9c819..34feaa4b 100644
--- a/packages/app/src/components/json-ld.test.ts
+++ b/packages/app/src/components/json-ld.test.ts
@@ -47,6 +47,24 @@ describe('JsonLd', () => {
     expect(JSON.parse(body)).toEqual(data);
   });
 
+  it('escapes > so an HTML parser cannot mistake a literal > for the end of a comment/CDATA', () => {
+    const data = { note: 'a > b' };
+    const html = render(data);
+    const body = scriptBody(html);
+    expect(body).toContain(String.raw`\u003e`);
+    expect(body).not.toContain('>');
+    expect(JSON.parse(body)).toEqual(data);
+  });
+
+  it('escapes & so the payload cannot smuggle entity references through the parser', () => {
+    const data = { note: 'Tom & Jerry' };
+    const html = render(data);
+    const body = scriptBody(html);
+    expect(body).toContain(String.raw`\u0026`);
+    expect(body).not.toContain('&');
+    expect(JSON.parse(body)).toEqual(data);
+  });
+
   it('does NOT HTML-escape quotes (Google would reject &quot; in JSON-LD)', () => {
     const html = render({ name: 'GB200' });
     const body = scriptBody(html);
diff --git a/packages/app/src/components/json-ld.tsx b/packages/app/src/components/json-ld.tsx
index dc02e327..10b4e055 100644
--- a/packages/app/src/components/json-ld.tsx
+++ b/packages/app/src/components/json-ld.tsx
@@ -1,6 +1,7 @@
 // Inline JSON-LD <script>. Emits raw JSON via dangerouslySetInnerHTML (React
-// children would HTML-escape the payload); the `<` swap blocks `</script>`
-// breakout if any string field ever contains one.
+// children would HTML-escape the payload). Escapes `<`, `>`, and `&` per the
+// HTML5 spec for `<script>` element contents — blocks `</script>` breakout and
+// keeps the payload valid if any string field ever contains one of those.
 export function JsonLd({ data }: { data: object }) {
   const json = JSON.stringify(data);
   if (!json) return null;
@@ -8,7 +9,10 @@ export function JsonLd({ data }: { data: object }) {
     <script
       type="application/ld+json"
       dangerouslySetInnerHTML={{
-        __html: json.replaceAll('<', String.raw`\u003c`),
+        __html: json
+          .replaceAll('<', String.raw`\u003c`)
+          .replaceAll('>', String.raw`\u003e`)
+          .replaceAll('&', String.raw`\u0026`),
       }}
     />
   );

From eb24ffc6ee29f0b8320db510639f163815f78c38 Mon Sep 17 00:00:00 2001
From: adibarra <93070681+adibarra@users.noreply.github.com>
Date: Wed, 27 May 2026 12:24:07 -0500
Subject: [PATCH 05/11] refactor(charts): typed AggDataEntry accessor for
 x-axis field instead of as-any

---
 .../src/components/inference/hooks/useChartData.ts   |  7 ++++++-
 .../src/components/inference/hooks/useTrendData.ts   | 12 ++++++++++--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/app/src/components/inference/hooks/useChartData.ts b/packages/app/src/components/inference/hooks/useChartData.ts
index beed5e0a..13b22951 100644
--- a/packages/app/src/components/inference/hooks/useChartData.ts
+++ b/packages/app/src/components/inference/hooks/useChartData.ts
@@ -306,7 +306,12 @@ export function useChartData(
               .map((d: InferenceData) => {
                 const yValue = (d[metricKey] as { y: number })?.y ?? d.y;
                 const roof = (d[metricKey] as { roof: boolean })?.roof ?? false;
-                const xValue = (d as any)[xAxisField] ?? d.x;
+                // xAxisField is `keyof AggDataEntry`; InferenceData embeds those
+                // fields via `Partial<Omit<AggDataEntry, ...>>`, so a typed
+                // accessor catches a future field rename (silent fallthrough to
+                // d.x would otherwise mask the regression).
+                const xCandidate = (d as Partial<AggDataEntry>)[xAxisField];
+                const xValue = typeof xCandidate === 'number' ? xCandidate : d.x;
                 return {
                   ...d,
                   x: xValue,
diff --git a/packages/app/src/components/inference/hooks/useTrendData.ts b/packages/app/src/components/inference/hooks/useTrendData.ts
index 868af23b..5e89014f 100644
--- a/packages/app/src/components/inference/hooks/useTrendData.ts
+++ b/packages/app/src/components/inference/hooks/useTrendData.ts
@@ -3,6 +3,7 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { sequenceToIslOsl } from '@semianalysisai/inferencex-constants';
 
 import type {
+  AggDataEntry,
   InferenceData,
   TrackedConfig,
   TrendDataPoint,
@@ -110,9 +111,16 @@ export function useTrendData(
           const metricObj = point[metricKey];
           if (!metricObj || typeof metricObj !== 'object' || !('y' in metricObj)) continue;
 
-          // Use the dynamic x-axis field if provided (e.g. TTFT instead of E2EL)
+          // Use the dynamic x-axis field if provided (e.g. TTFT instead of E2EL).
+          // Typed accessor: a future AggDataEntry field rename would silently fall
+          // through to point.x without this — narrow on `number` so non-scalar
+          // metric structs (roofline {y, roof}) can't sneak into the x-axis value.
           const xField = xAxisFieldByChartType?.[chartType];
-          const xValue = xField ? ((point as any)[xField] ?? point.x) : point.x;
+          let xValue = point.x;
+          if (xField) {
+            const xCandidate = (point as Partial<AggDataEntry>)[xField as keyof AggDataEntry];
+            if (typeof xCandidate === 'number') xValue = xCandidate;
+          }
 
           if (!accumulator.has(config.id)) accumulator.set(config.id, new Map());
           accumulator.get(config.id)!.set(date, {

From 638e8f78c25866c49a58af6812a7d75c8f4030d9 Mon Sep 17 00:00:00 2001
From: adibarra <93070681+adibarra@users.noreply.github.com>
Date: Wed, 27 May 2026 12:24:19 -0500
Subject: [PATCH 06/11] refactor(use-feature-gate): add relockFeatureGate
 helper and migrate 3 callers off bare event-name strings

---
 .../src/components/feedback-viewer/FeedbackViewer.tsx |  6 ++----
 .../app/src/components/gpu-power/GpuPowerDisplay.tsx  |  6 +++---
 .../src/components/submissions/SubmissionsDisplay.tsx |  6 ++----
 packages/app/src/lib/use-feature-gate.ts              | 11 +++++++++++
 4 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/packages/app/src/components/feedback-viewer/FeedbackViewer.tsx b/packages/app/src/components/feedback-viewer/FeedbackViewer.tsx
index 5e9c309f..0969e9d8 100644
--- a/packages/app/src/components/feedback-viewer/FeedbackViewer.tsx
+++ b/packages/app/src/components/feedback-viewer/FeedbackViewer.tsx
@@ -16,12 +16,11 @@ import {
 import { useFeedbackList } from '@/hooks/api/use-feedback-list';
 import type { FeedbackListRow } from '@/lib/api';
 import { track } from '@/lib/analytics';
+import { relockFeatureGate } from '@/lib/use-feature-gate';
 import { Button } from '@/components/ui/button';
 import { Card } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 
-const FEATURE_GATE_KEY = 'inferencex-feature-gate';
-
 interface DecryptedRow {
   id: string;
   createdAt: string;
@@ -132,8 +131,7 @@ export default function FeedbackViewer() {
             size="sm"
             className="h-7 gap-1.5 text-xs text-muted-foreground"
             onClick={() => {
-              localStorage.removeItem(FEATURE_GATE_KEY);
-              window.dispatchEvent(new Event('inferencex:feature-gate:locked'));
+              relockFeatureGate();
               track('feedback_viewer_relocked');
               router.push('/inference');
             }}
diff --git a/packages/app/src/components/gpu-power/GpuPowerDisplay.tsx b/packages/app/src/components/gpu-power/GpuPowerDisplay.tsx
index dbc1144b..31e2538b 100644
--- a/packages/app/src/components/gpu-power/GpuPowerDisplay.tsx
+++ b/packages/app/src/components/gpu-power/GpuPowerDisplay.tsx
@@ -22,6 +22,8 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 
+import { relockFeatureGate } from '@/lib/use-feature-gate';
+
 import GpuCorrelationChart from './GpuCorrelationChart';
 import GpuMetricsChart from './GpuPowerChart';
 import GpuStatsTable from './GpuStatsTable';
@@ -35,7 +37,6 @@ import {
 } from './types';
 
 const GPU_COLORS = d3.schemeTableau10;
-const FEATURE_GATE_KEY = 'inferencex-feature-gate';
 
 type GpuMetricsView = 'chart' | 'correlation';
 
@@ -248,8 +249,7 @@ export default function GpuMetricsDisplay() {
                 size="sm"
                 className="h-7 gap-1.5 text-xs text-muted-foreground"
                 onClick={() => {
-                  localStorage.removeItem(FEATURE_GATE_KEY);
-                  window.dispatchEvent(new Event('inferencex:feature-gate:locked'));
+                  relockFeatureGate();
                   track('powerx_relocked');
                   router.push('/inference');
                 }}
diff --git a/packages/app/src/components/submissions/SubmissionsDisplay.tsx b/packages/app/src/components/submissions/SubmissionsDisplay.tsx
index e224b08c..64ec75d7 100644
--- a/packages/app/src/components/submissions/SubmissionsDisplay.tsx
+++ b/packages/app/src/components/submissions/SubmissionsDisplay.tsx
@@ -13,6 +13,7 @@ import { SegmentedToggle, type SegmentedToggleOption } from '@/components/ui/seg
 import { exportToCsv } from '@/lib/csv-export';
 import { submissionsVolumeToCsv } from '@/lib/csv-export-helpers';
 import { useSubmissions } from '@/hooks/api/use-submissions';
+import { relockFeatureGate } from '@/lib/use-feature-gate';
 
 import SubmissionsChart, { type ChartMode } from './SubmissionsChart';
 import SubmissionsTable from './SubmissionsTable';
@@ -25,8 +26,6 @@ const SUBMISSIONS_CHART_MODE_OPTIONS: SegmentedToggleOption<ChartMode>[] = [
   { value: 'cumulative', label: 'Cumulative', testId: 'submissions-cumulative-btn' },
 ];
 
-const FEATURE_GATE_KEY = 'inferencex-feature-gate';
-
 export default function SubmissionsDisplay() {
   const router = useRouter();
   const { data, isLoading, error } = useSubmissions();
@@ -79,8 +78,7 @@ export default function SubmissionsDisplay() {
                 size="sm"
                 className="h-7 gap-1.5 text-xs text-muted-foreground"
                 onClick={() => {
-                  localStorage.removeItem(FEATURE_GATE_KEY);
-                  window.dispatchEvent(new Event('inferencex:feature-gate:locked'));
+                  relockFeatureGate();
                   track('submissions_relocked');
                   router.push('/inference');
                 }}
diff --git a/packages/app/src/lib/use-feature-gate.ts b/packages/app/src/lib/use-feature-gate.ts
index d940b31e..bfdb5311 100644
--- a/packages/app/src/lib/use-feature-gate.ts
+++ b/packages/app/src/lib/use-feature-gate.ts
@@ -20,6 +20,17 @@ const UNLOCK_SEQUENCE = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown'];
  * and any chart surface that should be visible only to insiders
  * until the underlying data is stable.
  */
+/**
+ * Re-lock the feature gate from any client surface. Owns the localStorage write
+ * and the cross-component event dispatch so callers don't need to know the
+ * key/event-name strings (which used to drift across three call sites).
+ */
+export function relockFeatureGate(): void {
+  if (typeof window === 'undefined') return;
+  localStorage.removeItem(FEATURE_GATE_KEY);
+  window.dispatchEvent(new Event(FEATURE_GATE_LOCKED_EVENT));
+}
+
 export function useFeatureGate(): boolean {
   const [unlocked, setUnlocked] = useState(false);
   const sequenceRef = useRef<string[]>([]);

From 6c916cb1d41519bdf23dcc7389afb5e48fcf7bb5 Mon Sep 17 00:00:00 2001
From: adibarra <93070681+adibarra@users.noreply.github.com>
Date: Wed, 27 May 2026 12:24:28 -0500
Subject: [PATCH 07/11] fix(historical-trends): propagate null for missing
 measured-power keys instead of flat-zero line

---
 .../hooks/useInterpolatedTrendData.test.ts    |  8 ++---
 .../hooks/useInterpolatedTrendData.ts         | 36 +++++++++++++++----
 2 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/packages/app/src/components/inference/hooks/useInterpolatedTrendData.test.ts b/packages/app/src/components/inference/hooks/useInterpolatedTrendData.test.ts
index 2be3e380..a0e17a1d 100644
--- a/packages/app/src/components/inference/hooks/useInterpolatedTrendData.test.ts
+++ b/packages/app/src/components/inference/hooks/useInterpolatedTrendData.test.ts
@@ -161,11 +161,11 @@ describe('interpolateMetricAtInteractivity', () => {
       makePoint({ x: 20, tpPerGpu: { y: 800, roof: false } }),
       makePoint({ x: 40, tpPerGpu: { y: 600, roof: false } }),
     ];
-    // jOutput is not set on these points — extractMetric returns null, so metric values are 0
+    // jOutput is not set on these points. Returning 0 would render a flat
+    // zero-line that looks like real data (the bug F4 fixed); return null
+    // so the trend chart can show a gap instead.
     const result = interpolateMetricAtInteractivity(points, 30, 'jOutput');
-    // With all metric values being 0, the result should be 0 (clamped from spline of zeros)
-    expect(result).not.toBeNull();
-    expect(result!).toBe(0);
+    expect(result).toBeNull();
   });
 
   it('handles two frontier points at close x values', () => {
diff --git a/packages/app/src/components/inference/hooks/useInterpolatedTrendData.ts b/packages/app/src/components/inference/hooks/useInterpolatedTrendData.ts
index 6158935a..e35dcd4b 100644
--- a/packages/app/src/components/inference/hooks/useInterpolatedTrendData.ts
+++ b/packages/app/src/components/inference/hooks/useInterpolatedTrendData.ts
@@ -15,7 +15,10 @@ import { rowToAggDataEntry } from '@/lib/benchmark-transform';
 import type { BenchmarkRow } from '@/lib/api';
 import type { Model, Sequence } from '@/lib/data-mappings';
 
-const wrapMetric = (n: number): { y: number } => ({ y: n });
+// Trend points never sit on a roofline — they're synthetic per-(date, config)
+// aggregates, not the per-load Pareto-frontier points the chart marks. Hardcode
+// roof:false so the field shape lines up with InferenceData without a cast.
+const wrapMetric = (n: number): { y: number; roof: boolean } => ({ y: n, roof: false });
 
 /**
  * Build a lightweight InferenceData-compatible point from a raw BenchmarkRow.
@@ -38,8 +41,11 @@ function rowToLightweightPoint(row: BenchmarkRow): InferenceData | null {
   const outTokPerHr = (outputTput * 3600) / 1_000_000;
   const inTokPerHr = (inputTput * 3600) / 1_000_000;
 
-  // Build metric objects matching InferenceData shape
-  return {
+  // Build metric objects matching InferenceData shape. Measured-power keys are
+  // only set when the runner-side aggregate_power.py emitted them — leaving the
+  // field undefined lets extractMetric return null and the trend show a real
+  // gap instead of a flat-zero line.
+  const point: InferenceData = {
     x: m.median_intvty ?? 0,
     y: tput,
     hwKey,
@@ -65,7 +71,17 @@ function rowToLightweightPoint(row: BenchmarkRow): InferenceData | null {
     jTotal: wrapMetric(power > 0 && tput ? (power * 1000) / tput : 0),
     ...(outputTput ? { jOutput: wrapMetric(power > 0 ? (power * 1000) / outputTput : 0) } : {}),
     ...(inputTput ? { jInput: wrapMetric(power > 0 ? (power * 1000) / inputTput : 0) } : {}),
-  } as unknown as InferenceData;
+    ...(typeof entry.avg_power_w === 'number'
+      ? { measuredAvgPower: { y: entry.avg_power_w, roof: false } }
+      : {}),
+    ...(typeof entry.joules_per_output_token === 'number'
+      ? { measuredJPerOutputToken: { y: entry.joules_per_output_token, roof: false } }
+      : {}),
+    ...(typeof entry.joules_per_total_token === 'number'
+      ? { measuredJPerTotalToken: { y: entry.joules_per_total_token, roof: false } }
+      : {}),
+  };
+  return point;
 }
 
 /**
@@ -104,9 +120,17 @@ export function interpolateMetricAtInteractivity(
       : null;
   }
 
-  // Extract metric values from frontier points
+  // Extract metric values from frontier points. If ANY point is missing the
+  // metric (e.g. measured-power keys on a row that predates aggregate_power.py),
+  // bail out — silently coercing nulls to zero would render a flat-zero trend
+  // line that looks like real data.
   const xs = sorted.map((p) => p.x);
-  const metricYs = sorted.map((p) => extractMetric(p, metricKey) ?? 0);
+  const metricYs: number[] = [];
+  for (const p of sorted) {
+    const v = extractMetric(p, metricKey);
+    if (v === null) return null;
+    metricYs.push(v);
+  }
 
   // Monotone cubic Hermite spline interpolation
   const slopes = monotoneSlopes(xs, metricYs);

From bed64f05600efeafb873a36fa8d1697210e670e2 Mon Sep 17 00:00:00 2001
From: adibarra <93070681+adibarra@users.noreply.github.com>
Date: Wed, 27 May 2026 12:24:38 -0500
Subject: [PATCH 08/11] feat(compare-per-dollar-png): try/catch around
 ImageResponse with server-side PostHog tag

---
 .../performance-per-dollar.png/route.tsx      | 616 +++++++++---------
 packages/app/src/lib/analytics-server.ts      |  37 ++
 2 files changed, 359 insertions(+), 294 deletions(-)
 create mode 100644 packages/app/src/lib/analytics-server.ts

diff --git a/packages/app/src/app/compare-per-dollar/[slug]/performance-per-dollar.png/route.tsx b/packages/app/src/app/compare-per-dollar/[slug]/performance-per-dollar.png/route.tsx
index 775f287c..0022785a 100644
--- a/packages/app/src/app/compare-per-dollar/[slug]/performance-per-dollar.png/route.tsx
+++ b/packages/app/src/app/compare-per-dollar/[slug]/performance-per-dollar.png/route.tsx
@@ -2,6 +2,7 @@ import { ImageResponse } from 'next/og';
 
 import { HW_REGISTRY } from '@semianalysisai/inferencex-constants';
 
+import { trackServer } from '@/lib/analytics-server';
 import { pickPairDefaults } from '@/lib/compare-pair-defaults';
 import { canonicalCompareSlug, parseCompareSlug } from '@/lib/compare-slug';
 import {
@@ -190,336 +191,363 @@ export async function GET(
     );
   }
 
-  return new ImageResponse(
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        width: SIZE.width,
-        height: SIZE.height,
-        padding: `${38 * R}px ${46 * R}px ${26 * R}px`,
-        background: COLORS.background,
-        color: COLORS.text,
-        fontFamily: 'Arial, sans-serif',
-      }}
-    >
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 7 * R }}>
+  try {
+    return new ImageResponse(
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          width: SIZE.width,
+          height: SIZE.height,
+          padding: `${38 * R}px ${46 * R}px ${26 * R}px`,
+          background: COLORS.background,
+          color: COLORS.text,
+          fontFamily: 'Arial, sans-serif',
+        }}
+      >
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 7 * R }}>
+            <div
+              style={{
+                display: 'flex',
+                fontSize: 19 * R,
+                fontWeight: 700,
+                letterSpacing: '0.13em',
+                textTransform: 'uppercase',
+                color: COLORS.blue,
+              }}
+            >
+              InferenceX Performance per Dollar
+            </div>
+            <div style={{ display: 'flex', fontSize: 41 * R, fontWeight: 800 }}>
+              {parsed.model.label}
+            </div>
+            <div style={{ display: 'flex', fontSize: 25 * R, color: COLORS.muted }}>
+              {aLabel} vs {bLabel} | Cost per Million Tokens
+            </div>
+          </div>
           <div
             style={{
               display: 'flex',
-              fontSize: 19 * R,
-              fontWeight: 700,
-              letterSpacing: '0.13em',
-              textTransform: 'uppercase',
-              color: COLORS.blue,
+              flexDirection: 'column',
+              alignItems: 'flex-end',
+              border: `${R}px solid ${COLORS.border}`,
+              borderRadius: 12 * R,
+              padding: `${13 * R}px ${17 * R}px`,
+              background: COLORS.panel,
+              gap: 5 * R,
             }}
           >
-            InferenceX Performance per Dollar
-          </div>
-          <div style={{ display: 'flex', fontSize: 41 * R, fontWeight: 800 }}>
-            {parsed.model.label}
-          </div>
-          <div style={{ display: 'flex', fontSize: 25 * R, color: COLORS.muted }}>
-            {aLabel} vs {bLabel} | Cost per Million Tokens
-          </div>
-        </div>
-        <div
-          style={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'flex-end',
-            border: `${R}px solid ${COLORS.border}`,
-            borderRadius: 12 * R,
-            padding: `${13 * R}px ${17 * R}px`,
-            background: COLORS.panel,
-            gap: 5 * R,
-          }}
-        >
-          <div style={{ display: 'flex', fontSize: 14 * R, color: COLORS.muted }}>
-            DEFAULT WORKLOAD
-          </div>
-          <div style={{ display: 'flex', fontSize: 21 * R, fontWeight: 700 }}>
-            {workload || 'Default comparison'}
-          </div>
-          <div style={{ display: 'flex', fontSize: 14 * R, color: COLORS.muted }}>
-            Lower cost is better
+            <div style={{ display: 'flex', fontSize: 14 * R, color: COLORS.muted }}>
+              DEFAULT WORKLOAD
+            </div>
+            <div style={{ display: 'flex', fontSize: 21 * R, fontWeight: 700 }}>
+              {workload || 'Default comparison'}
+            </div>
+            <div style={{ display: 'flex', fontSize: 14 * R, color: COLORS.muted }}>
+              Lower cost is better
+            </div>
           </div>
         </div>
-      </div>
 
-      <div style={{ display: 'flex', flex: 1, gap: 34 * R, marginTop: 22 * R }}>
-        <div style={{ display: 'flex', position: 'relative', width: svgWidth, height: svgHeight }}>
-          <svg
-            width={svgWidth}
-            height={svgHeight}
-            viewBox={`0 0 ${svgWidth} ${svgHeight}`}
-            style={{ position: 'absolute', left: 0, top: 0 }}
+        <div style={{ display: 'flex', flex: 1, gap: 34 * R, marginTop: 22 * R }}>
+          <div
+            style={{ display: 'flex', position: 'relative', width: svgWidth, height: svgHeight }}
           >
-            <rect
-              x={CHART_FRAME.left}
-              y={CHART_FRAME.top}
-              width={CHART_FRAME.width}
-              height={CHART_FRAME.height}
-              rx={13 * R}
-              fill={COLORS.panel}
-              stroke={COLORS.border}
-            />
-            {yAxis.ticks.map((tick) => {
-              const y = scaleY(tick);
-              return (
-                <line
-                  key={tick}
-                  x1={CHART.left}
-                  x2={CHART.left + CHART.width}
-                  y1={y}
-                  y2={y}
-                  stroke={COLORS.grid}
-                  strokeWidth={2 * R}
+            <svg
+              width={svgWidth}
+              height={svgHeight}
+              viewBox={`0 0 ${svgWidth} ${svgHeight}`}
+              style={{ position: 'absolute', left: 0, top: 0 }}
+            >
+              <rect
+                x={CHART_FRAME.left}
+                y={CHART_FRAME.top}
+                width={CHART_FRAME.width}
+                height={CHART_FRAME.height}
+                rx={13 * R}
+                fill={COLORS.panel}
+                stroke={COLORS.border}
+              />
+              {yAxis.ticks.map((tick) => {
+                const y = scaleY(tick);
+                return (
+                  <line
+                    key={tick}
+                    x1={CHART.left}
+                    x2={CHART.left + CHART.width}
+                    y1={y}
+                    y2={y}
+                    stroke={COLORS.grid}
+                    strokeWidth={2 * R}
+                  />
+                );
+              })}
+              {plottedRows.map((row) => {
+                const x = scaleX(row.target);
+                return (
+                  <line
+                    key={`mark-${row.target}`}
+                    x1={x}
+                    x2={x}
+                    y1={CHART.top + CHART.height}
+                    y2={CHART.top + CHART.height + 6 * R}
+                    stroke={COLORS.muted}
+                    strokeWidth={2 * R}
+                  />
+                );
+              })}
+              {renderSeriesPath(aSeries.leftExt, COLORS.a, true)}
+              {renderSeriesPath(aSeries.rightExt, COLORS.a, true)}
+              {renderSeriesPath(aSeries.matched, COLORS.a, false)}
+              {renderSeriesPath(bSeries.leftExt, COLORS.b, true)}
+              {renderSeriesPath(bSeries.rightExt, COLORS.b, true)}
+              {renderSeriesPath(bSeries.matched, COLORS.b, false)}
+              {aHighlightPoints.map((point, index) => (
+                <circle
+                  key={`a-${index}`}
+                  cx={point.x}
+                  cy={point.y}
+                  r={10 * R}
+                  fill={COLORS.a}
+                  stroke={COLORS.background}
+                  strokeWidth={4 * R}
                 />
-              );
-            })}
-            {plottedRows.map((row) => {
-              const x = scaleX(row.target);
-              return (
-                <line
-                  key={`mark-${row.target}`}
-                  x1={x}
-                  x2={x}
-                  y1={CHART.top + CHART.height}
-                  y2={CHART.top + CHART.height + 6 * R}
-                  stroke={COLORS.muted}
-                  strokeWidth={2 * R}
+              ))}
+              {bHighlightPoints.map((point, index) => (
+                <circle
+                  key={`b-${index}`}
+                  cx={point.x}
+                  cy={point.y}
+                  r={10 * R}
+                  fill={COLORS.b}
+                  stroke={COLORS.background}
+                  strokeWidth={4 * R}
                 />
-              );
-            })}
-            {renderSeriesPath(aSeries.leftExt, COLORS.a, true)}
-            {renderSeriesPath(aSeries.rightExt, COLORS.a, true)}
-            {renderSeriesPath(aSeries.matched, COLORS.a, false)}
-            {renderSeriesPath(bSeries.leftExt, COLORS.b, true)}
-            {renderSeriesPath(bSeries.rightExt, COLORS.b, true)}
-            {renderSeriesPath(bSeries.matched, COLORS.b, false)}
-            {aHighlightPoints.map((point, index) => (
-              <circle
-                key={`a-${index}`}
-                cx={point.x}
-                cy={point.y}
-                r={10 * R}
-                fill={COLORS.a}
-                stroke={COLORS.background}
-                strokeWidth={4 * R}
-              />
+              ))}
+            </svg>
+            {yAxis.ticks.map((tick) => (
+              <div
+                key={`y-label-${tick}`}
+                style={{
+                  display: 'flex',
+                  position: 'absolute',
+                  left: CHART_FRAME.left + 14 * R,
+                  top: scaleY(tick) - 9 * R,
+                  width: CHART.left - CHART_FRAME.left - 28 * R,
+                  justifyContent: 'flex-end',
+                  color: COLORS.muted,
+                  fontSize: 15 * R,
+                }}
+              >
+                {moneyForStep(tick, yStep)}
+              </div>
             ))}
-            {bHighlightPoints.map((point, index) => (
-              <circle
-                key={`b-${index}`}
-                cx={point.x}
-                cy={point.y}
-                r={10 * R}
-                fill={COLORS.b}
-                stroke={COLORS.background}
-                strokeWidth={4 * R}
-              />
+            {plottedRows.map((row) => (
+              <div
+                key={`x-label-${row.target}`}
+                style={{
+                  display: 'flex',
+                  position: 'absolute',
+                  left: scaleX(row.target) - 32 * R,
+                  top: CHART.top + CHART.height + 15 * R,
+                  width: 64 * R,
+                  justifyContent: 'center',
+                  color: COLORS.muted,
+                  fontSize: 16 * R,
+                  fontWeight: 600,
+                }}
+              >
+                {row.target}
+              </div>
             ))}
-          </svg>
-          {yAxis.ticks.map((tick) => (
-            <div
-              key={`y-label-${tick}`}
-              style={{
-                display: 'flex',
-                position: 'absolute',
-                left: CHART_FRAME.left + 14 * R,
-                top: scaleY(tick) - 9 * R,
-                width: CHART.left - CHART_FRAME.left - 28 * R,
-                justifyContent: 'flex-end',
-                color: COLORS.muted,
-                fontSize: 15 * R,
-              }}
-            >
-              {moneyForStep(tick, yStep)}
-            </div>
-          ))}
-          {plottedRows.map((row) => (
+            {showRangeEndpoints && hasLeftExtension && (
+              <div
+                style={{
+                  display: 'flex',
+                  position: 'absolute',
+                  left: scaleX(xMin) - 4 * R,
+                  top: CHART.top + CHART.height + 16 * R,
+                  width: 56 * R,
+                  justifyContent: 'flex-start',
+                  color: COLORS.faint,
+                  fontSize: 13 * R,
+                  fontStyle: 'italic',
+                }}
+              >
+                {Math.round(xMin)}
+              </div>
+            )}
+            {showRangeEndpoints && hasRightExtension && (
+              <div
+                style={{
+                  display: 'flex',
+                  position: 'absolute',
+                  left: scaleX(xMax) - 52 * R,
+                  top: CHART.top + CHART.height + 16 * R,
+                  width: 56 * R,
+                  justifyContent: 'flex-end',
+                  color: COLORS.faint,
+                  fontSize: 13 * R,
+                  fontStyle: 'italic',
+                }}
+              >
+                {Math.round(xMax)}
+              </div>
+            )}
             <div
-              key={`x-label-${row.target}`}
               style={{
                 display: 'flex',
                 position: 'absolute',
-                left: scaleX(row.target) - 32 * R,
-                top: CHART.top + CHART.height + 15 * R,
-                width: 64 * R,
+                left: CHART.left,
+                top: CHART.top + CHART.height + 38 * R,
+                width: CHART.width,
                 justifyContent: 'center',
                 color: COLORS.muted,
-                fontSize: 16 * R,
+                fontSize: 15 * R,
                 fontWeight: 600,
               }}
             >
-              {row.target}
+              Interactivity (tok/s/user)
             </div>
-          ))}
-          {showRangeEndpoints && hasLeftExtension && (
-            <div
-              style={{
-                display: 'flex',
-                position: 'absolute',
-                left: scaleX(xMin) - 4 * R,
-                top: CHART.top + CHART.height + 16 * R,
-                width: 56 * R,
-                justifyContent: 'flex-start',
-                color: COLORS.faint,
-                fontSize: 13 * R,
-                fontStyle: 'italic',
-              }}
-            >
-              {Math.round(xMin)}
-            </div>
-          )}
-          {showRangeEndpoints && hasRightExtension && (
-            <div
-              style={{
-                display: 'flex',
-                position: 'absolute',
-                left: scaleX(xMax) - 52 * R,
-                top: CHART.top + CHART.height + 16 * R,
-                width: 56 * R,
-                justifyContent: 'flex-end',
-                color: COLORS.faint,
-                fontSize: 13 * R,
-                fontStyle: 'italic',
-              }}
-            >
-              {Math.round(xMax)}
-            </div>
-          )}
+            {showRangeEndpoints && (
+              <div
+                style={{
+                  display: 'flex',
+                  position: 'absolute',
+                  left: CHART.left,
+                  top: CHART.top + CHART.height + 62 * R,
+                  width: CHART.width,
+                  justifyContent: 'center',
+                  color: COLORS.faint,
+                  fontSize: 13 * R,
+                  fontStyle: 'italic',
+                }}
+              >
+                Dashed segments extend to each SKU's operating envelope, where cost rises steeply
+              </div>
+            )}
+          </div>
+
           <div
             style={{
               display: 'flex',
-              position: 'absolute',
-              left: CHART.left,
-              top: CHART.top + CHART.height + 38 * R,
-              width: CHART.width,
-              justifyContent: 'center',
-              color: COLORS.muted,
-              fontSize: 15 * R,
-              fontWeight: 600,
+              flex: 1,
+              flexDirection: 'column',
+              gap: 17 * R,
+              paddingTop: 18 * R,
             }}
           >
-            Interactivity (tok/s/user)
-          </div>
-          {showRangeEndpoints && (
-            <div
-              style={{
-                display: 'flex',
-                position: 'absolute',
-                left: CHART.left,
-                top: CHART.top + CHART.height + 62 * R,
-                width: CHART.width,
-                justifyContent: 'center',
-                color: COLORS.faint,
-                fontSize: 13 * R,
-                fontStyle: 'italic',
-              }}
-            >
-              Dashed segments extend to each SKU's operating envelope, where cost rises steeply
+            <div style={{ display: 'flex', fontSize: 18 * R, fontWeight: 700 }}>
+              Matched Interactivity
             </div>
-          )}
+            <div style={{ display: 'flex', gap: 20 * R, fontSize: 15 * R, color: COLORS.muted }}>
+              <span style={{ display: 'flex', gap: 7 * R, alignItems: 'center' }}>
+                <span
+                  style={{
+                    display: 'flex',
+                    width: 19 * R,
+                    height: 6 * R,
+                    borderRadius: 3 * R,
+                    background: COLORS.a,
+                  }}
+                />
+                {aLabel}
+              </span>
+              <span style={{ display: 'flex', gap: 7 * R, alignItems: 'center' }}>
+                <span
+                  style={{
+                    display: 'flex',
+                    width: 19 * R,
+                    height: 6 * R,
+                    borderRadius: 3 * R,
+                    background: COLORS.b,
+                  }}
+                />
+                {bLabel}
+              </span>
+            </div>
+            {plottedRows.length > 0 ? (
+              plottedRows.map((row) => (
+                <div
+                  key={`row-${row.target}`}
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 6 * R,
+                    border: `${R}px solid ${COLORS.border}`,
+                    borderRadius: 10 * R,
+                    padding: `${11 * R}px ${13 * R}px`,
+                    background: COLORS.panel,
+                  }}
+                >
+                  <div style={{ display: 'flex', color: COLORS.muted, fontSize: 13 * R }}>
+                    {row.target} tok/s/user
+                  </div>
+                  <div style={{ display: 'flex', gap: 15 * R, fontSize: 19 * R, fontWeight: 700 }}>
+                    <span style={{ display: 'flex', color: COLORS.a }}>
+                      {row.a ? money(row.a.cost) : 'N/A'}
+                    </span>
+                    <span style={{ display: 'flex', color: COLORS.b }}>
+                      {row.b ? money(row.b.cost) : 'N/A'}
+                    </span>
+                  </div>
+                </div>
+              ))
+            ) : (
+              <div style={{ display: 'flex', fontSize: 18 * R, color: COLORS.muted }}>
+                No matched cost data available.
+              </div>
+            )}
+          </div>
         </div>
 
         <div
           style={{
             display: 'flex',
-            flex: 1,
-            flexDirection: 'column',
-            gap: 17 * R,
-            paddingTop: 18 * R,
+            justifyContent: 'space-between',
+            paddingTop: 9 * R,
+            fontSize: 15 * R,
+            color: COLORS.muted,
           }}
         >
-          <div style={{ display: 'flex', fontSize: 18 * R, fontWeight: 700 }}>
-            Matched Interactivity
-          </div>
-          <div style={{ display: 'flex', gap: 20 * R, fontSize: 15 * R, color: COLORS.muted }}>
-            <span style={{ display: 'flex', gap: 7 * R, alignItems: 'center' }}>
-              <span
-                style={{
-                  display: 'flex',
-                  width: 19 * R,
-                  height: 6 * R,
-                  borderRadius: 3 * R,
-                  background: COLORS.a,
-                }}
-              />
-              {aLabel}
-            </span>
-            <span style={{ display: 'flex', gap: 7 * R, alignItems: 'center' }}>
-              <span
-                style={{
-                  display: 'flex',
-                  width: 19 * R,
-                  height: 6 * R,
-                  borderRadius: 3 * R,
-                  background: COLORS.b,
-                }}
-              />
-              {bLabel}
-            </span>
-          </div>
-          {plottedRows.length > 0 ? (
-            plottedRows.map((row) => (
-              <div
-                key={`row-${row.target}`}
-                style={{
-                  display: 'flex',
-                  flexDirection: 'column',
-                  gap: 6 * R,
-                  border: `${R}px solid ${COLORS.border}`,
-                  borderRadius: 10 * R,
-                  padding: `${11 * R}px ${13 * R}px`,
-                  background: COLORS.panel,
-                }}
-              >
-                <div style={{ display: 'flex', color: COLORS.muted, fontSize: 13 * R }}>
-                  {row.target} tok/s/user
-                </div>
-                <div style={{ display: 'flex', gap: 15 * R, fontSize: 19 * R, fontWeight: 700 }}>
-                  <span style={{ display: 'flex', color: COLORS.a }}>
-                    {row.a ? money(row.a.cost) : 'N/A'}
-                  </span>
-                  <span style={{ display: 'flex', color: COLORS.b }}>
-                    {row.b ? money(row.b.cost) : 'N/A'}
-                  </span>
-                </div>
-              </div>
-            ))
-          ) : (
-            <div style={{ display: 'flex', fontSize: 18 * R, color: COLORS.muted }}>
-              No matched cost data available.
-            </div>
-          )}
+          <span style={{ display: 'flex' }}>
+            Owning-hyperscaler TCO | interpolated from benchmark results
+          </span>
+          <span style={{ display: 'flex', color: COLORS.text, fontWeight: 700 }}>
+            inferencex.semianalysis.com
+          </span>
         </div>
-      </div>
-
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          paddingTop: 9 * R,
-          fontSize: 15 * R,
-          color: COLORS.muted,
-        }}
-      >
-        <span style={{ display: 'flex' }}>
-          Owning-hyperscaler TCO | interpolated from benchmark results
-        </span>
-        <span style={{ display: 'flex', color: COLORS.text, fontWeight: 700 }}>
-          inferencex.semianalysis.com
-        </span>
-      </div>
-    </div>,
-    {
-      ...SIZE,
-      headers: {
-        'Cache-Control': 'public, s-maxage=3600, stale-while-revalidate=86400',
+      </div>,
+      {
+        ...SIZE,
+        headers: {
+          'Cache-Control': 'public, s-maxage=3600, stale-while-revalidate=86400',
+        },
       },
-    },
-  );
+    );
+  } catch (error) {
+    // Satori can throw on a font fetch failure, malformed JSX layout, or a
+    // dataset that produces NaN/Infinity geometry. Capture which slug broke so
+    // we can find broken categories before a crawler hits them — without this,
+    // failures only surface as opaque Vercel 500s.
+    const message = error instanceof Error ? error.message : String(error);
+    trackServer('compare_per_dollar_png_render_failed', {
+      slug,
+      model: parsed.model.slug,
+      a: parsed.a,
+      b: parsed.b,
+      sequence,
+      precision,
+      error_name: error instanceof Error ? error.name : 'Unknown',
+      error_message: message.slice(0, 500),
+    });
+    // 502 (not 500): the route itself is reachable, the downstream renderer
+    // failed. Short cache so a retry within the hour pulls a fixed render
+    // instead of pinning the failure.
+    return new Response('PNG render failed', {
+      status: 502,
+      headers: { 'Cache-Control': 'public, s-maxage=60' },
+    });
+  }
 }
diff --git a/packages/app/src/lib/analytics-server.ts b/packages/app/src/lib/analytics-server.ts
new file mode 100644
index 00000000..b8722a89
--- /dev/null
+++ b/packages/app/src/lib/analytics-server.ts
@@ -0,0 +1,37 @@
+/**
+ * Server-side PostHog event capture via the public /capture/ endpoint.
+ *
+ * Same wire format as posthog-node / posthog-js, but pulled into a tiny
+ * fire-and-forget fetch so we don't add a dependency for one-off route-handler
+ * observability. Falls back to console.error if NEXT_PUBLIC_POSTHOG_KEY isn't
+ * configured — we don't want a missing env var to silently swallow the signal
+ * (the local dev case where capture is intentionally disabled still hits the
+ * console fallback, which is what Vercel's runtime log expects).
+ */
+export function trackServer(eventName: string, properties?: Record<string, unknown>): void {
+  const key = process.env.NEXT_PUBLIC_POSTHOG_KEY;
+  if (!key) {
+    console.error(`[analytics-server] ${eventName}`, properties ?? {});
+    return;
+  }
+  const host = process.env.NEXT_PUBLIC_POSTHOG_HOST ?? 'https://us.i.posthog.com';
+  // Use a stable synthetic distinct_id for server events — no user context
+  // available at this layer, and the event is about server-side health, not
+  // a user action.
+  const body = JSON.stringify({
+    api_key: key,
+    event: eventName,
+    distinct_id: 'server',
+    properties: { ...properties, $lib: 'inferencex-server' },
+    timestamp: new Date().toISOString(),
+  });
+  fetch(`${host}/capture/`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body,
+    // Keep the route handler responsive — don't await PostHog's response.
+    keepalive: true,
+  }).catch((error: unknown) => {
+    console.error(`[analytics-server] capture failed for ${eventName}`, error);
+  });
+}

From abf7f9f1513edbd1ac3171c3baf876e300155e11 Mon Sep 17 00:00:00 2001
From: adibarra <93070681+adibarra@users.noreply.github.com>
Date: Wed, 27 May 2026 12:24:49 -0500
Subject: [PATCH 09/11] feat(feedback-api): server-side PostHog capture on
 E_CRYPTO and E_INSERT errors

---
 packages/app/src/app/api/v1/feedback/route.ts | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/packages/app/src/app/api/v1/feedback/route.ts b/packages/app/src/app/api/v1/feedback/route.ts
index f55e8458..58897538 100644
--- a/packages/app/src/app/api/v1/feedback/route.ts
+++ b/packages/app/src/app/api/v1/feedback/route.ts
@@ -5,6 +5,7 @@ import { utf8ToBytes } from '@noble/ciphers/utils.js';
 import { getWriteDb } from '@semianalysisai/inferencex-db/connection';
 import { type Cipher, createCipher, loadKey } from '@semianalysisai/inferencex-db/lib/encryption';
 
+import { trackServer } from '@/lib/analytics-server';
 import { parseFeedbackBody } from './parse';
 
 const aadFor = (column: string) => utf8ToBytes(`user_feedback:${column}`);
@@ -55,6 +56,7 @@ export async function POST(request: Request) {
     return new NextResponse(null, { status: 204 });
   }
 
+  const pagePath = body.pagePath ?? null;
   let cipher: Cipher;
   let sql: ReturnType<typeof getWriteDb>;
   try {
@@ -62,6 +64,12 @@ export async function POST(request: Request) {
     sql = getWriteDb();
   } catch (error) {
     console.error('feedback: misconfigured', error);
+    trackServer('feedback_submission_failed', {
+      error_code: 'E_CRYPTO',
+      error_name: error instanceof Error ? error.name : 'Unknown',
+      error_message: (error instanceof Error ? error.message : String(error)).slice(0, 500),
+      page_path: pagePath,
+    });
     return serverError('E_CRYPTO');
   }
 
@@ -94,6 +102,12 @@ export async function POST(request: Request) {
     `;
   } catch (error) {
     console.error('feedback: insert failed', error);
+    trackServer('feedback_submission_failed', {
+      error_code: 'E_INSERT',
+      error_name: error instanceof Error ? error.name : 'Unknown',
+      error_message: (error instanceof Error ? error.message : String(error)).slice(0, 500),
+      page_path: pagePath,
+    });
     return serverError('E_INSERT');
   }
 

From dfdad9ba0424e4de408ec89bde211f6844fff998 Mon Sep 17 00:00:00 2001
From: adibarra <93070681+adibarra@users.noreply.github.com>
Date: Wed, 27 May 2026 12:25:39 -0500
Subject: [PATCH 10/11] test(latest-image+use-feature-gate): extract pure
 helpers and add 29 unit tests

---
 .../latest-image/latest-image-content.tsx     |  76 ++-------
 .../latest-image/latest-image-utils.test.ts   | 132 ++++++++++++++++
 .../latest-image/latest-image-utils.ts        |  77 ++++++++++
 packages/app/src/lib/use-feature-gate.test.ts | 144 ++++++++++++++++++
 4 files changed, 362 insertions(+), 67 deletions(-)
 create mode 100644 packages/app/src/components/latest-image/latest-image-utils.test.ts
 create mode 100644 packages/app/src/components/latest-image/latest-image-utils.ts
 create mode 100644 packages/app/src/lib/use-feature-gate.test.ts

diff --git a/packages/app/src/components/latest-image/latest-image-content.tsx b/packages/app/src/components/latest-image/latest-image-content.tsx
index 7af29618..cb222361 100644
--- a/packages/app/src/components/latest-image/latest-image-content.tsx
+++ b/packages/app/src/components/latest-image/latest-image-content.tsx
@@ -16,17 +16,17 @@ import {
 import { TooltipProvider } from '@/components/ui/tooltip';
 import { useFrameworkReleases } from '@/hooks/api/use-framework-releases';
 import { useLatestImages } from '@/hooks/api/use-latest-images';
-import type { FrameworkReleases, LatestImageRow } from '@/lib/api';
+import type { LatestImageRow } from '@/lib/api';
 import { track } from '@/lib/analytics';
 import { getFrameworkLabel } from '@/lib/utils';
-
-/** Map framework variants to their base framework for release lookup. */
-const FRAMEWORK_TO_BASE: Record<string, string> = {
-  vllm: 'vllm',
-  sglang: 'sglang',
-  'dynamo-sglang': 'sglang',
-  'mori-sglang': 'sglang',
-};
+import {
+  AGE_MAX_RED_DAYS,
+  ageColorStyle,
+  ageRowStyle,
+  daysSince,
+  getActualLatestTag,
+  isOutdated,
+} from './latest-image-utils';
 
 /**
  * Disaggregated frameworks pair a separate prefill/decode pool — identified by
@@ -83,64 +83,6 @@ function formatSpecMethod(method: string) {
   return method === 'none' ? 'Off' : method.toUpperCase();
 }
 
-function getActualLatestTag(framework: string, releases: FrameworkReleases | undefined) {
-  if (!releases) return null;
-  const base = FRAMEWORK_TO_BASE[framework];
-  if (!base) return null;
-  return releases[base] ?? null;
-}
-
-const UNSTABLE_PATTERNS = ['nightly', 'rocm/sgl-dev', 'sglang-rocm'];
-
-/** Whole-day delta between today (UTC) and an ISO date string (YYYY-MM-DD). */
-function daysSince(dateStr: string, today: Date): number {
-  const submitted = new Date(`${dateStr}T00:00:00Z`).getTime();
-  const ms = today.getTime() - submitted;
-  return Math.max(0, Math.floor(ms / 86_400_000));
-}
-
-/** Age past which the cell is rendered at max red — anything older looks identical. */
-const AGE_MAX_RED_DAYS = 60;
-
-/**
- * Returns inline style for the Days-Since-Update cell so older rows scream
- * louder visually. Ramps from a subtle red at 1 day to deep red at 60 days
- * (then clamps); 0-day rows return `undefined` so the cell falls back to the
- * muted-foreground class.
- */
-function ageColorStyle(days: number): React.CSSProperties | undefined {
-  if (days < 1) return undefined;
-  const t = Math.min(AGE_MAX_RED_DAYS, days) / AGE_MAX_RED_DAYS; // 0.017 … 1
-  // Perceptually-uniform OKLCH ramp at hue 25 (red): lightness drops as
-  // chroma rises, so the cell goes from light pink to saturated dark red.
-  const L = 0.78 - 0.28 * t;
-  const C = 0.12 + 0.12 * t;
-  return { color: `oklch(${L.toFixed(3)} ${C.toFixed(3)} 25)` };
-}
-
-/**
- * Companion to `ageColorStyle` for the whole row's background tint — same
- * 1d → 60d ramp but expressed as a low-alpha fill so the row content stays
- * readable. 0-day rows return `undefined` so the row falls back to its
- * hover-only class background.
- */
-function ageRowStyle(days: number): React.CSSProperties | undefined {
-  if (days < 1) return undefined;
-  const t = Math.min(AGE_MAX_RED_DAYS, days) / AGE_MAX_RED_DAYS;
-  // Alpha tops out around 0.28 — enough that 60d+ rows are unmistakably
-  // tinted without drowning out the text or competing with hover affordance.
-  const alpha = (0.04 + 0.24 * t).toFixed(3);
-  return { backgroundColor: `oklch(0.60 0.22 25 / ${alpha})` };
-}
-
-/** Check if the image tag is outdated or uses an unstable/dev image. */
-function isOutdated(image: string, actualLatest: string | null): boolean {
-  const lower = image.toLowerCase();
-  if (UNSTABLE_PATTERNS.some((p) => lower.includes(p))) return true;
-  if (!actualLatest) return false;
-  return !image.includes(actualLatest);
-}
-
 export function CurrentImageContent() {
   const { data, isLoading, error } = useLatestImages();
   const { data: releases } = useFrameworkReleases();
diff --git a/packages/app/src/components/latest-image/latest-image-utils.test.ts b/packages/app/src/components/latest-image/latest-image-utils.test.ts
new file mode 100644
index 00000000..f40fc2a2
--- /dev/null
+++ b/packages/app/src/components/latest-image/latest-image-utils.test.ts
@@ -0,0 +1,132 @@
+import { describe, expect, it } from 'vitest';
+
+import {
+  AGE_MAX_RED_DAYS,
+  ageColorStyle,
+  ageRowStyle,
+  daysSince,
+  getActualLatestTag,
+  isOutdated,
+} from './latest-image-utils';
+
+const lightnessOf = (s: string) => Number(s.match(/oklch\(([\d.]+)/u)?.[1] ?? Number.NaN);
+const alphaOf = (s: string) => Number(s.match(/\/ ([\d.]+)\)/u)?.[1] ?? Number.NaN);
+
+describe('daysSince', () => {
+  it('returns 0 for today', () => {
+    const today = new Date('2026-05-27T12:34:56Z');
+    expect(daysSince('2026-05-27', today)).toBe(0);
+  });
+
+  it('returns whole days for dates strictly in the past', () => {
+    const today = new Date('2026-05-27T00:00:00Z');
+    expect(daysSince('2026-05-26', today)).toBe(1);
+    expect(daysSince('2026-05-20', today)).toBe(7);
+    expect(daysSince('2026-03-28', today)).toBe(60);
+  });
+
+  it('floors to whole days regardless of intraday hour offset', () => {
+    // The submitted-day anchor is 00:00Z; an early-morning "today" still
+    // belongs to the same UTC day, so 23:59 vs 00:01 must round identically.
+    const today = new Date('2026-05-28T00:01:00Z');
+    expect(daysSince('2026-05-27', today)).toBe(1);
+    const lateToday = new Date('2026-05-28T23:59:00Z');
+    expect(daysSince('2026-05-27', lateToday)).toBe(1);
+  });
+
+  it('clamps at 0 for future-dated submissions (never returns negative)', () => {
+    const today = new Date('2026-05-27T00:00:00Z');
+    expect(daysSince('2026-06-01', today)).toBe(0);
+  });
+});
+
+describe('ageColorStyle', () => {
+  it('returns undefined for 0-day rows so the muted-foreground class wins', () => {
+    expect(ageColorStyle(0)).toBeUndefined();
+  });
+
+  it('returns an oklch color for 1d and ramps toward darker red at AGE_MAX_RED_DAYS', () => {
+    const oneDay = ageColorStyle(1);
+    const maxDay = ageColorStyle(AGE_MAX_RED_DAYS);
+    expect(oneDay?.color).toMatch(/^oklch\(/u);
+    expect(maxDay?.color).toMatch(/^oklch\(/u);
+    // Lightness L drops as days grow; AGE_MAX_RED_DAYS sits at L≈0.50, 1d at L≈0.77.
+    expect(lightnessOf(maxDay!.color as string)).toBeLessThan(lightnessOf(oneDay!.color as string));
+  });
+
+  it('clamps anything past AGE_MAX_RED_DAYS to the same color (no extrapolation past the ramp)', () => {
+    const at60 = ageColorStyle(AGE_MAX_RED_DAYS);
+    const at365 = ageColorStyle(365);
+    expect(at60).toEqual(at365);
+  });
+});
+
+describe('ageRowStyle', () => {
+  it('returns undefined for 0-day rows', () => {
+    expect(ageRowStyle(0)).toBeUndefined();
+  });
+
+  it('returns a low-alpha oklch background that ramps from ~0.04 to ~0.28', () => {
+    const oneDay = ageRowStyle(1);
+    const maxDay = ageRowStyle(AGE_MAX_RED_DAYS);
+    const a1 = alphaOf(oneDay!.backgroundColor as string);
+    const aMax = alphaOf(maxDay!.backgroundColor as string);
+    expect(a1).toBeGreaterThan(0);
+    expect(a1).toBeLessThan(0.1);
+    expect(aMax).toBeGreaterThan(0.2);
+    expect(aMax).toBeLessThanOrEqual(0.3);
+  });
+
+  it('clamps past AGE_MAX_RED_DAYS so a 1y-old row looks identical to a 60d row', () => {
+    expect(ageRowStyle(AGE_MAX_RED_DAYS)).toEqual(ageRowStyle(365));
+  });
+});
+
+describe('isOutdated', () => {
+  it('is false when image contains the latest tag', () => {
+    expect(isOutdated('sgl-project/sglang:v0.5.12-cu130', 'v0.5.12')).toBe(false);
+  });
+
+  it('is true when image does not contain the latest tag', () => {
+    expect(isOutdated('sgl-project/sglang:v0.5.10-cu130', 'v0.5.12')).toBe(true);
+  });
+
+  it('is true for nightly tags regardless of latest', () => {
+    expect(isOutdated('sgl-project/sglang:nightly', 'v0.5.12')).toBe(true);
+    expect(isOutdated('sgl-project/sglang:nightly', null)).toBe(true);
+  });
+
+  it('is true for rocm/sgl-dev and sglang-rocm patterns (case-insensitive)', () => {
+    expect(isOutdated('rocm/sgl-dev:latest', 'v0.5.12')).toBe(true);
+    expect(isOutdated('ROCM/SGL-DEV:foo', 'v0.5.12')).toBe(true);
+    expect(isOutdated('myreg/sglang-rocm:bar', 'v0.5.12')).toBe(true);
+  });
+
+  it('is false when actualLatest is null and tag is not in UNSTABLE_PATTERNS', () => {
+    // No release data → can't classify as outdated. Avoid red-flagging a row
+    // we have no ground truth for.
+    expect(isOutdated('vllm/vllm-openai:v0.21.0', null)).toBe(false);
+  });
+});
+
+describe('getActualLatestTag', () => {
+  it('looks up the base framework from FRAMEWORK_TO_BASE and returns its release', () => {
+    const releases = { vllm: 'v0.21.0', sglang: 'v0.5.12' };
+    expect(getActualLatestTag('vllm', releases)).toBe('v0.21.0');
+    expect(getActualLatestTag('sglang', releases)).toBe('v0.5.12');
+    expect(getActualLatestTag('dynamo-sglang', releases)).toBe('v0.5.12');
+    expect(getActualLatestTag('mori-sglang', releases)).toBe('v0.5.12');
+  });
+
+  it('returns null when releases is undefined (API still loading)', () => {
+    expect(getActualLatestTag('vllm', undefined)).toBeNull();
+  });
+
+  it('returns null for an unknown framework (no base mapping)', () => {
+    expect(getActualLatestTag('trt', { vllm: 'v0.21.0', sglang: 'v0.5.12' })).toBeNull();
+  });
+
+  it('returns null when the base release is missing from the releases map', () => {
+    expect(getActualLatestTag('vllm', { sglang: 'v0.5.12' })).toBeNull();
+  });
+});
diff --git a/packages/app/src/components/latest-image/latest-image-utils.ts b/packages/app/src/components/latest-image/latest-image-utils.ts
new file mode 100644
index 00000000..da0d6be4
--- /dev/null
+++ b/packages/app/src/components/latest-image/latest-image-utils.ts
@@ -0,0 +1,77 @@
+import type { CSSProperties } from 'react';
+
+import type { FrameworkReleases } from '@/lib/api';
+
+/** Map framework variants to their base framework for release lookup. */
+export const FRAMEWORK_TO_BASE: Record<string, string> = {
+  vllm: 'vllm',
+  sglang: 'sglang',
+  'dynamo-sglang': 'sglang',
+  'mori-sglang': 'sglang',
+};
+
+/**
+ * Substrings that mark an image tag as unstable / pre-release. Lowercased
+ * comparison — kept here (not inlined) so tests can re-import and stay in
+ * sync with the runtime classifier.
+ */
+export const UNSTABLE_PATTERNS = ['nightly', 'rocm/sgl-dev', 'sglang-rocm'];
+
+/** Age past which the cell is rendered at max red — anything older looks identical. */
+export const AGE_MAX_RED_DAYS = 60;
+
+/** Whole-day delta between today (UTC) and an ISO date string (YYYY-MM-DD). */
+export function daysSince(dateStr: string, today: Date): number {
+  const submitted = new Date(`${dateStr}T00:00:00Z`).getTime();
+  const ms = today.getTime() - submitted;
+  return Math.max(0, Math.floor(ms / 86_400_000));
+}
+
+/**
+ * Inline style for the Days-Since-Update cell so older rows scream louder
+ * visually. Ramps from a subtle red at 1 day to deep red at 60 days (then
+ * clamps); 0-day rows return `undefined` so the cell falls back to the
+ * muted-foreground class.
+ */
+export function ageColorStyle(days: number): CSSProperties | undefined {
+  if (days < 1) return undefined;
+  const t = Math.min(AGE_MAX_RED_DAYS, days) / AGE_MAX_RED_DAYS;
+  // Perceptually-uniform OKLCH ramp at hue 25 (red): lightness drops as
+  // chroma rises, so the cell goes from light pink to saturated dark red.
+  const L = 0.78 - 0.28 * t;
+  const C = 0.12 + 0.12 * t;
+  return { color: `oklch(${L.toFixed(3)} ${C.toFixed(3)} 25)` };
+}
+
+/**
+ * Companion to ageColorStyle for the whole row's background tint — same
+ * 1d → 60d ramp but expressed as a low-alpha fill so the row content stays
+ * readable. 0-day rows return undefined so the row falls back to its
+ * hover-only class background.
+ */
+export function ageRowStyle(days: number): CSSProperties | undefined {
+  if (days < 1) return undefined;
+  const t = Math.min(AGE_MAX_RED_DAYS, days) / AGE_MAX_RED_DAYS;
+  // Alpha tops out around 0.28 — enough that 60d+ rows are unmistakably
+  // tinted without drowning out the text or competing with hover affordance.
+  const alpha = (0.04 + 0.24 * t).toFixed(3);
+  return { backgroundColor: `oklch(0.60 0.22 25 / ${alpha})` };
+}
+
+/** Check if the image tag is outdated or uses an unstable/dev image. */
+export function isOutdated(image: string, actualLatest: string | null): boolean {
+  const lower = image.toLowerCase();
+  if (UNSTABLE_PATTERNS.some((p) => lower.includes(p))) return true;
+  if (!actualLatest) return false;
+  return !image.includes(actualLatest);
+}
+
+export function getActualLatestTag(
+  framework: string,
+  releases: FrameworkReleases | undefined,
+): string | null {
+  if (!releases) return null;
+  const base = FRAMEWORK_TO_BASE[framework];
+  if (!base) return null;
+  return releases[base] ?? null;
+}
diff --git a/packages/app/src/lib/use-feature-gate.test.ts b/packages/app/src/lib/use-feature-gate.test.ts
new file mode 100644
index 00000000..8ada9222
--- /dev/null
+++ b/packages/app/src/lib/use-feature-gate.test.ts
@@ -0,0 +1,144 @@
+// @vitest-environment jsdom
+import { act, createElement } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+// analytics.track lazy-imports posthog-js, which is irrelevant here — stub it
+// out so an unlock side-effect doesn't fire a network call in jsdom.
+vi.mock('@/lib/analytics', () => ({ track: vi.fn() }));
+
+import {
+  FEATURE_GATE_KEY,
+  FEATURE_GATE_LOCKED_EVENT,
+  FEATURE_GATE_UNLOCKED_EVENT,
+  relockFeatureGate,
+  useFeatureGate,
+} from './use-feature-gate';
+
+// Lightweight renderHook — TLR isn't installed, so we mount a 1-component root
+// and capture the latest hook return value in a ref-style object.
+function renderHook<T>(hook: () => T): { result: { current: T }; unmount: () => void; root: Root } {
+  const result = { current: undefined as unknown as T };
+  function TestComponent() {
+    result.current = hook();
+    return null;
+  }
+  const container = document.createElement('div');
+  document.body.append(container);
+  const root = createRoot(container);
+  act(() => {
+    root.render(createElement(TestComponent));
+  });
+  return {
+    result,
+    unmount: () => {
+      act(() => root.unmount());
+      container.remove();
+    },
+    root,
+  };
+}
+
+afterEach(() => {
+  localStorage.clear();
+  vi.restoreAllMocks();
+});
+
+describe('relockFeatureGate', () => {
+  it('removes the localStorage key', () => {
+    localStorage.setItem(FEATURE_GATE_KEY, '1');
+    relockFeatureGate();
+    expect(localStorage.getItem(FEATURE_GATE_KEY)).toBeNull();
+  });
+
+  it('dispatches FEATURE_GATE_LOCKED_EVENT so other hook consumers re-render', () => {
+    const handler = vi.fn();
+    window.addEventListener(FEATURE_GATE_LOCKED_EVENT, handler);
+    relockFeatureGate();
+    expect(handler).toHaveBeenCalledTimes(1);
+    window.removeEventListener(FEATURE_GATE_LOCKED_EVENT, handler);
+  });
+
+  it('is idempotent — calling twice still ends with no key and one event each call', () => {
+    const handler = vi.fn();
+    window.addEventListener(FEATURE_GATE_LOCKED_EVENT, handler);
+    relockFeatureGate();
+    relockFeatureGate();
+    expect(localStorage.getItem(FEATURE_GATE_KEY)).toBeNull();
+    expect(handler).toHaveBeenCalledTimes(2);
+    window.removeEventListener(FEATURE_GATE_LOCKED_EVENT, handler);
+  });
+});
+
+describe('useFeatureGate', () => {
+  it('starts locked when localStorage has no entry', () => {
+    const { result, unmount } = renderHook(() => useFeatureGate());
+    expect(result.current).toBe(false);
+    unmount();
+  });
+
+  it('rehydrates to true on mount when localStorage already holds the unlock flag', () => {
+    localStorage.setItem(FEATURE_GATE_KEY, '1');
+    const { result, unmount } = renderHook(() => useFeatureGate());
+    expect(result.current).toBe(true);
+    unmount();
+  });
+
+  it('unlocks after the ↑↑↓↓ keydown sequence and persists to localStorage', () => {
+    const { result, unmount } = renderHook(() => useFeatureGate());
+    expect(result.current).toBe(false);
+    act(() => {
+      for (const key of ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown']) {
+        window.dispatchEvent(new KeyboardEvent('keydown', { key }));
+      }
+    });
+    expect(result.current).toBe(true);
+    expect(localStorage.getItem(FEATURE_GATE_KEY)).toBe('1');
+    unmount();
+  });
+
+  it('ignores partial / out-of-order sequences', () => {
+    const { result, unmount } = renderHook(() => useFeatureGate());
+    act(() => {
+      // Reversed direction — must not unlock.
+      for (const key of ['ArrowDown', 'ArrowDown', 'ArrowUp', 'ArrowUp']) {
+        window.dispatchEvent(new KeyboardEvent('keydown', { key }));
+      }
+    });
+    expect(result.current).toBe(false);
+    expect(localStorage.getItem(FEATURE_GATE_KEY)).toBeNull();
+    unmount();
+  });
+
+  it('accepts the sequence even when wrapped in noise (sliding window of last 4 keys)', () => {
+    const { result, unmount } = renderHook(() => useFeatureGate());
+    act(() => {
+      for (const key of ['a', 'b', 'ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown']) {
+        window.dispatchEvent(new KeyboardEvent('keydown', { key }));
+      }
+    });
+    expect(result.current).toBe(true);
+    unmount();
+  });
+
+  it('flips back to locked when FEATURE_GATE_LOCKED_EVENT fires (e.g. via relockFeatureGate)', () => {
+    localStorage.setItem(FEATURE_GATE_KEY, '1');
+    const { result, unmount } = renderHook(() => useFeatureGate());
+    expect(result.current).toBe(true);
+    act(() => {
+      relockFeatureGate();
+    });
+    expect(result.current).toBe(false);
+    unmount();
+  });
+
+  it('flips to unlocked when FEATURE_GATE_UNLOCKED_EVENT fires from another tab/component', () => {
+    const { result, unmount } = renderHook(() => useFeatureGate());
+    expect(result.current).toBe(false);
+    act(() => {
+      window.dispatchEvent(new Event(FEATURE_GATE_UNLOCKED_EVENT));
+    });
+    expect(result.current).toBe(true);
+    unmount();
+  });
+});

From 7c171aa7b448cb4243f898224873be81d2bfde1a Mon Sep 17 00:00:00 2001
From: adibarra <93070681+adibarra@users.noreply.github.com>
Date: Wed, 27 May 2026 13:06:59 -0500
Subject: [PATCH 11/11] chore(scripts): reorder lint:fix flags and add
 --no-error-on-unmatched-pattern to fmt/fmt:fix

---
 package.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 26e582f4..a4cabfce 100644
--- a/package.json
+++ b/package.json
@@ -18,9 +18,9 @@
     "typecheck": "tsc --noEmit",
     "security": "pnpm audit && audit-ci",
     "lint": "oxlint --no-error-on-unmatched-pattern",
-    "lint:fix": "oxlint --no-error-on-unmatched-pattern --fix",
-    "fmt": "oxfmt --check",
-    "fmt:fix": "oxfmt --write",
+    "lint:fix": "oxlint --fix --no-error-on-unmatched-pattern",
+    "fmt": "oxfmt --check --no-error-on-unmatched-pattern",
+    "fmt:fix": "oxfmt --write --no-error-on-unmatched-pattern",
     "test": "pnpm --filter *app --color=always test",
     "test:e2e": "pnpm --filter *app --color=always test:e2e",
     "test:e2e:component": "pnpm --filter *app --color=always test:e2e:component",