@treelocator/runtime 0.4.0 → 0.4.5

package/src/components/Runtime.tsx

@@ -7,7 +7,7 @@ import { Targets as SetupTargets } from "../types/types";
 import { MaybeOutline } from "./MaybeOutline";
 import { isLocatorsOwnElement } from "../functions/isLocatorsOwnElement";
 import { Toast } from "./Toast";
-import { collectAncestry, formatAncestryChain } from "../functions/formatAncestryChain";
+import { collectAncestry, formatAncestryChain, truncateAtFirstFile } from "../functions/formatAncestryChain";
 import { enrichAncestryWithSourceMaps } from "../functions/enrichAncestrySourceMaps";
 import { createTreeNode } from "../adapters/createTreeNode";
 import treeIconUrl from "../_generated_tree_icon";
@@ -15,6 +15,15 @@ import { createDejitterRecorder, DejitterAPI, DejitterFinding, DejitterSummary }
 import { RecordingOutline } from "./RecordingOutline";
 import { RecordingResults, InteractionEvent } from "./RecordingResults";
 
+const DEJITTER_CONFIG: Partial<import("../dejitter/recorder").DejitterConfig> = {
+  selector: '[data-treelocator-recording]',
+  props: ['opacity', 'transform', 'boundingRect', 'width', 'height'],
+  sampleRate: 15,
+  maxDuration: 30000,
+  idleTimeout: 0,
+  mutations: true,
+};
+
 type RuntimeProps = {
   adapterId?: AdapterId;
   targets: Targets;
@@ -22,6 +31,7 @@ type RuntimeProps = {
 
 function Runtime(props: RuntimeProps) {
   const [holdingModKey, setHoldingModKey] = createSignal<boolean>(false);
+  const [holdingShift, setHoldingShift] = createSignal<boolean>(false);
   const [currentElement, setCurrentElement] = createSignal<HTMLElement | null>(
     null
   );
@@ -98,15 +108,18 @@ function Runtime(props: RuntimeProps) {
 
   function keyUpListener(e: KeyboardEvent) {
     setHoldingModKey(isCombinationModifiersPressed(e));
+    setHoldingShift(e.shiftKey);
   }
 
   function keyDownListener(e: KeyboardEvent) {
     setHoldingModKey(isCombinationModifiersPressed(e, true));
+    setHoldingShift(e.shiftKey);
   }
 
   function mouseMoveListener(e: MouseEvent) {
     // Update modifier state from mouse events - more reliable than keydown/keyup
     setHoldingModKey(e.altKey);
+    setHoldingShift(e.shiftKey);
   }
 
   function findElementAtPoint(e: MouseEvent): HTMLElement | null {
@@ -155,14 +168,7 @@ function Runtime(props: RuntimeProps) {
     setRecordedElement(element);
 
     dejitterInstance = createDejitterRecorder();
-    dejitterInstance.configure({
-      selector: '[data-treelocator-recording]',
-      props: ['opacity', 'transform', 'boundingRect', 'width', 'height'],
-      sampleRate: 15,
-      maxDuration: 30000,
-      idleTimeout: 0,
-      mutations: true,
-    });
+    dejitterInstance.configure(DEJITTER_CONFIG);
     dejitterInstance.start();
     startInteractionTracker();
     setRecordingState('recording');
@@ -288,14 +294,7 @@ function Runtime(props: RuntimeProps) {
       setRecordedElement(element);
 
       dejitterInstance = createDejitterRecorder();
-      dejitterInstance.configure({
-        selector: '[data-treelocator-recording]',
-        props: ['opacity', 'transform', 'boundingRect', 'width', 'height'],
-        sampleRate: 15,
-        maxDuration: 30000,
-        idleTimeout: 0,
-        mutations: true,
-      });
+      dejitterInstance.configure(DEJITTER_CONFIG);
       dejitterInstance.start();
       setRecordingState('recording');
       setReplaying(true);
@@ -382,6 +381,7 @@ function Runtime(props: RuntimeProps) {
     setRecordedElement(null);
     setViewingPrevious(false);
     setRecordingState('idle');
+    try { localStorage.removeItem(STORAGE_KEY); } catch {}
   }
 
   function hasPreviousRecording(): boolean {
@@ -443,6 +443,7 @@ function Runtime(props: RuntimeProps) {
 
   function mouseOverListener(e: MouseEvent) {
     setHoldingModKey(e.altKey);
+    setHoldingShift(e.shiftKey);
 
     // Don't update hovered element while recording -- highlight is sticky
     if (recordingState() === 'recording') return;
@@ -501,7 +502,12 @@ function Runtime(props: RuntimeProps) {
     // Copy ancestry to clipboard on alt+click
     const treeNode = createTreeNode(element as HTMLElement, props.adapterId);
     if (treeNode) {
-      const ancestry = collectAncestry(treeNode);
+      let ancestry = collectAncestry(treeNode);
+
+      // Alt+Shift: keep from bottom up to the first element with a file, discard above
+      if (e.shiftKey) {
+        ancestry = truncateAtFirstFile(ancestry);
+      }
 
       // Write immediately with component names (preserves user gesture for clipboard API)
       const formatted = formatAncestryChain(ancestry);
@@ -564,6 +570,8 @@ function Runtime(props: RuntimeProps) {
   }
 
   onCleanup(() => {
+    stopReplay();
+    stopInteractionTracker();
     for (const root of roots) {
       root.removeEventListener("keyup", keyUpListener as EventListener);
       root.removeEventListener("keydown", keyDownListener as EventListener);
@@ -596,6 +604,7 @@ function Runtime(props: RuntimeProps) {
           currentElement={currentElement()!}
           adapterId={props.adapterId}
           targets={props.targets}
+          dashed={holdingShift()}
         />
       ) : null}
       {recordingState() === 'recording' && recordedElement() ? (

package/src/dejitter/recorder.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
 /**
  * Dejitter — Animation frame recorder & jank detector (vendored)
  *
@@ -218,13 +217,13 @@ export function createDejitterRecorder(): DejitterAPI {
   function downsample(): any[] {
     if (rawFrames.length === 0) return [];
 
-    const duration = rawFrames[rawFrames.length - 1].t;
+    const duration = rawFrames[rawFrames.length - 1]!.t;
     const targetFrames = Math.max(1, Math.round((duration / 1000) * config.sampleRate));
 
     const changeIndex = new Map<string, Array<{ frameIdx: number; t: number; value: any }>>();
 
     for (let fi = 0; fi < rawFrames.length; fi++) {
-      const frame = rawFrames[fi];
+      const frame = rawFrames[fi]!;
       for (const change of frame.changes) {
         const { id, ...props } = change;
         for (const [prop, value] of Object.entries(props)) {
@@ -251,7 +250,7 @@ export function createDejitterRecorder(): DejitterAPI {
       } else {
         for (let i = 0; i < targetFrames; i++) {
           const srcIdx = Math.round((i / (targetFrames - 1)) * (changes.length - 1));
-          const c = changes[srcIdx];
+          const c = changes[srcIdx]!;
           outputEvents.push({ t: c.t, id, prop, value: c.value });
         }
       }
@@ -296,7 +295,7 @@ export function createDejitterRecorder(): DejitterAPI {
 
   function buildPropStats(): { targetFrames: number; props: any[] } {
     const stats: Record<string, any> = {};
-    const duration = rawFrames.length ? rawFrames[rawFrames.length - 1].t : 0;
+    const duration = rawFrames.length ? rawFrames[rawFrames.length - 1]!.t : 0;
     const targetFrames = Math.max(1, Math.round((duration / 1000) * config.sampleRate));
 
     for (const f of rawFrames) {
@@ -344,7 +343,7 @@ export function createDejitterRecorder(): DejitterAPI {
     if (value === 'none' || value === '' || value === 'auto') return 0;
     const matrixMatch = String(value).match(/^matrix\(([^)]+)\)$/);
     if (matrixMatch) {
-      const parts = matrixMatch[1].split(',').map(Number);
+      const parts = matrixMatch[1]!.split(',').map(Number);
       const tx = parts[4] || 0;
       const ty = parts[5] || 0;
       return Math.abs(tx) > Math.abs(ty) ? tx : ty;
@@ -356,8 +355,8 @@ export function createDejitterRecorder(): DejitterAPI {
   function detectBounce(timeline: Array<{ t: number; value: any }>): any | null {
     if (timeline.length < 3) return null;
 
-    const first = timeline[0].value;
-    const last = timeline[timeline.length - 1].value;
+    const first = timeline[0]!.value;
+    const last = timeline[timeline.length - 1]!.value;
     if (first !== last) return null;
 
     const firstNum = extractNumeric(first);
@@ -384,9 +383,9 @@ export function createDejitterRecorder(): DejitterAPI {
       peak: peakValue,
       peakDeviation: Math.round(peakDeviation * 10) / 10,
       peakT,
-      startT: timeline[0].t,
-      endT: timeline[timeline.length - 1].t,
-      duration: timeline[timeline.length - 1].t - timeline[0].t,
+      startT: timeline[0]!.t,
+      endT: timeline[timeline.length - 1]!.t,
+      duration: timeline[timeline.length - 1]!.t - timeline[0]!.t,
     };
   }
 
@@ -394,7 +393,7 @@ export function createDejitterRecorder(): DejitterAPI {
     const byElem: Record<string, any[]> = {};
     for (const p of propStats.props) {
       if (!byElem[p.elem]) byElem[p.elem] = [];
-      byElem[p.elem].push(p);
+      byElem[p.elem]!.push(p);
     }
 
     const outliers: any[] = [];
@@ -427,8 +426,8 @@ export function createDejitterRecorder(): DejitterAPI {
   function countReversals(numeric: Array<{ t: number; val: number }>): number {
     let reversals = 0;
     for (let i = 2; i < numeric.length; i++) {
-      const d1 = numeric[i - 1].val - numeric[i - 2].val;
-      const d2 = numeric[i].val - numeric[i - 1].val;
+      const d1 = numeric[i - 1]!.val - numeric[i - 2]!.val;
+      const d2 = numeric[i]!.val - numeric[i - 1]!.val;
       if (Math.abs(d1) > config.thresholds.shiver.minDelta && Math.abs(d2) > config.thresholds.shiver.minDelta && d1 * d2 < 0) {
         reversals++;
       }
@@ -485,12 +484,11 @@ export function createDejitterRecorder(): DejitterAPI {
     return findings;
   }
 
-  function detectShiverFindings(propStats: any, elements: any, existingFindings: DejitterFinding[]): DejitterFinding[] {
+  function detectShiverFindings(propStats: any, elements: any): DejitterFinding[] {
     const findings: DejitterFinding[] = [];
 
     for (const p of propStats.props) {
       if (p.raw < 10) continue;
-      if (existingFindings.some((f) => f.elem === p.elem && f.prop === p.prop)) continue;
 
       const timeline = getTimeline(p.elem, p.prop);
       if (timeline.length < 10) continue;
@@ -512,7 +510,7 @@ export function createDejitterRecorder(): DejitterAPI {
 
         const vals = numeric.map((n) => n.val);
         const amplitude = Math.round((Math.max(...vals) - Math.min(...vals)) * 10) / 10;
-        const hz = Math.round((reversals / ((numeric[numeric.length - 1].t - numeric[0].t) / 1000)) * 10) / 10;
+        const hz = Math.round((reversals / ((numeric[numeric.length - 1]!.t - numeric[0]!.t) / 1000)) * 10) / 10;
 
         findings.push(makeFinding(
           'shiver',
@@ -532,7 +530,7 @@ export function createDejitterRecorder(): DejitterAPI {
               range: [Math.min(...vals), Math.max(...vals)],
               uniqueValues: uniqueVals.length,
               isTwoValueFight,
-              durationMs: Math.round(numeric[numeric.length - 1].t - numeric[0].t),
+              durationMs: Math.round(numeric[numeric.length - 1]!.t - numeric[0]!.t),
             },
           }
         ));
@@ -542,33 +540,32 @@ export function createDejitterRecorder(): DejitterAPI {
     return findings;
   }
 
-  function detectJumpFindings(propStats: any, elements: any, existingFindings: DejitterFinding[]): DejitterFinding[] {
+  function detectJumpFindings(propStats: any, elements: any): DejitterFinding[] {
     const findings: DejitterFinding[] = [];
 
     for (const p of propStats.props) {
       if (p.raw < 3) continue;
-      if (existingFindings.some((f) => f.elem === p.elem && f.prop === p.prop)) continue;
 
       const timeline = getTimeline(p.elem, p.prop);
       if (timeline.length < 3) continue;
 
       const deltas: Array<{ t: number; delta: number; from: any; to: any }> = [];
       for (let i = 1; i < timeline.length; i++) {
-        const prev = extractNumeric(timeline[i - 1].value);
-        const curr = extractNumeric(timeline[i].value);
+        const prev = extractNumeric(timeline[i - 1]!.value);
+        const curr = extractNumeric(timeline[i]!.value);
         if (prev === null || curr === null) continue;
         deltas.push({
-          t: timeline[i].t,
+          t: timeline[i]!.t,
           delta: Math.abs(curr - prev),
-          from: timeline[i - 1].value,
-          to: timeline[i].value,
+          from: timeline[i - 1]!.value,
+          to: timeline[i]!.value,
         });
       }
 
       if (deltas.length < 3) continue;
 
       const sortedDeltas = deltas.map((d) => d.delta).sort((a, b) => a - b);
-      const medianDelta = sortedDeltas[Math.floor(sortedDeltas.length / 2)];
+      const medianDelta = sortedDeltas[Math.floor(sortedDeltas.length / 2)]!;
       if (medianDelta === 0) continue;
 
       const jmpT = config.thresholds.jump;
@@ -598,13 +595,12 @@ export function createDejitterRecorder(): DejitterAPI {
     return findings;
   }
 
-  function detectStutterFindings(propStats: any, elements: any, existingFindings: DejitterFinding[]): DejitterFinding[] {
+  function detectStutterFindings(propStats: any, elements: any): DejitterFinding[] {
     const findings: DejitterFinding[] = [];
     const st = config.thresholds.stutter;
 
     for (const p of propStats.props) {
       if (p.raw < 6) continue;
-      if (existingFindings.some((f) => f.elem === p.elem && f.prop === p.prop)) continue;
 
       const timeline = getTimeline(p.elem, p.prop);
       if (timeline.length < 6) continue;
@@ -618,7 +614,7 @@ export function createDejitterRecorder(): DejitterAPI {
 
       const deltas: number[] = [];
       for (let i = 1; i < numeric.length; i++) {
-        deltas.push(numeric[i].val - numeric[i - 1].val);
+        deltas.push(numeric[i]!.val - numeric[i - 1]!.val);
       }
 
       const windowSize = 5;
@@ -628,31 +624,31 @@ export function createDejitterRecorder(): DejitterAPI {
         if (i - winStart < 2) { i++; continue; }
 
         let sum = 0;
-        for (let w = winStart; w < i; w++) sum += deltas[w];
+        for (let w = winStart; w < i; w++) sum += deltas[w]!;
         const dominantDir = Math.sign(sum);
         if (dominantDir === 0) { i++; continue; }
 
-        if (deltas[i] !== 0 && Math.sign(deltas[i]) !== dominantDir) {
+        if (deltas[i]! !== 0 && Math.sign(deltas[i]!) !== dominantDir) {
           const reversalStart = i;
           let reversalEnd = i;
           while (
             reversalEnd + 1 < deltas.length &&
             reversalEnd - reversalStart + 1 < st.maxFrames &&
-            deltas[reversalEnd + 1] !== 0 &&
-            Math.sign(deltas[reversalEnd + 1]) !== dominantDir
+            deltas[reversalEnd + 1]! !== 0 &&
+            Math.sign(deltas[reversalEnd + 1]!) !== dominantDir
           ) {
             reversalEnd++;
           }
 
           const afterIdx = reversalEnd + 1;
-          if (afterIdx >= deltas.length || Math.sign(deltas[afterIdx]) !== dominantDir) {
+          if (afterIdx >= deltas.length || Math.sign(deltas[afterIdx]!) !== dominantDir) {
             i = reversalEnd + 1;
             continue;
           }
 
           let reversalMag = 0;
           for (let r = reversalStart; r <= reversalEnd; r++) {
-            reversalMag += Math.abs(deltas[r]);
+            reversalMag += Math.abs(deltas[r]!);
           }
 
           const localStart = Math.max(0, reversalStart - windowSize);
@@ -661,7 +657,7 @@ export function createDejitterRecorder(): DejitterAPI {
           let localCount = 0;
           for (let l = localStart; l <= localEnd; l++) {
             if (l >= reversalStart && l <= reversalEnd) continue;
-            localSum += Math.abs(deltas[l]);
+            localSum += Math.abs(deltas[l]!);
             localCount++;
           }
           const localVelocity = localCount > 0 ? localSum / localCount : 0;
@@ -671,7 +667,7 @@ export function createDejitterRecorder(): DejitterAPI {
             if (ratio >= st.velocityRatio) {
               const reversalFrameCount = reversalEnd - reversalStart + 1;
               const severity = ratio >= 1.0 ? 'high' : ratio >= 0.5 ? 'medium' : 'low';
-              const t = numeric[reversalStart + 1].t;
+              const t = numeric[reversalStart + 1]!.t;
               findings.push(makeFinding(
                 'stutter', severity,
                 p.elem, elements[p.elem], p.prop,
@@ -701,13 +697,12 @@ export function createDejitterRecorder(): DejitterAPI {
     return findings;
   }
 
-  function detectStuckFindings(propStats: any, elements: any, existingFindings: DejitterFinding[]): DejitterFinding[] {
+  function detectStuckFindings(propStats: any, elements: any): DejitterFinding[] {
     const findings: DejitterFinding[] = [];
     const sk = config.thresholds.stuck;
 
     for (const p of propStats.props) {
       if (p.raw < 6) continue;
-      if (existingFindings.some((f) => f.elem === p.elem && f.prop === p.prop)) continue;
 
       const timeline = getTimeline(p.elem, p.prop);
       if (timeline.length < 6) continue;
@@ -721,15 +716,15 @@ export function createDejitterRecorder(): DejitterAPI {
 
       const deltas: number[] = [];
       for (let i = 1; i < numeric.length; i++) {
-        deltas.push(Math.abs(numeric[i].val - numeric[i - 1].val));
+        deltas.push(Math.abs(numeric[i]!.val - numeric[i - 1]!.val));
       }
 
       let i = 0;
       while (i < deltas.length) {
-        if (deltas[i] > sk.maxDelta) { i++; continue; }
+        if (deltas[i]! > sk.maxDelta) { i++; continue; }
 
         const runStart = i;
-        while (i < deltas.length && deltas[i] <= sk.maxDelta) i++;
+        while (i < deltas.length && deltas[i]! <= sk.maxDelta) i++;
         const runEnd = i - 1;
         const stillCount = runEnd - runStart + 1;
 
@@ -741,13 +736,13 @@ export function createDejitterRecorder(): DejitterAPI {
 
         const beforeStart = Math.max(0, runStart - windowSize);
         for (let b = beforeStart; b < runStart; b++) {
-          surroundingSum += deltas[b];
+          surroundingSum += deltas[b]!;
           surroundingCount++;
         }
 
         const afterEnd = Math.min(deltas.length - 1, runEnd + windowSize);
         for (let a = runEnd + 1; a <= afterEnd; a++) {
-          surroundingSum += deltas[a];
+          surroundingSum += deltas[a]!;
           surroundingCount++;
         }
 
@@ -756,8 +751,8 @@ export function createDejitterRecorder(): DejitterAPI {
 
         if (meanSurroundingVelocity < sk.minSurroundingVelocity) continue;
 
-        const tStart = numeric[runStart].t;
-        const tEnd = numeric[runEnd + 1].t;
+        const tStart = numeric[runStart]!.t;
+        const tEnd = numeric[runEnd + 1]!.t;
         const duration = Math.round(tEnd - tStart);
 
         const severity = duration >= sk.highDuration ? 'high' : duration >= sk.medDuration ? 'medium' : 'low';
@@ -773,7 +768,7 @@ export function createDejitterRecorder(): DejitterAPI {
               duration,
               stillFrames: stillCount,
               meanSurroundingVelocity: Math.round(meanSurroundingVelocity * 10) / 10,
-              stuckValue: numeric[runStart].val,
+              stuckValue: numeric[runStart]!.val,
             },
           }
         ));
@@ -797,10 +792,10 @@ export function createDejitterRecorder(): DejitterAPI {
     const deduped: DejitterFinding[] = [];
     for (const group of shiverGroups.values()) {
       if (group.length === 1) {
-        deduped.push(group[0]);
+        deduped.push(group[0]!);
       } else {
         group.sort((a, b) => b.shiver.amplitude - a.shiver.amplitude);
-        const rep = { ...group[0] };
+        const rep = { ...group[0]! };
         (rep as any).affectedElements = group.length;
         rep.description += ` (affects ${group.length} elements)`;
         deduped.push(rep);
@@ -815,14 +810,14 @@ export function createDejitterRecorder(): DejitterAPI {
     const elements = buildElementMap();
 
     let findings = detectOutlierFindings(propStats, elements);
-    findings = findings.concat(detectShiverFindings(propStats, elements, findings));
-    findings = findings.concat(detectJumpFindings(propStats, elements, findings));
-    findings = findings.concat(detectStutterFindings(propStats, elements, findings));
-    findings = findings.concat(detectStuckFindings(propStats, elements, findings));
+    findings = findings.concat(detectShiverFindings(propStats, elements));
+    findings = findings.concat(detectJumpFindings(propStats, elements));
+    findings = findings.concat(detectStutterFindings(propStats, elements));
+    findings = findings.concat(detectStuckFindings(propStats, elements));
     findings = deduplicateShivers(findings);
 
     const sevOrder: Record<string, number> = { high: 0, medium: 1, low: 2, info: 3 };
-    findings.sort((a, b) => sevOrder[a.severity] - sevOrder[b.severity]);
+    findings.sort((a, b) => sevOrder[a.severity]! - sevOrder[b.severity]!);
 
     return findings;
   }
@@ -891,7 +886,7 @@ export function createDejitterRecorder(): DejitterAPI {
 
       return {
         config: { ...config },
-        duration: rawFrames.length ? rawFrames[rawFrames.length - 1].t : 0,
+        duration: rawFrames.length ? rawFrames[rawFrames.length - 1]!.t : 0,
         rawFrameCount: rawFrames.length,
         outputFrameCount: samples.length,
         mutationEvents: mutations.length,
@@ -910,7 +905,7 @@ export function createDejitterRecorder(): DejitterAPI {
         byMode[p.mode] = (byMode[p.mode] || 0) + 1;
       }
       const data: DejitterSummary = {
-        duration: rawFrames.length ? rawFrames[rawFrames.length - 1].t : 0,
+        duration: rawFrames.length ? rawFrames[rawFrames.length - 1]!.t : 0,
         rawFrameCount: rawFrames.length,
         targetOutputFrames: propStats.targetFrames,
         mutationEvents: mutations.length,

package/src/functions/formatAncestryChain.test.ts

@@ -3,6 +3,7 @@ import {
   AncestryItem,
   formatAncestryChain,
   collectAncestry,
+  truncateAtFirstFile,
 } from "./formatAncestryChain";
 
 describe("formatAncestryChain", () => {
@@ -266,4 +267,50 @@ describe("formatAncestryChain", () => {
       );
     });
   });
+
+  describe("truncateAtFirstFile", () => {
+    it("keeps from clicked element up to first ancestor with filePath", () => {
+      // Bottom-up: clicked element first, root last
+      const items: AncestryItem[] = [
+        { elementName: "span", componentName: "Button" },
+        { elementName: "div", componentName: "Card" },
+        { elementName: "div", componentName: "Layout", filePath: "src/Layout.tsx", line: 10 },
+        { elementName: "div", componentName: "App", filePath: "src/App.tsx", line: 1 },
+      ];
+
+      const result = truncateAtFirstFile(items);
+      expect(result).toEqual([
+        { elementName: "span", componentName: "Button" },
+        { elementName: "div", componentName: "Card" },
+        { elementName: "div", componentName: "Layout", filePath: "src/Layout.tsx", line: 10 },
+      ]);
+    });
+
+    it("returns just the clicked element when it already has a filePath", () => {
+      const items: AncestryItem[] = [
+        { elementName: "button", componentName: "Button", filePath: "src/Button.tsx", line: 5 },
+        { elementName: "div", componentName: "Layout", filePath: "src/Layout.tsx", line: 10 },
+        { elementName: "div", componentName: "App", filePath: "src/App.tsx", line: 1 },
+      ];
+
+      const result = truncateAtFirstFile(items);
+      expect(result).toEqual([
+        { elementName: "button", componentName: "Button", filePath: "src/Button.tsx", line: 5 },
+      ]);
+    });
+
+    it("returns all items when none have a filePath", () => {
+      const items: AncestryItem[] = [
+        { elementName: "span", componentName: "A" },
+        { elementName: "div", componentName: "B" },
+      ];
+
+      const result = truncateAtFirstFile(items);
+      expect(result).toEqual(items);
+    });
+
+    it("returns empty array for empty input", () => {
+      expect(truncateAtFirstFile([])).toEqual([]);
+    });
+  });
 });

package/src/functions/formatAncestryChain.ts

@@ -164,6 +164,17 @@ function getInnermostNamedComponent(item: AncestryItem | null | undefined): stri
   return undefined;
 }
 
+/**
+ * Truncate ancestry from the bottom (clicked element) up to and including
+ * the first item that has a filePath. Everything above that is discarded.
+ * The ancestry array is bottom-up: index 0 = clicked element, last = root.
+ */
+export function truncateAtFirstFile(items: AncestryItem[]): AncestryItem[] {
+  const firstWithFile = items.findIndex((item) => item.filePath);
+  if (firstWithFile === -1) return items;
+  return items.slice(0, firstWithFile + 1);
+}
+
 export function formatAncestryChain(items: AncestryItem[]): string {
   if (items.length === 0) {
     return "";

package/src/functions/getUsableName.ts

@@ -1,26 +1,5 @@
 import { Fiber } from "@locator/shared";
 
-// function printDebugOwnerTree(fiber: Fiber): string | null {
-//   let current: Fiber | null = fiber || null;
-//   let results = [];
-//   while (current) {
-//     results.push(getUsableName(current));
-//     current = current._debugOwner || null;
-//   }
-//   console.log('DEBUG OWNER: ', results);
-//   return null;
-// }
-// function printReturnTree(fiber: Fiber): string | null {
-//   let current: Fiber | null = fiber || null;
-//   let results = [];
-//   while (current) {
-//     results.push(getUsableName(current));
-//     current = current.return || null;
-//   }
-//   console.log('RETURN: ', results);
-//   return null;
-// }
-
 export function getUsableName(fiber: Fiber | null | undefined): string {
   if (!fiber) {
     return "Not found";

package/src/types/types.ts

@@ -1,4 +1,4 @@
-import { Fiber, Target } from "@locator/shared";
+import { Target } from "@locator/shared";
 
 export type Source = {
   fileName: string;
@@ -7,35 +7,6 @@ export type Source = {
   projectPath?: string;
 };
 
-type SimpleElement = {
-  type: "element";
-  name: string;
-  uniqueId: string;
-  fiber: Fiber;
-  box: SimpleDOMRect | null;
-  element: Element | Text;
-  children: (SimpleElement | SimpleComponent)[];
-  source: Source | null;
-};
-
-type SimpleComponent = {
-  type: "component";
-  uniqueId: string;
-  name: string;
-  fiber: Fiber;
-  box: SimpleDOMRect | null;
-  children: (SimpleElement | SimpleComponent)[];
-  source: Source | null;
-  definitionSourceFile: string | null;
-};
-
-export type SimpleNode = SimpleElement | SimpleComponent;
-
-export type HighlightedNode = {
-  getNode: () => SimpleNode | null;
-  setNode: (node: SimpleNode | null) => void;
-};
-
 export type SimpleDOMRect = {
   height: number;
   width: number;
@@ -51,5 +22,3 @@ export type LinkProps = {
   line: number;
   column: number;
 };
-
-export type ContextMenuState = { target: HTMLElement; x: number; y: number };