@taskforcehq/taskforce 0.3.326 → 0.3.328

package/dist/components/features/planning/PlanningModule.js

@@ -0,0 +1,588 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { AlertTriangle, Archive, ArrowUpDown, ChevronLeft, Eye, EyeOff, Filter, Link2, Loader2, Pencil, Plus, RotateCcw, Search, Unlink, X, } from 'lucide-react';
+import { TASK_ASSIGNEE_UNASSIGNED_COLOR, TASK_ASSIGNEE_UNASSIGNED_ICON, } from '../../../utils/assignees';
+import { resolvePlanningArchiveDetailState } from '../../../utils/planningArchivePresentation';
+import { formatInitiativeReference, formatWorkstreamReference, } from '../../../utils/planningReferences';
+import { getTaskReferenceLabel } from '../../../utils/taskReferences';
+import { HierarchyActionBadge } from '../../ui/HierarchyActionBadge';
+import { TaxonomyDropdown } from '../../ui/TaxonomyDropdown';
+import { PlanningOwnerDropdown, normalizePlanningOwnerOptions, } from './PlanningOwnerDropdown';
+import { buildPlanningNavigatorResults, PLANNING_NAVIGATOR_SORT_OPTIONS, } from './planningNavigator';
+import { PlanningEntitySummary, PlanningReferenceBadge, } from './PlanningEntitySummary';
+import { PlanningVisualIdentity } from './PlanningVisualIdentity';
+import { PlanningTaskCard } from './PlanningTaskCard';
+import { PlanningTaskArrangeControl } from './PlanningTaskArrangeControl';
+import planningDropdownStyles from './PlanningDropdownControl.module.css';
+import { PlanningTaskOrderList } from './PlanningTaskOrderList';
+import { arrangePlanningTasks, mergeVisiblePlanningTaskOrder } from './planningTaskArrangement';
+import { PlanningArchiveConfirmation } from './PlanningArchiveConfirmation';
+import { PlanningUnlinkConfirmation, } from './PlanningUnlinkConfirmation';
+import { PlanningLinkPicker } from './PlanningLinkPicker';
+import { PlanningEntityActivity, PlanningEntityContext, PlanningEntityDescription, } from './PlanningEntityDetails';
+import styles from './PlanningModule.module.css';
+function PlanningWorkspaceEditor({ entityType, mode, initialTitle = '', initialDescription = '', ownerOptions, fixedInitiativeId, formId, showActions = true, onSavingChange, onCancel, onSave, }) {
+    const label = entityType === 'initiative' ? 'Initiative' : 'Workstream';
+    const titleInputId = React.useId();
+    const titleErrorId = React.useId();
+    const descriptionInputId = React.useId();
+    const titleInputRef = React.useRef(null);
+    const [title, setTitle] = React.useState(initialTitle);
+    const [description, setDescription] = React.useState(initialDescription);
+    const [ownerId, setOwnerId] = React.useState('');
+    const [icon, setIcon] = React.useState(null);
+    const [color, setColor] = React.useState(null);
+    const [titleError, setTitleError] = React.useState(null);
+    const [saveError, setSaveError] = React.useState(null);
+    const [isSaving, setIsSaving] = React.useState(false);
+    React.useEffect(() => {
+        titleInputRef.current?.focus();
+    }, []);
+    const handleSubmit = async (event) => {
+        event.preventDefault();
+        if (isSaving)
+            return;
+        const normalizedTitle = title.trim();
+        if (!normalizedTitle) {
+            setTitleError(`${label} title is required.`);
+            titleInputRef.current?.focus();
+            return;
+        }
+        setTitleError(null);
+        setSaveError(null);
+        setIsSaving(true);
+        onSavingChange?.(true);
+        try {
+            await onSave({
+                title: normalizedTitle,
+                description: description.trim() || null,
+                ...(mode === 'create' ? { ownerId: ownerId.trim() || null } : {}),
+                ...(entityType === 'workstream' && mode === 'create'
+                    ? { initiativeId: fixedInitiativeId || null }
+                    : {}),
+                ...(mode === 'create' && (icon || color) ? { icon, color } : {}),
+            });
+        }
+        catch (error) {
+            setSaveError(error instanceof Error ? error.message : `Failed to save ${label.toLowerCase()}.`);
+        }
+        finally {
+            setIsSaving(false);
+            onSavingChange?.(false);
+        }
+    };
+    return (_jsxs("form", { id: formId, className: styles.workspaceEditor, onSubmit: (event) => void handleSubmit(event), onKeyDown: (event) => {
+            if (event.key !== 'Escape' || isSaving)
+                return;
+            event.preventDefault();
+            onCancel();
+        }, noValidate: true, children: [mode === 'create' ? (_jsxs("div", { className: styles.workspaceEditorIdentity, children: [_jsx(PlanningVisualIdentity, { entityType: entityType, entityId: "create-preview", icon: icon, color: color || 'blue', size: "detail", onChange: (patch) => {
+                            if (Object.prototype.hasOwnProperty.call(patch, 'icon'))
+                                setIcon(patch.icon ?? null);
+                            if (Object.prototype.hasOwnProperty.call(patch, 'color'))
+                                setColor(patch.color ?? null);
+                        } }), _jsx("span", { children: "Choose an icon and color" })] })) : null, _jsxs("div", { className: styles.workspaceEditorField, children: [_jsxs("label", { htmlFor: titleInputId, children: [label, " title"] }), _jsx("input", { ref: titleInputRef, id: titleInputId, value: title, disabled: isSaving, required: true, "aria-invalid": titleError ? 'true' : undefined, "aria-describedby": titleError ? titleErrorId : undefined, onChange: (event) => {
+                            setTitle(event.target.value);
+                            if (titleError)
+                                setTitleError(null);
+                        }, placeholder: entityType === 'initiative' ? 'Enter initiative title' : 'Enter workstream title' }), titleError ? _jsx("p", { id: titleErrorId, className: "tf-text-error", children: titleError }) : null] }), _jsxs("div", { className: styles.workspaceEditorField, children: [_jsxs("label", { htmlFor: descriptionInputId, children: [label, " description"] }), _jsx("textarea", { id: descriptionInputId, value: description, disabled: isSaving, rows: 5, onChange: (event) => setDescription(event.target.value), placeholder: entityType === 'initiative'
+                            ? 'Describe the broader outcome this initiative is meant to achieve.'
+                            : 'Describe the lane of work this workstream will coordinate.' })] }), mode === 'create' && ownerOptions ? (_jsxs("div", { className: styles.workspaceEditorField, children: [_jsxs("span", { children: [label, " owner"] }), _jsx(PlanningOwnerDropdown, { value: ownerId, options: ownerOptions, onChange: setOwnerId, disabled: isSaving, ariaLabel: `${label} owner`, className: `${planningDropdownStyles.control} ${styles.selectedEntityOwnerDropdown}` })] })) : null, saveError ? _jsx("p", { className: "tf-text-error", role: "alert", children: saveError }) : null, showActions ? _jsxs("div", { className: styles.workspaceEditorActions, children: [_jsx("button", { type: "button", className: "tf-button-secondary tf-button-compact", onClick: onCancel, disabled: isSaving, children: "Cancel" }), _jsxs("button", { type: "submit", className: "tf-button-primary tf-button-compact", disabled: isSaving, children: [isSaving ? _jsx(Loader2, { size: 14, className: styles.spinner, "aria-hidden": "true" }) : null, mode === 'create' ? `Create ${label}` : 'Save'] })] }) : null] }));
+}
+function InitiativeButton({ initiative, ownerOption, ownerOptions, workstreamCount, selected, onSelect, onChangeOwner, onChangeIdentity, }) {
+    return (_jsxs("div", { className: `${styles.entityCard} ${initiative.isArchived ? styles.entityCardArchived : ''} ${selected ? styles.entityCardSelected : ''}`.trim(), children: [_jsx(PlanningReferenceBadge, { label: formatInitiativeReference(initiative), entityType: "initiative", entityName: initiative.title, interactive: false }), _jsx("div", { className: styles.entityCardBody, children: _jsx("div", { role: "button", tabIndex: 0, className: styles.entityCardContentButton, onClick: onSelect, onKeyDown: (event) => {
+                        if (event.key !== 'Enter' && event.key !== ' ')
+                            return;
+                        event.preventDefault();
+                        onSelect();
+                    }, "aria-pressed": selected, children: _jsx(PlanningEntitySummary, { item: initiative, entityType: "initiative", workstreamCount: workstreamCount, ownerOption: ownerOption, ownerOptions: ownerOptions, onChangeOwner: onChangeOwner, onChangeIdentity: onChangeIdentity }) }) })] }));
+}
+function WorkstreamButton({ workstream, ownerOption, ownerOptions, selected, onSelect, onChangeOwner, onChangeIdentity, referenceAction, feedback, }) {
+    const referenceLabel = formatWorkstreamReference(workstream);
+    return (_jsxs("div", { className: `${styles.entityCard} ${workstream.isArchived ? styles.entityCardArchived : ''} ${selected ? styles.entityCardSelected : ''}`.trim(), children: [_jsxs("div", { className: styles.entityCardTopRow, children: [referenceAction, _jsx(PlanningReferenceBadge, { label: referenceLabel || 'Reference pending', entityType: "workstream", entityName: workstream.title, interactive: false, pending: !referenceLabel })] }), feedback, _jsx("div", { className: styles.entityCardBody, children: _jsx("div", { role: "button", tabIndex: 0, className: styles.entityCardContentButton, onClick: onSelect, onKeyDown: (event) => {
+                        if (event.key !== 'Enter' && event.key !== ' ')
+                            return;
+                        event.preventDefault();
+                        onSelect();
+                    }, "aria-pressed": selected, children: _jsx(PlanningEntitySummary, { item: workstream, entityType: "workstream", ownerOption: ownerOption, ownerOptions: ownerOptions, onChangeOwner: onChangeOwner, onChangeIdentity: onChangeIdentity }) }) })] }));
+}
+function SelectedEntityContext({ item, entityType, ownerOptions, onChangeOwner, onChangeIdentity, workspaceId, currentActorId, taskReferences, hydrationState, onRetryHydration, onAddContextFile, onRemoveContextFile, onUpdateContextCaption, onUpdate, onArchive, onUnarchive, referenceAction, relationshipActions, relationshipContent, }) {
+    const label = entityType === 'initiative' ? 'Initiative' : 'Workstream';
+    const referenceLabel = entityType === 'initiative'
+        ? formatInitiativeReference(item)
+        : formatWorkstreamReference(item);
+    const [ownerValue, setOwnerValue] = React.useState(String(item.ownerId || ''));
+    const [isSavingOwner, setIsSavingOwner] = React.useState(false);
+    const [isEditing, setIsEditing] = React.useState(false);
+    const [isEditingSaving, setIsEditingSaving] = React.useState(false);
+    const [archiveConfirmationVisible, setArchiveConfirmationVisible] = React.useState(false);
+    const [archiveBusy, setArchiveBusy] = React.useState(false);
+    const editFormId = React.useId();
+    const archiveState = resolvePlanningArchiveDetailState({
+        entityType,
+        isArchived: item.isArchived,
+        taskCount: item.taskCount,
+        completedTaskCount: item.completedTaskCount,
+        archiveReady: item.archiveReady,
+        activeWorkstreamCount: item.archiveActiveWorkstreamCount,
+    });
+    const archiveActionLabel = archiveState.mode === 'archived'
+        ? `Unarchive ${label.toLowerCase()}`
+        : archiveState.mode === 'blocked'
+            ? `Archive unavailable — active ${archiveState.remainingKind === 'task' ? 'tasks' : 'workstreams'} remain`
+            : archiveState.mode === 'checking'
+                ? 'Archive availability is still loading'
+                : `Archive ${label.toLowerCase()}`;
+    React.useEffect(() => {
+        setOwnerValue(String(item.ownerId || ''));
+        setIsSavingOwner(false);
+    }, [item.id, item.ownerId]);
+    React.useEffect(() => {
+        setIsEditing(false);
+        setIsEditingSaving(false);
+        setArchiveConfirmationVisible(false);
+        setArchiveBusy(false);
+    }, [item.id]);
+    const handleOwnerChange = async (nextOwnerId) => {
+        if (!onChangeOwner || item.isArchived || isSavingOwner || nextOwnerId === ownerValue)
+            return;
+        const previousOwnerId = ownerValue;
+        setOwnerValue(nextOwnerId);
+        setIsSavingOwner(true);
+        try {
+            await onChangeOwner(nextOwnerId);
+        }
+        catch {
+            setOwnerValue(previousOwnerId);
+        }
+        finally {
+            setIsSavingOwner(false);
+        }
+    };
+    const handleArchiveAction = async () => {
+        if (archiveBusy)
+            return;
+        if (archiveState.mode === 'ready') {
+            setArchiveConfirmationVisible(true);
+            return;
+        }
+        const action = archiveState.mode === 'archived' ? onUnarchive : onArchive;
+        if (!action || archiveState.mode === 'blocked' || archiveState.mode === 'checking')
+            return;
+        setArchiveBusy(true);
+        try {
+            await action();
+        }
+        finally {
+            setArchiveBusy(false);
+        }
+    };
+    const handleConfirmArchive = async () => {
+        if (!onArchive || archiveBusy)
+            return;
+        setArchiveBusy(true);
+        try {
+            const archived = await onArchive();
+            if (archived !== false)
+                setArchiveConfirmationVisible(false);
+        }
+        finally {
+            setArchiveBusy(false);
+        }
+    };
+    return (_jsxs("section", { className: `${styles.selectedEntityContext} ${item.isArchived ? styles.selectedEntityContextArchived : ''}`.trim(), "aria-label": `Selected ${label.toLowerCase()}`, "aria-busy": hydrationState?.status === 'loading', children: [_jsxs("div", { className: styles.selectedEntityReferenceRow, children: [_jsxs("div", { className: styles.selectedEntityReferenceIdentity, children: [_jsx(PlanningVisualIdentity, { entityType: entityType, entityId: item.id, icon: item.icon, color: item.color, size: "detail", disabled: Boolean(item.isArchived), onChange: onChangeIdentity
+                                    ? (patch) => onChangeIdentity(entityType, item.id, patch)
+                                    : undefined }), referenceAction, _jsx(PlanningReferenceBadge, { label: referenceLabel || 'Reference pending', entityType: entityType, entityName: item.title, interactive: false, pending: !referenceLabel })] }), _jsxs("div", { className: styles.selectedEntityReferenceActions, children: [_jsx("span", { children: label }), relationshipActions, !isEditing && (onArchive || onUnarchive) ? (_jsx("button", { type: "button", className: "tf-control-icon", disabled: archiveBusy
+                                    || archiveState.mode === 'blocked'
+                                    || archiveState.mode === 'checking'
+                                    || (archiveState.mode === 'archived' ? !onUnarchive : !onArchive), onClick: () => void handleArchiveAction(), "aria-label": archiveActionLabel, title: archiveActionLabel, "aria-expanded": archiveState.mode === 'ready'
+                                    ? archiveConfirmationVisible
+                                    : undefined, children: archiveState.mode === 'archived'
+                                    ? _jsx(RotateCcw, { size: 14, "aria-hidden": "true" })
+                                    : _jsx(Archive, { size: 14, "aria-hidden": "true" }) })) : null, !isEditing && !item.isArchived && onUpdate ? (_jsx("button", { type: "button", className: "tf-control-icon", onClick: () => setIsEditing(true), "aria-label": `Edit ${label.toLowerCase()}`, title: `Edit ${label.toLowerCase()}`, children: _jsx(Pencil, { size: 14, "aria-hidden": "true" }) })) : null, isEditing ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "tf-button-secondary tf-button-compact", onClick: () => setIsEditing(false), disabled: isEditingSaving, children: "Cancel" }), _jsx("button", { type: "submit", form: editFormId, className: "tf-button-primary tf-button-compact", disabled: isEditingSaving, children: "Save" })] })) : null] })] }), archiveConfirmationVisible && archiveState.mode === 'ready' ? (_jsx(PlanningArchiveConfirmation, { entityType: entityType, title: item.title, activeTaskCount: item.archiveActiveTaskCount, activeWorkstreamCount: item.archiveActiveWorkstreamCount, busy: archiveBusy, onCancel: () => setArchiveConfirmationVisible(false), onConfirm: () => void handleConfirmArchive() })) : null, relationshipContent, isEditing && onUpdate ? (_jsx(PlanningWorkspaceEditor, { entityType: entityType, mode: "edit", formId: editFormId, showActions: false, onSavingChange: setIsEditingSaving, initialTitle: item.title, initialDescription: item.description || '', onCancel: () => setIsEditing(false), onSave: async (input) => {
+                    await onUpdate(input);
+                    setIsEditing(false);
+                } }, `${entityType}:${item.id}`)) : (_jsxs(_Fragment, { children: [_jsx("h3", { className: "tf-heading-card", children: item.title }), _jsx(PlanningEntityDescription, { description: item.description, label: label, taskReferences: taskReferences, className: `${styles.selectedEntityDescription} tf-scrollbar`.trim(), markdownClassName: styles.selectedEntityDescriptionMarkdown })] })), _jsxs("div", { className: styles.selectedEntityOwnerField, children: [_jsx("span", { children: "Owner" }), _jsx(PlanningOwnerDropdown, { value: ownerValue, options: ownerOptions, onChange: (nextOwnerId) => void handleOwnerChange(nextOwnerId), disabled: !onChangeOwner || Boolean(item.isArchived) || isSavingOwner, ariaLabel: `${label} owner`, className: `${planningDropdownStyles.control} ${styles.selectedEntityOwnerDropdown}` })] }), _jsx("div", { className: styles.selectedEntityDetailsSection, children: _jsx(PlanningEntityContext, { entityType: entityType, entityId: item.id, referenceLabel: entityType === 'initiative'
+                        ? formatInitiativeReference(item)
+                        : formatWorkstreamReference(item), workspaceId: workspaceId, attachments: item.attachments, readOnly: Boolean(item.isArchived), defaultExpanded: false, onAddAttachment: !item.isArchived && onAddContextFile
+                        ? (file) => onAddContextFile(entityType, item.id, file)
+                        : undefined, onRemoveAttachment: !item.isArchived && onRemoveContextFile
+                        ? (index) => onRemoveContextFile(entityType, item.id, index)
+                        : undefined, onUpdateAttachmentCaption: !item.isArchived && onUpdateContextCaption
+                        ? (index, caption) => onUpdateContextCaption(entityType, item.id, index, caption)
+                        : undefined }) }), _jsx("div", { className: styles.selectedEntityDetailsSection, children: _jsx(PlanningEntityActivity, { entityType: entityType, item: item, assigneeOptions: ownerOptions, currentActorId: currentActorId, taskReferences: taskReferences, defaultExpanded: false, listClassName: styles.activityTimelineList, emptyClassName: styles.activityTimelineEmpty, hydrationState: hydrationState, onRetryHydration: onRetryHydration }) })] }));
+}
+export function PlanningModule({ model }) {
+    const [selectedInitiativeId, setSelectedInitiativeId] = React.useState(null);
+    const [selectedWorkstreamId, setSelectedWorkstreamId] = React.useState(null);
+    const [activePane, setActivePane] = React.useState('portfolio');
+    const [searchQuery, setSearchQuery] = React.useState('');
+    const [ownerFilter, setOwnerFilter] = React.useState('all');
+    const [sort, setSort] = React.useState('default');
+    const [filtersExpanded, setFiltersExpanded] = React.useState(false);
+    const [showArchivedPlanning, setShowArchivedPlanning] = React.useState(false);
+    const taskArrangeMode = model.taskArrangeMode || 'execution';
+    const [createState, setCreateState] = React.useState(null);
+    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 portfolioHeadingRef = React.useRef(null);
+    const workstreamsHeadingRef = React.useRef(null);
+    const tasksHeadingRef = React.useRef(null);
+    const pendingFocusPaneRef = React.useRef(null);
+    const pendingCreatedSelectionRef = React.useRef(null);
+    const assigneeOptionByValue = React.useMemo(() => new Map(model.assigneeOptions
+        .filter((option) => !String(option.archivedAt || '').trim())
+        .map((option) => [String(option.value), option])), [model.assigneeOptions]);
+    const ownerFilterLeadingOptions = React.useMemo(() => {
+        const normalizedCurrentOwnerId = String(model.currentOwnerId || '').trim();
+        const currentOwnerOption = normalizedCurrentOwnerId
+            ? normalizePlanningOwnerOptions(model.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',
+            },
+        ];
+    }, [model.assigneeOptions, model.currentOwnerId]);
+    const navigatorResults = React.useMemo(() => buildPlanningNavigatorResults({
+        initiatives: model.initiatives,
+        standaloneWorkstreams: model.standaloneWorkstreams,
+        showArchivedPlanning,
+        searchQuery,
+        ownerFilter,
+        currentOwnerId: String(model.currentOwnerId || ''),
+        sort,
+    }), [model.currentOwnerId, model.initiatives, model.standaloneWorkstreams, ownerFilter, searchQuery, showArchivedPlanning, sort]);
+    const visibleInitiatives = React.useMemo(() => navigatorResults.initiatives.map(({ initiative }) => initiative), [navigatorResults.initiatives]);
+    const visibleStandaloneWorkstreams = navigatorResults.standaloneWorkstreams;
+    const selectedInitiative = React.useMemo(() => model.initiatives.find((initiative) => initiative.id === selectedInitiativeId) ?? null, [model.initiatives, selectedInitiativeId]);
+    const allPlanningWorkstreams = React.useMemo(() => [
+        ...model.initiatives.flatMap((initiative) => initiative.allWorkstreams ?? initiative.workstreams),
+        ...model.standaloneWorkstreams,
+    ], [model.initiatives, model.standaloneWorkstreams]);
+    const selectedWorkstream = React.useMemo(() => allPlanningWorkstreams.find((workstream) => workstream.id === selectedWorkstreamId) ?? null, [allPlanningWorkstreams, selectedWorkstreamId]);
+    const workstreams = selectedInitiative
+        ? (selectedInitiative.allWorkstreams ?? selectedInitiative.workstreams)
+            .filter((workstream) => showArchivedPlanning || !workstream.isArchived)
+        : selectedWorkstream && !selectedWorkstream.initiativeId
+            ? [selectedWorkstream]
+            : [];
+    const visibleTasks = React.useMemo(() => arrangePlanningTasks((selectedWorkstream?.tasks ?? []).filter((task) => showArchivedPlanning || !task.isArchived), taskArrangeMode), [selectedWorkstream?.tasks, showArchivedPlanning, taskArrangeMode]);
+    const linkedWorkstreamIds = React.useMemo(() => new Set((selectedInitiative?.allWorkstreams ?? selectedInitiative?.workstreams ?? []).map((workstream) => workstream.id)), [selectedInitiative]);
+    const linkedTaskIds = React.useMemo(() => new Set((selectedWorkstream?.tasks ?? []).map((task) => task.id)), [selectedWorkstream]);
+    const availableWorkstreamLinks = React.useMemo(() => model.linkOptions.workstreams.filter((option) => !linkedWorkstreamIds.has(option.id)), [linkedWorkstreamIds, model.linkOptions.workstreams]);
+    const availableTaskLinks = React.useMemo(() => model.linkOptions.tasks.filter((option) => !linkedTaskIds.has(option.id)), [linkedTaskIds, model.linkOptions.tasks]);
+    const selectedEntityType = selectedWorkstream ? 'workstream' : selectedInitiative ? 'initiative' : null;
+    const selectedEntityId = selectedWorkstream?.id || selectedInitiative?.id || null;
+    const selectedEntityHydrationState = selectedEntityType && selectedEntityId
+        ? model.hydrationStateByEntity?.[`${selectedEntityType}:${selectedEntityId}`]
+        : undefined;
+    const hasArchivedPlanning = React.useMemo(() => {
+        if (model.initiatives.some((initiative) => initiative.isArchived))
+            return true;
+        const workstreams = [
+            ...model.initiatives.flatMap((initiative) => initiative.allWorkstreams ?? initiative.workstreams),
+            ...model.standaloneWorkstreams,
+        ];
+        return workstreams.some((workstream) => (workstream.isArchived || (workstream.tasks ?? []).some((task) => task.isArchived)));
+    }, [model.initiatives, model.standaloneWorkstreams]);
+    React.useEffect(() => {
+        const pending = pendingCreatedSelectionRef.current;
+        if (!pending)
+            return;
+        if (pending.entityType === 'initiative') {
+            if (!model.initiatives.some((initiative) => initiative.id === pending.entityId))
+                return;
+            pendingCreatedSelectionRef.current = null;
+            setSelectedInitiativeId(pending.entityId);
+            setSelectedWorkstreamId(null);
+            pendingFocusPaneRef.current = 'workstreams';
+            setActivePane('workstreams');
+            return;
+        }
+        if (!allPlanningWorkstreams.some((workstream) => workstream.id === pending.entityId))
+            return;
+        pendingCreatedSelectionRef.current = null;
+        setSelectedInitiativeId(pending.initiativeId || null);
+        setSelectedWorkstreamId(pending.entityId);
+        pendingFocusPaneRef.current = 'tasks';
+        setActivePane('tasks');
+    }, [allPlanningWorkstreams, model.initiatives]);
+    React.useEffect(() => {
+        if (selectedInitiativeId && !selectedInitiative) {
+            setSelectedInitiativeId(null);
+            setSelectedWorkstreamId(null);
+            setActivePane('portfolio');
+        }
+    }, [selectedInitiative, selectedInitiativeId]);
+    React.useEffect(() => {
+        if (selectedWorkstreamId && !selectedWorkstream) {
+            setSelectedWorkstreamId(null);
+            setActivePane(selectedInitiative ? 'workstreams' : 'portfolio');
+        }
+    }, [selectedInitiative, selectedWorkstream, selectedWorkstreamId]);
+    React.useEffect(() => {
+        if (!model.hydrateEntity || !selectedEntityType || !selectedEntityId)
+            return;
+        void model.hydrateEntity(selectedEntityType, selectedEntityId);
+    }, [model.hydrateEntity, selectedEntityId, selectedEntityType]);
+    React.useEffect(() => {
+        setShowParentLinkPicker(false);
+        setPendingUnlink(null);
+        setRelationshipRecovery(null);
+        setIsChangingRelationship(false);
+    }, [selectedEntityId, selectedEntityType]);
+    React.useLayoutEffect(() => {
+        if (pendingFocusPaneRef.current !== activePane)
+            return;
+        const heading = activePane === 'portfolio'
+            ? portfolioHeadingRef.current
+            : activePane === 'workstreams'
+                ? workstreamsHeadingRef.current
+                : tasksHeadingRef.current;
+        heading?.focus({ preventScroll: true });
+        pendingFocusPaneRef.current = null;
+    }, [activePane]);
+    const navigateToPane = (pane) => {
+        if (pane === activePane) {
+            const heading = pane === 'portfolio'
+                ? portfolioHeadingRef.current
+                : pane === 'workstreams'
+                    ? workstreamsHeadingRef.current
+                    : tasksHeadingRef.current;
+            heading?.focus({ preventScroll: true });
+            return;
+        }
+        pendingFocusPaneRef.current = pane;
+        setActivePane(pane);
+    };
+    const selectInitiative = (initiativeId) => {
+        setSelectedInitiativeId(initiativeId);
+        setSelectedWorkstreamId(null);
+        navigateToPane('workstreams');
+    };
+    const selectWorkstream = (workstream) => {
+        if (!workstream.initiativeId)
+            setSelectedInitiativeId(null);
+        setSelectedWorkstreamId(workstream.id);
+        navigateToPane('tasks');
+    };
+    const returnFromTasks = () => {
+        navigateToPane(selectedInitiative ? 'workstreams' : 'portfolio');
+    };
+    const hasAdjustedNavigator = navigatorResults.hasCriteria || sort !== 'default';
+    const clearNavigator = () => {
+        setSearchQuery('');
+        setOwnerFilter('all');
+        setSort('default');
+    };
+    const createPlanningEntity = async (input) => {
+        if (!createState || !model.createEntity)
+            return;
+        const created = await model.createEntity(createState.entityType, input);
+        pendingCreatedSelectionRef.current = {
+            entityType: createState.entityType,
+            entityId: created.id,
+            initiativeId: createState.initiativeId,
+        };
+        setCreateState(null);
+    };
+    const attachRelationship = async (entityType, option) => {
+        if (isChangingRelationship)
+            return;
+        const attach = entityType === 'workstream'
+            ? model.attachWorkstreamToInitiative
+            : model.attachTaskToWorkstream;
+        const parentId = entityType === 'workstream' ? selectedInitiative?.id : selectedWorkstream?.id;
+        if (!attach || !parentId)
+            return;
+        setIsChangingRelationship(true);
+        try {
+            await attach(parentId, option.referenceLabel);
+        }
+        finally {
+            setIsChangingRelationship(false);
+        }
+    };
+    const linkSelectedWorkstreamToInitiative = async (option) => {
+        if (!selectedWorkstream || !model.assignWorkstreamToInitiative || isChangingRelationship)
+            return;
+        setIsChangingRelationship(true);
+        try {
+            const result = await model.assignWorkstreamToInitiative(selectedWorkstream.id, option.referenceLabel);
+            if (result !== false) {
+                setSelectedInitiativeId(option.id);
+                setShowParentLinkPicker(false);
+            }
+        }
+        finally {
+            setIsChangingRelationship(false);
+        }
+    };
+    const confirmUnlink = async () => {
+        if (!pendingUnlink || isChangingRelationship)
+            return;
+        setIsChangingRelationship(true);
+        try {
+            if (pendingUnlink.entityType === 'workstream') {
+                if (!model.assignWorkstreamToInitiative)
+                    return;
+                const initiativeReference = selectedInitiative
+                    ? formatInitiativeReference(selectedInitiative)
+                    : null;
+                const result = await model.assignWorkstreamToInitiative(pendingUnlink.id, null);
+                if (result === false)
+                    return;
+                setRelationshipRecovery({
+                    pane: pendingUnlink.id === selectedWorkstream?.id ? 'tasks' : 'workstreams',
+                    message: `${pendingUnlink.referenceLabel} removed from its initiative.`,
+                    onUndo: async () => {
+                        if (!initiativeReference)
+                            return;
+                        const undoResult = await model.assignWorkstreamToInitiative?.(pendingUnlink.id, initiativeReference);
+                        if (undoResult !== false)
+                            setRelationshipRecovery(null);
+                    },
+                });
+            }
+            else {
+                if (!model.assignTaskToWorkstream || !selectedWorkstream)
+                    return;
+                const workstreamId = selectedWorkstream.id;
+                const result = await model.assignTaskToWorkstream(pendingUnlink.id, null);
+                if (result === false)
+                    return;
+                setRelationshipRecovery({
+                    pane: 'tasks',
+                    message: `${pendingUnlink.referenceLabel} removed from this workstream.`,
+                    onUndo: async () => {
+                        const undoResult = await model.assignTaskToWorkstream?.(pendingUnlink.id, workstreamId);
+                        if (undoResult !== false)
+                            setRelationshipRecovery(null);
+                    },
+                });
+            }
+            setPendingUnlink(null);
+        }
+        finally {
+            setIsChangingRelationship(false);
+        }
+    };
+    const undoRelationship = async () => {
+        if (!relationshipRecovery || isChangingRelationship)
+            return;
+        setIsChangingRelationship(true);
+        try {
+            await relationshipRecovery.onUndo();
+        }
+        finally {
+            setIsChangingRelationship(false);
+        }
+    };
+    const relationshipRecoveryNotice = relationshipRecovery ? (_jsxs("div", { className: styles.relationshipRecovery, role: "status", children: [_jsx("span", { children: relationshipRecovery.message }), _jsx("button", { type: "button", className: "tf-button-ghost tf-button-compact", disabled: isChangingRelationship, onClick: () => void undoRelationship(), children: isChangingRelationship ? 'Restoring…' : 'Undo' })] })) : null;
+    if (model.loadState.status === 'loading' && model.initiatives.length === 0 && model.standaloneWorkstreams.length === 0) {
+        return (_jsxs("main", { className: styles.centerState, "aria-busy": "true", "aria-label": "Loading planning workspace", children: [_jsx(Loader2, { size: 22, className: styles.spinner }), _jsx("span", { children: "Loading planning\u2026" })] }));
+    }
+    if (model.loadState.status === 'error' && model.initiatives.length === 0 && model.standaloneWorkstreams.length === 0) {
+        return (_jsxs("main", { className: styles.centerState, role: "alert", children: [_jsx(AlertTriangle, { size: 22 }), _jsx("strong", { children: "Planning could not be loaded." }), _jsx("span", { children: model.loadState.error }), _jsxs("button", { type: "button", className: "tf-button-secondary tf-button-compact", onClick: model.retry, disabled: model.loadState.isRefreshing, children: [model.loadState.isRefreshing ? _jsx(Loader2, { size: 15, className: styles.spinner }) : _jsx(RotateCcw, { size: 15 }), "Retry"] })] }));
+    }
+    return (_jsxs("main", { className: styles.module, "aria-label": "Planning workspace", "aria-busy": model.loadState.isRefreshing, children: [model.loadState.isRefreshing ? (_jsx("span", { className: styles.visuallyHidden, role: "status", "aria-live": "polite", children: "Refreshing planning" })) : null, (model.loadState.status === 'partial' || model.loadState.status === 'error') && (_jsxs("div", { className: styles.inlineError, role: "alert", children: [_jsx(AlertTriangle, { size: 16 }), _jsx("span", { children: model.loadState.error || 'Some planning information could not be loaded.' }), _jsx("button", { type: "button", className: "tf-button-secondary tf-button-compact", onClick: model.retry, children: "Retry" })] })), _jsxs("div", { className: styles.columns, "data-active-pane": activePane, children: [_jsxs("section", { className: `${styles.column} ${styles.columnPortfolio} ${activePane === 'portfolio' ? styles.columnActive : ''}`.trim(), "aria-labelledby": "planning-portfolio-heading", children: [_jsxs("div", { className: styles.columnHeader, children: [_jsx("h2", { ref: portfolioHeadingRef, id: "planning-portfolio-heading", className: `tf-heading-section ${styles.paneHeading}`, tabIndex: -1, children: "Portfolio" }), _jsxs("div", { className: styles.headerActions, children: [_jsx("span", { children: visibleInitiatives.length + visibleStandaloneWorkstreams.length }), _jsx("button", { type: "button", className: `tf-control-icon ${showArchivedPlanning ? styles.controlActive : ''}`.trim(), onClick: () => setShowArchivedPlanning((current) => !current), disabled: !hasArchivedPlanning, "aria-label": showArchivedPlanning ? 'Hide archived planning items' : 'Show archived planning items', "aria-pressed": showArchivedPlanning, title: hasArchivedPlanning ? (showArchivedPlanning ? 'Hide archived planning items' : 'Show archived planning items') : 'No archived planning items', children: showArchivedPlanning ? _jsx(EyeOff, { size: 15, "aria-hidden": "true" }) : _jsx(Eye, { size: 15, "aria-hidden": "true" }) })] })] }), _jsxs("div", { className: styles.portfolioControls, children: [_jsxs("div", { className: styles.searchRow, children: [_jsxs("div", { className: styles.searchShell, children: [_jsx(Search, { size: 14, "aria-hidden": "true" }), _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: styles.clearSearch, 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' || sort !== 'default' ? styles.controlActive : ''}`.trim(), "aria-label": "Filter and sort planning", title: "Filter and sort planning", "aria-expanded": filtersExpanded, "aria-controls": "planning-workspace-navigator-options", onClick: () => setFiltersExpanded((current) => !current), children: _jsx(Filter, { size: 15, "aria-hidden": "true" }) })] }), filtersExpanded ? (_jsxs("div", { id: "planning-workspace-navigator-options", className: styles.filterPanel, children: [_jsxs("div", { className: styles.filterField, children: [_jsx("span", { className: styles.filterLabel, children: "Owner" }), _jsx(PlanningOwnerDropdown, { value: ownerFilter, options: model.assigneeOptions, leadingOptions: ownerFilterLeadingOptions, includeUnassigned: false, onChange: setOwnerFilter, disabled: false, ariaLabel: "Filter planning by owner", className: styles.filterDropdown })] }), _jsxs("div", { className: styles.filterField, children: [_jsx("span", { className: styles.filterLabel, children: "Sort" }), _jsx(TaxonomyDropdown, { value: sort, options: PLANNING_NAVIGATOR_SORT_OPTIONS, onChange: (value) => setSort(String(value)), ariaLabel: "Sort planning", className: styles.filterDropdown, portalPanel: true, panelAlign: "start", triggerContent: (_jsxs("span", { className: styles.sortTrigger, children: [_jsx(ArrowUpDown, { size: 14, "aria-hidden": "true" }), _jsx("span", { children: PLANNING_NAVIGATOR_SORT_OPTIONS.find((option) => option.value === sort)?.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("div", { className: styles.scrollRegion, children: [_jsxs("div", { className: styles.sectionHeadingRow, children: [_jsx("h3", { className: `tf-heading-section ${styles.sectionLabel}`, children: "Initiatives" }), model.createEntity ? (_jsx("button", { type: "button", className: "tf-control-icon", onClick: () => setCreateState({ entityType: 'initiative' }), "aria-label": "Create initiative", title: "Create initiative", children: _jsx(Plus, { size: 15, "aria-hidden": "true" }) })) : null] }), createState?.entityType === 'initiative' ? (_jsx(PlanningWorkspaceEditor, { entityType: "initiative", mode: "create", ownerOptions: model.assigneeOptions, onCancel: () => setCreateState(null), onSave: createPlanningEntity })) : null, navigatorResults.initiatives.map(({ initiative, workstreams: resultWorkstreams }) => {
+                                        return (_jsx(InitiativeButton, { initiative: initiative, workstreamCount: resultWorkstreams.length, ownerOption: initiative.ownerId ? assigneeOptionByValue.get(initiative.ownerId) : undefined, ownerOptions: model.assigneeOptions, selected: selectedInitiativeId === initiative.id, onSelect: () => selectInitiative(initiative.id), onChangeOwner: model.changeOwner
+                                                ? (ownerId) => model.changeOwner?.('initiative', initiative.id, ownerId === 'unassigned' ? '' : ownerId)
+                                                : undefined, onChangeIdentity: model.changeIdentity
+                                                ? (patch) => model.changeIdentity?.('initiative', initiative.id, patch)
+                                                : undefined }, initiative.id));
+                                    }), _jsxs("div", { className: styles.sectionHeadingRow, children: [_jsx("h3", { className: `tf-heading-section ${styles.sectionLabel}`, children: "Standalone workstreams" }), model.createEntity ? (_jsx("button", { type: "button", className: "tf-control-icon", onClick: () => setCreateState({ entityType: 'workstream', initiativeId: null }), "aria-label": "Create standalone workstream", title: "Create standalone workstream", children: _jsx(Plus, { size: 15, "aria-hidden": "true" }) })) : null] }), createState?.entityType === 'workstream' && !createState.initiativeId ? (_jsx(PlanningWorkspaceEditor, { entityType: "workstream", mode: "create", ownerOptions: model.assigneeOptions, fixedInitiativeId: null, onCancel: () => setCreateState(null), onSave: createPlanningEntity })) : null, visibleStandaloneWorkstreams.map((workstream) => (_jsx(WorkstreamButton, { workstream: workstream, ownerOption: workstream.ownerId ? assigneeOptionByValue.get(workstream.ownerId) : undefined, ownerOptions: model.assigneeOptions, selected: selectedWorkstreamId === workstream.id, onSelect: () => selectWorkstream(workstream), onChangeOwner: model.changeOwner
+                                            ? (ownerId) => model.changeOwner?.('workstream', workstream.id, ownerId === 'unassigned' ? '' : ownerId)
+                                            : undefined, onChangeIdentity: model.changeIdentity
+                                            ? (patch) => model.changeIdentity?.('workstream', workstream.id, patch)
+                                            : undefined }, workstream.id))), visibleInitiatives.length === 0 && visibleStandaloneWorkstreams.length === 0 && (_jsx("p", { className: `tf-text-helper ${styles.empty}`, children: navigatorResults.hasCriteria ? 'No planning matches.' : 'No planning items yet.' }))] })] }), _jsxs("section", { className: `${styles.column} ${styles.columnWorkstreams} ${activePane === 'workstreams' ? styles.columnActive : ''}`.trim(), "aria-labelledby": "planning-workstreams-heading", children: [_jsxs("div", { className: styles.columnHeader, children: [_jsxs("div", { className: styles.columnHeadingGroup, children: [_jsx("button", { type: "button", className: `tf-control-icon ${styles.responsiveBack}`.trim(), onClick: () => navigateToPane('portfolio'), "aria-label": "Back to Portfolio", title: "Back to Portfolio", children: _jsx(ChevronLeft, { size: 15, "aria-hidden": "true" }) }), _jsxs("h2", { ref: workstreamsHeadingRef, id: "planning-workstreams-heading", className: `tf-heading-section ${styles.paneHeading}`, tabIndex: -1, children: ["Workstreams (", workstreams.length, ")"] })] }), _jsx("div", { className: styles.headerActions, children: selectedInitiative && model.createEntity ? (_jsx("button", { type: "button", className: "tf-control-icon", onClick: () => setCreateState({ entityType: 'workstream', initiativeId: selectedInitiative.id }), "aria-label": `Create workstream in ${selectedInitiative.title}`, title: "Create workstream", children: _jsx(Plus, { size: 15, "aria-hidden": "true" }) })) : null })] }), _jsxs("div", { className: styles.scrollRegion, children: [selectedInitiative ? (_jsxs(_Fragment, { children: [_jsx(SelectedEntityContext, { item: selectedInitiative, entityType: "initiative", ownerOptions: model.assigneeOptions, onChangeOwner: model.changeOwner
+                                                    ? (ownerId) => model.changeOwner?.('initiative', selectedInitiative.id, ownerId)
+                                                    : undefined, onChangeIdentity: model.changeIdentity, workspaceId: model.currentWorkspaceId, currentActorId: model.currentOwnerId, taskReferences: model.taskReferences, hydrationState: selectedWorkstream ? undefined : selectedEntityHydrationState, onRetryHydration: model.hydrateEntity
+                                                    ? () => { void model.hydrateEntity?.('initiative', selectedInitiative.id); }
+                                                    : undefined, onAddContextFile: model.addContextFile, onRemoveContextFile: model.removeContextFile, onUpdateContextCaption: model.updateContextCaption, onUpdate: model.updateEntity
+                                                    ? (input) => model.updateEntity('initiative', selectedInitiative.id, input)
+                                                    : undefined, onArchive: model.archiveEntity
+                                                    ? () => model.archiveEntity('initiative', selectedInitiative.id)
+                                                    : undefined, onUnarchive: model.unarchiveEntity
+                                                    ? () => model.unarchiveEntity('initiative', selectedInitiative.id)
+                                                    : undefined }), _jsx(PlanningLinkPicker, { options: availableWorkstreamLinks, entityLabel: "workstream", onSelect: (option) => attachRelationship('workstream', option), disabled: !model.attachWorkstreamToInitiative || isChangingRelationship })] })) : null, createState?.entityType === 'workstream' && createState.initiativeId === selectedInitiative?.id ? (_jsx(PlanningWorkspaceEditor, { entityType: "workstream", mode: "create", ownerOptions: model.assigneeOptions, fixedInitiativeId: selectedInitiative.id, onCancel: () => setCreateState(null), onSave: createPlanningEntity })) : null, workstreams.map((workstream) => (_jsx(WorkstreamButton, { workstream: workstream, ownerOption: workstream.ownerId ? assigneeOptionByValue.get(workstream.ownerId) : undefined, ownerOptions: model.assigneeOptions, selected: selectedWorkstreamId === workstream.id, onSelect: () => selectWorkstream(workstream), onChangeOwner: model.changeOwner
+                                            ? (ownerId) => model.changeOwner?.('workstream', workstream.id, ownerId === 'unassigned' ? '' : ownerId)
+                                            : undefined, onChangeIdentity: model.changeIdentity
+                                            ? (patch) => model.changeIdentity?.('workstream', workstream.id, patch)
+                                            : undefined, referenceAction: selectedInitiative ? (_jsx(HierarchyActionBadge, { disabled: !model.assignWorkstreamToInitiative || isChangingRelationship, onClick: () => setPendingUnlink({
+                                                entityType: 'workstream',
+                                                id: workstream.id,
+                                                referenceLabel: formatWorkstreamReference(workstream),
+                                                title: workstream.title,
+                                                parentLabel: selectedInitiative
+                                                    ? `${formatInitiativeReference(selectedInitiative)} ${selectedInitiative.title}`.trim()
+                                                    : 'its initiative',
+                                            }), title: `Unlink ${formatWorkstreamReference(workstream) || workstream.title} from initiative`, ariaLabel: `Unlink ${formatWorkstreamReference(workstream) || workstream.title} from initiative`, children: _jsx(Unlink, { size: 14, "aria-hidden": "true" }) })) : undefined }, workstream.id))), selectedInitiative && relationshipRecovery?.pane === 'workstreams'
+                                        ? relationshipRecoveryNotice
+                                        : null, workstreams.length === 0 && (_jsx("p", { className: `tf-text-helper ${styles.empty}`, children: "Select an initiative or standalone workstream." }))] })] }), _jsxs("section", { className: `${styles.column} ${styles.columnTasks} ${activePane === 'tasks' ? styles.columnActive : ''}`.trim(), "aria-labelledby": "planning-tasks-heading", children: [_jsx("div", { className: styles.columnHeader, children: _jsxs("div", { className: styles.columnHeadingGroup, children: [_jsx("button", { type: "button", className: `tf-control-icon ${styles.responsiveBack}`.trim(), onClick: returnFromTasks, "aria-label": selectedInitiative ? 'Back to Workstreams' : 'Back to Portfolio', title: selectedInitiative ? 'Back to Workstreams' : 'Back to Portfolio', children: _jsx(ChevronLeft, { size: 15, "aria-hidden": "true" }) }), _jsxs("h2", { ref: tasksHeadingRef, id: "planning-tasks-heading", className: `tf-heading-section ${styles.paneHeading}`, tabIndex: -1, children: ["Tasks (", visibleTasks.length, ")"] })] }) }), _jsxs("div", { className: styles.scrollRegion, children: [selectedWorkstream ? (_jsxs(_Fragment, { children: [_jsx(SelectedEntityContext, { item: selectedWorkstream, entityType: "workstream", ownerOptions: model.assigneeOptions, onChangeOwner: model.changeOwner
+                                                    ? (ownerId) => model.changeOwner?.('workstream', selectedWorkstream.id, ownerId)
+                                                    : undefined, workspaceId: model.currentWorkspaceId, currentActorId: model.currentOwnerId, taskReferences: model.taskReferences, hydrationState: selectedEntityHydrationState, onRetryHydration: model.hydrateEntity
+                                                    ? () => { void model.hydrateEntity?.('workstream', selectedWorkstream.id); }
+                                                    : undefined, onAddContextFile: model.addContextFile, onRemoveContextFile: model.removeContextFile, onUpdateContextCaption: model.updateContextCaption, onUpdate: model.updateEntity
+                                                    ? (input) => model.updateEntity('workstream', selectedWorkstream.id, input)
+                                                    : undefined, onArchive: model.archiveEntity
+                                                    ? () => model.archiveEntity('workstream', selectedWorkstream.id)
+                                                    : undefined, onUnarchive: model.unarchiveEntity
+                                                    ? () => model.unarchiveEntity('workstream', selectedWorkstream.id)
+                                                    : undefined, referenceAction: selectedWorkstream.initiativeId ? (_jsx(HierarchyActionBadge, { disabled: !model.assignWorkstreamToInitiative || isChangingRelationship, onClick: () => {
+                                                        setPendingUnlink({
+                                                            entityType: 'workstream',
+                                                            id: selectedWorkstream.id,
+                                                            referenceLabel: formatWorkstreamReference(selectedWorkstream),
+                                                            title: selectedWorkstream.title,
+                                                            parentLabel: selectedInitiative
+                                                                ? `${formatInitiativeReference(selectedInitiative)} ${selectedInitiative.title}`.trim()
+                                                                : 'its initiative',
+                                                        });
+                                                    }, title: "Unlink workstream from initiative", ariaLabel: "Unlink workstream from initiative", children: _jsx(Unlink, { size: 14, "aria-hidden": "true" }) })) : (_jsx(HierarchyActionBadge, { disabled: !model.assignWorkstreamToInitiative || isChangingRelationship, onClick: () => setShowParentLinkPicker((current) => !current), title: "Link initiative", ariaLabel: "Link initiative", ariaExpanded: showParentLinkPicker, children: _jsx(Link2, { size: 14, "aria-hidden": "true" }) })), relationshipContent: (_jsx(_Fragment, { children: !selectedWorkstream.initiativeId && showParentLinkPicker ? (_jsxs("div", { className: styles.relationshipPickerRow, children: [_jsx(PlanningLinkPicker, { options: model.linkOptions.initiatives, entityLabel: "initiative", onSelect: linkSelectedWorkstreamToInitiative, disabled: 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 })) }), _jsx(PlanningLinkPicker, { options: availableTaskLinks, entityLabel: "task", onSelect: (option) => attachRelationship('task', option), disabled: !model.attachTaskToWorkstream || isChangingRelationship }), model.setTaskArrangeMode ? (_jsx(PlanningTaskArrangeControl, { value: taskArrangeMode, onChange: model.setTaskArrangeMode })) : null] })) : null, _jsx(PlanningTaskOrderList, { tasks: visibleTasks, mode: taskArrangeMode, onReorder: selectedWorkstream && model.reorderWorkstreamTasks
+                                            ? (taskIds) => model.reorderWorkstreamTasks?.(selectedWorkstream.id, mergeVisiblePlanningTaskOrder(arrangePlanningTasks(selectedWorkstream.tasks ?? [], 'execution'), taskIds))
+                                            : undefined, children: (task) => {
+                                            const referenceLabel = getTaskReferenceLabel(task);
+                                            return (_jsx(PlanningTaskCard, { task: task, assigneeOption: task.assignee ? assigneeOptionByValue.get(task.assignee) : undefined, assigneeOptions: model.assigneeOptions, showStatusLabel: model.showTaskCardStatusLabel, onOpen: () => model.openTask(task.id), onAssigneeChange: model.setTaskAssignee
+                                                    ? (assignee) => model.setTaskAssignee?.(task.id, assignee)
+                                                    : undefined, onStatusChange: model.setTaskStatus
+                                                    ? (status) => model.setTaskStatus?.(task.id, status)
+                                                    : undefined, referenceInteractive: false, referenceAction: (_jsx(HierarchyActionBadge, { disabled: !model.assignTaskToWorkstream || isChangingRelationship, onClick: (event) => {
+                                                        event.stopPropagation();
+                                                        setPendingUnlink({
+                                                            entityType: 'task',
+                                                            id: task.id,
+                                                            referenceLabel: referenceLabel || task.id,
+                                                            title: task.title,
+                                                            parentLabel: selectedWorkstream
+                                                                ? `${formatWorkstreamReference(selectedWorkstream)} ${selectedWorkstream.title}`.trim()
+                                                                : 'its workstream',
+                                                        });
+                                                    }, title: `Unlink ${referenceLabel || task.title} from workstream`, ariaLabel: `Unlink ${referenceLabel || task.title} from workstream`, children: _jsx(Unlink, { size: 14, "aria-hidden": "true" }) })) }, task.id));
+                                        } }), selectedWorkstream && relationshipRecovery?.pane === 'tasks'
+                                        ? relationshipRecoveryNotice
+                                        : null, !selectedWorkstream && _jsx("p", { className: `tf-text-helper ${styles.empty}`, children: "Select a workstream." }), selectedWorkstream && visibleTasks.length === 0 && (_jsx("p", { className: `tf-text-helper ${styles.empty}`, children: "No tasks are linked to this workstream." }))] })] })] }), _jsx(PlanningUnlinkConfirmation, { item: pendingUnlink, busy: isChangingRelationship, theme: model.theme, onCancel: () => setPendingUnlink(null), onConfirm: () => void confirmUnlink() })] }));
+}