@taskforcehq/taskforce 0.3.324 → 0.3.327

package/dist/components/views/panels/PlanningDrawer.js

@@ -2,90 +2,95 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import React from 'react';
 import { useDndContext, useDraggable, useDroppable } from '@dnd-kit/core';
 import { CSS } from '@dnd-kit/utilities';
-import { Bot, ChevronDown, ChevronLeft, ChevronRight, ClipboardList, Eye, EyeOff, Filter, Link2, Plus, Unlink, User, } from 'lucide-react';
+import { ArrowUpDown, Archive, ChevronDown, ChevronLeft, ChevronRight, Eye, EyeOff, Filter, GripVertical, Kanban, Link2, Pencil, Plus, RotateCcw, Search, Star, Unlink, X, } from 'lucide-react';
 import styles from '../../../Taskforce.module.css';
 import panelStyles from './PlanningDrawer.module.css';
-import { ReferenceBadgeButton } from '../../ui/ReferenceBadgeButton';
 import { HierarchyActionBadge } from '../../ui/HierarchyActionBadge';
+import { TaxonomyDropdown } from '../../ui/TaxonomyDropdown';
 import { DisclosureSectionHeader } from '../../ui/DisclosureSectionHeader';
-import { IconMap, getStatusDefinition, resolveColor } from '../../../utils/constants';
+import { getStatusDefinition } from '../../../utils/constants';
 import { formatInitiativeReference, formatWorkstreamReference, } from '../../../utils/planningReferences.js';
-import { getEntityActivityItems } from '../../../utils/taskActivity';
-const DeferredEntityActivityTimeline = React.lazy(() => (import('../../activity/EntityActivityTimeline').then((module) => ({
-    default: module.EntityActivityTimeline,
-}))));
-const DeferredContextAttachmentManager = React.lazy(() => (import('../../context/ContextAttachmentManager').then((module) => ({
-    default: module.ContextAttachmentManager,
-}))));
-export const PLANNING_DRAWER_TREE_WIDTH_PX = 332;
+import { resolvePlanningArchiveDetailState } from '../../../utils/planningArchivePresentation';
+import { getTaskReferenceLabel, } from '../../../utils/taskReferences';
+import { getPlanningFavoriteKey, } from '../../../utils/planningFavorites';
+import { TASK_ASSIGNEE_UNASSIGNED_COLOR, TASK_ASSIGNEE_UNASSIGNED_ICON, } from '../../../utils/assignees';
+import { PlanningEntityActivity, PlanningEntityContext, PlanningEntityDescription, } from '../../features/planning/PlanningEntityDetails';
+import { PlanningEntitySummary, PlanningNoTasks, PlanningProgress, PlanningReferenceBadge, PlanningSummaryMeta, } from '../../features/planning/PlanningEntitySummary';
+import { PlanningTaskCard } from '../../features/planning/PlanningTaskCard';
+import { PlanningTaskArrangeControl } from '../../features/planning/PlanningTaskArrangeControl';
+import planningDropdownStyles from '../../features/planning/PlanningDropdownControl.module.css';
+import { PlanningTaskOrderList } from '../../features/planning/PlanningTaskOrderList';
+import { arrangePlanningTasks, mergeVisiblePlanningTaskOrder, } from '../../features/planning/planningTaskArrangement';
+import { PlanningArchiveConfirmation } from '../../features/planning/PlanningArchiveConfirmation';
+import { PlanningUnlinkConfirmation, } from '../../features/planning/PlanningUnlinkConfirmation';
+import { PlanningLinkPicker } from '../../features/planning/PlanningLinkPicker';
+import { PlanningOwnerDropdown, normalizePlanningOwnerOptions, toPlanningAssigneeOption, } from '../../features/planning/PlanningOwnerDropdown';
+import { buildPlanningNavigatorResults, matchesPlanningNavigatorItem, PLANNING_NAVIGATOR_SORT_OPTIONS, } from '../../features/planning/planningNavigator';
+export { normalizePlanningOwnerOptions } from '../../features/planning/PlanningOwnerDropdown';
+export const PLANNING_DRAWER_TREE_WIDTH_PX = 392;
 export const PLANNING_DRAWER_DETAIL_WIDTH_PX = 392;
 export const PLANNING_DRAWER_COLLAPSED_PANE_WIDTH_PX = 56;
+export const PLANNING_DRAWER_WIDE_MIN_AVAILABLE_PX = 1280;
+export const PLANNING_DRAWER_MEDIUM_MIN_AVAILABLE_PX = PLANNING_DRAWER_TREE_WIDTH_PX + PLANNING_DRAWER_DETAIL_WIDTH_PX;
+export function resolvePlanningDrawerLayoutMode(viewportWidth, leftOffset = 0) {
+    const availableWidth = Math.max(0, viewportWidth - leftOffset);
+    if (availableWidth >= PLANNING_DRAWER_WIDE_MIN_AVAILABLE_PX)
+        return 'wide';
+    if (availableWidth >= PLANNING_DRAWER_MEDIUM_MIN_AVAILABLE_PX)
+        return 'medium';
+    return 'narrow';
+}
+function usePlanningDrawerViewport(leftOffset) {
+    const readViewportWidth = React.useCallback(() => (typeof window === 'undefined' ? PLANNING_DRAWER_WIDE_MIN_AVAILABLE_PX + leftOffset : window.innerWidth), [leftOffset]);
+    const [viewportWidth, setViewportWidth] = React.useState(readViewportWidth);
+    React.useEffect(() => {
+        const handleResize = () => setViewportWidth(readViewportWidth());
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, [readViewportWidth]);
+    return {
+        viewportWidth,
+        availableWidth: Math.max(0, viewportWidth - leftOffset),
+        layoutMode: resolvePlanningDrawerLayoutMode(viewportWidth, leftOffset),
+    };
+}
 export function getPlanningDrawerWidthPx(treeCollapsed, hasPrimaryPane, primaryCollapsed, hasSecondaryPane, secondaryCollapsed) {
     return (treeCollapsed ? PLANNING_DRAWER_COLLAPSED_PANE_WIDTH_PX : PLANNING_DRAWER_TREE_WIDTH_PX)
         + (hasPrimaryPane ? (primaryCollapsed ? PLANNING_DRAWER_COLLAPSED_PANE_WIDTH_PX : PLANNING_DRAWER_DETAIL_WIDTH_PX) : 0)
         + (hasSecondaryPane ? (secondaryCollapsed ? PLANNING_DRAWER_COLLAPSED_PANE_WIDTH_PX : PLANNING_DRAWER_DETAIL_WIDTH_PX) : 0);
 }
-export function normalizePlanningOwnerOptions(options, selectedValue) {
-    const selected = String(selectedValue || '').trim();
-    const byIdentity = new Map();
-    for (const option of options) {
-        const value = String(option?.value || '').trim();
-        if (!value || value === 'unassigned')
-            continue;
-        if (typeof option.archivedAt === 'string' && option.archivedAt.trim().length > 0)
-            continue;
-        const label = String(option.label || value).trim() || value;
-        const kind = String(option.kind || '').trim().toLowerCase();
-        const username = String(option.username || '').trim().toLowerCase();
-        const identity = kind === 'agent'
-            ? `agent:${username || label.toLowerCase()}`
-            : `value:${value}`;
-        if (!byIdentity.has(identity) || value === selected) {
-            byIdentity.set(identity, { ...option, value, label });
-        }
-    }
-    return Array.from(byIdentity.values()).sort((left, right) => (left.label.localeCompare(right.label, undefined, { sensitivity: 'base' })));
-}
-function formatTaskStatusLabel(status) {
-    if (!status)
-        return 'No status';
-    return status
-        .split(/[-_\s]+/g)
-        .filter(Boolean)
-        .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
-        .join(' ');
+function ArchiveVisibilityToggle({ visible, disabled, disabledLabel, itemLabel, onToggle, }) {
+    const actionLabel = visible ? `Hide archived ${itemLabel}` : `Show archived ${itemLabel}`;
+    const label = disabled ? (disabledLabel || `No archived ${itemLabel}`) : actionLabel;
+    return (_jsx("button", { type: "button", className: `tf-control-icon ${panelStyles.archiveVisibilityToggle} ${visible ? panelStyles.toggleActive : ''}`.trim(), title: label, "aria-label": label, "aria-pressed": visible, disabled: disabled, onClick: onToggle, children: visible ? _jsx(EyeOff, { size: 15, "aria-hidden": "true" }) : _jsx(Eye, { size: 15, "aria-hidden": "true" }) }));
 }
-function PlanningReferenceBadge({ label, entityType, interactive = true, }) {
-    const [copied, setCopied] = React.useState(false);
-    const handleClick = React.useCallback(async (event) => {
-        event.stopPropagation();
-        try {
-            await navigator.clipboard.writeText(label);
-            setCopied(true);
-            window.setTimeout(() => setCopied(false), 1200);
-        }
-        catch {
-            setCopied(false);
-        }
-    }, [label]);
-    if (!interactive) {
-        return (_jsx("span", { className: `${styles.taskIdBadge} ${panelStyles.referenceBadgeStatic}`.trim(), children: _jsx("span", { children: label }) }));
+function countArchivedDetailChildren(detail) {
+    if (detail.type === 'initiative') {
+        return (detail.item.allWorkstreams || detail.item.workstreams)
+            .filter((workstream) => Boolean(workstream.isArchived)).length;
     }
-    return (_jsx(ReferenceBadgeButton, { copied: copied, label: label, onClick: handleClick, title: `Copy ${entityType} reference`, ariaLabel: copied ? `Copied ${entityType} reference` : `Copy ${entityType} reference`, className: panelStyles.referenceBadgeButton, children: label }));
+    return (detail.item.tasks || []).filter((task) => Boolean(task.isArchived)).length;
 }
-function PlanningRow({ rowId, rowType, referenceLabel, title, meta, active, detailOpen = false, canExpand = false, expanded = false, onToggleExpand, onToggleScope, onToggleDetails, }) {
+function PlanningRow({ rowId, rowType, referenceLabel, item, ownerOption, ownerOptions, workstreamCount, active, isArchived = false, detailOpen = false, canExpand = false, expanded = false, controlsId, onToggleExpand, onToggleScope, onOpenDetails, onChangeOwner, initiativeLinkOptions = [], onLinkInitiative, favorite, favoriteReady, onToggleFavorite, onArchiveReady, hierarchyInteractions = true, }) {
+    const { title } = item;
+    const [archiveConfirmationVisible, setArchiveConfirmationVisible] = React.useState(false);
+    const [archiveBusy, setArchiveBusy] = React.useState(false);
+    const [initiativePickerVisible, setInitiativePickerVisible] = React.useState(false);
+    const [initiativeLinkBusy, setInitiativeLinkBusy] = React.useState(false);
     const { active: dndActive } = useDndContext();
     const dragType = String(dndActive?.data?.current?.type || '');
-    const canDropTask = rowType === 'workstream' && dragType === 'task-card';
-    const canDropWorkstream = rowType === 'initiative' && dragType === 'planning-workstream';
+    const canDropTask = hierarchyInteractions && rowType === 'workstream' && dragType === 'task-card';
+    const canDropWorkstream = hierarchyInteractions && rowType === 'initiative' && dragType === 'planning-workstream';
     const droppableType = rowType === 'workstream' ? 'planning-workstream-target' : 'planning-initiative-target';
     const { setNodeRef: setDropRef, isOver, } = useDroppable({
         id: `${droppableType}:${rowId}`,
         data: rowType === 'workstream'
             ? { type: droppableType, workstreamId: rowId }
             : { type: droppableType, initiativeId: rowId },
+        disabled: !hierarchyInteractions,
     });
-    const draggable = rowType === 'workstream';
+    const draggable = hierarchyInteractions && rowType === 'workstream';
     const { attributes, listeners, setNodeRef: setDragRef, transform, isDragging, } = useDraggable({
         id: `planning-workstream:${rowId}`,
         data: { type: 'planning-workstream', workstreamId: rowId },
@@ -95,78 +100,443 @@ function PlanningRow({ rowId, rowType, referenceLabel, title, meta, active, deta
         ? { transform: CSS.Translate.toString(transform) }
         : undefined;
     const showDropReady = canDropTask || canDropWorkstream;
-    return (_jsxs("div", { ref: setDropRef, style: dragStyle, className: `${panelStyles.treeRow} ${detailOpen ? panelStyles.treeRowDetailOpen : ''} ${showDropReady ? panelStyles.treeRowDropReady : ''} ${isOver ? panelStyles.treeRowDropActive : ''} ${isDragging ? panelStyles.treeRowDragging : ''} ${showDropReady ? panelStyles.treeRowDropMode : ''}`, children: [canExpand ? (_jsx("button", { type: "button", className: panelStyles.treeChevron, onClick: onToggleExpand, title: expanded ? 'Collapse workstreams' : 'Expand workstreams', children: expanded ? _jsx(ChevronDown, { size: 15 }) : _jsx(ChevronRight, { size: 15 }) })) : (_jsx("span", { className: `${panelStyles.treeChevron} ${panelStyles.treeChevronPlaceholder}`, "aria-hidden": "true" })), _jsxs("div", { className: panelStyles.rowContent, children: [_jsxs("div", { className: panelStyles.rowTopRow, children: [referenceLabel ? (_jsx(PlanningReferenceBadge, { label: referenceLabel, entityType: rowType })) : _jsx("span", { "aria-hidden": "true" }), _jsx("button", { type: "button", className: `${panelStyles.detailsButton} ${active ? panelStyles.detailsButtonActive : ''}`, onClick: onToggleScope, title: active ? 'Clear board scope' : 'Scope board to this item', children: _jsx(Filter, { size: 14 }) })] }), _jsxs("button", { type: "button", ref: draggable ? setDragRef : undefined, className: panelStyles.rowButton, onClick: onToggleDetails, ...(draggable ? attributes : {}), ...(draggable ? listeners : {}), children: [_jsx("span", { className: panelStyles.rowTitle, children: title }), _jsx("span", { className: panelStyles.rowMeta, children: meta })] })] })] }));
+    const childType = rowType === 'initiative' ? 'workstreams' : 'tasks';
+    const expansionEnabled = canExpand && Boolean(onToggleExpand);
+    const expansionLabel = !canExpand
+        ? `No ${childType} for ${title}`
+        : `${expanded ? 'Collapse' : 'Expand'} ${childType} for ${title}`;
+    const archiveActionVisible = Boolean(item.archiveReady && !isArchived && onArchiveReady);
+    const rowActionRefs = React.useRef({});
+    const [activeRowActionId, setActiveRowActionId] = React.useState('favorite');
+    const enabledRowActionIds = React.useMemo(() => [
+        ...(favoriteReady ? ['favorite'] : []),
+        ...(archiveActionVisible ? ['archive'] : []),
+        'scope',
+        ...(expansionEnabled ? ['disclosure'] : []),
+    ], [archiveActionVisible, expansionEnabled, favoriteReady]);
+    const effectiveActiveRowActionId = enabledRowActionIds.includes(activeRowActionId)
+        ? activeRowActionId
+        : enabledRowActionIds[0];
+    React.useEffect(() => {
+        if (effectiveActiveRowActionId && effectiveActiveRowActionId !== activeRowActionId) {
+            setActiveRowActionId(effectiveActiveRowActionId);
+        }
+    }, [activeRowActionId, effectiveActiveRowActionId]);
+    const handleRowActionFocus = React.useCallback((actionId) => {
+        setActiveRowActionId(actionId);
+    }, []);
+    const handleRowActionKeyDown = React.useCallback((event) => {
+        if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key))
+            return;
+        const actionButton = event.target.closest('[data-planning-row-action]');
+        const currentActionId = actionButton?.dataset.planningRowAction;
+        if (!currentActionId || !enabledRowActionIds.includes(currentActionId))
+            return;
+        event.preventDefault();
+        const currentIndex = enabledRowActionIds.indexOf(currentActionId);
+        const nextIndex = event.key === 'Home'
+            ? 0
+            : event.key === 'End'
+                ? enabledRowActionIds.length - 1
+                : event.key === 'ArrowRight'
+                    ? (currentIndex + 1) % enabledRowActionIds.length
+                    : (currentIndex - 1 + enabledRowActionIds.length) % enabledRowActionIds.length;
+        const nextActionId = enabledRowActionIds[nextIndex];
+        setActiveRowActionId(nextActionId);
+        rowActionRefs.current[nextActionId]?.focus();
+    }, [enabledRowActionIds]);
+    const handleConfirmArchive = async () => {
+        if (!onArchiveReady || archiveBusy)
+            return;
+        setArchiveBusy(true);
+        try {
+            const archived = await onArchiveReady();
+            if (archived)
+                setArchiveConfirmationVisible(false);
+        }
+        finally {
+            setArchiveBusy(false);
+        }
+    };
+    const handleLinkInitiative = async (option) => {
+        if (!onLinkInitiative || initiativeLinkBusy)
+            return;
+        setInitiativeLinkBusy(true);
+        try {
+            const result = await onLinkInitiative(option);
+            if (result !== false)
+                setInitiativePickerVisible(false);
+        }
+        finally {
+            setInitiativeLinkBusy(false);
+        }
+    };
+    const canLinkInitiative = rowType === 'workstream' && Boolean(onLinkInitiative);
+    const initiativeLinkDisabled = isArchived || initiativeLinkBusy || initiativeLinkOptions.length === 0;
+    const initiativeLinkTitle = isArchived
+        ? 'Unarchive this workstream before linking an initiative'
+        : initiativeLinkOptions.length === 0
+            ? 'No initiatives available'
+            : 'Link initiative';
+    return (_jsx("div", { ref: setDropRef, style: dragStyle, className: `${panelStyles.treeRow} ${isArchived ? panelStyles.treeRowArchived : ''} ${detailOpen ? panelStyles.treeRowDetailOpen : ''} ${showDropReady ? panelStyles.treeRowDropReady : ''} ${isOver ? panelStyles.treeRowDropActive : ''} ${isDragging ? panelStyles.treeRowDragging : ''} ${showDropReady ? panelStyles.treeRowDropMode : ''}`, "data-board-scoped": active || undefined, children: _jsxs("div", { className: panelStyles.rowContent, children: [_jsxs("div", { className: panelStyles.rowTopRow, children: [_jsxs("div", { className: panelStyles.rowReferenceActions, children: [canLinkInitiative ? (_jsx(HierarchyActionBadge, { disabled: initiativeLinkDisabled, onClick: (event) => {
+                                        event.stopPropagation();
+                                        setInitiativePickerVisible((current) => !current);
+                                    }, title: initiativeLinkTitle, ariaLabel: "Link initiative", ariaExpanded: initiativePickerVisible, children: _jsx(Link2, { size: 14, "aria-hidden": "true" }) })) : null, _jsx(PlanningReferenceBadge, { label: referenceLabel || 'Reference pending', entityType: rowType, entityName: title, pending: !referenceLabel })] }), _jsxs("div", { className: panelStyles.rowActions, role: "toolbar", "aria-label": `${rowType === 'initiative' ? 'Initiative' : 'Workstream'} actions for ${title}`, "aria-orientation": "horizontal", onKeyDown: handleRowActionKeyDown, children: [_jsx("button", { type: "button", ref: (node) => {
+                                        rowActionRefs.current.favorite = node;
+                                    }, className: `tf-control-icon tf-control-icon-compact ${panelStyles.favoriteButton} ${favorite ? 'tf-control-icon-active' : ''}`.trim(), onClick: onToggleFavorite, onFocus: () => handleRowActionFocus('favorite'), disabled: !favoriteReady, tabIndex: effectiveActiveRowActionId === 'favorite' ? 0 : -1, "data-planning-row-action": "favorite", title: !favoriteReady
+                                        ? 'Loading Favorites'
+                                        : favorite ? `Remove ${rowType} from Favorites` : `Add ${rowType} to Favorites`, "aria-label": !favoriteReady
+                                        ? `Loading Favorites for ${rowType} ${title}`
+                                        : favorite ? `Remove ${rowType} ${title} from Favorites` : `Add ${rowType} ${title} to Favorites`, "aria-pressed": favorite, children: _jsx(Star, { size: 14, fill: favorite ? 'currentColor' : 'none', "aria-hidden": "true" }) }), archiveActionVisible ? (_jsx("button", { type: "button", ref: (node) => {
+                                        rowActionRefs.current.archive = node;
+                                    }, className: "tf-control-icon tf-control-icon-compact", onClick: () => setArchiveConfirmationVisible(true), onFocus: () => handleRowActionFocus('archive'), tabIndex: effectiveActiveRowActionId === 'archive' ? 0 : -1, "data-planning-row-action": "archive", title: `Archive completed ${rowType}`, "aria-label": `Archive completed ${rowType} ${title}`, "aria-expanded": archiveConfirmationVisible, children: _jsx(Archive, { size: 14, "aria-hidden": "true" }) })) : null, _jsx("button", { type: "button", ref: (node) => {
+                                        rowActionRefs.current.scope = node;
+                                    }, className: `tf-control-icon tf-control-icon-compact ${panelStyles.scopeButton} ${active ? 'tf-control-icon-active' : ''}`.trim(), onClick: onToggleScope, onFocus: () => handleRowActionFocus('scope'), tabIndex: effectiveActiveRowActionId === 'scope' ? 0 : -1, "data-planning-row-action": "scope", title: active ? 'Clear board scope' : 'Scope board to this item', "aria-label": active ? `Clear board scope for ${title}` : `Scope board to ${title}`, "aria-pressed": active, children: _jsx(Kanban, { size: 14, "aria-hidden": "true" }) }), _jsx("button", { type: "button", ref: (node) => {
+                                        rowActionRefs.current.disclosure = node;
+                                    }, className: `tf-control-icon tf-control-icon-compact ${panelStyles.treeChevron}`.trim(), onClick: expansionEnabled ? onToggleExpand : undefined, onFocus: () => handleRowActionFocus('disclosure'), tabIndex: effectiveActiveRowActionId === 'disclosure' ? 0 : -1, "data-planning-row-action": "disclosure", title: expansionLabel, "aria-label": expansionLabel, "aria-expanded": expansionEnabled ? expanded : false, "aria-controls": expansionEnabled && expanded ? controlsId : undefined, disabled: !expansionEnabled, children: expanded && expansionEnabled
+                                        ? _jsx(ChevronDown, { size: 14, "aria-hidden": "true" })
+                                        : _jsx(ChevronRight, { size: 14, "aria-hidden": "true" }) })] })] }), canLinkInitiative && initiativePickerVisible ? (_jsxs("div", { className: `${panelStyles.relationshipPickerRow} ${panelStyles.rowRelationshipPicker}`.trim(), role: "group", "aria-label": `Link ${title} to initiative`, children: [_jsx(PlanningLinkPicker, { options: initiativeLinkOptions, entityLabel: "initiative", onSelect: (option) => void handleLinkInitiative(option), disabled: initiativeLinkBusy }), _jsx("button", { type: "button", className: "tf-control-icon tf-control-icon-compact", disabled: initiativeLinkBusy, onClick: () => setInitiativePickerVisible(false), title: "Cancel initiative link", "aria-label": "Cancel initiative link", children: _jsx(X, { size: 14, "aria-hidden": "true" }) })] })) : null, _jsxs("div", { className: panelStyles.rowBody, children: [draggable ? (_jsx("div", { className: panelStyles.rowLeadingActions, "data-planning-leading-actions": "true", children: _jsx("button", { type: "button", ref: setDragRef, className: panelStyles.dragHandle, title: "Drag workstream", "aria-label": `Drag workstream ${title}`, "data-planning-drag-handle": "true", ...attributes, ...listeners, children: _jsx(GripVertical, { size: 15, "aria-hidden": "true" }) }) })) : null, _jsx("div", { role: "button", tabIndex: 0, className: `${panelStyles.rowButton} ${draggable ? panelStyles.rowButtonWithGrip : ''}`.trim(), onClick: onOpenDetails, onKeyDown: (event) => {
+                                if (event.key !== 'Enter' && event.key !== ' ')
+                                    return;
+                                event.preventDefault();
+                                onOpenDetails();
+                            }, "aria-label": `View ${rowType} details for ${title}`, "aria-pressed": detailOpen, children: _jsx(PlanningEntitySummary, { item: item, entityType: rowType, workstreamCount: workstreamCount, ownerOption: ownerOption ? toPlanningAssigneeOption(ownerOption) : undefined, ownerOptions: ownerOptions.map(toPlanningAssigneeOption), onChangeOwner: onChangeOwner }) })] }), archiveConfirmationVisible ? (_jsx(PlanningArchiveConfirmation, { entityType: rowType, title: title, activeTaskCount: item.archiveActiveTaskCount, activeWorkstreamCount: item.archiveActiveWorkstreamCount, busy: archiveBusy, onCancel: () => setArchiveConfirmationVisible(false), onConfirm: () => void handleConfirmArchive() })) : null] }) }));
 }
-function CollapsedPane({ label, onExpand, }) {
-    return (_jsx("div", { className: `${panelStyles.paneShell} ${panelStyles.collapsedPaneShell}`.trim(), children: _jsxs("div", { className: panelStyles.collapsedPaneHeader, children: [_jsx("button", { type: "button", className: "tf-control-icon", onClick: onExpand, title: `Expand ${label}`, children: _jsx(ChevronRight, { size: 16 }) }), _jsx("span", { className: panelStyles.collapsedPaneLabel, children: label })] }) }));
+function PlanningTreeTaskCard({ task, assigneeOption, assigneeOptions, showTaskCardStatusLabel, onOpenTaskById, onChangeTaskAssignee, onSetTaskStatus, onArchivePlanningTask, }) {
+    const [archiveBusy, setArchiveBusy] = React.useState(false);
+    const status = getStatusDefinition(task.status).value;
+    const canArchive = !task.isArchived
+        && (status === 'done' || status === 'cancelled')
+        && Boolean(onArchivePlanningTask);
+    return (_jsx("div", { className: `${panelStyles.listItemButton} ${panelStyles.detailCardButton}`.trim(), children: _jsx(PlanningTaskCard, { task: task, assigneeOption: assigneeOption ? toPlanningAssigneeOption(assigneeOption) : undefined, assigneeOptions: assigneeOptions.map(toPlanningAssigneeOption), showStatusLabel: showTaskCardStatusLabel, onOpen: onOpenTaskById ? () => onOpenTaskById(task.id) : undefined, onAssigneeChange: onChangeTaskAssignee
+                ? (assignee) => onChangeTaskAssignee(task.id, assignee)
+                : undefined, onStatusChange: onSetTaskStatus ? (status) => onSetTaskStatus(task.id, status) : undefined, actions: canArchive ? (_jsx("button", { type: "button", className: "tf-control-icon tf-control-icon-compact", disabled: archiveBusy, onClick: async (event) => {
+                    event.stopPropagation();
+                    setArchiveBusy(true);
+                    try {
+                        await onArchivePlanningTask?.(task.id);
+                    }
+                    finally {
+                        setArchiveBusy(false);
+                    }
+                }, title: "Archive task", "aria-label": `Archive task ${getTaskReferenceLabel(task) || task.title}`, children: _jsx(Archive, { size: 14, "aria-hidden": "true" }) })) : undefined, compact: true }) }));
 }
-function DeferredPlanningPanelFallback() {
-    return (_jsxs("div", { className: panelStyles.deferredPanelFallback, "aria-hidden": "true", children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {})] }));
+function CollapsedPane({ label, onExpand, muted = false, }) {
+    return (_jsx("div", { className: `${panelStyles.paneShell} ${panelStyles.collapsedPaneShell} ${muted ? panelStyles.collapsedPaneMuted : ''}`.trim(), "data-relationship-state": muted ? 'missing' : undefined, children: _jsxs("div", { className: panelStyles.collapsedPaneHeader, children: [_jsx("button", { type: "button", className: "tf-control-icon", onClick: onExpand, title: `Expand ${label}`, "aria-label": `Expand ${label} pane`, children: _jsx(ChevronRight, { size: 16, "aria-hidden": "true" }) }), _jsx("span", { className: panelStyles.collapsedPaneLabel, children: label })] }) }));
 }
-function PlanningDrawerList({ initiatives, standaloneWorkstreams, allStandaloneWorkstreams = standaloneWorkstreams, activeInitiativeId, activeWorkstreamId, expandedInitiativeIds, detail, secondaryPane, onCreateInitiative, onCreateWorkstream, onToggleInitiative, onSelectInitiative, onSelectWorkstream, onOpenInitiativeDetails, onOpenWorkstreamDetails, }) {
-    const [showArchivedTrayWorkstreams, setShowArchivedTrayWorkstreams] = React.useState(false);
-    const getInitiativeTreeWorkstreams = React.useCallback((initiative) => {
-        if (!showArchivedTrayWorkstreams)
-            return initiative.workstreams;
-        const visibleIds = new Set(initiative.workstreams.map((workstream) => workstream.id));
-        const archivedWorkstreams = (initiative.allWorkstreams || [])
-            .filter((workstream) => Boolean(workstream.isArchived) && !visibleIds.has(workstream.id));
-        return [...initiative.workstreams, ...archivedWorkstreams];
-    }, [showArchivedTrayWorkstreams]);
-    const standaloneTreeWorkstreams = React.useMemo(() => {
-        if (!showArchivedTrayWorkstreams)
-            return standaloneWorkstreams;
-        const visibleIds = new Set(standaloneWorkstreams.map((workstream) => workstream.id));
-        const archivedWorkstreams = allStandaloneWorkstreams
-            .filter((workstream) => Boolean(workstream.isArchived) && !visibleIds.has(workstream.id));
-        return [...standaloneWorkstreams, ...archivedWorkstreams];
-    }, [allStandaloneWorkstreams, showArchivedTrayWorkstreams, standaloneWorkstreams]);
-    const archivedTrayWorkstreamCount = React.useMemo(() => {
-        const initiativeArchivedCount = initiatives.reduce((count, initiative) => (count + (initiative.allWorkstreams || []).filter((workstream) => Boolean(workstream.isArchived)).length), 0);
-        const standaloneArchivedCount = allStandaloneWorkstreams
-            .filter((workstream) => Boolean(workstream.isArchived)).length;
-        return initiativeArchivedCount + standaloneArchivedCount;
-    }, [allStandaloneWorkstreams, initiatives]);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: panelStyles.sectionGroup, children: [_jsxs("div", { className: panelStyles.sectionHeaderRow, children: [_jsx("div", { className: panelStyles.sectionTitle, children: "Initiatives" }), _jsxs("div", { className: panelStyles.headerActionGroup, children: [archivedTrayWorkstreamCount > 0 ? (_jsx("button", { type: "button", className: `tf-control-icon ${showArchivedTrayWorkstreams ? panelStyles.toggleActive : ''}`.trim(), title: showArchivedTrayWorkstreams ? 'Hide archived workstreams in tray' : 'Show archived workstreams in tray', "aria-label": showArchivedTrayWorkstreams ? 'Hide archived workstreams in tray' : 'Show archived workstreams in tray', "aria-pressed": showArchivedTrayWorkstreams, onClick: () => setShowArchivedTrayWorkstreams((current) => !current), children: showArchivedTrayWorkstreams ? _jsx(EyeOff, { size: 15 }) : _jsx(Eye, { size: 15 }) })) : null, _jsx("button", { type: "button", className: "tf-control-icon", title: "Create initiative", "aria-label": "Create initiative", onClick: onCreateInitiative, children: _jsx(Plus, { size: 15 }) })] })] }), _jsx("div", { className: panelStyles.treeList, children: initiatives.length === 0 ? (_jsxs("div", { className: panelStyles.emptyPanel, children: [_jsx("div", { className: panelStyles.emptyPanelTitle, children: "No initiatives yet" }), _jsxs("div", { className: panelStyles.emptyPanelText, children: ["Initiatives give larger efforts a clear home without crowding the task board. Use the ", _jsx("code", { children: "+" }), " action above to create the first one."] })] })) : initiatives.map((initiative) => {
-                            const expanded = expandedInitiativeIds.has(initiative.id);
-                            const treeWorkstreams = getInitiativeTreeWorkstreams(initiative);
-                            const activeWorkstreamCount = initiative.workstreamCount || 0;
-                            const archivedWorkstreamCount = treeWorkstreams.filter((workstream) => Boolean(workstream.isArchived)).length;
-                            const workstreamMeta = showArchivedTrayWorkstreams && archivedWorkstreamCount > 0
-                                ? `${activeWorkstreamCount} workstreams + ${archivedWorkstreamCount} archived`
-                                : `${activeWorkstreamCount} workstreams`;
-                            const meta = `${workstreamMeta} • ${initiative.taskCount} tasks${initiative.isArchived ? ' • archived' : ''}`;
-                            return (_jsxs("div", { children: [_jsx(PlanningRow, { rowId: initiative.id, rowType: "initiative", referenceLabel: formatInitiativeReference(initiative), title: initiative.title, meta: meta, active: activeInitiativeId === initiative.id && !activeWorkstreamId, detailOpen: detail?.type === 'initiative' && detail.item.id === initiative.id, canExpand: treeWorkstreams.length > 0, expanded: expanded, onToggleExpand: () => onToggleInitiative(initiative.id), onToggleScope: () => onSelectInitiative(initiative.id), onToggleDetails: () => {
-                                            if (detail?.type === 'initiative' && detail.item.id === initiative.id) {
-                                                onOpenInitiativeDetails('');
-                                                return;
-                                            }
-                                            onOpenInitiativeDetails(initiative.id);
-                                        } }), expanded && treeWorkstreams.length > 0 && (_jsx("div", { className: panelStyles.treeChildren, children: treeWorkstreams.map((workstream) => (_jsx(PlanningRow, { rowId: workstream.id, rowType: "workstream", referenceLabel: formatWorkstreamReference(workstream), title: workstream.title, meta: `${workstream.taskCount} tasks • ${workstream.progressPercent}% complete${workstream.isArchived ? ' • archived' : ''}`, active: activeWorkstreamId === workstream.id, detailOpen: (detail?.type === 'workstream' && detail.item.id === workstream.id)
-                                                || (secondaryPane?.kind === 'detail' && secondaryPane.detail.item.id === workstream.id), onToggleScope: () => onSelectWorkstream(workstream.id, initiative.id), onToggleDetails: () => {
-                                                if (secondaryPane?.kind === 'detail' && secondaryPane.detail.item.id === workstream.id) {
-                                                    onOpenWorkstreamDetails('');
-                                                    return;
-                                                }
-                                                if (detail?.type === 'workstream' && detail.item.id === workstream.id) {
-                                                    onOpenWorkstreamDetails('');
-                                                    return;
-                                                }
-                                                onOpenWorkstreamDetails(workstream.id);
-                                            } }, workstream.id))) }))] }, initiative.id));
-                        }) })] }), _jsxs("div", { className: panelStyles.sectionGroup, children: [_jsxs("div", { className: panelStyles.sectionHeaderRow, children: [_jsx("div", { className: panelStyles.sectionTitle, children: "Workstreams" }), _jsx("button", { type: "button", className: "tf-control-icon", title: "Create workstream", "aria-label": "Create workstream", onClick: onCreateWorkstream, children: _jsx(Plus, { size: 15 }) })] }), _jsx("div", { className: panelStyles.treeList, children: standaloneTreeWorkstreams.length === 0 ? (_jsxs("div", { className: panelStyles.emptyPanel, children: [_jsx("div", { className: panelStyles.emptyPanelTitle, children: "No standalone workstreams yet" }), _jsxs("div", { className: panelStyles.emptyPanelText, children: ["Smaller projects can still use workstreams without needing initiative-level structure. Use the ", _jsx("code", { children: "+" }), " action above to add one."] })] })) : standaloneTreeWorkstreams.map((workstream) => (_jsx(PlanningRow, { rowId: workstream.id, rowType: "workstream", referenceLabel: formatWorkstreamReference(workstream), title: workstream.title, meta: `${workstream.taskCount} tasks • ${workstream.progressPercent}% complete${workstream.isArchived ? ' • archived' : ''}`, active: activeWorkstreamId === workstream.id, detailOpen: (detail?.type === 'workstream' && detail.item.id === workstream.id)
-                                || (secondaryPane?.kind === 'detail' && secondaryPane.detail.item.id === workstream.id), onToggleScope: () => onSelectWorkstream(workstream.id, null), onToggleDetails: () => {
-                                if (detail?.type === 'workstream' && detail.item.id === workstream.id) {
-                                    onOpenWorkstreamDetails('');
-                                    return;
-                                }
-                                onOpenWorkstreamDetails(workstream.id);
-                            } }, workstream.id))) })] })] }));
+function RelationshipPane({ label, title, description, onCollapse, action, paneRef, }) {
+    const isEmptyState = !description && !action;
+    return (_jsxs("div", { ref: paneRef, "data-planning-pane": `${label.toLowerCase()}-relationship`, className: `${panelStyles.paneShell} ${styles.appScrollbar} tf-scrollbar ${panelStyles.detailPane}`.trim(), style: {
+            flex: `0 0 ${PLANNING_DRAWER_DETAIL_WIDTH_PX}px`,
+            width: `${PLANNING_DRAWER_DETAIL_WIDTH_PX}px`,
+            minWidth: `${PLANNING_DRAWER_DETAIL_WIDTH_PX}px`,
+            maxWidth: `${PLANNING_DRAWER_DETAIL_WIDTH_PX}px`,
+        }, children: [_jsxs("div", { className: panelStyles.paneHeader, children: [_jsx("h2", { className: panelStyles.paneHeaderLabel, tabIndex: -1, "data-planning-pane-heading": true, children: label }), _jsx("button", { type: "button", className: "tf-control-icon", onClick: onCollapse, "aria-label": `Collapse ${label} pane`, title: `Collapse ${label} pane`, children: _jsx(ChevronLeft, { size: 16, "aria-hidden": "true" }) })] }), _jsx("div", { className: `${panelStyles.paneContent} ${isEmptyState ? panelStyles.relationshipPaneContentEmpty : ''}`.trim(), children: _jsxs("div", { className: `${panelStyles.relationshipState} ${isEmptyState ? panelStyles.relationshipStateEmpty : ''}`.trim(), "data-relationship-display": isEmptyState ? 'empty' : 'detail', children: [_jsx("span", { className: panelStyles.relationshipStateTitle, children: title }), description ? _jsx("p", { className: panelStyles.relationshipStateText, children: description }) : null, action ? (_jsx("button", { type: "button", className: "tf-button-secondary tf-button-compact", onClick: action.onClick, children: action.label })) : null] }) })] }));
+}
+function PlanningDrawerList({ initiatives, standaloneWorkstreams, planningLoadState, taskScope, showArchivedPlanning, currentOwnerId, assigneeOptions, showTaskCardStatusLabel = false, taskArrangeMode = 'execution', activeInitiativeId, activeWorkstreamId, navigatorSort, navigatorSortReady, onNavigatorSortChange, planningFavorites, onTogglePlanningFavorite, favoritesSectionCollapsed, initiativesSectionCollapsed, workstreamsSectionCollapsed, onToggleFavoritesSection, onToggleInitiativesSection, onToggleWorkstreamsSection, expandedInitiativeIds, detail, secondaryPane, onCreateInitiative, onCreateWorkstream, onToggleInitiative, onSelectInitiative, onSelectWorkstream, onOpenInitiativeDetails, onOpenWorkstreamDetails, onOpenNestedWorkstreamDetails, onOpenTaskById, onSetTaskStatus, onChangePlanningOwner, onChangeTaskAssignee, onArchivePlanningTask, onArchiveResolvedWorkstream, onArchiveResolvedInitiative, linkOptions, onAssignInitiativeToWorkstream, onRetryPlanning, }) {
+    const [searchQuery, setSearchQuery] = React.useState('');
+    const [ownerFilter, setOwnerFilter] = React.useState('all');
+    const [filtersExpanded, setFiltersExpanded] = React.useState(false);
+    const [expandedWorkstreamIds, setExpandedWorkstreamIds] = React.useState(() => new Set());
+    const [expandedFavoriteBranchKeys, setExpandedFavoriteBranchKeys] = React.useState(() => new Set());
+    const assigneeOptionByValue = React.useMemo(() => new Map(assigneeOptions
+        .filter((option) => !String(option.archivedAt || '').trim())
+        .map((option) => [String(option.value || '').trim(), option])), [assigneeOptions]);
+    const ownerFilterLeadingOptions = React.useMemo(() => {
+        const normalizedCurrentOwnerId = String(currentOwnerId || '').trim();
+        const currentOwnerOption = normalizedCurrentOwnerId
+            ? normalizePlanningOwnerOptions(assigneeOptions, normalizedCurrentOwnerId)
+                .find((option) => option.value === normalizedCurrentOwnerId)
+            : undefined;
+        return [
+            {
+                value: 'all',
+                label: 'All owners',
+                icon: 'Users',
+                color: 'var(--text-secondary)',
+                kind: 'unassigned',
+            },
+            ...(normalizedCurrentOwnerId ? [{
+                    ...currentOwnerOption,
+                    value: 'mine',
+                    label: 'Owned by me',
+                    icon: currentOwnerOption?.icon || 'User',
+                    color: currentOwnerOption?.color || 'var(--text-secondary)',
+                    kind: currentOwnerOption?.kind || 'member',
+                }] : []),
+            {
+                value: 'unassigned',
+                label: 'Unassigned',
+                icon: TASK_ASSIGNEE_UNASSIGNED_ICON,
+                color: TASK_ASSIGNEE_UNASSIGNED_COLOR,
+                kind: 'unassigned',
+            },
+        ];
+    }, [assigneeOptions, currentOwnerId]);
+    const navigatorResults = React.useMemo(() => buildPlanningNavigatorResults({
+        initiatives,
+        standaloneWorkstreams,
+        showArchivedPlanning,
+        searchQuery,
+        ownerFilter,
+        currentOwnerId: String(currentOwnerId || ''),
+        sort: navigatorSort,
+    }), [currentOwnerId, initiatives, navigatorSort, ownerFilter, searchQuery, showArchivedPlanning, standaloneWorkstreams]);
+    const planningFavoriteKeys = React.useMemo(() => new Set(planningFavorites.map(getPlanningFavoriteKey)), [planningFavorites]);
+    const visibleFavorites = React.useMemo(() => {
+        const initiativeById = new Map(initiatives
+            .filter((initiative) => matchesPlanningNavigatorItem({
+            item: initiative,
+            entityType: 'initiative',
+            showArchivedPlanning,
+            searchQuery,
+            ownerFilter,
+            currentOwnerId: String(currentOwnerId || ''),
+        }))
+            .map((initiative) => [initiative.id, initiative]));
+        const workstreamById = new Map();
+        initiatives.forEach((initiative) => {
+            (initiative.allWorkstreams || initiative.workstreams).forEach((workstream) => {
+                if (!matchesPlanningNavigatorItem({
+                    item: workstream,
+                    entityType: 'workstream',
+                    showArchivedPlanning,
+                    searchQuery,
+                    ownerFilter,
+                    currentOwnerId: String(currentOwnerId || ''),
+                }))
+                    return;
+                workstreamById.set(workstream.id, {
+                    item: workstream,
+                    parentInitiativeId: initiative.id,
+                });
+            });
+        });
+        standaloneWorkstreams.forEach((workstream) => {
+            if (!matchesPlanningNavigatorItem({
+                item: workstream,
+                entityType: 'workstream',
+                showArchivedPlanning,
+                searchQuery,
+                ownerFilter,
+                currentOwnerId: String(currentOwnerId || ''),
+            }))
+                return;
+            workstreamById.set(workstream.id, {
+                item: workstream,
+                parentInitiativeId: null,
+            });
+        });
+        return planningFavorites.reduce((favorites, favorite) => {
+            if (favorite.type === 'initiative') {
+                const item = initiativeById.get(favorite.id);
+                if (item)
+                    favorites.push({ favorite, item, parentInitiativeId: null });
+                return favorites;
+            }
+            const match = workstreamById.get(favorite.id);
+            if (match)
+                favorites.push({ favorite, ...match });
+            return favorites;
+        }, []);
+    }, [
+        currentOwnerId,
+        initiatives,
+        ownerFilter,
+        planningFavorites,
+        searchQuery,
+        showArchivedPlanning,
+        standaloneWorkstreams,
+    ]);
+    if (taskScope === 'deleted') {
+        return (_jsxs("div", { className: panelStyles.scopeSummary, role: "status", children: [_jsx("strong", { children: "Planning is not shown in Trash" }), _jsx("span", { children: "Switch the task scope away from Trash to manage initiatives and workstreams." })] }));
+    }
+    if (planningLoadState.status === 'loading') {
+        return _jsx(PlanningLoadingState, {});
+    }
+    if (planningLoadState.status === 'error') {
+        return (_jsx(PlanningFailureState, { title: "Planning unavailable", message: planningLoadState.error || 'Planning could not be loaded.', retrying: planningLoadState.isRefreshing, onRetry: onRetryPlanning }));
+    }
+    const archivedInitiativeCount = initiatives.filter((initiative) => Boolean(initiative.isArchived)).length;
+    const archivedStandaloneWorkstreamCount = standaloneWorkstreams
+        .filter((workstream) => Boolean(workstream.isArchived)).length;
+    const hasPlanningEntities = initiatives.length > 0 || standaloneWorkstreams.length > 0;
+    const hasAdjustedNavigator = navigatorResults.hasCriteria || navigatorSort !== 'default';
+    const clearNavigator = () => {
+        setSearchQuery('');
+        setOwnerFilter('all');
+        if (navigatorSortReady)
+            onNavigatorSortChange('default');
+    };
+    const toggleWorkstreamTasks = (workstreamId) => {
+        setExpandedWorkstreamIds((current) => {
+            const next = new Set(current);
+            if (next.has(workstreamId))
+                next.delete(workstreamId);
+            else
+                next.add(workstreamId);
+            return next;
+        });
+    };
+    const toggleFavoriteBranch = (branchKey) => {
+        setExpandedFavoriteBranchKeys((current) => {
+            const next = new Set(current);
+            if (next.has(branchKey))
+                next.delete(branchKey);
+            else
+                next.add(branchKey);
+            return next;
+        });
+    };
+    const renderWorkstreamTasks = (workstream, expanded = expandedWorkstreamIds.has(workstream.id), controlsId = `planning-tasks-${workstream.id}`, ariaLabel = `Tasks in ${workstream.title}`) => {
+        if (!expanded)
+            return null;
+        const allTasks = workstream.tasks || [];
+        const visibleTasks = arrangePlanningTasks(showArchivedPlanning
+            ? allTasks
+            : allTasks.filter((task) => !task.isArchived), taskArrangeMode);
+        return (_jsx("ul", { id: controlsId, className: `${panelStyles.treeChildren} ${panelStyles.treeTaskChildren}`.trim(), "aria-label": ariaLabel, children: visibleTasks.length > 0 ? visibleTasks.map((task) => (_jsx("li", { children: _jsx(PlanningTreeTaskCard, { task: task, assigneeOption: task.assignee ? assigneeOptionByValue.get(task.assignee) : undefined, assigneeOptions: assigneeOptions, showTaskCardStatusLabel: showTaskCardStatusLabel, onOpenTaskById: onOpenTaskById, onSetTaskStatus: onSetTaskStatus, onChangeTaskAssignee: onChangeTaskAssignee, onArchivePlanningTask: onArchivePlanningTask }) }, task.id))) : (_jsx("li", { className: panelStyles.passiveGuidance, children: "Archived tasks are hidden." })) }));
+    };
+    const initiativeEmptyTitle = navigatorResults.hasCriteria
+        ? 'No matching initiatives'
+        : archivedInitiativeCount > 0 ? 'No active initiatives' : 'No initiatives yet';
+    const initiativeEmptyText = navigatorResults.hasCriteria
+        ? 'No initiatives match the current planning search and owner filter.'
+        : archivedInitiativeCount > 0
+            ? `${archivedInitiativeCount} archived ${archivedInitiativeCount === 1 ? 'initiative is' : 'initiatives are'} hidden. Use the archive visibility control above to view ${archivedInitiativeCount === 1 ? 'it' : 'them'}.`
+            : _jsxs(_Fragment, { children: ["Initiatives give larger efforts a clear home without crowding the task board. Use the ", _jsx("code", { children: "+" }), " action above to create the first one."] });
+    const workstreamEmptyTitle = navigatorResults.hasCriteria
+        ? 'No matching standalone workstreams'
+        : archivedStandaloneWorkstreamCount > 0 ? 'No active standalone workstreams' : 'No standalone workstreams yet';
+    const workstreamEmptyText = navigatorResults.hasCriteria
+        ? 'No standalone workstreams match the current planning search and owner filter.'
+        : archivedStandaloneWorkstreamCount > 0
+            ? `${archivedStandaloneWorkstreamCount} archived standalone ${archivedStandaloneWorkstreamCount === 1 ? 'workstream is' : 'workstreams are'} hidden. Use the archive visibility control above to view ${archivedStandaloneWorkstreamCount === 1 ? 'it' : 'them'}.`
+            : _jsxs(_Fragment, { children: ["Smaller projects can still use workstreams without needing initiative-level structure. Use the ", _jsx("code", { children: "+" }), " action above to add one."] });
+    return (_jsxs(_Fragment, { children: [planningLoadState.status === 'partial'
+                && planningLoadState.collections.initiatives === 'ready'
+                && planningLoadState.collections.workstreams === 'ready' ? (_jsx(PlanningFailureState, { compact: true, title: "Planning may be incomplete", message: planningLoadState.error || 'The latest planning refresh did not finish. Existing data is still shown.', retrying: planningLoadState.isRefreshing, onRetry: onRetryPlanning })) : null, hasPlanningEntities ? (_jsxs("div", { className: panelStyles.navigatorControls, children: [_jsxs("div", { className: panelStyles.navigatorSearchRow, children: [_jsxs("div", { className: panelStyles.navigatorSearch, children: [_jsx(Search, { size: 14, "aria-hidden": "true" }), _jsx("span", { className: panelStyles.visuallyHidden, children: "Search planning" }), _jsx("input", { type: "search", value: searchQuery, onChange: (event) => setSearchQuery(event.target.value), placeholder: "Search initiatives and workstreams", "aria-label": "Search planning" }), searchQuery ? (_jsx("button", { type: "button", className: panelStyles.navigatorClearSearch, onClick: () => setSearchQuery(''), "aria-label": "Clear planning search", title: "Clear search", children: _jsx(X, { size: 13, "aria-hidden": "true" }) })) : null] }), _jsx("button", { type: "button", className: `tf-control-icon ${filtersExpanded || ownerFilter !== 'all' || navigatorSort !== 'default' ? panelStyles.toggleActive : ''}`.trim(), "aria-label": "Filter and sort planning", title: "Filter and sort planning", "aria-expanded": filtersExpanded, "aria-controls": "planning-navigator-options", onClick: () => setFiltersExpanded((current) => !current), children: _jsx(Filter, { size: 15, "aria-hidden": "true" }) })] }), filtersExpanded ? (_jsxs("div", { id: "planning-navigator-options", className: panelStyles.navigatorOptions, children: [_jsxs("div", { className: panelStyles.navigatorOptionField, children: [_jsx("span", { className: panelStyles.navigatorOptionLabel, children: "Owner" }), _jsx(PlanningOwnerDropdown, { value: ownerFilter, options: assigneeOptions, leadingOptions: ownerFilterLeadingOptions, includeUnassigned: false, onChange: setOwnerFilter, disabled: false, ariaLabel: "Filter planning by owner", className: panelStyles.navigatorDropdown })] }), _jsxs("div", { className: panelStyles.navigatorOptionField, children: [_jsx("span", { className: panelStyles.navigatorOptionLabel, children: "Sort" }), _jsx(TaxonomyDropdown, { value: navigatorSort, options: PLANNING_NAVIGATOR_SORT_OPTIONS, onChange: (value) => onNavigatorSortChange(String(value)), disabled: !navigatorSortReady, ariaLabel: "Sort planning", className: panelStyles.navigatorDropdown, portalPanel: true, panelAlign: "start", triggerContent: (_jsxs("span", { className: panelStyles.navigatorDropdownTrigger, children: [_jsx(ArrowUpDown, { size: 14, "aria-hidden": "true" }), _jsx("span", { children: PLANNING_NAVIGATOR_SORT_OPTIONS.find((option) => option.value === navigatorSort)?.label })] })), renderOptionContent: (option) => option.label })] }), _jsx("button", { type: "button", className: "tf-control-icon", onClick: clearNavigator, disabled: !hasAdjustedNavigator, "aria-label": "Reset planning filters and sort", title: "Reset planning filters and sort", children: _jsx(RotateCcw, { size: 14, "aria-hidden": "true" }) })] })) : null, _jsxs("span", { className: panelStyles.visuallyHidden, role: "status", "aria-live": "polite", children: [navigatorResults.resultCount, " planning ", navigatorResults.resultCount === 1 ? 'result' : 'results'] })] })) : null, navigatorResults.hasCriteria && navigatorResults.resultCount === 0 ? (_jsxs("div", { className: panelStyles.navigatorEmpty, role: "status", children: [_jsx("strong", { children: "No planning matches" }), _jsx("span", { children: "Try another title or reference, or clear the owner filter." }), _jsx("button", { type: "button", onClick: clearNavigator, children: "Clear search and filters" })] })) : (_jsxs(_Fragment, { children: [visibleFavorites.length > 0 ? (_jsxs("div", { className: panelStyles.sectionGroup, children: [_jsx(DisclosureSectionHeader, { label: "Favorites", count: visibleFavorites.length, expanded: !favoritesSectionCollapsed, expandedTitle: "Collapse favorites", collapsedTitle: "Expand favorites", onToggle: onToggleFavoritesSection, controlsId: "planning-favorites-section" }), _jsx("ul", { id: "planning-favorites-section", className: panelStyles.treeList, "aria-label": "Favorite planning items", hidden: favoritesSectionCollapsed, children: visibleFavorites.map(({ favorite, item, parentInitiativeId }) => {
+                                    const detailOpen = favorite.type === 'initiative'
+                                        ? detail?.type === 'initiative' && detail.item.id === item.id
+                                        : (detail?.type === 'workstream' && detail.item.id === item.id)
+                                            || (secondaryPane?.kind === 'detail' && secondaryPane.detail.item.id === item.id);
+                                    const favoriteInitiative = favorite.type === 'initiative'
+                                        ? item
+                                        : null;
+                                    const favoriteWorkstream = favorite.type === 'workstream'
+                                        ? item
+                                        : null;
+                                    const initiativeWorkstreams = favoriteInitiative
+                                        ? favoriteInitiative.allWorkstreams || favoriteInitiative.workstreams
+                                        : [];
+                                    const visibleInitiativeWorkstreams = initiativeWorkstreams.filter((workstream) => (showArchivedPlanning || !workstream.isArchived));
+                                    const favoriteBranchKey = `favorite:${favorite.type}:${item.id}`;
+                                    const favoriteExpanded = expandedFavoriteBranchKeys.has(favoriteBranchKey);
+                                    const favoriteControlsId = `planning-${favoriteBranchKey.replaceAll(':', '-')}-children`;
+                                    return (_jsxs("li", { children: [_jsx(PlanningRow, { rowId: `favorite:${favorite.type}:${item.id}`, rowType: favorite.type, referenceLabel: favorite.type === 'initiative'
+                                                    ? formatInitiativeReference(item)
+                                                    : formatWorkstreamReference(item), item: item, ownerOption: item.ownerId ? assigneeOptionByValue.get(item.ownerId) : undefined, ownerOptions: assigneeOptions, onChangeOwner: (ownerId) => onChangePlanningOwner(favorite.type, item.id, ownerId === 'unassigned' ? '' : ownerId), workstreamCount: favoriteInitiative
+                                                    ? visibleInitiativeWorkstreams.length
+                                                    : undefined, active: favorite.type === 'initiative'
+                                                    ? activeInitiativeId === item.id && !activeWorkstreamId
+                                                    : activeWorkstreamId === item.id, isArchived: Boolean(item.isArchived), detailOpen: detailOpen, canExpand: favorite.type === 'initiative'
+                                                    ? initiativeWorkstreams.length > 0
+                                                    : Boolean(favoriteWorkstream?.tasks?.length), expanded: favoriteExpanded, controlsId: favoriteControlsId, onToggleExpand: () => toggleFavoriteBranch(favoriteBranchKey), onToggleScope: () => {
+                                                    if (favorite.type === 'initiative') {
+                                                        onSelectInitiative(item.id);
+                                                    }
+                                                    else {
+                                                        onSelectWorkstream(item.id, parentInitiativeId);
+                                                    }
+                                                }, favoriteReady: navigatorSortReady, onOpenDetails: () => {
+                                                    if (favorite.type === 'initiative') {
+                                                        onOpenInitiativeDetails(item.id);
+                                                    }
+                                                    else if (parentInitiativeId) {
+                                                        onOpenInitiativeDetails(parentInitiativeId);
+                                                        onOpenNestedWorkstreamDetails(item.id);
+                                                    }
+                                                    else {
+                                                        onOpenWorkstreamDetails(item.id);
+                                                    }
+                                                }, favorite: true, onToggleFavorite: () => onTogglePlanningFavorite(favorite), onArchiveReady: favorite.type === 'initiative'
+                                                    ? onArchiveResolvedInitiative
+                                                        ? () => onArchiveResolvedInitiative(item.id)
+                                                        : undefined
+                                                    : onArchiveResolvedWorkstream
+                                                        ? () => onArchiveResolvedWorkstream(item.id)
+                                                        : undefined, hierarchyInteractions: false, initiativeLinkOptions: favorite.type === 'workstream' && !parentInitiativeId
+                                                    ? linkOptions.initiatives
+                                                    : undefined, onLinkInitiative: favorite.type === 'workstream' && !parentInitiativeId
+                                                    ? (option) => onAssignInitiativeToWorkstream(item.id, option.referenceLabel)
+                                                    : undefined }), favoriteInitiative && favoriteExpanded ? (_jsx("ul", { id: favoriteControlsId, className: panelStyles.treeChildren, "aria-label": `Workstreams in favorite ${favoriteInitiative.title}`, children: visibleInitiativeWorkstreams.length > 0
+                                                    ? visibleInitiativeWorkstreams.map((workstream) => {
+                                                        const childBranchKey = `${favoriteBranchKey}:workstream:${workstream.id}`;
+                                                        const childExpanded = expandedFavoriteBranchKeys.has(childBranchKey);
+                                                        const childControlsId = `planning-${childBranchKey.replaceAll(':', '-')}-children`;
+                                                        return (_jsxs("li", { children: [_jsx(PlanningRow, { rowId: childBranchKey, rowType: "workstream", referenceLabel: formatWorkstreamReference(workstream), item: workstream, ownerOption: workstream.ownerId
+                                                                        ? assigneeOptionByValue.get(workstream.ownerId)
+                                                                        : undefined, ownerOptions: assigneeOptions, onChangeOwner: (ownerId) => onChangePlanningOwner('workstream', workstream.id, ownerId === 'unassigned' ? '' : ownerId), active: activeWorkstreamId === workstream.id, isArchived: Boolean(workstream.isArchived), detailOpen: (detail?.type === 'workstream' && detail.item.id === workstream.id)
+                                                                        || (secondaryPane?.kind === 'detail'
+                                                                            && secondaryPane.detail.item.id === workstream.id), canExpand: Boolean(workstream.tasks?.length), expanded: childExpanded, controlsId: childControlsId, onToggleExpand: () => toggleFavoriteBranch(childBranchKey), onToggleScope: () => onSelectWorkstream(workstream.id, favoriteInitiative.id), onOpenDetails: () => {
+                                                                        onOpenInitiativeDetails(favoriteInitiative.id);
+                                                                        onOpenNestedWorkstreamDetails(workstream.id);
+                                                                    }, favorite: planningFavoriteKeys.has(getPlanningFavoriteKey({
+                                                                        type: 'workstream',
+                                                                        id: workstream.id,
+                                                                    })), favoriteReady: navigatorSortReady, onToggleFavorite: () => onTogglePlanningFavorite({
+                                                                        type: 'workstream',
+                                                                        id: workstream.id,
+                                                                    }), onArchiveReady: onArchiveResolvedWorkstream
+                                                                        ? () => onArchiveResolvedWorkstream(workstream.id)
+                                                                        : undefined, hierarchyInteractions: false }), renderWorkstreamTasks(workstream, childExpanded, childControlsId, `Tasks in favorite ${favoriteInitiative.title} / ${workstream.title}`)] }, workstream.id));
+                                                    })
+                                                    : (_jsx("li", { className: panelStyles.passiveGuidance, children: "Archived workstreams are hidden." })) })) : null, favoriteWorkstream
+                                                ? renderWorkstreamTasks(favoriteWorkstream, favoriteExpanded, favoriteControlsId, `Tasks in favorite ${favoriteWorkstream.title}`)
+                                                : null] }, getPlanningFavoriteKey(favorite)));
+                                }) })] })) : null, _jsxs("div", { className: panelStyles.sectionGroup, children: [_jsx(DisclosureSectionHeader, { label: "Initiatives", count: navigatorResults.initiatives.length, showZeroCount: true, actions: (planningLoadState.collections.initiatives === 'ready' ? (_jsx("button", { type: "button", className: "tf-control-icon", title: "Create initiative", "aria-label": "Create initiative", onClick: onCreateInitiative, children: _jsx(Plus, { size: 15 }) })) : null), expanded: !initiativesSectionCollapsed, expandedTitle: "Collapse initiatives", collapsedTitle: "Expand initiatives", onToggle: onToggleInitiativesSection, controlsId: !initiativesSectionCollapsed ? 'planning-initiatives-section' : undefined }), !initiativesSectionCollapsed ? (_jsx("ul", { id: "planning-initiatives-section", className: panelStyles.treeList, "aria-label": "Initiatives", children: planningLoadState.collections.initiatives === 'error' ? (_jsx("li", { children: _jsx(PlanningFailureState, { compact: true, title: "Initiatives unavailable", message: "Initiatives could not be loaded.", retrying: planningLoadState.isRefreshing, onRetry: onRetryPlanning }) })) : navigatorResults.initiatives.length === 0 ? (_jsxs("li", { className: panelStyles.emptyPanel, children: [_jsx("div", { className: panelStyles.emptyPanelTitle, children: initiativeEmptyTitle }), _jsx("div", { className: panelStyles.emptyPanelText, children: initiativeEmptyText })] })) : navigatorResults.initiatives.map(({ initiative, workstreams: resultWorkstreams }) => {
+                                    const allWorkstreams = initiative.allWorkstreams || initiative.workstreams;
+                                    const treeWorkstreams = showArchivedPlanning
+                                        ? allWorkstreams
+                                        : allWorkstreams.filter((workstream) => !workstream.isArchived);
+                                    const displayedWorkstreams = resultWorkstreams;
+                                    const expanded = navigatorResults.hasCriteria
+                                        ? displayedWorkstreams.length > 0
+                                        : expandedInitiativeIds.has(initiative.id);
+                                    return (_jsxs("li", { children: [_jsx(PlanningRow, { rowId: initiative.id, rowType: "initiative", referenceLabel: formatInitiativeReference(initiative), item: initiative, ownerOption: initiative.ownerId ? assigneeOptionByValue.get(initiative.ownerId) : undefined, ownerOptions: assigneeOptions, onChangeOwner: (ownerId) => onChangePlanningOwner('initiative', initiative.id, ownerId === 'unassigned' ? '' : ownerId), workstreamCount: treeWorkstreams.length, active: activeInitiativeId === initiative.id && !activeWorkstreamId, isArchived: Boolean(initiative.isArchived), detailOpen: detail?.type === 'initiative' && detail.item.id === initiative.id, canExpand: allWorkstreams.length > 0, expanded: expanded, controlsId: `planning-children-${initiative.id}`, onToggleExpand: () => onToggleInitiative(initiative.id), onToggleScope: () => onSelectInitiative(initiative.id), onOpenDetails: () => onOpenInitiativeDetails(initiative.id), favorite: planningFavoriteKeys.has(getPlanningFavoriteKey({ type: 'initiative', id: initiative.id })), favoriteReady: navigatorSortReady, onToggleFavorite: () => onTogglePlanningFavorite({ type: 'initiative', id: initiative.id }), onArchiveReady: onArchiveResolvedInitiative
+                                                    ? () => onArchiveResolvedInitiative(initiative.id)
+                                                    : undefined }), expanded && displayedWorkstreams.length > 0 && (_jsx("ul", { id: `planning-children-${initiative.id}`, className: panelStyles.treeChildren, "aria-label": `Workstreams in ${initiative.title}`, children: displayedWorkstreams.map((workstream) => (_jsxs("li", { children: [_jsx(PlanningRow, { rowId: workstream.id, rowType: "workstream", referenceLabel: formatWorkstreamReference(workstream), item: workstream, ownerOption: workstream.ownerId ? assigneeOptionByValue.get(workstream.ownerId) : undefined, ownerOptions: assigneeOptions, onChangeOwner: (ownerId) => onChangePlanningOwner('workstream', workstream.id, ownerId === 'unassigned' ? '' : ownerId), active: activeWorkstreamId === workstream.id, isArchived: Boolean(workstream.isArchived), detailOpen: (detail?.type === 'workstream' && detail.item.id === workstream.id)
+                                                                || (secondaryPane?.kind === 'detail' && secondaryPane.detail.item.id === workstream.id), canExpand: (workstream.tasks || []).length > 0, expanded: expandedWorkstreamIds.has(workstream.id), controlsId: `planning-tasks-${workstream.id}`, onToggleExpand: () => toggleWorkstreamTasks(workstream.id), onToggleScope: () => onSelectWorkstream(workstream.id, initiative.id), onOpenDetails: () => {
+                                                                onOpenInitiativeDetails(initiative.id);
+                                                                onOpenNestedWorkstreamDetails(workstream.id);
+                                                            }, favorite: planningFavoriteKeys.has(getPlanningFavoriteKey({ type: 'workstream', id: workstream.id })), favoriteReady: navigatorSortReady, onToggleFavorite: () => onTogglePlanningFavorite({ type: 'workstream', id: workstream.id }), onArchiveReady: onArchiveResolvedWorkstream
+                                                                ? () => onArchiveResolvedWorkstream(workstream.id)
+                                                                : undefined }), renderWorkstreamTasks(workstream)] }, workstream.id))) }))] }, initiative.id));
+                                }) })) : null] }), _jsxs("div", { className: panelStyles.sectionGroup, children: [_jsx(DisclosureSectionHeader, { label: "Workstreams", count: navigatorResults.standaloneWorkstreams.length, showZeroCount: true, actions: (planningLoadState.collections.workstreams === 'ready' ? (_jsx("button", { type: "button", className: "tf-control-icon", title: "Create workstream", "aria-label": "Create workstream", onClick: onCreateWorkstream, children: _jsx(Plus, { size: 15 }) })) : null), expanded: !workstreamsSectionCollapsed, expandedTitle: "Collapse workstreams", collapsedTitle: "Expand workstreams", onToggle: onToggleWorkstreamsSection, controlsId: !workstreamsSectionCollapsed ? 'planning-workstreams-section' : undefined }), !workstreamsSectionCollapsed ? (_jsx("ul", { id: "planning-workstreams-section", className: panelStyles.treeList, "aria-label": "Standalone workstreams", children: planningLoadState.collections.workstreams === 'error' ? (_jsx("li", { children: _jsx(PlanningFailureState, { compact: true, title: "Workstreams unavailable", message: "Workstreams could not be loaded.", retrying: planningLoadState.isRefreshing, onRetry: onRetryPlanning }) })) : navigatorResults.standaloneWorkstreams.length === 0 ? (_jsxs("li", { className: panelStyles.emptyPanel, children: [_jsx("div", { className: panelStyles.emptyPanelTitle, children: workstreamEmptyTitle }), _jsx("div", { className: panelStyles.emptyPanelText, children: workstreamEmptyText })] })) : navigatorResults.standaloneWorkstreams.map((workstream) => (_jsxs("li", { children: [_jsx(PlanningRow, { rowId: workstream.id, rowType: "workstream", referenceLabel: formatWorkstreamReference(workstream), item: workstream, ownerOption: workstream.ownerId ? assigneeOptionByValue.get(workstream.ownerId) : undefined, ownerOptions: assigneeOptions, onChangeOwner: (ownerId) => onChangePlanningOwner('workstream', workstream.id, ownerId === 'unassigned' ? '' : ownerId), active: activeWorkstreamId === workstream.id, isArchived: Boolean(workstream.isArchived), detailOpen: (detail?.type === 'workstream' && detail.item.id === workstream.id)
+                                                || (secondaryPane?.kind === 'detail' && secondaryPane.detail.item.id === workstream.id), canExpand: (workstream.tasks || []).length > 0, expanded: expandedWorkstreamIds.has(workstream.id), controlsId: `planning-tasks-${workstream.id}`, onToggleExpand: () => toggleWorkstreamTasks(workstream.id), onToggleScope: () => onSelectWorkstream(workstream.id, null), onOpenDetails: () => onOpenWorkstreamDetails(workstream.id), favorite: planningFavoriteKeys.has(getPlanningFavoriteKey({ type: 'workstream', id: workstream.id })), favoriteReady: navigatorSortReady, onToggleFavorite: () => onTogglePlanningFavorite({ type: 'workstream', id: workstream.id }), onArchiveReady: onArchiveResolvedWorkstream
+                                                ? () => onArchiveResolvedWorkstream(workstream.id)
+                                                : undefined, initiativeLinkOptions: linkOptions.initiatives, onLinkInitiative: (option) => onAssignInitiativeToWorkstream(workstream.id, option.referenceLabel) }), renderWorkstreamTasks(workstream)] }, workstream.id))) })) : null] })] }))] }));
 }
-function PlanningDrawerDetailView({ detail, currentWorkspaceId, onOpenNestedWorkstreamDetails, onEdit, onArchive, onUnarchive, onCreateTaskInWorkstream, onCreateWorkstreamInInitiative, onOpenTaskById, onRemoveTaskFromWorkstream, onAssignInitiativeToWorkstream, onAttachTaskToWorkstreamByReference, onAttachWorkstreamToInitiativeByReference, onAddPlanningContextFile, onRemovePlanningContextFile, onUpdatePlanningContextCaption, parentInitiative = null, assigneeOptions, }) {
-    const [attachReference, setAttachReference] = React.useState('');
-    const [showArchivedChildren, setShowArchivedChildren] = React.useState(false);
-    const [showRecentActivity, setShowRecentActivity] = React.useState(true);
+function PlanningLoadingState() {
+    return (_jsxs("div", { className: panelStyles.loadingState, role: "status", "aria-live": "polite", children: [_jsx("span", { className: panelStyles.visuallyHidden, children: "Loading planning" }), [0, 1, 2].map((index) => (_jsxs("div", { className: panelStyles.loadingRow, "aria-hidden": "true", children: [_jsx("span", { className: panelStyles.loadingBadge }), _jsx("span", { className: panelStyles.loadingTitle }), _jsx("span", { className: panelStyles.loadingMeta })] }, index)))] }));
+}
+function PlanningFailureState({ title, message, retrying, onRetry, compact = false, }) {
+    return (_jsxs("div", { className: `${panelStyles.failureState} ${compact ? panelStyles.failureStateCompact : ''} tf-surface-inset`.trim(), role: "alert", children: [_jsxs("div", { className: panelStyles.failureCopy, children: [_jsx("strong", { children: title }), _jsx("span", { children: message })] }), _jsx("button", { type: "button", className: "tf-button-ghost tf-button-compact", disabled: retrying, onClick: onRetry, children: retrying ? 'Retrying…' : 'Retry' })] }));
+}
+function PlanningDrawerDetailView({ detail, showArchivedChildren, inlineEditor, selectedChildWorkstreamId, currentWorkspaceId, currentActorId, theme, onOpenNestedWorkstreamDetails, onArchivePlanningTask, onArchiveResolvedWorkstream, onArchiveResolvedEntity, onEdit, onChangeOwner, onChangePlanningOwner, onArchive, onUnarchive, onCreateTaskInWorkstream, onCreateWorkstreamInInitiative, onOpenTaskById, onChangeTaskAssignee, taskReferences, onAssignTaskToWorkstream, onAssignInitiativeToWorkstream, onAttachTaskToWorkstreamByReference, onAttachWorkstreamToInitiativeByReference, onAddPlanningContextFile, onRemovePlanningContextFile, onUpdatePlanningContextCaption, parentInitiative = null, assigneeOptions, linkOptions, showTaskCardStatusLabel = false, taskArrangeMode = 'execution', onTaskArrangeModeChange = () => { }, onReorderWorkstreamTasks, onSetTaskStatus, hydrationState, onRetryHydration, }) {
+    const inlineEditorFormId = React.useId();
+    const [isAttachingReference, setIsAttachingReference] = React.useState(false);
+    const [showParentLinkPicker, setShowParentLinkPicker] = React.useState(false);
+    const [pendingUnlink, setPendingUnlink] = React.useState(null);
+    const [relationshipRecovery, setRelationshipRecovery] = React.useState(null);
+    const [isChangingRelationship, setIsChangingRelationship] = React.useState(false);
+    const [pendingArchiveWorkstreamId, setPendingArchiveWorkstreamId] = React.useState(null);
+    const [archiveWorkstreamBusy, setArchiveWorkstreamBusy] = React.useState(false);
+    const [archiveEntityConfirmationVisible, setArchiveEntityConfirmationVisible] = React.useState(false);
+    const [archiveEntityBusy, setArchiveEntityBusy] = React.useState(false);
+    const [archivingTaskId, setArchivingTaskId] = React.useState(null);
+    const [ownerValue, setOwnerValue] = React.useState(String(detail.item.ownerId || ''));
+    const [isSavingOwner, setIsSavingOwner] = React.useState(false);
     const { active } = useDndContext();
     const dragType = String(active?.data?.current?.type || '');
     const canDropTask = detail.type === 'workstream' && dragType === 'task-card';
@@ -192,232 +562,522 @@ function PlanningDrawerDetailView({ detail, currentWorkspaceId, onOpenNestedWork
             return [];
         return detail.item.tasks || [];
     }, [detail.item, detail.type]);
-    const archivedChildCount = detail.type === 'initiative'
-        ? childItems.filter((workstream) => Boolean(workstream.isArchived)).length
-        : taskItems.filter((task) => Boolean(task.isArchived)).length;
+    const assigneeOptionByValue = React.useMemo(() => new Map(assigneeOptions
+        .filter((option) => !String(option.archivedAt || '').trim())
+        .map((option) => [String(option.value || '').trim(), option])), [assigneeOptions]);
     const visibleChildItems = showArchivedChildren
         ? childItems
         : childItems.filter((workstream) => !workstream.isArchived);
-    const visibleTaskItems = showArchivedChildren
+    const visibleTaskItems = arrangePlanningTasks(showArchivedChildren
         ? taskItems
-        : taskItems.filter((task) => !task.isArchived);
+        : taskItems.filter((task) => !task.isArchived), taskArrangeMode);
+    const visibleChildCount = detail.type === 'initiative'
+        ? visibleChildItems.length
+        : visibleTaskItems.length;
     const detailLabel = detail.type === 'initiative' ? 'Initiative' : 'Workstream';
     const detailReferenceLabel = detail.type === 'initiative'
         ? formatInitiativeReference(detail.item)
         : formatWorkstreamReference(detail.item);
+    const archiveDetailState = resolvePlanningArchiveDetailState({
+        entityType: detail.type,
+        isArchived: detail.item.isArchived,
+        taskCount: detail.item.taskCount,
+        completedTaskCount: detail.item.completedTaskCount,
+        archiveReady: detail.item.archiveReady,
+        activeWorkstreamCount: detail.item.archiveActiveWorkstreamCount,
+    });
+    const archiveActionLabel = archiveDetailState.mode === 'archived'
+        ? `Unarchive ${detailLabel.toLowerCase()}`
+        : archiveDetailState.mode === 'blocked'
+            ? `Archive unavailable — active ${archiveDetailState.remainingKind === 'task' ? 'tasks' : 'workstreams'} remain`
+            : archiveDetailState.mode === 'checking'
+                ? 'Archive availability is still loading'
+                : `Archive ${detailLabel.toLowerCase()}`;
     React.useEffect(() => {
-        setAttachReference('');
-        setShowArchivedChildren(false);
-        setShowRecentActivity(true);
+        setIsAttachingReference(false);
+        setShowParentLinkPicker(false);
+        setPendingUnlink(null);
+        setRelationshipRecovery(null);
+        setIsChangingRelationship(false);
+        setArchiveEntityConfirmationVisible(false);
     }, [detail.item.id, detail.type]);
-    const handleAttachReference = React.useCallback(() => {
-        const value = attachReference.trim();
-        if (!value)
+    React.useEffect(() => {
+        setOwnerValue(String(detail.item.ownerId || ''));
+    }, [detail.item.id, detail.item.ownerId, detail.type]);
+    const handleOwnerChange = React.useCallback(async (nextOwnerId) => {
+        if (!onChangeOwner || isSavingOwner || nextOwnerId === ownerValue)
+            return;
+        const previousOwnerId = ownerValue;
+        setOwnerValue(nextOwnerId);
+        setIsSavingOwner(true);
+        try {
+            await onChangeOwner(nextOwnerId);
+        }
+        catch {
+            setOwnerValue(previousOwnerId);
+        }
+        finally {
+            setIsSavingOwner(false);
+        }
+    }, [isSavingOwner, onChangeOwner, ownerValue]);
+    const handleConfirmArchiveEntity = React.useCallback(async () => {
+        if (!onArchiveResolvedEntity || archiveEntityBusy)
             return;
-        if (detail.type === 'initiative') {
-            onAttachWorkstreamToInitiativeByReference?.(detail.item.id, value);
+        setArchiveEntityBusy(true);
+        try {
+            const archived = await onArchiveResolvedEntity(detail.item.id);
+            if (archived)
+                setArchiveEntityConfirmationVisible(false);
         }
-        else {
-            onAttachTaskToWorkstreamByReference?.(detail.item.id, value);
+        finally {
+            setArchiveEntityBusy(false);
+        }
+    }, [archiveEntityBusy, detail.item.id, onArchiveResolvedEntity]);
+    const hasAttachReferenceHandler = detail.type === 'initiative'
+        ? Boolean(onAttachWorkstreamToInitiativeByReference)
+        : Boolean(onAttachTaskToWorkstreamByReference);
+    const handleAttachReference = React.useCallback(async (option) => {
+        if (isAttachingReference)
+            return;
+        const attach = detail.type === 'initiative'
+            ? onAttachWorkstreamToInitiativeByReference
+            : onAttachTaskToWorkstreamByReference;
+        if (!attach)
+            return;
+        setIsAttachingReference(true);
+        try {
+            await attach(detail.item.id, option.referenceLabel);
+        }
+        finally {
+            setIsAttachingReference(false);
         }
-        setAttachReference('');
     }, [
-        attachReference,
         detail.item.id,
         detail.type,
+        isAttachingReference,
         onAttachTaskToWorkstreamByReference,
         onAttachWorkstreamToInitiativeByReference,
     ]);
-    const attachActionLabel = detail.type === 'initiative'
-        ? 'Attach workstream to initiative'
-        : 'Attach task to workstream';
-    const archivedToggleLabel = detail.type === 'initiative' ? 'archived workstreams' : 'archived tasks';
+    const handleLinkInitiative = React.useCallback(async (option) => {
+        if (!onAssignInitiativeToWorkstream || detail.type !== 'workstream' || isChangingRelationship)
+            return;
+        setIsChangingRelationship(true);
+        try {
+            const result = await onAssignInitiativeToWorkstream(detail.item.id, option.referenceLabel);
+            if (result !== false)
+                setShowParentLinkPicker(false);
+        }
+        finally {
+            setIsChangingRelationship(false);
+        }
+    }, [detail.item.id, detail.type, isChangingRelationship, onAssignInitiativeToWorkstream]);
     const parentInitiativeReferenceLabel = detail.type === 'workstream' && parentInitiative
         ? formatInitiativeReference(parentInitiative)
         : '';
-    const actorOptionByValue = React.useMemo(() => {
-        const map = new Map();
-        for (const option of assigneeOptions) {
-            const value = String(option.value || '').trim();
-            if (!value)
-                continue;
-            map.set(value, option);
-            map.set(value.toLowerCase(), option);
+    const linkedChildIds = React.useMemo(() => new Set(detail.type === 'initiative'
+        ? childItems.map((workstream) => workstream.id)
+        : taskItems.map((task) => task.id)), [childItems, detail.type, taskItems]);
+    const availableLinkOptions = React.useMemo(() => (detail.type === 'initiative' ? linkOptions.workstreams : linkOptions.tasks).filter((option) => !linkedChildIds.has(option.id)), [detail.type, linkOptions.tasks, linkOptions.workstreams, linkedChildIds]);
+    const handleConfirmUnlink = React.useCallback(async () => {
+        if (!pendingUnlink || isChangingRelationship)
+            return;
+        setIsChangingRelationship(true);
+        try {
+            if (pendingUnlink.entityType === 'workstream') {
+                if (!onAssignInitiativeToWorkstream)
+                    return;
+                const restoreInitiativeReference = detail.type === 'initiative'
+                    ? detailReferenceLabel
+                    : parentInitiativeReferenceLabel;
+                const result = await onAssignInitiativeToWorkstream?.(pendingUnlink.id, null);
+                if (result === false)
+                    return;
+                setRelationshipRecovery({
+                    entityType: pendingUnlink.entityType,
+                    id: pendingUnlink.id,
+                    message: `${pendingUnlink.referenceLabel} removed from its initiative.`,
+                    onUndo: async () => {
+                        if (!restoreInitiativeReference)
+                            return;
+                        const undoResult = await onAssignInitiativeToWorkstream?.(pendingUnlink.id, restoreInitiativeReference);
+                        if (undoResult !== false)
+                            setRelationshipRecovery(null);
+                    },
+                });
+            }
+            else {
+                if (!onAssignTaskToWorkstream)
+                    return;
+                const result = await onAssignTaskToWorkstream(pendingUnlink.id, null);
+                if (result === false)
+                    return;
+                setRelationshipRecovery({
+                    entityType: pendingUnlink.entityType,
+                    id: pendingUnlink.id,
+                    message: `${pendingUnlink.referenceLabel} removed from this workstream.`,
+                    onUndo: async () => {
+                        const undoResult = await onAssignTaskToWorkstream(pendingUnlink.id, detail.item.id);
+                        if (undoResult !== false)
+                            setRelationshipRecovery(null);
+                    },
+                });
+            }
+            setPendingUnlink(null);
         }
-        return map;
-    }, [assigneeOptions]);
-    const resolveActorLabel = React.useCallback((actorId, actorType, actorLabel) => {
-        if (actorLabel && actorLabel.trim())
-            return actorLabel.trim();
-        const raw = String(actorId || '').trim();
-        if (!raw)
-            return actorType === 'ai' ? 'AI Agent' : 'You';
-        const option = actorOptionByValue.get(raw) || actorOptionByValue.get(raw.toLowerCase());
-        if (option?.label)
-            return option.label;
-        if (actorType === 'ai')
-            return raw;
-        return raw;
-    }, [actorOptionByValue]);
-    const resolveActivityActorPresentation = React.useCallback((input) => {
-        const actorRef = String(input.actorId || '').trim();
-        const option = actorOptionByValue.get(actorRef) || actorOptionByValue.get(actorRef.toLowerCase());
-        const resolvedActor = input.actorProfile || option || null;
-        const resolvedKind = input.actorType === 'system'
-            ? 'system'
-            : input.actorType === 'ai' || resolvedActor?.kind === 'ai' || option?.kind === 'agent'
-                ? 'agent'
-                : input.actorType === 'human' || resolvedActor?.kind === 'human' || option?.kind === 'member'
-                    ? 'member'
-                    : input.fallbackKind || 'member';
-        const iconName = String(resolvedActor && 'icon' in resolvedActor && resolvedActor.icon
-            ? resolvedActor.icon
-            : resolvedKind === 'agent'
-                ? 'Bot'
-                : resolvedKind === 'member'
-                    ? 'User'
-                    : 'ClipboardList');
-        const ActorIcon = IconMap[iconName]
-            || (resolvedKind === 'agent' ? Bot : resolvedKind === 'member' ? User : ClipboardList);
-        return {
-            kind: resolvedKind,
-            label: resolvedKind === 'system'
-                ? 'System'
-                : resolveActorLabel(actorRef, resolvedKind === 'agent' ? 'ai' : 'human', resolvedActor && 'label' in resolvedActor ? resolvedActor.label || null : null),
-            color: resolvedActor && 'color' in resolvedActor ? resolvedActor.color || undefined : undefined,
-            ActorIcon,
-        };
-    }, [actorOptionByValue, resolveActorLabel]);
-    const formatActivityFieldValue = React.useCallback((field, value) => {
-        const normalizedValue = String(value || '').trim();
-        if (!normalizedValue)
-            return undefined;
-        if (field === 'ownerId') {
-            return actorOptionByValue.get(normalizedValue)?.label
-                || actorOptionByValue.get(normalizedValue.toLowerCase())?.label
-                || normalizedValue;
+        finally {
+            setIsChangingRelationship(false);
         }
-        if (field === 'initiativeId' && parentInitiative && normalizedValue === parentInitiative.id) {
-            return formatInitiativeReference(parentInitiative) || parentInitiative.title;
+    }, [
+        detail.item.id,
+        detail.type,
+        detailReferenceLabel,
+        isChangingRelationship,
+        onAssignInitiativeToWorkstream,
+        onAssignTaskToWorkstream,
+        parentInitiativeReferenceLabel,
+        pendingUnlink,
+    ]);
+    const handleUndoRelationship = React.useCallback(async () => {
+        if (!relationshipRecovery || isChangingRelationship)
+            return;
+        setIsChangingRelationship(true);
+        try {
+            await relationshipRecovery.onUndo();
         }
-        return undefined;
-    }, [actorOptionByValue, parentInitiative]);
-    const activityItems = React.useMemo(() => getEntityActivityItems({
-        activity: detail.item.activity,
-        comments: detail.item.comments,
-    }), [detail.item.activity, detail.item.comments]);
-    const activityCount = activityItems.length;
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: panelStyles.detailHero, children: [detailReferenceLabel ? (_jsxs("div", { className: panelStyles.detailReferenceRow, children: [detail.type === 'workstream' ? (_jsxs(_Fragment, { children: [_jsx(HierarchyActionBadge, { onClick: (event) => {
-                                            event.stopPropagation();
-                                            if (parentInitiativeReferenceLabel) {
-                                                onAssignInitiativeToWorkstream?.(detail.item.id, null);
-                                                return;
-                                            }
-                                            onEdit();
-                                        }, title: parentInitiativeReferenceLabel ? 'Remove from initiative' : 'Attach to initiative', ariaLabel: parentInitiativeReferenceLabel ? 'Remove from initiative' : 'Attach to initiative', children: parentInitiativeReferenceLabel ? _jsx(Unlink, { size: 13 }) : _jsx(Link2, { size: 13 }) }), _jsx("span", { className: styles.taskHierarchyDivider, children: "/" }), parentInitiativeReferenceLabel ? (_jsxs(_Fragment, { children: [_jsx(PlanningReferenceBadge, { label: parentInitiativeReferenceLabel, entityType: "initiative" }), _jsx("span", { className: styles.taskHierarchyDivider, children: "/" })] })) : null] })) : null, _jsx(PlanningReferenceBadge, { label: detailReferenceLabel, entityType: detail.type })] })) : null, _jsx("h3", { className: panelStyles.detailTitle, children: detail.item.title }), _jsx("p", { className: panelStyles.detailDescription, children: detail.item.description?.trim() || (detail.type === 'initiative'
-                            ? 'A top-level planning container that groups related workstreams.'
-                            : 'A coordination lane that groups related tasks and keeps execution organized.') }), _jsx("div", { className: panelStyles.progressTrack, "aria-label": `${detail.item.progressPercent}% complete`, children: _jsx("div", { className: panelStyles.progressFill, style: { width: `${detail.item.progressPercent}%` } }) }), _jsxs("div", { className: panelStyles.detailActionRow, children: [_jsx("button", { type: "button", className: styles.secondaryHeaderBtn, onClick: onEdit, children: _jsxs("span", { children: ["Edit ", detailLabel] }) }), detail.item.isArchived ? (_jsx("button", { type: "button", className: styles.secondaryHeaderBtn, onClick: onUnarchive, children: _jsx("span", { children: "Unarchive" }) })) : (_jsx("button", { type: "button", className: styles.secondaryHeaderBtn, onClick: onArchive, children: _jsx("span", { children: "Archive" }) }))] })] }), _jsxs("div", { className: panelStyles.metricGrid, children: [_jsxs("div", { className: panelStyles.metricCard, children: [_jsx("span", { className: panelStyles.metricValue, children: detail.item.taskCount }), _jsx("span", { className: panelStyles.metricLabel, children: "Tasks in scope" })] }), _jsxs("div", { className: panelStyles.metricCard, children: [_jsx("span", { className: panelStyles.metricValue, children: detail.item.completedTaskCount }), _jsx("span", { className: panelStyles.metricLabel, children: "Done / terminal" })] }), _jsxs("div", { className: panelStyles.metricCard, children: [_jsx("span", { className: panelStyles.metricValue, children: detail.item.ownerLabel || 'Unassigned' }), _jsx("span", { className: panelStyles.metricLabel, children: "Owner" })] }), _jsxs("div", { className: panelStyles.metricCard, children: [_jsx("span", { className: panelStyles.metricValue, children: (detail.item.commentCount || 0) + (detail.item.attachmentCount || 0) }), _jsx("span", { className: panelStyles.metricLabel, children: "Context items" })] })] }), _jsxs("div", { ref: setChildDropRef, className: `${panelStyles.listCard} ${canDropTask || canDropWorkstream ? panelStyles.sectionDropReady : ''} ${isChildDropOver ? panelStyles.sectionDropActive : ''} ${canDropTask || canDropWorkstream ? panelStyles.sectionDropMode : ''}`.trim(), children: [_jsxs("div", { className: panelStyles.sectionHeaderRow, children: [_jsx("div", { className: panelStyles.sectionTitle, children: childLabel }), _jsxs("div", { className: panelStyles.headerActionGroup, children: [archivedChildCount > 0 ? (_jsx("button", { type: "button", className: `tf-control-icon ${showArchivedChildren ? panelStyles.toggleActive : ''}`.trim(), title: showArchivedChildren ? `Hide ${archivedToggleLabel}` : `Show ${archivedToggleLabel}`, "aria-label": showArchivedChildren ? `Hide ${archivedToggleLabel}` : `Show ${archivedToggleLabel}`, "aria-pressed": showArchivedChildren, onClick: () => setShowArchivedChildren((current) => !current), children: showArchivedChildren ? _jsx(EyeOff, { size: 15 }) : _jsx(Eye, { size: 15 }) })) : null, detail.type === 'initiative' ? (_jsx("button", { type: "button", className: "tf-control-icon", title: "Create workstream in this initiative", "aria-label": "Create workstream in this initiative", onClick: () => onCreateWorkstreamInInitiative?.(detail.item.id), children: _jsx(Plus, { size: 15 }) })) : (_jsx("button", { type: "button", className: "tf-control-icon", title: "Create task in this workstream", "aria-label": "Create task in this workstream", onClick: () => onCreateTaskInWorkstream?.(detail.item.id), children: _jsx(Plus, { size: 15 }) }))] })] }), _jsxs("div", { className: panelStyles.attachReferenceRow, children: [_jsx(HierarchyActionBadge, { onClick: (event) => {
-                                    event.stopPropagation();
-                                    handleAttachReference();
-                                }, disabled: !attachReference.trim(), title: attachActionLabel, ariaLabel: attachActionLabel, children: _jsx(Link2, { size: 13 }) }), _jsx("span", { className: styles.taskHierarchyDivider, children: "/" }), _jsx("input", { type: "text", className: `${styles.input} ${panelStyles.attachReferenceInput}`.trim(), placeholder: detail.type === 'initiative'
-                                    ? 'Paste workstream reference (e.g. WS-123)'
-                                    : 'Paste task reference (e.g. T-123)', value: attachReference, onChange: (event) => setAttachReference(event.target.value), onKeyDown: (event) => {
-                                    if (event.key === 'Enter') {
-                                        event.preventDefault();
-                                        handleAttachReference();
-                                    }
-                                } })] }), detail.type === 'initiative' ? (visibleChildItems.length > 0 ? visibleChildItems.map((workstream) => {
+        finally {
+            setIsChangingRelationship(false);
+        }
+    }, [isChangingRelationship, relationshipRecovery]);
+    const renderRelationshipFeedback = React.useCallback((entityType, entityId) => {
+        if (relationshipRecovery?.entityType === entityType && relationshipRecovery.id === entityId) {
+            return (_jsxs("div", { className: panelStyles.relationshipRecovery, role: "status", children: [_jsx("span", { children: relationshipRecovery.message }), _jsx("button", { type: "button", className: "tf-button-ghost tf-button-compact", disabled: isChangingRelationship, onClick: () => void handleUndoRelationship(), children: isChangingRelationship ? 'Restoring…' : 'Undo' })] }));
+        }
+        return null;
+    }, [handleUndoRelationship, isChangingRelationship, relationshipRecovery]);
+    const detachedRelationshipRecovery = relationshipRecovery && !linkedChildIds.has(relationshipRecovery.id) ? (_jsxs("div", { className: panelStyles.relationshipRecovery, role: "status", children: [_jsx("span", { children: relationshipRecovery.message }), _jsx("button", { type: "button", className: "tf-button-ghost tf-button-compact", disabled: isChangingRelationship, onClick: () => void handleUndoRelationship(), children: isChangingRelationship ? 'Restoring…' : 'Undo' })] })) : null;
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: panelStyles.detailHero, children: [_jsxs("div", { className: panelStyles.detailTopRow, children: [_jsxs("div", { className: panelStyles.detailReferenceRow, children: [detail.type === 'workstream' ? (_jsx(_Fragment, { children: parentInitiativeReferenceLabel ? (_jsxs(_Fragment, { children: [_jsx(PlanningReferenceBadge, { label: parentInitiativeReferenceLabel, entityType: "initiative", entityName: parentInitiative?.title }), _jsx("span", { className: styles.taskHierarchyDivider, children: "/" }), !inlineEditor ? (_jsx(HierarchyActionBadge, { disabled: !onAssignInitiativeToWorkstream, onClick: () => {
+                                                        setPendingUnlink({
+                                                            entityType: 'workstream',
+                                                            id: detail.item.id,
+                                                            referenceLabel: detailReferenceLabel,
+                                                            title: detail.item.title,
+                                                            parentLabel: parentInitiative
+                                                                ? `${formatInitiativeReference(parentInitiative)} ${parentInitiative.title}`.trim()
+                                                                : parentInitiativeReferenceLabel,
+                                                        });
+                                                    }, title: "Unlink workstream from initiative", ariaLabel: "Unlink workstream from initiative", children: _jsx(Unlink, { size: 14, "aria-hidden": "true" }) })) : null] })) : null })) : null, detail.type === 'workstream'
+                                        && !parentInitiativeReferenceLabel
+                                        && !inlineEditor ? (_jsx(HierarchyActionBadge, { disabled: !onAssignInitiativeToWorkstream, onClick: () => setShowParentLinkPicker(true), title: "Link initiative", ariaLabel: "Link initiative", ariaExpanded: showParentLinkPicker, children: _jsx(Link2, { size: 14, "aria-hidden": "true" }) })) : null, _jsx(PlanningReferenceBadge, { label: detailReferenceLabel || 'Reference pending', entityType: detail.type, entityName: detail.item.title, pending: !detailReferenceLabel })] }), _jsx("div", { className: panelStyles.detailTopActions, children: inlineEditor ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "tf-button-ghost tf-button-compact", onClick: inlineEditor.onCancel, disabled: inlineEditor.isSubmitting, children: "Cancel" }), _jsx("button", { type: "submit", form: inlineEditorFormId, className: "tf-button-primary tf-button-compact", disabled: inlineEditor.isSubmitting, children: inlineEditor.isSubmitting ? 'Saving…' : 'Save' })] })) : (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "tf-control-icon", disabled: archiveDetailState.mode === 'blocked' || archiveDetailState.mode === 'checking', onClick: () => {
+                                                if (archiveDetailState.mode === 'archived') {
+                                                    onUnarchive?.();
+                                                }
+                                                else if (archiveDetailState.mode === 'empty') {
+                                                    onArchive?.();
+                                                }
+                                                else if (archiveDetailState.mode === 'ready') {
+                                                    setArchiveEntityConfirmationVisible(true);
+                                                }
+                                            }, title: archiveActionLabel, "aria-label": archiveActionLabel, "aria-expanded": archiveDetailState.mode === 'ready'
+                                                ? archiveEntityConfirmationVisible
+                                                : undefined, children: archiveDetailState.mode === 'archived'
+                                                ? _jsx(RotateCcw, { size: 14, "aria-hidden": "true" })
+                                                : _jsx(Archive, { size: 14, "aria-hidden": "true" }) }), _jsx("button", { type: "button", className: "tf-control-icon", onClick: () => {
+                                                setShowParentLinkPicker(false);
+                                                onEdit();
+                                            }, title: `Edit ${detailLabel.toLowerCase()} details`, "aria-label": `Edit ${detailLabel.toLowerCase()} details`, children: _jsx(Pencil, { size: 14, "aria-hidden": "true" }) })] })) })] }), archiveEntityConfirmationVisible && archiveDetailState.mode === 'ready' ? (_jsx(PlanningArchiveConfirmation, { entityType: detail.type, title: detail.item.title, activeTaskCount: detail.item.archiveActiveTaskCount, activeWorkstreamCount: detail.item.archiveActiveWorkstreamCount, busy: archiveEntityBusy, onCancel: () => setArchiveEntityConfirmationVisible(false), onConfirm: () => void handleConfirmArchiveEntity() })) : null, detail.type === 'workstream' ? renderRelationshipFeedback('workstream', detail.item.id) : null, detail.type === 'workstream' && !parentInitiativeReferenceLabel && showParentLinkPicker ? (_jsxs("div", { className: panelStyles.relationshipPickerRow, role: "group", "aria-label": "Link workstream to initiative", children: [_jsx(PlanningLinkPicker, { options: linkOptions.initiatives, entityLabel: "initiative", onSelect: handleLinkInitiative, disabled: !onAssignInitiativeToWorkstream || isChangingRelationship }), _jsx("button", { type: "button", className: "tf-control-icon tf-control-icon-compact", disabled: isChangingRelationship, onClick: () => setShowParentLinkPicker(false), title: "Cancel initiative link", "aria-label": "Cancel initiative link", children: _jsx(X, { size: 14, "aria-hidden": "true" }) })] })) : null, inlineEditor ? (_jsx(PlanningDrawerEditor, { editor: inlineEditor.editor, draftTitle: inlineEditor.draftTitle, draftDescription: inlineEditor.draftDescription, draftOwner: inlineEditor.draftOwner, draftInitiativeId: inlineEditor.draftInitiativeId, assigneeOptions: assigneeOptions, initiativeLinkOptions: linkOptions.initiatives, draftInitiativeSummary: inlineEditor.draftInitiativeSummary, onChangeDraftTitle: inlineEditor.onChangeDraftTitle, onChangeDraftDescription: inlineEditor.onChangeDraftDescription, onChangeDraftOwner: inlineEditor.onChangeDraftOwner, onChangeDraftInitiativeId: inlineEditor.onChangeDraftInitiativeId, onCancel: inlineEditor.onCancel, onSubmit: inlineEditor.onSubmit, isSubmitting: inlineEditor.isSubmitting, inline: true, formId: inlineEditorFormId })) : (_jsxs(_Fragment, { children: [_jsx("h3", { className: panelStyles.detailTitle, children: detail.item.title }), _jsx(PlanningEntityDescription, { description: detail.item.description, label: detailLabel, taskReferences: taskReferences, className: `${panelStyles.detailDescription} ${styles.appScrollbar} tf-scrollbar`.trim(), markdownClassName: panelStyles.detailDescriptionMarkdown })] })), _jsxs("div", { className: panelStyles.detailOwnerField, children: [_jsx("span", { className: panelStyles.detailOwnerLabel, children: "Owner" }), _jsx(PlanningOwnerDropdown, { value: ownerValue, disabled: !onChangeOwner || isSavingOwner, onChange: (nextOwnerId) => void handleOwnerChange(nextOwnerId), ariaLabel: `${detailLabel} owner`, options: assigneeOptions, className: `${planningDropdownStyles.control} ${panelStyles.ownerSelect}` })] }), detail.item.taskCount > 0 ? (_jsx(PlanningProgress, { value: detail.item.progressPercent, label: `${detail.item.progressPercent}% resolved`, statusCounts: detail.item.statusCounts })) : (_jsx(PlanningNoTasks, {})), _jsx(PlanningSummaryMeta, { item: detail.item, workstreamCount: detail.type === 'initiative'
+                            ? detail.item.workstreamCount ?? detail.item.workstreams.length
+                            : undefined, className: panelStyles.detailSummaryMeta }), detail.item.taskCount > 0 ? (_jsx("span", { className: panelStyles.passiveGuidance, children: "Lifetime progress includes archived tasks." })) : null] }), _jsxs("div", { ref: setChildDropRef, className: `${panelStyles.listCard} ${canDropTask || canDropWorkstream ? panelStyles.sectionDropReady : ''} ${isChildDropOver ? panelStyles.sectionDropActive : ''} ${canDropTask || canDropWorkstream ? panelStyles.sectionDropMode : ''}`.trim(), children: [_jsxs("div", { className: panelStyles.sectionHeaderRow, children: [_jsxs("div", { className: panelStyles.sectionTitle, children: [childLabel, " (", visibleChildCount, ")"] }), _jsx("div", { className: panelStyles.headerActionGroup, children: detail.type === 'initiative' ? (_jsx("button", { type: "button", className: "tf-control-icon", title: "Create workstream in this initiative", "aria-label": "Create workstream in this initiative", onClick: () => onCreateWorkstreamInInitiative?.(detail.item.id), children: _jsx(Plus, { size: 15 }) })) : (_jsx("button", { type: "button", className: "tf-control-icon", title: "Create task in this workstream", "aria-label": "Create task in this workstream", onClick: () => onCreateTaskInWorkstream?.(detail.item.id), children: _jsx(Plus, { size: 15 }) })) })] }), _jsx("div", { className: panelStyles.linkPickerRow, children: _jsx(PlanningLinkPicker, { options: availableLinkOptions, entityLabel: detail.type === 'initiative' ? 'workstream' : 'task', onSelect: handleAttachReference, disabled: !hasAttachReferenceHandler || isAttachingReference }) }), detail.type === 'workstream' ? (_jsx(PlanningTaskArrangeControl, { value: taskArrangeMode, onChange: onTaskArrangeModeChange })) : null, detail.type === 'initiative' ? (visibleChildItems.length > 0 ? visibleChildItems.map((workstream) => {
                         const workstreamReferenceLabel = formatWorkstreamReference(workstream);
                         const handleOpenWorkstream = () => onOpenNestedWorkstreamDetails?.(workstream.id);
-                        return (_jsx("div", { className: `${panelStyles.listItemButton} ${panelStyles.detailCardButton}`.trim(), children: _jsxs("div", { className: `${panelStyles.listItem} ${panelStyles.detailChildCard} ${workstream.isArchived ? panelStyles.detailChildCardArchived : ''}`.trim(), children: [_jsx("div", { className: panelStyles.detailChildCardTopRow, children: _jsxs("div", { className: panelStyles.detailChildReferenceRow, children: [_jsx(HierarchyActionBadge, { onClick: (event) => {
-                                                        event.stopPropagation();
-                                                        onAssignInitiativeToWorkstream?.(workstream.id, null);
-                                                    }, title: "Remove from initiative", ariaLabel: "Remove from initiative", children: _jsx(Unlink, { size: 13 }) }), _jsx("span", { className: styles.taskHierarchyDivider, children: "/" }), workstreamReferenceLabel ? (_jsx(PlanningReferenceBadge, { label: workstreamReferenceLabel, entityType: "workstream" })) : _jsx("span", { "aria-hidden": "true" })] }) }), _jsxs("div", { role: "button", tabIndex: 0, className: panelStyles.listItemText, onClick: handleOpenWorkstream, onKeyDown: (event) => {
-                                            if (event.key !== 'Enter' && event.key !== ' ')
-                                                return;
-                                            event.preventDefault();
-                                            handleOpenWorkstream();
-                                        }, children: [_jsx("span", { className: panelStyles.listItemTitle, children: workstream.title }), _jsxs("span", { className: panelStyles.listItemMeta, children: [workstream.taskCount, " tasks \u2022 ", workstream.progressPercent, "% complete", workstream.isArchived ? ' • archived' : ''] })] })] }) }, workstream.id));
-                    }) : (_jsxs("div", { className: panelStyles.emptyPanel, children: [_jsx("div", { className: panelStyles.emptyPanelTitle, children: "No workstreams yet" }), _jsx("div", { className: panelStyles.emptyPanelText, children: "Add the first workstream to break the initiative into clearer lanes of execution." })] }))) : (visibleTaskItems.length > 0 ? [...visibleTaskItems]
-                        .sort((left, right) => {
-                        const leftDone = getStatusDefinition(left.status).value === 'done';
-                        const rightDone = getStatusDefinition(right.status).value === 'done';
-                        if (leftDone === rightDone)
-                            return 0;
-                        return leftDone ? 1 : -1;
-                    })
-                        .map((task) => {
-                        const referenceLabel = task.referenceNumber ? `T-${task.referenceNumber}` : '';
-                        const statusDefinition = getStatusDefinition(task.status);
-                        const StatusIcon = IconMap[statusDefinition.icon || 'Square'];
-                        const statusColor = resolveColor(statusDefinition.color) || 'var(--text-secondary)';
-                        const handleOpenTask = () => onOpenTaskById?.(task.id);
-                        const taskMeta = `${formatTaskStatusLabel(task.status)}${task.isArchived ? ' • archived' : ''}`;
-                        return (_jsx("div", { className: `${panelStyles.listItemButton} ${panelStyles.detailCardButton}`.trim(), children: _jsxs("div", { className: `${panelStyles.listItem} ${panelStyles.detailChildCard} ${task.isArchived ? panelStyles.detailChildCardArchived : ''}`.trim(), children: [_jsxs("div", { className: panelStyles.detailChildCardTopRow, children: [_jsxs("div", { className: panelStyles.detailChildReferenceRow, children: [_jsx(HierarchyActionBadge, { onClick: (event) => {
+                        const isSelected = selectedChildWorkstreamId === workstream.id;
+                        const archiveConfirmationVisible = pendingArchiveWorkstreamId === workstream.id;
+                        const handleConfirmArchiveWorkstream = async () => {
+                            if (!onArchiveResolvedWorkstream || archiveWorkstreamBusy)
+                                return;
+                            setArchiveWorkstreamBusy(true);
+                            try {
+                                const archived = await onArchiveResolvedWorkstream(workstream.id);
+                                if (archived)
+                                    setPendingArchiveWorkstreamId(null);
+                            }
+                            finally {
+                                setArchiveWorkstreamBusy(false);
+                            }
+                        };
+                        return (_jsx("div", { className: `${panelStyles.listItemButton} ${panelStyles.detailCardButton}`.trim(), children: _jsxs("div", { className: `${panelStyles.listItem} ${panelStyles.detailChildCard} ${isSelected ? panelStyles.detailChildCardSelected : ''} ${workstream.isArchived ? panelStyles.detailChildCardArchived : ''}`.trim(), children: [_jsxs("div", { className: panelStyles.detailChildCardTopRow, children: [_jsxs("div", { className: panelStyles.detailChildReferenceRow, children: [_jsx(HierarchyActionBadge, { disabled: !onAssignInitiativeToWorkstream, onClick: (event) => {
                                                             event.stopPropagation();
-                                                            onRemoveTaskFromWorkstream?.(task.id, detail.item.id);
-                                                        }, title: "Remove from workstream", ariaLabel: "Remove from workstream", children: _jsx(Unlink, { size: 13 }) }), _jsx("span", { className: styles.taskHierarchyDivider, children: "/" }), referenceLabel ? (_jsx(PlanningReferenceBadge, { label: referenceLabel, entityType: "task" })) : _jsx("span", { "aria-hidden": "true" })] }), _jsx("span", { className: panelStyles.taskStatusIcon, style: {
-                                                    color: statusColor,
-                                                }, "aria-label": statusDefinition.shortLabel || formatTaskStatusLabel(task.status), title: statusDefinition.shortLabel || formatTaskStatusLabel(task.status), children: StatusIcon ? _jsx(StatusIcon, { size: 18, strokeWidth: 2.4 }) : null })] }), _jsxs("div", { role: "button", tabIndex: 0, className: panelStyles.listItemText, onClick: handleOpenTask, onKeyDown: (event) => {
+                                                            setPendingUnlink({
+                                                                entityType: 'workstream',
+                                                                id: workstream.id,
+                                                                referenceLabel: workstreamReferenceLabel,
+                                                                title: workstream.title,
+                                                                parentLabel: `${detailReferenceLabel} ${detail.item.title}`.trim(),
+                                                            });
+                                                        }, title: `Unlink ${workstreamReferenceLabel || workstream.title} from initiative`, ariaLabel: `Unlink ${workstreamReferenceLabel || workstream.title} from initiative`, children: _jsx(Unlink, { size: 14, "aria-hidden": "true" }) }), workstreamReferenceLabel ? (_jsx(PlanningReferenceBadge, { label: workstreamReferenceLabel, entityType: "workstream", entityName: workstream.title })) : _jsx("span", { "aria-hidden": "true" })] }), _jsx("div", { className: panelStyles.detailChildActions, onClick: (event) => event.stopPropagation(), children: workstream.archiveReady && !workstream.isArchived && onArchiveResolvedWorkstream ? (_jsx("button", { type: "button", className: "tf-control-icon", onClick: () => setPendingArchiveWorkstreamId(workstream.id), title: "Archive completed workstream", "aria-label": `Archive completed workstream ${workstream.title}`, "aria-expanded": archiveConfirmationVisible, children: _jsx(Archive, { size: 14, "aria-hidden": "true" }) })) : null })] }), renderRelationshipFeedback('workstream', workstream.id), archiveConfirmationVisible ? (_jsx(PlanningArchiveConfirmation, { entityType: "workstream", title: workstream.title, activeTaskCount: workstream.archiveActiveTaskCount, busy: archiveWorkstreamBusy, onCancel: () => setPendingArchiveWorkstreamId(null), onConfirm: () => void handleConfirmArchiveWorkstream() })) : null, _jsx("div", { role: "button", tabIndex: 0, "aria-current": isSelected ? 'true' : undefined, className: panelStyles.listItemText, onClick: handleOpenWorkstream, onKeyDown: (event) => {
                                             if (event.key !== 'Enter' && event.key !== ' ')
                                                 return;
                                             event.preventDefault();
-                                            handleOpenTask();
-                                        }, children: [_jsx("span", { className: panelStyles.listItemTitle, children: task.title }), _jsx("span", { className: panelStyles.listItemMeta, children: taskMeta })] })] }) }, task.id));
-                    }) : (_jsxs("div", { className: panelStyles.sectionNote, children: ["No tasks are linked to this workstream yet. Use the ", _jsx("code", { children: "+" }), " action above to add the first one."] })))] }), _jsx("div", { className: panelStyles.listCard, children: _jsx(React.Suspense, { fallback: _jsx(DeferredPlanningPanelFallback, {}), children: _jsx(DeferredContextAttachmentManager, { ownerType: detail.type, ownerId: detail.item.id, ownerReferenceLabel: detailReferenceLabel, workspaceId: currentWorkspaceId, attachments: detail.item.attachments || [], onAddAttachment: (file) => onAddPlanningContextFile?.(detail.type, detail.item.id, file), onRemoveAttachment: (index) => onRemovePlanningContextFile?.(detail.type, detail.item.id, index), onUpdateAttachmentCaption: (index, caption) => (onUpdatePlanningContextCaption?.(detail.type, detail.item.id, index, caption)) }) }) }), _jsxs("div", { className: panelStyles.listCard, children: [_jsx(DisclosureSectionHeader, { label: "Recent Activity", count: activityCount, showZeroCount: true, expanded: showRecentActivity, expandedTitle: "Hide recent activity", collapsedTitle: "Show recent activity", onToggle: () => setShowRecentActivity((current) => !current) }), showRecentActivity ? (_jsx(React.Suspense, { fallback: _jsx(DeferredPlanningPanelFallback, {}), children: _jsx(DeferredEntityActivityTimeline, { activity: detail.item.activity, comments: detail.item.comments, formatFieldValue: formatActivityFieldValue, resolveActorPresentation: resolveActivityActorPresentation, onOpenTaskById: onOpenTaskById, emptyMessage: `No ${detail.type} activity yet.`, listClassName: panelStyles.activityTimelineList, emptyClassName: panelStyles.activityTimelineEmpty }) })) : null] })] }));
+                                            handleOpenWorkstream();
+                                        }, children: _jsx(PlanningEntitySummary, { item: workstream, entityType: "workstream", ownerOption: workstream.ownerId && assigneeOptionByValue.has(workstream.ownerId)
+                                                ? toPlanningAssigneeOption(assigneeOptionByValue.get(workstream.ownerId))
+                                                : undefined, ownerOptions: assigneeOptions.map(toPlanningAssigneeOption), onChangeOwner: onChangePlanningOwner
+                                                ? (ownerId) => onChangePlanningOwner('workstream', workstream.id, ownerId === 'unassigned' ? '' : ownerId)
+                                                : undefined }) })] }) }, workstream.id));
+                    }) : (_jsx("div", { className: panelStyles.passiveGuidance, children: "No workstreams are linked to this initiative." }))) : (visibleTaskItems.length > 0 ? (_jsx(PlanningTaskOrderList, { tasks: visibleTaskItems, mode: taskArrangeMode, onReorder: onReorderWorkstreamTasks
+                            ? (taskIds) => onReorderWorkstreamTasks(detail.item.id, mergeVisiblePlanningTaskOrder(arrangePlanningTasks(taskItems, 'execution'), taskIds))
+                            : undefined, children: (task) => {
+                            const referenceLabel = getTaskReferenceLabel(task) || task.id;
+                            const statusDefinition = getStatusDefinition(task.status);
+                            return (_jsx("div", { className: `${panelStyles.listItemButton} ${panelStyles.detailCardButton}`.trim(), children: _jsx(PlanningTaskCard, { task: task, assigneeOption: task.assignee && assigneeOptionByValue.has(task.assignee)
+                                        ? toPlanningAssigneeOption(assigneeOptionByValue.get(task.assignee))
+                                        : undefined, assigneeOptions: assigneeOptions.map(toPlanningAssigneeOption), showStatusLabel: showTaskCardStatusLabel, onOpen: onOpenTaskById ? () => onOpenTaskById(task.id) : undefined, onAssigneeChange: onChangeTaskAssignee
+                                        ? (assignee) => onChangeTaskAssignee(task.id, assignee)
+                                        : undefined, onStatusChange: onSetTaskStatus ? (status) => onSetTaskStatus(task.id, status) : undefined, feedback: renderRelationshipFeedback('task', task.id), referenceAction: (_jsx(HierarchyActionBadge, { disabled: !onAssignTaskToWorkstream, onClick: (event) => {
+                                            event.stopPropagation();
+                                            setPendingUnlink({
+                                                entityType: 'task',
+                                                id: task.id,
+                                                referenceLabel,
+                                                title: task.title,
+                                                parentLabel: `${detailReferenceLabel} ${detail.item.title}`.trim(),
+                                            });
+                                        }, title: `Unlink ${referenceLabel || task.title} from workstream`, ariaLabel: `Unlink ${referenceLabel || task.title} from workstream`, children: _jsx(Unlink, { size: 14, "aria-hidden": "true" }) })), actions: !task.isArchived
+                                        && (statusDefinition.value === 'done' || statusDefinition.value === 'cancelled')
+                                        && onArchivePlanningTask ? (_jsx("button", { type: "button", className: "tf-control-icon", disabled: archivingTaskId === task.id, onClick: async (event) => {
+                                            event.stopPropagation();
+                                            setArchivingTaskId(task.id);
+                                            try {
+                                                await onArchivePlanningTask(task.id);
+                                            }
+                                            finally {
+                                                setArchivingTaskId(null);
+                                            }
+                                        }, title: "Archive task", "aria-label": `Archive task ${referenceLabel || task.title}`, children: _jsx(Archive, { size: 14, "aria-hidden": "true" }) })) : undefined }) }, task.id));
+                        } })) : (_jsx("div", { className: panelStyles.passiveGuidance, children: "No tasks are linked to this workstream." }))), detachedRelationshipRecovery] }), _jsx("div", { className: panelStyles.listCard, children: _jsx(PlanningEntityContext, { entityType: detail.type, entityId: detail.item.id, referenceLabel: detailReferenceLabel, workspaceId: currentWorkspaceId, attachments: detail.item.attachments, readOnly: Boolean(detail.item.isArchived), onAddAttachment: (file) => onAddPlanningContextFile?.(detail.type, detail.item.id, file), onRemoveAttachment: (index) => onRemovePlanningContextFile?.(detail.type, detail.item.id, index), onUpdateAttachmentCaption: (index, caption) => (onUpdatePlanningContextCaption?.(detail.type, detail.item.id, index, caption)) }) }), _jsx("div", { className: panelStyles.listCard, children: _jsx(PlanningEntityActivity, { entityType: detail.type, item: detail.item, assigneeOptions: assigneeOptions.map(toPlanningAssigneeOption), currentActorId: currentActorId, taskReferences: taskReferences, parentInitiative: parentInitiative, listClassName: panelStyles.activityTimelineList, emptyClassName: panelStyles.activityTimelineEmpty, hydrationState: hydrationState, onRetryHydration: onRetryHydration }) }), _jsx(PlanningUnlinkConfirmation, { item: pendingUnlink, busy: isChangingRelationship, theme: theme, onCancel: () => setPendingUnlink(null), onConfirm: () => void handleConfirmUnlink() })] }));
 }
-function PlanningDrawerEditor({ editor, draftTitle, draftDescription, draftOwner, draftInitiativeId, assigneeOptions, draftInitiativeSummary, onChangeDraftTitle, onChangeDraftDescription, onChangeDraftOwner, onChangeDraftInitiativeId, onCancel, onSubmit, isSubmitting, onAssignInitiativeToWorkstream, }) {
+function PlanningDrawerEditor({ editor, draftTitle, draftDescription, draftOwner, draftInitiativeId, assigneeOptions, initiativeLinkOptions, draftInitiativeSummary, onChangeDraftTitle, onChangeDraftDescription, onChangeDraftOwner, onChangeDraftInitiativeId, onCancel, onSubmit, isSubmitting, inline = false, formId, }) {
     const entityLabel = editor.entityType === 'initiative' ? 'Initiative' : 'Workstream';
+    const titleInputId = React.useId();
+    const titleErrorId = React.useId();
+    const descriptionInputId = React.useId();
+    const titleInputRef = React.useRef(null);
+    const [titleError, setTitleError] = React.useState(null);
     const submitLabel = isSubmitting
         ? (editor.mode === 'create' ? `Creating ${entityLabel}...` : `Saving ${entityLabel}...`)
         : (editor.mode === 'create' ? `Create ${entityLabel}` : `Save ${entityLabel}`);
-    const ownerOptions = React.useMemo(() => normalizePlanningOwnerOptions(assigneeOptions, draftOwner), [assigneeOptions, draftOwner]);
     const handleSubmit = React.useCallback((event) => {
         event.preventDefault();
+        if (!draftTitle.trim()) {
+            setTitleError(`${entityLabel} title is required.`);
+            titleInputRef.current?.focus();
+            return;
+        }
+        setTitleError(null);
         onSubmit();
-    }, [onSubmit]);
-    const handleSetInitiative = React.useCallback(() => {
-        if (editor.mode !== 'edit' || editor.entityType !== 'workstream')
+    }, [draftTitle, entityLabel, onSubmit]);
+    const handleKeyDown = React.useCallback((event) => {
+        if (!inline || event.key !== 'Escape' || isSubmitting)
             return;
-        onAssignInitiativeToWorkstream?.(editor.targetId);
-    }, [editor, onAssignInitiativeToWorkstream]);
-    return (_jsxs("form", { className: panelStyles.editorCard, onSubmit: handleSubmit, children: [_jsxs("div", { className: panelStyles.editorField, children: [_jsx("label", { className: panelStyles.editorLabel, children: "Title" }), _jsx("input", { className: styles.input, disabled: isSubmitting, value: draftTitle, onChange: (event) => onChangeDraftTitle(event.target.value), placeholder: editor.entityType === 'initiative' ? 'Q3 Product Launch' : 'Content Production' })] }), _jsxs("div", { className: panelStyles.editorField, children: [_jsx("label", { className: panelStyles.editorLabel, children: "Description" }), _jsx("textarea", { className: styles.textarea, disabled: isSubmitting, value: draftDescription, onChange: (event) => onChangeDraftDescription(event.target.value), placeholder: editor.entityType === 'initiative'
+        event.preventDefault();
+        onCancel();
+    }, [inline, isSubmitting, onCancel]);
+    return (_jsxs("form", { id: formId, className: `${panelStyles.editorCard} ${inline ? panelStyles.inlineEditorCard : ''}`.trim(), onSubmit: handleSubmit, onKeyDown: handleKeyDown, noValidate: true, children: [_jsxs("div", { className: panelStyles.editorField, children: [_jsxs("label", { className: panelStyles.editorLabel, htmlFor: titleInputId, children: [entityLabel, " title"] }), _jsx("input", { ref: titleInputRef, id: titleInputId, "data-planning-editor-title": true, className: styles.input, disabled: isSubmitting, required: true, "aria-invalid": titleError ? 'true' : undefined, "aria-describedby": titleError ? titleErrorId : undefined, value: draftTitle, onChange: (event) => {
+                            if (titleError)
+                                setTitleError(null);
+                            onChangeDraftTitle(event.target.value);
+                        }, placeholder: editor.entityType === 'initiative' ? 'Enter initiative title' : 'Enter workstream title' }), titleError ? _jsx("p", { id: titleErrorId, className: "tf-text-error", children: titleError }) : null] }), _jsxs("div", { className: panelStyles.editorField, children: [_jsxs("label", { className: panelStyles.editorLabel, htmlFor: descriptionInputId, children: [entityLabel, " description"] }), _jsx("textarea", { id: descriptionInputId, className: styles.textarea, disabled: isSubmitting, value: draftDescription, onChange: (event) => onChangeDraftDescription(event.target.value), placeholder: editor.entityType === 'initiative'
                             ? 'Describe the broader outcome this initiative is meant to achieve.'
-                            : 'Describe the lane of work this workstream will coordinate.', rows: 5 })] }), editor.entityType === 'workstream' && (_jsxs("div", { className: panelStyles.editorField, children: [_jsx("label", { className: panelStyles.editorLabel, children: "Initiative" }), draftInitiativeSummary && (_jsxs("div", { className: panelStyles.editorHint, children: ["Current: ", draftInitiativeSummary.title] })), _jsxs("div", { className: panelStyles.attachReferenceRow, children: [editor.mode === 'edit' && (_jsxs(_Fragment, { children: [_jsx(HierarchyActionBadge, { onClick: (event) => {
-                                            event.stopPropagation();
-                                            handleSetInitiative();
-                                        }, disabled: isSubmitting || !draftInitiativeId.trim(), title: "Attach workstream to initiative", ariaLabel: "Attach workstream to initiative", children: _jsx(Link2, { size: 13 }) }), _jsx("span", { className: styles.taskHierarchyDivider, children: "/" })] })), _jsx("input", { type: "text", className: `${styles.input} ${panelStyles.attachReferenceInput}`.trim(), disabled: isSubmitting, placeholder: "Paste initiative reference (e.g. IN-123)", value: draftInitiativeId, onChange: (event) => onChangeDraftInitiativeId(event.target.value), onKeyDown: (event) => {
-                                    if (event.key !== 'Enter')
-                                        return;
-                                    event.preventDefault();
-                                    handleSetInitiative();
-                                } })] })] })), _jsxs("div", { className: panelStyles.editorField, children: [_jsx("label", { className: panelStyles.editorLabel, children: "Owner" }), _jsxs("select", { className: `${styles.select} ${styles.groupBySelect}`, disabled: isSubmitting, value: draftOwner, onChange: (event) => onChangeDraftOwner(event.target.value), children: [_jsx("option", { value: "", children: "Unassigned" }), ownerOptions.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value)))] })] }), _jsxs("div", { className: panelStyles.editorActions, children: [_jsx("button", { type: "button", className: styles.secondaryHeaderBtn, onClick: onCancel, disabled: isSubmitting, children: "Cancel" }), _jsx("button", { type: "submit", className: styles.primaryUpdateBtn, disabled: isSubmitting, children: submitLabel })] })] }));
+                            : 'Describe the lane of work this workstream will coordinate.', rows: 5 })] }), editor.entityType === 'workstream' && (_jsxs("div", { className: panelStyles.editorField, children: [_jsx("span", { className: panelStyles.editorLabel, children: "Initiative" }), _jsxs("div", { className: panelStyles.editorRelationshipRow, children: [_jsx(PlanningLinkPicker, { options: initiativeLinkOptions, selectedId: draftInitiativeSummary?.id || '', entityLabel: "initiative", disabled: isSubmitting, onSelect: (option) => onChangeDraftInitiativeId(option.referenceLabel) }), draftInitiativeId.trim() ? (_jsx("button", { type: "button", className: "tf-button-ghost tf-button-compact", disabled: isSubmitting, onClick: () => onChangeDraftInitiativeId(''), children: "Remove" })) : null] })] })), !inline ? _jsxs("div", { className: panelStyles.editorField, children: [_jsxs("span", { className: panelStyles.editorLabel, children: [entityLabel, " owner"] }), _jsx(PlanningOwnerDropdown, { disabled: isSubmitting, value: draftOwner, onChange: onChangeDraftOwner, ariaLabel: `${entityLabel} owner`, options: assigneeOptions, className: panelStyles.editorSelect })] }) : null, !inline ? _jsxs("div", { className: panelStyles.editorActions, children: [_jsx("button", { type: "button", className: styles.secondaryHeaderBtn, onClick: onCancel, disabled: isSubmitting, children: "Cancel" }), _jsx("button", { type: "submit", className: styles.primaryUpdateBtn, disabled: isSubmitting, children: submitLabel })] }) : null] }));
 }
-export function PlanningDrawer({ open, leftOffset = 0, initiatives, standaloneWorkstreams, allStandaloneWorkstreams, activeInitiativeId, activeWorkstreamId, expandedInitiativeIds, detail, editor, secondaryPane, currentWorkspaceId, assigneeOptions, draftInitiativeSummary, draftTitle, draftDescription, draftOwner, draftInitiativeId, onChangeDraftTitle, onChangeDraftDescription, onChangeDraftOwner, onChangeDraftInitiativeId, onCollapseTreePane, onExpandTreePane, onCollapsePrimaryPane, onExpandPrimaryPane, onCollapseSecondaryPane, onExpandSecondaryPane, onBackFromSecondary, treeCollapsed, primaryCollapsed, secondaryCollapsed, onCancelEditor, onSubmitEditor, isSubmittingEditor, onCreateInitiative, onCreateWorkstream, onToggleInitiative, onSelectInitiative, onSelectWorkstream, onOpenInitiativeDetails, onOpenWorkstreamDetails, onOpenNestedWorkstreamDetails, onEditInitiative, onEditWorkstream, onArchiveInitiative, onUnarchiveInitiative, onArchiveWorkstream, onUnarchiveWorkstream, onCreateTaskInWorkstream, onCreateWorkstreamInInitiative, onAssignInitiativeToWorkstream, onOpenTaskById, onRemoveTaskFromWorkstream, onAttachTaskToWorkstreamByReference, onAttachWorkstreamToInitiativeByReference, onAddPlanningContextFile, onRemovePlanningContextFile, onUpdatePlanningContextCaption, }) {
-    const hasPrimaryPane = Boolean(detail || editor);
+export function PlanningDrawer({ open, leftOffset = 0, returnFocusRef, onWidthChange, initiatives, standaloneWorkstreams, planningLoadState, onRetryPlanning, taskScope, activeInitiativeId, activeWorkstreamId, navigatorSort, navigatorSortReady, onNavigatorSortChange, taskArrangeMode = 'execution', onTaskArrangeModeChange = () => { }, onReorderWorkstreamTasks, planningFavorites, onTogglePlanningFavorite, favoritesSectionCollapsed, initiativesSectionCollapsed, workstreamsSectionCollapsed, onToggleFavoritesSection, onToggleInitiativesSection, onToggleWorkstreamsSection, expandedInitiativeIds, detail, editor, secondaryEditor = null, secondaryPane, primaryHydrationState, secondaryHydrationState, onRetryPrimaryHydration, onRetrySecondaryHydration, currentWorkspaceId, currentOwnerId, theme, assigneeOptions, linkOptions, showTaskCardStatusLabel = false, draftInitiativeSummary, draftTitle, draftDescription, draftOwner, draftInitiativeId, onChangeDraftTitle, onChangeDraftDescription, onChangeDraftOwner, onChangeDraftInitiativeId, onCollapseTreePane, onExpandTreePane, onCollapsePrimaryPane, onExpandPrimaryPane, onCollapseSecondaryPane, onExpandSecondaryPane, onBackFromSecondary, treeCollapsed, primaryCollapsed, secondaryCollapsed, onCancelEditor, onCancelSecondaryEditor, onSubmitEditor, isSubmittingEditor, onCreateInitiative, onCreateWorkstream, onToggleInitiative, onSelectInitiative, onSelectWorkstream, onOpenInitiativeDetails, onOpenWorkstreamDetails, onOpenNestedWorkstreamDetails, onEditInitiative, onEditWorkstream, onChangePlanningOwner, onChangeTaskAssignee, onArchiveInitiative, onUnarchiveInitiative, onArchiveWorkstream, onUnarchiveWorkstream, onArchivePlanningTask, onArchiveResolvedWorkstream, onArchiveResolvedInitiative, onCreateTaskInWorkstream, onCreateWorkstreamInInitiative, onAssignInitiativeToWorkstream, onOpenTaskById, onSetTaskStatus, taskReferences, onAssignTaskToWorkstream, onAttachTaskToWorkstreamByReference, onAttachWorkstreamToInitiativeByReference, onAddPlanningContextFile, onRemovePlanningContextFile, onUpdatePlanningContextCaption, }) {
+    const primaryInlineEditor = editor?.mode === 'edit'
+        && detail
+        && editor.entityType === detail.type
+        && editor.targetId === detail.item.id
+        ? editor
+        : null;
+    const secondaryInlineEditor = secondaryEditor?.mode === 'edit'
+        && secondaryPane?.kind === 'detail'
+        && secondaryEditor.entityType === secondaryPane.detail.type
+        && secondaryEditor.targetId === secondaryPane.detail.item.id
+        ? secondaryEditor
+        : null;
+    const dedicatedPrimaryEditor = editor && !primaryInlineEditor ? editor : null;
+    const hasPrimaryPane = Boolean(detail || dedicatedPrimaryEditor);
     const hasSecondaryPane = Boolean(secondaryPane);
-    const drawerWidth = getPlanningDrawerWidthPx(treeCollapsed, hasPrimaryPane, primaryCollapsed, hasSecondaryPane, secondaryCollapsed);
-    const primaryPaneLabel = editor
-        ? (editor.entityType === 'initiative'
-            ? (editor.mode === 'create' ? 'New Initiative' : 'Edit Initiative')
-            : (editor.mode === 'create' ? 'New Workstream' : 'Edit Workstream'))
+    const primaryEntityType = dedicatedPrimaryEditor?.entityType || detail?.type || null;
+    const primaryIsInitiative = primaryEntityType === 'initiative';
+    const primaryIsWorkstream = primaryEntityType === 'workstream';
+    const [initiativeRelationshipExpanded, setInitiativeRelationshipExpanded] = React.useState(false);
+    const [workstreamRelationshipExpanded, setWorkstreamRelationshipExpanded] = React.useState(false);
+    const [showArchivedPlanning, setShowArchivedPlanning] = React.useState(false);
+    const [archivedDetailVisibility, setArchivedDetailVisibility] = React.useState({ initiative: false, workstream: false });
+    const archivedPlanningItemCount = React.useMemo(() => {
+        const allWorkstreams = [
+            ...initiatives.flatMap((initiative) => initiative.allWorkstreams || initiative.workstreams),
+            ...standaloneWorkstreams,
+        ];
+        return initiatives.filter((initiative) => Boolean(initiative.isArchived)).length
+            + allWorkstreams.filter((workstream) => Boolean(workstream.isArchived)).length
+            + allWorkstreams.reduce((count, workstream) => (count + (workstream.tasks || []).filter((task) => Boolean(task.isArchived)).length), 0);
+    }, [initiatives, standaloneWorkstreams]);
+    const { availableWidth, layoutMode } = usePlanningDrawerViewport(leftOffset);
+    const wideLayout = layoutMode === 'wide';
+    const effectiveTreeCollapsed = wideLayout && treeCollapsed;
+    const effectivePrimaryCollapsed = wideLayout && primaryCollapsed;
+    const effectiveSecondaryCollapsed = wideLayout && secondaryCollapsed;
+    const initiativeSlotCollapsed = primaryIsInitiative
+        ? effectivePrimaryCollapsed
+        : !initiativeRelationshipExpanded;
+    const workstreamSlotCollapsed = primaryIsWorkstream
+        ? effectivePrimaryCollapsed
+        : hasSecondaryPane
+            ? effectiveSecondaryCollapsed
+            : !workstreamRelationshipExpanded;
+    const wideDrawerWidth = getPlanningDrawerWidthPx(effectiveTreeCollapsed, true, initiativeSlotCollapsed, true, workstreamSlotCollapsed);
+    const showTreePane = layoutMode !== 'narrow' || (!hasPrimaryPane && !hasSecondaryPane);
+    const showPrimaryPane = hasPrimaryPane && (wideLayout || !hasSecondaryPane);
+    const showSecondaryPane = hasSecondaryPane;
+    const adaptiveHasDetailPane = showPrimaryPane || showSecondaryPane;
+    const requestedDrawerWidth = wideLayout
+        ? wideDrawerWidth
+        : layoutMode === 'medium'
+            ? PLANNING_DRAWER_TREE_WIDTH_PX + (adaptiveHasDetailPane ? PLANNING_DRAWER_DETAIL_WIDTH_PX : 0)
+            : availableWidth;
+    const drawerWidth = Math.max(0, Math.min(requestedDrawerWidth, availableWidth));
+    const adaptiveDetailWidth = Math.max(0, drawerWidth - (showTreePane ? PLANNING_DRAWER_TREE_WIDTH_PX : 0));
+    const primaryPaneLabel = dedicatedPrimaryEditor
+        ? (dedicatedPrimaryEditor.entityType === 'initiative'
+            ? (dedicatedPrimaryEditor.mode === 'create' ? 'New Initiative' : 'Edit Initiative')
+            : (dedicatedPrimaryEditor.mode === 'create' ? 'New Workstream' : 'Edit Workstream'))
         : (detail?.type === 'initiative' ? 'Initiative' : 'Workstream');
     const secondaryPaneLabel = secondaryPane?.kind === 'editor'
         ? (secondaryPane.editor.mode === 'create' ? 'New Workstream' : 'Edit Workstream')
         : 'Workstream';
+    const primaryArchiveDetail = dedicatedPrimaryEditor ? null : detail;
+    const secondaryArchiveDetail = secondaryPane?.kind === 'detail' ? secondaryPane.detail : null;
+    const toggleArchivedDetailVisibility = React.useCallback((entityType) => {
+        setArchivedDetailVisibility((current) => ({
+            ...current,
+            [entityType]: !current[entityType],
+        }));
+    }, []);
     const resolveParentInitiative = React.useCallback((workstream) => {
         const initiativeId = String(workstream.initiativeId || '').trim();
         if (!initiativeId)
             return null;
         return initiatives.find((initiative) => initiative.id === initiativeId) || null;
     }, [initiatives]);
-    return (_jsx("aside", { style: {
+    const treePaneRef = React.useRef(null);
+    const primaryPaneRef = React.useRef(null);
+    const secondaryPaneRef = React.useRef(null);
+    const initiativeRelationshipPaneRef = React.useRef(null);
+    const workstreamRelationshipPaneRef = React.useRef(null);
+    const previousOpenRef = React.useRef(open);
+    const previousFocusKeyRef = React.useRef('');
+    const focusKey = secondaryInlineEditor
+        ? `secondary:inline-editor:${secondaryInlineEditor.targetId}`
+        : secondaryPane
+            ? `secondary:${secondaryPane.kind}:${secondaryPane.kind === 'detail' ? secondaryPane.detail.item.id : `${secondaryPane.editor.mode}:${secondaryPane.editor.entityType}:${secondaryPane.editor.mode === 'edit' ? secondaryPane.editor.targetId : ''}`}`
+            : primaryInlineEditor
+                ? `primary:inline-editor:${primaryInlineEditor.targetId}`
+                : dedicatedPrimaryEditor
+                    ? `primary:editor:${dedicatedPrimaryEditor.mode}:${dedicatedPrimaryEditor.entityType}:${dedicatedPrimaryEditor.mode === 'edit' ? dedicatedPrimaryEditor.targetId : ''}`
+                    : detail
+                        ? `primary:detail:${detail.type}:${detail.item.id}`
+                        : 'tree';
+    React.useEffect(() => {
+        const wasOpen = previousOpenRef.current;
+        previousOpenRef.current = open;
+        if (wasOpen && !open) {
+            returnFocusRef?.current?.focus();
+            previousFocusKeyRef.current = '';
+            return;
+        }
+        if (!open || (wasOpen && previousFocusKeyRef.current === focusKey))
+            return;
+        previousFocusKeyRef.current = focusKey;
+        const pane = showSecondaryPane
+            ? secondaryPaneRef.current
+            : showPrimaryPane
+                ? primaryPaneRef.current
+                : treePaneRef.current;
+        const frame = window.requestAnimationFrame(() => {
+            const target = pane?.querySelector('[data-planning-editor-title]')
+                || pane?.querySelector('[data-planning-pane-heading]');
+            target?.focus();
+        });
+        return () => window.cancelAnimationFrame(frame);
+    }, [focusKey, open, returnFocusRef, showPrimaryPane, showSecondaryPane]);
+    const handleBackFromPrimary = React.useCallback(() => {
+        if (editor) {
+            onCancelEditor();
+            return;
+        }
+        if (detail?.type === 'initiative')
+            onOpenInitiativeDetails('');
+        if (detail?.type === 'workstream')
+            onOpenWorkstreamDetails('');
+    }, [detail, editor, onCancelEditor, onOpenInitiativeDetails, onOpenWorkstreamDetails]);
+    const paneWidthStyle = React.useCallback((width) => ({
+        flex: `0 0 ${width}px`,
+        width: `${width}px`,
+        minWidth: `${width}px`,
+        maxWidth: `${width}px`,
+    }), []);
+    React.useEffect(() => {
+        onWidthChange?.(drawerWidth);
+    }, [drawerWidth, onWidthChange]);
+    React.useEffect(() => {
+        if (!initiativeRelationshipExpanded)
+            return;
+        initiativeRelationshipPaneRef.current
+            ?.querySelector('[data-planning-pane-heading]')
+            ?.focus();
+    }, [initiativeRelationshipExpanded]);
+    React.useEffect(() => {
+        if (!workstreamRelationshipExpanded)
+            return;
+        workstreamRelationshipPaneRef.current
+            ?.querySelector('[data-planning-pane-heading]')
+            ?.focus();
+    }, [workstreamRelationshipExpanded]);
+    const directWorkstream = detail?.type === 'workstream' ? detail.item : null;
+    const parentInitiative = directWorkstream ? resolveParentInitiative(directWorkstream) : draftInitiativeSummary;
+    const hasInitiativeRelationship = Boolean(parentInitiative || String(directWorkstream?.initiativeId || '').trim());
+    const initiativeRelationship = parentInitiative
+        ? {
+            title: parentInitiative.title,
+            description: directWorkstream
+                ? `${directWorkstream.title} belongs to this initiative.`
+                : 'This workstream will belong to the selected initiative.',
+            action: directWorkstream
+                ? { label: 'Open initiative', onClick: () => onOpenInitiativeDetails(parentInitiative.id) }
+                : undefined,
+        }
+        : directWorkstream && hasInitiativeRelationship
+            ? {
+                title: 'Initiative unavailable',
+                description: `${directWorkstream.title} is assigned to an initiative that is not available in the current planning data.`,
+            }
+            : directWorkstream
+                ? {
+                    title: 'Not linked to an initiative',
+                }
+                : {
+                    title: 'No initiative selected',
+                };
+    const workstreamRelationship = {
+        title: 'No workstream selected',
+    };
+    return (_jsx("aside", { className: panelStyles.drawer, "aria-label": "Planning", "aria-hidden": !open, inert: !open, "data-layout": layoutMode, style: {
             position: 'absolute',
             top: 0,
             left: open ? `${leftOffset}px` : `${leftOffset - drawerWidth - 24}px`,
             bottom: 0,
             width: `${drawerWidth}px`,
-            minWidth: `${drawerWidth}px`,
+            minWidth: 0,
+            maxWidth: `calc(100vw - ${leftOffset}px)`,
             borderRight: '1px solid var(--border-color)',
             background: 'var(--bg-secondary)',
             boxSizing: 'border-box',
@@ -428,26 +1088,45 @@ export function PlanningDrawer({ open, leftOffset = 0, initiatives, standaloneWo
             pointerEvents: open ? 'auto' : 'none',
             transition: 'left 220ms cubic-bezier(0.4, 0, 0.2, 1)',
             willChange: 'left',
-        }, children: _jsxs("div", { className: panelStyles.drawerBody, children: [treeCollapsed ? (_jsx(CollapsedPane, { label: "Planning", onExpand: onExpandTreePane })) : (_jsxs("div", { className: `${panelStyles.paneShell} ${styles.appScrollbar} tf-scrollbar ${panelStyles.treePane} ${hasPrimaryPane && !primaryCollapsed ? panelStyles.treePaneSplit : ''}`.trim(), style: {
-                        flex: `0 0 ${PLANNING_DRAWER_TREE_WIDTH_PX}px`,
-                        width: `${PLANNING_DRAWER_TREE_WIDTH_PX}px`,
-                        minWidth: `${PLANNING_DRAWER_TREE_WIDTH_PX}px`,
-                        maxWidth: `${PLANNING_DRAWER_TREE_WIDTH_PX}px`,
-                    }, children: [_jsxs("div", { className: panelStyles.paneHeader, children: [_jsx("span", { className: panelStyles.paneHeaderLabel, children: "Planning" }), _jsx("button", { type: "button", className: "tf-control-icon", onClick: onCollapseTreePane, children: _jsx(ChevronLeft, { size: 16 }) })] }), _jsx("div", { className: panelStyles.paneContent, children: _jsx(PlanningDrawerList, { initiatives: initiatives, standaloneWorkstreams: standaloneWorkstreams, allStandaloneWorkstreams: allStandaloneWorkstreams, activeInitiativeId: activeInitiativeId, activeWorkstreamId: activeWorkstreamId, expandedInitiativeIds: expandedInitiativeIds, detail: detail, secondaryPane: secondaryPane, onCreateInitiative: onCreateInitiative, onCreateWorkstream: onCreateWorkstream, onToggleInitiative: onToggleInitiative, onSelectInitiative: onSelectInitiative, onSelectWorkstream: onSelectWorkstream, onOpenInitiativeDetails: onOpenInitiativeDetails, onOpenWorkstreamDetails: onOpenWorkstreamDetails }) })] })), hasPrimaryPane && (primaryCollapsed ? (_jsx(CollapsedPane, { label: primaryPaneLabel, onExpand: onExpandPrimaryPane })) : (_jsxs("div", { className: `${panelStyles.paneShell} ${styles.appScrollbar} tf-scrollbar ${panelStyles.detailPane}`.trim(), style: {
-                        flex: `0 0 ${PLANNING_DRAWER_DETAIL_WIDTH_PX}px`,
-                        width: `${PLANNING_DRAWER_DETAIL_WIDTH_PX}px`,
-                        minWidth: `${PLANNING_DRAWER_DETAIL_WIDTH_PX}px`,
-                        maxWidth: `${PLANNING_DRAWER_DETAIL_WIDTH_PX}px`,
-                    }, children: [_jsxs("div", { className: panelStyles.paneHeader, children: [_jsx("span", { className: panelStyles.paneHeaderLabel, children: primaryPaneLabel }), _jsx("button", { type: "button", className: "tf-control-icon", onClick: onCollapsePrimaryPane, children: _jsx(ChevronLeft, { size: 16 }) })] }), _jsx("div", { className: panelStyles.paneContent, children: editor ? (_jsx(PlanningDrawerEditor, { editor: editor, draftTitle: draftTitle, draftDescription: draftDescription, draftOwner: draftOwner, draftInitiativeId: draftInitiativeId, assigneeOptions: assigneeOptions, draftInitiativeSummary: draftInitiativeSummary, onChangeDraftTitle: onChangeDraftTitle, onChangeDraftDescription: onChangeDraftDescription, onChangeDraftOwner: onChangeDraftOwner, onChangeDraftInitiativeId: onChangeDraftInitiativeId, onCancel: onCancelEditor, onSubmit: onSubmitEditor, isSubmitting: isSubmittingEditor, onAssignInitiativeToWorkstream: onAssignInitiativeToWorkstream })) : detail ? (_jsx(PlanningDrawerDetailView, { detail: detail, currentWorkspaceId: currentWorkspaceId, assigneeOptions: assigneeOptions, onOpenNestedWorkstreamDetails: detail.type === 'initiative' ? onOpenNestedWorkstreamDetails : undefined, onCreateTaskInWorkstream: detail.type === 'workstream' ? onCreateTaskInWorkstream : undefined, onCreateWorkstreamInInitiative: detail.type === 'initiative' ? onCreateWorkstreamInInitiative : undefined, onOpenTaskById: detail.type === 'workstream' ? onOpenTaskById : undefined, onRemoveTaskFromWorkstream: detail.type === 'workstream' ? onRemoveTaskFromWorkstream : undefined, onAssignInitiativeToWorkstream: onAssignInitiativeToWorkstream, onAttachTaskToWorkstreamByReference: detail.type === 'workstream' ? onAttachTaskToWorkstreamByReference : undefined, onAttachWorkstreamToInitiativeByReference: detail.type === 'initiative' ? onAttachWorkstreamToInitiativeByReference : undefined, parentInitiative: detail.type === 'workstream' ? resolveParentInitiative(detail.item) : null, onEdit: () => detail.type === 'initiative'
+        }, children: _jsxs("div", { className: panelStyles.drawerBody, children: [showTreePane && (effectiveTreeCollapsed ? (_jsx(CollapsedPane, { label: "Planning", onExpand: onExpandTreePane })) : (_jsxs("div", { ref: treePaneRef, "data-planning-pane": "tree", className: `${panelStyles.paneShell} ${styles.appScrollbar} tf-scrollbar ${panelStyles.treePane} ${hasPrimaryPane && !primaryCollapsed ? panelStyles.treePaneSplit : ''}`.trim(), style: paneWidthStyle(layoutMode === 'narrow' ? drawerWidth : PLANNING_DRAWER_TREE_WIDTH_PX), children: [_jsxs("div", { className: panelStyles.paneHeader, children: [_jsx("h2", { className: panelStyles.paneHeaderLabel, tabIndex: -1, "data-planning-pane-heading": true, children: "Planning" }), _jsxs("div", { className: panelStyles.headerActionGroup, children: [_jsx(ArchiveVisibilityToggle, { visible: showArchivedPlanning, disabled: taskScope === 'deleted' || archivedPlanningItemCount === 0, disabledLabel: taskScope === 'deleted' ? 'Archive visibility unavailable in Trash' : undefined, itemLabel: "planning items", onToggle: () => setShowArchivedPlanning((current) => !current) }), wideLayout ? (_jsx("button", { type: "button", className: "tf-control-icon", onClick: onCollapseTreePane, "aria-label": "Collapse Planning pane", title: "Collapse Planning pane", children: _jsx(ChevronLeft, { size: 16, "aria-hidden": "true" }) })) : null] })] }), _jsx("div", { className: panelStyles.paneContent, "aria-busy": planningLoadState.status === 'loading' || planningLoadState.isRefreshing, children: _jsx(PlanningDrawerList, { initiatives: initiatives, standaloneWorkstreams: standaloneWorkstreams, planningLoadState: planningLoadState, taskScope: taskScope, showArchivedPlanning: showArchivedPlanning, currentOwnerId: currentOwnerId, assigneeOptions: assigneeOptions, showTaskCardStatusLabel: showTaskCardStatusLabel, taskArrangeMode: taskArrangeMode, activeInitiativeId: activeInitiativeId, activeWorkstreamId: activeWorkstreamId, navigatorSort: navigatorSort, navigatorSortReady: navigatorSortReady, onNavigatorSortChange: onNavigatorSortChange, planningFavorites: planningFavorites, onTogglePlanningFavorite: onTogglePlanningFavorite, favoritesSectionCollapsed: favoritesSectionCollapsed, initiativesSectionCollapsed: initiativesSectionCollapsed, workstreamsSectionCollapsed: workstreamsSectionCollapsed, onToggleFavoritesSection: onToggleFavoritesSection, onToggleInitiativesSection: onToggleInitiativesSection, onToggleWorkstreamsSection: onToggleWorkstreamsSection, expandedInitiativeIds: expandedInitiativeIds, detail: detail, secondaryPane: secondaryPane, onCreateInitiative: onCreateInitiative, onCreateWorkstream: onCreateWorkstream, onToggleInitiative: onToggleInitiative, onSelectInitiative: onSelectInitiative, onSelectWorkstream: onSelectWorkstream, onOpenInitiativeDetails: onOpenInitiativeDetails, onOpenWorkstreamDetails: onOpenWorkstreamDetails, onOpenNestedWorkstreamDetails: onOpenNestedWorkstreamDetails, onOpenTaskById: onOpenTaskById, onSetTaskStatus: onSetTaskStatus, onChangePlanningOwner: onChangePlanningOwner, onChangeTaskAssignee: onChangeTaskAssignee, onArchivePlanningTask: onArchivePlanningTask, onArchiveResolvedWorkstream: onArchiveResolvedWorkstream, onArchiveResolvedInitiative: onArchiveResolvedInitiative, linkOptions: linkOptions, onAssignInitiativeToWorkstream: onAssignInitiativeToWorkstream, onRetryPlanning: onRetryPlanning }) })] }))), wideLayout && !primaryIsInitiative && (initiativeRelationshipExpanded ? (_jsx(RelationshipPane, { label: "Initiative", title: initiativeRelationship.title, description: initiativeRelationship.description, action: initiativeRelationship.action, onCollapse: () => setInitiativeRelationshipExpanded(false), paneRef: initiativeRelationshipPaneRef })) : (_jsx(CollapsedPane, { label: "Initiative", muted: !hasInitiativeRelationship, onExpand: () => setInitiativeRelationshipExpanded(true) }))), showPrimaryPane && (effectivePrimaryCollapsed ? (_jsx(CollapsedPane, { label: primaryEntityType === 'initiative' ? 'Initiative' : 'Workstream', onExpand: onExpandPrimaryPane })) : (_jsxs("div", { ref: primaryPaneRef, "data-planning-pane": "primary", className: `${panelStyles.paneShell} ${styles.appScrollbar} tf-scrollbar ${panelStyles.detailPane}`.trim(), style: paneWidthStyle(wideLayout ? PLANNING_DRAWER_DETAIL_WIDTH_PX : adaptiveDetailWidth), children: [_jsxs("div", { className: panelStyles.paneHeader, children: [layoutMode === 'narrow' ? (_jsx("button", { type: "button", className: "tf-control-icon", onClick: handleBackFromPrimary, "aria-label": "Back to Planning", title: "Back to Planning", children: _jsx(ChevronLeft, { size: 16, "aria-hidden": "true" }) })) : null, _jsx("h2", { className: panelStyles.paneHeaderLabel, tabIndex: -1, "data-planning-pane-heading": true, children: primaryPaneLabel }), _jsxs("div", { className: panelStyles.headerActionGroup, children: [primaryArchiveDetail ? (_jsx(ArchiveVisibilityToggle, { visible: archivedDetailVisibility[primaryArchiveDetail.type], disabled: countArchivedDetailChildren(primaryArchiveDetail) === 0, itemLabel: primaryArchiveDetail.type === 'initiative' ? 'workstreams' : 'tasks', onToggle: () => toggleArchivedDetailVisibility(primaryArchiveDetail.type) })) : null, wideLayout ? (_jsx("button", { type: "button", className: "tf-control-icon", onClick: onCollapsePrimaryPane, "aria-label": `Collapse ${primaryPaneLabel} pane`, title: `Collapse ${primaryPaneLabel} pane`, children: _jsx(ChevronLeft, { size: 16, "aria-hidden": "true" }) })) : null] })] }), _jsx("div", { className: panelStyles.paneContent, "aria-busy": primaryHydrationState?.status === 'loading', children: dedicatedPrimaryEditor ? (_jsx(PlanningDrawerEditor, { editor: dedicatedPrimaryEditor, draftTitle: draftTitle, draftDescription: draftDescription, draftOwner: draftOwner, draftInitiativeId: draftInitiativeId, assigneeOptions: assigneeOptions, initiativeLinkOptions: linkOptions.initiatives, draftInitiativeSummary: draftInitiativeSummary, onChangeDraftTitle: onChangeDraftTitle, onChangeDraftDescription: onChangeDraftDescription, onChangeDraftOwner: onChangeDraftOwner, onChangeDraftInitiativeId: onChangeDraftInitiativeId, onCancel: onCancelEditor, onSubmit: onSubmitEditor, isSubmitting: isSubmittingEditor })) : detail ? (_jsx(PlanningDrawerDetailView, { detail: detail, showArchivedChildren: archivedDetailVisibility[detail.type], inlineEditor: primaryInlineEditor ? {
+                                    editor: primaryInlineEditor,
+                                    draftTitle,
+                                    draftDescription,
+                                    draftOwner,
+                                    draftInitiativeId,
+                                    draftInitiativeSummary,
+                                    onChangeDraftTitle,
+                                    onChangeDraftDescription,
+                                    onChangeDraftOwner,
+                                    onChangeDraftInitiativeId,
+                                    onCancel: onCancelEditor,
+                                    onSubmit: onSubmitEditor,
+                                    isSubmitting: isSubmittingEditor,
+                                } : null, selectedChildWorkstreamId: secondaryPane?.kind === 'detail'
+                                    ? secondaryPane.detail.item.id
+                                    : null, currentWorkspaceId: currentWorkspaceId, currentActorId: currentOwnerId, theme: theme, assigneeOptions: assigneeOptions, linkOptions: linkOptions, showTaskCardStatusLabel: showTaskCardStatusLabel, taskArrangeMode: taskArrangeMode, onTaskArrangeModeChange: onTaskArrangeModeChange, onReorderWorkstreamTasks: onReorderWorkstreamTasks, hydrationState: primaryHydrationState, onRetryHydration: onRetryPrimaryHydration, onSetTaskStatus: detail.type === 'workstream' ? onSetTaskStatus : undefined, onArchivePlanningTask: detail.type === 'workstream' ? onArchivePlanningTask : undefined, onArchiveResolvedWorkstream: detail.type === 'initiative' ? onArchiveResolvedWorkstream : undefined, onArchiveResolvedEntity: detail.type === 'initiative'
+                                    ? onArchiveResolvedInitiative
+                                    : onArchiveResolvedWorkstream, onOpenNestedWorkstreamDetails: detail.type === 'initiative' ? onOpenNestedWorkstreamDetails : undefined, onCreateTaskInWorkstream: detail.type === 'workstream' ? onCreateTaskInWorkstream : undefined, onCreateWorkstreamInInitiative: detail.type === 'initiative' ? onCreateWorkstreamInInitiative : undefined, onOpenTaskById: detail.type === 'workstream' ? onOpenTaskById : undefined, onChangeTaskAssignee: detail.type === 'workstream' ? onChangeTaskAssignee : undefined, taskReferences: taskReferences, onAssignTaskToWorkstream: detail.type === 'workstream' ? onAssignTaskToWorkstream : undefined, onAssignInitiativeToWorkstream: onAssignInitiativeToWorkstream, onAttachTaskToWorkstreamByReference: detail.type === 'workstream' ? onAttachTaskToWorkstreamByReference : undefined, onAttachWorkstreamToInitiativeByReference: detail.type === 'initiative' ? onAttachWorkstreamToInitiativeByReference : undefined, parentInitiative: detail.type === 'workstream' ? resolveParentInitiative(detail.item) : null, onEdit: () => detail.type === 'initiative'
                                     ? onEditInitiative(detail.item.id)
-                                    : onEditWorkstream(detail.item.id), onArchive: () => detail.type === 'initiative'
+                                    : onEditWorkstream(detail.item.id), onChangeOwner: (ownerId) => onChangePlanningOwner(detail.type, detail.item.id, ownerId), onChangePlanningOwner: onChangePlanningOwner, onArchive: () => detail.type === 'initiative'
                                     ? onArchiveInitiative(detail.item.id)
                                     : onArchiveWorkstream(detail.item.id), onUnarchive: () => detail.type === 'initiative'
                                     ? onUnarchiveInitiative(detail.item.id)
-                                    : onUnarchiveWorkstream(detail.item.id), onAddPlanningContextFile: onAddPlanningContextFile, onRemovePlanningContextFile: onRemovePlanningContextFile, onUpdatePlanningContextCaption: onUpdatePlanningContextCaption })) : null })] }))), hasSecondaryPane && (secondaryCollapsed ? (_jsx(CollapsedPane, { label: secondaryPaneLabel, onExpand: onExpandSecondaryPane })) : (_jsxs("div", { className: `${panelStyles.paneShell} ${styles.appScrollbar} tf-scrollbar ${panelStyles.detailPane}`.trim(), style: {
-                        flex: `0 0 ${PLANNING_DRAWER_DETAIL_WIDTH_PX}px`,
-                        width: `${PLANNING_DRAWER_DETAIL_WIDTH_PX}px`,
-                        minWidth: `${PLANNING_DRAWER_DETAIL_WIDTH_PX}px`,
-                        maxWidth: `${PLANNING_DRAWER_DETAIL_WIDTH_PX}px`,
-                    }, children: [_jsxs("div", { className: panelStyles.paneHeader, children: [_jsx("span", { className: panelStyles.paneHeaderLabel, children: secondaryPaneLabel }), _jsx("button", { type: "button", className: "tf-control-icon", onClick: onCollapseSecondaryPane, children: _jsx(ChevronLeft, { size: 16 }) })] }), _jsx("div", { className: panelStyles.paneContent, children: secondaryPane?.kind === 'editor' ? (_jsx(PlanningDrawerEditor, { editor: secondaryPane.editor, draftTitle: draftTitle, draftDescription: draftDescription, draftOwner: draftOwner, draftInitiativeId: draftInitiativeId, assigneeOptions: assigneeOptions, draftInitiativeSummary: draftInitiativeSummary, onChangeDraftTitle: onChangeDraftTitle, onChangeDraftDescription: onChangeDraftDescription, onChangeDraftOwner: onChangeDraftOwner, onChangeDraftInitiativeId: onChangeDraftInitiativeId, onCancel: onBackFromSecondary, onSubmit: onSubmitEditor, isSubmitting: isSubmittingEditor, onAssignInitiativeToWorkstream: onAssignInitiativeToWorkstream })) : secondaryPane ? (_jsx(PlanningDrawerDetailView, { detail: secondaryPane.detail, currentWorkspaceId: currentWorkspaceId, assigneeOptions: assigneeOptions, onCreateTaskInWorkstream: onCreateTaskInWorkstream, onOpenTaskById: onOpenTaskById, onRemoveTaskFromWorkstream: onRemoveTaskFromWorkstream, onAssignInitiativeToWorkstream: onAssignInitiativeToWorkstream, onAttachTaskToWorkstreamByReference: onAttachTaskToWorkstreamByReference, parentInitiative: resolveParentInitiative(secondaryPane.detail.item), onEdit: () => onEditWorkstream(secondaryPane.detail.item.id), onArchive: () => onArchiveWorkstream(secondaryPane.detail.item.id), onUnarchive: () => onUnarchiveWorkstream(secondaryPane.detail.item.id), onAddPlanningContextFile: onAddPlanningContextFile, onRemovePlanningContextFile: onRemovePlanningContextFile, onUpdatePlanningContextCaption: onUpdatePlanningContextCaption })) : null })] })))] }) }));
+                                    : onUnarchiveWorkstream(detail.item.id), onAddPlanningContextFile: onAddPlanningContextFile, onRemovePlanningContextFile: onRemovePlanningContextFile, onUpdatePlanningContextCaption: onUpdatePlanningContextCaption })) : null })] }))), wideLayout && !primaryIsWorkstream && !hasSecondaryPane && (workstreamRelationshipExpanded ? (_jsx(RelationshipPane, { label: "Workstream", title: workstreamRelationship.title, description: workstreamRelationship.description, action: workstreamRelationship.action, onCollapse: () => setWorkstreamRelationshipExpanded(false), paneRef: workstreamRelationshipPaneRef })) : (_jsx(CollapsedPane, { label: "Workstream", muted: true, onExpand: () => setWorkstreamRelationshipExpanded(true) }))), showSecondaryPane && (effectiveSecondaryCollapsed ? (_jsx(CollapsedPane, { label: "Workstream", onExpand: onExpandSecondaryPane })) : (_jsxs("div", { ref: secondaryPaneRef, "data-planning-pane": "secondary", className: `${panelStyles.paneShell} ${styles.appScrollbar} tf-scrollbar ${panelStyles.detailPane}`.trim(), style: paneWidthStyle(wideLayout ? PLANNING_DRAWER_DETAIL_WIDTH_PX : adaptiveDetailWidth), children: [_jsxs("div", { className: panelStyles.paneHeader, children: [!wideLayout ? (_jsx("button", { type: "button", className: "tf-control-icon", onClick: secondaryInlineEditor
+                                        ? (onCancelSecondaryEditor || onBackFromSecondary)
+                                        : onBackFromSecondary, "aria-label": secondaryInlineEditor ? 'Cancel workstream editing' : `Back to ${primaryPaneLabel}`, title: secondaryInlineEditor ? 'Cancel workstream editing' : `Back to ${primaryPaneLabel}`, children: _jsx(ChevronLeft, { size: 16, "aria-hidden": "true" }) })) : null, _jsx("h2", { className: panelStyles.paneHeaderLabel, tabIndex: -1, "data-planning-pane-heading": true, children: secondaryPaneLabel }), _jsxs("div", { className: panelStyles.headerActionGroup, children: [secondaryArchiveDetail ? (_jsx(ArchiveVisibilityToggle, { visible: archivedDetailVisibility.workstream, disabled: countArchivedDetailChildren(secondaryArchiveDetail) === 0, itemLabel: "tasks", onToggle: () => toggleArchivedDetailVisibility('workstream') })) : null, wideLayout ? (_jsx("button", { type: "button", className: "tf-control-icon", onClick: onCollapseSecondaryPane, "aria-label": `Collapse ${secondaryPaneLabel} pane`, title: `Collapse ${secondaryPaneLabel} pane`, children: _jsx(ChevronLeft, { size: 16, "aria-hidden": "true" }) })) : null] })] }), _jsx("div", { className: panelStyles.paneContent, "aria-busy": secondaryHydrationState?.status === 'loading', children: secondaryPane?.kind === 'editor' ? (_jsx(PlanningDrawerEditor, { editor: secondaryPane.editor, draftTitle: draftTitle, draftDescription: draftDescription, draftOwner: draftOwner, draftInitiativeId: draftInitiativeId, assigneeOptions: assigneeOptions, initiativeLinkOptions: linkOptions.initiatives, draftInitiativeSummary: draftInitiativeSummary, onChangeDraftTitle: onChangeDraftTitle, onChangeDraftDescription: onChangeDraftDescription, onChangeDraftOwner: onChangeDraftOwner, onChangeDraftInitiativeId: onChangeDraftInitiativeId, onCancel: onBackFromSecondary, onSubmit: onSubmitEditor, isSubmitting: isSubmittingEditor })) : secondaryPane ? (_jsx(PlanningDrawerDetailView, { detail: secondaryPane.detail, showArchivedChildren: archivedDetailVisibility.workstream, inlineEditor: secondaryInlineEditor ? {
+                                    editor: secondaryInlineEditor,
+                                    draftTitle,
+                                    draftDescription,
+                                    draftOwner,
+                                    draftInitiativeId,
+                                    draftInitiativeSummary,
+                                    onChangeDraftTitle,
+                                    onChangeDraftDescription,
+                                    onChangeDraftOwner,
+                                    onChangeDraftInitiativeId,
+                                    onCancel: onCancelSecondaryEditor || onBackFromSecondary,
+                                    onSubmit: onSubmitEditor,
+                                    isSubmitting: isSubmittingEditor,
+                                } : null, currentWorkspaceId: currentWorkspaceId, currentActorId: currentOwnerId, theme: theme, assigneeOptions: assigneeOptions, linkOptions: linkOptions, showTaskCardStatusLabel: showTaskCardStatusLabel, taskArrangeMode: taskArrangeMode, onTaskArrangeModeChange: onTaskArrangeModeChange, onReorderWorkstreamTasks: onReorderWorkstreamTasks, hydrationState: secondaryHydrationState, onRetryHydration: onRetrySecondaryHydration, onSetTaskStatus: onSetTaskStatus, onArchivePlanningTask: onArchivePlanningTask, onArchiveResolvedEntity: onArchiveResolvedWorkstream, onCreateTaskInWorkstream: onCreateTaskInWorkstream, onOpenTaskById: onOpenTaskById, onChangeTaskAssignee: onChangeTaskAssignee, taskReferences: taskReferences, onAssignTaskToWorkstream: onAssignTaskToWorkstream, onAssignInitiativeToWorkstream: onAssignInitiativeToWorkstream, onAttachTaskToWorkstreamByReference: onAttachTaskToWorkstreamByReference, parentInitiative: resolveParentInitiative(secondaryPane.detail.item), onEdit: () => onEditWorkstream(secondaryPane.detail.item.id), onChangeOwner: (ownerId) => onChangePlanningOwner('workstream', secondaryPane.detail.item.id, ownerId), onChangePlanningOwner: onChangePlanningOwner, onArchive: () => onArchiveWorkstream(secondaryPane.detail.item.id), onUnarchive: () => onUnarchiveWorkstream(secondaryPane.detail.item.id), onAddPlanningContextFile: onAddPlanningContextFile, onRemovePlanningContextFile: onRemovePlanningContextFile, onUpdatePlanningContextCaption: onUpdatePlanningContextCaption })) : null })] })))] }) }));
 }