agent-ecosystem/src/renderer/features/agent-graph/adapters/useTeamGraphAdapter.ts
Илия 11bb49c53e
feat(graph): force-directed agent graph visualization with kanban-zone task layout
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
2026-03-28 12:03:42 +02:00

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]
);
}