fix(ui): finalize team activity and kanban polish
This commit is contained in:
parent
dac7b4f875
commit
fd0c936244
10 changed files with 945 additions and 77 deletions
|
|
@ -6,7 +6,12 @@ import { AttachmentDisplay } from '@renderer/components/team/attachments/Attachm
|
|||
import { MemberBadge } from '@renderer/components/team/MemberBadge';
|
||||
import { TaskTooltip } from '@renderer/components/team/TaskTooltip';
|
||||
import { ExpandableContent } from '@renderer/components/ui/ExpandableContent';
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from '@renderer/components/ui/tooltip';
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from '@renderer/components/ui/tooltip';
|
||||
import {
|
||||
CARD_BG,
|
||||
CARD_BG_ZEBRA,
|
||||
|
|
@ -780,7 +785,7 @@ export const ActivityItem = memo(
|
|||
if (!isCrossTeamAny || !strippedText) return '';
|
||||
const oneLine = strippedText.replace(/\n+/g, ' ').trim();
|
||||
if (!oneLine) return '';
|
||||
return oneLine.length > 80 ? oneLine.slice(0, 80) + '…' : oneLine;
|
||||
return oneLine;
|
||||
}, [isCrossTeamAny, strippedText]);
|
||||
|
||||
const rawSummary = useMemo(() => {
|
||||
|
|
@ -806,8 +811,7 @@ export const ActivityItem = memo(
|
|||
// Fallback: use the beginning of message text as preview for plain-text messages
|
||||
const plain = getSanitizedInboxMessageText(message).trim();
|
||||
if (!plain) return '';
|
||||
const oneLine = plain.replace(/\n+/g, ' ');
|
||||
return oneLine.length > 80 ? oneLine.slice(0, 80) + '…' : oneLine;
|
||||
return plain.replace(/\n+/g, ' ');
|
||||
}, [
|
||||
crossTeamPreview,
|
||||
isSlashCommandMessage,
|
||||
|
|
@ -819,6 +823,39 @@ export const ActivityItem = memo(
|
|||
structured,
|
||||
]);
|
||||
const summaryText = extractMarkdownPlainText(rawSummary);
|
||||
const compactPreviewText = useMemo(() => {
|
||||
if (idleSemantic?.hasPeerSummary && idleSemantic.peerSummary) {
|
||||
return idleSemantic.peerSummary;
|
||||
}
|
||||
if (isSlashCommandResult && message.commandOutput) {
|
||||
return message.summary || getCommandOutputSummary(message.text);
|
||||
}
|
||||
if (isSlashCommandMessage && slashCommandMeta) {
|
||||
if (slashCommandMeta.args) {
|
||||
const oneLine = slashCommandMeta.args.replace(/\n+/g, ' ').trim();
|
||||
return `${slashCommandMeta.command} ${oneLine}`;
|
||||
}
|
||||
return slashCommandMeta.command;
|
||||
}
|
||||
if (crossTeamPreview) return crossTeamPreview;
|
||||
|
||||
const fullText = strippedText?.trim() ?? '';
|
||||
if (fullText) {
|
||||
return extractMarkdownPlainText(fullText).replace(/\n+/g, ' ').trim();
|
||||
}
|
||||
|
||||
return summaryText || rawSummary;
|
||||
}, [
|
||||
crossTeamPreview,
|
||||
idleSemantic,
|
||||
isSlashCommandMessage,
|
||||
isSlashCommandResult,
|
||||
message,
|
||||
message.commandOutput,
|
||||
rawSummary,
|
||||
slashCommandMeta,
|
||||
summaryText,
|
||||
]);
|
||||
const commentTaskRef =
|
||||
message.messageKind === 'task_comment_notification' ? (message.taskRefs?.[0] ?? null) : null;
|
||||
const commentTaskDisplayId =
|
||||
|
|
@ -1178,13 +1215,105 @@ export const ActivityItem = memo(
|
|||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="mt-1 min-w-0 truncate text-[11px]"
|
||||
style={{ color: CARD_TEXT_LIGHT }}
|
||||
title={summaryText || rawSummary}
|
||||
>
|
||||
{summaryContent}
|
||||
<TooltipProvider delayDuration={1000}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<div
|
||||
className="mt-1 line-clamp-2 w-full min-w-0 max-w-full break-words text-[11px] leading-4"
|
||||
style={{ color: CARD_TEXT_LIGHT }}
|
||||
>
|
||||
{compactPreviewText}
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent
|
||||
side="bottom"
|
||||
align="start"
|
||||
className="max-w-sm whitespace-normal break-words"
|
||||
>
|
||||
{compactPreviewText}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
) : !isExpanded ? (
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex min-w-0 items-center gap-2">
|
||||
{isUnread ? (
|
||||
<span
|
||||
className="size-2 shrink-0 rounded-full bg-blue-500"
|
||||
title="Unread"
|
||||
aria-hidden
|
||||
/>
|
||||
) : null}
|
||||
{showChevron ? (
|
||||
<ChevronRight
|
||||
className="size-3 shrink-0 transition-transform duration-150"
|
||||
style={{
|
||||
color: CARD_ICON_MUTED,
|
||||
transform: isExpanded ? 'rotate(90deg)' : undefined,
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
{crossTeamOrigin ? (
|
||||
<CrossTeamTeamBadge teamName={crossTeamOrigin.teamName} onClick={onTeamClick} />
|
||||
) : null}
|
||||
{senderBadge}
|
||||
{!compactHeader && formattedRole && !isSlashCommandResult ? (
|
||||
<span className="text-[10px]" style={{ color: CARD_ICON_MUTED }}>
|
||||
{formattedRole}
|
||||
</span>
|
||||
) : null}
|
||||
{messageTypeBadge}
|
||||
{leadSourceBadge}
|
||||
{statusBadge}
|
||||
{recipientBadge}
|
||||
<div className="relative ml-auto flex shrink-0 items-center">
|
||||
<span
|
||||
className={
|
||||
onExpand && expandItemKey
|
||||
? 'text-[10px] transition-opacity group-hover:opacity-0'
|
||||
: 'text-[10px]'
|
||||
}
|
||||
style={{ color: CARD_ICON_MUTED }}
|
||||
>
|
||||
{timestamp}
|
||||
</span>
|
||||
{onExpand && expandItemKey && (
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Expand message"
|
||||
className="absolute right-0 top-1/2 -translate-y-1/2 rounded p-0.5 opacity-0 transition-opacity focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-blue-500/50 group-hover:opacity-100"
|
||||
style={{ color: CARD_ICON_MUTED }}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onExpand(expandItemKey);
|
||||
}}
|
||||
onKeyDown={(e) => e.stopPropagation()}
|
||||
>
|
||||
<Maximize2 size={12} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<TooltipProvider delayDuration={1000}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<div
|
||||
className="mt-1 line-clamp-2 w-full min-w-0 max-w-full break-words text-[11px] leading-4"
|
||||
style={{ color: CARD_TEXT_LIGHT }}
|
||||
>
|
||||
{compactPreviewText}
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent
|
||||
side="bottom"
|
||||
align="start"
|
||||
className="max-w-sm whitespace-normal break-words"
|
||||
>
|
||||
{compactPreviewText}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,12 @@ import {
|
|||
} from 'react';
|
||||
|
||||
import { MemberBadge } from '@renderer/components/team/MemberBadge';
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from '@renderer/components/ui/tooltip';
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from '@renderer/components/ui/tooltip';
|
||||
import {
|
||||
CARD_BG,
|
||||
CARD_BG_ZEBRA,
|
||||
|
|
@ -39,6 +44,7 @@ import {
|
|||
} from './AnimatedHeightReveal';
|
||||
import { ThoughtBodyContent } from './ThoughtBodyContent';
|
||||
|
||||
import { stripAgentBlocks } from '@shared/constants/agentBlocks';
|
||||
import type { InboxMessage, ToolCallMeta } from '@shared/types';
|
||||
|
||||
export interface LeadThoughtGroup {
|
||||
|
|
@ -587,9 +593,11 @@ const LeadThoughtsGroupRowComponent = ({
|
|||
// Try newest first (most relevant), then scan for any text
|
||||
for (const t of thoughts) {
|
||||
if (t.text && t.text.trim()) {
|
||||
const plain = extractMarkdownPlainText(t.text);
|
||||
const firstLine = plain.split('\n').find((l) => l.trim().length > 0) ?? '';
|
||||
return firstLine.trim();
|
||||
const plain = extractMarkdownPlainText(stripAgentBlocks(t.text));
|
||||
const normalized = plain.replace(/\n+/g, ' ').trim();
|
||||
if (normalized) {
|
||||
return normalized;
|
||||
}
|
||||
}
|
||||
}
|
||||
return null;
|
||||
|
|
@ -830,13 +838,108 @@ const LeadThoughtsGroupRowComponent = ({
|
|||
</div>
|
||||
</div>
|
||||
{compactPreviewText ? (
|
||||
<div
|
||||
className="mt-1 min-w-0 truncate text-[11px]"
|
||||
style={{ color: headerTextPreview ? CARD_TEXT_LIGHT : CARD_ICON_MUTED }}
|
||||
title={compactPreviewText}
|
||||
>
|
||||
{compactPreviewText}
|
||||
<TooltipProvider delayDuration={1000}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<div
|
||||
className="mt-1 line-clamp-2 w-full min-w-0 max-w-full break-words text-[11px] leading-4"
|
||||
style={{ color: headerTextPreview ? CARD_TEXT_LIGHT : CARD_ICON_MUTED }}
|
||||
>
|
||||
{compactPreviewText}
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent
|
||||
side="bottom"
|
||||
align="start"
|
||||
className="max-w-sm whitespace-normal break-words"
|
||||
>
|
||||
{compactPreviewText}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
) : null}
|
||||
</div>
|
||||
) : !isBodyVisible ? (
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex min-w-0 items-center gap-2">
|
||||
{canToggleBodyVisibility && !compactHeader ? (
|
||||
<ChevronRight
|
||||
className="size-3 shrink-0 transition-transform duration-150"
|
||||
style={{
|
||||
color: CARD_ICON_MUTED,
|
||||
transform: isBodyVisible ? 'rotate(90deg)' : undefined,
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
{!compactHeader ? (
|
||||
<div className="relative shrink-0">
|
||||
<img
|
||||
src={agentAvatarUrl(leadName, 24)}
|
||||
alt=""
|
||||
className="size-5 rounded-full bg-[var(--color-surface-raised)]"
|
||||
loading="lazy"
|
||||
/>
|
||||
<LiveThoughtStatusBadge
|
||||
canBeLive={canBeLive}
|
||||
isTeamAlive={isTeamAlive}
|
||||
leadActivity={leadActivity}
|
||||
leadContextUpdatedAt={leadContextUpdatedAt}
|
||||
newestTimestamp={newest.timestamp}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
<MemberBadge name={leadName} color={memberColor} hideAvatar />
|
||||
<span className="text-[10px]" style={{ color: CARD_ICON_MUTED }}>
|
||||
{thoughts.length} thoughts
|
||||
</span>
|
||||
<div className="relative ml-auto flex shrink-0 items-center">
|
||||
<span
|
||||
className={
|
||||
onExpand && expandItemKey
|
||||
? 'text-[10px] transition-opacity group-hover:opacity-0'
|
||||
: 'text-[10px]'
|
||||
}
|
||||
style={{ color: CARD_ICON_MUTED }}
|
||||
>
|
||||
{timestampLabel}
|
||||
</span>
|
||||
{onExpand && expandItemKey && (
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Expand thoughts"
|
||||
className="absolute right-0 top-1/2 -translate-y-1/2 rounded p-0.5 opacity-0 transition-opacity focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-blue-500/50 group-hover:opacity-100"
|
||||
style={{ color: CARD_ICON_MUTED }}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onExpand(expandItemKey);
|
||||
}}
|
||||
onKeyDown={(e) => e.stopPropagation()}
|
||||
>
|
||||
<Maximize2 size={12} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{compactPreviewText ? (
|
||||
<TooltipProvider delayDuration={1000}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<div
|
||||
className="mt-1 line-clamp-2 w-full min-w-0 max-w-full break-words text-[11px] leading-4"
|
||||
style={{ color: headerTextPreview ? CARD_TEXT_LIGHT : CARD_ICON_MUTED }}
|
||||
>
|
||||
{compactPreviewText}
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent
|
||||
side="bottom"
|
||||
align="start"
|
||||
className="max-w-sm whitespace-normal break-words"
|
||||
>
|
||||
{compactPreviewText}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
) : null}
|
||||
</div>
|
||||
) : (
|
||||
|
|
@ -871,26 +974,7 @@ const LeadThoughtsGroupRowComponent = ({
|
|||
<span className="text-[10px]" style={{ color: CARD_ICON_MUTED }}>
|
||||
{thoughts.length} thoughts
|
||||
</span>
|
||||
{!isBodyVisible && headerTextPreview ? (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<span
|
||||
className="min-w-0 flex-1 cursor-default truncate text-[10px]"
|
||||
style={{ color: CARD_TEXT_LIGHT }}
|
||||
>
|
||||
{headerTextPreview}
|
||||
</span>
|
||||
</TooltipTrigger>
|
||||
{totalToolSummary ? (
|
||||
<TooltipContent side="bottom" className="max-w-[420px] font-mono text-[11px]">
|
||||
<ToolSummaryTooltipContent
|
||||
toolCalls={allToolCalls}
|
||||
toolSummary={totalToolSummary}
|
||||
/>
|
||||
</TooltipContent>
|
||||
) : null}
|
||||
</Tooltip>
|
||||
) : totalToolSummary ? (
|
||||
{totalToolSummary ? (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<span className="cursor-default text-[10px]" style={{ color: CARD_ICON_MUTED }}>
|
||||
|
|
|
|||
161
src/renderer/components/team/kanban/KanbanTaskCard.test.tsx
Normal file
161
src/renderer/components/team/kanban/KanbanTaskCard.test.tsx
Normal file
|
|
@ -0,0 +1,161 @@
|
|||
import React, { act } from 'react';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import { afterEach, describe, expect, it, vi } from 'vitest';
|
||||
|
||||
vi.mock('@renderer/components/team/MemberBadge', () => ({
|
||||
MemberBadge: ({ name }: { name: string }) => React.createElement('span', null, name),
|
||||
}));
|
||||
|
||||
vi.mock('@renderer/components/team/UnreadCommentsBadge', () => ({
|
||||
UnreadCommentsBadge: () => null,
|
||||
}));
|
||||
|
||||
vi.mock('@renderer/components/ui/button', () => ({
|
||||
Button: ({
|
||||
children,
|
||||
className,
|
||||
onClick,
|
||||
disabled,
|
||||
'aria-label': ariaLabel,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
onClick?: React.MouseEventHandler<HTMLButtonElement>;
|
||||
disabled?: boolean;
|
||||
'aria-label'?: string;
|
||||
}) =>
|
||||
React.createElement(
|
||||
'button',
|
||||
{ className, onClick, disabled, 'aria-label': ariaLabel, type: 'button' },
|
||||
children
|
||||
),
|
||||
}));
|
||||
|
||||
vi.mock('@renderer/components/ui/popover', () => ({
|
||||
Popover: ({ children }: { children: React.ReactNode }) =>
|
||||
React.createElement(React.Fragment, null, children),
|
||||
PopoverTrigger: ({ children }: { children: React.ReactNode }) =>
|
||||
React.createElement(React.Fragment, null, children),
|
||||
PopoverContent: ({ children }: { children: React.ReactNode }) =>
|
||||
React.createElement('div', null, children),
|
||||
}));
|
||||
|
||||
vi.mock('@renderer/components/ui/tooltip', () => ({
|
||||
Tooltip: ({ children }: { children: React.ReactNode }) =>
|
||||
React.createElement(React.Fragment, null, children),
|
||||
TooltipTrigger: ({ children }: { children: React.ReactNode }) =>
|
||||
React.createElement(React.Fragment, null, children),
|
||||
TooltipContent: ({ children }: { children: React.ReactNode }) =>
|
||||
React.createElement('div', null, children),
|
||||
}));
|
||||
|
||||
vi.mock('@renderer/hooks/useTheme', () => ({
|
||||
useTheme: () => ({ isLight: false }),
|
||||
}));
|
||||
|
||||
vi.mock('@renderer/hooks/useUnreadCommentCount', () => ({
|
||||
useUnreadCommentCount: () => 0,
|
||||
}));
|
||||
|
||||
import { KanbanTaskCard } from './KanbanTaskCard';
|
||||
|
||||
import type { TeamTaskWithKanban } from '@shared/types/team';
|
||||
|
||||
const baseTask: TeamTaskWithKanban = {
|
||||
id: 'task-1',
|
||||
displayId: 'abcd1234',
|
||||
subject: 'Implement safer onboarding flow',
|
||||
owner: 'alice',
|
||||
reviewer: '',
|
||||
status: 'in_progress',
|
||||
changePresence: 'unknown',
|
||||
comments: [],
|
||||
blockedBy: [],
|
||||
blocks: [],
|
||||
workIntervals: [],
|
||||
historyEvents: [],
|
||||
createdAt: '2026-04-18T10:00:00.000Z',
|
||||
updatedAt: '2026-04-18T10:10:00.000Z',
|
||||
} as unknown as TeamTaskWithKanban;
|
||||
|
||||
const noop = (): void => undefined;
|
||||
|
||||
describe('KanbanTaskCard change badge', () => {
|
||||
afterEach(() => {
|
||||
document.body.innerHTML = '';
|
||||
});
|
||||
|
||||
it('does not render a No changes badge when changePresence is no_changes', async () => {
|
||||
vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true);
|
||||
const host = document.createElement('div');
|
||||
document.body.appendChild(host);
|
||||
const root = createRoot(host);
|
||||
|
||||
await act(async () => {
|
||||
root.render(
|
||||
React.createElement(KanbanTaskCard, {
|
||||
task: { ...baseTask, changePresence: 'no_changes' },
|
||||
teamName: 'my-team',
|
||||
columnId: 'in_progress',
|
||||
hasReviewers: true,
|
||||
compact: false,
|
||||
taskMap: new Map(),
|
||||
memberColorMap: new Map([['alice', 'blue']]),
|
||||
onRequestReview: noop,
|
||||
onApprove: noop,
|
||||
onRequestChanges: noop,
|
||||
onMoveBackToDone: noop,
|
||||
onStartTask: noop,
|
||||
onCompleteTask: noop,
|
||||
onCancelTask: noop,
|
||||
onViewChanges: noop,
|
||||
})
|
||||
);
|
||||
await Promise.resolve();
|
||||
});
|
||||
|
||||
expect(host.textContent).not.toContain('No changes');
|
||||
|
||||
await act(async () => {
|
||||
root.unmount();
|
||||
await Promise.resolve();
|
||||
});
|
||||
});
|
||||
|
||||
it('still renders the Changes action when changePresence is has_changes', async () => {
|
||||
vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true);
|
||||
const host = document.createElement('div');
|
||||
document.body.appendChild(host);
|
||||
const root = createRoot(host);
|
||||
|
||||
await act(async () => {
|
||||
root.render(
|
||||
React.createElement(KanbanTaskCard, {
|
||||
task: { ...baseTask, changePresence: 'has_changes' },
|
||||
teamName: 'my-team',
|
||||
columnId: 'in_progress',
|
||||
hasReviewers: true,
|
||||
compact: false,
|
||||
taskMap: new Map(),
|
||||
memberColorMap: new Map([['alice', 'blue']]),
|
||||
onRequestReview: noop,
|
||||
onApprove: noop,
|
||||
onRequestChanges: noop,
|
||||
onMoveBackToDone: noop,
|
||||
onStartTask: noop,
|
||||
onCompleteTask: noop,
|
||||
onCancelTask: noop,
|
||||
onViewChanges: noop,
|
||||
})
|
||||
);
|
||||
await Promise.resolve();
|
||||
});
|
||||
|
||||
expect(host.querySelector('[aria-label="Changes"]')).not.toBeNull();
|
||||
|
||||
await act(async () => {
|
||||
root.unmount();
|
||||
await Promise.resolve();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -268,10 +268,6 @@ export const KanbanTaskCard = memo(
|
|||
onViewChanges!(task.id);
|
||||
}}
|
||||
/>
|
||||
) : canDisplay && task.changePresence === 'no_changes' ? (
|
||||
<span className="inline-flex h-6 shrink-0 items-center rounded-full border border-[var(--color-border)] px-2 text-[10px] text-[var(--color-text-muted)]">
|
||||
No changes
|
||||
</span>
|
||||
) : null}
|
||||
<UnreadCommentsBadge unreadCount={unreadCount} totalCount={task.comments?.length ?? 0} />
|
||||
{onDeleteTask ? (
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ import type { TeamTaskWithKanban } from '@shared/types';
|
|||
interface CurrentTaskIndicatorProps {
|
||||
task: TeamTaskWithKanban;
|
||||
borderColor: string;
|
||||
/** Max characters for the subject before truncating */
|
||||
maxSubjectLength?: number;
|
||||
activityLabel?: string;
|
||||
onOpenTask?: () => void;
|
||||
|
|
@ -19,21 +18,24 @@ interface CurrentTaskIndicatorProps {
|
|||
export const CurrentTaskIndicator = ({
|
||||
task,
|
||||
borderColor,
|
||||
maxSubjectLength = 36,
|
||||
maxSubjectLength,
|
||||
activityLabel = 'working on',
|
||||
onOpenTask,
|
||||
}: CurrentTaskIndicatorProps): React.JSX.Element => {
|
||||
const truncated = task.subject.length > maxSubjectLength;
|
||||
const subjectText = truncated ? `${task.subject.slice(0, maxSubjectLength)}…` : task.subject;
|
||||
const subjectText =
|
||||
typeof maxSubjectLength === 'number' &&
|
||||
maxSubjectLength > 0 &&
|
||||
task.subject.length > maxSubjectLength
|
||||
? `${task.subject.slice(0, maxSubjectLength)}…`
|
||||
: task.subject;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex min-w-0 flex-1 items-center gap-1.5">
|
||||
<Loader2 className="size-3 shrink-0 animate-spin" style={{ color: borderColor }} />
|
||||
<span className="shrink-0 text-[10px] text-[var(--color-text-muted)]">{activityLabel}</span>
|
||||
<button
|
||||
type="button"
|
||||
className="min-w-0 shrink truncate rounded px-1.5 py-0.5 text-[10px] font-medium text-[var(--color-text)] transition-opacity hover:opacity-90 focus:outline-none focus:ring-1 focus:ring-[var(--color-border)]"
|
||||
style={{ border: `1px solid ${borderColor}40` }}
|
||||
className="min-w-0 flex-1 truncate rounded px-1.5 py-0.5 text-left text-[10px] font-medium text-[var(--color-text)] transition-opacity hover:opacity-90 focus:outline-none focus:ring-1 focus:ring-[var(--color-border)]"
|
||||
title="Open task"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
|
|
@ -49,6 +51,6 @@ export const CurrentTaskIndicator = ({
|
|||
>
|
||||
{formatTaskDisplayLabel(task)} {subjectText}
|
||||
</button>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { Badge } from '@renderer/components/ui/badge';
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from '@renderer/components/ui/tooltip';
|
||||
import { getTeamColorSet, getThemedBadge, scaleColorAlpha } from '@renderer/constants/teamColors';
|
||||
import { getTeamColorSet } from '@renderer/constants/teamColors';
|
||||
import { useTheme } from '@renderer/hooks/useTheme';
|
||||
import { formatAgentRole } from '@renderer/utils/formatAgentRole';
|
||||
import {
|
||||
|
|
@ -101,6 +101,7 @@ export const MemberCard = ({
|
|||
const completed = taskCounts?.completed ?? 0;
|
||||
const totalTasks = pending + inProgress + completed;
|
||||
const progressPercent = totalTasks > 0 ? Math.round((completed / totalTasks) * 100) : 0;
|
||||
const roleLabel = formatAgentRole(member.role) ?? formatAgentRole(member.agentType);
|
||||
const activityTask = currentTask ?? reviewTask ?? null;
|
||||
const activityTitle = currentTask
|
||||
? `Current task: #${deriveTaskDisplayId(currentTask.id)}`
|
||||
|
|
@ -120,18 +121,14 @@ export const MemberCard = ({
|
|||
!showStartingBadge &&
|
||||
spawnStatus !== 'error' &&
|
||||
(Boolean(activityTask) || !isAwaitingReply);
|
||||
const cardTint = scaleColorAlpha(getThemedBadge(colors, isLight), 0.5);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`rounded transition-opacity duration-300 ${isRemoved ? 'opacity-50' : ''} ${spawnCardClass}`}
|
||||
>
|
||||
<div
|
||||
className="group relative cursor-pointer rounded px-2 py-1.5"
|
||||
style={{
|
||||
borderLeft: `3px solid ${colors.border}`,
|
||||
background: `linear-gradient(to right, ${cardTint}, transparent)`,
|
||||
}}
|
||||
className="group relative cursor-pointer rounded py-1.5"
|
||||
style={undefined}
|
||||
title={activityTitle}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
|
|
@ -146,19 +143,27 @@ export const MemberCard = ({
|
|||
<div className="pointer-events-none absolute inset-0 rounded transition-colors group-hover:bg-white/5" />
|
||||
<div className="flex items-center gap-2.5">
|
||||
<div className="relative shrink-0">
|
||||
<img
|
||||
src={agentAvatarUrl(member.name)}
|
||||
alt={member.name}
|
||||
className="size-7 rounded-full bg-[var(--color-surface-raised)]"
|
||||
loading="lazy"
|
||||
/>
|
||||
<div
|
||||
className="rounded-full border-2 p-[1px]"
|
||||
style={{
|
||||
borderColor: colors.border,
|
||||
boxShadow: isLight ? 'none' : `0 0 0 1px ${colors.badge}`,
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={agentAvatarUrl(member.name)}
|
||||
alt={member.name}
|
||||
className="size-7 rounded-full bg-[var(--color-surface-raised)]"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
className={`absolute -bottom-0.5 -right-0.5 size-2.5 rounded-full border-2 border-[var(--color-surface)] ${dotClass}`}
|
||||
aria-label={presenceLabel}
|
||||
/>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex min-w-0 items-center gap-1.5 truncate text-sm">
|
||||
<div className="flex min-w-0 items-center gap-1.5 text-sm">
|
||||
<span className="shrink-0 font-medium text-[var(--color-text)]">
|
||||
{displayMemberName(member.name)}
|
||||
</span>
|
||||
|
|
@ -210,20 +215,16 @@ export const MemberCard = ({
|
|||
style={{ backgroundColor: 'var(--skeleton-base)' }}
|
||||
/>
|
||||
</div>
|
||||
) : runtimeSummary ? (
|
||||
<div className="mt-0.5 text-[10px] font-medium text-[var(--color-text-muted)]">
|
||||
{runtimeSummary}
|
||||
) : runtimeSummary || roleLabel ? (
|
||||
<div className="mt-0.5 flex min-w-0 items-center gap-1.5 text-[10px] font-medium text-[var(--color-text-muted)]">
|
||||
{runtimeSummary ? <span className="min-w-0 truncate">{runtimeSummary}</span> : null}
|
||||
{runtimeSummary && roleLabel ? (
|
||||
<span className="shrink-0 opacity-60">•</span>
|
||||
) : null}
|
||||
{roleLabel ? <span className="shrink-0">{roleLabel}</span> : null}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
{(() => {
|
||||
const roleLabel = formatAgentRole(member.role) ?? formatAgentRole(member.agentType);
|
||||
return roleLabel ? (
|
||||
<span className="hidden shrink-0 text-xs text-[var(--color-text-muted)] sm:inline">
|
||||
{roleLabel}
|
||||
</span>
|
||||
) : null;
|
||||
})()}
|
||||
{showStartingBadge ? (
|
||||
<span className="flex shrink-0 items-center gap-1">
|
||||
<Loader2
|
||||
|
|
|
|||
|
|
@ -25,6 +25,8 @@ vi.mock('@renderer/components/ui/ExpandableContent', () => ({
|
|||
React.createElement(React.Fragment, null, children),
|
||||
}));
|
||||
vi.mock('@renderer/components/ui/tooltip', () => ({
|
||||
TooltipProvider: ({ children }: { children: React.ReactNode }) =>
|
||||
React.createElement(React.Fragment, null, children),
|
||||
Tooltip: ({ children }: { children: React.ReactNode }) => React.createElement(React.Fragment, null, children),
|
||||
TooltipTrigger: ({ children }: { children: React.ReactNode }) =>
|
||||
React.createElement(React.Fragment, null, children),
|
||||
|
|
@ -45,6 +47,186 @@ import {
|
|||
} from '@renderer/components/team/activity/ActivityItem';
|
||||
import type { InboxMessage } from '@shared/types';
|
||||
|
||||
describe('ActivityItem compact header preview', () => {
|
||||
afterEach(() => {
|
||||
document.body.innerHTML = '';
|
||||
vi.unstubAllGlobals();
|
||||
});
|
||||
|
||||
it('uses a two-line clamped preview in compact mode', async () => {
|
||||
vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true);
|
||||
const host = document.createElement('div');
|
||||
document.body.appendChild(host);
|
||||
const root = createRoot(host);
|
||||
const summary =
|
||||
'Делегировал alice длинную задачу с заметно более длинным описанием, чтобы превью занимало больше одной строки в компактном режиме.';
|
||||
|
||||
const message: InboxMessage = {
|
||||
from: 'team-lead',
|
||||
text: summary,
|
||||
summary,
|
||||
timestamp: new Date('2026-04-18T16:30:00.000Z').toISOString(),
|
||||
read: true,
|
||||
source: 'lead_process',
|
||||
};
|
||||
|
||||
await act(async () => {
|
||||
root.render(
|
||||
React.createElement(ActivityItem, {
|
||||
message,
|
||||
teamName: 'my-team',
|
||||
compactHeader: true,
|
||||
collapseMode: 'managed',
|
||||
isCollapsed: true,
|
||||
canToggleCollapse: true,
|
||||
collapseToggleKey: 'message-key',
|
||||
})
|
||||
);
|
||||
await Promise.resolve();
|
||||
});
|
||||
|
||||
const preview = host.querySelector('.line-clamp-2');
|
||||
expect(preview).not.toBeNull();
|
||||
expect(preview?.textContent).toBe(summary);
|
||||
expect(preview?.getAttribute('title')).toBeNull();
|
||||
expect(preview?.className).toContain('line-clamp-2');
|
||||
expect(preview?.className).toContain('w-full');
|
||||
expect(preview?.className).toContain('max-w-full');
|
||||
expect(preview?.className).not.toContain('min-h-8');
|
||||
expect(preview?.className).not.toContain('truncate');
|
||||
|
||||
await act(async () => {
|
||||
root.unmount();
|
||||
await Promise.resolve();
|
||||
});
|
||||
});
|
||||
|
||||
it('prefers full message text over a pre-truncated summary in compact mode', async () => {
|
||||
vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true);
|
||||
const host = document.createElement('div');
|
||||
document.body.appendChild(host);
|
||||
const root = createRoot(host);
|
||||
const fullText =
|
||||
'Делегировал bob ещё один узкий шаг: собрать fix-batch с учётом landing P0 по render->generate и пройтись по оставшимся edge cases.';
|
||||
|
||||
const message: InboxMessage = {
|
||||
from: 'team-lead',
|
||||
text: fullText,
|
||||
summary: 'Делегировал bob ещё один узкий шаг: собрать fix-batch с у...',
|
||||
timestamp: new Date('2026-04-18T16:29:00.000Z').toISOString(),
|
||||
read: true,
|
||||
source: 'lead_process',
|
||||
};
|
||||
|
||||
await act(async () => {
|
||||
root.render(
|
||||
React.createElement(ActivityItem, {
|
||||
message,
|
||||
teamName: 'my-team',
|
||||
compactHeader: true,
|
||||
collapseMode: 'managed',
|
||||
isCollapsed: true,
|
||||
canToggleCollapse: true,
|
||||
collapseToggleKey: 'message-key-full-text',
|
||||
})
|
||||
);
|
||||
await Promise.resolve();
|
||||
});
|
||||
|
||||
const preview = host.querySelector('.line-clamp-2');
|
||||
expect(preview).not.toBeNull();
|
||||
expect(preview?.textContent).toBe(fullText);
|
||||
|
||||
await act(async () => {
|
||||
root.unmount();
|
||||
await Promise.resolve();
|
||||
});
|
||||
});
|
||||
|
||||
it('strips info_for_agent blocks from compact preview text', async () => {
|
||||
vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true);
|
||||
const host = document.createElement('div');
|
||||
document.body.appendChild(host);
|
||||
const root = createRoot(host);
|
||||
|
||||
const visibleText = 'New task assigned to you: #3fd70e2 Собрать fix-batch';
|
||||
const message: InboxMessage = {
|
||||
from: 'team-lead',
|
||||
text: `${visibleText}\n<info_for_agent>\ninternal only\n</info_for_agent>`,
|
||||
timestamp: new Date('2026-04-18T16:28:00.000Z').toISOString(),
|
||||
read: true,
|
||||
source: 'lead_process',
|
||||
};
|
||||
|
||||
await act(async () => {
|
||||
root.render(
|
||||
React.createElement(ActivityItem, {
|
||||
message,
|
||||
teamName: 'my-team',
|
||||
compactHeader: true,
|
||||
collapseMode: 'managed',
|
||||
isCollapsed: true,
|
||||
canToggleCollapse: true,
|
||||
collapseToggleKey: 'message-key-strip-agent-block',
|
||||
})
|
||||
);
|
||||
await Promise.resolve();
|
||||
});
|
||||
|
||||
const preview = host.querySelector('.line-clamp-2');
|
||||
expect(preview).not.toBeNull();
|
||||
expect(preview?.textContent).toBe(visibleText);
|
||||
expect(preview?.textContent).not.toContain('info_for_agent');
|
||||
expect(preview?.textContent).not.toContain('internal only');
|
||||
|
||||
await act(async () => {
|
||||
root.unmount();
|
||||
await Promise.resolve();
|
||||
});
|
||||
});
|
||||
|
||||
it('uses a two-line preview in collapsed wide mode, not inline one-line summary', async () => {
|
||||
vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true);
|
||||
const host = document.createElement('div');
|
||||
document.body.appendChild(host);
|
||||
const root = createRoot(host);
|
||||
const fullText =
|
||||
'Делегировал alice финальную общую сводку и remediation plan по всем findings команды.';
|
||||
|
||||
const message: InboxMessage = {
|
||||
from: 'team-lead',
|
||||
text: fullText,
|
||||
timestamp: new Date('2026-04-18T16:30:00.000Z').toISOString(),
|
||||
read: true,
|
||||
source: 'lead_process',
|
||||
};
|
||||
|
||||
await act(async () => {
|
||||
root.render(
|
||||
React.createElement(ActivityItem, {
|
||||
message,
|
||||
teamName: 'my-team',
|
||||
compactHeader: false,
|
||||
collapseMode: 'managed',
|
||||
isCollapsed: true,
|
||||
canToggleCollapse: true,
|
||||
collapseToggleKey: 'message-key-wide-collapsed',
|
||||
})
|
||||
);
|
||||
await Promise.resolve();
|
||||
});
|
||||
|
||||
const preview = host.querySelector('.line-clamp-2');
|
||||
expect(preview).not.toBeNull();
|
||||
expect(preview?.textContent).toBe(fullText);
|
||||
|
||||
await act(async () => {
|
||||
root.unmount();
|
||||
await Promise.resolve();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('ActivityItem slash command rendering', () => {
|
||||
afterEach(() => {
|
||||
document.body.innerHTML = '';
|
||||
|
|
|
|||
|
|
@ -1,8 +1,36 @@
|
|||
import React, { act } from 'react';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import { describe, expect, it } from 'vitest';
|
||||
import { afterEach, beforeEach, vi } from 'vitest';
|
||||
|
||||
vi.mock('@renderer/components/team/MemberBadge', () => ({
|
||||
MemberBadge: ({ name }: { name: string }) => React.createElement('span', null, name),
|
||||
}));
|
||||
vi.mock('@renderer/components/ui/tooltip', () => ({
|
||||
TooltipProvider: ({ children }: { children: React.ReactNode }) => React.createElement(React.Fragment, null, children),
|
||||
Tooltip: ({ children }: { children: React.ReactNode }) => React.createElement(React.Fragment, null, children),
|
||||
TooltipTrigger: ({ children }: { children: React.ReactNode }) =>
|
||||
React.createElement(React.Fragment, null, children),
|
||||
TooltipContent: ({ children }: { children: React.ReactNode }) => React.createElement('div', null, children),
|
||||
}));
|
||||
vi.mock('../../../../../src/renderer/components/team/activity/AnimatedHeightReveal', () => ({
|
||||
ENTRY_REVEAL_ANIMATION_MS: 220,
|
||||
ENTRY_REVEAL_EASING: 'ease',
|
||||
AnimatedHeightReveal: ({ children }: { children: React.ReactNode }) =>
|
||||
React.createElement(React.Fragment, null, children),
|
||||
}));
|
||||
vi.mock('../../../../../src/renderer/components/team/activity/ThoughtBodyContent', () => ({
|
||||
ThoughtBodyContent: ({ thought }: { thought: { text: string } }) =>
|
||||
React.createElement('div', null, thought.text),
|
||||
}));
|
||||
vi.mock('@renderer/utils/memberHelpers', () => ({
|
||||
agentAvatarUrl: () => '/avatar.png',
|
||||
}));
|
||||
|
||||
import {
|
||||
groupTimelineItems,
|
||||
isLeadThought,
|
||||
LeadThoughtsGroupRow,
|
||||
} from '../../../../../src/renderer/components/team/activity/LeadThoughtsGroup';
|
||||
|
||||
import type { InboxMessage } from '../../../../../src/shared/types';
|
||||
|
|
@ -19,6 +47,29 @@ function makeLeadSessionMsg(text: string, overrides?: Partial<InboxMessage>): In
|
|||
}
|
||||
|
||||
describe('LeadThoughtsGroup', () => {
|
||||
beforeEach(() => {
|
||||
vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true);
|
||||
vi.stubGlobal(
|
||||
'IntersectionObserver',
|
||||
class {
|
||||
observe() {}
|
||||
disconnect() {}
|
||||
}
|
||||
);
|
||||
vi.stubGlobal(
|
||||
'ResizeObserver',
|
||||
class {
|
||||
observe() {}
|
||||
disconnect() {}
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
document.body.innerHTML = '';
|
||||
vi.unstubAllGlobals();
|
||||
});
|
||||
|
||||
it('does not classify slash command results as lead thoughts', () => {
|
||||
const resultMessage: InboxMessage = {
|
||||
from: 'team-lead',
|
||||
|
|
@ -118,4 +169,155 @@ describe('LeadThoughtsGroup', () => {
|
|||
}
|
||||
});
|
||||
});
|
||||
|
||||
it('uses a two-line clamped preview in compact header mode', async () => {
|
||||
const host = document.createElement('div');
|
||||
document.body.appendChild(host);
|
||||
const root = createRoot(host);
|
||||
const preview =
|
||||
'Это длинный preview текста для lead thoughts, который должен занимать до двух строк в compact header, а не одну.';
|
||||
|
||||
const thought = makeLeadSessionMsg(preview, {
|
||||
messageId: 'thought-1',
|
||||
leadSessionId: 'lead-session-1',
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
root.render(
|
||||
React.createElement(LeadThoughtsGroupRow, {
|
||||
group: { type: 'lead-thoughts', thoughts: [thought] },
|
||||
collapseMode: 'managed',
|
||||
isCollapsed: true,
|
||||
canToggleCollapse: true,
|
||||
compactHeader: true,
|
||||
})
|
||||
);
|
||||
await Promise.resolve();
|
||||
});
|
||||
|
||||
const previewNode = host.querySelector('.line-clamp-2');
|
||||
expect(previewNode).not.toBeNull();
|
||||
expect(previewNode?.textContent).toBe(preview);
|
||||
expect(previewNode?.getAttribute('title')).toBeNull();
|
||||
expect(previewNode?.className).toContain('line-clamp-2');
|
||||
expect(previewNode?.className).toContain('w-full');
|
||||
expect(previewNode?.className).toContain('max-w-full');
|
||||
expect(previewNode?.className).not.toContain('min-h-8');
|
||||
expect(previewNode?.className).not.toContain('truncate');
|
||||
|
||||
await act(async () => {
|
||||
root.unmount();
|
||||
await Promise.resolve();
|
||||
});
|
||||
});
|
||||
|
||||
it('uses the normalized full thought text instead of only the first line in compact header mode', async () => {
|
||||
const host = document.createElement('div');
|
||||
document.body.appendChild(host);
|
||||
const root = createRoot(host);
|
||||
const firstLine = 'Собрать единый remediation plan.';
|
||||
const secondLine = 'Проверить remaining edge cases по graph и messages.';
|
||||
const preview = `${firstLine} ${secondLine}`;
|
||||
|
||||
const thought = makeLeadSessionMsg(`${firstLine}\n${secondLine}`, {
|
||||
messageId: 'thought-2',
|
||||
leadSessionId: 'lead-session-2',
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
root.render(
|
||||
React.createElement(LeadThoughtsGroupRow, {
|
||||
group: { type: 'lead-thoughts', thoughts: [thought] },
|
||||
collapseMode: 'managed',
|
||||
isCollapsed: true,
|
||||
canToggleCollapse: true,
|
||||
compactHeader: true,
|
||||
})
|
||||
);
|
||||
await Promise.resolve();
|
||||
});
|
||||
|
||||
const previewNode = host.querySelector('.line-clamp-2');
|
||||
expect(previewNode).not.toBeNull();
|
||||
expect(previewNode?.textContent).toBe(preview);
|
||||
|
||||
await act(async () => {
|
||||
root.unmount();
|
||||
await Promise.resolve();
|
||||
});
|
||||
});
|
||||
|
||||
it('strips info_for_agent blocks from compact thoughts preview', async () => {
|
||||
const host = document.createElement('div');
|
||||
document.body.appendChild(host);
|
||||
const root = createRoot(host);
|
||||
const visibleText = 'Собрать единый remediation plan.';
|
||||
|
||||
const thought = makeLeadSessionMsg(
|
||||
`${visibleText}\n<info_for_agent>\ninternal note\n</info_for_agent>`,
|
||||
{
|
||||
messageId: 'thought-3',
|
||||
leadSessionId: 'lead-session-3',
|
||||
}
|
||||
);
|
||||
|
||||
await act(async () => {
|
||||
root.render(
|
||||
React.createElement(LeadThoughtsGroupRow, {
|
||||
group: { type: 'lead-thoughts', thoughts: [thought] },
|
||||
collapseMode: 'managed',
|
||||
isCollapsed: true,
|
||||
canToggleCollapse: true,
|
||||
compactHeader: true,
|
||||
})
|
||||
);
|
||||
await Promise.resolve();
|
||||
});
|
||||
|
||||
const previewNode = host.querySelector('.line-clamp-2');
|
||||
expect(previewNode).not.toBeNull();
|
||||
expect(previewNode?.textContent).toBe(visibleText);
|
||||
expect(previewNode?.textContent).not.toContain('info_for_agent');
|
||||
expect(previewNode?.textContent).not.toContain('internal note');
|
||||
|
||||
await act(async () => {
|
||||
root.unmount();
|
||||
await Promise.resolve();
|
||||
});
|
||||
});
|
||||
|
||||
it('uses a two-line preview in collapsed wide mode for thought groups', async () => {
|
||||
const host = document.createElement('div');
|
||||
document.body.appendChild(host);
|
||||
const root = createRoot(host);
|
||||
const preview =
|
||||
'Делегировал alice финальную общую сводку и remediation plan по всем findings команды.';
|
||||
|
||||
const thought = makeLeadSessionMsg(preview, {
|
||||
messageId: 'thought-4',
|
||||
leadSessionId: 'lead-session-4',
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
root.render(
|
||||
React.createElement(LeadThoughtsGroupRow, {
|
||||
group: { type: 'lead-thoughts', thoughts: [thought] },
|
||||
collapseMode: 'managed',
|
||||
isCollapsed: true,
|
||||
canToggleCollapse: true,
|
||||
compactHeader: false,
|
||||
})
|
||||
);
|
||||
await Promise.resolve();
|
||||
});
|
||||
|
||||
const previewNode = host.querySelector('.line-clamp-2');
|
||||
expect(previewNode).not.toBeNull();
|
||||
expect(previewNode?.textContent).toBe(preview);
|
||||
|
||||
await act(async () => {
|
||||
root.unmount();
|
||||
await Promise.resolve();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,77 @@
|
|||
import React, { act } from 'react';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import { afterEach, describe, expect, it, vi } from 'vitest';
|
||||
|
||||
import { CurrentTaskIndicator } from '@renderer/components/team/members/CurrentTaskIndicator';
|
||||
|
||||
import type { TeamTaskWithKanban } from '@shared/types';
|
||||
|
||||
const task: TeamTaskWithKanban = {
|
||||
id: 'task-1',
|
||||
displayId: '9d1915a7',
|
||||
subject: 'Полный аудит актуальности документации и связанных onboarding заметок',
|
||||
status: 'in_progress',
|
||||
} as unknown as TeamTaskWithKanban;
|
||||
|
||||
describe('CurrentTaskIndicator', () => {
|
||||
afterEach(() => {
|
||||
document.body.innerHTML = '';
|
||||
});
|
||||
|
||||
it('uses all available width for the task pill without early subject truncation', async () => {
|
||||
vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true);
|
||||
const host = document.createElement('div');
|
||||
document.body.appendChild(host);
|
||||
const root = createRoot(host);
|
||||
|
||||
await act(async () => {
|
||||
root.render(
|
||||
React.createElement(CurrentTaskIndicator, {
|
||||
task,
|
||||
borderColor: '#3b82f6',
|
||||
})
|
||||
);
|
||||
await Promise.resolve();
|
||||
});
|
||||
|
||||
const wrapper = host.firstElementChild as HTMLElement | null;
|
||||
const button = host.querySelector('button');
|
||||
|
||||
expect(wrapper?.className).toContain('flex-1');
|
||||
expect(button?.className).toContain('flex-1');
|
||||
expect(button?.className).toContain('text-left');
|
||||
expect(button?.textContent).toContain(task.subject);
|
||||
expect(button?.style.border).toBe('');
|
||||
|
||||
await act(async () => {
|
||||
root.unmount();
|
||||
await Promise.resolve();
|
||||
});
|
||||
});
|
||||
|
||||
it('still supports an explicit subject ceiling when a compact caller requests it', async () => {
|
||||
vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true);
|
||||
const host = document.createElement('div');
|
||||
document.body.appendChild(host);
|
||||
const root = createRoot(host);
|
||||
|
||||
await act(async () => {
|
||||
root.render(
|
||||
React.createElement(CurrentTaskIndicator, {
|
||||
task,
|
||||
borderColor: '#3b82f6',
|
||||
maxSubjectLength: 12,
|
||||
})
|
||||
);
|
||||
await Promise.resolve();
|
||||
});
|
||||
|
||||
const button = host.querySelector('button');
|
||||
expect(button?.textContent).toContain('Полный аудит…');
|
||||
|
||||
await act(async () => {
|
||||
root.unmount();
|
||||
await Promise.resolve();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -240,4 +240,38 @@ describe('MemberCard starting-state visuals', () => {
|
|||
await Promise.resolve();
|
||||
});
|
||||
});
|
||||
|
||||
it('shows member color on the avatar ring instead of a colored card rail', async () => {
|
||||
vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true);
|
||||
const host = document.createElement('div');
|
||||
document.body.appendChild(host);
|
||||
const root = createRoot(host);
|
||||
|
||||
await act(async () => {
|
||||
root.render(
|
||||
React.createElement(MemberCard, {
|
||||
member,
|
||||
memberColor: 'blue',
|
||||
isTeamAlive: true,
|
||||
isTeamProvisioning: false,
|
||||
})
|
||||
);
|
||||
await Promise.resolve();
|
||||
});
|
||||
|
||||
const img = host.querySelector('img');
|
||||
const avatarRing = img?.parentElement;
|
||||
const clickableCard = host.querySelector('[role="button"]') as HTMLElement | null;
|
||||
|
||||
expect(avatarRing).not.toBeNull();
|
||||
expect(avatarRing?.style.borderColor).toBe('#3b82f6');
|
||||
expect(clickableCard?.style.borderLeft).toBe('');
|
||||
expect(clickableCard?.style.background).toBe('');
|
||||
expect(clickableCard?.className).not.toContain('px-');
|
||||
|
||||
await act(async () => {
|
||||
root.unmount();
|
||||
await Promise.resolve();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue