@principal-ai/principal-view-react 0.7.34 → 0.7.35

package/dist/index.d.ts

@@ -14,8 +14,6 @@ export { NodeInfoPanel } from './components/NodeInfoPanel';
 export type { NodeInfoPanelProps } from './components/NodeInfoPanel';
 export { ConfigurationSelector } from './components/ConfigurationSelector';
 export type { ConfigurationSelectorProps } from './components/ConfigurationSelector';
-export { TestEventPanel } from './components/TestEventPanel';
-export type { TestEventPanelProps } from './components/TestEventPanel';
 export { GenericNode } from './nodes/GenericNode';
 export type { GenericNodeProps } from './nodes/GenericNode';
 export { CustomNode } from './nodes/CustomNode';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,YAAY,EACV,kBAAkB,EAClB,UAAU,EACV,YAAY,EACZ,SAAS,EACT,OAAO,EACP,gBAAgB,EAChB,WAAW,EACX,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,SAAS,EACT,SAAS,EACT,iBAAiB,EACjB,uBAAuB,EAEvB,gBAAgB,EAChB,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,2CAA2C,CAAC;AAGnD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,YAAY,EACV,kBAAkB,EAClB,mBAAmB,EACnB,kBAAkB,EAClB,cAAc,GACf,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,YAAY,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAErE,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,YAAY,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAErE,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAC3E,YAAY,EAAE,0BAA0B,EAAE,MAAM,oCAAoC,CAAC;AAErF,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,YAAY,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAGvE,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,YAAY,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,YAAY,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAGzD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,YAAY,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAG3E,OAAO,EACL,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,wBAAwB,CAAC;AAChC,YAAY,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACzD,YAAY,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,YAAY,EACV,kBAAkB,EAClB,UAAU,EACV,YAAY,EACZ,SAAS,EACT,OAAO,EACP,gBAAgB,EAChB,WAAW,EACX,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,SAAS,EACT,SAAS,EACT,iBAAiB,EACjB,uBAAuB,EAEvB,gBAAgB,EAChB,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,2CAA2C,CAAC;AAGnD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,YAAY,EACV,kBAAkB,EAClB,mBAAmB,EACnB,kBAAkB,EAClB,cAAc,GACf,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,YAAY,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAErE,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,YAAY,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAErE,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAC3E,YAAY,EAAE,0BAA0B,EAAE,MAAM,oCAAoC,CAAC;AAGrF,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,YAAY,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,YAAY,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAGzD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,YAAY,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAG3E,OAAO,EACL,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,wBAAwB,CAAC;AAChC,YAAY,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACzD,YAAY,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/index.js

@@ -10,7 +10,6 @@ export { GraphRenderer } from './components/GraphRenderer';
 export { EdgeInfoPanel } from './components/EdgeInfoPanel';
 export { NodeInfoPanel } from './components/NodeInfoPanel';
 export { ConfigurationSelector } from './components/ConfigurationSelector';
-export { TestEventPanel } from './components/TestEventPanel';
 // Export node/edge renderers
 export { GenericNode } from './nodes/GenericNode';
 export { CustomNode } from './nodes/CustomNode';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAwBH,oBAAoB;AACpB,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAQ3D,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAG3D,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAG3D,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAG3E,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAG7D,6BAA6B;AAC7B,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAGlD,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGhD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAGlD,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGhD,2BAA2B;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAGvD,mBAAmB;AACnB,OAAO,EACL,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAwBH,oBAAoB;AACpB,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAQ3D,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAG3D,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAG3D,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAG3E,6BAA6B;AAC7B,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAGlD,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGhD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAGlD,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGhD,2BAA2B;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAGvD,mBAAmB;AACnB,OAAO,EACL,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@principal-ai/principal-view-react",
-  "version": "0.7.34",
+  "version": "0.7.35",
   "description": "React components for graph-based principal view framework",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -16,7 +16,7 @@
   "dependencies": {
     "@principal-ade/industry-theme": "0.1.7",
     "@principal-ai/codebase-composition": "^0.2.41",
-    "@principal-ai/principal-view-core": "^0.7.12",
+    "@principal-ai/principal-view-core": "0.10.4",
     "@xyflow/react": "12.0.0",
     "elkjs": "0.9.0",
     "js-yaml": "4.1.1",

package/src/components/PendingChanges.test.tsx

@@ -1,7 +1,7 @@
-import { describe, expect, test, beforeEach, beforeAll, mock } from 'bun:test';
+import { describe, expect, test, 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 { render } from '@testing-library/react';
+import { GraphRenderer, type GraphRendererHandle } from './GraphRenderer';
 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/index.ts

@@ -46,9 +46,6 @@ export type { NodeInfoPanelProps } from './components/NodeInfoPanel';
 export { ConfigurationSelector } from './components/ConfigurationSelector';
 export type { ConfigurationSelectorProps } from './components/ConfigurationSelector';
 
-export { TestEventPanel } from './components/TestEventPanel';
-export type { TestEventPanelProps } from './components/TestEventPanel';
-
 // Export node/edge renderers
 export { GenericNode } from './nodes/GenericNode';
 export type { GenericNodeProps } from './nodes/GenericNode';

package/src/stories/NodeFieldsAudit.stories.tsx

@@ -23,192 +23,6 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-/**
- * Canvas showing a single node with ALL fields populated and labeled
- */
-const allFieldsCanvas: ExtendedCanvas = {
-  nodes: [
-    {
-      id: 'all-fields-node',
-      type: 'text',
-      x: 200,
-      y: 150,
-      width: 160,
-      height: 120,
-      text: 'Display Label (from dataSchema)',
-      color: '#6366f1', // color field
-      pv: {
-        nodeType: 'fully-populated',
-        shape: 'rectangle', // shape field
-        icon: 'Server', // icon field
-        fill: '#6366f1', // pv.fill (takes priority over node.color)
-        stroke: '#4f46e5', // pv.stroke (border color)
-        dataSchema: {
-          name: { type: 'string', displayInLabel: true },
-          description: { type: 'string', displayInLabel: true },
-          status: { type: 'string', displayInLabel: false },
-        },
-        states: {
-          idle: { color: '#94a3b8', icon: 'Circle', label: 'Idle' },
-          active: { color: '#22c55e', icon: 'CheckCircle', label: 'Active' },
-          error: { color: '#ef4444', icon: 'XCircle', label: 'Error' },
-        },
-      },
-    },
-  ],
-  edges: [],
-  pv: {
-    version: '1.0.0',
-    name: 'All Fields Audit',
-    edgeTypes: {},
-  },
-};
-
-/**
- * Canvas showing nodes with each field labeled for reference
- */
-const labeledFieldsCanvas: ExtendedCanvas = {
-  nodes: [
-    // Reference node with annotations
-    {
-      id: 'labeled-node',
-      type: 'text',
-      x: 300,
-      y: 200,
-      width: 180,
-      height: 140,
-      text: 'API Gateway',
-      color: '#3b82f6',
-      pv: {
-        nodeType: 'server',
-        shape: 'rectangle',
-        icon: 'Server',
-        fill: '#3b82f6',
-        stroke: '#2563eb',
-        dataSchema: {
-          name: { type: 'string', displayInLabel: true },
-        },
-        states: {
-          processing: { color: '#3b82f6', icon: 'Loader', label: 'Processing' },
-        },
-      },
-    },
-    // Icon label
-    {
-      id: 'icon-label',
-      type: 'text',
-      x: 100,
-      y: 140,
-      width: 120,
-      height: 30,
-      text: 'ICON',
-      color: '#f97316',
-      pv: {
-        nodeType: 'label',
-        shape: 'rectangle',
-        fill: '#f97316',
-        dataSchema: {},
-      },
-    },
-    // Label field annotation
-    {
-      id: 'label-annotation',
-      type: 'text',
-      x: 100,
-      y: 200,
-      width: 120,
-      height: 30,
-      text: 'LABEL',
-      color: '#f97316',
-      pv: {
-        nodeType: 'label',
-        shape: 'rectangle',
-        fill: '#f97316',
-        dataSchema: {},
-      },
-    },
-    // State badge annotation
-    {
-      id: 'state-annotation',
-      type: 'text',
-      x: 100,
-      y: 260,
-      width: 120,
-      height: 30,
-      text: 'STATE BADGE',
-      color: '#f97316',
-      pv: {
-        nodeType: 'label',
-        shape: 'rectangle',
-        fill: '#f97316',
-        dataSchema: {},
-      },
-    },
-    // Border/stroke annotation
-    {
-      id: 'stroke-annotation',
-      type: 'text',
-      x: 540,
-      y: 200,
-      width: 140,
-      height: 30,
-      text: 'STROKE/BORDER',
-      color: '#f97316',
-      pv: {
-        nodeType: 'label',
-        shape: 'rectangle',
-        fill: '#f97316',
-        dataSchema: {},
-      },
-    },
-  ],
-  edges: [
-    {
-      id: 'icon-pointer',
-      fromNode: 'icon-label',
-      toNode: 'labeled-node',
-      fromSide: 'right',
-      toSide: 'left',
-      pv: { edgeType: 'pointer' },
-    },
-    {
-      id: 'label-pointer',
-      fromNode: 'label-annotation',
-      toNode: 'labeled-node',
-      fromSide: 'right',
-      toSide: 'left',
-      pv: { edgeType: 'pointer' },
-    },
-    {
-      id: 'state-pointer',
-      fromNode: 'state-annotation',
-      toNode: 'labeled-node',
-      fromSide: 'right',
-      toSide: 'left',
-      pv: { edgeType: 'pointer' },
-    },
-    {
-      id: 'stroke-pointer',
-      fromNode: 'stroke-annotation',
-      toNode: 'labeled-node',
-      fromSide: 'left',
-      toSide: 'right',
-      pv: { edgeType: 'pointer' },
-    },
-  ],
-  pv: {
-    version: '1.0.0',
-    name: 'Labeled Fields',
-    edgeTypes: {
-      pointer: {
-        style: 'dashed',
-        color: '#f97316',
-        directed: true,
-      },
-    },
-  },
-};
-
 /**
  * Canvas showing all visual variations of node fields
  */

package/src/components/NarrativeRenderer.tsx

@@ -1,171 +0,0 @@
-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/TestEventPanel.tsx

@@ -1,588 +0,0 @@
-import React, { useState, useMemo } from 'react';
-import { useTheme } from '@principal-ade/industry-theme';
-import { HelpCircle } from 'lucide-react';
-import yaml from 'js-yaml';
-import type { NarrativeTemplate, JsonValue } from '@principal-ai/principal-view-core/browser';
-import { NarrativeRenderer } from './NarrativeRenderer';
-import { convertToOtelEvents } from '../utils/narrative-converter';
-
-interface SpanEvent {
-  time: number;
-  name: string;
-  attributes: Record<string, string | number | boolean>;
-}
-
-interface TestSpan {
-  id: string;
-  name: string;
-  startTime: number;
-  endTime?: number;
-  duration?: number;
-  attributes: Record<string, string | number | boolean>;
-  events: SpanEvent[];
-  status: 'OK' | 'ERROR';
-  errorMessage?: string;
-}
-
-// OTEL Log types
-export type OtelSeverity = 'TRACE' | 'DEBUG' | 'INFO' | 'WARN' | 'ERROR' | 'FATAL';
-
-export interface OtelLog {
-  timestamp: number;
-  severity: OtelSeverity;
-  body: string | Record<string, unknown>;
-  resource: Record<string, string | number>;
-  attributes?: Record<string, JsonValue>;
-  traceId?: string;
-  spanId?: string;
-}
-
-// Timeline item (event or log)
-interface TimelineItem {
-  type: 'event' | 'log';
-  time: number;
-  // For events
-  name?: string;
-  attributes?: Record<string, JsonValue>;
-  // For logs
-  severity?: OtelSeverity;
-  body?: string | Record<string, unknown>;
-  resource?: Record<string, string | number>;
-}
-
-// View mode type
-export type ViewMode = 'raw' | 'narrative';
-
-export interface TestEventPanelProps {
-  spans: TestSpan[];
-  logs?: OtelLog[]; // Optional for backward compatibility
-  currentSpanIndex: number;
-  currentEventIndex: number;
-  highlightedPhase?: string; // 'setup' | 'execution' | 'assertion'
-  onSpanIndexChange?: (index: number) => void;
-
-  // Narrative view props
-  viewMode?: ViewMode;
-  narrativeTemplate?: NarrativeTemplate;
-  onViewModeChange?: (mode: ViewMode) => void;
-  showNarrativeMetadata?: boolean;
-}
-
-// Helper functions for log severity
-function getSeverityColor(severity: OtelSeverity): string {
-  const colors = {
-    TRACE: '#6b7280',
-    DEBUG: '#60a5fa',
-    INFO: '#4ade80',
-    WARN: '#fbbf24',
-    ERROR: '#f87171',
-    FATAL: '#dc2626',
-  };
-  return colors[severity] || '#9ca3af';
-}
-
-function getSeverityIcon(severity: OtelSeverity): string {
-  const icons = {
-    TRACE: '○',
-    DEBUG: '◐',
-    INFO: '●',
-    WARN: '⚠',
-    ERROR: '✕',
-    FATAL: '☠',
-  };
-  return icons[severity] || '•';
-}
-
-export const TestEventPanel: React.FC<TestEventPanelProps> = ({
-  spans,
-  logs = [],
-  currentSpanIndex,
-  currentEventIndex,
-  highlightedPhase,
-  onSpanIndexChange,
-  viewMode = 'raw',
-  narrativeTemplate,
-  onViewModeChange,
-  showNarrativeMetadata = false,
-}) => {
-  const { theme } = useTheme();
-  const [showHelp, setShowHelp] = useState(false);
-
-  const currentSpan = spans[currentSpanIndex];
-
-  // Convert current span to OtelEvents for narrative rendering
-  const otelEvents = useMemo(() => {
-    if (!currentSpan || viewMode !== 'narrative') return [];
-    return convertToOtelEvents(currentSpan, logs);
-  }, [currentSpan, logs, viewMode]);
-
-  const handlePrevTest = () => {
-    if (currentSpanIndex > 0 && onSpanIndexChange) {
-      onSpanIndexChange(currentSpanIndex - 1);
-    }
-  };
-
-  const handleNextTest = () => {
-    if (currentSpanIndex < spans.length - 1 && onSpanIndexChange) {
-      onSpanIndexChange(currentSpanIndex + 1);
-    }
-  };
-
-  // Build interleaved timeline
-  const timeline = useMemo(() => {
-    if (!currentSpan) return [];
-
-    const items: TimelineItem[] = [
-      // Span events
-      ...currentSpan.events.slice(0, currentEventIndex + 1).map((event) => ({
-        type: 'event' as const,
-        time: event.time,
-        name: event.name,
-        attributes: event.attributes,
-      })),
-
-      // Correlated logs (matching current span's traceId)
-      ...logs
-        .filter((log) => log.traceId === currentSpan.id)
-        .map((log) => ({
-          type: 'log' as const,
-          time: typeof log.timestamp === 'number' ? log.timestamp : new Date(log.timestamp).getTime(),
-          severity: log.severity,
-          body: log.body,
-          resource: log.resource,
-          attributes: log.attributes,
-        })),
-    ].sort((a, b) => a.time - b.time);
-
-    return items;
-  }, [currentSpan, currentEventIndex, logs]);
-
-  return (
-    <div
-      style={{
-        width: '100%',
-        height: '100%',
-        backgroundColor: theme.colors.background,
-        color: theme.colors.text,
-        fontFamily: theme.fonts.monospace,
-        fontSize: '14px',
-        boxSizing: 'border-box',
-        display: 'flex',
-        flexDirection: 'column',
-      }}
-    >
-      {/* Static Header */}
-      <div
-        style={{
-          padding: '20px 20px 0 20px',
-          backgroundColor: theme.colors.background,
-          borderBottom: `1px solid ${theme.colors.border}`,
-          flexShrink: 0,
-        }}
-      >
-        {/* Test Navigation - replacing title */}
-        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '12px' }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-            <button
-              onClick={handlePrevTest}
-              disabled={currentSpanIndex === 0}
-              style={{
-                padding: '4px 12px',
-                background: theme.colors.surface,
-                border: `1px solid ${theme.colors.border}`,
-                borderRadius: '4px',
-                color: currentSpanIndex === 0 ? theme.colors.textMuted : theme.colors.text,
-                cursor: currentSpanIndex === 0 ? 'not-allowed' : 'pointer',
-                fontSize: '14px',
-                opacity: currentSpanIndex === 0 ? 0.5 : 1,
-              }}
-            >
-              ← Prev
-            </button>
-            <div style={{ fontSize: '14px', fontWeight: 'bold' }}>
-              Test {currentSpanIndex + 1} of {spans.length}
-            </div>
-            <button
-              onClick={handleNextTest}
-              disabled={currentSpanIndex === spans.length - 1}
-              style={{
-                padding: '4px 12px',
-                background: theme.colors.surface,
-                border: `1px solid ${theme.colors.border}`,
-                borderRadius: '4px',
-                color: currentSpanIndex === spans.length - 1 ? theme.colors.textMuted : theme.colors.text,
-                cursor: currentSpanIndex === spans.length - 1 ? 'not-allowed' : 'pointer',
-                fontSize: '14px',
-                opacity: currentSpanIndex === spans.length - 1 ? 0.5 : 1,
-              }}
-            >
-              Next →
-            </button>
-          </div>
-          <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-            <div style={{ fontSize: '13px', color: theme.colors.textMuted }}>
-              <span style={{ color: '#4ade80' }}>All Passed ✓</span>
-            </div>
-            <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;
-              }}
-            >
-              <HelpCircle size={20} />
-            </button>
-          </div>
-        </div>
-
-        {/* View Mode Toggle */}
-        {narrativeTemplate && onViewModeChange && (
-          <div style={{ display: 'flex', gap: '8px', marginBottom: '12px' }}>
-            <button
-              onClick={() => onViewModeChange('raw')}
-              style={{
-                padding: '6px 12px',
-                background: viewMode === 'raw' ? theme.colors.primary : theme.colors.surface,
-                border: `1px solid ${theme.colors.border}`,
-                borderRadius: '4px',
-                color: viewMode === 'raw' ? '#ffffff' : theme.colors.text,
-                cursor: 'pointer',
-                fontSize: '13px',
-                fontWeight: viewMode === 'raw' ? 'bold' : 'normal',
-              }}
-            >
-              Raw Events
-            </button>
-            <button
-              onClick={() => onViewModeChange('narrative')}
-              style={{
-                padding: '6px 12px',
-                background: viewMode === 'narrative' ? theme.colors.primary : theme.colors.surface,
-                border: `1px solid ${theme.colors.border}`,
-                borderRadius: '4px',
-                color: viewMode === 'narrative' ? '#ffffff' : theme.colors.text,
-                cursor: 'pointer',
-                fontSize: '13px',
-                fontWeight: viewMode === 'narrative' ? 'bold' : 'normal',
-              }}
-            >
-              Narrative
-            </button>
-          </div>
-        )}
-
-        <div style={{ fontSize: '13px', color: theme.colors.textMuted, marginBottom: '15px' }}>
-          Test: {currentSpan?.name || 'Loading...'}
-        </div>
-      </div>
-
-      {/* Help Modal */}
-      {showHelp && (
-        <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)}
-        >
-          <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()}
-          >
-            <div style={{ fontWeight: 'bold', fontSize: '18px', marginBottom: '16px' }}>
-              How to Read This Panel
-            </div>
-            <div style={{ fontSize: '14px', marginBottom: '16px', lineHeight: '1.6' }}>
-              <p style={{ marginBottom: '12px' }}>
-                <strong>Timeline shows both events and logs:</strong>
-              </p>
-              <ul style={{ marginLeft: '20px', marginBottom: '16px' }}>
-                <li style={{ marginBottom: '8px' }}>
-                  <span style={{ color: '#f59e0b' }}>🟧 Events</span> - Structured lifecycle points
-                </li>
-                <li style={{ marginBottom: '8px' }}>
-                  <span style={{ color: '#4ade80' }}>● Logs</span> - Standalone log records (color = severity)
-                </li>
-                <li style={{ marginBottom: '8px' }}>
-                  <span style={{ color: '#60a5fa' }}>Blue = Test file</span>
-                </li>
-                <li>
-                  <span style={{ color: '#4ade80' }}>Green → Code under test</span>
-                </li>
-              </ul>
-            </div>
-            <button
-              onClick={() => setShowHelp(false)}
-              style={{
-                padding: '8px 16px',
-                backgroundColor: theme.colors.primary,
-                color: '#ffffff',
-                border: 'none',
-                borderRadius: '4px',
-                cursor: 'pointer',
-                fontSize: '14px',
-                fontWeight: 500,
-              }}
-            >
-              Got it
-            </button>
-          </div>
-        </div>
-      )}
-
-      {/* Scrollable Content */}
-      <div
-        style={{
-          flex: 1,
-          overflow: 'auto',
-          padding: viewMode === 'narrative' ? '0' : '20px',
-        }}
-      >
-        {/* Narrative View */}
-        {viewMode === 'narrative' && narrativeTemplate && currentSpan ? (
-          <NarrativeRenderer
-            template={narrativeTemplate}
-            events={otelEvents}
-            showMetadata={showNarrativeMetadata}
-          />
-        ) : viewMode === 'narrative' && !narrativeTemplate ? (
-          <div
-            style={{
-              padding: '40px 20px',
-              textAlign: 'center',
-              color: theme.colors.textMuted,
-            }}
-          >
-            <div style={{ fontSize: '16px', marginBottom: '12px' }}>ⓘ No narrative template available</div>
-            <div style={{ fontSize: '14px', lineHeight: '1.6' }}>
-              Create a narrative template to see a human-readable
-              <br />
-              summary of this test execution.
-            </div>
-            <button
-              onClick={() => onViewModeChange?.('raw')}
-              style={{
-                marginTop: '20px',
-                padding: '8px 16px',
-                background: theme.colors.primary,
-                color: '#ffffff',
-                border: 'none',
-                borderRadius: '4px',
-                cursor: 'pointer',
-                fontSize: '14px',
-              }}
-            >
-              View Raw Events
-            </button>
-          </div>
-        ) : null}
-
-        {/* Raw Events View (Timeline) */}
-        {viewMode === 'raw' && currentSpan && (
-          <div>
-            {timeline.map((item, idx) => {
-            if (item.type === 'event') {
-              // SPAN EVENT RENDERING
-              const filepath = item.attributes?.['code.filepath'] as string;
-              const lineno = item.attributes?.['code.lineno'] as number;
-              const isCodeUnderTest = filepath && filepath !== 'GraphConverter.test.ts';
-
-              // Determine which phase this event belongs to
-              const eventPhase = item.name?.split('.')[0]; // 'setup', 'execution', 'assertion'
-              const isHighlighted = highlightedPhase === eventPhase;
-
-              return (
-                <div
-                  key={idx}
-                  style={{
-                    marginBottom: '12px',
-                    paddingBottom: '12px',
-                    paddingLeft: '12px',
-                    borderBottom: idx < timeline.length - 1 ? `1px solid ${theme.colors.border}` : 'none',
-                    borderLeft: '3px solid #f59e0b',
-                    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 8px 8px 12px' : '0 0 12px 12px',
-                    borderRadius: '4px',
-                  }}
-                >
-                  <div
-                    style={{
-                      display: 'flex',
-                      justifyContent: 'space-between',
-                      alignItems: 'center',
-                      marginBottom: '4px',
-                      gap: '8px',
-                    }}
-                  >
-                    <div style={{ color: '#f59e0b', fontSize: '13px', fontWeight: 'bold', flexShrink: 0 }}>
-                      EVENT: {item.name}
-                    </div>
-                    {filepath && (
-                      <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',
-                        }}
-                      >
-                        {isCodeUnderTest && '→ '}
-                        {filepath}:{lineno}
-                      </div>
-                    )}
-                  </div>
-                  <pre
-                    style={{
-                      background: theme.colors.surface,
-                      padding: '8px',
-                      borderRadius: '4px',
-                      margin: 0,
-                      fontSize: '13px',
-                      lineHeight: '1.5',
-                      overflow: 'auto',
-                      maxWidth: '100%',
-                    }}
-                  >
-                    {yaml.dump(
-                      Object.fromEntries(
-                        Object.entries(item.attributes || {}).filter(
-                          ([key]) => key !== 'code.filepath' && key !== 'code.lineno'
-                        )
-                      ),
-                      { indent: 2, lineWidth: -1 }
-                    )}
-                  </pre>
-                </div>
-              );
-            } else {
-              // OTEL LOG RENDERING
-              const serviceName = item.resource?.['service.name'];
-              const severityColor = getSeverityColor(item.severity!);
-
-              return (
-                <div
-                  key={idx}
-                  style={{
-                    marginBottom: '12px',
-                    paddingBottom: '12px',
-                    paddingLeft: '12px',
-                    borderBottom: idx < timeline.length - 1 ? `1px solid ${theme.colors.border}` : 'none',
-                    borderLeft: `3px solid ${severityColor}`,
-                  }}
-                >
-                  <div
-                    style={{
-                      display: 'flex',
-                      justifyContent: 'space-between',
-                      alignItems: 'center',
-                      marginBottom: '4px',
-                    }}
-                  >
-                    <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
-                      <span style={{ fontSize: '16px' }}>{getSeverityIcon(item.severity!)}</span>
-                      <span
-                        style={{
-                          color: severityColor,
-                          fontSize: '13px',
-                          fontWeight: 'bold',
-                        }}
-                      >
-                        LOG: {item.severity}
-                      </span>
-                    </div>
-                    {serviceName && (
-                      <div
-                        style={{
-                          fontSize: '12px',
-                          color: '#9ca3af',
-                          background: '#1e293b',
-                          padding: '2px 6px',
-                          borderRadius: '3px',
-                        }}
-                      >
-                        {serviceName}
-                      </div>
-                    )}
-                  </div>
-
-                  {/* Log body */}
-                  <div
-                    style={{
-                      background: theme.colors.surface,
-                      padding: '8px',
-                      borderRadius: '4px',
-                      marginBottom: item.attributes && Object.keys(item.attributes).length > 0 ? '8px' : '0',
-                      fontSize: '13px',
-                    }}
-                  >
-                    {typeof item.body === 'string' ? (
-                      item.body
-                    ) : (
-                      <pre style={{ margin: 0, fontSize: '13px', lineHeight: '1.5' }}>
-                        {yaml.dump(item.body, { indent: 2, lineWidth: -1 })}
-                      </pre>
-                    )}
-                  </div>
-
-                  {/* Log attributes */}
-                  {item.attributes && Object.keys(item.attributes).length > 0 && (
-                    <pre
-                      style={{
-                        background: theme.colors.surface,
-                        padding: '8px',
-                        borderRadius: '4px',
-                        margin: 0,
-                        fontSize: '12px',
-                        lineHeight: '1.5',
-                        opacity: 0.8,
-                      }}
-                    >
-                      {yaml.dump(item.attributes, { indent: 2, lineWidth: -1 })}
-                    </pre>
-                  )}
-                </div>
-              );
-            }
-          })}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};

package/src/utils/narrative-converter.ts

@@ -1,157 +0,0 @@
-/**
- * Utilities for converting TestEventPanel data to OtelEvent format
- * for use with the narrative renderer
- */
-
-import type { OtelEvent } from '@principal-ai/principal-view-core/browser';
-import type { OtelLog, OtelSeverity } from '../components/TestEventPanel';
-
-// TestEventPanel types (matching TestEventPanel.tsx)
-interface SpanEvent {
-  time: number;
-  name: string;
-  attributes: Record<string, string | number | boolean>;
-}
-
-interface TestSpan {
-  id: string;
-  name: string;
-  startTime: number;
-  endTime?: number;
-  duration?: number;
-  attributes: Record<string, string | number | boolean>;
-  events: SpanEvent[];
-  status: 'OK' | 'ERROR';
-  errorMessage?: string;
-}
-
-/**
- * Convert OtelSeverity to severity number (OpenTelemetry spec)
- */
-function severityToNumber(severity: OtelSeverity): number {
-  const severityMap: Record<OtelSeverity, number> = {
-    TRACE: 1,
-    DEBUG: 5,
-    INFO: 9,
-    WARN: 13,
-    ERROR: 17,
-    FATAL: 21,
-  };
-  return severityMap[severity] || 9;
-}
-
-/**
- * Convert TestSpan events to OtelEvent spans
- */
-function convertSpanEvents(span: TestSpan): OtelEvent[] {
-  return span.events.map((event) => ({
-    name: event.name,
-    timestamp: event.time,
-    type: 'span' as const,
-    spanId: span.id,
-    traceId: span.id, // Use span ID as trace ID for single-span tests
-    attributes: event.attributes,
-  }));
-}
-
-/**
- * Convert OtelLogs to OtelEvent logs
- */
-function convertLogs(logs: OtelLog[]): OtelEvent[] {
-  return logs.map((log) => {
-    // Filter out null values from attributes (OtelAttributeValue doesn't include null)
-    const filterNullValues = (obj: Record<string, any> | undefined) => {
-      if (!obj) return {};
-      return Object.fromEntries(
-        Object.entries(obj).filter(([, value]) => value !== null)
-      );
-    };
-
-    return {
-      name: 'log',
-      timestamp: typeof log.timestamp === 'number' ? log.timestamp : new Date(log.timestamp).getTime(),
-      type: 'log' as const,
-      spanId: log.spanId,
-      traceId: log.traceId,
-      severityText: log.severity,
-      severityNumber: severityToNumber(log.severity),
-      body: typeof log.body === 'string' ? log.body : JSON.stringify(log.body),
-      attributes: {
-        ...filterNullValues(log.attributes),
-        ...filterNullValues(log.resource),
-      },
-    };
-  });
-}
-
-/**
- * Convert TestSpan and OtelLogs to OtelEvent array
- *
- * @param span - The test span to convert
- * @param logs - Optional OTEL logs to include
- * @returns Array of OtelEvents in chronological order
- */
-export function convertToOtelEvents(span: TestSpan, logs: OtelLog[] = []): OtelEvent[] {
-  const spanEvents = convertSpanEvents(span);
-
-  // Filter logs for this specific span
-  const spanLogs = logs.filter((log) => log.spanId === span.id || log.traceId === span.id);
-  const logEvents = convertLogs(spanLogs);
-
-  // Combine and sort by timestamp
-  const allEvents = [...spanEvents, ...logEvents].sort((a, b) => {
-    const aTime = typeof a.timestamp === 'number' ? a.timestamp : new Date(a.timestamp).getTime();
-    const bTime = typeof b.timestamp === 'number' ? b.timestamp : new Date(b.timestamp).getTime();
-    return aTime - bTime;
-  });
-
-  return allEvents;
-}
-
-/**
- * Convert all TestSpans to OtelEvents
- *
- * @param spans - Array of test spans
- * @param logs - Optional OTEL logs to include
- * @returns Array of OtelEvents for all spans
- */
-export function convertAllSpansToOtelEvents(spans: TestSpan[], logs: OtelLog[] = []): OtelEvent[] {
-  const allEvents: OtelEvent[] = [];
-
-  for (const span of spans) {
-    const spanEvents = convertToOtelEvents(span, logs);
-    allEvents.push(...spanEvents);
-  }
-
-  // Sort all events chronologically
-  return allEvents.sort((a, b) => {
-    const aTime = typeof a.timestamp === 'number' ? a.timestamp : new Date(a.timestamp).getTime();
-    const bTime = typeof b.timestamp === 'number' ? b.timestamp : new Date(b.timestamp).getTime();
-    return aTime - bTime;
-  });
-}
-
-/**
- * Extract test result attributes from TestSpan
- * Useful for narrative templates that check assertions
- */
-export function extractTestAttributes(span: TestSpan): Record<string, unknown> {
-  // Find assertion.complete event
-  const assertionComplete = span.events.find((e) => e.name === 'assertion.complete');
-
-  if (assertionComplete) {
-    return {
-      'assertions.passed': assertionComplete.attributes['assertions.passed'] || 0,
-      'assertions.failed': assertionComplete.attributes['assertions.failed'] || 0,
-      'test.status': span.status,
-      'test.name': span.name,
-      ...span.attributes,
-    };
-  }
-
-  return {
-    'test.status': span.status,
-    'test.name': span.name,
-    ...span.attributes,
-  };
-}

package/src/utils/narrative-loader.ts

@@ -1,172 +0,0 @@
-/**
- * Utilities for loading and managing narrative templates
- */
-
-import type { NarrativeTemplate } from '@principal-ai/principal-view-core/browser';
-
-/**
- * Load a narrative template from a URL or file path
- *
- * Note: In most cases, you should import templates directly:
- *   import template from './my-template.narrative.json';
- *
- * This function is useful when you need to dynamically load templates.
- *
- * @param path - Path to the narrative template JSON file
- * @returns Promise resolving to the narrative template, or null if not found
- */
-export async function loadNarrativeTemplate(path: string): Promise<NarrativeTemplate | null> {
-  try {
-    const response = await fetch(path);
-    if (!response.ok) {
-      console.warn(`Narrative template not found: ${path}`);
-      return null;
-    }
-    const template = await response.json();
-    return template as NarrativeTemplate;
-  } catch (error) {
-    console.warn(`Failed to load narrative template from ${path}:`, error);
-    return null;
-  }
-}
-
-/**
- * Auto-discover narrative template for a given canvas path
- *
- * Example:
- *   Canvas: "/path/to/graph-converter.otel.canvas"
- *   Narrative: "/path/to/graph-converter.narrative.json"
- *
- * @param canvasPath - Path to the .otel.canvas file
- * @returns Promise resolving to the narrative template, or null if not found
- */
-export async function discoverNarrativeTemplate(canvasPath: string): Promise<NarrativeTemplate | null> {
-  const narrativePath = canvasPath.replace('.otel.canvas', '.narrative.json');
-  return loadNarrativeTemplate(narrativePath);
-}
-
-/**
- * Validate a narrative template has required fields
- *
- * @param template - Template to validate
- * @returns True if valid, false otherwise
- */
-export function validateNarrativeTemplate(template: unknown): template is NarrativeTemplate {
-  if (!template || typeof template !== 'object') {
-    return false;
-  }
-
-  const t = template as Partial<NarrativeTemplate>;
-
-  // Check required fields
-  if (!t.version || !t.canvas || !t.name || !t.mode || !t.scenarioSelection || !t.scenarios) {
-    return false;
-  }
-
-  // Check scenarios array
-  if (!Array.isArray(t.scenarios) || t.scenarios.length === 0) {
-    return false;
-  }
-
-  // Check each scenario has required fields
-  for (const scenario of t.scenarios) {
-    if (!scenario.id || !scenario.priority || !scenario.condition || !scenario.template) {
-      return false;
-    }
-  }
-
-  return true;
-}
-
-/**
- * Get a user-friendly error message for invalid templates
- *
- * @param template - Template to check
- * @returns Error message, or null if valid
- */
-export function getNarrativeTemplateError(template: unknown): string | null {
-  if (!template || typeof template !== 'object') {
-    return 'Template must be a valid JSON object';
-  }
-
-  const t = template as Partial<NarrativeTemplate>;
-
-  if (!t.version) return 'Missing required field: version';
-  if (!t.canvas) return 'Missing required field: canvas';
-  if (!t.name) return 'Missing required field: name';
-  if (!t.mode) return 'Missing required field: mode';
-  if (!t.scenarioSelection) return 'Missing required field: scenarioSelection';
-  if (!t.scenarios) return 'Missing required field: scenarios';
-
-  if (!Array.isArray(t.scenarios)) {
-    return 'Field "scenarios" must be an array';
-  }
-
-  if (t.scenarios.length === 0) {
-    return 'Template must have at least one scenario';
-  }
-
-  for (let i = 0; i < t.scenarios.length; i++) {
-    const scenario = t.scenarios[i];
-    if (!scenario.id) return `Scenario ${i}: missing required field "id"`;
-    if (scenario.priority === undefined) return `Scenario ${i}: missing required field "priority"`;
-    if (!scenario.condition) return `Scenario ${i}: missing required field "condition"`;
-    if (!scenario.template) return `Scenario ${i}: missing required field "template"`;
-  }
-
-  return null;
-}
-
-/**
- * React hook for loading narrative templates
- *
- * @param templatePath - Path to template, or null to skip loading
- * @returns {template, loading, error}
- */
-export function useNarrativeTemplate(templatePath: string | null) {
-  const [template, setTemplate] = React.useState<NarrativeTemplate | null>(null);
-  const [loading, setLoading] = React.useState<boolean>(false);
-  const [error, setError] = React.useState<string | null>(null);
-
-  React.useEffect(() => {
-    if (!templatePath) {
-      setTemplate(null);
-      setLoading(false);
-      setError(null);
-      return;
-    }
-
-    setLoading(true);
-    setError(null);
-
-    loadNarrativeTemplate(templatePath)
-      .then((loadedTemplate) => {
-        if (loadedTemplate) {
-          const validationError = getNarrativeTemplateError(loadedTemplate);
-          if (validationError) {
-            setError(validationError);
-            setTemplate(null);
-          } else {
-            setTemplate(loadedTemplate);
-            setError(null);
-          }
-        } else {
-          setError('Template not found');
-          setTemplate(null);
-        }
-      })
-      .catch((err) => {
-        setError(err instanceof Error ? err.message : 'Unknown error');
-        setTemplate(null);
-      })
-      .finally(() => {
-        setLoading(false);
-      });
-  }, [templatePath]);
-
-  return { template, loading, error };
-}
-
-// Note: React import is expected to be available in the React package
-// If this causes issues, we can remove the hook and export it separately
-import React from 'react';