// ==================================================================== // lw-studio-app.jsx — Last Wishes Studio (champion concept) // Shell mirrors the PO Activation Prototype: Nav + stage + persistent // Helm chat rail. Screens: intro → theme → prep → studio → review → done. // ==================================================================== const { useState: useStateAPP, useEffect: useEffectAPP, useRef: useRefAPP, useCallback: useCbAPP, useMemo: useMemoAPP } = React; const LW_SCREEN_TITLE = { intro: "Personal videos", theme: "Personal videos", prep: (t) => `${t.label} · Video ${t.id === "payout" ? "2" : "1"} of 2`, studio: (t) => `Recording · ${t.label}`, review: (t) => `${t.label} · review`, done: "Personal videos", }; function StudioApp() { const [screen, setScreen] = useStateAPP("intro"); const [beneId, setBeneId] = useStateAPP(null); const [themeId, setThemeId] = useStateAPP("hope"); const [beats, setBeats] = useStateAPP([]); const [segClips, setSegClips] = useStateAPP([]); const [saved, setSaved] = useStateAPP({}); // { john: ['hope'], ... } const [savedVideos, setSavedVideos] = useStateAPP({}); // { john: { hope: {beats, segClips} } } const [watchVideo, setWatchVideo] = useStateAPP(null); const [railBump, setRailBump] = useStateAPP(0); const [example, setExample] = useStateAPP(null); const [askOpen, setAskOpen] = useStateAPP(false); const [studioStart, setStudioStart] = useStateAPP(0); const [convo, setConvo] = useStateAPP([]); const [isTyping, setIsTyping] = useStateAPP(false); const streamIdRef = useRefAPP(0); const streamedRef = useRefAPP(new Set()); const rec = useRecorder(); const bene = beneId ? lwBene(beneId) : null; const theme = lwTheme(themeId); const suggestions = useMemoAPP(() => (beneId ? lwPrompts(beneId, themeId) : []), [beneId, themeId]); const savedForBene = (saved[beneId] || []); // ── conversation helpers (mirrors the main prototype) ───────────── const streamMessages = useCbAPP((msgs) => { if (!msgs || !msgs.length) return; const id = ++streamIdRef.current; let i = 0; const reveal = () => { if (id !== streamIdRef.current) return; if (i >= msgs.length) { setIsTyping(false); return; } setIsTyping(true); const m = msgs[i]; const len = typeof m.text === "string" ? m.text.length : 80; const ms = Math.min(1200, Math.max(500, len * 10)); setTimeout(() => { if (id !== streamIdRef.current) return; setConvo((p) => [...p, m]); i++; if (i >= msgs.length) setIsTyping(false); else setTimeout(reveal, 340); }, ms); }; reveal(); }, []); const logActivity = useCbAPP((text, meta) => { setConvo((p) => [...p, { from: "activity", text, meta }]); }, []); // ── stream each screen's intro lines once per context ───────────── useEffectAPP(() => { const key = `${screen}:${beneId || "-"}:${themeId}`; if (screen === "studio") return; // studio talks via the pill on demand if (streamedRef.current.has(key)) return; streamedRef.current.add(key); const lines = scriptFor(screen, bene, theme, savedForBene); if (lines.length) setTimeout(() => streamMessages(lines), 260); // eslint-disable-next-line react-hooks/exhaustive-deps }, [screen, beneId, themeId]); // ── free-text → Helm (live with graceful fallback) ──────────────── const handleUserSend = useCbAPP(async (text) => { setConvo((p) => [...p, { from: "user", text }]); let reply = null; if (window.claude && typeof window.claude.complete === "function") { try { const ctx = bene ? `They are recording a "${theme.label}" video for ${bene.firstName} (${bene.rel}).` : "They are about to record short personal videos for loved ones."; reply = await window.claude.complete( `You are Helm, a warm, calm guide helping someone record short "last wishes" videos for the people they love, to be watched after they pass. ${ctx} ` + `They said: "${text}". Reply in 1–3 short, kind, practical sentences. Be encouraging and human; never clinical or morbid. Do not use lists.`); reply = (reply || "").trim(); } catch (e) { reply = null; } } if (!reply) reply = cannedReply(text, bene); setConvo((p) => [...p, { from: "ai", prose: true, text: reply }]); }, [bene, theme]); // ── transitions ─────────────────────────────────────────────────── const seedBeats = (bid, tid) => lwPrompts(bid, tid).slice(0, 4).map((p, i) => ({ ...p, key: tid + "_" + i })); const pickBene = (id) => { setBeneId(id); logActivity(`Recording for ${lwBene(id).name}`, lwBene(id).rel); setScreen("theme"); }; const startTheme = (tid) => { setThemeId(tid); setBeats(seedBeats(beneId, tid)); setSegClips(new Array(4).fill(null)); rec.resetAll(); logActivity(`Starting: ${lwTheme(tid).label}`, `Video ${tid === "payout" ? "2" : "1"} of 2`); setScreen("prep"); }; // keep segClips array sized to beats useEffectAPP(() => { setSegClips((s) => { const n = beats.map((_, i) => s[i] || null); return n; }); // eslint-disable-next-line react-hooks/exhaustive-deps }, [beats.length]); // landing on the review screen saves the current cut to the inventory // (reads settled segClips → no stale/missing clip) useEffectAPP(() => { if (screen === "review" && beneId && segClips.some(Boolean)) { setSavedVideos((s) => ({ ...s, [beneId]: { ...(s[beneId] || {}), [themeId]: { beats, segClips } } })); setSaved((s) => { const cur = s[beneId] || []; return cur.includes(themeId) ? s : { ...s, [beneId]: [...cur, themeId] }; }); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [screen, segClips]); const enterStudio = useCbAPP(async () => { if (rec.status === "idle") await rec.requestCamera(); setScreen("studio"); }, [rec]); // reorder beats AND their recorded clips together (review screen, drag-and-drop) const reorderBeats = (from, to) => { setBeats((arr) => { const n = [...arr]; const [m] = n.splice(from, 1); n.splice(to, 0, m); return n; }); setSegClips((arr) => { const n = [...arr]; const [m] = n.splice(from, 1); n.splice(to, 0, m); return n; }); }; const addBeatInReview = (b) => { const newIdx = beats.length; setBeats((arr) => [...arr, b]); setStudioStart(newIdx); setScreen("studio"); }; // remove a beat AND its recorded clip together (review screen, with confirm) const deleteBeat = (i) => { setBeats((arr) => arr.filter((_, idx) => idx !== i)); setSegClips((arr) => arr.filter((_, idx) => idx !== i)); }; const saveVideo = () => { setSaved((s) => ({ ...s, [beneId]: [...new Set([...(s[beneId] || []), themeId])] })); setSavedVideos((s) => ({ ...s, [beneId]: { ...(s[beneId] || {}), [themeId]: { beats, segClips } } })); logActivity(`Saved: ${theme.label} for ${bene.firstName}`, `${beats.length} beats`); setScreen("theme"); }; const playVideo = (tid) => { const v = (savedVideos[beneId] || {})[tid]; if (v) setWatchVideo({ ...v, theme: lwTheme(tid) }); }; const editVideo = (tid) => { const v = (savedVideos[beneId] || {})[tid]; if (!v) return; setThemeId(tid); setBeats(v.beats); setSegClips(v.segClips); setScreen("review"); }; const recordOther = () => { const other = themeId === "hope" ? "payout" : "hope"; startTheme(other); }; const resetAll = () => { streamIdRef.current++; setIsTyping(false); setScreen("intro"); setBeneId(null); setThemeId("hope"); setBeats([]); setSegClips([]); setSaved({}); setSavedVideos({}); setWatchVideo(null); setConvo([]); streamedRef.current = new Set(); rec.resetAll(); }; // ── chat config per screen ──────────────────────────────────────── const chatStyle = screen === "studio" ? "pill" : "panel"; const titleSrc = LW_SCREEN_TITLE[screen]; const title = typeof titleSrc === "function" ? titleSrc(theme) : titleSrc; const quickReplies = useMemoAPP(() => { if (isTyping) return []; if (screen === "prep") return [ { label: "I'm ready — open the studio", onClick: enterStudio }, { label: "Show me an example", soft: true, onClick: () => setExample(theme.id === "payout" ? LW_EXAMPLES[1] : LW_EXAMPLES[0]) }, ]; if (screen === "review") return [ { label: "Save this video", onClick: saveVideo }, { label: "Re-record a beat", soft: true, onClick: () => setScreen("studio") }, ]; if (screen === "done") { const both = savedForBene.includes("hope") && savedForBene.includes("payout"); if (!both) return [{ label: `Record ${themeId === "hope" ? "guidance for the payout" : "the message of hope"}`, onClick: recordOther }, { label: "I'll finish later", soft: true, onClick: resetAll }]; return [{ label: "Record for someone else", onClick: resetAll }, { label: "I'm all done", soft: true, onClick: resetAll }]; } return []; }, [screen, isTyping, theme, savedForBene, themeId, enterStudio]); const customCard = useMemoAPP(() => { if (isTyping) return null; if (screen === "prep" && bene) return (); if (screen === "review") return ( setRailBump((n) => n + 1)} onRedo={(i) => { rec.retake(true); setStudioStart(i); setScreen("studio"); }} onDelete={deleteBeat} /> ); return null; }, [screen, isTyping, bene, theme, beats, segClips, suggestions]); return (