Make architecture connectors responsive

index.html

@@ -392,14 +392,14 @@
         </div>
 
         <div class="tr-architecture" role="img" aria-label="The contextual hidden state enters both a shared SwiGLU branch and two selected residual experts. Token identity controls only the fixed route table.">
-          <svg class="tr-lines" viewBox="0 0 1000 500" preserveAspectRatio="none" aria-hidden="true">
-            <path d="M330 72 C280 120 210 140 205 190" fill="none" stroke="currentColor" stroke-width="1.5"/>
-            <path class="active" d="M330 72 C410 115 550 135 580 190" fill="none" stroke="currentColor"/>
-            <path class="active" d="M800 72 C850 110 860 135 850 190" fill="none" stroke="currentColor"/>
-            <path class="active" d="M840 255 C790 270 730 250 690 225" fill="none" stroke="currentColor" stroke-dasharray="7 7"/>
-            <path d="M220 310 C300 360 405 400 485 415" fill="none" stroke="currentColor" stroke-width="1.5"/>
-            <path class="active" d="M630 310 C610 350 560 395 520 415" fill="none" stroke="currentColor"/>
-            <path class="active" d="M535 420 C630 430 720 430 805 420" fill="none" stroke="currentColor"/>
+          <svg class="tr-lines" aria-hidden="true">
+            <path data-from=".tr-context" data-from-anchor="bottom" data-to=".tr-shared" data-to-anchor="top" fill="none" stroke="currentColor" stroke-width="1.5"/>
+            <path class="active" data-from=".tr-context" data-from-anchor="bottom" data-to=".tr-experts" data-to-anchor="top" fill="none" stroke="currentColor"/>
+            <path class="active" data-from=".tr-token" data-from-anchor="bottom" data-to=".tr-table" data-to-anchor="top" fill="none" stroke="currentColor"/>
+            <path class="active" data-from=".tr-table" data-from-anchor="left" data-to=".tr-experts" data-to-anchor="right" fill="none" stroke="currentColor" stroke-dasharray="7 7"/>
+            <path data-from=".tr-shared" data-from-anchor="bottom" data-to=".tr-sum" data-to-anchor="left" fill="none" stroke="currentColor" stroke-width="1.5"/>
+            <path class="active" data-from=".tr-experts" data-from-anchor="bottom" data-to=".tr-sum" data-to-anchor="top" fill="none" stroke="currentColor"/>
+            <path class="active" data-from=".tr-sum" data-from-anchor="right" data-to=".tr-output" data-to-anchor="left" fill="none" stroke="currentColor"/>
           </svg>
 
           <div class="tr-node tr-context">
@@ -585,13 +585,64 @@
 
       const tabs = [...root.querySelectorAll(".tr-tab")];
       const panels = [...root.querySelectorAll(".tr-view")];
+      const architecture = root.querySelector(".tr-architecture");
+      const lineLayer = root.querySelector(".tr-lines");
+
+      const anchorPoint = (element, anchor, bounds) => {
+        const rect = element.getBoundingClientRect();
+        const points = {
+          top: { x: rect.left + rect.width / 2, y: rect.top },
+          right: { x: rect.right, y: rect.top + rect.height / 2 },
+          bottom: { x: rect.left + rect.width / 2, y: rect.bottom },
+          left: { x: rect.left, y: rect.top + rect.height / 2 }
+        };
+        const point = points[anchor] || points.bottom;
+        return { x: point.x - bounds.left, y: point.y - bounds.top };
+      };
+
+      const updateConnectorPaths = () => {
+        if (!architecture || !lineLayer || !architecture.offsetParent) return;
+        const bounds = architecture.getBoundingClientRect();
+        if (!bounds.width || !bounds.height) return;
+        lineLayer.setAttribute("viewBox", `0 0 ${bounds.width} ${bounds.height}`);
+        lineLayer.querySelectorAll("[data-from][data-to]").forEach((path) => {
+          const from = architecture.querySelector(path.dataset.from);
+          const to = architecture.querySelector(path.dataset.to);
+          if (!from || !to) return;
+          const start = anchorPoint(from, path.dataset.fromAnchor, bounds);
+          const end = anchorPoint(to, path.dataset.toAnchor, bounds);
+          const dx = end.x - start.x;
+          const dy = end.y - start.y;
+          let d;
+          if (Math.abs(dx) > Math.abs(dy)) {
+            const direction = Math.sign(dx) || 1;
+            const bend = Math.max(32, Math.abs(dx) * 0.42);
+            d = `M ${start.x} ${start.y} C ${start.x + direction * bend} ${start.y}, ${end.x - direction * bend} ${end.y}, ${end.x} ${end.y}`;
+          } else {
+            const direction = Math.sign(dy) || 1;
+            const bend = Math.max(32, Math.abs(dy) * 0.42);
+            d = `M ${start.x} ${start.y} C ${start.x} ${start.y + direction * bend}, ${end.x} ${end.y - direction * bend}, ${end.x} ${end.y}`;
+          }
+          path.setAttribute("d", d);
+        });
+      };
+
       tabs.forEach((tab) => {
         tab.addEventListener("click", () => {
           tabs.forEach((item) => item.setAttribute("aria-selected", String(item === tab)));
           panels.forEach((panel) => panel.classList.toggle("is-active", panel.dataset.panel === tab.dataset.view));
+          if (tab.dataset.view === "overview") requestAnimationFrame(updateConnectorPaths);
         });
       });
 
+      if (architecture && "ResizeObserver" in window) {
+        const connectorResizeObserver = new ResizeObserver(() => requestAnimationFrame(updateConnectorPaths));
+        connectorResizeObserver.observe(architecture);
+      }
+      window.addEventListener("resize", updateConnectorPaths);
+      document.fonts?.ready.then(updateConnectorPaths);
+      requestAnimationFrame(updateConnectorPaths);
+
       const updateArchitecture = (token) => {
         const route = routes[token];
         if (!route) return;