/* global React */
const { useState, useEffect, useRef, createContext, useContext } = React;
// ─────────────────────────────────────────────────────────────────────────────
// I18n — one context to pass the localized data tree down.
// ─────────────────────────────────────────────────────────────────────────────
const RollI18n = createContext(null);
const useT = () => useContext(RollI18n);
// ─────────────────────────────────────────────────────────────────────────────
// SectionLabel — small mono tag that opens every section
// ─────────────────────────────────────────────────────────────────────────────
function SectionLabel({ children, n }) {
return (
{n && {n}}
{children}
);
}
// ─────────────────────────────────────────────────────────────────────────────
// Badge — pill, outline preferred. Label localized via i18n context.
// ─────────────────────────────────────────────────────────────────────────────
function Badge({ kind }) {
const t = useT();
const label = t?.UI?.badgeLabels?.[kind] ?? kind;
return {label};
}
// ─────────────────────────────────────────────────────────────────────────────
// Logo — small geometric mark
// ─────────────────────────────────────────────────────────────────────────────
function Logo({ size = 22 }) {
return (
);
}
// ─────────────────────────────────────────────────────────────────────────────
// Icons — minimal stroke icons (no emoji)
// ─────────────────────────────────────────────────────────────────────────────
function Icon({ name, size = 16 }) {
const stroke = "currentColor";
const sw = 1.5;
const p = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke, strokeWidth: sw, strokeLinecap: "round", strokeLinejoin: "round" };
switch (name) {
case "sun": return ();
case "moon": return ();
case "copy": return ();
case "check":return ();
case "arrow":return ();
case "ext": return ();
case "github": return ();
// Layer glyphs
case "human": return ();
case "loop": return ();
case "dream": return ();
// Guide glyphs
case "book": return ();
case "cycle": return ();
case "swap": return ();
case "list": return ();
case "gear": return ();
default: return null;
}
}
// ─────────────────────────────────────────────────────────────────────────────
// ThemeToggle — sun / moon segmented switch (controlled)
// ─────────────────────────────────────────────────────────────────────────────
function ThemeToggle({ theme, onChange }) {
return (
{[{ id: "light", icon: "sun" }, { id: "dark", icon: "moon" }].map((opt) => (
))}
);
}
// ─────────────────────────────────────────────────────────────────────────────
// LangToggle — EN / 中 segmented text switch
// ─────────────────────────────────────────────────────────────────────────────
function LangToggle({ lang, onChange }) {
return (
{[{ id: "EN", label: "EN" }, { id: "ZH", label: "中" }].map((opt) => (
))}
);
}
// ─────────────────────────────────────────────────────────────────────────────
// InstallSnippet — copyable terminal snippet
// ─────────────────────────────────────────────────────────────────────────────
function InstallSnippet({ command }) {
const t = useT();
const labels = t?.UI?.installCopy ?? { idle: "copy", done: "copied" };
const [copied, setCopied] = useState(false);
const onCopy = () => {
navigator.clipboard?.writeText(command).then(() => {
setCopied(true);
setTimeout(() => setCopied(false), 1400);
});
};
return (
);
}
// ─────────────────────────────────────────────────────────────────────────────
// Terminal — dual-frame state machine: Frame A (install) → Transition → Frame B (cycle)
// Falls back to sequential revealer when FRAME_A is not in the i18n data.
// ─────────────────────────────────────────────────────────────────────────────
function parseNdjson(text) {
if (!text) return [];
return text.trim().split('\n').map(line => {
try {
const ev = JSON.parse(line);
const hm = ev.ts ? ev.ts.slice(11, 16) : '';
switch (ev.stage) {
case 'cycle_start': return { kind: 'stamp', time: hm, text: `cycle #${ev.label} — picking story` };
case 'story': return { kind: 'step', arrow: 'story', label: ev.label, text: ev.detail };
case 'build': return { kind: 'step', arrow: 'build', label: ev.label, text: ev.detail, ok: ev.outcome === 'ok' };
case 'peer': return { kind: 'step', arrow: 'peer', label: ev.label, text: ev.detail };
case 'ci': return { kind: 'step', arrow: 'ci', label: ev.label, text: ev.detail, ok: ev.outcome === 'ok' };
case 'pr': return { kind: 'step', arrow: 'pr', label: ev.label, text: ev.detail, ok: ev.outcome === 'ok' };
case 'cycle_end': return { kind: 'stamp', time: hm, text: `cycle #${ev.label} — done · ${ev.detail}`, muted: true };
default: return null;
}
} catch { return null; }
}).filter(Boolean).concat([{ kind: 'cursor' }]);
}
const _CLOCK_TICKS = ['10:23', '10:30', '10:44', '10:55', '11:05'];
const _GHOST_LINES = ['· waiting for next cycle', '· idle until 11:05', '· no stories pending'];
const _REVEAL_DELAY = (line) => !line ? 380 : line.kind === 'blank' ? 120 : line.kind === 'stamp' ? 700 : 380;
function Terminal({ lines, animate = true }) {
const t = useT();
const liveLabel = t?.UI?.terminalLive ?? 'live';
const frameAData = t?.FRAME_A ?? null;
const isDual = !!frameAData && animate;
const noMotion = typeof window !== 'undefined' && window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
// ── Dual-frame state ──────────────────────────────────────────────────────
const [phase, setPhase] = useState('frameA');
const [revealCount, setRevealCount] = useState(0);
const [clockIdx, setClockIdx] = useState(0);
// ── Legacy state ──────────────────────────────────────────────────────────
const [legacyCount, setLegacyCount] = useState(animate ? 0 : (lines?.length ?? 0));
const timerRef = useRef(null);
const frameBRef = useRef(null);
if (isDual && !frameBRef.current) {
frameBRef.current = parseNdjson(window.RollData?.CYCLE_NDJSON ?? '');
}
// ── Dual-frame effect ─────────────────────────────────────────────────────
useEffect(() => {
if (!isDual) return;
clearTimeout(timerRef.current);
const fa = frameAData || [];
const fb = frameBRef.current || [];
if (phase === 'frameA') {
if (revealCount < fa.length) {
const delay = revealCount === 0 ? 500 : _REVEAL_DELAY(fa[revealCount]);
timerRef.current = setTimeout(() => setRevealCount(c => c + 1), delay);
} else {
timerRef.current = setTimeout(() => { setPhase('transition'); setClockIdx(0); }, 800);
}
} else if (phase === 'transition') {
if (noMotion) {
timerRef.current = setTimeout(() => { setPhase('frameB'); setRevealCount(0); }, 50);
} else {
const tick = Math.floor(1200 / _CLOCK_TICKS.length);
if (clockIdx < _CLOCK_TICKS.length - 1) {
timerRef.current = setTimeout(() => setClockIdx(i => i + 1), tick);
} else {
timerRef.current = setTimeout(() => { setPhase('frameB'); setRevealCount(0); }, tick);
}
}
} else if (phase === 'frameB') {
if (revealCount < fb.length) {
timerRef.current = setTimeout(() => setRevealCount(c => c + 1), 180);
} else {
timerRef.current = setTimeout(() => setPhase('hold'), 200);
}
} else if (phase === 'hold') {
timerRef.current = setTimeout(() => { setPhase('frameA'); setRevealCount(0); setClockIdx(0); }, 2000);
}
return () => clearTimeout(timerRef.current);
}, [isDual, phase, revealCount, clockIdx]);
// ── Legacy effect ─────────────────────────────────────────────────────────
useEffect(() => {
if (isDual || !animate) return;
const all = lines || [];
let i = 0;
setLegacyCount(0);
const tick = () => {
i += 1;
setLegacyCount(i);
if (i < all.length) {
timerRef.current = setTimeout(tick, _REVEAL_DELAY(all[i]));
}
};
timerRef.current = setTimeout(tick, 500);
return () => clearTimeout(timerRef.current);
}, [isDual, animate, lines]);
// ── Render ────────────────────────────────────────────────────────────────
let bodyLines = [];
let isTransition = false;
let pulseGreen = false;
let chromeTitle = 'roll-loop-roll · tmux';
if (!isDual) {
bodyLines = (lines || []).slice(0, legacyCount);
pulseGreen = true;
} else if (phase === 'frameA') {
bodyLines = (frameAData || []).slice(0, revealCount);
chromeTitle = 'roll · install';
} else if (phase === 'transition') {
bodyLines = frameAData || [];
isTransition = !noMotion;
chromeTitle = 'roll · idle';
} else {
const fb = frameBRef.current || [];
bodyLines = fb.slice(0, phase === 'hold' ? fb.length : revealCount);
pulseGreen = true;
chromeTitle = 'roll-loop-roll · cycle #047';
}
return (
{chromeTitle}
{liveLabel}
{bodyLines.map((l, i) =>
)}
{isTransition && _GHOST_LINES.map((g, i) => (
{g}
))}
{isTransition && (
{_CLOCK_TICKS[clockIdx]}
)}
);
}
function TerminalLine({ line }) {
if (line.kind === "blank") return ;
if (line.kind === "cursor") return
;
if (line.kind === "prompt") {
return (
$
{line.text}
);
}
if (line.kind === "ok") {
return (
✓
{line.text}
{line.detail && {line.detail}}
);
}
if (line.kind === "stamp") {
return (
[{line.time}]
{line.text}
);
}
if (line.kind === "step") {
return (
→
{line.arrow}
{line.label}
· {line.text}
);
}
return null;
}
// ─────────────────────────────────────────────────────────────────────────────
// FeatureCard — reused across feature groups
// ─────────────────────────────────────────────────────────────────────────────
function FeatureCard({ feature, domain }) {
return (
{domain && {domain}
}
{feature.name}
{feature.desc}
{feature.badges?.length > 0 && (
{feature.badges.map((b, i) => )}
)}
);
}
// Expose
Object.assign(window, { RollI18n, useT, SectionLabel, Badge, Logo, Icon, ThemeToggle, LangToggle, InstallSnippet, Terminal, FeatureCard });