IA
Janela de contexto
Quanto do contexto cada parte ocupa e os limites de uso.
Exemplo
Janela de contexto820k / 1M (82%)
- Sistema52k
- Ferramentas118k
- Mensagens310k
- Arquivos240k
- Memória100k
- Livre180k
Limites de uso do plano
Limite de 5 horasReinicia em 2 h 46 min38%
Semanal, todos os modelosReinicia em 3 d3%
Semanal, modelo avançadoReinicia em 3 d5%
Janela de contexto
Uso por categoria e limites do plano, com os valores contando ao entrar na tela.
<article class="u-ai-card">
<div class="u-ai-card__panel" data-u="ai-context" role="group" aria-label="Demonstração: janela de contexto e limites de uso">
<div class="u-ai-tile u-ai-ctx">
<div class="u-ai-ctx__head"><span>Janela de contexto</span><b class="u-ai-ctx__total">820k / 1M (82%)</b></div>
<div class="u-ai-ctx__bar" aria-hidden="true">
<i class="u-ai-ctx__seg" style="width:5.2%;background:var(--c1)"></i>
<i class="u-ai-ctx__seg" style="width:11.8%;background:var(--c2)"></i>
<i class="u-ai-ctx__seg" style="width:31%;background:var(--c3)"></i>
<i class="u-ai-ctx__seg" style="width:24%;background:var(--c4)"></i>
<i class="u-ai-ctx__seg" style="width:10%;background:var(--c6)"></i>
</div>
<ul class="u-ai-ctx__legend">
<li><i style="background:var(--c1)"></i>Sistema<b data-val="52">52k</b></li>
<li><i style="background:var(--c2)"></i>Ferramentas<b data-val="118">118k</b></li>
<li><i style="background:var(--c3)"></i>Mensagens<b data-val="310">310k</b></li>
<li><i style="background:var(--c4)"></i>Arquivos<b data-val="240">240k</b></li>
<li><i style="background:var(--c6)"></i>Memória<b data-val="100">100k</b></li>
<li><i style="background:var(--sunken);box-shadow:0 0 0 1px var(--line-2)"></i>Livre<b>180k</b></li>
</ul>
<p class="u-ai-ctx__sub">Limites de uso do plano</p>
<div class="u-ai-ctx__limits">
<div class="u-ai-limit"><span class="u-ai-limit__name">Limite de 5 horas<span class="u-ai-limit__rs">Reinicia em 2 h 46 min</span></span><b class="u-ai-limit__pct">38%</b><div class="u-ai-limit__track"><div class="u-ai-limit__fill" data-pct="38" style="background:var(--c2);transform:scaleX(.38)"></div></div></div>
<div class="u-ai-limit"><span class="u-ai-limit__name">Semanal, todos os modelos<span class="u-ai-limit__rs">Reinicia em 3 d</span></span><b class="u-ai-limit__pct">3%</b><div class="u-ai-limit__track"><div class="u-ai-limit__fill" data-pct="3" style="background:var(--c3);transform:scaleX(.03)"></div></div></div>
<div class="u-ai-limit"><span class="u-ai-limit__name">Semanal, modelo avançado<span class="u-ai-limit__rs">Reinicia em 3 d</span></span><b class="u-ai-limit__pct">5%</b><div class="u-ai-limit__track"><div class="u-ai-limit__fill" data-pct="5" style="background:var(--c4);transform:scaleX(.05)"></div></div></div>
</div>
</div>
</div>
<div class="u-ai-card__text">
<h3 class="u-ai-card__title">Janela de contexto</h3>
<p class="u-ai-card__desc">Uso por categoria e limites do plano, com os valores contando ao entrar na tela.</p>
</div>
</article>Instalação
Janela de contexto vem no pacote completo, junto com a skill:
curl -fsSL unslop.leallabs.dev/i | shO HTML do exemplo, pra colar:
curl -fsSL unslop.leallabs.dev/i | sh -s add ai-contextUsa O bloco é só o HTML. O CSS e o JS vêm de unslop.css e unslop.js do pacote completo.
Classes e variantes
| Classe | O que faz |
|---|---|
.u-ai-ctx | Barra: __bar com __seg (largura em %) e __legend. |
.u-ai-limit | Limite: __name, __pct, __track, __fill[data-pct]. |
Acessibilidade e teclado
Estado e papéis
| Onde | Atributo | O que diz |
|---|---|---|
.u-ai-card__panel | role="group" e aria-label | Diz que é uma demonstração e do quê. |
Teclado
| Tecla | Faz |
|---|---|
| Tab | entra no card e pausa a animação enquanto o foco está lá |
Movimento
Toca sozinho quando entra na tela, por até 3 ciclos, e para no estado final. Ponteiro em cima ou foco dentro pausam. Com movimento reduzido, mostra direto o estado final.
Eventos e API
Nenhum evento público. Pra um chat de verdade, copie a marcação e ligue o seu estado, sem depender do data-u pra lógica.