causal-inspector 0.1.6 → 0.2.0

package/dist/CausalInspector.css

@@ -1,70 +1,15 @@
 /* ── CausalInspector scoped styles ───────────────────────────── */
 
 .causal-inspector {
-  /* ── Surface ──────────────────── */
-  --ci-bg:              #0a0a0f;
-  --ci-bg-subtle:       rgba(15, 15, 20, 0.6);
-  --ci-bg-panel:        rgba(15, 15, 20, 0.8);
-  --ci-bg-hover:        rgba(255, 255, 255, 0.04);
-  --ci-bg-active:       rgba(99, 102, 241, 0.12);
-  --ci-bg-selected:     rgba(99, 102, 241, 0.15);
-
-  /* ── Text ─────────────────────── */
-  --ci-text:            #e0e0f0;
-  --ci-text-muted:      #70708a;
-  --ci-text-dim:        rgba(112, 112, 138, 0.6);
-  --ci-text-dimmer:     rgba(112, 112, 138, 0.4);
-  --ci-text-accent:     #c7c7ff;
-
-  /* ── Borders ──────────────────── */
-  --ci-border:          rgba(255, 255, 255, 0.06);
-  --ci-border-hover:    rgba(99, 102, 241, 0.3);
-
-  /* ── Accent (indigo) ──────────── */
-  --ci-accent:          #6366f1;
-  --ci-accent-muted:    rgba(99, 102, 241, 0.15);
-  --ci-accent-glow:     rgba(99, 102, 241, 0.4);
-  --ci-accent-text:     #818cf8;
-
-  /* ── Semantic: purple (correlation) */
-  --ci-purple:          #a78bfa;
-  --ci-purple-light:    rgba(168, 85, 247, 0.8);
-  --ci-purple-dim:      rgba(168, 85, 247, 0.7);
-  --ci-purple-bg:       rgba(168, 85, 247, 0.08);
-  --ci-purple-bg-hover: rgba(168, 85, 247, 0.15);
-  --ci-purple-border:   rgba(168, 85, 247, 0.1);
-  --ci-purple-border-alt: rgba(168, 85, 247, 0.2);
-
-  /* ── Semantic: teal (aggregate) ── */
-  --ci-teal:            #2dd4bf;
-  --ci-teal-bg:         rgba(20, 184, 166, 0.1);
-  --ci-teal-border:     rgba(20, 184, 166, 0.2);
-
-  /* ── Semantic: red (error) ────── */
-  --ci-red:             #f87171;
-  --ci-red-dim:         rgba(248, 113, 113, 0.8);
-  --ci-red-bg:          rgba(239, 68, 68, 0.1);
-  --ci-red-border:      rgba(239, 68, 68, 0.2);
-
-  /* ── Sizing ───────────────────── */
-  --ci-radius-sm:       4px;
-  --ci-radius-md:       6px;
-  --ci-radius-lg:       8px;
-  --ci-radius-full:     9999px;
-
-  /* ── Typography ───────────────── */
-  --ci-font-mono:       ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
-  --ci-font-sans:       -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
-
   height: 100%;
   width: 100%;
   overflow: hidden;
   position: relative;
   display: flex;
   flex-direction: column;
-  background: var(--ci-bg);
-  color: var(--ci-text);
-  font-family: var(--ci-font-sans);
+  background: #0a0a0f;
+  color: #e0e0f0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -91,23 +36,23 @@
   background-image: none;
 }
 .causal-inspector .flexlayout__tabset_tabbar_outer {
-  background: var(--ci-bg-panel) !important;
+  background: rgba(15, 15, 20, 0.8) !important;
   backdrop-filter: blur(12px) !important;
-  border-bottom: 1px solid var(--ci-border) !important;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
 }
 .causal-inspector .flexlayout__tab_button--selected {
-  background: var(--ci-bg-active) !important;
-  color: var(--ci-text-accent) !important;
+  background: rgba(99, 102, 241, 0.12) !important;
+  color: #c7c7ff !important;
 }
 .causal-inspector .flexlayout__tab_button {
-  color: var(--ci-text-muted) !important;
+  color: #70708a !important;
   font-size: 11px !important;
   letter-spacing: 0.02em !important;
   transition: color 150ms, background 150ms !important;
 }
 .causal-inspector .flexlayout__tab_button:hover {
   color: #b0b0c0 !important;
-  background: var(--ci-bg-hover) !important;
+  background: rgba(255, 255, 255, 0.04) !important;
 }
 .causal-inspector .flexlayout__splitter {
   background: rgba(255, 255, 255, 0.03) !important;
@@ -116,7 +61,7 @@
   background: rgba(99, 102, 241, 0.2) !important;
 }
 .causal-inspector .flexlayout__splitter_drag {
-  background: var(--ci-border-hover) !important;
+  background: rgba(99, 102, 241, 0.3) !important;
 }
 
 /* ── Flow diagram ─────────────────────────────────────────── */
@@ -130,24 +75,24 @@
 .causal-inspector .react-flow__controls {
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
   border: 1px solid rgba(255, 255, 255, 0.08) !important;
-  border-radius: var(--ci-radius-lg) !important;
+  border-radius: 8px !important;
   overflow: hidden !important;
 }
 .causal-inspector .react-flow__controls-button {
   background: rgba(15, 15, 20, 0.9) !important;
-  border-bottom: 1px solid var(--ci-border) !important;
-  fill: var(--ci-text-muted) !important;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
+  fill: #70708a !important;
 }
 .causal-inspector .react-flow__controls-button:hover {
-  background: var(--ci-accent-muted) !important;
-  fill: var(--ci-text-accent) !important;
+  background: rgba(99, 102, 241, 0.15) !important;
+  fill: #c7c7ff !important;
 }
 
 /* ── Selection ring ───────────────────────────────────────── */
 .causal-inspector *:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 2px var(--ci-accent-glow);
-  border-radius: var(--ci-radius-sm);
+  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.4);
+  border-radius: 4px;
 }
 
 /* ── Range input ──────────────────────────────────────────── */
@@ -163,16 +108,16 @@
   width: 12px;
   height: 12px;
   border-radius: 50%;
-  background: var(--ci-accent);
+  background: #6366f1;
   cursor: pointer;
-  box-shadow: 0 0 6px var(--ci-accent-glow);
+  box-shadow: 0 0 6px rgba(99, 102, 241, 0.4);
   transition: transform 100ms;
 }
 .causal-inspector input[type="range"]::-webkit-slider-thumb:hover {
   transform: scale(1.2);
 }
 
-/* ── Animations ───────────────────────────────────────────── */
+/* ── Pulse animation for running reactors ─────────────────── */
 @keyframes causal-inspector-pulse {
   0%, 100% { opacity: 1; }
   50% { opacity: 0.7; }
@@ -181,375 +126,3 @@
   0%, 100% { box-shadow: 0 0 4px rgba(99, 102, 241, 0.2); }
   50% { box-shadow: 0 0 12px rgba(99, 102, 241, 0.4); }
 }
-
-.causal-inspector .ci-pulse {
-  animation: causal-inspector-pulse 2s ease-in-out infinite;
-}
-
-/* ── Layout utilities ─────────────────────────────────────── */
-.causal-inspector .ci-col {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.causal-inspector .ci-row {
-  display: flex;
-  align-items: center;
-}
-
-.causal-inspector .ci-scroll {
-  flex: 1;
-  overflow-y: auto;
-}
-
-.causal-inspector .ci-truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.causal-inspector .ci-mono {
-  font-family: var(--ci-font-mono);
-}
-
-.causal-inspector .ci-tabular {
-  font-variant-numeric: tabular-nums;
-}
-
-/* ── Surface (panel header / toolbar) ─────────────────────── */
-.causal-inspector .ci-surface {
-  background: var(--ci-bg-subtle);
-  backdrop-filter: blur(8px);
-}
-
-/* ── Dividers ─────────────────────────────────────────────── */
-.causal-inspector .ci-divider-h {
-  width: 1px;
-  height: 16px;
-  background: var(--ci-border);
-  flex-shrink: 0;
-}
-
-/* ── Input ────────────────────────────────────────────────── */
-.causal-inspector .ci-input {
-  font-size: 12px;
-  border-radius: var(--ci-radius-md);
-  background: rgba(255, 255, 255, 0.025);
-  border: 1px solid var(--ci-border);
-  color: var(--ci-text);
-  transition: border-color 150ms, box-shadow 150ms;
-}
-
-.causal-inspector .ci-input::placeholder {
-  color: var(--ci-text-dimmer);
-}
-
-.causal-inspector .ci-input:focus {
-  outline: none;
-  box-shadow: 0 0 0 1px var(--ci-accent-glow);
-  border-color: var(--ci-border-hover);
-}
-
-/* ── Button (icon) ────────────────────────────────────────── */
-.causal-inspector .ci-btn {
-  padding: 4px;
-  border-radius: var(--ci-radius-md);
-  color: var(--ci-text-dim);
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  transition: color 150ms, background 150ms;
-}
-
-.causal-inspector .ci-btn:hover {
-  color: var(--ci-text);
-  background: rgba(255, 255, 255, 0.05);
-}
-
-/* ── Badge (pill) ─────────────────────────────────────────── */
-.causal-inspector .ci-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 2px 10px;
-  border-radius: var(--ci-radius-full);
-  font-size: 10px;
-  font-family: var(--ci-font-mono);
-  border: 1px solid;
-}
-
-.causal-inspector .ci-badge--purple {
-  background: var(--ci-purple-bg);
-  border-color: var(--ci-purple-border);
-  color: var(--ci-purple-light);
-}
-
-.causal-inspector .ci-badge--teal {
-  background: var(--ci-teal-bg);
-  border-color: var(--ci-teal-border);
-  color: var(--ci-teal);
-}
-
-.causal-inspector .ci-badge--red {
-  background: var(--ci-red-bg);
-  border-color: var(--ci-red-border);
-  color: var(--ci-red-dim);
-}
-
-/* ── List row (hover highlight) ───────────────────────────── */
-.causal-inspector .ci-list-row {
-  transition: background 150ms;
-}
-
-.causal-inspector .ci-list-row:hover {
-  background: rgba(99, 102, 241, 0.08);
-}
-
-/* ── Event row ────────────────────────────────────────────── */
-.causal-inspector .ci-event-row {
-  width: 100%;
-  text-align: left;
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--ci-border);
-  transition: background 150ms;
-}
-
-.causal-inspector .ci-event-row:hover {
-  background: rgba(255, 255, 255, 0.02);
-}
-
-.causal-inspector .ci-event-row.ci-selected {
-  background: var(--ci-bg-selected);
-}
-
-.causal-inspector .ci-event-row .ci-copy-btn {
-  opacity: 0;
-  transition: opacity 150ms;
-}
-
-.causal-inspector .ci-event-row:hover .ci-copy-btn {
-  opacity: 1;
-}
-
-/* ── Tree node ────────────────────────────────────────────── */
-.causal-inspector .ci-tree-node {
-  width: 100%;
-  text-align: left;
-  padding: 6px 8px;
-  border-radius: var(--ci-radius-md);
-  transition: background 150ms;
-}
-
-.causal-inspector .ci-tree-node:hover {
-  background: rgba(255, 255, 255, 0.03);
-}
-
-.causal-inspector .ci-tree-node.ci-selected {
-  background: var(--ci-bg-selected);
-  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.25);
-}
-
-.causal-inspector .ci-tree-node .ci-tree-actions {
-  opacity: 0;
-  transition: opacity 150ms;
-}
-
-.causal-inspector .ci-tree-node:hover .ci-tree-actions {
-  opacity: 1;
-}
-
-/* ── Section header ───────────────────────────────────────── */
-.causal-inspector .ci-header {
-  font-size: 10px;
-  font-weight: 600;
-  color: var(--ci-text-dim);
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-}
-
-/* ── Skeleton loader ──────────────────────────────────────── */
-.causal-inspector .ci-skeleton {
-  background: rgba(255, 255, 255, 0.03);
-  border-radius: var(--ci-radius-sm);
-}
-
-/* ── Empty state ──────────────────────────────────────────── */
-.causal-inspector .ci-empty {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  font-size: 12px;
-  color: rgba(112, 112, 138, 0.5);
-  letter-spacing: 0.03em;
-}
-
-/* ── JSON syntax highlighting ─────────────────────────────── */
-.causal-inspector .ci-json-key    { color: #60a5fa; }
-.causal-inspector .ci-json-string { color: #4ade80; }
-.causal-inspector .ci-json-number { color: #fbbf24; }
-.causal-inspector .ci-json-bool   { color: #c084fc; }
-.causal-inspector .ci-json-null   { color: #71717a; }
-.causal-inspector .ci-json-punct  { color: #71717a; }
-
-/* ── Log level badges ─────────────────────────────────────── */
-.causal-inspector .ci-log-debug {
-  background: rgba(113, 113, 122, 0.2);
-  color: #a1a1aa;
-}
-
-.causal-inspector .ci-log-info {
-  background: rgba(99, 102, 241, 0.15);
-  color: #818cf8;
-}
-
-.causal-inspector .ci-log-warn {
-  background: rgba(245, 158, 11, 0.15);
-  color: #fbbf24;
-}
-
-.causal-inspector .ci-log-error {
-  background: rgba(239, 68, 68, 0.15);
-  color: #f87171;
-}
-
-/* ── Correlation pill ─────────────────────────────────────── */
-.causal-inspector .ci-corr-pill {
-  padding: 2px 6px;
-  border-radius: var(--ci-radius-full);
-  font-size: 9px;
-  font-family: var(--ci-font-mono);
-  background: var(--ci-purple-bg);
-  color: var(--ci-purple-light);
-  border: 1px solid var(--ci-purple-border);
-  transition: background 150ms, color 150ms;
-}
-
-.causal-inspector .ci-corr-pill:hover {
-  background: var(--ci-purple-bg-hover);
-  color: var(--ci-purple);
-}
-
-/* ── Dropdown (reactor filter, etc.) ──────────────────────── */
-.causal-inspector .ci-dropdown {
-  background: rgba(17, 17, 22, 0.95);
-  backdrop-filter: blur(12px);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
-  border: 1px solid var(--ci-border);
-  border-radius: var(--ci-radius-lg);
-}
-
-/* ── Toolbar button (text) ────────────────────────────────── */
-.causal-inspector .ci-toolbar-btn {
-  font-size: 10px;
-  color: var(--ci-text-dim);
-  padding: 4px 8px;
-  border-radius: var(--ci-radius-md);
-  border: 1px solid var(--ci-border);
-  background: transparent;
-  cursor: pointer;
-  transition: color 150ms, background 150ms, border-color 150ms;
-}
-
-.causal-inspector .ci-toolbar-btn:hover {
-  color: var(--ci-text);
-  border-color: var(--ci-border-hover);
-}
-
-/* ── Payload container ────────────────────────────────────── */
-.causal-inspector .ci-payload {
-  padding: 10px;
-  font-size: 10px;
-  border-radius: var(--ci-radius-md);
-  border: 1px solid var(--ci-border);
-  overflow: auto;
-  white-space: pre-wrap;
-  resize: vertical;
-  background: rgba(255, 255, 255, 0.015);
-}
-
-/* ── Payload floating buttons ─────────────────────────────── */
-.causal-inspector .ci-payload-btn {
-  padding: 4px;
-  border-radius: var(--ci-radius-md);
-  border: 1px solid var(--ci-border);
-  background: rgba(10, 10, 15, 0.8);
-  backdrop-filter: blur(4px);
-  color: var(--ci-text-dimmer);
-  cursor: pointer;
-  font-size: 10px;
-  transition: color 150ms, background 150ms;
-}
-
-.causal-inspector .ci-payload-btn:hover {
-  color: var(--ci-text-muted);
-  background: rgba(255, 255, 255, 0.05);
-}
-
-/* ── Modal overlay ────────────────────────────────────────── */
-.causal-inspector .ci-modal-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 50;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: rgba(0, 0, 0, 0.6);
-  backdrop-filter: blur(4px);
-}
-
-.causal-inspector .ci-modal-content {
-  position: relative;
-  width: 90vw;
-  max-height: 90vh;
-  overflow: auto;
-  border-radius: 12px;
-  border: 1px solid var(--ci-border);
-  padding: 20px;
-  background: rgba(15, 15, 20, 0.95);
-  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
-}
-
-/* ── Modal buttons ────────────────────────────────────────── */
-.causal-inspector .ci-modal-btn {
-  padding: 6px;
-  border-radius: var(--ci-radius-md);
-  color: rgba(112, 112, 138, 0.5);
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  font-size: 12px;
-  transition: color 150ms, background 150ms;
-}
-
-.causal-inspector .ci-modal-btn:hover {
-  color: var(--ci-text);
-  background: rgba(255, 255, 255, 0.05);
-}
-
-/* ── Flow selection indicator ─────────────────────────────── */
-.causal-inspector .ci-flow-filter {
-  padding: 6px 10px;
-  border-radius: var(--ci-radius-md);
-  background: rgba(99, 102, 241, 0.08);
-  border: 1px solid rgba(99, 102, 241, 0.15);
-  font-size: 12px;
-  color: var(--ci-accent-text);
-}
-
-/* ── Muted bg (skeleton) ──────────────────────────────────── */
-.causal-inspector .ci-muted-bg {
-  background: rgba(39, 39, 42, 0.5);
-  border-radius: var(--ci-radius-sm);
-}
-
-/* ── Error dot indicator ──────────────────────────────────── */
-.causal-inspector .ci-error-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: rgba(239, 68, 68, 0.8);
-  box-shadow: 0 0 6px rgba(239, 68, 68, 0.3);
-  flex-shrink: 0;
-}

package/dist/CausalInspector.d.ts

@@ -1,3 +1,4 @@
+import type { SubjectChainMode } from "./types";
 import "./CausalInspector.css";
 export type CausalInspectorProps = {
     /** GraphQL endpoint URL (relative or absolute). Queries POST here, WS connects to {endpoint}/ws */
@@ -9,5 +10,11 @@ export type CausalInspectorProps = {
     };
     /** CSS class for the container */
     className?: string;
+    /** Pre-navigate to a specific entity's subject chain on mount */
+    initialSubject?: {
+        aggregateType: string;
+        aggregateId: string;
+        mode?: SubjectChainMode;
+    };
 };
-export declare function CausalInspector({ endpoint, fetchOptions, className, }: CausalInspectorProps): import("react/jsx-runtime").JSX.Element;
+export declare function CausalInspector({ endpoint, fetchOptions, className, initialSubject, }: CausalInspectorProps): import("react/jsx-runtime").JSX.Element;

package/dist/CausalInspector.js

@@ -8,11 +8,12 @@ import { createInspectorEngine } from "./engines";
 import { useSelector, useDispatch } from "./machine";
 import { TimelinePane } from "./panes/TimelinePane";
 import { CausalTreePane } from "./panes/CausalTreePane";
+import { SubjectChainPane } from "./panes/SubjectChainPane";
 import { CausalFlowPane } from "./panes/CausalFlowPane";
 import { LogsPane } from "./panes/LogsPane";
 import { AggregateTimelinePane } from "./panes/AggregateTimelinePane";
 import { WaterfallPane } from "./panes/WaterfallPane";
-import { CorrelationExplorerPane } from "./panes/CorrelationExplorerPane";
+import { WorkflowExplorerPane } from "./panes/WorkflowExplorerPane";
 import { GlobalScrubber } from "./components/GlobalScrubber";
 import "./CausalInspector.css";
 // ── Transport ─────────────────────────────────────────────────
@@ -139,9 +140,14 @@ const PANE_REGISTRY = [
         render: () => _jsx(WaterfallPane, {}),
     },
     {
-        name: "Correlations",
-        component: "correlations",
-        render: () => _jsx(CorrelationExplorerPane, {}),
+        name: "Workflows",
+        component: "workflows",
+        render: () => _jsx(WorkflowExplorerPane, {}),
+    },
+    {
+        name: "Subject Chain",
+        component: "subject-chain",
+        render: () => _jsx(SubjectChainPane, {}),
     },
 ];
 // ── Helpers ───────────────────────────────────────────────────
@@ -158,8 +164,9 @@ function findTab(model, component) {
 // ── InspectorLayout (inner component) ─────────────────────────
 function InspectorLayout() {
     const paneLayout = useSelector((s) => s.paneLayout);
-    const flowCorrelationId = useSelector((s) => s.flowCorrelationId);
+    const flowWorkflowId = useSelector((s) => s.flowWorkflowId);
     const selectedSeq = useSelector((s) => s.selectedSeq);
+    const subjectType = useSelector((s) => s.subjectType);
     const dispatch = useDispatch();
     const modelRef = useRef(null);
     if (!modelRef.current) {
@@ -189,9 +196,13 @@ function InspectorLayout() {
             addTab("causal-tree", "Causal Tree");
     }, [selectedSeq, addTab]);
     useEffect(() => {
-        if (flowCorrelationId)
+        if (flowWorkflowId)
             addTab("causal-flow", "Flow");
-    }, [flowCorrelationId, addTab]);
+    }, [flowWorkflowId, addTab]);
+    useEffect(() => {
+        if (subjectType)
+            addTab("subject-chain", "Subject Chain");
+    }, [subjectType, addTab]);
     const factory = useCallback((node) => {
         const component = node.getComponent();
         const pane = PANE_REGISTRY.find((p) => p.component === component);
@@ -249,10 +260,22 @@ function InspectorLayout() {
 }
 // ── CausalInspector (public API) ──────────────────────────────
 const savedLayout = loadSavedLayout();
-export function CausalInspector({ endpoint, fetchOptions, className, }) {
+export function CausalInspector({ endpoint, fetchOptions, className, initialSubject, }) {
     const transport = useMemo(() => createTransport(endpoint, fetchOptions), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [endpoint]);
     const createEngine = useMemo(() => createInspectorEngine(transport, storage), [transport]);
-    return (_jsx("div", { className: `causal-inspector${className ? ` ${className}` : ""}`, children: _jsx(CausalInspectorProvider, { createEngine: createEngine, initialState: savedLayout ? { paneLayout: savedLayout } : undefined, children: _jsx(InspectorLayout, {}) }) }));
+    const initialState = useMemo(() => {
+        const base = savedLayout ? { paneLayout: savedLayout } : undefined;
+        if (!initialSubject)
+            return base;
+        return {
+            ...base,
+            subjectType: initialSubject.aggregateType,
+            subjectId: initialSubject.aggregateId,
+            subjectMode: initialSubject.mode ?? "both",
+            subjectChainLoading: true,
+        };
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    return (_jsx("div", { className: `causal-inspector${className ? ` ${className}` : ""}`, children: _jsx(CausalInspectorProvider, { createEngine: createEngine, initialState: initialState, children: _jsx(InspectorLayout, {}) }) }));
 }

package/dist/components/CopyablePayload.js

@@ -22,23 +22,23 @@ function PayloadModal({ formatted, onClose, }) {
         document.addEventListener("keydown", handleKey);
         return () => document.removeEventListener("keydown", handleKey);
     }, [onClose]);
-    return createPortal(_jsx("div", { className: "causal-inspector", children: _jsx("div", { className: "ci-modal-overlay", onClick: onClose, children: _jsxs("div", { className: "ci-modal-content", onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { style: { position: "absolute", top: 12, right: 12, display: "flex", gap: 4 }, children: [_jsx("button", { onClick: async () => {
-                                    await copyToClipboard(formatted);
-                                    setCopied(true);
-                                    setTimeout(() => setCopied(false), 1500);
-                                }, className: "ci-modal-btn", title: "Copy payload", children: copied ? _jsx(Check, { size: 14 }) : _jsx(Copy, { size: 14 }) }), _jsx("button", { onClick: onClose, className: "ci-modal-btn", title: "Close", children: _jsx(X, { size: 14 }) })] }), _jsx("pre", { style: { fontSize: 12, whiteSpace: "pre-wrap" }, children: _jsx(JsonSyntax, { json: formatted }) })] }) }) }), document.body);
+    return createPortal(_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center", style: { background: "rgba(0, 0, 0, 0.6)", backdropFilter: "blur(4px)" }, onClick: onClose, children: _jsxs("div", { className: "relative w-[90vw] max-h-[90vh] overflow-auto rounded-xl border border-border p-5", style: { background: "rgba(15, 15, 20, 0.95)", boxShadow: "0 24px 64px rgba(0, 0, 0, 0.5)" }, onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "absolute top-3 right-3 flex gap-1", children: [_jsx("button", { onClick: async () => {
+                                await copyToClipboard(formatted);
+                                setCopied(true);
+                                setTimeout(() => setCopied(false), 1500);
+                            }, className: "p-1.5 rounded-md hover:bg-white/[0.05] transition-colors text-xs text-muted-foreground/50 hover:text-foreground", title: "Copy payload", children: copied ? _jsx(Check, { size: 14 }) : _jsx(Copy, { size: 14 }) }), _jsx("button", { onClick: onClose, className: "p-1.5 rounded-md hover:bg-white/[0.05] transition-colors text-xs text-muted-foreground/50 hover:text-foreground", title: "Close", children: _jsx(X, { size: 14 }) })] }), _jsx("pre", { className: "text-xs whitespace-pre-wrap", children: _jsx(JsonSyntax, { json: formatted }) })] }) }), document.body);
 }
 export function CopyablePayload({ payload, className = "", }) {
     const [copied, setCopied] = useState(false);
     const [modalOpen, setModalOpen] = useState(false);
     const formatted = formatPayload(payload);
-    return (_jsxs("div", { style: { position: "relative" }, className: className, children: [_jsx("pre", { className: "ci-payload", style: { minHeight: 96, maxHeight: "80vh" }, children: _jsx(JsonSyntax, { json: formatted }) }), _jsxs("div", { style: { position: "absolute", top: 8, right: 8, zIndex: 10, display: "flex", gap: 4 }, children: [_jsx("button", { onClick: (e) => {
+    return (_jsxs("div", { className: `relative ${className}`, children: [_jsx("pre", { className: "p-2.5 text-[10px] rounded-md border border-border overflow-auto whitespace-pre-wrap resize-y min-h-24 max-h-[80vh]", style: { background: "rgba(255, 255, 255, 0.015)" }, children: _jsx(JsonSyntax, { json: formatted }) }), _jsxs("div", { className: "absolute top-2 right-2 z-10 flex gap-1", children: [_jsx("button", { onClick: (e) => {
                             e.stopPropagation();
                             setModalOpen(true);
-                        }, className: "ci-payload-btn", title: "Expand", children: _jsx(Maximize2, { size: 12 }) }), _jsx("button", { onClick: async (e) => {
+                        }, className: "p-1 rounded-md border border-border hover:bg-white/[0.05] transition-all text-[10px] text-muted-foreground/40 hover:text-muted-foreground", style: { background: "rgba(10, 10, 15, 0.8)", backdropFilter: "blur(4px)" }, title: "Expand", children: _jsx(Maximize2, { size: 12 }) }), _jsx("button", { onClick: async (e) => {
                             e.stopPropagation();
                             await copyToClipboard(formatted);
                             setCopied(true);
                             setTimeout(() => setCopied(false), 1500);
-                        }, className: "ci-payload-btn", title: "Copy", children: copied ? _jsx(Check, { size: 12 }) : _jsx(Copy, { size: 12 }) })] }), modalOpen && (_jsx(PayloadModal, { formatted: formatted, onClose: () => setModalOpen(false) }))] }));
+                        }, className: "p-1 rounded-md border border-border hover:bg-white/[0.05] transition-all text-[10px] text-muted-foreground/40 hover:text-muted-foreground", style: { background: "rgba(10, 10, 15, 0.8)", backdropFilter: "blur(4px)" }, title: "Copy", children: copied ? _jsx(Check, { size: 12 }) : _jsx(Copy, { size: 12 }) })] }), modalOpen && (_jsx(PayloadModal, { formatted: formatted, onClose: () => setModalOpen(false) }))] }));
 }

package/dist/components/EffectList.d.ts

@@ -0,0 +1,4 @@
+import type { InspectorEffect } from "../types";
+export declare function EffectList({ effects }: {
+    effects: InspectorEffect[];
+}): import("react/jsx-runtime").JSX.Element;