fix: restore tree editor visibility after Tailwind v4 upgrade and add Sentry DSN build arg

- Add missing `flex` class on TreeEditorPage editor wrapper (collapsed canvas to 0 height)
- Rewrite React Flow CSS overrides to use --xy-* custom properties (v12 compat with TW4)
- Move React Flow CSS import from component to index.css (CSS layer ordering)
- Add VITE_SENTRY_DSN build arg to Dockerfile for Railway builds
- Use env var for Sentry DSN in instrument.ts with hardcoded fallback
- Add lessons learned #53-55 to CLAUDE.md

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/index.css

@@ -2,6 +2,11 @@
 
 @custom-variant dark (&:where(.dark, .dark *));
 
+/* React Flow — imported here (not in component JS) so @tailwindcss/vite
+   doesn't wrap it in a cascade layer, which would lower its specificity
+   below Tailwind's own styles and hide nodes/edges. */
+@import '@xyflow/react/dist/style.css';
+
 @theme {
   /* ── Brand tokens ─────────────────────────────────── */
   --color-brand-gradient-from: oklch(0.65 0.13 195);   /* #06b6d4 cyan-500 */
@@ -364,58 +369,59 @@
 }
 
 /* ── React Flow dark theme overrides ─────────────────── */
-.react-flow__background {
-  background-color: transparent !important;
+/* React Flow v12 uses --xy-* CSS custom properties for theming.
+   Override the defaults to match our Slate & Ice design system. */
+.react-flow.dark {
+  --xy-background-color-default: transparent;
+  --xy-edge-stroke-default: var(--color-border);
+  --xy-edge-stroke-selected-default: var(--color-primary);
+  --xy-edge-label-color-default: var(--color-muted-foreground);
+  --xy-edge-label-background-color-default: var(--color-card);
+  --xy-node-background-color-default: var(--color-card);
+  --xy-node-color-default: var(--color-foreground);
+  --xy-node-border-default: 1px solid var(--color-border);
+  --xy-handle-background-color-default: var(--color-border);
+  --xy-handle-border-color-default: var(--color-card);
+  --xy-minimap-background-color-default: var(--color-card);
+  --xy-minimap-mask-background-color-default: oklch(0.22 0.008 264 / 0.6);
+  --xy-controls-button-background-color-default: var(--color-card);
+  --xy-controls-button-background-color-hover-default: var(--color-accent);
+  --xy-controls-button-color-default: var(--color-muted-foreground);
+  --xy-controls-button-color-hover-default: var(--color-foreground);
+  --xy-controls-button-border-color-default: var(--color-border);
 }
 
 .react-flow__controls {
-  background-color: var(--color-card) !important;
-  border: 1px solid var(--color-border) !important;
   border-radius: 0.75rem !important;
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
   overflow: hidden;
 }
 
-.react-flow__controls-button {
-  background-color: var(--color-card) !important;
-  border-color: var(--color-border) !important;
-  fill: var(--color-muted-foreground) !important;
-  color: var(--color-muted-foreground) !important;
-}
-
-.react-flow__controls-button:hover {
-  background-color: var(--color-accent) !important;
-  fill: var(--color-foreground) !important;
-}
-
-.react-flow__controls-button svg {
-  fill: inherit !important;
-}
-
 .react-flow__minimap {
-  background-color: var(--color-card) !important;
-  border: 1px solid var(--color-border) !important;
   border-radius: 0.75rem !important;
 }
 
-.react-flow__edge-path {
-  stroke: var(--color-border);
-}
-
-.react-flow__edge-text {
-  fill: var(--color-muted-foreground);
-}
-
-.react-flow__edge-textbg {
-  fill: var(--color-card);
-}
-
 .react-flow__attribution {
   display: none;
 }
 
-.react-flow__handle {
-  background-color: var(--color-border);
+/* ── Glow edge animations ────────────────────────────── */
+@keyframes glow-flow-downstream {
+  from { stroke-dashoffset: 40; }
+  to { stroke-dashoffset: 0; }
+}
+
+@keyframes glow-flow-upstream {
+  from { stroke-dashoffset: 0; }
+  to { stroke-dashoffset: 40; }
+}
+
+.glow-edge-flow-downstream {
+  animation: glow-flow-downstream 1s linear infinite;
+}
+
+.glow-edge-flow-upstream {
+  animation: glow-flow-upstream 1s linear infinite;
 }
 
 /* ── Accessibility: Reduce motion ────────────────────── */