Feature: MF4 Signals viz P1 — multi-signal overlay on a shared time axis

Stage-2 P1 of the flexible MF4 visualization (design: docs/MF4_VISUALIZATION.md).

New "Signals" bottom-panel tab: left = searchable checkbox list of numeric
channels (via trendDiscoverFields); right = an overlay time-series of the checked
signals on a shared x axis, with per-signal colors, a legend, a hover readout,
normalize toggle (0–1 per signal vs shared real-Y), and click-a-point → jump to
that record's line.

Backend: extractSignalSeries() in trendEngine.ts reads the file ONCE and returns
all selected signals aligned on the master `t` (falling back to record index when
absent), index-bucketed and min/max/avg downsampled to ~maxPoints — so a
multi-million-record MF4 stays smooth (peak memory O(maxPoints × signals), not
O(records)). New TREND_SIGNAL_SERIES IPC wired through shared/types, preload,
main handler, and the renderer Api type.

Tests: 3 for extractSignalSeries (t-alignment, downsample min/max preservation,
index fallback). 317 pass, build + typecheck green.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: ozgesolidkey

src/main/index.ts

@@ -25,7 +25,7 @@ import { loadDatadogConfig, saveDatadogConfig, clearDatadogConfig, fetchDatadogL
 import { startApiServer, stopApiServer, ApiContext, addChatMessage, getChatMessages, getSseClientCount, getAgentName, loadPersistedSession, API_PORT } from './api-server';
 import { runRecipe, RecipeOptions } from '../mcp-server/recipes';
 import { BaselineStore, buildFingerprint } from './baselineStore';
-import { discoverFields, extractSeries, detectTransitions, correlate } from './trendEngine';
+import { discoverFields, extractSeries, extractSignalSeries, detectTransitions, correlate } from './trendEngine';
 // Native-dependent modules — lazy-loaded to prevent SIGSEGV if bindings aren't built
 let SerialHandler: any = null;
 let LogcatHandler: any = null;
@@ -4334,6 +4334,23 @@ ipcMain.handle(IPC.TREND_SERIES, async (_, options) => {
   }
 });
 
+ipcMain.handle(IPC.TREND_SIGNAL_SERIES, async (_, options) => {
+  const handler = getFileHandler();
+  if (!handler) return { success: false, error: 'No file open' };
+  if (!options?.fields?.length) return { success: false, error: 'fields required' };
+  try {
+    const result = extractSignalSeries(handler, options.fields, {
+      startLine: options.startLine,
+      endLine: options.endLine,
+      xField: options.xField,
+      maxPoints: options.maxPoints,
+    });
+    return { success: true, ...result };
+  } catch (error) {
+    return { success: false, error: String(error) };
+  }
+});
+
 ipcMain.handle(IPC.TREND_TRANSITIONS, async (_, options) => {
   const handler = getFileHandler();
   if (!handler) return { success: false, error: 'No file open' };

src/main/trendEngine.ts

@@ -340,6 +340,147 @@ function topN(rec: Record<string, number>, n: number): Record<string, number> {
   return Object.fromEntries(sorted);
 }
 
+// ── 2b. Multi-signal aligned series (Signals overlay viz) ────────────────────
+
+export interface SignalSeries {
+  field: string;
+  type: FieldType;
+  values: (number | null)[];   // avg per emitted bucket (null = no sample in bucket)
+  min: (number | null)[];      // per-bucket min (spike-preserving band)
+  max: (number | null)[];      // per-bucket max
+  viewerLines: number[];       // representative 1-based line per bucket (click→line)
+  globalMin: number;           // for normalize / autoscale
+  globalMax: number;
+  present: number;             // total records that had this field
+}
+
+export interface SignalSeriesResult {
+  x: { field: string; values: number[]; isIndex: boolean }; // shared axis (t, or record index fallback)
+  series: SignalSeries[];
+  totalRecords: number;        // lines that carried an x value
+  buckets: number;             // emitted bucket count (≤ maxPoints)
+  truncated: boolean;
+}
+
+/**
+ * Read the file ONCE and return several fields ALIGNED on a shared x axis
+ * (default the `t` master), downsampled to ~maxPoints buckets so a multi-million
+ * record MF4 stays smooth. Records are file-ordered and `t` is monotonic, so we
+ * bucket by record index (cheap, no second pass) and keep min/max/avg per bucket
+ * to preserve spikes. If a line has no `t`, the record index is used as x.
+ */
+export function extractSignalSeries(
+  handler: FileHandler,
+  fields: string[],
+  opts: ScanRange & { xField?: string; maxPoints?: number } = {},
+): SignalSeriesResult {
+  const xField = opts.xField ?? 't';
+  const maxPoints = Math.min(Math.max(opts.maxPoints ?? 4000, 100), 20000);
+  const total = handler.getTotalLines();
+  const start = Math.max(0, opts.startLine ?? 0);
+  const end = Math.min(total - 1, opts.endLine ?? total - 1);
+  const span = Math.max(1, end - start + 1);
+  const bucketSize = Math.max(1, Math.ceil(span / maxPoints));
+  const nBuckets = Math.ceil(span / bucketSize);
+
+  // Per-bucket accumulators for the x axis.
+  const xSum = new Float64Array(nBuckets);
+  const xCnt = new Int32Array(nBuckets);
+  const repLine = new Int32Array(nBuckets); // representative 1-based line per bucket
+  let sawRealX = false;
+
+  // Per-signal accumulators.
+  const accs = fields.map(() => ({
+    sum: new Float64Array(nBuckets),
+    cnt: new Int32Array(nBuckets),
+    min: new Float64Array(nBuckets).fill(Infinity),
+    max: new Float64Array(nBuckets).fill(-Infinity),
+    type: null as FieldType | null,
+    present: 0,
+  }));
+
+  let totalRecords = 0;
+  const { truncated } = scanLines(
+    handler,
+    { startLine: start, endLine: end, maxScan: opts.maxScan ?? 50_000_000 },
+    (lineNumber, text) => {
+      const map = extractFields(text);
+      if (map.size === 0) return;
+      const relIdx = lineNumber - start;
+      let bucket = Math.floor(relIdx / bucketSize);
+      if (bucket < 0) bucket = 0; else if (bucket >= nBuckets) bucket = nBuckets - 1;
+
+      // x value: the master field if numeric, else the record index.
+      const xRaw = map.get(xField);
+      const xNum = xRaw !== undefined ? toNum(xRaw) : null;
+      const x = xNum !== null ? (sawRealX = true, xNum) : relIdx;
+      xSum[bucket] += x;
+      xCnt[bucket]++;
+      if (repLine[bucket] === 0) repLine[bucket] = lineNumber + 1;
+      totalRecords++;
+
+      for (let f = 0; f < fields.length; f++) {
+        const raw = map.get(fields[f]);
+        if (raw === undefined) continue;
+        const n = toNum(raw);
+        if (n === null) continue;
+        const a = accs[f];
+        if (a.type === null) a.type = classifyValue(raw);
+        a.sum[bucket] += n;
+        a.cnt[bucket]++;
+        if (n < a.min[bucket]) a.min[bucket] = n;
+        if (n > a.max[bucket]) a.max[bucket] = n;
+        a.present++;
+      }
+    },
+  );
+
+  // Compact to buckets that actually have an x sample, preserving order.
+  const xValues: number[] = [];
+  const keep: number[] = [];
+  for (let b = 0; b < nBuckets; b++) {
+    if (xCnt[b] > 0) { keep.push(b); xValues.push(xSum[b] / xCnt[b]); }
+  }
+
+  const series: SignalSeries[] = fields.map((field, f) => {
+    const a = accs[f];
+    const values: (number | null)[] = [];
+    const minA: (number | null)[] = [];
+    const maxA: (number | null)[] = [];
+    const viewerLines: number[] = [];
+    let gMin = Infinity, gMax = -Infinity;
+    for (const b of keep) {
+      viewerLines.push(repLine[b] || 1);
+      if (a.cnt[b] > 0) {
+        const avg = a.sum[b] / a.cnt[b];
+        values.push(avg);
+        minA.push(a.min[b]);
+        maxA.push(a.max[b]);
+        if (a.min[b] < gMin) gMin = a.min[b];
+        if (a.max[b] > gMax) gMax = a.max[b];
+      } else {
+        values.push(null); minA.push(null); maxA.push(null);
+      }
+    }
+    return {
+      field,
+      type: a.type ?? 'numeric',
+      values, min: minA, max: maxA, viewerLines,
+      globalMin: gMin === Infinity ? 0 : gMin,
+      globalMax: gMax === -Infinity ? 0 : gMax,
+      present: a.present,
+    };
+  });
+
+  return {
+    x: { field: sawRealX ? xField : 'index', values: xValues, isIndex: !sawRealX },
+    series,
+    totalRecords,
+    buckets: xValues.length,
+    truncated,
+  };
+}
+
 // ── 3. Transition ("flip") detection ─────────────────────────────────────────
 
 export interface TransitionResult {

src/preload/index.ts

@@ -84,6 +84,7 @@ const IPC = {
   // Trends notebook
   TREND_DISCOVER_FIELDS: 'trend-discover-fields',
   TREND_SERIES: 'trend-series',
+  TREND_SIGNAL_SERIES: 'trend-signal-series',
   TREND_TRANSITIONS: 'trend-transitions',
   TREND_CORRELATE: 'trend-correlate',
   // Guided triage
@@ -691,6 +692,8 @@ const api = {
     ipcRenderer.invoke(IPC.TREND_DISCOVER_FIELDS, options),
   trendSeries: (options: { field: string; startLine?: number; endLine?: number; bucketCount?: number; maxPoints?: number; pattern?: string; patternFlags?: string }): Promise<{ success: boolean; [key: string]: any }> =>
     ipcRenderer.invoke(IPC.TREND_SERIES, options),
+  signalSeries: (options: { fields: string[]; xField?: string; startLine?: number; endLine?: number; maxPoints?: number }): Promise<{ success: boolean; [key: string]: any }> =>
+    ipcRenderer.invoke(IPC.TREND_SIGNAL_SERIES, options),
   trendTransitions: (options: { field: string; startLine?: number; endLine?: number; maxTransitions?: number; pattern?: string; patternFlags?: string }): Promise<{ success: boolean; [key: string]: any }> =>
     ipcRenderer.invoke(IPC.TREND_TRANSITIONS, options),
   trendCorrelate: (options: { field: string; event: string; startLine?: number; endLine?: number; pattern?: string; patternFlags?: string }): Promise<{ success: boolean; [key: string]: any }> =>

src/renderer/index.html

@@ -387,6 +387,7 @@ <h2>LOGAN</h2>
           <button class="bottom-tab-btn" data-bottom-tab="analysis" data-help="Log level distribution, crash detection, component breakdown, and timestamp analysis.&#10;Click Run Analysis to scan the entire file.">Analysis</button>
           <button class="bottom-tab-btn" data-bottom-tab="investigate" data-help="Guided root-cause finding. Pick a symptom (it crashed, it froze, it's slow…) and LOGAN runs a recipe that searches, checks time gaps, and trends fields — then pins clickable findings.&#10;No expertise needed.">Investigate</button>
           <button class="bottom-tab-btn" data-bottom-tab="trends" data-help="Trend any field over time. Click Discover to auto-find log variables (key=value, JSON), then chart a field as value-over-time, value flips, or correlation.&#10;Click a chart point to jump to that line.">Trends</button>
+          <button class="bottom-tab-btn" data-bottom-tab="signals" data-help="Overlay multiple numeric signals (e.g. MF4 channels) on one shared time axis.&#10;Check signals on the left to plot them; click a point to jump to that record.">Signals</button>
           <button class="bottom-tab-btn" data-bottom-tab="time-gaps" data-help="Find gaps in log timestamps where no events were recorded.&#10;Useful for detecting hangs, freezes, or missing data periods.">Time Gaps</button>
           <button class="bottom-tab-btn" data-bottom-tab="search-results" data-help="Results from Ctrl+F search. Click a result to jump to that line.&#10;Supports regex, wildcard, case-sensitive, and whole-word modes.">Search Results</button>
           <button class="bottom-tab-btn" data-bottom-tab="search-configs" data-help="Save and reuse complex search patterns across files.&#10;Each config stores pattern, regex/case/word flags, and a label.">Search Configs</button>
@@ -456,6 +457,25 @@ <h2>LOGAN</h2>
             <p class="placeholder">Click <strong>Discover Fields</strong> to scan the log for variables, then add a cell to chart one over time.</p>
           </div>
         </div>
+        <!-- Signals tab (multi-signal overlay viz) -->
+        <div class="bottom-tab-view" data-bottom-tab="signals">
+          <div class="bottom-tab-sub-header signals-toolbar">
+            <button id="btn-signals-discover" class="secondary-btn small">Discover Signals</button>
+            <input id="signals-search" class="trends-input signals-search" type="text" placeholder="filter signals…" disabled>
+            <label class="signals-toggle" title="Scale every signal to 0–1 so different ranges compare by shape"><input type="checkbox" id="signals-normalize" checked> Normalize</label>
+            <span id="signals-summary" class="signals-summary"></span>
+          </div>
+          <div class="signals-body">
+            <div id="signals-list" class="signals-list">
+              <p class="placeholder">Click <strong>Discover Signals</strong> to list numeric channels, then check signals to overlay them.</p>
+            </div>
+            <div class="signals-plot-wrap">
+              <canvas id="signals-canvas" class="signals-canvas"></canvas>
+              <div id="signals-readout" class="signals-readout"></div>
+              <div id="signals-legend" class="signals-legend"></div>
+            </div>
+          </div>
+        </div>
         <!-- Time Gaps tab -->
         <div class="bottom-tab-view" data-bottom-tab="time-gaps">
           <div class="time-gap-controls">