touch-map

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (!(await read($, minimized))) return next(e)
    const { Box, Text, Button } = $.ui.resolve(e)
    const all: Record<string, Touch> = await read($, touches)
    const touched = Object.keys(all).length
    return (
      <Box flexDirection="row" gap={1}>
        <Text dimColor>Touch map</Text>
        <Text>
          {shareBar(counts(all), files.size, BAR).map(s => (
            <Text color={s.color}>{s.text}</Text>
          ))}
        </Text>
        <Text>
          <Text bold>{fmt(touched)}</Text>
          <Text dimColor>{`/${fmt(files.size)}`}</Text>
        </Text>
        {/* 開く処理は下の ui.press のフックで行う。ここで描いたときの $ で開くと、人の操作として扱われない */}
        <Button key="open" label="open" onPress={() => undefined} />
      </Box>
    )
  })

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const started = await $.clock.now()
    const ui = $.ui.resolve(e)
    const { Box, Text, Button } = ui
    const Input = 'Input' in ui ? ui.Input : undefined
    const Raster = 'Raster' in ui ? ui.Raster : undefined
    const all: Record<string, Touch> = await read($, touches)
    const seg: Segment = await read($, segment)
    const showMap: boolean = await read($, mapAtom)
    const loaded: Loaded = await read($, loadedAtom)
    const now: Now | null = await read($, nowAtom)
    const rows = toRows(all, await read($, folds), now)
    const c = counts(all)
    const gone = goneCount(all)
    const auto = Object.keys(loaded)
    const cols = e.props.bodyColumns ?? e.viewport?.columns ?? 60
    // ペインの本体は高さを超えると Claude Code がスクロールさせるので、行は全部渡す（重くならないよう上限だけ置く）
    const shown = rows.slice(0, 400)
    const header = 3 + (now ? 1 : 0) + (seg.note !== '' ? 1 : 0) + (Object.keys(all).length === 0 ? 1 : 0)
    paneRows = Math.max(0, (e.props.scroll?.bodyRows ?? 0) - header)
    const legend = [
      ...DEEP_FIRST.filter(i => (c[i] ?? 0) > 0).map(i => ({ text: `■${LEVELS[i]} ${fmt(c[i] ?? 0)}`, color: COLORS[i] as string })),
      ...(gone > 0 ? [{ text: `✕deleted ${fmt(gone)}`, color: GONE }] : []),
      ...(auto.length > 0 ? [{ text: `◆auto ${auto.length}`, color: AUTO }] : []),
    ]
    const tree = (
      <Box flexDirection="column">
        {shown.map(row => {
          const nameColor =
            row.kind === 'dir' ? (row.stat ? undefined : TRACK)
              : row.kind === 'file' ? (row.touch?.d ? GONE : row.touch ? COLORS[row.touch.s] : TRACK)
                : TRACK
          const bar =
            row.kind === 'dir' ? shareBar(row.stat?.c ?? [], row.total, BAR)
              : row.kind === 'file' && row.touch ? fileBar(row.touch) : []
          const count =
            row.kind === 'dir' ? `${fmt(row.stat?.touched ?? 0)}/${fmt(row.total)}`
              : row.kind === 'file' && row.touch ? rangeOf(row.touch) : ''
          return (
            <Box key={`row:${row.kind}:${row.key}`} flexDirection="row" backgroundColor={row.kind === 'file' && row.now ? NOW_BG : undefined}>
              {/* 字下げと行頭の記号は、幅が足りなくても縮めない */}
              <Box flexShrink={0} flexDirection="row">
                <Text>{'  '.repeat(row.indent)}</Text>
                {row.kind === 'file' ? (
                  <Text> </Text>
                ) : (
                  <Button key={`go:${row.kind}:${row.key}`} plain dimColor label={glyphOf(row)} onPress={() => void toggle($, row.key, row.open)} />
                )}
                <Text> </Text>
              </Box>
              <Box flexGrow={1} flexShrink={1} minWidth={0}>
                <Text
                  wrap="truncate-end"
                  color={nameColor}
                  bold={row.kind === 'dir' && row.stat !== undefined || (row.kind === 'file' && row.now)}
                  strikethrough={row.kind === 'file' && row.touch?.d === true}
                >
                  {'text' in row ? row.text : row.name}
                </Text>
              </Box>
              {(row.kind === 'dir' || row.kind === 'file') && (
                <Box width={BAR + 1} flexShrink={0} justifyContent="flex-end">
                  <Text>
                    {bar.map(s => (
                      <Text color={s.color}>{s.text}</Text>
                    ))}
                  </Text>
                </Box>
              )}
              {(row.kind === 'dir' || row.kind === 'file') && (
                <Box width={10} flexShrink={0} justifyContent="flex-end">
                  <Text dimColor>{count}</Text>
                </Box>
              )}
            </Box>
          )
        })}
        {rows.length > shown.length && <Text dimColor>{`  … ${fmt(rows.length - shown.length)} more rows`}</Text>}
      </Box>
    )
    renderMs = (await $.clock.now()) - started

    return (
      <Box flexDirection="column">
        <Box flexDirection="row" gap={1} paddingRight={2}>
          <Box flexGrow={1} flexShrink={1} minWidth={0}>
            {Input ? (
              <Input key="label" placeholder="task name" value={seg.label} submitLabel="set" onSubmit={(value: string) => void setLabel($, value)} />
            ) : (
              <Text bold wrap="truncate-end">{seg.label}</Text>
            )}
          </Box>
          <Text dimColor>{elapsed(seg.startedAt, await $.clock.now())}</Text>
          <Button key="save" variant="primary" label="save" onPress={() => void save($, true)} />
          {/* 最小化はペイン右上の × でできるので、ボタンは置かない */}
          <Button key="discard" label="discard" onPress={() => void save($, false)} />
        </Box>
        {/* 狭いペインでは、項目の途中で切らずに項目の切れ目で折り返す */}
        <Box flexDirection="row" flexWrap="wrap" columnGap={2}>
          <Text>
            <Text bold>{fmt(Object.keys(all).length)}</Text>
            <Text dimColor>{`/${fmt(files.size)}`}</Text>
          </Text>
          {legend.map(l => (
            <Text color={l.color}>{l.text}</Text>
          ))}
          {fileNote.includes('cut') && <Text color={GONE}>{fileNote}</Text>}
        </Box>
        {now && (
          <Box flexDirection="row" gap={1}>
            <Text dimColor>now</Text>
            <Box flexShrink={1} minWidth={0}>
              <Text wrap="truncate-start" color={COLORS[now.level]}>{now.path}</Text>
            </Box>
          </Box>
        )}
        {seg.note !== '' && <Text dimColor wrap="truncate-end">{seg.note}</Text>}
        {Raster && showMap && files.size > 0 && (() => {
          // ペインの幅いっぱいまでマスを並べる（Raster の上限 512 桁まで）。ファイルが少なくて余るときは中央に寄せる
          const layout = layoutOf(Math.max(8, Math.min(256, Math.floor((cols + 1) / 2))))
          return (
            <Box flexDirection="row" justifyContent="center">
              <Raster key="map" columns={layout.width * 2 - 1} rows={MAP_ROWS} cells={mapCells(all, layout, started)} />
            </Box>
          )
        })()}
        <Text color={TRACK}>{'─'.repeat(Math.max(10, cols))}</Text>
        {Object.keys(all).length === 0 && <Text dimColor>nothing touched yet</Text>}
        {tree}
        {auto.length > 0 && <Text color={AUTO} wrap="truncate-end">{`◆ ${auto.join('  ')}`}</Text>}
      </Box>
    )
  })