img-view

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const ui = $.ui.resolve(e)
    const { Box, Text, Button } = ui
    const list = await read($, pictures)
    const at = Math.min(Math.max(await read($, selected), 0), list.length - 1)
    const picture = list[at]
    if (!picture) return <Text dimColor>No pictures yet. /img path shows one; AIGUI's drawings and image files Claude reads appear here.</Text>

    const name = picture.path.split('/').pop() ?? picture.path
    const alt = `${picture.label} — ${name}`
    const go = (step: number) => () => update($, selected, () => Math.min(Math.max(at + step, 0), list.length - 1))
    // The pane's own body, not the terminal: two rows go to the title line and the buttons.
    const room = {
      columns: Math.max(10, e.props.bodyColumns ?? (e.viewport?.columns ?? 80) - 2),
      rows: Math.max(4, (e.props.scroll?.bodyRows ?? (e.viewport?.rows ?? 30) - 4) - 2),
    }

    let body
    try {
      const size = picture.width && picture.height ? { width: picture.width, height: picture.height } : await sizeOf($, picture.path)
      if (!size) throw new Error('unknown size')
      const box = fit(size.width, size.height, room)
      if (e.surface === 'terminal') {
        const { Image, Raster } = $.ui.resolve(e as typeof e & { surface: 'terminal' })
        if ((await hasPixels($)) && /\.png$/i.test(picture.path)) {
          body = <Image key="picture" source={{ png: await pngOf($, picture.path) }} columns={box.columns} rows={box.rows} alt={alt} />
        } else {
          const drawn = await blocksOf($, picture.path, box.columns, box.rows)
          body = <Raster key="picture" cells={drawn.cells} columns={drawn.columns} rows={drawn.rows} />
        }
      } else if ('Svg' in ui && /\.(png|jpe?g|gif|webp)$/i.test(picture.path)) {
        const { Svg } = ui as typeof ui & { Svg: (props: { source: string; alt: string }) => unknown }
        const kind = /\.png$/i.test(picture.path) ? 'png' : /\.gif$/i.test(picture.path) ? 'gif' : /\.webp$/i.test(picture.path) ? 'webp' : 'jpeg'
        const data = await pngOf($, picture.path)
        const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${size.width} ${size.height}"><image width="${size.width}" height="${size.height}" href="data:image/${kind};base64,${data}"/></svg>`
        body = <Svg source={svg} alt={alt} />
      } else {
        body = <Text dimColor>{alt}</Text>
      }
    } catch (error) {
      body = <Text dimColor>{name}: {(await $.fs.exists(picture.path)) ? String((error as Error).message) : 'no longer on disk'}.</Text>
    }

    return (
      <Box flexDirection="column">
        <Box>
          <Text bold>{picture.label}</Text>
          <Text dimColor> {at + 1}/{list.length}  {name}</Text>
          {picture.issues > 0 && <Text color="yellow">  {picture.issues} problem{picture.issues === 1 ? '' : 's'} found</Text>}
        </Box>
        {body}
        <Box>
          <Button key="prev" hotkey="p" label="Previous" plain onPress={go(-1)} />
          <Text> </Text>
          <Button key="next" hotkey="n" label="Next" plain onPress={go(1)} />
          <Text> </Text>
          <Button key="open" hotkey="o" label="Open" plain onPress={() => $.process.run(['open', picture.path])} />
        </Box>
      </Box>
    )
  })