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

package/collector.js

@@ -1,9 +1,99 @@
 /**
  * TelemetryCollector Export (for manual instrumentation in stories)
  *
- * This file exports only the collector without the decorator registration,
- * preventing the "loaded twice" issue when importing in stories.
+ * Standalone browser-compatible collector without @storybook/* dependencies.
+ * This prevents bundler errors and the "loaded twice" issue.
  */
 
-// Re-export the collector from the compiled version
-export { TelemetryCollector } from './dist/collector.js';
+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.2",
+  "version": "0.3.3",
   "description": "Storybook addon for capturing and visualizing OpenTelemetry data from story interactions",
   "main": "preset.js",
   "files": [