="glass-section">
File
${escapeHtml(room.filePath)}
District: ${escapeHtml(room.district || 'unknown')} ยท ${room.lines || 0} lines
Structural complexity: ${room.complexity || 0}
` : `
What it does
${escapeHtml(describeRoom(room))}
`}
${isFile ? `Routes (${room.routes.length})` : 'Components'}
${!isFile ? `
${room.routes.length} routes in this section
` : ''}
${room.routes.slice(0, 8).map(r =>
`${escapeHtml(r.name)} L${r.line} + ${room.routes.length - 8} more ` : ''}
${room.routes.length === 0 ? `No HTTP routes in this file ` : ''}
${funcsHtml}
Verification
${verificationText}
${v.revision ? `
${escapeHtml(v.revision)}
` : ''}
${v.note ? `
${escapeHtml(v.note)}
` : ''}
Read-only inspection. Repairs reserved for owner authorization.
${isFile ? `
๐ Inspect Source Code
๐งช Test Syntax
โ๏ธ How It Runs
${executionExplanation(room)}
๐ฅ Change Impact Analysis
Why This Shape
${geometryExplanation(room)}
${room.scalingNote ? `
โ ๏ธ ${escapeHtml(room.scalingNote)}
` : ''}
${room.floors > 1 ? `
๐ข ${room.floors} internal floors โ complexity tiers visualized
` : ''}
` : ''}
`;
panel.classList.add('visible');
}
// Explain how the code runs โ execution flow with best-practice notes
function executionExplanation(room) {
if (!room.filePath) return '';
const funcs = room.functions || [];
const deps = room.dependencies || [];
const routes = room.routes || [];
let html = '';
// Entry points
if (routes.length > 0) {
html += `
1.
HTTP requests arrive at ${routes.length} route${routes.length > 1 ? 's' : ''}.
Express matches the path and method, then invokes the handler.
`;
}
// Dependencies load
if (deps.length > 0) {
const nodeDeps = deps.filter(d => !d.startsWith('.'));
const localDeps = deps.filter(d => d.startsWith('.'));
html += `
2.
Module loads ${deps.length} dependencies:
${nodeDeps.length} external (${nodeDeps.slice(0, 3).map(escapeHtml).join(', ')}${nodeDeps.length > 3 ? '...' : ''})
${localDeps.length ? `+ ${localDeps.length} local` : ''}.
Load order follows require() chain depth-first.
`;
}
// Functions execute
if (funcs.length > 0) {
html += `
3.
${funcs.length} functions defined. Execution is event-driven:
functions run when called by routes, timers, or other functions โ
not top-to-bottom. Entry: ${escapeHtml(funcs[0].name)}() (line ${funcs[0].line}).
`;
}
html += '