shot-view

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const below = await next(e)
    if (!hint) return below
    const unread = unreadOf(await read($, shots))
    const live = await present($, unread)
    drawn = keyOf(live)
    // 提示的那张不在了就换成还在的最新一张；一张都不在了就不再提示
    if (!live.has(hint)) hint = unread.find(s => live.has(s.path))?.path ?? null
    if (!hint || e.props.hasSurvey) return below
    const { Box, Text } = $.ui.resolve(e)
    const line = bandLine(basename(hint), live.size, e.props.bodyColumns)
    return (
      <Box flexDirection="column">
        <Box flexDirection="row" gap={1}>
          <Box flexShrink={0}>
            <Text color="ide" bold>
              {BAND_LABEL}
            </Text>
          </Box>
          <Text wrap="truncate-end">{line.head}</Text>
          {line.tail !== '' && (
            <Text dimColor wrap="truncate-end">
              {line.tail}
            </Text>
          )}
        </Box>
        {below}
      </Box>
    )
  })

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    const list = await read($, shots)
    const unreadAll = unreadOf(list)
    const live = await present($, unreadAll)
    drawn = keyOf(live)
    const unread = unreadAll.filter(s => live.has(s.path))
    const gone = unreadAll.length - unread.length
    const readCount = list.length - unreadAll.length
    const at = Math.min(await read($, index), Math.max(0, unread.length - 1))
    const shot = unread[at]
    const undo = (
      <Button key="undo" plain hotkey="u" onPress={() => void undoRead($)}>
        撤销已读
      </Button>
    )
    const closeHint = <Text dimColor>Esc 或 ctrl+x s 关闭（面板开着时 Esc 只关面板，不会中断 Claude）</Text>
    const goneNote = gone > 0 && <Text dimColor>另有 {gone} 张截图的文件已不在（被删除或移走），不再显示</Text>
    if (list.length === 0) {
      return (
        <Box paddingX={1}>
          <Text dimColor>还没有截图。Claude 截图或查看 PNG 后会出现在这里。</Text>
        </Box>
      )
    }
    if (!shot) {
      return (
        <Box flexDirection="column" paddingX={1}>
          <Box flexDirection="row" gap={1}>
            <Text color="success">✓</Text>
            <Text bold>{readCount === 0 ? '没有可看的截图' : '截图都看完了'}</Text>
            {readCount > 0 && <Text dimColor>已读 {readCount} 张</Text>}
          </Box>
          {goneNote}
          {readCount > 0 && undo}
          {closeHint}
        </Box>
      )
    }

    const visibleRows = Math.min(e.props.scroll.bodyRows, e.viewport?.rows ?? e.props.scroll.bodyRows)
    const alt = `${basename(shot.path)}（终端没有开启图片显示，轻按 o 用快速查看打开）`
    const pictureOf = (size: { columns: number; rows: number }) =>
      e.surface === 'terminal' ? (
        (() => {
          const { Image } = $.ui.resolve(e)
          return (
            <Image
              key="shot"
              source={{ file: shot.path, format: 'png', generation: live.get(shot.path) ?? 0 }}
              columns={size.columns}
              rows={size.rows}
              alt={alt}
            />
          )
        })()
      ) : (
        <Text dimColor>{alt}</Text>
      )

    // 按住 o 的放大视图：只留图和一行提示，图铺满面板。
    // 提示行本身就是绑着 o 的按键：按住时终端补发的重复按键要有地方接，否则会被当成已经松开
    if (isPeeking) {
      return (
        <Box flexDirection="column">
          {pictureOf(fit(shot, Math.max(10, e.props.bodyColumns), Math.max(4, visibleRows - 1)))}
          <Button key="peek" plain hotkey="o" dimColor onPress={() => void pressPeek($, shot.path)}>
            {`放大查看 ${basename(shot.path)} · 松开 o 回到列表`}
          </Button>
        </Box>
      )
    }

    // 普通视图按面板真正能显示的高度缩图：标题、路径、两排按键和两行说明约占 8 行，图片太高会把按键挤出去
    const picture = pictureOf(fit(shot, Math.max(10, e.props.bodyColumns - 2), Math.max(4, visibleRows - 8 - (gone > 0 ? 1 : 0))))

    return (
      <Box flexDirection="column" paddingX={1}>
        <Box flexDirection="row" gap={1}>
          <Text bold>{basename(shot.path)}</Text>
          <Text color="suggestion">
            未读 {at + 1}/{unread.length}
          </Text>
          {readCount > 0 && <Text dimColor>已读 {readCount}</Text>}
          <Text dimColor>
            {ago(shot.at)} · {shot.via} · {shot.width}×{shot.height}
          </Text>
        </Box>
        <Text dimColor wrap="wrap">
          {shot.path}
        </Text>
        {goneNote}
        {picture}
        <Box flexDirection="row" gap={2}>
          <Button key="next" plain hotkey="n" onPress={() => void update($, index, n => Math.min(n + 1, unread.length - 1))}>
            下一张
          </Button>
          <Button key="prev" plain hotkey="p" onPress={() => void update($, index, n => Math.max(n - 1, 0))}>
            上一张
          </Button>
          <Button key="read" plain hotkey="r" onPress={() => void markRead($, shot.path)}>
            标为已读
          </Button>
          {readCount > 0 && undo}
        </Box>
        <Box flexDirection="row" gap={2}>
          <Button key="peek" plain hotkey="o" onPress={() => void pressPeek($, shot.path)}>
            按住放大 · 轻按快速查看
          </Button>
          <Button key="reveal" plain hotkey="f" onPress={() => void $.process.run(['open', '-R', shot.path])}>
            Finder
          </Button>
          <Button key="copy" plain hotkey="y" onPress={press => void $.ui.copy({ text: shot.path, surface: press.surface })}>
            复制路径
          </Button>
        </Box>
        <Text dimColor>从最新一张开始，n 往后看更早的；看过、不需要再看了就按 r，它不会再出现，只是翻过不算已读</Text>
        {closeHint}
      </Box>
    )
  })