@taskforcehq/taskforce 0.3.305 → 0.3.307

package/dist/components/task/TaskCard.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import * as Icons from 'lucide-react';
-const { MessageSquare, User, Bot, Gauge, X, ClipboardList, HelpCircle, File } = Icons;
+const { MessageSquare, User, Bot, Gauge, ClipboardList, HelpCircle, File } = Icons;
 import styles from '../../Taskforce.module.css';
 import cardStyles from './TaskCard.module.css';
 import { Markdown } from '../ui/Markdown';
@@ -15,7 +15,8 @@ import { getDocumentDownloadName } from '../../utils/documentNames';
 import { TaskStatusActions } from './TaskStatusActions';
 import { getTaskReferenceDisplayState } from '../../utils/taskReferences';
 import { getAssigneeKind, getAssigneeLabel } from '../../utils/assignees';
-import { getLatestTaskActivity, summarizeTaskActivity } from '../../utils/taskActivity';
+import { buildVersionedAvatarUrl } from '../../utils/avatarDisplay';
+import { getLatestTaskActivity, getTaskActivityItems, summarizeTaskActivity } from '../../utils/taskActivity';
 import { DEFAULT_TYPE_VALUE } from '../../shared/taxonomyDefaults.js';
 import { getVisibleTaxonomiesForTasks } from '../../utils/taxonomyLifecycle.js';
 import { getInitiativeReferenceLabel, getWorkstreamReferenceLabel } from '../../utils/planningReferences';
@@ -51,6 +52,18 @@ const TaskCardInner = ({ task, searchQuery = '', copiedId = null, taxonomies = [
     const hasLegacyClass = !!styles[`priorityItem_${displayPriority}`];
     const assigneeKind = getAssigneeKind(task.assignee);
     const assigneeLabel = getAssigneeLabel(task.assignee, assigneeOptions);
+    const assigneeOption = React.useMemo(() => {
+        const value = String(task.assignee || '').trim();
+        return assigneeOptions.find((option) => String(option.value || '').trim() === value) || null;
+    }, [assigneeOptions, task.assignee]);
+    const assigneeAvatarUrl = assigneeKind !== 'unassigned' && typeof assigneeOption?.avatarUrl === 'string'
+        ? buildVersionedAvatarUrl(assigneeOption.avatarUrl, assigneeOption.avatarRevision, assigneeOption.avatarUpdatedAt)
+        : '';
+    const assigneeAvatarAccent = assigneeKind === 'agent'
+        ? 'var(--color-violet-500, #8b5cf6)'
+        : assigneeKind === 'member'
+            ? 'var(--color-green-500, #22c55e)'
+            : 'var(--text-secondary, #888)';
     const latestActivity = React.useMemo(() => getLatestTaskActivity(task), [task]);
     const resolvedReadOnlyMode = readOnlyMode || (task.isDeleted ? 'deleted' : (isArchived ? 'archived' : null));
     const isReadOnly = resolvedReadOnlyMode !== null;
@@ -70,9 +83,7 @@ const TaskCardInner = ({ task, searchQuery = '', copiedId = null, taxonomies = [
         return undefined;
     }, [assigneeOptions, initiativeReferenceLabel, taskInitiative, taskWorkstream, workstreamReferenceLabel]);
     const latestActivityText = React.useMemo(() => summarizeTaskActivity(latestActivity, formatActivityFieldValue), [formatActivityFieldValue, latestActivity]);
-    const activityCount = Array.isArray(task.activity) && task.activity.length > 0
-        ? task.activity.length
-        : (task.comments?.length || 0);
+    const activityCount = React.useMemo(() => getTaskActivityItems(task).length, [task]);
     const cardClasses = [
         cardStyles.taskItem,
         task.status === 'on-hold' ? cardStyles.onHold : '',
@@ -217,7 +228,10 @@ const TaskCardInner = ({ task, searchQuery = '', copiedId = null, taxonomies = [
                                     const fileType = getContextType(attachment);
                                     return (_jsxs("button", { type: "button", className: cardStyles.contextDocThumb, onClick: (e) => {
                                             e.stopPropagation();
-                                            if (dispatchOpenMarkdownDocument(attachment, fsPath))
+                                            const markdownTarget = typeof attachment === 'string'
+                                                ? { path: attachment, taskId: task.id }
+                                                : { ...attachment, taskId: task.id };
+                                            if (dispatchOpenMarkdownDocument(markdownTarget, fsPath))
                                                 return;
                                             window.open(path, '_blank');
                                         }, title: name, style: { '--context-doc-accent': getFileTypeAccentColor(fileType) }, children: [_jsxs("span", { className: cardStyles.contextDocMain, children: [_jsx("span", { className: cardStyles.contextDocIcon, "aria-hidden": "true", children: _jsx(File, { size: 13 }) }), _jsx("span", { className: cardStyles.contextDocText, children: _jsx("span", { className: cardStyles.contextDocName, children: name }) })] }), _jsx("span", { className: cardStyles.contextDocType, children: fileType })] }, idx));
@@ -286,29 +300,10 @@ const TaskCardInner = ({ task, searchQuery = '', copiedId = null, taxonomies = [
                                                     borderColor: `color-mix(in srgb, ${complexityColor}, transparent 72%)`,
                                                     gap: '4px',
                                                     padding: '0 8px'
-                                                }, children: [_jsx(Gauge, { size: 14 }), !compressed && _jsx("span", { children: complexityLabel })] }), _jsx("span", { className: styles.metaBadge, title: `Assigned to: ${assigneeLabel}`, "aria-label": assigneeKind === 'unassigned' ? 'Unassigned' : `Assigned to ${assigneeLabel}`, style: {
-                                                    backgroundColor: assigneeKind === 'agent'
-                                                        ? 'color-mix(in srgb, var(--color-violet-500, #8b5cf6), transparent 88%)'
-                                                        : assigneeKind === 'member'
-                                                            ? 'color-mix(in srgb, var(--color-green-500, #22c55e), transparent 88%)'
-                                                            : 'color-mix(in srgb, var(--text-secondary, #888), transparent 88%)',
-                                                    padding: '0 8px',
-                                                    color: assigneeKind === 'agent'
-                                                        ? 'var(--color-violet-500, #8b5cf6)'
-                                                        : assigneeKind === 'member'
-                                                            ? 'var(--color-green-500, #22c55e)'
-                                                            : 'var(--text-secondary, #888)',
-                                                    borderColor: assigneeKind === 'agent'
-                                                        ? 'color-mix(in srgb, var(--color-violet-500, #8b5cf6), transparent 72%)'
-                                                        : assigneeKind === 'member'
-                                                            ? 'color-mix(in srgb, var(--color-green-500, #22c55e), transparent 72%)'
-                                                            : 'color-mix(in srgb, var(--text-secondary, #888), transparent 70%)',
-                                                    display: 'flex',
-                                                    alignItems: 'center'
-                                                }, children: assigneeKind === 'agent'
-                                                    ? _jsx(Bot, { size: compressed ? 14 : 16 })
+                                                }, children: [_jsx(Gauge, { size: 14 }), !compressed && _jsx("span", { children: complexityLabel })] }), _jsx("span", { className: `${cardStyles.assigneeAvatarIndicator} ${assigneeKind === 'unassigned' ? cardStyles.assigneeAvatarEmpty : ''}`, title: `Assigned to: ${assigneeLabel}`, "aria-label": assigneeKind === 'unassigned' ? 'Unassigned' : `Assigned to ${assigneeLabel}`, style: { '--assignee-avatar-color': assigneeAvatarAccent }, children: assigneeAvatarUrl ? (_jsx("img", { src: assigneeAvatarUrl, alt: "", className: cardStyles.assigneeAvatarImage })) : assigneeKind === 'agent'
+                                                    ? _jsx(Bot, { size: compressed ? 18 : 20 })
                                                     : assigneeKind === 'member'
-                                                        ? _jsx(User, { size: compressed ? 14 : 16 })
-                                                        : _jsx(HelpCircle, { size: compressed ? 14 : 16 }) })] })] }) })) })] })] }));
+                                                        ? _jsx(User, { size: compressed ? 18 : 20 })
+                                                        : null })] })] }) })) })] })] }));
 };
 export const TaskCard = React.memo(TaskCardInner);

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

@@ -30,7 +30,7 @@ const baseInitiative = (overrides = {}) => ({
     createdAt: '2026-02-13T00:00:00.000Z',
     ...overrides,
 });
-describe('TaskCard parent/child progress', () => {
+describe('TaskCard planning hierarchy references', () => {
     it('renders initiative/workstream/task hierarchy references when planning context is provided', () => {
         const task = baseTask({
             id: 'task-hierarchy',
@@ -105,7 +105,7 @@ describe('TaskCard parent/child progress', () => {
         });
         render(_jsx(TaskCard, { task: task, onClick: () => { }, onCopyId: () => { } }));
         expect(screen.getByText(/Latest Activity:/)).toBeInTheDocument();
-        expect(screen.getByText(/Status: task -> review/)).toBeInTheDocument();
+        expect(screen.getByText(/Status changed: Task -> Review/)).toBeInTheDocument();
         expect(screen.getByTitle('2 activity items')).toBeInTheDocument();
     });
     it('uses the current workstream reference in latest activity summaries', () => {
@@ -136,7 +136,7 @@ describe('TaskCard parent/child progress', () => {
             ]
         });
         render(_jsx(TaskCard, { task: task, taskWorkstream: baseWorkstream({ id: 'workstream-1', referenceNumber: 12 }), onClick: () => { }, onCopyId: () => { } }));
-        expect(screen.getByText(/Workstream: none -> WS-12/)).toBeInTheDocument();
+        expect(screen.getByText(/Workstream changed: none -> WS-12/)).toBeInTheDocument();
         expect(screen.queryByText(/workstream-1/i)).not.toBeInTheDocument();
     });
     it('renders named AI assignee labels from assignee options', () => {
@@ -151,6 +151,41 @@ describe('TaskCard parent/child progress', () => {
             ], onClick: () => { }, onCopyId: () => { } }));
         expect(screen.getByLabelText('Assigned to Codex')).toBeInTheDocument();
     });
+    it('renders AI profile photos in the assignee indicator when available', () => {
+        const task = baseTask({
+            id: 'task-ai-avatar',
+            title: 'AI-owned task',
+            assignee: 'ai-profile-123'
+        });
+        render(_jsx(TaskCard, { task: task, assigneeOptions: [
+                { value: 'ai-profile-123', label: 'Codex', icon: 'Bot', color: '#0ea5e9', kind: 'agent', avatarUrl: '/api/taskforce/context/ai-avatar.webp' }
+            ], onClick: () => { }, onCopyId: () => { } }));
+        const badge = screen.getByLabelText('Assigned to Codex');
+        expect(badge.querySelector('img')).toHaveAttribute('src', '/api/taskforce/context/ai-avatar.webp');
+    });
+    it('renders member profile photos in the assignee indicator when available', () => {
+        const task = baseTask({
+            id: 'task-member-avatar',
+            title: 'Member-owned task',
+            assignee: 'user-123'
+        });
+        render(_jsx(TaskCard, { task: task, assigneeOptions: [
+                { value: 'user-123', label: 'Ross Burke', icon: 'User', color: '#22c55e', kind: 'member', avatarUrl: '/api/taskforce/context/member-avatar.webp' }
+            ], onClick: () => { }, onCopyId: () => { } }));
+        const badge = screen.getByLabelText('Assigned to Ross Burke');
+        expect(badge.querySelector('img')).toHaveAttribute('src', '/api/taskforce/context/member-avatar.webp');
+    });
+    it('renders an empty avatar circle for unassigned tasks', () => {
+        const task = baseTask({
+            id: 'task-unassigned-avatar',
+            title: 'Unassigned task',
+            assignee: 'unassigned'
+        });
+        render(_jsx(TaskCard, { task: task, onClick: () => { }, onCopyId: () => { } }));
+        const indicator = screen.getByLabelText('Unassigned');
+        expect(indicator.querySelector('img')).toBeNull();
+        expect(indicator.querySelector('svg')).toBeNull();
+    });
     it('prefers provided type metadata over hardcoded defaults', () => {
         const task = baseTask({
             id: 'task-type-metadata',