@coreason-ai/sensory-core 1.3.0 → 1.5.0

package/dist/components/SpeculativeTreeRenderer.js

@@ -0,0 +1,202 @@
+// Copyright (c) 2026 CoReason, Inc
+//
+// This software is proprietary and dual-licensed
+// Licensed under the Prosperity Public License 3.0 (the "License")
+// A copy of the license is available at <https://prosperitylicense.com/versions/3.0.0>
+// For details, see the LICENSE file
+// Commercial use beyond a 30-day trial requires a separate license
+//
+// Source Code: <https://github.com/CoReason-AI/coreason-sensory-core>
+import React, { useState, useEffect, useRef } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { GlassBox } from './GlassBox';
+/**
+ * Computes horizontal tree layout using post-order positioning.
+ */
+function computeTreeLayout(node, depth = 0, layoutState = { nextLeafY: 0 }, xSpacing = 170, ySpacing = 65) {
+    const x = depth * xSpacing + 70;
+    if (!node.childSpeculations || node.childSpeculations.length === 0) {
+        const y = layoutState.nextLeafY * ySpacing + 60;
+        layoutState.nextLeafY += 1;
+        return {
+            tokenId: node.tokenId,
+            tokenValue: node.tokenValue,
+            logitProbability: node.logitProbability,
+            validationStatus: node.validationStatus,
+            x,
+            y,
+            children: [],
+        };
+    }
+    const children = node.childSpeculations.map((child) => computeTreeLayout(child, depth + 1, layoutState, xSpacing, ySpacing));
+    const sumY = children.reduce((sum, child) => sum + child.y, 0);
+    const y = sumY / children.length;
+    return {
+        tokenId: node.tokenId,
+        tokenValue: node.tokenValue,
+        logitProbability: node.logitProbability,
+        validationStatus: node.validationStatus,
+        x,
+        y,
+        children,
+    };
+}
+/**
+ * Traverses the computed layout tree to gather all node and connection information.
+ */
+function collectLayoutEntities(node, accumulatedNodes = [], accumulatedEdges = []) {
+    accumulatedNodes.push(node);
+    for (const child of node.children) {
+        accumulatedEdges.push({
+            parentId: node.tokenId,
+            childId: child.tokenId,
+            x1: node.x,
+            y1: node.y,
+            x2: child.x,
+            y2: child.y,
+            status: child.validationStatus,
+        });
+        collectLayoutEntities(child, accumulatedNodes, accumulatedEdges);
+    }
+    return { nodes: accumulatedNodes, edges: accumulatedEdges };
+}
+/**
+ * SpeculativeTreeRenderer
+ *
+ * Target Persona: Systems Engineer / Operational Intelligencer
+ * Concept: System 1 / Speculative Decoding telemetry projection.
+ * Projects real-time speculative logit draft token proposals, visual decay,
+ * and target model validation status in a cybernetic tree diagram.
+ */
+export const SpeculativeTreeRenderer = ({ tokenTree, onTokenFocus, className, }) => {
+    const [particles, setParticles] = useState([]);
+    const [hoveredToken, setHoveredToken] = useState(null);
+    // Track triggered rejections to prevent double-spawning particles
+    const processedRejectionsRef = useRef(new Set());
+    // Compute layout structures
+    const layoutRoot = computeTreeLayout(tokenTree);
+    const { nodes: layoutNodes, edges: layoutEdges } = collectLayoutEntities(layoutRoot);
+    // Determine viewport boundary limits
+    const maxX = Math.max(...layoutNodes.map((n) => n.x), 500) + 120;
+    const maxY = Math.max(...layoutNodes.map((n) => n.y), 250) + 80;
+    useEffect(() => {
+        const freshRejections = [];
+        // Identify nodes that became rejected and haven't spawned particles yet
+        const inspectForRejections = (n) => {
+            if (n.validationStatus === 'target_rejected' && !processedRejectionsRef.current.has(n.tokenId)) {
+                freshRejections.push(n);
+            }
+            n.children.forEach(inspectForRejections);
+        };
+        inspectForRejections(layoutRoot);
+        if (freshRejections.length > 0) {
+            const generatedParticles = [];
+            for (const rejNode of freshRejections) {
+                processedRejectionsRef.current.add(rejNode.tokenId);
+                // Spawn 8 disperse particles for decay animation
+                for (let i = 0; i < 8; i++) {
+                    const angle = Math.random() * Math.PI * 2;
+                    const speed = 25 + Math.random() * 40;
+                    generatedParticles.push({
+                        id: `${rejNode.tokenId}-particle-${i}-${Math.random()}`,
+                        x: rejNode.x,
+                        y: rejNode.y,
+                        dx: Math.cos(angle) * speed,
+                        dy: Math.sin(angle) * speed,
+                        color: Math.random() > 0.4 ? '#ff4444' : '#ffaa00',
+                        size: 2 + Math.random() * 3,
+                    });
+                }
+            }
+            setParticles((prev) => [...prev, ...generatedParticles]);
+            // Clean up dissolved particles after 500ms
+            const cleanupTimer = setTimeout(() => {
+                setParticles((prev) => prev.filter((p) => !generatedParticles.includes(p)));
+            }, 500);
+            return () => clearTimeout(cleanupTimer);
+        }
+    }, [tokenTree, layoutRoot]);
+    const handleInteraction = (token) => {
+        if (onTokenFocus) {
+            onTokenFocus({
+                tokenId: token.tokenId,
+                tokenValue: token.tokenValue,
+                logitProbability: token.logitProbability,
+                validationStatus: token.validationStatus,
+                childSpeculations: [],
+            });
+        }
+    };
+    return (React.createElement(GlassBox, { className: className, variant: "black" },
+        React.createElement("div", { className: "flex flex-col space-y-3 font-mono" },
+            React.createElement("div", { className: "flex justify-between items-center border-b border-gray-800 pb-2" },
+                React.createElement("div", null,
+                    React.createElement("h3", { className: "text-xs font-semibold text-white tracking-widest uppercase" }, "Speculative Telemetry"),
+                    React.createElement("span", { className: "text-[9px] text-gray-500 uppercase" }, "System 1 Draft Proposals & Validation Decay")),
+                React.createElement("div", { className: "flex gap-3 text-[9px] uppercase tracking-wider" },
+                    React.createElement("span", { className: "flex items-center gap-1" },
+                        React.createElement("span", { className: "w-1.5 h-1.5 rounded-full bg-[var(--cr-accent-cyan)] shadow-[0_0_4px_var(--cr-accent-cyan)]" }),
+                        "Validated"),
+                    React.createElement("span", { className: "flex items-center gap-1" },
+                        React.createElement("span", { className: "w-1.5 h-1.5 rounded-full border border-dashed border-gray-500" }),
+                        "Draft Proposal"),
+                    React.createElement("span", { className: "flex items-center gap-1" },
+                        React.createElement("span", { className: "w-1.5 h-1.5 rounded-full bg-red-500/40 line-through" }),
+                        "Decayed"))),
+            React.createElement("div", { className: "relative w-full overflow-auto bg-black/60 rounded border border-gray-850 p-2 h-72 custom-scrollbar" },
+                React.createElement("svg", { width: maxX, height: maxY, className: "absolute top-0 left-0 overflow-visible" },
+                    React.createElement("g", null, layoutEdges.map((edge) => {
+                        const isRejected = edge.status === 'target_rejected';
+                        const isValidated = edge.status === 'target_validated';
+                        // SVG Bezier path curve calculation
+                        const controlOffset = 50;
+                        const pathData = `M ${edge.x1} ${edge.y1} C ${edge.x1 + controlOffset} ${edge.y1}, ${edge.x2 - controlOffset} ${edge.y2}, ${edge.x2} ${edge.y2}`;
+                        return (React.createElement("path", { key: `${edge.parentId}-${edge.childId}`, d: pathData, fill: "none", stroke: isRejected
+                                ? 'rgba(239, 68, 68, 0.1)'
+                                : isValidated
+                                    ? 'var(--cr-accent-cyan)'
+                                    : 'rgba(255, 255, 255, 0.15)', strokeWidth: isValidated ? 2 : 1, strokeDasharray: isRejected ? '3, 3' : undefined, className: "transition-all duration-300" }));
+                    })),
+                    React.createElement("g", null, particles.map((p) => (React.createElement(motion.circle, { key: p.id, cx: p.x, cy: p.y, r: p.size, fill: p.color, initial: { opacity: 1, x: 0, y: 0 }, animate: { opacity: 0, x: p.dx, y: p.dy }, transition: { duration: 0.45, ease: 'easeOut' } }))))),
+                React.createElement("div", { className: "absolute top-0 left-0", style: { width: maxX, height: maxY } }, layoutNodes.map((node) => {
+                    const isValidated = node.validationStatus === 'target_validated';
+                    const isRejected = node.validationStatus === 'target_rejected';
+                    // Map probability value to distinct colors
+                    const probColor = node.logitProbability >= 0.8
+                        ? 'text-green-400'
+                        : node.logitProbability >= 0.5
+                            ? 'text-yellow-400'
+                            : 'text-red-400';
+                    return (React.createElement(motion.div, { key: node.tokenId, style: {
+                            position: 'absolute',
+                            left: node.x,
+                            top: node.y,
+                            transform: 'translate(-50%, -50%)',
+                            zIndex: 10,
+                        }, initial: false, animate: {
+                            scale: isRejected ? 0.85 : 1,
+                            opacity: isRejected ? 0.35 : 1,
+                        }, transition: { duration: 0.3 } },
+                        React.createElement("button", { onClick: () => handleInteraction(node), onMouseEnter: () => setHoveredToken(node), onMouseLeave: () => setHoveredToken(null), style: { borderRadius: 'var(--cr-border-radius)' }, className: `px-3 py-2 text-xs font-mono transition-all duration-300 border flex flex-col items-center select-none ${isValidated
+                                ? 'border-[var(--cr-accent-cyan)] shadow-[0_0_12px_rgba(0,255,204,0.4)] bg-black/90 text-white'
+                                : isRejected
+                                    ? 'border-red-500/20 bg-red-950/5 text-gray-500 line-through'
+                                    : 'border-dashed border-gray-700 bg-gray-950/80 text-gray-300 hover:border-gray-500'}` },
+                            React.createElement("span", { className: "font-semibold tracking-wider text-[11px]" }, node.tokenValue),
+                            React.createElement("span", { className: `text-[8px] font-bold mt-0.5 ${probColor}` },
+                                (node.logitProbability * 100).toFixed(0),
+                                "%"))));
+                }))),
+            React.createElement(AnimatePresence, null, hoveredToken && (React.createElement(motion.div, { initial: { opacity: 0, y: 5 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: 5 }, className: "bg-gray-950/95 border border-gray-850 p-2.5 rounded text-[10px] text-gray-400 flex flex-col space-y-1" },
+                React.createElement("div", { className: "flex justify-between text-white font-semibold" },
+                    React.createElement("span", null,
+                        "Token ID: ",
+                        hoveredToken.tokenId),
+                    React.createElement("span", { className: "uppercase text-[9px] tracking-widest px-1.5 py-0.5 bg-gray-900 border border-gray-800 rounded" }, hoveredToken.validationStatus.replace('target_', '').replace('speculative_', ''))),
+                React.createElement("div", { className: "flex justify-between" },
+                    React.createElement("span", null, "Value representation:"),
+                    React.createElement("span", { className: "text-white font-mono bg-black px-1.5 rounded" }, JSON.stringify(hoveredToken.tokenValue))),
+                React.createElement("div", { className: "flex justify-between" },
+                    React.createElement("span", null, "Logit Probability:"),
+                    React.createElement("span", { className: "text-white font-mono" }, hoveredToken.logitProbability.toFixed(5)))))))));
+};

package/dist/components/TemporalScrubber.d.ts

@@ -9,8 +9,11 @@ export interface TemporalScrubberProps {
     minRange: number;
     maxRange: number;
     forks?: TemporalFork[];
+    activeForkId?: string;
     onScrub: (newTime: number) => void;
     onForkSelect?: (forkId: string) => void;
+    onForkInitiate?: (branchPoint: number) => void;
+    onForkClose?: (forkId: string) => void;
     className?: string;
 }
 export declare const TemporalScrubber: React.FC<TemporalScrubberProps>;

package/dist/components/TemporalScrubber.js

@@ -10,11 +10,13 @@
 import React from 'react';
 import { motion } from 'framer-motion';
 import { cn } from './GlassBox';
-export const TemporalScrubber = ({ timestamp, minRange, maxRange, forks = [], onScrub, onForkSelect, className }) => {
+export const TemporalScrubber = ({ timestamp, minRange, maxRange, forks = [], activeForkId, onScrub, onForkSelect, onForkInitiate, onForkClose, className }) => {
     const getPercentage = (val) => ((val - minRange) / (maxRange - minRange)) * 100;
     return (React.createElement("div", { className: cn('flex flex-col items-stretch gap-4 p-4 bg-[var(--cr-glass-box-black)] rounded-xl border border-gray-800', className) },
         React.createElement("div", { className: "flex justify-between items-center mb-2" },
-            React.createElement("span", { className: "text-white uppercase tracking-widest text-xs font-bold" }, "Temporal Navigation"),
+            React.createElement("div", { className: "flex items-center gap-3" },
+                React.createElement("span", { className: "text-white uppercase tracking-widest text-xs font-bold" }, "Temporal Navigation"),
+                onForkInitiate && (React.createElement("button", { onClick: () => onForkInitiate(timestamp), className: "px-2 py-0.5 bg-purple-950/60 border border-purple-500/50 hover:bg-purple-900/60 text-purple-300 text-[10px] font-mono rounded transition-all uppercase tracking-wider font-bold" }, "Fork Timeline"))),
             React.createElement("span", { className: "text-[var(--cr-accent-cyan)] font-mono text-xs" },
                 "T - ",
                 Math.floor((Date.now() - timestamp) / 1000),
@@ -25,11 +27,21 @@ export const TemporalScrubber = ({ timestamp, minRange, maxRange, forks = [], on
             forks.map((fork, idx) => {
                 const startPct = getPercentage(fork.branchPoint);
                 const topOffset = idx % 2 === 0 ? 0 : 16;
-                return (React.createElement(motion.div, { key: fork.id, initial: { opacity: 0 }, animate: { opacity: 1 }, className: "absolute h-1 bg-[var(--cr-accent-orange)] cursor-pointer group", style: { left: `${startPct}%`, top: topOffset, width: `calc(100% - ${startPct}%)` }, onClick: () => onForkSelect === null || onForkSelect === void 0 ? void 0 : onForkSelect(fork.id) },
-                    React.createElement("div", { className: "absolute -left-1 -top-1 w-3 h-3 rounded-full bg-[var(--cr-accent-orange)]" }),
-                    React.createElement("div", { className: "absolute -top-6 left-0 opacity-0 group-hover:opacity-100 transition-opacity bg-black text-[var(--cr-accent-orange)] text-[10px] font-mono px-2 py-1 rounded" },
-                        "\u2443 ",
-                        fork.name)));
+                const isActive = activeForkId === fork.id;
+                return (React.createElement(motion.div, { key: fork.id, initial: { opacity: 0 }, animate: { opacity: 1 }, className: cn("absolute h-1 cursor-pointer group transition-all duration-300", isActive
+                        ? "bg-purple-500 shadow-[0_0_8px_rgba(168,85,247,0.8)] z-20"
+                        : "bg-[var(--cr-accent-orange)] z-10"), style: { left: `${startPct}%`, top: topOffset, width: `calc(100% - ${startPct}%)` }, onClick: () => onForkSelect === null || onForkSelect === void 0 ? void 0 : onForkSelect(fork.id) },
+                    React.createElement("div", { className: cn("absolute -left-1 -top-1 w-3 h-3 rounded-full transition-all duration-300", isActive ? "bg-purple-400 scale-125" : "bg-[var(--cr-accent-orange)]") }),
+                    React.createElement("div", { className: cn("absolute -top-6 left-0 transition-opacity bg-black text-[10px] font-mono px-2 py-1 rounded flex items-center gap-1.5 whitespace-nowrap", isActive
+                            ? "opacity-100 text-purple-300 border border-purple-500/30"
+                            : "opacity-0 group-hover:opacity-100 text-[var(--cr-accent-orange)]") },
+                        React.createElement("span", null,
+                            "\u2443 ",
+                            fork.name),
+                        onForkClose && (React.createElement("button", { onClick: (e) => {
+                                e.stopPropagation();
+                                onForkClose(fork.id);
+                            }, className: "hover:text-white text-xs ml-1 focus:outline-none font-bold", title: "Dismiss Fork" }, "\u00D7")))));
             }),
             React.createElement("input", { type: "range", min: minRange, max: maxRange, value: timestamp, onChange: (e) => onScrub(Number(e.target.value)), className: "absolute top-[26px] w-full cursor-ew-resize opacity-0 z-10" }),
             React.createElement(motion.div, { className: "absolute top-6 w-5 h-5 rounded-full bg-white border-2 border-[var(--cr-accent-cyan)] shadow-[0_0_10px_var(--cr-accent-cyan)] pointer-events-none", style: { left: `calc(${getPercentage(timestamp)}% - 10px)` }, layout: true }))));

package/dist/components/TopologicalCanvas.d.ts

@@ -17,11 +17,7 @@ export interface TopologicalCanvasProps {
         x: number;
         y: number;
     }) => void;
+    onExecuteIntervention?: (nodeId: string) => void;
 }
-/**
- * TopologicalCanvas
- *
- * Concept: Visualizes the Macro-Swarm Architecture
- * Uses ReactFlow to map mathematical DAGs to the UI
- */
+export declare const computeBlastRadius: (nodes: Node[], edges: Edge[], startNodeId: string) => Set<string>;
 export declare const TopologicalCanvas: React.FC<TopologicalCanvasProps>;

package/dist/components/TopologicalCanvas.js

@@ -17,14 +17,14 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import React from 'react';
-import { ReactFlow, Background, Controls, getBezierPath, EdgeLabelRenderer, Panel } from '@xyflow/react';
+import { ReactFlow, Background, Controls, getBezierPath, EdgeLabelRenderer, Panel, ReactFlowProvider, useViewport } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import { GlassBox } from './GlassBox';
 import { StatusPulse } from './StatusPulse';
-import { Lock, Unlock, ShieldAlert, ShieldX } from 'lucide-react';
+import { Lock, Unlock, ShieldAlert, ShieldX, AlertTriangle } from 'lucide-react';
 import { ConformanceGuillotine } from './ConformanceGuillotine';
 // Custom Node: SwarmNode
-const SwarmNode = ({ data }) => {
+const SwarmNode = ({ id, data }) => {
     var _a;
     const isBreached = data.status === 'suspended_security_violation' || data.isSecurityViolation;
     const isCompact = data.density === 'compact';
@@ -32,6 +32,9 @@ const SwarmNode = ({ data }) => {
     if (data.isPanicked) {
         borderColorClass = 'border-red-600/80 shadow-[0_0_15px_rgba(220,38,38,0.3)]';
     }
+    else if (data.isInBlastRadius) {
+        borderColorClass = 'border-red-500/90 shadow-[0_0_18px_rgba(239,68,68,0.6)] bg-red-950/20 animate-pulse';
+    }
     else if (isBreached) {
         borderColorClass = 'border-orange-500/80 shadow-[0_0_15px_rgba(249,115,22,0.3)]';
     }
@@ -48,7 +51,16 @@ const SwarmNode = ({ data }) => {
         React.createElement("div", { className: "flex flex-col" },
             React.createElement("div", { className: "flex justify-between items-center mb-2" },
                 React.createElement("span", { className: "text-[10px] uppercase tracking-widest text-gray-500" }, data.typeLabel || 'AGENT'),
-                !isCompact && React.createElement(StatusPulse, { status: data.status || 'idle' })),
+                React.createElement("div", { className: "flex items-center gap-1.5" },
+                    React.createElement("button", { onMouseEnter: () => { var _a; return (_a = data.onHoverRetract) === null || _a === void 0 ? void 0 : _a.call(data, id); }, onMouseLeave: () => { var _a; return (_a = data.onLeaveRetract) === null || _a === void 0 ? void 0 : _a.call(data); }, onClick: (e) => {
+                            var _a;
+                            e.stopPropagation();
+                            (_a = data.onExecuteIntervention) === null || _a === void 0 ? void 0 : _a.call(data, id);
+                        }, className: "text-gray-500 hover:text-red-500 transition-colors p-0.5 rounded cursor-pointer flex items-center justify-center bg-black/40 border border-white/5 hover:border-red-500/30", title: "Retract Node (Do-Operator)" },
+                        React.createElement("svg", { className: "w-3 h-3", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" },
+                            React.createElement("circle", { cx: "12", cy: "12", r: "10" }),
+                            React.createElement("line", { x1: "8", y1: "12", x2: "16", y2: "12" }))),
+                    !isCompact && React.createElement(StatusPulse, { status: data.status || 'idle' }))),
             !isCompact && (React.createElement("span", { className: "text-sm font-mono text-white truncate max-w-[120px]", title: data.urn }, ((_a = data.urn) === null || _a === void 0 ? void 0 : _a.split(':').slice(-2).join(':')) || 'urn:unknown')),
             data.causalRole && (React.createElement("div", { className: `mt-2 text-[8px] font-bold uppercase tracking-wider px-1 py-0.5 rounded text-center ${data.causalRole === 'confounder'
                     ? 'bg-yellow-500/20 text-yellow-400 border border-yellow-500/30'
@@ -76,13 +88,24 @@ const SandboxNode = ({ id, data }) => {
     const isCompact = data.density === 'compact';
     return (React.createElement("div", { className: `bg-[rgba(20,20,20,0.8)] border relative rounded-lg p-4 min-w-[300px] ${isCompact ? 'min-h-[50px]' : 'min-h-[200px]'} shadow-[0_0_15px_rgba(255,100,0,0.2)] ${data.isPanicked
             ? 'border-red-600/80 shadow-[0_0_20px_rgba(220,38,38,0.4)]'
-            : 'border-[var(--cr-accent-orange)]'}` },
+            : data.isInBlastRadius
+                ? 'border-red-500/90 shadow-[0_0_20px_rgba(239,68,68,0.6)] bg-red-950/20 animate-pulse'
+                : 'border-[var(--cr-accent-orange)]'}` },
         React.createElement("div", { className: `absolute top-0 left-0 right-0 text-[10px] font-bold uppercase tracking-wider px-2 py-1 rounded-t-sm flex justify-between items-center ${data.isPanicked ? 'bg-red-600 text-white' : 'bg-[var(--cr-accent-orange)] text-black'}` },
             React.createElement("span", null,
                 "\u26CA ",
                 data.sandboxType || 'WASM ENCLAVE',
                 " ISOLATION BOUNDARY"),
-            React.createElement("span", { className: "font-mono" }, data.id || id)),
+            React.createElement("div", { className: "flex items-center gap-2" },
+                React.createElement("button", { onMouseEnter: () => { var _a; return (_a = data.onHoverRetract) === null || _a === void 0 ? void 0 : _a.call(data, id); }, onMouseLeave: () => { var _a; return (_a = data.onLeaveRetract) === null || _a === void 0 ? void 0 : _a.call(data); }, onClick: (e) => {
+                        var _a;
+                        e.stopPropagation();
+                        (_a = data.onExecuteIntervention) === null || _a === void 0 ? void 0 : _a.call(data, id);
+                    }, className: `p-0.5 rounded transition-colors cursor-pointer flex items-center justify-center bg-black/40 border border-white/5 ${data.isPanicked ? 'text-white/70 hover:text-white hover:border-white/30' : 'text-black/70 hover:text-red-600 hover:border-red-600/30'}`, title: "Retract WASM Sandbox" },
+                    React.createElement("svg", { className: "w-3 h-3", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" },
+                        React.createElement("circle", { cx: "12", cy: "12", r: "10" }),
+                        React.createElement("line", { x1: "8", y1: "12", x2: "16", y2: "12" }))),
+                React.createElement("span", { className: "font-mono" }, data.id || id))),
         !isCompact && (React.createElement("div", { className: "mt-6 mb-2 flex flex-col gap-2" },
             React.createElement("div", { className: "flex items-center justify-between text-[10px] font-mono text-gray-400" },
                 React.createElement("span", null, "CPU FUEL"),
@@ -124,6 +147,8 @@ const TelemetryEdge = ({ id, sourceX, sourceY, targetX, targetY, sourcePosition,
     });
     const [showDetails, setShowDetails] = React.useState(false);
     const getEdgeColor = () => {
+        if (data === null || data === void 0 ? void 0 : data.isInBlastRadius)
+            return '#ef4444'; // Flashing red hazard line
         if (data === null || data === void 0 ? void 0 : data.isSecurityViolation)
             return '#f97316'; // Flashing firewall orange
         if (data === null || data === void 0 ? void 0 : data.isSecureMtls)
@@ -133,11 +158,15 @@ const TelemetryEdge = ({ id, sourceX, sourceY, targetX, targetY, sourcePosition,
         return (data === null || data === void 0 ? void 0 : data.isStreaming) ? 'var(--cr-accent-orange)' : '#4B5563';
     };
     const getStrokeDashArray = () => {
+        if (data === null || data === void 0 ? void 0 : data.isInBlastRadius)
+            return '5,5';
         if ((data === null || data === void 0 ? void 0 : data.isSecureMtls) || (data === null || data === void 0 ? void 0 : data.isStreaming) || (data === null || data === void 0 ? void 0 : data.isSecurityViolation))
             return '5,5';
         return 'none';
     };
     const getAnimation = () => {
+        if (data === null || data === void 0 ? void 0 : data.isInBlastRadius)
+            return 'dashdraw 0.3s linear infinite'; // Accelerated dash warning
         if (data === null || data === void 0 ? void 0 : data.isSecurityViolation)
             return 'dashdraw 0.5s linear infinite';
         if ((data === null || data === void 0 ? void 0 : data.isStreaming) || (data === null || data === void 0 ? void 0 : data.isSecureMtls))
@@ -212,15 +241,101 @@ const nodeTypes = {
 const edgeTypes = {
     telemetryEdge: TelemetryEdge,
 };
-/**
- * TopologicalCanvas
- *
- * Concept: Visualizes the Macro-Swarm Architecture
- * Uses ReactFlow to map mathematical DAGs to the UI
- */
-export const TopologicalCanvas = ({ nodes, edges, availableCapabilities = [], onNodeClick, onNodesChange, onEdgesChange, onConnect, onDropCapability }) => {
+export const computeBlastRadius = (nodes, edges, startNodeId) => {
+    const visited = new Set();
+    const queue = [startNodeId];
+    while (queue.length > 0) {
+        const current = queue.shift();
+        if (!visited.has(current)) {
+            visited.add(current);
+            const downstream = edges
+                .filter(e => e.source === current)
+                .map(e => e.target);
+            queue.push(...downstream);
+        }
+    }
+    return visited;
+};
+const CausalInterventionOverlay = ({ nodes, hoveredNodeId }) => {
+    var _a, _b, _c, _d;
+    const { x, y, zoom } = useViewport();
+    const [pulseRadius, setPulseRadius] = React.useState(0);
+    React.useEffect(() => {
+        let frame;
+        const start = performance.now();
+        const animate = (time) => {
+            const elapsed = time - start;
+            const progress = (elapsed % 1500) / 1500;
+            setPulseRadius(progress * 120);
+            frame = requestAnimationFrame(animate);
+        };
+        frame = requestAnimationFrame(animate);
+        return () => cancelAnimationFrame(frame);
+    }, []);
+    const targetNode = nodes.find(n => n.id === hoveredNodeId);
+    if (!targetNode)
+        return null;
+    const isSandbox = targetNode.type === 'sandboxNode';
+    const width = (_b = (_a = targetNode.measured) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : (isSandbox ? 300 : 150);
+    const height = (_d = (_c = targetNode.measured) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : (isSandbox ? 200 : 100);
+    const cx = targetNode.position.x + width / 2;
+    const cy = targetNode.position.y + height / 2;
+    const screenCx = cx * zoom + x;
+    const screenCy = cy * zoom + y;
+    return (React.createElement("svg", { style: {
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            width: '100%',
+            height: '100%',
+            pointerEvents: 'none',
+            zIndex: 9999,
+        } },
+        React.createElement("circle", { cx: screenCx, cy: screenCy, r: pulseRadius * zoom, fill: "rgba(239, 68, 68, 0.08)", stroke: "rgba(239, 68, 68, 0.5)", strokeWidth: "2", style: {
+                transformOrigin: `${screenCx}px ${screenCy}px`,
+            } }),
+        React.createElement("circle", { cx: screenCx, cy: screenCy, r: 8 * zoom, fill: "#ef4444", className: "animate-ping" }),
+        React.createElement("circle", { cx: screenCx, cy: screenCy, r: 5 * zoom, fill: "#ef4444" })));
+};
+const TopologicalCanvasInner = ({ nodes, edges, availableCapabilities = [], onNodeClick, onNodesChange, onEdgesChange, onConnect, onDropCapability, onExecuteIntervention }) => {
+    var _a, _b;
     const [isLayouting, setIsLayouting] = React.useState(false);
     const [activePanicNode, setActivePanicNode] = React.useState(null);
+    const [hoveredRetractNodeId, setHoveredRetractNodeId] = React.useState(null);
+    const blastRadiusIds = React.useMemo(() => {
+        if (!hoveredRetractNodeId)
+            return new Set();
+        return computeBlastRadius(nodes, edges, hoveredRetractNodeId);
+    }, [nodes, edges, hoveredRetractNodeId]);
+    const processedNodes = React.useMemo(() => {
+        return nodes.map(node => {
+            const isInBlast = blastRadiusIds.has(node.id);
+            const isTarget = node.id === hoveredRetractNodeId;
+            return Object.assign(Object.assign({}, node), { data: Object.assign(Object.assign({}, node.data), { isInBlastRadius: isInBlast, isInterventionTarget: isTarget, onHoverRetract: (id) => setHoveredRetractNodeId(id), onLeaveRetract: () => setHoveredRetractNodeId(null), onExecuteIntervention: (id) => {
+                        setHoveredRetractNodeId(null);
+                        if (onExecuteIntervention) {
+                            onExecuteIntervention(id);
+                        }
+                    } }) });
+        });
+    }, [nodes, blastRadiusIds, hoveredRetractNodeId, onExecuteIntervention]);
+    const processedEdges = React.useMemo(() => {
+        return edges.map(edge => {
+            const isInBlast = blastRadiusIds.has(edge.source);
+            return Object.assign(Object.assign({}, edge), { data: Object.assign(Object.assign({}, edge.data), { isInBlastRadius: isInBlast }) });
+        });
+    }, [edges, blastRadiusIds]);
+    const affectedSandboxCount = React.useMemo(() => {
+        return Array.from(blastRadiusIds).filter(id => {
+            var _a;
+            const node = nodes.find(n => n.id === id);
+            if (!node)
+                return false;
+            const urn = ((_a = node.data) === null || _a === void 0 ? void 0 : _a.urn) || '';
+            return node.type === 'sandboxNode' || urn.includes('urn:coreason:node:sandbox');
+        }).length;
+    }, [blastRadiusIds, nodes]);
+    const deficitForecast = blastRadiusIds.size * 150.0;
     const onDragStart = (event, capability) => {
         event.dataTransfer.setData('application/reactflow', JSON.stringify(capability));
         event.dataTransfer.effectAllowed = 'move';
@@ -291,8 +406,8 @@ export const TopologicalCanvas = ({ nodes, edges, availableCapabilities = [], on
                 onNodesChange(changes);
             }
         }
-        catch (error) {
-            console.error('ELK Layout error:', error);
+        catch (err) {
+            console.error('ELK Layout fault:', err);
         }
         finally {
             setIsLayouting(false);
@@ -314,15 +429,41 @@ export const TopologicalCanvas = ({ nodes, edges, availableCapabilities = [], on
               background-color: #000;
             }
           `),
-            React.createElement(ReactFlow, { nodes: nodes, edges: edges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, onNodeClick: handleInternalNodeClick, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, onConnect: onConnect, fitView: true, proOptions: { hideAttribution: true } },
+            React.createElement(ReactFlow, { nodes: processedNodes, edges: processedEdges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, onNodeClick: handleInternalNodeClick, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, onConnect: onConnect, fitView: true, proOptions: { hideAttribution: true } },
                 React.createElement(Background, { color: "#1f2937", gap: 20 }),
                 React.createElement(Controls, { className: "bg-[var(--cr-glass-box-black)] border border-gray-800 fill-white" }),
                 React.createElement(Panel, { position: "top-right", className: "m-4" },
-                    React.createElement("button", { onClick: handleAutoLayout, disabled: isLayouting, className: `bg-[var(--cr-accent-orange)] text-black font-bold uppercase tracking-wider text-[10px] px-4 py-2 rounded shadow-lg transition-opacity ${isLayouting ? 'opacity-50 cursor-not-allowed' : 'hover:opacity-90'}` }, isLayouting ? 'Computing Topology...' : 'Orthogonal Layout')))),
+                    React.createElement("button", { onClick: handleAutoLayout, disabled: isLayouting, className: `bg-[var(--cr-accent-orange)] text-black font-bold uppercase tracking-wider text-[10px] px-4 py-2 rounded shadow-lg transition-opacity ${isLayouting ? 'opacity-50 cursor-not-allowed' : 'hover:opacity-90'}` }, isLayouting ? 'Computing Topology...' : 'Orthogonal Layout')),
+                hoveredRetractNodeId && (React.createElement(Panel, { position: "bottom-center", className: "mb-4" },
+                    React.createElement(GlassBox, { density: "dense", className: "border border-red-500/30 bg-black/85 backdrop-blur-md p-4 rounded-lg w-[450px] shadow-[0_0_20px_rgba(239,68,68,0.2)]" },
+                        React.createElement("div", { className: "flex items-start gap-3" },
+                            React.createElement(AlertTriangle, { className: "w-5 h-5 text-red-500 animate-pulse shrink-0 mt-0.5" }),
+                            React.createElement("div", { className: "flex-1 space-y-1.5" },
+                                React.createElement("div", { className: "text-[11px] font-bold text-red-400 uppercase tracking-widest" }, "Causal Intervention Forecast"),
+                                React.createElement("div", { className: "text-[10px] font-mono text-gray-400 break-all leading-normal" },
+                                    "Target URN: ",
+                                    React.createElement("span", { className: "text-white font-bold" }, String(((_b = (_a = nodes.find(n => n.id === hoveredRetractNodeId)) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.urn) || hoveredRetractNodeId))),
+                                React.createElement("div", { className: "grid grid-cols-3 gap-2 py-1.5 border-t border-b border-white/5 my-1" },
+                                    React.createElement("div", null,
+                                        React.createElement("div", { className: "text-[9px] text-gray-500 font-mono" }, "AFFECTED NODES"),
+                                        React.createElement("div", { className: "text-xs font-bold text-white font-mono" }, blastRadiusIds.size)),
+                                    React.createElement("div", null,
+                                        React.createElement("div", { className: "text-[9px] text-gray-500 font-mono" }, "SANDBOXES"),
+                                        React.createElement("div", { className: "text-xs font-bold text-white font-mono" }, affectedSandboxCount)),
+                                    React.createElement("div", null,
+                                        React.createElement("div", { className: "text-[9px] text-gray-500 font-mono" }, "DEFICIT FORECAST"),
+                                        React.createElement("div", { className: "text-xs font-bold text-white font-mono" },
+                                            deficitForecast.toFixed(1),
+                                            " u"))),
+                                React.createElement("div", { className: "text-[9px] text-red-400/80 font-sans italic leading-relaxed" }, "CAUTION: Retracting this node executes a Do-operator mutation. All downstream dependent nodes will be invalidated."))))))),
+            hoveredRetractNodeId && (React.createElement(CausalInterventionOverlay, { nodes: nodes, hoveredNodeId: hoveredRetractNodeId }))),
         activePanicNode && (React.createElement("div", { className: "absolute inset-0 bg-black/60 backdrop-blur-sm z-[9999] flex justify-center items-center p-6" },
             React.createElement(ConformanceGuillotine, { nodeId: activePanicNode.nodeId, panicMessage: activePanicNode.panicMessage, backtrace: activePanicNode.backtrace, onClose: () => setActivePanicNode(null), onRecover: () => {
                     console.log(`Triggering hot enclave recovery for ${activePanicNode.nodeId}`);
-                    // In production this emits a hot-attestation reload request to the Temporal ledger
                     setActivePanicNode(null);
                 } })))));
 };
+export const TopologicalCanvas = (props) => {
+    return (React.createElement(ReactFlowProvider, null,
+        React.createElement(TopologicalCanvasInner, Object.assign({}, props))));
+};

package/dist/components/WasmSandboxCagingHud.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export interface AttestationReceipt {
+    transactionId: string;
+    proofStatus: 'VALIDATED' | 'FORGED' | 'INVALID' | 'UNCHECKED';
+    originatingAgentUrn: string;
+    verificationTimestamp: string;
+    zkProofHash: string;
+    sdJwtCompliance: boolean;
+}
+export interface SandboxHardwareTelemetry {
+    sandboxUrn: string;
+    cpuFuelRemaining: number;
+    cpuFuelBurnRate: number;
+    ramBytesAllocated: number;
+}
+export interface WasmSandboxCagingHudProps {
+    telemetry: SandboxHardwareTelemetry;
+    attestation?: AttestationReceipt;
+    className?: string;
+}
+export declare const WasmSandboxCagingHud: React.FC<WasmSandboxCagingHudProps>;