design-diff.yml

name: Design diff

# Não existe `pen diff`. A comparação é montada aqui: worktree da base, render
# dos dois lados via `pen interactive` headless, e três camadas de diff textual.

on:
  pull_request:
    types: [opened, synchronize, reopened, ready_for_review]
    paths:
      # só a fonte do design — mexer no DESIGN-SYSTEM.md não justifica render
      - "design/pendev/**"
      - "scripts/**"
      - ".github/workflows/design-diff.yml"

permissions:
  contents: read
  pull-requests: write
  id-token: write

concurrency:
  group: design-diff-${{ github.event.pull_request.number }}
  cancel-in-progress: true

env:
  PEN_FILE: design/pendev/youtube-channel.pen

jobs:
  diff:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v6
        with:
          fetch-depth: 0

      - uses: actions/setup-node@v4
        with:
          node-version: 22

      # >= 0.3.5 obrigatório: em 0.3.2 um .pen com fills de imagem relativos
      # carrega VAZIO sem erro fatal. scripts/pen-export.sh checa e falha.
      - name: Instalar pen.dev CLI
        run: npm install -g @pen.dev/cli && pen version

      # O .pen referencia ./assets/* relativamente, então a versão da base
      # precisa da árvore inteira — um worktree, não um `git show` solto.
      - name: Worktree da base
        run: git worktree add --detach ../base "origin/${{ github.base_ref }}"

      - name: Renderizar os dois lados
        env:
          PEN_CLI_KEY: ${{ secrets.PEN_CLI_KEY }}
        run: |
          ./scripts/pen-export.sh "../base/$PEN_FILE" /tmp/render/base 1
          ./scripts/pen-export.sh "$PEN_FILE"         /tmp/render/head 1
          mkdir -p /tmp/render/out
          for f in /tmp/render/base/*.png; do cp "$f" "/tmp/render/out/base-$(basename "$f")"; done
          for f in /tmp/render/head/*.png; do cp "$f" "/tmp/render/out/head-$(basename "$f")"; done

      # Três camadas, da mais específica para a mais bruta. O diff do arquivo
      # inteiro seria ruído de coordenada, por isso nenhuma delas é ele.
      #
      #   tokens     -> cor/escala trocada, token add/removido
      #   inventário -> componente add/removido/renomeado
      #   estrutura  -> mudança DENTRO de um componente (padding do Chip etc),
      #                 que não aparece nas duas anteriores
      #
      # Composição das telas não entra: instanciada dá milhares de linhas.
      # Mudança de tela se vê no PNG.
      - name: Diff de tokens, inventário e estrutura
        run: |
          strip='walk(if type == "object" then del(.id, .x, .y) else . end)'
          for side in base head; do
            src="$PEN_FILE"; [ "$side" = base ] && src="../base/$PEN_FILE"
            jq -S '.variables // {}' "$src" > "/tmp/render/$side.tokens.json"
            jq -r '[.. | objects | select(.reusable == true) | .name] | sort | .[]' \
              "$src" > "/tmp/render/$side.inventory.txt"
            jq -S "[.. | objects | select(.reusable == true)] | sort_by(.name) | map($strip)" \
              "$src" > "/tmp/render/$side.shape.json"
          done

          # Comentário de PR estoura em 65536 chars; cada seção tem teto próprio.
          emit() {
            echo "### $1"; echo
            if diff -q "/tmp/render/base.$2" "/tmp/render/head.$2" >/dev/null; then
              echo '_sem mudança_'
            else
              d=$(diff -u "/tmp/render/base.$2" "/tmp/render/head.$2" | tail -n +3)
              n=$(printf '%s\n' "$d" | wc -l)
              echo '```diff'
              printf '%s\n' "$d" | head -120
              echo '```'
              [ "$n" -gt 120 ] && echo "_+$((n - 120)) linhas omitidas — veja o artefato._"
            fi
            echo
          }
          {
            emit Tokens tokens.json
            emit "Inventário de componentes" inventory.txt
            emit "Estrutura dos componentes" shape.json
          } > /tmp/render/summary.md
          cp /tmp/render/*.json /tmp/render/*.txt /tmp/render/out/ 2>/dev/null || true
          cat /tmp/render/summary.md

      - uses: actions/upload-artifact@v4
        with:
          name: design-render-${{ github.event.pull_request.number }}
          path: /tmp/render/out/*
          if-no-files-found: error

      # O diff acima é exato e ilegível: quem revisa precisa conhecer o sistema
      # de tokens para saber que $space-3 -> $space-4 é "o chip ficou 4px mais
      # largo". O agente escreve a leitura; o diff cru fica dobrado embaixo.
      #
      # Ele NÃO posta: escreve um arquivo, e o passo seguinte publica. Assim a
      # publicação continua determinística e o comentário sai mesmo se o agente
      # falhar — só que sem a parte humana.
      - uses: anthropics/claude-code-action@v1
        continue-on-error: true
        with:
          anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}
          prompt: |
            Escreva a leitura humana de uma mudança de design, para quem vai
            revisar este PR.

            Entrada:
            - /tmp/render/summary.md — o diff de tokens, inventário e estrutura
            - /tmp/render/head.tokens.json — os tokens depois da mudança
            - /tmp/render/base.tokens.json — antes

            As regras de tradução estão em design/DESIGN-SYSTEM.md, já carregado
            via CLAUDE.md.

            Escreva no MÁXIMO 12 linhas, em português, e grave em
            /tmp/render/human.md. Não poste nada; não use ferramenta de
            comentário.

            O que a leitura precisa ter:
            - o que mudou em PIXELS, não em nome de token. "$space-3 -> $space-4"
              não diz nada; "o padding lateral do Chip vai de 12px para 16px" diz.
            - o que isso exige do código: nomeie o arquivo e a classe que
              precisam mudar (ex: components/chip.tsx, px-3 -> px-4), e o
              app/globals.css quando for token.
            - o que passa despercebido: se o valor novo cair numa das armadilhas
              do doc (radius deslocado, $space-14, text-lg), diga.

            Se o resumo indicar que nada mudou, escreva uma linha só dizendo isso.
          claude_args: |
            --max-turns 15
            --allowedTools "Read,Grep,Glob,Write,Bash(jq:*),Bash(sed:*),Bash(head:*)"

      - name: Comentar no PR
        if: always()
        env:
          GH_TOKEN: ${{ github.token }}
        run: |
          {
            echo "## Design vs \`${{ github.base_ref }}\`"
            echo
            if [ -s /tmp/render/human.md ]; then
              cat /tmp/render/human.md
              echo
              echo "<details><summary>Diff exato (tokens, inventário, estrutura)</summary>"
              echo
              cat /tmp/render/summary.md
              echo "</details>"
            else
              echo "_A leitura automática falhou; segue o diff cru._"
              echo
              cat /tmp/render/summary.md
            fi
            echo
            echo "Renders antes/depois: [artefato do run](${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}#artifacts)"
          } > /tmp/render/comment.md
          gh pr comment "${{ github.event.pull_request.number }}" --body-file /tmp/render/comment.md