@bungres/kit 1.0.0 → 1.1.0

package/dist/cli.js

@@ -1664,6 +1664,37 @@ function generateDropColumn(tableName, schema, columnName) {
   const tbl = schema ? `"${schema}"."${tableName}"` : `"${tableName}"`;
   return `ALTER TABLE ${tbl} DROP COLUMN IF EXISTS "${columnName}";`;
 }
+function generateCreateEnum(name, values) {
+  const vals = values.map((v) => `'${v.replace(/'/g, "''")}'`).join(", ");
+  return `CREATE TYPE "${name}" AS ENUM (${vals});`;
+}
+function generateDropEnum(name, ifExists = true) {
+  return `DROP TYPE${ifExists ? " IF EXISTS" : ""} "${name}";`;
+}
+function inlineParams(chunk) {
+  let { sql: sql2, params } = chunk;
+  return sql2.replace(/\$(\d+)/g, (_, n) => {
+    const p = params[parseInt(n) - 1];
+    if (typeof p === "string")
+      return `'${p.replace(/'/g, "''")}'`;
+    if (typeof p === "number")
+      return String(p);
+    if (typeof p === "boolean")
+      return p ? "TRUE" : "FALSE";
+    if (p === null)
+      return "NULL";
+    return `'${String(p).replace(/'/g, "''")}'`;
+  });
+}
+function generateCreateView(view) {
+  const kind = view.materialized ? "MATERIALIZED VIEW" : "VIEW";
+  const inlineSql = inlineParams(view.query.toSQL());
+  return `CREATE ${kind} "${view.name}" AS ${inlineSql};`;
+}
+function generateDropView(view, ifExists = true) {
+  const kind = view.materialized ? "MATERIALIZED VIEW" : "VIEW";
+  return `DROP ${kind}${ifExists ? " IF EXISTS" : ""} "${view.name}";`;
+}
 
 // src/schema-loader.ts
 async function loadSchemas(patterns, cwd = process.cwd()) {
@@ -1677,11 +1708,27 @@ async function loadSchemas(patterns, cwd = process.cwd()) {
       for (const [exportName, value] of Object.entries(mod)) {
         if (isTable(value)) {
           entries.push({
+            type: "table",
             exportName,
             config: value[TableConfigSymbol],
             table: value,
             filePath: absPath
           });
+        } else if (isEnum(value)) {
+          entries.push({
+            type: "enum",
+            exportName,
+            enumName: value.enumName,
+            enumValues: value.enumValues,
+            filePath: absPath
+          });
+        } else if (isView(value)) {
+          entries.push({
+            type: "view",
+            exportName,
+            config: value,
+            filePath: absPath
+          });
         }
       }
     }
@@ -1691,6 +1738,12 @@ async function loadSchemas(patterns, cwd = process.cwd()) {
 function isTable(value) {
   return typeof value === "object" && value !== null && TableConfigSymbol in value;
 }
+function isEnum(value) {
+  return typeof value === "function" && "enumName" in value && "enumValues" in value && Array.isArray(value.enumValues);
+}
+function isView(value) {
+  return typeof value === "object" && value !== null && "name" in value && "query" in value && typeof value.query === "object" && typeof value.query.toSQL === "function";
+}
 
 // ../../node_modules/.bun/@clack+core@1.4.3/node_modules/@clack/core/dist/index.mjs
 import { styleText } from "util";
@@ -3058,9 +3111,12 @@ async function runDrop(config2, opts = {}) {
   const s = spinner();
   s.start("Loading schemas...");
   const schemas2 = await loadSchemas(config2.schema);
-  if (schemas2.length === 0) {
+  const tableSchemas = schemas2.filter((s2) => s2.type === "table");
+  const enumSchemas = schemas2.filter((s2) => s2.type === "enum");
+  const viewSchemas = schemas2.filter((s2) => s2.type === "view");
+  if (tableSchemas.length === 0 && enumSchemas.length === 0 && viewSchemas.length === 0) {
     s.stop("No schemas found.");
-    log.warn(import_picocolors.default.yellow("No table definitions found in schema files."));
+    log.warn(import_picocolors.default.yellow("No definitions found in schema files."));
     outro("Failed.");
     return;
   }
@@ -3082,25 +3138,31 @@ async function runDrop(config2, opts = {}) {
         WHERE table_schema = $1 AND table_name = $2
       ) AS exists`, [config2.migrationsSchema, "__bungres_push"]);
     const pushTableExists = pushTableCheck[0]?.exists ?? false;
-    const tablesToDrop = schemas2.filter((sch) => existingTableNames.has(sch.config.name));
-    if (tablesToDrop.length === 0 && !migrationTableExists && !pushTableExists) {
+    const tablesToDrop = tableSchemas.filter((sch) => existingTableNames.has(sch.config.name));
+    if (tablesToDrop.length === 0 && enumSchemas.length === 0 && viewSchemas.length === 0 && !migrationTableExists && !pushTableExists) {
       ms.stop("Nothing to do.");
-      log.success(import_picocolors.default.green("No tables to drop (they either don't exist or were already dropped)."));
+      log.success(import_picocolors.default.green("No items to drop (they either don't exist or were already dropped)."));
       outro("Done.");
       return;
     }
     ms.stop("Database check complete.");
-    const tableNamesToPrint = tablesToDrop.map((sch) => (sch.config.schema ? sch.config.schema + "." : "") + sch.config.name);
+    const namesToPrint = tablesToDrop.map((sch) => (sch.config.schema ? sch.config.schema + "." : "") + sch.config.name + " (table)");
+    for (const v of viewSchemas) {
+      namesToPrint.push(`${v.config.name} (view)`);
+    }
+    for (const e of enumSchemas) {
+      namesToPrint.push(`${e.enumName} (enum)`);
+    }
     if (migrationTableExists) {
-      tableNamesToPrint.push(`${config2.migrationsSchema}.${config2.migrationsTable}`);
+      namesToPrint.push(`${config2.migrationsSchema}.${config2.migrationsTable} (table)`);
     }
     if (pushTableExists) {
-      tableNamesToPrint.push(`${config2.migrationsSchema}.__bungres_push`);
+      namesToPrint.push(`${config2.migrationsSchema}.__bungres_push (table)`);
     }
     if (!opts.force) {
       log.warn(import_picocolors.default.bgRed(import_picocolors.default.white(" \u26A0\uFE0F WARNING ")));
-      log.message(import_picocolors.default.bold(import_picocolors.default.red("This will drop the following tables and ALL their data:")));
-      for (const name of tableNamesToPrint) {
+      log.message(import_picocolors.default.bold(import_picocolors.default.red("This will drop the following items and ALL their data:")));
+      for (const name of namesToPrint) {
         log.info(import_picocolors.default.yellow(`  - ${name}`));
       }
       const confirm2 = await confirm({
@@ -3114,11 +3176,22 @@ async function runDrop(config2, opts = {}) {
     }
     const exSpinner = spinner();
     exSpinner.start("Dropping tables...");
+    for (const entry of viewSchemas) {
+      const isMat = entry.config.materialized ? "MATERIALIZED VIEW" : "VIEW";
+      const ddl = `DROP ${isMat} IF EXISTS "${entry.config.name}" CASCADE;`;
+      await sql2.unsafe(ddl);
+      log.step(import_picocolors.default.gray(`Dropped ${entry.config.name}`));
+    }
     for (const entry of tablesToDrop) {
       const ddl = `DROP TABLE IF EXISTS "${entry.config.name}" CASCADE;`;
       await sql2.unsafe(ddl);
       log.step(import_picocolors.default.gray(`Dropped ${entry.config.name}`));
     }
+    for (const entry of enumSchemas) {
+      const ddl = `DROP TYPE IF EXISTS "${entry.enumName}" CASCADE;`;
+      await sql2.unsafe(ddl);
+      log.step(import_picocolors.default.gray(`Dropped ${entry.enumName}`));
+    }
     if (migrationTableExists) {
       const qualifiedMigTable = `"${config2.migrationsSchema}"."${config2.migrationsTable}"`;
       await sql2.unsafe(`DROP TABLE IF EXISTS ${qualifiedMigTable} CASCADE`);
@@ -3128,7 +3201,7 @@ async function runDrop(config2, opts = {}) {
       await sql2.unsafe(`DROP TABLE IF EXISTS "${config2.migrationsSchema}"."__bungres_push" CASCADE`);
       log.step(import_picocolors.default.gray(`Dropped ${config2.migrationsSchema}.__bungres_push`));
     }
-    exSpinner.stop("Tables dropped.");
+    exSpinner.stop("Items dropped.");
     outro(import_picocolors.default.cyan("\u2728 Drop complete."));
   } catch (err) {
     log.error(import_picocolors.default.red(`Drop failed: ${err.message}`));
@@ -3235,12 +3308,56 @@ function diffSchemas(prev, next) {
   const statements = [];
   const summary = [];
   const warnings = [];
-  const prevTables = new Set(Object.keys(prev));
-  const nextTables = new Set(Object.keys(next));
+  const prevEnums = prev.enums || {};
+  const nextEnums = next.enums || {};
+  const prevEnumNames = new Set(Object.keys(prevEnums));
+  const nextEnumNames = new Set(Object.keys(nextEnums));
+  for (const enumName of nextEnumNames) {
+    if (!prevEnumNames.has(enumName)) {
+      const e = nextEnums[enumName];
+      statements.push(generateCreateEnum(e.enumName, e.enumValues));
+      summary.push(`CREATE TYPE ${e.enumName}`);
+    }
+  }
+  for (const enumName of prevEnumNames) {
+    if (!nextEnumNames.has(enumName)) {
+      const e = prevEnums[enumName];
+      statements.push(generateDropEnum(e.enumName, true));
+      summary.push(`DROP TYPE ${e.enumName}`);
+    }
+  }
+  for (const enumName of nextEnumNames) {
+    if (prevEnumNames.has(enumName)) {
+      const p2 = prevEnums[enumName];
+      const n2 = nextEnums[enumName];
+      if (JSON.stringify(p2.enumValues) !== JSON.stringify(n2.enumValues)) {
+        warnings.push(`Enum '${n2.enumName}' values have changed. Bungres Kit currently requires manual migration for ALTER TYPE ... ADD VALUE.`);
+      }
+    }
+  }
+  const prevViews = prev.views || {};
+  const nextViews = next.views || {};
+  const prevViewNames = new Set(Object.keys(prevViews));
+  const nextViewNames = new Set(Object.keys(nextViews));
+  for (const viewName of prevViewNames) {
+    if (!nextViewNames.has(viewName)) {
+      statements.push(generateDropView(prevViews[viewName]));
+      summary.push(`DROP VIEW ${viewName}`);
+    } else {
+      const pSql = generateCreateView(prevViews[viewName]);
+      const nSql = generateCreateView(nextViews[viewName]);
+      if (pSql !== nSql) {
+        statements.push(generateDropView(prevViews[viewName]));
+        summary.push(`DROP VIEW ${viewName} (for recreation)`);
+      }
+    }
+  }
+  const prevTables = new Set(Object.keys(prev.tables || {}));
+  const nextTables = new Set(Object.keys(next.tables || {}));
   const newTableConfigs = [];
   for (const tableName of nextTables) {
     if (!prevTables.has(tableName)) {
-      newTableConfigs.push(next[tableName]);
+      newTableConfigs.push(next.tables[tableName]);
     }
   }
   for (const config2 of topoSortConfigs(newTableConfigs)) {
@@ -3249,7 +3366,7 @@ function diffSchemas(prev, next) {
   }
   for (const tableName of prevTables) {
     if (!nextTables.has(tableName)) {
-      const config2 = prev[tableName];
+      const config2 = prev.tables[tableName];
       const tbl = config2.schema ? `"${config2.schema}"."${tableName}"` : `"${tableName}"`;
       statements.push(`DROP TABLE IF EXISTS ${tbl};`);
       summary.push(`DROP TABLE ${tableName}`);
@@ -3259,8 +3376,8 @@ function diffSchemas(prev, next) {
   for (const tableName of nextTables) {
     if (!prevTables.has(tableName))
       continue;
-    const prevConfig = prev[tableName];
-    const nextConfig = next[tableName];
+    const prevConfig = prev.tables[tableName];
+    const nextConfig = next.tables[tableName];
     const prevCols = prevConfig.columns;
     const nextCols = nextConfig.columns;
     const prevColNames = new Set(Object.keys(prevCols));
@@ -3332,6 +3449,19 @@ function diffSchemas(prev, next) {
       }
     }
   }
+  for (const viewName of nextViewNames) {
+    if (!prevViewNames.has(viewName)) {
+      statements.push(generateCreateView(nextViews[viewName]));
+      summary.push(`CREATE VIEW ${viewName}`);
+    } else {
+      const pSql = generateCreateView(prevViews[viewName]);
+      const nSql = generateCreateView(nextViews[viewName]);
+      if (pSql !== nSql) {
+        statements.push(generateCreateView(nextViews[viewName]));
+        summary.push(`CREATE VIEW ${viewName} (recreated)`);
+      }
+    }
+  }
   return { statements, summary, warnings };
 }
 function topoSortConfigs(tables) {
@@ -3359,7 +3489,14 @@ function topoSortConfigs(tables) {
 function diffColumn(prev, next) {
   const changes = [];
   const col2 = `"${next.name}"`;
+  const prevDef = prev.defaultFn ?? (prev.defaultValue !== undefined ? String(prev.defaultValue) : undefined);
+  const nextDef = next.defaultFn ?? (next.defaultValue !== undefined ? String(next.defaultValue) : undefined);
+  let typeChanged = false;
   if (prev.dataType !== next.dataType) {
+    typeChanged = true;
+    if (prevDef !== undefined) {
+      changes.push(`ALTER COLUMN ${col2} DROP DEFAULT`);
+    }
     changes.push(`ALTER COLUMN ${col2} TYPE ${next.dataType.toUpperCase()} USING ${col2}::${next.dataType}`);
   } else {
     const prevLen = prev.length;
@@ -3376,9 +3513,12 @@ function diffColumn(prev, next) {
   if (prev.notNull && !next.notNull) {
     changes.push(`ALTER COLUMN ${col2} DROP NOT NULL`);
   }
-  const prevDef = prev.defaultFn ?? (prev.defaultValue !== undefined ? String(prev.defaultValue) : undefined);
-  const nextDef = next.defaultFn ?? (next.defaultValue !== undefined ? String(next.defaultValue) : undefined);
-  if (prevDef !== nextDef) {
+  if (typeChanged) {
+    if (nextDef !== undefined) {
+      const val = next.defaultFn ?? formatDefault(next.defaultValue, next.dataType);
+      changes.push(`ALTER COLUMN ${col2} SET DEFAULT ${val}`);
+    }
+  } else if (prevDef !== nextDef) {
     if (nextDef !== undefined) {
       const val = next.defaultFn ?? formatDefault(next.defaultValue, next.dataType);
       changes.push(`ALTER COLUMN ${col2} SET DEFAULT ${val}`);
@@ -3421,19 +3561,46 @@ async function runGenerate(config2, name) {
   const metaDir = join3(migrationsDir, "meta");
   await Bun.$`mkdir -p ${migrationsDir}`.quiet();
   await Bun.$`mkdir -p ${metaDir}`.quiet();
-  const currentSnapshot = Object.fromEntries(schemas2.map((s2) => [s2.config.name, s2.config]));
-  let prevSnapshot = {};
+  const currentSnapshot = { tables: {}, enums: {}, views: {} };
+  for (const s2 of schemas2) {
+    if (s2.type === "table") {
+      currentSnapshot.tables[s2.config.name] = s2.config;
+    } else if (s2.type === "enum") {
+      currentSnapshot.enums[s2.enumName] = { enumName: s2.enumName, enumValues: s2.enumValues };
+    } else if (s2.type === "view") {
+      currentSnapshot.views[s2.config.name] = s2.config;
+    }
+  }
+  let prevSnapshot = { tables: {}, enums: {}, views: {} };
   let isFirstMigration = true;
   try {
     const files = readdirSync(metaDir).filter((f2) => f2.endsWith("_snapshot.json")).sort();
     if (files.length > 0) {
       const latest = files[files.length - 1];
-      prevSnapshot = JSON.parse(await Bun.file(join3(metaDir, latest)).text());
+      const parsed = JSON.parse(await Bun.file(join3(metaDir, latest)).text());
+      if (parsed.tables || parsed.enums || parsed.views) {
+        prevSnapshot = {
+          tables: parsed.tables || {},
+          enums: parsed.enums || {},
+          views: parsed.views || {}
+        };
+      } else {
+        prevSnapshot = { tables: parsed, enums: {}, views: {} };
+      }
       isFirstMigration = false;
     } else {
       const legacyFile2 = Bun.file(join3(migrationsDir, ".snapshot.json"));
       if (await legacyFile2.exists()) {
-        prevSnapshot = JSON.parse(await legacyFile2.text());
+        const parsed = JSON.parse(await legacyFile2.text());
+        if (parsed.tables || parsed.enums || parsed.views) {
+          prevSnapshot = {
+            tables: parsed.tables || {},
+            enums: parsed.enums || {},
+            views: parsed.views || {}
+          };
+        } else {
+          prevSnapshot = { tables: parsed, enums: {}, views: {} };
+        }
         isFirstMigration = false;
       }
     }
@@ -3453,17 +3620,30 @@ async function runGenerate(config2, name) {
   let summary;
   let warnings = [];
   if (isFirstMigration) {
-    const sorted = topoSort(schemas2);
-    upStatements = sorted.flatMap((entry) => [
-      `-- ${entry.exportName}`,
-      generateCreateTable(entry.config, true),
-      ``
-    ]);
-    downStatements = [...sorted].reverse().flatMap((entry) => {
+    const tableSchemas = schemas2.filter((s2) => s2.type === "table");
+    const enumSchemas = schemas2.filter((s2) => s2.type === "enum");
+    const viewSchemas = schemas2.filter((s2) => s2.type === "view");
+    const sorted = topoSort(tableSchemas);
+    upStatements = [];
+    downStatements = [];
+    summary = [];
+    for (const e of enumSchemas) {
+      upStatements.push(`-- ${e.exportName}`, `CREATE TYPE "${e.enumName}" AS ENUM (${e.enumValues.map((v) => `'${v.replace(/'/g, "''")}'`).join(", ")});`, ``);
+      downStatements.unshift(`DROP TYPE IF EXISTS "${e.enumName}";`);
+      summary.push(`CREATE TYPE ${e.enumName}`);
+    }
+    for (const entry of sorted) {
+      upStatements.push(`-- ${entry.exportName}`, generateCreateTable(entry.config, true), ``);
       const tbl = entry.config.schema ? `"${entry.config.schema}"."${entry.config.name}"` : `"${entry.config.name}"`;
-      return [`DROP TABLE IF EXISTS ${tbl};`];
-    });
-    summary = sorted.map((s2) => `CREATE TABLE ${s2.config.name}`);
+      downStatements.unshift(`DROP TABLE IF EXISTS ${tbl};`);
+      summary.push(`CREATE TABLE ${entry.config.name}`);
+    }
+    for (const v of viewSchemas) {
+      upStatements.push(`-- ${v.exportName}`, generateCreateView(v.config), ``);
+      const isMat = v.config.materialized ? "MATERIALIZED VIEW" : "VIEW";
+      downStatements.unshift(`DROP ${isMat} IF EXISTS "${v.config.name}";`);
+      summary.push(`CREATE ${isMat} ${v.config.name}`);
+    }
   } else {
     const upDiff = diffSchemas(prevSnapshot, currentSnapshot);
     if (upDiff.statements.length === 0) {
@@ -3595,12 +3775,12 @@ export default defineConfig({
   uuid,
   varchar,
   timestamptz,
-  table,
+  pgTable,
   unique,
   index
 } from "@bungres/orm";
 
-export const users = table("users", {
+export const users = pgTable("users", {
   id: uuid({ primaryKey: true }),
   name: varchar({ length: 255, notNull: true }),
   email: varchar({ length: 255, notNull: true }),
@@ -3736,19 +3916,18 @@ function generateSchemaTS(tableMap, dbSchema) {
     `// Generated at: ${new Date().toISOString()}`,
     ``,
     `import {`,
-    `  table,`,
+    `  pgTable,`,
     `  text, varchar, char, integer, bigint, smallint,`,
     `  serial, bigserial, boolean, real, doublePrecision,`,
     `  numeric, decimal, json, jsonb,`,
     `  timestamp, timestamptz, date, time, uuid,`,
     `  bytea, inet,`,
-    `  textArray, integerArray, varcharArray, uuidArray,`,
     `} from "@bungres/orm";`,
     ``
   ];
   for (const [, table2] of tableMap) {
     const varName = toCamelCase(table2.tableName);
-    lines.push(`export const ${varName} = table("${table2.tableName}", {`);
+    lines.push(`export const ${varName} = pgTable("${table2.tableName}", {`);
     for (const col2 of table2.columns) {
       const colExpr = buildColumnExpression(col2);
       lines.push(`  ${toCamelCase(col2.name)}: ${colExpr},`);
@@ -3829,11 +4008,13 @@ function buildColumnExpression(col2) {
       refOpts += `, onUpdate: "${updateRule}"`;
     opts.push(`references: { ${refOpts} }`);
   }
-  let builderName = pgTypeToBungresBuilderName(col2);
-  if (opts.length > 0) {
-    return `${builderName}({ ${opts.join(", ")} })`;
-  }
-  return `${builderName}()`;
+  let builderResult = pgTypeToBungresBuilderName(col2);
+  let builderName = typeof builderResult === "string" ? builderResult : builderResult.base;
+  let isArray = typeof builderResult !== "string" && builderResult.isArray;
+  let expr = opts.length > 0 ? `${builderName}({ ${opts.join(", ")} })` : `${builderName}()`;
+  if (isArray)
+    expr += `.array()`;
+  return expr;
 }
 function pgTypeToBungresBuilderName(col2) {
   const dt = col2.dataType;
@@ -3879,14 +4060,14 @@ function pgTypeToBungresBuilderName(col2) {
     return "text";
   if (dt === "ARRAY") {
     if (col2.udtName === "_text")
-      return "textArray";
+      return { base: "text", isArray: true };
     if (col2.udtName === "_int4" || col2.udtName === "_int8")
-      return "integerArray";
+      return { base: "integer", isArray: true };
     if (col2.udtName === "_varchar")
-      return "varcharArray";
+      return { base: "varchar", isArray: true };
     if (col2.udtName === "_uuid")
-      return "uuidArray";
-    return "textArray";
+      return { base: "uuid", isArray: true };
+    return { base: "text", isArray: true };
   }
   return "text";
 }
@@ -3921,11 +4102,29 @@ async function runPush(config2, opts = {}) {
       );
     `);
     const rows = await sql2.unsafe(`SELECT snapshot FROM ${qualifiedPush} ORDER BY id DESC LIMIT 1;`);
-    let prevSnapshot = {};
+    let prevSnapshot = { tables: {}, enums: {}, views: {} };
     if (rows.length > 0) {
-      prevSnapshot = typeof rows[0].snapshot === "string" ? JSON.parse(rows[0].snapshot) : rows[0].snapshot;
+      const parsed = typeof rows[0].snapshot === "string" ? JSON.parse(rows[0].snapshot) : rows[0].snapshot;
+      if (parsed.tables || parsed.enums || parsed.views) {
+        prevSnapshot = {
+          tables: parsed.tables || {},
+          enums: parsed.enums || {},
+          views: parsed.views || {}
+        };
+      } else {
+        prevSnapshot = { tables: parsed, enums: {}, views: {} };
+      }
+    }
+    const currentSnapshot = { tables: {}, enums: {}, views: {} };
+    for (const s2 of schemas2) {
+      if (s2.type === "table") {
+        currentSnapshot.tables[s2.config.name] = s2.config;
+      } else if (s2.type === "enum") {
+        currentSnapshot.enums[s2.enumName] = { enumName: s2.enumName, enumValues: s2.enumValues };
+      } else if (s2.type === "view") {
+        currentSnapshot.views[s2.config.name] = s2.config;
+      }
     }
-    const currentSnapshot = Object.fromEntries(schemas2.map((schemaEntry) => [schemaEntry.config.name, schemaEntry.config]));
     const diff = diffSchemas(prevSnapshot, currentSnapshot);
     if (diff.statements.length === 0) {
       ms.stop("Up to date.");
@@ -3982,7 +4181,7 @@ async function runPush(config2, opts = {}) {
 // src/commands/refresh.ts
 var import_picocolors6 = __toESM(require_picocolors(), 1);
 async function runRefresh(config2) {
-  const schemas2 = await loadSchemas(config2.schema);
+  const schemas2 = (await loadSchemas(config2.schema)).filter((s) => s.type === "table");
   if (schemas2.length === 0) {
     console.warn("No table definitions found in schema files.");
     return;
@@ -4116,7 +4315,7 @@ async function runSeed(config2) {
   }
   const s = spinner();
   s.start("Loading schemas for auto-seeding...");
-  const schemas2 = await loadSchemas(config2.schema);
+  const schemas2 = (await loadSchemas(config2.schema)).filter((s2) => s2.type === "table");
   if (schemas2.length === 0) {
     s.stop("No schemas.");
     outro("Nothing to seed.");
@@ -4248,7 +4447,8 @@ async function runStatus(config2) {
 var import_picocolors10 = __toESM(require_picocolors(), 1);
 
 // src/commands/template.ts
-var indexHtml = `<!DOCTYPE html>
+function renderIndexHtml(opts) {
+  return `<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
@@ -4257,8 +4457,7 @@ var indexHtml = `<!DOCTYPE html>
   
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
 
   <script src="https://unpkg.com/htmx.org@2.0.0" defer></script>
   <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
@@ -4270,38 +4469,17 @@ var indexHtml = `<!DOCTYPE html>
       theme: {
         extend: {
           fontFamily: {
-            sans: ['Outfit', 'sans-serif'],
-            mono: ['"Fira Code"', 'monospace'],
+            sans: ['Inter', 'sans-serif'],
+            mono: ['"JetBrains Mono"', 'monospace'],
           },
           colors: {
-            background: 'var(--background)',
-            foreground: 'var(--foreground)',
-            card: 'var(--card)',
-            'card-foreground': 'var(--card-foreground)',
-            popover: 'var(--popover)',
-            'popover-foreground': 'var(--popover-foreground)',
-            primary: 'var(--primary)',
-            'primary-foreground': 'var(--primary-foreground)',
-            secondary: 'var(--secondary)',
-            'secondary-foreground': 'var(--secondary-foreground)',
-            muted: 'var(--muted)',
-            'muted-foreground': 'var(--muted-foreground)',
-            accent: 'var(--accent)',
-            'accent-foreground': 'var(--accent-foreground)',
-            destructive: 'var(--destructive)',
-            border: 'var(--border)',
-            input: 'var(--input)',
-            ring: 'var(--ring)',
-            sidebar: {
-              DEFAULT: 'var(--sidebar)',
-              foreground: 'var(--sidebar-foreground)',
-              primary: 'var(--sidebar-primary)',
-              'primary-foreground': 'var(--sidebar-primary-foreground)',
-              accent: 'var(--sidebar-accent)',
-              'accent-foreground': 'var(--sidebar-accent-foreground)',
-              border: 'var(--sidebar-border)',
-              ring: 'var(--sidebar-ring)',
-            }
+            bg: '#161618',
+            panel: '#1c1c1f',
+            border: '#2c2c2f',
+            text: '#ededed',
+            muted: '#8f8f91',
+            accent: '#00e599',
+            hover: '#28282c'
           }
         }
       }
@@ -4309,265 +4487,319 @@ var indexHtml = `<!DOCTYPE html>
   </script>
 
   <style>
-    :root {
-      --background: oklch(1 0 0);
-      --foreground: oklch(0.148 0.004 228.8);
-      --card: oklch(1 0 0);
-      --card-foreground: oklch(0.148 0.004 228.8);
-      --popover: oklch(1 0 0);
-      --popover-foreground: oklch(0.148 0.004 228.8);
-      --primary: oklch(0.508 0.118 165.612);
-      --primary-foreground: oklch(0.979 0.021 166.113);
-      --secondary: oklch(0.967 0.001 286.375);
-      --secondary-foreground: oklch(0.21 0.006 285.885);
-      --muted: oklch(0.963 0.002 197.1);
-      --muted-foreground: oklch(0.56 0.021 213.5);
-      --accent: oklch(0.963 0.002 197.1);
-      --accent-foreground: oklch(0.218 0.008 223.9);
-      --destructive: oklch(0.577 0.245 27.325);
-      --border: oklch(0.925 0.005 214.3);
-      --input: oklch(0.925 0.005 214.3);
-      --ring: oklch(0.723 0.014 214.4);
-      --chart-1: oklch(0.845 0.143 164.978);
-      --chart-2: oklch(0.696 0.17 162.48);
-      --chart-3: oklch(0.596 0.145 163.225);
-      --chart-4: oklch(0.508 0.118 165.612);
-      --chart-5: oklch(0.432 0.095 166.913);
-      --radius: 0.625rem;
-      --sidebar: oklch(0.987 0.002 197.1);
-      --sidebar-foreground: oklch(0.148 0.004 228.8);
-      --sidebar-primary: oklch(0.596 0.145 163.225);
-      --sidebar-primary-foreground: oklch(0.979 0.021 166.113);
-      --sidebar-accent: oklch(0.963 0.002 197.1);
-      --sidebar-accent-foreground: oklch(0.218 0.008 223.9);
-      --sidebar-border: oklch(0.925 0.005 214.3);
-      --sidebar-ring: oklch(0.723 0.014 214.4);
-    }
-
-    .dark {
-      --background: oklch(0.148 0.004 228.8);
-      --foreground: oklch(0.987 0.002 197.1);
-      --card: oklch(0.218 0.008 223.9);
-      --card-foreground: oklch(0.987 0.002 197.1);
-      --popover: oklch(0.218 0.008 223.9);
-      --popover-foreground: oklch(0.987 0.002 197.1);
-      --primary: oklch(0.432 0.095 166.913);
-      --primary-foreground: oklch(0.979 0.021 166.113);
-      --secondary: oklch(0.274 0.006 286.033);
-      --secondary-foreground: oklch(0.985 0 0);
-      --muted: oklch(0.275 0.011 216.9);
-      --muted-foreground: oklch(0.723 0.014 214.4);
-      --accent: oklch(0.275 0.011 216.9);
-      --accent-foreground: oklch(0.987 0.002 197.1);
-      --destructive: oklch(0.704 0.191 22.216);
-      --border: oklch(1 0 0 / 10%);
-      --input: oklch(1 0 0 / 15%);
-      --ring: oklch(0.56 0.021 213.5);
-      --chart-1: oklch(0.845 0.143 164.978);
-      --chart-2: oklch(0.696 0.17 162.48);
-      --chart-3: oklch(0.596 0.145 163.225);
-      --chart-4: oklch(0.508 0.118 165.612);
-      --chart-5: oklch(0.432 0.095 166.913);
-      --sidebar: oklch(0.218 0.008 223.9);
-      --sidebar-foreground: oklch(0.987 0.002 197.1);
-      --sidebar-primary: oklch(0.696 0.17 162.48);
-      --sidebar-primary-foreground: oklch(0.262 0.051 172.552);
-      --sidebar-accent: oklch(0.275 0.011 216.9);
-      --sidebar-accent-foreground: oklch(0.987 0.002 197.1);
-      --sidebar-border: oklch(1 0 0 / 10%);
-      --sidebar-ring: oklch(0.56 0.021 213.5);
-    }
-
-    ::-webkit-scrollbar { width: 6px; height: 6px; }
+    body { background-color: #161618; color: #ededed; }
+    ::-webkit-scrollbar { width: 8px; height: 8px; }
     ::-webkit-scrollbar-track { background: transparent; }
-    ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
-    ::-webkit-scrollbar-thumb:hover { background: var(--muted-foreground); }
+    ::-webkit-scrollbar-thumb { background: #3a3a3e; border-radius: 4px; }
+    ::-webkit-scrollbar-thumb:hover { background: #4a4a4e; }
     ::-webkit-scrollbar-corner { background: transparent; }
     [x-cloak] { display: none !important; }
-    .htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; }
-    .htmx-request .htmx-indicator { opacity: 1; }
-    .htmx-request.htmx-indicator { opacity: 1; }
+    
+    .tab-active { background-color: #1c1c1f; border-top: 2px solid #00e599; color: #ededed; }
+    .tab-inactive { background-color: #161618; border-top: 2px solid transparent; color: #8f8f91; }
+    
+    table { border-spacing: 0; }
+    th { border-bottom: 1px solid #2c2c2f; border-right: 1px solid #2c2c2f; background: #1c1c1f; font-weight: 500; font-size: 13px; color: #8f8f91; }
+    td { border-bottom: 1px solid #2c2c2f; border-right: 1px solid #2c2c2f; font-size: 13px; }
+    tr:hover td { background-color: #28282c; }
   </style>
 </head>
-<body class="dark bg-background text-foreground font-sans h-screen flex overflow-hidden selection:bg-primary/30">
-  <div x-data="{ currentTable: null, pageSize: 25 }" class="flex h-screen w-full">
-    <aside class="w-64 bg-sidebar border-r border-sidebar-border flex flex-col z-20 shrink-0 text-sidebar-foreground">
-      <div class="p-4 border-b border-sidebar-border flex items-center gap-3 bg-sidebar">
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-primary">
-          <ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
-          <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path>
-          <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path>
-        </svg>
-        <h1 class="text-sm font-semibold tracking-tight m-0">Bungres Studio</h1>
+<body class="font-sans h-screen flex overflow-hidden text-sm selection:bg-accent/30">
+  <div x-data="studioState()" class="flex h-screen w-full relative">
+    
+    <!-- JSON Modal -->
+    <div x-show="jsonModalOpen" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm transition-opacity" style="display: none;">
+      <div @click.away="jsonModalOpen = false" class="bg-panel border border-border rounded-lg shadow-xl w-full max-w-2xl flex flex-col max-h-[80vh]">
+        <div class="flex items-center justify-between p-3 border-b border-border bg-bg/50">
+          <h3 class="font-medium text-text text-xs flex items-center gap-2">
+            <svg class="w-4 h-4 text-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
+            Data Viewer
+          </h3>
+          <button @click="jsonModalOpen = false" class="text-muted hover:text-text p-1 rounded hover:bg-hover transition-colors"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
+        </div>
+        <div class="p-4 overflow-auto flex-1">
+          <pre class="font-mono text-xs text-text bg-bg p-4 rounded border border-border whitespace-pre-wrap break-all" x-text="jsonModalData"></pre>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Sidebar -->
+    <aside class="w-64 bg-bg border-r border-border flex flex-col z-20 shrink-0">
+      
+      <!-- Schema Selector -->
+      <div class="p-3 border-b border-border">
+        <select x-model="currentSchema" @change="loadSidebar()" class="w-full bg-panel border border-border text-text text-sm rounded px-2 py-1.5 focus:outline-none focus:border-muted cursor-pointer font-medium">
+          <template x-for="s in schemas" :key="s">
+            <option :value="s" x-text="s"></option>
+          </template>
+        </select>
+      </div>
+
+      <!-- Search Box -->
+      <div class="p-3 border-b border-border bg-bg">
+        <div class="relative">
+          <svg class="w-4 h-4 text-muted absolute left-2.5 top-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+          <input type="text" x-model="searchQuery" placeholder="Filter tables.." class="w-full bg-panel border border-border rounded pl-8 pr-2 py-1.5 text-sm focus:outline-none focus:border-muted text-text placeholder-muted">
+        </div>
       </div>
-      <div class="flex-1 overflow-y-auto p-2" hx-get="/htmx/sidebar" hx-trigger="load">
-        <div class="p-4 text-xs text-muted-foreground animate-pulse text-center">Loading schemas...</div>
+
+      <!-- Tables List -->
+      <div class="flex-1 overflow-y-auto pt-2" id="sidebar-content" :hx-get="'/htmx/sidebar?schema=' + currentSchema" hx-trigger="load">
+        <div class="p-4 text-xs text-muted animate-pulse text-center">Loading...</div>
       </div>
     </aside>
-    <main class="flex-1 flex flex-col relative w-[calc(100vw-16rem)]">
-      <header class="h-14 px-4 border-b border-border flex items-center justify-between bg-card z-10 shrink-0 text-card-foreground">
-        <h2 class="text-sm font-semibold tracking-tight flex items-center gap-2">
-          <template x-if="currentTable">
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-primary">
-              <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
-              <line x1="3" y1="9" x2="21" y2="9"></line>
-              <line x1="9" y1="21" x2="9" y2="9"></line>
-            </svg>
-          </template>
-          <template x-if="!currentTable">
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-muted-foreground">
-              <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
-              <line x1="3" y1="9" x2="21" y2="9"></line>
-              <line x1="9" y1="21" x2="9" y2="9"></line>
-            </svg>
-          </template>
-          <span x-text="currentTable ? currentTable : 'Select a table'"></span>
-        </h2>
-        <button x-bind:disabled="!currentTable" class="bg-card border border-border text-card-foreground px-3 py-1.5 rounded-md text-xs font-medium cursor-pointer transition-all hover:bg-accent hover:text-accent-foreground active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5 group" x-on:click="$dispatch('refresh-table')">
-          <svg class="w-4 h-4 group-hover:rotate-180 transition-transform duration-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <polyline points="23 4 23 10 17 10"></polyline>
-            <polyline points="1 20 1 14 7 14"></polyline>
-            <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
-          </svg>
-          Refresh
+
+    <!-- Main Content -->
+    <main class="flex-1 flex flex-col min-w-0 bg-panel">
+      <!-- Tabs Header -->
+      <header class="h-10 border-b border-border flex items-center bg-bg shrink-0 overflow-x-auto overflow-y-hidden">
+        <template x-for="tab in tabs" :key="tab.id">
+          <div 
+            @click="activeTab = tab.id"
+            :class="activeTab === tab.id ? 'tab-active' : 'tab-inactive hover:bg-panel hover:text-text'"
+            class="h-full flex items-center gap-2 pl-4 pr-2 cursor-pointer border-r border-border min-w-max transition-colors group relative select-none"
+          >
+            <!-- Icon -->
+            <template x-if="tab.type === 'table'">
+              <svg class="w-4 h-4 text-muted" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
+            </template>
+            <template x-if="tab.type === 'query'">
+              <svg class="w-4 h-4 text-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
+            </template>
+            
+            <span x-text="tab.title" class="font-medium text-xs mr-2"></span>
+            
+            <!-- Close Button -->
+            <button @click.stop="closeTab(tab.id)" class="opacity-0 group-hover:opacity-100 p-0.5 rounded hover:bg-hover text-muted hover:text-text transition-opacity">
+              <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+            </button>
+          </div>
+        </template>
+        <button @click="openQueryEditor()" class="h-full px-3 text-muted hover:text-text hover:bg-panel flex items-center justify-center transition-colors">
+          <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
         </button>
       </header>
-      <div class="flex-1 overflow-auto relative z-[1] text-left bg-background">
-        <div id="data-container" class="h-full w-full flex flex-col" x-on:refresh-table.window="if(currentTable) htmx.ajax('GET', '/htmx/tables/' + currentTable + '?limit=' + pageSize, {target: '#data-container'})">
-          <div class="flex flex-col items-center justify-center h-full w-full text-muted-foreground animate-[fadeIn_0.5s_ease-out]">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-16 h-16 mb-4 text-muted">
-              <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path>
-              <polyline points="14 2 14 8 20 8"></polyline>
-            </svg>
-            <h3 class="text-foreground m-0 mb-2 text-lg">No Table Selected</h3>
-            <p class="text-sm">Choose a table from the sidebar to view its data</p>
+
+      <!-- Active Tab Content Container -->
+      <div class="flex-1 relative overflow-hidden bg-panel">
+        
+        <!-- Empty State -->
+        <div x-show="tabs.length === 0" class="absolute inset-0 flex flex-col items-center justify-center text-muted">
+          <div class="w-12 h-12 rounded-lg bg-hover border border-border flex items-center justify-center mb-4">
+            <svg class="w-6 h-6 text-text" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
           </div>
+          <p class="text-sm">Select a table to view</p>
         </div>
+
+        <!-- Render Tabs -->
+        <template x-for="tab in tabs" :key="tab.id">
+          <div x-show="activeTab === tab.id" class="absolute inset-0 flex flex-col h-full w-full">
+            
+            <!-- Table View -->
+            <template x-if="tab.type === 'table'">
+              <div class="flex flex-col h-full w-full">
+                <!-- Table Header Toolbars -->
+                <div class="h-12 border-b border-border flex items-center justify-between px-3 shrink-0 bg-panel">
+                  <div class="flex items-center gap-2">
+                    <span class="text-xs text-muted font-medium ml-1 flex items-center gap-2">
+                      <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
+                      <span x-text="tab.title"></span>
+                    </span>
+                  </div>
+                  <!-- HTMX will swap the pagination controls into this div -->
+                  <div :id="'pagination-' + tab.id" class="flex items-center gap-2"></div>
+                </div>
+                
+                <!-- Table Data Grid Container -->
+                <div class="flex-1 overflow-auto bg-bg" :id="'data-' + tab.id" 
+                     x-init="htmx.ajax('GET', '/htmx/tables/' + tab.name + '?schema=' + tab.schema + '&tabId=' + tab.id, {target: '#data-' + tab.id})">
+                   <div class="p-8 text-center text-muted">Loading data...</div>
+                </div>
+              </div>
+            </template>
+            
+            <!-- Query Editor View -->
+            <template x-if="tab.type === 'query'">
+              <div class="flex flex-col h-full w-full" x-data="{ query: 'SELECT 1;' }">
+                <div class="h-12 border-b border-border flex items-center px-3 shrink-0 gap-2 bg-panel">
+                  <button 
+                    @click="htmx.ajax('POST', '/htmx/query', { target: '#query-result-' + tab.id, values: { query: query } })"
+                    class="bg-accent text-bg px-3 py-1.5 rounded text-xs font-semibold hover:opacity-90 flex items-center gap-1.5 transition-opacity"
+                  >
+                    <svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg> Run
+                  </button>
+                  <span class="text-muted text-[10px] font-mono ml-2">Press Ctrl+Enter to run</span>
+                </div>
+                <div class="flex-none h-48 border-b border-border relative">
+                  <textarea 
+                    x-model="query"
+                    @keydown.ctrl.enter.prevent="htmx.ajax('POST', '/htmx/query', { target: '#query-result-' + tab.id, values: { query: query } })"
+                    class="absolute inset-0 w-full h-full bg-bg text-text font-mono text-sm p-4 focus:outline-none resize-none" 
+                    placeholder="SELECT 1;"
+                  ></textarea>
+                </div>
+                <div class="flex-1 overflow-auto bg-bg flex flex-col" :id="'query-result-' + tab.id">
+                  <div class="h-full flex items-center justify-center text-muted">
+                    <div class="flex flex-col items-center">
+                      <svg class="w-6 h-6 mb-2 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
+                      <span class="text-xs">Run a query to see results</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </template>
+            
+          </div>
+        </template>
       </div>
     </main>
   </div>
   <script>
-    document.addEventListener('alpine:init', () => {})
+    const INITIAL_SCHEMAS = ${JSON.stringify(opts.schemas)};
+    const INITIAL_CURRENT_SCHEMA = ${JSON.stringify(opts.currentSchema)};
+
+    function studioState() {
+      return {
+        schemas: INITIAL_SCHEMAS,
+        currentSchema: INITIAL_CURRENT_SCHEMA,
+        searchQuery: '',
+        tabs: [],
+        activeTab: null,
+        queryEditorCount: 0,
+        jsonModalOpen: false,
+        jsonModalData: '',
+        
+        init() {
+          this.$watch('activeTab', (value) => {
+             const tab = this.tabs.find(t => t.id === value);
+             if (tab && tab.schema && tab.schema !== this.currentSchema) {
+                this.currentSchema = tab.schema;
+                this.loadSidebar();
+             }
+          });
+
+          // Listen for table clicks from the sidebar
+          window.addEventListener('open-table', (e) => {
+            const tableName = e.detail.tableName;
+            const schema = this.currentSchema;
+            const tabId = 'table_' + schema + '_' + tableName;
+            
+            if (!this.tabs.find(t => t.id === tabId)) {
+              this.tabs.push({ id: tabId, type: 'table', title: tableName, name: tableName, schema: schema });
+            }
+            this.activeTab = tabId;
+          });
+
+          window.addEventListener('open-json-modal', (e) => {
+            try {
+              const str = atob(e.detail);
+              this.jsonModalData = JSON.stringify(JSON.parse(str), null, 2);
+            } catch(err) {
+              this.jsonModalData = 'Invalid JSON data';
+            }
+            this.jsonModalOpen = true;
+          });
+        },
+        
+        loadSidebar() {
+          htmx.ajax('GET', '/htmx/sidebar?schema=' + this.currentSchema, {target: '#sidebar-content'});
+        },
+        
+        openQueryEditor() {
+          this.queryEditorCount++;
+          const tabId = 'query_' + this.queryEditorCount;
+          this.tabs.push({ id: tabId, type: 'query', title: 'Query Editor ' + (this.queryEditorCount > 1 ? this.queryEditorCount : ''), schema: this.currentSchema });
+          this.activeTab = tabId;
+        },
+        
+        closeTab(id) {
+          const idx = this.tabs.findIndex(t => t.id === id);
+          if (idx === -1) return;
+          
+          this.tabs.splice(idx, 1);
+          if (this.activeTab === id) {
+            if (this.tabs.length > 0) {
+              this.activeTab = this.tabs[Math.max(0, idx - 1)].id;
+            } else {
+              this.activeTab = null;
+            }
+          }
+        }
+      }
+    }
   </script>
 </body>
 </html>`;
+}
 
 // src/commands/studio.ts
 async function runStudio(config2) {
-  const schemas2 = await loadSchemas(config2.schema);
+  const schemas2 = (await loadSchemas(config2.schema)).filter((s) => s.type === "table");
   if (schemas2.length === 0) {
-    console.warn("No table definitions found in schema files.");
-    return;
+    console.warn("No table definitions found in schema files. Connecting anyway to browse DB...");
   }
   const schemaObj2 = {};
   for (const s of schemas2) {
     schemaObj2[s.exportName] = s.table;
   }
   const db2 = bungres({ url: config2.dbUrl, schema: schemaObj2 });
+  let allSchemas = ["public"];
+  try {
+    const res = await db2.execute(rawSql(`SELECT schema_name FROM information_schema.schemata WHERE schema_name NOT LIKE 'pg_%' AND schema_name != 'information_schema'`));
+    if (Array.isArray(res) && res.length > 0) {
+      allSchemas = res.map((r2) => r2.schema_name);
+    }
+  } catch (e) {}
   const port = Bun.env.PORT ? parseInt(Bun.env.PORT, 10) : 5555;
   const server = Bun.serve({
     port,
     async fetch(req) {
       const url = new URL(req.url);
-      if (req.method === "GET" && url.pathname === "/api/tables") {
-        const tables = schemas2.map((s) => {
-          const fkColumns = new Set;
-          if (s.config.foreignKeys) {
-            s.config.foreignKeys.forEach((fk) => {
-              fk.columns.forEach((col2) => fkColumns.add(col2));
-            });
-          }
-          const columns = Object.entries(s.config.columns).map(([key, col2]) => {
-            const fk = col2.references ? {
-              table: col2.references.table,
-              column: col2.references.column
-            } : fkColumns.has(col2.name) ? { isForeignKey: true } : null;
-            return {
-              name: col2.name,
-              type: col2.dataType,
-              primaryKey: col2.primaryKey,
-              foreignKey: fk
-            };
-          });
-          return {
-            name: s.config.name,
-            exportName: s.exportName,
-            columns,
-            foreignKeys: s.config.foreignKeys || []
-          };
-        });
-        return new Response(JSON.stringify(tables), {
-          headers: { "Content-Type": "application/json" }
-        });
-      }
-      if (req.method === "GET" && url.pathname.startsWith("/api/tables/") && url.pathname.endsWith("/data")) {
-        const tableName = url.pathname.split("/")[3];
-        const schema = schemas2.find((s) => s.config.name === tableName);
-        if (!schema) {
-          return new Response("Table not found", { status: 404 });
-        }
-        try {
-          const page = parseInt(url.searchParams.get("page") || "1", 10);
-          const limit = parseInt(url.searchParams.get("limit") || "50", 10);
-          const offset = (page - 1) * limit;
-          const countResult = await db2.select({ count: schema.table }).from(schema.table);
-          const total = Array.isArray(countResult) ? countResult.length : 0;
-          const data = await db2.select().from(schema.table).limit(limit).offset(offset);
-          return new Response(JSON.stringify({
-            data,
-            total,
-            page,
-            limit,
-            totalPages: Math.ceil(total / limit)
-          }), {
-            headers: { "Content-Type": "application/json" }
-          });
-        } catch (e) {
-          return new Response(JSON.stringify({ error: e.message }), {
-            status: 500,
-            headers: { "Content-Type": "application/json" }
-          });
-        }
-      }
-      if (req.method === "POST" && url.pathname === "/api/editor/open") {
+      if (req.method === "GET" && url.pathname === "/htmx/sidebar") {
+        const currentSchema = url.searchParams.get("schema") || config2.dbSchema || "public";
+        let items = [];
         try {
-          const body = await req.json();
-          const tableName = body.tableName;
-          const schema = schemas2.find((s) => s.config.name === tableName);
-          if (schema && schema.filePath) {
-            console.log(`Attempting to open ${schema.filePath} in editor...`);
-            Bun.openInEditor(schema.filePath, { editor: "vscode" });
-            return new Response(JSON.stringify({
-              success: true,
-              filePath: schema.filePath
-            }), {
-              headers: { "Content-Type": "application/json" }
-            });
+          const query = `
+            SELECT c.relname as name, c.reltuples as count, c.relkind as type 
+            FROM pg_class c
+            JOIN pg_catalog.pg_namespace n ON n.oid = c.relnamespace
+            WHERE n.nspname = '${currentSchema}' 
+            AND c.relkind IN ('r', 'v', 'm')
+            ORDER BY c.relname
+          `;
+          const res = await db2.execute(rawSql(query));
+          if (Array.isArray(res)) {
+            items = res;
           }
-          return new Response("Schema not found", { status: 404 });
         } catch (e) {
-          return new Response("Invalid request", { status: 400 });
+          items = schemas2.map((s) => ({ name: s.config.name, count: 0, type: "r" }));
         }
-      }
-      if (req.method === "GET" && url.pathname === "/htmx/sidebar") {
-        let html = '<ul class="flex flex-col gap-0.5 p-2 m-0 list-none">';
-        schemas2.forEach((s) => {
-          const tableName = s.config.name;
+        const formatCount = (n2) => {
+          if (n2 >= 1e6)
+            return (n2 / 1e6).toFixed(1) + "M";
+          if (n2 >= 1000)
+            return (n2 / 1000).toFixed(1) + "k";
+          return Math.floor(n2).toString();
+        };
+        let html = '<div class="px-3 py-2 text-[10px] font-semibold text-muted tracking-wider flex justify-between items-center"><div class="flex items-center gap-1.5"><svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg> TABLES</div></div>';
+        html += '<ul class="flex flex-col gap-0.5 p-2 m-0 list-none">';
+        items.forEach((item) => {
+          let icon = '<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>';
+          if (item.type === "v")
+            icon = '<svg class="w-4 h-4 text-purple-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>';
+          if (item.type === "m")
+            icon = '<svg class="w-4 h-4 text-orange-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg>';
           html += `
-            <li>
+            <li x-show="searchQuery === '' || '${item.name}'.toLowerCase().includes(searchQuery.toLowerCase())">
               <button 
-                hx-get="/htmx/tables/${tableName}?page=1&limit=25"
-                hx-target="#data-container"
-                @click="currentTable = '${tableName}'; pageSize = 25"
-                :class="currentTable === '${tableName}' ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground'"
-                class="w-full text-left px-3 py-2 rounded-md text-sm font-medium flex items-center gap-2 transition-colors focus:outline-none"
+                @click="$dispatch('open-table', { tableName: '${item.name}' })"
+                class="w-full text-left px-2 py-1 rounded text-sm font-medium flex items-center justify-between transition-colors focus:outline-none hover:bg-hover hover:text-text group text-muted"
               >
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
-                  <line x1="3" y1="9" x2="21" y2="9"></line>
-                  <line x1="9" y1="21" x2="9" y2="9"></line>
-                </svg>
-                ${tableName}
+                <div class="flex items-center gap-2 truncate">
+                  ${icon}
+                  <span class="truncate">${item.name}</span>
+                </div>
+                <span class="text-[10px] font-mono text-muted/50 group-hover:text-muted">${formatCount(Math.max(0, item.count))}</span>
               </button>
             </li>
           `;
@@ -4577,140 +4809,215 @@ async function runStudio(config2) {
       }
       if (req.method === "GET" && url.pathname.startsWith("/htmx/tables/")) {
         const tableName = url.pathname.split("/")[3];
-        const schema = schemas2.find((s) => s.config.name === tableName);
-        if (!schema) {
-          return new Response(`<div class="p-4 text-red-500">Table not found</div>`, { status: 404, headers: { "Content-Type": "text/html" } });
-        }
+        const reqSchema = url.searchParams.get("schema") || config2.dbSchema || "public";
+        const tabId = url.searchParams.get("tabId") || `table_${tableName}`;
         try {
           const page = parseInt(url.searchParams.get("page") || "1", 10);
           const limit = parseInt(url.searchParams.get("limit") || "25", 10);
           const offset = (page - 1) * limit;
-          const countResult = await db2.select({ count: schema.table }).from(schema.table);
-          const total = Array.isArray(countResult) ? countResult.length : 0;
+          let countResult;
+          let data = [];
+          const tsSchema = schemas2.find((s) => s.config.name === tableName);
+          let colConfigs = {};
+          let fkColumns = new Set;
+          try {
+            if (tsSchema) {
+              colConfigs = tsSchema.config.columns || {};
+              if (tsSchema.config.foreignKeys) {
+                tsSchema.config.foreignKeys.forEach((fk) => fk.columns.forEach((col2) => fkColumns.add(col2)));
+              }
+              const countRes = await db2.select({ count: tsSchema.table }).from(tsSchema.table);
+              countResult = Array.isArray(countRes) ? [{ count: countRes.length }] : [{ count: 0 }];
+              data = await db2.select().from(tsSchema.table).limit(limit).offset(offset);
+            } else {
+              countResult = await db2.execute(rawSql(`SELECT COUNT(*) as count FROM "${reqSchema}"."${tableName}"`));
+              data = await db2.execute(rawSql(`SELECT * FROM "${reqSchema}"."${tableName}" LIMIT ${limit} OFFSET ${offset}`));
+              const colsRes = await db2.execute(rawSql(`SELECT column_name, data_type FROM information_schema.columns WHERE table_schema = '${reqSchema}' AND table_name = '${tableName}'`));
+              if (Array.isArray(colsRes)) {
+                colsRes.forEach((c2) => {
+                  colConfigs[c2.column_name] = { dataType: c2.data_type };
+                });
+              }
+            }
+          } catch (e) {
+            return new Response(`<div class="p-4 text-red-500">Table not found or query error</div>`, { status: 404, headers: { "Content-Type": "text/html" } });
+          }
+          const total = Array.isArray(countResult) && countResult.length > 0 ? parseInt(countResult[0].count, 10) : 0;
           const totalPages = Math.ceil(total / limit) || 1;
-          const data = await db2.select().from(schema.table).limit(limit).offset(offset);
+          if (!Array.isArray(data))
+            data = [];
           const formatValue = (val) => {
             if (val === null || val === undefined)
-              return '<span class="italic text-muted-foreground">null</span>';
-            if (typeof val === "number")
-              return `<span class="text-foreground">${val}</span>`;
-            if (typeof val === "boolean")
-              return `<span class="text-foreground">${val}</span>`;
-            if (val instanceof Date)
-              return `<span class="text-foreground">${val.toISOString()}</span>`;
-            if (typeof val === "object")
-              return `<span class="text-foreground font-mono text-xs">${JSON.stringify(val).replace(/&/g, "&amp;").replace(/</g, "&lt;")}</span>`;
-            return `<span class="text-foreground">${String(val).replace(/&/g, "&amp;").replace(/</g, "&lt;")}</span>`;
+              return '<span class="italic text-muted/50">NULL</span>';
+            if (typeof val === "object" && !(val instanceof Date)) {
+              const rawJson = JSON.stringify(val);
+              const b64 = Buffer.from(rawJson).toString("base64");
+              const safeJson = rawJson.replace(/&/g, "&amp;").replace(/</g, "&lt;");
+              return `<button onclick="window.dispatchEvent(new CustomEvent('open-json-modal', { detail: '${b64}' }))" class="text-text font-mono text-xs hover:underline text-left truncate w-full max-w-[250px] block cursor-pointer" title="Click to view formatted data">${safeJson}</button>`;
+            }
+            return `<span class="text-text">${String(val).replace(/&/g, "&amp;").replace(/</g, "&lt;")}</span>`;
           };
-          if (data.length === 0) {
-            return new Response(`
-              <div class="flex flex-col items-center justify-center h-full w-full text-muted-foreground animate-[fadeIn_0.5s_ease-out]">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-16 h-16 mb-4 text-muted">
-                  <circle cx="12" cy="12" r="10"></circle>
-                  <line x1="12" y1="8" x2="12" y2="12"></line>
-                  <line x1="12" y1="16" x2="12.01" y2="16"></line>
-                </svg>
-                <h3 class="text-foreground m-0 mb-2 text-lg">Table is Empty</h3>
-                <p class="text-sm">No records found in "${tableName}"</p>
+          const columns = tsSchema ? Object.keys(colConfigs) : Object.keys(data[0] || {});
+          let html = '<div class="h-full w-full overflow-auto bg-bg">';
+          if (data.length === 0 && columns.length === 0) {
+            html += '<div class="p-8 text-center text-muted">Table is Empty</div></div>';
+          } else {
+            html += '<table class="text-left border-collapse whitespace-nowrap min-w-max">';
+            html += "<thead><tr>";
+            html += `<th class="w-10 px-3 py-2 sticky top-0 z-10 text-center bg-panel"><input type="checkbox" @change="document.querySelectorAll('#data-${tabId} .row-checkbox').forEach(cb => cb.checked = $event.target.checked)" class="w-3.5 h-3.5 rounded border-muted bg-transparent cursor-pointer"></th>`;
+            columns.forEach((col2) => {
+              const colConfig = colConfigs[col2];
+              let typeLabel = colConfig ? colConfig.dataType : "unknown";
+              let badges = "";
+              if (colConfig?.primaryKey) {
+                badges += '<span class="ml-1.5 text-[9px] bg-emerald-500/20 text-emerald-400 px-1 py-0.5 rounded uppercase font-bold" title="Primary Key">PK</span>';
+              }
+              if (tsSchema && tsSchema.config.indexes) {
+                const isIndexed = tsSchema.config.indexes.some((idx) => idx.columns.includes(col2));
+                if (isIndexed)
+                  badges += '<span class="ml-1.5 text-[9px] bg-blue-500/20 text-blue-400 px-1 py-0.5 rounded uppercase font-bold" title="Indexed">IDX</span>';
+              }
+              if (colConfig?.unique)
+                badges += '<span class="ml-1.5 text-[9px] bg-amber-500/20 text-amber-400 px-1 py-0.5 rounded uppercase font-bold" title="Unique">UQ</span>';
+              if (fkColumns.has(col2))
+                badges += '<span class="ml-1.5 text-[9px] bg-purple-500/20 text-purple-400 px-1 py-0.5 rounded uppercase font-bold" title="Foreign Key">FK</span>';
+              html += `<th class="px-4 py-2 font-medium sticky top-0 z-10 whitespace-nowrap bg-panel text-muted hover:text-text cursor-pointer transition-colors border-b border-r border-border">
+                  <div class="flex items-center gap-2">
+                    <span class="flex items-center">${col2}${badges}</span>
+                    <span class="text-[10px] font-mono opacity-50">${typeLabel}</span>
+                  </div>
+                </th>`;
+            });
+            html += "</tr></thead><tbody>";
+            data.forEach((row) => {
+              html += '<tr class="hover:bg-hover transition-colors">';
+              html += '<td class="px-3 py-1.5 text-center bg-bg border-b border-r border-border"><input type="checkbox" class="row-checkbox w-3.5 h-3.5 rounded border-muted bg-transparent cursor-pointer"></td>';
+              columns.forEach((col2) => {
+                html += `<td class="px-4 py-1.5 max-w-[300px] overflow-hidden text-ellipsis font-mono border-b border-r border-border bg-bg">${formatValue(row[col2])}</td>`;
+              });
+              html += "</tr>";
+            });
+            html += "</tbody></table></div>";
+          }
+          const startRecord = total === 0 ? 0 : (page - 1) * limit + 1;
+          const endRecord = Math.min(page * limit, total);
+          let paginationHtml = `
+            <div id="pagination-${tabId}" hx-swap-oob="true" class="flex items-center gap-4 text-xs text-muted font-mono">
+              <span>${startRecord}-${endRecord} of ${total}</span>
+              
+              <div class="flex items-center gap-3">
+                <div class="relative flex items-center border border-border rounded bg-panel overflow-hidden group">
+                  <select 
+                    class="bg-transparent text-text pl-2 pr-6 py-0.5 focus:outline-none cursor-pointer appearance-none text-center relative z-10 w-full"
+                    @change="htmx.ajax('GET', '/htmx/tables/${tableName}?schema=${reqSchema}&tabId=${tabId}&page=1&limit=' + $event.target.value, {target: '#data-${tabId}'})"
+                  >
+                    <option class="bg-bg text-text" style="background-color: #161618; color: #ededed;" value="10" ${limit === 10 ? "selected" : ""}>10</option>
+                    <option class="bg-bg text-text" style="background-color: #161618; color: #ededed;" value="25" ${limit === 25 ? "selected" : ""}>25</option>
+                    <option class="bg-bg text-text" style="background-color: #161618; color: #ededed;" value="50" ${limit === 50 ? "selected" : ""}>50</option>
+                    <option class="bg-bg text-text" style="background-color: #161618; color: #ededed;" value="100" ${limit === 100 ? "selected" : ""}>100</option>
+                  </select>
+                  <div class="absolute right-1 text-muted pointer-events-none z-0 group-hover:text-text transition-colors">
+                    <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
+                  </div>
+                </div>
+
+                <div class="flex items-center border border-border rounded bg-panel overflow-hidden">
+                  <div class="px-2 py-0.5 text-text text-center min-w-[30px]">${page}</div>
+                  <div class="px-1 py-0.5 text-muted border-l border-border text-[10px] flex items-center justify-center pointer-events-none bg-panel">
+                    of ${totalPages}
+                  </div>
+                  <button 
+                    ${page <= 1 ? "disabled" : ""}
+                    hx-get="/htmx/tables/${tableName}?schema=${reqSchema}&tabId=${tabId}&page=${page - 1}&limit=${limit}"
+                    hx-target="#data-${tabId}"
+                    class="px-2 py-1 hover:bg-hover hover:text-text disabled:opacity-50 disabled:cursor-not-allowed border-l border-r border-border transition-colors flex items-center justify-center"
+                  ><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"></polyline></svg></button>
+                  <button 
+                    ${page >= totalPages ? "disabled" : ""}
+                    hx-get="/htmx/tables/${tableName}?schema=${reqSchema}&tabId=${tabId}&page=${page + 1}&limit=${limit}"
+                    hx-target="#data-${tabId}"
+                    class="px-2 py-1 hover:bg-hover hover:text-text disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center justify-center"
+                  ><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"></polyline></svg></button>
+                </div>
+              </div>
+            </div>
+          `;
+          return new Response(html + paginationHtml, { headers: { "Content-Type": "text/html" } });
+        } catch (e) {
+          return new Response(`
+            <div class="p-6">
+              <div class="bg-red-500/10 border border-red-500/20 text-red-400 p-4 rounded-lg">
+                <h3 class="font-semibold mb-1">Error Loading Data</h3>
+                <p class="text-sm opacity-80">${e.message}</p>
               </div>
-            `, { headers: { "Content-Type": "text/html" } });
+            </div>
+          `, { headers: { "Content-Type": "text/html" } });
+        }
+      }
+      if (req.method === "POST" && url.pathname === "/htmx/query") {
+        try {
+          const body = await req.formData();
+          const query = body.get("query")?.toString() || "";
+          if (!query.trim()) {
+            return new Response('<div class="p-6 text-muted">No query provided.</div>', { headers: { "Content-Type": "text/html" } });
+          }
+          const startMs = Date.now();
+          const res = await db2.execute(rawSql(query));
+          const duration2 = Date.now() - startMs;
+          const data = Array.isArray(res) ? res : [res];
+          if (data.length === 0 || data.length === 1 && typeof data[0] === "object" && Object.keys(data[0]).length === 0) {
+            return new Response(`<div class="p-4 text-accent text-xs font-mono border-b border-border">Query executed successfully in ${duration2}ms. No data returned.</div>`, { headers: { "Content-Type": "text/html" } });
           }
           const columns = Object.keys(data[0] || {});
-          let html = '<div class="flex flex-col h-full w-full bg-background">';
-          html += '<div class="flex-1 overflow-auto">';
-          html += '<table class="text-left border-collapse text-sm whitespace-nowrap">';
+          const formatValue = (val) => {
+            if (val === null || val === undefined)
+              return '<span class="italic text-muted/50">NULL</span>';
+            if (typeof val === "object" && !(val instanceof Date)) {
+              const rawJson = JSON.stringify(val);
+              const b64 = Buffer.from(rawJson).toString("base64");
+              const safeJson = rawJson.replace(/&/g, "&amp;").replace(/</g, "&lt;");
+              return `<button onclick="window.dispatchEvent(new CustomEvent('open-json-modal', { detail: '${b64}' }))" class="text-text font-mono text-xs hover:underline text-left truncate w-full max-w-[250px] block cursor-pointer" title="Click to view formatted data">${safeJson}</button>`;
+            }
+            return `<span class="text-text">${String(val).replace(/&/g, "&amp;").replace(/</g, "&lt;")}</span>`;
+          };
+          let html = '<div class="h-full w-full overflow-auto bg-bg">';
+          html += '<table class="text-left border-collapse whitespace-nowrap min-w-max">';
           html += "<thead><tr>";
           columns.forEach((col2) => {
-            const colConfig = schema.config.columns ? schema.config.columns[col2] : null;
-            let typeLabel = colConfig ? colConfig.dataType : "unknown";
-            let indexLabel = "";
-            if (colConfig?.primaryKey) {
-              indexLabel += '<span class="ml-1 text-[10px] bg-emerald-500/20 text-emerald-500 px-1 rounded uppercase" title="Primary Key">PK</span>';
-            }
-            if (colConfig?.unique) {
-              indexLabel += '<span class="ml-1 text-[10px] bg-amber-500/20 text-amber-500 px-1 rounded uppercase" title="Unique">UQ</span>';
-            }
-            if (colConfig?.references) {
-              indexLabel += '<span class="ml-1 text-[10px] bg-yellow-500/20 text-yellow-500 px-1 rounded uppercase" title="Foreign Key">FK</span>';
-            }
-            if (schema.config.indexes) {
-              const isIndexed = schema.config.indexes.some((idx) => idx.columns.includes(col2));
-              if (isIndexed) {
-                indexLabel += '<span class="ml-1 text-[10px] bg-blue-500/20 text-blue-500 px-1 rounded uppercase" title="Indexed">IDX</span>';
-              }
-            }
-            html += `<th class="bg-card border-b border-r border-border px-4 py-2.5 font-medium text-muted-foreground sticky top-0 z-10">
-              <div class="flex flex-col gap-0.5">
-                <span class="text-foreground">${col2}</span>
-                <div class="flex items-center flex-wrap gap-1 mt-0.5">
-                  <span class="text-[10px] font-mono text-muted-foreground/70 mr-1">${typeLabel}</span>
-                  ${indexLabel}
-                </div>
+            const row0 = data.length > 0 ? data[0] : null;
+            const typeLabel = row0 && row0[col2] != null ? typeof row0[col2] : "unknown";
+            html += `<th class="px-4 py-2 font-medium sticky top-0 z-10 whitespace-nowrap bg-panel text-muted hover:text-text cursor-pointer transition-colors border-b border-r border-border">
+              <div class="flex items-center gap-2">
+                <span class="text-text">${col2}</span>
+                <span class="text-[10px] font-mono opacity-50">${typeLabel}</span>
               </div>
             </th>`;
           });
           html += "</tr></thead><tbody>";
           data.forEach((row) => {
-            html += '<tr class="hover:bg-muted/50 transition-colors">';
+            html += '<tr class="hover:bg-hover transition-colors">';
             columns.forEach((col2) => {
-              html += `<td class="border-b border-r border-border px-4 py-2 max-w-[300px] overflow-hidden text-ellipsis">${formatValue(row[col2])}</td>`;
+              html += `<td class="px-4 py-1.5 max-w-[300px] overflow-hidden text-ellipsis font-mono border-b border-r border-border bg-bg">${formatValue(row[col2])}</td>`;
             });
             html += "</tr>";
           });
           html += "</tbody></table></div>";
-          const startRecord = (page - 1) * limit + 1;
-          const endRecord = Math.min(page * limit, total);
-          html += `
-            <div class="flex items-center justify-between px-4 py-3 bg-card border-t border-border text-xs text-muted-foreground shrink-0 sticky bottom-0 z-10 w-full">
-              <div class="flex items-center gap-4">
-                <span>${total} records</span>
-                <span>${startRecord}-${endRecord}</span>
-              </div>
-              <div class="flex items-center gap-2">
-                <select 
-                  name="limit" 
-                  class="bg-background border border-border text-foreground px-2 py-1.5 rounded-md focus:outline-none focus:ring-1 focus:ring-ring cursor-pointer"
-                  @change="pageSize = $event.target.value; htmx.ajax('GET', '/htmx/tables/${tableName}?page=1&limit=' + pageSize, {target: '#data-container'})"
-                >
-                  <option value="10" ${limit === 10 ? "selected" : ""}>10</option>
-                  <option value="25" ${limit === 25 ? "selected" : ""}>25</option>
-                  <option value="50" ${limit === 50 ? "selected" : ""}>50</option>
-                  <option value="100" ${limit === 100 ? "selected" : ""}>100</option>
-                </select>
-                
-                <button 
-                  ${page <= 1 ? "disabled" : ""}
-                  hx-get="/htmx/tables/${tableName}?page=${page - 1}&limit=${limit}"
-                  hx-target="#data-container"
-                  class="bg-background border border-border text-foreground px-3 py-1.5 rounded-md hover:bg-accent hover:text-accent-foreground disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-                >&larr;</button>
-                
-                <span class="min-w-[40px] text-center">${page} / ${totalPages}</span>
-                
-                <button 
-                  ${page >= totalPages ? "disabled" : ""}
-                  hx-get="/htmx/tables/${tableName}?page=${page + 1}&limit=${limit}"
-                  hx-target="#data-container"
-                  class="bg-background border border-border text-foreground px-3 py-1.5 rounded-md hover:bg-accent hover:text-accent-foreground disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-                >&rarr;</button>
-              </div>
-            </div>
-          `;
-          html += "</div>";
+          html += `<div class="px-4 py-2 text-[10px] text-muted border-t border-border font-mono shrink-0 bg-panel sticky bottom-0">${data.length} row(s) returned in ${duration2}ms</div>`;
           return new Response(html, { headers: { "Content-Type": "text/html" } });
         } catch (e) {
           return new Response(`
             <div class="p-6">
               <div class="bg-red-500/10 border border-red-500/20 text-red-400 p-4 rounded-lg">
-                <h3 class="font-semibold mb-1">Error Loading Data</h3>
-                <p class="text-sm opacity-80">${e.message}</p>
+                <h3 class="font-semibold mb-1">Query Error</h3>
+                <p class="text-sm opacity-80 font-mono break-words whitespace-pre-wrap">${e.message}</p>
               </div>
             </div>
           `, { headers: { "Content-Type": "text/html" } });
         }
       }
       if (req.method === "GET" && url.pathname === "/") {
-        return new Response(indexHtml, {
+        const currentSchema = url.searchParams.get("schema") || config2.dbSchema || "public";
+        return new Response(renderIndexHtml({ schemas: allSchemas, currentSchema }), {
           headers: { "Content-Type": "text/html" }
         });
       }
@@ -4725,7 +5032,7 @@ async function runStudio(config2) {
 // src/commands/tusky.ts
 var import_picocolors11 = __toESM(require_picocolors(), 1);
 async function runTusky(config) {
-  const schemas = await loadSchemas(config.schema);
+  const schemas = (await loadSchemas(config.schema)).filter((s) => s.type === "table");
   const schemaObj = {};
   for (const s of schemas) {
     schemaObj[s.exportName] = s.table;
@@ -4855,7 +5162,7 @@ async function ensureDatabase2(dbUrl) {
 // package.json
 var package_default = {
   name: "@bungres/kit",
-  version: "1.0.0",
+  version: "1.1.0",
   description: "CLI toolkit for @bungres/orm \u2014 migrate, push, generate, pull",
   license: "MIT",
   engines: {
@@ -4870,9 +5177,10 @@ var package_default = {
   types: "./dist/index.d.ts",
   exports: {
     ".": {
-      bun: "./src/index.ts",
+      types: "./dist/index.d.ts",
       import: "./dist/index.js",
-      types: "./dist/index.d.ts"
+      require: "./dist/index.js",
+      default: "./dist/index.js"
     }
   },
   files: [