@taskforcehq/taskforce 0.3.304 → 0.3.306

package/dist/components/task/TaskKanban.d.ts

@@ -53,6 +53,7 @@ interface TaskKanbanProps {
     filterPriorities?: number[];
     filterStatus?: string[];
     filterAssignees?: TaskAssignee[];
+    filtersReady?: boolean;
     scheduleFilteredTaskIds?: string[];
     categories?: CategoryConfig[];
     compressed?: boolean;
@@ -71,5 +72,5 @@ interface TaskKanbanProps {
     workstreams?: WorkstreamItem[];
     initiatives?: InitiativeItem[];
 }
-export declare function TaskKanban({ tasks, columns: kanbanColumns, groupBy, searchQuery, copiedId, taxonomies, types, priorities, approaches, assigneeOptions, onUpdateTask, onTaskClick, onOpenTaskById, onCopyId, onToggleInProgress, onToggleReview, onToggleComplete, onToggleCancel, onSetStatus, onArchiveTask, onUnarchive, onDelete, allTasks, onAddTaskToColumn, emptyColumnMode, filterCategories, filterTypes, filterPriorities, filterStatus, filterAssignees, scheduleFilteredTaskIds, categories, compressed, readOnlyMode, recentlyChangedTaskIds, scheduleDates, onScheduleDaySelected, persistedScrollLeft, onScrollLeftChange, sortBy, sortOrder, planningDropTargets, onAssignTaskToWorkstream, onAssignWorkstreamToInitiative, showTaskCardStatusLabel, workstreams, initiatives, }: TaskKanbanProps): import("react/jsx-runtime").JSX.Element;
+export declare function TaskKanban({ tasks, columns: kanbanColumns, groupBy, searchQuery, copiedId, taxonomies, types, priorities, approaches, assigneeOptions, onUpdateTask, onTaskClick, onOpenTaskById, onCopyId, onToggleInProgress, onToggleReview, onToggleComplete, onToggleCancel, onSetStatus, onArchiveTask, onUnarchive, onDelete, allTasks, onAddTaskToColumn, emptyColumnMode, filterCategories, filterTypes, filterPriorities, filterStatus, filterAssignees, filtersReady, scheduleFilteredTaskIds, categories, compressed, readOnlyMode, recentlyChangedTaskIds, scheduleDates, onScheduleDaySelected, persistedScrollLeft, onScrollLeftChange, sortBy, sortOrder, planningDropTargets, onAssignTaskToWorkstream, onAssignWorkstreamToInitiative, showTaskCardStatusLabel, workstreams, initiatives, }: TaskKanbanProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/task/TaskKanban.js

@@ -11,7 +11,7 @@ import { buildScheduleDropResult, buildStatusTransitionUpdates, getGroupedTaskSt
 import * as Icons from 'lucide-react';
 import { IconMap, resolveColor } from '../../utils/constants';
 const EXPIRED_CARD_ID_PREFIX = 'expired::';
-export function TaskKanban({ tasks, columns: kanbanColumns, groupBy, searchQuery, copiedId, taxonomies, types, priorities, approaches, assigneeOptions = [], onUpdateTask, onTaskClick, onOpenTaskById, onCopyId, onToggleInProgress, onToggleReview, onToggleComplete, onToggleCancel, onSetStatus, onArchiveTask, onUnarchive, onDelete, allTasks = [], onAddTaskToColumn, emptyColumnMode = 'show', filterCategories = [], filterTypes = [], filterPriorities = [], filterStatus = [], filterAssignees = [], scheduleFilteredTaskIds, categories = [], compressed = false, readOnlyMode = null, recentlyChangedTaskIds = [], scheduleDates, onScheduleDaySelected, persistedScrollLeft, onScrollLeftChange, sortBy = 'created', sortOrder = 'desc', planningDropTargets = null, onAssignTaskToWorkstream, onAssignWorkstreamToInitiative, showTaskCardStatusLabel = true, workstreams = [], initiatives = [], }) {
+export function TaskKanban({ tasks, columns: kanbanColumns, groupBy, searchQuery, copiedId, taxonomies, types, priorities, approaches, assigneeOptions = [], onUpdateTask, onTaskClick, onOpenTaskById, onCopyId, onToggleInProgress, onToggleReview, onToggleComplete, onToggleCancel, onSetStatus, onArchiveTask, onUnarchive, onDelete, allTasks = [], onAddTaskToColumn, emptyColumnMode = 'show', filterCategories = [], filterTypes = [], filterPriorities = [], filterStatus = [], filterAssignees = [], filtersReady = true, scheduleFilteredTaskIds, categories = [], compressed = false, readOnlyMode = null, recentlyChangedTaskIds = [], scheduleDates, onScheduleDaySelected, persistedScrollLeft, onScrollLeftChange, sortBy = 'created', sortOrder = 'desc', planningDropTargets = null, onAssignTaskToWorkstream, onAssignWorkstreamToInitiative, showTaskCardStatusLabel = true, workstreams = [], initiatives = [], }) {
     const [activeId, setActiveId] = useState(null);
     const [isHeaderPanning, setIsHeaderPanning] = useState(false);
     const [headerPanEnabled, setHeaderPanEnabled] = useState(false);
@@ -53,7 +53,8 @@ export function TaskKanban({ tasks, columns: kanbanColumns, groupBy, searchQuery
     // Sensors
     const sensors = useSensors(useSensor(PointerSensor, {
         activationConstraint: {
-            distance: 5, // Prevent accidental drags
+            // Give normal clicks a bit more tolerance so slight trackpad drift still opens the task.
+            distance: 10,
         },
     }), useSensor(KeyboardSensor, {
         coordinateGetter: sortableKeyboardCoordinates,
@@ -129,20 +130,99 @@ export function TaskKanban({ tasks, columns: kanbanColumns, groupBy, searchQuery
         ]);
         return dateToColumn.get(scheduledDate) || '__offweek';
     };
+    const inferredKanbanColumns = useMemo(() => {
+        if (groupBy === 'schedule')
+            return [];
+        const existingValues = new Set(kanbanColumns.map((column) => String(column.value)));
+        const existingLabels = new Set(kanbanColumns.map((column) => column.label));
+        const inferred = [];
+        const buildColumn = (task) => {
+            const rawValue = groupBy === 'status'
+                ? getTaskStatus(task)
+                : task[groupBy];
+            const value = String(rawValue ?? '');
+            if (!value || existingValues.has(value) || existingLabels.has(value))
+                return null;
+            if (groupBy === 'category') {
+                const category = categories.find((entry) => entry.value === value || entry.label === value);
+                return {
+                    value,
+                    label: category?.label || value,
+                    icon: category?.icon || 'Folder',
+                    color: category?.color,
+                };
+            }
+            if (groupBy === 'type') {
+                const type = types?.find((entry) => entry.value === value || entry.label === value);
+                return {
+                    value,
+                    label: type?.label || value,
+                    icon: type?.icon || 'CheckSquare',
+                    color: type?.color,
+                };
+            }
+            if (groupBy === 'priority') {
+                const priority = priorities?.find((entry) => Number(entry.value) === Number(value));
+                return {
+                    value: Number.isFinite(Number(value)) ? Number(value) : value,
+                    label: priority?.label || value,
+                    icon: priority?.icon || 'Flag',
+                    color: priority?.color,
+                };
+            }
+            if (groupBy === 'complexity') {
+                return {
+                    value: Number.isFinite(Number(value)) ? Number(value) : value,
+                    label: value,
+                    icon: 'Gauge',
+                };
+            }
+            if (groupBy === 'status') {
+                return {
+                    value,
+                    label: value,
+                    icon: 'Circle',
+                };
+            }
+            if (groupBy === 'assignee') {
+                const option = assigneeOptions.find((entry) => entry.value === value);
+                return {
+                    value,
+                    label: option?.label || value,
+                    icon: option?.icon === 'HelpCircle' ? 'Circle' : option?.icon,
+                    color: option?.color,
+                };
+            }
+            return {
+                value,
+                label: value,
+            };
+        };
+        for (const task of tasks) {
+            const column = buildColumn(task);
+            if (!column)
+                continue;
+            inferred.push(column);
+            existingValues.add(String(column.value));
+            existingLabels.add(column.label);
+        }
+        return inferred;
+    }, [assigneeOptions, categories, groupBy, kanbanColumns, priorities, tasks, types]);
+    const effectiveKanbanColumns = useMemo(() => [...kanbanColumns, ...inferredKanbanColumns], [inferredKanbanColumns, kanbanColumns]);
     const columnLookup = useMemo(() => {
         const map = new Map();
-        for (const column of kanbanColumns) {
+        for (const column of effectiveKanbanColumns) {
             map.set(String(column.value), column);
             if (!map.has(column.label)) {
                 map.set(column.label, column);
             }
         }
         return map;
-    }, [kanbanColumns]);
+    }, [effectiveKanbanColumns]);
     // Totals for "X / Y" display
     const columnTotals = useMemo(() => {
         const counts = {};
-        kanbanColumns.forEach(col => { counts[String(col.value)] = 0; });
+        effectiveKanbanColumns.forEach(col => { counts[String(col.value)] = 0; });
         const totalsSource = allTasks.length > 0 ? allTasks : tasks;
         totalsSource.forEach(task => {
             let stringValue = '';
@@ -169,12 +249,12 @@ export function TaskKanban({ tasks, columns: kanbanColumns, groupBy, searchQuery
             }
         });
         return counts;
-    }, [allTasks, tasks, kanbanColumns, groupBy, columnLookup, todayDateOnly]);
+    }, [allTasks, tasks, effectiveKanbanColumns, groupBy, columnLookup, todayDateOnly]);
     // Group items by the groupBy field
     const groupedTasks = useMemo(() => {
         const groups = {};
         // Initialize all columns
-        kanbanColumns.forEach(col => {
+        effectiveKanbanColumns.forEach(col => {
             groups[String(col.value)] = [];
         });
         // Distribute tasks
@@ -231,7 +311,7 @@ export function TaskKanban({ tasks, columns: kanbanColumns, groupBy, searchQuery
             });
         }
         return groups;
-    }, [tasks, allTasks, kanbanColumns, groupBy, columnLookup, scheduleFilteredTaskIdSet, todayDateOnly, sortBy, sortOrder]);
+    }, [tasks, allTasks, effectiveKanbanColumns, groupBy, columnLookup, scheduleFilteredTaskIdSet, todayDateOnly, sortBy, sortOrder]);
     const activeTaskId = activeId ? getTaskIdFromCardId(activeId) : null;
     const activeTaskOverlay = activeTaskId ? tasks.find(t => t.id === activeTaskId) : null;
     // Scroll Syncing Refs and Logic
@@ -247,6 +327,8 @@ export function TaskKanban({ tasks, columns: kanbanColumns, groupBy, searchQuery
     const lastReportedScrollLeftRef = useRef(-1);
     // Calculate total width for scroll syncing
     const getIsColumnHidden = (columnValue, title) => {
+        if (!filtersReady)
+            return false;
         if (groupBy === 'category')
             return !filterCategories.includes(String(columnValue));
         if (groupBy === 'type')
@@ -268,7 +350,7 @@ export function TaskKanban({ tasks, columns: kanbanColumns, groupBy, searchQuery
         const COL_WIDTH = 320;
         const COL_COLLAPSED = 72;
         let width = 0;
-        kanbanColumns.forEach((col, index) => {
+        effectiveKanbanColumns.forEach((col, index) => {
             const items = groupedTasks[String(col.value)] || [];
             const isExplicitlyHidden = getIsColumnHidden(col.value, col.label);
             const isAutoHidden = groupBy !== 'schedule' && emptyColumnMode === 'hide' && items.length === 0;
@@ -279,7 +361,7 @@ export function TaskKanban({ tasks, columns: kanbanColumns, groupBy, searchQuery
             width += GAP;
         });
         return width;
-    }, [kanbanColumns, groupedTasks, emptyColumnMode, groupBy, filterCategories, filterTypes, filterPriorities, filterStatus]);
+    }, [effectiveKanbanColumns, groupedTasks, emptyColumnMode, groupBy, filterCategories, filterTypes, filterPriorities, filterStatus, filterAssignees, filtersReady]);
     const emitScrollLeft = useCallback((scrollLeft) => {
         if (!onScrollLeftChange)
             return;
@@ -352,7 +434,7 @@ export function TaskKanban({ tasks, columns: kanbanColumns, groupBy, searchQuery
         return () => {
             window.removeEventListener('resize', updatePanAvailability);
         };
-    }, [totalWidth, kanbanColumns.length, groupedTasks]);
+    }, [totalWidth, effectiveKanbanColumns.length, groupedTasks]);
     useEffect(() => {
         const handlePointerMove = (event) => {
             const pan = panStateRef.current;
@@ -473,7 +555,7 @@ export function TaskKanban({ tasks, columns: kanbanColumns, groupBy, searchQuery
             return;
         // Find the column definition
         const column = columnLookup.get(containerId)
-            || kanbanColumns.find(c => String(c.value) === containerId || c.label === containerId);
+            || effectiveKanbanColumns.find(c => String(c.value) === containerId || c.label === containerId);
         if (column) {
             if (groupBy === 'schedule') {
                 const targetColumn = String(column.value);
@@ -680,12 +762,12 @@ export function TaskKanban({ tasks, columns: kanbanColumns, groupBy, searchQuery
     return (_jsxs(DndContext, { sensors: sensors, collisionDetection: customCollisionDetection, onDragStart: handleDragStart, onDragOver: handleDragOver, onDragEnd: handleDragEnd, onDragCancel: (event) => {
             lastPlanningOverRef.current = null;
             setActiveId(null);
-        }, children: [planningDropTargets, _jsxs("div", { className: styles.kanbanWrapper, children: [_jsx("div", { ref: topScrollRef, className: `${styles.kanbanTopScroll} tf-scrollbar`, children: _jsx("div", { className: styles.kanbanTopScrollSpacer, style: { width: `${totalWidth}px` } }) }), _jsx("div", { className: styles.kanbanContainer, ref: containerRef, children: kanbanColumns.map((column) => {
+        }, children: [planningDropTargets, _jsxs("div", { className: styles.kanbanWrapper, children: [_jsx("div", { ref: topScrollRef, className: `${styles.kanbanTopScroll} tf-scrollbar`, children: _jsx("div", { className: styles.kanbanTopScrollSpacer, style: { width: `${totalWidth}px` } }) }), _jsx("div", { className: styles.kanbanContainer, ref: containerRef, children: effectiveKanbanColumns.map((column) => {
                             const columnTasks = groupedTasks[String(column.value)] || [];
                             const isExplicitlyHidden = getIsColumnHidden(column.value, column.label);
                             const isAutoHidden = groupBy !== 'schedule' && emptyColumnMode === 'hide' && columnTasks.length === 0;
                             const isScheduleMode = groupBy === 'schedule';
-                            const hasBacklogColumn = isScheduleMode && kanbanColumns.some((entry) => String(entry.value) === 'backlog');
+                            const hasBacklogColumn = isScheduleMode && effectiveKanbanColumns.some((entry) => String(entry.value) === 'backlog');
                             const isBacklog = isScheduleMode && String(column.value) === 'backlog';
                             const isExpired = isScheduleMode && String(column.value) === 'expired';
                             const backlogTasks = groupedTasks.backlog || [];

package/dist/components/task/TaskKanban.test.js

@@ -61,3 +61,39 @@ describe('TaskKanban schedule expired behavior', () => {
         expect(screen.getByText('1 / 2')).toBeInTheDocument();
     });
 });
+describe('TaskKanban filter bootstrap behavior', () => {
+    it('keeps task columns visible while filters are still initializing', () => {
+        const task = makeTask({
+            id: 'task-filter-bootstrap',
+            title: 'Filter bootstrap visible task',
+            category: 'shared'
+        });
+        render(_jsx(TaskKanban, { tasks: [task], allTasks: [task], columns: [
+                { value: 'shared', label: 'Shared', color: '#3b82f6', icon: 'Folder' }
+            ], groupBy: "category", filterCategories: [], filtersReady: false, onUpdateTask: vi.fn(), onTaskClick: vi.fn() }));
+        expect(screen.getByText('Shared')).toBeInTheDocument();
+        expect(screen.getByText('Filter bootstrap visible task')).toBeInTheDocument();
+    });
+    it('renders a discoverable task when category columns are not loaded yet', () => {
+        const task = makeTask({
+            id: 'task-missing-category-columns',
+            title: 'Visible before categories load',
+            category: 'default'
+        });
+        render(_jsx(TaskKanban, { tasks: [task], allTasks: [task], columns: [], groupBy: "category", filterCategories: [], filtersReady: false, onUpdateTask: vi.fn(), onTaskClick: vi.fn() }));
+        expect(screen.getByText('default')).toBeInTheDocument();
+        expect(screen.getByText('Visible before categories load')).toBeInTheDocument();
+    });
+    it('hides filtered-out columns after filters initialize', () => {
+        const task = makeTask({
+            id: 'task-filter-ready',
+            title: 'Filter ready hidden task',
+            category: 'shared'
+        });
+        render(_jsx(TaskKanban, { tasks: [task], allTasks: [task], columns: [
+                { value: 'shared', label: 'Shared', color: '#3b82f6', icon: 'Folder' }
+            ], groupBy: "category", filterCategories: [], filtersReady: true, onUpdateTask: vi.fn(), onTaskClick: vi.fn() }));
+        expect(screen.queryByText('Shared')).not.toBeInTheDocument();
+        expect(screen.queryByText('Filter ready hidden task')).not.toBeInTheDocument();
+    });
+});

package/dist/components/ui/EditableAvatarButton.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+interface EditableAvatarButtonProps {
+    label: string;
+    imageUrl?: string | null;
+    fallback?: React.ReactNode;
+    accentColor?: string | null;
+    size?: number;
+    width?: number;
+    height?: number;
+    radius?: number | string;
+    editBadgeSize?: number | string;
+    editIconSize?: number;
+    disabled?: boolean;
+    className?: string;
+    onClick: () => void;
+}
+export declare function EditableAvatarButton({ label, imageUrl, fallback, accentColor, size, width, height, radius, editBadgeSize, editIconSize, disabled, className, onClick, }: EditableAvatarButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ui/EditableAvatarButton.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Pencil } from 'lucide-react';
+import styles from './EditableAvatarButton.module.css';
+export function EditableAvatarButton({ label, imageUrl, fallback, accentColor, size = 52, width, height, radius, editBadgeSize, editIconSize = 16, disabled = false, className = '', onClick, }) {
+    const normalizedImageUrl = String(imageUrl || '').trim();
+    const resolvedWidth = width ?? size;
+    const resolvedHeight = height ?? size;
+    const resolvedRadius = typeof radius === 'number' ? `${radius}px` : radius;
+    const resolvedEditBadgeSize = typeof editBadgeSize === 'number' ? `${editBadgeSize}px` : editBadgeSize;
+    return (_jsxs("button", { type: "button", className: `${styles.editableAvatarButton} ${className}`.trim(), "aria-label": label, title: label, onClick: onClick, disabled: disabled, style: {
+            ['--editable-avatar-size']: `${size}px`,
+            ['--editable-avatar-width']: `${resolvedWidth}px`,
+            ['--editable-avatar-height']: `${resolvedHeight}px`,
+            ...(resolvedRadius ? { ['--editable-avatar-radius']: resolvedRadius } : {}),
+            ...(resolvedEditBadgeSize ? { ['--editable-avatar-badge-size']: resolvedEditBadgeSize } : {}),
+            ...(accentColor ? { ['--editable-avatar-accent']: accentColor } : {})
+        }, children: [normalizedImageUrl ? (_jsx("img", { src: normalizedImageUrl, alt: "", className: styles.editableAvatarImage })) : (_jsx("span", { className: styles.editableAvatarFallback, children: fallback })), _jsx("span", { className: styles.editableAvatarBadge, "aria-hidden": "true", children: _jsx(Pencil, { size: editIconSize }) })] }));
+}

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

@@ -4,6 +4,7 @@ export type BillingPricingType = 'stripe' | 'free';
 export interface PublicPricingPlan {
     planId: string;
     displayName: string;
+    description?: string | null;
     status: string;
     defaultVersion: {
         planVersionId: string;
@@ -15,6 +16,10 @@ export interface PublicPricingPlan {
         featureKey: string;
         access: string;
         config?: Record<string, unknown>;
+        label?: string | null;
+        description?: string | null;
+        publicLabel?: string | null;
+        publicDescription?: string | null;
     }>;
     pricing: {
         month: {
@@ -55,6 +60,7 @@ interface PlanComparisonPageProps {
     currentPlanId?: string | null;
     currentPlanVersionId?: string | null;
     currentEntitlementState?: string | null;
+    markCurrentPlan?: boolean;
     canManageCurrentPlan?: boolean;
     pricingEndpoint?: string;
     statusBanner?: {
@@ -67,8 +73,10 @@ interface PlanComparisonPageProps {
     topActions?: React.ReactNode;
     shellOwnsScroll?: boolean;
     showPageBackButton?: boolean;
+    showHeaderBarWithChrome?: boolean;
+    currentPlanCardActionMode?: 'manage' | 'indicator' | 'hidden';
     fallbackPricingSource?: PricingSourceDetails | null;
     onSelectPlan: (intent: PlanSelectionIntent) => void | Promise<void>;
 }
-export declare function PlanComparisonPage({ heading, subtitle, variant, chrome, footer, isAuthenticated, authSessionResolved, currentPlanId, currentPlanVersionId, currentEntitlementState, canManageCurrentPlan, pricingEndpoint, statusBanner, onBack, backLabel, backDisabled, topActions, shellOwnsScroll, showPageBackButton, fallbackPricingSource, onSelectPlan }: PlanComparisonPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function PlanComparisonPage({ heading, subtitle, variant, chrome, footer, isAuthenticated, authSessionResolved, currentPlanId, currentPlanVersionId, currentEntitlementState, markCurrentPlan, canManageCurrentPlan, pricingEndpoint, statusBanner, onBack, backLabel, backDisabled, topActions, shellOwnsScroll, showPageBackButton, showHeaderBarWithChrome, currentPlanCardActionMode, fallbackPricingSource, onSelectPlan }: PlanComparisonPageProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/views/PlanComparisonPage.js

@@ -3,6 +3,7 @@ import { useEffect, useMemo, useState } from 'react';
 import { CheckCircle2, Loader2 } from 'lucide-react';
 import taskforceStyles from '../../Taskforce.module.css';
 import styles from './PlansPage.module.css';
+import { isCommercialEntitlementActive } from '../../utils/commercialLifecyclePresentation';
 function isDebugModeEnabled() {
     const runtimeOverride = globalThis.__DEBUG_MODE__;
     if (typeof runtimeOverride === 'boolean')
@@ -60,11 +61,49 @@ function getPlanSortRank(plan) {
         return Math.min(...numericAmounts);
     return Number.POSITIVE_INFINITY;
 }
-function isActiveEntitlementState(raw) {
-    const value = String(raw || '').trim().toLowerCase();
-    return value === 'active' || value === 'trialing' || value === 'grace';
+function formatFeatureKeyFallback(featureKey) {
+    return String(featureKey || '')
+        .replace(/[_\-.]+/g, ' ')
+        .replace(/\b\w/g, (c) => c.toUpperCase());
 }
-export function PlanComparisonPage({ heading, subtitle, variant = 'app', chrome, footer, isAuthenticated, authSessionResolved = true, currentPlanId, currentPlanVersionId, currentEntitlementState, canManageCurrentPlan = true, pricingEndpoint, statusBanner, onBack, backLabel, backDisabled = false, topActions, shellOwnsScroll = false, showPageBackButton = true, fallbackPricingSource = null, onSelectPlan }) {
+function readConfiguredFeatureLimit(config, key) {
+    const rawValue = config?.[key];
+    const numericValue = Number(rawValue);
+    if (!Number.isFinite(numericValue))
+        return null;
+    const normalized = Math.max(1, Math.floor(numericValue));
+    return normalized;
+}
+function getFeatureDisplayParts(feature, seatLimit) {
+    const baseLabel = String(feature.publicLabel || feature.label || '').trim() || formatFeatureKeyFallback(feature.featureKey);
+    const config = feature.config && typeof feature.config === 'object' ? feature.config : {};
+    if (feature.featureKey === 'context.uploads') {
+        const storageLimitMb = readConfiguredFeatureLimit(config, 'storageLimitMb');
+        if (storageLimitMb !== null) {
+            return { limitValue: String(storageLimitMb), limitUnit: 'MB', baseLabel };
+        }
+    }
+    if (feature.featureKey === 'workspace.workspaces') {
+        const maxWorkspaces = readConfiguredFeatureLimit(config, 'maxWorkspaces');
+        if (maxWorkspaces !== null) {
+            return { limitValue: String(maxWorkspaces), limitUnit: 'x', baseLabel };
+        }
+    }
+    if (feature.featureKey === 'collaboration.ai_profiles') {
+        const maxAiProfiles = readConfiguredFeatureLimit(config, 'maxAiProfiles');
+        if (maxAiProfiles !== null) {
+            return { limitValue: String(maxAiProfiles), limitUnit: 'x', baseLabel };
+        }
+    }
+    if (feature.featureKey === 'collaboration.team_management') {
+        const normalizedSeatLimit = Number(seatLimit);
+        if (Number.isFinite(normalizedSeatLimit) && normalizedSeatLimit > 0) {
+            return { limitValue: String(Math.floor(normalizedSeatLimit)), limitUnit: 'x', baseLabel };
+        }
+    }
+    return { limitValue: null, limitUnit: null, baseLabel };
+}
+export function PlanComparisonPage({ heading, subtitle, variant = 'app', chrome, footer, isAuthenticated, authSessionResolved = true, currentPlanId, currentPlanVersionId, currentEntitlementState, markCurrentPlan, canManageCurrentPlan = true, pricingEndpoint, statusBanner, onBack, backLabel, backDisabled = false, topActions, shellOwnsScroll = false, showPageBackButton = true, showHeaderBarWithChrome = false, currentPlanCardActionMode = 'manage', fallbackPricingSource = null, onSelectPlan }) {
     const [plans, setPlans] = useState([]);
     const [pricingSource, setPricingSource] = useState(null);
     const [loading, setLoading] = useState(true);
@@ -117,6 +156,7 @@ export function PlanComparisonPage({ heading, subtitle, variant = 'app', chrome,
         return String(a.displayName || a.planId).localeCompare(String(b.displayName || b.planId));
     }), [plans]);
     const pricingSourceLabel = useMemo(() => formatPricingSource(pricingSource || fallbackPricingSource), [fallbackPricingSource, pricingSource]);
+    const planSelectionEnabled = authSessionResolved;
     const contentClassName = `${styles.plansWrapper} ${shellOwnsScroll ? styles.shellOwnsScroll : 'tf-scrollbar'} ${variant === 'site' ? styles.siteVariant : ''} ${chrome ? styles.withChrome : ''}`.trim();
     const wrapPage = (content) => {
         if (shellOwnsScroll) {
@@ -124,13 +164,13 @@ export function PlanComparisonPage({ heading, subtitle, variant = 'app', chrome,
         }
         return (_jsxs("div", { className: taskforceStyles.standaloneWrapper, "data-theme": "dark", children: [chrome, content, footer] }));
     };
-    if (loading || !authSessionResolved) {
+    if (loading) {
         return wrapPage(_jsx(_Fragment, { children: _jsx("div", { className: contentClassName, children: _jsx("div", { className: styles.contentFrame, children: _jsxs("div", { className: styles.loader, children: [_jsx(Loader2, { size: 48, className: styles.spinner }), _jsx("p", { children: "Loading plans..." })] }) }) }) }));
     }
     if (error) {
         return wrapPage(_jsx(_Fragment, { children: _jsx("div", { className: contentClassName, children: _jsx("div", { className: styles.contentFrame, children: _jsxs("div", { className: styles.emptyState, children: [_jsx("h2", { children: "Connecting to plan pricing..." }), _jsx("p", { children: error }), _jsx("button", { className: styles.backBtn, onClick: () => setRetryNonce((value) => value + 1), children: "Retry" })] }) }) }) }));
     }
-    return wrapPage(_jsx(_Fragment, { children: _jsx("div", { className: contentClassName, children: _jsxs("div", { className: styles.contentFrame, children: [_jsxs("div", { className: styles.header, children: [!chrome && (showPageBackButton || topActions) && (_jsxs("div", { className: styles.headerBar, children: [_jsx("div", { children: showPageBackButton ? (_jsx("button", { className: styles.backBtn, onClick: onBack, disabled: backDisabled, children: backLabel })) : null }), _jsx("div", { className: styles.headerActions, children: topActions })] })), _jsx("h1", { className: styles.title, children: heading }), subtitle && _jsx("p", { className: styles.subtitle, children: subtitle }), isDebugModeEnabled() && pricingSourceLabel ? (_jsxs("p", { className: styles.debugMeta, children: ["Pricing source: ", pricingSourceLabel] })) : null, statusBanner && (_jsx("div", { className: `${styles.statusBanner} ${statusBanner.type === 'success'
+    return wrapPage(_jsx(_Fragment, { children: _jsx("div", { className: contentClassName, children: _jsxs("div", { className: styles.contentFrame, children: [_jsxs("div", { className: styles.header, children: [(!chrome || showHeaderBarWithChrome) && (showPageBackButton || topActions) && (_jsxs("div", { className: styles.headerBar, children: [_jsx("div", { children: showPageBackButton ? (_jsx("button", { className: styles.backBtn, onClick: onBack, disabled: backDisabled, children: backLabel })) : null }), _jsx("div", { className: styles.headerActions, children: topActions })] })), _jsx("h1", { className: styles.title, children: heading }), subtitle && _jsx("p", { className: styles.subtitle, children: subtitle }), isDebugModeEnabled() && pricingSourceLabel ? (_jsxs("p", { className: styles.debugMeta, children: ["Pricing source: ", pricingSourceLabel] })) : null, statusBanner && (_jsx("div", { className: `${styles.statusBanner} ${statusBanner.type === 'success'
                                     ? styles.successBanner
                                     : (statusBanner.type === 'info' ? styles.infoBanner : styles.errorBanner)}`, children: statusBanner.message }))] }), sortedPlans.length === 0 ? (_jsxs("div", { className: `${styles.emptyState} ${styles.marketingEmptyState}`, children: [_jsx("span", { className: styles.emptyBadge, children: "Coming Soon" }), _jsx("h2", { children: "Paid plans are getting their final polish." }), _jsx("p", { children: "Taskforce pricing is on the way with flexible options for solo operators, teams, and larger rollouts. Check back soon for launch tiers, feature bundles, and early access details." }), _jsxs("div", { className: styles.emptyHighlights, "aria-label": "Upcoming pricing highlights", children: [_jsx("span", { children: "Launch-ready tiers" }), _jsx("span", { children: "Team billing controls" }), _jsx("span", { children: "Feature-based packaging" })] })] })) : (_jsx("div", { className: styles.grid, children: sortedPlans.map((plan) => {
                             const monthPrice = plan.pricing.month;
@@ -138,18 +178,28 @@ export function PlanComparisonPage({ heading, subtitle, variant = 'app', chrome,
                             const hasMonth = isSelectablePrice(monthPrice);
                             const hasYear = isSelectablePrice(yearPrice);
                             const planVersionId = String(plan.defaultVersion?.planVersionId || '').trim();
-                            const isCurrent = Boolean(planVersionId
+                            const hasActiveEntitlement = isCommercialEntitlementActive(currentEntitlementState);
+                            const shouldMarkCurrentPlan = markCurrentPlan ?? hasActiveEntitlement;
+                            const hasKnownLinkedPlan = Boolean(planVersionId
                                 && currentPlanVersionId
-                                && currentPlanVersionId === planVersionId
-                                && isActiveEntitlementState(currentEntitlementState)) || (!currentPlanVersionId
+                                && currentPlanVersionId === planVersionId) || Boolean(!currentPlanVersionId
                                 && Boolean(currentPlanId && currentPlanId === plan.planId));
+                            const isCurrent = shouldMarkCurrentPlan && hasKnownLinkedPlan && currentEntitlementState !== 'canceled';
                             const defaultInterval = hasMonth ? 'month' : (hasYear ? 'year' : null);
                             const defaultPrice = defaultInterval === 'year' ? yearPrice : monthPrice;
-                            const canSelectCard = Boolean(planVersionId) && (isCurrent ? canManageCurrentPlan : Boolean(defaultInterval));
+                            const currentPlanShowsManageAction = currentPlanCardActionMode === 'manage';
+                            const currentPlanShowsIndicator = currentPlanCardActionMode === 'indicator';
+                            const canSelectCard = planSelectionEnabled
+                                && Boolean(planVersionId)
+                                && (isCurrent
+                                    ? (currentPlanShowsManageAction && canManageCurrentPlan)
+                                    : Boolean(defaultInterval));
                             const handleCardSelect = () => {
                                 if (!planVersionId)
                                     return;
                                 if (isCurrent) {
+                                    if (!currentPlanShowsManageAction)
+                                        return;
                                     if (!canManageCurrentPlan)
                                         return;
                                     void onSelectPlan({
@@ -176,23 +226,26 @@ export function PlanComparisonPage({ heading, subtitle, variant = 'app', chrome,
                                         event.preventDefault();
                                         handleCardSelect();
                                     }
-                                } : undefined, children: [isCurrent && _jsx("span", { className: styles.currentBadge, children: "Current Plan" }), _jsx("h3", { className: styles.planName, children: plan.displayName }), _jsx("div", { className: styles.featuresList, children: Array.isArray(plan.features) && plan.features.length > 0 ? plan.features.map((feature, idx) => (_jsxs("div", { className: styles.featureItem, children: [_jsx(CheckCircle2, { className: styles.featureIcon }), _jsx("span", { className: styles.featureText, children: String(feature.featureKey || '').replace(/[_\-.]+/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase()) })] }, `${feature.featureKey}-${idx}`))) : (_jsx("span", { className: styles.featureText, children: "No additional features included" })) }), _jsxs("div", { className: styles.priceRows, children: [_jsxs("div", { className: styles.priceRow, children: [_jsx("span", { className: styles.priceRowAmount, children: renderPriceLabel(monthPrice) }), _jsx("span", { className: styles.priceRowInterval, children: "/ month" })] }), _jsxs("div", { className: styles.priceRow, children: [_jsx("span", { className: styles.priceRowAmount, children: renderPriceLabel(yearPrice) }), _jsx("span", { className: styles.priceRowInterval, children: "/ year" })] })] }), isCurrent ? (_jsx("button", { className: `${styles.callToAction} ${styles.currentCta}`, "data-testid": `plan-manage-${plan.planId}`, onClick: (event) => {
+                                } : undefined, children: [isCurrent && _jsx("span", { className: styles.currentBadge, children: "Current Plan" }), _jsx("h3", { className: styles.planName, children: plan.displayName }), String(plan.description || '').trim() && (_jsx("p", { className: styles.planDescription, children: String(plan.description || '').trim() })), _jsx("div", { className: styles.featuresList, children: Array.isArray(plan.features) && plan.features.length > 0 ? plan.features.map((feature, idx) => (_jsxs("div", { className: styles.featureItem, children: [_jsx(CheckCircle2, { className: styles.featureIcon }), _jsxs("div", { className: styles.featureTextBlock, children: [(() => {
+                                                            const { limitValue, limitUnit, baseLabel } = getFeatureDisplayParts(feature, plan.defaultVersion?.seatLimit);
+                                                            return (_jsxs("span", { className: styles.featureText, children: [limitValue && (_jsxs("span", { className: styles.featureLimitAccent, children: [_jsx("span", { children: limitValue }), limitUnit ? (_jsx("span", { className: limitUnit === 'MB' ? styles.featureLimitUnit : undefined, children: limitUnit })) : null] })), _jsx("span", { children: limitValue ? ` ${baseLabel}` : baseLabel })] }));
+                                                        })(), String(feature.publicDescription || feature.description || '').trim() && (_jsx("span", { className: styles.featureDescription, children: String(feature.publicDescription || feature.description || '').trim() }))] })] }, `${feature.featureKey}-${idx}`))) : (_jsx("span", { className: styles.featureText, children: "No additional features included" })) }), (hasMonth || hasYear) ? (_jsxs("div", { className: styles.priceRows, children: [hasMonth ? (_jsxs("div", { className: styles.priceRow, children: [_jsx("span", { className: styles.priceRowAmount, children: renderPriceLabel(monthPrice) }), _jsx("span", { className: styles.priceRowInterval, children: "/ month" })] })) : null, hasYear ? (_jsxs("div", { className: styles.priceRow, children: [_jsx("span", { className: styles.priceRowAmount, children: renderPriceLabel(yearPrice) }), _jsx("span", { className: styles.priceRowInterval, children: "/ year" })] })) : null] })) : null, isCurrent ? (currentPlanShowsManageAction ? (_jsx("button", { className: `${styles.callToAction} ${styles.currentCta}`, "data-testid": `plan-manage-${plan.planId}`, onClick: (event) => {
                                             event.stopPropagation();
                                             if (!canManageCurrentPlan)
                                                 return;
                                             void onSelectPlan({ planId: plan.planId, planVersionId, interval: defaultInterval || 'month', pricingType: defaultPrice?.pricingType || 'stripe', isCurrentPlan: true });
-                                        }, disabled: !planVersionId || !canManageCurrentPlan, children: isAuthenticated
+                                        }, disabled: !planVersionId || !canManageCurrentPlan || !planSelectionEnabled, children: isAuthenticated
                                             ? (canManageCurrentPlan ? 'Manage Plan' : 'Current Plan')
-                                            : 'Current Plan' })) : (_jsxs("div", { className: styles.ctaRow, children: [_jsx("button", { className: `${styles.callToAction} ${styles.secondaryCta}`, "data-testid": `plan-select-${plan.planId}-month`, onClick: (event) => {
+                                            : 'Current Plan' })) : (currentPlanShowsIndicator ? (_jsx("button", { className: `${styles.callToAction} ${styles.currentCta}`, "data-testid": `plan-current-${plan.planId}`, disabled: true, children: "Current Plan" })) : null)) : (_jsxs("div", { className: styles.ctaRow, children: [hasMonth ? (_jsx("button", { className: `${styles.callToAction} ${styles.secondaryCta}`, "data-testid": `plan-select-${plan.planId}-month`, onClick: (event) => {
                                                     event.stopPropagation();
                                                     void onSelectPlan({ planId: plan.planId, planVersionId, interval: 'month', pricingType: monthPrice?.pricingType || 'stripe', isCurrentPlan: false });
-                                                }, disabled: !planVersionId || !hasMonth, children: monthPrice?.pricingType === 'free'
+                                                }, disabled: !planVersionId || !planSelectionEnabled, children: monthPrice?.pricingType === 'free'
                                                     ? (isAuthenticated ? 'Select Free' : 'Get Started Free')
-                                                    : (isAuthenticated ? 'Choose Monthly' : 'Get Started Monthly') }), _jsx("button", { className: `${styles.callToAction} ${styles.primaryCta}`, "data-testid": `plan-select-${plan.planId}-year`, onClick: (event) => {
+                                                    : (isAuthenticated ? 'Choose Monthly' : 'Get Started Monthly') })) : null, hasYear ? (_jsx("button", { className: `${styles.callToAction} ${styles.primaryCta}`, "data-testid": `plan-select-${plan.planId}-year`, onClick: (event) => {
                                                     event.stopPropagation();
                                                     void onSelectPlan({ planId: plan.planId, planVersionId, interval: 'year', pricingType: yearPrice?.pricingType || 'stripe', isCurrentPlan: false });
-                                                }, disabled: !planVersionId || !hasYear, children: yearPrice?.pricingType === 'free'
+                                                }, disabled: !planVersionId || !planSelectionEnabled, children: yearPrice?.pricingType === 'free'
                                                     ? (isAuthenticated ? 'Select Free' : 'Get Started Free')
-                                                    : (isAuthenticated ? 'Choose Yearly' : 'Get Started Yearly') })] }))] }, plan.planId));
+                                                    : (isAuthenticated ? 'Choose Yearly' : 'Get Started Yearly') })) : null] }))] }, plan.planId));
                         }) }))] }) }) }));
 }