@taskforcehq/taskforce 0.3.169 → 0.3.300

package/dist/components/views/StandaloneLayout.js

@@ -1,117 +1,197 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useMemo, useCallback, useState, useEffect, useRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useMemo, useCallback, useState, useEffect, useRef, useLayoutEffect, Suspense } from 'react';
 import { createPortal } from 'react-dom';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { Settings, Plus, Search, Filter, Layers, User, Maximize2, Minimize2, Check, X, Ban, ChevronLeft, ChevronRight, ArrowUp, ArrowDown, ArrowUpDown, AlertTriangle, Save, Loader2, Folder, FileText, Trash2, LogOut, Cloud, CloudOff, RefreshCw, Users, ChevronsUp, ChevronsDown, EyeOff, Zap, HelpCircle, CalendarDays, PanelRightClose, PanelRightOpen } from 'lucide-react';
-import { STATUS_OPTIONS } from '../../utils/constants';
-import { MultiSelectFilter } from '../ui/MultiSelectFilter';
+import { Settings, Plus, Filter, Layers, User, Maximize2, Minimize2, Check, ChevronLeft, ArrowUp, ArrowDown, ArrowUpDown, AlertTriangle, Save, Loader2, Folder, FileText, LogOut, NotebookTabs, ClipboardCheck, Cloud, CloudOff, RefreshCw, Users, Copy, ChevronsUp, ChevronsDown, EyeOff, Zap, HelpCircle, Bot, Image, Workflow } from 'lucide-react';
+import { STATUS_OPTIONS, getStatusDefinition } from '../../utils/constants';
 import styles from '../../Taskforce.module.css';
+import shellStyles from './WorkspaceShell.module.css';
+import accountStyles from './StandaloneAccount.module.css';
+import authStyles from './AuthShell.module.css';
+import folderBrowserStyles from './FolderBrowser.module.css';
+import managementStyles from './StandaloneManagement.module.css';
+import syncStatusStyles from './SyncStatusModal.module.css';
 import modalStyles from '../ui/Modal.module.css';
 import { Modal } from '../ui/Modal';
 import { TaskForm } from '../task/TaskForm';
-import { TaskSettings } from '../features/TaskSettings';
-import { DocumentWorkspace } from '../features/DocumentWorkspace';
 import { TaskKanban } from '../task/TaskKanban';
 import { TaskActionHeader } from '../task/TaskActionHeader';
+import { TopNoticeLayer } from '../ui/TopNoticeLayer';
 import { TypeMeta } from '../../utils/constants';
-import { buildHierarchyDepthMap, collectSubtreeTaskIds } from '../../utils/taskHierarchy';
+import { resolveDraftDefaultsForGrouping } from '../../utils/taskDraftDefaults';
 import { formatDate } from '../../utils/formatting';
+import { resolveHeaderWorkspaceSyncPresentation } from '../../utils/workspaceSyncPresentation';
+import { getTaskReferenceLabel, parseTaskReference } from '../../utils/taskReferences';
+import { formatInitiativeReference, formatWorkstreamReference, parseWorkstreamReference, resolveInitiativeReference } from '../../utils/planningReferences';
+import { DEFAULT_TYPE_VALUE } from '../../shared/taxonomyDefaults.js';
+import { getImageReferenceLabel } from '../../utils/imageReferences';
+import { buildCustomTaxonomySortOptions } from '../../utils/taxonomySorting.js';
 import { getLocale, t } from '../../localization';
-import logo from '../../assets/branding/logos/logo_white_01.png';
-import favicon from '../../assets/favicon/favicon.png';
-import taskforceBg from '../../assets/images/taskforce.png';
-const SCHEDULE_DAY_KEYS = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];
-const SCHEDULE_DAY_LABELS = {
-    mon: 'Mon',
-    tue: 'Tue',
-    wed: 'Wed',
-    thu: 'Thu',
-    fri: 'Fri',
-    sat: 'Sat',
-    sun: 'Sun'
-};
-const SYNCING_DISPLAY_DELAY_MS = 220;
-const SYNCING_MIN_VISIBLE_MS = 1200;
-const ERROR_MIN_VISIBLE_MS = 1800;
-function toDateOnlyLocal(date) {
-    const y = date.getFullYear();
-    const m = String(date.getMonth() + 1).padStart(2, '0');
-    const d = String(date.getDate()).padStart(2, '0');
-    return `${y}-${m}-${d}`;
+import { resolveAnnotatedAttachmentDetail } from '../../utils/annotatedAttachments';
+import { AppShellHeader } from './AppShellHeader';
+import { getTaskforceCloudEnvironmentConfig, parseTaskforceCloudEnvironment, resolveTaskforceCloudEnvironmentFromBaseUrl } from '../../config/cloudEnvironment';
+import { FilterToolbar } from './panels/FilterToolbar';
+import { DocumentFilterToolbar } from './panels/DocumentFilterToolbar';
+import { PlanningDrawer, getPlanningDrawerWidthPx, } from './panels/PlanningDrawer';
+import { getWorkspaceChromeDefinition, getWorkspaceModuleDefinitions, resolveWorkspaceModule, } from './chrome/workspaceChrome';
+import { EmptyWorkspaceFilterBar, WorkspaceHeaderActions, WorkspaceHeaderDivider, WorkspaceHeaderSearch, WorkspaceHeaderSelect, WorkspacePrimaryAction, } from './chrome/WorkspaceChromeSections';
+import { ScheduleSidebar, SCHEDULE_SIDEBAR_WIDTH_PX } from './panels/ScheduleSidebar';
+import { DOCUMENT_ATTACHMENT_FILTER_OPTIONS, DOCUMENT_TYPE_FILTER_OPTIONS, } from '../features/documentWorkspaceFilters';
+import { canManageTeamWorkspace as computeCanManageTeamWorkspace, canOpenTeamManagement as computeCanOpenTeamManagement, resolveTeamPlanModeFromEntitlements } from './teamManagementAccess';
+import { toDateOnlyLocal, parseDateOnlyLocal, startOfWeek, getDayOffsetFromWeekStart, addDays, dateOnlyToIsoWeekKey, SCHEDULE_DAY_KEYS, SCHEDULE_DAY_LABELS, } from './panels/scheduleUtils';
+import { AGENTS_WORKSPACE_FEATURE_KEY, ANNOTATED_ATTACHMENTS_WORKSPACE_FEATURE_KEY, DOCUMENT_WORKSPACE_FEATURE_KEY, INITIATIVES_WORKSPACE_FEATURE_KEY, WORKFLOWS_WORKSPACE_FEATURE_KEY, resolveFeatureAccess, } from '../../runtime/appGates';
+// Heavy feature modules — lazy-loaded to reduce the initial app chunk size.
+const TaskSettings = React.lazy(() => import('../features/TaskSettings').then(m => ({ default: m.TaskSettings })));
+const AnnotatedAttachmentWorkspaceShell = React.lazy(() => import('../features/AnnotatedAttachmentWorkspace').then(m => ({ default: m.AnnotatedAttachmentWorkspaceShell })));
+const DocumentWorkspaceShell = React.lazy(() => import('../features/DocumentWorkspace').then(m => ({ default: m.DocumentWorkspaceShell })));
+const WorkflowsModule = React.lazy(() => import('../features/WorkflowsModule').then(m => ({ default: m.WorkflowsModule })));
+const AgentsModule = React.lazy(() => import('../features/AgentsModule').then(m => ({ default: m.AgentsModule })));
+const InitiativesModule = React.lazy(() => import('../features/InitiativesModule').then(m => ({ default: m.InitiativesModule })));
+const PlansPage = React.lazy(() => import('./PlansPage').then(m => ({ default: m.PlansPage })));
+function getSyncEventStableKey(event, index = 0) {
+    const explicitId = String(event.id ?? '').trim();
+    if (explicitId)
+        return `id:${explicitId}`;
+    return [
+        String(event.occurredAt || '').trim() || 'unknown-time',
+        String(event.eventType || '').trim() || 'sync',
+        String(event.status || '').trim() || 'unknown-status',
+        String(event.statusCode ?? ''),
+        String(event.changeCount ?? ''),
+        String(event.requestMs ?? ''),
+        String(event.errorMessage || '').trim(),
+        JSON.stringify(event.details || null),
+        String(index)
+    ].join('|');
 }
-function parseDateOnlyLocal(dateOnly) {
-    const match = dateOnly.match(/^(\d{4})-(\d{2})-(\d{2})$/);
-    if (!match)
-        return null;
-    const parsed = new Date(Number(match[1]), Number(match[2]) - 1, Number(match[3]));
-    if (Number.isNaN(parsed.getTime()))
-        return null;
-    return parsed;
+function mergeRecentSyncEvents(previous, incoming, limit = 15) {
+    const merged = new Map();
+    for (const [index, event] of previous.entries()) {
+        merged.set(getSyncEventStableKey(event, index), event);
+    }
+    for (const [index, event] of incoming.entries()) {
+        merged.set(getSyncEventStableKey(event, index), event);
+    }
+    return Array.from(merged.values())
+        .sort((left, right) => String(right.occurredAt || '').localeCompare(String(left.occurredAt || '')))
+        .slice(0, Math.max(1, limit));
 }
-function startOfWeek(date, weekStartsOn) {
-    const day = date.getDay();
-    const delta = weekStartsOn === 'sunday'
-        ? -day
-        : (day === 0 ? -6 : 1 - day);
-    const result = new Date(date);
-    result.setHours(0, 0, 0, 0);
-    result.setDate(result.getDate() + delta);
-    return result;
+function areSyncEventListsEqual(left, right) {
+    if (left.length !== right.length)
+        return false;
+    for (let index = 0; index < left.length; index += 1) {
+        if (getSyncEventStableKey(left[index], index) !== getSyncEventStableKey(right[index], index)) {
+            return false;
+        }
+    }
+    return true;
 }
-function getDayOffsetFromWeekStart(dayKey, weekStartsOn) {
-    if (weekStartsOn === 'sunday') {
-        const sundayFirst = {
-            sun: 0,
-            mon: 1,
-            tue: 2,
-            wed: 3,
-            thu: 4,
-            fri: 5,
-            sat: 6
-        };
-        return sundayFirst[dayKey];
+function getActiveReferenceMismatchCount(events) {
+    let count = 0;
+    for (const event of events) {
+        const message = String(event.errorMessage || '').toLowerCase();
+        if (message.includes('reference number mismatch')) {
+            count += 1;
+            continue;
+        }
+        if (String(event.status || '').toLowerCase() === 'success') {
+            break;
+        }
     }
-    const mondayFirst = {
-        mon: 0,
-        tue: 1,
-        wed: 2,
-        thu: 3,
-        fri: 4,
-        sat: 5,
-        sun: 6
-    };
-    return mondayFirst[dayKey];
+    return count;
 }
-function addDays(base, days) {
-    const next = new Date(base);
-    next.setDate(base.getDate() + days);
-    return next;
+function getActiveReferenceMismatchEvents(events) {
+    const mismatches = [];
+    for (const event of events) {
+        const message = String(event.errorMessage || '').toLowerCase();
+        if (message.includes('reference number mismatch')) {
+            mismatches.push(event);
+            continue;
+        }
+        if (String(event.status || '').toLowerCase() === 'success') {
+            break;
+        }
+    }
+    return mismatches;
 }
-function dateOnlyToIsoWeekKey(dateOnly) {
-    const match = dateOnly.match(/^(\d{4})-(\d{2})-(\d{2})$/);
-    if (!match)
-        return null;
-    const dt = new Date(Date.UTC(Number(match[1]), Number(match[2]) - 1, Number(match[3])));
-    const day = dt.getUTCDay() || 7;
-    dt.setUTCDate(dt.getUTCDate() + 4 - day);
-    const yearStart = new Date(Date.UTC(dt.getUTCFullYear(), 0, 1));
-    const week = Math.ceil((((dt.getTime() - yearStart.getTime()) / 86400000) + 1) / 7);
-    return `${dt.getUTCFullYear()}-W${String(week).padStart(2, '0')}`;
+function resolveConnectedEnvironmentLabel(explicitEnvironment, candidates) {
+    const parsedExplicitEnvironment = parseTaskforceCloudEnvironment(explicitEnvironment);
+    if (parsedExplicitEnvironment) {
+        return getTaskforceCloudEnvironmentConfig(parsedExplicitEnvironment).label.toUpperCase();
+    }
+    for (const candidate of candidates) {
+        const source = String(candidate || '').trim();
+        if (!source)
+            continue;
+        const parsedEnvironment = resolveTaskforceCloudEnvironmentFromBaseUrl(source);
+        if (parsedEnvironment) {
+            return getTaskforceCloudEnvironmentConfig(parsedEnvironment).label.toUpperCase();
+        }
+        let hostname = source.toLowerCase();
+        try {
+            hostname = new URL(source.includes('://') ? source : `https://${source}`).hostname.toLowerCase();
+        }
+        catch {
+            hostname = source.toLowerCase();
+        }
+        if (hostname.includes('localhost') || hostname.includes('127.0.0.1') || hostname.includes('::1')) {
+            continue;
+        }
+        return hostname.toUpperCase();
+    }
+    return 'UNKNOWN';
+}
+function isDebugModeEnabled() {
+    const runtimeOverride = globalThis.__DEBUG_MODE__;
+    if (typeof runtimeOverride === 'boolean')
+        return runtimeOverride;
+    return typeof __DEBUG_MODE__ !== 'undefined' && __DEBUG_MODE__;
 }
 export function StandaloneLayout(props) {
+    const WORKSPACE_TOOL_RAIL_WIDTH = 56;
+    const WORKSPACE_CONTENT_GUTTER = 6;
     const navigate = useNavigate();
     const location = useLocation();
+    const routeQuery = useMemo(() => new URLSearchParams(location.search), [location.search]);
+    const isPlansScreen = String(routeQuery.get('screen') || '').trim().toLowerCase() === 'plans';
+    const openPlansScreen = useCallback((extraParams) => {
+        const params = new URLSearchParams(location.search);
+        params.set('screen', 'plans');
+        for (const [key, value] of Object.entries(extraParams || {})) {
+            if (value === null || value === undefined || String(value).trim() === '') {
+                params.delete(key);
+            }
+            else {
+                params.set(key, String(value));
+            }
+        }
+        navigate(`/?${params.toString()}${location.hash || ''}`);
+    }, [location.hash, location.search, navigate]);
+    const closePlansScreen = useCallback(() => {
+        const params = new URLSearchParams(location.search);
+        params.delete('screen');
+        params.delete('gate');
+        params.delete('checkout');
+        params.delete('planId');
+        params.delete('planVersionId');
+        params.delete('interval');
+        const nextQuery = params.toString();
+        navigate(`${location.pathname === '/' ? '/' : location.pathname}${nextQuery ? `?${nextQuery}` : ''}${location.hash || ''}`);
+    }, [location.hash, location.pathname, location.search, navigate]);
+    const handlePlansBack = useCallback(() => {
+        closePlansScreen();
+    }, [closePlansScreen]);
     const { 
     // State
-    activeTab, setActiveTab, activeCategories, groupBy, setGroupBy, emptyColumnMode, setEmptyColumnMode, zenMode, setZenMode, filterStatus, setFilterStatus, parentTaskFilterMode, setParentTaskFilterMode, 
+    activeTab, setActiveTab, activeCategories, groupBy, setGroupBy, activeWorkspaceModule, setActiveWorkspaceModule, emptyColumnMode, setEmptyColumnMode, zenMode, setZenMode, filterStatus, setFilterStatus, 
     // Data & Actions
     tasks, handleEdit, handleSubmit, resetForm, handleUpdateTask, 
     // Form State (destructure all needed for TaskForm)
-    editingTaskId, loading, error, title, setTitle, description, setDescription, category, setCategory, type, setType, priority, setPriority, complexity, setComplexity, approach, setApproach, assignee, setAssignee, scheduledDate, setScheduledDate, dueDate, setDueDate, parentTaskIdInput, setParentTaskIdInput, addChildTaskIdInput, setAddChildTaskIdInput, manualComplexityEnabled, checklistDropdownEnabled, formTaxonomies, setFormTaxonomies, selectedSpecialists, setSelectedSpecialists, comments, newCommentText, setNewCommentText, screenshots, setScreenshots, descriptionFocused, setDescriptionFocused, showMarkdownHelp, setShowMarkdownHelp, showSpecialists, setShowSpecialists, showChecklist, setShowChecklist, showTaskRelationships, setShowTaskRelationships, showChildTasks, setShowChildTasks, showComments, setShowComments, 
+    editingTaskId, loading, error, title, setTitle, description, setDescription, checklistItems, setChecklistItems, category, setCategory, type, setType, priority, setPriority, complexity, setComplexity, setStatus, approach, setApproach, assignee, setAssignee, scheduledDate, setScheduledDate, dueDate, setDueDate, workstreamInput, setWorkstreamInput, manualComplexityEnabled, checklistDropdownEnabled, showTaskCardStatusLabel, formTaxonomies, setFormTaxonomies, comments, newCommentText, setNewCommentText, attachments, setAttachments, setAttachmentsDirty, descriptionFocused, setDescriptionFocused, showMarkdownHelp, setShowMarkdownHelp, showChecklist, setShowChecklist, showComments, setShowComments, 
     // Form Actions
-    handleAddComment, handleSetParentForCurrentTask, handleAddChildToCurrentTask, handleCreateChildForCurrentTask, handleUnlinkChildTask, handleReorderChildTasks, handleClearParentTask, handleOpenTaskById, 
+    handleAddComment, handleSetWorkstreamForCurrentTask, handleOpenTaskById, 
     // Other Props for Form
-    taxonomies, activeTypes, priorities, approaches, availableSpecialists, copiedId, handleCopyId, handleToggleInProgress, handleToggleComplete, handleToggleReview, handleToggleCancel, handleArchiveTask, handleDelete, handleUnarchive, fetchTasks, searchQuery, setSearchQuery, filterCategories, setFilterCategories, filterTypes, setFilterTypes, filterPriorities, setFilterPriorities, filterAssignees, setFilterAssignees, 
+    taxonomies, activeTypes, priorities, taxonomyDisplayLabels, approaches, copiedId, handleCopyId, handleToggleInProgress, handleToggleComplete, handleToggleReview, handleToggleCancel, handleArchiveTask, handleDelete, handleUnarchive, handleRestoreDeletedTask, handlePermanentlyDeleteDeletedTask, handleEmptyDeletedTasks, fetchTasks, searchQuery, setSearchQuery, filterCategories, setFilterCategories, filterTypes, setFilterTypes, filterPriorities, setFilterPriorities, filterAssignees, setFilterAssignees, assigneeOptions, taskScope, setTaskScope, 
     // filterStatus, setFilterStatus, // This was duplicated, removed one instance
     sortBy, setSortBy, clearFilters, // setSearchQuery, // This was duplicated, removed one instance
     // filterCategories, setFilterCategories, // This was duplicated, removed one instance
@@ -122,21 +202,19 @@ export function StandaloneLayout(props) {
     // clearFilters, // This was duplicated, removed one instance
     // activeTypes, // This was duplicated, removed one instance
     // Settings State & Props
-    settingsModel, currentTheme, setCurrentTheme, pathSaved, saveSettings, keyShortcut, setKeyShortcut, globalWeekStartsOn, locale, jsonBackupEnabled, setJsonBackupEnabled, assigneeFilterEnabled, mcpHostRoot, setMcpHostRoot, settingsSection, setSettingsSection, runtimeMode, workspaceSwitchingEnabled, cloudAuthConfigured, authRequiredForApi, authBlocked, isAuthenticated, authUserEmail, authSessionResolved, realtimeSyncEnabled, realtimeSyncFlagSource, workspaceCloudSyncEnabled, realtimeConnectionState, realtimeTelemetry, workspaceSyncSourceOfTruth, workspaceSyncOnboardingCompleted, workspaceSyncReady, workspaceCloudHydrated, saveWorkspaceCloudSyncSettings, userGlobalSyncStatus, userGlobalLastSyncedAt, workspaceLastPullAt, workspaceLastPushAt, workspaceLastErrorAt, workspaceRetryAt, workspaceBootstrapSyncInProgress, workspaceBootstrapSyncPages, workspaceBootstrapSyncAppliedChanges, userGlobalSyncPendingChanges, userGlobalSyncError, workspaceLastErrorMessage, workspaceLastWarningMessage, workspaceSyncFailureCount, workspaceSyncRetryScheduledCount, workspaceSyncAuthFailureCount, workspaceSyncLastFailureSource, workspaceSyncLastFailureStatusCode, retryWorkspaceCloudSync, resetWorkspaceSyncCursorAndPull, currentWorkspaceId, availableWorkspaces, createWorkspace, switchWorkspace, logout, projectRoot, projectName, mcpScriptPath, serverHostRoot, 
+    settingsModel, configLoaded, currentTheme, setCurrentTheme, pathSaved, saveSettings, keyShortcut, setKeyShortcut, globalWeekStartsOn, locale, jsonBackupEnabled, setJsonBackupEnabled, mcpHostRoot, setMcpHostRoot, settingsSection, setSettingsSection, runtimeMode, workspaceSwitchingEnabled, cloudAuthConfigured, authRequiredForApi, authBlocked, isAuthenticated, authWorkspaceId, authUserEmail, authUserDisplayName, authSessionResolved, realtimeSyncEnabled, realtimeSyncFlagSource, workspaceCloudSyncEnabled, workspaceSyncPhase, workspaceSyncStatus, workspaceSyncSummary, workspaceSyncRecommendedAction, workspaceSyncBusy, workspaceSyncPendingChanges, saveWorkspaceCloudSyncSettings, pushNotice, userGlobalSyncStatus, workspaceLastSuccessfulSyncAt, workspaceLastPullAt, workspaceLastPushAt, workspaceLastErrorAt, userGlobalSyncError, workspaceLastErrorMessage, retryWorkspaceCloudSync, resetWorkspaceSyncCursorAndPull, getWorkspaceSyncDiagnostics, currentWorkspaceId, currentWorkspaceRole, availableWorkspaces, switchWorkspace, updateCurrentUserProfile, logout, projectRoot, projectName, mcpScriptPath, serverHostRoot, 
     // Browser Props
-    showFolderBrowser, setShowFolderBrowser, folders, files, currentBrowsePath, fetchFolders, browserTarget, setBrowserTarget, contextLinkBrowsePath, handleSelectPath, handleAddPath, handleRemovePath, 
+    showFolderBrowser, setShowFolderBrowser, folders, files, currentBrowsePath, fetchFolders, browserTarget, setBrowserTarget, handleSelectPath, handleAddPath, handleRemovePath, 
     // Settings Managers
-    handleUpdateCategory, handleRemoveCategory, handleSaveCategory, handleUpdateCategoryIcon, handleUpdateCategoryColor, handleSaveType, handleRemoveType, handleUpdateTaxonomies, handleUpdatePriorities, handleUpdateApproaches, pathValidation, 
+    handleUpdateCategory, handleRemoveCategory, handleSaveCategory, handleUpdateCategoryIcon, handleUpdateCategoryColor, handleSaveType, handleRemoveType, handleUpdateTaxonomies, handleUpdatePriorities, pathValidation, 
     // Exports
-    exportEnvironment, setExportEnvironment, exportWorkflowsPath, setExportWorkflowsPath, exportSpecialistsPath, setExportSpecialistsPath, exportResult, handleExportResources, exportingResource, availableWorkflows, onExportWorkflows, fetchWorkflows, availableEnvironments, 
+    exportEnvironment, setExportEnvironment, exportWorkflowsPath, setExportWorkflowsPath, exportResult, exportingResource, availableWorkflows, onExportWorkflows, fetchWorkflows, availableEnvironments, initiativeTemplates, fetchInitiativeTemplates, createInitiativeFromTemplate, 
     // Misc
-    successBanner, returnToParentTaskId, returnFromChildTaskId, clearReturnToParentTask, tasksScrollRef, setTasksScrollPos, 
+    uiNotice, clearNotice, taskReturnTrail, clearReturnToParentTask, returnToPreviousTask, tasksScrollRef, setTasksScrollPos, 
     // Refs
     commentsEndRef, 
     // Modals - Unsaved Changes
-    unsavedModalOpen, setUnsavedModalOpen, pendingNavigation, handleNavigation, currentTask, currentTaskParent, currentTaskChildren, 
-    // Modals - Cancellation
-    cancellationPromptTask, cancellationOpenDescendantIds, cancellationMode, setCancellationMode, confirmCancellation, cancelCancellationPrompt, scheduleWarningPrompt, confirmScheduleWarning, cancelScheduleWarning } = props;
+    autoSaveState, unsavedModalOpen, setUnsavedModalOpen, pendingNavigation, handleNavigation, currentTask, currentTaskWorkstream, currentTaskInitiative, scheduleWarningPrompt, confirmScheduleWarning, cancelScheduleWarning } = props;
     const resolvedLocale = locale || getLocale();
     useEffect(() => {
         const normalizedProject = String(projectName || '').trim();
@@ -171,11 +249,6 @@ export function StandaloneLayout(props) {
     const [scheduleShowBacklog, setScheduleShowBacklog] = useState(true);
     const [scheduleOnlyExpired, setScheduleOnlyExpired] = useState(false);
     const [scheduleSidebarOpen, setScheduleSidebarOpen] = useState(true);
-    const [hierarchySidebarOpen, setHierarchySidebarOpen] = useState(true);
-    const [hierarchyRootTaskId, setHierarchyRootTaskId] = useState('');
-    const [hierarchyShowUnlinkedColumn, setHierarchyShowUnlinkedColumn] = useState(true);
-    const [hierarchyChildOrderMode, setHierarchyChildOrderMode] = useState('manual');
-    const [hierarchyRootSearch, setHierarchyRootSearch] = useState('');
     const [scheduleSelectedDate, setScheduleSelectedDate] = useState(toDateOnlyLocal(new Date()));
     const [scheduleCalendarMonth, setScheduleCalendarMonth] = useState(() => {
         const now = new Date();
@@ -183,10 +256,35 @@ export function StandaloneLayout(props) {
     });
     const [scheduleScrollLeft, setScheduleScrollLeft] = useState(0);
     const [showFilters, setShowFilters] = useState(false);
+    const [taskModalFullscreen, setTaskModalFullscreen] = useState(false);
+    const [planningDrawerOpen, setPlanningDrawerOpen] = useState(false);
+    const [planningTreeCollapsed, setPlanningTreeCollapsed] = useState(false);
+    const [planningPrimaryCollapsed, setPlanningPrimaryCollapsed] = useState(false);
+    const [planningSecondaryCollapsed, setPlanningSecondaryCollapsed] = useState(false);
+    const [selectedPlanningInitiativeId, setSelectedPlanningInitiativeId] = useState('');
+    const [selectedPlanningWorkstreamId, setSelectedPlanningWorkstreamId] = useState('');
+    const [expandedPlanningInitiativeIds, setExpandedPlanningInitiativeIds] = useState(new Set());
+    const [planningDrawerDetail, setPlanningDrawerDetail] = useState(null);
+    const [planningNestedWorkstreamDetailId, setPlanningNestedWorkstreamDetailId] = useState(null);
+    const [planningEditor, setPlanningEditor] = useState(null);
+    const [planningSecondaryEditor, setPlanningSecondaryEditor] = useState(null);
+    const [planningDraftTitle, setPlanningDraftTitle] = useState('');
+    const [planningDraftDescription, setPlanningDraftDescription] = useState('');
+    const [planningDraftOwner, setPlanningDraftOwner] = useState('');
+    const [planningDraftInitiativeId, setPlanningDraftInitiativeId] = useState('');
+    const [documentTypeFilters, setDocumentTypeFilters] = useState(() => DOCUMENT_TYPE_FILTER_OPTIONS.map((option) => option.value));
+    const [documentAttachmentFilters, setDocumentAttachmentFilters] = useState(() => DOCUMENT_ATTACHMENT_FILTER_OPTIONS.map((option) => option.value));
     const [requestedDocPath, setRequestedDocPath] = useState(null);
+    const [requestedDocAssetId, setRequestedDocAssetId] = useState(null);
+    const [requestedAnnotatedTarget, setRequestedAnnotatedTarget] = useState(null);
+    const [requestedAnnotatedSessionId, setRequestedAnnotatedSessionId] = useState(null);
+    const [requestedAnnotatedOpenVersion, setRequestedAnnotatedOpenVersion] = useState(0);
+    const [canonicalAnnotatedImageReferenceLabels, setCanonicalAnnotatedImageReferenceLabels] = useState({});
     const [layoutStateReady, setLayoutStateReady] = useState(false);
-    const lastNonDocsGroupByRef = useRef('category');
     const loadedLayoutStateWorkspaceRef = useRef('');
+    const requestedAnnotatedTargetRef = useRef(null);
+    const requestedAnnotatedSessionIdRef = useRef(null);
+    const annotatedImageReferenceFetchesRef = useRef(new Set());
     const workspaceUiStateHeaders = useMemo(() => {
         const headers = {};
         const workspaceIdHeader = String(currentWorkspaceId || '').trim();
@@ -196,23 +294,93 @@ export function StandaloneLayout(props) {
         return headers;
     }, [runtimeMode, currentWorkspaceId]);
     const layoutStateWorkspaceKey = useMemo(() => `${runtimeMode}:${String(currentWorkspaceId || 'default').trim() || 'default'}`, [runtimeMode, currentWorkspaceId]);
+    const annotatedLayoutCacheKey = useMemo(() => `taskforce:annotate-layout:${layoutStateWorkspaceKey}`, [layoutStateWorkspaceKey]);
+    const annotatedWorkspaceReady = useMemo(() => (runtimeMode === 'cloud' ? authSessionResolved : configLoaded), [authSessionResolved, configLoaded, runtimeMode]);
+    useEffect(() => {
+        requestedAnnotatedTargetRef.current = requestedAnnotatedTarget;
+    }, [requestedAnnotatedTarget]);
+    useEffect(() => {
+        requestedAnnotatedSessionIdRef.current = requestedAnnotatedSessionId;
+    }, [requestedAnnotatedSessionId]);
+    const workspaceFeatureAccess = useMemo(() => ({
+        [DOCUMENT_WORKSPACE_FEATURE_KEY]: resolveFeatureAccess({
+            featureKey: DOCUMENT_WORKSPACE_FEATURE_KEY,
+            runtimeMode,
+        }),
+        [ANNOTATED_ATTACHMENTS_WORKSPACE_FEATURE_KEY]: resolveFeatureAccess({
+            featureKey: ANNOTATED_ATTACHMENTS_WORKSPACE_FEATURE_KEY,
+            runtimeMode,
+        }),
+        [WORKFLOWS_WORKSPACE_FEATURE_KEY]: resolveFeatureAccess({
+            featureKey: WORKFLOWS_WORKSPACE_FEATURE_KEY,
+            runtimeMode,
+        }),
+        [AGENTS_WORKSPACE_FEATURE_KEY]: resolveFeatureAccess({
+            featureKey: AGENTS_WORKSPACE_FEATURE_KEY,
+            runtimeMode,
+        }),
+        [INITIATIVES_WORKSPACE_FEATURE_KEY]: resolveFeatureAccess({
+            featureKey: INITIATIVES_WORKSPACE_FEATURE_KEY,
+            runtimeMode,
+        }),
+    }), [runtimeMode]);
+    const workspaceModules = useMemo(() => getWorkspaceModuleDefinitions({ featureAccess: workspaceFeatureAccess }), [workspaceFeatureAccess]);
+    const resolvedWorkspaceModule = useMemo(() => resolveWorkspaceModule(activeWorkspaceModule, workspaceModules), [activeWorkspaceModule, workspaceModules]);
+    const documentsWorkspaceEnabled = workspaceFeatureAccess[DOCUMENT_WORKSPACE_FEATURE_KEY]?.allowed ?? false;
+    const annotatedAttachmentsWorkspaceEnabled = workspaceFeatureAccess[ANNOTATED_ATTACHMENTS_WORKSPACE_FEATURE_KEY]?.allowed ?? false;
+    const documentsWorkspaceUnavailableMessage = 'Documents is not available in this build yet.';
+    const annotatedAttachmentsWorkspaceUnavailableMessage = 'Annotate is not available in this build yet.';
     useEffect(() => {
         const handleOpenMarkdownDocument = (event) => {
             const customEvent = event;
             const fsPath = customEvent.detail?.fsPath;
-            if (!fsPath)
+            const assetId = String(customEvent.detail?.assetId || '').trim() || null;
+            if (!fsPath && !assetId)
                 return;
             customEvent.preventDefault();
-            setRequestedDocPath(fsPath);
-            if (groupBy !== 'docs') {
-                setGroupBy('docs');
+            if (!documentsWorkspaceEnabled) {
+                pushNotice(documentsWorkspaceUnavailableMessage, 'error');
+                return;
             }
+            setRequestedDocPath(fsPath || null);
+            setRequestedDocAssetId(assetId);
+            setActiveWorkspaceModule('docs');
         };
         window.addEventListener('taskforce:open-markdown-document', handleOpenMarkdownDocument);
         return () => {
             window.removeEventListener('taskforce:open-markdown-document', handleOpenMarkdownDocument);
         };
-    }, [groupBy, setGroupBy]);
+    }, [documentsWorkspaceEnabled, documentsWorkspaceUnavailableMessage, pushNotice, setActiveWorkspaceModule]);
+    useEffect(() => {
+        if (resolvedWorkspaceModule !== activeWorkspaceModule) {
+            setActiveWorkspaceModule(resolvedWorkspaceModule);
+        }
+    }, [activeWorkspaceModule, resolvedWorkspaceModule, setActiveWorkspaceModule]);
+    useEffect(() => {
+        if (resolvedWorkspaceModule === 'docs' && documentsWorkspaceEnabled)
+            return;
+        setRequestedDocPath(null);
+        setRequestedDocAssetId(null);
+    }, [documentsWorkspaceEnabled, resolvedWorkspaceModule]);
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        try {
+            const cachedRaw = window.sessionStorage.getItem(annotatedLayoutCacheKey);
+            if (!cachedRaw)
+                return;
+            const cached = JSON.parse(cachedRaw);
+            if (cached?.annotatedTarget && typeof cached.annotatedTarget === 'object') {
+                setRequestedAnnotatedTarget(cached.annotatedTarget);
+            }
+            if (typeof cached?.annotatedSessionId === 'string') {
+                setRequestedAnnotatedSessionId(cached.annotatedSessionId.trim() || null);
+            }
+        }
+        catch {
+            // ignore cache read failure
+        }
+    }, [annotatedLayoutCacheKey]);
     useEffect(() => {
         if (loadedLayoutStateWorkspaceRef.current === layoutStateWorkspaceKey)
             return;
@@ -242,15 +410,6 @@ export function StandaloneLayout(props) {
                     setScheduleOnlyExpired(state.scheduleOnlyExpired);
                 if (typeof state.scheduleSidebarOpen === 'boolean')
                     setScheduleSidebarOpen(state.scheduleSidebarOpen);
-                if (typeof state.hierarchySidebarOpen === 'boolean')
-                    setHierarchySidebarOpen(state.hierarchySidebarOpen);
-                if (typeof state.hierarchyRootTaskId === 'string')
-                    setHierarchyRootTaskId(state.hierarchyRootTaskId);
-                if (typeof state.hierarchyShowUnlinkedColumn === 'boolean')
-                    setHierarchyShowUnlinkedColumn(state.hierarchyShowUnlinkedColumn);
-                if (state.hierarchyChildOrderMode === 'manual' || state.hierarchyChildOrderMode === 'auto') {
-                    setHierarchyChildOrderMode(state.hierarchyChildOrderMode);
-                }
                 if (typeof state.scheduleSelectedDate === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(state.scheduleSelectedDate)) {
                     setScheduleSelectedDate(state.scheduleSelectedDate);
                 }
@@ -262,6 +421,47 @@ export function StandaloneLayout(props) {
                 }
                 if (typeof state.showFilters === 'boolean')
                     setShowFilters(state.showFilters);
+                if (Array.isArray(state.documentTypeFilters)) {
+                    setDocumentTypeFilters(state.documentTypeFilters);
+                }
+                if (Array.isArray(state.documentAttachmentFilters)) {
+                    setDocumentAttachmentFilters(state.documentAttachmentFilters);
+                }
+                if (typeof state.planningDrawerOpen === 'boolean') {
+                    setPlanningDrawerOpen(state.planningDrawerOpen);
+                }
+                if (Array.isArray(state.planningExpandedInitiativeIds)) {
+                    setExpandedPlanningInitiativeIds(new Set(state.planningExpandedInitiativeIds
+                        .map((value) => String(value || '').trim())
+                        .filter(Boolean)));
+                }
+                if (state.planningDrawerDetail
+                    && typeof state.planningDrawerDetail === 'object'
+                    && (state.planningDrawerDetail.type === 'initiative' || state.planningDrawerDetail.type === 'workstream')
+                    && typeof state.planningDrawerDetail.id === 'string') {
+                    const detailId = state.planningDrawerDetail.id.trim();
+                    setPlanningDrawerDetail(detailId ? { type: state.planningDrawerDetail.type, id: detailId } : null);
+                }
+                else if (state.planningDrawerDetail === null) {
+                    setPlanningDrawerDetail(null);
+                }
+                if (typeof state.planningNestedWorkstreamDetailId === 'string') {
+                    setPlanningNestedWorkstreamDetailId(state.planningNestedWorkstreamDetailId.trim() || null);
+                }
+                else if (state.planningNestedWorkstreamDetailId === null) {
+                    setPlanningNestedWorkstreamDetailId(null);
+                }
+                const annotatedTarget = state.annotatedTarget;
+                if (annotatedTarget && typeof annotatedTarget === 'object') {
+                    if (!requestedAnnotatedTargetRef.current) {
+                        setRequestedAnnotatedTarget(annotatedTarget);
+                    }
+                }
+                if (typeof state.annotatedSessionId === 'string') {
+                    if (!requestedAnnotatedSessionIdRef.current) {
+                        setRequestedAnnotatedSessionId(state.annotatedSessionId.trim() || null);
+                    }
+                }
             }
             catch {
                 // ignore read failure
@@ -292,14 +492,18 @@ export function StandaloneLayout(props) {
                             scheduleShowBacklog,
                             scheduleOnlyExpired,
                             scheduleSidebarOpen,
-                            hierarchySidebarOpen,
-                            hierarchyRootTaskId,
-                            hierarchyShowUnlinkedColumn,
-                            hierarchyChildOrderMode,
                             scheduleSelectedDate,
                             scheduleCalendarMonth,
                             scheduleScrollLeft,
-                            showFilters
+                            showFilters,
+                            documentTypeFilters,
+                            documentAttachmentFilters,
+                            planningDrawerOpen,
+                            planningExpandedInitiativeIds: Array.from(expandedPlanningInitiativeIds),
+                            planningDrawerDetail,
+                            planningNestedWorkstreamDetailId,
+                            annotatedTarget: requestedAnnotatedTarget,
+                            annotatedSessionId: requestedAnnotatedSessionId
                         }
                     })
                 });
@@ -315,137 +519,469 @@ export function StandaloneLayout(props) {
         scheduleShowBacklog,
         scheduleOnlyExpired,
         scheduleSidebarOpen,
-        hierarchySidebarOpen,
-        hierarchyRootTaskId,
-        hierarchyShowUnlinkedColumn,
-        hierarchyChildOrderMode,
         scheduleSelectedDate,
         scheduleCalendarMonth,
         scheduleScrollLeft,
         showFilters,
+        documentTypeFilters,
+        documentAttachmentFilters,
+        planningDrawerOpen,
+        expandedPlanningInitiativeIds,
+        planningDrawerDetail,
+        planningNestedWorkstreamDetailId,
+        requestedAnnotatedTarget,
+        requestedAnnotatedSessionId,
         workspaceUiStateHeaders
     ]);
     useEffect(() => {
-        if (groupBy !== 'docs') {
-            lastNonDocsGroupByRef.current = groupBy;
+        if (typeof window === 'undefined')
+            return;
+        try {
+            window.sessionStorage.setItem(annotatedLayoutCacheKey, JSON.stringify({
+                annotatedTarget: requestedAnnotatedTarget,
+                annotatedSessionId: requestedAnnotatedSessionId,
+            }));
         }
-    }, [groupBy]);
+        catch {
+            // ignore cache write failure
+        }
+    }, [annotatedLayoutCacheKey, requestedAnnotatedSessionId, requestedAnnotatedTarget]);
     useEffect(() => {
         if (groupBy === 'schedule') {
             setScheduleSidebarOpen(true);
         }
-        if (groupBy === 'hierarchy') {
-            setHierarchySidebarOpen(true);
-        }
     }, [groupBy]);
     const { showArchive, setShowArchive, fetchArchive, filteredArchive } = props;
+    const archivedScopeTasks = useMemo(() => filteredArchive.map((task) => ({ ...task, isArchived: true })), [filteredArchive]);
+    const archivedScopeAllTasks = useMemo(() => props.archivedTasks.map((task) => ({ ...task, isArchived: true })), [props.archivedTasks]);
+    const annotatedAttachmentTasks = useMemo(() => [...props.searchAgnosticTasks, ...archivedScopeAllTasks], [archivedScopeAllTasks, props.searchAgnosticTasks]);
+    const resolveAnnotatedTaskReferenceLabel = useCallback((taskId) => {
+        const normalizedTaskId = String(taskId || '').trim();
+        if (!normalizedTaskId)
+            return '';
+        const matchedTask = annotatedAttachmentTasks.find((task) => task.id === normalizedTaskId);
+        return getTaskReferenceLabel(matchedTask) || '';
+    }, [annotatedAttachmentTasks]);
+    const resolveAnnotatedImageReferenceLabel = useCallback((assetId) => {
+        const normalizedAssetId = String(assetId || '').trim();
+        if (!normalizedAssetId)
+            return '';
+        const canonicalReferenceLabel = String(canonicalAnnotatedImageReferenceLabels[normalizedAssetId] || '').trim();
+        if (canonicalReferenceLabel)
+            return canonicalReferenceLabel;
+        for (const task of annotatedAttachmentTasks) {
+            for (const attachment of task.attachments || []) {
+                if (!attachment || typeof attachment !== 'object')
+                    continue;
+                if (String(attachment.assetId || '').trim() !== normalizedAssetId)
+                    continue;
+                const referenceLabel = getImageReferenceLabel({
+                    referenceNumber: typeof attachment.referenceNumber === 'number' ? attachment.referenceNumber : null,
+                    referenceLabel: String(attachment.referenceLabel || '').trim() || null,
+                });
+                if (referenceLabel)
+                    return referenceLabel;
+            }
+        }
+        return '';
+    }, [annotatedAttachmentTasks, canonicalAnnotatedImageReferenceLabels]);
+    useEffect(() => {
+        const handleOpenAnnotatedAttachment = (event) => {
+            const customEvent = event;
+            const detail = resolveAnnotatedAttachmentDetail(customEvent.detail, annotatedAttachmentTasks);
+            if (!detail)
+                return;
+            customEvent.preventDefault();
+            if (!annotatedAttachmentsWorkspaceEnabled) {
+                pushNotice(annotatedAttachmentsWorkspaceUnavailableMessage, 'error');
+                return;
+            }
+            setRequestedAnnotatedTarget(detail);
+            setRequestedAnnotatedSessionId(null);
+            setRequestedAnnotatedOpenVersion((current) => current + 1);
+            setActiveWorkspaceModule('annotate');
+        };
+        window.addEventListener('taskforce:open-annotated-attachment', handleOpenAnnotatedAttachment);
+        return () => {
+            window.removeEventListener('taskforce:open-annotated-attachment', handleOpenAnnotatedAttachment);
+        };
+    }, [
+        annotatedAttachmentTasks,
+        annotatedAttachmentsWorkspaceEnabled,
+        annotatedAttachmentsWorkspaceUnavailableMessage,
+        pushNotice,
+        setActiveWorkspaceModule
+    ]);
+    useEffect(() => {
+        if (!requestedAnnotatedTarget)
+            return;
+        const resolvedTarget = resolveAnnotatedAttachmentDetail(requestedAnnotatedTarget, annotatedAttachmentTasks);
+        if (!resolvedTarget)
+            return;
+        if (resolvedTarget.taskReferenceLabel === requestedAnnotatedTarget.taskReferenceLabel
+            && resolvedTarget.imageReferenceLabel === requestedAnnotatedTarget.imageReferenceLabel)
+            return;
+        setRequestedAnnotatedTarget(resolvedTarget);
+    }, [annotatedAttachmentTasks, requestedAnnotatedTarget]);
+    useEffect(() => {
+        const activeTarget = requestedAnnotatedTargetRef.current;
+        const normalizedAssetId = String(activeTarget?.assetId || '').trim();
+        if (!normalizedAssetId)
+            return;
+        const canonicalReferenceLabel = String(canonicalAnnotatedImageReferenceLabels[normalizedAssetId] || '').trim();
+        if (!canonicalReferenceLabel)
+            return;
+        if (canonicalReferenceLabel === String(activeTarget?.imageReferenceLabel || '').trim())
+            return;
+        setRequestedAnnotatedTarget((current) => {
+            if (!current || String(current.assetId || '').trim() !== normalizedAssetId)
+                return current;
+            return {
+                ...current,
+                imageReferenceLabel: canonicalReferenceLabel,
+            };
+        });
+    }, [canonicalAnnotatedImageReferenceLabels, requestedAnnotatedTarget]);
+    useEffect(() => {
+        if (!annotatedWorkspaceReady)
+            return;
+        const activeTarget = requestedAnnotatedTarget;
+        const normalizedAssetId = String(activeTarget?.assetId || '').trim();
+        if (!normalizedAssetId)
+            return;
+        if (annotatedImageReferenceFetchesRef.current.has(normalizedAssetId))
+            return;
+        if (String(canonicalAnnotatedImageReferenceLabels[normalizedAssetId] || '').trim())
+            return;
+        let cancelled = false;
+        annotatedImageReferenceFetchesRef.current.add(normalizedAssetId);
+        const workspaceIdQuery = String(currentWorkspaceId || 'default').trim() || 'default';
+        const query = new URLSearchParams({ workspaceId: workspaceIdQuery });
+        const loadCanonicalImageReferenceLabel = async () => {
+            try {
+                const response = await fetch(`/api/taskforce/annotated-attachments/images/${encodeURIComponent(normalizedAssetId)}?${query.toString()}`, {
+                    method: 'GET',
+                    credentials: 'include',
+                    headers: workspaceUiStateHeaders,
+                });
+                if (!response.ok)
+                    return;
+                const data = await response.json().catch(() => ({}));
+                const canonicalReferenceLabel = String(data?.target?.imageReferenceLabel || '').trim();
+                if (!canonicalReferenceLabel || cancelled)
+                    return;
+                setCanonicalAnnotatedImageReferenceLabels((current) => {
+                    if (current[normalizedAssetId] === canonicalReferenceLabel)
+                        return current;
+                    return {
+                        ...current,
+                        [normalizedAssetId]: canonicalReferenceLabel,
+                    };
+                });
+            }
+            catch {
+                // Ignore canonical image reference refresh failures and keep the current hint.
+            }
+            finally {
+                annotatedImageReferenceFetchesRef.current.delete(normalizedAssetId);
+            }
+        };
+        void loadCanonicalImageReferenceLabel();
+        return () => {
+            cancelled = true;
+        };
+    }, [annotatedWorkspaceReady, canonicalAnnotatedImageReferenceLabels, currentWorkspaceId, requestedAnnotatedTarget, workspaceUiStateHeaders]);
+    const deletedScopeAllTasks = useMemo(() => props.deletedTasks.map((entry) => ({
+        ...entry.taskSnapshot,
+        isDeleted: true,
+        deletedRecordId: entry.id
+    })), [props.deletedTasks]);
+    const deletedTaskRecordByTaskId = useMemo(() => {
+        const map = new Map();
+        props.deletedTasks.forEach((entry) => {
+            map.set(entry.taskSnapshot.id, entry);
+        });
+        return map;
+    }, [props.deletedTasks]);
+    const filteredDeletedTasks = useMemo(() => {
+        const deletedTasks = deletedScopeAllTasks;
+        const searchNeedle = searchQuery.trim().toLowerCase();
+        const allCategoriesSelected = activeCategories.every((taskCategory) => filterCategories.includes(taskCategory.value));
+        const allTypesSelected = activeTypes.every((taskType) => filterTypes.includes(taskType.value));
+        const selectedPriorities = new Set(filterPriorities.map((value) => String(value)));
+        const allPrioritiesSelected = priorities.every((priorityOption) => selectedPriorities.has(String(priorityOption.value)));
+        const selectedStatuses = new Set(filterStatus.map((value) => String(value)));
+        const allStatusesSelected = STATUS_OPTIONS.every((statusOption) => selectedStatuses.has(String(statusOption.value)));
+        return deletedTasks.filter((task) => {
+            const referenceLabel = (getTaskReferenceLabel(task) || task.id).toLowerCase();
+            const matchesSearch = !searchNeedle
+                || task.title.toLowerCase().includes(searchNeedle)
+                || String(task.description || '').toLowerCase().includes(searchNeedle)
+                || task.id.toLowerCase().includes(searchNeedle)
+                || referenceLabel.includes(searchNeedle);
+            const matchesCategory = allCategoriesSelected || filterCategories.includes(task.category);
+            const matchesType = allTypesSelected || filterTypes.includes(task.type || DEFAULT_TYPE_VALUE);
+            const matchesPriority = allPrioritiesSelected || selectedPriorities.has(String(task.priority));
+            const matchesStatus = allStatusesSelected || selectedStatuses.has(String(task.status));
+            const matchesAssignee = filterAssignees.length === 0 || filterAssignees.includes((task.assignee || 'unassigned'));
+            return matchesSearch && matchesCategory && matchesType && matchesPriority && matchesStatus && matchesAssignee;
+        });
+    }, [
+        activeCategories,
+        activeTypes,
+        deletedScopeAllTasks,
+        filterAssignees,
+        filterCategories,
+        filterPriorities,
+        filterStatus,
+        filterTypes,
+        priorities,
+        searchQuery
+    ]);
+    const taskFilterRecords = useMemo(() => [...props.tasks, ...archivedScopeAllTasks, ...deletedScopeAllTasks], [archivedScopeAllTasks, deletedScopeAllTasks, props.tasks]);
+    const categoryFilterOptions = useMemo(() => {
+        const visibleCategories = activeCategories
+            .filter((category) => !category.disabled)
+            .map((category) => ({ value: category.value, label: category.label }));
+        const legacyCategoriesInUse = activeCategories
+            .filter((category) => category.disabled && taskFilterRecords.some((task) => task.category === category.value))
+            .map((category) => ({ value: category.value, label: `${category.label} (Legacy)` }));
+        return [...visibleCategories, ...legacyCategoriesInUse];
+    }, [activeCategories, taskFilterRecords]);
+    const typeFilterOptions = useMemo(() => {
+        const activeTypeOptions = activeTypes
+            .filter((type) => type.status !== 'retired')
+            .map((type) => ({ value: type.value, label: type.label }));
+        const retiredTypesInUse = activeTypes
+            .filter((type) => type.status === 'retired' && taskFilterRecords.some((task) => (task.type || DEFAULT_TYPE_VALUE) === type.value))
+            .map((type) => ({ value: type.value, label: `${type.label} (Retired)` }));
+        return [...activeTypeOptions, ...retiredTypesInUse];
+    }, [activeTypes, taskFilterRecords]);
     const kanbanTasks = useMemo(() => {
+        if (taskScope === 'archived')
+            return archivedScopeTasks;
+        if (taskScope === 'deleted')
+            return filteredDeletedTasks;
         if (!showArchive)
             return props.filteredTasks;
-        const archivedWithFlag = filteredArchive.map(t => ({ ...t, isArchived: true }));
-        return [...props.filteredTasks, ...archivedWithFlag];
-    }, [props.filteredTasks, filteredArchive, showArchive]);
-    const scheduleBaseTasks = useMemo(() => props.tasks.filter(task => !task.isArchived), [props.tasks]);
-    const scheduleFilteredTaskIds = useMemo(() => new Set(props.filteredTasks.map(task => task.id)), [props.filteredTasks]);
+        return [...props.filteredTasks, ...archivedScopeTasks];
+    }, [archivedScopeTasks, filteredDeletedTasks, props.filteredTasks, showArchive, taskScope]);
+    const scheduleBaseTasks = useMemo(() => taskScope === 'open'
+        ? props.tasks.filter(task => !task.isArchived)
+        : kanbanTasks, [kanbanTasks, props.tasks, taskScope]);
+    const scheduleFilteredTaskIds = useMemo(() => new Set(kanbanTasks.map(task => task.id)), [kanbanTasks]);
     const kanbanAllTasks = useMemo(() => {
+        if (taskScope === 'archived')
+            return archivedScopeAllTasks;
+        if (taskScope === 'deleted')
+            return deletedScopeAllTasks;
         if (!showArchive)
             return props.searchAgnosticTasks;
-        return [...props.searchAgnosticTasks, ...filteredArchive];
-    }, [props.searchAgnosticTasks, filteredArchive, showArchive]);
+        return [...props.searchAgnosticTasks, ...archivedScopeAllTasks];
+    }, [archivedScopeAllTasks, deletedScopeAllTasks, props.searchAgnosticTasks, showArchive, taskScope]);
     const hierarchyTasks = useMemo(() => {
         const byId = new Map();
-        for (const task of props.archivedTasks)
+        for (const task of archivedScopeAllTasks)
+            byId.set(task.id, task);
+        for (const task of deletedScopeAllTasks)
             byId.set(task.id, task);
         for (const task of props.tasks)
             byId.set(task.id, task);
         return Array.from(byId.values());
-    }, [props.tasks, props.archivedTasks]);
-    const hierarchyParentIdSet = useMemo(() => {
-        const set = new Set();
-        for (const task of hierarchyTasks) {
-            if (task.parentTaskId)
-                set.add(task.parentTaskId);
-        }
-        return set;
-    }, [hierarchyTasks]);
+    }, [archivedScopeAllTasks, deletedScopeAllTasks, props.tasks]);
     const hierarchyTaskById = useMemo(() => {
         const map = new Map();
         hierarchyTasks.forEach((task) => map.set(task.id, task));
         return map;
     }, [hierarchyTasks]);
-    const hierarchyChildrenByParent = useMemo(() => {
+    const assigneeLabelByValue = useMemo(() => {
         const map = new Map();
-        hierarchyTasks.forEach((task) => {
-            if (!task.parentTaskId)
-                return;
-            const list = map.get(task.parentTaskId) || [];
-            list.push(task);
-            map.set(task.parentTaskId, list);
+        assigneeOptions.forEach((option) => {
+            map.set(String(option.value), option.label);
         });
         return map;
-    }, [hierarchyTasks]);
-    const hierarchySearchMatches = useMemo(() => {
-        const needle = hierarchyRootSearch.trim().toLowerCase();
-        if (!needle)
-            return [];
-        const rankForTask = (task) => {
-            const id = task.id.toLowerCase();
-            const shortId = (task.id.split('-').slice(-1)[0] || task.id).toLowerCase();
-            const title = task.title.toLowerCase();
-            if (id === needle)
-                return 0;
-            if (shortId === needle)
-                return 1;
-            if (id.startsWith(needle) || shortId.startsWith(needle))
-                return 2;
-            if (title.startsWith(needle))
-                return 3;
-            if (title.includes(needle))
-                return 4;
-            if (id.includes(needle) || shortId.includes(needle))
-                return 5;
-            return null;
+    }, [assigneeOptions]);
+    const planningStructure = useMemo(() => {
+        const planningInitiatives = taskScope === 'deleted'
+            ? []
+            : props.initiatives.filter((initiative) => taskScope === 'archived'
+                ? Boolean(initiative.isArchived)
+                : !initiative.isArchived);
+        const planningWorkstreams = taskScope === 'deleted'
+            ? []
+            : props.workstreams.filter((workstream) => taskScope === 'archived'
+                ? Boolean(workstream.isArchived)
+                : !workstream.isArchived);
+        const summarizeTasks = (scopeTasks) => {
+            const taskCount = scopeTasks.length;
+            const completedTaskCount = scopeTasks.filter((task) => task.isArchived || task.status === 'done' || task.status === 'cancelled').length;
+            return {
+                progressPercent: taskCount > 0 ? Math.round((completedTaskCount / taskCount) * 100) : 0,
+                taskCount,
+                completedTaskCount,
+            };
         };
-        return hierarchyTasks
-            .map((task) => ({ task, rank: rankForTask(task) }))
-            .filter((entry) => entry.rank !== null)
-            .sort((a, b) => {
-            if (a.rank !== b.rank)
-                return a.rank - b.rank;
-            return a.task.title.localeCompare(b.task.title);
-        })
-            .map((entry) => entry.task);
-    }, [hierarchyTasks, hierarchyRootSearch]);
-    const hierarchyDescendantIdSet = useMemo(() => {
-        if (!hierarchyRootTaskId)
+        const workstreamTaskIds = new Map();
+        const workstreamInitiativeIds = new Map();
+        const initiativeTaskIds = new Map();
+        const workstreamById = new Map();
+        const initiativeById = new Map();
+        const buildWorkstreamSummary = (workstream) => {
+            const scopedTasks = hierarchyTasks.filter((task) => (task.workstreamId || null) === workstream.id);
+            const taskPreviews = scopedTasks.map((task) => ({
+                id: task.id,
+                referenceNumber: task.referenceNumber ?? null,
+                title: task.title,
+                status: task.status || null,
+            }));
+            const summary = {
+                id: workstream.id,
+                referenceNumber: workstream.referenceNumber ?? null,
+                title: workstream.title,
+                description: String(workstream.description || '').trim() || undefined,
+                ownerLabel: workstream.ownerId ? assigneeLabelByValue.get(String(workstream.ownerId)) || String(workstream.ownerId) : null,
+                ...summarizeTasks(scopedTasks),
+                initiativeId: workstream.initiativeId || null,
+                commentCount: Array.isArray(workstream.comments) ? workstream.comments.length : 0,
+                attachmentCount: Array.isArray(workstream.attachments) ? workstream.attachments.length : 0,
+                isArchived: Boolean(workstream.isArchived),
+                tasks: taskPreviews,
+            };
+            workstreamTaskIds.set(workstream.id, scopedTasks.map((task) => task.id));
+            if (workstream.initiativeId)
+                workstreamInitiativeIds.set(workstream.id, workstream.initiativeId);
+            workstreamById.set(summary.id, summary);
+            return summary;
+        };
+        const initiatives = planningInitiatives.map((initiative) => {
+            const workstreams = planningWorkstreams
+                .filter((workstream) => (workstream.initiativeId || null) === initiative.id)
+                .map(buildWorkstreamSummary);
+            const initiativeScopedTasks = workstreams
+                .flatMap((workstream) => workstreamTaskIds.get(workstream.id) || [])
+                .map((taskId) => hierarchyTaskById.get(taskId))
+                .filter((task) => Boolean(task));
+            const initiativeSummary = {
+                id: initiative.id,
+                referenceNumber: initiative.referenceNumber ?? null,
+                title: initiative.title,
+                description: String(initiative.description || '').trim() || undefined,
+                ownerLabel: initiative.ownerId ? assigneeLabelByValue.get(String(initiative.ownerId)) || String(initiative.ownerId) : null,
+                ...summarizeTasks(initiativeScopedTasks),
+                workstreamCount: workstreams.length,
+                workstreams,
+                commentCount: Array.isArray(initiative.comments) ? initiative.comments.length : 0,
+                attachmentCount: Array.isArray(initiative.attachments) ? initiative.attachments.length : 0,
+                isArchived: Boolean(initiative.isArchived),
+            };
+            initiativeTaskIds.set(initiative.id, initiativeScopedTasks.map((task) => task.id));
+            initiativeById.set(initiativeSummary.id, initiativeSummary);
+            return initiativeSummary;
+        });
+        const standaloneWorkstreams = planningWorkstreams
+            .filter((workstream) => !workstream.initiativeId)
+            .map(buildWorkstreamSummary);
+        return {
+            initiatives,
+            standaloneWorkstreams,
+            workstreamTaskIds,
+            workstreamInitiativeIds,
+            initiativeTaskIds,
+            workstreamById,
+            initiativeById,
+        };
+    }, [assigneeLabelByValue, hierarchyTaskById, hierarchyTasks, props.initiatives, props.workstreams, taskScope]);
+    const initiativeFilterOptions = useMemo(() => planningStructure.initiatives.map((initiative) => ({ value: initiative.id, label: initiative.title })), [planningStructure.initiatives]);
+    const workstreamFilterOptions = useMemo(() => [
+        ...planningStructure.initiatives.flatMap((initiative) => initiative.workstreams.map((workstream) => ({ value: workstream.id, label: workstream.title }))),
+        ...planningStructure.standaloneWorkstreams.map((workstream) => ({ value: workstream.id, label: workstream.title })),
+    ], [planningStructure.initiatives, planningStructure.standaloneWorkstreams]);
+    const selectedPlanningTaskIds = useMemo(() => {
+        if (selectedPlanningWorkstreamId) {
+            return new Set(planningStructure.workstreamTaskIds.get(selectedPlanningWorkstreamId) || []);
+        }
+        if (selectedPlanningInitiativeId) {
+            return new Set(planningStructure.initiativeTaskIds.get(selectedPlanningInitiativeId) || []);
+        }
+        return null;
+    }, [planningStructure.initiativeTaskIds, planningStructure.workstreamTaskIds, selectedPlanningInitiativeId, selectedPlanningWorkstreamId]);
+    const planningDrawerItem = useMemo(() => {
+        if (!planningDrawerDetail)
             return null;
-        return collectSubtreeTaskIds(hierarchyTasks, hierarchyRootTaskId);
-    }, [hierarchyRootTaskId, hierarchyTasks]);
-    const hierarchyVisibleTasks = useMemo(() => {
-        if (groupBy === 'schedule')
-            return scheduleBaseTasks;
-        if (groupBy !== 'hierarchy')
-            return kanbanTasks;
-        const isUnlinkedTask = (task) => !task.parentTaskId && !hierarchyParentIdSet.has(task.id);
-        let base = kanbanTasks;
-        if (parentTaskFilterMode === 'parents') {
-            base = kanbanTasks.filter(task => hierarchyParentIdSet.has(task.id));
+        if (planningDrawerDetail.type === 'initiative') {
+            const item = planningStructure.initiativeById.get(planningDrawerDetail.id);
+            return item ? { type: 'initiative', item } : null;
+        }
+        const item = planningStructure.workstreamById.get(planningDrawerDetail.id)
+            || planningStructure.standaloneWorkstreams.find((workstream) => workstream.id === planningDrawerDetail.id);
+        return item ? { type: 'workstream', item } : null;
+    }, [planningDrawerDetail, planningStructure.initiativeById, planningStructure.standaloneWorkstreams, planningStructure.workstreamById]);
+    const planningNestedWorkstreamItem = useMemo(() => {
+        if (!planningNestedWorkstreamDetailId)
+            return null;
+        const item = planningStructure.workstreamById.get(planningNestedWorkstreamDetailId)
+            || planningStructure.standaloneWorkstreams.find((workstream) => workstream.id === planningNestedWorkstreamDetailId);
+        return item ? { type: 'workstream', item } : null;
+    }, [planningNestedWorkstreamDetailId, planningStructure.standaloneWorkstreams, planningStructure.workstreamById]);
+    const planningSecondaryPane = useMemo(() => {
+        if (planningSecondaryEditor) {
+            return { kind: 'editor', editor: planningSecondaryEditor };
+        }
+        if (planningNestedWorkstreamItem) {
+            return { kind: 'detail', detail: planningNestedWorkstreamItem };
+        }
+        return null;
+    }, [planningNestedWorkstreamItem, planningSecondaryEditor]);
+    const planningDrawerWidthPx = getPlanningDrawerWidthPx(planningTreeCollapsed, Boolean(planningDrawerItem || planningEditor), planningPrimaryCollapsed, Boolean(planningSecondaryPane), planningSecondaryCollapsed);
+    const planningDraftInitiativeSummary = useMemo(() => {
+        if (!planningDraftInitiativeId.trim())
+            return null;
+        const exactInitiative = planningStructure.initiativeById.get(planningDraftInitiativeId);
+        if (exactInitiative)
+            return exactInitiative;
+        return resolveInitiativeReference(planningStructure.initiatives, planningDraftInitiativeId);
+    }, [planningDraftInitiativeId, planningStructure.initiativeById, planningStructure.initiatives]);
+    useEffect(() => {
+        if (!planningDrawerOpen)
+            return;
+        setPlanningTreeCollapsed(false);
+        setPlanningPrimaryCollapsed(false);
+        setPlanningSecondaryCollapsed(false);
+    }, [planningDrawerOpen]);
+    useEffect(() => {
+        if (selectedPlanningInitiativeId && !planningStructure.initiativeById.has(selectedPlanningInitiativeId)) {
+            setSelectedPlanningInitiativeId('');
         }
-        else if (parentTaskFilterMode === 'linked') {
-            base = kanbanTasks.filter(task => !!task.parentTaskId || hierarchyParentIdSet.has(task.id));
+        if (selectedPlanningWorkstreamId && !planningStructure.workstreamById.has(selectedPlanningWorkstreamId)) {
+            setSelectedPlanningWorkstreamId('');
         }
-        else if (parentTaskFilterMode === 'unlinked') {
-            base = kanbanTasks.filter(task => isUnlinkedTask(task));
+        if (planningDrawerDetail?.type === 'initiative' && !planningStructure.initiativeById.has(planningDrawerDetail.id)) {
+            setPlanningDrawerDetail(null);
         }
-        if (!hierarchyShowUnlinkedColumn && parentTaskFilterMode !== 'unlinked') {
-            base = base.filter((task) => !isUnlinkedTask(task));
+        if (planningDrawerDetail?.type === 'workstream' && !planningStructure.workstreamById.has(planningDrawerDetail.id)) {
+            setPlanningDrawerDetail(null);
         }
-        if (hierarchyDescendantIdSet) {
-            base = base.filter(task => hierarchyDescendantIdSet.has(task.id)
-                || (hierarchyShowUnlinkedColumn && (parentTaskFilterMode === 'all' || parentTaskFilterMode === 'unlinked') && isUnlinkedTask(task)));
+        if (planningNestedWorkstreamDetailId && !planningStructure.workstreamById.has(planningNestedWorkstreamDetailId)) {
+            setPlanningNestedWorkstreamDetailId(null);
         }
-        return base;
-    }, [groupBy, parentTaskFilterMode, kanbanTasks, hierarchyParentIdSet, scheduleBaseTasks, hierarchyDescendantIdSet, hierarchyShowUnlinkedColumn]);
+        if (planningSecondaryEditor?.mode === 'edit'
+            && !planningStructure.workstreamById.has(planningSecondaryEditor.targetId)) {
+            setPlanningSecondaryEditor(null);
+        }
+    }, [
+        planningDrawerDetail,
+        planningNestedWorkstreamDetailId,
+        planningSecondaryEditor,
+        planningStructure.initiativeById,
+        planningStructure.workstreamById,
+        selectedPlanningInitiativeId,
+        selectedPlanningWorkstreamId,
+    ]);
+    const hierarchyVisibleTasks = useMemo(() => {
+        if (groupBy === 'schedule')
+            return scheduleBaseTasks;
+        return kanbanTasks;
+    }, [groupBy, kanbanTasks, scheduleBaseTasks]);
     const todayDateOnly = useMemo(() => {
         const now = new Date();
         const y = now.getFullYear();
@@ -465,6 +1001,11 @@ export function StandaloneLayout(props) {
             return expiredScheduled || overdueDue;
         });
     }, [groupBy, scheduleOnlyExpired, hierarchyVisibleTasks, todayDateOnly]);
+    const scopedBoardVisibleTasks = useMemo(() => {
+        if (!selectedPlanningTaskIds || selectedPlanningTaskIds.size === 0)
+            return boardVisibleTasks;
+        return boardVisibleTasks.filter((task) => selectedPlanningTaskIds.has(task.id));
+    }, [boardVisibleTasks, selectedPlanningTaskIds]);
     const expiredRecoveryCandidates = useMemo(() => {
         if (groupBy !== 'schedule')
             return [];
@@ -507,108 +1048,78 @@ export function StandaloneLayout(props) {
             return !!task.scheduledDate && task.scheduledDate < todayDateOnly;
         });
     }, [groupBy, hierarchyVisibleTasks, todayDateOnly]);
-    const expiredLeafCandidates = useMemo(() => expiredRecoveryCandidates.filter(task => !hierarchyParentIdSet.has(task.id)), [expiredRecoveryCandidates, hierarchyParentIdSet]);
+    const expiredLeafCandidates = expiredRecoveryCandidates;
     const [scheduleBulkBusy, setScheduleBulkBusy] = useState(false);
-    const [scheduleParentDropBusy, setScheduleParentDropBusy] = useState(false);
-    const [scheduleParentDropPrompt, setScheduleParentDropPrompt] = useState(null);
-    const hierarchyDepthTasks = useMemo(() => hierarchyVisibleTasks.filter(task => !!task.parentTaskId || hierarchyParentIdSet.has(task.id)), [hierarchyVisibleTasks, hierarchyParentIdSet]);
-    const hierarchyGlobalDepthMap = useMemo(() => buildHierarchyDepthMap(hierarchyTasks), [hierarchyTasks]);
-    const maxHierarchyDepth = useMemo(() => hierarchyDepthTasks.reduce((maxDepth, task) => {
-        const depth = hierarchyGlobalDepthMap.get(task.id) ?? 0;
-        return depth > maxDepth ? depth : maxDepth;
-    }, 0), [hierarchyDepthTasks, hierarchyGlobalDepthMap]);
-    const tryReturnToParent = () => {
-        if (activeTab === 'add'
-            && editingTaskId
-            && returnToParentTaskId
-            && returnFromChildTaskId === editingTaskId) {
-            const parentTask = tasks.find(t => t.id === returnToParentTaskId);
-            clearReturnToParentTask();
-            if (parentTask) {
-                handleEdit(parentTask);
-                return true;
-            }
-        }
-        return false;
-    };
     const handleCloseModal = () => {
         handleNavigation(() => {
-            if (tryReturnToParent())
+            if (returnToPreviousTask())
                 return;
+            if (activeTab === 'add' && taskReturnTrail.length > 0) {
+                clearReturnToParentTask();
+            }
+            setTaskModalFullscreen(false);
             if (activeTab === 'add')
                 resetForm();
             setActiveTab('tasks');
         });
     };
-    const [localCancellationReason, setLocalCancellationReason] = useState('');
-    const handleConfirmCancellation = async () => {
-        const success = await confirmCancellation(localCancellationReason, cancellationMode);
-        if (success) {
-            setLocalCancellationReason('');
+    useEffect(() => {
+        if (activeTab !== 'add') {
+            setTaskModalFullscreen(false);
         }
-    };
-    const handleCancelCancellation = () => {
-        cancelCancellationPrompt();
-        setLocalCancellationReason('');
-    };
-    const handleDeleteFromCancellation = async () => {
-        if (!cancellationPromptTask)
+    }, [activeTab]);
+    const handleSetStatus = useCallback((task, status) => {
+        if (task.status === status)
             return;
-        const confirmed = window.confirm('Delete this task permanently? This cannot be undone.');
-        if (!confirmed)
+        if (status === 'in-progress') {
+            void handleToggleInProgress(task);
             return;
-        const deleted = await handleDelete(cancellationPromptTask.id, false, { skipConfirm: true });
-        if (deleted) {
-            handleCancelCancellation();
         }
-    };
-    const handleAddTaskToColumn = useCallback((groupField, value) => {
-        resetForm();
-        // Handle different grouping fields
-        if (groupField === 'category') {
-            const cat = activeCategories.find(c => String(c.value) === String(value) || c.label === String(value));
-            if (cat)
-                setCategory(cat.label);
-        }
-        else if (groupField === 'type') {
-            setType(String(value));
-        }
-        else if (groupField === 'priority') {
-            setPriority(Number(value));
-        }
-        else if (groupField === 'approach') {
-            const app = approaches.find(a => String(a.value) === String(value) || a.label === String(value));
-            if (app) {
-                setApproach(app.value);
-                setFormTaxonomies(prev => ({ ...prev, approach: app.value }));
-            }
-        }
-        else if (groupField === 'status') {
-            // When adding to a status column, we just open the form.
-            // But we can preset the status flags if we want, or just let users set them.
-            // Currently, the TaskForm doesn't expose a simple 'status' dropdown to preset.
-            // So for now, we'll just open the form.
-            // Ideally, we would preset the flags (inProgress, readyForReview, etc.)
-            // implementing basic presetting:
-            if (value === 'inProgress') {
-                handleToggleInProgress({}); // Hacky: assumes handleToggle works on new task? No.
-                // Better: we can't easily preset status flags in the current form setup without modifying resetForm/TaskForm props deeply.
-                // For now, simple open.
-                // Actually, let's try to pass initial state if possible, but useTaskforce API is limited.
-                // We'll leave it as default (Task) for now, or users can toggle after adding.
-            }
+        if (status === 'review') {
+            void handleToggleReview(task);
+            return;
         }
-        else if (groupField === 'complexity') {
-            const direct = Number(value);
-            if (Number.isFinite(direct)) {
-                setComplexity(direct);
-            }
+        if (status === 'done') {
+            void handleToggleComplete(task);
+            return;
         }
-        else if (groupField === 'hierarchy') {
-            // Hierarchy columns are depth-based and do not map to form defaults.
+        if (status === 'cancelled') {
+            void handleToggleCancel(task);
+            return;
         }
+        void handleUpdateTask(task.id, {
+            status,
+            completedAt: null
+        });
+    }, [handleToggleInProgress, handleToggleReview, handleToggleComplete, handleToggleCancel, handleUpdateTask]);
+    const handleAddTaskToColumn = useCallback((groupField, value) => {
+        resetForm();
+        const defaults = resolveDraftDefaultsForGrouping(groupField, value, {
+            categories: activeCategories,
+            approaches
+        });
+        if (defaults.category)
+            setCategory(defaults.category);
+        if (defaults.type)
+            setType(defaults.type);
+        if (typeof defaults.priority === 'number')
+            setPriority(defaults.priority);
+        if (typeof defaults.complexity === 'number')
+            setComplexity(defaults.complexity);
+        if (defaults.approach)
+            setApproach(defaults.approach);
+        const taxonomyApproach = defaults.taxonomyApproach;
+        if (typeof taxonomyApproach === 'string' && taxonomyApproach.length > 0) {
+            setFormTaxonomies(prev => ({ ...prev, approach: taxonomyApproach }));
+        }
+        if (defaults.assignee)
+            setAssignee(defaults.assignee);
+        if (defaults.status)
+            setStatus(defaults.status);
+        if (defaults.scheduledDate)
+            setScheduledDate(defaults.scheduledDate);
         setActiveTab('add');
-    }, [resetForm, activeCategories, approaches, setCategory, setType, setPriority, setComplexity, setApproach, setFormTaxonomies, setActiveTab]);
+    }, [resetForm, activeCategories, approaches, setCategory, setType, setPriority, setComplexity, setStatus, setApproach, setAssignee, setScheduledDate, setFormTaxonomies, setActiveTab]);
     // Ensure 'done' status is shown by default as requested
     React.useEffect(() => {
         if (filterStatus && !filterStatus.includes('done')) {
@@ -619,14 +1130,21 @@ export function StandaloneLayout(props) {
     const [showHelpModal, setShowHelpModal] = useState(false);
     const [showAccountMenu, setShowAccountMenu] = useState(false);
     const [showAccountHub, setShowAccountHub] = useState(false);
+    const [showEditProfileModal, setShowEditProfileModal] = useState(false);
     const [showSyncStatusModal, setShowSyncStatusModal] = useState(false);
-    const [workspaceSyncBusy, setWorkspaceSyncBusy] = useState(false);
+    const [workspaceSyncToggleBusy, setWorkspaceSyncToggleBusy] = useState(false);
     const [workspaceSyncError, setWorkspaceSyncError] = useState(null);
-    const [workspacePanelOpen, setWorkspacePanelOpen] = useState(false);
-    const [workspaceFormName, setWorkspaceFormName] = useState('');
-    const [workspaceFormDescription, setWorkspaceFormDescription] = useState('');
+    const [workspaceSyncRepairBusy, setWorkspaceSyncRepairBusy] = useState(false);
+    const [workspaceSyncRepairQueued, setWorkspaceSyncRepairQueued] = useState(false);
+    const [workspaceSyncCopied, setWorkspaceSyncCopied] = useState(false);
+    const [syncRecentEvents, setSyncRecentEvents] = useState([]);
+    const [syncRecentEventsLoading, setSyncRecentEventsLoading] = useState(false);
+    const [syncRecentEventsError, setSyncRecentEventsError] = useState(null);
+    const syncEventsListRef = useRef(null);
+    const pendingSyncEventsScrollRestoreRef = useRef(null);
     const [workspaceActionBusy, setWorkspaceActionBusy] = useState(false);
     const [workspaceActionError, setWorkspaceActionError] = useState('');
+    const [showCreateWorkspaceConfirm, setShowCreateWorkspaceConfirm] = useState(false);
     const [showTeamManagementModal, setShowTeamManagementModal] = useState(false);
     const [teamManagementTab, setTeamManagementTab] = useState('members');
     const [teamPlanMode, setTeamPlanMode] = useState('unknown');
@@ -651,9 +1169,12 @@ export function StandaloneLayout(props) {
     const [billingActionError, setBillingActionError] = useState(null);
     const [billingNotice, setBillingNotice] = useState(null);
     const [billingIntervalChoice, setBillingIntervalChoice] = useState('month');
+    const [profileDisplayNameDraft, setProfileDisplayNameDraft] = useState('');
+    const [profileSaveBusy, setProfileSaveBusy] = useState(false);
+    const [profileSaveError, setProfileSaveError] = useState(null);
+    const [profileSaveNotice, setProfileSaveNotice] = useState(null);
     const TEAM_AUDIT_PAGE_SIZE = 25;
     const accountMenuRef = useRef(null);
-    const billingSuccessPollRef = useRef(null);
     // showSearch state removed - search always visible in actions area
     useEffect(() => {
         if (!showAccountMenu)
@@ -666,45 +1187,119 @@ export function StandaloneLayout(props) {
         document.addEventListener('mousedown', handlePointerDown);
         return () => document.removeEventListener('mousedown', handlePointerDown);
     }, [showAccountMenu]);
-    useEffect(() => () => {
-        if (billingSuccessPollRef.current) {
-            window.clearInterval(billingSuccessPollRef.current);
-            billingSuccessPollRef.current = null;
-        }
-    }, []);
     const canManageCloudWorkspaces = runtimeMode === 'cloud' && workspaceSwitchingEnabled && isAuthenticated;
+    const canAccessCloudTeamManagement = isAuthenticated && (runtimeMode === 'cloud' || cloudAuthConfigured);
     const canManageWorkspaceSync = runtimeMode === 'local' && isAuthenticated;
-    const currentWorkspaceRole = useMemo(() => {
+    const handleWorkspaceSyncToggle = useCallback(async (enabled) => {
+        if (!canManageWorkspaceSync)
+            return;
+        setWorkspaceSyncError(null);
+        setWorkspaceSyncToggleBusy(true);
+        const result = await saveWorkspaceCloudSyncSettings({ enabled });
+        if (!result.success) {
+            setWorkspaceSyncError(result.error || (enabled ? 'Failed to enable sync.' : 'Failed to disable sync.'));
+        }
+        setWorkspaceSyncToggleBusy(false);
+    }, [
+        canManageWorkspaceSync,
+        saveWorkspaceCloudSyncSettings
+    ]);
+    const syncControlBusy = workspaceSyncToggleBusy;
+    const currentWorkspaceLabel = useMemo(() => {
         const current = availableWorkspaces.find((workspace) => workspace.id === currentWorkspaceId);
-        if (!current)
-            return null;
-        const role = String(current.role || '').trim().toLowerCase();
-        if (role === 'owner' || role === 'admin' || role === 'member' || role === 'read-only')
-            return role;
-        return null;
-    }, [availableWorkspaces, currentWorkspaceId]);
-    const canOpenTeamManagement = canManageCloudWorkspaces
-        && (currentWorkspaceRole === 'owner' || currentWorkspaceRole === 'admin')
-        && teamPlanMode === 'team';
-    const authIdentityLabel = String(authUserEmail || '').trim();
+        const namedWorkspace = String(current?.name || '').trim();
+        if (namedWorkspace)
+            return namedWorkspace;
+        if (runtimeMode === 'local') {
+            const localProjectName = String(projectName || '').trim();
+            if (localProjectName)
+                return localProjectName;
+        }
+        const fallbackId = String(currentWorkspaceId || '').trim();
+        return fallbackId || 'Workspace';
+    }, [availableWorkspaces, currentWorkspaceId, projectName, runtimeMode]);
+    const canManageTeamWorkspace = computeCanManageTeamWorkspace(canAccessCloudTeamManagement, currentWorkspaceRole);
+    const canOpenTeamManagement = computeCanOpenTeamManagement(canAccessCloudTeamManagement, currentWorkspaceRole, teamPlanMode);
+    const authDisplayName = String(authUserDisplayName || '').trim();
+    const authEmailLabel = String(authUserEmail || '').trim();
+    const authIdentityLabel = authDisplayName || authEmailLabel;
     const hasAuthIdentity = authIdentityLabel.length > 0;
+    const hasAuthEmail = authEmailLabel.length > 0;
+    const accountBadgeLabel = (authIdentityLabel || authEmailLabel || 'U').trim();
+    const accountBadgeInitial = accountBadgeLabel.charAt(0).toUpperCase() || 'U';
+    const subscriptionLabel = String(billingStatus?.planName || billingStatus?.planId || '').trim();
+    const hasSubscription = subscriptionLabel.length > 0;
+    const teamManagementWorkspaceId = String(authWorkspaceId || currentWorkspaceId || '').trim();
+    const runtimeLabel = runtimeMode === 'cloud' ? 'CLOUD' : 'LOCAL';
+    const apiBaseUrl = props.config?.apiBaseUrl || '';
+    const billingApiBaseUrl = useMemo(() => {
+        const preferredBase = runtimeMode === 'local'
+            ? (props.config?.cloudAuthBaseUrl || props.config?.apiBaseUrl || '')
+            : (props.config?.apiBaseUrl || props.config?.cloudAuthBaseUrl || '');
+        return String(preferredBase || '').trim().replace(/\/+$/, '');
+    }, [props.config?.apiBaseUrl, props.config?.cloudAuthBaseUrl, runtimeMode]);
+    const buildBillingApiUrl = useCallback((path) => {
+        const normalizedPath = String(path || '').trim();
+        if (!billingApiBaseUrl)
+            return normalizedPath;
+        return `${billingApiBaseUrl}${normalizedPath.startsWith('/') ? normalizedPath : `/${normalizedPath}`}`;
+    }, [billingApiBaseUrl]);
+    const connectedEnvironmentLabel = useMemo(() => resolveConnectedEnvironmentLabel(props.config?.cloudEnvironment, [
+        String(props.config?.cloudBaseUrl || ''),
+        String(props.config?.cloudAuthBaseUrl || ''),
+        String(props.config?.apiBaseUrl || ''),
+        String(props.config?.baseUrl || '')
+    ]), [
+        props.config?.cloudEnvironment,
+        props.config?.cloudBaseUrl,
+        props.config?.cloudAuthBaseUrl,
+        props.config?.apiBaseUrl,
+        props.config?.baseUrl
+    ]);
     const isAuthBootstrapPending = cloudAuthConfigured && !authSessionResolved;
+    useEffect(() => {
+        if (!showEditProfileModal)
+            return;
+        setProfileDisplayNameDraft(authDisplayName);
+        setProfileSaveError(null);
+        setProfileSaveNotice(null);
+    }, [authDisplayName, showEditProfileModal]);
+    const handleSaveProfile = useCallback(async () => {
+        const trimmedDisplayName = profileDisplayNameDraft.trim();
+        if (!trimmedDisplayName) {
+            setProfileSaveError('Display name is required.');
+            setProfileSaveNotice(null);
+            return;
+        }
+        setProfileSaveBusy(true);
+        setProfileSaveError(null);
+        setProfileSaveNotice(null);
+        const result = await updateCurrentUserProfile({ displayName: trimmedDisplayName });
+        if (!result.success) {
+            setProfileSaveError(result.error || 'Failed to update profile.');
+            setProfileSaveBusy(false);
+            return;
+        }
+        setProfileSaveNotice('Profile updated.');
+        setProfileSaveBusy(false);
+        setShowEditProfileModal(false);
+    }, [profileDisplayNameDraft, updateCurrentUserProfile]);
     const teamAdminHeaders = useCallback(() => {
         const headers = {};
-        const workspaceId = String(currentWorkspaceId || '').trim();
+        const workspaceId = String(teamManagementWorkspaceId || '').trim();
         if (workspaceId)
             headers['x-taskforce-workspace-id'] = workspaceId;
         return headers;
-    }, [currentWorkspaceId]);
+    }, [teamManagementWorkspaceId]);
     const loadBillingStatus = useCallback(async () => {
-        if (runtimeMode !== 'cloud' || !isAuthenticated) {
+        if (!isAuthenticated) {
             setBillingStatus(null);
             return null;
         }
         setBillingLoading(true);
         setBillingError(null);
         try {
-            const res = await fetch('/api/taskforce/billing/status', {
+            const res = await fetch(buildBillingApiUrl('/api/taskforce/billing/status'), {
                 method: 'GET',
                 credentials: 'include'
             });
@@ -725,46 +1320,19 @@ export function StandaloneLayout(props) {
         finally {
             setBillingLoading(false);
         }
-    }, [isAuthenticated, runtimeMode]);
+    }, [buildBillingApiUrl, isAuthenticated]);
     const handleStartCheckout = useCallback(async () => {
-        setBillingActionError(null);
-        setBillingNotice(null);
-        setBillingActionBusy(true);
-        try {
-            const res = await fetch('/api/taskforce/billing/checkout-session', {
-                method: 'POST',
-                credentials: 'include',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    tier: 'team',
-                    interval: billingIntervalChoice
-                })
-            });
-            const payload = await res.json().catch(() => ({}));
-            if (!res.ok) {
-                setBillingActionError(String(payload?.error || 'Failed to create checkout session.'));
-                return;
-            }
-            const nextUrl = String(payload?.url || '').trim();
-            if (!nextUrl) {
-                setBillingActionError('Checkout session did not return a redirect URL.');
-                return;
-            }
-            window.location.assign(nextUrl);
-        }
-        catch {
-            setBillingActionError('Failed to start checkout.');
-        }
-        finally {
-            setBillingActionBusy(false);
-        }
-    }, [billingIntervalChoice]);
+        const params = new URLSearchParams();
+        params.set('screen', 'plans');
+        params.set('interval', billingIntervalChoice);
+        navigate(`/?${params.toString()}`);
+    }, [billingIntervalChoice, navigate]);
     const handleOpenBillingPortal = useCallback(async () => {
         setBillingActionError(null);
         setBillingNotice(null);
         setBillingActionBusy(true);
         try {
-            const res = await fetch('/api/taskforce/billing/portal-session', {
+            const res = await fetch(buildBillingApiUrl('/api/taskforce/billing/portal-session'), {
                 method: 'POST',
                 credentials: 'include'
             });
@@ -786,18 +1354,23 @@ export function StandaloneLayout(props) {
         finally {
             setBillingActionBusy(false);
         }
-    }, []);
+    }, [buildBillingApiUrl]);
     const handleSwitchSubscriptionInterval = useCallback(async () => {
         setBillingActionError(null);
         setBillingNotice(null);
         setBillingActionBusy(true);
         try {
-            const res = await fetch('/api/taskforce/billing/subscription', {
+            const currentPlanVersionId = String(billingStatus?.planVersionId || '').trim();
+            if (!currentPlanVersionId) {
+                setBillingActionError('No active plan version is linked to this account.');
+                return;
+            }
+            const res = await fetch(buildBillingApiUrl('/api/taskforce/billing/subscription'), {
                 method: 'POST',
                 credentials: 'include',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({
-                    tier: 'team',
+                    planVersionId: currentPlanVersionId,
                     interval: billingIntervalChoice
                 })
             });
@@ -815,11 +1388,11 @@ export function StandaloneLayout(props) {
         finally {
             setBillingActionBusy(false);
         }
-    }, [billingIntervalChoice, loadBillingStatus]);
+    }, [billingIntervalChoice, billingStatus?.planVersionId, buildBillingApiUrl, loadBillingStatus]);
     const loadTeamPlanMode = useCallback(async () => {
-        if (!canManageCloudWorkspaces || !(currentWorkspaceRole === 'owner' || currentWorkspaceRole === 'admin')) {
+        if (!canManageTeamWorkspace) {
             setTeamPlanMode('unknown');
-            return;
+            return 'unknown';
         }
         try {
             const res = await fetch('/api/taskforce/account/entitlements', {
@@ -830,80 +1403,38 @@ export function StandaloneLayout(props) {
             const payload = await res.json().catch(() => ({}));
             if (!res.ok) {
                 setTeamPlanMode('unknown');
-                return;
+                return 'unknown';
             }
-            const planId = String(payload?.planId || '').trim().toLowerCase();
-            const state = String(payload?.state || '').trim().toLowerCase();
-            const teamAllowed = payload?.features?.['collaboration.team_management']?.allowed === true;
-            const stateAllows = state === 'active' || state === 'trialing' || state === 'grace';
-            setTeamPlanMode(planId === 'team' && teamAllowed && stateAllows ? 'team' : 'personal');
+            const nextMode = resolveTeamPlanModeFromEntitlements(payload);
+            setTeamPlanMode(nextMode);
+            return nextMode;
         }
         catch {
             setTeamPlanMode('unknown');
+            return 'unknown';
         }
-    }, [canManageCloudWorkspaces, currentWorkspaceRole, teamAdminHeaders]);
+    }, [canManageTeamWorkspace, teamAdminHeaders]);
     useEffect(() => {
         if (!showAccountMenu && !showTeamManagementModal && !showAccountHub)
             return;
         void loadTeamPlanMode();
     }, [showAccountHub, showAccountMenu, showTeamManagementModal, loadTeamPlanMode]);
     useEffect(() => {
-        if (!showAccountHub)
-            return;
-        void loadBillingStatus();
-    }, [loadBillingStatus, showAccountHub]);
-    useEffect(() => {
-        if (!isAuthenticated)
+        if (!isAuthenticated || !authSessionResolved)
             return;
-        if (location.pathname !== '/billing/success' && location.pathname !== '/billing/cancel')
-            return;
-        setShowAccountHub(true);
-        setShowAccountMenu(false);
-        setBillingActionError(null);
-        setBillingError(null);
-        if (location.pathname === '/billing/cancel') {
-            setBillingNotice('Checkout canceled. No billing changes were applied.');
-            navigate('/', { replace: true });
+        if (!canManageTeamWorkspace) {
+            setTeamPlanMode('unknown');
             return;
         }
-        setBillingNotice('Checkout complete. Waiting for billing confirmation...');
+        void loadTeamPlanMode();
+    }, [authSessionResolved, canManageTeamWorkspace, isAuthenticated, loadTeamPlanMode]);
+    useEffect(() => {
+        if (!showAccountHub && !showAccountMenu)
+            return;
         void loadBillingStatus();
-        let attempts = 0;
-        const maxAttempts = 30;
-        if (billingSuccessPollRef.current) {
-            window.clearInterval(billingSuccessPollRef.current);
-            billingSuccessPollRef.current = null;
-        }
-        billingSuccessPollRef.current = window.setInterval(() => {
-            attempts += 1;
-            void loadBillingStatus().then((payload) => {
-                const entitlementState = String(payload?.entitlementState || '').trim().toLowerCase();
-                if (entitlementState && entitlementState !== 'free') {
-                    setBillingNotice('Subscription is active.');
-                    if (billingSuccessPollRef.current) {
-                        window.clearInterval(billingSuccessPollRef.current);
-                        billingSuccessPollRef.current = null;
-                    }
-                    navigate('/', { replace: true });
-                    return;
-                }
-                if (attempts >= maxAttempts && billingSuccessPollRef.current) {
-                    window.clearInterval(billingSuccessPollRef.current);
-                    billingSuccessPollRef.current = null;
-                    setBillingNotice('Checkout finished, but entitlement update is still pending. Refresh Billing Status in a few seconds.');
-                    navigate('/', { replace: true });
-                }
-            });
-        }, 1500);
-        return () => {
-            if (billingSuccessPollRef.current) {
-                window.clearInterval(billingSuccessPollRef.current);
-                billingSuccessPollRef.current = null;
-            }
-        };
-    }, [isAuthenticated, loadBillingStatus, location.pathname, navigate]);
+    }, [loadBillingStatus, showAccountHub, showAccountMenu]);
     const loadTeamUsers = useCallback(async () => {
-        if (!canOpenTeamManagement)
+        if (!canManageTeamWorkspace)
             return;
         setTeamUsersLoading(true);
         setTeamMgmtError(null);
@@ -945,16 +1476,16 @@ export function StandaloneLayout(props) {
         finally {
             setTeamUsersLoading(false);
         }
-    }, [canOpenTeamManagement, teamAdminHeaders]);
+    }, [canManageTeamWorkspace, teamAdminHeaders]);
     const loadTeamAuditPage = useCallback(async (page) => {
-        if (!canOpenTeamManagement)
+        if (!canManageTeamWorkspace)
             return;
         const safePage = Math.max(0, Math.floor(page));
         setTeamAuditLoading(true);
         setTeamMgmtError(null);
         try {
             const offset = safePage * TEAM_AUDIT_PAGE_SIZE;
-            const res = await fetch(`/api/taskforce/admin/audit-logs?limit=${TEAM_AUDIT_PAGE_SIZE}&offset=${offset}`, {
+            const res = await fetch(`/api/taskforce/admin/workspace-audit-logs?limit=${TEAM_AUDIT_PAGE_SIZE}&offset=${offset}`, {
                 method: 'GET',
                 credentials: 'include',
                 headers: teamAdminHeaders()
@@ -983,7 +1514,7 @@ export function StandaloneLayout(props) {
         finally {
             setTeamAuditLoading(false);
         }
-    }, [canOpenTeamManagement, teamAdminHeaders]);
+    }, [canManageTeamWorkspace, teamAdminHeaders]);
     const reloadTeamManagementData = useCallback(async () => {
         await Promise.all([loadTeamUsers(), loadTeamAuditPage(teamAuditPage)]);
     }, [loadTeamUsers, loadTeamAuditPage, teamAuditPage]);
@@ -995,10 +1526,14 @@ export function StandaloneLayout(props) {
         setShowSyncStatusModal(false);
         navigate(`/login?mode=${mode}&next=${encodeURIComponent(target)}`);
     }, [location.hash, location.pathname, location.search, navigate]);
-    const openWorkspaceSetup = useCallback(() => {
+    const openWorkspaceSetup = useCallback((options) => {
         setShowAccountMenu(false);
-        setWorkspacePanelOpen(false);
-        navigate('/setup?step=workspace', { replace: true });
+        setShowCreateWorkspaceConfirm(false);
+        const params = new URLSearchParams({ step: 'workspace' });
+        if (options?.intent === 'create-workspace') {
+            params.set('intent', 'create-workspace');
+        }
+        navigate(`/setup?${params.toString()}`, { replace: true });
     }, [navigate]);
     const handleSwitchWorkspace = useCallback(async (workspaceId) => {
         if (!workspaceId || workspaceActionBusy)
@@ -1017,53 +1552,24 @@ export function StandaloneLayout(props) {
             }
             await fetchTasks(true);
             setShowAccountMenu(false);
-            setWorkspacePanelOpen(false);
         }
         finally {
             setWorkspaceActionBusy(false);
         }
     }, [switchWorkspace, workspaceActionBusy, fetchTasks, openWorkspaceSetup]);
-    const handleCreateWorkspace = useCallback(async () => {
-        if (workspaceActionBusy)
-            return;
-        const name = workspaceFormName.trim();
-        if (!name) {
-            setWorkspaceActionError('Workspace name is required.');
+    const openTeamManagementModal = useCallback(async () => {
+        setShowAccountMenu(false);
+        setShowTeamManagementModal(true);
+        setTeamManagementTab('members');
+        const resolvedMode = await loadTeamPlanMode();
+        if (resolvedMode !== 'team')
             return;
-        }
-        setWorkspaceActionError('');
-        setWorkspaceActionBusy(true);
-        try {
-            const result = await createWorkspace(name, workspaceFormDescription.trim() || undefined);
-            if (!result.success) {
-                if (result.code === 'WORKSPACE_NOT_FOUND' || result.code === 'WORKSPACE_ID_REQUIRED') {
-                    openWorkspaceSetup();
-                    return;
-                }
-                setWorkspaceActionError(result.error || 'Failed to create workspace.');
-                return;
-            }
-            await fetchTasks(true);
-            setWorkspaceFormName('');
-            setWorkspaceFormDescription('');
-            setWorkspacePanelOpen(false);
-            setShowAccountMenu(false);
-        }
-        finally {
-            setWorkspaceActionBusy(false);
-        }
-    }, [workspaceActionBusy, workspaceFormName, workspaceFormDescription, createWorkspace, fetchTasks, openWorkspaceSetup]);
-    const openTeamManagementModal = useCallback(async () => {
-        setShowAccountMenu(false);
-        setShowTeamManagementModal(true);
-        setTeamManagementTab('members');
-        await loadTeamPlanMode();
-        await loadTeamUsers();
-        await loadTeamAuditPage(0);
-    }, [loadTeamAuditPage, loadTeamPlanMode, loadTeamUsers]);
-    const executeTeamUserAction = useCallback(async (userId, fn) => {
-        setTeamMgmtError(null);
-        setTeamActionBusyUserId(userId);
+        await loadTeamUsers();
+        await loadTeamAuditPage(0);
+    }, [loadTeamAuditPage, loadTeamPlanMode, loadTeamUsers]);
+    const executeTeamUserAction = useCallback(async (userId, fn) => {
+        setTeamMgmtError(null);
+        setTeamActionBusyUserId(userId);
         try {
             const res = await fn();
             const payload = await res.json().catch(() => ({}));
@@ -1096,7 +1602,7 @@ export function StandaloneLayout(props) {
                 },
                 credentials: 'include',
                 body: JSON.stringify({
-                    workspaceId: currentWorkspaceId,
+                    workspaceId: teamManagementWorkspaceId,
                     email,
                     role: teamInviteRole,
                     permissionMode: teamInviteRole === 'member' ? teamInvitePermissionMode : 'read-write'
@@ -1138,27 +1644,64 @@ export function StandaloneLayout(props) {
         const hasTypeFilter = filterTypes.length !== activeTypes.length;
         const hasPriorityFilter = filterPriorities.length !== priorities.length;
         const hasStatusFilter = filterStatus.length !== STATUS_OPTIONS.length;
-        const hasAssigneeFilter = assigneeFilterEnabled && filterAssignees.length !== 3;
-        const hasParentsOnlyFilter = parentTaskFilterMode !== 'all';
-        return hasCategoryFilter || hasTypeFilter || hasPriorityFilter || hasStatusFilter || hasAssigneeFilter || hasParentsOnlyFilter;
-    }, [filterCategories, activeCategories, filterTypes, activeTypes, filterPriorities, priorities, filterStatus, assigneeFilterEnabled, filterAssignees, parentTaskFilterMode]);
+        const hasAssigneeFilter = filterAssignees.length !== assigneeOptions.length;
+        const hasInitiativeScopeFilter = selectedPlanningInitiativeId.length > 0;
+        const hasWorkstreamScopeFilter = selectedPlanningWorkstreamId.length > 0;
+        return hasCategoryFilter
+            || hasTypeFilter
+            || hasPriorityFilter
+            || hasStatusFilter
+            || hasAssigneeFilter
+            || hasInitiativeScopeFilter
+            || hasWorkstreamScopeFilter;
+    }, [
+        activeCategories.length,
+        activeTypes.length,
+        assigneeOptions.length,
+        filterAssignees.length,
+        filterCategories.length,
+        filterPriorities.length,
+        filterStatus.length,
+        filterTypes.length,
+        priorities.length,
+        selectedPlanningInitiativeId,
+        selectedPlanningWorkstreamId,
+    ]);
+    const hasDocumentDropdownFilters = useMemo(() => (documentTypeFilters.length !== DOCUMENT_TYPE_FILTER_OPTIONS.length
+        || documentAttachmentFilters.length !== DOCUMENT_ATTACHMENT_FILTER_OPTIONS.length), [documentAttachmentFilters.length, documentTypeFilters.length]);
+    const workspaceChromeMode = resolvedWorkspaceModule;
+    const workspaceChromeDefinition = useMemo(() => getWorkspaceChromeDefinition(workspaceChromeMode), [workspaceChromeMode]);
+    const hasActiveWorkspaceFilterControls = useMemo(() => {
+        switch (workspaceChromeDefinition.filterBar.kind) {
+            case 'task-filters':
+                return hasDropdownFilters;
+            case 'document-filters':
+                return hasDocumentDropdownFilters;
+            default:
+                return false;
+        }
+    }, [
+        hasDocumentDropdownFilters,
+        hasDropdownFilters,
+        workspaceChromeDefinition.filterBar.kind,
+    ]);
     // Check if any filters are set (search + dropdown filters)
     const isFiltered = hasSearchFilter || hasDropdownFilters;
-    const totalActiveCount = tasks.length;
-    const visibleActiveCount = props.filteredTasks.length;
+    const totalActiveCount = taskScope === 'archived'
+        ? archivedScopeAllTasks.length
+        : taskScope === 'deleted'
+            ? deletedScopeAllTasks.length
+            : tasks.length;
+    const visibleActiveCount = taskScope === 'archived'
+        ? archivedScopeTasks.length
+        : taskScope === 'deleted'
+            ? filteredDeletedTasks.length
+            : props.filteredTasks.length;
     const activeCountLabel = isFiltered ? `${visibleActiveCount}/${totalActiveCount}` : `${totalActiveCount}`;
     const activeCountTitle = isFiltered
-        ? t('standalone.visibleActiveTasksTitle')
-        : t('standalone.totalActiveTasksTitle');
-    const shouldShowSyncStatus = runtimeMode === 'local';
-    const formattedLastSyncTime = useMemo(() => {
-        if (!userGlobalLastSyncedAt)
-            return 'Never';
-        const parsed = new Date(userGlobalLastSyncedAt);
-        if (Number.isNaN(parsed.getTime()))
-            return 'Never';
-        return parsed.toLocaleString();
-    }, [userGlobalLastSyncedAt]);
+        ? `${taskScope.charAt(0).toUpperCase() + taskScope.slice(1)} tasks matching current filters`
+        : `${taskScope.charAt(0).toUpperCase() + taskScope.slice(1)} tasks`;
+    const shouldShowSyncStatus = runtimeMode === 'local' && isAuthenticated;
     const formatSyncTimestamp = useCallback((value) => {
         if (!value)
             return 'Never';
@@ -1167,259 +1710,379 @@ export function StandaloneLayout(props) {
             return 'Never';
         return parsed.toLocaleString();
     }, []);
-    const formattedLastPullTime = useMemo(() => formatSyncTimestamp(workspaceLastPullAt), [workspaceLastPullAt, formatSyncTimestamp]);
-    const formattedLastPushTime = useMemo(() => formatSyncTimestamp(workspaceLastPushAt), [workspaceLastPushAt, formatSyncTimestamp]);
-    const formattedLastErrorTime = useMemo(() => formatSyncTimestamp(workspaceLastErrorAt), [workspaceLastErrorAt, formatSyncTimestamp]);
-    const formattedRetryTime = useMemo(() => formatSyncTimestamp(workspaceRetryAt), [workspaceRetryAt, formatSyncTimestamp]);
-    const [displaySyncState, setDisplaySyncState] = useState(() => (workspaceCloudSyncEnabled ? userGlobalSyncStatus : 'disconnected'));
-    const syncStateSinceRef = useRef(Date.now());
-    const syncStateTimerRef = useRef(null);
-    const rawSyncState = useMemo(() => {
-        if (!workspaceCloudSyncEnabled)
-            return 'disconnected';
-        if (userGlobalSyncStatus === 'error')
-            return 'error';
-        if (realtimeSyncEnabled && realtimeConnectionState === 'degraded-fallback')
-            return 'degraded-fallback';
-        if (realtimeSyncEnabled && realtimeConnectionState === 'reconnecting')
-            return 'reconnecting';
-        return userGlobalSyncStatus;
-    }, [workspaceCloudSyncEnabled, userGlobalSyncStatus, realtimeSyncEnabled, realtimeConnectionState]);
+    const formattedLastSyncTime = useMemo(() => formatSyncTimestamp(workspaceLastSuccessfulSyncAt), [formatSyncTimestamp, workspaceLastSuccessfulSyncAt]);
+    const formattedLastPullTime = useMemo(() => formatSyncTimestamp(workspaceLastPullAt), [formatSyncTimestamp, workspaceLastPullAt]);
+    const formattedLastPushTime = useMemo(() => formatSyncTimestamp(workspaceLastPushAt), [formatSyncTimestamp, workspaceLastPushAt]);
+    const rawSyncLastError = workspaceSyncError || workspaceLastErrorMessage || userGlobalSyncError || 'None';
+    const headerSyncPresentation = useMemo(() => resolveHeaderWorkspaceSyncPresentation({
+        runtimeMode,
+        isAuthenticated,
+        workspaceSyncStatus,
+        workspaceCloudSyncEnabled,
+        workspaceSyncSummary,
+        workspaceSyncRecommendedAction,
+        workspaceSyncError: rawSyncLastError
+    }), [
+        runtimeMode,
+        isAuthenticated,
+        workspaceSyncStatus,
+        workspaceCloudSyncEnabled,
+        workspaceSyncSummary,
+        workspaceSyncRecommendedAction,
+        rawSyncLastError
+    ]);
+    const syncLastError = headerSyncPresentation.lastError;
+    const [headerSyncStatus, setHeaderSyncStatus] = useState(headerSyncPresentation.status);
+    const syncStageLabel = useMemo(() => {
+        if (workspaceSyncRepairBusy) {
+            return 'Repairing';
+        }
+        if (workspaceSyncBusy && workspaceSyncPhase === 'error') {
+            return 'Recovering';
+        }
+        switch (workspaceSyncPhase) {
+            case 'provision-local':
+                return 'Initial cloud upload';
+            case 'attach-cloud':
+                return 'Initial cloud pull';
+            case 'active':
+                return 'Active';
+            case 'error':
+                return 'Error';
+            default:
+                return 'Idle';
+        }
+    }, [workspaceSyncPhase, workspaceSyncRepairBusy]);
+    const workspaceSyncDiagnostics = getWorkspaceSyncDiagnostics();
+    const syncDiagnosticsSummary = useMemo(() => ([
+        {
+            label: 'AI profile snapshot',
+            value: `${workspaceSyncDiagnostics.aiProfileSnapshotCount} local profile${workspaceSyncDiagnostics.aiProfileSnapshotCount === 1 ? '' : 's'}`
+        },
+        {
+            label: 'AI profile raw response',
+            value: `${workspaceSyncDiagnostics.aiProfileSnapshotRawCount} from route`
+        },
+        {
+            label: 'Last pushed AI profiles',
+            value: `${workspaceSyncDiagnostics.lastPushedAiProfileCount} tracked`
+        },
+        {
+            label: 'AI watermark map',
+            value: `${workspaceSyncDiagnostics.lastPushedAiProfileWatermarkCount} tracked`
+        },
+        {
+            label: 'Document snapshot',
+            value: `${workspaceSyncDiagnostics.documentSnapshotCount} local doc${workspaceSyncDiagnostics.documentSnapshotCount === 1 ? '' : 's'}`
+        },
+        {
+            label: 'Asset snapshot',
+            value: `${workspaceSyncDiagnostics.assetSnapshotCount} local asset${workspaceSyncDiagnostics.assetSnapshotCount === 1 ? '' : 's'}`
+        },
+        {
+            label: 'Queued full AI sync',
+            value: workspaceSyncDiagnostics.forceFullAiProfilePushQueued ? 'Yes' : 'No'
+        },
+        {
+            label: 'AI snapshot last fetch',
+            value: workspaceSyncDiagnostics.aiProfileSnapshotLastFetchAt
+                ? new Date(workspaceSyncDiagnostics.aiProfileSnapshotLastFetchAt).toLocaleString()
+                : 'Never'
+        },
+        {
+            label: 'AI snapshot fetch error',
+            value: workspaceSyncDiagnostics.aiProfileSnapshotLastFetchError || 'None'
+        },
+        {
+            label: 'AI snapshot skip reason',
+            value: workspaceSyncDiagnostics.aiProfileSnapshotLastSkipReason || 'None'
+        }
+    ]), [workspaceSyncDiagnostics]);
+    const shouldDelayHeaderSyncing = headerSyncPresentation.actionable
+        && workspaceSyncStatus === 'syncing'
+        && workspaceSyncPhase === 'active'
+        && workspaceSyncPendingChanges === 0;
     useEffect(() => {
-        if (syncStateTimerRef.current !== null) {
-            window.clearTimeout(syncStateTimerRef.current);
-            syncStateTimerRef.current = null;
-        }
-        const applyState = (next) => {
-            setDisplaySyncState(next);
-            syncStateSinceRef.current = Date.now();
-        };
-        if (rawSyncState === displaySyncState)
-            return;
-        // Delay "syncing" to avoid flicker on very fast sync cycles.
-        if (rawSyncState === 'syncing' || rawSyncState === 'reconnecting') {
-            syncStateTimerRef.current = window.setTimeout(() => {
-                applyState(rawSyncState);
-            }, SYNCING_DISPLAY_DELAY_MS);
+        if (!shouldDelayHeaderSyncing) {
+            setHeaderSyncStatus(headerSyncPresentation.status);
             return;
         }
-        // Hold syncing/error briefly so status doesn't flash rapidly.
-        if (displaySyncState === 'syncing' || displaySyncState === 'reconnecting') {
-            const elapsed = Date.now() - syncStateSinceRef.current;
-            const remaining = Math.max(0, SYNCING_MIN_VISIBLE_MS - elapsed);
-            syncStateTimerRef.current = window.setTimeout(() => {
-                applyState(rawSyncState);
-            }, remaining);
+        const timeoutId = window.setTimeout(() => {
+            setHeaderSyncStatus(headerSyncPresentation.status);
+        }, 1200);
+        return () => window.clearTimeout(timeoutId);
+    }, [headerSyncPresentation.status, shouldDelayHeaderSyncing]);
+    const formatSyncEventLine = useCallback((event) => {
+        const occurredAt = typeof event.occurredAt === 'string' && event.occurredAt.trim().length > 0
+            ? event.occurredAt
+            : 'unknown-time';
+        const eventType = typeof event.eventType === 'string' && event.eventType.trim().length > 0
+            ? event.eventType.trim()
+            : 'sync';
+        const status = event.status === 'error' ? 'failed' : 'succeeded';
+        const changeCountValue = Number(event.changeCount);
+        const changeCount = Number.isFinite(changeCountValue)
+            ? ` (${Math.max(0, Math.floor(changeCountValue))} change${Math.floor(changeCountValue) === 1 ? '' : 's'})`
+            : '';
+        const requestMsValue = Number(event.requestMs);
+        const requestMs = Number.isFinite(requestMsValue)
+            ? ` in ${Math.max(0, Math.floor(requestMsValue))}ms`
+            : '';
+        const statusCodeValue = Number(event.statusCode);
+        const statusCode = Number.isFinite(statusCodeValue)
+            ? ` [${Math.floor(statusCodeValue)}]`
+            : '';
+        const errorMessage = typeof event.errorMessage === 'string' && event.errorMessage.trim().length > 0
+            ? `: ${event.errorMessage.trim()}`
+            : '';
+        return `${occurredAt} ${eventType} ${status}${changeCount}${requestMs}${statusCode}${errorMessage}`;
+    }, []);
+    const syncEventRows = useMemo(() => {
+        if (syncRecentEventsLoading && syncRecentEvents.length === 0) {
+            return [{
+                    key: 'loading',
+                    text: 'Loading recent sync events...',
+                    tone: 'muted'
+                }];
+        }
+        if (syncRecentEventsError) {
+            return [{
+                    key: 'error',
+                    text: syncRecentEventsError,
+                    tone: 'error'
+                }];
+        }
+        if (syncRecentEvents.length === 0) {
+            return [{
+                    key: 'empty',
+                    text: 'No recent sync events recorded.',
+                    tone: 'muted'
+                }];
+        }
+        return syncRecentEvents.map((event, index) => ({
+            key: getSyncEventStableKey(event, index),
+            text: formatSyncEventLine(event),
+            tone: event.status === 'error' ? 'error' : 'default'
+        }));
+    }, [formatSyncEventLine, syncRecentEvents, syncRecentEventsError, syncRecentEventsLoading]);
+    const referenceMismatchCount = useMemo(() => getActiveReferenceMismatchCount(syncRecentEvents), [syncRecentEvents]);
+    const activeReferenceMismatchEvents = useMemo(() => getActiveReferenceMismatchEvents(syncRecentEvents), [syncRecentEvents]);
+    const activeReferenceMismatchSummaries = useMemo(() => (activeReferenceMismatchEvents.map((event, index) => {
+        const details = event.details && typeof event.details === 'object' ? event.details : null;
+        const pathValue = String(details?.path || '').trim();
+        const existingRefValue = Number(details?.existingReferenceNumber);
+        const incomingRefValue = Number(details?.incomingReferenceNumber);
+        const pathLabel = pathValue || `Mismatch ${index + 1}`;
+        const refsLabel = (Number.isFinite(existingRefValue) || Number.isFinite(incomingRefValue))
+            ? `Existing ${Number.isFinite(existingRefValue) ? existingRefValue : '?'} vs incoming ${Number.isFinite(incomingRefValue) ? incomingRefValue : '?'}`
+            : null;
+        return {
+            key: getSyncEventStableKey(event, index),
+            pathLabel,
+            refsLabel,
+        };
+    })), [activeReferenceMismatchEvents]);
+    useLayoutEffect(() => {
+        const pendingRestore = pendingSyncEventsScrollRestoreRef.current;
+        const listEl = syncEventsListRef.current;
+        if (!pendingRestore || !listEl)
             return;
+        const delta = listEl.scrollHeight - pendingRestore.scrollHeight;
+        listEl.scrollTop = pendingRestore.scrollTop + Math.max(0, delta);
+        pendingSyncEventsScrollRestoreRef.current = null;
+    }, [syncRecentEvents]);
+    const loadRecentSyncEvents = useCallback(async () => {
+        const res = await fetch(`/api/taskforce/sync/events?workspace_id=${encodeURIComponent(currentWorkspaceId)}&limit=15`, {
+            method: 'GET',
+            credentials: 'include'
+        });
+        if (!res.ok) {
+            throw new Error(`Failed to load sync events (${res.status})`);
         }
-        if (displaySyncState === 'error' && rawSyncState !== 'error') {
-            const elapsed = Date.now() - syncStateSinceRef.current;
-            const remaining = Math.max(0, ERROR_MIN_VISIBLE_MS - elapsed);
-            syncStateTimerRef.current = window.setTimeout(() => {
-                applyState(rawSyncState);
-            }, remaining);
+        const data = await res.json().catch(() => ({}));
+        return Array.isArray(data?.events)
+            ? data.events.filter((event) => event && typeof event === 'object')
+            : [];
+    }, [currentWorkspaceId]);
+    useEffect(() => {
+        if (!showSyncStatusModal)
             return;
+        let cancelled = false;
+        const isInitialLoad = syncRecentEvents.length === 0;
+        if (isInitialLoad) {
+            setSyncRecentEventsLoading(true);
         }
-        applyState(rawSyncState);
-    }, [rawSyncState, displaySyncState]);
-    useEffect(() => {
-        return () => {
-            if (syncStateTimerRef.current !== null) {
-                window.clearTimeout(syncStateTimerRef.current);
-                syncStateTimerRef.current = null;
+        void loadRecentSyncEvents()
+            .then((events) => {
+            if (cancelled)
+                return;
+            const listEl = syncEventsListRef.current;
+            pendingSyncEventsScrollRestoreRef.current = listEl && listEl.scrollTop > 8
+                ? {
+                    scrollTop: listEl.scrollTop,
+                    scrollHeight: listEl.scrollHeight
+                }
+                : null;
+            setSyncRecentEvents((current) => {
+                const next = current.length === 0 ? events : mergeRecentSyncEvents(current, events, 15);
+                return areSyncEventListsEqual(current, next) ? current : next;
+            });
+            setSyncRecentEventsError(null);
+        })
+            .catch((error) => {
+            if (cancelled)
+                return;
+            const message = error instanceof Error && error.message.trim().length > 0
+                ? error.message.trim()
+                : 'Unable to load recent sync events.';
+            setSyncRecentEventsError(message);
+            if (isInitialLoad) {
+                setSyncRecentEvents([]);
             }
+        })
+            .finally(() => {
+            if (cancelled)
+                return;
+            if (isInitialLoad) {
+                setSyncRecentEventsLoading(false);
+            }
+        });
+        return () => {
+            cancelled = true;
         };
-    }, []);
-    const modalSyncStatusMeta = useMemo(() => {
-        if (!workspaceCloudSyncEnabled) {
-            return {
-                label: 'Sync Off',
-                color: '#94a3b8',
-                border: 'rgba(148, 163, 184, 0.45)',
-                background: 'rgba(148, 163, 184, 0.12)'
-            };
-        }
-        switch (displaySyncState) {
-            case 'syncing':
-                return {
-                    label: 'Syncing',
-                    color: '#f59e0b',
-                    border: 'rgba(245, 158, 11, 0.45)',
-                    background: 'rgba(245, 158, 11, 0.16)'
-                };
-            case 'reconnecting':
-                return {
-                    label: 'Reconnecting',
-                    color: '#f59e0b',
-                    border: 'rgba(245, 158, 11, 0.45)',
-                    background: 'rgba(245, 158, 11, 0.16)'
-                };
-            case 'degraded-fallback':
+    }, [
+        showSyncStatusModal,
+        loadRecentSyncEvents,
+        syncRecentEvents.length,
+        workspaceLastPushAt,
+        workspaceLastPullAt,
+        workspaceLastErrorAt,
+        workspaceSyncStatus
+    ]);
+    const syncStatusMeta = useMemo(() => {
+        switch (headerSyncStatus) {
+            case 'off':
                 return {
-                    label: 'Fallback Pull',
-                    color: '#fb923c',
-                    border: 'rgba(251, 146, 60, 0.45)',
-                    background: 'rgba(251, 146, 60, 0.16)'
+                    label: 'Off',
+                    icon: 'off',
+                    color: '#94a3b8',
+                    border: 'rgba(148, 163, 184, 0.35)',
+                    background: 'rgba(148, 163, 184, 0.12)'
                 };
-            case 'error':
+            case 'syncing':
                 return {
-                    label: 'Sync Error',
-                    color: '#f87171',
-                    border: 'rgba(248, 113, 113, 0.45)',
-                    background: 'rgba(248, 113, 113, 0.14)'
+                    label: 'Syncing',
+                    icon: 'cloud',
+                    color: '#60a5fa',
+                    border: 'rgba(96, 165, 250, 0.35)',
+                    background: 'rgba(59, 130, 246, 0.12)'
                 };
-            case 'disconnected':
+            case 'attention':
                 return {
-                    label: 'Disconnected',
-                    color: '#94a3b8',
-                    border: 'rgba(148, 163, 184, 0.45)',
-                    background: 'rgba(148, 163, 184, 0.12)'
+                    label: 'Needs Attention',
+                    icon: 'cloud',
+                    color: '#fda4af',
+                    border: 'rgba(253, 164, 175, 0.4)',
+                    background: 'rgba(239, 68, 68, 0.12)'
                 };
-            case 'idle':
             default:
                 return {
-                    label: 'Synced',
-                    color: '#34d399',
-                    border: 'rgba(52, 211, 153, 0.45)',
-                    background: 'rgba(52, 211, 153, 0.14)'
+                    label: 'Healthy',
+                    icon: 'cloud',
+                    color: '#86efac',
+                    border: 'rgba(134, 239, 172, 0.4)',
+                    background: 'rgba(34, 197, 94, 0.12)'
                 };
         }
-    }, [displaySyncState, workspaceCloudSyncEnabled]);
-    const headerSyncStatusMeta = useMemo(() => {
-        if (!workspaceCloudSyncEnabled) {
-            return {
-                label: 'Sync Off',
-                color: '#94a3b8',
-                border: 'rgba(148, 163, 184, 0.45)',
-                background: 'rgba(148, 163, 184, 0.12)',
-                icon: 'off'
-            };
-        }
-        if (displaySyncState === 'error') {
-            return {
-                label: 'Sync Error',
-                color: '#f87171',
-                border: 'rgba(248, 113, 113, 0.45)',
-                background: 'rgba(248, 113, 113, 0.14)',
-                icon: 'off'
-            };
+    }, [headerSyncStatus]);
+    const handleCopySyncDetails = useCallback(async () => {
+        const details = [
+            'Taskforce Sync Manager',
+            `Workspace ID: ${currentWorkspaceId}`,
+            `Status: ${syncStatusMeta.label}`,
+            `Summary: ${headerSyncPresentation.summary}`,
+            `Last successful sync: ${formattedLastSyncTime}`,
+            `Last pull from cloud: ${formattedLastPullTime}`,
+            `Last push to cloud: ${formattedLastPushTime}`,
+            `Last error at: ${workspaceSyncDiagnostics.lastErrorAt ? new Date(workspaceSyncDiagnostics.lastErrorAt).toLocaleString() : 'Never'}`,
+            `Pending local changes: ${workspaceSyncPendingChanges}`,
+            `Last error: ${syncLastError}`,
+            `Sync stage: ${syncStageLabel}`,
+            `AI profile snapshot: ${workspaceSyncDiagnostics.aiProfileSnapshotCount}`,
+            `AI profile raw response: ${workspaceSyncDiagnostics.aiProfileSnapshotRawCount}`,
+            `Last pushed AI profiles tracked: ${workspaceSyncDiagnostics.lastPushedAiProfileCount}`,
+            `AI profile watermarks tracked: ${workspaceSyncDiagnostics.lastPushedAiProfileWatermarkCount}`,
+            `AI snapshot last fetch: ${workspaceSyncDiagnostics.aiProfileSnapshotLastFetchAt ? new Date(workspaceSyncDiagnostics.aiProfileSnapshotLastFetchAt).toLocaleString() : 'Never'}`,
+            `AI snapshot fetch error: ${workspaceSyncDiagnostics.aiProfileSnapshotLastFetchError || 'None'}`,
+            `AI snapshot skip reason: ${workspaceSyncDiagnostics.aiProfileSnapshotLastSkipReason || 'None'}`,
+            `Document snapshot: ${workspaceSyncDiagnostics.documentSnapshotCount}`,
+            `Asset snapshot: ${workspaceSyncDiagnostics.assetSnapshotCount}`,
+            `Reference mismatches detected: ${referenceMismatchCount}`,
+            `Queued full AI sync: ${workspaceSyncDiagnostics.forceFullAiProfilePushQueued ? 'Yes' : 'No'}`
+        ];
+        try {
+            const events = syncRecentEvents.length > 0 ? syncRecentEvents : await loadRecentSyncEvents();
+            const recentEventLines = events.map((event) => formatSyncEventLine(event));
+            const copyText = [
+                ...details,
+                '',
+                'Recent sync events',
+                ...(recentEventLines.length > 0 ? recentEventLines : ['No recent sync events recorded.'])
+            ].join('\n');
+            await navigator.clipboard.writeText(copyText);
+            setWorkspaceSyncCopied(true);
+            window.setTimeout(() => {
+                setWorkspaceSyncCopied(false);
+            }, 1800);
+            pushNotice('Sync details copied to clipboard.', 'success');
         }
-        if (displaySyncState === 'degraded-fallback') {
-            return {
-                label: 'Fallback Pull',
-                color: '#fb923c',
-                border: 'rgba(251, 146, 60, 0.45)',
-                background: 'rgba(251, 146, 60, 0.16)',
-                icon: 'off'
-            };
+        catch {
+            setWorkspaceSyncCopied(false);
+            pushNotice('Failed to copy sync details.', 'error');
         }
-        if (displaySyncState === 'reconnecting') {
-            return {
-                label: 'Reconnecting',
-                color: '#f59e0b',
-                border: 'rgba(245, 158, 11, 0.45)',
-                background: 'rgba(245, 158, 11, 0.16)',
-                icon: 'off'
-            };
+    }, [
+        currentWorkspaceId,
+        syncStatusMeta.label,
+        headerSyncPresentation.summary,
+        formattedLastSyncTime,
+        formattedLastPullTime,
+        formattedLastPushTime,
+        workspaceSyncDiagnostics,
+        workspaceSyncPendingChanges,
+        syncLastError,
+        syncStageLabel,
+        referenceMismatchCount,
+        pushNotice,
+        syncRecentEvents,
+        loadRecentSyncEvents,
+        formatSyncEventLine
+    ]);
+    const handleRepairSync = useCallback(async () => {
+        setWorkspaceSyncRepairQueued(false);
+        setWorkspaceSyncRepairBusy(true);
+        try {
+            await resetWorkspaceSyncCursorAndPull();
         }
-        if (displaySyncState === 'disconnected') {
-            return {
-                label: 'Disconnected',
-                color: '#94a3b8',
-                border: 'rgba(148, 163, 184, 0.45)',
-                background: 'rgba(148, 163, 184, 0.12)',
-                icon: 'off'
-            };
+        finally {
+            setWorkspaceSyncRepairBusy(false);
         }
-        return {
-            label: 'Synced',
-            color: '#34d399',
-            border: 'rgba(52, 211, 153, 0.45)',
-            background: 'rgba(52, 211, 153, 0.14)',
-            icon: 'cloud'
-        };
-    }, [displaySyncState, workspaceCloudSyncEnabled]);
-    const parentFilterLabel = hierarchyRootTaskId
-        ? 'Subtree'
-        : parentTaskFilterMode === 'parents'
-            ? t('standalone.linksParents')
-            : parentTaskFilterMode === 'linked'
-                ? t('standalone.linksLinked')
-                : parentTaskFilterMode === 'unlinked'
-                    ? t('standalone.linksUnlinked')
-                    : t('standalone.linksAll');
-    const selectedHierarchyRootTask = hierarchyRootTaskId ? hierarchyTaskById.get(hierarchyRootTaskId) : undefined;
-    const hierarchySubtreeStats = useMemo(() => {
-        if (!hierarchyDescendantIdSet || !selectedHierarchyRootTask)
-            return null;
-        const selectedTasks = hierarchyTasks.filter((task) => hierarchyDescendantIdSet.has(task.id));
-        let active = 0;
-        let terminal = 0;
-        let overdue = 0;
-        selectedTasks.forEach((task) => {
-            const isTerminal = task.status === 'done' || task.status === 'cancelled' || Boolean(task.isArchived);
-            if (isTerminal) {
-                terminal += 1;
-            }
-            else {
-                active += 1;
-                if (task.dueDate && task.dueDate < todayDateOnly)
-                    overdue += 1;
-            }
-        });
-        let depth = 0;
-        const visited = new Set();
-        const stack = [{ id: selectedHierarchyRootTask.id, depth: 0 }];
-        while (stack.length > 0) {
-            const current = stack.pop();
-            if (visited.has(current.id))
-                continue;
-            visited.add(current.id);
-            if (current.depth > depth)
-                depth = current.depth;
-            const children = hierarchyChildrenByParent.get(current.id) || [];
-            children.forEach((child) => {
-                if (!visited.has(child.id) && hierarchyDescendantIdSet.has(child.id)) {
-                    stack.push({ id: child.id, depth: current.depth + 1 });
-                }
-            });
+    }, [resetWorkspaceSyncCursorAndPull]);
+    const handleQueueOrRunRepairSync = useCallback(() => {
+        if (workspaceSyncRepairBusy)
+            return;
+        if (workspaceSyncBusy) {
+            setWorkspaceSyncRepairQueued(true);
+            return;
         }
-        return { total: selectedTasks.length, active, terminal, overdue, depth };
-    }, [hierarchyDescendantIdSet, selectedHierarchyRootTask, hierarchyTasks, todayDateOnly, hierarchyChildrenByParent]);
-    const hierarchyVisibleLevelCounts = useMemo(() => {
-        const byLevel = new Map();
-        hierarchyDepthTasks.forEach((task) => {
-            const level = (hierarchyGlobalDepthMap.get(task.id) ?? 0) + 1;
-            byLevel.set(level, (byLevel.get(level) || 0) + 1);
-        });
-        return Array.from(byLevel.entries())
-            .sort((a, b) => a[0] - b[0])
-            .map(([level, count]) => ({ level, count }));
-    }, [hierarchyDepthTasks, hierarchyGlobalDepthMap]);
-    const hierarchyVisibleUnlinkedCount = useMemo(() => hierarchyVisibleTasks.filter((task) => !task.parentTaskId && !hierarchyParentIdSet.has(task.id)).length, [hierarchyVisibleTasks, hierarchyParentIdSet]);
-    const hierarchyVisibleRootCount = useMemo(() => hierarchyVisibleTasks.filter((task) => !task.parentTaskId && hierarchyParentIdSet.has(task.id)).length, [hierarchyVisibleTasks, hierarchyParentIdSet]);
-    const hierarchySubtreeTaskList = useMemo(() => {
-        if (!hierarchyRootTaskId || !hierarchyDescendantIdSet)
-            return [];
-        return hierarchyTasks
-            .filter((task) => hierarchyDescendantIdSet.has(task.id))
-            .sort((a, b) => {
-            const levelA = hierarchyGlobalDepthMap.get(a.id) ?? Number.MAX_SAFE_INTEGER;
-            const levelB = hierarchyGlobalDepthMap.get(b.id) ?? Number.MAX_SAFE_INTEGER;
-            if (levelA !== levelB)
-                return levelA - levelB;
-            return a.title.localeCompare(b.title);
-        });
-    }, [hierarchyRootTaskId, hierarchyDescendantIdSet, hierarchyTasks, hierarchyGlobalDepthMap]);
-    const applyHierarchySearchSelection = useCallback(() => {
-        const bestMatch = hierarchySearchMatches[0];
-        if (!bestMatch)
+        void handleRepairSync();
+    }, [handleRepairSync, workspaceSyncBusy, workspaceSyncRepairBusy]);
+    useEffect(() => {
+        if (!workspaceSyncRepairQueued)
             return;
-        setHierarchyRootTaskId(bestMatch.id);
-        setHierarchyRootSearch('');
-        if (parentTaskFilterMode === 'unlinked')
-            setParentTaskFilterMode('all');
-    }, [hierarchySearchMatches, parentTaskFilterMode, setParentTaskFilterMode]);
+        if (workspaceSyncBusy || workspaceSyncRepairBusy)
+            return;
+        void handleRepairSync();
+    }, [handleRepairSync, workspaceSyncBusy, workspaceSyncRepairBusy, workspaceSyncRepairQueued]);
     const selectedDateObj = useMemo(() => parseDateOnlyLocal(scheduleSelectedDate) || new Date(), [scheduleSelectedDate]);
     const scheduleWeekStart = useMemo(() => startOfWeek(selectedDateObj, globalWeekStartsOn), [selectedDateObj, globalWeekStartsOn]);
     const scheduleDates = useMemo(() => {
@@ -1490,99 +2153,7 @@ export function StandaloneLayout(props) {
             setScheduleBulkBusy(false);
         }
     }, [scheduleBulkBusy, expiredRecoveryCandidates, handleUpdateTask, fetchTasks]);
-    const handleScheduleParentDrop = useCallback((payload) => {
-        if (payload.targetDate < todayDateOnly) {
-            const byId = new Map(tasks.map((task) => [task.id, task]));
-            const hasNonTerminalLeaf = payload.toScheduleLeafTaskIds.some((taskId) => {
-                const task = byId.get(taskId);
-                if (!task)
-                    return true;
-                return task.status !== 'done' && task.status !== 'cancelled';
-            });
-            if (hasNonTerminalLeaf) {
-                window.alert(t('schedule.completedOnlyPastSchedule'));
-                return;
-            }
-        }
-        if (payload.toScheduleLeafTaskIds.length === 0) {
-            window.alert(t('schedule.noUnscheduledLeafTasks', { parentTitle: payload.parentTitle }));
-            return;
-        }
-        setScheduleParentDropPrompt(payload);
-    }, [tasks, todayDateOnly]);
-    const confirmScheduleParentDrop = useCallback(async () => {
-        if (!scheduleParentDropPrompt || scheduleParentDropBusy)
-            return;
-        setScheduleParentDropBusy(true);
-        try {
-            const { targetDate, toScheduleLeafTaskIds } = scheduleParentDropPrompt;
-            const dayTasks = tasks
-                .filter((task) => task.scheduledDate === targetDate && !toScheduleLeafTaskIds.includes(task.id))
-                .sort((a, b) => {
-                const orderA = typeof a.orderInDay === 'number' ? a.orderInDay : Number.MAX_SAFE_INTEGER;
-                const orderB = typeof b.orderInDay === 'number' ? b.orderInDay : Number.MAX_SAFE_INTEGER;
-                if (orderA !== orderB)
-                    return orderA - orderB;
-                return String(a.createdAt || '').localeCompare(String(b.createdAt || ''));
-            });
-            let nextOrder = dayTasks.length;
-            for (const taskId of toScheduleLeafTaskIds) {
-                await handleUpdateTask(taskId, {
-                    scheduledDate: targetDate,
-                    scheduledWeekKey: dateOnlyToIsoWeekKey(targetDate),
-                    orderInDay: nextOrder++
-                });
-            }
-            setScheduleParentDropPrompt(null);
-            await fetchTasks(true);
-        }
-        finally {
-            setScheduleParentDropBusy(false);
-        }
-    }, [scheduleParentDropPrompt, scheduleParentDropBusy, tasks, handleUpdateTask, fetchTasks]);
-    const cancelScheduleParentDrop = useCallback(() => {
-        if (scheduleParentDropBusy)
-            return;
-        setScheduleParentDropPrompt(null);
-    }, [scheduleParentDropBusy]);
-    const scheduleMonthDate = useMemo(() => {
-        const [yearRaw, monthRaw] = scheduleCalendarMonth.split('-');
-        const year = Number(yearRaw);
-        const month = Number(monthRaw);
-        if (!Number.isInteger(year) || !Number.isInteger(month) || month < 1 || month > 12) {
-            return new Date(selectedDateObj.getFullYear(), selectedDateObj.getMonth(), 1);
-        }
-        return new Date(year, month - 1, 1);
-    }, [scheduleCalendarMonth, selectedDateObj]);
-    const scheduleCalendarMonthLabel = useMemo(() => formatDate(scheduleMonthDate, { month: 'long', year: 'numeric' }, resolvedLocale), [scheduleMonthDate, resolvedLocale]);
     const scheduleWeekLabel = useMemo(() => formatDate(scheduleWeekStart, { month: 'short', day: 'numeric', year: 'numeric' }, resolvedLocale), [scheduleWeekStart, resolvedLocale]);
-    const calendarCells = useMemo(() => {
-        const start = startOfWeek(scheduleMonthDate, globalWeekStartsOn);
-        return Array.from({ length: 42 }, (_, i) => addDays(start, i));
-    }, [scheduleMonthDate, globalWeekStartsOn]);
-    const calendarTaskSignals = useMemo(() => {
-        const byDate = new Map();
-        for (const task of scheduleBaseTasks) {
-            const dateOnly = task.scheduledDate || '';
-            if (!dateOnly)
-                continue;
-            const isTerminal = task.status === 'done' || task.status === 'cancelled';
-            const isExpired = !isTerminal && dateOnly < todayDateOnly;
-            const existing = byDate.get(dateOnly);
-            if (existing) {
-                existing.count += 1;
-                if (isExpired)
-                    existing.hasExpired = true;
-            }
-            else {
-                byDate.set(dateOnly, { count: 1, hasExpired: isExpired });
-            }
-        }
-        return byDate;
-    }, [scheduleBaseTasks, todayDateOnly]);
-    const calendarWeekdayLabels = useMemo(() => (globalWeekStartsOn === 'sunday'
-        ? ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
-        : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']), [globalWeekStartsOn]);
     // Calculate columns based on grouping
     const scheduleColumns = useMemo(() => {
         const orderedKeys = globalWeekStartsOn === 'sunday'
@@ -1620,8 +2191,8 @@ export function StandaloneLayout(props) {
             case 'type':
                 return (activeTypes || []).map(t => ({
                     ...t,
-                    icon: TypeMeta[t.value]?.icon,
-                    color: TypeMeta[t.value]?.color
+                    icon: t.icon || TypeMeta[t.value]?.icon,
+                    color: t.color || TypeMeta[t.value]?.color
                 }));
             case 'priority':
                 return priorities;
@@ -1636,159 +2207,718 @@ export function StandaloneLayout(props) {
             case 'approach':
                 return approaches;
             case 'assignee':
-                return [
-                    { value: 'agent', label: 'AI', icon: 'Bot', color: '#8b5cf6' },
-                    { value: 'user', label: 'User', icon: 'User', color: '#22c55e' },
-                    { value: 'unassigned', label: 'Unassigned', icon: 'Circle', color: '#64748b' }
-                ];
+                return assigneeOptions.map((option) => ({
+                    value: option.value,
+                    label: option.label,
+                    icon: option.icon === 'HelpCircle' ? 'Circle' : option.icon,
+                    color: option.color,
+                }));
             case 'status':
                 return [
-                    { value: 'task', label: 'To Do', icon: 'Circle', color: 'blue-200' },
-                    { value: 'on-hold', label: 'Blocked', icon: 'Pause', color: 'amber-500' },
-                    { value: 'in-progress', label: 'In Progress', icon: 'Play', color: 'blue-500' },
-                    { value: 'review', label: 'Ready for Review', icon: 'Sparkles', color: 'violet-500' },
-                    { value: 'completed', label: 'Completed', icon: 'Check', color: 'green-500' }
+                    ...STATUS_OPTIONS.filter((option) => option.value !== 'done' && option.value !== 'cancelled'),
+                    {
+                        value: 'completed',
+                        label: 'Completed',
+                        icon: getStatusDefinition('done').icon,
+                        color: getStatusDefinition('done').color
+                    }
                 ];
-            case 'hierarchy': {
-                if (parentTaskFilterMode === 'unlinked') {
-                    return [{
-                            value: 'standalone',
-                            label: 'Unlinked',
-                            icon: 'Circle',
-                            color: '#64748b'
-                        }];
+            case 'schedule':
+                return scheduleColumns;
+            default:
+                return activeCategories;
+        }
+    }, [groupBy, activeCategories, activeTypes, priorities, approaches, assigneeOptions, scheduleColumns]);
+    // === SECTION: AccountMenuControl ===
+    // Not extracted: ~25 distinct props from local state would be needed.
+    // References: isAuthenticated, authIdentityLabel, billingStatus, runtimeLabel,
+    // connectedEnvironmentLabel, canManageCloudWorkspaces, workspaceActionBusy,
+    // setWorkspacePanelOpen, canOpenTeamManagement, openTeamManagementModal, and more.
+    const accountMenuControl = (_jsxs("div", { className: accountStyles.accountMenuWrap, ref: accountMenuRef, children: [_jsx("button", { className: `tf-control-icon ${accountStyles.avatarBtn}`, onClick: () => setShowAccountMenu(prev => !prev), title: isAuthenticated ? 'Account' : 'Account (Not signed in)', "aria-label": isAuthenticated ? 'Account' : 'Account (Not signed in)', "aria-haspopup": "menu", "aria-expanded": showAccountMenu, children: _jsx("span", { className: accountStyles.avatarBadge, "aria-hidden": "true", children: isAuthenticated ? accountBadgeInitial : '?' }) }), showAccountMenu && (_jsxs("div", { className: accountStyles.accountMenu, role: "menu", "aria-label": "Account menu", children: [_jsxs("div", { className: accountStyles.accountMenuSection, children: [_jsx("div", { className: accountStyles.accountMenuSectionLabel, children: "Account" }), _jsx("div", { className: accountStyles.accountMenuHint, children: isAuthBootstrapPending
+                                    ? 'Checking sign-in status...'
+                                    : isAuthenticated
+                                        ? (_jsx(_Fragment, { children: hasAuthIdentity
+                                                ? (_jsx(_Fragment, { children: _jsxs("span", { className: accountStyles.accountIdentityBlock, children: [_jsx("span", { className: accountStyles.accountIdentityEmail, children: authIdentityLabel }), hasAuthEmail && authDisplayName && (_jsxs("span", { className: accountStyles.accountIdentityMetaLine, children: [_jsx("span", { className: accountStyles.accountIdentityMetaLabel, children: "Email" }), _jsx("span", { className: accountStyles.accountIdentityMetaValue, children: authEmailLabel })] })), hasSubscription && (_jsxs("button", { "aria-label": `Subscription ${subscriptionLabel}`, className: `${accountStyles.accountIdentityMetaLine} ${accountStyles.accountIdentityMetaAction}`, onClick: () => {
+                                                                    setShowAccountMenu(false);
+                                                                    openPlansScreen();
+                                                                }, type: "button", children: [_jsx("span", { className: accountStyles.accountIdentityMetaLabel, children: "Subscription" }), _jsx("span", { className: accountStyles.accountIdentityMetaValue, children: subscriptionLabel })] })), _jsxs("span", { className: accountStyles.accountIdentityMetaLine, children: [_jsx("span", { className: accountStyles.accountIdentityMetaLabel, children: "Runtime" }), _jsx("span", { className: accountStyles.accountIdentityMetaValue, children: runtimeLabel })] }), _jsxs("span", { className: accountStyles.accountIdentityMetaLine, children: [_jsx("span", { className: accountStyles.accountIdentityMetaLabel, children: "Environment" }), _jsx("span", { className: accountStyles.accountIdentityMetaValue, children: connectedEnvironmentLabel })] })] }) }))
+                                                : 'Signed in' }))
+                                        : 'Not signed in' })] }), canManageCloudWorkspaces && (_jsxs("div", { className: accountStyles.accountMenuSection, children: [_jsx("div", { className: accountStyles.accountMenuSectionLabel, children: "Workspaces (Owned + Invited)" }), availableWorkspaces.length === 0 && (_jsx("div", { className: accountStyles.accountMenuHint, children: "No workspaces found for this account yet." })), availableWorkspaces.map((workspace) => (_jsxs("button", { className: `${accountStyles.accountMenuItem} ${workspace.id === currentWorkspaceId ? accountStyles.accountMenuItemActive : ''}`, onClick: () => handleSwitchWorkspace(workspace.id), role: "menuitem", disabled: workspaceActionBusy || workspace.id === currentWorkspaceId, title: workspace.description || workspace.name, children: [_jsx(Folder, { size: 15 }), _jsxs("span", { style: { display: 'flex', flexDirection: 'column', gap: '2px' }, children: [_jsx("span", { children: workspace.name }), _jsx("span", { className: accountStyles.accountMenuMeta, children: workspace.role })] })] }, workspace.id))), _jsxs("button", { className: accountStyles.accountMenuItem, onClick: () => {
+                                    setWorkspaceActionError('');
+                                    setShowCreateWorkspaceConfirm(true);
+                                    setShowAccountMenu(false);
+                                }, role: "menuitem", disabled: workspaceActionBusy, children: [_jsx(Plus, { size: 15 }), "Create Workspace"] }), workspaceActionError && (_jsx("div", { className: accountStyles.accountMenuError, children: workspaceActionError }))] })), canOpenTeamManagement && (_jsxs("button", { className: accountStyles.accountMenuItem, onClick: () => { void openTeamManagementModal(); }, role: "menuitem", children: [_jsx(Users, { size: 15 }), "Team Management"] })), isAuthenticated && (_jsxs("button", { className: accountStyles.accountMenuItem, onClick: () => {
+                            setShowAccountMenu(false);
+                            setShowEditProfileModal(true);
+                        }, role: "menuitem", children: [_jsx(User, { size: 15 }), "Edit Profile"] })), _jsxs("button", { className: accountStyles.accountMenuItem, onClick: () => {
+                            setShowAccountMenu(false);
+                            openPlansScreen();
+                        }, role: "menuitem", children: [_jsx(Layers, { size: 15 }), "Plans"] }), _jsxs("button", { className: accountStyles.accountMenuItem, onClick: () => {
+                            setShowAccountMenu(false);
+                            setShowAccountHub(true);
+                        }, role: "menuitem", children: [_jsx(User, { size: 15 }), "Account Hub"] }), _jsxs("button", { className: accountStyles.accountMenuItem, onClick: () => {
+                            setShowAccountMenu(false);
+                            setShowHelpModal(true);
+                        }, role: "menuitem", children: [_jsx(HelpCircle, { size: 15 }), "Help & Tutorial"] }), runtimeMode === 'local' && !isAuthenticated && !isAuthBootstrapPending && (_jsxs("button", { className: accountStyles.accountMenuItem, onClick: () => {
+                            openSharedLoginRoute('login');
+                        }, role: "menuitem", children: [_jsx(User, { size: 15 }), "Sign In / Register"] })), isAuthenticated && (_jsxs("button", { className: accountStyles.accountMenuItem, onClick: async () => {
+                            setShowAccountMenu(false);
+                            await logout();
+                        }, role: "menuitem", children: [_jsx(LogOut, { size: 15 }), "Sign Out"] }))] }))] }));
+    const cycleEmptyColumnVisibility = useCallback(() => {
+        setEmptyColumnMode((prev) => {
+            if (prev === 'show')
+                return 'collapse';
+            if (prev === 'collapse')
+                return 'hide';
+            return 'show';
+        });
+    }, [setEmptyColumnMode]);
+    const openAddTaskModal = useCallback(() => {
+        resetForm();
+        setActiveWorkspaceModule('tasks');
+        setActiveTab('add');
+    }, [resetForm, setActiveTab, setActiveWorkspaceModule]);
+    const openAddTaskModalForWorkstream = useCallback((workstreamId) => {
+        const workstream = props.workstreams.find((item) => item.id === workstreamId);
+        resetForm();
+        setWorkstreamInput(formatWorkstreamReference(workstream) || workstreamId);
+        setActiveWorkspaceModule('tasks');
+        setActiveTab('add');
+    }, [props.workstreams, resetForm, setActiveTab, setActiveWorkspaceModule, setWorkstreamInput]);
+    const openPlanningEditor = useCallback((editor) => {
+        setPlanningEditor(editor);
+        setPlanningPrimaryCollapsed(false);
+        setPlanningSecondaryEditor(null);
+        setPlanningSecondaryCollapsed(false);
+        setPlanningDraftTitle('');
+        setPlanningDraftDescription('');
+        setPlanningDraftOwner('');
+        const selectedInitiative = editor.entityType === 'workstream' && selectedPlanningInitiativeId
+            ? planningStructure.initiativeById.get(selectedPlanningInitiativeId) || null
+            : null;
+        setPlanningDraftInitiativeId(selectedInitiative ? formatInitiativeReference(selectedInitiative) : '');
+        setPlanningNestedWorkstreamDetailId(null);
+    }, [planningStructure.initiativeById, selectedPlanningInitiativeId]);
+    const openPlanningSecondaryEditor = useCallback((editor, initiativeId) => {
+        setPlanningSecondaryEditor(editor);
+        setPlanningSecondaryCollapsed(false);
+        setPlanningDraftTitle('');
+        setPlanningDraftDescription('');
+        setPlanningDraftOwner('');
+        const selectedInitiative = editor.entityType === 'workstream'
+            ? ((initiativeId ? planningStructure.initiativeById.get(initiativeId) : null)
+                || (selectedPlanningInitiativeId ? planningStructure.initiativeById.get(selectedPlanningInitiativeId) || null : null))
+            : null;
+        setPlanningDraftInitiativeId(selectedInitiative ? formatInitiativeReference(selectedInitiative) : '');
+        setPlanningNestedWorkstreamDetailId(null);
+    }, [planningStructure.initiativeById, selectedPlanningInitiativeId]);
+    const closePlanningEditor = useCallback(() => {
+        setPlanningEditor(null);
+        setPlanningDraftTitle('');
+        setPlanningDraftDescription('');
+        setPlanningDraftOwner('');
+        setPlanningDraftInitiativeId('');
+    }, []);
+    const closePlanningSecondaryEditor = useCallback(() => {
+        setPlanningSecondaryEditor(null);
+        setPlanningDraftTitle('');
+        setPlanningDraftDescription('');
+        setPlanningDraftOwner('');
+        setPlanningDraftInitiativeId('');
+    }, []);
+    const submitPlanningEditor = useCallback(async () => {
+        const activeEditor = planningSecondaryEditor || planningEditor;
+        if (!activeEditor)
+            return;
+        const isSecondaryEditor = Boolean(planningSecondaryEditor);
+        const ownerId = planningDraftOwner.trim() || null;
+        try {
+            if (activeEditor.entityType === 'initiative') {
+                if (activeEditor.mode === 'edit') {
+                    await props.updateInitiative(activeEditor.targetId, {
+                        title: planningDraftTitle.trim() || 'Untitled Initiative',
+                        description: planningDraftDescription.trim() || null,
+                        ownerId,
+                    });
+                    setPlanningDrawerDetail({ type: 'initiative', id: activeEditor.targetId });
+                    setPlanningNestedWorkstreamDetailId(null);
+                    pushNotice('Initiative updated', 'success');
                 }
-                const levels = Array.from({ length: hierarchyDepthTasks.length > 0 ? maxHierarchyDepth + 1 : 0 }, (_, index) => index + 1);
-                const hierarchyColumns = levels.map((level) => ({
-                    value: level,
-                    label: `Level ${level}`,
-                    icon: 'Layers',
-                    color: level === 1 ? '#3b82f6' : '#64748b'
-                }));
-                if (parentTaskFilterMode === 'all' && hierarchyShowUnlinkedColumn) {
-                    hierarchyColumns.push({
-                        value: 'standalone',
-                        label: 'Unlinked',
-                        icon: 'Circle',
-                        color: '#64748b'
+                else {
+                    const created = await props.createInitiative({
+                        title: planningDraftTitle.trim() || 'Untitled Initiative',
+                        description: planningDraftDescription.trim() || null,
+                        ownerId,
                     });
+                    setPlanningDrawerDetail({ type: 'initiative', id: created.id });
+                    setPlanningNestedWorkstreamDetailId(null);
+                    pushNotice('Initiative created', 'success');
                 }
-                return hierarchyColumns;
             }
-            case 'schedule':
-                return scheduleColumns;
+            else {
+                const nextInitiativeRaw = planningDraftInitiativeId.trim();
+                const resolvedInitiative = nextInitiativeRaw.length === 0
+                    ? null
+                    : resolveInitiativeReference(planningStructure.initiatives, nextInitiativeRaw);
+                if (nextInitiativeRaw.length > 0 && !resolvedInitiative) {
+                    pushNotice('Initiative not found by that reference.', 'error');
+                    return;
+                }
+                const patch = {
+                    title: planningDraftTitle.trim() || 'Untitled Workstream',
+                    description: planningDraftDescription.trim() || null,
+                    ownerId,
+                    initiativeId: resolvedInitiative?.id || null,
+                };
+                if (activeEditor.mode === 'edit') {
+                    await props.updateWorkstream(activeEditor.targetId, patch);
+                    if (isSecondaryEditor) {
+                        setPlanningNestedWorkstreamDetailId(activeEditor.targetId);
+                    }
+                    else {
+                        setPlanningDrawerDetail({ type: 'workstream', id: activeEditor.targetId });
+                        setPlanningNestedWorkstreamDetailId(null);
+                    }
+                    pushNotice('Workstream updated', 'success');
+                }
+                else {
+                    const created = await props.createWorkstream(patch);
+                    if (isSecondaryEditor) {
+                        setPlanningNestedWorkstreamDetailId(created.id);
+                    }
+                    else {
+                        setPlanningDrawerDetail({ type: 'workstream', id: created.id });
+                        setPlanningNestedWorkstreamDetailId(null);
+                    }
+                    pushNotice('Workstream created', 'success');
+                }
+            }
+            if (isSecondaryEditor) {
+                closePlanningSecondaryEditor();
+            }
+            else {
+                closePlanningEditor();
+            }
+        }
+        catch (error) {
+            pushNotice(error instanceof Error ? error.message : 'Failed to save planning item.', 'error');
+        }
+    }, [
+        closePlanningEditor,
+        closePlanningSecondaryEditor,
+        planningDraftDescription,
+        planningDraftInitiativeId,
+        planningDraftOwner,
+        planningDraftTitle,
+        planningEditor,
+        planningSecondaryEditor,
+        planningStructure.initiatives,
+        props,
+        pushNotice,
+    ]);
+    const togglePlanningInitiative = useCallback((initiativeId) => {
+        setExpandedPlanningInitiativeIds((current) => {
+            const next = new Set(current);
+            if (next.has(initiativeId)) {
+                next.delete(initiativeId);
+            }
+            else {
+                next.add(initiativeId);
+            }
+            return next;
+        });
+    }, []);
+    const selectPlanningInitiative = useCallback((initiativeId) => {
+        setSelectedPlanningInitiativeId((current) => current === initiativeId ? '' : initiativeId);
+        setSelectedPlanningWorkstreamId('');
+    }, []);
+    const selectPlanningWorkstream = useCallback((workstreamId, initiativeId) => {
+        setSelectedPlanningWorkstreamId((current) => {
+            const nextWorkstreamId = current === workstreamId ? '' : workstreamId;
+            setSelectedPlanningInitiativeId(nextWorkstreamId ? (initiativeId || '') : '');
+            return nextWorkstreamId;
+        });
+    }, []);
+    const openInitiativeDetails = useCallback((initiativeId) => {
+        setPlanningEditor(null);
+        setPlanningSecondaryEditor(null);
+        setPlanningPrimaryCollapsed(false);
+        setPlanningSecondaryCollapsed(false);
+        setPlanningDrawerDetail(initiativeId ? { type: 'initiative', id: initiativeId } : null);
+        setPlanningNestedWorkstreamDetailId(null);
+    }, []);
+    const openWorkstreamDetails = useCallback((workstreamId) => {
+        setPlanningEditor(null);
+        setPlanningSecondaryEditor(null);
+        setPlanningPrimaryCollapsed(false);
+        setPlanningSecondaryCollapsed(false);
+        setPlanningDrawerDetail(workstreamId ? { type: 'workstream', id: workstreamId } : null);
+        setPlanningNestedWorkstreamDetailId(null);
+    }, []);
+    const openNestedWorkstreamDetails = useCallback((workstreamId) => {
+        setPlanningSecondaryEditor(null);
+        setPlanningSecondaryCollapsed(false);
+        setPlanningNestedWorkstreamDetailId(workstreamId);
+    }, []);
+    const ownerValueByLabel = useMemo(() => {
+        const map = new Map();
+        assigneeOptions.forEach((option) => {
+            map.set(option.label, String(option.value));
+        });
+        return map;
+    }, [assigneeOptions]);
+    const openPlanningCreateEditor = useCallback((type, initiativeId) => {
+        if (type === 'workstream' && initiativeId) {
+            openPlanningSecondaryEditor({ mode: 'create', entityType: 'workstream' }, initiativeId);
+            return;
+        }
+        openPlanningEditor({ mode: 'create', entityType: type });
+        if (type === 'workstream') {
+            const initiative = (initiativeId ? planningStructure.initiativeById.get(initiativeId) : null)
+                || (selectedPlanningInitiativeId ? planningStructure.initiativeById.get(selectedPlanningInitiativeId) : null)
+                || null;
+            setPlanningDraftInitiativeId(initiative ? formatInitiativeReference(initiative) : '');
+        }
+    }, [openPlanningEditor, openPlanningSecondaryEditor, planningStructure.initiativeById, selectedPlanningInitiativeId]);
+    const openPlanningEditDialog = useCallback((type, id) => {
+        if (type === 'initiative') {
+            const item = planningStructure.initiativeById.get(id);
+            if (!item)
+                return;
+            setPlanningEditor({ mode: 'edit', entityType: 'initiative', targetId: id });
+            setPlanningDraftTitle(item.title);
+            setPlanningDraftDescription(item.description || '');
+            setPlanningDraftOwner(item.ownerLabel ? (ownerValueByLabel.get(item.ownerLabel) || '') : '');
+            setPlanningDraftInitiativeId('');
+        }
+        else {
+            const item = planningStructure.workstreamById.get(id)
+                || planningStructure.standaloneWorkstreams.find((workstream) => workstream.id === id);
+            if (!item)
+                return;
+            setPlanningEditor({ mode: 'edit', entityType: 'workstream', targetId: id });
+            setPlanningDraftTitle(item.title);
+            setPlanningDraftDescription(item.description || '');
+            setPlanningDraftOwner(item.ownerLabel ? (ownerValueByLabel.get(item.ownerLabel) || '') : '');
+            const initiative = item.initiativeId ? planningStructure.initiativeById.get(item.initiativeId) || null : null;
+            setPlanningDraftInitiativeId(initiative ? formatInitiativeReference(initiative) : '');
+        }
+        setPlanningNestedWorkstreamDetailId(null);
+    }, [ownerValueByLabel, planningStructure.initiativeById, planningStructure.standaloneWorkstreams, planningStructure.workstreamById]);
+    const handleAssignInitiativeToWorkstream = useCallback(async (workstreamId, initiativeReferenceOverride) => {
+        const workstream = props.workstreams.find((item) => item.id === workstreamId);
+        if (!workstream) {
+            pushNotice('Workstream not found.', 'error');
+            return;
+        }
+        const nextInitiativeRaw = typeof initiativeReferenceOverride === 'string'
+            ? initiativeReferenceOverride.trim()
+            : initiativeReferenceOverride === null
+                ? ''
+                : planningDraftInitiativeId.trim();
+        const resolvedInitiative = nextInitiativeRaw.length === 0
+            ? null
+            : resolveInitiativeReference(planningStructure.initiatives, nextInitiativeRaw);
+        if (nextInitiativeRaw.length > 0 && !resolvedInitiative) {
+            pushNotice('Initiative not found by that reference.', 'error');
+            return;
+        }
+        const normalizedParentId = resolvedInitiative?.id || null;
+        if ((workstream.initiativeId || null) === normalizedParentId) {
+            pushNotice(normalizedParentId ? 'Workstream already belongs to that initiative.' : 'Workstream is already standalone.', 'info');
+            return;
+        }
+        try {
+            await props.updateWorkstream(workstreamId, { initiativeId: normalizedParentId });
+            setPlanningDraftInitiativeId(resolvedInitiative ? formatInitiativeReference(resolvedInitiative) : '');
+            pushNotice(normalizedParentId ? 'Initiative set' : 'Initiative removed', 'success');
+        }
+        catch {
+            pushNotice('Failed to set initiative.', 'error');
+        }
+    }, [planningDraftInitiativeId, planningStructure.initiatives, props, pushNotice]);
+    const handleAssignTaskToWorkstream = useCallback(async (taskId, workstreamId) => {
+        const task = hierarchyTaskById.get(taskId);
+        if (!task) {
+            pushNotice('Task not found.', 'error');
+            return;
+        }
+        const normalizedWorkstreamId = workstreamId || null;
+        if (planningStructure.initiativeById.has(taskId) || planningStructure.workstreamById.has(taskId)) {
+            pushNotice('Only execution tasks can be moved into workstreams.', 'error');
+            return;
+        }
+        if (normalizedWorkstreamId && !planningStructure.workstreamById.has(normalizedWorkstreamId)) {
+            pushNotice('Workstream not found.', 'error');
+            return;
+        }
+        if ((task.workstreamId || null) === normalizedWorkstreamId) {
+            pushNotice(normalizedWorkstreamId ? 'Task already belongs to that workstream.' : 'Task is already standalone.', 'info');
+            return;
+        }
+        try {
+            const res = await fetch(`/api/taskforce/task/${taskId}`, {
+                method: 'PATCH',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ workstreamId: normalizedWorkstreamId })
+            });
+            if (!res.ok) {
+                const data = await res.json().catch(() => ({}));
+                pushNotice(data?.error || 'Failed to set workstream.', 'error');
+                return;
+            }
+            await res.json().catch(() => null);
+            await fetchTasks(true);
+            pushNotice(normalizedWorkstreamId ? 'Workstream set' : 'Workstream removed', 'success');
+        }
+        catch {
+            pushNotice('Failed to set workstream.', 'error');
+        }
+    }, [fetchTasks, hierarchyTaskById, planningStructure.initiativeById, planningStructure.workstreamById, pushNotice]);
+    const handleAttachTaskToWorkstreamByReference = useCallback(async (workstreamId, taskReference) => {
+        const needle = taskReference.trim();
+        if (!needle) {
+            pushNotice('Enter a task reference.', 'error');
+            return;
+        }
+        const parsedReference = parseTaskReference(needle);
+        const matchedTask = hierarchyTasks.find((task) => (task.id === needle
+            || getTaskReferenceLabel(task) === needle
+            || (parsedReference !== null && task.referenceNumber === parsedReference)));
+        if (!matchedTask) {
+            pushNotice('Task not found by that reference.', 'error');
+            return;
+        }
+        await handleAssignTaskToWorkstream(matchedTask.id, workstreamId);
+    }, [handleAssignTaskToWorkstream, hierarchyTasks, pushNotice]);
+    const handleAttachWorkstreamToInitiativeByReference = useCallback(async (initiativeId, workstreamReference) => {
+        const needle = workstreamReference.trim();
+        if (!needle) {
+            pushNotice('Enter a workstream reference.', 'error');
+            return;
+        }
+        const initiative = planningStructure.initiativeById.get(initiativeId);
+        if (!initiative) {
+            pushNotice('Initiative not found.', 'error');
+            return;
+        }
+        const parsedReference = parseWorkstreamReference(needle);
+        const matchedWorkstream = props.workstreams.find((workstream) => (workstream.id === needle
+            || formatWorkstreamReference(workstream) === needle
+            || (parsedReference !== null && workstream.referenceNumber === parsedReference)));
+        if (!matchedWorkstream) {
+            pushNotice('Workstream not found by that reference.', 'error');
+            return;
+        }
+        await handleAssignInitiativeToWorkstream(matchedWorkstream.id, formatInitiativeReference(initiative));
+    }, [handleAssignInitiativeToWorkstream, planningStructure.initiativeById, props.workstreams, pushNotice]);
+    const handleInitiativeFilterChange = useCallback((initiativeId) => {
+        setSelectedPlanningInitiativeId(initiativeId);
+        setSelectedPlanningWorkstreamId('');
+    }, []);
+    const handleWorkstreamFilterChange = useCallback((workstreamId) => {
+        setSelectedPlanningWorkstreamId(workstreamId);
+        setSelectedPlanningInitiativeId(workstreamId ? planningStructure.workstreamInitiativeIds.get(workstreamId) || '' : '');
+    }, [planningStructure.workstreamInitiativeIds]);
+    const handleModuleChange = useCallback((nextModuleId) => {
+        const nextModule = resolveWorkspaceModule(nextModuleId, workspaceModules);
+        if (nextModule !== nextModuleId) {
+            const unavailableLabel = workspaceModules.find((module) => module.id === nextModuleId)?.label || 'That module';
+            pushNotice(`${unavailableLabel} is not available in this build yet.`, 'error');
+            return;
+        }
+        setActiveWorkspaceModule(nextModule);
+    }, [
+        pushNotice,
+        setActiveWorkspaceModule,
+        workspaceModules,
+    ]);
+    const handlePlanningToolToggle = useCallback(() => {
+        if (resolvedWorkspaceModule === 'tasks' && planningDrawerOpen) {
+            setPlanningDrawerOpen(false);
+            setPlanningDrawerDetail(null);
+            setPlanningNestedWorkstreamDetailId(null);
+            setPlanningEditor(null);
+            return;
+        }
+        if (resolvedWorkspaceModule !== 'tasks') {
+            setActiveWorkspaceModule('tasks');
+            setPlanningDrawerOpen(true);
+            return;
+        }
+        setPlanningDrawerOpen((current) => !current);
+    }, [planningDrawerOpen, resolvedWorkspaceModule, setActiveWorkspaceModule]);
+    const handleBackToTaskFromAnnotatedAttachment = useCallback((taskId) => {
+        setActiveWorkspaceModule('tasks');
+        handleOpenTaskById(taskId);
+    }, [handleOpenTaskById, setActiveWorkspaceModule]);
+    const handleAnnotatedAttachmentOpenTarget = useCallback((target, options) => {
+        setRequestedAnnotatedTarget(target);
+        setRequestedAnnotatedSessionId(options?.sessionId ?? null);
+        setRequestedAnnotatedOpenVersion((current) => current + 1);
+        setActiveWorkspaceModule('annotate');
+    }, [setActiveWorkspaceModule]);
+    const handleAnnotatedAttachmentContextChange = useCallback(({ target, sessionId }) => {
+        setRequestedAnnotatedTarget((current) => {
+            if (!current && !target)
+                return current;
+            if (current
+                && target
+                && current.taskId === target.taskId
+                && current.taskReferenceLabel === target.taskReferenceLabel
+                && current.assetId === target.assetId
+                && current.imageReferenceLabel === target.imageReferenceLabel
+                && current.path === target.path
+                && current.displayName === target.displayName) {
+                return current;
+            }
+            return target;
+        });
+        setRequestedAnnotatedSessionId((current) => (current === sessionId ? current : sessionId));
+    }, []);
+    const sortOptions = useMemo(() => [
+        { value: 'created', label: t('standalone.sortCreated') },
+        { value: 'updated', label: t('standalone.sortUpdated') },
+        { value: 'priority', label: t('standalone.sortPriority') },
+        { value: 'complexity', label: t('standalone.sortComplexity') },
+        ...buildCustomTaxonomySortOptions(taxonomies, [...props.searchAgnosticTasks, ...archivedScopeAllTasks])
+    ], [archivedScopeAllTasks, props.searchAgnosticTasks, taxonomies]);
+    const groupingOptions = useMemo(() => [
+        { value: 'category', label: t('standalone.groupCategory') },
+        { value: 'type', label: t('standalone.groupType') },
+        { value: 'priority', label: t('standalone.groupPriority') },
+        { value: 'complexity', label: t('standalone.groupComplexity') },
+        { value: 'assignee', label: t('standalone.groupAssignee') },
+        { value: 'status', label: t('standalone.groupStatus') },
+        { value: 'schedule', label: t('standalone.groupSchedule') },
+    ], []);
+    const workspaceToolModules = useMemo(() => workspaceModules.filter((module) => module.enabled), [workspaceModules]);
+    const taskDisplayActions = useMemo(() => {
+        const actions = [
+            {
+                key: 'empty-columns',
+                icon: emptyColumnMode === 'show'
+                    ? _jsx(Maximize2, { size: 16 })
+                    : emptyColumnMode === 'collapse'
+                        ? _jsx(Minimize2, { size: 16 })
+                        : _jsx(EyeOff, { size: 16 }),
+                title: emptyColumnMode === 'show'
+                    ? t('standalone.showEmptyColumns')
+                    : emptyColumnMode === 'collapse'
+                        ? t('standalone.compressEmptyColumns')
+                        : t('standalone.hideEmptyColumns'),
+                onClick: cycleEmptyColumnVisibility,
+                active: emptyColumnMode !== 'show',
+            },
+            {
+                key: 'compressed-cards',
+                icon: compressedCards ? _jsx(ChevronsDown, { size: 16 }) : _jsx(ChevronsUp, { size: 16 }),
+                title: compressedCards ? t('standalone.expandCards') : t('standalone.compressCards'),
+                onClick: () => setCompressedCards(!compressedCards),
+                active: compressedCards,
+            },
+        ];
+        return actions;
+    }, [
+        compressedCards,
+        cycleEmptyColumnVisibility,
+        emptyColumnMode,
+    ]);
+    const universalFilterActions = useMemo(() => [{
+            key: 'filter-toggle',
+            icon: _jsx(Filter, { size: 16 }),
+            title: t('standalone.toggleFilters'),
+            onClick: () => setShowFilters(!showFilters),
+            active: showFilters,
+            className: hasActiveWorkspaceFilterControls ? styles.filterGlow : '',
+        }], [hasActiveWorkspaceFilterControls, setShowFilters, showFilters]);
+    const workspaceFilterBar = useMemo(() => {
+        switch (workspaceChromeDefinition.filterBar.kind) {
+            case 'task-filters':
+                return (_jsx(FilterToolbar, { categoryFilterOptions: categoryFilterOptions, typeFilterOptions: typeFilterOptions, priorities: priorities, taxonomyDisplayLabels: taxonomyDisplayLabels, filterCategories: filterCategories, setFilterCategories: setFilterCategories, filterTypes: filterTypes, setFilterTypes: setFilterTypes, filterPriorities: filterPriorities, setFilterPriorities: setFilterPriorities, filterStatus: filterStatus, setFilterStatus: setFilterStatus, filterAssignees: filterAssignees, setFilterAssignees: setFilterAssignees, assigneeOptions: assigneeOptions, initiativeFilterOptions: initiativeFilterOptions, selectedInitiativeId: selectedPlanningInitiativeId, setSelectedInitiativeId: handleInitiativeFilterChange, workstreamFilterOptions: workstreamFilterOptions, selectedWorkstreamId: selectedPlanningWorkstreamId, setSelectedWorkstreamId: handleWorkstreamFilterChange, taskScope: taskScope, setTaskScope: setTaskScope, showArchive: showArchive, setShowArchive: setShowArchive, fetchArchive: fetchArchive, onDeleteAllDeleted: () => {
+                        const deletedCount = deletedScopeAllTasks.length;
+                        if (deletedCount === 0)
+                            return;
+                        const confirmed = window.confirm(`Permanently delete ${deletedCount} deleted task${deletedCount === 1 ? '' : 's'}? This cannot be undone.`);
+                        if (!confirmed)
+                            return;
+                        void handleEmptyDeletedTasks();
+                    }, clearFilters: () => {
+                        clearFilters();
+                        setSelectedPlanningInitiativeId('');
+                        setSelectedPlanningWorkstreamId('');
+                    } }));
+            case 'document-filters':
+                return (_jsx(DocumentFilterToolbar, { typeFilters: documentTypeFilters, setTypeFilters: setDocumentTypeFilters, attachmentFilters: documentAttachmentFilters, setAttachmentFilters: setDocumentAttachmentFilters, clearFilters: () => {
+                        setDocumentTypeFilters(DOCUMENT_TYPE_FILTER_OPTIONS.map((option) => option.value));
+                        setDocumentAttachmentFilters(DOCUMENT_ATTACHMENT_FILTER_OPTIONS.map((option) => option.value));
+                    } }));
+            case 'empty':
             default:
-                return activeCategories;
+                return _jsx(EmptyWorkspaceFilterBar, {});
         }
-    }, [groupBy, activeCategories, activeTypes, priorities, approaches, maxHierarchyDepth, parentTaskFilterMode, scheduleColumns, hierarchyDepthTasks.length, hierarchyShowUnlinkedColumn]);
-    return (_jsxs("div", { className: `${styles.standaloneWrapper} ${zenMode ? styles.zenModeEnabled : ''}`, "data-theme": currentTheme, children: [_jsxs("div", { className: `${styles.header} ${styles.standaloneHeader} `, children: [_jsxs("div", { className: `${styles.headerTitle} ${styles.standaloneTitle}`, children: [_jsx("img", { src: logo, alt: "Taskforce Logo", className: styles.brandIcon, onError: (e) => {
-                                    const target = e.currentTarget;
-                                    if (target.src !== favicon) {
-                                        target.src = favicon;
-                                    }
-                                    else {
-                                        target.style.display = 'none';
-                                    }
-                                } }), _jsx("span", { children: "TaskForce" }), projectName && (_jsxs(_Fragment, { children: [_jsx("span", { className: styles.projectSlash, children: "/" }), _jsx("span", { className: styles.projectName, title: `Workspace ID: ${currentWorkspaceId}`, children: projectName })] })), _jsx("span", { className: styles.taskCountBadge, title: activeCountTitle, children: activeCountLabel }), shouldShowSyncStatus && (_jsx("button", { className: styles.headerActionBtn, onClick: () => setShowSyncStatusModal(true), title: `Cloud sync status: ${headerSyncStatusMeta.label} | Pull: ${formattedLastPullTime} | Push: ${formattedLastPushTime}${realtimeSyncEnabled ? ` | Realtime: ${realtimeConnectionState} (${realtimeSyncFlagSource}) dup=${realtimeTelemetry.duplicateDiscarded} ooo=${realtimeTelemetry.outOfOrderDiscarded} invalid=${realtimeTelemetry.invalidDiscarded}` : ''}`, style: {
-                                    marginLeft: '6px',
-                                    height: '24px',
-                                    width: '24px',
-                                    padding: 0,
-                                    borderRadius: '999px',
-                                    border: `1px solid ${headerSyncStatusMeta.border}`,
-                                    background: headerSyncStatusMeta.background,
-                                    color: headerSyncStatusMeta.color,
-                                    display: 'inline-flex',
-                                    alignItems: 'center',
-                                    justifyContent: 'center'
-                                }, children: headerSyncStatusMeta.icon === 'off' ? (_jsx(CloudOff, { size: 12 })) : (_jsx(Cloud, { size: 12 })) })), props.loadingTasks && (_jsx("div", { style: { marginLeft: '8px', display: 'flex', alignItems: 'center' }, children: _jsx(Loader2, { size: 14, className: styles.spinner }) })), successBanner && (_jsxs("div", { className: styles.headerSuccess, children: [_jsx(Check, { size: 14 }), _jsx("span", { children: successBanner.message })] }))] }), _jsxs("div", { className: styles.headerActions, style: { gap: '16px' }, children: [_jsxs("div", { className: styles.searchContainer, style: { width: '240px' }, children: [_jsx(Search, { size: 16, className: styles.searchIcon }), _jsx("input", { type: "text", className: `${styles.searchInput} ${hasSearchFilter ? styles.searchActive : ''}`, placeholder: t('standalone.searchPlaceholder'), value: searchQuery, onChange: (e) => setSearchQuery(e.target.value) }), searchQuery && (_jsx("button", { className: styles.clearSearchBtn, onClick: () => setSearchQuery(''), title: t('standalone.clearSearchTitle'), children: _jsx(X, { size: 14 }) }))] }), _jsxs("div", { className: styles.groupByContainer, children: [_jsxs("span", { className: styles.groupByLabel, children: [_jsx(ArrowUpDown, { size: 12 }), " ", t('standalone.sortLabel')] }), _jsxs("select", { className: `${styles.select} ${styles.groupBySelect} `, value: sortBy, onChange: (e) => setSortBy(e.target.value), children: [_jsx("option", { value: "created", children: t('standalone.sortCreated') }), _jsx("option", { value: "updated", children: t('standalone.sortUpdated') }), _jsx("option", { value: "priority", children: t('standalone.sortPriority') }), _jsx("option", { value: "complexity", children: t('standalone.sortComplexity') })] }), _jsx("button", { className: `${styles.headerActionBtn} ${styles.sortDirectionBtn}`, onClick: () => props.toggleSortOrder(), title: props.sortOrder === 'desc' ? t('standalone.sortDirectionDescTitle') : t('standalone.sortDirectionAscTitle'), children: props.sortOrder === 'desc' ? _jsx(ArrowDown, { size: 14 }) : _jsx(ArrowUp, { size: 14 }) })] }), _jsx("div", { className: styles.headerDivider }), groupBy !== 'docs' && (_jsxs("div", { className: styles.groupByContainer, children: [_jsxs("span", { className: styles.groupByLabel, children: [_jsx(Layers, { size: 12 }), " ", t('standalone.groupLabel')] }), _jsxs("select", { className: `${styles.select} ${styles.groupBySelect} `, value: groupBy, onChange: (e) => setGroupBy(e.target.value), children: [_jsx("option", { value: "category", children: t('standalone.groupCategory') }), _jsx("option", { value: "type", children: t('standalone.groupType') }), _jsx("option", { value: "priority", children: t('standalone.groupPriority') }), _jsx("option", { value: "complexity", children: t('standalone.groupComplexity') }), _jsx("option", { value: "approach", children: t('standalone.groupApproach') }), _jsx("option", { value: "assignee", children: t('standalone.groupAssignee') }), _jsx("option", { value: "status", children: t('standalone.groupStatus') }), _jsx("option", { value: "hierarchy", children: t('standalone.groupHierarchy') }), _jsx("option", { value: "schedule", children: t('standalone.groupSchedule') })] })] })), _jsx("button", { className: `${styles.headerActionBtn} ${groupBy === 'docs' ? styles.headerActionBtnActive : ''}`, onClick: () => setGroupBy(groupBy === 'docs' ? lastNonDocsGroupByRef.current : 'docs'), title: groupBy === 'docs' ? 'Exit Docs view' : 'Open Docs view', children: _jsx(FileText, { size: 15 }) }), _jsxs("button", { className: `${styles.headerActionBtn} ${emptyColumnMode !== 'show' ? styles.headerActionBtnActive : ''} `, onClick: () => {
-                                    setEmptyColumnMode(prev => {
-                                        if (prev === 'show')
-                                            return 'collapse';
-                                        if (prev === 'collapse')
-                                            return 'hide';
-                                        return 'show';
-                                    });
-                                }, title: emptyColumnMode === 'show' ? t('standalone.showEmptyColumns') :
-                                    emptyColumnMode === 'collapse' ? t('standalone.compressEmptyColumns') :
-                                        t('standalone.hideEmptyColumns'), children: [emptyColumnMode === 'show' && _jsx(Maximize2, { size: 16 }), emptyColumnMode === 'collapse' && _jsx(Minimize2, { size: 16 }), emptyColumnMode === 'hide' && _jsx(EyeOff, { size: 16 })] }), _jsx("button", { className: `${styles.headerActionBtn} ${compressedCards ? styles.headerActionBtnActive : ''}`, onClick: () => setCompressedCards(!compressedCards), title: compressedCards ? t('standalone.expandCards') : t('standalone.compressCards'), children: compressedCards ? _jsx(ChevronsDown, { size: 16 }) : _jsx(ChevronsUp, { size: 16 }) }), _jsx("button", { className: `${styles.headerActionBtn} ${zenMode ? styles.headerActionBtnActive : ''}`, onClick: () => setZenMode(), title: zenMode ? t('standalone.exitZenMode') : t('standalone.enterZenMode'), children: _jsx(Zap, { size: 16, fill: zenMode ? "currentColor" : "none" }) }), _jsx("div", { className: styles.headerDivider }), _jsx("button", { className: `${styles.headerActionBtn} ${showFilters ? styles.headerActionBtnActive : ''} ${hasDropdownFilters ? styles.filterGlow : ''}`, onClick: () => setShowFilters(!showFilters), title: t('standalone.toggleFilters'), children: _jsx(Filter, { size: 16 }) }), _jsxs("button", { className: styles.primaryUpdateBtn, onClick: () => {
-                                    resetForm();
-                                    setActiveTab('add');
-                                }, children: [_jsx(Plus, { size: 16 }), " ", t('standalone.addTask')] }), _jsxs("div", { className: styles.accountMenuWrap, ref: accountMenuRef, children: [_jsx("button", { className: `${styles.headerActionBtn} ${styles.avatarBtn}`, onClick: () => setShowAccountMenu(prev => !prev), title: isAuthenticated ? 'Account' : 'Account (Not signed in)', "aria-label": isAuthenticated ? 'Account' : 'Account (Not signed in)', "aria-haspopup": "menu", "aria-expanded": showAccountMenu, children: _jsx("span", { className: styles.avatarBadge, "aria-hidden": "true", children: isAuthenticated ? 'U' : '?' }) }), showAccountMenu && (_jsxs("div", { className: styles.accountMenu, role: "menu", "aria-label": "Account menu", children: [_jsxs("div", { className: styles.accountMenuSection, children: [_jsx("div", { className: styles.accountMenuSectionLabel, children: "Account" }), _jsx("div", { className: styles.accountMenuHint, children: isAuthBootstrapPending
-                                                            ? 'Checking sign-in status...'
-                                                            : isAuthenticated
-                                                                ? (_jsx(_Fragment, { children: hasAuthIdentity
-                                                                        ? _jsxs(_Fragment, { children: ["Signed in as ", _jsx("span", { className: styles.accountIdentityEmail, children: authIdentityLabel })] })
-                                                                        : 'Signed in' }))
-                                                                : 'Not signed in' })] }), canManageCloudWorkspaces && (_jsxs("div", { className: styles.accountMenuSection, children: [_jsx("div", { className: styles.accountMenuSectionLabel, children: "Workspaces (Owned + Invited)" }), availableWorkspaces.length === 0 && (_jsx("div", { className: styles.accountMenuHint, children: "No workspaces found for this account yet." })), availableWorkspaces.map((workspace) => (_jsxs("button", { className: `${styles.accountMenuItem} ${workspace.id === currentWorkspaceId ? styles.accountMenuItemActive : ''}`, onClick: () => handleSwitchWorkspace(workspace.id), role: "menuitem", disabled: workspaceActionBusy || workspace.id === currentWorkspaceId, title: workspace.description || workspace.name, children: [_jsx(Folder, { size: 15 }), _jsxs("span", { style: { display: 'flex', flexDirection: 'column', gap: '2px' }, children: [_jsx("span", { children: workspace.name }), _jsx("span", { className: styles.accountMenuMeta, children: workspace.role })] })] }, workspace.id))), _jsxs("button", { className: styles.accountMenuItem, onClick: () => {
-                                                            setWorkspaceActionError('');
-                                                            setWorkspacePanelOpen((prev) => !prev);
-                                                        }, role: "menuitem", disabled: workspaceActionBusy, children: [_jsx(Plus, { size: 15 }), workspacePanelOpen ? 'Close Workspace Form' : 'Create Workspace'] }), workspacePanelOpen && (_jsxs("div", { className: styles.accountMenuWorkspaceForm, children: [_jsx("input", { className: styles.input, value: workspaceFormName, onChange: (event) => setWorkspaceFormName(event.target.value), placeholder: "Workspace name", disabled: workspaceActionBusy }), _jsx("input", { className: styles.input, value: workspaceFormDescription, onChange: (event) => setWorkspaceFormDescription(event.target.value), placeholder: "Workspace description (optional)", disabled: workspaceActionBusy }), _jsx("button", { className: styles.primaryUpdateBtn, onClick: handleCreateWorkspace, disabled: workspaceActionBusy, children: workspaceActionBusy ? 'Saving...' : 'Save Workspace' })] })), workspaceActionError && (_jsx("div", { className: styles.accountMenuError, children: workspaceActionError }))] })), canOpenTeamManagement && (_jsxs("button", { className: styles.accountMenuItem, onClick: () => { void openTeamManagementModal(); }, role: "menuitem", children: [_jsx(Users, { size: 15 }), "Team Management"] })), _jsxs("button", { className: styles.accountMenuItem, onClick: () => {
-                                                    setShowAccountMenu(false);
-                                                    setActiveTab('settings');
-                                                    setSettingsSection('general');
-                                                }, role: "menuitem", children: [_jsx(Settings, { size: 15 }), "Workspace Settings"] }), _jsxs("button", { className: styles.accountMenuItem, onClick: () => {
-                                                    setShowAccountMenu(false);
-                                                    setShowAccountHub(true);
-                                                }, role: "menuitem", children: [_jsx(User, { size: 15 }), "Account Hub"] }), _jsxs("button", { className: styles.accountMenuItem, onClick: () => {
-                                                    setShowAccountMenu(false);
-                                                    setShowHelpModal(true);
-                                                }, role: "menuitem", children: [_jsx(HelpCircle, { size: 15 }), "Help & Tutorial"] }), runtimeMode === 'local' && !isAuthenticated && !isAuthBootstrapPending && (_jsxs("button", { className: styles.accountMenuItem, onClick: () => {
-                                                    openSharedLoginRoute('login');
-                                                }, role: "menuitem", children: [_jsx(User, { size: 15 }), "Sign In / Register"] })), isAuthenticated && (_jsxs("button", { className: styles.accountMenuItem, onClick: async () => {
-                                                    setShowAccountMenu(false);
-                                                    await logout();
-                                                }, role: "menuitem", children: [_jsx(LogOut, { size: 15 }), "Sign Out"] }))] }))] })] })] }), authBlocked && (_jsx("div", { className: styles.authBlockedBanner, children: "Authentication required for this environment. Use the Account menu to sign in." })), showFilters && (_jsxs("div", { className: styles.filterToolbar, style: {
-                    padding: '8px 24px',
-                    borderBottom: '1px solid var(--border-color)',
-                    background: 'var(--bg-secondary)',
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: '12px',
-                    flexWrap: 'wrap',
-                    position: 'relative',
-                    zIndex: 50
-                }, children: [_jsx("span", { style: { fontSize: '12px', fontWeight: 600, color: 'var(--text-secondary)', marginRight: '4px' }, children: t('standalone.filtersCaps') }), _jsx(MultiSelectFilter, { label: t('standalone.categoryLabel'), options: activeCategories.filter(c => !c.disabled), selected: filterCategories, onChange: (vals) => setFilterCategories(vals), variant: "value" }), _jsx(MultiSelectFilter, { label: t('standalone.typeLabel'), options: activeTypes.map(t => ({ value: t.value, label: t.label })), selected: filterTypes, onChange: (vals) => setFilterTypes(vals), variant: "value" }), _jsx(MultiSelectFilter, { label: t('standalone.priorityLabel'), options: priorities, selected: filterPriorities, onChange: (vals) => setFilterPriorities(vals), variant: "value" }), _jsx(MultiSelectFilter, { label: t('standalone.statusLabel'), options: STATUS_OPTIONS, selected: filterStatus, onChange: (vals) => setFilterStatus(vals), variant: "value" }), assigneeFilterEnabled && (_jsx(MultiSelectFilter, { label: t('standalone.assigneeLabel'), options: [
-                            { value: 'agent', label: 'AI' },
-                            { value: 'user', label: 'User' },
-                            { value: 'unassigned', label: 'Unassigned' }
-                        ], selected: filterAssignees, onChange: (vals) => setFilterAssignees(vals), variant: "value" })), _jsx("div", { className: styles.headerDivider, style: { height: '16px', margin: '0 8px' } }), _jsxs("div", { className: styles.groupByContainer, children: [_jsxs("span", { className: styles.groupByLabel, children: [_jsx(Layers, { size: 12 }), " ", t('standalone.linksLabel')] }), _jsxs("select", { className: `${styles.select} ${styles.groupBySelect}`, value: parentTaskFilterMode, onChange: (e) => setParentTaskFilterMode(e.target.value), title: t('standalone.chooseLinksTitle'), children: [_jsx("option", { value: "all", children: t('standalone.linksAll') }), _jsx("option", { value: "parents", children: t('standalone.linksParents') }), _jsx("option", { value: "linked", children: t('standalone.linksLinked') }), _jsx("option", { value: "unlinked", children: t('standalone.linksUnlinked') })] })] }), _jsxs("label", { className: styles.archiveToggle, title: t('standalone.includeArchiveTitle'), children: [_jsx("input", { type: "checkbox", checked: showArchive, onChange: (e) => {
-                                    setShowArchive(e.target.checked);
-                                    if (e.target.checked)
-                                        fetchArchive();
-                                } }), _jsx("span", { children: t('standalone.includeArchive') })] }), _jsx("div", { style: { flex: 1 } }), _jsxs("button", { onClick: clearFilters, style: {
-                            background: 'none',
-                            border: 'none',
-                            color: 'var(--text-secondary)',
-                            cursor: 'pointer',
-                            fontSize: '12px',
-                            display: 'flex',
-                            alignItems: 'center',
-                            gap: '4px'
-                        }, children: [_jsx(X, { size: 12 }), " ", t('standalone.clearFilters')] })] })), groupBy === 'docs' ? (_jsx("div", { className: `${styles.standalonePage} ${styles.standaloneContent}`, style: { position: 'relative', display: 'flex', flex: 1, minHeight: 0, overflow: 'hidden' }, children: _jsx(DocumentWorkspace, { tasks: tasks, apiBaseUrl: props.config?.apiBaseUrl || '', requestedDocPath: requestedDocPath, onRequestedDocHandled: () => setRequestedDocPath(null) }) })) : (_jsxs("div", { className: `${styles.standalonePage} ${styles.standaloneContent} `, style: {
+    }, [
+        assigneeOptions,
+        categoryFilterOptions,
+        clearFilters,
+        deletedScopeAllTasks.length,
+        documentAttachmentFilters,
+        documentTypeFilters,
+        filterAssignees,
+        filterCategories,
+        filterPriorities,
+        filterStatus,
+        filterTypes,
+        handleInitiativeFilterChange,
+        handleWorkstreamFilterChange,
+        initiativeFilterOptions,
+        priorities,
+        selectedPlanningInitiativeId,
+        selectedPlanningWorkstreamId,
+        setDocumentAttachmentFilters,
+        setDocumentTypeFilters,
+        setFilterAssignees,
+        setFilterCategories,
+        setFilterPriorities,
+        setFilterStatus,
+        setFilterTypes,
+        setSelectedPlanningInitiativeId,
+        setSelectedPlanningWorkstreamId,
+        setShowArchive,
+        setTaskScope,
+        showArchive,
+        taskScope,
+        taxonomyDisplayLabels,
+        typeFilterOptions,
+        workstreamFilterOptions,
+        workspaceChromeDefinition.filterBar.kind,
+        fetchArchive,
+        handleEmptyDeletedTasks,
+    ]);
+    const universalDisplayActions = useMemo(() => {
+        const actions = [{
+                key: 'zen-toggle',
+                icon: _jsx(Zap, { size: 16, fill: zenMode ? 'currentColor' : 'none' }),
+                title: zenMode ? t('standalone.exitZenMode') : t('standalone.enterZenMode'),
+                onClick: () => setZenMode(),
+                active: zenMode,
+            }];
+        return actions;
+    }, [
+        zenMode,
+        setZenMode,
+    ]);
+    const headerSectionRegistry = useMemo(() => ({
+        search: (_jsx(WorkspaceHeaderSearch, { value: searchQuery, placeholder: t('standalone.searchPlaceholder'), active: hasSearchFilter, onChange: setSearchQuery, onClear: () => setSearchQuery(''), clearTitle: t('standalone.clearSearchTitle') })),
+        sort: (_jsx(WorkspaceHeaderSelect, { label: _jsxs(_Fragment, { children: [_jsx(ArrowUpDown, { size: 12 }), " ", t('standalone.sortLabel')] }), value: sortBy, options: sortOptions, onChange: (value) => setSortBy(value), trailingAction: (_jsx("button", { className: `tf-control-icon ${styles.sortDirectionBtn}`, onClick: () => props.toggleSortOrder(), title: props.sortOrder === 'desc' ? t('standalone.sortDirectionDescTitle') : t('standalone.sortDirectionAscTitle'), children: props.sortOrder === 'desc' ? _jsx(ArrowDown, { size: 14 }) : _jsx(ArrowUp, { size: 14 }) })) })),
+        'divider-primary': _jsx(WorkspaceHeaderDivider, {}),
+        grouping: (_jsx(WorkspaceHeaderSelect, { label: _jsxs(_Fragment, { children: [_jsx(Layers, { size: 12 }), " ", t('standalone.groupLabel')] }), value: groupBy, options: groupingOptions, onChange: (value) => setGroupBy(value) })),
+        'divider-secondary': _jsx(WorkspaceHeaderDivider, {}),
+        'task-display-actions': (_jsx(WorkspaceHeaderActions, { actions: taskDisplayActions })),
+    }), [
+        groupBy,
+        groupingOptions,
+        handleModuleChange,
+        hasSearchFilter,
+        props,
+        searchQuery,
+        setGroupBy,
+        setSearchQuery,
+        setSortBy,
+        sortBy,
+        sortOptions,
+        taskDisplayActions,
+        workspaceChromeDefinition.moduleId,
+    ]);
+    const primaryActionRegistry = useMemo(() => ({
+        'add-task': (_jsx(WorkspacePrimaryAction, { icon: _jsx(Plus, { size: 16 }), label: t('standalone.addTask'), onClick: openAddTaskModal })),
+        'add-document': null,
+    }), [openAddTaskModal]);
+    const workspaceToolRail = useMemo(() => {
+        const moduleIcons = {
+            tasks: _jsx(ClipboardCheck, { size: 18 }),
+            docs: _jsx(FileText, { size: 18 }),
+            annotate: _jsx(Image, { size: 18 }),
+            workflows: _jsx(Workflow, { size: 18 }),
+            agents: _jsx(Bot, { size: 18 }),
+        };
+        return (_jsxs("aside", { className: shellStyles.workspaceToolRail, "aria-label": "Workspace tools", children: [_jsxs("div", { className: shellStyles.workspaceToolRailMain, children: [_jsx("button", { type: "button", className: `${shellStyles.workspaceToolButton} ${(resolvedWorkspaceModule === 'tasks' && planningDrawerOpen) ? shellStyles.workspaceToolButtonActive : ''}`.trim(), onClick: handlePlanningToolToggle, title: resolvedWorkspaceModule === 'tasks' && planningDrawerOpen ? 'Collapse planning trays' : 'Planning', "aria-label": resolvedWorkspaceModule === 'tasks' && planningDrawerOpen ? 'Collapse planning trays' : 'Planning', children: resolvedWorkspaceModule === 'tasks' && planningDrawerOpen ? _jsx(ChevronLeft, { size: 18 }) : _jsx(NotebookTabs, { size: 18 }) }), _jsx("div", { className: shellStyles.workspaceToolRailDivider }), workspaceToolModules.map((module) => (_jsx("button", { type: "button", className: `${shellStyles.workspaceToolButton} ${resolvedWorkspaceModule === module.id ? shellStyles.workspaceToolButtonActive : ''}`.trim(), onClick: () => handleModuleChange(module.id), title: module.label, "aria-label": module.label, children: moduleIcons[module.id] }, module.id)))] }), _jsxs("div", { className: shellStyles.workspaceToolRailBottom, children: [_jsx("div", { className: shellStyles.workspaceToolRailDivider }), _jsx("button", { type: "button", className: `${shellStyles.workspaceToolButton} ${activeTab === 'settings' ? shellStyles.workspaceToolButtonActive : ''}`.trim(), onClick: () => {
+                                setSettingsSection('general');
+                                setActiveTab('settings');
+                            }, title: "Workspace Settings", "aria-label": "Workspace Settings", children: _jsx(Settings, { size: 18 }) })] })] }));
+    }, [activeTab, handleModuleChange, handlePlanningToolToggle, planningDrawerOpen, resolvedWorkspaceModule, setSettingsSection, setActiveTab, workspaceToolModules]);
+    const planningDrawerPortalRef = useRef(null);
+    const planningDrawerNode = (_jsx(PlanningDrawer, { open: planningDrawerOpen, leftOffset: WORKSPACE_TOOL_RAIL_WIDTH, initiatives: planningStructure.initiatives, standaloneWorkstreams: planningStructure.standaloneWorkstreams, activeInitiativeId: selectedPlanningInitiativeId, activeWorkstreamId: selectedPlanningWorkstreamId, expandedInitiativeIds: expandedPlanningInitiativeIds, detail: planningDrawerItem, editor: planningEditor, secondaryPane: planningSecondaryPane, assigneeOptions: assigneeOptions.map((option) => ({ value: String(option.value), label: option.label })), draftInitiativeSummary: planningDraftInitiativeSummary, draftTitle: planningDraftTitle, draftDescription: planningDraftDescription, draftOwner: planningDraftOwner, draftInitiativeId: planningDraftInitiativeId, onChangeDraftTitle: setPlanningDraftTitle, onChangeDraftDescription: setPlanningDraftDescription, onChangeDraftOwner: setPlanningDraftOwner, onChangeDraftInitiativeId: setPlanningDraftInitiativeId, onCollapseTreePane: () => setPlanningTreeCollapsed(true), onExpandTreePane: () => setPlanningTreeCollapsed(false), onCollapsePrimaryPane: () => setPlanningPrimaryCollapsed(true), onExpandPrimaryPane: () => setPlanningPrimaryCollapsed(false), onCollapseSecondaryPane: () => setPlanningSecondaryCollapsed(true), onExpandSecondaryPane: () => setPlanningSecondaryCollapsed(false), onBackFromSecondary: () => {
+            setPlanningSecondaryEditor(null);
+            setPlanningNestedWorkstreamDetailId(null);
+        }, treeCollapsed: planningTreeCollapsed, primaryCollapsed: planningPrimaryCollapsed, secondaryCollapsed: planningSecondaryCollapsed, onCancelEditor: closePlanningEditor, onSubmitEditor: submitPlanningEditor, onCreateInitiative: () => openPlanningCreateEditor('initiative'), onCreateWorkstream: () => openPlanningCreateEditor('workstream'), onCreateTaskInWorkstream: openAddTaskModalForWorkstream, onCreateWorkstreamInInitiative: (initiativeId) => openPlanningCreateEditor('workstream', initiativeId), onAssignInitiativeToWorkstream: handleAssignInitiativeToWorkstream, onOpenTaskById: handleOpenTaskById, onAttachTaskToWorkstreamByReference: handleAttachTaskToWorkstreamByReference, onAttachWorkstreamToInitiativeByReference: handleAttachWorkstreamToInitiativeByReference, onToggleInitiative: togglePlanningInitiative, onSelectInitiative: selectPlanningInitiative, onSelectWorkstream: selectPlanningWorkstream, onOpenInitiativeDetails: openInitiativeDetails, onOpenWorkstreamDetails: openWorkstreamDetails, onOpenNestedWorkstreamDetails: openNestedWorkstreamDetails, onEditInitiative: (initiativeId) => openPlanningEditDialog('initiative', initiativeId), onEditWorkstream: (workstreamId) => openPlanningEditDialog('workstream', workstreamId), onArchiveInitiative: (initiativeId) => {
+            void props.archiveInitiative(initiativeId).then(() => {
+                pushNotice('Initiative archived', 'success');
+            }).catch((error) => {
+                pushNotice(error instanceof Error ? error.message : 'Failed to archive initiative.', 'error');
+            });
+        }, onUnarchiveInitiative: (initiativeId) => {
+            void props.unarchiveInitiative(initiativeId).then(() => {
+                pushNotice('Initiative unarchived', 'success');
+            }).catch((error) => {
+                pushNotice(error instanceof Error ? error.message : 'Failed to unarchive initiative.', 'error');
+            });
+        }, onArchiveWorkstream: (workstreamId) => {
+            void props.archiveWorkstream(workstreamId).then(() => {
+                pushNotice('Workstream archived', 'success');
+            }).catch((error) => {
+                pushNotice(error instanceof Error ? error.message : 'Failed to archive workstream.', 'error');
+            });
+        }, onUnarchiveWorkstream: (workstreamId) => {
+            void props.unarchiveWorkstream(workstreamId).then(() => {
+                pushNotice('Workstream unarchived', 'success');
+            }).catch((error) => {
+                pushNotice(error instanceof Error ? error.message : 'Failed to unarchive workstream.', 'error');
+            });
+        } }));
+    const effectiveHeaderSectionIds = workspaceChromeDefinition.headerSections;
+    const workspaceHeaderSections = effectiveHeaderSectionIds
+        .map((sectionId) => {
+        const section = headerSectionRegistry[sectionId];
+        return section ? _jsx(React.Fragment, { children: section }, sectionId) : null;
+    })
+        .filter(Boolean);
+    const workspacePrimaryAction = workspaceChromeDefinition.primaryAction
+        ? primaryActionRegistry[workspaceChromeDefinition.primaryAction]
+        : null;
+    return (_jsxs("div", { className: `${shellStyles.standaloneWrapper} ${zenMode ? styles.zenModeEnabled : ''}`, "data-theme": currentTheme, children: [_jsx(AppShellHeader, { projectName: projectName, currentWorkspaceId: currentWorkspaceId, runtimeMode: runtimeMode, theme: currentTheme, meta: isPlansScreen ? null : (_jsxs(_Fragment, { children: [_jsx("span", { className: styles.taskCountBadge, title: activeCountTitle, children: activeCountLabel }), shouldShowSyncStatus && (_jsx("button", { className: "tf-control-icon", onClick: () => setShowSyncStatusModal(true), title: `Sync manager: ${syncStatusMeta.label} | Last success: ${formattedLastSyncTime}`, style: {
+                                marginLeft: '6px',
+                                height: '24px',
+                                width: '24px',
+                                padding: 0,
+                                borderRadius: '999px',
+                                border: `1px solid ${syncStatusMeta.border}`,
+                                background: syncStatusMeta.background,
+                                color: syncStatusMeta.color,
+                                display: 'inline-flex',
+                                alignItems: 'center',
+                                justifyContent: 'center'
+                            }, children: syncStatusMeta.icon === 'off' ? (_jsx(CloudOff, { size: 16 })) : (_jsx(Cloud, { size: 16 })) }))] })), actions: (_jsxs(_Fragment, { children: [isPlansScreen && (_jsx("button", { className: "tf-control-icon", onClick: handlePlansBack, title: "Back", children: "Back" })), !isPlansScreen && (_jsxs(_Fragment, { children: [workspaceHeaderSections, workspacePrimaryAction] })), !isPlansScreen && _jsx(WorkspaceHeaderActions, { actions: universalDisplayActions }), !isPlansScreen && _jsx(WorkspaceHeaderActions, { actions: universalFilterActions }), accountMenuControl] })) }), _jsx(TopNoticeLayer, { notice: uiNotice, onDismiss: clearNotice }), authBlocked && (_jsx("div", { className: authStyles.authBlockedBanner, children: "Authentication required for this environment. Use the Account menu to sign in." })), !isPlansScreen && showFilters && workspaceFilterBar, isPlansScreen ? (_jsx("div", { className: `${shellStyles.standalonePage} ${shellStyles.standaloneContent} ${styles.appScrollbar} tf-scrollbar`, style: { position: 'relative', display: 'flex', flex: 1, minHeight: 0, overflowY: 'auto', overflowX: 'hidden', scrollbarGutter: 'stable' }, children: _jsx(Suspense, { fallback: _jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 1 }, children: _jsx(Loader2, { size: 20, className: styles.spinner }) }), children: _jsx(PlansPage, { ...props, currentTheme: currentTheme, projectName: projectName, currentWorkspaceId: currentWorkspaceId, apiBaseUrl: billingApiBaseUrl, connectedEnvironmentSource: props.config?.cloudAuthBaseUrl || props.config?.apiBaseUrl || '', embedded: true, shellOwnsScroll: true }) }) })) : resolvedWorkspaceModule === 'docs' && documentsWorkspaceEnabled ? (_jsxs("div", { className: `${shellStyles.standalonePage} ${shellStyles.standaloneContent}`, style: { position: 'relative', display: 'flex', flex: 1, minHeight: 0, overflow: 'hidden', paddingLeft: `${WORKSPACE_TOOL_RAIL_WIDTH}px` }, children: [workspaceToolRail, _jsx(Suspense, { fallback: _jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 1 }, children: _jsx(Loader2, { size: 20, className: styles.spinner }) }), children: _jsx(DocumentWorkspaceShell, { tasks: tasks, runtimeMode: runtimeMode, apiBaseUrl: props.config?.apiBaseUrl || '', cloudAuthBaseUrl: props.config?.cloudAuthBaseUrl || '', typeFilters: documentTypeFilters, attachmentFilters: documentAttachmentFilters, onTypeFiltersChange: setDocumentTypeFilters, onAttachmentFiltersChange: setDocumentAttachmentFilters, requestedDocPath: requestedDocPath, requestedDocAssetId: requestedDocAssetId, onRequestedDocHandled: () => {
+                                setRequestedDocPath(null);
+                                setRequestedDocAssetId(null);
+                            }, enableTaskGeneration: true }) })] })) : resolvedWorkspaceModule === 'annotate' && annotatedAttachmentsWorkspaceEnabled ? (_jsxs("div", { className: `${shellStyles.standalonePage} ${shellStyles.standaloneContent}`, style: { position: 'relative', display: 'flex', flex: 1, minHeight: 0, overflow: 'hidden', paddingLeft: `${WORKSPACE_TOOL_RAIL_WIDTH}px` }, children: [workspaceToolRail, _jsx(Suspense, { fallback: _jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 1 }, children: _jsx(Loader2, { size: 20, className: styles.spinner }) }), children: _jsx(AnnotatedAttachmentWorkspaceShell, { runtimeMode: runtimeMode, apiBaseUrl: props.config?.apiBaseUrl || '', cloudAuthBaseUrl: props.config?.cloudAuthBaseUrl || '', workspaceId: currentWorkspaceId, sessionLoadReady: annotatedWorkspaceReady, requestedTarget: requestedAnnotatedTarget, requestedSessionId: requestedAnnotatedSessionId, requestedOpenVersion: requestedAnnotatedOpenVersion, resolveTaskReferenceLabel: resolveAnnotatedTaskReferenceLabel, resolveImageReferenceLabel: resolveAnnotatedImageReferenceLabel, onOpenTarget: handleAnnotatedAttachmentOpenTarget, onContextChange: handleAnnotatedAttachmentContextChange, onBackToTask: handleBackToTaskFromAnnotatedAttachment }) })] })) : resolvedWorkspaceModule === 'workflows' ? (_jsxs("div", { className: `${shellStyles.standalonePage} ${shellStyles.standaloneContent}`, style: { position: 'relative', display: 'flex', flex: 1, minHeight: 0, overflow: 'hidden', paddingLeft: `${WORKSPACE_TOOL_RAIL_WIDTH}px` }, children: [workspaceToolRail, _jsx(Suspense, { fallback: _jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 1 }, children: _jsx(Loader2, { size: 20, className: styles.spinner }) }), children: _jsx(WorkflowsModule, { availableWorkflows: availableWorkflows, availableEnvironments: availableEnvironments, exportEnvironment: exportEnvironment, exportWorkflowsPath: props.exportWorkflowsPath, exportingResource: exportingResource, exportResult: exportResult, onExportEnvironmentChange: props.setExportEnvironment, onExportWorkflows: onExportWorkflows, onRefreshWorkflows: fetchWorkflows, onFetchWorkflowTemplate: props.fetchWorkflowTemplate, onFetchWorkflowOverrideNames: props.fetchWorkflowOverrideNames, onSaveWorkflowTemplateDraft: props.saveWorkflowTemplateDraft, onResetWorkflowTemplateDraft: props.resetWorkflowTemplateDraft }) })] })) : resolvedWorkspaceModule === 'agents' ? (_jsxs("div", { className: `${shellStyles.standalonePage} ${shellStyles.standaloneContent}`, style: { position: 'relative', display: 'flex', flex: 1, minHeight: 0, overflow: 'hidden', paddingLeft: `${WORKSPACE_TOOL_RAIL_WIDTH}px` }, children: [workspaceToolRail, _jsx(Suspense, { fallback: _jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 1 }, children: _jsx(Loader2, { size: 20, className: styles.spinner }) }), children: _jsx(AgentsModule, { workspaceId: currentWorkspaceId }) })] })) : (_jsxs("div", { className: `${shellStyles.standalonePage} ${shellStyles.standaloneContent} `, style: {
                     position: 'relative',
                     opacity: props.loadingTasks ? 0.7 : 1,
-                    transition: 'opacity 0.2s ease, padding-right 220ms cubic-bezier(0.4, 0, 0.2, 1)',
+                    transition: 'opacity 0.2s ease, padding 220ms cubic-bezier(0.4, 0, 0.2, 1)',
                     display: 'flex',
                     flex: 1,
                     minHeight: 0,
-                    paddingRight: (groupBy === 'schedule' && scheduleSidebarOpen) || (groupBy === 'hierarchy' && hierarchySidebarOpen) ? '332px' : 0
-                }, children: [_jsxs("div", { style: { position: 'relative', width: '100%', minWidth: 0, flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden' }, children: [_jsx("div", { style: {
-                                    position: 'absolute',
-                                    top: 0,
-                                    right: 0,
-                                    width: '100%',
-                                    height: '100%',
-                                    backgroundImage: `url(${taskforceBg})`,
-                                    backgroundRepeat: 'no-repeat',
-                                    backgroundPosition: 'top right',
-                                    backgroundSize: '60%',
-                                    opacity: 0.2,
-                                    pointerEvents: 'none',
-                                    zIndex: 0
-                                } }), boardVisibleTasks.length === 0 && groupBy !== 'schedule' ? (_jsxs("div", { className: styles.emptyState, children: [_jsx(Layers, { size: 48 }), _jsx("p", { children: groupBy === 'hierarchy' && hierarchyRootTaskId ? 'No tasks match this subtree with current filters.' : t('standalone.noTasksMatchFilters') }), _jsx("p", { style: { fontSize: '12px', color: 'var(--text-secondary)' }, children: groupBy === 'hierarchy' && hierarchyRootTaskId
-                                            ? `Focused on ${selectedHierarchyRootTask?.title || hierarchyRootTaskId}. Try clearing subtree focus or broadening filters.`
-                                            : t('standalone.showingWithLinksHint', { parentFilterLabel }) })] })) : (_jsx(TaskKanban, { tasks: boardVisibleTasks, allTasks: kanbanAllTasks, hierarchyTasks: hierarchyTasks, columns: kanbanColumns, groupBy: groupBy, scheduleDates: scheduleDates, searchQuery: searchQuery, filterCategories: filterCategories, filterTypes: filterTypes, filterPriorities: filterPriorities, filterStatus: filterStatus, filterAssignees: filterAssignees, assigneeFilterEnabled: assigneeFilterEnabled, scheduleFilteredTaskIds: Array.from(scheduleFilteredTaskIds), copiedId: copiedId, availableSpecialists: availableSpecialists, taxonomies: taxonomies, priorities: priorities, approaches: approaches, onUpdateTask: handleUpdateTask, onTaskClick: (task) => handleEdit(task), onOpenTaskById: handleOpenTaskById, onCopyId: handleCopyId, onToggleInProgress: handleToggleInProgress, onToggleReview: handleToggleReview, onToggleComplete: handleToggleComplete, onToggleCancel: handleToggleCancel, onArchiveTask: handleArchiveTask, onUnarchive: handleUnarchive, onDelete: handleDelete, onUnlinkChildTask: handleUnlinkChildTask, onClearParentTask: handleClearParentTask, onAddTaskToColumn: handleAddTaskToColumn, onScheduleParentDrop: handleScheduleParentDrop, onScheduleDaySelected: (dateOnly) => {
+                    paddingLeft: planningDrawerOpen
+                        ? `${WORKSPACE_TOOL_RAIL_WIDTH + planningDrawerWidthPx + WORKSPACE_CONTENT_GUTTER}px`
+                        : `${WORKSPACE_TOOL_RAIL_WIDTH + WORKSPACE_CONTENT_GUTTER}px`,
+                    paddingRight: (groupBy === 'schedule' && scheduleSidebarOpen) ? `${SCHEDULE_SIDEBAR_WIDTH_PX}px` : 0
+                }, children: [workspaceToolRail, _jsx("div", { ref: planningDrawerPortalRef, style: {
+                            position: 'absolute',
+                            inset: 0,
+                            zIndex: 35,
+                            pointerEvents: 'none',
+                        } }), _jsxs("div", { style: { position: 'relative', width: '100%', minWidth: 0, flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden' }, children: [props.loadingTasks && boardVisibleTasks.length > 0 && (_jsx("div", { className: styles.boardRefreshIndicator, "aria-live": "polite", "aria-label": "Refreshing tasks", children: _jsx(Loader2, { size: 14, className: styles.spinner }) })), _jsx(TaskKanban, { tasks: scopedBoardVisibleTasks, allTasks: [], columns: kanbanColumns, groupBy: groupBy, scheduleDates: scheduleDates, searchQuery: searchQuery, filterCategories: filterCategories, filterTypes: filterTypes, filterPriorities: filterPriorities, filterStatus: filterStatus, filterAssignees: filterAssignees, assigneeOptions: assigneeOptions, scheduleFilteredTaskIds: Array.from(scheduleFilteredTaskIds), copiedId: copiedId, taxonomies: taxonomies, types: activeTypes, priorities: priorities, onUpdateTask: handleUpdateTask, onTaskClick: (task) => handleEdit(task), onOpenTaskById: handleOpenTaskById, onCopyId: handleCopyId, onToggleInProgress: handleToggleInProgress, onToggleReview: handleToggleReview, onToggleComplete: handleToggleComplete, onToggleCancel: handleToggleCancel, onSetStatus: handleSetStatus, onArchiveTask: handleArchiveTask, onAddTaskToColumn: handleAddTaskToColumn, showTaskCardStatusLabel: showTaskCardStatusLabel, onScheduleDaySelected: (dateOnly) => {
                                     setScheduleSelectedDate(dateOnly);
                                     const parsed = parseDateOnlyLocal(dateOnly);
                                     if (parsed) {
@@ -1798,291 +2928,154 @@ export function StandaloneLayout(props) {
                                     if (groupBy !== 'schedule')
                                         return;
                                     setScheduleScrollLeft(scrollLeft);
-                                }, emptyColumnMode: emptyColumnMode, categories: activeCategories, compressed: compressedCards, recentlyChangedTaskIds: props.recentlyChangedTaskIds, hierarchyChildOrderMode: hierarchyChildOrderMode, sortBy: sortBy, sortOrder: props.sortOrder }, `${groupBy}-${kanbanColumns.map(c => String(c.value)).join('|')}-${scheduleDates.mon}`)), groupBy === 'schedule' && !scheduleSidebarOpen && (_jsx("button", { type: "button", className: styles.headerActionBtn, onClick: () => setScheduleSidebarOpen(true), title: "Show Schedule Sidebar", style: {
-                                    position: 'absolute',
-                                    top: '10px',
-                                    right: '10px',
-                                    zIndex: 20,
-                                    border: '1px solid var(--border-color)',
-                                    background: 'var(--bg-secondary)'
-                                }, children: _jsx(PanelRightOpen, { size: 16 }) })), groupBy === 'hierarchy' && !hierarchySidebarOpen && (_jsx("button", { type: "button", className: styles.headerActionBtn, onClick: () => setHierarchySidebarOpen(true), title: "Show Hierarchy Sidebar", style: {
+                                }, emptyColumnMode: emptyColumnMode, categories: activeCategories, compressed: compressedCards, readOnlyMode: taskScope === 'deleted' ? 'deleted' : taskScope === 'archived' ? 'archived' : null, recentlyChangedTaskIds: props.recentlyChangedTaskIds, sortBy: sortBy, sortOrder: props.sortOrder, planningDropTargets: planningDrawerPortalRef.current
+                                    ? createPortal(planningDrawerNode, planningDrawerPortalRef.current)
+                                    : null, onAssignTaskToWorkstream: handleAssignTaskToWorkstream, onAssignWorkstreamToInitiative: handleAssignInitiativeToWorkstream, workstreams: props.workstreams, initiatives: props.initiatives, onUnarchive: (taskId) => {
+                                    if (taskScope === 'deleted') {
+                                        const deletedRecord = deletedTaskRecordByTaskId.get(taskId);
+                                        if (!deletedRecord)
+                                            return;
+                                        void handleRestoreDeletedTask(deletedRecord.id);
+                                        return;
+                                    }
+                                    void handleUnarchive(taskId);
+                                }, onDelete: (taskId) => {
+                                    if (taskScope === 'deleted') {
+                                        const deletedRecord = deletedTaskRecordByTaskId.get(taskId);
+                                        if (!deletedRecord)
+                                            return;
+                                        const confirmed = window.confirm('Permanently delete this task? This cannot be undone.');
+                                        if (!confirmed)
+                                            return;
+                                        void handlePermanentlyDeleteDeletedTask(deletedRecord.id);
+                                        return;
+                                    }
+                                    void handleDelete(taskId);
+                                } }, `${groupBy}-${kanbanColumns.map(c => String(c.value)).join('|')}-${scheduleDates.mon}`), groupBy === 'schedule' && !scheduleSidebarOpen && (_jsx("button", { type: "button", className: "tf-control-icon", onClick: () => {
+                                    setPlanningDrawerDetail(null);
+                                    setScheduleSidebarOpen(true);
+                                }, title: "Show Schedule Sidebar", style: {
                                     position: 'absolute',
                                     top: '10px',
                                     right: '10px',
                                     zIndex: 20,
-                                    border: '1px solid var(--border-color)',
-                                    background: 'var(--bg-secondary)'
-                                }, children: _jsx(PanelRightOpen, { size: 16 }) }))] }), groupBy === 'hierarchy' && (_jsxs("aside", { className: styles.appScrollbar, style: {
-                            position: 'absolute',
-                            top: 0,
-                            right: 0,
-                            bottom: 0,
-                            width: '320px',
-                            minWidth: '320px',
-                            borderLeft: '1px solid var(--border-color)',
-                            background: 'var(--bg-secondary)',
-                            padding: '12px',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            gap: '12px',
-                            zIndex: 40,
-                            overflowY: 'auto',
-                            transform: hierarchySidebarOpen ? 'translateX(0)' : 'translateX(108%)',
-                            pointerEvents: hierarchySidebarOpen ? 'auto' : 'none',
-                            transition: 'transform 220ms cubic-bezier(0.4, 0, 0.2, 1)',
-                            willChange: 'transform'
-                        }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '8px', fontWeight: 600 }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: [_jsx(Layers, { size: 16 }), _jsx("span", { children: "Hierarchy Controls" })] }), _jsx("button", { type: "button", className: styles.headerActionBtn, onClick: () => setHierarchySidebarOpen(false), title: "Hide Hierarchy Sidebar", children: _jsx(PanelRightClose, { size: 16 }) })] }), _jsxs("div", { style: {
-                                    border: '1px solid var(--border-color)',
-                                    borderRadius: '10px',
-                                    padding: '10px',
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    gap: '8px'
-                                }, children: [_jsx("div", { style: { fontSize: '12px', fontWeight: 600 }, children: "Focus Subtree" }), _jsx("input", { type: "text", className: styles.input, placeholder: "Search parent tasks...", value: hierarchyRootSearch, onChange: (e) => setHierarchyRootSearch(e.target.value), onKeyDown: (e) => {
-                                            if (e.key === 'Enter') {
-                                                e.preventDefault();
-                                                applyHierarchySearchSelection();
-                                            }
-                                        } }), _jsx("div", { style: {
-                                            border: '1px solid var(--border-color)',
-                                            borderRadius: '8px',
-                                            padding: '8px',
-                                            display: 'flex',
-                                            flexDirection: 'column',
-                                            gap: '6px',
-                                            minHeight: '190px'
-                                        }, children: hierarchyRootSearch.trim().length > 0 ? (_jsxs("div", { className: styles.appScrollbar, style: {
-                                                maxHeight: '180px',
-                                                minHeight: '180px',
-                                                overflowY: 'auto',
-                                                border: '1px solid var(--border-color)',
-                                                borderRadius: '8px',
-                                                padding: '6px',
-                                                display: 'flex',
-                                                flexDirection: 'column',
-                                                gap: '6px'
-                                            }, children: [hierarchySearchMatches.slice(0, 24).map((task) => (_jsxs("button", { type: "button", className: styles.headerActionBtn, onClick: () => {
-                                                        setHierarchyRootTaskId(task.id);
-                                                        setHierarchyRootSearch('');
-                                                        if (parentTaskFilterMode === 'unlinked') {
-                                                            setParentTaskFilterMode('all');
-                                                        }
-                                                    }, style: { justifyContent: 'space-between', border: '1px solid var(--border-color)' }, title: task.title, children: [_jsx("span", { style: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: task.title }), _jsx("span", { style: { opacity: 0.75 }, children: task.id.split('-').slice(-1)[0] })] }, task.id))), hierarchySearchMatches.length === 0 && (_jsxs("div", { style: { fontSize: '12px', color: 'var(--text-secondary)', padding: '4px 2px' }, children: ["No matches for \"", hierarchyRootSearch, "\"."] }))] })) : hierarchyRootTaskId ? (_jsxs(_Fragment, { children: [_jsx("div", { style: { fontSize: '13px', fontWeight: 600, color: 'var(--text-primary)' }, title: selectedHierarchyRootTask?.title || hierarchyRootTaskId, children: selectedHierarchyRootTask?.title || hierarchyRootTaskId }), hierarchySubtreeStats && (_jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '6px', fontSize: '12px', color: 'var(--text-secondary)' }, children: [_jsxs("div", { style: { border: '1px solid var(--border-color)', borderRadius: '8px', padding: '6px' }, children: [_jsx("strong", { style: { color: 'var(--text-primary)' }, children: hierarchySubtreeStats.total }), " total"] }), _jsxs("div", { style: { border: '1px solid var(--border-color)', borderRadius: '8px', padding: '6px' }, children: [_jsx("strong", { style: { color: 'var(--text-primary)' }, children: hierarchySubtreeStats.active }), " active"] }), _jsxs("div", { style: { border: '1px solid var(--border-color)', borderRadius: '8px', padding: '6px' }, children: [_jsx("strong", { style: { color: 'var(--text-primary)' }, children: hierarchySubtreeStats.terminal }), " done/cancelled"] }), _jsxs("div", { style: { border: '1px solid var(--border-color)', borderRadius: '8px', padding: '6px' }, children: [_jsx("strong", { style: { color: hierarchySubtreeStats.overdue > 0 ? 'var(--color-error, #ef4444)' : 'var(--text-primary)' }, children: hierarchySubtreeStats.overdue }), " overdue"] }), _jsxs("div", { style: { gridColumn: '1 / -1', border: '1px solid var(--border-color)', borderRadius: '8px', padding: '6px' }, children: [_jsx("strong", { style: { color: 'var(--text-primary)' }, children: hierarchySubtreeStats.depth }), " levels deep"] })] })), _jsx("button", { className: styles.headerActionBtn, onClick: () => {
-                                                        setHierarchyRootTaskId('');
-                                                        setHierarchyRootSearch('');
-                                                    }, style: { justifyContent: 'center', border: '1px solid var(--border-color)', background: 'rgba(59,130,246,0.12)' }, children: "Clear subtree focus" })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '6px', fontSize: '12px', color: 'var(--text-secondary)' }, children: [_jsxs("div", { style: { border: '1px solid var(--border-color)', borderRadius: '8px', padding: '6px' }, children: [_jsx("strong", { style: { color: 'var(--text-primary)' }, children: hierarchyVisibleTasks.length }), " visible"] }), _jsxs("div", { style: { border: '1px solid var(--border-color)', borderRadius: '8px', padding: '6px' }, children: [_jsx("strong", { style: { color: 'var(--text-primary)' }, children: hierarchyVisibleRootCount }), " root parents"] }), _jsxs("div", { style: { border: '1px solid var(--border-color)', borderRadius: '8px', padding: '6px' }, children: [_jsx("strong", { style: { color: 'var(--text-primary)' }, children: hierarchyVisibleUnlinkedCount }), " unlinked"] }), _jsxs("div", { style: { border: '1px solid var(--border-color)', borderRadius: '8px', padding: '6px' }, children: [_jsx("strong", { style: { color: 'var(--text-primary)' }, children: hierarchyDepthTasks.length > 0 ? maxHierarchyDepth + 1 : 0 }), " levels"] })] }), _jsx("div", { style: { fontSize: '12px', color: 'var(--text-secondary)' }, children: hierarchyVisibleLevelCounts.length > 0
-                                                        ? hierarchyVisibleLevelCounts.map((entry) => `L${entry.level}: ${entry.count}`).join(' • ')
-                                                        : 'No linked hierarchy tasks in current filters.' })] })) })] }), _jsxs("div", { style: {
-                                    border: '1px solid var(--border-color)',
-                                    borderRadius: '10px',
-                                    padding: '10px',
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    gap: '8px'
-                                }, children: [_jsx("div", { style: { fontSize: '12px', fontWeight: 600 }, children: "Display" }), _jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: '8px', fontSize: '13px' }, children: [_jsx("input", { type: "checkbox", checked: hierarchyShowUnlinkedColumn, onChange: (e) => {
-                                                    const next = e.target.checked;
-                                                    setHierarchyShowUnlinkedColumn(next);
-                                                    if (!next && parentTaskFilterMode === 'unlinked') {
-                                                        setParentTaskFilterMode('all');
-                                                    }
-                                                } }), "Show unlinked column"] }), _jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: '8px', fontSize: '13px' }, children: [_jsx("input", { type: "checkbox", checked: hierarchyChildOrderMode === 'manual', onChange: (e) => setHierarchyChildOrderMode(e.target.checked ? 'manual' : 'auto') }), "Sort by parent task order"] }), _jsx("div", { style: { fontSize: '11px', color: 'var(--text-tertiary)' }, children: "Keeps siblings in the order defined on the parent task." })] })] })), groupBy === 'schedule' && (_jsxs("aside", { className: styles.appScrollbar, style: {
-                            position: 'absolute',
-                            top: 0,
-                            right: 0,
-                            bottom: 0,
-                            width: '320px',
-                            minWidth: '320px',
-                            borderLeft: '1px solid var(--border-color)',
-                            background: 'var(--bg-secondary)',
-                            padding: '12px',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            gap: '12px',
-                            zIndex: 40,
-                            overflowY: 'auto',
-                            transform: scheduleSidebarOpen ? 'translateX(0)' : 'translateX(108%)',
-                            pointerEvents: scheduleSidebarOpen ? 'auto' : 'none',
-                            transition: 'transform 220ms cubic-bezier(0.4, 0, 0.2, 1)',
-                            willChange: 'transform'
-                        }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '8px', fontWeight: 600 }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: [_jsx(CalendarDays, { size: 16 }), _jsx("span", { children: "Schedule Controls" })] }), _jsx("button", { type: "button", className: styles.headerActionBtn, onClick: () => setScheduleSidebarOpen(false), title: "Hide Schedule Sidebar", children: _jsx(PanelRightClose, { size: 16 }) })] }), _jsxs("div", { style: { fontSize: '12px', color: 'var(--text-secondary)' }, children: ["Week of ", scheduleWeekLabel] }), _jsxs("div", { style: {
-                                    border: '1px solid var(--border-color)',
-                                    borderRadius: '10px',
-                                    padding: '10px'
-                                }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '8px' }, children: [_jsx("button", { className: styles.headerActionBtn, onClick: () => {
-                                                    const prev = new Date(scheduleMonthDate);
-                                                    prev.setMonth(scheduleMonthDate.getMonth() - 1);
-                                                    setScheduleCalendarMonth(`${prev.getFullYear()}-${String(prev.getMonth() + 1).padStart(2, '0')}`);
-                                                }, title: "Previous month", children: _jsx(ChevronLeft, { size: 14 }) }), _jsx("div", { style: { fontSize: '12px', fontWeight: 600 }, children: scheduleCalendarMonthLabel }), _jsx("button", { className: styles.headerActionBtn, onClick: () => {
-                                                    const next = new Date(scheduleMonthDate);
-                                                    next.setMonth(scheduleMonthDate.getMonth() + 1);
-                                                    setScheduleCalendarMonth(`${next.getFullYear()}-${String(next.getMonth() + 1).padStart(2, '0')}`);
-                                                }, title: "Next month", children: _jsx(ChevronRight, { size: 14 }) })] }), _jsx("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(7, minmax(0, 1fr))', gap: '4px', marginBottom: '4px' }, children: calendarWeekdayLabels.map((label) => (_jsx("div", { style: { fontSize: '11px', color: 'var(--text-secondary)', textAlign: 'center' }, children: label }, label))) }), _jsx("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(7, minmax(0, 1fr))', gap: '4px' }, children: calendarCells.map((date) => {
-                                            const dateOnly = toDateOnlyLocal(date);
-                                            const isOutsideMonth = date.getMonth() !== scheduleMonthDate.getMonth();
-                                            const weekStartForCell = startOfWeek(date, globalWeekStartsOn);
-                                            const isSelectedWeek = toDateOnlyLocal(weekStartForCell) === toDateOnlyLocal(scheduleWeekStart);
-                                            const isSelectedDate = dateOnly === scheduleSelectedDate;
-                                            const isToday = dateOnly === todayDateOnly;
-                                            const isPast = dateOnly < todayDateOnly;
-                                            const signal = calendarTaskSignals.get(dateOnly);
-                                            const hasScheduledTasks = !!signal;
-                                            const hasExpiredScheduledTasks = !!signal?.hasExpired;
-                                            return (_jsxs("button", { onClick: () => {
-                                                    setScheduleSelectedDate(dateOnly);
-                                                    setScheduleCalendarMonth(`${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`);
-                                                }, style: {
-                                                    border: isSelectedDate
-                                                        ? '1px solid #2563eb'
-                                                        : isToday
-                                                            ? '1px solid rgba(245, 158, 11, 0.95)'
-                                                            : '1px solid transparent',
-                                                    borderRadius: '8px',
-                                                    padding: '6px 0',
-                                                    fontSize: '12px',
-                                                    position: 'relative',
-                                                    background: isSelectedDate
-                                                        ? 'rgba(59,130,246,0.22)'
-                                                        : isToday
-                                                            ? 'rgba(245,158,11,0.16)'
-                                                            : isSelectedWeek
-                                                                ? 'rgba(59,130,246,0.18)'
-                                                                : 'transparent',
-                                                    color: isOutsideMonth ? 'var(--text-tertiary)' : 'var(--text-primary)',
-                                                    cursor: 'pointer',
-                                                    fontWeight: isSelectedDate || isToday ? 700 : 500,
-                                                    opacity: isPast ? 0.42 : 1
-                                                }, title: `${isToday ? `${dateOnly} (Today)` : dateOnly}`
-                                                    + (hasScheduledTasks ? ` • ${signal?.count} scheduled` : '')
-                                                    + (hasExpiredScheduledTasks ? ' • includes expired' : ''), children: [date.getDate(), hasScheduledTasks && (_jsx("span", { style: {
-                                                            position: 'absolute',
-                                                            left: '50%',
-                                                            bottom: '3px',
-                                                            transform: 'translateX(-50%)',
-                                                            width: '5px',
-                                                            height: '5px',
-                                                            borderRadius: '999px',
-                                                            background: hasExpiredScheduledTasks ? '#ef4444' : '#3b82f6',
-                                                            opacity: isOutsideMonth ? 0.6 : 0.95
-                                                        } }))] }, dateOnly));
-                                        }) }), _jsx("div", { style: { display: 'flex', justifyContent: 'space-between', marginTop: '10px' }, children: _jsx("button", { className: styles.headerActionBtn, onClick: () => {
-                                                const now = new Date();
-                                                setScheduleSelectedDate(toDateOnlyLocal(now));
-                                                setScheduleCalendarMonth(`${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`);
-                                            }, title: "Jump to current week", children: "Today" }) })] }), _jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: '8px', fontSize: '13px' }, children: [_jsx("input", { type: "checkbox", checked: scheduleShowWeekends, onChange: (e) => setScheduleShowWeekends(e.target.checked) }), "Show weekends"] }), _jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: '8px', fontSize: '13px' }, children: [_jsx("input", { type: "checkbox", checked: scheduleShowBacklog, onChange: (e) => setScheduleShowBacklog(e.target.checked) }), "Show backlog"] }), _jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: '8px', fontSize: '13px' }, children: [_jsx("input", { type: "checkbox", checked: scheduleOnlyExpired, onChange: (e) => setScheduleOnlyExpired(e.target.checked) }), "Only expired/overdue"] }), expiredScheduledCount > 0 && (_jsxs("div", { style: {
-                                    border: '1px solid var(--border-color)',
-                                    borderRadius: '10px',
-                                    padding: '10px',
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    gap: '8px'
-                                }, children: [_jsx("div", { style: { fontSize: '12px', fontWeight: 600 }, children: "Expired Tasks" }), _jsxs("div", { style: { fontSize: '12px', color: 'var(--text-secondary)', display: 'flex', flexDirection: 'column', gap: '2px' }, children: [_jsxs("span", { children: [expiredScheduledCount, " expired"] }), _jsxs("span", { children: [overdueDueCount, " overdue"] })] }), _jsx("button", { className: styles.headerActionBtn, onClick: handleMoveExpiredToSelectedWeek, disabled: scheduleBulkBusy || expiredLeafCandidates.length === 0, title: "Move expired leaf tasks to the selected week while keeping weekday alignment", style: { justifyContent: 'flex-start', border: '1px solid var(--border-color)' }, children: scheduleBulkBusy ? 'Working...' : 'Schedule to selected week' }), _jsx("button", { className: styles.headerActionBtn, onClick: handleMoveExpiredToBacklog, disabled: scheduleBulkBusy || expiredRecoveryCandidates.length === 0, title: "Unschedule expired/overdue tasks back to backlog", style: { justifyContent: 'flex-start', border: '1px solid var(--border-color)' }, children: scheduleBulkBusy ? 'Working...' : 'Unschedule to backlog' })] }))] }))] })), _jsxs(Modal, { isOpen: activeTab === 'add', onClose: handleCloseModal, title: editingTaskId ? 'Edit Task' : 'New Task', size: "md", theme: currentTheme, draggable: true, closeOnOverlayClick: false, children: [_jsx(TaskActionHeader, { editingTaskId: editingTaskId, loading: loading, title: title, currentTask: currentTask, handleSubmit: handleSubmit, resetForm: resetForm, handleCopyId: handleCopyId, copiedId: copiedId, tasks: tasks, handleToggleInProgress: handleToggleInProgress, handleToggleReview: handleToggleReview, handleToggleComplete: handleToggleComplete, handleToggleCancel: handleToggleCancel, handleArchiveTask: handleArchiveTask }), _jsx(TaskForm, { editingTaskId: editingTaskId, error: error, title: title, description: description, category: category, type: type, priority: priority, complexity: complexity, manualComplexityEnabled: manualComplexityEnabled, approach: approach, assignee: assignee, scheduledDate: scheduledDate, dueDate: dueDate, parentTaskIdInput: parentTaskIdInput, addChildTaskIdInput: addChildTaskIdInput, formTaxonomies: formTaxonomies, onTaxonomyChange: (id, val) => setFormTaxonomies(prev => ({ ...prev, [id]: val })), onParentTaskIdInputChange: setParentTaskIdInput, onAddChildTaskIdInputChange: setAddChildTaskIdInput, taxonomies: taxonomies, selectedSpecialists: selectedSpecialists, comments: comments, newCommentText: newCommentText, contextFiles: screenshots, contextLinkBrowsePath: contextLinkBrowsePath, descriptionFocused: descriptionFocused, showMarkdownHelp: showMarkdownHelp, showSpecialists: showSpecialists, showChecklist: showChecklist, checklistEnabled: checklistDropdownEnabled, showTaskRelationships: showTaskRelationships, showChildTasks: showChildTasks, showComments: showComments, categories: activeCategories, types: activeTypes, priorities: priorities, approaches: approaches, availableSpecialists: availableSpecialists, copiedId: copiedId, onTitleChange: setTitle, onDescriptionChange: setDescription, onCategoryChange: setCategory, onTypeChange: setType, onPriorityChange: setPriority, onComplexityChange: setComplexity, onApproachChange: (val) => { setApproach(val); setFormTaxonomies(prev => ({ ...prev, approach: val })); }, onAssigneeChange: setAssignee, onScheduledDateChange: setScheduledDate, onDueDateChange: setDueDate, onSelectedSpecialistsChange: setSelectedSpecialists, onNewCommentTextChange: setNewCommentText, onDescriptionFocusedChange: setDescriptionFocused, onShowMarkdownHelpChange: setShowMarkdownHelp, onShowSpecialistsChange: setShowSpecialists, onShowChecklistChange: setShowChecklist, onShowTaskRelationshipsChange: setShowTaskRelationships, onShowChildTasksChange: setShowChildTasks, onShowCommentsChange: setShowComments, onOpenSettings: (section) => {
+                                }, children: _jsx(ChevronLeft, { size: 16 }) }))] }), groupBy === 'schedule' && (_jsx(ScheduleSidebar, { open: scheduleSidebarOpen, onClose: () => setScheduleSidebarOpen(false), scheduleSelectedDate: scheduleSelectedDate, setScheduleSelectedDate: setScheduleSelectedDate, scheduleCalendarMonth: scheduleCalendarMonth, setScheduleCalendarMonth: setScheduleCalendarMonth, scheduleShowWeekends: scheduleShowWeekends, setScheduleShowWeekends: setScheduleShowWeekends, scheduleShowBacklog: scheduleShowBacklog, setScheduleShowBacklog: setScheduleShowBacklog, scheduleOnlyExpired: scheduleOnlyExpired, setScheduleOnlyExpired: setScheduleOnlyExpired, expiredScheduledCount: expiredScheduledCount, overdueDueCount: overdueDueCount, expiredLeafCandidates: expiredLeafCandidates, expiredRecoveryCandidates: expiredRecoveryCandidates, onMoveExpiredToSelectedWeek: handleMoveExpiredToSelectedWeek, onMoveExpiredToBacklog: handleMoveExpiredToBacklog, scheduleBulkBusy: scheduleBulkBusy, globalWeekStartsOn: globalWeekStartsOn, resolvedLocale: resolvedLocale, todayDateOnly: todayDateOnly, scheduleBaseTasks: scheduleBaseTasks, scheduleWeekStart: scheduleWeekStart, scheduleWeekLabel: scheduleWeekLabel }))] })), _jsxs(Modal, { isOpen: activeTab === 'add', onClose: handleCloseModal, title: editingTaskId ? (currentTask?.isDeleted ? 'Deleted Task' : 'Edit Task') : 'New Task', size: taskModalFullscreen ? 'full' : 'xl', theme: currentTheme, headerActions: (_jsx("button", { className: "tf-control-icon", onClick: () => setTaskModalFullscreen((value) => !value), title: taskModalFullscreen ? 'Exit full screen' : 'Enter full screen', "aria-label": taskModalFullscreen ? 'Exit full screen' : 'Enter full screen', children: taskModalFullscreen ? _jsx(Minimize2, { size: 18 }) : _jsx(Maximize2, { size: 18 }) })), draggable: !taskModalFullscreen, closeOnOverlayClick: false, children: [_jsx(TaskActionHeader, { editingTaskId: editingTaskId, loading: loading, autoSaveState: autoSaveState, title: title, currentTask: currentTask, currentTaskWorkstream: currentTaskWorkstream, currentTaskInitiative: currentTaskInitiative, workstreamInput: workstreamInput, onWorkstreamInputChange: setWorkstreamInput, onSetWorkstreamForCurrentTask: handleSetWorkstreamForCurrentTask, handleSubmit: handleSubmit, resetForm: resetForm, handleCopyId: handleCopyId, copiedId: copiedId, tasks: tasks, handleToggleInProgress: handleToggleInProgress, handleToggleReview: handleToggleReview, handleToggleComplete: handleToggleComplete, handleToggleCancel: handleToggleCancel, handleSetStatus: handleSetStatus, handleArchiveTask: handleArchiveTask, handleRestoreDeletedTask: currentTask?.deletedRecordId
+                            ? (deletedRecordId) => {
+                                void handleRestoreDeletedTask(deletedRecordId);
+                            }
+                            : undefined, handlePermanentlyDeleteDeletedTask: currentTask?.deletedRecordId
+                            ? (deletedRecordId) => {
+                                const confirmed = window.confirm('Permanently delete this task? This cannot be undone.');
+                                if (!confirmed)
+                                    return;
+                                void handlePermanentlyDeleteDeletedTask(deletedRecordId);
+                                resetForm();
+                                setActiveTab('tasks');
+                            }
+                            : undefined }), _jsx(TaskForm, { editingTaskId: editingTaskId, error: error, title: title, description: description, checklistItems: checklistItems, category: category, type: type, priority: priority, complexity: complexity, manualComplexityEnabled: manualComplexityEnabled, approach: approach, assignee: assignee, scheduledDate: scheduledDate, dueDate: dueDate, workstreamInput: workstreamInput, formTaxonomies: formTaxonomies, onTaxonomyChange: (id, val) => setFormTaxonomies(prev => ({ ...prev, [id]: val })), taxonomies: taxonomies, comments: comments, newCommentText: newCommentText, contextFiles: attachments, currentWorkspaceId: currentWorkspaceId, apiBaseUrl: apiBaseUrl, descriptionFocused: descriptionFocused, showMarkdownHelp: showMarkdownHelp, showChecklist: showChecklist, checklistEnabled: checklistDropdownEnabled, showComments: showComments, categories: activeCategories, types: activeTypes, priorities: priorities, taxonomyDisplayLabels: taxonomyDisplayLabels, assigneeOptions: assigneeOptions, workstreams: props.workstreams, copiedId: copiedId, onTitleChange: setTitle, onDescriptionChange: setDescription, onChecklistItemsChange: setChecklistItems, onCategoryChange: setCategory, onTypeChange: setType, onPriorityChange: setPriority, onComplexityChange: setComplexity, onApproachChange: (val) => { setApproach(val); setFormTaxonomies(prev => ({ ...prev, approach: val })); }, onAssigneeChange: setAssignee, onScheduledDateChange: setScheduledDate, onDueDateChange: setDueDate, onWorkstreamInputChange: setWorkstreamInput, onNewCommentTextChange: setNewCommentText, onDescriptionFocusedChange: setDescriptionFocused, onShowMarkdownHelpChange: setShowMarkdownHelp, onShowChecklistChange: setShowChecklist, onShowCommentsChange: setShowComments, onOpenSettings: (section) => {
                             setSettingsSection(section);
                             setActiveTab('settings');
-                        }, onSubmit: handleSubmit, commentsEndRef: commentsEndRef, onAddComment: () => handleAddComment(newCommentText), onSetParentForCurrentTask: handleSetParentForCurrentTask, onAddChildToCurrentTask: handleAddChildToCurrentTask, onCreateChildForCurrentTask: handleCreateChildForCurrentTask, onUnlinkChildTask: handleUnlinkChildTask, onReorderChildTasks: handleReorderChildTasks, onOpenTaskById: handleOpenTaskById, onAddContextFile: (file) => {
-                            setScreenshots(prev => [...prev, file]);
-                        }, onBrowseContextLinkPath: () => {
-                            setBrowserTarget({ type: 'context-link' });
-                            fetchFolders('');
-                            setShowFolderBrowser(true);
+                        }, onSubmit: handleSubmit, commentsEndRef: commentsEndRef, onAddComment: () => handleAddComment(newCommentText), onOpenTaskById: handleOpenTaskById, onAddContextFile: (file) => {
+                            let nextAttachments = attachments;
+                            setAttachments((prev) => {
+                                nextAttachments = [...prev, file];
+                                return nextAttachments;
+                            });
+                            setAttachmentsDirty(true);
+                            if (editingTaskId) {
+                                void handleUpdateTask(editingTaskId, { attachments: nextAttachments });
+                            }
                         }, onRemoveContextFile: async (index) => {
-                            const screenshot = screenshots[index];
-                            const path = typeof screenshot === 'string' ? screenshot : screenshot.path;
-                            setScreenshots(prev => prev.filter((_, i) => i !== index));
-                            if (typeof path === 'string' && path.startsWith('/api/taskforce/context/')) {
-                                try {
-                                    await fetch(path, { method: 'DELETE' });
-                                }
-                                catch { }
+                            let nextAttachments = attachments;
+                            setAttachments((prev) => {
+                                nextAttachments = prev.filter((_, i) => i !== index);
+                                return nextAttachments;
+                            });
+                            setAttachmentsDirty(true);
+                            if (editingTaskId) {
+                                void handleUpdateTask(editingTaskId, { attachments: nextAttachments });
                             }
                         }, onUpdateContextCaption: (index, caption) => {
-                            setScreenshots(prev => prev.map((s, i) => {
-                                if (i !== index)
-                                    return s;
-                                if (typeof s === 'string')
-                                    return { path: s, caption, timestamp: new Date().toISOString() };
-                                return { ...s, caption };
-                            }));
-                        }, onCopyId: handleCopyId, onToggleInProgress: handleToggleInProgress, onToggleReview: handleToggleReview, onToggleComplete: handleToggleComplete, onToggleCancel: handleToggleCancel, onArchiveTask: handleArchiveTask, onUnarchive: handleUnarchive, currentTask: currentTask, currentTaskParent: currentTaskParent, currentTaskChildren: currentTaskChildren })] }), _jsx(Modal, { isOpen: activeTab === 'settings', onClose: handleCloseModal, title: "Settings", size: "md", theme: currentTheme, draggable: true, isSettings: true, closeOnOverlayClick: false, children: _jsx(TaskSettings, { settingsModel: settingsModel, onSectionChange: setSettingsSection }) }), _jsx(Modal, { isOpen: !!scheduleWarningPrompt, onClose: cancelScheduleWarning, title: "Date Warning", size: "sm", theme: currentTheme, draggable: false, closeOnOverlayClick: false, children: _jsxs("div", { className: styles.form, style: { padding: '16px', gap: '12px' }, children: [_jsx("p", { style: { margin: 0, fontSize: '13px', color: 'var(--text-secondary)' }, children: "Due date is before scheduled date." }), scheduleWarningPrompt && (_jsxs("p", { style: { margin: 0, fontSize: '12px', color: 'var(--text-muted)' }, children: ["Due: ", scheduleWarningPrompt.dueDate, " \u00B7 Scheduled: ", scheduleWarningPrompt.scheduledDate] })), _jsxs("div", { className: styles.formActions, children: [_jsx("button", { className: styles.cancelBtn, onClick: cancelScheduleWarning, children: "Go Back" }), _jsx("button", { className: styles.submitBtn, onClick: confirmScheduleWarning, children: "Save Anyway" })] })] }) }), _jsx(Modal, { isOpen: !!scheduleParentDropPrompt, onClose: cancelScheduleParentDrop, title: "Schedule Descendants", size: "sm", theme: currentTheme, draggable: false, closeOnOverlayClick: false, children: _jsxs("div", { className: styles.form, style: { padding: '16px', gap: '12px' }, children: [scheduleParentDropPrompt && (_jsxs(_Fragment, { children: [_jsxs("p", { style: { margin: 0, fontSize: '13px', color: 'var(--text-secondary)' }, children: ["Schedule unscheduled leaf tasks under ", _jsx("strong", { children: scheduleParentDropPrompt.parentTitle }), " to ", _jsx("strong", { children: scheduleParentDropPrompt.targetDate }), "?"] }), _jsxs("p", { style: { margin: 0, fontSize: '12px', color: 'var(--text-muted)' }, children: [scheduleParentDropPrompt.toScheduleLeafTaskIds.length, " leaf task", scheduleParentDropPrompt.toScheduleLeafTaskIds.length === 1 ? '' : 's', " will be scheduled.", scheduleParentDropPrompt.alreadyScheduledLeafCount > 0 ? ` ${scheduleParentDropPrompt.alreadyScheduledLeafCount} already scheduled leaf task${scheduleParentDropPrompt.alreadyScheduledLeafCount === 1 ? '' : 's'} will be skipped.` : ''] })] })), _jsxs("div", { className: styles.formActions, children: [_jsx("button", { className: styles.cancelBtn, onClick: cancelScheduleParentDrop, disabled: scheduleParentDropBusy, children: "Cancel" }), _jsx("button", { className: styles.submitBtn, onClick: confirmScheduleParentDrop, disabled: scheduleParentDropBusy, children: scheduleParentDropBusy ? 'Scheduling...' : 'Schedule' })] })] }) }), _jsx(Modal, { isOpen: showHelpModal, onClose: () => setShowHelpModal(false), title: "Quick Start", size: "md", theme: currentTheme, draggable: true, children: _jsxs("div", { className: modalStyles.form, style: { paddingTop: '18px' }, children: [_jsx("p", { style: { margin: 0, color: 'var(--text-secondary)' }, children: "Use this quick guide to get productive in Taskforce dashboard mode." }), _jsxs("div", { children: [_jsx("strong", { children: "1. Capture work" }), _jsxs("p", { style: { margin: '4px 0 0 0', color: 'var(--text-secondary)' }, children: ["Click ", _jsx("code", { children: "Add Task" }), ", write a short title, and save."] })] }), _jsxs("div", { children: [_jsx("strong", { children: "2. Plan the board" }), _jsxs("p", { style: { margin: '4px 0 0 0', color: 'var(--text-secondary)' }, children: ["Use ", _jsx("code", { children: "Sort" }), ", ", _jsx("code", { children: "Group" }), ", and ", _jsx("code", { children: "Filters" }), " in the header."] })] }), _jsxs("div", { children: [_jsx("strong", { children: "3. Execute and stage" }), _jsxs("p", { style: { margin: '4px 0 0 0', color: 'var(--text-secondary)' }, children: ["Move tasks through ", _jsx("code", { children: "Task" }), ", ", _jsx("code", { children: "In Progress" }), ", ", _jsx("code", { children: "Review" }), ", and ", _jsx("code", { children: "Done" }), "."] })] }), _jsxs("div", { children: [_jsx("strong", { children: "4. Archive finished work" }), _jsx("p", { style: { margin: '4px 0 0 0', color: 'var(--text-secondary)' }, children: "Archive completed/cancelled tasks to keep active board signal high." })] }), _jsxs("div", { className: modalStyles.formActions, style: { display: 'flex', justifyContent: 'flex-end', gap: '10px' }, children: [_jsx("button", { className: styles.cancelBtn, onClick: () => {
+                            let nextAttachments = attachments;
+                            setAttachments((prev) => {
+                                nextAttachments = prev.map((s, i) => {
+                                    if (i !== index)
+                                        return s;
+                                    if (typeof s === 'string')
+                                        return { path: s, caption, timestamp: new Date().toISOString() };
+                                    return { ...s, caption };
+                                });
+                                return nextAttachments;
+                            });
+                            setAttachmentsDirty(true);
+                            if (editingTaskId) {
+                                void handleUpdateTask(editingTaskId, { attachments: nextAttachments });
+                            }
+                        }, onCopyId: handleCopyId, onToggleInProgress: handleToggleInProgress, onToggleReview: handleToggleReview, onToggleComplete: handleToggleComplete, onToggleCancel: handleToggleCancel, onSetStatus: handleSetStatus, onArchiveTask: handleArchiveTask, onUnarchive: (taskId) => {
+                            if (currentTask?.isDeleted) {
+                                const deletedRecord = deletedTaskRecordByTaskId.get(taskId);
+                                if (!deletedRecord)
+                                    return;
+                                void handleRestoreDeletedTask(deletedRecord.id);
+                                return;
+                            }
+                            void handleUnarchive(taskId);
+                        }, currentTask: currentTask })] }), _jsx(Modal, { isOpen: activeTab === 'settings', onClose: handleCloseModal, title: "Settings", size: "xl", theme: currentTheme, draggable: true, isSettings: true, closeOnOverlayClick: false, children: _jsx(Suspense, { fallback: _jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '2rem' }, children: _jsx(Loader2, { size: 20, className: styles.spinner }) }), children: _jsx(TaskSettings, { settingsModel: settingsModel, onSectionChange: setSettingsSection }) }) }), _jsx(Modal, { isOpen: !!scheduleWarningPrompt, onClose: cancelScheduleWarning, title: "Date Warning", size: "sm", theme: currentTheme, draggable: false, closeOnOverlayClick: false, children: _jsxs("div", { className: `${styles.form} tf-inline-stack-sm`, style: { padding: '16px', gap: '12px' }, children: [_jsx("p", { className: "tf-text-body", children: "Due date is before scheduled date." }), scheduleWarningPrompt && (_jsxs("p", { className: "tf-text-helper", children: ["Due: ", scheduleWarningPrompt.dueDate, " \u00B7 Scheduled: ", scheduleWarningPrompt.scheduledDate] })), _jsxs("div", { className: styles.formActions, children: [_jsx("button", { className: styles.cancelBtn, onClick: cancelScheduleWarning, children: "Go Back" }), _jsx("button", { className: styles.submitBtn, onClick: confirmScheduleWarning, children: "Save Anyway" })] })] }) }), _jsx(Modal, { isOpen: showHelpModal, onClose: () => setShowHelpModal(false), title: "Quick Start", size: "md", theme: currentTheme, draggable: true, children: _jsxs("div", { className: `${modalStyles.form} ${managementStyles.modalBody}`, children: [_jsx("p", { className: managementStyles.mutedText, children: "Use this quick guide to get productive in Taskforce dashboard mode." }), _jsxs("div", { children: [_jsx("strong", { children: "1. Capture work" }), _jsxs("p", { className: managementStyles.sectionText, children: ["Click ", _jsx("code", { children: "Add Task" }), ", write a short title, and save."] })] }), _jsxs("div", { children: [_jsx("strong", { children: "2. Plan the board" }), _jsxs("p", { className: managementStyles.sectionText, children: ["Use ", _jsx("code", { children: "Sort" }), ", ", _jsx("code", { children: "Group" }), ", and ", _jsx("code", { children: "Filters" }), " in the header."] })] }), _jsxs("div", { children: [_jsx("strong", { children: "3. Execute and stage" }), _jsxs("p", { className: managementStyles.sectionText, children: ["Move tasks through ", _jsx("code", { children: "Task" }), ", ", _jsx("code", { children: "In Progress" }), ", ", _jsx("code", { children: "Review" }), ", and ", _jsx("code", { children: "Done" }), "."] })] }), _jsxs("div", { children: [_jsx("strong", { children: "4. Archive finished work" }), _jsx("p", { className: managementStyles.sectionText, children: "Archive completed/cancelled tasks to keep active board signal high." })] }), _jsxs("div", { className: `${modalStyles.formActions} ${managementStyles.modalActionsEnd}`, children: [_jsx("button", { className: styles.cancelBtn, onClick: () => {
                                         setShowHelpModal(false);
                                         setActiveTab('settings');
                                         setSettingsSection('general');
-                                    }, children: "Open Settings" }), _jsx("button", { className: styles.submitBtn, onClick: () => setShowHelpModal(false), children: "Close Tutorial" })] })] }) }), _jsx(Modal, { isOpen: showAccountHub, onClose: () => setShowAccountHub(false), title: "Account Hub", size: "md", theme: currentTheme, draggable: true, children: _jsxs("div", { className: modalStyles.form, style: { paddingTop: '18px' }, children: [_jsx("p", { style: { margin: 0, color: 'var(--text-secondary)' }, children: "Manage sign in, profile, and workspace controls from one place." }), _jsxs("div", { className: styles.accountHubCard, children: [_jsx("strong", { children: "Authentication" }), _jsx("p", { style: { margin: '4px 0 0 0', color: 'var(--text-secondary)' }, children: runtimeMode === 'cloud'
+                                    }, children: "Open Settings" }), _jsx("button", { className: styles.submitBtn, onClick: () => setShowHelpModal(false), children: "Close Tutorial" })] })] }) }), _jsx(Modal, { isOpen: showEditProfileModal, onClose: () => setShowEditProfileModal(false), title: "Edit Profile", size: "sm", theme: currentTheme, draggable: true, footer: (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: styles.secondaryButton, onClick: () => setShowEditProfileModal(false), disabled: profileSaveBusy, children: "Cancel" }), _jsx("button", { type: "button", className: styles.primaryUpdateBtn, onClick: () => { void handleSaveProfile(); }, disabled: profileSaveBusy || !profileDisplayNameDraft.trim(), children: profileSaveBusy ? 'Saving...' : 'Save Profile' })] })), children: _jsxs("div", { className: `${modalStyles.form} ${managementStyles.modalBody}`, children: [_jsx("p", { className: managementStyles.sectionText, children: "Update the name shown around your account and shared workspace surfaces." }), _jsxs("label", { className: managementStyles.inlineFieldLabel, children: ["Display name", _jsx("input", { className: styles.input, type: "text", value: profileDisplayNameDraft, onChange: (event) => setProfileDisplayNameDraft(event.target.value), placeholder: "Display name", disabled: profileSaveBusy })] }), _jsxs("label", { className: managementStyles.inlineFieldLabel, children: ["Email", _jsx("input", { className: styles.input, type: "email", value: authEmailLabel, readOnly: true, disabled: true })] }), profileSaveError && (_jsx("p", { className: `${authStyles.loginError} ${managementStyles.errorText}`, children: profileSaveError })), profileSaveNotice && !profileSaveError && (_jsx("p", { className: managementStyles.errorText, children: profileSaveNotice }))] }) }), _jsx(Modal, { isOpen: showAccountHub, onClose: () => setShowAccountHub(false), title: "Account Hub", size: "md", theme: currentTheme, draggable: true, children: _jsxs("div", { className: `${modalStyles.form} ${managementStyles.modalBody}`, children: [_jsx("p", { className: managementStyles.mutedText, children: "Manage sign in, profile, and workspace controls from one place." }), _jsxs("div", { className: accountStyles.accountHubCard, children: [_jsx("strong", { children: "Authentication" }), _jsx("p", { className: managementStyles.sectionText, children: runtimeMode === 'cloud'
                                         ? (authRequiredForApi
                                             ? (isAuthenticated ? 'Signed in. API access is enabled.' : 'Cloud mode requires sign in before app usage.')
                                             : 'Cloud runtime with optional authentication.')
-                                        : 'Local runtime allows guest usage without sign in.' }), _jsx("p", { style: { margin: '6px 0 0 0', color: 'var(--text-secondary)' }, children: isAuthenticated
+                                        : 'Local runtime allows guest usage without sign in.' }), _jsx("p", { className: managementStyles.sectionTextSpaced, children: isAuthenticated
                                         ? (hasAuthIdentity
-                                            ? _jsxs(_Fragment, { children: ["Signed in as ", _jsx("span", { className: styles.accountIdentityEmail, children: authIdentityLabel })] })
+                                            ? _jsxs(_Fragment, { children: ["Signed in as ", _jsx("span", { className: accountStyles.accountIdentityEmail, children: authIdentityLabel })] })
                                             : 'Signed in')
-                                        : 'Signed in as: not signed in' }), runtimeMode === 'cloud' && authRequiredForApi && !isAuthenticated && (_jsx("p", { style: { marginTop: '10px', color: 'var(--text-secondary)' }, children: "Use the `/login` screen to sign in." }))] }), _jsxs("div", { className: styles.accountHubCard, children: [_jsx("strong", { children: "Profile & Account" }), _jsx("p", { style: { margin: '4px 0 0 0', color: 'var(--text-secondary)' }, children: "Profile editing and account preferences will live here." })] }), _jsxs("div", { className: styles.accountHubCard, children: [_jsx("strong", { children: "Billing" }), runtimeMode !== 'cloud' ? (_jsx("p", { style: { margin: '4px 0 0 0', color: 'var(--text-secondary)' }, children: "Billing actions are available in cloud runtime only." })) : !isAuthenticated ? (_jsx("p", { style: { margin: '4px 0 0 0', color: 'var(--text-secondary)' }, children: "Sign in to manage subscription billing." })) : (_jsxs(_Fragment, { children: [billingLoading && (_jsx("p", { style: { margin: '6px 0 0 0', color: 'var(--text-secondary)' }, children: "Loading billing status..." })), billingError && (_jsx("p", { className: styles.loginError, style: { marginTop: '8px' }, children: billingError })), billingActionError && (_jsx("p", { className: styles.loginError, style: { marginTop: '8px' }, children: billingActionError })), billingNotice && (_jsx("p", { style: { margin: '8px 0 0 0', color: 'var(--text-secondary)' }, children: billingNotice })), _jsxs("p", { style: { margin: '6px 0 0 0', color: 'var(--text-secondary)' }, children: ["Plan: ", _jsx("code", { children: String(billingStatus?.planId || 'free') }), ' · ', "Entitlement: ", _jsx("code", { children: String(billingStatus?.entitlementState || 'free') })] }), _jsxs("p", { style: { margin: '4px 0 0 0', color: 'var(--text-secondary)' }, children: ["Stripe status: ", _jsx("code", { children: String(billingStatus?.stripeStatus || 'n/a') }), billingStatus?.effectiveUntil ? ` · Effective until ${new Date(billingStatus.effectiveUntil).toLocaleString()}` : ''] }), _jsx("div", { style: { marginTop: '10px', display: 'flex', gap: '8px', flexWrap: 'wrap' }, children: _jsxs("label", { className: styles.accountMenuMeta, style: { display: 'inline-flex', alignItems: 'center', gap: '8px' }, children: ["Interval", _jsxs("select", { className: styles.input, value: billingIntervalChoice, onChange: (event) => setBillingIntervalChoice(event.target.value === 'year' ? 'year' : 'month'), disabled: billingActionBusy, children: [_jsx("option", { value: "month", children: "Monthly" }), _jsx("option", { value: "year", children: "Yearly" })] })] }) }), _jsxs("div", { style: { marginTop: '10px', display: 'flex', gap: '10px', justifyContent: 'flex-end', flexWrap: 'wrap' }, children: [_jsx("button", { className: styles.cancelBtn, onClick: () => { void loadBillingStatus(); }, disabled: billingActionBusy || billingLoading, children: "Refresh Billing" }), _jsx("button", { className: styles.cancelBtn, onClick: () => { void handleSwitchSubscriptionInterval(); }, disabled: billingActionBusy || !billingStatus?.stripeSubscriptionId, children: "Update Interval" }), _jsx("button", { className: styles.cancelBtn, onClick: () => { void handleOpenBillingPortal(); }, disabled: billingActionBusy || !billingStatus?.stripeCustomerId, children: "Manage Billing" }), _jsx("button", { className: styles.submitBtn, onClick: () => { void handleStartCheckout(); }, disabled: billingActionBusy, children: billingActionBusy ? 'Working...' : 'Start Checkout' })] })] }))] }), _jsxs("div", { className: styles.accountHubCard, children: [_jsx("strong", { children: "Workspace Audit Log" }), _jsx("p", { style: { margin: '4px 0 0 0', color: 'var(--text-secondary)' }, children: "Audit entries are workspace-scoped for the active workspace, not global account history." }), _jsxs("p", { style: { margin: '4px 0 0 0', color: 'var(--text-secondary)' }, children: ["Active workspace: ", _jsx("code", { children: currentWorkspaceId })] }), _jsx("div", { style: { marginTop: '10px', display: 'flex', gap: '10px', justifyContent: 'flex-end' }, children: _jsx("button", { className: styles.cancelBtn, onClick: () => {
+                                        : 'Signed in as: not signed in' }), runtimeMode === 'cloud' && authRequiredForApi && !isAuthenticated && (_jsx("p", { className: managementStyles.sectionTextTop, children: "Use the `/login` screen to sign in." }))] }), _jsxs("div", { className: accountStyles.accountHubCard, children: [_jsx("strong", { children: "Profile & Account" }), _jsx("p", { className: managementStyles.sectionText, children: "Profile editing and account preferences will live here." })] }), _jsxs("div", { className: accountStyles.accountHubCard, children: [_jsx("strong", { children: "Billing" }), !isAuthenticated ? (_jsx("p", { className: managementStyles.sectionText, children: "Sign in to manage subscription billing." })) : runtimeMode !== 'cloud' ? (_jsx("p", { className: managementStyles.sectionText, children: "Billing remains cloud-backed in local runtime and uses your connected cloud account." })) : (_jsxs(_Fragment, { children: [billingLoading && (_jsx("p", { className: managementStyles.sectionTextSpaced, children: "Loading billing status..." })), billingError && (_jsx("p", { className: `${authStyles.loginError} ${managementStyles.errorText}`, children: billingError })), billingActionError && (_jsx("p", { className: `${authStyles.loginError} ${managementStyles.errorText}`, children: billingActionError })), billingNotice && (_jsx("p", { className: managementStyles.errorText, children: billingNotice })), _jsxs("p", { className: managementStyles.sectionTextSpaced, children: ["Plan: ", _jsx("code", { children: String(billingStatus?.planId || 'n/a') }), ' · ', "Entitlement: ", _jsx("code", { children: String(billingStatus?.entitlementState || 'n/a') })] }), _jsxs("p", { className: managementStyles.sectionText, children: ["Stripe status: ", _jsx("code", { children: String(billingStatus?.stripeStatus || 'n/a') }), billingStatus?.effectiveUntil ? ` · Effective until ${new Date(billingStatus.effectiveUntil).toLocaleString()}` : ''] }), _jsx("div", { className: managementStyles.wrapRow, children: _jsxs("label", { className: `${accountStyles.accountMenuMeta} ${managementStyles.inlineFieldLabel}`, children: ["Interval", _jsxs("select", { className: styles.input, value: billingIntervalChoice, onChange: (event) => setBillingIntervalChoice(event.target.value === 'year' ? 'year' : 'month'), disabled: billingActionBusy, children: [_jsx("option", { value: "month", children: "Monthly" }), _jsx("option", { value: "year", children: "Yearly" })] })] }) }), _jsxs("div", { className: managementStyles.actionRowEnd, children: [_jsx("button", { className: styles.cancelBtn, onClick: () => { void loadBillingStatus(); }, disabled: billingActionBusy || billingLoading, children: "Refresh Billing" }), _jsx("button", { className: styles.cancelBtn, onClick: () => { void handleSwitchSubscriptionInterval(); }, disabled: billingActionBusy || !billingStatus?.stripeSubscriptionId, children: "Update Interval" }), _jsx("button", { className: styles.cancelBtn, onClick: () => { void handleOpenBillingPortal(); }, disabled: billingActionBusy || !billingStatus?.stripeCustomerId, children: "Manage Billing" }), _jsx("button", { className: styles.submitBtn, onClick: () => { void handleStartCheckout(); }, disabled: billingActionBusy, children: billingActionBusy ? 'Working...' : 'Start Checkout' })] })] }))] }), _jsxs("div", { className: accountStyles.accountHubCard, children: [_jsx("strong", { children: "Workspace Audit Log" }), _jsx("p", { className: managementStyles.sectionText, children: "Audit entries are workspace-scoped for the active workspace, not global account history." }), _jsxs("p", { className: managementStyles.sectionText, children: ["Active workspace: ", _jsx("code", { children: currentWorkspaceId })] }), _jsx("div", { className: managementStyles.actionRowEnd, children: _jsx("button", { className: styles.cancelBtn, onClick: () => {
                                             setShowAccountHub(false);
                                             void openTeamManagementModal();
                                             setTeamManagementTab('audit');
-                                        }, disabled: !canOpenTeamManagement, children: "Open Workspace Audit" }) })] }), _jsxs("div", { className: styles.accountHubCard, children: [_jsx("strong", { children: "Workspace Cloud Sync" }), _jsx("p", { style: { margin: '4px 0 0 0', color: 'var(--text-secondary)' }, children: canManageWorkspaceSync
+                                        }, disabled: !canOpenTeamManagement, children: "Open Workspace Audit" }) })] }), _jsxs("div", { className: accountStyles.accountHubCard, children: [_jsx("strong", { children: "Workspace Cloud Sync" }), _jsx("p", { className: managementStyles.sectionText, children: canManageWorkspaceSync
                                         ? (workspaceCloudSyncEnabled
-                                            ? `Enabled${workspaceSyncSourceOfTruth ? ` · Source: ${workspaceSyncSourceOfTruth}` : ''}`
+                                            ? `Enabled · ${syncStatusMeta.label}`
                                             : 'Disabled')
-                                        : 'Sign in to cloud account to enable workspace sync.' }), workspaceSyncError && (_jsx("p", { className: styles.loginError, style: { marginTop: '8px' }, children: workspaceSyncError })), _jsx("div", { style: { marginTop: '10px', display: 'flex', gap: '10px', justifyContent: 'flex-end' }, children: _jsx("button", { className: styles.cancelBtn, disabled: !canManageWorkspaceSync || workspaceSyncBusy, onClick: async () => {
-                                            if (!canManageWorkspaceSync)
-                                                return;
-                                            setWorkspaceSyncError(null);
-                                            if (!workspaceCloudSyncEnabled) {
-                                                setWorkspaceSyncBusy(true);
-                                                const result = await saveWorkspaceCloudSyncSettings({
-                                                    enabled: true,
-                                                    // I6: start false; the orchestrator marks it true after first successful pull.
-                                                    onboardingCompleted: false
-                                                });
-                                                if (!result.success)
-                                                    setWorkspaceSyncError(result.error || 'Failed to enable sync.');
-                                                setWorkspaceSyncBusy(false);
-                                                return;
-                                            }
-                                            setWorkspaceSyncBusy(true);
-                                            const result = await saveWorkspaceCloudSyncSettings({
-                                                enabled: false,
-                                                sourceOfTruth: workspaceSyncSourceOfTruth,
-                                                onboardingCompleted: workspaceSyncOnboardingCompleted
-                                            });
-                                            if (!result.success)
-                                                setWorkspaceSyncError(result.error || 'Failed to disable sync.');
-                                            setWorkspaceSyncBusy(false);
-                                        }, children: workspaceCloudSyncEnabled ? 'Disable Sync' : 'Enable Sync' }) })] }), _jsxs("div", { className: modalStyles.formActions, style: { display: 'flex', justifyContent: 'flex-end', gap: '10px' }, children: [_jsx("button", { className: styles.cancelBtn, onClick: () => {
+                                        : 'Sign in to cloud account to enable workspace sync.' }), workspaceSyncError && (_jsx("p", { className: `${authStyles.loginError} ${managementStyles.errorText}`, children: workspaceSyncError })), _jsx("div", { className: managementStyles.actionRowEnd, children: _jsx("button", { className: styles.cancelBtn, disabled: !canManageWorkspaceSync || syncControlBusy, onClick: () => { void handleWorkspaceSyncToggle(!workspaceCloudSyncEnabled); }, children: workspaceCloudSyncEnabled ? 'Disable Sync' : 'Enable Sync' }) })] }), _jsxs("div", { className: `${modalStyles.formActions} ${managementStyles.modalActionsEnd}`, children: [_jsx("button", { className: styles.cancelBtn, onClick: () => {
                                         setShowAccountHub(false);
                                         setShowHelpModal(true);
-                                    }, children: "Help & Tutorial" }), _jsx("button", { className: styles.submitBtn, onClick: () => setShowAccountHub(false), children: "Close" })] })] }) }), _jsx(Modal, { isOpen: showTeamManagementModal, onClose: () => setShowTeamManagementModal(false), title: "Team Management", size: "md", theme: currentTheme, draggable: true, children: _jsxs("div", { className: modalStyles.form, style: { paddingTop: '18px' }, children: [teamPlanMode !== 'team' && (_jsx("p", { className: styles.loginError, children: "Team management is only available in TEAM accounts." })), teamMgmtError && (_jsx("p", { className: styles.loginError, children: teamMgmtError })), _jsxs("div", { className: styles.settingsTabs, children: [_jsx("button", { className: `${styles.settingsTabBtn} ${teamManagementTab === 'members' ? styles.settingsTabBtnActive : ''}`, onClick: () => {
+                                    }, children: "Help & Tutorial" }), _jsx("button", { className: styles.submitBtn, onClick: () => setShowAccountHub(false), children: "Close" })] })] }) }), _jsx(Modal, { isOpen: showTeamManagementModal, onClose: () => setShowTeamManagementModal(false), title: "Team Management", size: "md", theme: currentTheme, draggable: true, children: _jsxs("div", { className: `${modalStyles.form} ${managementStyles.modalBody}`, children: [teamPlanMode === 'personal' && (_jsx("p", { className: authStyles.loginError, children: "Team management is only available in TEAM accounts." })), teamMgmtError && (_jsx("p", { className: authStyles.loginError, children: teamMgmtError })), _jsxs("div", { className: `${styles.settingsTabs} tf-scrollbar tf-scrollbar--track-transparent tf-scrollbar--compact`, children: [_jsx("button", { className: `${styles.settingsTabBtn} ${teamManagementTab === 'members' ? styles.settingsTabBtnActive : ''}`, onClick: () => {
                                         setTeamManagementTab('members');
                                         void loadTeamUsers();
                                     }, children: "Members" }), _jsx("button", { className: `${styles.settingsTabBtn} ${teamManagementTab === 'invites' ? styles.settingsTabBtnActive : ''}`, onClick: () => setTeamManagementTab('invites'), children: "Invites" }), _jsx("button", { className: `${styles.settingsTabBtn} ${teamManagementTab === 'audit' ? styles.settingsTabBtnActive : ''}`, onClick: () => {
                                         setTeamManagementTab('audit');
                                         void loadTeamAuditPage(teamAuditPage);
-                                    }, children: "Audit Log" })] }), teamManagementTab === 'members' && (_jsxs("div", { className: styles.accountHubCard, children: [teamUsersLoading && _jsx("p", { style: { margin: 0, color: 'var(--text-secondary)' }, children: "Loading members..." }), !teamUsersLoading && teamUsers.length === 0 && (_jsx("p", { style: { margin: 0, color: 'var(--text-secondary)' }, children: "No users found." })), !teamUsersLoading && teamUsers.map((member) => (_jsxs("div", { style: { borderTop: '1px solid var(--border-color)', paddingTop: '8px', marginTop: '8px' }, children: [_jsx("div", { style: { fontWeight: 600 }, children: member.displayName || member.email }), _jsxs("div", { className: styles.accountMenuMeta, children: [member.email, " \u00B7 ", member.status, member.disabled ? ' · deactivated' : ''] }), _jsxs("div", { style: { marginTop: '6px', display: 'flex', gap: '8px', flexWrap: 'wrap' }, children: [_jsxs("select", { className: styles.input, value: member.role, onChange: (event) => {
+                                    }, children: "Audit Log" })] }), teamManagementTab === 'members' && (_jsxs("div", { className: accountStyles.accountHubCard, children: [teamUsersLoading && _jsx("p", { className: managementStyles.mutedText, children: "Loading members..." }), !teamUsersLoading && teamUsers.length === 0 && (_jsx("p", { className: managementStyles.mutedText, children: "No users found." })), !teamUsersLoading && teamUsers.map((member) => (_jsxs("div", { className: managementStyles.memberRow, children: [_jsx("div", { className: managementStyles.memberTitle, children: member.displayName || member.email }), _jsxs("div", { className: accountStyles.accountMenuMeta, children: [member.email, " \u00B7 ", member.status, member.disabled ? ' · deactivated' : ''] }), _jsxs("div", { className: managementStyles.memberActions, children: [_jsxs("select", { className: `${styles.input} ${managementStyles.selectRole}`, value: member.role, onChange: (event) => {
                                                         void executeTeamUserAction(member.userId, async () => fetch(`/api/taskforce/admin/users/${encodeURIComponent(member.userId)}/role`, {
                                                             method: 'PATCH',
                                                             headers: { 'Content-Type': 'application/json', ...teamAdminHeaders() },
                                                             credentials: 'include',
                                                             body: JSON.stringify({
-                                                                workspaceId: currentWorkspaceId,
+                                                                workspaceId: teamManagementWorkspaceId,
                                                                 role: event.target.value
                                                             })
                                                         }));
-                                                    }, disabled: teamActionBusyUserId === member.userId, style: { maxWidth: '160px' }, children: [_jsx("option", { value: "owner", children: "Owner" }), _jsx("option", { value: "admin", children: "Admin" }), _jsx("option", { value: "member", children: "Member" })] }), member.role === 'member' && (_jsxs("select", { className: styles.input, value: member.permissionMode, onChange: (event) => {
+                                                    }, disabled: teamActionBusyUserId === member.userId, children: [_jsx("option", { value: "owner", children: "Owner" }), _jsx("option", { value: "admin", children: "Admin" }), _jsx("option", { value: "member", children: "Member" })] }), member.role === 'member' && (_jsxs("select", { className: `${styles.input} ${managementStyles.selectPermission}`, value: member.permissionMode, onChange: (event) => {
                                                         void executeTeamUserAction(member.userId, async () => fetch(`/api/taskforce/admin/users/${encodeURIComponent(member.userId)}/permission-mode`, {
                                                             method: 'PATCH',
                                                             headers: { 'Content-Type': 'application/json', ...teamAdminHeaders() },
                                                             credentials: 'include',
                                                             body: JSON.stringify({
-                                                                workspaceId: currentWorkspaceId,
+                                                                workspaceId: teamManagementWorkspaceId,
                                                                 mode: event.target.value
                                                             })
                                                         }));
-                                                    }, disabled: teamActionBusyUserId === member.userId, style: { maxWidth: '170px' }, children: [_jsx("option", { value: "read-write", children: "Read / Write" }), _jsx("option", { value: "read-only", children: "Read Only" })] })), _jsx("button", { className: styles.cancelBtn, disabled: teamActionBusyUserId === member.userId, onClick: () => {
+                                                    }, disabled: teamActionBusyUserId === member.userId, children: [_jsx("option", { value: "read-write", children: "Read / Write" }), _jsx("option", { value: "read-only", children: "Read Only" })] })), _jsx("button", { className: styles.cancelBtn, disabled: teamActionBusyUserId === member.userId, onClick: () => {
                                                         void executeTeamUserAction(member.userId, async () => fetch(`/api/taskforce/admin/users/${encodeURIComponent(member.userId)}/disable`, {
                                                             method: 'PATCH',
                                                             headers: { 'Content-Type': 'application/json', ...teamAdminHeaders() },
                                                             credentials: 'include',
                                                             body: JSON.stringify({
-                                                                workspaceId: currentWorkspaceId,
+                                                                workspaceId: teamManagementWorkspaceId,
                                                                 disabled: !member.disabled
                                                             })
                                                         }));
@@ -2091,27 +3084,52 @@ export function StandaloneLayout(props) {
                                                             method: 'POST',
                                                             headers: { 'Content-Type': 'application/json', ...teamAdminHeaders() },
                                                             credentials: 'include',
-                                                            body: JSON.stringify({ workspaceId: currentWorkspaceId })
+                                                            body: JSON.stringify({ workspaceId: teamManagementWorkspaceId })
                                                         }));
                                                     }, children: "Revoke Invite" })), _jsx("button", { className: styles.cancelBtn, disabled: teamActionBusyUserId === member.userId, onClick: () => {
-                                                        void executeTeamUserAction(member.userId, async () => fetch(`/api/taskforce/admin/users/${encodeURIComponent(member.userId)}?workspaceId=${encodeURIComponent(currentWorkspaceId)}`, {
+                                                        void executeTeamUserAction(member.userId, async () => fetch(`/api/taskforce/admin/users/${encodeURIComponent(member.userId)}?workspaceId=${encodeURIComponent(teamManagementWorkspaceId)}`, {
                                                             method: 'DELETE',
                                                             headers: teamAdminHeaders(),
                                                             credentials: 'include'
                                                         }));
-                                                    }, children: "Remove" })] })] }, member.userId)))] })), teamManagementTab === 'invites' && (_jsxs("div", { className: styles.accountHubCard, children: [teamInviteFeedback && (_jsx("p", { style: { margin: '0 0 8px 0', color: 'var(--text-secondary)' }, children: teamInviteFeedback })), _jsxs("div", { className: styles.pathInputGroup, children: [_jsx("label", { className: styles.label, style: { minWidth: '90px' }, children: "Email" }), _jsx("input", { className: styles.input, value: teamInviteEmail, onChange: (event) => setTeamInviteEmail(event.target.value), placeholder: "name@company.com" })] }), _jsxs("div", { className: styles.pathInputGroup, children: [_jsx("label", { className: styles.label, style: { minWidth: '90px' }, children: "Role" }), _jsxs("select", { className: styles.input, value: teamInviteRole, onChange: (event) => setTeamInviteRole(event.target.value === 'admin' ? 'admin' : 'member'), style: { maxWidth: '150px' }, children: [_jsx("option", { value: "member", children: "Member" }), _jsx("option", { value: "admin", children: "Admin" })] }), teamInviteRole === 'member' && (_jsxs("select", { className: styles.input, value: teamInvitePermissionMode, onChange: (event) => setTeamInvitePermissionMode(event.target.value === 'read-only' ? 'read-only' : 'read-write'), style: { maxWidth: '170px' }, children: [_jsx("option", { value: "read-write", children: "Read / Write" }), _jsx("option", { value: "read-only", children: "Read Only" })] })), _jsx("button", { className: styles.submitBtn, disabled: teamInviteBusy || !teamInviteEmail.trim() || teamPlanMode !== 'team', onClick: () => { void submitTeamInvite(); }, children: teamInviteBusy ? 'Sending...' : 'Send Invite' })] }), _jsxs("div", { style: { marginTop: '12px' }, children: [_jsx("div", { style: { fontWeight: 600, marginBottom: '6px' }, children: "Pending Invites" }), pendingInvites.length === 0 && (_jsx("p", { style: { margin: 0, color: 'var(--text-secondary)' }, children: "No pending invites." })), pendingInvites.map((invite) => (_jsxs("div", { style: { borderTop: '1px solid var(--border-color)', paddingTop: '8px', marginTop: '8px' }, children: [_jsx("div", { style: { fontWeight: 600 }, children: invite.displayName || invite.email }), _jsxs("div", { className: styles.accountMenuMeta, children: [invite.email, " \u00B7 ", invite.role] })] }, invite.userId)))] })] })), teamManagementTab === 'audit' && (_jsxs("div", { className: styles.accountHubCard, children: [teamAuditLoading && _jsx("p", { style: { margin: 0, color: 'var(--text-secondary)' }, children: "Loading audit entries..." }), !teamAuditLoading && teamAuditEvents.length === 0 && (_jsx("p", { style: { margin: 0, color: 'var(--text-secondary)' }, children: "No audit events for this workspace." })), !teamAuditLoading && (_jsx("div", { style: { maxHeight: '320px', overflowY: 'auto', paddingRight: '4px' }, children: teamAuditEvents.map((event) => (_jsxs("div", { style: { borderTop: '1px solid var(--border-color)', paddingTop: '8px', marginTop: '8px' }, children: [_jsx("div", { className: styles.accountMenuMeta, children: new Date(event.createdAt).toLocaleString() }), _jsx("div", { style: { fontWeight: 600 }, children: event.action }), _jsxs("div", { className: styles.accountMenuMeta, children: [event.actorUserId, " (", event.actorRole, ")"] })] }, event.id))) })), _jsxs("div", { style: { marginTop: '10px', display: 'flex', justifyContent: 'space-between', gap: '8px' }, children: [_jsx("button", { className: styles.cancelBtn, disabled: teamAuditLoading || teamAuditPage === 0, onClick: () => { void loadTeamAuditPage(teamAuditPage - 1); }, children: "Previous" }), _jsxs("span", { className: styles.accountMenuMeta, children: ["Page ", teamAuditPage + 1, " of ", teamAuditPages] }), _jsx("button", { className: styles.cancelBtn, disabled: teamAuditLoading || !teamAuditHasMore || teamAuditPage + 1 >= teamAuditPages, onClick: () => { void loadTeamAuditPage(teamAuditPage + 1); }, children: "Next" })] })] })), _jsx("div", { className: modalStyles.formActions, style: { display: 'flex', justifyContent: 'flex-end', gap: '10px' }, children: _jsx("button", { className: styles.cancelBtn, onClick: () => setShowTeamManagementModal(false), children: "Close" }) })] }) }), _jsx(Modal, { isOpen: showSyncStatusModal, onClose: () => {
+                                                    }, children: "Remove" })] })] }, member.userId)))] })), teamManagementTab === 'invites' && (_jsxs("div", { className: accountStyles.accountHubCard, children: [teamInviteFeedback && (_jsx("p", { className: managementStyles.sectionText, children: teamInviteFeedback })), _jsxs("div", { className: styles.pathInputGroup, children: [_jsx("label", { className: `${styles.label} ${managementStyles.labelFixed}`, children: "Email" }), _jsx("input", { className: styles.input, value: teamInviteEmail, onChange: (event) => setTeamInviteEmail(event.target.value), placeholder: "name@company.com" })] }), _jsxs("div", { className: styles.pathInputGroup, children: [_jsx("label", { className: `${styles.label} ${managementStyles.labelFixed}`, children: "Role" }), _jsxs("select", { className: `${styles.input} ${managementStyles.selectRole}`, value: teamInviteRole, onChange: (event) => setTeamInviteRole(event.target.value === 'admin' ? 'admin' : 'member'), children: [_jsx("option", { value: "member", children: "Member" }), _jsx("option", { value: "admin", children: "Admin" })] }), teamInviteRole === 'member' && (_jsxs("select", { className: `${styles.input} ${managementStyles.selectPermission}`, value: teamInvitePermissionMode, onChange: (event) => setTeamInvitePermissionMode(event.target.value === 'read-only' ? 'read-only' : 'read-write'), children: [_jsx("option", { value: "read-write", children: "Read / Write" }), _jsx("option", { value: "read-only", children: "Read Only" })] })), _jsx("button", { className: styles.submitBtn, disabled: teamInviteBusy || !teamInviteEmail.trim() || teamPlanMode !== 'team', onClick: () => { void submitTeamInvite(); }, children: teamInviteBusy ? 'Sending...' : 'Send Invite' })] }), _jsxs("div", { className: managementStyles.inviteRow, children: [_jsx("div", { className: managementStyles.listHeading, children: "Pending Invites" }), pendingInvites.length === 0 && (_jsx("p", { className: managementStyles.mutedText, children: "No pending invites." })), pendingInvites.map((invite) => (_jsxs("div", { className: managementStyles.memberRow, children: [_jsx("div", { className: managementStyles.memberTitle, children: invite.displayName || invite.email }), _jsxs("div", { className: accountStyles.accountMenuMeta, children: [invite.email, " \u00B7 ", invite.role] })] }, invite.userId)))] })] })), teamManagementTab === 'audit' && (_jsxs("div", { className: accountStyles.accountHubCard, children: [teamAuditLoading && _jsx("p", { className: managementStyles.mutedText, children: "Loading audit entries..." }), !teamAuditLoading && teamAuditEvents.length === 0 && (_jsx("p", { className: managementStyles.mutedText, children: "No audit events for this workspace." })), !teamAuditLoading && (_jsx("div", { className: managementStyles.auditList, children: teamAuditEvents.map((event) => (_jsxs("div", { className: managementStyles.memberRow, children: [_jsx("div", { className: accountStyles.accountMenuMeta, children: new Date(event.createdAt).toLocaleString() }), _jsx("div", { className: managementStyles.memberTitle, children: event.action }), _jsxs("div", { className: accountStyles.accountMenuMeta, children: [event.actorUserId, " (", event.actorRole, ")"] })] }, event.id))) })), _jsxs("div", { className: managementStyles.auditPager, children: [_jsx("button", { className: styles.cancelBtn, disabled: teamAuditLoading || teamAuditPage === 0, onClick: () => { void loadTeamAuditPage(teamAuditPage - 1); }, children: "Previous" }), _jsxs("span", { className: accountStyles.accountMenuMeta, children: ["Page ", teamAuditPage + 1, " of ", teamAuditPages] }), _jsx("button", { className: styles.cancelBtn, disabled: teamAuditLoading || !teamAuditHasMore || teamAuditPage + 1 >= teamAuditPages, onClick: () => { void loadTeamAuditPage(teamAuditPage + 1); }, children: "Next" })] })] })), _jsx("div", { className: `${modalStyles.formActions} ${managementStyles.modalActionsEnd}`, children: _jsx("button", { className: styles.cancelBtn, onClick: () => setShowTeamManagementModal(false), children: "Close" }) })] }) }), _jsx(Modal, { isOpen: showCreateWorkspaceConfirm, onClose: () => setShowCreateWorkspaceConfirm(false), title: "Create Workspace", size: "sm", theme: currentTheme, draggable: true, footer: (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: styles.secondaryButton, onClick: () => setShowCreateWorkspaceConfirm(false), children: "Cancel" }), _jsx("button", { type: "button", className: styles.primaryUpdateBtn, onClick: () => openWorkspaceSetup({ intent: 'create-workspace' }), children: "Continue to Setup" })] })), children: _jsx("div", { className: `${modalStyles.form} ${managementStyles.modalBody}`, children: _jsx("p", { className: managementStyles.sectionText, children: "Start a new workspace with the guided setup flow. You will choose the workspace name, description, and starter taxonomy library before anything is created." }) }) }), _jsx(Modal, { isOpen: showSyncStatusModal, onClose: () => {
                     setShowSyncStatusModal(false);
-                }, title: "Cloud Sync Status", size: "md", theme: currentTheme, draggable: true, children: _jsxs("div", { className: `${modalStyles.form} ${styles.syncStatusModal}`, children: [_jsxs("div", { className: styles.syncStatusTop, children: [_jsxs("div", { children: [_jsx("div", { className: styles.syncStatusHeading, children: "Current Status" }), _jsx("div", { className: styles.syncStatusSubtext, children: _jsx("code", { children: currentWorkspaceId }) }), workspaceBootstrapSyncInProgress && (_jsxs("div", { className: styles.syncStatusPausedHint, children: ["Initial sync in progress: ", workspaceBootstrapSyncAppliedChanges, " changes across ", workspaceBootstrapSyncPages, " page", workspaceBootstrapSyncPages === 1 ? '' : 's', "."] })), runtimeMode === 'local' && !isAuthenticated && (_jsx("div", { className: styles.syncStatusPausedHint, children: "Sync is paused. Sign in on cloud to resume." }))] }), _jsx("div", { className: styles.syncStatusBadge, style: {
-                                        borderColor: modalSyncStatusMeta.border,
-                                        background: modalSyncStatusMeta.background,
-                                        color: modalSyncStatusMeta.color
-                                    }, children: modalSyncStatusMeta.label })] }), _jsxs("div", { className: styles.syncStatusGrid, children: [_jsxs("div", { className: styles.syncStatusItem, children: [_jsx("span", { className: styles.syncStatusLabel, children: "Last successful sync" }), _jsx("span", { className: styles.syncStatusValue, children: formattedLastSyncTime })] }), _jsxs("div", { className: styles.syncStatusItem, children: [_jsx("span", { className: styles.syncStatusLabel, children: "Pending local changes" }), _jsx("span", { className: styles.syncStatusValue, children: userGlobalSyncPendingChanges })] }), _jsxs("div", { className: styles.syncStatusItem, children: [_jsx("span", { className: styles.syncStatusLabel, children: "Last pull from cloud" }), _jsx("span", { className: styles.syncStatusValue, children: formattedLastPullTime })] }), _jsxs("div", { className: styles.syncStatusItem, children: [_jsx("span", { className: styles.syncStatusLabel, children: "Last push to cloud" }), _jsx("span", { className: styles.syncStatusValue, children: formattedLastPushTime })] }), _jsxs("div", { className: styles.syncStatusItem, children: [_jsx("span", { className: styles.syncStatusLabel, children: "Scheduled retry" }), _jsx("span", { className: styles.syncStatusValue, children: workspaceRetryAt ? formattedRetryTime : 'None' })] }), _jsxs("div", { className: styles.syncStatusItem, children: [_jsx("span", { className: styles.syncStatusLabel, children: "Last error time" }), _jsx("span", { className: styles.syncStatusValue, children: workspaceLastErrorAt ? formattedLastErrorTime : 'None' })] })] }), _jsxs("div", { className: styles.syncStatusDetailsGrid, children: [_jsx("div", { className: styles.syncStatusTableWrap, children: _jsx("table", { className: styles.syncStatusTable, children: _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("th", { children: "Runtime mode" }), _jsx("td", { children: runtimeMode })] }), _jsxs("tr", { children: [_jsx("th", { children: "Sync source of truth" }), _jsx("td", { children: workspaceSyncSourceOfTruth || 'unset' })] }), _jsxs("tr", { children: [_jsx("th", { children: "Ready" }), _jsx("td", { children: workspaceSyncReady ? 'yes' : 'no' })] }), _jsxs("tr", { children: [_jsx("th", { children: "Hydrated" }), _jsx("td", { children: workspaceCloudHydrated ? 'yes' : 'no' })] }), _jsxs("tr", { children: [_jsx("th", { children: "Failure count" }), _jsx("td", { children: workspaceSyncFailureCount })] })] }) }) }), _jsx("div", { className: styles.syncStatusTableWrap, children: _jsx("table", { className: styles.syncStatusTable, children: _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("th", { children: "Auth failures" }), _jsx("td", { children: workspaceSyncAuthFailureCount })] }), _jsxs("tr", { children: [_jsx("th", { children: "Last failure source" }), _jsx("td", { children: workspaceSyncLastFailureSource || 'none' })] }), _jsxs("tr", { children: [_jsx("th", { children: "Last failure status" }), _jsx("td", { children: workspaceSyncLastFailureStatusCode ?? 'none' })] }), _jsxs("tr", { children: [_jsx("th", { children: "Retries scheduled" }), _jsx("td", { children: workspaceSyncRetryScheduledCount })] })] }) }) })] }), _jsx("div", { className: styles.syncStatusTableWrap, children: _jsx("table", { className: styles.syncStatusTable, children: _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("th", { className: styles.syncStatusTableNarrowLabel, children: "Last error" }), _jsx("td", { className: styles.syncStatusTableError, style: { color: (workspaceLastErrorMessage || userGlobalSyncError) ? '#fda4af' : 'var(--text-secondary)' }, children: workspaceLastErrorMessage || userGlobalSyncError || 'None' })] }), _jsxs("tr", { children: [_jsx("th", { className: styles.syncStatusTableNarrowLabel, children: "Last warning" }), _jsx("td", { style: { color: workspaceLastWarningMessage ? '#fcd34d' : 'var(--text-secondary)' }, children: workspaceLastWarningMessage || 'None' })] })] }) }) }), _jsxs("div", { className: `${modalStyles.formActions} ${styles.syncStatusActions}`, children: [_jsx("button", { className: styles.cancelBtn, onClick: () => void resetWorkspaceSyncCursorAndPull(), disabled: userGlobalSyncStatus === 'syncing', title: "Clear pull cursor and fetch full cloud state into local workspace", children: "Reset Cursor + Full Pull" }), runtimeMode === 'local' && !isAuthenticated && (_jsx("button", { className: styles.submitBtn, onClick: () => {
-                                        openSharedLoginRoute('login');
-                                    }, children: "Sign In / Register" })), _jsx("button", { className: styles.cancelBtn, onClick: () => {
-                                        setShowSyncStatusModal(false);
-                                    }, children: "Close" }), _jsx("button", { className: styles.submitBtn, onClick: () => void retryWorkspaceCloudSync(), disabled: userGlobalSyncStatus === 'syncing', children: userGlobalSyncStatus === 'syncing' ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { size: 14, className: styles.spinner }), "Syncing..."] })) : (_jsxs(_Fragment, { children: [_jsx(RefreshCw, { size: 14 }), "Retry Now"] })) })] })] }) }), unsavedModalOpen && createPortal(_jsx("div", { className: `${modalStyles.overlay} ${modalStyles.unsavedOverlay}`, style: { zIndex: 2000 }, children: _jsxs("div", { className: `${modalStyles.modal} ${modalStyles.unsavedModal}`, "data-theme": currentTheme, children: [_jsx("div", { className: `${modalStyles.header} ${modalStyles.unsavedHeader}`, children: _jsxs("div", { className: `${modalStyles.headerTitle} ${modalStyles.unsavedTitle}`, children: [_jsx(AlertTriangle, { size: 20 }), "Unsaved Changes"] }) }), _jsx("div", { className: `${modalStyles.form} ${modalStyles.unsavedContent}`, children: _jsx("p", { className: modalStyles.unsavedText, children: "You have unsaved changes. Would you like to save them?" }) }), _jsxs("div", { className: `${modalStyles.formActions} ${modalStyles.unsavedActions}`, children: [_jsx("button", { className: styles.cancelBtn, onClick: () => setUnsavedModalOpen(false), title: "Close dialog and continue editing", children: "Keep Editing" }), _jsx("button", { className: styles.destructiveBtn, onClick: handleDiscard, title: "Discard unsaved changes and leave", children: "Discard" }), _jsxs("button", { className: styles.submitBtn, onClick: handleSaveAndNavigate, disabled: loading, title: "Save changes and leave", children: [loading ? _jsx(Loader2, { size: 16, className: styles.spinner }) : _jsx(Save, { size: 16 }), "Save"] })] })] }) }), document.body), showFolderBrowser && createPortal(_jsx("div", { className: styles.folderBrowserOverlay, children: _jsxs("div", { className: styles.folderBrowser, children: [_jsxs("div", { className: styles.browserHeader, children: [_jsxs("div", { className: styles.browserPathInfo, children: [_jsx(Folder, { size: 14 }), _jsx("span", { children: currentBrowsePath || 'Project Root' })] }), _jsxs("div", { className: styles.browserActions, children: [currentBrowsePath && (_jsx("button", { className: styles.helpLink, onClick: () => {
+                }, title: "Sync Manager", size: "md", theme: currentTheme, draggable: true, children: _jsxs("div", { className: `${modalStyles.form} ${syncStatusStyles.syncStatusModal}`, style: { gap: '10px' }, children: [_jsxs("div", { className: syncStatusStyles.syncStatusTop, children: [_jsx("div", { className: syncStatusStyles.syncStatusHeaderInfo, children: _jsxs("div", { className: syncStatusStyles.syncStatusMetaHeader, children: [_jsx("div", { className: syncStatusStyles.syncStatusBadge, style: {
+                                                    borderColor: syncStatusMeta.border,
+                                                    background: syncStatusMeta.background,
+                                                    color: syncStatusMeta.color
+                                                }, children: syncStatusMeta.label }), _jsxs("span", { className: syncStatusStyles.syncStatusLabel, children: ["Workspace: ", _jsx("code", { children: currentWorkspaceLabel })] })] }) }), _jsx("label", { className: syncStatusStyles.syncToggle, children: _jsxs("span", { className: [
+                                            syncStatusStyles.syncToggleControl,
+                                            workspaceCloudSyncEnabled ? syncStatusStyles.syncToggleControlEnabled : syncStatusStyles.syncToggleControlDisabled,
+                                            syncControlBusy ? syncStatusStyles.syncToggleControlBusy : '',
+                                            !canManageWorkspaceSync ? syncStatusStyles.syncToggleControlBlocked : ''
+                                        ].filter(Boolean).join(' '), children: [_jsx("input", { className: syncStatusStyles.syncToggleInput, type: "checkbox", role: "switch", "aria-label": "Enable Sync", checked: workspaceCloudSyncEnabled, disabled: !canManageWorkspaceSync || syncControlBusy, onChange: (event) => {
+                                                    void handleWorkspaceSyncToggle(event.target.checked);
+                                                } }), _jsx("span", { className: `${syncStatusStyles.syncToggleState} ${syncStatusStyles.syncToggleStateOn}`, children: "On" }), _jsx("span", { className: `${syncStatusStyles.syncToggleState} ${syncStatusStyles.syncToggleStateOff}`, children: "Off" }), _jsx("span", { className: syncStatusStyles.syncToggleThumb })] }) })] }), _jsxs("div", { className: syncStatusStyles.syncStatusSummaryCompact, children: [_jsx("span", { className: syncStatusStyles.syncStatusLabel, children: "Health" }), _jsx("span", { className: syncStatusStyles.syncStatusSummaryValue, children: workspaceSyncSummary })] }), workspaceSyncRepairBusy && (_jsxs("div", { className: syncStatusStyles.syncStatusRepairBanner, children: [_jsxs("div", { className: syncStatusStyles.syncStatusRepairHeader, children: [_jsxs("div", { className: syncStatusStyles.syncStatusRepairBadge, children: [_jsx(Loader2, { size: 13, className: styles.spinner }), _jsx("span", { children: "Repair In Progress" })] }), _jsx("span", { className: syncStatusStyles.syncStatusRepairMeta, children: "Advanced recovery mode" })] }), _jsx("span", { className: syncStatusStyles.syncStatusRepairText, children: referenceMismatchCount > 0
+                                        ? `Taskforce is clearing the saved sync cursor and reconciling workspace state from the cloud again, including ${referenceMismatchCount} detected reference mismatch${referenceMismatchCount === 1 ? '' : 'es'}. The panel may stay busy for a while during large repairs.`
+                                        : 'Taskforce is clearing the saved sync cursor and reconciling workspace state from the cloud again. The panel may stay busy for a while during large repairs.' })] })), _jsx("div", { className: syncStatusStyles.syncStatusSectionHeader, children: _jsx("span", { className: syncStatusStyles.syncStatusLabel, children: "Current Session" }) }), _jsxs("div", { className: syncStatusStyles.syncStatusCompactGrid, children: [_jsxs("div", { className: syncStatusStyles.syncStatusCompactItem, children: [_jsx("span", { className: syncStatusStyles.syncStatusLabel, children: "Stage" }), _jsx("span", { className: syncStatusStyles.syncStatusValue, children: syncStageLabel })] }), _jsxs("div", { className: syncStatusStyles.syncStatusCompactItem, children: [_jsx("span", { className: syncStatusStyles.syncStatusLabel, children: "Local Changes" }), _jsx("span", { className: syncStatusStyles.syncStatusValue, children: workspaceSyncPendingChanges })] }), _jsxs("div", { className: syncStatusStyles.syncStatusCompactItem, children: [_jsx("span", { className: syncStatusStyles.syncStatusLabel, children: "Last Successful" }), _jsx("span", { className: syncStatusStyles.syncStatusValue, children: formattedLastSyncTime })] })] }), _jsx("div", { className: syncStatusStyles.syncStatusSectionHeader, children: _jsx("span", { className: syncStatusStyles.syncStatusLabel, children: "Activity" }) }), _jsxs("div", { className: syncStatusStyles.syncStatusCompactGrid, children: [_jsxs("div", { className: syncStatusStyles.syncStatusCompactItem, children: [_jsx("span", { className: syncStatusStyles.syncStatusLabel, children: "Last Pull" }), _jsx("span", { className: syncStatusStyles.syncStatusValue, children: formattedLastPullTime })] }), _jsxs("div", { className: syncStatusStyles.syncStatusCompactItem, children: [_jsx("span", { className: syncStatusStyles.syncStatusLabel, children: "Last Push" }), _jsx("span", { className: syncStatusStyles.syncStatusValue, children: formattedLastPushTime })] })] }), syncLastError !== 'None' && (_jsxs("div", { className: syncStatusStyles.syncStatusPanel, style: { background: 'rgba(239, 68, 68, 0.05)', borderColor: 'rgba(239, 68, 68, 0.2)' }, children: [_jsxs("div", { className: syncStatusStyles.syncStatusSectionHeader, style: { marginTop: 0 }, children: [_jsx(AlertTriangle, { size: 12, color: "#fda4af" }), _jsxs("span", { className: syncStatusStyles.syncStatusLabel, style: { color: '#fda4af' }, children: ["Last Error (", workspaceSyncDiagnostics.lastErrorAt ? new Date(workspaceSyncDiagnostics.lastErrorAt).toLocaleTimeString() : 'Recent', ")"] })] }), _jsx("span", { className: `${syncStatusStyles.syncStatusValue} ${syncStatusStyles.syncStatusValueError}`, children: syncLastError })] })), referenceMismatchCount > 0 && (_jsxs("div", { className: syncStatusStyles.syncStatusPanel, style: { background: 'rgba(250, 204, 21, 0.08)', borderColor: 'rgba(250, 204, 21, 0.22)' }, children: [_jsxs("div", { className: syncStatusStyles.syncStatusPanelHeader, children: [_jsx("span", { className: syncStatusStyles.syncStatusLabel, style: { color: '#fde68a' }, children: "Identifier Integrity" }), _jsxs("span", { className: syncStatusStyles.syncStatusPanelMeta, children: [referenceMismatchCount, " mismatch", referenceMismatchCount === 1 ? '' : 'es', " detected"] })] }), _jsx("span", { className: syncStatusStyles.syncStatusValue, children: "Document or image reference numbers disagreed during normal sync. Standard sync now preserves existing identifiers; use Repair to reconcile mismatched references deliberately." }), activeReferenceMismatchSummaries.length > 0 && (_jsx("div", { style: { marginTop: '10px', display: 'flex', flexDirection: 'column', gap: '8px' }, children: activeReferenceMismatchSummaries.map((item) => (_jsxs("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            gap: '2px',
+                                            padding: '8px 10px',
+                                            borderRadius: '8px',
+                                            background: 'rgba(15, 23, 42, 0.18)',
+                                            border: '1px solid rgba(250, 204, 21, 0.16)'
+                                        }, children: [_jsx("span", { className: syncStatusStyles.syncStatusValue, style: { fontSize: '12px', wordBreak: 'break-all' }, children: item.pathLabel }), item.refsLabel ? (_jsx("span", { className: syncStatusStyles.syncStatusPanelMeta, children: item.refsLabel })) : null] }, item.key))) }))] })), _jsxs("div", { className: syncStatusStyles.syncStatusPanel, children: [_jsxs("div", { className: syncStatusStyles.syncStatusPanelHeader, children: [_jsx("span", { className: syncStatusStyles.syncStatusLabel, children: "Local Sync Diagnostics" }), _jsx("span", { className: syncStatusStyles.syncStatusPanelMeta, style: { fontSize: '10px' }, children: "AI profiles & metadata" })] }), _jsx("div", { className: syncStatusStyles.syncStatusCompactGrid, style: { gridTemplateColumns: 'repeat(2, 1fr)' }, children: syncDiagnosticsSummary.map((item) => (_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: '8px' }, children: [_jsx("span", { className: syncStatusStyles.syncStatusLabel, style: { fontSize: '9px', textTransform: 'capitalize' }, children: item.label }), _jsx("span", { className: syncStatusStyles.syncStatusValue, style: { fontSize: '11px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }, children: item.value })] }, item.label))) })] }), _jsxs("div", { className: syncStatusStyles.syncStatusPanel, children: [_jsx("div", { className: syncStatusStyles.syncStatusPanelHeader, children: _jsx("span", { className: syncStatusStyles.syncStatusLabel, children: "Recent Events" }) }), _jsx("div", { ref: syncEventsListRef, className: syncStatusStyles.syncStatusEventsList, style: { height: '120px' }, children: syncEventRows.map((row) => (_jsx("div", { className: [
+                                            syncStatusStyles.syncStatusEventItem,
+                                            row.tone === 'error' ? syncStatusStyles.syncStatusEventItemError : '',
+                                            row.tone === 'muted' ? syncStatusStyles.syncStatusEventItemMuted : ''
+                                        ].filter(Boolean).join(' '), style: { padding: '6px 8px', borderRadius: '6px' }, children: _jsx("span", { className: syncStatusStyles.syncStatusEventLine, style: { fontSize: '11px' }, children: row.text }) }, row.key))) })] }), _jsxs("div", { className: `${modalStyles.formActions} ${syncStatusStyles.syncStatusActions}`, children: [_jsxs("div", { className: syncStatusStyles.syncStatusSecondaryActions, children: [_jsx("button", { className: styles.cancelBtn, onClick: handleQueueOrRunRepairSync, disabled: workspaceSyncRepairBusy, title: workspaceSyncRepairBusy
+                                                ? 'Repair is running now.'
+                                                : workspaceSyncRepairQueued
+                                                    ? 'Repair is queued and will start when the current sync finishes.'
+                                                    : workspaceSyncBusy
+                                                        ? 'Queue a repair to start automatically when the current sync finishes.'
+                                                        : 'Advanced recovery: clear the saved pull cursor and re-fetch cloud state from the beginning.', children: workspaceSyncRepairBusy ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { size: 14, className: styles.spinner }), _jsx("span", { style: { marginLeft: '6px' }, children: "Repairing..." })] })) : workspaceSyncRepairQueued ? ('Repair Queued') : ('Repair') }), _jsxs("button", { className: styles.cancelBtn, onClick: () => { void handleCopySyncDetails(); }, title: "Copy the current sync manager report for support or AI troubleshooting.", children: [_jsx(Copy, { size: 14 }), _jsx("span", { style: { marginLeft: '6px' }, children: workspaceSyncCopied ? 'Copied' : 'Copy Report' })] })] }), _jsxs("div", { className: syncStatusStyles.syncStatusPrimaryActions, children: [_jsx("div", { className: syncStatusStyles.syncStatusPrimaryActionSlot, children: runtimeMode === 'local' && !isAuthenticated ? (_jsx("button", { className: styles.submitBtn, onClick: () => {
+                                                    openSharedLoginRoute('login');
+                                                }, children: "Sign In / Register" })) : (_jsx("div", { className: syncStatusStyles.syncStatusActionPlaceholder, "aria-hidden": "true" })) }), _jsx("div", { className: syncStatusStyles.syncStatusPrimaryActionSlot, children: _jsx("button", { className: styles.submitBtn, onClick: () => void retryWorkspaceCloudSync(), disabled: workspaceSyncBusy, children: workspaceSyncBusy ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { size: 14, className: styles.spinner }), "Syncing..."] })) : (_jsxs(_Fragment, { children: [_jsx(RefreshCw, { size: 14 }), "Sync"] })) }) })] })] })] }) }), unsavedModalOpen && createPortal(_jsx("div", { className: `${modalStyles.overlay} ${modalStyles.unsavedOverlay}`, style: { zIndex: 2000 }, children: _jsxs("div", { className: `tf-surface-modal tf-modal-shell ${modalStyles.modal} ${modalStyles.unsavedModal}`, "data-theme": currentTheme, children: [_jsx("div", { className: `tf-modal-header ${modalStyles.unsavedHeader}`, children: _jsxs("div", { className: `tf-modal-title ${modalStyles.unsavedTitle}`, children: [_jsx(AlertTriangle, { size: 20 }), "Unsaved Changes"] }) }), _jsx("div", { className: `${modalStyles.form} ${modalStyles.unsavedContent}`, children: _jsx("p", { className: modalStyles.unsavedText, children: "You have unsaved changes. Would you like to save them?" }) }), _jsxs("div", { className: `${modalStyles.formActions} ${modalStyles.unsavedActions}`, children: [_jsx("button", { className: styles.cancelBtn, onClick: () => setUnsavedModalOpen(false), title: "Close dialog and continue editing", children: "Keep Editing" }), _jsx("button", { className: styles.destructiveBtn, onClick: handleDiscard, title: "Discard unsaved changes and leave", children: "Discard" }), _jsxs("button", { className: styles.submitBtn, onClick: handleSaveAndNavigate, disabled: loading, title: "Save changes and leave", children: [loading ? _jsx(Loader2, { size: 16, className: styles.spinner }) : _jsx(Save, { size: 16 }), "Save"] })] })] }) }), document.body), showFolderBrowser && createPortal(_jsx("div", { className: folderBrowserStyles.overlay, children: _jsxs("div", { className: folderBrowserStyles.browser, children: [_jsxs("div", { className: folderBrowserStyles.header, children: [_jsxs("div", { className: folderBrowserStyles.pathInfo, children: [_jsx(Folder, { size: 14 }), _jsx("span", { children: currentBrowsePath || 'Project Root' })] }), _jsxs("div", { className: folderBrowserStyles.actions, children: [currentBrowsePath && (_jsx("button", { className: styles.helpLink, onClick: () => {
                                                 const parts = currentBrowsePath.split('/').filter(Boolean);
                                                 parts.pop();
                                                 fetchFolders(parts.length ? parts.join('/') + '/' : '');
-                                            }, children: "Back" })), _jsx("button", { className: styles.helpLink, onClick: () => setShowFolderBrowser(false), children: "Close" })] })] }), _jsxs("div", { className: styles.browserList, children: [browserTarget && typeof browserTarget === 'object' && browserTarget.type !== 'context-link' && (_jsxs("div", { className: `${styles.browserItem} ${styles.browserItemFile} ${styles.browserSelectCurrent}`, onClick: () => handleSelectPath(currentBrowsePath), children: [_jsx(Check, { size: 14 }), " Select Current: ./", currentBrowsePath || '(root)'] })), folders.map(folder => (_jsxs("div", { className: styles.browserItem, onClick: () => fetchFolders(currentBrowsePath + folder + '/'), children: [_jsx(Folder, { size: 14 }), " ", folder, "/"] }, folder))), files.map(file => (_jsxs("div", { className: `${styles.browserItem} ${styles.browserItemFile}`, onClick: () => handleSelectPath(currentBrowsePath + file), children: [_jsx(FileText, { size: 14 }), " ", file] }, file))), folders.length === 0 && files.length === 0 && (_jsx("div", { className: `${styles.browserItem} ${styles.browserEmpty}`, children: "No items found" }))] })] }) }), document.body), _jsx(Modal, { isOpen: !!cancellationPromptTask, onClose: handleCancelCancellation, title: "Cancel Task", size: "sm", theme: currentTheme, draggable: true, footer: _jsxs(_Fragment, { children: [_jsx("button", { className: styles.cancelBtn, onClick: handleCancelCancellation, title: "Close and continue working on this task", children: "Back" }), _jsxs("button", { className: `${styles.warningBtn} ${styles.cancelTaskConfirmBtn}`, onClick: handleConfirmCancellation, title: "Keep the task, set status to cancelled, and save a cancellation reason", style: { gap: '8px' }, disabled: cancellationOpenDescendantIds.length > 0 && !cancellationMode, children: [_jsx(Ban, { size: 16 }), " Confirm Cancellation"] }), _jsxs("button", { className: `${styles.destructiveBtn} ${styles.cancelTaskDeleteBtn}`, onClick: handleDeleteFromCancellation, title: "Permanently delete this task and all of its data", style: { gap: '8px' }, children: [_jsx(Trash2, { size: 16 }), " Delete Permanently"] })] }), children: _jsxs("div", { className: styles.form, style: { padding: '20px 24px', display: 'flex', flexDirection: 'column', gap: '8px', overflow: 'hidden' }, children: [cancellationOpenDescendantIds.length > 0 && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' }, children: [_jsxs("p", { style: { margin: 0, fontSize: '14px', color: 'var(--text-secondary)' }, children: ["This parent has ", cancellationOpenDescendantIds.length, " open descendant task", cancellationOpenDescendantIds.length === 1 ? '' : 's', "."] }), _jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: [_jsx("input", { type: "radio", name: "cancel-mode", checked: cancellationMode === 'cascade', onChange: () => setCancellationMode('cascade') }), "Cancel parent and cancel open descendants"] }), _jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: [_jsx("input", { type: "radio", name: "cancel-mode", checked: cancellationMode === 'unlink', onChange: () => setCancellationMode('unlink') }), "Cancel parent and unlink open descendants"] })] })), _jsx("p", { style: { margin: 0, fontSize: '14px', color: 'var(--text-secondary)' }, children: "Why is this task being cancelled?" }), _jsx("textarea", { className: styles.textarea, placeholder: "Reason for record (e.g., No longer relevant, duplicate, etc.)", value: localCancellationReason, onChange: (e) => setLocalCancellationReason(e.target.value), autoFocus: true, style: { minHeight: '60px', width: '100%', resize: 'none', boxSizing: 'border-box' }, rows: 2 })] }) })] }));
+                                            }, children: "Back" })), _jsx("button", { className: styles.helpLink, onClick: () => setShowFolderBrowser(false), children: "Close" })] })] }), _jsxs("div", { className: folderBrowserStyles.list, children: [browserTarget && typeof browserTarget === 'object' && (_jsxs("div", { className: `${folderBrowserStyles.item} ${folderBrowserStyles.itemFile} ${folderBrowserStyles.itemCurrent}`, onClick: () => handleSelectPath(currentBrowsePath), children: [_jsx(Check, { size: 14 }), " Select Current: ./", currentBrowsePath || '(root)'] })), folders.map(folder => (_jsxs("div", { className: folderBrowserStyles.item, onClick: () => fetchFolders(currentBrowsePath + folder + '/'), children: [_jsx(Folder, { size: 14 }), " ", folder, "/"] }, folder))), files.map(file => (_jsxs("div", { className: `${folderBrowserStyles.item} ${folderBrowserStyles.itemFile}`, onClick: () => handleSelectPath(currentBrowsePath + file), children: [_jsx(FileText, { size: 14 }), " ", file] }, file))), folders.length === 0 && files.length === 0 && (_jsx("div", { className: `${folderBrowserStyles.item} ${folderBrowserStyles.empty}`, children: "No items found" }))] })] }) }), document.body)] }));
 }