feat(visualizer): add runtime architecture diagram

2026-03-13 22:33:28 +01:00
parent 5a9d61d674
commit a674d40453
12 changed files with 4953 additions and 76 deletions
--- a/apps/visualizer/diagram.html
+++ b/apps/visualizer/diagram.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="pl">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Trade system diagram</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/diagram-main.tsx"></script>
+  </body>
+</html>
--- a/apps/visualizer/package-lock.json
+++ b/apps/visualizer/package-lock.json
@@ -6,6 +6,7 @@
    "": {
      "name": "trade-visualizer",
      "dependencies": {
+        "@xyflow/react": "^12.8.5",
        "chart.js": "^4.4.1",
        "chartjs-adapter-luxon": "^1.3.1",
        "lightweight-charts": "^5.0.8",
@@ -1110,6 +1111,49 @@
        "@babel/types": "^7.28.2"
      }
    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A=="
+    },
+    "node_modules/@types/d3-drag": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.7.tgz",
+      "integrity": "sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-selection": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.11.tgz",
+      "integrity": "sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w=="
+    },
+    "node_modules/@types/d3-transition": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.9.tgz",
+      "integrity": "sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-zoom": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.8.tgz",
+      "integrity": "sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==",
+      "dependencies": {
+        "@types/d3-interpolate": "*",
+        "@types/d3-selection": "*"
+      }
+    },
    "node_modules/@types/estree": {
      "version": "1.0.8",
      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -1121,14 +1165,14 @@
      "version": "15.7.15",
      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT"
    },
    "node_modules/@types/react": {
      "version": "18.3.27",
      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.27.tgz",
      "integrity": "sha512-cisd7gxkzjBKU2GgdYrTdtQx1SORymWyaAFhaxQPK9bYO9ot3Y5OikQRvY0VYQtvwjeQnizCINJAenh/V7MK2w==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@types/prop-types": "*",
@@ -1166,6 +1210,36 @@
        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
      }
    },
+    "node_modules/@xyflow/react": {
+      "version": "12.10.1",
+      "resolved": "https://registry.npmjs.org/@xyflow/react/-/react-12.10.1.tgz",
+      "integrity": "sha512-5eSWtIK/+rkldOuFbOOz44CRgQRjtS9v5nufk77DV+XBnfCGL9HAQ8PG00o2ZYKqkEU/Ak6wrKC95Tu+2zuK3Q==",
+      "dependencies": {
+        "@xyflow/system": "0.0.75",
+        "classcat": "^5.0.3",
+        "zustand": "^4.4.0"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@xyflow/system": {
+      "version": "0.0.75",
+      "resolved": "https://registry.npmjs.org/@xyflow/system/-/system-0.0.75.tgz",
+      "integrity": "sha512-iXs+AGFLi8w/VlAoc/iSxk+CxfT6o64Uw/k0CKASOPqjqz6E0rb5jFZgJtXGZCpfQI6OQpu5EnumP5fGxQheaQ==",
+      "dependencies": {
+        "@types/d3-drag": "^3.0.7",
+        "@types/d3-interpolate": "^3.0.4",
+        "@types/d3-selection": "^3.0.10",
+        "@types/d3-transition": "^3.0.8",
+        "@types/d3-zoom": "^3.0.8",
+        "d3-drag": "^3.0.0",
+        "d3-interpolate": "^3.0.1",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0"
+      }
+    },
    "node_modules/baseline-browser-mapping": {
      "version": "2.9.11",
      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.11.tgz",
@@ -1253,6 +1327,11 @@
        "luxon": ">=1.0.0"
      }
    },
+    "node_modules/classcat": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/classcat/-/classcat-5.0.5.tgz",
+      "integrity": "sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w=="
+    },
    "node_modules/convert-source-map": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -1264,9 +1343,105 @@
      "version": "3.2.3",
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT"
    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
+      }
+    },
+    "node_modules/d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
    "node_modules/debug": {
      "version": "4.4.3",
      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -1664,6 +1839,14 @@
        "browserslist": ">= 4.21.0"
      }
    },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
    "node_modules/vite": {
      "version": "5.4.21",
      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.21.tgz",
@@ -1730,6 +1913,33 @@
      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
      "dev": true,
      "license": "ISC"
+    },
+    "node_modules/zustand": {
+      "version": "4.5.7",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.7.tgz",
+      "integrity": "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==",
+      "dependencies": {
+        "use-sync-external-store": "^1.2.2"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0.6",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
    }
  }
 }
--- a/apps/visualizer/package.json
+++ b/apps/visualizer/package.json
@@ -8,6 +8,7 @@
    "preview": "vite preview"
  },
  "dependencies": {
+    "@xyflow/react": "^12.8.5",
    "chart.js": "^4.4.1",
    "chartjs-adapter-luxon": "^1.3.1",
    "lightweight-charts": "^5.0.8",
--- a/apps/visualizer/src/diagram-main.tsx
+++ b/apps/visualizer/src/diagram-main.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import '@xyflow/react/dist/style.css';
+import './diagram.css';
+import { TradeSystemFlowPage } from './diagram/TradeSystemFlowPage';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <TradeSystemFlowPage />
+  </React.StrictMode>
+);
--- a/apps/visualizer/src/diagram.css
+++ b/apps/visualizer/src/diagram.css
@@ -0,0 +1,535 @@
+:root {
+  --rf-bg: #efe7db;
+  --rf-panel: rgba(255, 252, 246, 0.94);
+  --rf-card: #fffdf9;
+  --rf-ink: #1b1714;
+  --rf-muted: #625b52;
+  --rf-line: rgba(99, 91, 82, 0.18);
+  --rf-shadow: 0 24px 54px rgba(27, 23, 20, 0.12);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  margin: 0;
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif;
+  color: var(--rf-ink);
+  background:
+    radial-gradient(circle at top left, rgba(31, 111, 139, 0.14), transparent 26%),
+    radial-gradient(circle at top right, rgba(176, 79, 53, 0.14), transparent 24%),
+    linear-gradient(180deg, #f8f3eb 0%, var(--rf-bg) 100%);
+}
+
+.rfPage {
+  min-height: 100%;
+  padding: 16px;
+}
+
+.rfToolbar,
+.rfCanvas,
+.rfInspector {
+  background: var(--rf-panel);
+  border: 1px solid rgba(217, 204, 187, 0.92);
+  border-radius: 24px;
+  box-shadow: var(--rf-shadow);
+  backdrop-filter: blur(10px);
+}
+
+.rfToolbar {
+  min-height: 76px;
+  padding: 14px 18px;
+  display: grid;
+  grid-template-columns: minmax(260px, 1fr) auto auto;
+  gap: 16px;
+  align-items: center;
+}
+
+.rfToolbar__eyebrow,
+.rfInspector__eyebrow,
+.rfCard__subtitle {
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--rf-muted);
+}
+
+.rfToolbar__brand {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.rfToolbar__mark {
+  width: 16px;
+  height: 16px;
+  border-radius: 5px;
+  background:
+    linear-gradient(135deg, #1f6f8b 0%, #1f6f8b 46%, #b04f35 46%, #b04f35 100%);
+  box-shadow: 0 0 0 4px rgba(31, 111, 139, 0.1);
+}
+
+.rfToolbar__copy {
+  min-width: 0;
+}
+
+.rfToolbar__title {
+  margin-top: 2px;
+  font-size: clamp(1.1rem, 1.3vw, 1.45rem);
+  font-weight: 800;
+  line-height: 1.05;
+  font-family: 'IBM Plex Serif', Georgia, serif;
+}
+
+.rfToolbar__summary,
+.rfInspector p,
+.rfCard__host,
+.rfCard__bullets,
+.rfSection li {
+  color: var(--rf-muted);
+  line-height: 1.5;
+}
+
+.rfToolbar__summary {
+  margin-top: 3px;
+  font-size: 13px;
+}
+
+.rfFilters {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.rfFilter {
+  border: 1px solid rgba(99, 91, 82, 0.15);
+  border-radius: 999px;
+  background: #fffaf2;
+  color: var(--rf-ink);
+  font: inherit;
+  font-weight: 800;
+  padding: 9px 13px;
+  cursor: pointer;
+  transition: 140ms ease;
+}
+
+.rfFilter:hover,
+.rfFilter.isActive {
+  transform: translateY(-1px);
+  box-shadow: 0 12px 24px rgba(27, 23, 20, 0.08);
+}
+
+.rfToolbar__meta {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.rfToolbar__pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 38px;
+  padding: 0 12px;
+  border-radius: 999px;
+  border: 1px solid rgba(99, 91, 82, 0.12);
+  background: rgba(255, 250, 242, 0.92);
+  color: var(--rf-ink);
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.rfToolbar__pillIcon {
+  width: 20px;
+  height: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: rgba(27, 23, 20, 0.08);
+  font-size: 11px;
+  font-weight: 900;
+}
+
+.rfLayout {
+  margin-top: 12px;
+  display: grid;
+  grid-template-columns: minmax(0, 1.3fr) 330px;
+  gap: 18px;
+  align-items: stretch;
+}
+
+.rfCanvas {
+  height: calc(100vh - 126px);
+  min-height: 760px;
+  overflow: hidden;
+}
+
+.rfInspector {
+  padding: 22px;
+}
+
+.rfInspector h2 {
+  margin: 10px 0 8px;
+  font-size: 1.8rem;
+  line-height: 1.05;
+  font-family: 'IBM Plex Serif', Georgia, serif;
+}
+
+.rfInspector__host {
+  font-weight: 700;
+}
+
+.rfSection {
+  margin-top: 18px;
+  padding-top: 18px;
+  border-top: 1px solid rgba(99, 91, 82, 0.12);
+}
+
+.rfSection h3 {
+  margin: 0 0 8px;
+  font-size: 0.98rem;
+}
+
+.rfSection ul {
+  margin: 0;
+  padding-left: 18px;
+}
+
+.rfSection li {
+  margin: 6px 0;
+}
+
+.rfRouteList {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 10px;
+}
+
+.rfRouteItem {
+  padding: 10px 12px;
+  border-radius: 14px;
+  border: 1px solid rgba(99, 91, 82, 0.12);
+  background: rgba(255, 252, 246, 0.84);
+}
+
+.rfRouteItem__head {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+  font-size: 13px;
+}
+
+.rfRouteItem__meta {
+  margin-top: 6px;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--rf-ink);
+}
+
+.rfRouteItem__desc {
+  margin-top: 4px;
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--rf-muted);
+}
+
+.rfRouteBadge {
+  display: inline-flex;
+  align-items: center;
+  min-height: 20px;
+  padding: 0 7px;
+  border-radius: 999px;
+  font-size: 10px;
+  font-weight: 900;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.rfRouteBadge.is-in {
+  background: rgba(75, 85, 99, 0.12);
+  color: #3f4854;
+}
+
+.rfRouteBadge.is-out {
+  background: rgba(20, 114, 109, 0.14);
+  color: #126863;
+}
+
+.rfRouteBadge.is-path-read {
+  background: rgba(31, 111, 139, 0.12);
+  color: #1f6f8b;
+}
+
+.rfRouteBadge.is-path-live {
+  background: rgba(176, 79, 53, 0.12);
+  color: #a04a33;
+}
+
+.rfRouteBadge.is-path-write {
+  background: rgba(122, 98, 19, 0.14);
+  color: #7a6213;
+}
+
+.rfRouteBadge.is-path-control {
+  background: rgba(75, 85, 99, 0.12);
+  color: #4b5563;
+}
+
+.rfLegend {
+  background: rgba(255, 252, 246, 0.9);
+  border: 1px solid rgba(99, 91, 82, 0.12);
+  border-radius: 16px;
+  padding: 12px 14px;
+  box-shadow: 0 12px 28px rgba(27, 23, 20, 0.08);
+}
+
+.rfLegend__title {
+  margin-bottom: 8px;
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--rf-muted);
+}
+
+.rfLegend__row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 6px;
+  font-size: 13px;
+  color: var(--rf-ink);
+}
+
+.rfLegend__row span {
+  width: 12px;
+  height: 12px;
+  border-radius: 999px;
+  flex: 0 0 12px;
+}
+
+.rfCard {
+  width: 248px;
+  border: 1px solid rgba(99, 91, 82, 0.14);
+  border-left: 6px solid var(--lane-color);
+  border-radius: 18px;
+  background: var(--rf-card);
+  box-shadow: 0 16px 32px rgba(27, 23, 20, 0.08);
+  padding: 12px;
+}
+
+.rfCard.isSelected {
+  box-shadow: 0 18px 38px rgba(27, 23, 20, 0.16);
+  transform: translateY(-1px);
+}
+
+.rfCard__head {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  align-items: flex-start;
+}
+
+.rfCard__title {
+  margin-top: 4px;
+  font-size: 0.94rem;
+  font-weight: 800;
+  color: var(--rf-ink);
+}
+
+.rfCard__host {
+  margin-top: 8px;
+  font-size: 12px;
+}
+
+.rfCard__bullets {
+  margin: 10px 0 0;
+  padding-left: 18px;
+  font-size: 12px;
+}
+
+.rfCard__bullets li {
+  margin: 5px 0;
+}
+
+.rfStatus {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 999px;
+  padding: 5px 8px;
+  font-size: 11px;
+  font-weight: 800;
+  white-space: nowrap;
+}
+
+.rfStatus.isOk {
+  background: rgba(30, 107, 67, 0.11);
+  color: #185f39;
+}
+
+.rfStatus.isWarn {
+  background: rgba(176, 79, 53, 0.11);
+  color: #8b3d24;
+}
+
+.rfHandle {
+  width: 10px;
+  height: 10px;
+  background: var(--lane-color);
+  border: 2px solid #fff;
+}
+
+.rfHandle.isRouteHandle {
+  width: 12px;
+  height: 12px;
+  border: 2px solid rgba(255, 253, 249, 0.98);
+  box-shadow: 0 0 0 2px rgba(27, 23, 20, 0.08);
+}
+
+.rfZone {
+  width: 100%;
+  height: 100%;
+  border-radius: 26px;
+  border: 1px solid rgba(110, 101, 91, 0.14);
+  padding: 12px 14px;
+}
+
+.rfZone__title {
+  display: inline-flex;
+  align-items: center;
+  min-height: 28px;
+  padding: 0 10px;
+  border-radius: 999px;
+  background: rgba(255, 251, 244, 0.96);
+  box-shadow: 0 6px 16px rgba(27, 23, 20, 0.06);
+  font-size: 0.96rem;
+  font-weight: 900;
+  color: var(--rf-ink);
+  font-family: 'IBM Plex Serif', Georgia, serif;
+}
+
+.rfZone__subtitle {
+  margin-top: 6px;
+  max-width: 250px;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--rf-muted);
+  line-height: 1.35;
+}
+
+.rfZone.is-host {
+  background:
+    linear-gradient(180deg, rgba(255, 253, 249, 0.92), rgba(244, 236, 225, 0.66));
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
+}
+
+.rfZone.is-namespace {
+  background:
+    linear-gradient(180deg, rgba(255, 251, 246, 0.78), rgba(236, 228, 214, 0.52));
+  border-style: dashed;
+  border-color: rgba(98, 91, 82, 0.22);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
+}
+
+.rfZone.is-subzone {
+  background:
+    linear-gradient(180deg, rgba(255, 254, 250, 0.72), rgba(248, 242, 233, 0.46));
+  border-color: rgba(98, 91, 82, 0.12);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
+}
+
+.react-flow__renderer {
+  background:
+    linear-gradient(rgba(225, 214, 198, 0.22) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(225, 214, 198, 0.22) 1px, transparent 1px),
+    linear-gradient(180deg, #fffdf8 0%, #faf4ea 100%);
+  background-size: 26px 26px, 26px 26px, 100% 100%;
+}
+
+.react-flow__nodes {
+  z-index: 10;
+}
+
+.react-flow__edges,
+.react-flow__edgelabel-renderer {
+  z-index: 30 !important;
+}
+
+.react-flow__attribution {
+  display: none;
+}
+
+.react-flow__controls,
+.react-flow__minimap {
+  border: 1px solid rgba(99, 91, 82, 0.14);
+  border-radius: 14px;
+  overflow: hidden;
+  box-shadow: 0 12px 24px rgba(27, 23, 20, 0.08);
+}
+
+.react-flow__controls button {
+  background: rgba(255, 252, 246, 0.92);
+  color: var(--rf-ink);
+  border-bottom-color: rgba(99, 91, 82, 0.12);
+}
+
+.react-flow__edge-text {
+  font-weight: 700;
+}
+
+.rfPage.isUltraWide .rfLayout {
+  grid-template-columns: minmax(0, 1.4fr) 300px;
+}
+
+.rfPage.isUltraWide .rfCanvas {
+  height: calc(100vh - 118px);
+  min-height: 820px;
+}
+
+code {
+  font-family: 'IBM Plex Mono', monospace;
+  background: rgba(27, 23, 20, 0.05);
+  padding: 2px 6px;
+  border-radius: 6px;
+}
+
+@media (max-width: 1180px) {
+  .rfPage {
+    padding: 14px;
+  }
+
+  .rfToolbar {
+    grid-template-columns: 1fr;
+    align-items: stretch;
+  }
+
+  .rfToolbar__meta {
+    justify-content: flex-start;
+    flex-wrap: wrap;
+  }
+
+  .rfLayout {
+    grid-template-columns: 1fr;
+  }
+
+  .rfCanvas {
+    height: 72vh;
+    min-height: 620px;
+  }
+}
--- a/apps/visualizer/src/diagram/TradeSystemFlowPage.tsx
+++ b/apps/visualizer/src/diagram/TradeSystemFlowPage.tsx
--- a/apps/visualizer/vite.config.ts
+++ b/apps/visualizer/vite.config.ts
@@ -1,7 +1,7 @@
 import fs from 'node:fs';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
-import { defineConfig } from 'vite';
+import { defineConfig, loadEnv } from 'vite';
 import react from '@vitejs/plugin-react';

 const DIR = path.dirname(fileURLToPath(import.meta.url));
@@ -14,8 +14,8 @@ function stripTrailingSlashes(p: string): string {
  return out || '/';
 }

-function readApiReadToken(): string | undefined {
-  if (process.env.API_READ_TOKEN) return process.env.API_READ_TOKEN;
+function readApiReadToken(env: Record<string, string | undefined>): string | undefined {
+  if (env.API_READ_TOKEN) return env.API_READ_TOKEN;
  const p = path.join(ROOT, 'tokens', 'read.json');
  if (!fs.existsSync(p)) return undefined;
  try {
@@ -38,11 +38,11 @@ function parseBasicAuth(value: string | undefined): BasicAuth | undefined {
  return { username, password };
 }

-function readProxyBasicAuth(): BasicAuth | undefined {
-  const fromEnv = parseBasicAuth(process.env.API_PROXY_BASIC_AUTH);
+function readProxyBasicAuth(env: Record<string, string | undefined>): BasicAuth | undefined {
+  const fromEnv = parseBasicAuth(env.API_PROXY_BASIC_AUTH);
  if (fromEnv) return fromEnv;

-  const fileRaw = String(process.env.API_PROXY_BASIC_AUTH_FILE || '').trim();
+  const fileRaw = String(env.API_PROXY_BASIC_AUTH_FILE || '').trim();
  if (!fileRaw) return undefined;

  const p = path.isAbsolute(fileRaw) ? fileRaw : path.join(ROOT, fileRaw);
@@ -59,10 +59,6 @@ function readProxyBasicAuth(): BasicAuth | undefined {
  }
 }

-const apiReadToken = readApiReadToken();
-const proxyBasicAuth = readProxyBasicAuth();
-const apiProxyTarget = process.env.API_PROXY_TARGET || 'http://localhost:8787';
-
 function parseUrl(v: string): URL | undefined {
  try {
    return new URL(v);
@@ -71,10 +67,6 @@ function parseUrl(v: string): URL | undefined {
  }
 }

-const apiProxyTargetUrl = parseUrl(apiProxyTarget);
-const apiProxyTargetPath = stripTrailingSlashes(apiProxyTargetUrl?.pathname || '/');
-const apiProxyTargetEndsWithApi = apiProxyTargetPath.endsWith('/api');
-
 function inferUiProxyTarget(apiTarget: string): string | undefined {
  try {
    const u = new URL(apiTarget);
@@ -91,15 +83,6 @@ function inferUiProxyTarget(apiTarget: string): string | undefined {
  }
 }

-const uiProxyTarget =
-  process.env.FRONTEND_PROXY_TARGET ||
-  process.env.UI_PROXY_TARGET ||
-  process.env.AUTH_PROXY_TARGET ||
-  inferUiProxyTarget(apiProxyTarget) ||
-  (apiProxyTargetUrl && apiProxyTargetPath === '/' ? stripTrailingSlashes(apiProxyTargetUrl.toString()) : undefined);
-
-const graphqlProxyTarget = process.env.GRAPHQL_PROXY_TARGET || process.env.HASURA_PROXY_TARGET || uiProxyTarget;
-
 function applyProxyBasicAuth(proxyReq: any) {
  if (!proxyBasicAuth) return false;
  const b64 = Buffer.from(`${proxyBasicAuth.username}:${proxyBasicAuth.password}`, 'utf8').toString('base64');
@@ -119,60 +102,88 @@ function rewriteSetCookieForLocalDevHttp(proxyRes: any) {
  proxyRes.headers['set-cookie'] = Array.isArray(v) ? v.map(rewrite) : rewrite(String(v));
 }

-const proxy: Record<string, any> = {
-  '/api': {
-    target: apiProxyTarget,
-    changeOrigin: true,
-    rewrite: (p: string) => (apiProxyTargetEndsWithApi ? p.replace(/^\/api/, '') : p),
-    configure: (p: any) => {
-      p.on('proxyReq', (proxyReq: any) => {
-        if (applyProxyBasicAuth(proxyReq)) return;
-        if (apiReadToken) proxyReq.setHeader('Authorization', `Bearer ${apiReadToken}`);
-      });
+export default defineConfig(({ mode }) => {
+  const env = { ...process.env, ...loadEnv(mode, DIR, '') } as Record<string, string | undefined>;
+  const apiReadToken = readApiReadToken(env);
+  const proxyBasicAuth = readProxyBasicAuth(env);
+  const apiProxyTarget = env.API_PROXY_TARGET || 'http://localhost:8787';
+  const apiProxyTargetUrl = parseUrl(apiProxyTarget);
+  const apiProxyTargetPath = stripTrailingSlashes(apiProxyTargetUrl?.pathname || '/');
+  const apiProxyTargetEndsWithApi = apiProxyTargetPath.endsWith('/api');
+  const uiProxyTarget =
+    env.FRONTEND_PROXY_TARGET ||
+    env.UI_PROXY_TARGET ||
+    env.AUTH_PROXY_TARGET ||
+    inferUiProxyTarget(apiProxyTarget) ||
+    (apiProxyTargetUrl && apiProxyTargetPath === '/'
+      ? stripTrailingSlashes(apiProxyTargetUrl.toString())
+      : undefined);
+  const graphqlProxyTarget = env.GRAPHQL_PROXY_TARGET || env.HASURA_PROXY_TARGET || uiProxyTarget;
+  const portRaw = env.VITE_DEV_PORT || env.DEV_PORT || '5173';
+  const port = Number.parseInt(String(portRaw), 10);
+
+  function applyProxyBasicAuth(proxyReq: any) {
+    if (!proxyBasicAuth) return false;
+    const b64 = Buffer.from(`${proxyBasicAuth.username}:${proxyBasicAuth.password}`, 'utf8').toString('base64');
+    proxyReq.setHeader('Authorization', `Basic ${b64}`);
+    return true;
+  }
+
+  const proxy: Record<string, any> = {
+    '/api': {
+      target: apiProxyTarget,
+      changeOrigin: true,
+      rewrite: (p: string) => (apiProxyTargetEndsWithApi ? p.replace(/^\/api/, '') : p),
+      configure: (p: any) => {
+        p.on('proxyReq', (proxyReq: any) => {
+          if (applyProxyBasicAuth(proxyReq)) return;
+          if (apiReadToken) proxyReq.setHeader('Authorization', `Bearer ${apiReadToken}`);
+        });
+      },
    },
-  },
-};
+  };

-if (graphqlProxyTarget) {
-  for (const prefix of ['/graphql', '/graphql-ws']) {
-    proxy[prefix] = {
-      target: graphqlProxyTarget,
-      changeOrigin: true,
-      ws: true,
-      configure: (p: any) => {
-        p.on('proxyReq', (proxyReq: any) => {
-          applyProxyBasicAuth(proxyReq);
-        });
-        p.on('proxyReqWs', (proxyReq: any) => {
-          applyProxyBasicAuth(proxyReq);
-        });
-      },
-    };
+  if (graphqlProxyTarget) {
+    for (const prefix of ['/graphql', '/graphql-ws']) {
+      proxy[prefix] = {
+        target: graphqlProxyTarget,
+        changeOrigin: true,
+        ws: true,
+        configure: (p: any) => {
+          p.on('proxyReq', (proxyReq: any) => {
+            applyProxyBasicAuth(proxyReq);
+          });
+          p.on('proxyReqWs', (proxyReq: any) => {
+            applyProxyBasicAuth(proxyReq);
+          });
+        },
+      };
+    }
  }
-}

-if (uiProxyTarget) {
-  for (const prefix of ['/whoami', '/auth', '/logout']) {
-    proxy[prefix] = {
-      target: uiProxyTarget,
-      changeOrigin: true,
-      configure: (p: any) => {
-        p.on('proxyReq', (proxyReq: any) => {
-          applyProxyBasicAuth(proxyReq);
-        });
-        p.on('proxyRes', (proxyRes: any) => {
-          rewriteSetCookieForLocalDevHttp(proxyRes);
-        });
-      },
-    };
+  if (uiProxyTarget) {
+    for (const prefix of ['/whoami', '/auth', '/logout']) {
+      proxy[prefix] = {
+        target: uiProxyTarget,
+        changeOrigin: true,
+        configure: (p: any) => {
+          p.on('proxyReq', (proxyReq: any) => {
+            applyProxyBasicAuth(proxyReq);
+          });
+          p.on('proxyRes', (proxyRes: any) => {
+            rewriteSetCookieForLocalDevHttp(proxyRes);
+          });
+        },
+      };
+    }
  }
-}

-export default defineConfig({
-  plugins: [react()],
-  server: {
-    port: 5173,
-    strictPort: true,
-    proxy,
-  },
+  return {
+    plugins: [react()],
+    server: {
+      port: Number.isInteger(port) && port > 0 ? port : 5173,
+      strictPort: true,
+      proxy,
+    },
+  };
 });