admin-valentin/agent-ecosystem
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

perf(renderer): performance improvements — React.memo + test stabilization Merge pull request #93 from sardorb3k/improve/v1.3

Browse source 
Merge pull request #93 from sardorb3k/improve/v1.3
This commit is contained in:
Илия 2026-05-03 13:02:14 +03:00 committed by GitHub
commit e21d89a057
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
47 changed files with 2975 additions and 2586 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/main/services/schedule/ScheduledTaskExecutor.ts
View file

@ -178,7 +178,9 @@ export class ScheduledTaskExecutor {
cwd: request.config.cwd, cwd: request.config.cwd,
// shellEnv spread after buildEnrichedEnv ensures freshly-resolved values // shellEnv spread after buildEnrichedEnv ensures freshly-resolved values
// take precedence over the cached snapshot inside buildEnrichedEnv. // take precedence over the cached snapshot inside buildEnrichedEnv.
env, // CLAUDECODE stripped last to prevent nested-session detection regardless
// of what buildProviderAwareCliEnv merges in.
env: { ...env, CLAUDECODE: undefined },
stdio: ['ignore', 'pipe', 'pipe'], stdio: ['ignore', 'pipe', 'pipe'],
}); });

4
src/main/services/team/TeamMcpConfigBuilder.ts
View file

@ -154,6 +154,10 @@ async function hasValidServerCopy(dir: string): Promise<boolean> {
let _resolvedNodePath: string | undefined; let _resolvedNodePath: string | undefined;
export function clearResolvedNodePathForTests(): void {
_resolvedNodePath = undefined;
}
/** /**
* Find the real `node` binary path. In Electron, process.execPath is the * Find the real `node` binary path. In Electron, process.execPath is the
* Electron binary — NOT node — so we must resolve node separately. * Electron binary — NOT node — so we must resolve node separately.

8
src/renderer/components/chat/CompactBoundary.tsx
View file

@ -1,4 +1,4 @@
import React, { useState } from 'react'; import React, { memo, useState } from 'react';
import ReactMarkdown from 'react-markdown'; import ReactMarkdown from 'react-markdown';
import { import {
@ -28,9 +28,9 @@ interface CompactBoundaryProps {
* CompactBoundary displays a horizontal divider indicating where * CompactBoundary displays a horizontal divider indicating where
* the conversation was compacted. Click to expand the compacted summary. * the conversation was compacted. Click to expand the compacted summary.
*/ */
export const CompactBoundary = ({ export const CompactBoundary = memo(function CompactBoundary({
compactGroup, compactGroup,
}: Readonly<CompactBoundaryProps>): React.JSX.Element => { }: Readonly<CompactBoundaryProps>): React.JSX.Element {
const { timestamp, message } = compactGroup; const { timestamp, message } = compactGroup;
const [isExpanded, setIsExpanded] = useState(false); const [isExpanded, setIsExpanded] = useState(false);
@ -166,4 +166,4 @@ export const CompactBoundary = ({
)} )}
</div> </div>
); );
}; });

272
src/renderer/components/chat/DisplayItemList.tsx
View file

@ -1,4 +1,4 @@
import React, { useCallback, useState } from 'react'; import React, { memo, useCallback, useState } from 'react';
import { import {
CODE_BG, CODE_BG,
@ -65,9 +65,6 @@ function buildItemMetaTooltip(
return parts.length > 0 ? parts.join(' • ') : undefined; return parts.length > 0 ? parts.join(' • ') : undefined;
} }
/**
* Truncates text to a maximum length and adds ellipsis if needed.
*/
function truncateText(text: string, maxLength: number): string { function truncateText(text: string, maxLength: number): string {
if (text.length <= maxLength) { if (text.length <= maxLength) {
return text; return text;
@ -75,24 +72,63 @@ function truncateText(text: string, maxLength: number): string {
return text.substring(0, maxLength) + '...'; return text.substring(0, maxLength) + '...';
} }
/** function getItemKey(item: AIGroupDisplayItem, index: number): string {
* Renders a flat list of AIGroupDisplayItem[] into the appropriate components. switch (item.type) {
* case 'thinking':
* This component maps each display item to its corresponding component based on type: return `thinking-${index}`;
* - thinking -> ThinkingItem case 'output':
* - output -> TextItem return `output-${index}`;
* - tool -> LinkedToolItem case 'tool':
* - subagent -> SubagentItem return `tool-${item.tool.id}-${index}`;
* - slash -> SlashItem case 'subagent':
* return `subagent-${item.subagent.id}-${index}`;
* The list is completely flat with no nested toggles or hierarchies. case 'slash':
*/ return `slash-${item.slash.name}-${index}`;
export const DisplayItemList = ({ case 'teammate_message':
items, return `teammate-${item.teammateMessage.id}-${index}`;
case 'subagent_input':
return `input-${index}`;
case 'compact_boundary':
return `compact-${index}`;
default:
return `unknown-${index}`;
}
}
// =============================================================================
// Per-item row — memoized to prevent re-renders from parent state changes
// =============================================================================
interface DisplayItemRowProps {
item: AIGroupDisplayItem;
index: number;
itemKey: string;
isExpanded: boolean;
isDimmed: boolean;
hasReplyLink: boolean;
onItemClick: (key: string) => void;
onReplyHover: (toolId: string | null) => void;
aiGroupId: string;
searchQueryOverride?: string;
highlightToolUseId?: string;
highlightColor?: TriggerColor;
notificationColorMap?: Map<string, TriggerColor>;
registerToolRef?: (toolId: string, el: HTMLDivElement | null) => void;
previewMaxLength?: number;
timestampFormat?: string;
showItemMetaTooltip?: boolean;
}
const DisplayItemRow = memo(function DisplayItemRow({
item,
index: _index,
itemKey,
isExpanded,
isDimmed,
hasReplyLink,
onItemClick, onItemClick,
expandedItemIds, onReplyHover,
aiGroupId, aiGroupId,
order = 'chronological',
searchQueryOverride, searchQueryOverride,
highlightToolUseId, highlightToolUseId,
highlightColor, highlightColor,
@ -101,44 +137,13 @@ export const DisplayItemList = ({
previewMaxLength, previewMaxLength,
timestampFormat, timestampFormat,
showItemMetaTooltip = false, showItemMetaTooltip = false,
}: Readonly<DisplayItemListProps>): React.JSX.Element => { }: DisplayItemRowProps): React.JSX.Element | null {
// Reply-link highlight: when hovering a reply badge, dim everything except the linked pair const handleClick = useCallback(() => onItemClick(itemKey), [onItemClick, itemKey]);
const [replyLinkToolId, setReplyLinkToolId] = useState<string | null>(null);
const handleReplyHover = useCallback((toolId: string | null) => {
setReplyLinkToolId(toolId);
}, []);
/** Check if an item is part of the currently highlighted reply link */
const isItemInReplyLink = (item: AIGroupDisplayItem): boolean => {
if (!replyLinkToolId) return false;
if (item.type === 'tool' && item.tool.id === replyLinkToolId) return true;
if (item.type === 'teammate_message' && item.teammateMessage.replyToToolId === replyLinkToolId)
return true;
return false;
};
if (!items || items.length === 0) {
return (
<div className="px-3 py-2 text-sm italic text-claude-dark-text-secondary">
No items to display
</div>
);
}
return (
<div
className={
order === 'newest-first' ? 'flex min-w-0 flex-col-reverse gap-2' : 'min-w-0 space-y-2'
}
>
{items.map((item, index) => {
let itemKey = '';
let element: React.ReactNode = null; let element: React.ReactNode = null;
switch (item.type) { switch (item.type) {
case 'thinking': { case 'thinking': {
itemKey = `thinking-${index}`;
const thinkingStep = { const thinkingStep = {
id: itemKey, id: itemKey,
type: 'thinking' as const, type: 'thinking' as const,
@ -153,8 +158,8 @@ export const DisplayItemList = ({
<ThinkingItem <ThinkingItem
step={thinkingStep} step={thinkingStep}
preview={truncateText(item.content, previewMaxLength ?? 150)} preview={truncateText(item.content, previewMaxLength ?? 150)}
onClick={() => onItemClick(itemKey)} onClick={handleClick}
isExpanded={expandedItemIds.has(itemKey)} isExpanded={isExpanded}
timestamp={item.timestamp} timestamp={item.timestamp}
timestampFormat={timestampFormat} timestampFormat={timestampFormat}
titleText={ titleText={
@ -170,7 +175,6 @@ export const DisplayItemList = ({
} }
case 'output': { case 'output': {
itemKey = `output-${index}`;
const textStep = { const textStep = {
id: itemKey, id: itemKey,
type: 'output' as const, type: 'output' as const,
@ -185,8 +189,8 @@ export const DisplayItemList = ({
<TextItem <TextItem
step={textStep} step={textStep}
preview={truncateText(item.content, previewMaxLength ?? 150)} preview={truncateText(item.content, previewMaxLength ?? 150)}
onClick={() => onItemClick(itemKey)} onClick={handleClick}
isExpanded={expandedItemIds.has(itemKey)} isExpanded={isExpanded}
timestamp={item.timestamp} timestamp={item.timestamp}
timestampFormat={timestampFormat} timestampFormat={timestampFormat}
titleText={ titleText={
@ -202,37 +206,29 @@ export const DisplayItemList = ({
} }
case 'tool': { case 'tool': {
itemKey = `tool-${item.tool.id}-${index}`;
element = ( element = (
<LinkedToolItem <LinkedToolItem
linkedTool={item.tool} linkedTool={item.tool}
onClick={() => onItemClick(itemKey)} onClick={handleClick}
isExpanded={expandedItemIds.has(itemKey)} isExpanded={isExpanded}
timestamp={item.tool.startTime} timestamp={item.tool.startTime}
timestampFormat={timestampFormat} timestampFormat={timestampFormat}
titleText={ titleText={
showItemMetaTooltip showItemMetaTooltip
? buildItemMetaTooltip( ? buildItemMetaTooltip(item.tool.startTime, getToolContextTokens(item.tool), 'tokens')
item.tool.startTime,
getToolContextTokens(item.tool),
'tokens'
)
: undefined : undefined
} }
searchQueryOverride={searchQueryOverride} searchQueryOverride={searchQueryOverride}
isHighlighted={highlightToolUseId === item.tool.id} isHighlighted={highlightToolUseId === item.tool.id}
highlightColor={highlightColor} highlightColor={highlightColor}
notificationDotColor={notificationColorMap?.get(item.tool.id)} notificationDotColor={notificationColorMap?.get(item.tool.id)}
registerRef={ registerRef={registerToolRef ? (el) => registerToolRef(item.tool.id, el) : undefined}
registerToolRef ? (el) => registerToolRef(item.tool.id, el) : undefined
}
/> />
); );
break; break;
} }
case 'subagent': { case 'subagent': {
itemKey = `subagent-${item.subagent.id}-${index}`;
const subagentStep = { const subagentStep = {
id: itemKey, id: itemKey,
type: 'subagent' as const, type: 'subagent' as const,
@ -250,8 +246,8 @@ export const DisplayItemList = ({
<SubagentItem <SubagentItem
step={subagentStep} step={subagentStep}
subagent={item.subagent} subagent={item.subagent}
onClick={() => onItemClick(itemKey)} onClick={handleClick}
isExpanded={expandedItemIds.has(itemKey)} isExpanded={isExpanded}
aiGroupId={aiGroupId} aiGroupId={aiGroupId}
highlightToolUseId={highlightToolUseId} highlightToolUseId={highlightToolUseId}
highlightColor={highlightColor} highlightColor={highlightColor}
@ -263,12 +259,11 @@ export const DisplayItemList = ({
} }
case 'slash': { case 'slash': {
itemKey = `slash-${item.slash.name}-${index}`;
element = ( element = (
<SlashItem <SlashItem
slash={item.slash} slash={item.slash}
onClick={() => onItemClick(itemKey)} onClick={handleClick}
isExpanded={expandedItemIds.has(itemKey)} isExpanded={isExpanded}
timestamp={item.slash.timestamp} timestamp={item.slash.timestamp}
timestampFormat={timestampFormat} timestampFormat={timestampFormat}
titleText={ titleText={
@ -286,20 +281,18 @@ export const DisplayItemList = ({
} }
case 'teammate_message': { case 'teammate_message': {
itemKey = `teammate-${item.teammateMessage.id}-${index}`;
element = ( element = (
<TeammateMessageItem <TeammateMessageItem
teammateMessage={item.teammateMessage} teammateMessage={item.teammateMessage}
onClick={() => onItemClick(itemKey)} onClick={handleClick}
isExpanded={expandedItemIds.has(itemKey)} isExpanded={isExpanded}
onReplyHover={handleReplyHover} onReplyHover={onReplyHover}
/> />
); );
break; break;
} }
case 'subagent_input': { case 'subagent_input': {
itemKey = `input-${index}`;
const inputContent = item.content; const inputContent = item.content;
const inputTokenCount = item.tokenCount; const inputTokenCount = item.tokenCount;
element = ( element = (
@ -315,8 +308,8 @@ export const DisplayItemList = ({
? buildItemMetaTooltip(item.timestamp, inputTokenCount, 'tokens') ? buildItemMetaTooltip(item.timestamp, inputTokenCount, 'tokens')
: undefined : undefined
} }
onClick={() => onItemClick(itemKey)} onClick={handleClick}
isExpanded={expandedItemIds.has(itemKey)} isExpanded={isExpanded}
> >
<MarkdownViewer <MarkdownViewer
content={inputContent} content={inputContent}
@ -330,27 +323,22 @@ export const DisplayItemList = ({
} }
case 'compact_boundary': { case 'compact_boundary': {
itemKey = `compact-${index}`;
const compactContent = item.content; const compactContent = item.content;
const compactExpanded = expandedItemIds.has(itemKey);
element = ( element = (
<div> <div>
<button <button
onClick={() => onItemClick(itemKey)} onClick={handleClick}
className="group flex w-full cursor-pointer items-center gap-2 rounded-lg px-3 py-2 transition-all duration-200" className="group flex w-full cursor-pointer items-center gap-2 rounded-lg px-3 py-2 transition-all duration-200"
style={{ style={{
backgroundColor: TOOL_CALL_BG, backgroundColor: TOOL_CALL_BG,
border: `1px solid ${TOOL_CALL_BORDER}`, border: `1px solid ${TOOL_CALL_BORDER}`,
}} }}
aria-expanded={compactExpanded} aria-expanded={isExpanded}
>
<div
className="flex shrink-0 items-center gap-1.5"
style={{ color: TOOL_CALL_TEXT }}
> >
<div className="flex shrink-0 items-center gap-1.5" style={{ color: TOOL_CALL_TEXT }}>
<ChevronRight <ChevronRight
size={14} size={14}
className={`transition-transform duration-200 ${compactExpanded ? 'rotate-90' : ''}`} className={`transition-transform duration-200 ${isExpanded ? 'rotate-90' : ''}`}
/> />
<Layers size={14} /> <Layers size={14} />
</div> </div>
@ -379,14 +367,11 @@ export const DisplayItemList = ({
> >
Phase {item.phaseNumber} Phase {item.phaseNumber}
</span> </span>
<span <span className="ml-auto shrink-0 text-[11px]" style={{ color: COLOR_TEXT_MUTED }}>
className="ml-auto shrink-0 text-[11px]"
style={{ color: COLOR_TEXT_MUTED }}
>
{format(new Date(item.timestamp), 'h:mm:ss a')} {format(new Date(item.timestamp), 'h:mm:ss a')}
</span> </span>
</button> </button>
{compactExpanded && compactContent && ( {isExpanded && compactContent && (
<div <div
className="mt-1 overflow-hidden rounded-lg" className="mt-1 overflow-hidden rounded-lg"
style={{ style={{
@ -411,21 +396,102 @@ export const DisplayItemList = ({
return null; return null;
} }
// Apply reply-link spotlight: dim items not in the highlighted pair
const isDimmed = replyLinkToolId !== null && !isItemInReplyLink(item);
return ( return (
<div <div
key={itemKey}
style={ style={
replyLinkToolId !== null hasReplyLink ? { opacity: isDimmed ? 0.2 : 1, transition: 'opacity 150ms ease' } : undefined
? { opacity: isDimmed ? 0.2 : 1, transition: 'opacity 150ms ease' }
: undefined
} }
> >
{element} {element}
</div> </div>
); );
});
// =============================================================================
// Main component
// =============================================================================
/**
* Renders a flat list of AIGroupDisplayItem[] into the appropriate components.
*
* This component maps each display item to its corresponding component based on type:
* - thinking -> ThinkingItem
* - output -> TextItem
* - tool -> LinkedToolItem
* - subagent -> SubagentItem
* - slash -> SlashItem
*
* The list is completely flat with no nested toggles or hierarchies.
*/
export const DisplayItemList = React.memo(function DisplayItemList({
items,
onItemClick,
expandedItemIds,
aiGroupId,
order = 'chronological',
searchQueryOverride,
highlightToolUseId,
highlightColor,
notificationColorMap,
registerToolRef,
previewMaxLength,
timestampFormat,
showItemMetaTooltip = false,
}: Readonly<DisplayItemListProps>): React.JSX.Element {
const [replyLinkToolId, setReplyLinkToolId] = useState<string | null>(null);
const handleReplyHover = useCallback((toolId: string | null) => {
setReplyLinkToolId(toolId);
}, []);
if (!items || items.length === 0) {
return (
<div className="px-3 py-2 text-sm italic text-claude-dark-text-secondary">
No items to display
</div>
);
}
return (
<div
className={
order === 'newest-first' ? 'flex min-w-0 flex-col-reverse gap-2' : 'min-w-0 space-y-2'
}
>
{items.map((item, index) => {
const itemKey = getItemKey(item, index);
const isExpanded = expandedItemIds.has(itemKey);
const isInReplyLink =
replyLinkToolId !== null &&
((item.type === 'tool' && item.tool.id === replyLinkToolId) ||
(item.type === 'teammate_message' &&
item.teammateMessage.replyToToolId === replyLinkToolId));
const isDimmed = replyLinkToolId !== null && !isInReplyLink;
return (
<DisplayItemRow
key={itemKey}
item={item}
index={index}
itemKey={itemKey}
isExpanded={isExpanded}
isDimmed={isDimmed}
hasReplyLink={replyLinkToolId !== null}
onItemClick={onItemClick}
onReplyHover={handleReplyHover}
aiGroupId={aiGroupId}
searchQueryOverride={searchQueryOverride}
highlightToolUseId={highlightToolUseId}
highlightColor={highlightColor}
notificationColorMap={notificationColorMap}
registerToolRef={registerToolRef}
previewMaxLength={previewMaxLength}
timestampFormat={timestampFormat}
showItemMetaTooltip={showItemMetaTooltip}
/>
);
})} })}
</div> </div>
); );
}; });

19
src/renderer/components/chat/items/BaseItem.tsx
View file

@ -1,4 +1,4 @@
import React from 'react'; import React, { memo } from 'react';
import { TOOL_ITEM_MUTED } from '@renderer/constants/cssVariables'; import { TOOL_ITEM_MUTED } from '@renderer/constants/cssVariables';
import { getTriggerColorDef, type TriggerColor } from '@shared/constants/triggerColors'; import { getTriggerColorDef, type TriggerColor } from '@shared/constants/triggerColors';
@ -57,14 +57,14 @@ interface BaseItemProps {
/** /**
* Small status dot indicator. * Small status dot indicator.
*/ */
export const StatusDot: React.FC<{ status: ItemStatus }> = ({ status }) => { export const StatusDot = memo(function StatusDot({ status }: { status: ItemStatus }) {
return ( return (
<span <span
className="base-item-status-dot inline-block size-1.5 shrink-0 rounded-full" className="base-item-status-dot inline-block size-1.5 shrink-0 rounded-full"
style={{ backgroundColor: getStatusDotColor(status) }} style={{ backgroundColor: getStatusDotColor(status) }}
/> />
); );
}; });
// ============================================================================= // =============================================================================
// Main Component // Main Component
@ -79,7 +79,8 @@ export const StatusDot: React.FC<{ status: ItemStatus }> = ({ status }) => {
* *
* Used by: ThinkingItem, TextItem, LinkedToolItem, SlashItem, SubagentItem * Used by: ThinkingItem, TextItem, LinkedToolItem, SlashItem, SubagentItem
*/ */
export const BaseItem: React.FC<BaseItemProps> = ({ export const BaseItem = memo(
({
icon, icon,
label, label,
summary, summary,
@ -97,7 +98,7 @@ export const BaseItem: React.FC<BaseItemProps> = ({
highlightStyle, highlightStyle,
notificationDotColor, notificationDotColor,
children, children,
}) => { }: BaseItemProps): React.JSX.Element => {
return ( return (
<div <div
className={`rounded transition-[background-color,box-shadow] duration-300 ${highlightClasses}`} className={`rounded transition-[background-color,box-shadow] duration-300 ${highlightClasses}`}
@ -140,7 +141,10 @@ export const BaseItem: React.FC<BaseItemProps> = ({
<span className="text-sm" style={{ color: TOOL_ITEM_MUTED }}> <span className="text-sm" style={{ color: TOOL_ITEM_MUTED }}>
- -
</span> </span>
<span className="flex-1 truncate text-sm" style={{ color: 'var(--tool-item-summary)' }}> <span
className="flex-1 truncate text-sm"
style={{ color: 'var(--tool-item-summary)' }}
>
{summary} {summary}
</span> </span>
</> </>
@ -210,4 +214,5 @@ export const BaseItem: React.FC<BaseItemProps> = ({
)} )}
</div> </div>
); );
}; }
);

11
src/renderer/components/chat/items/ExecutionTrace.tsx
View file

@ -46,7 +46,8 @@ interface ExecutionTraceProps {
// Execution Trace Component // Execution Trace Component
// ============================================================================= // =============================================================================
export const ExecutionTrace: React.FC<ExecutionTraceProps> = ({ export const ExecutionTrace: React.FC<ExecutionTraceProps> = React.memo(
({
items, items,
aiGroupId: _aiGroupId, aiGroupId: _aiGroupId,
highlightToolUseId, highlightToolUseId,
@ -217,7 +218,10 @@ export const ExecutionTrace: React.FC<ExecutionTraceProps> = ({
/> />
<Layers size={14} /> <Layers size={14} />
</div> </div>
<span className="shrink-0 text-xs font-medium" style={{ color: TOOL_CALL_TEXT }}> <span
className="shrink-0 text-xs font-medium"
style={{ color: TOOL_CALL_TEXT }}
>
Compacted Compacted
</span> </span>
{item.tokenDelta && ( {item.tokenDelta && (
@ -276,4 +280,5 @@ export const ExecutionTrace: React.FC<ExecutionTraceProps> = ({
})} })}
</div> </div>
); );
}; }
);

10
src/renderer/components/chat/items/LinkedToolItem.tsx
View file

@ -6,7 +6,7 @@
* for summary generation and token calculation. * for summary generation and token calculation.
*/ */
import React, { useRef } from 'react'; import React, { memo, useRef } from 'react';
import { CARD_ICON_MUTED } from '@renderer/constants/cssVariables'; import { CARD_ICON_MUTED } from '@renderer/constants/cssVariables';
import { getTeamColorSet, getThemedBadge } from '@renderer/constants/teamColors'; import { getTeamColorSet, getThemedBadge } from '@renderer/constants/teamColors';
@ -64,7 +64,8 @@ interface LinkedToolItemProps {
titleText?: string; titleText?: string;
} }
export const LinkedToolItem: React.FC<LinkedToolItemProps> = ({ export const LinkedToolItem = memo(
({
linkedTool, linkedTool,
onClick, onClick,
isExpanded, isExpanded,
@ -76,7 +77,7 @@ export const LinkedToolItem: React.FC<LinkedToolItemProps> = ({
notificationDotColor, notificationDotColor,
registerRef, registerRef,
titleText, titleText,
}) => { }: LinkedToolItemProps): React.JSX.Element => {
const status = getToolStatus(linkedTool); const status = getToolStatus(linkedTool);
const { isLight } = useTheme(); const { isLight } = useTheme();
const summary = getToolSummary(linkedTool.name, linkedTool.input); const summary = getToolSummary(linkedTool.name, linkedTool.input);
@ -233,4 +234,5 @@ export const LinkedToolItem: React.FC<LinkedToolItemProps> = ({
</BaseItem> </BaseItem>
</div> </div>
); );
}; }
);

8
src/renderer/components/chat/items/MetricsPill.tsx
View file

@ -1,4 +1,4 @@
import React, { useEffect, useRef, useState } from 'react'; import React, { memo, useEffect, useRef, useState } from 'react';
import { createPortal } from 'react-dom'; import { createPortal } from 'react-dom';
import { import {
@ -41,7 +41,8 @@ interface MetricsPillProps {
// Unified Metrics Pill - Compact monospace pill with tooltip // Unified Metrics Pill - Compact monospace pill with tooltip
// ============================================================================= // =============================================================================
export const MetricsPill = ({ export const MetricsPill = memo(
({
mainSessionImpact, mainSessionImpact,
lastUsage, lastUsage,
isolatedLabel, isolatedLabel,
@ -212,4 +213,5 @@ export const MetricsPill = ({
)} )}
</> </>
); );
}; }
);

10
src/renderer/components/chat/items/SlashItem.tsx
View file

@ -1,4 +1,4 @@
import React from 'react'; import React, { memo } from 'react';
import { Slash } from 'lucide-react'; import { Slash } from 'lucide-react';
@ -34,7 +34,8 @@ interface SlashItemProps {
* - MCP commands * - MCP commands
* - User-defined commands * - User-defined commands
*/ */
export const SlashItem: React.FC<SlashItemProps> = ({ export const SlashItem = memo(
({
slash, slash,
onClick, onClick,
isExpanded, isExpanded,
@ -44,7 +45,7 @@ export const SlashItem: React.FC<SlashItemProps> = ({
highlightStyle, highlightStyle,
notificationDotColor, notificationDotColor,
titleText, titleText,
}) => { }: SlashItemProps): React.JSX.Element => {
const hasInstructions = !!slash.instructions; const hasInstructions = !!slash.instructions;
// Display args or message as the description // Display args or message as the description
@ -78,4 +79,5 @@ export const SlashItem: React.FC<SlashItemProps> = ({
)} )}
</BaseItem> </BaseItem>
); );
}; }
);

16
src/renderer/components/chat/items/SubagentItem.tsx
View file

@ -67,7 +67,8 @@ interface SubagentItemProps {
// Main Component - Linear-style DevTools Card // Main Component - Linear-style DevTools Card
// ============================================================================= // =============================================================================
export const SubagentItem: React.FC<SubagentItemProps> = ({ export const SubagentItem: React.FC<SubagentItemProps> = React.memo(
({
step, step,
subagent, subagent,
onClick, onClick,
@ -483,7 +484,10 @@ export const SubagentItem: React.FC<SubagentItemProps> = ({
{hasIsolated && ( {hasIsolated && (
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<CircleDot className="size-3" style={{ color: 'rgba(56, 189, 248, 0.7)' }} /> <CircleDot
className="size-3"
style={{ color: 'rgba(56, 189, 248, 0.7)' }}
/>
<span className="text-xs" style={{ color: COLOR_TEXT_SECONDARY }}> <span className="text-xs" style={{ color: COLOR_TEXT_SECONDARY }}>
{subagent.team ? 'Context Window' : 'Subagent Context'} {subagent.team ? 'Context Window' : 'Subagent Context'}
</span> </span>
@ -500,7 +504,10 @@ export const SubagentItem: React.FC<SubagentItemProps> = ({
{/* Per-phase breakdown when multi-phase */} {/* Per-phase breakdown when multi-phase */}
{isMultiPhase && {isMultiPhase &&
phaseData.phases.map((phase) => ( phaseData.phases.map((phase) => (
<div key={phase.phaseNumber} className="flex items-center justify-between pl-5"> <div
key={phase.phaseNumber}
className="flex items-center justify-between pl-5"
>
<span className="text-[11px]" style={{ color: CARD_ICON_MUTED }}> <span className="text-[11px]" style={{ color: CARD_ICON_MUTED }}>
Phase {phase.phaseNumber} Phase {phase.phaseNumber}
</span> </span>
@ -589,4 +596,5 @@ export const SubagentItem: React.FC<SubagentItemProps> = ({
)} )}
</div> </div>
); );
}; }
);

15
src/renderer/components/chat/items/TeammateMessageItem.tsx
View file

@ -1,4 +1,4 @@
import React, { useMemo } from 'react'; import React, { memo, useMemo } from 'react';
import { import {
CARD_BG, CARD_BG,
@ -75,14 +75,15 @@ function isResendMessage(message: TeammateMessage): boolean {
* *
* Operational noise (idle/shutdown/terminated) renders as minimal inline text. * Operational noise (idle/shutdown/terminated) renders as minimal inline text.
*/ */
export const TeammateMessageItem: React.FC<TeammateMessageItemProps> = ({ export const TeammateMessageItem = memo(
({
teammateMessage, teammateMessage,
onClick, onClick,
isExpanded, isExpanded,
onReplyHover, onReplyHover,
highlightClasses = '', highlightClasses = '',
highlightStyle, highlightStyle,
}) => { }: TeammateMessageItemProps): React.JSX.Element => {
const colors = getTeamColorSet(teammateMessage.color); const colors = getTeamColorSet(teammateMessage.color);
const { isLight } = useTheme(); const { isLight } = useTheme();
@ -132,7 +133,10 @@ export const TeammateMessageItem: React.FC<TeammateMessageItemProps> = ({
if (noiseLabel) { if (noiseLabel) {
return ( return (
<div className="flex items-center gap-2 px-3 py-1" style={{ opacity: 0.45 }}> <div className="flex items-center gap-2 px-3 py-1" style={{ opacity: 0.45 }}>
<span className="size-2 shrink-0 rounded-full" style={{ backgroundColor: colors.border }} /> <span
className="size-2 shrink-0 rounded-full"
style={{ backgroundColor: colors.border }}
/>
<span className="text-[11px]" style={{ color: CARD_ICON_MUTED }}> <span className="text-[11px]" style={{ color: CARD_ICON_MUTED }}>
{teammateMessage.teammateId} {teammateMessage.teammateId}
</span> </span>
@ -258,4 +262,5 @@ export const TeammateMessageItem: React.FC<TeammateMessageItemProps> = ({
)} )}
</div> </div>
); );
}; }
);

6
src/renderer/components/chat/items/TextItem.tsx
View file

@ -31,7 +31,8 @@ interface TextItemProps {
titleText?: string; titleText?: string;
} }
export const TextItem: React.FC<TextItemProps> = ({ export const TextItem: React.FC<TextItemProps> = React.memo(
({
step, step,
preview, preview,
onClick, onClick,
@ -79,4 +80,5 @@ export const TextItem: React.FC<TextItemProps> = ({
/> />
</BaseItem> </BaseItem>
); );
}; }
);

6
src/renderer/components/chat/items/ThinkingItem.tsx
View file

@ -31,7 +31,8 @@ interface ThinkingItemProps {
titleText?: string; titleText?: string;
} }
export const ThinkingItem: React.FC<ThinkingItemProps> = ({ export const ThinkingItem: React.FC<ThinkingItemProps> = React.memo(
({
step, step,
preview, preview,
onClick, onClick,
@ -79,4 +80,5 @@ export const ThinkingItem: React.FC<ThinkingItemProps> = ({
/> />
</BaseItem> </BaseItem>
); );
}; }
);

20
src/renderer/components/chat/items/linkedTool/CollapsibleOutputSection.tsx
View file

@ -5,7 +5,7 @@
* Shows a clickable header with label, StatusDot, and chevron toggle. * Shows a clickable header with label, StatusDot, and chevron toggle.
*/ */
import React, { useState } from 'react'; import React, { memo, useState } from 'react';
import { ChevronDown, ChevronRight } from 'lucide-react'; import { ChevronDown, ChevronRight } from 'lucide-react';
@ -18,11 +18,8 @@ interface CollapsibleOutputSectionProps {
label?: string; label?: string;
} }
export const CollapsibleOutputSection: React.FC<CollapsibleOutputSectionProps> = ({ export const CollapsibleOutputSection = memo(
status, ({ status, children, label = 'Output' }: CollapsibleOutputSectionProps): React.JSX.Element => {
children,
label = 'Output',
}) => {
const [isExpanded, setIsExpanded] = useState(false); const [isExpanded, setIsExpanded] = useState(false);
return ( return (
@ -30,7 +27,13 @@ export const CollapsibleOutputSection: React.FC<CollapsibleOutputSectionProps> =
<button <button
type="button" type="button"
className="mb-1 flex items-center gap-2 text-xs" className="mb-1 flex items-center gap-2 text-xs"
style={{ color: 'var(--tool-item-muted)', background: 'none', border: 'none', padding: 0, cursor: 'pointer' }} style={{
color: 'var(--tool-item-muted)',
background: 'none',
border: 'none',
padding: 0,
cursor: 'pointer',
}}
onClick={() => setIsExpanded((prev) => !prev)} onClick={() => setIsExpanded((prev) => !prev)}
> >
{isExpanded ? <ChevronDown className="size-3" /> : <ChevronRight className="size-3" />} {isExpanded ? <ChevronDown className="size-3" /> : <ChevronRight className="size-3" />}
@ -54,4 +57,5 @@ export const CollapsibleOutputSection: React.FC<CollapsibleOutputSectionProps> =
)} )}
</div> </div>
); );
}; }
);

9
src/renderer/components/chat/items/linkedTool/DefaultToolViewer.tsx
View file

@ -4,7 +4,7 @@
* Default rendering for tools that don't have specialized viewers. * Default rendering for tools that don't have specialized viewers.
*/ */
import React from 'react'; import React, { memo } from 'react';
import { type ItemStatus } from '../BaseItem'; import { type ItemStatus } from '../BaseItem';
@ -23,7 +23,10 @@ interface DefaultToolViewerProps {
status: ItemStatus; status: ItemStatus;
} }
export const DefaultToolViewer: React.FC<DefaultToolViewerProps> = ({ linkedTool, status }) => { export const DefaultToolViewer = memo(function DefaultToolViewer({
linkedTool,
status,
}: DefaultToolViewerProps) {
const displayOutputContent = linkedTool.result const displayOutputContent = linkedTool.result
? formatToolOutputForDisplay(linkedTool.name, linkedTool.result.content) ? formatToolOutputForDisplay(linkedTool.name, linkedTool.result.content)
: null; : null;
@ -64,4 +67,4 @@ export const DefaultToolViewer: React.FC<DefaultToolViewerProps> = ({ linkedTool
)} )}
</> </>
); );
}; });

9
src/renderer/components/chat/items/linkedTool/EditToolViewer.tsx
View file

@ -4,7 +4,7 @@
* Renders the Edit tool with DiffViewer. * Renders the Edit tool with DiffViewer.
*/ */
import React from 'react'; import React, { memo } from 'react';
import { DiffViewer } from '@renderer/components/chat/viewers'; import { DiffViewer } from '@renderer/components/chat/viewers';
@ -20,7 +20,10 @@ interface EditToolViewerProps {
status: ItemStatus; status: ItemStatus;
} }
export const EditToolViewer: React.FC<EditToolViewerProps> = ({ linkedTool, status }) => { export const EditToolViewer = memo(function EditToolViewer({
linkedTool,
status,
}: EditToolViewerProps) {
const toolUseResult = linkedTool.result?.toolUseResult as Record<string, unknown> | undefined; const toolUseResult = linkedTool.result?.toolUseResult as Record<string, unknown> | undefined;
const filePath = (toolUseResult?.filePath as string) || (linkedTool.input.file_path as string); const filePath = (toolUseResult?.filePath as string) || (linkedTool.input.file_path as string);
@ -71,4 +74,4 @@ export const EditToolViewer: React.FC<EditToolViewerProps> = ({ linkedTool, stat
)} )}
</div> </div>
); );
}; });

10
src/renderer/components/chat/items/linkedTool/ReadToolViewer.tsx
View file

@ -4,7 +4,7 @@
* Renders the Read tool result using CodeBlockViewer. * Renders the Read tool result using CodeBlockViewer.
*/ */
import React from 'react'; import React, { memo } from 'react';
import { CodeBlockViewer, MarkdownViewer } from '@renderer/components/chat/viewers'; import { CodeBlockViewer, MarkdownViewer } from '@renderer/components/chat/viewers';
@ -14,7 +14,7 @@ interface ReadToolViewerProps {
linkedTool: LinkedToolItem; linkedTool: LinkedToolItem;
} }
export const ReadToolViewer: React.FC<ReadToolViewerProps> = ({ linkedTool }) => { export const ReadToolViewer = memo(function ReadToolViewer({ linkedTool }: ReadToolViewerProps) {
const filePath = linkedTool.input.file_path as string; const filePath = linkedTool.input.file_path as string;
// Prefer enriched toolUseResult data // Prefer enriched toolUseResult data
@ -55,7 +55,9 @@ export const ReadToolViewer: React.FC<ReadToolViewerProps> = ({ linkedTool }) =>
: undefined; : undefined;
const isMarkdownFile = /\.mdx?$/i.test(filePath); const isMarkdownFile = /\.mdx?$/i.test(filePath);
const [viewMode, setViewMode] = React.useState<'code' | 'preview'>(isMarkdownFile ? 'preview' : 'code'); const [viewMode, setViewMode] = React.useState<'code' | 'preview'>(
isMarkdownFile ? 'preview' : 'code'
);
return ( return (
<div className="space-y-2"> <div className="space-y-2">
@ -99,4 +101,4 @@ export const ReadToolViewer: React.FC<ReadToolViewerProps> = ({ linkedTool }) =>
)} )}
</div> </div>
); );
}; });

6
src/renderer/components/chat/items/linkedTool/SkillToolViewer.tsx
View file

@ -4,7 +4,7 @@
* Renders the Skill tool with its instructions in a code block viewer style. * Renders the Skill tool with its instructions in a code block viewer style.
*/ */
import React from 'react'; import React, { memo } from 'react';
import { CodeBlockViewer } from '@renderer/components/chat/viewers'; import { CodeBlockViewer } from '@renderer/components/chat/viewers';
@ -14,7 +14,7 @@ interface SkillToolViewerProps {
linkedTool: LinkedToolItem; linkedTool: LinkedToolItem;
} }
export const SkillToolViewer: React.FC<SkillToolViewerProps> = ({ linkedTool }) => { export const SkillToolViewer = memo(function SkillToolViewer({ linkedTool }: SkillToolViewerProps) {
const skillInstructions = linkedTool.skillInstructions; const skillInstructions = linkedTool.skillInstructions;
const skillName = (linkedTool.input.skill as string) || 'Unknown Skill'; const skillName = (linkedTool.input.skill as string) || 'Unknown Skill';
@ -64,4 +64,4 @@ export const SkillToolViewer: React.FC<SkillToolViewerProps> = ({ linkedTool })
)} )}
</div> </div>
); );
}; });

8
src/renderer/components/chat/items/linkedTool/ToolErrorDisplay.tsx
View file

@ -4,7 +4,7 @@
* Displays error output for tool results. * Displays error output for tool results.
*/ */
import React from 'react'; import React, { memo } from 'react';
import { StatusDot } from '../BaseItem'; import { StatusDot } from '../BaseItem';
@ -16,7 +16,9 @@ interface ToolErrorDisplayProps {
linkedTool: LinkedToolItem; linkedTool: LinkedToolItem;
} }
export const ToolErrorDisplay: React.FC<ToolErrorDisplayProps> = ({ linkedTool }) => { export const ToolErrorDisplay = memo(function ToolErrorDisplay({
linkedTool,
}: ToolErrorDisplayProps) {
if (!linkedTool.result?.isError) return null; if (!linkedTool.result?.isError) return null;
return ( return (
@ -40,4 +42,4 @@ export const ToolErrorDisplay: React.FC<ToolErrorDisplayProps> = ({ linkedTool }
</div> </div>
</div> </div>
); );
}; });

6
src/renderer/components/chat/items/linkedTool/WriteToolViewer.tsx
View file

@ -4,7 +4,7 @@
* Renders the Write tool result. * Renders the Write tool result.
*/ */
import React from 'react'; import React, { memo } from 'react';
import { CodeBlockViewer, MarkdownViewer } from '@renderer/components/chat/viewers'; import { CodeBlockViewer, MarkdownViewer } from '@renderer/components/chat/viewers';
@ -14,7 +14,7 @@ interface WriteToolViewerProps {
linkedTool: LinkedToolItem; linkedTool: LinkedToolItem;
} }
export const WriteToolViewer: React.FC<WriteToolViewerProps> = ({ linkedTool }) => { export const WriteToolViewer = memo(function WriteToolViewer({ linkedTool }: WriteToolViewerProps) {
const toolUseResult = linkedTool.result?.toolUseResult as Record<string, unknown> | undefined; const toolUseResult = linkedTool.result?.toolUseResult as Record<string, unknown> | undefined;
const filePath = const filePath =
@ -74,4 +74,4 @@ export const WriteToolViewer: React.FC<WriteToolViewerProps> = ({ linkedTool })
)} )}
</div> </div>
); );
}; });

8
src/renderer/components/chat/viewers/CodeBlockViewer.tsx
View file

@ -1,4 +1,4 @@
import React, { useMemo, useState } from 'react'; import React, { memo, useMemo, useState } from 'react';
import { getBaseName } from '@renderer/utils/pathUtils'; import { getBaseName } from '@renderer/utils/pathUtils';
import { createLogger } from '@shared/utils/logger'; import { createLogger } from '@shared/utils/logger';
@ -117,14 +117,14 @@ function inferLanguage(fileName: string): string {
// Component // Component
// ============================================================================= // =============================================================================
export const CodeBlockViewer: React.FC<CodeBlockViewerProps> = ({ export const CodeBlockViewer = memo(function CodeBlockViewer({
fileName, fileName,
content, content,
language, language,
startLine = 1, startLine = 1,
endLine, endLine,
maxHeight = 'max-h-96', maxHeight = 'max-h-96',
}): React.JSX.Element => { }: CodeBlockViewerProps): React.JSX.Element {
const [isCopied, setIsCopied] = useState(false); const [isCopied, setIsCopied] = useState(false);
// Infer language from file extension if not provided // Infer language from file extension if not provided
@ -241,4 +241,4 @@ export const CodeBlockViewer: React.FC<CodeBlockViewerProps> = ({
</div> </div>
</div> </div>
); );
}; });

8
src/renderer/components/chat/viewers/DiffViewer.tsx
View file

@ -1,4 +1,4 @@
import React, { useMemo } from 'react'; import React, { memo, useMemo } from 'react';
import { import {
CODE_BG, CODE_BG,
@ -349,14 +349,14 @@ const DiffLineRow: React.FC<DiffLineRowProps> = ({ line, highlightedHtml }): Rea
// Main Component // Main Component
// ============================================================================= // =============================================================================
export const DiffViewer: React.FC<DiffViewerProps> = ({ export const DiffViewer = memo(function DiffViewer({
fileName, fileName,
oldString, oldString,
newString, newString,
maxHeight = 'max-h-96', maxHeight = 'max-h-96',
tokenCount, tokenCount,
syntaxHighlight = false, syntaxHighlight = false,
}): React.JSX.Element => { }: DiffViewerProps): React.JSX.Element {
// Compute diff // Compute diff
const oldLines = oldString.split(/\r?\n/); const oldLines = oldString.split(/\r?\n/);
const newLines = newString.split(/\r?\n/); const newLines = newString.split(/\r?\n/);
@ -456,4 +456,4 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
</div> </div>
</div> </div>
); );
}; });

38
src/renderer/components/chat/viewers/MarkdownViewer.tsx
View file

@ -946,7 +946,7 @@ export const CompactMarkdownPreview: React.FC<CompactMarkdownPreviewProps> = Rea
} }
); );
export const MarkdownViewer: React.FC<MarkdownViewerProps> = ({ export const MarkdownViewer: React.FC<MarkdownViewerProps> = React.memo(function MarkdownViewer({
content, content,
maxHeight = 'max-h-96', maxHeight = 'max-h-96',
className = '', className = '',
@ -958,7 +958,7 @@ export const MarkdownViewer: React.FC<MarkdownViewerProps> = ({
baseDir, baseDir,
teamColorByName: providedTeamColorByName, teamColorByName: providedTeamColorByName,
onTeamClick: providedOnTeamClick, onTeamClick: providedOnTeamClick,
}) => { }) {
const [showRaw, setShowRaw] = React.useState(false); const [showRaw, setShowRaw] = React.useState(false);
const [rawLimit, setRawLimit] = React.useState(LARGE_PREVIEW_CHARS); const [rawLimit, setRawLimit] = React.useState(LARGE_PREVIEW_CHARS);
const { isLight } = useTheme(); const { isLight } = useTheme();
@ -1169,12 +1169,36 @@ export const MarkdownViewer: React.FC<MarkdownViewerProps> = ({
<span className="text-sm font-medium" style={{ color: COLOR_TEXT_SECONDARY }}> <span className="text-sm font-medium" style={{ color: COLOR_TEXT_SECONDARY }}>
{label} {label}
</span> </span>
{copyable && (
<>
<span className="flex-1" /> <span className="flex-1" />
<CopyButton text={content} inline /> <button
</> type="button"
className="text-xs underline"
style={{ color: PROSE_LINK }}
onClick={() => setShowRaw(true)}
title="Show raw"
>
Show raw
</button>
{copyable && <CopyButton text={content} inline />}
</div>
)} )}
{/* Show raw toggle for no-label path (skip in bare mode) */}
{!label && !bare && (
<div
className="flex items-center justify-between px-3 py-1 text-xs"
style={{ color: COLOR_TEXT_MUTED }}
>
<span />
<button
type="button"
className="underline"
style={{ color: PROSE_LINK }}
onClick={() => setShowRaw(true)}
title="Show raw"
>
Show raw
</button>
</div> </div>
)} )}
@ -1195,4 +1219,4 @@ export const MarkdownViewer: React.FC<MarkdownViewerProps> = ({
</div> </div>
</div> </div>
); );
}; });

13
src/renderer/components/schedules/SchedulesView.tsx
View file

@ -1,4 +1,4 @@
import React, { useCallback, useEffect, useMemo, useState } from 'react'; import React, { lazy, Suspense, useCallback, useEffect, useMemo, useState } from 'react';
import { Button } from '@renderer/components/ui/button'; import { Button } from '@renderer/components/ui/button';
import { Input } from '@renderer/components/ui/input'; import { Input } from '@renderer/components/ui/input';
@ -24,13 +24,18 @@ import {
} from 'lucide-react'; } from 'lucide-react';
import { useShallow } from 'zustand/react/shallow'; import { useShallow } from 'zustand/react/shallow';
import { LaunchTeamDialog } from '../team/dialogs/LaunchTeamDialog';
import { ScheduleRunLogDialog } from '../team/schedule/ScheduleRunLogDialog'; import { ScheduleRunLogDialog } from '../team/schedule/ScheduleRunLogDialog';
import { ScheduleRunRow } from '../team/schedule/ScheduleRunRow'; import { ScheduleRunRow } from '../team/schedule/ScheduleRunRow';
import { ScheduleStatusBadge } from '../team/schedule/ScheduleStatusBadge'; import { ScheduleStatusBadge } from '../team/schedule/ScheduleStatusBadge';
import type { Schedule, ScheduleRun, ScheduleStatus } from '@shared/types'; import type { Schedule, ScheduleRun, ScheduleStatus } from '@shared/types';
const LaunchTeamDialog = lazy(() =>
import('@renderer/components/team/dialogs/LaunchTeamDialog').then((m) => ({
default: m.LaunchTeamDialog,
}))
);
// ============================================================================= // =============================================================================
// Constants // Constants
// ============================================================================= // =============================================================================
@ -562,6 +567,8 @@ export const SchedulesView = (): React.JSX.Element => {
</div> </div>
{/* Create/Edit Dialog */} {/* Create/Edit Dialog */}
{dialogOpen && (
<Suspense fallback={null}>
<LaunchTeamDialog <LaunchTeamDialog
mode="schedule" mode="schedule"
open={dialogOpen} open={dialogOpen}
@ -569,6 +576,8 @@ export const SchedulesView = (): React.JSX.Element => {
schedule={editingSchedule} schedule={editingSchedule}
onClose={handleClose} onClose={handleClose}
/> />
</Suspense>
)}
</div> </div>
); );
}; };

9
src/renderer/components/sidebar/DateGroupedSessions.tsx
View file

@ -4,7 +4,7 @@
* Supports multi-select with bulk actions and hidden session filtering. * Supports multi-select with bulk actions and hidden session filtering.
*/ */
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { createPortal } from 'react-dom'; import { createPortal } from 'react-dom';
import { recordRecentProjectOpenPaths } from '@features/recent-projects/renderer'; import { recordRecentProjectOpenPaths } from '@features/recent-projects/renderer';
@ -184,7 +184,7 @@ function matchesSessionSearch(session: Session, query: string): boolean {
return haystack.includes(query); return haystack.includes(query);
} }
export const DateGroupedSessions = (): React.JSX.Element => { export const DateGroupedSessions = memo((): React.JSX.Element => {
const { const {
sessions, sessions,
selectedSessionId, selectedSessionId,
@ -202,7 +202,6 @@ export const DateGroupedSessions = (): React.JSX.Element => {
toggleShowHiddenSessions, toggleShowHiddenSessions,
sidebarSelectedSessionIds, sidebarSelectedSessionIds,
sidebarMultiSelectActive, sidebarMultiSelectActive,
toggleSidebarSessionSelection,
clearSidebarSelection, clearSidebarSelection,
toggleSidebarMultiSelect, toggleSidebarMultiSelect,
hideMultipleSessions, hideMultipleSessions,
@ -239,7 +238,6 @@ export const DateGroupedSessions = (): React.JSX.Element => {
toggleShowHiddenSessions: s.toggleShowHiddenSessions, toggleShowHiddenSessions: s.toggleShowHiddenSessions,
sidebarSelectedSessionIds: s.sidebarSelectedSessionIds, sidebarSelectedSessionIds: s.sidebarSelectedSessionIds,
sidebarMultiSelectActive: s.sidebarMultiSelectActive, sidebarMultiSelectActive: s.sidebarMultiSelectActive,
toggleSidebarSessionSelection: s.toggleSidebarSessionSelection,
clearSidebarSelection: s.clearSidebarSelection, clearSidebarSelection: s.clearSidebarSelection,
toggleSidebarMultiSelect: s.toggleSidebarMultiSelect, toggleSidebarMultiSelect: s.toggleSidebarMultiSelect,
hideMultipleSessions: s.hideMultipleSessions, hideMultipleSessions: s.hideMultipleSessions,
@ -1104,7 +1102,6 @@ export const DateGroupedSessions = (): React.JSX.Element => {
isHidden={item.isHidden} isHidden={item.isHidden}
multiSelectActive={sidebarMultiSelectActive} multiSelectActive={sidebarMultiSelectActive}
isSelected={selectedSet.has(item.session.id)} isSelected={selectedSet.has(item.session.id)}
onToggleSelect={() => toggleSidebarSessionSelection(item.session.id)}
/> />
)} )}
</div> </div>
@ -1114,4 +1111,4 @@ export const DateGroupedSessions = (): React.JSX.Element => {
</div> </div>
</div> </div>
); );
}; });

26
src/renderer/components/sidebar/GlobalTaskList.tsx
View file

@ -1,4 +1,4 @@
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { confirm } from '@renderer/components/common/ConfirmDialog'; import { confirm } from '@renderer/components/common/ConfirmDialog';
import { Tooltip, TooltipContent, TooltipTrigger } from '@renderer/components/ui/tooltip'; import { Tooltip, TooltipContent, TooltipTrigger } from '@renderer/components/ui/tooltip';
@ -173,13 +173,13 @@ function applyProjectFilter(tasks: GlobalTask[], projectPath: string | null): Gl
return tasks.filter((t) => t.projectPath && normalizePath(t.projectPath) === normalized); return tasks.filter((t) => t.projectPath && normalizePath(t.projectPath) === normalized);
} }
export const GlobalTaskList = ({ export const GlobalTaskList = memo(function GlobalTaskList({
hideHeader = false, hideHeader = false,
filters: externalFilters, filters: externalFilters,
onFiltersChange: externalOnFiltersChange, onFiltersChange: externalOnFiltersChange,
filtersPopoverOpen: externalFiltersPopoverOpen, filtersPopoverOpen: externalFiltersPopoverOpen,
onFiltersPopoverOpenChange: externalOnFiltersPopoverOpenChange, onFiltersPopoverOpenChange: externalOnFiltersPopoverOpenChange,
}: GlobalTaskListProps = {}): React.JSX.Element => { }: GlobalTaskListProps = {}): React.JSX.Element {
const { const {
globalTasks, globalTasks,
globalTasksLoading, globalTasksLoading,
@ -271,16 +271,20 @@ export const GlobalTaskList = ({
saveSortMode(mode); saveSortMode(mode);
}; };
const handleRenameComplete = (teamName: string, taskId: string, newSubject: string): void => { const handleRenameComplete = useCallback(
(teamName: string, taskId: string, newSubject: string): void => {
taskLocalState.renameTask(teamName, taskId, newSubject); taskLocalState.renameTask(teamName, taskId, newSubject);
setRenamingTaskKey(null); setRenamingTaskKey(null);
}; },
[taskLocalState]
);
const handleRenameCancel = (): void => { const handleRenameCancel = useCallback((): void => {
setRenamingTaskKey(null); setRenamingTaskKey(null);
}; }, []);
const handleDeleteTask = async (teamName: string, taskId: string): Promise<void> => { const handleDeleteTask = useCallback(
async (teamName: string, taskId: string): Promise<void> => {
const confirmed = await confirm({ const confirmed = await confirm({
title: 'Delete task', title: 'Delete task',
message: `Move task #${deriveTaskDisplayId(taskId)} to trash?`, message: `Move task #${deriveTaskDisplayId(taskId)} to trash?`,
@ -301,7 +305,9 @@ export const GlobalTaskList = ({
}); });
} }
} }
}; },
[fetchAllTasks, softDeleteTask]
);
// Fetch tasks on mount — loading guard in the store action prevents // Fetch tasks on mount — loading guard in the store action prevents
// duplicate IPC calls when the centralized init chain is already fetching. // duplicate IPC calls when the centralized init chain is already fetching.
@ -850,4 +856,4 @@ export const GlobalTaskList = ({
</div> </div>
</div> </div>
); );
}; });

18
src/renderer/components/sidebar/SessionItem.tsx
View file

@ -4,7 +4,7 @@
* Supports right-click context menu for pane management. * Supports right-click context menu for pane management.
*/ */
import { useCallback, useRef, useState } from 'react'; import { memo, useCallback, useRef, useState } from 'react';
import { createPortal } from 'react-dom'; import { createPortal } from 'react-dom';
import { ProviderBrandLogo } from '@renderer/components/common/ProviderBrandLogo'; import { ProviderBrandLogo } from '@renderer/components/common/ProviderBrandLogo';
@ -30,7 +30,6 @@ interface SessionItemProps {
isHidden?: boolean; isHidden?: boolean;
multiSelectActive?: boolean; multiSelectActive?: boolean;
isSelected?: boolean; isSelected?: boolean;
onToggleSelect?: () => void;
} }
/** /**
@ -156,15 +155,14 @@ const SessionRuntimeBadge = ({
); );
}; };
export const SessionItem = ({ export const SessionItem = memo(function SessionItem({
session, session,
isActive, isActive,
isPinned, isPinned,
isHidden, isHidden,
multiSelectActive, multiSelectActive,
isSelected, isSelected,
onToggleSelect, }: Readonly<SessionItemProps>): React.JSX.Element {
}: Readonly<SessionItemProps>): React.JSX.Element => {
const { const {
openTab, openTab,
activeProjectId, activeProjectId,
@ -173,6 +171,7 @@ export const SessionItem = ({
splitPane, splitPane,
togglePinSession, togglePinSession,
toggleHideSession, toggleHideSession,
toggleSidebarSessionSelection,
} = useStore( } = useStore(
useShallow((s) => ({ useShallow((s) => ({
openTab: s.openTab, openTab: s.openTab,
@ -182,6 +181,7 @@ export const SessionItem = ({
splitPane: s.splitPane, splitPane: s.splitPane,
togglePinSession: s.togglePinSession, togglePinSession: s.togglePinSession,
toggleHideSession: s.toggleHideSession, toggleHideSession: s.toggleHideSession,
toggleSidebarSessionSelection: s.toggleSidebarSessionSelection,
})) }))
); );
@ -191,8 +191,8 @@ export const SessionItem = ({
if (!activeProjectId) return; if (!activeProjectId) return;
// In multi-select mode, clicks toggle selection // In multi-select mode, clicks toggle selection
if (multiSelectActive && onToggleSelect) { if (multiSelectActive) {
onToggleSelect(); toggleSidebarSessionSelection(session.id);
return; return;
} }
@ -290,7 +290,7 @@ export const SessionItem = ({
<input <input
type="checkbox" type="checkbox"
checked={isSelected ?? false} checked={isSelected ?? false}
onChange={() => onToggleSelect?.()} onChange={() => toggleSidebarSessionSelection(session.id)}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
className="size-3.5 shrink-0 accent-blue-500" className="size-3.5 shrink-0 accent-blue-500"
/> />
@ -390,4 +390,4 @@ export const SessionItem = ({
)} )}
</> </>
); );
}; });

8
src/renderer/components/sidebar/SidebarTaskItem.tsx
View file

@ -1,4 +1,4 @@
import { useEffect, useMemo, useRef, useState } from 'react'; import { memo, useEffect, useMemo, useRef, useState } from 'react';
import { Tooltip, TooltipContent, TooltipTrigger } from '@renderer/components/ui/tooltip'; import { Tooltip, TooltipContent, TooltipTrigger } from '@renderer/components/ui/tooltip';
import { getTeamColorSet } from '@renderer/constants/teamColors'; import { getTeamColorSet } from '@renderer/constants/teamColors';
@ -69,7 +69,7 @@ interface SidebarTaskItemProps {
getDisplaySubject?: (task: GlobalTask) => string | undefined; getDisplaySubject?: (task: GlobalTask) => string | undefined;
} }
export const SidebarTaskItem = ({ export const SidebarTaskItem = memo(function SidebarTaskItem({
task, task,
hideTeamName, hideTeamName,
showTeamName, showTeamName,
@ -77,7 +77,7 @@ export const SidebarTaskItem = ({
onRenameComplete, onRenameComplete,
onRenameCancel, onRenameCancel,
getDisplaySubject, getDisplaySubject,
}: SidebarTaskItemProps): React.JSX.Element => { }: SidebarTaskItemProps): React.JSX.Element {
const openGlobalTaskDetail = useStore((s) => s.openGlobalTaskDetail); const openGlobalTaskDetail = useStore((s) => s.openGlobalTaskDetail);
const teamMembers = useStore(useShallow((s) => s.teamByName[task.teamName]?.members)); const teamMembers = useStore(useShallow((s) => s.teamByName[task.teamName]?.members));
const unreadCount = useUnreadCommentCount(task.teamName, task.id, task.comments); const unreadCount = useUnreadCommentCount(task.teamName, task.id, task.comments);
@ -283,4 +283,4 @@ export const SidebarTaskItem = ({
)} )}
</button> </button>
); );
}; });

8
src/renderer/components/team/CollapsibleTeamSection.tsx
View file

@ -1,4 +1,4 @@
import { useCallback, useEffect, useRef, useState } from 'react'; import { memo, useCallback, useEffect, useRef, useState } from 'react';
import { Badge } from '@renderer/components/ui/badge'; import { Badge } from '@renderer/components/ui/badge';
import { cn } from '@renderer/lib/utils'; import { cn } from '@renderer/lib/utils';
@ -44,7 +44,7 @@ interface CollapsibleTeamSectionProps {
children: React.ReactNode; children: React.ReactNode;
} }
export const CollapsibleTeamSection = ({ export const CollapsibleTeamSection = memo(function CollapsibleTeamSection({
title, title,
icon, icon,
badge, badge,
@ -63,7 +63,7 @@ export const CollapsibleTeamSection = ({
headerSurfaceClassName, headerSurfaceClassName,
keepMounted, keepMounted,
children, children,
}: CollapsibleTeamSectionProps): React.JSX.Element => { }: CollapsibleTeamSectionProps): React.JSX.Element {
const [open, setOpen] = useState(defaultOpen); const [open, setOpen] = useState(defaultOpen);
const isOpen = forceOpen ? true : open; const isOpen = forceOpen ? true : open;
const sectionRef = useRef<HTMLElement>(null); const sectionRef = useRef<HTMLElement>(null);
@ -174,4 +174,4 @@ export const CollapsibleTeamSection = ({
)} )}
</section> </section>
); );
}; });

8
src/renderer/components/team/MemberBadge.tsx
View file

@ -1,4 +1,4 @@
import { useMemo } from 'react'; import { memo, useMemo } from 'react';
import { import {
getTeamColorSet, getTeamColorSet,
@ -37,7 +37,8 @@ interface MemberBadgeProps {
* When onClick is provided, both avatar and badge are clickable as one unit. * When onClick is provided, both avatar and badge are clickable as one unit.
* Wrapped in MemberHoverCard to show member info on hover. * Wrapped in MemberHoverCard to show member info on hover.
*/ */
export const MemberBadge = ({ export const MemberBadge = memo(
({
name, name,
color, color,
teamName, teamName,
@ -114,4 +115,5 @@ export const MemberBadge = ({
{content} {content}
</MemberHoverCard> </MemberHoverCard>
); );
}; }
);

8
src/renderer/components/team/TaskTooltip.tsx
View file

@ -1,4 +1,4 @@
import { useMemo } from 'react'; import { memo, useMemo } from 'react';
import { MarkdownViewer } from '@renderer/components/chat/viewers/MarkdownViewer'; import { MarkdownViewer } from '@renderer/components/chat/viewers/MarkdownViewer';
import { MemberBadge } from '@renderer/components/team/MemberBadge'; import { MemberBadge } from '@renderer/components/team/MemberBadge';
@ -65,12 +65,12 @@ interface TaskTooltipProps {
* Tooltip that shows task summary on hover over any #taskId link. * Tooltip that shows task summary on hover over any #taskId link.
* Reads task data from the current team in the store. * Reads task data from the current team in the store.
*/ */
export const TaskTooltip = ({ export const TaskTooltip = memo(function TaskTooltip({
taskId, taskId,
teamName, teamName,
children, children,
side = 'top', side = 'top',
}: TaskTooltipProps): React.JSX.Element => { }: TaskTooltipProps): React.JSX.Element {
const { selectedTeamName, selectedTeamData, selectedTeamMembers, globalTasks, teamByName } = const { selectedTeamName, selectedTeamData, selectedTeamMembers, globalTasks, teamByName } =
useStore( useStore(
useShallow((s) => ({ useShallow((s) => ({
@ -194,4 +194,4 @@ export const TaskTooltip = ({
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
); );
}; });

51
src/renderer/components/team/TeamDetailView.tsx
View file

@ -78,12 +78,8 @@ import {
import { useShallow } from 'zustand/react/shallow'; import { useShallow } from 'zustand/react/shallow';
import { AddMemberDialog } from './dialogs/AddMemberDialog'; import { AddMemberDialog } from './dialogs/AddMemberDialog';
import { CreateTaskDialog } from './dialogs/CreateTaskDialog';
import { EditTeamDialog } from './dialogs/EditTeamDialog'; import { EditTeamDialog } from './dialogs/EditTeamDialog';
import { LaunchTeamDialog, type TeamLaunchDialogMode } from './dialogs/LaunchTeamDialog';
import { ReviewDialog } from './dialogs/ReviewDialog'; import { ReviewDialog } from './dialogs/ReviewDialog';
import { SendMessageDialog } from './dialogs/SendMessageDialog';
import { TaskDetailDialog } from './dialogs/TaskDetailDialog';
import { executeTeamRelaunch } from './dialogs/teamRelaunchFlow'; import { executeTeamRelaunch } from './dialogs/teamRelaunchFlow';
import { KanbanBoard } from './kanban/KanbanBoard'; import { KanbanBoard } from './kanban/KanbanBoard';
import { UNASSIGNED_OWNER } from './kanban/KanbanFilterPopover'; import { UNASSIGNED_OWNER } from './kanban/KanbanFilterPopover';
@ -93,9 +89,13 @@ import { MemberDetailDialog } from './members/MemberDetailDialog';
import { type MemberActivityFilter, type MemberDetailTab } from './members/memberDetailTypes'; import { type MemberActivityFilter, type MemberDetailTab } from './members/memberDetailTypes';
import type { AddMemberEntry } from './dialogs/AddMemberDialog'; import type { AddMemberEntry } from './dialogs/AddMemberDialog';
import type { TeamLaunchDialogMode } from './dialogs/LaunchTeamDialog';
import type { TeamMessagesPanelMode } from '@renderer/types/teamMessagesPanelMode'; import type { TeamMessagesPanelMode } from '@renderer/types/teamMessagesPanelMode';
import type { ComponentProps, CSSProperties } from 'react'; import type { ComponentProps, CSSProperties } from 'react';
const LaunchTeamDialog = lazy(() =>
import('./dialogs/LaunchTeamDialog').then((m) => ({ default: m.LaunchTeamDialog }))
);
const ProjectEditorOverlay = lazy(() => const ProjectEditorOverlay = lazy(() =>
import('./editor/ProjectEditorOverlay').then((m) => ({ default: m.ProjectEditorOverlay })) import('./editor/ProjectEditorOverlay').then((m) => ({ default: m.ProjectEditorOverlay }))
); );
@ -104,9 +104,20 @@ const TeamGraphOverlay = lazy(() =>
default: m.TeamGraphOverlay, default: m.TeamGraphOverlay,
})) }))
); );
const TaskDetailDialog = lazy(() =>
import('./dialogs/TaskDetailDialog').then((m) => ({ default: m.TaskDetailDialog }))
);
const SendMessageDialog = lazy(() =>
import('./dialogs/SendMessageDialog').then((m) => ({ default: m.SendMessageDialog }))
);
const CreateTaskDialog = lazy(() =>
import('./dialogs/CreateTaskDialog').then((m) => ({ default: m.CreateTaskDialog }))
);
const ChangeReviewDialog = lazy(() =>
import('./review/ChangeReviewDialog').then((m) => ({ default: m.ChangeReviewDialog }))
);
import { MemberList } from './members/MemberList'; import { MemberList } from './members/MemberList';
import { MessagesPanel } from './messages/MessagesPanel'; import { MessagesPanel } from './messages/MessagesPanel';
import { ChangeReviewDialog } from './review/ChangeReviewDialog';
import { ScheduleSection } from './schedule/ScheduleSection'; import { ScheduleSection } from './schedule/ScheduleSection';
import { TeamSidebarHost } from './sidebar/TeamSidebarHost'; import { TeamSidebarHost } from './sidebar/TeamSidebarHost';
import { TeamSidebarPortalSource } from './sidebar/TeamSidebarPortalSource'; import { TeamSidebarPortalSource } from './sidebar/TeamSidebarPortalSource';
@ -874,10 +885,10 @@ const TeamMemberDetailDialogBridge = memo(function TeamMemberDetailDialogBridge(
); );
}); });
export const TeamDetailView = ({ export const TeamDetailView = memo(function TeamDetailView({
teamName, teamName,
isPaneFocused = false, isPaneFocused = false,
}: TeamDetailViewProps): React.JSX.Element => { }: TeamDetailViewProps): React.JSX.Element {
const { isLight } = useTheme(); const { isLight } = useTheme();
const [requestChangesTaskId, setRequestChangesTaskId] = useState<string | null>(null); const [requestChangesTaskId, setRequestChangesTaskId] = useState<string | null>(null);
const [selectedTask, setSelectedTask] = useState<TeamTaskWithKanban | null>(null); const [selectedTask, setSelectedTask] = useState<TeamTaskWithKanban | null>(null);
@ -2077,6 +2088,8 @@ export const TeamDetailView = ({
</div> </div>
</div> </div>
</div> </div>
{launchDialogOpen && (
<Suspense fallback={null}>
<LaunchTeamDialog <LaunchTeamDialog
mode={launchDialogState.mode} mode={launchDialogState.mode}
open={launchDialogOpen} open={launchDialogOpen}
@ -2089,6 +2102,8 @@ export const TeamDetailView = ({
onLaunch={handleLaunchDialogSubmit} onLaunch={handleLaunchDialogSubmit}
onRelaunch={handleRelaunchDialogSubmit} onRelaunch={handleRelaunchDialogSubmit}
/> />
</Suspense>
)}
</> </>
); );
} }
@ -2744,6 +2759,8 @@ export const TeamDetailView = ({
}} }}
/> />
{createTaskDialog.open && (
<Suspense fallback={null}>
<CreateTaskDialog <CreateTaskDialog
open={createTaskDialog.open} open={createTaskDialog.open}
teamName={teamName} teamName={teamName}
@ -2759,6 +2776,8 @@ export const TeamDetailView = ({
onSubmit={handleCreateTask} onSubmit={handleCreateTask}
submitting={creatingTask} submitting={creatingTask}
/> />
</Suspense>
)}
<EditTeamDialog <EditTeamDialog
open={editDialogOpen} open={editDialogOpen}
@ -2864,6 +2883,8 @@ export const TeamDetailView = ({
</DialogContent> </DialogContent>
</Dialog> </Dialog>
{launchDialogOpen && (
<Suspense fallback={null}>
<LaunchTeamDialog <LaunchTeamDialog
mode={launchDialogState.mode} mode={launchDialogState.mode}
open={launchDialogOpen} open={launchDialogOpen}
@ -2877,7 +2898,11 @@ export const TeamDetailView = ({
onLaunch={handleLaunchDialogSubmit} onLaunch={handleLaunchDialogSubmit}
onRelaunch={handleRelaunchDialogSubmit} onRelaunch={handleRelaunchDialogSubmit}
/> />
</Suspense>
)}
{sendDialogOpen && (
<Suspense fallback={null}>
<SendMessageDialog <SendMessageDialog
open={sendDialogOpen} open={sendDialogOpen}
teamName={teamName} teamName={teamName}
@ -2933,7 +2958,11 @@ export const TeamDetailView = ({
setSendDialogDefaultChip(undefined); setSendDialogDefaultChip(undefined);
}} }}
/> />
</Suspense>
)}
{selectedTask !== null && (
<Suspense fallback={null}>
<TaskDetailDialog <TaskDetailDialog
open={selectedTask !== null} open={selectedTask !== null}
task={selectedTask} task={selectedTask}
@ -2975,6 +3004,8 @@ export const TeamDetailView = ({
}} }}
onDeleteTask={handleDeleteTask} onDeleteTask={handleDeleteTask}
/> />
</Suspense>
)}
<TrashDialog <TrashDialog
open={trashOpen} open={trashOpen}
@ -2991,6 +3022,8 @@ export const TeamDetailView = ({
}} }}
/> />
{reviewDialogState.open && (
<Suspense fallback={null}>
<ChangeReviewDialog <ChangeReviewDialog
open={reviewDialogState.open} open={reviewDialogState.open}
onOpenChange={(open) => onOpenChange={(open) =>
@ -3011,6 +3044,8 @@ export const TeamDetailView = ({
projectPath={data.config.projectPath} projectPath={data.config.projectPath}
onEditorAction={handleEditorAction} onEditorAction={handleEditorAction}
/> />
</Suspense>
)}
</div> </div>
<div <div
ref={setMessagesPanelMountPoint} ref={setMessagesPanelMountPoint}
@ -3077,4 +3112,4 @@ export const TeamDetailView = ({
{renderBody()} {renderBody()}
</> </>
); );
}; });

23
src/renderer/components/team/TeamListView.tsx
View file

@ -1,4 +1,4 @@
import { useCallback, useEffect, useMemo, useState } from 'react'; import { lazy, memo, Suspense, useCallback, useEffect, useMemo, useState } from 'react';
import { recordRecentProjectOpenPaths } from '@features/recent-projects/renderer'; import { recordRecentProjectOpenPaths } from '@features/recent-projects/renderer';
import { api, isElectronMode } from '@renderer/api'; import { api, isElectronMode } from '@renderer/api';
@ -45,8 +45,6 @@ import {
} from 'lucide-react'; } from 'lucide-react';
import { useShallow } from 'zustand/react/shallow'; import { useShallow } from 'zustand/react/shallow';
import { CreateTeamDialog } from './dialogs/CreateTeamDialog';
import { LaunchTeamDialog } from './dialogs/LaunchTeamDialog';
import { TeamEmptyState } from './TeamEmptyState'; import { TeamEmptyState } from './TeamEmptyState';
import { EMPTY_TEAM_FILTER, TeamListFilterPopover } from './TeamListFilterPopover'; import { EMPTY_TEAM_FILTER, TeamListFilterPopover } from './TeamListFilterPopover';
import { import {
@ -67,6 +65,13 @@ import type {
TeamSummaryMember, TeamSummaryMember,
} from '@shared/types'; } from '@shared/types';
const CreateTeamDialog = lazy(() =>
import('./dialogs/CreateTeamDialog').then((m) => ({ default: m.CreateTeamDialog }))
);
const LaunchTeamDialog = lazy(() =>
import('./dialogs/LaunchTeamDialog').then((m) => ({ default: m.LaunchTeamDialog }))
);
function generateUniqueName(sourceName: string, existingNames: string[]): string { function generateUniqueName(sourceName: string, existingNames: string[]): string {
const base = sourceName.replace(/-\d+$/, ''); const base = sourceName.replace(/-\d+$/, '');
const existing = new Set(existingNames); const existing = new Set(existingNames);
@ -233,7 +238,7 @@ const StatusBadge = ({ status }: { status: TeamStatus }): React.JSX.Element => {
} }
}; };
export const TeamListView = (): React.JSX.Element => { export const TeamListView = memo(function TeamListView(): React.JSX.Element {
const { isLight } = useTheme(); const { isLight } = useTheme();
const electronMode = isElectronMode(); const electronMode = isElectronMode();
const [showCreateDialog, setShowCreateDialog] = useState(false); const [showCreateDialog, setShowCreateDialog] = useState(false);
@ -731,7 +736,8 @@ export const TeamListView = (): React.JSX.Element => {
); );
} }
const createDialogElement = ( const createDialogElement = showCreateDialog && (
<Suspense fallback={null}>
<CreateTeamDialog <CreateTeamDialog
open={showCreateDialog} open={showCreateDialog}
canCreate={canCreate} canCreate={canCreate}
@ -746,9 +752,11 @@ export const TeamListView = (): React.JSX.Element => {
onCreate={handleCreateSubmit} onCreate={handleCreateSubmit}
onOpenTeam={openTeamTab} onOpenTeam={openTeamTab}
/> />
</Suspense>
); );
const launchDialogElement = ( const launchDialogElement = launchDialogOpen && (
<Suspense fallback={null}>
<LaunchTeamDialog <LaunchTeamDialog
mode="launch" mode="launch"
open={launchDialogOpen} open={launchDialogOpen}
@ -761,6 +769,7 @@ export const TeamListView = (): React.JSX.Element => {
onClose={() => setLaunchDialogOpen(false)} onClose={() => setLaunchDialogOpen(false)}
onLaunch={handleLaunchSubmit} onLaunch={handleLaunchSubmit}
/> />
</Suspense>
); );
const renderHeader = (): React.JSX.Element => ( const renderHeader = (): React.JSX.Element => (
@ -1177,4 +1186,4 @@ export const TeamListView = (): React.JSX.Element => {
</div> </div>
</TooltipProvider> </TooltipProvider>
); );
}; });

8
src/renderer/components/team/activity/ActiveTasksBlock.tsx
View file

@ -1,4 +1,4 @@
import { type ReactNode, useState } from 'react'; import { memo, type ReactNode, useState } from 'react';
import { CARD_BG, CARD_BORDER_STYLE, CARD_ICON_MUTED } from '@renderer/constants/cssVariables'; import { CARD_BG, CARD_BORDER_STYLE, CARD_ICON_MUTED } from '@renderer/constants/cssVariables';
import { getTeamColorSet, getThemedBadge } from '@renderer/constants/teamColors'; import { getTeamColorSet, getThemedBadge } from '@renderer/constants/teamColors';
@ -32,14 +32,14 @@ interface ActivityEntry {
kind: 'working' | 'reviewing'; kind: 'working' | 'reviewing';
} }
export const ActiveTasksBlock = ({ export const ActiveTasksBlock = memo(function ActiveTasksBlock({
members, members,
tasks, tasks,
defaultCollapsed = false, defaultCollapsed = false,
headerRight, headerRight,
onMemberClick, onMemberClick,
onTaskClick, onTaskClick,
}: ActiveTasksBlockProps): React.JSX.Element | null => { }: ActiveTasksBlockProps): React.JSX.Element | null {
const { isLight } = useTheme(); const { isLight } = useTheme();
const [collapsed, setCollapsed] = useState(defaultCollapsed); const [collapsed, setCollapsed] = useState(defaultCollapsed);
const colorMap = buildMemberColorMap(members); const colorMap = buildMemberColorMap(members);
@ -188,4 +188,4 @@ export const ActiveTasksBlock = ({
})} })}
</div> </div>
); );
}; });

8
src/renderer/components/team/activity/PendingRepliesBlock.tsx
View file

@ -1,3 +1,5 @@
import { memo } from 'react';
import { CARD_BG, CARD_BORDER_STYLE, CARD_ICON_MUTED } from '@renderer/constants/cssVariables'; import { CARD_BG, CARD_BORDER_STYLE, CARD_ICON_MUTED } from '@renderer/constants/cssVariables';
import { getTeamColorSet, getThemedBadge } from '@renderer/constants/teamColors'; import { getTeamColorSet, getThemedBadge } from '@renderer/constants/teamColors';
import { useTheme } from '@renderer/hooks/useTheme'; import { useTheme } from '@renderer/hooks/useTheme';
@ -32,13 +34,13 @@ interface PendingRepliesBlockProps {
onMemberClick?: (member: ResolvedTeamMember) => void; onMemberClick?: (member: ResolvedTeamMember) => void;
} }
export const PendingRepliesBlock = ({ export const PendingRepliesBlock = memo(function PendingRepliesBlock({
members, members,
pendingRepliesByMember, pendingRepliesByMember,
pendingCrossTeamReplies = [], pendingCrossTeamReplies = [],
headerRight, headerRight,
onMemberClick, onMemberClick,
}: PendingRepliesBlockProps): React.JSX.Element | null => { }: PendingRepliesBlockProps): React.JSX.Element | null {
const { isLight } = useTheme(); const { isLight } = useTheme();
const pendingApprovals = useStore(useShallow((s) => s.pendingApprovals)); const pendingApprovals = useStore(useShallow((s) => s.pendingApprovals));
const colorMap = buildMemberColorMap(members); const colorMap = buildMemberColorMap(members);
@ -270,4 +272,4 @@ export const PendingRepliesBlock = ({
})} })}
</div> </div>
); );
}; });

8
src/renderer/components/team/activity/ReplyQuoteBlock.tsx
View file

@ -1,4 +1,4 @@
import { useState } from 'react'; import { memo, useState } from 'react';
import { MarkdownViewer } from '@renderer/components/chat/viewers/MarkdownViewer'; import { MarkdownViewer } from '@renderer/components/chat/viewers/MarkdownViewer';
import { MemberBadge } from '@renderer/components/team/MemberBadge'; import { MemberBadge } from '@renderer/components/team/MemberBadge';
@ -20,7 +20,8 @@ interface ReplyQuoteBlockProps {
/** Threshold (characters) above which the "more/less" toggle is shown. */ /** Threshold (characters) above which the "more/less" toggle is shown. */
const LONG_QUOTE_THRESHOLD = 200; const LONG_QUOTE_THRESHOLD = 200;
export const ReplyQuoteBlock = ({ export const ReplyQuoteBlock = memo(
({
reply, reply,
memberColor, memberColor,
bodyMaxHeight = 'max-h-56', bodyMaxHeight = 'max-h-56',
@ -76,4 +77,5 @@ export const ReplyQuoteBlock = ({
/> />
</div> </div>
); );
}; }
);

81
src/renderer/components/team/kanban/KanbanBoard.tsx
View file

@ -1,4 +1,4 @@
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { DndContext, PointerSensor, useSensor, useSensors } from '@dnd-kit/core'; import { DndContext, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
import { arrayMove } from '@dnd-kit/sortable'; import { arrayMove } from '@dnd-kit/sortable';
@ -311,7 +311,7 @@ const SortableKanbanTaskCard = ({
); );
}; };
export const KanbanBoard = ({ export const KanbanBoard = memo(function KanbanBoard({
tasks, tasks,
teamName, teamName,
kanbanState, kanbanState,
@ -338,7 +338,7 @@ export const KanbanBoard = ({
onDeleteTask, onDeleteTask,
deletedTaskCount, deletedTaskCount,
onOpenTrash, onOpenTrash,
}: KanbanBoardProps): React.JSX.Element => { }: KanbanBoardProps): React.JSX.Element {
const boardRef = useRef<HTMLDivElement>(null); const boardRef = useRef<HTMLDivElement>(null);
const scrollRestoreTimeoutsRef = useRef<number[]>([]); const scrollRestoreTimeoutsRef = useRef<number[]>([]);
const [viewMode, setViewMode] = useState<KanbanViewMode>('grid'); const [viewMode, setViewMode] = useState<KanbanViewMode>('grid');
@ -422,11 +422,8 @@ export const KanbanBoard = ({
[onColumnOrderChange, groupedOrdered] [onColumnOrderChange, groupedOrdered]
); );
const renderCards = ( const renderCards = useCallback(
columnId: KanbanColumnId, (columnId: KanbanColumnId, columnTasks: TeamTask[], compact?: boolean): React.JSX.Element => {
columnTasks: TeamTask[],
compact?: boolean
): React.JSX.Element => {
const addHandler = const addHandler =
onAddTask && columnId === 'todo' onAddTask && columnId === 'todo'
? () => onAddTask(false) ? () => onAddTask(false)
@ -516,7 +513,28 @@ export const KanbanBoard = ({
{addButton} {addButton}
</> </>
); );
}; },
[
enableTaskSorting,
hasReviewers,
kanbanState,
memberColorMap,
onAddTask,
onApprove,
onCancelTask,
onCompleteTask,
onDeleteTask,
onMoveBackToDone,
onRequestChanges,
onRequestReview,
onScrollToTask,
onStartTask,
onTaskClick,
onViewChanges,
taskMap,
teamName,
]
);
const visibleColumns = useMemo( const visibleColumns = useMemo(
() => (filter.columns.size > 0 ? COLUMNS.filter((c) => filter.columns.has(c.id)) : COLUMNS), () => (filter.columns.size > 0 ? COLUMNS.filter((c) => filter.columns.has(c.id)) : COLUMNS),
@ -591,6 +609,29 @@ export const KanbanBoard = ({
[scheduleScrollRestore, viewMode] [scheduleScrollRestore, viewMode]
); );
const gridColumns = useMemo(
() =>
visibleColumns.map((column) => {
const columnTasks = groupedOrdered.get(column.id) ?? [];
const accent = COLUMN_ACCENTS[column.id];
return {
id: column.id,
title: column.title,
count: columnTasks.length,
icon: accent.icon,
headerBg: accent.headerBg,
bodyBg: accent.bodyBg,
content: renderCards(column.id, columnTasks),
showAddButton: columnSupportsAddButton(column.id, onAddTask),
skeletonCards: columnTasks.map((task) => ({
key: task.id,
height: estimateGridSkeletonCardHeight(task, column.id, kanbanState, hasReviewers),
})),
};
}),
[visibleColumns, groupedOrdered, renderCards, onAddTask, kanbanState, hasReviewers]
);
const boardContent = ( const boardContent = (
<div ref={boardRef} className="min-w-0 max-w-full overflow-x-hidden"> <div ref={boardRef} className="min-w-0 max-w-full overflow-x-hidden">
<div <div
@ -682,25 +723,7 @@ export const KanbanBoard = ({
primaryColumnId={primaryVisibleColumnId} primaryColumnId={primaryVisibleColumnId}
onPrimaryColumnWidthChange={setGridPrimaryColumnWidth} onPrimaryColumnWidthChange={setGridPrimaryColumnWidth}
skeletonDelayMs={gridSkeletonDelayMs} skeletonDelayMs={gridSkeletonDelayMs}
columns={visibleColumns.map((column) => { columns={gridColumns}
const columnTasks = groupedOrdered.get(column.id) ?? [];
const accent = COLUMN_ACCENTS[column.id];
return {
id: column.id,
title: column.title,
count: columnTasks.length,
icon: accent.icon,
headerBg: accent.headerBg,
bodyBg: accent.bodyBg,
content: renderCards(column.id, columnTasks),
showAddButton: columnSupportsAddButton(column.id, onAddTask),
skeletonCards: columnTasks.map((task) => ({
key: task.id,
height: estimateGridSkeletonCardHeight(task, column.id, kanbanState, hasReviewers),
})),
};
})}
/> />
) : ( ) : (
<div className="w-full min-w-0 max-w-full overflow-x-auto overflow-y-hidden px-1 pb-6 pr-4 pt-2"> <div className="w-full min-w-0 max-w-full overflow-x-auto overflow-y-hidden px-1 pb-6 pr-4 pt-2">
@ -752,4 +775,4 @@ export const KanbanBoard = ({
} }
return boardContent; return boardContent;
}; });

8
src/renderer/components/team/kanban/KanbanGridLayout.tsx
View file

@ -1,5 +1,5 @@
/* eslint-disable tailwindcss/no-custom-classname -- this adapter needs stable non-Tailwind class hooks for react-grid-layout handles. */ /* eslint-disable tailwindcss/no-custom-classname -- this adapter needs stable non-Tailwind class hooks for react-grid-layout handles. */
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import ReactGridLayout, { WidthProvider } from 'react-grid-layout/legacy'; import ReactGridLayout, { WidthProvider } from 'react-grid-layout/legacy';
import { usePersistedGridLayout } from '@renderer/hooks/usePersistedGridLayout'; import { usePersistedGridLayout } from '@renderer/hooks/usePersistedGridLayout';
@ -387,7 +387,8 @@ const LoadedKanbanGridLayout = ({
); );
}; };
export const KanbanGridLayout = ({ export const KanbanGridLayout = memo(
({
columns, columns,
allColumnIds, allColumnIds,
primaryColumnId, primaryColumnId,
@ -454,7 +455,8 @@ export const KanbanGridLayout = ({
) : null} ) : null}
</div> </div>
); );
}; }
);
export { SKELETON_HIDE_DELAY_MS, SKELETON_HIDE_DELAY_MS_ON_MODE_SWITCH }; export { SKELETON_HIDE_DELAY_MS, SKELETON_HIDE_DELAY_MS_ON_MODE_SWITCH };
/* eslint-enable tailwindcss/no-custom-classname -- stable class hooks remain scoped to this file. */ /* eslint-enable tailwindcss/no-custom-classname -- stable class hooks remain scoped to this file. */

8
src/renderer/components/team/members/CurrentTaskIndicator.tsx
View file

@ -1,3 +1,5 @@
import { memo } from 'react';
import { SyncedLoader2 } from '@renderer/components/ui/SyncedLoader2'; import { SyncedLoader2 } from '@renderer/components/ui/SyncedLoader2';
import { formatTaskDisplayLabel } from '@shared/utils/taskIdentity'; import { formatTaskDisplayLabel } from '@shared/utils/taskIdentity';
@ -15,7 +17,8 @@ interface CurrentTaskIndicatorProps {
* Inline indicator showing a spinning loader + "working on" + task label button. * Inline indicator showing a spinning loader + "working on" + task label button.
* Shared between MemberCard and MemberHoverCard. * Shared between MemberCard and MemberHoverCard.
*/ */
export const CurrentTaskIndicator = ({ export const CurrentTaskIndicator = memo(
({
task, task,
borderColor, borderColor,
maxSubjectLength, maxSubjectLength,
@ -53,4 +56,5 @@ export const CurrentTaskIndicator = ({
</button> </button>
</div> </div>
); );
}; }
);

8
src/renderer/components/team/members/MemberCard.tsx
View file

@ -1,4 +1,4 @@
import { useMemo, useState } from 'react'; import { memo, useMemo, useState } from 'react';
import { Badge } from '@renderer/components/ui/badge'; import { Badge } from '@renderer/components/ui/badge';
import { SyncedLoader2 } from '@renderer/components/ui/SyncedLoader2'; import { SyncedLoader2 } from '@renderer/components/ui/SyncedLoader2';
@ -91,7 +91,7 @@ function splitRuntimeSummaryMemory(runtimeSummary: string | undefined): {
}; };
} }
export const MemberCard = ({ export const MemberCard = memo(function MemberCard({
member, member,
memberColor, memberColor,
runtimeSummary, runtimeSummary,
@ -119,7 +119,7 @@ export const MemberCard = ({
onAssignTask, onAssignTask,
onRestartMember, onRestartMember,
onSkipMemberForLaunch, onSkipMemberForLaunch,
}: MemberCardProps): React.JSX.Element => { }: MemberCardProps): React.JSX.Element {
// NOTE: lead context display disabled — usage formula is inaccurate // NOTE: lead context display disabled — usage formula is inaccurate
// const teamName = useStore((s) => s.selectedTeamName); // const teamName = useStore((s) => s.selectedTeamName);
// const leadContext = useStore((s) => // const leadContext = useStore((s) =>
@ -711,4 +711,4 @@ export const MemberCard = ({
</div> </div>
</div> </div>
); );
}; });

8
src/renderer/components/team/members/MemberHoverCard.tsx
View file

@ -1,3 +1,5 @@
import { memo } from 'react';
import { Badge } from '@renderer/components/ui/badge'; import { Badge } from '@renderer/components/ui/badge';
import { HoverCard, HoverCardContent, HoverCardTrigger } from '@renderer/components/ui/hover-card'; import { HoverCard, HoverCardContent, HoverCardTrigger } from '@renderer/components/ui/hover-card';
import { import {
@ -57,13 +59,13 @@ interface MemberHoverCardProps {
* Reads member data from the team snapshot + resolved member selectors. * Reads member data from the team snapshot + resolved member selectors.
* Falls back to a simple wrapper when member data is unavailable. * Falls back to a simple wrapper when member data is unavailable.
*/ */
export const MemberHoverCard = ({ export const MemberHoverCard = memo(function MemberHoverCard({
name, name,
color, color,
teamName, teamName,
onOpenTask, onOpenTask,
children, children,
}: MemberHoverCardProps): React.JSX.Element => { }: MemberHoverCardProps): React.JSX.Element {
const { isLight } = useTheme(); const { isLight } = useTheme();
const selectedTeamName = useStore((s) => s.selectedTeamName); const selectedTeamName = useStore((s) => s.selectedTeamName);
const effectiveTeamName = teamName ?? selectedTeamName; const effectiveTeamName = teamName ?? selectedTeamName;
@ -289,4 +291,4 @@ export const MemberHoverCard = ({
</HoverCardContent> </HoverCardContent>
</HoverCard> </HoverCard>
); );
}; });

208
src/renderer/components/team/members/MemberList.tsx
View file

@ -10,6 +10,9 @@ import type { TeamLaunchParams } from '@renderer/store/slices/teamSlice';
import type { TaskStatusCounts } from '@renderer/utils/pathNormalize'; import type { TaskStatusCounts } from '@renderer/utils/pathNormalize';
import type { import type {
LeadActivityState, LeadActivityState,
MemberLaunchState,
MemberSpawnLivenessSource,
MemberSpawnStatus,
MemberSpawnStatusEntry, MemberSpawnStatusEntry,
ResolvedTeamMember, ResolvedTeamMember,
TeamAgentRuntimeEntry, TeamAgentRuntimeEntry,
@ -255,6 +258,115 @@ function areMemberListPropsEqual(
); );
} }
// ---------------------------------------------------------------------------
// Per-member row wrapper — creates stable callbacks so MemberCard memo holds
// ---------------------------------------------------------------------------
interface MemberCardRowProps {
member: ResolvedTeamMember;
isRemoved: boolean;
memberColor: string;
currentTask: TeamTaskWithKanban | null;
reviewTask: TeamTaskWithKanban | null;
awaitingReply: boolean;
taskCounts?: TaskStatusCounts | null;
runtimeSummary?: string;
runtimeEntry?: TeamAgentRuntimeEntry;
runtimeRunId?: string | null;
spawnStatus?: MemberSpawnStatus;
spawnEntry?: MemberSpawnStatusEntry;
spawnError?: string;
spawnLivenessSource?: MemberSpawnLivenessSource;
spawnLaunchState?: MemberLaunchState;
spawnRuntimeAlive?: boolean;
isTeamAlive?: boolean;
isTeamProvisioning?: boolean;
leadActivity?: LeadActivityState;
isLaunchSettling?: boolean;
onOpenTask?: (taskId: string) => void;
onMemberClick?: (member: ResolvedTeamMember) => void;
onSendMessage?: (member: ResolvedTeamMember) => void;
onAssignTask?: (member: ResolvedTeamMember) => void;
onRestartMember?: (memberName: string) => Promise<void> | void;
onSkipMemberForLaunch?: (memberName: string) => Promise<void> | void;
}
const MemberCardRow = memo(function MemberCardRow({
member,
isRemoved,
memberColor,
currentTask,
reviewTask,
awaitingReply,
taskCounts,
runtimeSummary,
runtimeEntry,
runtimeRunId,
spawnStatus,
spawnEntry,
spawnError,
spawnLivenessSource,
spawnLaunchState,
spawnRuntimeAlive,
isTeamAlive,
isTeamProvisioning,
leadActivity,
isLaunchSettling,
onOpenTask,
onMemberClick,
onSendMessage,
onAssignTask,
onRestartMember,
onSkipMemberForLaunch,
}: MemberCardRowProps): React.JSX.Element {
const currentTaskId = currentTask?.id;
const reviewTaskId = reviewTask?.id;
const handleOpenTask = useCallback(() => {
if (currentTaskId) onOpenTask?.(currentTaskId);
}, [onOpenTask, currentTaskId]);
const handleOpenReviewTask = useCallback(() => {
if (reviewTaskId) onOpenTask?.(reviewTaskId);
}, [onOpenTask, reviewTaskId]);
const handleClick = useCallback(() => onMemberClick?.(member), [onMemberClick, member]);
const handleSendMessage = useCallback(() => onSendMessage?.(member), [onSendMessage, member]);
const handleAssignTask = useCallback(() => onAssignTask?.(member), [onAssignTask, member]);
return (
<MemberCard
member={member}
memberColor={memberColor}
taskCounts={taskCounts}
isTeamAlive={isTeamAlive}
isTeamProvisioning={isTeamProvisioning}
leadActivity={isLeadMember(member) ? leadActivity : undefined}
currentTask={currentTask}
reviewTask={reviewTask}
isAwaitingReply={awaitingReply}
isRemoved={isRemoved}
runtimeSummary={runtimeSummary}
runtimeEntry={runtimeEntry}
runtimeRunId={runtimeRunId}
spawnStatus={spawnStatus}
spawnEntry={spawnEntry}
spawnError={spawnError}
spawnLivenessSource={spawnLivenessSource}
spawnLaunchState={spawnLaunchState}
spawnRuntimeAlive={spawnRuntimeAlive}
isLaunchSettling={isLaunchSettling}
onOpenTask={currentTask ? handleOpenTask : undefined}
onOpenReviewTask={reviewTask ? handleOpenReviewTask : undefined}
onClick={handleClick}
onSendMessage={handleSendMessage}
onAssignTask={handleAssignTask}
onRestartMember={onRestartMember}
onSkipMemberForLaunch={onSkipMemberForLaunch}
/>
);
});
export const MemberList = memo(function MemberList({ export const MemberList = memo(function MemberList({
members, members,
memberTaskCounts, memberTaskCounts,
@ -340,63 +452,89 @@ export const MemberList = memo(function MemberList({
return result; return result;
}, [taskMap]); }, [taskMap]);
const renderCard = (member: ResolvedTeamMember, isRemoved: boolean): React.JSX.Element => { return (
<div ref={containerRef} className="flex flex-col gap-1">
<div className={gridClass}>
{activeMembers.map((member) => {
const currentTask = const currentTask =
member.currentTaskId && taskMap ? (taskMap.get(member.currentTaskId) ?? null) : null; member.currentTaskId && taskMap ? (taskMap.get(member.currentTaskId) ?? null) : null;
const reviewCandidate = reviewTaskByMember.get(member.name) ?? null; const reviewCandidate = reviewTaskByMember.get(member.name) ?? null;
const reviewTask = const reviewTask =
reviewCandidate && reviewCandidate.id !== member.currentTaskId ? reviewCandidate : null; reviewCandidate && reviewCandidate.id !== member.currentTaskId ? reviewCandidate : null;
const awaitingReply = isTeamAlive !== false && Boolean(pendingRepliesByMember?.[member.name]);
const spawnEntry = memberSpawnStatuses?.get(member.name); const spawnEntry = memberSpawnStatuses?.get(member.name);
const runtimeEntry = memberRuntimeEntries?.get(member.name); const runtimeEntry = memberRuntimeEntries?.get(member.name);
return ( return (
<MemberCard <MemberCardRow
key={member.name} key={member.name}
member={member} member={member}
isRemoved={false}
memberColor={colorMap.get(member.name) ?? 'blue'} memberColor={colorMap.get(member.name) ?? 'blue'}
currentTask={currentTask}
reviewTask={reviewTask}
awaitingReply={
isTeamAlive !== false && Boolean(pendingRepliesByMember?.[member.name])
}
taskCounts={memberTaskCounts?.get(member.name.toLowerCase())} taskCounts={memberTaskCounts?.get(member.name.toLowerCase())}
runtimeSummary={buildRuntimeSummary(member, spawnEntry, runtimeEntry)}
runtimeEntry={runtimeEntry}
runtimeRunId={runtimeRunId}
spawnStatus={spawnEntry?.status}
spawnEntry={spawnEntry}
spawnError={spawnEntry?.error ?? spawnEntry?.hardFailureReason}
spawnLivenessSource={spawnEntry?.livenessSource}
spawnLaunchState={spawnEntry?.launchState}
spawnRuntimeAlive={spawnEntry?.runtimeAlive}
isTeamAlive={isTeamAlive} isTeamAlive={isTeamAlive}
isTeamProvisioning={isTeamProvisioning} isTeamProvisioning={isTeamProvisioning}
leadActivity={isLeadMember(member) ? leadActivity : undefined} leadActivity={leadActivity}
currentTask={isRemoved ? null : currentTask} isLaunchSettling={isLaunchSettling}
reviewTask={isRemoved ? null : reviewTask} onOpenTask={onOpenTask}
isAwaitingReply={isRemoved ? false : awaitingReply} onMemberClick={onMemberClick}
isRemoved={isRemoved} onSendMessage={onSendMessage}
runtimeSummary={buildRuntimeSummary( onAssignTask={onAssignTask}
member, onRestartMember={onRestartMember}
isRemoved ? undefined : spawnEntry, onSkipMemberForLaunch={onSkipMemberForLaunch}
isRemoved ? undefined : runtimeEntry
)}
runtimeEntry={isRemoved ? undefined : runtimeEntry}
runtimeRunId={isRemoved ? undefined : runtimeRunId}
spawnStatus={isRemoved ? undefined : spawnEntry?.status}
spawnEntry={isRemoved ? undefined : spawnEntry}
spawnError={isRemoved ? undefined : (spawnEntry?.error ?? spawnEntry?.hardFailureReason)}
spawnLivenessSource={isRemoved ? undefined : spawnEntry?.livenessSource}
spawnLaunchState={isRemoved ? undefined : spawnEntry?.launchState}
spawnRuntimeAlive={isRemoved ? undefined : spawnEntry?.runtimeAlive}
isLaunchSettling={isRemoved ? false : isLaunchSettling}
onOpenTask={!isRemoved && currentTask ? () => onOpenTask?.(currentTask.id) : undefined}
onOpenReviewTask={!isRemoved && reviewTask ? () => onOpenTask?.(reviewTask.id) : undefined}
onClick={() => onMemberClick?.(member)}
onSendMessage={() => onSendMessage?.(member)}
onAssignTask={() => onAssignTask?.(member)}
onRestartMember={isRemoved ? undefined : onRestartMember}
onSkipMemberForLaunch={isRemoved ? undefined : onSkipMemberForLaunch}
/> />
); );
}; })}
</div>
return (
<div ref={containerRef} className="flex flex-col gap-1">
<div className={gridClass}>{activeMembers.map((member) => renderCard(member, false))}</div>
{removedMembers.length > 0 && ( {removedMembers.length > 0 && (
<> <>
<div className="mt-2 text-[10px] text-[var(--color-text-muted)]"> <div className="mt-2 text-[10px] text-[var(--color-text-muted)]">
Removed ({removedMembers.length}) Removed ({removedMembers.length})
</div> </div>
<div className={gridClass}> <div className={gridClass}>
{removedMembers.map((member) => renderCard(member, true))} {removedMembers.map((member) => (
<MemberCardRow
key={member.name}
member={member}
isRemoved={true}
memberColor={colorMap.get(member.name) ?? 'blue'}
currentTask={null}
reviewTask={null}
awaitingReply={false}
taskCounts={memberTaskCounts?.get(member.name.toLowerCase())}
runtimeSummary={buildRuntimeSummary(member, undefined, undefined)}
runtimeEntry={undefined}
runtimeRunId={undefined}
spawnStatus={undefined}
spawnEntry={undefined}
spawnError={undefined}
spawnLivenessSource={undefined}
spawnLaunchState={undefined}
spawnRuntimeAlive={undefined}
isTeamAlive={isTeamAlive}
isTeamProvisioning={isTeamProvisioning}
leadActivity={leadActivity}
isLaunchSettling={false}
onOpenTask={onOpenTask}
onMemberClick={onMemberClick}
onSendMessage={onSendMessage}
onAssignTask={onAssignTask}
onRestartMember={undefined}
onSkipMemberForLaunch={undefined}
/>
))}
</div> </div>
</> </>
)} )}

11
src/renderer/components/team/members/MemberPresenceDot.tsx
View file

@ -1,3 +1,5 @@
import { memo } from 'react';
import { useSyncedAnimationStyle } from '@renderer/hooks/useSyncedAnimationStyle'; import { useSyncedAnimationStyle } from '@renderer/hooks/useSyncedAnimationStyle';
import { cn } from '@renderer/lib/utils'; import { cn } from '@renderer/lib/utils';
@ -8,10 +10,8 @@ interface MemberPresenceDotProps {
label: string; label: string;
} }
export const MemberPresenceDot = ({ export const MemberPresenceDot = memo(
className, ({ className, label }: MemberPresenceDotProps): React.JSX.Element => {
label,
}: MemberPresenceDotProps): React.JSX.Element => {
const shouldSyncPulse = className?.includes('animate-pulse') === true; const shouldSyncPulse = className?.includes('animate-pulse') === true;
const syncedPulseStyle = useSyncedAnimationStyle(shouldSyncPulse, PULSE_DURATION_MS); const syncedPulseStyle = useSyncedAnimationStyle(shouldSyncPulse, PULSE_DURATION_MS);
@ -25,4 +25,5 @@ export const MemberPresenceDot = ({
aria-label={label} aria-label={label}
/> />
); );
}; }
);

12
src/renderer/components/team/schedule/ScheduleSection.tsx
View file

@ -1,4 +1,4 @@
import React, { useCallback, useEffect, useState } from 'react'; import React, { lazy, Suspense, useCallback, useEffect, useState } from 'react';
import { Button } from '@renderer/components/ui/button'; import { Button } from '@renderer/components/ui/button';
import { Popover, PopoverContent, PopoverTrigger } from '@renderer/components/ui/popover'; import { Popover, PopoverContent, PopoverTrigger } from '@renderer/components/ui/popover';
@ -18,13 +18,15 @@ import {
} from 'lucide-react'; } from 'lucide-react';
import { useShallow } from 'zustand/react/shallow'; import { useShallow } from 'zustand/react/shallow';
import { LaunchTeamDialog } from '../dialogs/LaunchTeamDialog';
import { ScheduleEmptyState } from './ScheduleEmptyState'; import { ScheduleEmptyState } from './ScheduleEmptyState';
import { ScheduleRunLogDialog } from './ScheduleRunLogDialog'; import { ScheduleRunLogDialog } from './ScheduleRunLogDialog';
import { ScheduleRunRow } from './ScheduleRunRow'; import { ScheduleRunRow } from './ScheduleRunRow';
import { ScheduleStatusBadge } from './ScheduleStatusBadge'; import { ScheduleStatusBadge } from './ScheduleStatusBadge';
const LaunchTeamDialog = lazy(() =>
import('../dialogs/LaunchTeamDialog').then((m) => ({ default: m.LaunchTeamDialog }))
);
import type { Schedule, ScheduleRun } from '@shared/types'; import type { Schedule, ScheduleRun } from '@shared/types';
// ============================================================================= // =============================================================================
@ -305,6 +307,8 @@ export const ScheduleSection = ({ teamName }: ScheduleSectionProps): React.JSX.E
)} )}
{/* Create/Edit Dialog */} {/* Create/Edit Dialog */}
{dialogOpen && (
<Suspense fallback={null}>
<LaunchTeamDialog <LaunchTeamDialog
mode="schedule" mode="schedule"
open={dialogOpen} open={dialogOpen}
@ -312,6 +316,8 @@ export const ScheduleSection = ({ teamName }: ScheduleSectionProps): React.JSX.E
schedule={editingSchedule} schedule={editingSchedule}
onClose={handleClose} onClose={handleClose}
/> />
</Suspense>
)}
</div> </div>
); );
}; };

6
src/renderer/components/team/tasks/TaskRow.tsx
View file

@ -1,3 +1,5 @@
import { memo } from 'react';
import { import {
KANBAN_COLUMN_DISPLAY, KANBAN_COLUMN_DISPLAY,
REVIEW_STATE_DISPLAY, REVIEW_STATE_DISPLAY,
@ -12,7 +14,7 @@ interface TaskRowProps {
task: TeamTaskWithKanban; task: TeamTaskWithKanban;
} }
export const TaskRow = ({ task }: TaskRowProps): React.JSX.Element => { export const TaskRow = memo(function TaskRow({ task }: TaskRowProps): React.JSX.Element {
const blockedByIds = task.blockedBy?.filter((id) => id.length > 0) ?? []; const blockedByIds = task.blockedBy?.filter((id) => id.length > 0) ?? [];
const blocksIds = task.blocks?.filter((id) => id.length > 0) ?? []; const blocksIds = task.blocks?.filter((id) => id.length > 0) ?? [];
const kanbanColumn = getTaskKanbanColumn(task); const kanbanColumn = getTaskKanbanColumn(task);
@ -62,4 +64,4 @@ export const TaskRow = ({ task }: TaskRowProps): React.JSX.Element => {
</td> </td>
</tr> </tr>
); );
}; });

10
test/main/services/team/TeamMcpConfigBuilder.test.ts
View file

@ -46,7 +46,10 @@ vi.mock('@main/utils/pathDecoder', async (importOriginal) => {
}); });
import { setAppDataBasePath, setClaudeBasePathOverride } from '@main/utils/pathDecoder'; import { setAppDataBasePath, setClaudeBasePathOverride } from '@main/utils/pathDecoder';
import { TeamMcpConfigBuilder } from '@main/services/team/TeamMcpConfigBuilder'; import {
TeamMcpConfigBuilder,
clearResolvedNodePathForTests,
} from '@main/services/team/TeamMcpConfigBuilder';
describe('TeamMcpConfigBuilder', () => { describe('TeamMcpConfigBuilder', () => {
const createdPaths: string[] = []; const createdPaths: string[] = [];
@ -93,7 +96,7 @@ describe('TeamMcpConfigBuilder', () => {
entry: string entry: string
): void { ): void {
expect(server?.args).toEqual([entry]); expect(server?.args).toEqual([entry]);
expect(server?.command).toMatch(/(^node$|[\\/]node(?:\.exe)?$)/); expect(server?.command).toMatch(/(^node(?:-\d+)?$|[\\/]node(?:-\d+)?(?:\.exe)?$)/);
} }
function expectNodeTsxSourceEntry( function expectNodeTsxSourceEntry(
@ -102,7 +105,7 @@ describe('TeamMcpConfigBuilder', () => {
sourceEntry: string sourceEntry: string
): void { ): void {
expect(server?.args).toEqual([tsxCli, sourceEntry]); expect(server?.args).toEqual([tsxCli, sourceEntry]);
expect(server?.command).toMatch(/(^node$|[\\/]node(?:\.exe)?$)/); expect(server?.command).toMatch(/(^node(?:-\d+)?$|[\\/]node(?:-\d+)?(?:\.exe)?$)/);
} }
function getBuiltWorkspaceEntry(): string { function getBuiltWorkspaceEntry(): string {
@ -165,6 +168,7 @@ describe('TeamMcpConfigBuilder', () => {
} }
beforeEach(() => { beforeEach(() => {
clearResolvedNodePathForTests();
originalResourcesPath = (process as NodeJS.Process & { resourcesPath?: string }).resourcesPath; originalResourcesPath = (process as NodeJS.Process & { resourcesPath?: string }).resourcesPath;
tempAppData = fs.mkdtempSync(path.join(os.tmpdir(), 'team-mcp-appdata-')); tempAppData = fs.mkdtempSync(path.join(os.tmpdir(), 'team-mcp-appdata-'));
createdDirs.push(tempAppData); createdDirs.push(tempAppData);

104
test/main/services/team/TeamProvisioningServiceRelay.test.ts
View file

@ -16,9 +16,10 @@ const hoisted = vi.hoisted(() => {
error.code = 'ENOENT'; error.code = 'ENOENT';
throw error; throw error;
} }
const size = Buffer.byteLength(data, 'utf8');
return { return {
isFile: () => true, isFile: () => true,
size: Buffer.byteLength(data, 'utf8'), size,
mode: 0o100644, mode: 0o100644,
dev: 1, dev: 1,
ino: 1, ino: 1,
@ -63,8 +64,7 @@ const hoisted = vi.hoisted(() => {
files.set(sentMessagesPath, JSON.stringify(rows)); files.set(sentMessagesPath, JSON.stringify(rows));
return message; return message;
}), }),
sendInboxMessage: vi.fn( sendInboxMessage: vi.fn((teamName: string, message: Record<string, unknown>) => {
(teamName: string, message: Record<string, unknown>) => {
const member = const member =
typeof message.member === 'string' typeof message.member === 'string'
? message.member ? message.member
@ -77,8 +77,7 @@ const hoisted = vi.hoisted(() => {
rows.push(message); rows.push(message);
files.set(p, JSON.stringify(rows)); files.set(p, JSON.stringify(rows));
return { deliveredToInbox: true, messageId: 'mock-id', message }; return { deliveredToInbox: true, messageId: 'mock-id', message };
} }),
),
setAtomicWriteShouldFail: (next: boolean) => { setAtomicWriteShouldFail: (next: boolean) => {
atomicWriteShouldFail = next; atomicWriteShouldFail = next;
}, },
@ -419,7 +418,9 @@ describe('TeamProvisioningService relayLeadInboxMessages', () => {
const payload = String(writeSpy.mock.calls[0]?.[0] ?? ''); const payload = String(writeSpy.mock.calls[0]?.[0] ?? '');
expect(payload).toContain('Source: system_notification'); expect(payload).toContain('Source: system_notification');
expect(payload).toContain('summary looks like \\"Comment on #...\\"'); expect(payload).toContain('summary looks like \\"Comment on #...\\"');
expect(payload).toContain('reply via task_add_comment only when you have a substantive board update'); expect(payload).toContain(
'reply via task_add_comment only when you have a substantive board update'
);
expect(payload).toContain('Do NOT post acknowledgement-only task comments'); expect(payload).toContain('Do NOT post acknowledgement-only task comments');
(service as any).handleStreamJsonMessage(run, { (service as any).handleStreamJsonMessage(run, {
@ -540,9 +541,13 @@ describe('TeamProvisioningService relayLeadInboxMessages', () => {
runId: 'run-old', runId: 'run-old',
}); });
const inboxDeferred = createDeferred<typeof inboxMessages>(); const inboxDeferred = createDeferred<typeof inboxMessages>();
const inboxReader = (service as unknown as { const inboxReader = (
inboxReader: { getMessagesFor: (team: string, member: string) => Promise<typeof inboxMessages> }; service as unknown as {
}).inboxReader; inboxReader: {
getMessagesFor: (team: string, member: string) => Promise<typeof inboxMessages>;
};
}
).inboxReader;
const inboxSpy = vi const inboxSpy = vi
.spyOn(inboxReader, 'getMessagesFor') .spyOn(inboxReader, 'getMessagesFor')
.mockImplementationOnce(async () => await inboxDeferred.promise) .mockImplementationOnce(async () => await inboxDeferred.promise)
@ -586,14 +591,13 @@ describe('TeamProvisioningService relayLeadInboxMessages', () => {
const { runId: oldRunId } = attachAliveRun(service, teamName, { runId: 'run-old' }); const { runId: oldRunId } = attachAliveRun(service, teamName, { runId: 'run-old' });
const inboxDeferred = createDeferred<[typeof permissionMessage]>(); const inboxDeferred = createDeferred<[typeof permissionMessage]>();
const inboxReader = (service as unknown as { const inboxReader = (
service as unknown as {
inboxReader: { inboxReader: {
getMessagesFor: ( getMessagesFor: (team: string, member: string) => Promise<[typeof permissionMessage]>;
team: string,
member: string
) => Promise<[typeof permissionMessage]>;
}; };
}).inboxReader; }
).inboxReader;
const inboxSpy = vi const inboxSpy = vi
.spyOn(inboxReader, 'getMessagesFor') .spyOn(inboxReader, 'getMessagesFor')
.mockImplementationOnce(async () => await inboxDeferred.promise) .mockImplementationOnce(async () => await inboxDeferred.promise)
@ -702,7 +706,9 @@ describe('TeamProvisioningService relayLeadInboxMessages', () => {
const payload = String(writeSpy.mock.calls[0]?.[0] ?? ''); const payload = String(writeSpy.mock.calls[0]?.[0] ?? '');
expect(payload).toContain('Source: cross_team'); expect(payload).toContain('Source: cross_team');
expect(payload).toContain('Cross-team conversationId: conv-explicit'); expect(payload).toContain('Cross-team conversationId: conv-explicit');
expect(payload).toContain('Call the MCP tool named cross_team_send with toTeam=\\"other-team\\"'); expect(payload).toContain(
'Call the MCP tool named cross_team_send with toTeam=\\"other-team\\"'
);
expect(payload).toContain('replyToConversationId=\\"conv-explicit\\"'); expect(payload).toContain('replyToConversationId=\\"conv-explicit\\"');
expect(payload).toContain('NEVER set recipient/to to \\"cross_team_send\\"'); expect(payload).toContain('NEVER set recipient/to to \\"cross_team_send\\"');
@ -953,7 +959,11 @@ describe('TeamProvisioningService relayLeadInboxMessages', () => {
attachAliveRun(service, teamName); attachAliveRun(service, teamName);
const run = (service as unknown as { runs: Map<string, unknown> }).runs.get('run-1') as { const run = (service as unknown as { runs: Map<string, unknown> }).runs.get('run-1') as {
silentUserDmForward: { target: string; startedAt: string; mode: 'user_dm' | 'member_inbox_relay' } | null; silentUserDmForward: {
target: string;
startedAt: string;
mode: 'user_dm' | 'member_inbox_relay';
} | null;
}; };
run.silentUserDmForward = { run.silentUserDmForward = {
target: 'alice', target: 'alice',
@ -1120,9 +1130,13 @@ describe('TeamProvisioningService relayLeadInboxMessages', () => {
runId: 'run-old', runId: 'run-old',
}); });
const inboxDeferred = createDeferred<typeof inboxMessages>(); const inboxDeferred = createDeferred<typeof inboxMessages>();
const inboxReader = (service as unknown as { const inboxReader = (
inboxReader: { getMessagesFor: (team: string, member: string) => Promise<typeof inboxMessages> }; service as unknown as {
}).inboxReader; inboxReader: {
getMessagesFor: (team: string, member: string) => Promise<typeof inboxMessages>;
};
}
).inboxReader;
const inboxSpy = vi const inboxSpy = vi
.spyOn(inboxReader, 'getMessagesFor') .spyOn(inboxReader, 'getMessagesFor')
.mockImplementationOnce(async () => await inboxDeferred.promise) .mockImplementationOnce(async () => await inboxDeferred.promise)
@ -1332,11 +1346,7 @@ describe('TeamProvisioningService relayLeadInboxMessages', () => {
await (service as any).markInboxMessagesRead(teamName, 'alice', [ await (service as any).markInboxMessagesRead(teamName, 'alice', [
{ {
messageId: buildLegacyInboxMessageId( messageId: buildLegacyInboxMessageId(legacyRow.from, legacyRow.timestamp, legacyRow.text),
legacyRow.from,
legacyRow.timestamp,
legacyRow.text
),
}, },
]); ]);
@ -1732,9 +1742,7 @@ describe('TeamProvisioningService relayLeadInboxMessages', () => {
taskRefs: [{ teamName, taskId: 'task-1', displayId: 'abcd1234' }], taskRefs: [{ teamName, taskId: 'task-1', displayId: 'abcd1234' }],
}) })
); );
const rows = JSON.parse( const rows = JSON.parse(hoisted.files.get(`/mock/teams/${teamName}/inboxes/jack.json`) ?? '[]');
hoisted.files.get(`/mock/teams/${teamName}/inboxes/jack.json`) ?? '[]'
);
expect(rows[0].read).toBe(true); expect(rows[0].read).toBe(true);
}); });
@ -1780,9 +1788,7 @@ describe('TeamProvisioningService relayLeadInboxMessages', () => {
failed: 0, failed: 0,
lastDelivery: { delivered: true, responsePending: true }, lastDelivery: { delivered: true, responsePending: true },
}); });
const rows = JSON.parse( const rows = JSON.parse(hoisted.files.get(`/mock/teams/${teamName}/inboxes/jack.json`) ?? '[]');
hoisted.files.get(`/mock/teams/${teamName}/inboxes/jack.json`) ?? '[]'
);
expect(rows[0].read).toBe(false); expect(rows[0].read).toBe(false);
}); });
@ -1914,9 +1920,7 @@ describe('TeamProvisioningService relayLeadInboxMessages', () => {
teamName, teamName,
expect.objectContaining({ messageId: 'opencode-terminal-new' }) expect.objectContaining({ messageId: 'opencode-terminal-new' })
); );
const rows = JSON.parse( const rows = JSON.parse(hoisted.files.get(`/mock/teams/${teamName}/inboxes/jack.json`) ?? '[]');
hoisted.files.get(`/mock/teams/${teamName}/inboxes/jack.json`) ?? '[]'
);
expect(rows.map((row: { read?: boolean }) => row.read)).toEqual([false, true]); expect(rows.map((row: { read?: boolean }) => row.read)).toEqual([false, true]);
}); });
@ -2000,9 +2004,7 @@ describe('TeamProvisioningService relayLeadInboxMessages', () => {
'opencode_attachments_not_supported_for_secondary_runtime' 'opencode_attachments_not_supported_for_secondary_runtime'
); );
vi.mocked(console.warn).mockClear(); vi.mocked(console.warn).mockClear();
const rows = JSON.parse( const rows = JSON.parse(hoisted.files.get(`/mock/teams/${teamName}/inboxes/jack.json`) ?? '[]');
hoisted.files.get(`/mock/teams/${teamName}/inboxes/jack.json`) ?? '[]'
);
expect(rows[0].read).toBe(false); expect(rows[0].read).toBe(false);
expect(records[0]).toMatchObject({ expect(records[0]).toMatchObject({
inboxMessageId: 'opencode-attachment-1', inboxMessageId: 'opencode-attachment-1',
@ -2027,7 +2029,10 @@ describe('TeamProvisioningService relayLeadInboxMessages', () => {
], ],
}) })
); );
const identity = await (service as any).resolveOpenCodeMemberDeliveryIdentity(teamName, 'jack'); const identity = await (service as any).resolveOpenCodeMemberDeliveryIdentity(
teamName,
'jack'
);
expect(identity.ok).toBe(true); expect(identity.ok).toBe(true);
const laneId = identity.laneId; const laneId = identity.laneId;
const records: any[] = []; const records: any[] = [];
@ -2048,7 +2053,12 @@ describe('TeamProvisioningService relayLeadInboxMessages', () => {
return record; return record;
}), }),
markAcceptanceUnknown: vi.fn( markAcceptanceUnknown: vi.fn(
async (input: { id: string; reason: string; nextAttemptAt: string; markedAt: string }) => { async (input: {
id: string;
reason: string;
nextAttemptAt: string;
markedAt: string;
}) => {
const record = records.find((candidate) => candidate.id === input.id); const record = records.find((candidate) => candidate.id === input.id);
Object.assign(record, { Object.assign(record, {
status: 'failed_retryable', status: 'failed_retryable',
@ -2180,9 +2190,7 @@ describe('TeamProvisioningService relayLeadInboxMessages', () => {
teamName, teamName,
expect.objectContaining({ messageId: 'opencode-inflight-new' }) expect.objectContaining({ messageId: 'opencode-inflight-new' })
); );
const rows = JSON.parse( const rows = JSON.parse(hoisted.files.get(`/mock/teams/${teamName}/inboxes/jack.json`) ?? '[]');
hoisted.files.get(`/mock/teams/${teamName}/inboxes/jack.json`) ?? '[]'
);
expect(rows.map((row: { read?: boolean }) => row.read)).toEqual([true, true]); expect(rows.map((row: { read?: boolean }) => row.read)).toEqual([true, true]);
}); });
@ -2353,9 +2361,7 @@ describe('TeamProvisioningService relayLeadInboxMessages', () => {
'OpenCode inbox relay failed for jack/opencode-relay-failed-1' 'OpenCode inbox relay failed for jack/opencode-relay-failed-1'
); );
vi.mocked(console.warn).mockClear(); vi.mocked(console.warn).mockClear();
const rows = JSON.parse( const rows = JSON.parse(hoisted.files.get(`/mock/teams/${teamName}/inboxes/jack.json`) ?? '[]');
hoisted.files.get(`/mock/teams/${teamName}/inboxes/jack.json`) ?? '[]'
);
expect(rows[0].read).toBe(false); expect(rows[0].read).toBe(false);
}); });
@ -2387,9 +2393,7 @@ describe('TeamProvisioningService relayLeadInboxMessages', () => {
delivered: true, delivered: true,
diagnostics: [], diagnostics: [],
}); });
vi.spyOn(service as any, 'markInboxMessagesRead').mockRejectedValue( vi.spyOn(service as any, 'markInboxMessagesRead').mockRejectedValue(new Error('write failed'));
new Error('write failed')
);
const relay = await service.relayOpenCodeMemberInboxMessages(teamName, 'jack'); const relay = await service.relayOpenCodeMemberInboxMessages(teamName, 'jack');
@ -2410,9 +2414,7 @@ describe('TeamProvisioningService relayLeadInboxMessages', () => {
'opencode_inbox_mark_read_failed_after_delivery' 'opencode_inbox_mark_read_failed_after_delivery'
); );
vi.mocked(console.warn).mockClear(); vi.mocked(console.warn).mockClear();
const rows = JSON.parse( const rows = JSON.parse(hoisted.files.get(`/mock/teams/${teamName}/inboxes/jack.json`) ?? '[]');
hoisted.files.get(`/mock/teams/${teamName}/inboxes/jack.json`) ?? '[]'
);
expect(rows[0].read).toBe(false); expect(rows[0].read).toBe(false);
}); });
}); });