@principal-ai/storybook-addon-otel 0.3.1 → 0.3.3

package/collector.js

@@ -0,0 +1,99 @@
+/**
+ * TelemetryCollector Export (for manual instrumentation in stories)
+ *
+ * Standalone browser-compatible collector without @storybook/* dependencies.
+ * This prevents bundler errors and the "loaded twice" issue.
+ */
+
+const ADDON_ID = 'principal-ai/storybook-addon-otel';
+const EVENTS = {
+  TELEMETRY_UPDATE: `${ADDON_ID}/telemetry-update`,
+  CLEAR_TELEMETRY: `${ADDON_ID}/clear-telemetry`,
+};
+
+class TelemetryCollectorImpl {
+  constructor() {
+    this.spans = [];
+    this.spanIdCounter = 0;
+    this.activeSpans = new Map();
+    this.channel = null;
+
+    // Get communication channel with manager (if available)
+    if (typeof window !== 'undefined' && window.__STORYBOOK_ADDONS_CHANNEL) {
+      this.channel = window.__STORYBOOK_ADDONS_CHANNEL;
+    }
+  }
+
+  startSpan(name, attributes = {}, parentId) {
+    const span = {
+      id: `span-${++this.spanIdCounter}`,
+      name,
+      parentId,
+      startTime: Date.now(),
+      attributes: {
+        'component.name': name,
+        ...attributes,
+      },
+      events: [],
+      status: 'OK',
+    };
+
+    this.spans.push(span);
+    this.activeSpans.set(span.id, span);
+    console.log('[TelemetryCollector] Started span:', name, 'Total spans:', this.spans.length);
+    this.emit();
+
+    return span;
+  }
+
+  addEvent(span, eventName, attributes = {}) {
+    span.events.push({
+      time: Date.now(),
+      name: eventName,
+      attributes,
+    });
+    this.emit();
+  }
+
+  endSpan(span) {
+    span.endTime = Date.now();
+    span.duration = span.endTime - span.startTime;
+    this.activeSpans.delete(span.id);
+    this.emit();
+  }
+
+  markError(span, error) {
+    span.status = 'ERROR';
+    span.errorMessage = typeof error === 'string' ? error : error.message;
+    span.attributes['error'] = true;
+    span.attributes['error.message'] = span.errorMessage;
+    this.emit();
+  }
+
+  getSpans() {
+    return [...this.spans];
+  }
+
+  clear() {
+    this.spans = [];
+    this.spanIdCounter = 0;
+    this.activeSpans.clear();
+    this.emit();
+  }
+
+  emit() {
+    console.log('[TelemetryCollector] Emitting update, spans:', this.spans.length, 'has channel:', !!this.channel);
+    if (this.channel) {
+      this.channel.emit(EVENTS.TELEMETRY_UPDATE, this.getSpans());
+    }
+  }
+
+  exportJson() {
+    // End any active spans
+    this.activeSpans.forEach(span => this.endSpan(span));
+    return JSON.stringify(this.spans, null, 2);
+  }
+}
+
+// Singleton instance
+export const TelemetryCollector = new TelemetryCollectorImpl();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@principal-ai/storybook-addon-otel",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "description": "Storybook addon for capturing and visualizing OpenTelemetry data from story interactions",
   "main": "preset.js",
   "files": [
@@ -15,6 +15,7 @@
     "preset.js",
     "preview.js",
     "manager.js",
+    "collector.js",
     "README.md"
   ],
   "exports": {
@@ -30,6 +31,10 @@
     "./manager": {
       "default": "./manager.js"
     },
+    "./collector": {
+      "types": "./dist/collector.d.ts",
+      "default": "./collector.js"
+    },
     "./package.json": "./package.json"
   },
   "scripts": {