import React, { useState } from "react"; import { callAI } from "call-ai"; import { useFireproof } from "use-fireproof"; import { useVibe } from "use-vibes"; const LANDMARKS = [ { name: "the Moon", km: 384400 }, { name: "the Sun", km: 149600000 }, { name: "Mars at closest approach", km: 54600000 }, { name: "the edge of the Solar System (Voyager 1)", km: 23000000000 }, { name: "Proxima Centauri, the nearest star", km: 4.0e13 }, { name: "the center of the Milky Way", km: 2.5e17 }, { name: "the Andromeda Galaxy", km: 2.4e19 }, { name: "the edge of the observable universe", km: 8.8e23 }, ]; const MIN_PRICE = 1; const MAX_PRICE = 5000000; const MIN_KM = LANDMARKS[0].km; const MAX_KM = LANDMARKS[LANDMARKS.length - 1].km; function priceToDistance(price) { const p = Math.min(Math.max(price, MIN_PRICE), MAX_PRICE); const t = (Math.log(p) - Math.log(MIN_PRICE)) / (Math.log(MAX_PRICE) - Math.log(MIN_PRICE)); const km = Math.exp(Math.log(MIN_KM) + t * (Math.log(MAX_KM) - Math.log(MIN_KM))); return km; } function describeLandmark(km) { for (let i = 0; i < LANDMARKS.length; i++) { if (km <= LANDMARKS[i].km) { const prev = LANDMARKS[i - 1]; const cur = LANDMARKS[i]; if (!prev) return { pct: Math.round((km / cur.km) * 100), target: cur.name }; const pct = Math.round(((km - prev.km) / (cur.km - prev.km)) * 100); return { pct, target: cur.name, from: prev.name }; } } return { pct: 100, target: LANDMARKS[LANDMARKS.length - 1].name }; } function formatKm(km) { if (km > 1e12) return (km / 1e12).toFixed(2) + " trillion km"; if (km > 1e9) return (km / 1e9).toFixed(2) + " billion km"; if (km > 1e6) return (km / 1e6).toFixed(2) + " million km"; return Math.round(km).toLocaleString() + " km"; } function Spinner() { return ( ); } export default function App() { const { useLiveQuery, database } = useFireproof("cosmicAppraisal"); const { can, me } = useVibe("cosmicAppraisal"); const { docs: flights } = useLiveQuery("createdAt", { descending: true }); const [title, setTitle] = useState(""); const [price, setPrice] = useState(""); const [isLoading, setIsLoading] = useState(false); const [isSuggesting, setIsSuggesting] = useState(false); const [selected, setSelected] = useState(null); const [error, setError] = useState(""); async function handleSubmit(e) { e.preventDefault(); setError(""); const numericPrice = parseFloat(price); if (!title.trim() || !numericPrice || numericPrice <= 0) return; const km = priceToDistance(numericPrice); const landmark = describeLandmark(km); setIsLoading(true); let blurb = ""; try { const res = await callAI( `An artwork titled "${title.trim()}" sold for $${numericPrice.toLocaleString()}. On a cosmic price scale, that maps to a journey of ${formatKm( km )} — roughly ${landmark.pct}% of the way ${landmark.from ? `from ${landmark.from} ` : ""}to ${landmark.target}. Write one vivid, evocative sentence describing this journey, as if narrating a voyage through space. No more than 30 words.`, { schema: { properties: { sentence: { type: "string", description: "One vivid sentence narrating the journey" } } } } ); blurb = JSON.parse(res).sentence; } catch (err) { blurb = err && err.reason === "refusal" ? "The cosmos declined to narrate this one — try rephrasing the title." : ""; } finally { setIsLoading(false); } const draft = { title: title.trim(), price: numericPrice, km, pct: landmark.pct, target: landmark.target, from: landmark.from || null, blurb, createdAt: Date.now(), type: "flight", authorHandle: me?.userHandle, }; if (!can.create(draft).ok) { setError("You don't have permission to log a flight right now."); return; } const res = await database.put(draft); setSelected(res.id); setTitle(""); setPrice(""); } async function handleSuggest() { setIsSuggesting(true); try { const res = await callAI( "Invent a whimsical fictional artwork title and a plausible art-auction sale price in USD (between 200 and 500000). Keep the title short and evocative.", { schema: { properties: { title: { type: "string", description: "Short artwork title" }, price: { type: "number", description: "Sale price in USD" }, }, }, } ); const data = JSON.parse(res); setTitle(data.title || ""); setPrice(String(Math.round(data.price || 1000))); } catch (err) { setError( err && err.reason === "refusal" ? "The muse declined to suggest anything — try again." : "Suggestion failed, try again." ); } finally { setIsSuggesting(false); } } const c = { bg: "bg-[var(--background)]", surface: "bg-[var(--surface)]", ink: "text-[var(--text-primary)]", sub: "text-[var(--text-secondary)]", border: "border-[var(--border)]", primaryBtn: "bg-[var(--primary)] text-[var(--on-primary,#ffffff)] border-3 border-[var(--border)] shadow hover:shadow-lg hover:-translate-x-0.5 hover:-translate-y-0.5 active:translate-x-0.5 active:translate-y-0.5 active:shadow-none transition-all duration-150", secondaryBtn: "bg-[var(--secondary)] text-[var(--text-primary)] border-3 border-[var(--border)] shadow-sm hover:shadow hover:-translate-x-0.5 hover:-translate-y-0.5 active:translate-x-0.5 active:translate-y-0.5 active:shadow-none transition-all duration-150", ghostBtn: "bg-[var(--surface)] text-[var(--text-primary)] border-3 border-[var(--border)] hover:shadow-sm transition-all duration-150", card: "bg-[var(--surface)] border-3 border-[var(--border)] rounded shadow", accentBar: "h-1.5 w-full flex overflow-hidden rounded-t", }; return (

Convert a Sale

Turn an artwork's price into a journey across the cosmos.

{error && (

{error}

)}

Artwork Title setTitle(e.target.value)} className={`w-full min-h-[44px] px-3 py-2 rounded border-3 ${c.border} ${c.surface} focus:-translate-x-0.5 focus:-translate-y-0.5 focus:shadow transition-transform duration-150 outline-none`} placeholder='e.g. "Untitled Blue Study"' />

Sale Price (USD) setPrice(e.target.value)} className={`w-full min-h-[44px] px-3 py-2 rounded border-3 ${c.border} ${c.surface} font-[var(--font-family-mono)] focus:-translate-x-0.5 focus:-translate-y-0.5 focus:shadow transition-transform duration-150 outline-none`} placeholder="4500" />

Flight Log

{flights.length === 0 ? (

No flights logged yet — convert your first sale above and watch it take off.

) : (

{i > 0 &&
}

)}

); }