binja 0.6.0 → 0.7.0

package/dist/index.js

@@ -56,103 +56,6 @@ var KEYWORDS = {
   in: "NAME" /* NAME */
 };
 
-// src/lexer/hybrid.ts
-var _tokenizeBatchFn = null;
-function checkNative() {
-  return false;
-}
-var NATIVE_TO_TS = {
-  0: "TEXT" /* TEXT */,
-  1: "VARIABLE_START" /* VARIABLE_START */,
-  2: "VARIABLE_END" /* VARIABLE_END */,
-  3: "BLOCK_START" /* BLOCK_START */,
-  4: "BLOCK_END" /* BLOCK_END */,
-  5: "COMMENT_START" /* COMMENT_START */,
-  6: "COMMENT_END" /* COMMENT_END */,
-  7: "NAME" /* NAME */,
-  8: "STRING" /* STRING */,
-  9: "NUMBER" /* NUMBER */,
-  10: "NAME" /* NAME */,
-  11: "DOT" /* DOT */,
-  12: "COMMA" /* COMMA */,
-  13: "PIPE" /* PIPE */,
-  14: "COLON" /* COLON */,
-  15: "LPAREN" /* LPAREN */,
-  16: "RPAREN" /* RPAREN */,
-  17: "LBRACKET" /* LBRACKET */,
-  18: "RBRACKET" /* RBRACKET */,
-  19: "LBRACE" /* LBRACE */,
-  20: "RBRACE" /* RBRACE */,
-  21: "ASSIGN" /* ASSIGN */,
-  22: "EOF" /* EOF */
-};
-var OPERATOR_TO_TYPE = {
-  "==": "EQ" /* EQ */,
-  "!=": "NE" /* NE */,
-  "<": "LT" /* LT */,
-  ">": "GT" /* GT */,
-  "<=": "LE" /* LE */,
-  ">=": "GE" /* GE */,
-  "+": "ADD" /* ADD */,
-  "-": "SUB" /* SUB */,
-  "*": "MUL" /* MUL */,
-  "/": "DIV" /* DIV */,
-  "%": "MOD" /* MOD */,
-  "~": "TILDE" /* TILDE */
-};
-var KEYWORD_TO_TYPE = {
-  and: "AND" /* AND */,
-  or: "OR" /* OR */,
-  not: "NOT" /* NOT */
-};
-function isNativeAccelerated() {
-  return checkNative();
-}
-function tokenizeNative(source) {
-  if (!checkNative() || !_tokenizeBatchFn)
-    return null;
-  if (source.length === 0) {
-    return [{ type: "EOF" /* EOF */, value: "", line: 1, column: 1 }];
-  }
-  const rawTokens = _tokenizeBatchFn(source);
-  const lineStarts = [0];
-  for (let i = 0;i < source.length; i++) {
-    if (source[i] === `
-`)
-      lineStarts.push(i + 1);
-  }
-  const tokens = new Array(rawTokens.length);
-  for (let i = 0;i < rawTokens.length; i++) {
-    const [nativeType, start, end] = rawTokens[i];
-    let value = source.slice(start, end);
-    let lo = 0, hi = lineStarts.length - 1;
-    while (lo < hi) {
-      const mid = lo + hi + 1 >> 1;
-      if (lineStarts[mid] <= start)
-        lo = mid;
-      else
-        hi = mid - 1;
-    }
-    const line = lo + 1;
-    const column = start - lineStarts[lo] + 1;
-    let type = NATIVE_TO_TS[nativeType] ?? "NAME" /* NAME */;
-    if (nativeType === 10 && OPERATOR_TO_TYPE[value]) {
-      type = OPERATOR_TO_TYPE[value];
-    } else if (type === "NAME" /* NAME */ && KEYWORD_TO_TYPE[value]) {
-      type = KEYWORD_TO_TYPE[value];
-    }
-    if (type === "STRING" /* STRING */ && value.length >= 2) {
-      const first = value[0];
-      const last = value[value.length - 1];
-      if (first === '"' && last === '"' || first === "'" && last === "'") {
-        value = value.slice(1, -1);
-      }
-    }
-    tokens[i] = { type, value, line, column };
-  }
-  return tokens;
-}
-
 // src/errors/index.ts
 var colors = {
   red: "\x1B[31m",
@@ -315,7 +218,6 @@ class Lexer {
   blockEnd;
   commentStart;
   commentEnd;
-  useNative;
   constructor(source, options = {}) {
     this.state = {
       source,
@@ -330,15 +232,8 @@ class Lexer {
     this.blockEnd = options.blockEnd ?? "%}";
     this.commentStart = options.commentStart ?? "{#";
     this.commentEnd = options.commentEnd ?? "#}";
-    const hasCustomDelimiters = options.variableStart !== undefined || options.variableEnd !== undefined || options.blockStart !== undefined || options.blockEnd !== undefined || options.commentStart !== undefined || options.commentEnd !== undefined;
-    this.useNative = !hasCustomDelimiters && isNativeAccelerated();
   }
   tokenize() {
-    if (this.useNative) {
-      const nativeTokens = tokenizeNative(this.state.source);
-      if (nativeTokens)
-        return nativeTokens;
-    }
     while (!this.isAtEnd()) {
       this.scanToken();
     }
@@ -3863,18 +3758,556 @@ class Runtime {
       return;
     return obj[index];
   }
+  static TITLE_REGEX = /\b\w/g;
+  static STRIPTAGS_REGEX = /<[^>]*>/g;
+  static SLUGIFY_REGEX1 = /[^\w\s-]/g;
+  static SLUGIFY_REGEX2 = /[\s_-]+/g;
+  static SLUGIFY_REGEX3 = /^-+|-+$/g;
+  static WHITESPACE_REGEX = /\s+/;
+  static URLIZE_REGEX = /(https?:\/\/[^\s]+)/g;
+  static NEWLINE_REGEX = /\n/g;
+  static DOUBLE_NEWLINE_REGEX = /\n\n+/;
   evalFilter(node, ctx) {
     const value = this.eval(node.node, ctx);
+    const filterName = node.filter;
+    const argsLen = node.args.length;
+    if (argsLen === 0) {
+      switch (filterName) {
+        case "upper":
+          return String(value ?? "").toUpperCase();
+        case "lower":
+          return String(value ?? "").toLowerCase();
+        case "trim":
+          return String(value ?? "").trim();
+        case "capitalize": {
+          const s = String(value ?? "");
+          return s.charAt(0).toUpperCase() + s.slice(1).toLowerCase();
+        }
+        case "capfirst": {
+          const s = String(value ?? "");
+          return s.charAt(0).toUpperCase() + s.slice(1);
+        }
+        case "title":
+          return String(value ?? "").replace(Runtime.TITLE_REGEX, (c2) => c2.toUpperCase());
+        case "striptags":
+          return String(value ?? "").replace(Runtime.STRIPTAGS_REGEX, "");
+        case "slugify":
+          return String(value ?? "").toLowerCase().replace(Runtime.SLUGIFY_REGEX1, "").replace(Runtime.SLUGIFY_REGEX2, "-").replace(Runtime.SLUGIFY_REGEX3, "");
+        case "wordcount": {
+          const str = String(value ?? "").trim();
+          return str ? str.split(Runtime.WHITESPACE_REGEX).length : 0;
+        }
+        case "escapejs":
+          return JSON.stringify(String(value ?? "")).slice(1, -1);
+        case "linebreaksbr": {
+          const html = String(value ?? "").replace(Runtime.NEWLINE_REGEX, "<br>");
+          const safe2 = new String(html);
+          safe2.__safe__ = true;
+          return safe2;
+        }
+        case "linebreaks": {
+          const paragraphs = String(value ?? "").split(Runtime.DOUBLE_NEWLINE_REGEX);
+          let html = "";
+          for (let i = 0;i < paragraphs.length; i++) {
+            if (i > 0)
+              html += `
+`;
+            html += `<p>${paragraphs[i].replace(Runtime.NEWLINE_REGEX, "<br>")}</p>`;
+          }
+          const safe2 = new String(html);
+          safe2.__safe__ = true;
+          return safe2;
+        }
+        case "urlencode":
+          return encodeURIComponent(String(value ?? ""));
+        case "safe": {
+          const safeVal = new String(value ?? "");
+          safeVal.__safe__ = true;
+          return safeVal;
+        }
+        case "escape":
+        case "e": {
+          if (value?.__safe__)
+            return value;
+          const escaped = new String(Bun.escapeHTML(String(value ?? "")));
+          escaped.__safe__ = true;
+          return escaped;
+        }
+        case "forceescape": {
+          const escaped = new String(Bun.escapeHTML(String(value ?? "")));
+          escaped.__safe__ = true;
+          return escaped;
+        }
+        case "int":
+          return parseInt(String(value), 10) || 0;
+        case "float":
+          return parseFloat(String(value)) || 0;
+        case "abs":
+          return Math.abs(Number(value) || 0);
+        case "filesizeformat": {
+          const bytes = Number(value) || 0;
+          const units = ["bytes", "KB", "MB", "GB", "TB", "PB"];
+          let i = 0, size = bytes;
+          while (size >= 1024 && i < units.length - 1) {
+            size /= 1024;
+            i++;
+          }
+          return `${size.toFixed(1)} ${units[i]}`;
+        }
+        case "length":
+          if (value == null)
+            return 0;
+          if (typeof value === "string" || Array.isArray(value))
+            return value.length;
+          if (typeof value === "object") {
+            let count = 0;
+            for (const _ in value)
+              count++;
+            return count;
+          }
+          return 0;
+        case "first":
+          if (Array.isArray(value))
+            return value[0];
+          if (typeof value === "string")
+            return value[0];
+          return value;
+        case "last":
+          if (Array.isArray(value))
+            return value[value.length - 1];
+          if (typeof value === "string")
+            return value[value.length - 1];
+          return value;
+        case "reverse":
+          if (Array.isArray(value))
+            return [...value].reverse();
+          if (typeof value === "string")
+            return value.split("").reverse().join("");
+          return value;
+        case "sort":
+          if (Array.isArray(value))
+            return [...value].sort();
+          return value;
+        case "unique":
+          if (Array.isArray(value))
+            return [...new Set(value)];
+          return value;
+        case "list":
+        case "make_list":
+          if (Array.isArray(value))
+            return value;
+          if (typeof value === "string")
+            return value.split("");
+          if (value && typeof value[Symbol.iterator] === "function")
+            return [...value];
+          if (typeof value === "object" && value !== null)
+            return Object.values(value);
+          return [value];
+        case "random":
+          if (Array.isArray(value))
+            return value[Math.floor(Math.random() * value.length)];
+          return value;
+        case "items":
+          if (value == null || typeof value !== "object")
+            return [];
+          return Object.entries(value);
+        case "string":
+          return String(value ?? "");
+        case "json":
+        case "tojson": {
+          try {
+            const jsonStr = new String(JSON.stringify(value));
+            jsonStr.__safe__ = true;
+            return jsonStr;
+          } catch {
+            return "";
+          }
+        }
+        case "pprint": {
+          try {
+            const result = new String(JSON.stringify(value, null, 2));
+            result.__safe__ = true;
+            return result;
+          } catch {
+            return String(value);
+          }
+        }
+        case "urlize": {
+          const html = String(value ?? "").replace(Runtime.URLIZE_REGEX, '<a href="$1">$1</a>');
+          const safe2 = new String(html);
+          safe2.__safe__ = true;
+          return safe2;
+        }
+      }
+    }
+    if (argsLen === 1) {
+      const arg = this.eval(node.args[0], ctx);
+      switch (filterName) {
+        case "default":
+        case "d":
+          if (value === undefined || value === null || value === "" || value === false) {
+            return arg;
+          }
+          return value;
+        case "default_if_none":
+          return value === null || value === undefined ? arg : value;
+        case "truncatechars": {
+          const str = String(value ?? "");
+          const len = Number(arg) || 30;
+          if (str.length <= len)
+            return str;
+          return str.slice(0, len - 3) + "...";
+        }
+        case "truncatewords": {
+          const words = String(value ?? "").split(Runtime.WHITESPACE_REGEX);
+          const count = Number(arg) || 15;
+          if (words.length <= count)
+            return value;
+          return words.slice(0, count).join(" ") + "...";
+        }
+        case "center": {
+          const str = String(value ?? "");
+          const width = Number(arg) || 80;
+          const padding = Math.max(0, width - str.length);
+          const left = Math.floor(padding / 2);
+          return " ".repeat(left) + str + " ".repeat(padding - left);
+        }
+        case "ljust":
+          return String(value ?? "").padEnd(Number(arg) || 80);
+        case "rjust":
+          return String(value ?? "").padStart(Number(arg) || 80);
+        case "cut":
+          return String(value ?? "").split(String(arg)).join("");
+        case "add": {
+          const numVal = Number(value);
+          const numArg = Number(arg);
+          if (!isNaN(numVal) && !isNaN(numArg))
+            return numVal + numArg;
+          return String(value) + String(arg);
+        }
+        case "divisibleby":
+          return Number(value) % Number(arg) === 0;
+        case "round":
+          return Number(Number(value).toFixed(Number(arg) || 0));
+        case "floatformat": {
+          const num = parseFloat(String(value));
+          if (isNaN(num))
+            return "";
+          const decimals = Number(arg);
+          if (decimals === -1) {
+            const formatted = num.toFixed(1);
+            return formatted.endsWith(".0") ? Math.round(num).toString() : formatted;
+          }
+          return num.toFixed(Math.abs(decimals));
+        }
+        case "get_digit": {
+          const num = parseInt(String(value), 10);
+          if (isNaN(num))
+            return value;
+          const str = String(Math.abs(num));
+          const pos = Number(arg) || 1;
+          if (pos < 1 || pos > str.length)
+            return value;
+          return parseInt(str[str.length - pos], 10);
+        }
+        case "join":
+          if (Array.isArray(value))
+            return value.join(String(arg ?? ""));
+          return String(value);
+        case "slice": {
+          if (!value)
+            return value;
+          const [startStr, endStr] = String(arg).split(":");
+          const start = startStr ? parseInt(startStr, 10) : 0;
+          const end = endStr ? parseInt(endStr, 10) : undefined;
+          if (Array.isArray(value) || typeof value === "string")
+            return value.slice(start, end);
+          return value;
+        }
+        case "batch": {
+          if (!Array.isArray(value))
+            return [[value]];
+          const size = Number(arg) || 1;
+          const result = [];
+          for (let i = 0;i < value.length; i += size) {
+            result.push(value.slice(i, i + size));
+          }
+          return result;
+        }
+        case "columns": {
+          if (!Array.isArray(value))
+            return [[value]];
+          const cols = Number(arg) || 2;
+          const result = [];
+          for (let i = 0;i < value.length; i += cols) {
+            result.push(value.slice(i, i + cols));
+          }
+          return result;
+        }
+        case "length_is":
+          return (value == null ? 0 : value.length ?? Object.keys(value).length ?? 0) === Number(arg);
+        case "attr":
+          return value == null ? undefined : value[arg];
+        case "dictsort":
+          if (!Array.isArray(value))
+            return value;
+          return [...value].sort((a, b) => {
+            const aVal = arg ? a[arg] : a;
+            const bVal = arg ? b[arg] : b;
+            return aVal < bVal ? -1 : aVal > bVal ? 1 : 0;
+          });
+        case "dictsortreversed":
+          if (!Array.isArray(value))
+            return value;
+          return [...value].sort((a, b) => {
+            const aVal = arg ? a[arg] : a;
+            const bVal = arg ? b[arg] : b;
+            return aVal > bVal ? -1 : aVal < bVal ? 1 : 0;
+          });
+        case "map":
+          if (!Array.isArray(value))
+            return [];
+          if (typeof arg === "string")
+            return value.map((item) => item?.[arg]);
+          return value;
+        case "select":
+          if (!Array.isArray(value))
+            return [];
+          if (arg === undefined)
+            return value.filter((item) => !!item);
+          return value.filter((item) => !!item?.[arg]);
+        case "reject":
+          if (!Array.isArray(value))
+            return [];
+          if (arg === undefined)
+            return value.filter((item) => !item);
+          return value.filter((item) => !item?.[arg]);
+        case "groupby": {
+          if (!Array.isArray(value))
+            return [];
+          const groups = {};
+          for (const item of value) {
+            const key = String(arg ? item[arg] : item);
+            if (!(key in groups))
+              groups[key] = [];
+            groups[key].push(item);
+          }
+          const result = [];
+          for (const key in groups) {
+            result.push({ grouper: key, list: groups[key] });
+          }
+          return result;
+        }
+        case "date":
+        case "time": {
+          const d = value instanceof Date ? value : new Date(value);
+          if (isNaN(d.getTime()))
+            return "";
+          return this.formatDate(d, String(arg || (filterName === "time" ? "H:i" : "N j, Y")));
+        }
+        case "pluralize": {
+          const argStr = String(arg ?? "s");
+          const [singular, plural] = argStr.includes(",") ? argStr.split(",") : ["", argStr];
+          return Number(value) === 1 ? singular : plural;
+        }
+        case "yesno": {
+          const [yes, no, maybe] = String(arg ?? "yes,no,maybe").split(",");
+          if (value === true)
+            return yes;
+          if (value === false)
+            return no;
+          return maybe ?? no;
+        }
+        case "json":
+        case "tojson": {
+          try {
+            const jsonStr = new String(JSON.stringify(value, null, arg));
+            jsonStr.__safe__ = true;
+            return jsonStr;
+          } catch {
+            return "";
+          }
+        }
+        case "urlizetrunc": {
+          const maxLen = Number(arg) || 15;
+          const html = String(value ?? "").replace(Runtime.URLIZE_REGEX, (url) => {
+            const displayUrl = url.length > maxLen ? url.slice(0, maxLen) + "..." : url;
+            return `<a href="${url}">${displayUrl}</a>`;
+          });
+          const safe2 = new String(html);
+          safe2.__safe__ = true;
+          return safe2;
+        }
+        case "indent": {
+          const str = String(value ?? "");
+          const indentStr = typeof arg === "string" ? arg : " ".repeat(Number(arg) || 4);
+          const lines = str.split(`
+`);
+          let result = lines[0];
+          for (let i = 1;i < lines.length; i++) {
+            result += `
+` + (lines[i].trim() === "" ? lines[i] : indentStr + lines[i]);
+          }
+          return result;
+        }
+        case "stringformat": {
+          const fmt = String(arg);
+          const val = value;
+          if (fmt === "s")
+            return String(val);
+          if (fmt === "d" || fmt === "i")
+            return String(parseInt(String(val), 10) || 0);
+          if (fmt === "f")
+            return String(parseFloat(String(val)) || 0);
+          if (fmt === "x")
+            return (parseInt(String(val), 10) || 0).toString(16);
+          if (fmt === "X")
+            return (parseInt(String(val), 10) || 0).toString(16).toUpperCase();
+          if (fmt === "o")
+            return (parseInt(String(val), 10) || 0).toString(8);
+          if (fmt === "b")
+            return (parseInt(String(val), 10) || 0).toString(2);
+          if (fmt === "e")
+            return (parseFloat(String(val)) || 0).toExponential();
+          const precMatch = fmt.match(/^\.?(\d+)f$/);
+          if (precMatch)
+            return (parseFloat(String(val)) || 0).toFixed(parseInt(precMatch[1], 10));
+          const widthMatch = fmt.match(/^(0?)(\d+)([sd])$/);
+          if (widthMatch) {
+            const [, zero, widthStr, type] = widthMatch;
+            const width = parseInt(widthStr, 10);
+            const strVal = type === "d" ? String(parseInt(String(val), 10) || 0) : String(val);
+            return strVal.padStart(width, zero ? "0" : " ");
+          }
+          return String(val);
+        }
+        case "json_script": {
+          const jsonStr = JSON.stringify(value).replace(/</g, "\\u003C").replace(/>/g, "\\u003E").replace(/&/g, "\\u0026");
+          const id = arg ? ` id="${String(arg)}"` : "";
+          const html = `<script${id} type="application/json">${jsonStr}</script>`;
+          const safe2 = new String(html);
+          safe2.__safe__ = true;
+          return safe2;
+        }
+      }
+    }
+    if (argsLen === 2) {
+      const arg1 = this.eval(node.args[0], ctx);
+      const arg2 = this.eval(node.args[1], ctx);
+      switch (filterName) {
+        case "replace": {
+          const str = String(value ?? "");
+          return str.replaceAll(String(arg1), String(arg2));
+        }
+        case "batch": {
+          if (!Array.isArray(value))
+            return [[value]];
+          const size = Number(arg1) || 1;
+          const fillWith = arg2;
+          const result = [];
+          for (let i = 0;i < value.length; i += size) {
+            const batch2 = value.slice(i, i + size);
+            while (fillWith !== null && batch2.length < size)
+              batch2.push(fillWith);
+            result.push(batch2);
+          }
+          return result;
+        }
+        case "sum": {
+          if (!Array.isArray(value))
+            return Number(arg2) || 0;
+          let total = Number(arg2) || 0;
+          for (let i = 0;i < value.length; i++) {
+            total += Number(arg1 ? value[i][arg1] : value[i]) || 0;
+          }
+          return total;
+        }
+        case "max": {
+          if (!Array.isArray(value) || value.length === 0)
+            return arg2;
+          if (arg1) {
+            let maxItem = value[0];
+            for (let i = 1;i < value.length; i++) {
+              if (value[i][arg1] > maxItem[arg1])
+                maxItem = value[i];
+            }
+            return maxItem;
+          }
+          let maxVal = value[0];
+          for (let i = 1;i < value.length; i++) {
+            if (value[i] > maxVal)
+              maxVal = value[i];
+          }
+          return maxVal;
+        }
+        case "min": {
+          if (!Array.isArray(value) || value.length === 0)
+            return arg2;
+          if (arg1) {
+            let minItem = value[0];
+            for (let i = 1;i < value.length; i++) {
+              if (value[i][arg1] < minItem[arg1])
+                minItem = value[i];
+            }
+            return minItem;
+          }
+          let minVal = value[0];
+          for (let i = 1;i < value.length; i++) {
+            if (value[i] < minVal)
+              minVal = value[i];
+          }
+          return minVal;
+        }
+        case "timesince": {
+          const d = value instanceof Date ? value : new Date(value);
+          const now = arg1 instanceof Date ? arg1 : new Date(arg1 ?? Date.now());
+          const diff = (now.getTime() - d.getTime()) / 1000;
+          const intervals = [
+            [31536000, "year", "years"],
+            [2592000, "month", "months"],
+            [604800, "week", "weeks"],
+            [86400, "day", "days"],
+            [3600, "hour", "hours"],
+            [60, "minute", "minutes"]
+          ];
+          for (const [secs, sing, plur] of intervals) {
+            const count = Math.floor(diff / secs);
+            if (count >= 1)
+              return `${count} ${count === 1 ? sing : plur}`;
+          }
+          return "just now";
+        }
+        case "timeuntil": {
+          const d = value instanceof Date ? value : new Date(value);
+          const now = arg1 instanceof Date ? arg1 : new Date(arg1 ?? Date.now());
+          const diff = (d.getTime() - now.getTime()) / 1000;
+          const intervals = [
+            [31536000, "year", "years"],
+            [2592000, "month", "months"],
+            [604800, "week", "weeks"],
+            [86400, "day", "days"],
+            [3600, "hour", "hours"],
+            [60, "minute", "minutes"]
+          ];
+          for (const [secs, sing, plur] of intervals) {
+            const count = Math.floor(diff / secs);
+            if (count >= 1)
+              return `${count} ${count === 1 ? sing : plur}`;
+          }
+          return "now";
+        }
+      }
+    }
     const args = [];
-    for (let i = 0;i < node.args.length; i++) {
+    for (let i = 0;i < argsLen; i++) {
       args.push(this.eval(node.args[i], ctx));
     }
     const kwargs = this.evalObjectSync(node.kwargs, ctx);
-    const filter = this.filters[node.filter];
+    const filter = this.filters[filterName];
     if (!filter) {
       const available = Object.keys(this.filters);
-      const suggestion = findSimilar(node.filter, available);
-      throw new TemplateRuntimeError(`Unknown filter '${node.filter}'`, {
+      const suggestion = findSimilar(filterName, available);
+      throw new TemplateRuntimeError(`Unknown filter '${filterName}'`, {
         line: node.line,
         column: node.column,
         source: this.source,
@@ -5284,473 +5717,516 @@ function endDebugCollection() {
 
 // src/debug/panel.ts
 var DEFAULT_OPTIONS = {
-  position: "bottom-right",
-  collapsed: true,
-  dark: true,
-  width: 420
+  position: "bottom",
+  height: 300,
+  width: 400,
+  open: false,
+  dark: true
 };
 function generateDebugPanel(data, options = {}) {
   const opts = { ...DEFAULT_OPTIONS, ...options };
-  const id = `binja-debug-${Date.now()}`;
-  const colors2 = opts.dark ? darkTheme : lightTheme;
+  const id = `binja-dbg-${Date.now()}`;
+  const c2 = opts.dark ? darkTheme : lightTheme;
   return `
 <!-- Binja Debug Panel -->
-<div id="${id}" class="binja-debugger" data-theme="${opts.dark ? "dark" : "light"}">
-<style>${generateStyles(id, colors2, opts)}</style>
-${generateToggle(id, data, colors2)}
-${generatePanel(id, data, colors2, opts)}
-<script>${generateScript(id)}</script>
+<div id="${id}" class="binja-devtools" data-position="${opts.position}" data-open="${opts.open}">
+<style>${generateStyles(id, c2, opts)}</style>
+${generateHTML(id, data, c2, opts)}
+<script>${generateScript(id, data, opts)}</script>
 </div>
 <!-- /Binja Debug Panel -->
 `;
 }
 var darkTheme = {
-  bg: "#0f0f0f",
-  bgSecondary: "#1a1a1a",
-  bgTertiary: "#242424",
-  border: "#2a2a2a",
-  borderLight: "#333",
-  text: "#e5e5e5",
-  textSecondary: "#a0a0a0",
-  textMuted: "#666",
-  accent: "#3b82f6",
-  accentHover: "#2563eb",
-  success: "#22c55e",
-  warning: "#eab308",
-  error: "#ef4444",
-  info: "#06b6d4"
+  bg: "#1e1e1e",
+  bgPanel: "#252526",
+  bgHover: "#2a2d2e",
+  bgActive: "#37373d",
+  border: "#3c3c3c",
+  text: "#cccccc",
+  textSecondary: "#969696",
+  textMuted: "#6e6e6e",
+  accent: "#0078d4",
+  accentHover: "#1c86d8",
+  success: "#4ec9b0",
+  warning: "#dcdcaa",
+  error: "#f14c4c",
+  info: "#75beff",
+  string: "#ce9178",
+  number: "#b5cea8",
+  keyword: "#569cd6"
 };
 var lightTheme = {
-  bg: "#ffffff",
-  bgSecondary: "#f8f9fa",
-  bgTertiary: "#f1f3f4",
-  border: "#e5e7eb",
-  borderLight: "#d1d5db",
-  text: "#111827",
-  textSecondary: "#4b5563",
-  textMuted: "#9ca3af",
-  accent: "#2563eb",
-  accentHover: "#1d4ed8",
-  success: "#16a34a",
-  warning: "#ca8a04",
-  error: "#dc2626",
-  info: "#0891b2"
+  bg: "#f3f3f3",
+  bgPanel: "#ffffff",
+  bgHover: "#e8e8e8",
+  bgActive: "#d4d4d4",
+  border: "#d4d4d4",
+  text: "#1e1e1e",
+  textSecondary: "#616161",
+  textMuted: "#a0a0a0",
+  accent: "#0078d4",
+  accentHover: "#106ebe",
+  success: "#16825d",
+  warning: "#bf8803",
+  error: "#cd3131",
+  info: "#0078d4",
+  string: "#a31515",
+  number: "#098658",
+  keyword: "#0000ff"
 };
 function generateStyles(id, c2, opts) {
-  const pos = getPosition(opts.position);
   return `
-#${id} { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; font-size: 13px; line-height: 1.5; position: fixed; ${pos} z-index: 2147483647; }
+#${id} { --bg: ${c2.bg}; --bg-panel: ${c2.bgPanel}; --bg-hover: ${c2.bgHover}; --bg-active: ${c2.bgActive}; --border: ${c2.border}; --text: ${c2.text}; --text-secondary: ${c2.textSecondary}; --text-muted: ${c2.textMuted}; --accent: ${c2.accent}; --success: ${c2.success}; --warning: ${c2.warning}; --error: ${c2.error}; --string: ${c2.string}; --number: ${c2.number}; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; font-size: 12px; line-height: 1.4; color: var(--text); }
 #${id} * { box-sizing: border-box; margin: 0; padding: 0; }
-#${id} .dbg-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: ${c2.bg}; border: 1px solid ${c2.border}; border-radius: 8px; color: ${c2.text}; cursor: pointer; font-size: 12px; font-weight: 500; box-shadow: 0 4px 12px rgba(0,0,0,0.15); transition: all 0.2s ease; }
-#${id} .dbg-toggle:hover { border-color: ${c2.accent}; box-shadow: 0 4px 16px rgba(0,0,0,0.2); }
-#${id} .dbg-toggle svg { width: 16px; height: 16px; }
-#${id} .dbg-toggle .dbg-time { font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace; font-size: 11px; padding: 2px 8px; background: ${c2.bgTertiary}; border-radius: 4px; color: ${c2.success}; }
-#${id} .dbg-panel { display: none; width: ${opts.width}px; max-height: 85vh; background: ${c2.bg}; border: 1px solid ${c2.border}; border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,0.24); overflow: hidden; margin-top: 8px; }
-#${id} .dbg-panel.open { display: block; }
-#${id} .dbg-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: ${c2.bgSecondary}; border-bottom: 1px solid ${c2.border}; }
-#${id} .dbg-logo { display: flex; align-items: center; gap: 10px; font-weight: 600; color: ${c2.text}; }
-#${id} .dbg-logo svg { width: 20px; height: 20px; color: ${c2.accent}; }
-#${id} .dbg-meta { display: flex; align-items: center; gap: 12px; }
-#${id} .dbg-badge { font-family: 'SF Mono', Monaco, monospace; font-size: 11px; padding: 3px 10px; border-radius: 4px; font-weight: 500; }
-#${id} .dbg-badge.time { background: rgba(34,197,94,0.1); color: ${c2.success}; }
-#${id} .dbg-badge.mode { background: rgba(59,130,246,0.1); color: ${c2.accent}; }
-#${id} .dbg-close { background: none; border: none; color: ${c2.textMuted}; cursor: pointer; padding: 4px; border-radius: 4px; display: flex; }
-#${id} .dbg-close:hover { background: ${c2.bgTertiary}; color: ${c2.text}; }
-#${id} .dbg-close svg { width: 18px; height: 18px; }
-#${id} .dbg-body { max-height: calc(85vh - 52px); overflow-y: auto; }
-#${id} .dbg-section { border-bottom: 1px solid ${c2.border}; }
-#${id} .dbg-section:last-child { border-bottom: none; }
-#${id} .dbg-section-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; cursor: pointer; user-select: none; transition: background 0.15s; }
-#${id} .dbg-section-header:hover { background: ${c2.bgSecondary}; }
-#${id} .dbg-section-title { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: ${c2.textSecondary}; }
-#${id} .dbg-section-title svg { width: 14px; height: 14px; opacity: 0.7; }
-#${id} .dbg-section-meta { font-size: 11px; color: ${c2.textMuted}; font-family: 'SF Mono', Monaco, monospace; }
-#${id} .dbg-section-content { display: none; padding: 12px 16px; background: ${c2.bgSecondary}; }
-#${id} .dbg-section.open .dbg-section-content { display: block; }
-#${id} .dbg-section .dbg-chevron { transition: transform 0.2s; color: ${c2.textMuted}; }
-#${id} .dbg-section.open .dbg-chevron { transform: rotate(90deg); }
-#${id} .dbg-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid ${c2.border}; }
-#${id} .dbg-row:last-child { border-bottom: none; }
-#${id} .dbg-label { color: ${c2.textSecondary}; font-size: 12px; }
-#${id} .dbg-value { color: ${c2.text}; font-family: 'SF Mono', Monaco, monospace; font-size: 12px; text-align: right; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-#${id} .dbg-bar { height: 3px; background: ${c2.bgTertiary}; border-radius: 2px; margin-top: 4px; overflow: hidden; }
-#${id} .dbg-bar-fill { height: 100%; border-radius: 2px; transition: width 0.3s ease; }
-#${id} .dbg-bar-fill.lexer { background: ${c2.info}; }
-#${id} .dbg-bar-fill.parser { background: ${c2.warning}; }
-#${id} .dbg-bar-fill.render { background: ${c2.success}; }
-#${id} .dbg-templates { display: flex; flex-direction: column; gap: 6px; }
-#${id} .dbg-template { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: ${c2.bg}; border-radius: 6px; font-size: 12px; }
-#${id} .dbg-template-icon { width: 16px; height: 16px; color: ${c2.textMuted}; flex-shrink: 0; }
-#${id} .dbg-template-name { color: ${c2.text}; font-family: 'SF Mono', Monaco, monospace; }
-#${id} .dbg-template-tag { font-size: 10px; padding: 2px 6px; border-radius: 3px; font-weight: 500; text-transform: uppercase; }
-#${id} .dbg-template-tag.root { background: rgba(59,130,246,0.15); color: ${c2.accent}; }
-#${id} .dbg-template-tag.extends { background: rgba(168,85,247,0.15); color: #a855f7; }
-#${id} .dbg-template-tag.include { background: rgba(34,197,94,0.15); color: ${c2.success}; }
-#${id} .dbg-ctx-grid { display: flex; flex-direction: column; gap: 4px; }
-#${id} .dbg-ctx-item { background: ${c2.bg}; border-radius: 6px; overflow: hidden; }
-#${id} .dbg-ctx-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; cursor: default; }
-#${id} .dbg-ctx-row.expandable { cursor: pointer; }
-#${id} .dbg-ctx-row.expandable:hover { background: ${c2.bgTertiary}; }
-#${id} .dbg-ctx-key { display: flex; align-items: center; gap: 6px; }
-#${id} .dbg-ctx-arrow { width: 12px; height: 12px; color: ${c2.textMuted}; transition: transform 0.15s; flex-shrink: 0; }
-#${id} .dbg-ctx-item.open > .dbg-ctx-row .dbg-ctx-arrow { transform: rotate(90deg); }
-#${id} .dbg-ctx-name { color: ${c2.text}; font-family: 'SF Mono', Monaco, monospace; font-size: 12px; }
-#${id} .dbg-ctx-type { font-size: 10px; color: ${c2.accent}; background: rgba(59,130,246,0.1); padding: 1px 5px; border-radius: 3px; }
-#${id} .dbg-ctx-preview { color: ${c2.textSecondary}; font-family: 'SF Mono', Monaco, monospace; font-size: 11px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-#${id} .dbg-ctx-children { display: none; padding-left: 16px; border-left: 1px solid ${c2.border}; margin-left: 10px; }
-#${id} .dbg-ctx-item.open > .dbg-ctx-children { display: block; }
-#${id} .dbg-ctx-children .dbg-ctx-item { background: transparent; }
-#${id} .dbg-ctx-children .dbg-ctx-row { padding: 4px 8px; }
-#${id} .dbg-filters { display: flex; flex-wrap: wrap; gap: 6px; }
-#${id} .dbg-filter { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: ${c2.bg}; border-radius: 5px; font-size: 12px; font-family: 'SF Mono', Monaco, monospace; color: ${c2.text}; }
-#${id} .dbg-filter-count { font-size: 10px; color: ${c2.accent}; font-weight: 600; }
-#${id} .dbg-cache { display: flex; gap: 16px; }
-#${id} .dbg-cache-stat { flex: 1; padding: 12px; background: ${c2.bg}; border-radius: 6px; text-align: center; }
-#${id} .dbg-cache-num { font-size: 24px; font-weight: 600; font-family: 'SF Mono', Monaco, monospace; }
-#${id} .dbg-cache-num.hit { color: ${c2.success}; }
-#${id} .dbg-cache-num.miss { color: ${c2.error}; }
-#${id} .dbg-cache-label { font-size: 11px; color: ${c2.textMuted}; margin-top: 4px; }
-#${id} .dbg-warnings { display: flex; flex-direction: column; gap: 6px; }
-#${id} .dbg-warning { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; background: rgba(234,179,8,0.1); border-radius: 6px; border-left: 3px solid ${c2.warning}; }
-#${id} .dbg-warning-icon { color: ${c2.warning}; flex-shrink: 0; margin-top: 1px; }
-#${id} .dbg-warning-text { color: ${c2.text}; font-size: 12px; }
-#${id} .dbg-queries { display: flex; flex-direction: column; gap: 8px; }
-#${id} .dbg-query { background: ${c2.bg}; border-radius: 6px; overflow: hidden; }
-#${id} .dbg-query.n1 { border-left: 3px solid ${c2.error}; }
-#${id} .dbg-query.slow { border-left: 3px solid ${c2.warning}; }
-#${id} .dbg-query-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; gap: 8px; }
-#${id} .dbg-query-sql { flex: 1; font-family: 'SF Mono', Monaco, monospace; font-size: 11px; color: ${c2.text}; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-#${id} .dbg-query-meta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
-#${id} .dbg-query-time { font-family: 'SF Mono', Monaco, monospace; font-size: 10px; padding: 2px 6px; border-radius: 3px; background: ${c2.bgTertiary}; }
-#${id} .dbg-query-time.slow { background: rgba(234,179,8,0.15); color: ${c2.warning}; }
-#${id} .dbg-query-rows { font-size: 10px; color: ${c2.textMuted}; }
-#${id} .dbg-query-source { font-size: 9px; padding: 2px 5px; border-radius: 3px; background: rgba(59,130,246,0.1); color: ${c2.accent}; text-transform: uppercase; }
-#${id} .dbg-query-badge { font-size: 9px; padding: 2px 5px; border-radius: 3px; font-weight: 600; }
-#${id} .dbg-query-badge.n1 { background: rgba(239,68,68,0.15); color: ${c2.error}; }
-#${id} .dbg-query-stats { display: flex; gap: 12px; margin-bottom: 12px; padding: 10px; background: ${c2.bg}; border-radius: 6px; }
-#${id} .dbg-query-stat { flex: 1; text-align: center; }
-#${id} .dbg-query-stat-num { font-size: 18px; font-weight: 600; font-family: 'SF Mono', Monaco, monospace; color: ${c2.text}; }
-#${id} .dbg-query-stat-num.warning { color: ${c2.warning}; }
-#${id} .dbg-query-stat-num.error { color: ${c2.error}; }
-#${id} .dbg-query-stat-label { font-size: 10px; color: ${c2.textMuted}; margin-top: 2px; }
+
+/* Toggle Button */
+#${id} .devtools-toggle { position: fixed; bottom: 10px; right: 10px; z-index: 2147483646; display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); cursor: pointer; font-size: 11px; font-weight: 500; box-shadow: 0 2px 8px rgba(0,0,0,0.2); transition: all 0.15s; }
+#${id} .devtools-toggle:hover { background: var(--bg-hover); border-color: var(--accent); }
+#${id} .devtools-toggle svg { width: 14px; height: 14px; color: var(--accent); }
+#${id} .devtools-toggle .badge { padding: 2px 6px; background: var(--accent); color: #fff; border-radius: 3px; font-size: 10px; }
+#${id}[data-open="true"] .devtools-toggle { display: none; }
+
+/* Panel Container */
+#${id} .devtools-panel { display: none; position: fixed; z-index: 2147483647; background: var(--bg); border: 1px solid var(--border); box-shadow: 0 -2px 12px rgba(0,0,0,0.3); }
+#${id}[data-open="true"] .devtools-panel { display: flex; flex-direction: column; }
+#${id}[data-position="bottom"] .devtools-panel { left: 0; right: 0; bottom: 0; height: ${opts.height}px; border-left: none; border-right: none; border-bottom: none; }
+#${id}[data-position="right"] .devtools-panel { top: 0; right: 0; bottom: 0; width: ${opts.width}px; border-top: none; border-right: none; border-bottom: none; }
+#${id}[data-position="popup"] .devtools-panel { bottom: 50px; right: 20px; width: 700px; height: 500px; border-radius: 8px; }
+
+/* Resize Handle */
+#${id} .devtools-resize { position: absolute; background: transparent; }
+#${id}[data-position="bottom"] .devtools-resize { top: 0; left: 0; right: 0; height: 4px; cursor: ns-resize; }
+#${id}[data-position="right"] .devtools-resize { top: 0; left: 0; bottom: 0; width: 4px; cursor: ew-resize; }
+#${id} .devtools-resize:hover { background: var(--accent); }
+
+/* Toolbar */
+#${id} .devtools-toolbar { display: flex; align-items: center; justify-content: space-between; height: 30px; padding: 0 8px; background: var(--bg-panel); border-bottom: 1px solid var(--border); flex-shrink: 0; }
+#${id} .devtools-tabs { display: flex; height: 100%; }
+#${id} .devtools-tab { display: flex; align-items: center; gap: 4px; padding: 0 12px; border: none; background: none; color: var(--text-secondary); font-size: 11px; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.1s; }
+#${id} .devtools-tab:hover { color: var(--text); background: var(--bg-hover); }
+#${id} .devtools-tab.active { color: var(--text); border-bottom-color: var(--accent); }
+#${id} .devtools-tab svg { width: 12px; height: 12px; opacity: 0.7; }
+#${id} .devtools-tab .count { margin-left: 4px; padding: 1px 5px; background: var(--bg-active); border-radius: 8px; font-size: 10px; }
+#${id} .devtools-tab .count.warn { background: rgba(241,76,76,0.2); color: var(--error); }
+#${id} .devtools-actions { display: flex; align-items: center; gap: 4px; }
+#${id} .devtools-btn { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: none; background: none; color: var(--text-secondary); cursor: pointer; border-radius: 3px; }
+#${id} .devtools-btn:hover { background: var(--bg-hover); color: var(--text); }
+#${id} .devtools-btn svg { width: 14px; height: 14px; }
+
+/* Content Area */
+#${id} .devtools-content { flex: 1; overflow: hidden; }
+#${id} .devtools-pane { display: none; height: 100%; overflow: auto; padding: 8px; }
+#${id} .devtools-pane.active { display: block; }
+
+/* Performance Tab */
+#${id} .perf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 12px; }
+#${id} .perf-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 4px; padding: 10px; text-align: center; }
+#${id} .perf-card-value { font-size: 20px; font-weight: 600; font-family: 'SF Mono', Monaco, monospace; color: var(--success); }
+#${id} .perf-card-label { font-size: 10px; color: var(--text-muted); margin-top: 4px; text-transform: uppercase; }
+#${id} .perf-breakdown { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
+#${id} .perf-row { display: flex; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--border); }
+#${id} .perf-row:last-child { border-bottom: none; }
+#${id} .perf-row-label { flex: 1; font-size: 11px; color: var(--text-secondary); }
+#${id} .perf-row-value { font-family: 'SF Mono', Monaco, monospace; font-size: 11px; min-width: 60px; text-align: right; }
+#${id} .perf-row-bar { flex: 2; height: 4px; background: var(--bg-active); border-radius: 2px; margin: 0 12px; overflow: hidden; }
+#${id} .perf-row-fill { height: 100%; border-radius: 2px; }
+#${id} .perf-row-fill.lexer { background: ${c2.info}; }
+#${id} .perf-row-fill.parser { background: ${c2.warning}; }
+#${id} .perf-row-fill.render { background: ${c2.success}; }
+
+/* Context Tab - Tree View */
+#${id} .tree { font-family: 'SF Mono', Monaco, Consolas, monospace; font-size: 11px; }
+#${id} .tree-item { }
+#${id} .tree-row { display: flex; align-items: center; padding: 2px 4px; cursor: default; border-radius: 2px; }
+#${id} .tree-row:hover { background: var(--bg-hover); }
+#${id} .tree-row.expandable { cursor: pointer; }
+#${id} .tree-arrow { width: 12px; height: 12px; color: var(--text-muted); transition: transform 0.1s; flex-shrink: 0; }
+#${id} .tree-item.open > .tree-row .tree-arrow { transform: rotate(90deg); }
+#${id} .tree-key { color: var(--keyword); margin-right: 4px; }
+#${id} .tree-colon { color: var(--text-muted); margin-right: 6px; }
+#${id} .tree-value { color: var(--text); }
+#${id} .tree-value.string { color: var(--string); }
+#${id} .tree-value.number { color: var(--number); }
+#${id} .tree-value.null { color: var(--text-muted); font-style: italic; }
+#${id} .tree-type { color: var(--text-muted); margin-left: 6px; font-size: 10px; }
+#${id} .tree-children { display: none; padding-left: 16px; }
+#${id} .tree-item.open > .tree-children { display: block; }
+
+/* Templates Tab */
+#${id} .template-list { display: flex; flex-direction: column; gap: 4px; }
+#${id} .template-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 4px; }
+#${id} .template-icon { width: 14px; height: 14px; color: var(--text-muted); }
+#${id} .template-name { font-family: 'SF Mono', Monaco, monospace; font-size: 11px; }
+#${id} .template-badge { font-size: 9px; padding: 2px 6px; border-radius: 3px; text-transform: uppercase; font-weight: 500; }
+#${id} .template-badge.root { background: rgba(0,120,212,0.15); color: var(--accent); }
+#${id} .template-badge.extends { background: rgba(156,86,246,0.15); color: #9c56f6; }
+#${id} .template-badge.include { background: rgba(78,201,176,0.15); color: var(--success); }
+
+/* Queries Tab */
+#${id} .queries-stats { display: flex; gap: 16px; padding: 8px 12px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 4px; margin-bottom: 8px; }
+#${id} .queries-stat { text-align: center; }
+#${id} .queries-stat-value { font-size: 16px; font-weight: 600; font-family: 'SF Mono', Monaco, monospace; }
+#${id} .queries-stat-value.warn { color: var(--warning); }
+#${id} .queries-stat-value.error { color: var(--error); }
+#${id} .queries-stat-label { font-size: 9px; color: var(--text-muted); text-transform: uppercase; }
+#${id} .query-list { display: flex; flex-direction: column; gap: 4px; }
+#${id} .query-item { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
+#${id} .query-item.n1 { border-left: 3px solid var(--error); }
+#${id} .query-item.slow { border-left: 3px solid var(--warning); }
+#${id} .query-header { display: flex; align-items: center; gap: 8px; padding: 6px 10px; }
+#${id} .query-sql { flex: 1; font-family: 'SF Mono', Monaco, monospace; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
+#${id} .query-meta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
+#${id} .query-badge { font-size: 9px; padding: 2px 5px; border-radius: 3px; font-weight: 600; }
+#${id} .query-badge.n1 { background: rgba(241,76,76,0.15); color: var(--error); }
+#${id} .query-source { font-size: 9px; padding: 2px 5px; border-radius: 3px; background: var(--bg-active); color: var(--text-muted); text-transform: uppercase; }
+#${id} .query-time { font-family: 'SF Mono', Monaco, monospace; font-size: 10px; color: var(--text-secondary); }
+#${id} .query-time.slow { color: var(--warning); }
+#${id} .query-rows { font-size: 10px; color: var(--text-muted); }
+
+/* Filters Tab */
+#${id} .filter-grid { display: flex; flex-wrap: wrap; gap: 6px; }
+#${id} .filter-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 4px; font-family: 'SF Mono', Monaco, monospace; font-size: 11px; }
+#${id} .filter-count { color: var(--accent); font-weight: 600; font-size: 10px; }
+
+/* Cache Tab */
+#${id} .cache-stats { display: flex; gap: 20px; }
+#${id} .cache-stat { flex: 1; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 4px; padding: 16px; text-align: center; }
+#${id} .cache-value { font-size: 32px; font-weight: 600; font-family: 'SF Mono', Monaco, monospace; }
+#${id} .cache-value.hit { color: var(--success); }
+#${id} .cache-value.miss { color: var(--error); }
+#${id} .cache-label { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
+
+/* Warnings Tab */
+#${id} .warning-list { display: flex; flex-direction: column; gap: 6px; }
+#${id} .warning-item { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; background: rgba(241,76,76,0.08); border: 1px solid rgba(241,76,76,0.2); border-radius: 4px; }
+#${id} .warning-icon { color: var(--error); flex-shrink: 0; width: 14px; height: 14px; }
+#${id} .warning-text { font-size: 11px; color: var(--text); }
+
+/* Empty State */
+#${id} .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--text-muted); font-size: 12px; }
+#${id} .empty-state svg { width: 32px; height: 32px; margin-bottom: 8px; opacity: 0.5; }
 `;
 }
-function getPosition(pos) {
-  switch (pos) {
-    case "bottom-left":
-      return "bottom: 16px; left: 16px;";
-    case "top-right":
-      return "top: 16px; right: 16px;";
-    case "top-left":
-      return "top: 16px; left: 16px;";
-    default:
-      return "bottom: 16px; right: 16px;";
-  }
-}
 var icons = {
   logo: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>`,
   close: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>`,
-  chevron: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>`,
+  minimize: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14"/></svg>`,
+  dock: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 15h18"/></svg>`,
+  dockRight: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M15 3v18"/></svg>`,
+  popup: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 3v6h6"/></svg>`,
+  arrow: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>`,
   perf: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>`,
-  template: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6"/></svg>`,
   context: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/></svg>`,
+  template: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6"/></svg>`,
   filter: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>`,
+  database: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>`,
   cache: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a10 10 0 1010 10H12V2z"/><path d="M12 2a10 10 0 00-8.66 15"/></svg>`,
-  warning: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>`,
-  file: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9z"/></svg>`,
-  database: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>`
+  warning: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>`
 };
-function generateToggle(id, data, c2) {
+function generateHTML(id, data, c2, opts) {
   const time2 = (data.totalTime || 0).toFixed(1);
+  const queryCount = data.queries?.length || 0;
+  const hasWarnings = data.warnings.length > 0 || data.queryStats?.n1Count > 0;
+  const tabs = [
+    { id: "perf", icon: icons.perf, label: "Performance", count: `${time2}ms` },
+    { id: "context", icon: icons.context, label: "Context", count: Object.keys(data.contextSnapshot).length || null },
+    { id: "templates", icon: icons.template, label: "Templates", count: data.templateChain.length || null },
+    { id: "filters", icon: icons.filter, label: "Filters", count: data.filtersUsed.size || null },
+    { id: "queries", icon: icons.database, label: "Queries", count: queryCount || null, warn: data.queryStats?.n1Count > 0 },
+    { id: "cache", icon: icons.cache, label: "Cache", count: data.cacheHits + data.cacheMisses || null },
+    { id: "warnings", icon: icons.warning, label: "Warnings", count: data.warnings.length || null, warn: hasWarnings }
+  ];
+  const tabsHtml = tabs.map((t, i) => {
+    const countHtml = t.count !== null ? `<span class="count${t.warn ? " warn" : ""}">${t.count}</span>` : "";
+    return `<button class="devtools-tab${i === 0 ? " active" : ""}" data-tab="${t.id}">${t.icon}${t.label}${countHtml}</button>`;
+  }).join("");
   return `
-<button class="dbg-toggle" onclick="document.querySelector('#${id} .dbg-panel').classList.add('open');this.style.display='none'">
+<button class="devtools-toggle" onclick="document.getElementById('${id}').dataset.open='true'">
   ${icons.logo}
   <span>Binja</span>
-  <span class="dbg-time">${time2}ms</span>
-</button>`;
-}
-function generatePanel(id, data, c2, opts) {
-  const time2 = (data.totalTime || 0).toFixed(2);
-  const mode = data.mode === "aot" ? "AOT" : "Runtime";
-  return `
-<div class="dbg-panel">
-  <div class="dbg-header">
-    <div class="dbg-logo">${icons.logo} Binja Debugger</div>
-    <div class="dbg-meta">
-      <span class="dbg-badge mode">${mode}</span>
-      <span class="dbg-badge time">${time2}ms</span>
-      <button class="dbg-close" onclick="document.querySelector('#${id} .dbg-panel').classList.remove('open');document.querySelector('#${id} .dbg-toggle').style.display='inline-flex'">${icons.close}</button>
+  <span class="badge">${time2}ms</span>
+</button>
+
+<div class="devtools-panel">
+  <div class="devtools-resize"></div>
+  <div class="devtools-toolbar">
+    <div class="devtools-tabs">${tabsHtml}</div>
+    <div class="devtools-actions">
+      <button class="devtools-btn" title="Dock to bottom" data-dock="bottom">${icons.dock}</button>
+      <button class="devtools-btn" title="Dock to right" data-dock="right">${icons.dockRight}</button>
+      <button class="devtools-btn" title="Popup" data-dock="popup">${icons.popup}</button>
+      <button class="devtools-btn" title="Close" onclick="document.getElementById('${id}').dataset.open='false'">${icons.close}</button>
     </div>
   </div>
-  <div class="dbg-body">
-    ${generatePerfSection(data)}
-    ${generateTemplatesSection(data)}
-    ${generateContextSection(data)}
-    ${generateFiltersSection(data)}
-    ${generateQueriesSection(data)}
-    ${generateCacheSection(data)}
-    ${generateWarningsSection(data)}
+  <div class="devtools-content">
+    ${generatePerfPane(data)}
+    ${generateContextPane(data)}
+    ${generateTemplatesPane(data)}
+    ${generateFiltersPane(data)}
+    ${generateQueriesPane(data)}
+    ${generateCachePane(data)}
+    ${generateWarningsPane(data)}
   </div>
 </div>`;
 }
-function generatePerfSection(data) {
+function generatePerfPane(data) {
   const total = data.totalTime || 0.01;
   const lexer = data.lexerTime || 0;
   const parser = data.parserTime || 0;
   const render = data.renderTime || 0;
+  const mode = data.mode === "aot" ? "AOT" : "Runtime";
   return `
-<div class="dbg-section open">
-  <div class="dbg-section-header" onclick="this.parentElement.classList.toggle('open')">
-    <span class="dbg-section-title">${icons.perf} Performance</span>
-    <span class="dbg-chevron">${icons.chevron}</span>
-  </div>
-  <div class="dbg-section-content">
-    <div class="dbg-row">
-      <span class="dbg-label">Lexer</span>
-      <span class="dbg-value">${lexer.toFixed(2)}ms</span>
+<div class="devtools-pane active" data-pane="perf">
+  <div class="perf-grid">
+    <div class="perf-card">
+      <div class="perf-card-value">${total.toFixed(2)}ms</div>
+      <div class="perf-card-label">Total Time</div>
     </div>
-    <div class="dbg-bar"><div class="dbg-bar-fill lexer" style="width:${lexer / total * 100}%"></div></div>
-    <div class="dbg-row">
-      <span class="dbg-label">Parser</span>
-      <span class="dbg-value">${parser.toFixed(2)}ms</span>
+    <div class="perf-card">
+      <div class="perf-card-value" style="color:var(--accent)">${mode}</div>
+      <div class="perf-card-label">Mode</div>
     </div>
-    <div class="dbg-bar"><div class="dbg-bar-fill parser" style="width:${parser / total * 100}%"></div></div>
-    <div class="dbg-row">
-      <span class="dbg-label">Render</span>
-      <span class="dbg-value">${render.toFixed(2)}ms</span>
+    <div class="perf-card">
+      <div class="perf-card-value">${data.templateChain.length}</div>
+      <div class="perf-card-label">Templates</div>
     </div>
-    <div class="dbg-bar"><div class="dbg-bar-fill render" style="width:${render / total * 100}%"></div></div>
-    <div class="dbg-row" style="margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,0.1)">
-      <span class="dbg-label" style="font-weight:600">Total</span>
-      <span class="dbg-value" style="font-weight:600">${total.toFixed(2)}ms</span>
+    <div class="perf-card">
+      <div class="perf-card-value">${data.queries?.length || 0}</div>
+      <div class="perf-card-label">Queries</div>
     </div>
   </div>
-</div>`;
-}
-function generateTemplatesSection(data) {
-  if (data.templateChain.length === 0)
-    return "";
-  const templates = data.templateChain.map((t) => `
-    <div class="dbg-template">
-      ${icons.file}
-      <span class="dbg-template-name">${t.name}</span>
-      <span class="dbg-template-tag ${t.type}">${t.type}</span>
+  <div class="perf-breakdown">
+    <div class="perf-row">
+      <span class="perf-row-label">Lexer</span>
+      <div class="perf-row-bar"><div class="perf-row-fill lexer" style="width:${lexer / total * 100}%"></div></div>
+      <span class="perf-row-value">${lexer.toFixed(2)}ms</span>
+    </div>
+    <div class="perf-row">
+      <span class="perf-row-label">Parser</span>
+      <div class="perf-row-bar"><div class="perf-row-fill parser" style="width:${parser / total * 100}%"></div></div>
+      <span class="perf-row-value">${parser.toFixed(2)}ms</span>
+    </div>
+    <div class="perf-row">
+      <span class="perf-row-label">Render</span>
+      <div class="perf-row-bar"><div class="perf-row-fill render" style="width:${render / total * 100}%"></div></div>
+      <span class="perf-row-value">${render.toFixed(2)}ms</span>
     </div>
-  `).join("");
-  return `
-<div class="dbg-section">
-  <div class="dbg-section-header" onclick="this.parentElement.classList.toggle('open')">
-    <span class="dbg-section-title">${icons.template} Templates</span>
-    <span class="dbg-section-meta">${data.templateChain.length}</span>
-    <span class="dbg-chevron">${icons.chevron}</span>
-  </div>
-  <div class="dbg-section-content">
-    <div class="dbg-templates">${templates}</div>
   </div>
 </div>`;
 }
-function generateContextSection(data) {
+function generateContextPane(data) {
   const keys = Object.keys(data.contextSnapshot);
-  if (keys.length === 0)
-    return "";
-  const items2 = keys.map((key) => renderContextValue(key, data.contextSnapshot[key])).join("");
-  return `
-<div class="dbg-section">
-  <div class="dbg-section-header" onclick="this.parentElement.classList.toggle('open')">
-    <span class="dbg-section-title">${icons.context} Context</span>
-    <span class="dbg-section-meta">${keys.length} vars</span>
-    <span class="dbg-chevron">${icons.chevron}</span>
-  </div>
-  <div class="dbg-section-content">
-    <div class="dbg-ctx-grid">${items2}</div>
-  </div>
-</div>`;
-}
-function renderContextValue(key, ctx) {
-  const arrow = ctx.expandable ? `<svg class="dbg-ctx-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>` : "";
-  const expandableClass = ctx.expandable ? "expandable" : "";
-  const onClick = ctx.expandable ? `onclick="this.parentElement.classList.toggle('open')"` : "";
-  let children = "";
-  if (ctx.expandable && ctx.children) {
-    const childItems = Object.entries(ctx.children).map(([k, v]) => renderContextValue(k, v)).join("");
-    children = `<div class="dbg-ctx-children">${childItems}</div>`;
+  if (keys.length === 0) {
+    return `<div class="devtools-pane" data-pane="context"><div class="empty-state">${icons.context}<span>No context variables</span></div></div>`;
   }
-  return `
-  <div class="dbg-ctx-item">
-    <div class="dbg-ctx-row ${expandableClass}" ${onClick}>
-      <div class="dbg-ctx-key">
-        ${arrow}
-        <span class="dbg-ctx-name">${escapeHtml(key)}</span>
-        <span class="dbg-ctx-type">${ctx.type}</span>
-      </div>
-      <span class="dbg-ctx-preview">${escapeHtml(ctx.preview)}</span>
-    </div>
-    ${children}
-  </div>`;
+  const items2 = keys.map((key) => renderTreeItem(key, data.contextSnapshot[key])).join("");
+  return `<div class="devtools-pane" data-pane="context"><div class="tree">${items2}</div></div>`;
 }
-function generateFiltersSection(data) {
-  const filters = Array.from(data.filtersUsed.entries());
-  if (filters.length === 0)
-    return "";
-  const items2 = filters.map(([name, count]) => `<span class="dbg-filter">${name}<span class="dbg-filter-count">\xD7${count}</span></span>`).join("");
+function renderTreeItem(key, ctx) {
+  const hasChildren = ctx.expandable && ctx.children && Object.keys(ctx.children).length > 0;
+  const arrowHtml = hasChildren ? `<span class="tree-arrow">${icons.arrow}</span>` : '<span class="tree-arrow" style="visibility:hidden">${icons.arrow}</span>';
+  const expandableClass = hasChildren ? "expandable" : "";
+  const valueClass = getValueClass(ctx.type);
+  let childrenHtml = "";
+  if (hasChildren && ctx.children) {
+    childrenHtml = `<div class="tree-children">${Object.entries(ctx.children).map(([k, v]) => renderTreeItem(k, v)).join("")}</div>`;
+  }
   return `
-<div class="dbg-section">
-  <div class="dbg-section-header" onclick="this.parentElement.classList.toggle('open')">
-    <span class="dbg-section-title">${icons.filter} Filters</span>
-    <span class="dbg-section-meta">${filters.length}</span>
-    <span class="dbg-chevron">${icons.chevron}</span>
-  </div>
-  <div class="dbg-section-content">
-    <div class="dbg-filters">${items2}</div>
+<div class="tree-item">
+  <div class="tree-row ${expandableClass}">
+    ${arrowHtml}
+    <span class="tree-key">${escapeHtml(key)}</span>
+    <span class="tree-colon">:</span>
+    <span class="tree-value ${valueClass}">${escapeHtml(ctx.preview)}</span>
+    <span class="tree-type">${ctx.type}</span>
   </div>
+  ${childrenHtml}
 </div>`;
 }
-function generateCacheSection(data) {
-  const total = data.cacheHits + data.cacheMisses;
-  if (total === 0)
-    return "";
-  return `
-<div class="dbg-section">
-  <div class="dbg-section-header" onclick="this.parentElement.classList.toggle('open')">
-    <span class="dbg-section-title">${icons.cache} Cache</span>
-    <span class="dbg-section-meta">${(data.cacheHits / total * 100).toFixed(0)}% hit</span>
-    <span class="dbg-chevron">${icons.chevron}</span>
-  </div>
-  <div class="dbg-section-content">
-    <div class="dbg-cache">
-      <div class="dbg-cache-stat">
-        <div class="dbg-cache-num hit">${data.cacheHits}</div>
-        <div class="dbg-cache-label">Cache Hits</div>
-      </div>
-      <div class="dbg-cache-stat">
-        <div class="dbg-cache-num miss">${data.cacheMisses}</div>
-        <div class="dbg-cache-label">Cache Misses</div>
-      </div>
-    </div>
-  </div>
-</div>`;
+function getValueClass(type) {
+  if (type === "string")
+    return "string";
+  if (type === "number" || type === "integer" || type === "float")
+    return "number";
+  if (type === "null" || type === "undefined")
+    return "null";
+  return "";
 }
-function generateWarningsSection(data) {
-  if (data.warnings.length === 0)
-    return "";
-  const items2 = data.warnings.map((w) => `
-    <div class="dbg-warning">
-      ${icons.warning}
-      <span class="dbg-warning-text">${escapeHtml(w)}</span>
+function generateTemplatesPane(data) {
+  if (data.templateChain.length === 0) {
+    return `<div class="devtools-pane" data-pane="templates"><div class="empty-state">${icons.template}<span>No templates loaded</span></div></div>`;
+  }
+  const items2 = data.templateChain.map((t) => `
+    <div class="template-item">
+      <span class="template-icon">${icons.template}</span>
+      <span class="template-name">${escapeHtml(t.name)}</span>
+      <span class="template-badge ${t.type}">${t.type}</span>
     </div>
   `).join("");
-  return `
-<div class="dbg-section open">
-  <div class="dbg-section-header" onclick="this.parentElement.classList.toggle('open')">
-    <span class="dbg-section-title">${icons.warning} Warnings</span>
-    <span class="dbg-section-meta" style="color:#eab308">${data.warnings.length}</span>
-    <span class="dbg-chevron">${icons.chevron}</span>
-  </div>
-  <div class="dbg-section-content">
-    <div class="dbg-warnings">${items2}</div>
-  </div>
-</div>`;
+  return `<div class="devtools-pane" data-pane="templates"><div class="template-list">${items2}</div></div>`;
 }
-function generateQueriesSection(data) {
-  if (data.queries.length === 0)
-    return "";
+function generateFiltersPane(data) {
+  const filters = Array.from(data.filtersUsed.entries());
+  if (filters.length === 0) {
+    return `<div class="devtools-pane" data-pane="filters"><div class="empty-state">${icons.filter}<span>No filters used</span></div></div>`;
+  }
+  const items2 = filters.map(([name, count]) => `
+    <span class="filter-chip">${escapeHtml(name)}<span class="filter-count">\xD7${count}</span></span>
+  `).join("");
+  return `<div class="devtools-pane" data-pane="filters"><div class="filter-grid">${items2}</div></div>`;
+}
+function generateQueriesPane(data) {
+  if (!data.queries || data.queries.length === 0) {
+    return `<div class="devtools-pane" data-pane="queries"><div class="empty-state">${icons.database}<span>No queries recorded</span></div></div>`;
+  }
   const stats = data.queryStats;
-  const hasIssues = stats.slowCount > 0 || stats.n1Count > 0;
   const statsHtml = `
-    <div class="dbg-query-stats">
-      <div class="dbg-query-stat">
-        <div class="dbg-query-stat-num">${stats.count}</div>
-        <div class="dbg-query-stat-label">Queries</div>
+    <div class="queries-stats">
+      <div class="queries-stat">
+        <div class="queries-stat-value">${stats.count}</div>
+        <div class="queries-stat-label">Queries</div>
       </div>
-      <div class="dbg-query-stat">
-        <div class="dbg-query-stat-num">${stats.totalDuration.toFixed(1)}ms</div>
-        <div class="dbg-query-stat-label">Total Time</div>
+      <div class="queries-stat">
+        <div class="queries-stat-value">${stats.totalDuration.toFixed(1)}ms</div>
+        <div class="queries-stat-label">Total</div>
       </div>
-      <div class="dbg-query-stat">
-        <div class="dbg-query-stat-num ${stats.slowCount > 0 ? "warning" : ""}">${stats.slowCount}</div>
-        <div class="dbg-query-stat-label">Slow (&gt;100ms)</div>
+      <div class="queries-stat">
+        <div class="queries-stat-value ${stats.slowCount > 0 ? "warn" : ""}">${stats.slowCount}</div>
+        <div class="queries-stat-label">Slow</div>
       </div>
-      <div class="dbg-query-stat">
-        <div class="dbg-query-stat-num ${stats.n1Count > 0 ? "error" : ""}">${stats.n1Count}</div>
-        <div class="dbg-query-stat-label">N+1</div>
+      <div class="queries-stat">
+        <div class="queries-stat-value ${stats.n1Count > 0 ? "error" : ""}">${stats.n1Count}</div>
+        <div class="queries-stat-label">N+1</div>
       </div>
     </div>`;
   const queries = data.queries.map((q) => {
     const isSlow = q.duration > 100;
-    const classes = [
-      "dbg-query",
-      q.isN1 ? "n1" : "",
-      isSlow ? "slow" : ""
-    ].filter(Boolean).join(" ");
-    const badges = [];
-    if (q.isN1) {
-      badges.push('<span class="dbg-query-badge n1">N+1</span>');
-    }
-    const rowsText = q.rows !== undefined ? `<span class="dbg-query-rows">${q.rows} rows</span>` : "";
-    const sourceText = q.source ? `<span class="dbg-query-source">${escapeHtml(q.source)}</span>` : "";
+    const classes = ["query-item", q.isN1 ? "n1" : "", isSlow ? "slow" : ""].filter(Boolean).join(" ");
+    const badge = q.isN1 ? '<span class="query-badge n1">N+1</span>' : "";
+    const source = q.source ? `<span class="query-source">${escapeHtml(q.source)}</span>` : "";
+    const rows = q.rows !== undefined ? `<span class="query-rows">${q.rows} rows</span>` : "";
     return `
     <div class="${classes}">
-      <div class="dbg-query-header">
-        <span class="dbg-query-sql" title="${escapeHtml(q.sql)}">${escapeHtml(q.sql)}</span>
-        <div class="dbg-query-meta">
-          ${badges.join("")}
-          ${sourceText}
-          ${rowsText}
-          <span class="dbg-query-time ${isSlow ? "slow" : ""}">${q.duration.toFixed(1)}ms</span>
+      <div class="query-header">
+        <span class="query-sql" title="${escapeHtml(q.sql)}">${escapeHtml(q.sql)}</span>
+        <div class="query-meta">
+          ${badge}${source}${rows}
+          <span class="query-time ${isSlow ? "slow" : ""}">${q.duration.toFixed(1)}ms</span>
         </div>
       </div>
     </div>`;
   }).join("");
-  const metaColor = hasIssues ? 'style="color:#ef4444"' : "";
+  return `<div class="devtools-pane" data-pane="queries">${statsHtml}<div class="query-list">${queries}</div></div>`;
+}
+function generateCachePane(data) {
+  const total = data.cacheHits + data.cacheMisses;
+  if (total === 0) {
+    return `<div class="devtools-pane" data-pane="cache"><div class="empty-state">${icons.cache}<span>No cache activity</span></div></div>`;
+  }
+  const hitRate = (data.cacheHits / total * 100).toFixed(0);
   return `
-<div class="dbg-section ${hasIssues ? "open" : ""}">
-  <div class="dbg-section-header" onclick="this.parentElement.classList.toggle('open')">
-    <span class="dbg-section-title">${icons.database} Queries</span>
-    <span class="dbg-section-meta" ${metaColor}>${stats.count} (${stats.totalDuration.toFixed(1)}ms)</span>
-    <span class="dbg-chevron">${icons.chevron}</span>
-  </div>
-  <div class="dbg-section-content">
-    ${statsHtml}
-    <div class="dbg-queries">${queries}</div>
+<div class="devtools-pane" data-pane="cache">
+  <div class="cache-stats">
+    <div class="cache-stat">
+      <div class="cache-value hit">${data.cacheHits}</div>
+      <div class="cache-label">Cache Hits</div>
+    </div>
+    <div class="cache-stat">
+      <div class="cache-value miss">${data.cacheMisses}</div>
+      <div class="cache-label">Cache Misses</div>
+    </div>
+    <div class="cache-stat">
+      <div class="cache-value">${hitRate}%</div>
+      <div class="cache-label">Hit Rate</div>
+    </div>
   </div>
 </div>`;
 }
-function generateScript(id) {
+function generateWarningsPane(data) {
+  if (data.warnings.length === 0) {
+    return `<div class="devtools-pane" data-pane="warnings"><div class="empty-state">${icons.warning}<span>No warnings</span></div></div>`;
+  }
+  const items2 = data.warnings.map((w) => `
+    <div class="warning-item">
+      <span class="warning-icon">${icons.warning}</span>
+      <span class="warning-text">${escapeHtml(w)}</span>
+    </div>
+  `).join("");
+  return `<div class="devtools-pane" data-pane="warnings"><div class="warning-list">${items2}</div></div>`;
+}
+function generateScript(id, data, opts) {
   return `
-(function(){
-  var panel = document.getElementById('${id}');
-  if (!panel) return;
-  var header = panel.querySelector('.dbg-header');
-  if (!header) return;
-  var isDrag = false, startX, startY, startL, startT;
-  header.style.cursor = 'grab';
-  header.onmousedown = function(e) {
-    if (e.target.closest('.dbg-close')) return;
-    isDrag = true;
-    header.style.cursor = 'grabbing';
-    startX = e.clientX;
-    startY = e.clientY;
-    var r = panel.getBoundingClientRect();
-    startL = r.left;
-    startT = r.top;
-    panel.style.right = 'auto';
-    panel.style.bottom = 'auto';
-    panel.style.left = startL + 'px';
-    panel.style.top = startT + 'px';
-  };
-  document.onmousemove = function(e) {
-    if (!isDrag) return;
-    panel.style.left = (startL + e.clientX - startX) + 'px';
-    panel.style.top = (startT + e.clientY - startY) + 'px';
-  };
-  document.onmouseup = function() {
-    isDrag = false;
-    header.style.cursor = 'grab';
-  };
+(function() {
+  var root = document.getElementById('${id}');
+  if (!root) return;
+
+  // Tab switching
+  root.querySelectorAll('.devtools-tab').forEach(function(tab) {
+    tab.addEventListener('click', function() {
+      root.querySelectorAll('.devtools-tab').forEach(function(t) { t.classList.remove('active'); });
+      root.querySelectorAll('.devtools-pane').forEach(function(p) { p.classList.remove('active'); });
+      tab.classList.add('active');
+      var pane = root.querySelector('[data-pane="' + tab.dataset.tab + '"]');
+      if (pane) pane.classList.add('active');
+    });
+  });
+
+  // Tree expand/collapse
+  root.querySelectorAll('.tree-row.expandable').forEach(function(row) {
+    row.addEventListener('click', function() {
+      row.parentElement.classList.toggle('open');
+    });
+  });
+
+  // Dock position switching
+  root.querySelectorAll('[data-dock]').forEach(function(btn) {
+    btn.addEventListener('click', function() {
+      root.dataset.position = btn.dataset.dock;
+    });
+  });
+
+  // Resize functionality
+  var resize = root.querySelector('.devtools-resize');
+  var panel = root.querySelector('.devtools-panel');
+  if (resize && panel) {
+    var isResizing = false;
+    var startY, startX, startHeight, startWidth;
+
+    resize.addEventListener('mousedown', function(e) {
+      isResizing = true;
+      startY = e.clientY;
+      startX = e.clientX;
+      startHeight = panel.offsetHeight;
+      startWidth = panel.offsetWidth;
+      document.body.style.cursor = root.dataset.position === 'right' ? 'ew-resize' : 'ns-resize';
+      e.preventDefault();
+    });
+
+    document.addEventListener('mousemove', function(e) {
+      if (!isResizing) return;
+      if (root.dataset.position === 'bottom') {
+        var newHeight = startHeight - (e.clientY - startY);
+        if (newHeight > 100 && newHeight < window.innerHeight * 0.8) {
+          panel.style.height = newHeight + 'px';
+        }
+      } else if (root.dataset.position === 'right') {
+        var newWidth = startWidth - (e.clientX - startX);
+        if (newWidth > 200 && newWidth < window.innerWidth * 0.6) {
+          panel.style.width = newWidth + 'px';
+        }
+      }
+    });
+
+    document.addEventListener('mouseup', function() {
+      isResizing = false;
+      document.body.style.cursor = '';
+    });
+  }
 })();`;
 }
 function escapeHtml(str) {
-  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+  return String(str).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 }
 
 // src/debug/index.ts