import React, { useState } from "react"; import { callAI } from "call-ai"; import { useFireproof } from "use-fireproof"; import { useVibe } from "use-vibes"; export default function App() { const { useLiveQuery, useDocument, database } = useFireproof("northStarWins"); const { can, ready, me } = useVibe("northStarWins"); const { doc, merge, submit } = useDocument({ type: "win", text: "", createdAt: Date.now(), authorHandle: me?.userHandle, }); const { docs: wins } = useLiveQuery("type", { key: "win", descending: true }); const { docs: predictions } = useLiveQuery("type", { key: "prediction", descending: true }); const [isLoading, setIsLoading] = useState(false); const [isSuggesting, setIsSuggesting] = useState(false); const latestPrediction = predictions[0]; function handleSubmit(e) { e.preventDefault(); if (!doc.text.trim()) return; submit(); } async function handleSuggest() { setIsSuggesting(true); try { const raw = await callAI( "Suggest one short, specific, playful example of a tiny daily win someone might log (e.g. 'Drank a full glass of water before coffee'). Return just one example.", { schema: { properties: { win: { type: "string" } } } } ); const parsed = JSON.parse(raw); merge({ text: parsed.win }); } catch (err) { merge({ text: "Took one small brave step today" }); } finally { setIsSuggesting(false); } } async function handlePredict() { setIsLoading(true); try { const recent = wins.slice(0, 8).map((w) => w.text).join("; "); const raw = await callAI( `Here is a list of tiny daily wins someone logged recently: ${recent || "no wins yet"}. As an enthusiastic, playful hype coach, write one short (max 2 sentences) upbeat prediction of the exceptional payoff these tiny wins are building toward.`, { schema: { properties: { prediction: { type: "string" } } } } ); const parsed = JSON.parse(raw); await database.put({ type: "prediction", text: parsed.prediction, createdAt: Date.now(), authorHandle: me?.userHandle, }); } catch (err) { if (err && err.reason === "refusal") { await database.put({ type: "prediction", text: "The coach paused for a breath — jot down another win and try again.", createdAt: Date.now(), authorHandle: me?.userHandle, }); } } finally { setIsLoading(false); } } const c = { bg: "bg-[var(--background)]", surface: "bg-[var(--surface)]", ink: "text-[var(--text-primary)]", sub: "text-[var(--text-secondary)]", border: "border-[length:var(--border-width)] border-[var(--border)]", accent: "bg-[var(--primary)] text-[var(--text-primary)]", radius: "rounded-[var(--radius)]", input: "bg-[var(--surface)] text-[var(--text-primary)] border-[length:var(--border-width)] border-[var(--border)] rounded-[var(--radius)]", }; const canCreateWin = ready && can.create({ type: "win", authorHandle: me?.userHandle }).ok; const SpinIcon = () => ( ); return (

Your Payoff Forecast

{latestPrediction ? (

{latestPrediction.text}

predicted {new Date(latestPrediction.createdAt).toLocaleString()}

) : (

Log a few wins, then ask the coach what they're building toward.

)}

Log a tiny win

{!ready ? (

Checking...

) : canCreateWin ? ( ) : (

)}

Win log

{wins.length === 0 ? (

No wins yet — log the first tiny one above.

) : (

{w.text}

{new Date(w.createdAt).toLocaleString()}

)}

); }