KI-Konzil/_bmad-output/implementation-artifacts/stories/3-2-lineare-und-bedingte-edges.md

Story 3.2: Lineare und bedingte Edges

Status: done

Story

Als Nutzer, möchte ich Pfeile zwischen Nodes ziehen und als linear/bedingt markieren, so dass ich den Workflow meines Councils definieren kann.

Acceptance Criteria

1. Verbindungsziehen zwischen Handles → lineare graue Edge entsteht
2. Klick auf Edge → EdgeSettingsPanel öffnet sich
3. Edge als „bedingt" markieren mit Condition-Label → gestrichelte rote Linie mit Label
4. Edge als „approve" markieren → grüne Linie mit Label
5. Edge-Typ und Condition werden im Zustand persistiert

Tasks / Subtasks

• Task 1: components/edges/ConditionalEdge.tsx Custom React Flow Edge (AC: 3, 4)
  • Subtask 1.1: SmoothStepPath Basis-Routing
  • Subtask 1.2: Farb-Kodierung: grau (linear), rot gestrichelt (rework), grün (approve)
  • Subtask 1.3: Label-Rendering via EdgeLabelRenderer
• Task 2: components/panels/EdgeSettingsPanel.tsx (AC: 2, 3, 4)
  • Subtask 2.1: Typ-Auswahl (linear/conditional)
  • Subtask 2.2: Condition-Label-Eingabe wenn type = conditional
• Task 3: store/council-store.ts — updateEdgeData() Funktion (AC: 5)
• Task 4: EDGE_TYPES Registrierung in ArchitectCanvas

Dev Notes

• EDGE_TYPES = { conditional: ConditionalEdge } + defaultEdgeType: "conditional"
• Edge-Daten: edge.data.type (linear|conditional), edge.data.condition (string)
• EdgeLabelRenderer positioniert Label absolut relativ zum Edge-Mittelpunkt

Project Structure Notes

• frontend/app/components/edges/ConditionalEdge.tsx
• frontend/app/components/panels/EdgeSettingsPanel.tsx

References

• [Source: _bmad-output/planning-artifacts/ux-design.md#Edge-Verbindungspfeil]

Dev Agent Record

Agent Model Used

Amelia (💻 BMAD Dev Agent)

Completion Notes List

• getSmoothStepPath aus @xyflow/react liefert edgePath, labelX, labelY in einem Aufruf.
• Farben werden direkt via stroke-Prop auf BaseEdge gesetzt.

File List

• frontend/app/components/edges/ConditionalEdge.tsx
• frontend/app/components/panels/EdgeSettingsPanel.tsx