qdadm 0.30.0 → 0.32.0

package/src/debug/components/ObjectTree.vue

@@ -0,0 +1,194 @@
+<script setup>
+/**
+ * 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'
+
+const props = defineProps({
+  data: { type: [Object, Array, String, Number, Boolean, null], default: null },
+  depth: { type: Number, default: 0 },
+  maxDepth: { type: Number, default: 10 },
+  name: { type: String, default: null },
+  defaultExpanded: { type: Boolean, default: false }
+})
+
+const expanded = ref(props.defaultExpanded && props.depth < 2)
+
+const isObject = computed(() => props.data !== null && typeof props.data === 'object')
+const isArray = computed(() => Array.isArray(props.data))
+const isEmpty = computed(() => {
+  if (!isObject.value) return false
+  return isArray.value ? props.data.length === 0 : Object.keys(props.data).length === 0
+})
+
+const keys = computed(() => {
+  if (!isObject.value) return []
+  return Object.keys(props.data).slice(0, 100)
+})
+
+const preview = computed(() => {
+  if (!isObject.value) return ''
+  if (isArray.value) {
+    return `Array(${props.data.length})`
+  }
+  const keyCount = Object.keys(props.data).length
+  const firstKeys = Object.keys(props.data).slice(0, 3).join(', ')
+  return keyCount <= 3 ? `{${firstKeys}}` : `{${firstKeys}, ...}`
+})
+
+const valueClass = computed(() => {
+  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) {
+  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() {
+  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[key]"
+          :name="key"
+          :depth="depth + 1"
+          :maxDepth="maxDepth"
+        />
+        <div v-if="Object.keys(data).length > 100" class="obj-truncated">
+          ... {{ Object.keys(data).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>
+
+<style scoped>
+.obj-node {
+  font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.obj-line {
+  display: flex;
+  align-items: flex-start;
+  gap: 4px;
+  padding: 1px 0;
+  cursor: default;
+  white-space: nowrap;
+}
+
+.obj-line:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.obj-toggle {
+  color: #71717a;
+  font-size: 10px;
+  width: 12px;
+  flex-shrink: 0;
+  cursor: pointer;
+  transition: transform 0.1s;
+  display: inline-block;
+}
+
+.obj-toggle.obj-expanded {
+  transform: rotate(90deg);
+}
+
+.obj-key {
+  color: #a78bfa;
+}
+
+.obj-preview {
+  color: #71717a;
+  font-style: italic;
+}
+
+.obj-empty {
+  color: #71717a;
+}
+
+.obj-children {
+  border-left: 1px solid #3f3f46;
+  margin-left: 5px;
+}
+
+.obj-string {
+  color: #fbbf24;
+}
+
+.obj-number {
+  color: #34d399;
+}
+
+.obj-boolean {
+  color: #60a5fa;
+}
+
+.obj-null, .obj-undefined {
+  color: #71717a;
+  font-style: italic;
+}
+
+.obj-function {
+  color: #c084fc;
+  font-style: italic;
+}
+
+.obj-truncated, .obj-max-depth {
+  color: #71717a;
+  font-style: italic;
+  padding-left: 16px;
+}
+</style>

package/src/debug/components/index.js

@@ -0,0 +1,8 @@
+/**
+ * Debug Components Exports
+ *
+ * Vue components for the debug panel UI.
+ */
+
+export { default as DebugBar } from './DebugBar.vue'
+export { default as ObjectTree } from './ObjectTree.vue'

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

@@ -0,0 +1,174 @@
+<script setup>
+/**
+ * AuthPanel - Auth collector display with activity indicator
+ */
+import { onMounted, computed } from 'vue'
+import ObjectTree from '../ObjectTree.vue'
+
+const props = defineProps({
+  collector: { type: Object, required: true },
+  entries: { type: Array, required: true }
+})
+
+// Mark events as seen when panel is viewed (badge resets but events stay visible)
+onMounted(() => {
+  props.collector.markSeen?.()
+})
+
+// Get all recent events (stacked display)
+const recentEvents = computed(() => props.collector.getRecentEvents?.() || [])
+
+function getIcon(type) {
+  const icons = {
+    user: 'pi-user',
+    token: 'pi-key',
+    permissions: 'pi-shield',
+    adapter: 'pi-cog'
+  }
+  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">
+    <!-- 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)]" />
+        <span class="auth-label">{{ entry.label || entry.type }}</span>
+      </div>
+      <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>
+
+<style scoped>
+.auth-panel {
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+/* Activity indicator */
+.auth-activity {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 600;
+  animation: pulse 2s ease-in-out infinite;
+}
+.auth-activity.login {
+  background: linear-gradient(90deg, rgba(34, 197, 94, 0.2) 0%, rgba(34, 197, 94, 0.05) 100%);
+  border-left: 3px solid #22c55e;
+  color: #22c55e;
+}
+.auth-activity.logout {
+  background: linear-gradient(90deg, rgba(239, 68, 68, 0.2) 0%, rgba(239, 68, 68, 0.05) 100%);
+  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; }
+}
+.auth-item {
+  background: #27272a;
+  border-radius: 4px;
+  padding: 8px;
+}
+.auth-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 6px;
+  color: #10b981;
+}
+.auth-label {
+  font-weight: 600;
+}
+.auth-message {
+  color: #71717a;
+  font-size: 12px;
+}
+</style>