@taskforcehq/taskforce 0.3.306 → 0.3.307

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

@@ -32,11 +32,11 @@ describe('TaskContextUpload drag and drop', () => {
     const renderUpload = (contextFiles = [], taskId, extraProps) => render(_jsx(TaskContextUpload, { taskId: taskId, contextFiles: contextFiles, onAddContextFile: onAddContextFile, onRemoveContextFile: onRemoveContextFile, onUpdateContextCaption: onUpdateContextCaption, ...extraProps }));
     const openSection = async (user) => {
         const localUser = user ?? userEvent.setup();
-        const showToggle = screen.queryByTitle('Show context documents');
-        if (showToggle) {
+        if (!screen.queryByText('Drop files or URLs here')) {
+            const showToggle = await screen.findByTitle('Show context documents');
             await localUser.click(showToggle);
         }
-        return screen.getByText('Drop files or URLs here');
+        return screen.findByText('Drop files or URLs here');
     };
     beforeEach(() => {
         vi.clearAllMocks();

package/dist/components/task/TaskForm.js

@@ -14,12 +14,21 @@ import { Markdown } from "../ui/Markdown";
 import { IconMap, resolveColor } from "../../utils/constants";
 import { formatDate } from "../../utils/formatting";
 import { t } from "../../localization";
-import { TaskContextUpload } from "./TaskContextUpload";
-import { getTaskActivityItems, getTaskEventPrimaryChangeField, summarizeTaskChange, summarizeTaskEvent, } from "../../utils/taskActivity";
+import { getTaskActivityItems } from "../../utils/taskActivity";
 import { ensureAssigneeOptionPresent, getAssigneeKind, getAssigneeLabel, } from "../../utils/assignees";
 import { getTaskReferenceLabel } from "../../utils/taskReferences";
 import { getVisibleTaskFormTaxonomies } from "../../utils/taxonomyFormDefaults.js";
 import { getInitiativeReferenceLabel, getWorkstreamReferenceLabel, } from "../../utils/planningReferences";
+const DeferredEntityActivityTimeline = React.lazy(() => (import("../activity/EntityActivityTimeline").then((module) => ({
+    default: module.EntityActivityTimeline,
+}))));
+const DeferredTaskContextUpload = React.lazy(() => (import("./TaskContextUpload").then((module) => ({
+    default: module.TaskContextUpload,
+}))));
+function ActivityTimelineFallback({ count }) {
+    const placeholderCount = Math.max(2, Math.min(count || 3, 4));
+    return (_jsx("div", { className: `${formStyles.commentThread} ${formStyles.activityLoadingThread}`.trim(), "aria-busy": "true", "aria-live": "polite", "aria-label": "Loading activity", children: Array.from({ length: placeholderCount }, (_, index) => (_jsxs("div", { className: formStyles.activitySkeletonItem, children: [_jsx("div", { className: formStyles.activitySkeletonMeta }), _jsx("div", { className: formStyles.activitySkeletonBody })] }, index))) }));
+}
 function SortableChecklistRow({ id, item, onToggle, onRemove, }) {
     const { attributes, listeners, setNodeRef, transform, transition, isDragging, } = useSortable({ id });
     const style = {
@@ -31,12 +40,6 @@ function SortableChecklistRow({ id, item, onToggle, onRemove, }) {
                     ? "Mark checklist item incomplete"
                     : "Mark checklist item complete", children: item.isCompleted ? _jsx(Check, { size: 14, strokeWidth: 2.1 }) : null }), _jsx("span", { className: `${formStyles.checklistItemText} ${item.isCompleted ? formStyles.checklistItemTextCompleted : ""}`.trim(), children: item.title }), _jsx("button", { type: "button", className: formStyles.checklistRemoveBtn, onClick: onRemove, title: "Remove checklist item", "aria-label": "Remove checklist item", children: _jsx(X, { size: 15, strokeWidth: 1.9 }) })] }));
 }
-function hexToRgba(hex, opacity) {
-    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-    if (!result)
-        return "";
-    return `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}, ${opacity})`;
-}
 export function TaskForm(props) {
     const { editingTaskId, error, title, description, category, type, priority, complexity, manualComplexityEnabled = false, assignee, scheduledDate, dueDate, workstreamInput = "", checklistItems, comments, newCommentText, contextFiles, currentWorkspaceId, apiBaseUrl, descriptionFocused, showMarkdownHelp, showChecklist = false, checklistEnabled = true, formTaxonomies, onTaxonomyChange, onOpenSettings, categories, types, priorities, taxonomyDisplayLabels, assigneeOptions, taxonomies, workstreams = [], initiatives = [], copiedId, onTitleChange, onDescriptionChange, onCategoryChange, onTypeChange, onPriorityChange, onComplexityChange, onAssigneeChange, onScheduledDateChange, onDueDateChange, onWorkstreamInputChange = () => { }, onChecklistItemsChange, onNewCommentTextChange, onDescriptionFocusedChange, onShowMarkdownHelpChange, onShowChecklistChange = () => { }, onSubmit, onAddComment, onAddContextFile, onRemoveContextFile, onUpdateContextCaption, onCopyId, onToggleInProgress, onToggleReview, onToggleComplete, onToggleCancel, onSetStatus, onArchiveTask, onUnarchive, onOpenTaskById, currentTask, commentsEndRef, } = props;
     const currentTaskReferenceLabel = getTaskReferenceLabel(currentTask);
@@ -381,65 +384,12 @@ export function TaskForm(props) {
         const frame = window.requestAnimationFrame(scrollToLatest);
         return () => window.cancelAnimationFrame(frame);
     }, [activityCount, commentsEndRef, currentTask?.id, editingTaskId]);
-    const activitySidebar = editingTaskId ? (_jsxs("aside", { className: formStyles.activitySidebar, "aria-label": t("taskForm.commentsSectionTitle"), children: [_jsxs("div", { className: formStyles.activitySidebarHeader, children: [_jsx("h2", { className: formStyles.activitySidebarTitle, children: t("taskForm.commentsSectionTitle") }), _jsx("span", { className: formStyles.activitySidebarCount, children: activityCount })] }), _jsxs("div", { className: `${formStyles.commentPanel} ${formStyles.activitySidebarPanel}`.trim(), children: [_jsxs("div", { className: formStyles.commentThread, children: [activityCount === 0 && (_jsx("div", { className: formStyles.emptyComments, children: t("taskForm.noComments") })), taskActivityItems.map((item) => {
-                                if (item.type === "comment") {
-                                    const c = item.comment;
-                                    const actorPresentation = resolveActivityActorPresentation({
-                                        actorId: c.author,
-                                        actorType: c.actor?.kind === "ai"
-                                            ? "ai"
-                                            : c.actor?.kind === "human"
-                                                ? "human"
-                                                : null,
-                                        actorProfile: c.actor,
-                                    });
-                                    const commentKind = actorPresentation.kind === "agent" ? "agent" : "member";
-                                    const { ActorIcon: CommentActorIcon } = actorPresentation;
-                                    const authorColor = actorPresentation.color;
-                                    const authorLabel = actorPresentation.label;
-                                    const commentAccentStyle = authorColor && hexToRgba(authorColor, 0.35)
-                                        ? {
-                                            background: `linear-gradient(135deg, ${hexToRgba(authorColor, 0.18)} 0%, ${hexToRgba(authorColor, 0.1)} 100%)`,
-                                            borderColor: hexToRgba(authorColor, 0.35),
-                                        }
-                                        : undefined;
-                                    return (_jsxs("div", { className: `${formStyles.comment} ${commentKind === "agent" ? formStyles.commentAi : formStyles.commentUser}`, children: [_jsxs("div", { className: formStyles.commentHeader, children: [_jsx("span", { className: formStyles.commentAuthor, style: authorColor ? { color: authorColor } : undefined, children: _jsxs(_Fragment, { children: [_jsx(CommentActorIcon, { size: 12, strokeWidth: 1.5 }), " ", authorLabel] }) }), _jsx("span", { className: formStyles.commentTime, children: formatDate(c.timestamp, {
-                                                            month: "short",
-                                                            day: "numeric",
-                                                            hour: "2-digit",
-                                                            minute: "2-digit",
-                                                        }) })] }), _jsx("div", { className: formStyles.commentText, style: commentAccentStyle, children: _jsx(Markdown, { onTaskIdClick: onOpenTaskById, children: c.text }) })] }, c.id));
-                                }
-                                const event = item.event;
-                                const actorPresentation = resolveActivityActorPresentation({
-                                    actorId: event.actor,
-                                    actorType: event.actorType,
-                                    actorProfile: event.actorProfile,
-                                    fallbackKind: "system",
-                                });
-                                const { ActorIcon: EventActorIcon } = actorPresentation;
-                                const authorColor = actorPresentation.color;
-                                const authorLabel = actorPresentation.label;
-                                const eventKind = actorPresentation.kind;
-                                const changeEntries = Object.entries(event.details?.changes || {});
-                                const primaryChangeField = getTaskEventPrimaryChangeField(event);
-                                const displayedChangeEntries = changeEntries.length > 1 && primaryChangeField
-                                    ? changeEntries.filter(([field]) => field !== primaryChangeField)
-                                    : changeEntries.length > 1
-                                        ? changeEntries
-                                        : [];
-                                return (_jsxs("div", { className: `${formStyles.comment} ${formStyles.activityEvent} ${eventKind === "system" ? formStyles.activityEventSystem : ""}`, children: [_jsxs("div", { className: `${formStyles.commentHeader} ${formStyles.activityEventHeader}`, children: [_jsx("span", { className: formStyles.commentAuthor, style: authorColor ? { color: authorColor } : undefined, children: _jsxs(_Fragment, { children: [_jsx(EventActorIcon, { size: 12, strokeWidth: 1.5 }), " ", authorLabel] }) }), _jsx("span", { className: formStyles.commentTime, children: formatDate(event.createdAt, {
-                                                        month: "short",
-                                                        day: "numeric",
-                                                        hour: "2-digit",
-                                                        minute: "2-digit",
-                                                    }) })] }), _jsxs("div", { className: formStyles.activityEventText, children: [_jsx("div", { children: summarizeTaskEvent(event, formatActivityFieldValue) }), displayedChangeEntries.length > 0 && (_jsx("div", { className: formStyles.activityEventChanges, children: displayedChangeEntries.map(([field, change]) => (_jsx("div", { className: formStyles.activityEventChange, children: summarizeTaskChange(field, change, formatActivityFieldValue) }, field))) }))] })] }, item.id));
-                            }), _jsx("div", { ref: commentsEndRef })] }), _jsxs("div", { className: formStyles.commentInputArea, children: [_jsx("textarea", { className: formStyles.commentInput, placeholder: t("taskForm.commentPlaceholder"), value: newCommentText, onChange: (e) => onNewCommentTextChange(e.target.value), onKeyDown: (e) => {
+    const activitySidebar = editingTaskId ? (_jsxs("aside", { className: formStyles.activitySidebar, "aria-label": t("taskForm.commentsSectionTitle"), children: [_jsxs("div", { className: formStyles.activitySidebarHeader, children: [_jsx("h2", { className: formStyles.activitySidebarTitle, children: t("taskForm.commentsSectionTitle") }), _jsx("span", { className: formStyles.activitySidebarCount, children: activityCount })] }), _jsxs("div", { className: `${formStyles.commentPanel} ${formStyles.activitySidebarPanel}`.trim(), children: [_jsx(React.Suspense, { fallback: _jsx(ActivityTimelineFallback, { count: activityCount }), children: _jsx(DeferredEntityActivityTimeline, { activity: currentTask?.activity, comments: comments, formatFieldValue: formatActivityFieldValue, resolveActorPresentation: resolveActivityActorPresentation, onOpenTaskById: onOpenTaskById, emptyMessage: t("taskForm.noComments"), listClassName: formStyles.commentThread, emptyClassName: formStyles.emptyComments, endRef: commentsEndRef }) }), _jsxs("div", { className: formStyles.commentInputArea, children: [_jsx("textarea", { className: formStyles.commentInput, placeholder: t("taskForm.commentPlaceholder"), value: newCommentText, onChange: (e) => onNewCommentTextChange(e.target.value), onKeyDown: (e) => {
                                     if (e.key === "Enter" && !e.shiftKey) {
                                         e.preventDefault();
                                         onAddComment();
                                     }
-                                }, rows: 1 }), _jsx("button", { type: "button", className: formStyles.sendCommentBtn, onClick: onAddComment, disabled: !newCommentText.trim(), "aria-label": "Send comment", title: "Send comment", children: _jsx(Send, { size: 16 }) })] })] })] })) : null;
+                                }, rows: 4 }), _jsx("button", { type: "button", className: formStyles.sendCommentBtn, onClick: onAddComment, disabled: !newCommentText.trim(), "aria-label": "Send comment", title: "Send comment", children: _jsx(Send, { size: 16 }) })] })] })] })) : null;
     return (_jsxs("form", { ref: formRef, onSubmit: onSubmit, className: `${styles.form} ${styles.appScrollbar} tf-scrollbar`, children: [error && _jsx("div", { className: formStyles.error, children: error }), isReadOnly && (_jsx("div", { className: `${formStyles.formNotice} tf-text-helper`, children: isDeletedReadOnly
                     ? "Deleted tasks are read-only. Restore the task to make changes."
                     : "Archived tasks are read-only. Unarchive the task to make changes." })), _jsxs("fieldset", { disabled: isReadOnly, className: `${formStyles.formFieldsetReset} ${editingTaskId ? formStyles.formLayoutWithSidebar : formStyles.formLayout}`.trim(), children: [_jsxs("div", { className: formStyles.formMainColumn, children: [_jsxs("div", { className: styles.field, children: [_jsxs("div", { className: styles.labelRow, children: [_jsx("label", { className: styles.label, children: "Title" }), assignee && (_jsx("span", { title: `Assigned to: ${currentAssigneeLabel}`, className: [
@@ -560,7 +510,7 @@ export function TaskForm(props) {
                                                                     .map((entry, entryIndex) => ({
                                                                     ...entry,
                                                                     order: entryIndex,
-                                                                }))) }, item.id || `checklist-${index}`))) }) })) : (_jsx("div", { className: `${formStyles.settingsHint} tf-text-helper`, children: "No checklist items yet." }))] }))] }))] }), _jsxs("div", { children: [_jsx(TaskContextUpload, { taskId: editingTaskId, taskReferenceLabel: currentTaskReferenceLabel, workspaceId: currentWorkspaceId, apiBaseUrl: apiBaseUrl, contextFiles: contextFiles, onAddContextFile: onAddContextFile, onRemoveContextFile: onRemoveContextFile, onUpdateContextCaption: onUpdateContextCaption }), _jsx("div", { className: `${formStyles.taskFormLifecycle} ${formStyles.taskFormMetaDivider}`, children: _jsx("div", { className: formStyles.taskFormMetaGrid, children: currentTask && (_jsxs(_Fragment, { children: [_jsxs("div", { className: formStyles.taskFormDateRow, children: [_jsx("span", { className: formStyles.taskFormDateLabel, children: t("taskForm.createdLabel") }), _jsxs("span", { className: formStyles.taskFormMetaStack, children: [_jsx("span", { className: formStyles.taskFormDateValue, children: createdLabel || t("taskForm.emptyValue") }), _jsx("span", { className: formStyles.taskFormMetaActor, children: createdByLabel
+                                                                }))) }, item.id || `checklist-${index}`))) }) })) : (_jsx("div", { className: `${formStyles.settingsHint} tf-text-helper`, children: "No checklist items yet." }))] }))] }))] }), _jsxs("div", { children: [_jsx(React.Suspense, { fallback: null, children: _jsx(DeferredTaskContextUpload, { taskId: editingTaskId, taskReferenceLabel: currentTaskReferenceLabel, workspaceId: currentWorkspaceId, apiBaseUrl: apiBaseUrl, contextFiles: contextFiles, onAddContextFile: onAddContextFile, onRemoveContextFile: onRemoveContextFile, onUpdateContextCaption: onUpdateContextCaption }) }), _jsx("div", { className: `${formStyles.taskFormLifecycle} ${formStyles.taskFormMetaDivider}`, children: _jsx("div", { className: formStyles.taskFormMetaGrid, children: currentTask && (_jsxs(_Fragment, { children: [_jsxs("div", { className: formStyles.taskFormDateRow, children: [_jsx("span", { className: formStyles.taskFormDateLabel, children: t("taskForm.createdLabel") }), _jsxs("span", { className: formStyles.taskFormMetaStack, children: [_jsx("span", { className: formStyles.taskFormDateValue, children: createdLabel || t("taskForm.emptyValue") }), _jsx("span", { className: formStyles.taskFormMetaActor, children: createdByLabel
                                                                             ? `by ${createdByLabel}`
                                                                             : t("taskForm.emptyValue") })] })] }), _jsxs("div", { className: formStyles.taskFormDateRow, children: [_jsx("span", { className: formStyles.taskFormDateLabel, children: t("taskForm.updatedLabel") }), _jsxs("span", { className: formStyles.taskFormMetaStack, children: [_jsx("span", { className: formStyles.taskFormDateValue, children: updatedLabel || t("taskForm.emptyValue") }), _jsx("span", { className: formStyles.taskFormMetaActor, children: updatedByLabel
                                                                             ? `by ${updatedByLabel}`

package/dist/components/task/TaskKanban.js

@@ -520,20 +520,12 @@ export function TaskKanban({ tasks, columns: kanbanColumns, groupBy, searchQuery
                 void onAssignTaskToWorkstream?.(activeTaskDataId, overWorkstreamDataId);
                 return;
             }
-            if (overType === 'planning-task-unlink' && activeTaskDataId) {
-                void onAssignTaskToWorkstream?.(activeTaskDataId, null);
-                return;
-            }
         }
         if (activeType === 'planning-workstream') {
             if (overType === 'planning-initiative-target' && activeWorkstreamDataId && overInitiativeDataId) {
                 void onAssignWorkstreamToInitiative?.(activeWorkstreamDataId, overInitiativeDataId);
                 return;
             }
-            if (overType === 'planning-workstream-unlink' && activeWorkstreamDataId) {
-                void onAssignWorkstreamToInitiative?.(activeWorkstreamDataId, null);
-                return;
-            }
             return;
         }
         const activeId = String(active.id);

package/dist/components/task/TaskList.js

@@ -11,6 +11,7 @@ import { getVisibleTaxonomiesForTasks } from '../../utils/taxonomyLifecycle.js';
 import { TaskCard } from './TaskCard';
 import { t } from '../../localization';
 import { DeleteAllDeletedAction, TaskScopeToggle } from '../views/panels/FilterToolbarControls';
+import { normalizeTaskReferenceToken } from '../../utils/taskSearch';
 export const TaskList = forwardRef((props, ref) => {
     const { tasks, archivedTasks, categories, types, priorities, taxonomyDisplayLabels, assigneeOptions = [], workstreams = [], initiatives = [], searchQuery, filterCategories, filterTypes, filterPriorities, filterStatus, filterAssignees = [], filterTaxonomies, sortBy, sortOrder, showArchive, taskScope, collapsedCategories, loadingTasks, filteredTasks, filteredArchive, groupedTasks, filteredDeletedTasks = [], groupedDeletedTasks = {}, copiedId, recentlyChangedTaskIds = [], showTaskCardStatusLabel = true, onSearchChange, onFilterCategoriesChange, onFilterTypesChange, onFilterPrioritiesChange, onFilterStatusChange, onFilterAssigneesChange, onTaxonomyFilterChange, onSortByChange, onSortOrderChange, onShowArchiveChange, onTaskScopeChange, onClearFilters, onToggleCategory, onEditTask, onOpenTaskById, onCopyId, onToggleInProgress, onToggleReview, onToggleComplete, onToggleCancel, onSetStatus, onArchiveTask, onBulkArchive, onUnarchive, onDelete, onDeleteAllDeleted, onFetchArchive, onAddTaskToCategory, supplementalTasks = [], taxonomies, } = props;
     const changedTaskIdSet = new Set(recentlyChangedTaskIds);
@@ -46,8 +47,11 @@ export const TaskList = forwardRef((props, ref) => {
             : effectiveTaskScope === 'archived'
                 ? 'archived'
                 : null;
+    const searchedTaskReference = normalizeTaskReferenceToken(searchQuery);
     const emptyLabel = searchQuery
-        ? t('taskList.noMatchingTasks')
+        ? searchedTaskReference
+            ? `No task found for ${searchedTaskReference.toUpperCase()}`
+            : t('taskList.noMatchingTasks')
         : effectiveTaskScope === 'archived'
             ? 'No archived tasks found.'
             : effectiveTaskScope === 'deleted'

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

@@ -390,6 +390,10 @@ describe('TaskList Component', () => {
         renderComponent({ filteredTasks: [], loadingTasks: false });
         expect(screen.getByText('No active tasks')).toBeInTheDocument();
     });
+    it('shows a task-reference-specific empty state for unmatched searches', () => {
+        renderComponent({ filteredTasks: [], loadingTasks: false, searchQuery: ' T - 123 ' });
+        expect(screen.getByText('No task found for T-123')).toBeInTheDocument();
+    });
     it('2.13 Loading state', () => {
         renderComponent({ loadingTasks: true });
         expect(screen.queryByText('No active tasks')).not.toBeInTheDocument();

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

@@ -0,0 +1,10 @@
+import React from 'react';
+interface HierarchyActionBadgeProps {
+    ariaLabel: string;
+    children: React.ReactNode;
+    disabled?: boolean;
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    title: string;
+}
+export declare function HierarchyActionBadge({ ariaLabel, children, disabled, onClick, title, }: HierarchyActionBadgeProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ui/HierarchyActionBadge.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from '../../Taskforce.module.css';
+export function HierarchyActionBadge({ ariaLabel, children, disabled = false, onClick, title, }) {
+    return (_jsx("button", { type: "button", className: `${styles.taskIdBadge} ${styles.taskHierarchyActionBtn}`, onClick: onClick, disabled: disabled, title: title, "aria-label": ariaLabel, children: children }));
+}

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

@@ -4,10 +4,12 @@ interface AppShellHeaderProps {
     projectName?: string | null;
     currentWorkspaceId?: string | null;
     brandLabel?: string;
+    brandHomeLabel?: string;
+    onBrandClick?: () => void;
     runtimeMode?: 'local' | 'cloud';
     theme?: TaskforceTheme;
     meta?: React.ReactNode;
     actions?: React.ReactNode;
 }
-export declare function AppShellHeader({ projectName, currentWorkspaceId, brandLabel, runtimeMode, theme, meta, actions }: AppShellHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function AppShellHeader({ projectName, currentWorkspaceId, brandLabel, brandHomeLabel, onBrandClick, runtimeMode, theme, meta, actions }: AppShellHeaderProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/views/AppShellHeader.js

@@ -5,19 +5,35 @@ import logoLight from '../../assets/branding/logos/logo_light.svg';
 import logoDark from '../../assets/branding/logos/logo_dark.svg';
 import favicon from '../../assets/favicon/favicon.svg';
 import { DEFAULT_TASKFORCE_THEME, isLightThemeFamily } from '../../utils/theme';
-export function AppShellHeader({ projectName, currentWorkspaceId, brandLabel = 'TaskForce', runtimeMode = 'local', theme = DEFAULT_TASKFORCE_THEME, meta, actions }) {
+export function AppShellHeader({ projectName, currentWorkspaceId, brandLabel = 'TaskForce', brandHomeLabel = 'Go to Kanban', onBrandClick, runtimeMode = 'local', theme = DEFAULT_TASKFORCE_THEME, meta, actions }) {
     const logo = isLightThemeFamily(theme) ? logoDark : logoLight;
     const normalizedProjectName = String(projectName || '').trim();
-    const normalizedWorkspaceId = String(currentWorkspaceId || '').trim().toLowerCase();
+    const workspaceIdForCopy = String(currentWorkspaceId || '').trim();
+    const normalizedWorkspaceId = workspaceIdForCopy.toLowerCase();
     const showProjectName = Boolean(normalizedProjectName
         && (runtimeMode !== 'cloud' || (normalizedWorkspaceId && normalizedWorkspaceId !== 'default')));
-    return (_jsxs("div", { className: `${styles.header} ${shellStyles.standaloneHeader}`, children: [_jsxs("div", { className: `${styles.headerTitle} ${shellStyles.standaloneTitle}`, children: [_jsx("img", { src: logo, alt: "Taskforce Logo", className: styles.brandIcon, onError: (event) => {
-                            const target = event.currentTarget;
-                            if (target.src !== favicon) {
-                                target.src = favicon;
-                            }
-                            else {
-                                target.style.display = 'none';
-                            }
-                        } }), _jsx("span", { children: brandLabel }), runtimeMode === 'cloud' && (_jsx("span", { className: styles.brandCloudSuffix, children: "HQ" })), showProjectName && (_jsxs(_Fragment, { children: [_jsx("span", { className: styles.projectSlash, children: "/" }), _jsx("span", { className: styles.projectName, title: currentWorkspaceId ? `Workspace ID: ${currentWorkspaceId}` : undefined, children: normalizedProjectName })] })), meta] }), _jsx("div", { className: styles.headerActions, style: { gap: '16px' }, children: actions })] }));
+    const copyWorkspaceId = () => {
+        if (!workspaceIdForCopy || typeof navigator === 'undefined')
+            return;
+        const clipboard = navigator.clipboard;
+        if (!clipboard?.writeText)
+            return;
+        void clipboard.writeText(workspaceIdForCopy).catch(() => undefined);
+    };
+    const handleProjectNameKeyDown = (event) => {
+        if (event.key !== 'Enter' && event.key !== ' ')
+            return;
+        event.preventDefault();
+        copyWorkspaceId();
+    };
+    const brandContent = (_jsxs(_Fragment, { children: [_jsx("img", { src: logo, alt: "Taskforce Logo", className: styles.brandIcon, onError: (event) => {
+                    const target = event.currentTarget;
+                    if (target.src !== favicon) {
+                        target.src = favicon;
+                    }
+                    else {
+                        target.style.display = 'none';
+                    }
+                } }), _jsx("span", { children: brandLabel }), runtimeMode === 'cloud' && (_jsx("span", { className: styles.brandCloudSuffix, children: "HQ" }))] }));
+    return (_jsxs("div", { className: `${styles.header} ${shellStyles.standaloneHeader}`, children: [_jsxs("div", { className: `${styles.headerTitle} ${shellStyles.standaloneTitle}`, children: [onBrandClick ? (_jsx("button", { type: "button", className: styles.brandHomeButton, onClick: onBrandClick, title: brandHomeLabel, "aria-label": brandHomeLabel, children: brandContent })) : (_jsx("span", { className: styles.brandHomeStatic, children: brandContent })), showProjectName && (_jsxs(_Fragment, { children: [_jsx("span", { className: styles.projectSlash, children: "/" }), _jsx("span", { className: styles.projectName, title: workspaceIdForCopy ? `Workspace ID: ${workspaceIdForCopy}` : undefined, role: workspaceIdForCopy ? 'button' : undefined, tabIndex: workspaceIdForCopy ? 0 : undefined, onClick: copyWorkspaceId, onMouseDown: (event) => event.preventDefault(), onKeyDown: handleProjectNameKeyDown, children: normalizedProjectName })] })), meta] }), _jsx("div", { className: styles.headerActions, style: { gap: '16px' }, children: actions })] }));
 }

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { render, screen } from '@testing-library/react';
-import { describe, expect, it } from 'vitest';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
 import { AppShellHeader } from './AppShellHeader';
 import logoDark from '../../assets/branding/logos/logo_dark.svg';
 describe('AppShellHeader', () => {
@@ -18,6 +19,22 @@ describe('AppShellHeader', () => {
         render(_jsx(AppShellHeader, { runtimeMode: "local", theme: "dawn" }));
         expect(screen.getByAltText('Taskforce Logo')).toHaveAttribute('src', logoDark);
     });
+    it('calls the brand click handler from the logo button', async () => {
+        const onBrandClick = vi.fn();
+        render(_jsx(AppShellHeader, { runtimeMode: "local", onBrandClick: onBrandClick }));
+        await userEvent.click(screen.getByRole('button', { name: 'Go to Kanban' }));
+        expect(onBrandClick).toHaveBeenCalledTimes(1);
+    });
+    it('copies the workspace id from the project badge', async () => {
+        const writeText = vi.fn().mockResolvedValue(undefined);
+        Object.defineProperty(navigator, 'clipboard', {
+            configurable: true,
+            value: { writeText }
+        });
+        render(_jsx(AppShellHeader, { runtimeMode: "local", projectName: "Roadmap", currentWorkspaceId: "workspace-alpha" }));
+        await userEvent.click(screen.getByRole('button', { name: 'Roadmap' }));
+        expect(writeText).toHaveBeenCalledWith('workspace-alpha');
+    });
     it('hides a stale project label while cloud runtime is still on the default workspace', () => {
         render(_jsx(AppShellHeader, { runtimeMode: "cloud", projectName: "Old Workspace", currentWorkspaceId: "default" }));
         expect(screen.queryByText('Old Workspace')).not.toBeInTheDocument();

package/dist/components/views/PlanComparisonPage.js

@@ -106,6 +106,7 @@ function getFeatureDisplayParts(feature, seatLimit) {
 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 [pricingPageCopy, setPricingPageCopy] = useState({ pageTitle: null, pageDescription: null });
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
     const [retryNonce, setRetryNonce] = useState(0);
@@ -124,6 +125,10 @@ export function PlanComparisonPage({ heading, subtitle, variant = 'app', chrome,
                     if (active) {
                         setPlans(Array.isArray(body?.plans) ? body.plans : []);
                         setPricingSource(body?.pricingSource && typeof body.pricingSource === 'object' ? body.pricingSource : null);
+                        setPricingPageCopy({
+                            pageTitle: typeof body?.pageTitle === 'string' ? (body.pageTitle.trim() || null) : null,
+                            pageDescription: typeof body?.pageDescription === 'string' ? (body.pageDescription.trim() || null) : null
+                        });
                     }
                     return;
                 }
@@ -134,6 +139,7 @@ export function PlanComparisonPage({ heading, subtitle, variant = 'app', chrome,
                     const message = err instanceof Error ? err.message : 'Failed to load pricing';
                     setError(message || 'Failed to load pricing');
                     setPricingSource(null);
+                    setPricingPageCopy({ pageTitle: null, pageDescription: null });
                 }
             }
             finally {
@@ -156,6 +162,8 @@ 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 resolvedHeading = String(pricingPageCopy.pageTitle || heading).trim() || heading;
+    const resolvedSubtitle = String(pricingPageCopy.pageDescription || subtitle || '').trim();
     const planSelectionEnabled = authSessionResolved;
     const contentClassName = `${styles.plansWrapper} ${shellOwnsScroll ? styles.shellOwnsScroll : 'tf-scrollbar'} ${variant === 'site' ? styles.siteVariant : ''} ${chrome ? styles.withChrome : ''}`.trim();
     const wrapPage = (content) => {
@@ -170,7 +178,7 @@ export function PlanComparisonPage({ heading, subtitle, variant = 'app', chrome,
     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 || 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'
+    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: resolvedHeading }), resolvedSubtitle && _jsx("p", { className: styles.subtitle, children: resolvedSubtitle }), 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;

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

@@ -9,6 +9,8 @@ describe('PlanComparisonPage', () => {
         vi.stubGlobal('fetch', vi.fn(async () => ({
             ok: true,
             json: async () => ({
+                pageTitle: 'Subscription Plans',
+                pageDescription: 'Manage your subscription and explore available features. Your current plan is highlighted below.',
                 pricingSource: {
                     environment: 'production',
                     runtimeMode: 'cloud'
@@ -66,6 +68,23 @@ describe('PlanComparisonPage', () => {
         expect(await screen.findByText('Start using Taskforce at no cost.')).toBeInTheDocument();
         expect(screen.getByText('For small collaborative teams.')).toBeInTheDocument();
     });
+    it('prefers pricing payload header copy when provided', async () => {
+        vi.stubGlobal('fetch', vi.fn(async () => ({
+            ok: true,
+            json: async () => ({
+                pageTitle: 'Choose Your Taskforce Plan',
+                pageDescription: 'Compare plans and pick the right fit for your team.',
+                pricingSource: {
+                    environment: 'production',
+                    runtimeMode: 'cloud'
+                },
+                plans: []
+            })
+        })));
+        render(_jsx(PlanComparisonPage, { heading: "Subscription Plans", subtitle: "Fallback subtitle", isAuthenticated: false, onBack: () => { }, backLabel: "Back", onSelectPlan: () => { } }));
+        expect(await screen.findByRole('heading', { name: 'Choose Your Taskforce Plan' })).toBeInTheDocument();
+        expect(screen.getByText('Compare plans and pick the right fit for your team.')).toBeInTheDocument();
+    });
     it('falls back to provided pricing source details when the pricing response omits them', async () => {
         globalThis.__DEBUG_MODE__ = true;
         vi.stubGlobal('fetch', vi.fn(async () => ({

package/dist/components/views/PlansPage.js

@@ -570,6 +570,6 @@ export function PlansPage({ isAuthenticated, authUserId, runtimeMode, authSessio
         navigate('/');
     }, [closeEmbeddedPlansScreen, embedded, handleContinueToTaskforce, hasResolvedActiveEntitlement, navigate, onContinueToTaskforce]);
     const headerActions = embedded ? null : (_jsxs(_Fragment, { children: [_jsx("button", { className: styles.navAction, onClick: handleBack, disabled: continueBusy || continueActionBusy || (isAuthenticated && !hasResolvedActiveEntitlement), children: hasResolvedActiveEntitlement ? 'Take Me to Taskforce' : 'Back' }), isAuthenticated && accountProfileSummary?.stripeCustomerId && (_jsx("button", { className: styles.navAction, onClick: () => { void openBillingPortal(); }, disabled: actionBusy, children: "Manage billing" })), !isAuthenticated && (_jsxs("button", { className: styles.navAction, onClick: () => navigate(`/login?mode=login&next=${encodeURIComponent(buildEmbeddedPlansPath())}`), children: [_jsx(User, { size: 16, style: { marginRight: '8px', verticalAlign: 'text-bottom' } }), "Sign In"] }))] }));
-    const chrome = embedded ? null : (_jsx(AppShellHeader, { projectName: projectName, currentWorkspaceId: currentWorkspaceId, runtimeMode: runtimeMode === 'cloud' ? 'cloud' : 'local', theme: currentTheme, actions: headerActions }));
+    const chrome = embedded ? null : (_jsx(AppShellHeader, { projectName: projectName, currentWorkspaceId: currentWorkspaceId, runtimeMode: runtimeMode === 'cloud' ? 'cloud' : 'local', theme: currentTheme, onBrandClick: handleBack, actions: headerActions }));
     return (_jsx(PlanComparisonPage, { chrome: chrome, heading: "Subscription Plans", subtitle: "Manage your subscription and explore available features. Your current plan is highlighted below.", isAuthenticated: isAuthenticated, authSessionResolved: authSessionResolved, currentPlanId: String(accountProfileSummary?.planId || queryPlanId || '').trim() || null, currentPlanVersionId: String(accountProfileSummary?.planVersionId || queryPlanVersionId || '').trim() || null, currentEntitlementState: String(accountProfileSummary?.entitlementState || '').trim() || null, markCurrentPlan: lifecyclePresentation.markCurrentPlan, canManageCurrentPlan: Boolean(accountProfileSummary?.stripeCustomerId), pricingEndpoint: pricingEndpoint, statusBanner: feedback, onBack: handleBack, backLabel: hasResolvedActiveEntitlement ? 'Take Me to Taskforce' : (embedded ? 'Back to Board' : 'Back to App'), backDisabled: continueBusy || continueActionBusy || (isAuthenticated && !hasResolvedActiveEntitlement), topActions: null, shellOwnsScroll: shellOwnsScroll, showPageBackButton: false, showHeaderBarWithChrome: false, currentPlanCardActionMode: "manage", fallbackPricingSource: fallbackPricingSource, onSelectPlan: handleSelectPlan }));
 }