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

package/package.json

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

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/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/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 },