@bojackduy/opencode-learn 1.0.0 → 1.1.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@bojackduy/opencode-learn",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "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

@@ -99,8 +99,14 @@ function QuizDialog(props: {
   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
@@ -280,9 +286,9 @@ function QuizDialog(props: {
     }
     // Note focused: handle Tab/Esc/Enter to exit note, otherwise let input handle typing
     if (focused() === "note") {
-      if (key === "tab" || seq === "\t") { prevent(evt); setFocused("options"); return }
-      if (key === "escape" || key === "esc") { prevent(evt); setFocused("options"); return }
-      if (key === "enter" && (evt.ctrl || evt.meta)) { prevent(evt); setFocused("options"); return }
+      if (lower === "tab" || seq === "\t") { prevent(evt); setFocused("options"); return }
+      if (lower === "escape" || lower === "esc") { prevent(evt); setFocused("options"); return }
+      if (lower === "enter" && (evt.ctrl || evt.meta)) { prevent(evt); setFocused("options"); return }
       // Allow typing to go to input; don't prevent
       return
     }
@@ -297,11 +303,11 @@ function QuizDialog(props: {
       if (note().trim() && !selected().size && !dontKnow()) return dontKnowIdx() + 1
       return dontKnowIdx()
     }
-    if (key === "up" || key === "k" || seq === "\x1b[A") { prevent(evt); setOptionIndex(i => Math.max(0, i - 1)); return }
-    if (key === "down" || key === "j" || seq === "\x1b[B") { prevent(evt); setOptionIndex(i => Math.min(maxIdx(), i + 1)); return }
-    if (key === "tab" || seq === "\t") { prevent(evt); setFocused("note"); return }
-    if (key === "escape" || key === "esc") { prevent(evt); props.onCancel(); return }
-    if (key === "space" || seq === " ") {
+    if (lower === "up" || isPlainKey(evt,"k") || seq === "\x1b[A") { prevent(evt); setOptionIndex(i => Math.max(0, i - 1)); return }
+    if (lower === "down" || isPlainKey(evt,"j") || seq === "\x1b[B") { prevent(evt); setOptionIndex(i => Math.min(maxIdx(), i + 1)); return }
+    if (lower === "tab" || seq === "\t") { prevent(evt); setFocused("note"); return }
+    if (lower === "escape" || lower === "esc") { prevent(evt); props.onCancel(); return }
+    if (lower === "space" || seq === " ") {
       prevent(evt)
       const idx = optionIndex()
       if (idx === dontKnowIdx()) handleDontKnow()
@@ -315,7 +321,7 @@ function QuizDialog(props: {
       }
       return
     }
-    if (key === "enter" || seq === "\r") {
+    if (lower === "enter" || seq === "\r") {
       prevent(evt)
       const idx = optionIndex()
       if (idx === dontKnowIdx()) handleDontKnow()
@@ -327,7 +333,7 @@ function QuizDialog(props: {
         }
       return
     }
-    if (seq === "ctrl+j" || (key === "enter" && (evt as any).ctrl)) {
+    if (seq === "ctrl+j" || (lower === "enter" && (evt as any).ctrl)) {
       prevent(evt); submitSelect(); return
     }
   })
@@ -339,6 +345,14 @@ 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 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 */}
@@ -459,14 +473,10 @@ function QuizDialog(props: {
         <box height={1} justifyContent="center">
           <text fg={theme().textMuted} wrapMode="wrap">
             {phase() === "feedback"
-              ? (canScrollUp() && canScrollDown() ? "▲ more above · ▼ more below — d/u to scroll · Enter to continue"
-                : canScrollDown() ? "▼ more below — d to scroll · Enter to continue"
-                : canScrollUp() ? "▲ more above — u to scroll · Enter to continue"
-                : "↵ Enter / Esc to continue  →  next probe")
+              ? (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()) ? "j/k or ↑↓ move · Space toggle · Tab note · Enter submit · Esc cancel · d/u scroll"
-              : "j/k or ↑↓ move · Space toggle · Tab note · Enter submit · Esc cancel"}
+              : (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>
@@ -483,8 +493,14 @@ function QuizBatchDialog(props: {
   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) {
@@ -638,16 +654,16 @@ function QuizBatchDialog(props: {
         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(focused()==="note"){ if(lower==="tab"||seq==="\t"){prevent(evt); setFocused("options"); return} if(lower==="escape"||lower==="esc"){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}
-      if(k==="escape"||k==="esc"){prevent(evt); props.onCancel(); return}
-      if(k==="space"||seq===" "){prevent(evt); const i=optionIndex(); if(i===dontKnowIdx()){ const willBe=!dontKnow(); setDontKnow(willBe); if(willBe) setSelected(new Map()); } else if(isMulti() && i===submitIdx()) submitSelect(); else if(isMulti()) toggle(i); else { const o=cur().options[i]; if(o){setSelected(new Map([[`opt:${i}`,{label:o.label,value:o.value,index:i+1}]])); setDontKnow(false); submitSelect()} } return}
-      if(k==="enter"||seq==="\r"){prevent(evt); const i=optionIndex(); if(i===dontKnowIdx()){ const willBe=!dontKnow(); setDontKnow(willBe); if(willBe) setSelected(new Map()); } else if(isMulti()) submitSelect(); else { const o=cur().options[i]; if(o){setSelected(new Map([[`opt:${i}`,{label:o.label,value:o.value,index:i+1}]])); setDontKnow(false); submitSelect()} } return}
-      if(seq==="ctrl+j" || (k==="enter" && evt.ctrl)){prevent(evt); submitSelect(); return}
+      if(lower==="up"||isPlainKeyBatch(evt,"k")||seq==="\x1b[A"){prevent(evt); setOptionIndex(i=>Math.max(0,i-1)); return}
+      if(lower==="down"||isPlainKeyBatch(evt,"j")||seq==="\x1b[B"){prevent(evt); setOptionIndex(i=>Math.min(isMulti()?submitIdx():dontKnowIdx(),i+1)); return}
+      if(lower==="tab"||seq==="\t"){prevent(evt); setFocused("note"); return}
+      if(lower==="escape"||lower==="esc"){prevent(evt); props.onCancel(); return}
+      if(lower==="space"||seq===" "){prevent(evt); const i=optionIndex(); if(i===dontKnowIdx()){ const willBe=!dontKnow(); setDontKnow(willBe); if(willBe) setSelected(new Map()); } else if(isMulti() && i===submitIdx()) submitSelect(); else if(isMulti()) toggle(i); else { const o=cur().options[i]; if(o){setSelected(new Map([[`opt:${i}`,{label:o.label,value:o.value,index:i+1}]])); setDontKnow(false); submitSelect()} } return}
+      if(lower==="enter"||seq==="\r"){prevent(evt); const i=optionIndex(); if(i===dontKnowIdx()){ const willBe=!dontKnow(); setDontKnow(willBe); if(willBe) setSelected(new Map()); } else if(isMulti()) submitSelect(); else { const o=cur().options[i]; if(o){setSelected(new Map([[`opt:${i}`,{label:o.label,value:o.value,index:i+1}]])); setDontKnow(false); submitSelect()} } return}
+      if(seq==="ctrl+j" || (lower==="enter" && evt.ctrl)){prevent(evt); submitSelect(); return}
     } catch(e){ tlog("useKeyboard batch failed", String(e)) }
   })
   return (
@@ -656,6 +672,14 @@ 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>
+      {/* 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>
@@ -687,7 +711,7 @@ function QuizBatchDialog(props: {
       </scrollbox>
       <box height={1} justifyContent="center">
         <text fg={theme().textMuted} wrapMode="wrap">
-          {phase()==="feedback" ? (canScrollUpBatch() && canScrollDownBatch() ? `▲ more above · ▼ more below — d/u to scroll · Enter → next (${idx()+1}/${props.request.quizzes.length})` : canScrollDownBatch() ? `▼ more below — d to scroll · Enter → next (${idx()+1}/${props.request.quizzes.length})` : canScrollUpBatch() ? `▲ more above — u to scroll · Enter → next (${idx()+1}/${props.request.quizzes.length})` : `Enter → next (${idx()+1}/${props.request.quizzes.length})`) : phase()==="classifying" ? "Classifying your note..." : focused()==="note" ? "Enter submit note → classify · Tab/Esc back" : (canScrollUpBatch() || canScrollDownBatch()) ? "j/k or ↑↓ move · Space toggle · Tab note · Enter submit · Esc cancel · d/u scroll" : "j/k or ↑↓ move · Space toggle · Tab note · Enter submit · Esc cancel"}
+          {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>