// components/landing-orb.jsx
// ─────────────────────────────────────────────────────────────
// LandingOrb — the signature "reply just landed" moment.
//
// The central Mahana logo sits still. Model marks orbit around it while
// the council is thinking, then sling-shot into the logo the instant the
// reply lands — collapsing a cloud of N model contributions into one
// unified Mahana voice. This is the visual thesis of the product.
//
// Lifted from mastermind-v2/components/landing-orb.jsx with these
// improvements for the playground + reuse contexts:
// - `confidences` now renders below the orb as a compact legend
// (the v2 component accepted the prop but silently dropped it)
// - Extracted inner `OrbStage` so the orb can be used headless
// (without the column wrapper) — e.g. inline in a message row.
// - `ConfidenceRow` exported separately for callers that want the
// legend without the orb (post-reply verdict bar, etc.).
// - Respect prefers-reduced-motion: collapse instantly, no spin.
// - `logoSrc` default points at the project's copy of mahana-logo.png.
// ─────────────────────────────────────────────────────────────
/* global React, MODELS_BY_ID */
const { useEffect: _loUseEffect, useState: _loUseState, useRef: _loUseRef } = React;
function _prefersReducedMotion() {
if (typeof window === 'undefined' || !window.matchMedia) return false;
return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
}
// ─────────────────────────────────────────────────────────────
// OrbStage — the animated orb itself, no column, no legend.
// Use this when embedding inline (e.g. next to a message avatar).
// ─────────────────────────────────────────────────────────────
function OrbStage({
voices,
size = 96,
state = 'landed', // 'thinking' | 'landing' | 'landed'
logoSrc = '../assets/mahana-logo.png',
}) {
if (!voices || voices.length === 0) return null;
const N = voices.length;
const radius = size * 0.45;
const reduce = _prefersReducedMotion();
// progress: 0 = orbiting far out, 1 = collapsed into the center
const [progress, setProgress] = _loUseState(state === 'thinking' ? 0 : 1);
const [spin, setSpin] = _loUseState(0);
const rafRef = _loUseRef();
const target = state === 'thinking' ? 0 : 1;
// Animate to target
_loUseEffect(() => {
if (reduce) { setProgress(target); return; }
let start = null;
const from = progress;
const delta = target - from;
const dur = state === 'landing' ? 1200 : 400;
function tick(t) {
if (start == null) start = t;
const e = Math.min(1, (t - start) / dur);
const eased = 1 - Math.pow(1 - e, 3); // easeOutCubic
setProgress(from + delta * eased);
if (e < 1) rafRef.current = requestAnimationFrame(tick);
}
rafRef.current = requestAnimationFrame(tick);
return () => cancelAnimationFrame(rafRef.current);
// eslint-disable-next-line
}, [target]);
// Slow spin while thinking
_loUseEffect(() => {
if (state !== 'thinking' || reduce) return;
let raf;
let last = performance.now();
function loop(t) {
const dt = t - last; last = t;
setSpin(s => (s + dt * 0.05) % 360);
raf = requestAnimationFrame(loop);
}
raf = requestAnimationFrame(loop);
return () => cancelAnimationFrame(raf);
}, [state, reduce]);
const haloColors = voices.map(v => MODELS_BY_ID[v.modelId]?.color || '#999').join(', ');
const firstColor = MODELS_BY_ID[voices[0].modelId]?.color || '#999';
return (
{/* conic halo — lit while thinking, fades in landing, dim while landed */}
{/* central Mahana logo */}
{/* glass highlight */}
{/* orbiting → landing model marks */}
{voices.map((v, i) => {
const m = MODELS_BY_ID[v.modelId];
if (!m) return null;
const baseAngle = (360 / N) * i - 90;
const angle = baseAngle + (state === 'thinking' ? spin : 0);
// r interpolates from orbit → center of logo
const r = radius * (1 - progress) + (size * 0.32) * progress;
const x = Math.cos(angle * Math.PI / 180) * r;
const y = Math.sin(angle * Math.PI / 180) * r;
const chipSize = 26 * (1 - progress * 0.55);
// fade into logo once landed
const opacity = progress < 0.6 ? 1 : Math.max(0, 1 - (progress - 0.6) * 2.6);
return (
);
})}
);
}
// ─────────────────────────────────────────────────────────────
// ConfidenceRow — model pill • percent, separated by middots.
// Used as the default legend below the orb, but also reusable on
// its own (e.g. inline in a VerdictBar).
// ─────────────────────────────────────────────────────────────
function ConfidenceRow({ confidences, compact = false }) {
if (!confidences || confidences.length === 0) return null;
return (
{confidences.map((c, i) => {
const m = MODELS_BY_ID[c.modelId];
if (!m) return null;
return (
{m.name}{c.pct}%
);
})}
);
}
// ─────────────────────────────────────────────────────────────
// LandingOrb — the full composition: orb + confidence legend.
// This is the default export for most callers.
// ─────────────────────────────────────────────────────────────
function LandingOrb({
voices,
size = 96,
state = 'landed',
confidences,
logoSrc,
showLegend = true,
}) {
return (
{showLegend && confidences && }
);
}
// ─────────────────────────────────────────────────────────────
// LandingOrbDemo — a toggleable demo (Replay button on hover).
// Used inline in a chat message to let the user watch the landing
// animation again. This is what the canonical app renders.
// ─────────────────────────────────────────────────────────────
function LandingOrbDemo({ voices, confidences, size = 96, autoPlay = false }) {
const [phase, setPhase] = _loUseState(autoPlay ? 'thinking' : 'landed');
const [key, setKey] = _loUseState(0);
const [hover, setHover] = _loUseState(false);
_loUseEffect(() => {
if (!autoPlay) return;
const t1 = setTimeout(() => setPhase('landing'), 900);
const t2 = setTimeout(() => setPhase('landed'), 2200);
return () => { clearTimeout(t1); clearTimeout(t2); };
}, [key, autoPlay]);
const replay = () => {
setKey(k => k + 1);
setPhase('thinking');
setTimeout(() => setPhase('landing'), 900);
setTimeout(() => setPhase('landed'), 2200);
};
return (