@vertesia/ui 1.5.0-dev.20260901.052906Z → 1.5.0-dev.20260910.051115Z

package/src/features/permissions/UserPermissionsProvider.test.tsx

@@ -0,0 +1,172 @@
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { VertesiaClient } from '@vertesia/client';
+import type { AuthTokenPayload, SystemRoleDefinition } from '@vertesia/common';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { UserPermissionProvider } from './UserPermissionsProvider';
+
+const session = {
+    client: new VertesiaClient({ serverUrl: 'https://studio.example.test', storeUrl: 'https://store.example.test' }),
+    authToken: { sub: 'user-a', account_roles: [] } as unknown as AuthTokenPayload,
+    signOut: vi.fn(),
+};
+vi.mock('@vertesia/ui/session', () => ({ useUserSession: () => session }));
+
+function renderProvider() {
+    return render(
+        <UserPermissionProvider>
+            <div>Protected workspace</div>
+        </UserPermissionProvider>,
+    );
+}
+
+async function advance(ms: number) {
+    await act(async () => {
+        await vi.advanceTimersByTimeAsync(ms);
+    });
+}
+
+describe('role mapping recovery', () => {
+    beforeEach(() => {
+        vi.useFakeTimers();
+        vi.spyOn(Math, 'random').mockReturnValue(1);
+        session.authToken = { sub: 'user-a', account_roles: [] } as unknown as AuthTokenPayload;
+        session.signOut.mockClear();
+    });
+    afterEach(() => {
+        vi.useRealTimers();
+        vi.restoreAllMocks();
+    });
+
+    it.each([0, 502, 503, 504])(
+        'recovers automatically from status %s without rendering protected content early',
+        async (status) => {
+            const fetch = vi
+                .spyOn(session.client.iam.roles, 'listSystem')
+                .mockRejectedValueOnce(Object.assign(new Error('JWKSTimeout'), { status }))
+                .mockResolvedValue([]);
+            renderProvider();
+            expect(screen.queryByText('Protected workspace')).toBeNull();
+            await advance(0);
+            expect(screen.getByRole('status').textContent).toContain('automatically');
+            expect(screen.queryByText('JWKSTimeout')).toBeNull();
+            await advance(1_000);
+            expect(screen.getByText('Protected workspace')).toBeTruthy();
+            expect(fetch).toHaveBeenCalledTimes(2);
+            expect(screen.queryByRole('alert')).toBeNull();
+        },
+    );
+
+    it('stops after one minute and lets a manual retry recover without navigating', async () => {
+        const fetch = vi
+            .spyOn(session.client.iam.roles, 'listSystem')
+            .mockRejectedValue(Object.assign(new Error('JWKSTimeout'), { status: 503 }));
+        const location = window.location.href;
+        renderProvider();
+        await advance(60_000);
+        expect(screen.getByRole('alert').textContent).toContain('couldn’t connect');
+        const calls = fetch.mock.calls.length;
+        await advance(60_000);
+        expect(fetch).toHaveBeenCalledTimes(calls);
+        fetch.mockResolvedValue([]);
+        fireEvent.click(screen.getByRole('button', { name: 'Try again' }));
+        await advance(0);
+        expect(screen.getByText('Protected workspace')).toBeTruthy();
+        expect(window.location.href).toBe(location);
+    });
+
+    it('does not restart recovery when authentication re-decodes the same JWT', async () => {
+        const fetch = vi.spyOn(session.client.iam.roles, 'listSystem').mockImplementation(async () => {
+            session.authToken = { ...session.authToken };
+            throw Object.assign(new Error('Unavailable'), { status: 503 });
+        });
+        renderProvider();
+        await advance(60_000);
+        expect(screen.getByRole('button', { name: 'Try again' })).toBeTruthy();
+        const calls = fetch.mock.calls.length;
+        await advance(10_000);
+        expect(fetch).toHaveBeenCalledTimes(calls);
+        fetch.mockImplementation(async () => {
+            session.authToken = { ...session.authToken };
+            return [];
+        });
+        fireEvent.click(screen.getByRole('button', { name: 'Try again' }));
+        await advance(0);
+        expect(screen.getByText('Protected workspace')).toBeTruthy();
+        expect(fetch).toHaveBeenCalledTimes(calls + 1);
+    });
+
+    it('bounds a hung request and ignores its late success', async () => {
+        let resolve!: (roles: SystemRoleDefinition[]) => void;
+        const fetch = vi.spyOn(session.client.iam.roles, 'listSystem').mockImplementation(
+            () =>
+                new Promise((done) => {
+                    resolve = done;
+                }),
+        );
+        renderProvider();
+        await advance(60_000);
+        expect(fetch.mock.calls[0][0]?.signal?.aborted).toBe(true);
+        await act(async () => resolve([]));
+        expect(screen.queryByText('Protected workspace')).toBeNull();
+        expect(screen.getByRole('button', { name: 'Try again' })).toBeTruthy();
+    });
+
+    it.each([401, 403, 400, 500])('does not automatically retry status %s', async (status) => {
+        const fetch = vi
+            .spyOn(session.client.iam.roles, 'listSystem')
+            .mockRejectedValue(Object.assign(new Error('Request failed'), { status }));
+        renderProvider();
+        await advance(60_000);
+        expect(fetch).toHaveBeenCalledTimes(1);
+        expect(screen.queryByText('Protected workspace')).toBeNull();
+        if (status === 401 || status === 403) {
+            fireEvent.click(screen.getByRole('button', { name: 'Use a different account' }));
+            expect(session.signOut).toHaveBeenCalledOnce();
+        }
+    });
+
+    it('cancels retries on unmount', async () => {
+        const fetch = vi
+            .spyOn(session.client.iam.roles, 'listSystem')
+            .mockRejectedValue(Object.assign(new Error('Unavailable'), { status: 503 }));
+        const view = renderProvider();
+        await advance(0);
+        view.unmount();
+        await advance(60_000);
+        expect(fetch).toHaveBeenCalledTimes(1);
+        expect(fetch.mock.calls[0][0]?.signal?.aborted).toBe(true);
+    });
+
+    it('ignores the previous session’s pending response after a token change', async () => {
+        let resolveOld!: (roles: SystemRoleDefinition[]) => void;
+        const fetch = vi
+            .spyOn(session.client.iam.roles, 'listSystem')
+            .mockImplementationOnce(
+                () =>
+                    new Promise((done) => {
+                        resolveOld = done;
+                    }),
+            )
+            .mockRejectedValue(Object.assign(new Error('Forbidden'), { status: 403 }));
+        const view = renderProvider();
+        session.authToken = { sub: 'user-b', account_roles: [] } as unknown as AuthTokenPayload;
+        view.rerender(
+            <UserPermissionProvider>
+                <div>Protected workspace</div>
+            </UserPermissionProvider>,
+        );
+        await advance(0);
+        await act(async () => resolveOld([]));
+        expect(fetch.mock.calls[0][0]?.signal?.aborted).toBe(true);
+        expect(screen.queryByText('Protected workspace')).toBeNull();
+        expect(screen.getByRole('alert').textContent).toContain('Access Denied');
+    });
+
+    it('uses permissions embedded in the token without fetching mappings', () => {
+        session.authToken = { ...session.authToken, permissions: [] };
+        const fetch = vi.spyOn(session.client.iam.roles, 'listSystem');
+        renderProvider();
+        expect(screen.getByText('Protected workspace')).toBeTruthy();
+        expect(fetch).not.toHaveBeenCalled();
+    });
+});

package/src/features/permissions/UserPermissionsProvider.tsx

@@ -1,9 +1,10 @@
 import { type AuthTokenPayload, type Permission, PrincipalType, type SystemRoleDefinition } from '@vertesia/common';
-import { ErrorBox, errorMessage, useFetch } from '@vertesia/ui/core';
+import { Button, errorMessage, Spinner } from '@vertesia/ui/core';
 import { useUITranslation } from '@vertesia/ui/i18n';
 import { useUserSession } from '@vertesia/ui/session';
 import { createContext, useContext, useMemo } from 'react';
 import { isAnyOf } from './helpers';
+import { roleMappingsErrorStatus, useRoleMappings } from './useRoleMappings';
 
 type ListRolesResponse = SystemRoleDefinition[];
 
@@ -68,35 +69,81 @@ export function useUserPermissions() {
 
 interface UserPermissionProviderProps {
     children: React.ReactNode;
+    loadingIcon?: React.ReactNode;
 }
-export function UserPermissionProvider({ children }: UserPermissionProviderProps) {
+export function UserPermissionProvider({ children, loadingIcon }: UserPermissionProviderProps) {
     const { t } = useUITranslation();
     const session = useUserSession();
     const authToken = session.authToken;
-    const shouldFetchRoleMappings = Boolean(authToken && !authToken.permissions);
-    const { data, error, isLoading } = useFetch<ListRolesResponse | undefined>(() => {
-        if (shouldFetchRoleMappings) {
-            return session.client.iam.roles.listSystem();
-        }
-        return Promise.resolve(undefined);
-    }, [session.client, authToken, shouldFetchRoleMappings]);
+    const { state, retry } = useRoleMappings(session.client, authToken);
 
     const perms = useMemo(() => {
-        if (authToken) {
-            if (authToken.permissions || !shouldFetchRoleMappings) {
-                return new UserPermissions(authToken);
-            }
-            if (data && !isLoading) {
-                return new UserPermissions(authToken, data);
-            }
-        } else {
-            return undefined;
+        if (!authToken) return undefined;
+        if (authToken.permissions) {
+            return new UserPermissions(authToken);
+        }
+        if (state.status === 'ready') {
+            return new UserPermissions(authToken, state.roles);
         }
         return undefined;
-    }, [authToken, data, isLoading, shouldFetchRoleMappings]);
+    }, [authToken, state]);
 
-    if (error) {
-        return <ErrorBox title={t('store.failedToFetchRoleMappings')}>{errorMessage(error)}</ErrorBox>;
+    if (authToken && !perms) {
+        const failed = state.status === 'error';
+        const status = failed ? roleMappingsErrorStatus(state.error) : undefined;
+        const needsSignIn = status === 401;
+        const denied = status === 403;
+        const title = needsSignIn
+            ? t('auth.recovery.credential.title')
+            : denied
+              ? t('shell.accessDenied')
+              : failed
+                ? t('permissions.connectionFailed')
+                : t('permissions.connecting');
+        return (
+            <div className="flex min-h-dvh items-center justify-center bg-background px-6 text-foreground">
+                <div className="w-full max-w-md space-y-6 text-center">
+                    <div aria-hidden="true" className="flex justify-center">
+                        {loadingIcon || (!failed && <Spinner size="2xl" className="text-primary" />)}
+                    </div>
+                    <div
+                        role={failed ? 'alert' : 'status'}
+                        aria-live={failed ? 'assertive' : 'polite'}
+                        className="space-y-2"
+                    >
+                        <h1 className="text-xl font-semibold">{title}</h1>
+                        <p className="text-muted">
+                            {needsSignIn
+                                ? t('auth.recovery.credential.body')
+                                : denied
+                                  ? t('permissions.accessDenied')
+                                  : failed
+                                    ? t('permissions.tryAgainLater')
+                                    : state.status === 'retrying'
+                                      ? t('permissions.retrying')
+                                      : t('permissions.loadingPermissions')}
+                        </p>
+                    </div>
+                    {failed && (
+                        <>
+                            <Button variant="outline" onClick={needsSignIn || denied ? () => session.signOut() : retry}>
+                                {needsSignIn || denied
+                                    ? t('auth.recovery.useDifferentAccount')
+                                    : t('auth.recovery.tryAgain')}
+                            </Button>
+                            {state.error != null && (
+                                <details className="text-start text-sm text-muted">
+                                    <summary className="cursor-pointer">{t('auth.recovery.technicalDetails')}</summary>
+                                    <pre className="mt-2 max-h-48 overflow-auto whitespace-pre-wrap wrap-break-word">
+                                        {errorMessage(state.error)}
+                                    </pre>
+                                </details>
+                            )}
+                        </>
+                    )}
+                </div>
+            </div>
+        );
     }
 
     return perms && <UserPermissionsContext.Provider value={perms}>{children}</UserPermissionsContext.Provider>;

package/src/features/permissions/useRoleMappings.ts

@@ -0,0 +1,105 @@
+import type { VertesiaClient } from '@vertesia/client';
+import type { AuthTokenPayload, SystemRoleDefinition } from '@vertesia/common';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+type RoleMappingsState =
+    | { status: 'loading' | 'retrying' }
+    | { status: 'ready'; roles: SystemRoleDefinition[] }
+    | { status: 'error'; error?: unknown };
+
+export function roleMappingsErrorStatus(error: unknown): number | undefined {
+    if (error && typeof error === 'object' && 'status' in error && typeof error.status === 'number') {
+        return error.status;
+    }
+    return undefined;
+}
+
+function isTransient(error: unknown): boolean {
+    const status = roleMappingsErrorStatus(error);
+    return (
+        status === 0 ||
+        status === 502 ||
+        status === 503 ||
+        status === 504 ||
+        (error instanceof Error && error.name === 'TimeoutError')
+    );
+}
+
+/** Each session gets an independent, cancellable recovery window. Never reuse another session's roles. */
+export function useRoleMappings(client: VertesiaClient, authToken?: AuthTokenPayload) {
+    // UserSession.rawAuthToken decodes the cached JWT on each authenticated request.
+    // Object identity would restart recovery on every failure (or success), forever.
+    // Preserve all claims in the identity: subject/account/expiry can stay the same
+    // when project, roles, or other authorization claims change.
+    const tokenKey = useMemo(() => (authToken ? JSON.stringify(authToken) : undefined), [authToken]);
+    const needsMappings = Boolean(authToken && !authToken.permissions);
+    const [attempt, setAttempt] = useState(0);
+    const [result, setResult] = useState<{
+        client: VertesiaClient;
+        tokenKey: string | undefined;
+        attempt: number;
+        state: RoleMappingsState;
+    }>();
+    const retry = useCallback(() => setAttempt((value) => value + 1), []);
+
+    useEffect(() => {
+        if (!needsMappings) return;
+
+        const controller = new AbortController();
+        let stopped = false;
+        let failures = 0;
+        let lastError: unknown;
+        let retryTimer: ReturnType<typeof setTimeout> | undefined;
+        const update = (state: RoleMappingsState) => setResult({ client, tokenKey, attempt, state });
+        const stop = () => {
+            stopped = true;
+            clearTimeout(slowTimer);
+            clearTimeout(deadlineTimer);
+            clearTimeout(retryTimer);
+            controller.abort();
+        };
+        const slowTimer = setTimeout(() => update({ status: 'retrying' }), 5_000);
+        // Bound the whole recovery window, including requests that never settle.
+        const deadlineTimer = setTimeout(() => {
+            stop();
+            update({ status: 'error', error: lastError });
+        }, 60_000);
+
+        const fetchRoles = async () => {
+            try {
+                const roles = await client.iam.roles.listSystem({
+                    signal: controller.signal,
+                    timeoutMs: 15_000,
+                    // This hook owns backoff and the overall deadline, not the client's retry policy.
+                    retryPolicy: false,
+                });
+                if (stopped) return;
+                stop();
+                update({ status: 'ready', roles });
+            } catch (error) {
+                if (stopped) return;
+                lastError = error;
+                if (!isTransient(error)) {
+                    stop();
+                    update({ status: 'error', error });
+                    return;
+                }
+                update({ status: 'retrying' });
+                const delay = Math.min(1_000 * 2 ** failures++, 8_000) * (0.5 + Math.random() * 0.5);
+                retryTimer = setTimeout(() => {
+                    void fetchRoles();
+                }, delay);
+            }
+        };
+
+        update({ status: 'loading' });
+        void fetchRoles();
+        return stop;
+    }, [client, tokenKey, needsMappings, attempt]);
+
+    const state: RoleMappingsState =
+        result?.client === client && result.tokenKey === tokenKey && result.attempt === attempt
+            ? result.state
+            : { status: 'loading' };
+    return { state, retry };
+}

package/src/features/store/collections/SelectCollection.tsx

@@ -217,7 +217,7 @@ export function SelectCollection({
                             placeholder={resolvedSearchPlaceholder}
                             value={searchQuery}
                             onValueChange={handleSearchChange}
-                            className="flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+                            className="flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted disabled:cursor-not-allowed disabled:opacity-50"
                         />
                         {isSearching && (
                             <div className="me-2 h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />

package/src/features/store/objects/DocumentPreviewPanel.tsx

@@ -127,13 +127,13 @@ export function DocumentPreviewPanel({ objectId, isOpen, onClose }: DocumentPrev
 
     return (
         <div
-            className={`fixed inset-y-0 end-0 w-2/5 dark:bg-slate-900 shadow-xl z-50 flex flex-col transition-transform duration-300 transform ${panelTranslateClass}`}
+            className={`fixed inset-y-0 end-0 w-2/5 dark:bg-muted shadow-xl z-50 flex flex-col transition-transform duration-300 transform ${panelTranslateClass}`}
         >
             {/* Header */}
-            <div className="flex items-center justify-between px-4 py-3 border-b dark:border-gray-700 bg-gradient-to-r from-indigo-50 to-gray-50 dark:from-gray-800 dark:to-gray-900">
+            <div className="flex items-center justify-between px-4 py-3 border-b dark:border-border bg-gradient-to-r from-indigo-50 to-gray-50 dark:from-gray-800 dark:to-gray-900">
                 <div className="flex items-center">
-                    <FileText className="h-5 w-5 text-indigo-600 me-2" />
-                    <h2 className="text-lg font-semibold text-gray-800 dark:text-gray-200 truncate">
+                    <FileText className="h-5 w-5 text-primary me-2" />
+                    <h2 className="text-lg font-semibold text-foreground truncate">
                         {isLoading ? t('store.loadingDocument') : object?.name || t('store.documentPreview')}
                     </h2>
                 </div>
@@ -142,7 +142,7 @@ export function DocumentPreviewPanel({ objectId, isOpen, onClose }: DocumentPrev
                         variant="ghost"
                         size="sm"
                         onClick={handleViewFullDocument}
-                        className="flex items-center gap-1 text-indigo-600 hover:text-indigo-800"
+                        className="flex items-center gap-1 text-primary hover:text-primary"
                     >
                         <Maximize2 className="h-4 w-4" />
                         <span>{t('store.fullView')}</span>
@@ -151,7 +151,7 @@ export function DocumentPreviewPanel({ objectId, isOpen, onClose }: DocumentPrev
                         variant="ghost"
                         size="sm"
                         onClick={onClose}
-                        className="flex items-center text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100"
+                        className="flex items-center text-muted hover:text-foreground dark:text-foreground"
                     >
                         <X className="h-5 w-5" />
                     </Button>
@@ -162,8 +162,8 @@ export function DocumentPreviewPanel({ objectId, isOpen, onClose }: DocumentPrev
             {isLoading ? (
                 <div className="flex-1 flex items-center justify-center">
                     <div className="text-center">
-                        <Spinner size="lg" className="text-indigo-600 dark:text-indigo-400 mb-2" />
-                        <p className="text-gray-600 dark:text-gray-400">{t('store.loadingDocument')}</p>
+                        <Spinner size="lg" className="text-primary mb-2" />
+                        <p className="text-muted">{t('store.loadingDocument')}</p>
                     </div>
                 </div>
             ) : (
@@ -175,8 +175,8 @@ export function DocumentPreviewPanel({ objectId, isOpen, onClose }: DocumentPrev
                                 variant="unstyled"
                                 className={`py-2 px-4 font-medium border-b-2 ${
                                     currentTab === 'preview'
-                                        ? 'border-indigo-600 text-indigo-700 dark:text-indigo-300'
-                                        : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'
+                                        ? 'border-primary text-primary'
+                                        : 'border-transparent text-muted hover:text-foreground'
                                 }`}
                                 onClick={() => setCurrentTab('preview')}
                             >
@@ -189,8 +189,8 @@ export function DocumentPreviewPanel({ objectId, isOpen, onClose }: DocumentPrev
                                 variant="unstyled"
                                 className={`py-2 px-4 font-medium border-b-2 ${
                                     currentTab === 'properties'
-                                        ? 'border-indigo-600 text-indigo-700 dark:text-indigo-300'
-                                        : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'
+                                        ? 'border-primary text-primary'
+                                        : 'border-transparent text-muted hover:text-foreground'
                                 }`}
                                 onClick={() => setCurrentTab('properties')}
                             >
@@ -209,16 +209,16 @@ export function DocumentPreviewPanel({ objectId, isOpen, onClose }: DocumentPrev
                                 {/* Text/Markdown Content */}
                                 {loadingText ? (
                                     <div className="flex items-center justify-center h-40">
-                                        <Spinner size="md" className="text-indigo-600 dark:text-indigo-400" />
+                                        <Spinner size="md" className="text-primary" />
                                     </div>
                                 ) : text ? (
-                                    <div className="shadow rounded-md p-4 border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
+                                    <div className="shadow rounded-md p-4 border border-border bg-white dark:bg-muted">
                                         {seemsMarkdown ? (
-                                            <div className="prose prose-sm max-w-none prose-p:my-2 prose-pre:bg-gray-800 prose-pre:my-2 prose-headings:text-indigo-700 dark:prose-invert dark:prose-headings:text-indigo-300">
+                                            <div className="prose prose-sm max-w-none prose-p:my-2 prose-pre:bg-muted prose-pre:my-2 prose-headings:text-primary dark:prose-invert">
                                                 <MarkdownRenderer>{text}</MarkdownRenderer>
                                             </div>
                                         ) : (
-                                            <pre className="text-wrap whitespace-pre-wrap dark:text-gray-200">
+                                            <pre className="text-wrap whitespace-pre-wrap dark:text-foreground">
                                                 {text}
                                             </pre>
                                         )}
@@ -229,7 +229,7 @@ export function DocumentPreviewPanel({ objectId, isOpen, onClose }: DocumentPrev
                                 {isImage && (
                                     <div className="mt-4">
                                         {imageUrl ? (
-                                            <div className="border border-gray-200 dark:border-gray-700 rounded-md p-2 bg-white dark:bg-gray-800">
+                                            <div className="border border-border rounded-md p-2 bg-white dark:bg-muted">
                                                 <img
                                                     src={imageUrl}
                                                     alt={object?.name}
@@ -238,7 +238,7 @@ export function DocumentPreviewPanel({ objectId, isOpen, onClose }: DocumentPrev
                                             </div>
                                         ) : (
                                             <div className="flex items-center justify-center h-40">
-                                                <Spinner size="md" className="text-indigo-600 dark:text-indigo-400" />
+                                                <Spinner size="md" className="text-primary" />
                                             </div>
                                         )}
                                     </div>
@@ -246,14 +246,12 @@ export function DocumentPreviewPanel({ objectId, isOpen, onClose }: DocumentPrev
 
                                 {/* PDF Content Notice */}
                                 {isPdf && (
-                                    <div className="flex flex-col items-center justify-center h-64 border border-gray-200 dark:border-gray-700 rounded-md p-4 bg-gray-50 dark:bg-gray-800">
-                                        <FileText className="h-16 w-16 text-indigo-300 dark:text-indigo-400 mb-4" />
-                                        <p className="text-gray-600 dark:text-gray-400 text-center mb-4">
-                                            {t('store.pdfPreviewFullView')}
-                                        </p>
+                                    <div className="flex flex-col items-center justify-center h-64 border border-border rounded-md p-4 bg-muted">
+                                        <FileText className="h-16 w-16 text-primary mb-4" />
+                                        <p className="text-muted text-center mb-4">{t('store.pdfPreviewFullView')}</p>
                                         <Button
                                             onClick={handleViewFullDocument}
-                                            className="bg-indigo-600 hover:bg-indigo-700 text-white"
+                                            className="bg-primary hover:bg-primary text-white"
                                         >
                                             {t('store.openFullDocumentView')}
                                         </Button>
@@ -262,11 +260,9 @@ export function DocumentPreviewPanel({ objectId, isOpen, onClose }: DocumentPrev
 
                                 {/* No Content Notice */}
                                 {!isImage && !text && !isPdf && !loadingText && (
-                                    <div className="flex flex-col items-center justify-center h-64 border border-gray-200 dark:border-gray-700 rounded-md p-4 bg-gray-50 dark:bg-gray-800">
-                                        <FileText className="h-16 w-16 text-gray-300 dark:text-gray-600 mb-4" />
-                                        <p className="text-gray-600 dark:text-gray-400 text-center">
-                                            {t('store.noPreviewAvailable')}
-                                        </p>
+                                    <div className="flex flex-col items-center justify-center h-64 border border-border rounded-md p-4 bg-muted">
+                                        <FileText className="h-16 w-16 text-foreground dark:text-muted mb-4" />
+                                        <p className="text-muted text-center">{t('store.noPreviewAvailable')}</p>
                                     </div>
                                 )}
                             </div>
@@ -275,56 +271,50 @@ export function DocumentPreviewPanel({ objectId, isOpen, onClose }: DocumentPrev
                         {currentTab === 'properties' && object && (
                             <div className="h-full">
                                 {object.properties ? (
-                                    <div className="shadow rounded-md p-4 border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
+                                    <div className="shadow rounded-md p-4 border border-border bg-white dark:bg-muted">
                                         <JSONDisplay value={object.properties} />
                                     </div>
                                 ) : (
-                                    <div className="flex flex-col items-center justify-center h-64 border border-gray-200 dark:border-gray-700 rounded-md p-4 bg-gray-50 dark:bg-gray-800">
-                                        <Info className="h-16 w-16 text-gray-300 dark:text-gray-600 mb-4" />
-                                        <p className="text-gray-600 dark:text-gray-400 text-center">
-                                            {t('store.noPropertiesAvailable')}
-                                        </p>
+                                    <div className="flex flex-col items-center justify-center h-64 border border-border rounded-md p-4 bg-muted">
+                                        <Info className="h-16 w-16 text-foreground dark:text-muted mb-4" />
+                                        <p className="text-muted text-center">{t('store.noPropertiesAvailable')}</p>
                                     </div>
                                 )}
 
                                 <div className="mt-4">
-                                    <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
+                                    <h3 className="text-sm font-semibold text-foreground mb-2">
                                         {t('store.documentInformation')}
                                     </h3>
-                                    <div className="shadow rounded-md p-4 border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
+                                    <div className="shadow rounded-md p-4 border border-border bg-white dark:bg-muted">
                                         <div className="grid grid-cols-2 gap-y-2 gap-x-4 text-sm">
-                                            <div className="text-gray-500 dark:text-gray-400">{t('store.id')}</div>
-                                            <div className="font-medium dark:text-gray-200">{object.id}</div>
+                                            <div className="text-muted">{t('store.id')}</div>
+                                            <div className="font-medium dark:text-foreground">{object.id}</div>
 
-                                            <div className="text-gray-500 dark:text-gray-400">
-                                                {t('store.contentType')}
-                                            </div>
-                                            <div className="font-medium dark:text-gray-200">
+                                            <div className="text-muted">{t('store.contentType')}</div>
+                                            <div className="font-medium dark:text-foreground">
                                                 {object.type?.name || t('store.unknown')}
                                             </div>
 
-                                            <div className="text-gray-500 dark:text-gray-400">
-                                                {t('store.contentType')}
-                                            </div>
-                                            <div className="font-medium dark:text-gray-200">
+                                            <div className="text-muted">{t('store.contentType')}</div>
+                                            <div className="font-medium dark:text-foreground">
                                                 {object.content?.type || t('store.na')}
                                             </div>
 
-                                            <div className="text-gray-500">{t('store.size')}</div>
+                                            <div className="text-muted">{t('store.size')}</div>
                                             <div className="font-medium">
                                                 {object.content && 'size' in object.content
                                                     ? formatFileSize(object.content.size as number)
                                                     : t('store.unknown')}
                                             </div>
 
-                                            <div className="text-gray-500">{t('store.created')}</div>
+                                            <div className="text-muted">{t('store.created')}</div>
                                             <div className="font-medium">
                                                 {object.created_at
                                                     ? new Date(object.created_at).toLocaleString()
                                                     : t('store.na')}
                                             </div>
 
-                                            <div className="text-gray-500">{t('store.updated')}</div>
+                                            <div className="text-muted">{t('store.updated')}</div>
                                             <div className="font-medium">
                                                 {object.updated_at
                                                     ? new Date(object.updated_at).toLocaleString()
@@ -340,7 +330,7 @@ export function DocumentPreviewPanel({ objectId, isOpen, onClose }: DocumentPrev
             )}
 
             {/* Footer actions */}
-            <div className="flex items-center justify-between p-4 border-t bg-gray-50 dark:bg-gray-800 dark:border-gray-700">
+            <div className="flex items-center justify-between p-4 border-t bg-muted dark:border-border">
                 <div>
                     {object?.content?.source && (
                         <Button
@@ -363,14 +353,14 @@ export function DocumentPreviewPanel({ objectId, isOpen, onClose }: DocumentPrev
                                 }
                             }}
                             variant="outline"
-                            className="text-indigo-600 border-indigo-300 hover:bg-indigo-50"
+                            className="text-primary border-primary hover:bg-info"
                         >
                             <Download className="h-4 w-4 me-2" />
                             {t('pdf.download')}
                         </Button>
                     )}
                 </div>
-                <Button onClick={handleViewFullDocument} className="bg-indigo-600 hover:bg-indigo-700 text-white">
+                <Button onClick={handleViewFullDocument} className="bg-primary hover:bg-primary text-white">
                     {t('store.openFullDocument')}
                     <ChevronRight className="h-4 w-4 ms-2 cn-rtl-flip" />
                 </Button>