@principal-ai/principal-view-react 0.7.14 → 0.7.16

package/dist/utils/narrative-loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"narrative-loader.js","sourceRoot":"","sources":["../../src/utils/narrative-loader.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@principal-ai/principal-view-react",
-  "version": "0.7.14",
+  "version": "0.7.16",
   "description": "React components for graph-based principal view framework",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -14,36 +14,33 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@principal-ade/industry-theme": "^0.1.4",
-    "@principal-ai/principal-view-core": "^0.5.16",
-    "@xyflow/react": "^12.0.0",
-    "elkjs": "^0.9.0",
-    "framer-motion": "^11.0.0",
-    "js-yaml": "^4.1.1",
-    "lucide-react": "^0.554.0",
-    "zustand": "^4.5.0"
+    "@principal-ade/industry-theme": "0.1.7",
+    "@principal-ai/principal-view-core": "^0.7.6",
+    "@xyflow/react": "12.0.0",
+    "elkjs": "0.9.0",
+    "js-yaml": "4.1.1",
+    "lucide-react": "0.554.0",
+    "zustand": "4.5.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^8.5.0",
-    "@storybook/addon-interactions": "^8.5.0",
-    "@storybook/addon-links": "^8.5.0",
-    "@storybook/blocks": "^8.5.0",
-    "@storybook/react": "^8.5.0",
-    "@storybook/react-vite": "^8.5.0",
-    "@storybook/test": "^8.5.0",
-    "@testing-library/react": "^14.0.0",
-    "@types/js-yaml": "^4.0.9",
-    "@types/react": "^18.0.0",
-    "happy-dom": "^12.10.3",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "storybook": "^8.5.0",
-    "typescript": "^5.0.0",
-    "vite": "^5.0.0"
+    "@storybook/addon-docs": "10.1.2",
+    "@storybook/addon-links": "10.1.2",
+    "@storybook/addon-onboarding": "10.1.2",
+    "@storybook/react-vite": "10.1.2",
+    "@testing-library/react": "^16.0.0",
+    "@types/js-yaml": "4.0.9",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "happy-dom": "12.10.3",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "storybook": "10.1.2",
+    "typescript": "5.0.4",
+    "vite": "^6.0.7"
   },
   "files": [
     "dist",

package/src/components/ConfigurationSelector.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ConfigurationFile } from '@principal-ai/principal-view-core';
+import type { ConfigurationFile } from '@principal-ai/principal-view-core/browser';
 
 export interface ConfigurationSelectorProps {
   /** Available configurations */

package/src/components/EdgeInfoPanel.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { EdgeState, EdgeTypeDefinition } from '@principal-ai/principal-view-core';
+import type { EdgeState, EdgeTypeDefinition } from '@principal-ai/principal-view-core/browser';
 import { useTheme } from '@principal-ade/industry-theme';
 
 export interface EdgeInfoPanelProps {

package/src/components/GraphRenderer.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { GraphRenderer } from './GraphRenderer';
-import type { GraphConfiguration, NodeState, EdgeState } from '@principal-ai/principal-view-core';
+import type { GraphConfiguration, NodeState, EdgeState } from '@principal-ai/principal-view-core/browser';
 
 describe('GraphRenderer', () => {
   const testConfig: GraphConfiguration = {

package/src/components/GraphRenderer.tsx

@@ -31,8 +31,8 @@ import type {
   GraphEvent,
   ExtendedCanvas,
   ComponentLibrary,
-} from '@principal-ai/principal-view-core';
-import { CanvasConverter } from '@principal-ai/principal-view-core';
+} from '@principal-ai/principal-view-core/browser';
+import { CanvasConverter } from '@principal-ai/principal-view-core/browser';
 import { useTheme } from '@principal-ade/industry-theme';
 import { CustomNode } from '../nodes/CustomNode';
 import type { CustomNodeData } from '../nodes/CustomNode';

package/src/components/NarrativeRenderer.tsx

@@ -0,0 +1,171 @@
+import React, { useMemo } from 'react';
+import { renderNarrative } from '@principal-ai/principal-view-core/browser';
+import type { NarrativeTemplate, OtelEvent } from '@principal-ai/principal-view-core/browser';
+import { useTheme } from '@principal-ade/industry-theme';
+
+export interface NarrativeRendererProps {
+  /** Narrative template to use for rendering */
+  template: NarrativeTemplate;
+
+  /** OTEL events to render */
+  events: OtelEvent[];
+
+  /** Optional CSS class name */
+  className?: string;
+
+  /** Optional custom style */
+  style?: React.CSSProperties;
+
+  /** Show metadata panel */
+  showMetadata?: boolean;
+}
+
+/**
+ * Renders OTEL events as a human-readable narrative using a template
+ */
+export const NarrativeRenderer: React.FC<NarrativeRendererProps> = ({
+  template,
+  events,
+  className,
+  style,
+  showMetadata = false,
+}) => {
+  const { theme } = useTheme();
+
+  // Render the narrative
+  const result = useMemo(() => {
+    try {
+      return renderNarrative(template, events);
+    } catch (error) {
+      return {
+        text: `Error rendering narrative: ${error instanceof Error ? error.message : 'Unknown error'}`,
+        scenarioId: 'error',
+        metadata: {
+          eventCount: events.length,
+          spanCount: 0,
+          logCount: 0,
+        },
+      };
+    }
+  }, [template, events]);
+
+  // Parse narrative text to add syntax highlighting
+  const renderHighlightedText = (text: string) => {
+    const lines = text.split('\n');
+
+    return lines.map((line, idx) => {
+      // Determine line style based on content
+      let lineStyle: React.CSSProperties = {};
+      let content = line;
+
+      // Status indicators (✅ ❌ ⚠️ 📋)
+      if (/^[✅❌⚠️📋]/.test(line)) {
+        lineStyle = {
+          fontWeight: 'bold',
+          fontSize: '16px',
+          marginTop: idx > 0 ? '8px' : '0',
+          marginBottom: '4px',
+        };
+      }
+      // Separators (━━━━)
+      else if (/^━+/.test(line)) {
+        lineStyle = {
+          color: theme.colors.border,
+          opacity: 0.6,
+        };
+      }
+      // Arrow items (→)
+      else if (/^(\s*)→/.test(line)) {
+        const indent = line.match(/^(\s*)/)?.[1] || '';
+        lineStyle = {
+          color: theme.colors.text,
+          fontWeight: indent.length === 0 ? 'bold' : 'normal',
+          marginTop: indent.length === 0 ? '12px' : '4px',
+        };
+      }
+      // Bullet items (•)
+      else if (/^\s+•/.test(line)) {
+        lineStyle = {
+          color: theme.colors.textMuted,
+          paddingLeft: '8px',
+        };
+      }
+      // Section headers (UPPERCASE at start)
+      else if (/^[A-Z\s]+:/.test(line)) {
+        lineStyle = {
+          fontWeight: 'bold',
+          marginTop: '8px',
+          color: theme.colors.text,
+        };
+      }
+
+      return (
+        <div key={idx} style={lineStyle}>
+          {content}
+        </div>
+      );
+    });
+  };
+
+  return (
+    <div
+      className={className}
+      style={{
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        ...style,
+      }}
+    >
+      {/* Narrative Text */}
+      <div
+        style={{
+          flex: 1,
+          overflow: 'auto',
+          padding: '20px',
+          fontFamily: theme.fonts.monospace,
+          fontSize: '14px',
+          lineHeight: '1.6',
+          color: theme.colors.text,
+          backgroundColor: theme.colors.background,
+          whiteSpace: 'pre-wrap',
+          wordWrap: 'break-word',
+        }}
+      >
+        {renderHighlightedText(result.text)}
+      </div>
+
+      {/* Metadata Panel (optional) */}
+      {showMetadata && (
+        <div
+          style={{
+            borderTop: `1px solid ${theme.colors.border}`,
+            padding: '12px 20px',
+            backgroundColor: theme.colors.surface,
+            fontSize: '12px',
+            color: theme.colors.textMuted,
+            fontFamily: theme.fonts.monospace,
+          }}
+        >
+          <div style={{ marginBottom: '4px' }}>
+            <strong style={{ color: theme.colors.text }}>Template:</strong> {template.name}
+          </div>
+          <div style={{ marginBottom: '4px' }}>
+            <strong style={{ color: theme.colors.text }}>Scenario:</strong> {result.scenarioId}
+          </div>
+          <div>
+            <strong style={{ color: theme.colors.text }}>Events:</strong> {result.metadata.eventCount} total
+            ({result.metadata.spanCount} spans, {result.metadata.logCount} logs)
+          </div>
+          {result.metadata.timeRange && (
+            <div style={{ marginTop: '4px' }}>
+              <strong style={{ color: theme.colors.text }}>Duration:</strong>{' '}
+              {Number(result.metadata.timeRange.end) - Number(result.metadata.timeRange.start)}ms
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/NodeInfoPanel.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import type { NodeState, NodeTypeDefinition } from '@principal-ai/principal-view-core';
+import type { NodeState, NodeTypeDefinition } from '@principal-ai/principal-view-core/browser';
 import { useTheme } from '@principal-ade/industry-theme';
 import { resolveIcon } from '../utils/iconResolver';
 

package/src/components/NodeTooltip.tsx

@@ -74,7 +74,7 @@ export const NodeTooltip: React.FC<NodeTooltipProps> = ({
     }
   };
 
-  const tooltipContent = (
+  const renderTooltipContent = (): React.JSX.Element => (
     <div
       style={{
         position: usePortal ? 'fixed' : 'absolute',
@@ -164,7 +164,7 @@ export const NodeTooltip: React.FC<NodeTooltipProps> = ({
 
   // Use portal to render at body level when nodeRef is provided, otherwise render inline
   if (usePortal) {
-    return createPortal(tooltipContent, document.body);
+    return createPortal(renderTooltipContent(), document.body);
   }
-  return tooltipContent;
+  return renderTooltipContent();
 };

package/src/components/PendingChanges.test.tsx

@@ -2,7 +2,7 @@ import { describe, expect, test, beforeEach, beforeAll, mock } from 'bun:test';
 import React, { createRef } from 'react';
 import { render, fireEvent, act } from '@testing-library/react';
 import { GraphRenderer, type GraphRendererHandle, type PendingChanges } from './GraphRenderer';
-import type { ExtendedCanvas } from '@principal-ai/principal-view-core';
+import type { ExtendedCanvas } from '@principal-ai/principal-view-core/browser';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 import { Window } from 'happy-dom';
 

package/src/components/SelectionSidebar.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import type { NodeState, NodeTypeDefinition } from '@principal-ai/principal-view-core';
+import type { NodeState, NodeTypeDefinition } from '@principal-ai/principal-view-core/browser';
 import { useTheme } from '@principal-ade/industry-theme';
 import { resolveIcon } from '../utils/iconResolver';