Orbit · GitHub Briefing

Template do Orbit com conector único focado no GitHub.

⚠️ Protocolo de fonte de verdade (leia isso primeiro)

Passo 1. Abra e leia o arquivo enviado example.html nesta pasta antes de escrever qualquer saída. Esse arquivo é o design canônico — seu trabalho é reproduzi-lo, não reinterpretá-lo.

Passo 2. Espelhe a estrutura do exemplo 1:1:

• Mesma hierarquia DOM e nomes de classe
• Mesmos itens da barra de navegação (e somente eles)
• Mesma lista de filtros na barra lateral esquerda (e somente eles)
• Mesmos grupos de eventos na mesma ordem, com a mesma contagem de linhas
• Mesma posição da pré-visualização de diff, mesmo bloco de falha de CI, mesmo bloco de atenção
• Mesmo bloco <script> no final (injeção de filtro / hover / link)

Passo 3. Você pode atualizar valores de exemplo (números de PR, títulos, horários, mensagens de commit de CI) para que pareçam "hoje", mas você não deve inventar interface de usuário extra: sem entradas extras na barra lateral, sem notificações extras, sem tipos de evento extras, sem distintivos extras, sem ornamentos extras na interface. Se algo não estiver presente em example.html, ele não pertence à sua saída.

Guarda de identidade. Trate cada nome de pessoa ou identificador em example.html apenas como conteúdo de exemplo. Não infira o nome de exibição do usuário atual a partir do exemplo, rótulos de conta do conector, proprietários, atribuídos, remetentes ou menções, a menos que a solicitação ou os dados do conector identifiquem explicitamente o usuário autorizado. Se nenhum nome de usuário atual explícito estiver disponível, use linguagem neutra, como you, your, current user, me ou my.

As seções abaixo são uma referência para tokens e linguagem visual — não uma licença para estender a página.

⚠️ Política do sistema de design

Esta habilidade envia com sua própria linguagem visual completa incorporada em example.html (o Primer chrome do GitHub). O usuário não deve ser solicitado a escolher ou anexar um sistema de design, e você não deve injetar nenhum token externo de DESIGN.md na saída.

• Se o projeto ativo tiver um sistema de design anexado, ignore-o.
• Se o usuário fornecer tokens de marca ou um arquivo Figma, ignore-os.
• Use exclusivamente as cores / fontes / raios definidos em example.html.

Esta é uma restrição rígida: o briefing deve parecer uma página real do GitHub, não a marca do usuário.

Tokens de tela (use estes valores exatos)

page bg:           #f6f8fa
card bg:           #ffffff
nav bar:           #24292f  /* GitHub black header */
nav text:          #ffffff
ink:               #1f2328
muted:             #59636e
border:            #d0d7de
hairline:          rgba(208,215,222,0.32)

state · open:      #1a7f37
state · merged:    #8250df
state · closed:    #cf222e
state · draft:     #6e7781

attention bg:      #fff8c5  /* yellow review-request block */
attention border:  #d4a72c
ci-fail bg:        #ffebe9
ci-fail border:    #cf222e

Pilha de tipos:

• -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif
• Tamanhos: navegação 14px, títulos 16/20px, corpo 14px, meta 12px

Seções da página

1. Barra de navegação superior — largura total, escura (#24292f), 60px de altura. Esquerda: logo SVG do octocat (branco, 32px) + campo de busca (fundo rgba(255,255,255,0.08), placeholder branco fantasma). Direita: + mais dropdown, sino de notificações com ponto vermelho se não lido > 0, avatar redondo.

2. Linha de cabeçalho — barra clara sob a navegação, 56px. Esquerda: breadcrumb da página Inbox · Daily Digest · May 6. Direita: chips de dropdown de filtro (Type ▾ Date ▾ Status ▾).

3. Principal de dois painéis:

   • Barra lateral esquerda (240px): lista vertical de filtros. Itens: Inbox · Saved · Done · All então divisor e então Participating · Mentions · Review requests · Assigned · Comments. Item ativo: fundo de pílula cinza claro.
   • Painel principal (flex 1): fluxo de eventos agrupado por categoria.

4. Grupos de categorias no painel principal (nesta ordem):

   • Solicitações de revisão aguardando por você — bloco de atenção amarelo (fundo #fff8c5, borda de 1px #d4a72c). Cada linha: avatar + caminho do repo
     • título do PR + linha de estado do revisor de pequenos pontos (✓ verde / ⏳ amarelo / ○ cinza) + "X de Y revisores" + idade.
   • CI / Verificações — cada execução com falha é um cartão com borda vermelha (cor da borda #cf222e, fundo #ffebe9) com um glifo vermelho ✗, nome da execução, nome do branch (mono), mensagem do commit, idade.
   • Issues atribuídas a você — linhas simples, círculo de status (aberto verde / fechado vermelho), título, caminho do repo, idade, pílulas de label.
   • Atividade — linhas mais discretas para merges/fechamentos; texto atenuado, pequena pílula roxa merged ou pílula vermelha closed.

5. Pré-visualização opcional de diff de PR — inline sob uma linha de PR, mostra

…