@mantiq/heartbeat 0.5.22 → 0.6.0

package/src/middleware/HeartbeatMiddleware.ts

@@ -95,16 +95,27 @@ export class HeartbeatMiddleware implements Middleware {
     } finally {
       const duration = performance.now() - startTime
 
-      if (this.tracer) {
-        this.tracer.endRequest()
-      }
-
       // Capture response data (must rebuild response so body stays available for upstream middleware)
+      // Record BEFORE ending the trace context so request_id is attached
       if (this.requestWatcher && !error) {
         const responseHeaders = this.captureResponseHeaders(response!)
         const { body: responseBody, size: responseSize, rebuilt } = await this.captureResponseBody(response!)
         if (rebuilt) response = rebuilt
 
+        // Try to extract route metadata
+        let middlewareList: string[] = []
+        let controllerName: string | null = null
+        let routeName: string | null = null
+
+        try {
+          const route = (request as any).route?.() ?? (request as any)._matchedRoute
+          if (route) {
+            middlewareList = route.middleware ?? route._middleware ?? []
+            controllerName = route.controller ?? route.action ?? null
+            routeName = route.name ?? null
+          }
+        } catch { /* route info not available */ }
+
         this.requestWatcher.recordRequest({
           method: request.method(),
           path: request.path(),
@@ -112,9 +123,9 @@ export class HeartbeatMiddleware implements Middleware {
           status: response!.status,
           duration,
           ip: request.ip(),
-          middleware: [],
-          controller: null,
-          routeName: null,
+          middleware: middlewareList,
+          controller: controllerName,
+          routeName,
           memoryUsage: process.memoryUsage().rss - startMemory,
           requestHeaders,
           requestQuery,
@@ -138,6 +149,11 @@ export class HeartbeatMiddleware implements Middleware {
 
       // Flush entries (fire-and-forget)
       this.heartbeat.flush()
+
+      // End the trace context AFTER recording — so all entries get the request_id
+      if (this.tracer) {
+        this.tracer.endRequest()
+      }
     }
 
     // Debug mode: attach X-Heartbeat header + inject widget
@@ -151,7 +167,8 @@ export class HeartbeatMiddleware implements Middleware {
         const totalDuration = performance.now() - startTime
         const totalMemory = Math.abs(process.memoryUsage().rss - startMemory)
         const mem = (totalMemory / 1024 / 1024).toFixed(1)
-        const statsHeader = `${Math.round(totalDuration)}ms;${mem}MB;${response!.status};0q`
+        const queryCount = this.heartbeat.getBufferedCount('query')
+        const statsHeader = `${Math.round(totalDuration)}ms;${mem}MB;${response!.status};${queryCount}q`
 
         try {
           const cloned = response!.clone()
@@ -167,7 +184,7 @@ export class HeartbeatMiddleware implements Middleware {
               duration: totalDuration,
               memory: totalMemory,
               status: response!.status,
-              queries: 0,
+              queries: queryCount,
               dashboardPath: this.heartbeat.config.dashboard.path,
             })
             finalBody = body.replace('</body>', widget + '\n</body>')

package/src/migrations/CreateHeartbeatTables.ts

@@ -10,6 +10,8 @@ export class CreateHeartbeatTables extends Migration {
         table.uuid('uuid').unique()
         table.string('type', 50)
         table.string('request_id', 255).nullable()
+        table.string('origin_type', 20).default('standalone')
+        table.string('origin_id', 255).nullable()
         table.text('content')
         table.text('tags').default('[]')
         table.bigInteger('created_at')
@@ -17,6 +19,7 @@ export class CreateHeartbeatTables extends Migration {
         table.index('type')
         table.index('request_id')
         table.index(['type', 'created_at'])
+        table.index(['origin_type', 'origin_id'])
       })
     }
 
@@ -70,6 +73,17 @@ export class CreateHeartbeatTables extends Migration {
         table.primary('fingerprint')
       })
     }
+
+    // Backfill origin columns for existing installations
+    if (await schema.hasTable('heartbeat_entries')) {
+      if (!(await schema.hasColumn('heartbeat_entries', 'origin_type'))) {
+        await schema.table('heartbeat_entries', (table) => {
+          table.string('origin_type', 20).default('standalone')
+          table.string('origin_id', 255).nullable()
+          table.index(['origin_type', 'origin_id'])
+        })
+      }
+    }
   }
 
   override async down(schema: SchemaBuilder, _db: DatabaseConnection): Promise<void> {

package/src/models/EntryModel.ts

@@ -5,7 +5,7 @@ export class EntryModel extends Model {
   static override incrementing = true
   static override keyType = 'int' as const
   static override timestamps = false
-  static override fillable = ['uuid', 'type', 'request_id', 'content', 'tags', 'created_at']
+  static override fillable = ['uuid', 'type', 'request_id', 'origin_type', 'origin_id', 'content', 'tags', 'created_at']
   static override casts: Record<string, 'int' | 'float' | 'boolean' | 'string' | 'json' | 'date' | 'datetime' | 'array'> = {
     id: 'int',
     created_at: 'int',

package/src/storage/HeartbeatStore.ts

@@ -38,6 +38,8 @@ export class HeartbeatStore {
       uuid: crypto.randomUUID(),
       type: entry.type,
       request_id: entry.requestId,
+      origin_type: entry.originType ?? 'standalone',
+      origin_id: entry.originId ?? null,
       content: JSON.stringify(entry.content),
       tags: JSON.stringify(entry.tags ?? []),
       created_at: entry.createdAt,
@@ -58,8 +60,10 @@ export class HeartbeatStore {
     limit?: number | undefined
     offset?: number | undefined
     requestId?: string | undefined
+    originType?: string | undefined
+    originId?: string | undefined
   } = {}): Promise<HeartbeatEntry[]> {
-    const { type, limit = 50, offset = 0, requestId } = options
+    const { type, limit = 50, offset = 0, requestId, originType, originId } = options
 
     let query = EntryModel.query<EntryModel>()
 
@@ -69,6 +73,12 @@ export class HeartbeatStore {
     if (requestId) {
       query = query.where('request_id', requestId)
     }
+    if (originType) {
+      query = query.where('origin_type', originType)
+    }
+    if (originId) {
+      query = query.where('origin_id', originId)
+    }
 
     const results = await query
       .orderBy('created_at', 'desc')
@@ -97,6 +107,169 @@ export class HeartbeatStore {
     return EntryModel.count<EntryModel>()
   }
 
+  /**
+   * Search entries with full-text query, type/origin filters, and pagination.
+   */
+  async searchEntries(options: {
+    type?: EntryType
+    query?: string
+    method?: string
+    statusMin?: number
+    statusMax?: number
+    since?: number
+    until?: number
+    originType?: string
+    limit?: number
+    offset?: number
+  } = {}): Promise<{ entries: HeartbeatEntry[]; total: number }> {
+    const { type, query: q, method, statusMin, statusMax, since, until, originType, limit = 50, offset = 0 } = options
+
+    let baseQuery = this.connection.table('heartbeat_entries')
+
+    if (type) baseQuery = baseQuery.where('type', type)
+    if (originType) baseQuery = baseQuery.where('origin_type', originType)
+    if (since) baseQuery = baseQuery.where('created_at', '>=', since)
+    if (until) baseQuery = baseQuery.where('created_at', '<=', until)
+    if (q) baseQuery = baseQuery.where('content', 'LIKE', `%${q}%`)
+    if (method) baseQuery = baseQuery.where('content', 'LIKE', `%"method":"${method}"%`)
+    if (statusMin !== undefined) baseQuery = baseQuery.where('content', 'LIKE', `%"status":${statusMin}%`)
+    if (statusMax !== undefined) baseQuery = baseQuery.where('content', 'LIKE', `%"status":${statusMax}%`)
+
+    const countResult = await baseQuery.count()
+    const total = typeof countResult === 'number' ? countResult : 0
+
+    // Rebuild query for results (count may consume the builder)
+    let resultsQuery = this.connection.table('heartbeat_entries')
+    if (type) resultsQuery = resultsQuery.where('type', type)
+    if (originType) resultsQuery = resultsQuery.where('origin_type', originType)
+    if (since) resultsQuery = resultsQuery.where('created_at', '>=', since)
+    if (until) resultsQuery = resultsQuery.where('created_at', '<=', until)
+    if (q) resultsQuery = resultsQuery.where('content', 'LIKE', `%${q}%`)
+    if (method) resultsQuery = resultsQuery.where('content', 'LIKE', `%"method":"${method}"%`)
+    if (statusMin !== undefined) resultsQuery = resultsQuery.where('content', 'LIKE', `%"status":${statusMin}%`)
+    if (statusMax !== undefined) resultsQuery = resultsQuery.where('content', 'LIKE', `%"status":${statusMax}%`)
+
+    const rows = await resultsQuery
+      .orderBy('created_at', 'desc')
+      .limit(limit)
+      .offset(offset)
+      .get()
+
+    return { entries: rows as unknown as HeartbeatEntry[], total }
+  }
+
+  /**
+   * Get time-bucketed entry counts for sparkline/histogram charts.
+   * Returns an array of `count` buckets going back from now.
+   */
+  async getTimeBuckets(type: EntryType, bucketMs: number, count: number): Promise<number[]> {
+    const now = Date.now()
+    const since = now - bucketMs * count
+    const rows = await this.connection.table('heartbeat_entries')
+      .where('type', type)
+      .where('created_at', '>=', since)
+      .select('created_at')
+      .get()
+
+    const buckets = new Array<number>(count).fill(0)
+    for (const row of rows) {
+      const ts = row.created_at as number
+      const idx = Math.floor((ts - since) / bucketMs)
+      if (idx >= 0 && idx < count) {
+        buckets[idx]!++
+      }
+    }
+
+    return buckets
+  }
+
+  /**
+   * Get the slowest endpoints ranked by average duration.
+   */
+  async getTopSlowEndpoints(limit: number, since: number): Promise<Array<{ path: string; avg_duration: number; max_duration: number; count: number }>> {
+    const rows = await this.connection.table('heartbeat_entries')
+      .where('type', 'request')
+      .where('created_at', '>=', since)
+      .select('content')
+      .get()
+
+    const map = new Map<string, { total: number; max: number; count: number }>()
+    for (const row of rows) {
+      try {
+        const content = typeof row.content === 'string' ? JSON.parse(row.content) : row.content
+        const path = content.path as string
+        const duration = content.duration as number
+        if (!path || typeof duration !== 'number') continue
+
+        const existing = map.get(path)
+        if (existing) {
+          existing.total += duration
+          existing.max = Math.max(existing.max, duration)
+          existing.count++
+        } else {
+          map.set(path, { total: duration, max: duration, count: 1 })
+        }
+      } catch { /* skip malformed content */ }
+    }
+
+    return Array.from(map.entries())
+      .map(([path, stats]) => ({
+        path,
+        avg_duration: stats.total / stats.count,
+        max_duration: stats.max,
+        count: stats.count,
+      }))
+      .sort((a, b) => b.avg_duration - a.avg_duration)
+      .slice(0, limit)
+  }
+
+  /**
+   * Get the most frequently executed queries ranked by count.
+   */
+  async getTopFrequentQueries(limit: number, since: number): Promise<Array<{ sql: string; count: number; avg_duration: number }>> {
+    const rows = await this.connection.table('heartbeat_entries')
+      .where('type', 'query')
+      .where('created_at', '>=', since)
+      .select('content')
+      .get()
+
+    const map = new Map<string, { total: number; count: number }>()
+    for (const row of rows) {
+      try {
+        const content = typeof row.content === 'string' ? JSON.parse(row.content) : row.content
+        const sql = (content.normalized_sql ?? content.sql) as string
+        const duration = content.duration as number
+        if (!sql) continue
+
+        const existing = map.get(sql)
+        if (existing) {
+          existing.total += typeof duration === 'number' ? duration : 0
+          existing.count++
+        } else {
+          map.set(sql, { total: typeof duration === 'number' ? duration : 0, count: 1 })
+        }
+      } catch { /* skip malformed content */ }
+    }
+
+    return Array.from(map.entries())
+      .map(([sql, stats]) => ({
+        sql,
+        count: stats.count,
+        avg_duration: stats.count > 0 ? stats.total / stats.count : 0,
+      }))
+      .sort((a, b) => b.count - a.count)
+      .slice(0, limit)
+  }
+
+  /**
+   * Unresolve an exception group by clearing its resolved_at timestamp.
+   */
+  async unresolveExceptionGroup(fingerprint: string): Promise<void> {
+    await this.connection.table('heartbeat_exception_groups')
+      .where('fingerprint', fingerprint)
+      .update({ resolved_at: null })
+  }
+
   // ── Span Operations ─────────────────────────────────────────────────────
 
   async insertSpan(span: {

package/src/testing/HeartbeatFake.ts

@@ -15,6 +15,8 @@ export class HeartbeatFake {
       content,
       tags,
       requestId: null,
+      originType: 'standalone',
+      originId: null,
       createdAt: Date.now(),
     })
   }
@@ -29,6 +31,10 @@ export class HeartbeatFake {
     return this.entries.filter((e) => e.type === type)
   }
 
+  forOrigin(originType: string, originId: string): Array<{ type: string; content: Record<string, any>; tags?: string[] | undefined }> {
+    return this.entries.filter((e) => e.originType === originType && e.originId === originId)
+  }
+
   hasRecorded(type: EntryType, match?: string | RegExp): boolean {
     const filtered = this.forType(type)
     if (!match) return filtered.length > 0

package/src/tracing/Tracer.ts

@@ -1,11 +1,13 @@
 import { AsyncLocalStorage } from 'node:async_hooks'
 import { Span } from './Span.ts'
 import { generateTraceId, generateSpanId, parseTraceparent } from './TraceContext.ts'
+import type { OriginType } from '../contracts/Entry.ts'
 import type { HeartbeatStore } from '../storage/HeartbeatStore.ts'
 
 interface TraceState {
   traceId: string
   requestId: string
+  originType: OriginType
   spanStack: Span[]
 }
 
@@ -39,6 +41,7 @@ export class Tracer {
     this.ctx.enterWith({
       traceId,
       requestId,
+      originType: 'request',
       spanStack: [],
     })
   }
@@ -51,6 +54,35 @@ export class Tracer {
     this.ctx = new AsyncLocalStorage<TraceState>()
   }
 
+  /**
+   * Start a new command trace context.
+   * Should be called at the beginning of each CLI command execution.
+   */
+  startCommand(commandId: string): void {
+    const traceId = generateTraceId()
+
+    this.ctx.enterWith({
+      traceId,
+      requestId: commandId,
+      originType: 'command',
+      spanStack: [],
+    })
+  }
+
+  /**
+   * End the current command trace context.
+   */
+  endCommand(): void {
+    this.endRequest()
+  }
+
+  /**
+   * Get the current origin type, if inside a trace context.
+   */
+  currentOriginType(): OriginType | null {
+    return this.ctx.getStore()?.originType ?? null
+  }
+
   /**
    * Execute a callback within a new span.
    * Automatically sets parent-child relationships from the span stack.

package/src/watchers/CommandWatcher.ts

@@ -0,0 +1,23 @@
+import { Watcher } from '../contracts/Watcher.ts'
+import type { CommandEntryContent } from '../contracts/Entry.ts'
+
+/**
+ * Records CLI command executions for the Heartbeat dashboard.
+ *
+ * Captures: command name, arguments, options, exit code, duration, and output.
+ *
+ * Integration: HeartbeatServiceProvider hooks into the command kernel
+ * to feed executed commands to this watcher.
+ */
+export class CommandWatcher extends Watcher {
+  override register(): void {
+    // CommandWatcher is driven by wrapping the command kernel.
+    // HeartbeatServiceProvider hooks into Command.run().
+  }
+
+  recordCommand(data: CommandEntryContent): void {
+    if (!this.isEnabled()) return
+
+    this.record('command', data, [data.exit_code === 0 ? 'success' : 'error'])
+  }
+}

package/src/watchers/EventWatcher.ts

@@ -10,6 +10,17 @@ export class EventWatcher extends Watcher {
   private static readonly INTERNAL_PREFIXES = [
     'RecordHeartbeatEntries',
     'HeartbeatMetrics',
+    'QueryExecuted',
+    'TransactionBeginning',
+    'TransactionCommitted',
+    'TransactionRolledBack',
+    'MigrationStarted',
+    'MigrationEnded',
+    'RouteMatched',
+    'CacheHit',
+    'CacheMissed',
+    'KeyWritten',
+    'KeyForgotten',
   ]
 
   override register(_on: (eventClass: any, handler: (event: any) => void) => void, onAny: (handler: (event: any) => void) => void): void {
@@ -31,6 +42,8 @@ export class EventWatcher extends Watcher {
     const content: EventEntryContent = {
       event_class: eventClass,
       listeners_count: 0, // populated by the dispatcher if available
+      payload: null,
+      listeners: [],
     }
 
     this.record('event', content, [eventClass])

package/src/watchers/ScheduleWatcher.ts

@@ -25,6 +25,7 @@ export class ScheduleWatcher extends Watcher {
       expression: data.expression,
       duration: data.duration,
       status: data.status,
+      output: null,
     }
 
     const tags: string[] = [data.status]

package/src/widget/DebugWidget.ts

@@ -1,6 +1,6 @@
 /**
  * Floating debug widget — injected into HTML responses when APP_DEBUG=true.
- * Compact pill with mantiq branding, expands to stats panel on click.
+ * Monospace neon emerald pill with Apple-like raised panel.
  */
 
 export function renderWidget(data: {
@@ -13,38 +13,65 @@ export function renderWidget(data: {
   const { duration, memory, status, queries, dashboardPath } = data
   const memMB = (memory / 1024 / 1024).toFixed(1)
   const durationMs = duration.toFixed(0)
-  const statusColor = status >= 500 ? '#f87171' : status >= 400 ? '#fbbf24' : '#34d399'
+  const statusColor = status >= 500 ? '#fb7185' : status >= 400 ? '#fbbf24' : '#34d399'
 
   return `<!-- mantiq:heartbeat-widget -->
 <style>
-#__mw{position:fixed;bottom:16px;right:16px;z-index:99999;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;font-size:12px}
-#__mw_pill{display:flex;align-items:center;gap:6px;background:#0a0a0b;border:1px solid #27272a;border-radius:100px;padding:7px 14px 7px 10px;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.5);color:#71717a;transition:border-color .2s;user-select:none}
-#__mw_pill:hover{border-color:#34d399}
-#__mw_logo{display:flex;align-items:center;border-right:1px solid #27272a;padding-right:8px;margin-right:2px}
-#__mw_logo span{width:7px;height:7px;border-radius:50%;background:#34d399}
-#__mw_stats{display:flex;align-items:center;gap:6px}
-#__mw_stats b{color:#fafafa;font-weight:600}
+@keyframes mw-fade{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
+@keyframes mw-glow{0%,100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}50%{box-shadow:0 0 12px 2px rgba(52,211,153,.15)}}
+#__mw{position:fixed;bottom:20px;right:20px;z-index:99999;font-family:'SF Mono',ui-monospace,'Cascadia Mono','JetBrains Mono',Menlo,monospace;font-size:11px}
+#__mw_pill{
+  display:flex;align-items:center;gap:8px;
+  background:#0b0f0d;border:1px solid #1a2e25;border-radius:100px;
+  padding:8px 16px 8px 12px;cursor:pointer;color:#6ee7b7;
+  transition:all .25s cubic-bezier(.4,0,.2,1);user-select:none;
+  animation:mw-fade .3s ease-out,mw-glow 3s ease-in-out infinite;
+  backdrop-filter:blur(12px);
+}
+#__mw_pill:hover{border-color:#34d399;background:#0e1412}
+#__mw_logo{display:flex;align-items:center;border-right:1px solid #1a2e25;padding-right:10px;margin-right:2px}
+#__mw_logo span{width:6px;height:6px;border-radius:50%;background:#34d399;box-shadow:0 0 8px #34d399}
+#__mw_stats{display:flex;align-items:center;gap:8px;font-weight:600}
+#__mw_stats b{color:#f0fdf4;font-weight:700}
 #__mw_dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
-#__mw_sep{color:#27272a}
-#__mw_panel{display:none;position:absolute;bottom:calc(100% + 10px);right:0;background:#0a0a0b;border:1px solid #27272a;border-radius:12px;min-width:280px;box-shadow:0 12px 32px rgba(0,0,0,.6);overflow:hidden}
-#__mw_panel header{padding:14px 16px;border-bottom:1px solid #1e1e1e;display:flex;align-items:center;justify-content:space-between}
-#__mw_panel header .brand{display:flex;align-items:center;gap:6px;color:#fafafa;font-weight:700;font-size:12px;letter-spacing:-.01em}
-#__mw_panel header .brand i{width:6px;height:6px;border-radius:50%;background:#34d399}
+#__mw_sep{color:#1a2e25;font-weight:400}
+#__mw_panel{
+  display:none;position:absolute;bottom:calc(100% + 12px);right:0;
+  background:#0b0f0d;border:1px solid #1a2e25;border-radius:16px;
+  min-width:300px;overflow:hidden;
+  animation:mw-fade .2s ease-out;
+  backdrop-filter:blur(16px);
+}
+#__mw_panel header{
+  padding:16px 18px;border-bottom:1px solid #1a2e25;
+  display:flex;align-items:center;justify-content:space-between;
+}
+#__mw_panel header .brand{
+  display:flex;align-items:center;gap:8px;color:#f0fdf4;font-weight:700;
+  font-size:12px;letter-spacing:-.01em;
+}
+#__mw_panel header .brand i{width:6px;height:6px;border-radius:50%;background:#34d399;box-shadow:0 0 6px #34d399}
 #__mw_grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
-#__mw_grid .cell{padding:14px 16px;border-bottom:1px solid #1e1e1e}
-#__mw_grid .cell:nth-child(odd){border-right:1px solid #1e1e1e}
-#__mw_grid .cell label{display:block;color:#52525b;font-size:10px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
-#__mw_grid .cell .val{color:#fafafa;font-weight:700;font-size:18px;letter-spacing:-.02em}
-#__mw_grid .cell .val small{color:#52525b;font-size:11px;font-weight:400;margin-left:1px}
-#__mw_cta{padding:12px 16px}
-#__mw_cta a{display:flex;align-items:center;justify-content:center;gap:6px;color:#0a0a0b;background:#34d399;padding:8px;border-radius:8px;font-size:12px;font-weight:600;text-decoration:none;transition:background .15s}
-#__mw_cta a:hover{background:#10b981}
+#__mw_grid .cell{padding:16px 18px;border-bottom:1px solid #1a2e25;transition:background .15s}
+#__mw_grid .cell:hover{background:rgba(52,211,153,.05)}
+#__mw_grid .cell:nth-child(odd){border-right:1px solid #1a2e25}
+#__mw_grid .cell label{display:block;color:#3b5249;font-size:9px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px;font-weight:700}
+#__mw_grid .cell .val{color:#f0fdf4;font-weight:800;font-size:22px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
+#__mw_grid .cell .val small{color:#3b5249;font-size:10px;font-weight:500;margin-left:2px}
+#__mw_cta{padding:14px 18px}
+#__mw_cta a{
+  display:flex;align-items:center;justify-content:center;gap:6px;
+  color:#0b0f0d;background:#34d399;padding:10px;border-radius:12px;
+  font-size:11px;font-weight:700;text-decoration:none;letter-spacing:.01em;
+  transition:all .2s;border:1px solid transparent;
+}
+#__mw_cta a:hover{background:#6ee7b7;box-shadow:0 0 16px rgba(52,211,153,.3)}
 </style>
 <div id="__mw">
   <div id="__mw_pill" onclick="document.getElementById('__mw_panel').style.display=document.getElementById('__mw_panel').style.display==='none'?'block':'none'">
     <div id="__mw_logo"><span></span></div>
     <div id="__mw_stats">
-      <span id="__mw_dot" style="background:${statusColor}"></span>
+      <span id="__mw_dot" style="background:${statusColor};box-shadow:0 0 6px ${statusColor}"></span>
       <b>${durationMs}ms</b>
       <span id="__mw_sep">&middot;</span>
       <span>${memMB}MB</span>
@@ -54,7 +81,7 @@ export function renderWidget(data: {
   </div>
   <div id="__mw_panel">
     <header>
-      <div class="brand"><i></i>mantiq</div>
+      <div class="brand"><i></i>heartbeat</div>
     </header>
     <div id="__mw_grid">
       <div class="cell"><label>Duration</label><div class="val">${durationMs}<small>ms</small></div></div>
@@ -71,7 +98,6 @@ export function renderWidget(data: {
 (function(){
   document.addEventListener('keydown',function(e){if(e.key==='Escape')document.getElementById('__mw_panel').style.display='none'});
 
-  // Intercept fetch to read X-Heartbeat header and update widget
   var _fetch=window.fetch;
   window.fetch=function(){
     return _fetch.apply(this,arguments).then(function(res){
@@ -82,17 +108,14 @@ export function renderWidget(data: {
   };
 
   function updateWidget(header){
-    // Format: 15ms;1.6MB;200;0q
     var p=header.split(';');
     if(p.length<4)return;
     var dur=p[0],mem=p[1],status=parseInt(p[2]),queries=p[3];
-    var sc=status>=500?'#f87171':status>=400?'#fbbf24':'#34d399';
+    var sc=status>=500?'#fb7185':status>=400?'#fbbf24':'#34d399';
 
-    // Update pill
     var pill=document.getElementById('__mw_stats');
-    if(pill)pill.innerHTML='<span id="__mw_dot" style="width:5px;height:5px;border-radius:50%;background:'+sc+';flex-shrink:0"></span><b style="color:#fafafa;font-weight:600">'+dur+'</b><span id="__mw_sep" style="color:#27272a">&middot;</span><span>'+mem+'</span><span id="__mw_sep" style="color:#27272a">&middot;</span><span>'+queries+'</span>';
+    if(pill)pill.innerHTML='<span id="__mw_dot" style="width:5px;height:5px;border-radius:50%;background:'+sc+';box-shadow:0 0 6px '+sc+';flex-shrink:0"></span><b style="color:#f0fdf4;font-weight:700">'+dur+'</b><span id="__mw_sep" style="color:#1a2e25">&middot;</span><span>'+mem+'</span><span id="__mw_sep" style="color:#1a2e25">&middot;</span><span>'+queries+'</span>';
 
-    // Update panel grid
     var cells=document.querySelectorAll('#__mw_grid .cell .val');
     if(cells.length>=4){
       cells[0].innerHTML=dur.replace('ms','')+'<small>ms</small>';