@bojackduy/opencode-learn 0.1.6 → 1.1.0

package/dist/tui.js

@@ -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,9 +257,16 @@ 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));
+  const popupWidth = () => {
+    const w = dims().width;
+    return Math.max(62, Math.min(w - 8, Math.floor(w * 0.8), 92));
+  };
+  const popupHeight = () => {
+    const h = dims().height;
+    return Math.max(14, Math.min(h - 6, Math.floor(h * 0.62), 26));
+  };
   const options = () => props.request.options;
   const correctSet = new Set(props.request.correctIndices);
   const isMulti = () => !!props.request.multiSelect;
@@ -54,6 +280,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 +321,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 +511,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 +606,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 +722,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$8 = _$createElement("scrollbox"), _el$9 = _$createElement("box"), _el$0 = _$createElement("markdown"), _el$61 = _$createElement("box"), _el$62 = _$createElement("text");
     _$insertNode(_el$, _el$2);
-    _$insertNode(_el$, _el$6);
-    _$insertNode(_el$, _el$62);
+    _$insertNode(_el$, _el$8);
+    _$insertNode(_el$, _el$61);
     _$setProp(_el$, "flexDirection", "column");
     _$setProp(_el$, "border", true);
     _$setProp(_el$, "padding", 1);
@@ -371,43 +745,79 @@ function QuizDialog(props) {
     })());
     _$insertNode(_el$4, _$createTextNode(`learn`));
     _$setProp(_el$4, "dim", true);
-    _$insertNode(_el$6, _el$7);
-    _$setProp(_el$6, "flexGrow", 1);
-    _$insertNode(_el$7, _el$8);
-    _$setProp(_el$7, "flexDirection", "column");
-    _$setProp(_el$7, "gap", 1);
-    _$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, {
+    _$insert(_el$, _$createComponent(Show, {
+      get when() {
+        return _$memo(() => phase() === "feedback")() && (canScrollUp() || canScrollDown());
+      },
+      get children() {
+        var _el$6 = _$createElement("box"), _el$7 = _$createElement("text");
+        _$insertNode(_el$6, _el$7);
+        _$setProp(_el$6, "justifyContent", "center");
+        _$setProp(_el$6, "height", 1);
+        _$setProp(_el$6, "paddingLeft", 1);
+        _$setProp(_el$6, "paddingRight", 1);
+        _$setProp(_el$7, "bold", true);
+        _$insert(_el$7, (() => {
+          var _c$2 = _$memo(() => !!(canScrollUp() && canScrollDown()));
+          return () => _c$2() ? "\u25B2 more above \xB7 \u25BC more below \u2014 d / u to scroll" : canScrollDown() ? "\u25BC more below \u2014 press d to see explanation" : "\u25B2 more above \u2014 press u to scroll up";
+        })());
+        _$effect((_p$) => {
+          var _v$ = canScrollDown() ? theme().warning : theme().accent, _v$2 = theme().background;
+          _v$ !== _p$.e && (_p$.e = _$setProp(_el$6, "backgroundColor", _v$, _p$.e));
+          _v$2 !== _p$.t && (_p$.t = _$setProp(_el$7, "fg", _v$2, _p$.t));
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined
+        });
+        return _el$6;
+      }
+    }), _el$8);
+    _$insertNode(_el$8, _el$9);
+    _$use((el) => scrollRef = el, _el$8);
+    _$setProp(_el$8, "flexGrow", 1);
+    _$insertNode(_el$9, _el$0);
+    _$setProp(_el$9, "flexDirection", "column");
+    _$setProp(_el$9, "gap", 1);
+    _$setProp(_el$9, "paddingLeft", 1);
+    _$setProp(_el$9, "paddingRight", 1);
+    _$setProp(_el$9, "paddingTop", 1);
+    _$insert(_el$9, _$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));
-        return _el$9;
+        var _el$1 = _$createElement("markdown");
+        _$effect((_p$) => {
+          var _v$3 = syntax(), _v$4 = decodeQuizText(props.request.details), _v$5 = theme().textMuted, _v$6 = theme().backgroundPanel;
+          _v$3 !== _p$.e && (_p$.e = _$setProp(_el$1, "syntaxStyle", _v$3, _p$.e));
+          _v$4 !== _p$.t && (_p$.t = _$setProp(_el$1, "content", _v$4, _p$.t));
+          _v$5 !== _p$.a && (_p$.a = _$setProp(_el$1, "fg", _v$5, _p$.a));
+          _v$6 !== _p$.o && (_p$.o = _$setProp(_el$1, "bg", _v$6, _p$.o));
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined,
+          a: undefined,
+          o: undefined
+        });
+        return _el$1;
       }
     }), null);
-    _$insert(_el$6, _$createComponent(Show, {
+    _$insert(_el$8, _$createComponent(Show, {
       get when() {
         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");
-        _$insertNode(_el$0, _el$11);
-        _$insertNode(_el$0, _el$19);
-        _$insertNode(_el$0, _el$27);
-        _$setProp(_el$0, "flexDirection", "column");
-        _$setProp(_el$0, "gap", 0);
-        _$setProp(_el$0, "padding", 1);
-        _$setProp(_el$0, "border", true);
-        _$insert(_el$0, _$createComponent(For, {
+        var _el$10 = _$createElement("box"), _el$13 = _$createElement("box"), _el$14 = _$createElement("box"), _el$15 = _$createElement("text"), _el$16 = _$createElement("box"), _el$17 = _$createElement("text"), _el$18 = _$createElement("box"), _el$19 = _$createElement("text"), _el$21 = _$createElement("box"), _el$22 = _$createElement("box"), _el$23 = _$createElement("text"), _el$27 = _$createElement("box"), _el$29 = _$createElement("box"), _el$30 = _$createElement("text"), _el$31 = _$createElement("text");
+        _$insertNode(_el$10, _el$13);
+        _$insertNode(_el$10, _el$21);
+        _$insertNode(_el$10, _el$29);
+        _$setProp(_el$10, "flexDirection", "column");
+        _$setProp(_el$10, "gap", 0);
+        _$setProp(_el$10, "padding", 1);
+        _$setProp(_el$10, "border", true);
+        _$insert(_el$10, _$createComponent(For, {
           get each() {
             return options();
           },
@@ -416,39 +826,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$63 = _$createElement("box"), _el$64 = _$createElement("box"), _el$65 = _$createElement("text"), _el$66 = _$createElement("box"), _el$67 = _$createElement("text"), _el$68 = _$createElement("box"), _el$69 = _$createElement("text"), _el$70 = _$createTextNode(`. `);
+              _$insertNode(_el$63, _el$64);
+              _$insertNode(_el$63, _el$66);
+              _$insertNode(_el$63, _el$68);
+              _$setProp(_el$63, "flexDirection", "row");
+              _$setProp(_el$63, "alignItems", "flexStart");
+              _$setProp(_el$63, "gap", 1);
+              _$setProp(_el$63, "paddingLeft", 1);
+              _$setProp(_el$63, "paddingRight", 1);
               _$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, (() => {
-                var _c$4 = _$memo(() => !!isMulti());
-                return () => _c$4() ? isSelected() ? "\u2611" : "\u2610" : isSelected() ? "\u2B22" : "\u25CB";
+              _$setProp(_el$64, "width", 2);
+              _$setProp(_el$64, "alignItems", "center");
+              _$insert(_el$65, () => isFocused() ? "\u25B8" : " ");
+              _$insertNode(_el$66, _el$67);
+              _$setProp(_el$66, "width", 2);
+              _$setProp(_el$66, "alignItems", "center");
+              _$insert(_el$67, (() => {
+                var _c$5 = _$memo(() => !!isMulti());
+                return () => _c$5() ? isSelected() ? "\u2611" : "\u2610" : isSelected() ? "\u2B22" : "\u25CB";
               })());
+              _$insertNode(_el$68, _el$69);
+              _$setProp(_el$68, "flexGrow", 1);
               _$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);
+              _$setProp(_el$69, "wrapMode", "wrap");
+              _$insert(_el$69, idx + 1, _el$70);
+              _$insert(_el$69, () => 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$52 = isFocused() ? theme().backgroundElement : undefined, _v$53 = isFocused() ? theme().accent : theme().textMuted, _v$54 = isMulti() ? isSelected() ? theme().success : theme().textMuted : isSelected() ? theme().accent : theme().textMuted, _v$55 = isSelected() ? theme().text : theme().textMuted, _v$56 = isFocused();
+                _v$52 !== _p$.e && (_p$.e = _$setProp(_el$63, "backgroundColor", _v$52, _p$.e));
+                _v$53 !== _p$.t && (_p$.t = _$setProp(_el$65, "fg", _v$53, _p$.t));
+                _v$54 !== _p$.a && (_p$.a = _$setProp(_el$67, "fg", _v$54, _p$.a));
+                _v$55 !== _p$.o && (_p$.o = _$setProp(_el$69, "fg", _v$55, _p$.o));
+                _v$56 !== _p$.i && (_p$.i = _$setProp(_el$69, "bold", _v$56, _p$.i));
                 return _p$;
               }, {
                 e: undefined,
@@ -457,155 +867,133 @@ function QuizDialog(props) {
                 o: undefined,
                 i: undefined
               });
-              return _el$64;
+              return _el$63;
             })();
           }
-        }), _el$11);
-        _$insert(_el$0, _$createComponent(Show, {
+        }), _el$13);
+        _$insert(_el$10, _$createComponent(Show, {
           get when() {
             return options().length > 0;
           },
           get children() {
-            var _el$1 = _$createElement("box"), _el$10 = _$createElement("text");
-            _$insertNode(_el$1, _el$10);
-            _$setProp(_el$1, "height", 1);
-            _$insert(_el$10, () => "\u2500".repeat(Math.max(20, popupWidth() - 8)));
-            _$effect((_$p) => _$setProp(_el$10, "fg", theme().borderSubtle, _$p));
-            return _el$1;
+            var _el$11 = _$createElement("box"), _el$12 = _$createElement("text");
+            _$insertNode(_el$11, _el$12);
+            _$setProp(_el$11, "height", 1);
+            _$insert(_el$12, () => "\u2500".repeat(Math.max(20, popupWidth() - 8)));
+            _$effect((_$p) => _$setProp(_el$12, "fg", theme().borderSubtle, _$p));
+            return _el$11;
           }
-        }), _el$11);
-        _$insertNode(_el$11, _el$12);
-        _$insertNode(_el$11, _el$14);
-        _$insertNode(_el$11, _el$16);
-        _$setProp(_el$11, "flexDirection", "row");
-        _$setProp(_el$11, "alignItems", "flexStart");
-        _$setProp(_el$11, "gap", 1);
-        _$setProp(_el$11, "paddingLeft", 1);
-        _$setProp(_el$11, "paddingRight", 1);
-        _$insertNode(_el$12, _el$13);
-        _$setProp(_el$12, "width", 2);
-        _$setProp(_el$12, "alignItems", "center");
-        _$insert(_el$13, () => focused() === "options" && optionIndex() === dontKnowIdx() ? "\u25B8" : " ");
+        }), _el$13);
+        _$insertNode(_el$13, _el$14);
+        _$insertNode(_el$13, _el$16);
+        _$insertNode(_el$13, _el$18);
+        _$setProp(_el$13, "flexDirection", "row");
+        _$setProp(_el$13, "alignItems", "flexStart");
+        _$setProp(_el$13, "gap", 1);
+        _$setProp(_el$13, "paddingLeft", 1);
+        _$setProp(_el$13, "paddingRight", 1);
         _$insertNode(_el$14, _el$15);
         _$setProp(_el$14, "width", 2);
         _$setProp(_el$14, "alignItems", "center");
-        _$insert(_el$15, () => dontKnow() ? "\u2611" : "\u2610");
+        _$insert(_el$15, () => focused() === "options" && optionIndex() === dontKnowIdx() ? "\u25B8" : " ");
         _$insertNode(_el$16, _el$17);
-        _$setProp(_el$16, "flexGrow", 1);
-        _$insertNode(_el$17, _$createTextNode(`I don't know \u2014 genuine gap, not a guess`));
-        _$setProp(_el$17, "italic", true);
-        _$setProp(_el$17, "wrapMode", "wrap");
-        _$insertNode(_el$19, _el$20);
-        _$insertNode(_el$19, _el$25);
-        _$setProp(_el$19, "flexDirection", "column");
-        _$setProp(_el$19, "gap", 0);
-        _$setProp(_el$19, "paddingTop", 1);
-        _$insertNode(_el$20, _el$21);
-        _$setProp(_el$20, "flexDirection", "row");
-        _$setProp(_el$20, "alignItems", "center");
-        _$setProp(_el$20, "gap", 1);
-        _$insertNode(_el$21, _$createTextNode(`\u270E Note (optional)`));
-        _$insert(_el$20, _$createComponent(Show, {
+        _$setProp(_el$16, "width", 2);
+        _$setProp(_el$16, "alignItems", "center");
+        _$insert(_el$17, () => dontKnow() ? "\u2611" : "\u2610");
+        _$insertNode(_el$18, _el$19);
+        _$setProp(_el$18, "flexGrow", 1);
+        _$insertNode(_el$19, _$createTextNode(`I don't know \u2014 genuine gap, not a guess`));
+        _$setProp(_el$19, "italic", true);
+        _$setProp(_el$19, "wrapMode", "wrap");
+        _$insertNode(_el$21, _el$22);
+        _$insertNode(_el$21, _el$27);
+        _$setProp(_el$21, "flexDirection", "column");
+        _$setProp(_el$21, "gap", 0);
+        _$setProp(_el$21, "paddingTop", 1);
+        _$insertNode(_el$22, _el$23);
+        _$setProp(_el$22, "flexDirection", "row");
+        _$setProp(_el$22, "alignItems", "center");
+        _$setProp(_el$22, "gap", 1);
+        _$insertNode(_el$23, _$createTextNode(`\u270E Note (optional)`));
+        _$insert(_el$22, _$createComponent(Show, {
           get when() {
             return focused() === "note";
           },
           get children() {
-            var _el$23 = _$createElement("text");
-            _$insertNode(_el$23, _$createTextNode(`\u25CF editing`));
-            _$effect((_$p) => _$setProp(_el$23, "fg", theme().accent, _$p));
-            return _el$23;
+            var _el$25 = _$createElement("text");
+            _$insertNode(_el$25, _$createTextNode(`\u25CF editing`));
+            _$effect((_$p) => _$setProp(_el$25, "fg", theme().accent, _$p));
+            return _el$25;
           }
         }), null);
-        _$setProp(_el$25, "border", true);
-        _$setProp(_el$25, "paddingLeft", 1);
-        _$setProp(_el$25, "paddingRight", 1);
-        _$insert(_el$25, _$createComponent(Show, {
+        _$setProp(_el$27, "border", true);
+        _$setProp(_el$27, "paddingLeft", 1);
+        _$setProp(_el$27, "paddingRight", 1);
+        _$insert(_el$27, _$createComponent(Show, {
           get when() {
             return focused() === "note";
           },
           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$71 = _$createElement("text");
+              _$setProp(_el$71, "wrapMode", "wrap");
+              _$insert(_el$71, () => note() || "Tab to edit \xB7 share what you were thinking");
+              _$effect((_$p) => _$setProp(_el$71, "fg", note() ? theme().text : theme().textMuted, _$p));
+              return _el$71;
             })();
           },
           get children() {
-            var _el$26 = _$createElement("input");
-            _$use((el) => noteInputEl = el, _el$26);
-            _$setProp(_el$26, "onInput", (value) => setNote(typeof value === "string" ? value : value?.target?.value ?? value?.value ?? String(value ?? "")));
-            _$setProp(_el$26, "onSubmit", () => {
+            var _el$28 = _$createElement("input");
+            _$use((el) => noteInputEl = el, _el$28);
+            _$setProp(_el$28, "onInput", (value) => setNote(typeof value === "string" ? value : value?.target?.value ?? value?.value ?? String(value ?? "")));
+            _$setProp(_el$28, "onSubmit", () => {
               if (!selected().size && !dontKnow() && note().trim())
                 submitSelect();
               else
                 setFocused("options");
             });
-            _$setProp(_el$26, "placeholder", "what was on your mind? (Enter to submit note \u2192 classify)");
-            _$effect((_$p) => _$setProp(_el$26, "value", note(), _$p));
-            return _el$26;
+            _$setProp(_el$28, "placeholder", "what was on your mind? (Enter to submit note \u2192 classify)");
+            _$effect((_$p) => _$setProp(_el$28, "value", note(), _$p));
+            return _el$28;
           }
         }));
-        _$insertNode(_el$27, _el$28);
-        _$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, {
+        _$insertNode(_el$29, _el$30);
+        _$insertNode(_el$29, _el$31);
+        _$setProp(_el$29, "flexDirection", "row");
+        _$setProp(_el$29, "justifyContent", "space-between");
+        _$setProp(_el$29, "paddingTop", 1);
+        _$insert(_el$30, (() => {
+          var _c$3 = _$memo(() => !!isMulti());
+          return () => _c$3() ? `${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$31, () => focused() === "note" ? "Tab/Esc back" : "");
+        _$insert(_el$10, _$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$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$32 = _$createElement("box"), _el$33 = _$createElement("box"), _el$34 = _$createElement("text"), _el$35 = _$createElement("text"), _el$36 = _$createTextNode(`\u21B3 Submit`);
+            _$insertNode(_el$32, _el$33);
+            _$setProp(_el$32, "justifyContent", "center");
+            _$setProp(_el$32, "paddingTop", 1);
             _$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);
+            _$insertNode(_el$33, _el$35);
+            _$setProp(_el$33, "flexDirection", "row");
+            _$setProp(_el$33, "alignItems", "center");
+            _$setProp(_el$33, "gap", 1);
+            _$setProp(_el$33, "border", true);
+            _$setProp(_el$33, "paddingLeft", 2);
+            _$setProp(_el$33, "paddingRight", 2);
+            _$insert(_el$34, () => focused() === "options" && optionIndex() === submitIdx() ? "\u25B8" : " ");
+            _$insertNode(_el$35, _el$36);
+            _$setProp(_el$35, "bold", true);
+            _$insert(_el$35, () => 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$7 = focused() === "options" && optionIndex() === submitIdx() ? theme().accent : selected().size > 0 || dontKnow() || note().trim() ? theme().success : theme().borderSubtle, _v$8 = focused() === "options" && optionIndex() === submitIdx() ? theme().backgroundElement : selected().size > 0 || dontKnow() || note().trim() ? theme().success : theme().background, _v$9 = focused() === "options" && optionIndex() === submitIdx() ? theme().accent : selected().size > 0 || dontKnow() || note().trim() ? theme().background : theme().textMuted, _v$0 = focused() === "options" && optionIndex() === submitIdx() ? theme().accent : selected().size > 0 || dontKnow() || note().trim() ? theme().background : theme().textMuted;
+              _v$7 !== _p$.e && (_p$.e = _$setProp(_el$33, "borderColor", _v$7, _p$.e));
+              _v$8 !== _p$.t && (_p$.t = _$setProp(_el$33, "backgroundColor", _v$8, _p$.t));
+              _v$9 !== _p$.a && (_p$.a = _$setProp(_el$34, "fg", _v$9, _p$.a));
+              _v$0 !== _p$.o && (_p$.o = _$setProp(_el$35, "fg", _v$0, _p$.o));
               return _p$;
             }, {
               e: undefined,
@@ -613,54 +1001,55 @@ function QuizDialog(props) {
               a: undefined,
               o: undefined
             });
-            return _el$33;
+            return _el$32;
           }
         }), null);
-        _$insert(_el$0, _$createComponent(Show, {
+        _$insert(_el$10, _$createComponent(Show, {
           get when() {
             return _$memo(() => !!(!isMulti() && note().trim() && !selected().size))() && !dontKnow();
           },
           get children() {
-            var _el$38 = _$createElement("box"), _el$39 = _$createElement("box"), _el$40 = _$createElement("text");
+            var _el$37 = _$createElement("box"), _el$38 = _$createElement("box"), _el$39 = _$createElement("text");
+            _$insertNode(_el$37, _el$38);
+            _$setProp(_el$37, "justifyContent", "center");
+            _$setProp(_el$37, "paddingTop", 1);
             _$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);
+            _$setProp(_el$38, "flexDirection", "row");
+            _$setProp(_el$38, "alignItems", "center");
+            _$setProp(_el$38, "gap", 1);
+            _$setProp(_el$38, "border", true);
+            _$setProp(_el$38, "paddingLeft", 2);
+            _$setProp(_el$38, "paddingRight", 2);
+            _$insertNode(_el$39, _$createTextNode(`\u21B3 Submit note \u2192 classify`));
+            _$setProp(_el$39, "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$1 = focused() === "options" && optionIndex() === dontKnowIdx() + 1 ? theme().accent : theme().success, _v$10 = focused() === "options" && optionIndex() === dontKnowIdx() + 1 ? theme().backgroundElement : theme().success, _v$11 = focused() === "options" && optionIndex() === dontKnowIdx() + 1 ? theme().accent : theme().background;
+              _v$1 !== _p$.e && (_p$.e = _$setProp(_el$38, "borderColor", _v$1, _p$.e));
+              _v$10 !== _p$.t && (_p$.t = _$setProp(_el$38, "backgroundColor", _v$10, _p$.t));
+              _v$11 !== _p$.a && (_p$.a = _$setProp(_el$39, "fg", _v$11, _p$.a));
               return _p$;
             }, {
               e: undefined,
               t: undefined,
               a: undefined
             });
-            return _el$38;
+            return _el$37;
           }
         }), 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$12 = theme().borderSubtle, _v$13 = theme().background, _v$14 = focused() === "options" && optionIndex() === dontKnowIdx() ? theme().backgroundElement : undefined, _v$15 = focused() === "options" && optionIndex() === dontKnowIdx() ? theme().accent : theme().textMuted, _v$16 = dontKnow() ? theme().warning : theme().textMuted, _v$17 = dontKnow() ? theme().warning : theme().textMuted, _v$18 = focused() === "note" ? theme().accent : theme().textMuted, _v$19 = focused() === "note", _v$20 = focused() === "note" ? theme().accent : theme().borderSubtle, _v$21 = theme().backgroundElement, _v$22 = theme().textMuted, _v$23 = theme().textMuted;
+          _v$12 !== _p$.e && (_p$.e = _$setProp(_el$10, "borderColor", _v$12, _p$.e));
+          _v$13 !== _p$.t && (_p$.t = _$setProp(_el$10, "backgroundColor", _v$13, _p$.t));
+          _v$14 !== _p$.a && (_p$.a = _$setProp(_el$13, "backgroundColor", _v$14, _p$.a));
+          _v$15 !== _p$.o && (_p$.o = _$setProp(_el$15, "fg", _v$15, _p$.o));
+          _v$16 !== _p$.i && (_p$.i = _$setProp(_el$17, "fg", _v$16, _p$.i));
+          _v$17 !== _p$.n && (_p$.n = _$setProp(_el$19, "fg", _v$17, _p$.n));
+          _v$18 !== _p$.s && (_p$.s = _$setProp(_el$23, "fg", _v$18, _p$.s));
+          _v$19 !== _p$.h && (_p$.h = _$setProp(_el$23, "bold", _v$19, _p$.h));
+          _v$20 !== _p$.r && (_p$.r = _$setProp(_el$27, "borderColor", _v$20, _p$.r));
+          _v$21 !== _p$.d && (_p$.d = _$setProp(_el$27, "backgroundColor", _v$21, _p$.d));
+          _v$22 !== _p$.l && (_p$.l = _$setProp(_el$30, "fg", _v$22, _p$.l));
+          _v$23 !== _p$.u && (_p$.u = _$setProp(_el$31, "fg", _v$23, _p$.u));
           return _p$;
         }, {
           e: undefined,
@@ -673,39 +1062,40 @@ function QuizDialog(props) {
           h: undefined,
           r: undefined,
           d: undefined,
-          l: undefined
+          l: undefined,
+          u: undefined
         });
-        return _el$0;
+        return _el$10;
       }
     }), null);
-    _$insert(_el$6, _$createComponent(Show, {
+    _$insert(_el$8, _$createComponent(Show, {
       get when() {
         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");
-        _$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`));
+        var _el$41 = _$createElement("box"), _el$42 = _$createElement("text"), _el$44 = _$createElement("text"), _el$45 = _$createTextNode(`"`), _el$46 = _$createTextNode(`"`), _el$47 = _$createElement("text");
+        _$insertNode(_el$41, _el$42);
+        _$insertNode(_el$41, _el$44);
+        _$insertNode(_el$41, _el$47);
+        _$setProp(_el$41, "flexDirection", "column");
+        _$setProp(_el$41, "gap", 1);
+        _$setProp(_el$41, "padding", 1);
+        _$setProp(_el$41, "border", true);
+        _$setProp(_el$41, "alignItems", "center");
+        _$insertNode(_el$42, _$createTextNode(`\u25D0 Classifying your note...`));
+        _$setProp(_el$42, "bold", true);
+        _$insertNode(_el$44, _el$45);
+        _$insertNode(_el$44, _el$46);
+        _$setProp(_el$44, "wrapMode", "wrap");
+        _$insert(_el$44, note, _el$46);
+        _$insertNode(_el$47, _$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$24 = theme().accent, _v$25 = theme().background, _v$26 = theme().accent, _v$27 = theme().textMuted, _v$28 = theme().textMuted;
+          _v$24 !== _p$.e && (_p$.e = _$setProp(_el$41, "borderColor", _v$24, _p$.e));
+          _v$25 !== _p$.t && (_p$.t = _$setProp(_el$41, "backgroundColor", _v$25, _p$.t));
+          _v$26 !== _p$.a && (_p$.a = _$setProp(_el$42, "fg", _v$26, _p$.a));
+          _v$27 !== _p$.o && (_p$.o = _$setProp(_el$44, "fg", _v$27, _p$.o));
+          _v$28 !== _p$.i && (_p$.i = _$setProp(_el$47, "fg", _v$28, _p$.i));
           return _p$;
         }, {
           e: undefined,
@@ -714,23 +1104,23 @@ function QuizDialog(props) {
           o: undefined,
           i: undefined
         });
-        return _el$42;
+        return _el$41;
       }
     }), null);
-    _$insert(_el$6, _$createComponent(Show, {
+    _$insert(_el$8, _$createComponent(Show, {
       get when() {
         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$49 = _$createElement("box"), _el$50 = _$createElement("box"), _el$51 = _$createElement("text"), _el$55 = _$createElement("text"), _el$56 = _$createTextNode(`Correct: `), _el$59 = _$createElement("box"), _el$60 = _$createElement("markdown");
+        _$insertNode(_el$49, _el$50);
+        _$insertNode(_el$49, _el$55);
+        _$insertNode(_el$49, _el$59);
+        _$setProp(_el$49, "flexDirection", "column");
+        _$setProp(_el$49, "gap", 1);
+        _$setProp(_el$49, "padding", 1);
+        _$setProp(_el$49, "border", true);
+        _$insert(_el$49, _$createComponent(For, {
           get each() {
             return options();
           },
@@ -759,85 +1149,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$72 = _$createElement("box"), _el$73 = _$createElement("box"), _el$74 = _$createElement("text"), _el$75 = _$createElement("box"), _el$76 = _$createElement("text"), _el$77 = _$createTextNode(`. `);
+              _$insertNode(_el$72, _el$73);
+              _$insertNode(_el$72, _el$75);
+              _$setProp(_el$72, "flexDirection", "row");
+              _$setProp(_el$72, "alignItems", "flexStart");
+              _$setProp(_el$72, "gap", 1);
+              _$setProp(_el$72, "paddingLeft", 1);
+              _$setProp(_el$72, "backgroundColor", bg);
               _$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);
-              _$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);
+              _$setProp(_el$73, "width", 2);
+              _$setProp(_el$73, "alignItems", "center");
+              _$setProp(_el$74, "fg", fg);
+              _$setProp(_el$74, "bold", true);
+              _$insert(_el$74, icon);
+              _$insertNode(_el$75, _el$76);
+              _$setProp(_el$75, "flexGrow", 1);
               _$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$76, "fg", fg);
+              _$setProp(_el$76, "wrapMode", "wrap");
+              _$insert(_el$76, idx, _el$77);
+              _$insert(_el$76, () => opt.label, null);
+              return _el$72;
             })();
           }
-        }), _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$50);
+        _$insertNode(_el$50, _el$51);
+        _$setProp(_el$50, "height", 1);
+        _$insert(_el$51, () => "\u2500".repeat(Math.max(20, popupWidth() - 12)));
+        _$insert(_el$49, _$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$52 = _$createElement("text");
+            _$insertNode(_el$52, _$createTextNode(`\u25CF You said: I don't know \u2014 genuine gap`));
+            _$effect((_$p) => _$setProp(_el$52, "fg", theme().warning, _$p));
+            return _el$52;
           }
-        }), _el$56);
-        _$insert(_el$50, _$createComponent(Show, {
+        }), _el$55);
+        _$insert(_el$49, _$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$54 = _$createElement("text");
+            _$setProp(_el$54, "bold", true);
+            _$insert(_el$54, () => feedback()?.correct ? "\u2713 Correct!  Well located." : "\u2717 Incorrect \u2014 nice try, let's fix the edge.");
+            _$effect((_$p) => _$setProp(_el$54, "fg", feedback()?.correct ? theme().success : theme().error, _$p));
+            return _el$54;
           }
-        }), _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$55);
+        _$insertNode(_el$55, _el$56);
+        _$insert(_el$55, () => props.request.correctIndices.map((i) => `${i}. ${options()[i - 1]?.label}`).join(", "), null);
+        _$insert(_el$49, _$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$57 = _$createElement("text"), _el$58 = _$createTextNode(`Your note: `);
+            _$insertNode(_el$57, _el$58);
+            _$insert(_el$57, note, null);
+            _$effect((_$p) => _$setProp(_el$57, "fg", theme().textMuted, _$p));
+            return _el$57;
           }
-        }), _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$59);
+        _$insertNode(_el$59, _el$60);
+        _$setProp(_el$59, "border", true);
+        _$setProp(_el$59, "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$29 = feedback()?.correct ? theme().success : theme().error, _v$30 = theme().background, _v$31 = theme().borderSubtle, _v$32 = theme().textMuted, _v$33 = theme().borderSubtle, _v$34 = theme().backgroundPanel, _v$35 = syntax(), _v$36 = decodeQuizText(props.request.explanation), _v$37 = theme().text, _v$38 = theme().backgroundPanel;
+          _v$29 !== _p$.e && (_p$.e = _$setProp(_el$49, "borderColor", _v$29, _p$.e));
+          _v$30 !== _p$.t && (_p$.t = _$setProp(_el$49, "backgroundColor", _v$30, _p$.t));
+          _v$31 !== _p$.a && (_p$.a = _$setProp(_el$51, "fg", _v$31, _p$.a));
+          _v$32 !== _p$.o && (_p$.o = _$setProp(_el$55, "fg", _v$32, _p$.o));
+          _v$33 !== _p$.i && (_p$.i = _$setProp(_el$59, "borderColor", _v$33, _p$.i));
+          _v$34 !== _p$.n && (_p$.n = _$setProp(_el$59, "backgroundColor", _v$34, _p$.n));
+          _v$35 !== _p$.s && (_p$.s = _$setProp(_el$60, "syntaxStyle", _v$35, _p$.s));
+          _v$36 !== _p$.h && (_p$.h = _$setProp(_el$60, "content", _v$36, _p$.h));
+          _v$37 !== _p$.r && (_p$.r = _$setProp(_el$60, "fg", _v$37, _p$.r));
+          _v$38 !== _p$.d && (_p$.d = _$setProp(_el$60, "bg", _v$38, _p$.d));
           return _p$;
         }, {
           e: undefined,
@@ -846,29 +1237,103 @@ function QuizDialog(props) {
           o: undefined,
           i: undefined,
           n: undefined,
-          s: undefined
+          s: undefined,
+          h: undefined,
+          r: undefined,
+          d: undefined
         });
-        return _el$50;
+        return _el$49;
       }
     }), null);
-    _$insertNode(_el$62, _el$63);
-    _$setProp(_el$62, "height", 1);
-    _$setProp(_el$62, "justifyContent", "center");
-    _$insert(_el$63, (() => {
-      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";
+    _$insertNode(_el$61, _el$62);
+    _$setProp(_el$61, "height", 1);
+    _$setProp(_el$61, "justifyContent", "center");
+    _$setProp(_el$62, "wrapMode", "wrap");
+    _$insert(_el$62, (() => {
+      var _c$4 = _$memo(() => phase() === "feedback");
+      return () => _c$4() ? _$memo(() => !!(canScrollUp() && canScrollDown()))() ? [(() => {
+        var _el$78 = _$createElement("span");
+        _$insertNode(_el$78, _$createTextNode(`\u25B2 more above \xB7 \u25BC more below`));
+        _$effect((_$p) => _$setProp(_el$78, "style", {
+          fg: theme.warning,
+          bold: true
+        }, _$p));
+        return _el$78;
+      })(), (() => {
+        var _el$80 = _$createElement("span");
+        _$insertNode(_el$80, _$createTextNode(` \u2014 d/u to scroll \xB7 Enter to continue`));
+        _$effect((_$p) => _$setProp(_el$80, "style", {
+          fg: theme().textMuted
+        }, _$p));
+        return _el$80;
+      })()] : _$memo(() => !!canScrollDown())() ? [(() => {
+        var _el$82 = _$createElement("span");
+        _$insertNode(_el$82, _$createTextNode(`\u25BC more below`));
+        _$effect((_$p) => _$setProp(_el$82, "style", {
+          fg: theme.warning,
+          bold: true
+        }, _$p));
+        return _el$82;
+      })(), (() => {
+        var _el$84 = _$createElement("span");
+        _$insertNode(_el$84, _$createTextNode(` \u2014 d to scroll \xB7 Enter to continue`));
+        _$effect((_$p) => _$setProp(_el$84, "style", {
+          fg: theme().textMuted
+        }, _$p));
+        return _el$84;
+      })()] : _$memo(() => !!canScrollUp())() ? [(() => {
+        var _el$86 = _$createElement("span");
+        _$insertNode(_el$86, _$createTextNode(`\u25B2 more above`));
+        _$effect((_$p) => _$setProp(_el$86, "style", {
+          fg: theme.accent,
+          bold: true
+        }, _$p));
+        return _el$86;
+      })(), (() => {
+        var _el$88 = _$createElement("span");
+        _$insertNode(_el$88, _$createTextNode(` \u2014 u to scroll \xB7 Enter to continue`));
+        _$effect((_$p) => _$setProp(_el$88, "style", {
+          fg: theme().textMuted
+        }, _$p));
+        return _el$88;
+      })()] : "\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" : _$memo(() => !!(canScrollUp() || canScrollDown()))() ? [(() => {
+        var _el$90 = _$createElement("span");
+        _$insertNode(_el$90, _$createTextNode(`j/k or \u2191\u2193 move \xB7 Space toggle \xB7 Tab note \xB7 Enter submit \xB7 Esc cancel`));
+        _$effect((_$p) => _$setProp(_el$90, "style", {
+          fg: theme().textMuted
+        }, _$p));
+        return _el$90;
+      })(), (() => {
+        var _el$92 = _$createElement("span");
+        _$insertNode(_el$92, _$createTextNode(` \xB7 d/u scroll`));
+        _$effect((_$p) => _$setProp(_el$92, "style", {
+          fg: theme.warning,
+          bold: true
+        }, _$p));
+        return _el$92;
+      })()] : "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$39 = popupWidth(), _v$40 = popupHeight(), _v$41 = phase() === "feedback" ? feedback()?.correct ? theme().success : theme().error : theme().accent, _v$42 = theme().backgroundPanel, _v$43 = phase() === "feedback" ? feedback()?.correct ? theme().success : theme().error : theme().accent, _v$44 = theme().background, _v$45 = theme().background, _v$46 = {
+        visible: true,
+        trackOptions: {
+          backgroundColor: theme().background,
+          foregroundColor: theme().borderActive
+        }
+      }, _v$47 = syntax(), _v$48 = decodeQuizText(props.request.question), _v$49 = theme().text, _v$50 = theme().backgroundPanel, _v$51 = theme().textMuted;
+      _v$39 !== _p$.e && (_p$.e = _$setProp(_el$, "width", _v$39, _p$.e));
+      _v$40 !== _p$.t && (_p$.t = _$setProp(_el$, "height", _v$40, _p$.t));
+      _v$41 !== _p$.a && (_p$.a = _$setProp(_el$, "borderColor", _v$41, _p$.a));
+      _v$42 !== _p$.o && (_p$.o = _$setProp(_el$, "backgroundColor", _v$42, _p$.o));
+      _v$43 !== _p$.i && (_p$.i = _$setProp(_el$2, "backgroundColor", _v$43, _p$.i));
+      _v$44 !== _p$.n && (_p$.n = _$setProp(_el$3, "fg", _v$44, _p$.n));
+      _v$45 !== _p$.s && (_p$.s = _$setProp(_el$4, "fg", _v$45, _p$.s));
+      _v$46 !== _p$.h && (_p$.h = _$setProp(_el$8, "verticalScrollbarOptions", _v$46, _p$.h));
+      _v$47 !== _p$.r && (_p$.r = _$setProp(_el$0, "syntaxStyle", _v$47, _p$.r));
+      _v$48 !== _p$.d && (_p$.d = _$setProp(_el$0, "content", _v$48, _p$.d));
+      _v$49 !== _p$.l && (_p$.l = _$setProp(_el$0, "fg", _v$49, _p$.l));
+      _v$50 !== _p$.u && (_p$.u = _$setProp(_el$0, "bg", _v$50, _p$.u));
+      _v$51 !== _p$.c && (_p$.c = _$setProp(_el$62, "fg", _v$51, _p$.c));
       return _p$;
     }, {
       e: undefined,
@@ -879,16 +1344,27 @@ 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));
+  const popupWidth = () => {
+    const w = dims().width;
+    return Math.max(64, Math.min(w - 8, Math.floor(w * 0.82), 96));
+  };
+  const popupHeight = () => {
+    const h = dims().height;
+    return Math.max(14, Math.min(h - 6, Math.floor(h * 0.64), 28));
+  };
   const [idx, setIdx] = createSignal(0);
   if (!props.request.quizzes || props.request.quizzes.length === 0) {
     tlog("QuizBatchDialog empty quizzes, cancelling", props.request.id);
@@ -908,6 +1384,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 +1426,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 +1620,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 +1695,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 +1793,101 @@ 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 _c$5 = _$memo(() => phase() === "feedback");
-      return () => _c$5() ? feedback()?.correct ? "\u2713" : "\u2717" : "";
+    var _el$94 = _$createElement("box"), _el$95 = _$createElement("box"), _el$96 = _$createElement("text"), _el$97 = _$createTextNode(` decks.quiz batch `), _el$98 = _$createTextNode(`/`), _el$99 = _$createTextNode(` `), _el$100 = _$createElement("text"), _el$104 = _$createElement("scrollbox"), _el$105 = _$createElement("markdown"), _el$146 = _$createElement("box"), _el$147 = _$createElement("text");
+    _$insertNode(_el$94, _el$95);
+    _$insertNode(_el$94, _el$104);
+    _$insertNode(_el$94, _el$146);
+    _$setProp(_el$94, "flexDirection", "column");
+    _$setProp(_el$94, "border", true);
+    _$setProp(_el$94, "padding", 1);
+    _$setProp(_el$94, "gap", 1);
+    _$insertNode(_el$95, _el$96);
+    _$insertNode(_el$95, _el$100);
+    _$setProp(_el$95, "flexDirection", "row");
+    _$setProp(_el$95, "justifyContent", "space-between");
+    _$setProp(_el$95, "paddingLeft", 1);
+    _$setProp(_el$95, "paddingRight", 1);
+    _$setProp(_el$95, "height", 1);
+    _$insertNode(_el$96, _el$97);
+    _$insertNode(_el$96, _el$98);
+    _$insertNode(_el$96, _el$99);
+    _$setProp(_el$96, "bold", true);
+    _$insert(_el$96, () => idx() + 1, _el$98);
+    _$insert(_el$96, () => props.request.quizzes.length, _el$99);
+    _$insert(_el$96, (() => {
+      var _c$6 = _$memo(() => phase() === "feedback");
+      return () => _c$6() ? 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$100, _$createTextNode(`learn`));
+    _$setProp(_el$100, "dim", true);
+    _$insert(_el$94, _$createComponent(Show, {
+      get when() {
+        return _$memo(() => phase() === "feedback")() && (canScrollUpBatch() || canScrollDownBatch());
+      },
+      get children() {
+        var _el$102 = _$createElement("box"), _el$103 = _$createElement("text");
+        _$insertNode(_el$102, _el$103);
+        _$setProp(_el$102, "justifyContent", "center");
+        _$setProp(_el$102, "height", 1);
+        _$setProp(_el$102, "paddingLeft", 1);
+        _$setProp(_el$102, "paddingRight", 1);
+        _$setProp(_el$103, "bold", true);
+        _$insert(_el$103, (() => {
+          var _c$7 = _$memo(() => !!(canScrollUpBatch() && canScrollDownBatch()));
+          return () => _c$7() ? "\u25B2 more above \xB7 \u25BC more below \u2014 d / u to scroll" : canScrollDownBatch() ? "\u25BC more below \u2014 press d to see explanation" : "\u25B2 more above \u2014 press u to scroll up";
+        })());
+        _$effect((_p$) => {
+          var _v$57 = canScrollDownBatch() ? theme().warning : theme().accent, _v$58 = theme().background;
+          _v$57 !== _p$.e && (_p$.e = _$setProp(_el$102, "backgroundColor", _v$57, _p$.e));
+          _v$58 !== _p$.t && (_p$.t = _$setProp(_el$103, "fg", _v$58, _p$.t));
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined
+        });
+        return _el$102;
+      }
+    }), _el$104);
+    _$insertNode(_el$104, _el$105);
+    _$use((el) => scrollRefBatch = el, _el$104);
+    _$setProp(_el$104, "flexGrow", 1);
+    _$insert(_el$104, _$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$106 = _$createElement("markdown");
+        _$effect((_p$) => {
+          var _v$59 = syntax(), _v$60 = decodeQuizText(cur().details), _v$61 = theme().textMuted, _v$62 = theme().backgroundPanel;
+          _v$59 !== _p$.e && (_p$.e = _$setProp(_el$106, "syntaxStyle", _v$59, _p$.e));
+          _v$60 !== _p$.t && (_p$.t = _$setProp(_el$106, "content", _v$60, _p$.t));
+          _v$61 !== _p$.a && (_p$.a = _$setProp(_el$106, "fg", _v$61, _p$.a));
+          _v$62 !== _p$.o && (_p$.o = _$setProp(_el$106, "bg", _v$62, _p$.o));
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined,
+          a: undefined,
+          o: undefined
+        });
+        return _el$106;
       }
     }), null);
-    _$insert(_el$87, _$createComponent(Show, {
+    _$insert(_el$104, _$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$107 = _$createElement("box"), _el$108 = _$createElement("box"), _el$109 = _$createElement("text"), _el$110 = _$createElement("box"), _el$111 = _$createElement("box"), _el$112 = _$createElement("text"), _el$113 = _$createElement("box"), _el$114 = _$createElement("text"), _el$115 = _$createElement("box"), _el$116 = _$createElement("text"), _el$118 = _$createElement("box"), _el$119 = _$createElement("text"), _el$121 = _$createElement("box"), _el$123 = _$createElement("box"), _el$124 = _$createElement("text"), _el$125 = _$createElement("text"), _el$126 = _$createTextNode(`/`);
+        _$insertNode(_el$107, _el$108);
+        _$insertNode(_el$107, _el$110);
+        _$insertNode(_el$107, _el$118);
+        _$insertNode(_el$107, _el$123);
+        _$setProp(_el$107, "flexDirection", "column");
+        _$setProp(_el$107, "gap", 0);
+        _$setProp(_el$107, "padding", 1);
+        _$setProp(_el$107, "border", true);
+        _$insert(_el$107, _$createComponent(For, {
           get each() {
             return cur().options;
           },
@@ -1267,36 +1896,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(`. `);
-              _$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";
+              var _el$148 = _$createElement("box"), _el$149 = _$createElement("box"), _el$150 = _$createElement("text"), _el$151 = _$createElement("box"), _el$152 = _$createElement("text"), _el$153 = _$createElement("box"), _el$154 = _$createElement("text"), _el$155 = _$createTextNode(`. `);
+              _$insertNode(_el$148, _el$149);
+              _$insertNode(_el$148, _el$151);
+              _$insertNode(_el$148, _el$153);
+              _$setProp(_el$148, "flexDirection", "row");
+              _$setProp(_el$148, "alignItems", "flexStart");
+              _$setProp(_el$148, "gap", 1);
+              _$setProp(_el$148, "paddingLeft", 1);
+              _$insertNode(_el$149, _el$150);
+              _$setProp(_el$149, "width", 2);
+              _$insert(_el$150, () => foc() ? "\u25B8" : " ");
+              _$insertNode(_el$151, _el$152);
+              _$setProp(_el$151, "width", 2);
+              _$insert(_el$152, (() => {
+                var _c$0 = _$memo(() => !!isMulti());
+                return () => _c$0() ? 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$153, _el$154);
+              _$setProp(_el$153, "flexGrow", 1);
+              _$insertNode(_el$154, _el$155);
+              _$setProp(_el$154, "wrapMode", "wrap");
+              _$insert(_el$154, id + 1, _el$155);
+              _$insert(_el$154, () => 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$106 = foc() ? theme().backgroundElement : undefined, _v$107 = foc() ? theme().accent : theme().textMuted, _v$108 = isMulti() ? sel() ? theme().success : theme().textMuted : sel() ? theme().accent : theme().textMuted, _v$109 = sel() ? theme().text : theme().textMuted, _v$110 = foc();
+                _v$106 !== _p$.e && (_p$.e = _$setProp(_el$148, "backgroundColor", _v$106, _p$.e));
+                _v$107 !== _p$.t && (_p$.t = _$setProp(_el$150, "fg", _v$107, _p$.t));
+                _v$108 !== _p$.a && (_p$.a = _$setProp(_el$152, "fg", _v$108, _p$.a));
+                _v$109 !== _p$.o && (_p$.o = _$setProp(_el$154, "fg", _v$109, _p$.o));
+                _v$110 !== _p$.i && (_p$.i = _$setProp(_el$154, "bold", _v$110, _p$.i));
                 return _p$;
               }, {
                 e: undefined,
@@ -1305,120 +1934,123 @@ function QuizBatchDialog(props) {
                 o: undefined,
                 i: undefined
               });
-              return _el$131;
+              return _el$148;
             })();
           }
-        }), _el$91);
-        _$insertNode(_el$91, _el$92);
-        _$setProp(_el$91, "height", 1);
-        _$insert(_el$92, () => "\u2500".repeat(Math.max(20, popupWidth() - 8)));
-        _$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");
-        _$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, {
+        }), _el$108);
+        _$insertNode(_el$108, _el$109);
+        _$setProp(_el$108, "height", 1);
+        _$insert(_el$109, () => "\u2500".repeat(Math.max(20, popupWidth() - 8)));
+        _$insertNode(_el$110, _el$111);
+        _$insertNode(_el$110, _el$113);
+        _$insertNode(_el$110, _el$115);
+        _$setProp(_el$110, "flexDirection", "row");
+        _$setProp(_el$110, "gap", 1);
+        _$setProp(_el$110, "paddingLeft", 1);
+        _$insertNode(_el$111, _el$112);
+        _$setProp(_el$111, "width", 2);
+        _$insert(_el$112, () => focused() === "options" && optionIndex() === dontKnowIdx() ? "\u25B8" : " ");
+        _$insertNode(_el$113, _el$114);
+        _$setProp(_el$113, "width", 2);
+        _$insert(_el$114, () => dontKnow() ? "\u2611" : "\u2610");
+        _$insertNode(_el$115, _el$116);
+        _$setProp(_el$115, "flexGrow", 1);
+        _$insertNode(_el$116, _$createTextNode(`I don't know`));
+        _$setProp(_el$116, "italic", true);
+        _$insertNode(_el$118, _el$119);
+        _$insertNode(_el$118, _el$121);
+        _$setProp(_el$118, "flexDirection", "column");
+        _$setProp(_el$118, "paddingTop", 1);
+        _$insertNode(_el$119, _$createTextNode(`\u270E Note`));
+        _$setProp(_el$121, "border", true);
+        _$setProp(_el$121, "paddingLeft", 1);
+        _$setProp(_el$121, "paddingRight", 1);
+        _$insert(_el$121, _$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$156 = _$createElement("text");
+              _$insert(_el$156, () => note() || "Tab to edit \xB7 share what you were thinking");
+              _$effect((_$p) => _$setProp(_el$156, "fg", theme().textMuted, _$p));
+              return _el$156;
             })();
           },
           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$122 = _$createElement("input");
+            _$use((el) => noteEl = el, _el$122);
+            _$setProp(_el$122, "onInput", (v) => setNote(typeof v === "string" ? v : v?.target?.value ?? ""));
+            _$setProp(_el$122, "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$122, "placeholder", "note (Enter to submit note \u2192 classify)");
+            _$effect((_$p) => _$setProp(_el$122, "value", note(), _$p));
+            return _el$122;
           }
         }));
-        _$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$123, _el$124);
+        _$insertNode(_el$123, _el$125);
+        _$setProp(_el$123, "flexDirection", "row");
+        _$setProp(_el$123, "justifyContent", "space-between");
+        _$setProp(_el$123, "paddingTop", 1);
+        _$insert(_el$124, (() => {
+          var _c$8 = _$memo(() => !!isMulti());
+          return () => _c$8() ? `${selected().size} selected` : note().trim() && !selected().size ? "note \u2192 classify" : "";
+        })());
+        _$insertNode(_el$125, _el$126);
+        _$insert(_el$125, () => idx() + 1, _el$126);
+        _$insert(_el$125, () => props.request.quizzes.length, null);
+        _$insert(_el$107, _$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$127 = _$createElement("box"), _el$128 = _$createElement("box"), _el$129 = _$createElement("text"), _el$130 = _$createElement("text");
+            _$insertNode(_el$127, _el$128);
+            _$setProp(_el$127, "justifyContent", "center");
+            _$setProp(_el$127, "paddingTop", 1);
+            _$insertNode(_el$128, _el$129);
+            _$insertNode(_el$128, _el$130);
+            _$setProp(_el$128, "flexDirection", "row");
+            _$setProp(_el$128, "gap", 1);
+            _$setProp(_el$128, "border", true);
+            _$setProp(_el$128, "paddingLeft", 2);
+            _$setProp(_el$128, "paddingRight", 2);
+            _$insert(_el$129, () => focused() === "options" && optionIndex() === submitIdx() ? "\u25B8" : " ");
+            _$insertNode(_el$130, _$createTextNode(`\u21B3 Submit`));
+            _$setProp(_el$130, "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$63 = focused() === "options" && optionIndex() === submitIdx() ? theme().accent : theme().borderSubtle, _v$64 = focused() === "options" && optionIndex() === submitIdx() ? theme().backgroundElement : theme().background, _v$65 = focused() === "options" && optionIndex() === submitIdx() ? theme().accent : theme().textMuted;
+              _v$63 !== _p$.e && (_p$.e = _$setProp(_el$128, "borderColor", _v$63, _p$.e));
+              _v$64 !== _p$.t && (_p$.t = _$setProp(_el$128, "backgroundColor", _v$64, _p$.t));
+              _v$65 !== _p$.a && (_p$.a = _$setProp(_el$129, "fg", _v$65, _p$.a));
               return _p$;
             }, {
               e: undefined,
               t: undefined,
               a: undefined
             });
-            return _el$110;
+            return _el$127;
           }
         }), 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$66 = theme().borderSubtle, _v$67 = theme().background, _v$68 = theme().borderSubtle, _v$69 = focused() === "options" && optionIndex() === dontKnowIdx() ? theme().backgroundElement : undefined, _v$70 = focused() === "options" && optionIndex() === dontKnowIdx() ? theme().accent : theme().textMuted, _v$71 = dontKnow() ? theme().warning : theme().textMuted, _v$72 = dontKnow() ? theme().warning : theme().textMuted, _v$73 = focused() === "note" ? theme().accent : theme().textMuted, _v$74 = focused() === "note" ? theme().accent : theme().borderSubtle, _v$75 = theme().backgroundElement, _v$76 = theme().textMuted, _v$77 = theme().textMuted;
+          _v$66 !== _p$.e && (_p$.e = _$setProp(_el$107, "borderColor", _v$66, _p$.e));
+          _v$67 !== _p$.t && (_p$.t = _$setProp(_el$107, "backgroundColor", _v$67, _p$.t));
+          _v$68 !== _p$.a && (_p$.a = _$setProp(_el$109, "fg", _v$68, _p$.a));
+          _v$69 !== _p$.o && (_p$.o = _$setProp(_el$110, "backgroundColor", _v$69, _p$.o));
+          _v$70 !== _p$.i && (_p$.i = _$setProp(_el$112, "fg", _v$70, _p$.i));
+          _v$71 !== _p$.n && (_p$.n = _$setProp(_el$114, "fg", _v$71, _p$.n));
+          _v$72 !== _p$.s && (_p$.s = _$setProp(_el$116, "fg", _v$72, _p$.s));
+          _v$73 !== _p$.h && (_p$.h = _$setProp(_el$119, "fg", _v$73, _p$.h));
+          _v$74 !== _p$.r && (_p$.r = _$setProp(_el$121, "borderColor", _v$74, _p$.r));
+          _v$75 !== _p$.d && (_p$.d = _$setProp(_el$121, "backgroundColor", _v$75, _p$.d));
+          _v$76 !== _p$.l && (_p$.l = _$setProp(_el$124, "fg", _v$76, _p$.l));
+          _v$77 !== _p$.u && (_p$.u = _$setProp(_el$125, "fg", _v$77, _p$.u));
           return _p$;
         }, {
           e: undefined,
@@ -1434,37 +2066,37 @@ function QuizBatchDialog(props) {
           l: undefined,
           u: undefined
         });
-        return _el$90;
+        return _el$107;
       }
     }), null);
-    _$insert(_el$87, _$createComponent(Show, {
+    _$insert(_el$104, _$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");
-        _$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`));
+        var _el$132 = _$createElement("box"), _el$133 = _$createElement("text"), _el$135 = _$createElement("text"), _el$136 = _$createTextNode(`"`), _el$137 = _$createTextNode(`"`), _el$138 = _$createElement("text");
+        _$insertNode(_el$132, _el$133);
+        _$insertNode(_el$132, _el$135);
+        _$insertNode(_el$132, _el$138);
+        _$setProp(_el$132, "flexDirection", "column");
+        _$setProp(_el$132, "gap", 1);
+        _$setProp(_el$132, "padding", 1);
+        _$setProp(_el$132, "border", true);
+        _$setProp(_el$132, "alignItems", "center");
+        _$insertNode(_el$133, _$createTextNode(`\u25D0 Classifying your note...`));
+        _$setProp(_el$133, "bold", true);
+        _$insertNode(_el$135, _el$136);
+        _$insertNode(_el$135, _el$137);
+        _$setProp(_el$135, "wrapMode", "wrap");
+        _$insert(_el$135, note, _el$137);
+        _$insertNode(_el$138, _$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$78 = theme().accent, _v$79 = theme().background, _v$80 = theme().accent, _v$81 = theme().textMuted, _v$82 = theme().textMuted;
+          _v$78 !== _p$.e && (_p$.e = _$setProp(_el$132, "borderColor", _v$78, _p$.e));
+          _v$79 !== _p$.t && (_p$.t = _$setProp(_el$132, "backgroundColor", _v$79, _p$.t));
+          _v$80 !== _p$.a && (_p$.a = _$setProp(_el$133, "fg", _v$80, _p$.a));
+          _v$81 !== _p$.o && (_p$.o = _$setProp(_el$135, "fg", _v$81, _p$.o));
+          _v$82 !== _p$.i && (_p$.i = _$setProp(_el$138, "fg", _v$82, _p$.i));
           return _p$;
         }, {
           e: undefined,
@@ -1473,23 +2105,23 @@ function QuizBatchDialog(props) {
           o: undefined,
           i: undefined
         });
-        return _el$115;
+        return _el$132;
       }
     }), null);
-    _$insert(_el$87, _$createComponent(Show, {
+    _$insert(_el$104, _$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$140 = _$createElement("box"), _el$141 = _$createElement("text"), _el$142 = _$createElement("text"), _el$143 = _$createTextNode(`Correct: `), _el$144 = _$createElement("box"), _el$145 = _$createElement("markdown");
+        _$insertNode(_el$140, _el$141);
+        _$insertNode(_el$140, _el$142);
+        _$insertNode(_el$140, _el$144);
+        _$setProp(_el$140, "flexDirection", "column");
+        _$setProp(_el$140, "gap", 1);
+        _$setProp(_el$140, "padding", 1);
+        _$setProp(_el$140, "border", true);
+        _$insert(_el$140, _$createComponent(For, {
           get each() {
             return cur().options;
           },
@@ -1518,47 +2150,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(`. `);
-              _$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);
-              _$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;
+              var _el$157 = _$createElement("box"), _el$158 = _$createElement("box"), _el$159 = _$createElement("text"), _el$160 = _$createElement("box"), _el$161 = _$createElement("text"), _el$162 = _$createTextNode(`. `);
+              _$insertNode(_el$157, _el$158);
+              _$insertNode(_el$157, _el$160);
+              _$setProp(_el$157, "flexDirection", "row");
+              _$setProp(_el$157, "gap", 1);
+              _$setProp(_el$157, "paddingLeft", 1);
+              _$setProp(_el$157, "backgroundColor", bg);
+              _$insertNode(_el$158, _el$159);
+              _$setProp(_el$158, "width", 2);
+              _$setProp(_el$159, "fg", fg);
+              _$setProp(_el$159, "bold", true);
+              _$insert(_el$159, ic);
+              _$insertNode(_el$160, _el$161);
+              _$setProp(_el$160, "flexGrow", 1);
+              _$insertNode(_el$161, _el$162);
+              _$setProp(_el$161, "fg", fg);
+              _$setProp(_el$161, "wrapMode", "wrap");
+              _$insert(_el$161, id, _el$162);
+              _$insert(_el$161, () => opt.label, null);
+              return _el$157;
             })();
           }
-        }), _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$141);
+        _$setProp(_el$141, "bold", true);
+        _$insert(_el$141, () => feedback()?.correct ? "\u2713 Correct" : "\u2717 Incorrect");
+        _$insertNode(_el$142, _el$143);
+        _$insert(_el$142, () => cur().correctIndices.map((i) => `${i}. ${cur().options[i - 1]?.label}`).join(", "), null);
+        _$insertNode(_el$144, _el$145);
+        _$setProp(_el$144, "border", true);
+        _$setProp(_el$144, "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$83 = feedback()?.correct ? theme().success : theme().error, _v$84 = theme().background, _v$85 = feedback()?.correct ? theme().success : theme().error, _v$86 = theme().textMuted, _v$87 = theme().borderSubtle, _v$88 = theme().backgroundPanel, _v$89 = syntax(), _v$90 = decodeQuizText(cur().explanation), _v$91 = theme().text, _v$92 = theme().backgroundPanel;
+          _v$83 !== _p$.e && (_p$.e = _$setProp(_el$140, "borderColor", _v$83, _p$.e));
+          _v$84 !== _p$.t && (_p$.t = _$setProp(_el$140, "backgroundColor", _v$84, _p$.t));
+          _v$85 !== _p$.a && (_p$.a = _$setProp(_el$141, "fg", _v$85, _p$.a));
+          _v$86 !== _p$.o && (_p$.o = _$setProp(_el$142, "fg", _v$86, _p$.o));
+          _v$87 !== _p$.i && (_p$.i = _$setProp(_el$144, "borderColor", _v$87, _p$.i));
+          _v$88 !== _p$.n && (_p$.n = _$setProp(_el$144, "backgroundColor", _v$88, _p$.n));
+          _v$89 !== _p$.s && (_p$.s = _$setProp(_el$145, "syntaxStyle", _v$89, _p$.s));
+          _v$90 !== _p$.h && (_p$.h = _$setProp(_el$145, "content", _v$90, _p$.h));
+          _v$91 !== _p$.r && (_p$.r = _$setProp(_el$145, "fg", _v$91, _p$.r));
+          _v$92 !== _p$.d && (_p$.d = _$setProp(_el$145, "bg", _v$92, _p$.d));
           return _p$;
         }, {
           e: undefined,
@@ -1567,29 +2200,115 @@ function QuizBatchDialog(props) {
           o: undefined,
           i: undefined,
           n: undefined,
-          s: undefined
+          s: undefined,
+          h: undefined,
+          r: undefined,
+          d: undefined
         });
-        return _el$123;
+        return _el$140;
       }
     }), 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$146, _el$147);
+    _$setProp(_el$146, "height", 1);
+    _$setProp(_el$146, "justifyContent", "center");
+    _$setProp(_el$147, "wrapMode", "wrap");
+    _$insert(_el$147, (() => {
+      var _c$9 = _$memo(() => phase() === "feedback");
+      return () => _c$9() ? _$memo(() => !!(canScrollUpBatch() && canScrollDownBatch()))() ? [(() => {
+        var _el$163 = _$createElement("span");
+        _$insertNode(_el$163, _$createTextNode(`\u25B2 more above \xB7 \u25BC more below`));
+        _$effect((_$p) => _$setProp(_el$163, "style", {
+          fg: theme.warning,
+          bold: true
+        }, _$p));
+        return _el$163;
+      })(), (() => {
+        var _el$165 = _$createElement("span"), _el$166 = _$createTextNode(` \u2014 d/u to scroll \xB7 Enter \u2192 next (`), _el$167 = _$createTextNode(`/`), _el$168 = _$createTextNode(`)`);
+        _$insertNode(_el$165, _el$166);
+        _$insertNode(_el$165, _el$167);
+        _$insertNode(_el$165, _el$168);
+        _$insert(_el$165, () => idx() + 1, _el$167);
+        _$insert(_el$165, () => props.request.quizzes.length, _el$168);
+        _$effect((_$p) => _$setProp(_el$165, "style", {
+          fg: theme().textMuted
+        }, _$p));
+        return _el$165;
+      })()] : _$memo(() => !!canScrollDownBatch())() ? [(() => {
+        var _el$169 = _$createElement("span");
+        _$insertNode(_el$169, _$createTextNode(`\u25BC more below`));
+        _$effect((_$p) => _$setProp(_el$169, "style", {
+          fg: theme.warning,
+          bold: true
+        }, _$p));
+        return _el$169;
+      })(), (() => {
+        var _el$171 = _$createElement("span"), _el$172 = _$createTextNode(` \u2014 d to scroll \xB7 Enter \u2192 next (`), _el$173 = _$createTextNode(`/`), _el$174 = _$createTextNode(`)`);
+        _$insertNode(_el$171, _el$172);
+        _$insertNode(_el$171, _el$173);
+        _$insertNode(_el$171, _el$174);
+        _$insert(_el$171, () => idx() + 1, _el$173);
+        _$insert(_el$171, () => props.request.quizzes.length, _el$174);
+        _$effect((_$p) => _$setProp(_el$171, "style", {
+          fg: theme().textMuted
+        }, _$p));
+        return _el$171;
+      })()] : _$memo(() => !!canScrollUpBatch())() ? [(() => {
+        var _el$175 = _$createElement("span");
+        _$insertNode(_el$175, _$createTextNode(`\u25B2 more above`));
+        _$effect((_$p) => _$setProp(_el$175, "style", {
+          fg: theme.accent,
+          bold: true
+        }, _$p));
+        return _el$175;
+      })(), (() => {
+        var _el$177 = _$createElement("span"), _el$178 = _$createTextNode(` \u2014 u to scroll \xB7 Enter \u2192 next (`), _el$179 = _$createTextNode(`/`), _el$180 = _$createTextNode(`)`);
+        _$insertNode(_el$177, _el$178);
+        _$insertNode(_el$177, _el$179);
+        _$insertNode(_el$177, _el$180);
+        _$insert(_el$177, () => idx() + 1, _el$179);
+        _$insert(_el$177, () => props.request.quizzes.length, _el$180);
+        _$effect((_$p) => _$setProp(_el$177, "style", {
+          fg: theme().textMuted
+        }, _$p));
+        return _el$177;
+      })()] : `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" : _$memo(() => !!(canScrollUpBatch() || canScrollDownBatch()))() ? [(() => {
+        var _el$181 = _$createElement("span");
+        _$insertNode(_el$181, _$createTextNode(`j/k or \u2191\u2193 move \xB7 Space toggle \xB7 Tab note \xB7 Enter submit \xB7 Esc cancel`));
+        _$effect((_$p) => _$setProp(_el$181, "style", {
+          fg: theme().textMuted
+        }, _$p));
+        return _el$181;
+      })(), (() => {
+        var _el$183 = _$createElement("span");
+        _$insertNode(_el$183, _$createTextNode(` \xB7 d/u scroll`));
+        _$effect((_$p) => _$setProp(_el$183, "style", {
+          fg: theme.warning,
+          bold: true
+        }, _$p));
+        return _el$183;
+      })()] : "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$93 = popupWidth(), _v$94 = popupHeight(), _v$95 = phase() === "feedback" ? feedback()?.correct ? theme().success : theme().error : theme().accent, _v$96 = theme().backgroundPanel, _v$97 = theme().accent, _v$98 = theme().background, _v$99 = theme().background, _v$100 = {
+        visible: true,
+        trackOptions: {
+          backgroundColor: theme().background,
+          foregroundColor: theme().borderActive
+        }
+      }, _v$101 = syntax(), _v$102 = decodeQuizText(cur().question), _v$103 = theme().text, _v$104 = theme().backgroundPanel, _v$105 = theme().textMuted;
+      _v$93 !== _p$.e && (_p$.e = _$setProp(_el$94, "width", _v$93, _p$.e));
+      _v$94 !== _p$.t && (_p$.t = _$setProp(_el$94, "height", _v$94, _p$.t));
+      _v$95 !== _p$.a && (_p$.a = _$setProp(_el$94, "borderColor", _v$95, _p$.a));
+      _v$96 !== _p$.o && (_p$.o = _$setProp(_el$94, "backgroundColor", _v$96, _p$.o));
+      _v$97 !== _p$.i && (_p$.i = _$setProp(_el$95, "backgroundColor", _v$97, _p$.i));
+      _v$98 !== _p$.n && (_p$.n = _$setProp(_el$96, "fg", _v$98, _p$.n));
+      _v$99 !== _p$.s && (_p$.s = _$setProp(_el$100, "fg", _v$99, _p$.s));
+      _v$100 !== _p$.h && (_p$.h = _$setProp(_el$104, "verticalScrollbarOptions", _v$100, _p$.h));
+      _v$101 !== _p$.r && (_p$.r = _$setProp(_el$105, "syntaxStyle", _v$101, _p$.r));
+      _v$102 !== _p$.d && (_p$.d = _$setProp(_el$105, "content", _v$102, _p$.d));
+      _v$103 !== _p$.l && (_p$.l = _$setProp(_el$105, "fg", _v$103, _p$.l));
+      _v$104 !== _p$.u && (_p$.u = _$setProp(_el$105, "bg", _v$104, _p$.u));
+      _v$105 !== _p$.c && (_p$.c = _$setProp(_el$147, "fg", _v$105, _p$.c));
       return _p$;
     }, {
       e: undefined,
@@ -1600,9 +2319,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$94;
   })();
 }
 var tui = async (api) => {