@principal-ai/storybook-addon-otel 0.1.3 → 0.2.0

package/manager.js

@@ -1,17 +1,305 @@
 /**
  * Storybook OTEL Addon - Manager Entry (ESM for Storybook v10+)
  *
- * This ESM file is used by Storybook v10+ which requires ESM format.
+ * This ESM file is used by Storybook v10+ which uses the unified 'storybook' package.
  * The compiled dist/manager.js (CommonJS) is kept for backward compatibility with v7-8.
  */
 
-import { addons, types } from '@storybook/manager-api';
-import { TelemetryPanel } from './src/components/TelemetryPanel.tsx';
-import { ADDON_ID, PANEL_ID } from './src/constants.ts';
+import React, { useEffect, useState } from 'react';
+import { addons, types, useChannel } from 'storybook/manager-api';
+import { AddonPanel } from 'storybook/internal/components';
+import { styled } from 'storybook/theming';
+
+const ADDON_ID = 'principal-ai/storybook-addon-otel';
+const PANEL_ID = `${ADDON_ID}/panel`;
+const EVENTS = {
+  TELEMETRY_UPDATE: `${ADDON_ID}/telemetry-update`,
+  CLEAR_TELEMETRY: `${ADDON_ID}/clear-telemetry`,
+};
+
+// Styled components
+const PanelContainer = styled.div`
+  padding: 16px;
+  font-family: monospace;
+  font-size: 12px;
+  height: 100%;
+  overflow: auto;
+  background: #1a1a1a;
+  color: #e6e6e6;
+`;
+
+const Header = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #333;
+`;
+
+const Button = styled.button`
+  background: #3b82f6;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  padding: 6px 12px;
+  cursor: pointer;
+  font-size: 12px;
+  margin-left: 8px;
+
+  &:hover {
+    background: #2563eb;
+  }
+`;
+
+const SpanCard = styled.div`
+  background: #242424;
+  border: 1px solid ${props => props.status === 'ERROR' ? '#ef4444' : '#333'};
+  border-radius: 6px;
+  padding: 12px;
+  margin-bottom: 12px;
+`;
+
+const SpanHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 8px;
+`;
+
+const SpanName = styled.div`
+  font-weight: 600;
+  color: #3b82f6;
+  font-size: 13px;
+`;
+
+const SpanDuration = styled.div`
+  color: #10b981;
+  font-size: 11px;
+`;
+
+const Attributes = styled.div`
+  margin-top: 8px;
+  padding: 8px;
+  background: #1a1a1a;
+  border-radius: 4px;
+  font-size: 11px;
+`;
+
+const AttributeRow = styled.div`
+  padding: 2px 0;
+  color: #a0a0a0;
+
+  span:first-child {
+    color: #8b5cf6;
+  }
+`;
+
+const EventList = styled.div`
+  margin-top: 8px;
+`;
+
+const Event = styled.div`
+  padding: 6px 8px;
+  background: #1a1a1a;
+  border-left: 2px solid #f59e0b;
+  margin-bottom: 4px;
+  font-size: 11px;
+`;
+
+const EventName = styled.div`
+  color: #f59e0b;
+  font-weight: 600;
+  margin-bottom: 4px;
+`;
+
+const ViewToggle = styled.div`
+  display: flex;
+  gap: 8px;
+  margin-bottom: 16px;
+`;
+
+const ToggleButton = styled.button`
+  background: ${props => props.active ? '#3b82f6' : '#333'};
+  color: ${props => props.active ? 'white' : '#a0a0a0'};
+  border: none;
+  border-radius: 4px;
+  padding: 6px 16px;
+  cursor: pointer;
+  font-size: 12px;
+
+  &:hover {
+    background: ${props => props.active ? '#2563eb' : '#404040'};
+  }
+`;
+
+const CanvasPlaceholder = styled.div`
+  padding: 40px;
+  text-align: center;
+  color: #666;
+  border: 2px dashed #333;
+  border-radius: 8px;
+
+  h3 {
+    margin: 0 0 8px 0;
+    color: #999;
+  }
+
+  p {
+    margin: 0;
+    font-size: 12px;
+  }
+`;
+
+// Telemetry Panel Component
+const TelemetryPanel = ({ active }) => {
+  const [spans, setSpans] = useState([]);
+  const [view, setView] = useState('timeline');
+
+  const emit = useChannel({
+    [EVENTS.TELEMETRY_UPDATE]: (newSpans) => {
+      console.log('[TelemetryPanel] Received update, spans:', newSpans.length, newSpans);
+      setSpans(newSpans);
+    },
+  });
+
+  console.log('[TelemetryPanel] Render, active:', active, 'spans:', spans.length);
+
+  const handleClear = () => {
+    emit(EVENTS.CLEAR_TELEMETRY);
+    setSpans([]);
+  };
+
+  const handleExport = () => {
+    const json = JSON.stringify(spans, null, 2);
+    const blob = new Blob([json], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'storybook-telemetry.json';
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  if (!active) {
+    return null;
+  }
+
+  return React.createElement(
+    AddonPanel,
+    { active },
+    React.createElement(
+      PanelContainer,
+      null,
+      React.createElement(
+        Header,
+        null,
+        React.createElement(
+          'div',
+          null,
+          React.createElement('strong', null, 'OTEL Telemetry'),
+          React.createElement(
+            'div',
+            { style: { fontSize: '11px', color: '#666', marginTop: '4px' } },
+            `${spans.length} span${spans.length !== 1 ? 's' : ''} collected`
+          )
+        ),
+        React.createElement(
+          'div',
+          null,
+          React.createElement(Button, { onClick: handleClear }, 'Clear'),
+          React.createElement(Button, { onClick: handleExport }, 'Export JSON')
+        )
+      ),
+      React.createElement(
+        ViewToggle,
+        null,
+        React.createElement(
+          ToggleButton,
+          { active: view === 'timeline', onClick: () => setView('timeline') },
+          'Timeline'
+        ),
+        React.createElement(
+          ToggleButton,
+          { active: view === 'canvas', onClick: () => setView('canvas') },
+          'Canvas'
+        )
+      ),
+      view === 'timeline'
+        ? spans.length === 0
+          ? React.createElement(
+              'div',
+              { style: { textAlign: 'center', padding: '40px', color: '#666' } },
+              'No telemetry data yet. Interact with the story to capture spans.'
+            )
+          : spans.map(span =>
+              React.createElement(
+                SpanCard,
+                { key: span.id, status: span.status },
+                React.createElement(
+                  SpanHeader,
+                  null,
+                  React.createElement(SpanName, null, span.name),
+                  span.duration && React.createElement(SpanDuration, null, `${span.duration}ms`)
+                ),
+                Object.keys(span.attributes).length > 0 &&
+                  React.createElement(
+                    Attributes,
+                    null,
+                    Object.entries(span.attributes).map(([key, value]) =>
+                      React.createElement(
+                        AttributeRow,
+                        { key },
+                        React.createElement('span', null, `${key}:`),
+                        ` ${String(value)}`
+                      )
+                    )
+                  ),
+                span.events.length > 0 &&
+                  React.createElement(
+                    EventList,
+                    null,
+                    span.events.map((event, idx) =>
+                      React.createElement(
+                        Event,
+                        { key: idx },
+                        React.createElement(EventName, null, event.name),
+                        Object.entries(event.attributes).map(([key, value]) =>
+                          React.createElement(
+                            AttributeRow,
+                            { key },
+                            React.createElement('span', null, `${key}:`),
+                            ` ${String(value)}`
+                          )
+                        )
+                      )
+                    )
+                  ),
+                span.errorMessage &&
+                  React.createElement(
+                    'div',
+                    { style: { marginTop: '8px', color: '#ef4444', fontSize: '11px' } },
+                    `Error: ${span.errorMessage}`
+                  )
+              )
+            )
+        : React.createElement(
+            CanvasPlaceholder,
+            null,
+            React.createElement('h3', null, 'Canvas Visualization'),
+            React.createElement('p', null, 'Canvas view will visualize the telemetry flow using your GraphRenderer.'),
+            React.createElement(
+              'p',
+              { style: { marginTop: '8px', fontSize: '11px' } },
+              'To implement: Convert spans to canvas format and render with GraphRenderer'
+            )
+          )
+    )
+  );
+};
 
 // Register the addon
 addons.register(ADDON_ID, () => {
-  // Register the panel
   addons.add(PANEL_ID, {
     type: types.PANEL,
     title: 'OTEL Telemetry',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@principal-ai/storybook-addon-otel",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "Storybook addon for capturing and visualizing OpenTelemetry data from story interactions",
   "main": "dist/preset.js",
   "types": "dist/preset.d.ts",
@@ -55,13 +55,21 @@
     "directory": "packages/storybook-addon-otel"
   },
   "peerDependencies": {
-    "@storybook/components": "^7.0.0 || ^8.0.0 || ^10.0.0",
-    "@storybook/manager-api": "^7.0.0 || ^8.0.0 || ^10.0.0",
-    "@storybook/preview-api": "^7.0.0 || ^8.0.0 || ^10.0.0",
-    "@storybook/theming": "^7.0.0 || ^8.0.0 || ^10.0.0",
+    "storybook": "^7.0.0 || ^8.0.0 || ^10.0.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
+  "peerDependenciesMeta": {
+    "@storybook/components": {
+      "optional": true
+    },
+    "@storybook/manager-api": {
+      "optional": true
+    },
+    "@storybook/theming": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@types/node": "^20.0.0",
     "@types/react": "^18.0.0",