mbeditor 0.1.6 → 0.1.7

data/app/assets/javascripts/mbeditor/components/MbeditorApp.js

@@ -23,7 +23,14 @@ var DEFAULT_EDITOR_PREFS = {
   fontSize: 13,
   fontFamily: "'JetBrains Mono', 'Fira Code', Consolas, 'Courier New', monospace",
   tabSize: 4,
-  insertSpaces: false
+  insertSpaces: false,
+  wordWrap: 'off',
+  lineNumbers: 'on',
+  renderWhitespace: 'none',
+  scrollBeyondLastLine: false,
+  minimap: false,
+  bracketPairColorization: true,
+  autoRevealInExplorer: true
 };
 
 var SidebarActionButton = function SidebarActionButton(_ref) {
@@ -260,6 +267,36 @@ var MbeditorApp = function MbeditorApp() {
   var redmineEnabled = _useState18f2[0];
   var setRedmineEnabled = _useState18f2[1];
 
+  var _useState18t = useState(false);
+  var _useState18t2 = _slicedToArray(_useState18t, 2);
+  var testAvailable = _useState18t2[0];
+  var setTestAvailable = _useState18t2[1];
+
+  var _useState18u = useState(null);
+  var _useState18u2 = _slicedToArray(_useState18u, 2);
+  var testResult = _useState18u2[0];
+  var setTestResult = _useState18u2[1];
+
+  var _useState18v = useState(false);
+  var _useState18v2 = _slicedToArray(_useState18v, 2);
+  var testLoading = _useState18v2[0];
+  var setTestLoading = _useState18v2[1];
+
+  var _useState18w = useState(true);
+  var _useState18w2 = _slicedToArray(_useState18w, 2);
+  var testInlineVisible = _useState18w2[0];
+  var setTestInlineVisible = _useState18w2[1];
+
+  var _useState18x = useState(null);
+  var _useState18x2 = _slicedToArray(_useState18x, 2);
+  var testPanelFile = _useState18x2[0];
+  var setTestPanelFile = _useState18x2[1];
+
+  var _useState18y = useState(false);
+  var _useState18y2 = _slicedToArray(_useState18y, 2);
+  var testPanelOpen = _useState18y2[0];
+  var setTestPanelOpen = _useState18y2[1];
+
   var _useState18p = useState(DEFAULT_EDITOR_PREFS);
   var _useState18p2 = _slicedToArray(_useState18p, 2);
   var editorPrefs = _useState18p2[0];
@@ -490,6 +527,9 @@ var MbeditorApp = function MbeditorApp() {
       if (workspace && typeof workspace.redmineEnabled === 'boolean') {
         setRedmineEnabled(workspace.redmineEnabled);
       }
+      if (workspace && typeof workspace.testAvailable === 'boolean') {
+        setTestAvailable(workspace.testAvailable);
+      }
     });
     GitService.fetchStatus();
 
@@ -499,11 +539,20 @@ var MbeditorApp = function MbeditorApp() {
       if (savedState && savedState.openTabs) {
         panesToLoad = [{ id: 1, tabs: savedState.openTabs, activeTabId: savedState.activeTabId }, { id: 2, tabs: [], activeTabId: null }];
       }
+      if (savedState && savedState.editorPrefs && typeof savedState.editorPrefs === 'object') {
+        setEditorPrefs(Object.assign({}, DEFAULT_EDITOR_PREFS, savedState.editorPrefs));
+      }
+      if (savedState && savedState.activeSidebarTab) {
+        setActiveSidebarTab(savedState.activeSidebarTab);
+      }
       if (panesToLoad && panesToLoad.length > 0) {
         var allTabs = panesToLoad.flatMap(function (p) {
           return p.tabs;
         });
         Promise.all(allTabs.map(function (t) {
+          if (t.isSettings || t.path === '__settings__') {
+            return Promise.resolve({ content: '' });
+          }
           if (t.isDiff && t.repoPath) {
             return GitService.fetchDiff(t.repoPath, t.diffBaseSha, t.diffHeadSha)
               .then(function (d) { return { content: 'Diff loaded', diffOriginal: d.original || '', diffModified: d.modified || '', _isDiffResult: true }; })
@@ -543,9 +592,6 @@ var MbeditorApp = function MbeditorApp() {
           if (typeof savedState.gitPanelWidth === 'number') {
             setGitPanelWidth(savedState.gitPanelWidth);
           }
-          if (savedState.editorPrefs && typeof savedState.editorPrefs === 'object') {
-            setEditorPrefs(Object.assign({}, DEFAULT_EDITOR_PREFS, savedState.editorPrefs));
-          }
         });
       }
     });
@@ -827,13 +873,14 @@ var MbeditorApp = function MbeditorApp() {
         return {
           id: p.id,
           activeTabId: p.activeTabId,
-          tabs: p.tabs.filter(function(t) { return !t.isCombinedDiff && !t.isSettings; }).map(function (t) {
+          tabs: p.tabs.filter(function(t) { return !t.isCombinedDiff; }).map(function (t) {
             return {
               id: t.id,
               path: t.path,
               name: t.name,
               dirty: t.dirty,
               viewState: t.viewState,
+              isSettings: !!t.isSettings,
               isPreview: !!t.isPreview,
               previewFor: t.previewFor || null,
               isDiff: !!t.isDiff,
@@ -844,12 +891,12 @@ var MbeditorApp = function MbeditorApp() {
           })
         };
       });
-      FileService.saveState({ panes: lightweightPanes, focusedPaneId: st.focusedPaneId, collapsedSections: collapsedSections, expandedDirs: expandedDirs, showGitPanel: showGitPanel, gitPanelWidth: gitPanelWidth, editorPrefs: editorPrefs });
+      FileService.saveState({ panes: lightweightPanes, focusedPaneId: st.focusedPaneId, collapsedSections: collapsedSections, expandedDirs: expandedDirs, showGitPanel: showGitPanel, gitPanelWidth: gitPanelWidth, editorPrefs: editorPrefs, activeSidebarTab: activeSidebarTab });
     }, 1000);
     return function () {
       return clearTimeout(timeoutId);
     };
-  }, [state.panes, state.focusedPaneId, collapsedSections, expandedDirs, showGitPanel, gitPanelWidth, editorPrefs]);
+  }, [state.panes, state.focusedPaneId, collapsedSections, expandedDirs, showGitPanel, gitPanelWidth, editorPrefs, activeSidebarTab]);
 
   useEffect(function() {
     document.documentElement.setAttribute('data-theme', editorPrefs.theme || 'vs-dark');
@@ -1113,6 +1160,39 @@ var MbeditorApp = function MbeditorApp() {
     }
   };
 
+  var handleRunTest = function handleRunTest() {
+    if (!activeTab || !activeTab.path) return;
+    if (testLoading) return;
+
+    setTestLoading(true);
+    EditorStore.setStatus('Running tests...', 'info');
+
+    FileService.runTests(activeTab.path).then(function (res) {
+      setTestResult(res);
+      setTestPanelFile(res.testFile || activeTab.path);
+      setTestPanelOpen(true);
+      if (res.ok) {
+        var s = res.summary || {};
+        var failCount = (s.failed || 0) + (s.errored || 0);
+        if (failCount === 0) {
+          EditorStore.setStatus('All ' + (s.total || 0) + ' tests passed', 'success');
+        } else {
+          EditorStore.setStatus(failCount + ' test' + (failCount === 1 ? '' : 's') + ' failed out of ' + (s.total || 0), 'warning');
+        }
+      } else {
+        EditorStore.setStatus('Test run failed: ' + (res.error || 'unknown error'), 'error');
+      }
+    })["catch"](function (err) {
+      var msg = err.response && err.response.data && err.response.data.error || err.message;
+      setTestResult({ ok: false, error: msg, tests: [], summary: null });
+      setTestPanelFile(activeTab.path);
+      setTestPanelOpen(true);
+      EditorStore.setStatus('Test run failed: ' + msg, 'error');
+    })["finally"](function () {
+      setTestLoading(false);
+    });
+  };
+
   var onFormatRef = useRef(handleFormat);
   onFormatRef.current = handleFormat;
 
@@ -1555,6 +1635,18 @@ var MbeditorApp = function MbeditorApp() {
       },
       onShowHistory: function (path) {
         setHistoryPanelPath(path);
+      },
+      onRevealInExplorer: function (path) {
+        setActiveSidebarTab('explorer');
+        setSelectedTreeNode({ path: path, name: path.split('/').pop(), type: 'file' });
+        setExpandedDirs(function (prev) {
+          var parts = path.split('/');
+          var updates = {};
+          for (var i = 0; i < parts.length - 1; i++) {
+            updates[parts.slice(0, i + 1).join('/')] = true;
+          }
+          return Object.assign({}, prev, updates);
+        });
       }
     });
   };
@@ -1847,7 +1939,7 @@ var MbeditorApp = function MbeditorApp() {
             React.createElement(FileTree, {
               items: treeData,
               onSelect: handleSoftOpenFile,
-              activePath: activeTab && activeTab.path,
+              activePath: editorPrefs.autoRevealInExplorer !== false ? (activeTab && activeTab.path) : null,
               selectedPath: selectedTreePath,
               onNodeSelect: setSelectedTreeNode,
               gitFiles: state.gitFiles,
@@ -2079,7 +2171,7 @@ var MbeditorApp = function MbeditorApp() {
                         type: 'checkbox',
                         className: 'ide-settings-checkbox',
                         checked: !!(editorPrefs.insertSpaces),
-                        onChange: function(e) { setEditorPrefs(function(p) { return Object.assign({}, p, { insertSpaces: e.target.checked }); }); }
+                        onChange: function(e) { var v = e.target.checked; setEditorPrefs(function(p) { return Object.assign({}, p, { insertSpaces: v }); }); }
                       })
                     ),
                     React.createElement(
@@ -2092,6 +2184,89 @@ var MbeditorApp = function MbeditorApp() {
                         onChange: function(e) { setEditorPrefs(function(p) { return Object.assign({}, p, { fontFamily: e.target.value }); }); }
                       })
                     ),
+                    React.createElement(
+                      'label', { className: 'ide-settings-row' },
+                      React.createElement('span', { className: 'ide-settings-label' }, 'Word wrap'),
+                      React.createElement(
+                        'select', {
+                          className: 'ide-settings-select',
+                          value: editorPrefs.wordWrap || 'off',
+                          onChange: function(e) { setEditorPrefs(function(p) { return Object.assign({}, p, { wordWrap: e.target.value }); }); }
+                        },
+                        React.createElement('option', { value: 'off' }, 'Off'),
+                        React.createElement('option', { value: 'on' }, 'On'),
+                        React.createElement('option', { value: 'wordWrapColumn' }, 'Column')
+                      )
+                    ),
+                    React.createElement(
+                      'label', { className: 'ide-settings-row' },
+                      React.createElement('span', { className: 'ide-settings-label' }, 'Line numbers'),
+                      React.createElement(
+                        'select', {
+                          className: 'ide-settings-select',
+                          value: editorPrefs.lineNumbers || 'on',
+                          onChange: function(e) { setEditorPrefs(function(p) { return Object.assign({}, p, { lineNumbers: e.target.value }); }); }
+                        },
+                        React.createElement('option', { value: 'on' }, 'On'),
+                        React.createElement('option', { value: 'off' }, 'Off'),
+                        React.createElement('option', { value: 'relative' }, 'Relative')
+                      )
+                    ),
+                    React.createElement(
+                      'label', { className: 'ide-settings-row' },
+                      React.createElement('span', { className: 'ide-settings-label' }, 'Render whitespace'),
+                      React.createElement(
+                        'select', {
+                          className: 'ide-settings-select',
+                          value: editorPrefs.renderWhitespace || 'none',
+                          onChange: function(e) { setEditorPrefs(function(p) { return Object.assign({}, p, { renderWhitespace: e.target.value }); }); }
+                        },
+                        React.createElement('option', { value: 'none' }, 'None'),
+                        React.createElement('option', { value: 'selection' }, 'Selection only'),
+                        React.createElement('option', { value: 'boundary' }, 'Boundary'),
+                        React.createElement('option', { value: 'all' }, 'All')
+                      )
+                    ),
+                    React.createElement(
+                      'label', { className: 'ide-settings-row ide-settings-row-check' },
+                      React.createElement('span', { className: 'ide-settings-label' }, 'Minimap'),
+                      React.createElement('input', {
+                        type: 'checkbox',
+                        className: 'ide-settings-checkbox',
+                        checked: !!(editorPrefs.minimap),
+                        onChange: function(e) { var v = e.target.checked; setEditorPrefs(function(p) { return Object.assign({}, p, { minimap: v }); }); }
+                      })
+                    ),
+                    React.createElement(
+                      'label', { className: 'ide-settings-row ide-settings-row-check' },
+                      React.createElement('span', { className: 'ide-settings-label' }, 'Scroll beyond last line'),
+                      React.createElement('input', {
+                        type: 'checkbox',
+                        className: 'ide-settings-checkbox',
+                        checked: !!(editorPrefs.scrollBeyondLastLine),
+                        onChange: function(e) { var v = e.target.checked; setEditorPrefs(function(p) { return Object.assign({}, p, { scrollBeyondLastLine: v }); }); }
+                      })
+                    ),
+                    React.createElement(
+                      'label', { className: 'ide-settings-row ide-settings-row-check' },
+                      React.createElement('span', { className: 'ide-settings-label' }, 'Bracket colorization'),
+                      React.createElement('input', {
+                        type: 'checkbox',
+                        className: 'ide-settings-checkbox',
+                        checked: !!(editorPrefs.bracketPairColorization),
+                        onChange: function(e) { var v = e.target.checked; setEditorPrefs(function(p) { return Object.assign({}, p, { bracketPairColorization: v }); }); }
+                      })
+                    ),
+                    React.createElement(
+                      'label', { className: 'ide-settings-row ide-settings-row-check' },
+                      React.createElement('span', { className: 'ide-settings-label' }, 'Explorer follows active file'),
+                      React.createElement('input', {
+                        type: 'checkbox',
+                        className: 'ide-settings-checkbox',
+                        checked: !!(editorPrefs.autoRevealInExplorer),
+                        onChange: function(e) { var v = e.target.checked; setEditorPrefs(function(p) { return Object.assign({}, p, { autoRevealInExplorer: v }); }); }
+                      })
+                    ),
                     React.createElement(
                       'button',
                       {
@@ -2112,6 +2287,7 @@ var MbeditorApp = function MbeditorApp() {
                   original: pActiveTab.diffOriginal || '',
                   modified: pActiveTab.diffModified || '',
                   isDark: isDiffDark,
+                  editorPrefs: editorPrefs,
                   onClose: function() { requestCloseTab(pane.id, pActiveTab.id); }
                 });
               } else {
@@ -2121,8 +2297,15 @@ var MbeditorApp = function MbeditorApp() {
                   paneId: pane.id,
                   markers: markers[pActiveTab.id] || [],
                   gitAvailable: gitAvailable,
+                  testAvailable: testAvailable,
+                  testResult: testResult,
+                  testPanelFile: testPanelFile,
+                  testLoading: testLoading,
+                  testInlineVisible: testInlineVisible,
                   editorPrefs: editorPrefs,
                   onFormat: function() { onFormatRef.current(); },
+                  onRunTest: handleRunTest,
+                  onShowHistory: function(path) { setHistoryPanelPath(path); },
                   onContentChange: function onContentChange(val) {
                     var st = EditorStore.getState();
                     var cp = st.panes.find(function(p) { return p.id === pane.id; });
@@ -2151,7 +2334,11 @@ var MbeditorApp = function MbeditorApp() {
               {
                 className: "ide-pane " + (isFocused ? 'focused' : '') + " " + (isDropTarget ? 'drop-target' : ''),
                 style: { flexBasis: flexBasis, flexShrink: 0, flexGrow: 0, display: 'flex', flexDirection: 'column', minWidth: 0 },
-                onClickCapture: function () {
+                onClickCapture: function (e) {
+                  // Do not steal click events from controls inside the Settings tab.
+                  // Focusing the pane in capture phase can rerender before checkbox
+                  // change events are processed, making toggles appear stuck.
+                  if (e.target && e.target.closest && e.target.closest('.ide-settings-tab-content')) return;
                   return TabManager.focusPane(pane.id);
                 },
                 onDragOver: function (e) {
@@ -2357,12 +2544,35 @@ var MbeditorApp = function MbeditorApp() {
     ),
 
     // File History Panel overlay
-    historyPanelPath && React.createElement(window.FileHistoryPanel || FileHistoryPanel, {
-      path: historyPanelPath,
-      onClose: function () { return setHistoryPanelPath(null); },
-      onSelectCommit: function (hash, path) {
-        TabManager.openDiffTab(path, path.split('/').pop(), hash + '^', hash, null);
-      }
+    historyPanelPath && React.createElement(
+      React.Fragment,
+      null,
+      React.createElement("div", {
+        style: { position: 'fixed', inset: 0, zIndex: 9800, background: 'rgba(0,0,0,0.55)' },
+        onClick: function() { setHistoryPanelPath(null); }
+      }),
+      React.createElement(window.FileHistoryPanel || FileHistoryPanel, {
+        path: historyPanelPath,
+        onClose: function () { return setHistoryPanelPath(null); },
+        onSelectCommit: function (hash, path) {
+          TabManager.openDiffTab(path, path.split('/').pop(), hash + '^', hash, null);
+        }
+      })
+    ),
+
+    // Test Results Panel overlay — closing hides the dialog but keeps testResult for inline markers
+    (testPanelOpen || testLoading) && React.createElement(window.TestResultsPanel || TestResultsPanel, {
+      result: testResult,
+      testFile: testPanelFile,
+      isLoading: testLoading,
+      showInline: testInlineVisible,
+      onToggleInline: function () { setTestInlineVisible(function (prev) { return !prev; }); },
+      onClose: function () { setTestPanelOpen(false); },
+      onOpenTestFile: testPanelFile ? function () {
+        var fileName = testPanelFile.split('/').pop();
+        TabManager.openTab(testPanelFile, fileName);
+        setTestPanelOpen(false);
+      } : null
     }),
 
     // Commit Detail overlay (shown when a commit row is clicked in CommitGraph)

data/app/assets/javascripts/mbeditor/components/TabBar.js

@@ -16,6 +16,7 @@ var TabBar = function TabBar(_ref) {
   var onTabDragEnd = _ref.onTabDragEnd;
   var onHardenTab = _ref.onHardenTab;
   var onShowHistory = _ref.onShowHistory;
+  var onRevealInExplorer = _ref.onRevealInExplorer;
 
   var containerRef = useRef(null);
 
@@ -26,6 +27,13 @@ var TabBar = function TabBar(_ref) {
   var draggingTabId = _useState2[0];
   var setDraggingTabId = _useState2[1];
 
+  var _useState3 = useState(null);
+
+  var _useState4 = _slicedToArray(_useState3, 2);
+
+  var tabContextMenu = _useState4[0];
+  var setTabContextMenu = _useState4[1];
+
   var getTabMarkerClass = function getTabMarkerClass(tab) {
     var tabMarkers = tab.markers || [];
     if (!tabMarkers.length) return '';
@@ -55,7 +63,18 @@ var TabBar = function TabBar(_ref) {
     }
   }, [activeId, tabs]);
 
+  // Close context menu on outside click (bubble phase so onMouseDown on the menu can stop it)
+  useEffect(function () {
+    if (!tabContextMenu) return;
+    var handler = function () { setTabContextMenu(null); };
+    document.addEventListener('mousedown', handler);
+    return function () { document.removeEventListener('mousedown', handler); };
+  }, [tabContextMenu]);
+
   return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(
     'div',
     { className: 'tab-bar', ref: containerRef, onWheel: function (e) {
         if (containerRef.current) {
@@ -90,7 +109,7 @@ var TabBar = function TabBar(_ref) {
           onContextMenu: function (e) {
             if (isSpecial) return;
             e.preventDefault();
-            if (onShowHistory) onShowHistory(tab.path);
+            setTabContextMenu({ x: e.clientX, y: e.clientY, tab: tab });
           }
         },
         React.createElement('i', { className: 'tab-item-icon ' + (tab.isSettings ? 'fas fa-cog' : (window.getFileIcon ? window.getFileIcon(tab.name) : 'far fa-file-code')) }),
@@ -117,6 +136,56 @@ var TabBar = function TabBar(_ref) {
         )
       );
     })
+  ),
+  tabContextMenu && React.createElement(
+    'div',
+    {
+      className: 'ide-tab-context-menu',
+      style: {
+        position: 'fixed',
+        top: tabContextMenu.y,
+        left: tabContextMenu.x,
+        zIndex: 9999,
+        background: '#252526',
+        border: '1px solid #454545',
+        borderRadius: '4px',
+        boxShadow: '0 4px 12px rgba(0,0,0,0.5)',
+        minWidth: '160px',
+        padding: '4px 0'
+      },
+      onMouseDown: function(e) { e.stopPropagation(); }
+    },
+    onShowHistory && React.createElement(
+      'div',
+      {
+        className: 'ide-tab-context-menu-item',
+        style: { padding: '6px 14px', cursor: 'pointer', color: '#ccc', fontSize: '12px', display: 'flex', alignItems: 'center', gap: '8px' },
+        onMouseEnter: function(e) { e.currentTarget.style.background = '#094771'; },
+        onMouseLeave: function(e) { e.currentTarget.style.background = 'transparent'; },
+        onClick: function() {
+          setTabContextMenu(null);
+          onShowHistory(tabContextMenu.tab.path);
+        }
+      },
+      React.createElement('i', { className: 'fas fa-history', style: { width: '14px', textAlign: 'center' } }),
+      'File History'
+    ),
+    onRevealInExplorer && React.createElement(
+      'div',
+      {
+        className: 'ide-tab-context-menu-item',
+        style: { padding: '6px 14px', cursor: 'pointer', color: '#ccc', fontSize: '12px', display: 'flex', alignItems: 'center', gap: '8px' },
+        onMouseEnter: function(e) { e.currentTarget.style.background = '#094771'; },
+        onMouseLeave: function(e) { e.currentTarget.style.background = 'transparent'; },
+        onClick: function() {
+          setTabContextMenu(null);
+          onRevealInExplorer(tabContextMenu.tab.path);
+        }
+      },
+      React.createElement('i', { className: 'fas fa-sitemap', style: { width: '14px', textAlign: 'center' } }),
+      'Find in Explorer'
+    )
+  )
   );
 };
 

data/app/assets/javascripts/mbeditor/components/TestResultsPanel.js

@@ -0,0 +1,150 @@
+'use strict';
+
+var TestResultsPanel = function TestResultsPanel(_ref) {
+  var result = _ref.result;
+  var testFile = _ref.testFile;
+  var isLoading = _ref.isLoading;
+  var onClose = _ref.onClose;
+  var showInline = _ref.showInline;
+  var onToggleInline = _ref.onToggleInline;
+  var onOpenTestFile = _ref.onOpenTestFile;
+
+  if (!result && !isLoading) return null;
+
+  var summary = result && result.summary;
+  var tests = result && result.tests || [];
+  var error = result && result.error;
+
+  var statusIcon = function statusIcon(status) {
+    if (status === 'pass') return React.createElement('i', { className: 'fas fa-check-circle', style: { color: '#4ec9b0', marginRight: '6px' } });
+    if (status === 'fail') return React.createElement('i', { className: 'fas fa-times-circle', style: { color: '#f14c4c', marginRight: '6px' } });
+    if (status === 'error') return React.createElement('i', { className: 'fas fa-exclamation-circle', style: { color: '#cca700', marginRight: '6px' } });
+    if (status === 'skip') return React.createElement('i', { className: 'fas fa-forward', style: { color: '#888', marginRight: '6px' } });
+    return React.createElement('i', { className: 'fas fa-circle', style: { color: '#888', marginRight: '6px' } });
+  };
+
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement('div', { className: 'ide-modal-backdrop', onClick: onClose }),
+    React.createElement(
+    'div',
+    { className: 'ide-modal-panel' },
+    React.createElement(
+      'div',
+      { className: 'ide-file-history-header' },
+      React.createElement(
+        'div',
+        { className: 'ide-file-history-title' },
+        React.createElement('i', { className: 'fas fa-flask' }),
+        React.createElement(
+          'span',
+          null,
+          'Tests: ',
+          testFile ? testFile.split('/').pop() : 'Results'
+        )
+      ),
+      React.createElement(
+        'div',
+        { style: { display: 'flex', alignItems: 'center', gap: '6px' } },
+        onToggleInline && React.createElement(
+          'button',
+          {
+            className: 'ide-icon-btn' + (showInline ? ' active' : ''),
+            onClick: onToggleInline,
+            title: showInline ? 'Hide inline markers' : 'Show inline markers',
+            style: { fontSize: '11px', padding: '2px 5px', opacity: showInline ? 1 : 0.6, background: showInline ? 'rgba(255,255,255,0.1)' : 'transparent', border: 'none', color: '#ccc', cursor: 'pointer', borderRadius: '3px' }
+          },
+          React.createElement('i', { className: 'fas fa-map-marker-alt' })
+        ),
+        onOpenTestFile && React.createElement(
+          'button',
+          {
+            className: 'ide-icon-btn',
+            onClick: onOpenTestFile,
+            title: 'Open test file',
+            style: { fontSize: '11px', padding: '2px 5px', background: 'transparent', border: 'none', color: '#ccc', cursor: 'pointer', borderRadius: '3px' }
+          },
+          React.createElement('i', { className: 'fas fa-external-link-alt', style: { marginRight: '4px' } }),
+          'Open Test File'
+        ),
+        React.createElement(
+          'button',
+          { className: 'ide-icon-btn', onClick: onClose, title: 'Close Test Results' },
+          React.createElement('i', { className: 'fas fa-times' })
+        )
+      )
+    ),
+    React.createElement(
+      'div',
+      { className: 'ide-file-history-content' },
+      isLoading ? React.createElement(
+        'div',
+        { className: 'ide-loading-state' },
+        React.createElement('i', { className: 'fas fa-spinner fa-spin' }),
+        ' Running tests...'
+      ) : error ? React.createElement(
+        'div',
+        { className: 'ide-error-state' },
+        error
+      ) : !summary ? React.createElement(
+        'div',
+        { className: 'ide-empty-state' },
+        'No test results.'
+      ) : React.createElement(
+        'div',
+        null,
+        React.createElement(
+          'div',
+          { style: { padding: '8px 12px', borderBottom: '1px solid #3c3c3c', fontSize: '12px', color: '#ccc', display: 'flex', gap: '12px', flexWrap: 'wrap' } },
+          React.createElement('span', null, React.createElement('strong', null, summary.total), ' total'),
+          summary.passed > 0 && React.createElement('span', { style: { color: '#4ec9b0' } }, React.createElement('i', { className: 'fas fa-check-circle', style: { marginRight: '3px' } }), summary.passed, ' passed'),
+          summary.failed > 0 && React.createElement('span', { style: { color: '#f14c4c' } }, React.createElement('i', { className: 'fas fa-times-circle', style: { marginRight: '3px' } }), summary.failed, ' failed'),
+          summary.errored > 0 && React.createElement('span', { style: { color: '#cca700' } }, React.createElement('i', { className: 'fas fa-exclamation-circle', style: { marginRight: '3px' } }), summary.errored, ' errors'),
+          summary.skipped > 0 && React.createElement('span', { style: { color: '#888' } }, summary.skipped, ' skipped'),
+          summary.duration != null && React.createElement('span', { style: { color: '#888' } }, summary.duration, 's')
+        ),
+        tests.length > 0 ? React.createElement(
+          'div',
+          { className: 'git-list' },
+          tests.map(function (t, i) {
+            return React.createElement(
+              'div',
+              { key: i, className: 'git-commit-item', style: { cursor: 'default' } },
+              React.createElement(
+                'div',
+                { className: 'git-commit-title', style: { display: 'flex', alignItems: 'center' } },
+                statusIcon(t.status),
+                React.createElement('span', { title: t.name }, t.name)
+              ),
+              t.message && React.createElement(
+                'div',
+                { className: 'git-commit-meta', style: { color: '#f14c4c', whiteSpace: 'pre-wrap', fontFamily: 'monospace', fontSize: '11px', marginTop: '4px', maxHeight: '120px', overflow: 'auto' } },
+                t.message
+              ),
+              t.line && React.createElement(
+                'div',
+                { className: 'git-commit-meta' },
+                'Line ',
+                t.line
+              )
+            );
+          })
+        ) : React.createElement(
+          'div',
+          { style: { padding: '8px 12px', fontSize: '12px', color: '#888' } },
+          summary.total > 0 ? 'All tests passed.' : 'No test details available. Check raw output.'
+        ),
+        result && result.raw && tests.length === 0 && React.createElement(
+          'details',
+          { style: { padding: '8px 12px' } },
+          React.createElement('summary', { style: { cursor: 'pointer', color: '#888', fontSize: '11px' } }, 'Raw output'),
+          React.createElement('pre', { style: { fontSize: '11px', color: '#ccc', whiteSpace: 'pre-wrap', maxHeight: '300px', overflow: 'auto', marginTop: '6px' } }, result.raw)
+        )
+      )
+    )
+  )
+  );
+};
+
+window.TestResultsPanel = TestResultsPanel;

data/app/assets/javascripts/mbeditor/file_service.js

@@ -51,6 +51,10 @@ var FileService = (function () {
     return axios.post(basePath() + '/format', { path: path }).then(function(res) { return res.data; });
   }
 
+  function runTests(path) {
+    return axios.post(basePath() + '/test', { path: path }).then(function(res) { return res.data; });
+  }
+
   function ping() {
     return axios.get(basePath() + '/ping', { timeout: 4000 }).then(function(res) { return res.data; });
   }
@@ -75,6 +79,7 @@ var FileService = (function () {
     lintFile: lintFile,
     quickFixOffense: quickFixOffense,
     formatFile: formatFile,
+    runTests: runTests,
     ping: ping,
     getState: getState,
     saveState: saveState