@principal-ai/principal-view-react 0.7.11 → 0.7.12

package/src/components/TestEventPanel.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import { useTheme } from '@principal-ade/industry-theme';
 import { HelpCircle } from 'lucide-react';
 
@@ -20,23 +20,115 @@ interface TestSpan {
   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, any>;
+  traceId?: string;
+  spanId?: string;
+}
+
+// Timeline item (event or log)
+interface TimelineItem {
+  type: 'event' | 'log';
+  time: number;
+  // For events
+  name?: string;
+  attributes?: Record<string, any>;
+  // For logs
+  severity?: OtelSeverity;
+  body?: string | Record<string, unknown>;
+  resource?: Record<string, string | number>;
+}
+
 export interface TestEventPanelProps {
   spans: TestSpan[];
+  logs?: OtelLog[]; // Optional for backward compatibility
   currentSpanIndex: number;
   currentEventIndex: number;
   highlightedPhase?: string; // 'setup' | 'execution' | 'assertion'
 }
 
+// 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,
 }) => {
   const { theme } = useTheme();
   const [showHelp, setShowHelp] = useState(false);
+  const [viewMode, setViewMode] = useState<'all' | 'events' | 'logs'>('all');
+
   const currentSpan = spans[currentSpanIndex];
-  const eventsUpToNow = currentSpan?.events.slice(0, currentEventIndex + 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]);
+
+  // Filter timeline based on view mode
+  const filteredTimeline = useMemo(() => {
+    if (viewMode === 'all') return timeline;
+    return timeline.filter((item) => item.type === viewMode.slice(0, -1)); // 'events' -> 'event', 'logs' -> 'log'
+  }, [timeline, viewMode]);
+
+  const eventCount = timeline.filter((i) => i.type === 'event').length;
+  const logCount = timeline.filter((i) => i.type === 'log').length;
 
   return (
     <div
@@ -54,7 +146,7 @@ export const TestEventPanel: React.FC<TestEventPanelProps> = ({
     >
       <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '15px' }}>
         <div style={{ fontWeight: 'bold', fontSize: '18px' }}>
-          Wide Event Pattern - Code Journey
+          Execution Timeline
         </div>
         <button
           onClick={() => setShowHelp(true)}
@@ -77,6 +169,56 @@ export const TestEventPanel: React.FC<TestEventPanelProps> = ({
           <HelpCircle size={20} />
         </button>
       </div>
+
+      {/* Filter Tabs */}
+      <div style={{ display: 'flex', gap: '8px', marginBottom: '12px' }}>
+        <button
+          onClick={() => setViewMode('all')}
+          style={{
+            padding: '6px 12px',
+            background: viewMode === 'all' ? theme.colors.primary : 'transparent',
+            border: `1px solid ${theme.colors.border}`,
+            borderRadius: '4px',
+            color: viewMode === 'all' ? '#ffffff' : theme.colors.text,
+            cursor: 'pointer',
+            fontSize: '12px',
+            fontWeight: 500,
+          }}
+        >
+          All ({timeline.length})
+        </button>
+        <button
+          onClick={() => setViewMode('events')}
+          style={{
+            padding: '6px 12px',
+            background: viewMode === 'events' ? theme.colors.primary : 'transparent',
+            border: `1px solid ${theme.colors.border}`,
+            borderRadius: '4px',
+            color: viewMode === 'events' ? '#ffffff' : theme.colors.text,
+            cursor: 'pointer',
+            fontSize: '12px',
+            fontWeight: 500,
+          }}
+        >
+          Events ({eventCount})
+        </button>
+        <button
+          onClick={() => setViewMode('logs')}
+          style={{
+            padding: '6px 12px',
+            background: viewMode === 'logs' ? theme.colors.primary : 'transparent',
+            border: `1px solid ${theme.colors.border}`,
+            borderRadius: '4px',
+            color: viewMode === 'logs' ? '#ffffff' : theme.colors.text,
+            cursor: 'pointer',
+            fontSize: '12px',
+            fontWeight: 500,
+          }}
+        >
+          Logs ({logCount})
+        </button>
+      </div>
+
       <div style={{ fontSize: '13px', color: theme.colors.textMuted, marginBottom: '15px' }}>
         Test: {currentSpan?.name || 'Loading...'}
       </div>
@@ -114,9 +256,15 @@ export const TestEventPanel: React.FC<TestEventPanelProps> = ({
             </div>
             <div style={{ fontSize: '14px', marginBottom: '16px', lineHeight: '1.6' }}>
               <p style={{ marginBottom: '12px' }}>
-                <strong>Watch how execution flows through files:</strong>
+                <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>
@@ -125,30 +273,20 @@ export const TestEventPanel: React.FC<TestEventPanelProps> = ({
                 </li>
               </ul>
               <p style={{ marginBottom: '12px' }}>
-                <strong>Span Context (Static)</strong>
+                <strong>Use filter tabs to focus:</strong>
               </p>
-              <pre
-                style={{
-                  background: theme.colors.surface,
-                  padding: '12px',
-                  borderRadius: '4px',
-                  fontSize: '13px',
-                  overflow: 'auto',
-                }}
-              >
-{`{
-  "test.file": "GraphConverter.test.ts",
-  "test.suite": "GraphConverter",
-  "test.result": "pass"
-}`}
-              </pre>
+              <ul style={{ marginLeft: '20px' }}>
+                <li>All - Interleaved timeline</li>
+                <li>Events - Span events only</li>
+                <li>Logs - OTEL logs only</li>
+              </ul>
             </div>
             <button
               onClick={() => setShowHelp(false)}
               style={{
                 padding: '8px 16px',
                 backgroundColor: theme.colors.primary,
-                color: theme.colors.background,
+                color: '#ffffff',
                 border: 'none',
                 borderRadius: '4px',
                 cursor: 'pointer',
@@ -162,27 +300,18 @@ export const TestEventPanel: React.FC<TestEventPanelProps> = ({
         </div>
       )}
 
+      {/* Timeline Items */}
       {currentSpan && (
-        <>
-          {/* Event Timeline (context mutations) */}
-          <div>
-            <div
-              style={{
-                color: '#4ade80',
-                fontWeight: 'bold',
-                marginBottom: '8px',
-                fontSize: '15px',
-              }}
-            >
-              Event Timeline (Context Mutations)
-            </div>
-            {eventsUpToNow.map((event, idx) => {
-              const filepath = event.attributes['code.filepath'] as string;
-              const lineno = event.attributes['code.lineno'] as number;
+        <div>
+          {filteredTimeline.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 = event.name.split('.')[0]; // 'setup', 'execution', 'assertion'
+              const eventPhase = item.name?.split('.')[0]; // 'setup', 'execution', 'assertion'
               const isHighlighted = highlightedPhase === eventPhase;
 
               return (
@@ -191,12 +320,14 @@ export const TestEventPanel: React.FC<TestEventPanelProps> = ({
                   style={{
                     marginBottom: '12px',
                     paddingBottom: '12px',
-                    borderBottom: idx < eventsUpToNow.length - 1 ? `1px solid ${theme.colors.border}` : 'none',
+                    paddingLeft: '12px',
+                    borderBottom: idx < filteredTimeline.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' : '0',
+                    padding: isHighlighted ? '8px 8px 8px 12px' : '0 0 12px 12px',
                     borderRadius: '4px',
                   }}
                 >
@@ -209,8 +340,8 @@ export const TestEventPanel: React.FC<TestEventPanelProps> = ({
                       gap: '8px',
                     }}
                   >
-                    <div style={{ color: '#f59e0b', fontSize: '13px', flexShrink: 0 }}>
-                      {idx + 1}. {event.name}
+                    <div style={{ color: '#f59e0b', fontSize: '13px', fontWeight: 'bold', flexShrink: 0 }}>
+                      EVENT: {item.name}
                     </div>
                     {filepath && (
                       <div
@@ -247,7 +378,7 @@ export const TestEventPanel: React.FC<TestEventPanelProps> = ({
                   >
                     {JSON.stringify(
                       Object.fromEntries(
-                        Object.entries(event.attributes).filter(
+                        Object.entries(item.attributes || {}).filter(
                           ([key]) => key !== 'code.filepath' && key !== 'code.lineno'
                         )
                       ),
@@ -257,9 +388,96 @@ export const TestEventPanel: React.FC<TestEventPanelProps> = ({
                   </pre>
                 </div>
               );
-            })}
-          </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 < filteredTimeline.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: '12px' }}>
+                        {JSON.stringify(item.body, null, 2)}
+                      </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: '11px',
+                        opacity: 0.8,
+                      }}
+                    >
+                      {JSON.stringify(item.attributes, null, 2)}
+                    </pre>
+                  )}
+                </div>
+              );
+            }
+          })}
+        </div>
       )}
 
       <div
@@ -275,7 +493,7 @@ export const TestEventPanel: React.FC<TestEventPanelProps> = ({
           <strong>Total tests:</strong> {spans.length}
         </div>
         <div style={{ marginBottom: '8px' }}>
-          <strong>Pattern:</strong> One span per test + event timeline
+          <strong>Timeline:</strong> {eventCount} events, {logCount} logs
         </div>
         <div>
           <strong>Status:</strong>{' '}

package/src/stories/RealTestExecution.stories.tsx

@@ -193,11 +193,27 @@ const AnimatedTestExecution = () => {
   const [currentEventIndex] = useState(999);
   const [highlightedPhase, setHighlightedPhase] = useState<string | undefined>();
 
+  // Extract spans and logs from test data
+  const testData = testSpans as any;
+  const spans = Array.isArray(testData) ? testData : testData.spans || testData;
+  const logs = testData.logs || [];
+
   return (
     <div style={{ display: 'flex', width: '100vw', height: '100vh' }}>
-      {/* Graph Visualization - Left Side */}
+      {/* 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}
+        />
+      </div>
+
+      {/* Graph Visualization - Right Side */}
       <div
-        style={{ flex: '0 0 60%', height: '100%', position: 'relative' }}
+        style={{ flex: '0 0 50%', height: '100%', position: 'relative' }}
         onMouseLeave={() => setHighlightedPhase(undefined)}
       >
         <div
@@ -218,16 +234,6 @@ const AnimatedTestExecution = () => {
           />
         </div>
       </div>
-
-      {/* Event Panel - Right Side */}
-      <div style={{ flex: '0 0 40%', height: '100%', borderLeft: `1px solid #333`, overflow: 'hidden' }}>
-        <TestEventPanel
-          spans={testSpans as any}
-          currentSpanIndex={currentSpanIndex}
-          currentEventIndex={currentEventIndex}
-          highlightedPhase={highlightedPhase}
-        />
-      </div>
     </div>
   );
 };
@@ -263,18 +269,25 @@ export const StaticView: Story = {
 /**
  * Event panel component showing test execution narrative with file/line information.
  *
- * Shows how events accumulate context as tests execute, with automatic file/line
- * capture from stack traces and manual override for code under test.
+ * 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: () => (
-    <div style={{ width: '600px', height: '100vh' }}>
-      <TestEventPanel
-        spans={testSpans as any}
-        currentSpanIndex={0}
-        currentEventIndex={999} // Show all events
-        highlightedPhase={undefined}
-      />
-    </div>
-  ),
+  render: () => {
+    const testData = testSpans as any;
+    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>
+    );
+  },
 };