// SixTechniquesHub.jsx
// Hub-and-spoke node chart for the "One layer, six techniques" section.
// - Router node at center; 6 technique nodes radiating around it.
// - Loose horizontal scroll-snap on a strip below (mobile / secondary).
// - Hover a node → connection line animates (oscillating/wavy), node pops forward.
// - Arrow keys cycle the focused technique when this section is in view.
// - Selecting a technique reveals its detail panel under the hub.
const { useState: useSTH, useEffect: useEfSTH, useRef: useRfSTH, useMemo: useMmSTH } = React;
const TECHNIQUES = [
{
n: '01',
title: 'Inter-agent message compression',
short: 'Compress',
body: "Each agent's output is compressed before being passed downstream. Redundant sentences removed, task-relevant structure preserved. Compression ratio tunable per pipeline.",
tag: 'Per-hop',
demo: 'how-it-works.html#compression',
},
{
n: '02',
title: 'Shared memory with content-addressed references',
short: 'Reference',
body: 'Agent outputs are stored once in session-scoped memory. Downstream agents receive stable references — IDs, not re-serialized content.',
tag: 'Session-scoped',
},
{
n: '03',
title: 'Delta mode',
short: 'Delta',
body: 'After the first full context pass, subsequent agent calls receive only the changes to shared state. Analogous to how version control stopped sending full file copies.',
tag: 'State-diff',
},
{
n: '04',
title: 'Smart context pruning',
short: 'Prune',
body: 'A relevance pass drops sections of inter-agent context unlikely to be used by the next agent, based on task class and agent role.',
tag: 'Role-aware',
},
{
n: '05',
title: 'Compact message protocol',
short: 'Protocol',
body: 'A structured schema replaces free-form prose for inter-agent messages, reducing syntactic overhead by 20–40% in current tests.',
tag: 'Schema',
},
{
n: '06',
title: 'Task-aware routing',
short: 'Route',
body: 'Determines which of the above to apply per call based on task class and pipeline shape. Not every call needs every optimization.',
tag: 'Orchestrator',
},
];
// Deterministic positions around the hub. We lay out on an ellipse (wider than tall)
// so the graph reads horizontally. Angles are picked to avoid label collisions.
// 0° = right; we go counter-clockwise visually (but in CSS y increases downward so
// we negate sin).
const LAYOUT = [
{ ang: -150 }, // 1 — upper-left
{ ang: -90 }, // 2 — top
{ ang: -30 }, // 3 — upper-right
{ ang: 30 }, // 4 — lower-right
{ ang: 90 }, // 5 — bottom
{ ang: 150 }, // 6 — lower-left
];
// Hub layout dimensions (inside the SVG + overlay). We use an SVG for connection
// lines and absolute-positioned divs for the node cards, sharing a coordinate system.
const HUB = {
w: 1040,
h: 620,
cx: 520,
cy: 310,
rx: 340, // horizontal radius (leaves room for 220px-wide cards at each end)
ry: 210, // vertical radius
};
function polarToXY(angDeg) {
const a = (angDeg * Math.PI) / 180;
return {
x: HUB.cx + HUB.rx * Math.cos(a),
y: HUB.cy + HUB.ry * Math.sin(a),
};
}
// Build a wavy quadratic-bezier path from (x1,y1) → (x2,y2) with a given amplitude.
// We use TWO control points offset perpendicular to the line by +amp and -amp to get
// a shallow S-curve feel, but for performance we just use a single quadratic.
function wavyPath(x1, y1, x2, y2, amp = 0, phase = 0) {
const mx = (x1 + x2) / 2;
const my = (y1 + y2) / 2;
// Perpendicular offset
const dx = x2 - x1, dy = y2 - y1;
const len = Math.sqrt(dx * dx + dy * dy) || 1;
const nx = -dy / len, ny = dx / len;
const offset = amp * Math.sin(phase);
const cx = mx + nx * offset;
const cy = my + ny * offset;
return `M ${x1.toFixed(1)} ${y1.toFixed(1)} Q ${cx.toFixed(1)} ${cy.toFixed(1)} ${x2.toFixed(1)} ${y2.toFixed(1)}`;
}
function HubNodeCard({ tech, pos, isActive, isDim, onEnter, onLeave, onClick }) {
return (
);
}
function HubCenter({ isHovered }) {
return (
The Router
Task-aware routing
decides which to apply per call
);
}
function SixTechniquesHub() {
const [hoverIdx, setHoverIdx] = useSTH(null); // idx user is hovering (transient)
const [selectedIdx, setSelectedIdx] = useSTH(0); // idx user has locked in (default: first)
const [phase, setPhase] = useSTH(0); // animation clock for wavy lines
const [isVisible, setIsVisible] = useSTH(false);
const rootRef = useRfSTH(null);
const stripRef = useRfSTH(null);
// Position map
const positions = useMmSTH(() =>
LAYOUT.map((lay, i) => ({ ...polarToXY(lay.ang), ang: lay.ang, idx: i })),
[]);
// Oscillating wave clock — only ticks while something is hovered
useEfSTH(() => {
if (hoverIdx == null) return;
let raf, start = performance.now();
function tick(t) {
setPhase(((t - start) / 520)); // ~0.52s period per radian stride
raf = requestAnimationFrame(tick);
}
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [hoverIdx]);
// Visibility gating for arrow keys
useEfSTH(() => {
if (!rootRef.current) return;
const obs = new IntersectionObserver((entries) => {
entries.forEach(e => setIsVisible(e.isIntersecting && e.intersectionRatio > 0.25));
}, { threshold: [0, 0.25, 0.5] });
obs.observe(rootRef.current);
return () => obs.disconnect();
}, []);
// Arrow-key navigation
useEfSTH(() => {
if (!isVisible) return;
function onKey(ev) {
const t = ev.target;
if (t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || t.isContentEditable)) return;
if (ev.key === 'ArrowRight') {
ev.preventDefault();
setSelectedIdx(i => (i + 1) % TECHNIQUES.length);
} else if (ev.key === 'ArrowLeft') {
ev.preventDefault();
setSelectedIdx(i => (i - 1 + TECHNIQUES.length) % TECHNIQUES.length);
}
}
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [isVisible]);
// Keep strip scrolled to the selected technique (loose snap)
useEfSTH(() => {
if (!stripRef.current) return;
const child = stripRef.current.children[selectedIdx];
if (child && child.scrollIntoView) {
child.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
}
}, [selectedIdx]);
const activeIdx = hoverIdx != null ? hoverIdx : selectedIdx;
const active = TECHNIQUES[activeIdx];
return (