@bakery-framework/plugin-dashboard 1.2.3 → 2.0.0-alpha.11

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/index.ts

@@ -1,7 +1,13 @@
 import { definePlugin } from '@bakery-framework/core/plugins'
-import type { AuthorizeFn } from './authorize'
+import type { AuthorizeFn } from '@bakery-framework/core/utils/http'
 
-export type { AuthorizeFn } from './authorize'
+/**
+ * Re-exported so the plugin's public surface is unchanged by the guard moving
+ * into core. It is the same type either way — an app that imported it from here
+ * keeps working, and one that reaches for `@bakery-framework/core/utils/http`
+ * directly gets the identical declaration rather than a structural twin.
+ */
+export type { AuthorizeFn } from '@bakery-framework/core/utils/http'
 
 export interface DashboardPluginOptions {
   /**
@@ -24,10 +30,43 @@ export interface DashboardPluginOptions {
    *
    * Omitted, access is limited to loopback in development and denied in
    * production, so an unconfigured console is never exposed.
+   *
+   * Handed straight to `@bakery-framework/plugin-analytics`, which owns the
+   * door for both surfaces — so this predicate also admits to
+   * `/api/_analytics/stats` and the `/_analytics_ws` socket the console reads.
    */
   authorize?: AuthorizeFn
+
+  /**
+   * A shared access key, typically from the environment:
+   *
+   * ```ts
+   * dashboardPlugin({ credential: import.meta.env.ANALYTICS_KEY })
+   * ```
+   *
+   * Presented as `Authorization: Bearer`, an `x-analytics-key` header, or an
+   * `?analytics-key=` query. Checked in constant time. Unset or empty means
+   * this path is off — it never means open. Composes with `authorize`: either
+   * admits.
+   *
+   * It is the *analytics* key, not a second one: the console delegates its
+   * authorization to `@bakery-framework/plugin-analytics`, so configuring it
+   * here and configuring it on `analyticsPlugin` are the same act. Set it on
+   * either plugin — a bare call never clears what the other one set.
+   */
+  credential?: string
 }
 
+/**
+ * The operator console at `/_dashboard`.
+ *
+ * `@bakery-framework/plugin-analytics` is a hard dependency, not an optional
+ * companion: the console renders analytics, its client calls
+ * `/api/_analytics/reset` and opens `/_analytics_ws`, and registering the
+ * dashboard brings analytics' handlers up so those endpoints exist. It follows
+ * that they share one door rather than two — see `authorize` and `credential`
+ * above.
+ */
 export default function dashboardPlugin(options: DashboardPluginOptions = {}) {
   const enabled = options.enabled ?? true
 
@@ -36,7 +75,10 @@ export default function dashboardPlugin(options: DashboardPluginOptions = {}) {
     async setup() {
       if (!enabled) return
       const { setupDashboard } = await import('./setup')
-      await setupDashboard({ authorize: options.authorize })
+      await setupDashboard({
+        authorize: options.authorize,
+        credential: options.credential,
+      })
     },
   })
 }

package/src/setup.ts

@@ -16,22 +16,16 @@ import {
 import type { JsonResponseData } from '@bakery-framework/core/utils/common'
 import { Try } from '@bakery-framework/core/utils/common'
 import {
+  type AuthorizeFn,
   checkCsrf,
   injectIfHtml,
+  resolveAuthorize,
   response,
 } from '@bakery-framework/core/utils/http'
-import {
-  type AuthorizeFn,
-  defaultAuthorize,
-  isAuthorized,
-  resolveAuthorize,
-} from './authorize'
-import {
-  handleExecuteAction,
-  handleQuery,
-  handleSchema,
-  handleTableData,
-} from './endpoints/database'
+// The console's door is analytics'. This is the one plugin-to-plugin edge in
+// 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 {
   handleDeleteSession,
   handleGetSessions,
@@ -63,6 +57,8 @@ function isDashboardPath(path: string): boolean {
 }
 
 export class DashboardHandler extends Handler {
+  static override namespace = '/_dashboard'
+
   static canHandle(path: string) {
     // Deliberately narrow. This handler outranks every content handler, so
     // anything it claims can never reach the route mount below — assets must
@@ -87,28 +83,29 @@ export class DashboardHandler extends Handler {
   }
 }
 
-let authorize: AuthorizeFn = defaultAuthorize
-
 /**
- * Test seam for the module-level predicate, symmetric with `__setTestDb` in
- * `@bakery-framework/orm` and `__setTestConfig` in core.
+ * The console holds no authorization state of its own — there is no
+ * `__setTestAuthorize` seam here any more, because there is nothing local to
+ * seam. Both options land in analytics, and a test drives the door with
+ * `setAnalyticsAuthorize` / `setAnalyticsCredential` from
+ * `@bakery-framework/plugin-analytics/stats`, which is the same state the
+ * request guard reads.
  *
- * `setupDashboard` is the only other way to set it, and it also mounts routes,
- * registers the handler at priority 120 and installs a global log callback —
- * three process-global mutations, none of them restorable. A test that only
- * needs the request pipeline sets the predicate directly and puts it back in
- * `afterAll`. Always pair with `__resetTestAuthorize()`.
+ * `resolveAuthorize` still runs here rather than in analytics, and that
+ * asymmetry is deliberate. Analytics on its own is closed until configured;
+ * the console keeps its documented default of loopback-in-development,
+ * because `bun create bakery` scaffolds a bare `dashboardPlugin()` and a
+ * console that 404s on the first `bun run dev` is the wrong first impression.
+ * Forwarding `defaultAuthorize` can only ever narrow — it denies in
+ * production and admits nothing but this machine in development.
  */
-export function __setTestAuthorize(fn: AuthorizeFn): void {
-  authorize = fn
-}
-
-export function __resetTestAuthorize(): void {
-  authorize = defaultAuthorize
-}
-
-export function setupDashboard(options: { authorize?: AuthorizeFn } = {}) {
-  authorize = resolveAuthorize(options.authorize)
+export function setupDashboard(
+  options: { authorize?: AuthorizeFn; credential?: string } = {},
+) {
+  setupAnalytics({
+    authorize: resolveAuthorize(options.authorize),
+    credential: options.credential,
+  })
 
   setLogCallback(entry => {
     // Broadcast to the registry LiveReloadHandler actually populates. This used
@@ -173,12 +170,26 @@ async function handleJsAsset() {
   return response.type(bundleResult.content, 'text/javascript')
 }
 
+/**
+ * One door, and it is analytics'. `isAnalyticsAuthorized` reads the same
+ * credential and the same predicate that gate `/api/_analytics/stats` and the
+ * `/_analytics_ws` socket — which the console's own client calls, so a console
+ * admitted by a different key than the data it renders would be half-open by
+ * construction.
+ *
+ * The 401/404 split is the console's and stays here: an API path says
+ * "Unauthorized" because a caller with a key needs to know its key was
+ * refused, while a page says "Not Found" because a 401 on the shell confirms
+ * to anyone probing that a console is mounted at this path. Analytics makes
+ * the same distinction along a different axis (armed → 401, unconfigured →
+ * 404); neither is a substitute for the other.
+ */
 async function checkAuthMiddleware(req: Request, path: string) {
   // Styling and script for the console are not secrets, and letting them
   // through keeps an unauthorised response from rendering unstyled.
   if (/\.(css|js)$/.test(path)) return null
 
-  if (await isAuthorized(authorize, req)) return null
+  if (await isAnalyticsAuthorized(req)) return null
 
   return path.startsWith('/api/')
     ? response.error('Unauthorized', 401)
@@ -194,9 +205,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)
@@ -226,10 +242,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)
@@ -264,5 +276,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
 }