import React, { useState } from "react"; import { callAI } from "call-ai"; import { useFireproof } from "use-fireproof"; const Spinner = () => ( ); export default function App() { const { database, useLiveQuery, useDocument } = useFireproof("prune-or-not-live-v1"); const { doc: newItem, merge, submit } = useDocument({ type: "plant", name: "", context: "", createdAt: Date.now(), pruneVotes: 0, keepVotes: 0, }); const { docs: items } = useLiveQuery("type", { key: "plant", descending: true }); const { docs: adviceDocs } = useLiveQuery("type", { key: "advice", descending: true }); const [loadingAI, setLoadingAI] = useState({}); const [selectedId, setSelectedId] = useState(null); const handleSubmit = (e) => { e.preventDefault(); if (!newItem.name.trim()) return; merge({ createdAt: Date.now() }); submit(); }; const handleVote = (doc, vote) => { if (vote === "prune") { database.put({ ...doc, pruneVotes: (doc.pruneVotes || 0) + 1 }); } else { database.put({ ...doc, keepVotes: (doc.keepVotes || 0) + 1 }); } }; const handleAI = async (doc) => { setLoadingAI((p) => ({ ...p, [doc._id]: true })); try { const prompt = `You are a plant pruning expert. Give concise pruning advice for: "${doc.name}". Context: "${doc.context || "none"}". Should it be pruned now? Why or why not? Keep it under 3 sentences.`; const res = await callAI(prompt, { schema: { properties: { verdict: { type: "string", description: "PRUNE or KEEP" }, reason: { type: "string", description: "Short explanation under 3 sentences" }, }, }, }); const { verdict, reason } = JSON.parse(res); await database.put({ type: "advice", plantId: doc._id, plantName: doc.name, verdict, reason, createdAt: Date.now() }); } finally { setLoadingAI((p) => ({ ...p, [doc._id]: false })); } }; const getAdviceForPlant = (id) => adviceDocs.find((a) => a.plantId === id); const c = { bg: "bg-[#f5f3ee]", card: "bg-[#ffffff]", ink: "text-[#0f172a]", muted: "text-[#6b7280]", border: "border-[#0f172a]", accent: "bg-[#c2410c]", accentText: "text-white", yellow: "bg-[#eab308]", green: "bg-[#16a34a]", blue: "bg-[#1d4ed8]", shadow: "shadow-[4px_4px_0px_#0f172a]", shadowSm: "shadow-[3px_3px_0px_#0f172a]", }; return (

{/* NAV */} {/* HERO */}

Community Pruning Session

Prune Or Not Live

Submit plants or branches to the queue. Vote to prune or keep. Get AI expert advice. Decide together — live.

{/* STATS */}

{[ { label: "Items Queued", val: items.length, color: "bg-[#c2410c]", textColor: "text-white" }, { label: "Prune Votes", val: items.reduce((s, d) => s + (d.pruneVotes || 0), 0), color: "bg-[#eab308]", textColor: "text-[#0f172a]" }, { label: "Keep Votes", val: items.reduce((s, d) => s + (d.keepVotes || 0), 0), color: "bg-[#1d4ed8]", textColor: "text-white" }, { label: "AI Verdicts", val: adviceDocs.length, color: "bg-[#16a34a]", textColor: "text-[#0f172a]" }, ].map(({ label, val, color, textColor }) => (

{label}

{val}

))}

{/* SUBMIT FORM */}

Add To Queue

{/* ITEM QUEUE */}

Live Queue

{items.length === 0 ? (

No items yet — add the first plant above

) : (

{items.map((doc) => { const advice = getAdviceForPlant(doc._id); const total = (doc.pruneVotes || 0) + (doc.keepVotes || 0); const prunePercent = total ? Math.round(((doc.pruneVotes || 0) / total) * 100) : 50; const isSelected = selectedId === doc._id; return (

{/* Vote bar */}

{doc.pruneVotes || 0}P {doc.keepVotes || 0}K

{/* AI Advice */} {advice && (

AI Verdict: {advice.verdict}

{advice.reason}

)}

); })}

)}

{/* FOOTER */}

Prune Or Not Live — Real-Time Community Pruning Sessions

); }