@@ -2775,6 +3009,8 @@
No suggestions yet
const resultActions = document.getElementById('resultActions');
const engineInfo = document.getElementById('engineInfo');
const timeInfo = document.getElementById('timeInfo');
+ const issueLineHighlights = document.getElementById('issueLineHighlights');
+ let activeIssueLines = new Map();
/* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
THEME
@@ -2875,9 +3111,78 @@
No suggestions yet
.replace('{nonBlank}', nonBlank)
: getTranslation('char_count_initial');
const lineCount = Math.max(lines, 1);
- lineNumbers.innerHTML = val
- ? Array.from({ length: lineCount }, (_, i) => i + 1).join('
')
- : '1';
+ renderLineNumbers(lineCount);
+ renderIssueHighlights(lineCount);
+ }
+
+ function normalizeIssueSeverity(severity) {
+ const normalized = String(severity || '').toLowerCase();
+ return ['error', 'warning', 'info'].includes(normalized) ? normalized : 'info';
+ }
+
+ function collectIssueLines(issues) {
+ const severityRank = { info: 1, warning: 2, error: 3 };
+ const collected = new Map();
+ (issues || []).forEach(issue => {
+ const line = Number.parseInt(issue?.line, 10);
+ if (!Number.isFinite(line) || line < 1) return;
+
+ const severity = normalizeIssueSeverity(issue.severity);
+ const existing = collected.get(line);
+ const details = {
+ severity,
+ type: String(issue.type || severity),
+ description: String(issue.description || ''),
+ };
+
+ if (!existing) {
+ collected.set(line, { severity, details: [details] });
+ return;
+ }
+
+ existing.details.push(details);
+ if (severityRank[severity] > severityRank[existing.severity]) {
+ existing.severity = severity;
+ }
+ });
+ return collected;
+ }
+
+ function renderLineNumbers(lineCount) {
+ lineNumbers.innerHTML = Array.from({ length: lineCount }, (_, i) => {
+ const line = i + 1;
+ const issue = activeIssueLines.get(line);
+ if (!issue) return `
${line} `;
+
+ const label = issue.details
+ .map(detail => `${detail.type}${detail.description ? `: ${detail.description}` : ''}`)
+ .join('\n');
+ return `
${line} `;
+ }).join('');
+ }
+
+ function renderIssueHighlights(lineCount) {
+ if (!issueLineHighlights) return;
+ issueLineHighlights.innerHTML = `
${
+ Array.from({ length: lineCount }, (_, i) => {
+ const line = i + 1;
+ const issue = activeIssueLines.get(line);
+ if (!issue) return '
';
+ const label = issue.details.length > 1 ? `${issue.severity} x${issue.details.length}` : issue.severity;
+ return `
`;
+ }).join('')
+ }
`;
+ }
+
+ function applyIssueHighlights(issues) {
+ activeIssueLines = collectIssueLines(issues);
+ updateEditor();
+ }
+
+ function clearIssueHighlights() {
+ if (!activeIssueLines.size) return;
+ activeIssueLines = new Map();
+ updateEditor();
}
function syncApiStatusText() {
@@ -2903,7 +3208,10 @@
No suggestions yet
function getApiBase() {
const configuredBase = ((apiUrlInput && apiUrlInput.value) || localStorage.getItem('qyx_apiUrl') || '').trim();
if (configuredBase) return configuredBase.replace(/\/$/, '');
- return window.location.protocol === 'file:' ? REMOTE_API_BASE : LOCAL_API_BASE;
+ // Prefer the local API for the local HTML file so edits to this
+ // checkout are reflected immediately. fetchWithApiFallback still uses
+ // the deployed API when the local server is unavailable.
+ return LOCAL_API_BASE;
}
function getApiFallbackBase(base) {
@@ -2944,10 +3252,15 @@
No suggestions yet
editor.addEventListener('input', () => {
selectedZipFile = null;
- updateEditor();
+ if (activeIssueLines.size) {
+ clearIssueHighlights();
+ } else {
+ updateEditor();
+ }
});
editor.addEventListener('scroll', () => {
lineNumbers.scrollTop = editor.scrollTop;
+ renderIssueHighlights(Math.max(editor.value ? editor.value.split('\n').length : 0, 1));
});
// Tab key support
@@ -3088,6 +3401,65 @@
No suggestions yet
handleUploadedFile(file);
});
+ // Minimal chat wiring: ensure the Send button and Enter key work
+ (function wireChat() {
+ const chatInputEl = document.getElementById('chatInput');
+ const chatSendBtnEl = document.getElementById('chatSendBtn');
+ const chatMessagesEl = document.getElementById('chatMessages');
+ if (!chatInputEl || !chatSendBtnEl || !chatMessagesEl) return;
+
+ function append(role, text) {
+ const el = document.createElement('div');
+ el.className = `chat-bubble ${role}`;
+ el.textContent = text;
+ chatMessagesEl.appendChild(el);
+ chatMessagesEl.scrollTop = chatMessagesEl.scrollHeight;
+ }
+
+ async function send() {
+ const msg = (chatInputEl.value || '').trim();
+ if (!msg) return;
+ append('user', msg);
+ chatInputEl.value = '';
+ chatSendBtnEl.disabled = true;
+ try {
+ const base = typeof getApiBase === 'function' ? getApiBase() : (window.location.protocol === 'file:' ? 'http://localhost:8000' : window.location.origin);
+ const payload = {
+ message: msg,
+ code: (document.getElementById('codeEditor')?.value || ''),
+ context: (typeof currentResult !== 'undefined' && currentResult) ? String(currentResult).slice(0, 2000) : '',
+ history: Array.isArray(window.chatHistory) ? window.chatHistory.slice(-8) : []
+ };
+
+ const resp = await fetch(`${base.replace(/\/$/, '')}/chat/`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(payload)
+ });
+
+ if (!resp.ok) throw new Error('Chat service unavailable');
+ const data = await resp.json().catch(() => ({}));
+ const reply = data.response || data.reply || data.message || 'No reply available.';
+ append('assistant', reply);
+ // keep a simple history for context
+ window.chatHistory = (Array.isArray(window.chatHistory) ? window.chatHistory : []).concat([msg, reply]).slice(-50);
+ } catch (e) {
+ append('assistant', 'The chat assistant is unavailable right now.');
+ } finally {
+ chatSendBtnEl.disabled = false;
+ chatInputEl.focus();
+ }
+ }
+
+ chatSendBtnEl.addEventListener('click', send);
+ chatInputEl.addEventListener('keydown', (ev) => {
+ if (ev.key === 'Enter') {
+ ev.preventDefault();
+ send();
+ }
+ });
+ })();
+
function handleUploadedFile(file) {
const ext = file.name.split('.').pop().toLowerCase();
if (ext === 'zip') {
@@ -3150,6 +3522,7 @@
No suggestions yet
// 3. If it is a sample, swap it to the new language's sample automatically
if (isSample) {
editor.value = SAMPLES[lang] || SAMPLES.python;
+ clearIssueHighlights();
updateEditor();
}
}
@@ -3261,6 +3634,7 @@
No suggestions yet
// Loading state
analyzeBtn.classList.add('loading');
analyzeBtn.disabled = true;
+ clearIssueHighlights();
showShimmers();
try {
@@ -3503,6 +3877,7 @@
Project Health Score
document.getElementById('emptyDebug').style.display = 'none';
const el = document.getElementById('debugResult');
el.style.display = 'block';
+ applyIssueHighlights(dbg.issues || []);
const badge = dbg.error_count > 0 ? dbg.error_count : dbg.issues.length;
document.getElementById('debugBadge').textContent = badge || '0';
@@ -3694,6 +4069,19 @@
${getTranslation('debug_clean_title')}
/* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
RENDER SUGGESTIONS (with diff view)
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
+ function buildExampleHtml(example) {
+ const lines = example.split('\n').map((text, idx) => ({ type: 'added', text, num: idx + 1 }));
+ return `
+
+
+
${renderDiffCol(lines)}
+
`;
+ }
+
function renderSuggest(sugg) {
document.getElementById('emptySuggest').style.display = 'none';
const el = document.getElementById('suggestResult');
@@ -3734,7 +4122,7 @@
${getTranslation('suggest_quality_score')}
: sugg.suggestions.map((s, i) => {
let exampleHtml = '';
- if (s.example) {
+ if (s.example && s.example_type === 'fix') {
const copyId = `copy-fix-${i}`;
const rawLines = s.example.split('\n');
@@ -3778,6 +4166,8 @@
${getTranslation('suggest_quality_score')}
}
}
}
+ } else if (s.example) {
+ exampleHtml = buildExampleHtml(s.example);
}
return `
@@ -3795,7 +4185,7 @@
${getTranslation('suggest_quality_score')}
// Wire up "Copy fixed" buttons after DOM insertion
sugg.suggestions.forEach((s, i) => {
- if (!s.example) return;
+ if (!s.example || s.example_type !== 'fix') return;
const btn = document.getElementById(`copy-fix-${i}`);
if (!btn) return;
@@ -3841,6 +4231,7 @@
${getTranslation('suggest_quality_score')}
}
function resetResults() {
+ clearIssueHighlights();
['explainResult', 'debugResult', 'suggestResult'].forEach(id => {
const el = document.getElementById(id);
el.style.display = 'none';
@@ -4079,7 +4470,12 @@
${getTranslation('suggest_quality_score')}
HELPERS
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
function escHtml(s) {
- return String(s).replace(/&/g, '&').replace(//g, '>');
+ return String(s)
+ .replace(/&/g, '&')
+ .replace(//g, '>')
+ .replace(/"/g, '"')
+ .replace(/'/g, ''');
}
function renderMarkdown(s) {
return s.replace(/\*\*(.+?)\*\*/g, '
$1 ')
@@ -4195,6 +4591,7 @@
${getTranslation('suggest_quality_score')}
function loadSample() {
const sample = SAMPLES[selectedLang] || SAMPLES.python;
editor.value = sample;
+ clearIssueHighlights();
updateEditor();
document.getElementById('workspace').scrollIntoView({ behavior: 'smooth' });
toast(getTranslation('toast_sample_loaded'), 'success');
diff --git a/frontend/script.js b/frontend/script.js
index 426f8d77..e34c909c 100644
--- a/frontend/script.js
+++ b/frontend/script.js
@@ -25,21 +25,25 @@ let currentMode = 'analyze';
let history = JSON.parse(localStorage.getItem('qyverix_history') || '[]');
let favorites = JSON.parse(localStorage.getItem('qyverix_favorites') || '[]');
let lastResult = '';
+let chatHistory = [];
// โโ DOM refs โโ
-const codeInput = document.getElementById('codeInput');
-const runBtn = document.getElementById('runBtn');
-const runLabel = document.getElementById('runLabel');
+const codeEditor = document.getElementById('codeEditor');
+const runBtn = document.getElementById('analyzeBtn') || document.getElementById('runBtn');
+const runLabel = document.getElementById('runLabel') || document.querySelector('#analyzeBtn .btn-text');
const outputBox = document.getElementById('outputBox');
const apiUrlInput = document.getElementById('apiUrl');
const apiDocsLink = document.getElementById('apiDocsLink');
const engineBadge = document.getElementById('engineBadge');
const statusDot = document.getElementById('statusDot');
-const lineCount = document.getElementById('lineCount');
+const charCount = document.getElementById('charCount');
const fileInput = document.getElementById('fileInput');
const historyContainer = document.getElementById('historyContainer');
const favContainer = document.getElementById('favContainer');
const themeToggle = document.getElementById('themeToggle');
+const chatMessages = document.getElementById('chatMessages');
+const chatInput = document.getElementById('chatInput');
+const chatSendBtn = document.getElementById('chatSendBtn');
const API_URL_STORAGE_KEY = 'qyverix_api_url';
const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
@@ -79,15 +83,17 @@ document.querySelectorAll('.tab').forEach(tab => {
});
// โโ Line count โโ
-codeInput.addEventListener('input', () => {
- const lines = codeInput.value.split('\n').length;
- lineCount.textContent = `${lines} line${lines !== 1 ? 's' : ''}`;
+codeEditor.addEventListener('input', () => {
+ const lines = codeEditor.value.split('\n').length;
+ const chars = codeEditor.value.length;
+ charCount.textContent = `${chars} chars ยท ${lines} line${lines !== 1 ? 's' : ''}`;
+ clearLineHighlights();
});
// โโ Keyboard shortcut โโ
-codeInput.addEventListener('keydown', (e) => {
+codeEditor.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
- codeInput.blur();
+ codeEditor.blur();
return;
}
if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
@@ -103,16 +109,17 @@ fileInput.addEventListener('change', (e) => {
if (!file) return;
const reader = new FileReader();
reader.onload = (ev) => {
- codeInput.value = sanitizeClientCode(ev.target.result);
- codeInput.dispatchEvent(new Event('input'));
+ codeEditor.value = sanitizeClientCode(ev.target.result);
+ codeEditor.dispatchEvent(new Event('input'));
};
reader.readAsText(file);
});
// โโ Clear โโ
document.getElementById('clearBtn').addEventListener('click', () => {
- codeInput.value = '';
+ codeEditor.value = '';
lineCount.textContent = '0 lines';
+ clearLineHighlights();
resetOutput();
});
@@ -138,7 +145,7 @@ document.getElementById('saveBtn').addEventListener('click', () => {
if (!lastResult) return;
const entry = {
id: Date.now(),
- code: codeInput.value.slice(0, 100),
+ code: codeEditor.value.slice(0, 100),
result: lastResult,
mode: currentMode,
time: new Date().toLocaleString()
@@ -370,14 +377,223 @@ apiUrlInput.addEventListener('change', () => {
});
checkConnection();
+// โโ Line Highlighting System โโ
+/**
+ * Apply visual highlights to lines with detected issues
+ * @param {Array} issues - Array of issue objects with {line, type, description, suggestion}
+ */
+function applyLineHighlights(issues) {
+ clearLineHighlights();
+
+ if (!issues || issues.length === 0) return;
+
+ const highlightsContainer = document.getElementById('issueLineHighlights');
+ const codeEditor = document.getElementById('codeEditor');
+ const lineHeight = 1.7 * 13; // line-height * font-size in px
+ const paddingTop = 16; // padding from CSS
+
+ // Map severity to severity level (for styling and priority)
+ const severityMap = {
+ 'error': 'error',
+ 'warning': 'warning',
+ 'info': 'info',
+ 'Error': 'error',
+ 'Warning': 'warning',
+ 'Info': 'info'
+ };
+
+ // Track unique lines to avoid duplicate highlights
+ const highlightedLines = new Map();
+
+ issues.forEach(issue => {
+ if (!issue.line) return;
+
+ const lineNum = parseInt(issue.line, 10);
+ if (isNaN(lineNum) || lineNum < 1) return;
+
+ // Determine severity: use severity field if available, fallback to type
+ let severity = severityMap[issue.severity] || severityMap[issue.type] || 'info';
+
+ // If we have multiple issues on same line, keep the highest severity
+ if (highlightedLines.has(lineNum)) {
+ const priorities = { error: 3, warning: 2, info: 1 };
+ if ((priorities[severity] || 0) <= (priorities[highlightedLines.get(lineNum).severity] || 0)) {
+ return;
+ }
+ }
+
+ highlightedLines.set(lineNum, {
+ severity,
+ description: issue.description || '',
+ suggestion: issue.suggestion || '',
+ type: issue.type || 'Issue'
+ });
+ });
+
+ // Create highlight elements for each line
+ highlightedLines.forEach((data, lineNum) => {
+ const topOffset = paddingTop + (lineNum - 1) * lineHeight;
+
+ // Create highlight element
+ const highlight = document.createElement('div');
+ highlight.className = `issue-line-highlight ${data.severity}`;
+ highlight.style.top = topOffset + 'px';
+ highlight.title = `Line ${lineNum}: ${data.type}`;
+
+ // Add hover tooltip
+ const tooltip = document.createElement('div');
+ tooltip.className = `issue-tooltip ${data.severity}`;
+ tooltip.style.display = 'none';
+ tooltip.innerHTML = `
${escHtml(data.type)} ${escHtml(data.description)}${data.suggestion ? `
Fix: ${escHtml(data.suggestion)}` : ''}`;
+
+ highlight.addEventListener('mouseenter', (e) => {
+ tooltip.style.display = 'block';
+ tooltip.style.top = topOffset + 'px';
+ tooltip.style.left = '20px';
+ });
+
+ highlight.addEventListener('mouseleave', () => {
+ tooltip.style.display = 'none';
+ });
+
+ highlight.appendChild(tooltip);
+ highlightsContainer.appendChild(highlight);
+
+ // Activate on hover to show the highlight
+ highlight.addEventListener('mouseenter', () => {
+ highlight.classList.add('active');
+ });
+
+ highlight.addEventListener('mouseleave', () => {
+ highlight.classList.remove('active');
+ });
+ });
+}
+
+/**
+ * Clear all line highlights
+ */
+function clearLineHighlights() {
+ const highlightsContainer = document.getElementById('issueLineHighlights');
+ if (highlightsContainer) {
+ highlightsContainer.innerHTML = '';
+ }
+}
+
+function focusEditorAtLine(line) {
+ const lineNumber = parseInt(line, 10);
+ if (Number.isNaN(lineNumber) || lineNumber < 1) return;
+
+ const code = codeEditor.value;
+ const lines = code.split('\n');
+ let offset = 0;
+
+ for (let i = 0; i < lineNumber - 1 && i < lines.length; i += 1) {
+ offset += lines[i].length + 1;
+ }
+
+ codeEditor.focus();
+ codeEditor.setSelectionRange(offset, offset);
+ codeEditor.scrollTop = Math.max(0, (lineNumber - 2) * parseFloat(getComputedStyle(codeEditor).lineHeight || '22'));
+}
+
+function getFixSuggestionMarkup(i) {
+ if (!i.suggestion) return '';
+
+ const suggestionText = `
โ ${escHtml(i.suggestion)} `;
+ const lineButton = i.line ? `
Go to line ${escHtml(i.line)} ` : '';
+
+ return `
${suggestionText}${lineButton}
`;
+}
+
+outputBox.addEventListener('click', (event) => {
+ const button = event.target.closest('.goto-line-btn');
+ if (!button) return;
+ const targetLine = button.dataset.line;
+ focusEditorAtLine(targetLine);
+});
+
+// โโ Chat assistant โโ
+function appendChatMessage(role, text) {
+ if (!chatMessages) return;
+ const wrapper = document.createElement('div');
+ wrapper.className = `chat-bubble ${role}`;
+ wrapper.textContent = text;
+ chatMessages.appendChild(wrapper);
+ chatMessages.scrollTop = chatMessages.scrollHeight;
+}
+
+function buildChatContext() {
+ const parts = [];
+ const currentCode = sanitizeClientCode(codeEditor.value.trim());
+ if (currentCode) {
+ parts.push(`Code:\n${currentCode.slice(0, 2000)}`);
+ }
+ if (lastResult) {
+ parts.push(`Latest analysis summary:\n${lastResult.slice(0, 3000)}`);
+ }
+ return parts.join('\n\n');
+}
+
+async function sendChatMessage() {
+ if (!chatInput || !chatSendBtn) return;
+ const message = chatInput.value.trim();
+ if (!message) return;
+
+ appendChatMessage('user', message);
+ chatInput.value = '';
+ chatSendBtn.disabled = true;
+
+ try {
+ const response = await fetch(`${getApiUrl()}/chat/`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ message,
+ code: sanitizeClientCode(codeEditor.value.trim()),
+ context: buildChatContext(),
+ history: chatHistory.slice(-8)
+ })
+ });
+
+ if (!response.ok) {
+ throw new Error('Chat service unavailable');
+ }
+
+ const data = await response.json();
+ const reply = data.response || 'I could not generate a reply right now.';
+ appendChatMessage('assistant', reply);
+ chatHistory.push(message, reply);
+ } catch (err) {
+ appendChatMessage('assistant', 'The chat assistant is unavailable right now. Please try again in a moment.');
+ } finally {
+ chatSendBtn.disabled = false;
+ chatInput.focus();
+ }
+}
+
+if (chatInput) {
+ chatInput.addEventListener('keydown', (event) => {
+ if (event.key === 'Enter') {
+ event.preventDefault();
+ sendChatMessage();
+ }
+ });
+}
+
+if (chatSendBtn) {
+ chatSendBtn.addEventListener('click', sendChatMessage);
+}
+
// โโ Main Analysis โโ
async function runAnalysis() {
- const code = sanitizeClientCode(codeInput.value.trim());
+ const code = sanitizeClientCode(codeEditor.value.trim());
if (!code) {
showError('Please paste some code first.');
return;
}
+ clearLineHighlights();
runBtn.disabled = true;
runBtn.classList.add('loading');
runLabel.textContent = 'โณ Analyzing...';
@@ -446,11 +662,16 @@ function renderResult(data, mode) {
: issues.map(i => `
${escHtml(i.type || 'Issue')}
${escHtml(i.description || '')}
- ${i.suggestion ? `
Fix: ${escHtml(i.suggestion)}
` : ''}
+ ${getFixSuggestionMarkup(i)}
`).join('')}
diff --git a/frontend/style.css b/frontend/style.css
index b05b82a7..e65f4552 100644
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -361,8 +361,10 @@ body {
}
.code-editor {
+ position: relative;
+ z-index: 1;
flex: 1;
- background: var(--bg);
+ background: transparent;
border: none;
outline: none;
color: var(--text);
@@ -372,9 +374,146 @@ body {
padding: 16px;
resize: none;
min-height: 380px;
+ caret-color: var(--text);
}
.code-editor::placeholder { color: var(--text-3); }
+/* โโ Line highlighting system โโ */
+.editor-wrap {
+ position: relative;
+ flex: 1;
+ display: flex;
+ overflow: hidden;
+}
+
+.line-numbers {
+ display: flex;
+ flex-direction: column;
+ padding: 16px 8px;
+ background: var(--bg-2);
+ border-right: 1px solid var(--border);
+ color: var(--text-3);
+ font-family: var(--font-mono);
+ font-size: 13px;
+ line-height: 1.7;
+ text-align: right;
+ user-select: none;
+ min-width: 40px;
+ pointer-events: none;
+}
+
+.code-editor-shell {
+ position: relative;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ background: var(--bg);
+}
+
+.issue-line-highlights {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ z-index: 0;
+ pointer-events: none;
+}
+
+.issue-line-highlight {
+ position: absolute;
+ left: 0;
+ right: 0;
+ height: calc(1.7 * 13px);
+ opacity: 0;
+ transition: opacity var(--transition);
+ pointer-events: auto;
+}
+
+.issue-line-highlight:hover {
+ opacity: 1 !important;
+}
+
+.issue-line-highlight.error {
+ background: rgba(239, 68, 68, 0.15);
+ border-left: 3px solid #ef4444;
+}
+
+.issue-line-highlight.warning {
+ background: rgba(234, 179, 8, 0.15);
+ border-left: 3px solid #eab308;
+}
+
+.issue-line-highlight.info {
+ background: rgba(59, 130, 246, 0.15);
+ border-left: 3px solid #3b82f6;
+}
+
+.issue-line-highlight.active {
+ opacity: 0.6;
+}
+
+.issue-tooltip {
+ position: absolute;
+ background: var(--bg-3);
+ color: var(--text);
+ border: 1px solid var(--border);
+ border-radius: 4px;
+ padding: 8px 10px;
+ font-size: 11px;
+ font-family: var(--font-mono);
+ line-height: 1.4;
+ white-space: nowrap;
+ pointer-events: none;
+ z-index: 1000;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+}
+
+.issue-tooltip.error {
+ border-left: 3px solid #ef4444;
+}
+
+.issue-tooltip.warning {
+ border-left: 3px solid #eab308;
+}
+
+.issue-tooltip.info {
+ border-left: 3px solid #3b82f6;
+}
+
+.issue-gutter-marker {
+ position: absolute;
+ left: 4px;
+ width: 20px;
+ height: 20px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
+ font-size: 10px;
+ font-weight: bold;
+ cursor: pointer;
+ transition: all var(--transition);
+}
+
+.issue-gutter-marker.error {
+ background: rgba(239, 68, 68, 0.2);
+ color: #ef4444;
+}
+
+.issue-gutter-marker.warning {
+ background: rgba(234, 179, 8, 0.2);
+ color: #eab308;
+}
+
+.issue-gutter-marker.info {
+ background: rgba(59, 130, 246, 0.2);
+ color: #3b82f6;
+}
+
+.issue-gutter-marker:hover {
+ transform: scale(1.2);
+}
+
.editor-footer {
display: flex;
justify-content: space-between;
@@ -440,6 +579,40 @@ body {
border-color: rgba(59, 130, 246, 0.35);
background: rgba(59, 130, 246, 0.12);
}
+
+.fix-suggestion-row {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 10px;
+ margin-top: 6px;
+}
+
+.fix-suggestion-text {
+ color: var(--accent-green);
+ font-size: 13px;
+ line-height: 1.5;
+}
+
+.goto-line-btn {
+ border: 1px solid rgba(34, 197, 94, 0.25);
+ background: transparent;
+ color: var(--accent-green);
+ border-radius: 6px;
+ padding: 5px 10px;
+ font-family: var(--font-mono);
+ font-size: 12px;
+ cursor: pointer;
+ transition: background var(--transition), color var(--transition), transform var(--transition);
+}
+
+.goto-line-btn:hover,
+.goto-line-btn:focus-visible {
+ background: rgba(34, 197, 94, 0.12);
+ color: var(--text);
+ transform: translateY(-1px);
+}
+
.engine-badge.llm {
color: #86efac;
border-color: rgba(34, 197, 94, 0.35);