proctree

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Button, Text } = $.ui.resolve(e)
    const snap = await read($, snapshot)
    const peak = await read($, peakRssKb)
    const paused = await read($, isPaused)
    const full = await read($, showFullCommand)

    const keys: Key[] = [
      {
        key: 'pause',
        hotkey: 'p',
        label: paused ? 'resume' : 'pause',
        onPress: () => update($, isPaused, value => !value),
      },
      {
        key: 'full',
        hotkey: 'f',
        label: full ? 'short commands' : 'full commands',
        onPress: () => update($, showFullCommand, value => !value),
      },
      {
        key: 'peak',
        hotkey: 'z',
        label: 'reset peak',
        onPress: async () => {
          const current = await read($, snapshot)
          await update($, peakRssKb, () => current?.totalRssKb ?? 0)
        },
      },
    ]
    const footer = (
      <Box flexDirection="row" flexWrap="wrap" columnGap={2}>
        {keys.map(k => (
          <Button key={k.key} plain dimColor hotkey={k.hotkey} label={k.label} onPress={k.onPress} />
        ))}
        <Button
          key="close"
          plain
          dimColor
          hotkey="c"
          role="dismiss"
          label="close"
          onPress={() => $.ui.close({ id: PANE })}
        />
        {!e.props.isFocused && <Text dimColor>{FOCUS_HINT}</Text>}
      </Box>
    )

    // On the terminal the footer sits on the pane's last rows and the tree
    // gets what is left; elsewhere the content flows and the footer follows.
    const bodyRows = e.props.scroll.bodyRows
    const isPinned = e.surface === 'terminal' && bodyRows > 0
    const footerRows = linesFor(
      [
        ...keys.map(k => `${k.hotkey}: ${k.label}`),
        'c: close',
        ...(e.props.isFocused ? [] : [FOCUS_HINT]),
      ],
      e.props.bodyColumns,
    )
    const frame = (...body: RenderElement[]) =>
      isPinned ? (
        <Box flexDirection="column" height={bodyRows}>
          <Box flexDirection="column" flexGrow={1} overflow="hidden">
            {body}
          </Box>
          {footer}
        </Box>
      ) : (
        <Box flexDirection="column">
          {body}
          <Box marginTop={1}>{footer}</Box>
        </Box>
      )

    if (!snap) {
      return frame(<Text dimColor>Sampling…</Text>)
    }

    if (snap.error !== null) {
      return frame(
        <Text color="red">{snap.error}</Text>,
        <Text dimColor>Run /proctree to try again.</Text>,
      )
    }

    const row = (node: ProcNode) => {
      const mb = node.rssKb / 1024
      const memColor = mb >= 1024 ? 'red' : mb >= 300 ? 'yellow' : undefined
      const isRoot = node.pid === snap.rootPid
      const command = full ? node.command : shortCommand(node.command)

      return (
        <Box key={`p${node.pid}`} flexDirection="row">
          <Box width={8} flexShrink={0}>
            <Text bold={isRoot}>{String(node.pid)}</Text>
          </Box>
          <Box width={11} flexShrink={0} justifyContent="flex-end" paddingRight={1}>
            <Text color={memColor} bold={isRoot}>{formatKb(node.rssKb)}</Text>
          </Box>
          <Box width={7} flexShrink={0} justifyContent="flex-end" paddingRight={1}>
            <Text dimColor={node.cpu < 1}>{node.cpu.toFixed(1)}%</Text>
          </Box>
          <Box width={12} flexShrink={0}>
            <Text dimColor>{node.etime}</Text>
          </Box>
          <Box flexGrow={1} flexShrink={1}>
            <Text wrap="truncate-end" bold={isRoot}>
              <Text dimColor>{node.prefix}</Text>
              {command}
            </Text>
          </Box>
        </Box>
      )
    }

    const count = snap.nodes.length
    // Summary, blank line and column headings take three rows above the tree.
    const room = isPinned ? Math.max(0, bodyRows - 3 - footerRows) : count
    const shown = count > room ? snap.nodes.slice(0, Math.max(0, room - 1)) : snap.nodes
    const hidden = count - shown.length

    return frame(
      <Text>
        <Text bold>{`${count} ${count === 1 ? 'process' : 'processes'}`}</Text>
        {`  ·  RAM ${formatKb(snap.totalRssKb)}  ·  peak ${formatKb(peak)}  ·  CPU ${snap.totalCpu.toFixed(1)}%${formatCores(snap.totalCpu, snap.cores)}`}
        <Text dimColor>{paused ? '  ·  paused' : `  ·  every ${seconds}s`}</Text>
      </Text>,
      <Box flexDirection="row" marginTop={1}>
        <Box width={8} flexShrink={0}>
          <Text dimColor>PID</Text>
        </Box>
        <Box width={11} flexShrink={0} justifyContent="flex-end" paddingRight={1}>
          <Text dimColor>RSS</Text>
        </Box>
        <Box width={7} flexShrink={0} justifyContent="flex-end" paddingRight={1}>
          <Text dimColor>CPU</Text>
        </Box>
        <Box width={12} flexShrink={0}>
          <Text dimColor>TIME</Text>
        </Box>
        <Box flexGrow={1}>
          <Text dimColor>COMMAND</Text>
        </Box>
      </Box>,
      ...shown.map(row),
      ...(hidden > 0 ? [<Text dimColor>{`… ${hidden} more`}</Text>] : []),
    )
  })