feat(team): enhance team messaging functionality and UI

- Integrated pending replies state management for team members.
- Updated TeamDetailView to initialize pending replies from state.
- Added logic to refresh team messages and member activity on tab focus.
- Improved UI components by increasing dialog content width for better layout.
- Enhanced member draft rows with avatar support for better visual representation.
- Implemented reconciliation logic for pending replies based on message history.
- Updated tests to cover new functionality and ensure reliability.
This commit is contained in:
777genius 2026-04-19 20:57:13 +03:00
parent 1d3d7e1f1f
commit 52677b55d0
12 changed files with 365 additions and 38 deletions

View file

@ -107,6 +107,10 @@ import { ScheduleSection } from './schedule/ScheduleSection';
import { TeamSidebarHost } from './sidebar/TeamSidebarHost';
import { TeamSidebarPortalSource } from './sidebar/TeamSidebarPortalSource';
import { TeamSidebarRail } from './sidebar/TeamSidebarRail';
import {
getTeamPendingRepliesState,
setTeamPendingRepliesState,
} from './sidebar/teamSidebarUiState';
import { ClaudeLogsSection } from './ClaudeLogsSection';
import { CollapsibleTeamSection } from './CollapsibleTeamSection';
import { ProcessesSection } from './ProcessesSection';
@ -914,7 +918,9 @@ export const TeamDetailView = ({
initialTab?: MemberDetailTab;
initialActivityFilter?: MemberActivityFilter;
} | null>(null);
const [pendingRepliesByMember, setPendingRepliesByMember] = useState<Record<string, number>>({});
const [pendingRepliesByMember, setPendingRepliesByMember] = useState<Record<string, number>>(() =>
getTeamPendingRepliesState(teamName)
);
const [createTaskDialog, setCreateTaskDialog] = useState<CreateTaskDialogState>({
open: false,
defaultSubject: '',
@ -1211,6 +1217,8 @@ export const TeamDetailView = ({
clearProvisioningError,
isTeamProvisioning,
refreshTeamData,
refreshTeamMessagesHead,
refreshMemberActivityMeta,
syncTeamPendingReplyRefresh,
kanbanFilterQuery,
clearKanbanFilter,
@ -1262,6 +1270,8 @@ export const TeamDetailView = ({
loading: s.selectedTeamName === teamName ? s.selectedTeamLoading : false,
error: s.selectedTeamName === teamName ? s.selectedTeamError : null,
refreshTeamData: s.refreshTeamData,
refreshTeamMessagesHead: s.refreshTeamMessagesHead,
refreshMemberActivityMeta: s.refreshMemberActivityMeta,
syncTeamPendingReplyRefresh: s.syncTeamPendingReplyRefresh,
kanbanFilterQuery: s.kanbanFilterQuery,
clearKanbanFilter: s.clearKanbanFilter,
@ -1285,6 +1295,7 @@ export const TeamDetailView = ({
const tabId = useTabIdOptional();
const activeTabId = useStore((s) => s.activeTabId);
const isThisTabActive = tabId ? activeTabId === tabId : false;
const wasInteractiveRef = useRef(false);
useEffect(() => {
const now = Date.now();
@ -1348,6 +1359,14 @@ export const TeamDetailView = ({
}
}, [tabId, initTabUIState]);
useEffect(() => {
setPendingRepliesByMember(getTeamPendingRepliesState(teamName));
}, [teamName]);
useEffect(() => {
setTeamPendingRepliesState(teamName, pendingRepliesByMember);
}, [pendingRepliesByMember, teamName]);
useEffect(() => {
const wasProvisioning = wasProvisioningRef.current;
wasProvisioningRef.current = isTeamProvisioning;
@ -1386,6 +1405,32 @@ export const TeamDetailView = ({
}
}, [isThisTabActive, teamName, storedTeamName, loading, selectTeam]);
useEffect(() => {
const isInteractive = isThisTabActive && isPaneFocused;
const justBecameInteractive = isInteractive && !wasInteractiveRef.current;
wasInteractiveRef.current = isInteractive;
if (!justBecameInteractive || !teamName) {
return;
}
void (async () => {
try {
const headResult = await refreshTeamMessagesHead(teamName);
if (headResult.feedChanged) {
await refreshMemberActivityMeta(teamName);
}
} catch {
// Best-effort refresh on tab focus.
}
})();
}, [
isPaneFocused,
isThisTabActive,
refreshMemberActivityMeta,
refreshTeamMessagesHead,
teamName,
]);
// Fetch active teams when launch dialog opens (for conflict warning)
useEffect(() => {
if (!launchDialogOpen) return;

View file

@ -1220,7 +1220,7 @@ export const CreateTeamDialog = ({
}
}}
>
<DialogContent className="max-w-2xl">
<DialogContent className="max-w-3xl">
<DialogHeader>
<DialogTitle className="text-sm">{initialData ? 'Copy Team' : 'Create Team'}</DialogTitle>
<DialogDescription className="text-xs">

View file

@ -23,7 +23,11 @@ import { getTeamColorSet, getThemedBadge } from '@renderer/constants/teamColors'
import { useFileListCacheWarmer } from '@renderer/hooks/useFileListCacheWarmer';
import { useTheme } from '@renderer/hooks/useTheme';
import { cn } from '@renderer/lib/utils';
import { buildMemberColorMap, displayMemberName } from '@renderer/utils/memberHelpers';
import {
agentAvatarUrl,
buildMemberColorMap,
displayMemberName,
} from '@renderer/utils/memberHelpers';
import { parseNumericSuffixName } from '@shared/utils/teamMemberName';
import { Loader2 } from 'lucide-react';
@ -451,7 +455,7 @@ export const EditTeamDialog = ({
return (
<Dialog open={open} onOpenChange={(nextOpen) => !nextOpen && onClose()}>
<DialogContent className="max-w-2xl">
<DialogContent className="max-w-3xl">
<DialogHeader>
<DialogTitle>Edit Team</DialogTitle>
<DialogDescription>Change team name, description and color</DialogDescription>
@ -518,6 +522,7 @@ export const EditTeamDialog = ({
<MemberDraftRow
member={leadDraft}
index={0}
avatarSrc={agentAvatarUrl('team-lead', 32)}
resolvedColor={effectiveResolvedMemberColorMap.get(
leadDraft.originalName ?? leadDraft.name
)}

View file

@ -1560,7 +1560,7 @@ export const LaunchTeamDialog = (props: LaunchTeamDialogProps): React.JSX.Elemen
}}
>
<DialogContent
className={isSchedule ? 'max-h-[90vh] max-w-2xl overflow-y-auto' : 'max-w-2xl'}
className={isSchedule ? 'max-h-[90vh] max-w-3xl overflow-y-auto' : 'max-w-3xl'}
>
<DialogHeader>
<DialogTitle className="text-sm">{dialogTitle}</DialogTitle>

View file

@ -76,8 +76,8 @@ interface SendMessageDialogProps {
onClose: () => void;
}
// Sticky action mode — survives dialog close/reopen (component remount)
// Default: 'delegate' for teams (overridden to 'do' if solo/no teammates)
// Sticky action mode within the current session.
// Each dialog open still re-derives the default from the current team shape.
let stickyActionMode: ActionMode = 'delegate';
export const SendMessageDialog = ({
@ -168,7 +168,12 @@ export const SendMessageDialog = ({
useEffect(() => {
if (open && !prevOpenRef.current) {
const leadName = members.find((m) => isLeadMember(m))?.name;
setMember(defaultRecipient ?? leadName ?? '');
const nextRecipient = defaultRecipient ?? leadName ?? '';
const nextRecipientMember = members.find((candidate) => candidate.name === nextRecipient);
const nextCanDelegate =
members.length > 1 && Boolean(nextRecipientMember && isLeadMember(nextRecipientMember));
setMember(nextRecipient);
setActionMode(nextCanDelegate ? 'delegate' : 'do');
setQuote(quotedMessage);
setQuoteExpanded(false);
prevResultRef.current = lastResult;
@ -188,6 +193,8 @@ export const SendMessageDialog = ({
defaultChip,
quotedMessage,
lastResult,
members,
setActionMode,
textDraft,
chipDraft,
]);

View file

@ -13,6 +13,7 @@ import { Label } from '@renderer/components/ui/label';
import { getTeamColorSet } from '@renderer/constants/teamColors';
import { useTheme } from '@renderer/hooks/useTheme';
import { cn } from '@renderer/lib/utils';
import { agentAvatarUrl } from '@renderer/utils/memberHelpers';
import { isAnthropicHaikuTeamModel } from '@renderer/utils/teamModelCatalog';
import { resolveTeamLeadColorName } from '@shared/utils/teamMemberColors';
import { AlertTriangle, ChevronDown, ChevronRight, Info } from 'lucide-react';
@ -63,7 +64,7 @@ export const LeadModelRow = ({
return (
<div
className="relative grid grid-cols-1 gap-2 rounded-md p-2 shadow-sm md:grid-cols-[auto_1fr_auto]"
className="relative grid grid-cols-1 gap-2 rounded-md p-2 shadow-sm md:grid-cols-[minmax(0,1fr)_auto_auto]"
style={{
backgroundColor: isLight
? 'color-mix(in srgb, var(--color-surface-raised) 22%, white 78%)'
@ -77,9 +78,17 @@ export const LeadModelRow = ({
aria-hidden="true"
/>
<div className="min-w-0">
<div className="flex h-8 items-center gap-3 px-2">
<span className="text-sm font-medium text-[var(--color-text)]">lead</span>
<span className="shrink-0 text-xs text-[var(--color-text-secondary)]">Team Lead</span>
<div className="flex items-center gap-2">
<img
src={agentAvatarUrl('team-lead', 32)}
alt=""
className="size-8 shrink-0 rounded-full bg-[var(--color-surface-raised)]"
loading="lazy"
/>
<div className="flex h-8 min-w-0 items-center gap-3">
<span className="truncate text-sm font-medium text-[var(--color-text)]">lead</span>
<span className="shrink-0 text-xs text-[var(--color-text-secondary)]">Team Lead</span>
</div>
</div>
</div>
<div className="min-w-0">

View file

@ -30,6 +30,7 @@ import type { EffortLevel, TeamProviderId } from '@shared/types';
interface MemberDraftRowProps {
member: MemberDraft;
index: number;
avatarSrc?: string;
resolvedColor?: string;
nameError: string | null;
onNameChange: (id: string, name: string) => void;
@ -74,6 +75,7 @@ interface MemberDraftRowProps {
export const MemberDraftRow = ({
member,
index,
avatarSrc,
resolvedColor,
nameError,
onNameChange,
@ -221,14 +223,24 @@ export const MemberDraftRow = ({
aria-hidden="true"
/>
<div className="space-y-0.5">
<Input
className="h-8 text-xs"
value={member.name}
aria-label={`Member ${index + 1} name`}
disabled={isRemoved || lockIdentity}
onChange={(event) => onNameChange(member.id, event.target.value)}
placeholder="member-name"
/>
<div className="flex items-center gap-2">
{avatarSrc ? (
<img
src={avatarSrc}
alt=""
className="size-8 shrink-0 rounded-full bg-[var(--color-surface-raised)]"
loading="lazy"
/>
) : null}
<Input
className="h-8 text-xs"
value={member.name}
aria-label={`Member ${index + 1} name`}
disabled={isRemoved || lockIdentity}
onChange={(event) => onNameChange(member.id, event.target.value)}
placeholder="member-name"
/>
</div>
{nameError ? <p className="text-[10px] text-red-300">{nameError}</p> : null}
</div>
<div>

View file

@ -2,6 +2,7 @@ import React, { useEffect, useMemo, useState } from 'react';
import { Button } from '@renderer/components/ui/button';
import { Label } from '@renderer/components/ui/label';
import { getParticipantAvatarUrlByIndex } from '@renderer/utils/memberAvatarCatalog';
import { CUSTOM_ROLE, NO_ROLE, PRESET_ROLES } from '@renderer/constants/teamRoles';
import { normalizeOptionalTeamProviderId } from '@shared/utils/teamProvider';
import { Plus } from 'lucide-react';
@ -315,6 +316,7 @@ export const MembersEditorSection = ({
key={member.id}
member={member}
index={index}
avatarSrc={getParticipantAvatarUrlByIndex(index + 1)}
resolvedColor={memberColorMap.get(member.id)}
nameError={validateMemberName?.(member.name) ?? null}
onNameChange={updateMemberName}
@ -356,6 +358,7 @@ export const MembersEditorSection = ({
key={member.id}
member={member}
index={activeMembers.length + index}
avatarSrc={getParticipantAvatarUrlByIndex(activeMembers.length + index + 1)}
resolvedColor={memberColorMap.get(member.id)}
nameError={null}
onNameChange={updateMemberName}

View file

@ -282,6 +282,9 @@ export const MessageComposer = ({
if (!isInitializedRef.current) {
isInitializedRef.current = true;
prevShouldAutoDelegateRef.current = shouldAutoDelegate;
if (shouldAutoDelegate && actionMode === 'do') {
setActionMode('delegate');
}
return;
}

View file

@ -93,6 +93,60 @@ interface MessagesPanelProps {
onTaskIdClick?: (taskId: string) => void;
}
export function reconcilePendingRepliesByMember(
pendingRepliesByMember: Record<string, number>,
messages: InboxMessage[]
): Record<string, number> {
if (Object.keys(pendingRepliesByMember).length === 0) {
return pendingRepliesByMember;
}
const latestUserSentByMember = new Map<string, number>();
const latestReplyToUserByMember = new Map<string, number>();
for (const message of messages) {
const ts = Date.parse(message.timestamp);
if (!Number.isFinite(ts)) {
continue;
}
if (
message.from === 'user' &&
typeof message.to === 'string' &&
message.to.length > 0 &&
message.source === 'user_sent'
) {
const previous = latestUserSentByMember.get(message.to);
if (previous == null || ts > previous) {
latestUserSentByMember.set(message.to, ts);
}
continue;
}
if (message.to === 'user') {
const previous = latestReplyToUserByMember.get(message.from);
if (previous == null || ts > previous) {
latestReplyToUserByMember.set(message.from, ts);
}
}
}
let changed = false;
const next: Record<string, number> = {};
for (const [memberName, sentAtMs] of Object.entries(pendingRepliesByMember)) {
const latestReplyAt = latestReplyToUserByMember.get(memberName);
const latestDurableSendAt = latestUserSentByMember.get(memberName);
const threshold = latestDurableSendAt ?? sentAtMs;
if (latestReplyAt != null && latestReplyAt > threshold) {
changed = true;
continue;
}
next[memberName] = sentAtMs;
}
return changed ? next : pendingRepliesByMember;
}
export const MessagesPanel = memo(function MessagesPanel({
teamName,
position,
@ -125,6 +179,7 @@ export const MessagesPanel = memo(function MessagesPanel({
messages,
messagesState,
loadOlderTeamMessages,
refreshTeamMessagesHead,
} = useStore(
useShallow((s) => ({
sendTeamMessage: s.sendTeamMessage,
@ -137,8 +192,10 @@ export const MessagesPanel = memo(function MessagesPanel({
messages: selectTeamMessages(s, teamName),
messagesState: teamName ? s.teamMessagesByName[teamName] : undefined,
loadOlderTeamMessages: s.loadOlderTeamMessages,
refreshTeamMessagesHead: s.refreshTeamMessagesHead,
}))
);
const bootstrapHeadRefreshAttemptedForTeamRef = useRef<string | null>(null);
const loadOlderMessages = useCallback(async () => {
if (!messagesState?.hasMore || messagesState.loadingHead || messagesState.loadingOlder) {
@ -224,6 +281,37 @@ export const MessagesPanel = memo(function MessagesPanel({
bottomSheetSnapIndex,
]);
useEffect(() => {
if (messagesSearchBarVisible || messagesSearchQuery.trim().length === 0) {
return;
}
setMessagesSearchBarVisible(true);
}, [messagesSearchBarVisible, messagesSearchQuery]);
useEffect(() => {
if (!teamName) {
return;
}
if (effectiveMessages.length > 0) {
bootstrapHeadRefreshAttemptedForTeamRef.current = null;
return;
}
if (messagesState?.loadingHead || messagesState?.loadingOlder) {
return;
}
if (bootstrapHeadRefreshAttemptedForTeamRef.current === teamName) {
return;
}
bootstrapHeadRefreshAttemptedForTeamRef.current = teamName;
void refreshTeamMessagesHead(teamName).catch(() => undefined);
}, [
effectiveMessages.length,
messagesState?.loadingHead,
messagesState?.loadingOlder,
refreshTeamMessagesHead,
teamName,
]);
useLayoutEffect(() => {
if (position !== 'sidebar') return;
const el = sidebarScrollRef.current;
@ -352,20 +440,8 @@ export const MessagesPanel = memo(function MessagesPanel({
// Auto-clear pending replies when a member actually responds
useEffect(() => {
if (Object.keys(pendingRepliesByMember).length === 0) return;
const next = { ...pendingRepliesByMember };
let changed = false;
for (const [memberName, sentAtMs] of Object.entries(pendingRepliesByMember)) {
const hasReply = replyCandidateMessages.some((m) => {
if (m.from !== memberName) return false;
const ts = Date.parse(m.timestamp);
return Number.isFinite(ts) && ts > sentAtMs;
});
if (hasReply) {
delete next[memberName];
changed = true;
}
}
if (changed) onPendingReplyChange(() => next);
const next = reconcilePendingRepliesByMember(pendingRepliesByMember, replyCandidateMessages);
if (next !== pendingRepliesByMember) onPendingReplyChange(() => next);
}, [onPendingReplyChange, pendingRepliesByMember, replyCandidateMessages]);
const handleSend = useCallback(

View file

@ -23,6 +23,7 @@ export interface TeamClaudeLogsSidebarUiState {
}
const messagesStateByTeam = new Map<string, TeamMessagesSidebarUiState>();
const pendingRepliesStateByTeam = new Map<string, Record<string, number>>();
const claudeLogsStateByTeam = new Map<string, TeamClaudeLogsSidebarUiState>();
function cloneMessagesFilter(filter: MessagesFilterState): MessagesFilterState {
@ -101,6 +102,17 @@ export function setTeamMessagesSidebarUiState(
});
}
export function getTeamPendingRepliesState(teamName: string): Record<string, number> {
return { ...(pendingRepliesStateByTeam.get(teamName) ?? {}) };
}
export function setTeamPendingRepliesState(
teamName: string,
pendingRepliesByMember: Record<string, number>
): void {
pendingRepliesStateByTeam.set(teamName, { ...pendingRepliesByMember });
}
export function getTeamClaudeLogsSidebarUiState(teamName: string): TeamClaudeLogsSidebarUiState {
const state = claudeLogsStateByTeam.get(teamName) ?? createDefaultClaudeLogsSidebarUiState();
return {

View file

@ -13,6 +13,11 @@ const storeState = {
teams: [],
openTeamTab: vi.fn(),
loadOlderTeamMessages: vi.fn().mockResolvedValue(undefined),
refreshTeamMessagesHead: vi.fn().mockResolvedValue({
feedChanged: true,
headChanged: true,
feedRevision: 'rev-1',
}),
teamMessagesByName: {} as Record<
string,
{
@ -40,6 +45,17 @@ const expandedHookState = {
toggle: vi.fn(),
};
const sidebarUiState = {
messagesSearchQuery: '',
messagesFilter: { from: new Set<string>(), to: new Set<string>(), showNoise: false },
messagesFilterOpen: false,
messagesCollapsed: true,
messagesSearchBarVisible: false,
expandedItemKey: null as string | null,
messagesScrollTop: 0,
bottomSheetSnapIndex: 2,
};
vi.mock('@renderer/store', () => ({
useStore: (selector: (state: typeof storeState) => unknown) => selector(storeState),
}));
@ -95,6 +111,24 @@ vi.mock('@renderer/components/team/messages/StatusBlock', () => ({
StatusBlock: () => React.createElement('div', null, 'status-block'),
}));
vi.mock('@renderer/components/team/sidebar/teamSidebarUiState', () => ({
getTeamMessagesSidebarUiState: () => ({
messagesSearchQuery: sidebarUiState.messagesSearchQuery,
messagesFilter: {
from: new Set(sidebarUiState.messagesFilter.from),
to: new Set(sidebarUiState.messagesFilter.to),
showNoise: sidebarUiState.messagesFilter.showNoise,
},
messagesFilterOpen: sidebarUiState.messagesFilterOpen,
messagesCollapsed: sidebarUiState.messagesCollapsed,
messagesSearchBarVisible: sidebarUiState.messagesSearchBarVisible,
expandedItemKey: sidebarUiState.expandedItemKey,
messagesScrollTop: sidebarUiState.messagesScrollTop,
bottomSheetSnapIndex: sidebarUiState.bottomSheetSnapIndex,
}),
setTeamMessagesSidebarUiState: vi.fn(),
}));
vi.mock('@renderer/components/team/activity/ActivityTimeline', () => ({
ActivityTimeline: ({ messages }: { messages: InboxMessage[] }) =>
React.createElement(
@ -132,7 +166,10 @@ vi.mock('react-modal-sheet', () => ({
),
}));
import { MessagesPanel } from '@renderer/components/team/messages/MessagesPanel';
import {
MessagesPanel,
reconcilePendingRepliesByMember,
} from '@renderer/components/team/messages/MessagesPanel';
function makeMessage(overrides: Partial<InboxMessage> = {}): InboxMessage {
return {
@ -162,7 +199,16 @@ describe('MessagesPanel idle summary invariants', () => {
storeState.sendCrossTeamMessage.mockClear();
storeState.openTeamTab.mockClear();
storeState.loadOlderTeamMessages.mockClear();
storeState.refreshTeamMessagesHead.mockClear();
storeState.teamMessagesByName = {};
sidebarUiState.messagesSearchQuery = '';
sidebarUiState.messagesFilter = { from: new Set(), to: new Set(), showNoise: false };
sidebarUiState.messagesFilterOpen = false;
sidebarUiState.messagesCollapsed = true;
sidebarUiState.messagesSearchBarVisible = false;
sidebarUiState.expandedItemKey = null;
sidebarUiState.messagesScrollTop = 0;
sidebarUiState.bottomSheetSnapIndex = 2;
});
it('keeps read passive peer summaries in the activity timeline while unread badge only counts filtered unread messages', async () => {
@ -286,7 +332,7 @@ describe('MessagesPanel idle summary invariants', () => {
});
});
it('clears pending replies when a real member reply arrives after the pending timestamp', async () => {
it('clears pending replies when a real member reply to the user arrives after the pending timestamp', async () => {
vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true);
const host = document.createElement('div');
document.body.appendChild(host);
@ -296,10 +342,11 @@ describe('MessagesPanel idle summary invariants', () => {
const pendingSentAtMs = Date.parse('2026-04-08T12:00:00.000Z');
const messages: InboxMessage[] = [
makeMessage({
messageId: 'lead-reply',
messageId: 'member-reply',
from: 'alice',
to: 'user',
read: true,
source: 'lead_process',
source: 'inbox',
timestamp: '2026-04-08T12:01:00.000Z',
text: 'Starting now.',
}),
@ -344,6 +391,30 @@ describe('MessagesPanel idle summary invariants', () => {
});
});
it('clears pending replies from durable user_sent history even if the local pending timestamp drifted later', () => {
const pendingSentAtMs = Date.parse('2026-04-08T12:02:00.000Z');
const messages: InboxMessage[] = [
makeMessage({
messageId: 'user-send',
from: 'user',
to: 'forge',
source: 'user_sent',
timestamp: '2026-04-08T12:00:00.000Z',
text: 'Тут?',
}),
makeMessage({
messageId: 'forge-reply',
from: 'forge',
to: 'user',
source: 'inbox',
timestamp: '2026-04-08T12:00:05.000Z',
text: 'Да, я тут.',
}),
];
expect(reconcilePendingRepliesByMember({ forge: pendingSentAtMs }, messages)).toEqual({});
});
it('renders the bottom-sheet composer before the status block so input stays pinned near the header', async () => {
vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true);
const host = document.createElement('div');
@ -389,4 +460,88 @@ describe('MessagesPanel idle summary invariants', () => {
await Promise.resolve();
});
});
it('reopens the search bar when a persisted search query is active', async () => {
vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true);
const host = document.createElement('div');
document.body.appendChild(host);
const root = createRoot(host);
sidebarUiState.messagesSearchQuery = 'Тут?';
sidebarUiState.messagesSearchBarVisible = false;
await act(async () => {
storeState.teamMessagesByName['atlas-hq'] = {
canonicalMessages: [makeMessage({ text: 'Тут?' })],
optimisticMessages: [],
feedRevision: 'rev-1',
nextCursor: null,
hasMore: false,
lastFetchedAt: Date.now(),
loadingHead: false,
loadingOlder: false,
headHydrated: true,
};
root.render(
React.createElement(MessagesPanel, {
teamName: 'atlas-hq',
position: 'sidebar',
onPositionChange: vi.fn(),
members: [],
tasks: [],
timeWindow: null,
pendingRepliesByMember: {},
onPendingReplyChange: vi.fn(),
})
);
await Promise.resolve();
});
expect(host.querySelector('input[placeholder=\"Search...\"]')).not.toBeNull();
await act(async () => {
root.unmount();
await Promise.resolve();
});
});
it('requests a one-shot head refresh when the messages cache is empty', async () => {
vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true);
const host = document.createElement('div');
document.body.appendChild(host);
const root = createRoot(host);
await act(async () => {
storeState.teamMessagesByName['atlas-hq'] = {
canonicalMessages: [],
optimisticMessages: [],
feedRevision: null,
nextCursor: null,
hasMore: false,
lastFetchedAt: null,
loadingHead: false,
loadingOlder: false,
headHydrated: false,
};
root.render(
React.createElement(MessagesPanel, {
teamName: 'atlas-hq',
position: 'sidebar',
onPositionChange: vi.fn(),
members: [],
tasks: [],
timeWindow: null,
pendingRepliesByMember: {},
onPendingReplyChange: vi.fn(),
})
);
await Promise.resolve();
});
expect(storeState.refreshTeamMessagesHead).toHaveBeenCalledWith('atlas-hq');
await act(async () => {
root.unmount();
await Promise.resolve();
});
});
});