qdadm 0.31.0 → 0.32.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qdadm",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "description": "Vue 3 framework for admin dashboards with PrimeVue",
   "author": "quazardous",
   "license": "MIT",

package/src/composables/useAuth.js

@@ -8,7 +8,7 @@
  * For route guards or services, use authAdapter directly.
  *
  * Reactivity:
- * - Listens to auth:login, auth:logout, auth:impersonate signals
+ * - Listens to auth:login, auth:logout, auth:impersonate, auth:impersonate:stop signals
  * - User computed re-evaluates when these signals fire
  * - No polling or manual refresh needed
  *
@@ -54,6 +54,7 @@ export function useAuth() {
     cleanups.push(signals.on('auth:login', () => { authTick.value++ }))
     cleanups.push(signals.on('auth:logout', () => { authTick.value++ }))
     cleanups.push(signals.on('auth:impersonate', () => { authTick.value++ }))
+    cleanups.push(signals.on('auth:impersonate:stop', () => { authTick.value++ }))
   }
 
   // Cleanup signal subscriptions on unmount

package/src/debug/AuthCollector.js

@@ -39,8 +39,11 @@ export class AuthCollector extends Collector {
     this._ctx = null
     this._signalCleanups = []
     // Activity tracking for login/logout events
-    this._hasActivity = false
-    this._lastEvent = null // 'login' | 'logout' | null
+    // Keep recent events to show stacked (last N events)
+    this._recentEvents = [] // Array of { type: 'login'|'logout', timestamp: Date, seen: boolean }
+    this._maxEvents = 5
+    this._eventTtl = options.eventTtl ?? 60000 // Events expire after 60s by default
+    this._expiryTimer = null
   }
 
   /**
@@ -70,19 +73,81 @@ export class AuthCollector extends Collector {
     }
 
     // Listen to auth events and track activity
-    const loginCleanup = signals.on('auth:login', () => {
-      this._hasActivity = true
-      this._lastEvent = 'login'
-      this.notifyChange()
+    const loginCleanup = signals.on('auth:login', (event) => {
+      // QuarKernel wraps payload in KernelEvent - extract data from event.data
+      const data = event?.data || event
+      const user = data?.user || this._authAdapter?.getUser?.()
+      this._addEvent('login', { user })
     })
     this._signalCleanups.push(loginCleanup)
 
     const logoutCleanup = signals.on('auth:logout', () => {
-      this._hasActivity = true
-      this._lastEvent = 'logout'
-      this.notifyChange()
+      this._addEvent('logout')
     })
     this._signalCleanups.push(logoutCleanup)
+
+    const impersonateCleanup = signals.on('auth:impersonate', (payload) => {
+      this._addEvent('impersonate', payload)
+    })
+    this._signalCleanups.push(impersonateCleanup)
+
+    const impersonateStopCleanup = signals.on('auth:impersonate:stop', (payload) => {
+      this._addEvent('impersonate-stop', payload)
+    })
+    this._signalCleanups.push(impersonateStopCleanup)
+  }
+
+  /**
+   * Add an auth event to the recent events list
+   * @param {string} type - 'login' | 'logout' | 'impersonate' | 'impersonate-stop'
+   * @param {object} [data] - Optional event data (e.g., { user } for impersonate)
+   * @private
+   */
+  _addEvent(type, data = null) {
+    this._recentEvents.unshift({
+      type,
+      timestamp: new Date(),
+      id: Date.now(), // Unique ID for Vue key
+      seen: false,
+      data
+    })
+    // Keep only last N events
+    if (this._recentEvents.length > this._maxEvents) {
+      this._recentEvents.pop()
+    }
+    this._scheduleExpiry()
+    this.notifyChange()
+  }
+
+  /**
+   * Schedule event expiry check
+   * @private
+   */
+  _scheduleExpiry() {
+    if (this._expiryTimer) return // Already scheduled
+    this._expiryTimer = setTimeout(() => {
+      this._expireOldEvents()
+    }, this._eventTtl)
+  }
+
+  /**
+   * Remove expired events
+   * @private
+   */
+  _expireOldEvents() {
+    this._expiryTimer = null
+    const now = Date.now()
+    const before = this._recentEvents.length
+    this._recentEvents = this._recentEvents.filter(
+      e => (now - e.timestamp.getTime()) < this._eventTtl
+    )
+    if (this._recentEvents.length < before) {
+      this.notifyChange()
+    }
+    // Reschedule if still have events
+    if (this._recentEvents.length > 0) {
+      this._scheduleExpiry()
+    }
   }
 
   /**
@@ -90,6 +155,10 @@ export class AuthCollector extends Collector {
    * @protected
    */
   _doUninstall() {
+    if (this._expiryTimer) {
+      clearTimeout(this._expiryTimer)
+      this._expiryTimer = null
+    }
     for (const cleanup of this._signalCleanups) {
       if (typeof cleanup === 'function') cleanup()
     }
@@ -99,11 +168,11 @@ export class AuthCollector extends Collector {
   }
 
   /**
-   * Get badge - show 1 if there's unseen auth activity
-   * @returns {number} 1 if activity unseen, 0 otherwise
+   * Get badge - show count of unseen auth events
+   * @returns {number} Number of unseen events
    */
   getBadge() {
-    return this._hasActivity ? 1 : 0
+    return this._recentEvents.filter(e => !e.seen).length
   }
 
   /**
@@ -111,24 +180,41 @@ export class AuthCollector extends Collector {
    * @returns {boolean}
    */
   hasActivity() {
-    return this._hasActivity
+    return this._recentEvents.some(e => !e.seen)
   }
 
   /**
-   * Get the last auth event type
+   * Get all recent auth events (newest first)
+   * @returns {Array<{type: string, timestamp: Date, id: number, seen: boolean}>}
+   */
+  getRecentEvents() {
+    return this._recentEvents
+  }
+
+  /**
+   * Get the last auth event type (for backward compatibility)
    * @returns {string|null} 'login' | 'logout' | null
    */
   getLastEvent() {
-    return this._lastEvent
+    return this._recentEvents[0]?.type || null
   }
 
   /**
-   * Mark activity as seen (clear activity state)
+   * Mark all events as seen (badge resets but events stay visible)
    * Note: Does not call notifyChange() to avoid re-render loop
    */
   markSeen() {
-    this._hasActivity = false
-    this._lastEvent = null
+    for (const event of this._recentEvents) {
+      event.seen = true
+    }
+  }
+
+  /**
+   * Clear all events (for explicit dismissal)
+   */
+  clearEvents() {
+    this._recentEvents = []
+    this.notifyChange()
   }
 
   /**

package/src/debug/EntitiesCollector.js

@@ -219,10 +219,11 @@ export class EntitiesCollector extends Collector {
       idField: manager.idField,
 
       // Storage info
+      // Prefer instance capabilities (may include requiresAuth) over static ones
       storage: {
         type: storage?.constructor?.name || 'None',
         endpoint: storage?.endpoint || storage?._endpoint || null,
-        capabilities: storage?.constructor?.capabilities || {}
+        capabilities: storage?.capabilities || storage?.constructor?.capabilities || {}
       },
 
       // Cache info
@@ -373,4 +374,30 @@ export class EntitiesCollector extends Collector {
   markEntitySeen(entityName) {
     this._activeEntities.delete(entityName)
   }
+
+  /**
+   * Test fetch data from a specific entity
+   * Used to test auth protection - will throw 401 if not authenticated
+   * @param {string} entityName - Entity name
+   * @returns {Promise<{success: boolean, count?: number, error?: string, status?: number}>}
+   */
+  async testFetch(entityName) {
+    if (!this._orchestrator) {
+      return { success: false, error: 'No orchestrator' }
+    }
+    try {
+      const manager = this._orchestrator.get(entityName)
+      const result = await manager.storage.list({ page: 1, page_size: 1 })
+      return {
+        success: true,
+        count: result.total ?? result.items?.length ?? 0
+      }
+    } catch (e) {
+      return {
+        success: false,
+        error: e.message,
+        status: e.status
+      }
+    }
+  }
 }

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

@@ -10,14 +10,13 @@ const props = defineProps({
   entries: { type: Array, required: true }
 })
 
-// Mark activity as seen when panel is viewed
+// Mark events as seen when panel is viewed (badge resets but events stay visible)
 onMounted(() => {
   props.collector.markSeen?.()
 })
 
-// Check for activity
-const hasActivity = computed(() => props.collector.hasActivity?.() || false)
-const lastEvent = computed(() => props.collector.getLastEvent?.())
+// Get all recent events (stacked display)
+const recentEvents = computed(() => props.collector.getRecentEvents?.() || [])
 
 function getIcon(type) {
   const icons = {
@@ -28,16 +27,60 @@ function getIcon(type) {
   }
   return icons[type] || 'pi-info-circle'
 }
+
+function formatTime(date) {
+  return date.toLocaleTimeString('en-US', { hour12: false })
+}
+
+function getEventIcon(type) {
+  const icons = {
+    login: 'pi-sign-in',
+    logout: 'pi-sign-out',
+    impersonate: 'pi-user-edit',
+    'impersonate-stop': 'pi-user'
+  }
+  return icons[type] || 'pi-info-circle'
+}
+
+function getEventLabel(event) {
+  if (event.type === 'login' && event.data) {
+    const user = event.data.user
+    const username = user?.username || user?.name || user?.email
+    if (username) {
+      return `User ${username} logged in`
+    }
+  }
+  if (event.type === 'impersonate' && event.data) {
+    // Payload structure: { target: { username }, original: { username } }
+    // Or signal object: { data: { target: { username } } }
+    const data = event.data.data || event.data
+    const username = data.target?.username
+      || data.username
+      || (typeof data === 'string' ? data : null)
+    if (username) {
+      return `Impersonating user ${username}`
+    }
+  }
+  if (event.type === 'impersonate-stop') {
+    const data = event.data?.data || event.data
+    const username = data?.original?.username
+    if (username) {
+      return `Back to ${username}`
+    }
+  }
+  const labels = {
+    login: 'User logged in',
+    logout: 'User logged out',
+    impersonate: 'Impersonating user',
+    'impersonate-stop': 'Stopped impersonation'
+  }
+  return labels[event.type] || event.type
+}
 </script>
 
 <template>
   <div class="auth-panel">
-    <!-- Activity indicator -->
-    <div v-if="hasActivity" class="auth-activity" :class="lastEvent">
-      <i :class="['pi', lastEvent === 'login' ? 'pi-sign-in' : 'pi-sign-out']" />
-      <span>{{ lastEvent === 'login' ? 'User logged in' : 'User logged out' }}</span>
-    </div>
-
+    <!-- Invariant entries (user, token, permissions, adapter) -->
     <div v-for="(entry, idx) in entries" :key="idx" class="auth-item">
       <div class="auth-header">
         <i :class="['pi', getIcon(entry.type)]" />
@@ -46,6 +89,18 @@ function getIcon(type) {
       <div v-if="entry.message" class="auth-message">{{ entry.message }}</div>
       <ObjectTree v-else-if="entry.data" :data="entry.data" :maxDepth="4" />
     </div>
+
+    <!-- Recent auth events (stacked below, newest first) -->
+    <div
+      v-for="event in recentEvents"
+      :key="event.id"
+      class="auth-activity"
+      :class="event.type"
+    >
+      <i :class="['pi', getEventIcon(event.type)]" />
+      <span>{{ getEventLabel(event) }}</span>
+      <span class="auth-time">{{ formatTime(event.timestamp) }}</span>
+    </div>
   </div>
 </template>
 
@@ -77,6 +132,22 @@ function getIcon(type) {
   border-left: 3px solid #ef4444;
   color: #ef4444;
 }
+.auth-activity.impersonate {
+  background: linear-gradient(90deg, rgba(249, 115, 22, 0.2) 0%, rgba(249, 115, 22, 0.05) 100%);
+  border-left: 3px solid #f97316;
+  color: #f97316;
+}
+.auth-activity.impersonate-stop {
+  background: linear-gradient(90deg, rgba(161, 161, 170, 0.2) 0%, rgba(161, 161, 170, 0.05) 100%);
+  border-left: 3px solid #a1a1aa;
+  color: #a1a1aa;
+}
+.auth-time {
+  margin-left: auto;
+  font-size: 10px;
+  opacity: 0.6;
+  font-weight: 400;
+}
 @keyframes pulse {
   0%, 100% { opacity: 1; }
   50% { opacity: 0.7; }

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

@@ -19,6 +19,8 @@ onMounted(() => {
 
 const expandedEntities = ref(new Set())
 const loadingCache = ref(new Set())
+const testingFetch = ref(new Set())
+const testResults = ref(new Map()) // entityName -> { success, count, error, status }
 
 function toggleExpand(name) {
   if (expandedEntities.value.has(name)) {
@@ -56,12 +58,37 @@ function isLoading(name) {
   return loadingCache.value.has(name)
 }
 
+function isTesting(name) {
+  return testingFetch.value.has(name)
+}
+
+function getTestResult(name) {
+  return testResults.value.get(name)
+}
+
+async function testFetch(entityName) {
+  if (testingFetch.value.has(entityName)) return
+  testingFetch.value.add(entityName)
+  testingFetch.value = new Set(testingFetch.value)
+  testResults.value.delete(entityName)
+  testResults.value = new Map(testResults.value)
+  try {
+    const result = await props.collector.testFetch(entityName)
+    testResults.value.set(entityName, result)
+    testResults.value = new Map(testResults.value)
+  } finally {
+    testingFetch.value.delete(entityName)
+    testingFetch.value = new Set(testingFetch.value)
+  }
+}
+
 function getCapabilityIcon(cap) {
   const icons = {
     supportsTotal: 'pi-hashtag',
     supportsFilters: 'pi-filter',
     supportsPagination: 'pi-ellipsis-h',
-    supportsCaching: 'pi-database'
+    supportsCaching: 'pi-database',
+    requiresAuth: 'pi-lock'
   }
   return icons[cap] || 'pi-question-circle'
 }
@@ -71,7 +98,8 @@ function getCapabilityLabel(cap) {
     supportsTotal: 'Total count',
     supportsFilters: 'Filters',
     supportsPagination: 'Pagination',
-    supportsCaching: 'Caching'
+    supportsCaching: 'Caching',
+    requiresAuth: 'Requires authentication'
   }
   return labels[cap] || cap
 }
@@ -107,7 +135,7 @@ function getCapabilityLabel(cap) {
           />
           <i
             v-if="entity.permissions.readOnly"
-            class="pi pi-lock perm-icon-readonly"
+            class="pi pi-eye perm-icon-readonly"
             title="Read-only entity"
           />
         </div>
@@ -143,7 +171,7 @@ function getCapabilityLabel(cap) {
               v-for="(enabled, cap) in entity.storage.capabilities"
               :key="cap"
               class="entity-cap"
-              :class="[enabled ? 'entity-cap-enabled' : 'entity-cap-disabled']"
+              :class="[cap === 'requiresAuth' && enabled ? 'entity-cap-auth' : (enabled ? 'entity-cap-enabled' : 'entity-cap-disabled')]"
               :title="getCapabilityLabel(cap) + (enabled ? ' ✓' : ' ✗')"
             >
               <i :class="['pi', getCapabilityIcon(cap)]" />
@@ -180,6 +208,29 @@ function getCapabilityLabel(cap) {
           <span class="entity-key">Cache:</span>
           <span class="entity-value entity-cache-na">Disabled</span>
         </div>
+        <!-- Test Fetch row - always visible for testing auth protection -->
+        <div class="entity-row">
+          <span class="entity-key">Test:</span>
+          <span v-if="getTestResult(entity.name)" class="entity-test-result" :class="getTestResult(entity.name).success ? 'test-success' : 'test-error'">
+            <template v-if="getTestResult(entity.name).success">
+              <i class="pi pi-check-circle" />
+              {{ getTestResult(entity.name).count }} items
+            </template>
+            <template v-else>
+              <i class="pi pi-times-circle" />
+              {{ getTestResult(entity.name).status || 'ERR' }}: {{ getTestResult(entity.name).error }}
+            </template>
+          </span>
+          <span v-else class="entity-value entity-test-na">-</span>
+          <button
+            class="entity-test-btn"
+            :disabled="isTesting(entity.name)"
+            @click.stop="testFetch(entity.name)"
+          >
+            <i :class="['pi', isTesting(entity.name) ? 'pi-spin pi-spinner' : 'pi-download']" />
+            {{ isTesting(entity.name) ? 'Testing...' : 'Fetch' }}
+          </button>
+        </div>
         <div class="entity-row">
           <span class="entity-key">Fields:</span>
           <span class="entity-value">{{ entity.fields.count }} fields</span>
@@ -413,6 +464,47 @@ function getCapabilityLabel(cap) {
   background: rgba(239, 68, 68, 0.2);
   color: #ef4444;
 }
+.entity-test-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  background: #3b82f6;
+  border: none;
+  border-radius: 3px;
+  color: #fff;
+  cursor: pointer;
+  font-size: 10px;
+  margin-left: auto;
+}
+.entity-test-btn:hover {
+  background: #2563eb;
+}
+.entity-test-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.entity-test-result {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-size: 10px;
+  margin-left: 8px;
+}
+.test-success {
+  background: rgba(34, 197, 94, 0.2);
+  color: #22c55e;
+}
+.test-error {
+  background: rgba(239, 68, 68, 0.2);
+  color: #ef4444;
+}
+.entity-test-na {
+  color: #52525b;
+  font-style: italic;
+}
 
 /* Collapsed summary */
 .entity-summary {
@@ -485,6 +577,10 @@ function getCapabilityLabel(cap) {
   background: rgba(239, 68, 68, 0.15);
   color: #71717a;
 }
+.entity-cap-auth {
+  background: rgba(245, 158, 11, 0.2);
+  color: #f59e0b;
+}
 .entity-required {
   color: #f59e0b;
   font-size: 10px;