eklavya 1.87.0 → 1.89.0

package/README.md

@@ -52,7 +52,7 @@ Code's learning loop.
 |---|---|
 | Learner state and concepts | `get_learner_profile`, `log_session_concepts`, `upsert_concepts`, `get_concept_graph` |
 | Questions and assessment (automatic questions wait for a code change, not a `git pull`; see `quiz.only_on_changes`) | `get_session_quiz_plan`, `record_attempt`, `get_gate_status` |
-| Quiz side panel (experimental) | `present_question` for the model; `panel_sync` and `panel_answer`, called only by the panel mod, never by the model; its header stacks the mark above the topic in a pane under 60 cells wide; on the desktop app each option's note is its own line under the option, and a click on the option picks it; `/eklavya-panel-demo` opens a mock question the panel answers itself, calling none of these tools |
+| Quiz side panel (experimental) | `present_question` for the model; `panel_sync` and `panel_answer`, called only by the panel mod, never by the model; its header stacks the mark above the topic in a pane under 60 cells wide; on the desktop app each option is a numbered card drawn as one pressable region (a click anywhere on it picks it), while VS Code and the terminal keep native buttons; `/eklavya-panel-demo` opens a mock question the panel answers itself, calling none of these tools |
 | Settings | `get_config`, `set_config` |
 | Find and read memory (`memory_status` includes a `health` verdict with reasons) | `memory_search`, `memory_get`, `memory_timeline`, `memory_file_history`, `memory_status` |
 | Maintain memory | `memory_write`, `memory_correct`, `memory_delete`, `memory_collections` |

package/dist/plugin/.claude-plugin/plugin.json

@@ -1,7 +1,7 @@
 {
   "name": "eklavya",
   "displayName": "Eklavya",
-  "version": "1.87.0",
+  "version": "1.89.0",
   "description": "Learn while your agent works. Turns coding-agent generation time into adaptive, Socratic learning grounded in the code being written.",
   "author": {
     "name": "Ajay Kumar"

package/dist/plugin/hooks/CLAUDE.md

@@ -56,7 +56,7 @@ returns `{disabled: true}` and the mod opens and draws nothing. `presentation` i
 the Stop sweep and the delegation lines (`delegation-lib.ts`) read it, and an
 open panel question silences the checkpoint and the Stop sweep. Read
 `docs/verified-schemas.md` (mods section) before changing anything it records.
-`/eklavya-panel-demo` (`DEMO_COMMAND`) is the maintainer's shortcut for trying the pane: it seeds `PanelState.demo` with a mock question and never calls the server, so it works with `quiz.panel` off. While `demo` is set the heartbeat (`beat`) does not sync, `submit` grades locally with `demoResult` (no `panel_answer`, grader or explainer) and Next restarts the mock; `/eklavya-panel` and a real `present_question` sync replace it. On a non-terminal surface it also offers the Answer cards switch: `button` is the production layout, `client` draws each option as a `Client` region from `card.tsx` that posts `{pick}` to the `ui.message` hook, which accepts only an id of the open question. The switch is demo-only until the whole-card press is observed on Desktop; then make it the default and say so in `docs/verified-schemas.md`.
+`/eklavya-panel-demo` (`DEMO_COMMAND`) is the maintainer's shortcut for trying the pane: it seeds `PanelState.demo` with a mock question and never calls the server, so it works with `quiz.panel` off. While `demo` is set the heartbeat (`beat`) does not sync, `submit` grades locally with `demoResult` (no `panel_answer`, grader or explainer) and Next restarts the mock; `/eklavya-panel` and a real `present_question` sync replace it. Only the desktop draws `Client` regions (VS Code has `Svg` but no `Client`, and a tree holding an element its surface lacks is replaced whole): there every answer is a numbered whole-card region from `card.tsx`, Teach me is a compact `pill.tsx` region, the Other header is a `bare` card over an `Input` of three rows, and the header mark is `MASCOT_FACE` as an `Svg`; they post `{pick}` or `{press}` to the `ui.message` hook, which accepts only an id of the open question, `other`, or `teach`. VS Code and the terminal keep native `Button`s (VS Code numbers the labels itself, the terminal's plain Button draws `1:`). The demo's Answer cards switch (desktop only) compares the whole-card default with the native buttons. Under the Teach me button the demo also draws an experiment box (`experiment` in `register.tsx`): `Image` with `DEMO_PNG` on the terminal, two `Svg` (`demoSvg`, `demoSvgWithPng`) on every other surface, never both, because a tree holding an element its surface lacks is replaced whole by the host's own pane.
 Run `scripts/test-panel-mod.sh`: it stages the mod as its own plugin, validates
 it, runs `claude plugin test`, then validates the distributed plugin.
 

package/dist/plugin/hooks/panel/card.tsx

@@ -2,19 +2,25 @@ import type { ClientModule } from 'claude-code'
 
 /**
  * One answer card drawn as a `Client` region, so a press anywhere on it (border,
- * padding, title or note) picks it. A `Button` is only as large as its label, and a
+ * padding, number, title or note) picks it. A `Button` is only as large as its label, and a
  * `Box` takes no press, so this is the one way to make the whole card the target.
  *
  * It gets no mods API: it holds only its hover and posts `{ pick: id }` to the hooks
  * module, whose `ui.message` hook validates the id and records the pick. The colours
  * come in as props, so the module imports nothing.
+ *
+ * `bare` draws only the pressable header (padding and text, no border or fill): the Other
+ * card's frame and its text box belong to the hooks module, and this is the row that selects it.
  */
 export type CardProps = {
   id: string
   label: string
   note: string
+  /** The answer's number, drawn before the text; absent for Other. */
+  n?: number
   chosen: boolean
   locked: boolean
+  bare?: boolean
   brand: string
   fill: string
   text: string
@@ -30,16 +36,29 @@ const Card: ClientModule<CardProps, { hover: boolean }> = (p, s) => {
     else if (e.type === 'leave' && hover) s.setState({ hover: false })
     else if (e.type === 'up' && !p.locked && (e.button === undefined || e.button === 'left')) s.post({ pick: p.id })
   })
-  return Box({
+  const words = Box({
     flexDirection: 'column',
+    flexShrink: 1,
+    children: [
+      Text({ wrap: 'wrap', bold: p.chosen && !p.bare, color: p.chosen && !p.bare ? p.text : undefined, children: [p.label] }),
+      ...(p.note ? [Text({ wrap: 'wrap', dimColor: !p.chosen, color: p.chosen ? p.noteText : undefined, children: [p.note] })] : []),
+    ],
+  })
+  return Box({
+    flexDirection: p.n === undefined ? 'column' : 'row',
+    gap: 2,
     paddingX: 2,
     paddingY: 1,
-    borderStyle: p.chosen ? 'bold' : 'single',
-    borderColor: p.chosen || (hover && !p.locked) ? p.brand : 'inactive',
-    backgroundColor: p.chosen ? p.fill : undefined,
+    ...(p.bare
+      ? {}
+      : {
+          borderStyle: p.chosen ? 'bold' : 'single',
+          borderColor: p.chosen || (hover && !p.locked) ? p.brand : 'inactive',
+          backgroundColor: p.chosen ? p.fill : undefined,
+        }),
     children: [
-      Text({ wrap: 'wrap', bold: p.chosen, color: p.chosen ? p.text : undefined, children: [p.label] }),
-      Text({ wrap: 'wrap', dimColor: !p.chosen, color: p.chosen ? p.noteText : undefined, children: [p.note] }),
+      ...(p.n === undefined ? [] : [Text({ bold: true, dimColor: !p.chosen, color: p.chosen ? p.text : undefined, children: [String(p.n)] })]),
+      words,
     ],
   })
 }

package/dist/plugin/hooks/panel/model.ts

@@ -23,7 +23,7 @@ export const BRAND = '#79D5C4'
 /** The fill and text of the picked answer: set together so the contrast holds in a light or a dark theme. */
 export const PICKED = { bg: '#1E5A52', text: '#FFFFFF', note: '#C9E8E3' }
 /** Teach me is Claude's orange (the logo's mascot), fill and border. The text is dark, as white on that orange is too faint at body size. */
-export const TEACH = { bg: '#D97757', text: '#1F1E1D' }
+export const TEACH = { bg: '#D97757', text: '#1F1E1D', hover: '#E48866' }
 
 /**
  * The logo: the Claude mascot (orange) holding an Eklavya bow and arrow (white), drawn on a
@@ -171,6 +171,13 @@ export const STR = {
   demoStyleClient: 'Whole card',
   demoExplanation: 'A rename inside one folder is atomic: the poller sees the finished file or none, never half of it. (This is a mock, so it was not recorded.)',
   demoTyped: 'Typed answers are not graded in the demo. (Nothing was sent or recorded.)',
+  mascotAlt: 'The Eklavya mascot',
+  experimentBanner: 'EXPERIMENT · picture test. Nothing here is part of a real question.',
+  experimentTerminal: 'Image: a PNG, drawn as a picture in kitty, Ghostty and iTerm2 (fullscreen); other terminals show the dim text instead. SVG is not drawn in the terminal.',
+  experimentImageAlt: 'The Eklavya mark: the Claude mascot holding a bow and arrow',
+  experimentNone: 'This surface draws neither an SVG nor an image, so there is nothing to test here.',
+  experimentSvg: 'SVG: the mark drawn as vector rectangles.',
+  experimentSvgPng: 'Image: the same mark as a PNG inside an SVG (Desktop has no Image element).',
 } as const
 
 /** The explainer agent the panel starts itself, so no prompt lands in the transcript. */
@@ -241,6 +248,37 @@ export function demoResult(kind: 'choice' | 'text' | 'skip' | 'dont_know', optio
   return { phase: 'answered', attempt_id: 0, correct, correct_label: right, explanation: kind === 'text' ? STR.demoTyped : STR.demoExplanation }
 }
 
+/**
+ * The mascot's neutral face, the header mark on every surface that draws `Svg`. A copy of
+ * `web/public/brand/mascot/expressions/neutral-face.svg` (the mod has no filesystem); a test keeps the two equal,
+ * so regenerate with `npm run mascot:generate` and paste the file. The terminal keeps the block-character logo.
+ */
+export const MASCOT_FACE =
+  "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"30 12 126 128\" width=\"200\" height=\"200\" class=\"ek-mascot\" data-expression=\"neutral\" data-variant=\"face\" role=\"img\"><style>:root {/* ---------- MASCOT IDENTITY ----------\n     Archer Cloak artwork keeps its approved identity across both grounds.\n     UI chrome continues to use the surface, text and accent roles below. */\n  --mascot-coral: #ef9875;\n  --mascot-coral-dark: #c96d51;\n  --mascot-highlight: #ffc8a6;\n  --mascot-cloak: #0E6E66;\n  --mascot-cloak-dark: #07403C;\n  --mascot-thread: #C4EDE4;\n  --mascot-ink: #302c2a;\n  --mascot-metal: #5b7c73;\n  --mascot-wood: #bc9569;\n  --mascot-wood-dark: #74583f;\n  --mascot-string: #EAE7E1;\n  --mascot-shadow: #26262a;\n  /* ---------- END MASCOT IDENTITY ---------- */}/* Identity colours and UI surfaces use Eklavya's semantic tokens. */\neklavya-mascot { display:inline-flex; flex-shrink:0; vertical-align:middle; line-height:0; }\n.ek-mascot { display:block; overflow:visible; flex-shrink:0; }\n.ek-mascot[data-variant=\"face\"] { overflow:hidden; }\n.ek-mascot__face path:not([fill]) { fill:none; }\n.ek-companion { display:flex;align-items:center;gap:12px;color:var(--dim);font:13px/1.5 var(--font-body); }\n.ek-companion--hero { margin-bottom:16px; }\n.ek-companion--hero b { display:block;color:var(--ink);font-weight:600; }\n.ek-mascot-message { display:flex;align-items:center;gap:16px;padding:16px 0; }\n.ek-mascot-message p {margin:0}\n/* Secondary loader: draws and releases an arrow over 2.8 s. */\n.ek-mascot--draw .ek-mascot__character { animation:ek-breathe 2.8s ease-in-out infinite; transform-origin:95px 185px; }\n.ek-mascot--draw .ek-mascot__arrow { animation:ek-release 2.8s cubic-bezier(.3,0,.3,1) infinite; }\n.ek-mascot--draw .ek-mascot__string { animation:ek-draw 2.8s ease-in-out infinite; transform-origin:157px 125px; }\n.ek-mascot--draw .ek-mascot__ripple { animation:ek-hit 2.8s ease-out infinite; transform-origin:196px 128px; opacity:0; }\n@keyframes ek-breathe { 0%,100% {transform:translateY(0)} 35%,55% {transform:translateY(-3px) rotate(-1deg)} }\n@keyframes ek-release { 0%,12% {transform:translateX(0);opacity:1} 40%,52% {transform:translateX(-10px);opacity:1} 68% {transform:translateX(22px);opacity:0} 69%,85% {transform:translateX(0);opacity:0} 100% {transform:translateX(0);opacity:1} }\n@keyframes ek-draw { 0%,100% {transform:scaleX(1)} 40%,52% {transform:scaleX(1.11)} 60% {transform:scaleX(.08)} 68% {transform:scaleX(1)} }\n@keyframes ek-hit { 0%,60%,100% {opacity:0;transform:scale(.4)} 68% {opacity:.8;transform:scale(.7)} 88% {opacity:0;transform:scale(1.7)} }\n/* Loader: walking toward the viewer, a 1.2 s stride (two steps). Ground rungs recede on an ease-out, as perspective slows them near the horizon. */\n.ek-mascot--loading .ek-mascot__walker { animation:ek-sway 1.2s ease-in-out infinite; transform-origin:95px 185px; }\n.ek-mascot--loading .ek-mascot__torso { animation:ek-bob .6s ease-in-out infinite; }\n.ek-mascot--loading .ek-mascot__leg, .ek-mascot--loading .ek-mascot__hand { animation:ek-step 1.2s ease-in-out infinite; }\n.ek-mascot--loading .ek-mascot__leg--r, .ek-mascot--loading .ek-mascot__hand--arrow { animation-delay:-.6s; }\n.ek-mascot--loading .ek-mascot__shadow { animation:ek-shadow .6s ease-in-out infinite; transform-origin:95px 186px; }\n.ek-mascot--loading .ek-mascot__rung { animation:ek-recede 1.2s cubic-bezier(.15,.6,.4,1) infinite; transform-origin:95px 162px; }\n.ek-mascot--loading .ek-mascot__rung:nth-child(3) { animation-delay:-.3s; }\n.ek-mascot--loading .ek-mascot__rung:nth-child(4) { animation-delay:-.6s; }\n.ek-mascot--loading .ek-mascot__rung:nth-child(5) { animation-delay:-.9s; }\n@keyframes ek-sway { 0%,100% {transform:rotate(-1.5deg)} 50% {transform:rotate(1.5deg)} }\n@keyframes ek-bob { 0%,100% {transform:translateY(1px)} 50% {transform:translateY(-3px)} }\n@keyframes ek-step { 0%,50%,100% {transform:translateY(0)} 25% {transform:translateY(-6px)} }\n@keyframes ek-shadow { 0%,100% {transform:scaleX(1)} 50% {transform:scaleX(.92)} }\n@keyframes ek-recede { 0% {transform:translateY(56px) scaleX(1);opacity:0} 10% {opacity:1} 85% {opacity:1} 100% {transform:translateY(0) scaleX(.4);opacity:0} }\n@media (prefers-reduced-motion:reduce) { .ek-mascot * {animation:none !important;transition:none !important} }\n\n.ek-companion--rail { padding:12px 20px; text-decoration:none; }\n.ek-mascot-message > :last-child { min-width:0; overflow-wrap:break-word; }\n.ek-mascot-status { display:inline-flex; align-items:center; gap:6px; }\n</style><title>Eklavya, calm and attentive</title><path d=\"M48 109q44-19 88 0l-8 30-33-15-31 15Z\" fill=\"var(--mascot-cloak)\"/><g class=\"ek-mascot__head\">\n        <path d=\"M46 43h18V29h19V18h23v12h20v14h17v19h8v29h-8v16q0 12-16 15H62q-18-3-18-17V91h-9V63h11Z\" fill=\"var(--mascot-coral)\" stroke=\"var(--mascot-coral-dark)\" stroke-width=\"2\" stroke-linejoin=\"round\"/>\n        <path d=\"M48 45h18V32h18V21h19\" fill=\"none\" stroke=\"var(--mascot-highlight)\" stroke-width=\"3\" stroke-linejoin=\"round\"/>\n        <g class=\"ek-mascot__face\" fill=\"var(--mascot-ink)\" stroke=\"var(--mascot-ink)\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"64\" y=\"64\" width=\"10\" height=\"19\" rx=\"5\"/><rect x=\"110\" y=\"64\" width=\"10\" height=\"19\" rx=\"5\"/><path d=\"M84 89q8 6 16 0\"/></g>\n      </g><circle cx=\"95\" cy=\"126\" r=\"6\" fill=\"var(--mascot-metal)\"/></svg>"
+
+/** The logo as a PNG (208 by 96, one grid cell is 8 pixels), for the demo's picture test: the mod has no filesystem. */
+export const DEMO_PNG =
+  'iVBORw0KGgoAAAANSUhEUgAAANAAAABgCAYAAABsbvwBAAABcElEQVR42u3dwQ2DMBBFQXdJKdRKNaYDDqDFu+t50j8mUpDnZCUZQ3pofswTFEAASQBJAEkASQABJAEkASTlBJL9/SWAJIAAEkAASQBJAEkAASSAAJJyHnDABBBAAgggCSAJIIAEEEACCCAJoLpd5zFt3aof4O2BOcQAAQQQQAABBBBAABlAABlAAAEEEEAAAQRQY0Ddga5+ftUPaHtgAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAAB5CLUXk7BfyDmkAEkgAwggAwggAwggAwgAWQEAGQAJQbkHskX6lykuogFCCCADCCADCCAAAIIIIAAAgggAwggAwigCGDRr9/98/lhRYAAAggggAACCCCAAHLAAAIIIIAAAggggAACCCCA1LPVBxQQAQSQAAJIAkgCCCABBJAAAkgCSKp5gAERQABJAEkASQABJIAAkgCSAJJqAgNEAkgCSAJIAgggCSAJIAkgSZIkSZIkSZIk6dduN5j9QcRn8BgAAAAASUVORK5CYII='
+
+/** The logo as SVG, one rect per run of a colour, so the demo can test a vector picture without an asset file. */
+export function demoSvg(): string {
+  const rects = boxRows()
+    .flatMap((runs, y) => {
+      let x = 0
+      return runs.map(run => {
+        const at = x
+        x += run.width
+        return run.color ? `<rect x="${at}" y="${y}" width="${run.width}" height="1" fill="${run.color}"/>` : ''
+      })
+    })
+    .join('')
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${LOGO_GRID[0]!.length} ${LOGO_GRID.length}" shape-rendering="crispEdges">${rects}</svg>`
+}
+
+/** The same picture as a PNG inside an SVG: Desktop has no Image element, so this is how a raster is tried there. */
+export const demoSvgWithPng = (): string =>
+  `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 208 96"><image href="data:image/png;base64,${DEMO_PNG}" width="208" height="96"/></svg>`
+
 /** The tester's line of what was just clicked, and how the click arrived. */
 export const demoLast = (what: string): string => `Last click: ${what}`
 

package/dist/plugin/hooks/panel/pill.tsx

@@ -0,0 +1,38 @@
+import type { ClientModule } from 'claude-code'
+
+/**
+ * A compact filled button drawn as a `Client` region, so a press anywhere on it (fill, padding or
+ * text) counts. A `Button` takes no fill, and a `Box` takes no press, so a coloured button whose
+ * whole body is pressable has to be a region of its own. It sizes to its text and posts
+ * `{ press: id }` to the hooks module, which validates it. Colours come in as props.
+ */
+export type PillProps = {
+  id: string
+  label: string
+  locked: boolean
+  fill: string
+  hoverFill: string
+  text: string
+}
+
+const Pill: ClientModule<PillProps, { hover: boolean }> = (p, s) => {
+  const { Box, Text } = s.elements
+  const hover = s.state?.hover ?? false
+  s.onPointer(e => {
+    if (e.type === 'enter' && !hover) s.setState({ hover: true })
+    else if (e.type === 'leave' && hover) s.setState({ hover: false })
+    else if (e.type === 'up' && !p.locked && (e.button === undefined || e.button === 'left')) s.post({ press: p.id })
+  })
+  const fill = hover && !p.locked ? p.hoverFill : p.fill
+  return Box({
+    flexDirection: 'row',
+    paddingX: 2,
+    paddingY: 0.5,
+    borderStyle: 'round',
+    borderColor: fill,
+    backgroundColor: fill,
+    children: [Text({ color: p.text, children: [p.label] })],
+  })
+}
+
+export default Pill

package/dist/plugin/hooks/panel/register.tsx

@@ -3,6 +3,8 @@ import type { EngineInterface, Register } from 'claude-code'
 
 import {
   BRAND,
+  DEMO_PNG,
+  MASCOT_FACE,
   PICKED,
   TEACH,
   EMPTY,
@@ -17,6 +19,8 @@ import {
   answerWas,
   demoLast,
   demoResult,
+  demoSvg,
+  demoSvgWithPng,
   explainerBrief,
   codify,
   gradingRequest,
@@ -34,6 +38,7 @@ import {
 } from './model'
 import type { PanelPending, PanelQuestion, PanelState } from './types'
 import type { CardProps } from './card'
+import type { PillProps } from './pill'
 
 /**
  * The Eklavya quiz panel: a pane that shows the question the tutor model handed
@@ -403,20 +408,24 @@ export const register: Register = on => {
   // The mock question: opens at once, answered on this machine, so a card or a click can be tried with no real question waiting.
   on('command.run', { command: 'eklavya-panel-demo' }, async $ => {
     try {
-      await startDemo($, 'button')
+      await startDemo($, 'client')
       return { text: STR.demoOpened }
     } catch {
       return { text: STR.demoFailed }
     }
   })
 
-  // A press on a whole-card `Client` (card.tsx) arrives here as data, never as a fact: only an id of the open question counts.
+  // A press on a `Client` region (card.tsx, pill.tsx) arrives here as data, never as a fact: only an id of the open question, Other, or Teach me counts.
   on('ui.message', { component: 'Pane' }, async ($, e, next) => {
     if (e.requestId === PANE) {
       try {
-        const id = (e.data as { pick?: unknown } | null)?.pick
+        const started = Date.now()
+        const data = e.data as { pick?: unknown; press?: unknown } | null
+        const id = data?.pick
         const s: PanelState = (await $.state.get(REF)).value ?? EMPTY
-        if (typeof id === 'string' && s.question?.options.some(o => o.id === id)) await pick($, id, 'whole card')
+        if (id === 'other') await chooseOther($)
+        else if (typeof id === 'string' && s.question?.options.some(o => o.id === id)) await pick($, id, 'whole card', started)
+        else if (data?.press === 'teach' && s.question && (s.step === 'awaiting' || s.step === 'error')) await teach($)
       } catch {
         /* Fail open: the card stays as it was. */
       }
@@ -438,13 +447,18 @@ export const register: Register = on => {
   on('ui.render', { component: 'Pane', requestId: 'eklavya-quiz' }, async ($, e, next) => {
     // Only our pane: every other pane, and everything else, is the host's.
     if (e.requestId !== PANE) return next(e)
-    const { Box, Text, Button, Input, Markdown, Client } = $.ui.resolve(e) as any
+    const { Box, Text, Button, Input, Markdown, Client, Svg, Image } = $.ui.resolve(e) as any
     const s: PanelState = await read($, quiz)
     const q = s.question
 
     // Any surface but the terminal is the desktop app's: it sets the question as a heading, spaces the
     // answers apart and draws the mark in boxes. The terminal keeps its text layout.
     const app = e.surface !== 'terminal'
+    // Only the desktop app draws a `Client` (the whole-card answers, the Teach me pill, the Other row). VS Code has `Svg` but no `Client`:
+    // a tree holding an element its surface lacks is replaced whole, so VS Code keeps the native buttons.
+    const desktop = e.surface === 'desktop'
+    // `Svg` is drawn by the desktop app and VS Code only (the elements table lists no other surface), so any other surface keeps the grid mark.
+    const vector = desktop || e.surface === 'vscode'
     // The mark is drawn in text, as Claude Code draws its own, so it shows in every terminal. The
     // desktop app sets text in a proportional font with its own line height, so glyph cells do not
     // tile there: it gets the same grid as filled boxes, one per run of a colour. A cell is one unit
@@ -463,6 +477,11 @@ export const register: Register = on => {
             </Box>
           ))}
         </Box>
+      ) : vector ? (
+        // The mascot's own neutral face, as the vector artwork the brand ships (the block grid is for the terminal's cells).
+        <Box flexDirection="column" flexShrink={0}>
+          <Svg alt={STR.mascotAlt} width={72} height={73} source={MASCOT_FACE} />
+        </Box>
       ) : (
         <Box flexDirection="column" flexShrink={0}>
           {boxRows().map((runs, y) => (
@@ -524,7 +543,7 @@ export const register: Register = on => {
       <Box key="demo-bar" flexDirection="column" gap={app ? 1 : 0}>
         <Text color="warning">{STR.demoBanner}</Text>
         <Text dimColor>{s.demo.last}</Text>
-        {app ? (
+        {desktop ? (
           <Box flexDirection="row" gap={2} alignItems="center">
             <Text dimColor>{STR.demoStyleLabel}</Text>
             <Button key="style-button" label={STR.demoStyleButton} variant={s.demo.style === 'button' ? 'primary' : 'secondary'} onPress={() => setStyle($, 'button')} />
@@ -600,18 +619,21 @@ export const register: Register = on => {
         {note && !app ? <Text wrap="wrap" dimColor={!chosen} color={chosen ? PICKED.note : undefined}>{`\n   ${note}`}</Text> : null}
       </Button>
     )
-    const wholeCard = app && s.demo?.style === 'client'
+    // The desktop app draws each answer as one pressable region, so a click on its padding or note picks too (card.tsx);
+    // the demo can switch back to the native buttons to compare.
+    const wholeCard = desktop && (s.demo ? s.demo.style === 'client' : true)
+    const cardProps = (id: string, over: Partial<CardProps>): CardProps => ({ id, label: '', note: '', chosen: false, locked, brand: BRAND, fill: PICKED.bg, text: PICKED.text, noteText: PICKED.note, ...over })
     const options = q.options.map((o, i) => {
       const chosen = !s.draft.other && s.draft.picked === o.id
-      // The whole card is one pressable region, so a click on its padding or note picks too (card.tsx).
       if (wholeCard) {
-        const props: CardProps = { id: o.id, label: plainLabel(o.label), note: o.note ? plainLabel(o.note) : '', chosen, locked, brand: BRAND, fill: PICKED.bg, text: PICKED.text, noteText: PICKED.note }
+        const props = cardProps(o.id, { label: plainLabel(o.label), note: o.note ? plainLabel(o.note) : '', n: i + 1, chosen })
         return <Client key={`card-${o.id}`} module="./card.tsx" width="100%" props={props} />
       }
       return card(
         o.id,
         chosen,
-        answer(o.id, `opt-${o.id}`, String(i + 1), plainLabel(o.label), chosen, o.note ? plainLabel(o.note) : undefined),
+        // The terminal's plain Button draws its own `1:`; the other surfaces number the label themselves.
+        answer(o.id, `opt-${o.id}`, String(i + 1), app ? `${i + 1}  ${plainLabel(o.label)}` : plainLabel(o.label), chosen, o.note ? plainLabel(o.note) : undefined),
         // The desktop app draws only a Button's label, not its inline children, so there the note sits under the button.
         app && o.note
           ? [<Text key={`note-${o.id}`} wrap="wrap" dimColor={!chosen} color={chosen ? PICKED.note : undefined}>{plainLabel(o.note)}</Text>]
@@ -619,30 +641,81 @@ export const register: Register = on => {
       )
     })
 
+    // The demo's picture test, under Teach me. The terminal has Image and no Svg; every other surface has Svg and no Image
+    // (a tree with an element its surface lacks is replaced whole by the host's own pane, so each surface gets only its own).
+    const experiment = s.demo ? (
+      <Box key="experiment" flexDirection="column" gap={1} borderStyle="dashed" borderColor="warning" paddingX={1} paddingY={app ? 1 : 0}>
+        <Text color="warning" bold>
+          {STR.experimentBanner}
+        </Text>
+        {vector ? (
+          <Box flexDirection="column" gap={1}>
+            <Text dimColor>{STR.experimentSvg}</Text>
+            <Svg alt={STR.experimentImageAlt} width={208} height={96} source={demoSvg()} />
+            <Text dimColor>{STR.experimentSvgPng}</Text>
+            <Svg alt={STR.experimentImageAlt} width={208} height={96} source={demoSvgWithPng()} />
+          </Box>
+        ) : app ? (
+          <Text dimColor wrap="wrap">
+            {STR.experimentNone}
+          </Text>
+        ) : (
+          <Box flexDirection="column">
+            <Text dimColor wrap="wrap">
+              {STR.experimentTerminal}
+            </Text>
+            <Image key="experiment-image" source={{ png: DEMO_PNG }} columns={26} rows={6} alt={STR.experimentImageAlt} />
+          </Box>
+        )}
+      </Box>
+    ) : null
+
     return frame(
       stem,
       <Box flexDirection="column" gap={app ? 2 : 0} marginTop={app ? 1 : 0}>
         {options}
-        {card(
-          'other',
-          s.draft.other,
-          answer('other', 'opt-other', 'o', STR.other, s.draft.other),
-          [
-            s.draft.other ? (
-              <Box key="other-box" paddingLeft={3}>
+        {wholeCard ? (
+          // The header row is the pressable region; the frame and the text box are ours. Three lines tall, saved on every keystroke,
+          // so the button the field draws beside itself has nothing to do: its label is left empty to try to hide it.
+          <Box key="card-other" flexDirection="column" borderStyle={s.draft.other ? 'bold' : 'single'} borderColor={s.draft.other ? BRAND : 'inactive'}>
+            <Client key="other-head" module="./card.tsx" width="100%" props={cardProps('other', { label: STR.other, chosen: s.draft.other, bare: true })} />
+            {s.draft.other ? (
+              <Box key="other-box" paddingX={2} paddingBottom={1}>
                 <Input
                   key="other-text"
                   autoFocus
+                  rows={3}
                   placeholder={STR.otherPlaceholder}
                   value={s.draft.text}
-                  submitLabel="keep"
+                  submitLabel=""
                   onInput={(value: string) => (locked ? undefined : typeOther($, value))}
                   onSubmit={() => (locked ? undefined : keepOther($))}
                 />
               </Box>
-            ) : null,
-          ],
-          s.draft.other,
+            ) : null}
+          </Box>
+        ) : (
+          card(
+            'other',
+            s.draft.other,
+            answer('other', 'opt-other', 'o', STR.other, s.draft.other),
+            [
+              s.draft.other ? (
+                <Box key="other-box" paddingLeft={3}>
+                  <Input
+                    key="other-text"
+                    autoFocus
+                    placeholder={STR.otherPlaceholder}
+                    value={s.draft.text}
+                    submitLabel="keep"
+                    onInput={(value: string) => (locked ? undefined : typeOther($, value))}
+                    onSubmit={() => (locked ? undefined : keepOther($))}
+                  />
+                </Box>
+              ) : null,
+            ],
+            s.draft.other,
+          )
         )}
       </Box>,
       locked ? <Text dimColor>{STR.grading}</Text> : null,
@@ -660,7 +733,16 @@ export const register: Register = on => {
       // Teach me has a row of its own, under Submit. A Button takes no fill, and a desktop draws a plain
       // one without its grey chrome: the orange box is the button's body, and as a column it
       // stretches the Button across its width, so all but the thin padding is pressable.
-      locked ? null : app ? (
+      locked ? null : desktop ? (
+        // A compact pill whose whole body is pressable (pill.tsx), sized to its text instead of the pane's width.
+        <Box key="teach-row" flexDirection="row">
+          <Client
+            key="teach-client"
+            module="./pill.tsx"
+            props={{ id: 'teach', label: STR.teach, locked, fill: TEACH.bg, hoverFill: TEACH.hover, text: TEACH.text } satisfies PillProps}
+          />
+        </Box>
+      ) : app ? (
         <Box key="teach-box" flexDirection="column" backgroundColor={TEACH.bg} borderStyle="round" borderColor={TEACH.bg} paddingX={1} paddingY={0.5}>
           <Button key="teach" plain label={STR.teach} onPress={() => teach($)}>
             <Text color={TEACH.text}>{STR.teach}</Text>
@@ -673,6 +755,7 @@ export const register: Register = on => {
           </Button>
         </Box>
       ),
+      experiment,
     )
   })
 }
@@ -683,12 +766,14 @@ async function setStyle($: EngineInterface, style: 'button' | 'client'): Promise
 }
 
 /** Selecting an option records a draft and nothing else: it never submits, grades or skips. */
-async function pick($: EngineInterface, id: string, via = 'button'): Promise<void> {
+async function pick($: EngineInterface, id: string, via = 'button', since?: number): Promise<void> {
   await update($, quiz, (s: PanelState) =>
     s.step === 'awaiting' || s.step === 'error'
-      ? { ...s, draft: { ...s.draft, picked: id, other: false }, message: null, ...(s.demo ? { demo: { ...s.demo, last: demoLast(`${id} picked (${via})`) } } : {}) }
+      ? { ...s, draft: { ...s.draft, picked: id, other: false }, message: null, ...(s.demo ? { demo: { ...s.demo, last: demoLast(`${id} picked (${via}${since === undefined ? '' : `, ${Date.now() - since} ms in the mod`})`) } } : {}) }
       : s,
   )
+  // A whole card has no Button to focus, so asking the host to find `opt-…` would only make the pick wait.
+  if (via !== 'button') return
   try {
     // The host's focus mark follows the pick, so the highlighted answer is the chosen one even after a hotkey.
     await $.ui.focus({ requestId: PANE, key: `opt-${id}` })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eklavya",
-  "version": "1.87.0",
+  "version": "1.89.0",
   "description": "Learn while your agent works — local knowledge graph, spaced repetition, and quiz gating for agent-assisted development.",
   "license": "MIT",
   "repository": {