Skip to content

Commit 9a0a70d

Browse files
icecoldaswinicecoldaswin
committed
Bugs in debugger
1 parent 4c126fd commit 9a0a70d

1 file changed

Lines changed: 18 additions & 14 deletions

File tree

‎templates/index.html‎

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@
1616

1717
/* Layout Components */
1818
.monaco-container { border: 1px solid #1e293b; border-radius: 8px; overflow: hidden; background: #1e1e1e; height: 220px; }
19-
.code-main-container { border: 1px solid #1e293b; border-radius: 8px; overflow: hidden; background: #1e1e1e; height: 450px; }
2019
#terminal { background: #000; color: #10b981; font-family: 'Fira Code', monospace; font-size: 11px; scrollbar-width: thin; }
2120
#termTable, #dockedTermTable { background: #000; scrollbar-width: thin; }
2221
.term-tbl { width: 100%; border-collapse: collapse; font-family: 'Fira Code', monospace; font-size: 10px; }
@@ -239,7 +238,7 @@ <h2 id="descTitle" class="text-sm font-black text-slate-400 tracking-tight">Desc
239238
<option value="java">Java</option>
240239
<option value="javascript">JavaScript</option>
241240
</select>
242-
<span class="maximize-btn" onclick="toggleMaximize('editor-code')" title="Maximize">⤢</span>
241+
<span class="maximize-btn" onclick="toggleMaximize('codeDebugRow')" title="Maximize">⤢</span>
243242
</div>
244243
<div class="flex gap-2">
245244
<button data-gentests data-genaction onclick="generateTests()" class="bg-purple-600/20 text-purple-400 border border-purple-500/30 px-4 py-1 rounded font-black text-[10px] uppercase hover:bg-purple-600 hover:text-white transition">Gen Tests</button>
@@ -248,8 +247,8 @@ <h2 id="descTitle" class="text-sm font-black text-slate-400 tracking-tight">Desc
248247
<button onclick="debugCode()" class="bg-yellow-600/20 text-yellow-400 border border-yellow-500/30 px-4 py-1 rounded font-black text-[10px] uppercase hover:bg-yellow-600 hover:text-white transition">🐛 Debug</button>
249248
</div>
250249
</div>
251-
<div id="codeDebugRow" class="flex" style="height:450px">
252-
<div id="editor-code" class="code-main-container" style="flex:1;height:100%"></div>
250+
<div id="codeDebugRow" class="flex" style="height:450px;border:1px solid #1e293b;border-radius:8px;overflow:hidden;background:#1e1e1e">
251+
<div id="editor-code" style="flex:1;height:100%;min-width:0"></div>
253252
<div id="debugTracePanel"></div>
254253
</div>
255254
<div class="w-full h-32 rounded-xl border border-slate-800 overflow-hidden shadow-inner flex">
@@ -373,7 +372,7 @@ <h3 class="text-xl font-black text-white mb-6 tracking-tighter italic">OPEN NEW
373372
let safeCodeHashes = {};
374373
let serverAvailable = false;
375374
let maximizedEditor = null;
376-
let debugTraceActive = false, debugDecorations = [];
375+
let debugTraceActive = false, debugDecorations = [], lastDebugHash = null, lastDebugTrace = null;
377376

378377
let isManuallyCollapsed = false;
379378

@@ -424,7 +423,7 @@ <h3 class="text-xl font-black text-white mb-6 tracking-tighter italic">OPEN NEW
424423
document.addEventListener('keydown', e => {
425424
if ((e.ctrlKey || e.metaKey) && e.shiftKey && (e.key === 'l' || e.key === 'L')) { e.preventDefault(); closeDebugTrace(); clearTerminal(); }
426425
if ((e.ctrlKey || e.metaKey) && e.key === 's') { e.preventDefault(); triggerSave(); }
427-
if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'M') { e.preventDefault(); const mc = e.target.closest('.monaco-container') || e.target.closest('.code-main-container'); if(mc) toggleMaximize(mc.id); }
426+
if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'M') { e.preventDefault(); const mc = e.target.closest('.monaco-container') || e.target.closest('#codeDebugRow'); if(mc) toggleMaximize(mc.id); }
428427
if ((e.ctrlKey || e.metaKey) && e.key === "'") { e.preventDefault(); runCode(); }
429428
if ((e.ctrlKey || e.metaKey) && e.key === '"') { e.preventDefault(); generateTests(); }
430429
if ((e.ctrlKey || e.metaKey) && e.shiftKey && (e.key === 'v' || e.key === 'V')) { e.preventDefault(); toggleVoice(); }
@@ -617,6 +616,7 @@ <h3 class="text-xl font-black text-white mb-6 tracking-tighter italic">OPEN NEW
617616
function selectTab(id) {
618617
cancelTestGen();
619618
closeDebugTrace();
619+
lastDebugHash = null; lastDebugTrace = null;
620620
activeTabId = id;
621621
genMgr.clearAll();
622622

@@ -648,6 +648,7 @@ <h3 class="text-xl font-black text-white mb-6 tracking-tighter italic">OPEN NEW
648648
value: tabs[id].steps[key] || '',
649649
language: lang, theme: 'vs-dark',
650650
automaticLayout: true, minimap: {enabled: false}, fontSize: 13,
651+
glyphMargin: key === 'code',
651652
wordWrap: 'on',
652653
wrappingStrategy: 'advanced',
653654
wrappingIndent: 'indent',
@@ -1536,7 +1537,7 @@ <h3 class="text-xl font-black text-white mb-6 tracking-tighter italic">OPEN NEW
15361537
el.classList.add('editor-maximized');
15371538
maximizedEditor = domId;
15381539
// Show docked terminal for code editor
1539-
if (domId === 'editor-code' && docked) {
1540+
if (domId === 'codeDebugRow' && docked) {
15401541
el.classList.add('has-terminal');
15411542
docked.style.display = 'flex';
15421543
docked.classList.remove('minimized');
@@ -1586,7 +1587,7 @@ <h3 class="text-xl font-black text-white mb-6 tracking-tighter italic">OPEN NEW
15861587

15871588
function toggleDockedTerminal() {
15881589
const docked = document.getElementById('terminalDocked');
1589-
const el = document.getElementById('editor-code');
1590+
const el = document.getElementById('codeDebugRow');
15901591
docked.classList.toggle('minimized');
15911592
el.classList.toggle('has-terminal', !docked.classList.contains('minimized'));
15921593
setTimeout(() => Object.values(editors).forEach(ed => { if (ed && ed.layout) ed.layout(); }), 50);
@@ -1782,6 +1783,13 @@ <h3 class="text-xl font-black text-white mb-6 tracking-tighter italic">OPEN NEW
17821783
if (!code.trim()) { termDone('No code to debug.', '#facc15', tabId); return; }
17831784
const lang = tabs[tabId].lang || 'javascript';
17841785
if (lang !== 'javascript') { termDone('[DEBUG] Only JavaScript supported for trace debugging.', '#facc15', tabId); return; }
1786+
const hash = await md5(code);
1787+
// Reuse cached trace if code unchanged
1788+
if (hash === lastDebugHash && lastDebugTrace && lastDebugTrace.length) {
1789+
showDebugTrace(lastDebugTrace, tabId);
1790+
termDone(`>>> Debug trace (cached): ${lastDebugTrace.length} steps.`, '#10b981', tabId);
1791+
return;
1792+
}
17851793
const codeLines = code.split('\n');
17861794
const lineMap = codeLines.map((l, i) => `${i + 1}: ${l}`).join('\n');
17871795
termSpinner('AI analyzing code for trace instrumentation...', tabId);
@@ -1810,6 +1818,8 @@ <h3 class="text-xl font-black text-white mb-6 tracking-tighter italic">OPEN NEW
18101818
termSpinner('Running instrumented code...', tabId);
18111819
const result = await runDebugSandbox(instrumented);
18121820
if (result.traceData && result.traceData.length) {
1821+
lastDebugHash = hash;
1822+
lastDebugTrace = result.traceData;
18131823
showDebugTrace(result.traceData, tabId);
18141824
termDone(result.output || `>>> Debug trace: ${result.traceData.length} steps captured.`, '#10b981', tabId);
18151825
} else {
@@ -1859,11 +1869,8 @@ <h3 class="text-xl font-black text-white mb-6 tracking-tighter italic">OPEN NEW
18591869

18601870
function showDebugTrace(data, tabId) {
18611871
const panel = document.getElementById('debugTracePanel');
1862-
const editorEl = document.getElementById('editor-code');
18631872
if (!panel || !data || !data.length) return;
18641873
debugTraceActive = true;
1865-
// Split: editor 50%, trace 50%
1866-
editorEl.style.flex = '1';
18671874
panel.style.display = 'block';
18681875
panel.style.flex = '1';
18691876
// Build table — hide _srcLine from display but keep as data attr
@@ -1906,11 +1913,8 @@ <h3 class="text-xl font-black text-white mb-6 tracking-tighter italic">OPEN NEW
19061913

19071914
function closeDebugTrace() {
19081915
const panel = document.getElementById('debugTracePanel');
1909-
const editorEl = document.getElementById('editor-code');
19101916
if (panel) { panel.style.display = 'none'; panel.style.flex = ''; panel.innerHTML = ''; }
1911-
if (editorEl) editorEl.style.flex = '';
19121917
debugTraceActive = false;
1913-
// Clear editor decorations
19141918
const ed = editors[`${activeTabId}_code`];
19151919
if (ed) debugDecorations = ed.deltaDecorations(debugDecorations, []);
19161920
setTimeout(() => { if (ed && ed.layout) ed.layout(); }, 50);

0 commit comments

Comments
 (0)