show-and-tell

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey) return next(e)
    const ids = await read($, fresh)
    const list = await read($, shots)
    const showing = ids.map(id => list.find(s => s.id === id)).filter((s): s is Shot => s !== undefined)
    if (showing.length === 0) return next(e)
    const below = await next(e)
    const width = e.props.bodyColumns - MARKER
    const fits = Math.max(1, Math.floor((width - 22) / (THUMB_COLUMNS + 2)))
    const thumbRows = e.props.maxRows - 2
    if (e.surface === 'terminal' && thumbRows >= 3) {
      const { Box, Text, Button, Image } = $.ui.resolve(e)
      return (
        <Box flexDirection="column">
          {below}
          <Box flexDirection="row" columnGap={2} width={width}>
            {showing.slice(0, fits).map(shot => (
              <Box flexDirection="column" width={THUMB_COLUMNS} flexShrink={0}>
                {/* The label is under it, so where the terminal draws no pixels the alt says the size. */}
                {shot.thumb !== null && (
                  <Image
                    key={`band-${shot.id}`}
                    source={{ file: shot.thumb, format: 'png', generation: shot.at }}
                    columns={THUMB_COLUMNS}
                    rows={rowsFor(shot.width, shot.height, THUMB_COLUMNS, thumbRows)}
                    alt={shot.width !== null && shot.height !== null ? `${shot.width}×${shot.height}` : 'picture'}
                  />
                )}
                <Text dimColor wrap="truncate-end">
                  {ICON[shot.source]} {shot.label}
                </Text>
              </Box>
            ))}
            <Box flexDirection="column" flexShrink={0}>
              {showing.length > fits && <Text dimColor>+{showing.length - fits} more</Text>}
              <Button key="band-gallery" plain label="Gallery" onPress={() => void openGallery($)} />
              <Button key="band-dismiss" plain dimColor label="Dismiss" onPress={() => void $.state.set(FRESH, [])} />
            </Box>
          </Box>
        </Box>
      )
    }
    const { Box, Text, Button } = $.ui.resolve(e)
    const [first] = showing
    return (
      <Box flexDirection="column">
        {below}
        <Box flexDirection="row" flexWrap="wrap" columnGap={2} width={width}>
          <Box flexShrink={1}>
            <Text>
              📸 {first === undefined ? '' : `${ICON[first.source]} ${first.label}${sizeText(first)}`}
              {showing.length > 1 ? ` and ${showing.length - 1} more` : ''}
            </Text>
          </Box>
          <Box flexShrink={0}>
            <Button key="band-gallery" plain label="Gallery" onPress={() => void openGallery($)} />
          </Box>
        </Box>
      </Box>
    )
  })

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const all = await read($, shots)
    const which = await read($, filter)
    const pickedId = await read($, picked)
    const list = all.filter(s => which === 'all' || (which === 'you' ? s.source === 'you' : s.source !== 'you'))
    const current = list.find(s => s.id === pickedId) ?? list[0]
    const { bodyColumns } = e.props
    const bodyRows = e.props.scroll.bodyRows
    const isBeside = bodyColumns >= SIDE_BY_SIDE
    // Every row is counted: an inline pane may get far fewer than it asked for, and what does not
    // fit is cut off. The header (with the filters) takes 2, the footer 2 where there is room.
    const hasFooter = bodyRows >= 14
    const room = Math.max(3, bodyRows - 2 - (hasFooter ? 2 : 0))
    // Beside the picture: the details (3 rows and a gap), the list, and a "+N more" line if needed.
    const listFits = (rows: number) => (list.length <= rows ? list.length : Math.max(1, rows - 1))
    const listRows = isBeside ? listFits(room - 4) : listFits(Math.min(3, Math.max(1, room - 7)))
    const box = fitPicture(
      current?.width ?? null,
      current?.height ?? null,
      isBeside ? Math.min(PREVIEW_COLUMNS, Math.floor(bodyColumns * 0.45)) : Math.min(bodyColumns - 2, PREVIEW_COLUMNS),
      isBeside ? room : room - 4 - listRows - (list.length > listRows ? 1 : 0),
    )
    const hasPicture = current?.thumb != null && e.surface === 'terminal' && box.rows >= 3
    const tabs = (['all', 'you', 'claude'] as const).map(f => ({ f, label: f === 'all' ? 'All' : f === 'you' ? 'You' : 'Claude', hotkey: f[0] }))
    const { Box, Text, Button } = $.ui.resolve(e)
    const preview =
      hasPicture && current?.thumb != null && e.surface === 'terminal'
        ? (() => {
            const { Image } = $.ui.resolve(e)
            return (
              <Box flexShrink={0} marginRight={isBeside ? 2 : 0}>
                <Image
                  key="preview"
                  source={{ file: current.thumb, format: 'png', generation: current.at }}
                  columns={box.columns}
                  rows={box.rows}
                  alt="This terminal shows no pictures; o opens it"
                />
              </Box>
            )
          })()
        : null
    const details = current !== undefined && (
      <Box flexDirection="column" marginBottom={1}>
        <Text bold wrap="truncate-end">
          {ICON[current.source]} {current.label}
          {sizeText(current)}
        </Text>
        <Text dimColor wrap="truncate-end">
          {SOURCE_WORD[current.source]} at {clockTime(current.at)} · {current.path}
        </Text>
        <Box flexDirection="row" flexWrap="wrap" columnGap={2}>
          <Button key="act-open" hotkey="o" plain label="Open" autoFocus onPress={() => void openFile($, current.path)} />
          <Button key="act-insert" hotkey="i" plain label="Insert @path" onPress={() => void insertPath($, current.path)} />
          <Button key="act-copy" hotkey="p" plain label="Copy path" onPress={press => void copyPath($, current.path, press.surface)} />
          <Button key="act-folder" hotkey="f" plain label="Show in folder" onPress={() => void showInFolder($, current.path)} />
        </Box>
      </Box>
    )
    const picks = list.slice(0, listRows).map(shot => (
      <Button
        key={`pick-${shot.id}`}
        plain
        dimColor={shot.id !== current?.id}
        label={`${shot.id === current?.id ? '›' : ' '} ${clockTime(shot.at)}  ${ICON[shot.source]} ${shot.label}${sizeText(shot)}`}
        onPress={() => void $.state.set(PICKED, shot.id)}
      />
    ))
    const more = list.length > picks.length ? <Text dimColor>  +{list.length - picks.length} more</Text> : null
    return (
      <Box flexDirection="column">
        <Box flexDirection="row" flexWrap="wrap" columnGap={3} marginBottom={1}>
          <Box flexDirection="row">
            <Text bold>📸 Show & Tell</Text>
            <Text dimColor>
              {' '}
              · {all.length} image{all.length === 1 ? '' : 's'} this session
            </Text>
          </Box>
          <Box flexDirection="row" columnGap={2}>
            {tabs.map(t => (
              <Button key={`tab-${t.f}`} hotkey={t.hotkey} plain dimColor={t.f !== which} label={t.label} onPress={() => void $.state.set(FILTER, t.f)} />
            ))}
          </Box>
        </Box>
        {current === undefined && <Text dimColor>Nothing yet. Paste an image with ctrl+v, or let Claude read or make one.</Text>}
        {current !== undefined && isBeside && (
          <Box flexDirection="row">
            {preview}
            <Box flexDirection="column" flexGrow={1} flexShrink={1}>
              {details}
              {picks}
              {more}
            </Box>
          </Box>
        )}
        {current !== undefined && !isBeside && (
          <Box flexDirection="column">
            {preview}
            {details}
            {picks}
            {more}
          </Box>
        )}
        {hasFooter && (
          <Box marginTop={1}>
            <Text dimColor>Kept {KEEP_DAYS} days · tab walks the list · esc closes</Text>
          </Box>
        )}
      </Box>
    )
  })