// cache-bust: 1779480397114-signinbtn
// =========================================================
// ep1-guided.jsx -- GENERIC interactive guided session for any episode.
// (Filename retained for index.html compatibility.)
//
// - Reads window.BL_EP_ID (set by ep-route.jsx before mount)
// - Looks up beats in EP_RICH[id] (rich format with pinned prompts) OR
// falls back to window.BL_SCRIPTS[id].beats (simple time/text from
// scripts-data.js).
// - Ep 1.0's rich BEATS live in EP_RICH below. Other episodes render
// with time + narration only until upgraded.
// =========================================================
const { useState, useRef, useEffect } = React;
const T = {
paper:"#f5f1ea",paper2:"#ebe5da",paper3:"#ddd5c6",
ink:"#1a1612",ink2:"#3a322a",inkDim:"#5b5247",inkMute:"#8a8073",
line:"#d9d1c5",dark:"#16110d",dark2:"#1f1812",dark3:"#29211a",
lineDark:"#2e261f",bone:"#f4eee3",boneDim:"#c9c0b1",
accent:"#d96846",accentDeep:"#b8451f",accentSoft:"#f3c3ab",accentTint:"#fae5d8",
sage:"#6b9a5f",amber:"#e3a44e",
serif:"'Georgia', ui-serif, serif",
mono:"'Menlo', 'Courier New', monospace",
sans:"system-ui, -apple-system, sans-serif",
};
// --------------------------------------------------------------------
// RICH BEAT OVERRIDES -- richer than scripts-data.js (adds label, action,
// pinned prompts). Only Ep 1.0 has this today; add more here as you polish.
// --------------------------------------------------------------------
const EP_RICH = {
"1.0": [
{ id:0, time:"0:00 - 0:08", label:"Hook",
narration:"Most people open VS Code first. Bad move -- you don't know what you're building yet. I designed reloadin5.com before I wrote a single line of code. In Claude. Here's how -- and why it changes the whole project.",
action:null, pinned:null },
{ id:1, time:"0:08 - 1:00", label:"Open Claude Design",
narration:"Open Claude Design and start a fresh project. Attach two screenshots: your live site and a Stripe pricing page you like. Then paste the prompt below directly into Claude.",
action:"Open Claude Design -> New Project -> attach 2 screenshots",
pinned:{ label:"Paste this into Claude:",
code:`Design a premium content-locked landing page for reloadin5.com/build --
a video curriculum site that teaches engineers how I built reloadin5 with you.
Tone: engineer-built, not marketing. Terminal aesthetic with
warm coral accents. Premium SaaS, never "agency."
Use the design_canvas component. Lay out:
- desktop landing (1440 wide)
- mobile landing (390 wide)
- members-area dashboard (1440x900)
Expose tweaks for: accent color, density, lock-state aggressiveness.
No filler content. No emoji. No fake testimonials.` } },
{ id:2, time:"1:00 - 2:30", label:"Watch it scaffold",
narration:"Claude generates a full landing page -- hero, story, module list, architecture diagram, pricing -- all on one design canvas. You haven't written a single component yet. Drag the artboards around. Open one fullscreen. This is your blueprint, not your final product.",
action:"Let Claude finish. Drag artboards. Open desktop view fullscreen.",
pinned:null },
{ id:3, time:"2:30 - 4:00", label:"Iterate with Tweaks",
narration:"See the Tweaks panel in the corner? This is where you make design decisions without re-prompting. Switch the accent, tighten the density, flip the lock-state. No re-prompting needed.",
action:"Use the Tweaks panel -- try accent colors, density settings, lock-state modes.",
pinned:{ label:"Try each Tweak in order:",
code:`1. Accent color -> amber -> sage -> back to coral
2. Density -> compact -> comfortable -> spacious
3. Lock-state -> subtle -> soft-blur -> tiered
4. Motion -> on / off` } },
{ id:4, time:"4:00 - 5:30", label:"Add artboard variants",
narration:"Ask Claude to add more artboards directly on the canvas -- mobile and TikTok short dimensions. These are real surfaces this site will live on.",
action:"Paste this next prompt into Claude:",
pinned:{ label:"Paste this into Claude:",
code:`Add two more artboards to the canvas:
- Mobile landing at 390px wide
- TikTok short at 400 x 711px (portrait)
Keep the same design system. Show them side-by-side with the desktop.` } },
{ id:5, time:"5:30 - 6:45", label:"Comment and patch",
narration:"Pick one thing that looks off. Type a comment about that specific element. Claude fixes only that, leaving everything else alone -- same discipline you'll use in real code.",
action:"Comment on one specific element in the preview.",
pinned:{ label:"Example -- paste this into Claude:",
code:`The hero H1 is too tight against the paragraph below it.
Add 12px more breathing room between them.
Only this change. Do not touch other spacing.` } },
{ id:6, time:"6:45 - 8:00", label:"Export the blueprint",
narration:"Once the design is locked, export the HTML. This becomes your blueprint for the real Vite build. You're translating from a working prototype -- not starting from scratch.",
action:"Export or copy the HTML output from Claude.",
pinned:{ label:"Paste this into Claude:",
code:`Export the final design as a single self-contained HTML file.
Include all CSS inline. No external dependencies.` } },
{ id:7, time:"8:00 - 8:24", label:"What's next",
narration:"You just designed your entire product before writing a single line of production code. Episode 1.1 covers the patch-script workflow -- the loop that gets this design into a real Vite + Cloudflare app.",
action:null, pinned:null },
],
};
// --------------------------------------------------------------------
// Build BEATS array for a given episode id. Prefers EP_RICH, then falls
// back to window.BL_SCRIPTS[id].beats (simple time/text).
// --------------------------------------------------------------------
function buildBeats(id) {
if (EP_RICH[id]) return EP_RICH[id];
const scripts = window.BL_SCRIPTS || {};
const ep = scripts[id];
if (!ep || !Array.isArray(ep.beats) || ep.beats.length === 0) {
return [{
id: 0, time: "--", label: "Coming soon",
narration: "This episode's beat sheet hasn't been written yet. Ask Claude on the right for help with anything from this module.",
action: null, pinned: null,
}];
}
return ep.beats.map((b, i) => ({
id: i,
time: b.time || "--",
label: b.label || `Step ${i + 1}`,
narration: b.text || b.narration || "",
action: b.action || null,
pinned: b.pinned || null,
}));
}
// --------------------------------------------------------------------
// Look up episode title + free/pro flag from window.BL_DATA (data.js).
// --------------------------------------------------------------------
function epMeta(id) {
const data = window.BL_DATA;
const scripts = window.BL_SCRIPTS || {};
const fallback = { title: `Episode ${id}`, free: false };
if (!data || !Array.isArray(data.modules)) return fallback;
for (const m of data.modules) {
for (const e of (m.episodes || [])) {
if (e.n === id) {
return {
title: e.title || scripts[id]?.title || fallback.title,
free: !!e.free,
};
}
}
}
return { ...fallback, title: scripts[id]?.title || fallback.title };
}
function CopyButton({ text }) {
const [copied, setCopied] = useState(false);
function handleCopy() {
navigator.clipboard.writeText(text).then(() => {
setCopied(true);
setTimeout(() => setCopied(false), 2000);
});
}
return (
);
}
function ChatMessage({ msg }) {
const isUser = msg.role === "user";
return (
{msg.content}
);
}
function EpisodeGuide() {
// Subscribe to auth state so the top bar updates on sign-in/out.
const auth = window.useBLAuth();
// Episode id is set by the router right before mount.
const ID = (typeof window !== "undefined" && window.BL_EP_ID) ? window.BL_EP_ID : "1.0";
const META = epMeta(ID);
const BEATS = buildBeats(ID);
const [beat, setBeat] = useState(0);
const [showHint, setShowHint] = useState(true);
const [messages, setMessages] = useState([{
role:"assistant",
content: `You are now on \"${META.title}\". Ask me anything about this step -- including how to run commands on Mac or Windows.`,
}]);
const [input, setInput] = useState("");
const [loading, setLoading] = useState(false);
const chatEndRef = useRef(null);
const current = BEATS[beat];
const progress = (beat / Math.max(1, BEATS.length - 1)) * 100;
useEffect(() => { chatEndRef.current?.scrollIntoView({ behavior:"smooth" }); }, [messages]);
const [remaining, setRemaining] = useState(null);
async function sendMessage() {
if (!input.trim() || loading) return;
const userMsg = { role:"user", content:input.trim() };
setMessages(prev => [...prev, userMsg]);
setInput("");
setLoading(true);
try {
const token = (window.BL_AUTH && window.BL_AUTH.getToken && window.BL_AUTH.getToken()) || localStorage.getItem("bl_token");
const res = await fetch("/api/build/ask", {
method:"POST",
headers:{
"Content-Type":"application/json",
...(token ? { "Authorization": `Bearer ${token}` } : {}),
},
body: JSON.stringify({
messages:[...messages, userMsg].map(m => ({ role:m.role, content:m.content })),
beatLabel: current.label,
beatNarration: current.narration,
episodeTitle: `Ep ${ID} -- ${META.title}`,
}),
});
const data = await res.json();
if (res.status === 401) {
setMessages(prev => [...prev, { role:"assistant", content:"Sign in to ask questions -- it takes 30 seconds and the first episode is free." }]);
} else if (res.status === 429) {
setMessages(prev => [...prev, { role:"assistant", content:`You have used your ${5} free questions for today. Upgrade to Pro for unlimited questions across all lessons.` }]);
} else {
setMessages(prev => [...prev, { role:"assistant", content: data.reply || "Sorry, could not get a response." }]);
if (data.remaining !== undefined) setRemaining(data.remaining);
}
} catch {
setMessages(prev => [...prev, { role:"assistant", content:"Connection error -- try again." }]);
}
setLoading(false);
}
function goTo(n) {
setBeat(n);
setMessages([{ role:"assistant", content:`You are now on \"${BEATS[n].label}.\" Ask me anything about this step -- including how to run commands on Mac or Windows.` }]);
}
return (
{/* Top bar */}
THE BUILD LAB.EP {ID} . {META.free ? "FREE" : "PRO"}
{beat+1} / {BEATS.length}
{!auth.isLoggedIn && (
)}
{/* Claude hint banner -- dismissable */}
{showHint && (
Claude is your instructor -- ask anything in the panel on the right. Stuck on a terminal command? Confused about a step? Just ask. It knows exactly where you are.