refactor: rebuild fanout mobile view on shared scene, drop bespoke SVG and cost captions

Author: ofriw

website/src/components/VisualElements/SubAgentFanoutDiagram.module.css

@@ -8,28 +8,6 @@
   font-feature-settings: var(--font-mono-features);
 }
 
-.scheduleKey,
-.costSummary {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-1) var(--space-2);
-  margin: 0;
-  color: var(--text-muted);
-  font-family: var(--font-mono-spec);
-  font-size: var(--text-xs);
-  font-weight: 600;
-  line-height: var(--lh-sm);
-}
-
-.scheduleKey strong {
-  color: var(--text-body);
-  letter-spacing: 0.08em;
-}
-
-.costSummary {
-  display: block;
-}
-
 .panels,
 .panel {
   min-width: 0;
@@ -79,12 +57,10 @@
 
 .dispatchPath {
   stroke: var(--visual-indigo);
-  opacity: 0.85;
 }
 
 .returnPath {
   stroke: var(--visual-violet);
-  opacity: 0.85;
 }
 
 /* Paths meet the root-facing side of each robot. Separate elbow columns keep
@@ -273,82 +249,97 @@
   }
 }
 
+.screenReaderSummary {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+/* The mobile form folds desktop's outer rails into one delegate rail. The
+   root window remains the only framed timeline and every path returns to it. */
 .mobileDiagram {
-  width: 100%;
-  height: auto;
-  max-width: 340px;
-  margin-inline: auto;
+  font-feature-settings: var(--font-mono-features);
 }
 
-.mobileRoot rect,
-.mobileAgent rect {
-  stroke-width: var(--diagram-stroke, 2px);
-  vector-effect: non-scaling-stroke;
+.mobileStackClip {
+  position: relative;
+  display: block;
+  height: 560px;
+  min-width: 0;
 }
 
-.mobileRoot rect {
-  fill: var(--surface-raised);
-  stroke: var(--border-emphasis);
+.mobileRootStack {
+  position: absolute;
+  inset: 0 30% 0 0;
+  min-width: 0;
 }
 
-.mobileRoot text,
-.mobileAgent text,
-.mobileStage {
-  font-feature-settings: var(--font-mono-features);
+.mobileDelegateRail,
+.mobileFlowLayer {
+  position: absolute;
+  inset: 0;
 }
 
-.mobileRoot text,
-.mobileAgent > text:first-of-type {
-  fill: var(--text-body);
-  font-family: var(--font-mono-keyword);
-  font-size: 10px;
-  font-weight: 600;
+.mobileDelegateRail {
+  pointer-events: none;
 }
 
-.mobileRoot text:last-of-type,
-.mobileStage {
-  fill: var(--text-muted);
-  font-family: var(--font-mono-spec);
-  font-size: 8px;
-  font-weight: 600;
-  letter-spacing: 0.04em;
+.mobileFlowLayer {
+  z-index: 0;
+  overflow: visible;
 }
 
-.mobileContract {
-  fill: var(--text-muted);
-  font-family: var(--font-mono-spec);
-  font-size: 7px;
+.mobileRailLabel,
+.mobileParallelLabel {
+  position: absolute;
+  z-index: 2;
+  color: var(--text-muted);
+  font-family: var(--font-mono-keyword);
+  font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.04em;
+  line-height: var(--lh-sm);
 }
 
-.mobileAgent rect {
-  fill: var(--visual-bg-cyan);
-  stroke: var(--visual-cyan);
-}
-
-.mobileTask {
-  fill: var(--text-body);
-  font-family: var(--font-mono-ai);
-  font-size: 10px;
-  font-weight: 500;
+.mobileRailLabel {
+  top: 0;
+  left: 72%;
 }
 
-.mobileStage {
-  font-size: 9px;
+.mobileParallelLabel {
+  left: 72%;
+  width: 26%;
+  text-align: center;
+  white-space: nowrap;
 }
 
-.screenReaderSummary {
+.mobileWorker {
   position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
+  z-index: 1;
+  display: flex;
+  flex-direction: column-reverse;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  width: 24%;
+  color: var(--text-body);
+  font-family: var(--font-mono-ai);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: var(--lh-sm);
   white-space: nowrap;
+  transform: translate(-50%, -50%);
+}
+
+.mobileWorker svg {
+  flex: 0 0 32px;
+  width: 32px;
+  height: 32px;
 }
 
-/* The compact composition preserves every root-to-agent request and return
-   when the desktop rails no longer have room for legible labels. */
 @media (prefers-reduced-motion: reduce) {
   .container * {
     transition: none !important;