@bojackduy/opencode-learn 0.1.6 → 1.0.0

package/dist/tui.js

@@ -1,8 +1,8 @@
 // @bun
 // plugins/learn-tui.tsx
-import { use as _$use } from "@opentui/solid";
 import { createComponent as _$createComponent } from "@opentui/solid";
 import { effect as _$effect } from "@opentui/solid";
+import { use as _$use } from "@opentui/solid";
 import { createTextNode as _$createTextNode } from "@opentui/solid";
 import { insertNode as _$insertNode } from "@opentui/solid";
 import { insert as _$insert } from "@opentui/solid";
@@ -14,7 +14,214 @@ import { useKeyboard, useTerminalDimensions } from "@opentui/solid";
 import * as fs from "fs";
 import * as path from "path";
 import { watch } from "fs";
+import { SyntaxStyle } from "@opentui/core";
 import { tmpdir } from "os";
+function syntaxStyle(theme) {
+  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
+    }
+  }]);
+}
 var PENDING_DIR = ".opencode/learn-pending";
 var TUI_LOG = path.join(tmpdir(), "learn-tui.log");
 function tlog(...a) {
@@ -30,6 +237,18 @@ function ensureDir(dir) {
     });
   } catch {}
 }
+function decodeQuizText(s) {
+  if (!s || typeof s !== "string")
+    return s;
+  if (!s.includes("\\"))
+    return s;
+  let out = s.replace(/\\r\\n/g, `
+`).replace(/\\n/g, `
+`).replace(/\\r/g, "\r").replace(/\\t/g, "\t");
+  out = out.replace(/\\"/g, '"').replace(/\\'/g, "'");
+  out = out.replace(/\\\\/g, "\\");
+  return out;
+}
 function prevent(e) {
   try {
     e.preventDefault?.();
@@ -38,6 +257,7 @@ function prevent(e) {
 }
 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));
@@ -54,6 +274,40 @@ function QuizDialog(props) {
   const [selected, setSelected] = createSignal(new Map);
   const [feedback, setFeedback] = createSignal(null);
   let noteInputEl;
+  let scrollRef;
+  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) => (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 {
@@ -61,6 +315,23 @@ function QuizDialog(props) {
       } catch {}
     }
   });
+  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) => {
     const opt = options()[idx];
     if (!opt)
@@ -234,15 +505,78 @@ function QuizDialog(props) {
       note: note().trim() || undefined
     });
   };
+  const isPlainKey = (evt, want) => {
+    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) => {
     const key = evt.name || evt.sequence || evt.raw || "";
     const seq = evt.sequence || "";
+    const lower = String(key || "").toLowerCase();
     if (phase() === "classifying") {
       prevent(evt);
       return;
     }
     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();
       }
@@ -266,6 +600,40 @@ function QuizDialog(props) {
       }
       return;
     }
+    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;
+    }
     const maxIdx = () => {
       if (isMulti())
         return submitIdx();
@@ -348,10 +716,10 @@ function QuizDialog(props) {
     }
   });
   return (() => {
-    var _el$ = _$createElement("box"), _el$2 = _$createElement("box"), _el$3 = _$createElement("text"), _el$4 = _$createElement("text"), _el$6 = _$createElement("scrollbox"), _el$7 = _$createElement("box"), _el$8 = _$createElement("text"), _el$62 = _$createElement("box"), _el$63 = _$createElement("text");
+    var _el$ = _$createElement("box"), _el$2 = _$createElement("box"), _el$3 = _$createElement("text"), _el$4 = _$createElement("text"), _el$6 = _$createElement("scrollbox"), _el$7 = _$createElement("box"), _el$8 = _$createElement("markdown"), _el$59 = _$createElement("box"), _el$60 = _$createElement("text");
     _$insertNode(_el$, _el$2);
     _$insertNode(_el$, _el$6);
-    _$insertNode(_el$, _el$62);
+    _$insertNode(_el$, _el$59);
     _$setProp(_el$, "flexDirection", "column");
     _$setProp(_el$, "border", true);
     _$setProp(_el$, "padding", 1);
@@ -372,6 +740,7 @@ function QuizDialog(props) {
     _$insertNode(_el$4, _$createTextNode(`learn`));
     _$setProp(_el$4, "dim", true);
     _$insertNode(_el$6, _el$7);
+    _$use((el) => scrollRef = el, _el$6);
     _$setProp(_el$6, "flexGrow", 1);
     _$insertNode(_el$7, _el$8);
     _$setProp(_el$7, "flexDirection", "column");
@@ -379,18 +748,25 @@ function QuizDialog(props) {
     _$setProp(_el$7, "paddingLeft", 1);
     _$setProp(_el$7, "paddingRight", 1);
     _$setProp(_el$7, "paddingTop", 1);
-    _$setProp(_el$8, "bold", true);
-    _$setProp(_el$8, "wrapMode", "wrap");
-    _$insert(_el$8, () => props.request.question);
     _$insert(_el$7, _$createComponent(Show, {
       get when() {
         return props.request.details;
       },
       get children() {
-        var _el$9 = _$createElement("text");
-        _$setProp(_el$9, "wrapMode", "wrap");
-        _$insert(_el$9, () => props.request.details);
-        _$effect((_$p) => _$setProp(_el$9, "fg", theme().textMuted, _$p));
+        var _el$9 = _$createElement("markdown");
+        _$effect((_p$) => {
+          var _v$ = syntax(), _v$2 = decodeQuizText(props.request.details), _v$3 = theme().textMuted, _v$4 = theme().backgroundPanel;
+          _v$ !== _p$.e && (_p$.e = _$setProp(_el$9, "syntaxStyle", _v$, _p$.e));
+          _v$2 !== _p$.t && (_p$.t = _$setProp(_el$9, "content", _v$2, _p$.t));
+          _v$3 !== _p$.a && (_p$.a = _$setProp(_el$9, "fg", _v$3, _p$.a));
+          _v$4 !== _p$.o && (_p$.o = _$setProp(_el$9, "bg", _v$4, _p$.o));
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined,
+          a: undefined,
+          o: undefined
+        });
         return _el$9;
       }
     }), null);
@@ -399,7 +775,7 @@ function QuizDialog(props) {
         return phase() === "select";
       },
       get children() {
-        var _el$0 = _$createElement("box"), _el$11 = _$createElement("box"), _el$12 = _$createElement("box"), _el$13 = _$createElement("text"), _el$14 = _$createElement("box"), _el$15 = _$createElement("text"), _el$16 = _$createElement("box"), _el$17 = _$createElement("text"), _el$19 = _$createElement("box"), _el$20 = _$createElement("box"), _el$21 = _$createElement("text"), _el$25 = _$createElement("box"), _el$27 = _$createElement("box"), _el$28 = _$createElement("text");
+        var _el$0 = _$createElement("box"), _el$11 = _$createElement("box"), _el$12 = _$createElement("box"), _el$13 = _$createElement("text"), _el$14 = _$createElement("box"), _el$15 = _$createElement("text"), _el$16 = _$createElement("box"), _el$17 = _$createElement("text"), _el$19 = _$createElement("box"), _el$20 = _$createElement("box"), _el$21 = _$createElement("text"), _el$25 = _$createElement("box"), _el$27 = _$createElement("box"), _el$28 = _$createElement("text"), _el$29 = _$createElement("text");
         _$insertNode(_el$0, _el$11);
         _$insertNode(_el$0, _el$19);
         _$insertNode(_el$0, _el$27);
@@ -416,39 +792,39 @@ function QuizDialog(props) {
             const isFocused = () => focused() === "options" && optionIndex() === idx;
             const isSelected = () => selected().has(`opt:${idx}`);
             return (() => {
-              var _el$64 = _$createElement("box"), _el$65 = _$createElement("box"), _el$66 = _$createElement("text"), _el$67 = _$createElement("box"), _el$68 = _$createElement("text"), _el$69 = _$createElement("box"), _el$70 = _$createElement("text"), _el$71 = _$createTextNode(`. `);
+              var _el$61 = _$createElement("box"), _el$62 = _$createElement("box"), _el$63 = _$createElement("text"), _el$64 = _$createElement("box"), _el$65 = _$createElement("text"), _el$66 = _$createElement("box"), _el$67 = _$createElement("text"), _el$68 = _$createTextNode(`. `);
+              _$insertNode(_el$61, _el$62);
+              _$insertNode(_el$61, _el$64);
+              _$insertNode(_el$61, _el$66);
+              _$setProp(_el$61, "flexDirection", "row");
+              _$setProp(_el$61, "alignItems", "flexStart");
+              _$setProp(_el$61, "gap", 1);
+              _$setProp(_el$61, "paddingLeft", 1);
+              _$setProp(_el$61, "paddingRight", 1);
+              _$insertNode(_el$62, _el$63);
+              _$setProp(_el$62, "width", 2);
+              _$setProp(_el$62, "alignItems", "center");
+              _$insert(_el$63, () => isFocused() ? "\u25B8" : " ");
               _$insertNode(_el$64, _el$65);
-              _$insertNode(_el$64, _el$67);
-              _$insertNode(_el$64, _el$69);
-              _$setProp(_el$64, "flexDirection", "row");
-              _$setProp(_el$64, "alignItems", "flexStart");
-              _$setProp(_el$64, "gap", 1);
-              _$setProp(_el$64, "paddingLeft", 1);
-              _$setProp(_el$64, "paddingRight", 1);
-              _$insertNode(_el$65, _el$66);
-              _$setProp(_el$65, "width", 2);
-              _$setProp(_el$65, "alignItems", "center");
-              _$insert(_el$66, () => isFocused() ? "\u25B8" : " ");
-              _$insertNode(_el$67, _el$68);
-              _$setProp(_el$67, "width", 2);
-              _$setProp(_el$67, "alignItems", "center");
-              _$insert(_el$68, (() => {
+              _$setProp(_el$64, "width", 2);
+              _$setProp(_el$64, "alignItems", "center");
+              _$insert(_el$65, (() => {
                 var _c$4 = _$memo(() => !!isMulti());
                 return () => _c$4() ? isSelected() ? "\u2611" : "\u2610" : isSelected() ? "\u2B22" : "\u25CB";
               })());
-              _$insertNode(_el$69, _el$70);
-              _$setProp(_el$69, "flexGrow", 1);
-              _$insertNode(_el$70, _el$71);
-              _$setProp(_el$70, "wrapMode", "wrap");
-              _$insert(_el$70, idx + 1, _el$71);
-              _$insert(_el$70, () => opt.label, null);
+              _$insertNode(_el$66, _el$67);
+              _$setProp(_el$66, "flexGrow", 1);
+              _$insertNode(_el$67, _el$68);
+              _$setProp(_el$67, "wrapMode", "wrap");
+              _$insert(_el$67, idx + 1, _el$68);
+              _$insert(_el$67, () => opt.label, null);
               _$effect((_p$) => {
-                var _v$38 = isFocused() ? theme().backgroundElement : undefined, _v$39 = isFocused() ? theme().accent : theme().textMuted, _v$40 = isMulti() ? isSelected() ? theme().success : theme().textMuted : isSelected() ? theme().accent : theme().textMuted, _v$41 = isSelected() ? theme().text : theme().textMuted, _v$42 = isFocused();
-                _v$38 !== _p$.e && (_p$.e = _$setProp(_el$64, "backgroundColor", _v$38, _p$.e));
-                _v$39 !== _p$.t && (_p$.t = _$setProp(_el$66, "fg", _v$39, _p$.t));
-                _v$40 !== _p$.a && (_p$.a = _$setProp(_el$68, "fg", _v$40, _p$.a));
-                _v$41 !== _p$.o && (_p$.o = _$setProp(_el$70, "fg", _v$41, _p$.o));
-                _v$42 !== _p$.i && (_p$.i = _$setProp(_el$70, "bold", _v$42, _p$.i));
+                var _v$50 = isFocused() ? theme().backgroundElement : undefined, _v$51 = isFocused() ? theme().accent : theme().textMuted, _v$52 = isMulti() ? isSelected() ? theme().success : theme().textMuted : isSelected() ? theme().accent : theme().textMuted, _v$53 = isSelected() ? theme().text : theme().textMuted, _v$54 = isFocused();
+                _v$50 !== _p$.e && (_p$.e = _$setProp(_el$61, "backgroundColor", _v$50, _p$.e));
+                _v$51 !== _p$.t && (_p$.t = _$setProp(_el$63, "fg", _v$51, _p$.t));
+                _v$52 !== _p$.a && (_p$.a = _$setProp(_el$65, "fg", _v$52, _p$.a));
+                _v$53 !== _p$.o && (_p$.o = _$setProp(_el$67, "fg", _v$53, _p$.o));
+                _v$54 !== _p$.i && (_p$.i = _$setProp(_el$67, "bold", _v$54, _p$.i));
                 return _p$;
               }, {
                 e: undefined,
@@ -457,7 +833,7 @@ function QuizDialog(props) {
                 o: undefined,
                 i: undefined
               });
-              return _el$64;
+              return _el$61;
             })();
           }
         }), _el$11);
@@ -525,11 +901,11 @@ function QuizDialog(props) {
           },
           get fallback() {
             return (() => {
-              var _el$72 = _$createElement("text");
-              _$setProp(_el$72, "wrapMode", "wrap");
-              _$insert(_el$72, () => note() || "Tab to edit \xB7 share what you were thinking");
-              _$effect((_$p) => _$setProp(_el$72, "fg", note() ? theme().text : theme().textMuted, _$p));
-              return _el$72;
+              var _el$69 = _$createElement("text");
+              _$setProp(_el$69, "wrapMode", "wrap");
+              _$insert(_el$69, () => note() || "Tab to edit \xB7 share what you were thinking");
+              _$effect((_$p) => _$setProp(_el$69, "fg", note() ? theme().text : theme().textMuted, _$p));
+              return _el$69;
             })();
           },
           get children() {
@@ -548,64 +924,42 @@ function QuizDialog(props) {
           }
         }));
         _$insertNode(_el$27, _el$28);
+        _$insertNode(_el$27, _el$29);
         _$setProp(_el$27, "flexDirection", "row");
         _$setProp(_el$27, "justifyContent", "space-between");
         _$setProp(_el$27, "paddingTop", 1);
-        _$insert(_el$28, () => focused() === "note" ? "Enter submit note \u2192 classify \xB7 Tab back \xB7 Esc back" : "\u2191\u2193/j k  \xB7  Space toggle  \xB7  \u2193 to Submit \u2192 Enter  \xB7  Tab note  \xB7  Esc cancel");
-        _$insert(_el$27, _$createComponent(Show, {
-          get when() {
-            return isMulti();
-          },
-          get children() {
-            var _el$29 = _$createElement("text"), _el$30 = _$createTextNode(` `);
-            _$insertNode(_el$29, _el$30);
-            _$insert(_el$29, (() => {
-              var _c$2 = _$memo(() => selected().size > 0);
-              return () => _c$2() ? `${selected().size} selected` : note().trim() ? "note \u2192 classify" : "0 selected";
-            })(), _el$30);
-            _$insert(_el$29, () => dontKnow() ? "\xB7 I don't know" : "", null);
-            _$effect((_$p) => _$setProp(_el$29, "fg", selected().size > 0 || dontKnow() ? theme().success : note().trim() ? theme().warning : theme().warning, _$p));
-            return _el$29;
-          }
-        }), null);
-        _$insert(_el$27, _$createComponent(Show, {
-          get when() {
-            return _$memo(() => !!(!isMulti() && note().trim() && !selected().size))() && !dontKnow();
-          },
-          get children() {
-            var _el$31 = _$createElement("text");
-            _$insertNode(_el$31, _$createTextNode(`note \u2192 classify on Enter`));
-            _$effect((_$p) => _$setProp(_el$31, "fg", theme().warning, _$p));
-            return _el$31;
-          }
-        }), null);
+        _$insert(_el$28, (() => {
+          var _c$2 = _$memo(() => !!isMulti());
+          return () => _c$2() ? `${selected().size} selected${dontKnow() ? " \xB7 I don't know" : ""}` : _$memo(() => !!(note().trim() && !selected().size && !dontKnow()))() ? "note \u2192 classify" : dontKnow() ? "I don't know" : "";
+        })());
+        _$insert(_el$29, () => focused() === "note" ? "Tab/Esc back" : "");
         _$insert(_el$0, _$createComponent(Show, {
           get when() {
             return isMulti();
           },
           get children() {
-            var _el$33 = _$createElement("box"), _el$34 = _$createElement("box"), _el$35 = _$createElement("text"), _el$36 = _$createElement("text"), _el$37 = _$createTextNode(`\u21B3 Submit`);
+            var _el$30 = _$createElement("box"), _el$31 = _$createElement("box"), _el$32 = _$createElement("text"), _el$33 = _$createElement("text"), _el$34 = _$createTextNode(`\u21B3 Submit`);
+            _$insertNode(_el$30, _el$31);
+            _$setProp(_el$30, "justifyContent", "center");
+            _$setProp(_el$30, "paddingTop", 1);
+            _$insertNode(_el$31, _el$32);
+            _$insertNode(_el$31, _el$33);
+            _$setProp(_el$31, "flexDirection", "row");
+            _$setProp(_el$31, "alignItems", "center");
+            _$setProp(_el$31, "gap", 1);
+            _$setProp(_el$31, "border", true);
+            _$setProp(_el$31, "paddingLeft", 2);
+            _$setProp(_el$31, "paddingRight", 2);
+            _$insert(_el$32, () => focused() === "options" && optionIndex() === submitIdx() ? "\u25B8" : " ");
             _$insertNode(_el$33, _el$34);
-            _$setProp(_el$33, "justifyContent", "center");
-            _$setProp(_el$33, "paddingTop", 1);
-            _$insertNode(_el$34, _el$35);
-            _$insertNode(_el$34, _el$36);
-            _$setProp(_el$34, "flexDirection", "row");
-            _$setProp(_el$34, "alignItems", "center");
-            _$setProp(_el$34, "gap", 1);
-            _$setProp(_el$34, "border", true);
-            _$setProp(_el$34, "paddingLeft", 2);
-            _$setProp(_el$34, "paddingRight", 2);
-            _$insert(_el$35, () => focused() === "options" && optionIndex() === submitIdx() ? "\u25B8" : " ");
-            _$insertNode(_el$36, _el$37);
-            _$setProp(_el$36, "bold", true);
-            _$insert(_el$36, () => note().trim() && !selected().size && !dontKnow() ? " note" : "", null);
+            _$setProp(_el$33, "bold", true);
+            _$insert(_el$33, () => note().trim() && !selected().size && !dontKnow() ? " note" : "", null);
             _$effect((_p$) => {
-              var _v$ = focused() === "options" && optionIndex() === submitIdx() ? theme().accent : selected().size > 0 || dontKnow() || note().trim() ? theme().success : theme().borderSubtle, _v$2 = focused() === "options" && optionIndex() === submitIdx() ? theme().backgroundElement : selected().size > 0 || dontKnow() || note().trim() ? theme().success : theme().background, _v$3 = focused() === "options" && optionIndex() === submitIdx() ? theme().accent : selected().size > 0 || dontKnow() || note().trim() ? theme().background : theme().textMuted, _v$4 = focused() === "options" && optionIndex() === submitIdx() ? theme().accent : selected().size > 0 || dontKnow() || note().trim() ? theme().background : theme().textMuted;
-              _v$ !== _p$.e && (_p$.e = _$setProp(_el$34, "borderColor", _v$, _p$.e));
-              _v$2 !== _p$.t && (_p$.t = _$setProp(_el$34, "backgroundColor", _v$2, _p$.t));
-              _v$3 !== _p$.a && (_p$.a = _$setProp(_el$35, "fg", _v$3, _p$.a));
-              _v$4 !== _p$.o && (_p$.o = _$setProp(_el$36, "fg", _v$4, _p$.o));
+              var _v$5 = focused() === "options" && optionIndex() === submitIdx() ? theme().accent : selected().size > 0 || dontKnow() || note().trim() ? theme().success : theme().borderSubtle, _v$6 = focused() === "options" && optionIndex() === submitIdx() ? theme().backgroundElement : selected().size > 0 || dontKnow() || note().trim() ? theme().success : theme().background, _v$7 = focused() === "options" && optionIndex() === submitIdx() ? theme().accent : selected().size > 0 || dontKnow() || note().trim() ? theme().background : theme().textMuted, _v$8 = focused() === "options" && optionIndex() === submitIdx() ? theme().accent : selected().size > 0 || dontKnow() || note().trim() ? theme().background : theme().textMuted;
+              _v$5 !== _p$.e && (_p$.e = _$setProp(_el$31, "borderColor", _v$5, _p$.e));
+              _v$6 !== _p$.t && (_p$.t = _$setProp(_el$31, "backgroundColor", _v$6, _p$.t));
+              _v$7 !== _p$.a && (_p$.a = _$setProp(_el$32, "fg", _v$7, _p$.a));
+              _v$8 !== _p$.o && (_p$.o = _$setProp(_el$33, "fg", _v$8, _p$.o));
               return _p$;
             }, {
               e: undefined,
@@ -613,7 +967,7 @@ function QuizDialog(props) {
               a: undefined,
               o: undefined
             });
-            return _el$33;
+            return _el$30;
           }
         }), null);
         _$insert(_el$0, _$createComponent(Show, {
@@ -621,46 +975,47 @@ function QuizDialog(props) {
             return _$memo(() => !!(!isMulti() && note().trim() && !selected().size))() && !dontKnow();
           },
           get children() {
-            var _el$38 = _$createElement("box"), _el$39 = _$createElement("box"), _el$40 = _$createElement("text");
-            _$insertNode(_el$38, _el$39);
-            _$setProp(_el$38, "justifyContent", "center");
-            _$setProp(_el$38, "paddingTop", 1);
-            _$insertNode(_el$39, _el$40);
-            _$setProp(_el$39, "flexDirection", "row");
-            _$setProp(_el$39, "alignItems", "center");
-            _$setProp(_el$39, "gap", 1);
-            _$setProp(_el$39, "border", true);
-            _$setProp(_el$39, "paddingLeft", 2);
-            _$setProp(_el$39, "paddingRight", 2);
-            _$insertNode(_el$40, _$createTextNode(`\u21B3 Submit note \u2192 classify`));
-            _$setProp(_el$40, "bold", true);
+            var _el$35 = _$createElement("box"), _el$36 = _$createElement("box"), _el$37 = _$createElement("text");
+            _$insertNode(_el$35, _el$36);
+            _$setProp(_el$35, "justifyContent", "center");
+            _$setProp(_el$35, "paddingTop", 1);
+            _$insertNode(_el$36, _el$37);
+            _$setProp(_el$36, "flexDirection", "row");
+            _$setProp(_el$36, "alignItems", "center");
+            _$setProp(_el$36, "gap", 1);
+            _$setProp(_el$36, "border", true);
+            _$setProp(_el$36, "paddingLeft", 2);
+            _$setProp(_el$36, "paddingRight", 2);
+            _$insertNode(_el$37, _$createTextNode(`\u21B3 Submit note \u2192 classify`));
+            _$setProp(_el$37, "bold", true);
             _$effect((_p$) => {
-              var _v$5 = focused() === "options" && optionIndex() === dontKnowIdx() + 1 ? theme().accent : theme().success, _v$6 = focused() === "options" && optionIndex() === dontKnowIdx() + 1 ? theme().backgroundElement : theme().success, _v$7 = focused() === "options" && optionIndex() === dontKnowIdx() + 1 ? theme().accent : theme().background;
-              _v$5 !== _p$.e && (_p$.e = _$setProp(_el$39, "borderColor", _v$5, _p$.e));
-              _v$6 !== _p$.t && (_p$.t = _$setProp(_el$39, "backgroundColor", _v$6, _p$.t));
-              _v$7 !== _p$.a && (_p$.a = _$setProp(_el$40, "fg", _v$7, _p$.a));
+              var _v$9 = focused() === "options" && optionIndex() === dontKnowIdx() + 1 ? theme().accent : theme().success, _v$0 = focused() === "options" && optionIndex() === dontKnowIdx() + 1 ? theme().backgroundElement : theme().success, _v$1 = focused() === "options" && optionIndex() === dontKnowIdx() + 1 ? theme().accent : theme().background;
+              _v$9 !== _p$.e && (_p$.e = _$setProp(_el$36, "borderColor", _v$9, _p$.e));
+              _v$0 !== _p$.t && (_p$.t = _$setProp(_el$36, "backgroundColor", _v$0, _p$.t));
+              _v$1 !== _p$.a && (_p$.a = _$setProp(_el$37, "fg", _v$1, _p$.a));
               return _p$;
             }, {
               e: undefined,
               t: undefined,
               a: undefined
             });
-            return _el$38;
+            return _el$35;
           }
         }), null);
         _$effect((_p$) => {
-          var _v$8 = theme().borderSubtle, _v$9 = theme().background, _v$0 = focused() === "options" && optionIndex() === dontKnowIdx() ? theme().backgroundElement : undefined, _v$1 = focused() === "options" && optionIndex() === dontKnowIdx() ? theme().accent : theme().textMuted, _v$10 = dontKnow() ? theme().warning : theme().textMuted, _v$11 = dontKnow() ? theme().warning : theme().textMuted, _v$12 = focused() === "note" ? theme().accent : theme().textMuted, _v$13 = focused() === "note", _v$14 = focused() === "note" ? theme().accent : theme().borderSubtle, _v$15 = theme().backgroundElement, _v$16 = theme().textMuted;
-          _v$8 !== _p$.e && (_p$.e = _$setProp(_el$0, "borderColor", _v$8, _p$.e));
-          _v$9 !== _p$.t && (_p$.t = _$setProp(_el$0, "backgroundColor", _v$9, _p$.t));
-          _v$0 !== _p$.a && (_p$.a = _$setProp(_el$11, "backgroundColor", _v$0, _p$.a));
-          _v$1 !== _p$.o && (_p$.o = _$setProp(_el$13, "fg", _v$1, _p$.o));
-          _v$10 !== _p$.i && (_p$.i = _$setProp(_el$15, "fg", _v$10, _p$.i));
-          _v$11 !== _p$.n && (_p$.n = _$setProp(_el$17, "fg", _v$11, _p$.n));
-          _v$12 !== _p$.s && (_p$.s = _$setProp(_el$21, "fg", _v$12, _p$.s));
-          _v$13 !== _p$.h && (_p$.h = _$setProp(_el$21, "bold", _v$13, _p$.h));
-          _v$14 !== _p$.r && (_p$.r = _$setProp(_el$25, "borderColor", _v$14, _p$.r));
-          _v$15 !== _p$.d && (_p$.d = _$setProp(_el$25, "backgroundColor", _v$15, _p$.d));
-          _v$16 !== _p$.l && (_p$.l = _$setProp(_el$28, "fg", _v$16, _p$.l));
+          var _v$10 = theme().borderSubtle, _v$11 = theme().background, _v$12 = focused() === "options" && optionIndex() === dontKnowIdx() ? theme().backgroundElement : undefined, _v$13 = focused() === "options" && optionIndex() === dontKnowIdx() ? theme().accent : theme().textMuted, _v$14 = dontKnow() ? theme().warning : theme().textMuted, _v$15 = dontKnow() ? theme().warning : theme().textMuted, _v$16 = focused() === "note" ? theme().accent : theme().textMuted, _v$17 = focused() === "note", _v$18 = focused() === "note" ? theme().accent : theme().borderSubtle, _v$19 = theme().backgroundElement, _v$20 = theme().textMuted, _v$21 = theme().textMuted;
+          _v$10 !== _p$.e && (_p$.e = _$setProp(_el$0, "borderColor", _v$10, _p$.e));
+          _v$11 !== _p$.t && (_p$.t = _$setProp(_el$0, "backgroundColor", _v$11, _p$.t));
+          _v$12 !== _p$.a && (_p$.a = _$setProp(_el$11, "backgroundColor", _v$12, _p$.a));
+          _v$13 !== _p$.o && (_p$.o = _$setProp(_el$13, "fg", _v$13, _p$.o));
+          _v$14 !== _p$.i && (_p$.i = _$setProp(_el$15, "fg", _v$14, _p$.i));
+          _v$15 !== _p$.n && (_p$.n = _$setProp(_el$17, "fg", _v$15, _p$.n));
+          _v$16 !== _p$.s && (_p$.s = _$setProp(_el$21, "fg", _v$16, _p$.s));
+          _v$17 !== _p$.h && (_p$.h = _$setProp(_el$21, "bold", _v$17, _p$.h));
+          _v$18 !== _p$.r && (_p$.r = _$setProp(_el$25, "borderColor", _v$18, _p$.r));
+          _v$19 !== _p$.d && (_p$.d = _$setProp(_el$25, "backgroundColor", _v$19, _p$.d));
+          _v$20 !== _p$.l && (_p$.l = _$setProp(_el$28, "fg", _v$20, _p$.l));
+          _v$21 !== _p$.u && (_p$.u = _$setProp(_el$29, "fg", _v$21, _p$.u));
           return _p$;
         }, {
           e: undefined,
@@ -673,7 +1028,8 @@ function QuizDialog(props) {
           h: undefined,
           r: undefined,
           d: undefined,
-          l: undefined
+          l: undefined,
+          u: undefined
         });
         return _el$0;
       }
@@ -683,29 +1039,29 @@ function QuizDialog(props) {
         return phase() === "classifying";
       },
       get children() {
-        var _el$42 = _$createElement("box"), _el$43 = _$createElement("text"), _el$45 = _$createElement("text"), _el$46 = _$createTextNode(`"`), _el$47 = _$createTextNode(`"`), _el$48 = _$createElement("text");
+        var _el$39 = _$createElement("box"), _el$40 = _$createElement("text"), _el$42 = _$createElement("text"), _el$43 = _$createTextNode(`"`), _el$44 = _$createTextNode(`"`), _el$45 = _$createElement("text");
+        _$insertNode(_el$39, _el$40);
+        _$insertNode(_el$39, _el$42);
+        _$insertNode(_el$39, _el$45);
+        _$setProp(_el$39, "flexDirection", "column");
+        _$setProp(_el$39, "gap", 1);
+        _$setProp(_el$39, "padding", 1);
+        _$setProp(_el$39, "border", true);
+        _$setProp(_el$39, "alignItems", "center");
+        _$insertNode(_el$40, _$createTextNode(`\u25D0 Classifying your note...`));
+        _$setProp(_el$40, "bold", true);
         _$insertNode(_el$42, _el$43);
-        _$insertNode(_el$42, _el$45);
-        _$insertNode(_el$42, _el$48);
-        _$setProp(_el$42, "flexDirection", "column");
-        _$setProp(_el$42, "gap", 1);
-        _$setProp(_el$42, "padding", 1);
-        _$setProp(_el$42, "border", true);
-        _$setProp(_el$42, "alignItems", "center");
-        _$insertNode(_el$43, _$createTextNode(`\u25D0 Classifying your note...`));
-        _$setProp(_el$43, "bold", true);
-        _$insertNode(_el$45, _el$46);
-        _$insertNode(_el$45, _el$47);
-        _$setProp(_el$45, "wrapMode", "wrap");
-        _$insert(_el$45, note, _el$47);
-        _$insertNode(_el$48, _$createTextNode(`Mapping to options \u2014 please wait`));
+        _$insertNode(_el$42, _el$44);
+        _$setProp(_el$42, "wrapMode", "wrap");
+        _$insert(_el$42, note, _el$44);
+        _$insertNode(_el$45, _$createTextNode(`Mapping to options \u2014 please wait`));
         _$effect((_p$) => {
-          var _v$17 = theme().accent, _v$18 = theme().background, _v$19 = theme().accent, _v$20 = theme().textMuted, _v$21 = theme().textMuted;
-          _v$17 !== _p$.e && (_p$.e = _$setProp(_el$42, "borderColor", _v$17, _p$.e));
-          _v$18 !== _p$.t && (_p$.t = _$setProp(_el$42, "backgroundColor", _v$18, _p$.t));
-          _v$19 !== _p$.a && (_p$.a = _$setProp(_el$43, "fg", _v$19, _p$.a));
-          _v$20 !== _p$.o && (_p$.o = _$setProp(_el$45, "fg", _v$20, _p$.o));
-          _v$21 !== _p$.i && (_p$.i = _$setProp(_el$48, "fg", _v$21, _p$.i));
+          var _v$22 = theme().accent, _v$23 = theme().background, _v$24 = theme().accent, _v$25 = theme().textMuted, _v$26 = theme().textMuted;
+          _v$22 !== _p$.e && (_p$.e = _$setProp(_el$39, "borderColor", _v$22, _p$.e));
+          _v$23 !== _p$.t && (_p$.t = _$setProp(_el$39, "backgroundColor", _v$23, _p$.t));
+          _v$24 !== _p$.a && (_p$.a = _$setProp(_el$40, "fg", _v$24, _p$.a));
+          _v$25 !== _p$.o && (_p$.o = _$setProp(_el$42, "fg", _v$25, _p$.o));
+          _v$26 !== _p$.i && (_p$.i = _$setProp(_el$45, "fg", _v$26, _p$.i));
           return _p$;
         }, {
           e: undefined,
@@ -714,7 +1070,7 @@ function QuizDialog(props) {
           o: undefined,
           i: undefined
         });
-        return _el$42;
+        return _el$39;
       }
     }), null);
     _$insert(_el$6, _$createComponent(Show, {
@@ -722,15 +1078,15 @@ function QuizDialog(props) {
         return phase() === "feedback";
       },
       get children() {
-        var _el$50 = _$createElement("box"), _el$51 = _$createElement("box"), _el$52 = _$createElement("text"), _el$56 = _$createElement("text"), _el$57 = _$createTextNode(`Correct: `), _el$60 = _$createElement("box"), _el$61 = _$createElement("text");
-        _$insertNode(_el$50, _el$51);
-        _$insertNode(_el$50, _el$56);
-        _$insertNode(_el$50, _el$60);
-        _$setProp(_el$50, "flexDirection", "column");
-        _$setProp(_el$50, "gap", 1);
-        _$setProp(_el$50, "padding", 1);
-        _$setProp(_el$50, "border", true);
-        _$insert(_el$50, _$createComponent(For, {
+        var _el$47 = _$createElement("box"), _el$48 = _$createElement("box"), _el$49 = _$createElement("text"), _el$53 = _$createElement("text"), _el$54 = _$createTextNode(`Correct: `), _el$57 = _$createElement("box"), _el$58 = _$createElement("markdown");
+        _$insertNode(_el$47, _el$48);
+        _$insertNode(_el$47, _el$53);
+        _$insertNode(_el$47, _el$57);
+        _$setProp(_el$47, "flexDirection", "column");
+        _$setProp(_el$47, "gap", 1);
+        _$setProp(_el$47, "padding", 1);
+        _$setProp(_el$47, "border", true);
+        _$insert(_el$47, _$createComponent(For, {
           get each() {
             return options();
           },
@@ -759,85 +1115,86 @@ function QuizDialog(props) {
               bg = theme().warning;
             }
             return (() => {
-              var _el$73 = _$createElement("box"), _el$74 = _$createElement("box"), _el$75 = _$createElement("text"), _el$76 = _$createElement("box"), _el$77 = _$createElement("text"), _el$78 = _$createTextNode(`. `);
+              var _el$70 = _$createElement("box"), _el$71 = _$createElement("box"), _el$72 = _$createElement("text"), _el$73 = _$createElement("box"), _el$74 = _$createElement("text"), _el$75 = _$createTextNode(`. `);
+              _$insertNode(_el$70, _el$71);
+              _$insertNode(_el$70, _el$73);
+              _$setProp(_el$70, "flexDirection", "row");
+              _$setProp(_el$70, "alignItems", "flexStart");
+              _$setProp(_el$70, "gap", 1);
+              _$setProp(_el$70, "paddingLeft", 1);
+              _$setProp(_el$70, "backgroundColor", bg);
+              _$insertNode(_el$71, _el$72);
+              _$setProp(_el$71, "width", 2);
+              _$setProp(_el$71, "alignItems", "center");
+              _$setProp(_el$72, "fg", fg);
+              _$setProp(_el$72, "bold", true);
+              _$insert(_el$72, icon);
               _$insertNode(_el$73, _el$74);
-              _$insertNode(_el$73, _el$76);
-              _$setProp(_el$73, "flexDirection", "row");
-              _$setProp(_el$73, "alignItems", "flexStart");
-              _$setProp(_el$73, "gap", 1);
-              _$setProp(_el$73, "paddingLeft", 1);
-              _$setProp(_el$73, "backgroundColor", bg);
+              _$setProp(_el$73, "flexGrow", 1);
               _$insertNode(_el$74, _el$75);
-              _$setProp(_el$74, "width", 2);
-              _$setProp(_el$74, "alignItems", "center");
-              _$setProp(_el$75, "fg", fg);
-              _$setProp(_el$75, "bold", true);
-              _$insert(_el$75, icon);
-              _$insertNode(_el$76, _el$77);
-              _$setProp(_el$76, "flexGrow", 1);
-              _$insertNode(_el$77, _el$78);
-              _$setProp(_el$77, "fg", fg);
-              _$setProp(_el$77, "wrapMode", "wrap");
-              _$insert(_el$77, idx, _el$78);
-              _$insert(_el$77, () => opt.label, null);
-              return _el$73;
+              _$setProp(_el$74, "fg", fg);
+              _$setProp(_el$74, "wrapMode", "wrap");
+              _$insert(_el$74, idx, _el$75);
+              _$insert(_el$74, () => opt.label, null);
+              return _el$70;
             })();
           }
-        }), _el$51);
-        _$insertNode(_el$51, _el$52);
-        _$setProp(_el$51, "height", 1);
-        _$insert(_el$52, () => "\u2500".repeat(Math.max(20, popupWidth() - 12)));
-        _$insert(_el$50, _$createComponent(Show, {
+        }), _el$48);
+        _$insertNode(_el$48, _el$49);
+        _$setProp(_el$48, "height", 1);
+        _$insert(_el$49, () => "\u2500".repeat(Math.max(20, popupWidth() - 12)));
+        _$insert(_el$47, _$createComponent(Show, {
           get when() {
             return dontKnow();
           },
           get children() {
-            var _el$53 = _$createElement("text");
-            _$insertNode(_el$53, _$createTextNode(`\u25CF You said: I don't know \u2014 genuine gap`));
-            _$effect((_$p) => _$setProp(_el$53, "fg", theme().warning, _$p));
-            return _el$53;
+            var _el$50 = _$createElement("text");
+            _$insertNode(_el$50, _$createTextNode(`\u25CF You said: I don't know \u2014 genuine gap`));
+            _$effect((_$p) => _$setProp(_el$50, "fg", theme().warning, _$p));
+            return _el$50;
           }
-        }), _el$56);
-        _$insert(_el$50, _$createComponent(Show, {
+        }), _el$53);
+        _$insert(_el$47, _$createComponent(Show, {
           get when() {
             return !dontKnow();
           },
           get children() {
-            var _el$55 = _$createElement("text");
-            _$setProp(_el$55, "bold", true);
-            _$insert(_el$55, () => feedback()?.correct ? "\u2713 Correct!  Well located." : "\u2717 Incorrect \u2014 nice try, let's fix the edge.");
-            _$effect((_$p) => _$setProp(_el$55, "fg", feedback()?.correct ? theme().success : theme().error, _$p));
-            return _el$55;
+            var _el$52 = _$createElement("text");
+            _$setProp(_el$52, "bold", true);
+            _$insert(_el$52, () => feedback()?.correct ? "\u2713 Correct!  Well located." : "\u2717 Incorrect \u2014 nice try, let's fix the edge.");
+            _$effect((_$p) => _$setProp(_el$52, "fg", feedback()?.correct ? theme().success : theme().error, _$p));
+            return _el$52;
           }
-        }), _el$56);
-        _$insertNode(_el$56, _el$57);
-        _$insert(_el$56, () => props.request.correctIndices.map((i) => `${i}. ${options()[i - 1]?.label}`).join(", "), null);
-        _$insert(_el$50, _$createComponent(Show, {
+        }), _el$53);
+        _$insertNode(_el$53, _el$54);
+        _$insert(_el$53, () => props.request.correctIndices.map((i) => `${i}. ${options()[i - 1]?.label}`).join(", "), null);
+        _$insert(_el$47, _$createComponent(Show, {
           get when() {
             return note();
           },
           get children() {
-            var _el$58 = _$createElement("text"), _el$59 = _$createTextNode(`Your note: `);
-            _$insertNode(_el$58, _el$59);
-            _$insert(_el$58, note, null);
-            _$effect((_$p) => _$setProp(_el$58, "fg", theme().textMuted, _$p));
-            return _el$58;
+            var _el$55 = _$createElement("text"), _el$56 = _$createTextNode(`Your note: `);
+            _$insertNode(_el$55, _el$56);
+            _$insert(_el$55, note, null);
+            _$effect((_$p) => _$setProp(_el$55, "fg", theme().textMuted, _$p));
+            return _el$55;
           }
-        }), _el$60);
-        _$insertNode(_el$60, _el$61);
-        _$setProp(_el$60, "border", true);
-        _$setProp(_el$60, "padding", 1);
-        _$setProp(_el$61, "wrapMode", "wrap");
-        _$insert(_el$61, () => props.request.explanation);
+        }), _el$57);
+        _$insertNode(_el$57, _el$58);
+        _$setProp(_el$57, "border", true);
+        _$setProp(_el$57, "padding", 1);
         _$effect((_p$) => {
-          var _v$22 = feedback()?.correct ? theme().success : theme().error, _v$23 = theme().background, _v$24 = theme().borderSubtle, _v$25 = theme().textMuted, _v$26 = theme().borderSubtle, _v$27 = theme().backgroundPanel, _v$28 = theme().text;
-          _v$22 !== _p$.e && (_p$.e = _$setProp(_el$50, "borderColor", _v$22, _p$.e));
-          _v$23 !== _p$.t && (_p$.t = _$setProp(_el$50, "backgroundColor", _v$23, _p$.t));
-          _v$24 !== _p$.a && (_p$.a = _$setProp(_el$52, "fg", _v$24, _p$.a));
-          _v$25 !== _p$.o && (_p$.o = _$setProp(_el$56, "fg", _v$25, _p$.o));
-          _v$26 !== _p$.i && (_p$.i = _$setProp(_el$60, "borderColor", _v$26, _p$.i));
-          _v$27 !== _p$.n && (_p$.n = _$setProp(_el$60, "backgroundColor", _v$27, _p$.n));
-          _v$28 !== _p$.s && (_p$.s = _$setProp(_el$61, "fg", _v$28, _p$.s));
+          var _v$27 = feedback()?.correct ? theme().success : theme().error, _v$28 = theme().background, _v$29 = theme().borderSubtle, _v$30 = theme().textMuted, _v$31 = theme().borderSubtle, _v$32 = theme().backgroundPanel, _v$33 = syntax(), _v$34 = decodeQuizText(props.request.explanation), _v$35 = theme().text, _v$36 = theme().backgroundPanel;
+          _v$27 !== _p$.e && (_p$.e = _$setProp(_el$47, "borderColor", _v$27, _p$.e));
+          _v$28 !== _p$.t && (_p$.t = _$setProp(_el$47, "backgroundColor", _v$28, _p$.t));
+          _v$29 !== _p$.a && (_p$.a = _$setProp(_el$49, "fg", _v$29, _p$.a));
+          _v$30 !== _p$.o && (_p$.o = _$setProp(_el$53, "fg", _v$30, _p$.o));
+          _v$31 !== _p$.i && (_p$.i = _$setProp(_el$57, "borderColor", _v$31, _p$.i));
+          _v$32 !== _p$.n && (_p$.n = _$setProp(_el$57, "backgroundColor", _v$32, _p$.n));
+          _v$33 !== _p$.s && (_p$.s = _$setProp(_el$58, "syntaxStyle", _v$33, _p$.s));
+          _v$34 !== _p$.h && (_p$.h = _$setProp(_el$58, "content", _v$34, _p$.h));
+          _v$35 !== _p$.r && (_p$.r = _$setProp(_el$58, "fg", _v$35, _p$.r));
+          _v$36 !== _p$.d && (_p$.d = _$setProp(_el$58, "bg", _v$36, _p$.d));
           return _p$;
         }, {
           e: undefined,
@@ -846,29 +1203,43 @@ function QuizDialog(props) {
           o: undefined,
           i: undefined,
           n: undefined,
-          s: undefined
+          s: undefined,
+          h: undefined,
+          r: undefined,
+          d: undefined
         });
-        return _el$50;
+        return _el$47;
       }
     }), null);
-    _$insertNode(_el$62, _el$63);
-    _$setProp(_el$62, "height", 1);
-    _$setProp(_el$62, "justifyContent", "center");
-    _$insert(_el$63, (() => {
+    _$insertNode(_el$59, _el$60);
+    _$setProp(_el$59, "height", 1);
+    _$setProp(_el$59, "justifyContent", "center");
+    _$setProp(_el$60, "wrapMode", "wrap");
+    _$insert(_el$60, (() => {
       var _c$3 = _$memo(() => phase() === "feedback");
-      return () => _c$3() ? "\u21B5 Enter / Esc to continue  \u2192  next probe" : phase() === "classifying" ? "Classifying your note..." : "Navigate options \xB7 Tab note \xB7 Esc cancel";
+      return () => _c$3() ? _$memo(() => !!(canScrollUp() && canScrollDown()))() ? "\u25B2 more above \xB7 \u25BC more below \u2014 d/u to scroll \xB7 Enter to continue" : _$memo(() => !!canScrollDown())() ? "\u25BC more below \u2014 d to scroll \xB7 Enter to continue" : canScrollUp() ? "\u25B2 more above \u2014 u to scroll \xB7 Enter to continue" : "\u21B5 Enter / Esc to continue  \u2192  next probe" : _$memo(() => phase() === "classifying")() ? "Classifying your note..." : _$memo(() => focused() === "note")() ? "Enter submit note \u2192 classify \xB7 Tab/Esc back" : canScrollUp() || canScrollDown() ? "j/k or \u2191\u2193 move \xB7 Space toggle \xB7 Tab note \xB7 Enter submit \xB7 Esc cancel \xB7 d/u scroll" : "j/k or \u2191\u2193 move \xB7 Space toggle \xB7 Tab note \xB7 Enter submit \xB7 Esc cancel";
     })());
     _$effect((_p$) => {
-      var _v$29 = popupWidth(), _v$30 = popupHeight(), _v$31 = phase() === "feedback" ? feedback()?.correct ? theme().success : theme().error : theme().accent, _v$32 = theme().backgroundPanel, _v$33 = phase() === "feedback" ? feedback()?.correct ? theme().success : theme().error : theme().accent, _v$34 = theme().background, _v$35 = theme().background, _v$36 = theme().text, _v$37 = theme().textMuted;
-      _v$29 !== _p$.e && (_p$.e = _$setProp(_el$, "width", _v$29, _p$.e));
-      _v$30 !== _p$.t && (_p$.t = _$setProp(_el$, "height", _v$30, _p$.t));
-      _v$31 !== _p$.a && (_p$.a = _$setProp(_el$, "borderColor", _v$31, _p$.a));
-      _v$32 !== _p$.o && (_p$.o = _$setProp(_el$, "backgroundColor", _v$32, _p$.o));
-      _v$33 !== _p$.i && (_p$.i = _$setProp(_el$2, "backgroundColor", _v$33, _p$.i));
-      _v$34 !== _p$.n && (_p$.n = _$setProp(_el$3, "fg", _v$34, _p$.n));
-      _v$35 !== _p$.s && (_p$.s = _$setProp(_el$4, "fg", _v$35, _p$.s));
-      _v$36 !== _p$.h && (_p$.h = _$setProp(_el$8, "fg", _v$36, _p$.h));
-      _v$37 !== _p$.r && (_p$.r = _$setProp(_el$63, "fg", _v$37, _p$.r));
+      var _v$37 = popupWidth(), _v$38 = popupHeight(), _v$39 = phase() === "feedback" ? feedback()?.correct ? theme().success : theme().error : theme().accent, _v$40 = theme().backgroundPanel, _v$41 = phase() === "feedback" ? feedback()?.correct ? theme().success : theme().error : theme().accent, _v$42 = theme().background, _v$43 = theme().background, _v$44 = {
+        visible: true,
+        trackOptions: {
+          backgroundColor: theme().background,
+          foregroundColor: theme().borderActive
+        }
+      }, _v$45 = syntax(), _v$46 = decodeQuizText(props.request.question), _v$47 = theme().text, _v$48 = theme().backgroundPanel, _v$49 = theme().textMuted;
+      _v$37 !== _p$.e && (_p$.e = _$setProp(_el$, "width", _v$37, _p$.e));
+      _v$38 !== _p$.t && (_p$.t = _$setProp(_el$, "height", _v$38, _p$.t));
+      _v$39 !== _p$.a && (_p$.a = _$setProp(_el$, "borderColor", _v$39, _p$.a));
+      _v$40 !== _p$.o && (_p$.o = _$setProp(_el$, "backgroundColor", _v$40, _p$.o));
+      _v$41 !== _p$.i && (_p$.i = _$setProp(_el$2, "backgroundColor", _v$41, _p$.i));
+      _v$42 !== _p$.n && (_p$.n = _$setProp(_el$3, "fg", _v$42, _p$.n));
+      _v$43 !== _p$.s && (_p$.s = _$setProp(_el$4, "fg", _v$43, _p$.s));
+      _v$44 !== _p$.h && (_p$.h = _$setProp(_el$6, "verticalScrollbarOptions", _v$44, _p$.h));
+      _v$45 !== _p$.r && (_p$.r = _$setProp(_el$8, "syntaxStyle", _v$45, _p$.r));
+      _v$46 !== _p$.d && (_p$.d = _$setProp(_el$8, "content", _v$46, _p$.d));
+      _v$47 !== _p$.l && (_p$.l = _$setProp(_el$8, "fg", _v$47, _p$.l));
+      _v$48 !== _p$.u && (_p$.u = _$setProp(_el$8, "bg", _v$48, _p$.u));
+      _v$49 !== _p$.c && (_p$.c = _$setProp(_el$60, "fg", _v$49, _p$.c));
       return _p$;
     }, {
       e: undefined,
@@ -879,13 +1250,18 @@ function QuizDialog(props) {
       n: undefined,
       s: undefined,
       h: undefined,
-      r: undefined
+      r: undefined,
+      d: undefined,
+      l: undefined,
+      u: undefined,
+      c: undefined
     });
     return _el$;
   })();
 }
 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));
@@ -908,6 +1284,40 @@ function QuizBatchDialog(props) {
   const dontKnowIdx = () => cur().options.length;
   const submitIdx = () => isMulti() ? cur().options.length + 1 : -1;
   let noteEl;
+  let scrollRefBatch;
+  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) => (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 {
@@ -916,6 +1326,24 @@ function QuizBatchDialog(props) {
         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) => {
     try {
       const o = cur().options[i];
@@ -1092,16 +1520,63 @@ function QuizBatchDialog(props) {
       tlog("submitSelect failed", String(e));
     }
   };
+  const isPlainKeyBatch = (evt, want) => {
+    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) => {
     try {
       const k = evt.name || evt.sequence || evt.raw || "";
       const seq = evt.sequence || "";
+      const lower = String(k || "").toLowerCase();
       if (phase() === "classifying") {
         prevent(evt);
         return;
       }
       if (phase() === "feedback") {
-        if (k === "enter" || seq === "\r" || k === "escape" || k === "esc") {
+        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();
         }
@@ -1120,6 +1595,24 @@ function QuizBatchDialog(props) {
         }
         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));
@@ -1200,65 +1693,73 @@ function QuizBatchDialog(props) {
     }
   });
   return (() => {
-    var _el$79 = _$createElement("box"), _el$80 = _$createElement("box"), _el$81 = _$createElement("text"), _el$82 = _$createTextNode(` decks.quiz batch `), _el$83 = _$createTextNode(`/`), _el$84 = _$createTextNode(` `), _el$85 = _$createElement("text"), _el$87 = _$createElement("scrollbox"), _el$88 = _$createElement("text"), _el$129 = _$createElement("box"), _el$130 = _$createElement("text");
-    _$insertNode(_el$79, _el$80);
-    _$insertNode(_el$79, _el$87);
-    _$insertNode(_el$79, _el$129);
-    _$setProp(_el$79, "flexDirection", "column");
-    _$setProp(_el$79, "border", true);
-    _$setProp(_el$79, "padding", 1);
-    _$setProp(_el$79, "gap", 1);
-    _$insertNode(_el$80, _el$81);
-    _$insertNode(_el$80, _el$85);
-    _$setProp(_el$80, "flexDirection", "row");
-    _$setProp(_el$80, "justifyContent", "space-between");
-    _$setProp(_el$80, "paddingLeft", 1);
-    _$setProp(_el$80, "paddingRight", 1);
-    _$setProp(_el$80, "height", 1);
-    _$insertNode(_el$81, _el$82);
-    _$insertNode(_el$81, _el$83);
-    _$insertNode(_el$81, _el$84);
-    _$setProp(_el$81, "bold", true);
-    _$insert(_el$81, () => idx() + 1, _el$83);
-    _$insert(_el$81, () => props.request.quizzes.length, _el$84);
-    _$insert(_el$81, (() => {
+    var _el$76 = _$createElement("box"), _el$77 = _$createElement("box"), _el$78 = _$createElement("text"), _el$79 = _$createTextNode(` decks.quiz batch `), _el$80 = _$createTextNode(`/`), _el$81 = _$createTextNode(` `), _el$82 = _$createElement("text"), _el$84 = _$createElement("scrollbox"), _el$85 = _$createElement("markdown"), _el$126 = _$createElement("box"), _el$127 = _$createElement("text");
+    _$insertNode(_el$76, _el$77);
+    _$insertNode(_el$76, _el$84);
+    _$insertNode(_el$76, _el$126);
+    _$setProp(_el$76, "flexDirection", "column");
+    _$setProp(_el$76, "border", true);
+    _$setProp(_el$76, "padding", 1);
+    _$setProp(_el$76, "gap", 1);
+    _$insertNode(_el$77, _el$78);
+    _$insertNode(_el$77, _el$82);
+    _$setProp(_el$77, "flexDirection", "row");
+    _$setProp(_el$77, "justifyContent", "space-between");
+    _$setProp(_el$77, "paddingLeft", 1);
+    _$setProp(_el$77, "paddingRight", 1);
+    _$setProp(_el$77, "height", 1);
+    _$insertNode(_el$78, _el$79);
+    _$insertNode(_el$78, _el$80);
+    _$insertNode(_el$78, _el$81);
+    _$setProp(_el$78, "bold", true);
+    _$insert(_el$78, () => idx() + 1, _el$80);
+    _$insert(_el$78, () => props.request.quizzes.length, _el$81);
+    _$insert(_el$78, (() => {
       var _c$5 = _$memo(() => phase() === "feedback");
       return () => _c$5() ? feedback()?.correct ? "\u2713" : "\u2717" : "";
     })(), null);
-    _$insertNode(_el$85, _$createTextNode(`learn`));
-    _$setProp(_el$85, "dim", true);
-    _$insertNode(_el$87, _el$88);
-    _$setProp(_el$87, "flexGrow", 1);
-    _$setProp(_el$88, "bold", true);
-    _$setProp(_el$88, "wrapMode", "wrap");
-    _$insert(_el$88, () => cur().question);
-    _$insert(_el$87, _$createComponent(Show, {
+    _$insertNode(_el$82, _$createTextNode(`learn`));
+    _$setProp(_el$82, "dim", true);
+    _$insertNode(_el$84, _el$85);
+    _$use((el) => scrollRefBatch = el, _el$84);
+    _$setProp(_el$84, "flexGrow", 1);
+    _$insert(_el$84, _$createComponent(Show, {
       get when() {
         return cur().details;
       },
       get children() {
-        var _el$89 = _$createElement("text");
-        _$setProp(_el$89, "wrapMode", "wrap");
-        _$insert(_el$89, () => cur().details);
-        _$effect((_$p) => _$setProp(_el$89, "fg", theme().textMuted, _$p));
-        return _el$89;
+        var _el$86 = _$createElement("markdown");
+        _$effect((_p$) => {
+          var _v$55 = syntax(), _v$56 = decodeQuizText(cur().details), _v$57 = theme().textMuted, _v$58 = theme().backgroundPanel;
+          _v$55 !== _p$.e && (_p$.e = _$setProp(_el$86, "syntaxStyle", _v$55, _p$.e));
+          _v$56 !== _p$.t && (_p$.t = _$setProp(_el$86, "content", _v$56, _p$.t));
+          _v$57 !== _p$.a && (_p$.a = _$setProp(_el$86, "fg", _v$57, _p$.a));
+          _v$58 !== _p$.o && (_p$.o = _$setProp(_el$86, "bg", _v$58, _p$.o));
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined,
+          a: undefined,
+          o: undefined
+        });
+        return _el$86;
       }
     }), null);
-    _$insert(_el$87, _$createComponent(Show, {
+    _$insert(_el$84, _$createComponent(Show, {
       get when() {
         return phase() === "select";
       },
       get children() {
-        var _el$90 = _$createElement("box"), _el$91 = _$createElement("box"), _el$92 = _$createElement("text"), _el$93 = _$createElement("box"), _el$94 = _$createElement("box"), _el$95 = _$createElement("text"), _el$96 = _$createElement("box"), _el$97 = _$createElement("text"), _el$98 = _$createElement("box"), _el$99 = _$createElement("text"), _el$101 = _$createElement("box"), _el$102 = _$createElement("text"), _el$104 = _$createElement("box"), _el$106 = _$createElement("box"), _el$107 = _$createElement("text"), _el$108 = _$createElement("text"), _el$109 = _$createTextNode(`/`);
-        _$insertNode(_el$90, _el$91);
-        _$insertNode(_el$90, _el$93);
-        _$insertNode(_el$90, _el$101);
-        _$insertNode(_el$90, _el$106);
-        _$setProp(_el$90, "flexDirection", "column");
-        _$setProp(_el$90, "gap", 0);
-        _$setProp(_el$90, "padding", 1);
-        _$setProp(_el$90, "border", true);
-        _$insert(_el$90, _$createComponent(For, {
+        var _el$87 = _$createElement("box"), _el$88 = _$createElement("box"), _el$89 = _$createElement("text"), _el$90 = _$createElement("box"), _el$91 = _$createElement("box"), _el$92 = _$createElement("text"), _el$93 = _$createElement("box"), _el$94 = _$createElement("text"), _el$95 = _$createElement("box"), _el$96 = _$createElement("text"), _el$98 = _$createElement("box"), _el$99 = _$createElement("text"), _el$101 = _$createElement("box"), _el$103 = _$createElement("box"), _el$104 = _$createElement("text"), _el$105 = _$createElement("text"), _el$106 = _$createTextNode(`/`);
+        _$insertNode(_el$87, _el$88);
+        _$insertNode(_el$87, _el$90);
+        _$insertNode(_el$87, _el$98);
+        _$insertNode(_el$87, _el$103);
+        _$setProp(_el$87, "flexDirection", "column");
+        _$setProp(_el$87, "gap", 0);
+        _$setProp(_el$87, "padding", 1);
+        _$setProp(_el$87, "border", true);
+        _$insert(_el$87, _$createComponent(For, {
           get each() {
             return cur().options;
           },
@@ -1267,36 +1768,36 @@ function QuizBatchDialog(props) {
             const foc = () => focused() === "options" && optionIndex() === id;
             const sel = () => selected().has(`opt:${id}`);
             return (() => {
-              var _el$131 = _$createElement("box"), _el$132 = _$createElement("box"), _el$133 = _$createElement("text"), _el$134 = _$createElement("box"), _el$135 = _$createElement("text"), _el$136 = _$createElement("box"), _el$137 = _$createElement("text"), _el$138 = _$createTextNode(`. `);
+              var _el$128 = _$createElement("box"), _el$129 = _$createElement("box"), _el$130 = _$createElement("text"), _el$131 = _$createElement("box"), _el$132 = _$createElement("text"), _el$133 = _$createElement("box"), _el$134 = _$createElement("text"), _el$135 = _$createTextNode(`. `);
+              _$insertNode(_el$128, _el$129);
+              _$insertNode(_el$128, _el$131);
+              _$insertNode(_el$128, _el$133);
+              _$setProp(_el$128, "flexDirection", "row");
+              _$setProp(_el$128, "alignItems", "flexStart");
+              _$setProp(_el$128, "gap", 1);
+              _$setProp(_el$128, "paddingLeft", 1);
+              _$insertNode(_el$129, _el$130);
+              _$setProp(_el$129, "width", 2);
+              _$insert(_el$130, () => foc() ? "\u25B8" : " ");
               _$insertNode(_el$131, _el$132);
-              _$insertNode(_el$131, _el$134);
-              _$insertNode(_el$131, _el$136);
-              _$setProp(_el$131, "flexDirection", "row");
-              _$setProp(_el$131, "alignItems", "flexStart");
-              _$setProp(_el$131, "gap", 1);
-              _$setProp(_el$131, "paddingLeft", 1);
-              _$insertNode(_el$132, _el$133);
-              _$setProp(_el$132, "width", 2);
-              _$insert(_el$133, () => foc() ? "\u25B8" : " ");
-              _$insertNode(_el$134, _el$135);
-              _$setProp(_el$134, "width", 2);
-              _$insert(_el$135, (() => {
-                var _c$7 = _$memo(() => !!isMulti());
-                return () => _c$7() ? sel() ? "\u2611" : "\u2610" : sel() ? "\u2B22" : "\u25CB";
+              _$setProp(_el$131, "width", 2);
+              _$insert(_el$132, (() => {
+                var _c$8 = _$memo(() => !!isMulti());
+                return () => _c$8() ? sel() ? "\u2611" : "\u2610" : sel() ? "\u2B22" : "\u25CB";
               })());
-              _$insertNode(_el$136, _el$137);
-              _$setProp(_el$136, "flexGrow", 1);
-              _$insertNode(_el$137, _el$138);
-              _$setProp(_el$137, "wrapMode", "wrap");
-              _$insert(_el$137, id + 1, _el$138);
-              _$insert(_el$137, () => opt.label, null);
+              _$insertNode(_el$133, _el$134);
+              _$setProp(_el$133, "flexGrow", 1);
+              _$insertNode(_el$134, _el$135);
+              _$setProp(_el$134, "wrapMode", "wrap");
+              _$insert(_el$134, id + 1, _el$135);
+              _$insert(_el$134, () => opt.label, null);
               _$effect((_p$) => {
-                var _v$79 = foc() ? theme().backgroundElement : undefined, _v$80 = foc() ? theme().accent : theme().textMuted, _v$81 = isMulti() ? sel() ? theme().success : theme().textMuted : sel() ? theme().accent : theme().textMuted, _v$82 = sel() ? theme().text : theme().textMuted, _v$83 = foc();
-                _v$79 !== _p$.e && (_p$.e = _$setProp(_el$131, "backgroundColor", _v$79, _p$.e));
-                _v$80 !== _p$.t && (_p$.t = _$setProp(_el$133, "fg", _v$80, _p$.t));
-                _v$81 !== _p$.a && (_p$.a = _$setProp(_el$135, "fg", _v$81, _p$.a));
-                _v$82 !== _p$.o && (_p$.o = _$setProp(_el$137, "fg", _v$82, _p$.o));
-                _v$83 !== _p$.i && (_p$.i = _$setProp(_el$137, "bold", _v$83, _p$.i));
+                var _v$102 = foc() ? theme().backgroundElement : undefined, _v$103 = foc() ? theme().accent : theme().textMuted, _v$104 = isMulti() ? sel() ? theme().success : theme().textMuted : sel() ? theme().accent : theme().textMuted, _v$105 = sel() ? theme().text : theme().textMuted, _v$106 = foc();
+                _v$102 !== _p$.e && (_p$.e = _$setProp(_el$128, "backgroundColor", _v$102, _p$.e));
+                _v$103 !== _p$.t && (_p$.t = _$setProp(_el$130, "fg", _v$103, _p$.t));
+                _v$104 !== _p$.a && (_p$.a = _$setProp(_el$132, "fg", _v$104, _p$.a));
+                _v$105 !== _p$.o && (_p$.o = _$setProp(_el$134, "fg", _v$105, _p$.o));
+                _v$106 !== _p$.i && (_p$.i = _$setProp(_el$134, "bold", _v$106, _p$.i));
                 return _p$;
               }, {
                 e: undefined,
@@ -1305,120 +1806,123 @@ function QuizBatchDialog(props) {
                 o: undefined,
                 i: undefined
               });
-              return _el$131;
+              return _el$128;
             })();
           }
-        }), _el$91);
+        }), _el$88);
+        _$insertNode(_el$88, _el$89);
+        _$setProp(_el$88, "height", 1);
+        _$insert(_el$89, () => "\u2500".repeat(Math.max(20, popupWidth() - 8)));
+        _$insertNode(_el$90, _el$91);
+        _$insertNode(_el$90, _el$93);
+        _$insertNode(_el$90, _el$95);
+        _$setProp(_el$90, "flexDirection", "row");
+        _$setProp(_el$90, "gap", 1);
+        _$setProp(_el$90, "paddingLeft", 1);
         _$insertNode(_el$91, _el$92);
-        _$setProp(_el$91, "height", 1);
-        _$insert(_el$92, () => "\u2500".repeat(Math.max(20, popupWidth() - 8)));
+        _$setProp(_el$91, "width", 2);
+        _$insert(_el$92, () => focused() === "options" && optionIndex() === dontKnowIdx() ? "\u25B8" : " ");
         _$insertNode(_el$93, _el$94);
-        _$insertNode(_el$93, _el$96);
-        _$insertNode(_el$93, _el$98);
-        _$setProp(_el$93, "flexDirection", "row");
-        _$setProp(_el$93, "gap", 1);
-        _$setProp(_el$93, "paddingLeft", 1);
-        _$insertNode(_el$94, _el$95);
-        _$setProp(_el$94, "width", 2);
-        _$insert(_el$95, () => focused() === "options" && optionIndex() === dontKnowIdx() ? "\u25B8" : " ");
-        _$insertNode(_el$96, _el$97);
-        _$setProp(_el$96, "width", 2);
-        _$insert(_el$97, () => dontKnow() ? "\u2611" : "\u2610");
+        _$setProp(_el$93, "width", 2);
+        _$insert(_el$94, () => dontKnow() ? "\u2611" : "\u2610");
+        _$insertNode(_el$95, _el$96);
+        _$setProp(_el$95, "flexGrow", 1);
+        _$insertNode(_el$96, _$createTextNode(`I don't know`));
+        _$setProp(_el$96, "italic", true);
         _$insertNode(_el$98, _el$99);
-        _$setProp(_el$98, "flexGrow", 1);
-        _$insertNode(_el$99, _$createTextNode(`I don't know`));
-        _$setProp(_el$99, "italic", true);
-        _$insertNode(_el$101, _el$102);
-        _$insertNode(_el$101, _el$104);
-        _$setProp(_el$101, "flexDirection", "column");
-        _$setProp(_el$101, "paddingTop", 1);
-        _$insertNode(_el$102, _$createTextNode(`\u270E Note`));
-        _$setProp(_el$104, "border", true);
-        _$setProp(_el$104, "paddingLeft", 1);
-        _$setProp(_el$104, "paddingRight", 1);
-        _$insert(_el$104, _$createComponent(Show, {
+        _$insertNode(_el$98, _el$101);
+        _$setProp(_el$98, "flexDirection", "column");
+        _$setProp(_el$98, "paddingTop", 1);
+        _$insertNode(_el$99, _$createTextNode(`\u270E Note`));
+        _$setProp(_el$101, "border", true);
+        _$setProp(_el$101, "paddingLeft", 1);
+        _$setProp(_el$101, "paddingRight", 1);
+        _$insert(_el$101, _$createComponent(Show, {
           get when() {
             return focused() === "note";
           },
           get fallback() {
             return (() => {
-              var _el$139 = _$createElement("text");
-              _$insert(_el$139, () => note() || "Tab to edit \xB7 share what you were thinking");
-              _$effect((_$p) => _$setProp(_el$139, "fg", theme().textMuted, _$p));
-              return _el$139;
+              var _el$136 = _$createElement("text");
+              _$insert(_el$136, () => note() || "Tab to edit \xB7 share what you were thinking");
+              _$effect((_$p) => _$setProp(_el$136, "fg", theme().textMuted, _$p));
+              return _el$136;
             })();
           },
           get children() {
-            var _el$105 = _$createElement("input");
-            _$use((el) => noteEl = el, _el$105);
-            _$setProp(_el$105, "onInput", (v) => setNote(typeof v === "string" ? v : v?.target?.value ?? ""));
-            _$setProp(_el$105, "onSubmit", () => {
+            var _el$102 = _$createElement("input");
+            _$use((el) => noteEl = el, _el$102);
+            _$setProp(_el$102, "onInput", (v) => setNote(typeof v === "string" ? v : v?.target?.value ?? ""));
+            _$setProp(_el$102, "onSubmit", () => {
               if (!selected().size && !dontKnow() && note().trim())
                 submitSelect();
               else
                 setFocused("options");
             });
-            _$setProp(_el$105, "placeholder", "note (Enter to submit note \u2192 classify)");
-            _$effect((_$p) => _$setProp(_el$105, "value", note(), _$p));
-            return _el$105;
+            _$setProp(_el$102, "placeholder", "note (Enter to submit note \u2192 classify)");
+            _$effect((_$p) => _$setProp(_el$102, "value", note(), _$p));
+            return _el$102;
           }
         }));
-        _$insertNode(_el$106, _el$107);
-        _$insertNode(_el$106, _el$108);
-        _$setProp(_el$106, "flexDirection", "row");
-        _$setProp(_el$106, "justifyContent", "space-between");
-        _$setProp(_el$106, "paddingTop", 1);
-        _$insert(_el$107, () => focused() === "note" ? "Enter submit note \u2192 classify \xB7 Tab back \xB7 Esc back" : "Space toggle \xB7 \u2193 to Submit \u2192 Enter \xB7 Tab note \xB7 Ctrl+Enter submit");
-        _$insertNode(_el$108, _el$109);
-        _$insert(_el$108, () => idx() + 1, _el$109);
-        _$insert(_el$108, () => props.request.quizzes.length, null);
-        _$insert(_el$90, _$createComponent(Show, {
+        _$insertNode(_el$103, _el$104);
+        _$insertNode(_el$103, _el$105);
+        _$setProp(_el$103, "flexDirection", "row");
+        _$setProp(_el$103, "justifyContent", "space-between");
+        _$setProp(_el$103, "paddingTop", 1);
+        _$insert(_el$104, (() => {
+          var _c$6 = _$memo(() => !!isMulti());
+          return () => _c$6() ? `${selected().size} selected` : note().trim() && !selected().size ? "note \u2192 classify" : "";
+        })());
+        _$insertNode(_el$105, _el$106);
+        _$insert(_el$105, () => idx() + 1, _el$106);
+        _$insert(_el$105, () => props.request.quizzes.length, null);
+        _$insert(_el$87, _$createComponent(Show, {
           get when() {
             return isMulti();
           },
           get children() {
-            var _el$110 = _$createElement("box"), _el$111 = _$createElement("box"), _el$112 = _$createElement("text"), _el$113 = _$createElement("text");
-            _$insertNode(_el$110, _el$111);
-            _$setProp(_el$110, "justifyContent", "center");
-            _$setProp(_el$110, "paddingTop", 1);
-            _$insertNode(_el$111, _el$112);
-            _$insertNode(_el$111, _el$113);
-            _$setProp(_el$111, "flexDirection", "row");
-            _$setProp(_el$111, "gap", 1);
-            _$setProp(_el$111, "border", true);
-            _$setProp(_el$111, "paddingLeft", 2);
-            _$setProp(_el$111, "paddingRight", 2);
-            _$insert(_el$112, () => focused() === "options" && optionIndex() === submitIdx() ? "\u25B8" : " ");
-            _$insertNode(_el$113, _$createTextNode(`\u21B3 Submit`));
-            _$setProp(_el$113, "bold", true);
+            var _el$107 = _$createElement("box"), _el$108 = _$createElement("box"), _el$109 = _$createElement("text"), _el$110 = _$createElement("text");
+            _$insertNode(_el$107, _el$108);
+            _$setProp(_el$107, "justifyContent", "center");
+            _$setProp(_el$107, "paddingTop", 1);
+            _$insertNode(_el$108, _el$109);
+            _$insertNode(_el$108, _el$110);
+            _$setProp(_el$108, "flexDirection", "row");
+            _$setProp(_el$108, "gap", 1);
+            _$setProp(_el$108, "border", true);
+            _$setProp(_el$108, "paddingLeft", 2);
+            _$setProp(_el$108, "paddingRight", 2);
+            _$insert(_el$109, () => focused() === "options" && optionIndex() === submitIdx() ? "\u25B8" : " ");
+            _$insertNode(_el$110, _$createTextNode(`\u21B3 Submit`));
+            _$setProp(_el$110, "bold", true);
             _$effect((_p$) => {
-              var _v$43 = focused() === "options" && optionIndex() === submitIdx() ? theme().accent : theme().borderSubtle, _v$44 = focused() === "options" && optionIndex() === submitIdx() ? theme().backgroundElement : theme().background, _v$45 = focused() === "options" && optionIndex() === submitIdx() ? theme().accent : theme().textMuted;
-              _v$43 !== _p$.e && (_p$.e = _$setProp(_el$111, "borderColor", _v$43, _p$.e));
-              _v$44 !== _p$.t && (_p$.t = _$setProp(_el$111, "backgroundColor", _v$44, _p$.t));
-              _v$45 !== _p$.a && (_p$.a = _$setProp(_el$112, "fg", _v$45, _p$.a));
+              var _v$59 = focused() === "options" && optionIndex() === submitIdx() ? theme().accent : theme().borderSubtle, _v$60 = focused() === "options" && optionIndex() === submitIdx() ? theme().backgroundElement : theme().background, _v$61 = focused() === "options" && optionIndex() === submitIdx() ? theme().accent : theme().textMuted;
+              _v$59 !== _p$.e && (_p$.e = _$setProp(_el$108, "borderColor", _v$59, _p$.e));
+              _v$60 !== _p$.t && (_p$.t = _$setProp(_el$108, "backgroundColor", _v$60, _p$.t));
+              _v$61 !== _p$.a && (_p$.a = _$setProp(_el$109, "fg", _v$61, _p$.a));
               return _p$;
             }, {
               e: undefined,
               t: undefined,
               a: undefined
             });
-            return _el$110;
+            return _el$107;
           }
         }), null);
         _$effect((_p$) => {
-          var _v$46 = theme().borderSubtle, _v$47 = theme().background, _v$48 = theme().borderSubtle, _v$49 = focused() === "options" && optionIndex() === dontKnowIdx() ? theme().backgroundElement : undefined, _v$50 = focused() === "options" && optionIndex() === dontKnowIdx() ? theme().accent : theme().textMuted, _v$51 = dontKnow() ? theme().warning : theme().textMuted, _v$52 = dontKnow() ? theme().warning : theme().textMuted, _v$53 = focused() === "note" ? theme().accent : theme().textMuted, _v$54 = focused() === "note" ? theme().accent : theme().borderSubtle, _v$55 = theme().backgroundElement, _v$56 = theme().textMuted, _v$57 = theme().textMuted;
-          _v$46 !== _p$.e && (_p$.e = _$setProp(_el$90, "borderColor", _v$46, _p$.e));
-          _v$47 !== _p$.t && (_p$.t = _$setProp(_el$90, "backgroundColor", _v$47, _p$.t));
-          _v$48 !== _p$.a && (_p$.a = _$setProp(_el$92, "fg", _v$48, _p$.a));
-          _v$49 !== _p$.o && (_p$.o = _$setProp(_el$93, "backgroundColor", _v$49, _p$.o));
-          _v$50 !== _p$.i && (_p$.i = _$setProp(_el$95, "fg", _v$50, _p$.i));
-          _v$51 !== _p$.n && (_p$.n = _$setProp(_el$97, "fg", _v$51, _p$.n));
-          _v$52 !== _p$.s && (_p$.s = _$setProp(_el$99, "fg", _v$52, _p$.s));
-          _v$53 !== _p$.h && (_p$.h = _$setProp(_el$102, "fg", _v$53, _p$.h));
-          _v$54 !== _p$.r && (_p$.r = _$setProp(_el$104, "borderColor", _v$54, _p$.r));
-          _v$55 !== _p$.d && (_p$.d = _$setProp(_el$104, "backgroundColor", _v$55, _p$.d));
-          _v$56 !== _p$.l && (_p$.l = _$setProp(_el$107, "fg", _v$56, _p$.l));
-          _v$57 !== _p$.u && (_p$.u = _$setProp(_el$108, "fg", _v$57, _p$.u));
+          var _v$62 = theme().borderSubtle, _v$63 = theme().background, _v$64 = theme().borderSubtle, _v$65 = focused() === "options" && optionIndex() === dontKnowIdx() ? theme().backgroundElement : undefined, _v$66 = focused() === "options" && optionIndex() === dontKnowIdx() ? theme().accent : theme().textMuted, _v$67 = dontKnow() ? theme().warning : theme().textMuted, _v$68 = dontKnow() ? theme().warning : theme().textMuted, _v$69 = focused() === "note" ? theme().accent : theme().textMuted, _v$70 = focused() === "note" ? theme().accent : theme().borderSubtle, _v$71 = theme().backgroundElement, _v$72 = theme().textMuted, _v$73 = theme().textMuted;
+          _v$62 !== _p$.e && (_p$.e = _$setProp(_el$87, "borderColor", _v$62, _p$.e));
+          _v$63 !== _p$.t && (_p$.t = _$setProp(_el$87, "backgroundColor", _v$63, _p$.t));
+          _v$64 !== _p$.a && (_p$.a = _$setProp(_el$89, "fg", _v$64, _p$.a));
+          _v$65 !== _p$.o && (_p$.o = _$setProp(_el$90, "backgroundColor", _v$65, _p$.o));
+          _v$66 !== _p$.i && (_p$.i = _$setProp(_el$92, "fg", _v$66, _p$.i));
+          _v$67 !== _p$.n && (_p$.n = _$setProp(_el$94, "fg", _v$67, _p$.n));
+          _v$68 !== _p$.s && (_p$.s = _$setProp(_el$96, "fg", _v$68, _p$.s));
+          _v$69 !== _p$.h && (_p$.h = _$setProp(_el$99, "fg", _v$69, _p$.h));
+          _v$70 !== _p$.r && (_p$.r = _$setProp(_el$101, "borderColor", _v$70, _p$.r));
+          _v$71 !== _p$.d && (_p$.d = _$setProp(_el$101, "backgroundColor", _v$71, _p$.d));
+          _v$72 !== _p$.l && (_p$.l = _$setProp(_el$104, "fg", _v$72, _p$.l));
+          _v$73 !== _p$.u && (_p$.u = _$setProp(_el$105, "fg", _v$73, _p$.u));
           return _p$;
         }, {
           e: undefined,
@@ -1434,37 +1938,37 @@ function QuizBatchDialog(props) {
           l: undefined,
           u: undefined
         });
-        return _el$90;
+        return _el$87;
       }
     }), null);
-    _$insert(_el$87, _$createComponent(Show, {
+    _$insert(_el$84, _$createComponent(Show, {
       get when() {
         return phase() === "classifying";
       },
       get children() {
-        var _el$115 = _$createElement("box"), _el$116 = _$createElement("text"), _el$118 = _$createElement("text"), _el$119 = _$createTextNode(`"`), _el$120 = _$createTextNode(`"`), _el$121 = _$createElement("text");
+        var _el$112 = _$createElement("box"), _el$113 = _$createElement("text"), _el$115 = _$createElement("text"), _el$116 = _$createTextNode(`"`), _el$117 = _$createTextNode(`"`), _el$118 = _$createElement("text");
+        _$insertNode(_el$112, _el$113);
+        _$insertNode(_el$112, _el$115);
+        _$insertNode(_el$112, _el$118);
+        _$setProp(_el$112, "flexDirection", "column");
+        _$setProp(_el$112, "gap", 1);
+        _$setProp(_el$112, "padding", 1);
+        _$setProp(_el$112, "border", true);
+        _$setProp(_el$112, "alignItems", "center");
+        _$insertNode(_el$113, _$createTextNode(`\u25D0 Classifying your note...`));
+        _$setProp(_el$113, "bold", true);
         _$insertNode(_el$115, _el$116);
-        _$insertNode(_el$115, _el$118);
-        _$insertNode(_el$115, _el$121);
-        _$setProp(_el$115, "flexDirection", "column");
-        _$setProp(_el$115, "gap", 1);
-        _$setProp(_el$115, "padding", 1);
-        _$setProp(_el$115, "border", true);
-        _$setProp(_el$115, "alignItems", "center");
-        _$insertNode(_el$116, _$createTextNode(`\u25D0 Classifying your note...`));
-        _$setProp(_el$116, "bold", true);
-        _$insertNode(_el$118, _el$119);
-        _$insertNode(_el$118, _el$120);
-        _$setProp(_el$118, "wrapMode", "wrap");
-        _$insert(_el$118, note, _el$120);
-        _$insertNode(_el$121, _$createTextNode(`Mapping to options \u2014 please wait`));
+        _$insertNode(_el$115, _el$117);
+        _$setProp(_el$115, "wrapMode", "wrap");
+        _$insert(_el$115, note, _el$117);
+        _$insertNode(_el$118, _$createTextNode(`Mapping to options \u2014 please wait`));
         _$effect((_p$) => {
-          var _v$58 = theme().accent, _v$59 = theme().background, _v$60 = theme().accent, _v$61 = theme().textMuted, _v$62 = theme().textMuted;
-          _v$58 !== _p$.e && (_p$.e = _$setProp(_el$115, "borderColor", _v$58, _p$.e));
-          _v$59 !== _p$.t && (_p$.t = _$setProp(_el$115, "backgroundColor", _v$59, _p$.t));
-          _v$60 !== _p$.a && (_p$.a = _$setProp(_el$116, "fg", _v$60, _p$.a));
-          _v$61 !== _p$.o && (_p$.o = _$setProp(_el$118, "fg", _v$61, _p$.o));
-          _v$62 !== _p$.i && (_p$.i = _$setProp(_el$121, "fg", _v$62, _p$.i));
+          var _v$74 = theme().accent, _v$75 = theme().background, _v$76 = theme().accent, _v$77 = theme().textMuted, _v$78 = theme().textMuted;
+          _v$74 !== _p$.e && (_p$.e = _$setProp(_el$112, "borderColor", _v$74, _p$.e));
+          _v$75 !== _p$.t && (_p$.t = _$setProp(_el$112, "backgroundColor", _v$75, _p$.t));
+          _v$76 !== _p$.a && (_p$.a = _$setProp(_el$113, "fg", _v$76, _p$.a));
+          _v$77 !== _p$.o && (_p$.o = _$setProp(_el$115, "fg", _v$77, _p$.o));
+          _v$78 !== _p$.i && (_p$.i = _$setProp(_el$118, "fg", _v$78, _p$.i));
           return _p$;
         }, {
           e: undefined,
@@ -1473,23 +1977,23 @@ function QuizBatchDialog(props) {
           o: undefined,
           i: undefined
         });
-        return _el$115;
+        return _el$112;
       }
     }), null);
-    _$insert(_el$87, _$createComponent(Show, {
+    _$insert(_el$84, _$createComponent(Show, {
       get when() {
         return phase() === "feedback";
       },
       get children() {
-        var _el$123 = _$createElement("box"), _el$124 = _$createElement("text"), _el$125 = _$createElement("text"), _el$126 = _$createTextNode(`Correct: `), _el$127 = _$createElement("box"), _el$128 = _$createElement("text");
-        _$insertNode(_el$123, _el$124);
-        _$insertNode(_el$123, _el$125);
-        _$insertNode(_el$123, _el$127);
-        _$setProp(_el$123, "flexDirection", "column");
-        _$setProp(_el$123, "gap", 1);
-        _$setProp(_el$123, "padding", 1);
-        _$setProp(_el$123, "border", true);
-        _$insert(_el$123, _$createComponent(For, {
+        var _el$120 = _$createElement("box"), _el$121 = _$createElement("text"), _el$122 = _$createElement("text"), _el$123 = _$createTextNode(`Correct: `), _el$124 = _$createElement("box"), _el$125 = _$createElement("markdown");
+        _$insertNode(_el$120, _el$121);
+        _$insertNode(_el$120, _el$122);
+        _$insertNode(_el$120, _el$124);
+        _$setProp(_el$120, "flexDirection", "column");
+        _$setProp(_el$120, "gap", 1);
+        _$setProp(_el$120, "padding", 1);
+        _$setProp(_el$120, "border", true);
+        _$insert(_el$120, _$createComponent(For, {
           get each() {
             return cur().options;
           },
@@ -1518,47 +2022,48 @@ function QuizBatchDialog(props) {
               bg = theme().warning;
             }
             return (() => {
-              var _el$140 = _$createElement("box"), _el$141 = _$createElement("box"), _el$142 = _$createElement("text"), _el$143 = _$createElement("box"), _el$144 = _$createElement("text"), _el$145 = _$createTextNode(`. `);
+              var _el$137 = _$createElement("box"), _el$138 = _$createElement("box"), _el$139 = _$createElement("text"), _el$140 = _$createElement("box"), _el$141 = _$createElement("text"), _el$142 = _$createTextNode(`. `);
+              _$insertNode(_el$137, _el$138);
+              _$insertNode(_el$137, _el$140);
+              _$setProp(_el$137, "flexDirection", "row");
+              _$setProp(_el$137, "gap", 1);
+              _$setProp(_el$137, "paddingLeft", 1);
+              _$setProp(_el$137, "backgroundColor", bg);
+              _$insertNode(_el$138, _el$139);
+              _$setProp(_el$138, "width", 2);
+              _$setProp(_el$139, "fg", fg);
+              _$setProp(_el$139, "bold", true);
+              _$insert(_el$139, ic);
               _$insertNode(_el$140, _el$141);
-              _$insertNode(_el$140, _el$143);
-              _$setProp(_el$140, "flexDirection", "row");
-              _$setProp(_el$140, "gap", 1);
-              _$setProp(_el$140, "paddingLeft", 1);
-              _$setProp(_el$140, "backgroundColor", bg);
+              _$setProp(_el$140, "flexGrow", 1);
               _$insertNode(_el$141, _el$142);
-              _$setProp(_el$141, "width", 2);
-              _$setProp(_el$142, "fg", fg);
-              _$setProp(_el$142, "bold", true);
-              _$insert(_el$142, ic);
-              _$insertNode(_el$143, _el$144);
-              _$setProp(_el$143, "flexGrow", 1);
-              _$insertNode(_el$144, _el$145);
-              _$setProp(_el$144, "fg", fg);
-              _$setProp(_el$144, "wrapMode", "wrap");
-              _$insert(_el$144, id, _el$145);
-              _$insert(_el$144, () => opt.label, null);
-              return _el$140;
+              _$setProp(_el$141, "fg", fg);
+              _$setProp(_el$141, "wrapMode", "wrap");
+              _$insert(_el$141, id, _el$142);
+              _$insert(_el$141, () => opt.label, null);
+              return _el$137;
             })();
           }
-        }), _el$124);
-        _$setProp(_el$124, "bold", true);
-        _$insert(_el$124, () => feedback()?.correct ? "\u2713 Correct" : "\u2717 Incorrect");
-        _$insertNode(_el$125, _el$126);
-        _$insert(_el$125, () => cur().correctIndices.map((i) => `${i}. ${cur().options[i - 1]?.label}`).join(", "), null);
-        _$insertNode(_el$127, _el$128);
-        _$setProp(_el$127, "border", true);
-        _$setProp(_el$127, "padding", 1);
-        _$setProp(_el$128, "wrapMode", "wrap");
-        _$insert(_el$128, () => cur().explanation);
+        }), _el$121);
+        _$setProp(_el$121, "bold", true);
+        _$insert(_el$121, () => feedback()?.correct ? "\u2713 Correct" : "\u2717 Incorrect");
+        _$insertNode(_el$122, _el$123);
+        _$insert(_el$122, () => cur().correctIndices.map((i) => `${i}. ${cur().options[i - 1]?.label}`).join(", "), null);
+        _$insertNode(_el$124, _el$125);
+        _$setProp(_el$124, "border", true);
+        _$setProp(_el$124, "padding", 1);
         _$effect((_p$) => {
-          var _v$63 = feedback()?.correct ? theme().success : theme().error, _v$64 = theme().background, _v$65 = feedback()?.correct ? theme().success : theme().error, _v$66 = theme().textMuted, _v$67 = theme().borderSubtle, _v$68 = theme().backgroundPanel, _v$69 = theme().text;
-          _v$63 !== _p$.e && (_p$.e = _$setProp(_el$123, "borderColor", _v$63, _p$.e));
-          _v$64 !== _p$.t && (_p$.t = _$setProp(_el$123, "backgroundColor", _v$64, _p$.t));
-          _v$65 !== _p$.a && (_p$.a = _$setProp(_el$124, "fg", _v$65, _p$.a));
-          _v$66 !== _p$.o && (_p$.o = _$setProp(_el$125, "fg", _v$66, _p$.o));
-          _v$67 !== _p$.i && (_p$.i = _$setProp(_el$127, "borderColor", _v$67, _p$.i));
-          _v$68 !== _p$.n && (_p$.n = _$setProp(_el$127, "backgroundColor", _v$68, _p$.n));
-          _v$69 !== _p$.s && (_p$.s = _$setProp(_el$128, "fg", _v$69, _p$.s));
+          var _v$79 = feedback()?.correct ? theme().success : theme().error, _v$80 = theme().background, _v$81 = feedback()?.correct ? theme().success : theme().error, _v$82 = theme().textMuted, _v$83 = theme().borderSubtle, _v$84 = theme().backgroundPanel, _v$85 = syntax(), _v$86 = decodeQuizText(cur().explanation), _v$87 = theme().text, _v$88 = theme().backgroundPanel;
+          _v$79 !== _p$.e && (_p$.e = _$setProp(_el$120, "borderColor", _v$79, _p$.e));
+          _v$80 !== _p$.t && (_p$.t = _$setProp(_el$120, "backgroundColor", _v$80, _p$.t));
+          _v$81 !== _p$.a && (_p$.a = _$setProp(_el$121, "fg", _v$81, _p$.a));
+          _v$82 !== _p$.o && (_p$.o = _$setProp(_el$122, "fg", _v$82, _p$.o));
+          _v$83 !== _p$.i && (_p$.i = _$setProp(_el$124, "borderColor", _v$83, _p$.i));
+          _v$84 !== _p$.n && (_p$.n = _$setProp(_el$124, "backgroundColor", _v$84, _p$.n));
+          _v$85 !== _p$.s && (_p$.s = _$setProp(_el$125, "syntaxStyle", _v$85, _p$.s));
+          _v$86 !== _p$.h && (_p$.h = _$setProp(_el$125, "content", _v$86, _p$.h));
+          _v$87 !== _p$.r && (_p$.r = _$setProp(_el$125, "fg", _v$87, _p$.r));
+          _v$88 !== _p$.d && (_p$.d = _$setProp(_el$125, "bg", _v$88, _p$.d));
           return _p$;
         }, {
           e: undefined,
@@ -1567,29 +2072,43 @@ function QuizBatchDialog(props) {
           o: undefined,
           i: undefined,
           n: undefined,
-          s: undefined
+          s: undefined,
+          h: undefined,
+          r: undefined,
+          d: undefined
         });
-        return _el$123;
+        return _el$120;
       }
     }), null);
-    _$insertNode(_el$129, _el$130);
-    _$setProp(_el$129, "height", 1);
-    _$setProp(_el$129, "justifyContent", "center");
-    _$insert(_el$130, (() => {
-      var _c$6 = _$memo(() => phase() === "feedback");
-      return () => _c$6() ? `Enter \u2192 next (${idx() + 1}/${props.request.quizzes.length})` : phase() === "classifying" ? "Classifying your note..." : "Navigate options \xB7 Tab note \xB7 Esc cancel";
+    _$insertNode(_el$126, _el$127);
+    _$setProp(_el$126, "height", 1);
+    _$setProp(_el$126, "justifyContent", "center");
+    _$setProp(_el$127, "wrapMode", "wrap");
+    _$insert(_el$127, (() => {
+      var _c$7 = _$memo(() => phase() === "feedback");
+      return () => _c$7() ? _$memo(() => !!(canScrollUpBatch() && canScrollDownBatch()))() ? `\u25B2 more above \xB7 \u25BC more below \u2014 d/u to scroll \xB7 Enter \u2192 next (${idx() + 1}/${props.request.quizzes.length})` : _$memo(() => !!canScrollDownBatch())() ? `\u25BC more below \u2014 d to scroll \xB7 Enter \u2192 next (${idx() + 1}/${props.request.quizzes.length})` : _$memo(() => !!canScrollUpBatch())() ? `\u25B2 more above \u2014 u to scroll \xB7 Enter \u2192 next (${idx() + 1}/${props.request.quizzes.length})` : `Enter \u2192 next (${idx() + 1}/${props.request.quizzes.length})` : _$memo(() => phase() === "classifying")() ? "Classifying your note..." : _$memo(() => focused() === "note")() ? "Enter submit note \u2192 classify \xB7 Tab/Esc back" : canScrollUpBatch() || canScrollDownBatch() ? "j/k or \u2191\u2193 move \xB7 Space toggle \xB7 Tab note \xB7 Enter submit \xB7 Esc cancel \xB7 d/u scroll" : "j/k or \u2191\u2193 move \xB7 Space toggle \xB7 Tab note \xB7 Enter submit \xB7 Esc cancel";
     })());
     _$effect((_p$) => {
-      var _v$70 = popupWidth(), _v$71 = popupHeight(), _v$72 = phase() === "feedback" ? feedback()?.correct ? theme().success : theme().error : theme().accent, _v$73 = theme().backgroundPanel, _v$74 = theme().accent, _v$75 = theme().background, _v$76 = theme().background, _v$77 = theme().text, _v$78 = theme().textMuted;
-      _v$70 !== _p$.e && (_p$.e = _$setProp(_el$79, "width", _v$70, _p$.e));
-      _v$71 !== _p$.t && (_p$.t = _$setProp(_el$79, "height", _v$71, _p$.t));
-      _v$72 !== _p$.a && (_p$.a = _$setProp(_el$79, "borderColor", _v$72, _p$.a));
-      _v$73 !== _p$.o && (_p$.o = _$setProp(_el$79, "backgroundColor", _v$73, _p$.o));
-      _v$74 !== _p$.i && (_p$.i = _$setProp(_el$80, "backgroundColor", _v$74, _p$.i));
-      _v$75 !== _p$.n && (_p$.n = _$setProp(_el$81, "fg", _v$75, _p$.n));
-      _v$76 !== _p$.s && (_p$.s = _$setProp(_el$85, "fg", _v$76, _p$.s));
-      _v$77 !== _p$.h && (_p$.h = _$setProp(_el$88, "fg", _v$77, _p$.h));
-      _v$78 !== _p$.r && (_p$.r = _$setProp(_el$130, "fg", _v$78, _p$.r));
+      var _v$89 = popupWidth(), _v$90 = popupHeight(), _v$91 = phase() === "feedback" ? feedback()?.correct ? theme().success : theme().error : theme().accent, _v$92 = theme().backgroundPanel, _v$93 = theme().accent, _v$94 = theme().background, _v$95 = theme().background, _v$96 = {
+        visible: true,
+        trackOptions: {
+          backgroundColor: theme().background,
+          foregroundColor: theme().borderActive
+        }
+      }, _v$97 = syntax(), _v$98 = decodeQuizText(cur().question), _v$99 = theme().text, _v$100 = theme().backgroundPanel, _v$101 = theme().textMuted;
+      _v$89 !== _p$.e && (_p$.e = _$setProp(_el$76, "width", _v$89, _p$.e));
+      _v$90 !== _p$.t && (_p$.t = _$setProp(_el$76, "height", _v$90, _p$.t));
+      _v$91 !== _p$.a && (_p$.a = _$setProp(_el$76, "borderColor", _v$91, _p$.a));
+      _v$92 !== _p$.o && (_p$.o = _$setProp(_el$76, "backgroundColor", _v$92, _p$.o));
+      _v$93 !== _p$.i && (_p$.i = _$setProp(_el$77, "backgroundColor", _v$93, _p$.i));
+      _v$94 !== _p$.n && (_p$.n = _$setProp(_el$78, "fg", _v$94, _p$.n));
+      _v$95 !== _p$.s && (_p$.s = _$setProp(_el$82, "fg", _v$95, _p$.s));
+      _v$96 !== _p$.h && (_p$.h = _$setProp(_el$84, "verticalScrollbarOptions", _v$96, _p$.h));
+      _v$97 !== _p$.r && (_p$.r = _$setProp(_el$85, "syntaxStyle", _v$97, _p$.r));
+      _v$98 !== _p$.d && (_p$.d = _$setProp(_el$85, "content", _v$98, _p$.d));
+      _v$99 !== _p$.l && (_p$.l = _$setProp(_el$85, "fg", _v$99, _p$.l));
+      _v$100 !== _p$.u && (_p$.u = _$setProp(_el$85, "bg", _v$100, _p$.u));
+      _v$101 !== _p$.c && (_p$.c = _$setProp(_el$127, "fg", _v$101, _p$.c));
       return _p$;
     }, {
       e: undefined,
@@ -1600,9 +2119,13 @@ function QuizBatchDialog(props) {
       n: undefined,
       s: undefined,
       h: undefined,
-      r: undefined
+      r: undefined,
+      d: undefined,
+      l: undefined,
+      u: undefined,
+      c: undefined
     });
-    return _el$79;
+    return _el$76;
   })();
 }
 var tui = async (api) => {