@svadmin/ui 0.40.6 → 0.41.1

package/dist/components/ChatDialog.svelte.d.ts

@@ -2,7 +2,11 @@ import type { ChatMessage, ChatAction } from '@svadmin/core';
 interface Props {
     /** Render the launcher inside a layout toolbar instead of as a floating action button. */
     docked?: boolean;
-    /** localStorage key for chat history persistence. Set to '' to disable. */
+    /**
+     * Panel suffix for chat history persistence. Both default and explicit
+     * suffixes are scoped by backend API + typed tenant identity.
+     * Set to '' to disable persistence.
+     */
     persistKey?: string;
     /** Custom persistence callback — called when messages change */
     onPersist?: (messages: ChatMessage[]) => void;
@@ -10,6 +14,10 @@ interface Props {
     onRestore?: () => ChatMessage[];
     /** Callback when user clicks an action button in an assistant message */
     onAction?: (action: ChatAction, message: ChatMessage) => void;
+    /** Stable target for tree-scoped ask-ai events. */
+    scope?: string;
+    /** Owning Layout scope used to arbitrate global keyboard shortcuts. */
+    ownerScope?: string;
 }
 declare const ChatDialog: import("svelte").Component<Props, {}, "">;
 type ChatDialog = ReturnType<typeof ChatDialog>;

package/dist/components/CommandPalette.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { captureAdminContext, getResources, getAgentProvider, getChatProvider, toggleTheme } from '@svadmin/core';
+  import { captureAdminContext, getResources, toggleTheme } from '@svadmin/core';
   import { useTranslation } from '@svadmin/core/i18n';
   import { Command } from './ui/command/index.js';
   import * as Dialog from './ui/dialog/index.js';
@@ -18,7 +18,7 @@
   let searchValue = $state('');
 
   const resources = $derived(getResources());
-  const hasAI = $derived(!!(getAgentProvider() || getChatProvider()));
+  const hasAI = $derived(!!(adminContext.agentProvider || adminContext.chatProvider));
 
   function close() {
     open = false;

package/dist/components/CopilotPanel.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { getChatProvider, getChatContext } from '@svadmin/core';
+  import { captureAdminContext, useParsed, type ChatProvider } from '@svadmin/core';
   import { Sparkles, X, Check, RefreshCcw } from '@lucide/svelte';
   import { slide } from 'svelte/transition';
   import { Button } from './ui/button/index.js';
@@ -8,60 +8,101 @@
 
   let { open = $bindable(false) } = $props<{ open?: boolean }>();
 
-  const provider = $derived(getChatProvider());
-  const ctx = $derived(getChatContext());
+  const adminContext = captureAdminContext();
+  const provider = $derived(adminContext.chatProvider);
+  const parsed = useParsed();
+  const ctx = $derived({
+    currentResource: parsed.resource,
+    selectedRecordId: parsed.id,
+    currentView: parsed.action,
+  });
 
   let isPredicting = $state(false);
   let insightText = $state('');
   let abortController: AbortController | null = null;
-  let hasFetchedForContext = $state('');
+  let requestEpoch = 0;
 
-  // Automatically request insights when the context changes
   $effect(() => {
-    if (!open || !provider) return;
-    
-    // Create a context hash to avoid refetching for the same page
-    const currentHash = `${ctx.currentResource}-${ctx.currentView}-${ctx.selectedRecordId}`;
-    if (hasFetchedForContext === currentHash) return;
-    
-    hasFetchedForContext = currentHash;
-    getInsights();
+    const scopedProvider = provider;
+    const scopedContext = {
+      currentResource: ctx.currentResource,
+      selectedRecordId: ctx.selectedRecordId,
+      currentView: ctx.currentView,
+    };
+    const shouldFetch = open;
+    void adminContext.tenantCacheKey?.__svadminTenant;
+
+    clearCopilotScope();
+    if (shouldFetch && scopedProvider) {
+      void requestInsights(scopedProvider, scopedContext);
+    }
+
+    return cancelCopilotRequest;
   });
 
   async function getInsights() {
-    if (!provider) return;
-    
+    const scopedProvider = provider;
+    if (!scopedProvider) return;
+    await requestInsights(scopedProvider, {
+      currentResource: ctx.currentResource,
+      selectedRecordId: ctx.selectedRecordId,
+      currentView: ctx.currentView,
+    });
+  }
+
+  function cancelCopilotRequest() {
+    requestEpoch += 1;
+    abortController?.abort();
+    abortController = null;
+  }
+
+  function clearCopilotScope() {
+    cancelCopilotRequest();
+    isPredicting = false;
+    insightText = '';
+  }
+
+  async function requestInsights(
+    scopedProvider: ChatProvider,
+    scopedContext: typeof ctx,
+  ) {
+    cancelCopilotRequest();
+    const epoch = requestEpoch;
+    const controller = new AbortController();
+    abortController = controller;
     isPredicting = true;
     insightText = '';
-    
-    if (abortController) abortController.abort();
-    abortController = new AbortController();
 
     const prompt = `Analyze the current context and provide 3 quick insights or context-aware suggestions for the admin user.
-Resource: ${ctx.currentResource}
-View: ${ctx.currentView}
-Record ID: ${ctx.selectedRecordId || 'None'}
+Resource: ${scopedContext.currentResource}
+View: ${scopedContext.currentView}
+Record ID: ${scopedContext.selectedRecordId || 'None'}
 Keep it concise, professional, and use bullet points.`;
 
     try {
-      const result = provider.sendMessage(
+      const result = scopedProvider.sendMessage(
         [{ id: 'insights', role: 'system', content: prompt, timestamp: Date.now() }],
-        { signal: abortController.signal }
+        { signal: controller.signal }
       );
 
       if (Symbol.asyncIterator in result) {
         for await (const chunk of result as AsyncIterable<string>) {
+          if (epoch !== requestEpoch) return;
           insightText += chunk;
         }
       } else {
-        insightText = await result;
+        const response = await result;
+        if (epoch === requestEpoch) insightText = response;
       }
     } catch (err: unknown) {
-      if (err instanceof Error && err.name !== 'AbortError') {
+      if (epoch === requestEpoch && err instanceof Error && err.name !== 'AbortError') {
         insightText = 'Failed to generate insights for this context.';
       }
     } finally {
-      isPredicting = false;
+      if (epoch === requestEpoch) {
+        isPredicting = false;
+        if (abortController === controller) abortController = null;
+      }
     }
   }
 </script>

package/dist/components/DevTools.svelte

@@ -1,7 +1,12 @@
 <script lang="ts">
-/* eslint-disable @typescript-eslint/no-explicit-any */
+  import { onMount } from 'svelte';
   import { fly } from 'svelte/transition';
-  import { captureAdminContext, getResources, getTheme, getColorTheme } from '@svadmin/core';
+  import { useQueryClient } from '@tanstack/svelte-query';
+  import {
+    captureAdminContext,
+    getColorTheme,
+    getTheme,
+  } from '@svadmin/core';
   import { useTranslation } from '@svadmin/core/i18n';
 
   import TooltipButton from './TooltipButton.svelte';
@@ -12,43 +17,183 @@
   import { X, Bug, ChevronDown, ChevronUp, Wand2 } from '@lucide/svelte';
   import InferencerPanel from './InferencerPanel.svelte';
 
-  const i18n = useTranslation();
+  type CacheDiagnostics = {
+    queries: { total: number; fetching: number; stale: number; errors: number };
+    mutations: { total: number; pending: number; paused: number; errors: number };
+  };
 
-  let { docked = false }: { docked?: boolean } = $props();
+  type ProviderDiagnostic = {
+    name: string;
+    configured: boolean;
+    capabilities: string;
+  };
+
+  const EMPTY_CACHE_DIAGNOSTICS: CacheDiagnostics = {
+    queries: { total: 0, fetching: 0, stale: 0, errors: 0 },
+    mutations: { total: 0, pending: 0, paused: 0, errors: 0 },
+  };
 
+  const isDev = import.meta.env.DEV;
+  const i18n = useTranslation();
+  const queryClient = useQueryClient();
   const adminContext = captureAdminContext();
+
+  let { docked = false }: { docked?: boolean } = $props();
   let visible = $state(false);
   let collapsed = $state(false);
+  let cacheDiagnostics = $state.raw<CacheDiagnostics>(EMPTY_CACHE_DIAGNOSTICS);
 
   function toggle() {
     visible = !visible;
   }
 
-  function handleKeydown(e: KeyboardEvent) {
-    if (e.ctrlKey && e.shiftKey && e.key === 'D') {
-      e.preventDefault();
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.ctrlKey && event.shiftKey && event.key.toLowerCase() === 'd') {
+      event.preventDefault();
       toggle();
     }
   }
 
-  const resources = $derived.by(() => { try { return getResources(); } catch { return []; } });
+  function refreshCacheDiagnostics() {
+    const queries = queryClient.getQueryCache().getAll();
+    const mutations = queryClient.getMutationCache().getAll();
+    cacheDiagnostics = {
+      queries: {
+        total: queries.length,
+        fetching: queries.filter((query) => query.state.fetchStatus === 'fetching').length,
+        stale: queries.filter((query) => query.isStale()).length,
+        errors: queries.filter((query) => query.state.status === 'error').length,
+      },
+      mutations: {
+        total: mutations.length,
+        pending: mutations.filter((mutation) => mutation.state.status === 'pending').length,
+        paused: mutations.filter((mutation) => mutation.state.isPaused).length,
+        errors: mutations.filter((mutation) => mutation.state.status === 'error').length,
+      },
+    };
+  }
+
+  onMount(() => {
+    if (!isDev) return;
+    refreshCacheDiagnostics();
+    const unsubscribeQueries = queryClient.getQueryCache().subscribe(refreshCacheDiagnostics);
+    const unsubscribeMutations = queryClient.getMutationCache().subscribe(refreshCacheDiagnostics);
+    return () => {
+      unsubscribeQueries();
+      unsubscribeMutations();
+    };
+  });
+
+  const resources = $derived(adminContext.resources);
   const path = $derived(adminContext.currentPath());
   const theme = $derived(getTheme());
   const colorTheme = $derived(getColorTheme());
   const locale = $derived(i18n.locale);
 
+  const dataProviders = $derived.by(() => {
+    try {
+      return adminContext.getDataProviderNames().map((name) => {
+        const provider = adminContext.getDataProvider(name);
+        const capabilities = [
+          provider.getMany || provider.createMany || provider.updateMany || provider.deleteMany ? 'bulk' : undefined,
+          provider.custom ? 'custom' : undefined,
+        ].filter((capability): capability is string => Boolean(capability));
+        const resourceCount = resources.filter((resource) =>
+          (resource.provider?.dataProviderName ?? resource.meta?.dataProviderName ?? 'default') === name,
+        ).length;
+        return {
+          name,
+          resourceCount,
+          capabilities: capabilities.length > 0 ? capabilities.join(', ') : 'CRUD',
+        };
+      });
+    } catch {
+      return [];
+    }
+  });
+
+  const frameworkProviders = $derived.by((): ProviderDiagnostic[] => {
+    const access = adminContext.accessControlProvider;
+    const audit = adminContext.auditLogProvider;
+    const notification = adminContext.notificationProvider;
+    const chat = adminContext.chatProvider;
+    const agent = adminContext.agentProvider;
+    const live = adminContext.liveProvider;
+    const task = adminContext.taskProvider;
+    const auth = adminContext.authProvider;
+
+    return [
+      {
+        name: 'Auth',
+        configured: Boolean(auth),
+        capabilities: auth
+          ? [auth.getPermissions ? 'permissions' : undefined, auth.getRoles ? 'roles' : undefined]
+              .filter((capability): capability is string => Boolean(capability))
+              .join(', ') || 'identity'
+          : 'not configured',
+      },
+      {
+        name: 'Access control',
+        configured: Boolean(access),
+        capabilities: access?.options?.buttons?.enableAccessControl ? 'button checks enabled' : access ? 'policy checks' : 'not configured',
+      },
+      {
+        name: 'Live',
+        configured: Boolean(live),
+        capabilities: live
+          ? ['subscribe', live.publish ? 'publish' : undefined, live.unsubscribe ? 'unsubscribe' : undefined]
+              .filter((capability): capability is string => Boolean(capability))
+              .join(', ')
+          : 'not configured',
+      },
+      {
+        name: 'Audit',
+        configured: Boolean(audit),
+        capabilities: audit ? 'create, get, update' : 'not configured',
+      },
+      {
+        name: 'Notification',
+        configured: Boolean(notification),
+        capabilities: notification ? 'open, close' : 'built-in toast fallback',
+      },
+      {
+        name: 'Chat',
+        configured: Boolean(chat),
+        capabilities: chat ? 'message stream' : 'not configured',
+      },
+      {
+        name: 'Agent',
+        configured: Boolean(agent),
+        capabilities: agent ? `${agent.tools?.length ?? 0} tools (names hidden)` : 'not configured',
+      },
+      {
+        name: 'Task',
+        configured: Boolean(task),
+        capabilities: task
+          ? [task.list ? 'list' : undefined, task.subscribe ? 'subscribe' : undefined, task.retry ? 'retry' : undefined, task.cancel ? 'cancel' : undefined]
+              .filter((capability): capability is string => Boolean(capability))
+              .join(', ') || 'submit, get'
+          : 'not configured',
+      },
+      {
+        name: 'Tenant',
+        configured: Boolean(adminContext.tenant),
+        capabilities: adminContext.tenant ? 'tree scoped (identifier hidden)' : 'not configured',
+      },
+    ];
+  });
 </script>
 
-<svelte:window onkeydown={handleKeydown} />
+<svelte:window onkeydown={isDev ? handleKeydown : undefined} />
 
-{#if (import.meta as any).env?.DEV}
+{#if isDev}
   {#if visible}
     <div
-      class="fixed bottom-0 right-4 z-[9999] w-[420px] max-w-[95vw] rounded-t-xl border border-b-0 bg-card shadow-2xl text-[0.8125rem] overflow-hidden"
-      class:w-auto={collapsed} class:min-w-[200px]={collapsed}
+      class="fixed bottom-0 right-4 z-[9999] w-[560px] max-w-[95vw] rounded-t-xl border border-b-0 bg-card shadow-2xl text-[0.8125rem] overflow-hidden"
+      class:w-auto={collapsed}
+      class:min-w-[200px]={collapsed}
       transition:fly={{ y: 400, duration: 300 }}
     >
-      <!-- Header -->
       <div class="flex items-center justify-between px-3 py-2 bg-muted border-b">
         <div class="flex items-center gap-1.5 font-semibold text-xs uppercase tracking-wider text-foreground">
           <Bug class="h-4 w-4" />
@@ -70,16 +215,18 @@
 
       {#if !collapsed}
         <Tabs.Root value="state" class="w-full">
-          <Tabs.List class="grid w-full grid-cols-2 h-8 rounded-none border-b">
+          <Tabs.List class="grid w-full grid-cols-4 h-8 rounded-none border-b">
             <Tabs.Trigger value="state" class="text-xs data-[state=active]:shadow-none rounded-none border-b-2 border-transparent data-[state=active]:border-primary">State</Tabs.Trigger>
+            <Tabs.Trigger value="providers" class="text-xs data-[state=active]:shadow-none rounded-none border-b-2 border-transparent data-[state=active]:border-primary">Providers</Tabs.Trigger>
+            <Tabs.Trigger value="cache" class="text-xs data-[state=active]:shadow-none rounded-none border-b-2 border-transparent data-[state=active]:border-primary">Cache</Tabs.Trigger>
             <Tabs.Trigger value="inferencer" class="text-xs data-[state=active]:shadow-none rounded-none border-b-2 border-transparent data-[state=active]:border-primary">
               <Wand2 class="h-3 w-3 mr-1" /> Inferencer
             </Tabs.Trigger>
           </Tabs.List>
+
           <Tabs.Content value="state" class="p-0">
-            <ScrollArea class="max-h-[400px]">
+            <ScrollArea class="max-h-[420px]">
               <div class="p-2 space-y-1">
-                <!-- Router -->
                 <div class="py-1">
                   <h4 class="text-[0.6875rem] font-bold uppercase tracking-widest text-muted-foreground mb-1 px-1">Router</h4>
                   <div class="flex items-center justify-between px-1 py-0.5 rounded hover:bg-muted/50">
@@ -90,7 +237,6 @@
 
                 <Separator />
 
-                <!-- Theme -->
                 <div class="py-1">
                   <h4 class="text-[0.6875rem] font-bold uppercase tracking-widest text-muted-foreground mb-1 px-1">Theme</h4>
                   <div class="flex items-center justify-between px-1 py-0.5 rounded hover:bg-muted/50">
@@ -105,7 +251,6 @@
 
                 <Separator />
 
-                <!-- i18n -->
                 <div class="py-1">
                   <h4 class="text-[0.6875rem] font-bold uppercase tracking-widest text-muted-foreground mb-1 px-1">i18n</h4>
                   <div class="flex items-center justify-between px-1 py-0.5 rounded hover:bg-muted/50">
@@ -116,19 +261,94 @@
 
                 <Separator />
 
-                <!-- Resources -->
                 <div class="py-1">
                   <h4 class="text-[0.6875rem] font-bold uppercase tracking-widest text-muted-foreground mb-1 px-1">Resources ({resources.length})</h4>
-                  {#each resources as r, _i (_i)}
+                  {#each resources as resource (resource.identifier ?? resource.name)}
                     <div class="flex items-center justify-between px-1 py-0.5 rounded hover:bg-muted/50">
-                      <span class="text-xs text-foreground">{r.name}</span>
-                      <Badge variant="outline" class="font-mono text-[0.6875rem]">{r.fields.length} fields</Badge>
+                      <span class="text-xs text-foreground">{resource.name}</span>
+                      <Badge variant="outline" class="font-mono text-[0.6875rem]">{resource.fields.length} fields</Badge>
                     </div>
                   {/each}
                 </div>
               </div>
             </ScrollArea>
           </Tabs.Content>
+
+          <Tabs.Content value="providers" class="p-0">
+            <ScrollArea class="max-h-[420px]">
+              <div class="p-3 space-y-3">
+                <div class="rounded-md border bg-muted/20 p-2 text-[0.6875rem] text-muted-foreground">
+                  Sensitive values are hidden: endpoints, credentials, record data, messages, and live/audit payloads.
+                </div>
+
+                <section class="space-y-1.5">
+                  <h4 class="text-[0.6875rem] font-bold uppercase tracking-widest text-muted-foreground">Data providers ({dataProviders.length})</h4>
+                  {#each dataProviders as provider (provider.name)}
+                    <div class="rounded-md border px-2.5 py-2">
+                      <div class="flex items-center justify-between gap-2">
+                        <span class="font-medium text-foreground">{provider.name}</span>
+                        <Badge variant="outline">{provider.resourceCount} resources</Badge>
+                      </div>
+                      <div class="mt-1 flex items-center justify-between gap-2 text-[0.6875rem] text-muted-foreground">
+                        <span>{provider.capabilities}</span>
+                        <span>Endpoint hidden</span>
+                      </div>
+                    </div>
+                  {/each}
+                </section>
+
+                <Separator />
+
+                <section class="space-y-1">
+                  <h4 class="text-[0.6875rem] font-bold uppercase tracking-widest text-muted-foreground">Framework providers</h4>
+                  {#each frameworkProviders as provider (provider.name)}
+                    <div class="flex items-center justify-between gap-3 rounded px-1 py-1 hover:bg-muted/50">
+                      <div class="min-w-0">
+                        <div class="text-xs text-foreground">{provider.name}</div>
+                        <div class="truncate text-[0.6875rem] text-muted-foreground">{provider.capabilities}</div>
+                      </div>
+                      <Badge variant={provider.configured ? 'secondary' : 'outline'}>{provider.configured ? 'configured' : 'fallback'}</Badge>
+                    </div>
+                  {/each}
+                </section>
+              </div>
+            </ScrollArea>
+          </Tabs.Content>
+
+          <Tabs.Content value="cache" class="p-0">
+            <ScrollArea class="max-h-[420px]">
+              <div class="grid gap-3 p-3 sm:grid-cols-2">
+                <section class="rounded-md border p-3">
+                  <div class="mb-2 flex items-center justify-between">
+                    <h4 class="text-xs font-semibold text-foreground">Queries</h4>
+                    <Badge variant="secondary" data-testid="devtools-query-total">{cacheDiagnostics.queries.total}</Badge>
+                  </div>
+                  <dl class="space-y-1 text-xs">
+                    <div class="flex justify-between"><dt class="text-muted-foreground">Fetching</dt><dd>{cacheDiagnostics.queries.fetching}</dd></div>
+                    <div class="flex justify-between"><dt class="text-muted-foreground">Stale</dt><dd>{cacheDiagnostics.queries.stale}</dd></div>
+                    <div class="flex justify-between"><dt class="text-muted-foreground">Errors</dt><dd>{cacheDiagnostics.queries.errors}</dd></div>
+                  </dl>
+                </section>
+
+                <section class="rounded-md border p-3">
+                  <div class="mb-2 flex items-center justify-between">
+                    <h4 class="text-xs font-semibold text-foreground">Mutations</h4>
+                    <Badge variant="secondary" data-testid="devtools-mutation-total">{cacheDiagnostics.mutations.total}</Badge>
+                  </div>
+                  <dl class="space-y-1 text-xs">
+                    <div class="flex justify-between"><dt class="text-muted-foreground">Pending</dt><dd>{cacheDiagnostics.mutations.pending}</dd></div>
+                    <div class="flex justify-between"><dt class="text-muted-foreground">Paused</dt><dd>{cacheDiagnostics.mutations.paused}</dd></div>
+                    <div class="flex justify-between"><dt class="text-muted-foreground">Errors</dt><dd>{cacheDiagnostics.mutations.errors}</dd></div>
+                  </dl>
+                </section>
+
+                <p class="text-[0.6875rem] text-muted-foreground sm:col-span-2">
+                  Query keys, variables, cached records, mutation payloads, and error bodies are intentionally hidden.
+                </p>
+              </div>
+            </ScrollArea>
+          </Tabs.Content>
+
           <Tabs.Content value="inferencer" class="p-0">
             <InferencerPanel />
           </Tabs.Content>

package/dist/components/InferencerPanel.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
  
-  import { getDataProvider, getResources, inferResource } from '@svadmin/core';
+  import { captureAdminContext, inferResource } from '@svadmin/core';
   import type { InferResult } from '@svadmin/core';
   import { Button } from './ui/button/index.js';
   import { Input } from './ui/input/index.js';
@@ -13,8 +13,8 @@
   import { Select } from './ui/select/index.js';
   import { Wand2, Copy, Check, RefreshCw, Loader2, AlertCircle } from '@lucide/svelte';
 
-  const dataProvider = getDataProvider();
-  const resources = getResources();
+  const adminContext = captureAdminContext();
+  const resources = $derived(adminContext.resources);
 
   let selectedResource = $state('');
   let inferResult = $state<InferResult | null>(null);
@@ -23,24 +23,42 @@
   let copied = $state(false);
   let customEndpoint = $state('');
   let copyTimer: ReturnType<typeof setTimeout> | undefined;
+  let inferenceEpoch = 0;
 
   $effect(() => {
     return () => { if (copyTimer) clearTimeout(copyTimer); };
   });
 
+  $effect(() => {
+    void adminContext.providerBundle;
+    void adminContext.tenantCacheKey?.__svadminTenant;
+    void resources;
+    inferenceEpoch += 1;
+    inferResult = null;
+    loading = false;
+    error = null;
+
+    return () => {
+      inferenceEpoch += 1;
+    };
+  });
+
   async function runInference() {
     const resourceName = customEndpoint.trim() || selectedResource;
     if (!resourceName) return;
 
+    const epoch = ++inferenceEpoch;
     loading = true;
     error = null;
     inferResult = null;
 
     try {
+      const dataProvider = adminContext.getDataProviderForResource(resourceName);
       const response = await dataProvider.getList({
         resource: resourceName,
         pagination: { current: 1, pageSize: 25 },
       });
+      if (epoch !== inferenceEpoch) return;
 
       if (!response.data || response.data.length === 0) {
         error = `No data returned from "${resourceName}". The API must return at least one record to infer fields.`;
@@ -52,9 +70,11 @@
         response.data as Record<string, unknown>[],
       );
     } catch (e: unknown) {
-      error = e instanceof Error ? e.message : 'Failed to fetch data for inference.';
+      if (epoch === inferenceEpoch) {
+        error = e instanceof Error ? e.message : 'Failed to fetch data for inference.';
+      }
     } finally {
-      loading = false;
+      if (epoch === inferenceEpoch) loading = false;
     }
   }