> ## Content Index > Fetch the complete content index at: https://www.azurebrasil.cloud/llms.txt > Use this file to discover other available public pages before exploring further. # Redesenhando o dashboard do argocd-vpa-sync com GitHub Copilot e Impeccable - URL: https://www.azurebrasil.cloud/blog/redesenhando-o-dashboard-do-argocd-vpa-sync-com-github-copilot-e-impeccable/ - Published: 2026-11-04T12:30:00.000Z - Updated: 2026-11-04T12:29:59.000Z - Author: Felipe Faria O [GitHub Copilot](https://docs.github.com/en/copilot?ref=azurebrasil.cloud) deixou de ser só autocomplete faz tempo. No agent mode ele lê o projeto, roda comandos no terminal e segue instruções empacotadas como [Agent Skills](https://docs.github.com/en/copilot/concepts/agents/about-agent-skills?ref=azurebrasil.cloud). Uma dessas skills é o [Impeccable](https://impeccable.style/?ref=azurebrasil.cloud), um conjunto de instruções e scripts de design que faz o agente trabalhar como um diretor de arte: primeiro entende o produto, depois propõe uma identidade visual e só então mexe no código. Usei essa combinação para fazer o redesign completo do dashboard do argocd-vpa-sync, e o resultado foram três temas visuais escolhidos na instalação pelo Helm. Antes do design, vale entender o produto. O argocd-vpa-sync resolve um conflito conhecido entre o [Vertical Pod Autoscaler](https://github.com/kubernetes/autoscaler/tree/master/vertical-pod-autoscaler?ref=azurebrasil.cloud) e o [Argo CD](https://argo-cd.readthedocs.io/?ref=azurebrasil.cloud). No modo \`Auto\`, o VPA altera os Pods fora do Git e o Argo CD reverte. No modo \`Off\`, ele só registra recomendações que ninguém aplica. O argocd-vpa-sync fecha esse ciclo: a recomendação aparece num dashboard, o time revisa e seleciona as mudanças, e um worker faz o commit no values file do Helm ou no manifesto YAML. Daí o Argo CD sincroniza normalmente. O dashboard antigo funcionava, mas tinha a cara de qualquer painel administrativo. Ele tinha tabela, cards, badges coloridos e um botão de aceitar em cada linha. Imagem: Dashboard original do argocd-vpa-sync, com a listagem de recomendações no layout genérico de painel administrativo ![](https://storage.ghost.io/c/00/52/0052dced-0017-4d07-b190-1f5c48e0ab59/content/images/2026/11/image.png) ![](https://storage.ghost.io/c/00/52/0052dced-0017-4d07-b190-1f5c48e0ab59/content/images/2026/11/image-3.png) A skill do Impeccable fica versionada no próprio repositório, em \`[.github/skills/impeccable](https://github.com/AzureBrasil-cloud/argocd-vpa-sync/tree/felipefaria/frontend/.github/skills/impeccable?ref=azurebrasil.cloud)\`, junto com os agents auxiliares em \`[.github/agents](https://github.com/AzureBrasil-cloud/argocd-vpa-sync/tree/felipefaria/frontend/.github/agents?ref=azurebrasil.cloud)\`. O GitHub Copilot carrega skills dessa pasta, então não precisei configurar mais nada. Para conferir o que a skill oferece, basta digitar o comando sem argumento no chat do GitHub Copilot. Ele mostra o menu de comandos e sugere o próximo passo com base no estado do projeto. ```yaml text/impeccable ``` Imagem: Menu de comandos do Impeccable exibido no chat do GitHub Copilot ![](https://storage.ghost.io/c/00/52/0052dced-0017-4d07-b190-1f5c48e0ab59/content/images/2026/11/image-4.png) ![](https://storage.ghost.io/c/00/52/0052dced-0017-4d07-b190-1f5c48e0ab59/content/images/2026/11/image-5.png) O primeiro comando de verdade foi o \`init\`. Ele não mostra temas nem gera tela nenhuma. O trabalho dele é entrevistar você sobre o produto e gravar esse contexto em um arquivo \`[PRODUCT.md](https://github.com/AzureBrasil-cloud/argocd-vpa-sync/blob/felipefaria/frontend/PRODUCT.md?ref=azurebrasil.cloud)\` na raiz do projeto, que vira a fonte de verdade para todas as decisões de design seguintes. ```yaml text/impeccable init ``` O arquivo gerado descreve quem usa o produto, o que ele faz, as restrições e os princípios que nenhum layout pode quebrar. Este é um trecho do \`[PRODUCT.md](https://github.com/AzureBrasil-cloud/argocd-vpa-sync/blob/felipefaria/frontend/PRODUCT.md?ref=azurebrasil.cloud)\` do projeto: ![](https://storage.ghost.io/c/00/52/0052dced-0017-4d07-b190-1f5c48e0ab59/content/images/2026/11/image-6.png) A seção de usuários define o cenário de uso: revisão periódica, em lote, por gente que lê números de CPU e memória todos os dias. Os princípios são as regras que o redesign precisava respeitar. O mais importante é o primeiro: a interface nunca pode sugerir que altera o cluster diretamente, porque toda mudança sai como commit no Git. O arquivo também registra a terminologia que deve ser mantida (recommendation, eligible, write-back, binding, headroom) e deixa claro que não existem métricas de adoção para inventar. Com o contexto pronto, fiz o pedido em linguagem natural. ![](https://storage.ghost.io/c/00/52/0052dced-0017-4d07-b190-1f5c48e0ab59/content/images/2026/11/image-7.png) Para o Impeccable, esse pedido é trabalho visual novo. Não é um ajuste fino sobre o visual existente, é a substituição da identidade visual inteira. Por isso a skill segue o fluxo descrito em \`[reference/new-work.md](https://github.com/AzureBrasil-cloud/argocd-vpa-sync/blob/master/.claude/skills/impeccable/reference/new-work.md?ref=azurebrasil.cloud)\`, que tem uma regra rígida: nenhum código de interface pode ser escrito antes de uma direção visual ser sorteada e escolhida. O visual antigo passa a valer como evidência do que o produto é, não como referência do que ele deve virar. O fluxo também classifica a tela por modo. Um dashboard é uma tela de Operate, em que o usuário precisa concluir uma tarefa. Nesse modo, a skill prioriza leitura rápida, consistência e padrões que o usuário já conhece, e a personalidade da marca aparece nos detalhes. O primeiro script que o GitHub Copilot rodou já recebe esse modo como parâmetro. ```yaml bash.github/skills/impeccable/scripts/impeccable concept-seed --scope direction --mode operate ``` O \`concept-seed\` sorteia uma direção visual e distribui alternativas tiradas do catálogo de mundos visuais do Impeccable. A ideia do sorteio é evitar que todo redesign termine no mesmo visual padrão que modelos de linguagem tendem a gerar. O parâmetro \`--scope direction\` indica que está em jogo a identidade visual inteira, e não só a estrutura de uma tela. O \`--mode operate\` faz o script imprimir as regras desse modo, que passam a valer para todas as propostas. Com as direções montadas, o GitHub Copilot rodou o segundo script, que sobe um servidor local com a página de decisão. ```yaml bash.github/skills/impeccable/scripts/impeccable serve-question --start ``` A página abriu no navegador em \`http://127.0.0.1:52834\`, com o título "Choose the visual world for argocd-vpa-sync". Cada opção vem com paleta, materiais, descrição do primeiro viewport, o risco assumido e um mock em HTML gerado em \`.impeccable/mocks/decision/\`. Dali dá para manter a direção sorteada, escolher outra ou pedir um novo sorteio, mais conservador ou mais ousado. Imagem: Página de decisão do Impeccable no navegador com as três opções principais lado a lado ![](https://storage.ghost.io/c/00/52/0052dced-0017-4d07-b190-1f5c48e0ab59/content/images/2026/11/image-8.png) A primeira das três opções principais foi The Fitting Room, a direção sorteada. Ela usa o universo da alfaiataria: cada container é "medido" contra uma fita métrica, e as mudanças saem para o Git como uma ordem de ajuste. A paleta combina uma barra superior em carvão (\`#23262B\`), amarelo de fita métrica (\`#F2C230\`) como destaque e azul giz (\`#3B6FB6\`) para a recomendação. O risco que o próprio Impeccable apontou foi a metáfora vazar para os textos, então todo rótulo continua em termos de VPA e GitOps. ![](https://storage.ghost.io/c/00/52/0052dced-0017-4d07-b190-1f5c48e0ab59/content/images/2026/11/image-9.png) A segunda foi Calibration Certificate, a escolha recomendada pelo Impeccable. Cada container aparece como um instrumento num certificado de calibração de laboratório de metrologia: valor medido, valor nominal, faixa de tolerância e um veredito IN ou OUT. A seleção de mudanças vira um certificado com a prévia do commit. O risco declarado era a familiaridade, já que essa é a opção mais parecida com outros dashboards da categoria. ![](https://storage.ghost.io/c/00/52/0052dced-0017-4d07-b190-1f5c48e0ab59/content/images/2026/11/image-10.png) O Terceiro foi o padrão da categoria, a saída que o fluxo sempre oferece. É um console administrativo de Kubernetes no estilo do Argo CD ou do Kubecost, bem executado: barra lateral, tabela limpa, status em pills, fundo branco e azul \`#2563EB\`. O Impeccable nunca recomenda essa opção. Ela existe para que você sempre tenha uma saída segura. Dark: ![](https://storage.ghost.io/c/00/52/0052dced-0017-4d07-b190-1f5c48e0ab59/content/images/2026/11/image-13.png) Light: ![](https://storage.ghost.io/c/00/52/0052dced-0017-4d07-b190-1f5c48e0ab59/content/images/2026/11/image-17.png) As outras cinco alternativas do catálogo apareceram rebaixadas, em tamanho menor: Labanotation Score (notação de dança), Lexicon Page (dicionário do século XIX), Design Annual Plates, Crouwel Grid Specimen e Vertical Feed. Cada uma veio com o motivo da recusa, quase sempre por esconder a tabela ou atrapalhar a revisão em lote. O detalhe interessante é que cada recusada deixou uma ideia para a direção sorteada. Da notação de dança veio a regra de indicar a direção da mudança pela forma da marca e a elegibilidade pelo preenchimento, nunca só pela cor. Do dicionário veio a linha-guia que mostra a faixa de namespaces visível durante o scroll. Do feed vertical veio a navegação com j/k entre os containers elegíveis na tela de detalhe. Imagem: Alternativas recusadas do catálogo exibidas em tamanho reduzido abaixo das opções principais ![](https://storage.ghost.io/c/00/52/0052dced-0017-4d07-b190-1f5c48e0ab59/content/images/2026/11/image-19.png) Em vez de escolher uma única direção, optei por três temas, definidos na instalação: The Fitting Room, Calibration Certificate e o padrão da categoria. O Impeccable registrou essa decisão como um contrato de direção no brief da tela, em \`[.impeccable/surfaces/web-src-app-tsx.md](https://github.com/AzureBrasil-cloud/argocd-vpa-sync/blob/felipefaria/frontend/.impeccable/surfaces/web-src-app-tsx.md?ref=azurebrasil.cloud)\`, antes de qualquer código. ```markdown Constraints: the user chose THREE install-time themes instead of one world, selected via Helm `theme` (`default` | `fitting-room` | `calibration`). Same routes, components and behavior in all three; themes differ in type, palette, density, shell placement and signature move only. Light grounds (office daylight). Copy stays in VPA/GitOps terms. No invented capabilities (no export, no rescan, no PR flow). Removed on purpose: Table/Cards toggle (table only), per-row Accept buttons (the selection panel is the single apply path). ``` Esse contrato é a parte que mais me surpreendeu no fluxo. Ele trava o que os temas podem mudar (tipografia, paleta, densidade, posição do shell e o elemento visual característico de cada um) e o que precisa ser igual (rotas, componentes e comportamento). Ele também registra o que foi removido de propósito. A visualização em cards e os botões de aceitar por linha saíram, e a fila de write-back virou o único caminho para aplicar mudanças, o que reforça o princípio de revisão em lote do \`[PRODUCT.md](https://github.com/AzureBrasil-cloud/argocd-vpa-sync/blob/felipefaria/frontend/PRODUCT.md?ref=azurebrasil.cloud)\`. Na implementação, o GitHub Copilot criou o módulo \`[web/src/theme.ts](https://github.com/AzureBrasil-cloud/argocd-vpa-sync/blob/felipefaria/frontend/web/src/theme.ts?ref=azurebrasil.cloud)\`, que concentra os temas disponíveis e decide qual renderizar. ```javascript export const THEMES = ['default', 'fitting-room', 'calibration'] as const export type Theme = (typeof THEMES)[number] export const DEFAULT_THEME: Theme = 'fitting-room' export function isTheme(value: unknown): value is Theme { return typeof value === 'string' && (THEMES as readonly string[]).includes(value) } export function resolveTheme(serverTheme: unknown): Theme { if (import.meta.env.DEV) { const override = new URLSearchParams(window.location.search).get('theme') if (isTheme(override)) return override } return isTheme(serverTheme) ? serverTheme : DEFAULT_THEME } export function applyTheme(theme: Theme): void { document.documentElement.dataset.theme = theme } ``` **\*\*isTheme()\*\***Valida se um valor qualquer é um dos três temas conhecidos e funciona como type guard para o TypeScript. **\*\*resolveTheme()\*\***Usa o tema enviado pelo servidor e cai no \`fitting-room\` quando o valor está ausente ou é inválido. Em desenvolvimento, aceita \`?theme=\` na URL para visualizar qualquer tema sem redeploy. **\*\*applyTheme()\*\***Grava o tema no atributo \`data-theme\` do elemento raiz, que é onde o CSS se apoia. Cada tema é um bloco de CSS Custom Properties em \`[web/src/index.css](https://github.com/AzureBrasil-cloud/argocd-vpa-sync/blob/felipefaria/frontend/web/src/index.css?ref=azurebrasil.cloud)\`, sob o seletor \`\[data-theme\]\`. Os componentes só consomem os tokens, então a mesma marcação React muda de identidade sem nenhuma condição no JSX. Este é um trecho do bloco do The Fitting Room: ```css :root[data-theme='fitting-room'] { --bg: #f6f7f5; --surface: #ffffff; --ink: #1d1f23; --line: #d9dcd6; --accent: #f2c230; --accent-hover: #e3b11c; --rec: #3b6fb6; --band: #dcdfd9; --shell-bg: #23262b; --font: 'Archivo Variable', 'Arial Narrow', system-ui, sans-serif; --radius: 0px; --label-case: uppercase; --label-tracking: 0.08em; } ``` Os valores saem direto da proposta escolhida na página de decisão: fundo off-white, amarelo de fita métrica como destaque, azul giz para a recomendação e barra superior em carvão. O \`--radius: 0px\` e os rótulos em caixa alta aplicam a regra de cantos retos e linhas finas que veio da alternativa Design Annual Plates. As fontes são servidas localmente pelo [Fontsource](https://fontsource.org/?ref=azurebrasil.cloud), sem depender de CDN. O elemento que mais diferencia os temas é a forma de desenhar uma recomendação de CPU ou memória. No tema padrão, ela é um badge com a variação percentual. No The Fitting Room, vira uma fita métrica. No Calibration Certificate, vira uma barra de tolerância com veredito IN/OUT. As duas últimas compartilham o mesmo componente \`Gauge\`, em \`[web/src/components/ResourceReading.tsx](https://github.com/AzureBrasil-cloud/argocd-vpa-sync/blob/felipefaria/frontend/web/src/components/ResourceReading.tsx?ref=azurebrasil.cloud)\`. ```tsx function Gauge({ geo, eligible, label }: GaugeProps) { const direction = geo.target > geo.current ? 'up' : geo.target < geo.current ? 'down' : 'flat' const moveLeft = Math.min(geo.current, geo.target) const moveWidth = Math.abs(geo.target - geo.current) return ( {geo.band && } {direction !== 'flat' && ( )} ) } ``` **\*\*Gauge()\*\***Desenha numa mesma escala a faixa do VPA (\`lowerBound\` a \`upperBound\`), o request atual como um traço e o deslocamento até a recomendação como uma barra com seta. A direção é codificada na forma (\`gauge-up\` ou \`gauge-down\`) e a elegibilidade no preenchimento sólido ou hachurado (\`gauge-eligible\`), seguindo a regra de não depender só de cor. O \`aria-label\` descreve os valores em texto para leitores de tela. No backend, o tema vem da variável de ambiente \`DASHBOARD\_THEME\`, validada no carregamento da configuração em \`[internal/config/config.go](https://github.com/AzureBrasil-cloud/argocd-vpa-sync/blob/felipefaria/frontend/internal/config/config.go?ref=azurebrasil.cloud)\`. ```go if v := os.Getenv("DASHBOARD_THEME"); v != "" {   if !slices.Contains(Themes, v) {     return Config{}, fmt.Errorf("config: DASHBOARD_THEME must be one of %v, got %q", Themes, v)   }   cfg.Theme = v } ``` Um valor desconhecido derruba a inicialização com uma mensagem clara, em vez de cair silenciosamente num tema padrão. O tema vai para o frontend junto com a resposta de \`userinfo\`, que não exige autenticação, então até a tela de login já aparece no tema certo. Para quem instala, o tema é só um valor no \`values.yaml\` do chart. O comando abaixo troca o tema de uma instalação existente, mantendo os outros valores, e o novo Pod já serve o visual escolhido. ```bash helm upgrade argocd-vpa-sync oci://registry-1.docker.io/azurebrasil/argocd-vpa-sync \ --namespace argocd --reuse-values \ --set theme=calibration ``` O The Fitting Room acabou virando o tema padrão. A barra superior em carvão, as tabelas sem bordas arredondadas e a fita métrica em cada célula de CPU e memória deixam visível, numa olhada, quanto a recomendação se afasta do request atual e se ela cai fora da faixa do VPA. Imagem: Dashboard no tema The Fitting Room, com a barra carvão, as fitas métricas nas colunas de CPU e memória e a fila de write-back à direita ![](https://storage.ghost.io/c/00/52/0052dced-0017-4d07-b190-1f5c48e0ab59/content/images/2026/11/image-20.png) O Calibration Certificate traz uma faixa de cabeçalho com o resumo do cluster (bindings, elegíveis, write-backs com falha e último commit). Cada célula mostra a barra de tolerância com o veredito IN/OUT, e a fila de write-back exibe a prévia do diff que será commitado no values file. Imagem: Dashboard no tema Calibration Certificate, com o cabeçalho de resumo, os vereditos IN*/OUT* e a prévia do diff na fila ![](https://storage.ghost.io/c/00/52/0052dced-0017-4d07-b190-1f5c48e0ab59/content/images/2026/11/image-21.png) O tema \`default\` é o padrão da categoria bem feito: barra lateral, destaque azul, badges de variação e modo claro ou escuro escolhido por cada usuário no navegador. Imagem: Dashboard no tema default, com barra lateral e badges de variação percentual ![](https://storage.ghost.io/c/00/52/0052dced-0017-4d07-b190-1f5c48e0ab59/content/images/2026/11/image-22.png) No fim, o Impeccable fecha o ciclo com o agent \`impeccable-documenter\`, que gera o \`[DESIGN.md](https://github.com/AzureBrasil-cloud/argocd-vpa-sync/blob/felipefaria/frontend/DESIGN.md?ref=azurebrasil.cloud)\` a partir do que foi construído e não das intenções iniciais. O arquivo registra os tokens de cor e tipografia dos três temas e serve de referência para qualquer ajuste futuro. Essa ordem importa: um guia escrito antes da implementação acaba sendo defendido contra a realidade, enquanto um guia extraído do código pronto descreve o que de fato existe. O processo funciona igual em outra aplicação ou em outra tela. Basta digitar \`/impeccable\` seguido do pedido em linguagem natural, como \`/impeccable redesenhe a tela de login\`. Se você quiser planejar a experiência antes de gerar código, use \`/impeccable shape \`, que conduz a descoberta da tarefa e só entra no fluxo de direção visual quando necessário. E se não lembrar o comando, \`/impeccable\` sem argumento mostra o menu. Para mim, o ganho dessa combinação não foi o GitHub Copilot escrever CSS mais rápido. Foi a ordem imposta pelo Impeccable: primeiro o contexto do produto, depois uma escolha visual explícita entre alternativas com riscos declarados, e só então o código. Você já pode baixar o projeto por esse [link](https://github.com/AzureBrasil-cloud/argocd-vpa-sync/tree/felipefaria/frontend?ref=azurebrasil.cloud), e não esquece de me seguir no [LinkedIn](https://www.linkedin.com/in/flpfaria/?ref=azurebrasil.cloud)! Links & Docs: [Argo CD - Declarative GitOps CD for Kubernetes![](https://storage.ghost.io/c/00/52/0052dced-0017-4d07-b190-1f5c48e0ab59/content/images/icon/favicon-d94ee00f-b933-406e-9aaf-2da8c7fece9c.png)logo![](https://storage.ghost.io/c/00/52/0052dced-0017-4d07-b190-1f5c48e0ab59/content/images/thumbnail/argocd-ui-65d2c0bd-ac0f-46cc-b4ed-e3f9a2c6e8cb.gif)](https://argo-cd.readthedocs.io/en/stable/?ref=azurebrasil.cloud) [autoscaler/vertical-pod-autoscaler at master · kubernetes/autoscalerAutoscaling components for Kubernetes. Contribute to kubernetes/autoscaler development by creating an account on GitHub.![](https://storage.ghost.io/c/00/52/0052dced-0017-4d07-b190-1f5c48e0ab59/content/images/icon/favicon-394acd26-8768-4f2b-96db-68676cbfc157.png)GitHub![](https://opengraph.githubassets.com/30ea2166eaf4d4c47b663493cd4508a5ce5940904446ded7c4cbada9c041ada8/kubernetes/autoscaler)](https://github.com/kubernetes/autoscaler/tree/master/vertical-pod-autoscaler?ref=azurebrasil.cloud) [The missing design vocabulary for agents.Turn AI slop into interfaces you’re proud to ship. Impeccable gives your agent the design expertise to build from scratch, improve what you have, and stay true to your design system.![](https://storage.ghost.io/c/00/52/0052dced-0017-4d07-b190-1f5c48e0ab59/content/images/icon/favicon-b3a68891-2772-4a8a-819a-a53faeee6473.png)Impeccable![](https://storage.ghost.io/c/00/52/0052dced-0017-4d07-b190-1f5c48e0ab59/content/images/thumbnail/og-image-v6-90de1866-829f-4db7-a91c-2a77150ccb3b.png)](https://impeccable.style/?ref=azurebrasil.cloud) [GitHub Copilot documentation - GitHub DocsYou can use GitHub Copilot to enhance your productivity and assist as you work on code.![](https://storage.ghost.io/c/00/52/0052dced-0017-4d07-b190-1f5c48e0ab59/content/images/icon/favicon-14aa0241-2fcd-4af4-acc3-57ed6b5eee88.png)GitHub Docs![](https://storage.ghost.io/c/00/52/0052dced-0017-4d07-b190-1f5c48e0ab59/content/images/thumbnail/copilot-4bdfe458-54b8-4521-ad6f-5ef46ec83ae2.png)](https://docs.github.com/en/copilot?ref=azurebrasil.cloud) [Agent skills - GitHub DocsGive Copilot repeatable workflows with task-specific instructions, scripts, and resources.![](https://storage.ghost.io/c/00/52/0052dced-0017-4d07-b190-1f5c48e0ab59/content/images/icon/favicon-fb41be94-ebb1-4a0e-9620-77375443acca.png)GitHub Docs![](https://storage.ghost.io/c/00/52/0052dced-0017-4d07-b190-1f5c48e0ab59/content/images/thumbnail/copilot-a65a6c69-f242-4275-a6c4-89e5a7f6e5de.png)](https://docs.github.com/en/copilot/concepts/customizations/agent-skills?ref=azurebrasil.cloud) [Fontsource — Download & Self-Host Open-Source FontsBrowse free, open-source and variable fonts. Preview and download font files, or self-host web fonts with npm packages and CSS. CDN links are also available.![](https://storage.ghost.io/c/00/52/0052dced-0017-4d07-b190-1f5c48e0ab59/content/images/icon/favicon-32x32-f5434984-805c-440d-8187-6d80699becb7.png)Fontsource![](https://storage.ghost.io/c/00/52/0052dced-0017-4d07-b190-1f5c48e0ab59/content/images/thumbnail/og-image-36e58319-255b-4ca8-9422-86c345ca177e.png)](https://fontsource.org/?ref=azurebrasil.cloud) Até a próxima, abraços!