1453 lines
52 KiB
TypeScript
1453 lines
52 KiB
TypeScript
import { lazy, memo, Suspense, useCallback, useEffect, useMemo, useState } from 'react';
|
|
|
|
import { useAppTranslation } from '@features/localization/renderer';
|
|
import { recordRecentProjectOpenPaths } from '@features/recent-projects/renderer';
|
|
import { api, isElectronMode } from '@renderer/api';
|
|
import { confirm } from '@renderer/components/common/ConfirmDialog';
|
|
import { Badge } from '@renderer/components/ui/badge';
|
|
import { Button } from '@renderer/components/ui/button';
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from '@renderer/components/ui/dialog';
|
|
import { Input } from '@renderer/components/ui/input';
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipProvider,
|
|
TooltipTrigger,
|
|
} from '@renderer/components/ui/tooltip';
|
|
import {
|
|
getTeamColorSet,
|
|
getThemedBadge,
|
|
getThemedBorder,
|
|
type TeamColorSet,
|
|
} from '@renderer/constants/teamColors';
|
|
import { useBranchSync } from '@renderer/hooks/useBranchSync';
|
|
import { useTheme } from '@renderer/hooks/useTheme';
|
|
import { useStore } from '@renderer/store';
|
|
import {
|
|
getCurrentProvisioningProgressForTeam,
|
|
isTeamProvisioningActive,
|
|
} from '@renderer/store/slices/teamSlice';
|
|
import {
|
|
getProjectSelectionResetState,
|
|
getWorktreeNavigationState,
|
|
} from '@renderer/store/utils/stateResetHelpers';
|
|
import { buildMemberColorMap } from '@renderer/utils/memberHelpers';
|
|
import {
|
|
buildTaskCountsByTeam,
|
|
normalizePath,
|
|
type TaskStatusCounts,
|
|
} from '@renderer/utils/pathNormalize';
|
|
import { getBaseName } from '@renderer/utils/pathUtils';
|
|
import { nameColorSet } from '@renderer/utils/projectColor';
|
|
import { buildPendingRuntimeSummaryCopy } from '@renderer/utils/teamLaunchSummaryCopy';
|
|
import { isTeamListStatusRunning, resolveTeamStatus } from '@renderer/utils/teamListStatus';
|
|
import { isLeadMember } from '@shared/utils/leadDetection';
|
|
import {
|
|
Copy,
|
|
FolderOpen,
|
|
GitBranch,
|
|
Loader2,
|
|
Play,
|
|
RotateCcw,
|
|
Search,
|
|
Square,
|
|
Trash2,
|
|
UsersRound,
|
|
} from 'lucide-react';
|
|
import { useShallow } from 'zustand/react/shallow';
|
|
|
|
import { LaunchTeamDialogLoadingFallback } from './dialogs/LaunchTeamDialogLoadingFallback';
|
|
import { executeTeamRelaunch } from './dialogs/teamRelaunchFlow';
|
|
import { TeamEmptyState } from './TeamEmptyState';
|
|
import { EMPTY_TEAM_FILTER, TeamListFilterPopover } from './TeamListFilterPopover';
|
|
import {
|
|
findTeamProjectSelectionTarget,
|
|
resolveTeamProjectSelection,
|
|
teamMatchesProjectSelection,
|
|
} from './teamProjectSelection';
|
|
import { TeamTaskStatusSummary } from './TeamTaskStatusSummary';
|
|
|
|
import type { ActiveTeamRef, TeamCopyData } from './dialogs/CreateTeamDialog';
|
|
import type { TeamLaunchDialogMode } from './dialogs/LaunchTeamDialog';
|
|
import type { TeamListFilterState } from './TeamListFilterPopover';
|
|
import type { TeamStatus } from '@renderer/utils/teamListStatus';
|
|
import type {
|
|
ResolvedTeamMember,
|
|
TeamCreateRequest,
|
|
TeamLaunchRequest,
|
|
TeamMemberSnapshot,
|
|
TeamSummary,
|
|
TeamSummaryMember,
|
|
} 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 }))
|
|
);
|
|
|
|
const TEAM_SECTION_INITIAL_VISIBLE_COUNT = 24;
|
|
const TEAM_SECTION_PAGE_SIZE = 24;
|
|
|
|
interface CreateTeamDialogLoadingFallbackProps {
|
|
readonly isCopy: boolean;
|
|
readonly onClose: () => void;
|
|
}
|
|
|
|
const CreateTeamDialogLoadingFallback = ({
|
|
isCopy,
|
|
onClose,
|
|
}: CreateTeamDialogLoadingFallbackProps): React.JSX.Element => {
|
|
const { t } = useAppTranslation('team');
|
|
const { t: tCommon } = useAppTranslation('common');
|
|
|
|
return (
|
|
<Dialog
|
|
open
|
|
onOpenChange={(nextOpen) => {
|
|
if (!nextOpen) {
|
|
onClose();
|
|
}
|
|
}}
|
|
>
|
|
<DialogContent className="max-w-sm">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-sm">
|
|
{isCopy ? t('create.title.copy') : t('create.title.create')}
|
|
</DialogTitle>
|
|
<DialogDescription className="sr-only" aria-live="polite">
|
|
{tCommon('states.loading')}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="flex items-center gap-2 rounded-md border border-[var(--color-border)] bg-[var(--color-surface-overlay)] px-3 py-2 text-xs text-[var(--color-text-muted)]">
|
|
<Loader2 className="size-3.5 animate-spin" />
|
|
<span>{tCommon('states.loading')}</span>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
};
|
|
|
|
function generateUniqueName(sourceName: string, existingNames: string[]): string {
|
|
const base = sourceName.replace(/-\d+$/, '');
|
|
const existing = new Set(existingNames);
|
|
for (let i = 1; ; i++) {
|
|
const candidate = `${base}-${i}`;
|
|
if (!existing.has(candidate)) {
|
|
return candidate;
|
|
}
|
|
}
|
|
}
|
|
|
|
function getRecentProjects(team: TeamSummary): string[] {
|
|
const history = team.projectPathHistory;
|
|
if (!history || history.length === 0) {
|
|
return team.projectPath ? [team.projectPath] : [];
|
|
}
|
|
return history.slice(-3).reverse();
|
|
}
|
|
|
|
function folderName(fullPath: string): string {
|
|
return getBaseName(fullPath) || fullPath;
|
|
}
|
|
|
|
function resolveLaunchDialogMembers(members: readonly TeamMemberSnapshot[]): ResolvedTeamMember[] {
|
|
return members.map((member) => {
|
|
return {
|
|
...member,
|
|
status: member.currentTaskId ? 'active' : 'idle',
|
|
messageCount: 0,
|
|
lastActiveAt: null,
|
|
};
|
|
});
|
|
}
|
|
|
|
function renderMemberChips(members: TeamSummaryMember[], isLight: boolean): React.JSX.Element {
|
|
const teamColorMap = buildMemberColorMap(members);
|
|
return (
|
|
<>
|
|
{members.map((m) => {
|
|
const resolvedColor = teamColorMap.get(m.name);
|
|
const memberColor = resolvedColor ? getTeamColorSet(resolvedColor) : null;
|
|
return (
|
|
<span key={m.name} className="inline-flex items-center gap-1">
|
|
<span
|
|
className="rounded px-1.5 py-0.5 text-[10px] font-medium tracking-wide"
|
|
style={
|
|
memberColor
|
|
? {
|
|
backgroundColor: getThemedBadge(memberColor, isLight),
|
|
color: memberColor.text,
|
|
border: `1px solid ${memberColor.border}40`,
|
|
}
|
|
: undefined
|
|
}
|
|
>
|
|
{m.name}
|
|
</span>
|
|
{m.role ? (
|
|
<span className="text-[9px] text-[var(--color-text-muted)]">{m.role}</span>
|
|
) : null}
|
|
</span>
|
|
);
|
|
})}
|
|
</>
|
|
);
|
|
}
|
|
|
|
function renderTeamRecentPaths(
|
|
team: TeamSummary,
|
|
status: TeamStatus,
|
|
matchesCurrentProject: boolean,
|
|
isLight: boolean,
|
|
selectedProjectPath: string | null
|
|
): React.JSX.Element | null {
|
|
const recentPaths = getRecentProjects(team);
|
|
const visibleRecentPaths =
|
|
matchesCurrentProject && selectedProjectPath
|
|
? recentPaths.filter((path) => normalizePath(path) !== normalizePath(selectedProjectPath))
|
|
: recentPaths;
|
|
if (visibleRecentPaths.length === 0) return null;
|
|
return (
|
|
<div className="mt-2 flex items-center gap-1 text-[10px] text-[var(--color-text-muted)]">
|
|
{matchesCurrentProject && !selectedProjectPath ? (
|
|
<span
|
|
className={`inline-flex items-center gap-1 truncate rounded-full px-2 py-0.5 text-[12px] font-medium ${
|
|
isLight ? 'bg-emerald-100 text-emerald-700' : 'bg-emerald-500/15 text-emerald-400'
|
|
}`}
|
|
>
|
|
<FolderOpen size={12} className="shrink-0" />
|
|
{visibleRecentPaths.map((p, i) => (
|
|
<span key={p} title={p}>
|
|
{folderName(p)}
|
|
{i < visibleRecentPaths.length - 1 ? ', ' : ''}
|
|
</span>
|
|
))}
|
|
</span>
|
|
) : (
|
|
<>
|
|
<FolderOpen size={10} className="shrink-0" />
|
|
<span className="truncate">
|
|
{visibleRecentPaths.map((p, i) => (
|
|
<span key={p} title={p}>
|
|
{i === 0 && (status === 'active' || status === 'idle') ? (
|
|
<span className="text-emerald-400">{folderName(p)}</span>
|
|
) : (
|
|
folderName(p)
|
|
)}
|
|
{i < visibleRecentPaths.length - 1 ? ', ' : ''}
|
|
</span>
|
|
))}
|
|
</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
type TeamT = ReturnType<typeof useAppTranslation>['t'];
|
|
|
|
const StatusBadge = ({ status, t }: { status: TeamStatus; t: TeamT }): React.JSX.Element => {
|
|
switch (status) {
|
|
case 'active':
|
|
return (
|
|
<span className="inline-flex items-center gap-1 rounded-full bg-emerald-500/15 px-2 py-0.5 text-[10px] font-medium text-emerald-400">
|
|
<span className="size-1.5 animate-pulse rounded-full bg-emerald-400" />
|
|
{t('list.status.active')}
|
|
</span>
|
|
);
|
|
case 'idle':
|
|
return (
|
|
<span className="inline-flex items-center gap-1 rounded-full bg-emerald-500/15 px-2 py-0.5 text-[10px] font-medium text-emerald-400">
|
|
<span className="size-1.5 rounded-full bg-emerald-400" />
|
|
{t('list.status.running')}
|
|
</span>
|
|
);
|
|
case 'provisioning':
|
|
return (
|
|
<span className="inline-flex items-center gap-1 rounded-full bg-amber-500/15 px-2 py-0.5 text-[10px] font-medium text-amber-400">
|
|
<span className="size-1.5 animate-pulse rounded-full bg-amber-400" />
|
|
{t('list.status.launching')}
|
|
</span>
|
|
);
|
|
case 'offline':
|
|
return (
|
|
<span className="inline-flex items-center gap-1 rounded-full bg-zinc-500/15 px-2 py-0.5 text-[10px] font-medium text-zinc-500">
|
|
<span className="size-1.5 rounded-full bg-zinc-500" />
|
|
{t('list.status.offline')}
|
|
</span>
|
|
);
|
|
case 'partial_failure':
|
|
return (
|
|
<span className="inline-flex items-center gap-1 rounded-full bg-amber-500/15 px-2 py-0.5 text-[10px] font-medium text-amber-400">
|
|
<span className="size-1.5 rounded-full bg-amber-400" />
|
|
{t('list.status.partialFailure')}
|
|
</span>
|
|
);
|
|
case 'partial_skipped':
|
|
return (
|
|
<span className="inline-flex items-center gap-1 rounded-full bg-sky-500/15 px-2 py-0.5 text-[10px] font-medium text-sky-300">
|
|
<span className="size-1.5 rounded-full bg-sky-300" />
|
|
{t('list.status.partialSkipped')}
|
|
</span>
|
|
);
|
|
case 'partial_pending':
|
|
return (
|
|
<span className="inline-flex items-center gap-1 rounded-full bg-amber-500/15 px-2 py-0.5 text-[10px] font-medium text-amber-300">
|
|
<span className="size-1.5 rounded-full bg-amber-300" />
|
|
{t('list.status.partialPending')}
|
|
</span>
|
|
);
|
|
}
|
|
};
|
|
|
|
interface ActiveTeamCardProps {
|
|
team: TeamSummary;
|
|
status: TeamStatus;
|
|
teamColorSet: TeamColorSet;
|
|
isLight: boolean;
|
|
matchesCurrentProject: boolean;
|
|
currentProjectPath: string | null;
|
|
branchName?: string;
|
|
taskCounts?: TaskStatusCounts;
|
|
launchingTeamName: string | null;
|
|
stoppingTeamName: string | null;
|
|
onOpenTeam: (teamName: string, projectPath?: string) => void;
|
|
onLaunchTeam: (
|
|
teamName: string,
|
|
projectPath: string | undefined,
|
|
mode: TeamLaunchDialogMode,
|
|
event: React.MouseEvent
|
|
) => void;
|
|
onStopTeam: (teamName: string, event: React.MouseEvent) => void;
|
|
onCopyTeam: (teamName: string, event: React.MouseEvent) => void;
|
|
onDeleteTeam: (teamName: string, pendingCreate: boolean, event: React.MouseEvent) => void;
|
|
t: TeamT;
|
|
}
|
|
|
|
const ActiveTeamCard = ({
|
|
team,
|
|
status,
|
|
teamColorSet,
|
|
isLight,
|
|
matchesCurrentProject,
|
|
currentProjectPath,
|
|
branchName,
|
|
taskCounts,
|
|
launchingTeamName,
|
|
stoppingTeamName,
|
|
onOpenTeam,
|
|
onLaunchTeam,
|
|
onStopTeam,
|
|
onCopyTeam,
|
|
onDeleteTeam,
|
|
t,
|
|
}: Readonly<ActiveTeamCardProps>): React.JSX.Element => {
|
|
const canLaunch =
|
|
(status === 'offline' ||
|
|
status === 'partial_failure' ||
|
|
status === 'partial_skipped' ||
|
|
status === 'partial_pending') &&
|
|
Boolean(team.projectPath);
|
|
const launchMode: TeamLaunchDialogMode = status === 'offline' ? 'launch' : 'relaunch';
|
|
const launchLabel =
|
|
launchMode === 'relaunch' ? t('list.actions.relaunchTeam') : t('list.actions.launchTeam');
|
|
const launchTitle =
|
|
launchingTeamName === team.teamName ? t('list.actions.launching') : launchLabel;
|
|
const stopTitle =
|
|
stoppingTeamName === team.teamName ? t('list.actions.stopping') : t('list.actions.stopTeam');
|
|
const copyTitle = t('list.actions.copyTeam');
|
|
const deleteTitle = t('list.actions.deleteTeam');
|
|
|
|
return (
|
|
<div
|
|
role="button"
|
|
tabIndex={0}
|
|
className="team-row-zebra-card group relative flex cursor-pointer flex-col overflow-hidden rounded-lg border border-[var(--color-border)] p-4 transition-colors duration-200 hover:border-[var(--color-border-emphasis)]"
|
|
onClick={() => onOpenTeam(team.teamName, team.projectPath ?? undefined)}
|
|
onKeyDown={(event) => {
|
|
if (event.key === 'Enter' || event.key === ' ') {
|
|
event.preventDefault();
|
|
onOpenTeam(team.teamName, team.projectPath ?? undefined);
|
|
}
|
|
}}
|
|
>
|
|
<div className="pointer-events-none absolute right-4 top-4 z-10">
|
|
<StatusBadge status={status} t={t} />
|
|
</div>
|
|
<div className="flex flex-1 flex-col">
|
|
<div className="space-y-2">
|
|
<div className="flex items-start gap-2.5 pr-44">
|
|
<div className="flex size-8 shrink-0 items-center justify-center rounded-md border border-[var(--color-border)] bg-[var(--color-surface-overlay)] transition-colors group-hover:border-[var(--color-border-emphasis)]">
|
|
<UsersRound
|
|
className="size-4 transition-colors"
|
|
style={{ color: getThemedBorder(teamColorSet, isLight) }}
|
|
/>
|
|
</div>
|
|
<h3 className="min-w-0 flex-1 break-words text-sm font-semibold leading-snug text-[var(--color-text)]">
|
|
{team.displayName}
|
|
</h3>
|
|
</div>
|
|
<div className="flex min-h-6 items-center justify-between gap-2">
|
|
<div className="flex min-w-0 flex-wrap items-center gap-2">
|
|
{branchName ? (
|
|
<span
|
|
className="flex max-w-full items-center gap-1 rounded bg-[var(--color-surface-raised)] px-1.5 py-0.5 text-[10px] text-[var(--color-text-muted)]"
|
|
title={branchName}
|
|
>
|
|
<GitBranch size={10} className="shrink-0" />
|
|
<span className="truncate">{branchName}</span>
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
<div className="flex shrink-0 gap-1">
|
|
{canLaunch ? (
|
|
<button
|
|
type="button"
|
|
className="shrink-0 rounded p-1 text-[var(--color-text-muted)] opacity-0 transition-opacity hover:bg-emerald-500/10 hover:text-emerald-300 disabled:opacity-50 group-hover:opacity-100"
|
|
onClick={(event) =>
|
|
onLaunchTeam(team.teamName, team.projectPath ?? undefined, launchMode, event)
|
|
}
|
|
disabled={launchingTeamName === team.teamName}
|
|
aria-label={launchTitle}
|
|
title={launchTitle}
|
|
>
|
|
<Play size={14} fill="currentColor" />
|
|
</button>
|
|
) : null}
|
|
{status === 'active' || status === 'idle' ? (
|
|
<button
|
|
type="button"
|
|
className="shrink-0 rounded p-1 text-[var(--color-text-muted)] opacity-0 transition-opacity hover:bg-amber-500/10 hover:text-amber-300 disabled:opacity-50 group-hover:opacity-100"
|
|
onClick={(event) => onStopTeam(team.teamName, event)}
|
|
disabled={stoppingTeamName === team.teamName}
|
|
aria-label={stopTitle}
|
|
title={stopTitle}
|
|
>
|
|
<Square size={14} fill="currentColor" />
|
|
</button>
|
|
) : null}
|
|
{!team.pendingCreate ? (
|
|
<button
|
|
type="button"
|
|
className="shrink-0 rounded p-1 text-[var(--color-text-muted)] opacity-0 transition-opacity hover:bg-blue-500/10 hover:text-blue-300 group-hover:opacity-100"
|
|
onClick={(event) => onCopyTeam(team.teamName, event)}
|
|
aria-label={copyTitle}
|
|
title={copyTitle}
|
|
>
|
|
<Copy size={14} />
|
|
</button>
|
|
) : null}
|
|
<button
|
|
type="button"
|
|
className="shrink-0 rounded p-1 text-[var(--color-text-muted)] opacity-0 transition-opacity hover:bg-red-500/10 hover:text-red-300 group-hover:opacity-100"
|
|
onClick={(event) => onDeleteTeam(team.teamName, !!team.pendingCreate, event)}
|
|
aria-label={deleteTitle}
|
|
title={deleteTitle}
|
|
>
|
|
<Trash2 size={14} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="mt-2 flex min-h-10 items-start gap-2">
|
|
<p className="line-clamp-2 min-w-0 flex-1 text-xs text-[var(--color-text-muted)]">
|
|
{team.description || t('list.noDescription')}
|
|
</p>
|
|
</div>
|
|
{team.teamLaunchState === 'partial_pending' ? (
|
|
<p className="mt-2 text-[11px] text-amber-300">
|
|
{team.runtimeProcessPendingCount && team.runtimeProcessPendingCount > 0
|
|
? buildPendingRuntimeSummaryCopy({
|
|
confirmedCount: team.confirmedCount,
|
|
expectedMemberCount: team.expectedMemberCount,
|
|
memberCount: team.memberCount,
|
|
runtimeProcessPendingCount: team.runtimeProcessPendingCount,
|
|
includePeriod: true,
|
|
})
|
|
: t('list.partial.pending')}
|
|
</p>
|
|
) : team.partialLaunchFailure || team.teamLaunchState === 'partial_failure' ? (
|
|
<p className="mt-2 text-[11px] text-amber-400">
|
|
{team.missingMembers?.length
|
|
? t('list.partial.stoppedWithCount', {
|
|
count: team.missingMembers.length,
|
|
expected: team.expectedMemberCount ?? team.missingMembers.length,
|
|
})
|
|
: t('list.partial.stopped')}
|
|
</p>
|
|
) : team.teamLaunchState === 'partial_skipped' ? (
|
|
<p className="mt-2 text-[11px] text-sky-300">
|
|
{team.skippedMembers?.length
|
|
? t('list.partial.skippedWithCount', {
|
|
count: team.skippedMembers.length,
|
|
expected: team.expectedMemberCount ?? team.skippedMembers.length,
|
|
})
|
|
: t('list.partial.skipped')}
|
|
</p>
|
|
) : null}
|
|
<div className="mt-3 flex flex-wrap items-center gap-x-6 gap-y-2">
|
|
{team.members && team.members.length > 0 ? (
|
|
renderMemberChips(team.members, isLight)
|
|
) : team.memberCount === 0 ? (
|
|
<Badge variant="secondary" className="text-[10px] font-normal">
|
|
{t('list.solo')}
|
|
</Badge>
|
|
) : (
|
|
<Badge variant="secondary" className="text-[10px] font-normal">
|
|
{t('list.membersCount', { count: team.memberCount })}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
<div className="mt-auto">
|
|
<TeamTaskStatusSummary counts={taskCounts} />
|
|
{renderTeamRecentPaths(team, status, matchesCurrentProject, isLight, currentProjectPath)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const TeamListView = memo(function TeamListView(): React.JSX.Element {
|
|
const { isLight } = useTheme();
|
|
const { t } = useAppTranslation('team');
|
|
const { t: tCommon } = useAppTranslation('common');
|
|
const electronMode = isElectronMode();
|
|
const [showCreateDialog, setShowCreateDialog] = useState(false);
|
|
const [copyData, setCopyData] = useState<TeamCopyData | null>(null);
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
const [filter, setFilter] = useState<TeamListFilterState>(EMPTY_TEAM_FILTER);
|
|
const [aliveTeams, setAliveTeams] = useState<string[]>([]);
|
|
const [teamSectionVisibleCountByKey, setTeamSectionVisibleCountByKey] = useState<
|
|
Record<string, number>
|
|
>({});
|
|
const {
|
|
teams,
|
|
teamsLoading,
|
|
teamsError,
|
|
fetchTeams,
|
|
openTeamTab,
|
|
deleteTeam,
|
|
restoreTeam,
|
|
permanentlyDeleteTeam,
|
|
projects,
|
|
globalTasks,
|
|
fetchAllTasks,
|
|
repositoryGroups,
|
|
selectedRepositoryId,
|
|
selectedWorktreeId,
|
|
selectedProjectId,
|
|
activeProjectId,
|
|
branchByPath,
|
|
} = useStore(
|
|
useShallow((s) => ({
|
|
teams: s.teams,
|
|
teamsLoading: s.teamsLoading,
|
|
teamsError: s.teamsError,
|
|
fetchTeams: s.fetchTeams,
|
|
openTeamTab: s.openTeamTab,
|
|
deleteTeam: s.deleteTeam,
|
|
restoreTeam: s.restoreTeam,
|
|
permanentlyDeleteTeam: s.permanentlyDeleteTeam,
|
|
projects: s.projects,
|
|
globalTasks: s.globalTasks,
|
|
fetchAllTasks: s.fetchAllTasks,
|
|
repositoryGroups: s.repositoryGroups,
|
|
selectedRepositoryId: s.selectedRepositoryId,
|
|
selectedWorktreeId: s.selectedWorktreeId,
|
|
selectedProjectId: s.selectedProjectId,
|
|
activeProjectId: s.activeProjectId,
|
|
branchByPath: s.branchByPath,
|
|
}))
|
|
);
|
|
const {
|
|
connectionMode,
|
|
createTeam,
|
|
launchTeam,
|
|
provisioningErrorByTeam,
|
|
clearProvisioningError,
|
|
provisioningRuns,
|
|
provisioningSnapshotByTeam,
|
|
currentProvisioningRunIdByTeam,
|
|
leadActivityByTeam,
|
|
} = useStore(
|
|
useShallow((s) => ({
|
|
connectionMode: s.connectionMode,
|
|
createTeam: s.createTeam,
|
|
launchTeam: s.launchTeam,
|
|
provisioningErrorByTeam: s.provisioningErrorByTeam,
|
|
clearProvisioningError: s.clearProvisioningError,
|
|
provisioningRuns: s.provisioningRuns,
|
|
provisioningSnapshotByTeam: s.provisioningSnapshotByTeam,
|
|
currentProvisioningRunIdByTeam: s.currentProvisioningRunIdByTeam,
|
|
leadActivityByTeam: s.leadActivityByTeam,
|
|
}))
|
|
);
|
|
const canCreate = electronMode && connectionMode === 'local';
|
|
const provisioningState = useMemo(
|
|
() => ({ currentProvisioningRunIdByTeam, provisioningRuns }),
|
|
[currentProvisioningRunIdByTeam, provisioningRuns]
|
|
);
|
|
|
|
/** Team names currently in active provisioning — prevents name conflicts in create dialog. */
|
|
const provisioningTeamNames = useMemo(() => {
|
|
return Object.keys(currentProvisioningRunIdByTeam).filter((teamName) =>
|
|
isTeamProvisioningActive(provisioningState, teamName)
|
|
);
|
|
}, [currentProvisioningRunIdByTeam, provisioningState]);
|
|
|
|
/** Merge real teams with synthetic launching cards for active provisioning. */
|
|
const teamsWithProvisioning = useMemo(() => {
|
|
const existingNames = new Set(teams.map((t) => t.teamName));
|
|
const synthetic = provisioningTeamNames
|
|
.filter((name) => !existingNames.has(name) && provisioningSnapshotByTeam[name])
|
|
.map((name) => provisioningSnapshotByTeam[name]);
|
|
return synthetic.length > 0 ? [...teams, ...synthetic] : teams;
|
|
}, [teams, provisioningTeamNames, provisioningSnapshotByTeam]);
|
|
|
|
const fetchAliveTeams = useCallback(async (): Promise<string[] | null> => {
|
|
if (!electronMode) return null;
|
|
try {
|
|
return await api.teams.aliveList();
|
|
} catch {
|
|
return null;
|
|
}
|
|
}, [electronMode]);
|
|
|
|
// Fetch alive teams on mount and when teams list changes.
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
void fetchAliveTeams().then((list) => {
|
|
if (!cancelled && list) {
|
|
setAliveTeams(list);
|
|
}
|
|
});
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [fetchAliveTeams, teams]);
|
|
|
|
const readyProgressRefreshKey = useMemo(() => {
|
|
return Object.entries(currentProvisioningRunIdByTeam)
|
|
.map(([teamName, runId]) => {
|
|
if (!runId) return null;
|
|
const progress = provisioningRuns[runId];
|
|
return progress?.state === 'ready'
|
|
? `${teamName}:${progress.runId}:${progress.updatedAt}`
|
|
: null;
|
|
})
|
|
.filter((item): item is string => Boolean(item))
|
|
.join('|');
|
|
}, [currentProvisioningRunIdByTeam, provisioningRuns]);
|
|
|
|
// Terminal launch progress can arrive before aliveList catches up.
|
|
useEffect(() => {
|
|
if (!readyProgressRefreshKey) return;
|
|
let cancelled = false;
|
|
void fetchAliveTeams().then((list) => {
|
|
if (!cancelled && list) {
|
|
setAliveTeams(list);
|
|
}
|
|
});
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [fetchAliveTeams, readyProgressRefreshKey]);
|
|
|
|
// Refresh alive teams when opening the create dialog so conflict warning is accurate.
|
|
useEffect(() => {
|
|
if (!electronMode || !showCreateDialog) return;
|
|
let cancelled = false;
|
|
void fetchAliveTeams().then((list) => {
|
|
if (!cancelled && list) {
|
|
setAliveTeams(list);
|
|
}
|
|
});
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [electronMode, fetchAliveTeams, showCreateDialog]);
|
|
|
|
const currentProjectSelection = useMemo(
|
|
() =>
|
|
resolveTeamProjectSelection({
|
|
repositoryGroups,
|
|
projects,
|
|
selectedRepositoryId,
|
|
selectedWorktreeId,
|
|
selectedProjectId,
|
|
activeProjectId,
|
|
}),
|
|
[
|
|
repositoryGroups,
|
|
projects,
|
|
selectedRepositoryId,
|
|
selectedWorktreeId,
|
|
selectedProjectId,
|
|
activeProjectId,
|
|
]
|
|
);
|
|
const currentProjectPath = currentProjectSelection.projectPath;
|
|
|
|
const filteredTeams = useMemo<TeamSummary[]>(() => {
|
|
let result = teamsWithProvisioning;
|
|
|
|
const q = searchQuery.trim().toLowerCase();
|
|
if (q) {
|
|
result = result.filter(
|
|
(t) =>
|
|
t.teamName.toLowerCase().includes(q) ||
|
|
t.displayName.toLowerCase().includes(q) ||
|
|
t.description.toLowerCase().includes(q)
|
|
);
|
|
}
|
|
|
|
if (filter.selectedStatuses.size > 0) {
|
|
result = result.filter((t) => {
|
|
const status = resolveTeamStatus(
|
|
t,
|
|
t.teamName,
|
|
aliveTeams,
|
|
getCurrentProvisioningProgressForTeam(provisioningState, t.teamName),
|
|
leadActivityByTeam
|
|
);
|
|
const isRunning = isTeamListStatusRunning(status);
|
|
if (filter.selectedStatuses.has('running') && isRunning) return true;
|
|
if (filter.selectedStatuses.has('offline') && !isRunning) return true;
|
|
return false;
|
|
});
|
|
}
|
|
|
|
const matchesCurrentProject = currentProjectPath
|
|
? (team: TeamSummary): boolean => teamMatchesProjectSelection(team, currentProjectPath)
|
|
: null;
|
|
const nowMs = Date.now();
|
|
const statusForTeam = (team: TeamSummary): TeamStatus =>
|
|
resolveTeamStatus(
|
|
team,
|
|
team.teamName,
|
|
aliveTeams,
|
|
getCurrentProvisioningProgressForTeam(provisioningState, team.teamName),
|
|
leadActivityByTeam,
|
|
nowMs
|
|
);
|
|
|
|
result = [...result].sort((a, b) => {
|
|
// 1. Running teams first, including the short ready-before-alive-list gap.
|
|
const runningA = isTeamListStatusRunning(statusForTeam(a)) ? 0 : 1;
|
|
const runningB = isTeamListStatusRunning(statusForTeam(b)) ? 0 : 1;
|
|
if (runningA !== runningB) return runningA - runningB;
|
|
|
|
// 2. Teams related to the selected project are prioritized next
|
|
if (matchesCurrentProject) {
|
|
const projectA = matchesCurrentProject(a) ? 0 : 1;
|
|
const projectB = matchesCurrentProject(b) ? 0 : 1;
|
|
if (projectA !== projectB) return projectA - projectB;
|
|
}
|
|
|
|
// 3. Most recently active teams first (stable secondary sort)
|
|
const tsA = a.lastActivity ? new Date(a.lastActivity).getTime() : 0;
|
|
const tsB = b.lastActivity ? new Date(b.lastActivity).getTime() : 0;
|
|
if (tsA !== tsB) return tsB - tsA;
|
|
|
|
// 4. Fallback: alphabetical by team name for deterministic order
|
|
return a.teamName.localeCompare(b.teamName);
|
|
});
|
|
|
|
return result;
|
|
}, [
|
|
teamsWithProvisioning,
|
|
searchQuery,
|
|
currentProjectPath,
|
|
aliveTeams,
|
|
filter,
|
|
provisioningState,
|
|
leadActivityByTeam,
|
|
]);
|
|
|
|
const handleProjectSelectionChange = useCallback(
|
|
(projectPath: string | null): void => {
|
|
if (!projectPath) {
|
|
useStore.setState(getProjectSelectionResetState());
|
|
return;
|
|
}
|
|
|
|
const target = findTeamProjectSelectionTarget(repositoryGroups, projects, projectPath);
|
|
if (!target) {
|
|
console.warn('Unable to resolve selected team project path:', projectPath);
|
|
return;
|
|
}
|
|
|
|
if (target.kind === 'grouped') {
|
|
useStore.setState(getWorktreeNavigationState(target.repositoryId, target.worktreeId));
|
|
void useStore.getState().fetchSessionsInitial(target.worktreeId);
|
|
recordRecentProjectOpenPaths([projectPath]);
|
|
return;
|
|
}
|
|
|
|
useStore.getState().selectProject(target.projectId);
|
|
recordRecentProjectOpenPaths([projectPath]);
|
|
},
|
|
[projects, repositoryGroups]
|
|
);
|
|
|
|
// Fetch branches once for all visible team project paths (no live polling)
|
|
const teamPaths = useMemo(
|
|
() => filteredTeams.map((t) => t.projectPath?.trim()).filter(Boolean) as string[],
|
|
[filteredTeams]
|
|
);
|
|
useBranchSync(teamPaths, { live: false });
|
|
|
|
const handleDeleteTeam = useCallback(
|
|
(teamName: string, isDraft: boolean, e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
void (async () => {
|
|
if (isDraft) {
|
|
const confirmed = await confirm({
|
|
title: t('list.deleteDraft.title'),
|
|
message: t('list.deleteDraft.message', { teamName }),
|
|
confirmLabel: t('list.deleteDraft.confirmLabel'),
|
|
cancelLabel: t('list.deleteDraft.cancelLabel'),
|
|
variant: 'danger',
|
|
});
|
|
if (confirmed) {
|
|
void api.teams.deleteDraft(teamName).catch(() => {});
|
|
}
|
|
return;
|
|
}
|
|
const confirmed = await confirm({
|
|
title: t('list.moveToTrash.title'),
|
|
message: t('list.moveToTrash.message', { teamName }),
|
|
confirmLabel: t('list.moveToTrash.confirmLabel'),
|
|
cancelLabel: t('list.moveToTrash.cancelLabel'),
|
|
variant: 'danger',
|
|
});
|
|
if (confirmed) {
|
|
try {
|
|
await deleteTeam(teamName);
|
|
} catch {
|
|
// error via store
|
|
}
|
|
}
|
|
})();
|
|
},
|
|
[deleteTeam, t]
|
|
);
|
|
|
|
const handleRestoreTeam = useCallback(
|
|
(teamName: string, e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
void (async () => {
|
|
try {
|
|
await restoreTeam(teamName);
|
|
} catch {
|
|
// error via store
|
|
}
|
|
})();
|
|
},
|
|
[restoreTeam]
|
|
);
|
|
|
|
const handlePermanentlyDeleteTeam = useCallback(
|
|
(teamName: string, e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
void (async () => {
|
|
const confirmed = await confirm({
|
|
title: t('list.deleteForever.title'),
|
|
message: t('list.deleteForever.message', { teamName }),
|
|
confirmLabel: t('list.deleteForever.confirmLabel'),
|
|
cancelLabel: t('list.deleteForever.cancelLabel'),
|
|
variant: 'danger',
|
|
});
|
|
if (confirmed) {
|
|
try {
|
|
await permanentlyDeleteTeam(teamName);
|
|
} catch {
|
|
// error via store
|
|
}
|
|
}
|
|
})();
|
|
},
|
|
[permanentlyDeleteTeam, t]
|
|
);
|
|
|
|
const handleCopyTeam = useCallback(
|
|
(teamName: string, e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
void (async () => {
|
|
try {
|
|
const data = await api.teams.getData(teamName, {
|
|
includeMemberBranches: false,
|
|
});
|
|
const existingNames = teams.map((t) => t.teamName);
|
|
const uniqueName = generateUniqueName(teamName, existingNames);
|
|
const members = (data.members ?? [])
|
|
.filter((m) => !m.removedAt && !isLeadMember(m))
|
|
.map((m) => {
|
|
let role = m.role;
|
|
if (!role && m.agentType && m.agentType !== 'general-purpose') {
|
|
role = m.agentType;
|
|
}
|
|
return { name: m.name, role, mcpPolicy: m.mcpPolicy };
|
|
});
|
|
setCopyData({
|
|
teamName: uniqueName,
|
|
description: data.config.description,
|
|
color: data.config.color,
|
|
members,
|
|
});
|
|
setShowCreateDialog(true);
|
|
} catch {
|
|
// silently ignore — team data may be unavailable
|
|
}
|
|
})();
|
|
},
|
|
[teams]
|
|
);
|
|
|
|
const [stoppingTeamName, setStoppingTeamName] = useState<string | null>(null);
|
|
const handleStopTeam = useCallback(async (teamName: string, e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
setStoppingTeamName(teamName);
|
|
try {
|
|
await api.teams.stop(teamName);
|
|
setAliveTeams((prev) => prev.filter((n) => n !== teamName));
|
|
} catch (err) {
|
|
console.error('Failed to stop team:', err);
|
|
} finally {
|
|
setStoppingTeamName(null);
|
|
}
|
|
}, []);
|
|
|
|
const [launchingTeamName, setLaunchingTeamName] = useState<string | null>(null);
|
|
const [launchDialogOpen, setLaunchDialogOpen] = useState(false);
|
|
const [launchDialogMode, setLaunchDialogMode] = useState<TeamLaunchDialogMode>('launch');
|
|
const [launchDialogTeamName, setLaunchDialogTeamName] = useState('');
|
|
const [launchDialogMembers, setLaunchDialogMembers] = useState<ResolvedTeamMember[]>([]);
|
|
const [launchDialogDefaultPath, setLaunchDialogDefaultPath] = useState<string | undefined>();
|
|
|
|
const handleLaunchTeam = useCallback(
|
|
async (
|
|
teamName: string,
|
|
projectPath: string | undefined,
|
|
mode: TeamLaunchDialogMode,
|
|
e: React.MouseEvent
|
|
) => {
|
|
e.stopPropagation();
|
|
if (!projectPath) return;
|
|
try {
|
|
const data = await api.teams.getData(teamName, {
|
|
includeMemberBranches: false,
|
|
});
|
|
setLaunchDialogMode(mode);
|
|
setLaunchDialogTeamName(teamName);
|
|
setLaunchDialogMembers(resolveLaunchDialogMembers(data.members ?? []));
|
|
setLaunchDialogDefaultPath(data.config.projectPath ?? projectPath);
|
|
setLaunchDialogOpen(true);
|
|
} catch (err) {
|
|
// Draft teams (no config.json) throw TEAM_DRAFT — expected, use fallback
|
|
if (!(err instanceof Error && err.message.includes('TEAM_DRAFT'))) {
|
|
console.error('Failed to load team data for launch dialog:', err);
|
|
}
|
|
// Fallback: open dialog with minimal data
|
|
setLaunchDialogMode(mode);
|
|
setLaunchDialogTeamName(teamName);
|
|
setLaunchDialogMembers([]);
|
|
setLaunchDialogDefaultPath(projectPath);
|
|
setLaunchDialogOpen(true);
|
|
}
|
|
},
|
|
[]
|
|
);
|
|
|
|
const handleLaunchSubmit = useCallback(
|
|
async (request: TeamLaunchRequest) => {
|
|
setLaunchingTeamName(request.teamName);
|
|
try {
|
|
await launchTeam(request);
|
|
} catch (err) {
|
|
console.error('Failed to launch team:', err);
|
|
throw err;
|
|
} finally {
|
|
setLaunchingTeamName(null);
|
|
}
|
|
},
|
|
[launchTeam]
|
|
);
|
|
|
|
const handleRelaunchSubmit = useCallback(
|
|
async (request: TeamLaunchRequest, members: TeamCreateRequest['members']) => {
|
|
setLaunchingTeamName(request.teamName);
|
|
try {
|
|
await executeTeamRelaunch({
|
|
teamName: request.teamName,
|
|
isTeamAlive: true,
|
|
request,
|
|
members,
|
|
stopTeam: (nextTeamName) => api.teams.stop(nextTeamName),
|
|
replaceMembers: (nextTeamName, nextRequest) =>
|
|
api.teams.replaceMembers(nextTeamName, nextRequest),
|
|
launchTeam,
|
|
});
|
|
} catch (err) {
|
|
console.error('Failed to relaunch team:', err);
|
|
throw err;
|
|
} finally {
|
|
setLaunchingTeamName(null);
|
|
}
|
|
},
|
|
[launchTeam]
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (!electronMode) {
|
|
return;
|
|
}
|
|
void fetchTeams();
|
|
void fetchAllTasks();
|
|
}, [electronMode, fetchTeams, fetchAllTasks]);
|
|
|
|
const taskCountsByTeam = useMemo(() => buildTaskCountsByTeam(globalTasks), [globalTasks]);
|
|
|
|
const activeTeams = useMemo<ActiveTeamRef[]>(() => {
|
|
const aliveSet = new Set(aliveTeams);
|
|
return teams
|
|
.filter((t) => aliveSet.has(t.teamName) && t.projectPath)
|
|
.map((t) => ({
|
|
teamName: t.teamName,
|
|
displayName: t.displayName,
|
|
projectPath: t.projectPath!,
|
|
}));
|
|
}, [teams, aliveTeams]);
|
|
|
|
const handleCreateDialogClose = useCallback(() => {
|
|
setShowCreateDialog(false);
|
|
setCopyData(null);
|
|
}, []);
|
|
|
|
const handleCreateSubmit = useCallback(
|
|
async (request: TeamCreateRequest) => {
|
|
await createTeam(request);
|
|
},
|
|
[createTeam]
|
|
);
|
|
|
|
if (!electronMode) {
|
|
return (
|
|
<div className="flex size-full items-center justify-center p-6">
|
|
<div className="max-w-md text-center">
|
|
<p className="text-sm font-medium text-[var(--color-text)]">
|
|
{t('list.electronOnly.title')}
|
|
</p>
|
|
<p className="mt-2 text-xs text-[var(--color-text-muted)]">
|
|
{t('list.electronOnly.description')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const createDialogElement = showCreateDialog && (
|
|
<Suspense
|
|
fallback={
|
|
<CreateTeamDialogLoadingFallback
|
|
isCopy={copyData != null}
|
|
onClose={handleCreateDialogClose}
|
|
/>
|
|
}
|
|
>
|
|
<CreateTeamDialog
|
|
open={showCreateDialog}
|
|
canCreate={canCreate}
|
|
provisioningErrorsByTeam={provisioningErrorByTeam}
|
|
clearProvisioningError={clearProvisioningError}
|
|
existingTeamNames={teams.map((t) => t.teamName)}
|
|
provisioningTeamNames={provisioningTeamNames}
|
|
activeTeams={activeTeams}
|
|
initialData={copyData ?? undefined}
|
|
defaultProjectPath={currentProjectPath}
|
|
onClose={handleCreateDialogClose}
|
|
onCreate={handleCreateSubmit}
|
|
onOpenTeam={openTeamTab}
|
|
/>
|
|
</Suspense>
|
|
);
|
|
|
|
const launchDialogElement = launchDialogOpen && (
|
|
<Suspense
|
|
fallback={
|
|
<LaunchTeamDialogLoadingFallback
|
|
mode={launchDialogMode}
|
|
teamName={launchDialogTeamName}
|
|
onClose={() => setLaunchDialogOpen(false)}
|
|
/>
|
|
}
|
|
>
|
|
{launchDialogMode === 'relaunch' ? (
|
|
<LaunchTeamDialog
|
|
mode="relaunch"
|
|
open={launchDialogOpen}
|
|
teamName={launchDialogTeamName}
|
|
members={launchDialogMembers}
|
|
defaultProjectPath={launchDialogDefaultPath}
|
|
provisioningError={provisioningErrorByTeam[launchDialogTeamName] ?? null}
|
|
clearProvisioningError={clearProvisioningError}
|
|
activeTeams={activeTeams}
|
|
onClose={() => setLaunchDialogOpen(false)}
|
|
onRelaunch={handleRelaunchSubmit}
|
|
/>
|
|
) : (
|
|
<LaunchTeamDialog
|
|
mode="launch"
|
|
open={launchDialogOpen}
|
|
teamName={launchDialogTeamName}
|
|
members={launchDialogMembers}
|
|
defaultProjectPath={launchDialogDefaultPath}
|
|
provisioningError={provisioningErrorByTeam[launchDialogTeamName] ?? null}
|
|
clearProvisioningError={clearProvisioningError}
|
|
activeTeams={activeTeams}
|
|
onClose={() => setLaunchDialogOpen(false)}
|
|
onLaunch={handleLaunchSubmit}
|
|
/>
|
|
)}
|
|
</Suspense>
|
|
);
|
|
|
|
const renderHeader = (): React.JSX.Element => (
|
|
<div className="mb-4">
|
|
<div className="flex items-center justify-between">
|
|
<h2 className="text-base font-semibold text-[var(--color-text)]">{t('list.title')}</h2>
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
disabled={!canCreate}
|
|
onClick={() => setShowCreateDialog(true)}
|
|
>
|
|
{t('list.actions.createTeam')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
{!canCreate ? (
|
|
<p className="mt-2 text-xs text-[var(--color-text-muted)]">{t('list.localOnly')}</p>
|
|
) : null}
|
|
|
|
{teamsWithProvisioning.length > 0 ? (
|
|
<div className="mt-3 flex items-center gap-2">
|
|
<div className="relative flex-1">
|
|
<Search
|
|
size={14}
|
|
className="absolute left-2.5 top-1/2 -translate-y-1/2 text-[var(--color-text-muted)]"
|
|
/>
|
|
<Input
|
|
type="text"
|
|
placeholder={t('list.searchPlaceholder')}
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
className="h-8 pl-8 text-xs"
|
|
/>
|
|
</div>
|
|
<TeamListFilterPopover
|
|
filter={filter}
|
|
selectedProjectPath={currentProjectPath}
|
|
teams={teamsWithProvisioning}
|
|
aliveTeams={aliveTeams}
|
|
onFilterChange={setFilter}
|
|
onProjectChange={handleProjectSelectionChange}
|
|
/>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
|
|
const renderContent = (): React.JSX.Element => {
|
|
if (teamsLoading) {
|
|
return (
|
|
<div className="flex size-full items-center justify-center text-sm text-[var(--color-text-muted)]">
|
|
{t('list.loading')}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (teamsError) {
|
|
return (
|
|
<div className="flex size-full items-center justify-center p-6">
|
|
<div className="text-center">
|
|
<p className="text-sm font-medium text-red-400">{t('list.loadFailed')}</p>
|
|
<p className="mt-2 text-xs text-[var(--color-text-muted)]">{teamsError}</p>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="mt-4"
|
|
onClick={() => {
|
|
void fetchTeams();
|
|
}}
|
|
>
|
|
{t('list.actions.retry')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (teamsWithProvisioning.length === 0) {
|
|
return (
|
|
<TeamEmptyState canCreate={canCreate} onCreateTeam={() => setShowCreateDialog(true)} />
|
|
);
|
|
}
|
|
|
|
const hasActiveFilters = filter.selectedStatuses.size > 0;
|
|
if (filteredTeams.length === 0 && (searchQuery.trim() || hasActiveFilters)) {
|
|
return (
|
|
<div className="flex items-center justify-center py-12 text-sm text-[var(--color-text-muted)]">
|
|
{t('list.noMatches')}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const activeFiltered = filteredTeams.filter((t) => !t.deletedAt);
|
|
const deletedFiltered = filteredTeams.filter((t) => t.deletedAt);
|
|
const shouldPageTeamSections = !searchQuery.trim() && !hasActiveFilters;
|
|
const selectedProjectSectionKey = currentProjectPath
|
|
? `project:${normalizePath(currentProjectPath)}`
|
|
: 'project';
|
|
const otherTeamsSectionKey = currentProjectPath
|
|
? `other:${normalizePath(currentProjectPath)}`
|
|
: 'other';
|
|
const activeSections = currentProjectPath
|
|
? [
|
|
{
|
|
key: selectedProjectSectionKey,
|
|
title: t('list.sections.projectTeams', {
|
|
project: folderName(currentProjectPath) || t('list.sections.selectedProject'),
|
|
}),
|
|
teams: activeFiltered.filter((team) =>
|
|
teamMatchesProjectSelection(team, currentProjectPath)
|
|
),
|
|
},
|
|
{
|
|
key: otherTeamsSectionKey,
|
|
title: t('list.sections.otherTeams'),
|
|
teams: activeFiltered.filter(
|
|
(team) => !teamMatchesProjectSelection(team, currentProjectPath)
|
|
),
|
|
},
|
|
].filter((section) => section.teams.length > 0)
|
|
: [
|
|
{
|
|
key: 'all',
|
|
title: null,
|
|
teams: activeFiltered,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<>
|
|
{activeSections.map((section, sectionIndex) => (
|
|
<section key={section.key} className={sectionIndex > 0 ? 'mt-6' : undefined}>
|
|
{(() => {
|
|
const paged =
|
|
shouldPageTeamSections && section.teams.length > TEAM_SECTION_INITIAL_VISIBLE_COUNT;
|
|
const requestedVisibleCount =
|
|
teamSectionVisibleCountByKey[section.key] ?? TEAM_SECTION_INITIAL_VISIBLE_COUNT;
|
|
const visibleCount = paged
|
|
? Math.min(section.teams.length, requestedVisibleCount)
|
|
: section.teams.length;
|
|
const visibleTeams = section.teams.slice(0, visibleCount);
|
|
const canShowMore = paged && visibleCount < section.teams.length;
|
|
const canShowLess = paged && visibleCount > TEAM_SECTION_INITIAL_VISIBLE_COUNT;
|
|
|
|
return (
|
|
<>
|
|
{section.title ? (
|
|
<div className="mb-2 flex items-center gap-2">
|
|
<h3 className="text-[11px] font-medium uppercase tracking-wider text-[var(--color-text-muted)]">
|
|
{section.title}
|
|
</h3>
|
|
<span className="rounded-full border border-[var(--color-border)] bg-[var(--color-surface-overlay)] px-1.5 py-0.5 text-[10px] font-medium leading-none text-[var(--color-text-secondary)]">
|
|
{section.teams.length}
|
|
</span>
|
|
</div>
|
|
) : null}
|
|
<div className="team-row-zebra-grid grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3">
|
|
{visibleTeams.map((team) => {
|
|
const status = resolveTeamStatus(
|
|
team,
|
|
team.teamName,
|
|
aliveTeams,
|
|
getCurrentProvisioningProgressForTeam(provisioningState, team.teamName),
|
|
leadActivityByTeam
|
|
);
|
|
const teamColorSet = team.color
|
|
? getTeamColorSet(team.color)
|
|
: nameColorSet(team.displayName);
|
|
const matchesCurrentProject = currentProjectPath
|
|
? teamMatchesProjectSelection(team, currentProjectPath)
|
|
: false;
|
|
return (
|
|
<ActiveTeamCard
|
|
key={team.teamName}
|
|
team={team}
|
|
status={status}
|
|
teamColorSet={teamColorSet}
|
|
isLight={isLight}
|
|
matchesCurrentProject={matchesCurrentProject}
|
|
currentProjectPath={currentProjectPath}
|
|
branchName={
|
|
team.projectPath
|
|
? (branchByPath[normalizePath(team.projectPath)] ?? undefined)
|
|
: undefined
|
|
}
|
|
taskCounts={taskCountsByTeam.get(team.teamName)}
|
|
launchingTeamName={launchingTeamName}
|
|
stoppingTeamName={stoppingTeamName}
|
|
onOpenTeam={openTeamTab}
|
|
onLaunchTeam={handleLaunchTeam}
|
|
onStopTeam={handleStopTeam}
|
|
onCopyTeam={handleCopyTeam}
|
|
onDeleteTeam={handleDeleteTeam}
|
|
t={t}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
{(canShowMore || canShowLess) && (
|
|
<div className="mt-3 flex items-center justify-center gap-3">
|
|
{canShowMore ? (
|
|
<button
|
|
type="button"
|
|
className="rounded px-2.5 py-1 text-xs font-medium text-[var(--color-text-muted)] transition-colors hover:bg-[var(--color-surface-raised)] hover:text-[var(--color-text)]"
|
|
onClick={() =>
|
|
setTeamSectionVisibleCountByKey((prev) => ({
|
|
...prev,
|
|
[section.key]: Math.min(
|
|
section.teams.length,
|
|
visibleCount + TEAM_SECTION_PAGE_SIZE
|
|
),
|
|
}))
|
|
}
|
|
>
|
|
{tCommon('actions.showMore')}
|
|
</button>
|
|
) : null}
|
|
{canShowLess ? (
|
|
<button
|
|
type="button"
|
|
className="rounded px-2.5 py-1 text-xs text-[var(--color-text-muted)] transition-colors hover:bg-[var(--color-surface-raised)] hover:text-[var(--color-text)]"
|
|
onClick={() =>
|
|
setTeamSectionVisibleCountByKey((prev) => ({
|
|
...prev,
|
|
[section.key]: Math.max(
|
|
TEAM_SECTION_INITIAL_VISIBLE_COUNT,
|
|
visibleCount - TEAM_SECTION_PAGE_SIZE
|
|
),
|
|
}))
|
|
}
|
|
>
|
|
{tCommon('actions.showLess')}
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
})()}
|
|
</section>
|
|
))}
|
|
|
|
{deletedFiltered.length > 0 && (
|
|
<>
|
|
<div className="my-6 flex items-center gap-3">
|
|
<div className="h-px flex-1 bg-[var(--color-border)]" />
|
|
<span className="text-[10px] font-medium uppercase tracking-wider text-[var(--color-text-muted)]">
|
|
{t('list.trash', { count: deletedFiltered.length })}
|
|
</span>
|
|
<div className="h-px flex-1 bg-[var(--color-border)]" />
|
|
</div>
|
|
<div className="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3">
|
|
{deletedFiltered.map((team) => (
|
|
<div
|
|
key={team.teamName}
|
|
className="group relative cursor-default overflow-hidden rounded-lg border border-[var(--color-border)] bg-zinc-800/40 p-4 opacity-60"
|
|
>
|
|
<Trash2
|
|
size={64}
|
|
className="pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-zinc-400 opacity-[0.06]"
|
|
/>
|
|
<div className="relative z-10">
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex min-w-0 flex-1 items-center gap-2">
|
|
<h3 className="truncate text-sm font-semibold text-[var(--color-text)]">
|
|
{team.displayName}
|
|
</h3>
|
|
<span className="inline-flex items-center gap-1 rounded-full bg-zinc-500/15 px-2 py-0.5 text-[10px] font-medium text-zinc-500">
|
|
{t('list.status.deleted')}
|
|
</span>
|
|
</div>
|
|
<div className="flex shrink-0 gap-1">
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<button
|
|
type="button"
|
|
className="shrink-0 rounded p-1 text-[var(--color-text-muted)] opacity-0 transition-opacity hover:bg-emerald-500/10 hover:text-emerald-300 group-hover:opacity-100"
|
|
onClick={(e) => handleRestoreTeam(team.teamName, e)}
|
|
aria-label={t('list.actions.restoreTeam')}
|
|
>
|
|
<RotateCcw size={14} />
|
|
</button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="bottom">{t('list.actions.restore')}</TooltipContent>
|
|
</Tooltip>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<button
|
|
type="button"
|
|
className="shrink-0 rounded p-1 text-[var(--color-text-muted)] opacity-0 transition-opacity hover:bg-red-500/10 hover:text-red-300 group-hover:opacity-100"
|
|
onClick={(e) => handlePermanentlyDeleteTeam(team.teamName, e)}
|
|
aria-label={t('list.actions.deletePermanently')}
|
|
>
|
|
<Trash2 size={14} />
|
|
</button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="bottom">
|
|
{t('list.actions.deleteForever')}
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</div>
|
|
</div>
|
|
<p className="mt-2 line-clamp-2 text-xs text-[var(--color-text-muted)]">
|
|
{team.description || t('list.noDescription')}
|
|
</p>
|
|
{team.members && team.members.length > 0 && (
|
|
<div className="mt-3 flex flex-wrap items-center gap-x-6 gap-y-2">
|
|
{renderMemberChips(team.members, isLight)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<TooltipProvider delayDuration={300}>
|
|
<div className="size-full overflow-auto p-4">
|
|
{renderHeader()}
|
|
{renderContent()}
|
|
{createDialogElement}
|
|
{launchDialogElement}
|
|
</div>
|
|
</TooltipProvider>
|
|
);
|
|
});
|