// Main App
const { useState, useEffect, useRef } = React;
const STORAGE_KEY = 'snatch_state_v1';
function loadState() {
try { return JSON.parse(localStorage.getItem(STORAGE_KEY)) || {}; } catch { return {}; }
}
function saveState(s) {
try { localStorage.setItem(STORAGE_KEY, JSON.stringify(s)); } catch {}
}
const SUGGESTIONS = [
"I've got 30 min and no gear",
"Light day, my legs are toast",
"Crush my core",
"Full-body HIIT, let's go",
"Back + biceps, 45 min, dumbbells",
"Something for after a long run",
];
const SAMPLE_HISTORY = [
{ id: 'h1', title: 'THE GRINDER', date: 'Apr 17', duration: '32 MIN', intensity: 'HARD', focus: 'Conditioning', completed: true },
{ id: 'h2', title: 'IRON HOUR', date: 'Apr 15', duration: '60 MIN', intensity: 'BRUTAL', focus: 'Strength', completed: true },
{ id: 'h3', title: 'SWEAT EQUITY', date: 'Apr 13', duration: '25 MIN', intensity: 'MEDIUM', focus: 'Cardio', completed: true },
{ id: 'h4', title: 'LUNGS & LEGS', date: 'Apr 10', duration: '40 MIN', intensity: 'HARD', focus: 'Legs', completed: false },
{ id: 'h5', title: 'CHEST DAY', date: 'Apr 8', duration: '45 MIN', intensity: 'HARD', focus: 'Push', completed: true },
];
// ===== MAIN APP =====
function App() {
const [view, setView] = useState('home');
const [variant, setVariant] = useState(window.TWEAKS?.variant || 'poster');
const [showTicker, setShowTicker] = useState(window.TWEAKS?.ticker !== false);
const persisted = loadState();
const [messages, setMessages] = useState(persisted.messages || []);
const [saved, setSaved] = useState(persisted.saved || []);
const [activeWod, setActiveWod] = useState(persisted.activeWod || null);
const [loading, setLoading] = useState(false);
const [input, setInput] = useState('');
useEffect(() => {
const onTweak = (e) => {
setVariant(e.detail.variant || 'poster');
setShowTicker(e.detail.ticker !== false);
};
window.addEventListener('tweaks-changed', onTweak);
return () => window.removeEventListener('tweaks-changed', onTweak);
}, []);
useEffect(() => {
saveState({ messages, saved, activeWod });
}, [messages, saved, activeWod]);
const sendMessage = async (text) => {
if (!text.trim() || loading) return;
const newMessages = [...messages, { role: 'user', content: text }];
setMessages(newMessages);
setInput('');
setLoading(true);
setView('chat');
try {
const reply = await window.WODLib.callCoach(newMessages);
const parsed = window.WODLib.parseWodResponse(reply);
setMessages(m => [...m, { role: 'assistant', content: parsed.intro || "Here you go.", wod: parsed.wod, outro: parsed.outro }]);
if (parsed.wod) setActiveWod({ ...parsed.wod, id: 'w_' + Date.now(), generatedAt: Date.now() });
} catch (err) {
// worker unreachable or returned an error
} finally {
setLoading(false);
}
};
const toggleSave = (wod) => {
if (!wod) return;
const exists = saved.find(s => s.id === wod.id);
if (exists) setSaved(saved.filter(s => s.id !== wod.id));
else setSaved([{ ...wod, savedAt: Date.now() }, ...saved]);
};
const isSaved = (wod) => wod && saved.some(s => s.id === wod.id);
return (
{view === 'home' && { sendMessage(txt); setView('chat'); }} variant={variant} showTicker={showTicker} />}
{view === 'chat' && { setMessages([]); setActiveWod(null); }} />}
{view === 'saved' && { setActiveWod(w); setView('chat'); }} onRemove={toggleSave} variant={variant} />}
{view === 'history' && }
);
}
// ===== RANDOM WOD =====
const RANDOM_WODS = [
"Give me a random full-body WOD, surprise me!",
"Random WOD — any equipment, any duration, go!",
"Pick any workout for me today, coach's choice.",
"Surprise me with something brutal today.",
"Random WOD, I trust you coach.",
];
// ===== HOME =====
function Home({ setView, onSuggest, onSend, variant, showTicker }) {
const [heroInput, setHeroInput] = useState('');
const handleHeroSend = () => {
if (!heroInput.trim()) return;
onSend(heroInput);
};
const handleRandom = () => {
const pick = RANDOM_WODS[Math.floor(Math.random() * RANDOM_WODS.length)];
onSend(pick);
};
return (
● WORKOUT OF THE DAY
Tell your coach how you feel, what you've got, and what you need. Get a workout built for today — not last week, not someone else.
{showTicker &&
}
HOW IT WORKS
Three steps.
Zero excuses.
);
}
function HeroVisual({ variant }) {
if (variant === 'neon') {
return (
● LIVE · HR 142
SESSION 047
142BPM
REAL ATHLETES. REAL DATA. REAL GAINS.
);
}
return (
● TODAY'S EDITION
TRAIN
LIKE YOU
MEAN IT
EDITION № 047
);
}
function Step({ num, title, body }) {
return (
);
}
// ===== CHAT VIEW =====
function ChatView({ messages, loading, input, setInput, onSend, variant, onSave, isSaved, onReset }) {
const scrollRef = useRef(null);
useEffect(() => {
if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
}, [messages, loading]);
const empty = messages.length === 0;
return (
V
COACH V
● ONLINE · READY TO COOK
{empty &&
}
{messages.map((m, i) => (
))}
{loading && }
);
}
function EmptyChat({ onSuggest }) {
return (
READY WHEN YOU ARE
What are we
doing today?
Tell me how you feel, how long you've got, what you have. I'll build it.
{SUGGESTIONS.map((s, i) => (
))}
);
}
function MessageBubble({ msg, variant, onSave, isSaved }) {
if (msg.role === 'user') {
return (
);
}
return (
V
{msg.content && (
{msg.content}
)}
{msg.wod && (
{msg.wod.title}
{msg.wod.subtitle} · {msg.wod.duration} · {msg.wod.intensity}
{msg.wod.blocks.map((b, i) => (
{b.label}{b.time ? ` · ${b.time}` : ''}
{b.note &&
{b.note}
}
{b.items.map((it, j) => (
{it.name}
{it.reps}
))}
))}
{msg.wod.closer &&
"{msg.wod.closer}"
}
)}
{msg.outro && (
{msg.outro}
)}
);
}
function TypingBubble() {
return (
);
}
function Composer({ input, setInput, onSend, loading }) {
return (