@treelocator/runtime 0.4.7 → 0.6.0

package/src/components/SettingsPanel.tsx

@@ -0,0 +1,339 @@
+import { For } from "solid-js";
+import {
+  DEFAULT_SETTINGS,
+  resetSettings,
+  setSetting,
+  settings,
+  type TreelocatorSettings,
+} from "../hooks/useSettings";
+
+type SettingsPanelProps = {
+  onDismiss: () => void;
+};
+
+type ToggleKey =
+  | "anomalyTracking"
+  | "visualDiff"
+  | "computedStyles"
+  | "computedStylesIncludeDefaults";
+type NumberKey = "sampleRate" | "maxDurationMs" | "jumpMinAbsolute" | "lagMinDelay";
+
+const TOGGLES: { key: ToggleKey; label: string; hint: string }[] = [
+  {
+    key: "anomalyTracking",
+    label: "Anomaly tracking",
+    hint: "Detect jitter, jumps, stutter, stuck frames",
+  },
+  {
+    key: "visualDiff",
+    label: "Visual diff",
+    hint: "Snapshot before/after element tree",
+  },
+  {
+    key: "computedStyles",
+    label: "Computed styles",
+    hint: "Include styles in alt+click clipboard output",
+  },
+  {
+    key: "computedStylesIncludeDefaults",
+    label: "Include default styles",
+    hint: "Show browser-default values like display:block and font-weight:bold",
+  },
+];
+
+const NUMBERS: {
+  key: NumberKey;
+  label: string;
+  hint: string;
+  unit: string;
+  min: number;
+  max: number;
+  step: number;
+}[] = [
+  {
+    key: "sampleRate",
+    label: "Sample rate",
+    hint: "Max frames per second to capture",
+    unit: "Hz",
+    min: 1,
+    max: 60,
+    step: 1,
+  },
+  {
+    key: "maxDurationMs",
+    label: "Max duration",
+    hint: "Auto-stop recording after this long",
+    unit: "ms",
+    min: 1000,
+    max: 120000,
+    step: 1000,
+  },
+  {
+    key: "jumpMinAbsolute",
+    label: "Jump threshold",
+    hint: "Minimum px delta to flag a jump",
+    unit: "px",
+    min: 1,
+    max: 1000,
+    step: 1,
+  },
+  {
+    key: "lagMinDelay",
+    label: "Lag threshold",
+    hint: "Minimum rAF delay to flag lag",
+    unit: "ms",
+    min: 1,
+    max: 1000,
+    step: 1,
+  },
+];
+
+const rowStyle = {
+  display: "flex",
+  "align-items": "center",
+  "justify-content": "space-between",
+  gap: "12px",
+  padding: "8px 0",
+  "border-bottom": "1px solid rgba(255, 255, 255, 0.05)",
+};
+
+const labelStyle = { "min-width": "0", flex: "1 1 auto" };
+const labelTitle = { "font-weight": "600", color: "#fff" };
+const labelHint = {
+  color: "#9ca3af",
+  "font-size": "11px",
+  "margin-top": "2px",
+  "line-height": "1.3",
+};
+
+const sectionTitleStyle = {
+  "margin-bottom": "4px",
+  color: "#9ca3af",
+  "font-size": "11px",
+  "text-transform": "uppercase",
+  "letter-spacing": "0.5px",
+};
+
+function Toggle(props: {
+  checked: boolean;
+  onChange: (v: boolean) => void;
+}) {
+  return (
+    <div
+      role="switch"
+      aria-checked={props.checked}
+      onClick={() => props.onChange(!props.checked)}
+      style={{
+        cursor: "pointer",
+        width: "32px",
+        height: "18px",
+        "border-radius": "9px",
+        background: props.checked
+          ? "rgba(59, 130, 246, 0.6)"
+          : "rgba(255, 255, 255, 0.12)",
+        position: "relative",
+        transition: "background 0.15s",
+        "flex-shrink": "0",
+      }}
+    >
+      <div
+        style={{
+          position: "absolute",
+          top: "2px",
+          left: props.checked ? "16px" : "2px",
+          width: "14px",
+          height: "14px",
+          "border-radius": "50%",
+          background: "#fff",
+          transition: "left 0.15s",
+        }}
+      />
+    </div>
+  );
+}
+
+function NumberInput(props: {
+  value: number;
+  min: number;
+  max: number;
+  step: number;
+  unit: string;
+  onChange: (v: number) => void;
+}) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        "align-items": "center",
+        gap: "4px",
+        "flex-shrink": "0",
+      }}
+    >
+      <input
+        type="number"
+        value={props.value}
+        min={props.min}
+        max={props.max}
+        step={props.step}
+        onInput={(e) => {
+          const n = Number(e.currentTarget.value);
+          if (!Number.isFinite(n)) return;
+          const clamped = Math.min(props.max, Math.max(props.min, n));
+          props.onChange(clamped);
+        }}
+        style={{
+          width: "72px",
+          padding: "4px 6px",
+          "border-radius": "4px",
+          background: "rgba(255, 255, 255, 0.08)",
+          border: "1px solid rgba(255, 255, 255, 0.1)",
+          color: "#fff",
+          "font-family": "inherit",
+          "font-size": "11px",
+          "text-align": "right",
+          outline: "none",
+        }}
+      />
+      <span style={{ color: "#9ca3af", "font-size": "11px", "min-width": "18px" }}>
+        {props.unit}
+      </span>
+    </div>
+  );
+}
+
+export function SettingsPanel(props: SettingsPanelProps) {
+  const current = () => settings();
+
+  return (
+    <div
+      data-treelocator-settings-panel
+      style={{
+        position: "fixed",
+        bottom: "180px",
+        right: "20px",
+        "z-index": "2147483646",
+        width: "340px",
+        "max-height": "400px",
+        "overflow-y": "auto",
+        background: "rgba(15, 15, 15, 0.92)",
+        "backdrop-filter": "blur(12px)",
+        "border-radius": "12px",
+        border: "1px solid rgba(255, 255, 255, 0.1)",
+        "box-shadow": "0 8px 32px rgba(0, 0, 0, 0.4)",
+        color: "#e5e5e5",
+        "font-family": "system-ui, -apple-system, sans-serif",
+        "font-size": "12px",
+        "pointer-events": "auto",
+      }}
+    >
+      {/* Header */}
+      <div
+        style={{
+          display: "flex",
+          "align-items": "center",
+          "justify-content": "space-between",
+          padding: "12px 14px 8px",
+          "border-bottom": "1px solid rgba(255, 255, 255, 0.08)",
+        }}
+      >
+        <div>
+          <div style={{ "font-weight": "600", "font-size": "13px", color: "#fff" }}>
+            Settings
+          </div>
+          <div style={{ color: "#9ca3af", "margin-top": "2px" }}>
+            Persisted to localStorage
+          </div>
+        </div>
+        <div style={{ display: "flex", "align-items": "center", gap: "4px" }}>
+          <div
+            style={{
+              cursor: "pointer",
+              padding: "4px 10px",
+              "border-radius": "4px",
+              background: "rgba(255, 255, 255, 0.08)",
+              color: "#9ca3af",
+              "font-size": "11px",
+              "font-weight": "600",
+            }}
+            onClick={resetSettings}
+          >
+            Reset
+          </div>
+          <div
+            style={{
+              cursor: "pointer",
+              padding: "4px 8px",
+              "border-radius": "4px",
+              color: "#9ca3af",
+              "font-size": "16px",
+              "line-height": "1",
+            }}
+            onClick={props.onDismiss}
+          >
+            &times;
+          </div>
+        </div>
+      </div>
+
+      {/* Feature toggles */}
+      <div style={{ padding: "8px 14px" }}>
+        <div style={sectionTitleStyle}>Features</div>
+        <For each={TOGGLES}>
+          {(item) => (
+            <div style={rowStyle}>
+              <div style={labelStyle}>
+                <div style={labelTitle}>{item.label}</div>
+                <div style={labelHint}>{item.hint}</div>
+              </div>
+              <Toggle
+                checked={current()[item.key]}
+                onChange={(v) => setSetting(item.key, v)}
+              />
+            </div>
+          )}
+        </For>
+      </div>
+
+      {/* Thresholds */}
+      <div
+        style={{
+          padding: "8px 14px 12px",
+          "border-top": "1px solid rgba(255, 255, 255, 0.08)",
+        }}
+      >
+        <div style={sectionTitleStyle}>Thresholds</div>
+        <For each={NUMBERS}>
+          {(item) => (
+            <div style={rowStyle}>
+              <div style={labelStyle}>
+                <div style={labelTitle}>{item.label}</div>
+                <div style={labelHint}>{item.hint}</div>
+              </div>
+              <NumberInput
+                value={current()[item.key]}
+                min={item.min}
+                max={item.max}
+                step={item.step}
+                unit={item.unit}
+                onChange={(v) =>
+                  setSetting(item.key as keyof TreelocatorSettings, v as never)
+                }
+              />
+            </div>
+          )}
+        </For>
+        <div
+          style={{
+            color: "#6b7280",
+            "font-size": "11px",
+            "margin-top": "8px",
+          }}
+        >
+          Defaults: sample {DEFAULT_SETTINGS.sampleRate}Hz, max{" "}
+          {DEFAULT_SETTINGS.maxDurationMs}ms, jump {DEFAULT_SETTINGS.jumpMinAbsolute}px,
+          lag {DEFAULT_SETTINGS.lagMinDelay}ms
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/consoleCapture.ts

@@ -0,0 +1,113 @@
+export type ConsoleLevel = "log" | "info" | "warn" | "error" | "debug";
+
+export interface ConsoleEntry {
+  level: ConsoleLevel;
+  timestamp: number;
+  message: string;
+}
+
+const MAX_ENTRIES = 500;
+const LEVELS: ConsoleLevel[] = ["log", "info", "warn", "error", "debug"];
+
+const CAPTURE_FLAG = "__treelocator_console_captured__";
+const entries: ConsoleEntry[] = [];
+
+function formatArg(value: unknown, seen: WeakSet<object>): string {
+  if (value === null) return "null";
+  if (value === undefined) return "undefined";
+  const t = typeof value;
+  if (t === "string") return value as string;
+  if (t === "number" || t === "boolean" || t === "bigint") return String(value);
+  if (t === "function") {
+    const name = (value as { name?: string }).name || "anonymous";
+    return `[Function: ${name}]`;
+  }
+  if (value instanceof Error) {
+    return `${value.name}: ${value.message}`;
+  }
+  if (typeof Element !== "undefined" && value instanceof Element) {
+    const el = value as Element;
+    const id = el.id ? `#${el.id}` : "";
+    const cls = el.className && typeof el.className === "string"
+      ? `.${el.className.trim().split(/\s+/).join(".")}`
+      : "";
+    return `<${el.tagName.toLowerCase()}${id}${cls}>`;
+  }
+  if (t === "object") {
+    if (seen.has(value as object)) return "[Circular]";
+    seen.add(value as object);
+    try {
+      const localSeen = new WeakSet<object>();
+      return JSON.stringify(value, (_key, v) => {
+        if (v === null || v === undefined) return v;
+        if (typeof v === "bigint") return v.toString();
+        if (typeof v === "function") return `[Function: ${v.name || "anonymous"}]`;
+        if (typeof v === "object") {
+          if (localSeen.has(v)) return "[Circular]";
+          localSeen.add(v);
+        }
+        return v;
+      });
+    } catch {
+      try {
+        return String(value);
+      } catch {
+        return "[Unserializable]";
+      }
+    }
+  }
+  return String(value);
+}
+
+function formatArgs(args: unknown[]): string {
+  const seen = new WeakSet<object>();
+  return args.map((arg) => formatArg(arg, seen)).join(" ");
+}
+
+function pushEntry(level: ConsoleLevel, args: unknown[]): void {
+  entries.push({
+    level,
+    timestamp: Date.now(),
+    message: formatArgs(args),
+  });
+  if (entries.length > MAX_ENTRIES) {
+    entries.splice(0, entries.length - MAX_ENTRIES);
+  }
+}
+
+export function installConsoleCapture(): void {
+  if (typeof console === "undefined") return;
+  const target = console as unknown as Record<string, unknown>;
+  if (target[CAPTURE_FLAG]) return;
+  target[CAPTURE_FLAG] = true;
+
+  for (const level of LEVELS) {
+    const original = target[level];
+    if (typeof original !== "function") continue;
+    const wrapped = function (this: unknown, ...args: unknown[]) {
+      try {
+        pushEntry(level, args);
+      } catch {
+        // Swallow — capture must never break logging.
+      }
+      return (original as (...a: unknown[]) => unknown).apply(this, args);
+    };
+    try {
+      target[level] = wrapped;
+    } catch {
+      // Some environments freeze console — ignore.
+    }
+  }
+}
+
+export function getConsoleEntries(last?: number): ConsoleEntry[] {
+  if (typeof last !== "number" || !Number.isFinite(last) || last <= 0) {
+    return entries.slice();
+  }
+  const n = Math.min(Math.floor(last), entries.length);
+  return entries.slice(entries.length - n);
+}
+
+export function clearConsoleEntries(): void {
+  entries.length = 0;
+}

package/src/dejitter/recorder.ts

@@ -20,11 +20,12 @@ export interface DejitterConfig {
     stutter: { velocityRatio: number; maxFrames: number; minVelocity: number };
     stuck: { minStillFrames: number; maxDelta: number; minSurroundingVelocity: number; highDuration: number; medDuration: number };
     outlier: { ratioThreshold: number };
+    lag: { minDelay: number; highDelay: number; medDelay: number };
   };
 }
 
 export interface DejitterFinding {
-  type: 'jitter' | 'flicker' | 'shiver' | 'jump' | 'stutter' | 'stuck' | 'outlier';
+  type: 'jitter' | 'flicker' | 'shiver' | 'jump' | 'stutter' | 'stuck' | 'outlier' | 'lag';
   severity: 'high' | 'medium' | 'low' | 'info';
   elem: string;
   elemLabel: { tag: string; cls: string; text: string };
@@ -50,7 +51,7 @@ export interface DejitterAPI {
   getData(): any;
   summary(json?: boolean): string | DejitterSummary;
   findings(json?: boolean): string | DejitterFinding[];
-  getRaw(): { rawFrames: any[]; mutations: any[] };
+  getRaw(): { rawFrames: any[]; mutations: any[]; interactions: any[] };
   toJSON(): string;
 }
 
@@ -70,6 +71,7 @@ export function createDejitterRecorder(): DejitterAPI {
       stutter: { velocityRatio: 0.3, maxFrames: 3, minVelocity: 0.5 },
       stuck: { minStillFrames: 3, maxDelta: 0.5, minSurroundingVelocity: 1, highDuration: 500, medDuration: 200 },
       outlier: { ratioThreshold: 3 },
+      lag: { minDelay: 50, highDelay: 200, medDelay: 100 },
     },
   };
 
@@ -79,6 +81,7 @@ export function createDejitterRecorder(): DejitterAPI {
   let rafId: number | null = null;
   let stopTimer: ReturnType<typeof setTimeout> | null = null;
   let mutationObserver: MutationObserver | null = null;
+  let interactionAbort: AbortController | null = null;
   let onStopCallbacks: Array<() => void> = [];
 
   let lastSeen = new Map<string, Record<string, any>>();
@@ -86,6 +89,7 @@ export function createDejitterRecorder(): DejitterAPI {
   let lastChangeTime = 0;
   let hasSeenChange = false;
   let mutations: any[] = [];
+  let interactions: Array<{ t: number; type: string }> = [];
   let nextElemId = 0;
 
   function elemId(el: any): string {
@@ -212,6 +216,19 @@ export function createDejitterRecorder(): DejitterAPI {
     });
   }
 
+  function startInteractionListeners(): void {
+    interactionAbort = new AbortController();
+    const opts: AddEventListenerOptions & { signal: AbortSignal } = { capture: true, signal: interactionAbort.signal };
+    const handler = (e: Event): void => {
+      if (!recording) return;
+      const t = Math.round(performance.now() - startTime);
+      interactions.push({ t, type: e.type });
+    };
+    for (const evt of ['click', 'pointerdown', 'keydown'] as const) {
+      document.addEventListener(evt, handler, opts);
+    }
+  }
+
   // --- Downsampling ---
 
   function downsample(): any[] {
@@ -778,6 +795,49 @@ export function createDejitterRecorder(): DejitterAPI {
     return findings;
   }
 
+  function detectLagFindings(elements: Record<string, any>): DejitterFinding[] {
+    const findings: DejitterFinding[] = [];
+    if (interactions.length === 0 || rawFrames.length === 0) return findings;
+
+    const lt = config.thresholds.lag;
+
+    for (const interaction of interactions) {
+      let firstFrame: { t: number; changes: any[] } | null = null;
+      for (const frame of rawFrames) {
+        if (frame.t > interaction.t) {
+          firstFrame = frame;
+          break;
+        }
+      }
+
+      if (!firstFrame) continue;
+
+      const delay = firstFrame.t - interaction.t;
+      if (delay < lt.minDelay) continue;
+
+      const severity = delay >= lt.highDelay ? 'high' : delay >= lt.medDelay ? 'medium' : 'low';
+
+      const firstChange = firstFrame.changes[0];
+      const label = (firstChange && elements[firstChange.id]) || { tag: '?', cls: '', text: '' };
+
+      findings.push(makeFinding(
+        'lag', severity,
+        firstChange?.id || '?', label, interaction.type,
+        `${delay}ms between ${interaction.type} at t=${interaction.t}ms and first visual change at t=${firstFrame.t}ms`,
+        {
+          lag: {
+            interactionType: interaction.type,
+            interactionT: interaction.t,
+            firstChangeT: firstFrame.t,
+            delay,
+          },
+        }
+      ));
+    }
+
+    return findings;
+  }
+
   function deduplicateShivers(findings: DejitterFinding[]): DejitterFinding[] {
     const shiverFindings = findings.filter((f) => f.type === 'shiver');
     const otherFindings = findings.filter((f) => f.type !== 'shiver');
@@ -814,6 +874,7 @@ export function createDejitterRecorder(): DejitterAPI {
     findings = findings.concat(detectJumpFindings(propStats, elements));
     findings = findings.concat(detectStutterFindings(propStats, elements));
     findings = findings.concat(detectStuckFindings(propStats, elements));
+    findings = findings.concat(detectLagFindings(elements));
     findings = deduplicateShivers(findings);
 
     const sevOrder: Record<string, number> = { high: 0, medium: 1, low: 2, info: 3 };
@@ -842,6 +903,7 @@ export function createDejitterRecorder(): DejitterAPI {
     start() {
       rawFrames = [];
       mutations = [];
+      interactions = [];
       lastSeen = new Map();
       nextElemId = 0;
       recording = true;
@@ -851,6 +913,7 @@ export function createDejitterRecorder(): DejitterAPI {
       onStopCallbacks = [];
 
       startMutationObserver();
+      startInteractionListeners();
       rafId = requestAnimationFrame(loop);
 
       if (config.maxDuration > 0) {
@@ -865,6 +928,7 @@ export function createDejitterRecorder(): DejitterAPI {
       if (rafId) cancelAnimationFrame(rafId);
       if (stopTimer) clearTimeout(stopTimer);
       mutationObserver?.disconnect();
+      interactionAbort?.abort();
 
       const msg = `Stopped. ${rawFrames.length} raw frames, ${mutations.length} mutation events.`;
 
@@ -921,7 +985,7 @@ export function createDejitterRecorder(): DejitterAPI {
     },
 
     getRaw() {
-      return { rawFrames, mutations };
+      return { rawFrames, mutations, interactions };
     },
 
     toJSON() {