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

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 +175 -140
  4. package/dist/components/TestEventPanel.js.map +1 -1
  5. package/package.json +3 -1
  6. package/src/components/TestEventPanel.tsx +164 -105
  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;AAKjD,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,CAgexD,CAAC"}
package/dist/components/TestEventPanel.js CHANGED
@@ -1,10 +1,14 @@
1
1
  "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
2
5
  Object.defineProperty(exports, "__esModule", { value: true });
3
6
  exports.TestEventPanel = void 0;
4
7
  const jsx_runtime_1 = require("react/jsx-runtime");
5
8
  const react_1 = require("react");
6
9
  const industry_theme_1 = require("@principal-ade/industry-theme");
7
10
  const lucide_react_1 = require("lucide-react");
11
+ const js_yaml_1 = __importDefault(require("js-yaml"));
8
12
  // Helper functions for log severity
9
13
  function getSeverityColor(severity) {
10
14
  const colors = {
@@ -28,11 +32,21 @@ function getSeverityIcon(severity) {
28
32
  };
29
33
  return icons[severity] || '•';
30
34
  }
31
- const TestEventPanel = ({ spans, logs = [], currentSpanIndex, currentEventIndex, highlightedPhase, }) => {
35
+ const TestEventPanel = ({ spans, logs = [], currentSpanIndex, currentEventIndex, highlightedPhase, onSpanIndexChange, }) => {
32
36
  const { theme } = (0, industry_theme_1.useTheme)();
33
37
  const [showHelp, setShowHelp] = (0, react_1.useState)(false);
34
38
  const [viewMode, setViewMode] = (0, react_1.useState)('all');
35
39
  const currentSpan = spans[currentSpanIndex];
40
+ const handlePrevTest = () => {
41
+ if (currentSpanIndex > 0 && onSpanIndexChange) {
42
+ onSpanIndexChange(currentSpanIndex - 1);
43
+ }
44
+ };
45
+ const handleNextTest = () => {
46
+ if (currentSpanIndex < spans.length - 1 && onSpanIndexChange) {
47
+ onSpanIndexChange(currentSpanIndex + 1);
48
+ }
49
+ };
36
50
  // Build interleaved timeline
37
51
  const timeline = (0, react_1.useMemo)(() => {
38
52
  if (!currentSpan)
@@ -72,51 +86,74 @@ const TestEventPanel = ({ spans, logs = [], currentSpanIndex, currentEventIndex,
72
86
  height: '100%',
73
87
  backgroundColor: theme.colors.background,
74
88
  color: theme.colors.text,
75
- padding: '20px',
76
89
  fontFamily: theme.fonts.monospace,
77
90
  fontSize: '14px',
78
- overflow: 'auto',
79
91
  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: {
92
+ display: 'flex',
93
+ flexDirection: 'column',
94
+ }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
95
+ padding: '20px 20px 0 20px',
96
+ backgroundColor: theme.colors.background,
97
+ borderBottom: `1px solid ${theme.colors.border}`,
98
+ flexShrink: 0,
99
+ }, 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: {
100
+ background: 'transparent',
101
+ border: 'none',
102
+ cursor: 'pointer',
103
+ padding: '4px',
104
+ display: 'flex',
105
+ alignItems: 'center',
106
+ color: theme.colors.textMuted,
107
+ }, onMouseEnter: (e) => {
108
+ e.currentTarget.style.color = theme.colors.text;
109
+ }, onMouseLeave: (e) => {
110
+ e.currentTarget.style.color = theme.colors.textMuted;
111
+ }, 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: {
112
+ padding: '4px 12px',
113
+ background: theme.colors.surface,
114
+ border: `1px solid ${theme.colors.border}`,
115
+ borderRadius: '4px',
116
+ color: currentSpanIndex === 0 ? theme.colors.textMuted : theme.colors.text,
117
+ cursor: currentSpanIndex === 0 ? 'not-allowed' : 'pointer',
118
+ fontSize: '14px',
119
+ opacity: currentSpanIndex === 0 ? 0.5 : 1,
120
+ }, 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: {
121
+ padding: '4px 12px',
122
+ background: theme.colors.surface,
123
+ border: `1px solid ${theme.colors.border}`,
124
+ borderRadius: '4px',
125
+ color: currentSpanIndex === spans.length - 1 ? theme.colors.textMuted : theme.colors.text,
126
+ cursor: currentSpanIndex === spans.length - 1 ? 'not-allowed' : 'pointer',
127
+ fontSize: '14px',
128
+ opacity: currentSpanIndex === spans.length - 1 ? 0.5 : 1,
129
+ }, 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: {
130
+ padding: '6px 12px',
131
+ background: viewMode === 'all' ? theme.colors.primary : 'transparent',
132
+ border: `1px solid ${theme.colors.border}`,
133
+ borderRadius: '4px',
134
+ color: viewMode === 'all' ? '#ffffff' : theme.colors.text,
135
+ cursor: 'pointer',
136
+ fontSize: '12px',
137
+ fontWeight: 500,
138
+ }, children: ["All (", timeline.length, ")"] }), (0, jsx_runtime_1.jsxs)("button", { onClick: () => setViewMode('events'), style: {
139
+ padding: '6px 12px',
140
+ background: viewMode === 'events' ? theme.colors.primary : 'transparent',
141
+ border: `1px solid ${theme.colors.border}`,
142
+ borderRadius: '4px',
143
+ color: viewMode === 'events' ? '#ffffff' : theme.colors.text,
144
+ cursor: 'pointer',
145
+ fontSize: '12px',
146
+ fontWeight: 500,
147
+ }, children: ["Events (", eventCount, ")"] }), (0, jsx_runtime_1.jsxs)("button", { onClick: () => setViewMode('logs'), style: {
148
+ padding: '6px 12px',
149
+ background: viewMode === 'logs' ? theme.colors.primary : 'transparent',
150
+ border: `1px solid ${theme.colors.border}`,
151
+ borderRadius: '4px',
152
+ color: viewMode === 'logs' ? '#ffffff' : theme.colors.text,
153
+ cursor: 'pointer',
154
+ fontSize: '12px',
155
+ fontWeight: 500,
156
+ }, 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
157
  position: 'fixed',
121
158
  top: 0,
122
159
  left: 0,
@@ -143,103 +180,101 @@ const TestEventPanel = ({ spans, logs = [], currentSpanIndex, currentEventIndex,
143
180
  cursor: 'pointer',
144
181
  fontSize: '14px',
145
182
  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" })] })] })] }));
183
+ }, children: "Got it" })] }) })), (0, jsx_runtime_1.jsx)("div", { style: {
184
+ flex: 1,
185
+ overflow: 'auto',
186
+ padding: '20px',
187
+ }, children: currentSpan && ((0, jsx_runtime_1.jsx)("div", { children: filteredTimeline.map((item, idx) => {
188
+ if (item.type === 'event') {
189
+ // SPAN EVENT RENDERING
190
+ const filepath = item.attributes?.['code.filepath'];
191
+ const lineno = item.attributes?.['code.lineno'];
192
+ const isCodeUnderTest = filepath && filepath !== 'GraphConverter.test.ts';
193
+ // Determine which phase this event belongs to
194
+ const eventPhase = item.name?.split('.')[0]; // 'setup', 'execution', 'assertion'
195
+ const isHighlighted = highlightedPhase === eventPhase;
196
+ return ((0, jsx_runtime_1.jsxs)("div", { style: {
197
+ marginBottom: '12px',
198
+ paddingBottom: '12px',
199
+ paddingLeft: '12px',
200
+ borderBottom: idx < filteredTimeline.length - 1 ? `1px solid ${theme.colors.border}` : 'none',
201
+ borderLeft: '3px solid #f59e0b',
202
+ opacity: highlightedPhase && !isHighlighted ? 0.4 : 1,
203
+ transition: 'opacity 0.2s ease',
204
+ transform: isHighlighted ? 'scale(1.02)' : 'scale(1)',
205
+ backgroundColor: isHighlighted ? theme.colors.surface : 'transparent',
206
+ padding: isHighlighted ? '8px 8px 8px 12px' : '0 0 12px 12px',
207
+ borderRadius: '4px',
208
+ }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
209
+ display: 'flex',
210
+ justifyContent: 'space-between',
211
+ alignItems: 'center',
212
+ marginBottom: '4px',
213
+ gap: '8px',
214
+ }, 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: {
215
+ fontSize: '12px',
216
+ color: isCodeUnderTest ? '#4ade80' : '#60a5fa',
217
+ fontFamily: 'monospace',
218
+ background: isCodeUnderTest ? '#064e3b' : '#1e3a8a',
219
+ padding: '2px 6px',
220
+ borderRadius: '3px',
221
+ flexShrink: 1,
222
+ minWidth: 0,
223
+ overflow: 'hidden',
224
+ textOverflow: 'ellipsis',
225
+ whiteSpace: 'nowrap',
226
+ }, children: [isCodeUnderTest && '→ ', filepath, ":", lineno] }))] }), (0, jsx_runtime_1.jsx)("pre", { style: {
227
+ background: theme.colors.surface,
228
+ padding: '8px',
229
+ borderRadius: '4px',
230
+ margin: 0,
231
+ fontSize: '12px',
232
+ lineHeight: '1.4',
233
+ overflow: 'auto',
234
+ maxWidth: '100%',
235
+ }, children: js_yaml_1.default.dump(Object.fromEntries(Object.entries(item.attributes || {}).filter(([key]) => key !== 'code.filepath' && key !== 'code.lineno')), { indent: 2, lineWidth: -1 }) })] }, idx));
236
+ }
237
+ else {
238
+ // OTEL LOG RENDERING
239
+ const serviceName = item.resource?.['service.name'];
240
+ const severityColor = getSeverityColor(item.severity);
241
+ return ((0, jsx_runtime_1.jsxs)("div", { style: {
242
+ marginBottom: '12px',
243
+ paddingBottom: '12px',
244
+ paddingLeft: '12px',
245
+ borderBottom: idx < filteredTimeline.length - 1 ? `1px solid ${theme.colors.border}` : 'none',
246
+ borderLeft: `3px solid ${severityColor}`,
247
+ }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
248
+ display: 'flex',
249
+ justifyContent: 'space-between',
250
+ alignItems: 'center',
251
+ marginBottom: '4px',
252
+ }, 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: {
253
+ color: severityColor,
254
+ fontSize: '13px',
255
+ fontWeight: 'bold',
256
+ }, children: ["LOG: ", item.severity] })] }), serviceName && ((0, jsx_runtime_1.jsx)("div", { style: {
257
+ fontSize: '12px',
258
+ color: '#9ca3af',
259
+ background: '#1e293b',
260
+ padding: '2px 6px',
261
+ borderRadius: '3px',
262
+ }, children: serviceName }))] }), (0, jsx_runtime_1.jsx)("div", { style: {
263
+ background: theme.colors.surface,
264
+ padding: '8px',
265
+ borderRadius: '4px',
266
+ marginBottom: item.attributes && Object.keys(item.attributes).length > 0 ? '8px' : '0',
267
+ fontSize: '13px',
268
+ }, children: typeof item.body === 'string' ? (item.body) : ((0, jsx_runtime_1.jsx)("pre", { style: { margin: 0, fontSize: '12px' }, children: js_yaml_1.default.dump(item.body, { indent: 2, lineWidth: -1 }) })) }), item.attributes && Object.keys(item.attributes).length > 0 && ((0, jsx_runtime_1.jsx)("pre", { style: {
269
+ background: theme.colors.surface,
270
+ padding: '8px',
271
+ borderRadius: '4px',
272
+ margin: 0,
273
+ fontSize: '11px',
274
+ opacity: 0.8,
275
+ }, children: js_yaml_1.default.dump(item.attributes, { indent: 2, lineWidth: -1 }) }))] }, idx));
276
+ }
277
+ }) })) })] }));
243
278
  };
244
279
  exports.TestEventPanel = TestEventPanel;
245
280
  //# 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":"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"}
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.14",
4
4
  "description": "React components for graph-based principal view framework",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -19,6 +19,7 @@
19
19
  "@xyflow/react": "^12.0.0",
20
20
  "elkjs": "^0.9.0",
21
21
  "framer-motion": "^11.0.0",
22
+ "js-yaml": "^4.1.1",
22
23
  "lucide-react": "^0.554.0",
23
24
  "zustand": "^4.5.0"
24
25
  },
@@ -35,6 +36,7 @@
35
36
  "@storybook/react-vite": "^8.5.0",
36
37
  "@storybook/test": "^8.5.0",
37
38
  "@testing-library/react": "^14.0.0",
39
+ "@types/js-yaml": "^4.0.9",
38
40
  "@types/react": "^18.0.0",
39
41
  "happy-dom": "^12.10.3",
40
42
  "react": "^19.0.0",
package/src/components/TestEventPanel.tsx CHANGED
@@ -1,6 +1,7 @@
1
1
  import React, { useState, useMemo } from 'react';
2
2
  import { useTheme } from '@principal-ade/industry-theme';
3
3
  import { HelpCircle } from 'lucide-react';
4
+ import yaml from 'js-yaml';
4
5
 
5
6
  interface SpanEvent {
6
7
  time: number;
@@ -52,6 +53,7 @@ export interface TestEventPanelProps {
52
53
  currentSpanIndex: number;
53
54
  currentEventIndex: number;
54
55
  highlightedPhase?: string; // 'setup' | 'execution' | 'assertion'
56
+ onSpanIndexChange?: (index: number) => void;
55
57
  }
56
58
 
57
59
  // Helper functions for log severity
@@ -85,6 +87,7 @@ export const TestEventPanel: React.FC<TestEventPanelProps> = ({
85
87
  currentSpanIndex,
86
88
  currentEventIndex,
87
89
  highlightedPhase,
90
+ onSpanIndexChange,
88
91
  }) => {
89
92
  const { theme } = useTheme();
90
93
  const [showHelp, setShowHelp] = useState(false);
@@ -92,6 +95,18 @@ export const TestEventPanel: React.FC<TestEventPanelProps> = ({
92
95
 
93
96
  const currentSpan = spans[currentSpanIndex];
94
97
 
98
+ const handlePrevTest = () => {
99
+ if (currentSpanIndex > 0 && onSpanIndexChange) {
100
+ onSpanIndexChange(currentSpanIndex - 1);
101
+ }
102
+ };
103
+
104
+ const handleNextTest = () => {
105
+ if (currentSpanIndex < spans.length - 1 && onSpanIndexChange) {
106
+ onSpanIndexChange(currentSpanIndex + 1);
107
+ }
108
+ };
109
+
95
110
  // Build interleaved timeline
96
111
  const timeline = useMemo(() => {
97
112
  if (!currentSpan) return [];
@@ -137,90 +152,147 @@ export const TestEventPanel: React.FC<TestEventPanelProps> = ({
137
152
  height: '100%',
138
153
  backgroundColor: theme.colors.background,
139
154
  color: theme.colors.text,
140
- padding: '20px',
141
155
  fontFamily: theme.fonts.monospace,
142
156
  fontSize: '14px',
143
- overflow: 'auto',
144
157
  boxSizing: 'border-box',
158
+ display: 'flex',
159
+ flexDirection: 'column',
145
160
  }}
146
161
  >
147
- <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '15px' }}>
148
- <div style={{ fontWeight: 'bold', fontSize: '18px' }}>
149
- Execution Timeline
162
+ {/* Static Header */}
163
+ <div
164
+ style={{
165
+ padding: '20px 20px 0 20px',
166
+ backgroundColor: theme.colors.background,
167
+ borderBottom: `1px solid ${theme.colors.border}`,
168
+ flexShrink: 0,
169
+ }}
170
+ >
171
+ <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '12px' }}>
172
+ <div style={{ fontWeight: 'bold', fontSize: '18px' }}>
173
+ Execution Timeline
174
+ </div>
175
+ <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
176
+ <div style={{ fontSize: '13px', color: theme.colors.textMuted }}>
177
+ <span style={{ color: '#4ade80' }}>All Passed ✓</span>
178
+ </div>
179
+ <button
180
+ onClick={() => setShowHelp(true)}
181
+ style={{
182
+ background: 'transparent',
183
+ border: 'none',
184
+ cursor: 'pointer',
185
+ padding: '4px',
186
+ display: 'flex',
187
+ alignItems: 'center',
188
+ color: theme.colors.textMuted,
189
+ }}
190
+ onMouseEnter={(e) => {
191
+ e.currentTarget.style.color = theme.colors.text;
192
+ }}
193
+ onMouseLeave={(e) => {
194
+ e.currentTarget.style.color = theme.colors.textMuted;
195
+ }}
196
+ >
197
+ <HelpCircle size={20} />
198
+ </button>
199
+ </div>
150
200
  </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
201
 
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>
202
+ {/* Test Navigation */}
203
+ <div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '12px' }}>
204
+ <button
205
+ onClick={handlePrevTest}
206
+ disabled={currentSpanIndex === 0}
207
+ style={{
208
+ padding: '4px 12px',
209
+ background: theme.colors.surface,
210
+ border: `1px solid ${theme.colors.border}`,
211
+ borderRadius: '4px',
212
+ color: currentSpanIndex === 0 ? theme.colors.textMuted : theme.colors.text,
213
+ cursor: currentSpanIndex === 0 ? 'not-allowed' : 'pointer',
214
+ fontSize: '14px',
215
+ opacity: currentSpanIndex === 0 ? 0.5 : 1,
216
+ }}
217
+ >
218
+ ← Prev
219
+ </button>
220
+ <div style={{ fontSize: '13px', color: theme.colors.textMuted }}>
221
+ Test {currentSpanIndex + 1} of {spans.length}
222
+ </div>
223
+ <button
224
+ onClick={handleNextTest}
225
+ disabled={currentSpanIndex === spans.length - 1}
226
+ style={{
227
+ padding: '4px 12px',
228
+ background: theme.colors.surface,
229
+ border: `1px solid ${theme.colors.border}`,
230
+ borderRadius: '4px',
231
+ color: currentSpanIndex === spans.length - 1 ? theme.colors.textMuted : theme.colors.text,
232
+ cursor: currentSpanIndex === spans.length - 1 ? 'not-allowed' : 'pointer',
233
+ fontSize: '14px',
234
+ opacity: currentSpanIndex === spans.length - 1 ? 0.5 : 1,
235
+ }}
236
+ >
237
+ Next →
238
+ </button>
239
+ <div style={{ fontSize: '12px', color: theme.colors.textMuted, marginLeft: 'auto' }}>
240
+ {eventCount} events, {logCount} logs
241
+ </div>
242
+ </div>
243
+
244
+ {/* Filter Tabs */}
245
+ <div style={{ display: 'flex', gap: '8px', marginBottom: '12px' }}>
246
+ <button
247
+ onClick={() => setViewMode('all')}
248
+ style={{
249
+ padding: '6px 12px',
250
+ background: viewMode === 'all' ? theme.colors.primary : 'transparent',
251
+ border: `1px solid ${theme.colors.border}`,
252
+ borderRadius: '4px',
253
+ color: viewMode === 'all' ? '#ffffff' : theme.colors.text,
254
+ cursor: 'pointer',
255
+ fontSize: '12px',
256
+ fontWeight: 500,
257
+ }}
258
+ >
259
+ All ({timeline.length})
260
+ </button>
261
+ <button
262
+ onClick={() => setViewMode('events')}
263
+ style={{
264
+ padding: '6px 12px',
265
+ background: viewMode === 'events' ? theme.colors.primary : 'transparent',
266
+ border: `1px solid ${theme.colors.border}`,
267
+ borderRadius: '4px',
268
+ color: viewMode === 'events' ? '#ffffff' : theme.colors.text,
269
+ cursor: 'pointer',
270
+ fontSize: '12px',
271
+ fontWeight: 500,
272
+ }}
273
+ >
274
+ Events ({eventCount})
275
+ </button>
276
+ <button
277
+ onClick={() => setViewMode('logs')}
278
+ style={{
279
+ padding: '6px 12px',
280
+ background: viewMode === 'logs' ? theme.colors.primary : 'transparent',
281
+ border: `1px solid ${theme.colors.border}`,
282
+ borderRadius: '4px',
283
+ color: viewMode === 'logs' ? '#ffffff' : theme.colors.text,
284
+ cursor: 'pointer',
285
+ fontSize: '12px',
286
+ fontWeight: 500,
287
+ }}
288
+ >
289
+ Logs ({logCount})
290
+ </button>
291
+ </div>
221
292
 
222
- <div style={{ fontSize: '13px', color: theme.colors.textMuted, marginBottom: '15px' }}>
223
- Test: {currentSpan?.name || 'Loading...'}
293
+ <div style={{ fontSize: '13px', color: theme.colors.textMuted, marginBottom: '15px' }}>
294
+ Test: {currentSpan?.name || 'Loading...'}
295
+ </div>
224
296
  </div>
225
297
 
226
298
  {/* Help Modal */}
@@ -300,10 +372,18 @@ export const TestEventPanel: React.FC<TestEventPanelProps> = ({
300
372
  </div>
301
373
  )}
302
374
 
303
- {/* Timeline Items */}
304
- {currentSpan && (
305
- <div>
306
- {filteredTimeline.map((item, idx) => {
375
+ {/* Scrollable Content */}
376
+ <div
377
+ style={{
378
+ flex: 1,
379
+ overflow: 'auto',
380
+ padding: '20px',
381
+ }}
382
+ >
383
+ {/* Timeline Items */}
384
+ {currentSpan && (
385
+ <div>
386
+ {filteredTimeline.map((item, idx) => {
307
387
  if (item.type === 'event') {
308
388
  // SPAN EVENT RENDERING
309
389
  const filepath = item.attributes?.['code.filepath'] as string;
@@ -376,14 +456,13 @@ export const TestEventPanel: React.FC<TestEventPanelProps> = ({
376
456
  maxWidth: '100%',
377
457
  }}
378
458
  >
379
- {JSON.stringify(
459
+ {yaml.dump(
380
460
  Object.fromEntries(
381
461
  Object.entries(item.attributes || {}).filter(
382
462
  ([key]) => key !== 'code.filepath' && key !== 'code.lineno'
383
463
  )
384
464
  ),
385
- null,
386
- 2
465
+ { indent: 2, lineWidth: -1 }
387
466
  )}
388
467
  </pre>
389
468
  </div>
@@ -453,7 +532,7 @@ export const TestEventPanel: React.FC<TestEventPanelProps> = ({
453
532
  item.body
454
533
  ) : (
455
534
  <pre style={{ margin: 0, fontSize: '12px' }}>
456
- {JSON.stringify(item.body, null, 2)}
535
+ {yaml.dump(item.body, { indent: 2, lineWidth: -1 })}
457
536
  </pre>
458
537
  )}
459
538
  </div>
@@ -470,7 +549,7 @@ export const TestEventPanel: React.FC<TestEventPanelProps> = ({
470
549
  opacity: 0.8,
471
550
  }}
472
551
  >
473
- {JSON.stringify(item.attributes, null, 2)}
552
+ {yaml.dump(item.attributes, { indent: 2, lineWidth: -1 })}
474
553
  </pre>
475
554
  )}
476
555
  </div>
@@ -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