@coreason-ai/sensory-core 1.3.0 → 1.4.0

package/CHANGELOG.md

@@ -5,6 +5,14 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.4.0](https://github.com/CoReason-AI/coreason-sensory-core/compare/v1.3.0...v1.4.0) (2026-05-22)
+
+
+### Features
+
+* **sensory-core:** implement telemetry components for speculative decoding, active inference, and causal canvas overrides ([5dcd6c3](https://github.com/CoReason-AI/coreason-sensory-core/commit/5dcd6c31fbac46a92b9c22075c455c7c6abff813))
+* **sensory:** integrate sandbox caging telemetry visual primitives and prediction market hud ([3ef8ee9](https://github.com/CoReason-AI/coreason-sensory-core/commit/3ef8ee9d5297501227a857889963698c35c33967))
+
 ## [1.2.0](https://github.com/CoReason-AI/coreason-sensory-core/compare/v1.1.0...v1.2.0) (2026-05-21)
 
 

package/dist/components/EpistemicDeficitRadar.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+export interface EpistemicDeficitRadarProps {
+    intentBoundary: number[];
+    activeTrajectory: number[];
+    dimensions: string[];
+    vfe: number;
+    threshold: number;
+    className?: string;
+}
+/**
+ * EpistemicDeficitRadar
+ *
+ * Target Persona: Systems Operator / Generalist / Intelligencer
+ * Concept: Active Inference & Epistemic Alignment.
+ * Visualizes the divergence between policy intent boundaries and the agent's actual trajectory.
+ * Highlights the divergence area (Free Energy Gap) via an animated diagonal-stripe pattern
+ * and sounds a visual pulse alarm if the Variational Free Energy (VFE) surprise threshold is breached.
+ */
+export declare const EpistemicDeficitRadar: React.FC<EpistemicDeficitRadarProps>;

package/dist/components/EpistemicDeficitRadar.js

@@ -0,0 +1,108 @@
+// 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 from 'react';
+import { motion } from 'framer-motion';
+import { GlassBox } from './GlassBox';
+/**
+ * EpistemicDeficitRadar
+ *
+ * Target Persona: Systems Operator / Generalist / Intelligencer
+ * Concept: Active Inference & Epistemic Alignment.
+ * Visualizes the divergence between policy intent boundaries and the agent's actual trajectory.
+ * Highlights the divergence area (Free Energy Gap) via an animated diagonal-stripe pattern
+ * and sounds a visual pulse alarm if the Variational Free Energy (VFE) surprise threshold is breached.
+ */
+export const EpistemicDeficitRadar = ({ intentBoundary, activeTrajectory, dimensions, vfe, threshold, className, }) => {
+    const cx = 160;
+    const cy = 160;
+    const r = 110;
+    const N = dimensions.length;
+    const isBreached = vfe >= threshold;
+    // Calculate coordinates for intent boundaries and active trajectory
+    const intentCoords = intentBoundary.map((val, i) => {
+        const angle = i * ((2 * Math.PI) / N) - Math.PI / 2;
+        return {
+            x: cx + val * r * Math.cos(angle),
+            y: cy + val * r * Math.sin(angle),
+        };
+    });
+    const activeCoords = activeTrajectory.map((val, i) => {
+        const angle = i * ((2 * Math.PI) / N) - Math.PI / 2;
+        return {
+            x: cx + val * r * Math.cos(angle),
+            y: cy + val * r * Math.sin(angle),
+        };
+    });
+    // Construct polygon paths
+    // Intent boundary: clockwise winding
+    const intentPathPart = intentCoords.map((c, i) => `${i === 0 ? 'M' : 'L'} ${c.x.toFixed(2)} ${c.y.toFixed(2)}`).join(' ') + ' Z';
+    // Active trajectory: counter-clockwise winding
+    const activePathPart = [...activeCoords].reverse().map((c, i) => `${i === 0 ? 'M' : 'L'} ${c.x.toFixed(2)} ${c.y.toFixed(2)}`).join(' ') + ' Z';
+    // Combine paths with nonzero fill rule to highlight the symmetric difference (Free Energy Gap)
+    const gapPathData = `${intentPathPart} ${activePathPart}`;
+    const intentPolygonPath = intentCoords.map((c, i) => `${i === 0 ? 'M' : 'L'} ${c.x.toFixed(2)} ${c.y.toFixed(2)}`).join(' ') + ' Z';
+    const activePolygonPath = activeCoords.map((c, i) => `${i === 0 ? 'M' : 'L'} ${c.x.toFixed(2)} ${c.y.toFixed(2)}`).join(' ') + ' Z';
+    return (React.createElement(GlassBox, { className: className, variant: "black" },
+        React.createElement("div", { className: "flex flex-col space-y-4 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" }, "Epistemic Alignment"),
+                    React.createElement("span", { className: "text-[9px] text-gray-500 uppercase" }, "Active Inference & Surprise Topology")),
+                React.createElement("div", { className: "text-[10px] text-right font-bold" },
+                    React.createElement("span", { className: "text-gray-500 uppercase mr-1" }, "VFE:"),
+                    React.createElement("span", { className: isBreached ? 'text-amber-500' : 'text-[var(--cr-accent-cyan)]' }, vfe.toFixed(3)),
+                    React.createElement("span", { className: "text-gray-600 font-normal" },
+                        " / ",
+                        threshold.toFixed(2)))),
+            React.createElement("div", { className: "relative w-full flex justify-center bg-black/60 rounded border border-gray-850 py-3" },
+                React.createElement("svg", { width: "320", height: "320", className: "overflow-visible" },
+                    React.createElement("defs", null,
+                        React.createElement("pattern", { id: "free-energy-gap-stripes", width: "20", height: "20", patternUnits: "userSpaceOnUse" },
+                            React.createElement("path", { d: "M -5,5 L 5,-5 M 0,20 L 20,0 M 15,25 L 25,15", stroke: isBreached ? 'rgba(245, 158, 11, 0.4)' : 'rgba(0, 255, 204, 0.25)', strokeWidth: "2.5" }),
+                            React.createElement("animateTransform", { attributeName: "patternTransform", type: "translate", from: "0,0", to: "20,20", dur: "2.5s", repeatCount: "indefinite" }))),
+                    [0.25, 0.5, 0.75, 1.0].map((scale) => (React.createElement("circle", { key: `grid-ring-${scale}`, cx: cx, cy: cy, r: r * scale, fill: "none", stroke: "rgba(255, 255, 255, 0.05)", strokeDasharray: "3, 3" }))),
+                    dimensions.map((dim, i) => {
+                        const angle = i * ((2 * Math.PI) / N) - Math.PI / 2;
+                        const ax = cx + r * Math.cos(angle);
+                        const ay = cy + r * Math.sin(angle);
+                        return (React.createElement("line", { key: `axis-${dim}`, x1: cx, y1: cy, x2: ax, y2: ay, stroke: "rgba(255, 255, 255, 0.08)", strokeWidth: "1" }));
+                    }),
+                    React.createElement(motion.circle, { cx: cx, cy: cy, r: r + 15, fill: "none", stroke: isBreached ? '#f59e0b' : 'rgba(255, 255, 255, 0.15)', strokeWidth: isBreached ? 3 : 1, strokeDasharray: isBreached ? undefined : '4, 4', animate: isBreached ? {
+                            scale: [1, 1.03, 1],
+                            opacity: [0.5, 1, 0.5],
+                        } : {
+                            scale: 1,
+                            opacity: 0.5,
+                        }, transition: isBreached ? {
+                            repeat: Infinity,
+                            duration: 1.4,
+                            ease: 'easeInOut',
+                        } : undefined, style: { originX: `${cx}px`, originY: `${cy}px` } }),
+                    React.createElement("path", { d: gapPathData, fill: "url(#free-energy-gap-stripes)", fillRule: "nonzero", className: "transition-all duration-300" }),
+                    React.createElement("path", { d: intentPolygonPath, fill: "none", stroke: "rgba(255, 255, 255, 0.3)", strokeWidth: "1.5", strokeDasharray: "4, 4" }),
+                    React.createElement("path", { d: activePolygonPath, fill: "rgba(0, 255, 204, 0.04)", stroke: isBreached ? '#f59e0b' : 'var(--cr-accent-cyan)', strokeWidth: "2.5", className: "transition-all duration-300" }),
+                    dimensions.map((dim, i) => {
+                        const angle = i * ((2 * Math.PI) / N) - Math.PI / 2;
+                        const lx = cx + 1.25 * r * Math.cos(angle);
+                        const ly = cy + 1.2 * r * Math.sin(angle) + 4;
+                        const cos = Math.cos(angle);
+                        const textAnchor = cos > 0.1 ? 'start' : cos < -0.1 ? 'end' : 'middle';
+                        return (React.createElement("text", { key: `label-${dim}`, x: lx, y: ly, textAnchor: textAnchor, fill: "rgba(156, 163, 175, 0.85)", className: "text-[9px] font-bold tracking-wider uppercase select-none" }, dim.toUpperCase()));
+                    }))),
+            React.createElement("div", { className: "grid grid-cols-2 gap-3 text-[10px] bg-black/40 border border-gray-850 p-2.5 rounded" },
+                React.createElement("div", { className: "space-y-1" },
+                    React.createElement("span", { className: "text-gray-500 uppercase block text-[8px] tracking-wider" }, "Surprise Status"),
+                    React.createElement("span", { className: `font-bold uppercase tracking-widest ${isBreached ? 'text-amber-500 animate-pulse' : 'text-green-400'}` }, isBreached ? 'Breached / Alarm' : 'Nominal alignment')),
+                React.createElement("div", { className: "space-y-1 border-l border-gray-850 pl-3" },
+                    React.createElement("span", { className: "text-gray-500 uppercase block text-[8px] tracking-wider" }, "Free Energy Gap"),
+                    React.createElement("span", { className: "text-white font-bold" },
+                        Math.abs(vfe - 0.1).toFixed(4),
+                        " bits"))))));
+};

package/dist/components/PredictionMarketConsensusHud.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+export interface DialecticStep {
+    sequenceIndex: number;
+    speakerUrn: string;
+    assertion: string;
+    confidenceScore: number;
+    timestamp: string;
+}
+export interface Hypothesis {
+    id: 'proponent' | 'opponent' | string;
+    agentUrn: string;
+    shares: number;
+    probability: number;
+}
+export interface ConvergencePoint {
+    timestamp: string;
+    proponentProbability: number;
+}
+export interface DebateSessionData {
+    debateUrn: string;
+    thesis: string;
+    liquidityParameter: number;
+    hypotheses: Hypothesis[];
+    historicalProbabilityConvergence: ConvergencePoint[];
+    arguments: DialecticStep[];
+}
+export interface PredictionMarketConsensusHudProps {
+    data: DebateSessionData;
+    onTrade?: (hypothesisId: string, shareQty: number) => void;
+    className?: string;
+}
+export declare const PredictionMarketConsensusHud: React.FC<PredictionMarketConsensusHudProps>;

package/dist/components/PredictionMarketConsensusHud.js

@@ -0,0 +1,166 @@
+// 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-runtime>
+import React from 'react';
+import { GlassBox } from './GlassBox';
+import { TrendingUp, X, User, Scale } from 'lucide-react';
+export const PredictionMarketConsensusHud = ({ data, onTrade, className = '' }) => {
+    const [drawerOpen, setDrawerOpen] = React.useState(false);
+    const [selectedSpeaker, setSelectedSpeaker] = React.useState(null);
+    const proponent = data.hypotheses.find(h => h.id === 'proponent') || {
+        agentUrn: 'urn:coreason:agent:unknown-proponent',
+        shares: 0,
+        probability: 0.5
+    };
+    const opponent = data.hypotheses.find(h => h.id === 'opponent') || {
+        agentUrn: 'urn:coreason:agent:unknown-opponent',
+        shares: 0,
+        probability: 0.5
+    };
+    const proponentProb = proponent.probability;
+    const opponentProb = opponent.probability;
+    // Format short URN name for visual display
+    const getShortUrn = (urn) => {
+        return urn.split(':').slice(-2).join(':') || urn;
+    };
+    const filteredArguments = selectedSpeaker
+        ? data.arguments.filter(arg => arg.speakerUrn === selectedSpeaker)
+        : data.arguments;
+    // Build SVG points for opinion convergence chart
+    const points = React.useMemo(() => {
+        const history = data.historicalProbabilityConvergence || [];
+        if (history.length === 0)
+            return '';
+        const width = 500;
+        const height = 100;
+        return history
+            .map((p, index) => {
+            const x = history.length > 1 ? (index / (history.length - 1)) * width : width / 2;
+            const y = height - p.proponentProbability * height;
+            return `${x},${y}`;
+        })
+            .join(' ');
+    }, [data.historicalProbabilityConvergence]);
+    return (React.createElement("div", { className: `flex flex-col lg:flex-row gap-4 h-full w-full select-none ${className}` },
+        React.createElement("div", { className: "flex-1 flex flex-col gap-4 min-w-0" },
+            React.createElement(GlassBox, { density: "dense", className: "border border-white/10 bg-black/45 backdrop-blur-md p-4" },
+                React.createElement("div", { className: "flex items-start gap-3" },
+                    React.createElement(Scale, { className: "w-5 h-5 text-[var(--cr-accent-orange)] shrink-0 mt-0.5" }),
+                    React.createElement("div", null,
+                        React.createElement("div", { className: "text-[10px] font-bold text-gray-500 uppercase tracking-widest" }, "Active Dialectic Hypothesis Debate"),
+                        React.createElement("h2", { className: "text-sm font-semibold text-white mt-1 font-sans leading-relaxed" }, data.thesis),
+                        React.createElement("div", { className: "text-[9px] font-mono text-gray-400 mt-1 break-all" },
+                            "Debate Session: ",
+                            data.debateUrn,
+                            " | Liquidity parameter (b): ",
+                            data.liquidityParameter)))),
+            React.createElement(GlassBox, { density: "dense", className: "border border-white/5 bg-black/65 backdrop-blur-md p-6 flex flex-col gap-6" },
+                React.createElement("div", { className: "text-[11px] font-bold text-gray-400 uppercase tracking-widest" }, "Tug-of-War Consensus Track"),
+                React.createElement("div", { className: "flex items-center justify-between gap-4 py-2" },
+                    React.createElement("div", { onClick: () => {
+                            setSelectedSpeaker(proponent.agentUrn);
+                            setDrawerOpen(true);
+                        }, className: `p-3 rounded-lg border cursor-pointer transition-all w-[180px] bg-black/40 ${proponentProb > opponentProb
+                            ? 'border-[var(--cr-accent-cyan)] shadow-[0_0_15px_rgba(6,182,212,0.25)]'
+                            : 'border-white/5 hover:border-white/20'}` },
+                        React.createElement("div", { className: "flex items-center gap-2" },
+                            React.createElement("div", { className: "p-1.5 rounded bg-[var(--cr-accent-cyan)]/10 text-[var(--cr-accent-cyan)]" },
+                                React.createElement(User, { className: "w-4 h-4" })),
+                            React.createElement("div", { className: "min-w-0" },
+                                React.createElement("div", { className: "text-[9px] font-bold text-cyan-400 uppercase tracking-wider" }, "PROPONENT"),
+                                React.createElement("div", { className: "text-[10px] font-mono text-white truncate" }, getShortUrn(proponent.agentUrn)))),
+                        React.createElement("div", { className: "grid grid-cols-2 gap-2 mt-3 pt-2 border-t border-white/5" },
+                            React.createElement("div", null,
+                                React.createElement("div", { className: "text-[8px] text-gray-500 font-mono" }, "WEIGHT"),
+                                React.createElement("div", { className: "text-xs font-bold text-white font-mono" },
+                                    (proponentProb * 100).toFixed(1),
+                                    "%")),
+                            React.createElement("div", null,
+                                React.createElement("div", { className: "text-[8px] text-gray-500 font-mono" }, "SHARES"),
+                                React.createElement("div", { className: "text-xs font-bold text-white font-mono" }, proponent.shares.toFixed(1))))),
+                    React.createElement("div", { className: "flex-1 relative h-6 flex items-center" },
+                        React.createElement("div", { className: "absolute inset-x-0 h-1 bg-gray-800 rounded-full overflow-hidden" },
+                            React.createElement("div", { className: "h-full bg-gradient-to-r from-cyan-400 via-purple-500 to-orange-400 transition-all duration-300", style: { width: '100%' } })),
+                        React.createElement("div", { className: "absolute w-8 h-8 -ml-4 bg-white/10 backdrop-blur-md border-2 border-white rounded-full flex items-center justify-center shadow-[0_0_15px_rgba(255,255,255,0.4)] cursor-pointer transition-all duration-300 hover:scale-110 z-10", style: { left: `${proponentProb * 100}%` }, title: `Consensus Cursor: ${(proponentProb * 100).toFixed(1)}% Proponent` },
+                            React.createElement("div", { className: "w-2 h-2 rounded-full bg-white animate-ping" }))),
+                    React.createElement("div", { onClick: () => {
+                            setSelectedSpeaker(opponent.agentUrn);
+                            setDrawerOpen(true);
+                        }, className: `p-3 rounded-lg border cursor-pointer transition-all w-[180px] bg-black/40 ${opponentProb > proponentProb
+                            ? 'border-[var(--cr-accent-orange)] shadow-[0_0_15px_rgba(251,146,60,0.25)]'
+                            : 'border-white/5 hover:border-white/20'}` },
+                        React.createElement("div", { className: "flex items-center gap-2 justify-end text-right" },
+                            React.createElement("div", { className: "min-w-0" },
+                                React.createElement("div", { className: "text-[9px] font-bold text-orange-400 uppercase tracking-wider" }, "OPPONENT"),
+                                React.createElement("div", { className: "text-[10px] font-mono text-white truncate" }, getShortUrn(opponent.agentUrn))),
+                            React.createElement("div", { className: "p-1.5 rounded bg-[var(--cr-accent-orange)]/10 text-[var(--cr-accent-orange)]" },
+                                React.createElement(User, { className: "w-4 h-4" }))),
+                        React.createElement("div", { className: "grid grid-cols-2 gap-2 mt-3 pt-2 border-t border-white/5" },
+                            React.createElement("div", null,
+                                React.createElement("div", { className: "text-[8px] text-gray-500 font-mono" }, "WEIGHT"),
+                                React.createElement("div", { className: "text-xs font-bold text-white font-mono" },
+                                    (opponentProb * 100).toFixed(1),
+                                    "%")),
+                            React.createElement("div", null,
+                                React.createElement("div", { className: "text-[8px] text-gray-500 font-mono" }, "SHARES"),
+                                React.createElement("div", { className: "text-xs font-bold text-white font-mono" }, opponent.shares.toFixed(1)))))),
+                React.createElement("div", { className: "flex justify-between items-center pt-2 border-t border-white/5" },
+                    React.createElement("div", { className: "flex items-center gap-2" },
+                        React.createElement("button", { onClick: () => onTrade === null || onTrade === void 0 ? void 0 : onTrade('proponent', 10), className: "px-3 py-1.5 bg-cyan-950/45 hover:bg-cyan-950/80 border border-cyan-500/40 text-cyan-400 text-xs font-bold font-mono rounded cursor-pointer transition-all" }, "Bid Proponent (+10 Sh)"),
+                        React.createElement("button", { onClick: () => onTrade === null || onTrade === void 0 ? void 0 : onTrade('proponent', 50), className: "px-3 py-1.5 bg-cyan-900/60 hover:bg-cyan-900/90 border border-cyan-500/60 text-cyan-200 text-xs font-bold font-mono rounded cursor-pointer transition-all" }, "Bid Proponent (+50 Sh)")),
+                    React.createElement("div", { className: "text-[9px] font-mono text-gray-500 max-w-[150px] text-center leading-normal" }, "Bidding modifies market consensus probabilities using LMSR."),
+                    React.createElement("div", { className: "flex items-center gap-2" },
+                        React.createElement("button", { onClick: () => onTrade === null || onTrade === void 0 ? void 0 : onTrade('opponent', 10), className: "px-3 py-1.5 bg-orange-950/45 hover:bg-orange-950/80 border border-orange-500/40 text-orange-400 text-xs font-bold font-mono rounded cursor-pointer transition-all" }, "Bid Opponent (+10 Sh)"),
+                        React.createElement("button", { onClick: () => onTrade === null || onTrade === void 0 ? void 0 : onTrade('opponent', 50), className: "px-3 py-1.5 bg-orange-900/60 hover:bg-orange-900/90 border border-orange-500/60 text-orange-200 text-xs font-bold font-mono rounded cursor-pointer transition-all" }, "Bid Opponent (+50 Sh)")))),
+            React.createElement(GlassBox, { density: "dense", className: "border border-white/5 bg-black/65 backdrop-blur-md p-6" },
+                React.createElement("div", { className: "flex justify-between items-center mb-4" },
+                    React.createElement("div", { className: "flex items-center gap-2" },
+                        React.createElement(TrendingUp, { className: "w-4 h-4 text-purple-400" }),
+                        React.createElement("span", { className: "text-[11px] font-bold text-gray-400 uppercase tracking-widest" }, "Opinion Convergence Over Time")),
+                    React.createElement("span", { className: "text-[9px] font-mono text-gray-500" }, "Y-Axis: Proponent Probability (0.0 to 1.0)")),
+                React.createElement("div", { className: "relative w-full h-[120px] bg-black/20 rounded border border-white/5 p-1" },
+                    React.createElement("svg", { viewBox: "0 0 500 100", className: "w-full h-full", preserveAspectRatio: "none" },
+                        React.createElement("defs", null,
+                            React.createElement("linearGradient", { id: "chartGradient", x1: "0", y1: "0", x2: "0", y2: "1" },
+                                React.createElement("stop", { offset: "0%", stopColor: "#06b6d4", stopOpacity: "0.4" }),
+                                React.createElement("stop", { offset: "100%", stopColor: "#8b5cf6", stopOpacity: "0.0" }))),
+                        React.createElement("line", { x1: "0", y1: "50", x2: "500", y2: "50", stroke: "#ffffff", strokeOpacity: "0.05", strokeDasharray: "5,5" }),
+                        points && (React.createElement(React.Fragment, null,
+                            React.createElement("polygon", { points: `0,100 ${points} 500,100`, fill: "url(#chartGradient)" }),
+                            React.createElement("polyline", { fill: "none", stroke: "#00ffcc", strokeWidth: "1.5", points: points }))))))),
+        drawerOpen && (React.createElement(GlassBox, { density: "dense", className: "w-full lg:w-[320px] border border-white/15 bg-black/90 backdrop-blur-lg p-5 rounded-xl shadow-2xl flex flex-col shrink-0" },
+            React.createElement("div", { className: "flex justify-between items-center pb-3 border-b border-white/10 mb-4" },
+                React.createElement("div", { className: "flex flex-col" },
+                    React.createElement("span", { className: "text-[10px] font-bold text-purple-400 uppercase tracking-widest" }, "Reasoning Log"),
+                    React.createElement("span", { className: "text-[9px] text-gray-500 font-mono mt-0.5" }, selectedSpeaker ? `Speaker: ${getShortUrn(selectedSpeaker)}` : 'All Speakers')),
+                React.createElement("button", { onClick: () => {
+                        setDrawerOpen(false);
+                        setSelectedSpeaker(null);
+                    }, className: "text-gray-400 hover:text-white transition-colors cursor-pointer p-0.5 bg-white/5 rounded" },
+                    React.createElement(X, { className: "w-4 h-4" }))),
+            React.createElement("div", { className: "flex-1 overflow-y-auto space-y-3 pr-1 max-h-[400px] lg:max-h-none" }, filteredArguments.length === 0 ? (React.createElement("div", { className: "text-center py-8 text-xs text-gray-500 font-mono" }, "No debate arguments found.")) : (filteredArguments.map((arg) => {
+                const isProp = arg.speakerUrn === proponent.agentUrn;
+                return (React.createElement("div", { key: arg.sequenceIndex, className: `p-3 rounded-lg border flex flex-col gap-1.5 ${isProp
+                        ? 'border-cyan-950 bg-cyan-950/20 text-left'
+                        : 'border-orange-950 bg-orange-950/20 text-left'}` },
+                    React.createElement("div", { className: "flex justify-between items-center" },
+                        React.createElement("span", { className: "text-[8px] font-bold font-mono px-1.5 py-0.5 rounded bg-black/30 text-gray-300" },
+                            "#",
+                            arg.sequenceIndex),
+                        React.createElement("span", { className: `text-[8px] font-bold font-mono uppercase tracking-wider ${isProp ? 'text-cyan-400' : 'text-orange-400'}` }, isProp ? 'PROPONENT' : 'OPPONENT')),
+                    React.createElement("p", { className: "text-[10px] text-gray-200 leading-normal font-sans" }, arg.assertion),
+                    React.createElement("div", { className: "flex justify-between items-center pt-1.5 border-t border-white/5 mt-1 text-[8px] font-mono text-gray-400" },
+                        React.createElement("span", null,
+                            "CONFIDENCE: ",
+                            (arg.confidenceScore * 100).toFixed(0),
+                            "%"),
+                        React.createElement("span", null, new Date(arg.timestamp).toLocaleTimeString()))));
+            }))),
+            selectedSpeaker && (React.createElement("button", { onClick: () => setSelectedSpeaker(null), className: "mt-4 w-full py-1.5 bg-white/5 hover:bg-white/10 text-gray-300 hover:text-white border border-white/5 rounded text-[10px] font-mono font-bold cursor-pointer transition-all" }, "Clear Filter"))))));
+};

package/dist/components/SpeculativeTreeRenderer.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+export type SpeculativeValidationStatus = 'speculative_draft' | 'target_validated' | 'target_rejected';
+export interface SpeculativeTokenNode {
+    tokenId: string;
+    tokenValue: string;
+    logitProbability: number;
+    validationStatus: SpeculativeValidationStatus;
+    childSpeculations: SpeculativeTokenNode[];
+}
+export interface SpeculativeTreeRendererProps {
+    tokenTree: SpeculativeTokenNode;
+    onTokenFocus?: (token: SpeculativeTokenNode) => void;
+    className?: string;
+}
+/**
+ * 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 declare const SpeculativeTreeRenderer: React.FC<SpeculativeTreeRendererProps>;

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/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>;

package/dist/components/WasmSandboxCagingHud.js

@@ -0,0 +1,167 @@
+// 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-runtime>
+import React from 'react';
+import { GlassBox } from './GlassBox';
+import { Shield, Zap, AlertTriangle, Activity } from 'lucide-react';
+export const WasmSandboxCagingHud = ({ telemetry, attestation = {
+    transactionId: 'tx_pending',
+    proofStatus: 'UNCHECKED',
+    originatingAgentUrn: 'urn:coreason:agent:unknown',
+    verificationTimestamp: new Date().toISOString(),
+    zkProofHash: '0x0000000000000000000000000000000000000000000000000000000000000000',
+    sdJwtCompliance: false
+}, className = '' }) => {
+    const ceilingRam = 10485760; // 10MB in bytes
+    const ramPercent = Math.min((telemetry.ramBytesAllocated / ceilingRam) * 100, 100);
+    const ramMb = telemetry.ramBytesAllocated / 1048576;
+    const criticalThreshold = 8388608; // 8MB in bytes
+    const isCriticalRam = telemetry.ramBytesAllocated >= criticalThreshold;
+    // Determine bubble count and rise animation duration based on CPU burn rate
+    const bubbleCount = 8;
+    const bubbleSpeedSeconds = Math.max(0.4, 6 - Math.min(5.5, telemetry.cpuFuelBurnRate / 8000));
+    const isProofValidated = attestation.proofStatus === 'VALIDATED';
+    const isProofForged = attestation.proofStatus === 'FORGED' || attestation.proofStatus === 'INVALID';
+    return (React.createElement("div", { className: `flex flex-col lg:flex-row gap-6 w-full h-full select-none text-white ${className}` },
+        React.createElement(GlassBox, { density: "dense", className: "flex-1 border border-white/10 bg-black/55 backdrop-blur-md p-6 flex flex-col gap-6 rounded-xl" },
+            React.createElement("div", { className: "flex items-center justify-between border-b border-white/10 pb-3" },
+                React.createElement("div", { className: "flex items-center gap-2" },
+                    React.createElement(Zap, { className: "w-4 h-4 text-cyan-400" }),
+                    React.createElement("span", { className: "text-[11px] font-bold text-gray-400 uppercase tracking-widest" }, "WASM Thermodynamic Supervisor")),
+                React.createElement("span", { className: "text-[9px] font-mono text-gray-500 truncate max-w-[200px]", title: telemetry.sandboxUrn }, telemetry.sandboxUrn.split(':').slice(-2).join(':') || telemetry.sandboxUrn)),
+            React.createElement("div", { className: "flex flex-col md:flex-row gap-8 items-center justify-center py-4" },
+                React.createElement("div", { className: "flex flex-col items-center gap-3" },
+                    React.createElement("div", { className: "text-[10px] font-bold text-gray-400 uppercase tracking-wider" }, "Volumetric RAM Ceiling (10MB)"),
+                    React.createElement("div", { className: "relative w-28 h-64 bg-black/40 border border-white/10 rounded-t-full rounded-b-full shadow-inner overflow-hidden flex flex-col justify-end" },
+                        React.createElement("div", { className: "absolute top-0 left-0 right-0 h-6 bg-white/5 border-b border-white/15 rounded-full z-20" }),
+                        React.createElement("div", { className: "absolute inset-0 z-10 pointer-events-none overflow-hidden" }, Array.from({ length: bubbleCount }).map((_, index) => {
+                            const leftOffset = 15 + index * 10;
+                            const delay = index * 0.35;
+                            const scale = 0.5 + (index % 3) * 0.25;
+                            return (React.createElement("div", { key: index, className: "absolute bottom-2 w-2 h-2 bg-cyan-400/40 rounded-full", style: {
+                                    left: `${leftOffset}%`,
+                                    animationName: 'rise',
+                                    animationDuration: `${bubbleSpeedSeconds}s`,
+                                    animationTimingFunction: 'linear',
+                                    animationIterationCount: 'infinite',
+                                    animationDelay: `${delay}s`,
+                                    transform: `scale(${scale})`
+                                } }));
+                        })),
+                        React.createElement("div", { className: `relative w-full transition-all duration-700 ease-out z-0 flex flex-col justify-start`, style: {
+                                height: `${ramPercent}%`,
+                                background: isCriticalRam
+                                    ? 'linear-gradient(to top, rgba(239, 68, 68, 0.4), rgba(220, 38, 38, 0.7))'
+                                    : 'linear-gradient(to top, rgba(6, 182, 212, 0.3), rgba(14, 165, 233, 0.55))'
+                            } },
+                            React.createElement("div", { className: `absolute -top-3 left-0 right-0 h-6 rounded-full border-t border-white/20 transition-all duration-700`, style: {
+                                    backgroundColor: isCriticalRam ? 'rgba(220, 38, 38, 0.85)' : 'rgba(14, 165, 233, 0.75)',
+                                    boxShadow: isCriticalRam ? '0 0 12px rgba(220, 38, 38, 0.8)' : '0 0 12px rgba(14, 165, 233, 0.6)'
+                                } })),
+                        React.createElement("div", { className: "absolute bottom-[80%] left-0 right-0 border-t border-red-500/30 border-dashed z-20 flex justify-end pr-2 pointer-events-none" },
+                            React.createElement("span", { className: "text-[8px] text-red-400/70 font-mono bg-black/40 px-1 rounded -translate-y-1.5" }, "80% (8MB)"))),
+                    React.createElement("div", { className: "text-center font-mono mt-1" },
+                        React.createElement("span", { className: `text-base font-bold ${isCriticalRam ? 'text-red-400 animate-pulse' : 'text-cyan-400'}` },
+                            ramMb.toFixed(2),
+                            " MB"),
+                        React.createElement("span", { className: "text-[9px] text-gray-500 block" },
+                            "Utilization: ",
+                            ramPercent.toFixed(1),
+                            "%"))),
+                React.createElement("div", { className: "flex-1 w-full flex flex-col gap-4 font-mono" },
+                    React.createElement("div", { className: "p-3 bg-black/35 rounded-lg border border-white/5" },
+                        React.createElement("div", { className: "text-[9px] text-gray-500 uppercase tracking-wider" }, "Remaining Instruction Fuel"),
+                        React.createElement("div", { className: "text-lg font-bold text-white mt-1" },
+                            telemetry.cpuFuelRemaining.toLocaleString(),
+                            " units"),
+                        React.createElement("div", { className: "w-full bg-gray-900 rounded-full h-1.5 overflow-hidden border border-white/5 mt-2" },
+                            React.createElement("div", { className: "h-full bg-cyan-400 rounded-full transition-all duration-300", style: { width: `${Math.min(100, (telemetry.cpuFuelRemaining / 1000000) * 100)}%` } }))),
+                    React.createElement("div", { className: "p-3 bg-black/35 rounded-lg border border-white/5" },
+                        React.createElement("div", { className: "text-[9px] text-gray-500 uppercase tracking-wider" }, "CPU Instruction Velocity"),
+                        React.createElement("div", { className: "text-lg font-bold text-[var(--cr-accent-orange)] mt-1 flex items-baseline gap-1" },
+                            telemetry.cpuFuelBurnRate.toLocaleString(),
+                            React.createElement("span", { className: "text-[9px] text-gray-400 font-normal" }, "fuel/sec")),
+                        React.createElement("div", { className: "flex items-center gap-1.5 mt-2 text-[9px] text-gray-400" },
+                            React.createElement(Activity, { className: "w-3 h-3 text-orange-400 animate-pulse" }),
+                            React.createElement("span", null, "Bubble speed scaled dynamically."))),
+                    isCriticalRam && (React.createElement("div", { className: "p-3 bg-red-950/45 border border-red-500/40 rounded-lg flex items-start gap-2 animate-pulse" },
+                        React.createElement(AlertTriangle, { className: "w-4 h-4 text-red-400 shrink-0 mt-0.5" }),
+                        React.createElement("div", null,
+                            React.createElement("div", { className: "text-[9px] font-bold text-red-300 uppercase tracking-wider" }, "RESOURCE PANIC STATUS"),
+                            React.createElement("p", { className: "text-[9px] text-red-200 mt-0.5 leading-relaxed" }, "WASM guest node allocation has breached the 8MB thermodynamic warning limit. Isolation supervisor enforces hard halt at 10MB."))))))),
+        React.createElement(GlassBox, { density: "dense", className: "w-full lg:w-[360px] border border-white/10 bg-black/55 backdrop-blur-md p-6 flex flex-col gap-6 rounded-xl shrink-0" },
+            React.createElement("div", { className: "flex items-center gap-2 border-b border-white/10 pb-3" },
+                React.createElement(Shield, { className: "w-4 h-4 text-green-400" }),
+                React.createElement("span", { className: "text-[11px] font-bold text-gray-400 uppercase tracking-widest" }, "Attestation & Proof Shield")),
+            React.createElement("div", { className: "flex flex-col items-center justify-center py-6 gap-6" },
+                React.createElement("div", { className: "relative w-40 h-40 flex items-center justify-center perspective-[800px]" },
+                    React.createElement("div", { className: "relative w-32 h-32 transform-style-3d transition-transform duration-1000 ease-in-out", style: {
+                            transform: `rotateX(15deg) ${isProofForged ? 'rotateY(180deg)' : 'rotateY(0deg)'}`
+                        } },
+                        React.createElement("div", { className: "absolute inset-0 transform-style-3d transition-all duration-700 backface-hidden flex items-center justify-center", style: {
+                                transform: isProofValidated ? 'rotateY(0deg)' : 'rotateY(110deg)'
+                            } },
+                            React.createElement("svg", { viewBox: "0 0 100 100", className: "w-full h-full drop-shadow-[0_0_15px_rgba(34,197,94,0.4)]" },
+                                React.createElement("polygon", { points: "50,10 85,25 85,60 50,90 15,60 15,25", fill: "#14532d", fillOpacity: "0.8", stroke: "#22c55e", strokeWidth: "2" }),
+                                React.createElement("polygon", { points: "50,10 50,90 15,60", fill: "#15803d", fillOpacity: "0.4", stroke: "#22c55e", strokeWidth: "1" }),
+                                React.createElement("polygon", { points: "50,10 85,25 50,90", fill: "#166534", fillOpacity: "0.4", stroke: "#22c55e", strokeWidth: "1" }),
+                                React.createElement("path", { d: "M40,40 V30 A10,10 0 0,1 60,30 V40 M32,40 H68 V68 H32 Z", fill: "none", stroke: "#22c55e", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+                                React.createElement("circle", { cx: "50", cy: "52", r: "3", fill: "#22c55e" }))),
+                        React.createElement("div", { className: "absolute inset-0 transform-style-3d transition-all duration-700 backface-hidden flex items-center justify-center", style: {
+                                transform: isProofForged ? 'rotateY(0deg)' : 'rotateY(-110deg)'
+                            } },
+                            React.createElement("svg", { viewBox: "0 0 100 100", className: "w-full h-full drop-shadow-[0_0_15px_rgba(249,115,22,0.45)]" },
+                                React.createElement("polygon", { points: "50,25 65,45 35,45", fill: "#7c2d12", stroke: "#f97316", strokeWidth: "1.5" }),
+                                React.createElement("polygon", { points: "35,45 20,65 50,65", fill: "#9a3412", stroke: "#f97316", strokeWidth: "1.5" }),
+                                React.createElement("polygon", { points: "65,45 50,65 80,65", fill: "#7c2d12", stroke: "#f97316", strokeWidth: "1.5" }),
+                                React.createElement("line", { x1: "30", y1: "35", x2: "70", y2: "75", stroke: "#ea580c", strokeWidth: "3", strokeDasharray: "4,4" }),
+                                React.createElement("line", { x1: "40", y1: "25", x2: "80", y2: "65", stroke: "#ea580c", strokeWidth: "3", strokeDasharray: "4,4" }),
+                                React.createElement("path", { d: "M45,45 L55,55 M55,45 L45,55", fill: "none", stroke: "#ef4444", strokeWidth: "3", strokeLinecap: "round" }))),
+                        !isProofValidated && !isProofForged && (React.createElement("div", { className: "absolute inset-0 flex items-center justify-center" },
+                            React.createElement("svg", { viewBox: "0 0 100 100", className: "w-full h-full opacity-60" },
+                                React.createElement("polygon", { points: "50,15 80,30 80,65 50,85 20,65 20,30", fill: "#1e293b", fillOpacity: "0.7", stroke: "#64748b", strokeWidth: "2", strokeDasharray: "3,3" }),
+                                React.createElement("path", { d: "M42,40 V32 A8,8 0 0,1 58,32 V40 M35,40 H65 V65 H35 Z", fill: "none", stroke: "#64748b", strokeWidth: "2" }))))),
+                    React.createElement("div", { className: "absolute bottom-2 flex flex-col items-center" },
+                        React.createElement("span", { className: `text-[10px] font-bold px-2 py-0.5 rounded tracking-widest font-mono border ${isProofValidated
+                                ? 'bg-green-900/60 text-green-300 border-green-500/30'
+                                : isProofForged
+                                    ? 'bg-orange-950/60 text-orange-400 border-orange-500/30 animate-pulse'
+                                    : 'bg-slate-900/60 text-slate-400 border-slate-700/30'}` }, attestation.proofStatus))),
+                React.createElement("div", { className: "w-full font-mono text-[9px] bg-black/35 rounded-lg border border-white/5 p-3 flex flex-col gap-2" },
+                    React.createElement("div", { className: "flex justify-between border-b border-white/5 pb-1" },
+                        React.createElement("span", { className: "text-gray-500" }, "Transaction ID"),
+                        React.createElement("span", { className: "text-white font-bold" }, attestation.transactionId)),
+                    React.createElement("div", { className: "flex justify-between border-b border-white/5 pb-1" },
+                        React.createElement("span", { className: "text-gray-500" }, "Proof Hash"),
+                        React.createElement("span", { className: "text-gray-300 truncate w-[160px] text-right", title: attestation.zkProofHash }, attestation.zkProofHash)),
+                    React.createElement("div", { className: "flex justify-between border-b border-white/5 pb-1" },
+                        React.createElement("span", { className: "text-gray-500" }, "SD-JWT Compliance"),
+                        React.createElement("span", { className: attestation.sdJwtCompliance ? 'text-green-400 font-bold' : 'text-orange-400 font-bold' }, attestation.sdJwtCompliance ? 'COMPLIANT' : 'DEFICIT')),
+                    React.createElement("div", { className: "flex justify-between" },
+                        React.createElement("span", { className: "text-gray-500" }, "Attestation Timestamp"),
+                        React.createElement("span", { className: "text-gray-400" }, new Date(attestation.verificationTimestamp).toLocaleTimeString()))))),
+        React.createElement("style", null, `
+        @keyframes rise {
+          0% {
+            transform: translateY(100%) scale(0.6);
+            opacity: 0;
+          }
+          10% {
+            opacity: 0.6;
+          }
+          90% {
+            opacity: 0.6;
+          }
+          100% {
+            transform: translateY(-240px) scale(1.1);
+            opacity: 0;
+          }
+        }
+      `)));
+};

package/dist/index.d.ts

@@ -6,7 +6,7 @@ export { ThermodynamicGovernor } from './components/ThermodynamicGovernor';
 export { QuorumAdjudicator } from './components/QuorumAdjudicator';
 export { HolographicAuditTrail } from './components/HolographicAuditTrail';
 export { MarkovBlanketLens } from './components/MarkovBlanketLens';
-export { TopologicalCanvas } from './components/TopologicalCanvas';
+export { TopologicalCanvas, computeBlastRadius } from './components/TopologicalCanvas';
 export { CognitiveIntrospectionPanel } from './components/CognitiveIntrospectionPanel';
 export { SVIDBadge } from './components/SVIDBadge';
 export { ConformanceGuillotine } from './components/ConformanceGuillotine';
@@ -17,3 +17,9 @@ export { SensoryUnfolder } from './components/SensoryUnfolder';
 export { MultimodalProjection } from './components/MultimodalProjection';
 export { MultimodalCapture } from './components/MultimodalCapture';
 export { DynamicToposRenderer } from './components/DynamicToposRenderer';
+export { SpeculativeTreeRenderer } from './components/SpeculativeTreeRenderer';
+export type { SpeculativeTokenNode, SpeculativeTreeRendererProps, SpeculativeValidationStatus } from './components/SpeculativeTreeRenderer';
+export { EpistemicDeficitRadar } from './components/EpistemicDeficitRadar';
+export type { EpistemicDeficitRadarProps } from './components/EpistemicDeficitRadar';
+export { WasmSandboxCagingHud } from './components/WasmSandboxCagingHud';
+export type { WasmSandboxCagingHudProps, SandboxHardwareTelemetry, AttestationReceipt } from './components/WasmSandboxCagingHud';

package/dist/index.js

@@ -15,7 +15,7 @@ export { ThermodynamicGovernor } from './components/ThermodynamicGovernor';
 export { QuorumAdjudicator } from './components/QuorumAdjudicator';
 export { HolographicAuditTrail } from './components/HolographicAuditTrail';
 export { MarkovBlanketLens } from './components/MarkovBlanketLens';
-export { TopologicalCanvas } from './components/TopologicalCanvas';
+export { TopologicalCanvas, computeBlastRadius } from './components/TopologicalCanvas';
 export { CognitiveIntrospectionPanel } from './components/CognitiveIntrospectionPanel';
 export { SVIDBadge } from './components/SVIDBadge';
 export { ConformanceGuillotine } from './components/ConformanceGuillotine';
@@ -26,3 +26,6 @@ export { SensoryUnfolder } from './components/SensoryUnfolder';
 export { MultimodalProjection } from './components/MultimodalProjection';
 export { MultimodalCapture } from './components/MultimodalCapture';
 export { DynamicToposRenderer } from './components/DynamicToposRenderer';
+export { SpeculativeTreeRenderer } from './components/SpeculativeTreeRenderer';
+export { EpistemicDeficitRadar } from './components/EpistemicDeficitRadar';
+export { WasmSandboxCagingHud } from './components/WasmSandboxCagingHud';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreason-ai/sensory-core",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Topos-Theoretic UI primitive library for the CoReason Cybernetic Manifold. Stateless, hollow React components that project coreason-manifest Pydantic ASTs into the DOM.",
   "license": "Prosperity-3.0",
   "author": "CoReason, Inc. <info@coreason.ai>",