@hugobatist/smartcode 0.1.0

package/dist/static/session-player.js

@@ -0,0 +1,411 @@
+/**
+ * SmartCodeSessionPlayer -- timeline scrubber, play/pause/speed controls,
+ * diff highlighting for session replay.
+ * Precomputes cumulative diagram states for O(1) seeking.
+ */
+var SmartCodeSessionPlayer = (function() {
+    'use strict';
+
+    var state = {
+        events: [],
+        currentIndex: 0,
+        playing: false,
+        speed: 1,
+        animFrameId: null,
+        lastFrameTime: 0,
+        diagramStates: [],
+        visible: false,
+        bboxCache: {},
+    };
+
+    // DOM references (set in init)
+    var dom = {
+        player: null,
+        playPause: null,
+        scrubber: null,
+        speed: null,
+        time: null,
+        close: null,
+    };
+
+    // ── Cumulative State Model ──
+
+    function emptyState() {
+        return { nodeIds: new Set(), edgeIds: new Set(), statuses: new Map(), labels: new Map() };
+    }
+
+    function cloneState(s) {
+        return {
+            nodeIds: new Set(s.nodeIds),
+            edgeIds: new Set(s.edgeIds),
+            statuses: new Map(s.statuses),
+            labels: new Map(s.labels),
+        };
+    }
+
+    function applyEvent(s, ev) {
+        var p = ev.payload || {};
+        switch (ev.type) {
+            case 'node:visited':
+            case 'node:added':
+                if (p.nodeId) s.nodeIds.add(p.nodeId);
+                if (p.nodeId && p.label) s.labels.set(p.nodeId, p.label);
+                break;
+            case 'node:removed':
+                if (p.nodeId) s.nodeIds.delete(p.nodeId);
+                break;
+            case 'edge:added':
+            case 'edge:traversed':
+                if (p.edgeId) s.edgeIds.add(p.edgeId);
+                break;
+            case 'edge:removed':
+                if (p.edgeId) s.edgeIds.delete(p.edgeId);
+                break;
+            case 'status:changed':
+                if (p.nodeId && p.status) s.statuses.set(p.nodeId, p.status);
+                break;
+            default:
+                break;
+        }
+        return s;
+    }
+
+    function precomputeStates(events) {
+        var states = [];
+        var current = emptyState();
+        for (var i = 0; i < events.length; i++) {
+            current = applyEvent(cloneState(current), events[i]);
+            states.push(current);
+        }
+        return states;
+    }
+
+    // ── Diff Computation ──
+
+    function computeDiff(prevState, currState) {
+        var added = [];
+        var removed = [];
+        var modified = [];
+
+        currState.nodeIds.forEach(function(id) {
+            if (!prevState.nodeIds.has(id)) {
+                added.push(id);
+            } else {
+                var prevStatus = prevState.statuses.get(id);
+                var currStatus = currState.statuses.get(id);
+                var prevLabel = prevState.labels.get(id);
+                var currLabel = currState.labels.get(id);
+                if (prevStatus !== currStatus || prevLabel !== currLabel) {
+                    modified.push(id);
+                }
+            }
+        });
+
+        prevState.nodeIds.forEach(function(id) {
+            if (!currState.nodeIds.has(id)) {
+                removed.push(id);
+            }
+        });
+
+        return { added: added, removed: removed, modified: modified };
+    }
+
+    // ── Diff Highlighting ──
+
+    function clearDiffHighlights() {
+        var svg = DiagramDOM.getSVG();
+        if (!svg) return;
+        var highlighted = svg.querySelectorAll('.diff-added, .diff-removed, .diff-modified');
+        for (var i = 0; i < highlighted.length; i++) {
+            highlighted[i].classList.remove('diff-added', 'diff-removed', 'diff-modified');
+        }
+        var ghosts = svg.querySelectorAll('.diff-removed-ghost');
+        for (var j = 0; j < ghosts.length; j++) {
+            ghosts[j].parentNode.removeChild(ghosts[j]);
+        }
+    }
+
+    function applyDiffHighlights(diff) {
+        clearDiffHighlights();
+        var svg = DiagramDOM.getSVG();
+        if (!svg) return;
+
+        diff.added.forEach(function(id) {
+            var el = DiagramDOM.findNodeElement(id);
+            if (el) el.classList.add('diff-added');
+        });
+
+        diff.modified.forEach(function(id) {
+            var el = DiagramDOM.findNodeElement(id);
+            if (el) el.classList.add('diff-modified');
+        });
+
+        diff.removed.forEach(function(id) {
+            var bbox = state.bboxCache[id];
+            if (!bbox) return;
+            var ghost = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+            ghost.setAttribute('x', bbox.x);
+            ghost.setAttribute('y', bbox.y);
+            ghost.setAttribute('width', bbox.width);
+            ghost.setAttribute('height', bbox.height);
+            ghost.classList.add('diff-removed-ghost');
+            var g = svg.querySelector('g');
+            if (g) g.appendChild(ghost);
+        });
+    }
+
+    // ── BBox Caching (for removed node ghosts) ──
+
+    function cacheBBoxes() {
+        state.bboxCache = {};
+        var nodes = DiagramDOM.getAllNodeElements();
+        for (var i = 0; i < nodes.length; i++) {
+            var el = nodes[i];
+            var id = el.getAttribute('data-node-id');
+            if (!id) {
+                var elId = el.getAttribute('id');
+                if (elId) {
+                    var m = elId.match(/^flowchart-(.+)-\d+$/);
+                    if (m) id = m[1];
+                }
+            }
+            if (id && el.getBBox) {
+                try { state.bboxCache[id] = el.getBBox(); } catch (e) { /* ignore */ }
+            }
+        }
+    }
+
+    // ── Frame Application ──
+
+    function applyFrame(index) {
+        if (index < 0 || index >= state.diagramStates.length) return;
+        state.currentIndex = index;
+        cacheBBoxes();
+
+        if (index > 0) {
+            var diff = computeDiff(state.diagramStates[index - 1], state.diagramStates[index]);
+            applyDiffHighlights(diff);
+        } else {
+            clearDiffHighlights();
+        }
+        updateScrubber();
+    }
+
+    // ── Playback Controls ──
+
+    function play() {
+        if (state.events.length === 0) return;
+        if (state.currentIndex >= state.events.length - 1) {
+            state.currentIndex = 0;
+            applyFrame(0);
+        }
+        state.playing = true;
+        state.lastFrameTime = performance.now();
+        dom.playPause.textContent = 'Pause';
+        state.animFrameId = requestAnimationFrame(tick);
+    }
+
+    function pause() {
+        state.playing = false;
+        if (state.animFrameId) cancelAnimationFrame(state.animFrameId);
+        state.animFrameId = null;
+        if (dom.playPause) dom.playPause.textContent = 'Play';
+    }
+
+    function tick(now) {
+        if (!state.playing) return;
+        if (state.currentIndex >= state.events.length - 1) { pause(); return; }
+
+        var elapsed = (now - state.lastFrameTime) * state.speed;
+        var nextEvent = state.events[state.currentIndex + 1];
+        var currEvent = state.events[state.currentIndex];
+        var timeDelta = (nextEvent.ts - currEvent.ts) || 500;
+
+        if (elapsed >= timeDelta) {
+            state.currentIndex++;
+            state.lastFrameTime = now;
+            applyFrame(state.currentIndex);
+        }
+        state.animFrameId = requestAnimationFrame(tick);
+    }
+
+    function seekTo(index) {
+        var clamped = Math.max(0, Math.min(index, state.events.length - 1));
+        applyFrame(clamped);
+    }
+
+    // ── Session Loading ──
+
+    function loadSession(sessionId) {
+        return fetch((window.SmartCodeBaseUrl || '') + '/api/session/' + encodeURIComponent(sessionId))
+            .then(function(r) { return r.json(); })
+            .then(function(data) {
+                if (!data.events || data.events.length === 0) return;
+                state.events = data.events;
+                state.diagramStates = precomputeStates(state.events);
+                state.currentIndex = 0;
+                dom.scrubber.max = state.events.length - 1;
+                show();
+                applyFrame(0);
+            })
+            .catch(function(err) {
+                console.warn('Failed to load session:', err.message);
+            });
+    }
+
+    function handleSessionEvent(sessionId, event) {
+        if (!state.visible) return;
+        state.events.push(event);
+        var prev = state.diagramStates.length > 0
+            ? state.diagramStates[state.diagramStates.length - 1]
+            : emptyState();
+        state.diagramStates.push(applyEvent(cloneState(prev), event));
+        dom.scrubber.max = state.events.length - 1;
+        if (state.currentIndex === state.events.length - 2) {
+            state.currentIndex = state.events.length - 1;
+            applyFrame(state.currentIndex);
+        }
+        updateScrubber();
+    }
+
+    // ── Session List ──
+
+    function fetchSessionList(file) {
+        if (!file) return Promise.resolve([]);
+        return fetch((window.SmartCodeBaseUrl || '') + '/api/sessions/' + encodeURIComponent(file))
+            .then(function(r) { return r.ok ? r.json() : { sessions: [] }; })
+            .then(function(data) {
+                renderSessionList(data.sessions || []);
+                return data.sessions || [];
+            })
+            .catch(function() { renderSessionList([]); return []; });
+    }
+
+    function renderSessionList(sessions) {
+        var list = document.getElementById('sessionList');
+        if (!list) return;
+        // Clear existing items safely
+        while (list.firstChild) list.removeChild(list.firstChild);
+        if (sessions.length === 0) {
+            var empty = document.createElement('div');
+            empty.style.cssText = 'padding:8px;color:#71717a;font-size:12px;';
+            empty.textContent = 'No sessions recorded';
+            list.appendChild(empty);
+            return;
+        }
+        sessions.forEach(function(s) {
+            var item = document.createElement('div');
+            item.className = 'session-list-item';
+            var dur = s.duration ? Math.round(s.duration / 1000) + 's' : '?';
+            item.textContent = s.sessionId.substring(0, 8) + ' (' + s.totalEvents + ' events, ' + dur + ')';
+            item.addEventListener('click', function() {
+                loadSession(s.sessionId);
+                toggleSessionDropdown(false);
+            });
+            list.appendChild(item);
+        });
+    }
+
+    function toggleSessionDropdown(forceState) {
+        var dd = document.getElementById('sessionDropdown');
+        if (!dd) return;
+        var shouldShow = typeof forceState === 'boolean' ? forceState : dd.classList.contains('hidden');
+        if (shouldShow) {
+            dd.classList.remove('hidden');
+            var file = window.SmartCodeFileTree ? SmartCodeFileTree.getCurrentFile() : null;
+            fetchSessionList(file);
+        } else {
+            dd.classList.add('hidden');
+        }
+    }
+
+    // ── Visibility ──
+
+    function show() {
+        state.visible = true;
+        if (dom.player) dom.player.classList.remove('hidden');
+    }
+
+    function close() {
+        pause();
+        clearDiffHighlights();
+        state.visible = false;
+        state.events = [];
+        state.diagramStates = [];
+        state.currentIndex = 0;
+        state.bboxCache = {};
+        if (dom.player) dom.player.classList.add('hidden');
+        if (dom.scrubber) { dom.scrubber.value = 0; dom.scrubber.max = 0; }
+        if (dom.time) dom.time.textContent = '0 / 0';
+    }
+
+    // ── Scrubber ──
+
+    function updateScrubber() {
+        if (dom.scrubber) dom.scrubber.value = state.currentIndex;
+        if (dom.time) {
+            dom.time.textContent = (state.currentIndex + 1) + ' / ' + state.events.length;
+        }
+    }
+
+    // ── Initialization ──
+
+    function init() {
+        dom.player = document.getElementById('sessionPlayer');
+        dom.playPause = document.getElementById('spPlayPause');
+        dom.scrubber = document.getElementById('spScrubber');
+        dom.speed = document.getElementById('spSpeed');
+        dom.time = document.getElementById('spTime');
+        dom.close = document.getElementById('spClose');
+
+        if (dom.playPause) {
+            dom.playPause.addEventListener('click', function() {
+                state.playing ? pause() : play();
+            });
+        }
+        if (dom.scrubber) {
+            dom.scrubber.addEventListener('input', function() {
+                seekTo(parseInt(dom.scrubber.value, 10));
+            });
+        }
+        if (dom.speed) {
+            dom.speed.addEventListener('change', function() {
+                state.speed = parseFloat(dom.speed.value);
+            });
+        }
+        if (dom.close) {
+            dom.close.addEventListener('click', close);
+        }
+
+        // Sessions button dropdown toggle
+        var btn = document.getElementById('btnSessions');
+        if (btn) {
+            btn.addEventListener('click', function() { toggleSessionDropdown(); });
+        }
+
+        // Close dropdown on outside click
+        document.addEventListener('click', function(e) {
+            var dd = document.getElementById('sessionDropdown');
+            var btn2 = document.getElementById('btnSessions');
+            if (dd && !dd.contains(e.target) && e.target !== btn2) {
+                dd.classList.add('hidden');
+            }
+        });
+    }
+
+    return {
+        init: init,
+        loadSession: loadSession,
+        handleSessionEvent: handleSessionEvent,
+        fetchSessionList: fetchSessionList,
+        toggleSessionDropdown: toggleSessionDropdown,
+        show: show,
+        close: close,
+        isVisible: function() { return state.visible; },
+        isPlaying: function() { return state.playing; },
+        getIndex: function() { return state.currentIndex; },
+        play: play,
+        pause: pause,
+        seekTo: seekTo,
+    };
+})();

package/dist/static/sidebar.css

@@ -0,0 +1,248 @@
+/* sidebar.css -- Sidebar, breadcrumb, context menu, MCP session styles
+ * Extracted from main.css (Phase 20 QUAL-01) to stay under 500-line limit.
+ */
+
+/* -- Breadcrumb bar -- */
+.breadcrumb-bar {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 8px 12px;
+    background: var(--surface-1);
+    border-bottom: 1px solid var(--border-subtle);
+    font-size: 13px;
+    color: var(--text-secondary);
+    z-index: 5;
+    position: relative;
+}
+.breadcrumb-item {
+    cursor: pointer;
+    padding: 2px 6px;
+    border-radius: 3px;
+    transition: background 0.15s;
+}
+.breadcrumb-item:hover:not(.current) {
+    background: var(--surface-3);
+    color: var(--text-primary);
+}
+.breadcrumb-item.current {
+    color: var(--text-primary);
+    font-weight: 600;
+    cursor: default;
+}
+.breadcrumb-separator {
+    color: var(--text-tertiary);
+    user-select: none;
+}
+.breadcrumb-exit {
+    margin-left: auto;
+    padding: 4px 10px;
+    background: var(--surface-3);
+    border: 1px solid var(--border-subtle);
+    border-radius: 6px;
+    color: var(--text-primary);
+    cursor: pointer;
+    font-size: 12px;
+    font-weight: 500;
+    font-family: inherit;
+    transition: background 0.15s;
+}
+.breadcrumb-exit:hover {
+    background: var(--surface-4);
+}
+
+/* -- Auto-collapse notice -- */
+.auto-collapse-notice {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    background: var(--accent-muted);
+    border-bottom: 1px solid var(--accent-muted);
+    font-size: 12px;
+    color: var(--text-secondary);
+    z-index: 5;
+    position: relative;
+}
+.notice-icon { font-size: 14px; flex-shrink: 0; }
+.notice-text { flex: 1; }
+.notice-expand-all {
+    padding: 3px 10px;
+    background: var(--surface-3);
+    border: 1px solid var(--border-subtle);
+    border-radius: 5px;
+    color: var(--text-primary);
+    cursor: pointer;
+    font-size: 11px;
+    font-weight: 500;
+    font-family: inherit;
+    transition: background 0.15s;
+}
+.notice-expand-all:hover { background: var(--surface-4); }
+.notice-dismiss {
+    background: none;
+    border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    font-size: 14px;
+    padding: 2px 4px;
+    border-radius: 3px;
+    transition: background 0.15s;
+}
+.notice-dismiss:hover { background: var(--surface-3); color: var(--text-primary); }
+
+/* -- Focus mode: dim non-focused clusters -- */
+.diagram-focus-mode .cluster:not(.focused) {
+    opacity: 0.6;
+    transition: opacity 0.2s;
+}
+.diagram-focus-mode .cluster.focused {
+    opacity: 1;
+}
+
+/* -- Context Menu -- */
+.context-menu {
+    position: fixed;
+    z-index: 10000;
+    background: var(--surface-1);
+    border: 1px solid var(--border-default);
+    border-radius: 8px;
+    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
+    padding: 4px 0;
+    min-width: 180px;
+    font-family: 'Inter', sans-serif;
+    font-size: 13px;
+}
+.context-menu-item {
+    padding: 8px 16px;
+    cursor: pointer;
+    color: var(--text-primary);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    transition: background 0.1s;
+}
+.context-menu-item:hover { background: var(--surface-3); }
+.context-menu-item.danger { color: var(--status-problem); }
+.context-menu-item.danger:hover { background: rgba(239,68,68,0.15); }
+.context-menu-separator { height: 1px; background: var(--border-default); margin: 4px 0; }
+.context-menu-submenu { font-size: 12px; padding-left: 24px; }
+.context-menu-item.risk-high { color: var(--status-problem); }
+.context-menu-item.risk-medium { color: var(--status-progress); }
+.context-menu-item.risk-low { color: var(--status-ok); }
+
+/* -- Selection -- */
+.selected-edge path { stroke: var(--accent) !important; stroke-width: 3 !important; }
+.selected-edge .smartcode-edge-path { stroke: var(--accent) !important; stroke-width: 3 !important; }
+.selection-indicator { pointer-events: none; }
+
+/* -- Sidebar Tabs (Files / Sessions) -- */
+.sidebar-tabs {
+    display: flex;
+    gap: 2px;
+}
+.sidebar-tab {
+    padding: 4px 10px;
+    border: none;
+    background: transparent;
+    color: var(--text-tertiary);
+    font-size: 12px;
+    font-weight: 600;
+    font-family: inherit;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: all 0.15s;
+}
+.sidebar-tab:hover { color: var(--text-secondary); background: var(--surface-3); }
+.sidebar-tab.active { color: var(--text-primary); background: var(--surface-3); }
+
+/* -- MCP Session Cards -- */
+.mcp-session-card {
+    margin: 4px 6px;
+    border: 1px solid var(--border-subtle);
+    border-radius: 6px;
+    overflow: hidden;
+}
+.mcp-session-header {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 10px;
+    background: var(--surface-2);
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--text-primary);
+}
+.mcp-session-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    flex-shrink: 0;
+}
+.mcp-session-dot.active { background: var(--status-ok); box-shadow: 0 0 6px rgba(34,197,94,0.5); }
+.mcp-session-dot.inactive { background: var(--text-tertiary); }
+.mcp-session-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.mcp-session-time { font-size: 10px; color: var(--text-tertiary); font-weight: 400; white-space: nowrap; }
+.mcp-session-rename-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    border: none;
+    background: transparent;
+    color: var(--text-tertiary);
+    cursor: pointer;
+    border-radius: 4px;
+    padding: 0;
+    flex-shrink: 0;
+    opacity: 0;
+    transition: opacity 0.15s, background 0.15s, color 0.15s;
+}
+.mcp-session-header:hover .mcp-session-rename-btn { opacity: 1; }
+.mcp-session-rename-btn:hover { background: var(--surface-3); color: var(--text-primary); }
+.mcp-session-nofiles { padding: 6px 10px; font-size: 11px; color: var(--text-tertiary); }
+.mcp-session-file {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 5px 10px 5px 18px;
+    cursor: pointer;
+    font-size: 12px;
+    color: var(--text-secondary);
+    transition: background 0.1s;
+}
+.mcp-session-file:hover { background: var(--surface-3); color: var(--text-primary); }
+.mcp-session-file.active { background: var(--accent-muted); color: var(--accent); }
+.mcp-session-file-icon { display: flex; align-items: center; flex-shrink: 0; }
+.mcp-session-file-icon svg { width: 13px; height: 13px; }
+.mcp-session-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.mcp-session-divider {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 10px 4px;
+    font-size: 10px;
+    font-weight: 600;
+    color: var(--text-tertiary);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+.mcp-session-divider::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: var(--border-subtle);
+}
+.mcp-sessions-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 32px 16px;
+    text-align: center;
+    font-size: 12px;
+    color: var(--text-secondary);
+}
+.mcp-sessions-empty-icon { margin-bottom: 8px; opacity: 0.5; }
+.mcp-sessions-empty-icon svg { width: 24px; height: 24px; }