@bojackduy/opencode-learn 0.1.6 → 1.1.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@bojackduy/opencode-learn",
-  "version": "0.1.6",
+  "version": "1.1.0",
   "description": "Pi learn system for OpenCode — Socratic teaching, graded quiz, Obsidian md_log, and visual makers. Port of amosblomqvist/learn (video: How I Use AI to Learn Things) to OpenCode.",
   "type": "module",
   "license": "MIT",

package/plugins/learn-tui.tsx

@@ -6,12 +6,66 @@ import { useKeyboard, useTerminalDimensions } from "@opentui/solid"
 import * as fs from "node:fs"
 import * as path from "node:path"
 import { watch } from "node:fs"
+import { SyntaxStyle } from "@opentui/core"
+function syntaxStyle(theme:any){
+  return SyntaxStyle.fromTheme([
+    { scope: ["default"], style: { foreground: theme.text } },
+    { scope: ["comment", "comment.documentation"], style: { foreground: theme.syntaxComment, italic: true } },
+    { scope: ["string", "symbol", "character", "character.special"], style: { foreground: theme.syntaxString } },
+    { scope: ["number", "boolean", "float", "constant"], style: { foreground: theme.syntaxNumber } },
+    { scope: ["keyword.return", "keyword.conditional", "keyword.repeat", "keyword.coroutine", "keyword", "keyword.directive", "keyword.modifier", "keyword.exception"], style: { foreground: theme.syntaxKeyword, italic: true } },
+    { scope: ["keyword.type"], style: { foreground: theme.syntaxType, bold: true, italic: true } },
+    { scope: ["keyword.import", "keyword.export", "tag.attribute"], style: { foreground: theme.syntaxKeyword } },
+    { scope: ["keyword.function", "function.method", "variable.member", "function", "constructor"], style: { foreground: theme.syntaxFunction } },
+    { scope: ["operator", "keyword.operator", "punctuation.delimiter", "keyword.conditional.ternary", "punctuation.special", "tag.delimiter"], style: { foreground: theme.syntaxOperator } },
+    { scope: ["variable", "variable.parameter", "function.method.call", "function.call", "property", "parameter", "field"], style: { foreground: theme.syntaxVariable } },
+    { scope: ["type", "module", "class", "namespace"], style: { foreground: theme.syntaxType } },
+    { scope: ["punctuation", "punctuation.bracket"], style: { foreground: theme.syntaxPunctuation } },
+    { scope: ["variable.builtin", "type.builtin", "function.builtin", "module.builtin", "constant.builtin", "variable.super", "tag"], style: { foreground: theme.error } },
+    { scope: ["string.escape", "string.regexp"], style: { foreground: theme.syntaxKeyword } },
+    { scope: ["markup.heading"], style: { foreground: theme.markdownHeading, bold: true } },
+    { scope: ["markup.heading.1"], style: { foreground: theme.markdownHeading, bold: true, underline: true } },
+    { scope: ["markup.bold", "markup.strong"], style: { foreground: theme.markdownStrong, bold: true } },
+    { scope: ["markup.italic"], style: { foreground: theme.markdownEmph, italic: true } },
+    { scope: ["markup.list"], style: { foreground: theme.markdownListItem } },
+    { scope: ["markup.quote"], style: { foreground: theme.markdownBlockQuote, italic: true } },
+    { scope: ["markup.raw", "markup.raw.block"], style: { foreground: theme.markdownCode } },
+    { scope: ["markup.raw.inline"], style: { foreground: theme.markdownCode, background: theme.background } },
+    { scope: ["markup.link", "markup.link.url", "string.special", "string.special.url"], style: { foreground: theme.markdownLink, underline: true } },
+    { scope: ["markup.link.label", "label"], style: { foreground: theme.markdownLinkText, underline: true } },
+    { scope: ["spell", "nospell", "markup.underline"], style: { foreground: theme.text } },
+    { scope: ["conceal", "markup.strikethrough", "markup.list.unchecked", "debug"], style: { foreground: theme.textMuted } },
+    { scope: ["comment.error", "error"], style: { foreground: theme.error, italic: true, bold: true } },
+    { scope: ["comment.warning", "warning"], style: { foreground: theme.warning, italic: true, bold: true } },
+    { scope: ["comment.todo", "comment.note"], style: { foreground: theme.info, italic: true, bold: true } },
+    { scope: ["type.definition"], style: { foreground: theme.syntaxType, bold: true } },
+    { scope: ["attribute", "annotation"], style: { foreground: theme.warning } },
+    { scope: ["markup.list.checked"], style: { foreground: theme.success } },
+    { scope: ["diff.plus"], style: { foreground: theme.diffAdded, background: theme.diffAddedBg } },
+    { scope: ["diff.minus"], style: { foreground: theme.diffRemoved, background: theme.diffRemovedBg } },
+    { scope: ["diff.delta"], style: { foreground: theme.diffContext, background: theme.diffContextBg } },
+    { scope: ["info"], style: { foreground: theme.info } },
+  ])
+}
 
 const PENDING_DIR = ".opencode/learn-pending"
 import { tmpdir } from "node:os"
 const TUI_LOG = path.join(tmpdir(), "learn-tui.log")
 function tlog(...a: any[]) { try { fs.appendFileSync(TUI_LOG, `[${new Date().toISOString()}] ${a.map(x=> typeof x==="string"? x : JSON.stringify(x)).join(" ")}\n`) } catch {} }
 function ensureDir(dir: string) { try { fs.mkdirSync(dir, { recursive: true }) } catch {} }
+function decodeQuizText(s: string): string {
+  if (!s || typeof s !== "string") return s
+  if (!s.includes("\\")) return s
+  // Convert literal \n / \r\n / \t escapes to real whitespace. Handles both single and double-escaped payloads (e.g. file contains \\n after JSON round-trip).
+  // Only touches backslash sequences, leaves actual newlines intact.
+  let out = s.replace(/\\r\\n/g, "\n").replace(/\\n/g, "\n").replace(/\\r/g, "\r").replace(/\\t/g, "\t")
+  // Decode escaped quotes/backslashes that may survive double-escaping: \" -> ", \' -> ', \\ -> \
+  // Do this after newline handling to avoid re-introducing \n.
+  out = out.replace(/\\"/g, '"').replace(/\\'/g, "'")
+  // Collapse double-escaped backslashes that are not part of \n already handled
+  out = out.replace(/\\\\/g, "\\")
+  return out
+}
 
 type QuizPending = {
   id: string
@@ -43,9 +97,16 @@ function QuizDialog(props: {
   onCancel: () => void
 }) {
   const theme = () => props.api.theme.current
+  const syntax = () => syntaxStyle(theme())
   const dims = useTerminalDimensions()
-  const popupWidth = () => Math.max(68, Math.min(dims().width - 4, 92))
-  const popupHeight = () => Math.max(4, Math.min(24, dims().height - 2))
+  const popupWidth = () => {
+    const w = dims().width
+    return Math.max(62, Math.min(w - 8, Math.floor(w * 0.80), 92))
+  }
+  const popupHeight = () => {
+    const h = dims().height
+    return Math.max(14, Math.min(h - 6, Math.floor(h * 0.62), 26))
+  }
   const options = () => props.request.options
   const correctSet = new Set(props.request.correctIndices)
   const isMulti = () => !!props.request.multiSelect
@@ -61,12 +122,38 @@ function QuizDialog(props: {
   const [feedback, setFeedback] = createSignal<{ correct: boolean; selectedIndices: number[] } | null>(null)
 
   let noteInputEl: any
-
+  let scrollRef: any
+  const [canScrollUp, setCanScrollUp] = createSignal(false)
+  const [canScrollDown, setCanScrollDown] = createSignal(false)
+  const updateScrollIndicators = () => {
+    try {
+      if (!scrollRef) { setCanScrollUp(false); setCanScrollDown(false); return }
+      const st = typeof scrollRef.scrollTop === "number" ? scrollRef.scrollTop : 0
+      const h = typeof scrollRef.height === "number" ? scrollRef.height : (scrollRef.viewportHeight ?? popupHeight())
+      const sh = typeof scrollRef.scrollHeight === "number" ? scrollRef.scrollHeight : 0
+      let effectiveSh = sh
+      if (!effectiveSh && typeof scrollRef.getChildren === "function") {
+        try { const kids = scrollRef.getChildren(); if (kids?.length) effectiveSh = Math.max(...kids.map((c:any)=> (c.y||0)+(c.height||0)), h) } catch {}
+      }
+      if (!effectiveSh || effectiveSh <= h + 1) { setCanScrollUp(false); setCanScrollDown(false); return }
+      setCanScrollUp(st > 0)
+      setCanScrollDown(st + h < effectiveSh - 1)
+    } catch { setCanScrollUp(false); setCanScrollDown(false) }
+  }
+  const scrollAmount = () => Math.max(1, Math.floor((scrollRef?.height ?? popupHeight()) / 3))
   createEffect(() => {
     if (focused() === "note" && noteInputEl) {
       try { noteInputEl.focus() } catch {}
     }
   })
+  // Keep indicators in sync on phase/dims/feedback changes
+  createEffect(() => { phase(); feedback(); dims(); setTimeout(updateScrollIndicators, 40); setTimeout(updateScrollIndicators, 200) })
+  createEffect(() => { note(); setTimeout(updateScrollIndicators, 40) })
+  createEffect(() => {
+    if (phase() !== "feedback" && phase() !== "select") return
+    const id = setInterval(updateScrollIndicators, 200)
+    onCleanup(() => clearInterval(id))
+  })
 
   const toggleOption = (idx: number) => {
     const opt = options()[idx]
@@ -170,13 +257,28 @@ function QuizDialog(props: {
     props.onSubmit({ answers: dontKnow() ? [] : sel, dontKnow: dontKnow(), note: note().trim() || undefined })
   }
 
+  const isPlainKey = (evt:any, want:string) => {
+    try {
+      const n = String(evt.name||evt.sequence||"").toLowerCase()
+      if (n !== want.toLowerCase()) return false
+      if (evt.ctrl || evt.meta || evt.option || evt.alt) return false
+      return true
+    } catch { return false }
+  }
   useKeyboard((evt: any) => {
     const key = evt.name || evt.sequence || evt.raw || ""
     const seq = evt.sequence || ""
+    const lower = String(key||"").toLowerCase()
     if ((phase() as any) === "classifying") { prevent(evt); return }
-    // When in feedback, any Enter/Esc confirms
+    // When in feedback, handle scroll first, then confirm
     if (phase() === "feedback") {
-      if (key === "enter" || seq === "\r" || key === "escape" || key === "esc") {
+      if (isPlainKey(evt,"d") || seq === "\x04") { prevent(evt); try { scrollRef?.scrollBy(scrollAmount()); setTimeout(updateScrollIndicators, 30); setTimeout(updateScrollIndicators, 120) } catch {} return }
+      if (isPlainKey(evt,"u") || seq === "\x15") { prevent(evt); try { scrollRef?.scrollBy(-scrollAmount()); setTimeout(updateScrollIndicators, 30); setTimeout(updateScrollIndicators, 120) } catch {} return }
+      if (isPlainKey(evt,"j") || seq === "\x1b[B") { prevent(evt); try { scrollRef?.scrollBy(1); setTimeout(updateScrollIndicators, 30) } catch {} return }
+      if (isPlainKey(evt,"k") || seq === "\x1b[A") { prevent(evt); try { scrollRef?.scrollBy(-1); setTimeout(updateScrollIndicators, 30) } catch {} return }
+      if (key === "pageup" || seq === "\x1b[5~") { prevent(evt); try { scrollRef?.scrollBy(-scrollAmount()); setTimeout(updateScrollIndicators, 30) } catch {} return }
+      if (key === "pagedown" || seq === "\x1b[6~") { prevent(evt); try { scrollRef?.scrollBy(scrollAmount()); setTimeout(updateScrollIndicators, 30) } catch {} return }
+      if ( lower === "enter" || seq === "\r" || lower === "escape" || lower === "esc") {
         prevent(evt)
         confirmFeedback()
       }
@@ -190,6 +292,11 @@ function QuizDialog(props: {
       // Allow typing to go to input; don't prevent
       return
     }
+    // d/u scroll works in both select and feedback — page scroll even before answer
+    if (phase() === "select" && (isPlainKey(evt,"d") || seq === "\x04")) { prevent(evt); try { scrollRef?.scrollBy(scrollAmount()); setTimeout(updateScrollIndicators,30); setTimeout(updateScrollIndicators,120) } catch {} return }
+    if (phase() === "select" && (isPlainKey(evt,"u") || seq === "\x15")) { prevent(evt); try { scrollRef?.scrollBy(-scrollAmount()); setTimeout(updateScrollIndicators,30); setTimeout(updateScrollIndicators,120) } catch {} return }
+    if (phase() === "select" && (lower === "pageup" || seq === "\x1b[5~")) { prevent(evt); try { scrollRef?.scrollBy(-scrollAmount()); setTimeout(updateScrollIndicators,30) } catch {} return }
+    if (phase() === "select" && (lower === "pagedown" || seq === "\x1b[6~")) { prevent(evt); try { scrollRef?.scrollBy(scrollAmount()); setTimeout(updateScrollIndicators,30) } catch {} return }
     // Options focused — extra Submit for single note-only at dontKnowIdx+1
     const maxIdx = () => {
       if (isMulti()) return submitIdx()
@@ -238,13 +345,21 @@ function QuizDialog(props: {
           <text fg={theme().background} bold>{phase() === "feedback" ? (feedback()?.correct ? "✓  CORRECT" : dontKnow() ? "○  I DON'T KNOW" : "✗  INCORRECT") : isMulti() ? "☑  QUIZ · MULTI-SELECT" : "●  QUIZ · SINGLE" }</text>
           <text fg={theme().background} dim>learn</text>
         </box>
+        {/* Pinned scroll cue — header-anchored, high contrast so user instantly knows explanation is below */}
+        <Show when={phase()==="feedback" && (canScrollUp() || canScrollDown())}>
+          <box justifyContent="center" height={1} backgroundColor={canScrollDown() ? theme().warning : theme().accent} paddingLeft={1} paddingRight={1}>
+            <text fg={theme().background} bold>
+              {canScrollUp() && canScrollDown() ? "▲ more above · ▼ more below — d / u to scroll" : canScrollDown() ? "▼ more below — press d to see explanation" : "▲ more above — press u to scroll up"}
+            </text>
+          </box>
+        </Show>
 
-        <scrollbox flexGrow={1}>
-        {/* Question */}
+        <scrollbox ref={(el:any)=> scrollRef = el} flexGrow={1} verticalScrollbarOptions={{ visible: true, trackOptions: { backgroundColor: theme().background, foregroundColor: theme().borderActive } }}>
+        {/* Question — use opencode markdown render so ```python blocks get syntax coloring like native messages */}
         <box flexDirection="column" gap={1} paddingLeft={1} paddingRight={1} paddingTop={1}>
-          <text fg={theme().text} bold wrapMode="wrap">{props.request.question}</text>
+          <markdown syntaxStyle={syntax()} content={decodeQuizText(props.request.question)} fg={theme().text} bg={theme().backgroundPanel} />
           <Show when={props.request.details}>
-            <text fg={theme().textMuted} wrapMode="wrap">{props.request.details}</text>
+            <markdown syntaxStyle={syntax()} content={decodeQuizText(props.request.details)} fg={theme().textMuted} bg={theme().backgroundPanel} />
           </Show>
         </box>
 
@@ -293,9 +408,8 @@ function QuizDialog(props: {
             </box>
 
             <box flexDirection="row" justifyContent="space-between" paddingTop={1}>
-              <text fg={theme().textMuted}>{focused() === "note" ? "Enter submit note → classify · Tab back · Esc back" : "↑↓/j k  ·  Space toggle  ·  ↓ to Submit → Enter  ·  Tab note  ·  Esc cancel"}</text>
-              <Show when={isMulti()}><text fg={selected().size > 0 || dontKnow() ? theme().success : note().trim() ? theme().warning : theme().warning}>{selected().size > 0 ? `${selected().size} selected` : note().trim() ? "note → classify" : "0 selected"} {dontKnow() ? "· I don't know" : ""}</text></Show>
-              <Show when={!isMulti() && note().trim() && !selected().size && !dontKnow()}><text fg={theme().warning}>note → classify on Enter</text></Show>
+              <text fg={theme().textMuted}>{isMulti() ? `${selected().size} selected${dontKnow() ? " · I don't know" : ""}` : note().trim() && !selected().size && !dontKnow() ? "note → classify" : dontKnow() ? "I don't know" : ""}</text>
+              <text fg={theme().textMuted}>{focused() === "note" ? "Tab/Esc back" : ""}</text>
             </box>
             <Show when={isMulti()}>
               <box justifyContent="center" paddingTop={1}>
@@ -351,14 +465,18 @@ function QuizDialog(props: {
             <text fg={theme().textMuted}>Correct: {props.request.correctIndices.map(i => `${i}. ${options()[i-1]?.label}`).join(", ")}</text>
             <Show when={note()}><text fg={theme().textMuted}>Your note: {note()}</text></Show>
             <box border={true} borderColor={theme().borderSubtle} backgroundColor={theme().backgroundPanel} padding={1}>
-              <text fg={theme().text} wrapMode="wrap">{props.request.explanation}</text>
+              <markdown syntaxStyle={syntax()} content={decodeQuizText(props.request.explanation)} fg={theme().text} bg={theme().backgroundPanel} />
             </box>
           </box>
         </Show>
         </scrollbox>
         <box height={1} justifyContent="center">
-          <text fg={theme().textMuted}>
-            {phase() === "feedback" ? "↵ Enter / Esc to continue  →  next probe" : phase() === "classifying" ? "Classifying your note..." : "Navigate options · Tab note · Esc cancel"}
+          <text fg={theme().textMuted} wrapMode="wrap">
+            {phase() === "feedback"
+              ? (canScrollUp() && canScrollDown() ? <><span style={{fg: theme.warning, bold: true}}>▲ more above · ▼ more below</span><span style={{fg: theme().textMuted}}> — d/u to scroll · Enter to continue</span></> : canScrollDown() ? <><span style={{fg: theme.warning, bold: true}}>▼ more below</span><span style={{fg: theme().textMuted}}> — d to scroll · Enter to continue</span></> : canScrollUp() ? <><span style={{fg: theme.accent, bold: true}}>▲ more above</span><span style={{fg: theme().textMuted}}> — u to scroll · Enter to continue</span></> : "↵ Enter / Esc to continue  →  next probe")
+              : phase() === "classifying" ? "Classifying your note..."
+              : focused() === "note" ? "Enter submit note → classify · Tab/Esc back"
+              : (canScrollUp() || canScrollDown()) ? <><span style={{fg: theme().textMuted}}>j/k or ↑↓ move · Space toggle · Tab note · Enter submit · Esc cancel</span><span style={{fg: theme.warning, bold: true}}> · d/u scroll</span></> : "j/k or ↑↓ move · Space toggle · Tab note · Enter submit · Esc cancel"}
           </text>
         </box>
       </box>
@@ -373,9 +491,16 @@ function QuizBatchDialog(props: {
   onCancel: () => void
 }) {
   const theme = () => props.api.theme.current
+  const syntax = () => syntaxStyle(theme())
   const dims = useTerminalDimensions()
-  const popupWidth = () => Math.max(68, Math.min(dims().width - 4, 96))
-  const popupHeight = () => Math.max(4, Math.min(24, dims().height - 2))
+  const popupWidth = () => {
+    const w = dims().width
+    return Math.max(64, Math.min(w - 8, Math.floor(w * 0.82), 96))
+  }
+  const popupHeight = () => {
+    const h = dims().height
+    return Math.max(14, Math.min(h - 6, Math.floor(h * 0.64), 28))
+  }
   const [idx, setIdx] = createSignal(0)
   // Guard: if no quizzes, cancel
   if (!props.request.quizzes || props.request.quizzes.length === 0) {
@@ -396,7 +521,33 @@ function QuizBatchDialog(props: {
   const dontKnowIdx = () => cur().options.length
   const submitIdx = () => isMulti() ? cur().options.length + 1 : -1
   let noteEl: any
+  let scrollRefBatch: any
+  const [canScrollUpBatch, setCanScrollUpBatch] = createSignal(false)
+  const [canScrollDownBatch, setCanScrollDownBatch] = createSignal(false)
+  const updateScrollBatch = () => {
+    try {
+      if (!scrollRefBatch) { setCanScrollUpBatch(false); setCanScrollDownBatch(false); return }
+      const st = typeof scrollRefBatch.scrollTop === "number" ? scrollRefBatch.scrollTop : 0
+      const h = typeof scrollRefBatch.height === "number" ? scrollRefBatch.height : (scrollRefBatch.viewportHeight ?? popupHeight())
+      const sh = typeof scrollRefBatch.scrollHeight === "number" ? scrollRefBatch.scrollHeight : 0
+      let effectiveSh = sh
+      if (!effectiveSh && typeof scrollRefBatch.getChildren === "function") {
+        try { const kids = scrollRefBatch.getChildren(); if (kids?.length) effectiveSh = Math.max(...kids.map((c:any)=> (c.y||0)+(c.height||0)), h) } catch {}
+      }
+      if (!effectiveSh || effectiveSh <= h + 1) { setCanScrollUpBatch(false); setCanScrollDownBatch(false); return }
+      setCanScrollUpBatch(st > 0)
+      setCanScrollDownBatch(st + h < effectiveSh - 1)
+    } catch { setCanScrollUpBatch(false); setCanScrollDownBatch(false) }
+  }
+  const scrollAmountBatch = () => Math.max(1, Math.floor((scrollRefBatch?.height ?? popupHeight()) / 3))
   createEffect(() => { if (focused()==="note" && noteEl) try{noteEl.focus()}catch(e){ tlog("note focus failed", String(e)) } })
+  createEffect(() => { phase(); feedback(); dims(); idx(); setTimeout(updateScrollBatch, 40); setTimeout(updateScrollBatch, 200) })
+  createEffect(() => { note(); setTimeout(updateScrollBatch, 40) })
+  createEffect(() => {
+    if (phase() !== "feedback" && phase() !== "select") return
+    const id = setInterval(updateScrollBatch, 200)
+    onCleanup(() => clearInterval(id))
+  })
   const toggle = (i:number) => {
     try {
       const o = cur().options[i]; if(!o) return
@@ -490,12 +641,22 @@ function QuizBatchDialog(props: {
       setPhase("feedback")
     } catch(e){ tlog("submitSelect failed", String(e)) }
   }
+  const isPlainKeyBatch = (evt:any, want:string) => {
+    try { const n=String(evt.name||evt.sequence||"").toLowerCase(); if(n!==want.toLowerCase()) return false; if(evt.ctrl||evt.meta||evt.option||evt.alt) return false; return true } catch { return false }
+  }
   useKeyboard((evt:any)=>{
     try {
-      const k=evt.name||evt.sequence||evt.raw||""; const seq=evt.sequence||""
+      const k=evt.name||evt.sequence||evt.raw||""; const seq=evt.sequence||""; const lower=String(k||"").toLowerCase()
       if((phase() as any)==="classifying"){ prevent(evt); return }
-      if(phase()==="feedback"){ if(k==="enter"||seq==="\r"||k==="escape"||k==="esc"){ prevent(evt); goNext() } return }
+      if(phase()==="feedback"){
+        if (isPlainKeyBatch(evt,"d")||seq==="\x04"){ prevent(evt); try{scrollRefBatch?.scrollBy(scrollAmountBatch()); setTimeout(updateScrollBatch,30); setTimeout(updateScrollBatch,120)}catch{} return }
+        if (isPlainKeyBatch(evt,"u")||seq==="\x15"){ prevent(evt); try{scrollRefBatch?.scrollBy(-scrollAmountBatch()); setTimeout(updateScrollBatch,30); setTimeout(updateScrollBatch,120)}catch{} return }
+        if (lower==="pageup"||seq==="\x1b[5~"){ prevent(evt); try{scrollRefBatch?.scrollBy(-scrollAmountBatch()); setTimeout(updateScrollBatch,30)}catch{} return }
+        if (lower==="pagedown"||seq==="\x1b[6~"){ prevent(evt); try{scrollRefBatch?.scrollBy(scrollAmountBatch()); setTimeout(updateScrollBatch,30)}catch{} return }
+        if(lower==="enter"||seq==="\r"||lower==="escape"||lower==="esc"){ prevent(evt); goNext() } return }
       if(focused()==="note"){ if(k==="tab"||seq==="\t"){prevent(evt); setFocused("options"); return} if(k==="escape"){prevent(evt); setFocused("options"); return} return }
+      if(phase()==="select" && (isPlainKeyBatch(evt,"d")||seq==="\x04")){ prevent(evt); try{scrollRefBatch?.scrollBy(scrollAmountBatch()); setTimeout(updateScrollBatch,30); setTimeout(updateScrollBatch,120)}catch{} return }
+      if(phase()==="select" && (isPlainKeyBatch(evt,"u")||seq==="\x15")){ prevent(evt); try{scrollRefBatch?.scrollBy(-scrollAmountBatch()); setTimeout(updateScrollBatch,30); setTimeout(updateScrollBatch,120)}catch{} return }
       if(k==="up"||k==="k"||seq==="\x1b[A"){prevent(evt); setOptionIndex(i=>Math.max(0,i-1)); return}
       if(k==="down"||k==="j"||seq==="\x1b[B"){prevent(evt); setOptionIndex(i=>Math.min(isMulti()?submitIdx():dontKnowIdx(),i+1)); return}
       if(k==="tab"||seq==="\t"){prevent(evt); setFocused("note"); return}
@@ -511,16 +672,24 @@ function QuizBatchDialog(props: {
         <text fg={theme().background} bold> decks.quiz batch  {idx()+1}/{props.request.quizzes.length} {phase()==="feedback"?(feedback()?.correct?"✓":"✗"):""}</text>
         <text fg={theme().background} dim>learn</text>
       </box>
-      <scrollbox flexGrow={1}>
-      <text fg={theme().text} bold wrapMode="wrap">{cur().question}</text>
-      <Show when={cur().details}><text fg={theme().textMuted} wrapMode="wrap">{cur().details}</text></Show>
+      {/* Pinned scroll cue — header-anchored, high contrast */}
+      <Show when={phase()==="feedback" && (canScrollUpBatch() || canScrollDownBatch())}>
+        <box justifyContent="center" height={1} backgroundColor={canScrollDownBatch() ? theme().warning : theme().accent} paddingLeft={1} paddingRight={1}>
+          <text fg={theme().background} bold>
+            {canScrollUpBatch() && canScrollDownBatch() ? "▲ more above · ▼ more below — d / u to scroll" : canScrollDownBatch() ? "▼ more below — press d to see explanation" : "▲ more above — press u to scroll up"}
+          </text>
+        </box>
+      </Show>
+      <scrollbox ref={(el:any)=> scrollRefBatch = el} flexGrow={1} verticalScrollbarOptions={{ visible: true, trackOptions: { backgroundColor: theme().background, foregroundColor: theme().borderActive } }}>
+      <markdown syntaxStyle={syntax()} content={decodeQuizText(cur().question)} fg={theme().text} bg={theme().backgroundPanel} />
+      <Show when={cur().details}><markdown syntaxStyle={syntax()} content={decodeQuizText(cur().details)} fg={theme().textMuted} bg={theme().backgroundPanel} /></Show>
       <Show when={phase()==="select"}>
         <box flexDirection="column" gap={0} padding={1} border={true} borderColor={theme().borderSubtle} backgroundColor={theme().background}>
           <For each={cur().options}>{(opt:any,i:any)=>{const id=i(); const foc=()=>focused()==="options"&&optionIndex()===id; const sel=()=>selected().has(`opt:${id}`); return <box flexDirection="row" alignItems="flexStart" gap={1} paddingLeft={1} backgroundColor={foc()?theme().backgroundElement:undefined}><box width={2}><text fg={foc()?theme().accent:theme().textMuted}>{foc()?"▸":" "}</text></box><box width={2}><text fg={isMulti()?(sel()?theme().success:theme().textMuted):(sel()?theme().accent:theme().textMuted)}>{isMulti()?(sel()?"☑":"☐"):(sel()?"⬢":"○")}</text></box><box flexGrow={1}><text fg={sel()?theme().text:theme().textMuted} bold={foc()} wrapMode="wrap">{id+1}. {opt.label}</text></box></box>}}</For>
           <box height={1}><text fg={theme().borderSubtle}>{"─".repeat(Math.max(20,popupWidth()-8))}</text></box>
           <box flexDirection="row" gap={1} paddingLeft={1} backgroundColor={focused()==="options"&&optionIndex()===dontKnowIdx()?theme().backgroundElement:undefined}><box width={2}><text fg={focused()==="options"&&optionIndex()===dontKnowIdx()?theme().accent:theme().textMuted}>{focused()==="options"&&optionIndex()===dontKnowIdx()?"▸":" "}</text></box><box width={2}><text fg={dontKnow()?theme().warning:theme().textMuted}>{dontKnow()?"☑":"☐"}</text></box><box flexGrow={1}><text fg={dontKnow()?theme().warning:theme().textMuted} italic>I don't know</text></box></box>
           <box flexDirection="column" paddingTop={1}><text fg={focused()==="note"?theme().accent:theme().textMuted}>✎ Note</text><box border={true} borderColor={focused()==="note"?theme().accent:theme().borderSubtle} backgroundColor={theme().backgroundElement} paddingLeft={1} paddingRight={1}><Show when={focused()==="note"} fallback={<text fg={theme().textMuted}>{note()||"Tab to edit · share what you were thinking"}</text>}><input ref={(el:any)=>noteEl=el} value={note()} onInput={(v:any)=>setNote(typeof v==="string"?v:v?.target?.value??"")} onSubmit={()=>{ if (!selected().size && !dontKnow() && note().trim()) submitSelect(); else setFocused("options") }} placeholder="note (Enter to submit note → classify)" /></Show></box></box>
-          <box flexDirection="row" justifyContent="space-between" paddingTop={1}><text fg={theme().textMuted}>{focused()==="note" ? "Enter submit note → classify · Tab back · Esc back" : "Space toggle · ↓ to Submit → Enter · Tab note · Ctrl+Enter submit"}</text><text fg={theme().textMuted}>{idx()+1}/{props.request.quizzes.length}</text></box>
+          <box flexDirection="row" justifyContent="space-between" paddingTop={1}><text fg={theme().textMuted}>{isMulti() ? `${selected().size} selected` : note().trim() && !selected().size ? "note → classify" : ""}</text><text fg={theme().textMuted}>{idx()+1}/{props.request.quizzes.length}</text></box>
           <Show when={isMulti()}><box justifyContent="center" paddingTop={1}><box flexDirection="row" gap={1} border={true} borderColor={focused()==="options"&&optionIndex()===submitIdx()?theme().accent:theme().borderSubtle} backgroundColor={focused()==="options"&&optionIndex()===submitIdx()?theme().backgroundElement:theme().background} paddingLeft={2} paddingRight={2}><text fg={focused()==="options"&&optionIndex()===submitIdx()?theme().accent:theme().textMuted}>{focused()==="options"&&optionIndex()===submitIdx()?"▸":" "}</text><text bold>↳ Submit</text></box></box></Show>
         </box>
       </Show>
@@ -536,13 +705,13 @@ function QuizBatchDialog(props: {
           <For each={cur().options}>{(opt:any,i:any)=>{const id=i()+1; const sel=()=>feedback()?.selectedIndices.includes(id)??false; const ok=()=>new Set(cur().correctIndices).has(id); let ic=" "; let fg=theme().textMuted; let bg:any=undefined; if(dontKnow()){ic=ok()?"✓":" "; fg=ok()?theme().background:theme().textMuted; bg=ok()?theme().success:undefined} else if(sel()&&ok()){ic="✓"; fg=theme().background; bg=theme().success} else if(sel()&&!ok()){ic="✗"; fg=theme().background; bg=theme().error} else if(!sel()&&ok()){ic="○"; fg=theme().background; bg=theme().warning} return <box flexDirection="row" gap={1} paddingLeft={1} backgroundColor={bg}><box width={2}><text fg={fg} bold>{ic}</text></box><box flexGrow={1}><text fg={fg} wrapMode="wrap">{id}. {opt.label}</text></box></box>}}</For>
           <text fg={feedback()?.correct?theme().success:theme().error} bold>{feedback()?.correct?"✓ Correct":"✗ Incorrect"}</text>
           <text fg={theme().textMuted}>Correct: {cur().correctIndices.map((i:number)=>`${i}. ${cur().options[i-1]?.label}`).join(", ")}</text>
-          <box border={true} borderColor={theme().borderSubtle} backgroundColor={theme().backgroundPanel} padding={1}><text fg={theme().text} wrapMode="wrap">{cur().explanation}</text></box>
+          <box border={true} borderColor={theme().borderSubtle} backgroundColor={theme().backgroundPanel} padding={1}><markdown syntaxStyle={syntax()} content={decodeQuizText(cur().explanation)} fg={theme().text} bg={theme().backgroundPanel} /></box>
         </box>
       </Show>
       </scrollbox>
       <box height={1} justifyContent="center">
-        <text fg={theme().textMuted}>
-          {phase()==="feedback" ? `Enter → next (${idx()+1}/${props.request.quizzes.length})` : phase()==="classifying" ? "Classifying your note..." : "Navigate options · Tab note · Esc cancel"}
+        <text fg={theme().textMuted} wrapMode="wrap">
+          {phase()==="feedback" ? (canScrollUpBatch() && canScrollDownBatch() ? <><span style={{fg: theme.warning, bold: true}}>▲ more above · ▼ more below</span><span style={{fg: theme().textMuted}}> — d/u to scroll · Enter → next ({idx()+1}/{props.request.quizzes.length})</span></> : canScrollDownBatch() ? <><span style={{fg: theme.warning, bold: true}}>▼ more below</span><span style={{fg: theme().textMuted}}> — d to scroll · Enter → next ({idx()+1}/{props.request.quizzes.length})</span></> : canScrollUpBatch() ? <><span style={{fg: theme.accent, bold: true}}>▲ more above</span><span style={{fg: theme().textMuted}}> — u to scroll · Enter → next ({idx()+1}/{props.request.quizzes.length})</span></> : `Enter → next (${idx()+1}/${props.request.quizzes.length})`) : phase()==="classifying" ? "Classifying your note..." : focused()==="note" ? "Enter submit note → classify · Tab/Esc back" : (canScrollUpBatch() || canScrollDownBatch()) ? <><span style={{fg: theme().textMuted}}>j/k or ↑↓ move · Space toggle · Tab note · Enter submit · Esc cancel</span><span style={{fg: theme.warning, bold: true}}> · d/u scroll</span></> : "j/k or ↑↓ move · Space toggle · Tab note · Enter submit · Esc cancel"}
         </text>
       </box>
     </box>

package/plugins/learn.ts

@@ -125,6 +125,15 @@ function resolveCorrect(correctAnswer: string | string[] | undefined, options: A
   return { indices: Array.from(new Set(indices)).sort((a, b) => a - b) as number[] }
 }
 
+function decodeQuizText(s: string | undefined): string | undefined {
+  if (!s || typeof s !== "string") return s
+  if (!s.includes("\\")) return s
+  let out = s.replace(/\\r\\n/g, "\n").replace(/\\n/g, "\n").replace(/\\r/g, "\r").replace(/\\t/g, "\t")
+  out = out.replace(/\\"/g, '"').replace(/\\'/g, "'")
+  out = out.replace(/\\\\/g, "\\")
+  return out
+}
+
 // ────────────────────────────────────────────────────────────────────────────
 // md-log helpers (ported from .pi/extensions/md-log.ts)
 // ────────────────────────────────────────────────────────────────────────────
@@ -788,8 +797,14 @@ Return ONLY JSON: {"inferred":[2],"semanticCorrect":false,"reason":"..."}  If va
           shuffle: tool.schema.boolean().optional().describe("Default true: shuffle before display. False only if order matters."),
         },
         async execute(args, ctx) {
+          // Fix double-escaped \n coming from LLM JSON (e.g. "\\n" literal instead of newline)
+          const qFixed = (decodeQuizText(args.question) ?? args.question) as string
+          const dFixed = decodeQuizText(args.details) as string | undefined
+          const eFixed = (decodeQuizText(args.explanation) ?? args.explanation) as string
+          // Also decode option labels in case they contain code
+          const optsDecoded = (args.options as any[] | undefined)?.map((o: any) => ({ ...o, label: decodeQuizText(o.label) ?? o.label, description: o.description ? decodeQuizText(o.description) : o.description })) as any
           let options: Array<{ label: string; value: string; description?: string }>
-          try { options = normalizeQuizOptions(args.options as any) } catch (e) { return `quiz error: ${(e as Error).message}` }
+          try { options = normalizeQuizOptions(optsDecoded) } catch (e) { return `quiz error: ${(e as Error).message}` }
           if (args.shuffle !== false) options = shuffleOptions(options)
           const { indices: correctIndices, error: correctError } = resolveCorrect(args.correctAnswer as any, options)
           if (correctError) return `quiz error: ${correctError}`
@@ -808,17 +823,17 @@ Return ONLY JSON: {"inferred":[2],"semanticCorrect":false,"reason":"..."}  If va
           const payload = {
             id,
             type: "quiz" as const,
-            question: args.question,
-            details: args.details,
+            question: qFixed,
+            details: dFixed,
             options: options.map((o, i) => ({ label: o.label, value: o.value, description: o.description, index: i + 1 })),
             correctIndices,
-            explanation: args.explanation,
+            explanation: eFixed,
             multiSelect: !!args.multiSelect,
             sessionID: (ctx as any).sessionID,
             timestamp: Date.now(),
           }
           try { fs.writeFileSync(pendingPath, JSON.stringify(payload), "utf8"); slog("quiz wrote durably", pendingPath, "alive", tuiAlive) } catch (e) { slog("quiz write failed", String(e)) }
-          try { await (ctx as any).metadata?.({ title: `Quiz: ${args.question.slice(0, 40)}`, metadata: { pendingId: id } }) } catch {}
+          try { await (ctx as any).metadata?.({ title: `Quiz: ${qFixed.slice(0, 40)}`, metadata: { pendingId: id } }) } catch {}
           watchAndInject(client, directory, id, (ctx as any).sessionID, (r: any) => {
               const dk = !!r?.dontKnow
               const sel = (r?.answers || []).map((a: any) => `${a.index}. ${a.label}`).join(", ") || "(none)"
@@ -832,19 +847,19 @@ Return ONLY JSON: {"inferred":[2],"semanticCorrect":false,"reason":"..."}  If va
                   answers: r?.answers || [],
                   correct: ok,
                   correctIndices,
-                  explanation: args.explanation,
+                  explanation: eFixed,
                   dontKnow: dk,
                   note: r?.note,
                 }
                 void withMdLock(() => appendToMdLog(answerCalloutQuiz(details)))
               }
               return dk
-                ? `[quiz answered] "${args.question}" -> I don't know (genuine gap).\nCorrect: ${correctStr}\nExplanation: ${args.explanation}${note}`
-                : `[quiz answered] "${args.question}" -> ${sel} = ${ok ? "CORRECT" : "INCORRECT"}.\nCorrect: ${correctStr}\nExplanation: ${args.explanation}${note}`
+                ? `[quiz answered] "${qFixed}" -> I don't know (genuine gap).\nCorrect: ${correctStr}\nExplanation: ${eFixed}${note}`
+                : `[quiz answered] "${qFixed}" -> ${sel} = ${ok ? "CORRECT" : "INCORRECT"}.\nCorrect: ${correctStr}\nExplanation: ${eFixed}${note}`
             })
           // Always mirror question with TRUE shuffled order (pi: tool_execution_update)
           if (mdLogFile) {
-            try { await withMdLock(() => appendToMdLog(questionCallout("Quiz", args.question, args.details?.trim() || undefined, options.map((o) => ({ label: o.label }))))) } catch {}
+            try { await withMdLock(() => appendToMdLog(questionCallout("Quiz", qFixed, dFixed?.trim() || undefined, options.map((o) => ({ label: o.label }))))) } catch {}
           }
           if (tuiAlive) {
             return `[quiz displayed in TUI — waiting for your answer in the popup. I'll continue once you respond.]`
@@ -863,8 +878,8 @@ Return ONLY JSON: {"inferred":[2],"semanticCorrect":false,"reason":"..."}  If va
             if (raw === null) return "User cancelled the quiz"
             const trimmed = (raw as string).trim()
             if (trimmed === "0" || trimmed.toLowerCase() === "i don't know") {
-              const msg = `User selected "I don't know" — genuine gap, not a guess.\nCorrect: ${correctStr}\nExplanation: ${args.explanation}`
-              if (mdLogFile) await withMdLock(() => appendToMdLog(callout("question", "Quiz — I don't know", [args.question, trimmed, `Correct: ${correctStr}`, args.explanation])))
+              const msg = `User selected "I don't know" — genuine gap, not a guess.\nCorrect: ${correctStr}\nExplanation: ${eFixed}`
+              if (mdLogFile) await withMdLock(() => appendToMdLog(callout("question", "Quiz — I don't know", [qFixed, trimmed, `Correct: ${correctStr}`, eFixed])))
               return msg
             }
             const nums = trimmed.split(/[,\s]+/).map(s => parseInt(s, 10)).filter(n => !isNaN(n) && n >= 1 && n <= options.length)
@@ -873,28 +888,28 @@ Return ONLY JSON: {"inferred":[2],"semanticCorrect":false,"reason":"..."}  If va
             const correct = selectedSet.size === correctSet.size && [...selectedSet].every(n => correctSet.has(n))
             const selectedStr = nums.map(n => `${n}. ${options[n - 1].label}`).join(", ") || "(none)"
             const verdict = correct ? "correctly" : "incorrectly"
-            const result = `User answered ${verdict}.\nSelected: ${selectedStr}\nCorrect: ${correctStr}\nExplanation: ${args.explanation}`
-              ;(ctx as any).metadata?.({ title: correct ? "Quiz — correct ✓" : "Quiz — incorrect ✗", metadata: { correct, correctIndices, explanation: args.explanation } })
-            if (mdLogFile) await withMdLock(() => appendToMdLog(callout(correct ? "success" : "failure", correct ? "Quiz — correct ✓" : "Quiz — incorrect ✗", [`Q: ${args.question}`, `Selected: ${selectedStr}`, `Correct: ${correctStr}`, args.explanation])))
+            const result = `User answered ${verdict}.\nSelected: ${selectedStr}\nCorrect: ${correctStr}\nExplanation: ${eFixed}`
+              ;(ctx as any).metadata?.({ title: correct ? "Quiz — correct ✓" : "Quiz — incorrect ✗", metadata: { correct, correctIndices, explanation: eFixed } })
+            if (mdLogFile) await withMdLock(() => appendToMdLog(callout(correct ? "success" : "failure", correct ? "Quiz — correct ✓" : "Quiz — incorrect ✗", [`Q: ${qFixed}`, `Selected: ${selectedStr}`, `Correct: ${correctStr}`, eFixed])))
             return result
           }
           const instruction = [
             `[quiz ready — awaiting user answer via \`question\` tool]`,
-            `Question: ${args.question}`,
-            args.details ? `Details: ${args.details}` : null,
+            `Question: ${qFixed}`,
+            dFixed ? `Details: ${dFixed}` : null,
             `Options (display order, already shuffled):`,
             ...options.map((o, i) => `${i + 1}. ${o.label}${o.description ? ` — ${o.description}` : ""} (value="${o.value}")`),
             `Correct indices: ${correctIndices.join(", ")} (Correct values: ${correctStr})`,
-            `Explanation (reveal AFTER answer): ${args.explanation}`,
+            `Explanation (reveal AFTER answer): ${eFixed}`,
             `Mode: ${args.multiSelect ? "multi-select (exact set)" : "single-select"}`,
             ``,
             `INSTRUCTION FOR LLM: Call the built-in \`question\` tool with:`,
             `  header: "Quiz"`,
-            `  question: "${args.question.replace(/"/g, '\\"')}"`,
+            `  question: "${qFixed.replace(/"/g, '\\"')}"`,
             `  options: [${options.map(o => `{label:"${o.label.replace(/"/g, '\\"')}", description:"${(o.description ?? "").replace(/"/g, '\\"')}"}`).join(", ")}]`,
             `Then compare the user's selected labels to correct indices [${correctIndices.join(", ")}]. Grade as ${args.multiSelect ? "exact-set match" : "single match"}, show ✓/✗, reveal Correct: ${correctStr}, and Explanation. An 'I don't know' maps to dontKnow (genuine gap).`,
           ].filter(Boolean).join("\n")
-            ;(ctx as any).metadata?.({ title: `Quiz: ${args.question.slice(0, 40)}`, metadata: { correctIndices, explanation: args.explanation, options: options.map((o, i) => ({ index: i + 1, label: o.label })) } })
+            ;(ctx as any).metadata?.({ title: `Quiz: ${qFixed.slice(0, 40)}`, metadata: { correctIndices, explanation: eFixed, options: options.map((o, i) => ({ index: i + 1, label: o.label })) } })
           return instruction
         },
       }),
@@ -924,13 +939,17 @@ Return ONLY JSON: {"inferred":[2],"semanticCorrect":false,"reason":"..."}  If va
           slog("quiz_batch isAlive", isAlive)
           const normalized: any[] = []
           for (const q of (args.quizzes as any[])) {
+            const qFixed = (decodeQuizText(q.question) ?? q.question) as string
+            const dFixed = decodeQuizText(q.details) as string | undefined
+            const eFixed = (decodeQuizText(q.explanation) ?? q.explanation) as string
+            const optsDecoded = (q.options as any[] | undefined)?.map((o: any) => ({ ...o, label: decodeQuizText(o.label) ?? o.label, description: o.description ? decodeQuizText(o.description) : o.description })) as any
             let opts: any
-            try { opts = normalizeQuizOptions(q.options) } catch (e) { slog("quiz_batch normalize error", (e as Error).message); return `quiz_batch error: ${(e as Error).message} in "${q.question}"` }
+            try { opts = normalizeQuizOptions(optsDecoded) } catch (e) { slog("quiz_batch normalize error", (e as Error).message); return `quiz_batch error: ${(e as Error).message} in "${qFixed}"` }
             if (q.shuffle !== false) opts = shuffleOptions(opts)
             const { indices, error } = resolveCorrect(q.correctAnswer as any, opts)
-            if (error) { slog("quiz_batch resolveCorrect error", error); return `quiz_batch error: ${error} in "${q.question}"` }
-            if (opts.length < 2) return `quiz_batch error: need 2+ options in "${q.question}"`
-            normalized.push({ question: q.question, details: q.details, options: opts, correctIndices: indices, explanation: q.explanation, multiSelect: !!q.multiSelect })
+            if (error) { slog("quiz_batch resolveCorrect error", error); return `quiz_batch error: ${error} in "${qFixed}"` }
+            if (opts.length < 2) return `quiz_batch error: need 2+ options in "${qFixed}"`
+            normalized.push({ question: qFixed, details: dFixed, options: opts, correctIndices: indices, explanation: eFixed, multiSelect: !!q.multiSelect })
           }
           slog("quiz_batch normalized", normalized.length)
           try { fs.mkdirSync(pendingDirPath, { recursive: true }) } catch {}