move-coach

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const els = $.ui.resolve(e) as any
    const { Box, Text, Button } = els
    const v = await read($, view)
    const camList = await read($, cameras)
    const meta = TESTS[v.test]
    const isTerminal = e.surface === 'terminal'

    const pictures = []
    for (const img of meta.images.slice(0, isTerminal ? 2 : 3)) {
      if (isTerminal && v.cells) {
        // inside tmux: the pre-rendered half-block version of the illustration
        let art = imageCache.get(`${img.file}.cells`)
        if (!art) {
          const path = await bookFile($, `${img.file}.cells.json`)
          if (!path) continue
          art = await $.fs.read(path)
          imageCache.set(`${img.file}.cells`, art)
        }
        const { cols, rows, cells } = JSON.parse(art) as { cols: number; rows: number; cells: string }
        pictures.push(
          <Box flexDirection="column" width={32}>
            <els.Raster key={`book-${img.file}`} columns={cols} rows={rows} cells={cells} />
            <Text dimColor>{img.caption}</Text>
          </Box>,
        )
      } else if (isTerminal) {
        const path = await bookFile($, `${img.file}.png`)
        if (!path) continue
        pictures.push(
          <Box flexDirection="column" width={32}>
            <els.Image source={{ file: path, format: 'png' }} columns={30} rows={14} alt={img.caption} />
            <Text dimColor>{img.caption}</Text>
          </Box>,
        )
      } else if (els.Svg) {
        let b64 = imageCache.get(img.file)
        if (!b64) {
          const path = await bookFile($, `${img.file}.jpg`)
          if (!path) continue
          const bytes = await $.fs.read(path, { as: 'bytes' })
          b64 = (bytes as { base64: string }).base64
          imageCache.set(img.file, b64)
        }
        pictures.push(
          <Box flexDirection="column" width={30}>
            <els.Svg source={bookSvg(b64)} alt={img.caption} width={200} height={200} />
            <Text dimColor>{img.caption}</Text>
          </Box>,
        )
      }
    }

    let camera
    if (isTerminal) {
      camera = v.cells ? (
        <els.Raster key="cam" columns={v.cols} rows={v.rows} cells={v.cells} />
      ) : v.png ? (
        <els.Image key="cam" source={{ file: v.png, format: 'png', generation: v.gen }} columns={64} rows={20} alt="camera with pose landmarks" />
      ) : (
        <Text dimColor>{v.isRunning ? 'waiting for the camera…' : 'camera off'}</Text>
      )
    } else if (els.Svg) {
      camera = <els.Svg source={cameraSvg(v)} alt="camera with pose landmarks" width={480} />
    } else {
      camera = <Text dimColor>This surface can't draw the camera.</Text>
    }

    const metrics = Object.entries(v.metrics)
      .map(([k, x]) => `${k}: ${typeof x === 'object' ? JSON.stringify(x) : String(x)}`)
      .join('  ·  ')

    const ev = await read($, eeg)
    const board = await read($, scores)
    const who = await read($, person)
    const total = totalOf(board)
    let last: { points?: number; score_label?: string; explanation?: string; stopped?: boolean } = {}
    try {
      last = v.result ? JSON.parse(v.result) : {}
    } catch {}

    return (
      <Box flexDirection="column">
        <Box borderStyle="round" borderColor="green" paddingX={1} flexDirection="column">
          <Text bold color="green">
            MOVE SCORE{who ? ` · ${who}` : ''}  {total.points} / {total.max}   ({total.done} of {SCORED.length} tests)
          </Text>
          {SCORED.map(t => (
            <Text dimColor={board[t.key] === undefined}>
              {t.short.padEnd(13)} {board[t.key] ? `${bar(board[t.key]!.points)} ${String(board[t.key]!.points).padStart(2)}/10  ${board[t.key]!.label}` : '▱▱▱▱▱▱▱▱▱▱  –  not tested'}
            </Text>
          ))}
        </Box>
        {!v.isRunning && typeof last.points === 'number' && (
          <Box borderStyle="double" borderColor="yellow" paddingX={1} flexDirection="column">
            <Text bold color="yellow">
              ✓ {meta.title}: {last.score_label} → {last.points}/10 points
            </Text>
            {last.explanation && <Text>How it was scored: {last.explanation}</Text>}
          </Box>
        )}
        {v.step && v.total ? (
          <Text bold color="cyan">
            Test {v.step} of {v.total}: {v.title}{v.nextTitle ? `  ·  next: ${v.nextTitle}` : '  ·  last test'}
          </Text>
        ) : (
          <Text bold>{v.title}</Text>
        )}
        {v.instruction && <Text>{v.instruction}</Text>}
        {v.isRunning && v.cue && <Text color="green">🗣 {v.cue}</Text>}
        <Box flexDirection="row" gap={2}>
          {camera}
          {pictures.length > 0 && <Box flexDirection="column">{pictures}</Box>}
        </Box>
        {metrics && <Text dimColor>{metrics}</Text>}
        {(ev.isRunning || ev.error || ev.raw.length > 0) && (
          <Box flexDirection="column">
            <Text bold color="magenta">
              🧠 Brain waves{ev.device ? ` · ${ev.device}` : ''}{ev.status ? `  ·  ${ev.status}` : ''}
            </Text>
            {ev.raw.length > 0 &&
              (!isTerminal && els.Svg ? (
                <els.Svg source={eegSvg(ev)} alt="EEG traces per channel and relative band power" width={480} />
              ) : (
                <Box flexDirection="column">
                  {ev.channels.map((c, i) => (
                    <Text>
                      {c.padEnd(5)} {sparkline(ev.raw[i] ?? [])} {ev.quality[i] ?? ''}
                    </Text>
                  ))}
                  <Text>{BAND_ORDER.map(b => `${b} ${Math.round((ev.bands[b] ?? 0) * 100)}%`).join('  ')}</Text>
                </Box>
              ))}
            {ev.error && <Text color="red">{ev.error}</Text>}
            {ev.baseline && <Text color={ev.baseline.phase === 'done' ? 'green' : ev.baseline.phase === 'cancelled' ? 'yellow' : 'cyan'}>{baselineLine(ev.baseline)}</Text>}
          </Box>
        )}
        <Text dimColor>
          {v.isRunning ? `● ${v.phase} · ${v.elapsed}s` : v.test === 'free' ? '○ camera off' : v.phase === 'done' ? (last.stopped ? '■ stopped. The camera is off; nothing was scored.' : '✓ done') : '○ idle'}
          {v.status ? `  ·  ${v.status}` : ''}
        </Text>
        {v.error && <Text color="red">{v.error}</Text>}
        {!v.isRunning && (last as { confirm?: string[] }).confirm?.length ? (
          <Box flexDirection="column">
            <Text bold>Questions to confirm the score (answer in the chat):</Text>
            {(last as { confirm?: string[] }).confirm!.map(q => (
              <Text>• {q}</Text>
            ))}
          </Box>
        ) : null}
        <Box flexDirection="row" gap={2}>
          {els.Select && camList.length > 0 && (
            <els.Select
              // keyed on the device list so a renumbered list remounts the picker instead of keeping stale labels
              key={`camera:${camList.map(c => c.name).join('|')}`}
              label="Camera"
              options={camList.map(c => ({ value: String(c.index), label: c.name }))}
              value={String(chosenCamera ?? 0)}
              onSelect={async (value: string) => pickCamera($, Number(value))}
            />