@iblai/iblai-js 2.17.1 → 2.18.0

package/dist/web-containers/source/next/index.esm.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { useState, useEffect, forwardRef, createElement as createElement$3, useLayoutEffect, createContext, useContext, useMemo, useReducer, useRef, useImperativeHandle, useCallback, isValidElement, Children, PureComponent, cloneElement, Component as Component$1, useId as useId$2, useDebugValue, lazy, Suspense } from 'react';
+import React__default, { useState, useEffect, forwardRef, createElement as createElement$3, useLayoutEffect, createContext, useContext, useMemo, useReducer, useRef, useImperativeHandle, useCallback, isValidElement, Children, PureComponent, cloneElement, Component as Component$1, Fragment as Fragment$2, useId as useId$2, useDebugValue, lazy, Suspense } from 'react';
 import * as dataLayer from '@iblai/data-layer';
-import { useGetUserMetadataQuery, useGetUserMetadataEdxQuery, useGetUserProfileSummaryQuery, useUpdateUserMetadataMutation, useUpdateUserMetadataEdxMutation, useUploadProfileImageMutation, useResetPasswordMutation, useSelfRetireMutation, useCreateUserInstitutionMutation, useGetUserInstitutionsQuery, useCreateUserEducationMutation, useUpdateUserEducationMutation, useDeleteUserEducationMutation, useGetUserEducationQuery, useCreateUserCompanyMutation, useGetUserCompaniesQuery, useCreateUserExperienceMutation, useUpdateUserExperienceMutation, useDeleteUserExperienceMutation, useGetUserExperienceQuery, useGetUserResumeQuery, useCreateUserResumeMutation, useGetMySubscriptionsQuery, useGetItemSubscriptionQuery, useCancelSubscriptionMutation, useGetLearnerDetailsQuery, useGetUserEnrolledCoursesQuery, useGetUserEnrolledProgramsQuery, useGetUserCatalogPathwaysQuery, useGetUsersAsAssertionsQuery, useGetUserEarnedSkillsQuery, useGetUserReportedSkillsQuery, useGetUserDesiredSkillsQuery, useCreateGlobalMemoryMutation, useUpdateGlobalMemoryMutation, useUpdateMentorMemoryMutation, useGetMemsearchStatusQuery, useGetUserMemorySettingsQuery, useUpdateUserMemorySettingsMutation, useGetGlobalMemoriesQuery, useGetAllMentorMemoriesQuery, useDeleteGlobalMemoryMutation, useDeleteMentorMemoryMutation, useGetAiSearchMentorsQuery, useStarMentorMutation, useUnstarMentorMutation, useGetUserChatHistoryReportsQuery, USER_CHAT_HISTORY_REPORT_ACTIVE_STATES, useCreateUserChatHistoryReportMutation, useLazyGetDownloadReportFromURLQuery, useGetUserChatHistoryReportStatusQuery, userChatHistoryApiSlice, USER_CHAT_HISTORY_QUERY_KEYS, useGetUserChatHistoryQuery, useGetUserChatHistoryFilterQuery, useGetMentorsQuery, useGetUserChatHistorySessionQuery, useInviteUserMutation, usePlatformInvitationsQuery, useCreateCatalogInvitationCourseBulkMutation, useGetCatalogInvitationsCourseQuery, useLazyPlatformUsersQuery, useLazyPlatformUserGroupsQuery, useGetPersonnalizedSearchQuery, useCreateCatalogInvitationProgramBulkMutation, useGetCatalogInvitationsProgramQuery, useGetVectorDocumentsQuery, useGetLlmsQuery, useUpdateUserRoleMutation, useUpdateUserStatusMutation, useUpdatePlatformUserRoleWithPoliciesMutation, usePlatformUsersQuery, useGetAccessibleUsersQuery, isPoliciesResponse, platformApiSlice, featureTags, useLazyGetRbacTeamsAccessListQuery, useCreateRbacTeamsAccessMutation, useGetRbacGroupsQuery, usePlatformUserGroupsQuery, useCreateRbacGroupMutation, useUpdateRbacGroupMutation, useDeleteRbacGroupMutation, useCreatePlatformUserGroupMutation, useUpdatePlatformUserGroupMutation, useDeletePlatformUserGroupMutation, useGetRbacGroupDetailsQuery, useGetPlatformUserGroupDetailsQuery, useGetRbacPermissionsMutation, useGetRbacRolesQuery, useCreateRbacRoleMutation, useUpdateRbacRoleMutation, useDeleteRbacRoleMutation, useGetRbacRoleDetailsQuery, useGetRbacActionsDefinitionQuery, useGetRbacResourceDiscoveryQuery, useGetRbacResourceListQuery, useGetRbacPoliciesQuery, useCreateRbacPolicyMutation, useUpdateRbacPolicyMutation, useDeleteRbacPolicyMutation, useGetRbacPolicyDetailsQuery, useGetWatchedGroupsQuery, useCreateWatchedGroupMutation, useUpdateWatchedGroupMutation, useDeleteWatchedGroupMutation, useAddWatchedUserMutation, useRemoveWatchedUserMutation, useAddWatcherMutation, useUpdateWatcherMutation, useDeleteWatcherMutation, useGetWatchedUsersQuery, useGetWatchersQuery, WATCHER_NOTIFICATION_EVENTS, WATCHER_NOTIFICATION_EVENT_LABELS, useGetApplicationFormsQuery, useGetApplicationFormDetailQuery, useCreateApplicationFormMutation, useUpdateApplicationFormMutation, useGetApplicationAdminDetailQuery, useInviteApplicationCandidateMutation, useLazyGetApplicationAttachmentFileQuery, useCreateApplicationWaiverMutation, useDeleteApplicationWaiverMutation, useSubmitApplicationOverrideMutation, useUpdateApplicationPlacementMutation, useDeleteApplicationCourseAssignmentMutation, useCreateApplicationNoteMutation, useUpdateApplicationNoteMutation, useDeleteApplicationNoteMutation, useTransitionApplicationMutation, useLinkApplicationCandidateMutation, useCreateApplicationPlacementsMutation, useGetCustomMentorsQuery, useCreateApplicationCourseAssignmentsMutation, useGetApplicationBlocksQuery, useDeleteApplicationBlockMutation, useGetApplicationsPipelineStatsQuery, useGetApplicationsPipelineQuery, useGetTenantMetadataQuery, useUpdateTenantMetadataMutation, useLazyGetTenantMetadataQuery, useDeleteApiKeyMutation, useGetApiKeyQuery, useGetApiKeyFieldPermissionsQuery, useUpdateApiKeyMutation, useGetApiKeysQuery, unwrapApiTokenList, useCreateApiKeyMutation, useCreateLLMCredentialMutation, useGetCredentialsSchemaQuery, useGetMaskedLLMCredentialsQuery, useDeleteIntegrationCredentialMutation, useDeleteCredentialMutation, useCreateIntegrationCredentialMutation, useGetIntegrationCredentialsSchemaQuery, useGetMaskedIntegrationCredentialsQuery, useGetAccountBillingInfoQuery, useUpdateAutoRechargeInfoMutation, useTriggerAutoRechargeMutation, useGetAgentSpendCapQuery, useGetTenantSpendCapQuery, useListAgentUserSpendCapsQuery, useUpsertAgentSpendCapMutation, useDeleteAgentSpendCapMutation, useUpsertTenantSpendCapMutation, useDeleteTenantSpendCapMutation, useUpsertUserSpendCapMutation, useDeleteUserSpendCapMutation, useGetLlmUsageMetricsQuery, useListAgentSpendCapsQuery, useGetCreditTransactionsQuery, useCreateStripeCustomerPortalMutation, useSetPlatformConfigurationsMutation, useGetPlatformConfigurationsQuery, useUpdatePlatformMembershipMutation, useGetPlatformMembershipQuery, useGetCustomDomainsQuery, useCreateCustomDomainMutation, useDeleteCustomDomainMutation, useGetStudentMentorCreationStatusQuery, useSetStudentMentorCreationStatusMutation, coreApiSlice, recommendationPromptTypeEnum, useGetRecommendedPromptsListQuery, useCreateRecommendedPromptMutation, useUpdateRecommendedPromptMutation, useDeleteRecommendedPromptMutation, useLazyGetPublicPlatformImageAssetFileUrlQuery, useCreatePlatformImageAssetMutation, useGetProviderConfigQuery, useCreateProviderConfigMutation, useDeleteProviderConfigMutation, useGetExternalMappingQuery, useGetCredentialsListQuery, useCreateExternalMappingMutation, useDeleteExternalMappingMutation, useGetMemsearchConfigQuery, useUpdateMemsearchConfigMutation, useGetStripeConnectStatusQuery, useStartStripeConnectOnboardingMutation, useLazyGetStripeConnectDashboardQuery, useListPaywallsQuery, useListPricesQuery, useCreatePriceMutation, useUpdatePriceMutation, useDeletePriceMutation, useGetPaywallConfigQuery, useEnablePaywallMutation, useUpdatePaywallMutation, useGetMentorMemoriesListQuery, useGetMemoryCategoriesAdminQuery, useCreateMentorMemoryMutation, useLazyGetCourseMetaDataQuery, useLazyGetCourseCompletionOutlinesQuery, useLazyGetCourseEligibilityQuery, useLazyGetEdxSSOTokenQuery, useCreateCourseEnrollmentMutation, useCreateStripeCheckoutSessionMutation, useLazyGetCourseProgressQuery, useLazyGetCourseCompletionQuery, useUpdateExamAttemptMutation, useStartExamMutation, useLazyGetExamInfoQuery, useGetAgentSkillResourcesQuery, useCreateAgentSkillResourceMutation, useUpdateAgentSkillResourceMutation, useUploadAgentSkillResourceAssetMutation, useDeleteAgentSkillResourceMutation, useGetMentorSkillAssignmentsQuery, useGetAgentSkillsQuery, useCreateMentorSkillAssignmentMutation, useUpdateMentorSkillAssignmentMutation, useDeleteMentorSkillAssignmentMutation, useCreateAgentSkillMutation, useUpdateAgentSkillMutation, useDeleteAgentSkillMutation, filterSlashSkills, useGetMentorSkillAssignmentsInfiniteQuery, MENTOR_SKILL_ASSIGNMENTS_PAGE_SIZE, useUpdateUserProjectMutation, useGetTrainingDocumentsQuery, useLazyGetConnectedServiceAuthUrlQuery, useCreateUserProjectMutation, useDeleteUserProjectMutation, useGetUserProjectDetailsQuery, useEditTrainingDocumentMutation, useAddTrainingDocumentMutation, useLazyGetCredentialsQuery, useGetMentorSettingsQuery, useEditMentorMutation, useUploadLightLogoMutation, useUploadDarkLogoMutation, useUpdatePlatformInfoMutation, LOGO_ENDPOINTS, useCreateEvalDatasetMutation, useAddEvalDatasetItemsMutation, useUploadEvalDatasetCsvMutation, useDeleteEvalDatasetItemMutation, useListEvalDatasetItemsQuery, evalTotalPages, useListEvalDatasetsQuery, useGetUserProjectsQuery, useCreateSessionIdMutation, useGetMentorCategoriesQuery, useGetTenantChatPrivacyConfigQuery as useGetTenantChatPrivacyConfigQuery$1, useGetCallConfigurationsQuery, useCreateCallConfigurationMutation, useUpdateCallConfigurationMutation, chatPrivacyApiSlice, useDeleteMentorMutation, useForkMentorMutation, useGetToolsQuery, useLazyGetMCPServersQuery, useOauthFindMutation, useLazyStartOAuthFlowQuery, useCreateMCPServerMutation, usePartialUpdateMCPServerMutation, useCreateMCPServerConnectionMutation, usePatchMCPServerConnectionMutation, useGetConnectedServicesQuery, useGetMCPServersQuery, useGetMCPServerConnectionsQuery, useUpdateMCPServerMutation, useDeleteMCPServerMutation, useEditMentorJsonMutation, useDisconnectServiceMutation, useGetPromptCategoriesQuery, PRIVACY_ACTIONS, PRIVACY_ENTITY_TYPES, useGetVoicesQuery, useGetVoiceQuery, isBaseAgentMentor, useGetGradeResultQuery, useOverrideGradeResultMutation, useGetChatHistoryFilterQuery, useListGradeResultsQuery, useGetMentorGraderConfigurationQuery, useListGraderCriteriaQuery, useCreateMentorGraderConfigurationMutation, useUpdateMentorGraderConfigurationMutation, useCreateGraderCriterionMutation, useUpdateGraderCriterionMutation, useDeleteGraderCriterionMutation, useGetSpendCapStatusQuery, useGetMentorPublicSettingsQuery, useGetChatHistoryQuery, useGetMentorSummariesQuery, useGetConversationMemoriesQuery, useGetSupportTicketsQuery, useGetSupportTicketMessagesQuery, useCreateSupportTicketMessageMutation, usePatchSupportTicketMutation, useCloseSupportTicketMutation, useCreateLtiMentorMutation, useUpdateLtiMentorMutation, useGetLtiMentorsQuery, useDeleteLtiMentorMutation, useCreateLtiKeyMutation, useUpdateLtiKeyMutation, useDeleteLtiKeyMutation, useGetLtiKeysQuery, useCreateLtiToolMutation, useUpdateLtiToolMutation, useGetLtiToolsQuery, useGetPlatformInfoQuery, useCreatePromptMutation, useGetPromptsSearchQuery, useUpdatePromptMutation, useCreateRedirectTokenMutation, useGetShareableLinkQuery, useCreateShareableLinkMutation, useUpdateShareableLinkMutation, useCreateDisclaimerMutation, useUpdateDisclaimerMutation, useGetDisclaimersQuery, useUpdateRbacMentorAccessMutation, useGetRbacMentorAccessListQuery, useStartEvalRunMutation, useEvaluateEvalRunMutation, useGetEvalRunQuery, useDeleteEvalScoreMutation, useListEvalRunJudgesQuery, useCreateEvalScoreMutation, useDeleteEvalRunMutation, useExportEvalRunMutation, useListEvalRunsQuery, useLazyGetEvalRunQuery, evaluationsApiSlice, EVALUATIONS_TAGS, useGetPersonnalizedMentorsQuery, useCreateCallCredentialsMutation, useGetGuidedPromptsQuery, useUpdateChatSessionSharedMutation, useUpdateMessageFeedbackMutation, useLazyGetPromptsSearchQuery, useLazyGetGuidedPromptsQuery, useGetPublicMentorsQuery, useGetPeriodicAgentsQuery, useGetPeriodicAgentLogsListQuery, useCreatePeriodicAgentMutation, useDeletePeriodicAgentMutation, useCreateMemoryCategoryMutation, useUpdateMemoryCategoryMutation, useDeleteMemoryCategoryMutation, useDeletePromptMutation, useDeleteTrainingDocumentMutation, useGetTrainingDocumentRetrainScheduleQuery, useCreateTrainingDocumentRetrainScheduleMutation, useUpdateArtifactMutation, useLazyGetArtifactVersionQuery, useLazyListArtifactVersionsQuery, useSetCurrentVersionMutation, useListArtifactVersionsQuery, useLazyGetArtifactQuery, useLazyListArtifactsQuery, useEditSessionMutation } from '@iblai/data-layer';
-import { removeAuthItem, setAuthItem, isTauriEmbeddedLLMHost, selectRbacPermissions, useCurrentTenant, canViewOtherUsersChatHistory, getInitials, useTenantMetadata, useUsername, selectStreaming, isLoggedIn, TOOL_NAME_MAP, WRITE_TODOS_TOOL, isPureWatcher, WithPermissions, canWriteField, useStripeUpgrade, openExternalUrl, CHAT_AREA_SIZE, isAlphaNumeric32, checkRbacPermission, selectNumberOfActiveChatMessages, TOOLS, hasRemoteAiConfig, isSafariBrowser, useShowAttachment, useShowVoiceCall, useShowVoiceRecorder, useMentorSettings, selectShowingSharedChat, useShowFreeTrialDialog, useEmbedMode, chatInputSliceSelectors, useResponsive, useAccessingPublicRoute, useVisitingTenant, useModelFileUploadCapabilities, useChatFileUpload, useVoiceChat, selectAttachedFiles, MENTOR_CHAT_DOCUMENTS_EXTENSIONS, removeFile, chatInputSliceActions, chatActions, WithFormPermissions, useTenantContext, TimeTracker, advancedTabsProperties, defaultSessionIds, pickWritableFields, ANONYMOUS_USERNAME as ANONYMOUS_USERNAME$3, redirectToAuthSpaJoinTenant, selectActiveTab, useAxdToken, useWelcomeMessage, markdownToPlainText, useCachedSessionId, use402ErrorCheck, use401TokenRefresh, selectTokenEnabled, selectToken, useServiceWorker, useUserAgreement, useAdvancedChat, sendMessageToParentWebsite, useMentorTools, useFileDragDrop, eventBus, RemoteEvents, selectEnableChatActionsPopup, advancedTabs, isInIframe, getAuthSpaJoinUrl, addMessage, clearFiles, MENTOR_VISIBILITY } from '@iblai/web-utils';
+import { useGetUserMetadataQuery, useGetUserMetadataEdxQuery, useGetUserProfileSummaryQuery, useUpdateUserMetadataMutation, useUpdateUserMetadataEdxMutation, useUploadProfileImageMutation, useResetPasswordMutation, useSelfRetireMutation, useCreateUserInstitutionMutation, useGetUserInstitutionsQuery, useCreateUserEducationMutation, useUpdateUserEducationMutation, useDeleteUserEducationMutation, useGetUserEducationQuery, useCreateUserCompanyMutation, useGetUserCompaniesQuery, useCreateUserExperienceMutation, useUpdateUserExperienceMutation, useDeleteUserExperienceMutation, useGetUserExperienceQuery, useGetUserResumeQuery, useCreateUserResumeMutation, useGetMySubscriptionsQuery, useGetItemSubscriptionQuery, useCancelSubscriptionMutation, useGetLearnerDetailsQuery, useGetUserEnrolledCoursesQuery, useGetUserEnrolledProgramsQuery, useGetUserCatalogPathwaysQuery, useGetUsersAsAssertionsQuery, useGetUserEarnedSkillsQuery, useGetUserReportedSkillsQuery, useGetUserDesiredSkillsQuery, useCreateGlobalMemoryMutation, useUpdateGlobalMemoryMutation, useUpdateMentorMemoryMutation, useGetMemsearchStatusQuery, useGetUserMemorySettingsQuery, useUpdateUserMemorySettingsMutation, useGetGlobalMemoriesQuery, useGetAllMentorMemoriesQuery, useDeleteGlobalMemoryMutation, useDeleteMentorMemoryMutation, useGetAiSearchMentorsQuery, useStarMentorMutation, useUnstarMentorMutation, useGetUserChatHistoryReportsQuery, USER_CHAT_HISTORY_REPORT_ACTIVE_STATES, useCreateUserChatHistoryReportMutation, useLazyGetDownloadReportFromURLQuery, useGetUserChatHistoryReportStatusQuery, userChatHistoryApiSlice, USER_CHAT_HISTORY_QUERY_KEYS, useGetUserChatHistoryQuery, useGetUserChatHistoryFilterQuery, useGetMentorsQuery, useGetUserChatHistorySessionQuery, useUserLlmUsageSummary, useUserLlmSpendOverTime, useUserLlmCostByModel, useUserLlmCostByService, useUserLlmRecentActivity, USER_LLM_RECENT_ACTIVITY_PAGE_SIZE, useUserLlmTraceObservations, useInviteUserMutation, usePlatformInvitationsQuery, useCreateCatalogInvitationCourseBulkMutation, useGetCatalogInvitationsCourseQuery, useLazyPlatformUsersQuery, useLazyPlatformUserGroupsQuery, useGetPersonnalizedSearchQuery, useCreateCatalogInvitationProgramBulkMutation, useGetCatalogInvitationsProgramQuery, useGetVectorDocumentsQuery, useGetLlmsQuery, useUpdateUserRoleMutation, useUpdateUserStatusMutation, useUpdatePlatformUserRoleWithPoliciesMutation, usePlatformUsersQuery, useGetAccessibleUsersQuery, isPoliciesResponse, platformApiSlice, featureTags, useLazyGetRbacTeamsAccessListQuery, useCreateRbacTeamsAccessMutation, useGetRbacGroupsQuery, usePlatformUserGroupsQuery, useCreateRbacGroupMutation, useUpdateRbacGroupMutation, useDeleteRbacGroupMutation, useCreatePlatformUserGroupMutation, useUpdatePlatformUserGroupMutation, useDeletePlatformUserGroupMutation, useGetRbacGroupDetailsQuery, useGetPlatformUserGroupDetailsQuery, useGetRbacPermissionsMutation, useGetRbacRolesQuery, useCreateRbacRoleMutation, useUpdateRbacRoleMutation, useDeleteRbacRoleMutation, useGetRbacRoleDetailsQuery, useGetRbacActionsDefinitionQuery, useGetRbacResourceDiscoveryQuery, useGetRbacResourceListQuery, useGetRbacPoliciesQuery, useCreateRbacPolicyMutation, useUpdateRbacPolicyMutation, useDeleteRbacPolicyMutation, useGetRbacPolicyDetailsQuery, useGetWatchedGroupsQuery, useCreateWatchedGroupMutation, useUpdateWatchedGroupMutation, useDeleteWatchedGroupMutation, useAddWatchedUserMutation, useRemoveWatchedUserMutation, useAddWatcherMutation, useUpdateWatcherMutation, useDeleteWatcherMutation, useGetWatchedUsersQuery, useGetWatchersQuery, WATCHER_NOTIFICATION_EVENTS, WATCHER_NOTIFICATION_EVENT_LABELS, useGetApplicationFormsQuery, useGetApplicationFormDetailQuery, useCreateApplicationFormMutation, useUpdateApplicationFormMutation, useGetApplicationAdminDetailQuery, useInviteApplicationCandidateMutation, useLazyGetApplicationAttachmentFileQuery, useCreateApplicationWaiverMutation, useDeleteApplicationWaiverMutation, useSubmitApplicationOverrideMutation, useUpdateApplicationPlacementMutation, useDeleteApplicationCourseAssignmentMutation, useCreateApplicationNoteMutation, useUpdateApplicationNoteMutation, useDeleteApplicationNoteMutation, useTransitionApplicationMutation, useLinkApplicationCandidateMutation, useCreateApplicationPlacementsMutation, useGetCustomMentorsQuery, useCreateApplicationCourseAssignmentsMutation, useGetApplicationBlocksQuery, useDeleteApplicationBlockMutation, useGetApplicationsPipelineStatsQuery, useGetApplicationsPipelineQuery, useGetTenantMetadataQuery, useUpdateTenantMetadataMutation, useLazyGetTenantMetadataQuery, useDeleteApiKeyMutation, useGetApiKeyQuery, useGetApiKeyFieldPermissionsQuery, useUpdateApiKeyMutation, useGetApiKeysQuery, unwrapApiTokenList, useCreateApiKeyMutation, useCreateLLMCredentialMutation, useGetCredentialsSchemaQuery, useGetMaskedLLMCredentialsQuery, useDeleteIntegrationCredentialMutation, useDeleteCredentialMutation, useCreateIntegrationCredentialMutation, useGetIntegrationCredentialsSchemaQuery, useGetMaskedIntegrationCredentialsQuery, useGetAccountBillingInfoQuery, useUpdateAutoRechargeInfoMutation, useTriggerAutoRechargeMutation, useGetAgentSpendCapQuery, useGetTenantSpendCapQuery, useListAgentUserSpendCapsQuery, useUpsertAgentSpendCapMutation, useDeleteAgentSpendCapMutation, useUpsertTenantSpendCapMutation, useDeleteTenantSpendCapMutation, useUpsertUserSpendCapMutation, useDeleteUserSpendCapMutation, useGetLlmUsageMetricsQuery, useListAgentSpendCapsQuery, useGetCreditTransactionsQuery, useCreateStripeCustomerPortalMutation, useSetPlatformConfigurationsMutation, useGetPlatformConfigurationsQuery, useUpdatePlatformMembershipMutation, useGetPlatformMembershipQuery, useGetCustomDomainsQuery, useCreateCustomDomainMutation, useDeleteCustomDomainMutation, useGetStudentMentorCreationStatusQuery, useSetStudentMentorCreationStatusMutation, coreApiSlice, recommendationPromptTypeEnum, useGetRecommendedPromptsListQuery, useCreateRecommendedPromptMutation, useUpdateRecommendedPromptMutation, useDeleteRecommendedPromptMutation, useLazyGetPublicPlatformImageAssetFileUrlQuery, useCreatePlatformImageAssetMutation, useGetProviderConfigQuery, useCreateProviderConfigMutation, useDeleteProviderConfigMutation, useGetExternalMappingQuery, useGetCredentialsListQuery, useCreateExternalMappingMutation, useDeleteExternalMappingMutation, useGetMemsearchConfigQuery, useUpdateMemsearchConfigMutation, useGetStripeConnectStatusQuery, useStartStripeConnectOnboardingMutation, useLazyGetStripeConnectDashboardQuery, useListPaywallsQuery, useListPricesQuery, useCreatePriceMutation, useUpdatePriceMutation, useDeletePriceMutation, useGetPaywallConfigQuery, useEnablePaywallMutation, useUpdatePaywallMutation, useGetMentorMemoriesListQuery, useGetMemoryCategoriesAdminQuery, useCreateMentorMemoryMutation, useLazyGetCourseMetaDataQuery, useLazyGetCourseCompletionOutlinesQuery, useLazyGetCourseEligibilityQuery, useLazyGetEdxSSOTokenQuery, useCreateCourseEnrollmentMutation, useCreateStripeCheckoutSessionMutation, useLazyGetCourseProgressQuery, useLazyGetCourseCompletionQuery, useUpdateExamAttemptMutation, useStartExamMutation, useLazyGetExamInfoQuery, useGetAgentSkillResourcesQuery, useCreateAgentSkillResourceMutation, useUpdateAgentSkillResourceMutation, useUploadAgentSkillResourceAssetMutation, useDeleteAgentSkillResourceMutation, useGetMentorSkillAssignmentsQuery, useGetAgentSkillsQuery, useCreateMentorSkillAssignmentMutation, useUpdateMentorSkillAssignmentMutation, useDeleteMentorSkillAssignmentMutation, useCreateAgentSkillMutation, useUpdateAgentSkillMutation, useDeleteAgentSkillMutation, filterSlashSkills, useGetMentorSkillAssignmentsInfiniteQuery, MENTOR_SKILL_ASSIGNMENTS_PAGE_SIZE, useUpdateUserProjectMutation, useGetTrainingDocumentsQuery, useLazyGetConnectedServiceAuthUrlQuery, useCreateUserProjectMutation, useDeleteUserProjectMutation, useGetUserProjectDetailsQuery, useEditTrainingDocumentMutation, useAddTrainingDocumentMutation, useLazyGetCredentialsQuery, useGetMentorSettingsQuery, useEditMentorMutation, useUploadLightLogoMutation, useUploadDarkLogoMutation, useUpdatePlatformInfoMutation, LOGO_ENDPOINTS, useCreateEvalDatasetMutation, useAddEvalDatasetItemsMutation, useUploadEvalDatasetCsvMutation, useDeleteEvalDatasetItemMutation, useListEvalDatasetItemsQuery, evalTotalPages, useListEvalDatasetsQuery, useGetUserProjectsQuery, useCreateSessionIdMutation, useGetMentorCategoriesQuery, useGetTenantChatPrivacyConfigQuery as useGetTenantChatPrivacyConfigQuery$1, useGetCallConfigurationsQuery, useCreateCallConfigurationMutation, useUpdateCallConfigurationMutation, chatPrivacyApiSlice, useDeleteMentorMutation, useForkMentorMutation, useGetToolsQuery, useLazyGetMCPServersQuery, useOauthFindMutation, useLazyStartOAuthFlowQuery, useCreateMCPServerMutation, usePartialUpdateMCPServerMutation, useCreateMCPServerConnectionMutation, usePatchMCPServerConnectionMutation, useGetConnectedServicesQuery, useGetMCPServersQuery, useGetMCPServerConnectionsQuery, useUpdateMCPServerMutation, useDeleteMCPServerMutation, useEditMentorJsonMutation, useDisconnectServiceMutation, useGetPromptCategoriesQuery, PRIVACY_ACTIONS, PRIVACY_ENTITY_TYPES, useGetVoicesQuery, useGetVoiceQuery, isBaseAgentMentor, useGetGradeResultQuery, useOverrideGradeResultMutation, useGetChatHistoryFilterQuery, useListGradeResultsQuery, useGetMentorGraderConfigurationQuery, useListGraderCriteriaQuery, useCreateMentorGraderConfigurationMutation, useUpdateMentorGraderConfigurationMutation, useCreateGraderCriterionMutation, useUpdateGraderCriterionMutation, useDeleteGraderCriterionMutation, useGetSpendCapStatusQuery, useGetMentorPublicSettingsQuery, useGetChatHistoryQuery, useGetMentorSummariesQuery, useGetConversationMemoriesQuery, useGetSupportTicketsQuery, useGetSupportTicketMessagesQuery, useCreateSupportTicketMessageMutation, usePatchSupportTicketMutation, useCloseSupportTicketMutation, useCreateLtiMentorMutation, useUpdateLtiMentorMutation, useGetLtiMentorsQuery, useDeleteLtiMentorMutation, useCreateLtiKeyMutation, useUpdateLtiKeyMutation, useDeleteLtiKeyMutation, useGetLtiKeysQuery, useCreateLtiToolMutation, useUpdateLtiToolMutation, useGetLtiToolsQuery, useGetPlatformInfoQuery, useCreatePromptMutation, useGetPromptsSearchQuery, useUpdatePromptMutation, useCreateRedirectTokenMutation, useGetShareableLinkQuery, useCreateShareableLinkMutation, useUpdateShareableLinkMutation, useCreateDisclaimerMutation, useUpdateDisclaimerMutation, useGetDisclaimersQuery, useUpdateRbacMentorAccessMutation, useGetRbacMentorAccessListQuery, useStartEvalRunMutation, useEvaluateEvalRunMutation, useGetEvalRunQuery, useDeleteEvalScoreMutation, useListEvalRunJudgesQuery, useCreateEvalScoreMutation, useDeleteEvalRunMutation, useExportEvalRunMutation, useListEvalRunsQuery, useLazyGetEvalRunQuery, evaluationsApiSlice, EVALUATIONS_TAGS, useGetPersonnalizedMentorsQuery, useCreateCallCredentialsMutation, useGetGuidedPromptsQuery, useUpdateChatSessionSharedMutation, useUpdateMessageFeedbackMutation, useLazyGetPromptsSearchQuery, useLazyGetGuidedPromptsQuery, useGetPublicMentorsQuery, useGetPeriodicAgentsQuery, useGetPeriodicAgentLogsListQuery, useCreatePeriodicAgentMutation, useDeletePeriodicAgentMutation, useCreateMemoryCategoryMutation, useUpdateMemoryCategoryMutation, useDeleteMemoryCategoryMutation, useDeletePromptMutation, useDeleteTrainingDocumentMutation, useGetTrainingDocumentRetrainScheduleQuery, useCreateTrainingDocumentRetrainScheduleMutation, useUpdateArtifactMutation, useLazyGetArtifactVersionQuery, useLazyListArtifactVersionsQuery, useSetCurrentVersionMutation, useListArtifactVersionsQuery, useLazyGetArtifactQuery, useLazyListArtifactsQuery, useEditSessionMutation } from '@iblai/data-layer';
+import { removeAuthItem, setAuthItem, isTauriEmbeddedLLMHost, selectRbacPermissions, useCurrentTenant, canViewOtherUsersChatHistory, isPureWatcher, getInitials, useTenantMetadata, useUsername, selectStreaming, isLoggedIn, TOOL_NAME_MAP, WRITE_TODOS_TOOL, WithPermissions, canWriteField, useStripeUpgrade, openExternalUrl, CHAT_AREA_SIZE, isAlphaNumeric32, checkRbacPermission, selectNumberOfActiveChatMessages, TOOLS, hasRemoteAiConfig, isSafariBrowser, useShowAttachment, useShowVoiceCall, useShowVoiceRecorder, useMentorSettings, selectShowingSharedChat, useShowFreeTrialDialog, useEmbedMode, chatInputSliceSelectors, useResponsive, useAccessingPublicRoute, useVisitingTenant, useModelFileUploadCapabilities, useChatFileUpload, useVoiceChat, selectAttachedFiles, MENTOR_CHAT_DOCUMENTS_EXTENSIONS, removeFile, chatInputSliceActions, chatActions, WithFormPermissions, useTenantContext, TimeTracker, advancedTabsProperties, defaultSessionIds, pickWritableFields, ANONYMOUS_USERNAME as ANONYMOUS_USERNAME$3, redirectToAuthSpaJoinTenant, selectActiveTab, useAxdToken, useWelcomeMessage, markdownToPlainText, useCachedSessionId, use402ErrorCheck, use401TokenRefresh, selectTokenEnabled, selectToken, useServiceWorker, useUserAgreement, useAdvancedChat, sendMessageToParentWebsite, useMentorTools, useFileDragDrop, eventBus, RemoteEvents, selectEnableChatActionsPopup, advancedTabs, isInIframe, getAuthSpaJoinUrl, addMessage, clearFiles, MENTOR_VISIBILITY } from '@iblai/web-utils';
 import { useDispatch, useSelector } from 'react-redux';
 import { toast } from 'sonner';
 import { useSearchParams, useParams, useRouter, usePathname } from 'next/navigation';
@@ -99736,7 +99736,13 @@ var profileAccount$3 = {
 	tabBenchmarks: "Benchmarks",
 	descBenchmarks: "Build benchmark suites of test inputs to evaluate agents.",
 	tabMemory: "Memory",
-	descMemory: "Manage user global memories and agent memories."
+	descMemory: "Manage user global memories and agent memories.",
+	groupWorkspace: "Workspace",
+	groupAiData: "AI & data",
+	groupSystem: "System",
+	ariaSettingsNav: "Organization settings",
+	ariaSettingsNavMobile: "Organization settings (mobile)",
+	groupFinance: "Finance"
 };
 var profileAddCreditsModal$3 = {
 	title: "Add Credits",
@@ -99932,7 +99938,6 @@ var profileIndex$3 = {
 	langSpanish: "Spanish",
 	langFrench: "French",
 	checkboxDisplayMentorAI: "Display Agent Sidebar",
-	checkboxDisplayLeaderboard: "Display Leaderboard",
 	labelFacebook: "Facebook",
 	placeholderFacebook: "Facebook",
 	labelLinkedIn: "LinkedIn",
@@ -99953,7 +99958,16 @@ var profileIndex$3 = {
 	descChatHistoryPreview: "Conversations with AI agents.",
 	ariaAddEducation: "Add education",
 	ariaAddExperience: "Add experience",
-	ariaAddResume: "Add resume"
+	ariaAddResume: "Add resume",
+	tabLlmUsage: "Usage",
+	descLlmUsage: "See how much AI you have used: spend, tokens and requests across your conversations.",
+	groupProfile: "Profile",
+	groupAiData: "AI & data",
+	groupAccount: "Account",
+	groupRecords: "Records",
+	descLlmUsagePreview: "Spend, tokens and requests across conversations.",
+	sectionFeatures: "Features",
+	tooltipDisplayMentorAI: "Keeps the AI agent panel beside whatever you are working on, so you can ask questions without leaving the page."
 };
 var profileInviteUserContent$3 = {
 	inviteUsersTitle: "Invite Users",
@@ -102978,6 +102992,81 @@ var analyticsTraces$3 = {
 	mentorScopeTitle: "Agent scope narrows the trace list only.",
 	mentorScopeBody: "Row-level observations cannot be filtered to a single agent upstream — open a trace to see its own calls."
 };
+var profileLlmUsage$3 = {
+	rangeLabel: "Date range",
+	rangeToday: "Today",
+	range7d: "7 days",
+	range30d: "30 days",
+	range90d: "90 days",
+	rangeAllTime: "All time",
+	periodToday: "Today",
+	period7d: "Last 7 days",
+	period30d: "Last 30 days",
+	period90d: "Last 90 days",
+	periodAllTime: "All time",
+	scopeSelf: "Only your own activity is shown",
+	refresh: "Refresh usage",
+	kpiSpend: "Spend",
+	kpiTokens: "Tokens",
+	kpiRequests: "Requests",
+	kpiAvgCost: "Avg cost per request",
+	kpiTokensSub: "{value} per request",
+	kpiRequestsSub: "AI calls",
+	kpiAvgCostSub: "Spend divided by requests",
+	chartTitle: "Spend over time",
+	chartSubtitleDay: "Daily spend in US dollars",
+	chartSubtitleWeek: "Weekly spend in US dollars",
+	chartSubtitleMonth: "Monthly spend in US dollars",
+	chartAria: "Spend over time. Use the left and right arrow keys to read each bar.",
+	chartNoData: "No spend in this period.",
+	chartTableCaption: "Spend per period",
+	colPeriod: "Period",
+	colCost: "Cost",
+	byModelTitle: "By model",
+	byModelSubtitle: "Share of your spend per model",
+	byServiceTitle: "By service",
+	byServiceSubtitle: "Where your spend comes from",
+	otherRow: "Other",
+	unknownModel: "Unknown model",
+	unknownService: "Other service",
+	breakdownEmpty: "Nothing to break down in this period.",
+	sectionError: "This section couldn't be loaded.",
+	activityTitle: "Recent activity",
+	activitySubtitle: "Your latest AI requests, newest first. Open one to see each step.",
+	activityEmpty: "No requests in this period.",
+	colWhen: "When",
+	colService: "Service",
+	colSession: "Session",
+	colLatency: "Latency",
+	colDetails: "Details",
+	showSteps: "Show steps for {when}",
+	hideSteps: "Hide steps for {when}",
+	stepsLoading: "Loading steps…",
+	stepsEmpty: "No steps were recorded for this request.",
+	stepsError: "The steps for this request couldn't be loaded.",
+	colStep: "Step",
+	colModel: "Model",
+	colInput: "Input",
+	colOutput: "Output",
+	colTotal: "Total",
+	paginationSummary: "Showing {from}–{to} of {total}",
+	previous: "Previous",
+	next: "Next",
+	emptyTitle: "No AI usage in this period",
+	emptyBody: "Chats, memory and other AI requests show up here once they happen. Try a longer range.",
+	emptyAction90: "Show last 90 days",
+	emptyActionAll: "Show all time",
+	errorForbiddenTitle: "Usage isn't available",
+	errorForbiddenBody: "We couldn't load usage for this account.",
+	errorUnavailableTitle: "Usage is temporarily unavailable",
+	errorUnavailableBody: "Please try again in a few minutes.",
+	errorUnauthorizedTitle: "Your session has expired",
+	errorUnauthorizedBody: "Sign in again to see your usage.",
+	errorUnknownTitle: "Something went wrong",
+	errorUnknownBody: "We couldn't load your usage.",
+	tryAgain: "Try again",
+	scopeUser: "Usage for {username}"
+};
 var en = {
 	accessTabAddAccess: accessTabAddAccess$3,
 	accessTabLabels: accessTabLabels$3,
@@ -103262,7 +103351,8 @@ var en = {
 	analyticsChartCard: analyticsChartCard$3,
 	analyticsCostTabs: analyticsCostTabs$3,
 	analyticsLlmUsage: analyticsLlmUsage$3,
-	analyticsTraces: analyticsTraces$3
+	analyticsTraces: analyticsTraces$3,
+	profileLlmUsage: profileLlmUsage$3
 };
 
 var accessTabAddAccess$2 = {
@@ -107093,7 +107183,13 @@ var profileAccount$2 = {
 	tabBenchmarks: "Benchmarks",
 	descBenchmarks: "Créez des suites de benchmarks d'entrées de test pour évaluer les agents.",
 	tabMemory: "Mémoire",
-	descMemory: "Gérez les mémoires globales des utilisateurs et les mémoires des agents."
+	descMemory: "Gérez les mémoires globales des utilisateurs et les mémoires des agents.",
+	groupWorkspace: "Espace de travail",
+	groupAiData: "IA et données",
+	groupSystem: "Système",
+	ariaSettingsNav: "Paramètres de l'organisation",
+	ariaSettingsNavMobile: "Paramètres de l'organisation (mobile)",
+	groupFinance: "Finance"
 };
 var profileAddCreditsModal$2 = {
 	title: "Ajouter des crédits",
@@ -107289,7 +107385,6 @@ var profileIndex$2 = {
 	langSpanish: "Espagnol",
 	langFrench: "Français",
 	checkboxDisplayMentorAI: "Afficher la barre latérale de l'agent",
-	checkboxDisplayLeaderboard: "Afficher le classement",
 	labelFacebook: "Facebook",
 	placeholderFacebook: "Facebook",
 	labelLinkedIn: "LinkedIn",
@@ -107310,7 +107405,16 @@ var profileIndex$2 = {
 	descChatHistoryPreview: "Conversations avec les agents IA.",
 	ariaAddEducation: "Ajouter une formation",
 	ariaAddExperience: "Ajouter une expérience",
-	ariaAddResume: "Ajouter un CV"
+	ariaAddResume: "Ajouter un CV",
+	tabLlmUsage: "Utilisation",
+	descLlmUsage: "Voyez combien d'IA vous avez utilisé : dépenses, jetons et requêtes dans vos conversations.",
+	groupProfile: "Profil",
+	groupAiData: "IA et données",
+	groupAccount: "Compte",
+	groupRecords: "Dossiers",
+	descLlmUsagePreview: "Dépenses, jetons et requêtes dans les conversations.",
+	sectionFeatures: "Fonctionnalités",
+	tooltipDisplayMentorAI: "Garde le panneau de l'agent IA à côté de ce que vous faites, pour poser des questions sans quitter la page."
 };
 var profileInviteUserContent$2 = {
 	inviteUsersTitle: "Inviter des utilisateurs",
@@ -110169,6 +110273,81 @@ var analyticsTraces$2 = {
 	mentorScopeTitle: "La portée par agent ne restreint que la liste des traces.",
 	mentorScopeBody: "Les observations au niveau ligne ne peuvent pas être filtrées sur un seul agent — ouvrez une trace pour voir ses propres appels."
 };
+var profileLlmUsage$2 = {
+	rangeLabel: "Période",
+	rangeToday: "Aujourd'hui",
+	range7d: "7 jours",
+	range30d: "30 jours",
+	range90d: "90 jours",
+	rangeAllTime: "Tout",
+	periodToday: "Aujourd'hui",
+	period7d: "7 derniers jours",
+	period30d: "30 derniers jours",
+	period90d: "90 derniers jours",
+	periodAllTime: "Depuis le début",
+	scopeSelf: "Seule votre propre activité est affichée",
+	refresh: "Actualiser l'utilisation",
+	kpiSpend: "Dépenses",
+	kpiTokens: "Jetons",
+	kpiRequests: "Requêtes",
+	kpiAvgCost: "Coût moyen par requête",
+	kpiTokensSub: "{value} par requête",
+	kpiRequestsSub: "Appels à l'IA",
+	kpiAvgCostSub: "Dépenses divisées par les requêtes",
+	chartTitle: "Dépenses dans le temps",
+	chartSubtitleDay: "Dépenses quotidiennes en dollars américains",
+	chartSubtitleWeek: "Dépenses hebdomadaires en dollars américains",
+	chartSubtitleMonth: "Dépenses mensuelles en dollars américains",
+	chartAria: "Dépenses dans le temps. Utilisez les flèches gauche et droite pour lire chaque barre.",
+	chartNoData: "Aucune dépense sur cette période.",
+	chartTableCaption: "Dépenses par période",
+	colPeriod: "Période",
+	colCost: "Coût",
+	byModelTitle: "Par modèle",
+	byModelSubtitle: "Part de vos dépenses par modèle",
+	byServiceTitle: "Par service",
+	byServiceSubtitle: "D'où viennent vos dépenses",
+	otherRow: "Autres",
+	unknownModel: "Modèle inconnu",
+	unknownService: "Autre service",
+	breakdownEmpty: "Rien à détailler sur cette période.",
+	sectionError: "Cette section n'a pas pu être chargée.",
+	activityTitle: "Activité récente",
+	activitySubtitle: "Vos dernières requêtes d'IA, les plus récentes d'abord. Ouvrez-en une pour voir chaque étape.",
+	activityEmpty: "Aucune requête sur cette période.",
+	colWhen: "Quand",
+	colService: "Service",
+	colSession: "Session",
+	colLatency: "Latence",
+	colDetails: "Détails",
+	showSteps: "Afficher les étapes du {when}",
+	hideSteps: "Masquer les étapes du {when}",
+	stepsLoading: "Chargement des étapes…",
+	stepsEmpty: "Aucune étape n'a été enregistrée pour cette requête.",
+	stepsError: "Les étapes de cette requête n'ont pas pu être chargées.",
+	colStep: "Étape",
+	colModel: "Modèle",
+	colInput: "Entrée",
+	colOutput: "Sortie",
+	colTotal: "Total",
+	paginationSummary: "{from}–{to} sur {total}",
+	previous: "Précédent",
+	next: "Suivant",
+	emptyTitle: "Aucune utilisation de l'IA sur cette période",
+	emptyBody: "Les discussions, la mémoire et les autres requêtes d'IA apparaissent ici dès qu'elles ont lieu. Essayez une période plus longue.",
+	emptyAction90: "Afficher les 90 derniers jours",
+	emptyActionAll: "Tout afficher",
+	errorForbiddenTitle: "L'utilisation n'est pas disponible",
+	errorForbiddenBody: "Nous n'avons pas pu charger l'utilisation de ce compte.",
+	errorUnavailableTitle: "L'utilisation est temporairement indisponible",
+	errorUnavailableBody: "Veuillez réessayer dans quelques minutes.",
+	errorUnauthorizedTitle: "Votre session a expiré",
+	errorUnauthorizedBody: "Reconnectez-vous pour voir votre utilisation.",
+	errorUnknownTitle: "Un problème est survenu",
+	errorUnknownBody: "Nous n'avons pas pu charger votre utilisation.",
+	tryAgain: "Réessayer",
+	scopeUser: "Utilisation de {username}"
+};
 var fr = {
 	accessTabAddAccess: accessTabAddAccess$2,
 	accessTabLabels: accessTabLabels$2,
@@ -110453,7 +110632,8 @@ var fr = {
 	analyticsChartCard: analyticsChartCard$2,
 	analyticsCostTabs: analyticsCostTabs$2,
 	analyticsLlmUsage: analyticsLlmUsage$2,
-	analyticsTraces: analyticsTraces$2
+	analyticsTraces: analyticsTraces$2,
+	profileLlmUsage: profileLlmUsage$2
 };
 
 var accessTabAddAccess$1 = {
@@ -114284,7 +114464,13 @@ var profileAccount$1 = {
 	tabBenchmarks: "Benchmarks",
 	descBenchmarks: "Cree suites de benchmarks con entradas de prueba para evaluar agentes.",
 	tabMemory: "Memoria",
-	descMemory: "Gestiona las memorias globales de los usuarios y las memorias de los agentes."
+	descMemory: "Gestiona las memorias globales de los usuarios y las memorias de los agentes.",
+	groupWorkspace: "Espacio de trabajo",
+	groupAiData: "IA y datos",
+	groupSystem: "Sistema",
+	ariaSettingsNav: "Configuración de la organización",
+	ariaSettingsNavMobile: "Configuración de la organización (móvil)",
+	groupFinance: "Finanzas"
 };
 var profileAddCreditsModal$1 = {
 	title: "Agregar créditos",
@@ -114480,7 +114666,6 @@ var profileIndex$1 = {
 	langSpanish: "Español",
 	langFrench: "Francés",
 	checkboxDisplayMentorAI: "Mostrar barra lateral del agente",
-	checkboxDisplayLeaderboard: "Mostrar tabla de clasificación",
 	labelFacebook: "Facebook",
 	placeholderFacebook: "Facebook",
 	labelLinkedIn: "LinkedIn",
@@ -114501,7 +114686,16 @@ var profileIndex$1 = {
 	descChatHistoryPreview: "Conversaciones con agentes de IA.",
 	ariaAddEducation: "Añadir educación",
 	ariaAddExperience: "Añadir experiencia",
-	ariaAddResume: "Añadir currículum"
+	ariaAddResume: "Añadir currículum",
+	tabLlmUsage: "Uso",
+	descLlmUsage: "Consulta cuánta IA has usado: gasto, tokens y solicitudes en tus conversaciones.",
+	groupProfile: "Perfil",
+	groupAiData: "IA y datos",
+	groupAccount: "Cuenta",
+	groupRecords: "Registros",
+	descLlmUsagePreview: "Gasto, tokens y solicitudes en las conversaciones.",
+	sectionFeatures: "Funciones",
+	tooltipDisplayMentorAI: "Mantiene el panel del agente de IA junto a lo que estés haciendo, para que puedas preguntar sin salir de la página."
 };
 var profileInviteUserContent$1 = {
 	inviteUsersTitle: "Invitar usuarios",
@@ -117360,6 +117554,81 @@ var analyticsTraces$1 = {
 	mentorScopeTitle: "El alcance por agente solo acota la lista de trazas.",
 	mentorScopeBody: "Las observaciones a nivel de fila no pueden filtrarse por un solo agente — abre una traza para ver sus propias llamadas."
 };
+var profileLlmUsage$1 = {
+	rangeLabel: "Rango de fechas",
+	rangeToday: "Hoy",
+	range7d: "7 días",
+	range30d: "30 días",
+	range90d: "90 días",
+	rangeAllTime: "Todo",
+	periodToday: "Hoy",
+	period7d: "Últimos 7 días",
+	period30d: "Últimos 30 días",
+	period90d: "Últimos 90 días",
+	periodAllTime: "Todo el tiempo",
+	scopeSelf: "Solo se muestra tu propia actividad",
+	refresh: "Actualizar uso",
+	kpiSpend: "Gasto",
+	kpiTokens: "Tokens",
+	kpiRequests: "Solicitudes",
+	kpiAvgCost: "Costo promedio por solicitud",
+	kpiTokensSub: "{value} por solicitud",
+	kpiRequestsSub: "Llamadas a la IA",
+	kpiAvgCostSub: "Gasto dividido entre solicitudes",
+	chartTitle: "Gasto a lo largo del tiempo",
+	chartSubtitleDay: "Gasto diario en dólares estadounidenses",
+	chartSubtitleWeek: "Gasto semanal en dólares estadounidenses",
+	chartSubtitleMonth: "Gasto mensual en dólares estadounidenses",
+	chartAria: "Gasto a lo largo del tiempo. Usa las flechas izquierda y derecha para leer cada barra.",
+	chartNoData: "No hay gasto en este período.",
+	chartTableCaption: "Gasto por período",
+	colPeriod: "Período",
+	colCost: "Costo",
+	byModelTitle: "Por modelo",
+	byModelSubtitle: "Parte de tu gasto por modelo",
+	byServiceTitle: "Por servicio",
+	byServiceSubtitle: "De dónde proviene tu gasto",
+	otherRow: "Otros",
+	unknownModel: "Modelo desconocido",
+	unknownService: "Otro servicio",
+	breakdownEmpty: "No hay nada que desglosar en este período.",
+	sectionError: "No se pudo cargar esta sección.",
+	activityTitle: "Actividad reciente",
+	activitySubtitle: "Tus solicitudes de IA más recientes, primero las más nuevas. Abre una para ver cada paso.",
+	activityEmpty: "No hay solicitudes en este período.",
+	colWhen: "Cuándo",
+	colService: "Servicio",
+	colSession: "Sesión",
+	colLatency: "Latencia",
+	colDetails: "Detalles",
+	showSteps: "Mostrar pasos de {when}",
+	hideSteps: "Ocultar pasos de {when}",
+	stepsLoading: "Cargando pasos…",
+	stepsEmpty: "No se registraron pasos para esta solicitud.",
+	stepsError: "No se pudieron cargar los pasos de esta solicitud.",
+	colStep: "Paso",
+	colModel: "Modelo",
+	colInput: "Entrada",
+	colOutput: "Salida",
+	colTotal: "Total",
+	paginationSummary: "Mostrando {from}–{to} de {total}",
+	previous: "Anterior",
+	next: "Siguiente",
+	emptyTitle: "Sin uso de IA en este período",
+	emptyBody: "Los chats, la memoria y otras solicitudes de IA aparecen aquí cuando ocurren. Prueba un rango más amplio.",
+	emptyAction90: "Mostrar los últimos 90 días",
+	emptyActionAll: "Mostrar todo",
+	errorForbiddenTitle: "El uso no está disponible",
+	errorForbiddenBody: "No pudimos cargar el uso de esta cuenta.",
+	errorUnavailableTitle: "El uso no está disponible temporalmente",
+	errorUnavailableBody: "Inténtalo de nuevo en unos minutos.",
+	errorUnauthorizedTitle: "Tu sesión ha expirado",
+	errorUnauthorizedBody: "Vuelve a iniciar sesión para ver tu uso.",
+	errorUnknownTitle: "Algo salió mal",
+	errorUnknownBody: "No pudimos cargar tu uso.",
+	tryAgain: "Intentar de nuevo",
+	scopeUser: "Uso de {username}"
+};
 var es = {
 	accessTabAddAccess: accessTabAddAccess$1,
 	accessTabLabels: accessTabLabels$1,
@@ -117644,7 +117913,8 @@ var es = {
 	analyticsChartCard: analyticsChartCard$1,
 	analyticsCostTabs: analyticsCostTabs$1,
 	analyticsLlmUsage: analyticsLlmUsage$1,
-	analyticsTraces: analyticsTraces$1
+	analyticsTraces: analyticsTraces$1,
+	profileLlmUsage: profileLlmUsage$1
 };
 
 var accessTabAddAccess = {
@@ -121475,7 +121745,13 @@ var profileAccount = {
 	tabBenchmarks: "基准测试",
 	descBenchmarks: "构建包含测试输入的基准测试套件，以评估智能体。",
 	tabMemory: "记忆",
-	descMemory: "管理用户的全局记忆和智能体记忆。"
+	descMemory: "管理用户的全局记忆和智能体记忆。",
+	groupWorkspace: "工作区",
+	groupAiData: "AI 与数据",
+	groupSystem: "系统",
+	ariaSettingsNav: "组织设置",
+	ariaSettingsNavMobile: "组织设置（移动端）",
+	groupFinance: "财务"
 };
 var profileAddCreditsModal = {
 	title: "添加积分",
@@ -121671,7 +121947,6 @@ var profileIndex = {
 	langSpanish: "西班牙语",
 	langFrench: "法语",
 	checkboxDisplayMentorAI: "显示助手侧边栏",
-	checkboxDisplayLeaderboard: "显示排行榜",
 	labelFacebook: "Facebook",
 	placeholderFacebook: "Facebook",
 	labelLinkedIn: "LinkedIn",
@@ -121692,7 +121967,16 @@ var profileIndex = {
 	descChatHistoryPreview: "与 AI 代理的对话。",
 	ariaAddEducation: "添加教育经历",
 	ariaAddExperience: "添加工作经历",
-	ariaAddResume: "添加简历"
+	ariaAddResume: "添加简历",
+	tabLlmUsage: "用量",
+	descLlmUsage: "查看你使用了多少 AI：各对话中的花费、令牌数和请求数。",
+	groupProfile: "个人资料",
+	groupAiData: "AI 与数据",
+	groupAccount: "账户",
+	groupRecords: "记录",
+	descLlmUsagePreview: "各对话中的花费、令牌数和请求数。",
+	sectionFeatures: "功能",
+	tooltipDisplayMentorAI: "让 AI 助手面板始终显示在当前页面旁边，无需离开页面即可提问。"
 };
 var profileInviteUserContent = {
 	inviteUsersTitle: "邀请用户",
@@ -124551,6 +124835,81 @@ var analyticsTraces = {
 	mentorScopeTitle: "代理范围仅缩小追踪列表。",
 	mentorScopeBody: "行级观测记录无法按单个代理筛选 — 打开一条追踪查看它自己的调用。"
 };
+var profileLlmUsage = {
+	rangeLabel: "日期范围",
+	rangeToday: "今天",
+	range7d: "7 天",
+	range30d: "30 天",
+	range90d: "90 天",
+	rangeAllTime: "全部",
+	periodToday: "今天",
+	period7d: "最近 7 天",
+	period30d: "最近 30 天",
+	period90d: "最近 90 天",
+	periodAllTime: "全部时间",
+	scopeSelf: "仅显示你自己的活动",
+	refresh: "刷新用量",
+	kpiSpend: "花费",
+	kpiTokens: "令牌",
+	kpiRequests: "请求",
+	kpiAvgCost: "每次请求平均花费",
+	kpiTokensSub: "每次请求 {value}",
+	kpiRequestsSub: "AI 调用",
+	kpiAvgCostSub: "花费除以请求数",
+	chartTitle: "花费趋势",
+	chartSubtitleDay: "每日花费（美元）",
+	chartSubtitleWeek: "每周花费（美元）",
+	chartSubtitleMonth: "每月花费（美元）",
+	chartAria: "花费趋势。使用左右方向键逐个读取柱形。",
+	chartNoData: "此期间没有花费。",
+	chartTableCaption: "各期间花费",
+	colPeriod: "期间",
+	colCost: "花费",
+	byModelTitle: "按模型",
+	byModelSubtitle: "各模型占你花费的比例",
+	byServiceTitle: "按服务",
+	byServiceSubtitle: "你的花费来自哪里",
+	otherRow: "其他",
+	unknownModel: "未知模型",
+	unknownService: "其他服务",
+	breakdownEmpty: "此期间没有可细分的数据。",
+	sectionError: "无法加载此部分。",
+	activityTitle: "最近活动",
+	activitySubtitle: "你最近的 AI 请求，最新的在前。展开可查看每个步骤。",
+	activityEmpty: "此期间没有请求。",
+	colWhen: "时间",
+	colService: "服务",
+	colSession: "会话",
+	colLatency: "延迟",
+	colDetails: "详情",
+	showSteps: "显示 {when} 的步骤",
+	hideSteps: "隐藏 {when} 的步骤",
+	stepsLoading: "正在加载步骤…",
+	stepsEmpty: "此请求没有记录任何步骤。",
+	stepsError: "无法加载此请求的步骤。",
+	colStep: "步骤",
+	colModel: "模型",
+	colInput: "输入",
+	colOutput: "输出",
+	colTotal: "合计",
+	paginationSummary: "第 {from}–{to} 条，共 {total} 条",
+	previous: "上一页",
+	next: "下一页",
+	emptyTitle: "此期间没有 AI 用量",
+	emptyBody: "发生聊天、记忆和其他 AI 请求后，相关记录会显示在这里。请尝试更长的时间范围。",
+	emptyAction90: "显示最近 90 天",
+	emptyActionAll: "显示全部",
+	errorForbiddenTitle: "无法查看用量",
+	errorForbiddenBody: "无法加载此账户的用量。",
+	errorUnavailableTitle: "用量暂时不可用",
+	errorUnavailableBody: "请几分钟后再试。",
+	errorUnauthorizedTitle: "你的会话已过期",
+	errorUnauthorizedBody: "请重新登录以查看你的用量。",
+	errorUnknownTitle: "出现问题",
+	errorUnknownBody: "无法加载你的用量。",
+	tryAgain: "重试",
+	scopeUser: "{username} 的用量"
+};
 var zh = {
 	accessTabAddAccess: accessTabAddAccess,
 	accessTabLabels: accessTabLabels,
@@ -124835,7 +125194,8 @@ var zh = {
 	analyticsChartCard: analyticsChartCard,
 	analyticsCostTabs: analyticsCostTabs,
 	analyticsLlmUsage: analyticsLlmUsage,
-	analyticsTraces: analyticsTraces
+	analyticsTraces: analyticsTraces,
+	profileLlmUsage: profileLlmUsage
 };
 
 /**
@@ -131839,8 +132199,8 @@ function EducationDialog({ open, onOpenChange, org, username, education, onCompl
                 }, org: org, username: username })] }));
 }
 
-const Card = React.forwardRef(({ className, ...props }, ref) => (jsx("div", { ref: ref, className: cn("rounded-lg border bg-card text-card-foreground shadow-sm", className), ...props })));
-Card.displayName = "Card";
+const Card$1 = React.forwardRef(({ className, ...props }, ref) => (jsx("div", { ref: ref, className: cn("rounded-lg border bg-card text-card-foreground shadow-sm", className), ...props })));
+Card$1.displayName = "Card";
 const CardHeader = React.forwardRef(({ className, ...props }, ref) => (jsx("div", { ref: ref, className: cn("flex flex-col space-y-1.5 p-6", className), ...props })));
 CardHeader.displayName = "CardHeader";
 const CardTitle = React.forwardRef(({ className, ...props }, ref) => (jsx("div", { ref: ref, className: cn("text-2xl font-semibold leading-none tracking-tight", className), ...props })));
@@ -131853,7 +132213,7 @@ const CardFooter = React.forwardRef(({ className, ...props }, ref) => (jsx("div"
 CardFooter.displayName = "CardFooter";
 
 function ProfileEmptyState({ icon: Icon, message }) {
-    return (jsx(Card, { className: "shadow-sm border border-dashed", style: { borderColor: 'oklch(.922 0 0)' }, children: jsxs(CardContent, { className: "p-8 text-center", children: [jsx(Icon, { className: "h-10 w-10 mx-auto text-gray-300 mb-3", "aria-hidden": "true" }), jsx("p", { className: "text-sm text-gray-400", children: message })] }) }));
+    return (jsx(Card$1, { className: "shadow-sm border border-dashed", style: { borderColor: 'oklch(.922 0 0)' }, children: jsxs(CardContent, { className: "p-8 text-center", children: [jsx(Icon, { className: "h-10 w-10 mx-auto text-gray-300 mb-3", "aria-hidden": "true" }), jsx("p", { className: "text-sm text-gray-400", children: message })] }) }));
 }
 
 const formatEducationDuration = (education, present) => {
@@ -154276,15 +154636,15 @@ function SubscriptionDetail({ subscription: initialSubscription, platformKey, on
     if (isLoadingDetail) {
         return (jsxs("div", { className: "space-y-4", children: [jsxs("div", { className: "flex items-center gap-3", children: [jsxs(Button$1, { variant: "ghost", size: "sm", onClick: onBack, className: "cursor-pointer", children: [jsx(ChevronLeft, { className: "h-4 w-4 mr-1" }), t('purchasesPurchasesTab.back')] }), jsx(Skeleton, { className: "h-6 w-48" })] }), jsx(Skeleton, { className: "h-64 w-full" })] }));
     }
-    return (jsxs("div", { className: "space-y-4", children: [jsxs("div", { className: "flex items-center gap-3", children: [jsxs(Button$1, { variant: "ghost", size: "sm", onClick: onBack, className: "cursor-pointer", children: [jsx(ChevronLeft, { className: "h-4 w-4 mr-1" }), t('purchasesPurchasesTab.back')] }), jsxs("div", { children: [jsx("h4", { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: subscription.item_name || subscription.item_id }), jsx("span", { className: "text-xs text-gray-400 capitalize", children: subscription.item_type })] })] }), jsx(Card, { className: "shadow-sm border", style: { borderColor: 'oklch(.922 0 0)' }, children: jsxs(CardContent, { className: "p-6 space-y-5", children: [jsxs("div", { className: "flex items-center justify-between", children: [jsx("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: t('purchasesPurchasesTab.labelStatus') }), jsx(Badge, { className: statusBadgeStyle(subscription.status), children: subscription.status })] }), jsxs("div", { className: "flex items-center justify-between border-t pt-3", children: [jsx("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: t('purchasesPurchasesTab.labelPlan') }), jsxs("div", { className: "text-right", children: [jsx("span", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: (_b = subscription.price) === null || _b === void 0 ? void 0 : _b.name }), jsxs("span", { className: "text-sm text-gray-500 ml-2", children: [formatCurrency((_c = subscription.price) === null || _c === void 0 ? void 0 : _c.amount, (_d = subscription.price) === null || _d === void 0 ? void 0 : _d.currency), formatInterval((_e = subscription.price) === null || _e === void 0 ? void 0 : _e.interval)] })] })] }), jsxs("div", { className: "flex items-center justify-between border-t pt-3", children: [jsx("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: t('purchasesPurchasesTab.labelType') }), jsx(Badge, { variant: "secondary", className: "capitalize", children: subscription.item_type })] }), subscription.current_period_end && (jsxs("div", { className: "flex items-center justify-between border-t pt-3", children: [jsx("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: subscription.cancel_at_period_end
+    return (jsxs("div", { className: "space-y-4", children: [jsxs("div", { className: "flex items-center gap-3", children: [jsxs(Button$1, { variant: "ghost", size: "sm", onClick: onBack, className: "cursor-pointer", children: [jsx(ChevronLeft, { className: "h-4 w-4 mr-1" }), t('purchasesPurchasesTab.back')] }), jsxs("div", { children: [jsx("h4", { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: subscription.item_name || subscription.item_id }), jsx("span", { className: "text-xs text-gray-400 capitalize", children: subscription.item_type })] })] }), jsx(Card$1, { className: "shadow-sm border", style: { borderColor: 'oklch(.922 0 0)' }, children: jsxs(CardContent, { className: "p-6 space-y-5", children: [jsxs("div", { className: "flex items-center justify-between", children: [jsx("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: t('purchasesPurchasesTab.labelStatus') }), jsx(Badge, { className: statusBadgeStyle(subscription.status), children: subscription.status })] }), jsxs("div", { className: "flex items-center justify-between border-t pt-3", children: [jsx("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: t('purchasesPurchasesTab.labelPlan') }), jsxs("div", { className: "text-right", children: [jsx("span", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: (_b = subscription.price) === null || _b === void 0 ? void 0 : _b.name }), jsxs("span", { className: "text-sm text-gray-500 ml-2", children: [formatCurrency((_c = subscription.price) === null || _c === void 0 ? void 0 : _c.amount, (_d = subscription.price) === null || _d === void 0 ? void 0 : _d.currency), formatInterval((_e = subscription.price) === null || _e === void 0 ? void 0 : _e.interval)] })] })] }), jsxs("div", { className: "flex items-center justify-between border-t pt-3", children: [jsx("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: t('purchasesPurchasesTab.labelType') }), jsx(Badge, { variant: "secondary", className: "capitalize", children: subscription.item_type })] }), subscription.current_period_end && (jsxs("div", { className: "flex items-center justify-between border-t pt-3", children: [jsx("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: subscription.cancel_at_period_end
                                         ? t('purchasesPurchasesTab.labelAccessUntil')
-                                        : t('purchasesPurchasesTab.labelRenewsOn') }), jsxs("span", { className: "text-sm text-gray-600 dark:text-gray-400 flex items-center gap-1.5", children: [jsx(Calendar$1, { className: "h-3.5 w-3.5" }), new Date(subscription.current_period_end).toLocaleDateString()] })] })), subscription.created_at && (jsxs("div", { className: "flex items-center justify-between border-t pt-3", children: [jsx("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: t('purchasesPurchasesTab.labelSubscribedSince') }), jsxs("span", { className: "text-sm text-gray-600 dark:text-gray-400 flex items-center gap-1.5", children: [jsx(Clock, { className: "h-3.5 w-3.5" }), new Date(subscription.created_at).toLocaleDateString()] })] })), subscription.is_grandfathered && (jsxs("div", { className: "flex items-center justify-between border-t pt-3", children: [jsx("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: t('purchasesPurchasesTab.labelLegacyAccess') }), jsxs(Badge, { className: "bg-amber-100 text-amber-700 border-amber-200 text-xs", children: [jsx(Shield, { className: "h-3 w-3 mr-1" }), t('purchasesPurchasesTab.badgeGrandfathered')] })] })), subscription.cancel_at_period_end && (jsxs("div", { className: "flex items-center gap-2 border-t pt-3 text-yellow-600", children: [jsx(TriangleAlert, { className: "h-4 w-4 flex-shrink-0" }), jsx("span", { className: "text-sm", children: t('purchasesPurchasesTab.warningWillNotRenew') })] }))] }) }), canCancel && !cancelResult && (jsx(Card, { className: "shadow-sm border border-blue-100", style: { borderColor: 'oklch(.922 0 0)' }, children: jsxs(CardContent, { className: "p-5 space-y-3", children: [jsx("h4", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: t('purchasesPurchasesTab.cancelSectionHeading') }), jsx("p", { className: "text-xs text-gray-500", children: t('purchasesPurchasesTab.cancelSectionDescription') }), jsxs("div", { className: "flex gap-2 items-end", children: [jsxs("div", { className: "flex-1", children: [jsxs("label", { className: "text-xs text-gray-500 mb-1 block", children: [t('purchasesPurchasesTab.cancelConfirmLabelPrefix'), ' ', jsx("span", { className: "font-mono font-bold", children: "cancel" }), ' ', t('purchasesPurchasesTab.cancelConfirmLabelSuffix')] }), jsx(Input, { value: confirmText, onChange: (e) => setConfirmText(e.target.value), placeholder: t('purchasesPurchasesTab.cancelConfirmPlaceholder') })] }), jsxs(Button$1, { onClick: handleCancel, disabled: confirmText !== 'cancel' || isCanceling, className: "bg-gradient-to-r from-[#2563EB] to-[#93C5FD] hover:opacity-90 text-white cursor-pointer", children: [isCanceling ? (jsx(LoaderCircle, { className: "h-4 w-4 mr-2 animate-spin" })) : (jsx(CircleX, { className: "h-4 w-4 mr-2" })), t('purchasesPurchasesTab.cancelButton')] })] })] }) })), (cancelResult === null || cancelResult === void 0 ? void 0 : cancelResult.canceled) && (jsx(Card, { className: "shadow-sm border border-green-200", style: { borderColor: 'oklch(.922 0 0)' }, children: jsxs(CardContent, { className: "p-5 text-center", children: [jsx(CircleX, { className: "h-8 w-8 text-gray-400 mx-auto mb-2" }), jsx("h4", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100 mb-1", children: t('purchasesPurchasesTab.canceledHeading') }), jsx("p", { className: "text-xs text-gray-500", children: t('purchasesPurchasesTab.canceledDescription') }), jsx(Button$1, { variant: "outline", size: "icon", onClick: onBack, "aria-label": t('purchasesPurchasesTab.backToPurchases'), className: "mt-3 h-8 w-8 cursor-pointer rounded-full border-0 bg-gray-100 text-gray-700 hover:bg-gray-200 hover:text-gray-900 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white", children: jsx(ArrowLeft, { className: "h-4 w-4" }) })] }) })), (cancelResult === null || cancelResult === void 0 ? void 0 : cancelResult.portalUrl) && (jsx(Card, { className: "shadow-sm border border-blue-200", style: { borderColor: 'oklch(.922 0 0)' }, children: jsxs(CardContent, { className: "p-5 text-center", children: [jsx(ExternalLink, { className: "h-8 w-8 text-blue-400 mx-auto mb-2" }), jsx("h4", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100 mb-1", children: t('purchasesPurchasesTab.stripePortalHeading') }), jsx("p", { className: "text-xs text-gray-500 mb-3", children: t('purchasesPurchasesTab.stripePortalDescription') }), jsxs(Button$1, { onClick: () => window.open(cancelResult.portalUrl, '_blank'), className: "bg-gradient-to-r from-[#2563EB] to-[#93C5FD] hover:opacity-90 text-white cursor-pointer", children: [jsx(ExternalLink, { className: "h-4 w-4 mr-2" }), t('purchasesPurchasesTab.openStripePortal')] })] }) }))] }));
+                                        : t('purchasesPurchasesTab.labelRenewsOn') }), jsxs("span", { className: "text-sm text-gray-600 dark:text-gray-400 flex items-center gap-1.5", children: [jsx(Calendar$1, { className: "h-3.5 w-3.5" }), new Date(subscription.current_period_end).toLocaleDateString()] })] })), subscription.created_at && (jsxs("div", { className: "flex items-center justify-between border-t pt-3", children: [jsx("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: t('purchasesPurchasesTab.labelSubscribedSince') }), jsxs("span", { className: "text-sm text-gray-600 dark:text-gray-400 flex items-center gap-1.5", children: [jsx(Clock, { className: "h-3.5 w-3.5" }), new Date(subscription.created_at).toLocaleDateString()] })] })), subscription.is_grandfathered && (jsxs("div", { className: "flex items-center justify-between border-t pt-3", children: [jsx("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: t('purchasesPurchasesTab.labelLegacyAccess') }), jsxs(Badge, { className: "bg-amber-100 text-amber-700 border-amber-200 text-xs", children: [jsx(Shield, { className: "h-3 w-3 mr-1" }), t('purchasesPurchasesTab.badgeGrandfathered')] })] })), subscription.cancel_at_period_end && (jsxs("div", { className: "flex items-center gap-2 border-t pt-3 text-yellow-600", children: [jsx(TriangleAlert, { className: "h-4 w-4 flex-shrink-0" }), jsx("span", { className: "text-sm", children: t('purchasesPurchasesTab.warningWillNotRenew') })] }))] }) }), canCancel && !cancelResult && (jsx(Card$1, { className: "shadow-sm border border-blue-100", style: { borderColor: 'oklch(.922 0 0)' }, children: jsxs(CardContent, { className: "p-5 space-y-3", children: [jsx("h4", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: t('purchasesPurchasesTab.cancelSectionHeading') }), jsx("p", { className: "text-xs text-gray-500", children: t('purchasesPurchasesTab.cancelSectionDescription') }), jsxs("div", { className: "flex gap-2 items-end", children: [jsxs("div", { className: "flex-1", children: [jsxs("label", { className: "text-xs text-gray-500 mb-1 block", children: [t('purchasesPurchasesTab.cancelConfirmLabelPrefix'), ' ', jsx("span", { className: "font-mono font-bold", children: "cancel" }), ' ', t('purchasesPurchasesTab.cancelConfirmLabelSuffix')] }), jsx(Input, { value: confirmText, onChange: (e) => setConfirmText(e.target.value), placeholder: t('purchasesPurchasesTab.cancelConfirmPlaceholder') })] }), jsxs(Button$1, { onClick: handleCancel, disabled: confirmText !== 'cancel' || isCanceling, className: "bg-gradient-to-r from-[#2563EB] to-[#93C5FD] hover:opacity-90 text-white cursor-pointer", children: [isCanceling ? (jsx(LoaderCircle, { className: "h-4 w-4 mr-2 animate-spin" })) : (jsx(CircleX, { className: "h-4 w-4 mr-2" })), t('purchasesPurchasesTab.cancelButton')] })] })] }) })), (cancelResult === null || cancelResult === void 0 ? void 0 : cancelResult.canceled) && (jsx(Card$1, { className: "shadow-sm border border-green-200", style: { borderColor: 'oklch(.922 0 0)' }, children: jsxs(CardContent, { className: "p-5 text-center", children: [jsx(CircleX, { className: "h-8 w-8 text-gray-400 mx-auto mb-2" }), jsx("h4", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100 mb-1", children: t('purchasesPurchasesTab.canceledHeading') }), jsx("p", { className: "text-xs text-gray-500", children: t('purchasesPurchasesTab.canceledDescription') }), jsx(Button$1, { variant: "outline", size: "icon", onClick: onBack, "aria-label": t('purchasesPurchasesTab.backToPurchases'), className: "mt-3 h-8 w-8 cursor-pointer rounded-full border-0 bg-gray-100 text-gray-700 hover:bg-gray-200 hover:text-gray-900 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white", children: jsx(ArrowLeft, { className: "h-4 w-4" }) })] }) })), (cancelResult === null || cancelResult === void 0 ? void 0 : cancelResult.portalUrl) && (jsx(Card$1, { className: "shadow-sm border border-blue-200", style: { borderColor: 'oklch(.922 0 0)' }, children: jsxs(CardContent, { className: "p-5 text-center", children: [jsx(ExternalLink, { className: "h-8 w-8 text-blue-400 mx-auto mb-2" }), jsx("h4", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100 mb-1", children: t('purchasesPurchasesTab.stripePortalHeading') }), jsx("p", { className: "text-xs text-gray-500 mb-3", children: t('purchasesPurchasesTab.stripePortalDescription') }), jsxs(Button$1, { onClick: () => window.open(cancelResult.portalUrl, '_blank'), className: "bg-gradient-to-r from-[#2563EB] to-[#93C5FD] hover:opacity-90 text-white cursor-pointer", children: [jsx(ExternalLink, { className: "h-4 w-4 mr-2" }), t('purchasesPurchasesTab.openStripePortal')] })] }) }))] }));
 }
 // ── Subscription Card (List Item) ──
 function SubscriptionCard({ sub, onClick }) {
     var _a, _b, _c, _d, _e, _f, _g;
     const t = useT();
-    return (jsx(Card, { className: "shadow-sm border hover:border-blue-200 transition-colors cursor-pointer", style: { borderColor: 'oklch(.922 0 0)' }, onClick: onClick, children: jsx(CardContent, { className: "p-4", children: jsxs("div", { className: "flex items-start justify-between", children: [jsxs("div", { className: "flex-1 min-w-0", children: [jsxs("div", { className: "flex items-center gap-2 mb-1", children: [jsx("h4", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100 truncate", children: sub.item_name || sub.item_id }), jsx(Badge, { variant: "secondary", className: "text-xs capitalize flex-shrink-0", children: sub.item_type })] }), jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-600", children: [jsx(CreditCard, { className: "h-3.5 w-3.5 text-gray-400" }), jsxs("span", { children: [(_a = sub.price) === null || _a === void 0 ? void 0 : _a.name, " \u2014", ' ', jsxs("span", { className: "font-semibold", children: [formatCurrency((_b = sub.price) === null || _b === void 0 ? void 0 : _b.amount, (_c = sub.price) === null || _c === void 0 ? void 0 : _c.currency), ((_d = sub.price) === null || _d === void 0 ? void 0 : _d.interval) === 'month'
+    return (jsx(Card$1, { className: "shadow-sm border hover:border-blue-200 transition-colors cursor-pointer", style: { borderColor: 'oklch(.922 0 0)' }, onClick: onClick, children: jsx(CardContent, { className: "p-4", children: jsxs("div", { className: "flex items-start justify-between", children: [jsxs("div", { className: "flex-1 min-w-0", children: [jsxs("div", { className: "flex items-center gap-2 mb-1", children: [jsx("h4", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100 truncate", children: sub.item_name || sub.item_id }), jsx(Badge, { variant: "secondary", className: "text-xs capitalize flex-shrink-0", children: sub.item_type })] }), jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-600", children: [jsx(CreditCard, { className: "h-3.5 w-3.5 text-gray-400" }), jsxs("span", { children: [(_a = sub.price) === null || _a === void 0 ? void 0 : _a.name, " \u2014", ' ', jsxs("span", { className: "font-semibold", children: [formatCurrency((_b = sub.price) === null || _b === void 0 ? void 0 : _b.amount, (_c = sub.price) === null || _c === void 0 ? void 0 : _c.currency), ((_d = sub.price) === null || _d === void 0 ? void 0 : _d.interval) === 'month'
                                                         ? t('purchasesPurchasesTab.intervalMonth')
                                                         : ((_e = sub.price) === null || _e === void 0 ? void 0 : _e.interval) === 'year'
                                                             ? t('purchasesPurchasesTab.intervalYear')
@@ -154321,7 +154681,7 @@ function PurchasesTab({ org, username }) {
                 refetch();
             } }));
     }
-    return (jsxs("div", { className: "space-y-4", children: [jsxs("div", { className: "relative", children: [jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" }), jsx(Input, { value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: t('purchasesPurchasesTab.searchPlaceholder'), className: "pl-9" }), isFetching && !isLoading && (jsx(LoaderCircle, { className: "absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 animate-spin text-gray-400" }))] }), jsxs("div", { className: "flex flex-col sm:flex-row gap-2", children: [jsxs(Select$1, { value: statusFilter, onValueChange: setStatusFilter, children: [jsx(SelectTrigger, { className: "w-full sm:w-[160px]", children: jsx(SelectValue, { placeholder: t('purchasesPurchasesTab.filterStatusPlaceholder') }) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "all", children: t('purchasesPurchasesTab.filterAllStatuses') }), jsx(SelectItem, { value: "active", children: t('purchasesPurchasesTab.filterActive') }), jsx(SelectItem, { value: "trialing", children: t('purchasesPurchasesTab.filterTrialing') }), jsx(SelectItem, { value: "canceled", children: t('purchasesPurchasesTab.filterCanceled') }), jsx(SelectItem, { value: "past_due", children: t('purchasesPurchasesTab.filterPastDue') })] })] }), jsxs(Select$1, { value: typeFilter, onValueChange: setTypeFilter, children: [jsx(SelectTrigger, { className: "w-full sm:w-[160px]", children: jsx(SelectValue, { placeholder: t('purchasesPurchasesTab.filterTypePlaceholder') }) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "all", children: t('purchasesPurchasesTab.filterAllTypes') }), jsx(SelectItem, { value: "mentor", children: t('purchasesPurchasesTab.filterAgent') }), jsx(SelectItem, { value: "course", children: t('purchasesPurchasesTab.filterCourse') }), jsx(SelectItem, { value: "program", children: t('purchasesPurchasesTab.filterProgram') }), jsx(SelectItem, { value: "pathway", children: t('purchasesPurchasesTab.filterPathway') })] })] }), data && (jsx("span", { className: "text-xs text-gray-400 self-center ml-auto", children: t('purchasesPurchasesTab.purchaseCount', { count: data.count }) }))] }), isLoading ? (jsx("div", { className: "space-y-2", children: [1, 2, 3].map((i) => (jsx(Skeleton, { className: "h-24 w-full" }, i))) })) : (data === null || data === void 0 ? void 0 : data.results) && data.results.length > 0 ? (jsxs(Fragment$1, { children: [jsx("div", { className: "space-y-2", children: data.results.map((sub) => (jsx(SubscriptionCard, { sub: sub, onClick: () => setSelectedSubscription(sub) }, sub.unique_id))) }), (data.previous_page !== null || data.next_page !== null) && (jsxs("div", { className: "flex items-center justify-between pt-2", children: [jsx("span", { className: "text-xs text-gray-400", children: t('purchasesPurchasesTab.paginationTotal', { count: data.count }) }), jsxs("div", { className: "flex items-center gap-2", children: [jsx(Button$1, { variant: "outline", size: "sm", disabled: data.previous_page === null, onClick: () => data.previous_page !== null && setPage(data.previous_page), className: "h-7 text-xs cursor-pointer", children: t('purchasesPurchasesTab.previousPage') }), jsx("span", { className: "text-xs text-gray-500", children: t('purchasesPurchasesTab.pageIndicator', { page }) }), jsx(Button$1, { variant: "outline", size: "sm", disabled: data.next_page === null, onClick: () => data.next_page !== null && setPage(data.next_page), className: "h-7 text-xs cursor-pointer", children: t('purchasesPurchasesTab.nextPage') })] })] }))] })) : (jsx(Card, { className: "shadow-sm border border-dashed", style: { borderColor: 'oklch(.922 0 0)' }, children: jsxs(CardContent, { className: "p-8 text-center", children: [jsx(ShoppingBag, { className: "h-10 w-10 mx-auto text-gray-300 mb-3" }), jsx("p", { className: "text-sm text-gray-400", children: debouncedSearch.trim()
+    return (jsxs("div", { className: "space-y-4", children: [jsxs("div", { className: "relative", children: [jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" }), jsx(Input, { value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: t('purchasesPurchasesTab.searchPlaceholder'), className: "pl-9" }), isFetching && !isLoading && (jsx(LoaderCircle, { className: "absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 animate-spin text-gray-400" }))] }), jsxs("div", { className: "flex flex-col sm:flex-row gap-2", children: [jsxs(Select$1, { value: statusFilter, onValueChange: setStatusFilter, children: [jsx(SelectTrigger, { className: "w-full sm:w-[160px]", children: jsx(SelectValue, { placeholder: t('purchasesPurchasesTab.filterStatusPlaceholder') }) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "all", children: t('purchasesPurchasesTab.filterAllStatuses') }), jsx(SelectItem, { value: "active", children: t('purchasesPurchasesTab.filterActive') }), jsx(SelectItem, { value: "trialing", children: t('purchasesPurchasesTab.filterTrialing') }), jsx(SelectItem, { value: "canceled", children: t('purchasesPurchasesTab.filterCanceled') }), jsx(SelectItem, { value: "past_due", children: t('purchasesPurchasesTab.filterPastDue') })] })] }), jsxs(Select$1, { value: typeFilter, onValueChange: setTypeFilter, children: [jsx(SelectTrigger, { className: "w-full sm:w-[160px]", children: jsx(SelectValue, { placeholder: t('purchasesPurchasesTab.filterTypePlaceholder') }) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "all", children: t('purchasesPurchasesTab.filterAllTypes') }), jsx(SelectItem, { value: "mentor", children: t('purchasesPurchasesTab.filterAgent') }), jsx(SelectItem, { value: "course", children: t('purchasesPurchasesTab.filterCourse') }), jsx(SelectItem, { value: "program", children: t('purchasesPurchasesTab.filterProgram') }), jsx(SelectItem, { value: "pathway", children: t('purchasesPurchasesTab.filterPathway') })] })] }), data && (jsx("span", { className: "text-xs text-gray-400 self-center ml-auto", children: t('purchasesPurchasesTab.purchaseCount', { count: data.count }) }))] }), isLoading ? (jsx("div", { className: "space-y-2", children: [1, 2, 3].map((i) => (jsx(Skeleton, { className: "h-24 w-full" }, i))) })) : (data === null || data === void 0 ? void 0 : data.results) && data.results.length > 0 ? (jsxs(Fragment$1, { children: [jsx("div", { className: "space-y-2", children: data.results.map((sub) => (jsx(SubscriptionCard, { sub: sub, onClick: () => setSelectedSubscription(sub) }, sub.unique_id))) }), (data.previous_page !== null || data.next_page !== null) && (jsxs("div", { className: "flex items-center justify-between pt-2", children: [jsx("span", { className: "text-xs text-gray-400", children: t('purchasesPurchasesTab.paginationTotal', { count: data.count }) }), jsxs("div", { className: "flex items-center gap-2", children: [jsx(Button$1, { variant: "outline", size: "sm", disabled: data.previous_page === null, onClick: () => data.previous_page !== null && setPage(data.previous_page), className: "h-7 text-xs cursor-pointer", children: t('purchasesPurchasesTab.previousPage') }), jsx("span", { className: "text-xs text-gray-500", children: t('purchasesPurchasesTab.pageIndicator', { page }) }), jsx(Button$1, { variant: "outline", size: "sm", disabled: data.next_page === null, onClick: () => data.next_page !== null && setPage(data.next_page), className: "h-7 text-xs cursor-pointer", children: t('purchasesPurchasesTab.nextPage') })] })] }))] })) : (jsx(Card$1, { className: "shadow-sm border border-dashed", style: { borderColor: 'oklch(.922 0 0)' }, children: jsxs(CardContent, { className: "p-8 text-center", children: [jsx(ShoppingBag, { className: "h-10 w-10 mx-auto text-gray-300 mb-3" }), jsx("p", { className: "text-sm text-gray-400", children: debouncedSearch.trim()
                                 ? t('purchasesPurchasesTab.emptySearchResult')
                                 : t('purchasesPurchasesTab.emptyNoPurchases') })] }) }))] }));
 }
@@ -165230,7 +165590,7 @@ function formatLocale(locale) {
     "q": formatQuarter,
     "Q": formatUnixTimestamp,
     "s": formatUnixTimestampSeconds,
-    "S": formatSeconds,
+    "S": formatSeconds$1,
     "u": formatWeekdayNumberMonday,
     "U": formatWeekNumberSunday,
     "V": formatWeekNumberISO,
@@ -165696,7 +166056,7 @@ function formatMinutes(d, p) {
   return pad$1(d.getMinutes(), p, 2);
 }
 
-function formatSeconds(d, p) {
+function formatSeconds$1(d, p) {
   return pad$1(d.getSeconds(), p, 2);
 }
 
@@ -178965,7 +179325,7 @@ function useGradebookData(type, org, username, page, search) {
             page,
             page_size: PAGE_SIZE$e,
             platform_key: org,
-            ...(trimmed ? { search: trimmed } : {}),
+            ...(trimmed ? { course_name: trimmed } : {}),
         },
     }, { skip: type !== 'courses', refetchOnMountOrArgChange: true });
     const programsQ = useGetUserEnrolledProgramsQuery([{ username, platformKey: org }], { skip: type !== 'programs' });
@@ -179116,7 +179476,7 @@ function GradebookCard({ row, icon: Icon, onClick, }) {
     var _a;
     const t = useT();
     const clickable = !!onClick;
-    return (jsx(Card, { className: cn('shadow-sm border transition-colors', clickable && 'hover:border-blue-200 cursor-pointer'), style: { borderColor: 'oklch(.922 0 0)' }, onClick: onClick, role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined, onKeyDown: clickable
+    return (jsx(Card$1, { className: cn('shadow-sm border transition-colors', clickable && 'hover:border-blue-200 cursor-pointer'), style: { borderColor: 'oklch(.922 0 0)' }, onClick: onClick, role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined, onKeyDown: clickable
             ? (e) => {
                 if (e.key === 'Enter' || e.key === ' ') {
                     e.preventDefault();
@@ -219032,6 +219392,607 @@ function ChatHistoryTab({ org, username }) {
                                             : t('chatHistoryChatHistoryTab.conversation') }) }), jsx("div", { className: "mx-auto max-w-full overflow-x-hidden", children: selectedSession && (jsx(ConversationPreview, { org: org, username: username, session: selectedSession, agent: resolveAgent(selectedSession) })) })] }) })] }), jsx(TabsContent, { value: "exports", className: "mt-0 min-h-0 flex-1 overflow-y-auto data-[state=inactive]:hidden", children: jsx(ReportHistory, { org: org, username: username, onDownload: downloadFromUrl }) })] }));
 }
 
+/**
+ * The info icon that sits on every analytics card and, on hover or keyboard
+ * focus, explains what the card measures. The description doubles as the
+ * accessible name so screen readers get it without needing the hover.
+ *
+ * Uses the tooltip primitives directly rather than the shared `TooltipContent`
+ * because analytics wants a light popover, while `TooltipContent` is the dark
+ * `bg-primary` style the rest of the app relies on.
+ */
+function CardInfoIcon({ title, description, className }) {
+    return (jsxs(Tooltip$1, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx("button", { type: "button", "aria-label": description, className: cn('shrink-0 cursor-help rounded p-1 text-[#898989] transition-colors hover:bg-gray-100 hover:text-[#38A1E5] focus-visible:ring-2 focus-visible:ring-[#38A1E5] focus-visible:outline-none', className), children: jsx(Info$3, { className: "h-4 w-4", "aria-hidden": "true" }) }) }), jsx(Portal$2, { children: jsxs(Content2$3, { "data-slot": "tooltip-content", side: "top", align: "center", sideOffset: 6, collisionPadding: 12, className: "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 z-50 max-w-[260px] rounded-lg border border-[oklch(0.922_0_0)] bg-white p-3 shadow-lg", children: [title && (jsx("div", { "data-slot": "tooltip-title", className: "mb-1 text-sm font-semibold text-[#484848]", children: title })), jsx("p", { "data-slot": "tooltip-description", className: "text-sm leading-relaxed text-[#646464]", children: description })] }) })] }));
+}
+
+/**
+ * Chart color system for the analytics surface.
+ *
+ * Single-series charts keep the app's established `#38A1E5`. Multi-series
+ * charts (spend stacked by service, spend by model) use a categorical palette
+ * validated for color-vision-deficiency separation on a white surface
+ * (worst adjacent-pair CVD ΔE 9.1, worst normal-vision ΔE 19.6 — OKLab ×100):
+ * hues are assigned in this fixed order, per entity, never cycled or reshuffled
+ * when a filter changes the series count.
+ *
+ * Three of the light-surface slots sit below 3:1 contrast against white, so
+ * every chart that uses them must carry visible direct labels or a table view
+ * (all of ours do — ranked rows and legends carry the values as text).
+ */
+const CHART_SERIES_COLORS = [
+    '#2a78d6', // blue
+    '#eb6834', // orange
+    '#1baf7a', // aqua
+    '#eda100', // yellow
+    '#e87ba4', // magenta
+    '#008300', // green
+];
+/**
+ * Color follows the entity: a service keeps its hue whether or not the other
+ * services are on screen. Services beyond this list fold into slots in first-
+ * seen order via {@link colorForSeries} rather than inventing new hues.
+ */
+const SERVICE_COLOR_ORDER = [
+    'chat',
+    'embeddings',
+    'memory',
+    'grading',
+    'moderation',
+    'call',
+];
+/**
+ * Stable color for a named series. Known services get their fixed slot; an
+ * unknown name hashes into the palette deterministically so the same name is
+ * the same color on every render and every chart.
+ */
+function colorForSeries(name) {
+    const fixed = SERVICE_COLOR_ORDER.indexOf(name);
+    if (fixed >= 0)
+        return CHART_SERIES_COLORS[fixed % CHART_SERIES_COLORS.length];
+    let hash = 0;
+    for (let i = 0; i < name.length; i++) {
+        hash = (hash * 31 + name.charCodeAt(i)) >>> 0;
+    }
+    return CHART_SERIES_COLORS[hash % CHART_SERIES_COLORS.length];
+}
+
+const LLM_USAGE_RANGES = ['today', '7d', '30d', '90d', 'all_time'];
+const DEFAULT_LLM_USAGE_RANGE = '30d';
+/** Buckets that keep the time axis readable for the chosen span. */
+function granularityForRange(range) {
+    if (range === '90d')
+        return 'week';
+    if (range === 'all_time')
+        return 'month';
+    return 'day';
+}
+/** The next wider range, offered from the empty state. */
+function widerRange(range) {
+    if (range === 'all_time')
+        return null;
+    if (range === '90d')
+        return 'all_time';
+    return '90d';
+}
+const DAY_MS = 86400000;
+const DAYS_IN_RANGE = { today: 1, '7d': 7, '30d': 30 };
+/**
+ * Spend buckets for the chart. Daily ranges get every day of the window, with
+ * zero where the backend sent no bucket (it omits empty days), so the axis is
+ * continuous. Weekly and monthly ranges use the buckets as returned.
+ */
+function buildSpendSeries(points, range, now = new Date()) {
+    var _a;
+    const days = DAYS_IN_RANGE[range];
+    if (!days || granularityForRange(range) !== 'day')
+        return points;
+    const byDate = new Map(points.map((point) => [point.date, point.totalCost]));
+    const series = [];
+    for (let offset = days - 1; offset >= 0; offset--) {
+        const date = new Date(now.getTime() - offset * DAY_MS).toISOString().slice(0, 10);
+        series.push({ date, totalCost: (_a = byDate.get(date)) !== null && _a !== void 0 ? _a : 0 });
+    }
+    return series;
+}
+/** Axis ceiling and ticks on a 1-2-5 step, so labels land on clean numbers. */
+function niceScale(max, tickCount = 4) {
+    if (!Number.isFinite(max) || max <= 0)
+        return { max: 1, ticks: [0, 0.25, 0.5, 0.75, 1] };
+    const rough = max / tickCount;
+    const magnitude = 10 ** Math.floor(Math.log10(rough));
+    const residual = rough / magnitude;
+    const step = (residual <= 1 ? 1 : residual <= 2 ? 2 : residual <= 5 ? 5 : 10) * magnitude;
+    const top = Math.ceil(max / step - 1e-9) * step;
+    const ticks = [];
+    for (let value = 0; value <= top + step / 2; value += step) {
+        ticks.push(Number(value.toPrecision(12)));
+    }
+    return { max: ticks[ticks.length - 1], ticks };
+}
+const usd = (fractionDigits) => new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    minimumFractionDigits: fractionDigits,
+    maximumFractionDigits: fractionDigits,
+});
+/**
+ * Dollars with enough precision to be meaningful: small values keep four
+ * decimals. `precise` keeps four decimals for anything under a dollar — for
+ * per-request figures (a trace, a step, the average), where $0.0147 and
+ * $0.0102 must not both read as $0.01.
+ */
+function formatCost(value, { precise = false } = {}) {
+    if (value === null || value === undefined || !Number.isFinite(value))
+        return '—';
+    if (value === 0)
+        return usd(2).format(0);
+    const abs = Math.abs(value);
+    if (abs < 0.0001)
+        return `<${usd(4).format(0.0001)}`;
+    if (abs < (precise ? 1 : 0.01))
+        return usd(4).format(value);
+    return usd(2).format(value);
+}
+/** Axis labels: whole dollars on big steps, cents (or finer) on small ones; zero is `$0`. */
+function formatAxisCost(value, step) {
+    if (value === 0)
+        return usd(0).format(0);
+    const decimals = step >= 1 ? 0 : Math.min(4, Math.max(2, Math.ceil(-Math.log10(step))));
+    return usd(decimals).format(value);
+}
+function formatCompact(value) {
+    if (value === null || value === undefined || !Number.isFinite(value))
+        return '—';
+    return new Intl.NumberFormat('en-US', { notation: 'compact', maximumFractionDigits: 1 }).format(value);
+}
+function formatInteger(value) {
+    if (value === null || value === undefined || !Number.isFinite(value))
+        return '—';
+    return Math.round(value).toLocaleString('en-US');
+}
+/** Trace and observation latency arrive in seconds. */
+function formatSeconds(value) {
+    if (value === null || value === undefined || !Number.isFinite(value))
+        return '—';
+    return `${value < 10 ? value.toFixed(2) : value.toFixed(1)}s`;
+}
+/** `YYYY-MM-DD` bucket keys are UTC calendar dates. */
+function formatBucket(date, granularity) {
+    const parsed = new Date(`${date.slice(0, 10)}T00:00:00Z`);
+    if (Number.isNaN(parsed.getTime()))
+        return date;
+    return parsed.toLocaleDateString('en-US', granularity === 'month'
+        ? { month: 'short', year: 'numeric', timeZone: 'UTC' }
+        : { month: 'short', day: 'numeric', timeZone: 'UTC' });
+}
+function formatWhen(iso) {
+    if (!iso)
+        return '—';
+    const date = new Date(iso);
+    if (Number.isNaN(date.getTime()))
+        return '—';
+    return date.toLocaleString('en-US', {
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+    });
+}
+/** `0feb37e6-d125-…-7c9ee0a252e7` → `0feb…52e7`; the full id stays in a title. */
+function shortId(id) {
+    if (!id)
+        return '—';
+    return id.length > 12 ? `${id.slice(0, 4)}…${id.slice(-4)}` : id;
+}
+/**
+ * Keeps the biggest rows and folds the rest into one "Other" row, so a long
+ * tail never floods the card.
+ */
+function foldTail(rows, keep, otherLabel) {
+    if (rows.length <= keep + 1)
+        return rows;
+    const head = rows.slice(0, keep);
+    const tail = rows.slice(keep);
+    return [
+        ...head,
+        {
+            key: '__other__',
+            label: otherLabel,
+            totalCost: tail.reduce((sum, row) => sum + row.totalCost, 0),
+            count: tail.reduce((sum, row) => sum + row.count, 0),
+            isOther: true,
+        },
+    ];
+}
+/** Share of a total as a whole percent, keeping tiny non-zero shares visible. */
+function sharePercent(value, total) {
+    if (!total || value <= 0)
+        return 0;
+    const pct = (value / total) * 100;
+    return pct < 1 ? Math.round(pct * 10) / 10 : Math.round(pct);
+}
+
+/** Single series, so the palette's lead hue; it clears 3:1 on white. */
+const BAR_COLOR = CHART_SERIES_COLORS[0];
+const PLOT_HEIGHT = 176;
+const MAX_X_LABELS = 5;
+/**
+ * Spend per bucket as columns: ≤24px wide, 4px rounded tops, square at the
+ * baseline, a hairline grid on clean ticks. Hover or arrow keys read one
+ * column into the readout above the plot; the same numbers are in a
+ * visually-hidden table for screen readers.
+ */
+function SpendChart({ points, granularity, }) {
+    const t = useT();
+    const [active, setActive] = useState(null);
+    const { max, ticks } = useMemo(() => niceScale(Math.max(0, ...points.map((point) => point.totalCost))), [points]);
+    const step = ticks.length > 1 ? ticks[1] - ticks[0] : max;
+    const labelIndexes = useMemo(() => {
+        if (points.length <= MAX_X_LABELS)
+            return new Set(points.map((_, index) => index));
+        const every = (points.length - 1) / (MAX_X_LABELS - 1);
+        return new Set(Array.from({ length: MAX_X_LABELS }, (_, i) => Math.round(i * every)));
+    }, [points]);
+    const onKeyDown = (event) => {
+        if (!points.length)
+            return;
+        const last = points.length - 1;
+        const current = active !== null && active !== void 0 ? active : last;
+        let next = null;
+        if (event.key === 'ArrowRight')
+            next = Math.min(last, active === null ? last : current + 1);
+        if (event.key === 'ArrowLeft')
+            next = Math.max(0, active === null ? last : current - 1);
+        if (event.key === 'Home')
+            next = 0;
+        if (event.key === 'End')
+            next = last;
+        if (next === null)
+            return;
+        event.preventDefault();
+        setActive(next);
+    };
+    const activePoint = active !== null ? points[active] : null;
+    return (jsxs("div", { className: "flex flex-col gap-2", children: [jsx("p", { className: "h-5 text-sm text-gray-600 dark:text-gray-300", "aria-live": "polite", children: activePoint && (jsxs(Fragment$1, { children: [jsx("span", { className: "font-semibold tabular-nums text-gray-900 dark:text-gray-100", children: formatCost(activePoint.totalCost) }), ' ', jsxs("span", { className: "text-gray-500 dark:text-gray-400", children: ["\u00B7 ", formatBucket(activePoint.date, granularity)] })] })) }), jsxs("div", { className: "flex gap-2", children: [jsx("div", { className: "relative w-12 flex-shrink-0 text-right text-[11px] tabular-nums text-gray-500 dark:text-gray-400", style: { height: PLOT_HEIGHT }, "aria-hidden": "true", children: ticks.map((tick) => (jsx("span", { className: "absolute right-0 -translate-y-1/2 leading-none", style: { top: `${(1 - tick / max) * 100}%` }, children: formatAxisCost(tick, step) }, tick))) }), jsxs("div", { className: "min-w-0 flex-1", children: [jsxs("div", { role: "group", tabIndex: 0, "aria-label": t('profileLlmUsage.chartAria'), onKeyDown: onKeyDown, onBlur: () => setActive(null), onMouseLeave: () => setActive(null), className: "relative rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500", style: { height: PLOT_HEIGHT }, children: [ticks.map((tick) => (jsx("div", { className: tick === 0
+                                            ? 'absolute inset-x-0 border-t border-gray-300 dark:border-gray-600'
+                                            : 'absolute inset-x-0 border-t border-gray-100 dark:border-gray-800', style: { top: `${(1 - tick / max) * 100}%` }, "aria-hidden": "true" }, tick))), jsx("div", { className: "absolute inset-0 flex items-end gap-[2px]", "aria-hidden": "true", children: points.map((point, index) => {
+                                            const height = max > 0 ? (point.totalCost / max) * 100 : 0;
+                                            const isActive = index === active;
+                                            return (jsx("div", { 
+                                                // The whole column slot is the hover target, not just the bar.
+                                                className: "flex h-full min-w-0 flex-1 items-end justify-center", onMouseEnter: () => setActive(index), children: jsx("div", { className: "w-full max-w-[24px] rounded-t-[4px] transition-opacity", style: {
+                                                        height: point.totalCost > 0 ? `max(${height}%, 2px)` : 0,
+                                                        background: BAR_COLOR,
+                                                        opacity: active === null || isActive ? 1 : 0.45,
+                                                    } }) }, point.date));
+                                        }) })] }), jsx("div", { className: "relative mt-2 h-4 text-[11px] text-gray-500 dark:text-gray-400", "aria-hidden": "true", children: points.map((point, index) => labelIndexes.has(index) ? (jsx("span", { className: "absolute whitespace-nowrap", style: index === 0
+                                        ? { left: 0 }
+                                        : index === points.length - 1
+                                            ? { right: 0 }
+                                            : {
+                                                left: `${((index + 0.5) / points.length) * 100}%`,
+                                                transform: 'translateX(-50%)',
+                                            }, children: formatBucket(point.date, granularity) }, point.date)) : null) })] })] }), jsxs("table", { className: "sr-only", children: [jsx("caption", { children: t('profileLlmUsage.chartTableCaption') }), jsx("thead", { children: jsxs("tr", { children: [jsx("th", { scope: "col", children: t('profileLlmUsage.colPeriod') }), jsx("th", { scope: "col", children: t('profileLlmUsage.colCost') })] }) }), jsx("tbody", { children: points.map((point) => (jsxs("tr", { children: [jsx("td", { children: formatBucket(point.date, granularity) }), jsx("td", { children: formatCost(point.totalCost) })] }, point.date))) })] })] }));
+}
+
+const RANGE_LABEL_KEYS = {
+    today: 'rangeToday',
+    '7d': 'range7d',
+    '30d': 'range30d',
+    '90d': 'range90d',
+    all_time: 'rangeAllTime',
+};
+const PERIOD_LABEL_KEYS = {
+    today: 'periodToday',
+    '7d': 'period7d',
+    '30d': 'period30d',
+    '90d': 'period90d',
+    all_time: 'periodAllTime',
+};
+const CHART_SUBTITLE_KEYS = {
+    day: 'chartSubtitleDay',
+    week: 'chartSubtitleWeek',
+    month: 'chartSubtitleMonth',
+};
+const BREAKDOWN_ROWS = 5;
+const MODEL_BAR_COLOR = CHART_SERIES_COLORS[0];
+const CARD = 'rounded-xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-950';
+function Card({ title, subtitle, aside, children, className, bodyClassName, }) {
+    return (jsxs("section", { className: cn(CARD, className), "aria-label": title, children: [jsxs("div", { className: "flex items-start justify-between gap-4 px-5 pt-5", children: [jsxs("div", { className: "min-w-0", children: [jsx("h4", { className: "text-[15px] font-semibold text-gray-900 dark:text-gray-100", children: title }), subtitle && (jsx("p", { className: "mt-0.5 text-[13px] text-gray-500 dark:text-gray-400", children: subtitle }))] }), aside] }), jsx("div", { className: cn('px-5 pb-5 pt-4', bodyClassName), children: children })] }));
+}
+function RangeControl({ value, onChange, }) {
+    const t = useT();
+    const groupRef = useRef(null);
+    const onKeyDown = (event, index) => {
+        var _a, _b;
+        const last = LLM_USAGE_RANGES.length - 1;
+        let next = null;
+        if (event.key === 'ArrowRight' || event.key === 'ArrowDown')
+            next = index === last ? 0 : index + 1;
+        if (event.key === 'ArrowLeft' || event.key === 'ArrowUp')
+            next = index === 0 ? last : index - 1;
+        if (next === null)
+            return;
+        event.preventDefault();
+        onChange(LLM_USAGE_RANGES[next]);
+        (_b = (_a = groupRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[role="radio"]')[next]) === null || _b === void 0 ? void 0 : _b.focus();
+    };
+    return (jsx("div", { ref: groupRef, role: "radiogroup", "aria-label": t('profileLlmUsage.rangeLabel'), className: "inline-flex max-w-full gap-0.5 overflow-x-auto rounded-lg bg-gray-100 p-[3px] dark:bg-gray-800", children: LLM_USAGE_RANGES.map((range, index) => {
+            const checked = range === value;
+            return (jsx("button", { type: "button", role: "radio", "aria-checked": checked, tabIndex: checked ? 0 : -1, onClick: () => onChange(range), onKeyDown: (event) => onKeyDown(event, index), className: cn('h-8 whitespace-nowrap rounded-md px-3 text-[13px] transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500', checked
+                    ? 'bg-white font-semibold text-gray-900 shadow-sm ring-1 ring-gray-200 dark:bg-gray-950 dark:text-gray-100 dark:ring-gray-700'
+                    : 'font-medium text-gray-600 hover:text-gray-900 dark:text-gray-300'), children: t(`profileLlmUsage.${RANGE_LABEL_KEYS[range]}`) }, range));
+        }) }));
+}
+function StatTile({ label, value, sub, loading, }) {
+    return (jsxs("div", { className: cn(CARD, 'flex flex-col gap-2 p-4'), children: [jsx("p", { className: "text-[13px] font-medium text-gray-500 dark:text-gray-400", children: label }), loading ? (jsxs(Fragment$1, { children: [jsx(Skeleton, { className: "h-7 w-24" }), jsx(Skeleton, { className: "h-4 w-20" })] })) : (jsxs(Fragment$1, { children: [jsx("p", { className: "text-[26px] font-semibold leading-tight tracking-tight text-gray-900 dark:text-gray-100", children: value }), jsx("p", { className: "min-h-[1rem] text-xs text-gray-500 tabular-nums dark:text-gray-400", children: sub })] }))] }));
+}
+function StateMessage({ icon, tone = 'neutral', title, body, action, }) {
+    return (jsxs("div", { className: cn(CARD, 'flex flex-col items-center gap-3 px-6 py-14 text-center'), role: tone === 'error' ? 'alert' : undefined, children: [jsx("div", { className: cn('flex h-12 w-12 items-center justify-center rounded-xl', tone === 'error'
+                    ? 'bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300'
+                    : 'bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400'), "aria-hidden": "true", children: icon }), jsx("h4", { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: title }), jsx("p", { className: "max-w-sm text-sm leading-relaxed text-gray-500 dark:text-gray-400", children: body }), action] }));
+}
+function RankedBars({ rows, total, colorFor, }) {
+    return (jsx("ul", { className: "flex flex-col gap-3", children: rows.map((row) => {
+            const share = sharePercent(row.totalCost, total);
+            return (jsxs("li", { className: "flex flex-col gap-1.5", children: [jsxs("div", { className: "flex items-baseline justify-between gap-3 text-[13px]", children: [jsxs("span", { className: "flex min-w-0 items-center gap-2 font-medium text-gray-900 dark:text-gray-100", children: [jsx("span", { className: "h-2 w-2 flex-shrink-0 rounded-[2px]", style: { background: colorFor(row) }, "aria-hidden": "true" }), jsx("span", { className: "truncate", title: row.label, children: row.label })] }), jsxs("span", { className: "whitespace-nowrap tabular-nums text-gray-700 dark:text-gray-300", children: [formatCost(row.totalCost), jsxs("span", { className: "text-gray-500 dark:text-gray-400", children: [" \u00B7 ", share, "%"] })] })] }), jsx("div", { className: "h-1.5 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800", "aria-hidden": "true", children: jsx("div", { className: "h-full rounded-full", style: { width: `${Math.min(100, share)}%`, background: colorFor(row) } }) })] }, row.key));
+        }) }));
+}
+function BreakdownSkeleton() {
+    return (jsx("div", { className: "flex flex-col gap-4", children: [0, 1, 2, 3].map((i) => (jsxs("div", { className: "flex flex-col gap-2", children: [jsx(Skeleton, { className: "h-4 w-3/4" }), jsx(Skeleton, { className: "h-1.5 w-full" })] }, i))) }));
+}
+function SectionError() {
+    const t = useT();
+    return (jsxs("p", { className: "flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400", children: [jsx(CircleAlert, { className: "h-4 w-4 text-red-600", "aria-hidden": "true" }), t('profileLlmUsage.sectionError')] }));
+}
+const observationTokens = (o) => {
+    var _a, _b, _c, _d, _e, _f;
+    return ({
+        input: (_b = (_a = o.usage) === null || _a === void 0 ? void 0 : _a.input) !== null && _b !== void 0 ? _b : o.promptTokens,
+        output: (_d = (_c = o.usage) === null || _c === void 0 ? void 0 : _c.output) !== null && _d !== void 0 ? _d : o.completionTokens,
+        total: (_f = (_e = o.usage) === null || _e === void 0 ? void 0 : _e.total) !== null && _f !== void 0 ? _f : o.totalTokens,
+    });
+};
+const observationCost = (o) => { var _a, _b, _c; return (_b = (_a = o.calculatedTotalCost) !== null && _a !== void 0 ? _a : o.totalCost) !== null && _b !== void 0 ? _b : (_c = o.costDetails) === null || _c === void 0 ? void 0 : _c.total; };
+function TraceSteps({ steps, isLoading, error, }) {
+    const t = useT();
+    if (isLoading) {
+        return (jsx("p", { className: "px-4 py-3 text-sm text-gray-500 dark:text-gray-400", children: t('profileLlmUsage.stepsLoading') }));
+    }
+    if (error) {
+        return (jsx("p", { className: "px-4 py-3 text-sm text-gray-500 dark:text-gray-400", children: t('profileLlmUsage.stepsError') }));
+    }
+    if (!steps.length) {
+        return (jsx("p", { className: "px-4 py-3 text-sm text-gray-500 dark:text-gray-400", children: t('profileLlmUsage.stepsEmpty') }));
+    }
+    const cell = 'px-3 py-2 text-right tabular-nums';
+    return (jsx("div", { className: "overflow-x-auto", children: jsxs("table", { className: "w-full text-[12.5px]", children: [jsx("thead", { children: jsxs("tr", { className: "text-left text-gray-500 dark:text-gray-400", children: [jsx("th", { scope: "col", className: "px-4 py-2 font-medium", children: t('profileLlmUsage.colStep') }), jsx("th", { scope: "col", className: "px-3 py-2 font-medium", children: t('profileLlmUsage.colModel') }), jsx("th", { scope: "col", className: cn(cell, 'font-medium'), children: t('profileLlmUsage.colInput') }), jsx("th", { scope: "col", className: cn(cell, 'font-medium'), children: t('profileLlmUsage.colOutput') }), jsx("th", { scope: "col", className: cn(cell, 'font-medium'), children: t('profileLlmUsage.colTotal') }), jsx("th", { scope: "col", className: cn(cell, 'font-medium'), children: t('profileLlmUsage.colLatency') }), jsx("th", { scope: "col", className: "px-4 py-2 text-right font-medium", children: t('profileLlmUsage.colCost') })] }) }), jsx("tbody", { children: steps.map((step) => {
+                        const tokens = observationTokens(step);
+                        return (jsxs("tr", { className: "border-t border-gray-100 text-gray-700 dark:border-gray-800 dark:text-gray-300", children: [jsx("td", { className: "px-4 py-2 font-medium text-gray-900 dark:text-gray-100", children: step.name || step.type || '—' }), jsx("td", { className: "px-3 py-2", children: step.providedModelName || step.model || '—' }), jsx("td", { className: cell, children: formatInteger(tokens.input) }), jsx("td", { className: cell, children: formatInteger(tokens.output) }), jsx("td", { className: cell, children: formatInteger(tokens.total) }), jsx("td", { className: cell, children: formatSeconds(step.latency) }), jsx("td", { className: "px-4 py-2 text-right font-semibold tabular-nums text-gray-900 dark:text-gray-100", children: formatCost(observationCost(step), { precise: true }) })] }, step.id));
+                    }) })] }) }));
+}
+/**
+ * The profile "Usage" tab: AI spend, tokens and requests for the profile on
+ * screen. Every request names that user, so an admin viewing someone else
+ * sees their rows rather than the whole platform's.
+ */
+function LlmUsageTab({ org, username, isOwnProfile = true }) {
+    var _a;
+    const t = useT();
+    const [range, setRange] = useState(DEFAULT_LLM_USAGE_RANGE);
+    const [page, setPage] = useState(1);
+    const [openTraceId, setOpenTraceId] = useState(null);
+    const granularity = granularityForRange(range);
+    const scope = { platformKey: org, username, date_filter: range };
+    const summary = useUserLlmUsageSummary(scope);
+    const spend = useUserLlmSpendOverTime({ ...scope, granularity });
+    const byModel = useUserLlmCostByModel({ ...scope, limit: 20 });
+    const byService = useUserLlmCostByService(scope);
+    const activity = useUserLlmRecentActivity({
+        ...scope,
+        page,
+        limit: USER_LLM_RECENT_ACTIVITY_PAGE_SIZE,
+    });
+    const steps = useUserLlmTraceObservations({ ...scope, traceId: openTraceId });
+    const changeRange = (next) => {
+        setRange(next);
+        setPage(1);
+        setOpenTraceId(null);
+    };
+    const refreshAll = () => {
+        summary.refetch();
+        spend.refetch();
+        byModel.refetch();
+        byService.refetch();
+        activity.refetch();
+        if (openTraceId)
+            steps.refetch();
+    };
+    const series = useMemo(() => buildSpendSeries(spend.points, range), [spend.points, range]);
+    const modelRows = useMemo(() => foldTail(byModel.models.map((row, index) => ({
+        key: row.model || `unknown-${index}`,
+        label: row.model || t('profileLlmUsage.unknownModel'),
+        totalCost: row.totalCost,
+        count: row.count,
+    })), BREAKDOWN_ROWS, t('profileLlmUsage.otherRow')), [byModel.models, t]);
+    const serviceRows = useMemo(() => foldTail(byService.services.map((row, index) => ({
+        key: row.service || `unknown-${index}`,
+        label: row.service || t('profileLlmUsage.unknownService'),
+        totalCost: row.totalCost,
+        count: row.count,
+    })), BREAKDOWN_ROWS, t('profileLlmUsage.otherRow')), [byService.services, t]);
+    const modelTotal = modelRows.reduce((sum, row) => sum + row.totalCost, 0);
+    const serviceTotal = serviceRows.reduce((sum, row) => sum + row.totalCost, 0);
+    const totals = summary.summary;
+    const periodLabel = t(`profileLlmUsage.${PERIOD_LABEL_KEYS[range]}`);
+    const next = widerRange(range);
+    const errorCopy = (error) => {
+        if (error.kind === 'unavailable') {
+            return {
+                title: t('profileLlmUsage.errorUnavailableTitle'),
+                body: t('profileLlmUsage.errorUnavailableBody'),
+            };
+        }
+        if (error.kind === 'unauthorized') {
+            return {
+                title: t('profileLlmUsage.errorUnauthorizedTitle'),
+                body: t('profileLlmUsage.errorUnauthorizedBody'),
+            };
+        }
+        if (error.kind === 'forbidden' || error.kind === 'not_found') {
+            return {
+                title: t('profileLlmUsage.errorForbiddenTitle'),
+                body: t('profileLlmUsage.errorForbiddenBody'),
+            };
+        }
+        return {
+            title: t('profileLlmUsage.errorUnknownTitle'),
+            body: t('profileLlmUsage.errorUnknownBody'),
+        };
+    };
+    const meta = activity.meta;
+    const pageSize = (meta === null || meta === void 0 ? void 0 : meta.limit) || USER_LLM_RECENT_ACTIVITY_PAGE_SIZE;
+    const from = meta && meta.totalItems > 0 ? (meta.page - 1) * pageSize + 1 : 0;
+    const to = meta ? Math.min(meta.page * pageSize, meta.totalItems) : 0;
+    const totalPages = (_a = meta === null || meta === void 0 ? void 0 : meta.totalPages) !== null && _a !== void 0 ? _a : 1;
+    let body;
+    if (summary.error) {
+        const copy = errorCopy(summary.error);
+        body = (jsx(StateMessage, { tone: "error", icon: jsx(CircleAlert, { className: "h-6 w-6" }), title: copy.title, body: copy.body, action: summary.error.kind !== 'unauthorized' && (jsx(Button$1, { onClick: refreshAll, className: "mt-1 bg-blue-600 text-white hover:bg-blue-700", children: t('profileLlmUsage.tryAgain') })) }));
+    }
+    else if (summary.isEmpty) {
+        body = (jsx(StateMessage, { icon: jsx(Inbox, { className: "h-6 w-6" }), title: t('profileLlmUsage.emptyTitle'), body: t('profileLlmUsage.emptyBody'), action: next && (jsx(Button$1, { variant: "outline", onClick: () => changeRange(next), className: "mt-1", children: next === 'all_time'
+                    ? t('profileLlmUsage.emptyActionAll')
+                    : t('profileLlmUsage.emptyAction90') })) }));
+    }
+    else {
+        const loadingTotals = summary.isLoading || summary.isIdle;
+        body = (jsxs(Fragment$1, { children: [jsxs("div", { className: "grid grid-cols-2 gap-3 xl:grid-cols-4", children: [jsx(StatTile, { label: t('profileLlmUsage.kpiSpend'), value: formatCost(totals === null || totals === void 0 ? void 0 : totals.totalCost), sub: periodLabel, loading: loadingTotals }), jsx(StatTile, { label: t('profileLlmUsage.kpiTokens'), value: formatCompact(totals === null || totals === void 0 ? void 0 : totals.totalTokens), sub: totals && totals.count > 0
+                                ? t('profileLlmUsage.kpiTokensSub', {
+                                    value: formatCompact(totals.totalTokens / totals.count),
+                                })
+                                : undefined, loading: loadingTotals }), jsx(StatTile, { label: t('profileLlmUsage.kpiRequests'), value: formatInteger(totals === null || totals === void 0 ? void 0 : totals.count), sub: t('profileLlmUsage.kpiRequestsSub'), loading: loadingTotals }), jsx(StatTile, { label: t('profileLlmUsage.kpiAvgCost'), value: totals && totals.count > 0
+                                ? formatCost(totals.totalCost / totals.count, { precise: true })
+                                : '—', sub: t('profileLlmUsage.kpiAvgCostSub'), loading: loadingTotals })] }), jsx(Card, { title: t('profileLlmUsage.chartTitle'), subtitle: t(`profileLlmUsage.${CHART_SUBTITLE_KEYS[granularity]}`), aside: totals && (jsx("span", { className: "text-[15px] font-semibold tabular-nums text-gray-900 dark:text-gray-100", children: formatCost(totals.totalCost) })), bodyClassName: "pt-2", children: spend.isLoading || spend.isIdle ? (jsx(Skeleton, { className: "h-[220px] w-full" })) : spend.error ? (jsx(SectionError, {})) : series.length === 0 ? (jsx("p", { className: "py-10 text-center text-sm text-gray-500 dark:text-gray-400", children: t('profileLlmUsage.chartNoData') })) : (jsx(SpendChart, { points: series, granularity: granularity })) }), jsxs("div", { className: "grid grid-cols-1 gap-3 md:grid-cols-2", children: [jsx(Card, { title: t('profileLlmUsage.byModelTitle'), subtitle: t('profileLlmUsage.byModelSubtitle'), children: byModel.isLoading || byModel.isIdle ? (jsx(BreakdownSkeleton, {})) : byModel.error ? (jsx(SectionError, {})) : modelRows.length === 0 ? (jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: t('profileLlmUsage.breakdownEmpty') })) : (jsx(RankedBars, { rows: modelRows, total: modelTotal, colorFor: () => MODEL_BAR_COLOR })) }), jsx(Card, { title: t('profileLlmUsage.byServiceTitle'), subtitle: t('profileLlmUsage.byServiceSubtitle'), children: byService.isLoading || byService.isIdle ? (jsx(BreakdownSkeleton, {})) : byService.error ? (jsx(SectionError, {})) : serviceRows.length === 0 ? (jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: t('profileLlmUsage.breakdownEmpty') })) : (jsx(RankedBars, { rows: serviceRows, total: serviceTotal, 
+                                // Colour follows the service, so "chat" is the same hue everywhere.
+                                colorFor: (row) => (row.isOther ? '#9ca3af' : colorForSeries(row.key)) })) })] }), jsxs("section", { className: cn(CARD, 'overflow-hidden'), "aria-labelledby": "llm-activity-heading", children: [jsxs("div", { className: "border-b border-gray-200 px-5 py-4 dark:border-gray-800", children: [jsx("h4", { id: "llm-activity-heading", className: "text-[15px] font-semibold text-gray-900 dark:text-gray-100", children: t('profileLlmUsage.activityTitle') }), jsx("p", { className: "mt-0.5 text-[13px] text-gray-500 dark:text-gray-400", children: t('profileLlmUsage.activitySubtitle') })] }), activity.isLoading || activity.isIdle ? (jsx("div", { className: "flex flex-col gap-3 p-5", children: [0, 1, 2, 3].map((i) => (jsx(Skeleton, { className: "h-8 w-full" }, i))) })) : activity.error ? (jsx("div", { className: "p-5", children: jsx(SectionError, {}) })) : activity.isEmpty || activity.rows.length === 0 ? (jsx("p", { className: "p-5 text-sm text-gray-500 dark:text-gray-400", children: t('profileLlmUsage.activityEmpty') })) : (jsxs(Fragment$1, { children: [jsx("div", { className: "overflow-x-auto", children: jsxs("table", { className: "w-full text-[13px]", children: [jsx("thead", { children: jsxs("tr", { className: "bg-gray-50 text-left text-gray-500 dark:bg-gray-900 dark:text-gray-400", children: [jsx("th", { scope: "col", className: "px-5 py-2.5 font-medium", children: t('profileLlmUsage.colWhen') }), jsx("th", { scope: "col", className: "px-3 py-2.5 font-medium", children: t('profileLlmUsage.colService') }), jsx("th", { scope: "col", className: "hidden px-3 py-2.5 font-medium md:table-cell", children: t('profileLlmUsage.colSession') }), jsx("th", { scope: "col", className: "px-3 py-2.5 text-right font-medium", children: t('profileLlmUsage.colLatency') }), jsx("th", { scope: "col", className: "px-3 py-2.5 text-right font-medium", children: t('profileLlmUsage.colCost') }), jsx("th", { scope: "col", className: "w-12 py-2.5 pl-2 pr-5", children: jsx("span", { className: "sr-only", children: t('profileLlmUsage.colDetails') }) })] }) }), jsx("tbody", { children: activity.rows.map((trace) => {
+                                                    const open = trace.id === openTraceId;
+                                                    const when = formatWhen(trace.timestamp);
+                                                    const service = trace.name || t('profileLlmUsage.unknownService');
+                                                    const stepsId = `llm-trace-${trace.id}-steps`;
+                                                    return (jsxs(Fragment$2, { children: [jsxs("tr", { className: cn('border-t border-gray-200 dark:border-gray-800', open && 'bg-gray-50 dark:bg-gray-900'), children: [jsx("td", { className: "whitespace-nowrap px-5 py-3 text-gray-900 dark:text-gray-100", children: when }), jsx("td", { className: "px-3 py-3", children: jsxs("span", { className: "inline-flex items-center gap-2 text-gray-700 dark:text-gray-300", children: [jsx("span", { className: "h-2 w-2 flex-shrink-0 rounded-[2px]", style: { background: colorForSeries(trace.name || '') }, "aria-hidden": "true" }), jsx("span", { className: "max-w-[16rem] truncate", title: service, children: service })] }) }), jsx("td", { className: "hidden px-3 py-3 font-mono text-xs text-gray-500 dark:text-gray-400 md:table-cell", title: trace.sessionId, children: shortId(trace.sessionId) }), jsx("td", { className: "px-3 py-3 text-right tabular-nums text-gray-700 dark:text-gray-300", children: formatSeconds(trace.latency) }), jsx("td", { className: "px-3 py-3 text-right font-semibold tabular-nums text-gray-900 dark:text-gray-100", children: formatCost(trace.totalCost, { precise: true }) }), jsx("td", { className: "py-2 pl-2 pr-5", children: jsx("button", { type: "button", "aria-expanded": open, "aria-controls": open ? stepsId : undefined, "aria-label": open
+                                                                                ? t('profileLlmUsage.hideSteps', { when })
+                                                                                : t('profileLlmUsage.showSteps', { when }), onClick: () => setOpenTraceId(open ? null : trace.id), className: cn('flex h-8 w-8 items-center justify-center rounded-md transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500', open
+                                                                                ? 'bg-gray-200 text-gray-900 dark:bg-gray-700 dark:text-gray-100'
+                                                                                : 'text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-gray-800'), children: open ? (jsx(ChevronDown, { className: "h-4 w-4", "aria-hidden": "true" })) : (jsx(ChevronRight, { className: "h-4 w-4", "aria-hidden": "true" })) }) })] }), open && (jsx("tr", { className: "bg-gray-50 dark:bg-gray-900", children: jsx("td", { colSpan: 6, className: "px-5 pb-4", children: jsx("div", { id: stepsId, className: "overflow-hidden rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-950", children: jsx(TraceSteps, { steps: steps.rows, isLoading: steps.isLoading, error: steps.error }) }) }) }))] }, trace.id));
+                                                }) })] }) }), meta && (jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3 border-t border-gray-200 px-5 py-3 dark:border-gray-800", children: [jsx("p", { className: "text-[13px] tabular-nums text-gray-500 dark:text-gray-400", children: t('profileLlmUsage.paginationSummary', {
+                                                from: formatInteger(from),
+                                                to: formatInteger(to),
+                                                total: formatInteger(meta.totalItems),
+                                            }) }), jsxs("div", { className: "flex gap-2", children: [jsxs(Button$1, { variant: "outline", size: "sm", className: "h-8 gap-1", disabled: page <= 1 || activity.isFetching, onClick: () => {
+                                                        setOpenTraceId(null);
+                                                        setPage((current) => Math.max(1, current - 1));
+                                                    }, children: [jsx(ChevronLeft, { className: "h-4 w-4", "aria-hidden": "true" }), t('profileLlmUsage.previous')] }), jsxs(Button$1, { variant: "outline", size: "sm", className: "h-8 gap-1", disabled: page >= totalPages || activity.isFetching, onClick: () => {
+                                                        setOpenTraceId(null);
+                                                        setPage((current) => current + 1);
+                                                    }, children: [t('profileLlmUsage.next'), jsx(ChevronRight, { className: "h-4 w-4", "aria-hidden": "true" })] })] })] }))] }))] })] }));
+    }
+    const isRefreshing = summary.isFetching ||
+        spend.isFetching ||
+        byModel.isFetching ||
+        byService.isFetching ||
+        activity.isFetching;
+    return (jsxs("div", { className: "flex flex-col gap-5", "data-testid": "llm-usage-tab", children: [jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [jsx(RangeControl, { value: range, onChange: changeRange }), jsxs("div", { className: "flex items-center gap-3", children: [jsxs("span", { className: "inline-flex items-center gap-1.5 text-[13px] text-gray-500 dark:text-gray-400", children: [jsx(Lock, { className: "h-3.5 w-3.5", "aria-hidden": "true" }), isOwnProfile
+                                        ? t('profileLlmUsage.scopeSelf')
+                                        : t('profileLlmUsage.scopeUser', { username })] }), jsx(Button$1, { variant: "outline", size: "icon", className: "h-9 w-9", onClick: refreshAll, disabled: isRefreshing, "aria-label": t('profileLlmUsage.refresh'), title: t('profileLlmUsage.refresh'), children: jsx(RefreshCw, { className: cn('h-4 w-4', isRefreshing && 'animate-spin'), "aria-hidden": "true" }) })] })] }), body] }));
+}
+
+const tabId = (id, mobile) => (mobile ? `${id}-tab-mobile` : `${id}-tab`);
+/** Arrow/Home/End handling for the tab variant, with automatic activation. */
+function useTabKeyboard(items, onSelect, mobile) {
+    const containerRef = useRef(null);
+    const onKeyDown = (event, index) => {
+        var _a, _b;
+        const last = items.length - 1;
+        let next = null;
+        if (event.key === 'ArrowDown' || event.key === 'ArrowRight')
+            next = index === last ? 0 : index + 1;
+        if (event.key === 'ArrowUp' || event.key === 'ArrowLeft')
+            next = index === 0 ? last : index - 1;
+        if (event.key === 'Home')
+            next = 0;
+        if (event.key === 'End')
+            next = last;
+        if (next === null)
+            return;
+        event.preventDefault();
+        const target = items[next];
+        onSelect(target.id);
+        (_b = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`[id="${tabId(target.id, mobile)}"]`)) === null || _b === void 0 ? void 0 : _b.focus();
+    };
+    return { containerRef, onKeyDown };
+}
+/** Grouped vertical navigation for the desktop sidebar. */
+function SettingsSidebarNav({ groups, activeId, onSelect, variant, ariaLabel, }) {
+    const visibleGroups = groups.filter((group) => group.items.length > 0);
+    const flat = visibleGroups.flatMap((group) => group.items);
+    const isTabs = variant === 'tabs';
+    const { containerRef, onKeyDown } = useTabKeyboard(flat, onSelect, false);
+    const renderItem = (item) => {
+        const active = item.id === activeId;
+        const Icon = item.icon;
+        return (jsxs("button", { type: "button", onClick: () => onSelect(item.id), ...(isTabs
+                ? {
+                    role: 'tab',
+                    id: tabId(item.id, false),
+                    'aria-selected': active,
+                    'aria-controls': `${item.id}-tabpanel`,
+                    tabIndex: active ? 0 : -1,
+                    onKeyDown: (event) => onKeyDown(event, flat.indexOf(item)),
+                }
+                : { 'aria-current': active ? 'page' : undefined }), className: cn('group flex h-9 w-full items-center gap-2.5 rounded-lg px-2.5 text-left text-sm transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-1', active
+                ? 'bg-white font-semibold text-gray-900 shadow-sm ring-1 ring-gray-200 dark:bg-gray-800 dark:text-gray-100 dark:ring-gray-700'
+                : 'font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-100'), children: [jsx(Icon, { className: cn('h-4 w-4 flex-shrink-0', active
+                        ? 'text-blue-600 dark:text-blue-400'
+                        : 'text-gray-500 group-hover:text-gray-700 dark:text-gray-400'), "aria-hidden": true }), jsx("span", { className: "truncate", children: item.label })] }, item.id));
+    };
+    return (jsx("nav", { className: "min-h-0 flex-1 overflow-y-auto px-3 py-4", "aria-label": ariaLabel, children: jsx("div", { ref: containerRef, className: "flex flex-col gap-4", ...(isTabs ? { role: 'tablist', 'aria-orientation': 'vertical' } : {}), children: visibleGroups.map((group) => (jsxs("div", { className: "flex flex-col gap-0.5", ...(isTabs
+                    ? {}
+                    : { role: 'group', 'aria-labelledby': `settings-nav-group-${group.id}` }), children: [jsx("div", { id: `settings-nav-group-${group.id}`, className: "px-2.5 pb-1 text-[11px] font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400", "aria-hidden": isTabs ? true : undefined, children: group.label }), group.items.map(renderItem)] }, group.id))) }) }));
+}
+/** Horizontally scrolling pills for small screens. */
+function SettingsMobileNav({ groups, activeId, onSelect, variant, ariaLabel, }) {
+    const flat = groups.flatMap((group) => group.items);
+    const isTabs = variant === 'tabs';
+    const { containerRef, onKeyDown } = useTabKeyboard(flat, onSelect, true);
+    return (jsx("nav", { className: "border-b border-gray-200 dark:border-gray-800 lg:hidden", "aria-label": ariaLabel, children: jsx("div", { ref: containerRef, className: "flex gap-2 overflow-x-auto px-4 py-2.5 [scrollbar-width:none] sm:px-6", ...(isTabs ? { role: 'tablist', 'aria-orientation': 'horizontal' } : {}), children: flat.map((item, index) => {
+                const active = item.id === activeId;
+                const Icon = item.icon;
+                return (jsxs("button", { type: "button", onClick: () => onSelect(item.id), ...(isTabs
+                        ? {
+                            role: 'tab',
+                            id: tabId(item.id, true),
+                            'aria-selected': active,
+                            'aria-controls': `${item.id}-tabpanel`,
+                            tabIndex: active ? 0 : -1,
+                            onKeyDown: (event) => onKeyDown(event, index),
+                        }
+                        : { 'aria-current': active ? 'page' : undefined }), className: cn('flex h-9 flex-shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full px-3.5 text-sm transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-1', active
+                        ? 'bg-blue-600 font-semibold text-white dark:bg-blue-500 dark:text-white'
+                        : 'border border-gray-200 bg-white font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300'), children: [jsx(Icon, { className: "h-3.5 w-3.5", "aria-hidden": true }), jsx("span", { children: item.label })] }, item.id));
+            }) }) }));
+}
+/** Small uppercase chip under the identity card (role, platform key). */
+function SettingsChip({ children, tone = 'neutral', icon: Icon, }) {
+    return (jsxs("span", { className: cn('inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-xs font-semibold', tone === 'accent'
+            ? 'bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300'
+            : 'bg-gray-100 text-gray-600 tracking-wide dark:bg-gray-800 dark:text-gray-300'), children: [Icon && jsx(Icon, { className: "h-3 w-3", "aria-hidden": true }), children] }));
+}
+function SettingsShell({ sidebarHeader, sidebarNav, mobileHeader, mobileNav, title, description, panelProps, footer, overlays, children, }) {
+    const { className: panelClassName, ...restPanelProps } = panelProps !== null && panelProps !== void 0 ? panelProps : {};
+    return (jsxs("div", { className: "flex h-full min-h-0 flex-col bg-white dark:bg-gray-950 lg:flex-row", children: [jsx("div", { className: "border-b border-gray-200 py-3 pl-4 pr-14 dark:border-gray-800 sm:pl-6 lg:hidden", children: mobileHeader }), mobileNav, jsxs("aside", { className: "hidden h-full w-[280px] flex-shrink-0 flex-col overflow-hidden border-r border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-900 lg:flex", children: [jsx("div", { className: "flex-shrink-0 border-b border-gray-200 px-5 pb-4 pt-6 dark:border-gray-800", children: sidebarHeader }), sidebarNav] }), jsxs("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden", children: [jsxs("div", { className: "hidden flex-shrink-0 border-b border-gray-200 py-5 pl-8 pr-16 dark:border-gray-800 lg:block", children: [jsx("h3", { className: "text-xl font-semibold tracking-tight text-gray-900 dark:text-gray-100", children: title }), description && (jsx("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: description }))] }), jsxs("div", { className: cn('min-h-0 flex-1 overflow-y-auto overflow-x-hidden px-4 py-5 sm:px-6 lg:px-8 lg:py-6', panelClassName), ...restPanelProps, children: [jsxs("div", { className: "mb-5 lg:hidden", children: [jsx("h3", { className: "text-lg font-semibold text-gray-900 dark:text-gray-100", children: title }), description && (jsx("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: description }))] }), children] }), footer && (jsx("div", { className: "flex-shrink-0 border-t border-gray-200 bg-white px-4 py-3 dark:border-gray-800 dark:bg-gray-950 sm:px-6 lg:px-8 lg:py-4", children: footer }))] }), overlays] }));
+}
+
 const COWORK_ENABLED_KEY = 'ibl_cowork_enabled';
 /**
  * Whether Cowork is enabled, read from localStorage. This is a user preference
@@ -219052,10 +220013,7 @@ function setCoworkEnabled(enabled) {
     localStorage.setItem(COWORK_ENABLED_KEY, String(enabled));
 }
 
-const renderLucideIcon = (Icon) => function RenderedIcon(props) {
-    return jsx(Icon, { ...props });
-};
-const TAB_DESC_KEYS = {
+const TAB_DESC_KEYS$1 = {
     basic: 'descBasic',
     social: 'descSocial',
     education: 'descEducation',
@@ -219065,6 +220023,7 @@ const TAB_DESC_KEYS = {
     memory: 'descMemory',
     privacy: 'descPrivacy',
     chatHistory: 'descChatHistory',
+    llmUsage: 'descLlmUsage',
     security: 'descSecurity',
     advanced: 'descAdvanced',
 };
@@ -219079,9 +220038,13 @@ const TAB_DESC_PREVIEW_KEYS = {
     memory: 'descMemoryPreview',
     privacy: 'descPrivacyPreview',
     chatHistory: 'descChatHistoryPreview',
+    llmUsage: 'descLlmUsagePreview',
 };
-function Profile({ tenant, username, tenants, onClose, customization = {}, isAdmin = false, targetTab = 'basic', onAccountDeleted, enableMemoryTab = false, localLLMProps, currentSPA = '', }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+const LABEL_CLASS = 'text-sm font-medium text-gray-700 dark:text-gray-300';
+const FIELD_CLASS = 'h-10 w-full bg-white border-gray-300 text-sm text-gray-900 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-100';
+const PRIMARY_BUTTON_CLASS = 'bg-blue-600 text-white hover:bg-blue-700 focus-visible:ring-blue-500 disabled:bg-blue-600/60';
+function Profile({ tenant, username, tenants, onClose, customization = {}, isAdmin = false, targetTab = 'basic', onAccountDeleted, enableMemoryTab = false, showLlmUsageTab = true, localLLMProps, currentSPA = '', }) {
+    var _a, _b, _c, _d, _e, _f;
     const t = useT();
     const { data: memsearchStatus, isError: isMemsearchStatusError } = useGetMemsearchStatusQuery({ org: tenant, userId: username }, { skip: !enableMemoryTab });
     // Show memory tab if enabled for this platform AND memsearch is enabled (or status API is unavailable)
@@ -219100,34 +220063,46 @@ function Profile({ tenant, username, tenants, onClose, customization = {}, isAdm
     const rbacPermissions = useSelector(selectRbacPermissions);
     const { currentTenant: viewerTenant } = useCurrentTenant();
     const isChatHistoryVisible = !isReadOnly || canViewOtherUsersChatHistory(rbacPermissions, viewerTenant);
-    const baseTabs = [
-        { id: 'basic', label: t('profileIndex.tabBasic'), renderIcon: renderLucideIcon(User) },
-        { id: 'social', label: t('profileIndex.tabSocial'), renderIcon: renderLucideIcon(Globe) },
+    // Usage is always read for the profile on screen, so it works while
+    // previewing someone else too — the backend decides whether this viewer may
+    // see their rows, and answers 403 when they may not. A pure watcher (the
+    // `/watchedgroups/#list` permission without tenant admin) is kept out of
+    // cost reporting entirely, the same way the analytics tabs exclude them.
+    const isLlmUsageVisible = showLlmUsageTab && !isPureWatcher(rbacPermissions, viewerTenant);
+    // Add Advanced tab only when in Tauri app (Local Models is provided and available)
+    const isAdvancedAvailable = (localLLMProps === null || localLLMProps === void 0 ? void 0 : localLLMProps.isAvailable) === true;
+    const TABS = [
+        { id: 'basic', label: t('profileIndex.tabBasic'), icon: User, group: 'profile' },
+        { id: 'social', label: t('profileIndex.tabSocial'), icon: Globe, group: 'profile' },
         ...(isGradebookEnabled
             ? [
                 {
                     id: 'gradebook',
                     label: t('profileIndex.tabGradebook'),
-                    renderIcon: renderLucideIcon(GraduationCap),
+                    icon: GraduationCap,
+                    group: 'records',
                 },
             ]
             : []),
         {
             id: 'education',
             label: t('profileIndex.tabEducation'),
-            renderIcon: renderLucideIcon(BookOpen),
+            icon: BookOpen,
+            group: 'records',
         },
         {
             id: 'experience',
             label: t('profileIndex.tabExperience'),
-            renderIcon: renderLucideIcon(Briefcase),
+            icon: Briefcase,
+            group: 'records',
         },
         ...(isPurchasesEnabled
             ? [
                 {
                     id: 'purchases',
                     label: t('profileIndex.tabPurchases'),
-                    renderIcon: renderLucideIcon(ShoppingBag),
+                    icon: ShoppingBag,
+                    group: 'records',
                 },
             ]
             : []),
@@ -219136,20 +220111,23 @@ function Profile({ tenant, username, tenants, onClose, customization = {}, isAdm
                 {
                     id: 'memory',
                     label: t('profileIndex.tabMemory'),
-                    renderIcon: renderLucideIcon(Archive),
+                    icon: Archive,
+                    group: 'aiData',
                 },
             ]
             : []),
         // id stays as 'privacy' so callers passing `targetTab='privacy'` and
         // any test selectors targeting #panel-privacy keep working. The
         // user-visible `label` is "Privacy"; the chat-privacy feature itself
-        // is still called "Private Mode" within the tab's content.
+        // is still called "Private Mode" within the tab's content. It sits with
+        // the account controls, just above Security.
         ...(isChatPrivacyEnabled
             ? [
                 {
                     id: 'privacy',
                     label: t('profileIndex.tabPrivacy'),
-                    renderIcon: renderLucideIcon(Lock),
+                    icon: Lock,
+                    group: 'account',
                 },
             ]
             : []),
@@ -219158,7 +220136,18 @@ function Profile({ tenant, username, tenants, onClose, customization = {}, isAdm
                 {
                     id: 'chatHistory',
                     label: t('profileIndex.tabChatHistory'),
-                    renderIcon: renderLucideIcon(History),
+                    icon: History,
+                    group: 'aiData',
+                },
+            ]
+            : []),
+        ...(isLlmUsageVisible
+            ? [
+                {
+                    id: 'llmUsage',
+                    label: t('profileIndex.tabLlmUsage'),
+                    icon: Gauge,
+                    group: 'aiData',
                 },
             ]
             : []),
@@ -219167,24 +220156,33 @@ function Profile({ tenant, username, tenants, onClose, customization = {}, isAdm
                 {
                     id: 'security',
                     label: t('profileIndex.tabSecurity'),
-                    renderIcon: renderLucideIcon(Shield),
+                    icon: Shield,
+                    group: 'account',
+                },
+            ]
+            : []),
+        ...(isAdvancedAvailable
+            ? [
+                {
+                    id: 'advanced',
+                    label: t('profileIndex.tabAdvanced'),
+                    icon: Settings$1,
+                    group: 'account',
                 },
             ]
             : []),
     ];
-    // Add Advanced tab only when in Tauri app (Local Models is provided and available)
-    const isAdvancedAvailable = (localLLMProps === null || localLLMProps === void 0 ? void 0 : localLLMProps.isAvailable) === true;
-    const TABS = isAdvancedAvailable
-        ? [
-            ...baseTabs,
-            {
-                id: 'advanced',
-                label: t('profileIndex.tabAdvanced'),
-                renderIcon: renderLucideIcon(Settings$1),
-            },
-        ]
-        : baseTabs;
-    const RoleIcon = renderLucideIcon(User);
+    const GROUP_LABELS = {
+        profile: t('profileIndex.groupProfile'),
+        records: t('profileIndex.groupRecords'),
+        aiData: t('profileIndex.groupAiData'),
+        account: t('profileIndex.groupAccount'),
+    };
+    const navGroups = Object.keys(GROUP_LABELS).map((group) => ({
+        id: group,
+        label: GROUP_LABELS[group],
+        items: TABS.filter((tab) => tab.group === group),
+    }));
     const [activeTab, setActiveTab] = useState(targetTab);
     const [isHovering, setIsHovering] = useState(false);
     const fileInputRef = useRef(null);
@@ -219206,8 +220204,7 @@ function Profile({ tenant, username, tenants, onClose, customization = {}, isAdm
     };
     // The picture itself, with no editing affordance around it. The wrapper
     // below decides whether it is clickable.
-    const profileAvatar = (jsxs(Avatar, { className: "h-20 w-20", children: [((_b = userMetadataEdx === null || userMetadataEdx === void 0 ? void 0 : userMetadataEdx.profile_image) === null || _b === void 0 ? void 0 : _b.has_image) ? (jsx(AvatarImage, { src: (_c = userMetadataEdx === null || userMetadataEdx === void 0 ? void 0 : userMetadataEdx.profile_image) === null || _c === void 0 ? void 0 : _c.image_url_full, alt: t('profileIndex.altProfilePicture'), className: "rounded-full object-cover w-full h-full group-hover:opacity-80 transition-opacity" })) : customization.useGravatarPicFallback ? (jsx(Gravatar, { className: "w-full h-full rounded-full object-cover group-hover:opacity-80 transition-opacity", email: userMetadata === null || userMetadata === void 0 ? void 0 : userMetadata.email, size: 80, alt: t('profileIndex.altProfilePictureGravatar') })) : (jsx(Fragment$1, {})), jsx(AvatarFallback, { className: cn('bg-blue-800 text-white text-xl rounded-full', customization.useGravatarPicFallback &&
-                    !((_d = userMetadataEdx === null || userMetadataEdx === void 0 ? void 0 : userMetadataEdx.profile_image) === null || _d === void 0 ? void 0 : _d.image_url_full)
+    const profileAvatar = (jsxs(Avatar, { className: "h-14 w-14", children: [((_b = userMetadataEdx === null || userMetadataEdx === void 0 ? void 0 : userMetadataEdx.profile_image) === null || _b === void 0 ? void 0 : _b.has_image) ? (jsx(AvatarImage, { src: (_c = userMetadataEdx === null || userMetadataEdx === void 0 ? void 0 : userMetadataEdx.profile_image) === null || _c === void 0 ? void 0 : _c.image_url_full, alt: t('profileIndex.altProfilePicture'), className: "rounded-full object-cover w-full h-full group-hover:opacity-80 transition-opacity" })) : customization.useGravatarPicFallback ? (jsx(Gravatar, { className: "w-full h-full rounded-full object-cover group-hover:opacity-80 transition-opacity", email: userMetadata === null || userMetadata === void 0 ? void 0 : userMetadata.email, size: 56, alt: t('profileIndex.altProfilePictureGravatar') })) : (jsx(Fragment$1, {})), jsx(AvatarFallback, { className: cn('bg-blue-800 text-white text-lg font-semibold rounded-full', customization.useGravatarPicFallback && !((_d = userMetadataEdx === null || userMetadataEdx === void 0 ? void 0 : userMetadataEdx.profile_image) === null || _d === void 0 ? void 0 : _d.image_url_full)
                     ? 'hidden'
                     : ''), children: getInitials((userMetadata === null || userMetadata === void 0 ? void 0 : userMetadata.name) || (userMetadata === null || userMetadata === void 0 ? void 0 : userMetadata.username) || (userMetadata === null || userMetadata === void 0 ? void 0 : userMetadata.email) || '') })] }));
     const handleFileUpload = (event) => {
@@ -219252,115 +220249,122 @@ function Profile({ tenant, username, tenants, onClose, customization = {}, isAdm
     // Rendered inline on the sub-tabs row (education/experience/resume), pushed to
     // the far right. `headerAdd` already encodes which sub-tab is active, so this
     // only appears on the sub-tabs that support adding/uploading.
-    const headerAddButton = headerAdd && (jsx(Button$1, { size: "icon", onClick: headerAdd.onClick, className: "text-gray-700 bg-gradient-to-r from-[#2563EB] to-[#93C5FD] hover:opacity-90 text-white flex-shrink-0", "aria-label": headerAdd.ariaLabel, children: headerAdd.upload ? jsx(Upload, { className: "h-4 w-4" }) : jsx(Plus, { className: "h-4 w-4" }) }));
+    const headerAddButton = headerAdd && (jsxs(Button$1, { size: "sm", onClick: headerAdd.onClick, className: cn('h-9 flex-shrink-0 gap-1.5 px-3', PRIMARY_BUTTON_CLASS), "aria-label": headerAdd.ariaLabel, children: [headerAdd.upload ? (jsx(Upload, { className: "h-4 w-4", "aria-hidden": "true" })) : (jsx(Plus, { className: "h-4 w-4", "aria-hidden": "true" })), jsx("span", { className: "hidden sm:inline", children: headerAdd.ariaLabel })] }));
     const tabDescription = (id) => {
-        const key = (isReadOnly && TAB_DESC_PREVIEW_KEYS[id]) || TAB_DESC_KEYS[id];
+        const key = (isReadOnly && TAB_DESC_PREVIEW_KEYS[id]) || TAB_DESC_KEYS$1[id];
         return key ? t(`profileIndex.${key}`) : '';
     };
-    return (jsxs("div", { className: "flex flex-col lg:flex-row h-full", children: [jsx("div", { className: "lg:hidden", children: jsx("div", { className: "px-6 py-4 border-b border-gray-200", children: jsx("h2", { className: "text-lg font-semibold text-gray-900", children: t('profileIndex.profileHeading') }) }) }), jsxs("div", { className: "hidden lg:flex bg-white border-r border-gray-200 dark:border-gray-700 flex-col overflow-hidden", style: {
-                    width: '320px',
-                    height: '100%',
-                }, children: [jsxs("div", { className: "flex flex-col items-center justify-center py-6 px-6 border-b border-gray-200 dark:border-gray-700 flex-shrink-0", children: [isUserMetadataEdxLoading || isUploadingProfileImage ? (jsx(Skeleton, { className: "h-20 w-20 mb-6 rounded-full", "aria-label": t('profileIndex.ariaLoadingProfileImage') })) : isReadOnly ? (
-                            // Someone else's profile: show the picture, offer no way to replace it.
-                            jsx("div", { className: "relative w-20 h-20 mb-4 rounded-full", children: profileAvatar })) : (jsxs("button", { type: "button", className: "relative w-20 h-20 mb-4 cursor-pointer group rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2", onMouseEnter: () => setIsHovering(true), onMouseLeave: () => setIsHovering(false), onClick: handleAvatarClick, "aria-label": t('profileIndex.ariaUploadProfilePicture'), children: [profileAvatar, isHovering && (jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-blue-800 rounded-full border-4 border-white/20", "aria-hidden": "true", children: jsx("span", { className: "text-white text-xs font-medium text-center px-2", children: t('profileIndex.uploadOverlay') }) })), jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", onChange: handleFileUpload, className: "hidden", "aria-label": t('profileIndex.ariaChooseProfilePicture'), tabIndex: -1 })] })), jsx("h2", { className: "text-base font-semibold text-gray-900 dark:text-gray-100 text-center mb-3 break-all px-2", title: userMetadata === null || userMetadata === void 0 ? void 0 : userMetadata.email, children: userMetadata === null || userMetadata === void 0 ? void 0 : userMetadata.email }), jsxs("div", { className: "flex justify-center space-x-3", children: [jsxs("div", { className: "bg-blue-100 text-blue-700 px-2 py-1 rounded font-medium flex items-center text-sm", children: [jsx(RoleIcon, { className: "h-4 w-4 mr-2", "aria-hidden": "true" }), jsx("span", { children: isAdmin ? t('profileIndex.roleAdmin') : t('profileIndex.roleUser') })] }), customization.showPlatformName && (jsx("div", { className: "bg-gray-100 text-gray-600 px-4 py-2 rounded text-xs font-medium", children: tenant.toUpperCase() }))] })] }), jsx("nav", { className: "flex-1 overflow-y-auto", style: { minHeight: 0 }, "aria-label": t('profileIndex.ariaProfileTabs'), children: jsx("div", { className: "p-4", children: jsx("div", { className: "flex flex-col space-y-1.5", role: "tablist", "aria-orientation": "vertical", children: TABS.map((tab) => (jsxs("button", { role: "tab", "aria-selected": activeTab === tab.id, "aria-controls": `${tab.id}-tabpanel`, id: `${tab.id}-tab`, onClick: () => setActiveTab(tab.id), className: `w-full justify-start px-4 py-2.5 text-left rounded-lg transition-all flex items-center text-base ${activeTab === tab.id
-                                        ? 'bg-blue-50 text-blue-700 font-medium'
-                                        : 'hover:bg-gray-50 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100'}`, children: [jsx(tab.renderIcon, { className: "h-5 w-5 mr-3 flex-shrink-0", "aria-hidden": "true" }), jsx("span", { className: "truncate", children: tab.label })] }, tab.id))) }) }) })] }), jsx("nav", { className: "lg:hidden", "aria-label": t('profileIndex.ariaProfileTabsMobile'), children: jsx("div", { className: "w-full justify-start px-6 py-2 bg-white border-b border-gray-200 rounded-none h-auto overflow-x-auto", children: jsx("div", { className: "flex space-x-2", role: "tablist", "aria-orientation": "horizontal", children: TABS.map((tab) => (jsxs("button", { role: "tab", "aria-selected": activeTab === tab.id, "aria-controls": `${tab.id}-tabpanel`, id: `${tab.id}-tab-mobile`, onClick: () => setActiveTab(tab.id), className: `flex items-center gap-2 px-3 py-2 rounded-lg whitespace-nowrap text-sm transition-all ${activeTab === tab.id
-                                ? 'bg-blue-50 text-blue-600 font-medium'
-                                : 'text-gray-600 hover:bg-gray-50'}`, children: [jsx(tab.renderIcon, { className: "h-4 w-4", "aria-hidden": "true" }), jsx("span", { className: "hidden sm:inline", children: tab.label }), jsx("span", { className: "sm:hidden", children: tab.label })] }, tab.id))) }) }) }), jsxs("div", { className: "flex-1 flex flex-col overflow-hidden", style: { height: '100%' }, children: [jsx("div", { className: "hidden lg:block flex-shrink-0 p-6 border-b border-gray-200 bg-white dark:bg-gray-900", children: jsx("div", { className: "flex items-center justify-between", children: jsxs("div", { children: [jsx("h3", { className: "text-lg font-medium text-gray-900 dark:text-gray-100 mb-2", children: (_f = (_e = TABS.find((t) => t.id === activeTab)) === null || _e === void 0 ? void 0 : _e.label) !== null && _f !== void 0 ? _f : activeTab }), jsx("p", { className: "text-gray-600 dark:text-gray-400 text-sm", children: tabDescription(activeTab) })] }) }) }), jsxs("div", { className: "flex-1 p-6 space-y-6", style: {
-                            overflowY: 'auto',
-                            overflowX: 'hidden',
-                        }, role: "tabpanel", id: `${activeTab}-tabpanel`, "aria-labelledby": `${activeTab}-tab`, tabIndex: 0, children: [jsx("div", { className: "lg:hidden mb-6", children: jsx("div", { className: "flex flex-row items-center sm:justify-between gap-3", children: jsxs("div", { children: [jsx("h3", { className: "text-lg font-medium text-gray-900 dark:text-gray-100 mb-2", children: (_h = (_g = TABS.find((t) => t.id === activeTab)) === null || _g === void 0 ? void 0 : _g.label) !== null && _h !== void 0 ? _h : activeTab }), jsx("p", { className: "text-gray-600 dark:text-gray-400 text-sm", children: tabDescription(activeTab) })] }) }) }), activeTab === 'basic' && (jsx("div", { className: "space-y-6", children: jsxs("form", { onSubmit: (formEvent) => {
-                                        formEvent.preventDefault();
-                                        formEvent.stopPropagation();
-                                        if (isReadOnly)
-                                            return;
-                                        basicForm.handleSubmit();
-                                    }, className: "space-y-6", children: [jsxs("div", { className: "space-y-2", children: [jsx("label", { htmlFor: "fullName", className: "text-gray-500 dark:text-gray-400 text-base", children: t('profileIndex.labelFullName') }), basicForm.Field({
-                                                    name: 'fullName',
-                                                    validators: {
-                                                        onChange: basicValidators.fullName,
-                                                        onSubmit: basicValidators.fullName,
-                                                    },
-                                                    children: (field) => {
-                                                        var _a;
-                                                        return (jsxs(Fragment$1, { children: [jsx(Input, { id: "fullName", className: "w-full bg-gray-50 border-gray-200 focus:ring-blue-500 focus:border-blue-500 text-base py-3", value: field.state.value, onChange: (e) => field.handleChange(e.target.value), disabled: basicForm.state.isSubmitting || isUserMetadataLoading || isReadOnly }), ((_a = field.state.meta.errors) === null || _a === void 0 ? void 0 : _a.length) > 0 && (jsx("p", { className: "text-red-500 text-sm mt-1", role: "alert", children: field.state.meta.errors }))] }));
-                                                    },
-                                                })] }), jsxs("div", { className: "space-y-2", children: [jsx("label", { htmlFor: "email", className: "text-gray-500 dark:text-gray-400 text-base", children: t('profileIndex.labelEmail') }), basicForm.Field({
-                                                    name: 'email',
-                                                    children: (field) => (jsx(Input, { id: "email", type: "email", className: "w-full bg-gray-50 border-gray-200 focus:ring-blue-500 focus:border-blue-500 text-base py-3", value: field.state.value, onChange: (e) => field.handleChange(e.target.value), disabled: basicForm.state.isSubmitting || isUserMetadataLoading || isReadOnly })),
-                                                })] }), customization.showUsernameField && (jsxs("div", { className: "space-y-2", children: [jsx("label", { htmlFor: "username", className: "text-gray-500 dark:text-gray-400 text-base", children: t('profileIndex.labelUsername') }), basicForm.Field({
-                                                    name: 'username',
-                                                    children: (field) => (jsx(Input, { id: "username", className: "w-full bg-gray-50 border-gray-200 focus:ring-blue-500 focus:border-blue-500 text-base py-3", value: field.state.value, onChange: (e) => field.handleChange(e.target.value), disabled: basicForm.state.isSubmitting || isUserMetadataLoading || isReadOnly })),
-                                                })] })), jsxs("div", { className: "space-y-2", children: [jsx("label", { htmlFor: "title", className: "text-gray-500 dark:text-gray-400 text-base", children: t('profileIndex.labelTitle') }), basicForm.Field({
-                                                    name: 'title',
-                                                    children: (field) => (jsx(Input, { id: "title", className: "w-full bg-gray-50 border-gray-200 focus:ring-blue-500 focus:border-blue-500 text-base py-3", value: field.state.value, onChange: (e) => field.handleChange(e.target.value), disabled: basicForm.state.isSubmitting || isUserMetadataLoading || isReadOnly })),
-                                                })] }), jsxs("div", { className: "space-y-2", children: [jsx("label", { htmlFor: "about", className: "text-gray-500 dark:text-gray-400 text-base", children: t('profileIndex.labelAbout') }), basicForm.Field({
-                                                    name: 'about',
-                                                    children: (field) => (jsx(Textarea, { id: "about", placeholder: t('profileIndex.placeholderAbout'), className: "w-full bg-gray-50 border-gray-200 focus:ring-blue-500 focus:border-blue-500 text-base resize-none", rows: 4, value: field.state.value, onChange: (e) => field.handleChange(e.target.value), disabled: basicForm.state.isSubmitting || isUserMetadataLoading || isReadOnly })),
-                                                })] }), jsxs("div", { className: "space-y-2", children: [jsx("label", { htmlFor: "language", className: "text-gray-500 dark:text-gray-400 text-base", children: t('profileIndex.labelLanguage') }), basicForm.Field({
-                                                    name: 'language',
-                                                    children: (field) => (jsxs(Select$1, { defaultValue: field.state.value, onValueChange: (value) => field.handleChange(value), disabled: basicForm.state.isSubmitting || isUserMetadataLoading || isReadOnly, children: [jsx(SelectTrigger, { className: "w-full bg-gray-50 border-gray-200 focus:ring-blue-500 focus:border-blue-500 text-base py-3 text-sm", "aria-label": t('profileIndex.selectLanguagePlaceholder'), children: jsx(SelectValue, { placeholder: t('profileIndex.selectLanguagePlaceholder') }) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "en", children: t('profileIndex.langEnglish') }), jsx(SelectItem, { value: "es", children: t('profileIndex.langSpanish') }), jsx(SelectItem, { value: "fr", children: t('profileIndex.langFrench') })] })] })),
-                                                })] }), (customization.showLeaderboardDisplayCheckbox ||
-                                            customization.showMentorAIDisplayCheckbox) && (jsxs("div", { className: "grid grid-cols-2 gap-6 pt-4", children: [customization.showMentorAIDisplayCheckbox && (jsx("div", { className: "space-y-2", children: jsxs("div", { className: "flex items-center space-x-2", children: [basicForm.Field({
-                                                                name: 'displayMentor',
-                                                                children: (field) => (jsx(Switch, { className: "data-[state=checked]:bg-blue-600", onCheckedChange: (checked) => field.handleChange(checked), checked: field.state.value, disabled: basicForm.state.isSubmitting ||
-                                                                        isUserMetadataLoading ||
-                                                                        isReadOnly, id: "display-mentor" })),
-                                                            }), jsx("label", { htmlFor: "display-mentor", className: "text-sm leading-none font-medium text-gray-700 peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: t('profileIndex.checkboxDisplayMentorAI') })] }) })), customization.showLeaderboardDisplayCheckbox && (jsx("div", { className: "space-y-2", children: jsxs("div", { className: "flex items-center space-x-2", children: [basicForm.Field({
-                                                                name: 'displayLeaderBoard',
-                                                                children: (field) => (jsx(Switch, { className: "data-[state=checked]:bg-blue-600", onCheckedChange: (checked) => field.handleChange(checked), checked: field.state.value, disabled: basicForm.state.isSubmitting ||
-                                                                        isUserMetadataLoading ||
-                                                                        isReadOnly, id: "display-leaderboard" })),
-                                                            }), jsx("label", { htmlFor: "display-leaderboard", className: "text-sm leading-none font-medium text-gray-700 peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: t('profileIndex.checkboxDisplayLeaderboard') })] }) }))] }))] }) })), activeTab === 'social' && (jsx("div", { className: "space-y-6", children: jsxs("form", { className: "space-y-6", onSubmit: (formEvent) => {
-                                        formEvent.preventDefault();
-                                        formEvent.stopPropagation();
-                                        if (isReadOnly)
-                                            return;
-                                        socialForm.handleSubmit();
-                                    }, children: [jsxs("div", { className: "space-y-2", children: [jsx("label", { htmlFor: "facebook", className: "text-gray-500 dark:text-gray-400 text-base", children: t('profileIndex.labelFacebook') }), socialForm.Field({
-                                                    name: 'facebook',
-                                                    validators: {
-                                                        onChange: socialValidators.facebook,
-                                                    },
-                                                    children: (field) => {
-                                                        var _a;
-                                                        return (jsxs(Fragment$1, { children: [jsxs("div", { className: "relative mb-0", children: [jsx("div", { className: "absolute inset-y-0 left-4 flex items-center pointer-events-none", "aria-hidden": "true", children: jsx("div", { className: "bg-[#1877F2] text-white rounded w-8 h-8 flex items-center justify-center", children: jsx("span", { className: "font-bold text-sm", children: "f" }) }) }), jsx(Input, { id: "facebook", className: "w-full bg-gray-50 border-gray-200 focus:ring-blue-500 focus:border-blue-500 text-base py-3 pl-16 h-10", placeholder: t('profileIndex.placeholderFacebook'), value: field.state.value, onChange: (e) => handleSocialLinkChange(e.target.value, field.handleChange, FACEBOOK_URL_PREFIX), disabled: socialForm.state.isSubmitting || isReadOnly })] }), jsx("p", { className: "text-red-500 dark:text-gray-400 text-sm", role: ((_a = field.state.meta.errors) === null || _a === void 0 ? void 0 : _a.length) ? 'alert' : undefined, "aria-live": "polite", children: field.state.meta.errors })] }));
-                                                    },
-                                                })] }), jsxs("div", { className: "space-y-2", children: [jsx("label", { htmlFor: "linkedin", className: "text-gray-500 dark:text-gray-400 text-base", children: t('profileIndex.labelLinkedIn') }), socialForm.Field({
-                                                    name: 'linkedIn',
-                                                    validators: {
-                                                        onChange: socialValidators.linkedIn,
-                                                    },
-                                                    children: (field) => {
-                                                        var _a;
-                                                        return (jsxs(Fragment$1, { children: [jsxs("div", { className: "relative mb-0", children: [jsx("div", { className: "absolute inset-y-0 left-4 flex items-center pointer-events-none", "aria-hidden": "true", children: jsx("div", { className: "bg-[#0A66C2] text-white rounded w-8 h-8 flex items-center justify-center", children: jsx("span", { className: "font-bold text-xs", children: "in" }) }) }), jsx(Input, { id: "linkedin", className: "w-full bg-gray-50 border-gray-200 focus:ring-blue-500 focus:border-blue-500 text-base py-3 pl-16 h-10", placeholder: t('profileIndex.placeholderLinkedIn'), value: field.state.value, onChange: (e) => handleSocialLinkChange(e.target.value, field.handleChange, LINKEDIN_URL_PREFIX), disabled: socialForm.state.isSubmitting || isReadOnly })] }), jsx("p", { className: "text-red-500 dark:text-gray-400 text-sm", role: ((_a = field.state.meta.errors) === null || _a === void 0 ? void 0 : _a.length) ? 'alert' : undefined, "aria-live": "polite", children: field.state.meta.errors })] }));
-                                                    },
-                                                })] }), jsxs("div", { className: "space-y-2", children: [jsx("label", { htmlFor: "x", className: "text-gray-500 dark:text-gray-400 text-base", children: t('profileIndex.labelX') }), socialForm.Field({
-                                                    name: 'x',
-                                                    validators: {
-                                                        onChange: socialValidators.x,
-                                                    },
-                                                    children: (field) => {
-                                                        var _a;
-                                                        return (jsxs(Fragment$1, { children: [jsxs("div", { className: "relative mb-0", children: [jsx("div", { className: "absolute inset-y-0 left-4 flex items-center pointer-events-none", "aria-hidden": "true", children: jsx("div", { className: "bg-black text-white rounded w-8 h-8 flex items-center justify-center", children: jsx("span", { className: "font-bold text-sm", children: "X" }) }) }), jsx(Input, { id: "x", className: "w-full bg-gray-50 border-gray-200 focus:ring-blue-500 focus:border-blue-500 text-base py-3 pl-16 h-10", placeholder: t('profileIndex.placeholderX'), value: field.state.value, onChange: (e) => handleSocialLinkChange(e.target.value, field.handleChange, X_URL_PREFIX), disabled: socialForm.state.isSubmitting || isReadOnly })] }), jsx("p", { className: "text-red-500 dark:text-gray-400 text-sm", role: ((_a = field.state.meta.errors) === null || _a === void 0 ? void 0 : _a.length) ? 'alert' : undefined, "aria-live": "polite", children: field.state.meta.errors })] }));
-                                                    },
-                                                })] })] }) })), activeTab === 'education' && (jsxs(Tabs, { value: educationSubTab, onValueChange: setEducationSubTab, className: "space-y-4", children: [jsxs("div", { className: "flex items-center justify-between gap-3", children: [jsxs(TabsList, { children: [jsx(TabsTrigger, { value: "education", children: t('profileIndex.tabEducation') }), jsx(TabsTrigger, { value: "credentials", children: t('gradebookGradebookTab.typeCredentials') }), jsx(TabsTrigger, { value: "skills", children: t('gradebookGradebookTab.typeSkills') })] }), headerAddButton] }), jsx(TabsContent, { value: "education", children: jsx(EducationTab, { org: tenant, username: username }) }), jsx(TabsContent, { value: "credentials", children: jsx(CredentialsList, { org: tenant, username: username }) }), jsx(TabsContent, { value: "skills", children: jsx(SkillsList, { org: tenant, username: username }) })] })), activeTab === 'gradebook' && jsx(GradebookTab, { org: tenant, username: username }), activeTab === 'experience' && (jsxs(Tabs, { value: experienceSubTab, onValueChange: setExperienceSubTab, className: "space-y-4", children: [jsxs("div", { className: "flex items-center justify-between gap-3", children: [jsxs(TabsList, { children: [jsx(TabsTrigger, { value: "experience", children: t('profileIndex.tabExperience') }), jsx(TabsTrigger, { value: "resume", children: t('profileIndex.tabResume') })] }), headerAddButton] }), jsx(TabsContent, { value: "experience", children: jsx(ExperienceTab, { org: tenant, username: username }) }), jsx(TabsContent, { value: "resume", children: jsx(ResumeTab, { org: tenant, username: username }) })] })), activeTab === 'purchases' && jsx(PurchasesTab, { org: tenant, username: username }), activeTab === 'memory' && jsx(MemoryTab, { org: tenant, username: username }), activeTab === 'privacy' && jsx(ChatPrivacyTab, { org: tenant, username: username }), isChatHistoryVisible && activeTab === 'chatHistory' && (jsx(ChatHistoryTab, { org: tenant, username: username })), !isReadOnly && activeTab === 'security' && (jsx(Security, { app: currentSPA || '', email: (userMetadata === null || userMetadata === void 0 ? void 0 : userMetadata.email) || '', platformKey: tenant, onAccountDeleted: onAccountDeleted })), activeTab === 'advanced' && localLLMProps && (jsx("div", { className: "space-y-6", children: jsx(LocalModelsContent, { isAvailable: localLLMProps.isAvailable, state: localLLMProps.state, ollamaStatus: localLLMProps.ollamaStatus, systemMemory: localLLMProps.systemMemory, isUsingFoundry: localLLMProps.isUsingFoundry, foundryModels: localLLMProps.foundryModels, selectedFoundryModel: localLLMProps.selectedFoundryModel, foundryStatus: localLLMProps.foundryStatus, onStartDownload: localLLMProps.onStartDownload, onCancelDownload: localLLMProps.onCancelDownload, onInstallOllama: localLLMProps.onInstallOllama, onStopManager: localLLMProps.onStopManager, onInstallFoundry: localLLMProps.onInstallFoundry, onCheckStatus: localLLMProps.onCheckStatus, onResetState: localLLMProps.onResetState, onSelectFoundryModel: localLLMProps.onSelectFoundryModel }) }))] }), !isReadOnly && ['basic', 'social'].includes(activeTab) && (jsx("div", { className: "flex-shrink-0 border-t border-gray-200 p-6 bg-white dark:bg-gray-900", children: jsxs("div", { className: "flex justify-end gap-3", children: [jsx(Button$1, { onClick: onClose, variant: "outline", children: t('profileIndex.buttonCancel') }), jsx(Button$1, { onClick: () => {
-                                        if (activeTab === 'basic') {
-                                            basicForm.handleSubmit();
-                                        }
-                                        else if (activeTab === 'social') {
-                                            socialForm.handleSubmit();
-                                        }
-                                    }, className: "bg-gradient-to-r from-[#2563EB] to-[#93C5FD] hover:opacity-90 text-white", disabled: (activeTab === 'basic' &&
-                                        (basicForm.state.isSubmitting || isUserMetadataLoading)) ||
-                                        (activeTab === 'social' && socialForm.state.isSubmitting), children: (activeTab === 'basic' && basicForm.state.isSubmitting) ||
-                                        (activeTab === 'social' && socialForm.state.isSubmitting)
-                                        ? t('profileIndex.buttonSaving')
-                                        : t('profileIndex.buttonSaveChanges') })] }) }))] }), jsx(EducationDialog, { open: isEducationDialogOpen, onOpenChange: setIsEducationDialogOpen, education: undefined, org: tenant, username: username, onComplete: () => {
-                    // The education tab will handle refetching
-                } }), jsx(ExperienceDialog, { open: isExperienceDialogOpen, onOpenChange: setIsExperienceDialogOpen, experience: undefined, org: tenant, username: username, onComplete: () => {
-                    // The experience tab will handle refetching
-                } }), jsx(ToastProvider, {})] }));
+    const email = (userMetadata === null || userMetadata === void 0 ? void 0 : userMetadata.email) || '';
+    const displayName = (userMetadata === null || userMetadata === void 0 ? void 0 : userMetadata.name) || (userMetadata === null || userMetadata === void 0 ? void 0 : userMetadata.username) || email;
+    const roleChip = (jsx(SettingsChip, { tone: "accent", icon: User, children: isAdmin ? t('profileIndex.roleAdmin') : t('profileIndex.roleUser') }));
+    const platformChip = customization.showPlatformName ? (jsx(SettingsChip, { children: tenant.toUpperCase() })) : null;
+    const avatarBlock = isUserMetadataEdxLoading || isUploadingProfileImage ? (jsx(Skeleton, { className: "h-14 w-14 flex-shrink-0 rounded-full", "aria-label": t('profileIndex.ariaLoadingProfileImage') })) : isReadOnly ? (
+    // Someone else's profile: show the picture, offer no way to replace it.
+    jsx("div", { className: "relative h-14 w-14 flex-shrink-0 rounded-full", children: profileAvatar })) : (jsxs("button", { type: "button", className: "group relative h-14 w-14 flex-shrink-0 cursor-pointer rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2", onMouseEnter: () => setIsHovering(true), onMouseLeave: () => setIsHovering(false), onClick: handleAvatarClick, "aria-label": t('profileIndex.ariaUploadProfilePicture'), children: [profileAvatar, isHovering && (jsx("div", { className: "absolute inset-0 flex items-center justify-center rounded-full bg-blue-900/80", "aria-hidden": "true", children: jsx("span", { className: "px-1 text-center text-[11px] font-semibold text-white", children: t('profileIndex.uploadOverlay') }) })), jsx("span", { className: "absolute -bottom-0.5 -right-0.5 flex h-6 w-6 items-center justify-center rounded-full border border-gray-200 bg-white text-gray-700 shadow-sm dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200", "aria-hidden": "true", children: jsx(Camera, { className: "h-3 w-3" }) }), jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", onChange: handleFileUpload, className: "hidden", "aria-label": t('profileIndex.ariaChooseProfilePicture'), tabIndex: -1 })] }));
+    const sidebarHeader = (jsxs("div", { className: "flex flex-col gap-3", children: [jsxs("div", { className: "flex items-center gap-3", children: [avatarBlock, jsxs("div", { className: "min-w-0 space-y-1", children: [jsx("h2", { className: "truncate text-[15px] font-semibold text-gray-900 dark:text-gray-100", title: displayName, children: displayName }), jsxs("div", { className: "flex flex-wrap gap-1.5", children: [roleChip, platformChip] })] })] }), email && email !== displayName && (jsx("p", { className: "break-all text-[13px] leading-snug text-gray-500 dark:text-gray-400", title: email, children: email }))] }));
+    // Name only: the email already sits in the sidebar card, which small
+    // screens hide, and the dialog title covers the rest.
+    const mobileHeader = (jsx("p", { className: "truncate text-[15px] font-semibold text-gray-900 dark:text-gray-100", children: (userMetadata === null || userMetadata === void 0 ? void 0 : userMetadata.name) || (userMetadata === null || userMetadata === void 0 ? void 0 : userMetadata.username) || t('profileIndex.profileHeading') }));
+    const isBusyBasic = basicForm.state.isSubmitting || isUserMetadataLoading || isReadOnly;
+    const footer = !isReadOnly && ['basic', 'social'].includes(activeTab) ? (jsxs("div", { className: "flex justify-end gap-3", children: [jsx(Button$1, { onClick: onClose, variant: "outline", className: "h-10 px-4", children: t('profileIndex.buttonCancel') }), jsx(Button$1, { onClick: () => {
+                    if (activeTab === 'basic') {
+                        basicForm.handleSubmit();
+                    }
+                    else if (activeTab === 'social') {
+                        socialForm.handleSubmit();
+                    }
+                }, className: cn('h-10 px-5', PRIMARY_BUTTON_CLASS), disabled: (activeTab === 'basic' && (basicForm.state.isSubmitting || isUserMetadataLoading)) ||
+                    (activeTab === 'social' && socialForm.state.isSubmitting), children: (activeTab === 'basic' && basicForm.state.isSubmitting) ||
+                    (activeTab === 'social' && socialForm.state.isSubmitting)
+                    ? t('profileIndex.buttonSaving')
+                    : t('profileIndex.buttonSaveChanges') })] })) : null;
+    const socialField = ({ id, name, label, placeholder, prefix, badge, validator, }) => (jsxs("div", { className: "space-y-1.5", children: [jsx("label", { htmlFor: id, className: LABEL_CLASS, children: label }), socialForm.Field({
+                name,
+                validators: {
+                    onChange: validator,
+                },
+                children: (field) => {
+                    var _a;
+                    return (jsxs(Fragment$1, { children: [jsxs("div", { className: "relative mb-0", children: [jsx("div", { className: "pointer-events-none absolute inset-y-0 left-2 flex items-center", "aria-hidden": "true", children: jsx("div", { className: cn('flex h-7 w-7 items-center justify-center rounded-md text-white', badge.className), children: jsx("span", { className: cn('font-bold', badge.textClassName), children: badge.text }) }) }), jsx(Input, { id: id, className: cn(FIELD_CLASS, 'pl-12'), placeholder: placeholder, value: field.state.value, onChange: (e) => handleSocialLinkChange(e.target.value, field.handleChange, prefix), disabled: socialForm.state.isSubmitting || isReadOnly })] }), jsx("p", { className: "text-sm text-red-600 dark:text-red-400", role: ((_a = field.state.meta.errors) === null || _a === void 0 ? void 0 : _a.length) ? 'alert' : undefined, "aria-live": "polite", children: field.state.meta.errors })] }));
+                },
+            })] }));
+    return (jsxs(SettingsShell, { sidebarHeader: sidebarHeader, sidebarNav: jsx(SettingsSidebarNav, { groups: navGroups, activeId: activeTab, onSelect: setActiveTab, variant: "tabs", ariaLabel: t('profileIndex.ariaProfileTabs') }), mobileHeader: mobileHeader, mobileNav: jsx(SettingsMobileNav, { groups: navGroups, activeId: activeTab, onSelect: setActiveTab, variant: "tabs", ariaLabel: t('profileIndex.ariaProfileTabsMobile') }), 
+        // Render the tab's label rather than the id — every label is already
+        // cased correctly.
+        title: (_f = (_e = TABS.find((tab) => tab.id === activeTab)) === null || _e === void 0 ? void 0 : _e.label) !== null && _f !== void 0 ? _f : activeTab, description: tabDescription(activeTab), panelProps: {
+            role: 'tabpanel',
+            id: `${activeTab}-tabpanel`,
+            'aria-labelledby': `${activeTab}-tab`,
+            tabIndex: 0,
+        }, footer: footer, overlays: jsxs(Fragment$1, { children: [jsx(EducationDialog, { open: isEducationDialogOpen, onOpenChange: setIsEducationDialogOpen, education: undefined, org: tenant, username: username, onComplete: () => {
+                        // The education tab will handle refetching
+                    } }), jsx(ExperienceDialog, { open: isExperienceDialogOpen, onOpenChange: setIsExperienceDialogOpen, experience: undefined, org: tenant, username: username, onComplete: () => {
+                        // The experience tab will handle refetching
+                    } }), jsx(ToastProvider, {})] }), children: [activeTab === 'basic' && (jsxs("form", { onSubmit: (formEvent) => {
+                    formEvent.preventDefault();
+                    formEvent.stopPropagation();
+                    if (isReadOnly)
+                        return;
+                    basicForm.handleSubmit();
+                }, className: "max-w-3xl space-y-8", children: [jsxs("div", { className: "grid grid-cols-1 gap-x-5 gap-y-5 md:grid-cols-2", children: [jsxs("div", { className: "space-y-1.5", children: [jsx("label", { htmlFor: "fullName", className: LABEL_CLASS, children: t('profileIndex.labelFullName') }), basicForm.Field({
+                                        name: 'fullName',
+                                        validators: {
+                                            onChange: basicValidators.fullName,
+                                            onSubmit: basicValidators.fullName,
+                                        },
+                                        children: (field) => {
+                                            var _a;
+                                            return (jsxs(Fragment$1, { children: [jsx(Input, { id: "fullName", className: FIELD_CLASS, value: field.state.value, onChange: (e) => field.handleChange(e.target.value), disabled: isBusyBasic }), ((_a = field.state.meta.errors) === null || _a === void 0 ? void 0 : _a.length) > 0 && (jsx("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", role: "alert", children: field.state.meta.errors }))] }));
+                                        },
+                                    })] }), jsxs("div", { className: "space-y-1.5", children: [jsx("label", { htmlFor: "email", className: LABEL_CLASS, children: t('profileIndex.labelEmail') }), basicForm.Field({
+                                        name: 'email',
+                                        children: (field) => (jsx(Input, { id: "email", type: "email", className: FIELD_CLASS, value: field.state.value, onChange: (e) => field.handleChange(e.target.value), disabled: isBusyBasic })),
+                                    })] }), customization.showUsernameField && (jsxs("div", { className: "space-y-1.5", children: [jsx("label", { htmlFor: "username", className: LABEL_CLASS, children: t('profileIndex.labelUsername') }), basicForm.Field({
+                                        name: 'username',
+                                        children: (field) => (jsx(Input, { id: "username", className: FIELD_CLASS, value: field.state.value, onChange: (e) => field.handleChange(e.target.value), disabled: isBusyBasic })),
+                                    })] })), jsxs("div", { className: "space-y-1.5", children: [jsx("label", { htmlFor: "title", className: LABEL_CLASS, children: t('profileIndex.labelTitle') }), basicForm.Field({
+                                        name: 'title',
+                                        children: (field) => (jsx(Input, { id: "title", className: FIELD_CLASS, value: field.state.value, onChange: (e) => field.handleChange(e.target.value), disabled: isBusyBasic })),
+                                    })] }), jsxs("div", { className: "space-y-1.5", children: [jsx("label", { htmlFor: "language", className: LABEL_CLASS, children: t('profileIndex.labelLanguage') }), basicForm.Field({
+                                        name: 'language',
+                                        children: (field) => (jsxs(Select$1, { defaultValue: field.state.value, onValueChange: (value) => field.handleChange(value), disabled: isBusyBasic, children: [jsx(SelectTrigger, { id: "language", className: FIELD_CLASS, "aria-label": t('profileIndex.selectLanguagePlaceholder'), children: jsx(SelectValue, { placeholder: t('profileIndex.selectLanguagePlaceholder') }) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "en", children: t('profileIndex.langEnglish') }), jsx(SelectItem, { value: "es", children: t('profileIndex.langSpanish') }), jsx(SelectItem, { value: "fr", children: t('profileIndex.langFrench') })] })] })),
+                                    })] }), jsxs("div", { className: "space-y-1.5 md:col-span-2", children: [jsx("label", { htmlFor: "about", className: LABEL_CLASS, children: t('profileIndex.labelAbout') }), basicForm.Field({
+                                        name: 'about',
+                                        children: (field) => (jsx(Textarea, { id: "about", placeholder: t('profileIndex.placeholderAbout'), className: cn(FIELD_CLASS, 'h-auto resize-none py-2.5 leading-relaxed'), rows: 4, value: field.state.value, onChange: (e) => field.handleChange(e.target.value), disabled: isBusyBasic })),
+                                    })] })] }), customization.showMentorAIDisplayCheckbox && (jsxs("section", { className: "space-y-2.5", "aria-labelledby": "profile-features-heading", children: [jsx("h4", { id: "profile-features-heading", className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: t('profileIndex.sectionFeatures') }), jsx("div", { className: "divide-y divide-gray-200 rounded-xl border border-gray-200 dark:divide-gray-800 dark:border-gray-800", children: jsxs("div", { className: "flex items-center justify-between gap-4 px-4 py-3.5", children: [jsxs("div", { className: "flex min-w-0 items-center gap-1", children: [jsx("label", { htmlFor: "display-mentor", className: "text-sm font-medium text-gray-700 peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:text-gray-300", children: t('profileIndex.checkboxDisplayMentorAI') }), jsx(CardInfoIcon, { description: t('profileIndex.tooltipDisplayMentorAI') })] }), basicForm.Field({
+                                            name: 'displayMentor',
+                                            children: (field) => (jsx(Switch, { className: "data-[state=checked]:bg-blue-600", onCheckedChange: (checked) => field.handleChange(checked), checked: field.state.value, disabled: isBusyBasic, id: "display-mentor" })),
+                                        })] }) })] }))] })), activeTab === 'social' && (jsxs("form", { className: "max-w-2xl space-y-5", onSubmit: (formEvent) => {
+                    formEvent.preventDefault();
+                    formEvent.stopPropagation();
+                    if (isReadOnly)
+                        return;
+                    socialForm.handleSubmit();
+                }, children: [socialField({
+                        id: 'facebook',
+                        name: 'facebook',
+                        label: t('profileIndex.labelFacebook'),
+                        placeholder: t('profileIndex.placeholderFacebook'),
+                        prefix: FACEBOOK_URL_PREFIX,
+                        badge: { className: 'bg-[#1877F2]', text: 'f', textClassName: 'text-sm' },
+                        validator: socialValidators.facebook,
+                    }), socialField({
+                        id: 'linkedin',
+                        name: 'linkedIn',
+                        label: t('profileIndex.labelLinkedIn'),
+                        placeholder: t('profileIndex.placeholderLinkedIn'),
+                        prefix: LINKEDIN_URL_PREFIX,
+                        badge: { className: 'bg-[#0A66C2]', text: 'in', textClassName: 'text-xs' },
+                        validator: socialValidators.linkedIn,
+                    }), socialField({
+                        id: 'x',
+                        name: 'x',
+                        label: t('profileIndex.labelX'),
+                        placeholder: t('profileIndex.placeholderX'),
+                        prefix: X_URL_PREFIX,
+                        badge: { className: 'bg-black', text: 'X', textClassName: 'text-sm' },
+                        validator: socialValidators.x,
+                    })] })), activeTab === 'education' && (jsxs(Tabs, { value: educationSubTab, onValueChange: setEducationSubTab, className: "space-y-4", children: [jsxs("div", { className: "flex items-center justify-between gap-3", children: [jsxs(TabsList, { children: [jsx(TabsTrigger, { value: "education", children: t('profileIndex.tabEducation') }), jsx(TabsTrigger, { value: "credentials", children: t('gradebookGradebookTab.typeCredentials') }), jsx(TabsTrigger, { value: "skills", children: t('gradebookGradebookTab.typeSkills') })] }), headerAddButton] }), jsx(TabsContent, { value: "education", children: jsx(EducationTab, { org: tenant, username: username }) }), jsx(TabsContent, { value: "credentials", children: jsx(CredentialsList, { org: tenant, username: username }) }), jsx(TabsContent, { value: "skills", children: jsx(SkillsList, { org: tenant, username: username }) })] })), activeTab === 'gradebook' && jsx(GradebookTab, { org: tenant, username: username }), activeTab === 'experience' && (jsxs(Tabs, { value: experienceSubTab, onValueChange: setExperienceSubTab, className: "space-y-4", children: [jsxs("div", { className: "flex items-center justify-between gap-3", children: [jsxs(TabsList, { children: [jsx(TabsTrigger, { value: "experience", children: t('profileIndex.tabExperience') }), jsx(TabsTrigger, { value: "resume", children: t('profileIndex.tabResume') })] }), headerAddButton] }), jsx(TabsContent, { value: "experience", children: jsx(ExperienceTab, { org: tenant, username: username }) }), jsx(TabsContent, { value: "resume", children: jsx(ResumeTab, { org: tenant, username: username }) })] })), activeTab === 'purchases' && jsx(PurchasesTab, { org: tenant, username: username }), activeTab === 'memory' && jsx(MemoryTab, { org: tenant, username: username }), activeTab === 'privacy' && jsx(ChatPrivacyTab, { org: tenant, username: username }), isChatHistoryVisible && activeTab === 'chatHistory' && (jsx(ChatHistoryTab, { org: tenant, username: username })), isLlmUsageVisible && activeTab === 'llmUsage' && (jsx(LlmUsageTab, { org: tenant, username: username, isOwnProfile: !isReadOnly })), !isReadOnly && activeTab === 'security' && (jsx(Security, { app: currentSPA || '', email: (userMetadata === null || userMetadata === void 0 ? void 0 : userMetadata.email) || '', platformKey: tenant, onAccountDeleted: onAccountDeleted })), activeTab === 'advanced' && localLLMProps && (jsx("div", { className: "space-y-6", children: jsx(LocalModelsContent, { isAvailable: localLLMProps.isAvailable, state: localLLMProps.state, ollamaStatus: localLLMProps.ollamaStatus, systemMemory: localLLMProps.systemMemory, isUsingFoundry: localLLMProps.isUsingFoundry, foundryModels: localLLMProps.foundryModels, selectedFoundryModel: localLLMProps.selectedFoundryModel, foundryStatus: localLLMProps.foundryStatus, onStartDownload: localLLMProps.onStartDownload, onCancelDownload: localLLMProps.onCancelDownload, onInstallOllama: localLLMProps.onInstallOllama, onStopManager: localLLMProps.onStopManager, onInstallFoundry: localLLMProps.onInstallFoundry, onCheckStatus: localLLMProps.onCheckStatus, onResetState: localLLMProps.onResetState, onSelectFoundryModel: localLLMProps.onSelectFoundryModel }) }))] }));
 }
 
 function CSVEditor({ csvData, onSave, onCancel }) {
@@ -226898,19 +227902,6 @@ function AddCreditsModal({ isOpen, onClose, tenant }) {
     return (jsx(Dialog, { open: isOpen, onOpenChange: handleClose, children: jsxs(DialogContent, { className: "max-w-md", children: [jsxs(DialogHeader, { children: [jsx(DialogTitle, { children: t('profileAddCreditsModal.title') }), jsx(DialogDescription, { children: t('profileAddCreditsModal.description') })] }), jsxs("form", { onSubmit: handleSubmit, className: "space-y-6", children: [jsxs("div", { className: "space-y-2", children: [jsx(Label$1, { htmlFor: "credit-amount", className: "text-sm font-medium", children: t('profileAddCreditsModal.amountLabel') }), jsxs("div", { className: "relative", children: [jsx(DollarSign, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" }), jsx(Input, { id: "credit-amount", type: "number", min: "0.01", step: "0.01", placeholder: "50.00", value: amount, onChange: (e) => setAmount(e.target.value), className: "pl-9" })] }), jsx("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: t('profileAddCreditsModal.amountHint') })] }), jsxs("div", { className: "flex items-start gap-2 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-100 dark:border-blue-800", children: [jsx(CircleAlert, { className: "h-4 w-4 text-blue-500 mt-0.5 flex-shrink-0" }), jsx("p", { className: "text-xs text-blue-700 dark:text-blue-300", children: t('profileAddCreditsModal.paymentMethodNotice') })] }), jsxs(DialogFooter, { className: "gap-2 sm:gap-0", children: [jsx(Button$1, { type: "button", variant: "outline", onClick: handleClose, children: t('profileAddCreditsModal.cancel') }), jsx(Button$1, { type: "submit", disabled: isLoading, className: "bg-gradient-to-r from-[#2563EB] to-[#93C5FD] hover:opacity-90 text-white", children: isLoading ? (jsxs(Fragment$1, { children: [jsx(LoaderCircle, { className: "mr-2 h-4 w-4 animate-spin" }), t('profileAddCreditsModal.processing')] })) : (t('profileAddCreditsModal.addCredits')) })] })] })] }) }));
 }
 
-/**
- * The info icon that sits on every analytics card and, on hover or keyboard
- * focus, explains what the card measures. The description doubles as the
- * accessible name so screen readers get it without needing the hover.
- *
- * Uses the tooltip primitives directly rather than the shared `TooltipContent`
- * because analytics wants a light popover, while `TooltipContent` is the dark
- * `bg-primary` style the rest of the app relies on.
- */
-function CardInfoIcon({ title, description, className }) {
-    return (jsxs(Tooltip$1, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx("button", { type: "button", "aria-label": description, className: cn('shrink-0 cursor-help rounded p-1 text-[#898989] transition-colors hover:bg-gray-100 hover:text-[#38A1E5] focus-visible:ring-2 focus-visible:ring-[#38A1E5] focus-visible:outline-none', className), children: jsx(Info$3, { className: "h-4 w-4", "aria-hidden": "true" }) }) }), jsx(Portal$2, { children: jsxs(Content2$3, { "data-slot": "tooltip-content", side: "top", align: "center", sideOffset: 6, collisionPadding: 12, className: "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 z-50 max-w-[260px] rounded-lg border border-[oklch(0.922_0_0)] bg-white p-3 shadow-lg", children: [title && (jsx("div", { "data-slot": "tooltip-title", className: "mb-1 text-sm font-semibold text-[#484848]", children: title })), jsx("p", { "data-slot": "tooltip-description", className: "text-sm leading-relaxed text-[#646464]", children: description })] }) })] }));
-}
-
 /**
  * Shared utilities for tab label systems.
  *
@@ -230131,11 +231122,11 @@ function StripeConnect({ platformKey }) {
         }
     };
     if (isLoading) {
-        return (jsx(Card, { className: "shadow-sm border", style: { borderColor: 'oklch(.922 0 0)' }, children: jsx(CardContent, { className: "p-6", children: jsxs("div", { className: "flex items-center gap-4", children: [jsx(Skeleton, { className: "h-12 w-12 rounded-full" }), jsxs("div", { className: "flex-1 space-y-2", children: [jsx(Skeleton, { className: "h-5 w-48" }), jsx(Skeleton, { className: "h-4 w-72" })] }), jsx(Skeleton, { className: "h-9 w-32" })] }) }) }));
+        return (jsx(Card$1, { className: "shadow-sm border", style: { borderColor: 'oklch(.922 0 0)' }, children: jsx(CardContent, { className: "p-6", children: jsxs("div", { className: "flex items-center gap-4", children: [jsx(Skeleton, { className: "h-12 w-12 rounded-full" }), jsxs("div", { className: "flex-1 space-y-2", children: [jsx(Skeleton, { className: "h-5 w-48" }), jsx(Skeleton, { className: "h-4 w-72" })] }), jsx(Skeleton, { className: "h-9 w-32" })] }) }) }));
     }
     const isReady = status === null || status === void 0 ? void 0 : status.is_ready_for_payments;
     const hasAccount = status === null || status === void 0 ? void 0 : status.has_account;
-    return (jsx(Card, { className: "shadow-sm border", style: { borderColor: 'oklch(.922 0 0)' }, children: jsx(CardContent, { className: "p-6", children: jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center gap-4", children: [jsxs("div", { className: "flex-1 min-w-0", children: [jsxs("div", { className: "flex items-center gap-2 mb-1", children: [jsx("h4", { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: t('monetizationStripeConnect.stripeConfiguration') }), isReady ? (jsx(Badge, { className: "bg-blue-100 text-blue-700 border-blue-200", children: t('monetizationStripeConnect.badgeConfigured') })) : hasAccount ? (jsx(Badge, { className: "bg-yellow-100 text-yellow-700 border-yellow-200", children: t('monetizationStripeConnect.badgeIncomplete') })) : (jsx(Badge, { variant: "secondary", children: t('monetizationStripeConnect.badgeNotConfigured') }))] }), isReady ? (jsxs("p", { className: "text-sm text-gray-500", children: [t('monetizationStripeConnect.stripeConnectedReady'), (status === null || status === void 0 ? void 0 : status.charges_enabled) && ' ' + t('monetizationStripeConnect.chargesEnabled'), (status === null || status === void 0 ? void 0 : status.payouts_enabled) && ' ' + t('monetizationStripeConnect.payoutsEnabled')] })) : hasAccount ? (jsx("p", { className: "text-sm text-gray-500", children: t('monetizationStripeConnect.onboardingIncomplete') })) : (jsx("p", { className: "text-sm text-gray-500", children: t('monetizationStripeConnect.connectStripePrompt') }))] }), jsx("div", { className: "flex gap-2 flex-shrink-0", children: isError ? null : isReady ? (jsxs(Button$1, { onClick: handleOpenDashboard, disabled: isRedirecting, variant: "outline", className: "cursor-pointer", children: [isRedirecting ? (jsx(LoaderCircle, { className: "h-4 w-4 mr-2 animate-spin" })) : (jsx(ExternalLink, { className: "h-4 w-4 mr-2" })), t('monetizationStripeConnect.stripeDashboardButton')] })) : (jsxs(Button$1, { onClick: handleStartOnboarding, disabled: isStartingOnboarding || isRedirecting, className: "bg-gradient-to-r from-[#2563EB] to-[#93C5FD] hover:opacity-90 text-white cursor-pointer", children: [isStartingOnboarding || isRedirecting ? (jsx(LoaderCircle, { className: "h-4 w-4 mr-2 animate-spin" })) : (jsx(Link$1, { className: "h-4 w-4 mr-2" })), isStartingOnboarding || isRedirecting
+    return (jsx(Card$1, { className: "shadow-sm border", style: { borderColor: 'oklch(.922 0 0)' }, children: jsx(CardContent, { className: "p-6", children: jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center gap-4", children: [jsxs("div", { className: "flex-1 min-w-0", children: [jsxs("div", { className: "flex items-center gap-2 mb-1", children: [jsx("h4", { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: t('monetizationStripeConnect.stripeConfiguration') }), isReady ? (jsx(Badge, { className: "bg-blue-100 text-blue-700 border-blue-200", children: t('monetizationStripeConnect.badgeConfigured') })) : hasAccount ? (jsx(Badge, { className: "bg-yellow-100 text-yellow-700 border-yellow-200", children: t('monetizationStripeConnect.badgeIncomplete') })) : (jsx(Badge, { variant: "secondary", children: t('monetizationStripeConnect.badgeNotConfigured') }))] }), isReady ? (jsxs("p", { className: "text-sm text-gray-500", children: [t('monetizationStripeConnect.stripeConnectedReady'), (status === null || status === void 0 ? void 0 : status.charges_enabled) && ' ' + t('monetizationStripeConnect.chargesEnabled'), (status === null || status === void 0 ? void 0 : status.payouts_enabled) && ' ' + t('monetizationStripeConnect.payoutsEnabled')] })) : hasAccount ? (jsx("p", { className: "text-sm text-gray-500", children: t('monetizationStripeConnect.onboardingIncomplete') })) : (jsx("p", { className: "text-sm text-gray-500", children: t('monetizationStripeConnect.connectStripePrompt') }))] }), jsx("div", { className: "flex gap-2 flex-shrink-0", children: isError ? null : isReady ? (jsxs(Button$1, { onClick: handleOpenDashboard, disabled: isRedirecting, variant: "outline", className: "cursor-pointer", children: [isRedirecting ? (jsx(LoaderCircle, { className: "h-4 w-4 mr-2 animate-spin" })) : (jsx(ExternalLink, { className: "h-4 w-4 mr-2" })), t('monetizationStripeConnect.stripeDashboardButton')] })) : (jsxs(Button$1, { onClick: handleStartOnboarding, disabled: isStartingOnboarding || isRedirecting, className: "bg-gradient-to-r from-[#2563EB] to-[#93C5FD] hover:opacity-90 text-white cursor-pointer", children: [isStartingOnboarding || isRedirecting ? (jsx(LoaderCircle, { className: "h-4 w-4 mr-2 animate-spin" })) : (jsx(Link$1, { className: "h-4 w-4 mr-2" })), isStartingOnboarding || isRedirecting
                                     ? t('monetizationStripeConnect.redirecting')
                                     : hasAccount
                                         ? t('monetizationStripeConnect.completeSetup')
@@ -230288,12 +231279,12 @@ function PaywalledItemsList({ platformKey, onSelectItem, onAddCustomItem, }) {
         page_size: PAGE_SIZE$a,
         ...(statusFilter !== 'all' && { is_enabled: statusFilter === 'active' }),
     }, { refetchOnMountOrArgChange: true });
-    return (jsxs("div", { className: "space-y-4", children: [jsx(Card, { className: "shadow-sm border", style: { borderColor: 'oklch(.922 0 0)' }, children: jsxs(CardContent, { className: "p-4", children: [jsx("h4", { className: "text-sm font-medium text-gray-700 dark:text-gray-300 mb-3", children: t('monetizationPaywalledItemsList.configureItemForSale') }), jsxs("div", { className: "flex items-center gap-2", children: [jsx(ItemSearchDropdown, { platformKey: platformKey, onSelect: (itemType, uniqueId, name) => onSelectItem(itemType, uniqueId, name) }), jsx(Button$1, { variant: "outline", size: "icon", onClick: onAddCustomItem, className: "shrink-0 cursor-pointer", title: t('monetizationPaywalledItemsList.addCustomItemTitle'), children: jsx(Plus, { className: "h-4 w-4" }) })] })] }) }), jsxs("div", { className: "space-y-2", children: [jsxs("div", { className: "flex items-center justify-between", children: [jsx("h4", { className: "text-sm font-medium text-gray-500", children: t('monetizationPaywalledItemsList.configuredItems') }), jsxs(Select$1, { value: statusFilter, onValueChange: (v) => {
+    return (jsxs("div", { className: "space-y-4", children: [jsx(Card$1, { className: "shadow-sm border", style: { borderColor: 'oklch(.922 0 0)' }, children: jsxs(CardContent, { className: "p-4", children: [jsx("h4", { className: "text-sm font-medium text-gray-700 dark:text-gray-300 mb-3", children: t('monetizationPaywalledItemsList.configureItemForSale') }), jsxs("div", { className: "flex items-center gap-2", children: [jsx(ItemSearchDropdown, { platformKey: platformKey, onSelect: (itemType, uniqueId, name) => onSelectItem(itemType, uniqueId, name) }), jsx(Button$1, { variant: "outline", size: "icon", onClick: onAddCustomItem, className: "shrink-0 cursor-pointer", title: t('monetizationPaywalledItemsList.addCustomItemTitle'), children: jsx(Plus, { className: "h-4 w-4" }) })] })] }) }), jsxs("div", { className: "space-y-2", children: [jsxs("div", { className: "flex items-center justify-between", children: [jsx("h4", { className: "text-sm font-medium text-gray-500", children: t('monetizationPaywalledItemsList.configuredItems') }), jsxs(Select$1, { value: statusFilter, onValueChange: (v) => {
                                     setStatusFilter(v);
                                     setPage(1);
                                 }, children: [jsx(SelectTrigger, { className: "w-[130px] h-8 text-xs", children: jsx(SelectValue, {}) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "all", children: t('monetizationPaywalledItemsList.filterAll') }), jsx(SelectItem, { value: "active", children: t('monetizationPaywalledItemsList.filterActive') }), jsx(SelectItem, { value: "disabled", children: t('monetizationPaywalledItemsList.filterDisabled') })] })] })] }), isLoading ? (jsx("div", { className: "space-y-2", children: [1, 2, 3].map((i) => (jsx(Skeleton, { className: "h-16 w-full" }, i))) })) : (paywalls === null || paywalls === void 0 ? void 0 : paywalls.results) && paywalls.results.length > 0 ? (jsxs(Fragment$1, { children: [paywalls.results.map((pw) => {
                                 var _a;
-                                return (jsx(Card, { className: "shadow-sm border hover:border-blue-200 transition-colors cursor-pointer", style: { borderColor: 'oklch(.922 0 0)' }, onClick: () => onSelectItem(pw.item_type, pw.item_id, pw.item_name), children: jsxs(CardContent, { className: "p-4 flex items-center justify-between", children: [jsx("div", { className: "flex items-center gap-3", children: jsxs("div", { children: [jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: pw.item_name || pw.item_id }), jsxs("div", { className: "flex items-center gap-2 mt-0.5", children: [jsx(Badge, { variant: "secondary", className: "text-xs capitalize", children: displayItemType(pw.item_type) }), ((_a = pw.prices) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
+                                return (jsx(Card$1, { className: "shadow-sm border hover:border-blue-200 transition-colors cursor-pointer", style: { borderColor: 'oklch(.922 0 0)' }, onClick: () => onSelectItem(pw.item_type, pw.item_id, pw.item_name), children: jsxs(CardContent, { className: "p-4 flex items-center justify-between", children: [jsx("div", { className: "flex items-center gap-3", children: jsxs("div", { children: [jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: pw.item_name || pw.item_id }), jsxs("div", { className: "flex items-center gap-2 mt-0.5", children: [jsx(Badge, { variant: "secondary", className: "text-xs capitalize", children: displayItemType(pw.item_type) }), ((_a = pw.prices) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
                                                                     (() => {
                                                                         const activeCount = pw.prices.filter((p) => p.is_active).length;
                                                                         return activeCount > 0 ? (jsx("span", { className: "text-xs text-gray-400", children: activeCount !== 1
@@ -230349,7 +231340,7 @@ function PriceForm({ form, onChange, onSave, onCancel, isSaving, isEdit, }) {
     const handleRemoveFeature = (index) => {
         onChange({ ...form, features: form.features.filter((_, i) => i !== index) });
     };
-    return (jsx(Card, { className: "shadow-sm border border-blue-200 bg-blue-50/30", style: { borderColor: 'oklch(.922 0 0)' }, children: jsxs(CardContent, { className: "p-4 space-y-3", children: [jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: [jsxs("div", { children: [jsx(Label$1, { className: "text-xs text-gray-500", children: t('monetizationPriceManagement.nameLabel') }), jsx(Input, { value: form.name, onChange: (e) => onChange({ ...form, name: e.target.value }), placeholder: t('monetizationPriceManagement.namePlaceholder'), className: "mt-1" })] }), jsxs("div", { children: [jsx(Label$1, { className: "text-xs text-gray-500", children: t('monetizationPriceManagement.amountLabel') }), jsx(Input, { type: "number", min: 0, step: "0.01", value: form.amount, onChange: (e) => onChange({ ...form, amount: e.target.value }), placeholder: t('monetizationPriceManagement.amountPlaceholder'), className: "mt-1" })] }), jsxs("div", { children: [jsx(Label$1, { className: "text-xs text-gray-500", children: t('monetizationPriceManagement.intervalLabel') }), jsxs(Select$1, { value: form.interval, onValueChange: (v) => onChange({ ...form, interval: v }), children: [jsx(SelectTrigger, { className: "mt-1", children: jsx(SelectValue, {}) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "month", children: t('monetizationPriceManagement.intervalMonthly') }), jsx(SelectItem, { value: "year", children: t('monetizationPriceManagement.intervalYearly') }), jsx(SelectItem, { value: "one_time", children: t('monetizationPriceManagement.intervalOneTime') })] })] })] }), jsxs("div", { children: [jsx(Label$1, { className: "text-xs text-gray-500", children: t('monetizationPriceManagement.currencyLabel') }), jsx(Input, { value: form.currency, disabled: true, className: "mt-1 bg-gray-50 text-gray-500 cursor-not-allowed" })] })] }), jsxs("div", { children: [jsx(Label$1, { className: "text-xs text-gray-500", children: t('monetizationPriceManagement.descriptionLabel') }), jsx(Input, { value: form.description, onChange: (e) => onChange({ ...form, description: e.target.value }), placeholder: t('monetizationPriceManagement.descriptionPlaceholder'), className: "mt-1" })] }), jsxs("div", { children: [jsx(Label$1, { className: "text-xs text-gray-500", children: t('monetizationPriceManagement.featuresLabel') }), form.features.length > 0 && (jsx("div", { className: "flex flex-wrap gap-1.5 mt-1.5 mb-1.5", children: form.features.map((feature, i) => (jsxs(Badge, { variant: "secondary", className: "text-xs font-normal pl-2 pr-1 py-0.5 flex items-center gap-1", children: [feature, jsx("button", { type: "button", onClick: () => handleRemoveFeature(i), className: "hover:bg-gray-300 rounded-full p-0.5 transition-colors cursor-pointer", children: jsx(X$2, { className: "h-2.5 w-2.5" }) })] }, i))) })), jsxs("div", { className: "flex gap-1.5 mt-1", children: [jsx(Input, { value: featureInput, onChange: (e) => setFeatureInput(e.target.value), onKeyDown: (e) => {
+    return (jsx(Card$1, { className: "shadow-sm border border-blue-200 bg-blue-50/30", style: { borderColor: 'oklch(.922 0 0)' }, children: jsxs(CardContent, { className: "p-4 space-y-3", children: [jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: [jsxs("div", { children: [jsx(Label$1, { className: "text-xs text-gray-500", children: t('monetizationPriceManagement.nameLabel') }), jsx(Input, { value: form.name, onChange: (e) => onChange({ ...form, name: e.target.value }), placeholder: t('monetizationPriceManagement.namePlaceholder'), className: "mt-1" })] }), jsxs("div", { children: [jsx(Label$1, { className: "text-xs text-gray-500", children: t('monetizationPriceManagement.amountLabel') }), jsx(Input, { type: "number", min: 0, step: "0.01", value: form.amount, onChange: (e) => onChange({ ...form, amount: e.target.value }), placeholder: t('monetizationPriceManagement.amountPlaceholder'), className: "mt-1" })] }), jsxs("div", { children: [jsx(Label$1, { className: "text-xs text-gray-500", children: t('monetizationPriceManagement.intervalLabel') }), jsxs(Select$1, { value: form.interval, onValueChange: (v) => onChange({ ...form, interval: v }), children: [jsx(SelectTrigger, { className: "mt-1", children: jsx(SelectValue, {}) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "month", children: t('monetizationPriceManagement.intervalMonthly') }), jsx(SelectItem, { value: "year", children: t('monetizationPriceManagement.intervalYearly') }), jsx(SelectItem, { value: "one_time", children: t('monetizationPriceManagement.intervalOneTime') })] })] })] }), jsxs("div", { children: [jsx(Label$1, { className: "text-xs text-gray-500", children: t('monetizationPriceManagement.currencyLabel') }), jsx(Input, { value: form.currency, disabled: true, className: "mt-1 bg-gray-50 text-gray-500 cursor-not-allowed" })] })] }), jsxs("div", { children: [jsx(Label$1, { className: "text-xs text-gray-500", children: t('monetizationPriceManagement.descriptionLabel') }), jsx(Input, { value: form.description, onChange: (e) => onChange({ ...form, description: e.target.value }), placeholder: t('monetizationPriceManagement.descriptionPlaceholder'), className: "mt-1" })] }), jsxs("div", { children: [jsx(Label$1, { className: "text-xs text-gray-500", children: t('monetizationPriceManagement.featuresLabel') }), form.features.length > 0 && (jsx("div", { className: "flex flex-wrap gap-1.5 mt-1.5 mb-1.5", children: form.features.map((feature, i) => (jsxs(Badge, { variant: "secondary", className: "text-xs font-normal pl-2 pr-1 py-0.5 flex items-center gap-1", children: [feature, jsx("button", { type: "button", onClick: () => handleRemoveFeature(i), className: "hover:bg-gray-300 rounded-full p-0.5 transition-colors cursor-pointer", children: jsx(X$2, { className: "h-2.5 w-2.5" }) })] }, i))) })), jsxs("div", { className: "flex gap-1.5 mt-1", children: [jsx(Input, { value: featureInput, onChange: (e) => setFeatureInput(e.target.value), onKeyDown: (e) => {
                                         if (e.key === 'Enter') {
                                             e.preventDefault();
                                             handleAddFeature();
@@ -230466,7 +231457,7 @@ function PriceManagement({ platformKey, itemType, itemId }) {
                     return editingPriceId === price.id ? (jsx(PriceForm, { form: formData, onChange: setFormData, onSave: handleUpdate, onCancel: () => {
                             setEditingPriceId(null);
                             setFormData(EMPTY_FORM$1);
-                        }, isSaving: isUpdating, isEdit: true }, price.id)) : (jsx(Card, { className: "shadow-sm border", style: { borderColor: 'oklch(.922 0 0)' }, children: jsx(CardContent, { className: "p-4", children: jsxs("div", { className: "flex items-center justify-between", children: [jsxs("div", { className: "flex items-center gap-3", children: [jsx(Tag, { className: "h-4 w-4 text-gray-400" }), jsxs("div", { children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: price.name }), jsxs("span", { className: "text-sm font-semibold text-blue-600", children: ["$", price.amount, " ", formatInterval(price.interval)] }), !price.is_active && (jsx(Badge, { variant: "secondary", className: "text-xs", children: t('monetizationPriceManagement.inactiveBadge') }))] }), price.description && (jsx("p", { className: "text-xs text-gray-400 mt-0.5", children: price.description })), ((_a = price.features) === null || _a === void 0 ? void 0 : _a.length) > 0 && (jsx("div", { className: "flex flex-wrap gap-1 mt-1", children: price.features.map((f, i) => (jsx(Badge, { variant: "outline", className: "text-xs font-normal", children: f }, i))) }))] })] }), jsxs("div", { className: "flex gap-1 flex-shrink-0", children: [jsx(Button$1, { onClick: () => handleStartEdit(price), variant: "ghost", size: "sm", className: "h-8 w-8 p-0 cursor-pointer", children: jsx(Pencil, { className: "h-3 w-3" }) }), jsx(Button$1, { onClick: () => handleDelete(price.id), variant: "ghost", size: "sm", disabled: deletingId === price.id, className: "h-8 w-8 p-0 text-red-500 hover:text-red-700 cursor-pointer", children: deletingId === price.id ? (jsx(LoaderCircle, { className: "h-3 w-3 animate-spin" })) : (jsx(Trash2, { className: "h-3 w-3" })) })] })] }) }) }, price.id));
+                        }, isSaving: isUpdating, isEdit: true }, price.id)) : (jsx(Card$1, { className: "shadow-sm border", style: { borderColor: 'oklch(.922 0 0)' }, children: jsx(CardContent, { className: "p-4", children: jsxs("div", { className: "flex items-center justify-between", children: [jsxs("div", { className: "flex items-center gap-3", children: [jsx(Tag, { className: "h-4 w-4 text-gray-400" }), jsxs("div", { children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: price.name }), jsxs("span", { className: "text-sm font-semibold text-blue-600", children: ["$", price.amount, " ", formatInterval(price.interval)] }), !price.is_active && (jsx(Badge, { variant: "secondary", className: "text-xs", children: t('monetizationPriceManagement.inactiveBadge') }))] }), price.description && (jsx("p", { className: "text-xs text-gray-400 mt-0.5", children: price.description })), ((_a = price.features) === null || _a === void 0 ? void 0 : _a.length) > 0 && (jsx("div", { className: "flex flex-wrap gap-1 mt-1", children: price.features.map((f, i) => (jsx(Badge, { variant: "outline", className: "text-xs font-normal", children: f }, i))) }))] })] }), jsxs("div", { className: "flex gap-1 flex-shrink-0", children: [jsx(Button$1, { onClick: () => handleStartEdit(price), variant: "ghost", size: "sm", className: "h-8 w-8 p-0 cursor-pointer", children: jsx(Pencil, { className: "h-3 w-3" }) }), jsx(Button$1, { onClick: () => handleDelete(price.id), variant: "ghost", size: "sm", disabled: deletingId === price.id, className: "h-8 w-8 p-0 text-red-500 hover:text-red-700 cursor-pointer", children: deletingId === price.id ? (jsx(LoaderCircle, { className: "h-3 w-3 animate-spin" })) : (jsx(Trash2, { className: "h-3 w-3" })) })] })] }) }) }, price.id));
                 }) })) : (jsx("p", { className: "text-xs text-gray-400 text-center py-4", children: t('monetizationPriceManagement.emptyState') }))] }));
 }
 
@@ -230636,13 +231627,13 @@ function PaywallDetail({ platformKey, authURL, itemType, itemId, itemName, isCus
                         const currentIndex = wizardSteps.findIndex((s) => s.key === currentStep);
                         if (targetIndex < currentIndex)
                             setCurrentStep(step);
-                    } }), currentStep === 'custom-item' && isCustom && (jsx(Card, { className: "shadow-sm border", style: { borderColor: 'oklch(.922 0 0)' }, children: jsxs(CardContent, { className: "p-6 space-y-4", children: [jsx("h4", { className: "text-sm font-semibold text-gray-700 dark:text-gray-300", children: t('monetizationPaywallDetail.stepItemDetails') }), jsxs("div", { className: "space-y-3", children: [jsxs("div", { children: [jsx(Label$1, { className: "text-sm font-medium", children: t('monetizationPaywallDetail.labelItemType') }), jsx(Input, { value: customItemType, onChange: (e) => setCustomItemType(e.target.value), placeholder: t('monetizationPaywallDetail.placeholderItemType'), className: "mt-1", disabled: itemCreated }), customItemType && (jsx("p", { className: "text-xs text-gray-400 mt-1", children: t('monetizationPaywallDetail.slugPreview', { slug: slugify(customItemType) }) }))] }), jsxs("div", { children: [jsx(Label$1, { className: "text-sm font-medium", children: t('monetizationPaywallDetail.labelItemName') }), jsx(Input, { value: customItemName, onChange: (e) => setCustomItemName(e.target.value), placeholder: t('monetizationPaywallDetail.placeholderItemName'), className: "mt-1", disabled: itemCreated }), customItemName && (jsx("p", { className: "text-xs text-gray-400 mt-1", children: t('monetizationPaywallDetail.idPreview', { id: slugify(customItemName) }) }))] }), jsxs("div", { children: [jsx(Label$1, { className: "text-sm font-medium", children: t('monetizationPaywallDetail.labelDescription') }), jsx(Textarea, { value: customDescription, onChange: (e) => setCustomDescription(e.target.value), placeholder: t('monetizationPaywallDetail.placeholderDescription'), className: "mt-1", rows: 3 })] }), jsxs("div", { children: [jsx(Label$1, { className: "text-sm font-medium", children: t('monetizationPaywallDetail.labelProductUrl') }), jsx(Input, { type: "url", value: customProductUrl, onChange: (e) => setCustomProductUrl(e.target.value), placeholder: t('monetizationPaywallDetail.placeholderProductUrl'), className: "mt-1", disabled: itemCreated }), jsx("p", { className: "text-xs text-gray-400 mt-1", children: t('monetizationPaywallDetail.hintProductUrl') })] })] }), jsx("div", { className: "pt-3 border-t flex justify-end", children: jsxs(Button$1, { onClick: handleCreateCustomItem, disabled: isSaving || !customItemType.trim() || !customItemName.trim(), className: "bg-gradient-to-r from-[#2563EB] to-[#93C5FD] hover:opacity-90 text-white cursor-pointer", children: [isCreating ? (jsx(LoaderCircle, { className: "h-4 w-4 mr-2 animate-spin" })) : (jsx(ChevronRight, { className: "h-4 w-4 mr-2" })), t('monetizationPaywallDetail.createAndContinue')] }) })] }) })), currentStep === 'paywall' && (jsx(Card, { className: "shadow-sm border", style: { borderColor: 'oklch(.922 0 0)' }, children: jsxs(CardContent, { className: "p-6 space-y-5", children: [jsxs("div", { className: "flex items-center justify-between", children: [jsxs("div", { children: [jsx(Label$1, { className: "text-sm font-medium", children: t('monetizationPaywallDetail.labelPaywallEnabled') }), jsx("p", { className: "text-xs text-gray-400 mt-0.5", children: t('monetizationPaywallDetail.hintPaywallEnabled') })] }), jsx(Switch, { checked: isEnabled, onCheckedChange: setIsEnabled, className: "cursor-pointer data-[state=checked]:bg-blue-500" })] }), jsxs("div", { className: !isEnabled ? 'opacity-50 pointer-events-none' : '', children: [jsxs("div", { className: "flex items-center justify-between py-3 border-t", children: [jsxs("div", { children: [jsx(Label$1, { className: "text-sm font-medium", children: t('monetizationPaywallDetail.labelAllowFreeTier') }), jsx("p", { className: "text-xs text-gray-400 mt-0.5", children: t('monetizationPaywallDetail.hintAllowFreeTier') })] }), jsx(Switch, { checked: allowFreeTier, onCheckedChange: setAllowFreeTier, className: "cursor-pointer data-[state=checked]:bg-blue-500" })] }), jsxs("div", { className: "flex items-center justify-between py-3 border-t", children: [jsxs("div", { children: [jsx(Label$1, { className: "text-sm font-medium", children: t('monetizationPaywallDetail.labelTrialPeriod') }), jsx("p", { className: "text-xs text-gray-400 mt-0.5", children: t('monetizationPaywallDetail.hintTrialPeriod') })] }), jsx(Input, { type: "number", min: 0, value: trialDays, onChange: (e) => setTrialDays(parseInt(e.target.value) || 0), className: "w-24 text-right" })] }), jsxs("div", { className: "flex items-center justify-between py-3 border-t", children: [jsxs("div", { children: [jsx(Label$1, { className: "text-sm font-medium", children: t('monetizationPaywallDetail.labelExistingUsers') }), jsx("p", { className: "text-xs text-gray-400 mt-0.5", children: t('monetizationPaywallDetail.hintExistingUsers') })] }), jsxs(Select$1, { value: grandfathering, onValueChange: (v) => setGrandfathering(v), children: [jsx(SelectTrigger, { className: "w-[180px]", children: jsx(SelectValue, {}) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "free_forever", children: t('monetizationPaywallDetail.grandfatheringFreeForever') }), jsx(SelectItem, { value: "require_subscription", children: t('monetizationPaywallDetail.grandfatheringRequireSubscription') })] })] })] })] }), jsx("div", { className: "pt-3 border-t flex justify-end", children: jsxs(Button$1, { onClick: handleSaveConfig, disabled: isSaving, className: "bg-gradient-to-r from-[#2563EB] to-[#93C5FD] hover:opacity-90 text-white cursor-pointer", children: [isSaving ? (jsx(LoaderCircle, { className: "h-4 w-4 mr-2 animate-spin" })) : (jsx(Check, { className: "h-4 w-4 mr-2" })), t('monetizationPaywallDetail.saveConfiguration')] }) })] }) })), currentStep === 'pricing' && (jsx(PriceManagement, { platformKey: platformKey, itemType: resolvedItemType, itemId: resolvedItemId }))] }));
+                    } }), currentStep === 'custom-item' && isCustom && (jsx(Card$1, { className: "shadow-sm border", style: { borderColor: 'oklch(.922 0 0)' }, children: jsxs(CardContent, { className: "p-6 space-y-4", children: [jsx("h4", { className: "text-sm font-semibold text-gray-700 dark:text-gray-300", children: t('monetizationPaywallDetail.stepItemDetails') }), jsxs("div", { className: "space-y-3", children: [jsxs("div", { children: [jsx(Label$1, { className: "text-sm font-medium", children: t('monetizationPaywallDetail.labelItemType') }), jsx(Input, { value: customItemType, onChange: (e) => setCustomItemType(e.target.value), placeholder: t('monetizationPaywallDetail.placeholderItemType'), className: "mt-1", disabled: itemCreated }), customItemType && (jsx("p", { className: "text-xs text-gray-400 mt-1", children: t('monetizationPaywallDetail.slugPreview', { slug: slugify(customItemType) }) }))] }), jsxs("div", { children: [jsx(Label$1, { className: "text-sm font-medium", children: t('monetizationPaywallDetail.labelItemName') }), jsx(Input, { value: customItemName, onChange: (e) => setCustomItemName(e.target.value), placeholder: t('monetizationPaywallDetail.placeholderItemName'), className: "mt-1", disabled: itemCreated }), customItemName && (jsx("p", { className: "text-xs text-gray-400 mt-1", children: t('monetizationPaywallDetail.idPreview', { id: slugify(customItemName) }) }))] }), jsxs("div", { children: [jsx(Label$1, { className: "text-sm font-medium", children: t('monetizationPaywallDetail.labelDescription') }), jsx(Textarea, { value: customDescription, onChange: (e) => setCustomDescription(e.target.value), placeholder: t('monetizationPaywallDetail.placeholderDescription'), className: "mt-1", rows: 3 })] }), jsxs("div", { children: [jsx(Label$1, { className: "text-sm font-medium", children: t('monetizationPaywallDetail.labelProductUrl') }), jsx(Input, { type: "url", value: customProductUrl, onChange: (e) => setCustomProductUrl(e.target.value), placeholder: t('monetizationPaywallDetail.placeholderProductUrl'), className: "mt-1", disabled: itemCreated }), jsx("p", { className: "text-xs text-gray-400 mt-1", children: t('monetizationPaywallDetail.hintProductUrl') })] })] }), jsx("div", { className: "pt-3 border-t flex justify-end", children: jsxs(Button$1, { onClick: handleCreateCustomItem, disabled: isSaving || !customItemType.trim() || !customItemName.trim(), className: "bg-gradient-to-r from-[#2563EB] to-[#93C5FD] hover:opacity-90 text-white cursor-pointer", children: [isCreating ? (jsx(LoaderCircle, { className: "h-4 w-4 mr-2 animate-spin" })) : (jsx(ChevronRight, { className: "h-4 w-4 mr-2" })), t('monetizationPaywallDetail.createAndContinue')] }) })] }) })), currentStep === 'paywall' && (jsx(Card$1, { className: "shadow-sm border", style: { borderColor: 'oklch(.922 0 0)' }, children: jsxs(CardContent, { className: "p-6 space-y-5", children: [jsxs("div", { className: "flex items-center justify-between", children: [jsxs("div", { children: [jsx(Label$1, { className: "text-sm font-medium", children: t('monetizationPaywallDetail.labelPaywallEnabled') }), jsx("p", { className: "text-xs text-gray-400 mt-0.5", children: t('monetizationPaywallDetail.hintPaywallEnabled') })] }), jsx(Switch, { checked: isEnabled, onCheckedChange: setIsEnabled, className: "cursor-pointer data-[state=checked]:bg-blue-500" })] }), jsxs("div", { className: !isEnabled ? 'opacity-50 pointer-events-none' : '', children: [jsxs("div", { className: "flex items-center justify-between py-3 border-t", children: [jsxs("div", { children: [jsx(Label$1, { className: "text-sm font-medium", children: t('monetizationPaywallDetail.labelAllowFreeTier') }), jsx("p", { className: "text-xs text-gray-400 mt-0.5", children: t('monetizationPaywallDetail.hintAllowFreeTier') })] }), jsx(Switch, { checked: allowFreeTier, onCheckedChange: setAllowFreeTier, className: "cursor-pointer data-[state=checked]:bg-blue-500" })] }), jsxs("div", { className: "flex items-center justify-between py-3 border-t", children: [jsxs("div", { children: [jsx(Label$1, { className: "text-sm font-medium", children: t('monetizationPaywallDetail.labelTrialPeriod') }), jsx("p", { className: "text-xs text-gray-400 mt-0.5", children: t('monetizationPaywallDetail.hintTrialPeriod') })] }), jsx(Input, { type: "number", min: 0, value: trialDays, onChange: (e) => setTrialDays(parseInt(e.target.value) || 0), className: "w-24 text-right" })] }), jsxs("div", { className: "flex items-center justify-between py-3 border-t", children: [jsxs("div", { children: [jsx(Label$1, { className: "text-sm font-medium", children: t('monetizationPaywallDetail.labelExistingUsers') }), jsx("p", { className: "text-xs text-gray-400 mt-0.5", children: t('monetizationPaywallDetail.hintExistingUsers') })] }), jsxs(Select$1, { value: grandfathering, onValueChange: (v) => setGrandfathering(v), children: [jsx(SelectTrigger, { className: "w-[180px]", children: jsx(SelectValue, {}) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "free_forever", children: t('monetizationPaywallDetail.grandfatheringFreeForever') }), jsx(SelectItem, { value: "require_subscription", children: t('monetizationPaywallDetail.grandfatheringRequireSubscription') })] })] })] })] }), jsx("div", { className: "pt-3 border-t flex justify-end", children: jsxs(Button$1, { onClick: handleSaveConfig, disabled: isSaving, className: "bg-gradient-to-r from-[#2563EB] to-[#93C5FD] hover:opacity-90 text-white cursor-pointer", children: [isSaving ? (jsx(LoaderCircle, { className: "h-4 w-4 mr-2 animate-spin" })) : (jsx(Check, { className: "h-4 w-4 mr-2" })), t('monetizationPaywallDetail.saveConfiguration')] }) })] }) })), currentStep === 'pricing' && (jsx(PriceManagement, { platformKey: platformKey, itemType: resolvedItemType, itemId: resolvedItemId }))] }));
 }
 
 function PaywallConfig({ platformKey, authURL, disabled }) {
     const [selectedItem, setSelectedItem] = useState(null);
     if (disabled) {
-        return (jsx(Card, { className: "shadow-sm border border-dashed", style: { borderColor: 'oklch(.922 0 0)' }, children: jsxs(CardContent, { className: "p-8 text-center", children: [jsx(Shield, { className: "h-10 w-10 mx-auto text-gray-300 mb-3" }), jsx("p", { className: "text-sm text-gray-400", children: "Connect Stripe first to configure paywalls." })] }) }));
+        return (jsx(Card$1, { className: "shadow-sm border border-dashed", style: { borderColor: 'oklch(.922 0 0)' }, children: jsxs(CardContent, { className: "p-8 text-center", children: [jsx(Shield, { className: "h-10 w-10 mx-auto text-gray-300 mb-3" }), jsx("p", { className: "text-sm text-gray-400", children: "Connect Stripe first to configure paywalls." })] }) }));
     }
     if (selectedItem) {
         return (jsx(PaywallDetail, { platformKey: platformKey, authURL: authURL, itemType: selectedItem.type, itemId: selectedItem.id, itemName: selectedItem.name, isCustom: selectedItem.isCustom, onBack: () => setSelectedItem(null) }));
@@ -264668,7 +265659,7 @@ function useWebsiteCrawlerResource(resource) {
 function WebsiteCrawlModal({ resource }) {
     const t = useT();
     const { form, handleCheckUrlIsValid, crawlerMatchPatterns, setCrawlerMatchPatterns } = useWebsiteCrawlerResource(resource);
-    return (jsxs(Card, { className: "mx-auto w-full max-w-2xl", role: "dialog", "aria-labelledby": "crawler-title", "aria-describedby": "crawler-description", children: [jsxs(CardHeader, { children: [jsx(CardTitle, { id: "crawler-title", className: "text-md font-semibold text-gray-600", children: t('resourceModalWebsiteCrawlModal.title') }), jsx("p", { id: "crawler-description", className: "text-muted-foreground text-sm", children: t('resourceModalWebsiteCrawlModal.description') })] }), jsx(CardContent, { children: jsx("form", { className: "space-y-4", onSubmit: (e) => {
+    return (jsxs(Card$1, { className: "mx-auto w-full max-w-2xl", role: "dialog", "aria-labelledby": "crawler-title", "aria-describedby": "crawler-description", children: [jsxs(CardHeader, { children: [jsx(CardTitle, { id: "crawler-title", className: "text-md font-semibold text-gray-600", children: t('resourceModalWebsiteCrawlModal.title') }), jsx("p", { id: "crawler-description", className: "text-muted-foreground text-sm", children: t('resourceModalWebsiteCrawlModal.description') })] }), jsx(CardContent, { children: jsx("form", { className: "space-y-4", onSubmit: (e) => {
                         e.preventDefault();
                         e.stopPropagation();
                         form.handleSubmit();
@@ -266028,8 +267019,21 @@ function BenchmarksTab({ tenantKey, username, }) {
                                                             }), onClick: () => setViewBenchmark(benchmark.name), children: jsx(Eye, { className: "h-4 w-4" }) }) }) })] }, benchmark.name))), filtered.length === 0 && (jsx("tr", { children: jsx("td", { colSpan: 4, className: "px-6 py-8 text-center text-gray-500 dark:text-gray-400", children: isFetching ? t('benchmarksIndex.loading') : t('benchmarksIndex.empty') }) }))] })] }) }), totalPages > 1 && (jsx("div", { className: "mt-6", children: jsx(AdvancedPagination, { totalPages: totalPages, currentPage: page, onPageChange: setPage }) }))] })), jsx(CreateBenchmarkModal, { isOpen: showCreate, onClose: () => setShowCreate(false), tenantKey: tenantKey, username: username }), viewBenchmark && (jsx(BenchmarkItemsModal, { isOpen: !!viewBenchmark, onClose: () => setViewBenchmark(null), tenantKey: tenantKey, username: username, datasetName: viewBenchmark }))] }));
 }
 
+const TAB_DESC_KEYS = {
+    management: 'descManagement',
+    organization: 'descOrganization',
+    integrations: 'descIntegrations',
+    billing: 'descBilling',
+    monetization: 'descMonetization',
+    datasets: 'descBenchmarks',
+    memory: 'descMemory',
+    advanced: 'descAdvanced',
+    basic: 'descBasic',
+    social: 'descSocial',
+    security: 'descSecurity',
+};
 function Account({ tenant, tenants = [], username, onInviteClick, email, mainPlatformKey, userActiveApp = null, showPlatformName = false, isAdmin = false, targetTab = 'basic', currentPlan: _currentPlan = '', currentSPA = '', authURL, onTenantUpdate, currentPlatformBaseDomain = '', enableRbac = false, showBenchmarks = false, rbacPermissions = {}, onLoadGroupPermissions, onTabChange, defaultSupportPhone = '', enableSupportPhone, showGradebookTab = false, onboardingBasePath = '', }) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c;
     const t = useT();
     const currentTenant = tenants.find((ten) => ten.key === tenant);
     const hasMonetizationPermission = checkRbacPermission(rbacPermissions, `/platforms/${tenant}/#can_sell_items`, enableRbac);
@@ -266042,17 +267046,46 @@ function Account({ tenant, tenants = [], username, onInviteClick, email, mainPla
      */
     const canSeeBilling = !!(currentTenant === null || currentTenant === void 0 ? void 0 : currentTenant.show_paywall) && (isAdmin || hasMonetizationPermission);
     const TABS = [
-        { id: 'organization', label: t('profileAccount.tabOrganization'), icon: Briefcase },
-        { id: 'management', label: t('profileAccount.tabManagement'), icon: Users },
-        { id: 'integrations', label: t('profileAccount.tabIntegrations'), icon: KeyRound },
+        {
+            id: 'organization',
+            label: t('profileAccount.tabOrganization'),
+            icon: Briefcase,
+            group: 'workspace',
+        },
+        {
+            id: 'management',
+            label: t('profileAccount.tabManagement'),
+            icon: Users,
+            group: 'workspace',
+        },
+        {
+            id: 'integrations',
+            label: t('profileAccount.tabIntegrations'),
+            icon: KeyRound,
+            group: 'workspace',
+        },
         ...(canMonetize
-            ? [{ id: 'monetization', label: t('profileAccount.tabMonetization'), icon: Coins }]
+            ? [
+                {
+                    id: 'monetization',
+                    label: t('profileAccount.tabMonetization'),
+                    icon: Coins,
+                    group: 'finance',
+                },
+            ]
             : []),
         ...(showBenchmarks
-            ? [{ id: 'datasets', label: t('profileAccount.tabBenchmarks'), icon: ListChecks }]
+            ? [
+                {
+                    id: 'datasets',
+                    label: t('profileAccount.tabBenchmarks'),
+                    icon: ListChecks,
+                    group: 'aiData',
+                },
+            ]
             : []),
-        { id: 'memory', label: t('profileAccount.tabMemory'), icon: Brain },
-        { id: 'advanced', label: t('profileAccount.tabAdvanced'), icon: Settings$1 },
+        { id: 'memory', label: t('profileAccount.tabMemory'), icon: Brain, group: 'aiData' },
+        { id: 'advanced', label: t('profileAccount.tabAdvanced'), icon: Settings$1, group: 'system' },
     ];
     const [organizationLogo, setOrganizationLogo] = useState(`${LOGO_ENDPOINTS.light_logo(tenant)}?v=${Date.now()}`);
     const hasUserTabPermission = checkRbacPermission(rbacPermissions, `/platforms/${tenant}/#can_manage_users`, enableRbac);
@@ -266097,56 +267130,61 @@ function Account({ tenant, tenants = [], username, onInviteClick, email, mainPla
             firstInput.focus();
         }
     }, []);
-    return (jsxs("div", { className: "flex flex-col lg:flex-row h-full", children: [jsx("div", { className: "lg:hidden", children: jsx("div", { className: "px-6 py-4 border-b border-gray-200", children: jsx("h2", { className: "text-lg font-semibold text-gray-900", children: t('profileAccount.profileTitle') }) }) }), jsxs("div", { className: "hidden lg:flex bg-white border-r border-gray-200 dark:border-gray-700 flex-col overflow-hidden", style: {
-                    width: '320px',
-                    height: '100%',
-                }, children: [jsxs("div", { className: "flex flex-col items-center justify-center py-6 px-6 border-b border-gray-200 dark:border-gray-700 flex-shrink-0", children: [organizationLogo ? (jsx("div", { className: "w-auto h-auto max-w-[140px] max-h-[140px] overflow-hidden", children: jsx(Image$4, { src: organizationLogo, alt: t('profileAccount.organizationLogoAlt'), width: 140, height: 140, className: "object-cover w-full h-full group-hover:opacity-80 transition-opacity", onError: () => {
-                                        setOrganizationLogo('');
-                                    } }) })) : (jsx(BriefcaseBusiness, { className: "h-20 w-20 mb-4 text-blue-500" })), jsxs("div", { className: "flex justify-center space-x-3 mt-3", children: [jsxs("div", { className: "bg-blue-100 text-blue-700 px-2 py-1 rounded font-medium flex items-center text-sm", children: [jsx(User, { className: "h-4 w-4 mr-2" }), isAdmin ? t('profileAccount.roleAdmin') : t('profileAccount.roleUser')] }), showPlatformName && (jsx("div", { className: "bg-gray-100 text-gray-600 px-4 py-2 rounded text-xs font-medium", children: tenant.toUpperCase() }))] })] }), jsx("div", { className: "flex-1 overflow-y-auto", style: { minHeight: 0 }, children: jsx("div", { className: "p-4", children: jsxs("div", { className: "flex flex-col space-y-1.5", children: [TABS.filter((tab) => visibleTabIds.includes(tab.id)).map((tab) => (jsxs("button", { onClick: () => {
-                                            setActiveTab(tab.id);
-                                            // Clear URL param when switching away from billing/monetization
-                                            if ((activeTab === 'billing' || activeTab === 'monetization') &&
-                                                tab.id !== 'billing' &&
-                                                tab.id !== 'monetization') {
-                                                onTabChange === null || onTabChange === void 0 ? void 0 : onTabChange('');
-                                            }
-                                            if (tab.id === 'monetization') {
-                                                onTabChange === null || onTabChange === void 0 ? void 0 : onTabChange('monetization');
-                                            }
-                                        }, className: `w-full justify-start px-4 py-2.5 text-left rounded-lg transition-all flex items-center text-base ${activeTab === tab.id
-                                            ? 'bg-blue-50 text-blue-700 font-medium'
-                                            : 'hover:bg-gray-50 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100'}`, children: [jsx(tab.icon, { className: "h-5 w-5 mr-3 flex-shrink-0" }), jsx("span", { className: "truncate", children: tab.label })] }, tab.id))), canSeeBilling && (jsxs("button", { onClick: () => {
-                                            setActiveTab('billing');
-                                            // Set URL param for billing tab
-                                            onTabChange === null || onTabChange === void 0 ? void 0 : onTabChange('billing');
-                                        }, className: `w-full justify-start px-4 py-2.5 text-left rounded-lg transition-all flex items-center text-base ${activeTab === 'billing'
-                                            ? 'bg-blue-50 text-blue-700 font-medium'
-                                            : 'hover:bg-gray-50 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100'}`, children: [jsx(CreditCard, { className: "h-5 w-5 mr-3 flex-shrink-0" }), jsx("span", { className: "truncate", children: t('profileAccount.tabBilling') })] }, 'billing'))] }) }) })] }), jsx("div", { className: "lg:hidden", children: jsx("div", { className: "w-full justify-start px-6 py-2 bg-white border-b border-gray-200 rounded-none h-auto overflow-x-auto", children: jsxs("div", { className: "flex space-x-2", children: [TABS.filter((tab) => visibleTabIds.includes(tab.id)).map((tab) => (jsxs("button", { onClick: () => {
-                                    setActiveTab(tab.id);
-                                    // Clear URL param when switching away from billing/monetization
-                                    if ((activeTab === 'billing' || activeTab === 'monetization') &&
-                                        tab.id !== 'billing' &&
-                                        tab.id !== 'monetization') {
-                                        onTabChange === null || onTabChange === void 0 ? void 0 : onTabChange('');
-                                    }
-                                    if (tab.id === 'monetization') {
-                                        onTabChange === null || onTabChange === void 0 ? void 0 : onTabChange('monetization');
-                                    }
-                                }, className: `flex items-center gap-2 px-3 py-2 rounded-lg whitespace-nowrap text-sm transition-all ${activeTab === tab.id
-                                    ? 'bg-blue-50 text-blue-600 font-medium'
-                                    : 'text-gray-600 hover:bg-gray-50'}`, children: [jsx(tab.icon, { className: "h-4 w-4" }), jsx("span", { className: "hidden sm:inline", children: tab.label }), jsx("span", { className: "sm:hidden", children: tab.label })] }, tab.id))), canSeeBilling && (jsxs("button", { onClick: () => {
-                                    setActiveTab('billing');
-                                    // Set URL param for billing tab
-                                    onTabChange === null || onTabChange === void 0 ? void 0 : onTabChange('billing');
-                                }, className: `flex items-center gap-2 px-3 py-2 rounded-lg whitespace-nowrap text-sm transition-all ${activeTab === 'billing'
-                                    ? 'bg-blue-50 text-blue-600 font-medium'
-                                    : 'text-gray-600 hover:bg-gray-50'}`, children: [jsx(CreditCard, { className: "h-4 w-4" }), jsx("span", { className: "hidden sm:inline", children: t('profileAccount.tabBilling') }), jsx("span", { className: "sm:hidden", children: t('profileAccount.tabBilling') })] }, 'billing'))] }) }) }), jsxs("div", { className: "flex-1 flex flex-col overflow-hidden", style: { height: '100%' }, children: [jsxs("div", { className: "hidden lg:block flex-shrink-0 p-6 border-b border-gray-200 bg-white dark:bg-gray-900", children: [jsx("h3", { className: "text-lg font-medium text-gray-900 dark:text-gray-100 mb-2", children: (_c = (_b = TABS.find((t) => t.id === activeTab)) === null || _b === void 0 ? void 0 : _b.label) !== null && _c !== void 0 ? _c : (activeTab === 'billing' ? t('profileAccount.tabBilling') : activeTab) }), jsxs("p", { className: "text-gray-600 dark:text-gray-400 text-sm", children: [activeTab === 'management' && t('profileAccount.descManagement'), activeTab === 'organization' && t('profileAccount.descOrganization'), activeTab === 'integrations' && t('profileAccount.descIntegrations'), activeTab === 'billing' && t('profileAccount.descBilling'), activeTab === 'monetization' && t('profileAccount.descMonetization'), activeTab === 'datasets' && t('profileAccount.descBenchmarks'), activeTab === 'memory' && t('profileAccount.descMemory'), activeTab === 'advanced' && t('profileAccount.descAdvanced')] })] }), jsxs("div", { className: "flex-1 p-6 space-y-6", style: {
-                            overflowY: 'auto',
-                            overflowX: 'hidden',
-                        }, children: [jsxs("div", { className: "lg:hidden mb-6", children: [jsx("h3", { className: "text-lg font-medium text-gray-900 dark:text-gray-100 mb-2", children: (_e = (_d = TABS.find((t) => t.id === activeTab)) === null || _d === void 0 ? void 0 : _d.label) !== null && _e !== void 0 ? _e : (activeTab === 'billing' ? t('profileAccount.tabBilling') : activeTab) }), jsxs("p", { className: "text-gray-600 dark:text-gray-400 text-sm", children: [activeTab === 'billing' && t('profileAccount.descBilling'), activeTab === 'basic' && t('profileAccount.descBasic'), activeTab === 'social' && t('profileAccount.descSocial'), activeTab === 'security' && t('profileAccount.descSecurity'), activeTab === 'management' && t('profileAccount.descManagement'), activeTab === 'organization' && t('profileAccount.descOrganization'), activeTab === 'monetization' && t('profileAccount.descMonetization'), activeTab === 'datasets' && t('profileAccount.descBenchmarks'), activeTab === 'memory' && t('profileAccount.descMemory'), activeTab === 'advanced' && t('profileAccount.descAdvanced')] })] }), activeTab === 'management' && hasManagementPermissions && (jsx(Admin, { onboardingBasePath: onboardingBasePath, authSpaUrl: authURL, onInviteClick: onInviteClick, tenant: tenant, currentSpa: currentSPA, hasUserTabPermission: hasUserTabPermission, hasGroupsTabPermission: hasGroupsTabPermission, hasPoliciesTabPermission: hasPoliciesTabPermission, hasRolesTabPermission: hasRolesTabPermission, hasTeamsTabPermission: hasTeamsTabPermission, hasInviteUserPermission: hasInviteUserPermission, hasCreateTeamPermission: hasCreateTeamPermission, onLoadGroupPermissions: onLoadGroupPermissions, hasAlertsTabPermission: hasAlertsTabPermission, rbacPermissions: rbacPermissions, enableRbac: enableRbac, showGradebookTab: showGradebookTab })), activeTab === 'organization' && (jsx(OrganizationTab, { platformKey: tenant, tenant: tenants.find((ten) => ten.key === tenant), onTenantUpdate: onTenantUpdate, setOrganizationLogoFromOutside: setOrganizationLogo, defaultSupportPhone: defaultSupportPhone, enableSupportPhone: enableSupportPhone })), activeTab === 'integrations' && (jsx(IntegrationsTab, { tenantKey: tenant, username: username })), activeTab === 'billing' && canSeeBilling && (jsx(BillingTab, { tenant: tenant, userActiveApp: userActiveApp, username: username, currentUserEmail: email, mainPlatformKey: mainPlatformKey })), activeTab === 'monetization' && (jsx(MonetizationTab, { platformKey: tenant, authURL: authURL })), activeTab === 'datasets' && showBenchmarks && (jsx(BenchmarksTab, { tenantKey: tenant, username: username })), activeTab === 'memory' && jsx(MemoryAdminTab, { tenantKey: tenant, username: username }), activeTab === 'advanced' && (jsx(AdvancedTab, { platformKey: tenant, currentSPA: currentSPA, username: username, authURL: authURL, currentPlatformBaseDomain: currentPlatformBaseDomain }))] })] }), jsx(ToastProvider, {})] }));
+    /**
+     * Billing and Monetization are mirrored into the host's URL through
+     * `onTabChange`; leaving them for any other tab clears the param.
+     */
+    const selectTab = (id) => {
+        setActiveTab(id);
+        if (id === 'billing') {
+            onTabChange === null || onTabChange === void 0 ? void 0 : onTabChange('billing');
+            return;
+        }
+        if ((activeTab === 'billing' || activeTab === 'monetization') &&
+            id !== 'billing' &&
+            id !== 'monetization') {
+            onTabChange === null || onTabChange === void 0 ? void 0 : onTabChange('');
+        }
+        if (id === 'monetization') {
+            onTabChange === null || onTabChange === void 0 ? void 0 : onTabChange('monetization');
+        }
+    };
+    const billingTab = {
+        id: 'billing',
+        label: t('profileAccount.tabBilling'),
+        icon: CreditCard,
+        group: 'finance',
+    };
+    const navTabs = [...TABS, billingTab].filter((tab) => visibleTabIds.includes(tab.id));
+    const GROUP_LABELS = {
+        workspace: t('profileAccount.groupWorkspace'),
+        finance: t('profileAccount.groupFinance'),
+        aiData: t('profileAccount.groupAiData'),
+        system: t('profileAccount.groupSystem'),
+    };
+    const navGroups = Object.keys(GROUP_LABELS).map((group) => ({
+        id: group,
+        label: GROUP_LABELS[group],
+        items: navTabs.filter((tab) => tab.group === group),
+    }));
+    // Render the tab's `label` rather than the id so renames like
+    // "datasets" → "Benchmarks" land in the header too. Billing lives outside
+    // TABS (paywall-gated), so it needs its own translated label — the raw id
+    // would render lowercase.
+    const title = (_c = (_b = TABS.find((tab) => tab.id === activeTab)) === null || _b === void 0 ? void 0 : _b.label) !== null && _c !== void 0 ? _c : (activeTab === 'billing' ? t('profileAccount.tabBilling') : activeTab);
+    const description = TAB_DESC_KEYS[activeTab]
+        ? t(`profileAccount.${TAB_DESC_KEYS[activeTab]}`)
+        : undefined;
+    const platformName = (currentTenant === null || currentTenant === void 0 ? void 0 : currentTenant.platform_name) || (currentTenant === null || currentTenant === void 0 ? void 0 : currentTenant.name) || tenant;
+    const roleChip = (jsx(SettingsChip, { tone: "accent", icon: User, children: isAdmin ? t('profileAccount.roleAdmin') : t('profileAccount.roleUser') }));
+    const sidebarHeader = (jsxs("div", { className: "flex flex-col gap-3.5", children: [jsxs("div", { className: "flex items-center gap-3", children: [organizationLogo ? (jsx("div", { className: "flex h-14 w-14 flex-shrink-0 items-center justify-center overflow-hidden rounded-xl border border-gray-200 bg-white p-1 dark:border-gray-700", children: jsx(Image$4, { src: organizationLogo, alt: t('profileAccount.organizationLogoAlt'), width: 56, height: 56, className: "h-full w-full object-contain", onError: () => {
+                                setOrganizationLogo('');
+                            } }) })) : (jsx("div", { className: "flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-xl border border-blue-100 bg-blue-50 text-blue-600 dark:border-blue-900 dark:bg-blue-950 dark:text-blue-300", "aria-hidden": "true", children: jsx(BriefcaseBusiness, { className: "h-6 w-6" }) })), jsxs("div", { className: "min-w-0", children: [jsx("h2", { className: "truncate text-[15px] font-semibold text-gray-900 dark:text-gray-100", title: platformName, children: platformName }), platformName !== tenant && (jsx("p", { className: "truncate font-mono text-xs text-gray-500 dark:text-gray-400", children: tenant }))] })] }), jsxs("div", { className: "flex flex-wrap gap-1.5", children: [roleChip, showPlatformName && jsx(SettingsChip, { children: tenant.toUpperCase() })] })] }));
+    const mobileHeader = (jsx("div", { className: "flex min-w-0 items-center justify-between gap-3", children: jsx("p", { className: "truncate text-[15px] font-semibold text-gray-900 dark:text-gray-100", children: platformName || t('profileAccount.profileTitle') }) }));
+    return (jsx(SettingsShell, { sidebarHeader: sidebarHeader, sidebarNav: jsx(SettingsSidebarNav, { groups: navGroups, activeId: activeTab, onSelect: selectTab, variant: "buttons", ariaLabel: t('profileAccount.ariaSettingsNav') }), mobileHeader: mobileHeader, mobileNav: jsx(SettingsMobileNav, { groups: navGroups, activeId: activeTab, onSelect: selectTab, variant: "buttons", ariaLabel: t('profileAccount.ariaSettingsNavMobile') }), title: title, description: description, overlays: jsx(ToastProvider, {}), children: jsxs("div", { className: "space-y-6", children: [activeTab === 'management' && hasManagementPermissions && (jsx(Admin, { onboardingBasePath: onboardingBasePath, authSpaUrl: authURL, onInviteClick: onInviteClick, tenant: tenant, currentSpa: currentSPA, hasUserTabPermission: hasUserTabPermission, hasGroupsTabPermission: hasGroupsTabPermission, hasPoliciesTabPermission: hasPoliciesTabPermission, hasRolesTabPermission: hasRolesTabPermission, hasTeamsTabPermission: hasTeamsTabPermission, hasInviteUserPermission: hasInviteUserPermission, hasCreateTeamPermission: hasCreateTeamPermission, onLoadGroupPermissions: onLoadGroupPermissions, hasAlertsTabPermission: hasAlertsTabPermission, rbacPermissions: rbacPermissions, enableRbac: enableRbac, showGradebookTab: showGradebookTab })), activeTab === 'organization' && (jsx(OrganizationTab, { platformKey: tenant, tenant: tenants.find((ten) => ten.key === tenant), onTenantUpdate: onTenantUpdate, setOrganizationLogoFromOutside: setOrganizationLogo, defaultSupportPhone: defaultSupportPhone, enableSupportPhone: enableSupportPhone })), activeTab === 'integrations' && jsx(IntegrationsTab, { tenantKey: tenant, username: username }), activeTab === 'billing' && canSeeBilling && (jsx(BillingTab, { tenant: tenant, userActiveApp: userActiveApp, username: username, currentUserEmail: email, mainPlatformKey: mainPlatformKey })), activeTab === 'monetization' && jsx(MonetizationTab, { platformKey: tenant, authURL: authURL }), activeTab === 'datasets' && showBenchmarks && (jsx(BenchmarksTab, { tenantKey: tenant, username: username })), activeTab === 'memory' && jsx(MemoryAdminTab, { tenantKey: tenant, username: username }), activeTab === 'advanced' && (jsx(AdvancedTab, { platformKey: tenant, currentSPA: currentSPA, username: username, authURL: authURL, currentPlatformBaseDomain: currentPlatformBaseDomain }))] }) }));
 }
 
-function UserProfileModal({ isOpen, onClose, params, email, mainPlatformKey, showMentorAIDisplayCheckbox = false, showLeaderboardDisplayCheckbox = false, showGradebookTab = false, showUsernameField = false, showPlatformName = false, useGravatarPicFallback = true, enableCatalogInvite = false, targetTab = 'basic', currentPlan = '', currentSPA = '', userActiveApp = null, authURL, tenants = [], onTenantUpdate, currentPlatformBaseDomain = '', rbacPermissions = {}, enableRbac = false, onLoadGroupPermissions, onTabChange, defaultSupportPhone = '', onBillingTabRequest, onAccountDeleted, enableMemoryTab = false, showBenchmarks = false, localLLMProps, enableSupportPhone, onboardingBasePath = '', }) {
+function UserProfileModal({ isOpen, onClose, params, email, mainPlatformKey, showMentorAIDisplayCheckbox = false, showLeaderboardDisplayCheckbox = false, showGradebookTab = false, showUsernameField = false, showPlatformName = false, useGravatarPicFallback = true, enableCatalogInvite = false, targetTab = 'basic', currentPlan = '', currentSPA = '', userActiveApp = null, authURL, tenants = [], onTenantUpdate, currentPlatformBaseDomain = '', rbacPermissions = {}, enableRbac = false, onLoadGroupPermissions, onTabChange, defaultSupportPhone = '', onBillingTabRequest, onAccountDeleted, enableMemoryTab = false, showLlmUsageTab = true, showBenchmarks = false, localLLMProps, enableSupportPhone, onboardingBasePath = '', }) {
     const t = useT();
     console.log('[UserProfileModal] localLLMProps received:', {
         isAvailable: localLLMProps === null || localLLMProps === void 0 ? void 0 : localLLMProps.isAvailable,
@@ -266196,7 +267234,7 @@ function UserProfileModal({ isOpen, onClose, params, email, mainPlatformKey, sho
                 if (!isInviteUserDialogOpen) {
                     onClose();
                 }
-            }, children: jsxs(DialogContent, { autoFocus: false, forceMount: true, className: "max-w-7xl w-[85vw] p-0 gap-0 overflow-hidden bg-white profile-component-dialog", style: { height: '85vh', display: 'flex', flexDirection: 'column' }, children: [jsx(DialogTitle, { className: "sr-only", children: t('modalsUserProfileModal.dialogTitle') }), jsx(DialogDescription, { className: "sr-only", children: t('modalsUserProfileModal.dialogDescription') }), [
+            }, children: jsxs(DialogContent, { autoFocus: false, forceMount: true, className: "max-w-7xl w-[85vw] p-0 gap-0 overflow-hidden bg-white sm:rounded-2xl profile-component-dialog", style: { height: '85vh', display: 'flex', flexDirection: 'column' }, children: [jsx(DialogTitle, { className: "sr-only", children: t('modalsUserProfileModal.dialogTitle') }), jsx(DialogDescription, { className: "sr-only", children: t('modalsUserProfileModal.dialogDescription') }), [
                         'basic',
                         'social',
                         'security',
@@ -266205,6 +267243,7 @@ function UserProfileModal({ isOpen, onClose, params, email, mainPlatformKey, sho
                         'resume',
                         'memory',
                         'chatHistory',
+                        'llmUsage',
                         'advanced',
                     ].includes(targetTab) && (jsx(Profile, { currentSPA: currentSPA, tenant: params.tenantKey, tenants: tenants, username: getUserName$1(), customization: {
                             showMentorAIDisplayCheckbox: showMentorAIDisplayCheckbox,
@@ -266213,7 +267252,7 @@ function UserProfileModal({ isOpen, onClose, params, email, mainPlatformKey, sho
                             showPlatformName: showPlatformName,
                             useGravatarPicFallback: useGravatarPicFallback,
                             showGradebookTab: showGradebookTab,
-                        }, isAdmin: params.isAdmin, targetTab: targetTab, onClose: onClose, onAccountDeleted: onAccountDeleted, enableMemoryTab: enableMemoryTab, localLLMProps: localLLMProps })), [
+                        }, isAdmin: params.isAdmin, targetTab: targetTab, onClose: onClose, onAccountDeleted: onAccountDeleted, enableMemoryTab: enableMemoryTab, showLlmUsageTab: showLlmUsageTab, localLLMProps: localLLMProps })), [
                         'organization',
                         'management',
                         'integrations',
@@ -268807,7 +269846,7 @@ function ConversationStarters$1({ onTemplateSelect, guidedPrompts = [], disabled
     }
     return (jsxs("div", { className: cn('w-full max-w-6xl mx-auto px-4', className), children: [jsx("h2", { className: "text-xl font-semibold text-gray-900 mb-6", children: t('welcomeChatConversationStarters.conversationStarters') }), jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4", children: guidedPrompts.map((guidedPrompt, index) => {
                     var _a;
-                    return (jsx(Card, { className: cn('shadow-xs transition-all duration-200 bg-[#F5F8FF] border border-[#D0E0FF] h-full', disabled
+                    return (jsx(Card$1, { className: cn('shadow-xs transition-all duration-200 bg-[#F5F8FF] border border-[#D0E0FF] h-full', disabled
                             ? 'opacity-50 cursor-not-allowed'
                             : 'cursor-pointer hover:shadow-sm focus:shadow-md focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-offset-2'), onClick: () => !disabled && onTemplateSelect(guidedPrompt.prompt), onKeyDown: (e) => {
                             if (disabled)
@@ -281126,7 +282165,7 @@ function AgentEmbedTab({ labels: labelsProp, urls, CopyCodeBlock, visibilityOpti
                                                                                         ? jsValidation.warnings.length > 0
                                                                                             ? 'bg-blue-50 text-blue-700'
                                                                                             : 'bg-green-50 text-green-700'
-                                                                                        : 'bg-red-50 text-red-700'), children: jsValidation.isValid ? (jsValidation.warnings.length > 0 ? (jsxs(Fragment$1, { children: [jsx(TriangleAlert, { className: "h-3.5 w-3.5" }), t('tabsEmbedTab.warnings')] })) : (jsxs(Fragment$1, { children: [jsx(Check, { className: "h-3.5 w-3.5" }), t('tabsEmbedTab.valid')] }))) : (jsxs(Fragment$1, { children: [jsx(CircleAlert, { className: "h-3.5 w-3.5" }), t('tabsEmbedTab.invalid')] })) })) })] }), !jsValidation.isValid && (jsxs("div", { id: "js-errors", className: "rounded-lg border border-red-100 bg-red-50 p-3", role: "alert", children: [jsx("p", { className: "mb-1 text-sm font-medium text-red-800", children: t('tabsEmbedTab.jsValidationErrors') }), jsx("ul", { className: "list-inside list-disc space-y-0.5 text-sm text-red-700", children: jsValidation.errors.map((error, index) => (jsx("li", { children: error }, index))) })] })), jsValidation.isValid && jsValidation.warnings.length > 0 && (jsxs("div", { id: "js-warnings", className: "rounded-lg border border-blue-100 bg-blue-50 p-3", role: "status", children: [jsx("p", { className: "mb-1 text-sm font-medium text-blue-800", children: t('tabsEmbedTab.warningsHeading') }), jsx("ul", { className: "list-inside list-disc space-y-0.5 text-sm text-blue-700", children: jsValidation.warnings.map((warning, index) => (jsx("li", { children: warning }, index))) })] })), jsxs("div", { className: "flex items-center justify-between pt-2", children: [jsx("p", { className: "text-xs text-gray-500", children: t('tabsEmbedTab.jsChangesHint') }), jsxs("div", { className: "flex items-center gap-2", children: [hasJsChanges && (jsx(Button$1, { type: "button", variant: "outline", size: "sm", onClick: handleDiscardJs, disabled: isAdvancedDisabled, "aria-label": labels.actions.discard, children: labels.actions.discard })), jsx(Button$1, { type: "button", size: "sm", onClick: handleSaveJs, disabled: !canSaveJs, className: "bg-gradient-to-r from-[#2563EB] to-[#93C5FD] text-white hover:opacity-90", "aria-label": `${labels.actions.save} ${labels.advancedJs.title.toLowerCase()}`, children: isSavingAdvanced ? labels.actions.saving : labels.actions.save })] })] })] })) }))] }), jsx(form.Subscribe, { selector: (formState) => [formState.values.icon_selection], children: ([iconSelection]) => (jsxs(Fragment$1, { children: [jsx(form.Field, { name: "icon_selection", children: (field) => (jsxs("div", { className: "space-y-2", children: [jsx("h3", { className: "text-sm font-medium text-[#646464]", children: labels.fields.iconSelection }), jsxs(Select$1, { defaultValue: field.state.value, onValueChange: (value) => field.handleChange(value), disabled: form.state.isSubmitting, children: [jsx(SelectTrigger, { className: "text-[#646464]", "aria-label": t('tabsEmbedTab.selectEmbedModeAriaLabel'), children: jsx(SelectValue, { placeholder: t('tabsEmbedTab.selectModePlaceholder'), className: "text-[#646464]" }) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "default", className: "text-[#646464]", children: t('tabsEmbedTab.iconSelectionDefault') }), jsx(SelectItem, { value: "custom", className: "text-[#646464]", children: t('tabsEmbedTab.iconSelectionCustom') })] })] })] })) }), iconSelection === 'custom' && (jsxs("div", { className: "flex w-full flex-col items-center gap-4", children: [jsx(Button$1, { type: "button", variant: "outline", className: "w-full bg-gray-50 text-gray-700 hover:bg-gray-100", onClick: () => setFocusEditCustomFloatingBubble(true), children: labels.iconEditor.title }), jsxs(Card, { children: [jsx(CardHeader, { className: "mb-0 pt-4 pb-0", children: jsx(CardTitle, { className: "text-sm font-medium text-[#646464]", children: t('tabsEmbedTab.livePreview') }) }), jsx(CardContent, { className: "mt-0", children: jsx(InteractiveBubbleConfigDisplay, { customFloatingBubbleConfig: customFloatingBubbleConfig, handleFloatingBubbleImageError: handleFloatingBubbleImageError }) })] })] }))] })) }), jsx("hr", { className: "my-4 border-t border-gray-200" }), jsx(form.Field, { name: "mode", children: (field) => (jsxs("div", { className: "space-y-2", children: [jsx("h3", { className: "text-sm font-medium text-[#646464]", children: labels.fields.modeSelection }), jsxs(Select$1, { defaultValue: field.state.value, onValueChange: (value) => field.handleChange(value), disabled: form.state.isSubmitting, children: [jsx(SelectTrigger, { className: "text-[#646464]", "aria-label": t('tabsEmbedTab.selectEmbedModeAriaLabel'), children: jsx(SelectValue, { placeholder: t('tabsEmbedTab.selectModePlaceholder'), className: "text-[#646464]" }) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "default", className: "text-[#646464]", children: t('tabsEmbedTab.modeDefault') }), jsx(SelectItem, { value: "advanced", className: "text-[#646464]", children: t('tabsEmbedTab.modeAdvanced') })] })] })] })) }), jsx(form.Field, { name: "starter_prompts", children: (field) => (jsxs("div", { className: "space-y-2", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx("h3", { className: "text-sm font-medium text-[#646464]", children: labels.fields.starterPrompts.label }), jsx(TooltipProvider, { children: jsxs(Tooltip$1, { children: [jsx(TooltipTrigger, { "aria-label": t('tabsEmbedTab.moreInfoStarterPrompts'), children: jsx(Info$3, { className: "h-4 w-4 text-gray-400" }) }), jsx(TooltipContent, { className: "ibl-tooltip-content", children: jsx("p", { children: labels.fields.starterPrompts.tooltip }) })] }) })] }), jsxs(Select$1, { value: field.state.value, onValueChange: (value) => field.handleChange(value), disabled: form.state.isSubmitting, children: [jsx(SelectTrigger, { className: "text-[#646464]", "aria-label": t('tabsEmbedTab.selectStarterPromptsAriaLabel'), children: jsx(SelectValue, { placeholder: t('tabsEmbedTab.selectStarterPromptsPlaceholder'), className: "text-[#646464]" }) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "guided_prompt", className: "text-[#646464]", children: t('tabsEmbedTab.guidedPrompts') }), jsx(SelectItem, { value: "suggested_prompt", className: "text-[#646464]", children: t('tabsEmbedTab.suggestedPrompts') })] })] })] })) }), jsx(WithFormPermissions, { name: "mentor_visibility", 
+                                                                                        : 'bg-red-50 text-red-700'), children: jsValidation.isValid ? (jsValidation.warnings.length > 0 ? (jsxs(Fragment$1, { children: [jsx(TriangleAlert, { className: "h-3.5 w-3.5" }), t('tabsEmbedTab.warnings')] })) : (jsxs(Fragment$1, { children: [jsx(Check, { className: "h-3.5 w-3.5" }), t('tabsEmbedTab.valid')] }))) : (jsxs(Fragment$1, { children: [jsx(CircleAlert, { className: "h-3.5 w-3.5" }), t('tabsEmbedTab.invalid')] })) })) })] }), !jsValidation.isValid && (jsxs("div", { id: "js-errors", className: "rounded-lg border border-red-100 bg-red-50 p-3", role: "alert", children: [jsx("p", { className: "mb-1 text-sm font-medium text-red-800", children: t('tabsEmbedTab.jsValidationErrors') }), jsx("ul", { className: "list-inside list-disc space-y-0.5 text-sm text-red-700", children: jsValidation.errors.map((error, index) => (jsx("li", { children: error }, index))) })] })), jsValidation.isValid && jsValidation.warnings.length > 0 && (jsxs("div", { id: "js-warnings", className: "rounded-lg border border-blue-100 bg-blue-50 p-3", role: "status", children: [jsx("p", { className: "mb-1 text-sm font-medium text-blue-800", children: t('tabsEmbedTab.warningsHeading') }), jsx("ul", { className: "list-inside list-disc space-y-0.5 text-sm text-blue-700", children: jsValidation.warnings.map((warning, index) => (jsx("li", { children: warning }, index))) })] })), jsxs("div", { className: "flex items-center justify-between pt-2", children: [jsx("p", { className: "text-xs text-gray-500", children: t('tabsEmbedTab.jsChangesHint') }), jsxs("div", { className: "flex items-center gap-2", children: [hasJsChanges && (jsx(Button$1, { type: "button", variant: "outline", size: "sm", onClick: handleDiscardJs, disabled: isAdvancedDisabled, "aria-label": labels.actions.discard, children: labels.actions.discard })), jsx(Button$1, { type: "button", size: "sm", onClick: handleSaveJs, disabled: !canSaveJs, className: "bg-gradient-to-r from-[#2563EB] to-[#93C5FD] text-white hover:opacity-90", "aria-label": `${labels.actions.save} ${labels.advancedJs.title.toLowerCase()}`, children: isSavingAdvanced ? labels.actions.saving : labels.actions.save })] })] })] })) }))] }), jsx(form.Subscribe, { selector: (formState) => [formState.values.icon_selection], children: ([iconSelection]) => (jsxs(Fragment$1, { children: [jsx(form.Field, { name: "icon_selection", children: (field) => (jsxs("div", { className: "space-y-2", children: [jsx("h3", { className: "text-sm font-medium text-[#646464]", children: labels.fields.iconSelection }), jsxs(Select$1, { defaultValue: field.state.value, onValueChange: (value) => field.handleChange(value), disabled: form.state.isSubmitting, children: [jsx(SelectTrigger, { className: "text-[#646464]", "aria-label": t('tabsEmbedTab.selectEmbedModeAriaLabel'), children: jsx(SelectValue, { placeholder: t('tabsEmbedTab.selectModePlaceholder'), className: "text-[#646464]" }) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "default", className: "text-[#646464]", children: t('tabsEmbedTab.iconSelectionDefault') }), jsx(SelectItem, { value: "custom", className: "text-[#646464]", children: t('tabsEmbedTab.iconSelectionCustom') })] })] })] })) }), iconSelection === 'custom' && (jsxs("div", { className: "flex w-full flex-col items-center gap-4", children: [jsx(Button$1, { type: "button", variant: "outline", className: "w-full bg-gray-50 text-gray-700 hover:bg-gray-100", onClick: () => setFocusEditCustomFloatingBubble(true), children: labels.iconEditor.title }), jsxs(Card$1, { children: [jsx(CardHeader, { className: "mb-0 pt-4 pb-0", children: jsx(CardTitle, { className: "text-sm font-medium text-[#646464]", children: t('tabsEmbedTab.livePreview') }) }), jsx(CardContent, { className: "mt-0", children: jsx(InteractiveBubbleConfigDisplay, { customFloatingBubbleConfig: customFloatingBubbleConfig, handleFloatingBubbleImageError: handleFloatingBubbleImageError }) })] })] }))] })) }), jsx("hr", { className: "my-4 border-t border-gray-200" }), jsx(form.Field, { name: "mode", children: (field) => (jsxs("div", { className: "space-y-2", children: [jsx("h3", { className: "text-sm font-medium text-[#646464]", children: labels.fields.modeSelection }), jsxs(Select$1, { defaultValue: field.state.value, onValueChange: (value) => field.handleChange(value), disabled: form.state.isSubmitting, children: [jsx(SelectTrigger, { className: "text-[#646464]", "aria-label": t('tabsEmbedTab.selectEmbedModeAriaLabel'), children: jsx(SelectValue, { placeholder: t('tabsEmbedTab.selectModePlaceholder'), className: "text-[#646464]" }) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "default", className: "text-[#646464]", children: t('tabsEmbedTab.modeDefault') }), jsx(SelectItem, { value: "advanced", className: "text-[#646464]", children: t('tabsEmbedTab.modeAdvanced') })] })] })] })) }), jsx(form.Field, { name: "starter_prompts", children: (field) => (jsxs("div", { className: "space-y-2", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx("h3", { className: "text-sm font-medium text-[#646464]", children: labels.fields.starterPrompts.label }), jsx(TooltipProvider, { children: jsxs(Tooltip$1, { children: [jsx(TooltipTrigger, { "aria-label": t('tabsEmbedTab.moreInfoStarterPrompts'), children: jsx(Info$3, { className: "h-4 w-4 text-gray-400" }) }), jsx(TooltipContent, { className: "ibl-tooltip-content", children: jsx("p", { children: labels.fields.starterPrompts.tooltip }) })] }) })] }), jsxs(Select$1, { value: field.state.value, onValueChange: (value) => field.handleChange(value), disabled: form.state.isSubmitting, children: [jsx(SelectTrigger, { className: "text-[#646464]", "aria-label": t('tabsEmbedTab.selectStarterPromptsAriaLabel'), children: jsx(SelectValue, { placeholder: t('tabsEmbedTab.selectStarterPromptsPlaceholder'), className: "text-[#646464]" }) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "guided_prompt", className: "text-[#646464]", children: t('tabsEmbedTab.guidedPrompts') }), jsx(SelectItem, { value: "suggested_prompt", className: "text-[#646464]", children: t('tabsEmbedTab.suggestedPrompts') })] })] })] })) }), jsx(WithFormPermissions, { name: "mentor_visibility", 
                                                     // @ts-ignore
                                                     permissions: (_b = mentorSettings === null || mentorSettings === void 0 ? void 0 : mentorSettings.permissions) === null || _b === void 0 ? void 0 : _b.field, children: ({ disabled }) => (jsx(form.Field, { name: "mentor_visibility", children: (field) => (jsxs("div", { className: "space-y-2", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx(Label$1, { className: "text-sm font-medium text-[#646464]", children: labels.fields.whoCanView.label }), jsx(TooltipProvider, { children: jsxs(Tooltip$1, { children: [jsx(TooltipTrigger, { "aria-label": t('tabsEmbedTab.moreInfoVisibility'), children: jsx(Info$3, { className: "h-4 w-4 text-gray-400" }) }), jsx(TooltipContent, { className: "ibl-tooltip-content", children: jsx("p", { children: labels.fields.whoCanView.tooltip }) })] }) })] }), jsxs(Select$1, { value: typeof field.state.value === 'string' ? field.state.value : '', onValueChange: (value) => field.handleChange(value), disabled: form.state.isSubmitting || disabled, children: [jsx(SelectTrigger, { className: "text-[#646464]", "aria-label": t('tabsEmbedTab.selectWhoCanViewAriaLabel'), children: jsx(SelectValue, { placeholder: t('tabsEmbedTab.selectWhoCanViewPlaceholder'), className: "text-[#646464]" }) }), jsx(SelectContent, { children: visibilityOptions.map((visibility) => (jsx(SelectItem, { value: visibility.value, className: "text-[#646464]", children: visibility.label }, visibility.value))) })] })] })) })) }), jsx(WithFormPermissions, { name: "allow_anonymous", 
                                                     // @ts-ignore
@@ -281157,7 +282196,7 @@ function AgentEmbedTab({ labels: labelsProp, urls, CopyCodeBlock, visibilityOpti
                                                         minHeight: '580px',
                                                         width: '100%',
                                                         minWidth: '280px',
-                                                    }, frameBorder: "0" })) }) })] }), focusEditCustomFloatingBubble && (jsx(Dialog, { open: focusEditCustomFloatingBubble, onOpenChange: (open) => setFocusEditCustomFloatingBubble(open), children: jsxs(DialogContent, { className: "max-h-[80vh] max-w-[600px] overflow-y-auto", children: [jsxs(DialogHeader, { className: "mb-1", children: [jsx(DialogTitle, { className: "ibl-dialog-title", children: labels.iconEditor.title }), jsx("p", { className: "text-xs text-gray-600", children: labels.iconEditor.description })] }), jsxs(Tabs, { defaultValue: "appearance", className: "w-full", children: [jsxs(TabsList, { className: "mb-4 grid h-10 w-full grid-cols-3", children: [jsxs(TabsTrigger, { value: "appearance", className: "flex items-center gap-2", children: [jsx(Palette, { className: "h-4 w-4" }), t('tabsEmbedTab.appearanceTab')] }), jsxs(TabsTrigger, { value: "position", className: "flex items-center gap-2", children: [jsx(Settings$1, { className: "h-4 w-4" }), t('tabsEmbedTab.positionTab')] }), jsxs(TabsTrigger, { value: "content", className: "flex items-center gap-2", children: [jsx(MessageCircle, { className: "h-4 w-4" }), t('tabsEmbedTab.contentTab')] })] }), jsx(TabsContent, { value: "appearance", className: "space-y-6", children: jsxs(Card, { children: [jsx(CardHeader, { className: "mb-0 px-4 py-3", children: jsx(CardTitle, { className: "text-sm font-medium text-gray-600", children: t('tabsEmbedTab.visualStyling') }) }), jsx(CardContent, { className: "space-y-6 pt-2", children: jsxs("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-2", children: [jsxs("div", { className: "space-y-2", children: [jsx(Label$1, { htmlFor: "backgroundColor", className: "text-sm text-gray-600", children: t('tabsEmbedTab.backgroundColor') }), jsxs("div", { className: "mt-2 flex gap-2", children: [jsx(Input, { id: "backgroundColor", type: "color", value: customFloatingBubbleConfig.backgroundColor, onChange: (e) => updateConfig('backgroundColor', e.target.value), className: "h-10 w-16 rounded border p-1" }), jsx(Input, { value: customFloatingBubbleConfig.backgroundColor, onChange: (e) => updateConfig('backgroundColor', e.target.value), placeholder: "#3b82f6", className: "flex-1" })] })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label$1, { htmlFor: "textColor", className: "text-sm text-gray-600", children: t('tabsEmbedTab.titleTextColor') }), jsxs("div", { className: "mt-2 flex gap-2", children: [jsx(Input, { id: "textColor", type: "color", value: customFloatingBubbleConfig.textColor, onChange: (e) => updateConfig('textColor', e.target.value), className: "h-10 w-16 rounded border p-1" }), jsx(Input, { value: customFloatingBubbleConfig.textColor, onChange: (e) => updateConfig('textColor', e.target.value), placeholder: "#ffffff", className: "flex-1" })] })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label$1, { htmlFor: "subtitleTextColor", className: "text-sm text-gray-600", children: t('tabsEmbedTab.subtitleTextColor') }), jsxs("div", { className: "mt-2 flex gap-2", children: [jsx(Input, { id: "subtitleTextColor", type: "color", value: customFloatingBubbleConfig.subtitleTextColor, onChange: (e) => updateConfig('subtitleTextColor', e.target.value), className: "h-10 w-16 rounded border p-1" }), jsx(Input, { value: customFloatingBubbleConfig.subtitleTextColor, onChange: (e) => updateConfig('subtitleTextColor', e.target.value), placeholder: "#e5e7eb", className: "flex-1" })] })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label$1, { htmlFor: "borderRadius", className: "text-sm text-gray-600", children: t('tabsEmbedTab.borderRadius') }), jsx("div", { className: "mt-2 flex gap-2", children: jsx(Input, { value: customFloatingBubbleConfig.borderRadius, onChange: (e) => updateConfig('borderRadius', e.target.value), placeholder: "16", type: "range", min: 0, max: 100, step: 1, className: "flex-1", id: "borderRadius" }) })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label$1, { htmlFor: "imageSize", className: "text-sm text-gray-600", children: t('tabsEmbedTab.imageSize') }), jsx("div", { className: "mt-2 flex gap-2", children: jsx(Input, { value: customFloatingBubbleConfig.imageSize, onChange: (e) => updateConfig('imageSize', e.target.value), placeholder: "16", type: "range", min: 0, max: 100, step: 1, className: "flex-1" }) })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label$1, { htmlFor: "fontSize", className: "text-sm text-gray-600", children: t('tabsEmbedTab.titleFontSize') }), jsxs("div", { className: "mt-2 flex gap-2", children: [jsx(Input, { id: "fontSize", value: customFloatingBubbleConfig.fontSize, onChange: (e) => updateConfig('fontSize', e.target.value), placeholder: "16", type: "range", min: 10, max: 24, step: 1, className: "flex-1" }), jsxs("span", { className: "flex min-w-[30px] items-center text-xs text-gray-500", children: [customFloatingBubbleConfig.fontSize, "px"] })] })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label$1, { htmlFor: "subtitleFontSize", className: "text-sm text-gray-600", children: t('tabsEmbedTab.subtitleFontSize') }), jsxs("div", { className: "mt-2 flex gap-2", children: [jsx(Input, { id: "subtitleFontSize", value: customFloatingBubbleConfig.subtitleFontSize, onChange: (e) => updateConfig('subtitleFontSize', e.target.value), placeholder: "12", type: "range", min: 8, max: 20, step: 1, className: "flex-1" }), jsxs("span", { className: "flex min-w-[30px] items-center text-xs text-gray-500", children: [customFloatingBubbleConfig.subtitleFontSize, "px"] })] })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label$1, { htmlFor: "shadow", className: "text-sm text-gray-600", children: t('tabsEmbedTab.useShadow') }), jsx("div", { className: "mt-2", children: jsxs(Select$1, { value: customFloatingBubbleConfig.shadow ? '1' : '0', onValueChange: (value) => updateConfig('shadow', value === '1'), children: [jsx(SelectTrigger, { children: jsx(SelectValue, {}) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: '1', children: t('tabsEmbedTab.yes') }), jsx(SelectItem, { value: '0', children: t('tabsEmbedTab.no') })] })] }) })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label$1, { htmlFor: "padding", className: "text-sm text-gray-600", children: t('tabsEmbedTab.padding') }), jsx("div", { className: "mt-2 flex gap-2", children: jsx(Input, { value: customFloatingBubbleConfig.padding, onChange: (e) => updateConfig('padding', e.target.value), placeholder: "1", type: "range", min: 0, max: 50, step: 1, className: "flex-1" }) })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label$1, { htmlFor: "strokeWidth", className: "text-sm text-gray-600", children: t('tabsEmbedTab.strokeThickness') }), jsx("div", { className: "mt-2 flex gap-2", children: jsx(Input, { value: customFloatingBubbleConfig.strokeWidth, onChange: (e) => updateConfig('strokeWidth', e.target.value), placeholder: "1", type: "range", min: 0, max: 10, step: 1, className: "flex-1" }) })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label$1, { htmlFor: "strokeColor", className: "text-sm text-gray-600", children: t('tabsEmbedTab.strokeColor') }), jsxs("div", { className: "mt-2 flex gap-2", children: [jsx(Input, { id: "strokeColor", type: "color", value: customFloatingBubbleConfig.strokeColor, onChange: (e) => updateConfig('strokeColor', e.target.value), className: "h-10 w-16 rounded border p-1" }), jsx(Input, { value: customFloatingBubbleConfig.strokeColor, onChange: (e) => updateConfig('strokeColor', e.target.value), placeholder: "#3b82f6", className: "flex-1" })] })] })] }) })] }) }), jsx(TabsContent, { value: "position", className: "space-y-6", children: jsxs(Card, { children: [jsx(CardHeader, { className: "mb-0 px-4 py-3", children: jsx(CardTitle, { className: "text-sm font-medium text-gray-600", children: t('tabsEmbedTab.positionLayout') }) }), jsx(CardContent, { className: "space-y-6 pt-0", children: jsxs("div", { className: "space-y-2", children: [jsx(Label$1, { htmlFor: "position", className: "text-sm text-gray-600", children: t('tabsEmbedTab.screenPosition') }), jsx("div", { className: "mt-2", children: jsxs(Select$1, { value: customFloatingBubbleConfig.position, onValueChange: (value) => updateConfig('position', value), children: [jsx(SelectTrigger, { children: jsx(SelectValue, {}) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "bottom-right", children: t('tabsEmbedTab.bottomRight') }), jsx(SelectItem, { value: "bottom-left", children: t('tabsEmbedTab.bottomLeft') }), jsx(SelectItem, { value: "top-right", children: t('tabsEmbedTab.topRight') }), jsx(SelectItem, { value: "top-left", children: t('tabsEmbedTab.topLeft') })] })] }) })] }) })] }) }), jsx(TabsContent, { value: "content", className: "space-y-6", children: jsxs(Card, { children: [jsx(CardHeader, { className: "mb-0 px-4 py-3", children: jsx(CardTitle, { className: "text-sm font-medium text-gray-600", children: t('tabsEmbedTab.textContent') }) }), jsxs(CardContent, { className: "space-y-4 pt-0", children: [jsxs("div", { className: "space-y-2", children: [jsx(Label$1, { htmlFor: "title", className: "text-sm text-gray-600", children: t('tabsEmbedTab.titleLabel') }), jsx(Input, { id: "title", value: customFloatingBubbleConfig.title, onChange: (e) => updateConfig('title', e.target.value), placeholder: "AI-powered assistant", className: "mt-2" })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label$1, { htmlFor: "subtitle", className: "text-sm text-gray-600", children: t('tabsEmbedTab.subtitleText') }), jsx(Input, { id: "subtitle", value: customFloatingBubbleConfig.subtitle, onChange: (e) => updateConfig('subtitle', e.target.value), placeholder: "Created with AI", className: "mt-2" })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label$1, { htmlFor: "iconImage", className: "text-sm text-gray-600", children: t('tabsEmbedTab.iconImage') }), jsxs("div", { className: "mt-2 space-y-1", children: [jsx(Input, { id: "iconImage", type: "file", accept: "image/*", onChange: (e) => {
+                                                    }, frameBorder: "0" })) }) })] }), focusEditCustomFloatingBubble && (jsx(Dialog, { open: focusEditCustomFloatingBubble, onOpenChange: (open) => setFocusEditCustomFloatingBubble(open), children: jsxs(DialogContent, { className: "max-h-[80vh] max-w-[600px] overflow-y-auto", children: [jsxs(DialogHeader, { className: "mb-1", children: [jsx(DialogTitle, { className: "ibl-dialog-title", children: labels.iconEditor.title }), jsx("p", { className: "text-xs text-gray-600", children: labels.iconEditor.description })] }), jsxs(Tabs, { defaultValue: "appearance", className: "w-full", children: [jsxs(TabsList, { className: "mb-4 grid h-10 w-full grid-cols-3", children: [jsxs(TabsTrigger, { value: "appearance", className: "flex items-center gap-2", children: [jsx(Palette, { className: "h-4 w-4" }), t('tabsEmbedTab.appearanceTab')] }), jsxs(TabsTrigger, { value: "position", className: "flex items-center gap-2", children: [jsx(Settings$1, { className: "h-4 w-4" }), t('tabsEmbedTab.positionTab')] }), jsxs(TabsTrigger, { value: "content", className: "flex items-center gap-2", children: [jsx(MessageCircle, { className: "h-4 w-4" }), t('tabsEmbedTab.contentTab')] })] }), jsx(TabsContent, { value: "appearance", className: "space-y-6", children: jsxs(Card$1, { children: [jsx(CardHeader, { className: "mb-0 px-4 py-3", children: jsx(CardTitle, { className: "text-sm font-medium text-gray-600", children: t('tabsEmbedTab.visualStyling') }) }), jsx(CardContent, { className: "space-y-6 pt-2", children: jsxs("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-2", children: [jsxs("div", { className: "space-y-2", children: [jsx(Label$1, { htmlFor: "backgroundColor", className: "text-sm text-gray-600", children: t('tabsEmbedTab.backgroundColor') }), jsxs("div", { className: "mt-2 flex gap-2", children: [jsx(Input, { id: "backgroundColor", type: "color", value: customFloatingBubbleConfig.backgroundColor, onChange: (e) => updateConfig('backgroundColor', e.target.value), className: "h-10 w-16 rounded border p-1" }), jsx(Input, { value: customFloatingBubbleConfig.backgroundColor, onChange: (e) => updateConfig('backgroundColor', e.target.value), placeholder: "#3b82f6", className: "flex-1" })] })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label$1, { htmlFor: "textColor", className: "text-sm text-gray-600", children: t('tabsEmbedTab.titleTextColor') }), jsxs("div", { className: "mt-2 flex gap-2", children: [jsx(Input, { id: "textColor", type: "color", value: customFloatingBubbleConfig.textColor, onChange: (e) => updateConfig('textColor', e.target.value), className: "h-10 w-16 rounded border p-1" }), jsx(Input, { value: customFloatingBubbleConfig.textColor, onChange: (e) => updateConfig('textColor', e.target.value), placeholder: "#ffffff", className: "flex-1" })] })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label$1, { htmlFor: "subtitleTextColor", className: "text-sm text-gray-600", children: t('tabsEmbedTab.subtitleTextColor') }), jsxs("div", { className: "mt-2 flex gap-2", children: [jsx(Input, { id: "subtitleTextColor", type: "color", value: customFloatingBubbleConfig.subtitleTextColor, onChange: (e) => updateConfig('subtitleTextColor', e.target.value), className: "h-10 w-16 rounded border p-1" }), jsx(Input, { value: customFloatingBubbleConfig.subtitleTextColor, onChange: (e) => updateConfig('subtitleTextColor', e.target.value), placeholder: "#e5e7eb", className: "flex-1" })] })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label$1, { htmlFor: "borderRadius", className: "text-sm text-gray-600", children: t('tabsEmbedTab.borderRadius') }), jsx("div", { className: "mt-2 flex gap-2", children: jsx(Input, { value: customFloatingBubbleConfig.borderRadius, onChange: (e) => updateConfig('borderRadius', e.target.value), placeholder: "16", type: "range", min: 0, max: 100, step: 1, className: "flex-1", id: "borderRadius" }) })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label$1, { htmlFor: "imageSize", className: "text-sm text-gray-600", children: t('tabsEmbedTab.imageSize') }), jsx("div", { className: "mt-2 flex gap-2", children: jsx(Input, { value: customFloatingBubbleConfig.imageSize, onChange: (e) => updateConfig('imageSize', e.target.value), placeholder: "16", type: "range", min: 0, max: 100, step: 1, className: "flex-1" }) })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label$1, { htmlFor: "fontSize", className: "text-sm text-gray-600", children: t('tabsEmbedTab.titleFontSize') }), jsxs("div", { className: "mt-2 flex gap-2", children: [jsx(Input, { id: "fontSize", value: customFloatingBubbleConfig.fontSize, onChange: (e) => updateConfig('fontSize', e.target.value), placeholder: "16", type: "range", min: 10, max: 24, step: 1, className: "flex-1" }), jsxs("span", { className: "flex min-w-[30px] items-center text-xs text-gray-500", children: [customFloatingBubbleConfig.fontSize, "px"] })] })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label$1, { htmlFor: "subtitleFontSize", className: "text-sm text-gray-600", children: t('tabsEmbedTab.subtitleFontSize') }), jsxs("div", { className: "mt-2 flex gap-2", children: [jsx(Input, { id: "subtitleFontSize", value: customFloatingBubbleConfig.subtitleFontSize, onChange: (e) => updateConfig('subtitleFontSize', e.target.value), placeholder: "12", type: "range", min: 8, max: 20, step: 1, className: "flex-1" }), jsxs("span", { className: "flex min-w-[30px] items-center text-xs text-gray-500", children: [customFloatingBubbleConfig.subtitleFontSize, "px"] })] })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label$1, { htmlFor: "shadow", className: "text-sm text-gray-600", children: t('tabsEmbedTab.useShadow') }), jsx("div", { className: "mt-2", children: jsxs(Select$1, { value: customFloatingBubbleConfig.shadow ? '1' : '0', onValueChange: (value) => updateConfig('shadow', value === '1'), children: [jsx(SelectTrigger, { children: jsx(SelectValue, {}) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: '1', children: t('tabsEmbedTab.yes') }), jsx(SelectItem, { value: '0', children: t('tabsEmbedTab.no') })] })] }) })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label$1, { htmlFor: "padding", className: "text-sm text-gray-600", children: t('tabsEmbedTab.padding') }), jsx("div", { className: "mt-2 flex gap-2", children: jsx(Input, { value: customFloatingBubbleConfig.padding, onChange: (e) => updateConfig('padding', e.target.value), placeholder: "1", type: "range", min: 0, max: 50, step: 1, className: "flex-1" }) })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label$1, { htmlFor: "strokeWidth", className: "text-sm text-gray-600", children: t('tabsEmbedTab.strokeThickness') }), jsx("div", { className: "mt-2 flex gap-2", children: jsx(Input, { value: customFloatingBubbleConfig.strokeWidth, onChange: (e) => updateConfig('strokeWidth', e.target.value), placeholder: "1", type: "range", min: 0, max: 10, step: 1, className: "flex-1" }) })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label$1, { htmlFor: "strokeColor", className: "text-sm text-gray-600", children: t('tabsEmbedTab.strokeColor') }), jsxs("div", { className: "mt-2 flex gap-2", children: [jsx(Input, { id: "strokeColor", type: "color", value: customFloatingBubbleConfig.strokeColor, onChange: (e) => updateConfig('strokeColor', e.target.value), className: "h-10 w-16 rounded border p-1" }), jsx(Input, { value: customFloatingBubbleConfig.strokeColor, onChange: (e) => updateConfig('strokeColor', e.target.value), placeholder: "#3b82f6", className: "flex-1" })] })] })] }) })] }) }), jsx(TabsContent, { value: "position", className: "space-y-6", children: jsxs(Card$1, { children: [jsx(CardHeader, { className: "mb-0 px-4 py-3", children: jsx(CardTitle, { className: "text-sm font-medium text-gray-600", children: t('tabsEmbedTab.positionLayout') }) }), jsx(CardContent, { className: "space-y-6 pt-0", children: jsxs("div", { className: "space-y-2", children: [jsx(Label$1, { htmlFor: "position", className: "text-sm text-gray-600", children: t('tabsEmbedTab.screenPosition') }), jsx("div", { className: "mt-2", children: jsxs(Select$1, { value: customFloatingBubbleConfig.position, onValueChange: (value) => updateConfig('position', value), children: [jsx(SelectTrigger, { children: jsx(SelectValue, {}) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "bottom-right", children: t('tabsEmbedTab.bottomRight') }), jsx(SelectItem, { value: "bottom-left", children: t('tabsEmbedTab.bottomLeft') }), jsx(SelectItem, { value: "top-right", children: t('tabsEmbedTab.topRight') }), jsx(SelectItem, { value: "top-left", children: t('tabsEmbedTab.topLeft') })] })] }) })] }) })] }) }), jsx(TabsContent, { value: "content", className: "space-y-6", children: jsxs(Card$1, { children: [jsx(CardHeader, { className: "mb-0 px-4 py-3", children: jsx(CardTitle, { className: "text-sm font-medium text-gray-600", children: t('tabsEmbedTab.textContent') }) }), jsxs(CardContent, { className: "space-y-4 pt-0", children: [jsxs("div", { className: "space-y-2", children: [jsx(Label$1, { htmlFor: "title", className: "text-sm text-gray-600", children: t('tabsEmbedTab.titleLabel') }), jsx(Input, { id: "title", value: customFloatingBubbleConfig.title, onChange: (e) => updateConfig('title', e.target.value), placeholder: "AI-powered assistant", className: "mt-2" })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label$1, { htmlFor: "subtitle", className: "text-sm text-gray-600", children: t('tabsEmbedTab.subtitleText') }), jsx(Input, { id: "subtitle", value: customFloatingBubbleConfig.subtitle, onChange: (e) => updateConfig('subtitle', e.target.value), placeholder: "Created with AI", className: "mt-2" })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label$1, { htmlFor: "iconImage", className: "text-sm text-gray-600", children: t('tabsEmbedTab.iconImage') }), jsxs("div", { className: "mt-2 space-y-1", children: [jsx(Input, { id: "iconImage", type: "file", accept: "image/*", onChange: (e) => {
                                                                                                 var _a;
                                                                                                 const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
                                                                                                 if (file) {
@@ -281172,7 +282211,7 @@ function AgentEmbedTab({ labels: labelsProp, urls, CopyCodeBlock, visibilityOpti
                                                                                                 }
                                                                                             }, className: "h-[45px] file:mr-4 file:rounded-full file:border-0 file:bg-blue-50 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-blue-700 hover:file:bg-blue-100" }), customFloatingBubbleConfig.image && (jsxs("div", { className: "my-3 flex items-center gap-3", children: [jsx("img", { src: customFloatingBubbleConfig.image || '/placeholder.svg', alt: t('tabsEmbedTab.chatIconPreviewAlt'), className: "h-12 w-12 rounded-lg border bg-gray-100 object-cover p-1" }), jsx(Button$1, { type: "button", variant: "outline", size: "sm", onClick: () => updateMultipleConfig({
                                                                                                         image: null,
-                                                                                                    }), children: t('tabsEmbedTab.removeImage') })] })), jsx("p", { className: "text-xs text-gray-500", children: t('tabsEmbedTab.iconUploadHint') })] })] })] })] }) })] }), jsxs(Card, { children: [jsx(CardHeader, { className: "mb-0 pt-4 pb-0", children: jsx(CardTitle, { className: "text-sm font-medium text-gray-600", children: t('tabsEmbedTab.livePreview') }) }), jsx(CardContent, { children: jsx(InteractiveBubbleConfigDisplay, { customFloatingBubbleConfig: customFloatingBubbleConfig, handleFloatingBubbleImageError: handleFloatingBubbleImageError }) })] })] }) }))] }) }), jsx("div", { className: "flex flex-shrink-0 justify-end border-t border-gray-200 bg-white px-3 py-4", children: jsx(Button$1, { onClick: () => form.handleSubmit(), className: "bg-gradient-to-r from-[#2563EB] to-[#93C5FD] text-sm text-white hover:text-white hover:opacity-90", disabled: form.state.isSubmitting, children: form.state.isSubmitting ? labels.actions.creatingEmbed : labels.actions.createEmbed }) })] }), embedCode && (jsx(Dialog, { open: !!embedCode, onOpenChange: (open) => {
+                                                                                                    }), children: t('tabsEmbedTab.removeImage') })] })), jsx("p", { className: "text-xs text-gray-500", children: t('tabsEmbedTab.iconUploadHint') })] })] })] })] }) })] }), jsxs(Card$1, { children: [jsx(CardHeader, { className: "mb-0 pt-4 pb-0", children: jsx(CardTitle, { className: "text-sm font-medium text-gray-600", children: t('tabsEmbedTab.livePreview') }) }), jsx(CardContent, { children: jsx(InteractiveBubbleConfigDisplay, { customFloatingBubbleConfig: customFloatingBubbleConfig, handleFloatingBubbleImageError: handleFloatingBubbleImageError }) })] })] }) }))] }) }), jsx("div", { className: "flex flex-shrink-0 justify-end border-t border-gray-200 bg-white px-3 py-4", children: jsx(Button$1, { onClick: () => form.handleSubmit(), className: "bg-gradient-to-r from-[#2563EB] to-[#93C5FD] text-sm text-white hover:text-white hover:opacity-90", disabled: form.state.isSubmitting, children: form.state.isSubmitting ? labels.actions.creatingEmbed : labels.actions.createEmbed }) })] }), embedCode && (jsx(Dialog, { open: !!embedCode, onOpenChange: (open) => {
                     if (!open) {
                         setEmbedCode('');
                     }
@@ -283648,7 +284687,7 @@ function AgentCard({ agent, onClick, variant = 'default', isStarred = false, isT
             onClick(agent);
         }
     };
-    return (jsx(Card, { className: "cursor-pointer rounded-lg border border-[#D0E0FF] bg-[#F5F8FF] transition-shadow hover:shadow-md md:h-full", onClick: handleCardClick, tabIndex: 0, onKeyDown: handleCardKeyDown, "aria-label": `${exploreAriaPrefix} ${agent.name}. ${agent.description || ''}`, children: jsx(CardContent, { className: "p-6 md:h-full", children: jsxs("div", { className: "flex items-start gap-4 md:h-full", children: [jsxs(Avatar, { className: "h-12 w-12 shrink-0 rounded-full", children: [jsx(AvatarImage, { src: agent.profile_image, alt: agent.name, className: "object-cover" }), jsx(AvatarFallback, { children: agent.name.substring(0, 2).toUpperCase() })] }), jsxs("div", { className: "min-w-0 flex-1", children: [jsxs("div", { className: "mb-2 flex items-center justify-between", children: [jsx("h3", { className: "text-sm font-medium text-gray-900", children: agent.name }), variant === 'with-star' && onToggleStar && (jsx(StarButton, { isStarred: isStarred, isToggling: isTogglingStar, disabled: disableStar, onClick: (e) => {
+    return (jsx(Card$1, { className: "cursor-pointer rounded-lg border border-[#D0E0FF] bg-[#F5F8FF] transition-shadow hover:shadow-md md:h-full", onClick: handleCardClick, tabIndex: 0, onKeyDown: handleCardKeyDown, "aria-label": `${exploreAriaPrefix} ${agent.name}. ${agent.description || ''}`, children: jsx(CardContent, { className: "p-6 md:h-full", children: jsxs("div", { className: "flex items-start gap-4 md:h-full", children: [jsxs(Avatar, { className: "h-12 w-12 shrink-0 rounded-full", children: [jsx(AvatarImage, { src: agent.profile_image, alt: agent.name, className: "object-cover" }), jsx(AvatarFallback, { children: agent.name.substring(0, 2).toUpperCase() })] }), jsxs("div", { className: "min-w-0 flex-1", children: [jsxs("div", { className: "mb-2 flex items-center justify-between", children: [jsx("h3", { className: "text-sm font-medium text-gray-900", children: agent.name }), variant === 'with-star' && onToggleStar && (jsx(StarButton, { isStarred: isStarred, isToggling: isTogglingStar, disabled: disableStar, onClick: (e) => {
                                             e.stopPropagation();
                                             onToggleStar(agent, e);
                                         } }))] }), jsx("p", { className: "mb-3 line-clamp-2 text-sm leading-relaxed text-gray-600", children: agent.description }), agent.updated_at && (jsxs("p", { className: "text-xs text-gray-500", children: [updatedOnLabel, " ", formatDate(agent.updated_at)] }))] })] }) }) }));
@@ -283683,7 +284722,7 @@ function StarredAgentsSection() {
             onUnauthenticatedAction === null || onUnauthenticatedAction === void 0 ? void 0 : onUnauthenticatedAction();
     }, [username, onUnauthenticatedAction]);
     const sectionLabels = labels.sections.starred;
-    return (jsxs("div", { children: [jsx("h2", { className: "mb-4 text-lg font-medium text-gray-900", role: "heading", "aria-level": 2, children: sectionLabels.title }), agents.length > 0 ? (jsxs(Fragment$1, { children: [jsx("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-2", "data-testid": "favorites-card-list", role: "list", "aria-label": sectionLabels.ariaLabel, children: agents.map((agent) => (jsx("div", { role: "listitem", children: jsx(AgentCard, { agent: agent, onClick: onAgentClick, variant: "with-star", isStarred: agent.starred, isTogglingStar: togglingAgentId === String(agent.id), onToggleStar: toggleFavorite, disableStar: !username, updatedOnLabel: labels.card.updatedOn, exploreAriaPrefix: labels.card.exploreAriaPrefix }) }, agent.id))) }), hasMore && (jsx("div", { className: "mt-6 flex justify-center", children: jsx(Button$1, { variant: "outline", onClick: () => setLimit((prev) => prev + FAVORITE_AGENTS_LIMIT), disabled: isFetching, "aria-label": sectionLabels.loadMoreAriaLabel, role: "button", children: isFetching ? (jsxs("div", { className: "flex items-center gap-2", children: [jsx(Spinner, { className: "h-4 w-4", "aria-hidden": "true" }), jsx("span", { children: labels.loadingMore })] })) : (labels.seeMore) }) }))] })) : (jsx("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3", children: jsx(Card, { "data-testid": "favorites-card", className: "cursor-pointer rounded-lg border border-[#D0E0FF] bg-[#F5F8FF] transition-shadow duration-200 hover:shadow-md md:col-span-2 lg:col-span-3", onClick: handleFavoriteCardClick, role: "button", tabIndex: 0, onKeyDown: (e) => {
+    return (jsxs("div", { children: [jsx("h2", { className: "mb-4 text-lg font-medium text-gray-900", role: "heading", "aria-level": 2, children: sectionLabels.title }), agents.length > 0 ? (jsxs(Fragment$1, { children: [jsx("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-2", "data-testid": "favorites-card-list", role: "list", "aria-label": sectionLabels.ariaLabel, children: agents.map((agent) => (jsx("div", { role: "listitem", children: jsx(AgentCard, { agent: agent, onClick: onAgentClick, variant: "with-star", isStarred: agent.starred, isTogglingStar: togglingAgentId === String(agent.id), onToggleStar: toggleFavorite, disableStar: !username, updatedOnLabel: labels.card.updatedOn, exploreAriaPrefix: labels.card.exploreAriaPrefix }) }, agent.id))) }), hasMore && (jsx("div", { className: "mt-6 flex justify-center", children: jsx(Button$1, { variant: "outline", onClick: () => setLimit((prev) => prev + FAVORITE_AGENTS_LIMIT), disabled: isFetching, "aria-label": sectionLabels.loadMoreAriaLabel, role: "button", children: isFetching ? (jsxs("div", { className: "flex items-center gap-2", children: [jsx(Spinner, { className: "h-4 w-4", "aria-hidden": "true" }), jsx("span", { children: labels.loadingMore })] })) : (labels.seeMore) }) }))] })) : (jsx("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3", children: jsx(Card$1, { "data-testid": "favorites-card", className: "cursor-pointer rounded-lg border border-[#D0E0FF] bg-[#F5F8FF] transition-shadow duration-200 hover:shadow-md md:col-span-2 lg:col-span-3", onClick: handleFavoriteCardClick, role: "button", tabIndex: 0, onKeyDown: (e) => {
                         if (e.key === 'Enter' || e.key === ' ') {
                             e.preventDefault();
                             handleFavoriteCardClick();
@@ -283718,7 +284757,7 @@ function FeaturedAgentsSection() {
     if (agents.length === 0 && !isFetching) {
         return null;
     }
-    return (jsxs("div", { children: [jsx("h2", { className: "mb-4 text-lg font-medium text-gray-900", role: "heading", "aria-level": 2, children: sectionLabels.title }), agents.length > 0 ? (jsxs(Fragment$1, { children: [jsx("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-2", children: agents.map((agent) => (jsx(AgentCard, { agent: agent, onClick: onAgentClick, variant: "with-star", isStarred: agent.starred, isTogglingStar: togglingAgentId === String(agent.id), onToggleStar: toggleFavorite, disableStar: !username, updatedOnLabel: labels.card.updatedOn, exploreAriaPrefix: labels.card.exploreAriaPrefix }, agent.id))) }), hasMore && (jsx("div", { className: "mt-6 flex justify-center", children: jsx(Button$1, { variant: "outline", onClick: () => setLimit((prev) => prev + FEATURED_AGENTS_LIMIT), disabled: isFetching, "aria-label": sectionLabels.loadMoreAriaLabel, children: isFetching ? (jsxs("div", { className: "flex items-center gap-2", children: [jsx(Spinner, { className: "h-4 w-4", "aria-hidden": "true" }), jsx("span", { children: labels.loadingMore })] })) : (labels.seeMore) }) }))] })) : (jsx("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3", children: jsx(Card, { className: "rounded-lg border border-[#D0E0FF] bg-[#F5F8FF] md:col-span-2 lg:col-span-3", children: jsx(CardContent, { className: "p-6", children: jsxs("div", { className: "flex items-start gap-4", children: [jsx("div", { className: "flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-lg bg-[#D0E0FF]", children: jsx(Award, { className: "h-6 w-6 text-[#38A1E5]" }) }), jsxs("div", { className: "min-w-0 flex-1", children: [jsx("h3", { className: "mb-2 text-sm font-medium text-gray-900", children: sectionLabels.emptyTitle }), jsx("p", { className: "mb-3 text-sm leading-relaxed text-gray-600", children: sectionLabels.emptyDescription }), jsx("p", { className: "text-xs text-gray-500", children: sectionLabels.emptySubtext })] })] }) }) }) }))] }));
+    return (jsxs("div", { children: [jsx("h2", { className: "mb-4 text-lg font-medium text-gray-900", role: "heading", "aria-level": 2, children: sectionLabels.title }), agents.length > 0 ? (jsxs(Fragment$1, { children: [jsx("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-2", children: agents.map((agent) => (jsx(AgentCard, { agent: agent, onClick: onAgentClick, variant: "with-star", isStarred: agent.starred, isTogglingStar: togglingAgentId === String(agent.id), onToggleStar: toggleFavorite, disableStar: !username, updatedOnLabel: labels.card.updatedOn, exploreAriaPrefix: labels.card.exploreAriaPrefix }, agent.id))) }), hasMore && (jsx("div", { className: "mt-6 flex justify-center", children: jsx(Button$1, { variant: "outline", onClick: () => setLimit((prev) => prev + FEATURED_AGENTS_LIMIT), disabled: isFetching, "aria-label": sectionLabels.loadMoreAriaLabel, children: isFetching ? (jsxs("div", { className: "flex items-center gap-2", children: [jsx(Spinner, { className: "h-4 w-4", "aria-hidden": "true" }), jsx("span", { children: labels.loadingMore })] })) : (labels.seeMore) }) }))] })) : (jsx("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3", children: jsx(Card$1, { className: "rounded-lg border border-[#D0E0FF] bg-[#F5F8FF] md:col-span-2 lg:col-span-3", children: jsx(CardContent, { className: "p-6", children: jsxs("div", { className: "flex items-start gap-4", children: [jsx("div", { className: "flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-lg bg-[#D0E0FF]", children: jsx(Award, { className: "h-6 w-6 text-[#38A1E5]" }) }), jsxs("div", { className: "min-w-0 flex-1", children: [jsx("h3", { className: "mb-2 text-sm font-medium text-gray-900", children: sectionLabels.emptyTitle }), jsx("p", { className: "mb-3 text-sm leading-relaxed text-gray-600", children: sectionLabels.emptyDescription }), jsx("p", { className: "text-xs text-gray-500", children: sectionLabels.emptySubtext })] })] }) }) }) }))] }));
 }
 
 function CustomAgentsSection() {
@@ -283750,7 +284789,7 @@ function CustomAgentsSection() {
         onCreateAgent === null || onCreateAgent === void 0 ? void 0 : onCreateAgent();
     }, [username, onUnauthenticatedAction, onCreateAgent]);
     const sectionLabels = labels.sections.custom;
-    const createCard = onCreateAgent ? (jsx(WithPermissions, { rbacResource: createAgentRbacResource, rbacPermissions: rbacPermissions !== null && rbacPermissions !== void 0 ? rbacPermissions : {}, children: ({ hasPermission }) => hasPermission || !enableRBAC ? (jsx(Card, { className: "cursor-pointer border border-[#D0E0FF] bg-[#F5F8FF] transition-shadow duration-200 hover:shadow-md", onClick: handleCreate, role: "button", tabIndex: 0, onKeyDown: (e) => {
+    const createCard = onCreateAgent ? (jsx(WithPermissions, { rbacResource: createAgentRbacResource, rbacPermissions: rbacPermissions !== null && rbacPermissions !== void 0 ? rbacPermissions : {}, children: ({ hasPermission }) => hasPermission || !enableRBAC ? (jsx(Card$1, { className: "cursor-pointer border border-[#D0E0FF] bg-[#F5F8FF] transition-shadow duration-200 hover:shadow-md", onClick: handleCreate, role: "button", tabIndex: 0, onKeyDown: (e) => {
                 if (e.key === 'Enter' || e.key === ' ') {
                     e.preventDefault();
                     handleCreate();
@@ -286971,7 +288010,7 @@ function ExploreMentors({ tenantKey, onBrowseAll, onSelectMentor }) {
                         name: mentor.name,
                         // @ts-expect-error - description property may not exist on Mentor type
                         description: mentor.description || t('welcomeChatExploreMentors.noDescription'),
-                    }), children: jsx(Card, { className: "h-full cursor-pointer border border-[#D0E0FF] bg-[#F5F8FF] shadow-xs transition-all duration-200 focus-within:shadow-md hover:shadow-sm", children: jsx(CardContent, { className: "h-full p-4", children: jsxs("div", { className: "flex h-full items-start gap-3", children: [jsxs(Avatar, { className: "h-12 w-12 flex-shrink-0", children: [jsx(AvatarImage
+                    }), children: jsx(Card$1, { className: "h-full cursor-pointer border border-[#D0E0FF] bg-[#F5F8FF] shadow-xs transition-all duration-200 focus-within:shadow-md hover:shadow-sm", children: jsx(CardContent, { className: "h-full p-4", children: jsxs("div", { className: "flex h-full items-start gap-3", children: [jsxs(Avatar, { className: "h-12 w-12 flex-shrink-0", children: [jsx(AvatarImage
                                             // @ts-expect-error - profile_image property may not exist on Mentor type
                                             , { 
                                                 // @ts-expect-error - profile_image property may not exist on Mentor type
@@ -287019,7 +288058,7 @@ function ConversationStarters({ onTemplateSelect, enabledGuidedPrompts, sessionI
     }
     return (jsxs("div", { className: "mx-auto w-full max-w-6xl px-4", children: [jsx("h2", { className: "mb-6 text-xl font-semibold text-gray-900", children: t('welcomeChatConversationStarters.heading') }), jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5", children: (_b = guidedPrompts === null || guidedPrompts === void 0 ? void 0 : guidedPrompts.results) === null || _b === void 0 ? void 0 : _b.map((guidedPrompt, index) => {
                     var _a;
-                    return (jsx(Card, { className: cn('h-full border border-[#D0E0FF] bg-[#F5F8FF] shadow-xs transition-all duration-200', isChatDisabledByRbac
+                    return (jsx(Card$1, { className: cn('h-full border border-[#D0E0FF] bg-[#F5F8FF] shadow-xs transition-all duration-200', isChatDisabledByRbac
                             ? 'cursor-not-allowed opacity-50'
                             : 'cursor-pointer hover:shadow-sm focus:shadow-md focus:ring-2 focus:ring-gray-300 focus:ring-offset-2 focus:outline-none'), onClick: () => !isChatDisabledByRbac && onTemplateSelect(guidedPrompt.prompt), onKeyDown: (e) => {
                             if (isChatDisabledByRbac)
@@ -288476,7 +289515,7 @@ function TaskMetricsCards({ tasksData, labels }) {
     const totalTasks = tasksData.length;
     const completedTasks = tasksData.filter((t) => t.status === 'Completed').length;
     const failedTasks = tasksData.filter((t) => t.status === 'Failed').length;
-    return (jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-3 gap-4", children: [jsx(Card, { className: "w-full bg-white border border-blue-200", children: jsxs(CardContent, { className: "p-4 flex flex-row items-center justify-between", children: [jsxs("div", { className: "flex flex-col", children: [jsx("h3", { className: "text-sm font-medium text-gray-700 mb-2", children: labels.metrics.total }), jsx("p", { className: "text-2xl font-semibold text-gray-900", children: totalTasks })] }), jsx(ClipboardList, { className: "h-6 w-6 text-blue-500 flex-shrink-0" })] }) }), jsx(Card, { className: "w-full bg-white border border-blue-200", children: jsxs(CardContent, { className: "p-4 flex flex-row items-center justify-between", children: [jsxs("div", { className: "flex flex-col", children: [jsx("h3", { className: "text-sm font-medium text-gray-700 mb-2", children: labels.metrics.completed }), jsx("p", { className: "text-2xl font-semibold text-gray-900", children: completedTasks })] }), jsx(CircleCheckBig, { className: "h-6 w-6 text-blue-500 flex-shrink-0" })] }) }), jsx(Card, { className: "w-full bg-white border border-blue-200", children: jsxs(CardContent, { className: "p-4 flex flex-row items-center justify-between", children: [jsxs("div", { className: "flex flex-col", children: [jsx("h3", { className: "text-sm font-medium text-gray-700 mb-2", children: labels.metrics.failed }), jsx("p", { className: "text-2xl font-semibold text-gray-900", children: failedTasks })] }), jsx(CircleX, { className: "h-6 w-6 text-red-500 flex-shrink-0" })] }) })] }));
+    return (jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-3 gap-4", children: [jsx(Card$1, { className: "w-full bg-white border border-blue-200", children: jsxs(CardContent, { className: "p-4 flex flex-row items-center justify-between", children: [jsxs("div", { className: "flex flex-col", children: [jsx("h3", { className: "text-sm font-medium text-gray-700 mb-2", children: labels.metrics.total }), jsx("p", { className: "text-2xl font-semibold text-gray-900", children: totalTasks })] }), jsx(ClipboardList, { className: "h-6 w-6 text-blue-500 flex-shrink-0" })] }) }), jsx(Card$1, { className: "w-full bg-white border border-blue-200", children: jsxs(CardContent, { className: "p-4 flex flex-row items-center justify-between", children: [jsxs("div", { className: "flex flex-col", children: [jsx("h3", { className: "text-sm font-medium text-gray-700 mb-2", children: labels.metrics.completed }), jsx("p", { className: "text-2xl font-semibold text-gray-900", children: completedTasks })] }), jsx(CircleCheckBig, { className: "h-6 w-6 text-blue-500 flex-shrink-0" })] }) }), jsx(Card$1, { className: "w-full bg-white border border-blue-200", children: jsxs(CardContent, { className: "p-4 flex flex-row items-center justify-between", children: [jsxs("div", { className: "flex flex-col", children: [jsx("h3", { className: "text-sm font-medium text-gray-700 mb-2", children: labels.metrics.failed }), jsx("p", { className: "text-2xl font-semibold text-gray-900", children: failedTasks })] }), jsx(CircleX, { className: "h-6 w-6 text-red-500 flex-shrink-0" })] }) })] }));
 }
 
 const STATUS_BADGE = {
@@ -289558,7 +290597,7 @@ function PromptCard({ prompt, onEdit, onSelect, title, tenantKey, userIsStudent
             onSelect(prompt.prompt);
         }
     };
-    return (jsxs(Fragment$1, { children: [jsx(Card, { className: "overflow-hidden border-0 bg-[#F8F8F8] transition-shadow hover:shadow-md", children: jsxs(CardContent, { className: "h-full p-4", children: [jsxs("div", { className: "mb-5 flex flex-1 items-start gap-2", children: [jsx(MessageSquare, { className: "mt-1 h-4 w-4 flex-shrink-0 text-gray-400" }), jsxs("div", { className: "flex-1", children: [jsx("h3", { className: "text-sm font-medium text-gray-600", children: title }), jsx(Markdown, { className: "mt-1 line-clamp-4 text-sm text-gray-500", children: parsePrompt(prompt.prompt) })] })] }), jsxs("div", { className: "flex flex-wrap justify-start gap-2", children: [!userIsStudent && (jsxs(Button$1, { variant: "outline", size: "sm", className: "flex h-7 items-center border-gray-200 px-3 text-xs font-normal text-gray-600", onClick: handleEdit, disabled: isDeleting, children: [jsx(SquarePen, { className: "mr-1.5 h-3 w-3" }), t('promptGalleryModalPromptCard.edit')] })), jsxs(Button$1, { variant: "outline", size: "sm", className: "flex h-7 items-center border-gray-200 px-3 text-xs font-normal text-gray-600", onClick: () => executeWithTrialCheck(handleRun), disabled: isDeleting, children: [jsx(Play, { className: "mr-1.5 h-3 w-3" }), t('promptGalleryModalPromptCard.run')] }), jsx(Button$1, { variant: "outline", size: "sm", className: "flex h-7 items-center border-gray-200 px-3 text-xs font-normal text-gray-600", onClick: () => copy(prompt.prompt), disabled: isDeleting, children: status === 'success' ? (jsxs(Fragment$1, { children: [jsx(Check, { className: "mr-1.5 h-3 w-3" }), " ", t('promptGalleryModalPromptCard.copied')] })) : (jsxs(Fragment$1, { children: [jsx(Copy, { className: "mr-1.5 h-3 w-3" }), " ", t('promptGalleryModalPromptCard.copy')] })) }), !userIsStudent && (jsxs(Button$1, { variant: "outline", size: "sm", className: "flex h-7 items-center border-gray-200 px-3 text-xs font-normal text-gray-600 hover:text-gray-600", onClick: () => executeWithTrialCheck(handleDelete), disabled: isDeleting, children: [jsx(DeleteIcon, { className: cn('mr-1.5 h-3 w-3', isDeleting && 'animate-spin') }), t('promptGalleryModalPromptCard.delete')] }))] })] }) }), isModalOpen && FreeTrialDialog && (jsx(FreeTrialDialog, { onClose: closeModal, isOpen: isModalOpen }))] }));
+    return (jsxs(Fragment$1, { children: [jsx(Card$1, { className: "overflow-hidden border-0 bg-[#F8F8F8] transition-shadow hover:shadow-md", children: jsxs(CardContent, { className: "h-full p-4", children: [jsxs("div", { className: "mb-5 flex flex-1 items-start gap-2", children: [jsx(MessageSquare, { className: "mt-1 h-4 w-4 flex-shrink-0 text-gray-400" }), jsxs("div", { className: "flex-1", children: [jsx("h3", { className: "text-sm font-medium text-gray-600", children: title }), jsx(Markdown, { className: "mt-1 line-clamp-4 text-sm text-gray-500", children: parsePrompt(prompt.prompt) })] })] }), jsxs("div", { className: "flex flex-wrap justify-start gap-2", children: [!userIsStudent && (jsxs(Button$1, { variant: "outline", size: "sm", className: "flex h-7 items-center border-gray-200 px-3 text-xs font-normal text-gray-600", onClick: handleEdit, disabled: isDeleting, children: [jsx(SquarePen, { className: "mr-1.5 h-3 w-3" }), t('promptGalleryModalPromptCard.edit')] })), jsxs(Button$1, { variant: "outline", size: "sm", className: "flex h-7 items-center border-gray-200 px-3 text-xs font-normal text-gray-600", onClick: () => executeWithTrialCheck(handleRun), disabled: isDeleting, children: [jsx(Play, { className: "mr-1.5 h-3 w-3" }), t('promptGalleryModalPromptCard.run')] }), jsx(Button$1, { variant: "outline", size: "sm", className: "flex h-7 items-center border-gray-200 px-3 text-xs font-normal text-gray-600", onClick: () => copy(prompt.prompt), disabled: isDeleting, children: status === 'success' ? (jsxs(Fragment$1, { children: [jsx(Check, { className: "mr-1.5 h-3 w-3" }), " ", t('promptGalleryModalPromptCard.copied')] })) : (jsxs(Fragment$1, { children: [jsx(Copy, { className: "mr-1.5 h-3 w-3" }), " ", t('promptGalleryModalPromptCard.copy')] })) }), !userIsStudent && (jsxs(Button$1, { variant: "outline", size: "sm", className: "flex h-7 items-center border-gray-200 px-3 text-xs font-normal text-gray-600 hover:text-gray-600", onClick: () => executeWithTrialCheck(handleDelete), disabled: isDeleting, children: [jsx(DeleteIcon, { className: cn('mr-1.5 h-3 w-3', isDeleting && 'animate-spin') }), t('promptGalleryModalPromptCard.delete')] }))] })] }) }), isModalOpen && FreeTrialDialog && (jsx(FreeTrialDialog, { onClose: closeModal, isOpen: isModalOpen }))] }));
 }
 
 function EmptyPrompts() {