tina4-nodejs 3.10.41 → 3.10.44

package/packages/core/src/devAdmin.ts

@@ -434,19 +434,26 @@ const handleDashboard: RouteHandler = (_req, res) => {
 };
 
 function handleStatus(router: Router): RouteHandler {
-  return (_req, res) => {
+  return async (_req, res) => {
     const mem = process.memoryUsage();
     const reqStats = RequestInspector.stats();
     const msgCounts = MessageLog.count();
     const errors = ErrorTracker.get();
     const unresolved = errors.filter((e) => !e.resolved).length;
     const mailboxCounts = DevMailboxStore.count();
+    let dbTableCount = 0;
+    try {
+      const { getAdapter } = await import("@tina4/orm");
+      const db = getAdapter();
+      dbTableCount = db.tables().length;
+    } catch { /* no database connected */ }
     res.json({
       nodeVersion: process.version,
       framework: `tina4-nodejs v${TINA4_VERSION}`,
       debug: process.env.TINA4_DEBUG ?? "false",
       logLevel: process.env.TINA4_LOG_LEVEL ?? "ERROR",
       routes: router.getRoutes().length,
+      db_tables: dbTableCount,
       messages: msgCounts,
       message_counts: msgCounts,
       requests: reqStats,
@@ -528,10 +535,18 @@ const handleRequestsClear: RouteHandler = (_req, res) => {
   res.json({ cleared: true });
 };
 
-const handleSystem: RouteHandler = (_req, res) => {
+const handleSystem: RouteHandler = async (_req, res) => {
   const mem = process.memoryUsage();
   const heapUsedMb = Math.round(mem.heapUsed / 1048576);
   const rssMb = Math.round(mem.rss / 1048576);
+  let dbTableCount: number | undefined;
+  let dbConnected = false;
+  try {
+    const { getAdapter } = await import("@tina4/orm");
+    const db = getAdapter();
+    dbTableCount = db.tables().length;
+    dbConnected = true;
+  } catch { /* no database connected */ }
   // Respond in both the shared-JS format and the Node-specific format
   res.json({
     // Shared JS fields
@@ -541,6 +556,8 @@ const handleSystem: RouteHandler = (_req, res) => {
     os: `${process.platform} ${process.arch}`,
     pid: process.pid,
     memory_mb: heapUsedMb,
+    db_tables: dbTableCount !== undefined ? dbTableCount : "N/A",
+    db_connected: dbConnected,
     memory: {
       current_mb: heapUsedMb,
       peak_mb: rssMb,
@@ -694,30 +711,129 @@ const handleTable: RouteHandler = (req, res) => {
   res.json({ table: name, columns: [], rows: [], message: "Database not connected or table not found" });
 };
 
-const handleTables: RouteHandler = (_req, res) => {
-  // Stub response — actual implementation will use ORM adapter
-  res.json({ tables: [], message: "Database not connected" });
+const handleTables: RouteHandler = async (_req, res) => {
+  try {
+    const { getAdapter } = await import("@tina4/orm");
+    const db = getAdapter();
+    const tables = db.tables();
+    res.json({ tables });
+  } catch {
+    res.json({ tables: [], message: "Database not connected" });
+  }
 };
 
-const handleSeed: RouteHandler = (req, res) => {
+const handleSeed: RouteHandler = async (req, res) => {
   const url = new URL(req.url ?? "/", "http://localhost");
   const table = url.searchParams.get("table") ?? (req as any).body?.table ?? "";
+  const count = parseInt(String(url.searchParams.get("count") ?? (req as any).body?.count ?? "10"), 10) || 10;
   if (!table) {
     res.json({ error: "Missing table parameter" });
     return;
   }
-  // Stub response — actual implementation will use ORM adapter
-  res.json({ seeded: false, table, message: "Database not connected" });
+  try {
+    const orm = await import("@tina4/orm");
+    const db = orm.getAdapter();
+    const { seedTable } = orm;
+    const fake = new orm.FakeData();
+    const columns = db.columns(table);
+    if (!columns.length) {
+      res.json({ error: `Table '${table}' not found or has no columns` });
+      return;
+    }
+    // Build a field map based on column info
+    const fieldMap: Record<string, () => unknown> = {};
+    for (const col of columns) {
+      const name = col.name.toLowerCase();
+      const type = col.type.toLowerCase();
+      if (name === "id") continue; // skip primary key
+      if (name.includes("email")) { fieldMap[col.name] = () => fake.email(); }
+      else if (name.includes("name")) { fieldMap[col.name] = () => fake.name(); }
+      else if (name.includes("phone")) { fieldMap[col.name] = () => fake.phone(); }
+      else if (name.includes("address") || name.includes("city") || name.includes("country")) { fieldMap[col.name] = () => fake.address(); }
+      else if (name.includes("url") || name.includes("website")) { fieldMap[col.name] = () => fake.url(); }
+      else if (type.includes("int")) { fieldMap[col.name] = () => fake.integer(1, 1000); }
+      else if (type.includes("real") || type.includes("float") || type.includes("double") || type.includes("numeric") || type.includes("decimal")) { fieldMap[col.name] = () => fake.decimal(0, 1000, 2); }
+      else if (type.includes("bool")) { fieldMap[col.name] = () => fake.boolean(); }
+      else if (type.includes("date") || type.includes("time")) { fieldMap[col.name] = () => fake.date(); }
+      else { fieldMap[col.name] = () => fake.sentence(3); }
+    }
+    let inserted = 0;
+    for (let i = 0; i < count; i++) {
+      const row: Record<string, unknown> = {};
+      for (const [col, gen] of Object.entries(fieldMap)) {
+        row[col] = gen();
+      }
+      try {
+        db.insert(table, row);
+        inserted++;
+      } catch { /* skip failed rows */ }
+    }
+    res.json({ inserted, table });
+  } catch {
+    res.json({ error: "Database not connected" });
+  }
 };
 
-const handleQuery: RouteHandler = (req, res) => {
-  const query = (req as any).body?.query ?? "";
+const handleQuery: RouteHandler = async (req, res) => {
+  const query = ((req as any).body?.query ?? "").trim();
+  const queryType = (req as any).body?.type ?? "sql";
   if (!query) {
     res.json({ error: "Missing query parameter" });
     return;
   }
-  // Stub response — actual implementation will use ORM adapter
-  res.json({ query, rows: [], message: "Database not connected" });
+
+  if (queryType === "graphql") {
+    // GraphQL stub — can be extended when GraphQL module is available
+    res.json({ error: "GraphQL not yet supported in dev admin" });
+    return;
+  }
+
+  try {
+    const { getAdapter } = await import("@tina4/orm");
+    const db = getAdapter();
+
+    // Split multiple statements on semicolons
+    const statements = query.split(";").map((s: string) => s.trim()).filter((s: string) => s.length > 0);
+
+    if (statements.length === 1) {
+      const upper = statements[0].toUpperCase().trimStart();
+      const isRead = upper.startsWith("SELECT") || upper.startsWith("PRAGMA") || upper.startsWith("SHOW") || upper.startsWith("DESCRIBE");
+
+      if (isRead) {
+        const rows = db.fetch(statements[0]);
+        MessageLog.log("query", "info", `SQL: ${statements[0].substring(0, 80)}`, { rows: rows.length });
+        res.json({ rows, count: rows.length });
+        return;
+      }
+    }
+
+    // Execute all statements (single write or multi-statement batch)
+    let totalAffected = 0;
+    db.startTransaction();
+    try {
+      for (const stmt of statements) {
+        const result = db.execute(stmt);
+        // execute may return an object with affected count or a number
+        if (typeof result === "number") {
+          totalAffected += result;
+        } else if (result && typeof result === "object" && "changes" in (result as Record<string, unknown>)) {
+          totalAffected += Number((result as Record<string, unknown>).changes) || 0;
+        }
+      }
+      db.commit();
+    } catch (e: unknown) {
+      db.rollback();
+      const msg = e instanceof Error ? e.message : String(e);
+      res.json({ error: msg });
+      return;
+    }
+
+    MessageLog.log("query", "warn", `SQL batch: ${statements.length} statement(s)`, { affected: totalAffected });
+    res.json({ affected: totalAffected, success: true });
+  } catch (e: unknown) {
+    const msg = e instanceof Error ? e.message : String(e);
+    res.json({ error: msg });
+  }
 };
 
 // -- Broken (errors) handlers --
@@ -1085,8 +1201,7 @@ const handleDevAdminJs: RouteHandler = (_req, res) => {
 // Shared Dev Admin JS — cross-language, vanilla JS, zero dependencies
 // ---------------------------------------------------------------------------
 
-function renderDevAdminJs(): string {
-  // Use single-quoted strings and concatenation to avoid template literal escaping issues
+function renderAppShell(): string[] {
   return [
     "let currentTab = 'routes';",
     "let queueFilter = '';",
@@ -1107,7 +1222,11 @@ function renderDevAdminJs(): string {
     "    if (body) { opts.headers['Content-Type'] = 'application/json'; opts.body = JSON.stringify(body); }",
     "    return fetch(path, opts).then(function(r) { return r.json(); });",
     "}",
-    "",
+  ];
+}
+
+function renderRoutesTab(): string[] {
+  return [
     "// -- Routes --",
     "function loadRoutes() {",
     "    api('/__dev/api/routes').then(function(d) {",
@@ -1122,7 +1241,11 @@ function renderDevAdminJs(): string {
     "        }).join('');",
     "    });",
     "}",
-    "",
+  ];
+}
+
+function renderQueueTab(): string[] {
+  return [
     "// -- Queue --",
     "function loadQueue() {",
     "    var qs = queueFilter ? '?status=' + queueFilter : '';",
@@ -1158,7 +1281,11 @@ function renderDevAdminJs(): string {
     "function retryQueue() { api('/__dev/api/queue/retry', 'POST', {}).then(function() { loadQueue(); }); }",
     "function purgeQueue() { api('/__dev/api/queue/purge', 'POST', {}).then(function() { loadQueue(); }); }",
     "function replayJob(id, topic) { api('/__dev/api/queue/replay', 'POST', {job_id: id, topic: topic}).then(function() { loadQueue(); }); }",
-    "",
+  ];
+}
+
+function renderMailboxTab(): string[] {
+  return [
     "// -- Mailbox --",
     "function loadMailbox() {",
     "    var qs = mailboxFolder ? '?folder=' + mailboxFolder : '';",
@@ -1194,7 +1321,11 @@ function renderDevAdminJs(): string {
     "}",
     "function seedMailbox() { api('/__dev/api/mailbox/seed', 'POST', {count:5}).then(function() { loadMailbox(); }); }",
     "function clearMailbox() { api('/__dev/api/mailbox/clear', 'POST', {}).then(function() { loadMailbox(); }); }",
-    "",
+  ];
+}
+
+function renderMessagesTab(): string[] {
+  return [
     "// -- Messages --",
     "function loadMessages() {",
     "    api('/__dev/api/messages').then(function(d) {",
@@ -1223,20 +1354,168 @@ function renderDevAdminJs(): string {
     "    }).join('');",
     "}",
     "function clearMessages() { api('/__dev/api/messages/clear', 'POST', {}).then(function() { loadMessages(); }); }",
-    "",
+  ];
+}
+
+function renderDatabaseTab(): string[] {
+  return [
     "// -- Database --",
+    "var _currentTable = '';",
+    "",
+    "function _clipCopy(text, btn) {",
+    "    var orig = btn.textContent;",
+    "    var ta = document.createElement('textarea');",
+    "    ta.value = text;",
+    "    ta.style.cssText = 'position:fixed;left:-9999px;top:-9999px';",
+    "    document.body.appendChild(ta);",
+    "    ta.focus();",
+    "    ta.select();",
+    "    try { document.execCommand('copy'); btn.textContent = 'Copied!'; btn.style.color = 'var(--success)'; }",
+    "    catch(e) { btn.textContent = 'Failed'; btn.style.color = 'var(--danger)'; }",
+    "    document.body.removeChild(ta);",
+    "    setTimeout(function() { btn.textContent = orig; btn.style.color = ''; }, 1500);",
+    "}",
+    "",
+    "function copyResults(fmt, btn) {",
+    "    var el = document.getElementById('query-results');",
+    "    var tbl = el ? el.querySelector('table') : null;",
+    "    if (!tbl) { btn.textContent = 'No data'; btn.style.color = 'var(--danger)'; setTimeout(function() { btn.textContent = fmt === 'json' ? 'Copy JSON' : 'Copy CSV'; btn.style.color = ''; }, 1500); return; }",
+    "    var headerCells = tbl.querySelectorAll('thead th');",
+    "    var headers = []; headerCells.forEach(function(h) { headers.push(h.textContent); });",
+    "    var bodyRows = tbl.querySelectorAll('tbody tr');",
+    "    var data = [];",
+    "    bodyRows.forEach(function(row) {",
+    "        var cells = row.querySelectorAll('td');",
+    "        var obj = {};",
+    "        cells.forEach(function(c, i) { obj[headers[i] || ('col' + i)] = c.textContent === 'null' ? null : c.textContent; });",
+    "        data.push(obj);",
+    "    });",
+    "    var text = '';",
+    "    if (fmt === 'json') {",
+    "        text = JSON.stringify(data, null, 2);",
+    "    } else {",
+    "        var lines = [headers.join(',')];",
+    "        data.forEach(function(r) {",
+    "            lines.push(headers.map(function(h) { var v = (r[h] !== null ? r[h] : ''); return v.indexOf(',') >= 0 || v.indexOf('\"') >= 0 ? '\"' + v.replace(/\"/g, '\"\"') + '\"' : v; }).join(','));",
+    "        });",
+    "        text = lines.join(String.fromCharCode(10));",
+    "    }",
+    "    _clipCopy(text, btn);",
+    "}",
+    "",
+    "function pasteData() {",
+    "    var NL = String.fromCharCode(10);",
+    "    var TAB = String.fromCharCode(9);",
+    "    var overlay = document.createElement('div');",
+    "    overlay.style.cssText = 'position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6);z-index:99999;display:flex;align-items:center;justify-content:center';",
+    "    var box = document.createElement('div');",
+    "    box.style.cssText = 'background:var(--bg,#1e293b);border:1px solid var(--border,#334155);border-radius:0.5rem;padding:1rem;width:500px;max-width:90vw';",
+    "    box.innerHTML = '<div style=\"font-weight:600;margin-bottom:0.5rem;color:var(--text,#e2e8f0)\">Paste Data</div><div style=\"font-size:0.75rem;color:var(--muted,#94a3b8);margin-bottom:0.5rem\">Paste JSON array or CSV/tab-separated data below</div>';",
+    "    var ta = document.createElement('textarea');",
+    "    ta.style.cssText = 'width:100%;height:150px;font-family:monospace;font-size:0.75rem;background:var(--bg-alt,#0f172a);color:var(--text,#e2e8f0);border:1px solid var(--border,#334155);border-radius:0.25rem;padding:0.5rem;resize:vertical';",
+    "    ta.placeholder = 'Paste here (Ctrl+V)...';",
+    "    var btns = document.createElement('div');",
+    "    btns.style.cssText = 'display:flex;gap:0.5rem;margin-top:0.5rem;justify-content:flex-end';",
+    "    var cancelBtn = document.createElement('button');",
+    "    cancelBtn.className = 'btn btn-sm'; cancelBtn.textContent = 'Cancel';",
+    "    cancelBtn.onclick = function() { document.body.removeChild(overlay); };",
+    "    var goBtn = document.createElement('button');",
+    "    goBtn.className = 'btn btn-sm btn-primary'; goBtn.textContent = 'Generate SQL';",
+    "    goBtn.onclick = function() {",
+    "        var text = ta.value.trim();",
+    "        if (!text) { alert('Paste some data first'); return; }",
+    "        var upper = text.substring(0, 50).toUpperCase();",
+    "        if (upper.indexOf('INSERT ') >= 0 || upper.indexOf('CREATE ') >= 0 || upper.indexOf('SELECT ') >= 0) {",
+    "            document.getElementById('query-input').value = text;",
+    "            document.body.removeChild(overlay);",
+    "            return;",
+    "        }",
+    "        var rows = [];",
+    "        var parsed = null;",
+    "        try { parsed = JSON.parse(text); } catch(e) {}",
+    "        if (parsed && Array.isArray(parsed) && parsed.length > 0) {",
+    "            rows = parsed;",
+    "        } else {",
+    "            var lines = text.split(NL);",
+    "            if (lines.length < 2) { alert('Need a header row + at least one data row'); return; }",
+    "            var sep = lines[0].indexOf(TAB) >= 0 ? TAB : ',';",
+    "            var hdrs = lines[0].split(sep);",
+    "            for (var i = 1; i < lines.length; i++) {",
+    "                var vals = lines[i].split(sep);",
+    "                if (!vals.length || vals.join('').trim() === '') continue;",
+    "                var row = {};",
+    "                hdrs.forEach(function(h, idx) { row[h.trim()] = vals[idx] !== undefined ? vals[idx].trim() : ''; });",
+    "                rows.push(row);",
+    "            }",
+    "        }",
+    "        if (!rows.length) { alert('No data rows found'); return; }",
+    "        var allCols = Object.keys(rows[0]);",
+    "        var table = _currentTable || '';",
+    "        var isNew = false;",
+    "        if (!table) {",
+    "            table = prompt('No table selected. Enter table name (creates if new):');",
+    "            if (!table) { return; }",
+    "            isNew = true;",
+    "        }",
+    "        var sql = '';",
+    "        if (isNew) {",
+    "            var hasId = allCols.some(function(c) { return c.toLowerCase() === 'id'; });",
+    "            var colDefs = allCols.map(function(h) {",
+    "                if (h.toLowerCase() === 'id') return h + ' INTEGER PRIMARY KEY AUTOINCREMENT';",
+    "                return h + ' TEXT';",
+    "            }).join(', ');",
+    "            if (!hasId) colDefs = 'id INTEGER PRIMARY KEY AUTOINCREMENT, ' + colDefs;",
+    "            sql = 'CREATE TABLE IF NOT EXISTS ' + table + ' (' + colDefs + ');' + NL;",
+    "        }",
+    "        sql += rows.map(function(r) {",
+    "            var keys = Object.keys(r);",
+    "            if (isNew) { keys = keys.filter(function(k) { return k.toLowerCase() !== 'id'; }); }",
+    "            var cols = keys.join(', ');",
+    "            var vs = keys.map(function(k) { var v = r[k]; return v === null ? 'NULL' : \"'\" + String(v).replace(/'/g, \"''\") + \"'\"; }).join(', ');",
+    "            return 'INSERT INTO ' + table + ' (' + cols + ') VALUES (' + vs + ')';",
+    "        }).join(';' + NL);",
+    "        document.getElementById('query-input').value = sql;",
+    "        document.body.removeChild(overlay);",
+    "    };",
+    "    btns.appendChild(cancelBtn); btns.appendChild(goBtn);",
+    "    box.appendChild(ta); box.appendChild(btns);",
+    "    overlay.appendChild(box); document.body.appendChild(overlay);",
+    "    ta.focus();",
+    "}",
+    "",
     "function loadTables() {",
     "    api('/__dev/api/tables').then(function(d) {",
+    "        if (d.error) { document.getElementById('table-list').innerHTML = '<div style=\"color:var(--danger)\">' + d.error + '</div>'; return; }",
     "        var tables = d.tables || [];",
     "        document.getElementById('db-count').textContent = tables.length;",
-    "        document.getElementById('table-list').innerHTML = tables.map(function(t) {",
-    "            return '<div style=\"padding:0.2rem 0.4rem;cursor:pointer;border-radius:0.25rem\" onclick=\"browseTable(\\'' + t + '\\')\" onmouseover=\"this.style.background=\\'rgba(46,125,50,0.1)\\'\" onmouseout=\"this.style.background=\\'\\'\">' + t + '</div>';",
-    "        }).join('');",
+    "        var list = document.getElementById('table-list');",
+    "        if (!tables.length) { list.innerHTML = '<div class=\"text-muted\">No tables</div>'; return; }",
+    "        list.innerHTML = '';",
+    "        tables.forEach(function(t) {",
+    "            var div = document.createElement('div');",
+    "            div.style.cssText = 'cursor:pointer;padding:4px 6px;color:var(--primary);border-radius:4px;margin-bottom:1px';",
+    "            div.textContent = t;",
+    "            div.addEventListener('mouseenter', function() { if (t !== _currentTable) div.style.background = 'var(--bg-alt,rgba(255,255,255,0.05))'; });",
+    "            div.addEventListener('mouseleave', function() { if (t !== _currentTable) div.style.background = ''; });",
+    "            div.addEventListener('click', function() {",
+    "                list.querySelectorAll('div').forEach(function(d) { d.style.background = ''; d.style.fontWeight = ''; });",
+    "                div.style.background = 'var(--primary-bg,rgba(53,114,165,0.2))'; div.style.fontWeight = '600';",
+    "                browseTable(t);",
+    "            });",
+    "            list.appendChild(div);",
+    "        });",
     "        var sel = document.getElementById('seed-table');",
     "        sel.innerHTML = '<option value=\"\">Pick table...</option>' + tables.map(function(t) { return '<option value=\"' + t + '\">' + t + '</option>'; }).join('');",
-    "    });",
+    "    }).catch(function(e) { document.getElementById('table-list').innerHTML = '<div style=\"color:var(--danger)\">' + e.message + '</div>'; });",
+    "}",
+    "",
+    "function browseTable(name) {",
+    "    _currentTable = name;",
+    "    var lim = document.getElementById('query-limit').value;",
+    "    document.getElementById('query-input').value = 'SELECT * FROM ' + name + (lim !== '0' ? ' LIMIT ' + lim : '');",
+    "    runQuery();",
     "}",
-    "function browseTable(name) { document.getElementById('query-input').value = 'SELECT * FROM ' + name + ' LIMIT 20'; runQuery(); }",
+    "",
     "function seedTable() {",
     "    var table = document.getElementById('seed-table').value;",
     "    var count = parseInt(document.getElementById('seed-count').value) || 10;",
@@ -1246,30 +1525,38 @@ function renderDevAdminJs(): string {
     "        browseTable(table);",
     "    });",
     "}",
+    "",
     "function runQuery() {",
     "    var query = document.getElementById('query-input').value.trim();",
     "    var type = document.getElementById('query-type').value;",
     "    var errorEl = document.getElementById('query-error');",
+    "    var resultEl = document.getElementById('query-results');",
+    "    if (!query) { errorEl.textContent = 'Enter a query'; errorEl.classList.remove('hidden'); return; }",
     "    errorEl.classList.add('hidden');",
-    "    if (!query) return;",
+    "    resultEl.innerHTML = '<p class=\"text-muted\">Running...</p>';",
     "    api('/__dev/api/query', 'POST', {query:query, type:type}).then(function(d) {",
-    "        if (d.error) { errorEl.textContent = d.error; errorEl.classList.remove('hidden'); return; }",
-    "        var results = document.getElementById('query-results');",
-    "        if (d.rows && d.rows.length) {",
+    "        if (d.error) { errorEl.textContent = d.error; errorEl.classList.remove('hidden'); resultEl.innerHTML = ''; return; }",
+    "        if (d.rows) {",
+    "            if (!d.rows.length) { resultEl.innerHTML = '<p class=\"text-muted\">No results</p>'; return; }",
     "            var cols = d.columns || Object.keys(d.rows[0]);",
-    "            results.innerHTML = '<div class=\"text-sm text-muted p-sm\">' + (d.count||d.rows.length) + ' rows</div>' +",
-    "                '<table><thead><tr>' + cols.map(function(c){return '<th>'+c+'</th>';}).join('') + '</tr></thead>' +",
-    "                '<tbody>' + d.rows.map(function(r){ return '<tr>' + cols.map(function(c){ return '<td class=\"text-mono text-sm\">' + (r[c]===null?'<span class=\"text-muted\">NULL</span>':esc(String(r[c]))) + '</td>'; }).join('') + '</tr>'; }).join('') + '</tbody></table>';",
+    "            var html = '<div class=\"text-muted\" style=\"margin-bottom:0.25rem\">' + d.rows.length + ' row(s)</div><table class=\"table\"><thead><tr>' + cols.map(function(c) { return '<th>' + c + '</th>'; }).join('') + '</tr></thead><tbody>';",
+    "            d.rows.forEach(function(row) { html += '<tr>' + cols.map(function(c) { return '<td>' + (row[c] !== null ? row[c] : '<em>null</em>') + '</td>'; }).join('') + '</tr>'; });",
+    "            html += '</tbody></table>'; resultEl.innerHTML = html;",
     "        } else if (d.data) {",
-    "            results.innerHTML = '<pre class=\"p-md text-mono text-sm\">' + JSON.stringify(d.data, null, 2) + '</pre>';",
+    "            resultEl.innerHTML = '<pre class=\"p-md text-mono text-sm\">' + JSON.stringify(d.data, null, 2) + '</pre>';",
     "        } else if (d.success) {",
-    "            results.innerHTML = '<div class=\"empty\">Query executed. ' + (d.affected||0) + ' rows affected.</div>';",
+    "            resultEl.innerHTML = '<p style=\"color:var(--success)\">' + (d.affected || 0) + ' row(s) affected</p>';",
+    "            loadTables();",
     "        } else {",
-    "            results.innerHTML = '<div class=\"empty\">No results</div>';",
+    "            resultEl.innerHTML = '<div class=\"empty\">No results</div>';",
     "        }",
     "    }).catch(function(e) { errorEl.textContent = e.message; errorEl.classList.remove('hidden'); });",
     "}",
-    "",
+  ];
+}
+
+function renderRequestsTab(): string[] {
+  return [
     "// -- Requests --",
     "function loadRequests() {",
     "    api('/__dev/api/requests').then(function(d) {",
@@ -1294,7 +1581,11 @@ function renderDevAdminJs(): string {
     "    });",
     "}",
     "function clearRequests() { api('/__dev/api/requests/clear', 'POST', {}).then(function() { loadRequests(); }); }",
-    "",
+  ];
+}
+
+function renderErrorsTab(): string[] {
+  return [
     "// -- Errors --",
     "function loadErrors() {",
     "    api('/__dev/api/broken').then(function(d) {",
@@ -1320,7 +1611,11 @@ function renderDevAdminJs(): string {
     "}",
     "function resolveError(id) { api('/__dev/api/broken/resolve', 'POST', {id:id}).then(function() { loadErrors(); }); }",
     "function clearResolvedErrors() { api('/__dev/api/broken/clear', 'POST', {}).then(function() { loadErrors(); }); }",
-    "",
+  ];
+}
+
+function renderWebSocketTab(): string[] {
+  return [
     "// -- WebSockets --",
     "function loadWebSockets() {",
     "    api('/__dev/api/websockets').then(function(d) {",
@@ -1342,7 +1637,11 @@ function renderDevAdminJs(): string {
     "    });",
     "}",
     "function wsDisconnect(id) { api('/__dev/api/websockets/disconnect', 'POST', {id:id}).then(function() { loadWebSockets(); }); }",
-    "",
+  ];
+}
+
+function renderSystemTab(): string[] {
+  return [
     "// -- System --",
     "function loadSystem() {",
     "    api('/__dev/api/system').then(function(d) {",
@@ -1367,6 +1666,9 @@ function renderDevAdminJs(): string {
     "        if (fwVersion) html += '<div class=\"sys-card\"><div class=\"label\">Version</div><div class=\"value text-sm\">' + fwVersion + '</div></div>';",
     "        if (routeCount !== '') html += '<div class=\"sys-card\"><div class=\"label\">Routes</div><div class=\"value\">' + routeCount + '</div></div>';",
     "",
+    "        html += '<div class=\"sys-card\"><div class=\"label\">DB Tables</div><div class=\"value\">' + (d.db_tables !== undefined ? d.db_tables : 'N/A') + '</div></div>';",
+    "        html += '<div class=\"sys-card\"><div class=\"label\">DB Connected</div><div class=\"value\">' + (d.db_connected ? '<span style=\"color:var(--success)\">Yes</span>' : '<span style=\"color:var(--danger)\">No</span>') + '</div></div>';",
+    "",
     "        if (d.node && d.node.v8) html += '<div class=\"sys-card\"><div class=\"label\">V8 Engine</div><div class=\"value text-sm\">' + d.node.v8 + '</div></div>';",
     "        if (d.pid) html += '<div class=\"sys-card\"><div class=\"label\">PID</div><div class=\"value text-sm\">' + d.pid + '</div></div>';",
     "        if (d.cpus) html += '<div class=\"sys-card\"><div class=\"label\">CPU Cores</div><div class=\"value\">' + d.cpus + '</div></div>';",
@@ -1379,7 +1681,11 @@ function renderDevAdminJs(): string {
     "        document.getElementById('sys-cards').innerHTML = html;",
     "    });",
     "}",
-    "",
+  ];
+}
+
+function renderChatTab(): string[] {
+  return [
     "// -- Chat (Tina4) --",
     "var _aiKey = '';",
     "var _aiProvider = 'anthropic';",
@@ -1428,7 +1734,11 @@ function renderDevAdminJs(): string {
     "    document.getElementById('chat-input').value = msg;",
     "    sendChat();",
     "}",
-    "",
+  ];
+}
+
+function renderToolsTab(): string[] {
+  return [
     "// -- Tools --",
     "function runTool(tool) {",
     "    var titles = {carbon:'Carbon Benchmark',test:'Test Suite',routes:'Routes',migrate:'Migrations',seed:'Seeders',ai:'AI Detection'};",
@@ -1441,7 +1751,11 @@ function renderDevAdminJs(): string {
     "        document.getElementById('tool-result').textContent = 'Error: ' + e.message;",
     "    });",
     "}",
-    "",
+  ];
+}
+
+function renderUtilitiesAndInit(): string[] {
+  return [
     "// -- Exit Dev Admin --",
     "function exitDevAdmin() {",
     "    if (document.referrer && !document.referrer.includes('/__dev')) { window.location.href = document.referrer; }",
@@ -1469,7 +1783,38 @@ function renderDevAdminJs(): string {
     "    if (d.health) document.getElementById('err-count').textContent = d.health.unresolved || 0;",
     "    if (d.requests) document.getElementById('req-count').textContent = d.requests.total || 0;",
     "    if (d.request_stats) document.getElementById('req-count').textContent = d.request_stats.total || 0;",
+    "    if (d.db_tables !== undefined) document.getElementById('db-count').textContent = d.db_tables;",
     "});",
+  ];
+}
+
+function renderDevAdminJs(): string {
+  return [
+    ...renderAppShell(),
+    "",
+    ...renderRoutesTab(),
+    "",
+    ...renderQueueTab(),
+    "",
+    ...renderMailboxTab(),
+    "",
+    ...renderMessagesTab(),
+    "",
+    ...renderDatabaseTab(),
+    "",
+    ...renderRequestsTab(),
+    "",
+    ...renderErrorsTab(),
+    "",
+    ...renderWebSocketTab(),
+    "",
+    ...renderSystemTab(),
+    "",
+    ...renderChatTab(),
+    "",
+    ...renderToolsTab(),
+    "",
+    ...renderUtilitiesAndInit(),
   ].join("\n");
 }
 
@@ -1477,7 +1822,7 @@ function renderDevAdminJs(): string {
 // Dashboard HTML — Single-page app
 // ---------------------------------------------------------------------------
 
-function renderDashboard(): string {
+export function renderDashboard(): string {
   return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -1730,33 +2075,46 @@ code, .mono { font-family: var(--mono); font-size: 0.82rem; }
         <h2>Database</h2>
         <button class="btn btn-sm" onclick="loadTables()">Refresh</button>
     </div>
-    <div class="flex gap-md p-md">
-        <div class="flex-1">
-            <div class="flex gap-sm items-center mb-sm">
-                <select id="query-type" class="input">
+    <div style="display:flex;height:calc(100vh - 140px);overflow:hidden">
+        <!-- Left: Tables navigation -->
+        <div style="width:200px;min-width:200px;border-right:1px solid var(--border);padding:0.5rem;overflow-y:auto;display:flex;flex-direction:column;gap:0.5rem">
+            <div class="text-sm text-muted" style="font-weight:600">Tables</div>
+            <div id="table-list" class="text-sm"></div>
+            <div style="border-top:1px solid var(--border);padding-top:0.5rem;margin-top:auto">
+                <div class="text-sm text-muted" style="font-weight:600;margin-bottom:0.25rem">Seed Data</div>
+                <select id="seed-table" class="input" style="width:100%;margin-bottom:0.25rem;font-size:0.75rem"><option value="">Pick table...</option></select>
+                <div class="flex gap-sm items-center">
+                    <input type="number" id="seed-count" class="input" value="10" min="1" max="1000" style="width:60px;font-size:0.75rem">
+                    <button class="btn btn-sm btn-success" onclick="seedTable()">Seed</button>
+                </div>
+            </div>
+        </div>
+        <!-- Right: Query + Results -->
+        <div style="flex:1;display:flex;flex-direction:column;overflow:hidden;padding:0.5rem">
+            <div style="display:flex;gap:0.5rem;align-items:center;margin-bottom:0.25rem">
+                <select id="query-type" class="input" style="width:auto;font-size:0.75rem">
                     <option value="sql">SQL</option>
                     <option value="graphql">GraphQL</option>
                 </select>
+                <span class="text-sm text-muted">Limit</span>
+                <select id="query-limit" class="input" style="width:70px;font-size:0.75rem">
+                    <option value="20">20</option>
+                    <option value="50">50</option>
+                    <option value="100">100</option>
+                    <option value="500">500</option>
+                    <option value="0">All</option>
+                </select>
                 <button class="btn btn-sm btn-primary" onclick="runQuery()">Run</button>
+                <button class="btn btn-sm" id="btn-csv" onclick="copyResults('csv',this)" title="Copy results as CSV">Copy CSV</button>
+                <button class="btn btn-sm" id="btn-json" onclick="copyResults('json',this)" title="Copy results as JSON">Copy JSON</button>
+                <button class="btn btn-sm" onclick="pasteData()" title="Paste tab-separated data as INSERTs">Paste</button>
                 <span class="text-sm text-muted">Ctrl+Enter</span>
             </div>
-            <textarea id="query-input" rows="4" placeholder="SELECT * FROM users LIMIT 20" class="input input-mono" style="width:100%"></textarea>
+            <textarea id="query-input" rows="3" placeholder="SELECT * FROM users LIMIT 20" class="input input-mono" style="width:100%;font-size:0.75rem;resize:vertical"></textarea>
             <div id="query-error" class="hidden" style="color:var(--danger);font-size:0.75rem;margin-top:0.25rem"></div>
-        </div>
-        <div style="width:180px">
-            <div class="text-sm text-muted" style="font-weight:600;margin-bottom:0.5rem">Tables</div>
-            <div id="table-list" class="text-sm"></div>
-            <div style="margin-top:0.75rem;border-top:1px solid var(--border);padding-top:0.75rem">
-                <div class="text-sm text-muted" style="font-weight:600;margin-bottom:0.5rem">Seed Data</div>
-                <select id="seed-table" class="input" style="width:100%;margin-bottom:0.25rem"><option value="">Pick table...</option></select>
-                <div class="flex gap-sm items-center">
-                    <input type="number" id="seed-count" class="input" value="10" min="1" max="1000" style="width:60px">
-                    <button class="btn btn-sm btn-success" onclick="seedTable()">Seed</button>
-                </div>
-            </div>
+            <div id="query-results" style="flex:1;overflow:auto;margin-top:0.25rem;font-size:0.75rem"></div>
         </div>
     </div>
-    <div id="query-results" style="overflow-x:auto"></div>
 </div>
 
 <!-- Requests Panel -->
@@ -2047,20 +2405,41 @@ function miColor(mi){
     if(mi>=30) return 'rgb('+(Math.round(220+((60-mi)/30)*19))+','+(Math.round(180-((60-mi)/30)*112))+',0)';
     return 'rgb(239,'+(Math.round(68-mi*2))+',0)';
 }
-function renderBubbleChart(files){
+function renderBubbleChart(files,depGraph,scanMode){
     var container=document.getElementById('metrics-bubble');
     if(!files||!files.length){container.innerHTML='<p style="color:var(--muted);padding:1rem">No files to analyze</p>';return;}
+    depGraph=depGraph||{};
+    scanMode=scanMode||'project';
     var W=container.offsetWidth||900,H=Math.max(450,Math.min(650,W*0.45));
     var maxLoc=Math.max.apply(null,files.map(function(f){return f.loc}))||1;
+    var maxDeps=Math.max.apply(null,files.map(function(f){return f.dep_count||0}))||1;
+    var maxCC=Math.max.apply(null,files.map(function(f){return f.complexity||0}))||1;
     var minR=14,maxR=Math.min(70,W/10);
-    var sorted=files.slice().sort(function(a,b){return a.loc-b.loc});
+    // Composite health colour: complexity + tests + dependencies
+    function healthColor(f){
+        var cc=Math.min((f.avg_complexity||0)/10,1);
+        var untested=f.has_tests?0:1;
+        var deps=Math.min((f.dep_count||0)/5,1);
+        var score=cc*0.4+untested*0.4+deps*0.2;
+        score=Math.max(0,Math.min(1,score));
+        var hue=Math.round(120*(1-score));
+        var sat=Math.round(70+score*30);
+        var lit=Math.round(42+18*(1-score));
+        return 'hsl('+hue+','+sat+'%,'+lit+'%)';
+    }
+    // Build path->index lookup
+    var pathIdx={};
+    files.forEach(function(f,i){pathIdx[f.path]=i;});
+    // Spiral placement
+    function sizeScore(f){return (f.loc/maxLoc)*0.4+((f.avg_complexity||0)/10)*0.4+((f.dep_count||0)/maxDeps)*0.2;}
+    var sorted=files.slice().sort(function(a,b){return sizeScore(a)-sizeScore(b)});
     var cx=W/2,cy=H/2;
     var bubbles=[];
     var angle=0,spiralR=0;
     for(var i=0;i<sorted.length;i++){
         var f=sorted[i];
-        var r=minR+Math.sqrt(f.loc/maxLoc)*(maxR-minR);
-        var color=miColor(f.maintainability||0);
+        var r=minR+Math.sqrt(sizeScore(f))*(maxR-minR);
+        var color=healthColor(f);
         var placed=false;
         for(var attempt=0;attempt<800;attempt++){
             var px=cx+spiralR*Math.cos(angle);
@@ -2071,79 +2450,236 @@ function renderBubbleChart(files){
                 if(Math.sqrt(dx*dx+dy*dy)<r+bubbles[j].r+2){collides=true;break;}
             }
             if(!collides&&px>r+2&&px<W-r-2&&py>r+25&&py<H-r-2){
-                bubbles.push({x:px,y:py,r:r,color:color,f:f,angle:Math.random()*Math.PI*2,speed:0.3+Math.random()*0.5,drift:2+Math.random()*3});
+                bubbles.push({x:px,y:py,vx:0,vy:0,r:r,color:color,f:f});
                 placed=true;break;
             }
             angle+=0.2;spiralR+=0.04;
         }
-        if(!placed){bubbles.push({x:cx+(Math.random()-0.5)*W*0.3,y:cy+(Math.random()-0.5)*H*0.3,r:r,color:color,f:f,angle:Math.random()*Math.PI*2,speed:0.3+Math.random()*0.5,drift:2+Math.random()*3});}
+        if(!placed){bubbles.push({x:cx+(Math.random()-0.5)*W*0.3,y:cy+(Math.random()-0.5)*H*0.3,vx:0,vy:0,r:r,color:color,f:f});}
     }
+    // Build edge list from dependency graph — match by filename not full path
+    var edges=[];
+    function basename(p){var n=p.split('/').pop();var d=n.lastIndexOf('.');return(d>0?n.substring(0,d):n).toLowerCase();}
+    var nameIdx={};
+    bubbles.forEach(function(b,i){nameIdx[basename(b.f.path)]=i;});
+    Object.keys(depGraph).forEach(function(src){
+        var srcIdx=null;
+        bubbles.forEach(function(b,i){if(b.f.path===src)srcIdx=i;});
+        if(srcIdx===null)return;
+        (depGraph[src]||[]).forEach(function(tgt){
+            var tgtName=tgt.split('.').pop().toLowerCase();
+            var tgtIdx=nameIdx[tgtName];
+            if(tgtIdx!==undefined&&srcIdx!==tgtIdx)edges.push([srcIdx,tgtIdx]);
+        });
+    });
+    // Canvas
     var canvas=document.createElement('canvas');
     canvas.width=W;canvas.height=H;
     canvas.style.cssText='display:block;border:1px solid var(--border);border-radius:8px;cursor:pointer;background:#0f172a';
-    container.innerHTML='<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:0.5rem"><h3 style="margin:0;color:var(--primary)">Code Landscape</h3><span style="font-size:0.7rem;color:var(--muted)">Click a bubble to drill down | Size=LOC | <span style="color:#22c55e">Green</span>=maintainable <span style="color:#eab308">Yellow</span>=moderate <span style="color:#ef4444">Red</span>=needs work</span></div>';
+    var modeLabel=scanMode==='framework'?'<span style="color:#cba6f7;font-weight:600"> (Framework)</span> Add code to src/ to see your project':'';
+    container.innerHTML='<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:0.5rem"><h3 style="margin:0;color:var(--primary)">Code Landscape'+modeLabel+'</h3><span style="font-size:0.7rem;color:var(--muted)">Drag bubbles | Click to drill down | Size=LOC | Colour=health | T=tested | D=deps</span></div>';
     container.appendChild(canvas);
     var ctx=canvas.getContext('2d');
-    var hoveredIdx=-1;
-    var t=0;
+    var hoveredIdx=-1,dragIdx=-1,dragOX=0,dragOY=0;
+    // Physics
+    function simulate(){
+        var damping=0.65,springK=0.002,repulse=40,gravity=0.008;
+        var cx=W/2,cy=H/2;
+        // Gravity: pull all bubbles toward center, bigger = stronger pull
+        bubbles.forEach(function(b,idx){
+            if(idx===dragIdx)return;
+            var dx=cx-b.x,dy=cy-b.y;
+            var sizeFactor=0.3+(b.r/maxR)*0.7;
+            var pull=gravity*sizeFactor*sizeFactor;
+            b.vx+=dx*pull;b.vy+=dy*pull;
+        });
+        // Spring forces along edges
+        edges.forEach(function(e){
+            var a=bubbles[e[0]],b=bubbles[e[1]];
+            var dx=b.x-a.x,dy=b.y-a.y;
+            var dist=Math.sqrt(dx*dx+dy*dy)||1;
+            var rest=a.r+b.r+20;
+            var force=(dist-rest)*springK;
+            var fx=dx/dist*force,fy=dy/dist*force;
+            if(e[0]!==dragIdx){a.vx+=fx;a.vy+=fy;}
+            if(e[1]!==dragIdx){b.vx-=fx;b.vy-=fy;}
+        });
+        // Soft repulsion
+        for(var i=0;i<bubbles.length;i++){
+            for(var j=i+1;j<bubbles.length;j++){
+                var a=bubbles[i],b=bubbles[j];
+                var dx=b.x-a.x,dy=b.y-a.y;
+                var dist=Math.sqrt(dx*dx+dy*dy)||1;
+                var minDist=a.r+b.r+20;
+                if(dist<minDist){
+                    var force=repulse*(minDist-dist)/minDist;
+                    var fx=dx/dist*force,fy=dy/dist*force;
+                    if(i!==dragIdx){a.vx-=fx;a.vy-=fy;}
+                    if(j!==dragIdx){b.vx+=fx;b.vy+=fy;}
+                }
+            }
+        }
+        // Apply velocity + damping + boundary
+        bubbles.forEach(function(b,idx){
+            if(idx===dragIdx)return;
+            b.vx*=damping;b.vy*=damping;
+            // Cap velocity
+            var maxV=2;
+            if(b.vx>maxV)b.vx=maxV;if(b.vx<-maxV)b.vx=-maxV;
+            if(b.vy>maxV)b.vy=maxV;if(b.vy<-maxV)b.vy=-maxV;
+            b.x+=b.vx;b.y+=b.vy;
+            b.x=Math.max(b.r+2,Math.min(W-b.r-2,b.x));
+            b.y=Math.max(b.r+25,Math.min(H-b.r-2,b.y));
+        });
+    }
+    // Draw
     function draw(){
-        t+=0.016;
+        simulate();
         ctx.clearRect(0,0,W,H);
-        ctx.strokeStyle='rgba(255,255,255,0.03)';ctx.lineWidth=1;
-        for(var gx=0;gx<W;gx+=50){ctx.beginPath();ctx.moveTo(gx,0);ctx.lineTo(gx,H);ctx.stroke();}
-        for(var gy=0;gy<H;gy+=50){ctx.beginPath();ctx.moveTo(0,gy);ctx.lineTo(W,gy);ctx.stroke();}
+        ctx.save();ctx.translate(panX,panY);ctx.scale(zoom,zoom);
+        // Grid
+        ctx.strokeStyle='rgba(255,255,255,0.03)';ctx.lineWidth=1/zoom;
+        for(var gx=0;gx<W/zoom;gx+=50){ctx.beginPath();ctx.moveTo(gx,0);ctx.lineTo(gx,H/zoom);ctx.stroke();}
+        for(var gy=0;gy<H/zoom;gy+=50){ctx.beginPath();ctx.moveTo(0,gy);ctx.lineTo(W/zoom,gy);ctx.stroke();}
+        // Dependency arrows
+        edges.forEach(function(e){
+            var a=bubbles[e[0]],b=bubbles[e[1]];
+            var dx=b.x-a.x,dy=b.y-a.y;
+            var dist=Math.sqrt(dx*dx+dy*dy)||1;
+            var highlighted=(hoveredIdx===e[0]||hoveredIdx===e[1]);
+            ctx.beginPath();
+            ctx.moveTo(a.x+dx/dist*a.r,a.y+dy/dist*a.r);
+            var ex=b.x-dx/dist*b.r,ey=b.y-dy/dist*b.r;
+            ctx.lineTo(ex,ey);
+            ctx.strokeStyle=highlighted?'rgba(139,180,250,0.9)':'rgba(255,255,255,0.3)';
+            ctx.lineWidth=highlighted?3:1.5;ctx.stroke();
+            // Arrowhead
+            var aLen=highlighted?14:8;
+            var aAngle=Math.atan2(dy,dx);
+            ctx.beginPath();
+            ctx.moveTo(ex,ey);
+            ctx.lineTo(ex-aLen*Math.cos(aAngle-0.4),ey-aLen*Math.sin(aAngle-0.4));
+            ctx.lineTo(ex-aLen*Math.cos(aAngle+0.4),ey-aLen*Math.sin(aAngle+0.4));
+            ctx.closePath();ctx.fillStyle=ctx.strokeStyle;ctx.fill();
+        });
+        // Bubbles
         bubbles.forEach(function(b,idx){
-            var ox=Math.sin(t*b.speed+b.angle)*b.drift;
-            var oy=Math.cos(t*b.speed*0.7+b.angle+1)*b.drift*0.6;
-            var bx=b.x+ox,by=b.y+oy;
             var isHovered=(idx===hoveredIdx);
             var drawR=isHovered?b.r+4:b.r;
-            if(isHovered){
-                ctx.beginPath();ctx.arc(bx,by,drawR+8,0,Math.PI*2);
-                ctx.fillStyle='rgba(255,255,255,0.08)';ctx.fill();
-            }
-            ctx.beginPath();ctx.arc(bx,by,drawR,0,Math.PI*2);
-            ctx.fillStyle=b.color;ctx.globalAlpha=isHovered?0.95:0.7;ctx.fill();
-            ctx.globalAlpha=1;ctx.strokeStyle=b.color;ctx.lineWidth=isHovered?2.5:1.5;ctx.stroke();
+            if(isHovered){ctx.beginPath();ctx.arc(b.x,b.y,drawR+8,0,Math.PI*2);ctx.fillStyle='rgba(255,255,255,0.08)';ctx.fill();}
+            // Matte flat bubble
+            ctx.beginPath();ctx.arc(b.x,b.y,drawR,0,Math.PI*2);
+            ctx.fillStyle=b.color;ctx.globalAlpha=isHovered?1.0:0.85;ctx.fill();
+            ctx.globalAlpha=1;ctx.strokeStyle=isHovered?'rgba(255,255,255,0.6)':'rgba(255,255,255,0.25)';ctx.lineWidth=isHovered?2.5:1.5;ctx.stroke();
+            // Label
             var name=b.f.path.split('/').pop().replace('.ts','').replace('.js','');
             if(drawR>16){
                 var fs=Math.max(8,Math.min(13,drawR*0.38));
                 ctx.fillStyle='#fff';ctx.font='600 '+fs+'px monospace';ctx.textAlign='center';
-                ctx.fillText(name,bx,by-2);
+                ctx.fillText(name,b.x,b.y-2);
                 ctx.fillStyle='rgba(255,255,255,0.65)';ctx.font=(fs-1)+'px monospace';
-                ctx.fillText(b.f.loc+' LOC',bx,by+fs);
+                ctx.fillText(b.f.loc+' LOC',b.x,b.y+fs);
                 if(isHovered&&drawR>25){
                     ctx.fillStyle='rgba(255,255,255,0.5)';ctx.font=(fs-2)+'px monospace';
-                    ctx.fillText('CC:'+b.f.complexity+' MI:'+b.f.maintainability,bx,by+fs*2);
+                    ctx.fillText('CC:'+b.f.complexity+' MI:'+b.f.maintainability,b.x,b.y+fs*2);
                 }
             }
-            b._drawX=bx;b._drawY=by;b._drawR=drawR;
+            // Markers: T (tested) and D (dependencies) — inverted badges
+            var mfs=Math.max(9,drawR*0.3);
+            var mrad=mfs*0.7;
+            var mpad=mrad*2.4;
+            var my=b.y-drawR+mrad+3;
+            if(drawR>14&&b.f.has_tests){
+                var mx=b.x-(b.f.dep_count>0?mpad*0.5:0);
+                ctx.beginPath();ctx.arc(mx,my,mrad,0,Math.PI*2);
+                ctx.fillStyle='#16a34a';ctx.fill();
+                ctx.fillStyle='#fff';ctx.font='bold '+mfs+'px sans-serif';ctx.textAlign='center';
+                ctx.fillText('T',mx,my+mfs*0.35);
+            }
+            if(drawR>14&&b.f.dep_count>0){
+                var mx2=b.x+(b.f.has_tests?mpad*0.5:0);
+                ctx.beginPath();ctx.arc(mx2,my,mrad,0,Math.PI*2);
+                ctx.fillStyle='#ea580c';ctx.fill();
+                ctx.fillStyle='#fff';ctx.font='bold '+mfs+'px sans-serif';ctx.textAlign='center';
+                ctx.fillText('D',mx2,my+mfs*0.35);
+            }
+            b._drawX=b.x;b._drawY=b.y;b._drawR=drawR;
         });
-        var totalLoc=0,totalFiles=bubbles.length;
-        bubbles.forEach(function(b){totalLoc+=b.f.loc});
+        // Summary
+        var totalLoc=0,totalFiles=bubbles.length,testedCount=0;
+        bubbles.forEach(function(b){totalLoc+=b.f.loc;if(b.f.has_tests)testedCount++;});
         var avgMI=bubbles.reduce(function(s,b){return s+b.f.maintainability},0)/totalFiles;
         ctx.fillStyle='rgba(255,255,255,0.35)';ctx.font='11px monospace';ctx.textAlign='right';
-        ctx.fillText(totalFiles+' files | '+totalLoc.toLocaleString()+' LOC | Avg MI: '+avgMI.toFixed(1),W-12,H-10);
+        ctx.restore();
+        ctx.fillStyle='rgba(255,255,255,0.35)';ctx.font='11px monospace';ctx.textAlign='right';
+        ctx.fillText(totalFiles+' files | '+totalLoc.toLocaleString()+' LOC | MI:'+avgMI.toFixed(1)+' | Tested:'+testedCount+'/'+totalFiles,W-12,H-10);
         window._metricsAnimFrame=requestAnimationFrame(draw);
     }
     draw();
+    // Mouse events — hover + drag bubbles + right-click pan
+    var panning=false,panStartX=0,panStartY=0;
+    canvas.addEventListener('contextmenu',function(e){e.preventDefault();});
     canvas.addEventListener('mousemove',function(e){
         var rect=canvas.getBoundingClientRect();
         var mx=e.clientX-rect.left,my=e.clientY-rect.top;
+        if(panning){
+            panX+=(mx-panStartX);panY+=(my-panStartY);
+            panStartX=mx;panStartY=my;return;
+        }
+        if(dragIdx>=0){
+            var wmx=(mx-panX)/zoom,wmy=(my-panY)/zoom;
+            bubbles[dragIdx].x=wmx-dragOX;bubbles[dragIdx].y=wmy-dragOY;
+            bubbles[dragIdx].vx=0;bubbles[dragIdx].vy=0;return;
+        }
+        var wmx2=(mx-panX)/zoom,wmy2=(my-panY)/zoom;
         hoveredIdx=-1;
         for(var i=bubbles.length-1;i>=0;i--){
             var b=bubbles[i];
-            var dx=mx-b._drawX,dy=my-b._drawY;
-            if(Math.sqrt(dx*dx+dy*dy)<=b._drawR){hoveredIdx=i;break;}
+            var dx=wmx2-b.x,dy=wmy2-b.y;
+            if(Math.sqrt(dx*dx+dy*dy)<=b.r){hoveredIdx=i;break;}
+        }
+        canvas.style.cursor=panning?'move':hoveredIdx>=0?'grab':'default';
+    });
+    canvas.addEventListener('mousedown',function(e){
+        var rect=canvas.getBoundingClientRect();
+        var mx=e.clientX-rect.left,my=e.clientY-rect.top;
+        if(e.button===2){
+            panning=true;panStartX=mx;panStartY=my;
+            canvas.style.cursor='move';return;
         }
-        canvas.style.cursor=hoveredIdx>=0?'pointer':'default';
+        if(hoveredIdx>=0){
+            dragIdx=hoveredIdx;
+            var wmx=(mx-panX)/zoom;
+            var wmy=(my-panY)/zoom;
+            dragOX=wmx-bubbles[dragIdx].x;
+            dragOY=wmy-bubbles[dragIdx].y;
+            canvas.style.cursor='grabbing';
+        }
+    });
+    canvas.addEventListener('mouseup',function(){
+        if(panning){panning=false;canvas.style.cursor='default';}
+        if(dragIdx>=0){canvas.style.cursor='grab';dragIdx=-1;}
     });
-    canvas.addEventListener('mouseleave',function(){hoveredIdx=-1;});
-    canvas.addEventListener('click',function(e){
+    canvas.addEventListener('mouseleave',function(){hoveredIdx=-1;dragIdx=-1;panning=false;});
+    canvas.addEventListener('dblclick',function(e){
         if(hoveredIdx<0)return;
-        var f=bubbles[hoveredIdx].f;
-        drillDownFile(f.path);
+        drillDownFile(bubbles[hoveredIdx].f.path);
     });
+    // Zoom with mouse wheel
+    var zoom=1.0,panX=0,panY=0;
+    canvas.addEventListener('wheel',function(e){
+        e.preventDefault();
+        var rect=canvas.getBoundingClientRect();
+        var mx=(e.clientX-rect.left-panX)/zoom;
+        var my=(e.clientY-rect.top-panY)/zoom;
+        var oldZoom=zoom;
+        zoom*=e.deltaY<0?1.08:0.93;
+        zoom=Math.max(0.5,Math.min(2.5,zoom));
+        panX+=(mx*oldZoom-mx*zoom);
+        panY+=(my*oldZoom-my*zoom);
+        bubbles.forEach(function(b){});
+    },{passive:false});
+    bubbles.forEach(function(b){b._baseR=b.r;});
 }
 function drillDownFile(path){
     var dd=document.getElementById('metrics-drilldown');
@@ -2185,6 +2721,15 @@ function drillDownFile(path){
             });
             html+='</div>';
         }
+        if(d.warnings&&d.warnings.length){
+            html+='<h3 style="margin:0.75rem 0 0.25rem;color:#eab308;font-size:0.85rem">&#9888; Warnings</h3>';
+            html+='<div style="display:flex;flex-direction:column;gap:4px">';
+            d.warnings.forEach(function(w){
+                html+='<div style="padding:4px 8px;background:rgba(234,179,8,0.08);border-left:3px solid #eab308;border-radius:0 4px 4px 0;font-size:0.75rem;font-family:var(--mono);color:var(--text)">';
+                html+='<span style="color:#eab308;margin-right:6px">L'+w.line+'</span>'+w.message+'</div>';
+            });
+            html+='</div>';
+        }
         dd.querySelector('.p-md').innerHTML=html;
     }).catch(function(e){
         dd.querySelector('.p-md').innerHTML='<p style="color:var(--danger)">Error: '+e.message+'</p>';
@@ -2213,7 +2758,7 @@ function loadAllMetrics(){
     fetch('/__dev/api/metrics/full').then(function(r){return r.json()}).then(function(d){
         _metricsFullData=d;
         if(d.error){document.getElementById('metrics-bubble').innerHTML='<p style="color:var(--danger);padding:1rem">'+d.error+'</p>';return;}
-        renderBubbleChart(d.file_metrics);
+        renderBubbleChart(d.file_metrics,d.dependency_graph,d.scan_mode);
         var hm=document.getElementById('metrics-heatmap');
         var rows=d.file_metrics.map(function(f){
             var color=miColor(f.maintainability);