qdadm 0.30.0 → 0.31.0

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

@@ -0,0 +1,188 @@
+<script setup>
+/**
+ * EntriesPanel - Default entries display (horizontal/vertical)
+ */
+import { ref } from 'vue'
+import ObjectTree from '../ObjectTree.vue'
+
+defineProps({
+  entries: { type: Array, required: true },
+  mode: { type: String, default: 'vertical' }, // 'horizontal' or 'vertical'
+  maxEntries: { type: Number, default: 10 }
+})
+
+const copiedIdx = ref(null)
+
+function formatTime(ts) {
+  return new Date(ts).toLocaleTimeString('en-US', {
+    hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit'
+  })
+}
+
+function getEntryData(entry) {
+  const { timestamp, _isNew, ...rest } = entry
+  return rest
+}
+
+async function copyEntry(entry, idx) {
+  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 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 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>
+
+<style scoped>
+/* Horizontal entries (bottom mode) */
+.entries-h {
+  display: flex;
+  gap: 1px;
+  height: 100%;
+  overflow-x: auto;
+}
+.entry-h {
+  flex: 0 0 auto;
+  min-width: 200px;
+  max-width: 320px;
+  padding: 8px 12px;
+  border-right: 1px solid #3f3f46;
+  overflow: hidden;
+}
+.entry-h:last-child {
+  border-right: none;
+}
+.entry-h.entry-new {
+  border-left: 3px solid #8b5cf6;
+}
+
+/* Vertical entries (right/fullscreen mode) */
+.entries-v {
+  display: flex;
+  flex-direction: column;
+}
+.entry-v {
+  padding: 8px 12px;
+  border-bottom: 1px solid #27272a;
+}
+.entry-v:hover {
+  background: #1f1f23;
+}
+
+/* New entry indicator */
+.entry-new {
+  position: relative;
+  background: rgba(139, 92, 246, 0.08);
+}
+.entry-v.entry-new::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: #8b5cf6;
+}
+
+/* Entry parts */
+.entry-meta, .entry-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 4px;
+}
+.entry-time {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10px;
+  color: #71717a;
+  background: #27272a;
+  padding: 1px 4px;
+  border-radius: 2px;
+}
+.entry-name {
+  color: #a78bfa;
+  font-weight: 500;
+  font-size: 12px;
+}
+.entry-message {
+  color: #f87171;
+  font-size: 12px;
+}
+/* Copy button */
+.entry-copy {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 3px;
+  color: #71717a;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s, background 0.15s, color 0.15s;
+}
+.entry-v:hover .entry-copy {
+  opacity: 1;
+}
+.entry-copy:hover {
+  background: #3f3f46;
+  color: #d4d4d8;
+}
+.entry-copied {
+  opacity: 1;
+  color: #22c55e;
+}
+.entry-copy .pi {
+  font-size: 12px;
+}
+</style>

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

@@ -0,0 +1,112 @@
+<script setup>
+/**
+ * ToastsPanel - Toasts collector display (vertical mode)
+ */
+defineProps({
+  entries: { type: Array, required: true }
+})
+
+function formatTime(ts) {
+  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>
+
+<style scoped>
+.toasts-panel {
+  display: flex;
+  flex-direction: column;
+}
+.toast-entry {
+  padding: 8px 12px;
+  border-bottom: 1px solid #27272a;
+  border-left: 3px solid;
+}
+.toast-entry:hover {
+  background: #1f1f23;
+}
+.toast-success { border-left-color: #22c55e; }
+.toast-info { border-left-color: #3b82f6; }
+.toast-warn { border-left-color: #f59e0b; }
+.toast-error { border-left-color: #ef4444; }
+
+.toast-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 4px;
+}
+.toast-time {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10px;
+  color: #71717a;
+  background: #27272a;
+  padding: 1px 4px;
+  border-radius: 2px;
+}
+.toast-severity {
+  padding: 1px 6px;
+  border-radius: 3px;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+.toast-severity-success { background: #22c55e; color: white; }
+.toast-severity-info { background: #3b82f6; color: white; }
+.toast-severity-warn { background: #f59e0b; color: white; }
+.toast-severity-error { background: #ef4444; color: white; }
+
+.toast-summary {
+  font-weight: 500;
+  color: #f4f4f5;
+}
+.toast-detail {
+  color: #a1a1aa;
+  font-size: 11px;
+  margin-top: 4px;
+}
+.toast-emitter {
+  margin-left: auto;
+  padding: 1px 6px;
+  background: #3f3f46;
+  border-radius: 3px;
+  font-size: 10px;
+  color: #a1a1aa;
+  font-family: 'JetBrains Mono', monospace;
+}
+
+/* New entry indicator */
+.entry-new {
+  position: relative;
+  background: rgba(139, 92, 246, 0.08);
+}
+.entry-new::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: #8b5cf6;
+}
+</style>

package/src/debug/components/panels/ZonesPanel.vue

@@ -0,0 +1,232 @@
+<script setup>
+/**
+ * ZonesPanel - Zones collector display
+ */
+const props = defineProps({
+  collector: { type: Object, required: true },
+  entries: { type: Array, required: true }
+})
+
+const emit = defineEmits(['update'])
+
+function toggleFilter() {
+  if (props.collector.toggleFilter) {
+    props.collector.toggleFilter()
+    emit('update')
+  }
+}
+
+function isFilterActive() {
+  return props.collector.showCurrentPageOnly ?? true
+}
+
+function toggleInternalFilter() {
+  if (props.collector.toggleInternalFilter) {
+    props.collector.toggleInternalFilter()
+    emit('update')
+  }
+}
+
+function showInternalZones() {
+  return props.collector.showInternalZones ?? false
+}
+
+function highlightZone(zoneName) {
+  if (props.collector.toggleHighlight) {
+    props.collector.toggleHighlight(zoneName)
+    emit('update')
+  }
+}
+
+function isHighlighted(zoneName) {
+  return props.collector.getHighlightedZone?.() === zoneName
+}
+</script>
+
+<template>
+  <div class="zones-panel">
+    <div class="zones-toolbar">
+      <button
+        class="zones-toggle"
+        :class="{ 'zones-toggle-on': !isFilterActive() }"
+        :title="isFilterActive() ? 'Click to show all zones' : 'Click to show current page only'"
+        @click="toggleFilter"
+      >
+        <i :class="['pi', isFilterActive() ? 'pi-filter-slash' : 'pi-filter']" />
+        All Pages
+      </button>
+      <button
+        class="zones-toggle"
+        :class="{ 'zones-toggle-internal': showInternalZones() }"
+        :title="showInternalZones() ? 'Click to hide internal zones' : 'Click to show internal zones (prefixed with _)'"
+        @click="toggleInternalFilter"
+      >
+        <i :class="['pi', showInternalZones() ? 'pi-lock-open' : 'pi-lock']" />
+        Internal
+      </button>
+    </div>
+    <div v-if="entries.length === 0" class="zones-empty">
+      <i class="pi pi-inbox" />
+      <span>No zones</span>
+    </div>
+    <div v-for="zone in entries" :key="zone.name" class="zone-item">
+      <div class="zone-header">
+        <button
+          class="zone-highlight"
+          :class="{ 'zone-highlight-active': isHighlighted(zone.name) }"
+          :title="isHighlighted(zone.name) ? 'Hide highlight' : 'Highlight zone'"
+          @click="highlightZone(zone.name)"
+        >
+          <i class="pi pi-eye" />
+        </button>
+        <span class="zone-name">{{ zone.name }}</span>
+        <span class="zone-count">{{ zone.blocksCount }} block(s)</span>
+      </div>
+      <div v-if="zone.blocks.length > 0" class="zone-blocks">
+        <div v-for="block in zone.blocks" :key="block.id" class="zone-block">
+          <span class="block-id">{{ block.id }}</span>
+          <span class="block-component">{{ block.component }}</span>
+          <span class="block-weight">w:{{ block.weight }}</span>
+          <span v-if="block.hasWrappers" class="block-wrappers">
+            <i class="pi pi-sitemap" :title="`${block.wrappersCount} wrapper(s)`" />
+          </span>
+        </div>
+      </div>
+      <div v-else-if="zone.hasDefault" class="zone-default">
+        Default: {{ zone.defaultName || '(component)' }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.zones-panel {
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.zones-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+.zones-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 32px;
+  color: #71717a;
+  font-size: 12px;
+}
+.zones-empty i {
+  font-size: 24px;
+}
+.zones-toggle {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  background: #3f3f46;
+  border: none;
+  border-radius: 4px;
+  color: #a1a1aa;
+  cursor: pointer;
+  font-size: 11px;
+}
+.zones-toggle:hover {
+  background: #52525b;
+  color: #f4f4f5;
+}
+.zones-toggle-on {
+  background: #06b6d4;
+  color: white;
+}
+.zones-toggle-on:hover {
+  background: #0891b2;
+}
+.zones-toggle-internal {
+  background: #f59e0b;
+  color: white;
+}
+.zones-toggle-internal:hover {
+  background: #d97706;
+}
+.zone-item {
+  background: #27272a;
+  border-radius: 4px;
+  padding: 8px;
+}
+.zone-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+.zone-highlight {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  background: #3f3f46;
+  border: none;
+  border-radius: 4px;
+  color: #71717a;
+  cursor: pointer;
+}
+.zone-highlight:hover {
+  background: #52525b;
+  color: #06b6d4;
+}
+.zone-highlight-active {
+  background: #06b6d4;
+  color: white;
+}
+.zone-name {
+  font-weight: 600;
+  color: #06b6d4;
+}
+.zone-count {
+  color: #71717a;
+  font-size: 11px;
+}
+.zone-blocks {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-left: 30px;
+}
+.zone-block {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 11px;
+  padding: 2px 6px;
+  background: #1f1f23;
+  border-radius: 2px;
+}
+.block-id {
+  color: #a78bfa;
+  font-weight: 500;
+}
+.block-component {
+  color: #d4d4d8;
+}
+.block-weight {
+  color: #71717a;
+  font-size: 10px;
+}
+.block-wrappers {
+  color: #f59e0b;
+}
+.zone-default {
+  color: #71717a;
+  font-size: 11px;
+  margin-left: 30px;
+}
+</style>

package/src/debug/components/panels/index.js

@@ -0,0 +1,8 @@
+/**
+ * Debug Panel Components
+ */
+export { default as ZonesPanel } from './ZonesPanel.vue'
+export { default as AuthPanel } from './AuthPanel.vue'
+export { default as EntitiesPanel } from './EntitiesPanel.vue'
+export { default as ToastsPanel } from './ToastsPanel.vue'
+export { default as EntriesPanel } from './EntriesPanel.vue'

package/src/debug/index.js

@@ -0,0 +1,31 @@
+/**
+ * Debug Module Exports
+ *
+ * Provides base classes and utilities for debug collectors
+ * used by the debug panel UI.
+ */
+
+export { Collector } from './Collector.js'
+export { SignalCollector } from './SignalCollector.js'
+export { DebugBridge, createDebugBridge } from './DebugBridge.js'
+export { ErrorCollector } from './ErrorCollector.js'
+export { ToastCollector } from './ToastCollector.js'
+export { ZonesCollector } from './ZonesCollector.js'
+export { AuthCollector } from './AuthCollector.js'
+export { EntitiesCollector } from './EntitiesCollector.js'
+export { LocalStorageAdapter, createLocalStorageAdapter } from './LocalStorageAdapter.js'
+
+// Module System v2 integration
+export { DebugModule, DEBUG_BRIDGE_KEY, DEBUG_ZONE, QdadmDebugBar } from './DebugModule.js'
+
+// Components
+export { DebugBar } from './components/index.js'
+
+// Convenience export for Kernel debugBar option
+// Usage: import { debugBar } from '@qdadm/core/debug'
+//        new Kernel({ debugBar })
+import { DebugModule as _DebugModule, QdadmDebugBar as _QdadmDebugBar } from './DebugModule.js'
+export const debugBar = {
+  module: _DebugModule,
+  component: _QdadmDebugBar
+}