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

package/src/components/TestEventPanel.tsx

@@ -1,4 +1,6 @@
-import React from 'react';
+import React, { useState, useMemo } from 'react';
+import { useTheme } from '@principal-ade/industry-theme';
+import { HelpCircle } from 'lucide-react';
 
 interface SpanEvent {
   time: number;
@@ -18,106 +20,298 @@ 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
       style={{
         width: '100%',
         height: '100%',
-        backgroundColor: '#1a1a1a',
-        color: '#ffffff',
+        backgroundColor: theme.colors.background,
+        color: theme.colors.text,
         padding: '20px',
-        fontFamily: 'monospace',
-        fontSize: '12px',
+        fontFamily: theme.fonts.monospace,
+        fontSize: '14px',
         overflow: 'auto',
+        boxSizing: 'border-box',
       }}
     >
-      <div style={{ fontWeight: 'bold', marginBottom: '15px', fontSize: '14px' }}>
-        📊 Wide Event Pattern - Code Journey
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '15px' }}>
+        <div style={{ fontWeight: 'bold', fontSize: '18px' }}>
+          Execution Timeline
+        </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 style={{ fontSize: '10px', color: '#888', marginBottom: '15px' }}>
-        Test: {currentSpan?.name || 'Loading...'}
-        <br />
-        Events: {eventsUpToNow.length} / {currentSpan?.events.length || 0}
+
+      {/* 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: '10px', color: '#a3a3a3', marginBottom: '20px', lineHeight: '1.5' }}>
-        Watch how execution flows through files:
-        <br />
-        <span style={{ color: '#60a5fa' }}>Blue = Test file</span>
-        {' • '}
-        <span style={{ color: '#4ade80' }}>Green → Code under test</span>
+
+      <div style={{ fontSize: '13px', color: theme.colors.textMuted, marginBottom: '15px' }}>
+        Test: {currentSpan?.name || 'Loading...'}
       </div>
 
-      {currentSpan && (
-        <>
-          {/* Span Attributes (static context) */}
-          <div style={{ marginBottom: '20px' }}>
-            <div
-              style={{
-                color: '#60a5fa',
-                fontWeight: 'bold',
-                marginBottom: '8px',
-                fontSize: '11px',
-              }}
-            >
-              Span Context (Static)
+      {/* 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>
+              <p style={{ marginBottom: '12px' }}>
+                <strong>Use filter tabs to focus:</strong>
+              </p>
+              <ul style={{ marginLeft: '20px' }}>
+                <li>All - Interleaved timeline</li>
+                <li>Events - Span events only</li>
+                <li>Logs - OTEL logs only</li>
+              </ul>
             </div>
-            <pre
+            <button
+              onClick={() => setShowHelp(false)}
               style={{
-                background: '#0d0d0d',
-                padding: '10px',
+                padding: '8px 16px',
+                backgroundColor: theme.colors.primary,
+                color: '#ffffff',
+                border: 'none',
                 borderRadius: '4px',
-                margin: 0,
-                fontSize: '10px',
-                lineHeight: '1.5',
+                cursor: 'pointer',
+                fontSize: '14px',
+                fontWeight: 500,
               }}
             >
-              {JSON.stringify(
-                {
-                  'test.file': currentSpan.attributes['test.file'],
-                  'test.suite': currentSpan.attributes['test.suite'],
-                  'test.result': currentSpan.attributes['test.result'],
-                },
-                null,
-                2
-              )}
-            </pre>
+              Got it
+            </button>
           </div>
+        </div>
+      )}
 
-          {/* Event Timeline (context mutations) */}
-          <div>
-            <div
-              style={{
-                color: '#4ade80',
-                fontWeight: 'bold',
-                marginBottom: '8px',
-                fontSize: '11px',
-              }}
-            >
-              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;
+      {/* Timeline Items */}
+      {currentSpan && (
+        <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 (
@@ -126,12 +320,14 @@ export const TestEventPanel: React.FC<TestEventPanelProps> = ({
                   style={{
                     marginBottom: '12px',
                     paddingBottom: '12px',
-                    borderBottom: idx < eventsUpToNow.length - 1 ? '1px solid #333' : '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 ? '#1e293b' : 'transparent',
-                    padding: isHighlighted ? '8px' : '0',
+                    backgroundColor: isHighlighted ? theme.colors.surface : 'transparent',
+                    padding: isHighlighted ? '8px 8px 8px 12px' : '0 0 12px 12px',
                     borderRadius: '4px',
                   }}
                 >
@@ -141,20 +337,26 @@ export const TestEventPanel: React.FC<TestEventPanelProps> = ({
                       justifyContent: 'space-between',
                       alignItems: 'center',
                       marginBottom: '4px',
+                      gap: '8px',
                     }}
                   >
-                    <div style={{ color: '#f59e0b', fontSize: '10px' }}>
-                      {idx + 1}. {event.name}
+                    <div style={{ color: '#f59e0b', fontSize: '13px', fontWeight: 'bold', flexShrink: 0 }}>
+                      EVENT: {item.name}
                     </div>
                     {filepath && (
                       <div
                         style={{
-                          fontSize: '9px',
+                          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 && '→ '}
@@ -164,17 +366,19 @@ export const TestEventPanel: React.FC<TestEventPanelProps> = ({
                   </div>
                   <pre
                     style={{
-                      background: '#0d0d0d',
+                      background: theme.colors.surface,
                       padding: '8px',
                       borderRadius: '4px',
                       margin: 0,
-                      fontSize: '9px',
+                      fontSize: '12px',
                       lineHeight: '1.4',
+                      overflow: 'auto',
+                      maxWidth: '100%',
                     }}
                   >
                     {JSON.stringify(
                       Object.fromEntries(
-                        Object.entries(event.attributes).filter(
+                        Object.entries(item.attributes || {}).filter(
                           ([key]) => key !== 'code.filepath' && key !== 'code.lineno'
                         )
                       ),
@@ -184,25 +388,112 @@ 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
         style={{
           marginTop: '20px',
           paddingTop: '15px',
-          borderTop: '1px solid #333',
-          fontSize: '10px',
-          color: '#888',
+          borderTop: `1px solid ${theme.colors.border}`,
+          fontSize: '13px',
+          color: theme.colors.textMuted,
         }}
       >
         <div style={{ marginBottom: '8px' }}>
           <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/nodes/CustomNode.tsx

@@ -7,12 +7,12 @@ import { NodeTooltip } from '../components/NodeTooltip';
 import type { OtelInfo } from '../components/NodeTooltip';
 
 /**
- * Converts a hex color to a soft/lighter version with transparency
+ * Converts a hex color to a lighter/tinted version (opaque, not transparent)
  * @param hexColor - Hex color string (e.g., "#FF5733" or "#888")
- * @param alpha - Transparency level (0-1), defaults to 0.12 for subtle backgrounds
- * @returns rgba color string
+ * @param lightness - How much to lighten (0-1), defaults to 0.88 (88% white mixed in)
+ * @returns hex color string
  */
-function hexToSoftColor(hexColor: string, alpha = 0.12): string {
+function hexToLightColor(hexColor: string, lightness = 0.88): string {
   // Remove # if present
   const hex = hexColor.replace('#', '');
 
@@ -21,7 +21,15 @@ function hexToSoftColor(hexColor: string, alpha = 0.12): string {
   const g = parseInt(hex.substring(2, 4), 16);
   const b = parseInt(hex.substring(4, 6), 16);
 
-  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+  // Mix with white based on lightness factor
+  // lightness of 0.88 means 88% white + 12% original color
+  const newR = Math.round(r + (255 - r) * lightness);
+  const newG = Math.round(g + (255 - g) * lightness);
+  const newB = Math.round(b + (255 - b) * lightness);
+
+  // Convert back to hex
+  const toHex = (n: number) => n.toString(16).padStart(2, '0');
+  return `#${toHex(newR)}${toHex(newG)}${toHex(newB)}`;
 }
 
 export interface CustomNodeData extends Record<string, unknown> {
@@ -176,7 +184,7 @@ export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected, dragging
   const getShapeStyles = () => {
     const baseStyles = {
       padding: '12px 16px',
-      backgroundColor: isGroup ? 'rgba(255, 255, 255, 0.7)' : hexToSoftColor(fillColor),
+      backgroundColor: isGroup ? 'rgba(255, 255, 255, 0.7)' : hexToLightColor(fillColor),
       color: '#000',
       border: `2px solid ${hasViolations ? '#D0021B' : strokeColor}`,
       fontSize: '12px',
@@ -278,7 +286,7 @@ export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected, dragging
       }
     : {};
 
-  // Hexagon inner fill styles (soft color background inset from border)
+  // Hexagon inner fill styles (light color background inset from border)
   const hexagonInnerStyle: React.CSSProperties = isHexagon
     ? {
         position: 'absolute',
@@ -287,7 +295,7 @@ export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected, dragging
         right: hexagonBorderWidth,
         bottom: hexagonBorderWidth,
         clipPath: hexagonClipPath,
-        backgroundColor: hexToSoftColor(fillColor),
+        backgroundColor: hexToLightColor(fillColor),
         color: '#000',
         display: 'flex',
         flexDirection: 'column',
@@ -320,7 +328,7 @@ export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected, dragging
       }
     : {};
 
-  // Diamond inner fill styles (soft color background inset from border)
+  // Diamond inner fill styles (light color background inset from border)
   const diamondInnerStyle: React.CSSProperties = isDiamond
     ? {
         position: 'absolute',
@@ -329,7 +337,7 @@ export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected, dragging
         right: diamondBorderWidth,
         bottom: diamondBorderWidth,
         clipPath: diamondClipPath,
-        backgroundColor: hexToSoftColor(fillColor),
+        backgroundColor: hexToLightColor(fillColor),
         color: '#000',
         display: 'flex',
         flexDirection: 'column',

package/src/stories/MultiConfig.stories.tsx

@@ -411,7 +411,7 @@ function MultiConfigDemo() {
 
       {/* Graph visualization */}
       <div style={{ flex: 1 }}>
-        <GraphRenderer canvas={selectedConfig.canvas} showMinimap showControls showBackground />
+        <GraphRenderer canvas={selectedConfig.canvas} showControls showBackground />
       </div>
     </div>
   );

package/src/stories/MultiDirectionalConnections.stories.tsx

@@ -310,7 +310,6 @@ export const Default: Story = {
     canvas: multiDirectionalCanvas,
     width: '100%',
     height: '800px',
-    showMinimap: true,
     showControls: true,
     showBackground: true,
   },