data-peek

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    const v = await read($, view)
    if (v === null) {
      return (
        <Box flexDirection="column">
          <Text dimColor>Nothing peeked yet. /peek data.csv opens a file here; Claude's peeks show here too.</Text>
          <Box marginTop={1}>
            <Button key="close" hotkey="x" role="dismiss" label="Close" onPress={() => void $.ui.close({ id: PANE })} />
          </Box>
        </Box>
      )
    }
    // shade blocks and × where the terminal can't draw eighth blocks and ✗ (glyph mode safe)
    const isSafe = (e.surface === 'terminal' ? glyphMode : 'full') === 'safe'
    const width = Math.max(40, e.props.bodyColumns - 2)
    const nameW = Math.min(18, Math.max(6, ...v.columns.map(c => c.name.length)))
    const typeW = Math.min(14, Math.max(4, ...v.columns.map(c => c.type.length)))

    // The rows: as many columns as fit, each as wide as its widest cell (up to 16).
    const widths: number[] = []
    let used = String(Math.max(1, ...v.rows.map(r => r.n))).length
    for (let i = 0; i < v.rowHeader.length; i++) {
      const w = Math.min(16, Math.max((v.rowHeader[i] ?? '').length, ...v.rows.map(r => (r.cells[i] ?? '').length), 1))
      if (used + 3 + w > width) break
      widths.push(w)
      used += 3 + w
    }
    const numW = String(Math.max(1, ...v.rows.map(r => r.n))).length
    const line = (n: string, cells: readonly string[]) => [n.padStart(numW), ...widths.map((w, i) => clip(cells[i] ?? '', w).padEnd(w))].join(' │ ')
    const hiddenCols = v.rowHeader.length - widths.length

    let field = null
    if (e.surface !== 'mobile') {
      const { Input } = $.ui.resolve(e)
      field = <Input key="where" label="Filter " placeholder='status == "error" and ms > 500' value={v.where} onSubmit={value => void loadPane($, v.file, v.mode, value.trim())} />
    }

    return (
      <Box flexDirection="column">
        <Text wrap="wrap">
          <Text bold>{v.name}</Text>
          <Text dimColor>{v.header.slice(v.name.length)}</Text>
        </Text>
        {v.isLoading && <Text color="cyan">Reading…</Text>}
        {v.error !== null && <Text color="red" wrap="wrap">{isSafe ? '×' : '✗'} {v.error}</Text>}
        <Box flexDirection="column" marginTop={1}>
          <Text dimColor>{`${'column'.padEnd(nameW)}  ${'type'.padEnd(typeW)}  nulls  summary`}</Text>
          {v.columns.map(c => {
            const spark = c.hist.length > 0 ? sparkline(c.hist, isSafe) : ''
            return (
              <Text key={`c:${c.name}`} wrap="truncate-end">
                <Text bold>{clip(c.name, nameW).padEnd(nameW)}</Text>
                {`  ${clip(c.type, typeW).padEnd(typeW)}  ${c.nulls.padStart(5)}  `}
                {spark !== '' && <Text color="cyan">{`${spark} `}</Text>}
                <Text dimColor>{c.summary}</Text>
              </Text>
            )
          })}
          {v.moreColumns > 0 && <Text dimColor>+{fmtCount(v.moreColumns)} more columns</Text>}
        </Box>
        <Box marginTop={1} gap={1}>
          <Button key="head" hotkey="h" label="Head" variant={v.mode === 'head' ? 'primary' : 'secondary'} onPress={() => void loadPane($, v.file, 'head', v.where)} />
          <Button key="tail" hotkey="t" label="Tail" variant={v.mode === 'tail' ? 'primary' : 'secondary'} onPress={() => void loadPane($, v.file, 'tail', v.where)} />
          <Button key="sample" hotkey="s" label="Sample" variant={v.mode === 'sample' ? 'primary' : 'secondary'} onPress={() => void loadPane($, v.file, 'sample', v.where)} />
          <Button key="reload" hotkey="r" label="Reload" onPress={() => void loadPane($, v.file, v.mode, v.where)} />
          <Button key="close" hotkey="x" role="dismiss" label="Close" onPress={() => void $.ui.close({ id: PANE })} />
        </Box>
        {field !== null && <Box marginTop={1}>{field}</Box>}
        <Box flexDirection="column" marginTop={1}>
          <Text dimColor>
            {v.mode === 'head' ? 'First' : v.mode === 'tail' ? 'Last' : 'Sampled'} {v.rows.length} rows
            {v.matched !== null ? ` of ${fmtCount(v.matched)} matching` : ''}
            {hiddenCols > 0 ? ` · ${hiddenCols} more columns to the right` : ''}
          </Text>
          {widths.length > 0 && (
            <Text bold wrap="truncate-end">
              {line('#', v.rowHeader)}
            </Text>
          )}
          {v.rows.map(r => (
            <Text key={`r:${r.n}`} wrap="truncate-end">
              {line(String(r.n), r.cells)}
            </Text>
          ))}
        </Box>
      </Box>
    )
  })