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

package/src/shell.tsx

@@ -1,6 +1,5 @@
 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'
@@ -13,37 +12,26 @@ import { renderTopPagesPanel } from './components/TopPagesPanel'
  * Keeping that contract lets the chrome be replaced without touching the ~3k
  * lines of panel client code.
  */
-/**
- * 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.
+ * Asked of the registry's *declarations*, 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). `Handler.namespace` is the declaration: any handler that owns
+ * `/_db` as a surface gets the link, including an application serving its own
+ * explorer there.
  *
- * `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.
+ * This replaces a behavioral probe that called every handler's
+ * `canHandle('/_db')` with a control path to exclude the priority-0 catch-all.
+ * The probe worked and its `as any` was the tell: the registry could not say
+ * what a handler serves, so the question had to be asked by experiment. Now it
+ * can: `list()` is typed `typeof Handler[]`, so this reads with no cast, and
+ * a second plugin wanting a console entry declares a namespace rather than
+ * copying a probe.
  */
 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
+  return Bakery.handlers.fetch.list().some(h => h.namespace === '/_db')
 }
 
 interface NavEntry {
@@ -70,7 +58,7 @@ function navSections(explorerMounted: boolean): {
       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.
+        // 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.
@@ -107,11 +95,37 @@ function NavItem({ id, label, href }: NavEntry) {
   )
 }
 
+/**
+ * The rendered shell, and the one fact it depends on.
+ *
+ * Everything in this document is fixed for the life of the process except
+ * whether an explorer is mounted at `/_db`, which decides one nav entry, and
+ * the framework version, which cannot change at all. Rendering it again per
+ * request produced an identical 11.8 KB string every time.
+ *
+ * Measured at **0.50 ms per render** with a CPU-bound control flat at 27-30 ms
+ * - the backlog recorded 12.6 ms, which is 25 times the figure this actually
+ * measures. Small, then, and still pure waste on every console page load.
+ *
+ * Keyed on the mounted flag rather than held unconditionally, so a registry
+ * that changes after the first render is followed rather than remembered
+ * wrongly. Two entries at most, which is why a plain pair is enough and
+ * convention 6 has nothing to say about it.
+ */
+let shellCache: { mounted: boolean; html: string } | null = null
+
+/** Test seam (convention 9): one test's shell must not answer for another's. */
+export function __resetShellCache(): void {
+  shellCache = null
+}
+
 export default function Dashboard() {
   const explorerMounted = explorerIsMounted()
+  if (shellCache?.mounted === explorerMounted) return shellCache.html
+
   const NAV = navSections(explorerMounted)
 
-  return (
+  const html = (
     <html lang="en">
       <head>
         <meta charSet="UTF-8" />
@@ -140,7 +154,7 @@ export default function Dashboard() {
             <div class="rail-foot">
               <span>Bakery</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
+                 : 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`
@@ -209,5 +223,12 @@ export default function Dashboard() {
         <script src="/_dashboard/dashboard.js"></script>
       </body>
     </html>
-  )
+  ) as unknown as string
+  // The same cast `raw()` makes in `core/jsx.ts`: `createElement` is declared
+  // to return `string` and actually returns a `SafeHtml`, a String subclass
+  // that behaves like one everywhere. Cached as it came rather than through
+  // `String()`, so nothing about the value changes by being remembered.
+
+  shellCache = { mounted: explorerMounted, html }
+  return html
 }

package/src/test-fixtures.ts

@@ -9,7 +9,7 @@
  * A database stand-in that records what it was asked to do and does none of it.
  *
  * The assertion that matters in both suites is that the recorded list stays
- * *empty* — a rejection that arrives after the truncate is not a rejection — so
+ * *empty* (a rejection that arrives after the truncate is not a rejection), so
  * the stub must reach no real database and must log every method the endpoints
  * can call. `setup.test.ts` (routing and CSRF) and `endpoints/database.test.ts`
  * (the write gate) each kept their own copy, and the copies had already

package/src/client/parts/effects.ts

@@ -1,327 +0,0 @@
-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 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'
-
-;(function initDashboardShimmer() {
-  if (!HAS_DOM) return
-  if (!window.matchMedia('(hover: hover) and (pointer: fine)').matches) return
-
-  let cachedCards: {
-    el: HTMLElement
-    width: number
-    height: number
-    pageLeft: number
-    pageTop: number
-  }[] = []
-  const mouse = { x: -9999, y: -9999 }
-  let rafId = 0
-
-  refreshShimmerCache = function updateRects() {
-    const cards = Array.from(
-      document.querySelectorAll('.glass-effect'),
-    ) as HTMLElement[]
-
-    cachedCards = cards.map(el => {
-      const rect = el.getBoundingClientRect()
-      return {
-        el,
-        width: rect.width,
-        height: rect.height,
-        pageLeft: rect.left + window.scrollX,
-        pageTop: rect.top + window.scrollY,
-      }
-    })
-  }
-
-  /**
-   * The observer below fires for every subtree mutation on the page, and
-   * `refreshShimmerCache` reads `getBoundingClientRect` once per glass card —
-   * a forced synchronous layout. The log console appends one node per
-   * websocket frame, each in its own task, so a busy server bought one full
-   * layout pass per log line. Coalescing into a frame makes that cost
-   * proportional to frames, not to mutations.
-   */
-  let refreshRafId = 0
-  function scheduleRefresh() {
-    if (refreshRafId) return
-    refreshRafId = requestAnimationFrame(() => {
-      refreshRafId = 0
-      refreshShimmerCache()
-    })
-  }
-
-  window.addEventListener('resize', scheduleRefresh, { passive: true })
-
-  const observer = new MutationObserver(scheduleRefresh)
-  observer.observe(document.body, {
-    childList: true,
-    subtree: true,
-    attributes: true,
-    attributeFilter: ['class'],
-  })
-
-  refreshShimmerCache()
-
-  function updateStyles() {
-    const scrollX = window.scrollX
-    const scrollY = window.scrollY
-
-    for (let i = 0; i < cachedCards.length; i++) {
-      const c = cachedCards[i]
-      const left = c.pageLeft - scrollX
-      const top = c.pageTop - scrollY
-
-      const rx = mouse.x - left
-      const ry = mouse.y - top
-
-      const closestX = Math.max(left, Math.min(mouse.x, left + c.width))
-      const closestY = Math.max(top, Math.min(mouse.y, top + c.height))
-      const dx = mouse.x - closestX
-      const dy = mouse.y - closestY
-      const dist = Math.sqrt(dx * dx + dy * dy)
-
-      if (dist < 200) {
-        c.el.style.setProperty('--mouse-x', `${rx}px`)
-        c.el.style.setProperty('--mouse-y', `${ry}px`)
-      } else {
-        c.el.style.removeProperty('--mouse-x')
-        c.el.style.removeProperty('--mouse-y')
-      }
-    }
-    rafId = 0
-  }
-
-  window.addEventListener(
-    'pointermove',
-    e => {
-      mouse.x = e.clientX
-      mouse.y = e.clientY
-      if (!rafId) rafId = requestAnimationFrame(updateStyles)
-    },
-    { passive: true },
-  )
-
-  window.addEventListener(
-    'scroll',
-    () => {
-      if (mouse.x === -9999) return
-      if (!rafId) rafId = requestAnimationFrame(updateStyles)
-    },
-    { passive: true },
-  )
-
-  window.addEventListener('mouseleave', () => {
-    mouse.x = -9999
-    mouse.y = -9999
-    if (!rafId) rafId = requestAnimationFrame(updateStyles)
-  })
-})()
-
-;(function initDotPattern() {
-  if (!HAS_DOM) return
-
-  const canvas = document.createElement('canvas')
-  canvas.id = 'dot-pattern-canvas'
-  canvas.style.cssText = [
-    'position: fixed',
-    'inset: 0',
-    'width: 100%',
-    'height: 100%',
-    'z-index: -1',
-    'pointer-events: none',
-  ].join(';')
-  document.documentElement.prepend(canvas)
-
-  const ctx = canvas.getContext('2d')!
-  const DOT_SPACING = 28
-  const DOT_RADIUS = 1.1
-  const GLOW_RADIUS = 130
-
-  interface Dot {
-    ox: number
-    oy: number
-    x: number
-    y: number
-  }
-
-  let dots: Dot[] = []
-  const mouse = { x: -9999, y: -9999 }
-  let isAnimating = false
-  let isPressed = false
-  /**
-   * The loop below keeps requesting frames while the pointer is anywhere on
-   * the page, which on a hidden tab is pure waste — and this console is the
-   * kind of page that lives in a background tab for hours. Ported from the
-   * example app's copy of this effect, which had the throttle where this one
-   * did not; the two files are separate copies on purpose (a plugin's client
-   * bundle and an app's script cannot share a module), so a fix to one is
-   * worth checking against the other.
-   */
-  let isTabVisible = !document.hidden
-
-  function initDots() {
-    dots = []
-    const cols = Math.ceil(canvas.width / DOT_SPACING) + 1
-    const rows = Math.ceil(canvas.height / DOT_SPACING) + 1
-
-    for (let r = 0; r < rows; r++) {
-      for (let c = 0; c < cols; c++) {
-        const ox = c * DOT_SPACING
-        const oy = r * DOT_SPACING
-        dots.push({ ox, oy, x: ox, y: oy })
-      }
-    }
-  }
-
-  function resize() {
-    canvas.width = window.innerWidth
-    canvas.height = window.innerHeight
-    initDots()
-    if (!window.matchMedia('(hover: hover) and (pointer: fine)').matches) {
-      draw()
-    } else {
-      if (!isAnimating) {
-        isAnimating = true
-        requestAnimationFrame(draw)
-      }
-    }
-  }
-
-  interface DotTarget {
-    x: number
-    y: number
-    alpha: number
-    radius: number
-  }
-
-  function computeDotTarget(dot: Dot): DotTarget {
-    const dx = mouse.x - dot.ox
-    const dy = mouse.y - dot.oy
-    const dist = Math.sqrt(dx * dx + dy * dy)
-
-    let targetX = dot.ox
-    let targetY = dot.oy
-    let alpha = 0.07
-    let radius = DOT_RADIUS
-
-    if (dist < GLOW_RADIUS) {
-      const t = 1 - dist / GLOW_RADIUS
-      alpha = 0.07 + t * 0.35
-      radius = DOT_RADIUS + t * 0.9
-
-      if (dist > 0.01) {
-        const force = t * (isPressed ? 32 : 18)
-        if (isPressed) {
-          targetX = dot.ox + (dx / dist) * force
-          targetY = dot.oy + (dy / dist) * force
-        } else {
-          targetX = dot.ox - (dx / dist) * force
-          targetY = dot.oy - (dy / dist) * force
-        }
-      }
-    }
-
-    return { x: targetX, y: targetY, alpha, radius }
-  }
-
-  function moveDot(dot: Dot, target: DotTarget): boolean {
-    const dx = target.x - dot.x
-    const dy = target.y - dot.y
-    if (Math.abs(dx) > 0.01 || Math.abs(dy) > 0.01) {
-      dot.x += dx * 0.15
-      dot.y += dy * 0.15
-      return true
-    }
-    dot.x = target.x
-    dot.y = target.y
-    return false
-  }
-
-  function draw() {
-    ctx.clearRect(0, 0, canvas.width, canvas.height)
-
-    let needsMoreFrames = false
-
-    for (let i = 0; i < dots.length; i++) {
-      const dot = dots[i]
-      const target = computeDotTarget(dot)
-      if (moveDot(dot, target)) needsMoreFrames = true
-
-      ctx.beginPath()
-      ctx.arc(dot.x, dot.y, target.radius, 0, Math.PI * 2)
-      ctx.fillStyle = `rgba(255, 255, 255, ${target.alpha})`
-      ctx.fill()
-    }
-
-    if (
-      window.matchMedia('(hover: hover) and (pointer: fine)').matches &&
-      isTabVisible
-    ) {
-      if (mouse.x !== -9999 || needsMoreFrames) {
-        requestAnimationFrame(draw)
-      } else {
-        isAnimating = false
-      }
-    } else {
-      // Hidden tab: stop the loop and let visibilitychange restart it, or the
-      // flag would stay true and the resume below would never fire.
-      isAnimating = false
-    }
-  }
-
-  if (window.matchMedia('(hover: hover) and (pointer: fine)').matches) {
-    window.addEventListener('pointermove', e => {
-      mouse.x = e.clientX
-      mouse.y = e.clientY
-      if (!isAnimating) {
-        isAnimating = true
-        requestAnimationFrame(draw)
-      }
-    })
-
-    window.addEventListener('mouseleave', () => {
-      mouse.x = -9999
-      mouse.y = -9999
-      isPressed = false
-      if (!isAnimating) {
-        isAnimating = true
-        requestAnimationFrame(draw)
-      }
-    })
-
-    window.addEventListener('pointerdown', () => {
-      isPressed = true
-      if (!isAnimating) {
-        isAnimating = true
-        requestAnimationFrame(draw)
-      }
-    })
-
-    window.addEventListener('pointerup', () => {
-      isPressed = false
-      if (!isAnimating) {
-        isAnimating = true
-        requestAnimationFrame(draw)
-      }
-    })
-  }
-
-  document.addEventListener('visibilitychange', () => {
-    isTabVisible = !document.hidden
-    if (isTabVisible && !isAnimating) {
-      isAnimating = true
-      requestAnimationFrame(draw)
-    }
-  })
-
-  window.addEventListener('resize', resize)
-  resize()
-  draw()
-})()