binja 0.5.3 → 0.6.0

package/dist/debug/collector.d.ts

@@ -18,6 +18,34 @@ export interface ContextValue {
     expandable: boolean;
     children?: Record<string, ContextValue>;
 }
+export interface QueryInfo {
+    /** SQL query or operation name */
+    sql: string;
+    /** Query parameters */
+    params?: any[];
+    /** Duration in milliseconds */
+    duration: number;
+    /** Number of rows returned */
+    rows?: number;
+    /** Source ORM (drizzle, prisma, etc.) */
+    source?: string;
+    /** Timestamp when query was executed */
+    timestamp: number;
+    /** Whether this query was detected as part of N+1 */
+    isN1?: boolean;
+}
+export interface QueryStats {
+    /** Total number of queries */
+    count: number;
+    /** Total duration of all queries */
+    totalDuration: number;
+    /** Number of slow queries (> 100ms) */
+    slowCount: number;
+    /** Number of N+1 queries detected */
+    n1Count: number;
+    /** Queries grouped by similar SQL for N+1 detection */
+    queryCounts: Map<string, number>;
+}
 export interface DebugData {
     startTime: number;
     endTime?: number;
@@ -35,6 +63,8 @@ export interface DebugData {
     testsUsed: Map<string, number>;
     cacheHits: number;
     cacheMisses: number;
+    queries: QueryInfo[];
+    queryStats: QueryStats;
     warnings: string[];
 }
 export declare class DebugCollector {
@@ -59,6 +89,19 @@ export declare class DebugCollector {
     recordCacheHit(): void;
     recordCacheMiss(): void;
     addWarning(message: string): void;
+    /**
+     * Record a database query for telemetry
+     * @param query Query information
+     */
+    recordQuery(query: Omit<QueryInfo, 'timestamp' | 'isN1'>): void;
+    /**
+     * Normalize SQL query for comparison (removes specific values)
+     */
+    private normalizeQuery;
+    /**
+     * Get query statistics
+     */
+    getQueryStats(): QueryStats;
     getData(): DebugData;
     getSummary(): {
         totalTime: number;

package/dist/debug/collector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"collector.d.ts","sourceRoot":"","sources":["../../src/debug/collector.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,CAAA;IACpC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,EAAE,MAAM,CAAA;IACf,KAAK,EAAE,GAAG,CAAA;IACV,UAAU,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAA;CACxC;AAED,MAAM,WAAW,SAAS;IAExB,SAAS,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IAGnB,aAAa,EAAE,YAAY,EAAE,CAAA;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAA;IAGrB,IAAI,EAAE,SAAS,GAAG,KAAK,CAAA;IACvB,OAAO,EAAE,OAAO,CAAA;IAGhB,WAAW,EAAE,MAAM,EAAE,CAAA;IACrB,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAA;IAG7C,WAAW,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAChC,SAAS,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAG9B,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IAGnB,QAAQ,EAAE,MAAM,EAAE,CAAA;CACnB;AAED,qBAAa,cAAc;IACzB,OAAO,CAAC,IAAI,CAAW;;IAmBvB,UAAU,IAAI,IAAI;IAIlB,QAAQ,IAAI,IAAI;IAMhB,WAAW,IAAI,IAAI;IAInB,SAAS,IAAI,IAAI;IAMjB,WAAW,IAAI,IAAI;IAInB,SAAS,IAAI,IAAI;IASjB,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI;IAQtF,OAAO,CAAC,IAAI,EAAE,SAAS,GAAG,KAAK,GAAG,IAAI;IAItC,QAAQ,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI;IAKhC,cAAc,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI;IAOlD,OAAO,CAAC,YAAY;IAwBpB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,OAAO;IASf,OAAO,CAAC,UAAU;IAmClB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAIhC,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAK9B,cAAc,IAAI,IAAI;IAItB,eAAe,IAAI,IAAI;IAKvB,UAAU,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAKjC,OAAO,IAAI,SAAS;IAKpB,UAAU,IAAI;QACZ,SAAS,EAAE,MAAM,CAAA;QACjB,aAAa,EAAE,MAAM,CAAA;QACrB,WAAW,EAAE,MAAM,CAAA;QACnB,IAAI,EAAE,MAAM,CAAA;KACb;CAQF;AAKD,wBAAgB,oBAAoB,IAAI,cAAc,CAGrD;AAED,wBAAgB,iBAAiB,IAAI,cAAc,GAAG,IAAI,CAEzD;AAED,wBAAgB,kBAAkB,IAAI,SAAS,GAAG,IAAI,CAOrD"}
+{"version":3,"file":"collector.d.ts","sourceRoot":"","sources":["../../src/debug/collector.ts"],"names":[],"mappings":"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"}

package/dist/debug/index.d.ts

@@ -13,9 +13,10 @@
 import type { Environment } from '../index';
 import { PanelOptions } from './panel';
 export { DebugCollector, startDebugCollection, endDebugCollection, getDebugCollector } from './collector';
-export type { DebugData, ContextValue } from './collector';
+export type { DebugData, ContextValue, QueryInfo, QueryStats } from './collector';
 export { generateDebugPanel } from './panel';
 export type { PanelOptions } from './panel';
+export { recordQuery, createPrismaMiddleware, setupPrismaLogging, createDrizzleLogger, wrapDrizzleQuery, wrapBunSQL, wrapQuery, createQueryWrapper, } from './integrations';
 export interface DebugRenderOptions {
     /** Panel options */
     panel?: PanelOptions;

package/dist/debug/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/debug/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAE3C,OAAO,EAAsB,YAAY,EAAE,MAAM,SAAS,CAAA;AAG1D,OAAO,EAAE,cAAc,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAA;AACzG,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAC5C,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAE3C,MAAM,WAAW,kBAAkB;IACjC,oBAAoB;IACpB,KAAK,CAAC,EAAE,YAAY,CAAA;IACpB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;GAEG;AACH,wBAAsB,eAAe,CACnC,GAAG,EAAE,WAAW,EAChB,YAAY,EAAE,MAAM,EACpB,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAM,EACjC,OAAO,GAAE,kBAAuB,GAC/B,OAAO,CAAC,MAAM,CAAC,CAgCjB;AAED;;GAEG;AACH,wBAAsB,qBAAqB,CACzC,GAAG,EAAE,WAAW,EAChB,MAAM,EAAE,MAAM,EACd,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAM,EACjC,OAAO,GAAE,kBAAuB,GAC/B,OAAO,CAAC,MAAM,CAAC,CA0BjB;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,WAAW,EAAE,OAAO,GAAE,kBAAuB;yBAEvD,MAAM,YAAW,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAQ,OAAO,CAAC,MAAM,CAAC;yBAG3D,MAAM,YAAW,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAQ,OAAO,CAAC,MAAM,CAAC;EAIzF;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,GAAG,EAAE,WAAW,EAAE,OAAO,GAAE,kBAAuB;IAE9E;;OAEG;aAEa,GAAG,GAAG,EAAE,MAAM,MAAM,OAAO,CAAC,IAAI,CAAC;IAyBjD;;OAEG;gBAEO,KAAK,GAAG,EAAE,KAAK,GAAG,EAAE,MAAM,MAAM,IAAI;EA2BjD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/debug/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAE3C,OAAO,EAAsB,YAAY,EAAE,MAAM,SAAS,CAAA;AAG1D,OAAO,EAAE,cAAc,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAA;AACzG,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AACjF,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAC5C,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAG3C,OAAO,EACL,WAAW,EACX,sBAAsB,EACtB,kBAAkB,EAClB,mBAAmB,EACnB,gBAAgB,EAChB,UAAU,EACV,SAAS,EACT,kBAAkB,GACnB,MAAM,gBAAgB,CAAA;AAEvB,MAAM,WAAW,kBAAkB;IACjC,oBAAoB;IACpB,KAAK,CAAC,EAAE,YAAY,CAAA;IACpB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;GAEG;AACH,wBAAsB,eAAe,CACnC,GAAG,EAAE,WAAW,EAChB,YAAY,EAAE,MAAM,EACpB,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAM,EACjC,OAAO,GAAE,kBAAuB,GAC/B,OAAO,CAAC,MAAM,CAAC,CAgCjB;AAED;;GAEG;AACH,wBAAsB,qBAAqB,CACzC,GAAG,EAAE,WAAW,EAChB,MAAM,EAAE,MAAM,EACd,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAM,EACjC,OAAO,GAAE,kBAAuB,GAC/B,OAAO,CAAC,MAAM,CAAC,CA0BjB;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,WAAW,EAAE,OAAO,GAAE,kBAAuB;yBAEvD,MAAM,YAAW,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAQ,OAAO,CAAC,MAAM,CAAC;yBAG3D,MAAM,YAAW,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAQ,OAAO,CAAC,MAAM,CAAC;EAIzF;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,GAAG,EAAE,WAAW,EAAE,OAAO,GAAE,kBAAuB;IAE9E;;OAEG;aAEa,GAAG,GAAG,EAAE,MAAM,MAAM,OAAO,CAAC,IAAI,CAAC;IAyBjD;;OAEG;gBAEO,KAAK,GAAG,EAAE,KAAK,GAAG,EAAE,MAAM,MAAM,IAAI;EA2BjD"}

package/dist/debug/index.js

@@ -14,6 +14,14 @@ class DebugCollector {
       testsUsed: new Map,
       cacheHits: 0,
       cacheMisses: 0,
+      queries: [],
+      queryStats: {
+        count: 0,
+        totalDuration: 0,
+        slowCount: 0,
+        n1Count: 0,
+        queryCounts: new Map
+      },
       warnings: []
     };
   }
@@ -154,6 +162,33 @@ class DebugCollector {
   addWarning(message) {
     this.data.warnings.push(message);
   }
+  recordQuery(query) {
+    const normalizedSql = this.normalizeQuery(query.sql);
+    const currentCount = this.data.queryStats.queryCounts.get(normalizedSql) || 0;
+    this.data.queryStats.queryCounts.set(normalizedSql, currentCount + 1);
+    const isN1 = currentCount >= 2;
+    const queryInfo = {
+      ...query,
+      timestamp: performance.now(),
+      isN1
+    };
+    this.data.queries.push(queryInfo);
+    this.data.queryStats.count++;
+    this.data.queryStats.totalDuration += query.duration;
+    if (query.duration > 100) {
+      this.data.queryStats.slowCount++;
+    }
+    if (isN1 && currentCount === 2) {
+      this.data.queryStats.n1Count++;
+      this.addWarning(`N+1 query detected: ${normalizedSql.slice(0, 50)}...`);
+    }
+  }
+  normalizeQuery(sql) {
+    return sql.replace(/\s+/g, " ").replace(/= \?/g, "= ?").replace(/= \$\d+/g, "= ?").replace(/= '\w+'/g, "= '?'").replace(/= \d+/g, "= ?").replace(/IN \([^)]+\)/gi, "IN (?)").trim();
+  }
+  getQueryStats() {
+    return this.data.queryStats;
+  }
   getData() {
     return this.data;
   }
@@ -315,6 +350,25 @@ function generateStyles(id, c, opts) {
 #${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 ${c.warning}; }
 #${id} .dbg-warning-icon { color: ${c.warning}; flex-shrink: 0; margin-top: 1px; }
 #${id} .dbg-warning-text { color: ${c.text}; font-size: 12px; }
+#${id} .dbg-queries { display: flex; flex-direction: column; gap: 8px; }
+#${id} .dbg-query { background: ${c.bg}; border-radius: 6px; overflow: hidden; }
+#${id} .dbg-query.n1 { border-left: 3px solid ${c.error}; }
+#${id} .dbg-query.slow { border-left: 3px solid ${c.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: ${c.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: ${c.bgTertiary}; }
+#${id} .dbg-query-time.slow { background: rgba(234,179,8,0.15); color: ${c.warning}; }
+#${id} .dbg-query-rows { font-size: 10px; color: ${c.textMuted}; }
+#${id} .dbg-query-source { font-size: 9px; padding: 2px 5px; border-radius: 3px; background: rgba(59,130,246,0.1); color: ${c.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: ${c.error}; }
+#${id} .dbg-query-stats { display: flex; gap: 12px; margin-bottom: 12px; padding: 10px; background: ${c.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: ${c.text}; }
+#${id} .dbg-query-stat-num.warning { color: ${c.warning}; }
+#${id} .dbg-query-stat-num.error { color: ${c.error}; }
+#${id} .dbg-query-stat-label { font-size: 10px; color: ${c.textMuted}; margin-top: 2px; }
 `;
 }
 function getPosition(pos) {
@@ -339,7 +393,8 @@ var icons = {
   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>`,
   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>`
+  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>`
 };
 function generateToggle(id, data, c) {
   const time = (data.totalTime || 0).toFixed(1);
@@ -368,6 +423,7 @@ function generatePanel(id, data, c, opts) {
     ${generateTemplatesSection(data)}
     ${generateContextSection(data)}
     ${generateFiltersSection(data)}
+    ${generateQueriesSection(data)}
     ${generateCacheSection(data)}
     ${generateWarningsSection(data)}
   </div>
@@ -531,6 +587,70 @@ function generateWarningsSection(data) {
   </div>
 </div>`;
 }
+function generateQueriesSection(data) {
+  if (data.queries.length === 0)
+    return "";
+  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>
+      <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>
+      <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>
+      <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>
+    </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>` : "";
+    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>
+      </div>
+    </div>`;
+  }).join("");
+  const metaColor = hasIssues ? 'style="color:#ef4444"' : "";
+  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>
+</div>`;
+}
 function generateScript(id) {
   return `
 (function(){
@@ -568,6 +688,155 @@ function generateScript(id) {
 function escapeHtml(str) {
   return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 }
+// src/debug/integrations.ts
+function recordQuery(query) {
+  const collector = getDebugCollector();
+  if (collector) {
+    collector.recordQuery(query);
+  }
+}
+function createPrismaMiddleware() {
+  return async (params, next) => {
+    const collector = getDebugCollector();
+    const start = performance.now();
+    const result = await next(params);
+    const duration = performance.now() - start;
+    if (collector) {
+      const sql = `${params.action} ${params.model}`;
+      collector.recordQuery({
+        sql,
+        params: params.args ? [JSON.stringify(params.args)] : undefined,
+        duration,
+        rows: Array.isArray(result) ? result.length : result ? 1 : 0,
+        source: "prisma"
+      });
+    }
+    return result;
+  };
+}
+function setupPrismaLogging(prisma) {
+  prisma.$on("query", (e) => {
+    const collector = getDebugCollector();
+    if (collector) {
+      collector.recordQuery({
+        sql: e.query,
+        params: e.params ? JSON.parse(e.params) : undefined,
+        duration: e.duration,
+        source: "prisma"
+      });
+    }
+  });
+}
+function createDrizzleLogger() {
+  return {
+    logQuery(query, params) {
+      const collector = getDebugCollector();
+      if (collector) {
+        collector.recordQuery({
+          sql: query,
+          params,
+          duration: 0,
+          source: "drizzle"
+        });
+      }
+    }
+  };
+}
+async function wrapDrizzleQuery(query, sql) {
+  const collector = getDebugCollector();
+  const start = performance.now();
+  const result = await query;
+  const duration = performance.now() - start;
+  if (collector) {
+    collector.recordQuery({
+      sql: sql || "Drizzle Query",
+      duration,
+      rows: Array.isArray(result) ? result.length : result ? 1 : 0,
+      source: "drizzle"
+    });
+  }
+  return result;
+}
+function wrapBunSQL(db) {
+  const handler = {
+    get(target, prop) {
+      const value = target[prop];
+      if (typeof value === "function") {
+        if (prop === "query" || prop === "run" || prop === "prepare") {
+          return function(...args) {
+            const collector = getDebugCollector();
+            const sql = typeof args[0] === "string" ? args[0] : "SQL Query";
+            const start = performance.now();
+            const result = value.apply(target, args);
+            if (result && typeof result.all === "function") {
+              return wrapPreparedStatement(result, sql);
+            }
+            const duration = performance.now() - start;
+            if (collector) {
+              collector.recordQuery({
+                sql,
+                params: args.slice(1),
+                duration,
+                rows: Array.isArray(result) ? result.length : undefined,
+                source: "bun:sqlite"
+              });
+            }
+            return result;
+          };
+        }
+      }
+      return value;
+    }
+  };
+  return new Proxy(db, handler);
+}
+function wrapPreparedStatement(stmt, sql) {
+  const handler = {
+    get(target, prop) {
+      const value = target[prop];
+      if (typeof value === "function" && (prop === "all" || prop === "get" || prop === "run")) {
+        return function(...args) {
+          const collector = getDebugCollector();
+          const start = performance.now();
+          const result = value.apply(target, args);
+          const duration = performance.now() - start;
+          if (collector) {
+            collector.recordQuery({
+              sql,
+              params: args,
+              duration,
+              rows: Array.isArray(result) ? result.length : result ? 1 : 0,
+              source: "bun:sqlite"
+            });
+          }
+          return result;
+        };
+      }
+      return value;
+    }
+  };
+  return new Proxy(stmt, handler);
+}
+async function wrapQuery(sql, queryFn, source = "sql") {
+  const collector = getDebugCollector();
+  const start = performance.now();
+  const result = await queryFn();
+  const duration = performance.now() - start;
+  if (collector) {
+    collector.recordQuery({
+      sql,
+      duration,
+      rows: Array.isArray(result) ? result.length : result ? 1 : 0,
+      source
+    });
+  }
+  return result;
+}
+function createQueryWrapper(source) {
+  return (sql, queryFn) => {
+    return wrapQuery(sql, queryFn, source);
+  };
+}
 
 // src/debug/index.ts
 async function renderWithDebug(env, templateName, context = {}, options = {}) {
@@ -666,13 +935,21 @@ function debugMiddleware(env, options = {}) {
   };
 }
 export {
+  wrapQuery,
+  wrapDrizzleQuery,
+  wrapBunSQL,
   startDebugCollection,
+  setupPrismaLogging,
   renderWithDebug,
   renderStringWithDebug,
+  recordQuery,
   getDebugCollector,
   generateDebugPanel,
   endDebugCollection,
   debugMiddleware,
+  createQueryWrapper,
+  createPrismaMiddleware,
+  createDrizzleLogger,
   createDebugRenderer,
   DebugCollector
 };

package/dist/debug/integrations.d.ts

@@ -0,0 +1,104 @@
+/**
+ * ORM Integrations for Query Telemetry
+ *
+ * Provides helpers for Prisma, Drizzle, and Bun SQL
+ */
+import type { QueryInfo } from './collector';
+type QueryInput = Omit<QueryInfo, 'timestamp' | 'isN1'>;
+/**
+ * Record a query manually (works with any database)
+ */
+export declare function recordQuery(query: QueryInput): void;
+/**
+ * Create Prisma middleware for query telemetry
+ *
+ * @example
+ * ```typescript
+ * import { PrismaClient } from '@prisma/client'
+ * import { createPrismaMiddleware } from 'binja/debug'
+ *
+ * const prisma = new PrismaClient()
+ * prisma.$use(createPrismaMiddleware())
+ * ```
+ */
+export declare function createPrismaMiddleware(): (params: any, next: (params: any) => Promise<any>) => Promise<any>;
+/**
+ * Setup Prisma query event logging
+ *
+ * @example
+ * ```typescript
+ * import { PrismaClient } from '@prisma/client'
+ * import { setupPrismaLogging } from 'binja/debug'
+ *
+ * const prisma = new PrismaClient({ log: [{ emit: 'event', level: 'query' }] })
+ * setupPrismaLogging(prisma)
+ * ```
+ */
+export declare function setupPrismaLogging(prisma: any): void;
+/**
+ * Create Drizzle logger for query telemetry
+ *
+ * @example
+ * ```typescript
+ * import { drizzle } from 'drizzle-orm/...'
+ * import { createDrizzleLogger } from 'binja/debug'
+ *
+ * const db = drizzle(client, { logger: createDrizzleLogger() })
+ * ```
+ */
+export declare function createDrizzleLogger(): {
+    logQuery(query: string, params: unknown[]): void;
+};
+/**
+ * Wrap a Drizzle query for accurate timing
+ *
+ * @example
+ * ```typescript
+ * import { wrapDrizzleQuery } from 'binja/debug'
+ *
+ * const users = await wrapDrizzleQuery(
+ *   db.select().from(usersTable).where(eq(usersTable.id, 1))
+ * )
+ * ```
+ */
+export declare function wrapDrizzleQuery<T>(query: Promise<T>, sql?: string): Promise<T>;
+/**
+ * Wrap Bun SQL database for query telemetry
+ *
+ * @example
+ * ```typescript
+ * import { Database } from 'bun:sqlite'
+ * import { wrapBunSQL } from 'binja/debug'
+ *
+ * const db = wrapBunSQL(new Database('mydb.sqlite'))
+ * ```
+ */
+export declare function wrapBunSQL<T extends object>(db: T): T;
+/**
+ * Wrap any async query function for timing
+ *
+ * @example
+ * ```typescript
+ * import { wrapQuery } from 'binja/debug'
+ *
+ * const result = await wrapQuery(
+ *   'SELECT * FROM users WHERE id = ?',
+ *   () => db.query('SELECT * FROM users WHERE id = ?', [1])
+ * )
+ * ```
+ */
+export declare function wrapQuery<T>(sql: string, queryFn: () => Promise<T>, source?: string): Promise<T>;
+/**
+ * Create a query wrapper for any database client
+ *
+ * @example
+ * ```typescript
+ * import { createQueryWrapper } from 'binja/debug'
+ *
+ * const query = createQueryWrapper('mysql')
+ * const users = await query('SELECT * FROM users', () => mysql.query('SELECT * FROM users'))
+ * ```
+ */
+export declare function createQueryWrapper(source: string): <T>(sql: string, queryFn: () => Promise<T>) => Promise<T>;
+export {};
+//# sourceMappingURL=integrations.d.ts.map

package/dist/debug/integrations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"integrations.d.ts","sourceRoot":"","sources":["../../src/debug/integrations.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAE5C,KAAK,UAAU,GAAG,IAAI,CAAC,SAAS,EAAE,WAAW,GAAG,MAAM,CAAC,CAAA;AAEvD;;GAEG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CAKnD;AAID;;;;;;;;;;;GAWG;AACH,wBAAgB,sBAAsB,KACtB,QAAQ,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,KAAK,OAAO,CAAC,GAAG,CAAC,kBAqB/D;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,GAAG,GAAG,IAAI,CAYpD;AAID;;;;;;;;;;GAUG;AACH,wBAAgB,mBAAmB;oBAEf,MAAM,UAAU,OAAO,EAAE,GAAG,IAAI;EAcnD;AAED;;;;;;;;;;;GAWG;AACH,wBAAsB,gBAAgB,CAAC,CAAC,EACtC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,EACjB,GAAG,CAAC,EAAE,MAAM,GACX,OAAO,CAAC,CAAC,CAAC,CAkBZ;AAID;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,EAAE,EAAE,EAAE,CAAC,GAAG,CAAC,CA0CrD;AA0CD;;;;;;;;;;;;GAYG;AACH,wBAAsB,SAAS,CAAC,CAAC,EAC/B,GAAG,EAAE,MAAM,EACX,OAAO,EAAE,MAAM,OAAO,CAAC,CAAC,CAAC,EACzB,MAAM,SAAQ,GACb,OAAO,CAAC,CAAC,CAAC,CAkBZ;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,MAAM,IACvC,CAAC,EAAE,KAAK,MAAM,EAAE,SAAS,MAAM,OAAO,CAAC,CAAC,CAAC,KAAG,OAAO,CAAC,CAAC,CAAC,CAG/D"}

package/dist/index.js

@@ -5081,6 +5081,14 @@ class DebugCollector {
       testsUsed: new Map,
       cacheHits: 0,
       cacheMisses: 0,
+      queries: [],
+      queryStats: {
+        count: 0,
+        totalDuration: 0,
+        slowCount: 0,
+        n1Count: 0,
+        queryCounts: new Map
+      },
       warnings: []
     };
   }
@@ -5221,6 +5229,33 @@ class DebugCollector {
   addWarning(message) {
     this.data.warnings.push(message);
   }
+  recordQuery(query) {
+    const normalizedSql = this.normalizeQuery(query.sql);
+    const currentCount = this.data.queryStats.queryCounts.get(normalizedSql) || 0;
+    this.data.queryStats.queryCounts.set(normalizedSql, currentCount + 1);
+    const isN1 = currentCount >= 2;
+    const queryInfo = {
+      ...query,
+      timestamp: performance.now(),
+      isN1
+    };
+    this.data.queries.push(queryInfo);
+    this.data.queryStats.count++;
+    this.data.queryStats.totalDuration += query.duration;
+    if (query.duration > 100) {
+      this.data.queryStats.slowCount++;
+    }
+    if (isN1 && currentCount === 2) {
+      this.data.queryStats.n1Count++;
+      this.addWarning(`N+1 query detected: ${normalizedSql.slice(0, 50)}...`);
+    }
+  }
+  normalizeQuery(sql) {
+    return sql.replace(/\s+/g, " ").replace(/= \?/g, "= ?").replace(/= \$\d+/g, "= ?").replace(/= '\w+'/g, "= '?'").replace(/= \d+/g, "= ?").replace(/IN \([^)]+\)/gi, "IN (?)").trim();
+  }
+  getQueryStats() {
+    return this.data.queryStats;
+  }
   getData() {
     return this.data;
   }
@@ -5379,6 +5414,25 @@ function generateStyles(id, c2, opts) {
 #${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; }
 `;
 }
 function getPosition(pos) {
@@ -5403,7 +5457,8 @@ var icons = {
   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>`,
   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>`
+  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>`
 };
 function generateToggle(id, data, c2) {
   const time2 = (data.totalTime || 0).toFixed(1);
@@ -5432,6 +5487,7 @@ function generatePanel(id, data, c2, opts) {
     ${generateTemplatesSection(data)}
     ${generateContextSection(data)}
     ${generateFiltersSection(data)}
+    ${generateQueriesSection(data)}
     ${generateCacheSection(data)}
     ${generateWarningsSection(data)}
   </div>
@@ -5595,6 +5651,70 @@ function generateWarningsSection(data) {
   </div>
 </div>`;
 }
+function generateQueriesSection(data) {
+  if (data.queries.length === 0)
+    return "";
+  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>
+      <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>
+      <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>
+      <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>
+    </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>` : "";
+    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>
+      </div>
+    </div>`;
+  }).join("");
+  const metaColor = hasIssues ? 'style="color:#ef4444"' : "";
+  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>
+</div>`;
+}
 function generateScript(id) {
   return `
 (function(){

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "binja",
-  "version": "0.5.3",
+  "version": "0.6.0",
   "description": "High-performance Jinja2/Django template engine for Bun",
   "main": "dist/index.js",
   "module": "dist/index.js",