csr-lens

  on('ui.render', { component: 'Pane', requestId: PAINEL }, async ($, e) => {
    if (diagnostico !== undefined) {
      await anotar($, 'diagnóstico', () => registrar($, `desenho do painel (foco: ${e.props.isFocused ? 'sim' : 'não'})`))
    }

    const tabela = $.ui.resolve(e)
    const el: Elementos = {
      Box: tabela.Box,
      Text: tabela.Text,
      Button: tabela.Button,
      Input: 'Input' in tabela ? tabela.Input : null,
      Markdown: tabela.Markdown,
      Code: tabela.Code,
      // O terminal também tem um Svg na tabela (desenha só o alt): para as
      // telas, desenho em SVG é coisa do app; no terminal, nenhum.
      Svg: 'Svg' in tabela && e.surface !== 'terminal' ? tabela.Svg : null,
    }
    // A versão é o único valor que o painel lê: ele é redesenhado quando o
    // instantâneo muda (veja refrescarPainel e vigiarPainel), e não a cada
    // valor gravado.
    await read($, versao)
    // Desenhado, o painel está aberto (o vigia passa a acompanhá-lo).
    isPainelAberto = true

    // Um erro ao desenhar não deixa o painel em branco: ele aparece no painel
    // e vai para ~/.claude/csr-lens-erros.log, para ser corrigido.
    try {
      const partida = performance.now()
      // Sem instantâneo (o mod acabou de recarregar), lê direto desta vez.
      const visto = instantaneo ?? { dados: await lerDados($), agora: await $.clock.now() }
      const dados = visto.dados
      const quadro: Quadro = {
        largura: e.props.bodyColumns,
        linhas: e.props.scroll.bodyRows,
        agora: visto.agora,
        cotacao,
        raiz,
        // Sentado acima do prompt, e não ao lado: a versão compacta.
        isCompacto: e.props.placement === 'inline',
        isTerminal: e.surface === 'terminal',
        isFaixa: false,
        fechadas: dados.ui.secoesFechadas ?? [],
      }
      const arvore = desenhar(el, dados, quadro, acoes($))
      const gasto = Math.round(performance.now() - partida)

      // Um desenho lento passa do orçamento do hook e o painel fica sem
      // desenho: fica registrado, com a aba, para ser corrigido.
      if (gasto > DESENHO_LENTO_MS) {
        await anotar($, 'registro do desenho lento', () =>
          registrarErro($, `desenho lento: aba ${dados.ui.aba}, ${gasto} ms (${e.surface}, ${quadro.largura} colunas)`),
        )
      }

      return arvore
    } catch (erro) {
      const texto = erro instanceof Error ? `${erro.message}\n${erro.stack ?? ''}` : String(erro)
      await anotar($, 'registro do erro', () => registrarErro($, texto))
      const { Box, Text, Button } = el

      return (
        <Box flexDirection="column" rowGap={1}>
          <Text bold color={COR.vermelho}>O Lens falhou ao desenhar esta aba.</Text>
          <Text dimColor wrap="wrap">{texto.split('\n').slice(0, 8).join('\n')}</Text>
          <Text dimColor wrap="wrap">O erro foi gravado em ~/.claude/csr-lens-erros.log.</Text>
          <Box flexDirection="row">
            <Button key="erro-voltar" label="Ir para Agentes" onPress={() => acoes($).aba(1)} />
          </Box>
        </Box>
      )
    }
  })

export const desenhar = (
  el: Elementos,
  dados: Dados,
  quadro: Quadro,
  acoes: Acoes,
): RenderElement => {
  const { Box, Text } = el
  const resumo = dados.resumo
  // Os títulos de todas as seções na cor da aba aberta.
  const tomDaAba = ABAS.find(aba => aba.n === dados.ui.aba)?.tom
  const quadroDaAba: Quadro = tomDaAba === undefined ? quadro : { ...quadro, tomDaAba }

  // Uma coluna de margem à direita: a moldura dos cartões não encosta na borda do painel.
  return (
    <Box flexDirection="column" rowGap={respiro(quadro)} paddingRight={quadro.isCompacto ? 0 : 1}>
      <Box flexDirection="column">
        {!quadro.isCompacto && (
          <Box flexDirection="row" columnGap={2} marginBottom={1}>
            {seloDaMarca(el)}
            {/* Na Visão geral, os indicadores logo abaixo já dizem o mesmo. */}
            {!(dados.ui.aba === 0 && dados.ui.foco === undefined) && (
              <Box flexGrow={1} flexShrink={1} minWidth={0}>
                <Text dimColor wrap="truncate-end">{resumo}</Text>
              </Box>
            )}
          </Box>
        )}
        {abas(el, dados, quadroDaAba, acoes)}
        {/* No Desktop o ─ é mais largo que uma coluna e a régua quebrava em duas linhas. */}
        {!quadro.isCompacto && quadro.isTerminal && regua(el, limitar(quadro.largura - 1, 10, 200), corDaAba(dados.ui.aba))}
        {caminho(el, dados, quadroDaAba, acoes)}
      </Box>
      {corpo(el, dados, quadroDaAba, acoes)}
    </Box>
  )
}

export const seloDaMarca = (el: Pick<Elementos, 'Box' | 'Text'> & { Svg?: Elementos['Svg'] }, isCurto = false): RenderElement => {
  const { Box } = el

  // Num Box que não encolhe: o selo nunca quebra em duas linhas. No app, uma
  // pílula de pontas redondas, como as abas; no terminal, o texto com fundo.
  return <Box flexShrink={0}>{selo(el, isCurto ? '✦ CSR' : '✦ CSR Lens', 'marca')}</Box>
}

export const selo = (
  el: Pick<Elementos, 'Text'> & ComSvg,
  texto: string,
  tom: Tom | NomeDoTom,
  isNegrito = true,
  altura?: number,
): RenderElement => {
  const { Text } = el
  const cor = typeof tom === 'string' ? TONS[tom] : tom

  if (el.Svg !== undefined && el.Svg !== null) {
    const desenho = pilulasSoltas([{ texto, fundo: cor.fundo, tinta: cor.tinta, isNegrito }], altura === undefined ? {} : { altura, corpo: 13.5 })

    return <el.Svg source={desenho.source} alt={texto} width={desenho.width} height={desenho.height} />
  }

  return (
    <Text backgroundColor={cor.fundo} color={cor.tinta} bold={isNegrito}>
      {` ${texto} `}
    </Text>
  )
}

const abas = (el: Elementos, dados: Dados, quadro: Quadro, acoes: Acoes): RenderElement => {
  const { Box, Button } = el
  const isInteiras = quadro.largura >= LARGURA_DAS_ABAS_INTEIRAS

  // No terminal, o botão sem moldura já escreve a tecla antes do rótulo ("2: ± Diffs").
  return (
    <Box flexDirection="row" flexWrap="wrap" columnGap={quadro.isTerminal ? 2 : 1}>
      {quadro.isCompacto && seloDaMarca(el, true)}
      {ABAS.map(aba =>
        aba.n === dados.ui.aba ? (
          <Box key={`guia-${aba.n}`} flexShrink={0}>
            {selo(el, `${aba.icone} ${aba.nome}`, aba.tom, true, quadro.isTerminal ? undefined : 26)}
          </Box>
        ) : (
          <Box key={`guia-${aba.n}`} flexShrink={0}>
            <Button
              key={`aba-${aba.n}`}
              label={isInteiras ? `${aba.icone} ${aba.nome}` : aba.icone}
              hotkey={teclaDaAba(aba.n)}
              {...comMoldura(quadro)}
              hover={{ color: TONS[aba.tom].fundo, bold: true }}
              onPress={() => acoes.aba(aba.n)}
            />
          </Box>
        ),
      )}
      {quadro.isFaixa && (
        <Button key="fechar" label="Fechar" role="dismiss" plain dimColor onPress={acoes.fechar} />
      )}
    </Box>
  )
}

export const regua = (el: Pick<Elementos, 'Text'>, largura: number, cor: string): RenderElement => {
  const { Text } = el

  return <Text color={cor}>{'─'.repeat(Math.max(4, largura))}</Text>
}