@bakery-framework/plugin-dashboard 1.0.0

package/src/client/parts/utils.ts

@@ -0,0 +1,237 @@
+/**
+ * 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.
+ */
+
+/** `innerText` on an element that may not be in the DOM yet. */
+export function setText(id: string, value: string) {
+  const el = document.getElementById(id)
+  if (el) el.innerText = value
+}
+
+/**
+ * The one spelling of the panels' placeholder/error block.
+ *
+ * `message` is **escaped here**, so a caller cannot leak markup by forgetting.
+ * 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.
+ */
+export function emptyBox(message: string, isError = false): string {
+  const style = isError ? ' style="color: var(--accent-red);"' : ''
+  return `<div class="results-empty"${style}><span>${escapeHTML(message)}</span></div>`
+}
+
+export function setEmpty(
+  el: HTMLElement | null,
+  message: string,
+  isError = false,
+) {
+  if (el) el.innerHTML = emptyBox(message, isError)
+}
+
+/**
+ * Inline SVGs, built from the path data alone. Every hand-written copy in the
+ * panels carried `width="1em" height="1em"` twice — a duplicate attribute the
+ * parser silently drops — and the same ~380-byte markup was pasted once per
+ * use site.
+ */
+export function icon(d: string, size: string): string {
+  return (
+    `<svg style="font-size: ${size};" width="1em" height="1em" ` +
+    `xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">` +
+    `<path fill="currentColor" d="${d}"/></svg>`
+  )
+}
+
+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, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+  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 },
+  page: number,
+  totalPages: number,
+) {
+  setText(ids.info, `Page ${page} of ${totalPages}`)
+  const prevBtn = document.getElementById(ids.prev) as HTMLButtonElement | null
+  const nextBtn = document.getElementById(ids.next) as HTMLButtonElement | null
+  if (prevBtn) prevBtn.disabled = page <= 1
+  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
+  }
+}
+
+export function getWebSocketUrl(path: string) {
+  const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:'
+  return `${protocol}//${location.host}${path}`
+}
+
+export function formatUptime(totalSeconds: number): string {
+  if (totalSeconds < 0) return '0s'
+  const hrs = Math.floor(totalSeconds / 3600)
+  const mins = Math.floor((totalSeconds % 3600) / 60)
+  const secs = Math.floor(totalSeconds % 60)
+  const secsStr = `${secs}s`
+  if (hrs > 0) return `${hrs}h ${mins}m ${secsStr}`
+  if (mins > 0) return `${mins}m ${secsStr}`
+  return secsStr
+}
+
+const COLOR_MAP: Record<string, string> = {
+  r: '#ef4444',
+  g: '#10b981',
+  y: '#facc15',
+  b: '#3b82f6',
+  m: '#ec4899',
+  c: '#06b6d4',
+  w: '#ffffff',
+  d: '#9ca3af',
+  B: '#b45309',
+  p: '#8b5cf6',
+  o: '#f97316',
+}
+
+type ColorState = { html: string; inSpan: boolean }
+
+function applyColorToken(state: ColorState, code: string): void {
+  if (code === '%') {
+    state.html += '%'
+  } else if (code === '*' || code === '0') {
+    if (state.inSpan) {
+      state.html += '</span>'
+      state.inSpan = false
+    }
+  } else if (COLOR_MAP[code]) {
+    if (state.inSpan) state.html += '</span>'
+    state.html += `<span style="color: ${COLOR_MAP[code]};">`
+    state.inSpan = true
+  }
+}
+
+export function colorizeHtml(msg: string): string {
+  const state: ColorState = { html: '', inSpan: false }
+  const parts = msg.split(/(%[a-zA-Z0-9*%])/g)
+
+  for (const part of parts) {
+    if (part.startsWith('%') && part.length === 2) {
+      applyColorToken(state, part[1])
+    } else {
+      state.html += escapeHTML(part)
+    }
+  }
+
+  if (state.inSpan) state.html += '</span>'
+  return state.html
+}

package/src/components/DBBrowser.tsx

@@ -0,0 +1,365 @@
+import { connection } from '@bakery-framework/orm/connection'
+
+const driverNames = {
+  postgres: 'PostgreSQL',
+  mysql: 'MySQL',
+  sqlite: 'SQLite',
+}
+
+export function renderDatabaseBrowser() {
+  const driverName = driverNames[connection.driver] || 'Database'
+  return (
+    <div id="panel-database" class="panel">
+      <style>{`
+        .db-mobile-toggle { display: none; margin-bottom: 1rem; width: 100%; justify-content: space-between; align-items: center; }
+        @media (max-width: 900px) {
+          .db-mobile-toggle { display: flex; }
+          #db-sidebar { display: none; }
+          #db-sidebar.mobile-open { display: block; margin-bottom: 1rem; }
+        }
+      `}</style>
+      <div class="db-mobile-toggle">
+        <h2 class="db-browser-mobile-title">
+          <iconify-icon icon="lucide:database"></iconify-icon>
+          Database Explorer
+        </h2>
+        <button
+          type="button"
+          class="btn btn-secondary"
+          onclick="document.getElementById('db-sidebar').classList.toggle('mobile-open')">
+          <iconify-icon icon="lucide:menu"></iconify-icon>
+          <span>Tables Menu</span>
+        </button>
+      </div>
+      <div class="db-container">
+        {/* Left Sidebar: Discovered Tables & Schema Details */}
+        <div id="db-sidebar" class="sidebar glass-effect">
+          <div class="sidebar-scroll-container">
+            <div class="sidebar-search">
+              <input
+                type="text"
+                id="db-table-search"
+                class="search-input"
+                placeholder="Search tables..."
+                oninput="filterTablesList()"
+              />
+            </div>
+            <div class="sidebar-title">
+              <span>DISCOVERED TABLES</span>
+              <span id="tables-count">(0)</span>
+            </div>
+            <ul class="table-list" id="tables-list">
+              <li class="results-empty">Scanning schema...</li>
+            </ul>
+          </div>
+        </div>
+
+        {/* Right Content Area: Main Browser and SQL Terminal */}
+        <div class="console-container">
+          {/* Visual Browser Header (Shown only when a table is selected) */}
+          <div id="db-browser-view" class="browser-card glass-effect">
+            <div class="browser-header">
+              <div class="table-info">
+                <h2 id="current-table-title">
+                  <iconify-icon icon="lucide:table"></iconify-icon>
+                  <span>users</span>
+                </h2>
+                <span id="table-row-count-badge" class="badge">
+                  0 rows
+                </span>
+              </div>
+              <div class="actions-group">
+                <button
+                  type="button"
+                  class="btn btn-primary"
+                  onclick="openInsertModal()">
+                  <iconify-icon icon="lucide:plus"></iconify-icon>
+                  <span>Add Row</span>
+                </button>
+                <button
+                  type="button"
+                  class="btn btn-secondary"
+                  onclick="openImportModal()">
+                  <iconify-icon icon="lucide:file-up"></iconify-icon>
+                  <span>Import CSV</span>
+                </button>
+                <div class="export-dropdown-wrapper">
+                  <button
+                    type="button"
+                    class="btn btn-secondary"
+                    onclick="toggleExportMenu()">
+                    <iconify-icon icon="lucide:download"></iconify-icon>
+                    <span>Export ▾</span>
+                  </button>
+                  <div id="export-menu" class="export-menu">
+                    <button type="button" onclick="exportToCSV()">
+                      Export to CSV
+                    </button>
+                    <button type="button" onclick="exportToJSON()">
+                      Export to JSON
+                    </button>
+                  </div>
+                </div>
+                <button
+                  type="button"
+                  class="btn btn-secondary btn-danger"
+                  onclick="truncateCurrentTable()">
+                  <iconify-icon icon="lucide:alert-triangle"></iconify-icon>
+                  <span>Truncate</span>
+                </button>
+              </div>
+            </div>
+
+            {/* Filter Query Builder Bar */}
+            <div class="filter-builder-card glass-effect">
+              <div class="filter-builder-row">
+                <span class="filter-label">
+                  <iconify-icon icon="lucide:filter"></iconify-icon>
+                  <span>Filters</span>
+                </span>
+                <select id="filter-col-select" class="filter-select">
+                  <option value="">-- Choose Column --</option>
+                </select>
+                <select id="filter-op-select" class="filter-select">
+                  <option value="like">contains</option>
+                  <option value="=">equals</option>
+                  <option value=">">&gt;</option>
+                  <option value="<">&lt;</option>
+                  <option value="is_null">is null</option>
+                  <option value="is_not_null">is not null</option>
+                </select>
+                <input
+                  type="text"
+                  id="filter-val-input"
+                  class="filter-input"
+                  placeholder="Filter value..."
+                />
+                <button
+                  type="button"
+                  class="btn btn-secondary"
+                  onclick="addActiveFilter()">
+                  Apply
+                </button>
+                <button
+                  type="button"
+                  class="btn btn-secondary"
+                  onclick="clearActiveFilters()">
+                  Clear All
+                </button>
+              </div>
+              <div id="active-filters-list" class="active-filters-list">
+                {/* Dynamically generated filter chips */}
+              </div>
+            </div>
+
+            {/* Pagination Controls */}
+            <div class="pagination-bar">
+              <div class="page-size-selector">
+                <span>Show</span>
+                <select
+                  id="db-page-size"
+                  class="filter-select"
+                  onchange="changePageSize()">
+                  <option value="10">10 rows</option>
+                  <option value="25">25 rows</option>
+                  <option value="50" selected>
+                    50 rows
+                  </option>
+                  <option value="100">100 rows</option>
+                  <option value="500">500 rows</option>
+                </select>
+              </div>
+              <div class="page-nav">
+                <button
+                  type="button"
+                  id="btn-page-prev"
+                  class="btn btn-secondary"
+                  onclick="prevPage()">
+                  <iconify-icon icon="lucide:chevron-left"></iconify-icon>
+                  <span>Prev</span>
+                </button>
+                <span id="db-page-info">Page 1 of 1</span>
+                <button
+                  type="button"
+                  id="btn-page-next"
+                  class="btn btn-secondary"
+                  onclick="nextPage()">
+                  <span>Next</span>
+                  <iconify-icon icon="lucide:chevron-right"></iconify-icon>
+                </button>
+              </div>
+              <div class="rows-meta">
+                <span id="db-rows-meta">0 rows matching filters</span>
+              </div>
+            </div>
+
+            {/* Interactive Data Table Grid */}
+            <div class="results-card glass-effect">
+              <div id="browser-grid-body">
+                <div class="results-empty">
+                  <span>Loading table data...</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* SQL Terminal Console */}
+          <div class="editor-card glass-effect">
+            <div class="sql-terminal-header">
+              <h2>{driverName} SQL Terminal</h2>
+              <span class="console-mode-badge">Read/Write Mode Enabled</span>
+            </div>
+            <textarea
+              class="sql-textarea"
+              id="sql-query"
+              placeholder="SELECT * FROM users LIMIT 10;"
+            />
+            <div class="actions-row">
+              <span class="sql-terminal-help">
+                Supports SELECT, UPDATE, INSERT, DELETE, and administrative
+                statements.
+              </span>
+              <button
+                type="button"
+                class="btn sql-terminal-run"
+                onclick="runQuery()">
+                <iconify-icon icon="lucide:play"></iconify-icon>
+                <span>Run SQL Command</span>
+              </button>
+            </div>
+          </div>
+
+          {/* SQL Terminal Output */}
+          <div class="results-card glass-effect" id="sql-console-results-card">
+            <div class="results-header">
+              <span>SQL TERMINAL OUTPUT</span>
+              <span id="results-meta"></span>
+            </div>
+            <div id="results-body">
+              <div class="results-empty">
+                <span>
+                  No SQL query executed yet. Write a query above and click "Run
+                  SQL Command".
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Dynamic Insert Modal */}
+      <div id="modal-insert" class="modal-overlay">
+        <div class="modal-card">
+          <div class="modal-header">
+            <h3>Add New Row</h3>
+            <button
+              type="button"
+              class="modal-close"
+              onclick="closeInsertModal()">
+              &times;
+            </button>
+          </div>
+          <form id="insert-row-form" onsubmit="submitInsertRow(event)">
+            <div id="insert-fields-container" class="modal-fields-container">
+              {/* Dynamically generated form fields */}
+            </div>
+            <div class="modal-actions">
+              <button
+                type="button"
+                class="btn btn-secondary"
+                onclick="closeInsertModal()">
+                Cancel
+              </button>
+              <button type="submit" class="btn btn-primary">
+                Add Row
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+
+      {/* Dynamic Edit Modal */}
+      <div id="modal-edit" class="modal-overlay">
+        <div class="modal-card">
+          <div class="modal-header">
+            <h3>Edit Row Details</h3>
+            <button
+              type="button"
+              class="modal-close"
+              onclick="closeEditModal()">
+              &times;
+            </button>
+          </div>
+          <form id="edit-row-form" onsubmit="submitEditRow(event)">
+            <input type="hidden" id="edit-row-rowid" />
+            <div id="edit-fields-container" class="modal-fields-container">
+              {/* Dynamically generated form fields */}
+            </div>
+            <div class="modal-actions">
+              <button
+                type="button"
+                class="btn btn-secondary"
+                onclick="closeEditModal()">
+                Cancel
+              </button>
+              <button type="submit" class="btn btn-primary">
+                Save Changes
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+
+      {/* CSV Import Modal */}
+      <div id="modal-import" class="modal-overlay">
+        <div class="modal-card">
+          <div class="modal-header">
+            <h3>
+              <iconify-icon icon="lucide:file-up"></iconify-icon>
+              <span>Bulk Import CSV Data</span>
+            </h3>
+            <button
+              type="button"
+              class="modal-close"
+              onclick="closeImportModal()">
+              &times;
+            </button>
+          </div>
+          <div class="modal-fields-container">
+            <p>
+              Paste CSV data below. The first row must contain column headers
+              matching the table schema. Data values are automatically parsed.
+            </p>
+            <textarea
+              id="csv-import-textarea"
+              class="sql-textarea"
+              placeholder="username,email&#10;alice,alice@example.com&#10;bob,bob@example.com"></textarea>
+            <div class="import-upload-block">
+              <span>Or upload a .csv file:</span>
+              <input
+                type="file"
+                id="csv-file-input"
+                accept=".csv"
+                onchange="handleCsvFileSelect(event)"
+              />
+            </div>
+          </div>
+          <div class="modal-actions">
+            <button
+              type="button"
+              class="btn btn-secondary"
+              onclick="closeImportModal()">
+              Cancel
+            </button>
+            <button
+              type="button"
+              class="btn btn-primary"
+              onclick="submitImportCsv()">
+              Import Rows
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/LogsPanel.tsx

@@ -0,0 +1,35 @@
+export function renderLogsPanel() {
+  return (
+    <div id="panel-logs" class="panel">
+      <div class="card glass-effect">
+        <div class="actions-row">
+          <h2>Real-time Server Logs</h2>
+          <div class="actions-group">
+            <button
+              type="button"
+              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>
+              <input type="checkbox" id="logs-autoscroll" checked /> Auto-scroll
+            </label>
+          </div>
+        </div>
+
+        <div id="logs-console" class="log-console">
+          <div class="text-secondary">Connecting to server log stream...</div>
+        </div>
+      </div>
+    </div>
+  )
+}