@hugobatist/smartcode 0.1.0

package/dist/static/mcp-sessions.js

@@ -0,0 +1,202 @@
+/**
+ * SmartCode MCP Sessions -- sidebar view showing AI sessions and their diagrams.
+ * Fetches data from GET /api/mcp-sessions and renders grouped by session.
+ * Supports renaming sessions via PATCH /api/mcp-sessions/:id.
+ *
+ * Dependencies: file-tree.js (SmartCodeFileTree), renderer.js (SmartCodeRenderer), modal.js (SmartCodeModal)
+ *
+ * Note: innerHTML usage is safe here -- all dynamic values pass through
+ * SmartCodeRenderer.escapeHtml() before interpolation, preventing XSS.
+ * This follows the same pattern established in file-tree.js.
+ */
+(function() {
+    'use strict';
+
+    var viewMode = 'files'; // 'files' | 'sessions'
+    var sessionsData = [];
+
+    function bUrl(path) { return (window.SmartCodeBaseUrl || '') + path; }
+
+    function escapeHtml(str) {
+        return SmartCodeRenderer.escapeHtml(str);
+    }
+
+    function prettyName(fname) {
+        var base = fname.includes('/') ? fname.split('/').pop() : fname;
+        return base.replace('.mmd', '').replace(/-/g, ' ').replace(/\b\w/g, function(c) { return c.toUpperCase(); });
+    }
+
+    function timeAgo(ts) {
+        var diff = Date.now() - ts;
+        var secs = Math.floor(diff / 1000);
+        if (secs < 60) return secs + 's ago';
+        var mins = Math.floor(secs / 60);
+        if (mins < 60) return mins + 'min ago';
+        var hours = Math.floor(mins / 60);
+        if (hours < 24) return hours + 'h ago';
+        return Math.floor(hours / 24) + 'd ago';
+    }
+
+    // ── Fetch sessions from API ──
+
+    function fetchSessions() {
+        return fetch(bUrl('/api/mcp-sessions'))
+            .then(function(r) { return r.ok ? r.json() : { sessions: [] }; })
+            .then(function(data) {
+                sessionsData = data.sessions || [];
+                if (viewMode === 'sessions') renderSessionsView();
+                return sessionsData;
+            })
+            .catch(function() {
+                sessionsData = [];
+                if (viewMode === 'sessions') renderSessionsView();
+                return [];
+            });
+    }
+
+    // ── Rename session via API ──
+
+    function renameSession(sessionId, newLabel) {
+        return fetch(bUrl('/api/mcp-sessions/' + encodeURIComponent(sessionId)), {
+            method: 'PATCH',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ label: newLabel }),
+        })
+            .then(function(r) { return r.json(); })
+            .then(function() { return fetchSessions(); });
+    }
+
+    // ── Render sessions view ──
+    // Safe: all dynamic values are escaped via escapeHtml before interpolation (same as file-tree.js)
+
+    function renderSessionsView() {
+        var container = document.getElementById('fileTree');
+        if (!container) return;
+
+        if (sessionsData.length === 0) {
+            container.innerHTML =
+                '<div class="mcp-sessions-empty">' +
+                    '<div class="mcp-sessions-empty-icon">' + (window.SmartCodeIcons ? SmartCodeIcons.eye : '') + '</div>' +
+                    '<div>No active AI sessions</div>' +
+                    '<div style="font-size:11px;margin-top:4px;color:var(--text-tertiary)">Start an MCP session with Claude to see diagrams grouped here</div>' +
+                '</div>';
+            return;
+        }
+
+        // Sort sessions by startedAt desc (most recent first)
+        var sorted = sessionsData.slice().sort(function(a, b) { return b.startedAt - a.startedAt; });
+
+        var html = '';
+        sorted.forEach(function(session) {
+            var shortId = session.sessionId.substring(0, 8);
+            var ago = timeAgo(session.startedAt);
+            var diagrams = session.diagrams || [];
+
+            html += '<div class="mcp-session-card">';
+            html += '<div class="mcp-session-header">';
+            html += '<span class="mcp-session-dot active"></span>';
+            html += '<span class="mcp-session-label">' + escapeHtml(session.label || 'Session ' + shortId) + '</span>';
+            html += '<button class="mcp-session-rename-btn" data-action="rename-session" data-session-id="' + escapeHtml(session.sessionId) + '" data-current-label="' + escapeHtml(session.label || '') + '" title="Rename session">';
+            html += '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 3a2.828 2.828 0 114 4L7.5 20.5 2 22l1.5-5.5L17 3z"/></svg>';
+            html += '</button>';
+            html += '<span class="mcp-session-time">' + escapeHtml(ago) + '</span>';
+            html += '</div>';
+
+            if (diagrams.length === 0) {
+                html += '<div class="mcp-session-nofiles">No diagrams yet</div>';
+            } else {
+                diagrams.forEach(function(d) {
+                    var isCurrentFile = d.filePath === (window.SmartCodeFileTree ? SmartCodeFileTree.getCurrentFile() : '');
+                    html += '<div class="mcp-session-file ' + (isCurrentFile ? 'active' : '') + '" data-action="load-session-file" data-path="' + escapeHtml(d.filePath) + '">';
+                    html += '<span class="mcp-session-file-icon">' + (window.SmartCodeIcons ? SmartCodeIcons.file : '') + '</span>';
+                    html += '<span class="mcp-session-file-name">' + escapeHtml(prettyName(d.filePath)) + '</span>';
+                    html += '</div>';
+                });
+            }
+            html += '</div>';
+        });
+
+        // Safe: all dynamic values pass through escapeHtml() above
+        container.innerHTML = html;
+    }
+
+    // ── View mode switching ──
+
+    function setViewMode(mode) {
+        viewMode = mode;
+
+        // Update tab styling
+        var tabFiles = document.getElementById('tabFiles');
+        var tabSessions = document.getElementById('tabSessions');
+        if (tabFiles) tabFiles.classList.toggle('active', mode === 'files');
+        if (tabSessions) tabSessions.classList.toggle('active', mode === 'sessions');
+
+        if (mode === 'sessions') {
+            fetchSessions();
+        } else {
+            SmartCodeFileTree.refreshFileList();
+        }
+    }
+
+    function getViewMode() { return viewMode; }
+
+    // ── Event delegation ──
+
+    function handleClick(e) {
+        // Rename session
+        var renameBtn = e.target.closest('[data-action="rename-session"]');
+        if (renameBtn) {
+            e.stopPropagation();
+            var sessionId = renameBtn.getAttribute('data-session-id');
+            var currentLabel = renameBtn.getAttribute('data-current-label');
+            if (window.SmartCodeModal) {
+                SmartCodeModal.prompt({
+                    title: 'Rename Session',
+                    placeholder: 'Session name',
+                    defaultValue: currentLabel || '',
+                    onConfirm: function(val) {
+                        renameSession(sessionId, val);
+                    },
+                });
+            }
+            return;
+        }
+
+        // Load session file
+        var target = e.target.closest('[data-action="load-session-file"]');
+        if (!target) return;
+        var path = target.getAttribute('data-path');
+        if (path && window.SmartCodeFileTree) {
+            SmartCodeFileTree.loadFile(path);
+            // Re-render to update active state
+            if (viewMode === 'sessions') {
+                setTimeout(renderSessionsView, 50);
+            }
+        }
+    }
+
+    // ── Init ──
+
+    function init() {
+        var container = document.getElementById('fileTree');
+        if (container) {
+            container.addEventListener('click', handleClick);
+        }
+    }
+
+    function refresh() {
+        if (viewMode === 'sessions') {
+            fetchSessions();
+        }
+    }
+
+    // ── Public API ──
+    window.SmartCodeMcpSessions = {
+        init: init,
+        refresh: refresh,
+        fetchSessions: fetchSessions,
+        setViewMode: setViewMode,
+        getViewMode: getViewMode,
+        renderSessionsView: renderSessionsView,
+    };
+})();

package/dist/static/modal.css

@@ -0,0 +1,109 @@
+/* SmartCode Modal -- reusable prompt/confirm replacement */
+
+.smartcode-modal-backdrop {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.7);
+    z-index: 200;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    animation: smartcode-modal-fade 150ms ease;
+}
+
+.smartcode-modal-card {
+    background: var(--surface-2);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-xl);
+    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
+    max-width: 420px;
+    width: 90%;
+    padding: 20px;
+    animation: smartcode-modal-pop 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.smartcode-modal-title {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 14px;
+}
+
+.smartcode-modal-input {
+    width: 100%;
+    border: 1px solid var(--border-subtle);
+    border-radius: 8px;
+    background: var(--surface-2);
+    color: var(--text-primary);
+    font-family: inherit;
+    font-size: 12px;
+    padding: 7px 10px;
+    outline: none;
+    box-sizing: border-box;
+}
+
+.smartcode-modal-input:focus {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 2px var(--accent-muted);
+}
+
+.smartcode-modal-message {
+    font-size: 13px;
+    color: var(--text-secondary);
+    margin-bottom: 16px;
+    line-height: 1.5;
+    white-space: pre-line;
+}
+
+.smartcode-modal-actions {
+    display: flex;
+    gap: 8px;
+    justify-content: flex-end;
+    margin-top: 16px;
+}
+
+.smartcode-modal-btn {
+    padding: 6px 14px;
+    border-radius: var(--radius-lg);
+    border: none;
+    font-size: 12px;
+    font-weight: 500;
+    font-family: inherit;
+    cursor: pointer;
+    transition: background 120ms ease, opacity 120ms ease;
+}
+
+.smartcode-modal-btn--primary {
+    background: var(--accent);
+    color: #fff;
+}
+.smartcode-modal-btn--primary:hover {
+    background: var(--accent-hover);
+}
+
+.smartcode-modal-btn--danger {
+    background: var(--status-problem);
+    color: #fff;
+}
+.smartcode-modal-btn--danger:hover {
+    background: var(--status-problem-stroke);
+}
+
+.smartcode-modal-btn--secondary {
+    background: var(--surface-3);
+    color: var(--text-secondary);
+}
+.smartcode-modal-btn--secondary:hover {
+    background: var(--surface-4);
+    color: var(--text-primary);
+}
+
+@keyframes smartcode-modal-pop {
+    from { transform: scale(0.92); opacity: 0; }
+    to   { transform: scale(1);    opacity: 1; }
+}
+
+@keyframes smartcode-modal-fade {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}

package/dist/static/modal.js

@@ -0,0 +1,171 @@
+/**
+ * SmartCode Modal -- reusable prompt/confirm replacement.
+ * Replaces native prompt() and confirm() with styled modals.
+ *
+ * Dependencies: modal.css
+ *
+ * Usage:
+ *   SmartCodeModal.prompt({ title, placeholder, defaultValue, onConfirm });
+ *   SmartCodeModal.confirm({ title, message, danger, onConfirm });
+ *   SmartCodeModal.close();
+ */
+(function() {
+    'use strict';
+
+    var backdrop = null;
+    var outsideHandler = null;
+
+    function close() {
+        if (outsideHandler) {
+            document.removeEventListener('mousedown', outsideHandler);
+            outsideHandler = null;
+        }
+        if (backdrop) {
+            backdrop.remove();
+            backdrop = null;
+        }
+    }
+
+    function createBackdrop() {
+        close();
+        var el = document.createElement('div');
+        el.className = 'smartcode-modal-backdrop';
+        document.body.appendChild(el);
+        backdrop = el;
+
+        // Outside-click dismiss (setTimeout pattern like context-menu.js)
+        setTimeout(function() {
+            outsideHandler = function(e) {
+                if (e.target === backdrop) close();
+            };
+            document.addEventListener('mousedown', outsideHandler);
+        }, 50);
+
+        return el;
+    }
+
+    function createCard(titleText) {
+        var card = document.createElement('div');
+        card.className = 'smartcode-modal-card';
+
+        var title = document.createElement('div');
+        title.className = 'smartcode-modal-title';
+        title.textContent = titleText || '';
+        card.appendChild(title);
+
+        return card;
+    }
+
+    function createActions() {
+        var actions = document.createElement('div');
+        actions.className = 'smartcode-modal-actions';
+        return actions;
+    }
+
+    function createButton(text, variant) {
+        var btn = document.createElement('button');
+        btn.className = 'smartcode-modal-btn smartcode-modal-btn--' + variant;
+        btn.textContent = text;
+        return btn;
+    }
+
+    // ── Prompt Modal ──
+
+    function showPrompt(opts) {
+        var title = opts.title || 'Input';
+        var placeholder = opts.placeholder || '';
+        var defaultValue = opts.defaultValue || '';
+        var onConfirm = opts.onConfirm;
+
+        var bg = createBackdrop();
+        var card = createCard(title);
+
+        var input = document.createElement('input');
+        input.className = 'smartcode-modal-input';
+        input.type = 'text';
+        input.placeholder = placeholder;
+        input.value = defaultValue;
+        card.appendChild(input);
+
+        var actions = createActions();
+        var btnCancel = createButton('Cancel', 'secondary');
+        var btnOk = createButton('OK', 'primary');
+        actions.appendChild(btnCancel);
+        actions.appendChild(btnOk);
+        card.appendChild(actions);
+
+        bg.appendChild(card);
+
+        // Focus and select input content
+        input.focus();
+        if (defaultValue) input.select();
+
+        function doConfirm() {
+            var val = input.value.trim();
+            if (!val && !opts.allowEmpty) return;
+            close();
+            if (onConfirm) onConfirm(val);
+        }
+
+        btnOk.addEventListener('click', doConfirm);
+        btnCancel.addEventListener('click', close);
+
+        input.addEventListener('keydown', function(e) {
+            if (e.key === 'Enter') doConfirm();
+            if (e.key === 'Escape') close();
+        });
+    }
+
+    // ── Confirm Modal ──
+
+    function showConfirm(opts) {
+        var title = opts.title || 'Confirm';
+        var message = opts.message || '';
+        var danger = opts.danger || false;
+        var onConfirm = opts.onConfirm;
+
+        var bg = createBackdrop();
+        var card = createCard(title);
+
+        if (message) {
+            var msg = document.createElement('div');
+            msg.className = 'smartcode-modal-message';
+            msg.textContent = message;
+            card.appendChild(msg);
+        }
+
+        var actions = createActions();
+        var btnCancel = createButton('Cancel', 'secondary');
+        var btnOk = createButton(danger ? 'Delete' : 'OK', danger ? 'danger' : 'primary');
+        actions.appendChild(btnCancel);
+        actions.appendChild(btnOk);
+        card.appendChild(actions);
+
+        bg.appendChild(card);
+
+        btnOk.focus();
+
+        btnOk.addEventListener('click', function() {
+            close();
+            if (onConfirm) onConfirm();
+        });
+        btnCancel.addEventListener('click', close);
+
+        // Escape to close
+        function onKey(e) {
+            if (e.key === 'Escape') {
+                close();
+                document.removeEventListener('keydown', onKey);
+            }
+        }
+        document.addEventListener('keydown', onKey);
+    }
+
+    // ── Public API ──
+
+    window.SmartCodeModal = {
+        prompt: showPrompt,
+        confirm: showConfirm,
+        close: close,
+    };
+})();