mbeditor 0.8.1 → 0.10.0

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

@@ -0,0 +1,427 @@
+'use strict';
+
+// A deliberately small Ruby lexer for editor outlines. It recognizes only
+// declarations and never evaluates source; masking literals avoids false
+// matches without needing a full Ruby parser.
+var RubyOutline = (function () {
+  var MAX_ENTRIES = 5000;
+  var DEF_RE = /^\s*def\s+(self\.)?([a-zA-Z_][a-zA-Z0-9_?!=]*)/;
+  var VISIBILITY_RE = /^\s*(public|protected|private)\s*(?:#.*)?$/;
+  var SCOPE_RE = /^\s*(class|module)\b/;
+  var DECLARATION_RE = /^\s*((?:RSpec\.)?(?:describe|context|feature)|test|it|specify|example|scenario)\b/;
+  var SUITE_NAMES = {
+    'describe': true, 'RSpec.describe': true,
+    'context': true, 'RSpec.context': true,
+    'feature': true, 'RSpec.feature': true
+  };
+  var TEST_NAMES = { 'test': true, 'it': true, 'specify': true, 'example': true, 'scenario': true };
+
+  function indentation(line) {
+    var leading = (/^[ \t]*/.exec(line) || [''])[0];
+    return leading.replace(/\t/g, '  ').length;
+  }
+
+  function popScopesAtOrInside(scopes, indent) {
+    while (scopes.length > 1 && scopes[scopes.length - 1].indent >= indent) {
+      scopes.pop();
+    }
+  }
+
+  function percentLiteralAt(line, index) {
+    if (line.charAt(index) !== '%') return null;
+
+    var type = line.charAt(index + 1);
+    var delimiterIndex = index + 1;
+    if (/[qQwWrixsI]/.test(type)) delimiterIndex++;
+
+    var open = line.charAt(delimiterIndex);
+    if (!open || /[a-zA-Z0-9_\s]/.test(open)) return null;
+
+    var pairs = { '(': ')', '[': ']', '{': '}', '<': '>' };
+    return {
+      length: delimiterIndex - index + 1,
+      open: open,
+      close: pairs[open] || open,
+      paired: !!pairs[open]
+    };
+  }
+
+  function heredocAt(line, index) {
+    if (line.slice(index, index + 2) !== '<<') return null;
+    if (index > 0 && !/[\s(,=\[{]/.test(line.charAt(index - 1))) return null;
+
+    var match = /^<<([-~])?(?:'([^'\r\n]+)'|"([^"\r\n]+)"|`([^`\r\n]+)`|([a-zA-Z_][a-zA-Z0-9_]*))/.exec(line.slice(index));
+    if (!match) return null;
+
+    return {
+      length: match[0].length,
+      terminator: match[2] || match[3] || match[4] || match[5],
+      allowIndent: !!match[1]
+    };
+  }
+
+  function startsSlashRegex(line, index, code) {
+    if (/\s/.test(line.charAt(index + 1))) return false;
+
+    var prefix = code.replace(/\s+$/, '');
+    if (prefix.length === 0) return true;
+    if (/[=(:,\[!&|?{};+\-*%<>~^]$/.test(prefix)) return true;
+    if (/\b(?:return|yield|when|if|unless|while|until|and|or|not)$/.test(prefix)) return true;
+
+    return /\s$/.test(line.slice(0, index)) &&
+      /[a-zA-Z_][a-zA-Z0-9_!?=]*$/.test(prefix);
+  }
+
+  function maskRubyLine(line, state) {
+    var code = '';
+    var heredocs = [];
+    var i = 0;
+
+    while (i < line.length) {
+      var ch = line.charAt(i);
+
+      if (state) {
+        var maskedCharacter = ' ';
+
+        if (state.escaped) {
+          state.escaped = false;
+        } else if (ch === '\\') {
+          state.escaped = true;
+        } else if (state.regex && ch === '[') {
+          state.inCharacterClass = true;
+        } else if (state.regex && ch === ']') {
+          state.inCharacterClass = false;
+        } else if (state.regex && ch === '/' && !state.inCharacterClass) {
+          state = null;
+        } else if (state.paired && ch === state.open) {
+          state.depth++;
+        } else if (!state.regex && ch === state.close) {
+          if (state.paired) state.depth--;
+          if (!state.paired || state.depth === 0) state = null;
+        }
+
+        if (!state) maskedCharacter = 'x';
+        code += maskedCharacter;
+        i++;
+        continue;
+      }
+
+      if (ch === '#') break;
+
+      if (ch === "'" || ch === '"' || ch === '`') {
+        state = { open: ch, close: ch, paired: false, depth: 1, escaped: false };
+        code += ' ';
+        i++;
+        continue;
+      }
+
+      if (ch === '/' && startsSlashRegex(line, i, code)) {
+        state = {
+          open: '/', close: '/', paired: false, depth: 1, escaped: false,
+          regex: true, inCharacterClass: false
+        };
+        code += ' ';
+        i++;
+        continue;
+      }
+
+      var percentLiteral = percentLiteralAt(line, i);
+      if (percentLiteral) {
+        state = {
+          open: percentLiteral.open, close: percentLiteral.close,
+          paired: percentLiteral.paired, depth: 1, escaped: false
+        };
+        code += new Array(percentLiteral.length + 1).join(' ');
+        i += percentLiteral.length;
+        continue;
+      }
+
+      var heredoc = heredocAt(line, i);
+      if (heredoc) {
+        heredocs.push({ terminator: heredoc.terminator, allowIndent: heredoc.allowIndent });
+        code += new Array(heredoc.length + 1).join(' ');
+        i += heredoc.length;
+        continue;
+      }
+
+      code += ch;
+      i++;
+    }
+
+    if (state) state.escaped = false;
+    return { code: code, state: state, heredocs: heredocs };
+  }
+
+  function addEntry(entries, entry) {
+    if (entries.length >= MAX_ENTRIES) return false;
+    entries.push(entry);
+    return true;
+  }
+
+  function cloneLexicalState(state) {
+    if (!state) return null;
+    return {
+      open: state.open,
+      close: state.close,
+      paired: state.paired,
+      depth: state.depth,
+      escaped: state.escaped,
+      regex: state.regex,
+      inCharacterClass: state.inCharacterClass
+    };
+  }
+
+  function cloneHeredocs(heredocs) {
+    return heredocs.map(function (heredoc) {
+      return { terminator: heredoc.terminator, allowIndent: heredoc.allowIndent };
+    });
+  }
+
+  function testPath(path) {
+    return /(^|\/)test\/.*_test\.rb$/.test(path) ||
+      /(^|\/)spec\/.*_spec\.rb$/.test(path) ||
+      /_test\.rb$/.test(path) ||
+      /_spec\.rb$/.test(path);
+  }
+
+  function declarationDescription(raw, code, declaration, kind, lineNumber) {
+    var rest = raw.slice(raw.indexOf(declaration) + declaration.length);
+    var codeRest = code.slice(code.indexOf(declaration) + declaration.length);
+    var quoted = /^\s*\(?\s*(['"])((?:\\.|[^\\])*?)\1/.exec(rest);
+    var constant = /^\s*\(?\s*([A-Z][a-zA-Z0-9_]*(?:::[A-Z][a-zA-Z0-9_]*)*)(?=\s*(?:,|\)|\bdo\b|\{))/.exec(rest);
+    var descriptor = codeRest.replace(/(?:\bdo\b|\{)[\s\S]*$/, '').replace(/[(){}\s]/g, '');
+
+    if (quoted && quoted[2].indexOf('\n') === -1 &&
+        (quoted[1] === "'" || quoted[2].indexOf('#{') === -1)) return quoted[2];
+    if (constant) return constant[1];
+    if (quoted || /[a-zA-Z_:]/.test(descriptor) || /<</.test(rest)) {
+      return kind === 'suite' ? 'suite at line ' + lineNumber : 'test at line ' + lineNumber;
+    }
+    return null;
+  }
+
+  function declarationStatus(code) {
+    var parenDepth = 0;
+    var bracketDepth = 0;
+    var hashDepth = 0;
+    var i = 0;
+
+    while (i < code.length) {
+      var ch = code.charAt(i);
+
+      if (ch === '(') {
+        parenDepth++;
+      } else if (ch === ')') {
+        if (parenDepth > 0) parenDepth--;
+      } else if (ch === '[') {
+        bracketDepth++;
+      } else if (ch === ']') {
+        if (bracketDepth > 0) bracketDepth--;
+      } else if (ch === '{') {
+        if (parenDepth === 0 && bracketDepth === 0 && hashDepth === 0) {
+          var beforeBrace = code.slice(0, i).replace(/\s+$/, '');
+          if (!/(?:[:,=]|\*\*|=>)$/.test(beforeBrace)) {
+            return { complete: true, canContinue: false };
+          }
+        }
+        hashDepth++;
+      } else if (ch === '}') {
+        if (hashDepth > 0) hashDepth--;
+      } else if (parenDepth === 0 && bracketDepth === 0 && hashDepth === 0 &&
+          code.slice(i, i + 2) === 'do' &&
+          (i === 0 || !/[a-zA-Z0-9_!:]/.test(code.charAt(i - 1))) &&
+          !/[a-zA-Z0-9_!?=]/.test(code.charAt(i + 2)) &&
+          !/^\s*:/.test(code.slice(i + 2))) {
+        return { complete: true, canContinue: false };
+      }
+      i++;
+    }
+
+    var trimmed = code.replace(/\s+$/, '');
+    return {
+      complete: false,
+      canContinue: parenDepth > 0 || bracketDepth > 0 || hashDepth > 0 ||
+        /(?:[,\\]|[+\-*\/%&|.=<>?:])$/.test(trimmed)
+    };
+  }
+
+  function scanDeclarationHeader(lines, startIndex, rawHeader, codeHeader, state, heredocs, inBlockComment) {
+    var headerEnd = startIndex;
+    var localState = cloneLexicalState(state);
+    var localHeredocs = cloneHeredocs(heredocs);
+    var localBlockComment = inBlockComment;
+    var status = declarationStatus(codeHeader);
+    if (!status.complete && (localState || localHeredocs.length > 0 || localBlockComment)) {
+      status.canContinue = true;
+    }
+
+    while (!status.complete && status.canContinue &&
+        headerEnd + 1 < lines.length && headerEnd - startIndex < 7) {
+      headerEnd++;
+      var nextLine = String(lines[headerEnd] || '').replace(/\r?\n$/, '');
+      var nextCode = '';
+
+      if (localBlockComment) {
+        if (/^=end\b/.test(nextLine)) localBlockComment = false;
+      } else if (localHeredocs.length > 0) {
+        var pendingHeredoc = localHeredocs[0];
+        var candidateTerminator = pendingHeredoc.allowIndent ?
+          nextLine.replace(/^\s+/, '') : nextLine;
+        if (candidateTerminator === pendingHeredoc.terminator) localHeredocs.shift();
+      } else {
+        var nextMasked = maskRubyLine(nextLine, localState);
+        localState = nextMasked.state;
+        nextCode = nextMasked.code;
+
+        if (/^=begin\b/.test(nextCode)) {
+          localBlockComment = true;
+          nextCode = '';
+        } else {
+          for (var h = 0; h < nextMasked.heredocs.length; h++) {
+            localHeredocs.push(nextMasked.heredocs[h]);
+          }
+        }
+      }
+
+      rawHeader += '\n' + nextLine;
+      codeHeader += '\n' + nextCode;
+      status = declarationStatus(codeHeader);
+      if (!status.complete && (localState || localHeredocs.length > 0 || localBlockComment)) {
+        status.canContinue = true;
+      }
+    }
+
+    return {
+      complete: status.complete,
+      rawHeader: rawHeader,
+      codeHeader: codeHeader,
+      headerEnd: headerEnd,
+      state: localState,
+      heredocs: localHeredocs,
+      inBlockComment: localBlockComment
+    };
+  }
+
+  function parse(lines, options) {
+    var entries = [];
+    var scopes = [{ indent: -1, visibility: null }];
+    var suites = [];
+    var heredocTerminators = [];
+    var lexicalState = null;
+    var inBlockComment = false;
+    var path = String((options || {}).path || '');
+    var allowTestDsl = testPath(path);
+    var stopped = false;
+
+    for (var i = 0; i < lines.length && !stopped; i++) {
+      var line = String(lines[i] || '').replace(/\r?\n$/, '');
+      var codeLine;
+      var masked;
+
+      if (inBlockComment) {
+        if (/^=end\b/.test(line)) inBlockComment = false;
+        continue;
+      }
+
+      if (heredocTerminators.length > 0) {
+        var pendingHeredoc = heredocTerminators[0];
+        var candidateTerminator = pendingHeredoc.allowIndent ? line.replace(/^\s+/, '') : line;
+        if (candidateTerminator === pendingHeredoc.terminator) heredocTerminators.shift();
+        continue;
+      }
+
+      masked = maskRubyLine(line, lexicalState);
+      lexicalState = masked.state;
+      codeLine = masked.code;
+
+      if (/^=begin\b/.test(codeLine)) {
+        inBlockComment = true;
+        continue;
+      }
+
+      for (var h = 0; h < masked.heredocs.length; h++) heredocTerminators.push(masked.heredocs[h]);
+      if (/^\s*$/.test(codeLine)) continue;
+
+      var indent = indentation(line);
+      while (suites.length > 0 && indent <= suites[suites.length - 1].indent) suites.pop();
+
+      if (SCOPE_RE.test(codeLine)) {
+        popScopesAtOrInside(scopes, indent);
+        scopes.push({ indent: indent, visibility: null });
+        continue;
+      }
+
+      var visibilityMatch = VISIBILITY_RE.exec(codeLine);
+      if (visibilityMatch) {
+        popScopesAtOrInside(scopes, indent);
+        scopes[scopes.length - 1].visibility = visibilityMatch[1];
+        continue;
+      }
+
+      var methodMatch = DEF_RE.exec(codeLine);
+      if (methodMatch) {
+        popScopesAtOrInside(scopes, indent);
+        if (!addEntry(entries, {
+          line: i + 1,
+          name: (methodMatch[1] || '') + methodMatch[2],
+          kind: 'method',
+          depth: suites.length,
+          visibility: methodMatch[1] ? 'public' : scopes[scopes.length - 1].visibility
+        })) stopped = true;
+        continue;
+      }
+
+      if (!allowTestDsl) continue;
+
+      var declarationMatch = DECLARATION_RE.exec(codeLine);
+      if (!declarationMatch) continue;
+
+      var declaration = declarationMatch[1];
+      var kind = SUITE_NAMES[declaration] ? 'suite' : (TEST_NAMES[declaration] ? 'test' : null);
+      if (!kind) continue;
+
+      var rawHeader = line;
+      var codeHeader = codeLine;
+      var headerEnd = i;
+      var headerScan = scanDeclarationHeader(
+        lines, i, rawHeader, codeHeader, lexicalState,
+        heredocTerminators, inBlockComment
+      );
+
+      if (!headerScan.complete) continue;
+      if (headerScan.headerEnd > i) {
+        rawHeader = headerScan.rawHeader;
+        codeHeader = headerScan.codeHeader;
+        headerEnd = headerScan.headerEnd;
+        lexicalState = headerScan.state;
+        heredocTerminators = headerScan.heredocs;
+        inBlockComment = headerScan.inBlockComment;
+      }
+
+      var name = declarationDescription(rawHeader, codeHeader, declaration, kind, i + 1);
+      if (!name) continue;
+
+      if (!addEntry(entries, {
+        line: i + 1,
+        name: name,
+        kind: kind,
+        depth: suites.length,
+        visibility: null
+      })) {
+        stopped = true;
+        continue;
+      }
+
+      if (kind === 'suite' && !/(?:\bdo\b|\{)[\s\S]*\bend\b/.test(codeHeader)) {
+        suites.push({ indent: indent });
+      }
+      i = headerEnd;
+    }
+
+    return { entries: entries, truncated: entries.length >= MAX_ENTRIES && stopped };
+  }
+
+  return { parse: parse, isTestPath: testPath };
+})();
+
+window.RubyOutline = RubyOutline;

data/app/assets/stylesheets/mbeditor/editor.css

@@ -63,12 +63,26 @@ html, body, #mbeditor-root {
   font-weight: 500;
 }
 
+/* Fills the gap between the title and the button cluster. min-width: 0 lets it
+   collapse on a narrow window instead of shoving the buttons off the edge. */
+.ide-titlebar-search-slot {
+  display: flex;
+  flex: 1 1 auto;
+  justify-content: center;
+  min-width: 0;
+  margin: 0 12px;
+}
+
 .ide-titlebar-search {
   display: flex;
   align-items: center;
-  margin: 0 auto;
-  min-width: 220px;
-  max-width: 340px;
+  justify-content: center;
+  /* 75% of the slot, i.e. of the space between the title and the buttons.
+     The floor keeps the placeholder readable once 75% of a shrinking gap
+     stops being enough, and caps at 100% so it can never outgrow its slot
+     and shove the buttons off the edge. */
+  width: 75%;
+  min-width: min(220px, 100%);
   padding: 3px 12px;
   background: rgba(255, 255, 255, 0.06);
   border: 1px solid rgba(255, 255, 255, 0.12);
@@ -78,7 +92,12 @@ html, body, #mbeditor-root {
   cursor: pointer;
 }
 .ide-titlebar-search:hover { background: rgba(255, 255, 255, 0.10); }
-.ide-titlebar-search-text { opacity: 0.8; }
+.ide-titlebar-search-text {
+  opacity: 0.8;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 
 .ide-body {
   display: flex;
@@ -1990,6 +2009,10 @@ html, body, #mbeditor-root {
   display: flex;
   align-items: center;
   gap: 8px;
+  width: 100%;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
   padding: 5px 12px;
   cursor: pointer;
   color: #ccc;
@@ -1998,13 +2021,20 @@ html, body, #mbeditor-root {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  text-align: left;
 }
 
-.ide-methods-dropdown-item:hover {
+.ide-methods-dropdown-item:hover,
+.ide-methods-dropdown-item:focus {
   background: #094771;
   color: #fff;
 }
 
+.ide-methods-dropdown-item:focus {
+  outline: 1px solid #75beff;
+  outline-offset: -1px;
+}
+
 .ide-methods-dropdown-line {
   color: #858585;
   font-size: 11px;
@@ -2021,6 +2051,55 @@ html, body, #mbeditor-root {
   font-style: italic;
 }
 
+.ide-methods-dropdown-visibility {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  padding: 4px 12px;
+  background: #252526;
+  border-bottom: 1px solid #3a3a3a;
+  color: #9cdcfe;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.ide-methods-dropdown-visibility-group {
+  position: relative;
+}
+
+.ide-outline-entry-icon {
+  width: 13px;
+  flex-shrink: 0;
+  text-align: center;
+  color: #858585;
+}
+
+.ide-outline-entry-suite .ide-outline-entry-icon { color: #dcb67a; }
+.ide-outline-entry-test .ide-outline-entry-icon { color: #8ab4f8; }
+.ide-outline-entry-name { overflow: hidden; text-overflow: ellipsis; }
+
+/* Line numbers tinted by git status (see the line_diff effect in EditorPanel).
+   Monaco themes style `.monaco-editor .line-numbers`, so these need the same
+   two-class prefix to win on specificity rather than reaching for !important.
+   The colours are theme variables so they track the active editor theme. */
+.monaco-editor .line-numbers.mbeditor-gitline-added    { color: var(--ide-success); font-weight: 600; }
+.monaco-editor .line-numbers.mbeditor-gitline-modified { color: var(--ide-warning); font-weight: 600; }
+.monaco-editor .line-numbers.mbeditor-gitline-deleted  { color: var(--ide-danger);  font-weight: 600; }
+
+/* A line that is both modified and sits above a deletion should read as
+   deleted — the rarer, more surprising state wins. */
+.monaco-editor .line-numbers.mbeditor-gitline-deleted.mbeditor-gitline-added,
+.monaco-editor .line-numbers.mbeditor-gitline-deleted.mbeditor-gitline-modified { color: var(--ide-danger); }
+
+.ide-methods-dropdown-message {
+  padding: 8px 12px;
+  color: #858585;
+  font-size: 12px;
+  font-style: italic;
+}
+
 
 
 .project-action-btn {
@@ -2761,3 +2840,143 @@ button:not(.pico-btn) { margin-bottom: 0; }
   word-break: break-word;
 }
 .ide-log-line { color: var(--ide-fg, #d4d4d4); }
+
+/* Rails log colouring — see classifyLogLine in LogPanel.js for what matches
+   what, and the --ide-log-* block in themes.css for the palette. Deliberately
+   restrained: the point is to let the eye find request boundaries and failures
+   while scrolling, not to paint every line. */
+.ide-log-line-request    { color: var(--ide-log-request); font-weight: 600; }
+.ide-log-line-controller { color: var(--ide-log-controller); }
+.ide-log-line-success    { color: var(--ide-log-success); }
+.ide-log-line-error      { color: var(--ide-log-error); font-weight: 600; }
+.ide-log-line-warn       { color: var(--ide-log-warn); }
+.ide-log-line-sql        { color: var(--ide-log-sql); }
+.ide-log-line-render     { color: var(--ide-log-render); }
+.ide-log-line-mbeditor   { color: var(--ide-log-controller); font-style: italic; }
+.ide-log-line-muted,
+.ide-log-line-trace      { color: var(--ide-log-muted); }
+
+/* ── Problems drawer ──────────────────────────────────────────────────────
+   Same geometry as the log drawer so the two read as one family; only the
+   body differs, being a list of clickable diagnostics rather than raw text. */
+.ide-problems-drawer {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 22px; /* sit above the status bar */
+  height: 240px; /* default; overridden by the drag-resized inline height */
+  display: flex;
+  flex-direction: column;
+  background: var(--ide-panel-bg, #1e1e1e);
+  border-top: 1px solid var(--ide-border, #333);
+  z-index: 41; /* above the log drawer when both are open */
+}
+.ide-problems-resize {
+  flex: 0 0 auto;
+  height: 6px;
+  cursor: ns-resize;
+  background: transparent;
+}
+.ide-problems-resize:hover { background: var(--ide-accent, #569cd6); }
+.ide-problems-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 10px;
+  border-bottom: 1px solid var(--ide-border, #333);
+  font-size: 12px;
+  color: var(--ide-fg-muted, #ccc);
+}
+.ide-problems-title { font-weight: 600; }
+.ide-problems-summary { color: var(--ide-text-muted, #858585); font-size: 11px; }
+.ide-problems-filter {
+  margin-left: auto;
+  background: var(--ide-input-bg, #2d2d2d);
+  color: var(--ide-fg, #eee);
+  border: 1px solid var(--ide-border, #333);
+  border-radius: 3px;
+  padding: 2px 6px;
+  font-size: 12px;
+  width: 180px;
+}
+.ide-problems-btn {
+  background: transparent;
+  border: none;
+  color: var(--ide-fg-muted, #ccc);
+  cursor: pointer;
+  padding: 2px 6px;
+}
+.ide-problems-btn:hover { color: var(--ide-fg, #fff); }
+.ide-problems-body { flex: 1; overflow: auto; padding: 4px 0; font-size: 12px; }
+.ide-problems-empty {
+  padding: 10px 14px;
+  color: var(--ide-text-muted, #858585);
+  font-style: italic;
+}
+.ide-problems-file-name {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 12px 3px;
+  color: var(--ide-fg-muted, #ccc);
+  font-weight: 600;
+}
+.ide-problems-file-count {
+  background: var(--ide-hover-bg, #2a2a2a);
+  border-radius: 8px;
+  padding: 0 6px;
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--ide-text-muted, #858585);
+}
+.ide-problems-item {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  width: 100%;
+  padding: 3px 12px 3px 28px;
+  background: transparent;
+  border: none;
+  color: var(--ide-fg, #d4d4d4);
+  font-size: 12px;
+  font-family: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.ide-problems-item:hover,
+.ide-problems-item:focus-visible { background: var(--ide-hover-bg, #2a2a2a); }
+.ide-problems-icon { flex-shrink: 0; }
+.ide-problems-item-error .ide-problems-icon { color: var(--ide-danger); }
+.ide-problems-item-warning .ide-problems-icon { color: var(--ide-warning); }
+.ide-problems-msg { flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* The offending source line, dimmed so it reads as context rather than as part
+   of the message. It is the one part of the row allowed to shrink, so a long
+   line gives way to the message and location instead of pushing them out. */
+.ide-problems-code {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--ide-text-muted, #858585);
+  opacity: 0.8;
+  font-family: var(--ide-mono, monospace);
+  font-size: 11px;
+}
+.ide-problems-source {
+  flex-shrink: 0;
+  color: var(--ide-text-muted, #858585);
+  font-size: 10px;
+  text-transform: lowercase;
+}
+.ide-problems-loc {
+  flex-shrink: 0;
+  margin-left: auto;
+  color: var(--ide-text-muted, #858585);
+  font-size: 11px;
+}
+
+/* Status-bar problems indicator: bug count then warning count, VS Code style. */
+.statusbar-problems { display: inline-flex; align-items: center; gap: 4px; }
+.statusbar-problems-error-icon { color: var(--ide-danger); }
+.statusbar-problems-warning-icon { color: var(--ide-warning); }
+.statusbar-problems-count { font-variant-numeric: tabular-nums; }