qdadm 1.13.0 → 1.19.2

package/src/modules/debug/components/ObjectTree.vue

@@ -1,123 +0,0 @@
-<script setup lang="ts">
-/**
- * ObjectTree - VSCode-style collapsible object explorer
- *
- * Renders objects/arrays as a tree with collapsible nodes.
- * Primitive values are shown inline, objects/arrays are expandable.
- */
-import { ref, computed } from 'vue'
-
-type DataValue = Record<string, unknown> | unknown[] | string | number | boolean | null | undefined
-
-const props = withDefaults(defineProps<{
-  data?: DataValue
-  depth?: number
-  maxDepth?: number
-  name?: string | null
-  defaultExpanded?: boolean
-}>(), {
-  data: null,
-  depth: 0,
-  maxDepth: 10,
-  name: null,
-  defaultExpanded: false
-})
-
-const expanded = ref<boolean>(props.defaultExpanded && props.depth < 2)
-
-const isObject = computed<boolean>(() => props.data !== null && typeof props.data === 'object')
-const isArray = computed<boolean>(() => Array.isArray(props.data))
-const isEmpty = computed<boolean>(() => {
-  if (!isObject.value) return false
-  return isArray.value ? (props.data as unknown[]).length === 0 : Object.keys(props.data as object).length === 0
-})
-
-const keys = computed<string[]>(() => {
-  if (!isObject.value) return []
-  return Object.keys(props.data as object).slice(0, 100)
-})
-
-const preview = computed<string>(() => {
-  if (!isObject.value) return ''
-  if (isArray.value) {
-    return `Array(${(props.data as unknown[]).length})`
-  }
-  const dataObj = props.data as Record<string, unknown>
-  const keyCount = Object.keys(dataObj).length
-  const firstKeys = Object.keys(dataObj).slice(0, 3).join(', ')
-  return keyCount <= 3 ? `{${firstKeys}}` : `{${firstKeys}, ...}`
-})
-
-const valueClass = computed<string>(() => {
-  if (props.data === null) return 'obj-null'
-  if (props.data === undefined) return 'obj-undefined'
-  switch (typeof props.data) {
-    case 'string': return 'obj-string'
-    case 'number': return 'obj-number'
-    case 'boolean': return 'obj-boolean'
-    case 'function': return 'obj-function'
-    default: return ''
-  }
-})
-
-function formatValue(val: DataValue): string {
-  if (val === null) return 'null'
-  if (val === undefined) return 'undefined'
-  if (typeof val === 'string') {
-    const truncated = val.length > 100 ? val.slice(0, 100) + '...' : val
-    return `"${truncated}"`
-  }
-  if (typeof val === 'function') return 'ƒ()'
-  return String(val)
-}
-
-function toggleExpand(): void {
-  if (isObject.value && !isEmpty.value) {
-    expanded.value = !expanded.value
-  }
-}
-</script>
-
-<template>
-  <div class="obj-node" :style="{ paddingLeft: depth > 0 ? '12px' : '0' }">
-    <!-- Expandable object/array -->
-    <template v-if="isObject && !isEmpty">
-      <div class="obj-line" @click="toggleExpand">
-        <span class="obj-toggle" :class="{ 'obj-expanded': expanded }">▶</span>
-        <span v-if="name !== null" class="obj-key">{{ name }}:</span>
-        <span class="obj-preview">{{ preview }}</span>
-      </div>
-      <div v-if="expanded && depth < maxDepth" class="obj-children">
-        <ObjectTree
-          v-for="key in keys"
-          :key="key"
-          :data="data && typeof data === 'object' ? (data as any)[key] : undefined"
-          :name="key"
-          :depth="depth + 1"
-          :maxDepth="maxDepth"
-        />
-        <div v-if="data && typeof data === 'object' && Object.keys(data).length > 100" class="obj-truncated">
-          ... {{ Object.keys(data as object).length - 100 }} more
-        </div>
-      </div>
-      <div v-else-if="expanded" class="obj-max-depth">[Max depth]</div>
-    </template>
-
-    <!-- Empty object/array -->
-    <template v-else-if="isObject && isEmpty">
-      <div class="obj-line">
-        <span v-if="name !== null" class="obj-key">{{ name }}:</span>
-        <span class="obj-empty">{{ isArray ? '[]' : '{}' }}</span>
-      </div>
-    </template>
-
-    <!-- Primitive value -->
-    <template v-else>
-      <div class="obj-line">
-        <span v-if="name !== null" class="obj-key">{{ name }}:</span>
-        <span :class="valueClass">{{ formatValue(data) }}</span>
-      </div>
-    </template>
-  </div>
-</template>
-

package/src/modules/debug/components/panels/EntriesPanel.vue

@@ -1,100 +0,0 @@
-<script setup lang="ts">
-/**
- * EntriesPanel - Default entries display (horizontal/vertical)
- */
-import { ref, type Ref } from 'vue'
-import ObjectTree from '../ObjectTree.vue'
-
-interface DebugEntry {
-  timestamp: number
-  _isNew?: boolean
-  name?: string
-  message?: string
-  [key: string]: unknown
-}
-
-type EntriesPanelMode = 'horizontal' | 'vertical'
-
-interface Props {
-  entries: DebugEntry[]
-  mode?: EntriesPanelMode
-  maxEntries?: number
-}
-
-withDefaults(defineProps<Props>(), {
-  mode: 'vertical',
-  maxEntries: 10
-})
-
-const copiedIdx: Ref<number | null> = ref(null)
-
-function formatTime(ts: number): string {
-  return new Date(ts).toLocaleTimeString('en-US', {
-    hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit'
-  })
-}
-
-function getEntryData(entry: DebugEntry): Record<string, unknown> {
-  const { timestamp: _, _isNew: __, ...rest } = entry
-  void _
-  void __
-  return rest
-}
-
-async function copyEntry(entry: DebugEntry, idx: number): Promise<void> {
-  try {
-    const data = getEntryData(entry)
-    await navigator.clipboard.writeText(JSON.stringify(data, null, 2))
-    copiedIdx.value = idx
-    setTimeout(() => { copiedIdx.value = null }, 1500)
-  } catch (e) {
-    console.error('Failed to copy:', e)
-  }
-}
-</script>
-
-<template>
-  <!-- Horizontal layout -->
-  <div v-if="mode === 'horizontal'" class="entries-h">
-    <div
-      v-for="(entry, idx) in entries.slice().reverse().slice(0, maxEntries)"
-      :key="idx"
-      class="entry-h"
-      :class="{ 'entry-new': entry._isNew }"
-    >
-      <div class="entry-meta">
-        <span v-if="entry._isNew" class="entry-new-dot" title="New (unseen)" />
-        <span class="entry-time">{{ formatTime(entry.timestamp) }}</span>
-        <span v-if="entry.name" class="entry-name">{{ entry.name }}</span>
-      </div>
-      <ObjectTree :data="getEntryData(entry)" :maxDepth="3" />
-    </div>
-  </div>
-
-  <!-- Vertical layout -->
-  <div v-else class="entries-v">
-    <div
-      v-for="(entry, idx) in entries.slice().reverse()"
-      :key="idx"
-      class="entry-v"
-      :class="{ 'entry-new': entry._isNew }"
-    >
-      <div class="entry-header">
-        <span v-if="entry._isNew" class="entry-new-dot" title="New (unseen)" />
-        <span class="entry-time">{{ formatTime(entry.timestamp) }}</span>
-        <span v-if="entry.name" class="entry-name">{{ entry.name }}</span>
-        <span v-if="entry.message" class="entry-message">{{ entry.message }}</span>
-        <button
-          class="entry-copy"
-          :class="{ 'entry-copied': copiedIdx === idx }"
-          @click="copyEntry(entry, idx)"
-          :title="copiedIdx === idx ? 'Copied!' : 'Copy to clipboard'"
-        >
-          <i :class="['pi', copiedIdx === idx ? 'pi-check' : 'pi-copy']" />
-        </button>
-      </div>
-      <ObjectTree :data="getEntryData(entry)" :maxDepth="6" />
-    </div>
-  </div>
-</template>
-

package/src/modules/debug/components/panels/SignalsPanel.vue

@@ -1,188 +0,0 @@
-<script setup lang="ts">
-/**
- * SignalsPanel - Debug panel for signals with pattern filter
- *
- * Supports QuarKernel wildcard patterns:
- * - auth:** → all auth signals (auth:login, auth:impersonate:start)
- * - cache:** → all cache signals
- * - *:created → all creation signals
- * - ** → all signals (default)
- */
-import { ref, computed, watch } from 'vue'
-import ObjectTree from '../ObjectTree.vue'
-
-interface SignalEntry {
-  name: string
-  timestamp: number
-  data?: Record<string, unknown>
-  _isNew?: boolean
-}
-
-interface SignalCollector {
-  // Collector interface - minimal typing for now
-  [key: string]: unknown
-}
-
-interface FilterPreset {
-  label: string
-  pattern: string
-}
-
-const props = defineProps<{
-  collector: SignalCollector
-  entries: SignalEntry[]
-}>()
-
-// Filter state - persisted in localStorage
-const STORAGE_KEY = 'qdadm-signals-filter'
-const STORAGE_KEY_MAX = 'qdadm-signals-max'
-const filterPattern = ref<string>(localStorage.getItem(STORAGE_KEY) || '')
-const maxSignals = ref<number>(parseInt(localStorage.getItem(STORAGE_KEY_MAX) || '50') || 50)
-
-watch(filterPattern, (val) => {
-  localStorage.setItem(STORAGE_KEY, val)
-})
-
-watch(maxSignals, (val) => {
-  localStorage.setItem(STORAGE_KEY_MAX, String(val))
-})
-
-// Convert wildcard pattern to regex
-function wildcardToRegex(pattern: string): RegExp | null {
-  if (!pattern || pattern === '**') return null // No filter
-
-  // Escape regex special chars except * and :
-  const regex = pattern
-    .replace(/[.+^${}()|[\]\\]/g, '\\$&')
-    // ** matches anything (including colons)
-    .replace(/\*\*/g, '.*')
-    // * matches anything except colon
-    .replace(/\*/g, '[^:]*')
-
-  return new RegExp(`^${regex}$`)
-}
-
-const filterRegex = computed<RegExp | null>(() => wildcardToRegex(filterPattern.value.trim()))
-
-// Apply filter, max limit, and reverse for top-down (newest first)
-const filteredEntries = computed<SignalEntry[]>(() => {
-  let result: SignalEntry[] = props.entries
-  if (filterRegex.value) {
-    result = result.filter((e: SignalEntry) => filterRegex.value!.test(e.name))
-  }
-  // Apply max limit (slice from end to keep newest)
-  if (maxSignals.value > 0 && result.length > maxSignals.value) {
-    result = result.slice(-maxSignals.value)
-  }
-  // Reverse for top-down display (newest first)
-  return [...result].reverse()
-})
-
-const filterStats = computed<string>(() => {
-  const total = props.entries.length
-  const shown = filteredEntries.value.length
-  return total !== shown ? `${shown}/${total}` : `${total}`
-})
-
-// Preset filters
-const presets: FilterPreset[] = [
-  { label: 'All', pattern: '' },
-  { label: 'data', pattern: 'entity:data-invalidate' },
-  { label: 'datalayer', pattern: 'entity:datalayer-invalidate' },
-  { label: 'auth', pattern: 'auth:**' },
-  { label: 'entity', pattern: 'entity:**' },
-  { label: 'toast', pattern: 'toast:**' }
-]
-
-function applyPreset(pattern: string): void {
-  filterPattern.value = pattern
-}
-
-function formatTime(ts: number): string {
-  const d = new Date(ts)
-  return d.toLocaleTimeString('en-US', { hour12: false }) + '.' + String(d.getMilliseconds()).padStart(3, '0')
-}
-
-// Extract domain from signal name (first segment)
-function getDomain(name: string): string {
-  return name.split(':')[0] ?? ''
-}
-
-const domainColors: Record<string, string> = {
-  auth: '#10b981',
-  cache: '#f59e0b',
-  entity: '#3b82f6',
-  toast: '#8b5cf6',
-  route: '#06b6d4',
-  error: '#ef4444'
-}
-
-function getDomainColor(name: string): string {
-  const domain = getDomain(name)
-  return domainColors[domain] || '#6b7280'
-}
-</script>
-
-<template>
-  <div class="signals-panel">
-    <!-- Filter bar -->
-    <div class="signals-filter">
-      <div class="signals-filter-input">
-        <i class="pi pi-filter" />
-        <input
-          v-model="filterPattern"
-          type="text"
-          placeholder="auth:** cache:** *:created"
-          class="filter-input"
-        />
-        <span class="signals-count">{{ filterStats }}</span>
-        <span class="signals-max-label">max</span>
-        <input
-          v-model.number="maxSignals"
-          type="number"
-          min="10"
-          max="500"
-          class="max-input"
-        />
-      </div>
-      <div class="signals-presets">
-        <button
-          v-for="p in presets"
-          :key="p.pattern"
-          class="debug-toolbar-btn"
-          :class="{ 'debug-toolbar-btn--active': filterPattern === p.pattern }"
-          @click="applyPreset(p.pattern)"
-        >
-          {{ p.label }}
-        </button>
-      </div>
-    </div>
-
-    <!-- Entries list -->
-    <div class="signals-list">
-      <div v-if="filteredEntries.length === 0" class="signals-empty">
-        <i class="pi pi-inbox" />
-        <span>{{ entries.length === 0 ? 'No signals' : 'No matching signals' }}</span>
-      </div>
-
-      <div
-        v-for="(entry, idx) in filteredEntries"
-        :key="idx"
-        class="signal-entry"
-        :class="{ 'signal-new': entry._isNew }"
-      >
-        <div class="signal-header">
-          <span v-if="entry._isNew" class="signal-new-dot" title="New (unseen)" />
-          <span class="signal-time">{{ formatTime(entry.timestamp) }}</span>
-          <span class="signal-name" :style="{ color: getDomainColor(entry.name) }">
-            {{ entry.name }}
-          </span>
-        </div>
-        <div v-if="entry.data && Object.keys(entry.data).length > 0" class="signal-data">
-          <ObjectTree :data="entry.data" :expanded="false" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-

package/src/modules/debug/components/panels/ToastsPanel.vue

@@ -1,45 +0,0 @@
-<script setup lang="ts">
-/**
- * ToastsPanel - Toasts collector display (vertical mode)
- */
-interface ToastEntry {
-  timestamp: number
-  severity: string
-  summary?: string
-  detail?: string
-  emitter?: string
-  _isNew?: boolean
-}
-
-interface Props {
-  entries: ToastEntry[]
-}
-
-defineProps<Props>()
-
-function formatTime(ts: number): string {
-  return new Date(ts).toLocaleTimeString('en-US', {
-    hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit'
-  })
-}
-</script>
-
-<template>
-  <div class="toasts-panel">
-    <div
-      v-for="(entry, idx) in entries.slice().reverse()"
-      :key="idx"
-      class="toast-entry"
-      :class="[`toast-${entry.severity}`, { 'entry-new': entry._isNew }]"
-    >
-      <div class="toast-header">
-        <span class="toast-time">{{ formatTime(entry.timestamp) }}</span>
-        <span class="toast-severity" :class="`toast-severity-${entry.severity}`">{{ entry.severity }}</span>
-        <span v-if="entry.summary" class="toast-summary">{{ entry.summary }}</span>
-        <span v-if="entry.emitter" class="toast-emitter">{{ entry.emitter }}</span>
-      </div>
-      <div v-if="entry.detail" class="toast-detail">{{ entry.detail }}</div>
-    </div>
-  </div>
-</template>
-