causal-inspector 0.1.0

package/dist/theme.js

@@ -0,0 +1,34 @@
+/** Deterministic hue from event name — consistent colors across renders. */
+export function eventHue(name) {
+    let hash = 0;
+    for (const ch of name)
+        hash = (hash * 31 + ch.charCodeAt(0)) | 0;
+    return ((hash % 360) + 360) % 360;
+}
+/** Background color blended onto dark background — more saturated. */
+export function eventBg(name) {
+    const h = eventHue(name);
+    const [r, g, b] = hslToRgb(h, 75, 50);
+    const br = 10, bg = 10, bb = 15; // #0a0a0f
+    const a = 0.15;
+    return `rgb(${Math.round(br + (r - br) * a)}, ${Math.round(bg + (g - bg) * a)}, ${Math.round(bb + (b - bb) * a)})`;
+}
+export function eventBorder(name) {
+    return `hsla(${eventHue(name)}, 65%, 55%, 0.5)`;
+}
+export function eventTextColor(name) {
+    return `hsl(${eventHue(name)}, 70%, 70%)`;
+}
+function hslToRgb(h, s, l) {
+    s /= 100;
+    l /= 100;
+    const k = (n) => (n + h / 30) % 12;
+    const a = s * Math.min(l, 1 - l);
+    const f = (n) => l - a * Math.max(-1, Math.min(k(n) - 3, 9 - k(n), 1));
+    return [Math.round(f(0) * 255), Math.round(f(8) * 255), Math.round(f(4) * 255)];
+}
+export const LOG_LEVEL_COLORS = {
+    debug: "bg-zinc-600/20 text-zinc-400",
+    info: "bg-indigo-500/15 text-indigo-400",
+    warn: "bg-amber-500/15 text-amber-400",
+};

package/dist/types.d.ts

@@ -0,0 +1,140 @@
+/** Processed event from the causal inspector backend. */
+export type InspectorEvent = {
+    seq: number;
+    ts: string;
+    type: string;
+    name: string;
+    id: string | null;
+    parentId: string | null;
+    correlationId: string | null;
+    reactorId: string | null;
+    aggregateType: string | null;
+    aggregateId: string | null;
+    streamVersion: number | null;
+    summary: string | null;
+    payload: string;
+};
+export type InspectorEventsPage = {
+    events: InspectorEvent[];
+    nextCursor: number | null;
+};
+export type InspectorCausalTree = {
+    events: InspectorEvent[];
+    rootSeq: number;
+};
+export type InspectorCausalFlow = {
+    events: InspectorEvent[];
+};
+export type ReactorLog = {
+    eventId: string;
+    reactorId: string;
+    level: string;
+    message: string;
+    data: unknown;
+    loggedAt: string;
+};
+/** Structured block within a reactor description (mirrors causal reactor DSL). */
+export type Block = {
+    type: "label";
+    text: string;
+} | {
+    type: "counter";
+    label: string;
+    value: number;
+    total: number;
+} | {
+    type: "progress";
+    label: string;
+    fraction: number;
+} | {
+    type: "checklist";
+    label: string;
+    items: {
+        text: string;
+        done: boolean;
+    }[];
+} | {
+    type: "key_value";
+    key: string;
+    value: string;
+} | {
+    type: "status";
+    label: string;
+    state: "waiting" | "running" | "done" | "error";
+};
+export type ReactorDescription = {
+    reactorId: string;
+    blocks: Block[];
+};
+export type ReactorOutcome = {
+    reactorId: string;
+    status: string;
+    error: string | null;
+    attempts: number;
+    startedAt: string | null;
+    completedAt: string | null;
+    triggeringEventIds: string[];
+};
+export type ReactorDescriptionSnapshot = {
+    seq: number;
+    eventId: string;
+    reactorId: string;
+    blocks: Block[];
+};
+export type AggregateStateEntry = {
+    key: string;
+    state: unknown;
+};
+export type AggregateTimelineEntry = {
+    seq: number;
+    eventId: string;
+    eventType: string;
+    aggregates: AggregateStateEntry[];
+};
+export type ReactorDependency = {
+    reactorId: string;
+    inputEventTypes: string[];
+    outputEventTypes: string[];
+};
+export type AggregateLifecycleEntry = {
+    seq: number;
+    eventId: string;
+    eventType: string;
+    ts: string;
+    correlationId: string;
+    aggregateKey: string;
+    state: unknown;
+};
+export type CorrelationSummary = {
+    correlationId: string;
+    eventCount: number;
+    firstTs: string;
+    lastTs: string;
+    rootEventType: string;
+    hasErrors: boolean;
+};
+export type FilterState = {
+    search: string;
+    from: string | null;
+    to: string | null;
+    correlationId: string | null;
+    aggregateKey: string | null;
+};
+export type LogsFilter = {
+    scope: "reactor" | "correlation";
+    reactorId: string | null;
+    correlationId: string | null;
+};
+export type FlowSelection = {
+    kind: "event-type";
+    name: string;
+} | {
+    kind: "reactor";
+    reactorId: string;
+} | null;
+/**
+ * Serialized pane layout — opaque JSON structure stored in state.
+ * Consumers (e.g. flexlayout-react) interpret this; the inspector
+ * just stores and round-trips it.
+ */
+export type PaneLayout = Record<string, unknown>;

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils.d.ts

@@ -0,0 +1,14 @@
+import type { InspectorState } from "./state";
+import type { InspectorEvent } from "./types";
+/** Check if a seq falls within the scrubber range. */
+export declare function inScrubberRange(seq: number, start: number | null, end: number | null): boolean;
+/** Derive the walkable seq list based on current context (flow, selection, or global). */
+export declare function getScrubberSequence(state: InspectorState): number[];
+/** Format a timestamp for compact display. */
+export declare function formatTs(ts: string): string;
+/** Compact JSON payload for inline display. */
+export declare function compactPayload(raw: string, maxLen?: number): string;
+/** Composite aggregate key from event fields, or null. */
+export declare function aggregateKey(event: InspectorEvent): string | null;
+/** Copy text to clipboard with fallback for older browsers. */
+export declare function copyToClipboard(text: string): Promise<void>;

package/dist/utils.js

@@ -0,0 +1,91 @@
+/** Check if a seq falls within the scrubber range. */
+export function inScrubberRange(seq, start, end) {
+    if (start != null && seq < start)
+        return false;
+    if (end != null && seq > end)
+        return false;
+    return true;
+}
+/** Derive the walkable seq list based on current context (flow, selection, or global). */
+export function getScrubberSequence(state) {
+    let events;
+    if (state.flowCorrelationId) {
+        events = state.flowData;
+        const sel = state.flowSelection;
+        if (sel) {
+            if (sel.kind === "event-type") {
+                events = events.filter(e => e.name === sel.name);
+            }
+            else {
+                events = events.filter(e => e.reactorId === sel.reactorId);
+            }
+        }
+    }
+    else {
+        events = state.events;
+    }
+    return events.map(e => e.seq).sort((a, b) => a - b);
+}
+/** Format a timestamp for compact display. */
+export function formatTs(ts) {
+    return new Date(ts).toLocaleString(undefined, {
+        month: "short",
+        day: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+    });
+}
+/** Compact JSON payload for inline display. */
+export function compactPayload(raw, maxLen = 200) {
+    try {
+        const obj = JSON.parse(raw);
+        if (typeof obj !== "object" || obj === null)
+            return raw.slice(0, maxLen);
+        const entries = Object.entries(obj).filter(([k]) => k !== "type");
+        if (entries.length === 0)
+            return "{}";
+        const parts = [];
+        let len = 2;
+        for (const [k, v] of entries) {
+            const val = typeof v === "string"
+                ? v.length > 60
+                    ? `"${v.slice(0, 57)}..."`
+                    : `"${v}"`
+                : JSON.stringify(v);
+            const part = `${k}: ${val}`;
+            if (len + part.length + 2 > maxLen) {
+                parts.push("...");
+                break;
+            }
+            parts.push(part);
+            len += part.length + 2;
+        }
+        return `{ ${parts.join(", ")} }`;
+    }
+    catch {
+        return raw.slice(0, maxLen);
+    }
+}
+/** Composite aggregate key from event fields, or null. */
+export function aggregateKey(event) {
+    return event.aggregateType && event.aggregateId
+        ? `${event.aggregateType}:${event.aggregateId}`
+        : null;
+}
+/** Copy text to clipboard with fallback for older browsers. */
+export async function copyToClipboard(text) {
+    try {
+        await navigator.clipboard.writeText(text);
+    }
+    catch {
+        const ta = document.createElement("textarea");
+        ta.value = text;
+        ta.style.position = "fixed";
+        ta.style.opacity = "0";
+        document.body.appendChild(ta);
+        ta.select();
+        document.execCommand("copy");
+        document.body.removeChild(ta);
+    }
+}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "causal-inspector",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": ["dist"],
+  "scripts": {
+    "build": "tsc && cp src/*.css dist/",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "graphql-ws": "^6.0.0",
+    "immer": "^10.0.0",
+    "lucide-react": "^0.575.0"
+  },
+  "peerDependencies": {
+    "@dagrejs/dagre": "^1.0.0",
+    "@xyflow/react": "^12.0.0",
+    "flexlayout-react": ">=0.7.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@xyflow/react": {
+      "optional": true
+    },
+    "@dagrejs/dagre": {
+      "optional": true
+    },
+    "flexlayout-react": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@dagrejs/dagre": "^2.0.4",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.2.3",
+    "@xyflow/react": "^12.10.1",
+    "flexlayout-react": "^0.8.19",
+    "typescript": "^5.0.0"
+  }
+}