feat: replace form-based pattern editor with interactive graph canvas

Replace the flat agent list and static flow diagrams in PatternEditor with
an interactive React Flow canvas backed by the authoritative PatternGraph
model. Users can now see and manipulate orchestration topology visually.

Changes:
- Add @xyflow/react (React Flow) as a canvas library
- Create patternGraph view-model layer for graph-to-canvas projection
- Create GraphNodes with custom system/agent node components
- Create PatternGraphCanvas with drag, connect, and selection support
- Create PatternGraphInspector for selected node/agent details
- Rewrite PatternEditor with split layout: canvas + inspector sidebar
- Add dark theme CSS overrides for React Flow
- Add 11 tests covering view-model projection, connection rules, and
  graph mutation helpers
- Update ARCHITECTURE.md to reflect the new renderer graph boundary

The canvas projects PatternGraph into React Flow nodes/edges. Handoff mode
supports drawing new agent-to-agent edges interactively. Node positions
persist to the graph on drag completion. Agent editing moves from inline
forms to the inspector panel on node selection.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

src/renderer/styles.css

@@ -140,6 +140,53 @@ textarea {
   max-height: 200px;
 }
 
+/* React Flow dark theme overrides */
+.react-flow__node {
+  font-family: inherit;
+}
+
+.react-flow__edge-path {
+  stroke: #52525b;
+  stroke-width: 1.5;
+}
+
+.react-flow__edge.animated .react-flow__edge-path {
+  stroke-dasharray: 5;
+  animation: reactflow-dash 0.5s linear infinite;
+}
+
+@keyframes reactflow-dash {
+  to {
+    stroke-dashoffset: -10;
+  }
+}
+
+.react-flow__controls {
+  border: 1px solid #27272a;
+  background: #18181b;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+.react-flow__controls button {
+  background: #18181b;
+  border-color: #27272a;
+  color: #a1a1aa;
+  width: 28px;
+  height: 28px;
+}
+
+.react-flow__controls button:hover {
+  background: #27272a;
+  color: #e4e4e7;
+}
+
+.react-flow__minimap {
+  background: #09090b;
+  border: 1px solid #27272a;
+  border-radius: 8px;
+}
+
 /* Sidebar running-session pulse animation */
 @keyframes sidebar-pulse {
   0%, 100% { opacity: 1; }