@bakery-framework/plugin-dashboard 2.0.0-alpha.5 → 2.0.0-alpha.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bakery-framework/plugin-dashboard",
-  "version": "2.0.0-alpha.5",
+  "version": "2.0.0-alpha.6",
   "description": "Bakery dashboard plugin.",
   "keywords": [
     "bakery",
@@ -33,9 +33,9 @@
     "!src/tests"
   ],
   "dependencies": {
-    "@bakery-framework/core": "^2.0.0-alpha.5",
-    "@bakery-framework/orm": "^2.0.0-alpha.5",
-    "@bakery-framework/plugin-analytics": "^2.0.0-alpha.5"
+    "@bakery-framework/core": "^2.0.0-alpha.6",
+    "@bakery-framework/orm": "^2.0.0-alpha.6",
+    "@bakery-framework/plugin-analytics": "^2.0.0-alpha.6"
   },
   "engines": {
     "bun": ">=1.3.14"

package/src/client/dashboard.ts

@@ -1,35 +1,3 @@
-import {
-  addActiveFilter,
-  changePageSize,
-  clearActiveFilters,
-  closeEditModal,
-  closeExportMenuIfOutside,
-  closeImportModal,
-  closeInsertModal,
-  deleteTableRow,
-  exportToCSV,
-  exportToJSON,
-  fetchTableData,
-  filterTablesList,
-  handleCsvFileSelect,
-  inspectTable,
-  loadSchema,
-  nextPage,
-  openEditModal,
-  openImportModal,
-  openInsertModal,
-  prevPage,
-  removeActiveFilter,
-  runQuery,
-  selectDatabaseTable,
-  startInlineEdit,
-  submitEditRow,
-  submitImportCsv,
-  submitInsertRow,
-  toggleExportMenu,
-  toggleGridSort,
-  truncateCurrentTable,
-} from './parts/database'
 import { refreshShimmerCache } from './parts/effects'
 import { clearLogs, initLogsWebSocket, toggleLogsPlay } from './parts/logs'
 import {
@@ -83,9 +51,10 @@ function switchTab(tabId: string) {
   const label = document.querySelector(`.tab-btn.active span:last-child`)
   if (crumb && label) crumb.textContent = label.textContent
 
+  // No `database` entry: that panel is static markup now — a link to the
+  // explorer at `/_db` — so there is nothing to fetch when it is shown.
   match(tabId, {
     sessions: loadSessions,
-    database: loadSchema,
     logs: initLogsWebSocket,
     'top-pages': () => loadStats(true),
   })
@@ -93,8 +62,6 @@ function switchTab(tabId: string) {
   refreshShimmerCache()
 }
 
-window.addEventListener('click', closeExportMenuIfOutside)
-
 window.addEventListener('click', e => {
   const menu = document.getElementById('profile-menu')
   const trigger = document.querySelector('.profile-trigger-btn')
@@ -125,36 +92,6 @@ w.changeSessionPageSize = changeSessionPageSize
 w.sessionKeyAction = sessionKeyAction
 w.openSessionKeyEditor = openSessionKeyEditor
 
-w.loadSchema = loadSchema
-w.filterTablesList = filterTablesList
-w.selectDatabaseTable = selectDatabaseTable
-w.fetchTableData = fetchTableData
-w.toggleGridSort = toggleGridSort
-w.prevPage = prevPage
-w.nextPage = nextPage
-w.changePageSize = changePageSize
-w.startInlineEdit = startInlineEdit
-w.addActiveFilter = addActiveFilter
-w.removeActiveFilter = removeActiveFilter
-w.clearActiveFilters = clearActiveFilters
-w.openInsertModal = openInsertModal
-w.closeInsertModal = closeInsertModal
-w.submitInsertRow = submitInsertRow
-w.openEditModal = openEditModal
-w.closeEditModal = closeEditModal
-w.submitEditRow = submitEditRow
-w.openImportModal = openImportModal
-w.closeImportModal = closeImportModal
-w.handleCsvFileSelect = handleCsvFileSelect
-w.submitImportCsv = submitImportCsv
-w.toggleExportMenu = toggleExportMenu
-w.exportToCSV = exportToCSV
-w.exportToJSON = exportToJSON
-w.truncateCurrentTable = truncateCurrentTable
-w.deleteTableRow = deleteTableRow
-w.inspectTable = inspectTable
-w.runQuery = runQuery
-
 w.initLogsWebSocket = initLogsWebSocket
 w.toggleLogsPlay = toggleLogsPlay
 w.clearLogs = clearLogs

package/src/client/parts/effects.ts

@@ -4,8 +4,8 @@ export let refreshShimmerCache = () => {}
  * Both effects below run on import. Without this guard, importing anything that
  * transitively reaches this file outside a browser throws on the first `window`
  * access — which made every module in `client/parts/` untestable, including the
- * hand-built HTML in `database.ts` that has produced every XSS found in this
- * repo. A DOM effect with no DOM is a no-op, not an error.
+ * hand-built HTML in the since-retired `database.ts` that produced every XSS
+ * found in this repo. A DOM effect with no DOM is a no-op, not an error.
  */
 const HAS_DOM = typeof window !== 'undefined' && typeof document !== 'undefined'
 

package/src/client/parts/utils.ts

@@ -1,12 +1,15 @@
 /**
  * Shared browser-side helpers for the dashboard panels.
  *
- * The three panels (database, sessions, stats) were built independently and
- * each grew its own copy of the same four things: an element-text setter, a
- * `results-empty` block, a fetch/`.json()` pair, and a prev/next pager. They
- * are declared once here because this file is compiled into the shipped
- * bundle — a duplicated string literal is duplicated bytes, the minifier does
- * not merge them.
+ * The panels were built independently and each grew its own copy of the same
+ * four things: an element-text setter, a `results-empty` block, a
+ * fetch/`.json()` pair, and a prev/next pager. They are declared once here
+ * because this file is compiled into the shipped bundle — a duplicated string
+ * literal is duplicated bytes, the minifier does not merge them.
+ *
+ * Shrank when the database editor was retired: `executeAction`, `getJson`,
+ * `errorBox` and three icon paths had no caller left once `database.ts` went,
+ * and dead code in a browser bundle is bytes every operator downloads.
  */
 
 /** `innerText` on an element that may not be in the DOM yet. */
@@ -22,9 +25,10 @@ export function setText(id: string, value: string) {
  * These helpers previously took a string straight into `innerHTML`: every
  * caller happened to pass a literal or escape first, which is exactly the state
  * a codebase is in right before it stops being true. Every XSS found in this
- * repo came from hand-built DOM strings in these three files, including a
- * stored-XSS to arbitrary-SQL chain, so the default here is the safe one and
- * markup is not expressible through it at all.
+ * repo came from hand-built DOM strings in these panel files, including a
+ * stored-XSS to arbitrary-SQL chain through the database grid — which is gone
+ * now, but the escaping default it argued for is not, because the sessions and
+ * stats panels build markup the same way from data they did not write.
  */
 export function emptyBox(message: string, isError = false): string {
   const style = isError ? ' style="color: var(--accent-red);"' : ''
@@ -53,36 +57,10 @@ export function icon(d: string, size: string): string {
   )
 }
 
-export const ICON_TABLE =
-  'M19 21H5q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21M5 8h14V5H5zm2.5 2H5v9h2.5zm9 0v9H19v-9zm-2 0h-5v9h5z'
-export const ICON_EYE =
-  'M15.188 14.688Q16.5 13.375 16.5 11.5t-1.312-3.187T12 7T8.813 8.313T7.5 11.5t1.313 3.188T12 16t3.188-1.312m-5.1-1.276Q9.3 12.625 9.3 11.5t.788-1.912T12 8.8t1.913.788t.787 1.912t-.787 1.913T12 14.2t-1.912-.787m-4.738 3.55Q2.35 14.925 1 11.5q1.35-3.425 4.35-5.462T12 4t6.65 2.038T23 11.5q-1.35 3.425-4.35 5.463T12 19t-6.65-2.037m11.838-1.45Q19.55 14.025 20.8 11.5q-1.25-2.525-3.613-4.012T12 6T6.813 7.488T3.2 11.5q1.25 2.525 3.613 4.013T12 17t5.188-1.487'
 export const ICON_EDIT =
   'M5 19h1.425L16.2 9.225L14.775 7.8L5 17.575zm-2 2v-4.25L16.2 3.575q.3-.275.663-.425t.762-.15t.775.15t.65.45L20.425 5q.3.275.438.65T21 6.4q0 .4-.137.763t-.438.662L7.25 21zM19 6.4L17.6 5zm-3.525 2.125l-.7-.725L16.2 9.225z'
 export const ICON_DELETE =
   'M7 21q-.825 0-1.412-.587T5 19V6H4V4h5V3h6v1h5v2h-1v13q0 .825-.587 1.413T17 21zM17 6H7v13h10zM9 17h2V8H9zm4 0h2V8h-2zM7 6v13z'
-export const ICON_WARN =
-  'M1 21L12 2l11 19zm3.45-2h15.1L12 6zm8.263-1.287Q13 17.425 13 17t-.288-.712T12 16t-.712.288T11 17t.288.713T12 18t.713-.288M11 15h2v-5h-2zm1-2.5'
-
-/**
- * An error block with the warning glyph, as the fetch failure paths render it.
- * `message` is escaped — see `emptyBox`. The two dynamic callers pass a driver
- * error string, which quotes the caller's own SQL back at them.
- */
-export function errorBox(message: string): string {
-  return (
-    `<div class="results-empty" style="color: var(--accent-red);">` +
-    `<span style="display: inline-flex; align-items: center; gap: 0.25rem;">` +
-    `${icon(ICON_WARN, '1.1rem')}${escapeHTML(message)}</span></div>`
-  )
-}
-
-/** GET a dashboard endpoint and unwrap the JSON envelope. */
-export async function getJson(url: string): Promise<any> {
-  const res = await fetch(url)
-  return await res.json()
-}
-
 /** POST a JSON body to a dashboard endpoint and unwrap the envelope. */
 export async function postJson(url: string, body: unknown): Promise<any> {
   const res = await fetch(url, {
@@ -93,11 +71,6 @@ export async function postJson(url: string, body: unknown): Promise<any> {
   return await res.json()
 }
 
-/** The mutating half of the database panel; every action shares one endpoint. */
-export function executeAction(body: Record<string, unknown>): Promise<any> {
-  return postJson('/api/_dashboard/execute-action', body)
-}
-
 /** Page N of M, with the prev/next buttons disabled at the ends. */
 export function setPager(
   ids: { info: string; prev: string; next: string },

package/src/components/DBBrowser.tsx

@@ -1,362 +1,46 @@
-import { connection } from '@bakery-framework/orm/connection'
-
-const driverNames = {
-  postgres: 'PostgreSQL',
-  mysql: 'MySQL',
-  sqlite: 'SQLite',
-}
-
+/**
+ * The Database tab is a signpost, not a browser.
+ *
+ * This panel used to be the grid editor and a raw SQL prompt, backed by
+ * `POST /api/_dashboard/query` and `POST /api/_dashboard/execute-action` and
+ * gated by a single environment flag. Both endpoints are gone.
+ * `@bakery-framework/plugin-db-explorer` does the same work at `/_db` with an
+ * access level per caller instead, so the console points at it rather than
+ * shipping a second, weaker copy.
+ *
+ * Deliberately static: no fetch, no client module, nothing to escape. It is
+ * plain markup so that a tab which now only links somewhere cannot grow a
+ * data path back by accident.
+ */
 export function renderDatabaseBrowser() {
-  const driverName = driverNames[connection.driver] || 'Database'
   return (
     <div id="panel-database" class="panel">
-      <style>{`
-        .db-mobile-toggle { display: none; margin-bottom: 1rem; width: 100%; justify-content: space-between; align-items: center; }
-        @media (max-width: 900px) {
-          .db-mobile-toggle { display: flex; }
-          #db-sidebar { display: none; }
-          #db-sidebar.mobile-open { display: block; margin-bottom: 1rem; }
-        }
-      `}</style>
-      <div class="db-mobile-toggle">
-        <h2 class="db-browser-mobile-title">
-          <iconify-icon icon="lucide:database"></iconify-icon>
-          Database Explorer
-        </h2>
-        <button
-          type="button"
-          class="btn btn-secondary"
-          onclick="document.getElementById('db-sidebar').classList.toggle('mobile-open')">
-          <iconify-icon icon="lucide:menu"></iconify-icon>
-          <span>Tables Menu</span>
-        </button>
-      </div>
-      <div class="db-container">
-        {/* Left Sidebar: Discovered Tables & Schema Details */}
-        <div id="db-sidebar" class="sidebar glass-effect">
-          <div class="sidebar-scroll-container">
-            <div class="sidebar-search">
-              <input
-                type="text"
-                id="db-table-search"
-                class="search-input"
-                placeholder="Search tables..."
-                oninput="filterTablesList()"
-              />
-            </div>
-            <div class="sidebar-title">
-              <span>DISCOVERED TABLES</span>
-              <span id="tables-count">(0)</span>
-            </div>
-            <ul class="table-list" id="tables-list">
-              <li class="results-empty">Scanning schema...</li>
-            </ul>
+      <div class="browser-card glass-effect">
+        <div class="browser-header">
+          <div class="table-info">
+            <h2>
+              <iconify-icon icon="lucide:database"></iconify-icon>
+              <span>Database</span>
+            </h2>
           </div>
         </div>
 
-        {/* Right Content Area: Main Browser and SQL Terminal */}
-        <div class="console-container">
-          {/* Visual Browser Header (Shown only when a table is selected) */}
-          <div id="db-browser-view" class="browser-card glass-effect">
-            <div class="browser-header">
-              <div class="table-info">
-                <h2 id="current-table-title">
-                  <iconify-icon icon="lucide:table"></iconify-icon>
-                  <span>users</span>
-                </h2>
-                <span id="table-row-count-badge" class="badge">
-                  0 rows
-                </span>
-              </div>
-              <div class="actions-group">
-                <button
-                  type="button"
-                  class="btn btn-primary"
-                  onclick="openInsertModal()">
-                  <iconify-icon icon="lucide:plus"></iconify-icon>
-                  <span>Add Row</span>
-                </button>
-                <button
-                  type="button"
-                  class="btn btn-secondary"
-                  onclick="openImportModal()">
-                  <iconify-icon icon="lucide:file-up"></iconify-icon>
-                  <span>Import CSV</span>
-                </button>
-                <div class="export-dropdown-wrapper">
-                  <button
-                    type="button"
-                    class="btn btn-secondary"
-                    onclick="toggleExportMenu()">
-                    <iconify-icon icon="lucide:download"></iconify-icon>
-                    <span>Export ▾</span>
-                  </button>
-                  <div id="export-menu" class="export-menu">
-                    <button type="button" onclick="exportToCSV()">
-                      Export to CSV
-                    </button>
-                    <button type="button" onclick="exportToJSON()">
-                      Export to JSON
-                    </button>
-                  </div>
-                </div>
-                <button
-                  type="button"
-                  class="btn btn-secondary btn-danger"
-                  onclick="truncateCurrentTable()">
-                  <iconify-icon icon="lucide:alert-triangle"></iconify-icon>
-                  <span>Truncate</span>
-                </button>
-              </div>
-            </div>
-
-            {/* Filter Query Builder Bar */}
-            <div class="filter-builder-card glass-effect">
-              <div class="filter-builder-row">
-                <span class="filter-label">
-                  <iconify-icon icon="lucide:filter"></iconify-icon>
-                  <span>Filters</span>
-                </span>
-                <select id="filter-col-select" class="filter-select">
-                  <option value="">-- Choose Column --</option>
-                </select>
-                <select id="filter-op-select" class="filter-select">
-                  <option value="like">contains</option>
-                  <option value="=">equals</option>
-                  <option value=">">&gt;</option>
-                  <option value="<">&lt;</option>
-                  <option value="is_null">is null</option>
-                  <option value="is_not_null">is not null</option>
-                </select>
-                <input
-                  type="text"
-                  id="filter-val-input"
-                  class="filter-input"
-                  placeholder="Filter value..."
-                />
-                <button
-                  type="button"
-                  class="btn btn-secondary"
-                  onclick="addActiveFilter()">
-                  Apply
-                </button>
-                <button
-                  type="button"
-                  class="btn btn-secondary"
-                  onclick="clearActiveFilters()">
-                  Clear All
-                </button>
-              </div>
-              <div id="active-filters-list" class="active-filters-list">
-                {/* Dynamically generated filter chips */}
-              </div>
-            </div>
-
-            {/* Pagination Controls */}
-            <div class="pagination-bar">
-              <div class="page-size-selector">
-                <span>Show</span>
-                <select
-                  id="db-page-size"
-                  class="filter-select"
-                  onchange="changePageSize()">
-                  <option value="10">10 rows</option>
-                  <option value="25">25 rows</option>
-                  <option value="50" selected>
-                    50 rows
-                  </option>
-                  <option value="100">100 rows</option>
-                  <option value="500">500 rows</option>
-                </select>
-              </div>
-              <div class="page-nav">
-                <button
-                  type="button"
-                  id="btn-page-prev"
-                  class="btn btn-secondary"
-                  onclick="prevPage()">
-                  <iconify-icon icon="lucide:chevron-left"></iconify-icon>
-                  <span>Prev</span>
-                </button>
-                <span id="db-page-info">Page 1 of 1</span>
-                <button
-                  type="button"
-                  id="btn-page-next"
-                  class="btn btn-secondary"
-                  onclick="nextPage()">
-                  <span>Next</span>
-                  <iconify-icon icon="lucide:chevron-right"></iconify-icon>
-                </button>
-              </div>
-              <div class="rows-meta">
-                <span id="db-rows-meta">0 rows matching filters</span>
-              </div>
-            </div>
-
-            {/* Interactive Data Table Grid */}
-            <div class="results-card glass-effect">
-              <div id="browser-grid-body">
-                <div class="results-empty">
-                  <span>Loading table data...</span>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* SQL Terminal Console */}
-          <div class="editor-card glass-effect">
-            <div class="sql-terminal-header">
-              <h2>{driverName} SQL Terminal</h2>
-              <span class="console-mode-badge">Read/Write Mode Enabled</span>
-            </div>
-            <textarea
-              class="sql-textarea"
-              id="sql-query"
-              placeholder="SELECT * FROM users LIMIT 10;"
-            />
-            <div class="actions-row">
-              <span class="sql-terminal-help">
-                Supports SELECT, UPDATE, INSERT, DELETE, and administrative
-                statements.
-              </span>
-              <button
-                type="button"
-                class="btn sql-terminal-run"
-                onclick="runQuery()">
-                <iconify-icon icon="lucide:play"></iconify-icon>
-                <span>Run SQL Command</span>
-              </button>
-            </div>
-          </div>
-
-          {/* SQL Terminal Output */}
-          <div class="results-card glass-effect" id="sql-console-results-card">
-            <div class="results-header">
-              <span>SQL TERMINAL OUTPUT</span>
-              <span id="results-meta"></span>
-            </div>
-            <div id="results-body">
-              <div class="results-empty">
-                <span>
-                  No SQL query executed yet. Write a query above and click "Run
-                  SQL Command".
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Dynamic Insert Modal */}
-      <div id="modal-insert" class="modal-overlay">
-        <div class="modal-card">
-          <div class="modal-header">
-            <h3>Add New Row</h3>
-            <button
-              type="button"
-              class="modal-close"
-              onclick="closeInsertModal()">
-              &times;
-            </button>
-          </div>
-          <form id="insert-row-form" onsubmit="submitInsertRow(event)">
-            <div id="insert-fields-container" class="modal-fields-container">
-              {/* Dynamically generated form fields */}
-            </div>
-            <div class="modal-actions">
-              <button
-                type="button"
-                class="btn btn-secondary"
-                onclick="closeInsertModal()">
-                Cancel
-              </button>
-              <button type="submit" class="btn btn-primary">
-                Add Row
-              </button>
-            </div>
-          </form>
-        </div>
-      </div>
-
-      {/* Dynamic Edit Modal */}
-      <div id="modal-edit" class="modal-overlay">
-        <div class="modal-card">
-          <div class="modal-header">
-            <h3>Edit Row Details</h3>
-            <button
-              type="button"
-              class="modal-close"
-              onclick="closeEditModal()">
-              &times;
-            </button>
-          </div>
-          <form id="edit-row-form" onsubmit="submitEditRow(event)">
-            <input type="hidden" id="edit-row-rowid" />
-            <div id="edit-fields-container" class="modal-fields-container">
-              {/* Dynamically generated form fields */}
-            </div>
-            <div class="modal-actions">
-              <button
-                type="button"
-                class="btn btn-secondary"
-                onclick="closeEditModal()">
-                Cancel
-              </button>
-              <button type="submit" class="btn btn-primary">
-                Save Changes
-              </button>
-            </div>
-          </form>
-        </div>
-      </div>
-
-      {/* CSV Import Modal */}
-      <div id="modal-import" class="modal-overlay">
-        <div class="modal-card">
-          <div class="modal-header">
-            <h3>
-              <iconify-icon icon="lucide:file-up"></iconify-icon>
-              <span>Bulk Import CSV Data</span>
-            </h3>
-            <button
-              type="button"
-              class="modal-close"
-              onclick="closeImportModal()">
-              &times;
-            </button>
-          </div>
-          <div class="modal-fields-container">
-            <p>
-              Paste CSV data below. The first row must contain column headers
-              matching the table schema. Data values are automatically parsed.
-            </p>
-            <textarea
-              id="csv-import-textarea"
-              class="sql-textarea"
-              placeholder="username,email&#10;alice,alice@example.com&#10;bob,bob@example.com"></textarea>
-            <div class="import-upload-block">
-              <span>Or upload a .csv file:</span>
-              <input
-                type="file"
-                id="csv-file-input"
-                accept=".csv"
-                onchange="handleCsvFileSelect(event)"
-              />
-            </div>
-          </div>
+        <div class="modal-fields-container">
+          <p>
+            The database browser and editor moved to the Database Explorer
+            plugin, served at <code>/_db</code>. It browses tables, filters and
+            edits rows, and does not accept raw SQL.
+          </p>
+          <p>
+            This console no longer reads or writes table data. If{' '}
+            <code>/_db</code> is not reachable, the explorer plugin is not
+            registered in your <code>server.config.ts</code>.
+          </p>
           <div class="modal-actions">
-            <button
-              type="button"
-              class="btn btn-secondary"
-              onclick="closeImportModal()">
-              Cancel
-            </button>
-            <button
-              type="button"
-              class="btn btn-primary"
-              onclick="submitImportCsv()">
-              Import Rows
-            </button>
+            <a class="btn btn-primary" href="/_db">
+              <iconify-icon icon="lucide:external-link"></iconify-icon>
+              <span>Open Database Explorer</span>
+            </a>
           </div>
         </div>
       </div>