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
22 lines
988 B
TypeScript
22 lines
988 B
TypeScript
import type { GraphDomainRef, GraphEdge } from './types';
|
|
|
|
/**
|
|
* Event callback port — graph fires these when user interacts with nodes/edges.
|
|
* Host project provides handlers to navigate to domain-specific views.
|
|
*/
|
|
export interface GraphEventPort {
|
|
/** Single click on a node — show popover with details */
|
|
onNodeClick?: (ref: GraphDomainRef) => void;
|
|
/** Double click on a node — open full detail dialog */
|
|
onNodeDoubleClick?: (ref: GraphDomainRef) => void;
|
|
/** Click on an edge */
|
|
onEdgeClick?: (edge: GraphEdge) => void;
|
|
/** Click on empty canvas background */
|
|
onBackgroundClick?: () => void;
|
|
/** "Send Message" action from node popover */
|
|
onSendMessage?: (memberName: string, teamName: string) => void;
|
|
/** "Open Task Detail" action from task popover */
|
|
onOpenTaskDetail?: (taskId: string, teamName: string) => void;
|
|
/** "Open Member Profile" action from member popover */
|
|
onOpenMemberProfile?: (memberName: string, teamName: string) => void;
|
|
}
|