qdadm 0.51.4 → 0.51.6

package/package.json

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

package/src/components/SeverityTag.vue

@@ -46,7 +46,7 @@ const props = defineProps({
 })
 
 const orchestrator = inject('qdadmOrchestrator')
-// Auto-discover entity from page context (provided by useListPageBuilder, useBareForm, etc.)
+// Auto-discover entity from page context (provided by useListPage, useBareForm, etc.)
 const mainEntity = inject('mainEntity', null)
 
 const resolvedEntity = computed(() => props.entity || mainEntity)

package/src/components/lists/ListPage.vue

@@ -8,7 +8,7 @@
  * - FilterBar with search and custom filters
  * - DataTable with actions column
  *
- * Props come from useListPageBuilder composable
+ * Props come from useListPage composable
  *
  * Filter types:
  * - 'select' (default): Standard dropdown

package/src/components/pages/LoginPage.vue

@@ -203,7 +203,7 @@ async function handleLogin() {
             <label for="qdadm-password">{{ passwordLabel }}</label>
             <Password
               v-model="password"
-              id="qdadm-password"
+              inputId="qdadm-password"
               class="w-full"
               :feedback="false"
               toggleMask

package/src/composables/index.js

@@ -9,7 +9,7 @@ export { useDirtyState } from './useDirtyState'
 export { useForm } from './useForm'
 export { useEntityItemFormPage, useEntityItemFormPage as useFormPageBuilder } from './useEntityItemFormPage'
 export * from './useJsonSyntax'
-export { useListPageBuilder, PAGE_SIZE_OPTIONS } from './useListPageBuilder'
+export { useListPage, PAGE_SIZE_OPTIONS } from './useListPage'
 export { usePageTitle } from './usePageTitle'
 export { useApp } from './useApp'
 export { useAuth } from './useAuth'

package/src/composables/useEntityItemFormPage.js

@@ -298,7 +298,11 @@ export function useEntityItemFormPage(config = {}) {
           responseData = await manager.update(entityId.value, payload)
         }
       } else {
-        responseData = await manager.create(payload)
+        // Build context with parent chain for multi-storage routing
+        const context = parentConfig.value && parentId.value
+          ? { parentChain: [{ entity: parentConfig.value.entity, id: parentId.value }] }
+          : undefined
+        responseData = await manager.create(payload, context)
       }
 
       toast.add({

package/src/composables/{useListPageBuilder.js → useListPage.js}

@@ -3,6 +3,7 @@ import { useRouter, useRoute } from 'vue-router'
 import { useToast } from 'primevue/usetoast'
 import { useConfirm } from 'primevue/useconfirm'
 import { useHooks } from './useHooks.js'
+import { useEntityItemPage } from './useEntityItemPage.js'
 import { FilterQuery } from '../query/FilterQuery.js'
 
 // Cookie utilities for pagination persistence
@@ -58,7 +59,7 @@ function setSessionFilters(key, filters) {
 }
 
 /**
- * useListPageBuilder - Unified procedural builder for CRUD list pages
+ * useListPage - Unified procedural builder for CRUD list pages
  *
  * Provides a declarative/procedural API to build list pages with:
  * - Cards zone (stats, custom content)
@@ -102,14 +103,14 @@ function setSessionFilters(key, filters) {
  * ## Basic Usage
  *
  * ```js
- * const list = useListPageBuilder({ entity: 'domains' })
+ * const list = useListPage({ entity: 'domains' })
  * list.addFilter('status', { options: [...] })
  * list.setSearch({ fields: ['name', 'email'] })
  * list.addCreateAction()
  * list.addEditAction()
  * ```
  */
-export function useListPageBuilder(config = {}) {
+export function useListPage(config = {}) {
   const {
     entity,
     dataKey,
@@ -156,6 +157,63 @@ export function useListPageBuilder(config = {}) {
   // Provide entity context for child components (e.g., SeverityTag auto-discovery)
   provide('mainEntity', entity)
 
+  // ============ PARENT CHAIN SUPPORT ============
+  // When list is a child of a parent entity (e.g., /bots/:id/commands),
+  // we use useEntityItemPage for the PARENT to:
+  // - Load parent entity data
+  // - Set breadcrumbs for parent
+  // - Provide parent context to the list
+
+  const parentConfig = computed(() => route.meta?.parent || null)
+
+  // Create useEntityItemPage for PARENT entity (not for list's own entity)
+  // Only when parentConfig exists
+  let parentPage = null
+  if (route.meta?.parent) {
+    const parentMeta = route.meta.parent
+    parentPage = useEntityItemPage({
+      entity: parentMeta.entity,
+      loadOnMount: true,  // Auto-load parent on mount
+      breadcrumb: true,   // Parent sets its breadcrumb
+      idParam: parentMeta.param,  // Use parent's param (e.g., 'id' for /bots/:id)
+      autoLoadParent: true  // Support grandparent chain
+    })
+  }
+
+  // Parent data and loading state (null if no parent)
+  const parentData = computed(() => parentPage?.data.value || null)
+  const parentId = computed(() => parentPage?.entityId.value || null)
+  const parentLoading = computed(() => parentPage?.loading.value || false)
+  const parentChain = computed(() => parentPage?.parentChain.value || new Map())
+
+  /**
+   * Build entity context with parentChain array for multi-storage routing
+   * Format: { parentChain: [{ entity: 'grandparent', id: '1' }, { entity: 'parent', id: '42' }] }
+   * Array is ordered from root ancestor to immediate parent
+   */
+  const entityContext = computed(() => {
+    if (!parentConfig.value || !parentId.value) {
+      return null
+    }
+
+    // Build chain from config (traversing from immediate parent to root)
+    const chain = []
+    let currentConfig = parentConfig.value
+
+    while (currentConfig) {
+      const entityId = route.params[currentConfig.param]
+      if (!entityId) break
+
+      chain.unshift({
+        entity: currentConfig.entity,
+        id: entityId
+      })
+      currentConfig = currentConfig.parent
+    }
+
+    return chain.length > 0 ? { parentChain: chain } : null
+  })
+
   // Read config from manager with option overrides
   const entityName = config.entityName ?? manager.label
   const entityNamePlural = config.entityNamePlural ?? manager.labelPlural
@@ -1079,13 +1137,9 @@ export function useListPageBuilder(config = {}) {
         }
       }
 
-      // Auto-add parent filter from route config
-      const parentConfig = route.meta?.parent
-      if (parentConfig?.foreignKey && parentConfig?.param) {
-        const parentId = route.params[parentConfig.param]
-        if (parentId) {
-          filters[parentConfig.foreignKey] = parentId
-        }
+      // Auto-add parent filter from route config (uses parentPage from useEntityItemPage)
+      if (parentConfig.value?.foreignKey && parentId.value) {
+        filters[parentConfig.value.foreignKey] = parentId.value
       }
 
       if (Object.keys(filters).length > 0) {
@@ -1098,9 +1152,10 @@ export function useListPageBuilder(config = {}) {
       }
 
       // Use manager.query() for automatic cache handling
+      // Pass entityContext for multi-storage routing
       const response = manager.query
-        ? await manager.query(params)
-        : await manager.list(params)
+        ? await manager.query(params, { routingContext: entityContext.value })
+        : await manager.list(params, entityContext.value)
 
       // Track if response came from cache
       fromCache.value = response.fromCache || false
@@ -1645,6 +1700,14 @@ export function useListPageBuilder(config = {}) {
     // Manager access
     manager,
 
+    // Parent chain (when list is child of parent entity)
+    parentConfig,
+    parentId,
+    parentData,
+    parentLoading,
+    parentChain,
+    parentPage,  // Full useEntityItemPage instance for parent (or null)
+
     // State
     items,
     displayItems,  // Use this for rendering (handles local/API filtering)

package/src/debug/EntitiesCollector.js

@@ -231,9 +231,14 @@ export class EntitiesCollector extends Collector {
       storage: {
         type: storage?.constructor?.storageName || storage?.constructor?.name || 'None',
         endpoint: storage?.endpoint || storage?._endpoint || null,
-        capabilities: storage?.capabilities || storage?.constructor?.capabilities || {}
+        capabilities: storage?.capabilities || storage?.constructor?.capabilities || {},
+        hasNormalize: !!(storage?._normalize),
+        hasDenormalize: !!(storage?._denormalize)
       },
 
+      // Multi-storage info
+      multiStorage: this._detectMultiStorage(manager),
+
       // Cache info
       cache: {
         enabled: cache.enabled ?? false,
@@ -311,6 +316,73 @@ export class EntitiesCollector extends Collector {
     }
   }
 
+  /**
+   * Detect if a manager uses multi-storage pattern
+   * @param {EntityManager} manager - Manager instance
+   * @returns {object|null} Multi-storage info or null
+   * @private
+   */
+  _detectMultiStorage(manager) {
+    // Check if resolveStorage is overridden (not the base implementation)
+    const hasCustomResolve = manager.resolveStorage &&
+      manager.resolveStorage.toString() !== 'resolveStorage(method, context) {\n    return { storage: this.storage };\n  }'
+
+    if (!hasCustomResolve) {
+      // Also check by looking for additional storage properties
+      const additionalStorages = this._findAdditionalStorages(manager)
+      if (additionalStorages.length === 0) {
+        return null
+      }
+    }
+
+    // Find all storage properties on the manager
+    const storages = this._findAdditionalStorages(manager)
+
+    return {
+      enabled: true,
+      storages: storages.map(s => ({
+        name: s.name,
+        type: s.storage?.constructor?.storageName || s.storage?.constructor?.name || 'Unknown',
+        endpoint: s.storage?.endpoint || null,
+        hasNormalize: !!(s.storage?._normalize),
+        hasDenormalize: !!(s.storage?._denormalize),
+        capabilities: s.storage?.capabilities || s.storage?.constructor?.capabilities || {}
+      }))
+    }
+  }
+
+  /**
+   * Find additional storage instances on a manager
+   * @param {EntityManager} manager - Manager instance
+   * @returns {Array<{name: string, storage: object}>}
+   * @private
+   */
+  _findAdditionalStorages(manager) {
+    const storages = []
+    const mainStorage = manager.storage
+
+    // Look for properties that look like storages
+    for (const key of Object.keys(manager)) {
+      // Skip private and known non-storage properties
+      if (key.startsWith('_') || key === 'storage') continue
+
+      const value = manager[key]
+      if (!value || typeof value !== 'object') continue
+
+      // Check if it looks like a storage (has list, get, create methods or endpoint)
+      const isStorage = (
+        (typeof value.list === 'function' && typeof value.get === 'function') ||
+        (value.endpoint && typeof value.fetch === 'function')
+      )
+
+      if (isStorage && value !== mainStorage) {
+        storages.push({ name: key, storage: value })
+      }
+    }
+
+    return storages
+  }
+
   /**
    * Get cached items from a manager
    * @param {EntityManager} manager - Manager instance
@@ -418,4 +490,34 @@ export class EntitiesCollector extends Collector {
       }
     }
   }
+
+  /**
+   * Test fetch data from a specific storage of an entity
+   * @param {string} entityName - Entity name
+   * @param {string} storageName - Storage property name ('storage' for primary)
+   * @returns {Promise<{success: boolean, count?: number, error?: string, status?: number}>}
+   */
+  async testStorageFetch(entityName, storageName) {
+    if (!this._orchestrator) {
+      return { success: false, error: 'No orchestrator' }
+    }
+    try {
+      const manager = this._orchestrator.get(entityName)
+      const storage = storageName === 'storage' ? manager.storage : manager[storageName]
+      if (!storage) {
+        return { success: false, error: `Storage '${storageName}' not found` }
+      }
+      const result = await 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/EntitiesPanel.vue

@@ -21,6 +21,8 @@ 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 }
+const testingStorages = ref(new Set()) // "entityName:storageName"
+const storageTestResults = ref(new Map()) // "entityName:storageName" -> { success, count, error, status }
 
 function toggleExpand(name) {
   if (expandedEntities.value.has(name)) {
@@ -82,6 +84,31 @@ async function testFetch(entityName) {
   }
 }
 
+function isTestingStorage(entityName, storageName) {
+  return testingStorages.value.has(`${entityName}:${storageName}`)
+}
+
+function getStorageTestResult(entityName, storageName) {
+  return storageTestResults.value.get(`${entityName}:${storageName}`)
+}
+
+async function testStorageFetch(entityName, storageName) {
+  const key = `${entityName}:${storageName}`
+  if (testingStorages.value.has(key)) return
+  testingStorages.value.add(key)
+  testingStorages.value = new Set(testingStorages.value)
+  storageTestResults.value.delete(key)
+  storageTestResults.value = new Map(storageTestResults.value)
+  try {
+    const result = await props.collector.testStorageFetch(entityName, storageName)
+    storageTestResults.value.set(key, result)
+    storageTestResults.value = new Map(storageTestResults.value)
+  } finally {
+    testingStorages.value.delete(key)
+    testingStorages.value = new Set(testingStorages.value)
+  }
+}
+
 function getCapabilityIcon(cap) {
   const icons = {
     supportsTotal: 'pi-hashtag',
@@ -164,24 +191,102 @@ function getCapabilityLabel(cap) {
 
       <!-- Expanded details -->
       <div v-else class="entity-details">
-        <div class="entity-row">
-          <span class="entity-key">Storage:</span>
-          <span class="entity-value">{{ entity.storage.type }}</span>
-          <span v-if="entity.storage.endpoint" class="entity-endpoint">{{ entity.storage.endpoint }}</span>
-        </div>
-        <div v-if="entity.storage.capabilities && Object.keys(entity.storage.capabilities).length > 0" class="entity-row">
-          <span class="entity-key">Caps:</span>
-          <div class="entity-capabilities">
-            <span
-              v-for="(enabled, cap) in entity.storage.capabilities"
-              :key="cap"
-              class="entity-cap"
-              :class="[cap === 'requiresAuth' && enabled ? 'entity-cap-auth' : (enabled ? 'entity-cap-enabled' : 'entity-cap-disabled')]"
-              :title="getCapabilityLabel(cap) + (enabled ? ' ✓' : ' ✗')"
-            >
-              <i :class="['pi', getCapabilityIcon(cap)]" />
+        <!-- Storages section -->
+        <div class="entity-storages-section">
+          <div class="entity-storages-header">
+            <i class="pi pi-database" />
+            <span>Storages</span>
+            <span v-if="entity.multiStorage?.enabled" class="entity-multi-badge" title="Multi-storage routing">
+              <i class="pi pi-sitemap" />
+              {{ 1 + entity.multiStorage.storages.length }}
             </span>
           </div>
+
+          <!-- Primary storage -->
+          <div class="entity-storage-card">
+            <div class="entity-storage-header">
+              <span class="entity-storage-name">storage</span>
+              <span class="entity-storage-type">{{ entity.storage.type }}</span>
+              <span v-if="entity.storage.hasNormalize || entity.storage.hasDenormalize" class="entity-normalize-badge" title="Has normalize/denormalize">
+                <i class="pi pi-arrows-h" />
+              </span>
+              <button
+                class="entity-storage-fetch-btn"
+                :disabled="isTestingStorage(entity.name, 'storage')"
+                @click.stop="testStorageFetch(entity.name, 'storage')"
+                title="Test fetch on this storage"
+              >
+                <i :class="['pi', isTestingStorage(entity.name, 'storage') ? 'pi-spin pi-spinner' : 'pi-download']" />
+              </button>
+            </div>
+            <div v-if="entity.storage.endpoint" class="entity-storage-endpoint">
+              {{ entity.storage.endpoint }}
+            </div>
+            <div class="entity-storage-row">
+              <div v-if="entity.storage.capabilities && Object.keys(entity.storage.capabilities).length > 0" class="entity-storage-caps">
+                <span
+                  v-for="(enabled, cap) in entity.storage.capabilities"
+                  :key="cap"
+                  class="entity-cap"
+                  :class="[cap === 'requiresAuth' && enabled ? 'entity-cap-auth' : (enabled ? 'entity-cap-enabled' : 'entity-cap-disabled')]"
+                  :title="getCapabilityLabel(cap) + (enabled ? ' ✓' : ' ✗')"
+                >
+                  <i :class="['pi', getCapabilityIcon(cap)]" />
+                </span>
+              </div>
+              <span v-if="getStorageTestResult(entity.name, 'storage')" class="entity-storage-test-result" :class="getStorageTestResult(entity.name, 'storage').success ? 'test-success' : 'test-error'">
+                <template v-if="getStorageTestResult(entity.name, 'storage').success">
+                  <i class="pi pi-check-circle" /> {{ getStorageTestResult(entity.name, 'storage').count }}
+                </template>
+                <template v-else>
+                  <i class="pi pi-times-circle" /> {{ getStorageTestResult(entity.name, 'storage').status || 'ERR' }}
+                </template>
+              </span>
+            </div>
+          </div>
+
+          <!-- Additional storages -->
+          <div v-for="s in entity.multiStorage?.storages || []" :key="s.name" class="entity-storage-card entity-storage-alt">
+            <div class="entity-storage-header">
+              <span class="entity-storage-name">{{ s.name }}</span>
+              <span class="entity-storage-type">{{ s.type }}</span>
+              <span v-if="s.hasNormalize || s.hasDenormalize" class="entity-normalize-badge" title="Has normalize/denormalize">
+                <i class="pi pi-arrows-h" />
+              </span>
+              <button
+                class="entity-storage-fetch-btn"
+                :disabled="isTestingStorage(entity.name, s.name)"
+                @click.stop="testStorageFetch(entity.name, s.name)"
+                title="Test fetch on this storage"
+              >
+                <i :class="['pi', isTestingStorage(entity.name, s.name) ? 'pi-spin pi-spinner' : 'pi-download']" />
+              </button>
+            </div>
+            <div v-if="s.endpoint" class="entity-storage-endpoint">
+              {{ s.endpoint }}
+            </div>
+            <div class="entity-storage-row">
+              <div v-if="s.capabilities && Object.keys(s.capabilities).length > 0" class="entity-storage-caps">
+                <span
+                  v-for="(enabled, cap) in s.capabilities"
+                  :key="cap"
+                  class="entity-cap"
+                  :class="[cap === 'requiresAuth' && enabled ? 'entity-cap-auth' : (enabled ? 'entity-cap-enabled' : 'entity-cap-disabled')]"
+                  :title="getCapabilityLabel(cap) + (enabled ? ' ✓' : ' ✗')"
+                >
+                  <i :class="['pi', getCapabilityIcon(cap)]" />
+                </span>
+              </div>
+              <span v-if="getStorageTestResult(entity.name, s.name)" class="entity-storage-test-result" :class="getStorageTestResult(entity.name, s.name).success ? 'test-success' : 'test-error'">
+                <template v-if="getStorageTestResult(entity.name, s.name).success">
+                  <i class="pi pi-check-circle" /> {{ getStorageTestResult(entity.name, s.name).count }}
+                </template>
+                <template v-else>
+                  <i class="pi pi-times-circle" /> {{ getStorageTestResult(entity.name, s.name).status || 'ERR' }}
+                </template>
+              </span>
+            </div>
+          </div>
         </div>
         <div v-if="entity.cache.enabled" class="entity-row">
           <span class="entity-key">Cache:</span>
@@ -213,29 +318,6 @@ 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>
@@ -580,6 +662,120 @@ function getCapabilityLabel(cap) {
   background: #3f3f46;
   border-radius: 2px;
 }
+.entity-normalize-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  background: rgba(139, 92, 246, 0.2);
+  color: #a78bfa;
+  border-radius: 3px;
+  font-size: 10px;
+}
+.entity-multi-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 2px 6px;
+  background: rgba(59, 130, 246, 0.2);
+  color: #60a5fa;
+  border-radius: 3px;
+  font-size: 10px;
+  font-weight: 600;
+}
+/* Storages section */
+.entity-storages-section {
+  margin-bottom: 8px;
+}
+.entity-storages-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: #a1a1aa;
+  font-size: 11px;
+  margin-bottom: 6px;
+}
+.entity-storages-header .pi {
+  font-size: 10px;
+}
+.entity-storage-card {
+  background: #1f1f23;
+  border-radius: 4px;
+  padding: 6px 8px;
+  margin-bottom: 4px;
+  border-left: 2px solid #3b82f6;
+}
+.entity-storage-alt {
+  border-left-color: #8b5cf6;
+}
+.entity-storage-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.entity-storage-name {
+  color: #60a5fa;
+  font-weight: 500;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 11px;
+}
+.entity-storage-alt .entity-storage-name {
+  color: #a78bfa;
+}
+.entity-storage-type {
+  color: #a1a1aa;
+  font-size: 10px;
+}
+.entity-storage-endpoint {
+  color: #71717a;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10px;
+  padding: 2px 0;
+  margin-top: 2px;
+}
+.entity-storage-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 4px;
+}
+.entity-storage-caps {
+  display: flex;
+  gap: 4px;
+  flex-wrap: wrap;
+}
+.entity-storage-fetch-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  margin-left: auto;
+  background: #3b82f6;
+  border: none;
+  border-radius: 3px;
+  color: #fff;
+  cursor: pointer;
+  font-size: 10px;
+}
+.entity-storage-fetch-btn:hover {
+  background: #2563eb;
+}
+.entity-storage-fetch-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.entity-storage-test-result {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-size: 10px;
+  margin-left: auto;
+}
 .entity-capabilities {
   display: flex;
   gap: 4px;

package/src/entity/EntityManager.js

@@ -304,6 +304,61 @@ export class EntityManager {
     }
   }
 
+  // ============ STORAGE RESOLUTION ============
+
+  /**
+   * Resolve which storage to use for an operation
+   *
+   * Override in subclass to route to different storages based on context.
+   * This enables multi-endpoint patterns like:
+   * - /api/commands (global)
+   * - /api/bots/:id/commands (scoped to bot)
+   *
+   * The default implementation returns the single configured storage.
+   *
+   * @param {string} method - Operation: 'list', 'get', 'create', 'update', 'delete'
+   * @param {object} [context] - Routing context
+   * @param {Array<{entity: string, id: string|number}>} [context.parentChain] - Parent chain from root to direct parent
+   * @returns {{ storage: IStorage, path?: string, mappingKey?: string }}
+   *
+   * @example
+   * // Single storage (default, no change needed)
+   * manager.resolveStorage('list') // { storage: this.storage }
+   *
+   * @example
+   * // Access direct parent (last in chain)
+   * const parent = context?.parentChain?.at(-1)
+   *
+   * @example
+   * // Multi-storage routing in subclass
+   * resolveStorage(method, context) {
+   *   const parent = context?.parentChain?.at(-1)
+   *   if (parent?.entity === 'bots') {
+   *     return {
+   *       storage: this.botStorage,
+   *       path: `/${parent.id}/commands`
+   *     }
+   *   }
+   *   return { storage: this.storage }
+   * }
+   *
+   * @example
+   * // Nested parents: /users/:userId/posts/:postId/comments
+   * resolveStorage(method, context) {
+   *   const chain = context?.parentChain || []
+   *   if (chain.length === 2 && chain[0].entity === 'users' && chain[1].entity === 'posts') {
+   *     return {
+   *       storage: this.nestedStorage,
+   *       path: `/${chain[0].id}/posts/${chain[1].id}/comments`
+   *     }
+   *   }
+   *   return { storage: this.storage }
+   * }
+   */
+  resolveStorage(method, context) {
+    return { storage: this.storage }
+  }
+
   // ============ METADATA ACCESSORS ============
 
   /**
@@ -857,10 +912,12 @@ export class EntityManager {
    * @param {string} [params.sort_by] - Sort field
    * @param {string} [params.sort_order] - 'asc' or 'desc'
    * @param {boolean} [params.cacheSafe] - If true, allow caching even with filters
+   * @param {object} [context] - Routing context for multi-storage
    * @returns {Promise<{ items: Array, total: number, fromCache: boolean }>}
    */
-  async list(params = {}) {
-    if (!this.storage) {
+  async list(params = {}, context) {
+    const { storage, path } = this.resolveStorage('list', context)
+    if (!storage) {
       throw new Error(`[EntityManager:${this.name}] list() not implemented`)
     }
 
@@ -892,8 +949,22 @@ export class EntityManager {
 
     if (!_internal) this._stats.cacheMisses++
 
-    // 2. Fetch from API (storage normalizes response to { items, total })
-    const response = await this.storage.list(queryParams)
+    // 2. Fetch from API
+    let response
+    if (path && storage.request) {
+      // Use request() with path for multi-storage routing
+      // Build query params for GET request
+      const apiResponse = await storage.request('GET', path, { params: queryParams })
+      // Normalize response: handle both { data: [...], pagination: {...} } and { items, total }
+      const data = apiResponse.data ?? apiResponse
+      response = {
+        items: Array.isArray(data) ? data : (data.items || data.data || []),
+        total: data.total ?? data.pagination?.total ?? (Array.isArray(data) ? data.length : 0)
+      }
+    } else {
+      // Standard storage.list() (normalizes response to { items, total })
+      response = await storage.list(queryParams)
+    }
     const items = response.items || []
     const total = response.total ?? items.length
 
@@ -937,9 +1008,11 @@ export class EntityManager {
    * Otherwise fetches from storage.
    *
    * @param {string|number} id
+   * @param {object} [context] - Routing context for multi-storage
    * @returns {Promise<object>}
    */
-  async get(id) {
+  async get(id, context) {
+    const { storage, path } = this.resolveStorage('get', context)
     this._stats.get++
 
     // Try cache first if valid and complete
@@ -954,8 +1027,13 @@ export class EntityManager {
 
     // Fallback to storage
     this._stats.cacheMisses++
-    if (this.storage) {
-      return this.storage.get(id)
+    if (storage) {
+      // Use request() with path for multi-storage routing, otherwise use get()
+      if (path && storage.request) {
+        const response = await storage.request('GET', `${path}/${id}`)
+        return response.data ?? response
+      }
+      return storage.get(id)
     }
     throw new Error(`[EntityManager:${this.name}] get() not implemented`)
   }
@@ -1006,17 +1084,25 @@ export class EntityManager {
    * - postsave: After successful storage.create(), for side effects
    *
    * @param {object} data
+   * @param {object} [context] - Routing context for multi-storage
    * @returns {Promise<object>} - The created entity
    */
-  async create(data) {
+  async create(data, context) {
+    const { storage, path } = this.resolveStorage('create', context)
     this._stats.create++
-    if (this.storage) {
+    if (storage) {
       // Invoke presave hooks (can modify data or throw to abort)
       const presaveContext = this._buildPresaveContext(data, true)
       await this._invokeHook('presave', presaveContext)
 
-      // Use potentially modified data from context
-      const result = await this.storage.create(presaveContext.record)
+      // Use request() with path for multi-storage routing, otherwise use create()
+      let result
+      if (path && storage.request) {
+        const response = await storage.request('POST', path, { data: presaveContext.record })
+        result = response.data ?? response
+      } else {
+        result = await storage.create(presaveContext.record)
+      }
       this.invalidateCache()
 
       // Invoke postsave hooks (for side effects)
@@ -1043,17 +1129,25 @@ export class EntityManager {
    *
    * @param {string|number} id
    * @param {object} data
+   * @param {object} [context] - Routing context for multi-storage
    * @returns {Promise<object>}
    */
-  async update(id, data) {
+  async update(id, data, context) {
+    const { storage, path } = this.resolveStorage('update', context)
     this._stats.update++
-    if (this.storage) {
+    if (storage) {
       // Invoke presave hooks (can modify data or throw to abort)
       const presaveContext = this._buildPresaveContext(data, false, id)
       await this._invokeHook('presave', presaveContext)
 
-      // Use potentially modified data from context
-      const result = await this.storage.update(id, presaveContext.record)
+      // Use request() with path for multi-storage routing, otherwise use update()
+      let result
+      if (path && storage.request) {
+        const response = await storage.request('PUT', `${path}/${id}`, { data: presaveContext.record })
+        result = response.data ?? response
+      } else {
+        result = await storage.update(id, presaveContext.record)
+      }
       this.invalidateCache()
 
       // Invoke postsave hooks (for side effects)
@@ -1080,17 +1174,25 @@ export class EntityManager {
    *
    * @param {string|number} id
    * @param {object} data
+   * @param {object} [context] - Routing context for multi-storage
    * @returns {Promise<object>}
    */
-  async patch(id, data) {
+  async patch(id, data, context) {
+    const { storage, path } = this.resolveStorage('patch', context)
     this._stats.update++  // patch counts as update
-    if (this.storage) {
+    if (storage) {
       // Invoke presave hooks (can modify data or throw to abort)
       const presaveContext = this._buildPresaveContext(data, false, id)
       await this._invokeHook('presave', presaveContext)
 
-      // Use potentially modified data from context
-      const result = await this.storage.patch(id, presaveContext.record)
+      // Use request() with path for multi-storage routing, otherwise use patch()
+      let result
+      if (path && storage.request) {
+        const response = await storage.request('PATCH', `${path}/${id}`, { data: presaveContext.record })
+        result = response.data ?? response
+      } else {
+        result = await storage.patch(id, presaveContext.record)
+      }
       this.invalidateCache()
 
       // Invoke postsave hooks (for side effects)
@@ -1115,16 +1217,24 @@ export class EntityManager {
    * - predelete: Before storage.delete(), can throw to abort (for cascade checks)
    *
    * @param {string|number} id
+   * @param {object} [context] - Routing context for multi-storage
    * @returns {Promise<void>}
    */
-  async delete(id) {
+  async delete(id, context) {
+    const { storage, path } = this.resolveStorage('delete', context)
     this._stats.delete++
-    if (this.storage) {
+    if (storage) {
       // Invoke predelete hooks (can throw to abort, e.g., for cascade checks)
       const predeleteContext = this._buildPredeleteContext(id)
       await this._invokeHook('predelete', predeleteContext)
 
-      const result = await this.storage.delete(id)
+      // Use request() with path for multi-storage routing, otherwise use delete()
+      let result
+      if (path && storage.request) {
+        result = await storage.request('DELETE', `${path}/${id}`)
+      } else {
+        result = await storage.delete(id)
+      }
       this.invalidateCache()
       this._emitSignal('deleted', {
         manager: this.name,
@@ -1573,25 +1683,24 @@ export class EntityManager {
    * @param {object} params - Query params (search, filters, sort_by, sort_order, page, page_size)
    * @param {object} [options] - Query options
    * @param {object} [options.context] - Context info (module, form, field, scope, bypassPermissions, reason)
+   * @param {object} [options.routingContext] - Multi-storage routing context with parentChain
    * @returns {Promise<{ items: Array, total: number, fromCache: boolean }>}
    */
   async query(params = {}, options = {}) {
-    const { context = {} } = options
+    const { context = {}, routingContext = null } = options
 
     // Ensure cache is filled (via list)
     if (!this._cache.valid && this.isCacheEnabled) {
-      await this.list({ page_size: this.effectiveThreshold })
+      await this.list({ page_size: this.effectiveThreshold }, routingContext)
     }
 
     let result
 
     // If overflow or cache disabled, use API for accurate filtered results
     if (this.overflow || !this.isCacheEnabled) {
-      console.log('[cache] API call for entity:', this.name, '(total > threshold)', 'isCacheEnabled:', this.isCacheEnabled, 'overflow:', this.overflow)
-      result = await this.list(params)
+      result = await this.list(params, routingContext)
     } else {
       // Full cache available - filter locally
-      console.log('[cache] Using local cache for entity:', this.name)
       const filtered = this._filterLocally(this._cache.items, params)
       result = { ...filtered, fromCache: true }
     }

package/src/entity/storage/ApiStorage.js

@@ -20,6 +20,24 @@ import { IStorage } from './IStorage.js'
  *   endpoint: '/users',
  *   getClient: () => inject('apiClient')
  * })
+ *
+ * // With data normalization (different API format)
+ * const storage = new ApiStorage({
+ *   endpoint: '/api/projects/:id/tasks',
+ *   client: apiClient,
+ *   // API → internal format
+ *   normalize: (apiData) => ({
+ *     id: apiData.task_id,
+ *     title: apiData.name,
+ *     status: apiData.state
+ *   }),
+ *   // Internal → API format
+ *   denormalize: (data) => ({
+ *     task_id: data.id,
+ *     name: data.title,
+ *     state: data.status
+ *   })
+ * })
  * ```
  */
 export class ApiStorage extends IStorage {
@@ -55,7 +73,15 @@ export class ApiStorage extends IStorage {
       getClient = null,
       // Response format configuration
       responseItemsKey = 'items',
-      responseTotalKey = 'total'
+      responseTotalKey = 'total',
+      // WIP: Parameter mapping for filters { clientName: apiName }
+      // Transforms filter param names before sending to API
+      paramMapping = {},
+      // Data normalization
+      // normalize: (apiData) => internalData - transform API response
+      // denormalize: (internalData) => apiData - transform before sending
+      normalize = null,
+      denormalize = null
     } = options
 
     this.endpoint = endpoint
@@ -63,6 +89,49 @@ export class ApiStorage extends IStorage {
     this._getClient = getClient
     this.responseItemsKey = responseItemsKey
     this.responseTotalKey = responseTotalKey
+    this.paramMapping = paramMapping
+    this._normalize = normalize
+    this._denormalize = denormalize
+  }
+
+  /**
+   * WIP: Apply parameter mapping to transform filter names
+   * @param {object} params - Original params
+   * @returns {object} - Params with mapped names
+   */
+  _applyParamMapping(params) {
+    if (!this.paramMapping || Object.keys(this.paramMapping).length === 0) {
+      return params
+    }
+    const mapped = {}
+    for (const [key, value] of Object.entries(params)) {
+      const mappedKey = this.paramMapping[key] || key
+      mapped[mappedKey] = value
+    }
+    return mapped
+  }
+
+  /**
+   * Normalize API response data to internal format
+   * @param {object|Array} data - API response data
+   * @returns {object|Array} - Normalized data
+   */
+  _normalizeData(data) {
+    if (!this._normalize) return data
+    if (Array.isArray(data)) {
+      return data.map(item => this._normalize(item))
+    }
+    return this._normalize(data)
+  }
+
+  /**
+   * Denormalize internal data to API format
+   * @param {object} data - Internal data
+   * @returns {object} - API format data
+   */
+  _denormalizeData(data) {
+    if (!this._denormalize) return data
+    return this._denormalize(data)
   }
 
   get client() {
@@ -88,13 +157,18 @@ export class ApiStorage extends IStorage {
    */
   async list(params = {}) {
     const { page = 1, page_size = 20, sort_by, sort_order, filters = {} } = params
+
+    // WIP: Apply param mapping to filters
+    const mappedFilters = this._applyParamMapping(filters)
+
     const response = await this.client.get(this.endpoint, {
-      params: { page, page_size, sort_by, sort_order, ...filters }
+      params: { page, page_size, sort_by, sort_order, ...mappedFilters }
     })
 
     const data = response.data
+    const items = data[this.responseItemsKey] || data.items || data
     return {
-      items: data[this.responseItemsKey] || data.items || data,
+      items: this._normalizeData(items),
       total: data[this.responseTotalKey] || data.total || (Array.isArray(data) ? data.length : 0)
     }
   }
@@ -106,7 +180,7 @@ export class ApiStorage extends IStorage {
    */
   async get(id) {
     const response = await this.client.get(`${this.endpoint}/${id}`)
-    return response.data
+    return this._normalizeData(response.data)
   }
 
   /**
@@ -115,8 +189,9 @@ export class ApiStorage extends IStorage {
    * @returns {Promise<object>}
    */
   async create(data) {
-    const response = await this.client.post(this.endpoint, data)
-    return response.data
+    const apiData = this._denormalizeData(data)
+    const response = await this.client.post(this.endpoint, apiData)
+    return this._normalizeData(response.data)
   }
 
   /**
@@ -126,8 +201,9 @@ export class ApiStorage extends IStorage {
    * @returns {Promise<object>}
    */
   async update(id, data) {
-    const response = await this.client.put(`${this.endpoint}/${id}`, data)
-    return response.data
+    const apiData = this._denormalizeData(data)
+    const response = await this.client.put(`${this.endpoint}/${id}`, apiData)
+    return this._normalizeData(response.data)
   }
 
   /**
@@ -137,8 +213,9 @@ export class ApiStorage extends IStorage {
    * @returns {Promise<object>}
    */
   async patch(id, data) {
-    const response = await this.client.patch(`${this.endpoint}/${id}`, data)
-    return response.data
+    const apiData = this._denormalizeData(data)
+    const response = await this.client.patch(`${this.endpoint}/${id}`, apiData)
+    return this._normalizeData(response.data)
   }
 
   /**

package/src/kernel/Kernel.js

@@ -48,6 +48,7 @@ import { createQdadm } from '../plugin.js'
 import { initModules, getRoutes, setSectionOrder, alterMenuSections, registry } from '../module/moduleRegistry.js'
 import { createModuleLoader } from './ModuleLoader.js'
 import { createKernelContext } from './KernelContext.js'
+import { ToastBridgeModule } from '../toast/ToastBridgeModule.js'
 import { Orchestrator } from '../orchestrator/Orchestrator.js'
 import { createSignalBus } from './SignalBus.js'
 import { createZoneRegistry } from '../zones/ZoneRegistry.js'
@@ -98,6 +99,7 @@ export class Kernel {
    * @param {object} options.eventRouter - EventRouter config { 'source:signal': ['target:signal', ...] }
    * @param {object} options.sse - SSEBridge config { url, reconnectDelay, signalPrefix, autoConnect, events }
    * @param {object} options.debugBar - Debug bar config { module: DebugModule, component: QdadmDebugBar, ...options }
+   * @param {boolean} options.toast - Enable ToastBridgeModule (default: true). Set to false to disable.
    */
   constructor(options) {
     // Auto-inject DebugModule if debugBar.module is provided
@@ -122,6 +124,15 @@ export class Kernel {
         options.debug = true
       }
     }
+
+    // Auto-inject ToastBridgeModule unless toast: false
+    // Handles toast:* signals from useSignalToast() composable
+    if (options.toast !== false) {
+      options.moduleDefs = options.moduleDefs || []
+      // Add at beginning for high priority (loads early)
+      options.moduleDefs.unshift(new ToastBridgeModule())
+    }
+
     this.options = options
     this.vueApp = null
     this.router = null
@@ -569,11 +580,12 @@ export class Kernel {
     }
 
     // Build home route
+    // Note: Must have a name to avoid Vue Router warning when parent (_layout) has a name
     let homeRouteConfig
     if (typeof homeRoute === 'object' && homeRoute.component) {
-      homeRouteConfig = { path: '', ...homeRoute }
+      homeRouteConfig = { path: '', name: homeRoute.name || '_home', ...homeRoute }
     } else {
-      homeRouteConfig = { path: '', redirect: { name: homeRoute || 'home' } }
+      homeRouteConfig = { path: '', name: '_home', redirect: { name: homeRoute || 'home' } }
     }
 
     // Collect all module routes

package/src/query/FilterQuery.js

@@ -102,7 +102,7 @@ export class FilterQuery {
   }
 
   /**
-   * Set the parent manager (called by useListPageBuilder for field source)
+   * Set the parent manager (called by useListPage for field source)
    *
    * @param {EntityManager} manager
    * @returns {FilterQuery} this for chaining

package/src/security/pages/RoleList.vue

@@ -3,14 +3,14 @@
  * RoleList - Role listing page (standard ListPage pattern)
  */
 
-import { useListPageBuilder, ListPage, useOrchestrator } from '../../index.js'
+import { useListPage, ListPage, useOrchestrator } from '../../index.js'
 import Column from 'primevue/column'
 import Tag from 'primevue/tag'
 import Chip from 'primevue/chip'
 import Message from 'primevue/message'
 
 // ============ LIST BUILDER ============
-const list = useListPageBuilder({ entity: 'roles' })
+const list = useListPage({ entity: 'roles' })
 
 // ============ SEARCH ============
 list.setSearch({