admindb 1.0.1 → 1.0.3

package/dist/views/pages/home.hbs

@@ -1,123 +1,123 @@
-<div class="space-y-8">
-  <!-- Header -->
-  <div class="flex flex-wrap items-end justify-between gap-4">
-    <div>
-      <p class="text-sm font-semibold uppercase tracking-wider text-primary">Overview</p>
-      <h1 class="mt-1 text-3xl font-extrabold tracking-tight">Database</h1>
-      <p class="mt-1.5 text-sm text-base-content/55">Browse, edit, and query the connected SQLite database from your browser.</p>
-    </div>
-    <div class="flex gap-2">
-      <a href="{{basePath}}/query" 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="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
-        Query
-      </a>
-      {{#unless readonly}}
-        <a href="{{basePath}}/designer" class="btn btn-primary 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>
-          New table
-        </a>
-      {{/unless}}
-    </div>
-  </div>
-
-  <!-- Stat cards -->
-  <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
-    <div class="stat-card">
-      <span class="stat-icon bg-primary/10 text-primary">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
-      </span>
-      <div>
-        <div class="text-2xl font-extrabold tabular-nums">{{tables.length}}</div>
-        <div class="text-[13px] text-base-content/50">Tables</div>
-      </div>
-    </div>
-    <div class="stat-card">
-      <span class="stat-icon bg-secondary/10 text-secondary">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
-      </span>
-      <div>
-        <div class="text-2xl font-extrabold tabular-nums">{{totalRows}}</div>
-        <div class="text-[13px] text-base-content/50">Total rows</div>
-      </div>
-    </div>
-    <div class="stat-card">
-      <span class="stat-icon bg-accent/10 text-accent">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" /></svg>
-      </span>
-      <div>
-        <div class="text-2xl font-extrabold tabular-nums">{{savedQueries}}</div>
-        <div class="text-[13px] text-base-content/50">Saved queries</div>
-      </div>
-    </div>
-    <div class="stat-card">
-      <span class="stat-icon bg-warning/10 text-warning">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" 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>
-      <div>
-        <div class="truncate font-mono text-lg font-bold" title="{{dbPath}}">{{dbPath}}</div>
-        <div class="text-[13px] text-base-content/50">Database file</div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Tables -->
-  <div>
-    <div class="mb-3 flex items-center justify-between">
-      <h2 class="text-lg font-bold">Tables</h2>
-      <span class="text-sm text-base-content/45">{{tables.length}} total</span>
-    </div>
-
-    {{#if tables.length}}
-      <div class="app-card overflow-hidden">
-        <div class="overflow-x-auto">
-          <table class="table table-sm">
-            <thead>
-              <tr class="bg-base-200/70 text-xs uppercase tracking-wide text-base-content/50">
-                <th class="font-semibold">Table</th>
-                <th class="text-right font-semibold">Columns</th>
-                <th class="text-right font-semibold">Rows</th>
-                <th class="text-right font-semibold">Actions</th>
-              </tr>
-            </thead>
-            <tbody>
-              {{#each tables}}
-                <tr class="group hover:bg-base-200/50">
-                  <td>
-                    <a href="{{../basePath}}/tables/{{this}}" class="inline-flex items-center gap-2.5 font-medium">
-                      <span class="grid h-8 w-8 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="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
-                      </span>
-                      <span class="font-mono text-[13.5px]">{{this}}</span>
-                    </a>
-                  </td>
-                  <td class="text-right tabular-nums text-base-content/60">{{lookup ../cols this}}</td>
-                  <td class="text-right tabular-nums text-base-content/60">{{lookup ../counts this}}</td>
-                  <td class="text-right">
-                    <a href="{{../basePath}}/tables/{{this}}" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary">
-                      Browse
-                      <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>
-                    </a>
-                  </td>
-                </tr>
-              {{/each}}
-            </tbody>
-          </table>
-        </div>
-      </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="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
-        </span>
-        <p class="text-sm font-medium text-base-content/70">No tables yet</p>
-        <p class="max-w-sm text-sm text-base-content/45">Create one with the table designer, or run a SQL statement in the query editor to get started.</p>
-        <div class="mt-2 flex gap-2">
-          {{#unless readonly}}
-            <a href="{{basePath}}/designer" class="btn btn-primary btn-sm">New table</a>
-          {{/unless}}
-          <a href="{{basePath}}/query" class="btn btn-outline btn-sm">Query editor</a>
-        </div>
-      </div>
-    {{/if}}
-  </div>
-</div>
+<div class="space-y-8">
+  <!-- Header -->
+  <div class="flex flex-wrap items-end justify-between gap-4">
+    <div>
+      <p class="text-sm font-semibold uppercase tracking-wider text-primary">Overview</p>
+      <h1 class="mt-1 text-3xl font-extrabold tracking-tight">Database</h1>
+      <p class="mt-1.5 text-sm text-base-content/55">Browse, edit, and query the connected SQLite database from your browser.</p>
+    </div>
+    <div class="flex gap-2">
+      <a href="{{basePath}}/query" 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="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
+        Query
+      </a>
+      {{#unless readonly}}
+        <a href="{{basePath}}/designer" class="btn btn-primary 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>
+          New table
+        </a>
+      {{/unless}}
+    </div>
+  </div>
+
+  <!-- Stat cards -->
+  <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
+    <div class="stat-card">
+      <span class="stat-icon bg-primary/10 text-primary">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
+      </span>
+      <div>
+        <div class="text-2xl font-extrabold tabular-nums">{{tables.length}}</div>
+        <div class="text-[13px] text-base-content/50">Tables</div>
+      </div>
+    </div>
+    <div class="stat-card">
+      <span class="stat-icon bg-secondary/10 text-secondary">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
+      </span>
+      <div>
+        <div class="text-2xl font-extrabold tabular-nums">{{totalRows}}</div>
+        <div class="text-[13px] text-base-content/50">Total rows</div>
+      </div>
+    </div>
+    <div class="stat-card">
+      <span class="stat-icon bg-accent/10 text-accent">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" /></svg>
+      </span>
+      <div>
+        <div class="text-2xl font-extrabold tabular-nums">{{savedQueries}}</div>
+        <div class="text-[13px] text-base-content/50">Saved queries</div>
+      </div>
+    </div>
+    <div class="stat-card">
+      <span class="stat-icon bg-warning/10 text-warning">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" 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>
+      <div>
+        <div class="truncate font-mono text-lg font-bold" title="{{dbPath}}">{{dbPath}}</div>
+        <div class="text-[13px] text-base-content/50">Database file</div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Tables -->
+  <div>
+    <div class="mb-3 flex items-center justify-between">
+      <h2 class="text-lg font-bold">Tables</h2>
+      <span class="text-sm text-base-content/45">{{tables.length}} total</span>
+    </div>
+
+    {{#if tables.length}}
+      <div class="app-card overflow-hidden">
+        <div class="overflow-x-auto">
+          <table class="table table-sm">
+            <thead>
+              <tr class="bg-base-200/70 text-xs uppercase tracking-wide text-base-content/50">
+                <th class="font-semibold">Table</th>
+                <th class="text-right font-semibold">Columns</th>
+                <th class="text-right font-semibold">Rows</th>
+                <th class="text-right font-semibold">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {{#each tables}}
+                <tr class="group hover:bg-base-200/50">
+                  <td>
+                    <a href="{{../basePath}}/tables/{{this}}" class="inline-flex items-center gap-2.5 font-medium">
+                      <span class="grid h-8 w-8 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="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
+                      </span>
+                      <span class="font-mono text-[13.5px]">{{this}}</span>
+                    </a>
+                  </td>
+                  <td class="text-right tabular-nums text-base-content/60">{{lookup ../cols this}}</td>
+                  <td class="text-right tabular-nums text-base-content/60">{{lookup ../counts this}}</td>
+                  <td class="text-right">
+                    <a href="{{../basePath}}/tables/{{this}}" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary">
+                      Browse
+                      <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>
+                    </a>
+                  </td>
+                </tr>
+              {{/each}}
+            </tbody>
+          </table>
+        </div>
+      </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="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
+        </span>
+        <p class="text-sm font-medium text-base-content/70">No tables yet</p>
+        <p class="max-w-sm text-sm text-base-content/45">Create one with the table designer, or run a SQL statement in the query editor to get started.</p>
+        <div class="mt-2 flex gap-2">
+          {{#unless readonly}}
+            <a href="{{basePath}}/designer" class="btn btn-primary btn-sm">New table</a>
+          {{/unless}}
+          <a href="{{basePath}}/query" class="btn btn-outline btn-sm">Query editor</a>
+        </div>
+      </div>
+    {{/if}}
+  </div>
+</div>

package/dist/views/pages/query.hbs

@@ -1,94 +1,94 @@
-<div class="space-y-6">
-  <!-- Header -->
-  <div class="flex flex-wrap items-center justify-between gap-3">
-    <div>
-      <p class="text-sm font-semibold uppercase tracking-wider text-primary">Workspace</p>
-      <h1 class="mt-1 text-3xl font-extrabold tracking-tight">Query editor</h1>
-      <p class="mt-1.5 text-sm text-base-content/55">Run arbitrary SQL — SELECT results render as a table, COUNT gives a summary, and write statements execute.</p>
-    </div>
-    <div class="flex flex-wrap gap-2">
-      {{#unless readonly}}
-        <button id="save-query" 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="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" /></svg>
-          Save query
-        </button>
-      {{/unless}}
-      <button id="run-query" type="button" class="btn btn-primary 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="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" /><path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
-        Run
-      </button>
-    </div>
-  </div>
-
-  <!-- Saved queries row -->
-  <div class="flex flex-wrap items-end gap-3">
-    <div class="form-control w-full max-w-xs">
-      <label class="field-label" for="saved-query-select">Saved queries</label>
-      <select id="saved-query-select" class="field-select">
-        <option value="">— select a saved query —</option>
-        {{#each savedQueries}}
-          <option value="{{this.id}}">{{this.name}}</option>
-        {{/each}}
-      </select>
-    </div>
-    {{#unless readonly}}
-      <button id="delete-query" type="button" class="btn btn-ghost btn-sm mb-0.5 text-error" disabled>Delete saved</button>
-      <div class="form-control w-full max-w-xs">
-        <label class="field-label" for="save-query-name">Save current SQL as</label>
-        <div class="join w-full">
-          <input id="save-query-name" type="text" class="field-input join-item !rounded-r-none" placeholder="query name" autocomplete="off" />
-          <button id="save-query-inline" type="button" class="btn btn-outline join-item">Save</button>
-        </div>
-      </div>
-    {{/unless}}
-  </div>
-
-  <!-- Editor -->
-  <div class="app-card overflow-hidden">
-    <div class="flex items-center justify-between border-b border-base-200 bg-base-200/40 px-4 py-2.5">
-      <span 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>
-        </span>
-        query.sql
-      </span>
-      <span class="text-[11px] text-base-content/40">Ctrl/⌘ + Enter to run</span>
-    </div>
-    <div class="p-3">
-      <div class="sql-editor-wrap">
-        <pre id="query-gutter" class="sql-gutter" aria-hidden="true">1</pre>
-        <textarea id="query-sql" class="sql-input" rows="10" placeholder="SELECT * FROM users WHERE …" spellcheck="false"></textarea>
-      </div>
-      <div id="query-message" class="mt-3"></div>
-    </div>
-  </div>
-
-  <!-- Results -->
-  <div id="query-result" class="hidden">
-    <div class="app-card overflow-hidden">
-      <div class="flex items-center gap-2 border-b border-base-200 px-4 py-3">
-        <span id="result-kind" class="grid h-6 w-6 place-items-center rounded-md bg-success/10 text-success">
-          <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>
-        </span>
-        <span id="result-summary" class="text-sm font-medium text-base-content/60"></span>
-        <div class="ml-auto flex items-center gap-1.5">
-          <button id="export-csv" type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary" disabled>
-            <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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
-            CSV
-          </button>
-          <button id="export-json" type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary" disabled>
-            <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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
-            JSON
-          </button>
-        </div>
-      </div>
-      <div class="overflow-x-auto">
-        <table class="table table-sm table-pin-rows">
-          <thead id="query-result-head" class="bg-base-200/70 text-xs uppercase tracking-wide text-base-content/50"></thead>
-          <tbody id="query-result-body"></tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-<script src="{{basePath}}/js/query.js" defer></script>
+<div class="space-y-6">
+  <!-- Header -->
+  <div class="flex flex-wrap items-center justify-between gap-3">
+    <div>
+      <p class="text-sm font-semibold uppercase tracking-wider text-primary">Workspace</p>
+      <h1 class="mt-1 text-3xl font-extrabold tracking-tight">Query editor</h1>
+      <p class="mt-1.5 text-sm text-base-content/55">Run arbitrary SQL — SELECT results render as a table, COUNT gives a summary, and write statements execute.</p>
+    </div>
+    <div class="flex flex-wrap gap-2">
+      {{#unless readonly}}
+        <button id="save-query" 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="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" /></svg>
+          Save query
+        </button>
+      {{/unless}}
+      <button id="run-query" type="button" class="btn btn-primary 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="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" /><path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+        Run
+      </button>
+    </div>
+  </div>
+
+  <!-- Saved queries row -->
+  <div class="flex flex-wrap items-end gap-3">
+    <div class="form-control w-full max-w-xs">
+      <label class="field-label" for="saved-query-select">Saved queries</label>
+      <select id="saved-query-select" class="field-select">
+        <option value="">— select a saved query —</option>
+        {{#each savedQueries}}
+          <option value="{{this.id}}">{{this.name}}</option>
+        {{/each}}
+      </select>
+    </div>
+    {{#unless readonly}}
+      <button id="delete-query" type="button" class="btn btn-ghost btn-sm mb-0.5 text-error" disabled>Delete saved</button>
+      <div class="form-control w-full max-w-xs">
+        <label class="field-label" for="save-query-name">Save current SQL as</label>
+        <div class="join w-full">
+          <input id="save-query-name" type="text" class="field-input join-item !rounded-r-none" placeholder="query name" autocomplete="off" />
+          <button id="save-query-inline" type="button" class="btn btn-outline join-item">Save</button>
+        </div>
+      </div>
+    {{/unless}}
+  </div>
+
+  <!-- Editor -->
+  <div class="app-card overflow-hidden">
+    <div class="flex items-center justify-between border-b border-base-200 bg-base-200/40 px-4 py-2.5">
+      <span 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>
+        </span>
+        query.sql
+      </span>
+      <span class="text-[11px] text-base-content/40">Ctrl/⌘ + Enter to run</span>
+    </div>
+    <div class="p-3">
+      <div class="sql-editor-wrap">
+        <pre id="query-gutter" class="sql-gutter" aria-hidden="true">1</pre>
+        <textarea id="query-sql" class="sql-input" rows="10" placeholder="SELECT * FROM users WHERE …" spellcheck="false"></textarea>
+      </div>
+      <div id="query-message" class="mt-3"></div>
+    </div>
+  </div>
+
+  <!-- Results -->
+  <div id="query-result" class="hidden">
+    <div class="app-card overflow-hidden">
+      <div class="flex items-center gap-2 border-b border-base-200 px-4 py-3">
+        <span id="result-kind" class="grid h-6 w-6 place-items-center rounded-md bg-success/10 text-success">
+          <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>
+        </span>
+        <span id="result-summary" class="text-sm font-medium text-base-content/60"></span>
+        <div class="ml-auto flex items-center gap-1.5">
+          <button id="export-csv" type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary" disabled>
+            <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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
+            CSV
+          </button>
+          <button id="export-json" type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary" disabled>
+            <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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
+            JSON
+          </button>
+        </div>
+      </div>
+      <div class="overflow-x-auto">
+        <table class="table table-sm table-pin-rows">
+          <thead id="query-result-head" class="bg-base-200/70 text-xs uppercase tracking-wide text-base-content/50"></thead>
+          <tbody id="query-result-body"></tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</div>
+<script src="{{basePath}}/js/query.js" defer></script>