import React from "react" import { callAI } from "call-ai" import { useFireproof } from "use-fireproof" export default function App() { const { database, useDocument, useLiveQuery } = useFireproof("authorship-codex") const { doc: newExcerpt, merge: mergeExcerpt, submit: submitExcerpt } = useDocument({ type: "excerpt", title: "", body: "", origin: "human", revealed: false, createdAt: Date.now() }) const { docs: excerpts } = useLiveQuery("type", { key: "excerpt", descending: true }) const { docs: guesses } = useLiveQuery("type", { key: "guess" }) const { docs: reflections } = useLiveQuery("type", { key: "reflection", descending: true }) const [reflectionText, setReflectionText] = React.useState("") const [activeExcerptId, setActiveExcerptId] = React.useState(null) const [isReflecting, setIsReflecting] = React.useState(false) const [isSuggesting, setIsSuggesting] = React.useState(false) async function suggestExcerpt() { setIsSuggesting(true) try { const r = await callAI("Generate a 2-3 sentence literary excerpt with title and origin (human/ai/cowritten).", { schema: { properties: { title: { type: "string" }, body: { type: "string" }, origin: { type: "string" } } } }) const data = JSON.parse(r) mergeExcerpt({ title: data.title, body: data.body, origin: data.origin }) } finally { setIsSuggesting(false) } } async function submitGuess(excerptId, guess) { await database.put({ type: "guess", excerptId, guess, userSlug: "visitor", displayName: "visitor", createdAt: Date.now() }) } async function submitReflection() { if (!reflectionText.trim()) return setIsReflecting(true) try { const r = await callAI(`A reader reflecting on judging human vs AI writing said: "${reflectionText}". Respond as a Socratic facilitator with one probing follow-up question connecting their observation to a concept (Turing Test limits, the implied author, emotional authenticity, or AI authorship ethics). Name the concept.`, { schema: { properties: { concept: { type: "string" }, question: { type: "string" } } } }) const data = JSON.parse(r) await database.put({ type: "reflection", text: reflectionText, concept: data.concept, followUp: data.question, userSlug: "visitor", displayName: "visitor", avatarUrl: "", createdAt: Date.now() }) setReflectionText("") } finally { setIsReflecting(false) } } const c = { page: "min-h-screen bg-[oklch(0.06_0_0)] text-[oklch(0.90_0_0)] font-['Cinzel',serif] pb-24", header: "border-b border-[oklch(0.40_0_0)] bg-[oklch(0.17_0_0)] px-5 py-6 sticky top-0 z-10", title: "text-2xl font-bold tracking-[0.2em] text-[oklch(0.97_0.07_100)] font-['Cinzel_Decorative',serif]", tagline: "text-xs tracking-widest text-[oklch(0.73_0.10_78)] mt-1 uppercase", main: "max-w-2xl mx-auto px-4 py-6 space-y-6", section: "border border-[oklch(0.40_0_0)] bg-[oklch(0.17_0_0)] rounded-sm p-5 shadow-lg", sectionTitle: "text-lg tracking-widest text-[oklch(0.73_0.10_78)] uppercase border-b border-[oklch(0.40_0_0)] pb-2 mb-4", btn: "min-h-[44px] px-4 py-3 bg-[oklch(0.32_0.10_25)] border border-[oklch(0.73_0.10_78)] text-[oklch(0.97_0.07_100)] tracking-widest uppercase text-sm hover:bg-[oklch(0.20_0.07_22)] disabled:opacity-50", input: "w-full min-h-[44px] px-3 py-2 bg-[oklch(0.06_0_0)] border border-[oklch(0.40_0_0)] text-[oklch(0.90_0_0)] focus:border-[oklch(0.73_0.10_78)] outline-none", muted: "text-[oklch(0.55_0_0)] text-sm italic" } return (

Compose Excerpt

mergeExcerpt({ title: e.target.value })} />

mergeExcerpt({ body: e.target.value })} />
              <select className={c.input} value={newExcerpt.origin} onChange={e => mergeExcerpt({ origin: e.target.value })}>
                <option value="human">Human-written</option>
                <option value="ai">AI-generated</option>
                <option value="cowritten">Co-written</option>
              </select>
              <div className="flex gap-2">
                <button type="submit" className={c.btn}>Add to Codex</button>
                <button type="button" onClick={suggestExcerpt} disabled={isSuggesting} className={c.btn}>
                  {isSuggesting ? <svg className="animate-spin w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10" strokeDasharray="50" /></svg> : "Suggest"}
                </button>
              </div>
            </form>
        </section>
        <section id="quiz" className={c.section}>
          <h2 className={c.sectionTitle}>The Quiz</h2>
          {excerpts.filter(e => !e.revealed).length === 0 ? (
            <p className={c.muted}>No excerpts await judgment.</p>
          ) : excerpts.filter(e => !e.revealed).map(ex => {
            const allGuesses = guesses.filter(g => g.excerptId === ex._id)
            return (
              <div key={ex._id} className="mb-5 pb-4 border-b border-[oklch(0.40_0_0)] last:border-0">
                <h3 className="text-[oklch(0.97_0.07_100)] mb-2">{ex.title}</h3>
                <p className="text-[oklch(0.78_0.05_70)] italic mb-3 leading-relaxed">{ex.body}</p>
                <div className="flex flex-wrap gap-2">
                    {["human","ai","cowritten"].map(o => (
                      <button key={o} onClick={() => submitGuess(ex._id, o)} className={c.btn}>{o}</button>
                    ))}
                  </div>
                <p className="text-xs text-[oklch(0.55_0_0)] mt-2">{allGuesses.length} guesses cast</p>
              </div>
            )
          })}
        </section>
        <section id="reveal" className={c.section}>
          <h2 className={c.sectionTitle}>The Reveal</h2>
          {excerpts.filter(e => e.revealed).length === 0 && excerpts.filter(e => !e.revealed).length === 0 && (
            <p className={c.muted}>Nothing yet unmasked.</p>
          )}
          {excerpts.filter(e => !e.revealed).map(ex => (
            <div key={ex._id} className="mb-3 flex items-center justify-between">
              <span className="text-sm text-[oklch(0.78_0.05_70)]">{ex.title}</span>
              <button onClick={() => database.put({ ...ex, revealed: true })} className={c.btn}>Reveal</button>
            </div>
          ))}
          {excerpts.filter(e => e.revealed).map(ex => {
            const exGuesses = guesses.filter(g => g.excerptId === ex._id)
            const correct = exGuesses.filter(g => g.guess === ex.origin)
            return (
              <div key={ex._id} className="mb-4 pb-3 border-b border-[oklch(0.40_0_0)] last:border-0">
                <h3 className="text-[oklch(0.97_0.07_100)]">{ex.title}</h3>
                <p className="text-sm text-[oklch(0.73_0.10_78)] uppercase tracking-widest">Origin: {ex.origin}</p>
                <p className="text-xs text-[oklch(0.55_0_0)] mt-1">{correct.length} of {exGuesses.length} judged true</p>
              </div>
            )
          })}
        </section>
        <section id="discussion" className={c.section}>
          <h2 className={c.sectionTitle}>The Inquiry</h2>
          <p className={c.muted + " mb-4"}>What markers did you use? What do they reveal about authorship — voice, intent, surprise, authenticity?</p>
          <div className="space-y-3 mb-5">
              <textarea className={c.input} rows={3} placeholder="Reflect on your judging criteria..." value={reflectionText} onChange={e => setReflectionText(e.target.value)} />
              <button onClick={submitReflection} disabled={isReflecting || !reflectionText.trim()} className={c.btn}>
                {isReflecting ? <span className="flex items-center gap-2"><svg className="animate-spin w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10" strokeDasharray="50" /></svg> Consulting...</span> : "Offer Reflection"}
              </button>
            </div>
          <div className="space-y-4">
            {reflections.map(r => (
              <div key={r._id} className="border-l-2 border-[oklch(0.73_0.10_78)] pl-3">
                <div className="flex items-center gap-2 mb-1">
                  {r.avatarUrl && <img src={r.avatarUrl} alt="" className="w-6 h-6 rounded-full" />}
                  <span className="text-xs text-[oklch(0.73_0.10_78)] tracking-widest uppercase">{r.displayName}</span>
                </div>
                <p className="text-[oklch(0.90_0_0)] italic">"{r.text}"</p>
                <p className="text-xs text-[oklch(0.55_0_0)] uppercase tracking-widest mt-2">On {r.concept}:</p>
                <p className="text-[oklch(0.78_0.05_70)] text-sm mt-1">{r.followUp}</p>
              </div>
            ))}
          </div>
        </section>
      </main>
    </div>
  )
}</article></body></html>