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

package/src/client/parts/utils.ts

@@ -31,7 +31,7 @@ export function setText(id: string, value: string) {
  * 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);"' : ''
+  const style = isError ? ' style="color: var(--danger);"' : ''
   return `<div class="results-empty"${style}><span>${escapeHTML(message)}</span></div>`
 }
 
@@ -57,8 +57,9 @@ export function icon(d: string, size: string): string {
   )
 }
 
-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'
+// `ICON_EDIT` was here. It drew the pencil on the session key editor's Edit
+// button, and that button went with the editor it could not open — see the
+// note in `sessions.ts`. The path data has no other caller.
 export const ICON_DELETE =
   'M7 21q-.825 0-1.412-.587T5 19V6H4V4h5V3h6v1h5v2h-1v13q0 .825-.587 1.413T17 21zM17 6H7v13h10zM9 17h2V8H9zm4 0h2V8h-2zM7 6v13z'
 /** POST a JSON body to a dashboard endpoint and unwrap the envelope. */
@@ -84,67 +85,20 @@ export function setPager(
   if (nextBtn) nextBtn.disabled = page >= totalPages
 }
 
-export class SegmentedProgress {
-  private container: HTMLElement
-  private percent: number
-  private barWidth: number
-  private barGap: number
-  private resizeObserver: ResizeObserver | null = null
-
-  constructor(
-    container: HTMLElement,
-    percent: number,
-    barWidth = 4,
-    barGap = 6,
-  ) {
-    this.container = container
-    this.percent = percent
-    this.barWidth = barWidth
-    this.barGap = barGap
-    this.init()
-  }
-
-  private init() {
-    this.container.classList.add('segmented-progress-container')
-    if (this.barGap !== 6) {
-      this.container.style.gap = `${this.barGap}px`
-    }
-
-    if (typeof ResizeObserver !== 'undefined') {
-      this.resizeObserver = new ResizeObserver(() => this.draw())
-      this.resizeObserver.observe(this.container)
-    }
-
-    this.draw()
-  }
-
-  public destroy() {
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect()
-    }
-  }
-
-  public draw() {
-    const containerWidth = this.container.clientWidth
-    if (containerWidth === 0) return
-
-    const count = Math.floor(
-      (containerWidth + this.barGap) / (this.barWidth + this.barGap),
-    )
-    const activeCount = Math.round((this.percent / 100) * count)
-
-    let html = ''
-    for (let i = 0; i < count; i++) {
-      const className = i < activeCount ? 'active' : 'inactive'
-      let styleAttr = ''
-      if (this.barWidth !== 4) {
-        styleAttr = ` style="width: ${this.barWidth}px;"`
-      }
-      html += `<div class="segmented-bar-segment ${className}"${styleAttr}></div>`
-    }
-    this.container.innerHTML = html
-  }
-}
+/*
+ * `SegmentedProgress` was here, and nothing it drew was ever visible.
+ *
+ * It filled a `.segmented-progress-container` with one `div` per 10px of
+ * width and watched the container with a `ResizeObserver`. Neither that
+ * class nor `.segmented-bar-segment` has a rule in the sheet - grep it - so
+ * the container is a bare block with no height and the segments are bare
+ * blocks with no width. Measured against a running console on the Traffic
+ * panel: 10 containers, 98 children each, every one of them 0px tall.
+ *
+ * So it cost 980 nodes and 10 `ResizeObserver`s per render of that panel,
+ * redrawn on every resize, to show nothing. The list it sat under - path and
+ * hit count - works and stays.
+ */
 
 export function getWebSocketUrl(path: string) {
   const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:'

package/src/components/DBBrowser.tsx

@@ -24,7 +24,6 @@ export function renderDatabaseBrowser() {
         <div class="browser-header">
           <div class="table-info">
             <h2>
-              <iconify-icon icon="lucide:database"></iconify-icon>
               <span>Database</span>
             </h2>
           </div>
@@ -43,7 +42,6 @@ export function renderDatabaseBrowser() {
           </p>
           <div class="modal-actions">
             <a class="btn btn-primary" href="/_db">
-              <iconify-icon icon="lucide:external-link"></iconify-icon>
               <span>Open Database Explorer</span>
             </a>
           </div>

package/src/components/LogsPanel.tsx

@@ -10,14 +10,12 @@ export function renderLogsPanel() {
               class="btn btn-secondary"
               onclick="toggleLogsPlay()"
               id="btn-logs-play">
-              <iconify-icon icon="lucide:pause"></iconify-icon>
               <span>Pause</span>
             </button>
             <button
               type="button"
               class="btn btn-secondary btn-danger"
               onclick="clearLogs()">
-              <iconify-icon icon="lucide:trash-2"></iconify-icon>
               <span>Clear Logs</span>
             </button>
             <label>

package/src/components/SessionsPanel.tsx

@@ -13,7 +13,6 @@ export function renderSessionsPanel() {
             type="button"
             class="btn btn-secondary"
             onclick="loadSessions()">
-            <iconify-icon icon="lucide:refresh-cw"></iconify-icon>
             <span>Refresh Sessions</span>
           </button>
         </div>
@@ -62,7 +61,6 @@ export function renderSessionsPanel() {
               id="session-page-prev"
               class="btn btn-secondary"
               onclick="prevSessionPage()">
-              <iconify-icon icon="lucide:chevron-left"></iconify-icon>
               <span>Prev</span>
             </button>
             <span id="session-page-info">Page 1 of 1</span>
@@ -72,7 +70,6 @@ export function renderSessionsPanel() {
               class="btn btn-secondary"
               onclick="nextSessionPage()">
               <span>Next</span>
-              <iconify-icon icon="lucide:chevron-right"></iconify-icon>
             </button>
           </div>
           <div class="rows-meta">

package/src/components/StatsPanel.tsx

@@ -54,7 +54,6 @@ export function renderStatsPanel() {
 
       <div class="section-header">
         <h2>
-          <iconify-icon icon="lucide:area-chart"></iconify-icon>
           <span>Performance History</span>
         </h2>
         <div class="timescale-selector">
@@ -223,24 +222,6 @@ export function renderStatsPanel() {
             </span>
           </div>
         </div>
-        <div class="chart-card glass-effect" id="chart-db-hits">
-          <span class="card-title">DB Hits History</span>
-          <span class="card-sub">
-            Database query executions (last 1 min, 1s resolution)
-          </span>
-          <canvas id="canvas-db-hits" class="big-chart"></canvas>
-          <div class="chart-stats">
-            <span>
-              MIN: <strong id="dbHits-min">-</strong>
-            </span>
-            <span>
-              MAX: <strong id="dbHits-max">-</strong>
-            </span>
-            <span>
-              AVG: <strong id="dbHits-avg">-</strong>
-            </span>
-          </div>
-        </div>
         <div class="chart-card glass-effect" id="chart-error-page-hits">
           <span class="card-title">Error Page Hits History</span>
           <span class="card-sub">

package/src/components/TopPagesPanel.tsx

@@ -3,7 +3,6 @@ export function renderTopPagesPanel() {
     <div id="panel-top-pages" class="panel">
       <div class="section-header">
         <h2>
-          <iconify-icon icon="lucide:file-text"></iconify-icon>
           <span>Top Visited Pages</span>
         </h2>
         <div class="timescale-selector">

package/src/setup.ts

@@ -139,10 +139,58 @@ async function handleDashboardView() {
   return injected ? injected : response.html(htmlContent)
 }
 
-async function handleJsAsset() {
+/**
+ * A bare `import` left in the bundle, or `null`.
+ *
+ * `bundleModule` marks every *installed* package external, so a bare specifier
+ * survives into the output and resolves through the page's import map. That is
+ * correct for the `/_nm/` bundles, which are loaded as modules. It is fatal
+ * here: this file is served as a classic `<script>`, an import map does not
+ * apply to one, and a top-level `import` is a syntax error — so the *entire*
+ * bundle fails to execute and the console does nothing at all.
+ *
+ * It is worth a check rather than a convention because of how it failed.
+ * `Bun.build` reported success, the file was served with a 200 and the right
+ * length, typecheck passed, and 2,376 tests passed — because nothing
+ * *requested the page*. That is the same gap CLAUDE.md already records for
+ * `apps/starter`: a process that boots is not a page that works.
+ *
+ * Matched on a line starting with `import`, which is what an ESM bundle emits
+ * for an external. A dynamic `import(...)` inside a function body is fine and
+ * does not start a line.
+ */
+export function bareImportIn(bundle: string): string | null {
+  const match = bundle.match(/^import\s[^\n]*?from\s*['"]([^'"]+)['"]/m)
+  return match ? match[1]! : null
+}
+
+/**
+ * Test seams (convention 9). The cached branch is **production-only** -
+ * `isDevWorker` skips it, and in development the bundle is returned as a
+ * string, which `response.type` does give an ETag. That is why the defect was
+ * invisible to a dev server and had to be reproduced under `bun run serve`,
+ * and why a test has to reach the branch directly rather than through a mode.
+ */
+export function __setCachedDashboardJs(path: string | null): void {
+  cachedDashboardJsPath = path
+}
+
+export async function handleJsAsset() {
   if (cachedDashboardJsPath && !isDevWorker) {
     const cachedFile = Bun.file(cachedDashboardJsPath)
-    if (cachedFile.size > 0) return response.type(cachedFile, 'text/javascript')
+    // **The file, not a `Response` wrapping it.** `processResponse` sends a
+    // `Blob` through `ETag.sendFile`, which computes an ETag from the file,
+    // negotiates a precompressed variant and answers a conditional request
+    // with a 304. A `Response` skips all of that: `ETag.sendResponse` returns
+    // early when there is no ETag header already set, so it gains neither an
+    // ETag nor a `Cache-Control`.
+    //
+    // The first request took this path correctly - it returns the written
+    // file below - and every request after it did not, so the console
+    // re-downloaded 30.6 KB on every load. The content type comes from the
+    // `.js` extension on the cached path, which is what the first request
+    // already relied on.
+    if (cachedFile.size > 0) return cachedFile
   }
 
   const bundleResult = await bundleModule(pluginPath('client/dashboard.ts'))
@@ -157,6 +205,19 @@ async function handleJsAsset() {
     )
   }
 
+  // See `bareImportIn`. A build that "succeeded" and cannot run is worse than
+  // one that failed, because it is silent.
+  const bare = bareImportIn(bundleResult.content as string)
+  if (bare) {
+    pluginLog.DASHBOARD_BUNDLE_ERR({
+      error: `dashboard.js kept a bare import of "${bare}". It is served as a classic script, so an import map cannot resolve it and the whole bundle fails to parse. The console client must not import across a package boundary.`,
+    })
+    return response.error(
+      `dashboard.js kept a bare import of "${bare}"`,
+      500,
+    )
+  }
+
   if (!isDevWorker) {
     const tmpPath = `${Bakery.cacheDir}/_dashboard.js`
     await Bun.write(tmpPath, bundleResult.content)

package/src/shell.tsx

@@ -95,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" />
@@ -197,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/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()
-})()