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

package/src/components/DBBrowser.tsx

@@ -1,362 +1,51 @@
-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.
+ *
+ * Rendered **only when nothing serves `/_db`**. With the explorer mounted the
+ * nav entry links straight to it and this panel never appears — a tab whose
+ * whole content is "go there" is a click of ceremony in front of going there.
+ * Without it, this is what explains where the editor went.
+ *
+ * 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>

package/src/setup.ts

@@ -26,12 +26,6 @@ import {
 // the tree, allow-listed by name in `tests/conventions.test.ts`.
 import { setupAnalytics } from '@bakery-framework/plugin-analytics/setup'
 import { isAnalyticsAuthorized } from '@bakery-framework/plugin-analytics/stats'
-import {
-  handleExecuteAction,
-  handleQuery,
-  handleSchema,
-  handleTableData,
-} from './endpoints/database'
 import {
   handleDeleteSession,
   handleGetSessions,
@@ -209,9 +203,14 @@ async function checkAuthMiddleware(req: Request, path: string) {
  *
  * Necessary but **not sufficient on its own**. `SAFE_METHODS` exempts GET, and
  * `processBody` reads a GET's query string as the body, so a plain
- * `<img src="/api/_dashboard/execute-action?action=truncate&tableName=…">`
- * sails past this guard. The mutating keys in the table below are
- * method-qualified for exactly that reason; neither half closes the hole alone.
+ * `<img src="/api/_dashboard/sessions/delete?id=victim">` sails past this
+ * guard. The mutating keys in the table below are method-qualified for exactly
+ * that reason; neither half closes the hole alone.
+ *
+ * The example used to be `execute-action?action=truncate`, which was the worst
+ * of them — a link that emptied a table. That endpoint is gone with the grid
+ * editor, and the two session routes are what is left to protect. The hazard
+ * is unchanged; only the blast radius shrank.
  */
 function checkCsrfMiddleware(req: Request, url: URL): DashboardResponse | null {
   const reason = checkCsrf(req, url)
@@ -241,10 +240,6 @@ const dashboardRoutes = {
   '/api/_dashboard/sessions': (_req, url) => handleGetSessions(url),
   'POST /api/_dashboard/sessions/delete': req => handleDeleteSession(req),
   'POST /api/_dashboard/sessions/update': req => handleUpdateSession(req),
-  '/api/_dashboard/schema': () => handleSchema(),
-  '/api/_dashboard/table-data': (_req, url) => handleTableData(url),
-  'POST /api/_dashboard/query': req => handleQuery(req),
-  'POST /api/_dashboard/execute-action': req => handleExecuteAction(req),
 } satisfies PluginRouteTable
 
 const dispatchDashboardRoute = routeTable(dashboardRoutes)
@@ -279,5 +274,24 @@ export async function handleDashboardRequest(
   const csrfBlock = checkCsrfMiddleware(req, url)
   if (csrfBlock) return csrfBlock
 
-  return dispatchDashboardRoute(req, url)
+  const result = await dispatchDashboardRoute(req, url)
+  if (result) return result
+
+  // `dispatch` answers `null` for a path no key matched, and a handler
+  // returning `null` means "not mine" — which core turns into **204 No
+  // Content**. Every unmatched request under this namespace therefore answered
+  // 204: a status that reads as success and carries nothing.
+  //
+  // Retiring the write endpoints is what made that matter. A script still
+  // posting to `/api/_dashboard/execute-action` was told 204, took it for
+  // success, and silently changed nothing. For a route that has been deleted
+  // that is the worst available answer.
+  //
+  // **Only under `/api/`, and that boundary is load-bearing.** The stylesheet
+  // is served by `mountRoutes`, not by a key in the table above, so `null` is
+  // precisely how `/_dashboard/style.css` *falls through* to the static
+  // pipeline. A blanket 404 here claims it and the console loads unstyled —
+  // which is what happened when this was first written without the condition.
+  if (path.startsWith('/api/')) return response.error('Not Found', 404)
+  return null
 }

package/src/shell.tsx

@@ -1,3 +1,6 @@
+import { getFrameworkVersion } from '@bakery-framework/core'
+import { Bakery } from '@bakery-framework/core/core/bakery'
+import { Try } from '@bakery-framework/core/utils/common'
 import { renderDatabaseBrowser } from './components/DBBrowser'
 import { renderLogsPanel } from './components/LogsPanel'
 import { renderSessionsPanel } from './components/SessionsPanel'
@@ -10,25 +13,89 @@ import { renderTopPagesPanel } from './components/TopPagesPanel'
  * Keeping that contract lets the chrome be replaced without touching the ~3k
  * lines of panel client code.
  */
-const NAV = [
-  {
-    group: 'Observability',
-    items: [
-      { id: 'stats', label: 'Overview' },
-      { id: 'top-pages', label: 'Traffic' },
-      { id: 'logs', label: 'Logs' },
-    ],
-  },
-  {
-    group: 'Data',
-    items: [
-      { id: 'database', label: 'Database' },
-      { id: 'sessions', label: 'Sessions' },
-    ],
-  },
-]
-
-function NavItem({ id, label }: { id: string; label: string }) {
+/**
+ * A path nothing should claim, used as the control below.
+ */
+const NOT_A_ROUTE = '/__bakery_probe_no_handler_serves_this__'
+
+/**
+ * Is anything serving `/_db`?
+ *
+ * Asked **behaviourally**, never by importing db-explorer: a plugin-to-plugin
+ * import is a package-graph edge, and `tests/conventions.test.ts` allows
+ * exactly one of those (this package → analytics). It is also the better
+ * question — the console wants to know whether that path leads somewhere, not
+ * which package put it there, so an application serving its own explorer at
+ * `/_db` gets the link too.
+ *
+ * **The control probe is what makes this work.** `StaticHandler.canHandle()`
+ * returns `true` unconditionally — it is the priority-0 fallback and claims
+ * every path — so "does some handler claim `/_db`" is always yes. A handler
+ * that claims `/_db` *and declines a path nobody serves* is claiming a
+ * namespace rather than catching everything.
+ *
+ * `canHandle` signatures vary across handlers and some read the request, so a
+ * throw here means "not the one we are looking for" rather than an error.
+ */
+function explorerIsMounted(): boolean {
+  for (const handler of Bakery.handlers.fetch.list()) {
+    const claims = (path: string) =>
+      Try.return(() => (handler as any).canHandle?.(path) === true, false)
+    if (claims('/_db') && !claims(NOT_A_ROUTE)) return true
+  }
+  return false
+}
+
+interface NavEntry {
+  id: string
+  label: string
+  /** Present when this entry leaves the console rather than switching a tab. */
+  href?: string
+}
+
+function navSections(explorerMounted: boolean): {
+  group: string
+  items: NavEntry[]
+}[] {
+  return [
+    {
+      group: 'Observability',
+      items: [
+        { id: 'stats', label: 'Overview' },
+        { id: 'top-pages', label: 'Traffic' },
+        { id: 'logs', label: 'Logs' },
+      ],
+    },
+    {
+      group: 'Data',
+      items: [
+        // The console does not browse the database any more, so Database is a
+        // way *out* of it when the explorer is mounted — a link, not a tab.
+        // Without it the entry stays a tab showing the panel that explains
+        // where the editor went and how to get it back; an entry that silently
+        // navigates to a 404 would be worse than either.
+        explorerMounted
+          ? { id: 'database', label: 'Database', href: '/_db' }
+          : { id: 'database', label: 'Database' },
+        { id: 'sessions', label: 'Sessions' },
+      ],
+    },
+  ]
+}
+
+function NavItem({ id, label, href }: NavEntry) {
+  if (href) {
+    return (
+      <a class="tab-btn" href={href}>
+        <span class="nav-dot"></span>
+        <span>{label}</span>
+        <span class="nav-external" aria-hidden="true">
+          ↗
+        </span>
+      </a>
+    )
+  }
+
   return (
     <button
       type="button"
@@ -41,6 +108,9 @@ function NavItem({ id, label }: { id: string; label: string }) {
 }
 
 export default function Dashboard() {
+  const explorerMounted = explorerIsMounted()
+  const NAV = navSections(explorerMounted)
+
   return (
     <html lang="en">
       <head>
@@ -62,14 +132,20 @@ export default function Dashboard() {
               <nav class="rail-group">
                 <div class="rail-group-label">{section.group}</div>
                 {section.items.map(item => (
-                  <NavItem id={item.id} label={item.label} />
+                  <NavItem id={item.id} label={item.label} href={item.href} />
                 ))}
               </nav>
             ))}
 
             <div class="rail-foot">
               <span>Bakery</span>
-              <span id="rail-version">v3</span>
+              {/* Was the literal `v3`, which was never any version of anything
+                  — nothing filled the id, and the framework was on 1.x when it
+                  was written. `getFrameworkVersion()` reads core's own
+                  manifest, which is the number this label claims to be; the
+                  app's version is a different question and `BAKERY_VERSION`
+                  answers that one despite its name. */}
+              <span id="rail-version">v{getFrameworkVersion()}</span>
             </div>
           </aside>
 
@@ -125,7 +201,7 @@ export default function Dashboard() {
             {renderStatsPanel()}
             {renderTopPagesPanel()}
             {renderSessionsPanel()}
-            {renderDatabaseBrowser()}
+            {explorerMounted ? null : renderDatabaseBrowser()}
             {renderLogsPanel()}
           </main>
         </div>