P3: Input box com autocomplete dropdown, modo Agent/Plan/Yolo, contador de tokens

[chapzin]

Problema

O input atual e um Paragraph simples com scroll (src/tui/ui_input.rs). Nao tem borda estilizada, autocomplete visual, indicador de modo, ou contador de tokens.

O que precisa ser feito

1. Borda estilizada

• Moldura sutil ao redor da area de input:

┌─ input ──── [Agent] ──── 1.2k tokens ─┐
│ > sua mensagem aqui...                 │
└────────────────────────────────────────┘

• Cantos arredondados com caracteres Unicode (╭╮╰╯)
• Cor da borda: accent quando focado, dim quando nao

2. Dropdown de autocomplete

• Aparece acima do input (flutuante)
• Lista de sugestoes filtradas conforme digita:
  • Comandos slash (/theme, /model, /init, etc.)
  • Skills disponiveis (/skill-name)
  • Arquivos do projeto (@filename)
  • Mencao de agentes (@agent-name)
• Navegacao: Tab/Shift+Tab ou setas
• Enter seleciona, Esc fecha
• Highlight da correspondencia parcial
• Max 8 itens visiveis com scroll

3. Indicador de modo

• Mostrar modo atual: [Agent], [Plan], [Yolo]
• Cores por modo:
  • Agent: roxo/accent (rgb(186,139,255))
  • Plan: azul (rgb(100,180,255))
  • Yolo: vermelho (rgb(255,100,100))
• Clicavel para alternar (ou /mode)

4. Contador de tokens

• Mostrar estimativa de tokens na mensagem atual
• Atualizar em tempo real enquanto digita
• Formato: "1.2k tokens" ou "234 tokens"
• Alerta visual se aproximar do limite

5. Altura dinamica

• Scroll suave quando multiplas linhas
• Maximo 10 linhas visiveis (ja implementado)
• Indicador de scroll quando ha mais linhas acima

Arquivos a modificar

• src/tui/ui_input.rs — redesenho completo
• src/tui/ui.rs — integracao com autocomplete
• src/tui/app/ — comandos de modo
• crates/jcode-tui-style/src/theme.rs — cores do input