refactor(cadecon): CSS grid layout, Nyquist floor, kernel/threshold improvements

- Switch viz layout to 3-column CSS grid (raster+kernel 1col, convergence+trace 2col)
- Add Nyquist floor (2/fs) to biexp fitter grid search and golden-section refinement
- Disable residual-patience early stopping (needs better stopping metric)
- Extend kernel estimation and threshold search with additional parameters
- Rebuild WASM with solver changes

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

Author: daharoni

apps/cadecon/src/App.tsx

@@ -146,34 +146,28 @@ const App: Component = () => {
           }
         >
           <div class="viz-grid">
-            {/* Row 1: Raster + Kernel Convergence */}
-            <div class="viz-grid__row viz-grid__row--top">
-              <DashboardPanel id="raster" variant="data" class="viz-grid__col--raster raster-panel">
-                <p class="panel-label">Raster Overview</p>
-                <RasterOverview />
-              </DashboardPanel>
+            <DashboardPanel id="raster" variant="data" class="viz-grid__col--raster raster-panel">
+              <p class="panel-label">Raster Overview</p>
+              <RasterOverview />
+            </DashboardPanel>
 
-              <DashboardPanel
-                id="kernel-convergence"
-                variant="data"
-                class="viz-grid__col--convergence"
-              >
-                <ConvergencePanel />
-              </DashboardPanel>
-            </div>
+            <DashboardPanel
+              id="kernel-convergence"
+              variant="data"
+              class="viz-grid__col--convergence"
+            >
+              <ConvergencePanel />
+            </DashboardPanel>
 
-            {/* Row 2: Kernel Display + Trace Viewer */}
-            <div class="viz-grid__row viz-grid__row--middle">
-              <DashboardPanel id="kernel-display" variant="data" class="viz-grid__col--kernel">
-                <p class="panel-label">Kernel Shape</p>
-                <KernelDisplay />
-              </DashboardPanel>
+            <DashboardPanel id="kernel-display" variant="data" class="viz-grid__col--kernel">
+              <p class="panel-label">Kernel Shape</p>
+              <KernelDisplay />
+            </DashboardPanel>
 
-              <DashboardPanel id="trace-viewer" variant="data" class="viz-grid__col--trace">
-                <p class="panel-label">Trace Inspector</p>
-                <TraceInspector />
-              </DashboardPanel>
-            </div>
+            <DashboardPanel id="trace-viewer" variant="data" class="viz-grid__col--trace">
+              <p class="panel-label">Trace Inspector</p>
+              <TraceInspector />
+            </DashboardPanel>
           </div>
           <IterationScrubber />
         </VizLayout>

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

@@ -10,8 +10,9 @@ import { AlphaTrends } from './AlphaTrends.tsx';
 import { ThresholdTrends } from './ThresholdTrends.tsx';
 import { PveTrends } from './PveTrends.tsx';
 import { EventRateTrends } from './EventRateTrends.tsx';
+import { SpikeEfficiencyTrends } from './SpikeEfficiencyTrends.tsx';
 
-type ConvergenceTab = 'kernel' | 'alpha' | 'threshold' | 'pve' | 'event-rate';
+type ConvergenceTab = 'kernel' | 'alpha' | 'threshold' | 'pve' | 'event-rate' | 'spike-eff';
 
 interface TabEntry {
   id: ConvergenceTab;
@@ -25,6 +26,7 @@ const TABS: TabEntry[] = [
   { id: 'threshold', label: 'Threshold', content: () => <ThresholdTrends /> },
   { id: 'pve', label: 'PVE', content: () => <PveTrends /> },
   { id: 'event-rate', label: 'Event Rate', content: () => <EventRateTrends /> },
+  { id: 'spike-eff', label: 'Spike Eff.', content: () => <SpikeEfficiencyTrends /> },
 ];
 
 export function ConvergencePanel(): JSX.Element {

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

@@ -44,7 +44,7 @@ export interface TrendsData {
 /** Extract a numeric field from TraceResultEntry history into TrendsData. */
 export function deriveTrendsData(
   history: IterationHistoryEntry[],
-  accessor: (entry: TraceResultEntry) => number,
+  accessor: (entry: TraceResultEntry, historyEntry: IterationHistoryEntry) => number,
 ): TrendsData {
   if (history.length === 0) {
     return {
@@ -85,7 +85,7 @@ export function deriveTrendsData(
 
     for (const key of keys) {
       const entry = results[key];
-      const val = entry != null ? accessor(entry) : null;
+      const val = entry != null ? accessor(entry, history[i]) : null;
       perKey.get(key)!.push(val);
       if (val != null) {
         values.push(val);
@@ -249,7 +249,7 @@ function iqrBandPlugin(getData: () => TrendsData): uPlot.Plugin {
 
 export interface PerCellTrendsChartProps {
   /** Field accessor to extract the value from each TraceResultEntry. */
-  accessor: (entry: TraceResultEntry) => number;
+  accessor: (entry: TraceResultEntry, historyEntry: IterationHistoryEntry) => number;
   /** Y-axis label (e.g. "Alpha", "Threshold"). */
   yLabel: string;
   /** Median series label (e.g. "Median Alpha"). */

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

@@ -0,0 +1,34 @@
+/**
+ * Spike Cost Trends chart: (1 + log(totalActivity)) / (PVE * kernelArea).
+ *
+ * U-shaped metric that should minimize at the correct kernel:
+ * - Early (slow kernel): PVE is low → cost is high
+ * - Correct kernel: PVE is high, kernel area right-sized, moderate spikes → minimum
+ * - Overfit (collapsed kernel): kernel area shrinks, spikes explode → cost rises again
+ */
+
+import type { JSX } from 'solid-js';
+import { PerCellTrendsChart } from './PerCellTrendsChart.tsx';
+import { computeNormalizedKernelArea } from '../../lib/math-utils.ts';
+
+export function SpikeEfficiencyTrends(): JSX.Element {
+  return (
+    <PerCellTrendsChart
+      accessor={(entry, historyEntry) => {
+        const n = entry.sCounts.length;
+        if (n === 0) return 0;
+        let totalActivity = 0;
+        for (let i = 0; i < n; i++) totalActivity += entry.sCounts[i];
+        if (totalActivity < 1e-12) return 0;
+        const kernelArea = computeNormalizedKernelArea(historyEntry.tauRise, historyEntry.tauDecay);
+        const denom = entry.pve * kernelArea;
+        if (denom < 1e-12) return 0;
+        return (1 + Math.log(totalActivity)) / denom;
+      }}
+      yLabel="Spike Cost"
+      medianLabel="Median Spike Cost"
+      medianColor="#9467bd"
+      emptyMessage="Run deconvolution to see spike cost trends."
+    />
+  );
+}

apps/cadecon/src/components/drilldown/SubsetKernelFit.tsx

@@ -9,6 +9,7 @@ import 'uplot/dist/uPlot.min.css';
 import '@calab/ui/chart/chart-theme.css';
 import type { KernelSnapshot, SubsetKernelSnapshot } from '../../lib/iteration-store.ts';
 import { AXIS_TEXT, AXIS_GRID, AXIS_TICK, subsetColor } from '@calab/ui/chart';
+import { peakNormalize } from '../../lib/chart/series-config.ts';
 
 export interface SubsetKernelFitProps {
   subsetIdx: number;
@@ -41,6 +42,8 @@ export function SubsetKernelFit(props: SubsetKernelFitProps): JSX.Element {
       const t = i / fs;
       fit[i] = beta * (Math.exp(-t / tauD) - Math.exp(-t / tauR));
     }
+    peakNormalize(hFree);
+    peakNormalize(fit);
 
     return [xAxis, hFree, fit];
   });

apps/cadecon/src/components/kernel/KernelDisplay.tsx

@@ -21,6 +21,7 @@ import { selectedSubsetIdx } from '../../lib/subset-store.ts';
 import {
   createKernelFitSeries,
   createGroundTruthKernelSeries,
+  peakNormalize,
 } from '../../lib/chart/series-config.ts';
 import {
   D3_CATEGORY10,
@@ -71,21 +72,24 @@ export function KernelDisplay(): JSX.Element {
       xAxis[i] = (i / fs) * 1000;
     }
 
-    // Per-subset h_free arrays (padded with null)
+    // Per-subset h_free arrays (peak-normalized, padded with null)
     const subsetArrays: (number | null)[][] = snap.subsets.map((s) => {
+      const raw = s.hFree.slice();
+      peakNormalize(raw);
       const arr: (number | null)[] = new Array(maxLen).fill(null);
-      for (let i = 0; i < s.hFree.length; i++) {
-        arr[i] = s.hFree[i];
+      for (let i = 0; i < raw.length; i++) {
+        arr[i] = raw[i];
       }
       return arr;
     });
 
-    // Fitted bi-exp from merged params
+    // Fitted bi-exp from merged params (peak-normalized)
     const fitArray = new Array(maxLen);
     for (let i = 0; i < maxLen; i++) {
       const t = i / fs;
       fitArray[i] = beta * (Math.exp(-t / tauD) - Math.exp(-t / tauR));
     }
+    peakNormalize(fitArray);
 
     const columns: (number | null)[][] = [...subsetArrays, fitArray];
 
@@ -94,17 +98,11 @@ export function KernelDisplay(): JSX.Element {
       const gtTauR = groundTruthTauRise()!;
       const gtTauD = groundTruthTauDecay()!;
       const gtArray = new Array(maxLen);
-      let gtPeak = 0;
       for (let i = 0; i < maxLen; i++) {
         const t = i / fs;
         gtArray[i] = Math.exp(-t / gtTauD) - Math.exp(-t / gtTauR);
-        if (gtArray[i] > gtPeak) gtPeak = gtArray[i];
-      }
-      if (gtPeak > 1e-10) {
-        for (let i = 0; i < maxLen; i++) {
-          gtArray[i] /= gtPeak;
-        }
       }
+      peakNormalize(gtArray);
       columns.push(gtArray);
     }
 

apps/cadecon/src/lib/algorithm-store.ts

@@ -11,7 +11,7 @@ import { samplingRate } from './data-store.ts';
 // on the way down, where best-residual tracking (iteration-manager.ts) catches it.
 const [tauRiseInit, setTauRiseInit] = createSignal(0.2);
 const [tauDecayInit, setTauDecayInit] = createSignal(1.0);
-const [upsampleTarget, setUpsampleTarget] = createSignal(300);
+const [upsampleTarget, setUpsampleTarget] = createSignal(120);
 const [weightingEnabled, setWeightingEnabled] = createSignal(false);
 const [hpFilterEnabled, setHpFilterEnabled] = createSignal(true);
 const [lpFilterEnabled, setLpFilterEnabled] = createSignal(false);

apps/cadecon/src/lib/cadecon-pool.ts

@@ -35,6 +35,7 @@ interface KernelJobFields {
   maxIters: number;
   tol: number;
   refine: boolean;
+  smoothLambda: number;
   warmKernel?: Float32Array;
   onComplete(result: KernelResult): void;
 }
@@ -126,6 +127,7 @@ const caDeconRouter: MessageRouter<CaDeconPoolJob, CaDeconWorkerOutbound> = {
           maxIters: job.maxIters,
           tol: job.tol,
           refine: job.refine,
+          smoothLambda: job.smoothLambda,
           warmKernel: warmCopy,
         },
         transfers,

apps/cadecon/src/lib/chart/series-config.ts

@@ -6,6 +6,19 @@ import { D3_CATEGORY10, subsetColor, withOpacity } from '@calab/ui/chart';
 
 export { subsetColor, withOpacity };
 
+/** Divide every element by the array's peak value so the max becomes 1.0. */
+export function peakNormalize(arr: number[] | Float32Array): void {
+  let peak = 0;
+  for (let i = 0; i < arr.length; i++) {
+    if (arr[i] > peak) peak = arr[i];
+  }
+  if (peak > 1e-10) {
+    for (let i = 0; i < arr.length; i++) {
+      arr[i] /= peak;
+    }
+  }
+}
+
 export function createRawTraceSeries(): uPlot.Series {
   return { label: 'Raw', stroke: '#1f77b4', width: 1 };
 }

apps/cadecon/src/lib/iteration-manager.ts

@@ -56,6 +56,8 @@ const TRACE_FISTA_TOL = 1e-4;
 /** Per-subset kernel estimation solver parameters. */
 const KERNEL_FISTA_MAX_ITERS = 200;
 const KERNEL_FISTA_TOL = 1e-4;
+/** TV-L1 smoothness penalty for free-form kernel estimation. */
+const KERNEL_SMOOTH_LAMBDA = 0;
 
 let pool: WorkerPool<CaDeconPoolJob> | null = null;
 let nextJobId = 0;
@@ -241,6 +243,7 @@ function dispatchKernelJobs(
         maxIters: KERNEL_FISTA_MAX_ITERS,
         tol: KERNEL_FISTA_TOL,
         refine: true,
+        smoothLambda: KERNEL_SMOOTH_LAMBDA,
         warmKernel,
         onComplete(result: KernelResult) {
           kernelResults.push(result);
@@ -530,7 +533,7 @@ export async function startRun(): Promise<void> {
       })),
     });
 
-    // Step 4: Best-residual tracking & early stop
+    // Step 4: Best-residual tracking & early stop (DISABLED)
     //
     // TODO: The current stopping criterion uses the bi-exponential fit residual
     // (||h_free - β·template||²), which measures kernel shape mismatch. This
@@ -540,6 +543,10 @@ export async function startRun(): Promise<void> {
     // the model explains the data. That's more expensive to compute but would
     // be a stronger signal for when the kernel has overshot.
     //
+    // Disabled: with damped tau updates the residual-patience early stop fires
+    // too aggressively before the damped parameters have had time to settle.
+    // Re-enable once a better stopping metric is implemented.
+    //
     if (medResidual < bestResidual) {
       bestResidual = medResidual;
       bestTauR = tauR;
@@ -550,14 +557,6 @@ export async function startRun(): Promise<void> {
       residualIncreaseCount++;
     }
 
-    // Early stop: if residual has risen for RESIDUAL_PATIENCE consecutive
-    // iterations, the optimizer has overshot. The post-loop revert below will
-    // restore the best-residual kernel parameters before finalization.
-    if (residualIncreaseCount >= RESIDUAL_PATIENCE) {
-      setConvergedAtIteration(bestIteration);
-      break;
-    }
-
     // Step 5: Convergence check (relative change in tau values)
     const relChangeTauR = Math.abs(tauR - prevTauR) / (prevTauR + 1e-20);
     const relChangeTauD = Math.abs(tauD - prevTauD) / (prevTauD + 1e-20);