scdb-web-panel 1.0.3

package/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "scdb-web-panel",
+  "version": "1.0.3",
+  "type": "module"
+}

package/public/app.js

@@ -0,0 +1,587 @@
+const API = '';
+function get(url, opts = {}) {
+  return fetch(API + url, { credentials: 'include', ...opts });
+}
+function post(url, body, opts = {}) {
+  return fetch(API + url, {
+    method: 'POST',
+    credentials: 'include',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+    ...opts,
+  });
+}
+
+function showPanel(id) {
+  document.querySelectorAll('.panel').forEach((p) => p.classList.remove('active'));
+  document.querySelectorAll('.navbar .nav-item').forEach((b) => b.classList.remove('active'));
+  const panel = document.getElementById('panel-' + id);
+  const tab = document.querySelector(`.navbar [data-tab="${id}"]`);
+  if (panel) panel.classList.add('active');
+  if (tab) tab.classList.add('active');
+  if (id === 'tables') loadTables();
+  if (id === 'add-table') loadAddTable();
+  if (id === 'audit') {
+    loadApiKeys();
+    if (document.getElementById('audit-log-section')?.style.display !== 'none') loadAudit();
+  }
+  if (id === 'users') loadUsers();
+  if (id === 'profile') loadProfile();
+  if (id === 'docs') loadDocs();
+}
+
+function showLogin() {
+  document.getElementById('app').innerHTML = `
+    <div class="login-box">
+      <h1>Secure DB</h1>
+      <form id="login-form">
+        <input type="text" name="username" placeholder="Username" required autocomplete="username" />
+        <input type="password" name="password" placeholder="Password" required autocomplete="current-password" />
+        <button type="submit" class="btn primary">Log in</button>
+      </form>
+      <div id="login-err" style="color:#f87171;font-size:0.9rem;margin-top:0.5rem;"></div>
+    </div>
+    <div id="setup-container"></div>
+  `;
+  document.getElementById('login-form').addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const errEl = document.getElementById('login-err');
+    errEl.textContent = '';
+    const form = e.target;
+    const res = await post('/login', {
+      username: form.username.value,
+      password: form.password.value,
+    });
+    if (res.ok) {
+      window.location.reload();
+    } else {
+      const d = await res.json().catch(() => ({}));
+      errEl.textContent = d.error || 'Login failed';
+    }
+  });
+  fetch(API + '/health')
+    .then((r) => r.json())
+    .then((data) => {
+      if (data.ok) checkSetup();
+    })
+    .catch(() => { });
+}
+
+async function checkSetup() {
+  const meRes = await get('/me').catch(() => null);
+  if (meRes && meRes.ok) return;
+  const setupRes = await get('/is-setup').catch(() => null);
+  if (!setupRes || !setupRes.ok) return;
+  const data = await setupRes.json().catch(() => ({}));
+  if (data.isSetup) return;
+  showSetupForm();
+}
+
+function showSetupForm() {
+  const container = document.getElementById('setup-container');
+  if (!container) return;
+  container.innerHTML = `
+    <div class="setup-box">
+      <h2>First-time setup</h2>
+      <p class="hint">Create the first admin user.</p>
+      <form id="setup-form">
+        <input type="text" name="username" placeholder="Username" required minlength="2" />
+        <input type="password" name="password" placeholder="Password" required />
+        <button type="submit" class="btn primary">Create admin</button>
+      </form>
+      <div id="setup-err" style="color:#f87171;font-size:0.9rem;margin-top:0.5rem;"></div>
+    </div>
+  `;
+  document.getElementById('setup-form').addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const errEl = document.getElementById('setup-err');
+    errEl.textContent = '';
+    const form = e.target;
+    const res = await post('/setup', {
+      username: form.username.value,
+      password: form.password.value,
+    });
+    if (res.ok) {
+      container.innerHTML = '<p class="hint">Admin created. Log in above.</p>';
+    } else {
+      const d = await res.json().catch(() => ({}));
+      errEl.textContent = d.error || 'Setup failed';
+    }
+  });
+}
+
+async function loadMe() {
+  const res = await get('/me');
+  if (!res.ok) {
+    showLogin();
+    return false;
+  }
+  const me = await res.json();
+  const el = document.getElementById('user-info');
+  if (el) el.textContent = `${me.name || me.principalType} (${me.role})`;
+  const usersNav = document.getElementById('nav-users');
+  const docsAdminBtn = document.getElementById('btn-docs-admin');
+  const auditLogSection = document.getElementById('audit-log-section');
+  const apiKeyRoleAdmin = document.getElementById('api-key-role-admin');
+  if (usersNav) usersNav.style.display = me.role === 'admin' ? '' : 'none';
+  if (docsAdminBtn) docsAdminBtn.style.display = me.role === 'admin' ? '' : 'none';
+  if (auditLogSection) auditLogSection.style.display = me.role === 'admin' ? '' : 'none';
+  if (apiKeyRoleAdmin) apiKeyRoleAdmin.style.display = me.role === 'admin' ? '' : 'none';
+  return true;
+}
+
+async function loadTables() {
+  const res = await get('/tables');
+  if (!res.ok) return;
+  const { tables } = await res.json();
+  const ul = document.getElementById('table-list');
+  ul.innerHTML = tables.length ? tables.map((t) => `<li data-table="${t}">${t}</li>`).join('') : '<li class="hint">No tables</li>';
+  ul.querySelectorAll('li[data-table]').forEach((li) => {
+    li.addEventListener('click', () => loadTableDetail(li.dataset.table));
+  });
+  document.getElementById('table-detail').innerHTML = '';
+}
+
+function loadAddTable() {
+  const status = document.getElementById('create-table-status');
+  const form = document.getElementById('create-table-form');
+  if (status) {
+    status.textContent = '';
+    status.className = 'status';
+  }
+  if (form) form.reset();
+}
+
+async function createTableFromForm(e) {
+  e.preventDefault();
+  const form = e.target;
+  const statusEl = document.getElementById('create-table-status');
+  if (statusEl) { statusEl.textContent = ''; statusEl.className = 'status'; }
+  const name = form.name.value.trim();
+  const colsRaw = form.columns.value.trim();
+  if (!name || !colsRaw) {
+    if (statusEl) { statusEl.textContent = 'Name and columns are required.'; statusEl.className = 'status error'; }
+    return;
+  }
+  // Split columns by comma, keep raw SQL fragments
+  const columns = colsRaw.split(',').map(s => s.trim()).filter(Boolean);
+  const res = await post('/tables', { name, columns });
+  const data = await res.json().catch(() => ({}));
+  if (res.ok) {
+    if (statusEl) { statusEl.textContent = 'Table created.'; statusEl.className = 'status success'; }
+    // go back to tables and refresh
+    setTimeout(() => showPanel('tables'), 700);
+  } else {
+    if (statusEl) { statusEl.textContent = data.error || 'Failed to create table'; statusEl.className = 'status error'; }
+  }
+}
+
+async function loadTableDetail(name) {
+  const res = await get('/tables/' + encodeURIComponent(name));
+  if (!res.ok) return;
+  const { columns } = await res.json();
+  const qRes = await post('/query', { sql: `SELECT * FROM "${name.replace(/"/g, '""')}" LIMIT 100`, params: [] });
+  if (!qRes.ok) {
+    document.getElementById('table-detail').innerHTML = '<p class="hint">Error loading data</p>';
+    return;
+  }
+  const { rows } = await qRes.json();
+  const cols = columns.map((c) => c.name);
+  let html = '<table><thead><tr>' + cols.map((c) => `<th>${escapeHtml(c)}</th>`).join('') + '</tr></thead><tbody>';
+  rows.forEach((row) => {
+    html += '<tr>' + cols.map((c) => `<td>${escapeHtml(String(row[c] ?? ''))}</td>`).join('') + '</tr>';
+  });
+  html += '</tbody></table>';
+  document.getElementById('table-detail').innerHTML = html;
+}
+
+function escapeHtml(s) {
+  const div = document.createElement('div');
+  div.textContent = s;
+  return div.innerHTML;
+}
+
+async function runQuery() {
+  const sql = document.getElementById('sql-input').value.trim();
+  const paramsEl = document.getElementById('sql-params').value.trim();
+  let params = [];
+  if (paramsEl) {
+    try {
+      params = JSON.parse(paramsEl);
+      if (!Array.isArray(params)) params = [params];
+    } catch {
+      document.getElementById('query-result').textContent = 'Parameters must be a JSON array';
+      document.getElementById('query-result').className = 'error';
+      return;
+    }
+  }
+  const isWrite = /^\s*(INSERT|UPDATE|DELETE|CREATE|DROP|ALTER|REPLACE)\s/i.test(sql);
+  const endpoint = isWrite ? '/execute' : '/query';
+  const res = await post(endpoint, { sql, params });
+  const resultEl = document.getElementById('query-result');
+  const data = await res.json().catch(() => ({}));
+  if (res.ok) {
+    resultEl.className = '';
+    resultEl.textContent = isWrite ? JSON.stringify(data, null, 2) : JSON.stringify(data.rows, null, 2);
+  } else {
+    resultEl.className = 'error';
+    resultEl.textContent = data.error || res.statusText;
+  }
+}
+
+async function loadApiKeys() {
+  const tableBody = document.querySelector('#api-keys-table tbody');
+  const statusEl = document.getElementById('api-keys-status');
+  if (!tableBody) return;
+  if (statusEl) {
+    statusEl.textContent = 'Loading...';
+    statusEl.className = 'status';
+  }
+  const res = await get('/api-keys');
+  if (statusEl) statusEl.textContent = '';
+  if (!res.ok) {
+    const d = await res.json().catch(() => ({}));
+    if (statusEl) {
+      statusEl.textContent = d.error || 'Failed to load API keys';
+      statusEl.className = 'status error';
+    }
+    tableBody.innerHTML = '';
+    return;
+  }
+  const data = await res.json();
+  const keys = data.keys || [];
+  if (!keys.length) {
+    tableBody.innerHTML = '<tr><td colspan="5" class="hint">No API keys</td></tr>';
+  } else {
+    tableBody.innerHTML = keys
+      .map(
+        (k) => `
+        <tr data-key-id="${k.id}">
+          <td>${k.id}</td>
+          <td>${escapeHtml(String(k.name ?? ''))}</td>
+          <td>${escapeHtml(String(k.role ?? ''))}</td>
+          <td>${escapeHtml(String(k.created_at ?? ''))}</td>
+          <td><button type="button" class="btn secondary btn-api-key-delete">Revoke</button></td>
+        </tr>`
+      )
+      .join('');
+    tableBody.querySelectorAll('.btn-api-key-delete').forEach((btn) => {
+      btn.addEventListener('click', async () => {
+        const row = btn.closest('tr');
+        const id = row?.dataset.keyId;
+        if (!id || !window.confirm('Revoke this API key? It will stop working immediately.')) return;
+        const delRes = await fetch(API + '/api-keys/' + encodeURIComponent(id), {
+          method: 'DELETE',
+          credentials: 'include',
+        });
+        const d = await delRes.json().catch(() => ({}));
+        if (delRes.ok) {
+          row.remove();
+          const statusEl = document.getElementById('api-keys-status');
+          if (statusEl) {
+            statusEl.textContent = 'Key revoked.';
+            statusEl.className = 'status success';
+          }
+        } else {
+          const statusEl = document.getElementById('api-keys-status');
+          if (statusEl) {
+            statusEl.textContent = d.error || 'Failed to revoke';
+            statusEl.className = 'status error';
+          }
+        }
+      });
+    });
+  }
+}
+
+async function loadAudit() {
+  const res = await get('/audit');
+  if (!res.ok) {
+    document.getElementById('audit-log').textContent = res.status === 403 ? 'Admin only' : 'Failed to load';
+    return;
+  }
+  const { rows } = await res.json();
+  document.getElementById('audit-log').textContent = JSON.stringify(rows, null, 2);
+}
+
+async function loadUsers() {
+  const tableBody = document.querySelector('#users-table tbody');
+  const statusEl = document.getElementById('users-status');
+  if (!tableBody || !statusEl) return;
+  statusEl.textContent = 'Loading users...';
+  statusEl.className = 'status';
+  const res = await get('/users');
+  if (!res.ok) {
+    const d = await res.json().catch(() => ({}));
+    statusEl.textContent = d.error || 'Failed to load users';
+    statusEl.className = 'status error';
+    tableBody.innerHTML = '';
+    return;
+  }
+  const data = await res.json();
+  const users = data.users || [];
+  if (!users.length) {
+    tableBody.innerHTML = '<tr><td colspan="5" class="hint">No users found</td></tr>';
+  } else {
+    tableBody.innerHTML = users
+      .map(
+        (u) => `
+        <tr data-user-id="${u.id}">
+          <td>${u.id}</td>
+          <td>${escapeHtml(String(u.username ?? ''))}</td>
+          <td>
+            <select class="user-role-select">
+              <option value="admin"${u.role === 'admin' ? ' selected' : ''}>admin</option>
+              <option value="readwrite"${u.role === 'readwrite' ? ' selected' : ''}>readwrite</option>
+              <option value="readonly"${u.role === 'readonly' ? ' selected' : ''}>readonly</option>
+            </select>
+          </td>
+          <td>${escapeHtml(String(u.created_at ?? ''))}</td>
+          <td>
+            <button type="button" class="btn secondary btn-user-save">Save</button>
+            <button type="button" class="btn secondary btn-user-password">Reset password</button>
+            <button type="button" class="btn secondary btn-user-delete">Delete</button>
+          </td>
+        </tr>`
+      )
+      .join('');
+  }
+  statusEl.textContent = '';
+  statusEl.className = 'status';
+
+  tableBody.querySelectorAll('.btn-user-save').forEach((btn) => {
+    btn.addEventListener('click', async () => {
+      const row = btn.closest('tr');
+      const id = row?.dataset.userId;
+      const select = row?.querySelector('.user-role-select');
+      if (!id || !select) return;
+      const newRole = select.value;
+      if (!window.confirm(`Change role of user ${id} to "${newRole}"?`)) return;
+      const resUpdate = await fetch(API + '/users/' + encodeURIComponent(id), {
+        method: 'PATCH',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ role: newRole }),
+      });
+      const d = await resUpdate.json().catch(() => ({}));
+      if (resUpdate.ok) {
+        statusEl.textContent = 'User updated.';
+        statusEl.className = 'status success';
+      } else {
+        statusEl.textContent = d.error || 'Failed to update user';
+        statusEl.className = 'status error';
+      }
+    });
+  });
+
+  tableBody.querySelectorAll('.btn-user-password').forEach((btn) => {
+    btn.addEventListener('click', async () => {
+      const row = btn.closest('tr');
+      const id = row?.dataset.userId;
+      if (!id) return;
+      const newPassword = window.prompt('Enter a new temporary password for this user:');
+      if (!newPassword) return;
+      if (newPassword.length < 6) {
+        window.alert('Password must be at least 6 characters.');
+        return;
+      }
+      const resUpdate = await fetch(API + '/users/' + encodeURIComponent(id), {
+        method: 'PATCH',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ password: newPassword }),
+      });
+      const d = await resUpdate.json().catch(() => ({}));
+      if (resUpdate.ok) {
+        statusEl.textContent = 'Password reset.';
+        statusEl.className = 'status success';
+      } else {
+        statusEl.textContent = d.error || 'Failed to reset password';
+        statusEl.className = 'status error';
+      }
+    });
+  });
+
+  tableBody.querySelectorAll('.btn-user-delete').forEach((btn) => {
+    btn.addEventListener('click', async () => {
+      const row = btn.closest('tr');
+      const id = row?.dataset.userId;
+      if (!id) return;
+      if (!window.confirm(`Delete user ${id}? This cannot be undone.`)) return;
+      const resDel = await fetch(API + '/users/' + encodeURIComponent(id), {
+        method: 'DELETE',
+        credentials: 'include',
+      });
+      const d = await resDel.json().catch(() => ({}));
+      if (resDel.ok) {
+        statusEl.textContent = 'User deleted.';
+        statusEl.className = 'status success';
+        row.remove();
+      } else {
+        statusEl.textContent = d.error || 'Failed to delete user';
+        statusEl.className = 'status error';
+      }
+    });
+  });
+}
+
+async function createUserFromForm(e) {
+  e.preventDefault();
+  const form = e.target;
+  const statusEl = document.getElementById('create-user-status');
+  statusEl.textContent = '';
+  statusEl.className = 'status';
+  const username = form.username.value.trim();
+  const password = form.password.value;
+  const role = form.role.value;
+  if (!username || password.length < 6) {
+    statusEl.textContent = 'Username and password (min 6 chars) are required.';
+    statusEl.className = 'status error';
+    return;
+  }
+  const res = await post('/users', { username, password, role });
+  const d = await res.json().catch(() => ({}));
+  if (res.ok) {
+    statusEl.textContent = 'User created.';
+    statusEl.className = 'status success';
+    form.reset();
+    loadUsers();
+  } else {
+    statusEl.textContent = d.error || 'Failed to create user';
+    statusEl.className = 'status error';
+  }
+}
+
+async function loadProfile() {
+  const res = await get('/profile');
+  if (!res.ok) return;
+  const profile = await res.json();
+  const u = document.getElementById('profile-username');
+  const r = document.getElementById('profile-role');
+  const c = document.getElementById('profile-created');
+  if (u) u.textContent = profile.username || '';
+  if (r) r.textContent = profile.role || '';
+  if (c) c.textContent = profile.created_at || '';
+}
+
+async function changePassword(e) {
+  e.preventDefault();
+  const form = e.target;
+  const statusEl = document.getElementById('password-status');
+  statusEl.textContent = '';
+  statusEl.className = 'status';
+  const oldPassword = form.oldPassword.value;
+  const newPassword = form.newPassword.value;
+  const confirm = form.confirmNewPassword.value;
+  if (!oldPassword || !newPassword || !confirm) {
+    statusEl.textContent = 'All fields are required.';
+    statusEl.className = 'status error';
+    return;
+  }
+  if (newPassword !== confirm) {
+    statusEl.textContent = 'New passwords do not match.';
+    statusEl.className = 'status error';
+    return;
+  }
+  if (newPassword.length < 6) {
+    statusEl.textContent = 'New password must be at least 6 characters.';
+    statusEl.className = 'status error';
+    return;
+  }
+  const res = await post('/profile/password', { oldPassword, newPassword });
+  const d = await res.json().catch(() => ({}));
+  if (res.ok) {
+    statusEl.textContent = 'Password updated.';
+    statusEl.className = 'status success';
+    form.reset();
+  } else {
+    statusEl.textContent = d.error || 'Failed to update password';
+    statusEl.className = 'status error';
+  }
+}
+
+async function loadDocs(kind) {
+  const target = kind || 'auto';
+  let path = '/docs/user';
+  const btnAdmin = document.getElementById('btn-docs-admin');
+  if (target === 'admin') {
+    path = '/docs/admin';
+  } else if (target === 'auto' && btnAdmin && btnAdmin.style.display !== 'none') {
+    path = '/docs/admin';
+  }
+  const contentEl = document.getElementById('docs-content');
+  if (!contentEl) return;
+  contentEl.textContent = 'Loading documentation...';
+  contentEl.classList.remove('docs-rendered');
+  const res = await get(path);
+  if (!res.ok) {
+    const d = await res.json().catch(() => ({}));
+    contentEl.textContent = d.error || 'Failed to load docs';
+    contentEl.classList.remove('docs-rendered');
+    return;
+  }
+  const text = await res.text();
+  if (typeof marked !== 'undefined' && typeof DOMPurify !== 'undefined') {
+    const rawHtml = typeof marked.parse === 'function' ? marked.parse(text) : marked(text);
+    const html = typeof rawHtml === 'string' ? rawHtml : (await rawHtml);
+    contentEl.innerHTML = DOMPurify.sanitize(html, { USE_PROFILES: { html: true } });
+    contentEl.classList.add('docs-rendered');
+  } else {
+    contentEl.textContent = text;
+  }
+}
+
+document.addEventListener('DOMContentLoaded', async () => {
+  const ok = await loadMe();
+  if (!ok) return;
+
+  document.querySelectorAll('.navbar .nav-item').forEach((btn) => {
+    btn.addEventListener('click', () => showPanel(btn.dataset.tab));
+  });
+  document.getElementById('logout-btn').addEventListener('click', async () => {
+    await post('/logout');
+    window.location.reload();
+  });
+  document.getElementById('run-query').addEventListener('click', runQuery);
+
+  document.getElementById('create-api-key').addEventListener('click', async () => {
+    const name = document.getElementById('api-key-name').value.trim() || null;
+    const role = document.getElementById('api-key-role').value;
+    const res = await post('/api-keys', { name, role });
+    const el = document.getElementById('api-key-result');
+    if (res.ok) {
+      const d = await res.json();
+      el.textContent = 'Key (copy now; not shown again): ' + d.key;
+      el.className = '';
+      loadApiKeys();
+    } else {
+      const d = await res.json().catch(() => ({}));
+      el.textContent = d.error || 'Failed';
+      el.className = 'error';
+    }
+  });
+
+  const createUserForm = document.getElementById('create-user-form');
+  if (createUserForm) {
+    createUserForm.addEventListener('submit', createUserFromForm);
+  }
+  const createTableForm = document.getElementById('create-table-form');
+  if (createTableForm) {
+    createTableForm.addEventListener('submit', createTableFromForm);
+  }
+  const passwordForm = document.getElementById('password-form');
+  if (passwordForm) {
+    passwordForm.addEventListener('submit', changePassword);
+  }
+  const btnDocsUser = document.getElementById('btn-docs-user');
+  const btnDocsAdmin = document.getElementById('btn-docs-admin');
+  if (btnDocsUser) {
+    btnDocsUser.addEventListener('click', () => loadDocs('user'));
+  }
+  if (btnDocsAdmin) {
+    btnDocsAdmin.addEventListener('click', () => loadDocs('admin'));
+  }
+
+  // initial loads
+  loadTables();
+});

package/public/index.html

@@ -0,0 +1,190 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Secure DB Panel</title>
+  <link rel="stylesheet" href="/style.css" />
+</head>
+
+<body>
+  <div id="app">
+    <header class="topbar">
+      <div class="topbar-left">
+        <span class="app-logo">🔐</span>
+        <h1 class="app-title">Secure DB</h1>
+      </div>
+      <nav class="navbar" id="navbar">
+        <button type="button" data-tab="tables" class="nav-item active">Tables</button>
+        <button type="button" data-tab="add-table" class="nav-item">Add Table</button>
+        <button type="button" data-tab="query" class="nav-item">Query</button>
+        <button type="button" data-tab="users" class="nav-item" id="nav-users" style="display:none;">Users</button>
+        <button type="button" data-tab="docs" class="nav-item">Docs</button>
+        <button type="button" data-tab="profile" class="nav-item">Profile</button>
+        <button type="button" data-tab="audit" class="nav-item" id="nav-audit">API keys &amp; Audit</button>
+      </nav>
+      <div class="topbar-right">
+        <span id="user-info" class="user-info"></span>
+        <button type="button" id="logout-btn" class="btn secondary">Logout</button>
+      </div>
+    </header>
+    <main class="main-layout">
+      <section id="panel-tables" class="panel active">
+        <h2>Tables</h2>
+        <ul id="table-list"></ul>
+        <div id="table-detail"></div>
+      </section>
+      <section id="panel-query" class="panel">
+        <h2>SQL Editor</h2>
+        <textarea id="sql-input" rows="6" placeholder="SELECT * FROM users LIMIT 10"></textarea>
+        <p class="hint">Use ? placeholders for parameters; pass as JSON array in Parameters (e.g. [1, "foo"]).</p>
+        <input type="text" id="sql-params" placeholder='Parameters (JSON array, e.g. [1]' />
+        <button type="button" id="run-query" class="btn primary">Run</button>
+        <pre id="query-result"></pre>
+      </section>
+      <section id="panel-users" class="panel">
+        <h2>Users</h2>
+        <p class="hint">Admin-only: manage panel users.</p>
+        <div class="users-layout">
+          <div class="users-list">
+            <h3>Existing users</h3>
+            <div id="users-status" class="status"></div>
+            <table class="table" id="users-table">
+              <thead>
+                <tr>
+                  <th>ID</th>
+                  <th>Username</th>
+                  <th>Role</th>
+                  <th>Created</th>
+                  <th>Actions</th>
+                </tr>
+              </thead>
+              <tbody></tbody>
+            </table>
+          </div>
+          <div class="users-form">
+            <h3>Create user</h3>
+            <form id="create-user-form">
+              <label>
+                <span>Username</span>
+                <input type="text" name="username" required minlength="2" />
+              </label>
+              <label>
+                <span>Password</span>
+                <input type="password" name="password" required minlength="6" />
+              </label>
+              <label>
+                <span>Role</span>
+                <select name="role">
+                  <option value="readwrite">readwrite</option>
+                  <option value="readonly">readonly</option>
+                  <option value="admin">admin</option>
+                </select>
+              </label>
+              <button type="submit" class="btn primary">Create</button>
+              <div id="create-user-status" class="status"></div>
+            </form>
+          </div>
+        </div>
+      </section>
+      <section id="panel-profile" class="panel">
+        <h2>Profile</h2>
+        <div class="profile-layout">
+          <div class="profile-info">
+            <h3>Account</h3>
+            <p><strong>Username:</strong> <span id="profile-username"></span></p>
+            <p><strong>Role:</strong> <span id="profile-role"></span></p>
+            <p><strong>Created:</strong> <span id="profile-created"></span></p>
+          </div>
+          <div class="profile-password">
+            <h3>Change password</h3>
+            <form id="password-form">
+              <label>
+                <span>Current password</span>
+                <input type="password" name="oldPassword" required />
+              </label>
+              <label>
+                <span>New password</span>
+                <input type="password" name="newPassword" required minlength="6" />
+              </label>
+              <label>
+                <span>Confirm new password</span>
+                <input type="password" name="confirmNewPassword" required minlength="6" />
+              </label>
+              <button type="submit" class="btn primary">Update password</button>
+              <div id="password-status" class="status"></div>
+            </form>
+          </div>
+        </div>
+      </section>
+      <section id="panel-docs" class="panel">
+        <h2>Documentation</h2>
+        <div class="docs-controls">
+          <button type="button" class="btn secondary" id="btn-docs-user">User guide</button>
+          <button type="button" class="btn secondary" id="btn-docs-admin" style="display:none;">Admin guide</button>
+        </div>
+        <div id="docs-content" class="docs-content docs-rendered"></div>
+      </section>
+      <section id="panel-audit" class="panel">
+        <h2>API keys &amp; Audit</h2>
+        <div class="api-key-section">
+          <h3>Your API keys</h3>
+          <p class="hint">Admins see all keys; others see only keys they created.</p>
+          <div id="api-keys-status" class="status"></div>
+          <table class="table" id="api-keys-table">
+            <thead>
+              <tr>
+                <th>ID</th>
+                <th>Name</th>
+                <th>Role</th>
+                <th>Created</th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody></tbody>
+          </table>
+          <h3 class="api-key-create-title">Create API key</h3>
+          <input type="text" id="api-key-name" placeholder="Name (optional)" />
+          <select id="api-key-role">
+            <option value="readwrite">readwrite</option>
+            <option value="readonly">readonly</option>
+            <option value="admin" id="api-key-role-admin">admin</option>
+          </select>
+          <button type="button" id="create-api-key" class="btn primary">Create</button>
+          <pre id="api-key-result"></pre>
+        </div>
+        <div id="audit-log-section" style="display:none;">
+          <h3>Audit log</h3>
+          <p class="hint">Admin only. Last 100 entries.</p>
+          <pre id="audit-log"></pre>
+        </div>
+      </section>
+      <section id="panel-add-table" class="panel">
+        <h2>Create Table</h2>
+        <div class="card">
+          <form id="create-table-form">
+            <label>
+              <span>Table name</span>
+              <input type="text" name="name" placeholder="e.g. customers" required minlength="1" />
+            </label>
+            <label>
+              <span>Columns (comma-separated, e.g. id INTEGER PRIMARY KEY, name TEXT)</span>
+              <textarea name="columns" rows="4" placeholder="id INTEGER PRIMARY KEY, name TEXT, created_at TEXT"
+                required></textarea>
+            </label>
+            <div style="display:flex;gap:.5rem;align-items:center">
+              <button type="submit" class="btn primary">Create table</button>
+              <div id="create-table-status" class="status" style="margin-left:.5rem"></div>
+            </div>
+          </form>
+        </div>
+      </section>
+    </main>
+  </div>
+  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/dompurify@3/dist/purify.min.js"></script>
+  <script src="/app.js"></script>
+</body>
+
+</html>

package/public/style.css

@@ -0,0 +1,591 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: system-ui, sans-serif;
+  margin: 0;
+  background: #f5f5f7;
+  color: #111827;
+  min-height: 100vh;
+}
+
+#app {
+  max-width: 1080px;
+  margin: 0 auto;
+  padding: 1.5rem 1rem 2rem;
+}
+
+.topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.75rem 1rem;
+  border-radius: 999px;
+  background: #ffffff;
+  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
+  margin-bottom: 1.25rem;
+  flex-wrap: wrap;
+}
+
+.topbar-left {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.app-logo {
+  font-size: 1.25rem;
+}
+
+.app-title {
+  margin: 0;
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #111827;
+}
+
+.navbar {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.nav-item {
+  padding: 0.4rem 0.9rem;
+  border-radius: 999px;
+  border: none;
+  background: transparent;
+  color: #6b7280;
+  cursor: pointer;
+  font-size: 0.9rem;
+}
+
+.nav-item:hover {
+  background: #e5e7eb;
+  color: #111827;
+}
+
+.nav-item.active {
+  background: #2563eb;
+  color: #ffffff;
+}
+
+.nav-item[data-tab="add-table"] {
+  position: relative;
+}
+
+.nav-item[data-tab="add-table"]::after {
+  content: '\2795';
+  margin-left: 0.45rem;
+  font-weight: 700;
+}
+
+.topbar-right {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.user-info {
+  font-size: 0.9rem;
+  color: #4b5563;
+  white-space: nowrap;
+}
+
+.panel {
+  display: none;
+}
+
+.panel.active {
+  display: block;
+}
+
+.panel h2 {
+  font-size: 1.05rem;
+  margin-top: 0;
+  margin-bottom: 0.75rem;
+  color: #111827;
+}
+
+.panel .card {
+  padding: 1rem;
+}
+
+.card form label {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  margin-bottom: 0.75rem;
+}
+
+.card form input,
+.card form textarea {
+  width: 100%;
+  padding: 0.6rem 0.7rem;
+  border-radius: 0.6rem;
+  border: 1px solid #d1d5db;
+  background: #fff;
+}
+
+.card form textarea {
+  font-family: ui-monospace, monospace;
+  resize: vertical;
+}
+
+.panel .status {
+  margin-top: 0;
+}
+
+.main-layout {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.btn {
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.9rem;
+  border: none;
+}
+
+.btn.primary {
+  background: #2563eb;
+  color: #fff;
+}
+
+.btn.primary:hover {
+  background: #1d4ed8;
+}
+
+.btn.secondary {
+  background: #e5e7eb;
+  color: #111827;
+}
+
+.btn.secondary:hover {
+  background: #d1d5db;
+}
+
+#table-list {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 1rem 0;
+}
+
+#table-list li {
+  padding: 0.5rem;
+  background: #ffffff;
+  margin-bottom: 0.25rem;
+  border-radius: 6px;
+  cursor: pointer;
+  border: 1px solid #e5e7eb;
+}
+
+#table-list li:hover {
+  background: #f3f4f6;
+}
+
+#table-detail table,
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.85rem;
+  background: #ffffff;
+  border-radius: 0.75rem;
+  overflow: hidden;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
+}
+
+#table-detail th,
+#table-detail td,
+.table th,
+.table td {
+  padding: 0.55rem 0.75rem;
+  text-align: left;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+#table-detail th,
+.table th {
+  color: #6b7280;
+  font-weight: 600;
+  background: #f9fafb;
+}
+
+#sql-input {
+  width: 100%;
+  font-family: ui-monospace, monospace;
+  font-size: 0.9rem;
+  padding: 0.6rem 0.7rem;
+  background: #ffffff;
+  border: 1px solid #d1d5db;
+  border-radius: 0.6rem;
+  color: #111827;
+  resize: vertical;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+}
+
+#sql-params {
+  width: 100%;
+  max-width: 400px;
+  padding: 0.45rem 0.7rem;
+  margin-top: 0.25rem;
+  background: #ffffff;
+  border: 1px solid #d1d5db;
+  border-radius: 999px;
+  color: #111827;
+}
+
+.hint {
+  color: #6b7280;
+  font-size: 0.85rem;
+  margin: 0.25rem 0;
+}
+
+#run-query {
+  margin-top: 0.5rem;
+}
+
+.card {
+  background: #ffffff;
+  border-radius: 1rem;
+  padding: 1rem;
+  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
+  border: 1px solid #e5e7eb;
+}
+
+#query-result,
+#audit-log {
+  background: #ffffff;
+  padding: 1rem;
+  border-radius: 0.75rem;
+  overflow: auto;
+  max-height: 400px;
+  font-size: 0.8rem;
+  white-space: pre-wrap;
+  word-break: break-word;
+  border: 1px solid #e5e7eb;
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
+}
+
+#docs-content {
+  background: #ffffff;
+  padding: 1rem 1.25rem;
+  border-radius: 0.75rem;
+  overflow: auto;
+  max-height: 500px;
+  font-size: 0.9rem;
+  line-height: 1.5;
+  border: 1px solid #e5e7eb;
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
+}
+
+#docs-content:not(.docs-rendered) {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+#query-result.error {
+  color: #b91c1c;
+}
+
+.login-box {
+  max-width: 360px;
+  margin: 4rem auto 1rem;
+  padding: 2rem;
+  background: #ffffff;
+  border-radius: 1rem;
+  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.12);
+  border: 1px solid #e5e7eb;
+}
+
+.login-box h1 {
+  margin-top: 0;
+  font-size: 1.35rem;
+  text-align: center;
+}
+
+.login-box input {
+  width: 100%;
+  padding: 0.6rem 0.8rem;
+  margin-bottom: 0.75rem;
+  background: #ffffff;
+  border: 1px solid #d1d5db;
+  border-radius: 0.6rem;
+  color: #111827;
+}
+
+.login-box button {
+  width: 100%;
+  padding: 0.7rem;
+  margin-top: 0.5rem;
+}
+
+.setup-box {
+  max-width: 360px;
+  margin: 2rem auto;
+  padding: 1.5rem;
+  background: #ffffff;
+  border-radius: 1rem;
+  border: 1px solid #d1d5db;
+  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
+}
+
+.setup-box h2 {
+  margin-top: 0;
+  font-size: 1rem;
+}
+
+.setup-box input {
+  width: 100%;
+  padding: 0.6rem 0.8rem;
+  margin-bottom: 0.75rem;
+  background: #ffffff;
+  border: 1px solid #d1d5db;
+  border-radius: 0.6rem;
+  color: #111827;
+}
+
+.setup-box button {
+  width: 100%;
+  padding: 0.7rem;
+  margin-top: 0.5rem;
+}
+
+.api-key-section {
+  margin-bottom: 1rem;
+}
+
+.api-key-section h3 {
+  font-size: 0.9rem;
+  margin-bottom: 0.5rem;
+}
+
+.api-key-create-title {
+  margin-top: 1.25rem;
+}
+
+.api-key-section input,
+.api-key-section select {
+  padding: 0.45rem 0.7rem;
+  margin-right: 0.5rem;
+  margin-bottom: 0.5rem;
+  background: #ffffff;
+  border: 1px solid #d1d5db;
+  border-radius: 999px;
+  color: #111827;
+}
+
+#api-key-result {
+  margin-top: 0.5rem;
+}
+
+.users-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr);
+  gap: 1rem;
+}
+
+.users-list,
+.users-form,
+.profile-layout,
+.docs-layout {
+  background: #ffffff;
+  border-radius: 1rem;
+  padding: 1rem;
+  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
+  border: 1px solid #e5e7eb;
+}
+
+.users-form form label,
+.profile-password form label {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  margin-bottom: 0.75rem;
+  font-size: 0.9rem;
+  color: #374151;
+}
+
+.users-form input,
+.users-form select,
+.profile-password input {
+  padding: 0.55rem 0.75rem;
+  border-radius: 0.6rem;
+  border: 1px solid #d1d5db;
+  background: #ffffff;
+  color: #111827;
+  font-size: 0.9rem;
+}
+
+.status {
+  margin-top: 0.5rem;
+  font-size: 0.85rem;
+  min-height: 1.2em;
+}
+
+.status.error {
+  color: #b91c1c;
+}
+
+.status.success {
+  color: #15803d;
+}
+
+.profile-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1.5fr) minmax(0, 2fr);
+  gap: 1rem;
+}
+
+.profile-info p {
+  margin: 0.25rem 0;
+  font-size: 0.9rem;
+}
+
+.docs-controls {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.docs-content {
+  min-height: 200px;
+}
+
+/* Rendered Markdown in docs panel */
+#docs-content.docs-rendered h1 {
+  font-size: 1.35rem;
+  margin: 0 0 0.75rem;
+  padding-bottom: 0.35rem;
+  border-bottom: 1px solid #e5e7eb;
+  color: #111827;
+}
+
+#docs-content.docs-rendered h2 {
+  font-size: 1.15rem;
+  margin: 1.25rem 0 0.5rem;
+  color: #111827;
+}
+
+#docs-content.docs-rendered h3 {
+  font-size: 1rem;
+  margin: 1rem 0 0.4rem;
+  color: #374151;
+}
+
+#docs-content.docs-rendered p {
+  margin: 0.5rem 0;
+  color: #374151;
+}
+
+#docs-content.docs-rendered ul,
+#docs-content.docs-rendered ol {
+  margin: 0.5rem 0;
+  padding-left: 1.5rem;
+}
+
+#docs-content.docs-rendered li {
+  margin: 0.25rem 0;
+}
+
+#docs-content.docs-rendered code {
+  background: #f3f4f6;
+  padding: 0.15rem 0.4rem;
+  border-radius: 0.35rem;
+  font-size: 0.85em;
+  font-family: ui-monospace, monospace;
+  color: #111827;
+}
+
+#docs-content.docs-rendered pre {
+  background: #f3f4f6;
+  padding: 0.75rem 1rem;
+  border-radius: 0.5rem;
+  overflow: auto;
+  margin: 0.75rem 0;
+  border: 1px solid #e5e7eb;
+}
+
+#docs-content.docs-rendered pre code {
+  background: none;
+  padding: 0;
+}
+
+#docs-content.docs-rendered a {
+  color: #2563eb;
+  text-decoration: none;
+}
+
+#docs-content.docs-rendered a:hover {
+  text-decoration: underline;
+}
+
+#docs-content.docs-rendered hr {
+  border: none;
+  border-top: 1px solid #e5e7eb;
+  margin: 1.25rem 0;
+}
+
+#docs-content.docs-rendered blockquote {
+  margin: 0.5rem 0;
+  padding-left: 1rem;
+  border-left: 3px solid #d1d5db;
+  color: #6b7280;
+}
+
+#docs-content.docs-rendered strong {
+  font-weight: 600;
+  color: #111827;
+}
+
+#docs-content.docs-rendered table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 0.75rem 0;
+  font-size: 0.9rem;
+}
+
+#docs-content.docs-rendered th,
+#docs-content.docs-rendered td {
+  border: 1px solid #e5e7eb;
+  padding: 0.4rem 0.6rem;
+  text-align: left;
+}
+
+#docs-content.docs-rendered th {
+  background: #f9fafb;
+  font-weight: 600;
+  color: #374151;
+}
+
+@media (max-width: 768px) {
+  .topbar {
+    border-radius: 1rem;
+    align-items: flex-start;
+  }
+
+  .navbar {
+    order: 3;
+    width: 100%;
+    justify-content: center;
+  }
+
+  .topbar-right {
+    margin-left: auto;
+  }
+
+  .users-layout,
+  .profile-layout {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .nav-item[data-tab="add-table"]::after {
+    display: none;
+  }
+}