@hugobatist/smartcode 0.1.0

package/dist/static/interaction-state.js

@@ -0,0 +1,155 @@
+/**
+ * SmartCode Interaction State Machine -- FSM for coordinating all UI interaction modes.
+ * Prevents conflicting interactions by defining valid states and transitions.
+ *
+ * Dependencies: event-bus.js (SmartCodeEventBus)
+ *
+ * States:
+ *   idle         - Default. Click selects, right-click opens menu, double-click edits, drag pans.
+ *   selected     - A node/edge is selected. Click elsewhere deselects, Delete removes.
+ *   editing      - Inline edit overlay is open. All other interactions blocked.
+ *   context-menu - Context menu is open. Click outside or Escape closes.
+ *   flagging     - Flag mode is active (existing SmartCodeAnnotations behavior).
+ *   add-node     - Add node mode (existing MmdEditor behavior).
+ *   add-edge     - Add edge mode (existing MmdEditor behavior).
+ *   panning      - Active drag-pan in progress.
+ *
+ * Usage:
+ *   SmartCodeInteraction.getState();           // 'idle'
+ *   SmartCodeInteraction.transition('click_node', { id: 'A' }); // true if valid
+ *   SmartCodeInteraction.getSelection();       // { id: 'A', type: 'node' }
+ *   SmartCodeInteraction.isIdle();             // false
+ *   SmartCodeInteraction.isBlocking();         // false
+ */
+(function() {
+    'use strict';
+
+    // ── Transition Table ──
+    var TRANSITIONS = {
+        idle:           { click_node: 'selected', click_edge: 'selected', right_click: 'context-menu', dbl_click: 'editing', flag_toggle: 'flagging', add_node_toggle: 'add-node', add_edge_toggle: 'add-edge', pan_start: 'panning' },
+        selected:       { click_empty: 'idle', click_node: 'selected', click_edge: 'selected', right_click: 'context-menu', dbl_click: 'editing', escape: 'idle', delete_node: 'idle', flag_toggle: 'flagging', pan_start: 'panning', drag_start: 'dragging' },
+        editing:        { confirm: 'idle', cancel: 'idle' },
+        'context-menu': { action: 'idle', close: 'idle', edit_action: 'editing' },
+        flagging:       { flag_toggle: 'idle', escape: 'idle' },
+        'add-node':     { add_node_toggle: 'idle', escape: 'idle' },
+        'add-edge':     { add_edge_toggle: 'idle', escape: 'idle' },
+        panning:        { pan_end: 'idle', pan_end_selected: 'selected' },
+        dragging:       { drag_end: 'selected', escape: 'idle' },
+    };
+
+    // ── Internal State ──
+    var currentState = 'idle';
+    var selectedId = null;
+    var selectedType = null; // 'node' | 'edge' | 'subgraph'
+
+    // ── Core Functions ──
+
+    /**
+     * Attempt a state transition.
+     * @param {string} event - The event name (e.g. 'click_node', 'escape')
+     * @param {*} [payload] - Optional data passed to event listeners
+     * @returns {boolean} true if transition happened, false if invalid
+     */
+    function transition(event, payload) {
+        var stateConfig = TRANSITIONS[currentState];
+        if (!stateConfig || !stateConfig[event]) return false;
+
+        var from = currentState;
+        var to = stateConfig[event];
+        currentState = to;
+
+        // Emit transition event on the event bus
+        if (window.SmartCodeEventBus) {
+            SmartCodeEventBus.emit('interaction:transition', {
+                from: from,
+                to: to,
+                event: event,
+                payload: payload
+            });
+        }
+
+        return true;
+    }
+
+    /**
+     * Returns the current FSM state string.
+     * @returns {string}
+     */
+    function getState() {
+        return currentState;
+    }
+
+    /**
+     * Returns the current selection info.
+     * @returns {{ id: string|null, type: string|null }}
+     */
+    function getSelection() {
+        return { id: selectedId, type: selectedType };
+    }
+
+    /**
+     * Set the selected element (called by selection.js when selecting).
+     * @param {string} id - The selected element ID
+     * @param {string} type - 'node' | 'edge' | 'subgraph'
+     */
+    function select(id, type) {
+        selectedId = id;
+        selectedType = type;
+    }
+
+    /**
+     * Clear the current selection.
+     */
+    function clearSelection() {
+        selectedId = null;
+        selectedType = null;
+    }
+
+    /**
+     * Force-set the FSM state (for existing mode toggles in annotations/editor
+     * that need to sync their state with the FSM).
+     * @param {string} state - One of the 8 valid states
+     */
+    function forceState(state) {
+        if (TRANSITIONS[state] !== undefined) {
+            var from = currentState;
+            currentState = state;
+            if (window.SmartCodeEventBus) {
+                SmartCodeEventBus.emit('interaction:transition', {
+                    from: from,
+                    to: state,
+                    event: 'force',
+                    payload: null
+                });
+            }
+        }
+    }
+
+    /**
+     * Shorthand: is the FSM in idle state?
+     * @returns {boolean}
+     */
+    function isIdle() {
+        return currentState === 'idle';
+    }
+
+    /**
+     * Returns true if in a blocking state (editing or context-menu).
+     * @returns {boolean}
+     */
+    function isBlocking() {
+        return currentState === 'editing' || currentState === 'context-menu';
+    }
+
+    // ── Public API ──
+    window.SmartCodeInteraction = {
+        getState: getState,
+        getSelection: getSelection,
+        transition: transition,
+        select: select,
+        clearSelection: clearSelection,
+        forceState: forceState,
+        isIdle: isIdle,
+        isBlocking: isBlocking,
+    };
+})();

package/dist/static/interaction-tracker.js

@@ -0,0 +1,93 @@
+/**
+ * SmartCode Interaction Tracker -- batches node clicks and flushes to server.
+ * Provides automatic frequency data for the heatmap without MCP session setup.
+ *
+ * Dependencies: file-tree.js (SmartCodeFileTree), event-bus.js (SmartCodeEventBus)
+ *
+ * Usage:
+ *   SmartCodeInteractionTracker.init();
+ *   SmartCodeInteractionTracker.trackClick('nodeId');
+ *   SmartCodeInteractionTracker.flush();       // manual flush
+ *   SmartCodeInteractionTracker.resetForFile(); // on file switch
+ */
+(function() {
+    'use strict';
+
+    var FLUSH_INTERVAL = 2000; // 2 seconds
+
+    var pendingCounts = {};
+    var flushTimer = null;
+
+    /**
+     * Track a click on a node. Increments the pending count.
+     * @param {string} nodeId
+     */
+    function trackClick(nodeId) {
+        if (!nodeId || typeof nodeId !== 'string') return;
+        pendingCounts[nodeId] = (pendingCounts[nodeId] || 0) + 1;
+    }
+
+    /**
+     * Flush pending counts to the server via POST.
+     * Resets pendingCounts after sending.
+     */
+    function flush() {
+        var keys = Object.keys(pendingCounts);
+        if (keys.length === 0) return;
+
+        var currentFile = window.SmartCodeFileTree ? SmartCodeFileTree.getCurrentFile() : '';
+        if (!currentFile) {
+            pendingCounts = {};
+            return;
+        }
+
+        var counts = pendingCounts;
+        pendingCounts = {};
+
+        var baseUrl = window.SmartCodeBaseUrl || '';
+        var url = baseUrl + '/api/heatmap/' + encodeURIComponent(currentFile) + '/increment';
+
+        fetch(url, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ counts: counts }),
+        }).catch(function() {
+            // Re-add counts on failure so they're retried on next flush
+            for (var k in counts) {
+                pendingCounts[k] = (pendingCounts[k] || 0) + counts[k];
+            }
+        });
+    }
+
+    /**
+     * Reset for file switch: flush current counts, clear pending.
+     */
+    function resetForFile() {
+        flush();
+        pendingCounts = {};
+    }
+
+    /**
+     * Start the periodic flush timer.
+     */
+    function startFlushing() {
+        if (flushTimer) clearInterval(flushTimer);
+        flushTimer = setInterval(flush, FLUSH_INTERVAL);
+    }
+
+    /**
+     * Initialize the interaction tracker.
+     * Starts the flush timer.
+     */
+    function init() {
+        startFlushing();
+    }
+
+    // ── Public API ──
+    window.SmartCodeInteractionTracker = {
+        init: init,
+        trackClick: trackClick,
+        flush: flush,
+        resetForFile: resetForFile,
+    };
+})();

package/dist/static/live.html

@@ -0,0 +1,239 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SmartCode - Live Diagrams</title>
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' rx='6' fill='%233b82f6'/><text x='16' y='22' text-anchor='middle' fill='white' font-family='sans-serif' font-weight='700' font-size='18'>S</text></svg>">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <script src="vendor/dagre-bundle.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/mermaid@11.12.2/dist/mermaid.min.js"></script>
+    <link rel="stylesheet" href="tokens.css">
+    <link rel="stylesheet" href="main-layout.css">
+    <link rel="stylesheet" href="main.css">
+    <link rel="stylesheet" href="sidebar.css">
+    <link rel="stylesheet" href="annotations.css">
+    <link rel="stylesheet" href="breakpoints.css">
+    <link rel="stylesheet" href="heatmap.css">
+    <link rel="stylesheet" href="session-player.css">
+    <link rel="stylesheet" href="search.css">
+    <link rel="stylesheet" href="modal.css">
+</head>
+<body>
+
+<!-- Top Bar -->
+<div class="topbar">
+    <!-- Group 1: Navigation -->
+    <div class="toolbar-group">
+        <span class="logo">SmartCode</span>
+        <span id="workspaceSwitcher" class="workspace-switcher"></span>
+        <span class="file-name" id="currentFileName">Action Plan</span>
+    </div>
+
+    <div class="toolbar-separator"></div>
+
+    <!-- Group 2: View -->
+    <div class="toolbar-group">
+        <button class="toolbar-btn" id="toggleSidebar" title="Toggle file explorer (Ctrl+B)"><span class="toolbar-icon" data-icon="sidebar"></span>Files</button>
+        <button class="toolbar-btn" id="toggleEditor" title="Toggle code editor (Ctrl+E)"><span class="toolbar-icon" data-icon="editor"></span>Editor</button>
+        <button class="toolbar-btn" id="toggleAutoSync" title="Toggle auto-sync with file changes"><span class="toolbar-icon" data-icon="sync"></span>Sync</button>
+    </div>
+
+    <div class="toolbar-separator"></div>
+
+    <!-- Group 3: Edit -->
+    <div class="toolbar-group">
+        <button class="toolbar-btn toolbar-btn--primary" id="btnAddNode" onclick="MmdEditor.toggleAddNode()" title="Add node (N)"><span class="toolbar-icon" data-icon="node"></span>Node</button>
+        <button class="toolbar-btn toolbar-btn--primary" id="btnAddEdge" onclick="MmdEditor.toggleAddEdge()" title="Add edge (A)"><span class="toolbar-icon" data-icon="arrowRight"></span>Edge</button>
+    </div>
+
+    <div class="toolbar-separator"></div>
+
+    <!-- Group 4: Inspect -->
+    <div class="toolbar-group">
+        <button class="toolbar-btn" id="btnFlags" onclick="SmartCodeAnnotations.toggleFlagMode()" title="Toggle flag mode (F)"><span class="toolbar-icon" data-icon="flag"></span>Flags <span class="toolbar-badge" id="flagCountBadge" data-count="0"></span></button>
+        <button class="toolbar-btn" id="toggleFlagPanel" onclick="SmartCodeAnnotations.togglePanel()" title="Toggle flags panel"><span class="toolbar-icon" data-icon="eye"></span>Panel</button>
+        <button class="toolbar-btn" id="btnGhostPaths" onclick="SmartCodeGhostPaths.toggle()" title="Toggle ghost paths"><span class="toolbar-icon" data-icon="ghost"></span>Ghost <span class="toolbar-badge" id="ghostCountBadge" data-count="0"></span></button>
+        <button class="toolbar-btn" id="btnHeatmap" onclick="SmartCodeHeatmap.toggle()" title="Toggle heatmap (H)"><span class="toolbar-icon" data-icon="heatmap"></span>Heat</button>
+        <span style="position:relative">
+            <button class="toolbar-btn" id="btnSessions" title="Session recordings"><span class="toolbar-icon" data-icon="play"></span>Recordings</button>
+            <div class="session-dropdown hidden" id="sessionDropdown"><div id="sessionList"></div></div>
+        </span>
+    </div>
+
+    <div class="toolbar-spacer"></div>
+
+    <!-- Group 5: Export + Status (right-aligned) -->
+    <div class="toolbar-group">
+        <button class="toolbar-btn" onclick="saveCurrentFile()" title="Save file (Ctrl+S)"><span class="toolbar-icon" data-icon="save"></span>Save</button>
+        <button class="toolbar-btn" onclick="exportSVG()" title="Export as SVG"><span class="toolbar-icon" data-icon="download"></span>SVG</button>
+        <button class="toolbar-btn" onclick="exportPNG()" title="Export as PNG"><span class="toolbar-icon" data-icon="image"></span>PNG</button>
+        <button class="toolbar-btn toolbar-btn--ghost" onclick="showHelp()" title="Help & shortcuts (?)"><span class="toolbar-icon" data-icon="help"></span>?</button>
+    </div>
+
+    <div class="status">
+        <div class="status-dot" id="statusDot"></div>
+        <span id="statusText">Watching...</span>
+    </div>
+</div>
+
+<!-- Main -->
+<div class="main">
+    <!-- Sidebar -->
+    <div class="sidebar" id="sidebar">
+        <div class="sidebar-header">
+            <div class="sidebar-tabs">
+                <button class="sidebar-tab active" id="tabFiles" onclick="SmartCodeMcpSessions.setViewMode('files')">Files</button>
+                <button class="sidebar-tab" id="tabSessions" onclick="SmartCodeMcpSessions.setViewMode('sessions')">Sessions</button>
+            </div>
+            <div class="actions">
+                <button id="btnNewFolder" onclick="createNewFolder()" title="New folder"></button>
+                <button id="btnNewFile" onclick="createNewFile()" title="New diagram"></button>
+                <button id="btnSaveFile" onclick="saveCurrentFile()" title="Save (Ctrl+S)"></button>
+            </div>
+        </div>
+        <div id="fileTree" style="flex:1;overflow-y:auto;padding:4px 0"></div>
+    </div>
+
+    <!-- Content -->
+    <div class="content">
+        <!-- Editor (hidden by default) -->
+        <div class="editor-panel hidden" id="editorPanel">
+            <div class="panel-header">
+                <span class="tab active">Mermaid</span>
+                <span style="margin-left:auto; font-size:11px; color:var(--text-secondary)">
+                    <kbd>Ctrl</kbd>+<kbd>Enter</kbd> render
+                </span>
+            </div>
+            <textarea id="editor" spellcheck="false" placeholder="Paste or write Mermaid here..."></textarea>
+        </div>
+
+        <!-- Resize handle (hidden when editor hidden) -->
+        <div class="resize-handle" id="resizeHandle" style="display:none"></div>
+
+        <!-- Preview (LIGHT background, full width) -->
+        <div class="preview-panel" id="previewPanel">
+            <div id="preview-container">
+                <div id="preview"></div>
+            </div>
+            <div class="session-player hidden" id="sessionPlayer">
+                <button class="sp-btn" id="spPlayPause" title="Play/Pause">Play</button>
+                <input type="range" class="sp-scrubber" id="spScrubber" min="0" max="0" value="0">
+                <span class="sp-time" id="spTime">0 / 0</span>
+                <select class="sp-speed" id="spSpeed">
+                    <option value="1">1x</option>
+                    <option value="2">2x</option>
+                    <option value="4">4x</option>
+                </select>
+                <button class="sp-btn" id="spClose" title="Close replay">Close</button>
+            </div>
+            <div class="fit-hint" id="fitHint">Scroll to zoom | Drag to pan</div>
+            <div class="zoom-controls">
+                <button class="zoom-btn" onclick="zoomOut()">-</button>
+                <span class="zoom-label" id="zoomLabel">100%</span>
+                <button class="zoom-btn" onclick="zoomIn()">+</button>
+                <button class="zoom-btn" onclick="zoomFit()" style="font-size:12px">Fit</button>
+            </div>
+        </div>
+
+        <!-- Flag Panel (right side) -->
+        <div class="flag-panel hidden" id="flagPanel">
+            <div class="flag-panel-header">
+                <span>Flags</span>
+                <span class="flag-panel-count" id="flagPanelCount" style="display:none">0</span>
+            </div>
+            <div class="flag-panel-list" id="flagPanelList"></div>
+        </div>
+    </div>
+</div>
+
+<!-- Toast -->
+<div class="toast" id="toast"></div>
+
+<!-- Help -->
+<div class="help-overlay" id="helpOverlay" onclick="this.classList.remove('show')">
+    <div class="help-box" onclick="event.stopPropagation()">
+        <h2>Shortcuts</h2>
+        <div class="help-row"><span><kbd>Ctrl</kbd>+<kbd>Enter</kbd></span><span>Render</span></div>
+        <div class="help-row"><span><kbd>Ctrl</kbd>+<kbd>E</kbd></span><span>Toggle editor</span></div>
+        <div class="help-row"><span><kbd>Ctrl</kbd>+<kbd>B</kbd></span><span>Toggle sidebar</span></div>
+        <div class="help-row"><span><kbd>Ctrl</kbd>+<kbd>+</kbd> / <kbd>-</kbd></span><span>Zoom in/out</span></div>
+        <div class="help-row"><span><kbd>Ctrl</kbd>+<kbd>0</kbd></span><span>Zoom fit</span></div>
+        <div class="help-row"><span><kbd>Ctrl</kbd>+<kbd>S</kbd></span><span>Save file</span></div>
+        <div class="help-row"><span><kbd>Ctrl</kbd>+<kbd>F</kbd></span><span>Search node</span></div>
+        <div class="help-row"><span><kbd>Ctrl</kbd>+<kbd>Z</kbd></span><span>Undo</span></div>
+        <div class="help-row"><span><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd></span><span>Redo</span></div>
+        <div class="help-row"><span><kbd>Ctrl</kbd>+<kbd>C</kbd></span><span>Copy node</span></div>
+        <div class="help-row"><span><kbd>Ctrl</kbd>+<kbd>V</kbd></span><span>Paste node</span></div>
+        <div class="help-row"><span><kbd>Ctrl</kbd>+<kbd>D</kbd></span><span>Duplicate node</span></div>
+        <div class="help-row"><span>Scroll</span><span>Zoom</span></div>
+        <div class="help-row"><span>Drag</span><span>Pan</span></div>
+        <div class="help-row"><span><kbd>N</kbd></span><span>Add node</span></div>
+        <div class="help-row"><span><kbd>A</kbd></span><span>Add edge</span></div>
+        <div class="help-row"><span><kbd>F</kbd></span><span>Toggle Flag Mode</span></div>
+        <div class="help-row"><span>Click on node</span><span>Select</span></div>
+        <div class="help-row"><span>Right-click</span><span>Context menu</span></div>
+        <div class="help-row"><span>Double-click on node</span><span>Edit text inline</span></div>
+        <div class="help-row"><span><kbd>Del</kbd> / <kbd>Backspace</kbd></span><span>Delete selected</span></div>
+        <div class="help-row"><span>Double-click</span><span>Focus on subgraph</span></div>
+        <div class="help-row"><span><kbd>Esc</kbd></span><span>Exit Focus Mode</span></div>
+        <div class="help-row"><span><kbd>B</kbd></span><span>Toggle Breakpoint (selected node)</span></div>
+        <div class="help-row"><span>Right-click > Toggle Breakpoint</span><span>Toggle Breakpoint</span></div>
+        <div class="help-row"><span>Ghost button</span><span>Toggle ghost path visibility</span></div>
+        <div class="help-row"><span><kbd>H</kbd></span><span>Toggle heatmap</span></div>
+        <div class="help-row"><span><kbd>Space</kbd></span><span>Play/pause replay (session player)</span></div>
+        <div class="help-row"><span><kbd>Left</kbd> / <kbd>Right</kbd></span><span>Step frame (session player)</span></div>
+        <div class="help-row"><span><kbd>?</kbd></span><span>Help</span></div>
+        <br>
+        <h2>How it works</h2>
+        <p style="font-size:13px;color:var(--text-secondary);line-height:1.6">
+            Claude updates the <code>.mmd</code> files in the <code>diagrams/</code> folder.
+            With Auto-Sync enabled, this page updates in real time via WebSocket.
+            Click <strong>Editor</strong> to edit directly in the browser.
+        </p>
+    </div>
+</div>
+
+<!-- Module scripts (load order matters) -->
+<script src="workspace-switcher.js"></script>
+<script src="event-bus.js"></script>
+<script src="diagram-dom.js"></script>
+<script src="renderer.js"></script>
+<script src="pan-zoom.js"></script>
+<script src="export.js"></script>
+<script src="icons.js"></script>
+<script src="file-tree.js"></script>
+<script src="editor-panel.js"></script>
+<script src="ws-client.js"></script>
+<script src="collapse-ui.js"></script>
+<script src="annotations-svg.js"></script>
+<script src="annotations-panel.js"></script>
+<script src="annotations.js"></script>
+<script src="command-history.js"></script>
+<script src="diagram-editor.js"></script>
+<script src="editor-popovers.js"></script>
+<script src="search.js"></script>
+<script src="interaction-state.js"></script>
+<script src="selection.js"></script>
+<script src="node-drag.js"></script>
+<script src="context-menu.js"></script>
+<script src="inline-edit.js"></script>
+<script src="clipboard.js"></script>
+<script src="viewport-transform.js"></script>
+<script src="dagre-layout.js"></script>
+<script src="svg-shapes.js"></script>
+<script src="svg-renderer.js"></script>
+<script src="custom-renderer.js"></script>
+<script src="breakpoints.js"></script>
+<script src="ghost-paths.js"></script>
+<script src="heatmap.js"></script>
+<script src="interaction-tracker.js"></script>
+<script src="session-player.js"></script>
+<script src="ws-handler.js"></script>
+<script src="mcp-sessions.js"></script>
+<script src="modal.js"></script>
+<script src="app-init.js"></script>
+
+</body>
+</html>