import React from "react" import { callAI } from "call-ai" import { useFireproof } from "use-fireproof" export default function App() { const { database, useLiveQuery } = useFireproof("recovered-readings") const { docs: readings } = useLiveQuery("createdAt", { descending: true }) const [text, setText] = React.useState("Jane Eyre — Charlotte Brontë") const [lens, setLens] = React.useState("Gynocriticism — recover women's writing tradition (Showalter)") const [reading, setReading] = React.useState(null) const [loadingReading, setLoadingReading] = React.useState(false) const [practice, setPractice] = React.useState("") const [activeReadingId, setActiveReadingId] = React.useState(null) const [feedback, setFeedback] = React.useState(null) const [loadingFeedback, setLoadingFeedback] = React.useState(false) async function generateReading(e) { e?.preventDefault?.() setLoadingReading(true) setReading(null) try { const res = await callAI( `You are a feminist literary criticism tutor. For the canonical text "${text}" using the approach "${lens}", produce a structured reading.`, { schema: { properties: { mainstreamReading: { type: "string", description: "The dominant canonical interpretation" }, feministReading: { type: "string", description: "The feminist counter-reading" }, critics: { type: "array", items: { type: "string", description: "Critic name + their specific contribution" } }, recovered: { type: "array", items: { type: "string", description: "Recovered element: dismissed character, erased subplot, silenced voice, suppressed tradition" } }, keyQuestion: { type: "string", description: "A guiding question for student practice" }, }}} ) const parsed = JSON.parse(res) setReading(parsed) const saved = await database.put({ type: "reading", text, lens, ...parsed, createdAt: Date.now(), authorDisplayName: "visitor", }) setActiveReadingId(saved.id) } finally { setLoadingReading(false) } } async function submitPractice(e) { e?.preventDefault?.() if (!practice.trim()) return setLoadingFeedback(true); setFeedback(null) try { const res = await callAI( `Evaluate this student's feminist reading of "${text}" using "${lens}". Student wrote: "${practice}". Score 1-10 and coach them.`, { schema: { properties: { score: { type: "number" }, strengths: { type: "string" }, deepenWith: { type: "array", items: { type: "string" } }, missedCritic: { type: "string", description: "A feminist critic they could engage" }, }}} ) const parsed = JSON.parse(res) setFeedback(parsed) await database.put({ type: "practice", text, lens, practice, ...parsed, readingId: activeReadingId, createdAt: Date.now(), authorDisplayName: "visitor", }) setPractice("") } finally { setLoadingFeedback(false) } } async function suggestPractice() { setLoadingFeedback(true) try { const res = await callAI( `Write a 2-3 sentence example student feminist reading of "${text}" using "${lens}" — the kind a beginner might attempt.`, { schema: { properties: { example: { type: "string" } } } } ) setPractice(JSON.parse(res).example) } finally { setLoadingFeedback(false) } } const Spinner = () => ( ) const c = { page: "min-h-screen bg-[#f4ead5] text-[#2b1d12] font-serif pb-24", header: "bg-[#2b1d12] text-[#f4ead5] px-5 py-6 border-b-4 border-[#a8431a]", title: "text-3xl md:text-4xl tracking-wide", tagline: "text-sm italic text-[#e6d3a3] mt-1", main: "max-w-3xl mx-auto px-4 py-6 space-y-6", section: "bg-[#fbf5e4] border border-[#2b1d12]/15 rounded-lg p-5 shadow-sm", h2: "text-2xl text-[#7a2e0e] mb-3 border-b border-[#a8431a]/40 pb-2", label: "block text-sm font-semibold text-[#2b1d12] mb-1", input: "w-full px-3 py-3 min-h-[44px] bg-white border border-[#2b1d12]/30 rounded text-[#2b1d12] focus:outline-none focus:border-[#a8431a]", select: "w-full px-3 py-3 min-h-[44px] bg-white border border-[#2b1d12]/30 rounded text-[#2b1d12]", textarea: "w-full px-3 py-2 bg-white border border-[#2b1d12]/30 rounded text-[#2b1d12] min-h-[120px]", btn: "w-full min-h-[44px] py-3 px-4 bg-[#a8431a] text-[#f4ead5] rounded font-semibold hover:bg-[#7a2e0e] disabled:opacity-50 flex items-center justify-center gap-2", btnGhost: "text-xs underline text-[#7a2e0e] hover:text-[#a8431a]", card: "bg-white border-l-4 border-[#a8431a] p-4 rounded shadow-sm", pill: "inline-block text-xs bg-[#2b1d12] text-[#f4ead5] px-2 py-1 rounded mr-2", muted: "text-sm text-[#5a4632] italic", } return (

{/* selector pass */}

Practice Reading

Your feminist reading of {text}

setPractice(e.target.value)} placeholder="Apply the lens. What does a feminist reading recover here?" />
            <div className="flex gap-2">
              <button type="submit" className={c.btn} disabled={loadingFeedback || !practice.trim()}>
                {loadingFeedback ? <><Spinner /> Scoring…</> : "Submit for Feedback"}
              </button>
            </div>
            <button type="button" onClick={suggestPractice} className={c.btnGhost} disabled={loadingFeedback}>
              Suggest an example attempt
            </button>
          </form>
          {feedback && (
            <div className="mt-4 space-y-2">
              <div className={c.card}>
                <span className={c.pill}>Score {feedback.score}/10</span>
                <p className="mt-2 text-sm"><strong>Strengths:</strong> {feedback.strengths}</p>
                <p className="text-sm mt-1"><strong>Engage:</strong> {feedback.missedCritic}</p>
                <p className="text-sm mt-2"><strong>Deepen with:</strong></p>
                <ul className="text-sm list-disc list-inside">
                  {feedback.deepenWith?.map((d, i) => <li key={i}>{d}</li>)}
                </ul>
              </div>
            </div>
          )}
        </section>

<section id="library" className={c.section}>
          <h2 className={c.h2}>Recovered Readings Library</h2>
          {readings.length === 0 ? (
            <p className={c.muted}>No readings saved yet. Generate one above to start the library.</p>
          ) : (
            <ul className="space-y-3">
              {readings.map((d) => (
                <li key={d._id} className={c.card}>
                  <div className="flex items-center gap-2 mb-1">
                    {d.authorAvatarUrl && <img src={d.authorAvatarUrl} alt="" className="w-5 h-5 rounded-full" />}
                    <span className="text-xs text-[#5a4632]">{d.authorDisplayName ?? "anon"}</span>
                    <span className={c.pill + " ml-auto"}>{d.type}</span>
                  </div>
                  <p className="font-semibold text-sm">{d.text}</p>
                  <p className="text-xs italic text-[#5a4632] mb-2">{d.lens}</p>
                  {d.type === "reading" ? (
                    <p className="text-sm">{d.feministReading?.slice(0, 200)}…</p>
                  ) : (
                    <>
                      <p className="text-sm"><em>"{d.practice?.slice(0, 160)}…"</em></p>
                      <p className="text-xs mt-1">Score: {d.score}/10</p>
                    </>
                  )}
                </li>
              ))}
            </ul>
          )}
        </section>
      </main>
    </div>
  )
}
</article></body></html>