progresso

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    // O que os outros mods desenham na mesma faixa continua embaixo das barras. Vem antes da leitura do estado: um
    // desenho que espera os outros e só então lê não sai com um estado mais velho que o de um desenho seguinte.
    const abaixo = await desenhoDeBaixo($, next(e))
    const { Box: Caixa, Button, Text: Texto } = $.ui.resolve(e)
    const vazio = () => abaixo ?? <Caixa flexDirection="column" />
    if (e.props.hasSurvey || (await read($, oculto))) return vazio()
    const agora = await $.clock.now()
    const todas = vistas(await read($, barras), await read($, faixas), agora, await read($, turno))
    if (todas.length === 0) return vazio()

    // Passou do limite: saem primeiro as barras mais novas do demo, depois as mais velhas; sem demo, é o slice(-4) de
    // sempre. Assim o demo nunca empurra para fora uma barra de trabalho real.
    const candidatas = [...todas.filter(vista => demonstracao(vista.id)).reverse(), ...todas.filter(vista => !demonstracao(vista.id))]
    const fora = new Set(candidatas.slice(0, Math.max(0, todas.length - MAX_VISTAS)))
    const mostradas = todas.filter(vista => !fora.has(vista))
    const colunas = e.props.bodyColumns
    const escondidas =
      todas.length > mostradas.length ? `+${todas.length - mostradas.length} barras · /progresso painel mostra todas` : ''
    // Só o percentual à direita de cada barra, numa coluna fixa ("100%" cabe), clicável: abre o painel. A contagem
    // X/Y fica no painel e no resultado da ferramenta.
    // A coluna do % tem 4 colunas ("100%"), alinhada à direita: o fim dela é trilha + vão + 4 colunas, a mesma conta
    // em colunas da linha da faixa (ícone 16 px + vão + número de 2 + vão + faixa), e as duas acabam juntas.
    const percentualDe = (vista: (typeof mostradas)[number]) =>
      automatica(vista)
        ? []
        : [
            <Caixa key={`pct:${vista.id}`} width={4} flexShrink={0} justifyContent="flex-end">
              <Button
                key={`painel:${vista.id}`}
                label={`${String(percentual(vista)).padStart(3, ESPACO_DE_DIGITO)}%`}
                plain
                onPress={() => abrirPainelProgresso($)}
              />
            </Caixa>,
          ]
    // O número da faixa abre a conversa do agente: Button apagado que acende sob o ponteiro.
    const numeroDaFaixa = (id: string, rotulo: string, linha: (typeof mostradas)[number]['linhas'][number] | undefined) =>
      linha && !linha.comando ? (
        <Button key={`abrir:${id}`} label={rotulo} plain dimColor hover={{ dimColor: false }} onPress={() => abrirAgente($, linha.id, linha.titulo)} />
      ) : (
        <Texto key={`numero:${id}`} dimColor>
          {rotulo}
        </Texto>
      )

    if (e.surface === 'desktop') {
      const { Box, Svg, Text } = $.ui.resolve(e)
      // A trilha vai até um vão de 8 px antes da coluna do percentual (32 px, cabe "100%"); as faixas vão até o fim
      // dessa coluna. À esquerda delas, o ícone (16), o número (24, 3 colunas) e dois vãos de 8: a faixa tem a trilha menos 16.
      // Tudo em múltiplos de 8, a célula em que o app desenha a imagem.
      const trilha = naGrade(Math.max(120, larguraUtil(colunas) - VAO - COLUNA_PCT))
      const total = trilha + VAO + COLUNA_PCT
      const larguraFaixa = total - 16 - VAO - 24 - VAO
      const linhaCheia = { flexDirection: 'row', alignItems: 'center', columnGap: 1 } as const

      return (
        <Box flexDirection="column" gap={1}>
          {!!escondidas && <Text dimColor>{escondidas}</Text>}
          {mostradas.flatMap((vista, i) => {
            const debaixo = svgDasFaixas(vista, larguraFaixa, agora, false)
            // Grupo automático: sem trilha vazia a 0%, só o rótulo, a contagem e as faixas.
            let desenho
            if (automatica(vista)) {
              const rotulo = svgDoRotulo(vista, trilha)
              desenho = <Svg key={`rotulo:${vista.id}`} source={rotulo.source} alt={rotulo.alt} width={trilha} height={rotulo.altura} />
            } else {
              const trilhaSvg = svgDaTrilha(vista, trilha, agora)
              if (trilhaSvg.desliza) assentar($, agora)
              desenho = <Svg key={`trilha:${vista.id}`} source={trilhaSvg.source} alt={trilhaSvg.alt} width={trilha} height={ALT_TRILHA} />
            }

            return [
              ...(i > 0 ? [<Svg key={`fio:${vista.id}`} source={svgDoDivisor(total)} alt="divisor" width={total} height={1} />] : []),
              <Box key={`barra:${vista.id}`} flexDirection="column">
                <Box {...linhaCheia}>
                  {desenho}
                  {percentualDe(vista)}
                </Box>
                {debaixo.map(faixa => {
                  const linha = vista.linhas.find(item => item.id === faixa.key)
                  const alt = linha && !linha.comando ? `${faixa.alt}; o número ${faixa.rotulo} abre a conversa` : faixa.alt

                  return (
                    <Box key={`linha:${vista.id}:${faixa.key}`} {...linhaCheia}>
                      {/* alt não vazio: com alt "" o app não desenha o Svg (o ícone sumia da calha ao vivo). */}
                      <Svg key={`icone:${vista.id}:${faixa.key}`} source={faixa.icone} alt={linha?.comando ? 'comando' : 'agente'} width={16} height={faixa.altura} />
                      {/* Coluna fixa de 3 colunas: o botão nativo do desktop tem respiro interno e cortava o "2" com 2 colunas. */}
                      <Box key={`numero:${vista.id}:${faixa.key}`} width={3} flexShrink={0}>
                        {numeroDaFaixa(faixa.key, faixa.rotulo, linha)}
                      </Box>
                      <Svg key={`faixa:${vista.id}:${faixa.key}`} source={faixa.source} alt={alt} width={larguraFaixa} height={faixa.altura} />
                    </Box>
                  )
                })}
              </Box>,
            ]
          })}
          {abaixo}
        </Box>
      )
    }

    const { Box, Text } = $.ui.resolve(e)
    const larguraTitulo = Math.max(8, Math.min(28, Math.floor(colunas * 0.24)))
    const larguraTrilho = Math.max(6, Math.min(20, Math.floor(colunas * 0.16)))
    // Ícone, contagem, percentual e os vãos entre eles ocupam umas 20 colunas.
    const larguraRotulo = Math.max(6, colunas - larguraTitulo - larguraTrilho - 20)

    return (
      <Box flexDirection="column">
        {!!escondidas && <Text dimColor>{escondidas}</Text>}
        {mostradas.map(vista => {
          const cheio = Math.round((larguraTrilho * percentual(vista)) / 100)

          return (
            <Box flexDirection="column">
              {automatica(vista) ? (
                <Box flexDirection="row" gap={1}>
                  <Text dimColor>{vista.titulo}</Text>
                  <Text dimColor>{cortar(vista.rotulo, larguraRotulo)}</Text>
                </Box>
              ) : (
                <Box flexDirection="row" gap={1}>
                  <Text>
                    <Text color={COR_TERMINAL[vista.tom]}>{'━'.repeat(cheio)}</Text>
                    <Text dimColor>{'─'.repeat(larguraTrilho - cheio)}</Text>
                  </Text>
                  <Text color={COR_TERMINAL[vista.tom]}>{ICONE[vista.tom]}</Text>
                  <Text bold>{cortar(vista.titulo, larguraTitulo)}</Text>
                  <Text color={COR_TERMINAL[vista.tom]}>{cortar(vista.rotulo, larguraRotulo)}</Text>
                  {percentualDe(vista)}
                </Box>
              )}
              {vista.linhas.map((linha, i) => {
                const desenho = linha.comando ? 'terminal' : desenhoDoTipo(linha.tipo)

                return (
                  <Box key={`linha:${vista.id}:${linha.id}`} flexDirection="row" gap={1}>
                    <Text dimColor>{i === vista.linhas.length - 1 && !vista.resumo ? '  └' : '  ├'}</Text>
                    <Text dimColor>{glifoDe(desenho)}</Text>
                    {numeroDaFaixa(linha.id, String(linha.numero), linha)}
                    <Text color={COR_TERMINAL[linha.tom]}>{ICONE[linha.tom]}</Text>
                    <Text dimColor={linha.tom !== 'andamento' && linha.tom !== 'esperando'}>
                      {cortar(linha.comando ? `$ ${linha.titulo}` : linha.titulo, Math.max(10, Math.floor(colunas * 0.4)))}
                    </Text>
                    {!!linha.meta && <Text dimColor>{linha.meta}</Text>}
                    {!!linha.selo && <Text color={COR_TERMINAL[linha.tom]}>{linha.selo}</Text>}
                    <Text dimColor>{linha.relogio}</Text>
                  </Box>
                )
              })}
              {!!vista.resumo && <Text dimColor>{`  └ ${vista.resumo}`}</Text>}
            </Box>
          )
        })}
        {abaixo}
      </Box>
    )
  })

  on('ui.render', { component: 'Pane', requestId: PAINEL }, async ($, e, next) => {
    if (e.surface !== 'desktop' && e.surface !== 'terminal') return next(e)
    const { Box, Button, Input, Markdown, Text } = $.ui.resolve(e)
    const Svg = e.surface === 'desktop' ? $.ui.resolve(e).Svg : undefined
    const estado = await read($, painel)
    const agora = await $.clock.now()
    const lista = await read($, faixas)
    const fechar = async () => {
      // O fechar do próprio mod não passa pelo hook de ui.close dele: o estado do painel sai aqui.
      await $.ui.close({ id: PAINEL })
      await fecharPainel($, true)
    }

    if (estado.agente === null) {
      const todas = await read($, barras)
      const barra = barraEmFoco(todas, await read($, turno))
      const { concluidos, recolhido, passosAbertos } = await read($, janela)

      return desenharPainel(
        { Box, Text, Button, Svg },
        {
          agora,
          colunas: e.props.bodyColumns,
          barra,
          resumo: barra && resumoDaBarra(barra, lista, agora),
          agentes: lista.filter(faixa => faixa.tipo === 'agente'),
          comandos: lista.filter(faixa => faixa.tipo === 'comando'),
          planejados: planejadosDe(barra),
          perfil: perfilDe,
          concluidosAbertos: concluidos !== false,
          recolhido: recolhido === true,
          passosAbertos: passosAbertos === true,
        },
        {
          abrirAgente: (id, titulo) => abrirAgente($, id, titulo),
          alternarConcluidos: () => update($, janela, atual => ({ ...atual, concluidos: atual.concluidos === false })),
          alternarRecolhido: () => update($, janela, atual => ({ ...atual, recolhido: atual.recolhido !== true })),
          alternarPassos: () => update($, janela, atual => ({ ...atual, passosAbertos: atual.passosAbertos !== true })),
          fechar,
        },
      )
    }

    // Sem faixa ativa o agente terminou, e o envio o retoma do transcript.
    const rodando = lista.some(faixa => faixa.id === estado.agente && faixa.fim === null)
    const vista = vistas(await read($, barras), lista, agora, await read($, turno)).find(item => item.linhas.some(linha => linha.id === estado.agente))
    const linha = vista?.linhas.find(item => item.id === estado.agente)
    // No terminal o glifo do tipo do agente vem antes do título; no desktop o ícone de linha está na faixa desenhada.
    const tipoDoAberto = lista.find(faixa => faixa.id === estado.agente)?.tipoAgente ?? ''
    let topo = (
      <Box key="topo" flexDirection="row" columnGap={1}>
        <Text dimColor>{glifoDe(desenhoDoTipo(tipoDoAberto))}</Text>
        <Text bold>{estado.titulo}</Text>
      </Box>
    )
    if (Svg && vista && linha) {
      const largura = Math.max(240, e.props.bodyColumns * 8)
      // Id próprio: a faixa do painel tem outra largura e não disputa o desenho guardado com a da banda.
      const faixa = svgDasFaixas({ ...vista, id: `painel:${vista.id}`, linhas: [linha], ocultas: 0 }, largura, agora)[0]
      if (faixa) topo = <Svg key="topo" source={faixa.source} alt={faixa.alt} width={largura} height={faixa.altura} />
    }

    return (
      <Box flexDirection="column" gap={1}>
        <Button key="voltar" label="← voltar" plain onPress={() => voltar($)} />
        {topo}
        {!!estado.aviso && <Text key="aviso" dimColor>{estado.aviso}</Text>}
        {!estado.aviso && estado.falas.length === 0 && <Text dimColor>O agente ainda não escreveu nada.</Text>}
        {estado.falas.map(fala =>
          fala.quem === 'ferramenta' ? (
            <Text dimColor>{`› ${fala.texto}`}</Text>
          ) : (
            <Box flexDirection="column">
              <Text dimColor={fala.quem !== 'voce'} bold={fala.quem === 'voce'}>
                {QUEM[fala.quem]}
              </Text>
              {fala.quem === 'agente' ? <Markdown text={fala.texto} /> : <Text>{fala.texto}</Text>}
            </Box>
          ),
        )}
        <Input
          key="msg"
          placeholder={rodando ? 'Mensagem para o agente' : 'Agente terminado: enviar retoma o agente'}
          submitLabel="enviar"
          autoFocus
          onSubmit={texto => enviarAoAgente($, texto)}
        />
        <Button key="fechar-painel" role="dismiss" label="Fechar" onPress={fechar} />
      </Box>
    )
  })

export function desenharPainel(els: Elementos, dados: DadosDoPainel, acoes: AcoesDoPainel): RenderElement {
  const { Box, Text, Button, Svg } = els
  const { agora, colunas, barra, resumo } = dados
  const larguraTexto = Math.max(16, colunas - MASCOTE_COLUNAS)
  // A coluna de texto começa depois do mascote e do vão de uma coluna (~8 px) e vai até a borda das divisórias.
  // No desktop o painel ganha 8 px de cada lado além do respiro do host (16): 24 px da borda, como na referência.
  const margem = Svg ? 1 : 0
  const util = px(colunas) - margem * 16
  const larguraBarraPx = Math.max(60, util - MASCOTE_CAIXA - 8)

  const fio = (chave: string) =>
    Svg ? (
      <Svg key={chave} source={svgDoFio(util, FIO_PX)} alt="divisória" width={util} height={FIO_PX} />
    ) : (
      <Text key={chave} dimColor>{'─'.repeat(Math.max(8, colunas))}</Text>
    )
  // Vão transparente da grade de 8 px, onde Box não tem medida em px.
  const vao = (chave: string, altura: number) => (Svg ? [<Svg key={chave} source={`<svg xmlns="http://www.w3.org/2000/svg" width="8" height="${altura}"/>`} alt="espaço" width={8} height={altura} />] : [])

  // O ícone de linha do item: no desktop a casa arredondada com o ícone no centro (a antena ou o cursor pisca no que
  // roda, em SMIL num Svg isInteractive); no terminal o glifo do tipo, apagado no planejado.
  const mascote = (item: Item) => {
    if (Svg) {
      return (
        <Svg
          key={`m:${item.chave}`}
          source={svgDoIcone(item.desenho, { variante: item.variante, animado: item.animado, largura: MASCOTE_CAIXA })}
          alt={`ícone ${item.desenho}${item.variante && item.variante !== 'normal' ? ` ${item.variante}` : ''}`}
          width={MASCOTE_CAIXA}
          height={CASA_PX}
          isInteractive={item.animado ? true : undefined}
        />
      )
    }

    return (
      <Box key={`m:${item.chave}`} flexShrink={0} width={2}>
        <Text dimColor={item.variante === 'planejado'} color={item.variante === 'falhou' ? 'error' : undefined}>
          {glifoDe(item.desenho)}
        </Text>
      </Box>
    )
  }

  const barraDoItem = (item: Item) => {
    const b = item.barra
    if (!b) return false
    if (Svg) {
      const brilho = b.tipo === 'fracao' && b.brilho === true
      const source = b.tipo === 'fracao' ? svgBarraCor(b.fracao, b.cor, larguraBarraPx, 4, brilho) : svgBarraIndeterminada(b.cor, larguraBarraPx, 4)
      // O que anda (segmento indeterminado, aceno do mascote) vai num Svg isInteractive: o tipo diz que sem ele o Svg é
      // desenhado "an image", e que o quadro sandboxed é o modo em que a animação roda. A fonte não muda por tique.
      return (
        <Svg
          key={`b:${item.chave}`}
          source={source}
          alt={b.tipo === 'fracao' ? `${Math.round(b.fracao * 100)}%` : 'em andamento'}
          width={larguraBarraPx}
          height={4}
          isInteractive={b.tipo === 'indeterminada' || brilho ? true : undefined}
        />
      )
    }
    const total = Math.max(6, larguraTexto - 1)
    if (b.tipo === 'fracao') {
      const cheio = Math.round(total * Math.max(0, Math.min(1, b.fracao)))
      return (
        <Text key={`b:${item.chave}`}>
          <Text color={b.corTerminal}>{'━'.repeat(cheio)}</Text>
          <Text dimColor>{'─'.repeat(total - cheio)}</Text>
        </Text>
      )
    }
    // Sem fração: um segmento que anda um passo por tique.
    const seg = Math.max(2, Math.round(total * 0.28))
    const inicio = Math.round((((Math.floor(agora / 1000) % 5) + 1) * (total + seg)) / 6) - seg
    const de = Math.max(0, inicio)
    const ate = Math.min(total, inicio + seg)
    return (
      <Text key={`b:${item.chave}`}>
        <Text dimColor>{'─'.repeat(de)}</Text>
        <Text color={b.corTerminal}>{'━'.repeat(Math.max(0, ate - de))}</Text>
        <Text dimColor>{'─'.repeat(total - Math.max(de, ate))}</Text>
      </Text>
    )
  }

  // A situação e os números: no desktop um Svg da largura da barra, com os números tabulares encostados na ponta dela;
  // no terminal, texto nas duas pontas da linha.
  const metricaDoItem = (item: Item) => {
    if (!item.esquerda && !item.direita && !item.tempo) return false
    const tempo = item.tempo ? relogio((item.tempo.fim ?? agora) - item.tempo.inicio) : ''
    if (Svg) {
      const m = svgDaMetrica(item.chave, item.esquerda ?? { texto: '' }, item.direita ?? '', item.tempo ?? { inicio: agora, fim: agora }, larguraBarraPx, agora)
      return <Svg key={`n:${item.chave}`} source={m.source} alt={m.alt} width={larguraBarraPx} height={m.altura} />
    }
    const direita = [item.direita, tempo].filter(Boolean).join(' ')

    return (
      <Box flexDirection="row" justifyContent="space-between" columnGap={1}>
        <Text color={item.esquerda?.cor} dimColor={item.esquerda?.apagado} wrap="truncate-end">
          {item.esquerda?.texto ?? ''}
        </Text>
        {!!direita && <Text dimColor>{direita}</Text>}
      </Box>
    )
  }

  const linhaDoItem = (item: Item) => (
    <Box key={`item:${item.chave}`} flexDirection="row" columnGap={1} alignItems="flex-start">
      {mascote(item)}
      <Box flexDirection="column" flexGrow={1}>
        <Box flexDirection="row" justifyContent="space-between" alignItems="center" columnGap={1}>
          {/* O título do agente é o botão que abre a conversa: na API só Button tem onPress (Box e Svg não têm) e
              Button não tem negrito, então ele fica em peso normal; os títulos que não abrem nada vão em negrito. */}
          <Box flexDirection="row" flexGrow={1}>
            {item.abrir ? (
              <Button key={`card:${item.chave}`} label={cortar(item.titulo, Math.max(10, larguraTexto - 3))} plain onPress={() => item.abrir?.()} />
            ) : (
              <Text bold wrap="truncate-end">{cortar(item.titulo, Math.max(10, larguraTexto - 3))}</Text>
            )}
          </Box>
          {Svg ? (
            <Svg
              key={`e:${item.chave}`}
              source={svgDoEstado(item.icone.svg).source}
              alt={item.icone.nome}
              width={16}
              height={16}
              isInteractive={svgDoEstado(item.icone.svg).anima ? true : undefined}
            />
          ) : (
            <Text color={item.icone.cor}>{item.icone.glifo}</Text>
          )}
        </Box>
        {item.linha2}
        {metricaDoItem(item)}
        {barraDoItem(item)}
      </Box>
    </Box>
  )

  const nivelEModelo = (tipo: string, modelo: string, esforco: string, apagado = false) => {
    const nivel = nivelDe(tipo)
    const perfil = dados.perfil(tipo)
    const meta = [modelo || perfil?.modelo || '', esforco || perfil?.esforco || ''].filter(Boolean).join(' · ')

    return (
      <Text>
        <Text color={nivel.cor} dimColor={apagado}>{nivel.rotulo}</Text>
        {!!meta && <Text dimColor>{` ${comMaiuscula(meta)}`}</Text>}
      </Text>
    )
  }

  const numerosDe = (faixa: Faixa) => {
    const pct = faixa.janela > 0 && faixa.ctx > 0 ? Math.max(1, Math.round((faixa.ctx / faixa.janela) * 100)) : null
    const consumo = [pct !== null ? `ctx ${pct}%` : '', faixa.tokens > 0 ? tokensCurtos(faixa.tokens) : ''].filter(Boolean).join(' · ')

    return [consumo, faixa.tokens > 0 && faixa.usd !== null ? usdCurto(faixa.usd) : ''].filter(Boolean).join(' ')