agent-ecosystem/packages/agent-graph/src/ports/GraphEventPort.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

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