causal-inspector 0.1.6 → 0.2.1
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.
- package/README.md +71 -0
- package/dist/CausalInspector.css +20 -447
- package/dist/CausalInspector.d.ts +8 -1
- package/dist/CausalInspector.js +32 -9
- package/dist/causal-inspector.css +2899 -0
- package/dist/components/CopyablePayload.js +8 -8
- package/dist/components/EffectList.d.ts +4 -0
- package/dist/components/EffectList.js +15 -0
- package/dist/components/FilterBar.js +7 -10
- package/dist/components/GlobalScrubber.js +6 -6
- package/dist/components/JsonSyntax.js +8 -8
- package/dist/engines/query.js +131 -52
- package/dist/engines/scrubber.js +1 -1
- package/dist/engines/url.d.ts +5 -2
- package/dist/engines/url.js +50 -22
- package/dist/events.d.ts +39 -13
- package/dist/index.d.ts +5 -3
- package/dist/index.js +4 -2
- package/dist/panes/AggregateTimelinePane.js +4 -4
- package/dist/panes/CausalFlowPane.js +39 -27
- package/dist/panes/CausalTreePane.js +43 -34
- package/dist/panes/LogsPane.js +9 -17
- package/dist/panes/SubjectChainPane.d.ts +1 -0
- package/dist/panes/SubjectChainPane.js +50 -0
- package/dist/panes/TimelinePane.js +33 -19
- package/dist/panes/WaterfallPane.js +5 -5
- package/dist/panes/WorkflowExplorerPane.d.ts +2 -0
- package/dist/panes/WorkflowExplorerPane.js +49 -0
- package/dist/queries.d.ts +16 -12
- package/dist/queries.js +103 -27
- package/dist/reducer.js +134 -38
- package/dist/state.d.ts +18 -5
- package/dist/state.js +17 -8
- package/dist/theme.js +4 -4
- package/dist/types.d.ts +52 -12
- package/dist/utils.js +1 -1
- package/package.json +18 -3
- package/dist/panes/CorrelationExplorerPane.d.ts +0 -2
- package/dist/panes/CorrelationExplorerPane.js +0 -51
package/README.md
ADDED
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
# causal-inspector
|
|
2
|
+
|
|
3
|
+
React UI for inspecting causal-rs event streams, workflows, and reactor logs.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```sh
|
|
8
|
+
npm install causal-inspector
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
Peer deps (provide the ones you use): `react`, `react-dom`, and — for the flow /
|
|
12
|
+
layout panes — `@xyflow/react`, `@dagrejs/dagre`, `flexlayout-react`.
|
|
13
|
+
|
|
14
|
+
## Embedding
|
|
15
|
+
|
|
16
|
+
The inspector ships **self-contained, isolated styles** — it does not require
|
|
17
|
+
Tailwind (or anything else) in the host app. Two imports:
|
|
18
|
+
|
|
19
|
+
```tsx
|
|
20
|
+
import { CausalInspector } from "causal-inspector";
|
|
21
|
+
import "causal-inspector/styles.css"; // utilities + tokens + flow/layout CSS, all scoped
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
That's it. Render it anywhere:
|
|
25
|
+
|
|
26
|
+
```tsx
|
|
27
|
+
<CausalInspector transport={transport} />
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
## Style isolation
|
|
31
|
+
|
|
32
|
+
All shipped CSS is confined to the `.causal-inspector` root the component renders:
|
|
33
|
+
|
|
34
|
+
- **Nothing leaks out** — every selector in `dist/causal-inspector.css` is namespaced
|
|
35
|
+
under `.causal-inspector`, so the inspector can't restyle the host app. The
|
|
36
|
+
third-party flow/layout CSS (`@xyflow/react`, `flexlayout-react`) is bundled and
|
|
37
|
+
scoped too, instead of polluting the global stylesheet.
|
|
38
|
+
- **The host doesn't leak in** — the bundle carries its own preflight reset and
|
|
39
|
+
design tokens (defined on `.causal-inspector`), and is emitted **without cascade
|
|
40
|
+
layers** so its scoped rules win on specificity over a host's global resets,
|
|
41
|
+
element styles, and `body`/reset CSS.
|
|
42
|
+
|
|
43
|
+
**Known limit:** scope-based isolation can't override a host rule that targets the
|
|
44
|
+
*same* Tailwind class name with `!important` (only possible if the host also runs
|
|
45
|
+
Tailwind), nor a pathological `* { font-family }`. If you embed inside a Tailwind
|
|
46
|
+
host, build with a class prefix (see below) to eliminate name collisions entirely.
|
|
47
|
+
|
|
48
|
+
### Re-theming
|
|
49
|
+
|
|
50
|
+
Override the design tokens on the root from the host:
|
|
51
|
+
|
|
52
|
+
```css
|
|
53
|
+
.causal-inspector {
|
|
54
|
+
--color-background: #101014;
|
|
55
|
+
--color-foreground: #e7e7ef;
|
|
56
|
+
/* …any of the --color-* / --radius tokens… */
|
|
57
|
+
}
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
## Build
|
|
61
|
+
|
|
62
|
+
```sh
|
|
63
|
+
npm run build # tsc → dist, copy scoped overrides, compile the CSS bundle
|
|
64
|
+
npm run build:css # just recompile dist/causal-inspector.css
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
The CSS bundle is produced by `postcss.config.mjs`: Tailwind v4 compiles
|
|
68
|
+
`src/styles.css` (scanning `src/**/*.{ts,tsx}` for the utilities actually used),
|
|
69
|
+
then every selector is scoped under `.causal-inspector` and the cascade layers are
|
|
70
|
+
flattened. To harden for a Tailwind host, add a Tailwind `prefix(...)` in
|
|
71
|
+
`src/styles.css` and the matching prefix to component class names.
|
package/dist/CausalInspector.css
CHANGED
|
@@ -1,70 +1,15 @@
|
|
|
1
1
|
/* ── CausalInspector scoped styles ───────────────────────────── */
|
|
2
2
|
|
|
3
3
|
.causal-inspector {
|
|
4
|
-
/* ── Surface ──────────────────── */
|
|
5
|
-
--ci-bg: #0a0a0f;
|
|
6
|
-
--ci-bg-subtle: rgba(15, 15, 20, 0.6);
|
|
7
|
-
--ci-bg-panel: rgba(15, 15, 20, 0.8);
|
|
8
|
-
--ci-bg-hover: rgba(255, 255, 255, 0.04);
|
|
9
|
-
--ci-bg-active: rgba(99, 102, 241, 0.12);
|
|
10
|
-
--ci-bg-selected: rgba(99, 102, 241, 0.15);
|
|
11
|
-
|
|
12
|
-
/* ── Text ─────────────────────── */
|
|
13
|
-
--ci-text: #e0e0f0;
|
|
14
|
-
--ci-text-muted: #70708a;
|
|
15
|
-
--ci-text-dim: rgba(112, 112, 138, 0.6);
|
|
16
|
-
--ci-text-dimmer: rgba(112, 112, 138, 0.4);
|
|
17
|
-
--ci-text-accent: #c7c7ff;
|
|
18
|
-
|
|
19
|
-
/* ── Borders ──────────────────── */
|
|
20
|
-
--ci-border: rgba(255, 255, 255, 0.06);
|
|
21
|
-
--ci-border-hover: rgba(99, 102, 241, 0.3);
|
|
22
|
-
|
|
23
|
-
/* ── Accent (indigo) ──────────── */
|
|
24
|
-
--ci-accent: #6366f1;
|
|
25
|
-
--ci-accent-muted: rgba(99, 102, 241, 0.15);
|
|
26
|
-
--ci-accent-glow: rgba(99, 102, 241, 0.4);
|
|
27
|
-
--ci-accent-text: #818cf8;
|
|
28
|
-
|
|
29
|
-
/* ── Semantic: purple (correlation) */
|
|
30
|
-
--ci-purple: #a78bfa;
|
|
31
|
-
--ci-purple-light: rgba(168, 85, 247, 0.8);
|
|
32
|
-
--ci-purple-dim: rgba(168, 85, 247, 0.7);
|
|
33
|
-
--ci-purple-bg: rgba(168, 85, 247, 0.08);
|
|
34
|
-
--ci-purple-bg-hover: rgba(168, 85, 247, 0.15);
|
|
35
|
-
--ci-purple-border: rgba(168, 85, 247, 0.1);
|
|
36
|
-
--ci-purple-border-alt: rgba(168, 85, 247, 0.2);
|
|
37
|
-
|
|
38
|
-
/* ── Semantic: teal (aggregate) ── */
|
|
39
|
-
--ci-teal: #2dd4bf;
|
|
40
|
-
--ci-teal-bg: rgba(20, 184, 166, 0.1);
|
|
41
|
-
--ci-teal-border: rgba(20, 184, 166, 0.2);
|
|
42
|
-
|
|
43
|
-
/* ── Semantic: red (error) ────── */
|
|
44
|
-
--ci-red: #f87171;
|
|
45
|
-
--ci-red-dim: rgba(248, 113, 113, 0.8);
|
|
46
|
-
--ci-red-bg: rgba(239, 68, 68, 0.1);
|
|
47
|
-
--ci-red-border: rgba(239, 68, 68, 0.2);
|
|
48
|
-
|
|
49
|
-
/* ── Sizing ───────────────────── */
|
|
50
|
-
--ci-radius-sm: 4px;
|
|
51
|
-
--ci-radius-md: 6px;
|
|
52
|
-
--ci-radius-lg: 8px;
|
|
53
|
-
--ci-radius-full: 9999px;
|
|
54
|
-
|
|
55
|
-
/* ── Typography ───────────────── */
|
|
56
|
-
--ci-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
|
|
57
|
-
--ci-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
|
|
58
|
-
|
|
59
4
|
height: 100%;
|
|
60
5
|
width: 100%;
|
|
61
6
|
overflow: hidden;
|
|
62
7
|
position: relative;
|
|
63
8
|
display: flex;
|
|
64
9
|
flex-direction: column;
|
|
65
|
-
background:
|
|
66
|
-
color:
|
|
67
|
-
font-family:
|
|
10
|
+
background: #0a0a0f;
|
|
11
|
+
color: #e0e0f0;
|
|
12
|
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
|
|
68
13
|
-webkit-font-smoothing: antialiased;
|
|
69
14
|
-moz-osx-font-smoothing: grayscale;
|
|
70
15
|
}
|
|
@@ -91,23 +36,23 @@
|
|
|
91
36
|
background-image: none;
|
|
92
37
|
}
|
|
93
38
|
.causal-inspector .flexlayout__tabset_tabbar_outer {
|
|
94
|
-
background:
|
|
39
|
+
background: rgba(15, 15, 20, 0.8) !important;
|
|
95
40
|
backdrop-filter: blur(12px) !important;
|
|
96
|
-
border-bottom: 1px solid
|
|
41
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
|
|
97
42
|
}
|
|
98
43
|
.causal-inspector .flexlayout__tab_button--selected {
|
|
99
|
-
background:
|
|
100
|
-
color:
|
|
44
|
+
background: rgba(99, 102, 241, 0.12) !important;
|
|
45
|
+
color: #c7c7ff !important;
|
|
101
46
|
}
|
|
102
47
|
.causal-inspector .flexlayout__tab_button {
|
|
103
|
-
color:
|
|
48
|
+
color: #70708a !important;
|
|
104
49
|
font-size: 11px !important;
|
|
105
50
|
letter-spacing: 0.02em !important;
|
|
106
51
|
transition: color 150ms, background 150ms !important;
|
|
107
52
|
}
|
|
108
53
|
.causal-inspector .flexlayout__tab_button:hover {
|
|
109
54
|
color: #b0b0c0 !important;
|
|
110
|
-
background:
|
|
55
|
+
background: rgba(255, 255, 255, 0.04) !important;
|
|
111
56
|
}
|
|
112
57
|
.causal-inspector .flexlayout__splitter {
|
|
113
58
|
background: rgba(255, 255, 255, 0.03) !important;
|
|
@@ -116,7 +61,7 @@
|
|
|
116
61
|
background: rgba(99, 102, 241, 0.2) !important;
|
|
117
62
|
}
|
|
118
63
|
.causal-inspector .flexlayout__splitter_drag {
|
|
119
|
-
background:
|
|
64
|
+
background: rgba(99, 102, 241, 0.3) !important;
|
|
120
65
|
}
|
|
121
66
|
|
|
122
67
|
/* ── Flow diagram ─────────────────────────────────────────── */
|
|
@@ -130,24 +75,24 @@
|
|
|
130
75
|
.causal-inspector .react-flow__controls {
|
|
131
76
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
|
|
132
77
|
border: 1px solid rgba(255, 255, 255, 0.08) !important;
|
|
133
|
-
border-radius:
|
|
78
|
+
border-radius: 8px !important;
|
|
134
79
|
overflow: hidden !important;
|
|
135
80
|
}
|
|
136
81
|
.causal-inspector .react-flow__controls-button {
|
|
137
82
|
background: rgba(15, 15, 20, 0.9) !important;
|
|
138
|
-
border-bottom: 1px solid
|
|
139
|
-
fill:
|
|
83
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
|
|
84
|
+
fill: #70708a !important;
|
|
140
85
|
}
|
|
141
86
|
.causal-inspector .react-flow__controls-button:hover {
|
|
142
|
-
background:
|
|
143
|
-
fill:
|
|
87
|
+
background: rgba(99, 102, 241, 0.15) !important;
|
|
88
|
+
fill: #c7c7ff !important;
|
|
144
89
|
}
|
|
145
90
|
|
|
146
91
|
/* ── Selection ring ───────────────────────────────────────── */
|
|
147
92
|
.causal-inspector *:focus-visible {
|
|
148
93
|
outline: none;
|
|
149
|
-
box-shadow: 0 0 0 2px
|
|
150
|
-
border-radius:
|
|
94
|
+
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.4);
|
|
95
|
+
border-radius: 4px;
|
|
151
96
|
}
|
|
152
97
|
|
|
153
98
|
/* ── Range input ──────────────────────────────────────────── */
|
|
@@ -163,16 +108,16 @@
|
|
|
163
108
|
width: 12px;
|
|
164
109
|
height: 12px;
|
|
165
110
|
border-radius: 50%;
|
|
166
|
-
background:
|
|
111
|
+
background: #6366f1;
|
|
167
112
|
cursor: pointer;
|
|
168
|
-
box-shadow: 0 0 6px
|
|
113
|
+
box-shadow: 0 0 6px rgba(99, 102, 241, 0.4);
|
|
169
114
|
transition: transform 100ms;
|
|
170
115
|
}
|
|
171
116
|
.causal-inspector input[type="range"]::-webkit-slider-thumb:hover {
|
|
172
117
|
transform: scale(1.2);
|
|
173
118
|
}
|
|
174
119
|
|
|
175
|
-
/* ──
|
|
120
|
+
/* ── Pulse animation for running reactors ─────────────────── */
|
|
176
121
|
@keyframes causal-inspector-pulse {
|
|
177
122
|
0%, 100% { opacity: 1; }
|
|
178
123
|
50% { opacity: 0.7; }
|
|
@@ -181,375 +126,3 @@
|
|
|
181
126
|
0%, 100% { box-shadow: 0 0 4px rgba(99, 102, 241, 0.2); }
|
|
182
127
|
50% { box-shadow: 0 0 12px rgba(99, 102, 241, 0.4); }
|
|
183
128
|
}
|
|
184
|
-
|
|
185
|
-
.causal-inspector .ci-pulse {
|
|
186
|
-
animation: causal-inspector-pulse 2s ease-in-out infinite;
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
/* ── Layout utilities ─────────────────────────────────────── */
|
|
190
|
-
.causal-inspector .ci-col {
|
|
191
|
-
display: flex;
|
|
192
|
-
flex-direction: column;
|
|
193
|
-
height: 100%;
|
|
194
|
-
}
|
|
195
|
-
|
|
196
|
-
.causal-inspector .ci-row {
|
|
197
|
-
display: flex;
|
|
198
|
-
align-items: center;
|
|
199
|
-
}
|
|
200
|
-
|
|
201
|
-
.causal-inspector .ci-scroll {
|
|
202
|
-
flex: 1;
|
|
203
|
-
overflow-y: auto;
|
|
204
|
-
}
|
|
205
|
-
|
|
206
|
-
.causal-inspector .ci-truncate {
|
|
207
|
-
overflow: hidden;
|
|
208
|
-
text-overflow: ellipsis;
|
|
209
|
-
white-space: nowrap;
|
|
210
|
-
}
|
|
211
|
-
|
|
212
|
-
.causal-inspector .ci-mono {
|
|
213
|
-
font-family: var(--ci-font-mono);
|
|
214
|
-
}
|
|
215
|
-
|
|
216
|
-
.causal-inspector .ci-tabular {
|
|
217
|
-
font-variant-numeric: tabular-nums;
|
|
218
|
-
}
|
|
219
|
-
|
|
220
|
-
/* ── Surface (panel header / toolbar) ─────────────────────── */
|
|
221
|
-
.causal-inspector .ci-surface {
|
|
222
|
-
background: var(--ci-bg-subtle);
|
|
223
|
-
backdrop-filter: blur(8px);
|
|
224
|
-
}
|
|
225
|
-
|
|
226
|
-
/* ── Dividers ─────────────────────────────────────────────── */
|
|
227
|
-
.causal-inspector .ci-divider-h {
|
|
228
|
-
width: 1px;
|
|
229
|
-
height: 16px;
|
|
230
|
-
background: var(--ci-border);
|
|
231
|
-
flex-shrink: 0;
|
|
232
|
-
}
|
|
233
|
-
|
|
234
|
-
/* ── Input ────────────────────────────────────────────────── */
|
|
235
|
-
.causal-inspector .ci-input {
|
|
236
|
-
font-size: 12px;
|
|
237
|
-
border-radius: var(--ci-radius-md);
|
|
238
|
-
background: rgba(255, 255, 255, 0.025);
|
|
239
|
-
border: 1px solid var(--ci-border);
|
|
240
|
-
color: var(--ci-text);
|
|
241
|
-
transition: border-color 150ms, box-shadow 150ms;
|
|
242
|
-
}
|
|
243
|
-
|
|
244
|
-
.causal-inspector .ci-input::placeholder {
|
|
245
|
-
color: var(--ci-text-dimmer);
|
|
246
|
-
}
|
|
247
|
-
|
|
248
|
-
.causal-inspector .ci-input:focus {
|
|
249
|
-
outline: none;
|
|
250
|
-
box-shadow: 0 0 0 1px var(--ci-accent-glow);
|
|
251
|
-
border-color: var(--ci-border-hover);
|
|
252
|
-
}
|
|
253
|
-
|
|
254
|
-
/* ── Button (icon) ────────────────────────────────────────── */
|
|
255
|
-
.causal-inspector .ci-btn {
|
|
256
|
-
padding: 4px;
|
|
257
|
-
border-radius: var(--ci-radius-md);
|
|
258
|
-
color: var(--ci-text-dim);
|
|
259
|
-
background: transparent;
|
|
260
|
-
border: none;
|
|
261
|
-
cursor: pointer;
|
|
262
|
-
transition: color 150ms, background 150ms;
|
|
263
|
-
}
|
|
264
|
-
|
|
265
|
-
.causal-inspector .ci-btn:hover {
|
|
266
|
-
color: var(--ci-text);
|
|
267
|
-
background: rgba(255, 255, 255, 0.05);
|
|
268
|
-
}
|
|
269
|
-
|
|
270
|
-
/* ── Badge (pill) ─────────────────────────────────────────── */
|
|
271
|
-
.causal-inspector .ci-badge {
|
|
272
|
-
display: inline-flex;
|
|
273
|
-
align-items: center;
|
|
274
|
-
gap: 6px;
|
|
275
|
-
padding: 2px 10px;
|
|
276
|
-
border-radius: var(--ci-radius-full);
|
|
277
|
-
font-size: 10px;
|
|
278
|
-
font-family: var(--ci-font-mono);
|
|
279
|
-
border: 1px solid;
|
|
280
|
-
}
|
|
281
|
-
|
|
282
|
-
.causal-inspector .ci-badge--purple {
|
|
283
|
-
background: var(--ci-purple-bg);
|
|
284
|
-
border-color: var(--ci-purple-border);
|
|
285
|
-
color: var(--ci-purple-light);
|
|
286
|
-
}
|
|
287
|
-
|
|
288
|
-
.causal-inspector .ci-badge--teal {
|
|
289
|
-
background: var(--ci-teal-bg);
|
|
290
|
-
border-color: var(--ci-teal-border);
|
|
291
|
-
color: var(--ci-teal);
|
|
292
|
-
}
|
|
293
|
-
|
|
294
|
-
.causal-inspector .ci-badge--red {
|
|
295
|
-
background: var(--ci-red-bg);
|
|
296
|
-
border-color: var(--ci-red-border);
|
|
297
|
-
color: var(--ci-red-dim);
|
|
298
|
-
}
|
|
299
|
-
|
|
300
|
-
/* ── List row (hover highlight) ───────────────────────────── */
|
|
301
|
-
.causal-inspector .ci-list-row {
|
|
302
|
-
transition: background 150ms;
|
|
303
|
-
}
|
|
304
|
-
|
|
305
|
-
.causal-inspector .ci-list-row:hover {
|
|
306
|
-
background: rgba(99, 102, 241, 0.08);
|
|
307
|
-
}
|
|
308
|
-
|
|
309
|
-
/* ── Event row ────────────────────────────────────────────── */
|
|
310
|
-
.causal-inspector .ci-event-row {
|
|
311
|
-
width: 100%;
|
|
312
|
-
text-align: left;
|
|
313
|
-
padding: 8px 12px;
|
|
314
|
-
border-bottom: 1px solid var(--ci-border);
|
|
315
|
-
transition: background 150ms;
|
|
316
|
-
}
|
|
317
|
-
|
|
318
|
-
.causal-inspector .ci-event-row:hover {
|
|
319
|
-
background: rgba(255, 255, 255, 0.02);
|
|
320
|
-
}
|
|
321
|
-
|
|
322
|
-
.causal-inspector .ci-event-row.ci-selected {
|
|
323
|
-
background: var(--ci-bg-selected);
|
|
324
|
-
}
|
|
325
|
-
|
|
326
|
-
.causal-inspector .ci-event-row .ci-copy-btn {
|
|
327
|
-
opacity: 0;
|
|
328
|
-
transition: opacity 150ms;
|
|
329
|
-
}
|
|
330
|
-
|
|
331
|
-
.causal-inspector .ci-event-row:hover .ci-copy-btn {
|
|
332
|
-
opacity: 1;
|
|
333
|
-
}
|
|
334
|
-
|
|
335
|
-
/* ── Tree node ────────────────────────────────────────────── */
|
|
336
|
-
.causal-inspector .ci-tree-node {
|
|
337
|
-
width: 100%;
|
|
338
|
-
text-align: left;
|
|
339
|
-
padding: 6px 8px;
|
|
340
|
-
border-radius: var(--ci-radius-md);
|
|
341
|
-
transition: background 150ms;
|
|
342
|
-
}
|
|
343
|
-
|
|
344
|
-
.causal-inspector .ci-tree-node:hover {
|
|
345
|
-
background: rgba(255, 255, 255, 0.03);
|
|
346
|
-
}
|
|
347
|
-
|
|
348
|
-
.causal-inspector .ci-tree-node.ci-selected {
|
|
349
|
-
background: var(--ci-bg-selected);
|
|
350
|
-
box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.25);
|
|
351
|
-
}
|
|
352
|
-
|
|
353
|
-
.causal-inspector .ci-tree-node .ci-tree-actions {
|
|
354
|
-
opacity: 0;
|
|
355
|
-
transition: opacity 150ms;
|
|
356
|
-
}
|
|
357
|
-
|
|
358
|
-
.causal-inspector .ci-tree-node:hover .ci-tree-actions {
|
|
359
|
-
opacity: 1;
|
|
360
|
-
}
|
|
361
|
-
|
|
362
|
-
/* ── Section header ───────────────────────────────────────── */
|
|
363
|
-
.causal-inspector .ci-header {
|
|
364
|
-
font-size: 10px;
|
|
365
|
-
font-weight: 600;
|
|
366
|
-
color: var(--ci-text-dim);
|
|
367
|
-
text-transform: uppercase;
|
|
368
|
-
letter-spacing: 0.06em;
|
|
369
|
-
}
|
|
370
|
-
|
|
371
|
-
/* ── Skeleton loader ──────────────────────────────────────── */
|
|
372
|
-
.causal-inspector .ci-skeleton {
|
|
373
|
-
background: rgba(255, 255, 255, 0.03);
|
|
374
|
-
border-radius: var(--ci-radius-sm);
|
|
375
|
-
}
|
|
376
|
-
|
|
377
|
-
/* ── Empty state ──────────────────────────────────────────── */
|
|
378
|
-
.causal-inspector .ci-empty {
|
|
379
|
-
display: flex;
|
|
380
|
-
align-items: center;
|
|
381
|
-
justify-content: center;
|
|
382
|
-
height: 100%;
|
|
383
|
-
font-size: 12px;
|
|
384
|
-
color: rgba(112, 112, 138, 0.5);
|
|
385
|
-
letter-spacing: 0.03em;
|
|
386
|
-
}
|
|
387
|
-
|
|
388
|
-
/* ── JSON syntax highlighting ─────────────────────────────── */
|
|
389
|
-
.causal-inspector .ci-json-key { color: #60a5fa; }
|
|
390
|
-
.causal-inspector .ci-json-string { color: #4ade80; }
|
|
391
|
-
.causal-inspector .ci-json-number { color: #fbbf24; }
|
|
392
|
-
.causal-inspector .ci-json-bool { color: #c084fc; }
|
|
393
|
-
.causal-inspector .ci-json-null { color: #71717a; }
|
|
394
|
-
.causal-inspector .ci-json-punct { color: #71717a; }
|
|
395
|
-
|
|
396
|
-
/* ── Log level badges ─────────────────────────────────────── */
|
|
397
|
-
.causal-inspector .ci-log-debug {
|
|
398
|
-
background: rgba(113, 113, 122, 0.2);
|
|
399
|
-
color: #a1a1aa;
|
|
400
|
-
}
|
|
401
|
-
|
|
402
|
-
.causal-inspector .ci-log-info {
|
|
403
|
-
background: rgba(99, 102, 241, 0.15);
|
|
404
|
-
color: #818cf8;
|
|
405
|
-
}
|
|
406
|
-
|
|
407
|
-
.causal-inspector .ci-log-warn {
|
|
408
|
-
background: rgba(245, 158, 11, 0.15);
|
|
409
|
-
color: #fbbf24;
|
|
410
|
-
}
|
|
411
|
-
|
|
412
|
-
.causal-inspector .ci-log-error {
|
|
413
|
-
background: rgba(239, 68, 68, 0.15);
|
|
414
|
-
color: #f87171;
|
|
415
|
-
}
|
|
416
|
-
|
|
417
|
-
/* ── Correlation pill ─────────────────────────────────────── */
|
|
418
|
-
.causal-inspector .ci-corr-pill {
|
|
419
|
-
padding: 2px 6px;
|
|
420
|
-
border-radius: var(--ci-radius-full);
|
|
421
|
-
font-size: 9px;
|
|
422
|
-
font-family: var(--ci-font-mono);
|
|
423
|
-
background: var(--ci-purple-bg);
|
|
424
|
-
color: var(--ci-purple-light);
|
|
425
|
-
border: 1px solid var(--ci-purple-border);
|
|
426
|
-
transition: background 150ms, color 150ms;
|
|
427
|
-
}
|
|
428
|
-
|
|
429
|
-
.causal-inspector .ci-corr-pill:hover {
|
|
430
|
-
background: var(--ci-purple-bg-hover);
|
|
431
|
-
color: var(--ci-purple);
|
|
432
|
-
}
|
|
433
|
-
|
|
434
|
-
/* ── Dropdown (reactor filter, etc.) ──────────────────────── */
|
|
435
|
-
.causal-inspector .ci-dropdown {
|
|
436
|
-
background: rgba(17, 17, 22, 0.95);
|
|
437
|
-
backdrop-filter: blur(12px);
|
|
438
|
-
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
|
|
439
|
-
border: 1px solid var(--ci-border);
|
|
440
|
-
border-radius: var(--ci-radius-lg);
|
|
441
|
-
}
|
|
442
|
-
|
|
443
|
-
/* ── Toolbar button (text) ────────────────────────────────── */
|
|
444
|
-
.causal-inspector .ci-toolbar-btn {
|
|
445
|
-
font-size: 10px;
|
|
446
|
-
color: var(--ci-text-dim);
|
|
447
|
-
padding: 4px 8px;
|
|
448
|
-
border-radius: var(--ci-radius-md);
|
|
449
|
-
border: 1px solid var(--ci-border);
|
|
450
|
-
background: transparent;
|
|
451
|
-
cursor: pointer;
|
|
452
|
-
transition: color 150ms, background 150ms, border-color 150ms;
|
|
453
|
-
}
|
|
454
|
-
|
|
455
|
-
.causal-inspector .ci-toolbar-btn:hover {
|
|
456
|
-
color: var(--ci-text);
|
|
457
|
-
border-color: var(--ci-border-hover);
|
|
458
|
-
}
|
|
459
|
-
|
|
460
|
-
/* ── Payload container ────────────────────────────────────── */
|
|
461
|
-
.causal-inspector .ci-payload {
|
|
462
|
-
padding: 10px;
|
|
463
|
-
font-size: 10px;
|
|
464
|
-
border-radius: var(--ci-radius-md);
|
|
465
|
-
border: 1px solid var(--ci-border);
|
|
466
|
-
overflow: auto;
|
|
467
|
-
white-space: pre-wrap;
|
|
468
|
-
resize: vertical;
|
|
469
|
-
background: rgba(255, 255, 255, 0.015);
|
|
470
|
-
}
|
|
471
|
-
|
|
472
|
-
/* ── Payload floating buttons ─────────────────────────────── */
|
|
473
|
-
.causal-inspector .ci-payload-btn {
|
|
474
|
-
padding: 4px;
|
|
475
|
-
border-radius: var(--ci-radius-md);
|
|
476
|
-
border: 1px solid var(--ci-border);
|
|
477
|
-
background: rgba(10, 10, 15, 0.8);
|
|
478
|
-
backdrop-filter: blur(4px);
|
|
479
|
-
color: var(--ci-text-dimmer);
|
|
480
|
-
cursor: pointer;
|
|
481
|
-
font-size: 10px;
|
|
482
|
-
transition: color 150ms, background 150ms;
|
|
483
|
-
}
|
|
484
|
-
|
|
485
|
-
.causal-inspector .ci-payload-btn:hover {
|
|
486
|
-
color: var(--ci-text-muted);
|
|
487
|
-
background: rgba(255, 255, 255, 0.05);
|
|
488
|
-
}
|
|
489
|
-
|
|
490
|
-
/* ── Modal overlay ────────────────────────────────────────── */
|
|
491
|
-
.causal-inspector .ci-modal-overlay {
|
|
492
|
-
position: fixed;
|
|
493
|
-
inset: 0;
|
|
494
|
-
z-index: 50;
|
|
495
|
-
display: flex;
|
|
496
|
-
align-items: center;
|
|
497
|
-
justify-content: center;
|
|
498
|
-
background: rgba(0, 0, 0, 0.6);
|
|
499
|
-
backdrop-filter: blur(4px);
|
|
500
|
-
}
|
|
501
|
-
|
|
502
|
-
.causal-inspector .ci-modal-content {
|
|
503
|
-
position: relative;
|
|
504
|
-
width: 90vw;
|
|
505
|
-
max-height: 90vh;
|
|
506
|
-
overflow: auto;
|
|
507
|
-
border-radius: 12px;
|
|
508
|
-
border: 1px solid var(--ci-border);
|
|
509
|
-
padding: 20px;
|
|
510
|
-
background: rgba(15, 15, 20, 0.95);
|
|
511
|
-
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
|
|
512
|
-
}
|
|
513
|
-
|
|
514
|
-
/* ── Modal buttons ────────────────────────────────────────── */
|
|
515
|
-
.causal-inspector .ci-modal-btn {
|
|
516
|
-
padding: 6px;
|
|
517
|
-
border-radius: var(--ci-radius-md);
|
|
518
|
-
color: rgba(112, 112, 138, 0.5);
|
|
519
|
-
background: transparent;
|
|
520
|
-
border: none;
|
|
521
|
-
cursor: pointer;
|
|
522
|
-
font-size: 12px;
|
|
523
|
-
transition: color 150ms, background 150ms;
|
|
524
|
-
}
|
|
525
|
-
|
|
526
|
-
.causal-inspector .ci-modal-btn:hover {
|
|
527
|
-
color: var(--ci-text);
|
|
528
|
-
background: rgba(255, 255, 255, 0.05);
|
|
529
|
-
}
|
|
530
|
-
|
|
531
|
-
/* ── Flow selection indicator ─────────────────────────────── */
|
|
532
|
-
.causal-inspector .ci-flow-filter {
|
|
533
|
-
padding: 6px 10px;
|
|
534
|
-
border-radius: var(--ci-radius-md);
|
|
535
|
-
background: rgba(99, 102, 241, 0.08);
|
|
536
|
-
border: 1px solid rgba(99, 102, 241, 0.15);
|
|
537
|
-
font-size: 12px;
|
|
538
|
-
color: var(--ci-accent-text);
|
|
539
|
-
}
|
|
540
|
-
|
|
541
|
-
/* ── Muted bg (skeleton) ──────────────────────────────────── */
|
|
542
|
-
.causal-inspector .ci-muted-bg {
|
|
543
|
-
background: rgba(39, 39, 42, 0.5);
|
|
544
|
-
border-radius: var(--ci-radius-sm);
|
|
545
|
-
}
|
|
546
|
-
|
|
547
|
-
/* ── Error dot indicator ──────────────────────────────────── */
|
|
548
|
-
.causal-inspector .ci-error-dot {
|
|
549
|
-
width: 8px;
|
|
550
|
-
height: 8px;
|
|
551
|
-
border-radius: 50%;
|
|
552
|
-
background: rgba(239, 68, 68, 0.8);
|
|
553
|
-
box-shadow: 0 0 6px rgba(239, 68, 68, 0.3);
|
|
554
|
-
flex-shrink: 0;
|
|
555
|
-
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { SubjectChainMode } from "./types";
|
|
1
2
|
import "./CausalInspector.css";
|
|
2
3
|
export type CausalInspectorProps = {
|
|
3
4
|
/** GraphQL endpoint URL (relative or absolute). Queries POST here, WS connects to {endpoint}/ws */
|
|
@@ -9,5 +10,11 @@ export type CausalInspectorProps = {
|
|
|
9
10
|
};
|
|
10
11
|
/** CSS class for the container */
|
|
11
12
|
className?: string;
|
|
13
|
+
/** Pre-navigate to a specific entity's subject chain on mount */
|
|
14
|
+
initialSubject?: {
|
|
15
|
+
aggregateType: string;
|
|
16
|
+
aggregateId: string;
|
|
17
|
+
mode?: SubjectChainMode;
|
|
18
|
+
};
|
|
12
19
|
};
|
|
13
|
-
export declare function CausalInspector({ endpoint, fetchOptions, className, }: CausalInspectorProps): import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
export declare function CausalInspector({ endpoint, fetchOptions, className, initialSubject, }: CausalInspectorProps): import("react/jsx-runtime").JSX.Element;
|