@taskforcehq/taskforce 0.3.301 → 0.3.302

package/dist/components/views/StandaloneLayout.js

@@ -2,16 +2,21 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import React, { useMemo, useCallback, useState, useEffect, useRef, useLayoutEffect, Suspense } from 'react';
 import { createPortal } from 'react-dom';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { Settings, Plus, Filter, Layers, User, Maximize2, Minimize2, Check, ChevronLeft, ArrowUp, ArrowDown, ArrowUpDown, AlertTriangle, Save, Loader2, Folder, FileText, LogOut, NotebookTabs, ClipboardCheck, Cloud, CloudOff, RefreshCw, Users, Copy, ChevronsUp, ChevronsDown, EyeOff, Zap, HelpCircle, Bot, Image, Workflow } from 'lucide-react';
+import { Settings, Plus, Filter, Layers, User, Maximize2, Minimize2, Check, ChevronLeft, ArrowUp, ArrowDown, ArrowUpDown, AlertTriangle, Save, Loader2, Folder, FileText, LogOut, NotebookTabs, ClipboardCheck, Cloud, CloudOff, Users, ChevronsUp, ChevronsDown, EyeOff, Zap, HelpCircle, Bot, Image, Workflow } from 'lucide-react';
 import { STATUS_OPTIONS, getStatusDefinition } from '../../utils/constants';
 import styles from '../../Taskforce.module.css';
 import shellStyles from './WorkspaceShell.module.css';
 import accountStyles from './StandaloneAccount.module.css';
 import authStyles from './AuthShell.module.css';
 import folderBrowserStyles from './FolderBrowser.module.css';
-import managementStyles from './StandaloneManagement.module.css';
-import syncStatusStyles from './SyncStatusModal.module.css';
 import modalStyles from '../ui/Modal.module.css';
+import { CreateWorkspaceConfirmModal } from './standalone/modals/CreateWorkspaceConfirmModal';
+import { AccountHubModal } from './standalone/modals/AccountHubModal';
+import { EditProfileModal } from './standalone/modals/EditProfileModal';
+import { HelpModal } from './standalone/modals/HelpModal';
+import { ScheduleWarningModal } from './standalone/modals/ScheduleWarningModal';
+import { SyncStatusModal } from './standalone/modals/SyncStatusModal';
+import { TeamManagementModal } from './standalone/modals/TeamManagementModal';
 import { Modal } from '../ui/Modal';
 import { TaskForm } from '../task/TaskForm';
 import { TaskKanban } from '../task/TaskKanban';
@@ -28,8 +33,11 @@ import { getImageReferenceLabel } from '../../utils/imageReferences';
 import { buildCustomTaxonomySortOptions } from '../../utils/taxonomySorting.js';
 import { getLocale, t } from '../../localization';
 import { resolveAnnotatedAttachmentDetail } from '../../utils/annotatedAttachments';
+import { invalidateBillingStatusCache, loadBillingStatusCached } from '../../utils/billingStatusCache';
+import { fetchTaskforceApi } from '../../utils/taskforceApiClient';
 import { AppShellHeader } from './AppShellHeader';
 import { getTaskforceCloudEnvironmentConfig, parseTaskforceCloudEnvironment, resolveTaskforceCloudEnvironmentFromBaseUrl } from '../../config/cloudEnvironment';
+import { logBootstrapDebug } from '../../hooks/workspace/workspaceLocalState';
 import { FilterToolbar } from './panels/FilterToolbar';
 import { DocumentFilterToolbar } from './panels/DocumentFilterToolbar';
 import { PlanningDrawer, getPlanningDrawerWidthPx, } from './panels/PlanningDrawer';
@@ -37,7 +45,7 @@ import { getWorkspaceChromeDefinition, getWorkspaceModuleDefinitions, resolveWor
 import { EmptyWorkspaceFilterBar, WorkspaceHeaderActions, WorkspaceHeaderDivider, WorkspaceHeaderSearch, WorkspaceHeaderSelect, WorkspacePrimaryAction, } from './chrome/WorkspaceChromeSections';
 import { ScheduleSidebar, SCHEDULE_SIDEBAR_WIDTH_PX } from './panels/ScheduleSidebar';
 import { DOCUMENT_ATTACHMENT_FILTER_OPTIONS, DOCUMENT_TYPE_FILTER_OPTIONS, } from '../features/documentWorkspaceFilters';
-import { canManageTeamWorkspace as computeCanManageTeamWorkspace, canOpenTeamManagement as computeCanOpenTeamManagement, resolveTeamPlanModeFromEntitlements } from './teamManagementAccess';
+import { canManageTeamWorkspace as computeCanManageTeamWorkspace, canOpenTeamManagement as computeCanOpenTeamManagement } from './teamManagementAccess';
 import { toDateOnlyLocal, parseDateOnlyLocal, startOfWeek, getDayOffsetFromWeekStart, addDays, dateOnlyToIsoWeekKey, SCHEDULE_DAY_KEYS, SCHEDULE_DAY_LABELS, } from './panels/scheduleUtils';
 import { AGENTS_WORKSPACE_FEATURE_KEY, ANNOTATED_ATTACHMENTS_WORKSPACE_FEATURE_KEY, DOCUMENT_WORKSPACE_FEATURE_KEY, INITIATIVES_WORKSPACE_FEATURE_KEY, WORKFLOWS_WORKSPACE_FEATURE_KEY, resolveFeatureAccess, } from '../../runtime/appGates';
 // Heavy feature modules — lazy-loaded to reduce the initial app chunk size.
@@ -48,6 +56,8 @@ const WorkflowsModule = React.lazy(() => import('../features/WorkflowsModule').t
 const AgentsModule = React.lazy(() => import('../features/AgentsModule').then(m => ({ default: m.AgentsModule })));
 const InitiativesModule = React.lazy(() => import('../features/InitiativesModule').then(m => ({ default: m.InitiativesModule })));
 const PlansPage = React.lazy(() => import('./PlansPage').then(m => ({ default: m.PlansPage })));
+const PROFILE_AVATAR_ACCEPT = 'image/png,image/jpeg,image/webp,image/gif';
+const PROFILE_AVATAR_MAX_BYTES = 5 * 1024 * 1024;
 function getSyncEventStableKey(event, index = 0) {
     const explicitId = String(event.id ?? '').trim();
     if (explicitId)
@@ -147,6 +157,9 @@ function isDebugModeEnabled() {
         return runtimeOverride;
     return typeof __DEBUG_MODE__ !== 'undefined' && __DEBUG_MODE__;
 }
+function getTimingNow() {
+    return typeof performance !== 'undefined' ? performance.now() : Date.now();
+}
 export function StandaloneLayout(props) {
     const WORKSPACE_TOOL_RAIL_WIDTH = 56;
     const WORKSPACE_CONTENT_GUTTER = 6;
@@ -202,7 +215,7 @@ export function StandaloneLayout(props) {
     // clearFilters, // This was duplicated, removed one instance
     // activeTypes, // This was duplicated, removed one instance
     // Settings State & Props
-    settingsModel, configLoaded, currentTheme, setCurrentTheme, pathSaved, saveSettings, keyShortcut, setKeyShortcut, globalWeekStartsOn, locale, jsonBackupEnabled, setJsonBackupEnabled, mcpHostRoot, setMcpHostRoot, settingsSection, setSettingsSection, runtimeMode, workspaceSwitchingEnabled, cloudAuthConfigured, authRequiredForApi, authBlocked, isAuthenticated, authWorkspaceId, authUserEmail, authUserDisplayName, authSessionResolved, realtimeSyncEnabled, realtimeSyncFlagSource, workspaceCloudSyncEnabled, workspaceSyncPhase, workspaceSyncStatus, workspaceSyncSummary, workspaceSyncRecommendedAction, workspaceSyncBusy, workspaceSyncPendingChanges, saveWorkspaceCloudSyncSettings, pushNotice, userGlobalSyncStatus, workspaceLastSuccessfulSyncAt, workspaceLastPullAt, workspaceLastPushAt, workspaceLastErrorAt, userGlobalSyncError, workspaceLastErrorMessage, retryWorkspaceCloudSync, resetWorkspaceSyncCursorAndPull, getWorkspaceSyncDiagnostics, currentWorkspaceId, currentWorkspaceRole, availableWorkspaces, switchWorkspace, updateCurrentUserProfile, logout, projectRoot, projectName, mcpScriptPath, serverHostRoot, 
+    settingsModel, configLoaded, currentTheme, setCurrentTheme, pathSaved, saveSettings, keyShortcut, setKeyShortcut, globalWeekStartsOn, locale, jsonBackupEnabled, setJsonBackupEnabled, mcpHostRoot, setMcpHostRoot, settingsSection, setSettingsSection, runtimeMode, workspaceSwitchingEnabled, cloudAuthConfigured, authRequiredForApi, authBlocked, isAuthenticated, authUserId, authWorkspaceId, authUserEmail, authUserDisplayName, authUserAvatarUrl, authSessionResolved, realtimeSyncEnabled, realtimeSyncFlagSource, workspaceCloudSyncEnabled, workspaceSyncPhase, workspaceSyncStatus, workspaceSyncSummary, workspaceSyncRecommendedAction, workspaceSyncBusy, workspaceSyncPendingChanges, saveWorkspaceCloudSyncSettings, pushNotice, userGlobalSyncStatus, workspaceLastSuccessfulSyncAt, workspaceLastPullAt, workspaceLastPushAt, workspaceLastErrorAt, userGlobalSyncError, workspaceLastErrorMessage, retryWorkspaceCloudSync, resetWorkspaceSyncCursorAndPull, getWorkspaceSyncDiagnostics, currentWorkspaceId, currentWorkspaceRole, availableWorkspaces, switchWorkspace, updateCurrentUserProfile, logout, projectRoot, projectName, mcpScriptPath, serverHostRoot, 
     // Browser Props
     showFolderBrowser, setShowFolderBrowser, folders, files, currentBrowsePath, fetchFolders, browserTarget, setBrowserTarget, handleSelectPath, handleAddPath, handleRemovePath, 
     // Settings Managers
@@ -430,6 +443,15 @@ export function StandaloneLayout(props) {
                 if (typeof state.planningDrawerOpen === 'boolean') {
                     setPlanningDrawerOpen(state.planningDrawerOpen);
                 }
+                if (typeof state.planningTreeCollapsed === 'boolean') {
+                    setPlanningTreeCollapsed(state.planningTreeCollapsed);
+                }
+                if (typeof state.planningPrimaryCollapsed === 'boolean') {
+                    setPlanningPrimaryCollapsed(state.planningPrimaryCollapsed);
+                }
+                if (typeof state.planningSecondaryCollapsed === 'boolean') {
+                    setPlanningSecondaryCollapsed(state.planningSecondaryCollapsed);
+                }
                 if (Array.isArray(state.planningExpandedInitiativeIds)) {
                     setExpandedPlanningInitiativeIds(new Set(state.planningExpandedInitiativeIds
                         .map((value) => String(value || '').trim())
@@ -499,6 +521,9 @@ export function StandaloneLayout(props) {
                             documentTypeFilters,
                             documentAttachmentFilters,
                             planningDrawerOpen,
+                            planningTreeCollapsed,
+                            planningPrimaryCollapsed,
+                            planningSecondaryCollapsed,
                             planningExpandedInitiativeIds: Array.from(expandedPlanningInitiativeIds),
                             planningDrawerDetail,
                             planningNestedWorkstreamDetailId,
@@ -526,6 +551,9 @@ export function StandaloneLayout(props) {
         documentTypeFilters,
         documentAttachmentFilters,
         planningDrawerOpen,
+        planningTreeCollapsed,
+        planningPrimaryCollapsed,
+        planningSecondaryCollapsed,
         expandedPlanningInitiativeIds,
         planningDrawerDetail,
         planningNestedWorkstreamDetailId,
@@ -802,16 +830,11 @@ export function StandaloneLayout(props) {
         return map;
     }, [assigneeOptions]);
     const planningStructure = useMemo(() => {
-        const planningInitiatives = taskScope === 'deleted'
-            ? []
-            : props.initiatives.filter((initiative) => taskScope === 'archived'
-                ? Boolean(initiative.isArchived)
-                : !initiative.isArchived);
-        const planningWorkstreams = taskScope === 'deleted'
-            ? []
-            : props.workstreams.filter((workstream) => taskScope === 'archived'
-                ? Boolean(workstream.isArchived)
-                : !workstream.isArchived);
+        const planningScopedTasks = taskScope === 'archived'
+            ? archivedScopeAllTasks
+            : taskScope === 'deleted'
+                ? deletedScopeAllTasks
+                : props.tasks.filter((task) => !task.isArchived);
         const summarizeTasks = (scopeTasks) => {
             const taskCount = scopeTasks.length;
             const completedTaskCount = scopeTasks.filter((task) => task.isArchived || task.status === 'done' || task.status === 'cancelled').length;
@@ -827,7 +850,7 @@ export function StandaloneLayout(props) {
         const workstreamById = new Map();
         const initiativeById = new Map();
         const buildWorkstreamSummary = (workstream) => {
-            const scopedTasks = hierarchyTasks.filter((task) => (task.workstreamId || null) === workstream.id);
+            const scopedTasks = planningScopedTasks.filter((task) => (task.workstreamId || null) === workstream.id);
             const taskPreviews = scopedTasks.map((task) => ({
                 id: task.id,
                 referenceNumber: task.referenceNumber ?? null,
@@ -853,10 +876,10 @@ export function StandaloneLayout(props) {
             workstreamById.set(summary.id, summary);
             return summary;
         };
-        const initiatives = planningInitiatives.map((initiative) => {
-            const workstreams = planningWorkstreams
-                .filter((workstream) => (workstream.initiativeId || null) === initiative.id)
-                .map(buildWorkstreamSummary);
+        const allWorkstreamSummaries = props.workstreams.map(buildWorkstreamSummary);
+        const allInitiatives = props.initiatives.map((initiative) => {
+            const workstreams = allWorkstreamSummaries
+                .filter((workstream) => (workstream.initiativeId || null) === initiative.id);
             const initiativeScopedTasks = workstreams
                 .flatMap((workstream) => workstreamTaskIds.get(workstream.id) || [])
                 .map((taskId) => hierarchyTaskById.get(taskId))
@@ -878,9 +901,18 @@ export function StandaloneLayout(props) {
             initiativeById.set(initiativeSummary.id, initiativeSummary);
             return initiativeSummary;
         });
-        const standaloneWorkstreams = planningWorkstreams
+        const initiatives = taskScope === 'deleted'
+            ? []
+            : allInitiatives.filter((initiative) => taskScope === 'archived'
+                ? Boolean(initiative.isArchived)
+                : !initiative.isArchived);
+        const standaloneWorkstreams = allWorkstreamSummaries
             .filter((workstream) => !workstream.initiativeId)
-            .map(buildWorkstreamSummary);
+            .filter((workstream) => taskScope === 'deleted'
+            ? false
+            : taskScope === 'archived'
+                ? Boolean(workstream.isArchived)
+                : !workstream.isArchived);
         return {
             initiatives,
             standaloneWorkstreams,
@@ -890,7 +922,7 @@ export function StandaloneLayout(props) {
             workstreamById,
             initiativeById,
         };
-    }, [assigneeLabelByValue, hierarchyTaskById, hierarchyTasks, props.initiatives, props.workstreams, taskScope]);
+    }, [archivedScopeAllTasks, assigneeLabelByValue, deletedScopeAllTasks, hierarchyTaskById, props.initiatives, props.tasks, props.workstreams, taskScope]);
     const initiativeFilterOptions = useMemo(() => planningStructure.initiatives.map((initiative) => {
         const referenceLabel = formatInitiativeReference(initiative);
         return {
@@ -962,13 +994,6 @@ export function StandaloneLayout(props) {
             return exactInitiative;
         return resolveInitiativeReference(planningStructure.initiatives, planningDraftInitiativeId);
     }, [planningDraftInitiativeId, planningStructure.initiativeById, planningStructure.initiatives]);
-    useEffect(() => {
-        if (!planningDrawerOpen)
-            return;
-        setPlanningTreeCollapsed(false);
-        setPlanningPrimaryCollapsed(false);
-        setPlanningSecondaryCollapsed(false);
-    }, [planningDrawerOpen]);
     useEffect(() => {
         if (selectedPlanningInitiativeId && !planningStructure.initiativeById.has(selectedPlanningInitiativeId)) {
             setSelectedPlanningInitiativeId('');
@@ -976,23 +1001,7 @@ export function StandaloneLayout(props) {
         if (selectedPlanningWorkstreamId && !planningStructure.workstreamById.has(selectedPlanningWorkstreamId)) {
             setSelectedPlanningWorkstreamId('');
         }
-        if (planningDrawerDetail?.type === 'initiative' && !planningStructure.initiativeById.has(planningDrawerDetail.id)) {
-            setPlanningDrawerDetail(null);
-        }
-        if (planningDrawerDetail?.type === 'workstream' && !planningStructure.workstreamById.has(planningDrawerDetail.id)) {
-            setPlanningDrawerDetail(null);
-        }
-        if (planningNestedWorkstreamDetailId && !planningStructure.workstreamById.has(planningNestedWorkstreamDetailId)) {
-            setPlanningNestedWorkstreamDetailId(null);
-        }
-        if (planningSecondaryEditor?.mode === 'edit'
-            && !planningStructure.workstreamById.has(planningSecondaryEditor.targetId)) {
-            setPlanningSecondaryEditor(null);
-        }
     }, [
-        planningDrawerDetail,
-        planningNestedWorkstreamDetailId,
-        planningSecondaryEditor,
         planningStructure.initiativeById,
         planningStructure.workstreamById,
         selectedPlanningInitiativeId,
@@ -1059,6 +1068,29 @@ export function StandaloneLayout(props) {
             return !!task.dueDate && task.dueDate < todayDateOnly;
         }).length;
     }, [groupBy, hierarchyVisibleTasks, todayDateOnly]);
+    const normalizedAuthUserId = String(authUserId || '').trim();
+    const assignedTaskCount = useMemo(() => {
+        if (!normalizedAuthUserId || normalizedAuthUserId === 'anonymous')
+            return 0;
+        return tasks.filter((task) => {
+            const isTerminal = task.status === 'done' || task.status === 'cancelled';
+            if (isTerminal)
+                return false;
+            return String(task.assignee || '').trim() === normalizedAuthUserId;
+        }).length;
+    }, [normalizedAuthUserId, tasks]);
+    const assignedOverdueTaskCount = useMemo(() => {
+        if (!normalizedAuthUserId || normalizedAuthUserId === 'anonymous')
+            return 0;
+        return tasks.filter((task) => {
+            const isTerminal = task.status === 'done' || task.status === 'cancelled';
+            if (isTerminal)
+                return false;
+            if (String(task.assignee || '').trim() !== normalizedAuthUserId)
+                return false;
+            return !!task.dueDate && task.dueDate < todayDateOnly;
+        }).length;
+    }, [normalizedAuthUserId, tasks, todayDateOnly]);
     const expiredColumnCandidates = useMemo(() => {
         if (groupBy !== 'schedule')
             return [];
@@ -1168,7 +1200,10 @@ export function StandaloneLayout(props) {
     const [showCreateWorkspaceConfirm, setShowCreateWorkspaceConfirm] = useState(false);
     const [showTeamManagementModal, setShowTeamManagementModal] = useState(false);
     const [teamManagementTab, setTeamManagementTab] = useState('members');
+    const [teamWorkspaceRole, setTeamWorkspaceRole] = useState(null);
     const [teamPlanMode, setTeamPlanMode] = useState('unknown');
+    const [teamManagementAccessLoading, setTeamManagementAccessLoading] = useState(false);
+    const [teamManagementAccessError, setTeamManagementAccessError] = useState(null);
     const [teamMgmtError, setTeamMgmtError] = useState(null);
     const [teamUsersLoading, setTeamUsersLoading] = useState(false);
     const [teamUsers, setTeamUsers] = useState([]);
@@ -1191,11 +1226,20 @@ export function StandaloneLayout(props) {
     const [billingNotice, setBillingNotice] = useState(null);
     const [billingIntervalChoice, setBillingIntervalChoice] = useState('month');
     const [profileDisplayNameDraft, setProfileDisplayNameDraft] = useState('');
+    const [profileAvatarPreviewUrl, setProfileAvatarPreviewUrl] = useState('');
+    const [profileAvatarDraftId, setProfileAvatarDraftId] = useState(null);
+    const [profileAvatarBusy, setProfileAvatarBusy] = useState(false);
     const [profileSaveBusy, setProfileSaveBusy] = useState(false);
     const [profileSaveError, setProfileSaveError] = useState(null);
     const [profileSaveNotice, setProfileSaveNotice] = useState(null);
     const TEAM_AUDIT_PAGE_SIZE = 25;
     const accountMenuRef = useRef(null);
+    const profileAvatarInputRef = useRef(null);
+    const accountSurfaceOpenStartedAtRef = useRef(null);
+    const accountSurfacePendingRef = useRef({
+        billing: false,
+        teamManagement: false
+    });
     // showSearch state removed - search always visible in actions area
     useEffect(() => {
         if (!showAccountMenu)
@@ -1239,20 +1283,29 @@ export function StandaloneLayout(props) {
         const fallbackId = String(currentWorkspaceId || '').trim();
         return fallbackId || 'Workspace';
     }, [availableWorkspaces, currentWorkspaceId, projectName, runtimeMode]);
-    const canManageTeamWorkspace = computeCanManageTeamWorkspace(canAccessCloudTeamManagement, currentWorkspaceRole);
-    const canOpenTeamManagement = computeCanOpenTeamManagement(canAccessCloudTeamManagement, currentWorkspaceRole, teamPlanMode);
+    const canManageTeamWorkspace = computeCanManageTeamWorkspace(canAccessCloudTeamManagement, teamWorkspaceRole);
+    const canOpenTeamManagement = computeCanOpenTeamManagement(canAccessCloudTeamManagement, teamWorkspaceRole, teamPlanMode);
     const authDisplayName = String(authUserDisplayName || '').trim();
+    const authAvatarUrl = String(authUserAvatarUrl || '').trim();
     const authEmailLabel = String(authUserEmail || '').trim();
     const authIdentityLabel = authDisplayName || authEmailLabel;
     const hasAuthIdentity = authIdentityLabel.length > 0;
     const hasAuthEmail = authEmailLabel.length > 0;
     const accountBadgeLabel = (authIdentityLabel || authEmailLabel || 'U').trim();
     const accountBadgeInitial = accountBadgeLabel.charAt(0).toUpperCase() || 'U';
+    const accountAvatarUrl = authAvatarUrl;
+    const profileAvatarDisplayUrl = String(profileAvatarPreviewUrl || authAvatarUrl).trim();
     const subscriptionLabel = String(billingStatus?.planName || billingStatus?.planId || '').trim();
     const hasSubscription = subscriptionLabel.length > 0;
     const teamManagementWorkspaceId = String(authWorkspaceId || currentWorkspaceId || '').trim();
     const runtimeLabel = runtimeMode === 'cloud' ? 'CLOUD' : 'LOCAL';
     const apiBaseUrl = props.config?.apiBaseUrl || '';
+    const accountCapabilityApiBaseUrl = useMemo(() => {
+        const preferredBase = runtimeMode === 'local'
+            ? (props.config?.cloudAuthBaseUrl || props.config?.apiBaseUrl || '')
+            : (props.config?.apiBaseUrl || props.config?.cloudAuthBaseUrl || '');
+        return String(preferredBase || '').trim().replace(/\/+$/, '');
+    }, [props.config?.apiBaseUrl, props.config?.cloudAuthBaseUrl, runtimeMode]);
     const billingApiBaseUrl = useMemo(() => {
         const preferredBase = runtimeMode === 'local'
             ? (props.config?.cloudAuthBaseUrl || props.config?.apiBaseUrl || '')
@@ -1261,10 +1314,10 @@ export function StandaloneLayout(props) {
     }, [props.config?.apiBaseUrl, props.config?.cloudAuthBaseUrl, runtimeMode]);
     const buildBillingApiUrl = useCallback((path) => {
         const normalizedPath = String(path || '').trim();
-        if (!billingApiBaseUrl)
+        if (!accountCapabilityApiBaseUrl)
             return normalizedPath;
-        return `${billingApiBaseUrl}${normalizedPath.startsWith('/') ? normalizedPath : `/${normalizedPath}`}`;
-    }, [billingApiBaseUrl]);
+        return `${accountCapabilityApiBaseUrl}${normalizedPath.startsWith('/') ? normalizedPath : `/${normalizedPath}`}`;
+    }, [accountCapabilityApiBaseUrl]);
     const connectedEnvironmentLabel = useMemo(() => resolveConnectedEnvironmentLabel(props.config?.cloudEnvironment, [
         String(props.config?.cloudBaseUrl || ''),
         String(props.config?.cloudAuthBaseUrl || ''),
@@ -1282,9 +1335,141 @@ export function StandaloneLayout(props) {
         if (!showEditProfileModal)
             return;
         setProfileDisplayNameDraft(authDisplayName);
+        setProfileAvatarPreviewUrl(authAvatarUrl);
+        setProfileAvatarDraftId(null);
+        setProfileSaveError(null);
+        setProfileSaveNotice(null);
+    }, [authAvatarUrl, authDisplayName, showEditProfileModal]);
+    const discardProfileAvatarDraft = useCallback(async (draftId) => {
+        const normalizedDraftId = String(draftId || '').trim();
+        if (!normalizedDraftId || !cloudAuthConfigured)
+            return;
+        try {
+            const baseUrl = runtimeMode === 'local'
+                ? (props.config?.cloudAuthBaseUrl || props.config?.apiBaseUrl || '')
+                : (props.config?.apiBaseUrl || props.config?.cloudAuthBaseUrl || '');
+            await fetchTaskforceApi('/api/taskforce/auth/profile/avatar/discard', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                credentials: 'include',
+                body: JSON.stringify({ draftId: normalizedDraftId })
+            }, baseUrl);
+        }
+        catch {
+            // Best-effort cleanup only.
+        }
+    }, [cloudAuthConfigured, props.config?.apiBaseUrl, props.config?.cloudAuthBaseUrl, runtimeMode]);
+    const closeEditProfileModal = useCallback(() => {
+        const pendingDraftId = profileAvatarDraftId;
+        setShowEditProfileModal(false);
         setProfileSaveError(null);
         setProfileSaveNotice(null);
-    }, [authDisplayName, showEditProfileModal]);
+        setProfileAvatarDraftId(null);
+        setProfileAvatarPreviewUrl(authAvatarUrl);
+        if (pendingDraftId) {
+            void discardProfileAvatarDraft(pendingDraftId);
+        }
+    }, [authAvatarUrl, discardProfileAvatarDraft, profileAvatarDraftId]);
+    const handleProfileAvatarSelected = useCallback(async (file) => {
+        if (!file || !cloudAuthConfigured)
+            return;
+        if (!file.type.startsWith('image/')) {
+            setProfileSaveError('Profile photo must be an image file.');
+            setProfileSaveNotice(null);
+            return;
+        }
+        if (file.size > PROFILE_AVATAR_MAX_BYTES) {
+            setProfileSaveError('Profile photo must be 5 MB or smaller.');
+            setProfileSaveNotice(null);
+            return;
+        }
+        setProfileAvatarBusy(true);
+        setProfileSaveError(null);
+        setProfileSaveNotice(null);
+        try {
+            const baseUrl = runtimeMode === 'local'
+                ? (props.config?.cloudAuthBaseUrl || props.config?.apiBaseUrl || '')
+                : (props.config?.apiBaseUrl || props.config?.cloudAuthBaseUrl || '');
+            const initRes = await fetchTaskforceApi('/api/taskforce/auth/profile/avatar/init', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                credentials: 'include',
+                body: JSON.stringify({
+                    originalName: file.name,
+                    mimeType: file.type,
+                    size: file.size
+                })
+            }, baseUrl);
+            const initData = await initRes.json().catch(() => ({}));
+            if (!initRes.ok || !initData?.success || typeof initData?.uploadUrl !== 'string' || typeof initData?.relativePath !== 'string') {
+                throw new Error(initData?.error || 'Failed to start avatar upload.');
+            }
+            const uploadRes = await fetch(initData.uploadUrl, {
+                method: String(initData.method || 'PUT'),
+                headers: initData.headers || { 'Content-Type': file.type || 'application/octet-stream' },
+                body: file
+            });
+            if (!uploadRes.ok) {
+                throw new Error('Failed to upload avatar.');
+            }
+            const finalizeRes = await fetchTaskforceApi('/api/taskforce/auth/profile/avatar/finalize', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                credentials: 'include',
+                body: JSON.stringify({
+                    draftId: initData.draftId,
+                    relativePath: initData.relativePath
+                })
+            }, baseUrl);
+            const finalizeData = await finalizeRes.json().catch(() => ({}));
+            if (!finalizeRes.ok || !finalizeData?.success || typeof finalizeData?.draftId !== 'string') {
+                throw new Error(finalizeData?.error || 'Failed to finalize avatar upload.');
+            }
+            const previousDraftId = profileAvatarDraftId;
+            setProfileAvatarDraftId(finalizeData.draftId);
+            setProfileAvatarPreviewUrl(typeof finalizeData?.avatarUrl === 'string' ? finalizeData.avatarUrl : '');
+            setProfileSaveNotice('Profile photo ready to save.');
+            if (previousDraftId && previousDraftId !== finalizeData.draftId) {
+                void discardProfileAvatarDraft(previousDraftId);
+            }
+        }
+        catch (error) {
+            setProfileSaveError(error instanceof Error ? error.message : 'Failed to upload profile photo.');
+        }
+        finally {
+            setProfileAvatarBusy(false);
+            if (profileAvatarInputRef.current) {
+                profileAvatarInputRef.current.value = '';
+            }
+        }
+    }, [
+        cloudAuthConfigured,
+        discardProfileAvatarDraft,
+        profileAvatarDraftId,
+        props.config?.apiBaseUrl,
+        props.config?.cloudAuthBaseUrl,
+        runtimeMode
+    ]);
+    const handleDiscardPendingProfileAvatar = useCallback(() => {
+        if (!profileAvatarDraftId)
+            return;
+        const draftId = profileAvatarDraftId;
+        setProfileAvatarDraftId(null);
+        setProfileAvatarPreviewUrl(authAvatarUrl);
+        setProfileSaveNotice(null);
+        setProfileSaveError(null);
+        void discardProfileAvatarDraft(draftId);
+    }, [authAvatarUrl, discardProfileAvatarDraft, profileAvatarDraftId]);
+    const handleRemoveProfileAvatar = useCallback(() => {
+        const pendingDraftId = profileAvatarDraftId;
+        setProfileAvatarDraftId(null);
+        setProfileAvatarPreviewUrl('');
+        setProfileSaveNotice(authAvatarUrl ? 'Profile photo will be removed when you save.' : null);
+        setProfileSaveError(null);
+        if (pendingDraftId) {
+            void discardProfileAvatarDraft(pendingDraftId);
+        }
+    }, [authAvatarUrl, discardProfileAvatarDraft, profileAvatarDraftId]);
     const handleSaveProfile = useCallback(async () => {
         const trimmedDisplayName = profileDisplayNameDraft.trim();
         if (!trimmedDisplayName) {
@@ -1295,53 +1480,111 @@ export function StandaloneLayout(props) {
         setProfileSaveBusy(true);
         setProfileSaveError(null);
         setProfileSaveNotice(null);
-        const result = await updateCurrentUserProfile({ displayName: trimmedDisplayName });
+        const result = await updateCurrentUserProfile({
+            displayName: trimmedDisplayName,
+            avatarDraftId: profileAvatarDraftId,
+            clearAvatar: !profileAvatarDraftId && !profileAvatarPreviewUrl && Boolean(authAvatarUrl)
+        });
         if (!result.success) {
             setProfileSaveError(result.error || 'Failed to update profile.');
             setProfileSaveBusy(false);
             return;
         }
         setProfileSaveNotice('Profile updated.');
+        setProfileAvatarDraftId(null);
+        setProfileAvatarPreviewUrl('');
         setProfileSaveBusy(false);
         setShowEditProfileModal(false);
-    }, [profileDisplayNameDraft, updateCurrentUserProfile]);
+    }, [authAvatarUrl, profileAvatarDraftId, profileAvatarPreviewUrl, profileDisplayNameDraft, updateCurrentUserProfile]);
     const teamAdminHeaders = useCallback(() => {
         const headers = {};
         const workspaceId = String(teamManagementWorkspaceId || '').trim();
         if (workspaceId)
             headers['x-taskforce-workspace-id'] = workspaceId;
+        if (currentWorkspaceRole === 'owner'
+            || currentWorkspaceRole === 'admin'
+            || currentWorkspaceRole === 'member'
+            || currentWorkspaceRole === 'read-only') {
+            headers['x-taskforce-workspace-role'] = currentWorkspaceRole;
+        }
         return headers;
-    }, [teamManagementWorkspaceId]);
+    }, [currentWorkspaceRole, teamManagementWorkspaceId]);
+    const startAccountSurfaceTiming = useCallback((surface) => {
+        const expectsBilling = isAuthenticated;
+        const expectsTeamManagement = canAccessCloudTeamManagement;
+        accountSurfaceOpenStartedAtRef.current = getTimingNow();
+        accountSurfacePendingRef.current = {
+            billing: expectsBilling,
+            teamManagement: expectsTeamManagement
+        };
+        logBootstrapDebug('account_surface_opened', {
+            surface,
+            expectsBilling,
+            expectsTeamManagement
+        });
+        if (!expectsBilling && !expectsTeamManagement) {
+            logBootstrapDebug('account_surface_ready', {
+                surface,
+                durationMs: 0,
+                teamManagementVisible: false,
+                billingPlanId: null
+            });
+            accountSurfaceOpenStartedAtRef.current = null;
+        }
+    }, [canAccessCloudTeamManagement, isAuthenticated]);
+    const markAccountSurfaceLoadSettled = useCallback((kind) => {
+        const pending = accountSurfacePendingRef.current;
+        pending[kind] = false;
+        if (pending.billing || pending.teamManagement)
+            return;
+        const startedAt = accountSurfaceOpenStartedAtRef.current;
+        if (startedAt === null)
+            return;
+        logBootstrapDebug('account_surface_ready', {
+            surface: showAccountHub ? 'account_hub' : (showAccountMenu ? 'account_menu' : 'closed'),
+            durationMs: Math.round(getTimingNow() - startedAt),
+            teamManagementVisible: canOpenTeamManagement,
+            billingPlanId: String(billingStatus?.planId || '').trim() || null
+        });
+        accountSurfaceOpenStartedAtRef.current = null;
+    }, [billingStatus?.planId, canOpenTeamManagement, showAccountHub, showAccountMenu]);
     const loadBillingStatus = useCallback(async () => {
+        const billingStatusPath = '/api/taskforce/billing/status';
+        const billingStatusUrl = buildBillingApiUrl(billingStatusPath);
         if (!isAuthenticated) {
             setBillingStatus(null);
+            setBillingError(null);
+            invalidateBillingStatusCache(billingStatusUrl);
+            markAccountSurfaceLoadSettled('billing');
             return null;
         }
+        const startedAt = getTimingNow();
         setBillingLoading(true);
         setBillingError(null);
         try {
-            const res = await fetch(buildBillingApiUrl('/api/taskforce/billing/status'), {
-                method: 'GET',
-                credentials: 'include'
-            });
-            const payload = await res.json().catch(() => ({}));
-            if (!res.ok) {
-                setBillingStatus(null);
-                setBillingError(String(payload?.error || 'Failed to load billing status.'));
-                return null;
-            }
+            const payload = await loadBillingStatusCached(billingStatusUrl);
             setBillingStatus(payload);
+            logBootstrapDebug('account_billing_status_resolved', {
+                durationMs: Math.round(getTimingNow() - startedAt),
+                planId: String(payload?.planId || '').trim() || null,
+                gate: String(payload?.gate || '').trim() || null
+            });
             return payload;
         }
-        catch {
+        catch (error) {
             setBillingStatus(null);
-            setBillingError('Failed to load billing status.');
+            setBillingError(error instanceof Error ? error.message : 'Failed to load billing status.');
+            logBootstrapDebug('account_billing_status_failed', {
+                durationMs: Math.round(getTimingNow() - startedAt),
+                error: error instanceof Error ? error.message : 'Failed to load billing status.'
+            });
             return null;
         }
         finally {
             setBillingLoading(false);
+            markAccountSurfaceLoadSettled('billing');
         }
-    }, [buildBillingApiUrl, isAuthenticated]);
+    }, [buildBillingApiUrl, isAuthenticated, markAccountSurfaceLoadSettled]);
     const handleStartCheckout = useCallback(async () => {
         const params = new URLSearchParams();
         params.set('screen', 'plans');
@@ -1401,6 +1644,7 @@ export function StandaloneLayout(props) {
                 return;
             }
             setBillingNotice('Subscription updated.');
+            invalidateBillingStatusCache(buildBillingApiUrl('/api/taskforce/billing/status'));
             await loadBillingStatus();
         }
         catch {
@@ -1410,45 +1654,88 @@ export function StandaloneLayout(props) {
             setBillingActionBusy(false);
         }
     }, [billingIntervalChoice, billingStatus?.planVersionId, buildBillingApiUrl, loadBillingStatus]);
-    const loadTeamPlanMode = useCallback(async () => {
-        if (!canManageTeamWorkspace) {
+    const loadTeamManagementAccess = useCallback(async () => {
+        if (!canAccessCloudTeamManagement) {
+            setTeamWorkspaceRole(null);
             setTeamPlanMode('unknown');
-            return 'unknown';
-        }
+            setTeamManagementAccessLoading(false);
+            setTeamManagementAccessError(null);
+            markAccountSurfaceLoadSettled('teamManagement');
+            return { role: null, teamPlanMode: 'unknown', allowed: false };
+        }
+        const startedAt = getTimingNow();
+        setTeamManagementAccessLoading(true);
+        setTeamManagementAccessError(null);
         try {
-            const res = await fetch('/api/taskforce/account/entitlements', {
+            const res = await fetchTaskforceApi('/api/taskforce/account/team-management-access', {
                 method: 'GET',
                 credentials: 'include',
                 headers: teamAdminHeaders()
-            });
+            }, accountCapabilityApiBaseUrl);
             const payload = await res.json().catch(() => ({}));
             if (!res.ok) {
+                setTeamWorkspaceRole(null);
                 setTeamPlanMode('unknown');
-                return 'unknown';
+                setTeamManagementAccessError(String(payload?.error || 'Failed to load team management access.'));
+                logBootstrapDebug('team_management_access_failed', {
+                    durationMs: Math.round(getTimingNow() - startedAt),
+                    status: res.status
+                });
+                return { role: null, teamPlanMode: 'unknown', allowed: false };
             }
-            const nextMode = resolveTeamPlanModeFromEntitlements(payload);
+            const nextRole = payload?.role === 'owner' || payload?.role === 'admin' || payload?.role === 'member' || payload?.role === 'read-only'
+                ? payload.role
+                : null;
+            const nextMode = payload?.teamPlanMode === 'team' || payload?.teamPlanMode === 'personal'
+                ? payload.teamPlanMode
+                : 'unknown';
+            const allowed = payload?.allowed === true;
+            setTeamWorkspaceRole(nextRole);
             setTeamPlanMode(nextMode);
-            return nextMode;
+            setTeamManagementAccessError(null);
+            logBootstrapDebug('team_management_access_loaded', {
+                durationMs: Math.round(getTimingNow() - startedAt),
+                role: nextRole,
+                teamPlanMode: nextMode,
+                allowed
+            });
+            return { role: nextRole, teamPlanMode: nextMode, allowed };
         }
-        catch {
+        catch (error) {
+            setTeamWorkspaceRole(null);
             setTeamPlanMode('unknown');
-            return 'unknown';
+            setTeamManagementAccessError(error instanceof Error ? error.message : 'Failed to load team management access.');
+            logBootstrapDebug('team_management_access_failed', {
+                durationMs: Math.round(getTimingNow() - startedAt),
+                error: error instanceof Error ? error.message : 'Failed to load team management access.'
+            });
+            return { role: null, teamPlanMode: 'unknown', allowed: false };
         }
-    }, [canManageTeamWorkspace, teamAdminHeaders]);
+        finally {
+            setTeamManagementAccessLoading(false);
+            markAccountSurfaceLoadSettled('teamManagement');
+        }
+    }, [accountCapabilityApiBaseUrl, canAccessCloudTeamManagement, markAccountSurfaceLoadSettled, teamAdminHeaders]);
     useEffect(() => {
         if (!showAccountMenu && !showTeamManagementModal && !showAccountHub)
             return;
-        void loadTeamPlanMode();
-    }, [showAccountHub, showAccountMenu, showTeamManagementModal, loadTeamPlanMode]);
+        void loadTeamManagementAccess();
+    }, [showAccountHub, showAccountMenu, showTeamManagementModal, loadTeamManagementAccess]);
     useEffect(() => {
         if (!isAuthenticated || !authSessionResolved)
             return;
-        if (!canManageTeamWorkspace) {
+        if (!canAccessCloudTeamManagement) {
+            setTeamWorkspaceRole(null);
             setTeamPlanMode('unknown');
             return;
         }
-        void loadTeamPlanMode();
-    }, [authSessionResolved, canManageTeamWorkspace, isAuthenticated, loadTeamPlanMode]);
+        void loadTeamManagementAccess();
+    }, [authSessionResolved, canAccessCloudTeamManagement, isAuthenticated, loadTeamManagementAccess]);
+    useEffect(() => {
+        if (!isAuthenticated || !authSessionResolved)
+            return;
+        void loadBillingStatus();
+    }, [authSessionResolved, isAuthenticated, loadBillingStatus]);
     useEffect(() => {
         if (!showAccountHub && !showAccountMenu)
             return;
@@ -1582,12 +1869,12 @@ export function StandaloneLayout(props) {
         setShowAccountMenu(false);
         setShowTeamManagementModal(true);
         setTeamManagementTab('members');
-        const resolvedMode = await loadTeamPlanMode();
-        if (resolvedMode !== 'team')
+        const access = await loadTeamManagementAccess();
+        if (!access.allowed)
             return;
         await loadTeamUsers();
         await loadTeamAuditPage(0);
-    }, [loadTeamAuditPage, loadTeamPlanMode, loadTeamUsers]);
+    }, [loadTeamAuditPage, loadTeamManagementAccess, loadTeamUsers]);
     const executeTeamUserAction = useCallback(async (userId, fn) => {
         setTeamMgmtError(null);
         setTeamActionBusyUserId(userId);
@@ -1891,12 +2178,17 @@ export function StandaloneLayout(props) {
     const activeReferenceMismatchSummaries = useMemo(() => (activeReferenceMismatchEvents.map((event, index) => {
         const details = event.details && typeof event.details === 'object' ? event.details : null;
         const pathValue = String(details?.path || '').trim();
+        const referenceLabelValue = String(details?.referenceLabel || '').trim();
+        const taskTitleValue = String(details?.taskTitle || details?.existingTaskTitle || '').trim();
         const existingRefValue = Number(details?.existingReferenceNumber);
         const incomingRefValue = Number(details?.incomingReferenceNumber);
-        const pathLabel = pathValue || `Mismatch ${index + 1}`;
-        const refsLabel = (Number.isFinite(existingRefValue) || Number.isFinite(incomingRefValue))
+        const pathLabel = pathValue || taskTitleValue || referenceLabelValue || `Mismatch ${index + 1}`;
+        const refsLabel = (Number.isFinite(existingRefValue)
+            || Number.isFinite(incomingRefValue))
             ? `Existing ${Number.isFinite(existingRefValue) ? existingRefValue : '?'} vs incoming ${Number.isFinite(incomingRefValue) ? incomingRefValue : '?'}`
-            : null;
+            : referenceLabelValue
+                ? `Both claimed ${referenceLabelValue}`
+                : null;
         return {
             key: getSyncEventStableKey(event, index),
             pathLabel,
@@ -2255,20 +2547,32 @@ export function StandaloneLayout(props) {
     // References: isAuthenticated, authIdentityLabel, billingStatus, runtimeLabel,
     // connectedEnvironmentLabel, canManageCloudWorkspaces, workspaceActionBusy,
     // setWorkspacePanelOpen, canOpenTeamManagement, openTeamManagementModal, and more.
-    const accountMenuControl = (_jsxs("div", { className: accountStyles.accountMenuWrap, ref: accountMenuRef, children: [_jsx("button", { className: `tf-control-icon ${accountStyles.avatarBtn}`, onClick: () => setShowAccountMenu(prev => !prev), title: isAuthenticated ? 'Account' : 'Account (Not signed in)', "aria-label": isAuthenticated ? 'Account' : 'Account (Not signed in)', "aria-haspopup": "menu", "aria-expanded": showAccountMenu, children: _jsx("span", { className: accountStyles.avatarBadge, "aria-hidden": "true", children: isAuthenticated ? accountBadgeInitial : '?' }) }), showAccountMenu && (_jsxs("div", { className: accountStyles.accountMenu, role: "menu", "aria-label": "Account menu", children: [_jsxs("div", { className: accountStyles.accountMenuSection, children: [_jsx("div", { className: accountStyles.accountMenuSectionLabel, children: "Account" }), _jsx("div", { className: accountStyles.accountMenuHint, children: isAuthBootstrapPending
+    const accountMenuControl = (_jsxs("div", { className: accountStyles.accountMenuWrap, ref: accountMenuRef, children: [_jsx("button", { className: `tf-control-icon ${accountStyles.avatarBtn}`, onClick: () => {
+                    setShowAccountMenu((prev) => {
+                        const next = !prev;
+                        if (next) {
+                            startAccountSurfaceTiming('account_menu');
+                        }
+                        else {
+                            accountSurfaceOpenStartedAtRef.current = null;
+                            accountSurfacePendingRef.current = { billing: false, teamManagement: false };
+                        }
+                        return next;
+                    });
+                }, title: isAuthenticated ? 'Account' : 'Account (Not signed in)', "aria-label": isAuthenticated ? 'Account' : 'Account (Not signed in)', "aria-haspopup": "menu", "aria-expanded": showAccountMenu, children: _jsx("span", { className: accountStyles.avatarBadge, "aria-hidden": "true", children: isAuthenticated && accountAvatarUrl ? (_jsx("img", { src: accountAvatarUrl, alt: "", className: accountStyles.avatarImage })) : (isAuthenticated ? accountBadgeInitial : '?') }) }), showAccountMenu && (_jsxs("div", { className: accountStyles.accountMenu, role: "menu", "aria-label": "Account menu", children: [_jsxs("div", { className: accountStyles.accountMenuSection, children: [_jsx("div", { className: accountStyles.accountMenuSectionLabel, children: "Account" }), _jsx("div", { className: accountStyles.accountMenuHint, children: isAuthBootstrapPending
                                     ? 'Checking sign-in status...'
                                     : isAuthenticated
                                         ? (_jsx(_Fragment, { children: hasAuthIdentity
-                                                ? (_jsx(_Fragment, { children: _jsxs("span", { className: accountStyles.accountIdentityBlock, children: [_jsx("span", { className: accountStyles.accountIdentityEmail, children: authIdentityLabel }), hasAuthEmail && authDisplayName && (_jsxs("span", { className: accountStyles.accountIdentityMetaLine, children: [_jsx("span", { className: accountStyles.accountIdentityMetaLabel, children: "Email" }), _jsx("span", { className: accountStyles.accountIdentityMetaValue, children: authEmailLabel })] })), hasSubscription && (_jsxs("button", { "aria-label": `Subscription ${subscriptionLabel}`, className: `${accountStyles.accountIdentityMetaLine} ${accountStyles.accountIdentityMetaAction}`, onClick: () => {
+                                                ? (_jsx(_Fragment, { children: _jsxs("span", { className: accountStyles.accountIdentityBlock, children: [_jsx("span", { className: accountStyles.accountIdentityEmail, children: authIdentityLabel }), hasAuthEmail && authDisplayName && (_jsxs("span", { className: accountStyles.accountIdentityMetaLine, children: [_jsx("span", { className: accountStyles.accountIdentityMetaLabel, children: "Email" }), _jsx("span", { className: accountStyles.accountIdentityMetaValue, children: authEmailLabel })] })), billingLoading ? (_jsxs("span", { className: accountStyles.accountIdentityMetaLine, children: [_jsx("span", { className: accountStyles.accountIdentityMetaLabel, children: "Subscription" }), _jsx("span", { className: accountStyles.accountIdentityMetaValue, children: "Loading\u2026" })] })) : hasSubscription ? (_jsxs("button", { "aria-label": `Subscription ${subscriptionLabel}`, className: `${accountStyles.accountIdentityMetaLine} ${accountStyles.accountIdentityMetaAction}`, onClick: () => {
                                                                     setShowAccountMenu(false);
                                                                     openPlansScreen();
-                                                                }, type: "button", children: [_jsx("span", { className: accountStyles.accountIdentityMetaLabel, children: "Subscription" }), _jsx("span", { className: accountStyles.accountIdentityMetaValue, children: subscriptionLabel })] })), _jsxs("span", { className: accountStyles.accountIdentityMetaLine, children: [_jsx("span", { className: accountStyles.accountIdentityMetaLabel, children: "Runtime" }), _jsx("span", { className: accountStyles.accountIdentityMetaValue, children: runtimeLabel })] }), _jsxs("span", { className: accountStyles.accountIdentityMetaLine, children: [_jsx("span", { className: accountStyles.accountIdentityMetaLabel, children: "Environment" }), _jsx("span", { className: accountStyles.accountIdentityMetaValue, children: connectedEnvironmentLabel })] })] }) }))
+                                                                }, type: "button", children: [_jsx("span", { className: accountStyles.accountIdentityMetaLabel, children: "Subscription" }), _jsx("span", { className: accountStyles.accountIdentityMetaValue, children: subscriptionLabel })] })) : billingError ? (_jsxs("span", { className: accountStyles.accountIdentityMetaLine, children: [_jsx("span", { className: accountStyles.accountIdentityMetaLabel, children: "Subscription" }), _jsx("span", { className: accountStyles.accountIdentityMetaValue, children: "Unavailable" })] })) : null, _jsxs("span", { className: accountStyles.accountIdentityMetaLine, children: [_jsx("span", { className: accountStyles.accountIdentityMetaLabel, children: "Runtime" }), _jsx("span", { className: accountStyles.accountIdentityMetaValue, children: runtimeLabel })] }), _jsxs("span", { className: accountStyles.accountIdentityMetaLine, children: [_jsx("span", { className: accountStyles.accountIdentityMetaLabel, children: "Environment" }), _jsx("span", { className: accountStyles.accountIdentityMetaValue, children: connectedEnvironmentLabel })] })] }) }))
                                                 : 'Signed in' }))
                                         : 'Not signed in' })] }), canManageCloudWorkspaces && (_jsxs("div", { className: accountStyles.accountMenuSection, children: [_jsx("div", { className: accountStyles.accountMenuSectionLabel, children: "Workspaces (Owned + Invited)" }), availableWorkspaces.length === 0 && (_jsx("div", { className: accountStyles.accountMenuHint, children: "No workspaces found for this account yet." })), availableWorkspaces.map((workspace) => (_jsxs("button", { className: `${accountStyles.accountMenuItem} ${workspace.id === currentWorkspaceId ? accountStyles.accountMenuItemActive : ''}`, onClick: () => handleSwitchWorkspace(workspace.id), role: "menuitem", disabled: workspaceActionBusy || workspace.id === currentWorkspaceId, title: workspace.description || workspace.name, children: [_jsx(Folder, { size: 15 }), _jsxs("span", { style: { display: 'flex', flexDirection: 'column', gap: '2px' }, children: [_jsx("span", { children: workspace.name }), _jsx("span", { className: accountStyles.accountMenuMeta, children: workspace.role })] })] }, workspace.id))), _jsxs("button", { className: accountStyles.accountMenuItem, onClick: () => {
                                     setWorkspaceActionError('');
                                     setShowCreateWorkspaceConfirm(true);
                                     setShowAccountMenu(false);
-                                }, role: "menuitem", disabled: workspaceActionBusy, children: [_jsx(Plus, { size: 15 }), "Create Workspace"] }), workspaceActionError && (_jsx("div", { className: accountStyles.accountMenuError, children: workspaceActionError }))] })), canOpenTeamManagement && (_jsxs("button", { className: accountStyles.accountMenuItem, onClick: () => { void openTeamManagementModal(); }, role: "menuitem", children: [_jsx(Users, { size: 15 }), "Team Management"] })), isAuthenticated && (_jsxs("button", { className: accountStyles.accountMenuItem, onClick: () => {
+                                }, role: "menuitem", disabled: workspaceActionBusy, children: [_jsx(Plus, { size: 15 }), "Create Workspace"] }), workspaceActionError && (_jsx("div", { className: accountStyles.accountMenuError, children: workspaceActionError }))] })), teamManagementAccessLoading ? (_jsx("div", { className: accountStyles.accountMenuHint, children: "Resolving team management access..." })) : canOpenTeamManagement ? (_jsxs("button", { className: accountStyles.accountMenuItem, onClick: () => { void openTeamManagementModal(); }, role: "menuitem", children: [_jsx(Users, { size: 15 }), "Team Management"] })) : teamManagementAccessError ? (_jsx("div", { className: accountStyles.accountMenuHint, children: "Team Management unavailable right now." })) : null, isAuthenticated && (_jsxs("button", { className: accountStyles.accountMenuItem, onClick: () => {
                             setShowAccountMenu(false);
                             setShowEditProfileModal(true);
                         }, role: "menuitem", children: [_jsx(User, { size: 15 }), "Edit Profile"] })), _jsxs("button", { className: accountStyles.accountMenuItem, onClick: () => {
@@ -2276,6 +2580,7 @@ export function StandaloneLayout(props) {
                             openPlansScreen();
                         }, role: "menuitem", children: [_jsx(Layers, { size: 15 }), "Plans"] }), _jsxs("button", { className: accountStyles.accountMenuItem, onClick: () => {
                             setShowAccountMenu(false);
+                            startAccountSurfaceTiming('account_hub');
                             setShowAccountHub(true);
                         }, role: "menuitem", children: [_jsx(User, { size: 15 }), "Account Hub"] }), _jsxs("button", { className: accountStyles.accountMenuItem, onClick: () => {
                             setShowAccountMenu(false);
@@ -2908,7 +3213,7 @@ export function StandaloneLayout(props) {
     const workspacePrimaryAction = workspaceChromeDefinition.primaryAction
         ? primaryActionRegistry[workspaceChromeDefinition.primaryAction]
         : null;
-    return (_jsxs("div", { className: `${shellStyles.standaloneWrapper} ${zenMode ? styles.zenModeEnabled : ''}`, "data-theme": currentTheme, children: [_jsx(AppShellHeader, { projectName: projectName, currentWorkspaceId: currentWorkspaceId, runtimeMode: runtimeMode, theme: currentTheme, meta: isPlansScreen ? null : (_jsxs(_Fragment, { children: [_jsx("span", { className: styles.taskCountBadge, title: activeCountTitle, children: activeCountLabel }), shouldShowSyncStatus && (_jsx("button", { className: "tf-control-icon", onClick: () => setShowSyncStatusModal(true), title: `Sync manager: ${syncStatusMeta.label} | Last success: ${formattedLastSyncTime}`, style: {
+    return (_jsxs("div", { className: `${shellStyles.standaloneWrapper} ${zenMode ? styles.zenModeEnabled : ''}`, "data-theme": currentTheme, children: [_jsx(AppShellHeader, { projectName: projectName, currentWorkspaceId: currentWorkspaceId, runtimeMode: runtimeMode, theme: currentTheme, meta: isPlansScreen ? null : (_jsxs(_Fragment, { children: [_jsx("span", { className: styles.taskCountBadge, title: activeCountTitle, children: activeCountLabel }), normalizedAuthUserId && normalizedAuthUserId !== 'anonymous' && (_jsxs(_Fragment, { children: [_jsxs("span", { className: styles.taskCountBadge, title: "Open tasks assigned to you", children: ["Mine ", assignedTaskCount] }), _jsxs("span", { className: styles.taskCountBadge, title: "Your open tasks with overdue due dates", children: ["Overdue ", assignedOverdueTaskCount] })] })), shouldShowSyncStatus && (_jsx("button", { className: "tf-control-icon", onClick: () => setShowSyncStatusModal(true), title: `Sync manager: ${syncStatusMeta.label} | Last success: ${formattedLastSyncTime}`, style: {
                                 marginLeft: '6px',
                                 height: '24px',
                                 width: '24px',
@@ -3041,114 +3346,71 @@ export function StandaloneLayout(props) {
                                 return;
                             }
                             void handleUnarchive(taskId);
-                        }, currentTask: currentTask })] }), _jsx(Modal, { isOpen: activeTab === 'settings', onClose: handleCloseModal, title: "Settings", size: "xl", theme: currentTheme, draggable: true, isSettings: true, closeOnOverlayClick: false, children: _jsx(Suspense, { fallback: _jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '2rem' }, children: _jsx(Loader2, { size: 20, className: styles.spinner }) }), children: _jsx(TaskSettings, { settingsModel: settingsModel, onSectionChange: setSettingsSection }) }) }), _jsx(Modal, { isOpen: !!scheduleWarningPrompt, onClose: cancelScheduleWarning, title: "Date Warning", size: "sm", theme: currentTheme, draggable: false, closeOnOverlayClick: false, children: _jsxs("div", { className: `${styles.form} tf-inline-stack-sm`, style: { padding: '16px', gap: '12px' }, children: [_jsx("p", { className: "tf-text-body", children: "Due date is before scheduled date." }), scheduleWarningPrompt && (_jsxs("p", { className: "tf-text-helper", children: ["Due: ", scheduleWarningPrompt.dueDate, " \u00B7 Scheduled: ", scheduleWarningPrompt.scheduledDate] })), _jsxs("div", { className: styles.formActions, children: [_jsx("button", { className: styles.cancelBtn, onClick: cancelScheduleWarning, children: "Go Back" }), _jsx("button", { className: styles.submitBtn, onClick: confirmScheduleWarning, children: "Save Anyway" })] })] }) }), _jsx(Modal, { isOpen: showHelpModal, onClose: () => setShowHelpModal(false), title: "Quick Start", size: "md", theme: currentTheme, draggable: true, children: _jsxs("div", { className: `${modalStyles.form} ${managementStyles.modalBody}`, children: [_jsx("p", { className: managementStyles.mutedText, children: "Use this quick guide to get productive in Taskforce dashboard mode." }), _jsxs("div", { children: [_jsx("strong", { children: "1. Capture work" }), _jsxs("p", { className: managementStyles.sectionText, children: ["Click ", _jsx("code", { children: "Add Task" }), ", write a short title, and save."] })] }), _jsxs("div", { children: [_jsx("strong", { children: "2. Plan the board" }), _jsxs("p", { className: managementStyles.sectionText, children: ["Use ", _jsx("code", { children: "Sort" }), ", ", _jsx("code", { children: "Group" }), ", and ", _jsx("code", { children: "Filters" }), " in the header."] })] }), _jsxs("div", { children: [_jsx("strong", { children: "3. Execute and stage" }), _jsxs("p", { className: managementStyles.sectionText, children: ["Move tasks through ", _jsx("code", { children: "Task" }), ", ", _jsx("code", { children: "In Progress" }), ", ", _jsx("code", { children: "Review" }), ", and ", _jsx("code", { children: "Done" }), "."] })] }), _jsxs("div", { children: [_jsx("strong", { children: "4. Archive finished work" }), _jsx("p", { className: managementStyles.sectionText, children: "Archive completed/cancelled tasks to keep active board signal high." })] }), _jsxs("div", { className: `${modalStyles.formActions} ${managementStyles.modalActionsEnd}`, children: [_jsx("button", { className: styles.cancelBtn, onClick: () => {
-                                        setShowHelpModal(false);
-                                        setActiveTab('settings');
-                                        setSettingsSection('general');
-                                    }, children: "Open Settings" }), _jsx("button", { className: styles.submitBtn, onClick: () => setShowHelpModal(false), children: "Close Tutorial" })] })] }) }), _jsx(Modal, { isOpen: showEditProfileModal, onClose: () => setShowEditProfileModal(false), title: "Edit Profile", size: "sm", theme: currentTheme, draggable: true, footer: (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: styles.secondaryButton, onClick: () => setShowEditProfileModal(false), disabled: profileSaveBusy, children: "Cancel" }), _jsx("button", { type: "button", className: styles.primaryUpdateBtn, onClick: () => { void handleSaveProfile(); }, disabled: profileSaveBusy || !profileDisplayNameDraft.trim(), children: profileSaveBusy ? 'Saving...' : 'Save Profile' })] })), children: _jsxs("div", { className: `${modalStyles.form} ${managementStyles.modalBody}`, children: [_jsx("p", { className: managementStyles.sectionText, children: "Update the name shown around your account and shared workspace surfaces." }), _jsxs("label", { className: managementStyles.inlineFieldLabel, children: ["Display name", _jsx("input", { className: styles.input, type: "text", value: profileDisplayNameDraft, onChange: (event) => setProfileDisplayNameDraft(event.target.value), placeholder: "Display name", disabled: profileSaveBusy })] }), _jsxs("label", { className: managementStyles.inlineFieldLabel, children: ["Email", _jsx("input", { className: styles.input, type: "email", value: authEmailLabel, readOnly: true, disabled: true })] }), profileSaveError && (_jsx("p", { className: `${authStyles.loginError} ${managementStyles.errorText}`, children: profileSaveError })), profileSaveNotice && !profileSaveError && (_jsx("p", { className: managementStyles.errorText, children: profileSaveNotice }))] }) }), _jsx(Modal, { isOpen: showAccountHub, onClose: () => setShowAccountHub(false), title: "Account Hub", size: "md", theme: currentTheme, draggable: true, children: _jsxs("div", { className: `${modalStyles.form} ${managementStyles.modalBody}`, children: [_jsx("p", { className: managementStyles.mutedText, children: "Manage sign in, profile, and workspace controls from one place." }), _jsxs("div", { className: accountStyles.accountHubCard, children: [_jsx("strong", { children: "Authentication" }), _jsx("p", { className: managementStyles.sectionText, children: runtimeMode === 'cloud'
-                                        ? (authRequiredForApi
-                                            ? (isAuthenticated ? 'Signed in. API access is enabled.' : 'Cloud mode requires sign in before app usage.')
-                                            : 'Cloud runtime with optional authentication.')
-                                        : 'Local runtime allows guest usage without sign in.' }), _jsx("p", { className: managementStyles.sectionTextSpaced, children: isAuthenticated
-                                        ? (hasAuthIdentity
-                                            ? _jsxs(_Fragment, { children: ["Signed in as ", _jsx("span", { className: accountStyles.accountIdentityEmail, children: authIdentityLabel })] })
-                                            : 'Signed in')
-                                        : 'Signed in as: not signed in' }), runtimeMode === 'cloud' && authRequiredForApi && !isAuthenticated && (_jsx("p", { className: managementStyles.sectionTextTop, children: "Use the `/login` screen to sign in." }))] }), _jsxs("div", { className: accountStyles.accountHubCard, children: [_jsx("strong", { children: "Profile & Account" }), _jsx("p", { className: managementStyles.sectionText, children: "Profile editing and account preferences will live here." })] }), _jsxs("div", { className: accountStyles.accountHubCard, children: [_jsx("strong", { children: "Billing" }), !isAuthenticated ? (_jsx("p", { className: managementStyles.sectionText, children: "Sign in to manage subscription billing." })) : runtimeMode !== 'cloud' ? (_jsx("p", { className: managementStyles.sectionText, children: "Billing remains cloud-backed in local runtime and uses your connected cloud account." })) : (_jsxs(_Fragment, { children: [billingLoading && (_jsx("p", { className: managementStyles.sectionTextSpaced, children: "Loading billing status..." })), billingError && (_jsx("p", { className: `${authStyles.loginError} ${managementStyles.errorText}`, children: billingError })), billingActionError && (_jsx("p", { className: `${authStyles.loginError} ${managementStyles.errorText}`, children: billingActionError })), billingNotice && (_jsx("p", { className: managementStyles.errorText, children: billingNotice })), _jsxs("p", { className: managementStyles.sectionTextSpaced, children: ["Plan: ", _jsx("code", { children: String(billingStatus?.planId || 'n/a') }), ' · ', "Entitlement: ", _jsx("code", { children: String(billingStatus?.entitlementState || 'n/a') })] }), _jsxs("p", { className: managementStyles.sectionText, children: ["Stripe status: ", _jsx("code", { children: String(billingStatus?.stripeStatus || 'n/a') }), billingStatus?.effectiveUntil ? ` · Effective until ${new Date(billingStatus.effectiveUntil).toLocaleString()}` : ''] }), _jsx("div", { className: managementStyles.wrapRow, children: _jsxs("label", { className: `${accountStyles.accountMenuMeta} ${managementStyles.inlineFieldLabel}`, children: ["Interval", _jsxs("select", { className: styles.input, value: billingIntervalChoice, onChange: (event) => setBillingIntervalChoice(event.target.value === 'year' ? 'year' : 'month'), disabled: billingActionBusy, children: [_jsx("option", { value: "month", children: "Monthly" }), _jsx("option", { value: "year", children: "Yearly" })] })] }) }), _jsxs("div", { className: managementStyles.actionRowEnd, children: [_jsx("button", { className: styles.cancelBtn, onClick: () => { void loadBillingStatus(); }, disabled: billingActionBusy || billingLoading, children: "Refresh Billing" }), _jsx("button", { className: styles.cancelBtn, onClick: () => { void handleSwitchSubscriptionInterval(); }, disabled: billingActionBusy || !billingStatus?.stripeSubscriptionId, children: "Update Interval" }), _jsx("button", { className: styles.cancelBtn, onClick: () => { void handleOpenBillingPortal(); }, disabled: billingActionBusy || !billingStatus?.stripeCustomerId, children: "Manage Billing" }), _jsx("button", { className: styles.submitBtn, onClick: () => { void handleStartCheckout(); }, disabled: billingActionBusy, children: billingActionBusy ? 'Working...' : 'Start Checkout' })] })] }))] }), _jsxs("div", { className: accountStyles.accountHubCard, children: [_jsx("strong", { children: "Workspace Audit Log" }), _jsx("p", { className: managementStyles.sectionText, children: "Audit entries are workspace-scoped for the active workspace, not global account history." }), _jsxs("p", { className: managementStyles.sectionText, children: ["Active workspace: ", _jsx("code", { children: currentWorkspaceId })] }), _jsx("div", { className: managementStyles.actionRowEnd, children: _jsx("button", { className: styles.cancelBtn, onClick: () => {
-                                            setShowAccountHub(false);
-                                            void openTeamManagementModal();
-                                            setTeamManagementTab('audit');
-                                        }, disabled: !canOpenTeamManagement, children: "Open Workspace Audit" }) })] }), _jsxs("div", { className: accountStyles.accountHubCard, children: [_jsx("strong", { children: "Workspace Cloud Sync" }), _jsx("p", { className: managementStyles.sectionText, children: canManageWorkspaceSync
-                                        ? (workspaceCloudSyncEnabled
-                                            ? `Enabled · ${syncStatusMeta.label}`
-                                            : 'Disabled')
-                                        : 'Sign in to cloud account to enable workspace sync.' }), workspaceSyncError && (_jsx("p", { className: `${authStyles.loginError} ${managementStyles.errorText}`, children: workspaceSyncError })), _jsx("div", { className: managementStyles.actionRowEnd, children: _jsx("button", { className: styles.cancelBtn, disabled: !canManageWorkspaceSync || syncControlBusy, onClick: () => { void handleWorkspaceSyncToggle(!workspaceCloudSyncEnabled); }, children: workspaceCloudSyncEnabled ? 'Disable Sync' : 'Enable Sync' }) })] }), _jsxs("div", { className: `${modalStyles.formActions} ${managementStyles.modalActionsEnd}`, children: [_jsx("button", { className: styles.cancelBtn, onClick: () => {
-                                        setShowAccountHub(false);
-                                        setShowHelpModal(true);
-                                    }, children: "Help & Tutorial" }), _jsx("button", { className: styles.submitBtn, onClick: () => setShowAccountHub(false), children: "Close" })] })] }) }), _jsx(Modal, { isOpen: showTeamManagementModal, onClose: () => setShowTeamManagementModal(false), title: "Team Management", size: "md", theme: currentTheme, draggable: true, children: _jsxs("div", { className: `${modalStyles.form} ${managementStyles.modalBody}`, children: [teamPlanMode === 'personal' && (_jsx("p", { className: authStyles.loginError, children: "Team management is only available in TEAM accounts." })), teamMgmtError && (_jsx("p", { className: authStyles.loginError, children: teamMgmtError })), _jsxs("div", { className: `${styles.settingsTabs} tf-scrollbar tf-scrollbar--track-transparent tf-scrollbar--compact`, children: [_jsx("button", { className: `${styles.settingsTabBtn} ${teamManagementTab === 'members' ? styles.settingsTabBtnActive : ''}`, onClick: () => {
-                                        setTeamManagementTab('members');
-                                        void loadTeamUsers();
-                                    }, children: "Members" }), _jsx("button", { className: `${styles.settingsTabBtn} ${teamManagementTab === 'invites' ? styles.settingsTabBtnActive : ''}`, onClick: () => setTeamManagementTab('invites'), children: "Invites" }), _jsx("button", { className: `${styles.settingsTabBtn} ${teamManagementTab === 'audit' ? styles.settingsTabBtnActive : ''}`, onClick: () => {
-                                        setTeamManagementTab('audit');
-                                        void loadTeamAuditPage(teamAuditPage);
-                                    }, children: "Audit Log" })] }), teamManagementTab === 'members' && (_jsxs("div", { className: accountStyles.accountHubCard, children: [teamUsersLoading && _jsx("p", { className: managementStyles.mutedText, children: "Loading members..." }), !teamUsersLoading && teamUsers.length === 0 && (_jsx("p", { className: managementStyles.mutedText, children: "No users found." })), !teamUsersLoading && teamUsers.map((member) => (_jsxs("div", { className: managementStyles.memberRow, children: [_jsx("div", { className: managementStyles.memberTitle, children: member.displayName || member.email }), _jsxs("div", { className: accountStyles.accountMenuMeta, children: [member.email, " \u00B7 ", member.status, member.disabled ? ' · deactivated' : ''] }), _jsxs("div", { className: managementStyles.memberActions, children: [_jsxs("select", { className: `${styles.input} ${managementStyles.selectRole}`, value: member.role, onChange: (event) => {
-                                                        void executeTeamUserAction(member.userId, async () => fetch(`/api/taskforce/admin/users/${encodeURIComponent(member.userId)}/role`, {
-                                                            method: 'PATCH',
-                                                            headers: { 'Content-Type': 'application/json', ...teamAdminHeaders() },
-                                                            credentials: 'include',
-                                                            body: JSON.stringify({
-                                                                workspaceId: teamManagementWorkspaceId,
-                                                                role: event.target.value
-                                                            })
-                                                        }));
-                                                    }, disabled: teamActionBusyUserId === member.userId, children: [_jsx("option", { value: "owner", children: "Owner" }), _jsx("option", { value: "admin", children: "Admin" }), _jsx("option", { value: "member", children: "Member" })] }), member.role === 'member' && (_jsxs("select", { className: `${styles.input} ${managementStyles.selectPermission}`, value: member.permissionMode, onChange: (event) => {
-                                                        void executeTeamUserAction(member.userId, async () => fetch(`/api/taskforce/admin/users/${encodeURIComponent(member.userId)}/permission-mode`, {
-                                                            method: 'PATCH',
-                                                            headers: { 'Content-Type': 'application/json', ...teamAdminHeaders() },
-                                                            credentials: 'include',
-                                                            body: JSON.stringify({
-                                                                workspaceId: teamManagementWorkspaceId,
-                                                                mode: event.target.value
-                                                            })
-                                                        }));
-                                                    }, disabled: teamActionBusyUserId === member.userId, children: [_jsx("option", { value: "read-write", children: "Read / Write" }), _jsx("option", { value: "read-only", children: "Read Only" })] })), _jsx("button", { className: styles.cancelBtn, disabled: teamActionBusyUserId === member.userId, onClick: () => {
-                                                        void executeTeamUserAction(member.userId, async () => fetch(`/api/taskforce/admin/users/${encodeURIComponent(member.userId)}/disable`, {
-                                                            method: 'PATCH',
-                                                            headers: { 'Content-Type': 'application/json', ...teamAdminHeaders() },
-                                                            credentials: 'include',
-                                                            body: JSON.stringify({
-                                                                workspaceId: teamManagementWorkspaceId,
-                                                                disabled: !member.disabled
-                                                            })
-                                                        }));
-                                                    }, children: member.disabled ? 'Reactivate' : 'Deactivate' }), member.status === 'invited' && (_jsx("button", { className: styles.cancelBtn, disabled: teamActionBusyUserId === member.userId, onClick: () => {
-                                                        void executeTeamUserAction(member.userId, async () => fetch(`/api/taskforce/admin/users/${encodeURIComponent(member.userId)}/invite/revoke`, {
-                                                            method: 'POST',
-                                                            headers: { 'Content-Type': 'application/json', ...teamAdminHeaders() },
-                                                            credentials: 'include',
-                                                            body: JSON.stringify({ workspaceId: teamManagementWorkspaceId })
-                                                        }));
-                                                    }, children: "Revoke Invite" })), _jsx("button", { className: styles.cancelBtn, disabled: teamActionBusyUserId === member.userId, onClick: () => {
-                                                        void executeTeamUserAction(member.userId, async () => fetch(`/api/taskforce/admin/users/${encodeURIComponent(member.userId)}?workspaceId=${encodeURIComponent(teamManagementWorkspaceId)}`, {
-                                                            method: 'DELETE',
-                                                            headers: teamAdminHeaders(),
-                                                            credentials: 'include'
-                                                        }));
-                                                    }, children: "Remove" })] })] }, member.userId)))] })), teamManagementTab === 'invites' && (_jsxs("div", { className: accountStyles.accountHubCard, children: [teamInviteFeedback && (_jsx("p", { className: managementStyles.sectionText, children: teamInviteFeedback })), _jsxs("div", { className: styles.pathInputGroup, children: [_jsx("label", { className: `${styles.label} ${managementStyles.labelFixed}`, children: "Email" }), _jsx("input", { className: styles.input, value: teamInviteEmail, onChange: (event) => setTeamInviteEmail(event.target.value), placeholder: "name@company.com" })] }), _jsxs("div", { className: styles.pathInputGroup, children: [_jsx("label", { className: `${styles.label} ${managementStyles.labelFixed}`, children: "Role" }), _jsxs("select", { className: `${styles.input} ${managementStyles.selectRole}`, value: teamInviteRole, onChange: (event) => setTeamInviteRole(event.target.value === 'admin' ? 'admin' : 'member'), children: [_jsx("option", { value: "member", children: "Member" }), _jsx("option", { value: "admin", children: "Admin" })] }), teamInviteRole === 'member' && (_jsxs("select", { className: `${styles.input} ${managementStyles.selectPermission}`, value: teamInvitePermissionMode, onChange: (event) => setTeamInvitePermissionMode(event.target.value === 'read-only' ? 'read-only' : 'read-write'), children: [_jsx("option", { value: "read-write", children: "Read / Write" }), _jsx("option", { value: "read-only", children: "Read Only" })] })), _jsx("button", { className: styles.submitBtn, disabled: teamInviteBusy || !teamInviteEmail.trim() || teamPlanMode !== 'team', onClick: () => { void submitTeamInvite(); }, children: teamInviteBusy ? 'Sending...' : 'Send Invite' })] }), _jsxs("div", { className: managementStyles.inviteRow, children: [_jsx("div", { className: managementStyles.listHeading, children: "Pending Invites" }), pendingInvites.length === 0 && (_jsx("p", { className: managementStyles.mutedText, children: "No pending invites." })), pendingInvites.map((invite) => (_jsxs("div", { className: managementStyles.memberRow, children: [_jsx("div", { className: managementStyles.memberTitle, children: invite.displayName || invite.email }), _jsxs("div", { className: accountStyles.accountMenuMeta, children: [invite.email, " \u00B7 ", invite.role] })] }, invite.userId)))] })] })), teamManagementTab === 'audit' && (_jsxs("div", { className: accountStyles.accountHubCard, children: [teamAuditLoading && _jsx("p", { className: managementStyles.mutedText, children: "Loading audit entries..." }), !teamAuditLoading && teamAuditEvents.length === 0 && (_jsx("p", { className: managementStyles.mutedText, children: "No audit events for this workspace." })), !teamAuditLoading && (_jsx("div", { className: managementStyles.auditList, children: teamAuditEvents.map((event) => (_jsxs("div", { className: managementStyles.memberRow, children: [_jsx("div", { className: accountStyles.accountMenuMeta, children: new Date(event.createdAt).toLocaleString() }), _jsx("div", { className: managementStyles.memberTitle, children: event.action }), _jsxs("div", { className: accountStyles.accountMenuMeta, children: [event.actorUserId, " (", event.actorRole, ")"] })] }, event.id))) })), _jsxs("div", { className: managementStyles.auditPager, children: [_jsx("button", { className: styles.cancelBtn, disabled: teamAuditLoading || teamAuditPage === 0, onClick: () => { void loadTeamAuditPage(teamAuditPage - 1); }, children: "Previous" }), _jsxs("span", { className: accountStyles.accountMenuMeta, children: ["Page ", teamAuditPage + 1, " of ", teamAuditPages] }), _jsx("button", { className: styles.cancelBtn, disabled: teamAuditLoading || !teamAuditHasMore || teamAuditPage + 1 >= teamAuditPages, onClick: () => { void loadTeamAuditPage(teamAuditPage + 1); }, children: "Next" })] })] })), _jsx("div", { className: `${modalStyles.formActions} ${managementStyles.modalActionsEnd}`, children: _jsx("button", { className: styles.cancelBtn, onClick: () => setShowTeamManagementModal(false), children: "Close" }) })] }) }), _jsx(Modal, { isOpen: showCreateWorkspaceConfirm, onClose: () => setShowCreateWorkspaceConfirm(false), title: "Create Workspace", size: "sm", theme: currentTheme, draggable: true, footer: (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: styles.secondaryButton, onClick: () => setShowCreateWorkspaceConfirm(false), children: "Cancel" }), _jsx("button", { type: "button", className: styles.primaryUpdateBtn, onClick: () => openWorkspaceSetup({ intent: 'create-workspace' }), children: "Continue to Setup" })] })), children: _jsx("div", { className: `${modalStyles.form} ${managementStyles.modalBody}`, children: _jsx("p", { className: managementStyles.sectionText, children: "Start a new workspace with the guided setup flow. You will choose the workspace name, description, and starter taxonomy library before anything is created." }) }) }), _jsx(Modal, { isOpen: showSyncStatusModal, onClose: () => {
-                    setShowSyncStatusModal(false);
-                }, title: "Sync Manager", size: "md", theme: currentTheme, draggable: true, children: _jsxs("div", { className: `${modalStyles.form} ${syncStatusStyles.syncStatusModal}`, style: { gap: '10px' }, children: [_jsxs("div", { className: syncStatusStyles.syncStatusTop, children: [_jsx("div", { className: syncStatusStyles.syncStatusHeaderInfo, children: _jsxs("div", { className: syncStatusStyles.syncStatusMetaHeader, children: [_jsx("div", { className: syncStatusStyles.syncStatusBadge, style: {
-                                                    borderColor: syncStatusMeta.border,
-                                                    background: syncStatusMeta.background,
-                                                    color: syncStatusMeta.color
-                                                }, children: syncStatusMeta.label }), _jsxs("span", { className: syncStatusStyles.syncStatusLabel, children: ["Workspace: ", _jsx("code", { children: currentWorkspaceLabel })] })] }) }), _jsx("label", { className: syncStatusStyles.syncToggle, children: _jsxs("span", { className: [
-                                            syncStatusStyles.syncToggleControl,
-                                            workspaceCloudSyncEnabled ? syncStatusStyles.syncToggleControlEnabled : syncStatusStyles.syncToggleControlDisabled,
-                                            syncControlBusy ? syncStatusStyles.syncToggleControlBusy : '',
-                                            !canManageWorkspaceSync ? syncStatusStyles.syncToggleControlBlocked : ''
-                                        ].filter(Boolean).join(' '), children: [_jsx("input", { className: syncStatusStyles.syncToggleInput, type: "checkbox", role: "switch", "aria-label": "Enable Sync", checked: workspaceCloudSyncEnabled, disabled: !canManageWorkspaceSync || syncControlBusy, onChange: (event) => {
-                                                    void handleWorkspaceSyncToggle(event.target.checked);
-                                                } }), _jsx("span", { className: `${syncStatusStyles.syncToggleState} ${syncStatusStyles.syncToggleStateOn}`, children: "On" }), _jsx("span", { className: `${syncStatusStyles.syncToggleState} ${syncStatusStyles.syncToggleStateOff}`, children: "Off" }), _jsx("span", { className: syncStatusStyles.syncToggleThumb })] }) })] }), _jsxs("div", { className: syncStatusStyles.syncStatusSummaryCompact, children: [_jsx("span", { className: syncStatusStyles.syncStatusLabel, children: "Health" }), _jsx("span", { className: syncStatusStyles.syncStatusSummaryValue, children: workspaceSyncSummary })] }), workspaceSyncRepairBusy && (_jsxs("div", { className: syncStatusStyles.syncStatusRepairBanner, children: [_jsxs("div", { className: syncStatusStyles.syncStatusRepairHeader, children: [_jsxs("div", { className: syncStatusStyles.syncStatusRepairBadge, children: [_jsx(Loader2, { size: 13, className: styles.spinner }), _jsx("span", { children: "Repair In Progress" })] }), _jsx("span", { className: syncStatusStyles.syncStatusRepairMeta, children: "Advanced recovery mode" })] }), _jsx("span", { className: syncStatusStyles.syncStatusRepairText, children: referenceMismatchCount > 0
-                                        ? `Taskforce is clearing the saved sync cursor and reconciling workspace state from the cloud again, including ${referenceMismatchCount} detected reference mismatch${referenceMismatchCount === 1 ? '' : 'es'}. The panel may stay busy for a while during large repairs.`
-                                        : 'Taskforce is clearing the saved sync cursor and reconciling workspace state from the cloud again. The panel may stay busy for a while during large repairs.' })] })), _jsx("div", { className: syncStatusStyles.syncStatusSectionHeader, children: _jsx("span", { className: syncStatusStyles.syncStatusLabel, children: "Current Session" }) }), _jsxs("div", { className: syncStatusStyles.syncStatusCompactGrid, children: [_jsxs("div", { className: syncStatusStyles.syncStatusCompactItem, children: [_jsx("span", { className: syncStatusStyles.syncStatusLabel, children: "Stage" }), _jsx("span", { className: syncStatusStyles.syncStatusValue, children: syncStageLabel })] }), _jsxs("div", { className: syncStatusStyles.syncStatusCompactItem, children: [_jsx("span", { className: syncStatusStyles.syncStatusLabel, children: "Local Changes" }), _jsx("span", { className: syncStatusStyles.syncStatusValue, children: workspaceSyncPendingChanges })] }), _jsxs("div", { className: syncStatusStyles.syncStatusCompactItem, children: [_jsx("span", { className: syncStatusStyles.syncStatusLabel, children: "Last Successful" }), _jsx("span", { className: syncStatusStyles.syncStatusValue, children: formattedLastSyncTime })] })] }), _jsx("div", { className: syncStatusStyles.syncStatusSectionHeader, children: _jsx("span", { className: syncStatusStyles.syncStatusLabel, children: "Activity" }) }), _jsxs("div", { className: syncStatusStyles.syncStatusCompactGrid, children: [_jsxs("div", { className: syncStatusStyles.syncStatusCompactItem, children: [_jsx("span", { className: syncStatusStyles.syncStatusLabel, children: "Last Pull" }), _jsx("span", { className: syncStatusStyles.syncStatusValue, children: formattedLastPullTime })] }), _jsxs("div", { className: syncStatusStyles.syncStatusCompactItem, children: [_jsx("span", { className: syncStatusStyles.syncStatusLabel, children: "Last Push" }), _jsx("span", { className: syncStatusStyles.syncStatusValue, children: formattedLastPushTime })] })] }), syncLastError !== 'None' && (_jsxs("div", { className: syncStatusStyles.syncStatusPanel, style: { background: 'rgba(239, 68, 68, 0.05)', borderColor: 'rgba(239, 68, 68, 0.2)' }, children: [_jsxs("div", { className: syncStatusStyles.syncStatusSectionHeader, style: { marginTop: 0 }, children: [_jsx(AlertTriangle, { size: 12, color: "#fda4af" }), _jsxs("span", { className: syncStatusStyles.syncStatusLabel, style: { color: '#fda4af' }, children: ["Last Error (", workspaceSyncDiagnostics.lastErrorAt ? new Date(workspaceSyncDiagnostics.lastErrorAt).toLocaleTimeString() : 'Recent', ")"] })] }), _jsx("span", { className: `${syncStatusStyles.syncStatusValue} ${syncStatusStyles.syncStatusValueError}`, children: syncLastError })] })), referenceMismatchCount > 0 && (_jsxs("div", { className: syncStatusStyles.syncStatusPanel, style: { background: 'rgba(250, 204, 21, 0.08)', borderColor: 'rgba(250, 204, 21, 0.22)' }, children: [_jsxs("div", { className: syncStatusStyles.syncStatusPanelHeader, children: [_jsx("span", { className: syncStatusStyles.syncStatusLabel, style: { color: '#fde68a' }, children: "Identifier Integrity" }), _jsxs("span", { className: syncStatusStyles.syncStatusPanelMeta, children: [referenceMismatchCount, " mismatch", referenceMismatchCount === 1 ? '' : 'es', " detected"] })] }), _jsx("span", { className: syncStatusStyles.syncStatusValue, children: "Document or image reference numbers disagreed during normal sync. Standard sync now preserves existing identifiers; use Repair to reconcile mismatched references deliberately." }), activeReferenceMismatchSummaries.length > 0 && (_jsx("div", { style: { marginTop: '10px', display: 'flex', flexDirection: 'column', gap: '8px' }, children: activeReferenceMismatchSummaries.map((item) => (_jsxs("div", { style: {
-                                            display: 'flex',
-                                            flexDirection: 'column',
-                                            gap: '2px',
-                                            padding: '8px 10px',
-                                            borderRadius: '8px',
-                                            background: 'rgba(15, 23, 42, 0.18)',
-                                            border: '1px solid rgba(250, 204, 21, 0.16)'
-                                        }, children: [_jsx("span", { className: syncStatusStyles.syncStatusValue, style: { fontSize: '12px', wordBreak: 'break-all' }, children: item.pathLabel }), item.refsLabel ? (_jsx("span", { className: syncStatusStyles.syncStatusPanelMeta, children: item.refsLabel })) : null] }, item.key))) }))] })), _jsxs("div", { className: syncStatusStyles.syncStatusPanel, children: [_jsxs("div", { className: syncStatusStyles.syncStatusPanelHeader, children: [_jsx("span", { className: syncStatusStyles.syncStatusLabel, children: "Local Sync Diagnostics" }), _jsx("span", { className: syncStatusStyles.syncStatusPanelMeta, style: { fontSize: '10px' }, children: "AI profiles & metadata" })] }), _jsx("div", { className: syncStatusStyles.syncStatusCompactGrid, style: { gridTemplateColumns: 'repeat(2, 1fr)' }, children: syncDiagnosticsSummary.map((item) => (_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: '8px' }, children: [_jsx("span", { className: syncStatusStyles.syncStatusLabel, style: { fontSize: '9px', textTransform: 'capitalize' }, children: item.label }), _jsx("span", { className: syncStatusStyles.syncStatusValue, style: { fontSize: '11px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }, children: item.value })] }, item.label))) })] }), _jsxs("div", { className: syncStatusStyles.syncStatusPanel, children: [_jsx("div", { className: syncStatusStyles.syncStatusPanelHeader, children: _jsx("span", { className: syncStatusStyles.syncStatusLabel, children: "Recent Events" }) }), _jsx("div", { ref: syncEventsListRef, className: syncStatusStyles.syncStatusEventsList, style: { height: '120px' }, children: syncEventRows.map((row) => (_jsx("div", { className: [
-                                            syncStatusStyles.syncStatusEventItem,
-                                            row.tone === 'error' ? syncStatusStyles.syncStatusEventItemError : '',
-                                            row.tone === 'muted' ? syncStatusStyles.syncStatusEventItemMuted : ''
-                                        ].filter(Boolean).join(' '), style: { padding: '6px 8px', borderRadius: '6px' }, children: _jsx("span", { className: syncStatusStyles.syncStatusEventLine, style: { fontSize: '11px' }, children: row.text }) }, row.key))) })] }), _jsxs("div", { className: `${modalStyles.formActions} ${syncStatusStyles.syncStatusActions}`, children: [_jsxs("div", { className: syncStatusStyles.syncStatusSecondaryActions, children: [_jsx("button", { className: styles.cancelBtn, onClick: handleQueueOrRunRepairSync, disabled: workspaceSyncRepairBusy, title: workspaceSyncRepairBusy
-                                                ? 'Repair is running now.'
-                                                : workspaceSyncRepairQueued
-                                                    ? 'Repair is queued and will start when the current sync finishes.'
-                                                    : workspaceSyncBusy
-                                                        ? 'Queue a repair to start automatically when the current sync finishes.'
-                                                        : 'Advanced recovery: clear the saved pull cursor and re-fetch cloud state from the beginning.', children: workspaceSyncRepairBusy ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { size: 14, className: styles.spinner }), _jsx("span", { style: { marginLeft: '6px' }, children: "Repairing..." })] })) : workspaceSyncRepairQueued ? ('Repair Queued') : ('Repair') }), _jsxs("button", { className: styles.cancelBtn, onClick: () => { void handleCopySyncDetails(); }, title: "Copy the current sync manager report for support or AI troubleshooting.", children: [_jsx(Copy, { size: 14 }), _jsx("span", { style: { marginLeft: '6px' }, children: workspaceSyncCopied ? 'Copied' : 'Copy Report' })] })] }), _jsxs("div", { className: syncStatusStyles.syncStatusPrimaryActions, children: [_jsx("div", { className: syncStatusStyles.syncStatusPrimaryActionSlot, children: runtimeMode === 'local' && !isAuthenticated ? (_jsx("button", { className: styles.submitBtn, onClick: () => {
-                                                    openSharedLoginRoute('login');
-                                                }, children: "Sign In / Register" })) : (_jsx("div", { className: syncStatusStyles.syncStatusActionPlaceholder, "aria-hidden": "true" })) }), _jsx("div", { className: syncStatusStyles.syncStatusPrimaryActionSlot, children: _jsx("button", { className: styles.submitBtn, onClick: () => void retryWorkspaceCloudSync(), disabled: workspaceSyncBusy, children: workspaceSyncBusy ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { size: 14, className: styles.spinner }), "Syncing..."] })) : (_jsxs(_Fragment, { children: [_jsx(RefreshCw, { size: 14 }), "Sync"] })) }) })] })] })] }) }), unsavedModalOpen && createPortal(_jsx("div", { className: `${modalStyles.overlay} ${modalStyles.unsavedOverlay}`, style: { zIndex: 2000 }, children: _jsxs("div", { className: `tf-surface-modal tf-modal-shell ${modalStyles.modal} ${modalStyles.unsavedModal}`, "data-theme": currentTheme, children: [_jsx("div", { className: `tf-modal-header ${modalStyles.unsavedHeader}`, children: _jsxs("div", { className: `tf-modal-title ${modalStyles.unsavedTitle}`, children: [_jsx(AlertTriangle, { size: 20 }), "Unsaved Changes"] }) }), _jsx("div", { className: `${modalStyles.form} ${modalStyles.unsavedContent}`, children: _jsx("p", { className: modalStyles.unsavedText, children: "You have unsaved changes. Would you like to save them?" }) }), _jsxs("div", { className: `${modalStyles.formActions} ${modalStyles.unsavedActions}`, children: [_jsx("button", { className: styles.cancelBtn, onClick: () => setUnsavedModalOpen(false), title: "Close dialog and continue editing", children: "Keep Editing" }), _jsx("button", { className: styles.destructiveBtn, onClick: handleDiscard, title: "Discard unsaved changes and leave", children: "Discard" }), _jsxs("button", { className: styles.submitBtn, onClick: handleSaveAndNavigate, disabled: loading, title: "Save changes and leave", children: [loading ? _jsx(Loader2, { size: 16, className: styles.spinner }) : _jsx(Save, { size: 16 }), "Save"] })] })] }) }), document.body), showFolderBrowser && createPortal(_jsx("div", { className: folderBrowserStyles.overlay, children: _jsxs("div", { className: folderBrowserStyles.browser, children: [_jsxs("div", { className: folderBrowserStyles.header, children: [_jsxs("div", { className: folderBrowserStyles.pathInfo, children: [_jsx(Folder, { size: 14 }), _jsx("span", { children: currentBrowsePath || 'Project Root' })] }), _jsxs("div", { className: folderBrowserStyles.actions, children: [currentBrowsePath && (_jsx("button", { className: styles.helpLink, onClick: () => {
+                        }, currentTask: currentTask })] }), _jsx(Modal, { isOpen: activeTab === 'settings', onClose: handleCloseModal, title: "Settings", size: "xl", theme: currentTheme, draggable: true, isSettings: true, closeOnOverlayClick: false, children: _jsx(Suspense, { fallback: _jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '2rem' }, children: _jsx(Loader2, { size: 20, className: styles.spinner }) }), children: _jsx(TaskSettings, { settingsModel: settingsModel, onSectionChange: setSettingsSection }) }) }), _jsx(ScheduleWarningModal, { prompt: scheduleWarningPrompt, theme: currentTheme, onClose: cancelScheduleWarning, onConfirm: confirmScheduleWarning }), _jsx(HelpModal, { isOpen: showHelpModal, theme: currentTheme, onClose: () => setShowHelpModal(false), onOpenSettings: () => {
+                    setShowHelpModal(false);
+                    setActiveTab('settings');
+                    setSettingsSection('general');
+                } }), _jsx(EditProfileModal, { isOpen: showEditProfileModal, theme: currentTheme, onClose: closeEditProfileModal, onSave: () => { void handleSaveProfile(); }, displayName: profileDisplayNameDraft, email: authEmailLabel, avatarDisplayUrl: profileAvatarDisplayUrl, accountBadgeInitial: accountBadgeInitial, avatarInputRef: profileAvatarInputRef, avatarAccept: PROFILE_AVATAR_ACCEPT, avatarDraftId: profileAvatarDraftId, saveBusy: profileSaveBusy, avatarBusy: profileAvatarBusy, saveError: profileSaveError, saveNotice: profileSaveNotice, onDisplayNameChange: setProfileDisplayNameDraft, onAvatarInputChange: (file) => { void handleProfileAvatarSelected(file); }, onStartAvatarUpload: () => profileAvatarInputRef.current?.click(), onDiscardUpload: handleDiscardPendingProfileAvatar, onRemovePhoto: handleRemoveProfileAvatar }), _jsx(AccountHubModal, { isOpen: showAccountHub, theme: currentTheme, runtimeMode: runtimeMode, authRequiredForApi: authRequiredForApi, isAuthenticated: isAuthenticated, hasAuthIdentity: hasAuthIdentity, authIdentityLabel: authIdentityLabel, billingLoading: billingLoading, billingError: billingError, billingActionError: billingActionError, billingNotice: billingNotice, billingActionBusy: billingActionBusy, billingIntervalChoice: billingIntervalChoice, billingStatus: billingStatus, currentWorkspaceId: currentWorkspaceId, canOpenTeamManagement: canOpenTeamManagement, canManageWorkspaceSync: canManageWorkspaceSync, workspaceCloudSyncEnabled: workspaceCloudSyncEnabled, syncStatusLabel: syncStatusMeta.label, workspaceSyncError: workspaceSyncError, syncControlBusy: syncControlBusy, onClose: () => setShowAccountHub(false), onOpenWorkspaceAudit: () => {
+                    setShowAccountHub(false);
+                    void openTeamManagementModal();
+                    setTeamManagementTab('audit');
+                }, onBillingIntervalChange: setBillingIntervalChoice, onRefreshBilling: () => { void loadBillingStatus(); }, onUpdateInterval: () => { void handleSwitchSubscriptionInterval(); }, onManageBilling: () => { void handleOpenBillingPortal(); }, onStartCheckout: () => { void handleStartCheckout(); }, onToggleWorkspaceSync: (enabled) => { void handleWorkspaceSyncToggle(enabled); }, onOpenHelp: () => {
+                    setShowAccountHub(false);
+                    setShowHelpModal(true);
+                } }), _jsx(TeamManagementModal, { isOpen: showTeamManagementModal, theme: currentTheme, teamPlanMode: teamPlanMode, teamMgmtError: teamMgmtError, teamManagementTab: teamManagementTab, teamUsersLoading: teamUsersLoading, teamUsers: teamUsers, teamActionBusyUserId: teamActionBusyUserId, teamInviteFeedback: teamInviteFeedback, teamInviteEmail: teamInviteEmail, teamInviteRole: teamInviteRole, teamInvitePermissionMode: teamInvitePermissionMode, teamInviteBusy: teamInviteBusy, pendingInvites: pendingInvites, teamAuditLoading: teamAuditLoading, teamAuditEvents: teamAuditEvents, teamAuditPage: teamAuditPage, teamAuditPages: teamAuditPages, teamAuditHasMore: teamAuditHasMore, onClose: () => setShowTeamManagementModal(false), onOpenMembersTab: () => {
+                    setTeamManagementTab('members');
+                    void loadTeamUsers();
+                }, onOpenInvitesTab: () => setTeamManagementTab('invites'), onOpenAuditTab: () => {
+                    setTeamManagementTab('audit');
+                    void loadTeamAuditPage(teamAuditPage);
+                }, onMemberRoleChange: (userId, role) => {
+                    void executeTeamUserAction(userId, async () => fetch(`/api/taskforce/admin/users/${encodeURIComponent(userId)}/role`, {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', ...teamAdminHeaders() },
+                        credentials: 'include',
+                        body: JSON.stringify({
+                            workspaceId: teamManagementWorkspaceId,
+                            role
+                        })
+                    }));
+                }, onMemberPermissionChange: (userId, mode) => {
+                    void executeTeamUserAction(userId, async () => fetch(`/api/taskforce/admin/users/${encodeURIComponent(userId)}/permission-mode`, {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', ...teamAdminHeaders() },
+                        credentials: 'include',
+                        body: JSON.stringify({
+                            workspaceId: teamManagementWorkspaceId,
+                            mode
+                        })
+                    }));
+                }, onToggleMemberDisabled: (userId, disabled) => {
+                    void executeTeamUserAction(userId, async () => fetch(`/api/taskforce/admin/users/${encodeURIComponent(userId)}/disable`, {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', ...teamAdminHeaders() },
+                        credentials: 'include',
+                        body: JSON.stringify({
+                            workspaceId: teamManagementWorkspaceId,
+                            disabled
+                        })
+                    }));
+                }, onRevokeInvite: (userId) => {
+                    void executeTeamUserAction(userId, async () => fetch(`/api/taskforce/admin/users/${encodeURIComponent(userId)}/invite/revoke`, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json', ...teamAdminHeaders() },
+                        credentials: 'include',
+                        body: JSON.stringify({ workspaceId: teamManagementWorkspaceId })
+                    }));
+                }, onRemoveMember: (userId) => {
+                    void executeTeamUserAction(userId, async () => fetch(`/api/taskforce/admin/users/${encodeURIComponent(userId)}?workspaceId=${encodeURIComponent(teamManagementWorkspaceId)}`, {
+                        method: 'DELETE',
+                        headers: teamAdminHeaders(),
+                        credentials: 'include'
+                    }));
+                }, onInviteEmailChange: setTeamInviteEmail, onInviteRoleChange: setTeamInviteRole, onInvitePermissionModeChange: setTeamInvitePermissionMode, onSubmitInvite: () => { void submitTeamInvite(); }, onLoadAuditPrevious: () => { void loadTeamAuditPage(teamAuditPage - 1); }, onLoadAuditNext: () => { void loadTeamAuditPage(teamAuditPage + 1); } }), _jsx(CreateWorkspaceConfirmModal, { isOpen: showCreateWorkspaceConfirm, theme: currentTheme, onClose: () => setShowCreateWorkspaceConfirm(false), onConfirm: () => openWorkspaceSetup({ intent: 'create-workspace' }) }), _jsx(SyncStatusModal, { isOpen: showSyncStatusModal, theme: currentTheme, currentWorkspaceLabel: currentWorkspaceLabel, syncStatusMeta: syncStatusMeta, workspaceCloudSyncEnabled: workspaceCloudSyncEnabled, syncControlBusy: syncControlBusy, canManageWorkspaceSync: canManageWorkspaceSync, workspaceSyncSummary: workspaceSyncSummary, workspaceSyncRepairBusy: workspaceSyncRepairBusy, referenceMismatchCount: referenceMismatchCount, syncStageLabel: syncStageLabel, workspaceSyncPendingChanges: workspaceSyncPendingChanges, formattedLastSyncTime: formattedLastSyncTime, formattedLastPullTime: formattedLastPullTime, formattedLastPushTime: formattedLastPushTime, syncLastError: syncLastError, workspaceSyncDiagnostics: workspaceSyncDiagnostics, activeReferenceMismatchSummaries: activeReferenceMismatchSummaries, syncDiagnosticsSummary: syncDiagnosticsSummary, syncEventRows: syncEventRows, syncEventsListRef: syncEventsListRef, workspaceSyncRepairQueued: workspaceSyncRepairQueued, workspaceSyncBusy: workspaceSyncBusy, workspaceSyncCopied: workspaceSyncCopied, runtimeMode: runtimeMode, isAuthenticated: isAuthenticated, onClose: () => setShowSyncStatusModal(false), onToggleWorkspaceSync: (enabled) => {
+                    void handleWorkspaceSyncToggle(enabled);
+                }, onRepairSync: handleQueueOrRunRepairSync, onCopyReport: () => { void handleCopySyncDetails(); }, onOpenLogin: () => {
+                    openSharedLoginRoute('login');
+                }, onRetrySync: () => { void retryWorkspaceCloudSync(); } }), unsavedModalOpen && createPortal(_jsx("div", { className: `${modalStyles.overlay} ${modalStyles.unsavedOverlay}`, style: { zIndex: 2000 }, children: _jsxs("div", { className: `tf-surface-modal tf-modal-shell ${modalStyles.modal} ${modalStyles.unsavedModal}`, "data-theme": currentTheme, children: [_jsx("div", { className: `tf-modal-header ${modalStyles.unsavedHeader}`, children: _jsxs("div", { className: `tf-modal-title ${modalStyles.unsavedTitle}`, children: [_jsx(AlertTriangle, { size: 20 }), "Unsaved Changes"] }) }), _jsx("div", { className: `${modalStyles.form} ${modalStyles.unsavedContent}`, children: _jsx("p", { className: modalStyles.unsavedText, children: "You have unsaved changes. Would you like to save them?" }) }), _jsxs("div", { className: `${modalStyles.formActions} ${modalStyles.unsavedActions}`, children: [_jsx("button", { className: styles.cancelBtn, onClick: () => setUnsavedModalOpen(false), title: "Close dialog and continue editing", children: "Keep Editing" }), _jsx("button", { className: styles.destructiveBtn, onClick: handleDiscard, title: "Discard unsaved changes and leave", children: "Discard" }), _jsxs("button", { className: styles.submitBtn, onClick: handleSaveAndNavigate, disabled: loading, title: "Save changes and leave", children: [loading ? _jsx(Loader2, { size: 16, className: styles.spinner }) : _jsx(Save, { size: 16 }), "Save"] })] })] }) }), document.body), showFolderBrowser && createPortal(_jsx("div", { className: folderBrowserStyles.overlay, children: _jsxs("div", { className: folderBrowserStyles.browser, children: [_jsxs("div", { className: folderBrowserStyles.header, children: [_jsxs("div", { className: folderBrowserStyles.pathInfo, children: [_jsx(Folder, { size: 14 }), _jsx("span", { children: currentBrowsePath || 'Project Root' })] }), _jsxs("div", { className: folderBrowserStyles.actions, children: [currentBrowsePath && (_jsx("button", { className: styles.helpLink, onClick: () => {
                                                 const parts = currentBrowsePath.split('/').filter(Boolean);
                                                 parts.pop();
                                                 fetchFolders(parts.length ? parts.join('/') + '/' : '');