@taskforcehq/taskforce 0.3.170 → 0.3.300

package/dist/components/features/TaskSettings.js

@@ -1,12 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { Sun, Moon, Sparkles, FolderOpen, Keyboard, FileText, Users, Check, AlertTriangle, Loader2, Settings, Layers, Box, Copy, Trash2, Terminal, Bot, Codepen, Command, Wind, Github, Zap } from 'lucide-react';
+import React, { useEffect, useMemo, useState } from 'react';
+import { Sun, Moon, Sparkles, Keyboard, FileText, Check, AlertTriangle, Loader2, Settings, Layers, Box, Copy, Trash2, Terminal, Bot, Codepen, Command, Wind, Github, Zap, ChevronDown, ChevronRight, Plug } from 'lucide-react';
 import styles from '../../Taskforce.module.css';
+import { TASKFORCE_THEME_OPTIONS } from '../../utils/theme';
+import { MCP_CLIENT_OPTIONS, buildCloudMcpClientIntegration, buildCloudMcpServerId, sanitizeMcpId } from '../../mcp/clientIntegrations';
+import { resolveTaskforceMcpBaseUrlFromBaseUrl } from '../../config/cloudEnvironment';
 import { TaxonomyManager } from './settings/TaxonomyManager';
-import { WorkflowEditorPrototype } from './settings/WorkflowEditorPrototype';
+const THEME_ICON_MAP = {
+    sun: Sun,
+    wind: Wind,
+    moon: Moon,
+    sparkles: Sparkles,
+};
 export function TaskSettings(props) {
     const { settingsModel, onSectionChange } = props;
-    const { currentTheme, globalTheme, themeUseGlobalDefault, keyShortcut, jsonBackupEnabled, globalJsonBackupEnabled, globalWeekStartsOn, locale = 'en-US', supportedLocales = ['en-US', 'es-419', 'pt-BR'], jsonBackupUseGlobalDefault, manualComplexityEnabled, checklistDropdownEnabled = false, assigneeFilterEnabled = false, exportWorkflowsPath, exportSpecialistsPath, exportingResource, exportResult, initialSection, onThemeChange, onSaveTheme, onSaveGlobalTheme, onResetProjectToGlobal, onKeyShortcutChange, onJsonBackupEnabledChange, onSaveGlobalJsonBackupEnabled, onSaveGlobalWeekStartsOn, onSaveLocale, onManualComplexityEnabledChange, onChecklistDropdownEnabledChange, onAssigneeFilterEnabledChange, onSaveSettings, onExportWorkflowsPathChange, onExportSpecialistsPathChange, onExportResources, onShowFolderBrowserChange, onBrowserTargetChange, onFetchFolders, categories, pathValidation, onUpdateCategory, onRemoveCategory, onSaveCategory, onAddPath, onRemovePath, onUpdateCategoryIcon, onUpdateCategoryColor, types, onSaveType, onRemoveType, taxonomies, onUpdateTaxonomies, priorities, onUpdatePriorities, approaches, onUpdateApproaches, projectRoot, projectName, mcpHostRoot, serverHostRoot, mcpScriptPath, tenantId, workspaceId, runtimeMode = 'local', workspaceSwitchingEnabled = false, currentWorkspaceRole = 'member', currentWorkspaceName = '', onDeleteWorkspace, onMcpHostRootChange, isAuthenticated = false, exportEnvironment, setupState = null, buildInfo = null, onExportEnvironmentChange, onSaveSetupMode, onSaveWorkspaceProfile, availableWorkflows = [], onExportWorkflows, initiativeTemplates = [], onRefreshInitiativeTemplates, onCreateInitiativeFromTemplate, onCloneChecklistBlocksToChildren, onRefreshWorkflows, onFetchWorkflowTemplate, onFetchWorkflowOverrideNames, onSaveWorkflowTemplateDraft, onResetWorkflowTemplateDraft } = settingsModel;
+    const { currentTheme, globalTheme, themeUseGlobalDefault, keyShortcut, jsonBackupEnabled, globalJsonBackupEnabled, globalWeekStartsOn, locale = 'en-US', supportedLocales = ['en-US', 'es-419', 'pt-BR'], jsonBackupUseGlobalDefault, manualComplexityEnabled, checklistDropdownEnabled = true, showTaskCardStatusLabel = true, exportWorkflowsPath, exportingResource, exportResult, initialSection, onThemeChange, onSaveTheme, onSaveGlobalTheme, onResetProjectToGlobal, onKeyShortcutChange, onJsonBackupEnabledChange, onSaveGlobalJsonBackupEnabled, onSaveGlobalWeekStartsOn, onSaveLocale, onManualComplexityEnabledChange, onChecklistDropdownEnabledChange, onShowTaskCardStatusLabelChange, onSaveSettings, onExportWorkflowsPathChange, onShowFolderBrowserChange, onBrowserTargetChange, onFetchFolders, categories, pathValidation, taxonomyDisplayLabels, onUpdateCategory, onRemoveCategory, onSaveCategory, onAddPath, onRemovePath, onUpdateCategoryIcon, onUpdateCategoryColor, types, onSaveType, onRemoveType, onUpdateType, taxonomies, onUpdateTaxonomies, priorities, onUpdatePriorities, onAnalyzeSystemTaxonomyPack, onApplySystemTaxonomyPack, onUpdateTaxonomyDisplayLabels, projectRoot, projectName, mcpHostRoot, serverHostRoot, mcpScriptPath, tenantId, workspaceId, runtimeMode = 'local', cloudAuthBaseUrl = '', cloudMcpBaseUrl = '', fetchCloudAuthApi, workspaceSwitchingEnabled = false, currentWorkspaceRole = 'member', currentWorkspaceName = '', onDeleteWorkspace, onMcpHostRootChange, isAuthenticated = false, exportEnvironment, setupState = null, buildInfo = null, onExportEnvironmentChange, onSaveSetupMode, onSaveWorkspaceProfile, availableWorkflows = [], onExportWorkflows, initiativeTemplates = [], onRefreshInitiativeTemplates, onCreateInitiativeFromTemplate, onRefreshWorkflows } = settingsModel;
+    const showJsonBackupSettings = runtimeMode !== 'cloud';
     // Workflow Selection State
     const [selectedWorkflows, setSelectedWorkflows] = useState([]);
     // Initialize selection when availableWorkflows changes
@@ -26,23 +35,85 @@ export function TaskSettings(props) {
     const [setupMode, setSetupMode] = useState(() => setupState?.mode === 'operations' ? 'operations' : 'core');
     const [workspaceDisplayName, setWorkspaceDisplayName] = useState(() => String(setupState?.workspace?.name || '').trim());
     const [workspaceDescription, setWorkspaceDescription] = useState(() => String(setupState?.workspace?.description || ''));
-    const [workspacePlanMode, setWorkspacePlanMode] = useState('personal');
-    const [workspacePlanModeLoading, setWorkspacePlanModeLoading] = useState(false);
-    const [workspacePlanModeError, setWorkspacePlanModeError] = useState(null);
     const [selectedInitiativeTemplateId, setSelectedInitiativeTemplateId] = useState('');
     const [initiativeTitle, setInitiativeTitle] = useState('');
-    const [initiativeParentTaskId, setInitiativeParentTaskId] = useState('');
-    const [cloneChecklistParentTaskId, setCloneChecklistParentTaskId] = useState('');
-    const [cloneChecklistDodText, setCloneChecklistDodText] = useState('');
-    const [cloneChecklistRollbackText, setCloneChecklistRollbackText] = useState('');
     const [isCreatingInitiative, setIsCreatingInitiative] = useState(false);
-    const [isCloningChecklists, setIsCloningChecklists] = useState(false);
-    const [documentsConfigLoading, setDocumentsConfigLoading] = useState(false);
-    const [documentsStorageProvider, setDocumentsStorageProvider] = useState('unknown');
     const [activeTab, setActiveTab] = useState('general');
+    const [appearanceExpanded, setAppearanceExpanded] = useState(true);
     const [generalScopeTab, setGeneralScopeTab] = useState(() => {
         return 'project';
     });
+    const [aiProfiles, setAiProfiles] = useState([]);
+    const [aiProfilesLoading, setAiProfilesLoading] = useState(false);
+    const [aiProfileMergeState, setAiProfileMergeState] = useState(null);
+    const [aiProfileMergeStatus, setAiProfileMergeStatus] = useState(null);
+    const loadAiProfiles = React.useCallback(async () => {
+        if (!workspaceId)
+            return;
+        setAiProfilesLoading(true);
+        try {
+            const assigneeOptionsUrl = typeof window !== 'undefined'
+                ? new URL(`/api/taskforce/workspace/assignee-options?workspaceId=${encodeURIComponent(workspaceId)}`, window.location.origin).toString()
+                : `/api/taskforce/workspace/assignee-options?workspaceId=${encodeURIComponent(workspaceId)}`;
+            const res = await fetch(assigneeOptionsUrl, { credentials: 'include' });
+            if (!res.ok)
+                return;
+            const data = await res.json().catch(() => ({}));
+            const agents = Array.isArray(data?.assignees)
+                ? data.assignees.filter((a) => a.kind === 'agent').map((a) => ({
+                    id: String(a.value || ''),
+                    name: String(a.label || ''),
+                    profileToken: typeof a.profileToken === 'string' ? a.profileToken : null,
+                    username: String(a.username || a.value || ''),
+                    icon: String(a.icon || 'Bot'),
+                    color: String(a.color || '#6B7280'),
+                    kind: 'agent',
+                    description: typeof a.description === 'string' ? a.description : null,
+                    role: typeof a.role === 'string' ? a.role : null,
+                    provider: typeof a.provider === 'string' ? a.provider : null,
+                    model: typeof a.model === 'string' ? a.model : null,
+                    surfaceType: typeof a.surfaceType === 'string' ? a.surfaceType : null,
+                }))
+                : [];
+            setAiProfiles(agents);
+        }
+        catch {
+            setAiProfiles([]);
+        }
+        finally {
+            setAiProfilesLoading(false);
+        }
+    }, [workspaceId]);
+    const doMergeAiProfiles = React.useCallback(async (keepId, mergeId) => {
+        if (!workspaceId)
+            return;
+        setAiProfileMergeStatus(null);
+        try {
+            const res = await fetch('/api/taskforce/workspace/ai-profiles/merge', {
+                method: 'POST',
+                credentials: 'include',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ workspaceId, keepId, mergeId }),
+            });
+            const data = await res.json().catch(() => ({}));
+            if (!res.ok) {
+                setAiProfileMergeStatus({ type: 'error', message: data?.error || 'Merge failed.' });
+            }
+            else {
+                setAiProfileMergeStatus({ type: 'success', message: `Profiles merged successfully.` });
+                setAiProfileMergeState(null);
+                await loadAiProfiles();
+            }
+        }
+        catch {
+            setAiProfileMergeStatus({ type: 'error', message: 'Network error during merge.' });
+        }
+    }, [workspaceId, loadAiProfiles]);
+    useEffect(() => {
+        if (activeTab === 'agents' || activeTab === 'mcp') {
+            loadAiProfiles();
+        }
+    }, [activeTab, loadAiProfiles]);
     useEffect(() => {
         if (initiativeTemplates.length > 0 && !selectedInitiativeTemplateId) {
             setSelectedInitiativeTemplateId(initiativeTemplates[0].id);
@@ -61,41 +132,6 @@ export function TaskSettings(props) {
         setWorkspaceDisplayName(String(setupState?.workspace?.name || '').trim());
         setWorkspaceDescription(String(setupState?.workspace?.description || ''));
     }, [setupState?.workspace?.name, setupState?.workspace?.description]);
-    useEffect(() => {
-        if (activeTab !== 'general' || generalScopeTab !== 'project' || !isAuthenticated)
-            return;
-        let cancelled = false;
-        (async () => {
-            setWorkspacePlanModeLoading(true);
-            setWorkspacePlanModeError(null);
-            try {
-                const res = await fetch('/api/taskforce/account/entitlements', {
-                    method: 'GET',
-                    credentials: 'include'
-                });
-                const payload = await res.json().catch(() => ({}));
-                if (cancelled)
-                    return;
-                if (!res.ok) {
-                    setWorkspacePlanModeError(String(payload?.error || 'Failed to load account entitlements.'));
-                    return;
-                }
-                const planId = String(payload?.planId || '').trim().toLowerCase();
-                setWorkspacePlanMode(planId === 'team' ? 'team' : 'personal');
-            }
-            catch {
-                if (!cancelled)
-                    setWorkspacePlanModeError('Failed to load account entitlements.');
-            }
-            finally {
-                if (!cancelled)
-                    setWorkspacePlanModeLoading(false);
-            }
-        })();
-        return () => {
-            cancelled = true;
-        };
-    }, [activeTab, generalScopeTab, isAuthenticated]);
     const handleThemeChange = async (theme) => {
         onThemeChange(theme);
         const success = await onSaveTheme(theme);
@@ -104,16 +140,235 @@ export function TaskSettings(props) {
             message: success ? 'Project theme saved.' : 'Failed to save project theme.'
         });
     };
+    const renderThemeButton = (themeOption, activeTheme, onSelect) => {
+        const Icon = THEME_ICON_MAP[themeOption.icon];
+        return (_jsxs("button", { className: `${styles.themeBtn} tf-button-tile ${activeTheme === themeOption.id ? styles.activeTheme : ''}`, onClick: () => { void onSelect(themeOption.id); }, children: [_jsx(Icon, { size: 20 }), " ", themeOption.label] }, themeOption.id));
+    };
+    const cloudMcpAvailable = runtimeMode === 'cloud' || isAuthenticated;
+    const defaultMcpMode = runtimeMode === 'cloud'
+        ? 'cloud'
+        : (isAuthenticated ? 'cloud' : 'local');
+    const [selectedMcpMode, setSelectedMcpMode] = useState(defaultMcpMode);
     const [copiedConfig, setCopiedConfig] = useState(false);
     const [useGlobalMcp, setUseGlobalMcp] = useState(true);
     const [showAdvancedMcp, setShowAdvancedMcp] = useState(false);
-    const sanitizeMcpId = (value, fallback) => {
-        const normalized = String(value || '')
-            .toLowerCase()
-            .replace(/[^a-zA-Z0-9_-]+/g, '-')
-            .replace(/-+/g, '-')
-            .replace(/^[-_]+|[-_]+$/g, '');
-        return normalized || fallback.toLowerCase();
+    const [showMcpConnectionTest, setShowMcpConnectionTest] = useState(false);
+    const [showMcpTokensList, setShowMcpTokensList] = useState(true);
+    const [mcpTokens, setMcpTokens] = useState([]);
+    const [mcpTokensLoading, setMcpTokensLoading] = useState(false);
+    const [mcpTokensError, setMcpTokensError] = useState(null);
+    const [mcpActionBusyId, setMcpActionBusyId] = useState(null);
+    const defaultTokenName = useMemo(() => {
+        const label = String(currentWorkspaceName
+            || setupState?.workspace?.name
+            || projectName
+            || workspaceId
+            || 'Taskforce Workspace').trim();
+        return `${label} MCP`;
+    }, [currentWorkspaceName, setupState?.workspace?.name, projectName, workspaceId]);
+    const [newTokenName, setNewTokenName] = useState(defaultTokenName);
+    const [newTokenScopes, setNewTokenScopes] = useState(['tasks:read', 'tasks:write', 'workspace:read']);
+    const [newTokenExpiresAt, setNewTokenExpiresAt] = useState('');
+    const [mcpTokenNotice, setMcpTokenNotice] = useState(null);
+    const [generatedTokenValue, setGeneratedTokenValue] = useState(null);
+    const [selectedMcpClient, setSelectedMcpClient] = useState('cursor');
+    const [automationAiName, setAutomationAiName] = useState('');
+    const [automationAiProfileToken, setAutomationAiProfileToken] = useState('');
+    const [mcpConnectionToken, setMcpConnectionToken] = useState('');
+    const [mcpConnectionBusy, setMcpConnectionBusy] = useState(false);
+    const [mcpConnectionResult, setMcpConnectionResult] = useState(null);
+    const [mcpConnectorGrants, setMcpConnectorGrants] = useState([]);
+    const [mcpConnectorsLoading, setMcpConnectorsLoading] = useState(false);
+    const [mcpConnectorsError, setMcpConnectorsError] = useState(null);
+    const [mcpConnectorBusyId, setMcpConnectorBusyId] = useState(null);
+    useEffect(() => {
+        setSelectedMcpMode(defaultMcpMode);
+    }, [defaultMcpMode]);
+    useEffect(() => {
+        setNewTokenName((current) => current.trim().length > 0 ? current : defaultTokenName);
+    }, [defaultTokenName]);
+    useEffect(() => {
+        if (!mcpTokenNotice)
+            return;
+        const timer = setTimeout(() => setMcpTokenNotice(null), 3500);
+        return () => clearTimeout(timer);
+    }, [mcpTokenNotice]);
+    useEffect(() => {
+        if (!generatedTokenValue)
+            return;
+        setMcpConnectionToken(generatedTokenValue);
+        setMcpConnectionResult(null);
+    }, [generatedTokenValue]);
+    const cloudMcpEndpoint = useMemo(() => {
+        const inferredMcpBase = resolveTaskforceMcpBaseUrlFromBaseUrl(cloudMcpBaseUrl || cloudAuthBaseUrl || '');
+        const configuredBase = String(inferredMcpBase || cloudMcpBaseUrl || cloudAuthBaseUrl || '').trim().replace(/\/+$/, '');
+        if (configuredBase)
+            return `${configuredBase}/mcp`;
+        if (typeof window === 'undefined')
+            return '/mcp';
+        return `${window.location.origin.replace(/\/+$/, '')}/mcp`;
+    }, [cloudMcpBaseUrl, cloudAuthBaseUrl]);
+    const localMcpEnabled = runtimeMode !== 'cloud';
+    const showMcpModeToggle = localMcpEnabled && cloudMcpAvailable;
+    const showCloudMcp = runtimeMode === 'cloud' || selectedMcpMode === 'cloud';
+    const showLocalMcp = runtimeMode !== 'cloud' && (!cloudMcpAvailable || selectedMcpMode === 'local');
+    const sortedMcpTokens = useMemo(() => {
+        const statusRank = {
+            active: 0,
+            expired: 1,
+            revoked: 2,
+        };
+        return [...mcpTokens].sort((a, b) => {
+            const rankDiff = (statusRank[a.status] ?? 99) - (statusRank[b.status] ?? 99);
+            if (rankDiff !== 0)
+                return rankDiff;
+            return String(b.createdAt || '').localeCompare(String(a.createdAt || ''));
+        });
+    }, [mcpTokens]);
+    const cloudMcpServerId = useMemo(() => buildCloudMcpServerId(currentWorkspaceName || null, projectName || null), [currentWorkspaceName, projectName]);
+    const cloudMcpTokenValue = generatedTokenValue || '<<GENERATE_TOKEN>>';
+    const selectedAutomationProfileId = useMemo(() => {
+        if (automationAiProfileToken) {
+            const byToken = aiProfiles.find((profile) => String(profile.profileToken || '').trim() === automationAiProfileToken.trim());
+            if (byToken)
+                return byToken.id;
+        }
+        if (automationAiName) {
+            const byName = aiProfiles.find((profile) => profile.name === automationAiName.trim());
+            if (byName)
+                return byName.id;
+        }
+        return '';
+    }, [aiProfiles, automationAiName, automationAiProfileToken]);
+    const selectedAutomationProfile = useMemo(() => aiProfiles.find((profile) => profile.id === selectedAutomationProfileId) || null, [aiProfiles, selectedAutomationProfileId]);
+    const inferredAutomationProfileMetadata = useMemo(() => {
+        switch (selectedMcpClient) {
+            case 'codex':
+                return { description: 'OpenAI Codex coding agent connected through MCP.', role: 'Coding Agent', provider: 'OpenAI', model: 'Codex', surfaceType: 'coding_tool' };
+            case 'chatgpt-desktop':
+                return { description: 'ChatGPT desktop app connected through the Taskforce MCP connector.', role: 'AI Assistant', provider: 'OpenAI', model: 'ChatGPT', surfaceType: 'chat_app' };
+            case 'claude-code':
+                return { description: 'Claude Code coding agent connected through MCP.', role: 'Coding Agent', provider: 'Anthropic', model: 'Claude Code', surfaceType: 'coding_tool' };
+            case 'claude-desktop':
+                return { description: 'Claude Desktop connected through the Taskforce MCP connector.', role: 'AI Assistant', provider: 'Anthropic', model: 'Claude', surfaceType: 'chat_app' };
+            case 'gemini-cli':
+                return { description: 'Gemini CLI coding agent connected through MCP.', role: 'Coding Agent', provider: 'Google', model: 'Gemini', surfaceType: 'coding_tool' };
+            case 'vscode':
+                return { description: 'VS Code MCP-connected coding agent.', role: 'Coding Agent', provider: null, model: null, surfaceType: 'ide' };
+            case 'cline':
+            case 'windsurf':
+            case 'antigravity':
+            case 'openclaw':
+                return {
+                    description: `${MCP_CLIENT_OPTIONS.find((option) => option.id === selectedMcpClient)?.label || 'MCP'} coding agent connected through MCP.`,
+                    role: 'Coding Agent',
+                    provider: null,
+                    model: null,
+                    surfaceType: 'coding_tool'
+                };
+            default:
+                return { description: null, role: null, provider: null, model: null, surfaceType: null };
+        }
+    }, [selectedMcpClient]);
+    const cloudClientIntegration = useMemo(() => buildCloudMcpClientIntegration({
+        clientId: selectedMcpClient,
+        endpoint: cloudMcpEndpoint,
+        tokenValue: cloudMcpTokenValue,
+        serverId: cloudMcpServerId,
+        aiProfileName: automationAiName,
+        aiProfileToken: automationAiProfileToken,
+        aiProfileDescription: selectedAutomationProfile?.description ?? inferredAutomationProfileMetadata.description,
+        aiProfileRole: selectedAutomationProfile?.role ?? inferredAutomationProfileMetadata.role,
+        aiProfileProvider: selectedAutomationProfile?.provider ?? inferredAutomationProfileMetadata.provider,
+        aiProfileModel: selectedAutomationProfile?.model ?? inferredAutomationProfileMetadata.model,
+        aiProfileSurfaceType: selectedAutomationProfile?.surfaceType ?? inferredAutomationProfileMetadata.surfaceType,
+    }), [
+        automationAiName,
+        automationAiProfileToken,
+        cloudMcpEndpoint,
+        cloudMcpServerId,
+        cloudMcpTokenValue,
+        inferredAutomationProfileMetadata.description,
+        inferredAutomationProfileMetadata.model,
+        inferredAutomationProfileMetadata.provider,
+        inferredAutomationProfileMetadata.role,
+        inferredAutomationProfileMetadata.surfaceType,
+        selectedAutomationProfile?.description,
+        selectedAutomationProfile?.model,
+        selectedAutomationProfile?.provider,
+        selectedAutomationProfile?.role,
+        selectedAutomationProfile?.surfaceType,
+        selectedMcpClient
+    ]);
+    const cloudMcpServerConfig = cloudClientIntegration.kind === 'json'
+        ? cloudClientIntegration.serverConfig ?? null
+        : null;
+    const selectedMcpClientUsesOAuth = selectedMcpClient === 'chatgpt-desktop' || selectedMcpClient === 'claude-desktop';
+    const activeChatGptConnector = useMemo(() => mcpConnectorGrants.find((grant) => grant.provider === 'chatgpt' && grant.status === 'active') || null, [mcpConnectorGrants]);
+    const activeClaudeConnector = useMemo(() => mcpConnectorGrants.find((grant) => grant.provider === 'claude' && grant.status === 'active') || null, [mcpConnectorGrants]);
+    const selectedConnectorGrant = selectedMcpClient === 'chatgpt-desktop'
+        ? activeChatGptConnector
+        : (selectedMcpClient === 'claude-desktop' ? activeClaudeConnector : null);
+    const cloudMcpFullConfig = useMemo(() => {
+        if (cloudClientIntegration.kind === 'text') {
+            return cloudClientIntegration.renderedText || '';
+        }
+        let payload = {
+            [cloudClientIntegration.rootKey || 'mcpServers']: {
+                [cloudMcpServerId]: cloudClientIntegration.serverConfig
+            }
+        };
+        for (const key of [...(cloudClientIntegration.wrapperKeys || [])].reverse()) {
+            payload = { [key]: payload };
+        }
+        return JSON.stringify(payload, null, 2);
+    }, [cloudClientIntegration, cloudMcpServerId]);
+    const renderMcpConfigBlock = (serverId, serverConfig, rootKey = 'mcpServers', wrapperKeys = []) => {
+        const dimmed = { color: 'var(--text-helper)' };
+        const highlighted = { color: 'var(--brand-primary-strong)', fontWeight: 'bold' };
+        const bracketColor = { color: 'var(--text-secondary)' };
+        const normalText = { color: 'var(--text-primary, #fff)' };
+        const tokenText = cloudMcpTokenValue;
+        const containerKeys = [...wrapperKeys, rootKey];
+        const serverIndent = '  '.repeat(containerKeys.length + 1);
+        const configText = JSON.stringify(serverConfig, null, 2)
+            .split('\n')
+            .map((line, i) => i === 0 ? line : `${serverIndent}${line}`)
+            .join('\n');
+        const configSegments = configText.split(tokenText);
+        return (_jsxs(_Fragment, { children: [_jsx("span", { style: bracketColor, children: "{" }), "\n", containerKeys.map((key, index) => (_jsxs(React.Fragment, { children: [`${'  '.repeat(index + 1)}`, _jsx("span", { style: dimmed, children: `"${key}"` }), _jsx("span", { style: dimmed, children: ":" }), " ", _jsx("span", { style: bracketColor, children: "{" }), "\n"] }, `mcp-container-open-${key}-${index}`))), serverIndent, _jsxs("span", { style: normalText, children: [`"${serverId}"`, ": ", configSegments.map((segment, index) => (_jsxs(React.Fragment, { children: [segment, index < configSegments.length - 1 && _jsx("span", { style: highlighted, children: tokenText })] }, `config-segment-${index}`)))] }), "\n", [...containerKeys].reverse().map((key, index) => (_jsxs(React.Fragment, { children: [`${'  '.repeat(containerKeys.length - index)}`, _jsx("span", { style: bracketColor, children: "}" }), "\n"] }, `mcp-container-close-${key}-${index}`))), _jsx("span", { style: bracketColor, children: "}" })] }));
+    };
+    const renderTextConfigBlock = (text) => {
+        const normalText = { color: 'var(--text-primary, #fff)' };
+        const highlighted = { color: 'var(--brand-primary-strong)', fontWeight: 'bold' };
+        const tokenText = cloudMcpTokenValue;
+        const segments = String(text || '').split(tokenText);
+        return segments.map((segment, index) => (_jsxs(React.Fragment, { children: [_jsx("span", { style: normalText, children: segment }), index < segments.length - 1 && _jsx("span", { style: highlighted, children: tokenText })] }, `text-config-${index}`)));
+    };
+    const toggleTokenScope = (scope) => {
+        setNewTokenScopes((current) => {
+            if (current.includes(scope)) {
+                if (current.length === 1)
+                    return current;
+                return current.filter((item) => item !== scope);
+            }
+            return [...current, scope];
+        });
+    };
+    const copyToClipboard = (value, mode) => {
+        navigator.clipboard.writeText(value);
+        setCopiedConfig(mode);
+        setTimeout(() => setCopiedConfig(false), 2000);
+    };
+    const handleCopyCloudMcpConfig = () => {
+        if (!selectedMcpClientUsesOAuth && !generatedTokenValue) {
+            setMcpTokenNotice({
+                type: 'error',
+                message: 'Generate a token before copying the Cloud MCP configuration.'
+            });
+            return;
+        }
+        copyToClipboard(cloudMcpFullConfig, 'full');
     };
     const buildMcpServerConfig = () => {
         let finalPath = mcpScriptPath || "";
@@ -166,55 +421,234 @@ export function TaskSettings(props) {
         const toCopy = mode === 'full'
             ? JSON.stringify({ mcpServers: { [serverId]: serverConfig } }, null, 2)
             : `"${serverId}": ${JSON.stringify(serverConfig, null, 2)}`;
-        navigator.clipboard.writeText(toCopy);
-        setCopiedConfig(mode);
-        setTimeout(() => setCopiedConfig(false), 2000);
+        copyToClipboard(toCopy, mode);
     };
-    useEffect(() => {
-        if (activeTab === 'initiatives' && initiativeTemplates.length === 0) {
-            onRefreshInitiativeTemplates?.();
+    const loadMcpTokens = async () => {
+        if (!cloudMcpAvailable)
+            return;
+        setMcpTokensLoading(true);
+        setMcpTokensError(null);
+        try {
+            const res = await fetchCloudAuthApi('/api/taskforce/settings/mcp/tokens', {
+                method: 'GET',
+                credentials: 'include'
+            });
+            const payload = await res.json().catch(() => ({}));
+            if (!res.ok) {
+                setMcpTokensError(String(payload?.error || 'Failed to load MCP tokens.'));
+                return;
+            }
+            setMcpTokens(Array.isArray(payload?.items) ? payload.items : []);
         }
-    }, [activeTab, initiativeTemplates.length, onRefreshInitiativeTemplates]);
-    useEffect(() => {
-        if (activeTab !== 'documents')
+        catch {
+            setMcpTokensError('Failed to load MCP tokens.');
+        }
+        finally {
+            setMcpTokensLoading(false);
+        }
+    };
+    const loadMcpConnectors = async () => {
+        if (!cloudMcpAvailable)
             return;
-        let cancelled = false;
-        (async () => {
-            setDocumentsConfigLoading(true);
-            try {
-                const res = await fetch('/api/taskforce/config', { credentials: 'include' });
-                const payload = await res.json().catch(() => ({}));
-                if (cancelled)
-                    return;
-                const provider = payload?.objectStorage?.provider === 'r2' ? 'r2' : 'local';
-                setDocumentsStorageProvider(provider);
+        setMcpConnectorsLoading(true);
+        setMcpConnectorsError(null);
+        try {
+            const res = await fetchCloudAuthApi('/api/taskforce/settings/mcp/connectors', {
+                method: 'GET',
+                credentials: 'include'
+            });
+            const payload = await res.json().catch(() => ({}));
+            if (!res.ok) {
+                setMcpConnectorsError(String(payload?.error || 'Failed to load MCP connectors.'));
+                return;
             }
-            catch {
-                if (!cancelled)
-                    setDocumentsStorageProvider('unknown');
+            setMcpConnectorGrants(Array.isArray(payload?.items) ? payload.items : []);
+        }
+        catch {
+            setMcpConnectorsError('Failed to load MCP connectors.');
+        }
+        finally {
+            setMcpConnectorsLoading(false);
+        }
+    };
+    const handleCreateMcpToken = async () => {
+        const trimmedName = newTokenName.trim();
+        if (!trimmedName) {
+            setMcpTokenNotice({ type: 'error', message: 'Token name is required.' });
+            return;
+        }
+        setMcpActionBusyId('create');
+        setMcpTokenNotice(null);
+        try {
+            const res = await fetchCloudAuthApi('/api/taskforce/settings/mcp/tokens', {
+                method: 'POST',
+                credentials: 'include',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    name: trimmedName,
+                    scopes: newTokenScopes,
+                    expiresAt: newTokenExpiresAt ? new Date(`${newTokenExpiresAt}T00:00:00`).toISOString() : null
+                })
+            });
+            const payload = await res.json().catch(() => ({}));
+            if (!res.ok) {
+                setMcpTokenNotice({ type: 'error', message: String(payload?.error || 'Failed to create token.') });
+                return;
             }
-            finally {
-                if (!cancelled)
-                    setDocumentsConfigLoading(false);
+            setGeneratedTokenValue(String(payload?.token || ''));
+            setNewTokenName(defaultTokenName);
+            setNewTokenExpiresAt('');
+            setMcpTokens((current) => {
+                const next = payload?.record ? [payload.record, ...current.filter((item) => item.id !== payload.record.id)] : current;
+                return next;
+            });
+        }
+        catch {
+            setMcpTokenNotice({ type: 'error', message: 'Failed to create token.' });
+        }
+        finally {
+            setMcpActionBusyId(null);
+        }
+    };
+    const handleMcpTokenAction = async (tokenId, action) => {
+        setMcpActionBusyId(`${action}:${tokenId}`);
+        setMcpTokenNotice(null);
+        try {
+            const res = await fetchCloudAuthApi(`/api/taskforce/settings/mcp/tokens/${encodeURIComponent(tokenId)}/${action}`, {
+                method: 'POST',
+                credentials: 'include'
+            });
+            const payload = await res.json().catch(() => ({}));
+            if (!res.ok) {
+                setMcpTokenNotice({ type: 'error', message: String(payload?.error || `Failed to ${action} token.`) });
+                return;
             }
-        })();
-        return () => {
-            cancelled = true;
-        };
-    }, [activeTab]);
-    const resolveAdminConsoleUrl = () => {
-        const envUrlRaw = String(import.meta?.env?.VITE_TASKFORCE_ADMIN_APP_URL || '').trim();
-        if (envUrlRaw)
-            return envUrlRaw.replace(/\/+$/, '');
-        if (typeof window === 'undefined')
-            return 'https://admin.taskforcehq.ai';
-        const { protocol, hostname } = window.location;
-        if (hostname === 'localhost' || hostname === '127.0.0.1')
-            return 'http://localhost:5181';
-        if (hostname.startsWith('app.'))
-            return `${protocol}//admin.${hostname.slice(4)}`;
-        return `${protocol}//admin.${hostname}`;
+            if (action === 'regenerate') {
+                setGeneratedTokenValue(String(payload?.token || ''));
+                setMcpTokenNotice({ type: 'success', message: 'Token regenerated. Copy the new value now.' });
+            }
+            else {
+                setMcpTokenNotice({ type: 'success', message: 'Token revoked.' });
+            }
+            const nextRecord = payload?.record || null;
+            if (nextRecord?.id) {
+                setMcpTokens((current) => current.map((item) => item.id === nextRecord.id ? nextRecord : item));
+            }
+            else {
+                await loadMcpTokens();
+            }
+        }
+        catch {
+            setMcpTokenNotice({ type: 'error', message: `Failed to ${action} token.` });
+        }
+        finally {
+            setMcpActionBusyId(null);
+        }
+    };
+    const handleTestMcpConnection = async () => {
+        const trimmedToken = mcpConnectionToken.trim();
+        if (!trimmedToken) {
+            setMcpConnectionResult({
+                type: 'error',
+                message: 'Paste a token to test the MCP connection.'
+            });
+            return;
+        }
+        setMcpConnectionBusy(true);
+        setMcpConnectionResult(null);
+        try {
+            const res = await fetchCloudAuthApi('/api/taskforce/settings/mcp/test-connection', {
+                method: 'POST',
+                credentials: 'include',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    token: trimmedToken,
+                    requiredScopes: newTokenScopes
+                })
+            });
+            const payload = await res.json().catch(() => ({}));
+            if (!res.ok) {
+                const details = payload?.details && typeof payload.details === 'object' ? payload.details : {};
+                const missingScopes = Array.isArray(details?.missingScopes)
+                    ? details.missingScopes.map((scope) => String(scope))
+                    : [];
+                const workspaceName = typeof details?.tokenWorkspaceId === 'string'
+                    ? String(details.tokenWorkspaceId)
+                    : undefined;
+                const message = payload?.code === 'MCP_TOKEN_MISSING_SCOPES' && missingScopes.length > 0
+                    ? `Token is missing required scopes: ${missingScopes.join(', ')}.`
+                    : String(payload?.error || 'Failed to test MCP connection.');
+                setMcpConnectionResult({
+                    type: 'error',
+                    message,
+                    workspaceName,
+                });
+                return;
+            }
+            const result = payload?.result && typeof payload.result === 'object' ? payload.result : {};
+            setMcpConnectionResult({
+                type: 'success',
+                message: 'Connection looks good for this workspace.',
+                scopes: Array.isArray(result?.scopes) ? result.scopes.map((scope) => String(scope)) : [],
+                workspaceName: typeof result?.workspaceName === 'string' ? String(result.workspaceName) : '',
+                workspaceId: typeof result?.workspaceId === 'string' ? String(result.workspaceId) : '',
+            });
+        }
+        catch {
+            setMcpConnectionResult({
+                type: 'error',
+                message: 'Failed to test MCP connection.'
+            });
+        }
+        finally {
+            setMcpConnectionBusy(false);
+        }
     };
+    const handleDisconnectConnector = async (grantId) => {
+        setMcpConnectorBusyId(grantId);
+        setMcpConnectorsError(null);
+        try {
+            const res = await fetchCloudAuthApi(`/api/taskforce/settings/mcp/connectors/${encodeURIComponent(grantId)}/disconnect`, {
+                method: 'POST',
+                credentials: 'include'
+            });
+            const payload = await res.json().catch(() => ({}));
+            if (!res.ok) {
+                setMcpConnectorsError(String(payload?.error || 'Failed to disconnect connector.'));
+                return;
+            }
+            const nextRecord = payload?.record || null;
+            if (nextRecord?.id) {
+                setMcpConnectorGrants((current) => current.map((grant) => grant.id === nextRecord.id ? nextRecord : grant));
+            }
+            else {
+                await loadMcpConnectors();
+            }
+        }
+        catch {
+            setMcpConnectorsError('Failed to disconnect connector.');
+        }
+        finally {
+            setMcpConnectorBusyId(null);
+        }
+    };
+    useEffect(() => {
+        if (!cloudMcpAvailable)
+            return;
+        if (activeTab === 'mcp' && showCloudMcp) {
+            void loadMcpTokens();
+            void loadMcpConnectors();
+            return;
+        }
+        if (activeTab === 'integrations') {
+            void loadMcpConnectors();
+        }
+    }, [activeTab, showCloudMcp, cloudMcpAvailable]);
+    useEffect(() => {
+        if (activeTab === 'initiatives' && initiativeTemplates.length === 0) {
+            onRefreshInitiativeTemplates?.();
+        }
+    }, [activeTab, initiativeTemplates.length, onRefreshInitiativeTemplates]);
     const availableEnvironments = settingsModel.availableEnvironments || [];
     const getIconComponent = (iconName) => {
         switch (iconName) {
@@ -235,10 +669,19 @@ export function TaskSettings(props) {
                 setActiveTab('taxonomy');
             }
             else if (initialSection === 'documents') {
-                setActiveTab('documents');
+                setActiveTab('general');
+            }
+            else if (initialSection === 'appearance-application') {
+                setAppearanceExpanded(true);
+                setActiveTab('appearanceApplication');
             }
-            else if (initialSection === 'workflow-editor') {
-                setActiveTab('workflowEditor');
+            else if (initialSection === 'appearance-task-cards') {
+                setAppearanceExpanded(true);
+                setActiveTab('appearanceTaskCards');
+            }
+            else if (initialSection === 'appearance-task-forms') {
+                setAppearanceExpanded(true);
+                setActiveTab('appearanceTaskForms');
             }
             else if (initialSection === 'resources' || initialSection === 'commands') {
                 setActiveTab('commands');
@@ -249,11 +692,19 @@ export function TaskSettings(props) {
             else if (initialSection === 'agents') {
                 setActiveTab('agents');
             }
+            else if (initialSection === 'integrations') {
+                setActiveTab('integrations');
+            }
             else {
                 setActiveTab(initialSection);
             }
         }
     }, [initialSection]);
+    useEffect(() => {
+        if (activeTab === 'appearanceApplication' || activeTab === 'appearanceTaskCards' || activeTab === 'appearanceTaskForms') {
+            setAppearanceExpanded(true);
+        }
+    }, [activeTab]);
     const handleBrowseFolders = (catValue) => {
         onBrowserTargetChange({ type: 'category', value: catValue });
         onFetchFolders('');
@@ -269,232 +720,266 @@ export function TaskSettings(props) {
         }
         return fullPath;
     };
-    return (_jsxs("div", { className: styles.settingsTab, children: [_jsxs("div", { className: styles.settingsTabs, children: [_jsxs("button", { className: `${styles.settingsTabBtn} ${activeTab === 'general' ? styles.settingsTabBtnActive : ''}`, onClick: () => {
-                            setActiveTab('general');
-                            onSectionChange?.('general');
-                        }, children: [_jsx(Settings, { size: 14 }), " General"] }), _jsxs("button", { className: `${styles.settingsTabBtn} ${activeTab === 'documents' ? styles.settingsTabBtnActive : ''}`, onClick: () => {
-                            setActiveTab('documents');
-                            onSectionChange?.('documents');
-                        }, children: [_jsx(FolderOpen, { size: 14 }), " Documents"] }), _jsxs("button", { className: `${styles.settingsTabBtn} ${activeTab === 'commands' ? styles.settingsTabBtnActive : ''}`, onClick: () => {
-                            setActiveTab('commands');
-                            onSectionChange?.('commands');
-                        }, children: [_jsx(Terminal, { size: 14 }), " Commands"] }), _jsxs("button", { className: `${styles.settingsTabBtn} ${activeTab === 'initiatives' ? styles.settingsTabBtnActive : ''}`, onClick: () => {
-                            setActiveTab('initiatives');
-                            onSectionChange?.('initiatives');
-                        }, children: [_jsx(Zap, { size: 14 }), " Initiatives"] }), _jsxs("button", { className: `${styles.settingsTabBtn} ${activeTab === 'workflowEditor' ? styles.settingsTabBtnActive : ''}`, onClick: () => {
-                            setActiveTab('workflowEditor');
-                            onSectionChange?.('workflow-editor');
-                        }, children: [_jsx(FileText, { size: 14 }), " Workflows"] }), _jsxs("button", { className: `${styles.settingsTabBtn} ${activeTab === 'agents' ? styles.settingsTabBtnActive : ''}`, onClick: () => {
-                            setActiveTab('agents');
-                            onSectionChange?.('agents');
-                        }, children: [_jsx(Bot, { size: 14 }), " Agents"] }), _jsxs("button", { className: `${styles.settingsTabBtn} ${activeTab === 'taxonomy' ? styles.settingsTabBtnActive : ''}`, onClick: () => {
-                            setActiveTab('taxonomy');
-                            onSectionChange?.('taxonomy');
-                        }, children: [_jsx(Layers, { size: 14 }), " Taxonomies"] }), _jsxs("button", { className: `${styles.settingsTabBtn} ${activeTab === 'mcp' ? styles.settingsTabBtnActive : ''}`, onClick: () => {
-                            setActiveTab('mcp');
-                            onSectionChange?.('mcp');
-                        }, children: [_jsx(Box, { size: 14 }), " MCP"] })] }), _jsxs("div", { className: styles.settingsContent, children: [settingsFeedback && (_jsxs("div", { className: `${styles.settingsToast} ${settingsFeedback.type === 'success' ? styles.settingsToastSuccess : styles.settingsToastError}`, children: [settingsFeedback.type === 'success' ? _jsx(Check, { size: 14 }) : _jsx(AlertTriangle, { size: 14 }), _jsx("span", { children: settingsFeedback.message })] })), activeTab === 'general' && (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.settingGroup, children: _jsxs("div", { className: styles.settingTitleRow, children: [_jsx("h3", { className: styles.settingTitle, children: generalScopeTab === 'project' ? 'Project Settings' : 'Global Settings' }), _jsxs("div", { className: styles.settingsTabs, children: [_jsx("button", { className: `${styles.settingsTabBtn} ${generalScopeTab === 'project' ? styles.settingsTabBtnActive : ''}`, onClick: () => setGeneralScopeTab('project'), children: "Project" }), _jsx("button", { className: `${styles.settingsTabBtn} ${generalScopeTab === 'global' ? styles.settingsTabBtnActive : ''}`, onClick: () => setGeneralScopeTab('global'), children: "Global" })] }), generalScopeTab === 'project' && (_jsx("button", { onClick: async () => {
-                                                const confirmed = window.confirm('Reset project Theme and Backups to global defaults?');
-                                                if (!confirmed)
-                                                    return;
-                                                const success = await onResetProjectToGlobal();
-                                                setSettingsFeedback({
-                                                    type: success ? 'success' : 'error',
-                                                    message: success ? 'Project settings reset to global.' : 'Failed to reset project settings.'
-                                                });
-                                            }, className: styles.copyBtn, children: "Reset to Global" }))] }) }), generalScopeTab === 'project' && (_jsxs("div", { className: styles.settingGroup, children: [_jsx("h3", { className: styles.settingTitle, children: "Workspace Profile" }), _jsxs("div", { className: styles.pathInputGroup, children: [_jsxs("label", { className: styles.label, style: { minWidth: '110px' }, children: [setupMode === 'operations' ? 'Mission' : 'Project', " name:"] }), _jsx("input", { className: styles.input, type: "text", value: workspaceDisplayName, onChange: (event) => setWorkspaceDisplayName(event.target.value), placeholder: setupMode === 'operations' ? 'Mission name' : 'Project name', style: { maxWidth: '360px' } })] }), _jsxs("div", { className: styles.pathInputGroup, children: [_jsx("label", { className: styles.label, style: { minWidth: '110px' }, children: "Description:" }), _jsx("textarea", { className: styles.textarea, value: workspaceDescription, onChange: (event) => setWorkspaceDescription(event.target.value), placeholder: setupMode === 'operations' ? 'Mission description (optional)' : 'Project description (optional)', rows: 3, style: { maxWidth: '360px' } })] }), _jsx("div", { className: styles.pathInputGroup, children: _jsx("button", { onClick: async () => {
-                                                if (!onSaveWorkspaceProfile)
-                                                    return;
-                                                const result = await onSaveWorkspaceProfile({
-                                                    workspaceId: setupState?.workspaceId,
-                                                    name: workspaceDisplayName,
-                                                    description: workspaceDescription
-                                                });
-                                                setSettingsFeedback({
-                                                    type: result.success ? 'success' : 'error',
-                                                    message: result.success
-                                                        ? `${setupMode === 'operations' ? 'Mission' : 'Project'} profile saved.`
-                                                        : (result.error || 'Failed to save workspace profile.')
-                                                });
-                                            }, className: `${styles.saveSettingsBtn} ${styles.saveSettingsBtnWrapper}`, disabled: !onSaveWorkspaceProfile, children: "Save Profile" }) })] })), generalScopeTab === 'project' && isAuthenticated && (_jsxs("div", { className: styles.settingGroup, children: [_jsx("h3", { className: styles.settingTitle, children: "Account Plan" }), _jsx("p", { className: styles.settingHelper, children: "Effective plan state is managed by platform admin and surfaced here as read-only." }), _jsxs("div", { className: styles.pathInputGroup, children: [_jsx("label", { className: styles.label, style: { minWidth: '110px' }, children: "Plan mode:" }), _jsxs("select", { className: styles.input, value: workspacePlanMode, style: { maxWidth: '220px' }, disabled: true, children: [_jsx("option", { value: "personal", children: "Personal" }), _jsx("option", { value: "team", children: "Team" })] })] }), workspacePlanModeLoading && (_jsx("p", { className: styles.settingHelper, children: "Loading current account entitlements..." })), workspacePlanModeError && (_jsx("p", { className: styles.settingHelper, style: { color: '#fda4af' }, children: workspacePlanModeError }))] })), generalScopeTab === 'project' && (_jsxs("div", { className: styles.settingGroup, children: [_jsx("h3", { className: styles.settingTitle, children: "Theme" }), _jsxs("div", { className: styles.buttonGrid, children: [_jsxs("button", { className: `${styles.themeBtn} ${currentTheme === 'light' ? styles.activeTheme : ''}`, onClick: () => { void handleThemeChange('light'); }, children: [_jsx(Sun, { size: 20 }), " Light"] }), _jsxs("button", { className: `${styles.themeBtn} ${currentTheme === 'dark' ? styles.activeTheme : ''}`, onClick: () => { void handleThemeChange('dark'); }, children: [_jsx(Moon, { size: 20 }), " Dark"] }), _jsxs("button", { className: `${styles.themeBtn} ${currentTheme === 'midnight' ? styles.activeTheme : ''}`, onClick: () => { void handleThemeChange('midnight'); }, children: [_jsx(Sparkles, { size: 20 }), " Midnight"] })] }), _jsx("h3", { className: styles.settingTitle, children: "Backup" }), _jsxs("label", { className: styles.archiveToggle, children: [_jsx("input", { type: "checkbox", checked: jsonBackupEnabled, onChange: async (e) => {
-                                                    const success = await onJsonBackupEnabledChange(e.target.checked);
-                                                    setSettingsFeedback({
-                                                        type: success ? 'success' : 'error',
-                                                        message: success ? 'Project backup setting saved.' : 'Failed to save project backup setting.'
-                                                    });
-                                                } }), _jsx("span", { children: "Enable automatic JSON backup (`.taskforce/tasks.json`)" })] }), _jsx("h3", { className: styles.settingTitle, children: "Task Form" }), _jsxs("label", { className: styles.archiveToggle, children: [_jsx("input", { type: "checkbox", checked: checklistDropdownEnabled, onChange: async (e) => {
-                                                    if (!onChecklistDropdownEnabledChange)
+    const settingsNavItems = [
+        { key: 'general', label: 'General', icon: _jsx(Settings, { size: 14 }), section: 'general' },
+        { key: 'taxonomy', label: 'Taxonomy', icon: _jsx(Layers, { size: 14 }), section: 'taxonomy' },
+        { key: 'integrations', label: 'Integrations', icon: _jsx(Plug, { size: 14 }), section: 'integrations' },
+        { key: 'mcp', label: 'MCP', icon: _jsx(Box, { size: 14 }), section: 'mcp' }
+    ];
+    const appearanceNavItems = [
+        { key: 'appearanceApplication', label: 'Application', section: 'appearance-application' },
+        { key: 'appearanceTaskCards', label: 'Task cards', section: 'appearance-task-cards' },
+        { key: 'appearanceTaskForms', label: 'Task forms', section: 'appearance-task-forms' }
+    ];
+    const selectTab = (tab, section) => {
+        setActiveTab(tab);
+        onSectionChange?.(section);
+    };
+    const renderProjectThemeControls = () => (_jsxs("div", { className: styles.settingGroup, children: [_jsx("h3", { className: `${styles.settingTitle} tf-heading-section`, children: "Theme" }), _jsx("div", { className: styles.buttonGrid, children: TASKFORCE_THEME_OPTIONS.map((themeOption) => renderThemeButton(themeOption, currentTheme, handleThemeChange)) })] }));
+    const renderGlobalThemeControls = () => (_jsxs("div", { className: styles.settingGroup, children: [_jsx("h3", { className: `${styles.settingTitle} tf-heading-section`, children: "Theme Defaults" }), _jsx("div", { className: styles.buttonGrid, children: TASKFORCE_THEME_OPTIONS.map((themeOption) => renderThemeButton(themeOption, globalTheme, async (theme) => {
+                    const success = await onSaveGlobalTheme(theme);
+                    setSettingsFeedback({
+                        type: success ? 'success' : 'error',
+                        message: success ? 'Global theme saved.' : 'Failed to save global theme.'
+                    });
+                })) })] }));
+    const renderTaskFormsControls = () => (_jsxs("div", { className: styles.settingGroup, children: [_jsx("h3", { className: `${styles.settingTitle} tf-heading-section`, children: "Task Form" }), _jsxs("label", { className: styles.archiveToggle, children: [_jsx("input", { type: "checkbox", checked: checklistDropdownEnabled, onChange: async (e) => {
+                            if (!onChecklistDropdownEnabledChange)
+                                return;
+                            const success = await onChecklistDropdownEnabledChange(e.target.checked);
+                            setSettingsFeedback({
+                                type: success ? 'success' : 'error',
+                                message: success ? 'Checklist dropdown setting saved.' : 'Failed to save checklist dropdown setting.'
+                            });
+                        }, disabled: !onChecklistDropdownEnabledChange }), _jsx("span", { children: "Enable checklist dropdown in task form" })] })] }));
+    return (_jsx("div", { className: styles.settingsTab, children: _jsxs("div", { className: styles.settingsLayout, children: [_jsxs("aside", { className: styles.settingsSidebar, children: [_jsx("div", { className: styles.settingsSidebarHeader, children: "Sections" }), _jsxs("div", { className: `${styles.settingsSidebarNav} tf-scrollbar tf-scrollbar--track-transparent tf-scrollbar--compact`, children: [settingsNavItems.filter((item) => item.key === 'general').map((item) => (_jsxs("button", { className: `${styles.settingsSidebarBtn} ${activeTab === item.key ? styles.settingsSidebarBtnActive : ''}`, onClick: () => selectTab(item.key, item.section), children: [item.icon, _jsx("span", { children: item.label })] }, item.key))), _jsxs("div", { className: styles.settingsSidebarGroup, children: [_jsxs("button", { className: `${styles.settingsSidebarBtn} ${styles.settingsSidebarGroupBtn} ${(activeTab === 'appearanceApplication' || activeTab === 'appearanceTaskCards' || activeTab === 'appearanceTaskForms') ? styles.settingsSidebarBtnActive : ''}`, onClick: () => setAppearanceExpanded((current) => !current), "aria-expanded": appearanceExpanded, "aria-controls": "settings-appearance-nav", children: [_jsx(Sparkles, { size: 14 }), _jsx("span", { className: styles.settingsSidebarGroupLabel, children: "Appearance" }), _jsx("span", { className: styles.settingsSidebarGroupChevron, children: appearanceExpanded ? _jsx(ChevronDown, { size: 14 }) : _jsx(ChevronRight, { size: 14 }) })] }), appearanceExpanded && (_jsx("div", { id: "settings-appearance-nav", className: styles.settingsSidebarSubnav, children: appearanceNavItems.map((item) => (_jsx("button", { className: `${styles.settingsSidebarSubBtn} ${activeTab === item.key ? styles.settingsSidebarBtnActive : ''}`, onClick: () => selectTab(item.key, item.section), children: _jsx("span", { children: item.label }) }, item.key))) }))] }), settingsNavItems.filter((item) => item.key !== 'general').map((item) => (_jsxs("button", { className: `${styles.settingsSidebarBtn} ${activeTab === item.key ? styles.settingsSidebarBtnActive : ''}`, onClick: () => selectTab(item.key, item.section), children: [item.icon, _jsx("span", { children: item.label })] }, item.key)))] })] }), _jsxs("div", { className: styles.settingsContent, children: [settingsFeedback && (_jsxs("div", { className: `${styles.settingsToast} ${settingsFeedback.type === 'success' ? styles.settingsToastSuccess : styles.settingsToastError}`, children: [settingsFeedback.type === 'success' ? _jsx(Check, { size: 14 }) : _jsx(AlertTriangle, { size: 14 }), _jsx("span", { children: settingsFeedback.message })] })), activeTab === 'general' && (_jsxs(_Fragment, { children: [_jsxs("div", { className: styles.settingGroup, children: [_jsxs("div", { className: `${styles.settingsTabs} tf-scrollbar tf-scrollbar--track-transparent tf-scrollbar--compact`, children: [_jsx("button", { className: `${styles.settingsTabBtn} ${generalScopeTab === 'project' ? styles.settingsTabBtnActive : ''}`, onClick: () => setGeneralScopeTab('project'), children: "Project" }), _jsx("button", { className: `${styles.settingsTabBtn} ${generalScopeTab === 'global' ? styles.settingsTabBtnActive : ''}`, onClick: () => setGeneralScopeTab('global'), children: "Global" })] }), generalScopeTab === 'project' && (_jsx("div", { className: styles.pathInputGroup, style: { justifyContent: 'flex-end' }, children: _jsx("button", { onClick: async () => {
+                                                    const confirmed = window.confirm('Reset project Theme and Backups to global defaults?');
+                                                    if (!confirmed)
                                                         return;
-                                                    const success = await onChecklistDropdownEnabledChange(e.target.checked);
+                                                    const success = await onResetProjectToGlobal();
                                                     setSettingsFeedback({
                                                         type: success ? 'success' : 'error',
-                                                        message: success ? 'Checklist dropdown setting saved.' : 'Failed to save checklist dropdown setting.'
+                                                        message: success ? 'Project settings reset to global.' : 'Failed to reset project settings.'
                                                     });
-                                                }, disabled: !onChecklistDropdownEnabledChange }), _jsx("span", { children: "Enable checklist dropdown in task form" })] }), _jsxs("label", { className: styles.archiveToggle, children: [_jsx("input", { type: "checkbox", checked: assigneeFilterEnabled, onChange: async (e) => {
-                                                    if (!onAssigneeFilterEnabledChange)
+                                                }, className: styles.copyBtn, children: "Reset to Global" }) }))] }), generalScopeTab === 'project' && (_jsxs("div", { className: styles.settingGroup, children: [_jsxs("div", { className: styles.pathInputGroup, children: [_jsxs("label", { className: styles.label, style: { minWidth: '110px' }, children: [setupMode === 'operations' ? 'Mission' : 'Project', " name:"] }), _jsx("input", { className: styles.input, type: "text", value: workspaceDisplayName, onChange: (event) => setWorkspaceDisplayName(event.target.value), placeholder: setupMode === 'operations' ? 'Mission name' : 'Project name' })] }), _jsxs("div", { className: styles.pathInputGroup, children: [_jsx("label", { className: styles.label, style: { minWidth: '110px' }, children: "Description:" }), _jsx("textarea", { className: styles.textarea, value: workspaceDescription, onChange: (event) => setWorkspaceDescription(event.target.value), placeholder: setupMode === 'operations' ? 'Mission description (optional)' : 'Project description (optional)', rows: 3 })] }), _jsx("div", { className: styles.pathInputGroup, style: { justifyContent: 'flex-end' }, children: _jsx("button", { onClick: async () => {
+                                                    if (!onSaveWorkspaceProfile)
                                                         return;
-                                                    const success = await onAssigneeFilterEnabledChange(e.target.checked);
+                                                    const result = await onSaveWorkspaceProfile({
+                                                        workspaceId: setupState?.workspaceId,
+                                                        name: workspaceDisplayName,
+                                                        description: workspaceDescription
+                                                    });
                                                     setSettingsFeedback({
-                                                        type: success ? 'success' : 'error',
-                                                        message: success ? 'Assignee filter setting saved.' : 'Failed to save assignee filter setting.'
+                                                        type: result.success ? 'success' : 'error',
+                                                        message: result.success
+                                                            ? `${setupMode === 'operations' ? 'Mission' : 'Project'} profile saved.`
+                                                            : (result.error || 'Failed to save workspace profile.')
                                                     });
-                                                }, disabled: !onAssigneeFilterEnabledChange }), _jsx("span", { children: "Enable assignee filter in task views" })] })] })), generalScopeTab === 'global' && (_jsxs(_Fragment, { children: [_jsxs("div", { className: styles.settingGroup, children: [_jsx("h3", { className: styles.settingTitle, children: "Operating Mode" }), _jsxs("div", { className: styles.pathInputGroup, children: [_jsx("label", { className: styles.label, style: { minWidth: '110px' }, children: "Mode:" }), _jsxs("select", { className: styles.input, value: setupMode, onChange: (e) => setSetupMode(e.target.value === 'operations' ? 'operations' : 'core'), style: { maxWidth: '220px' }, children: [_jsx("option", { value: "core", children: "Core (Project)" }), _jsx("option", { value: "operations", children: "Operations (Mission)" })] }), _jsx("button", { onClick: async () => {
-                                                            if (!onSaveSetupMode)
-                                                                return;
-                                                            const success = await onSaveSetupMode(setupMode);
+                                                }, className: styles.copyBtn, disabled: !onSaveWorkspaceProfile, children: "Save" }) })] })), generalScopeTab === 'project' && (_jsx("div", { className: styles.settingGroup, children: showJsonBackupSettings && (_jsxs(_Fragment, { children: [_jsx("h3", { className: styles.settingTitle, children: "Backup" }), _jsxs("label", { className: styles.archiveToggle, children: [_jsx("input", { type: "checkbox", checked: jsonBackupEnabled, onChange: async (e) => {
+                                                            const success = await onJsonBackupEnabledChange(e.target.checked);
                                                             setSettingsFeedback({
                                                                 type: success ? 'success' : 'error',
-                                                                message: success ? 'Operating mode saved.' : 'Failed to save operating mode.'
+                                                                message: success ? 'Project backup setting saved.' : 'Failed to save project backup setting.'
                                                             });
-                                                        }, className: `${styles.saveSettingsBtn} ${styles.saveSettingsBtnWrapper}`, disabled: !onSaveSetupMode, children: "Save" })] })] }), _jsxs("div", { className: styles.settingGroup, children: [_jsx("h3", { className: styles.settingTitle, children: "Theme" }), _jsxs("div", { className: styles.buttonGrid, children: [_jsxs("button", { className: `${styles.themeBtn} ${globalTheme === 'light' ? styles.activeTheme : ''}`, onClick: async () => {
-                                                            const success = await onSaveGlobalTheme('light');
-                                                            setSettingsFeedback({
-                                                                type: success ? 'success' : 'error',
-                                                                message: success ? 'Global theme saved.' : 'Failed to save global theme.'
-                                                            });
-                                                        }, children: [_jsx(Sun, { size: 20 }), " Light"] }), _jsxs("button", { className: `${styles.themeBtn} ${globalTheme === 'dark' ? styles.activeTheme : ''}`, onClick: async () => {
-                                                            const success = await onSaveGlobalTheme('dark');
-                                                            setSettingsFeedback({
-                                                                type: success ? 'success' : 'error',
-                                                                message: success ? 'Global theme saved.' : 'Failed to save global theme.'
-                                                            });
-                                                        }, children: [_jsx(Moon, { size: 20 }), " Dark"] }), _jsxs("button", { className: `${styles.themeBtn} ${globalTheme === 'midnight' ? styles.activeTheme : ''}`, onClick: async () => {
-                                                            const success = await onSaveGlobalTheme('midnight');
-                                                            setSettingsFeedback({
-                                                                type: success ? 'success' : 'error',
-                                                                message: success ? 'Global theme saved.' : 'Failed to save global theme.'
-                                                            });
-                                                        }, children: [_jsx(Sparkles, { size: 20 }), " Midnight"] })] }), _jsx("h3", { className: styles.settingTitle, children: "Backup" }), _jsxs("label", { className: styles.archiveToggle, children: [_jsx("input", { type: "checkbox", checked: globalJsonBackupEnabled, onChange: async (e) => {
-                                                            const success = await onSaveGlobalJsonBackupEnabled(e.target.checked);
-                                                            setSettingsFeedback({
-                                                                type: success ? 'success' : 'error',
-                                                                message: success ? 'Global backup default saved.' : 'Failed to save global backup default.'
-                                                            });
-                                                        } }), _jsx("span", { children: "Enable global JSON backup default" })] })] }), _jsxs("div", { className: styles.settingGroup, children: [_jsx("h3", { className: styles.settingTitle, children: "Regional" }), _jsxs("div", { className: styles.pathInputGroup, children: [_jsx("label", { className: styles.label, style: { minWidth: '110px' }, children: "Calendar start:" }), _jsxs("select", { className: styles.input, value: globalWeekStartsOn, onChange: async (e) => {
-                                                            const value = e.target.value;
-                                                            const success = await onSaveGlobalWeekStartsOn(value);
-                                                            setSettingsFeedback({
-                                                                type: success ? 'success' : 'error',
-                                                                message: success
-                                                                    ? `Week start saved (${value === 'sunday' ? 'Sunday' : 'Monday'}).`
-                                                                    : 'Failed to save week start.'
-                                                            });
-                                                        }, style: { maxWidth: '220px' }, children: [_jsx("option", { value: "sunday", children: "Sunday" }), _jsx("option", { value: "monday", children: "Monday" })] })] }), _jsxs("div", { className: styles.pathInputGroup, children: [_jsx("label", { className: styles.label, style: { minWidth: '110px' }, children: "Language:" }), _jsx("select", { className: styles.input, value: locale, onChange: async (e) => {
-                                                            const value = e.target.value;
-                                                            if (!onSaveLocale)
-                                                                return;
-                                                            const success = await onSaveLocale(value);
-                                                            setSettingsFeedback({
-                                                                type: success ? 'success' : 'error',
-                                                                message: success ? `Language saved (${value}).` : 'Failed to save language.'
-                                                            });
-                                                        }, style: { maxWidth: '220px' }, disabled: !onSaveLocale, children: supportedLocales.map((value) => (_jsx("option", { value: value, children: value }, value))) })] })] }), _jsxs("div", { className: styles.settingGroup, children: [_jsx("h3", { className: styles.settingTitle, children: "Keyboard Shortcut" }), _jsxs("div", { className: styles.pathInputGroup, children: [_jsxs("div", { className: styles.shortcutInputWrapper, children: [_jsx(Keyboard, { size: 16, className: styles.inputIcon }), _jsx("input", { type: "text", value: keyShortcut, onChange: (e) => onKeyShortcutChange(e.target.value), placeholder: "e.g. Alt+T, Ctrl+Shift+K", className: `${styles.input} ${styles.shortcutInput}` })] }), _jsx("button", { onClick: async () => {
-                                                            const success = await onSaveSettings();
-                                                            setSettingsFeedback({
-                                                                type: success ? 'success' : 'error',
-                                                                message: success ? 'Global shortcut saved.' : 'Failed to save global shortcut.'
-                                                            });
-                                                        }, className: `${styles.saveSettingsBtn} ${styles.saveSettingsBtnWrapper}`, children: "Save" })] }), _jsxs("p", { className: styles.settingHelper, children: ["Supported modifiers: Alt, Option, Ctrl, Shift, Meta (Cmd). Example: ", _jsx("code", { children: "Alt+T" }), " or ", _jsx("code", { children: "Ctrl+Shift+L" }), "."] })] })] })), generalScopeTab === 'project' && (_jsxs("div", { className: styles.settingGroup, children: [_jsx("h3", { className: styles.settingTitle, children: "Danger Zone" }), runtimeMode !== 'cloud' || !workspaceSwitchingEnabled ? (_jsx("p", { className: styles.settingHelper, children: "Workspace deletion is available in cloud runtime only." })) : !isAuthenticated ? (_jsx("p", { className: styles.settingHelper, children: "Sign in to manage workspace deletion." })) : currentWorkspaceRole !== 'owner' ? (_jsx("p", { className: styles.settingHelper, children: "Only workspace owners can delete a workspace." })) : (_jsx("div", { className: styles.pathInputGroup, children: _jsxs("button", { className: styles.destructiveBtn, onClick: async () => {
-                                                if (!onDeleteWorkspace)
-                                                    return;
-                                                const normalizedWorkspaceId = String(workspaceId || '').trim();
-                                                if (!normalizedWorkspaceId || normalizedWorkspaceId === 'default') {
-                                                    setSettingsFeedback({
-                                                        type: 'error',
-                                                        message: 'A non-default workspace is required for deletion.'
-                                                    });
-                                                    return;
-                                                }
-                                                const expectedName = String(currentWorkspaceName || '').trim();
-                                                const confirmation = window.prompt(`Type "${expectedName}" to permanently delete this workspace.`);
-                                                if (confirmation === null)
-                                                    return;
-                                                if (confirmation.trim() !== expectedName) {
-                                                    setSettingsFeedback({
-                                                        type: 'error',
-                                                        message: 'Workspace name confirmation did not match.'
-                                                    });
-                                                    return;
-                                                }
-                                                const result = await onDeleteWorkspace(normalizedWorkspaceId);
-                                                if (!result.success) {
+                                                        } }), _jsx("span", { children: "Enable automatic JSON backup (`.taskforce/tasks.json`)" })] })] })) })), generalScopeTab === 'global' && (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.settingGroup, children: showJsonBackupSettings && (_jsxs(_Fragment, { children: [_jsx("h3", { className: styles.settingTitle, children: "Backup" }), _jsxs("label", { className: styles.archiveToggle, children: [_jsx("input", { type: "checkbox", checked: globalJsonBackupEnabled, onChange: async (e) => {
+                                                                    const success = await onSaveGlobalJsonBackupEnabled(e.target.checked);
+                                                                    setSettingsFeedback({
+                                                                        type: success ? 'success' : 'error',
+                                                                        message: success ? 'Global backup default saved.' : 'Failed to save global backup default.'
+                                                                    });
+                                                                } }), _jsx("span", { children: "Enable global JSON backup default" })] })] })) }), _jsxs("div", { className: styles.settingGroup, children: [_jsx("h3", { className: styles.settingTitle, children: "Regional" }), _jsxs("div", { className: styles.pathInputGroup, children: [_jsx("label", { className: styles.label, style: { minWidth: '110px' }, children: "Calendar start:" }), _jsxs("select", { className: styles.input, value: globalWeekStartsOn, onChange: async (e) => {
+                                                                const value = e.target.value;
+                                                                const success = await onSaveGlobalWeekStartsOn(value);
+                                                                setSettingsFeedback({
+                                                                    type: success ? 'success' : 'error',
+                                                                    message: success
+                                                                        ? `Week start saved (${value === 'sunday' ? 'Sunday' : 'Monday'}).`
+                                                                        : 'Failed to save week start.'
+                                                                });
+                                                            }, style: { maxWidth: '220px' }, children: [_jsx("option", { value: "sunday", children: "Sunday" }), _jsx("option", { value: "monday", children: "Monday" })] })] }), _jsxs("div", { className: styles.pathInputGroup, children: [_jsx("label", { className: styles.label, style: { minWidth: '110px' }, children: "Language:" }), _jsx("select", { className: styles.input, value: locale, onChange: async (e) => {
+                                                                const value = e.target.value;
+                                                                if (!onSaveLocale)
+                                                                    return;
+                                                                const success = await onSaveLocale(value);
+                                                                setSettingsFeedback({
+                                                                    type: success ? 'success' : 'error',
+                                                                    message: success ? `Language saved (${value}).` : 'Failed to save language.'
+                                                                });
+                                                            }, style: { maxWidth: '220px' }, disabled: !onSaveLocale, children: supportedLocales.map((value) => (_jsx("option", { value: value, children: value }, value))) })] })] }), _jsxs("div", { className: styles.settingGroup, children: [_jsx("h3", { className: styles.settingTitle, children: "Keyboard Shortcut" }), _jsxs("div", { className: styles.pathInputGroup, children: [_jsxs("div", { className: styles.shortcutInputWrapper, children: [_jsx(Keyboard, { size: 16, className: styles.inputIcon }), _jsx("input", { type: "text", value: keyShortcut, onChange: (e) => onKeyShortcutChange(e.target.value), placeholder: "e.g. Alt+T, Ctrl+Shift+K", className: `${styles.input} ${styles.shortcutInput}` })] }), _jsx("button", { onClick: async () => {
+                                                                const success = await onSaveSettings();
+                                                                setSettingsFeedback({
+                                                                    type: success ? 'success' : 'error',
+                                                                    message: success ? 'Global shortcut saved.' : 'Failed to save global shortcut.'
+                                                                });
+                                                            }, className: `${styles.saveSettingsBtn} ${styles.saveSettingsBtnWrapper}`, children: "Save" })] }), _jsxs("p", { className: styles.settingHelper, children: ["Supported modifiers: Alt, Option, Ctrl, Shift, Meta (Cmd). Example: ", _jsx("code", { children: "Alt+T" }), " or ", _jsx("code", { children: "Ctrl+Shift+L" }), "."] })] })] })), generalScopeTab === 'project' && runtimeMode === 'cloud' && (_jsxs("div", { className: styles.settingGroup, children: [_jsx("h3", { className: styles.settingTitle, children: "Danger Zone" }), !workspaceSwitchingEnabled ? (_jsx("p", { className: styles.settingHelper, children: "Workspace deletion is available in cloud runtime only." })) : !isAuthenticated ? (_jsx("p", { className: styles.settingHelper, children: "Sign in to manage workspace deletion." })) : currentWorkspaceRole !== 'owner' ? (_jsx("p", { className: styles.settingHelper, children: "Only workspace owners can delete a workspace." })) : (_jsx("div", { className: styles.pathInputGroup, children: _jsxs("button", { className: styles.destructiveBtn, onClick: async () => {
+                                                    if (!onDeleteWorkspace)
+                                                        return;
+                                                    const normalizedWorkspaceId = String(workspaceId || '').trim();
+                                                    if (!normalizedWorkspaceId || normalizedWorkspaceId === 'default') {
+                                                        setSettingsFeedback({
+                                                            type: 'error',
+                                                            message: 'A non-default workspace is required for deletion.'
+                                                        });
+                                                        return;
+                                                    }
+                                                    const expectedName = String(currentWorkspaceName || '').trim();
+                                                    const confirmation = window.prompt(`Type "${expectedName}" to permanently delete this workspace.`);
+                                                    if (confirmation === null)
+                                                        return;
+                                                    if (confirmation.trim() !== expectedName) {
+                                                        setSettingsFeedback({
+                                                            type: 'error',
+                                                            message: 'Workspace name confirmation did not match.'
+                                                        });
+                                                        return;
+                                                    }
+                                                    const result = await onDeleteWorkspace(normalizedWorkspaceId);
+                                                    if (!result.success) {
+                                                        setSettingsFeedback({
+                                                            type: 'error',
+                                                            message: result.error || 'Failed to delete workspace.'
+                                                        });
+                                                        return;
+                                                    }
+                                                    const warningCount = Array.isArray(result.cleanupWarnings) ? result.cleanupWarnings.length : 0;
                                                     setSettingsFeedback({
-                                                        type: 'error',
-                                                        message: result.error || 'Failed to delete workspace.'
+                                                        type: warningCount > 0 ? 'error' : 'success',
+                                                        message: warningCount > 0
+                                                            ? `Workspace deleted with ${warningCount} cleanup warning(s).`
+                                                            : 'Workspace deleted.'
                                                     });
+                                                }, disabled: !onDeleteWorkspace, children: [_jsx(Trash2, { size: 14, style: { marginRight: 8 } }), "Delete Workspace"] }) }))] }))] })), activeTab === 'appearanceApplication' && (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.settingGroup, children: _jsxs("div", { className: `${styles.settingsTabs} tf-scrollbar tf-scrollbar--track-transparent tf-scrollbar--compact`, children: [_jsx("button", { className: `${styles.settingsTabBtn} ${generalScopeTab === 'project' ? styles.settingsTabBtnActive : ''}`, onClick: () => setGeneralScopeTab('project'), children: "Project" }), _jsx("button", { className: `${styles.settingsTabBtn} ${generalScopeTab === 'global' ? styles.settingsTabBtnActive : ''}`, onClick: () => setGeneralScopeTab('global'), children: "Global" })] }) }), generalScopeTab === 'project' ? renderProjectThemeControls() : renderGlobalThemeControls()] })), activeTab === 'appearanceTaskCards' && (_jsxs("div", { className: styles.settingGroup, children: [_jsx("h3", { className: `${styles.settingTitle} tf-heading-section`, children: "Task Cards" }), _jsxs("label", { className: styles.archiveToggle, children: [_jsx("input", { type: "checkbox", checked: showTaskCardStatusLabel, onChange: async (e) => {
+                                                if (!onShowTaskCardStatusLabelChange)
                                                     return;
-                                                }
-                                                const warningCount = Array.isArray(result.cleanupWarnings) ? result.cleanupWarnings.length : 0;
+                                                const success = await onShowTaskCardStatusLabelChange(e.target.checked);
                                                 setSettingsFeedback({
-                                                    type: warningCount > 0 ? 'error' : 'success',
-                                                    message: warningCount > 0
-                                                        ? `Workspace deleted with ${warningCount} cleanup warning(s).`
-                                                        : 'Workspace deleted.'
+                                                    type: success ? 'success' : 'error',
+                                                    message: success ? 'Task card status label setting saved.' : 'Failed to save task card status label setting.'
                                                 });
-                                            }, disabled: !onDeleteWorkspace, children: [_jsx(Trash2, { size: 14, style: { marginRight: 8 } }), "Delete Workspace"] }) }))] }))] })), activeTab === 'documents' && (_jsxs(_Fragment, { children: [_jsxs("div", { className: styles.settingGroup, children: [_jsx("h3", { className: styles.settingTitle, children: "Local Documents" }), _jsx("p", { className: styles.settingHelper, children: "Local document behavior is available to all users and does not require admin permissions." }), _jsxs("div", { className: `${styles.pathInputGroup} ${styles.marginTop12}`, children: [_jsx("label", { className: styles.label, style: { minWidth: '110px' }, children: "Storage mode:" }), _jsx("input", { className: styles.input, value: documentsConfigLoading
-                                                    ? 'Loading...'
-                                                    : (documentsStorageProvider === 'r2' ? 'Cloud (R2)' : documentsStorageProvider === 'local' ? 'Local filesystem' : 'Unavailable'), disabled: true, style: { maxWidth: '260px' } })] }), _jsx("p", { className: styles.settingHelper, children: "Per-user editor preferences are configured directly from the document editor screen." }), documentsStorageProvider === 'local' && (_jsx("p", { className: styles.settingHelper, children: "Local documents are stored in `.taskforce/docs` and `.taskforce/task-data/.../attachments`." }))] }), _jsxs("div", { className: `${styles.settingGroup} ${styles.marginTop16}`, children: [_jsx("h3", { className: styles.settingTitle, children: "Cloud Document Storage" }), isAuthenticated && documentsStorageProvider === 'r2' ? (_jsxs(_Fragment, { children: [_jsx("p", { className: styles.settingHelper, children: "System-level cloud storage and integrity controls are managed in App Admin." }), _jsx("div", { className: `${styles.pathInputGroup} ${styles.marginTop12}`, style: { flexWrap: 'wrap', alignItems: 'center' }, children: _jsx("button", { className: styles.copyBtn, onClick: () => {
-                                                        window.open(resolveAdminConsoleUrl(), '_blank', 'noopener,noreferrer');
-                                                    }, children: "Open App Admin" }) })] })) : isAuthenticated && documentsStorageProvider === 'local' ? (_jsx("p", { className: styles.settingHelper, children: "Cloud storage is not active in this environment. No cloud document settings are currently applied." })) : (_jsx("p", { className: styles.settingHelper, children: "Sign in to access cloud document storage controls in App Admin." }))] })] })), activeTab === 'commands' && (_jsx(_Fragment, { children: _jsxs("div", { className: styles.settingGroup, children: [_jsxs("div", { className: styles.settingTitleRow, children: [_jsx("h3", { className: styles.settingTitle, children: "Command Workflows" }), _jsx("button", { onClick: () => {
-                                                setActiveTab('workflowEditor');
-                                                onSectionChange?.('workflow-editor');
-                                            }, className: styles.copyBtn, children: "Open Workflows" })] }), _jsx("p", { className: `${styles.settingsHint} ${styles.marginBottom12}`, children: "Export standard workflows to your project to verify and commit them." }), _jsxs("div", { className: `${styles.exportRow} ${styles.exportRowGrid}`, children: [_jsxs("div", { className: styles.settingGroup, children: [_jsx("h4", { className: `${styles.settingSubtitle} ${styles.settingSubtitleCustom}`, children: "Target Environment" }), _jsx("div", { className: styles.buttonGrid, children: availableEnvironments.map(env => (_jsxs("button", { onClick: () => onExportEnvironmentChange(env.id), className: `${styles.themeBtn} ${exportEnvironment === env.id ? styles.activeTheme : ''} ${styles.capitalize}`, children: [getIconComponent(env.icon), env.name] }, env.id))) })] }), _jsxs("div", { className: styles.exportItem, children: [_jsxs("div", { className: styles.labelGroupFlex, children: [_jsx("label", { className: styles.label, children: "Workflows" }), _jsxs("span", { className: styles.settingDescription, children: ["Destination: ", _jsx("code", { className: styles.code, children: exportWorkflowsPath })] })] }), _jsxs("div", { className: styles.workflowList, children: [_jsxs("div", { className: styles.workflowActions, children: [_jsx("button", { onClick: handleSelectAllWorkflows, className: styles.textBtn, children: "All" }), _jsx("button", { onClick: handleDeselectAllWorkflows, className: styles.textBtn, children: "None" })] }), _jsx("div", { className: styles.workflowGrid, children: availableWorkflows.length === 0 ? (_jsxs("div", { className: styles.emptyState, children: ["No workflow templates found.", _jsx("button", { onClick: () => onRefreshWorkflows?.(true), className: styles.secondaryBtn, style: { marginTop: '8px' }, children: "Retry Fetch" })] })) : availableWorkflows.map(wf => (_jsxs("label", { className: styles.checkboxLabel, children: [_jsx("input", { type: "checkbox", checked: selectedWorkflows.includes(wf), onChange: () => handleToggleWorkflow(wf) }), wf] }, wf))) })] }), _jsxs("button", { className: `${styles.secondaryHeaderBtn} ${styles.marginTop12}`, onClick: () => onExportWorkflows?.(exportEnvironment, selectedWorkflows), disabled: exportingResource === 'workflows' || selectedWorkflows.length === 0, children: [exportingResource === 'workflows' ? _jsx(Loader2, { size: 14, className: styles.spinner }) : _jsx(FileText, { size: 14 }), "Export Selected (", selectedWorkflows.length, ")"] })] })] }), exportResult && (_jsxs("div", { className: `${exportResult.type === 'success' ? styles.successMessage : styles.errorMessage} ${styles.marginTop12}`, children: [exportResult.type === 'success' ? _jsx(Check, { size: 14 }) : _jsx(AlertTriangle, { size: 14 }), exportResult.message] }))] }) })), activeTab === 'initiatives' && (_jsxs("div", { className: styles.settingGroup, children: [_jsxs("div", { className: styles.settingTitleRow, children: [_jsx("h3", { className: styles.settingTitle, children: "Initiative Templates" }), _jsx("button", { className: styles.copyBtn, onClick: () => { void onRefreshInitiativeTemplates?.(); }, children: "Refresh" })] }), _jsx("p", { className: `${styles.settingsHint} ${styles.marginBottom12}`, children: "Create launch, migration, or incident initiatives with checklist-ready child milestones." }), _jsxs("div", { className: styles.exportItem, children: [_jsx("label", { className: styles.label, children: "Template" }), _jsx("select", { className: styles.input, value: selectedInitiativeTemplateId, onChange: (e) => {
-                                            const nextId = e.target.value;
-                                            setSelectedInitiativeTemplateId(nextId);
-                                            const selected = initiativeTemplates.find(t => t.id === nextId);
-                                            if (selected) {
-                                                setCloneChecklistDodText((selected.checklistBlocks?.definitionOfDone || []).join('\n'));
-                                                setCloneChecklistRollbackText((selected.checklistBlocks?.rollbackPlan || []).join('\n'));
-                                            }
-                                        }, children: initiativeTemplates.map(template => (_jsx("option", { value: template.id, children: template.name }, template.id))) })] }), _jsxs("div", { className: `${styles.exportItem} ${styles.marginTop12}`, children: [_jsx("label", { className: styles.label, children: "Initiative Title" }), _jsx("input", { className: styles.input, placeholder: "e.g. Taskforce Private Beta Launch", value: initiativeTitle, onChange: (e) => setInitiativeTitle(e.target.value) })] }), _jsxs("div", { className: `${styles.exportItem} ${styles.marginTop12}`, children: [_jsx("label", { className: styles.label, children: "Parent Task ID (optional)" }), _jsx("input", { className: styles.input, placeholder: "task-...", value: initiativeParentTaskId, onChange: (e) => setInitiativeParentTaskId(e.target.value) })] }), _jsxs("button", { className: `${styles.secondaryHeaderBtn} ${styles.marginTop12}`, disabled: isCreatingInitiative || !selectedInitiativeTemplateId || !initiativeTitle.trim() || !onCreateInitiativeFromTemplate, onClick: async () => {
-                                    if (!onCreateInitiativeFromTemplate)
-                                        return;
-                                    setIsCreatingInitiative(true);
-                                    const result = await onCreateInitiativeFromTemplate({
-                                        templateId: selectedInitiativeTemplateId,
-                                        title: initiativeTitle.trim(),
-                                        parentTaskId: initiativeParentTaskId.trim() || null
-                                    });
-                                    setIsCreatingInitiative(false);
-                                    setSettingsFeedback({
-                                        type: result.success ? 'success' : 'error',
-                                        message: result.success
-                                            ? 'Initiative created from template.'
-                                            : (result.error || 'Failed to create initiative.')
-                                    });
-                                }, children: [isCreatingInitiative ? _jsx(Loader2, { size: 14, className: styles.spinner }) : _jsx(Zap, { size: 14 }), "Create Initiative"] }), _jsxs("div", { className: `${styles.exportItem} ${styles.marginTop12}`, children: [_jsx("label", { className: styles.label, children: "Clone Checklists to Children" }), _jsx("input", { className: styles.input, placeholder: "Parent task ID to update children (task-...)", value: cloneChecklistParentTaskId, onChange: (e) => setCloneChecklistParentTaskId(e.target.value) }), _jsx("textarea", { className: `${styles.input} ${styles.marginTop12}`, rows: 4, placeholder: "Definition of Done items, one per line", value: cloneChecklistDodText, onChange: (e) => setCloneChecklistDodText(e.target.value) }), _jsx("textarea", { className: `${styles.input} ${styles.marginTop12}`, rows: 4, placeholder: "Rollback Plan items, one per line", value: cloneChecklistRollbackText, onChange: (e) => setCloneChecklistRollbackText(e.target.value) })] }), _jsxs("button", { className: `${styles.secondaryHeaderBtn} ${styles.marginTop12}`, disabled: isCloningChecklists || !cloneChecklistParentTaskId.trim() || !onCloneChecklistBlocksToChildren, onClick: async () => {
-                                    if (!onCloneChecklistBlocksToChildren)
-                                        return;
-                                    setIsCloningChecklists(true);
-                                    const result = await onCloneChecklistBlocksToChildren({
-                                        parentTaskId: cloneChecklistParentTaskId.trim(),
-                                        checklistBlocks: {
-                                            definitionOfDone: cloneChecklistDodText.split('\n').map(s => s.trim()).filter(Boolean),
-                                            rollbackPlan: cloneChecklistRollbackText.split('\n').map(s => s.trim()).filter(Boolean)
+                                            }, disabled: !onShowTaskCardStatusLabelChange }), _jsx("span", { children: "Show status label" })] })] })), activeTab === 'appearanceTaskForms' && renderTaskFormsControls(), activeTab === 'commands' && (_jsx(_Fragment, { children: _jsxs("div", { className: styles.settingGroup, children: [_jsx("div", { className: styles.settingTitleRow, children: _jsx("h3", { className: styles.settingTitle, children: "Command Workflows" }) }), _jsx("p", { className: `${styles.settingsHint} ${styles.marginBottom12}`, children: "Export standard workflows to your project to verify and commit them." }), _jsxs("div", { className: `${styles.exportRow} ${styles.exportRowGrid}`, children: [_jsxs("div", { className: styles.settingGroup, children: [_jsx("h4", { className: `${styles.settingSubtitle} ${styles.settingSubtitleCustom}`, children: "Target Environment" }), _jsx("div", { className: styles.buttonGrid, children: availableEnvironments.map(env => (_jsxs("button", { onClick: () => onExportEnvironmentChange(env.id), className: `${styles.themeBtn} ${exportEnvironment === env.id ? styles.activeTheme : ''} ${styles.capitalize}`, children: [getIconComponent(env.icon), env.name] }, env.id))) })] }), _jsxs("div", { className: styles.exportItem, children: [_jsxs("div", { className: styles.labelGroupFlex, children: [_jsx("label", { className: styles.label, children: "Workflows" }), _jsxs("span", { className: styles.settingDescription, children: ["Destination: ", _jsx("code", { className: styles.code, children: exportWorkflowsPath })] })] }), _jsxs("div", { className: styles.workflowList, children: [_jsxs("div", { className: styles.workflowActions, children: [_jsx("button", { onClick: handleSelectAllWorkflows, className: styles.textBtn, children: "All" }), _jsx("button", { onClick: handleDeselectAllWorkflows, className: styles.textBtn, children: "None" })] }), _jsx("div", { className: styles.workflowGrid, children: availableWorkflows.length === 0 ? (_jsxs("div", { className: styles.emptyState, children: ["No workflow templates found.", _jsx("button", { onClick: () => onRefreshWorkflows?.(true), className: styles.secondaryBtn, style: { marginTop: '8px' }, children: "Retry Fetch" })] })) : availableWorkflows.map(wf => (_jsxs("label", { className: styles.checkboxLabel, children: [_jsx("input", { type: "checkbox", checked: selectedWorkflows.includes(wf), onChange: () => handleToggleWorkflow(wf) }), wf] }, wf))) })] }), _jsxs("button", { className: `${styles.secondaryHeaderBtn} ${styles.marginTop12}`, onClick: () => onExportWorkflows?.(exportEnvironment, selectedWorkflows), disabled: exportingResource === 'workflows' || selectedWorkflows.length === 0, children: [exportingResource === 'workflows' ? _jsx(Loader2, { size: 14, className: styles.spinner }) : _jsx(FileText, { size: 14 }), "Export Selected (", selectedWorkflows.length, ")"] })] })] }), exportResult && (_jsxs("div", { className: `${exportResult.type === 'success' ? styles.successMessage : styles.errorMessage} ${styles.marginTop12}`, children: [exportResult.type === 'success' ? _jsx(Check, { size: 14 }) : _jsx(AlertTriangle, { size: 14 }), exportResult.message] }))] }) })), activeTab === 'initiatives' && (_jsxs("div", { className: styles.settingGroup, children: [_jsxs("div", { className: styles.settingTitleRow, children: [_jsx("h3", { className: styles.settingTitle, children: "Initiative Templates" }), _jsx("button", { className: styles.copyBtn, onClick: () => { void onRefreshInitiativeTemplates?.(); }, children: "Refresh" })] }), _jsx("p", { className: `${styles.settingsHint} ${styles.marginBottom12}`, children: "Create launch, migration, or incident initiatives from reusable templates." }), _jsxs("div", { className: styles.exportItem, children: [_jsx("label", { className: styles.label, children: "Template" }), _jsx("select", { className: styles.input, value: selectedInitiativeTemplateId, onChange: (e) => {
+                                                const nextId = e.target.value;
+                                                setSelectedInitiativeTemplateId(nextId);
+                                            }, children: initiativeTemplates.map(template => (_jsx("option", { value: template.id, children: template.name }, template.id))) })] }), _jsxs("div", { className: `${styles.exportItem} ${styles.marginTop12}`, children: [_jsx("label", { className: styles.label, children: "Initiative Title" }), _jsx("input", { className: styles.input, placeholder: "e.g. Taskforce Private Beta Launch", value: initiativeTitle, onChange: (e) => setInitiativeTitle(e.target.value) })] }), _jsxs("button", { className: `${styles.secondaryHeaderBtn} ${styles.marginTop12}`, disabled: isCreatingInitiative || !selectedInitiativeTemplateId || !initiativeTitle.trim() || !onCreateInitiativeFromTemplate, onClick: async () => {
+                                        if (!onCreateInitiativeFromTemplate)
+                                            return;
+                                        setIsCreatingInitiative(true);
+                                        const result = await onCreateInitiativeFromTemplate({
+                                            templateId: selectedInitiativeTemplateId,
+                                            title: initiativeTitle.trim(),
+                                        });
+                                        setIsCreatingInitiative(false);
+                                        setSettingsFeedback({
+                                            type: result.success ? 'success' : 'error',
+                                            message: result.success
+                                                ? 'Initiative created from template.'
+                                                : (result.error || 'Failed to create initiative.')
+                                        });
+                                    }, children: [isCreatingInitiative ? _jsx(Loader2, { size: 14, className: styles.spinner }) : _jsx(Zap, { size: 14 }), "Create Initiative"] })] })), activeTab === 'agents' && (_jsx("div", { className: styles.settingGroup, children: _jsxs("div", { children: [_jsx("h4", { className: styles.settingSubTitle, children: "Registered AI Profiles" }), _jsx("p", { className: `${styles.settingsHint} ${styles.marginBottom12}`, children: "AI agents register profiles when connecting via MCP. Merge duplicates created when a token was lost." }), aiProfilesLoading && (_jsxs("div", { className: styles.settingsHint, children: [_jsx(Loader2, { size: 13, className: styles.spinner }), " Loading profiles\u2026"] })), !aiProfilesLoading && aiProfiles.length === 0 && (_jsx("div", { className: styles.settingsHint, children: "No AI profiles registered yet." })), !aiProfilesLoading && aiProfiles.length > 0 && (() => {
+                                        const byName = new Map();
+                                        for (const p of aiProfiles) {
+                                            const key = p.name.toLowerCase();
+                                            if (!byName.has(key))
+                                                byName.set(key, []);
+                                            byName.get(key).push(p);
                                         }
-                                    });
-                                    setIsCloningChecklists(false);
-                                    setSettingsFeedback({
-                                        type: result.success ? 'success' : 'error',
-                                        message: result.success
-                                            ? `Checklist blocks cloned to ${result.updated ?? 0} child task(s).`
-                                            : (result.error || 'Failed to clone checklist blocks.')
-                                    });
-                                }, children: [isCloningChecklists ? _jsx(Loader2, { size: 14, className: styles.spinner }) : _jsx(Copy, { size: 14 }), "Clone Checklists"] })] })), activeTab === 'workflowEditor' && (_jsx(WorkflowEditorPrototype, { availableWorkflows: availableWorkflows, onFetchWorkflowTemplate: onFetchWorkflowTemplate, onFetchWorkflowOverrideNames: onFetchWorkflowOverrideNames, onSaveWorkflowTemplateDraft: onSaveWorkflowTemplateDraft, onResetWorkflowTemplateDraft: onResetWorkflowTemplateDraft })), activeTab === 'agents' && (_jsxs("div", { className: styles.settingGroup, children: [_jsx("h3", { className: styles.settingTitle, children: "AI Specialists (Agents)" }), _jsx("p", { className: `${styles.settingsHint} ${styles.marginBottom12}`, children: "Export specialist definitions to your project as .md files for AI context." }), _jsx("div", { className: `${styles.exportRow} ${styles.exportRowGrid}`, children: _jsxs("div", { className: styles.exportItem, children: [_jsx("label", { className: styles.label, children: "Specialists Path" }), _jsxs("div", { className: styles.pathInputGroup, children: [_jsx("input", { type: "text", value: exportSpecialistsPath, onChange: (e) => onExportSpecialistsPathChange(e.target.value), className: styles.input }), _jsxs("button", { className: styles.secondaryHeaderBtn, onClick: () => onExportResources('specialists', exportSpecialistsPath), disabled: exportingResource === 'specialists', children: [exportingResource === 'specialists' ? _jsx(Loader2, { size: 14, className: styles.spinner }) : _jsx(Users, { size: 14 }), "Export"] })] })] }) }), exportResult && (_jsxs("div", { className: `${exportResult.type === 'success' ? styles.successMessage : styles.errorMessage} ${styles.marginTop12}`, children: [exportResult.type === 'success' ? _jsx(Check, { size: 14 }) : _jsx(AlertTriangle, { size: 14 }), exportResult.message] }))] })), activeTab === 'taxonomy' && (_jsxs("div", { className: `${styles.settingGroup} ${styles.flex1} ${styles.flexCol}`, children: [_jsx("h3", { className: styles.settingTitle, children: "Taxonomy & Classification" }), _jsx("p", { className: styles.settingsHint, children: "Configure categories, task types, and custom classification systems." }), _jsx(TaxonomyManager, { taxonomies: taxonomies, onUpdateTaxonomies: onUpdateTaxonomies, 
-                                // Inject Category and Type managers as system taxonomies
-                                categories: categories, pathValidation: pathValidation, onUpdateCategory: onUpdateCategory, onRemoveCategory: onRemoveCategory, onSaveCategory: onSaveCategory, onAddPath: onAddPath, onRemovePath: onRemovePath, onUpdateCategoryIcon: onUpdateCategoryIcon, onUpdateCategoryColor: onUpdateCategoryColor, onBrowseFolders: handleBrowseFolders, types: types, onSaveType: onSaveType, onRemoveType: onRemoveType, priorities: priorities, onUpdatePriorities: onUpdatePriorities, approaches: approaches, onUpdateApproaches: onUpdateApproaches, manualComplexityEnabled: manualComplexityEnabled, onManualComplexityEnabledChange: async (enabled) => {
-                                    const success = await onManualComplexityEnabledChange(enabled);
-                                    setSettingsFeedback({
-                                        type: success ? 'success' : 'error',
-                                        message: success ? 'Project complexity setting saved.' : 'Failed to save project complexity setting.'
-                                    });
-                                }, initialTab: (initialSection === 'categories' || initialSection === 'types' || initialSection === 'approaches' || initialSection === 'priorities')
-                                    ? initialSection
-                                    : undefined })] })), activeTab === 'mcp' && (_jsxs("div", { className: styles.settingsGroup, children: [_jsx("h3", { className: styles.settingTitle, children: "MCP Integrations" }), _jsx("p", { className: styles.settingsHint, children: "Connect Taskforce context to Claude Desktop, Cursor, or other MCP clients. Generated configs include tenant/workspace scope env vars." }), _jsxs("div", { className: `${styles.settingsItem} ${styles.marginTop16}`, children: [_jsxs("div", { className: styles.settingLabelGroup, children: [_jsxs("div", { className: styles.labelGroupFlex, children: [_jsx("label", { className: styles.settingLabel, children: "MCP Path Mapping (Host Root)" }), serverHostRoot && !mcpHostRoot && (_jsx("span", { className: styles.configBadge, children: "Server Configured" }))] }), _jsx("span", { className: styles.settingDescription, children: "If running in Docker, WSL, or Remote Dev, provide the absolute path to this project as seen by your host OS (e.g. Mac/Windows)." })] }), _jsx("div", { className: styles.pathInputWrapper, children: _jsx("input", { type: "text", className: styles.settingInput, placeholder: serverHostRoot || "/Users/username/Projects/my-project or C:\\Projects\\my-project", value: mcpHostRoot || '', onChange: (e) => onMcpHostRootChange?.(e.target.value) }) })] }), _jsxs("div", { className: `${styles.codeBlockWrapper} ${styles.codeBlockWrapperCustom}`, children: [_jsxs("div", { className: styles.codeHeader, children: [_jsx("span", { className: styles.codeLabel, children: "MCP Configuration" }), _jsxs("div", { className: styles.codeHeaderActions, children: [_jsxs("button", { className: `${styles.copyBtn} ${copiedConfig === 'snippet' ? styles.copyBtnActive : ''}`, onClick: () => handleCopyConfig('snippet'), title: "Copy just this server snippet", children: [copiedConfig === 'snippet' ? _jsx(Check, { size: 14 }) : _jsx(Copy, { size: 14 }), copiedConfig === 'snippet' ? 'Snippet Copied!' : 'Copy Snippet'] }), _jsxs("button", { className: `${styles.copyBtn} ${copiedConfig === 'full' ? styles.copyBtnActive : ''}`, onClick: () => handleCopyConfig('full'), title: "Copy full configuration file", children: [copiedConfig === 'full' ? _jsx(Check, { size: 14 }) : _jsx(Copy, { size: 14 }), copiedConfig === 'full' ? 'Config Copied!' : 'Copy Full Config'] })] })] }), _jsx("pre", { className: styles.codeBlock, children: _jsx("code", { children: (() => {
-                                                const { serverId, serverConfig } = buildMcpServerConfig();
-                                                const dimmed = { color: 'rgba(166, 172, 205, 0.4)' };
-                                                const highlighted = { color: 'violet-500', fontWeight: 'bold' };
-                                                const bracketColor = { color: 'rgba(166, 172, 205, 0.6)' };
-                                                return (_jsxs(_Fragment, { children: [_jsx("span", { style: bracketColor, children: "{" }), "\n  ", _jsx("span", { style: dimmed, children: "\"mcpServers\"" }), _jsx("span", { style: dimmed, children: ":" }), " ", _jsx("span", { style: bracketColor, children: "{" }), "\n    ", _jsxs("span", { style: highlighted, children: [`"${serverId}"`, ": ", JSON.stringify(serverConfig, null, 2).split('\n').map((line, i) => i === 0 ? line : '    ' + line).join('\n')] }), "\n  ", _jsx("span", { style: bracketColor, children: "}" }), "\n", _jsx("span", { style: bracketColor, children: "}" })] }));
-                                            })() }) })] }), _jsx("div", { className: `${styles.settingGroup} ${styles.marginTop12}`, children: _jsxs("div", { className: styles.settingLabelGroup, children: [_jsx("label", { className: styles.settingLabel, children: "Installation" }), _jsxs("span", { className: styles.settingDescription, children: ["Taskforce MCP uses the global ", _jsx("code", { children: "taskforce" }), " command. Install with ", _jsx("code", { children: "npm install -g @taskforcehq/taskforce" }), "."] })] }) }), _jsx("div", { className: styles.marginTop12, style: { display: 'flex', gap: '8px' }, children: _jsx("button", { className: `${styles.copyBtn} ${showAdvancedMcp ? styles.copyBtnNeutralActive : ''}`, onClick: () => setShowAdvancedMcp((prev) => !prev), title: "Show advanced MCP install options", children: showAdvancedMcp ? 'Hide Advanced' : 'Show Advanced' }) }), showAdvancedMcp && (_jsxs("div", { className: `${styles.settingGroup} ${styles.marginTop12}`, children: [_jsxs("div", { className: styles.settingLabelGroup, children: [_jsx("label", { className: styles.settingLabel, children: "Advanced Installation Mode" }), _jsx("span", { className: styles.settingDescription, children: "Global mode is recommended. Local / npx is intended for Taskforce development workflows." })] }), _jsxs("div", { className: styles.buttonGrid, children: [_jsx("button", { className: `${styles.themeBtn} ${useGlobalMcp ? styles.activeTheme : ''}`, onClick: () => setUseGlobalMcp(true), children: "Global" }), _jsx("button", { className: `${styles.themeBtn} ${!useGlobalMcp ? styles.activeTheme : ''}`, onClick: () => setUseGlobalMcp(false), children: "Local / npx (Dev)" })] })] }))] }))] })] }));
+                                        return (_jsx("div", { className: styles.aiProfilesList, children: Array.from(byName.entries()).map(([, group]) => (_jsxs("div", { className: `${styles.aiProfileGroup} ${group.length > 1 ? styles.aiProfileGroupDuplicate : ''}`, children: [_jsxs("div", { className: styles.aiProfileGroupHeader, children: [_jsx(Bot, { size: 13, style: { color: group[0].color } }), _jsx("span", { className: styles.aiProfileName, children: group[0].name }), group.length > 1 && (_jsxs("span", { className: styles.aiProfileDuplicateBadge, children: [_jsx(AlertTriangle, { size: 11 }), " ", group.length, " duplicates"] }))] }), _jsxs("div", { className: styles.settingsHint, style: { marginTop: 6 }, children: ["@", group[0].username, group[0].role ? ` · ${group[0].role}` : ''] }), group[0].description && (_jsx("div", { className: styles.settingsHint, style: { marginTop: 4 }, children: group[0].description })), (group[0].provider || group[0].model) && (_jsx("div", { className: styles.settingsHint, style: { marginTop: 4 }, children: [group[0].provider, group[0].model].filter(Boolean).join(' · ') })), group.length > 1 && (_jsxs("div", { className: styles.aiProfileMergeSection, children: [group.map((p) => (_jsxs("div", { className: styles.aiProfileMergeRow, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: [_jsx("span", { className: styles.aiProfileIdChip, children: p.id }), _jsxs("span", { className: styles.settingsHint, children: ["@", p.username] })] }), aiProfileMergeState?.keepId !== p.id && (_jsx("button", { className: styles.secondaryHeaderBtn, title: "Keep this profile, merge others into it", onClick: () => {
+                                                                            const otherId = group.find((x) => x.id !== p.id)?.id;
+                                                                            if (otherId)
+                                                                                setAiProfileMergeState({ keepId: p.id, mergeId: otherId });
+                                                                        }, children: "Keep this" })), aiProfileMergeState?.keepId === p.id && (_jsx("span", { className: styles.aiProfileKeepBadge, children: "\u2713 keeping" }))] }, p.id))), aiProfileMergeState && group.some((p) => p.id === aiProfileMergeState.keepId) && (_jsxs("div", { className: styles.aiProfileMergeActions, children: [_jsxs("button", { className: styles.dangerBtn, onClick: () => doMergeAiProfiles(aiProfileMergeState.keepId, aiProfileMergeState.mergeId), children: ["Merge (keep ", aiProfileMergeState.keepId.slice(-6), ", delete ", aiProfileMergeState.mergeId.slice(-6), ")"] }), _jsx("button", { className: styles.secondaryHeaderBtn, onClick: () => setAiProfileMergeState(null), children: "Cancel" })] }))] }))] }, group[0].id))) }));
+                                    })(), aiProfileMergeStatus && (_jsxs("div", { className: `${aiProfileMergeStatus.type === 'success' ? styles.successMessage : styles.errorMessage} ${styles.marginTop12}`, children: [aiProfileMergeStatus.type === 'success' ? _jsx(Check, { size: 14 }) : _jsx(AlertTriangle, { size: 14 }), aiProfileMergeStatus.message] }))] }) })), activeTab === 'taxonomy' && (_jsxs("div", { className: `${styles.settingGroup} ${styles.flex1} ${styles.flexCol}`, children: [_jsx("h3", { className: styles.settingTitle, children: "Taxonomy & Classification" }), _jsx("p", { className: styles.settingsHint, children: "Configure categories, task types, and custom classification systems." }), _jsx(TaxonomyManager, { taxonomies: taxonomies, onUpdateTaxonomies: onUpdateTaxonomies, onApplySystemTaxonomyPack: onApplySystemTaxonomyPack, taxonomyDisplayLabels: taxonomyDisplayLabels, onUpdateTaxonomyDisplayLabels: onUpdateTaxonomyDisplayLabels, 
+                                    // Inject Category and Type managers as system taxonomies
+                                    categories: categories, pathValidation: pathValidation, onUpdateCategory: onUpdateCategory, onRemoveCategory: onRemoveCategory, onSaveCategory: onSaveCategory, onAddPath: onAddPath, onRemovePath: onRemovePath, onUpdateCategoryIcon: onUpdateCategoryIcon, onUpdateCategoryColor: onUpdateCategoryColor, onBrowseFolders: handleBrowseFolders, types: types, onSaveType: onSaveType, onRemoveType: onRemoveType, onUpdateType: onUpdateType, priorities: priorities, onUpdatePriorities: onUpdatePriorities, onAnalyzeSystemTaxonomyPack: onAnalyzeSystemTaxonomyPack, manualComplexityEnabled: manualComplexityEnabled, onManualComplexityEnabledChange: async (enabled) => {
+                                        const success = await onManualComplexityEnabledChange(enabled);
+                                        setSettingsFeedback({
+                                            type: success ? 'success' : 'error',
+                                            message: success ? 'Project complexity setting saved.' : 'Failed to save project complexity setting.'
+                                        });
+                                    }, initialTab: (initialSection === 'categories' || initialSection === 'types' || initialSection === 'priorities')
+                                        ? initialSection
+                                        : undefined })] })), activeTab === 'mcp' && (_jsxs("div", { className: styles.settingsGroup, children: [showMcpModeToggle && (_jsxs("div", { className: styles.settingsTabs, children: [_jsx("button", { className: `${styles.settingsTabBtn} ${selectedMcpMode === 'cloud' ? styles.settingsTabBtnActive : ''}`, onClick: () => setSelectedMcpMode('cloud'), children: "Cloud MCP" }), _jsx("button", { className: `${styles.settingsTabBtn} ${selectedMcpMode === 'local' ? styles.settingsTabBtnActive : ''}`, onClick: () => setSelectedMcpMode('local'), children: "Local MCP" })] })), showCloudMcp && (_jsx(_Fragment, { children: selectedMcpClientUsesOAuth ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: `${styles.settingGroup} ${styles.marginTop16}`, children: [_jsxs("div", { className: styles.settingLabelGroup, children: [_jsx("h3", { className: styles.settingTitle, children: "OAuth Connector Setup" }), _jsx("span", { className: styles.settingDescription, children: selectedMcpClient === 'chatgpt-desktop'
+                                                                    ? 'ChatGPT Desktop uses the Taskforce OAuth connector flow instead of a personal MCP token.'
+                                                                    : 'Claude Desktop uses the Taskforce OAuth connector flow instead of a personal MCP token.' })] }), _jsx("div", { className: `${selectedConnectorGrant ? styles.successMessage : styles.settingHelper} ${styles.marginTop12}`, children: selectedConnectorGrant ? (_jsxs(_Fragment, { children: [_jsx(Check, { size: 14 }), _jsxs("div", { children: [_jsx("div", { children: "Connector already authorized for this workspace." }), _jsxs("div", { className: styles.settingHelper, children: ["Last used ", selectedConnectorGrant.lastUsedAt
+                                                                                    ? new Date(selectedConnectorGrant.lastUsedAt).toLocaleString()
+                                                                                    : 'not yet'] })] })] })) : ('No active connector authorization for this workspace yet.') }), _jsx("div", { className: styles.settingDescription, style: { marginTop: '12px' }, children: "Use the server URL above in your client, then finish the OAuth authorization flow from the Integrations tab." }), _jsx("div", { style: { display: 'flex', justifyContent: 'flex-end', width: '100%', marginTop: '12px' }, children: _jsx("button", { className: styles.copyBtn, onClick: () => setActiveTab('integrations'), children: "Open Integrations" }) })] }), _jsxs("div", { className: `${styles.settingGroup} ${styles.marginTop16}`, children: [_jsxs("div", { className: `${styles.codeBlockWrapper} ${styles.codeBlockWrapperCustom} ${styles.marginTop12}`, style: { minHeight: '260px' }, children: [_jsxs("div", { className: styles.codeHeader, children: [_jsx("span", { className: styles.codeLabel, children: "Cloud MCP Configuration" }), _jsxs("div", { className: styles.codeHeaderActions, children: [_jsx("select", { className: styles.settingInput, value: selectedMcpClient, onChange: (e) => setSelectedMcpClient(e.target.value), "aria-label": "MCP client", style: { width: 'auto', minWidth: '170px', padding: '6px 12px', fontSize: '12px', borderRadius: '8px' }, children: MCP_CLIENT_OPTIONS.map((option) => (_jsx("option", { value: option.id, disabled: option.disabled, children: option.label }, option.id))) }), _jsx("button", { className: `${styles.copyBtn} ${copiedConfig === 'full' ? styles.copyBtnActive : ''}`, onClick: handleCopyCloudMcpConfig, title: "Copy full configuration file", children: copiedConfig === 'full' ? _jsx(Check, { size: 14 }) : _jsx(Copy, { size: 14 }) })] })] }), _jsx("pre", { className: styles.codeBlock, children: _jsx("code", { children: cloudMcpServerConfig
+                                                                        ? renderMcpConfigBlock(cloudMcpServerId, cloudMcpServerConfig, cloudClientIntegration.rootKey || 'mcpServers', cloudClientIntegration.wrapperKeys || [])
+                                                                        : renderTextConfigBlock(cloudClientIntegration.renderedText || '') }) })] }), _jsxs("div", { className: `${styles.codeBlockWrapper} ${styles.marginTop12}`, children: [_jsx("div", { className: styles.codeHeader, children: _jsx("span", { className: styles.codeLabel, children: cloudClientIntegration.instructionLabel }) }), _jsx("div", { style: { padding: '16px 20px' }, children: _jsx("div", { className: styles.settingDescription, children: cloudClientIntegration.instructionText }) })] })] })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: `${styles.settingGroup} ${styles.marginTop16}`, children: [_jsxs("div", { className: styles.settingLabelGroup, children: [_jsx("h3", { className: styles.settingTitle, children: "Generate Token" }), _jsx("span", { className: styles.settingDescription, children: "Tokens are shown once. Default scopes allow task read/write. Add workspace read if you want config and skills metadata in the client." })] }), _jsxs("div", { style: { display: 'grid', gridTemplateColumns: 'minmax(0, 2fr) minmax(220px, 1fr)', gap: '12px', alignItems: 'end' }, children: [_jsxs("div", { className: styles.settingsItem, children: [_jsx("div", { className: styles.settingLabelGroup, children: _jsx("span", { className: styles.settingDescription, children: "Token Name" }) }), _jsx("input", { type: "text", className: styles.settingInput, placeholder: "Cursor on MacBook", value: newTokenName, onChange: (e) => setNewTokenName(e.target.value) })] }), _jsxs("div", { className: styles.settingsItem, children: [_jsx("div", { className: styles.settingLabelGroup, children: _jsx("span", { className: styles.settingDescription, children: "Expiry (Optional)" }) }), _jsx("input", { type: "date", className: `${styles.settingInput} ${styles.taskFormDateInput}`, value: newTokenExpiresAt, onChange: (e) => setNewTokenExpiresAt(e.target.value) })] })] }), _jsxs("div", { className: `${styles.settingsItem} ${styles.marginTop12}`, children: [_jsx("div", { className: styles.settingLabelGroup, children: _jsx("span", { className: styles.settingDescription, children: "Scopes" }) }), _jsxs("div", { style: { display: 'grid', gridTemplateColumns: '96px repeat(3, minmax(110px, 1fr))', gap: '10px 16px', alignItems: 'center' }, children: [_jsx("span", {}), _jsx("span", { className: styles.settingDescription, children: "Tasks" }), _jsx("span", { className: styles.settingDescription, children: "Workspace" }), _jsx("span", { className: styles.settingDescription, style: { opacity: 0.55 }, children: "Attachments" }), _jsx("span", { className: styles.settingDescription, children: "Read" }), _jsx("label", { className: styles.checkboxLabel, children: _jsx("input", { type: "checkbox", className: styles.checkboxSmall, checked: newTokenScopes.includes('tasks:read'), onChange: () => toggleTokenScope('tasks:read') }) }), _jsx("label", { className: styles.checkboxLabel, children: _jsx("input", { type: "checkbox", className: styles.checkboxSmall, checked: newTokenScopes.includes('workspace:read'), onChange: () => toggleTokenScope('workspace:read') }) }), _jsx("label", { className: styles.checkboxLabel, style: { opacity: 0.55 }, children: _jsx("input", { type: "checkbox", className: styles.checkboxSmall, checked: false, disabled: true }) }), _jsx("span", { className: styles.settingDescription, children: "Write" }), _jsx("label", { className: styles.checkboxLabel, children: _jsx("input", { type: "checkbox", className: styles.checkboxSmall, checked: newTokenScopes.includes('tasks:write'), onChange: () => toggleTokenScope('tasks:write') }) }), _jsx("label", { className: styles.checkboxLabel, children: _jsx("input", { type: "checkbox", className: styles.checkboxSmall, checked: false, disabled: true }) }), _jsx("label", { className: styles.checkboxLabel, style: { opacity: 0.55 }, children: _jsx("input", { type: "checkbox", className: styles.checkboxSmall, checked: false, disabled: true }) })] })] })] }), _jsxs("div", { className: `${styles.settingGroup} ${styles.marginTop16}`, children: [_jsxs("div", { className: styles.settingLabelGroup, children: [_jsx("h3", { className: styles.settingTitle, children: "Automation Identity (Optional)" }), _jsx("span", { className: styles.settingDescription, children: "For recurring or background AI workers, set an AI name here so the generated MCP config includes Taskforce automation headers. After the first run, paste the returned profile token too so the same AI profile is reused across runs without extra bootstrap steps." })] }), aiProfiles.length > 0 && (_jsxs("div", { className: `${styles.settingsItem} ${styles.marginTop12}`, children: [_jsx("div", { className: styles.settingLabelGroup, children: _jsx("span", { className: styles.settingDescription, children: "Use Existing AI Profile" }) }), _jsxs("select", { className: styles.settingInput, "aria-label": "Use existing AI profile", value: selectedAutomationProfileId, onChange: (e) => {
+                                                                    const nextId = e.target.value;
+                                                                    if (!nextId) {
+                                                                        setAutomationAiName('');
+                                                                        setAutomationAiProfileToken('');
+                                                                        return;
+                                                                    }
+                                                                    const profile = aiProfiles.find((entry) => entry.id === nextId);
+                                                                    if (!profile)
+                                                                        return;
+                                                                    setAutomationAiName(profile.name);
+                                                                    setAutomationAiProfileToken(String(profile.profileToken || ''));
+                                                                }, children: [_jsx("option", { value: "", children: "Custom\u2026" }), aiProfiles.map((profile) => (_jsxs("option", { value: profile.id, children: [profile.name, " (@", profile.username, ")"] }, profile.id)))] })] })), _jsxs("div", { style: { display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)', gap: '12px', alignItems: 'end' }, children: [_jsxs("div", { className: styles.settingsItem, children: [_jsx("div", { className: styles.settingLabelGroup, children: _jsx("span", { className: styles.settingDescription, children: "AI Name Header" }) }), _jsx("input", { type: "text", className: styles.settingInput, placeholder: "Automation Codex", value: automationAiName, onChange: (e) => setAutomationAiName(e.target.value) })] }), _jsxs("div", { className: styles.settingsItem, children: [_jsx("div", { className: styles.settingLabelGroup, children: _jsx("span", { className: styles.settingDescription, children: "AI Profile Token Header" }) }), _jsx("input", { type: "text", className: styles.settingInput, placeholder: "tfp_...", value: automationAiProfileToken, onChange: (e) => setAutomationAiProfileToken(e.target.value) })] })] })] }), _jsxs("div", { className: `${styles.settingGroup} ${styles.marginTop16}`, children: [_jsx("div", { className: styles.settingHelper, children: "Generated tokens are only shown once. Copy the token before leaving this page." }), (() => {
+                                                        const displayedGeneratedToken = copiedConfig === 'token'
+                                                            ? 'Copied to clipboard'
+                                                            : (generatedTokenValue || '');
+                                                        return (_jsx("div", { style: { display: 'flex', gap: '8px', alignItems: 'stretch' }, children: _jsx("div", { className: styles.codeBlockWrapper, style: { flex: 1, cursor: generatedTokenValue ? 'pointer' : 'default' }, onClick: () => generatedTokenValue && copyToClipboard(generatedTokenValue, 'token'), role: generatedTokenValue ? 'button' : undefined, tabIndex: generatedTokenValue ? 0 : -1, onKeyDown: (e) => {
+                                                                    if (!generatedTokenValue)
+                                                                        return;
+                                                                    if (e.key === 'Enter' || e.key === ' ') {
+                                                                        e.preventDefault();
+                                                                        copyToClipboard(generatedTokenValue, 'token');
+                                                                    }
+                                                                }, title: generatedTokenValue ? (copiedConfig === 'token' ? 'Token copied' : 'Click to copy token') : undefined, children: _jsx("pre", { className: styles.codeBlock, style: { textAlign: 'center' }, children: _jsx("code", { children: displayedGeneratedToken }) }) }) }));
+                                                    })()] }), _jsxs("div", { className: `${styles.settingGroup} ${styles.marginTop16}`, children: [mcpTokenNotice?.type === 'error' && (_jsxs("div", { className: `${styles.errorMessage} ${styles.marginTop12}`, children: [_jsx(AlertTriangle, { size: 14 }), mcpTokenNotice.message] })), _jsxs("div", { className: `${styles.codeBlockWrapper} ${styles.codeBlockWrapperCustom} ${styles.marginTop12}`, style: { minHeight: '260px' }, children: [_jsxs("div", { className: styles.codeHeader, children: [_jsx("span", { className: styles.codeLabel, children: "Cloud MCP Configuration" }), _jsxs("div", { className: styles.codeHeaderActions, children: [_jsx("select", { className: styles.settingInput, value: selectedMcpClient, onChange: (e) => setSelectedMcpClient(e.target.value), "aria-label": "MCP client", style: { width: 'auto', minWidth: '170px', padding: '6px 12px', fontSize: '12px', borderRadius: '8px' }, children: MCP_CLIENT_OPTIONS.map((option) => (_jsx("option", { value: option.id, disabled: option.disabled, children: option.label }, option.id))) }), _jsxs("button", { className: styles.copyBtn, onClick: () => void handleCreateMcpToken(), disabled: mcpActionBusyId === 'create', title: "Generate Token", "aria-label": "Generate Token", children: [mcpActionBusyId === 'create' ? _jsx(Loader2, { size: 14, className: styles.spinIcon }) : _jsx(Zap, { size: 14 }), _jsx("span", { children: "GENERATE TOKEN" })] }), _jsx("button", { className: `${styles.copyBtn} ${copiedConfig === 'full' ? styles.copyBtnActive : ''}`, onClick: handleCopyCloudMcpConfig, title: "Copy full configuration file", children: copiedConfig === 'full' ? _jsx(Check, { size: 14 }) : _jsx(Copy, { size: 14 }) })] })] }), _jsx("pre", { className: styles.codeBlock, children: _jsx("code", { children: cloudMcpServerConfig
+                                                                        ? renderMcpConfigBlock(cloudMcpServerId, cloudMcpServerConfig, cloudClientIntegration.rootKey || 'mcpServers', cloudClientIntegration.wrapperKeys || [])
+                                                                        : renderTextConfigBlock(cloudClientIntegration.renderedText || '') }) })] }), _jsxs("div", { className: `${styles.codeBlockWrapper} ${styles.marginTop12}`, children: [_jsx("div", { className: styles.codeHeader, children: _jsx("span", { className: styles.codeLabel, children: cloudClientIntegration.instructionLabel }) }), _jsx("div", { style: { padding: '16px 20px' }, children: _jsx("div", { className: styles.settingDescription, children: cloudClientIntegration.instructionText }) })] })] }), _jsxs("div", { className: `${styles.settingGroup} ${styles.marginTop16}`, children: [_jsxs("div", { className: styles.toggleHeading, onClick: () => setShowMcpConnectionTest((prev) => !prev), onKeyDown: (e) => {
+                                                            if (e.key === 'Enter' || e.key === ' ') {
+                                                                e.preventDefault();
+                                                                setShowMcpConnectionTest((prev) => !prev);
+                                                            }
+                                                        }, role: "button", tabIndex: 0, title: showMcpConnectionTest ? 'Hide connection test' : 'Show connection test', children: [_jsx("label", { className: styles.label, children: "Test Connection" }), showMcpConnectionTest ? _jsx(ChevronDown, { size: 14 }) : _jsx(ChevronRight, { size: 14 })] }), showMcpConnectionTest && (_jsxs(_Fragment, { children: [_jsx("div", { className: `${styles.settingDescription} ${styles.marginTop12}`, children: "Validate that a token works for this workspace before you paste it into your MCP client." }), _jsxs("div", { className: `${styles.settingsItem} ${styles.marginTop12}`, children: [_jsx("div", { className: styles.settingLabelGroup, children: _jsx("span", { className: styles.settingDescription, children: "Token to Test" }) }), _jsx("input", { type: "text", className: styles.settingInput, placeholder: "tfmcp_xxxxx_replace-me", value: mcpConnectionToken, onChange: (e) => {
+                                                                            setMcpConnectionToken(e.target.value);
+                                                                            setMcpConnectionResult(null);
+                                                                        } })] }), _jsxs("div", { className: styles.marginTop12, style: { display: 'flex', gap: '8px', flexWrap: 'wrap', justifyContent: 'flex-end' }, children: [generatedTokenValue && (_jsx("button", { className: styles.copyBtn, onClick: () => {
+                                                                            setMcpConnectionToken(generatedTokenValue);
+                                                                            setMcpConnectionResult(null);
+                                                                        }, children: "Use Generated Token" })), _jsxs("button", { className: styles.copyBtn, onClick: () => void handleTestMcpConnection(), disabled: mcpConnectionBusy, children: [mcpConnectionBusy ? _jsx(Loader2, { size: 14, className: styles.spinIcon }) : _jsx(Zap, { size: 14 }), "Test Connection"] })] }), mcpConnectionResult && (_jsxs("div", { className: `${mcpConnectionResult.type === 'success' ? styles.successMessage : styles.errorMessage} ${styles.marginTop12}`, children: [mcpConnectionResult.type === 'success' ? _jsx(Check, { size: 14 }) : _jsx(AlertTriangle, { size: 14 }), _jsxs("div", { children: [_jsx("div", { children: mcpConnectionResult.message }), mcpConnectionResult.type === 'success' && (mcpConnectionResult.workspaceName || mcpConnectionResult.workspaceId) && (_jsxs("div", { className: styles.settingHelper, children: ["Workspace: ", mcpConnectionResult.workspaceName || mcpConnectionResult.workspaceId, mcpConnectionResult.workspaceId ? ` (${mcpConnectionResult.workspaceId})` : ''] })), mcpConnectionResult.type === 'success' && Array.isArray(mcpConnectionResult.scopes) && mcpConnectionResult.scopes.length > 0 && (_jsxs("div", { className: styles.settingHelper, children: ["Granted scopes: ", mcpConnectionResult.scopes.join(', ')] }))] })] }))] }))] }), _jsxs("div", { className: `${styles.settingGroup} ${styles.marginTop16}`, children: [_jsxs("div", { className: styles.toggleHeading, onClick: () => setShowMcpTokensList((prev) => !prev), onKeyDown: (e) => {
+                                                            if (e.key === 'Enter' || e.key === ' ') {
+                                                                e.preventDefault();
+                                                                setShowMcpTokensList((prev) => !prev);
+                                                            }
+                                                        }, role: "button", tabIndex: 0, title: showMcpTokensList ? 'Hide workspace tokens' : 'Show workspace tokens', children: [_jsx("label", { className: styles.label, children: "Your Tokens" }), showMcpTokensList ? _jsx(ChevronDown, { size: 14 }) : _jsx(ChevronRight, { size: 14 })] }), showMcpTokensList && (_jsxs(_Fragment, { children: [_jsx("div", { className: `${styles.settingDescription} ${styles.marginTop12}`, children: "Manage tokens created for this workspace." }), mcpTokensLoading ? (_jsx("p", { className: styles.settingHelper, children: "Loading tokens\u2026" })) : mcpTokensError ? (_jsxs("div", { className: styles.errorMessage, children: [_jsx(AlertTriangle, { size: 14 }), mcpTokensError] })) : mcpTokens.length === 0 ? (_jsx("p", { className: styles.settingHelper, children: "No MCP tokens yet." })) : (_jsx("div", { className: styles.settingGroup, children: sortedMcpTokens.map((token) => (_jsxs("div", { className: `${styles.settingsItem} ${styles.marginTop12}`, style: {
+                                                                        padding: '14px 16px',
+                                                                        borderRadius: '12px',
+                                                                        border: '1px solid var(--border-primary, rgba(255, 255, 255, 0.1))',
+                                                                        background: 'rgba(255, 255, 255, 0.03)'
+                                                                    }, children: [_jsxs("div", { className: styles.settingLabelGroup, children: [_jsxs("div", { className: styles.labelGroupFlex, children: [_jsx("label", { className: styles.settingLabel, children: token.name }), _jsx("span", { className: `${styles.configBadge} ${token.status === 'revoked' ? styles.configBadgeRevoked : token.status === 'expired' ? styles.configBadgeExpired : styles.configBadgeActive}`, children: token.status })] }), _jsx("span", { className: styles.settingDescription, style: { fontFamily: '"JetBrains Mono", "Fira Code", monospace' }, children: token.tokenPrefix }), _jsxs("span", { className: styles.settingDescription, children: ["Scopes: ", token.scopes.join(', ')] }), _jsxs("span", { className: styles.settingDescription, children: ["Created ", new Date(token.createdAt).toLocaleDateString(), token.lastUsedAt ? ` · Last used ${new Date(token.lastUsedAt).toLocaleString()}` : ' · Never used'] })] }), _jsxs("div", { style: { display: 'flex', gap: '8px', flexWrap: 'wrap', justifyContent: 'flex-end' }, children: [token.status !== 'revoked' && (_jsx("button", { className: styles.copyBtn, onClick: () => void handleMcpTokenAction(token.id, 'regenerate'), disabled: mcpActionBusyId === `regenerate:${token.id}`, children: "Regenerate" })), token.status === 'active' && (_jsx("button", { className: styles.copyBtn, onClick: () => void handleMcpTokenAction(token.id, 'revoke'), disabled: mcpActionBusyId === `revoke:${token.id}`, children: "Revoke" }))] })] }, token.id))) }))] }))] })] })) })), showLocalMcp && (_jsxs(_Fragment, { children: [_jsx("div", { className: `${styles.settingGroup} ${styles.marginTop16}`, children: _jsxs("div", { className: styles.settingLabelGroup, children: [_jsx("h3", { className: styles.settingTitle, children: "Local MCP" }), _jsx("span", { className: styles.settingDescription, children: "Local MCP runs over stdio and does not require a cloud token. Use this for Codex, Claude Code CLI, Gemini CLI, and similar local MCP clients." })] }) }), _jsxs("div", { className: `${styles.codeBlockWrapper} ${styles.codeBlockWrapperCustom}`, children: [_jsxs("div", { className: styles.codeHeader, children: [_jsx("span", { className: styles.codeLabel, children: "Local MCP Configuration" }), _jsx("div", { className: styles.codeHeaderActions, children: _jsx("button", { className: `${styles.copyBtn} ${copiedConfig === 'full' ? styles.copyBtnActive : ''}`, onClick: () => handleCopyConfig('full'), title: "Copy full configuration file", children: copiedConfig === 'full' ? _jsx(Check, { size: 14 }) : _jsx(Copy, { size: 14 }) }) })] }), _jsx("pre", { className: styles.codeBlock, children: _jsx("code", { children: (() => {
+                                                            const { serverId, serverConfig } = buildMcpServerConfig();
+                                                            return renderMcpConfigBlock(serverId, serverConfig);
+                                                        })() }) })] }), _jsx("div", { className: `${styles.settingGroup} ${styles.marginTop12}`, children: _jsxs("div", { className: styles.toggleHeading, onClick: () => setShowAdvancedMcp((prev) => !prev), onKeyDown: (e) => {
+                                                    if (e.key === 'Enter' || e.key === ' ') {
+                                                        e.preventDefault();
+                                                        setShowAdvancedMcp((prev) => !prev);
+                                                    }
+                                                }, role: "button", tabIndex: 0, title: "Show advanced MCP install options", children: [_jsx("label", { className: styles.label, children: "Advanced" }), showAdvancedMcp ? _jsx(ChevronDown, { size: 14 }) : _jsx(ChevronRight, { size: 14 })] }) }), showAdvancedMcp && (_jsxs("div", { className: `${styles.settingGroup} ${styles.marginTop12}`, children: [_jsxs("div", { className: styles.settingLabelGroup, children: [_jsx("h3", { className: styles.settingTitle, children: "Advanced Installation Mode" }), _jsx("span", { className: styles.settingDescription, children: "Global mode is recommended. Local / npx is intended for Taskforce development workflows." })] }), _jsxs("div", { className: styles.buttonGrid, children: [_jsx("button", { className: `${styles.themeBtn} ${useGlobalMcp ? styles.activeTheme : ''}`, onClick: () => setUseGlobalMcp(true), children: "Global" }), _jsx("button", { className: `${styles.themeBtn} ${!useGlobalMcp ? styles.activeTheme : ''}`, onClick: () => setUseGlobalMcp(false), children: "Local / npx (Dev)" })] }), _jsxs("div", { className: `${styles.settingsItem} ${styles.marginTop16}`, children: [_jsxs("div", { className: styles.settingLabelGroup, children: [_jsxs("div", { className: styles.labelGroupFlex, children: [_jsx("label", { className: styles.settingLabel, children: "MCP Path Mapping (Host Root)" }), serverHostRoot && !mcpHostRoot && (_jsx("span", { className: styles.configBadge, children: "Server Configured" }))] }), _jsx("span", { className: styles.settingDescription, children: "If running in Docker, WSL, or Remote Dev, provide the absolute path to this project as seen by your host OS." })] }), _jsx("div", { className: styles.pathInputWrapper, children: _jsx("input", { type: "text", className: styles.settingInput, placeholder: serverHostRoot || "/Users/username/Projects/my-project or C:\\Projects\\my-project", value: mcpHostRoot || '', onChange: (e) => onMcpHostRootChange?.(e.target.value) }) })] })] }))] }))] })), activeTab === 'integrations' && (_jsxs("div", { className: styles.settingsGroup, children: [_jsx("div", { className: styles.settingGroup, children: _jsxs("div", { className: styles.settingLabelGroup, children: [_jsx("h3", { className: styles.settingTitle, children: "Integrations" }), _jsx("span", { className: styles.settingDescription, children: "Manage OAuth-based app connectors separately from MCP tokens and local client setup." })] }) }), _jsxs("div", { className: `${styles.settingGroup} ${styles.marginTop16}`, children: [[
+                                            {
+                                                key: 'chatgpt',
+                                                label: 'ChatGPT Connector',
+                                                description: 'Use the dedicated MCP host in ChatGPT Apps & Connectors. Taskforce handles OAuth and binds each connector authorization to one workspace.',
+                                                emptyMessage: 'No active ChatGPT connector grant for this workspace yet.',
+                                                connector: activeChatGptConnector
+                                            },
+                                            {
+                                                key: 'claude',
+                                                label: 'Claude Desktop Connector',
+                                                description: 'Use the dedicated MCP host in Claude Desktop Settings > Connectors. Taskforce handles OAuth and binds each connector authorization to one workspace.',
+                                                emptyMessage: 'No active Claude Desktop connector grant for this workspace yet.',
+                                                connector: activeClaudeConnector
+                                            }
+                                        ].map((item) => {
+                                            const connector = item.connector;
+                                            return (_jsxs("div", { className: `${styles.settingsItem} ${styles.marginTop12}`, style: {
+                                                    padding: '16px',
+                                                    borderRadius: '14px',
+                                                    border: '1px solid var(--border-primary, rgba(255, 255, 255, 0.1))',
+                                                    background: 'rgba(255, 255, 255, 0.03)'
+                                                }, children: [_jsxs("div", { className: styles.settingLabelGroup, children: [_jsxs("div", { className: styles.labelGroupFlex, children: [_jsx("label", { className: styles.settingLabel, children: item.label }), _jsx("span", { className: `${styles.configBadge} ${connector ? styles.configBadgeActive : styles.configBadgeRevoked}`, children: connector ? 'connected' : 'not connected' })] }), _jsx("span", { className: styles.settingDescription, children: item.description }), _jsx("span", { className: styles.settingDescription, style: { fontFamily: '"JetBrains Mono", "Fira Code", monospace' }, children: cloudMcpEndpoint }), connector ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: styles.settingDescription, children: ["Authorized workspace: ", currentWorkspaceName || connector.workspaceId] }), _jsxs("span", { className: styles.settingDescription, children: ["Granted scopes: ", connector.scopes.join(', ')] }), _jsxs("span", { className: styles.settingDescription, children: ["Connected ", new Date(connector.createdAt).toLocaleString(), connector.lastUsedAt ? ` · Last used ${new Date(connector.lastUsedAt).toLocaleString()}` : ' · Never used'] })] })) : (_jsx("span", { className: styles.settingDescription, children: item.emptyMessage }))] }), _jsx("div", { style: { display: 'flex', justifyContent: 'flex-end', gap: '8px', flexWrap: 'wrap' }, children: connector && (_jsxs("button", { className: styles.copyBtn, onClick: () => void handleDisconnectConnector(connector.id), disabled: mcpConnectorBusyId === connector.id, children: [mcpConnectorBusyId === connector.id ? _jsx(Loader2, { size: 14, className: styles.spinIcon }) : _jsx(Trash2, { size: 14 }), "Disconnect"] })) })] }, item.key));
+                                        }), mcpConnectorsLoading && (_jsx("p", { className: `${styles.settingHelper} ${styles.marginTop12}`, children: "Loading connector grants\u2026" })), mcpConnectorsError && (_jsxs("div", { className: `${styles.errorMessage} ${styles.marginTop12}`, children: [_jsx(AlertTriangle, { size: 14 }), mcpConnectorsError] }))] })] }))] })] }) }));
 }