@industry-theme/principal-view-panels 0.1.46 → 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 context = this.buildRuleContext(configuration, rule, options);
-      const effectiveSeverity = this.getEffectiveSeverity(rule, options);
-      if (effectiveSeverity === "off") {
-        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)
       }
-      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
                       );
                     })
                   }
@@ -51917,6 +52810,913 @@ const TraceViewerPanel = ({
     }
   );
 };
+const EXECUTION_FILE_PATTERNS = [
+  // Packages monorepo pattern: packages/core/__executions__/api-tests.spans.json
+  /^packages\/([^/]+)\/__executions__\/(.+)\.(?:spans|execution|events)\.json$/,
+  // Inside .principal-views: .principal-views/__executions__/graph-converter.spans.json
+  /^\.principal-views\/__executions__\/(.+)\.(?:spans|execution|events)\.json$/,
+  // Direct __executions__ folder: __executions__/test-run.spans.json
+  /^__executions__\/(.+)\.(?:spans|execution|events)\.json$/
+];
+function getExecutionNameFromFilename(filename) {
+  return filename.replace(/\.(?:spans|execution|events)\.json$/, "").split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+}
+function getCanvasBasename(filename) {
+  return filename.replace(/\.(?:spans|execution|events)\.json$/, "");
+}
+class ExecutionLoader {
+  /**
+   * Parse JSON execution artifact content
+   */
+  static parseExecutionArtifact(content) {
+    try {
+      const parsed = JSON.parse(content);
+      if (Array.isArray(parsed)) {
+        return { spans: parsed };
+      }
+      return parsed;
+    } catch (error) {
+      throw new Error(`Failed to parse execution artifact JSON: ${error.message}`);
+    }
+  }
+  /**
+   * Get spans array from artifact (handles both formats)
+   */
+  static getSpans(artifact) {
+    if (artifact.spans) {
+      return artifact.spans;
+    }
+    if (Array.isArray(artifact)) {
+      return artifact;
+    }
+    const spans = [];
+    for (const key in artifact) {
+      if (!isNaN(Number(key))) {
+        spans.push(artifact[key]);
+      }
+    }
+    return spans;
+  }
+  /**
+   * Extract metadata from an execution artifact
+   */
+  static getExecutionMetadata(artifact) {
+    const spans = ExecutionLoader.getSpans(artifact);
+    const spanCount = spans.length;
+    const eventCount = spans.reduce((total, span) => {
+      var _a;
+      return total + (((_a = span.events) == null ? void 0 : _a.length) || 0);
+    }, 0);
+    const metadata = artifact.metadata;
+    let status = "success";
+    if (metadata == null ? void 0 : metadata.status) {
+      status = metadata.status;
+    } else if (spans.length > 0) {
+      const hasError = spans.some(
+        (s) => s.status === "ERROR" || s.status === "error" || s.status === "FAILED"
+      );
+      status = hasError ? "error" : "OK";
+    }
+    return {
+      name: (metadata == null ? void 0 : metadata.canvasName) || "Untitled Execution",
+      canvasName: metadata == null ? void 0 : metadata.canvasName,
+      exportedAt: metadata == null ? void 0 : metadata.exportedAt,
+      source: metadata == null ? void 0 : metadata.source,
+      framework: metadata == null ? void 0 : metadata.framework,
+      status,
+      spanCount,
+      eventCount
+    };
+  }
+  /**
+   * Find all execution artifact files in the file tree
+   */
+  static findExecutionFiles(files) {
+    const executionFiles = [];
+    for (const file of files) {
+      const filePath = file.relativePath || file.path || "";
+      const fileName = file.name || filePath.split("/").pop() || "";
+      for (const pattern of EXECUTION_FILE_PATTERNS) {
+        const match = filePath.match(pattern);
+        if (match) {
+          let id;
+          let packageName;
+          let baseName;
+          if (pattern === EXECUTION_FILE_PATTERNS[0]) {
+            packageName = match[1];
+            baseName = match[2];
+            id = `${packageName}-${baseName}`;
+          } else if (pattern === EXECUTION_FILE_PATTERNS[1]) {
+            baseName = match[1];
+            id = `pv-${baseName}`;
+          } else {
+            baseName = match[1];
+            id = baseName;
+          }
+          executionFiles.push({
+            id,
+            name: getExecutionNameFromFilename(fileName),
+            path: filePath,
+            canvasBasename: getCanvasBasename(fileName),
+            packageName
+          });
+          break;
+        }
+      }
+    }
+    return executionFiles.sort((a, b) => {
+      if (a.packageName && b.packageName) {
+        const pkgCompare = a.packageName.localeCompare(b.packageName);
+        if (pkgCompare !== 0) return pkgCompare;
+      } else if (a.packageName) {
+        return -1;
+      } else if (b.packageName) {
+        return 1;
+      }
+      return a.name.localeCompare(b.name);
+    });
+  }
+  /**
+   * Find execution artifact for a given canvas file path
+   */
+  static findExecutionForCanvas(canvasPath, files) {
+    const canvasFilename = canvasPath.split("/").pop() || "";
+    const canvasBasename = canvasFilename.replace(/\.otel\.canvas$/, "");
+    const executions = ExecutionLoader.findExecutionFiles(files);
+    return executions.find((exec) => exec.canvasBasename === canvasBasename) || null;
+  }
+  /**
+   * Find canvas file for a given execution artifact path
+   */
+  static findCanvasForExecution(executionPath, files) {
+    const executionFilename = executionPath.split("/").pop() || "";
+    const canvasBasename = getCanvasBasename(executionFilename);
+    for (const file of files) {
+      const filePath = file.relativePath || file.path || "";
+      const fileName = file.name || filePath.split("/").pop() || "";
+      if (fileName === `${canvasBasename}.otel.canvas` || fileName === `${canvasBasename}.canvas`) {
+        return filePath;
+      }
+    }
+    return null;
+  }
+}
+const ExecutionStats = ({ metadata }) => {
+  const formatDate = (isoString) => {
+    if (!isoString) return "Unknown";
+    try {
+      const date = new Date(isoString);
+      return date.toLocaleString();
+    } catch {
+      return isoString;
+    }
+  };
+  const getStatusColor = (status) => {
+    switch (status) {
+      case "success":
+      case "OK":
+        return "#10b981";
+      // green
+      case "error":
+      case "ERROR":
+      case "FAILED":
+        return "#ef4444";
+      // red
+      default:
+        return "#6b7280";
+    }
+  };
+  const getStatusIcon = (status) => {
+    switch (status) {
+      case "success":
+      case "OK":
+        return "✓";
+      case "error":
+      case "ERROR":
+      case "FAILED":
+        return "✗";
+      default:
+        return "○";
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        padding: "12px 16px",
+        borderTop: "1px solid #333",
+        background: "#1a1a1a",
+        display: "flex",
+        gap: "24px",
+        fontSize: "12px",
+        color: "#999",
+        fontFamily: "monospace"
+      },
+      children: [
+        metadata.status && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                color: getStatusColor(metadata.status),
+                fontSize: "14px",
+                fontWeight: "bold"
+              },
+              children: getStatusIcon(metadata.status)
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { style: { color: "#ccc" }, children: "Status:" }),
+          /* @__PURE__ */ jsx("span", { style: { color: getStatusColor(metadata.status) }, children: metadata.status.toUpperCase() })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
+          /* @__PURE__ */ jsx("span", { style: { color: "#ccc" }, children: "Spans:" }),
+          /* @__PURE__ */ jsx("span", { style: { color: "#3b82f6" }, children: metadata.spanCount })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
+          /* @__PURE__ */ jsx("span", { style: { color: "#ccc" }, children: "Events:" }),
+          /* @__PURE__ */ jsx("span", { style: { color: "#8b5cf6" }, children: metadata.eventCount })
+        ] }),
+        metadata.framework && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
+          /* @__PURE__ */ jsx("span", { style: { color: "#ccc" }, children: "Framework:" }),
+          /* @__PURE__ */ jsx("span", { style: { color: "#f59e0b" }, children: metadata.framework })
+        ] }),
+        metadata.source && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
+          /* @__PURE__ */ jsx("span", { style: { color: "#ccc" }, children: "Source:" }),
+          /* @__PURE__ */ jsx("span", { style: { color: "#10b981" }, children: metadata.source })
+        ] }),
+        metadata.exportedAt && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "6px",
+              marginLeft: "auto"
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { style: { color: "#ccc" }, children: "Exported:" }),
+              /* @__PURE__ */ jsx("span", { style: { color: "#6b7280" }, children: formatDate(metadata.exportedAt) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+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,
+  events
+}) => {
+  var _a;
+  const { theme } = useTheme();
+  const [state, setState] = useState({
+    canvas: null,
+    execution: null,
+    metadata: null,
+    loading: true,
+    error: null,
+    availableExecutions: [],
+    selectedExecutionId: null,
+    showExecutionSelector: false,
+    isPlaying: false,
+    currentSpanIndex: 0,
+    currentEventIndex: 0,
+    highlightedNodeId: null
+  });
+  const contextRef = useRef(context);
+  const actionsRef = useRef(actions);
+  const eventsRef = useRef(events);
+  contextRef.current = context;
+  actionsRef.current = actions;
+  eventsRef.current = events;
+  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 {
+      const ctx = contextRef.current;
+      const acts = actionsRef.current;
+      if (!ctx.hasSlice("fileTree")) {
+        throw new Error("File tree data not available");
+      }
+      if (ctx.isSliceLoading("fileTree")) {
+        return;
+      }
+      const fileTreeSlice = ctx.getSlice("fileTree");
+      const fileTreeData = fileTreeSlice == null ? void 0 : fileTreeSlice.data;
+      if (!(fileTreeData == null ? void 0 : fileTreeData.allFiles)) {
+        setState((prev) => ({
+          ...prev,
+          canvas: null,
+          execution: null,
+          metadata: null,
+          loading: false,
+          error: null,
+          availableExecutions: [],
+          selectedExecutionId: null
+        }));
+        return;
+      }
+      const availableExecutions = ExecutionLoader.findExecutionFiles(fileTreeData.allFiles);
+      if (availableExecutions.length === 0) {
+        setState((prev) => ({
+          ...prev,
+          canvas: null,
+          execution: null,
+          metadata: null,
+          loading: false,
+          error: null,
+          availableExecutions: [],
+          selectedExecutionId: null
+        }));
+        return;
+      }
+      let selectedExecution2;
+      if (executionId) {
+        const found = availableExecutions.find((e) => e.id === executionId);
+        if (!found) {
+          throw new Error(`Execution with ID '${executionId}' not found`);
+        }
+        selectedExecution2 = found;
+      } else if (selectedExecutionIdRef.current) {
+        const found = availableExecutions.find((e) => e.id === selectedExecutionIdRef.current);
+        selectedExecution2 = found || availableExecutions[0];
+      } else {
+        selectedExecution2 = availableExecutions[0];
+      }
+      const readFile = acts.readFile;
+      if (!readFile) {
+        throw new Error("readFile action not available");
+      }
+      const repositoryPath = ctx.repositoryPath;
+      if (!repositoryPath) {
+        throw new Error("Repository path not available");
+      }
+      const fullExecutionPath = `${repositoryPath}/${selectedExecution2.path}`;
+      const executionContent = await readFile(fullExecutionPath);
+      if (!executionContent || typeof executionContent !== "string") {
+        throw new Error("Failed to read execution file");
+      }
+      const execution = ExecutionLoader.parseExecutionArtifact(executionContent);
+      const metadata = ExecutionLoader.getExecutionMetadata(execution);
+      const canvasPath = ExecutionLoader.findCanvasForExecution(
+        selectedExecution2.path,
+        fileTreeData.allFiles
+      );
+      let canvas = null;
+      if (canvasPath) {
+        try {
+          const fullCanvasPath = `${repositoryPath}/${canvasPath}`;
+          const canvasContent = await readFile(fullCanvasPath);
+          if (canvasContent && typeof canvasContent === "string") {
+            canvas = JSON.parse(canvasContent);
+          }
+        } catch (error) {
+          console.warn("[ExecutionViewer] Failed to load canvas:", error);
+        }
+      }
+      if (canvas) {
+        eventNodeMapRef.current = buildEventToNodeMap(canvas);
+      } else {
+        eventNodeMapRef.current = /* @__PURE__ */ new Map();
+      }
+      setState((prev) => ({
+        ...prev,
+        canvas,
+        execution,
+        metadata,
+        loading: false,
+        error: null,
+        availableExecutions,
+        selectedExecutionId: selectedExecution2.id,
+        currentSpanIndex: 0,
+        currentEventIndex: 0,
+        highlightedNodeId: null
+      }));
+    } catch (error) {
+      console.error("[ExecutionViewer] Error loading execution:", error);
+      setState((prev) => ({
+        ...prev,
+        loading: false,
+        error: error.message
+      }));
+    }
+  }, []);
+  useEffect(() => {
+    loadExecution();
+  }, [loadExecution]);
+  useEffect(() => {
+    if (!events) return;
+    const handleEvent = (event) => {
+      var _a2;
+      if (event.type === "custom" && event.action === "selectExecution") {
+        const executionId = (_a2 = event.payload) == null ? void 0 : _a2.executionId;
+        if (executionId) {
+          loadExecution(executionId);
+        }
+      }
+    };
+    events.on("custom", handleEvent);
+    return () => {
+      events.off("custom", handleEvent);
+    };
+  }, [events, loadExecution]);
+  const handlePlayPause = useCallback(() => {
+    setState((prev) => ({ ...prev, isPlaying: !prev.isPlaying }));
+  }, []);
+  const handleReset = useCallback(() => {
+    setState((prev) => ({
+      ...prev,
+      isPlaying: false,
+      currentSpanIndex: 0,
+      currentEventIndex: 0,
+      highlightedNodeId: null
+    }));
+  }, []);
+  useEffect(() => {
+    if (!state.isPlaying || !state.execution) {
+      if (playbackTimerRef.current) {
+        clearInterval(playbackTimerRef.current);
+        playbackTimerRef.current = null;
+      }
+      return;
+    }
+    const spans = ExecutionLoader.getSpans(state.execution);
+    spans.reduce((sum, span) => {
+      var _a2;
+      return sum + (((_a2 = span.events) == null ? void 0 : _a2.length) || 0);
+    }, 0);
+    playbackTimerRef.current = setInterval(() => {
+      setState((prev) => {
+        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) {
+          newEventIndex = prev.currentEventIndex + 1;
+        } else if (prev.currentSpanIndex < spans2.length - 1) {
+          newSpanIndex = prev.currentSpanIndex + 1;
+          newEventIndex = 0;
+        } else {
+          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 () => {
+      if (playbackTimerRef.current) {
+        clearInterval(playbackTimerRef.current);
+        playbackTimerRef.current = null;
+      }
+    };
+  }, [state.isPlaying, state.execution]);
+  if (!state.loading && state.availableExecutions.length === 0) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          height: "100%",
+          background: theme.colors.background,
+          color: theme.colors.text
+        },
+        children: /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", maxWidth: "600px", padding: "20px" }, children: [
+          /* @__PURE__ */ jsx(Activity, { size: 48, style: { margin: "0 auto 20px", opacity: 0.3 } }),
+          /* @__PURE__ */ jsx("h2", { style: { margin: "0 0 10px 0", fontSize: "18px", fontWeight: 600 }, children: "No Execution Artifacts Found" }),
+          /* @__PURE__ */ jsxs("p", { style: { margin: "0 0 20px 0", color: theme.colors.textSecondary, lineHeight: 1.5 }, children: [
+            "Execution artifacts should be saved to ",
+            /* @__PURE__ */ jsx("code", { children: "__executions__/*.spans.json" }),
+            " or",
+            " ",
+            /* @__PURE__ */ jsx("code", { children: "packages/*/__executions__/*.spans.json" })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                background: "#1e1e1e",
+                padding: "12px",
+                borderRadius: "4px",
+                fontFamily: "monospace",
+                fontSize: "12px",
+                textAlign: "left",
+                color: "#d4d4d4"
+              },
+              children: [
+                /* @__PURE__ */ jsx("div", { children: "# Export execution data from tests" }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  "exportExecutionArtifact(canvas, spans, ",
+                  "{"
+                ] }),
+                /* @__PURE__ */ jsx("div", { children: "  outputPath: '__executions__/my-test.spans.json'" }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  "}",
+                  ");"
+                ] })
+              ]
+            }
+          )
+        ] })
+      }
+    );
+  }
+  if (state.error) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          height: "100%",
+          background: theme.colors.background,
+          color: theme.colors.error
+        },
+        children: /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: "20px" }, children: [
+          /* @__PURE__ */ jsx("h2", { style: { margin: "0 0 10px 0", fontSize: "18px" }, children: "Error Loading Execution" }),
+          /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: "14px" }, children: state.error })
+        ] })
+      }
+    );
+  }
+  if (state.loading) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          height: "100%",
+          background: theme.colors.background,
+          color: theme.colors.text
+        },
+        children: /* @__PURE__ */ jsx(Loader, { className: "animate-spin", size: 32 })
+      }
+    );
+  }
+  const selectedExecution = state.availableExecutions.find(
+    (e) => e.id === state.selectedExecutionId
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        background: theme.colors.background,
+        color: theme.colors.text
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              padding: "12px 16px",
+              borderBottom: `1px solid ${theme.colors.border}`,
+              background: "#1a1a1a",
+              gap: "12px"
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    onClick: () => setState((prev) => ({ ...prev, showExecutionSelector: !prev.showExecutionSelector })),
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "8px",
+                      padding: "6px 12px",
+                      background: "#2a2a2a",
+                      border: "1px solid #3a3a3a",
+                      borderRadius: "4px",
+                      color: "#fff",
+                      cursor: "pointer",
+                      fontSize: "13px"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(Activity, { size: 16 }),
+                      /* @__PURE__ */ jsx("span", { children: (selectedExecution == null ? void 0 : selectedExecution.name) || "Select Execution" }),
+                      (selectedExecution == null ? void 0 : selectedExecution.packageName) && /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          style: {
+                            padding: "2px 6px",
+                            background: "#3b82f6",
+                            borderRadius: "3px",
+                            fontSize: "11px",
+                            fontWeight: 600
+                          },
+                          children: selectedExecution.packageName
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(ChevronDown, { size: 16 })
+                    ]
+                  }
+                ),
+                state.showExecutionSelector && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        position: "fixed",
+                        inset: 0,
+                        zIndex: 999
+                      },
+                      onClick: () => setState((prev) => ({ ...prev, showExecutionSelector: false }))
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        position: "absolute",
+                        top: "100%",
+                        left: 0,
+                        marginTop: "4px",
+                        minWidth: "300px",
+                        maxHeight: "400px",
+                        overflowY: "auto",
+                        background: "#2a2a2a",
+                        border: "1px solid #3a3a3a",
+                        borderRadius: "4px",
+                        boxShadow: "0 4px 12px rgba(0,0,0,0.3)",
+                        zIndex: 1e3
+                      },
+                      children: state.availableExecutions.map((execution) => /* @__PURE__ */ jsxs(
+                        "button",
+                        {
+                          onClick: () => {
+                            loadExecution(execution.id);
+                            setState((prev) => ({ ...prev, showExecutionSelector: false }));
+                          },
+                          style: {
+                            width: "100%",
+                            padding: "10px 16px",
+                            background: execution.id === state.selectedExecutionId ? "#3b82f6" : "transparent",
+                            border: "none",
+                            borderBottom: "1px solid #3a3a3a",
+                            color: "#fff",
+                            textAlign: "left",
+                            cursor: "pointer",
+                            fontSize: "13px",
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "8px"
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx(Activity, { size: 14 }),
+                            /* @__PURE__ */ jsx("span", { style: { flex: 1 }, children: execution.name }),
+                            execution.packageName && /* @__PURE__ */ jsx(
+                              "span",
+                              {
+                                style: {
+                                  padding: "2px 6px",
+                                  background: execution.id === state.selectedExecutionId ? "#2563eb" : "#3b82f6",
+                                  borderRadius: "3px",
+                                  fontSize: "11px",
+                                  fontWeight: 600
+                                },
+                                children: execution.packageName
+                              }
+                            )
+                          ]
+                        },
+                        execution.id
+                      ))
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
+                /* @__PURE__ */ jsx("div", { style: { fontSize: "14px", fontWeight: 600 }, children: ((_a = state.metadata) == null ? void 0 : _a.name) || "Execution Viewer" }),
+                selectedExecution && /* @__PURE__ */ jsx("div", { style: { fontSize: "11px", color: "#999", marginTop: "2px" }, children: selectedExecution.path })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px" }, children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: handleReset,
+                    style: {
+                      padding: "6px 10px",
+                      background: "#2a2a2a",
+                      border: "1px solid #3a3a3a",
+                      borderRadius: "4px",
+                      color: "#fff",
+                      cursor: "pointer",
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "4px"
+                    },
+                    title: "Reset",
+                    children: /* @__PURE__ */ jsx(RotateCcw, { size: 14 })
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    onClick: handlePlayPause,
+                    style: {
+                      padding: "6px 10px",
+                      background: state.isPlaying ? "#ef4444" : "#10b981",
+                      border: "none",
+                      borderRadius: "4px",
+                      color: "#fff",
+                      cursor: "pointer",
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "4px",
+                      fontWeight: 600
+                    },
+                    children: [
+                      state.isPlaying ? /* @__PURE__ */ jsx(Pause, { size: 14 }) : /* @__PURE__ */ jsx(Play, { size: 14 }),
+                      state.isPlaying ? "Pause" : "Play"
+                    ]
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { style: { flex: 1, display: "flex", overflow: "hidden" }, children: [
+          state.canvas ? /* @__PURE__ */ jsx("div", { style: { flex: "0 0 60%", position: "relative" }, children: /* @__PURE__ */ jsx(
+            distExports.GraphRenderer,
+            {
+              canvas: state.canvas,
+              showMinimap: true,
+              showControls: true,
+              showBackground: true,
+              backgroundVariant: "lines",
+              showTooltips: true,
+              highlightedNodeId: state.highlightedNodeId
+            }
+          ) }) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                flex: "0 0 60%",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                background: "#0a0a0a",
+                color: "#666"
+              },
+              children: /* @__PURE__ */ jsxs("div", { style: { textAlign: "center" }, children: [
+                /* @__PURE__ */ jsx("p", { children: "No matching canvas found" }),
+                /* @__PURE__ */ jsxs("p", { style: { fontSize: "12px", marginTop: "8px" }, children: [
+                  "Expected: ",
+                  selectedExecution == null ? void 0 : selectedExecution.canvasBasename,
+                  ".otel.canvas"
+                ] })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { style: { flex: "0 0 40%", borderLeft: "1px solid #333", display: "flex", flexDirection: "column" }, children: [
+            /* @__PURE__ */ jsxs("div", { style: { padding: "16px", borderBottom: "1px solid #333" }, children: [
+              /* @__PURE__ */ jsx("h3", { style: { margin: "0 0 8px 0", fontSize: "14px", fontWeight: 600 }, children: "Execution Events" }),
+              /* @__PURE__ */ jsxs("div", { style: { fontSize: "12px", color: "#999" }, children: [
+                "Span ",
+                state.currentSpanIndex + 1,
+                " of ",
+                ExecutionLoader.getSpans(state.execution || {}).length,
+                " • ",
+                "Event ",
+                state.currentEventIndex + 1
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("div", { style: { flex: 1, overflowY: "auto", padding: "16px" }, children: ExecutionLoader.getSpans(state.execution || {}).map((span, spanIdx) => {
+              var _a2;
+              return /* @__PURE__ */ jsxs("div", { style: { marginBottom: "24px" }, children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "13px",
+                      fontWeight: 600,
+                      marginBottom: "8px",
+                      color: spanIdx === state.currentSpanIndex ? "#3b82f6" : "#ccc"
+                    },
+                    children: span.name
+                  }
+                ),
+                (_a2 = span.events) == null ? void 0 : _a2.map((event, eventIdx) => {
+                  const isActive = spanIdx === state.currentSpanIndex && eventIdx === state.currentEventIndex;
+                  const isPast = spanIdx < state.currentSpanIndex || spanIdx === state.currentSpanIndex && eventIdx < state.currentEventIndex;
+                  return /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      onClick: () => {
+                        const highlightedNodeId = mapEventToNodeId(event, state.canvas);
+                        setState((prev) => ({
+                          ...prev,
+                          currentSpanIndex: spanIdx,
+                          currentEventIndex: eventIdx,
+                          highlightedNodeId
+                        }));
+                      },
+                      style: {
+                        padding: "8px",
+                        marginBottom: "4px",
+                        background: isActive ? "#3b82f610" : "transparent",
+                        border: `1px solid ${isActive ? "#3b82f6" : "#333"}`,
+                        borderRadius: "4px",
+                        fontSize: "12px",
+                        opacity: isPast ? 0.5 : 1,
+                        cursor: "pointer"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx("div", { style: { fontWeight: 600, color: "#fff", marginBottom: "4px" }, children: event.name }),
+                        event.attributes && Object.keys(event.attributes).length > 0 && /* @__PURE__ */ jsx("div", { style: { color: "#999", fontFamily: "monospace", fontSize: "11px" }, children: Object.entries(event.attributes).map(([key, value]) => /* @__PURE__ */ jsxs("div", { children: [
+                          key,
+                          ": ",
+                          JSON.stringify(value)
+                        ] }, key)) })
+                      ]
+                    },
+                    eventIdx
+                  );
+                })
+              ] }, span.id);
+            }) })
+          ] })
+        ] }),
+        state.metadata && /* @__PURE__ */ jsx(ExecutionStats, { metadata: state.metadata })
+      ]
+    }
+  );
+};
 const focusNodeTool = {
   name: "focus_node",
   description: "Focuses the graph view on a specific node",
@@ -52717,6 +54517,31 @@ const panels = [
     onUnmount: async (_context) => {
       console.log("Trace Viewer Panel unmounting");
     }
+  },
+  {
+    metadata: {
+      id: "principal-ai.execution-viewer",
+      name: "Execution Viewer",
+      icon: "⚡",
+      version: "0.1.0",
+      author: "Principal AI",
+      description: "Visualizes execution artifacts (test runs) overlaid on canvas diagrams with playback controls",
+      slices: ["fileTree"]
+    },
+    component: ExecutionViewerPanel,
+    onMount: async (context) => {
+      var _a;
+      console.log(
+        "Execution Viewer Panel mounted",
+        (_a = context.currentScope.repository) == null ? void 0 : _a.path
+      );
+      if (context.hasSlice("fileTree") && !context.isSliceLoading("fileTree")) {
+        await context.refresh("repository", "fileTree");
+      }
+    },
+    onUnmount: async (_context) => {
+      console.log("Execution Viewer Panel unmounting");
+    }
   }
 ];
 const onPackageLoad = async () => {
@@ -52727,6 +54552,7 @@ const onPackageUnload = async () => {
 };
 export {
   EventControllerPanel,
+  ExecutionViewerPanel,
   PanelFileSystemAdapter,
   TraceViewerPanel,
   focusNodeTool,