@taskforcehq/taskforce 0.3.305 → 0.3.306

package/dist/components/views/panels/PlanningDrawer.d.ts

@@ -1,3 +1,4 @@
+import type { AttachmentItem } from '../../../types';
 export declare const PLANNING_DRAWER_TREE_WIDTH_PX = 332;
 export declare const PLANNING_DRAWER_DETAIL_WIDTH_PX = 392;
 export declare const PLANNING_DRAWER_COLLAPSED_PANE_WIDTH_PX = 56;
@@ -14,6 +15,7 @@ export type PlanningNodeSummary = {
     workstreamCount?: number;
     commentCount?: number;
     attachmentCount?: number;
+    attachments?: Array<string | AttachmentItem>;
     isArchived?: boolean;
 };
 export type PlanningTaskPreview = {
@@ -65,6 +67,7 @@ type PlanningDrawerProps = {
     detail: PlanningDrawerDetail;
     editor: PlanningEditorState | null;
     secondaryPane: PlanningDrawerSecondaryPane;
+    currentWorkspaceId?: string | null;
     assigneeOptions: Array<{
         value: string;
         label: string;
@@ -90,6 +93,7 @@ type PlanningDrawerProps = {
     secondaryCollapsed: boolean;
     onCancelEditor: () => void;
     onSubmitEditor: () => void;
+    isSubmittingEditor: boolean;
     onCreateInitiative: () => void;
     onCreateWorkstream: () => void;
     onToggleInitiative: (initiativeId: string) => void;
@@ -110,6 +114,9 @@ type PlanningDrawerProps = {
     onOpenTaskById?: (taskId: string) => void;
     onAttachTaskToWorkstreamByReference?: (workstreamId: string, taskReference: string) => void;
     onAttachWorkstreamToInitiativeByReference?: (initiativeId: string, workstreamReference: string) => void;
+    onAddPlanningContextFile?: (entityType: 'initiative' | 'workstream', entityId: string, file: AttachmentItem) => void;
+    onRemovePlanningContextFile?: (entityType: 'initiative' | 'workstream', entityId: string, index: number) => void;
+    onUpdatePlanningContextCaption?: (entityType: 'initiative' | 'workstream', entityId: string, index: number, caption: string) => void;
 };
-export declare function PlanningDrawer({ open, leftOffset, initiatives, standaloneWorkstreams, activeInitiativeId, activeWorkstreamId, expandedInitiativeIds, detail, editor, secondaryPane, assigneeOptions, draftInitiativeSummary, draftTitle, draftDescription, draftOwner, draftInitiativeId, onChangeDraftTitle, onChangeDraftDescription, onChangeDraftOwner, onChangeDraftInitiativeId, onCollapseTreePane, onExpandTreePane, onCollapsePrimaryPane, onExpandPrimaryPane, onCollapseSecondaryPane, onExpandSecondaryPane, onBackFromSecondary, treeCollapsed, primaryCollapsed, secondaryCollapsed, onCancelEditor, onSubmitEditor, onCreateInitiative, onCreateWorkstream, onToggleInitiative, onSelectInitiative, onSelectWorkstream, onOpenInitiativeDetails, onOpenWorkstreamDetails, onOpenNestedWorkstreamDetails, onEditInitiative, onEditWorkstream, onArchiveInitiative, onUnarchiveInitiative, onArchiveWorkstream, onUnarchiveWorkstream, onCreateTaskInWorkstream, onCreateWorkstreamInInitiative, onAssignInitiativeToWorkstream, onOpenTaskById, onAttachTaskToWorkstreamByReference, onAttachWorkstreamToInitiativeByReference, }: PlanningDrawerProps): import("react/jsx-runtime").JSX.Element;
+export declare function PlanningDrawer({ open, leftOffset, initiatives, standaloneWorkstreams, 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, onAttachTaskToWorkstreamByReference, onAttachWorkstreamToInitiativeByReference, onAddPlanningContextFile, onRemovePlanningContextFile, onUpdatePlanningContextCaption, }: PlanningDrawerProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -6,6 +6,7 @@ import { ChevronLeft, ChevronRight, ChevronsDown, ChevronsRight, Filter, Plus, }
 import styles from '../../../Taskforce.module.css';
 import panelStyles from './PlanningDrawer.module.css';
 import { ReferenceBadgeButton } from '../../ui/ReferenceBadgeButton';
+import { ContextAttachmentManager } from '../../context/ContextAttachmentManager';
 import { IconMap, getStatusDefinition, resolveColor } from '../../../utils/constants';
 import { formatInitiativeReference, formatWorkstreamReference, } from '../../../utils/planningReferences.js';
 export const PLANNING_DRAWER_TREE_WIDTH_PX = 332;
@@ -121,7 +122,7 @@ function PlanningDrawerList({ initiatives, standaloneWorkstreams, activeInitiati
                                 onOpenWorkstreamDetails(workstream.id);
                             } }, workstream.id))) })] })] }));
 }
-function PlanningDrawerDetailView({ detail, onOpenNestedWorkstreamDetails, onEdit, onArchive, onUnarchive, onCreateTaskInWorkstream, onCreateWorkstreamInInitiative, onOpenTaskById, onAttachTaskToWorkstreamByReference, onAttachWorkstreamToInitiativeByReference, }) {
+function PlanningDrawerDetailView({ detail, currentWorkspaceId, onOpenNestedWorkstreamDetails, onEdit, onArchive, onUnarchive, onCreateTaskInWorkstream, onCreateWorkstreamInInitiative, onOpenTaskById, onAttachTaskToWorkstreamByReference, onAttachWorkstreamToInitiativeByReference, onAddPlanningContextFile, onRemovePlanningContextFile, onUpdatePlanningContextCaption, }) {
     const [attachReference, setAttachReference] = React.useState('');
     const { active } = useDndContext();
     const dragType = String(active?.data?.current?.type || '');
@@ -174,16 +175,22 @@ function PlanningDrawerDetailView({ detail, onOpenNestedWorkstreamDetails, onEdi
                         return (_jsx("button", { type: "button", className: `${panelStyles.listItemButton} ${panelStyles.detailCardButton}`.trim(), onClick: () => onOpenTaskById?.(task.id), children: _jsxs("div", { className: `${panelStyles.listItem} ${panelStyles.detailChildCard}`.trim(), children: [_jsxs("div", { className: panelStyles.detailChildCardTopRow, 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", { className: panelStyles.listItemText, children: [_jsx("span", { className: panelStyles.listItemTitle, children: task.title }), _jsx("span", { className: panelStyles.listItemMeta, children: formatTaskStatusLabel(task.status) })] })] }) }, 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."] })))] }), _jsxs("div", { className: panelStyles.listCard, children: [_jsx("div", { className: panelStyles.sectionTitle, children: "Context" }), _jsx("div", { className: panelStyles.sectionNote, children: "Comments, attachments, and planning notes can live here without pushing that context down into task cards." })] })] }));
+                    }) : (_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(ContextAttachmentManager, { 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)) }) })] }));
 }
-function PlanningDrawerEditor({ editor, draftTitle, draftDescription, draftOwner, draftInitiativeId, assigneeOptions, draftInitiativeSummary, onChangeDraftTitle, onChangeDraftDescription, onChangeDraftOwner, onChangeDraftInitiativeId, onCancel, onSubmit, onAssignInitiativeToWorkstream, }) {
+function PlanningDrawerEditor({ editor, draftTitle, draftDescription, draftOwner, draftInitiativeId, assigneeOptions, draftInitiativeSummary, onChangeDraftTitle, onChangeDraftDescription, onChangeDraftOwner, onChangeDraftInitiativeId, onCancel, onSubmit, isSubmitting, onAssignInitiativeToWorkstream, }) {
     const entityLabel = editor.entityType === 'initiative' ? 'Initiative' : 'Workstream';
-    const submitLabel = editor.mode === 'create' ? `Create ${entityLabel}` : `Save ${entityLabel}`;
-    return (_jsx(_Fragment, { children: _jsxs("div", { className: panelStyles.editorCard, children: [_jsxs("div", { className: panelStyles.editorField, children: [_jsx("label", { className: panelStyles.editorLabel, children: "Title" }), _jsx("input", { className: styles.input, 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, 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: styles.pathInputGroup, children: [_jsx("input", { type: "text", className: styles.input, placeholder: "Paste initiative reference (e.g. IN-123)", value: draftInitiativeId, onChange: (event) => onChangeDraftInitiativeId(event.target.value) }), editor.mode === 'edit' && (_jsx("button", { type: "button", className: styles.secondaryHeaderBtn, onClick: () => onAssignInitiativeToWorkstream?.(editor.targetId), children: "Set Initiative" }))] }), editor.mode === 'edit' && (_jsx("div", { className: panelStyles.editorSubActions, children: _jsx("button", { type: "button", className: styles.secondaryHeaderBtn, onClick: () => onAssignInitiativeToWorkstream?.(editor.targetId, null), children: "Clear Initiative" }) }))] })), _jsxs("div", { className: panelStyles.editorField, children: [_jsx("label", { className: panelStyles.editorLabel, children: "Owner" }), _jsxs("select", { className: `${styles.select} ${styles.groupBySelect}`, value: draftOwner, onChange: (event) => onChangeDraftOwner(event.target.value), children: [_jsx("option", { value: "", children: "Unassigned" }), assigneeOptions.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, children: "Cancel" }), _jsx("button", { type: "button", className: styles.primaryUpdateBtn, onClick: onSubmit, children: submitLabel })] })] }) }));
+    const submitLabel = isSubmitting
+        ? (editor.mode === 'create' ? `Creating ${entityLabel}...` : `Saving ${entityLabel}...`)
+        : (editor.mode === 'create' ? `Create ${entityLabel}` : `Save ${entityLabel}`);
+    const handleSubmit = React.useCallback((event) => {
+        event.preventDefault();
+        onSubmit();
+    }, [onSubmit]);
+    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'
+                            ? '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: styles.pathInputGroup, children: [_jsx("input", { type: "text", className: styles.input, disabled: isSubmitting, placeholder: "Paste initiative reference (e.g. IN-123)", value: draftInitiativeId, onChange: (event) => onChangeDraftInitiativeId(event.target.value) }), editor.mode === 'edit' && (_jsx("button", { type: "button", className: styles.secondaryHeaderBtn, disabled: isSubmitting, onClick: () => onAssignInitiativeToWorkstream?.(editor.targetId), children: "Set Initiative" }))] }), editor.mode === 'edit' && (_jsx("div", { className: panelStyles.editorSubActions, children: _jsx("button", { type: "button", className: styles.secondaryHeaderBtn, disabled: isSubmitting, onClick: () => onAssignInitiativeToWorkstream?.(editor.targetId, null), children: "Clear Initiative" }) }))] })), _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" }), assigneeOptions.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 })] })] }));
 }
-export function PlanningDrawer({ open, leftOffset = 0, initiatives, standaloneWorkstreams, activeInitiativeId, activeWorkstreamId, expandedInitiativeIds, detail, editor, secondaryPane, assigneeOptions, draftInitiativeSummary, draftTitle, draftDescription, draftOwner, draftInitiativeId, onChangeDraftTitle, onChangeDraftDescription, onChangeDraftOwner, onChangeDraftInitiativeId, onCollapseTreePane, onExpandTreePane, onCollapsePrimaryPane, onExpandPrimaryPane, onCollapseSecondaryPane, onExpandSecondaryPane, onBackFromSecondary, treeCollapsed, primaryCollapsed, secondaryCollapsed, onCancelEditor, onSubmitEditor, onCreateInitiative, onCreateWorkstream, onToggleInitiative, onSelectInitiative, onSelectWorkstream, onOpenInitiativeDetails, onOpenWorkstreamDetails, onOpenNestedWorkstreamDetails, onEditInitiative, onEditWorkstream, onArchiveInitiative, onUnarchiveInitiative, onArchiveWorkstream, onUnarchiveWorkstream, onCreateTaskInWorkstream, onCreateWorkstreamInInitiative, onAssignInitiativeToWorkstream, onOpenTaskById, onAttachTaskToWorkstreamByReference, onAttachWorkstreamToInitiativeByReference, }) {
+export function PlanningDrawer({ open, leftOffset = 0, initiatives, standaloneWorkstreams, 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, onAttachTaskToWorkstreamByReference, onAttachWorkstreamToInitiativeByReference, onAddPlanningContextFile, onRemovePlanningContextFile, onUpdatePlanningContextCaption, }) {
     const hasPrimaryPane = Boolean(detail || editor);
     const hasSecondaryPane = Boolean(secondaryPane);
     const drawerWidth = getPlanningDrawerWidthPx(treeCollapsed, hasPrimaryPane, primaryCollapsed, hasSecondaryPane, secondaryCollapsed);
@@ -222,16 +229,16 @@ export function PlanningDrawer({ open, leftOffset = 0, initiatives, standaloneWo
                         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, onAssignInitiativeToWorkstream: onAssignInitiativeToWorkstream })) : detail ? (_jsx(PlanningDrawerDetailView, { detail: detail, onOpenNestedWorkstreamDetails: detail.type === 'initiative' ? onOpenNestedWorkstreamDetails : undefined, onCreateTaskInWorkstream: detail.type === 'workstream' ? onCreateTaskInWorkstream : undefined, onCreateWorkstreamInInitiative: detail.type === 'initiative' ? onCreateWorkstreamInInitiative : undefined, onOpenTaskById: detail.type === 'workstream' ? onOpenTaskById : undefined, onAttachTaskToWorkstreamByReference: detail.type === 'workstream' ? onAttachTaskToWorkstreamByReference : undefined, onAttachWorkstreamToInitiativeByReference: detail.type === 'initiative' ? onAttachWorkstreamToInitiativeByReference : undefined, onEdit: () => detail.type === 'initiative'
+                    }, 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, onOpenNestedWorkstreamDetails: detail.type === 'initiative' ? onOpenNestedWorkstreamDetails : undefined, onCreateTaskInWorkstream: detail.type === 'workstream' ? onCreateTaskInWorkstream : undefined, onCreateWorkstreamInInitiative: detail.type === 'initiative' ? onCreateWorkstreamInInitiative : undefined, onOpenTaskById: detail.type === 'workstream' ? onOpenTaskById : undefined, onAttachTaskToWorkstreamByReference: detail.type === 'workstream' ? onAttachTaskToWorkstreamByReference : undefined, onAttachWorkstreamToInitiativeByReference: detail.type === 'initiative' ? onAttachWorkstreamToInitiativeByReference : undefined, onEdit: () => detail.type === 'initiative'
                                     ? onEditInitiative(detail.item.id)
                                     : onEditWorkstream(detail.item.id), onArchive: () => detail.type === 'initiative'
                                     ? onArchiveInitiative(detail.item.id)
                                     : onArchiveWorkstream(detail.item.id), onUnarchive: () => detail.type === 'initiative'
                                     ? onUnarchiveInitiative(detail.item.id)
-                                    : onUnarchiveWorkstream(detail.item.id) })) : null })] }))), hasSecondaryPane && (secondaryCollapsed ? (_jsx(CollapsedPane, { label: secondaryPaneLabel, onExpand: onExpandSecondaryPane })) : (_jsxs("div", { className: `${panelStyles.paneShell} ${styles.appScrollbar} tf-scrollbar ${panelStyles.detailPane}`.trim(), style: {
+                                    : 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, onAssignInitiativeToWorkstream: onAssignInitiativeToWorkstream })) : secondaryPane ? (_jsx(PlanningDrawerDetailView, { detail: secondaryPane.detail, onCreateTaskInWorkstream: onCreateTaskInWorkstream, onOpenTaskById: onOpenTaskById, onAttachTaskToWorkstreamByReference: onAttachTaskToWorkstreamByReference, onEdit: () => onEditWorkstream(secondaryPane.detail.item.id), onArchive: () => onArchiveWorkstream(secondaryPane.detail.item.id), onUnarchive: () => onUnarchiveWorkstream(secondaryPane.detail.item.id) })) : null })] })))] }) }));
+                    }, 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, onCreateTaskInWorkstream: onCreateTaskInWorkstream, onOpenTaskById: onOpenTaskById, onAttachTaskToWorkstreamByReference: onAttachTaskToWorkstreamByReference, 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 })] })))] }) }));
 }

package/dist/components/views/panels/PlanningDrawer.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,141 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { PlanningDrawer, } from './PlanningDrawer';
+vi.mock('@dnd-kit/core', async () => {
+    const actual = await vi.importActual('@dnd-kit/core');
+    return {
+        ...actual,
+        useDndContext: () => ({ active: null }),
+        useDraggable: () => ({
+            attributes: {},
+            listeners: {},
+            setNodeRef: () => { },
+            transform: null,
+            isDragging: false,
+        }),
+        useDroppable: () => ({
+            setNodeRef: () => { },
+            isOver: false,
+        }),
+    };
+});
+const initiativeSummary = {
+    id: 'initiative-1',
+    referenceNumber: 12,
+    title: 'Platform Launch',
+    description: 'Coordinate launch work',
+    ownerLabel: null,
+    progressPercent: 0,
+    taskCount: 0,
+    completedTaskCount: 0,
+    workstreamCount: 0,
+    workstreams: [],
+};
+function renderPlanningDrawerHarness(options) {
+    const createWorkstream = vi.fn();
+    const submitEditor = vi.fn();
+    const removePlanningContextFile = options?.onRemovePlanningContextFile || vi.fn();
+    const updatePlanningContextCaption = options?.onUpdatePlanningContextCaption || vi.fn();
+    function Harness() {
+        const [editor, setEditor] = React.useState(null);
+        const [secondaryPane, setSecondaryPane] = React.useState(null);
+        const [draftTitle, setDraftTitle] = React.useState('');
+        const [draftDescription, setDraftDescription] = React.useState('');
+        const [draftOwner, setDraftOwner] = React.useState('');
+        const [draftInitiativeId, setDraftInitiativeId] = React.useState('');
+        const handleSubmitEditor = () => {
+            submitEditor();
+            if ((secondaryPane?.kind === 'editor' && secondaryPane.editor.entityType === 'workstream')
+                || editor?.entityType === 'workstream') {
+                createWorkstream({
+                    title: draftTitle.trim() || 'Untitled Workstream',
+                    initiativeId: draftInitiativeId === 'IN-12' ? initiativeSummary.id : null,
+                });
+            }
+        };
+        return (_jsx(PlanningDrawer, { open: true, initiatives: [initiativeSummary], standaloneWorkstreams: [], activeInitiativeId: "", activeWorkstreamId: "", expandedInitiativeIds: new Set(['initiative-1']), detail: options?.detail ?? null, editor: editor, secondaryPane: secondaryPane, assigneeOptions: [], draftInitiativeSummary: draftInitiativeId === 'IN-12' ? initiativeSummary : null, draftTitle: draftTitle, draftDescription: draftDescription, draftOwner: draftOwner, draftInitiativeId: draftInitiativeId, onChangeDraftTitle: setDraftTitle, onChangeDraftDescription: setDraftDescription, onChangeDraftOwner: setDraftOwner, onChangeDraftInitiativeId: setDraftInitiativeId, onCollapseTreePane: () => { }, onExpandTreePane: () => { }, onCollapsePrimaryPane: () => { }, onExpandPrimaryPane: () => { }, onCollapseSecondaryPane: () => { }, onExpandSecondaryPane: () => { }, onBackFromSecondary: () => setSecondaryPane(null), treeCollapsed: false, primaryCollapsed: false, secondaryCollapsed: false, onCancelEditor: () => setEditor(null), onSubmitEditor: handleSubmitEditor, isSubmittingEditor: false, onCreateInitiative: () => { }, onCreateWorkstream: () => {
+                setSecondaryPane(null);
+                setDraftTitle('');
+                setDraftDescription('');
+                setDraftOwner('');
+                setDraftInitiativeId('');
+                setEditor({ mode: 'create', entityType: 'workstream' });
+            }, onToggleInitiative: () => { }, onSelectInitiative: () => { }, onSelectWorkstream: () => { }, onOpenInitiativeDetails: () => { }, onOpenWorkstreamDetails: () => { }, onOpenNestedWorkstreamDetails: () => { }, onEditInitiative: () => { }, onEditWorkstream: () => { }, onArchiveInitiative: () => { }, onUnarchiveInitiative: () => { }, onArchiveWorkstream: () => { }, onUnarchiveWorkstream: () => { }, onCreateTaskInWorkstream: () => { }, onCreateWorkstreamInInitiative: (initiativeId) => {
+                setDraftTitle('');
+                setDraftDescription('');
+                setDraftOwner('');
+                setDraftInitiativeId(initiativeId === initiativeSummary.id ? 'IN-12' : '');
+                setSecondaryPane({
+                    kind: 'editor',
+                    editor: { mode: 'create', entityType: 'workstream' },
+                });
+            }, onAssignInitiativeToWorkstream: () => { }, onRemovePlanningContextFile: removePlanningContextFile, onUpdatePlanningContextCaption: updatePlanningContextCaption }));
+    }
+    render(_jsx(Harness, {}));
+    return { createWorkstream, removePlanningContextFile, submitEditor, updatePlanningContextCaption };
+}
+describe('PlanningDrawer workstream create submit', () => {
+    it('submits the top-level workstream create editor with Enter', async () => {
+        const user = userEvent.setup();
+        const { createWorkstream, submitEditor } = renderPlanningDrawerHarness();
+        await user.click(screen.getByRole('button', { name: 'Create workstream' }));
+        await user.type(screen.getByPlaceholderText('Content Production'), 'Release Readiness{Enter}');
+        await waitFor(() => {
+            expect(submitEditor).toHaveBeenCalledTimes(1);
+        });
+        expect(createWorkstream).toHaveBeenCalledWith({
+            title: 'Release Readiness',
+            initiativeId: null,
+        });
+    });
+    it('submits the in-initiative workstream create editor with Enter', async () => {
+        const user = userEvent.setup();
+        const { createWorkstream, submitEditor } = renderPlanningDrawerHarness({
+            detail: { type: 'initiative', item: initiativeSummary },
+        });
+        await user.click(screen.getByRole('button', { name: 'Create workstream in this initiative' }));
+        await user.type(screen.getByPlaceholderText('Content Production'), 'Execution Lane{Enter}');
+        await waitFor(() => {
+            expect(submitEditor).toHaveBeenCalledTimes(1);
+        });
+        expect(createWorkstream).toHaveBeenCalledWith({
+            title: 'Execution Lane',
+            initiativeId: 'initiative-1',
+        });
+    });
+});
+describe('PlanningDrawer context attachments', () => {
+    it('wires workstream context caption and remove actions through planning callbacks', async () => {
+        const user = userEvent.setup();
+        const workstreamSummary = {
+            id: 'workstream-1',
+            referenceNumber: 44,
+            title: 'Execution Lane',
+            description: 'Ship the work',
+            ownerLabel: null,
+            progressPercent: 0,
+            taskCount: 0,
+            completedTaskCount: 0,
+            attachmentCount: 1,
+            attachments: [{ path: '/api/taskforce/context/spec.pdf', caption: '', timestamp: '' }],
+            tasks: [],
+        };
+        const removePlanningContextFile = vi.fn();
+        const updatePlanningContextCaption = vi.fn();
+        renderPlanningDrawerHarness({
+            detail: { type: 'workstream', item: workstreamSummary },
+            onRemovePlanningContextFile: removePlanningContextFile,
+            onUpdatePlanningContextCaption: updatePlanningContextCaption,
+        });
+        await user.click(screen.getByText('Context Documents (1)'));
+        fireEvent.change(screen.getByPlaceholderText('Add a label...'), {
+            target: { value: 'Brief' },
+        });
+        await user.click(screen.getByTitle('Delete'));
+        expect(updatePlanningContextCaption).toHaveBeenLastCalledWith('workstream', 'workstream-1', 0, 'Brief');
+        expect(removePlanningContextFile).toHaveBeenCalledWith('workstream', 'workstream-1', 0);
+    });
+});

package/dist/components/views/planningScope.d.ts

@@ -0,0 +1,20 @@
+export type PlanningTaskScope = 'open' | 'archived' | 'deleted';
+type PlanningWorkstreamLike = {
+    id: string;
+    initiativeId?: string | null;
+    isArchived?: boolean;
+};
+type PlanningInitiativeLike<TWorkstream extends PlanningWorkstreamLike> = {
+    id: string;
+    isArchived?: boolean;
+    workstreams: TWorkstream[];
+};
+export declare function isPlanningEntityVisibleForScope(taskScope: PlanningTaskScope, isArchived: boolean): boolean;
+export declare function scopePlanningSummaries<TWorkstream extends PlanningWorkstreamLike, TInitiative extends PlanningInitiativeLike<TWorkstream>>(initiatives: TInitiative[], workstreams: TWorkstream[], taskScope: PlanningTaskScope): {
+    initiatives: TInitiative[];
+    standaloneWorkstreams: TWorkstream[];
+    visibleWorkstreams: TWorkstream[];
+    initiativeById: Map<string, TInitiative>;
+    workstreamById: Map<string, TWorkstream>;
+};
+export {};

package/dist/components/views/planningScope.js

@@ -0,0 +1,25 @@
+export function isPlanningEntityVisibleForScope(taskScope, isArchived) {
+    if (taskScope === 'deleted')
+        return false;
+    return taskScope === 'archived' ? isArchived : !isArchived;
+}
+export function scopePlanningSummaries(initiatives, workstreams, taskScope) {
+    const scopedWorkstreams = workstreams.filter((workstream) => (isPlanningEntityVisibleForScope(taskScope, Boolean(workstream.isArchived))));
+    const visibleInitiatives = taskScope === 'deleted'
+        ? []
+        : initiatives
+            .filter((initiative) => isPlanningEntityVisibleForScope(taskScope, Boolean(initiative.isArchived)))
+            .map((initiative) => ({
+            ...initiative,
+            workstreams: scopedWorkstreams.filter((workstream) => workstream.initiativeId === initiative.id),
+        }));
+    const standaloneWorkstreams = scopedWorkstreams.filter((workstream) => !workstream.initiativeId);
+    const visibleWorkstreams = [...visibleInitiatives.flatMap((initiative) => initiative.workstreams), ...standaloneWorkstreams];
+    return {
+        initiatives: visibleInitiatives,
+        standaloneWorkstreams,
+        visibleWorkstreams,
+        initiativeById: new Map(visibleInitiatives.map((initiative) => [initiative.id, initiative])),
+        workstreamById: new Map(visibleWorkstreams.map((workstream) => [workstream.id, workstream])),
+    };
+}

package/dist/components/views/planningScope.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/views/planningScope.test.js

@@ -0,0 +1,60 @@
+import { describe, expect, it } from 'vitest';
+import { isPlanningEntityVisibleForScope, scopePlanningSummaries } from './planningScope';
+describe('planningScope', () => {
+    it('hides archived entities from open scope and filters archived child workstreams out of visible initiatives', () => {
+        const archivedChild = { id: 'ws-archived', initiativeId: 'in-active', isArchived: true };
+        const activeChild = { id: 'ws-active', initiativeId: 'in-active', isArchived: false };
+        const standaloneActive = { id: 'ws-standalone', initiativeId: null, isArchived: false };
+        const archivedInitiativeChild = { id: 'ws-under-archived', initiativeId: 'in-archived', isArchived: false };
+        const scoped = scopePlanningSummaries([
+            {
+                id: 'in-active',
+                isArchived: false,
+                workstreams: [activeChild, archivedChild],
+            },
+            {
+                id: 'in-archived',
+                isArchived: true,
+                workstreams: [archivedInitiativeChild],
+            },
+            {
+                id: 'in-standalone',
+                isArchived: false,
+                workstreams: [standaloneActive],
+            },
+        ], [activeChild, archivedChild, standaloneActive, archivedInitiativeChild], 'open');
+        expect(isPlanningEntityVisibleForScope('open', false)).toBe(true);
+        expect(isPlanningEntityVisibleForScope('open', true)).toBe(false);
+        expect(scoped.initiatives.map((initiative) => initiative.id)).toEqual(['in-active', 'in-standalone']);
+        expect(scoped.initiatives.find((initiative) => initiative.id === 'in-active')?.workstreams.map((workstream) => workstream.id)).toEqual(['ws-active']);
+        expect(scoped.workstreamById.has('ws-archived')).toBe(false);
+        expect(scoped.workstreamById.has('ws-under-archived')).toBe(false);
+        expect(scoped.standaloneWorkstreams.map((workstream) => workstream.id)).toEqual(['ws-standalone']);
+    });
+    it('shows only archived entities in archived scope', () => {
+        const scoped = scopePlanningSummaries([
+            {
+                id: 'in-active',
+                isArchived: false,
+                workstreams: [{ id: 'ws-active', initiativeId: 'in-active', isArchived: false }],
+            },
+            {
+                id: 'in-archived',
+                isArchived: true,
+                workstreams: [
+                    { id: 'ws-archived', initiativeId: 'in-archived', isArchived: true },
+                    { id: 'ws-active-under-archived', initiativeId: 'in-archived', isArchived: false },
+                ],
+            },
+        ], [
+            { id: 'ws-active', initiativeId: 'in-active', isArchived: false },
+            { id: 'ws-archived', initiativeId: 'in-archived', isArchived: true },
+            { id: 'ws-active-under-archived', initiativeId: 'in-archived', isArchived: false },
+        ], 'archived');
+        expect(isPlanningEntityVisibleForScope('archived', true)).toBe(true);
+        expect(isPlanningEntityVisibleForScope('archived', false)).toBe(false);
+        expect(scoped.initiatives.map((initiative) => initiative.id)).toEqual(['in-archived']);
+        expect(scoped.initiatives[0]?.workstreams.map((workstream) => workstream.id)).toEqual(['ws-archived']);
+        expect(scoped.workstreamById.has('ws-active-under-archived')).toBe(false);
+    });
+});

package/dist/components/views/standalone/modals/AccountHubModal.d.ts

@@ -1,5 +1,12 @@
 import type { AccountProfileSummary } from '../../../../utils/accountProfileSummaryCache';
 import type { ModalRuntimeMode, ModalThemeName } from './types';
+interface LoginMethod {
+    provider: string;
+    providerEmail: string | null;
+    displayNameSnapshot: string | null;
+    linkedAt: string | null;
+    lastLoginAt: string | null;
+}
 interface AccountHubModalProps {
     isOpen: boolean;
     theme: ModalThemeName;
@@ -22,6 +29,24 @@ interface AccountHubModalProps {
     syncStatusLabel: string;
     workspaceSyncError: string | null;
     syncControlBusy: boolean;
+    cloudAuthEnabled: boolean;
+    availableAuthProviders: string[];
+    onFetchLoginMethods: () => Promise<{
+        success: boolean;
+        error?: string;
+        methods?: LoginMethod[];
+    }>;
+    onUnlinkLoginMethod: (provider: string) => Promise<{
+        success: boolean;
+        error?: string;
+        code?: string;
+    }>;
+    onAddPassword: (password: string) => Promise<{
+        success: boolean;
+        error?: string;
+        code?: string;
+    }>;
+    onLinkProvider: (provider: string) => void;
     onClose: () => void;
     onOpenWorkspaceAudit: () => void;
     onBillingIntervalChange: (value: 'month' | 'year') => void;
@@ -32,5 +57,5 @@ interface AccountHubModalProps {
     onToggleWorkspaceSync: (enabled: boolean) => void;
     onOpenHelp: () => void;
 }
-export declare function AccountHubModal({ isOpen, theme, runtimeMode, authRequiredForApi, isAuthenticated, hasAuthIdentity, authIdentityLabel, billingLoading, billingError, billingActionError, billingNotice, billingActionBusy, billingIntervalChoice, accountProfileSummary, currentWorkspaceId, canOpenTeamManagement, canManageWorkspaceSync, workspaceCloudSyncEnabled, syncStatusLabel, workspaceSyncError, syncControlBusy, onClose, onOpenWorkspaceAudit, onBillingIntervalChange, onRefreshBilling, onUpdateInterval, onManageBilling, onStartCheckout, onToggleWorkspaceSync, onOpenHelp, }: AccountHubModalProps): import("react/jsx-runtime").JSX.Element;
+export declare function AccountHubModal({ isOpen, theme, runtimeMode, authRequiredForApi, isAuthenticated, hasAuthIdentity, authIdentityLabel, billingLoading, billingError, billingActionError, billingNotice, billingActionBusy, billingIntervalChoice, accountProfileSummary, currentWorkspaceId, canOpenTeamManagement, canManageWorkspaceSync, workspaceCloudSyncEnabled, syncStatusLabel, workspaceSyncError, syncControlBusy, cloudAuthEnabled, availableAuthProviders, onFetchLoginMethods, onUnlinkLoginMethod, onAddPassword, onLinkProvider, onClose, onOpenWorkspaceAudit, onBillingIntervalChange, onRefreshBilling, onUpdateInterval, onManageBilling, onStartCheckout, onToggleWorkspaceSync, onOpenHelp, }: AccountHubModalProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/views/standalone/modals/AccountHubModal.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
 import { Modal } from '../../../ui/Modal';
 import modalStyles from '../../../ui/Modal.module.css';
 import accountStyles from '../../StandaloneAccount.module.css';
@@ -6,8 +7,10 @@ import authStyles from '../../AuthShell.module.css';
 import managementStyles from '../../StandaloneManagement.module.css';
 import styles from '../../../../Taskforce.module.css';
 import { resolveCommercialLifecyclePresentation } from '../../../../utils/commercialLifecyclePresentation';
-export function AccountHubModal({ isOpen, theme, runtimeMode, authRequiredForApi, isAuthenticated, hasAuthIdentity, authIdentityLabel, billingLoading, billingError, billingActionError, billingNotice, billingActionBusy, billingIntervalChoice, accountProfileSummary, currentWorkspaceId, canOpenTeamManagement, canManageWorkspaceSync, workspaceCloudSyncEnabled, syncStatusLabel, workspaceSyncError, syncControlBusy, onClose, onOpenWorkspaceAudit, onBillingIntervalChange, onRefreshBilling, onUpdateInterval, onManageBilling, onStartCheckout, onToggleWorkspaceSync, onOpenHelp, }) {
+import { getPasswordPolicyGuidance, validatePasswordPolicy } from '../../../../shared/passwordPolicy';
+export function AccountHubModal({ isOpen, theme, runtimeMode, authRequiredForApi, isAuthenticated, hasAuthIdentity, authIdentityLabel, billingLoading, billingError, billingActionError, billingNotice, billingActionBusy, billingIntervalChoice, accountProfileSummary, currentWorkspaceId, canOpenTeamManagement, canManageWorkspaceSync, workspaceCloudSyncEnabled, syncStatusLabel, workspaceSyncError, syncControlBusy, cloudAuthEnabled, availableAuthProviders, onFetchLoginMethods, onUnlinkLoginMethod, onAddPassword, onLinkProvider, onClose, onOpenWorkspaceAudit, onBillingIntervalChange, onRefreshBilling, onUpdateInterval, onManageBilling, onStartCheckout, onToggleWorkspaceSync, onOpenHelp, }) {
     const lifecyclePresentation = resolveCommercialLifecyclePresentation(accountProfileSummary);
+    const addPasswordGuidance = getPasswordPolicyGuidance();
     const billingRecoveryMessage = lifecyclePresentation.message;
     const startCheckoutLabel = lifecyclePresentation.primaryLabel || 'Start Checkout';
     const resolvedPlanLabel = String(accountProfileSummary?.planName || accountProfileSummary?.planId || 'n/a').trim() || 'n/a';
@@ -18,6 +21,77 @@ export function AccountHubModal({ isOpen, theme, runtimeMode, authRequiredForApi
         }
         onStartCheckout();
     };
+    // ── Login methods state ──────────────────────────────────────────────────────
+    const [loginMethods, setLoginMethods] = useState([]);
+    const [loginMethodsLoading, setLoginMethodsLoading] = useState(false);
+    const [loginMethodsError, setLoginMethodsError] = useState(null);
+    const [unlinkBusy, setUnlinkBusy] = useState(null); // provider being unlinked
+    const [unlinkError, setUnlinkError] = useState(null);
+    const [showAddPassword, setShowAddPassword] = useState(false);
+    const [addPasswordValue, setAddPasswordValue] = useState('');
+    const [addPasswordBusy, setAddPasswordBusy] = useState(false);
+    const [addPasswordError, setAddPasswordError] = useState(null);
+    const [addPasswordDone, setAddPasswordDone] = useState(false);
+    // Reload login methods whenever the modal opens (and auth is available)
+    useEffect(() => {
+        if (!isOpen || !isAuthenticated || !cloudAuthEnabled)
+            return;
+        setLoginMethodsLoading(true);
+        setLoginMethodsError(null);
+        onFetchLoginMethods().then(result => {
+            setLoginMethodsLoading(false);
+            if (result.success && result.methods) {
+                setLoginMethods(result.methods);
+            }
+            else {
+                setLoginMethodsError(result.error || 'Failed to load login methods.');
+            }
+        });
+    }, [isOpen, isAuthenticated, cloudAuthEnabled, onFetchLoginMethods]);
+    const handleUnlink = async (provider) => {
+        setUnlinkBusy(provider);
+        setUnlinkError(null);
+        const result = await onUnlinkLoginMethod(provider);
+        setUnlinkBusy(null);
+        if (!result.success) {
+            setUnlinkError(result.error || 'Unlink failed.');
+        }
+        else {
+            setLoginMethods(prev => prev.filter(m => m.provider !== provider));
+        }
+    };
+    const handleAddPassword = async () => {
+        const validation = validatePasswordPolicy(addPasswordValue);
+        if (!validation.ok) {
+            setAddPasswordError(validation.message || 'Password does not meet the password policy.');
+            return;
+        }
+        setAddPasswordBusy(true);
+        setAddPasswordError(null);
+        const result = await onAddPassword(addPasswordValue);
+        setAddPasswordBusy(false);
+        if (!result.success) {
+            setAddPasswordError(result.error || 'Failed to add password.');
+        }
+        else {
+            setAddPasswordDone(true);
+            setAddPasswordValue('');
+            setShowAddPassword(false);
+            // Refresh the list to show the new password method
+            const updated = await onFetchLoginMethods();
+            if (updated.success && updated.methods)
+                setLoginMethods(updated.methods);
+        }
+    };
+    const PROVIDER_LABELS = {
+        password: 'Email & Password',
+        google: 'Google',
+        github: 'GitHub',
+        apple: 'Apple',
+    };
+    const linkedProviders = new Set(loginMethods.map(m => m.provider));
+    const hasPassword = linkedProviders.has('password');
+    const linkableProviders = availableAuthProviders.filter(p => p !== 'password' && !linkedProviders.has(p));
     return (_jsx(Modal, { isOpen: isOpen, onClose: onClose, title: "Account Hub", size: "md", theme: theme, draggable: true, children: _jsxs("div", { className: `${modalStyles.form} ${managementStyles.modalBody}`, children: [_jsx("p", { className: managementStyles.mutedText, children: "Manage sign in, profile, and workspace controls from one place." }), _jsxs("div", { className: accountStyles.accountHubCard, children: [_jsx("strong", { children: "Authentication" }), _jsx("p", { className: managementStyles.sectionText, children: runtimeMode === 'cloud'
                                 ? (authRequiredForApi
                                     ? (isAuthenticated ? 'Signed in. API access is enabled.' : 'Cloud mode requires sign in before app usage.')
@@ -26,7 +100,7 @@ export function AccountHubModal({ isOpen, theme, runtimeMode, authRequiredForApi
                                 ? (hasAuthIdentity
                                     ? _jsxs(_Fragment, { children: ["Signed in as ", _jsx("span", { className: accountStyles.accountIdentityEmail, children: authIdentityLabel })] })
                                     : 'Signed in')
-                                : 'Signed in as: not signed in' }), runtimeMode === 'cloud' && authRequiredForApi && !isAuthenticated && (_jsx("p", { className: managementStyles.sectionTextTop, children: "Use the `/login` screen to sign in." }))] }), _jsxs("div", { className: accountStyles.accountHubCard, children: [_jsx("strong", { children: "Profile & Account" }), _jsx("p", { className: managementStyles.sectionText, children: "Profile editing and account preferences will live here." })] }), _jsxs("div", { className: accountStyles.accountHubCard, children: [_jsx("strong", { children: "Billing" }), !isAuthenticated ? (_jsx("p", { className: managementStyles.sectionText, children: "Sign in to manage subscription billing." })) : runtimeMode !== 'cloud' ? (_jsx("p", { className: managementStyles.sectionText, children: "Billing remains cloud-backed in local runtime and uses your connected cloud account." })) : (_jsxs(_Fragment, { children: [billingLoading && (_jsx("p", { className: managementStyles.sectionTextSpaced, children: "Loading billing status..." })), billingError && (_jsx("p", { className: `${authStyles.loginError} ${managementStyles.errorText}`, children: billingError })), billingActionError && (_jsx("p", { className: `${authStyles.loginError} ${managementStyles.errorText}`, children: billingActionError })), billingNotice && (_jsx("p", { className: managementStyles.errorText, children: billingNotice })), billingRecoveryMessage && (_jsx("p", { className: managementStyles.sectionText, children: billingRecoveryMessage })), _jsxs("p", { className: managementStyles.sectionTextSpaced, children: ["Plan: ", _jsx("code", { children: resolvedPlanLabel }), ' · ', "Entitlement: ", _jsx("code", { children: String(accountProfileSummary?.entitlementState || 'n/a') })] }), _jsxs("p", { className: managementStyles.sectionText, children: ["Stripe status: ", _jsx("code", { children: String(accountProfileSummary?.stripeStatus || 'n/a') }), accountProfileSummary?.effectiveUntil ? ` · Effective until ${new Date(accountProfileSummary.effectiveUntil).toLocaleString()}` : ''] }), _jsx("div", { className: managementStyles.wrapRow, children: _jsxs("label", { className: `${accountStyles.accountMenuMeta} ${managementStyles.inlineFieldLabel}`, children: ["Interval", _jsxs("select", { className: styles.input, value: billingIntervalChoice, onChange: (event) => onBillingIntervalChange(event.target.value === 'year' ? 'year' : 'month'), disabled: billingActionBusy, children: [_jsx("option", { value: "month", children: "Monthly" }), _jsx("option", { value: "year", children: "Yearly" })] })] }) }), _jsxs("div", { className: managementStyles.actionRowEnd, children: [_jsx("button", { className: styles.cancelBtn, onClick: onRefreshBilling, disabled: billingActionBusy || billingLoading, children: "Refresh Billing" }), _jsx("button", { className: styles.cancelBtn, onClick: onUpdateInterval, disabled: billingActionBusy || !accountProfileSummary?.stripeSubscriptionId, children: "Update Interval" }), _jsx("button", { className: styles.cancelBtn, onClick: onManageBilling, disabled: billingActionBusy || !accountProfileSummary?.stripeCustomerId, children: "Manage Billing" }), _jsx("button", { className: styles.submitBtn, onClick: primaryBillingAction, disabled: billingActionBusy || (lifecyclePresentation.primaryAction === 'manage_billing' && !accountProfileSummary?.stripeCustomerId), children: billingActionBusy ? 'Working...' : startCheckoutLabel })] })] }))] }), _jsxs("div", { className: accountStyles.accountHubCard, children: [_jsx("strong", { children: "Workspace Audit Log" }), _jsx("p", { className: managementStyles.sectionText, children: "Audit entries are workspace-scoped for the active workspace, not global account history." }), _jsxs("p", { className: managementStyles.sectionText, children: ["Active workspace: ", _jsx("code", { children: currentWorkspaceId })] }), _jsx("div", { className: managementStyles.actionRowEnd, children: _jsx("button", { className: styles.cancelBtn, onClick: onOpenWorkspaceAudit, disabled: !canOpenTeamManagement, children: "Open Workspace Audit" }) })] }), _jsxs("div", { className: accountStyles.accountHubCard, children: [_jsx("strong", { children: "Workspace Cloud Sync" }), _jsx("p", { className: managementStyles.sectionText, children: canManageWorkspaceSync
+                                : 'Signed in as: not signed in' }), runtimeMode === 'cloud' && authRequiredForApi && !isAuthenticated && (_jsx("p", { className: managementStyles.sectionTextTop, children: "Use the `/login` screen to sign in." }))] }), isAuthenticated && cloudAuthEnabled && (_jsxs("div", { className: accountStyles.accountHubCard, children: [_jsx("strong", { children: "Login Methods" }), loginMethodsLoading && (_jsx("p", { className: managementStyles.sectionText, children: "Loading..." })), loginMethodsError && (_jsx("p", { className: `${authStyles.loginError} ${managementStyles.errorText}`, children: loginMethodsError })), unlinkError && (_jsx("p", { className: `${authStyles.loginError} ${managementStyles.errorText}`, children: unlinkError })), addPasswordDone && (_jsx("p", { className: managementStyles.sectionText, style: { color: 'var(--color-success, #4ade80)' }, children: "Password login added." })), !loginMethodsLoading && loginMethods.length > 0 && (_jsx("div", { style: { marginTop: 8, display: 'grid', gap: 6 }, children: loginMethods.map(method => (_jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, flexWrap: 'wrap' }, children: [_jsxs("span", { className: managementStyles.sectionText, children: [_jsx("strong", { children: PROVIDER_LABELS[method.provider] || method.provider }), method.providerEmail ? _jsxs(_Fragment, { children: [" \u00B7 ", _jsx("span", { className: accountStyles.accountMenuMeta, children: method.providerEmail })] }) : null] }), loginMethods.length > 1 && (_jsx("button", { className: styles.cancelBtn, style: { fontSize: 11, padding: '2px 8px' }, disabled: unlinkBusy === method.provider, onClick: () => handleUnlink(method.provider), children: unlinkBusy === method.provider ? 'Removing…' : 'Remove' }))] }, method.provider))) })), !loginMethodsLoading && !hasPassword && !showAddPassword && (_jsx("div", { className: managementStyles.actionRowEnd, children: _jsx("button", { className: styles.cancelBtn, onClick: () => { setShowAddPassword(true); setAddPasswordDone(false); setAddPasswordError(null); }, children: "Add Password Login" }) })), showAddPassword && (_jsxs("div", { style: { marginTop: 10, display: 'grid', gap: 6 }, children: [_jsxs("label", { className: accountStyles.accountMenuMeta, style: { display: 'block' }, children: ["New password", _jsx("input", { type: "password", className: styles.input, placeholder: "Use 12+ characters", value: addPasswordValue, onChange: e => setAddPasswordValue(e.target.value), disabled: addPasswordBusy, style: { marginTop: 4, display: 'block', width: '100%' }, autoComplete: "new-password" })] }), _jsx("p", { className: accountStyles.accountMenuMeta, style: { margin: 0 }, children: addPasswordGuidance.join(' ') }), addPasswordError && (_jsx("p", { className: `${authStyles.loginError} ${managementStyles.errorText}`, children: addPasswordError })), _jsxs("div", { className: managementStyles.actionRowEnd, children: [_jsx("button", { className: styles.cancelBtn, onClick: () => { setShowAddPassword(false); setAddPasswordValue(''); setAddPasswordError(null); }, disabled: addPasswordBusy, children: "Cancel" }), _jsx("button", { className: styles.submitBtn, onClick: handleAddPassword, disabled: addPasswordBusy || !addPasswordValue, children: addPasswordBusy ? 'Saving…' : 'Save Password' })] })] })), !loginMethodsLoading && linkableProviders.length > 0 && (_jsxs("div", { style: { marginTop: 10 }, children: [_jsx("p", { className: accountStyles.accountMenuMeta, style: { marginBottom: 6 }, children: "Link another account:" }), _jsx("div", { className: authStyles.oauthButtons, children: linkableProviders.map(provider => (_jsx("button", { className: authStyles.oauthButton, onClick: () => onLinkProvider(provider), children: PROVIDER_LABELS[provider] || provider }, provider))) })] }))] })), _jsxs("div", { className: accountStyles.accountHubCard, children: [_jsx("strong", { children: "Profile & Account" }), _jsx("p", { className: managementStyles.sectionText, children: "Profile editing and account preferences will live here." })] }), _jsxs("div", { className: accountStyles.accountHubCard, children: [_jsx("strong", { children: "Billing" }), !isAuthenticated ? (_jsx("p", { className: managementStyles.sectionText, children: "Sign in to manage subscription billing." })) : runtimeMode !== 'cloud' ? (_jsx("p", { className: managementStyles.sectionText, children: "Billing remains cloud-backed in local runtime and uses your connected cloud account." })) : (_jsxs(_Fragment, { children: [billingLoading && (_jsx("p", { className: managementStyles.sectionTextSpaced, children: "Loading billing status..." })), billingError && (_jsx("p", { className: `${authStyles.loginError} ${managementStyles.errorText}`, children: billingError })), billingActionError && (_jsx("p", { className: `${authStyles.loginError} ${managementStyles.errorText}`, children: billingActionError })), billingNotice && (_jsx("p", { className: managementStyles.errorText, children: billingNotice })), billingRecoveryMessage && (_jsx("p", { className: managementStyles.sectionText, children: billingRecoveryMessage })), _jsxs("p", { className: managementStyles.sectionTextSpaced, children: ["Plan: ", _jsx("code", { children: resolvedPlanLabel }), ' · ', "Entitlement: ", _jsx("code", { children: String(accountProfileSummary?.entitlementState || 'n/a') })] }), _jsxs("p", { className: managementStyles.sectionText, children: ["Stripe status: ", _jsx("code", { children: String(accountProfileSummary?.stripeStatus || 'n/a') }), accountProfileSummary?.effectiveUntil ? ` · Effective until ${new Date(accountProfileSummary.effectiveUntil).toLocaleString()}` : ''] }), _jsx("div", { className: managementStyles.wrapRow, children: _jsxs("label", { className: `${accountStyles.accountMenuMeta} ${managementStyles.inlineFieldLabel}`, children: ["Interval", _jsxs("select", { className: styles.input, value: billingIntervalChoice, onChange: (event) => onBillingIntervalChange(event.target.value === 'year' ? 'year' : 'month'), disabled: billingActionBusy, children: [_jsx("option", { value: "month", children: "Monthly" }), _jsx("option", { value: "year", children: "Yearly" })] })] }) }), _jsxs("div", { className: managementStyles.actionRowEnd, children: [_jsx("button", { className: styles.cancelBtn, onClick: onRefreshBilling, disabled: billingActionBusy || billingLoading, children: "Refresh Billing" }), _jsx("button", { className: styles.cancelBtn, onClick: onUpdateInterval, disabled: billingActionBusy || !accountProfileSummary?.stripeSubscriptionId, children: "Update Interval" }), _jsx("button", { className: styles.cancelBtn, onClick: onManageBilling, disabled: billingActionBusy || !accountProfileSummary?.stripeCustomerId, children: "Manage Billing" }), _jsx("button", { className: styles.submitBtn, onClick: primaryBillingAction, disabled: billingActionBusy || (lifecyclePresentation.primaryAction === 'manage_billing' && !accountProfileSummary?.stripeCustomerId), children: billingActionBusy ? 'Working...' : startCheckoutLabel })] })] }))] }), _jsxs("div", { className: accountStyles.accountHubCard, children: [_jsx("strong", { children: "Workspace Audit Log" }), _jsx("p", { className: managementStyles.sectionText, children: "Audit entries are workspace-scoped for the active workspace, not global account history." }), _jsxs("p", { className: managementStyles.sectionText, children: ["Active workspace: ", _jsx("code", { children: currentWorkspaceId })] }), _jsx("div", { className: managementStyles.actionRowEnd, children: _jsx("button", { className: styles.cancelBtn, onClick: onOpenWorkspaceAudit, disabled: !canOpenTeamManagement, children: "Open Workspace Audit" }) })] }), _jsxs("div", { className: accountStyles.accountHubCard, children: [_jsx("strong", { children: "Workspace Cloud Sync" }), _jsx("p", { className: managementStyles.sectionText, children: canManageWorkspaceSync
                                 ? (workspaceCloudSyncEnabled
                                     ? `Enabled · ${syncStatusLabel}`
                                     : 'Disabled')