admindb 1.2.1 → 2.1.0

package/dist/utils/logger.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createLogger = createLogger;
+const colors_1 = require("./colors");
+const LEVELS = { debug: 10, info: 20, warn: 30, error: 40 };
+function formatTime() {
+    const d = new Date();
+    const pad = (n) => String(n).padStart(2, '0');
+    return `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
+}
+const BADGES = {
+    debug: colors_1.c.magenta('[debug]'),
+    info: colors_1.c.cyan('[info]'),
+    warn: colors_1.c.yellow('[warn]'),
+    error: colors_1.c.red(colors_1.c.bold('[error]')),
+};
+/** Minimal, color-enhanced console logger with level filtering and scoped children. */
+function createLogger(level = 'info', scope = 'admindb') {
+    const threshold = LEVELS[level] ?? LEVELS.info;
+    // Clean scope name (e.g. "admindb:db:users.db" -> "db:users.db")
+    const cleanScope = scope === 'admindb' || scope === 'app' ? '' : scope.replace(/^admindb:/, '');
+    const scopeTag = cleanScope ? colors_1.c.dim(colors_1.c.cyan(`[${cleanScope}]`)) : '';
+    const write = (lv, args) => {
+        if (LEVELS[lv] < threshold)
+            return;
+        const time = colors_1.c.gray(formatTime());
+        const badge = BADGES[lv];
+        const prefix = [time, badge, scopeTag].filter(Boolean).join(' ');
+        // eslint-disable-next-line no-console
+        console.log(prefix, ...args);
+    };
+    return {
+        debug: (...args) => write('debug', args),
+        info: (...args) => write('info', args),
+        warn: (...args) => write('warn', args),
+        error: (...args) => write('error', args),
+        child: (s) => createLogger(level, cleanScope ? `${cleanScope}:${s}` : s),
+    };
+}
+//# sourceMappingURL=logger.js.map

package/dist/utils/logger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"logger.js","sourceRoot":"","sources":["../../src/utils/logger.ts"],"names":[],"mappings":";;AA4BA,oCAuBC;AAnDD,qCAA6B;AAY7B,MAAM,MAAM,GAA6B,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC;AAEtF,SAAS,UAAU;IACjB,MAAM,CAAC,GAAG,IAAI,IAAI,EAAE,CAAC;IACrB,MAAM,GAAG,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IACtD,OAAO,GAAG,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC,EAAE,CAAC;AAC9E,CAAC;AAED,MAAM,MAAM,GAA6B;IACvC,KAAK,EAAE,UAAC,CAAC,OAAO,CAAC,SAAS,CAAC;IAC3B,IAAI,EAAE,UAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;IACtB,IAAI,EAAE,UAAC,CAAC,MAAM,CAAC,QAAQ,CAAC;IACxB,KAAK,EAAE,UAAC,CAAC,GAAG,CAAC,UAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;CAChC,CAAC;AAEF,uFAAuF;AACvF,SAAgB,YAAY,CAAC,QAAkB,MAAM,EAAE,KAAK,GAAG,SAAS;IACtE,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC;IAE/C,iEAAiE;IACjE,MAAM,UAAU,GAAG,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;IAChG,MAAM,QAAQ,GAAG,UAAU,CAAC,CAAC,CAAC,UAAC,CAAC,GAAG,CAAC,UAAC,CAAC,IAAI,CAAC,IAAI,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAEpE,MAAM,KAAK,GAAG,CAAC,EAAY,EAAE,IAAe,EAAQ,EAAE;QACpD,IAAI,MAAM,CAAC,EAAE,CAAC,GAAG,SAAS;YAAE,OAAO;QACnC,MAAM,IAAI,GAAG,UAAC,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;QAClC,MAAM,KAAK,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC;QACzB,MAAM,MAAM,GAAG,CAAC,IAAI,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACjE,sCAAsC;QACtC,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,OAAO;QACL,KAAK,EAAE,CAAC,GAAG,IAAI,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,IAAI,CAAC;QACxC,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,EAAE,IAAI,CAAC;QACtC,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,EAAE,IAAI,CAAC;QACtC,KAAK,EAAE,CAAC,GAAG,IAAI,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,IAAI,CAAC;QACxC,KAAK,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,UAAU,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;KACzE,CAAC;AACJ,CAAC"}

package/dist/views/layouts/main.hbs

@@ -1,5 +1,7 @@
+{{!-- Layout: Main Application Wrapper (renders all pages via {{{body}}}) --}}
 <!DOCTYPE html>
 <html lang="en" data-theme="admindb">
+
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -9,7 +11,14 @@
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
   <link rel="stylesheet" href="{{basePath}}/css/app.css" />
   <script>
-    window.APP = { basePath: {{{json basePath}}}, readonly: {{{json readonly}}} };
+    window.APP = {
+      basePath: {{{json basePath}}},
+      readonly: {{{json readonly}}},
+      serverless: {{{json serverless}}},
+      dialect: {{{json dialect}}},
+      isSqlite: {{{json isSqlite}}},
+      isPostgres: {{{json isPostgres}}}
+    };
     // Apply the saved theme before first paint to avoid a flash.
     (function () {
       try {
@@ -18,32 +27,52 @@
       } catch (e) {}
     })();
   </script>
+  <script src="{{basePath}}/js/icons.js" defer></script>
   <script src="{{basePath}}/js/api.js" defer></script>
   <script src="{{basePath}}/js/app.js" defer></script>
+  <script src="{{basePath}}/js/inspector.js" defer></script>
+
 </head>
 <body class="min-h-screen bg-base-200 text-base-content">
   {{#if readonly}}
     <div class="flex items-center justify-center gap-2 bg-warning/15 px-4 py-2 text-center text-sm font-semibold text-warning">
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
-      Read-only mode — this database is open without write access. All writes are disabled.
+      <span class="shrink-0">{{{icon "warning" class="h-4 w-4"}}}</span>
+      {{#if serverless}}
+        Serverless mode active — database is open in read-only mode. Writes and schema modifications are disabled.
+      {{else}}
+        Read-only mode — this database is open without write access. All writes are disabled.
+      {{/if}}
     </div>
   {{/if}}
-  <div class="drawer lg:drawer-open">
-    <input id="sidebar-toggle" type="checkbox" class="drawer-toggle" />
-    <div class="drawer-content flex min-h-screen flex-col">
+  {{#if noSidebar}}
+    <div class="flex min-h-screen flex-col">
       {{> navbar}}
       <main class="mx-auto w-full max-w-[1500px] flex-1 px-4 py-6 sm:px-6 lg:px-8 lg:py-8">
         {{{body}}}
       </main>
       <footer class="border-t border-base-300 px-6 py-4 text-center text-xs text-base-content/40">
-        AdminDB{{#if version}} v{{version}}{{/if}} · a browser tool for SQLite databases
+        AdminDB{{#if version}} v{{version}}{{/if}} · SQLite & PostgreSQL database administration
       </footer>
     </div>
-    <div class="drawer-side z-40">
-      <label for="sidebar-toggle" aria-label="close sidebar" class="drawer-overlay"></label>
-      {{> sidebar}}
+  {{else}}
+    <div class="drawer lg:drawer-open">
+      <input id="sidebar-toggle" type="checkbox" class="drawer-toggle" />
+      <div class="drawer-content flex min-h-screen flex-col">
+        {{> navbar}}
+        <main class="mx-auto w-full max-w-[1500px] flex-1 px-4 py-6 sm:px-6 lg:px-8 lg:py-8">
+          {{{body}}}
+        </main>
+        <footer class="border-t border-base-300 px-6 py-4 text-center text-xs text-base-content/40">
+          AdminDB{{#if version}} v{{version}}{{/if}} · SQLite & PostgreSQL database administration
+        </footer>
+      </div>
+
+      <div class="drawer-side z-40">
+        <label for="sidebar-toggle" aria-label="close sidebar" class="drawer-overlay"></label>
+        {{> sidebar}}
+      </div>
     </div>
-  </div>
+  {{/if}}
   <div id="toast-container" class="pointer-events-none fixed inset-x-0 top-4 z-50 flex flex-col items-center gap-2 px-4"></div>
 </body>
 </html>

package/dist/views/pages/databases.hbs

@@ -1,73 +1,85 @@
+{{!-- Page: Multi-Database Manager Landing · URL: /databases (or / in manager mode) --}}
 <div class="space-y-6">
+
   <!-- Header -->
   <div>
     <p class="text-sm font-semibold uppercase tracking-wider text-primary">Manager</p>
     <h1 class="mt-1 text-3xl font-extrabold tracking-tight">Databases</h1>
-    <p class="mt-1.5 text-sm text-base-content/55">Open a database to browse and edit it, or create a new one.</p>
+    <p class="mt-1.5 text-sm text-base-content/55">Connect to PostgreSQL databases, create SQLite files, or open existing local databases with configurable read/write access.</p>
   </div>
 
-  <!-- New database -->
-  <div class="app-card p-5">
-    <div class="flex flex-wrap items-end gap-3">
-      <div class="w-full max-w-sm">
-        <label class="field-label" for="new-db-name">New database name</label>
-        <input id="new-db-name" class="field-input font-mono" placeholder="e.g. analytics" autocomplete="off" spellcheck="false" />
+  <!-- Connect & Create Actions Grid -->
+  <div class="grid grid-cols-1 gap-5 lg:grid-cols-2">
+    <!-- Connect PostgreSQL Database -->
+    <div class="app-card p-5 border border-info/30 bg-info/[0.02]">
+      <div class="mb-3 flex items-center justify-between">
+        <h2 class="flex items-center gap-2 text-sm font-bold uppercase tracking-wide text-info">
+          {{{icon "database" class="h-4 w-4"}}}
+          Connect PostgreSQL
+        </h2>
+        <span class="rounded bg-info/15 px-2 py-0.5 text-[10px] font-bold text-info">Remote / Local</span>
       </div>
-      {{#unless readonly}}
-        <button id="create-db" type="button" class="btn btn-primary btn-sm mb-0.5 gap-1.5">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" /></svg>
-          Create
-        </button>
-      {{else}}
-        <span class="mb-1 text-sm font-medium text-warning">Read-only — creating databases is disabled.</span>
-      {{/unless}}
+      <div class="space-y-3">
+        <div>
+          <label class="field-label" for="pg-conn-name">Connection Name <span class="text-base-content/40">(optional)</span></label>
+          <input id="pg-conn-name" class="field-input font-mono text-xs" placeholder="e.g. prod_postgres" autocomplete="off" spellcheck="false" />
+        </div>
+        <div>
+          <label class="field-label" for="pg-conn-uri">Connection URI <span class="chip chip-type">required</span></label>
+          <input id="pg-conn-uri" class="field-input font-mono text-xs" placeholder="postgresql://user:password@localhost:5432/mydb" autocomplete="off" spellcheck="false" />
+        </div>
+        <div>
+          <label class="flex items-center gap-2 cursor-pointer pt-0.5">
+            <input type="checkbox" id="pg-conn-readonly" class="checkbox checkbox-xs checkbox-primary rounded" />
+            <span class="text-xs font-medium text-base-content/75">Open as Read-only (block writes & schema changes)</span>
+          </label>
+        </div>
+        <div class="pt-1">
+          {{#unless readonly}}
+            <button id="connect-pg" type="button" class="btn btn-info btn-sm gap-1.5 w-full sm:w-auto">
+              {{{icon "plus" class="h-4 w-4"}}}
+              Connect PostgreSQL
+            </button>
+          {{else}}
+            <span class="text-xs font-medium text-warning">Read-only mode — connecting databases is disabled.</span>
+          {{/unless}}
+        </div>
+      </div>
+      <p class="mt-3 text-[11px] text-base-content/45 leading-relaxed">
+        Credentials are encrypted in-memory and sanitized in the UI. Passwords are never sent to the client.
+      </p>
     </div>
-    <p class="mt-2 text-xs text-base-content/40">
-      New databases are created in <code class="font-mono">{{dbDir}}</code>. Files already there are picked up
-      automatically, and any explicitly configured database paths appear here too.
-    </p>
-  </div>
 
-  <!-- Open an existing database file -->
-  {{#if allowBrowse}}
-    <div class="app-card p-5">
-      <div class="mb-3 flex flex-wrap items-center justify-between gap-2">
-        <h2 class="text-sm font-semibold uppercase tracking-wide text-base-content/45">Open an existing database</h2>
-        <span class="text-xs text-base-content/40">.db · .sqlite · .sqlite3</span>
-      </div>
-      <div class="flex flex-wrap items-center gap-2">
-        <input id="fs-path" class="field-input font-mono sm:!w-96" placeholder="Absolute path to a folder, e.g. C:\data" autocomplete="off" spellcheck="false" />
-        <button id="fs-go" type="button" class="btn btn-outline btn-sm gap-1.5">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
-          Go
-        </button>
-        <button id="fs-up" type="button" class="btn btn-ghost btn-sm gap-1.5">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 10h13M3 10l4-4m-4 4l4 4" /></svg>
-          Up
-        </button>
+    <!-- Create SQLite Database -->
+    <div class="app-card p-5 border border-emerald-500/30 bg-emerald-500/[0.02]">
+      <div class="mb-3 flex items-center justify-between">
+        <h2 class="flex items-center gap-2 text-sm font-bold uppercase tracking-wide text-emerald-600 dark:text-emerald-400">
+          {{{icon "plus" class="h-4 w-4"}}}
+          Create SQLite Database
+        </h2>
+        <span class="rounded bg-emerald-500/15 px-2 py-0.5 text-[10px] font-bold text-emerald-600 dark:text-emerald-400">File-based</span>
       </div>
-      <div class="mt-3 overflow-hidden rounded-xl border border-base-300">
-        <div id="fs-current" class="border-b border-base-200 bg-base-200/50 px-3 py-2 font-mono text-xs text-base-content/60"></div>
-        <div id="fs-listing" class="max-h-80 divide-y divide-base-200/70 overflow-auto"></div>
+      <div class="space-y-3">
+        <div>
+          <label class="field-label" for="new-db-name">Database Name <span class="chip chip-type">required</span></label>
+          <input id="new-db-name" class="field-input font-mono text-xs" placeholder="e.g. analytics" autocomplete="off" spellcheck="false" />
+        </div>
+        <div class="pt-1">
+          {{#unless readonly}}
+            <button id="create-db" type="button" class="btn btn-primary btn-sm gap-1.5 w-full sm:w-auto">
+              {{{icon "plus" class="h-4 w-4"}}}
+              Create SQLite DB
+            </button>
+          {{else}}
+            <span class="text-xs font-medium text-warning">Read-only — creating databases is disabled.</span>
+          {{/unless}}
+        </div>
       </div>
-      <p class="mt-2.5 text-xs text-base-content/45">
-        Browse the filesystem to select an existing database; opening it adds it to the list above so you can
-        switch between databases freely.
-        {{#if browseRoot}}
-          <span class="font-medium text-base-content/60">Browsing is limited to <code class="font-mono">{{browseRoot}}</code>.</span>
-        {{/if}}
-        <span class="font-medium text-warning">This server has no authentication — treat it like a remote filesystem &amp; database shell.</span>
+      <p class="mt-3 text-[11px] text-base-content/45 leading-relaxed">
+        Files are saved to <code class="font-mono">{{dbDir}}</code>. Any <code class="font-mono">.db</code> file dropped there is auto-discovered.
       </p>
     </div>
-  {{else}}
-    <div class="app-card p-5">
-      <p class="text-sm text-base-content/60">
-        <b class="text-base-content/80">File browsing is disabled.</b>
-        This server was started with specific database files, so the filesystem browser is turned off — use the
-        list of available databases below.
-      </p>
-    </div>
-  {{/if}}
+  </div>
 
   <!-- List -->
   <div>
@@ -83,9 +95,10 @@
             <thead>
               <tr class="bg-base-200/70 text-xs uppercase tracking-wide text-base-content/50">
                 <th class="font-semibold">Name</th>
+                <th class="font-semibold">Mode</th>
                 <th class="text-right font-semibold">Tables</th>
                 <th class="text-right font-semibold">Size</th>
-                <th class="font-semibold">Modified</th>
+                <th class="font-semibold">Status / Modified</th>
                 <th class="text-right font-semibold">Actions</th>
               </tr>
             </thead>
@@ -94,31 +107,76 @@
                 <tr class="group hover:bg-primary/[0.04]">
                   <td>
                     <a href="{{../basePath}}/{{this.id}}" class="inline-flex items-center gap-2.5">
-                      <span class="grid h-8 w-8 shrink-0 place-items-center rounded-lg bg-primary/10 text-primary transition-colors group-hover:bg-primary/20">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 7v10c0 1.1.9 2 2 2h12a2 2 0 002-2V7M4 7c0-1.1.9-2 2-2h12a2 2 0 012 2M4 7c0 1.1.9 2 2 2h12a2 2 0 002-2" /></svg>
+                      <span class="grid h-8 w-8 shrink-0 place-items-center rounded-lg {{#if this.isPostgres}}bg-info/10 text-info group-hover:bg-info/20{{else}}bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 group-hover:bg-emerald-500/20{{/if}} transition-colors">
+                        {{{icon "database" class="h-4 w-4"}}}
                       </span>
                       <span class="min-w-0">
-                        <span class="block truncate font-mono text-[13.5px] font-semibold">{{this.name}}</span>
-                        <span class="block max-w-[220px] truncate text-[11px] text-base-content/40" title="{{this.path}}">{{this.path}}</span>
+                        <div class="flex items-center gap-1.5">
+                          <span class="truncate font-mono text-[13.5px] font-semibold">{{this.name}}</span>
+                          {{#if this.isPostgres}}
+                            <span class="rounded bg-info/15 px-1.5 py-0.2 text-[10px] font-bold text-info">PostgreSQL</span>
+                          {{else}}
+                            <span class="rounded bg-emerald-500/15 px-1.5 py-0.2 text-[10px] font-bold text-emerald-600 dark:text-emerald-400">SQLite</span>
+                          {{/if}}
+                        </div>
+                        <span class="block max-w-[260px] truncate font-mono text-[11px] text-base-content/40" title="{{this.path}}">{{this.path}}</span>
                       </span>
                     </a>
                   </td>
+                  <td class="align-middle">
+                    {{#if ../readonly}}
+                      <span class="rounded bg-warning/20 px-2 py-0.5 text-[10px] font-bold uppercase text-warning">Read-only</span>
+                    {{else}}
+                      <button type="button" class="js-toggle-db-mode rounded px-2 py-0.5 text-[10px] font-bold uppercase transition hover:opacity-80 {{#if this.readonly}}bg-warning/20 text-warning{{else}}bg-success/20 text-success{{/if}}"
+                        data-id="{{this.id}}" data-readonly="{{#if this.readonly}}true{{else}}false{{/if}}" title="Click to toggle between Writable and Read-only">
+                        {{#if this.readonly}}Read-only{{else}}Writable{{/if}} ⇄
+                      </button>
+                    {{/if}}
+                  </td>
                   <td class="text-right tabular-nums text-base-content/60">{{this.tables}}</td>
                   <td class="text-right tabular-nums text-base-content/60">{{this.sizeLabel}}</td>
                   <td class="text-[13px] text-base-content/55">{{this.modifiedLabel}}</td>
                   <td class="whitespace-nowrap text-right">
-                      <div class="row-actions">
-                        <a href="{{../basePath}}/{{this.id}}" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary">
-                          <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
+                    <div class="row-actions">
+                      <div class="join">
+                        <a href="{{../basePath}}/{{this.id}}" class="btn btn-ghost btn-xs join-item gap-1 text-base-content/70 hover:text-primary">
+                          {{{icon "arrowRight" class="h-3.5 w-3.5"}}}
                           Open
                         </a>
-                        {{#unless ../readonly}}
-                          <button type="button" class="btn btn-ghost btn-xs gap-1 text-error js-delete-db" data-id="{{this.id}}">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
+                        <div class="dropdown dropdown-end">
+                          <label tabindex="0" role="button" class="btn btn-ghost btn-xs join-item px-1 text-base-content/60 hover:text-base-content" title="Open options">
+                            {{{icon "chevronDown" class="h-3 w-3"}}}
+                          </label>
+                          <ul tabindex="0" class="dropdown-content menu z-50 w-44 rounded-xl border border-base-300 bg-base-100 p-1.5 shadow-lift text-xs">
+                            <li>
+                              <a href="{{../basePath}}/{{this.id}}?readonly=0" class="flex items-center gap-1.5 text-success">
+                                {{{icon "check" class="h-3.5 w-3.5"}}}
+                                Open Writable
+                              </a>
+                            </li>
+                            <li>
+                              <a href="{{../basePath}}/{{this.id}}?readonly=1" class="flex items-center gap-1.5 text-warning">
+                                {{{icon "lock" class="h-3.5 w-3.5"}}}
+                                Open Read-only
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                      </div>
+                      {{#unless ../readonly}}
+                        {{#if this.isPostgres}}
+                          <button type="button" class="btn btn-ghost btn-xs gap-1 text-warning js-disconnect-db" data-id="{{this.id}}" data-name="{{this.name}}" title="Disconnect this database from the manager list">
+                            {{{icon "logout" class="h-3.5 w-3.5"}}}
+                            Disconnect
+                          </button>
+                        {{else}}
+                          <button type="button" class="btn btn-ghost btn-xs gap-1 text-error js-delete-db" data-id="{{this.id}}" title="Delete database file from disk">
+                            {{{icon "trash" class="h-3.5 w-3.5"}}}
                             Delete
                           </button>
-                        {{/unless}}
-                      </div>
+                        {{/if}}
+                      {{/unless}}
+                    </div>
                   </td>
                 </tr>
               {{/each}}
@@ -128,16 +186,66 @@
       </div>
     {{else}}
       <div class="empty-state">
-        <span class="empty-icon">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 7v10c0 1.1.9 2 2 2h12a2 2 0 002-2V7M4 7c0-1.1.9-2 2-2h12a2 2 0 012 2M4 7c0 1.1.9 2 2 2h12a2 2 0 002-2" /></svg>
-        </span>
+        <span class="empty-icon">{{{icon "database" class="h-7 w-7"}}}</span>
         <p class="text-sm font-medium text-base-content/70">No databases yet</p>
         <p class="max-w-sm text-sm text-base-content/45">
-          Create one above, or drop <code class="font-mono">.db</code> files into
-          <code class="font-mono">{{dbDir}}</code> and refresh.
+          Connect a PostgreSQL database or create a new SQLite database above to get started.
         </p>
       </div>
     {{/if}}
   </div>
+
+  <!-- Open an existing database file -->
+  {{#if allowBrowse}}
+    <div class="app-card p-5">
+      <div class="mb-3 flex flex-wrap items-center justify-between gap-2">
+        <h2 class="text-sm font-semibold uppercase tracking-wide text-base-content/45">Open an existing SQLite file</h2>
+        <span class="text-xs text-base-content/40">.db · .sqlite · .sqlite3</span>
+      </div>
+      <div class="flex flex-wrap items-center gap-2">
+        <input id="fs-path" class="field-input font-mono sm:!w-96" placeholder="Absolute path to a folder, e.g. C:\data" autocomplete="off" spellcheck="false" />
+        <button id="fs-go" type="button" class="btn btn-outline btn-sm gap-1.5">
+          {{{icon "search" class="h-4 w-4"}}}
+          Go
+        </button>
+        <button id="fs-up" type="button" class="btn btn-ghost btn-sm gap-1.5">
+          {{{icon "arrowUp" class="h-4 w-4"}}}
+          Up
+        </button>
+      </div>
+      <div class="mt-2">
+        <label class="flex items-center gap-2 cursor-pointer">
+          <input type="checkbox" id="fs-readonly" class="checkbox checkbox-xs checkbox-primary rounded" />
+          <span class="text-xs font-medium text-base-content/70">Open selected file in Read-only mode</span>
+        </label>
+      </div>
+      <div class="mt-3 overflow-hidden rounded-xl border border-base-300">
+        <div id="fs-current" class="border-b border-base-200 bg-base-200/50 px-3 py-2 font-mono text-xs text-base-content/60"></div>
+        <div id="fs-listing" class="max-h-80 divide-y divide-base-200/70 overflow-auto"></div>
+      </div>
+      <p class="mt-2.5 text-xs text-base-content/45">
+        Browse the filesystem to select an existing database; opening it adds it to the list above.
+        {{#if browseRoot}}
+          <span class="font-medium text-base-content/60">Browsing is limited to <code class="font-mono">{{browseRoot}}</code>.</span>
+        {{/if}}
+      </p>
+    </div>
+  {{/if}}
+
+  <!-- Security Responsibility Notice -->
+  <div class="rounded-xl border border-warning/30 bg-warning/[0.04] p-4 text-xs text-base-content/75 leading-relaxed">
+    <div class="flex items-start gap-2.5">
+      <span class="text-warning shrink-0 mt-0.5">
+        {{{icon "warning" class="h-4 w-4"}}}
+      </span>
+      <div>
+        <span class="font-bold text-warning">Security & Protection Notice:</span>
+        AdminDB's native authentication provides basic single-user password protection. For production environments and internet-facing networks, <strong>it is entirely your responsibility to secure this interface</strong> by placing it behind your web application's own authentication system (e.g., custom Express/Next.js auth middleware, SSO/OAuth, NextAuth), a secure VPN, or an IP-whitelisted reverse proxy with HTTPS.
+      </div>
+    </div>
+  </div>
+
 </div>
 <script src="{{basePath}}/js/databases.js" defer></script>
+
+

package/dist/views/pages/designer.hbs

@@ -1,4 +1,6 @@
+{{!-- Page: Visual Table Designer & Creator · URL: /designer --}}
 <div class="space-y-6">
+
   <!-- Header -->
   <div>
     <p class="text-sm font-semibold uppercase tracking-wider text-primary">Designer</p>
@@ -21,7 +23,7 @@
         <div class="flex flex-wrap items-center justify-between gap-2 border-b border-base-200 px-5 py-4">
           <h2 class="text-sm font-semibold uppercase tracking-wide text-base-content/45">Columns</h2>
           <button id="add-column" type="button" class="btn btn-outline btn-sm gap-1.5">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" /></svg>
+            {{{icon "plus" class="h-4 w-4"}}}
             Add column
           </button>
         </div>
@@ -30,14 +32,15 @@
         <div class="flex flex-wrap gap-2 border-t border-base-200 px-5 py-4">
           {{#unless readonly}}
             <button id="create-table" type="button" class="btn btn-primary gap-1.5">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
+              {{{icon "check" class="h-4 w-4"}}}
               Create table
             </button>
           {{else}}
             <span class="text-sm font-medium text-warning">Read-only — table creation is disabled.</span>
           {{/unless}}
+
           <button id="copy-sql" type="button" class="btn btn-outline gap-1.5" title="Copy the preview SQL">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3" /></svg>
+            {{{icon "copy" class="h-4 w-4"}}}
             Copy SQL
           </button>
         </div>
@@ -50,7 +53,7 @@
         <div class="flex items-center justify-between border-b border-base-200 bg-base-200/40 px-4 py-3">
           <h2 class="flex items-center gap-2 text-sm font-semibold text-base-content/60">
             <span class="grid h-5 w-5 place-items-center rounded-md bg-primary/10 text-primary">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
+              {{{icon "query" class="h-3.5 w-3.5"}}}
             </span>
             SQL preview
           </h2>
@@ -65,14 +68,29 @@
       </div>
 
       <div class="rounded-2xl border border-base-300/70 bg-base-100 p-4">
-        <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wider text-base-content/45">Type guide</h3>
+        <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wider text-base-content/45">
+          {{#if isPostgres}}PostgreSQL Type Guide{{else}}SQLite Type Guide{{/if}}
+        </h3>
         <ul class="space-y-1.5 text-[13px] text-base-content/60">
-          <li class="flex items-center justify-between gap-2"><span class="font-mono">TEXT</span><span class="text-base-content/40">Free-form text</span></li>
-          <li class="flex items-center justify-between gap-2"><span class="font-mono">INTEGER</span><span class="text-base-content/40">Whole numbers</span></li>
-          <li class="flex items-center justify-between gap-2"><span class="font-mono">REAL</span><span class="text-base-content/40">Decimal numbers</span></li>
-          <li class="flex items-center justify-between gap-2"><span class="font-mono">BLOB</span><span class="text-base-content/40">Binary data</span></li>
-          <li class="flex items-center justify-between gap-2"><span class="font-mono">BOOLEAN</span><span class="text-base-content/40">Stored as 0/1</span></li>
-          <li class="flex items-center justify-between gap-2"><span class="font-mono">DATE</span><span class="text-base-content/40">Datetime + now default</span></li>
+          {{#if isPostgres}}
+            <li class="flex items-center justify-between gap-2"><span class="font-mono">TEXT / VARCHAR</span><span class="text-base-content/40">Free-form string</span></li>
+            <li class="flex items-center justify-between gap-2"><span class="font-mono">INTEGER / BIGINT</span><span class="text-base-content/40">Whole numbers</span></li>
+            <li class="flex items-center justify-between gap-2"><span class="font-mono">SERIAL / BIGSERIAL</span><span class="text-base-content/40">Auto-incrementing PK</span></li>
+            <li class="flex items-center justify-between gap-2"><span class="font-mono">REAL / NUMERIC</span><span class="text-base-content/40">Decimal numbers</span></li>
+            <li class="flex items-center justify-between gap-2"><span class="font-mono">BYTEA</span><span class="text-base-content/40">Binary byte data</span></li>
+            <li class="flex items-center justify-between gap-2"><span class="font-mono">BOOLEAN</span><span class="text-base-content/40">true / false</span></li>
+            <li class="flex items-center justify-between gap-2"><span class="font-mono">TIMESTAMPTZ</span><span class="text-base-content/40">Timestamp with TZ</span></li>
+            <li class="flex items-center justify-between gap-2"><span class="font-mono">JSON / JSONB</span><span class="text-base-content/40">Structured JSON</span></li>
+            <li class="flex items-center justify-between gap-2"><span class="font-mono">UUID</span><span class="text-base-content/40">UUID generator</span></li>
+          {{else}}
+            <li class="flex items-center justify-between gap-2"><span class="font-mono">TEXT</span><span class="text-base-content/40">Free-form text</span></li>
+            <li class="flex items-center justify-between gap-2"><span class="font-mono">INTEGER</span><span class="text-base-content/40">Whole numbers / PK</span></li>
+            <li class="flex items-center justify-between gap-2"><span class="font-mono">REAL</span><span class="text-base-content/40">Decimal numbers</span></li>
+            <li class="flex items-center justify-between gap-2"><span class="font-mono">BLOB</span><span class="text-base-content/40">Binary data</span></li>
+            <li class="flex items-center justify-between gap-2"><span class="font-mono">BOOLEAN</span><span class="text-base-content/40">Stored as 0/1</span></li>
+            <li class="flex items-center justify-between gap-2"><span class="font-mono">DATETIME</span><span class="text-base-content/40">ISO-8601 timestamps</span></li>
+            <li class="flex items-center justify-between gap-2"><span class="font-mono">JSON</span><span class="text-base-content/40">JSON string/functions</span></li>
+          {{/if}}
         </ul>
       </div>
     </aside>

package/dist/views/pages/error.hbs

@@ -1,8 +1,8 @@
+{{!-- Page: Error Display · URL: HTTP 404 / 500 Error Handlers --}}
 <div class="mx-auto mt-16 max-w-md space-y-6 text-center">
+
   <div class="mx-auto grid h-20 w-20 place-items-center rounded-3xl bg-error/10 text-error">
-    <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-      <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-    </svg>
+    {{{icon "warning" class="h-10 w-10"}}}
   </div>
   <div>
     <h1 class="text-5xl font-extrabold tracking-tight text-error">{{status}}</h1>

package/dist/views/pages/form.hbs

@@ -1,8 +1,10 @@
+{{!-- Page: Row Editor & Inserter · URL: /tables/:table/rows/new or /tables/:table/rows/:id/edit --}}
 <div class="mx-auto max-w-3xl space-y-5">
+
   <!-- Header -->
   <div class="flex items-center gap-3">
     <a href="{{basePath}}/tables/{{table}}" class="btn btn-circle btn-ghost btn-sm" aria-label="Back to table">
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18" /></svg>
+      {{{icon "arrowLeft" class="h-5 w-5"}}}
     </a>
     <div>
       <h1 class="text-2xl font-bold tracking-tight">
@@ -26,7 +28,7 @@
             {{#if (eq mode 'edit')}}Update row{{else}}Insert row{{/if}}
           </button>
           <button id="row-generate" type="button" class="btn btn-outline gap-1.5">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" /></svg>
+            {{{icon "sql" class="h-4 w-4"}}}
             Get query
           </button>
         {{else}}
@@ -46,7 +48,7 @@
       <div class="flex items-center justify-between border-b border-base-200 px-6 py-4">
         <h2 class="flex items-center gap-2 text-sm font-semibold uppercase tracking-wide text-base-content/45">
           <span class="grid h-6 w-6 place-items-center rounded-md bg-primary/10 text-primary">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" /></svg>
+            {{{icon "sql" class="h-4 w-4"}}}
           </span>
           Generated SQL
         </h2>