fix(cadecon): keep x-axis aligned at iteration 0, null out placeholder values

All charts now share the same x-axis starting at 0 for cursor sync.
Per-cell trends (Alpha, Threshold, PVE, Event Rate) null out iteration 0
values so they aren't plotted but the axis aligns with the Kernel chart.
Kernel chart nulls out the residual at iteration 0 (placeholder 0).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: daharoni

apps/cadecon/src/components/charts/KernelConvergence.tsx

@@ -119,7 +119,7 @@ export function KernelConvergence(): JSX.Element {
       h.map((s) => s.iteration),
       h.map((s) => s.tauRise * 1000),
       h.map((s) => s.tauDecay * 1000),
-      h.map((s) => s.residual),
+      h.map((s) => (s.iteration === 0 ? null : s.residual)),
     ];
   });
 

apps/cadecon/src/components/charts/PerCellTrendsChart.tsx

@@ -41,10 +41,13 @@ export interface TrendsData {
   yMax: number;
 }
 
-/** Extract a numeric field from TraceResultEntry history into TrendsData. */
+/** Extract a numeric field from TraceResultEntry history into TrendsData.
+ *  When `skipZero` is true, iteration 0 is kept in the x-axis (so cursor
+ *  sync lines up across charts) but its values are null (not plotted). */
 export function deriveTrendsData(
   history: IterationHistoryEntry[],
   accessor: (entry: TraceResultEntry) => number,
+  skipZero = false,
 ): TrendsData {
   if (history.length === 0) {
     return {
@@ -80,10 +83,15 @@ export function deriveTrendsData(
   }
 
   for (let i = 0; i < history.length; i++) {
+    const isZero = skipZero && history[i].iteration === 0;
     const results = history[i].results;
     const values: number[] = [];
 
     for (const key of keys) {
+      if (isZero) {
+        perKey.get(key)!.push(null);
+        continue;
+      }
       const entry = results[key];
       const val = entry != null ? accessor(entry) : null;
       perKey.get(key)!.push(val);
@@ -94,7 +102,11 @@ export function deriveTrendsData(
       }
     }
 
-    if (values.length > 0) {
+    if (isZero) {
+      median.push(null as unknown as number);
+      q25.push(null as unknown as number);
+      q75.push(null as unknown as number);
+    } else if (values.length > 0) {
       const sorted = [...values].sort((a, b) => a - b);
       const mid = Math.floor(sorted.length / 2);
       median.push(sorted.length % 2 !== 0 ? sorted[mid] : (sorted[mid - 1] + sorted[mid]) / 2);
@@ -265,11 +277,9 @@ export interface PerCellTrendsChartProps {
 export function PerCellTrendsChart(props: PerCellTrendsChartProps): JSX.Element {
   const [uplotRef, setUplotRef] = createSignal<uPlot | null>(null);
 
-  const trendsData = createMemo(() => {
-    const skip = props.skipZero !== false; // default true
-    const history = skip ? iterationHistory().filter((h) => h.iteration > 0) : iterationHistory();
-    return deriveTrendsData(history, props.accessor);
-  });
+  const trendsData = createMemo(() =>
+    deriveTrendsData(iterationHistory(), props.accessor, props.skipZero !== false),
+  );
 
   // Redraw when overlay state changes
   createEffect(() => {