@principal-ai/principal-view-react 0.7.39 → 0.7.41

package/dist/utils/narrative-loader.js

@@ -1,163 +0,0 @@
-/**
- * Utilities for loading and managing narrative templates
- */
-/**
- * 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) {
-    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;
-    }
-    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) {
-    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) {
-    if (!template || typeof template !== 'object') {
-        return false;
-    }
-    const t = template;
-    // 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) {
-    if (!template || typeof template !== 'object') {
-        return 'Template must be a valid JSON object';
-    }
-    const t = template;
-    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) {
-    const [template, setTemplate] = React.useState(null);
-    const [loading, setLoading] = React.useState(false);
-    const [error, setError] = React.useState(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';
-//# sourceMappingURL=narrative-loader.js.map

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

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

package/src/stories/RealTestExecution.stories.tsx

@@ -1,404 +0,0 @@
-import React, { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { GraphRenderer } from '../components/GraphRenderer';
-import { TestEventPanel } from '../components/TestEventPanel';
-import type { ViewMode } from '../components/TestEventPanel';
-import type { ExtendedCanvas, GraphEvent, JsonObject, NarrativeTemplate } from '@principal-ai/principal-view-core/browser';
-import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
-import testSpans from './data/graph-converter-test-execution.json';
-import narrativeTemplate from './data/graph-converter-test.narrative.json';
-
-const meta = {
-  title: 'Features/Real Test Execution',
-  component: GraphRenderer,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component:
-          'Visualizes REAL test execution data from instrumented Bun tests using the "wide event" pattern. Shows actual spans with file/line information collected from running GraphConverter.test.ts. Hover over graph nodes to highlight related events in the panel.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  decorators: [
-    (Story) => (
-      <ThemeProvider theme={defaultEditorTheme}>
-        <div style={{ width: '100vw', height: '100vh', background: '#0a0a0a' }}>
-          <Story />
-        </div>
-      </ThemeProvider>
-    ),
-  ],
-} satisfies Meta<typeof GraphRenderer>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ============================================================================
-// Test Execution Flow Canvas
-// ============================================================================
-
-const testExecutionCanvas: ExtendedCanvas = {
-  nodes: [
-    // Test Suite
-    {
-      id: 'test-suite',
-      type: 'text',
-      text: 'GraphConverter Test Suite',
-      x: -100,
-      y: -100,
-      width: 240,
-      height: 80,
-      pv: {
-        nodeType: 'test-suite',
-        name: 'Test Suite',
-        description: 'Collection of GraphConverter tests',
-        shape: 'rectangle',
-        fill: '#3b82f6',
-      },
-    },
-
-    // Test Phase Nodes
-    {
-      id: 'setup-phase',
-      type: 'text',
-      text: 'Setup',
-      x: -250,
-      y: 50,
-      width: 120,
-      height: 80,
-      pv: {
-        nodeType: 'test-phase',
-        name: 'Setup Phase',
-        description: 'Test data preparation',
-        shape: 'hexagon',
-        fill: '#10b981',
-      },
-    },
-    {
-      id: 'execution-phase',
-      type: 'text',
-      text: 'Execution',
-      x: -80,
-      y: 50,
-      width: 120,
-      height: 80,
-      pv: {
-        nodeType: 'test-phase',
-        name: 'Execution Phase',
-        description: 'Code under test runs',
-        shape: 'hexagon',
-        fill: '#f59e0b',
-      },
-    },
-    {
-      id: 'assertion-phase',
-      type: 'text',
-      text: 'Assertion',
-      x: 90,
-      y: 50,
-      width: 120,
-      height: 80,
-      pv: {
-        nodeType: 'test-phase',
-        name: 'Assertion Phase',
-        description: 'Verify results',
-        shape: 'hexagon',
-        fill: '#8b5cf6',
-      },
-    },
-
-    // Result Node
-    {
-      id: 'test-result',
-      type: 'text',
-      text: 'Test Result',
-      x: -100,
-      y: 200,
-      width: 240,
-      height: 80,
-      pv: {
-        nodeType: 'result',
-        name: 'Test Result',
-        description: 'Pass/Fail outcome',
-        shape: 'rectangle',
-        fill: '#10b981',
-      },
-    },
-  ],
-  edges: [
-    {
-      id: 'suite-to-setup',
-      fromNode: 'test-suite',
-      toNode: 'setup-phase',
-      fromSide: 'bottom',
-      toSide: 'top',
-      label: 'start test',
-      pv: {
-        edgeType: 'flow',
-        style: 'solid',
-      },
-    },
-    {
-      id: 'setup-to-execution',
-      fromNode: 'setup-phase',
-      toNode: 'execution-phase',
-      fromSide: 'right',
-      toSide: 'left',
-      label: 'data ready',
-      pv: {
-        edgeType: 'flow',
-        style: 'solid',
-      },
-    },
-    {
-      id: 'execution-to-assertion',
-      fromNode: 'execution-phase',
-      toNode: 'assertion-phase',
-      fromSide: 'right',
-      toSide: 'left',
-      label: 'got result',
-      pv: {
-        edgeType: 'flow',
-        style: 'solid',
-      },
-    },
-    {
-      id: 'assertion-to-result',
-      fromNode: 'assertion-phase',
-      toNode: 'test-result',
-      fromSide: 'bottom',
-      toSide: 'top',
-      label: 'complete',
-      pv: {
-        edgeType: 'flow',
-        style: 'solid',
-      },
-    },
-  ],
-  pv: {
-    version: '1.0.0',
-    name: 'Test Execution Flow',
-    description: 'Visualizes the flow of test execution through phases',
-  },
-};
-
-// ============================================================================
-// Interactive Story (No Animation)
-// ============================================================================
-
-const AnimatedTestExecution = () => {
-  const [events] = useState<GraphEvent[]>([]);
-  const [currentSpanIndex, setCurrentSpanIndex] = useState(0);
-  // Show all events by default - set to a large number
-  const [currentEventIndex] = useState(999);
-  const [highlightedPhase, setHighlightedPhase] = useState<string | undefined>();
-
-  // Extract spans and logs from test data
-  const testData = testSpans as JsonObject;
-  const spans = Array.isArray(testData) ? testData : testData.spans || testData;
-  const logs = testData.logs || [];
-
-  return (
-    <div style={{ display: 'flex', width: '100vw', height: '100vh' }}>
-      {/* Event Panel - Left Side */}
-      <div style={{ flex: '0 0 50%', height: '100%', borderRight: `1px solid #333`, overflow: 'hidden' }}>
-        <TestEventPanel
-          spans={spans}
-          logs={logs}
-          currentSpanIndex={currentSpanIndex}
-          currentEventIndex={currentEventIndex}
-          highlightedPhase={highlightedPhase}
-          onSpanIndexChange={setCurrentSpanIndex}
-        />
-      </div>
-
-      {/* Graph Visualization - Right Side */}
-      <div
-        style={{ flex: '0 0 50%', height: '100%', position: 'relative' }}
-        onMouseLeave={() => setHighlightedPhase(undefined)}
-      >
-        <div
-          style={{ width: '100%', height: '100%' }}
-          onMouseOver={(e) => {
-            // Check if hovering over a phase node
-            const target = e.target as HTMLElement;
-            const textContent = target.textContent;
-            if (textContent === 'Setup') setHighlightedPhase('setup');
-            else if (textContent === 'Execution') setHighlightedPhase('execution');
-            else if (textContent === 'Assertion') setHighlightedPhase('assertion');
-          }}
-        >
-          <GraphRenderer
-            canvas={testExecutionCanvas}
-            showControls={true}
-            events={events}
-          />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-/**
- * Interactive visualization of real test execution data using the "wide event" pattern.
- *
- * This demonstrates the key concept from loggingsucks.com:
- * - ONE comprehensive span per test (not multiple child spans)
- * - Events show the narrative of what happened during execution
- * - Context accumulates through event attributes with file/line information
- * - Easy to search by test.name to get full execution story
- *
- * **Interaction:**
- * - Hover over graph nodes (Setup, Execution, Assertion) to highlight related events
- * - Watch the code journey: blue = test file, green = code under test
- * - All events are shown immediately for easy review
- */
-export const Animated: Story = {
-  render: () => <AnimatedTestExecution />,
-};
-
-/**
- * Static view of the test execution flow showing phases.
- */
-export const StaticView: Story = {
-  args: {
-    canvas: testExecutionCanvas,
-    showControls: true,
-  },
-};
-
-/**
- * Event panel component showing test execution narrative with file/line information.
- *
- * Shows how events and logs are interleaved in chronological order, with automatic
- * file/line capture from stack traces and severity-based color coding for logs.
- */
-export const EventPanelOnly: StoryObj = {
-  render: () => {
-    const testData = testSpans as JsonObject;
-    const spans = Array.isArray(testData) ? testData : testData.spans || testData;
-    const logs = testData.logs || [];
-
-    return (
-      <div style={{ width: '600px', height: '100vh' }}>
-        <TestEventPanel
-          spans={spans}
-          logs={logs}
-          currentSpanIndex={0}
-          currentEventIndex={999} // Show all events
-          highlightedPhase={undefined}
-        />
-      </div>
-    );
-  },
-};
-
-/**
- * Event panel with narrative view toggle
- *
- * Demonstrates the new narrative view mode that transforms raw OTEL events into
- * human-readable execution narratives. Toggle between "Raw Events" and "Narrative"
- * to see both views.
- *
- * Features:
- * - Human-readable narrative generated from template
- * - Scenario-based rendering (test-passed vs test-failed)
- * - Syntax highlighting for better readability
- * - Optional metadata display
- */
-export const WithNarrativeToggle: StoryObj = {
-  render: () => {
-    const [viewMode, setViewMode] = useState<ViewMode>('narrative');
-    const [currentSpanIndex, setCurrentSpanIndex] = useState(0);
-    const [showMetadata, setShowMetadata] = useState(false);
-
-    const testData = testSpans as JsonObject;
-    const spans = Array.isArray(testData) ? testData : testData.spans || testData;
-    const logs = testData.logs || [];
-
-    return (
-      <div style={{ width: '100vw', height: '100vh', display: 'flex', flexDirection: 'column' }}>
-        {/* Controls */}
-        <div
-          style={{
-            padding: '12px 20px',
-            background: '#1a1a1a',
-            borderBottom: '1px solid #333',
-            display: 'flex',
-            gap: '12px',
-            alignItems: 'center',
-          }}
-        >
-          <label style={{ color: '#999', fontSize: '14px' }}>
-            <input
-              type="checkbox"
-              checked={showMetadata}
-              onChange={(e) => setShowMetadata(e.target.checked)}
-              style={{ marginRight: '6px' }}
-            />
-            Show Metadata
-          </label>
-        </div>
-
-        {/* Event Panel */}
-        <div style={{ flex: 1, overflow: 'hidden' }}>
-          <TestEventPanel
-            spans={spans}
-            logs={logs}
-            currentSpanIndex={currentSpanIndex}
-            currentEventIndex={999}
-            onSpanIndexChange={setCurrentSpanIndex}
-            viewMode={viewMode}
-            narrativeTemplate={narrativeTemplate as NarrativeTemplate}
-            onViewModeChange={setViewMode}
-            showNarrativeMetadata={showMetadata}
-          />
-        </div>
-      </div>
-    );
-  },
-};
-
-/**
- * Split view with narrative on left, graph on right
- *
- * Shows how the narrative view integrates with the graph visualization,
- * providing a complete picture of test execution.
- */
-export const NarrativeWithGraph: StoryObj = {
-  render: () => {
-    const [viewMode, setViewMode] = useState<ViewMode>('narrative');
-    const [currentSpanIndex, setCurrentSpanIndex] = useState(0);
-    const [events] = useState<GraphEvent[]>([]);
-
-    const testData = testSpans as JsonObject;
-    const spans = Array.isArray(testData) ? testData : testData.spans || testData;
-    const logs = testData.logs || [];
-
-    return (
-      <div style={{ display: 'flex', width: '100vw', height: '100vh' }}>
-        {/* Event Panel - Left Side */}
-        <div style={{ flex: '0 0 50%', height: '100%', borderRight: '1px solid #333', overflow: 'hidden' }}>
-          <TestEventPanel
-            spans={spans}
-            logs={logs}
-            currentSpanIndex={currentSpanIndex}
-            currentEventIndex={999}
-            onSpanIndexChange={setCurrentSpanIndex}
-            viewMode={viewMode}
-            narrativeTemplate={narrativeTemplate as NarrativeTemplate}
-            onViewModeChange={setViewMode}
-            showNarrativeMetadata={true}
-          />
-        </div>
-
-        {/* Graph Visualization - Right Side */}
-        <div style={{ flex: '0 0 50%', height: '100%', position: 'relative' }}>
-          <GraphRenderer canvas={testExecutionCanvas} showControls={true} events={events} />
-        </div>
-      </div>
-    );
-  },
-};