@industry-theme/principal-view-panels 0.1.47 → 0.1.48

package/dist/panels.bundle.js

@@ -16,6 +16,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 import require$$0, { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import React2, { createContext, useContext, forwardRef, createElement, useState, useCallback, useRef, useEffect } from "react";
 import require$$2 from "react-dom";
+import { trace, SpanStatusCode } from "@opentelemetry/api";
 var ThemeContext;
 var getThemeContext = () => {
   if (typeof window !== "undefined") {
@@ -5662,6 +5663,623 @@ ${description}` : `# ${name}`;
     return canvas;
   }
 }
+class EventValidationError extends Error {
+  constructor(eventName, nodeId, errors) {
+    super(`Event validation failed for '${eventName}' on node '${nodeId}':
+${errors.join("\n")}`);
+    this.eventName = eventName;
+    this.nodeId = nodeId;
+    this.errors = errors;
+    this.name = "EventValidationError";
+  }
+}
+class EventValidator {
+  constructor(canvas) {
+    this.eventSchemas = /* @__PURE__ */ new Map();
+    this.indexEventSchemas(canvas);
+  }
+  /**
+   * Index all event schemas from canvas nodes
+   */
+  indexEventSchemas(canvas) {
+    var _a;
+    if (!canvas.nodes)
+      return;
+    for (const node of canvas.nodes) {
+      if ((_a = node.pv) == null ? void 0 : _a.events) {
+        this.eventSchemas.set(node.id, node.pv.events);
+      }
+    }
+  }
+  /**
+   * Validate an event against the schema for a specific node
+   */
+  validate(nodeId, eventName, attributes) {
+    const errors = [];
+    const nodeSchema = this.eventSchemas.get(nodeId);
+    if (!nodeSchema) {
+      return { valid: true, errors: [] };
+    }
+    const eventSchema = nodeSchema[eventName];
+    if (!eventSchema) {
+      errors.push(`Event '${eventName}' is not defined in schema for node '${nodeId}'`);
+      return { valid: false, errors };
+    }
+    for (const [fieldName, fieldSchema] of Object.entries(eventSchema.attributes)) {
+      const value = attributes[fieldName];
+      if (fieldSchema.required && value === void 0) {
+        errors.push(`Required field '${fieldName}' is missing`);
+        continue;
+      }
+      if (value === void 0) {
+        continue;
+      }
+      const actualType = this.getValueType(value);
+      if (actualType !== fieldSchema.type) {
+        errors.push(`Field '${fieldName}' has type '${actualType}' but schema expects '${fieldSchema.type}'`);
+      }
+    }
+    const schemaFields = new Set(Object.keys(eventSchema.attributes));
+    for (const fieldName of Object.keys(attributes)) {
+      if (fieldName.startsWith("code.") || fieldName === "description") {
+        continue;
+      }
+      if (!schemaFields.has(fieldName)) ;
+    }
+    return {
+      valid: errors.length === 0,
+      errors
+    };
+  }
+  /**
+   * Get the type of a value
+   */
+  getValueType(value) {
+    if (Array.isArray(value))
+      return "array";
+    if (value === null)
+      return "object";
+    return typeof value;
+  }
+  /**
+   * Get all event schemas for a node
+   */
+  getNodeSchema(nodeId) {
+    return this.eventSchemas.get(nodeId);
+  }
+  /**
+   * Get all defined event names for a node
+   */
+  getNodeEventNames(nodeId) {
+    const schema2 = this.eventSchemas.get(nodeId);
+    return schema2 ? Object.keys(schema2) : [];
+  }
+  /**
+   * Check if a node has event schema defined
+   */
+  hasSchema(nodeId) {
+    return this.eventSchemas.has(nodeId);
+  }
+}
+function createValidatedEmitter(validator, nodeId, addEventFn, options = {}) {
+  return (eventName, attributes) => {
+    const result = validator.validate(nodeId, eventName, attributes);
+    if (!result.valid) {
+      if (options.strict !== false) {
+        throw new EventValidationError(eventName, nodeId, result.errors);
+      } else {
+        console.warn(`Event validation warnings for '${eventName}' on node '${nodeId}':`, result.errors);
+      }
+    }
+    addEventFn(eventName, attributes);
+  };
+}
+class TypeScriptGenerator {
+  constructor() {
+    this.language = "typescript";
+  }
+  generate(canvas, options) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const opts = {
+      readonly: ((_a = options == null ? void 0 : options.style) == null ? void 0 : _a.readonly) ?? false,
+      strictNullChecks: ((_b = options == null ? void 0 : options.style) == null ? void 0 : _b.strictNullChecks) ?? true,
+      includeDocComments: ((_c = options == null ? void 0 : options.style) == null ? void 0 : _c.includeDocComments) ?? true,
+      namespace: options == null ? void 0 : options.namespace
+    };
+    const lines = [];
+    lines.push("/**");
+    lines.push(` * Generated types from canvas: ${((_d = canvas.pv) == null ? void 0 : _d.name) || "Untitled"}`);
+    lines.push(" *");
+    lines.push(" * DO NOT EDIT MANUALLY - This file is auto-generated");
+    lines.push(" * Generated by @principal-ai/principal-view-core");
+    lines.push(" *");
+    lines.push(` * Canvas: ${((_e = canvas.pv) == null ? void 0 : _e.description) || "No description"}`);
+    lines.push(` * Version: ${((_f = canvas.pv) == null ? void 0 : _f.version) || "1.0.0"}`);
+    lines.push(" */");
+    lines.push("");
+    if (opts.namespace) {
+      lines.push(`export namespace ${opts.namespace} {`);
+    }
+    if (canvas.nodes) {
+      for (const node of canvas.nodes) {
+        if ((_g = node.pv) == null ? void 0 : _g.events) {
+          lines.push(...this.generateNodeTypes(node.id, node.pv.events, opts));
+          lines.push("");
+        }
+      }
+    }
+    lines.push(...this.generateEventNameUnion(canvas, opts));
+    lines.push("");
+    lines.push(...this.generateEmitterTypes(canvas, opts));
+    if (opts.namespace) {
+      lines.push("}");
+    }
+    const code = lines.join("\n");
+    const filename = this.generateFilename(canvas);
+    return {
+      code,
+      extension: "ts",
+      filename
+    };
+  }
+  generateNodeTypes(nodeId, events, opts) {
+    const lines = [];
+    const typeName = this.nodeIdToTypeName(nodeId);
+    if (opts.includeDocComments) {
+      lines.push(`/**`);
+      lines.push(` * Event types for node: ${nodeId}`);
+      lines.push(` */`);
+    }
+    lines.push(`export namespace ${typeName} {`);
+    for (const [eventName, eventSchema] of Object.entries(events)) {
+      lines.push(...this.generateEventInterface(eventName, eventSchema, opts));
+      lines.push("");
+    }
+    const eventNames = Object.keys(events);
+    const interfaceNames = eventNames.map((name) => this.eventNameToTypeName(name));
+    lines.push("  /**");
+    lines.push(`   * Union of all event types for ${nodeId}`);
+    lines.push("   */");
+    lines.push(`  export type Event = ${interfaceNames.join(" | ")};`);
+    lines.push("");
+    lines.push("  /**");
+    lines.push(`   * Literal union of event names for ${nodeId}`);
+    lines.push("   */");
+    lines.push(`  export type EventName = ${eventNames.map((n) => `'${n}'`).join(" | ")};`);
+    lines.push("}");
+    return lines;
+  }
+  generateEventInterface(eventName, schema2, opts) {
+    const lines = [];
+    const interfaceName = this.eventNameToTypeName(eventName);
+    const readonly = opts.readonly ? "readonly " : "";
+    if (opts.includeDocComments) {
+      lines.push("  /**");
+      lines.push(`   * ${schema2.description}`);
+      lines.push("   */");
+    }
+    lines.push(`  export interface ${interfaceName} {`);
+    lines.push(`    ${readonly}name: '${eventName}';`);
+    lines.push(`    ${readonly}attributes: {`);
+    for (const [fieldName, fieldSchema] of Object.entries(schema2.attributes)) {
+      const optional = !fieldSchema.required && opts.strictNullChecks ? "?" : "";
+      const type2 = this.fieldTypeToTsType(fieldSchema);
+      if (opts.includeDocComments && fieldSchema.description) {
+        lines.push(`      /** ${fieldSchema.description} */`);
+      }
+      lines.push(`      ${readonly}'${fieldName}'${optional}: ${type2};`);
+    }
+    lines.push("    };");
+    lines.push("  }");
+    return lines;
+  }
+  generateEventNameUnion(canvas, opts) {
+    var _a;
+    const lines = [];
+    const allEventNames = /* @__PURE__ */ new Set();
+    if (canvas.nodes) {
+      for (const node of canvas.nodes) {
+        if ((_a = node.pv) == null ? void 0 : _a.events) {
+          Object.keys(node.pv.events).forEach((name) => allEventNames.add(name));
+        }
+      }
+    }
+    if (allEventNames.size === 0) {
+      return lines;
+    }
+    if (opts.includeDocComments) {
+      lines.push("/**");
+      lines.push(" * Union of all event names in the canvas");
+      lines.push(" */");
+    }
+    lines.push(`export type AllEventNames = ${Array.from(allEventNames).map((n) => `'${n}'`).join(" | ")};`);
+    return lines;
+  }
+  generateEmitterTypes(canvas, opts) {
+    const lines = [];
+    if (opts.includeDocComments) {
+      lines.push("/**");
+      lines.push(" * Type-safe event emitter for a specific node");
+      lines.push(" *");
+      lines.push(" * @example");
+      lines.push(" * ```typescript");
+      lines.push(" * const emit: NodeEmitter<GraphConverter.EventName, GraphConverter.Event> = ...");
+      lines.push(" * emit('conversion.started', {");
+      lines.push(" *   name: 'conversion.started',");
+      lines.push(" *   attributes: { ... }");
+      lines.push(" * });");
+      lines.push(" * ```");
+      lines.push(" */");
+    }
+    lines.push("export type NodeEmitter<");
+    lines.push("  TEventName extends string,");
+    lines.push("  TEvent extends { name: TEventName; attributes: Record<string, any> }");
+    lines.push("> = (event: TEvent) => void;");
+    lines.push("");
+    if (opts.includeDocComments) {
+      lines.push("/**");
+      lines.push(" * Type-safe event emitter by event name");
+      lines.push(" *");
+      lines.push(" * @example");
+      lines.push(" * ```typescript");
+      lines.push(" * const emit: NodeEmitterByName<GraphConverter.Event> = ...");
+      lines.push(" * emit('conversion.started', {");
+      lines.push(" *   'config.nodeTypes': 2,");
+      lines.push(" *   'config.edgeTypes': 1");
+      lines.push(" * });");
+      lines.push(" * ```");
+      lines.push(" */");
+    }
+    lines.push("export type NodeEmitterByName<");
+    lines.push("  TEvent extends { name: string; attributes: Record<string, any> }");
+    lines.push("> = <TName extends TEvent['name']>(");
+    lines.push("  eventName: TName,");
+    lines.push("  attributes: Extract<TEvent, { name: TName }>['attributes']");
+    lines.push(") => void;");
+    return lines;
+  }
+  nodeIdToTypeName(nodeId) {
+    return nodeId.split(/[-_]/).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
+  }
+  eventNameToTypeName(eventName) {
+    return eventName.split(".").map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
+  }
+  fieldTypeToTsType(fieldSchema) {
+    switch (fieldSchema.type) {
+      case "string":
+        return "string";
+      case "number":
+        return "number";
+      case "boolean":
+        return "boolean";
+      case "array":
+        return "any[]";
+      case "object":
+        return "Record<string, any>";
+      default:
+        return "any";
+    }
+  }
+  generateFilename(canvas) {
+    var _a;
+    const name = ((_a = canvas.pv) == null ? void 0 : _a.name) || "canvas";
+    const kebab = name.toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-]/g, "");
+    return `${kebab}.types.ts`;
+  }
+}
+function generateTypes(canvas, options = { language: "typescript" }) {
+  const generator = getGenerator(options.language);
+  return generator.generate(canvas, options);
+}
+function getGenerator(language) {
+  switch (language) {
+    case "typescript":
+      return new TypeScriptGenerator();
+    case "python":
+      throw new Error("Python generator not yet implemented. See TypeScriptGenerator as reference.");
+    case "go":
+      throw new Error("Go generator not yet implemented. See TypeScriptGenerator as reference.");
+    case "rust":
+      throw new Error("Rust generator not yet implemented. See TypeScriptGenerator as reference.");
+    default:
+      throw new Error(`Unsupported language: ${language}`);
+  }
+}
+const generatorRegistry = {
+  generators: /* @__PURE__ */ new Map([
+    ["typescript", new TypeScriptGenerator()]
+  ]),
+  register(generator) {
+    this.generators.set(generator.language, generator);
+  },
+  get(language) {
+    return this.generators.get(language);
+  },
+  list() {
+    return Array.from(this.generators.keys());
+  }
+};
+const DEFAULT_OPTIONS$4 = {
+  groupByService: true,
+  layout: "hierarchical",
+  nodeWidth: 200,
+  nodeHeight: 60,
+  horizontalSpacing: 50,
+  verticalSpacing: 80,
+  includeAttributes: true,
+  minDurationMs: 0,
+  kindColors: {
+    SERVER: "#4f46e5",
+    // Indigo
+    CLIENT: "#0891b2",
+    // Cyan
+    PRODUCER: "#059669",
+    // Emerald
+    CONSUMER: "#059669",
+    // Emerald
+    INTERNAL: "#6b7280"
+    // Gray
+  }
+};
+function kindToShape(kind) {
+  const shapes = {
+    SERVER: "hexagon",
+    CLIENT: "diamond",
+    PRODUCER: "rectangle",
+    CONSUMER: "rectangle",
+    INTERNAL: "circle"
+  };
+  return shapes[kind] ?? "rectangle";
+}
+function getServiceName(span) {
+  var _a;
+  return ((_a = span.resource) == null ? void 0 : _a["service.name"]) ?? "unknown";
+}
+function formatDuration(ms) {
+  if (ms < 1)
+    return `${(ms * 1e3).toFixed(0)}μs`;
+  if (ms < 1e3)
+    return `${ms.toFixed(2)}ms`;
+  return `${(ms / 1e3).toFixed(2)}s`;
+}
+function groupByTraceId(spans) {
+  const traces = /* @__PURE__ */ new Map();
+  for (const span of spans) {
+    const existing = traces.get(span.traceId) ?? [];
+    existing.push(span);
+    traces.set(span.traceId, existing);
+  }
+  return traces;
+}
+function buildSpanTree(spans) {
+  const spanMap = new Map(spans.map((s) => [s.spanId, s]));
+  const childMap = /* @__PURE__ */ new Map();
+  for (const span of spans) {
+    const parentId = span.parentSpanId ?? void 0;
+    const siblings = childMap.get(parentId) ?? [];
+    siblings.push(span);
+    childMap.set(parentId, siblings);
+  }
+  function buildNode(span, depth, index2) {
+    const children = (childMap.get(span.spanId) ?? []).sort((a, b) => a.startTime - b.startTime).map((child, i) => buildNode(child, depth + 1, i));
+    return { span, children, depth, index: index2 };
+  }
+  const roots = spans.filter((s) => !s.parentSpanId || !spanMap.has(s.parentSpanId));
+  return roots.sort((a, b) => a.startTime - b.startTime).map((root, i) => buildNode(root, 0, i));
+}
+function calculateHierarchicalLayout(trees, options) {
+  const positions = /* @__PURE__ */ new Map();
+  const { nodeWidth, nodeHeight, horizontalSpacing, verticalSpacing } = options;
+  const depthWidths = /* @__PURE__ */ new Map();
+  function layoutNode(node, offsetX2) {
+    const { span, children, depth } = node;
+    const currentX = depthWidths.get(depth) ?? offsetX2;
+    const y = depth * (nodeHeight + verticalSpacing);
+    if (children.length === 0) {
+      positions.set(span.spanId, { x: currentX, y });
+      depthWidths.set(depth, currentX + nodeWidth + horizontalSpacing);
+      return currentX + nodeWidth / 2;
+    }
+    const childCenters = [];
+    for (const child of children) {
+      const center = layoutNode(child, currentX);
+      childCenters.push(center);
+    }
+    const minCenter = Math.min(...childCenters);
+    const maxCenter = Math.max(...childCenters);
+    const parentCenter = (minCenter + maxCenter) / 2;
+    const parentX = parentCenter - nodeWidth / 2;
+    positions.set(span.spanId, { x: Math.max(currentX, parentX), y });
+    const newWidth = Math.max(depthWidths.get(depth) ?? 0, parentX + nodeWidth + horizontalSpacing);
+    depthWidths.set(depth, newWidth);
+    return parentCenter;
+  }
+  let offsetX = 0;
+  for (const tree of trees) {
+    layoutNode(tree, offsetX);
+    offsetX = Math.max(...Array.from(depthWidths.values())) + horizontalSpacing;
+  }
+  return positions;
+}
+function spanToNode(span, position, options) {
+  var _a;
+  const { nodeWidth, nodeHeight, kindColors, includeAttributes } = options;
+  const statusCode = ((_a = span.status) == null ? void 0 : _a.code) ?? "UNSET";
+  return {
+    id: span.spanId,
+    type: "text",
+    x: position.x,
+    y: position.y,
+    width: nodeWidth,
+    height: nodeHeight,
+    text: span.name,
+    color: statusCode === "ERROR" ? 1 : void 0,
+    // Red for errors
+    pv: {
+      nodeType: "span",
+      name: span.name,
+      description: formatDuration(span.duration),
+      shape: kindToShape(span.kind),
+      fill: statusCode === "ERROR" ? "#ef4444" : kindColors[span.kind],
+      states: {
+        [statusCode]: {
+          color: statusCode === "OK" ? "#22c55e" : statusCode === "ERROR" ? "#ef4444" : "#6b7280",
+          label: statusCode
+        }
+      },
+      otel: {
+        kind: "instance",
+        category: "span"
+      },
+      ...includeAttributes && span.attributes && Object.keys(span.attributes).length > 0 ? {
+        dataSchema: Object.fromEntries(Object.entries(span.attributes).map(([key, value]) => [
+          key,
+          { type: typeof value, required: false }
+        ]))
+      } : {}
+    }
+  };
+}
+function createEdge(parentSpanId, childSpanId, isCrossService) {
+  return {
+    id: `edge-${parentSpanId}-${childSpanId}`,
+    fromNode: parentSpanId,
+    toNode: childSpanId,
+    fromSide: "bottom",
+    toSide: "top",
+    toEnd: "arrow",
+    pv: {
+      edgeType: "span-child",
+      style: isCrossService ? "dashed" : "solid",
+      width: isCrossService ? 2 : 1
+    }
+  };
+}
+function createServiceGroup(serviceName, spans, positions, options) {
+  const serviceSpans = spans.filter((s) => getServiceName(s) === serviceName);
+  if (serviceSpans.length === 0)
+    return null;
+  const servicePositions = serviceSpans.map((s) => positions.get(s.spanId)).filter((p) => p !== void 0);
+  if (servicePositions.length === 0)
+    return null;
+  const minX = Math.min(...servicePositions.map((p) => p.x));
+  const maxX = Math.max(...servicePositions.map((p) => p.x));
+  const minY = Math.min(...servicePositions.map((p) => p.y));
+  const maxY = Math.max(...servicePositions.map((p) => p.y));
+  const padding = 20;
+  return {
+    id: `service-${serviceName}`,
+    type: "group",
+    x: minX - padding,
+    y: minY - padding - 30,
+    // Extra space for label
+    width: maxX - minX + options.nodeWidth + padding * 2,
+    height: maxY - minY + options.nodeHeight + padding * 2 + 30,
+    label: serviceName,
+    pv: {
+      nodeType: "service",
+      name: serviceName,
+      icon: "server"
+    }
+  };
+}
+function traceToCanvas(traceExport, options = {}) {
+  const opts = { ...DEFAULT_OPTIONS$4, ...options };
+  const spans = traceExport.spans.filter((s) => s.duration >= opts.minDurationMs);
+  if (spans.length === 0) {
+    return {
+      canvas: {
+        nodes: [],
+        edges: [],
+        pv: {
+          version: "1.0.0",
+          name: "Empty Trace"
+        }
+      },
+      stats: {
+        traceCount: 0,
+        spanCount: 0,
+        serviceCount: 0,
+        maxDepth: 0
+      }
+    };
+  }
+  const traceGroups = groupByTraceId(spans);
+  const allTrees = [];
+  for (const traceSpans of traceGroups.values()) {
+    allTrees.push(...buildSpanTree(traceSpans));
+  }
+  const positions = calculateHierarchicalLayout(allTrees, opts);
+  const spanNodes = spans.map((span) => {
+    const position = positions.get(span.spanId) ?? { x: 0, y: 0 };
+    return spanToNode(span, position, opts);
+  });
+  const spanMap = new Map(spans.map((s) => [s.spanId, s]));
+  const edges = spans.filter((span) => span.parentSpanId && spanMap.has(span.parentSpanId)).map((span) => {
+    const parent = spanMap.get(span.parentSpanId);
+    const isCrossService = getServiceName(span) !== getServiceName(parent);
+    return createEdge(span.parentSpanId, span.spanId, isCrossService);
+  });
+  const serviceGroups = [];
+  if (opts.groupByService) {
+    const services = new Set(spans.map(getServiceName));
+    for (const service of services) {
+      const group = createServiceGroup(service, spans, positions, opts);
+      if (group)
+        serviceGroups.push(group);
+    }
+  }
+  const maxDepth = Math.max(...allTrees.flatMap(function getDepths(tree) {
+    return [tree.depth, ...tree.children.flatMap(getDepths)];
+  }));
+  const canvas = {
+    nodes: [...serviceGroups, ...spanNodes],
+    edges,
+    pv: {
+      version: "1.0.0",
+      name: `Trace: ${traceExport.serviceName}`,
+      description: `Exported at ${traceExport.exportedAt}`,
+      nodeTypes: {
+        span: {
+          description: "OpenTelemetry span from trace",
+          shape: "rectangle"
+        },
+        service: {
+          description: "Service grouping",
+          icon: "server",
+          shape: "rectangle"
+        }
+      },
+      edgeTypes: {
+        "span-child": {
+          label: "Child span",
+          directed: true
+        }
+      },
+      display: {
+        layout: "manual",
+        // We've already laid out the nodes
+        animations: {
+          enabled: true,
+          speed: 1
+        }
+      }
+    }
+  };
+  return {
+    canvas,
+    stats: {
+      traceCount: traceGroups.size,
+      spanCount: spans.length,
+      serviceCount: new Set(spans.map(getServiceName)).size,
+      maxDepth
+    }
+  };
+}
+function traceToCanvasJson(traceExport, options = {}) {
+  const { canvas } = traceToCanvas(traceExport, options);
+  return JSON.stringify(canvas, null, 2);
+}
 class SessionManager {
   constructor(config = {}) {
     this.sessions = /* @__PURE__ */ new Map();
@@ -9582,6 +10200,7 @@ function isRuleDisabled(severity) {
   }
   return false;
 }
+const tracer = trace.getTracer("principal-view-core");
 class GraphRulesEngine {
   constructor() {
     this.rules = /* @__PURE__ */ new Map();
@@ -9631,45 +10250,148 @@ class GraphRulesEngine {
    * Lint a configuration against all enabled rules
    */
   async lint(configuration, options) {
-    const violations = [];
-    for (const [ruleId, rule] of this.rules) {
-      if (!this.shouldRunRule(rule, options)) {
-        continue;
+    const span = tracer.startSpan("rules.lint", {
+      attributes: {
+        "lint.config.path": (options == null ? void 0 : options.configPath) ?? "unknown",
+        "lint.rules.total": this.rules.size,
+        "lint.library.provided": !!(options == null ? void 0 : options.library)
       }
-      const context = this.buildRuleContext(configuration, rule, options);
-      const effectiveSeverity = this.getEffectiveSeverity(rule, options);
-      if (effectiveSeverity === "off") {
-        continue;
-      }
-      try {
-        const ruleViolations = await rule.check(context);
-        for (const violation of ruleViolations) {
-          violation.severity = effectiveSeverity;
-          violations.push(violation);
+    });
+    try {
+      const violations = [];
+      let rulesExecuted = 0;
+      let rulesSkipped = 0;
+      span.addEvent("lint.started", {
+        "rules.registered": this.rules.size
+      });
+      for (const [ruleId, rule] of this.rules) {
+        if (!this.shouldRunRule(rule, options)) {
+          rulesSkipped++;
+          continue;
         }
-      } catch (error) {
-        violations.push({
-          ruleId,
-          severity: "error",
-          message: `Rule "${ruleId}" threw an error: ${error instanceof Error ? error.message : String(error)}`,
-          impact: "Rule could not complete validation",
-          fixable: false
+        const context = this.buildRuleContext(configuration, rule, options);
+        const effectiveSeverity = this.getEffectiveSeverity(rule, options);
+        if (effectiveSeverity === "off") {
+          rulesSkipped++;
+          continue;
+        }
+        const ruleSpan = tracer.startSpan("rule.execute", {
+          attributes: {
+            "rule.id": ruleId,
+            "rule.category": rule.category,
+            "rule.severity": effectiveSeverity,
+            "rule.name": rule.name,
+            "parent.span.id": span.spanContext().spanId
+          }
         });
+        try {
+          const ruleStartTime = Date.now();
+          const ruleViolations = await rule.check(context);
+          const ruleDuration = Date.now() - ruleStartTime;
+          rulesExecuted++;
+          for (const violation of ruleViolations) {
+            violation.severity = effectiveSeverity;
+            violations.push(violation);
+          }
+          ruleSpan.addEvent("rule.completed", {
+            "rule.violations.count": ruleViolations.length,
+            "rule.duration.ms": ruleDuration
+          });
+          if (ruleViolations.length > 0) {
+            span.addEvent("violations.detected", {
+              "rule.id": ruleId,
+              "rule.category": rule.category,
+              "violations.count": ruleViolations.length,
+              "violations.severity": effectiveSeverity
+            });
+          }
+          ruleSpan.setStatus({ code: SpanStatusCode.OK });
+        } catch (error) {
+          const errorMessage = error instanceof Error ? error.message : String(error);
+          violations.push({
+            ruleId,
+            severity: "error",
+            message: `Rule "${ruleId}" threw an error: ${errorMessage}`,
+            impact: "Rule could not complete validation",
+            fixable: false
+          });
+          ruleSpan.addEvent("rule.error", {
+            "error.message": errorMessage,
+            "error.type": error instanceof Error ? error.constructor.name : "unknown"
+          });
+          ruleSpan.setStatus({
+            code: SpanStatusCode.ERROR,
+            message: errorMessage
+          });
+          span.addEvent("rule.execution.error", {
+            "rule.id": ruleId,
+            "error.message": errorMessage
+          });
+        } finally {
+          ruleSpan.end();
+        }
       }
+      const result = this.buildResult(violations);
+      span.addEvent("lint.completed", {
+        "lint.rules.executed": rulesExecuted,
+        "lint.rules.skipped": rulesSkipped,
+        "lint.violations.total": violations.length,
+        "lint.violations.errors": result.errorCount,
+        "lint.violations.warnings": result.warningCount,
+        "lint.violations.fixable": result.fixableCount
+      });
+      span.setStatus({ code: SpanStatusCode.OK });
+      return result;
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error);
+      span.setStatus({
+        code: SpanStatusCode.ERROR,
+        message: errorMessage
+      });
+      span.recordException(error instanceof Error ? error : new Error(errorMessage));
+      throw error;
+    } finally {
+      span.end();
     }
-    return this.buildResult(violations);
   }
   /**
    * Lint a configuration with VGC config file settings applied
    */
   async lintWithConfig(configuration, privuConfig, options) {
-    const { ruleOptions, severityOverrides, disabledRules } = this.parsePrivuConfigRules(privuConfig.rules);
-    return this.lint(configuration, {
-      ...options,
-      ruleOptions,
-      severityOverrides,
-      disabledRules: [...(options == null ? void 0 : options.disabledRules) ?? [], ...disabledRules]
+    const span = tracer.startSpan("rules.lintWithConfig", {
+      attributes: {
+        "config.path": (options == null ? void 0 : options.configPath) ?? "unknown",
+        "config.has.rules": !!privuConfig.rules,
+        "config.has.library": !!privuConfig.library
+      }
     });
+    try {
+      span.addEvent("config.parsing");
+      const { ruleOptions, severityOverrides, disabledRules } = this.parsePrivuConfigRules(privuConfig.rules);
+      span.addEvent("config.parsed", {
+        "config.rule.options.count": ruleOptions.size,
+        "config.severity.overrides.count": severityOverrides.size,
+        "config.disabled.rules.count": disabledRules.length
+      });
+      const result = await this.lint(configuration, {
+        ...options,
+        ruleOptions,
+        severityOverrides,
+        disabledRules: [...(options == null ? void 0 : options.disabledRules) ?? [], ...disabledRules]
+      });
+      span.setStatus({ code: SpanStatusCode.OK });
+      return result;
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error);
+      span.setStatus({
+        code: SpanStatusCode.ERROR,
+        message: errorMessage
+      });
+      span.recordException(error instanceof Error ? error : new Error(errorMessage));
+      throw error;
+    } finally {
+      span.end();
+    }
   }
   /**
    * Check if a rule should run based on options
@@ -11465,6 +12187,8 @@ const dist = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty
   DEFAULT_INCLUDE_PATTERNS,
   EventProcessor,
   EventRecorderService,
+  EventValidationError,
+  EventValidator,
   GraphConverter,
   GraphInstrumentationHelper,
   GraphRulesEngine,
@@ -11474,6 +12198,7 @@ const dist = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty
   PathBasedEventProcessor,
   PathMatcher,
   SessionManager,
+  TypeScriptGenerator,
   VALID_RULE_IDS,
   VALID_SEVERITIES,
   ValidationEngine,
@@ -11482,8 +12207,11 @@ const dist = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty
   createDefaultRulesEngine,
   createResourceSignature,
   createRulesEngine,
+  createValidatedEmitter,
   deadEndStates,
   formatConfigErrors,
+  generateTypes,
+  generatorRegistry,
   getConfigNameFromFilename: getConfigNameFromFilename$1,
   getDefaultConfig,
   hasPVExtension,
@@ -11515,6 +12243,8 @@ const dist = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty
   resolveCanvasColor,
   signatureToKey,
   stateTransitionReferences,
+  traceToCanvas,
+  traceToCanvasJson,
   unreachableStates,
   validActionPatterns,
   validColorFormat,
@@ -47123,7 +47853,7 @@ const lucideReact = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineP
   createLucideIcon: createLucideIcon$1,
   icons: index
 }, Symbol.toStringTag, { value: "Module" }));
-const require$$1 = /* @__PURE__ */ getAugmentedNamespace(lucideReact);
+const require$$3 = /* @__PURE__ */ getAugmentedNamespace(lucideReact);
 var hasRequiredIconResolver;
 function requireIconResolver() {
   if (hasRequiredIconResolver) return iconResolver;
@@ -47169,7 +47899,7 @@ function requireIconResolver() {
   iconResolver.Icon = void 0;
   iconResolver.resolveIcon = resolveIcon;
   const jsx_runtime_1 = require$$0;
-  const LucideIcons = __importStar(require$$1);
+  const LucideIcons = __importStar(require$$3);
   function resolveIcon(icon, size = 20, className) {
     if (!icon)
       return null;
@@ -47309,13 +48039,24 @@ function requireCustomNode() {
   const react_2 = /* @__PURE__ */ requireUmd();
   const iconResolver_1 = requireIconResolver();
   const NodeTooltip_1 = requireNodeTooltip();
+  function hexToLightColor(hexColor, lightness = 0.88) {
+    const hex = hexColor.replace("#", "");
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+    const newR = Math.round(r + (255 - r) * lightness);
+    const newG = Math.round(g + (255 - g) * lightness);
+    const newB = Math.round(b + (255 - b) * lightness);
+    const toHex = (n) => n.toString(16).padStart(2, "0");
+    return `#${toHex(newR)}${toHex(newG)}${toHex(newB)}`;
+  }
   const CustomNode$1 = ({ data, selected, dragging }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
     const [isHovered, setIsHovered] = (0, react_1.useState)(false);
     const showTooltip = isHovered && !dragging;
     const nodeRef = (0, react_1.useRef)(null);
     const nodeProps = data;
-    const { typeDefinition, state, hasViolations, data: nodeData, animationType, animationDuration = 1e3, editable = false, tooltipsEnabled = true } = nodeProps;
+    const { typeDefinition, state, hasViolations, data: nodeData, animationType, animationDuration = 1e3, editable = false, tooltipsEnabled = true, isHighlighted = false } = nodeProps;
     const otelInfo = nodeData == null ? void 0 : nodeData.otel;
     const description = nodeData == null ? void 0 : nodeData.description;
     const getOtelBadgeColor = (kind) => {
@@ -47388,7 +48129,7 @@ function requireCustomNode() {
     const getShapeStyles = () => {
       const baseStyles = {
         padding: "12px 16px",
-        backgroundColor: isGroup ? "rgba(255, 255, 255, 0.7)" : "white",
+        backgroundColor: isGroup ? "rgba(255, 255, 255, 0.7)" : hexToLightColor(fillColor),
         color: "#000",
         border: `2px solid ${hasViolations ? "#D0021B" : strokeColor}`,
         fontSize: "12px",
@@ -47404,7 +48145,7 @@ function requireCustomNode() {
         alignItems: "center",
         justifyContent: isGroup ? "flex-start" : "center",
         gap: "4px",
-        boxShadow: selected ? `0 0 0 2px ${strokeColor}` : "0 2px 4px rgba(0,0,0,0.1)",
+        boxShadow: isHighlighted ? `0 0 0 3px #3b82f6, 0 0 20px rgba(59, 130, 246, 0.5)` : selected ? `0 0 0 2px ${strokeColor}` : "0 2px 4px rgba(0,0,0,0.1)",
         transition: "box-shadow 0.2s ease",
         animationDuration: animationType ? `${animationDuration}ms` : void 0,
         boxSizing: "border-box"
@@ -47481,7 +48222,7 @@ function requireCustomNode() {
       right: hexagonBorderWidth,
       bottom: hexagonBorderWidth,
       clipPath: hexagonClipPath,
-      backgroundColor: "white",
+      backgroundColor: hexToLightColor(fillColor),
       color: "#000",
       display: "flex",
       flexDirection: "column",
@@ -47513,7 +48254,7 @@ function requireCustomNode() {
       right: diamondBorderWidth,
       bottom: diamondBorderWidth,
       clipPath: diamondClipPath,
-      backgroundColor: "white",
+      backgroundColor: hexToLightColor(fillColor),
       color: "#000",
       display: "flex",
       flexDirection: "column",
@@ -48613,7 +49354,7 @@ function requireGraphRenderer() {
         zIndex: 5
       }, children: [(0, jsx_runtime_1.jsx)("line", { x1: screenX, y1: screenY - size, x2: screenX, y2: screenY + size, stroke: color, strokeWidth, opacity: 0.7 }), (0, jsx_runtime_1.jsx)("line", { x1: screenX - size, y1: screenY, x2: screenX + size, y2: screenY, stroke: color, strokeWidth, opacity: 0.7 }), (0, jsx_runtime_1.jsx)("circle", { cx: screenX, cy: screenY, r: 3, fill: color, opacity: 0.7 })] });
     };
-    const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges, violations = [], configName: _configName, showMinimap = true, showControls = true, showBackground = true, backgroundVariant = "dots", backgroundGap, showCenterIndicator = false, showTooltips = true, fitViewDuration = 200, events = [], onEventProcessed, editable = false, onPendingChangesChange, onEditStateChange, editStateRef, onSourceClick }) => {
+    const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges, violations = [], configName: _configName, showMinimap = false, showControls = true, showBackground = true, backgroundVariant = "dots", backgroundGap, showCenterIndicator = false, showTooltips = true, fitViewDuration = 200, highlightedNodeId, events = [], onEventProcessed, editable = false, onPendingChangesChange, onEditStateChange, editStateRef, onSourceClick }) => {
       const { fitView } = (0, react_2.useReactFlow)();
       const { theme } = (0, industry_theme_1.useTheme)();
       const [animationState, setAnimationState] = (0, react_1.useState)({
@@ -48831,7 +49572,7 @@ function requireGraphRenderer() {
           return;
         }
         if (uniqueTypes.length === 1) {
-          createEdge(connection.source, connection.target, uniqueTypes[0], connection.sourceHandle ?? void 0, connection.targetHandle ?? void 0);
+          createEdge2(connection.source, connection.target, uniqueTypes[0], connection.sourceHandle ?? void 0, connection.targetHandle ?? void 0);
         } else {
           setPendingConnection({
             from: connection.source,
@@ -48842,7 +49583,7 @@ function requireGraphRenderer() {
           });
         }
       }, [editable, nodes, configuration.allowedConnections]);
-      const createEdge = (0, react_1.useCallback)((from, to, type2, sourceHandle, targetHandle) => {
+      const createEdge2 = (0, react_1.useCallback)((from, to, type2, sourceHandle, targetHandle) => {
         const edgeId = `${from}-${to}-${type2}-${Date.now()}`;
         const newEdge = {
           id: edgeId,
@@ -48867,9 +49608,9 @@ function requireGraphRenderer() {
       const handleEdgeTypeSelect = (0, react_1.useCallback)((type2) => {
         if (!pendingConnection)
           return;
-        createEdge(pendingConnection.from, pendingConnection.to, type2, pendingConnection.sourceHandle, pendingConnection.targetHandle);
+        createEdge2(pendingConnection.from, pendingConnection.to, type2, pendingConnection.sourceHandle, pendingConnection.targetHandle);
         setPendingConnection(null);
-      }, [pendingConnection, createEdge]);
+      }, [pendingConnection, createEdge2]);
       const handleCancelEdgeTypePicker = (0, react_1.useCallback)(() => {
         setPendingConnection(null);
       }, []);
@@ -49064,7 +49805,7 @@ function requireGraphRenderer() {
         }
       }, [events, onEventProcessed]);
       const xyflowNodesBase = (0, react_1.useMemo)(() => {
-        const converted = (0, graphConverter_1.convertToXYFlowNodes)(nodes, configuration, violations);
+        const converted = (0, graphConverter_1.convertToXYFlowNodes)(localNodes, configuration, violations);
         return converted.map((node) => {
           const animation = animationState.nodeAnimations[node.id];
           const pendingPosition = editStateRef.current.positionChanges.get(node.id);
@@ -49075,6 +49816,7 @@ function requireGraphRenderer() {
               ...node.data,
               editable,
               tooltipsEnabled: showTooltips,
+              isHighlighted: highlightedNodeId === node.id,
               ...animation ? {
                 animationType: animation.type,
                 animationDuration: animation.duration
@@ -49082,7 +49824,7 @@ function requireGraphRenderer() {
             }
           };
         });
-      }, [nodes, configuration, violations, animationState.nodeAnimations, editable, showTooltips, editStateRef]);
+      }, [localNodes, configuration, violations, animationState.nodeAnimations, editable, showTooltips, highlightedNodeId, editStateRef]);
       const baseNodesKey = (0, react_1.useMemo)(() => {
         return nodes.map((n) => n.id).sort().join(",");
       }, [nodes]);
@@ -49144,8 +49886,9 @@ function requireGraphRenderer() {
       }, [editable, updateEditState]);
       const xyflowEdges = (0, react_1.useMemo)(() => {
         const converted = (0, graphConverter_1.convertToXYFlowEdges)(edges, configuration, violations);
-        return converted.map((edge) => {
+        const mappedEdges = converted.map((edge) => {
           const animation = animationState.edgeAnimations[edge.id];
+          const isSelected = selectedEdgeIds.has(edge.id);
           return {
             ...edge,
             data: {
@@ -49156,10 +49899,21 @@ function requireGraphRenderer() {
                 animationDuration: animation.duration,
                 animationDirection: animation.direction
               } : {}
-            }
+            },
+            // Add z-index to help with stacking (selected edges get higher values)
+            zIndex: isSelected ? 1e3 : 0
           };
         });
-      }, [edges, configuration, violations, animationState.edgeAnimations, showTooltips]);
+        return mappedEdges.sort((a, b) => {
+          const aSelected = selectedEdgeIds.has(a.id);
+          const bSelected = selectedEdgeIds.has(b.id);
+          if (aSelected && !bSelected)
+            return 1;
+          if (!aSelected && bSelected)
+            return -1;
+          return 0;
+        });
+      }, [edges, configuration, violations, animationState.edgeAnimations, showTooltips, selectedEdgeIds]);
       (0, react_1.useEffect)(() => {
         const timeoutId = setTimeout(() => {
           fitView({
@@ -49389,8 +50143,8 @@ function requireGraphRenderer() {
         }, children: (0, jsx_runtime_1.jsx)("p", { children: "No canvas data provided." }) });
       }
       const { configuration, nodes, edges } = canvasData;
-      const { violations, configName, showMinimap, showControls, showBackground, backgroundVariant, backgroundGap, showCenterIndicator, showTooltips, fitViewDuration, events, onEventProcessed, editable, onPendingChangesChange, onSourceClick } = props;
-      return (0, jsx_runtime_1.jsx)("div", { className, style: { width, height, position: "relative" }, children: (0, jsx_runtime_1.jsx)(react_2.ReactFlowProvider, { children: (0, jsx_runtime_1.jsx)(GraphRendererInner, { configuration, nodes, edges, violations, configName, showMinimap, showControls, showBackground, backgroundVariant, backgroundGap, showCenterIndicator, showTooltips, fitViewDuration, events, onEventProcessed, editable, onPendingChangesChange, editStateRef, onSourceClick }) }) });
+      const { violations, configName, showMinimap, showControls, showBackground, backgroundVariant, backgroundGap, showCenterIndicator, showTooltips, fitViewDuration, highlightedNodeId, events, onEventProcessed, editable, onPendingChangesChange, onSourceClick } = props;
+      return (0, jsx_runtime_1.jsx)("div", { className, style: { width, height, position: "relative" }, children: (0, jsx_runtime_1.jsx)(react_2.ReactFlowProvider, { children: (0, jsx_runtime_1.jsx)(GraphRendererInner, { configuration, nodes, edges, violations, configName, showMinimap, showControls, showBackground, backgroundVariant, backgroundGap, showCenterIndicator, showTooltips, fitViewDuration, highlightedNodeId, events, onEventProcessed, editable, onPendingChangesChange, editStateRef, onSourceClick }) }) });
     });
     exports$1.GraphRenderer.displayName = "GraphRenderer";
   })(GraphRenderer);
@@ -49481,6 +50235,141 @@ function requireConfigurationSelector() {
   ConfigurationSelector.ConfigurationSelector = ConfigurationSelector$1;
   return ConfigurationSelector;
 }
+var TestEventPanel = {};
+var hasRequiredTestEventPanel;
+function requireTestEventPanel() {
+  if (hasRequiredTestEventPanel) return TestEventPanel;
+  hasRequiredTestEventPanel = 1;
+  Object.defineProperty(TestEventPanel, "__esModule", { value: true });
+  TestEventPanel.TestEventPanel = void 0;
+  const jsx_runtime_1 = require$$0;
+  const react_1 = React2;
+  const industry_theme_1 = requireCjs();
+  const lucide_react_1 = require$$3;
+  const TestEventPanel$1 = ({ spans, currentSpanIndex, currentEventIndex, highlightedPhase }) => {
+    const { theme } = (0, industry_theme_1.useTheme)();
+    const [showHelp, setShowHelp] = (0, react_1.useState)(false);
+    const currentSpan = spans[currentSpanIndex];
+    const eventsUpToNow = (currentSpan == null ? void 0 : currentSpan.events.slice(0, currentEventIndex + 1)) || [];
+    return (0, jsx_runtime_1.jsxs)("div", { style: {
+      width: "100%",
+      height: "100%",
+      backgroundColor: theme.colors.background,
+      color: theme.colors.text,
+      padding: "20px",
+      fontFamily: theme.fonts.monospace,
+      fontSize: "14px",
+      overflow: "auto",
+      boxSizing: "border-box"
+    }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "15px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontWeight: "bold", fontSize: "18px" }, children: "Wide Event Pattern - Code Journey" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setShowHelp(true), style: {
+      background: "transparent",
+      border: "none",
+      cursor: "pointer",
+      padding: "4px",
+      display: "flex",
+      alignItems: "center",
+      color: theme.colors.textMuted
+    }, onMouseEnter: (e) => {
+      e.currentTarget.style.color = theme.colors.text;
+    }, onMouseLeave: (e) => {
+      e.currentTarget.style.color = theme.colors.textMuted;
+    }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.HelpCircle, { size: 20 }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { fontSize: "13px", color: theme.colors.textMuted, marginBottom: "15px" }, children: ["Test: ", (currentSpan == null ? void 0 : currentSpan.name) || "Loading..."] }), showHelp && (0, jsx_runtime_1.jsx)("div", { style: {
+      position: "fixed",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: "rgba(0, 0, 0, 0.7)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      zIndex: 9999
+    }, onClick: () => setShowHelp(false), children: (0, jsx_runtime_1.jsxs)("div", { style: {
+      backgroundColor: theme.colors.background,
+      color: theme.colors.text,
+      padding: "24px",
+      borderRadius: "8px",
+      maxWidth: "600px",
+      border: `1px solid ${theme.colors.border}`
+    }, onClick: (e) => e.stopPropagation(), children: [(0, jsx_runtime_1.jsx)("div", { style: { fontWeight: "bold", fontSize: "18px", marginBottom: "16px" }, children: "How to Read This Panel" }), (0, jsx_runtime_1.jsxs)("div", { style: { fontSize: "14px", marginBottom: "16px", lineHeight: "1.6" }, children: [(0, jsx_runtime_1.jsx)("p", { style: { marginBottom: "12px" }, children: (0, jsx_runtime_1.jsx)("strong", { children: "Watch how execution flows through files:" }) }), (0, jsx_runtime_1.jsxs)("ul", { style: { marginLeft: "20px", marginBottom: "16px" }, children: [(0, jsx_runtime_1.jsx)("li", { style: { marginBottom: "8px" }, children: (0, jsx_runtime_1.jsx)("span", { style: { color: "#60a5fa" }, children: "Blue = Test file" }) }), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("span", { style: { color: "#4ade80" }, children: "Green → Code under test" }) })] }), (0, jsx_runtime_1.jsx)("p", { style: { marginBottom: "12px" }, children: (0, jsx_runtime_1.jsx)("strong", { children: "Span Context (Static)" }) }), (0, jsx_runtime_1.jsx)("pre", { style: {
+      background: theme.colors.surface,
+      padding: "12px",
+      borderRadius: "4px",
+      fontSize: "13px",
+      overflow: "auto"
+    }, children: `{
+  "test.file": "GraphConverter.test.ts",
+  "test.suite": "GraphConverter",
+  "test.result": "pass"
+}` })] }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setShowHelp(false), style: {
+      padding: "8px 16px",
+      backgroundColor: theme.colors.primary,
+      color: theme.colors.background,
+      border: "none",
+      borderRadius: "4px",
+      cursor: "pointer",
+      fontSize: "14px",
+      fontWeight: 500
+    }, children: "Got it" })] }) }), currentSpan && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { style: {
+      color: "#4ade80",
+      fontWeight: "bold",
+      marginBottom: "8px",
+      fontSize: "15px"
+    }, children: "Event Timeline (Context Mutations)" }), eventsUpToNow.map((event, idx) => {
+      const filepath = event.attributes["code.filepath"];
+      const lineno = event.attributes["code.lineno"];
+      const isCodeUnderTest = filepath && filepath !== "GraphConverter.test.ts";
+      const eventPhase = event.name.split(".")[0];
+      const isHighlighted = highlightedPhase === eventPhase;
+      return (0, jsx_runtime_1.jsxs)("div", { style: {
+        marginBottom: "12px",
+        paddingBottom: "12px",
+        borderBottom: idx < eventsUpToNow.length - 1 ? `1px solid ${theme.colors.border}` : "none",
+        opacity: highlightedPhase && !isHighlighted ? 0.4 : 1,
+        transition: "opacity 0.2s ease",
+        transform: isHighlighted ? "scale(1.02)" : "scale(1)",
+        backgroundColor: isHighlighted ? theme.colors.surface : "transparent",
+        padding: isHighlighted ? "8px" : "0",
+        borderRadius: "4px"
+      }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        marginBottom: "4px",
+        gap: "8px"
+      }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { color: "#f59e0b", fontSize: "13px", flexShrink: 0 }, children: [idx + 1, ". ", event.name] }), filepath && (0, jsx_runtime_1.jsxs)("div", { style: {
+        fontSize: "12px",
+        color: isCodeUnderTest ? "#4ade80" : "#60a5fa",
+        fontFamily: "monospace",
+        background: isCodeUnderTest ? "#064e3b" : "#1e3a8a",
+        padding: "2px 6px",
+        borderRadius: "3px",
+        flexShrink: 1,
+        minWidth: 0,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap"
+      }, children: [isCodeUnderTest && "→ ", filepath, ":", lineno] })] }), (0, jsx_runtime_1.jsx)("pre", { style: {
+        background: theme.colors.surface,
+        padding: "8px",
+        borderRadius: "4px",
+        margin: 0,
+        fontSize: "12px",
+        lineHeight: "1.4",
+        overflow: "auto",
+        maxWidth: "100%"
+      }, children: JSON.stringify(Object.fromEntries(Object.entries(event.attributes).filter(([key]) => key !== "code.filepath" && key !== "code.lineno")), null, 2) })] }, idx);
+    })] }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
+      marginTop: "20px",
+      paddingTop: "15px",
+      borderTop: `1px solid ${theme.colors.border}`,
+      fontSize: "13px",
+      color: theme.colors.textMuted
+    }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "8px" }, children: [(0, jsx_runtime_1.jsx)("strong", { children: "Total tests:" }), " ", spans.length] }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "8px" }, children: [(0, jsx_runtime_1.jsx)("strong", { children: "Pattern:" }), " One span per test + event timeline"] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Status:" }), " ", (0, jsx_runtime_1.jsx)("span", { style: { color: "#4ade80" }, children: "All Passed ✓" })] })] })] });
+  };
+  TestEventPanel.TestEventPanel = TestEventPanel$1;
+  return TestEventPanel;
+}
 var GenericNode = {};
 var hasRequiredGenericNode;
 function requireGenericNode() {
@@ -49525,7 +50414,7 @@ function requireDist() {
   hasRequiredDist = 1;
   (function(exports$1) {
     Object.defineProperty(exports$1, "__esModule", { value: true });
-    exports$1.resolveIcon = exports$1.Icon = exports$1.convertToXYFlowEdges = exports$1.convertToXYFlowNodes = exports$1.NodeTooltip = exports$1.CustomEdge = exports$1.GenericEdge = exports$1.CustomNode = exports$1.GenericNode = exports$1.ConfigurationSelector = exports$1.NodeInfoPanel = exports$1.EdgeInfoPanel = exports$1.MetricsDashboard = exports$1.EventLog = exports$1.GraphRenderer = void 0;
+    exports$1.resolveIcon = exports$1.Icon = exports$1.convertToXYFlowEdges = exports$1.convertToXYFlowNodes = exports$1.NodeTooltip = exports$1.CustomEdge = exports$1.GenericEdge = exports$1.CustomNode = exports$1.GenericNode = exports$1.TestEventPanel = exports$1.ConfigurationSelector = exports$1.NodeInfoPanel = exports$1.EdgeInfoPanel = exports$1.MetricsDashboard = exports$1.EventLog = exports$1.GraphRenderer = void 0;
     var GraphRenderer_1 = requireGraphRenderer();
     Object.defineProperty(exports$1, "GraphRenderer", { enumerable: true, get: function() {
       return GraphRenderer_1.GraphRenderer;
@@ -49550,6 +50439,10 @@ function requireDist() {
     Object.defineProperty(exports$1, "ConfigurationSelector", { enumerable: true, get: function() {
       return ConfigurationSelector_1.ConfigurationSelector;
     } });
+    var TestEventPanel_1 = requireTestEventPanel();
+    Object.defineProperty(exports$1, "TestEventPanel", { enumerable: true, get: function() {
+      return TestEventPanel_1.TestEventPanel;
+    } });
     var GenericNode_1 = requireGenericNode();
     Object.defineProperty(exports$1, "GenericNode", { enumerable: true, get: function() {
       return GenericNode_1.GenericNode;
@@ -51848,12 +52741,12 @@ const TraceViewerPanel = ({
                       boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
                       zIndex: 100
                     },
-                    children: state.availableTraces.map((trace) => {
-                      const isSelected = trace.id === state.selectedTraceId;
+                    children: state.availableTraces.map((trace2) => {
+                      const isSelected = trace2.id === state.selectedTraceId;
                       return /* @__PURE__ */ jsxs(
                         "button",
                         {
-                          onClick: () => handleTraceSelect(trace.id),
+                          onClick: () => handleTraceSelect(trace2.id),
                           style: {
                             display: "flex",
                             flexDirection: "column",
@@ -51878,22 +52771,22 @@ const TraceViewerPanel = ({
                                   fontSize: theme.fontSizes[1],
                                   fontWeight: isSelected ? 500 : 400
                                 },
-                                children: trace.name
+                                children: trace2.name
                               }
                             ),
-                            trace.packageName && /* @__PURE__ */ jsx(
+                            trace2.packageName && /* @__PURE__ */ jsx(
                               "span",
                               {
                                 style: {
                                   fontSize: theme.fontSizes[0],
                                   color: theme.colors.textMuted
                                 },
-                                children: trace.packageName
+                                children: trace2.packageName
                               }
                             )
                           ]
                         },
-                        trace.id
+                        trace2.id
                       );
                     })
                   }
@@ -52170,6 +53063,58 @@ const ExecutionStats = ({ metadata }) => {
     }
   );
 };
+function mapEventToNodeId(event, canvas) {
+  var _a, _b, _c;
+  if (!canvas || !canvas.nodes || canvas.nodes.length === 0) {
+    return null;
+  }
+  for (const node of canvas.nodes) {
+    const pvEvents = (_a = node.pv) == null ? void 0 : _a.events;
+    if (pvEvents && typeof pvEvents === "object") {
+      if (event.name in pvEvents) {
+        return node.id;
+      }
+    }
+  }
+  if (event.attributes) {
+    for (const node of canvas.nodes) {
+      const resourceMatch = (_c = (_b = node.pv) == null ? void 0 : _b.otel) == null ? void 0 : _c.resourceMatch;
+      if (resourceMatch && typeof resourceMatch === "object") {
+        const matches = Object.entries(resourceMatch).every(([key, pattern]) => {
+          var _a2;
+          const value = (_a2 = event.attributes) == null ? void 0 : _a2[key];
+          if (value === void 0) return false;
+          if (typeof pattern === "string" && pattern === "*") {
+            return true;
+          }
+          return value === pattern;
+        });
+        if (matches) {
+          return node.id;
+        }
+      }
+    }
+  }
+  return null;
+}
+function buildEventToNodeMap(canvas) {
+  var _a;
+  const map2 = /* @__PURE__ */ new Map();
+  if (!canvas || !canvas.nodes) {
+    return map2;
+  }
+  for (const node of canvas.nodes) {
+    const pvEvents = (_a = node.pv) == null ? void 0 : _a.events;
+    if (pvEvents && typeof pvEvents === "object") {
+      for (const eventName of Object.keys(pvEvents)) {
+        if (!map2.has(eventName)) {
+          map2.set(eventName, node.id);
+        }
+      }
+    }
+  }
+  return map2;
+}
 const ExecutionViewerPanel = ({
   context,
   actions,
@@ -52188,7 +53133,8 @@ const ExecutionViewerPanel = ({
     showExecutionSelector: false,
     isPlaying: false,
     currentSpanIndex: 0,
-    currentEventIndex: 0
+    currentEventIndex: 0,
+    highlightedNodeId: null
   });
   const contextRef = useRef(context);
   const actionsRef = useRef(actions);
@@ -52199,6 +53145,7 @@ const ExecutionViewerPanel = ({
   const selectedExecutionIdRef = useRef(null);
   selectedExecutionIdRef.current = state.selectedExecutionId;
   const playbackTimerRef = useRef(null);
+  const eventNodeMapRef = useRef(/* @__PURE__ */ new Map());
   const loadExecution = useCallback(async (executionId) => {
     setState((prev) => ({ ...prev, loading: prev.canvas === null, error: null }));
     try {
@@ -52283,6 +53230,11 @@ const ExecutionViewerPanel = ({
           console.warn("[ExecutionViewer] Failed to load canvas:", error);
         }
       }
+      if (canvas) {
+        eventNodeMapRef.current = buildEventToNodeMap(canvas);
+      } else {
+        eventNodeMapRef.current = /* @__PURE__ */ new Map();
+      }
       setState((prev) => ({
         ...prev,
         canvas,
@@ -52293,7 +53245,8 @@ const ExecutionViewerPanel = ({
         availableExecutions,
         selectedExecutionId: selectedExecution2.id,
         currentSpanIndex: 0,
-        currentEventIndex: 0
+        currentEventIndex: 0,
+        highlightedNodeId: null
       }));
     } catch (error) {
       console.error("[ExecutionViewer] Error loading execution:", error);
@@ -52331,7 +53284,8 @@ const ExecutionViewerPanel = ({
       ...prev,
       isPlaying: false,
       currentSpanIndex: 0,
-      currentEventIndex: 0
+      currentEventIndex: 0,
+      highlightedNodeId: null
     }));
   }, []);
   useEffect(() => {
@@ -52349,22 +53303,30 @@ const ExecutionViewerPanel = ({
     }, 0);
     playbackTimerRef.current = setInterval(() => {
       setState((prev) => {
-        var _a2;
+        var _a2, _b;
         const spans2 = prev.execution ? ExecutionLoader.getSpans(prev.execution) : [];
         if (spans2.length === 0) return { ...prev, isPlaying: false };
         const currentSpan = spans2[prev.currentSpanIndex];
         const spanEventCount = ((_a2 = currentSpan == null ? void 0 : currentSpan.events) == null ? void 0 : _a2.length) || 0;
+        let newSpanIndex = prev.currentSpanIndex;
+        let newEventIndex = prev.currentEventIndex;
         if (prev.currentEventIndex < spanEventCount - 1) {
-          return { ...prev, currentEventIndex: prev.currentEventIndex + 1 };
-        }
-        if (prev.currentSpanIndex < spans2.length - 1) {
-          return {
-            ...prev,
-            currentSpanIndex: prev.currentSpanIndex + 1,
-            currentEventIndex: 0
-          };
+          newEventIndex = prev.currentEventIndex + 1;
+        } else if (prev.currentSpanIndex < spans2.length - 1) {
+          newSpanIndex = prev.currentSpanIndex + 1;
+          newEventIndex = 0;
+        } else {
+          return { ...prev, isPlaying: false };
         }
-        return { ...prev, isPlaying: false };
+        const newSpan = spans2[newSpanIndex];
+        const newEvent = (_b = newSpan == null ? void 0 : newSpan.events) == null ? void 0 : _b[newEventIndex];
+        const highlightedNodeId = newEvent ? mapEventToNodeId(newEvent, prev.canvas) : null;
+        return {
+          ...prev,
+          currentSpanIndex: newSpanIndex,
+          currentEventIndex: newEventIndex,
+          highlightedNodeId
+        };
       });
     }, 800);
     return () => {
@@ -52657,7 +53619,8 @@ const ExecutionViewerPanel = ({
               showControls: true,
               showBackground: true,
               backgroundVariant: "lines",
-              showTooltips: true
+              showTooltips: true,
+              highlightedNodeId: state.highlightedNodeId
             }
           ) }) : /* @__PURE__ */ jsx(
             "div",
@@ -52714,6 +53677,15 @@ const ExecutionViewerPanel = ({
                   return /* @__PURE__ */ jsxs(
                     "div",
                     {
+                      onClick: () => {
+                        const highlightedNodeId = mapEventToNodeId(event, state.canvas);
+                        setState((prev) => ({
+                          ...prev,
+                          currentSpanIndex: spanIdx,
+                          currentEventIndex: eventIdx,
+                          highlightedNodeId
+                        }));
+                      },
                       style: {
                         padding: "8px",
                         marginBottom: "4px",
@@ -52721,7 +53693,8 @@ const ExecutionViewerPanel = ({
                         border: `1px solid ${isActive ? "#3b82f6" : "#333"}`,
                         borderRadius: "4px",
                         fontSize: "12px",
-                        opacity: isPast ? 0.5 : 1
+                        opacity: isPast ? 0.5 : 1,
+                        cursor: "pointer"
                       },
                       children: [
                         /* @__PURE__ */ jsx("div", { style: { fontWeight: 600, color: "#fff", marginBottom: "4px" }, children: event.name }),