@hugobatist/smartcode 0.1.0

package/dist/static/ghost-paths.js

@@ -0,0 +1,397 @@
+/**
+ * SmartCode Ghost Paths -- renders discarded reasoning branches as
+ * curved dashed lines on the diagram SVG. Toggle visibility via button.
+ *
+ * Dependencies:
+ *   - diagram-dom.js (DiagramDOM)
+ *   - event-bus.js (SmartCodeEventBus)
+ */
+(function() {
+    'use strict';
+
+    var SVG_NS = 'http://www.w3.org/2000/svg';
+    var LS_KEY = 'smartcode-ghost-paths-visible';
+
+    // Visual config
+    var GHOST_COLOR = '#8b5cf6';      // matches --ghost-path token
+    var GHOST_OPACITY = 0.55;
+    var GHOST_STROKE_W = 2;
+    var GHOST_DASH = '6,4';
+    var LABEL_FONT_SIZE = 10;
+    var LABEL_BG_PAD_X = 6;
+    var LABEL_BG_PAD_Y = 3;
+    var LABEL_BG_COLOR = '#18181b';   // matches --surface-1 token
+    var LABEL_BG_OPACITY = 0.85;
+    var LABEL_MAX_CHARS = 40;
+    var CURVE_OFFSET = 60;            // Bezier curve offset to avoid straight-line crossings
+
+    // ── Module State ──
+    var ghostPathsByFile = {};   // { filePath: [ghostPath, ...] }
+    var visible = false;
+    var userExplicitlyHid = false; // Track if user manually toggled off (GHOST-06)
+
+    // ── Helpers ──
+
+    function loadVisibility() {
+        try {
+            var stored = localStorage.getItem(LS_KEY);
+            if (stored !== null) visible = stored === 'true';
+        } catch (e) { /* localStorage unavailable */ }
+    }
+
+    function saveVisibility() {
+        try { localStorage.setItem(LS_KEY, String(visible)); } catch (e) {}
+    }
+
+    /** Get ghost paths for the currently viewed file */
+    function getCurrentPaths() {
+        var file = window.SmartCodeFileTree ? SmartCodeFileTree.getCurrentFile() : null;
+        if (!file) return [];
+        return ghostPathsByFile[file] || [];
+    }
+
+    function updateBadge() {
+        var badge = document.getElementById('ghostCountBadge');
+        if (badge) {
+            var count = getCurrentPaths().length;
+            badge.textContent = count || '';
+            badge.dataset.count = count;
+        }
+    }
+
+    function updateButtonState() {
+        var btn = document.getElementById('btnGhostPaths');
+        if (btn) btn.classList.toggle('active', visible);
+    }
+
+    function truncateLabel(label) {
+        if (!label) return '';
+        return label.length > LABEL_MAX_CHARS
+            ? label.substring(0, LABEL_MAX_CHARS - 1) + '\u2026'
+            : label;
+    }
+
+    // ── Dedup: keep only the latest ghost path per from->to pair ──
+    function dedupPaths(paths) {
+        var seen = {};
+        var result = [];
+        // Walk backwards so the last recorded wins
+        for (var i = paths.length - 1; i >= 0; i--) {
+            var key = paths[i].fromNodeId + '->' + paths[i].toNodeId;
+            if (!seen[key]) {
+                seen[key] = true;
+                result.unshift(paths[i]);
+            }
+        }
+        return result;
+    }
+
+    // ── Ghost Path Rendering ──
+
+    /**
+     * Parse translate(x,y) from an element's transform attribute.
+     * Returns { tx, ty } with offsets (0,0 if no transform).
+     */
+    function parseTranslate(el) {
+        var tx = 0, ty = 0;
+        var transform = el.getAttribute('transform');
+        if (transform) {
+            var match = transform.match(/translate\(\s*([-\d.]+)\s*,\s*([-\d.]+)\s*\)/);
+            if (match) {
+                tx = parseFloat(match[1]);
+                ty = parseFloat(match[2]);
+            }
+        }
+        return { tx: tx, ty: ty };
+    }
+
+    function getNodeCenter(nodeId) {
+        var el = DiagramDOM.findNodeElement(nodeId);
+        if (!el || !el.getBBox) return null;
+        var bbox = el.getBBox();
+        var t = parseTranslate(el);
+        return {
+            x: t.tx + bbox.x + bbox.width / 2,
+            y: t.ty + bbox.y + bbox.height / 2
+        };
+    }
+
+    function getNodeBottom(nodeId) {
+        var el = DiagramDOM.findNodeElement(nodeId);
+        if (!el || !el.getBBox) return null;
+        var bbox = el.getBBox();
+        var t = parseTranslate(el);
+        return {
+            x: t.tx + bbox.x + bbox.width / 2,
+            y: t.ty + bbox.y + bbox.height
+        };
+    }
+
+    function getNodeTop(nodeId) {
+        var el = DiagramDOM.findNodeElement(nodeId);
+        if (!el || !el.getBBox) return null;
+        var bbox = el.getBBox();
+        var t = parseTranslate(el);
+        return {
+            x: t.tx + bbox.x + bbox.width / 2,
+            y: t.ty + bbox.y
+        };
+    }
+
+    /**
+     * Build a cubic bezier that curves to the right of the straight line,
+     * so it doesn't overlap existing edges.
+     */
+    function buildCurvedPath(from, to, index) {
+        var dx = to.x - from.x;
+        var dy = to.y - from.y;
+        // Perpendicular offset direction (alternate sides for multiple ghosts)
+        var side = (index % 2 === 0) ? 1 : -1;
+        var offset = CURVE_OFFSET * side;
+
+        // Midpoint
+        var mx = (from.x + to.x) / 2;
+        var my = (from.y + to.y) / 2;
+
+        // Perpendicular vector (normalized)
+        var len = Math.sqrt(dx * dx + dy * dy) || 1;
+        var px = -dy / len * offset;
+        var py = dx / len * offset;
+
+        // Control point
+        var cx = mx + px;
+        var cy = my + py;
+
+        return {
+            d: 'M ' + from.x + ' ' + from.y +
+               ' Q ' + cx + ' ' + cy +
+               ' ' + to.x + ' ' + to.y,
+            labelX: (from.x + 2 * cx + to.x) / 4,
+            labelY: (from.y + 2 * cy + to.y) / 4
+        };
+    }
+
+    function createArrowMarker(svg) {
+        // Check if our ghost arrow marker already exists
+        if (svg.querySelector('#ghost-arrow')) return;
+
+        var defs = svg.querySelector('defs');
+        if (!defs) {
+            defs = document.createElementNS(SVG_NS, 'defs');
+            svg.insertBefore(defs, svg.firstChild);
+        }
+
+        var marker = document.createElementNS(SVG_NS, 'marker');
+        marker.setAttribute('id', 'ghost-arrow');
+        marker.setAttribute('viewBox', '0 0 10 10');
+        marker.setAttribute('refX', '9');
+        marker.setAttribute('refY', '5');
+        marker.setAttribute('markerWidth', '6');
+        marker.setAttribute('markerHeight', '6');
+        marker.setAttribute('orient', 'auto-start-reverse');
+
+        var arrow = document.createElementNS(SVG_NS, 'path');
+        arrow.setAttribute('d', 'M 0 0 L 10 5 L 0 10 z');
+        arrow.setAttribute('fill', GHOST_COLOR);
+        marker.appendChild(arrow);
+        defs.appendChild(marker);
+    }
+
+    function renderGhostPaths() {
+        var svg = DiagramDOM.getSVG();
+        if (!svg) return;
+
+        // Remove existing ghost path elements
+        svg.querySelectorAll('.ghost-path').forEach(function(el) { el.remove(); });
+
+        var paths = getCurrentPaths();
+        if (!visible || paths.length === 0) return;
+
+        createArrowMarker(svg);
+
+        var unique = dedupPaths(paths);
+        var diagramGroup = svg.querySelector('.smartcode-diagram');
+        var container = diagramGroup || svg;
+
+        for (var i = 0; i < unique.length; i++) {
+            var gp = unique[i];
+            var fromPt = getNodeBottom(gp.fromNodeId) || getNodeCenter(gp.fromNodeId);
+            var toPt = getNodeTop(gp.toNodeId) || getNodeCenter(gp.toNodeId);
+            if (!fromPt || !toPt) {
+                console.warn('[SmartCode GhostPaths] Node not found in SVG:',
+                    !fromPt ? gp.fromNodeId : gp.toNodeId,
+                    '— ghost path skipped:', gp.fromNodeId, '->', gp.toNodeId);
+                continue;
+            }
+
+            var g = document.createElementNS(SVG_NS, 'g');
+            g.setAttribute('class', 'ghost-path');
+            g.setAttribute('opacity', String(GHOST_OPACITY));
+
+            // Curved path
+            var curve = buildCurvedPath(fromPt, toPt, i);
+            var pathEl = document.createElementNS(SVG_NS, 'path');
+            pathEl.setAttribute('d', curve.d);
+            pathEl.setAttribute('stroke-dasharray', GHOST_DASH);
+            pathEl.setAttribute('stroke', GHOST_COLOR);
+            pathEl.setAttribute('stroke-width', String(GHOST_STROKE_W));
+            pathEl.setAttribute('fill', 'none');
+            pathEl.setAttribute('marker-end', 'url(#ghost-arrow)');
+            g.appendChild(pathEl);
+
+            // Label with background pill
+            if (gp.label) {
+                var labelText = truncateLabel(gp.label);
+
+                // Create text first to measure it
+                var text = document.createElementNS(SVG_NS, 'text');
+                text.setAttribute('x', String(curve.labelX));
+                text.setAttribute('y', String(curve.labelY));
+                text.setAttribute('text-anchor', 'middle');
+                text.setAttribute('dominant-baseline', 'central');
+                text.setAttribute('fill', GHOST_COLOR);
+                text.setAttribute('font-size', String(LABEL_FONT_SIZE));
+                text.setAttribute('font-family', "'JetBrains Mono', 'Inter', monospace");
+                text.setAttribute('font-weight', '500');
+                text.textContent = labelText;
+
+                // Append text temporarily to measure
+                g.appendChild(text);
+                container.appendChild(g);
+                var tBox = text.getBBox();
+                container.removeChild(g);
+                g.removeChild(text);
+
+                // Background pill
+                var bg = document.createElementNS(SVG_NS, 'rect');
+                bg.setAttribute('x', String(tBox.x - LABEL_BG_PAD_X));
+                bg.setAttribute('y', String(tBox.y - LABEL_BG_PAD_Y));
+                bg.setAttribute('width', String(tBox.width + LABEL_BG_PAD_X * 2));
+                bg.setAttribute('height', String(tBox.height + LABEL_BG_PAD_Y * 2));
+                bg.setAttribute('rx', '4');
+                bg.setAttribute('fill', LABEL_BG_COLOR);
+                bg.setAttribute('opacity', String(LABEL_BG_OPACITY));
+                g.appendChild(bg);
+                g.appendChild(text);
+            }
+
+            container.appendChild(g);
+        }
+    }
+
+    // ── Public API Methods ──
+
+    function toggle() {
+        visible = !visible;
+        // Track explicit user choice: if they hide, don't auto-show again
+        userExplicitlyHid = !visible;
+        saveVisibility();
+        updateButtonState();
+        renderGhostPaths();
+    }
+
+    function isVisibleFn() {
+        return visible;
+    }
+
+    function updateGhostPathsFn(file, paths) {
+        // Support legacy call without file: updateGhostPaths(paths)
+        if (Array.isArray(file)) {
+            paths = file;
+            file = window.SmartCodeFileTree ? SmartCodeFileTree.getCurrentFile() : 'unknown';
+        }
+        var list = Array.isArray(paths) ? paths : [];
+        if (file) {
+            ghostPathsByFile[file] = list;
+        }
+        updateBadge();
+
+        // Auto-show ghost paths when new ones arrive -- but respect user choice
+        var currentFile = window.SmartCodeFileTree ? SmartCodeFileTree.getCurrentFile() : null;
+        if (list.length > 0 && file === currentFile && !visible && !userExplicitlyHid) {
+            visible = true;
+            saveVisibility();
+            updateButtonState();
+        }
+
+        renderGhostPaths();
+    }
+
+    function getCount() {
+        return getCurrentPaths().length;
+    }
+
+    // ── Init ──
+
+    function init() {
+        loadVisibility();
+        updateButtonState();
+        updateBadge();
+
+        // Re-render ghost paths after each diagram render
+        if (window.SmartCodeEventBus) {
+            SmartCodeEventBus.on('diagram:rendered', renderGhostPaths);
+        }
+
+        renderGhostPaths();
+    }
+
+    // ── URL helper ──
+    function bUrl(path) { return (window.SmartCodeBaseUrl || '') + path; }
+
+    /** Create a ghost path via REST API and update UI */
+    function createGhostPath(fromNodeId, toNodeId, label) {
+        var file = window.SmartCodeFileTree ? SmartCodeFileTree.getCurrentFile() : null;
+        if (!file) return;
+        var encoded = encodeURIComponent(file);
+        fetch(bUrl('/api/ghost-paths/' + encoded), {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ fromNodeId: fromNodeId, toNodeId: toNodeId, label: label || undefined }),
+        }).then(function(r) {
+            if (!r.ok) throw new Error('Failed');
+            // Refetch to get updated list
+            return fetch(bUrl('/api/ghost-paths/' + encoded));
+        }).then(function(r) { return r.ok ? r.json() : null; })
+        .then(function(d) {
+            if (d) updateGhostPathsFn(file, d.ghostPaths || []);
+            if (window.toast) toast('Ghost path created');
+        }).catch(function() {
+            if (window.toast) toast('Error creating ghost path');
+        });
+    }
+
+    /** Clear all ghost paths for the current file via REST API */
+    function clearAllGhostPaths() {
+        var file = window.SmartCodeFileTree ? SmartCodeFileTree.getCurrentFile() : null;
+        if (!file) return;
+        var encoded = encodeURIComponent(file);
+        fetch(bUrl('/api/ghost-paths/' + encoded), {
+            method: 'DELETE',
+        }).then(function(r) {
+            if (!r.ok) throw new Error('Failed');
+            updateGhostPathsFn(file, []);
+            if (window.toast) toast('Ghost paths cleared');
+        }).catch(function() {
+            if (window.toast) toast('Error clearing ghost paths');
+        });
+    }
+
+    /** Reset the explicit-hide flag (called on file switch) */
+    function resetUserHide() {
+        userExplicitlyHid = false;
+    }
+
+    // ── Public API ──
+    window.SmartCodeGhostPaths = {
+        init: init,
+        toggle: toggle,
+        isVisible: isVisibleFn,
+        updateGhostPaths: updateGhostPathsFn,
+        renderGhostPaths: renderGhostPaths,
+        getCount: getCount,
+        createGhostPath: createGhostPath,
+        clearAll: clearAllGhostPaths,
+        resetUserHide: resetUserHide,
+    };
+})();

package/dist/static/heatmap.css

@@ -0,0 +1,116 @@
+/* ===================================================
+   SmartCode -- Heatmap Toggle & Legend Styles
+   =================================================== */
+
+/* Heatmap toggle button active state */
+#btnHeatmap {
+    position: relative;
+}
+#btnHeatmap.active {
+    background: rgba(239, 68, 68, 0.15) !important;
+    color: var(--status-problem) !important;
+    border-color: rgba(239, 68, 68, 0.3) !important;
+}
+
+/* Legend container -- bottom-right of preview area */
+.heatmap-legend {
+    position: absolute;
+    bottom: 60px;
+    right: 16px;
+    z-index: 50;
+    background: var(--surface-1);
+    border: 1px solid var(--border-default);
+    border-radius: 6px;
+    padding: 8px 12px;
+    font-family: 'Inter', sans-serif;
+    font-size: 11px;
+    color: var(--text-primary);
+    min-width: 80px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+}
+
+.heatmap-legend-title {
+    font-weight: 600;
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    color: var(--text-secondary);
+    margin-bottom: 6px;
+}
+
+/* Risk mode legend items */
+.heatmap-legend-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 2px 0;
+}
+
+.heatmap-legend-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    flex-shrink: 0;
+}
+
+/* Frequency mode gradient bar */
+.heatmap-legend-gradient {
+    width: 100%;
+    height: 10px;
+    border-radius: 4px;
+    background: linear-gradient(to right,
+        rgb(66, 133, 244),
+        rgb(160, 106, 122),
+        rgb(255, 80, 0)
+    );
+    margin: 4px 0;
+}
+
+.heatmap-legend-labels {
+    display: flex;
+    justify-content: space-between;
+    font-size: 9px;
+    color: var(--text-secondary);
+}
+
+/* Legend header with title + mode toggle */
+.heatmap-legend-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    margin-bottom: 6px;
+}
+
+.heatmap-legend-header .heatmap-legend-title {
+    margin-bottom: 0;
+}
+
+/* Mode toggle button */
+.heatmap-mode-toggle {
+    font-size: 9px;
+    font-family: 'Inter', sans-serif;
+    font-weight: 500;
+    padding: 2px 6px;
+    border-radius: 3px;
+    border: 1px solid var(--border-default);
+    background: var(--surface-2, #2a2a2a);
+    color: var(--text-secondary);
+    cursor: pointer;
+    white-space: nowrap;
+    transition: background 0.15s, color 0.15s;
+}
+
+.heatmap-mode-toggle:hover {
+    background: var(--surface-3, #333);
+    color: var(--text-primary);
+}
+
+/* Empty state guidance */
+.heatmap-empty-state {
+    font-size: 10px;
+    color: var(--text-secondary);
+    line-height: 1.4;
+    padding: 4px 0;
+    max-width: 180px;
+}