KI-Konzil/_bmad-output/implementation-artifacts/stories/3-1-react-flow-canvas-mit-custom-agent-node.md

Story 3.1: React-Flow-Canvas mit Custom Agent Node

Status: done

Story

Als Nutzer, möchte ich Agent-Nodes per Drag & Drop auf den Canvas ziehen, so dass ich meinen KI-Rat visuell zusammenstellen kann.

Acceptance Criteria

1. Drag & Drop aus linker Seitenleiste → Custom AgentNode erscheint auf Canvas
2. Klick auf Node → rechtes NodeSettingsPanel öffnet sich
3. Änderung von Name/Prompt/Modell → Canvas-Node aktualisiert sich live (Zustand-Bindung)
4. Node zeigt: Name, LLM-Modell (farblich kodiert), Tool-Badges (🔍, 📄)
5. Pulsier-Animation (animate-pulse) wenn isActive = true

Tasks / Subtasks

• Task 1: components/nodes/AgentNode.tsx Custom React Flow Node (AC: 1, 4, 5)
  • Subtask 1.1: Anzeige: Name, Modell-Badge, Tool-Icons (Globe, FileText)
  • Subtask 1.2: isActive-Zustand → animate-pulse + Indigo-Rahmen
  • Subtask 1.3: Handle (source + target) für Verbindungen
• Task 2: store/council-store.ts Zustand-Store (AC: 3)
  • Subtask 2.1: nodes, edges, selectedNodeId, councilName
  • Subtask 2.2: addAgentNode(), updateNodeData(), selectNode()
• Task 3: components/panels/NodeSidebar.tsx (AC: 1)
• Task 4: components/panels/NodeSettingsPanel.tsx (AC: 2, 3)
• Task 5: components/ArchitectCanvas.tsx React Flow Wrapper
• Task 6: Frontend-Tests für Store und Parser (AC: 3)

Dev Notes

• NODE_TYPES = { agent: AgentNode } in ArchitectCanvas registrieren
• Zustand via useCouncilStore (Zustand) — kein React-Kontext-Drill
• memo() für Performance bei vielen Nodes

Project Structure Notes

• frontend/app/components/nodes/AgentNode.tsx
• frontend/app/components/ArchitectCanvas.tsx
• frontend/app/components/panels/NodeSidebar.tsx
• frontend/app/components/panels/NodeSettingsPanel.tsx
• frontend/app/store/council-store.ts
• frontend/app/types/council.ts

References

• [Source: _bmad-output/planning-artifacts/ux-design.md#Agent-Node-Canvas-Element]
• [Source: CLAUDE.md#React-Conventions — custom node components]

Dev Agent Record

Agent Model Used

Amelia (💻 BMAD Dev Agent)

Completion Notes List

• MODEL_LABELS und MODEL_COLORS als Lookup-Maps für farbliche Modell-Kodierung.
• memo() verhindert unnötige Re-Renders bei vielen Nodes auf dem Canvas.

File List

• frontend/app/types/council.ts
• frontend/app/store/council-store.ts
• frontend/app/components/nodes/AgentNode.tsx
• frontend/app/components/ArchitectCanvas.tsx
• frontend/app/components/NavTabs.tsx
• frontend/app/components/panels/NodeSidebar.tsx
• frontend/app/components/panels/NodeSettingsPanel.tsx
• frontend/app/app/__tests__/council-store.test.ts