import React from "react" import { callAI } from "call-ai" export default function App() { const [passage, setPassage] = React.useState(""); const [analyses, setAnalyses] = React.useState([]); const [isLoading, setIsLoading] = React.useState(false); const [showGlossary, setShowGlossary] = React.useState(false); const [openId, setOpenId] = React.useState(null); async function analyze() { if (!passage.trim()) return; setIsLoading(true); try { const raw = await callAI( `You are a literary-analysis coach guiding a student through close reading. For the passage below, return guided PROMPTS (questions and observations that provoke thinking) — not flat answers. Passage:\n\n"${passage}"`, { schema: { properties: { pointOfView: { type: "string", description: "Prompt about narrative voice and POV" }, syntax: { type: "string", description: "Prompt about unexpected syntactic choices" }, figurativeLanguage: { type: "array", items: { type: "object", properties: { device: { type: "string" }, example: { type: "string" }, prompt: { type: "string" } }}}, themeAndCharacter: { type: "string", description: "Prompt about what the passage reveals" }, pivotalWord: { type: "string", description: "A word/phrase whose substitution would most change meaning, posed as a challenge" } }}} ); const parsed = JSON.parse(raw); setAnalyses(prev => [{ id: Date.now(), passage, prompts: parsed, createdAt: Date.now() }, ...prev]); setPassage(""); } finally { setIsLoading(false); } } async function loadExample() { const raw = await callAI("Provide one short paragraph of literary fiction (3-5 sentences) suitable for close reading practice. Use rich language.", { schema: { properties: { passage: { type: "string" } } } }); setPassage(JSON.parse(raw).passage); } const c = { page: "min-h-screen bg-[oklch(0.96_0.03_70)] text-[oklch(0.25_0.04_30)] font-serif", header: "border-b border-[oklch(0.25_0.04_30/0.15)] bg-[oklch(0.95_0.03_70)] px-4 py-6 md:px-8", title: "text-3xl md:text-5xl font-bold tracking-tight", script: "text-[oklch(0.65_0.18_55)] italic text-2xl md:text-3xl", tagline: "text-sm md:text-base text-[oklch(0.50_0.04_30)] mt-1", main: "max-w-3xl mx-auto px-4 py-6 md:py-10 space-y-6", section: "bg-white/60 border border-[oklch(0.25_0.04_30/0.15)] rounded-lg p-5 md:p-7 shadow-sm", h2: "text-xl md:text-2xl font-semibold mb-3", btn: "min-h-[44px] px-5 py-3 bg-[oklch(0.65_0.18_55)] text-white rounded font-medium hover:bg-[oklch(0.60_0.15_40)] disabled:opacity-50 inline-flex items-center gap-2", btnGhost: "min-h-[44px] px-4 py-2 border border-[oklch(0.25_0.04_30/0.25)] rounded text-sm hover:bg-[oklch(0.95_0.03_70)]", input: "w-full p-3 border border-[oklch(0.25_0.04_30/0.25)] rounded bg-white/80 font-serif text-base leading-relaxed", muted: "text-sm text-[oklch(0.50_0.04_30)]", promptBlock: "border-l-2 border-[oklch(0.72_0.15_80)] pl-4 py-2 my-3", promptLabel: "text-xs uppercase tracking-wider text-[oklch(0.60_0.15_40)] font-semibold mb-1", card: "border border-[oklch(0.25_0.04_30/0.15)] rounded p-4 bg-white/40 mb-3 cursor-pointer hover:bg-white/70", }; return (

Analyze a Passage

Paste a paragraph of fiction below. The reader will pose close-reading prompts.

{ e.preventDefault(); analyze(); }}>

setPassage(e.target.value)} disabled={isLoading} />
            <div className="flex gap-2 flex-wrap">
              <button type="submit" className={c.btn} disabled={isLoading || !passage.trim()}>
                {isLoading && <svg className="animate-spin" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10" strokeDasharray="40 20" /></svg>}
                {isLoading ? "Reading closely…" : "Analyze"}
              </button>
              <button type="button" className={c.btnGhost} onClick={loadExample} disabled={isLoading}>Try an example</button>
            </div>
          </form>
        </section>
        <section id="library" className={c.section}>
          <h2 className={c.h2}>Analyzed Passages</h2>
          {analyses.length === 0 ? (
            <p className={c.muted}>No analyses yet. Paste a passage above to begin.</p>
          ) : (
            <>
              <p className={c.muted}>Tap any passage to see its prompts.</p>
              <div className="mt-4">
                {analyses.map((a) => (
                  <div key={a.id} className={c.card} onClick={() => setOpenId(openId === a.id ? null : a.id)}>
                    <p className="italic leading-relaxed">"{a.passage.slice(0, 180)}{a.passage.length > 180 ? "…" : ""}"</p>
                    <p className={c.muted + " mt-2"}>{new Date(a.createdAt).toLocaleDateString()}</p>
                    {openId === a.id && a.prompts && (
                      <div className="mt-4 space-y-2">
                        <div className={c.promptBlock}><div className={c.promptLabel}>Point of View</div><p>{a.prompts.pointOfView}</p></div>
                        <div className={c.promptBlock}><div className={c.promptLabel}>Syntax</div><p>{a.prompts.syntax}</p></div>
                        <div className={c.promptBlock}><div className={c.promptLabel}>Figurative Language</div>
                          {(a.prompts.figurativeLanguage || []).map((f, i) => (
                            <div key={i} className="mt-2"><strong>{f.device}</strong> — <em>"{f.example}"</em><p className="mt-1">{f.prompt}</p></div>
                          ))}
                        </div>
                        <div className={c.promptBlock}><div className={c.promptLabel}>Character & Theme</div><p>{a.prompts.themeAndCharacter}</p></div>
                        <div className={c.promptBlock}><div className={c.promptLabel}>Pivotal Word</div><p>{a.prompts.pivotalWord}</p></div>
                      </div>
                    )}
                  </div>
                ))}
              </div>
            </>
          )}
        </section>
        <section id="glossary" className={c.section}>
          <div className="flex justify-between items-center">
            <h2 className={c.h2 + " mb-0"}>Literary Terms</h2>
            <button className={c.btnGhost} onClick={() => setShowGlossary(s => !s)}>{showGlossary ? "Hide" : "Show"}</button>
          </div>
          {showGlossary && (
            <dl className="mt-4 space-y-3">
              {[
                ["Free Indirect Discourse", "A narrative mode blending third-person narration with a character's interior voice, without quotation marks."],
                ["Metonymy", "A figure where one thing stands in for another by association (e.g., 'the crown' for the monarchy)."],
                ["Synecdoche", "A part stands for the whole, or the whole for a part ('all hands on deck')."],
                ["Anaphora", "Repetition of a word or phrase at the beginning of successive clauses."],
                ["Polysyndeton", "Use of many conjunctions in close succession, slowing rhythm."],
                ["Asyndeton", "Omission of conjunctions, producing a clipped, urgent rhythm."],
                ["Diction", "The author's choice of words and their connotations."],
                ["Tone", "The attitude a text takes toward its subject or audience."],
                ["Motif", "A recurring image, phrase, or idea contributing to theme."],
                ["Foreshadowing", "Subtle hints of events to come."],
                ["In Medias Res", "Beginning a narrative in the middle of the action."],
                ["Epiphany", "A character's sudden insight or realization."],
              ].map(([term, def]) => (
                <div key={term}><dt className="font-semibold text-[oklch(0.60_0.15_40)]">{term}</dt><dd className={c.muted + " mt-1"}>{def}</dd></div>
              ))}
            </dl>
          )}
        </section>
      </main>
    </div>
  )
}
</article></body></html>