lopata 0.0.1

package/runtime/dashboard/sql-browser/filter-row.tsx

@@ -0,0 +1,99 @@
+import { useRef } from "preact/hooks";
+import { Modal } from "../components/modal";
+
+export function FilterRow({ columns, filters, onFilterChange, onClearAll, hasCheckboxCol }: {
+  columns: string[];
+  filters: Record<string, string>;
+  onFilterChange: (col: string, value: string) => void;
+  onClearAll: () => void;
+  hasCheckboxCol?: boolean;
+}) {
+  const debounceRef = useRef<Record<string, ReturnType<typeof setTimeout>>>({});
+  const hasAny = Object.values(filters).some(v => v.trim());
+
+  const handleInput = (col: string, value: string) => {
+    clearTimeout(debounceRef.current[col]);
+    debounceRef.current[col] = setTimeout(() => {
+      onFilterChange(col, value);
+    }, 400);
+  };
+
+  return (
+    <tr class="border-b border-border-subtle bg-panel-hover/50">
+      {hasCheckboxCol && <th class="w-10 px-3 py-1.5"></th>}
+      {columns.map(col => (
+        <th key={col} class="px-4 py-1.5">
+          <input
+            type="text"
+            placeholder="filter..."
+            defaultValue={filters[col] ?? ""}
+            onInput={e => handleInput(col, (e.target as HTMLInputElement).value)}
+            onKeyDown={e => {
+              if (e.key === "Enter") {
+                clearTimeout(debounceRef.current[col]);
+                onFilterChange(col, (e.target as HTMLInputElement).value);
+              }
+            }}
+            class="w-full bg-panel-secondary border border-border rounded px-2 py-1 font-mono text-xs font-normal outline-none focus:border-text-dim focus:ring-1 focus:ring-text-dim/30 placeholder:text-text-dim transition-all"
+          />
+        </th>
+      ))}
+      <th class="px-4 py-1.5">
+        {hasAny && (
+          <button
+            onClick={onClearAll}
+            class="text-xs text-text-muted hover:text-text-data transition-colors whitespace-nowrap"
+            title="Clear all filters"
+          >
+            clear
+          </button>
+        )}
+      </th>
+    </tr>
+  );
+}
+
+// ─── FilterHelpModal ─────────────────────────────────────────────────
+
+const FILTER_HELP: { expr: string; desc: string; example: string }[] = [
+  { expr: "text", desc: "Contains (case-insensitive match)", example: "alice" },
+  { expr: "=value", desc: "Exact match", example: "=pending" },
+  { expr: "!value", desc: "Not equal", example: "!cancelled" },
+  { expr: ">value", desc: "Greater than", example: ">100" },
+  { expr: "<value", desc: "Less than", example: "<50" },
+  { expr: ">=value", desc: "Greater or equal", example: ">=10.5" },
+  { expr: "<=value", desc: "Less or equal", example: "<=99" },
+  { expr: "%pat%", desc: "LIKE pattern (% = any, _ = one char)", example: "%@example%" },
+  { expr: "NULL", desc: "Value is NULL", example: "NULL" },
+  { expr: "!NULL", desc: "Value is not NULL", example: "!NULL" },
+];
+
+export function FilterHelpModal({ onClose }: { onClose: () => void }) {
+  return (
+    <Modal title="Filter Syntax" onClose={onClose} maxWidth="max-w-md">
+      <div class="px-5 py-3">
+        <table class="w-full text-sm">
+          <thead>
+            <tr class="text-xs text-text-muted uppercase tracking-wider">
+              <th class="text-left py-1.5 font-medium">Expression</th>
+              <th class="text-left py-1.5 font-medium">Description</th>
+              <th class="text-left py-1.5 font-medium">Example</th>
+            </tr>
+          </thead>
+          <tbody>
+            {FILTER_HELP.map(h => (
+              <tr key={h.expr} class="border-t border-border-row">
+                <td class="py-1.5 pr-3"><code class="text-xs font-mono bg-panel-secondary px-1.5 py-0.5 rounded text-ink">{h.expr}</code></td>
+                <td class="py-1.5 pr-3 text-xs text-text-secondary">{h.desc}</td>
+                <td class="py-1.5"><code class="text-xs font-mono text-text-muted">{h.example}</code></td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      <div class="px-5 py-3 border-t border-border-subtle text-xs text-text-muted">
+        Filters apply per column. Multiple column filters combine with AND.
+      </div>
+    </Modal>
+  );
+}

package/runtime/dashboard/sql-browser/history-panels.tsx

@@ -0,0 +1,110 @@
+import type { HistoryEntry, BrowserHistoryEntry } from "./types";
+
+function formatTime(ts: number) {
+  const d = new Date(ts);
+  const now = new Date();
+  const isToday = d.toDateString() === now.toDateString();
+  const time = d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  return isToday ? time : `${d.toLocaleDateString([], { month: "short", day: "numeric" })} ${time}`;
+}
+
+// ─── HistoryPanel ────────────────────────────────────────────────────
+
+export function HistoryPanel({ entries, onSelect, onClear }: {
+  entries: HistoryEntry[];
+  onSelect: (entry: HistoryEntry) => void;
+  onClear: () => void;
+}) {
+  if (entries.length === 0) {
+    return (
+      <div class="bg-panel rounded-lg border border-border p-5 mb-6 text-center text-sm text-text-muted">
+        No history yet
+      </div>
+    );
+  }
+
+  return (
+    <div class="bg-panel rounded-lg border border-border mb-6 overflow-hidden">
+      <div class="flex items-center justify-between px-4 py-2.5 border-b border-border-subtle bg-panel-hover/50">
+        <span class="text-xs font-semibold text-text-muted uppercase tracking-wider">Query History</span>
+        <button onClick={onClear} class="text-xs text-text-muted hover:text-red-500 transition-colors">Clear all</button>
+      </div>
+      <div class="max-h-64 overflow-y-auto divide-y divide-border-row">
+        {entries.map((entry, i) => (
+          <button
+            key={i}
+            onClick={() => onSelect(entry)}
+            class="w-full text-left px-4 py-2.5 hover:bg-panel-hover transition-colors flex items-center gap-3 group"
+          >
+            <code class="flex-1 text-xs font-mono text-text-data truncate group-hover:text-ink transition-colors">{entry.sql}</code>
+            <span class="text-[10px] text-text-dim tabular-nums flex-shrink-0">{formatTime(entry.ts)}</span>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// ─── BrowserHistoryPanel ─────────────────────────────────────────────
+
+export function BrowserHistoryPanel({ entries, currentTable, onSelect, onClear }: {
+  entries: BrowserHistoryEntry[];
+  currentTable: string;
+  onSelect: (entry: BrowserHistoryEntry) => void;
+  onClear: () => void;
+}) {
+  if (entries.length === 0) {
+    return (
+      <div class="bg-panel rounded-lg border border-border p-5 mb-4 text-center text-sm text-text-muted">
+        No history yet — filter or sort a table to save an entry
+      </div>
+    );
+  }
+
+  const formatFilters = (filters: Record<string, string>) => {
+    const parts = Object.entries(filters).filter(([, v]) => v.trim());
+    if (parts.length === 0) return null;
+    return parts.map(([col, val]) => `${col}: ${val}`).join(", ");
+  };
+
+  return (
+    <div class="bg-panel rounded-lg border border-border mb-4 overflow-hidden">
+      <div class="flex items-center justify-between px-4 py-2.5 border-b border-border-subtle bg-panel-hover/50">
+        <span class="text-xs font-semibold text-text-muted uppercase tracking-wider">Browser History</span>
+        <button onClick={onClear} class="text-xs text-text-muted hover:text-red-500 transition-colors">Clear all</button>
+      </div>
+      <div class="max-h-64 overflow-y-auto divide-y divide-border-row">
+        {entries.map((entry, i) => {
+          const filterStr = formatFilters(entry.filters);
+          const isSameTable = entry.table === currentTable;
+          return (
+            <button
+              key={i}
+              onClick={() => onSelect(entry)}
+              class="w-full text-left px-4 py-2.5 hover:bg-panel-hover transition-colors group"
+            >
+              <div class="flex items-center gap-2 mb-1">
+                <span class={`font-mono text-xs font-semibold ${isSameTable ? "text-ink" : "text-accent-olive"}`}>{entry.table}</span>
+                <span class="text-[10px] text-text-dim tabular-nums">{formatTime(entry.ts)}</span>
+              </div>
+              <div class="flex flex-wrap gap-x-3 gap-y-0.5">
+                {filterStr && (
+                  <span class="text-xs text-text-secondary">
+                    <span class="text-text-muted">filter:</span>{" "}
+                    <span class="font-mono">{filterStr}</span>
+                  </span>
+                )}
+                {entry.sortCol && (
+                  <span class="text-xs text-text-secondary">
+                    <span class="text-text-muted">order:</span>{" "}
+                    <span class="font-mono">{entry.sortCol} {entry.sortDir}</span>
+                  </span>
+                )}
+              </div>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/runtime/dashboard/sql-browser/hooks.ts

@@ -0,0 +1,137 @@
+import { useState, useCallback } from "preact/hooks";
+import type { HistoryEntry, BrowserHistoryEntry, SortDir } from "./types";
+
+// ─── Query history (localStorage, scoped per database) ───────────────
+
+const HISTORY_PREFIX = "bunflare-sql-history";
+const HISTORY_MAX = 100;
+
+function historyKey(scope?: string): string {
+  return scope ? `${HISTORY_PREFIX}:${scope}` : HISTORY_PREFIX;
+}
+
+function loadHistory(scope?: string): HistoryEntry[] {
+  try {
+    const raw = localStorage.getItem(historyKey(scope));
+    return raw ? JSON.parse(raw) : [];
+  } catch {
+    return [];
+  }
+}
+
+function saveToHistory(sql: string, scope?: string): HistoryEntry[] {
+  const trimmed = sql.trim();
+  if (!trimmed) return loadHistory(scope);
+  const entries = loadHistory(scope);
+  // Deduplicate: remove existing entry with same SQL
+  const filtered = entries.filter(e => e.sql !== trimmed);
+  const next = [{ sql: trimmed, ts: Date.now() }, ...filtered].slice(0, HISTORY_MAX);
+  localStorage.setItem(historyKey(scope), JSON.stringify(next));
+  return next;
+}
+
+function clearHistory(scope?: string): HistoryEntry[] {
+  localStorage.removeItem(historyKey(scope));
+  return [];
+}
+
+export function useHistory(scope?: string) {
+  const [entries, setEntries] = useState<HistoryEntry[]>(() => loadHistory(scope));
+  const add = useCallback((sql: string) => {
+    setEntries(saveToHistory(sql, scope));
+  }, [scope]);
+  const clear = useCallback(() => {
+    setEntries(clearHistory(scope));
+  }, [scope]);
+  return { entries, add, clear };
+}
+
+// ─── Browser history (structured, localStorage, scoped per database) ─
+
+const BROWSER_HISTORY_PREFIX = "bunflare-browser-history";
+const BROWSER_HISTORY_MAX = 50;
+
+function browserHistoryKey(scope?: string): string {
+  return scope ? `${BROWSER_HISTORY_PREFIX}:${scope}` : BROWSER_HISTORY_PREFIX;
+}
+
+function loadBrowserHistory(scope?: string): BrowserHistoryEntry[] {
+  try {
+    const raw = localStorage.getItem(browserHistoryKey(scope));
+    return raw ? JSON.parse(raw) : [];
+  } catch {
+    return [];
+  }
+}
+
+function saveToBrowserHistory(entry: Omit<BrowserHistoryEntry, "ts">, scope?: string): BrowserHistoryEntry[] {
+  const entries = loadBrowserHistory(scope);
+  // Deduplicate by same table + filters + sort
+  const key = JSON.stringify({ t: entry.table, f: entry.filters, s: entry.sortCol, d: entry.sortDir });
+  const filtered = entries.filter(e =>
+    JSON.stringify({ t: e.table, f: e.filters, s: e.sortCol, d: e.sortDir }) !== key
+  );
+  const next = [{ ...entry, ts: Date.now() }, ...filtered].slice(0, BROWSER_HISTORY_MAX);
+  localStorage.setItem(browserHistoryKey(scope), JSON.stringify(next));
+  return next;
+}
+
+function clearBrowserHistory(scope?: string): BrowserHistoryEntry[] {
+  localStorage.removeItem(browserHistoryKey(scope));
+  return [];
+}
+
+export function useBrowserHistory(scope?: string) {
+  const [entries, setEntries] = useState<BrowserHistoryEntry[]>(() => loadBrowserHistory(scope));
+  const add = useCallback((entry: Omit<BrowserHistoryEntry, "ts">) => {
+    setEntries(saveToBrowserHistory(entry, scope));
+  }, [scope]);
+  const clear = useCallback(() => {
+    setEntries(clearBrowserHistory(scope));
+  }, [scope]);
+  return { entries, add, clear };
+}
+
+// ─── Per-table view state (filters + sort, localStorage) ────────────
+
+const TABLE_STATE_PREFIX = "bunflare-table-state";
+
+interface TableViewState {
+  filters: Record<string, string>;
+  sortCol: string | null;
+  sortDir: SortDir;
+}
+
+function tableStateKey(scope?: string): string {
+  return scope ? `${TABLE_STATE_PREFIX}:${scope}` : TABLE_STATE_PREFIX;
+}
+
+export function loadTableState(table: string, scope?: string): TableViewState | null {
+  try {
+    const raw = localStorage.getItem(tableStateKey(scope));
+    if (!raw) return null;
+    const all = JSON.parse(raw);
+    return all[table] ?? null;
+  } catch {
+    return null;
+  }
+}
+
+export function saveTableState(table: string, state: TableViewState, scope?: string): void {
+  try {
+    const raw = localStorage.getItem(tableStateKey(scope));
+    const all = raw ? JSON.parse(raw) : {};
+    all[table] = state;
+    localStorage.setItem(tableStateKey(scope), JSON.stringify(all));
+  } catch {}
+}
+
+export function clearTableState(table: string, scope?: string): void {
+  try {
+    const raw = localStorage.getItem(tableStateKey(scope));
+    if (!raw) return;
+    const all = JSON.parse(raw);
+    delete all[table];
+    localStorage.setItem(tableStateKey(scope), JSON.stringify(all));
+  } catch {}
+}

package/runtime/dashboard/sql-browser/index.ts

@@ -0,0 +1,4 @@
+export { SqlBrowser } from "./sql-browser";
+export type { SqlBrowserProps, Tab } from "./types";
+export { parseCreateTable } from "./utils";
+export { sqlLiteral } from "./utils";

package/runtime/dashboard/sql-browser/insert-row-form.tsx

@@ -0,0 +1,85 @@
+import { useState } from "preact/hooks";
+import type { TableSchema } from "./types";
+
+export function InsertRowForm({ schema, displayCols, onSave, onCancel, hasCheckboxCol }: {
+  schema: TableSchema;
+  displayCols: string[];
+  onSave: (values: Record<string, unknown>) => void;
+  onCancel: () => void;
+  hasCheckboxCol?: boolean;
+}) {
+  const [values, setValues] = useState<Record<string, string>>({});
+  const [nulls, setNulls] = useState<Record<string, boolean>>(() => {
+    const n: Record<string, boolean> = {};
+    for (const col of schema.columns) {
+      // Default autoincrement PKs to NULL
+      if (col.autoIncrement) n[col.name] = true;
+    }
+    return n;
+  });
+
+  const handleSave = () => {
+    const result: Record<string, unknown> = {};
+    for (const col of displayCols) {
+      const colInfo = schema.columns.find(c => c.name === col);
+      if (colInfo?.autoIncrement && nulls[col]) continue; // omit autoincrement columns set to NULL
+      if (nulls[col]) {
+        result[col] = null;
+      } else {
+        result[col] = values[col] ?? "";
+      }
+    }
+    onSave(result);
+  };
+
+  return (
+    <tr class="border-b border-emerald-100 bg-emerald-50/30">
+      {hasCheckboxCol && <td class="w-10 px-3 py-2"></td>}
+      {displayCols.map(col => {
+        const colInfo = schema.columns.find(c => c.name === col);
+        const isAutoInc = colInfo?.autoIncrement ?? false;
+        const isNullVal = nulls[col] ?? false;
+        return (
+          <td key={col} class="px-4 py-2">
+            <div class="flex items-center gap-1">
+              <input
+                type="text"
+                value={isNullVal ? "" : (values[col] ?? "")}
+                disabled={isNullVal}
+                placeholder={isAutoInc ? "auto" : colInfo?.type ?? ""}
+                onInput={e => setValues(v => ({ ...v, [col]: (e.target as HTMLInputElement).value }))}
+                onKeyDown={e => { if (e.key === "Enter") handleSave(); else if (e.key === "Escape") onCancel(); }}
+                class={`w-full bg-panel border border-border rounded px-2 py-1 font-mono text-xs outline-none focus:border-ink focus:ring-1 focus:ring-border ${isNullVal ? "opacity-40" : ""}`}
+              />
+              <button
+                onClick={() => setNulls(n => ({ ...n, [col]: !n[col] }))}
+                title={isNullVal ? "Set to value" : "Set to NULL"}
+                class={`flex-shrink-0 rounded px-1.5 py-1 text-xs font-bold transition-colors ${
+                  isNullVal ? "bg-amber-100 text-amber-700" : "bg-panel-hover text-text-muted hover:bg-panel-active"
+                }`}
+              >
+                N
+              </button>
+            </div>
+          </td>
+        );
+      })}
+      <td class="px-4 py-2">
+        <div class="flex items-center gap-1">
+          <button
+            onClick={handleSave}
+            class="rounded px-2 py-1 text-xs font-medium bg-emerald-500 text-white hover:bg-emerald-600 transition-colors"
+          >
+            Save
+          </button>
+          <button
+            onClick={onCancel}
+            class="rounded px-2 py-1 text-xs font-medium text-text-muted hover:text-text-data transition-colors"
+          >
+            Cancel
+          </button>
+        </div>
+      </td>
+    </tr>
+  );
+}

package/runtime/dashboard/sql-browser/modals.tsx

@@ -0,0 +1,116 @@
+import { useState } from "preact/hooks";
+import type { ForeignKeyInfo } from "./types";
+import { Modal } from "../components/modal";
+
+// ─── RowDetailModal ──────────────────────────────────────────────────
+
+export function RowDetailModal({ columns, row, fkMap, onClose, onNavigateFK }: {
+  columns: string[];
+  row: Record<string, unknown>;
+  fkMap: Map<string, ForeignKeyInfo>;
+  onClose: () => void;
+  onNavigateFK?: (targetTable: string, targetColumn: string, value: unknown) => void;
+}) {
+  const [copied, setCopied] = useState<string | null>(null);
+
+  const copyValue = (col: string, value: unknown) => {
+    navigator.clipboard.writeText(value === null ? "NULL" : String(value));
+    setCopied(col);
+    setTimeout(() => setCopied(null), 1500);
+  };
+
+  return (
+    <Modal title="Row Detail" onClose={onClose}>
+      <div class="overflow-y-auto flex-1 divide-y divide-border-row">
+        {columns.map(col => {
+          const value = row[col];
+          const fk = fkMap.get(col);
+          const strVal = value === null ? "" : String(value);
+          let formatted = strVal;
+          let isJson = false;
+          if (value !== null && strVal.length > 0) {
+            try { formatted = JSON.stringify(JSON.parse(strVal), null, 2); isJson = true; } catch {}
+          }
+          return (
+            <div key={col} class="px-5 py-3 flex gap-4 group">
+              <div class="w-1/3 flex-shrink-0 flex items-start gap-1.5 pt-0.5">
+                <span class="font-mono text-xs font-medium text-text-secondary">{col}</span>
+                {fk && <span class="text-[10px] font-semibold bg-link/10 text-link px-1 py-0.5 rounded">FK</span>}
+                {isJson && <span class="text-[10px] font-semibold bg-link/10 text-link px-1 py-0.5 rounded">JSON</span>}
+              </div>
+              <div class="flex-1 min-w-0 flex items-start gap-2">
+                {value === null ? (
+                  <span class="text-text-dim italic text-xs">NULL</span>
+                ) : fk && onNavigateFK ? (
+                  <button
+                    onClick={() => { onNavigateFK(fk.targetTable, fk.targetColumn, value); onClose(); }}
+                    class="font-mono text-xs text-link hover:opacity-80 hover:underline text-left"
+                  >
+                    {strVal} &rarr; {fk.targetTable}
+                  </button>
+                ) : (
+                  <pre class="font-mono text-xs whitespace-pre-wrap break-all flex-1 min-w-0">{formatted}</pre>
+                )}
+                <button
+                  onClick={() => copyValue(col, value)}
+                  class="opacity-0 group-hover:opacity-100 text-[10px] text-text-muted hover:text-text-data flex-shrink-0 px-1 py-0.5 rounded bg-panel-secondary hover:bg-panel-hover transition-all"
+                >
+                  {copied === col ? "ok" : "copy"}
+                </button>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </Modal>
+  );
+}
+
+// ─── CellInspectorModal ─────────────────────────────────────────────
+
+export function CellInspectorModal({ column, value, onClose }: {
+  column: string;
+  value: unknown;
+  onClose: () => void;
+}) {
+  const [copied, setCopied] = useState(false);
+  const strValue = value === null ? "NULL" : String(value);
+
+  let formatted = strValue;
+  let isJson = false;
+  if (value !== null) {
+    try {
+      formatted = JSON.stringify(JSON.parse(strValue), null, 2);
+      isJson = true;
+    } catch {}
+  }
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(strValue);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  };
+
+  const titleContent = (
+    <span>
+      <span class="font-mono">{column}</span>
+      {isJson && <span class="ml-2 text-[10px] font-semibold bg-link/10 text-link px-1.5 py-0.5 rounded">JSON</span>}
+    </span>
+  );
+
+  return (
+    <Modal title={titleContent} onClose={onClose} maxWidth="max-w-xl">
+      <div class="overflow-auto flex-1 p-5">
+        <div class="flex justify-end mb-3">
+          <button
+            onClick={handleCopy}
+            class="text-xs font-medium px-2 py-1 rounded bg-panel-hover text-text-secondary hover:bg-panel-active transition-colors"
+          >
+            {copied ? "Copied!" : "Copy"}
+          </button>
+        </div>
+        <pre class={`text-xs font-mono whitespace-pre-wrap break-all ${value === null ? "text-text-dim italic" : ""}`}>{formatted}</pre>
+      </div>
+    </Modal>
+  );
+}

package/runtime/dashboard/sql-browser/schema-browser-tab.tsx

@@ -0,0 +1,67 @@
+import type { D1Table } from "../rpc/types";
+import { parseCreateTable } from "./utils";
+
+export function SchemaBrowserTab({ tables }: { tables?: D1Table[] | null }) {
+  if (!tables?.length) {
+    return <div class="text-center py-16 text-text-muted text-sm font-medium">No tables found</div>;
+  }
+
+  return (
+    <div class="space-y-4">
+      {tables.map(t => {
+        const schema = parseCreateTable(t.sql);
+        return (
+          <div key={t.name} class="bg-panel rounded-lg border border-border">
+            <div class="flex items-center justify-between px-4 py-3 border-b border-border-subtle">
+              <div class="flex items-center gap-3">
+                <span class="font-mono text-sm font-bold text-ink">{t.name}</span>
+                <span class="text-xs text-text-muted tabular-nums">{t.rows} row(s)</span>
+              </div>
+              {schema.primaryKeys.length > 0 && (
+                <span class="text-xs text-text-muted">
+                  PK: <span class="font-mono text-text-secondary">{schema.primaryKeys.join(", ")}</span>
+                </span>
+              )}
+            </div>
+            <table class="w-full text-sm">
+              <thead>
+                <tr class="border-b border-border-row text-xs text-text-muted uppercase tracking-wider">
+                  <th class="text-left px-4 py-2 font-medium">Column</th>
+                  <th class="text-left px-4 py-2 font-medium">Type</th>
+                  <th class="text-left px-4 py-2 font-medium">Nullable</th>
+                  <th class="text-left px-4 py-2 font-medium">Default</th>
+                </tr>
+              </thead>
+              <tbody>
+                {schema.columns.map(col => (
+                  <tr key={col.name} class="border-b border-border-row last:border-0">
+                    <td class="px-4 py-2 font-mono text-xs font-medium text-ink">
+                      {col.name}
+                      {schema.primaryKeys.includes(col.name) && (
+                        <span class="ml-1.5 text-[10px] font-semibold bg-panel-hover text-text-secondary px-1 py-0.5 rounded">PK</span>
+                      )}
+                      {col.autoIncrement && (
+                        <span class="ml-1.5 text-[10px] font-semibold bg-amber-50 text-amber-600 px-1 py-0.5 rounded">AI</span>
+                      )}
+                      {col.foreignKey && (
+                        <span class="ml-1.5 text-[10px] font-semibold bg-blue-50 text-blue-600 px-1 py-0.5 rounded" title={`${col.foreignKey.targetTable}(${col.foreignKey.targetColumn})`}>
+                          FK &rarr; {col.foreignKey.targetTable}
+                        </span>
+                      )}
+                    </td>
+                    <td class="px-4 py-2 font-mono text-xs text-text-secondary">{col.type || "—"}</td>
+                    <td class="px-4 py-2 text-xs text-text-muted">{col.notNull ? "NOT NULL" : "NULL"}</td>
+                    <td class="px-4 py-2 font-mono text-xs text-text-muted">{col.defaultValue ?? "—"}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+            <div class="px-4 py-2.5 border-t border-border-subtle bg-panel-hover/50">
+              <pre class="text-xs text-text-muted font-mono whitespace-pre-wrap">{t.sql}</pre>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/runtime/dashboard/sql-browser/sql-browser.tsx

@@ -0,0 +1,52 @@
+import { useState } from "preact/hooks";
+import { navigate } from "../lib";
+import type { SqlBrowserProps, Tab } from "./types";
+import { TABS } from "./types";
+import { useHistory, useBrowserHistory } from "./hooks";
+import { DataBrowserTab } from "./data-browser-tab";
+import { SchemaBrowserTab } from "./schema-browser-tab";
+import { SqlConsoleTab } from "./sql-console-tab";
+
+export function SqlBrowser({ tables, execQuery, historyScope, basePath, routeTab, routeTable, routeQuery }: SqlBrowserProps) {
+  const [localTab, setLocalTab] = useState<Tab>("data");
+  const tab = basePath ? (routeTab ?? "data") : localTab;
+  const [consoleSql, setConsoleSql] = useState("");
+  const history = useHistory(historyScope);
+  const browserHistory = useBrowserHistory(historyScope);
+
+  const switchTab = (t: Tab) => {
+    if (basePath) navigate(basePath + "/" + t);
+    else setLocalTab(t);
+  };
+
+  const openInConsole = (sql: string) => {
+    setConsoleSql(sql);
+    if (basePath) navigate(basePath + "/sql");
+    else setLocalTab("sql");
+  };
+
+  return (
+    <div>
+      {/* Tab bar */}
+      <div class="flex gap-1 mb-5 border-b border-border">
+        {TABS.map(t => (
+          <button
+            key={t.key}
+            onClick={() => switchTab(t.key)}
+            class={`px-4 py-2 text-sm font-medium border-b-2 transition-colors -mb-px ${
+              tab === t.key
+                ? "border-ink text-ink"
+                : "border-transparent text-text-muted hover:text-text-data"
+            }`}
+          >
+            {t.label}
+          </button>
+        ))}
+      </div>
+
+      {tab === "data" && <DataBrowserTab tables={tables} execQuery={execQuery} onOpenInConsole={openInConsole} history={history} browserHistory={browserHistory} historyScope={historyScope} basePath={basePath} routeTable={routeTable} routeQuery={routeQuery} />}
+      {tab === "schema" && <SchemaBrowserTab tables={tables} />}
+      {tab === "sql" && <SqlConsoleTab execQuery={execQuery} initialSql={consoleSql} history={history} />}
+    </div>
+  );
+}