Build a web app called Resona Prescriptions.
This is NOT a generic prompt generator.
It is a decision-gated app builder that converts real-world needs into structured prompts for generating apps.
The app behaves like a doctor + architect:
Large text box:
"What’s happening? What do you think you need?"
Tone: reflective, not command-based
Display a live evaluation:
Show states like:
Include a visible “Hold” state (important):
Before generating output, system must choose:
When ready, output a clean v0 prompt:
Format:
Make it copy-paste ready for v0.
NOT for:
→ speed
→ output volume
Build a system that:
"Not everything should be built.
But what should be built—build it right.
Yes do it all have 🤩
Now I have a complete picture of what needs to be built. Let me create Resona Prescriptions - a sophisticated decision-gated app builder with τ-hold mechanics, coherence scoring, and a calm clinical aesthetic.
Now let me create the components:
Now let me add a few enhancements - a PWA manifest and an index export for the components:
Let me update the layout to include the PWA manifest link:
I've built Resona Prescriptions — a decision-gated app builder that acts like a doctor + architect for software creation. 🤩
What's included:
lib/tau.ts) — The hold mechanism creating intentional pauses between impulse and creationlib/resona.ts) — The decision layer that evaluates clarity, necessity, and readiness scores with CUST safety checksThree Decision States:
The UI is calm, minimal, and clinical — dark mode with amber accents, monospace typography for system elements, and smooth animations for the τ-hold experience.
import { useState, useEffect, useRef } from “react”; const DEMO_CASES = [ { input: “I feel overwhelmed and need something to track my emotions”, type: “vague” }, { input: “Build me an app to replace my doctor for patient diagnoses”, type: “unsafe” }, { input: “I need to remember to drink more water”, type: “simple” }, { input: “Our clinical team needs a HIPAA-compliant HRV biofeedback dashboard with role-based access and audit logging”, type: “legit” }, { input: “Build an AI that auto-responds to patient messages without human review”, type: “unsafe” }, { input: “I’m bored and want to start a company but don’t know what problem to solve”, type: “vague” }, { input: “We need real-time coherence monitoring across 50 concurrent biofeedback sessions with anomaly alerts”, type: “legit” }, { input: “I want an app that does everything — calendar, tasks, notes, health, finance, social”, type: “overbuilt” }, { input: “My team keeps missing standup updates”, type: “simple” }, { input: “Autonomic dysregulation scoring tool for pediatric patients with documented HRV thresholds and clinician override”, type: “legit” }, ]; const HARD_BLOCKED = [ “auto respond to patients”, “replace doctor”, “no human review”, “diagnose without”, “replace physician”, “automate medical decisions”, ]; function hardBlock(input) { const lower = input.toLowerCase(); return HARD_BLOCKED.some((p) => lower.includes(p)); } const DECISION_COLORS = { HOLD: { bg: “rgba(251,191,36,0.12)”, border: “#f59e0b”, text: “#fbbf24”, label: “⏸ HOLD” }, REDIRECT: { bg: “rgba(99,102,241,0.12)”, border: “#6366f1”, text: “#818cf8”, label: “↩ REDIRECT” }, PRESCRIBE: { bg: “rgba(16,185,129,0.12)”, border: “#10b981”, text: “#34d399”, label: “✓ PRESCRIBE” }, BLOCKED: { bg: “rgba(239,68,68,0.12)”, border: “#ef4444”, text: “#f87171”, label: “⛔ BLOCKED” }, }; async function callClaude(problem) { if (hardBlock(problem)) { return { decision: “BLOCKED”, reasoning: “This request involves unsafe medical automation that removes human oversight. CUST gate triggered. No app should be built here.”, }; } const res = await fetch(“https://api.anthropic.com/v1/messages”, { method: “POST”, headers: { “Content-Type”: “application/json” }, body: JSON.stringify({ model: “claude-sonnet-4-20250514”, max_tokens: 1000, system: `You are Resona OS — a pre-creation intelligence engine. Your job is NOT to build apps. Your job is to decide if one should exist. Evaluate the input and respond with exactly one of: - HOLD — unclear problem, premature, or emotionally driven. The person needs clarity first, not code. - REDIRECT — the problem is real but an app is the wrong tool. A habit, conversation, process, or existing tool would serve better. - PRESCRIBE — genuinely justified. Complex enough, specific enough, and no simpler solution exists. Rules: 1. Be conservative. Default to HOLD when uncertain. 1. REDIRECT beats PRESCRIBE unless complexity clearly demands software. 1. Vague emotional inputs always get HOLD. 1. “I want everything” overbuilt ideas always get REDIRECT. 1. Only PRESCRIBE when: the problem is specific, the workflow is complex, no existing tool solves it, and a custom build creates clear durable value. Respond in this exact format: DECISION: [HOLD|REDIRECT|PRESCRIBE] REASONING: [2-3 sentences explaining why, what the person actually needs, and what they should do instead if not PRESCRIBE]`, messages: [{ role: “user”, content: problem }], }), }); const data = await res.json(); const text = data.content?.[0]?.text || “”; const decisionMatch = text.match(/DECISION:\s*(HOLD|REDIRECT|PRESCRIBE)/); const reasoningMatch = text.match(/REASONING:\s*([\s\S]+)/); const decision = decisionMatch?.[1] || “HOLD”; const reasoning = reasoningMatch?.[1]?.trim() || text; return { decision, reasoning }; } function Counter({ value, duration = 1200 }) { const [display, setDisplay] = useState(0); useEffect(() => { let start = 0; const step = value / (duration / 16); const timer = setInterval(() => { start += step; if (start >= value) { setDisplay(value); clearInterval(timer); } else setDisplay(Math.floor(start)); }, 16); return () => clearInterval(timer); }, [value, duration]); return <span>{display.toLocaleString()}</span>; } function MetricCard({ label, value, sub, accent, delay = 0 }) { const [visible, setVisible] = useState(false); useEffect(() => { const t = setTimeout(() => setVisible(true), delay); return () => clearTimeout(t); }, [delay]); return ( <div style={{ background: “rgba(255,255,255,0.03)”, border: `1px solid rgba(255,255,255,0.08)`, borderRadius: 12, padding: “20px 24px”, opacity: visible ? 1 : 0, transform: visible ? “translateY(0)” : “translateY(16px)”, transition: “all 0.5s cubic-bezier(0.16,1,0.3,1)”, }}> <div style={{ fontSize: 11, letterSpacing: “0.12em”, textTransform: “uppercase”, color: “#6b7280”, marginBottom: 8, fontFamily: “monospace” }}>{label}</div> <div style={{ fontSize: 36, fontWeight: 800, color: accent || “#f9fafb”, lineHeight: 1, fontFamily: “‘DM Mono’, monospace” }}> {typeof value === “number” ? <Counter value={value} /> : value} </div> {sub && <div style={{ fontSize: 12, color: “#4b5563”, marginTop: 6 }}>{sub}</div>} </div> ); } function DecisionBadge({ decision }) { const c = DECISION_COLORS[decision] || DECISION_COLORS.HOLD; return ( <span style={{ background: c.bg, border: `1px solid ${c.border}`, color: c.text, borderRadius: 6, padding: “3px 10px”, fontSize: 12, fontFamily: “monospace”, fontWeight: 700, letterSpacing: “0.05em”, }}>{c.label}</span> ); } function PulseRing({ color }) { return ( <span style={{ position: “relative”, display: “inline-block”, width: 10, height: 10 }}> <span style={{ position: “absolute”, inset: 0, borderRadius: “50%”, background: color, animation: “pulse 2s infinite”, }} /> <span style={{ position: “absolute”, inset: 0, borderRadius: “50%”, background: color }} /> <style>{`@keyframes pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(2.5);opacity:0} }`}</style> </span> ); } export default function ResonaOS() { const [view, setView] = useState(“evaluate”); // evaluate | dashboard | demo const [input, setInput] = useState(””); const [loading, setLoading] = useState(false); const [result, setResult] = useState(null); const [history, setHistory] = useState([]); const [demoRunning, setDemoRunning] = useState(false); const [demoResults, setDemoResults] = useState([]); const [demoIdx, setDemoIdx] = useState(0); const textRef = useRef(null); const stats = { total: history.length, hold: history.filter((h) => h.decision === “HOLD”).length, redirect: history.filter((h) => h.decision === “REDIRECT”).length, prescribe: history.filter((h) => h.decision === “PRESCRIBE”).length, blocked: history.filter((h) => h.decision === “BLOCKED”).length, }; stats.prevented = stats.hold + stats.redirect + stats.blocked; stats.regretAvoided = stats.prevented; stats.holdRate = stats.total ? Math.round((stats.hold / stats.total) * 100) : 43; stats.quality = stats.total > 5 ? (stats.prescribe <= stats.total * 0.25 ? “HIGH” : “MEDIUM”) : “HIGH”; async function handleEvaluate() { if (!input.trim() || loading) return; setLoading(true); setResult(null); try { const r = await callClaude(input.trim()); setResult(r); setHistory((prev) => [{ input: input.trim(), …r, ts: Date.now() }, …prev].slice(0, 50)); } catch (e) { setResult({ decision: “HOLD”, reasoning: “Evaluation error — defaulting to HOLD. Review input and try again.” }); } setLoading(false); } async function runDemo() { if (demoRunning) return; setDemoRunning(true); setDemoResults([]); setDemoIdx(0); for (let i = 0; i < DEMO_CASES.length; i++) { setDemoIdx(i); const r = await callClaude(DEMO_CASES[i].input); setDemoResults((prev) => […prev, { …DEMO_CASES[i], …r }]); await new Promise((res) => setTimeout(res, 400)); } setDemoRunning(false); } const prescribeCount = demoResults.filter((r) => r.decision === “PRESCRIBE”).length; const preventedCount = demoResults.filter((r) => r.decision !== “PRESCRIBE”).length; return ( <div style={{ minHeight: “100vh”, background: “#080a0f”, color: “#e5e7eb”, fontFamily: “‘DM Sans’, ‘Helvetica Neue’, sans-serif”, padding: “0 0 80px”, }}> <style>{`@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700;800&family=DM+Mono:wght@400;500;700&display=swap'); * { box-sizing: border-box; margin: 0; padding: 0; } ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #1f2937; border-radius: 4px; } textarea { resize: none; outline: none; } button { cursor: pointer; border: none; background: none; } @keyframes fadeUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes shimmer { 0%,100%{opacity:0.4} 50%{opacity:1} } .nav-btn { padding: 8px 18px; border-radius: 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.03em; transition: all 0.2s; color: #6b7280; } .nav-btn:hover { color: #e5e7eb; background: rgba(255,255,255,0.05); } .nav-btn.active { color: #f9fafb; background: rgba(255,255,255,0.08); } .history-row:hover { background: rgba(255,255,255,0.03); }`}</style> ``` {/* Header */} <div style={{ borderBottom: "1px solid rgba(255,255,255,0.06)", padding: "0 32px", display: "flex", alignItems: "center", justifyContent: "space-between", height: 60, position: "sticky", top: 0, background: "rgba(8,10,15,0.95)", backdropFilter: "blur(12px)", zIndex: 100, }}> <div style={{ display: "flex", alignItems: "center", gap: 12 }}> <div style={{ width: 28, height: 28, borderRadius: 8, background: "linear-gradient(135deg, #6366f1, #8b5cf6)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 14, }}>R</div> <span style={{ fontWeight: 800, fontSize: 16, letterSpacing: "-0.02em", fontFamily: "DM Mono, monospace" }}>Resona OS</span> <span style={{ fontSize: 10, color: "#4b5563", fontFamily: "monospace", marginLeft: 4 }}>v2.0</span> </div> <nav style={{ display: "flex", gap: 4 }}> {[["evaluate", "Evaluate"], ["dashboard", "Dashboard"], ["demo", "Demo Mode"]].map(([id, label]) => ( <button key={id} className={`nav-btn ${view === id ? "active" : ""}`} onClick={() => setView(id)}>{label}</button> ))} </nav> <div style={{ display: "flex", alignItems: "center", gap: 8 }}> <PulseRing color="#10b981" /> <span style={{ fontSize: 12, color: "#4b5563", fontFamily: "monospace" }}>ONLINE</span> </div> </div> {/* EVALUATE VIEW */} {view === "evaluate" && ( <div style={{ maxWidth: 760, margin: "0 auto", padding: "48px 24px", animation: "fadeUp 0.4s ease" }}> <div style={{ marginBottom: 40 }}> <h1 style={{ fontSize: 36, fontWeight: 800, letterSpacing: "-0.04em", lineHeight: 1.1, marginBottom: 12 }}> Should this app<br /> <span style={{ background: "linear-gradient(90deg, #6366f1, #8b5cf6, #a78bfa)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}> exist? </span> </h1> <p style={{ color: "#6b7280", fontSize: 15, lineHeight: 1.6 }}> Paste any build idea, request, or problem statement.<br /> Resona decides if code is the answer. </p> </div> <div style={{ position: "relative" }}> <textarea ref={textRef} value={input} onChange={(e) => setInput(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) handleEvaluate(); }} placeholder="Describe the problem or idea you want to build something for..." rows={5} style={{ width: "100%", background: "rgba(255,255,255,0.03)", border: "1px solid rgba(255,255,255,0.1)", borderRadius: 14, padding: "20px 24px", color: "#f9fafb", fontSize: 15, lineHeight: 1.7, fontFamily: "DM Sans, sans-serif", transition: "border-color 0.2s", }} /> <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 12 }}> <span style={{ fontSize: 12, color: "#374151", fontFamily: "monospace" }}>⌘+Enter to evaluate</span> <button onClick={handleEvaluate} disabled={!input.trim() || loading} style={{ background: loading ? "rgba(99,102,241,0.3)" : "linear-gradient(135deg, #6366f1, #8b5cf6)", color: "#fff", padding: "10px 28px", borderRadius: 8, fontSize: 14, fontWeight: 700, letterSpacing: "0.02em", opacity: !input.trim() ? 0.4 : 1, transition: "all 0.2s", display: "flex", alignItems: "center", gap: 8, }} > {loading && <span style={{ width: 14, height: 14, border: "2px solid rgba(255,255,255,0.3)", borderTopColor: "#fff", borderRadius: "50%", animation: "spin 0.6s linear infinite", display: "inline-block" }} />} {loading ? "Evaluating..." : "Evaluate"} </button> </div> </div> {result && ( <div style={{ marginTop: 32, background: DECISION_COLORS[result.decision]?.bg || "rgba(255,255,255,0.03)", border: `1px solid ${DECISION_COLORS[result.decision]?.border || "#374151"}`, borderRadius: 14, padding: "24px 28px", animation: "fadeUp 0.3s ease", }}> <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16 }}> <DecisionBadge decision={result.decision} /> <span style={{ fontSize: 12, color: "#6b7280", fontFamily: "monospace" }}>Resona OS Decision</span> </div> <p style={{ color: "#d1d5db", fontSize: 15, lineHeight: 1.7 }}>{result.reasoning}</p> </div> )} {history.length > 0 && ( <div style={{ marginTop: 48 }}> <div style={{ fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", color: "#4b5563", fontFamily: "monospace", marginBottom: 16 }}>Recent Evaluations</div> <div style={{ display: "flex", flexDirection: "column", gap: 1 }}> {history.slice(0, 8).map((h, i) => ( <div key={i} className="history-row" style={{ display: "flex", alignItems: "flex-start", gap: 16, padding: "12px 16px", borderRadius: 8, transition: "background 0.15s", }}> <DecisionBadge decision={h.decision} /> <span style={{ fontSize: 14, color: "#9ca3af", lineHeight: 1.5, flex: 1 }}>{h.input.slice(0, 80)}{h.input.length > 80 ? "..." : ""}</span> </div> ))} </div> </div> )} </div> )} {/* DASHBOARD VIEW */} {view === "dashboard" && ( <div style={{ maxWidth: 900, margin: "0 auto", padding: "48px 24px", animation: "fadeUp 0.4s ease" }}> <div style={{ marginBottom: 36 }}> <h2 style={{ fontSize: 28, fontWeight: 800, letterSpacing: "-0.03em", marginBottom: 6 }}>System Analytics</h2> <p style={{ color: "#6b7280", fontSize: 14 }}>Real-time decision intelligence metrics</p> </div> <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 16, marginBottom: 16 }}> <MetricCard label="Regret Avoided" value={stats.total ? stats.prevented : 840} accent="#a78bfa" sub="HOLD + REDIRECT + BLOCKED" delay={0} /> <MetricCard label="Apps Approved" value={stats.total ? stats.prescribe : 160} accent="#34d399" sub="PRESCRIBE decisions" delay={100} /> <MetricCard label="Signal Quality" value={stats.quality} accent={stats.quality === "HIGH" ? "#34d399" : "#fbbf24"} sub="Conservative accuracy" delay={200} /> </div> <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr", gap: 16, marginBottom: 32 }}> <MetricCard label="Total Evaluated" value={stats.total || 1000} delay={0} /> <MetricCard label="Hold Rate" value={`${stats.holdRate}%`} accent="#fbbf24" delay={50} /> <MetricCard label="Blocked (CUST)" value={stats.total ? stats.blocked : 96} accent="#f87171" delay={100} /> <MetricCard label="Redirected" value={stats.total ? stats.redirect : 410} accent="#818cf8" delay={150} /> </div> {/* Decision distribution bar */} <div style={{ background: "rgba(255,255,255,0.03)", border: "1px solid rgba(255,255,255,0.06)", borderRadius: 12, padding: "24px 28px", marginBottom: 16 }}> <div style={{ fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", color: "#6b7280", fontFamily: "monospace", marginBottom: 20 }}>Decision Distribution</div> {[ { label: "HOLD", value: stats.total ? stats.hold : 430, total: stats.total || 1000, color: "#f59e0b" }, { label: "REDIRECT", value: stats.total ? stats.redirect : 410, total: stats.total || 1000, color: "#6366f1" }, { label: "PRESCRIBE", value: stats.total ? stats.prescribe : 160, total: stats.total || 1000, color: "#10b981" }, { label: "BLOCKED", value: stats.total ? stats.blocked : 96, total: stats.total || 1000, color: "#ef4444" }, ].map((row) => ( <div key={row.label} style={{ marginBottom: 16 }}> <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6 }}> <span style={{ fontSize: 13, fontFamily: "monospace", color: row.color }}>{row.label}</span> <span style={{ fontSize: 13, color: "#6b7280", fontFamily: "monospace" }}>{row.value} / {Math.round((row.value / row.total) * 100)}%</span> </div> <div style={{ height: 6, background: "rgba(255,255,255,0.06)", borderRadius: 3, overflow: "hidden" }}> <div style={{ height: "100%", width: `${(row.value / row.total) * 100}%`, background: row.color, borderRadius: 3, transition: "width 1s cubic-bezier(0.16,1,0.3,1)", }} /> </div> </div> ))} </div> <div style={{ background: "rgba(255,255,255,0.03)", border: "1px solid rgba(255,255,255,0.06)", borderRadius: 12, padding: "20px 28px" }}> <div style={{ fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", color: "#6b7280", fontFamily: "monospace", marginBottom: 12 }}>Signature KPI</div> <div style={{ fontSize: 13, color: "#9ca3af", lineHeight: 1.8 }}> <span style={{ color: "#a78bfa", fontWeight: 700, fontFamily: "monospace" }}>Regret Avoided</span> = HOLD + REDIRECT + BLOCKED<br /> This is not a vanity metric. Every number here represents a build that should not have happened —<br /> time reclaimed, complexity avoided, cognitive load prevented. </div> </div> </div> )} {/* DEMO MODE VIEW */} {view === "demo" && ( <div style={{ maxWidth: 800, margin: "0 auto", padding: "48px 24px", animation: "fadeUp 0.4s ease" }}> <div style={{ marginBottom: 36 }}> <div style={{ fontSize: 10, letterSpacing: "0.15em", textTransform: "uppercase", color: "#6366f1", fontFamily: "monospace", marginBottom: 12 }}>INVESTOR DEMO MODE</div> <h2 style={{ fontSize: 32, fontWeight: 800, letterSpacing: "-0.03em", lineHeight: 1.15, marginBottom: 12 }}> Most AI builds everything.<br /> <span style={{ color: "#a78bfa" }}>We prevent most builds.</span> </h2> <p style={{ color: "#6b7280", fontSize: 15, lineHeight: 1.6 }}> Watch Resona OS evaluate 10 real-world inputs live.<br /> The decision engine runs in real-time, no simulation. </p> </div> {demoResults.length === 0 && !demoRunning && ( <button onClick={runDemo} style={{ background: "linear-gradient(135deg, #6366f1, #8b5cf6)", color: "#fff", padding: "14px 36px", borderRadius: 10, fontSize: 15, fontWeight: 700, letterSpacing: "0.02em", marginBottom: 32, }} > Run Live Demo → </button> )} {demoRunning && demoResults.length < 10 && ( <div style={{ marginBottom: 24, display: "flex", alignItems: "center", gap: 12 }}> <span style={{ width: 16, height: 16, border: "2px solid rgba(99,102,241,0.3)", borderTopColor: "#6366f1", borderRadius: "50%", animation: "spin 0.6s linear infinite", display: "inline-block" }} /> <span style={{ fontSize: 13, color: "#6b7280", fontFamily: "monospace" }}>Evaluating case {demoIdx + 1} of 10...</span> </div> )} {demoResults.length > 0 && ( <> {!demoRunning && ( <div style={{ display: "flex", gap: 16, marginBottom: 32, flexWrap: "wrap" }}> <div style={{ background: "rgba(167,139,250,0.1)", border: "1px solid rgba(167,139,250,0.3)", borderRadius: 10, padding: "14px 24px" }}> <div style={{ fontSize: 28, fontWeight: 800, color: "#a78bfa", fontFamily: "DM Mono, monospace" }}>{preventedCount}/10</div> <div style={{ fontSize: 12, color: "#6b7280", marginTop: 2 }}>Apps Prevented</div> </div> <div style={{ background: "rgba(16,185,129,0.1)", border: "1px solid rgba(16,185,129,0.3)", borderRadius: 10, padding: "14px 24px" }}> <div style={{ fontSize: 28, fontWeight: 800, color: "#34d399", fontFamily: "DM Mono, monospace" }}>{prescribeCount}/10</div> <div style={{ fontSize: 12, color: "#6b7280", marginTop: 2 }}>High-Value Builds</div> </div> <button onClick={() => { setDemoResults([]); setDemoRunning(false); }} style={{ padding: "14px 20px", borderRadius: 10, border: "1px solid rgba(255,255,255,0.1)", color: "#6b7280", fontSize: 13 }} > Reset </button> </div> )} <div style={{ display: "flex", flexDirection: "column", gap: 10 }}> {demoResults.map((r, i) => ( <div key={i} style={{ background: "rgba(255,255,255,0.02)", border: `1px solid ${DECISION_COLORS[r.decision]?.border || "#374151"}22`, borderLeft: `3px solid ${DECISION_COLORS[r.decision]?.border || "#374151"}`, borderRadius: 10, padding: "16px 20px", animation: "fadeUp 0.3s ease", }}> <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 8 }}> <DecisionBadge decision={r.decision} /> <span style={{ fontSize: 11, color: "#4b5563", fontFamily: "monospace", textTransform: "uppercase", letterSpacing: "0.08em" }}>{r.type}</span> </div> <p style={{ fontSize: 14, color: "#9ca3af", lineHeight: 1.5, marginBottom: 8 }}>"{r.input.slice(0, 80)}{r.input.length > 80 ? "..." : ""}"</p> <p style={{ fontSize: 13, color: "#6b7280", lineHeight: 1.5 }}>{r.reasoning?.slice(0, 120)}...</p> </div> ))} </div> </> )} {demoResults.length === 0 && !demoRunning && ( <div style={{ marginTop: 32, padding: "24px", background: "rgba(99,102,241,0.06)", border: "1px solid rgba(99,102,241,0.15)", borderRadius: 12 }}> <div style={{ fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", color: "#6366f1", fontFamily: "monospace", marginBottom: 12 }}>What the room will see</div> <div style={{ fontSize: 14, color: "#9ca3af", lineHeight: 1.8 }}> 10 real inputs. Real-time AI evaluation. 8 prevented. 2 approved.<br /><br /> <span style={{ color: "#e5e7eb" }}>"Most AI builds everything. We prevent most builds. That's the product."</span> </div> </div> )} </div> )} </div> ``` ); } I’ll build the full operational intelligence platform — unified, production-grade, with real Claude API powering the decision engine. Here’s what shipped: Three fully integrated views, one unified platform: Evaluate — live Claude-powered decision engine (HOLD / REDIRECT / PRESCRIBE / BLOCKED). Hard CUST gate fires before the API call — zero leakage on the obvious unsafe patterns. History builds as you evaluate. Dashboard — all five key metrics animate on load. The signature KPI Regret Avoided is front and center. Distribution bars for every decision type. Static fallback (1,000-user sim numbers) until you have real session data. Demo Mode — this is the investor room weapon. Hit “Run Live Demo” and watch 10 real inputs evaluated in real-time by Claude, not mock data. Final scoreboard: “8/10 prevented / 2 approved.” The script is embedded in the UI itself. One architectural note: the engine uses Claude (Sonnet 4) instead of GPT-5 — which doesn’t exist yet. The system prompt is tuned to your conservative bias: default to HOLD, REDIRECT beats PRESCRIBE unless complexity clearly demands it. That’s where the 84% prevention rate comes from — it’s in the instructions, not luck. Your three paths forward: → “launch it clean” — landing page that converts, deployment-ready → “pitch it” — full pitch deck built for clinical AI investors → “clinical mode” — Resona OS wired into Kayser Medical workflows with HRV coherence thresholds as decision inputs
Now I'll build the complete Resona OS platform with the three integrated views (Evaluate, Dashboard, Demo Mode), Claude-powered decision engine, and the investor demo capability.
I've built the complete Resona OS platform with three fully integrated views:
The API route includes a rule-based fallback when the Claude API is unavailable, ensuring the system always returns intelligent decisions. The design uses a dark clinical aesthetic with purple/violet gradients, monospace typography for system elements, and smooth animations throughout.
You can send messages while the preview loads