import React, { useState } from "react"; import { callAI } from "call-ai"; import { useFireproof } from "use-fireproof"; import { useVibe } from "use-vibes"; function Spinner() { return ( ); } function IconClose() { return ( ); } function IconSparkle() { return ( ); } function IconBriefcase() { return ( ); } const jobSchema = { properties: { title: { type: "string", description: "A specific, unusual job title" }, workplace: { type: "string", description: "Where they work, short phrase" }, income: { type: "string", description: "One of: barely-scraping-by, modest, comfortable, secretly-wealthy" }, description: { type: "string", description: "2-3 sentences on daily duties, tone matching the genre" }, complication: { type: "string", description: "One sentence: a story-useful complication or secret tied to this job" }, }, }; const seedSchema = { properties: { genre: { type: "string", description: "A genre for a character" }, traits: { type: "string", description: "2-3 personality traits or quirks, comma separated" }, }, }; export default function App() { const { useLiveQuery, database } = useFireproof("jobGenerator"); const { can, ready } = useVibe("jobGenerator"); const [genre, setGenre] = useState(""); const [traits, setTraits] = useState(""); const [isGenerating, setIsGenerating] = useState(false); const [isSuggesting, setIsSuggesting] = useState(false); const [error, setError] = useState(""); const [openId, setOpenId] = useState(null); const { docs: jobs } = useLiveQuery("createdAt", { descending: true }); const draft = { type: "job", title: "placeholder", genre, traits, description: "", createdAt: Date.now(), }; const createCheck = ready ? can.create(draft) : { pending: true }; async function handleGenerate() { if (!genre.trim() && !traits.trim()) { setError("Give at least a genre or a trait to work from."); return; } setError(""); setIsGenerating(true); try { const prompt = `Invent an interesting, specific day job for a fiction character. Genre: ${genre || "any"}. Character traits/quirks: ${traits || "unspecified"}. The job should be unusual but plausible, and useful for a writer building a scene. Keep description short and vivid.`; const res = await callAI(prompt, { schema: jobSchema }); const data = JSON.parse(res); const newDoc = { type: "job", title: data.title || "Mystery Occupation", workplace: data.workplace || "", income: data.income || "modest", description: data.description || "", complication: data.complication || "", genre: genre.trim(), traits: traits.trim(), createdAt: Date.now(), }; const result = await database.put(newDoc); setOpenId(result.id); setGenre(""); setTraits(""); } catch (err) { if (err && err.reason === "refusal") { setError(err.explanation || "Couldn't invent that one — try rephrasing the character."); } else { setError("Something went wrong generating the job. Try again."); } } finally { setIsGenerating(false); } } async function handleSuggest() { setIsSuggesting(true); setError(""); try { const res = await callAI( "Suggest a random fictional character seed for a writer: a genre and 2-3 personality traits or quirks.", { schema: seedSchema } ); const data = JSON.parse(res); setGenre(data.genre || ""); setTraits(data.traits || ""); } catch (err) { setError("Couldn't fetch a suggestion right now."); } finally { setIsSuggesting(false); } } const openJob = jobs.find((j) => j._id === openId); const c = { bg: "bg-[var(--background)]", surface: "bg-[var(--surface)]", overlay: "bg-[var(--surface-overlay)]", ink: "text-[var(--text-primary)]", sub: "text-[var(--text-secondary)]", border: "border-[var(--border)]", primary: "bg-[var(--primary)]", onPrimary: "text-[var(--on-primary,#ffffff)]", secondary: "bg-[var(--secondary)]", onSecondary: "text-[var(--on-secondary,var(--text-primary))]", accent: "bg-[var(--accent)]", onAccent: "text-[var(--on-info,#ffffff)]", }; const incomeColor = (level) => { if (level === "secretly-wealthy") return "bg-[var(--success)]"; if (level === "comfortable") return "bg-[var(--accent)]"; if (level === "barely-scraping-by") return "bg-[var(--error)]"; return "bg-[var(--warning)]"; }; return (

Character Sketch

Genre setGenre(e.target.value)} placeholder="e.g. cozy mystery, space opera, high fantasy" className={`w-full min-h-[44px] px-3 rounded-[var(--radius)] border-[var(--border-width)] ${c.border} ${c.surface} focus:translate-x-[-2px] focus:translate-y-[-2px] focus:shadow transition-transform duration-150`} />

Traits / quirks

setTraits(e.target.value)} placeholder="e.g. compulsive liar, terrified of birds" className={`flex-1 min-h-[44px] px-3 rounded-[var(--radius)] border-[var(--border-width)] ${c.border} ${c.surface} focus:translate-x-[-2px] focus:translate-y-[-2px] focus:shadow transition-transform duration-150`} />

{error && (

{error}

)} {createCheck.pending && (

Checking...

)} {!createCheck.pending && !createCheck.ok && (

Generating is unavailable right now.

)} {(!createCheck.pending && createCheck.ok) && ( )}

Roster ({jobs.length})

{jobs.length === 0 ? (

No day jobs forged yet. Give a character a reason to leave the house.

) : (

)}

{openJob && (

setOpenId(null)} >

e.stopPropagation()} >

Job File

{openJob.title}

{openJob.workplace &&

{openJob.workplace}

}

{openJob.genre && ( {openJob.genre} )} {openJob.income}

{openJob.traits && (

Character traits

{openJob.traits}

)}

Daily duties

{openJob.description}

{openJob.complication && (

Story complication

{openJob.complication}

)}

); }