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

package/package.json

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

package/src/client/parts/stats.ts

@@ -509,6 +509,14 @@ export function drawSparkline(
       )
     }
   })
+
+  // Last, so the marker sits above the fill rather than under it.
+  const hovered = resolveHoverPoint(canvasId, dataPoints, {
+    left: rect.left,
+    width,
+    height,
+  })
+  if (hovered) drawHoverMarker(ctx, hovered, height, colorStart)
 }
 
 interface SparklineHoverState {
@@ -519,6 +527,91 @@ interface SparklineHoverState {
 
 export const sparklineHoverStates: Record<string, SparklineHoverState> = {}
 
+export interface HoverPoint {
+  index: number
+  value: number
+  /** Where the point sits on the canvas, in CSS pixels within its box. */
+  x: number
+  y: number
+}
+
+/**
+ * Which sample the pointer is over, and where that sample is drawn.
+ *
+ * Shared by the two things that must agree about it: the marker painted on the
+ * canvas and the tooltip positioned over the card. This arithmetic — the 50px
+ * reserved for the axis labels, the 24 and 12 of vertical padding, and the
+ * `L - M` offset for a series shorter than the window — used to live only in
+ * the tooltip. Copying it into the draw path would have worked exactly until
+ * one copy was adjusted, at which point the dot and its label would point at
+ * different samples and look like a rounding bug.
+ */
+export function resolveHoverPoint(
+  canvasId: string,
+  data: number[],
+  rect: { left: number; width: number; height: number },
+): HoverPoint | null {
+  const state = sparklineHoverStates[canvasId]
+  if (!state?.visible || data.length === 0) return null
+
+  const { min, max, range } = getSparklineScale(data)
+  const graphWidth = Math.max(rect.width - 50, 1)
+  const graphHeight = Math.max(rect.height - 24, 1)
+  const localX = Math.min(Math.max(state.clientX - rect.left, 0), graphWidth)
+
+  const L = getTimescaleLimit(activeTimescale)
+  const M = data.length
+  const j = L === 1 ? 0 : Math.round((localX / graphWidth) * (L - 1))
+  const index = j - (L - M)
+  if (index < 0 || index >= M) return null
+
+  const value = data[index]
+  if (value === null || value === undefined || Number.isNaN(value)) return null
+
+  const safeValue = Math.max(min, Math.min(value, max))
+  return {
+    index,
+    value,
+    x: L === 1 ? 0 : (j / (L - 1)) * graphWidth,
+    y: rect.height - 12 - ((safeValue - min) / range) * graphHeight,
+  }
+}
+
+/**
+ * The hover marker: a guide line down the chart and a ringed dot on the sample.
+ *
+ * The ring is drawn in the card's own background rather than left transparent,
+ * so the dot reads as sitting *on* the line instead of merging into it wherever
+ * the series is dense.
+ */
+function drawHoverMarker(
+  ctx: CanvasRenderingContext2D,
+  point: HoverPoint,
+  height: number,
+  color: string,
+) {
+  ctx.save()
+
+  ctx.beginPath()
+  ctx.moveTo(point.x, 8)
+  ctx.lineTo(point.x, height - 10)
+  ctx.strokeStyle = 'rgba(148, 163, 184, 0.35)'
+  ctx.lineWidth = 1
+  ctx.setLineDash([3, 3])
+  ctx.stroke()
+  ctx.setLineDash([])
+
+  ctx.beginPath()
+  ctx.arc(point.x, point.y, 4.5, 0, Math.PI * 2)
+  ctx.fillStyle = color
+  ctx.fill()
+  ctx.lineWidth = 2
+  ctx.strokeStyle = 'rgba(15, 17, 21, 0.9)'
+  ctx.stroke()
+
+  ctx.restore()
+}
+
 function getSparklineScale(dataPoints: number[]) {
   const validPoints = dataPoints.filter(
     p =>
@@ -619,34 +712,17 @@ export function updateSparklineTooltip(config: Metric) {
   const rect = canvas.getBoundingClientRect()
   const chartCard = canvas.closest('.chart-card') as HTMLElement | null
   const chartRect = chartCard?.getBoundingClientRect() || rect
-  const { min, max, range } = getSparklineScale(data)
-  const graphWidth = Math.max(rect.width - 50, 1)
-  const graphHeight = Math.max(rect.height - 24, 1)
-  const localX = Math.min(Math.max(state.clientX - rect.left, 0), graphWidth)
-
-  const L = getTimescaleLimit(activeTimescale)
-  const M = data.length
-  const j = L === 1 ? 0 : Math.round((localX / graphWidth) * (L - 1))
-  const index = j - (L - M)
 
-  if (index < 0 || index >= M) {
+  const point = resolveHoverPoint(config.canvas, data, rect)
+  if (!point) {
     tooltip.classList.remove('visible')
     return
   }
 
-  const value = data[index]
-  if (value === null || value === undefined || Number.isNaN(value)) {
-    tooltip.classList.remove('visible')
-    return
-  }
-  const safeValue = Math.max(min, Math.min(value, max))
-  const pointX = L === 1 ? 0 : (j / (L - 1)) * graphWidth
-  const pointY = rect.height - 12 - ((safeValue - min) / range) * graphHeight
-
-  tooltip.textContent = `${formatSparklineTooltipValue(value, config.unit)} (${formatSparklineAge(index, data.length)})`
-  tooltip.dataset.placement = pointY < 28 ? 'below' : 'above'
-  tooltip.style.left = `${rect.left - chartRect.left + pointX}px`
-  tooltip.style.top = `${rect.top - chartRect.top + pointY}px`
+  tooltip.textContent = `${formatSparklineTooltipValue(point.value, config.unit)} (${formatSparklineAge(point.index, data.length)})`
+  tooltip.dataset.placement = point.y < 28 ? 'below' : 'above'
+  tooltip.style.left = `${rect.left - chartRect.left + point.x}px`
+  tooltip.style.top = `${rect.top - chartRect.top + point.y}px`
   tooltip.classList.add('visible')
 }
 
@@ -677,12 +753,18 @@ export function bindSparklineTooltips() {
       state.clientX = event.clientX
       state.clientY = event.clientY
       updateSparklineTooltip(config)
+      // The marker is painted *into* the canvas, so it only moves when the
+      // canvas is repainted. Without this it would lag the pointer by up to a
+      // second — the polling redraw's interval — and read as a stuck dot.
+      drawSparkline(config.canvas, config.history, config.stroke, config.fill)
     })
 
     canvas.addEventListener('pointerleave', () => {
       state.visible = false
       const tooltip = ensureSparklineTooltip(canvas)
       if (tooltip) tooltip.classList.remove('visible')
+      // Repaint to clear the marker, for the same reason.
+      drawSparkline(config.canvas, config.history, config.stroke, config.fill)
     })
   }
 

package/src/components/DBBrowser.tsx

@@ -8,6 +8,11 @@
  * 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.

package/src/setup.ts

@@ -26,7 +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 { handleSchema, handleTableData } from './endpoints/database'
 import {
   handleDeleteSession,
   handleGetSessions,
@@ -241,8 +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),
 } satisfies PluginRouteTable
 
 const dispatchDashboardRoute = routeTable(dashboardRoutes)

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>

package/src/endpoints/database.ts

@@ -1,47 +0,0 @@
-import type { JsonResponseData } from '@bakery-framework/core/utils/common'
-import { Try } from '@bakery-framework/core/utils/common'
-import { response } from '@bakery-framework/core/utils/http'
-import { connection } from '@bakery-framework/orm/connection'
-
-/**
- * What is left of the console's database surface: two read-only endpoints.
- *
- * The grid editor and the SQL prompt that used to live here are retired —
- * `@bakery-framework/plugin-db-explorer` does the same work with an access
- * model instead of an environment flag, and the console's Database tab is now
- * a link to it. Gone with them: `handleQuery`, `handleExecuteAction`, the
- * statement classifier in `sql-classify.ts`, and `DASHBOARD_ALLOW_WRITES`.
- *
- * The flag is not deprecated, it is *absent*. Nothing here reads it, so
- * setting it has no effect at all — which is the honest state for a console
- * that can no longer write.
- */
-
-export async function handleSchema(): Promise<JsonResponseData<unknown>> {
-  return await Try.return(
-    async () => response.json.success('success', await connection.getSchema()),
-    () => response.json.error(500, 'Failed to retrieve schema details'),
-  )
-}
-
-export async function handleTableData(
-  url: URL,
-): Promise<JsonResponseData<unknown>> {
-  const tableName = url.searchParams.get('tableName')
-  if (!tableName || !/^[a-zA-Z0-9_]+$/.test(tableName))
-    return response.json.error(400, 'Invalid table name')
-
-  return await Try.return(
-    async () => {
-      const data = await connection.getData(tableName, {
-        page: parseInt(url.searchParams.get('page') || '1', 10),
-        pageSize: parseInt(url.searchParams.get('pageSize') || '50', 10),
-        sortBy: url.searchParams.get('sortBy'),
-        sortOrder: url.searchParams.get('sortOrder') || 'ASC',
-        filters: JSON.parse(url.searchParams.get('filters') || '{}'),
-      })
-      return response.json.success('success', data)
-    },
-    (error: any) => response.json.error(400, error.message),
-  )
-}