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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/components/TestEventPanel.d.ts +1 -0
  2. package/dist/components/TestEventPanel.d.ts.map +1 -1
  3. package/dist/components/TestEventPanel.js +171 -140
  4. package/dist/components/TestEventPanel.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/components/TestEventPanel.tsx +159 -100
  7. package/src/stories/RealTestExecution.stories.tsx +2 -1
package/dist/components/TestEventPanel.d.ts CHANGED
@@ -31,6 +31,7 @@ export interface TestEventPanelProps {
31
31
  currentSpanIndex: number;
32
32
  currentEventIndex: number;
33
33
  highlightedPhase?: string;
34
+ onSpanIndexChange?: (index: number) => void;
34
35
  }
35
36
  export declare const TestEventPanel: React.FC<TestEventPanelProps>;
36
37
  export {};
package/dist/components/TestEventPanel.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TestEventPanel.d.ts","sourceRoot":"","sources":["../../src/components/TestEventPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAIjD,UAAU,SAAS;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;CACvD;AAED,UAAU,QAAQ;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;IACtD,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,MAAM,EAAE,IAAI,GAAG,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAGD,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;AAEnF,MAAM,WAAW,OAAO;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,YAAY,CAAC;IACvB,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACvC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAeD,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC;IACjB,gBAAgB,EAAE,MAAM,CAAC;IACzB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AA2BD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAuaxD,CAAC"}
1
+ {"version":3,"file":"TestEventPanel.d.ts","sourceRoot":"","sources":["../../src/components/TestEventPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAIjD,UAAU,SAAS;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;CACvD;AAED,UAAU,QAAQ;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;IACtD,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,MAAM,EAAE,IAAI,GAAG,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAGD,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;AAEnF,MAAM,WAAW,OAAO;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,YAAY,CAAC;IACvB,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACvC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAeD,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC;IACjB,gBAAgB,EAAE,MAAM,CAAC;IACzB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AA2BD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAiexD,CAAC"}
package/dist/components/TestEventPanel.js CHANGED
@@ -28,11 +28,21 @@ function getSeverityIcon(severity) {
28
28
  };
29
29
  return icons[severity] || '•';
30
30
  }
31
- const TestEventPanel = ({ spans, logs = [], currentSpanIndex, currentEventIndex, highlightedPhase, }) => {
31
+ const TestEventPanel = ({ spans, logs = [], currentSpanIndex, currentEventIndex, highlightedPhase, onSpanIndexChange, }) => {
32
32
  const { theme } = (0, industry_theme_1.useTheme)();
33
33
  const [showHelp, setShowHelp] = (0, react_1.useState)(false);
34
34
  const [viewMode, setViewMode] = (0, react_1.useState)('all');
35
35
  const currentSpan = spans[currentSpanIndex];
36
+ const handlePrevTest = () => {
37
+ if (currentSpanIndex > 0 && onSpanIndexChange) {
38
+ onSpanIndexChange(currentSpanIndex - 1);
39
+ }
40
+ };
41
+ const handleNextTest = () => {
42
+ if (currentSpanIndex < spans.length - 1 && onSpanIndexChange) {
43
+ onSpanIndexChange(currentSpanIndex + 1);
44
+ }
45
+ };
36
46
  // Build interleaved timeline
37
47
  const timeline = (0, react_1.useMemo)(() => {
38
48
  if (!currentSpan)
@@ -72,51 +82,74 @@ const TestEventPanel = ({ spans, logs = [], currentSpanIndex, currentEventIndex,
72
82
  height: '100%',
73
83
  backgroundColor: theme.colors.background,
74
84
  color: theme.colors.text,
75
- padding: '20px',
76
85
  fontFamily: theme.fonts.monospace,
77
86
  fontSize: '14px',
78
- overflow: 'auto',
79
87
  boxSizing: 'border-box',
80
- }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '15px' }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontWeight: 'bold', fontSize: '18px' }, children: "Execution Timeline" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setShowHelp(true), style: {
81
- background: 'transparent',
82
- border: 'none',
83
- cursor: 'pointer',
84
- padding: '4px',
85
- display: 'flex',
86
- alignItems: 'center',
87
- color: theme.colors.textMuted,
88
- }, onMouseEnter: (e) => {
89
- e.currentTarget.style.color = theme.colors.text;
90
- }, onMouseLeave: (e) => {
91
- e.currentTarget.style.color = theme.colors.textMuted;
92
- }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.HelpCircle, { size: 20 }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '8px', marginBottom: '12px' }, children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => setViewMode('all'), style: {
93
- padding: '6px 12px',
94
- background: viewMode === 'all' ? theme.colors.primary : 'transparent',
95
- border: `1px solid ${theme.colors.border}`,
96
- borderRadius: '4px',
97
- color: viewMode === 'all' ? '#ffffff' : theme.colors.text,
98
- cursor: 'pointer',
99
- fontSize: '12px',
100
- fontWeight: 500,
101
- }, children: ["All (", timeline.length, ")"] }), (0, jsx_runtime_1.jsxs)("button", { onClick: () => setViewMode('events'), style: {
102
- padding: '6px 12px',
103
- background: viewMode === 'events' ? theme.colors.primary : 'transparent',
104
- border: `1px solid ${theme.colors.border}`,
105
- borderRadius: '4px',
106
- color: viewMode === 'events' ? '#ffffff' : theme.colors.text,
107
- cursor: 'pointer',
108
- fontSize: '12px',
109
- fontWeight: 500,
110
- }, children: ["Events (", eventCount, ")"] }), (0, jsx_runtime_1.jsxs)("button", { onClick: () => setViewMode('logs'), style: {
111
- padding: '6px 12px',
112
- background: viewMode === 'logs' ? theme.colors.primary : 'transparent',
113
- border: `1px solid ${theme.colors.border}`,
114
- borderRadius: '4px',
115
- color: viewMode === 'logs' ? '#ffffff' : theme.colors.text,
116
- cursor: 'pointer',
117
- fontSize: '12px',
118
- fontWeight: 500,
119
- }, children: ["Logs (", logCount, ")"] })] }), (0, jsx_runtime_1.jsxs)("div", { style: { fontSize: '13px', color: theme.colors.textMuted, marginBottom: '15px' }, children: ["Test: ", currentSpan?.name || 'Loading...'] }), showHelp && ((0, jsx_runtime_1.jsx)("div", { style: {
88
+ display: 'flex',
89
+ flexDirection: 'column',
90
+ }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
91
+ padding: '20px 20px 0 20px',
92
+ backgroundColor: theme.colors.background,
93
+ borderBottom: `1px solid ${theme.colors.border}`,
94
+ flexShrink: 0,
95
+ }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '12px' }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontWeight: 'bold', fontSize: '18px' }, children: "Execution Timeline" }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: '12px' }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: '13px', color: theme.colors.textMuted }, children: (0, jsx_runtime_1.jsx)("span", { style: { color: '#4ade80' }, children: "All Passed \u2713" }) }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setShowHelp(true), style: {
96
+ background: 'transparent',
97
+ border: 'none',
98
+ cursor: 'pointer',
99
+ padding: '4px',
100
+ display: 'flex',
101
+ alignItems: 'center',
102
+ color: theme.colors.textMuted,
103
+ }, onMouseEnter: (e) => {
104
+ e.currentTarget.style.color = theme.colors.text;
105
+ }, onMouseLeave: (e) => {
106
+ e.currentTarget.style.color = theme.colors.textMuted;
107
+ }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.HelpCircle, { size: 20 }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '12px' }, children: [(0, jsx_runtime_1.jsx)("button", { onClick: handlePrevTest, disabled: currentSpanIndex === 0, style: {
108
+ padding: '4px 12px',
109
+ background: theme.colors.surface,
110
+ border: `1px solid ${theme.colors.border}`,
111
+ borderRadius: '4px',
112
+ color: currentSpanIndex === 0 ? theme.colors.textMuted : theme.colors.text,
113
+ cursor: currentSpanIndex === 0 ? 'not-allowed' : 'pointer',
114
+ fontSize: '14px',
115
+ opacity: currentSpanIndex === 0 ? 0.5 : 1,
116
+ }, children: "\u2190 Prev" }), (0, jsx_runtime_1.jsxs)("div", { style: { fontSize: '13px', color: theme.colors.textMuted }, children: ["Test ", currentSpanIndex + 1, " of ", spans.length] }), (0, jsx_runtime_1.jsx)("button", { onClick: handleNextTest, disabled: currentSpanIndex === spans.length - 1, style: {
117
+ padding: '4px 12px',
118
+ background: theme.colors.surface,
119
+ border: `1px solid ${theme.colors.border}`,
120
+ borderRadius: '4px',
121
+ color: currentSpanIndex === spans.length - 1 ? theme.colors.textMuted : theme.colors.text,
122
+ cursor: currentSpanIndex === spans.length - 1 ? 'not-allowed' : 'pointer',
123
+ fontSize: '14px',
124
+ opacity: currentSpanIndex === spans.length - 1 ? 0.5 : 1,
125
+ }, children: "Next \u2192" }), (0, jsx_runtime_1.jsxs)("div", { style: { fontSize: '12px', color: theme.colors.textMuted, marginLeft: 'auto' }, children: [eventCount, " events, ", logCount, " logs"] })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '8px', marginBottom: '12px' }, children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => setViewMode('all'), style: {
126
+ padding: '6px 12px',
127
+ background: viewMode === 'all' ? theme.colors.primary : 'transparent',
128
+ border: `1px solid ${theme.colors.border}`,
129
+ borderRadius: '4px',
130
+ color: viewMode === 'all' ? '#ffffff' : theme.colors.text,
131
+ cursor: 'pointer',
132
+ fontSize: '12px',
133
+ fontWeight: 500,
134
+ }, children: ["All (", timeline.length, ")"] }), (0, jsx_runtime_1.jsxs)("button", { onClick: () => setViewMode('events'), style: {
135
+ padding: '6px 12px',
136
+ background: viewMode === 'events' ? theme.colors.primary : 'transparent',
137
+ border: `1px solid ${theme.colors.border}`,
138
+ borderRadius: '4px',
139
+ color: viewMode === 'events' ? '#ffffff' : theme.colors.text,
140
+ cursor: 'pointer',
141
+ fontSize: '12px',
142
+ fontWeight: 500,
143
+ }, children: ["Events (", eventCount, ")"] }), (0, jsx_runtime_1.jsxs)("button", { onClick: () => setViewMode('logs'), style: {
144
+ padding: '6px 12px',
145
+ background: viewMode === 'logs' ? theme.colors.primary : 'transparent',
146
+ border: `1px solid ${theme.colors.border}`,
147
+ borderRadius: '4px',
148
+ color: viewMode === 'logs' ? '#ffffff' : theme.colors.text,
149
+ cursor: 'pointer',
150
+ fontSize: '12px',
151
+ fontWeight: 500,
152
+ }, children: ["Logs (", logCount, ")"] })] }), (0, jsx_runtime_1.jsxs)("div", { style: { fontSize: '13px', color: theme.colors.textMuted, marginBottom: '15px' }, children: ["Test: ", currentSpan?.name || 'Loading...'] })] }), showHelp && ((0, jsx_runtime_1.jsx)("div", { style: {
120
153
  position: 'fixed',
121
154
  top: 0,
122
155
  left: 0,
@@ -143,103 +176,101 @@ const TestEventPanel = ({ spans, logs = [], currentSpanIndex, currentEventIndex,
143
176
  cursor: 'pointer',
144
177
  fontSize: '14px',
145
178
  fontWeight: 500,
146
- }, children: "Got it" })] }) })), currentSpan && ((0, jsx_runtime_1.jsx)("div", { children: filteredTimeline.map((item, idx) => {
147
- if (item.type === 'event') {
148
- // SPAN EVENT RENDERING
149
- const filepath = item.attributes?.['code.filepath'];
150
- const lineno = item.attributes?.['code.lineno'];
151
- const isCodeUnderTest = filepath && filepath !== 'GraphConverter.test.ts';
152
- // Determine which phase this event belongs to
153
- const eventPhase = item.name?.split('.')[0]; // 'setup', 'execution', 'assertion'
154
- const isHighlighted = highlightedPhase === eventPhase;
155
- return ((0, jsx_runtime_1.jsxs)("div", { style: {
156
- marginBottom: '12px',
157
- paddingBottom: '12px',
158
- paddingLeft: '12px',
159
- borderBottom: idx < filteredTimeline.length - 1 ? `1px solid ${theme.colors.border}` : 'none',
160
- borderLeft: '3px solid #f59e0b',
161
- opacity: highlightedPhase && !isHighlighted ? 0.4 : 1,
162
- transition: 'opacity 0.2s ease',
163
- transform: isHighlighted ? 'scale(1.02)' : 'scale(1)',
164
- backgroundColor: isHighlighted ? theme.colors.surface : 'transparent',
165
- padding: isHighlighted ? '8px 8px 8px 12px' : '0 0 12px 12px',
166
- borderRadius: '4px',
167
- }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
168
- display: 'flex',
169
- justifyContent: 'space-between',
170
- alignItems: 'center',
171
- marginBottom: '4px',
172
- gap: '8px',
173
- }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { color: '#f59e0b', fontSize: '13px', fontWeight: 'bold', flexShrink: 0 }, children: ["EVENT: ", item.name] }), filepath && ((0, jsx_runtime_1.jsxs)("div", { style: {
174
- fontSize: '12px',
175
- color: isCodeUnderTest ? '#4ade80' : '#60a5fa',
176
- fontFamily: 'monospace',
177
- background: isCodeUnderTest ? '#064e3b' : '#1e3a8a',
178
- padding: '2px 6px',
179
- borderRadius: '3px',
180
- flexShrink: 1,
181
- minWidth: 0,
182
- overflow: 'hidden',
183
- textOverflow: 'ellipsis',
184
- whiteSpace: 'nowrap',
185
- }, children: [isCodeUnderTest && '→ ', filepath, ":", lineno] }))] }), (0, jsx_runtime_1.jsx)("pre", { style: {
186
- background: theme.colors.surface,
187
- padding: '8px',
188
- borderRadius: '4px',
189
- margin: 0,
190
- fontSize: '12px',
191
- lineHeight: '1.4',
192
- overflow: 'auto',
193
- maxWidth: '100%',
194
- }, children: JSON.stringify(Object.fromEntries(Object.entries(item.attributes || {}).filter(([key]) => key !== 'code.filepath' && key !== 'code.lineno')), null, 2) })] }, idx));
195
- }
196
- else {
197
- // OTEL LOG RENDERING
198
- const serviceName = item.resource?.['service.name'];
199
- const severityColor = getSeverityColor(item.severity);
200
- return ((0, jsx_runtime_1.jsxs)("div", { style: {
201
- marginBottom: '12px',
202
- paddingBottom: '12px',
203
- paddingLeft: '12px',
204
- borderBottom: idx < filteredTimeline.length - 1 ? `1px solid ${theme.colors.border}` : 'none',
205
- borderLeft: `3px solid ${severityColor}`,
206
- }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
207
- display: 'flex',
208
- justifyContent: 'space-between',
209
- alignItems: 'center',
210
- marginBottom: '4px',
211
- }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '8px', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)("span", { style: { fontSize: '16px' }, children: getSeverityIcon(item.severity) }), (0, jsx_runtime_1.jsxs)("span", { style: {
212
- color: severityColor,
213
- fontSize: '13px',
214
- fontWeight: 'bold',
215
- }, children: ["LOG: ", item.severity] })] }), serviceName && ((0, jsx_runtime_1.jsx)("div", { style: {
216
- fontSize: '12px',
217
- color: '#9ca3af',
218
- background: '#1e293b',
219
- padding: '2px 6px',
220
- borderRadius: '3px',
221
- }, children: serviceName }))] }), (0, jsx_runtime_1.jsx)("div", { style: {
222
- background: theme.colors.surface,
223
- padding: '8px',
224
- borderRadius: '4px',
225
- marginBottom: item.attributes && Object.keys(item.attributes).length > 0 ? '8px' : '0',
226
- fontSize: '13px',
227
- }, children: typeof item.body === 'string' ? (item.body) : ((0, jsx_runtime_1.jsx)("pre", { style: { margin: 0, fontSize: '12px' }, children: JSON.stringify(item.body, null, 2) })) }), item.attributes && Object.keys(item.attributes).length > 0 && ((0, jsx_runtime_1.jsx)("pre", { style: {
228
- background: theme.colors.surface,
229
- padding: '8px',
230
- borderRadius: '4px',
231
- margin: 0,
232
- fontSize: '11px',
233
- opacity: 0.8,
234
- }, children: JSON.stringify(item.attributes, null, 2) }))] }, idx));
235
- }
236
- }) })), (0, jsx_runtime_1.jsxs)("div", { style: {
237
- marginTop: '20px',
238
- paddingTop: '15px',
239
- borderTop: `1px solid ${theme.colors.border}`,
240
- fontSize: '13px',
241
- color: theme.colors.textMuted,
242
- }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: '8px' }, children: [(0, jsx_runtime_1.jsx)("strong", { children: "Total tests:" }), " ", spans.length] }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: '8px' }, children: [(0, jsx_runtime_1.jsx)("strong", { children: "Timeline:" }), " ", eventCount, " events, ", logCount, " logs"] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Status:" }), ' ', (0, jsx_runtime_1.jsx)("span", { style: { color: '#4ade80' }, children: "All Passed \u2713" })] })] })] }));
179
+ }, children: "Got it" })] }) })), (0, jsx_runtime_1.jsx)("div", { style: {
180
+ flex: 1,
181
+ overflow: 'auto',
182
+ padding: '20px',
183
+ }, children: currentSpan && ((0, jsx_runtime_1.jsx)("div", { children: filteredTimeline.map((item, idx) => {
184
+ if (item.type === 'event') {
185
+ // SPAN EVENT RENDERING
186
+ const filepath = item.attributes?.['code.filepath'];
187
+ const lineno = item.attributes?.['code.lineno'];
188
+ const isCodeUnderTest = filepath && filepath !== 'GraphConverter.test.ts';
189
+ // Determine which phase this event belongs to
190
+ const eventPhase = item.name?.split('.')[0]; // 'setup', 'execution', 'assertion'
191
+ const isHighlighted = highlightedPhase === eventPhase;
192
+ return ((0, jsx_runtime_1.jsxs)("div", { style: {
193
+ marginBottom: '12px',
194
+ paddingBottom: '12px',
195
+ paddingLeft: '12px',
196
+ borderBottom: idx < filteredTimeline.length - 1 ? `1px solid ${theme.colors.border}` : 'none',
197
+ borderLeft: '3px solid #f59e0b',
198
+ opacity: highlightedPhase && !isHighlighted ? 0.4 : 1,
199
+ transition: 'opacity 0.2s ease',
200
+ transform: isHighlighted ? 'scale(1.02)' : 'scale(1)',
201
+ backgroundColor: isHighlighted ? theme.colors.surface : 'transparent',
202
+ padding: isHighlighted ? '8px 8px 8px 12px' : '0 0 12px 12px',
203
+ borderRadius: '4px',
204
+ }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
205
+ display: 'flex',
206
+ justifyContent: 'space-between',
207
+ alignItems: 'center',
208
+ marginBottom: '4px',
209
+ gap: '8px',
210
+ }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { color: '#f59e0b', fontSize: '13px', fontWeight: 'bold', flexShrink: 0 }, children: ["EVENT: ", item.name] }), filepath && ((0, jsx_runtime_1.jsxs)("div", { style: {
211
+ fontSize: '12px',
212
+ color: isCodeUnderTest ? '#4ade80' : '#60a5fa',
213
+ fontFamily: 'monospace',
214
+ background: isCodeUnderTest ? '#064e3b' : '#1e3a8a',
215
+ padding: '2px 6px',
216
+ borderRadius: '3px',
217
+ flexShrink: 1,
218
+ minWidth: 0,
219
+ overflow: 'hidden',
220
+ textOverflow: 'ellipsis',
221
+ whiteSpace: 'nowrap',
222
+ }, children: [isCodeUnderTest && '→ ', filepath, ":", lineno] }))] }), (0, jsx_runtime_1.jsx)("pre", { style: {
223
+ background: theme.colors.surface,
224
+ padding: '8px',
225
+ borderRadius: '4px',
226
+ margin: 0,
227
+ fontSize: '12px',
228
+ lineHeight: '1.4',
229
+ overflow: 'auto',
230
+ maxWidth: '100%',
231
+ }, children: JSON.stringify(Object.fromEntries(Object.entries(item.attributes || {}).filter(([key]) => key !== 'code.filepath' && key !== 'code.lineno')), null, 2) })] }, idx));
232
+ }
233
+ else {
234
+ // OTEL LOG RENDERING
235
+ const serviceName = item.resource?.['service.name'];
236
+ const severityColor = getSeverityColor(item.severity);
237
+ return ((0, jsx_runtime_1.jsxs)("div", { style: {
238
+ marginBottom: '12px',
239
+ paddingBottom: '12px',
240
+ paddingLeft: '12px',
241
+ borderBottom: idx < filteredTimeline.length - 1 ? `1px solid ${theme.colors.border}` : 'none',
242
+ borderLeft: `3px solid ${severityColor}`,
243
+ }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
244
+ display: 'flex',
245
+ justifyContent: 'space-between',
246
+ alignItems: 'center',
247
+ marginBottom: '4px',
248
+ }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '8px', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)("span", { style: { fontSize: '16px' }, children: getSeverityIcon(item.severity) }), (0, jsx_runtime_1.jsxs)("span", { style: {
249
+ color: severityColor,
250
+ fontSize: '13px',
251
+ fontWeight: 'bold',
252
+ }, children: ["LOG: ", item.severity] })] }), serviceName && ((0, jsx_runtime_1.jsx)("div", { style: {
253
+ fontSize: '12px',
254
+ color: '#9ca3af',
255
+ background: '#1e293b',
256
+ padding: '2px 6px',
257
+ borderRadius: '3px',
258
+ }, children: serviceName }))] }), (0, jsx_runtime_1.jsx)("div", { style: {
259
+ background: theme.colors.surface,
260
+ padding: '8px',
261
+ borderRadius: '4px',
262
+ marginBottom: item.attributes && Object.keys(item.attributes).length > 0 ? '8px' : '0',
263
+ fontSize: '13px',
264
+ }, children: typeof item.body === 'string' ? (item.body) : ((0, jsx_runtime_1.jsx)("pre", { style: { margin: 0, fontSize: '12px' }, children: JSON.stringify(item.body, null, 2) })) }), item.attributes && Object.keys(item.attributes).length > 0 && ((0, jsx_runtime_1.jsx)("pre", { style: {
265
+ background: theme.colors.surface,
266
+ padding: '8px',
267
+ borderRadius: '4px',
268
+ margin: 0,
269
+ fontSize: '11px',
270
+ opacity: 0.8,
271
+ }, children: JSON.stringify(item.attributes, null, 2) }))] }, idx));
272
+ }
273
+ }) })) })] }));
243
274
  };
244
275
  exports.TestEventPanel = TestEventPanel;
245
276
  //# sourceMappingURL=TestEventPanel.js.map
package/dist/components/TestEventPanel.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TestEventPanel.js","sourceRoot":"","sources":["../../src/components/TestEventPanel.tsx"],"names":[],"mappings":";;;;AAAA,iCAAiD;AACjD,kEAAyD;AACzD,+CAA0C;AAsD1C,oCAAoC;AACpC,SAAS,gBAAgB,CAAC,QAAsB;IAC9C,MAAM,MAAM,GAAG;QACb,KAAK,EAAE,SAAS;QAChB,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,SAAS;QAChB,KAAK,EAAE,SAAS;KACjB,CAAC;IACF,OAAO,MAAM,CAAC,QAAQ,CAAC,IAAI,SAAS,CAAC;AACvC,CAAC;AAED,SAAS,eAAe,CAAC,QAAsB;IAC7C,MAAM,KAAK,GAAG;QACZ,KAAK,EAAE,GAAG;QACV,KAAK,EAAE,GAAG;QACV,IAAI,EAAE,GAAG;QACT,IAAI,EAAE,GAAG;QACT,KAAK,EAAE,GAAG;QACV,KAAK,EAAE,GAAG;KACX,CAAC;IACF,OAAO,KAAK,CAAC,QAAQ,CAAC,IAAI,GAAG,CAAC;AAChC,CAAC;AAEM,MAAM,cAAc,GAAkC,CAAC,EAC5D,KAAK,EACL,IAAI,GAAG,EAAE,EACT,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,GACjB,EAAE,EAAE;IACH,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,yBAAQ,GAAE,CAAC;IAC7B,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAChD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAA4B,KAAK,CAAC,CAAC;IAE3E,MAAM,WAAW,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC;IAE5C,6BAA6B;IAC7B,MAAM,QAAQ,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAC5B,IAAI,CAAC,WAAW;YAAE,OAAO,EAAE,CAAC;QAE5B,MAAM,KAAK,GAAmB;YAC5B,cAAc;YACd,GAAG,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,iBAAiB,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;gBACpE,IAAI,EAAE,OAAgB;gBACtB,IAAI,EAAE,KAAK,CAAC,IAAI;gBAChB,IAAI,EAAE,KAAK,CAAC,IAAI;gBAChB,UAAU,EAAE,KAAK,CAAC,UAAU;aAC7B,CAAC,CAAC;YAEH,oDAAoD;YACpD,GAAG,IAAI;iBACJ,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,OAAO,KAAK,WAAW,CAAC,EAAE,CAAC;iBAC/C,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;gBACb,IAAI,EAAE,KAAc;gBACpB,IAAI,EAAE,OAAO,GAAG,CAAC,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,OAAO,EAAE;gBAC3F,QAAQ,EAAE,GAAG,CAAC,QAAQ;gBACtB,IAAI,EAAE,GAAG,CAAC,IAAI;gBACd,QAAQ,EAAE,GAAG,CAAC,QAAQ;gBACtB,UAAU,EAAE,GAAG,CAAC,UAAU;aAC3B,CAAC,CAAC;SACN,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC;QAElC,OAAO,KAAK,CAAC;IACf,CAAC,EAAE,CAAC,WAAW,EAAE,iBAAiB,EAAE,IAAI,CAAC,CAAC,CAAC;IAE3C,qCAAqC;IACrC,MAAM,gBAAgB,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACpC,IAAI,QAAQ,KAAK,KAAK;YAAE,OAAO,QAAQ,CAAC;QACxC,OAAO,QAAQ,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,uCAAuC;IAChH,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEzB,MAAM,UAAU,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,MAAM,CAAC;IACrE,MAAM,QAAQ,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,KAAK,CAAC,CAAC,MAAM,CAAC;IAEjE,OAAO,CACL,iCACE,KAAK,EAAE;YACL,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;YACd,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU;YACxC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI;YACxB,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,SAAS;YACjC,QAAQ,EAAE,MAAM;YAChB,QAAQ,EAAE,MAAM;YAChB,SAAS,EAAE,YAAY;SACxB,aAED,iCAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,EAAE,aAC1G,gCAAK,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,mCAE9C,EACN,mCACE,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,EAChC,KAAK,EAAE;4BACL,UAAU,EAAE,aAAa;4BACzB,MAAM,EAAE,MAAM;4BACd,MAAM,EAAE,SAAS;4BACjB,OAAO,EAAE,KAAK;4BACd,OAAO,EAAE,MAAM;4BACf,UAAU,EAAE,QAAQ;4BACpB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS;yBAC9B,EACD,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE;4BAClB,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC;wBAClD,CAAC,EACD,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE;4BAClB,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC;wBACvD,CAAC,YAED,uBAAC,yBAAU,IAAC,IAAI,EAAE,EAAE,GAAI,GACjB,IACL,EAGN,iCAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,aAC/D,oCACE,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,EACjC,KAAK,EAAE;4BACL,OAAO,EAAE,UAAU;4BACnB,UAAU,EAAE,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa;4BACrE,MAAM,EAAE,aAAa,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE;4BAC1C,YAAY,EAAE,KAAK;4BACnB,KAAK,EAAE,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI;4BACzD,MAAM,EAAE,SAAS;4BACjB,QAAQ,EAAE,MAAM;4BAChB,UAAU,EAAE,GAAG;yBAChB,sBAEK,QAAQ,CAAC,MAAM,SACd,EACT,oCACE,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,QAAQ,CAAC,EACpC,KAAK,EAAE;4BACL,OAAO,EAAE,UAAU;4BACnB,UAAU,EAAE,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa;4BACxE,MAAM,EAAE,aAAa,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE;4BAC1C,YAAY,EAAE,KAAK;4BACnB,KAAK,EAAE,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI;4BAC5D,MAAM,EAAE,SAAS;4BACjB,QAAQ,EAAE,MAAM;4BAChB,UAAU,EAAE,GAAG;yBAChB,yBAEQ,UAAU,SACZ,EACT,oCACE,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,MAAM,CAAC,EAClC,KAAK,EAAE;4BACL,OAAO,EAAE,UAAU;4BACnB,UAAU,EAAE,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa;4BACtE,MAAM,EAAE,aAAa,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE;4BAC1C,YAAY,EAAE,KAAK;4BACnB,KAAK,EAAE,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI;4BAC1D,MAAM,EAAE,SAAS;4BACjB,QAAQ,EAAE,MAAM;4BAChB,UAAU,EAAE,GAAG;yBAChB,uBAEM,QAAQ,SACR,IACL,EAEN,iCAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,EAAE,YAAY,EAAE,MAAM,EAAE,uBAC5E,WAAW,EAAE,IAAI,IAAI,YAAY,IACpC,EAGL,QAAQ,IAAI,CACX,gCACE,KAAK,EAAE;oBACL,QAAQ,EAAE,OAAO;oBACjB,GAAG,EAAE,CAAC;oBACN,IAAI,EAAE,CAAC;oBACP,KAAK,EAAE,CAAC;oBACR,MAAM,EAAE,CAAC;oBACT,eAAe,EAAE,oBAAoB;oBACrC,OAAO,EAAE,MAAM;oBACf,UAAU,EAAE,QAAQ;oBACpB,cAAc,EAAE,QAAQ;oBACxB,MAAM,EAAE,IAAI;iBACb,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,YAEjC,iCACE,KAAK,EAAE;wBACL,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU;wBACxC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI;wBACxB,OAAO,EAAE,MAAM;wBACf,YAAY,EAAE,KAAK;wBACnB,QAAQ,EAAE,OAAO;wBACjB,MAAM,EAAE,aAAa,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE;qBAC3C,EACD,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,aAEnC,gCAAK,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,uCAEpE,EACN,iCAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,aACvE,8BAAG,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,YAChC,sFAAqD,GACnD,EACJ,gCAAI,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,aACrD,gCAAI,KAAK,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE,aAChC,iCAAM,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,oCAAkB,sCAChD,EACL,gCAAI,KAAK,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE,aAChC,iCAAM,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,4BAAe,oDAC7C,EACL,+BAAI,KAAK,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE,YAChC,iCAAM,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,iCAAyB,GACvD,EACL,yCACE,iCAAM,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,6CAAgC,GAC9D,IACF,EACL,8BAAG,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,YAChC,2EAA0C,GACxC,EACJ,gCAAI,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,aAC/B,wEAAmC,EACnC,uEAAkC,EAClC,mEAA8B,IAC3B,IACD,EACN,mCACE,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,EACjC,KAAK,EAAE;gCACL,OAAO,EAAE,UAAU;gCACnB,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO;gCACrC,KAAK,EAAE,SAAS;gCAChB,MAAM,EAAE,MAAM;gCACd,YAAY,EAAE,KAAK;gCACnB,MAAM,EAAE,SAAS;gCACjB,QAAQ,EAAE,MAAM;gCAChB,UAAU,EAAE,GAAG;6BAChB,uBAGM,IACL,GACF,CACP,EAGA,WAAW,IAAI,CACd,0CACG,gBAAgB,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE;oBAClC,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;wBAC1B,uBAAuB;wBACvB,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC,eAAe,CAAW,CAAC;wBAC9D,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC,aAAa,CAAW,CAAC;wBAC1D,MAAM,eAAe,GAAG,QAAQ,IAAI,QAAQ,KAAK,wBAAwB,CAAC;wBAE1E,8CAA8C;wBAC9C,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,oCAAoC;wBACjF,MAAM,aAAa,GAAG,gBAAgB,KAAK,UAAU,CAAC;wBAEtD,OAAO,CACL,iCAEE,KAAK,EAAE;gCACL,YAAY,EAAE,MAAM;gCACpB,aAAa,EAAE,MAAM;gCACrB,WAAW,EAAE,MAAM;gCACnB,YAAY,EAAE,GAAG,GAAG,gBAAgB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,aAAa,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,MAAM;gCAC7F,UAAU,EAAE,mBAAmB;gCAC/B,OAAO,EAAE,gBAAgB,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;gCACrD,UAAU,EAAE,mBAAmB;gCAC/B,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,UAAU;gCACrD,eAAe,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa;gCACrE,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,eAAe;gCAC7D,YAAY,EAAE,KAAK;6BACpB,aAED,iCACE,KAAK,EAAE;wCACL,OAAO,EAAE,MAAM;wCACf,cAAc,EAAE,eAAe;wCAC/B,UAAU,EAAE,QAAQ;wCACpB,YAAY,EAAE,KAAK;wCACnB,GAAG,EAAE,KAAK;qCACX,aAED,iCAAK,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,CAAC,EAAE,wBAC3E,IAAI,CAAC,IAAI,IACb,EACL,QAAQ,IAAI,CACX,iCACE,KAAK,EAAE;gDACL,QAAQ,EAAE,MAAM;gDAChB,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;gDAC9C,UAAU,EAAE,WAAW;gDACvB,UAAU,EAAE,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;gDACnD,OAAO,EAAE,SAAS;gDAClB,YAAY,EAAE,KAAK;gDACnB,UAAU,EAAE,CAAC;gDACb,QAAQ,EAAE,CAAC;gDACX,QAAQ,EAAE,QAAQ;gDAClB,YAAY,EAAE,UAAU;gDACxB,UAAU,EAAE,QAAQ;6CACrB,aAEA,eAAe,IAAI,IAAI,EACvB,QAAQ,OAAG,MAAM,IACd,CACP,IACG,EACN,gCACE,KAAK,EAAE;wCACL,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO;wCAChC,OAAO,EAAE,KAAK;wCACd,YAAY,EAAE,KAAK;wCACnB,MAAM,EAAE,CAAC;wCACT,QAAQ,EAAE,MAAM;wCAChB,UAAU,EAAE,KAAK;wCACjB,QAAQ,EAAE,MAAM;wCAChB,QAAQ,EAAE,MAAM;qCACjB,YAEA,IAAI,CAAC,SAAS,CACb,MAAM,CAAC,WAAW,CAChB,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,IAAI,EAAE,CAAC,CAAC,MAAM,CAC1C,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,GAAG,KAAK,eAAe,IAAI,GAAG,KAAK,aAAa,CAC5D,CACF,EACD,IAAI,EACJ,CAAC,CACF,GACG,KArED,GAAG,CAsEJ,CACP,CAAC;oBACJ,CAAC;yBAAM,CAAC;wBACN,qBAAqB;wBACrB,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,cAAc,CAAC,CAAC;wBACpD,MAAM,aAAa,GAAG,gBAAgB,CAAC,IAAI,CAAC,QAAS,CAAC,CAAC;wBAEvD,OAAO,CACL,iCAEE,KAAK,EAAE;gCACL,YAAY,EAAE,MAAM;gCACpB,aAAa,EAAE,MAAM;gCACrB,WAAW,EAAE,MAAM;gCACnB,YAAY,EAAE,GAAG,GAAG,gBAAgB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,aAAa,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,MAAM;gCAC7F,UAAU,EAAE,aAAa,aAAa,EAAE;6BACzC,aAED,iCACE,KAAK,EAAE;wCACL,OAAO,EAAE,MAAM;wCACf,cAAc,EAAE,eAAe;wCAC/B,UAAU,EAAE,QAAQ;wCACpB,YAAY,EAAE,KAAK;qCACpB,aAED,iCAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,aAC/D,iCAAM,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAG,eAAe,CAAC,IAAI,CAAC,QAAS,CAAC,GAAQ,EAC3E,kCACE,KAAK,EAAE;wDACL,KAAK,EAAE,aAAa;wDACpB,QAAQ,EAAE,MAAM;wDAChB,UAAU,EAAE,MAAM;qDACnB,sBAEK,IAAI,CAAC,QAAQ,IACd,IACH,EACL,WAAW,IAAI,CACd,gCACE,KAAK,EAAE;gDACL,QAAQ,EAAE,MAAM;gDAChB,KAAK,EAAE,SAAS;gDAChB,UAAU,EAAE,SAAS;gDACrB,OAAO,EAAE,SAAS;gDAClB,YAAY,EAAE,KAAK;6CACpB,YAEA,WAAW,GACR,CACP,IACG,EAGN,gCACE,KAAK,EAAE;wCACL,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO;wCAChC,OAAO,EAAE,KAAK;wCACd,YAAY,EAAE,KAAK;wCACnB,YAAY,EAAE,IAAI,CAAC,UAAU,IAAI,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG;wCACtF,QAAQ,EAAE,MAAM;qCACjB,YAEA,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC/B,IAAI,CAAC,IAAI,CACV,CAAC,CAAC,CAAC,CACF,gCAAK,KAAK,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,YACxC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC,GAC/B,CACP,GACG,EAGL,IAAI,CAAC,UAAU,IAAI,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,MAAM,GAAG,CAAC,IAAI,CAC7D,gCACE,KAAK,EAAE;wCACL,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO;wCAChC,OAAO,EAAE,KAAK;wCACd,YAAY,EAAE,KAAK;wCACnB,MAAM,EAAE,CAAC;wCACT,QAAQ,EAAE,MAAM;wCAChB,OAAO,EAAE,GAAG;qCACb,YAEA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC,GACrC,CACP,KA7EI,GAAG,CA8EJ,CACP,CAAC;oBACJ,CAAC;gBACH,CAAC,CAAC,GACE,CACP,EAED,iCACE,KAAK,EAAE;oBACL,SAAS,EAAE,MAAM;oBACjB,UAAU,EAAE,MAAM;oBAClB,SAAS,EAAE,aAAa,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE;oBAC7C,QAAQ,EAAE,MAAM;oBAChB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS;iBAC9B,aAED,iCAAK,KAAK,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE,aACjC,8DAA6B,OAAE,KAAK,CAAC,MAAM,IACvC,EACN,iCAAK,KAAK,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE,aACjC,2DAA0B,OAAE,UAAU,eAAW,QAAQ,aACrD,EACN,4CACE,yDAAwB,EAAC,GAAG,EAC5B,iCAAM,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,kCAAqB,IAClD,IACF,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAvaW,QAAA,cAAc,kBAuazB"}
1
+ {"version":3,"file":"TestEventPanel.js","sourceRoot":"","sources":["../../src/components/TestEventPanel.tsx"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@principal-ai/principal-view-react",
3
- "version": "0.7.12",
3
+ "version": "0.7.13",
4
4
  "description": "React components for graph-based principal view framework",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
package/src/components/TestEventPanel.tsx CHANGED
@@ -52,6 +52,7 @@ export interface TestEventPanelProps {
52
52
  currentSpanIndex: number;
53
53
  currentEventIndex: number;
54
54
  highlightedPhase?: string; // 'setup' | 'execution' | 'assertion'
55
+ onSpanIndexChange?: (index: number) => void;
55
56
  }
56
57
 
57
58
  // Helper functions for log severity
@@ -85,6 +86,7 @@ export const TestEventPanel: React.FC<TestEventPanelProps> = ({
85
86
  currentSpanIndex,
86
87
  currentEventIndex,
87
88
  highlightedPhase,
89
+ onSpanIndexChange,
88
90
  }) => {
89
91
  const { theme } = useTheme();
90
92
  const [showHelp, setShowHelp] = useState(false);
@@ -92,6 +94,18 @@ export const TestEventPanel: React.FC<TestEventPanelProps> = ({
92
94
 
93
95
  const currentSpan = spans[currentSpanIndex];
94
96
 
97
+ const handlePrevTest = () => {
98
+ if (currentSpanIndex > 0 && onSpanIndexChange) {
99
+ onSpanIndexChange(currentSpanIndex - 1);
100
+ }
101
+ };
102
+
103
+ const handleNextTest = () => {
104
+ if (currentSpanIndex < spans.length - 1 && onSpanIndexChange) {
105
+ onSpanIndexChange(currentSpanIndex + 1);
106
+ }
107
+ };
108
+
95
109
  // Build interleaved timeline
96
110
  const timeline = useMemo(() => {
97
111
  if (!currentSpan) return [];
@@ -137,90 +151,147 @@ export const TestEventPanel: React.FC<TestEventPanelProps> = ({
137
151
  height: '100%',
138
152
  backgroundColor: theme.colors.background,
139
153
  color: theme.colors.text,
140
- padding: '20px',
141
154
  fontFamily: theme.fonts.monospace,
142
155
  fontSize: '14px',
143
- overflow: 'auto',
144
156
  boxSizing: 'border-box',
157
+ display: 'flex',
158
+ flexDirection: 'column',
145
159
  }}
146
160
  >
147
- <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '15px' }}>
148
- <div style={{ fontWeight: 'bold', fontSize: '18px' }}>
149
- Execution Timeline
161
+ {/* Static Header */}
162
+ <div
163
+ style={{
164
+ padding: '20px 20px 0 20px',
165
+ backgroundColor: theme.colors.background,
166
+ borderBottom: `1px solid ${theme.colors.border}`,
167
+ flexShrink: 0,
168
+ }}
169
+ >
170
+ <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '12px' }}>
171
+ <div style={{ fontWeight: 'bold', fontSize: '18px' }}>
172
+ Execution Timeline
173
+ </div>
174
+ <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
175
+ <div style={{ fontSize: '13px', color: theme.colors.textMuted }}>
176
+ <span style={{ color: '#4ade80' }}>All Passed ✓</span>
177
+ </div>
178
+ <button
179
+ onClick={() => setShowHelp(true)}
180
+ style={{
181
+ background: 'transparent',
182
+ border: 'none',
183
+ cursor: 'pointer',
184
+ padding: '4px',
185
+ display: 'flex',
186
+ alignItems: 'center',
187
+ color: theme.colors.textMuted,
188
+ }}
189
+ onMouseEnter={(e) => {
190
+ e.currentTarget.style.color = theme.colors.text;
191
+ }}
192
+ onMouseLeave={(e) => {
193
+ e.currentTarget.style.color = theme.colors.textMuted;
194
+ }}
195
+ >
196
+ <HelpCircle size={20} />
197
+ </button>
198
+ </div>
150
199
  </div>
151
- <button
152
- onClick={() => setShowHelp(true)}
153
- style={{
154
- background: 'transparent',
155
- border: 'none',
156
- cursor: 'pointer',
157
- padding: '4px',
158
- display: 'flex',
159
- alignItems: 'center',
160
- color: theme.colors.textMuted,
161
- }}
162
- onMouseEnter={(e) => {
163
- e.currentTarget.style.color = theme.colors.text;
164
- }}
165
- onMouseLeave={(e) => {
166
- e.currentTarget.style.color = theme.colors.textMuted;
167
- }}
168
- >
169
- <HelpCircle size={20} />
170
- </button>
171
- </div>
172
200
 
173
- {/* Filter Tabs */}
174
- <div style={{ display: 'flex', gap: '8px', marginBottom: '12px' }}>
175
- <button
176
- onClick={() => setViewMode('all')}
177
- style={{
178
- padding: '6px 12px',
179
- background: viewMode === 'all' ? theme.colors.primary : 'transparent',
180
- border: `1px solid ${theme.colors.border}`,
181
- borderRadius: '4px',
182
- color: viewMode === 'all' ? '#ffffff' : theme.colors.text,
183
- cursor: 'pointer',
184
- fontSize: '12px',
185
- fontWeight: 500,
186
- }}
187
- >
188
- All ({timeline.length})
189
- </button>
190
- <button
191
- onClick={() => setViewMode('events')}
192
- style={{
193
- padding: '6px 12px',
194
- background: viewMode === 'events' ? theme.colors.primary : 'transparent',
195
- border: `1px solid ${theme.colors.border}`,
196
- borderRadius: '4px',
197
- color: viewMode === 'events' ? '#ffffff' : theme.colors.text,
198
- cursor: 'pointer',
199
- fontSize: '12px',
200
- fontWeight: 500,
201
- }}
202
- >
203
- Events ({eventCount})
204
- </button>
205
- <button
206
- onClick={() => setViewMode('logs')}
207
- style={{
208
- padding: '6px 12px',
209
- background: viewMode === 'logs' ? theme.colors.primary : 'transparent',
210
- border: `1px solid ${theme.colors.border}`,
211
- borderRadius: '4px',
212
- color: viewMode === 'logs' ? '#ffffff' : theme.colors.text,
213
- cursor: 'pointer',
214
- fontSize: '12px',
215
- fontWeight: 500,
216
- }}
217
- >
218
- Logs ({logCount})
219
- </button>
220
- </div>
201
+ {/* Test Navigation */}
202
+ <div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '12px' }}>
203
+ <button
204
+ onClick={handlePrevTest}
205
+ disabled={currentSpanIndex === 0}
206
+ style={{
207
+ padding: '4px 12px',
208
+ background: theme.colors.surface,
209
+ border: `1px solid ${theme.colors.border}`,
210
+ borderRadius: '4px',
211
+ color: currentSpanIndex === 0 ? theme.colors.textMuted : theme.colors.text,
212
+ cursor: currentSpanIndex === 0 ? 'not-allowed' : 'pointer',
213
+ fontSize: '14px',
214
+ opacity: currentSpanIndex === 0 ? 0.5 : 1,
215
+ }}
216
+ >
217
+ ← Prev
218
+ </button>
219
+ <div style={{ fontSize: '13px', color: theme.colors.textMuted }}>
220
+ Test {currentSpanIndex + 1} of {spans.length}
221
+ </div>
222
+ <button
223
+ onClick={handleNextTest}
224
+ disabled={currentSpanIndex === spans.length - 1}
225
+ style={{
226
+ padding: '4px 12px',
227
+ background: theme.colors.surface,
228
+ border: `1px solid ${theme.colors.border}`,
229
+ borderRadius: '4px',
230
+ color: currentSpanIndex === spans.length - 1 ? theme.colors.textMuted : theme.colors.text,
231
+ cursor: currentSpanIndex === spans.length - 1 ? 'not-allowed' : 'pointer',
232
+ fontSize: '14px',
233
+ opacity: currentSpanIndex === spans.length - 1 ? 0.5 : 1,
234
+ }}
235
+ >
236
+ Next →
237
+ </button>
238
+ <div style={{ fontSize: '12px', color: theme.colors.textMuted, marginLeft: 'auto' }}>
239
+ {eventCount} events, {logCount} logs
240
+ </div>
241
+ </div>
242
+
243
+ {/* Filter Tabs */}
244
+ <div style={{ display: 'flex', gap: '8px', marginBottom: '12px' }}>
245
+ <button
246
+ onClick={() => setViewMode('all')}
247
+ style={{
248
+ padding: '6px 12px',
249
+ background: viewMode === 'all' ? theme.colors.primary : 'transparent',
250
+ border: `1px solid ${theme.colors.border}`,
251
+ borderRadius: '4px',
252
+ color: viewMode === 'all' ? '#ffffff' : theme.colors.text,
253
+ cursor: 'pointer',
254
+ fontSize: '12px',
255
+ fontWeight: 500,
256
+ }}
257
+ >
258
+ All ({timeline.length})
259
+ </button>
260
+ <button
261
+ onClick={() => setViewMode('events')}
262
+ style={{
263
+ padding: '6px 12px',
264
+ background: viewMode === 'events' ? theme.colors.primary : 'transparent',
265
+ border: `1px solid ${theme.colors.border}`,
266
+ borderRadius: '4px',
267
+ color: viewMode === 'events' ? '#ffffff' : theme.colors.text,
268
+ cursor: 'pointer',
269
+ fontSize: '12px',
270
+ fontWeight: 500,
271
+ }}
272
+ >
273
+ Events ({eventCount})
274
+ </button>
275
+ <button
276
+ onClick={() => setViewMode('logs')}
277
+ style={{
278
+ padding: '6px 12px',
279
+ background: viewMode === 'logs' ? theme.colors.primary : 'transparent',
280
+ border: `1px solid ${theme.colors.border}`,
281
+ borderRadius: '4px',
282
+ color: viewMode === 'logs' ? '#ffffff' : theme.colors.text,
283
+ cursor: 'pointer',
284
+ fontSize: '12px',
285
+ fontWeight: 500,
286
+ }}
287
+ >
288
+ Logs ({logCount})
289
+ </button>
290
+ </div>
221
291
 
222
- <div style={{ fontSize: '13px', color: theme.colors.textMuted, marginBottom: '15px' }}>
223
- Test: {currentSpan?.name || 'Loading...'}
292
+ <div style={{ fontSize: '13px', color: theme.colors.textMuted, marginBottom: '15px' }}>
293
+ Test: {currentSpan?.name || 'Loading...'}
294
+ </div>
224
295
  </div>
225
296
 
226
297
  {/* Help Modal */}
@@ -300,10 +371,18 @@ export const TestEventPanel: React.FC<TestEventPanelProps> = ({
300
371
  </div>
301
372
  )}
302
373
 
303
- {/* Timeline Items */}
304
- {currentSpan && (
305
- <div>
306
- {filteredTimeline.map((item, idx) => {
374
+ {/* Scrollable Content */}
375
+ <div
376
+ style={{
377
+ flex: 1,
378
+ overflow: 'auto',
379
+ padding: '20px',
380
+ }}
381
+ >
382
+ {/* Timeline Items */}
383
+ {currentSpan && (
384
+ <div>
385
+ {filteredTimeline.map((item, idx) => {
307
386
  if (item.type === 'event') {
308
387
  // SPAN EVENT RENDERING
309
388
  const filepath = item.attributes?.['code.filepath'] as string;
@@ -479,26 +558,6 @@ export const TestEventPanel: React.FC<TestEventPanelProps> = ({
479
558
  })}
480
559
  </div>
481
560
  )}
482
-
483
- <div
484
- style={{
485
- marginTop: '20px',
486
- paddingTop: '15px',
487
- borderTop: `1px solid ${theme.colors.border}`,
488
- fontSize: '13px',
489
- color: theme.colors.textMuted,
490
- }}
491
- >
492
- <div style={{ marginBottom: '8px' }}>
493
- <strong>Total tests:</strong> {spans.length}
494
- </div>
495
- <div style={{ marginBottom: '8px' }}>
496
- <strong>Timeline:</strong> {eventCount} events, {logCount} logs
497
- </div>
498
- <div>
499
- <strong>Status:</strong>{' '}
500
- <span style={{ color: '#4ade80' }}>All Passed ✓</span>
501
- </div>
502
561
  </div>
503
562
  </div>
504
563
  );
package/src/stories/RealTestExecution.stories.tsx CHANGED
@@ -188,7 +188,7 @@ const testExecutionCanvas: ExtendedCanvas = {
188
188
 
189
189
  const AnimatedTestExecution = () => {
190
190
  const [events] = useState<GraphEvent[]>([]);
191
- const [currentSpanIndex] = useState(0);
191
+ const [currentSpanIndex, setCurrentSpanIndex] = useState(0);
192
192
  // Show all events by default - set to a large number
193
193
  const [currentEventIndex] = useState(999);
194
194
  const [highlightedPhase, setHighlightedPhase] = useState<string | undefined>();
@@ -208,6 +208,7 @@ const AnimatedTestExecution = () => {
208
208
  currentSpanIndex={currentSpanIndex}
209
209
  currentEventIndex={currentEventIndex}
210
210
  highlightedPhase={highlightedPhase}
211
+ onSpanIndexChange={setCurrentSpanIndex}
211
212
  />
212
213
  </div>
213
214