eklavya 1.87.0 → 1.88.0

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

@@ -1,7 +1,7 @@
 {
   "name": "eklavya",
   "displayName": "Eklavya",
-  "version": "1.87.0",
+  "version": "1.88.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. 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. 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. 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`.
 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/model.ts

@@ -171,6 +171,11 @@ 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.)',
+  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',
+  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 +246,29 @@ 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 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/register.tsx

@@ -3,6 +3,7 @@ import type { EngineInterface, Register } from 'claude-code'
 
 import {
   BRAND,
+  DEMO_PNG,
   PICKED,
   TEACH,
   EMPTY,
@@ -17,6 +18,8 @@ import {
   answerWas,
   demoLast,
   demoResult,
+  demoSvg,
+  demoSvgWithPng,
   explainerBrief,
   codify,
   gradingRequest,
@@ -414,9 +417,10 @@ export const register: Register = on => {
   on('ui.message', { component: 'Pane' }, async ($, e, next) => {
     if (e.requestId === PANE) {
       try {
+        const started = Date.now()
         const id = (e.data as { pick?: unknown } | null)?.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 (typeof id === 'string' && s.question?.options.some(o => o.id === id)) await pick($, id, 'whole card', started)
       } catch {
         /* Fail open: the card stays as it was. */
       }
@@ -438,7 +442,7 @@ 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
 
@@ -619,6 +623,31 @@ 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>
+        {app ? (
+          <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>
+        ) : (
+          <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}>
@@ -673,6 +702,7 @@ export const register: Register = on => {
           </Button>
         </Box>
       ),
+      experiment,
     )
   })
 }
@@ -683,12 +713,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.88.0",
   "description": "Learn while your agent works — local knowledge graph, spaced repetition, and quiz gating for agent-assisted development.",
   "license": "MIT",
   "repository": {