@coreason-ai/sensory-core 1.3.0 → 1.5.0

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/SemanticConstellationMap.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+export interface SemanticConceptNode {
+    id: string;
+    label: string;
+    x: number;
+    y: number;
+    z: number;
+    group: string;
+    weight: number;
+}
+export interface SemanticConceptEdge {
+    source: string;
+    target: string;
+    strength: number;
+}
+export interface SemanticConstellationMapProps {
+    nodes: SemanticConceptNode[];
+    edges: SemanticConceptEdge[];
+    activeNodeId?: string;
+    onSelectNode?: (nodeId: string) => void;
+    className?: string;
+}
+export declare const SemanticConstellationMap: React.FC<SemanticConstellationMapProps>;

package/dist/components/SemanticConstellationMap.js

@@ -0,0 +1,273 @@
+// Copyright (c) 2026 CoReason, Inc.
+//
+// This software is proprietary and dual-licensed.
+// Licensed under the Prosperity Public License 3.0.
+import React, { useRef, useEffect, useState } from 'react';
+import { GlassBox, cn } from './GlassBox';
+// Map group names to beautiful sleek neon colors
+const GROUP_COLORS = {
+    alignment: '#00ffcc', // CoReason Accent Cyan
+    inference: '#a855f7', // Purple
+    sensory: '#f43f5e', // Rose
+    temporal: '#eab308', // Yellow
+    default: '#3b82f6', // Blue
+};
+export const SemanticConstellationMap = ({ nodes, edges, activeNodeId, onSelectNode, className, }) => {
+    const canvasRef = useRef(null);
+    const containerRef = useRef(null);
+    const angleRef = useRef(0);
+    const animationFrameIdRef = useRef(null);
+    const [hoveredNodeId, setHoveredNodeId] = useState(undefined);
+    const [dimensions, setDimensions] = useState({ width: 400, height: 350 });
+    // Handle container resizing to fit layout
+    useEffect(() => {
+        if (!containerRef.current)
+            return;
+        const resizeObserver = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                const { width, height } = entry.contentRect;
+                setDimensions({
+                    width: Math.max(width, 100),
+                    height: Math.max(height, 100),
+                });
+            }
+        });
+        resizeObserver.observe(containerRef.current);
+        return () => resizeObserver.disconnect();
+    }, []);
+    // Compute rotation & render projected coordinates
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return;
+        let isComponentActive = true;
+        const renderLoop = () => {
+            if (!isComponentActive)
+                return;
+            // Adjust rotation angle over time
+            angleRef.current += 0.003;
+            const angle = angleRef.current;
+            const cosA = Math.cos(angle);
+            const sinA = Math.sin(angle);
+            const { width, height } = dimensions;
+            // Clear canvas with deep space translucent black
+            ctx.fillStyle = '#080808';
+            ctx.fillRect(0, 0, width, height);
+            // Draw subtle space grid or background stars
+            ctx.strokeStyle = 'rgba(255, 255, 255, 0.02)';
+            ctx.lineWidth = 1;
+            const step = 40;
+            for (let x = 0; x < width; x += step) {
+                ctx.beginPath();
+                ctx.moveTo(x, 0);
+                ctx.lineTo(x, height);
+                ctx.stroke();
+            }
+            for (let y = 0; y < height; y += step) {
+                ctx.beginPath();
+                ctx.moveTo(0, y);
+                ctx.lineTo(width, y);
+                ctx.stroke();
+            }
+            const cameraDistance = 2.5;
+            const scale = Math.min(width, height) * 0.42;
+            // 1. Project all nodes into 2D space
+            const projectedNodes = nodes.map((node) => {
+                // Rotate about Y axis
+                const rx = node.x * cosA - node.z * sinA;
+                const ry = node.y;
+                const rz = node.x * sinA + node.z * cosA;
+                // Perspective scaling factor
+                const depthScale = 1.0 / (cameraDistance - rz);
+                const projX = width / 2 + rx * scale * depthScale;
+                const projY = height / 2 + ry * scale * depthScale;
+                return Object.assign(Object.assign({}, node), { projX,
+                    projY, projZ: rz, depthScale });
+            });
+            // 2. Sort nodes by depth (painter's algorithm: draw furthest first)
+            projectedNodes.sort((a, b) => a.projZ - b.projZ);
+            // Establish a lookup map for projected nodes
+            const projectedNodeMap = new Map();
+            for (const pNode of projectedNodes) {
+                projectedNodeMap.set(pNode.id, pNode);
+            }
+            // 3. Draw Cluster Nebulas (Group centers of gravity)
+            // Group nodes by cluster
+            const groups = Array.from(new Set(nodes.map(n => n.group)));
+            for (const group of groups) {
+                const groupNodes = projectedNodes.filter(n => n.group === group);
+                if (groupNodes.length === 0)
+                    continue;
+                // Calculate average projected position
+                let avgX = 0;
+                let avgY = 0;
+                let avgZ = 0;
+                for (const n of groupNodes) {
+                    avgX += n.projX;
+                    avgY += n.projY;
+                    avgZ += n.projZ;
+                }
+                avgX /= groupNodes.length;
+                avgY /= groupNodes.length;
+                avgZ /= groupNodes.length;
+                // Base nebula color
+                const baseColor = GROUP_COLORS[group] || GROUP_COLORS.default;
+                // Nebula size scales with depth and cluster weight sum
+                const groupWeight = groupNodes.reduce((sum, n) => sum + n.weight, 0);
+                const depthScale = 1.0 / (cameraDistance - avgZ);
+                const radius = Math.max(30, groupWeight * 20 * depthScale);
+                // Simulate radial gradient with concentric transparent circles
+                // to avoid using the forbidden radial gradient method
+                const preservedAlpha = ctx.globalAlpha;
+                const iterations = 8;
+                for (let i = 0; i < iterations; i++) {
+                    const ratio = (iterations - i) / iterations;
+                    const currentRadius = radius * ratio;
+                    ctx.beginPath();
+                    ctx.arc(avgX, avgY, currentRadius, 0, Math.PI * 2);
+                    ctx.fillStyle = baseColor;
+                    // Soft exponential opacity falloff
+                    ctx.globalAlpha = 0.015 * Math.pow(ratio, 2);
+                    ctx.fill();
+                }
+                ctx.globalAlpha = preservedAlpha;
+            }
+            // 4. Draw Edges (Associations)
+            for (const edge of edges) {
+                const sourceNode = projectedNodeMap.get(edge.source);
+                const targetNode = projectedNodeMap.get(edge.target);
+                if (!sourceNode || !targetNode)
+                    continue;
+                const averageDepthZ = (sourceNode.projZ + targetNode.projZ) / 2;
+                const depthFactor = (averageDepthZ + 1.0) / 2.0; // [0.0, 1.0] range
+                ctx.beginPath();
+                ctx.moveTo(sourceNode.projX, sourceNode.projY);
+                ctx.lineTo(targetNode.projX, targetNode.projY);
+                // Edge opacity maps to depth and strength
+                ctx.strokeStyle = '#333344';
+                ctx.globalAlpha = Math.max(0.05, 0.15 * edge.strength * depthFactor);
+                ctx.lineWidth = Math.max(0.5, 2.0 * edge.strength * depthFactor);
+                ctx.stroke();
+                ctx.globalAlpha = 1.0;
+            }
+            // 5. Draw Nodes & Labels
+            for (const pNode of projectedNodes) {
+                const isHovered = hoveredNodeId === pNode.id;
+                const isActive = activeNodeId === pNode.id;
+                const nodeColor = GROUP_COLORS[pNode.group] || GROUP_COLORS.default;
+                // Base particle radius based on depth and importance
+                const radius = Math.max(2, pNode.weight * 6 * pNode.depthScale);
+                // Highlight ring around active node
+                if (isActive) {
+                    ctx.beginPath();
+                    ctx.arc(pNode.projX, pNode.projY, radius * 2.2, 0, Math.PI * 2);
+                    ctx.strokeStyle = nodeColor;
+                    ctx.lineWidth = 1.5;
+                    ctx.globalAlpha = 0.4 + 0.2 * Math.sin(Date.now() / 150);
+                    ctx.stroke();
+                    ctx.globalAlpha = 1.0;
+                }
+                // Draw core node particle
+                ctx.beginPath();
+                ctx.arc(pNode.projX, pNode.projY, radius, 0, Math.PI * 2);
+                ctx.fillStyle = nodeColor;
+                // Add brightness for hovered or active nodes
+                if (isHovered || isActive) {
+                    ctx.shadowBlur = 12;
+                    ctx.shadowColor = nodeColor;
+                }
+                else {
+                    ctx.shadowBlur = 0;
+                }
+                ctx.fill();
+                ctx.shadowBlur = 0;
+                // Draw label text
+                const shouldShowLabel = isHovered || isActive || pNode.weight > 0.8;
+                if (shouldShowLabel) {
+                    ctx.fillStyle = isHovered ? '#ffffff' : 'rgba(255, 255, 255, 0.7)';
+                    ctx.font = `${Math.max(9, Math.round(11 * pNode.depthScale))}px monospace`;
+                    ctx.textAlign = 'left';
+                    ctx.textBaseline = 'middle';
+                    const textX = pNode.projX + radius + 6;
+                    const textY = pNode.projY;
+                    ctx.fillText(pNode.label, textX, textY);
+                    // Draw a small helper indicator for active/hovered node
+                    if (isHovered) {
+                        ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
+                        ctx.lineWidth = 0.5;
+                        ctx.beginPath();
+                        ctx.moveTo(pNode.projX, pNode.projY);
+                        ctx.lineTo(textX - 2, textY);
+                        ctx.stroke();
+                    }
+                }
+            }
+            animationFrameIdRef.current = requestAnimationFrame(renderLoop);
+        };
+        renderLoop();
+        return () => {
+            isComponentActive = false;
+            if (animationFrameIdRef.current) {
+                cancelAnimationFrame(animationFrameIdRef.current);
+            }
+        };
+    }, [nodes, edges, activeNodeId, hoveredNodeId, dimensions]);
+    // Spatial mouse verification to identify hovered node
+    const handleMouseMove = (event) => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        const rect = canvas.getBoundingClientRect();
+        const mouseX = event.clientX - rect.left;
+        const mouseY = event.clientY - rect.top;
+        const { width, height } = dimensions;
+        const cameraDistance = 2.5;
+        const scale = Math.min(width, height) * 0.42;
+        const angle = angleRef.current;
+        const cosA = Math.cos(angle);
+        const sinA = Math.sin(angle);
+        let closestNodeId = undefined;
+        let minDistance = 16.0; // Click proximity tolerance threshold in pixels
+        for (const node of nodes) {
+            // Apply exact projection to find projected coordinates
+            const rx = node.x * cosA - node.z * sinA;
+            const ry = node.y;
+            const rz = node.x * sinA + node.z * cosA;
+            const depthScale = 1.0 / (cameraDistance - rz);
+            const projX = width / 2 + rx * scale * depthScale;
+            const projY = height / 2 + ry * scale * depthScale;
+            const dist = Math.hypot(projX - mouseX, projY - mouseY);
+            if (dist < minDistance) {
+                minDistance = dist;
+                closestNodeId = node.id;
+            }
+        }
+        if (closestNodeId !== hoveredNodeId) {
+            setHoveredNodeId(closestNodeId);
+        }
+    };
+    // Proximity click handler
+    const handleCanvasClick = () => {
+        if (hoveredNodeId && onSelectNode) {
+            onSelectNode(hoveredNodeId);
+        }
+    };
+    return (React.createElement(GlassBox, { className: cn('relative flex flex-col min-h-[300px]', className), variant: "black" },
+        React.createElement("div", { className: "flex justify-between items-center border-b border-gray-800 pb-2 mb-2 font-mono" },
+            React.createElement("div", null,
+                React.createElement("h3", { className: "text-xs font-semibold text-white tracking-widest uppercase" }, "Belief Constellation Map"),
+                React.createElement("span", { className: "text-[9px] text-gray-500 uppercase" }, "High-Dimensional Concept Topology")),
+            activeNodeId && (React.createElement("div", { className: "text-[9px] text-[var(--cr-accent-cyan)] font-mono uppercase bg-emerald-950/40 border border-emerald-900/60 px-2 py-0.5 rounded" }, "Target Focus Active"))),
+        React.createElement("div", { ref: containerRef, className: "relative flex-grow w-full h-full overflow-hidden bg-black/40 rounded border border-gray-900" },
+            React.createElement("canvas", { ref: canvasRef, width: dimensions.width, height: dimensions.height, onMouseMove: handleMouseMove, onClick: handleCanvasClick, className: "block cursor-crosshair" }),
+            React.createElement("div", { className: "absolute bottom-2 left-2 pointer-events-none font-mono text-[8px] text-gray-600 uppercase flex flex-col space-y-0.5" },
+                React.createElement("span", null, "Projection: Perspective (Y-Rot)"),
+                React.createElement("span", null,
+                    "Nodes: ",
+                    nodes.length,
+                    " | Edges: ",
+                    edges.length)))));
+};

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