@bakery-framework/plugin-dashboard 1.0.0

package/src/client/parts/effects.ts

@@ -0,0 +1,327 @@
+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.
+ */
+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()
+})()

package/src/client/parts/logs.ts

@@ -0,0 +1,132 @@
+import { colorizeHtml, getWebSocketUrl } from './utils'
+
+export let logsWs: WebSocket | null = null
+export let logsPaused = false
+
+/**
+ * The console keeps the most recent rows only. It previously appended
+ * without ever removing, so a long-lived dashboard tab on a chatty server
+ * grew the DOM without bound — and every append also triggered a shimmer
+ * cache refresh, so the per-line cost climbed with the backlog.
+ */
+const MAX_LOG_ROWS = 500
+
+function appendLogRow(cEl: HTMLElement, row: HTMLElement) {
+  cEl.appendChild(row)
+  while (cEl.childElementCount > MAX_LOG_ROWS) {
+    cEl.removeChild(cEl.firstElementChild!)
+  }
+  scrollConsoleToBottom(cEl)
+}
+
+function scrollConsoleToBottom(cEl: HTMLElement) {
+  const scrollCheck = document.getElementById(
+    'logs-autoscroll',
+  ) as HTMLInputElement | null
+  if (scrollCheck?.checked) {
+    cEl.scrollTop = cEl.scrollHeight
+  }
+}
+
+function getLogLevelColor(level: string): string {
+  if (level === 'WARN') return '#f59e0b'
+  if (level === 'ERROR' || level === 'FATAL') return '#ef4444'
+  if (level === 'DEBUG') return '#a855f7'
+  return '#34d399'
+}
+
+function renderLogEntry(cEl: HTMLElement, parsed: any) {
+  const timestamp = new Date(
+    parsed.timestamp || Date.now(),
+  ).toLocaleTimeString()
+  const level = (parsed.level || 'info').toUpperCase()
+  const by = parsed.by || 'global'
+  const payload = parsed.payload || ''
+
+  const levelColor = getLogLevelColor(level)
+
+  const logRow = document.createElement('div')
+  logRow.style.padding = '0.15rem 0'
+  logRow.style.borderBottom = '1px solid rgba(255, 255, 255, 0.02)'
+
+  // `level` and `by` arrive over the websocket. LiveReloadHandler rebroadcasts
+  // client_log frames from any connected client, so both are untrusted —
+  // `payload` was already escaped by colorizeHtml, these were not.
+  logRow.innerHTML = `
+    <span style="color: var(--text-secondary); margin-right: 0.5rem;">[${escapeHTML(String(timestamp))}]</span>
+    <span style="color: ${levelColor}; font-weight: bold; margin-right: 0.5rem;">[${escapeHTML(String(level))}]</span>
+    <span style="color: #60a5fa; font-weight: 500; margin-right: 0.5rem;">${escapeHTML(String(by))}:</span>
+    <span style="color: #f1f5f9; white-space: pre-wrap;">${colorizeHtml(payload)}</span>
+  `
+
+  appendLogRow(cEl, logRow)
+}
+
+function renderRawLogEntry(cEl: HTMLElement, rawData: string) {
+  const logRow = document.createElement('div')
+  logRow.style.color = '#cbd5e1'
+  logRow.innerText = rawData
+  appendLogRow(cEl, logRow)
+}
+
+export function initLogsWebSocket() {
+  if (logsWs && logsWs.readyState === WebSocket.OPEN) return
+
+  const consoleEl = document.getElementById('logs-console')
+  if (!consoleEl) return
+  consoleEl.innerHTML =
+    '<div style="color: var(--text-secondary);">Connecting to server log stream...</div>'
+
+  try {
+    logsWs = new WebSocket(getWebSocketUrl('/_livereload'))
+
+    logsWs.onopen = () => {
+      consoleEl.innerHTML =
+        '<div style="color: var(--accent-green); display: flex; align-items: center; gap: 0.25rem;"><iconify-icon icon="lucide:check-circle-2" style="font-size: 1.1rem;"></iconify-icon><span>Connected to logs pipeline. Listening for events...</span></div>'
+      logsWs?.send(JSON.stringify({ type: 'subscribe_logger' }))
+    }
+
+    logsWs.onmessage = event => {
+      if (logsPaused) return
+
+      try {
+        const parsed = JSON.parse(event.data)
+        if (parsed.type === 'server_log' || parsed.type === 'client_log') {
+          renderLogEntry(consoleEl, parsed)
+        }
+      } catch (_e) {
+        renderRawLogEntry(consoleEl, event.data)
+      }
+    }
+
+    logsWs.onclose = () => {
+      const logRow = document.createElement('div')
+      logRow.style.color = '#f59e0b'
+      logRow.innerHTML =
+        '<span style="display: flex; align-items: center; gap: 0.25rem;"><iconify-icon icon="lucide:alert-triangle" style="font-size: 1rem;"></iconify-icon><span>Logs pipeline disconnected. Reconnecting in 3s...</span></span>'
+      consoleEl.appendChild(logRow)
+      setTimeout(initLogsWebSocket, 3000)
+    }
+  } catch (_err) {
+    consoleEl.innerHTML =
+      '<div style="color: var(--accent-red);">Failed to establish log stream connection.</div>'
+  }
+}
+
+export function toggleLogsPlay() {
+  logsPaused = !logsPaused
+  const btn = document.getElementById('btn-logs-play')
+  if (btn) {
+    btn.innerHTML = logsPaused
+      ? '<iconify-icon icon="lucide:play" style="font-size: 1.1rem;"></iconify-icon><span>Resume</span>'
+      : '<iconify-icon icon="lucide:pause" style="font-size: 1.1rem;"></iconify-icon><span>Pause</span>'
+    btn.classList.toggle('btn-success', logsPaused)
+  }
+}
+
+export function clearLogs() {
+  const consoleEl = document.getElementById('logs-console')
+  if (consoleEl)
+    consoleEl.innerHTML =
+      '<div style="color: var(--text-secondary);">Console cleared.</div>'
+}