mirror of
https://github.com/multica-ai/multica.git
synced 2026-07-26 20:45:37 +02:00
Board and Swimlane crashed with "Maximum update depth exceeded" on first paint of the Issues route. During cold load the member/agent/squad directory queries are unresolved, so useActorName's `= []` defaults allocated a fresh array every render and its `getActorName` memo changed identity each render. BoardView's `groups` (and SwimLaneView's `laneGroups`) list `getActorName` as a dep, so they churned every render and re-fired the column-resync effect without end; react-virtuoso escalated the loop into the reported crash. This predates MUL-4797 — it was exposed when board/swimlane columns were virtualized with a real <Virtuoso>. - Share stable empty references for the loading directory snapshot so getActorName is referentially stable across cold-load renders (root cause). - Equality-guard the shared column setter in useDragSettle so a content-equal rebuild returns the previous reference and cannot spin the resync effect (defense-in-depth). Regression coverage: useActorName stability during cold load; the column-setter equality guard; and Board (40 cards) + Swimlane rendered with the REAL react-virtuoso under pending directories, which reproduce "Maximum update depth exceeded" without the fix and pass with it. Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com> Co-authored-by: multica-agent <github@multica.ai>
110 lines
4.1 KiB
TypeScript
110 lines
4.1 KiB
TypeScript
"use client";
|
|
|
|
import { useCallback, useMemo } from "react";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import type { Agent, MemberWithUser, Squad } from "../types";
|
|
import { useWorkspaceId } from "../hooks";
|
|
import { memberListOptions, agentListOptions, squadListOptions } from "./queries";
|
|
import { resolvePublicFileUrl } from "./avatar-url";
|
|
|
|
// Stable empties for the still-loading directory queries. A fresh `= []`
|
|
// default allocates a new array on every render while `data` is undefined,
|
|
// which makes `useMemo(..., [members, agents, squads])` recompute
|
|
// `getActorName` on every render during cold load. Consumers that list
|
|
// `getActorName` in their own memo deps (BoardView's `groups`, SwimLaneView's
|
|
// `laneGroups`) then churn a fresh value each render, and the board/list
|
|
// column resync `useEffect(setColumns, [groups])` re-fires without end — an
|
|
// infinite re-render that react-virtuoso turns into "Maximum update depth
|
|
// exceeded" on the Issues route (MUL-4985). Sharing one reference keeps the
|
|
// loading snapshot referentially stable.
|
|
const EMPTY_MEMBERS: MemberWithUser[] = [];
|
|
const EMPTY_AGENTS: Agent[] = [];
|
|
const EMPTY_SQUADS: Squad[] = [];
|
|
|
|
/**
|
|
* Pure actor-name resolution over explicit directory snapshots. Async flows
|
|
* (e.g. CSV export) must resolve names from directories they have awaited
|
|
* themselves — a hook-bound getActorName closes over whatever the queries
|
|
* held at render time, silently naming everyone "Unknown*" while the
|
|
* directories are still loading.
|
|
*/
|
|
export function buildActorNameResolver(directories: {
|
|
members: readonly { user_id: string; name: string }[];
|
|
agents: readonly { id: string; name: string }[];
|
|
squads: readonly { id: string; name: string }[];
|
|
}) {
|
|
const memberNames = new Map(directories.members.map((m) => [m.user_id, m.name]));
|
|
const agentNames = new Map(directories.agents.map((a) => [a.id, a.name]));
|
|
const squadNames = new Map(directories.squads.map((s) => [s.id, s.name]));
|
|
return (type: string, id: string) => {
|
|
if (type === "member") return memberNames.get(id) ?? "Unknown";
|
|
if (type === "agent") return agentNames.get(id) ?? "Unknown Agent";
|
|
if (type === "squad") return squadNames.get(id) ?? "Unknown Squad";
|
|
if (type === "system") return "Multica";
|
|
return "System";
|
|
};
|
|
}
|
|
|
|
export function useActorName() {
|
|
const wsId = useWorkspaceId();
|
|
const { data: members = EMPTY_MEMBERS } = useQuery(memberListOptions(wsId));
|
|
const { data: agents = EMPTY_AGENTS } = useQuery(agentListOptions(wsId));
|
|
const { data: squads = EMPTY_SQUADS } = useQuery(squadListOptions(wsId));
|
|
|
|
const getMemberName = useCallback((userId: string) => {
|
|
const m = members.find((m) => m.user_id === userId);
|
|
return m?.name ?? "Unknown";
|
|
}, [members]);
|
|
|
|
const getAgentName = useCallback((agentId: string) => {
|
|
const a = agents.find((a) => a.id === agentId);
|
|
return a?.name ?? "Unknown Agent";
|
|
}, [agents]);
|
|
|
|
const getSquadName = useCallback((squadId: string) => {
|
|
const s = squads.find((s) => s.id === squadId);
|
|
return s?.name ?? "Unknown Squad";
|
|
}, [squads]);
|
|
|
|
const getActorName = useMemo(
|
|
() => buildActorNameResolver({ members, agents, squads }),
|
|
[agents, members, squads],
|
|
);
|
|
|
|
const getActorInitials = useCallback((type: string, id: string) => {
|
|
const name = getActorName(type, id);
|
|
return name
|
|
.split(" ")
|
|
.map((w) => w[0])
|
|
.join("")
|
|
.toUpperCase()
|
|
.slice(0, 2);
|
|
}, [getActorName]);
|
|
|
|
const getActorAvatarUrl = useCallback((type: string, id: string): string | null => {
|
|
if (type === "member") return resolvePublicFileUrl(members.find((m) => m.user_id === id)?.avatar_url);
|
|
if (type === "agent") return resolvePublicFileUrl(agents.find((a) => a.id === id)?.avatar_url);
|
|
if (type === "squad") return resolvePublicFileUrl(squads.find((s) => s.id === id)?.avatar_url);
|
|
return null;
|
|
}, [agents, members, squads]);
|
|
|
|
return useMemo(
|
|
() => ({
|
|
getMemberName,
|
|
getAgentName,
|
|
getSquadName,
|
|
getActorName,
|
|
getActorInitials,
|
|
getActorAvatarUrl,
|
|
}),
|
|
[
|
|
getActorAvatarUrl,
|
|
getActorInitials,
|
|
getActorName,
|
|
getAgentName,
|
|
getMemberName,
|
|
getSquadName,
|
|
],
|
|
);
|
|
}
|