Force-directed graph visualization for agent teams. Package: @claude-teams/agent-graph (isolated workspace package) - Space theme: bloom, particles, hex grid, depth stars - Members as hexagonal nodes with breathing glow - Tasks as pill cards in kanban columns (todo/wip/done/review/approved) per owner - Message particles along edges (real-time only) - Deterministic layout, Figma-style pan, scroll/pinch zoom - Clean Architecture: ports/adapters/strategies, ES #private classes Integration: features/agent-graph/ (adapter + overlay + tab) - Full-screen overlay (Cmd+Shift+G) + Pin as Tab - Graph button in Team section header - Frustum culling, zero per-frame allocations, adaptive fps - Performance overlay via ?perf query param Also: CI runs on all PR branches, features/CLAUDE.md architecture guide
30 lines
1,004 B
TypeScript
30 lines
1,004 B
TypeScript
/**
|
|
* React hook bridge for TeamGraphAdapter class.
|
|
* Thin wrapper — instantiates the class adapter and calls adapt() with store data.
|
|
*/
|
|
|
|
import { useMemo, useRef } from 'react';
|
|
|
|
import { useStore } from '@renderer/store';
|
|
import { useShallow } from 'zustand/react/shallow';
|
|
|
|
import { TeamGraphAdapter } from './TeamGraphAdapter';
|
|
|
|
import type { GraphDataPort } from '@claude-teams/agent-graph';
|
|
|
|
export function useTeamGraphAdapter(teamName: string): GraphDataPort {
|
|
const adapterRef = useRef<TeamGraphAdapter>(TeamGraphAdapter.create());
|
|
|
|
const { teamData, spawnStatuses, leadContext } = useStore(
|
|
useShallow((s) => ({
|
|
teamData: s.selectedTeamData,
|
|
spawnStatuses: teamName ? s.memberSpawnStatusesByTeam[teamName] : undefined,
|
|
leadContext: teamName ? s.leadContextByTeam[teamName] : undefined,
|
|
}))
|
|
);
|
|
|
|
return useMemo(
|
|
() => adapterRef.current.adapt(teamData, teamName, spawnStatuses, leadContext),
|
|
[teamData, teamName, spawnStatuses, leadContext]
|
|
);
|
|
}
|