@taskforcehq/taskforce 0.3.304 → 0.3.306

package/dist/components/views/standalone/modals/AccountHubModal.js

@@ -1,25 +1,97 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
 import { Modal } from '../../../ui/Modal';
 import modalStyles from '../../../ui/Modal.module.css';
 import accountStyles from '../../StandaloneAccount.module.css';
 import authStyles from '../../AuthShell.module.css';
 import managementStyles from '../../StandaloneManagement.module.css';
 import styles from '../../../../Taskforce.module.css';
-export function AccountHubModal({ isOpen, theme, runtimeMode, authRequiredForApi, isAuthenticated, hasAuthIdentity, authIdentityLabel, billingLoading, billingError, billingActionError, billingNotice, billingActionBusy, billingIntervalChoice, accountProfileSummary, currentWorkspaceId, canOpenTeamManagement, canManageWorkspaceSync, workspaceCloudSyncEnabled, syncStatusLabel, workspaceSyncError, syncControlBusy, onClose, onOpenWorkspaceAudit, onBillingIntervalChange, onRefreshBilling, onUpdateInterval, onManageBilling, onStartCheckout, onToggleWorkspaceSync, onOpenHelp, }) {
-    const billingGate = String(accountProfileSummary?.gate || '').trim().toLowerCase();
-    const billingConflictCode = String(accountProfileSummary?.billingConflictCode || '').trim().toUpperCase();
-    const billingRecoveryMessage = String(accountProfileSummary?.message || '').trim()
-        || (billingConflictCode === 'CHECKOUT_SESSION_EXPIRED'
-            ? 'Your latest checkout expired. Choose a plan to continue.'
-            : (billingConflictCode === 'CHECKOUT_SESSION_SUPERSEDED'
-                ? 'A newer checkout is already in progress for this account. Open plans to continue.'
-                : ''));
-    const startCheckoutLabel = billingConflictCode === 'CHECKOUT_SESSION_EXPIRED'
-        || accountProfileSummary?.planSelectionRequired === true
-        || billingGate === 'plan_selection_required'
-        ? 'Choose Plan'
-        : (billingGate === 'checkout_pending' ? 'Open Plans' : 'Start Checkout');
+import { resolveCommercialLifecyclePresentation } from '../../../../utils/commercialLifecyclePresentation';
+import { getPasswordPolicyGuidance, validatePasswordPolicy } from '../../../../shared/passwordPolicy';
+export function AccountHubModal({ isOpen, theme, runtimeMode, authRequiredForApi, isAuthenticated, hasAuthIdentity, authIdentityLabel, billingLoading, billingError, billingActionError, billingNotice, billingActionBusy, billingIntervalChoice, accountProfileSummary, currentWorkspaceId, canOpenTeamManagement, canManageWorkspaceSync, workspaceCloudSyncEnabled, syncStatusLabel, workspaceSyncError, syncControlBusy, cloudAuthEnabled, availableAuthProviders, onFetchLoginMethods, onUnlinkLoginMethod, onAddPassword, onLinkProvider, onClose, onOpenWorkspaceAudit, onBillingIntervalChange, onRefreshBilling, onUpdateInterval, onManageBilling, onStartCheckout, onToggleWorkspaceSync, onOpenHelp, }) {
+    const lifecyclePresentation = resolveCommercialLifecyclePresentation(accountProfileSummary);
+    const addPasswordGuidance = getPasswordPolicyGuidance();
+    const billingRecoveryMessage = lifecyclePresentation.message;
+    const startCheckoutLabel = lifecyclePresentation.primaryLabel || 'Start Checkout';
     const resolvedPlanLabel = String(accountProfileSummary?.planName || accountProfileSummary?.planId || 'n/a').trim() || 'n/a';
+    const primaryBillingAction = () => {
+        if (lifecyclePresentation.primaryAction === 'manage_billing') {
+            onManageBilling();
+            return;
+        }
+        onStartCheckout();
+    };
+    // ── Login methods state ──────────────────────────────────────────────────────
+    const [loginMethods, setLoginMethods] = useState([]);
+    const [loginMethodsLoading, setLoginMethodsLoading] = useState(false);
+    const [loginMethodsError, setLoginMethodsError] = useState(null);
+    const [unlinkBusy, setUnlinkBusy] = useState(null); // provider being unlinked
+    const [unlinkError, setUnlinkError] = useState(null);
+    const [showAddPassword, setShowAddPassword] = useState(false);
+    const [addPasswordValue, setAddPasswordValue] = useState('');
+    const [addPasswordBusy, setAddPasswordBusy] = useState(false);
+    const [addPasswordError, setAddPasswordError] = useState(null);
+    const [addPasswordDone, setAddPasswordDone] = useState(false);
+    // Reload login methods whenever the modal opens (and auth is available)
+    useEffect(() => {
+        if (!isOpen || !isAuthenticated || !cloudAuthEnabled)
+            return;
+        setLoginMethodsLoading(true);
+        setLoginMethodsError(null);
+        onFetchLoginMethods().then(result => {
+            setLoginMethodsLoading(false);
+            if (result.success && result.methods) {
+                setLoginMethods(result.methods);
+            }
+            else {
+                setLoginMethodsError(result.error || 'Failed to load login methods.');
+            }
+        });
+    }, [isOpen, isAuthenticated, cloudAuthEnabled, onFetchLoginMethods]);
+    const handleUnlink = async (provider) => {
+        setUnlinkBusy(provider);
+        setUnlinkError(null);
+        const result = await onUnlinkLoginMethod(provider);
+        setUnlinkBusy(null);
+        if (!result.success) {
+            setUnlinkError(result.error || 'Unlink failed.');
+        }
+        else {
+            setLoginMethods(prev => prev.filter(m => m.provider !== provider));
+        }
+    };
+    const handleAddPassword = async () => {
+        const validation = validatePasswordPolicy(addPasswordValue);
+        if (!validation.ok) {
+            setAddPasswordError(validation.message || 'Password does not meet the password policy.');
+            return;
+        }
+        setAddPasswordBusy(true);
+        setAddPasswordError(null);
+        const result = await onAddPassword(addPasswordValue);
+        setAddPasswordBusy(false);
+        if (!result.success) {
+            setAddPasswordError(result.error || 'Failed to add password.');
+        }
+        else {
+            setAddPasswordDone(true);
+            setAddPasswordValue('');
+            setShowAddPassword(false);
+            // Refresh the list to show the new password method
+            const updated = await onFetchLoginMethods();
+            if (updated.success && updated.methods)
+                setLoginMethods(updated.methods);
+        }
+    };
+    const PROVIDER_LABELS = {
+        password: 'Email & Password',
+        google: 'Google',
+        github: 'GitHub',
+        apple: 'Apple',
+    };
+    const linkedProviders = new Set(loginMethods.map(m => m.provider));
+    const hasPassword = linkedProviders.has('password');
+    const linkableProviders = availableAuthProviders.filter(p => p !== 'password' && !linkedProviders.has(p));
     return (_jsx(Modal, { isOpen: isOpen, onClose: onClose, title: "Account Hub", size: "md", theme: theme, 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.')
@@ -28,7 +100,7 @@ export function AccountHubModal({ isOpen, theme, runtimeMode, authRequiredForApi
                                 ? (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 })), billingRecoveryMessage && (_jsx("p", { className: managementStyles.sectionText, children: billingRecoveryMessage })), _jsxs("p", { className: managementStyles.sectionTextSpaced, children: ["Plan: ", _jsx("code", { children: resolvedPlanLabel }), ' · ', "Entitlement: ", _jsx("code", { children: String(accountProfileSummary?.entitlementState || 'n/a') })] }), _jsxs("p", { className: managementStyles.sectionText, children: ["Stripe status: ", _jsx("code", { children: String(accountProfileSummary?.stripeStatus || 'n/a') }), accountProfileSummary?.effectiveUntil ? ` · Effective until ${new Date(accountProfileSummary.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) => onBillingIntervalChange(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: onRefreshBilling, disabled: billingActionBusy || billingLoading, children: "Refresh Billing" }), _jsx("button", { className: styles.cancelBtn, onClick: onUpdateInterval, disabled: billingActionBusy || !accountProfileSummary?.stripeSubscriptionId, children: "Update Interval" }), _jsx("button", { className: styles.cancelBtn, onClick: onManageBilling, disabled: billingActionBusy || !accountProfileSummary?.stripeCustomerId, children: "Manage Billing" }), _jsx("button", { className: styles.submitBtn, onClick: onStartCheckout, disabled: billingActionBusy, children: billingActionBusy ? 'Working...' : startCheckoutLabel })] })] }))] }), _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: onOpenWorkspaceAudit, 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
+                                : 'Signed in as: not signed in' }), runtimeMode === 'cloud' && authRequiredForApi && !isAuthenticated && (_jsx("p", { className: managementStyles.sectionTextTop, children: "Use the `/login` screen to sign in." }))] }), isAuthenticated && cloudAuthEnabled && (_jsxs("div", { className: accountStyles.accountHubCard, children: [_jsx("strong", { children: "Login Methods" }), loginMethodsLoading && (_jsx("p", { className: managementStyles.sectionText, children: "Loading..." })), loginMethodsError && (_jsx("p", { className: `${authStyles.loginError} ${managementStyles.errorText}`, children: loginMethodsError })), unlinkError && (_jsx("p", { className: `${authStyles.loginError} ${managementStyles.errorText}`, children: unlinkError })), addPasswordDone && (_jsx("p", { className: managementStyles.sectionText, style: { color: 'var(--color-success, #4ade80)' }, children: "Password login added." })), !loginMethodsLoading && loginMethods.length > 0 && (_jsx("div", { style: { marginTop: 8, display: 'grid', gap: 6 }, children: loginMethods.map(method => (_jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, flexWrap: 'wrap' }, children: [_jsxs("span", { className: managementStyles.sectionText, children: [_jsx("strong", { children: PROVIDER_LABELS[method.provider] || method.provider }), method.providerEmail ? _jsxs(_Fragment, { children: [" \u00B7 ", _jsx("span", { className: accountStyles.accountMenuMeta, children: method.providerEmail })] }) : null] }), loginMethods.length > 1 && (_jsx("button", { className: styles.cancelBtn, style: { fontSize: 11, padding: '2px 8px' }, disabled: unlinkBusy === method.provider, onClick: () => handleUnlink(method.provider), children: unlinkBusy === method.provider ? 'Removing…' : 'Remove' }))] }, method.provider))) })), !loginMethodsLoading && !hasPassword && !showAddPassword && (_jsx("div", { className: managementStyles.actionRowEnd, children: _jsx("button", { className: styles.cancelBtn, onClick: () => { setShowAddPassword(true); setAddPasswordDone(false); setAddPasswordError(null); }, children: "Add Password Login" }) })), showAddPassword && (_jsxs("div", { style: { marginTop: 10, display: 'grid', gap: 6 }, children: [_jsxs("label", { className: accountStyles.accountMenuMeta, style: { display: 'block' }, children: ["New password", _jsx("input", { type: "password", className: styles.input, placeholder: "Use 12+ characters", value: addPasswordValue, onChange: e => setAddPasswordValue(e.target.value), disabled: addPasswordBusy, style: { marginTop: 4, display: 'block', width: '100%' }, autoComplete: "new-password" })] }), _jsx("p", { className: accountStyles.accountMenuMeta, style: { margin: 0 }, children: addPasswordGuidance.join(' ') }), addPasswordError && (_jsx("p", { className: `${authStyles.loginError} ${managementStyles.errorText}`, children: addPasswordError })), _jsxs("div", { className: managementStyles.actionRowEnd, children: [_jsx("button", { className: styles.cancelBtn, onClick: () => { setShowAddPassword(false); setAddPasswordValue(''); setAddPasswordError(null); }, disabled: addPasswordBusy, children: "Cancel" }), _jsx("button", { className: styles.submitBtn, onClick: handleAddPassword, disabled: addPasswordBusy || !addPasswordValue, children: addPasswordBusy ? 'Saving…' : 'Save Password' })] })] })), !loginMethodsLoading && linkableProviders.length > 0 && (_jsxs("div", { style: { marginTop: 10 }, children: [_jsx("p", { className: accountStyles.accountMenuMeta, style: { marginBottom: 6 }, children: "Link another account:" }), _jsx("div", { className: authStyles.oauthButtons, children: linkableProviders.map(provider => (_jsx("button", { className: authStyles.oauthButton, onClick: () => onLinkProvider(provider), children: PROVIDER_LABELS[provider] || provider }, provider))) })] }))] })), _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 })), billingRecoveryMessage && (_jsx("p", { className: managementStyles.sectionText, children: billingRecoveryMessage })), _jsxs("p", { className: managementStyles.sectionTextSpaced, children: ["Plan: ", _jsx("code", { children: resolvedPlanLabel }), ' · ', "Entitlement: ", _jsx("code", { children: String(accountProfileSummary?.entitlementState || 'n/a') })] }), _jsxs("p", { className: managementStyles.sectionText, children: ["Stripe status: ", _jsx("code", { children: String(accountProfileSummary?.stripeStatus || 'n/a') }), accountProfileSummary?.effectiveUntil ? ` · Effective until ${new Date(accountProfileSummary.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) => onBillingIntervalChange(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: onRefreshBilling, disabled: billingActionBusy || billingLoading, children: "Refresh Billing" }), _jsx("button", { className: styles.cancelBtn, onClick: onUpdateInterval, disabled: billingActionBusy || !accountProfileSummary?.stripeSubscriptionId, children: "Update Interval" }), _jsx("button", { className: styles.cancelBtn, onClick: onManageBilling, disabled: billingActionBusy || !accountProfileSummary?.stripeCustomerId, children: "Manage Billing" }), _jsx("button", { className: styles.submitBtn, onClick: primaryBillingAction, disabled: billingActionBusy || (lifecyclePresentation.primaryAction === 'manage_billing' && !accountProfileSummary?.stripeCustomerId), children: billingActionBusy ? 'Working...' : startCheckoutLabel })] })] }))] }), _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: onOpenWorkspaceAudit, 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 · ${syncStatusLabel}`
                                     : 'Disabled')

package/dist/components/views/standalone/modals/AccountHubModal.test.js

@@ -16,11 +16,51 @@ describe('AccountHubModal', () => {
                 message: 'Your latest checkout expired. Choose a plan to continue.',
                 billingConflictCode: 'CHECKOUT_SESSION_EXPIRED',
                 planSelectionRequired: true
-            }, currentWorkspaceId: "workspace-1", canOpenTeamManagement: false, canManageWorkspaceSync: false, workspaceCloudSyncEnabled: false, syncStatusLabel: "Disabled", workspaceSyncError: null, syncControlBusy: false, onClose: () => { }, onOpenWorkspaceAudit: () => { }, onBillingIntervalChange: () => { }, onRefreshBilling: () => { }, onUpdateInterval: () => { }, onManageBilling: () => { }, onStartCheckout: onStartCheckout, onToggleWorkspaceSync: () => { }, onOpenHelp: () => { } }));
-        expect(screen.getByText('Your latest checkout expired. Choose a plan to continue.')).toBeInTheDocument();
+            }, currentWorkspaceId: "workspace-1", canOpenTeamManagement: false, canManageWorkspaceSync: false, workspaceCloudSyncEnabled: false, syncStatusLabel: "Disabled", workspaceSyncError: null, syncControlBusy: false, cloudAuthEnabled: true, availableAuthProviders: [], onFetchLoginMethods: async () => ({ success: true, methods: [] }), onUnlinkLoginMethod: async () => ({ success: true }), onAddPassword: async () => ({ success: true }), onLinkProvider: () => { }, onClose: () => { }, onOpenWorkspaceAudit: () => { }, onBillingIntervalChange: () => { }, onRefreshBilling: () => { }, onUpdateInterval: () => { }, onManageBilling: () => { }, onStartCheckout: onStartCheckout, onToggleWorkspaceSync: () => { }, onOpenHelp: () => { } }));
+        expect(screen.getByText('Your previous checkout expired. Choose a plan to continue.')).toBeInTheDocument();
         expect(screen.getByText('Pro Plan')).toBeInTheDocument();
         const cta = screen.getByRole('button', { name: 'Choose Plan' });
         fireEvent.click(cta);
         expect(onStartCheckout).toHaveBeenCalledTimes(1);
     });
+    it('makes billing recovery the primary action for suspended accounts', () => {
+        const onManageBilling = vi.fn();
+        render(_jsx(AccountHubModal, { isOpen: true, theme: "dark", runtimeMode: "cloud", authRequiredForApi: true, isAuthenticated: true, hasAuthIdentity: true, authIdentityLabel: "owner@example.com", billingLoading: false, billingError: null, billingActionError: null, billingNotice: null, billingActionBusy: false, billingIntervalChoice: "month", accountProfileSummary: {
+                planId: 'pro',
+                planName: 'Pro Plan',
+                entitlementState: 'suspended',
+                stripeCustomerId: 'cus_123'
+            }, currentWorkspaceId: "workspace-1", canOpenTeamManagement: false, canManageWorkspaceSync: false, workspaceCloudSyncEnabled: false, syncStatusLabel: "Disabled", workspaceSyncError: null, syncControlBusy: false, cloudAuthEnabled: true, availableAuthProviders: [], onFetchLoginMethods: async () => ({ success: true, methods: [] }), onUnlinkLoginMethod: async () => ({ success: true }), onAddPassword: async () => ({ success: true }), onLinkProvider: () => { }, onClose: () => { }, onOpenWorkspaceAudit: () => { }, onBillingIntervalChange: () => { }, onRefreshBilling: () => { }, onUpdateInterval: () => { }, onManageBilling: onManageBilling, onStartCheckout: () => { }, onToggleWorkspaceSync: () => { }, onOpenHelp: () => { } }));
+        expect(screen.getByText('Your access is suspended because billing needs attention. Update billing to restore access.')).toBeInTheDocument();
+        fireEvent.click(screen.getAllByRole('button', { name: 'Manage Billing' })[1]);
+        expect(onManageBilling).toHaveBeenCalledTimes(1);
+    });
+    it('shows trialing accounts as active without blocked recovery copy', () => {
+        render(_jsx(AccountHubModal, { isOpen: true, theme: "dark", runtimeMode: "cloud", authRequiredForApi: true, isAuthenticated: true, hasAuthIdentity: true, authIdentityLabel: "owner@example.com", billingLoading: false, billingError: null, billingActionError: null, billingNotice: null, billingActionBusy: false, billingIntervalChoice: "month", accountProfileSummary: {
+                planId: 'starter',
+                planName: 'Starter',
+                entitlementState: 'trialing',
+                stripeCustomerId: 'cus_123',
+                trialEnd: '2026-05-01T12:00:00.000Z'
+            }, currentWorkspaceId: "workspace-1", canOpenTeamManagement: false, canManageWorkspaceSync: false, workspaceCloudSyncEnabled: false, syncStatusLabel: "Disabled", workspaceSyncError: null, syncControlBusy: false, cloudAuthEnabled: true, availableAuthProviders: [], onFetchLoginMethods: async () => ({ success: true, methods: [] }), onUnlinkLoginMethod: async () => ({ success: true }), onAddPassword: async () => ({ success: true }), onLinkProvider: () => { }, onClose: () => { }, onOpenWorkspaceAudit: () => { }, onBillingIntervalChange: () => { }, onRefreshBilling: () => { }, onUpdateInterval: () => { }, onManageBilling: () => { }, onStartCheckout: () => { }, onToggleWorkspaceSync: () => { }, onOpenHelp: () => { } }));
+        expect(screen.getByText(/Your trial is active through/)).toBeInTheDocument();
+        expect(screen.queryByText('Your access is suspended because billing needs attention. Update billing to restore access.')).not.toBeInTheDocument();
+    });
+    it('shows an updating message instead of an expired active-trial date', () => {
+        const nowSpy = vi.spyOn(Date, 'now').mockReturnValue(new Date('2026-04-20T12:00:00.000Z').getTime());
+        try {
+            render(_jsx(AccountHubModal, { isOpen: true, theme: "dark", runtimeMode: "cloud", authRequiredForApi: true, isAuthenticated: true, hasAuthIdentity: true, authIdentityLabel: "owner@example.com", billingLoading: false, billingError: null, billingActionError: null, billingNotice: null, billingActionBusy: false, billingIntervalChoice: "month", accountProfileSummary: {
+                    planId: 'starter',
+                    planName: 'Starter',
+                    entitlementState: 'trialing',
+                    stripeCustomerId: 'cus_123',
+                    trialEnd: '2026-04-12T16:09:09.000Z'
+                }, currentWorkspaceId: "workspace-1", canOpenTeamManagement: false, canManageWorkspaceSync: false, workspaceCloudSyncEnabled: false, syncStatusLabel: "Disabled", workspaceSyncError: null, syncControlBusy: false, cloudAuthEnabled: true, availableAuthProviders: [], onFetchLoginMethods: async () => ({ success: true, methods: [] }), onUnlinkLoginMethod: async () => ({ success: true }), onAddPassword: async () => ({ success: true }), onLinkProvider: () => { }, onClose: () => { }, onOpenWorkspaceAudit: () => { }, onBillingIntervalChange: () => { }, onRefreshBilling: () => { }, onUpdateInterval: () => { }, onManageBilling: () => { }, onStartCheckout: () => { }, onToggleWorkspaceSync: () => { }, onOpenHelp: () => { } }));
+            expect(screen.getByText('Your trial end date has passed. Billing status is updating.')).toBeInTheDocument();
+            expect(screen.queryByText(/Your trial is active through/)).not.toBeInTheDocument();
+        }
+        finally {
+            nowSpy.mockRestore();
+        }
+    });
 });

package/dist/components/views/standalone/modals/AvatarImageManagerModal.d.ts

@@ -0,0 +1,20 @@
+import type { ModalThemeName } from './types';
+export interface AvatarImageManagerModalProps {
+    isOpen: boolean;
+    theme: ModalThemeName;
+    title?: string;
+    currentImageUrl: string;
+    editorImageUrl?: string;
+    fallbackInitial: string;
+    accept: string;
+    busy: boolean;
+    hasPendingImage: boolean;
+    canRemove: boolean;
+    error: string | null;
+    notice: string | null;
+    onClose: () => void;
+    onApplyImage: (file: File, sourceFile?: File | null) => Promise<boolean> | boolean;
+    onRemoveImage?: () => void;
+    onDiscardPendingImage?: () => void;
+}
+export declare function AvatarImageManagerModal({ isOpen, theme, title, currentImageUrl, editorImageUrl: editorImageUrlProp, fallbackInitial, accept, busy, hasPendingImage, canRemove, error, notice, onClose, onApplyImage, onRemoveImage, onDiscardPendingImage, }: AvatarImageManagerModalProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/views/standalone/modals/AvatarImageManagerModal.js

@@ -0,0 +1,127 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import AvatarEditor from 'react-avatar-editor';
+import { ImagePlus, RotateCcw, Trash2 } from 'lucide-react';
+import { Modal } from '../../../ui/Modal';
+import styles from '../../../../Taskforce.module.css';
+import avatarStyles from './AvatarImageManagerModal.module.css';
+const EDITOR_SIZE = 512;
+const EDITOR_BORDER = 48;
+const OUTPUT_SIZE = 512;
+function canvasToBlob(canvas, type, quality) {
+    return new Promise((resolve) => {
+        canvas.toBlob(resolve, type, quality);
+    });
+}
+function replaceExtension(name, extension) {
+    const trimmed = String(name || '').trim() || 'avatar';
+    const dotIndex = trimmed.lastIndexOf('.');
+    if (dotIndex <= 0)
+        return `${trimmed}${extension}`;
+    return `${trimmed.slice(0, dotIndex)}${extension}`;
+}
+async function exportAvatarEditorFile(editor, sourceName) {
+    const sourceCanvas = editor.getImageScaledToCanvas();
+    const outputCanvas = document.createElement('canvas');
+    outputCanvas.width = OUTPUT_SIZE;
+    outputCanvas.height = OUTPUT_SIZE;
+    const context = outputCanvas.getContext('2d');
+    if (!context) {
+        throw new Error('Image editing requires a 2D canvas context.');
+    }
+    context.drawImage(sourceCanvas, 0, 0, OUTPUT_SIZE, OUTPUT_SIZE);
+    const webpBlob = await canvasToBlob(outputCanvas, 'image/webp', 0.9);
+    const blob = webpBlob || await canvasToBlob(outputCanvas, 'image/jpeg', 0.9);
+    if (!blob) {
+        throw new Error('Unable to prepare profile photo.');
+    }
+    const type = blob.type || 'image/jpeg';
+    const extension = type === 'image/webp' ? '.webp' : '.jpg';
+    return new File([blob], replaceExtension(sourceName, extension), {
+        type,
+        lastModified: Date.now()
+    });
+}
+export function AvatarImageManagerModal({ isOpen, theme, title = 'Edit Photo', currentImageUrl, editorImageUrl: editorImageUrlProp = '', fallbackInitial, accept, busy, hasPendingImage, canRemove, error, notice, onClose, onApplyImage, onRemoveImage, onDiscardPendingImage, }) {
+    const editorRef = useRef(null);
+    const fileInputRef = useRef(null);
+    const [selectedFile, setSelectedFile] = useState(null);
+    const [selectedObjectUrl, setSelectedObjectUrl] = useState('');
+    const [scale, setScale] = useState(1.1);
+    const [localError, setLocalError] = useState(null);
+    const [localNotice, setLocalNotice] = useState(null);
+    useEffect(() => {
+        if (!isOpen) {
+            setSelectedFile(null);
+            setSelectedObjectUrl('');
+            setScale(1.1);
+            setLocalError(null);
+            setLocalNotice(null);
+        }
+    }, [isOpen]);
+    useEffect(() => {
+        if (!selectedFile) {
+            setSelectedObjectUrl('');
+            return;
+        }
+        const objectUrl = URL.createObjectURL(selectedFile);
+        setSelectedObjectUrl(objectUrl);
+        return () => URL.revokeObjectURL(objectUrl);
+    }, [selectedFile]);
+    const editorImage = selectedObjectUrl || editorImageUrlProp || currentImageUrl;
+    const sourceName = selectedFile?.name || 'avatar';
+    const displayInitial = String(fallbackInitial || '').trim().charAt(0).toUpperCase();
+    const effectiveError = localError || error;
+    const effectiveNotice = localNotice || notice;
+    const handleSelectedFile = useCallback((file) => {
+        setLocalError(null);
+        setLocalNotice(null);
+        if (!file)
+            return;
+        if (!file.type.startsWith('image/')) {
+            setLocalError('Profile photo must be an image file.');
+            return;
+        }
+        if (file.type === 'image/gif') {
+            setLocalNotice('Animated GIFs will upload without repositioning.');
+        }
+        setSelectedFile(file);
+        setScale(1.1);
+    }, []);
+    const handleApply = useCallback(async () => {
+        setLocalError(null);
+        const editor = editorRef.current;
+        if (selectedFile?.type === 'image/gif') {
+            const applied = await onApplyImage(selectedFile);
+            if (applied) {
+                onClose();
+            }
+            return;
+        }
+        if (!editor || !editorImage) {
+            setLocalError('Choose a profile photo first.');
+            return;
+        }
+        try {
+            const file = await exportAvatarEditorFile(editor, sourceName);
+            const applied = await onApplyImage(file, selectedFile);
+            if (applied) {
+                onClose();
+            }
+        }
+        catch (nextError) {
+            setLocalError(nextError instanceof Error ? nextError.message : 'Unable to prepare profile photo.');
+        }
+    }, [editorImage, onApplyImage, onClose, selectedFile, sourceName]);
+    const canApply = selectedFile?.type === 'image/gif' || Boolean(editorImage);
+    const footer = useMemo(() => (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: styles.secondaryButton, onClick: onClose, disabled: busy, children: "Cancel" }), _jsx("button", { type: "button", className: styles.primaryUpdateBtn, onClick: () => { void handleApply(); }, disabled: busy || !canApply, children: busy ? 'Applying...' : 'Apply Photo' })] })), [busy, canApply, handleApply, onClose]);
+    return (_jsx(Modal, { isOpen: isOpen, onClose: onClose, title: title, size: "md", theme: theme, draggable: true, footer: footer, children: _jsxs("div", { className: avatarStyles.avatarManagerBody, children: [_jsxs("div", { className: avatarStyles.editorPanel, children: [_jsx("div", { className: `tf-surface-inset ${avatarStyles.editorFrame}`, children: selectedFile?.type === 'image/gif' && selectedObjectUrl ? (_jsx("img", { src: selectedObjectUrl, alt: "", className: avatarStyles.gifPreviewImage })) : editorImage ? (_jsx(AvatarEditor, { ref: editorRef, image: editorImage, width: EDITOR_SIZE, height: EDITOR_SIZE, border: EDITOR_BORDER, borderRadius: EDITOR_SIZE / 2, scale: scale, color: [15, 15, 26, 0.72], backgroundColor: "transparent", style: {
+                                    width: '100%',
+                                    height: '100%',
+                                    maxWidth: '100%',
+                                    maxHeight: '100%',
+                                    display: 'block',
+                                    borderRadius: 'var(--radius-lg)',
+                                    boxShadow: 'var(--box-shadow-sm)'
+                                }, disableCanvasRotation: true })) : (_jsx("div", { className: avatarStyles.emptyPreview, "aria-hidden": "true", children: displayInitial })) }), _jsxs("div", { className: avatarStyles.controlPanel, children: [_jsx("input", { ref: fileInputRef, type: "file", "aria-label": "Choose profile photo", accept: accept, className: avatarStyles.fileInput, onChange: (event) => handleSelectedFile(event.target.files?.[0] || null), disabled: busy }), _jsxs("div", { className: avatarStyles.actionGrid, children: [_jsxs("button", { type: "button", className: "tf-button-secondary tf-button-compact", onClick: () => fileInputRef.current?.click(), disabled: busy, children: [_jsx(ImagePlus, { size: 16 }), "Choose"] }), hasPendingImage && onDiscardPendingImage && (_jsxs("button", { type: "button", className: "tf-button-secondary tf-button-compact", onClick: onDiscardPendingImage, disabled: busy, children: [_jsx(RotateCcw, { size: 16 }), "Discard"] })), canRemove && onRemoveImage && (_jsxs("button", { type: "button", className: "tf-button-destructive tf-button-compact", onClick: onRemoveImage, disabled: busy, children: [_jsx(Trash2, { size: 16 }), "Remove"] }))] }), _jsxs("label", { className: `tf-field-stack ${avatarStyles.zoomField}`, children: [_jsx("span", { className: "tf-field-label", children: "Zoom" }), _jsx("input", { type: "range", min: "1", max: "3", step: "0.01", value: scale, onChange: (event) => setScale(Number(event.target.value)), className: avatarStyles.zoomSlider, disabled: busy || !editorImage || selectedFile?.type === 'image/gif' })] })] })] }), (effectiveError || effectiveNotice) && (_jsxs("div", { className: avatarStyles.messageStack, children: [effectiveError && _jsx("p", { className: "tf-text-error", children: effectiveError }), effectiveNotice && !effectiveError && _jsx("p", { className: "tf-text-helper", children: effectiveNotice })] }))] }) }));
+}

package/dist/components/views/standalone/modals/EditProfileModal.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { ModalThemeName } from './types';
 interface EditProfileModalProps {
     isOpen: boolean;
@@ -9,18 +8,12 @@ interface EditProfileModalProps {
     email: string;
     avatarDisplayUrl: string;
     accountBadgeInitial: string;
-    avatarInputRef: React.RefObject<HTMLInputElement | null>;
-    avatarAccept: string;
-    avatarDraftId: string | null;
     saveBusy: boolean;
     avatarBusy: boolean;
     saveError: string | null;
     saveNotice: string | null;
     onDisplayNameChange: (value: string) => void;
-    onAvatarInputChange: (file: File | null) => void;
-    onStartAvatarUpload: () => void;
-    onDiscardUpload: () => void;
-    onRemovePhoto: () => void;
+    onOpenAvatarManager: () => void;
 }
-export declare function EditProfileModal({ isOpen, theme, onClose, onSave, displayName, email, avatarDisplayUrl, accountBadgeInitial, avatarInputRef, avatarAccept, avatarDraftId, saveBusy, avatarBusy, saveError, saveNotice, onDisplayNameChange, onAvatarInputChange, onStartAvatarUpload, onDiscardUpload, onRemovePhoto, }: EditProfileModalProps): import("react/jsx-runtime").JSX.Element;
+export declare function EditProfileModal({ isOpen, theme, onClose, onSave, displayName, email, avatarDisplayUrl, accountBadgeInitial, saveBusy, avatarBusy, saveError, saveNotice, onDisplayNameChange, onOpenAvatarManager, }: EditProfileModalProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/views/standalone/modals/EditProfileModal.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Modal } from '../../../ui/Modal';
+import { EditableAvatarButton } from '../../../ui/EditableAvatarButton';
 import modalStyles from '../../../ui/Modal.module.css';
 import accountStyles from '../../StandaloneAccount.module.css';
 import authStyles from '../../AuthShell.module.css';
 import managementStyles from '../../StandaloneManagement.module.css';
 import styles from '../../../../Taskforce.module.css';
-export function EditProfileModal({ isOpen, theme, onClose, onSave, displayName, email, avatarDisplayUrl, accountBadgeInitial, avatarInputRef, avatarAccept, avatarDraftId, saveBusy, avatarBusy, saveError, saveNotice, onDisplayNameChange, onAvatarInputChange, onStartAvatarUpload, onDiscardUpload, onRemovePhoto, }) {
-    return (_jsx(Modal, { isOpen: isOpen, onClose: onClose, title: "Edit Profile", size: "sm", theme: theme, draggable: true, footer: (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: styles.secondaryButton, onClick: onClose, disabled: saveBusy || avatarBusy, children: "Cancel" }), _jsx("button", { type: "button", className: styles.primaryUpdateBtn, onClick: onSave, disabled: saveBusy || avatarBusy || !displayName.trim(), children: saveBusy ? '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("div", { className: accountStyles.profileAvatarEditor, children: [_jsx("div", { className: accountStyles.profileAvatarPreview, "aria-label": "Profile photo preview", children: avatarDisplayUrl ? (_jsx("img", { src: avatarDisplayUrl, alt: "", className: accountStyles.profileAvatarImage })) : (_jsx("span", { children: accountBadgeInitial })) }), _jsxs("div", { className: accountStyles.profileAvatarActions, children: [_jsx("input", { ref: avatarInputRef, type: "file", "aria-label": "Upload profile photo", accept: avatarAccept, className: accountStyles.profileAvatarInput, onChange: (event) => onAvatarInputChange(event.target.files?.[0] || null), disabled: saveBusy || avatarBusy }), _jsx("button", { type: "button", className: styles.secondaryButton, onClick: onStartAvatarUpload, disabled: saveBusy || avatarBusy, children: avatarBusy ? 'Uploading...' : 'Upload Photo' }), avatarDraftId && (_jsx("button", { type: "button", className: styles.secondaryButton, onClick: onDiscardUpload, disabled: saveBusy || avatarBusy, children: "Discard Upload" })), avatarDisplayUrl && (_jsx("button", { type: "button", className: styles.secondaryButton, onClick: onRemovePhoto, disabled: saveBusy || avatarBusy, children: "Remove Photo" }))] })] }), _jsxs("label", { className: managementStyles.inlineFieldLabel, children: ["Display name", _jsx("input", { className: styles.input, type: "text", value: displayName, onChange: (event) => onDisplayNameChange(event.target.value), placeholder: "Display name", disabled: saveBusy })] }), _jsxs("label", { className: managementStyles.inlineFieldLabel, children: ["Email", _jsx("input", { className: styles.input, type: "email", value: email, readOnly: true, disabled: true })] }), saveError && (_jsx("p", { className: `${authStyles.loginError} ${managementStyles.errorText}`, children: saveError })), saveNotice && !saveError && (_jsx("p", { className: managementStyles.errorText, children: saveNotice }))] }) }));
+export function EditProfileModal({ isOpen, theme, onClose, onSave, displayName, email, avatarDisplayUrl, accountBadgeInitial, saveBusy, avatarBusy, saveError, saveNotice, onDisplayNameChange, onOpenAvatarManager, }) {
+    return (_jsx(Modal, { isOpen: isOpen, onClose: onClose, title: "Edit Profile", size: "sm", theme: theme, draggable: true, footer: (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: styles.secondaryButton, onClick: onClose, disabled: saveBusy || avatarBusy, children: "Cancel" }), _jsx("button", { type: "button", className: styles.primaryUpdateBtn, onClick: onSave, disabled: saveBusy || avatarBusy || !displayName.trim(), children: saveBusy ? 'Saving...' : 'Save Profile' })] })), children: _jsxs("div", { className: `${modalStyles.form} ${managementStyles.modalBody}`, children: [_jsxs("div", { className: accountStyles.profileEditLayout, children: [_jsx("div", { className: accountStyles.profileAvatarEditor, children: _jsx(EditableAvatarButton, { label: "Edit profile photo", imageUrl: avatarDisplayUrl, fallback: accountBadgeInitial, disabled: saveBusy || avatarBusy, onClick: onOpenAvatarManager }) }), _jsxs("div", { className: accountStyles.profileFieldStack, children: [_jsxs("label", { className: accountStyles.profileFieldLabel, children: [_jsx("span", { children: "Display name" }), _jsx("input", { className: styles.input, type: "text", value: displayName, onChange: (event) => onDisplayNameChange(event.target.value), placeholder: "Display name", disabled: saveBusy })] }), _jsxs("label", { className: accountStyles.profileFieldLabel, children: [_jsx("span", { children: "Email" }), _jsx("input", { className: styles.input, type: "email", value: email, readOnly: true, disabled: true })] })] })] }), saveError && (_jsx("p", { className: `${authStyles.loginError} ${managementStyles.errorText}`, children: saveError })), saveNotice && !saveError && (_jsx("p", { className: managementStyles.errorText, children: saveNotice }))] }) }));
 }

package/dist/components/views/standalone/modals/SyncEnableWarningModal.d.ts

@@ -0,0 +1,9 @@
+import type { ModalThemeName } from './types';
+interface SyncEnableWarningModalProps {
+    isOpen: boolean;
+    theme: ModalThemeName;
+    onClose: () => void;
+    onConfirm: () => void;
+}
+export declare function SyncEnableWarningModal({ isOpen, theme, onClose, onConfirm }: SyncEnableWarningModalProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/views/standalone/modals/SyncEnableWarningModal.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Modal } from '../../../ui/Modal';
+import styles from '../../../../Taskforce.module.css';
+export function SyncEnableWarningModal({ isOpen, theme, onClose, onConfirm }) {
+    return (_jsx(Modal, { isOpen: isOpen, onClose: onClose, title: "Cloud Sync Warning", size: "sm", theme: theme, 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: "Turning on cloud sync can renumber task, document, and image references to match the cloud workspace." }), _jsxs("p", { className: "tf-text-helper", children: ["Labels like ", _jsx("code", { children: "T-12" }), ", ", _jsx("code", { children: "D-4" }), ", and ", _jsx("code", { children: "IMG-2" }), " may change. Plain file attachments are not renumbered."] }), _jsxs("div", { className: styles.formActions, children: [_jsx("button", { className: styles.cancelBtn, onClick: onClose, children: "Go Back" }), _jsx("button", { className: styles.submitBtn, onClick: onConfirm, children: "Enable Sync Anyway" })] })] }) }));
+}

package/dist/components/views/standalone/modals/SyncEnableWarningModal.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/views/standalone/modals/SyncEnableWarningModal.test.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { SyncEnableWarningModal } from './SyncEnableWarningModal';
+vi.mock('../../../ui/Modal', () => ({
+    Modal: ({ isOpen, children, title }) => (isOpen ? _jsxs("div", { children: [_jsx("h1", { children: title }), children] }) : null)
+}));
+describe('SyncEnableWarningModal', () => {
+    it('warns that cloud sync reassigns canonical reference numbers', () => {
+        render(_jsx(SyncEnableWarningModal, { isOpen: true, theme: "dark", onClose: () => { }, onConfirm: () => { } }));
+        expect(screen.getByText('Turning on cloud sync can renumber task, document, and image references to match the cloud workspace.')).toBeInTheDocument();
+        expect(screen.getByText(/Plain file attachments are not renumbered/)).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Enable Sync Anyway' })).toBeInTheDocument();
+    });
+    it('routes cancel and confirm actions to the provided handlers', () => {
+        const onClose = vi.fn();
+        const onConfirm = vi.fn();
+        render(_jsx(SyncEnableWarningModal, { isOpen: true, theme: "dark", onClose: onClose, onConfirm: onConfirm }));
+        fireEvent.click(screen.getByRole('button', { name: 'Go Back' }));
+        fireEvent.click(screen.getByRole('button', { name: 'Enable Sync Anyway' }));
+        expect(onClose).toHaveBeenCalledTimes(1);
+        expect(onConfirm).toHaveBeenCalledTimes(1);
+    });
+});

package/dist/components/views/standalone/modals/SyncStatusModal.d.ts

@@ -32,6 +32,7 @@ interface SyncStatusModalProps {
     syncControlBusy: boolean;
     canManageWorkspaceSync: boolean;
     workspaceSyncSummary: string;
+    workspaceSyncRecommendedAction: string;
     workspaceSyncRepairBusy: boolean;
     referenceMismatchCount: number;
     syncStageLabel: string;
@@ -57,5 +58,5 @@ interface SyncStatusModalProps {
     onOpenLogin: () => void;
     onRetrySync: () => void;
 }
-export declare function SyncStatusModal({ isOpen, theme, currentWorkspaceLabel, syncStatusMeta, workspaceCloudSyncEnabled, syncControlBusy, canManageWorkspaceSync, workspaceSyncSummary, workspaceSyncRepairBusy, referenceMismatchCount, syncStageLabel, workspaceSyncPendingChanges, formattedLastSyncTime, formattedLastPullTime, formattedLastPushTime, syncLastError, workspaceSyncDiagnostics, activeReferenceMismatchSummaries, syncDiagnosticsSummary, syncEventRows, syncEventsListRef, workspaceSyncRepairQueued, workspaceSyncBusy, workspaceSyncCopied, runtimeMode, isAuthenticated, onClose, onToggleWorkspaceSync, onRepairSync, onCopyReport, onOpenLogin, onRetrySync, }: SyncStatusModalProps): import("react/jsx-runtime").JSX.Element;
+export declare function SyncStatusModal({ isOpen, theme, currentWorkspaceLabel, syncStatusMeta, workspaceCloudSyncEnabled, syncControlBusy, canManageWorkspaceSync, workspaceSyncSummary, workspaceSyncRecommendedAction, workspaceSyncRepairBusy, referenceMismatchCount, syncStageLabel, workspaceSyncPendingChanges, formattedLastSyncTime, formattedLastPullTime, formattedLastPushTime, syncLastError, workspaceSyncDiagnostics, activeReferenceMismatchSummaries, syncDiagnosticsSummary, syncEventRows, syncEventsListRef, workspaceSyncRepairQueued, workspaceSyncBusy, workspaceSyncCopied, runtimeMode, isAuthenticated, onClose, onToggleWorkspaceSync, onRepairSync, onCopyReport, onOpenLogin, onRetrySync, }: SyncStatusModalProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/views/standalone/modals/SyncStatusModal.js

@@ -4,7 +4,7 @@ import { Modal } from '../../../ui/Modal';
 import modalStyles from '../../../ui/Modal.module.css';
 import syncStatusStyles from '../../SyncStatusModal.module.css';
 import styles from '../../../../Taskforce.module.css';
-export function SyncStatusModal({ isOpen, theme, currentWorkspaceLabel, syncStatusMeta, workspaceCloudSyncEnabled, syncControlBusy, canManageWorkspaceSync, workspaceSyncSummary, workspaceSyncRepairBusy, referenceMismatchCount, syncStageLabel, workspaceSyncPendingChanges, formattedLastSyncTime, formattedLastPullTime, formattedLastPushTime, syncLastError, workspaceSyncDiagnostics, activeReferenceMismatchSummaries, syncDiagnosticsSummary, syncEventRows, syncEventsListRef, workspaceSyncRepairQueued, workspaceSyncBusy, workspaceSyncCopied, runtimeMode, isAuthenticated, onClose, onToggleWorkspaceSync, onRepairSync, onCopyReport, onOpenLogin, onRetrySync, }) {
+export function SyncStatusModal({ isOpen, theme, currentWorkspaceLabel, syncStatusMeta, workspaceCloudSyncEnabled, syncControlBusy, canManageWorkspaceSync, workspaceSyncSummary, workspaceSyncRecommendedAction, workspaceSyncRepairBusy, referenceMismatchCount, syncStageLabel, workspaceSyncPendingChanges, formattedLastSyncTime, formattedLastPullTime, formattedLastPushTime, syncLastError, workspaceSyncDiagnostics, activeReferenceMismatchSummaries, syncDiagnosticsSummary, syncEventRows, syncEventsListRef, workspaceSyncRepairQueued, workspaceSyncBusy, workspaceSyncCopied, runtimeMode, isAuthenticated, onClose, onToggleWorkspaceSync, onRepairSync, onCopyReport, onOpenLogin, onRetrySync, }) {
     return (_jsx(Modal, { isOpen: isOpen, onClose: onClose, title: "Sync Manager", size: "mdWide", theme: theme, 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,
@@ -14,7 +14,7 @@ export function SyncStatusModal({ isOpen, theme, currentWorkspaceLabel, syncStat
                                     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) => onToggleWorkspaceSync(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
+                                ].filter(Boolean).join(' '), children: [_jsx("input", { className: syncStatusStyles.syncToggleInput, type: "checkbox", role: "switch", "aria-label": "Enable Sync", checked: workspaceCloudSyncEnabled, disabled: !canManageWorkspaceSync || syncControlBusy, onChange: (event) => onToggleWorkspaceSync(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 })] }), _jsxs("div", { className: syncStatusStyles.syncStatusSummaryCompact, children: [_jsx("span", { className: syncStatusStyles.syncStatusLabel, children: "Next Step" }), _jsx("span", { className: syncStatusStyles.syncStatusSummaryValue, children: workspaceSyncRecommendedAction })] }), 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: "Task, document, or image reference numbers disagreed during normal sync. Cloud-backed sync preserves the incoming cloud reference and renumbers the displaced local item to the next available reference." }), activeReferenceMismatchSummaries.length > 0 && (_jsx("div", { style: { marginTop: '10px', display: 'flex', flexDirection: 'column', gap: '8px' }, children: activeReferenceMismatchSummaries.map((item) => (_jsxs("div", { style: {
                                     display: 'flex',

package/dist/config/envSchema.js

@@ -26,7 +26,7 @@ const SPECS = [
     { key: 'TASKFORCE_BOOTSTRAP_ADMIN_EMAIL', description: 'Bootstrap admin email used by login fallback.', category: 'Auth', targets: ['server', 'all'] },
     { key: 'TASKFORCE_BOOTSTRAP_ADMIN_PASSWORD', description: 'Bootstrap admin password used by login fallback.', category: 'Auth', secret: true, targets: ['server', 'all'] },
     { key: 'TASKFORCE_AUTH_PUBLIC_BASE_URL', description: 'Public auth URL used in email links.', category: 'Auth', example: 'https://performance-app.taskforcehq.ai', targets: ['server', 'all'] },
-    { key: 'TASKFORCE_AUTH_EXPOSE_DEV_TOKENS', description: 'Expose dev auth tokens in responses.', category: 'Auth', defaultValue: 'false', targets: ['server', 'all'] },
+    { key: 'TASKFORCE_AUTH_EXPOSE_DEV_TOKENS', description: 'Explicitly expose auth tokens in non-production responses for test automation.', category: 'Auth', defaultValue: 'false', targets: ['server', 'all'] },
     { key: 'TASKFORCE_CLOUD_PROXY_BASE_URL', description: 'Optional upstream cloud base URL for local proxying of auth/sync API calls.', category: 'Auth', example: 'https://performance-app.taskforcehq.ai', targets: ['server', 'all'] },
     { key: 'TASKFORCE_CF_ACCESS_CLIENT_ID', description: 'Optional Cloudflare Access service token client id for local cloud proxy.', category: 'Cloudflare', secret: true, targets: ['server', 'all'] },
     { key: 'TASKFORCE_CF_ACCESS_CLIENT_SECRET', description: 'Optional Cloudflare Access service token client secret for local cloud proxy.', category: 'Cloudflare', secret: true, targets: ['server', 'all'] },