@taskforcehq/taskforce 0.3.168

package/dist/components/views/StandaloneLayout.js

@@ -0,0 +1,2117 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useMemo, useCallback, useState, useEffect, useRef } 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 styles from '../../Taskforce.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 { TypeMeta } from '../../utils/constants';
+import { buildHierarchyDepthMap, collectSubtreeTaskIds } from '../../utils/taskHierarchy';
+import { formatDate } from '../../utils/formatting';
+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}`;
+}
+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 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 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];
+    }
+    const mondayFirst = {
+        mon: 0,
+        tue: 1,
+        wed: 2,
+        thu: 3,
+        fri: 4,
+        sat: 5,
+        sun: 6
+    };
+    return mondayFirst[dayKey];
+}
+function addDays(base, days) {
+    const next = new Date(base);
+    next.setDate(base.getDate() + days);
+    return next;
+}
+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')}`;
+}
+export function StandaloneLayout(props) {
+    const navigate = useNavigate();
+    const location = useLocation();
+    const { 
+    // State
+    activeTab, setActiveTab, activeCategories, groupBy, setGroupBy, emptyColumnMode, setEmptyColumnMode, zenMode, setZenMode, filterStatus, setFilterStatus, parentTaskFilterMode, setParentTaskFilterMode, 
+    // 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, 
+    // Form Actions
+    handleAddComment, handleSetParentForCurrentTask, handleAddChildToCurrentTask, handleCreateChildForCurrentTask, handleUnlinkChildTask, handleReorderChildTasks, handleClearParentTask, 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, 
+    // 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
+    // filterTypes, setFilterTypes, // This was duplicated, removed one instance
+    // filterPriorities, setFilterPriorities, // This was duplicated, removed one instance
+    // filterStatus, setFilterStatus, // This was duplicated, removed one instance
+    // sortBy, setSortBy, // This was duplicated, removed one instance
+    // 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, 
+    // Browser Props
+    showFolderBrowser, setShowFolderBrowser, folders, files, currentBrowsePath, fetchFolders, browserTarget, setBrowserTarget, contextLinkBrowsePath, handleSelectPath, handleAddPath, handleRemovePath, 
+    // Settings Managers
+    handleUpdateCategory, handleRemoveCategory, handleSaveCategory, handleUpdateCategoryIcon, handleUpdateCategoryColor, handleSaveType, handleRemoveType, handleUpdateTaxonomies, handleUpdatePriorities, handleUpdateApproaches, pathValidation, 
+    // Exports
+    exportEnvironment, setExportEnvironment, exportWorkflowsPath, setExportWorkflowsPath, exportSpecialistsPath, setExportSpecialistsPath, exportResult, handleExportResources, exportingResource, availableWorkflows, onExportWorkflows, fetchWorkflows, availableEnvironments, 
+    // Misc
+    successBanner, returnToParentTaskId, returnFromChildTaskId, clearReturnToParentTask, 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;
+    const resolvedLocale = locale || getLocale();
+    useEffect(() => {
+        const normalizedProject = String(projectName || '').trim();
+        document.title = normalizedProject ? `Taskforce - ${normalizedProject}` : 'Taskforce';
+    }, [projectName]);
+    // Handlers
+    const handleDiscard = () => {
+        setUnsavedModalOpen(false);
+        if (pendingNavigation) {
+            if (activeTab === 'add')
+                resetForm();
+            pendingNavigation();
+        }
+        else {
+            if (activeTab === 'add')
+                resetForm();
+            setActiveTab('tasks');
+        }
+    };
+    const handleSaveAndNavigate = async () => {
+        // Fake event for handleSubmit
+        const fakeEvent = { preventDefault: () => { } };
+        await handleSubmit(fakeEvent);
+        setUnsavedModalOpen(false);
+        if (pendingNavigation) {
+            pendingNavigation();
+        }
+    };
+    // State for Card Compression
+    const [compressedCards, setCompressedCards] = useState(false);
+    const [scheduleShowWeekends, setScheduleShowWeekends] = useState(false);
+    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();
+        return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`;
+    });
+    const [scheduleScrollLeft, setScheduleScrollLeft] = useState(0);
+    const [showFilters, setShowFilters] = useState(false);
+    const [requestedDocPath, setRequestedDocPath] = useState(null);
+    const [layoutStateReady, setLayoutStateReady] = useState(false);
+    const lastNonDocsGroupByRef = useRef('category');
+    const loadedLayoutStateWorkspaceRef = useRef('');
+    const workspaceUiStateHeaders = useMemo(() => {
+        const headers = {};
+        const workspaceIdHeader = String(currentWorkspaceId || '').trim();
+        if (runtimeMode === 'cloud' && workspaceIdHeader && workspaceIdHeader !== 'default') {
+            headers['x-taskforce-workspace-id'] = workspaceIdHeader;
+        }
+        return headers;
+    }, [runtimeMode, currentWorkspaceId]);
+    const layoutStateWorkspaceKey = useMemo(() => `${runtimeMode}:${String(currentWorkspaceId || 'default').trim() || 'default'}`, [runtimeMode, currentWorkspaceId]);
+    useEffect(() => {
+        const handleOpenMarkdownDocument = (event) => {
+            const customEvent = event;
+            const fsPath = customEvent.detail?.fsPath;
+            if (!fsPath)
+                return;
+            customEvent.preventDefault();
+            setRequestedDocPath(fsPath);
+            if (groupBy !== 'docs') {
+                setGroupBy('docs');
+            }
+        };
+        window.addEventListener('taskforce:open-markdown-document', handleOpenMarkdownDocument);
+        return () => {
+            window.removeEventListener('taskforce:open-markdown-document', handleOpenMarkdownDocument);
+        };
+    }, [groupBy, setGroupBy]);
+    useEffect(() => {
+        if (loadedLayoutStateWorkspaceRef.current === layoutStateWorkspaceKey)
+            return;
+        loadedLayoutStateWorkspaceRef.current = layoutStateWorkspaceKey;
+        setLayoutStateReady(false);
+        let cancelled = false;
+        const loadLayoutUiState = async () => {
+            try {
+                const res = await fetch('/api/taskforce/ui-state?key=layout', {
+                    method: 'GET',
+                    credentials: 'include',
+                    headers: workspaceUiStateHeaders
+                });
+                if (!res.ok)
+                    return;
+                const data = await res.json().catch(() => ({}));
+                const state = (data?.state && typeof data.state === 'object')
+                    ? data.state
+                    : null;
+                if (!state || cancelled)
+                    return;
+                if (typeof state.scheduleShowWeekends === 'boolean')
+                    setScheduleShowWeekends(state.scheduleShowWeekends);
+                if (typeof state.scheduleShowBacklog === 'boolean')
+                    setScheduleShowBacklog(state.scheduleShowBacklog);
+                if (typeof state.scheduleOnlyExpired === 'boolean')
+                    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);
+                }
+                if (typeof state.scheduleCalendarMonth === 'string' && /^\d{4}-\d{2}$/.test(state.scheduleCalendarMonth)) {
+                    setScheduleCalendarMonth(state.scheduleCalendarMonth);
+                }
+                if (typeof state.scheduleScrollLeft === 'number' && Number.isFinite(state.scheduleScrollLeft) && state.scheduleScrollLeft >= 0) {
+                    setScheduleScrollLeft(state.scheduleScrollLeft);
+                }
+                if (typeof state.showFilters === 'boolean')
+                    setShowFilters(state.showFilters);
+            }
+            catch {
+                // ignore read failure
+            }
+            finally {
+                if (!cancelled)
+                    setLayoutStateReady(true);
+            }
+        };
+        loadLayoutUiState();
+        return () => {
+            cancelled = true;
+        };
+    }, [layoutStateWorkspaceKey, workspaceUiStateHeaders]);
+    useEffect(() => {
+        if (!layoutStateReady)
+            return;
+        const timeoutId = window.setTimeout(async () => {
+            try {
+                await fetch('/api/taskforce/ui-state', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json', ...workspaceUiStateHeaders },
+                    credentials: 'include',
+                    body: JSON.stringify({
+                        stateKey: 'layout',
+                        patch: {
+                            scheduleShowWeekends,
+                            scheduleShowBacklog,
+                            scheduleOnlyExpired,
+                            scheduleSidebarOpen,
+                            hierarchySidebarOpen,
+                            hierarchyRootTaskId,
+                            hierarchyShowUnlinkedColumn,
+                            hierarchyChildOrderMode,
+                            scheduleSelectedDate,
+                            scheduleCalendarMonth,
+                            scheduleScrollLeft,
+                            showFilters
+                        }
+                    })
+                });
+            }
+            catch {
+                // ignore write failure
+            }
+        }, 250);
+        return () => window.clearTimeout(timeoutId);
+    }, [
+        layoutStateReady,
+        scheduleShowWeekends,
+        scheduleShowBacklog,
+        scheduleOnlyExpired,
+        scheduleSidebarOpen,
+        hierarchySidebarOpen,
+        hierarchyRootTaskId,
+        hierarchyShowUnlinkedColumn,
+        hierarchyChildOrderMode,
+        scheduleSelectedDate,
+        scheduleCalendarMonth,
+        scheduleScrollLeft,
+        showFilters,
+        workspaceUiStateHeaders
+    ]);
+    useEffect(() => {
+        if (groupBy !== 'docs') {
+            lastNonDocsGroupByRef.current = groupBy;
+        }
+    }, [groupBy]);
+    useEffect(() => {
+        if (groupBy === 'schedule') {
+            setScheduleSidebarOpen(true);
+        }
+        if (groupBy === 'hierarchy') {
+            setHierarchySidebarOpen(true);
+        }
+    }, [groupBy]);
+    const { showArchive, setShowArchive, fetchArchive, filteredArchive } = props;
+    const kanbanTasks = useMemo(() => {
+        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]);
+    const kanbanAllTasks = useMemo(() => {
+        if (!showArchive)
+            return props.searchAgnosticTasks;
+        return [...props.searchAgnosticTasks, ...filteredArchive];
+    }, [props.searchAgnosticTasks, filteredArchive, showArchive]);
+    const hierarchyTasks = useMemo(() => {
+        const byId = new Map();
+        for (const task of props.archivedTasks)
+            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]);
+    const hierarchyTaskById = useMemo(() => {
+        const map = new Map();
+        hierarchyTasks.forEach((task) => map.set(task.id, task));
+        return map;
+    }, [hierarchyTasks]);
+    const hierarchyChildrenByParent = 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);
+        });
+        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;
+        };
+        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)
+            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));
+        }
+        else if (parentTaskFilterMode === 'linked') {
+            base = kanbanTasks.filter(task => !!task.parentTaskId || hierarchyParentIdSet.has(task.id));
+        }
+        else if (parentTaskFilterMode === 'unlinked') {
+            base = kanbanTasks.filter(task => isUnlinkedTask(task));
+        }
+        if (!hierarchyShowUnlinkedColumn && parentTaskFilterMode !== 'unlinked') {
+            base = base.filter((task) => !isUnlinkedTask(task));
+        }
+        if (hierarchyDescendantIdSet) {
+            base = base.filter(task => hierarchyDescendantIdSet.has(task.id)
+                || (hierarchyShowUnlinkedColumn && (parentTaskFilterMode === 'all' || parentTaskFilterMode === 'unlinked') && isUnlinkedTask(task)));
+        }
+        return base;
+    }, [groupBy, parentTaskFilterMode, kanbanTasks, hierarchyParentIdSet, scheduleBaseTasks, hierarchyDescendantIdSet, hierarchyShowUnlinkedColumn]);
+    const todayDateOnly = useMemo(() => {
+        const now = new Date();
+        const y = now.getFullYear();
+        const m = String(now.getMonth() + 1).padStart(2, '0');
+        const d = String(now.getDate()).padStart(2, '0');
+        return `${y}-${m}-${d}`;
+    }, []);
+    const boardVisibleTasks = useMemo(() => {
+        if (groupBy !== 'schedule' || !scheduleOnlyExpired)
+            return hierarchyVisibleTasks;
+        return hierarchyVisibleTasks.filter((task) => {
+            const isTerminal = task.status === 'done' || task.status === 'cancelled';
+            if (isTerminal)
+                return false;
+            const expiredScheduled = !!task.scheduledDate && task.scheduledDate < todayDateOnly;
+            const overdueDue = !!task.dueDate && task.dueDate < todayDateOnly;
+            return expiredScheduled || overdueDue;
+        });
+    }, [groupBy, scheduleOnlyExpired, hierarchyVisibleTasks, todayDateOnly]);
+    const expiredRecoveryCandidates = useMemo(() => {
+        if (groupBy !== 'schedule')
+            return [];
+        return hierarchyVisibleTasks.filter((task) => {
+            const isTerminal = task.status === 'done' || task.status === 'cancelled';
+            if (isTerminal)
+                return false;
+            const expiredScheduled = !!task.scheduledDate && task.scheduledDate < todayDateOnly;
+            const overdueDue = !!task.dueDate && task.dueDate < todayDateOnly;
+            return expiredScheduled || overdueDue;
+        });
+    }, [groupBy, hierarchyVisibleTasks, todayDateOnly]);
+    const expiredScheduledCount = useMemo(() => {
+        if (groupBy !== 'schedule')
+            return 0;
+        return hierarchyVisibleTasks.filter((task) => {
+            const isTerminal = task.status === 'done' || task.status === 'cancelled';
+            if (isTerminal)
+                return false;
+            return !!task.scheduledDate && task.scheduledDate < todayDateOnly;
+        }).length;
+    }, [groupBy, hierarchyVisibleTasks, todayDateOnly]);
+    const overdueDueCount = useMemo(() => {
+        if (groupBy !== 'schedule')
+            return 0;
+        return hierarchyVisibleTasks.filter((task) => {
+            const isTerminal = task.status === 'done' || task.status === 'cancelled';
+            if (isTerminal)
+                return false;
+            return !!task.dueDate && task.dueDate < todayDateOnly;
+        }).length;
+    }, [groupBy, hierarchyVisibleTasks, todayDateOnly]);
+    const expiredColumnCandidates = useMemo(() => {
+        if (groupBy !== 'schedule')
+            return [];
+        return hierarchyVisibleTasks.filter((task) => {
+            const isTerminal = task.status === 'done' || task.status === 'cancelled';
+            if (isTerminal)
+                return false;
+            return !!task.scheduledDate && task.scheduledDate < todayDateOnly;
+        });
+    }, [groupBy, hierarchyVisibleTasks, todayDateOnly]);
+    const expiredLeafCandidates = useMemo(() => expiredRecoveryCandidates.filter(task => !hierarchyParentIdSet.has(task.id)), [expiredRecoveryCandidates, hierarchyParentIdSet]);
+    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())
+                return;
+            if (activeTab === 'add')
+                resetForm();
+            setActiveTab('tasks');
+        });
+    };
+    const [localCancellationReason, setLocalCancellationReason] = useState('');
+    const handleConfirmCancellation = async () => {
+        const success = await confirmCancellation(localCancellationReason, cancellationMode);
+        if (success) {
+            setLocalCancellationReason('');
+        }
+    };
+    const handleCancelCancellation = () => {
+        cancelCancellationPrompt();
+        setLocalCancellationReason('');
+    };
+    const handleDeleteFromCancellation = async () => {
+        if (!cancellationPromptTask)
+            return;
+        const confirmed = window.confirm('Delete this task permanently? This cannot be undone.');
+        if (!confirmed)
+            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.
+            }
+        }
+        else if (groupField === 'complexity') {
+            const direct = Number(value);
+            if (Number.isFinite(direct)) {
+                setComplexity(direct);
+            }
+        }
+        else if (groupField === 'hierarchy') {
+            // Hierarchy columns are depth-based and do not map to form defaults.
+        }
+        setActiveTab('add');
+    }, [resetForm, activeCategories, approaches, setCategory, setType, setPriority, setComplexity, setApproach, setFormTaxonomies, setActiveTab]);
+    // Ensure 'done' status is shown by default as requested
+    React.useEffect(() => {
+        if (filterStatus && !filterStatus.includes('done')) {
+            setFilterStatus(prev => [...prev, 'done']);
+        }
+    }, []);
+    // Local state for filter toolbar
+    const [showHelpModal, setShowHelpModal] = useState(false);
+    const [showAccountMenu, setShowAccountMenu] = useState(false);
+    const [showAccountHub, setShowAccountHub] = useState(false);
+    const [showSyncStatusModal, setShowSyncStatusModal] = useState(false);
+    const [workspaceSyncBusy, setWorkspaceSyncBusy] = useState(false);
+    const [workspaceSyncError, setWorkspaceSyncError] = useState(null);
+    const [workspacePanelOpen, setWorkspacePanelOpen] = useState(false);
+    const [workspaceFormName, setWorkspaceFormName] = useState('');
+    const [workspaceFormDescription, setWorkspaceFormDescription] = useState('');
+    const [workspaceActionBusy, setWorkspaceActionBusy] = useState(false);
+    const [workspaceActionError, setWorkspaceActionError] = useState('');
+    const [showTeamManagementModal, setShowTeamManagementModal] = useState(false);
+    const [teamManagementTab, setTeamManagementTab] = useState('members');
+    const [teamPlanMode, setTeamPlanMode] = useState('unknown');
+    const [teamMgmtError, setTeamMgmtError] = useState(null);
+    const [teamUsersLoading, setTeamUsersLoading] = useState(false);
+    const [teamUsers, setTeamUsers] = useState([]);
+    const [teamActionBusyUserId, setTeamActionBusyUserId] = useState(null);
+    const [teamInviteEmail, setTeamInviteEmail] = useState('');
+    const [teamInviteRole, setTeamInviteRole] = useState('member');
+    const [teamInvitePermissionMode, setTeamInvitePermissionMode] = useState('read-write');
+    const [teamInviteBusy, setTeamInviteBusy] = useState(false);
+    const [teamInviteFeedback, setTeamInviteFeedback] = useState(null);
+    const [teamAuditPage, setTeamAuditPage] = useState(0);
+    const [teamAuditLoading, setTeamAuditLoading] = useState(false);
+    const [teamAuditEvents, setTeamAuditEvents] = useState([]);
+    const [teamAuditHasMore, setTeamAuditHasMore] = useState(false);
+    const [teamAuditPages, setTeamAuditPages] = useState(1);
+    const [billingStatus, setBillingStatus] = useState(null);
+    const [billingLoading, setBillingLoading] = useState(false);
+    const [billingError, setBillingError] = useState(null);
+    const [billingActionBusy, setBillingActionBusy] = useState(false);
+    const [billingActionError, setBillingActionError] = useState(null);
+    const [billingNotice, setBillingNotice] = useState(null);
+    const [billingIntervalChoice, setBillingIntervalChoice] = useState('month');
+    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)
+            return;
+        const handlePointerDown = (event) => {
+            if (!accountMenuRef.current?.contains(event.target)) {
+                setShowAccountMenu(false);
+            }
+        };
+        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 canManageWorkspaceSync = runtimeMode === 'local' && isAuthenticated;
+    const currentWorkspaceRole = 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 hasAuthIdentity = authIdentityLabel.length > 0;
+    const isAuthBootstrapPending = cloudAuthConfigured && !authSessionResolved;
+    const teamAdminHeaders = useCallback(() => {
+        const headers = {};
+        const workspaceId = String(currentWorkspaceId || '').trim();
+        if (workspaceId)
+            headers['x-taskforce-workspace-id'] = workspaceId;
+        return headers;
+    }, [currentWorkspaceId]);
+    const loadBillingStatus = useCallback(async () => {
+        if (runtimeMode !== 'cloud' || !isAuthenticated) {
+            setBillingStatus(null);
+            return null;
+        }
+        setBillingLoading(true);
+        setBillingError(null);
+        try {
+            const res = await fetch('/api/taskforce/billing/status', {
+                method: 'GET',
+                credentials: 'include'
+            });
+            const payload = await res.json().catch(() => ({}));
+            if (!res.ok) {
+                setBillingStatus(null);
+                setBillingError(String(payload?.error || 'Failed to load billing status.'));
+                return null;
+            }
+            setBillingStatus(payload);
+            return payload;
+        }
+        catch {
+            setBillingStatus(null);
+            setBillingError('Failed to load billing status.');
+            return null;
+        }
+        finally {
+            setBillingLoading(false);
+        }
+    }, [isAuthenticated, runtimeMode]);
+    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 handleOpenBillingPortal = useCallback(async () => {
+        setBillingActionError(null);
+        setBillingNotice(null);
+        setBillingActionBusy(true);
+        try {
+            const res = await fetch('/api/taskforce/billing/portal-session', {
+                method: 'POST',
+                credentials: 'include'
+            });
+            const payload = await res.json().catch(() => ({}));
+            if (!res.ok) {
+                setBillingActionError(String(payload?.error || 'Failed to create portal session.'));
+                return;
+            }
+            const nextUrl = String(payload?.url || '').trim();
+            if (!nextUrl) {
+                setBillingActionError('Portal session did not return a redirect URL.');
+                return;
+            }
+            window.location.assign(nextUrl);
+        }
+        catch {
+            setBillingActionError('Failed to open billing portal.');
+        }
+        finally {
+            setBillingActionBusy(false);
+        }
+    }, []);
+    const handleSwitchSubscriptionInterval = useCallback(async () => {
+        setBillingActionError(null);
+        setBillingNotice(null);
+        setBillingActionBusy(true);
+        try {
+            const res = await fetch('/api/taskforce/billing/subscription', {
+                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 update subscription interval.'));
+                return;
+            }
+            setBillingNotice('Subscription updated.');
+            await loadBillingStatus();
+        }
+        catch {
+            setBillingActionError('Failed to update subscription interval.');
+        }
+        finally {
+            setBillingActionBusy(false);
+        }
+    }, [billingIntervalChoice, loadBillingStatus]);
+    const loadTeamPlanMode = useCallback(async () => {
+        if (!canManageCloudWorkspaces || !(currentWorkspaceRole === 'owner' || currentWorkspaceRole === 'admin')) {
+            setTeamPlanMode('unknown');
+            return;
+        }
+        try {
+            const res = await fetch('/api/taskforce/account/entitlements', {
+                method: 'GET',
+                credentials: 'include',
+                headers: teamAdminHeaders()
+            });
+            const payload = await res.json().catch(() => ({}));
+            if (!res.ok) {
+                setTeamPlanMode('unknown');
+                return;
+            }
+            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');
+        }
+        catch {
+            setTeamPlanMode('unknown');
+        }
+    }, [canManageCloudWorkspaces, currentWorkspaceRole, teamAdminHeaders]);
+    useEffect(() => {
+        if (!showAccountMenu && !showTeamManagementModal && !showAccountHub)
+            return;
+        void loadTeamPlanMode();
+    }, [showAccountHub, showAccountMenu, showTeamManagementModal, loadTeamPlanMode]);
+    useEffect(() => {
+        if (!showAccountHub)
+            return;
+        void loadBillingStatus();
+    }, [loadBillingStatus, showAccountHub]);
+    useEffect(() => {
+        if (!isAuthenticated)
+            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 });
+            return;
+        }
+        setBillingNotice('Checkout complete. Waiting for billing confirmation...');
+        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]);
+    const loadTeamUsers = useCallback(async () => {
+        if (!canOpenTeamManagement)
+            return;
+        setTeamUsersLoading(true);
+        setTeamMgmtError(null);
+        try {
+            const res = await fetch('/api/taskforce/admin/users', {
+                method: 'GET',
+                credentials: 'include',
+                headers: teamAdminHeaders()
+            });
+            const payload = await res.json().catch(() => ({}));
+            if (!res.ok) {
+                setTeamMgmtError(payload?.error || 'Failed to load workspace users.');
+                return;
+            }
+            const users = Array.isArray(payload?.users) ? payload.users : [];
+            const roleSortOrder = { owner: 0, admin: 1, member: 2, 'read-only': 3 };
+            const mapped = users.map((user) => ({
+                userId: String(user?.userId || ''),
+                email: String(user?.email || ''),
+                displayName: typeof user?.displayName === 'string' ? user.displayName : null,
+                role: user?.role === 'owner' || user?.role === 'admin' || user?.role === 'member' || user?.role === 'read-only'
+                    ? user.role
+                    : 'member',
+                permissionMode: user?.permissionMode === 'read-only' ? 'read-only' : 'read-write',
+                status: String(user?.status || 'active'),
+                disabled: user?.disabled === true
+            }));
+            mapped.sort((a, b) => {
+                const roleDelta = (roleSortOrder[a.role] ?? 99) - (roleSortOrder[b.role] ?? 99);
+                if (roleDelta !== 0)
+                    return roleDelta;
+                return (a.displayName || a.email).localeCompare(b.displayName || b.email, undefined, { sensitivity: 'base' });
+            });
+            setTeamUsers(mapped);
+        }
+        catch {
+            setTeamMgmtError('Failed to load workspace users.');
+        }
+        finally {
+            setTeamUsersLoading(false);
+        }
+    }, [canOpenTeamManagement, teamAdminHeaders]);
+    const loadTeamAuditPage = useCallback(async (page) => {
+        if (!canOpenTeamManagement)
+            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}`, {
+                method: 'GET',
+                credentials: 'include',
+                headers: teamAdminHeaders()
+            });
+            const payload = await res.json().catch(() => ({}));
+            if (!res.ok) {
+                setTeamMgmtError(payload?.error || 'Failed to load workspace audit log.');
+                return;
+            }
+            const events = Array.isArray(payload?.events) ? payload.events : [];
+            setTeamAuditEvents(events.map((event) => ({
+                id: String(event?.id || ''),
+                action: String(event?.action || ''),
+                actorUserId: String(event?.actorUserId || ''),
+                actorRole: String(event?.actorRole || ''),
+                createdAt: String(event?.createdAt || event?.ts || '')
+            })));
+            setTeamAuditPage(safePage);
+            const pages = Math.max(1, Number(payload?.pages || 1));
+            setTeamAuditPages(pages);
+            setTeamAuditHasMore(safePage + 1 < pages);
+        }
+        catch {
+            setTeamMgmtError('Failed to load workspace audit log.');
+        }
+        finally {
+            setTeamAuditLoading(false);
+        }
+    }, [canOpenTeamManagement, teamAdminHeaders]);
+    const reloadTeamManagementData = useCallback(async () => {
+        await Promise.all([loadTeamUsers(), loadTeamAuditPage(teamAuditPage)]);
+    }, [loadTeamUsers, loadTeamAuditPage, teamAuditPage]);
+    const openSharedLoginRoute = useCallback((mode = 'login') => {
+        const targetRaw = `${location.pathname}${location.search}${location.hash}`;
+        const target = (!targetRaw || targetRaw === '/login' || !targetRaw.startsWith('/')) ? '/' : targetRaw;
+        setShowAccountMenu(false);
+        setShowAccountHub(false);
+        setShowSyncStatusModal(false);
+        navigate(`/login?mode=${mode}&next=${encodeURIComponent(target)}`);
+    }, [location.hash, location.pathname, location.search, navigate]);
+    const openWorkspaceSetup = useCallback(() => {
+        setShowAccountMenu(false);
+        setWorkspacePanelOpen(false);
+        navigate('/setup?step=workspace', { replace: true });
+    }, [navigate]);
+    const handleSwitchWorkspace = useCallback(async (workspaceId) => {
+        if (!workspaceId || workspaceActionBusy)
+            return;
+        setWorkspaceActionError('');
+        setWorkspaceActionBusy(true);
+        try {
+            const result = await switchWorkspace(workspaceId);
+            if (!result.success) {
+                if (result.code === 'WORKSPACE_NOT_FOUND' || result.code === 'WORKSPACE_ID_REQUIRED') {
+                    openWorkspaceSetup();
+                    return;
+                }
+                setWorkspaceActionError(result.error || 'Failed to switch workspace.');
+                return;
+            }
+            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.');
+            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);
+        try {
+            const res = await fn();
+            const payload = await res.json().catch(() => ({}));
+            if (!res.ok) {
+                setTeamMgmtError(payload?.error || 'Team management action failed.');
+                return;
+            }
+            await reloadTeamManagementData();
+        }
+        catch {
+            setTeamMgmtError('Team management action failed.');
+        }
+        finally {
+            setTeamActionBusyUserId(null);
+        }
+    }, [reloadTeamManagementData]);
+    const submitTeamInvite = useCallback(async () => {
+        const email = teamInviteEmail.trim();
+        if (!email)
+            return;
+        setTeamInviteBusy(true);
+        setTeamMgmtError(null);
+        setTeamInviteFeedback(null);
+        try {
+            const res = await fetch('/api/taskforce/admin/users/invite', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    ...teamAdminHeaders()
+                },
+                credentials: 'include',
+                body: JSON.stringify({
+                    workspaceId: currentWorkspaceId,
+                    email,
+                    role: teamInviteRole,
+                    permissionMode: teamInviteRole === 'member' ? teamInvitePermissionMode : 'read-write'
+                })
+            });
+            const payload = await res.json().catch(() => ({}));
+            if (!res.ok) {
+                setTeamMgmtError(payload?.error || 'Failed to send invite.');
+                return;
+            }
+            setTeamInviteEmail('');
+            if (payload?.inviteEmailSent === false) {
+                setTeamInviteFeedback(`Invite created, but email delivery failed${payload?.inviteEmailError ? `: ${String(payload.inviteEmailError)}` : '.'}`);
+            }
+            else {
+                setTeamInviteFeedback('Invite sent.');
+            }
+            await reloadTeamManagementData();
+        }
+        catch {
+            setTeamMgmtError('Failed to send invite.');
+        }
+        finally {
+            setTeamInviteBusy(false);
+        }
+    }, [
+        currentWorkspaceId,
+        reloadTeamManagementData,
+        teamAdminHeaders,
+        teamInviteEmail,
+        teamInvitePermissionMode,
+        teamInviteRole
+    ]);
+    const hasSearchFilter = useMemo(() => searchQuery.trim().length > 0, [searchQuery]);
+    const pendingInvites = useMemo(() => teamUsers.filter((user) => user.status === 'invited'), [teamUsers]);
+    // Check if any non-search filters are set from the filters dropdown/panel
+    const hasDropdownFilters = useMemo(() => {
+        const hasCategoryFilter = filterCategories.length !== activeCategories.length;
+        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]);
+    // Check if any filters are set (search + dropdown filters)
+    const isFiltered = hasSearchFilter || hasDropdownFilters;
+    const totalActiveCount = tasks.length;
+    const visibleActiveCount = 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]);
+    const formatSyncTimestamp = useCallback((value) => {
+        if (!value)
+            return 'Never';
+        const parsed = new Date(value);
+        if (Number.isNaN(parsed.getTime()))
+            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]);
+    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);
+            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);
+            return;
+        }
+        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);
+            return;
+        }
+        applyState(rawSyncState);
+    }, [rawSyncState, displaySyncState]);
+    useEffect(() => {
+        return () => {
+            if (syncStateTimerRef.current !== null) {
+                window.clearTimeout(syncStateTimerRef.current);
+                syncStateTimerRef.current = null;
+            }
+        };
+    }, []);
+    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':
+                return {
+                    label: 'Fallback Pull',
+                    color: '#fb923c',
+                    border: 'rgba(251, 146, 60, 0.45)',
+                    background: 'rgba(251, 146, 60, 0.16)'
+                };
+            case 'error':
+                return {
+                    label: 'Sync Error',
+                    color: '#f87171',
+                    border: 'rgba(248, 113, 113, 0.45)',
+                    background: 'rgba(248, 113, 113, 0.14)'
+                };
+            case 'disconnected':
+                return {
+                    label: 'Disconnected',
+                    color: '#94a3b8',
+                    border: 'rgba(148, 163, 184, 0.45)',
+                    background: 'rgba(148, 163, 184, 0.12)'
+                };
+            case 'idle':
+            default:
+                return {
+                    label: 'Synced',
+                    color: '#34d399',
+                    border: 'rgba(52, 211, 153, 0.45)',
+                    background: 'rgba(52, 211, 153, 0.14)'
+                };
+        }
+    }, [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'
+            };
+        }
+        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'
+            };
+        }
+        if (displaySyncState === 'reconnecting') {
+            return {
+                label: 'Reconnecting',
+                color: '#f59e0b',
+                border: 'rgba(245, 158, 11, 0.45)',
+                background: 'rgba(245, 158, 11, 0.16)',
+                icon: 'off'
+            };
+        }
+        if (displaySyncState === 'disconnected') {
+            return {
+                label: 'Disconnected',
+                color: '#94a3b8',
+                border: 'rgba(148, 163, 184, 0.45)',
+                background: 'rgba(148, 163, 184, 0.12)',
+                icon: 'off'
+            };
+        }
+        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 });
+                }
+            });
+        }
+        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)
+            return;
+        setHierarchyRootTaskId(bestMatch.id);
+        setHierarchyRootSearch('');
+        if (parentTaskFilterMode === 'unlinked')
+            setParentTaskFilterMode('all');
+    }, [hierarchySearchMatches, parentTaskFilterMode, setParentTaskFilterMode]);
+    const selectedDateObj = useMemo(() => parseDateOnlyLocal(scheduleSelectedDate) || new Date(), [scheduleSelectedDate]);
+    const scheduleWeekStart = useMemo(() => startOfWeek(selectedDateObj, globalWeekStartsOn), [selectedDateObj, globalWeekStartsOn]);
+    const scheduleDates = useMemo(() => {
+        const map = {
+            mon: '',
+            tue: '',
+            wed: '',
+            thu: '',
+            fri: '',
+            sat: '',
+            sun: ''
+        };
+        SCHEDULE_DAY_KEYS.forEach((key) => {
+            const offset = getDayOffsetFromWeekStart(key, globalWeekStartsOn);
+            map[key] = toDateOnlyLocal(addDays(scheduleWeekStart, offset));
+        });
+        return map;
+    }, [scheduleWeekStart, globalWeekStartsOn]);
+    const mapToSelectedWeekDate = useCallback((sourceDateOnly) => {
+        const parsed = parseDateOnlyLocal(sourceDateOnly);
+        if (!parsed)
+            return scheduleDates.mon;
+        const day = parsed.getDay();
+        const key = day === 1 ? 'mon' :
+            day === 2 ? 'tue' :
+                day === 3 ? 'wed' :
+                    day === 4 ? 'thu' :
+                        day === 5 ? 'fri' :
+                            day === 6 ? (scheduleShowWeekends ? 'sat' : 'fri') :
+                                (scheduleShowWeekends ? 'sun' : 'fri');
+        return scheduleDates[key] || scheduleDates.mon;
+    }, [scheduleDates, scheduleShowWeekends]);
+    const handleMoveExpiredToSelectedWeek = useCallback(async () => {
+        if (scheduleBulkBusy || expiredLeafCandidates.length === 0)
+            return;
+        setScheduleBulkBusy(true);
+        try {
+            for (const task of expiredLeafCandidates) {
+                const sourceDate = task.scheduledDate || task.dueDate || todayDateOnly;
+                const nextDate = mapToSelectedWeekDate(sourceDate);
+                await handleUpdateTask(task.id, {
+                    scheduledDate: nextDate,
+                    scheduledWeekKey: dateOnlyToIsoWeekKey(nextDate),
+                    orderInDay: null
+                });
+            }
+            await fetchTasks(true);
+        }
+        finally {
+            setScheduleBulkBusy(false);
+        }
+    }, [scheduleBulkBusy, expiredLeafCandidates, todayDateOnly, mapToSelectedWeekDate, handleUpdateTask, fetchTasks]);
+    const handleMoveExpiredToBacklog = useCallback(async () => {
+        if (scheduleBulkBusy || expiredRecoveryCandidates.length === 0)
+            return;
+        setScheduleBulkBusy(true);
+        try {
+            for (const task of expiredRecoveryCandidates) {
+                await handleUpdateTask(task.id, {
+                    scheduledDate: null,
+                    scheduledWeekKey: null,
+                    orderInDay: null
+                });
+            }
+            await fetchTasks(true);
+        }
+        finally {
+            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'
+            ? ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat']
+            : SCHEDULE_DAY_KEYS;
+        const visibleKeys = scheduleShowWeekends
+            ? orderedKeys
+            : ['mon', 'tue', 'wed', 'thu', 'fri'];
+        const days = visibleKeys.map((key) => {
+            const date = parseDateOnlyLocal(scheduleDates[key]) || scheduleWeekStart;
+            const dateOnly = scheduleDates[key];
+            const isWeekend = key === 'sat' || key === 'sun';
+            return {
+                value: key,
+                label: `${SCHEDULE_DAY_LABELS[key]} ${formatDate(date, { month: 'short', day: 'numeric' }, resolvedLocale)}`,
+                color: isWeekend ? '#1e3a8a' : '#3b82f6',
+                icon: 'Calendar',
+                date: dateOnly,
+                isPast: dateOnly < todayDateOnly,
+                isSelected: dateOnly === scheduleSelectedDate,
+                isWeekend
+            };
+        });
+        const hasExpiredTasks = expiredColumnCandidates.length > 0;
+        return [
+            ...(scheduleShowBacklog ? [{ value: 'backlog', label: 'Backlog', color: '#64748b', icon: 'Inbox' }] : []),
+            ...(hasExpiredTasks ? [{ value: 'expired', label: 'Expired', color: '#ef4444', icon: 'AlertTriangle' }] : []),
+            ...days
+        ];
+    }, [scheduleShowWeekends, scheduleShowBacklog, scheduleDates, scheduleWeekStart, expiredColumnCandidates.length, todayDateOnly, scheduleSelectedDate, globalWeekStartsOn, resolvedLocale]);
+    const kanbanColumns = useMemo(() => {
+        switch (groupBy) {
+            case 'category':
+                return activeCategories;
+            case 'type':
+                return (activeTypes || []).map(t => ({
+                    ...t,
+                    icon: TypeMeta[t.value]?.icon,
+                    color: TypeMeta[t.value]?.color
+                }));
+            case 'priority':
+                return priorities;
+            case 'complexity':
+                return [
+                    { value: 1, label: 'Tiny', icon: 'Gauge', color: '#10b981' },
+                    { value: 2, label: 'Low', icon: 'Gauge', color: '#14b8a6' },
+                    { value: 3, label: 'Medium', icon: 'Gauge', color: '#3b82f6' },
+                    { value: 4, label: 'High', icon: 'Gauge', color: '#8b5cf6' },
+                    { value: 5, label: 'Epic', icon: 'Gauge', color: '#d946ef' }
+                ];
+            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' }
+                ];
+            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' }
+                ];
+            case 'hierarchy': {
+                if (parentTaskFilterMode === 'unlinked') {
+                    return [{
+                            value: 'standalone',
+                            label: 'Unlinked',
+                            icon: 'Circle',
+                            color: '#64748b'
+                        }];
+                }
+                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'
+                    });
+                }
+                return hierarchyColumns;
+            }
+            case 'schedule':
+                return scheduleColumns;
+            default:
+                return activeCategories;
+        }
+    }, [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: {
+                    position: 'relative',
+                    opacity: props.loadingTasks ? 0.7 : 1,
+                    transition: 'opacity 0.2s ease, padding-right 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) => {
+                                    setScheduleSelectedDate(dateOnly);
+                                    const parsed = parseDateOnlyLocal(dateOnly);
+                                    if (parsed) {
+                                        setScheduleCalendarMonth(`${parsed.getFullYear()}-${String(parsed.getMonth() + 1).padStart(2, '0')}`);
+                                    }
+                                }, persistedScrollLeft: groupBy === 'schedule' ? scheduleScrollLeft : undefined, onScrollLeftChange: (scrollLeft) => {
+                                    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: {
+                                    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) => {
+                            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);
+                        }, 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 { }
+                            }
+                        }, 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: () => {
+                                        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'
+                                        ? (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
+                                        ? (hasAuthIdentity
+                                            ? _jsxs(_Fragment, { children: ["Signed in as ", _jsx("span", { className: styles.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: () => {
+                                            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
+                                        ? (workspaceCloudSyncEnabled
+                                            ? `Enabled${workspaceSyncSourceOfTruth ? ` · Source: ${workspaceSyncSourceOfTruth}` : ''}`
+                                            : '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: () => {
+                                        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: () => {
+                                        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) => {
+                                                        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,
+                                                                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) => {
+                                                        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,
+                                                                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: () => {
+                                                        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,
+                                                                disabled: !member.disabled
+                                                            })
+                                                        }));
+                                                    }, children: member.disabled ? 'Reactivate' : 'Deactivate' }), member.status === 'invited' && (_jsx("button", { className: styles.cancelBtn, disabled: teamActionBusyUserId === member.userId, onClick: () => {
+                                                        void executeTeamUserAction(member.userId, async () => fetch(`/api/taskforce/admin/users/${encodeURIComponent(member.userId)}/invite/revoke`, {
+                                                            method: 'POST',
+                                                            headers: { 'Content-Type': 'application/json', ...teamAdminHeaders() },
+                                                            credentials: 'include',
+                                                            body: JSON.stringify({ workspaceId: currentWorkspaceId })
+                                                        }));
+                                                    }, 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)}`, {
+                                                            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: () => {
+                    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: () => {
+                                                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 })] }) })] }));
+}