From 6048ffb7a0b1b08dfbe9f728e27a8159daa2465e Mon Sep 17 00:00:00 2001 From: Phelipe Lorran <112786693+httpsphl@users.noreply.github.com> Date: Thu, 1 Oct 2026 10:46:30 -0300 Subject: [PATCH] fix(app): keep the composer on one row in a narrow chat The toolbar wrapped into two rows when the chat got narrow (a small screen or the browser panel open). It now stays on one row: the mode shows only its icon, the menus drop their chevrons and the model name truncates last. In the bot header the handle gives way before the name, and Pause and Restart show only their icon when the header is narrow. --- app/src/features/bots/BotHeader.tsx | 25 +++++++++++++++++-------- app/src/features/chat/ChatComposer.tsx | 6 +++--- app/src/features/chat/ModePicker.tsx | 6 +++--- app/src/features/chat/ModelPicker.tsx | 2 +- docs/spec.md | 2 +- 5 files changed, 25 insertions(+), 16 deletions(-) diff --git a/app/src/features/bots/BotHeader.tsx b/app/src/features/bots/BotHeader.tsx index 8ab746ca..f48f272b 100644 --- a/app/src/features/bots/BotHeader.tsx +++ b/app/src/features/bots/BotHeader.tsx @@ -74,12 +74,16 @@ export function BotHeader({ ); return ( -
+ // In a narrow window the handle gives way first, then the button labels. +

{bot.name}

- + @{bot.handle}
@@ -99,16 +103,16 @@ export function BotHeader({
{bot.paused ? ( - ) : ( - )} - {confirming && ( diff --git a/app/src/features/chat/ModelPicker.tsx b/app/src/features/chat/ModelPicker.tsx index 5c5ba63d..8c3f7c99 100644 --- a/app/src/features/chat/ModelPicker.tsx +++ b/app/src/features/chat/ModelPicker.tsx @@ -89,7 +89,7 @@ export function ModelPicker({ bot, onLater }: { bot: Bot; onLater(text: string): diff --git a/docs/spec.md b/docs/spec.md index 9c50d4e0..cb5de9ce 100644 --- a/docs/spec.md +++ b/docs/spec.md @@ -752,7 +752,7 @@ Layout, como um app de mensagens: - **Modelo do bot**, no compositor, ao lado do botão de enviar: mostra o modelo em uso ("Opus 5.5"; antes do primeiro turno, o nome escolhido ou "Padrão") e abre um menu para cima, "Modelo", com Padrão do plano, Fable, Opus, Sonnet e Haiku. Cada um tem uma linha que fala do bot pelo nome ("Scout fica rápido e capaz, bom para quase tudo"; o padrão diz qual modelo é hoje), e o pé do menu lembra que modelos mais capazes gastam o limite do plano mais rápido. A janela de criar e editar bot tem a mesma escolha. Com o bot ocupado, a mesma linha acima do compositor avisa que ele troca quando terminar. - **Esforço do bot** (7.4), no compositor, ao lado do modelo: um botão com o nível em uso ("Médio") abre para cima "Esforço", um controle deslizante de cinco pontos, de "Mais rápido" a "Mais inteligente" (Baixo, Médio, Alto, Extra alto, Máximo), como o dos apps do Claude. O ponto **recomendado** vem marcado: é o nível que o modelo do bot usa sozinho (`effortDefault`). Embaixo, o nome do nível e uma linha que fala do bot pelo nome ("Scout equilibra rapidez e raciocínio, bom para quase tudo"); o pé lembra que mais esforço gasta o limite do plano mais rápido e, fora do recomendado, traz "Usar o recomendado". As palavras seguem o controle na hora, mas o bot só é avisado quando o controle fica 400 ms num ponto ou o menu fecha, para não reiniciar a cada passo. Parar no ponto recomendado grava `default`: o bot segue o nível do modelo, também depois de trocar de modelo. Enquanto o Claude Code não disse o nível do modelo, nada vem marcado e o botão diz só "Esforço". Num modelo sem níveis (Haiku) o botão fica apagado e o menu explica, sem o controle. Com o bot ocupado, a linha acima do compositor avisa que ele muda quando terminar. - **Espaço da conversa** (8.6), no compositor, antes do esforço: um anel que enche com a parte da janela em uso e passa à cor de aviso a partir de 80% do caminho até a compactação automática. Um clique abre "Espaço da conversa": o uso ("556k / 1M (56%)"), uma barra com a marca de onde a conversa se compacta sozinha, quanto falta para isso ("Faltam 411k para ela se compactar sozinha, em 967k"), uma linha dizendo que conversa mais cheia gasta mais do plano a cada mensagem, e **Compactar agora** (`bots.compact`), com a linha do que isso faz. Durante a compactação o botão diz "Compactando…" e o anel pulsa; com o bot ocupado, a linha acima do compositor avisa que ele compacta quando terminar; com o bot parado, o botão fica desligado e diz por quê. Sem `Bot.context`, o anel não aparece. No chat, a compactação vira um aviso no idioma do dono: feita a pedido, feita sozinha porque a conversa encheu, ou o motivo de não ter dado. -- Num chat estreito, o que fica à direita no compositor (espaço, esforço, modelo e enviar) desce para uma linha própria, o esforço mostra só o ícone e o nome do modelo é cortado, em vez de tudo sair da caixa. +- Num chat estreito, a linha de baixo do compositor nunca se divide em duas: o modo e o esforço mostram só o ícone, as setinhas dos menus somem e o nome do modelo é cortado por último, em vez de tudo sair da caixa. No cabeçalho, o @ do bot é cortado antes do nome, e Pausar e Reiniciar mostram só o ícone (o nome fica na dica e para o leitor de tela). - **Área principal com uma crew:** a timeline (messages entre os bots e do dono) e as tasks. Embaixo do nome, "Trabalha em ", que abre a pasta no Explorer; o menu da crew tem "Abrir pasta de trabalho" e "Mudar pasta de trabalho…", que abre o seletor de pastas do Windows e confirma antes de mudar, avisando que cada bot reinicia quando terminar o que está fazendo. - **Nova crew:** nome; "Para que é esta equipe?", o objetivo que vira as instruções do chefe, com a explicação de que a equipe começa com um Chefe que planeja o trabalho e sugere os bots de que precisa; "Pasta de trabalho", com "Escolher pasta…" (o seletor do Windows; sem escolha, "Uma pasta nova dentro do Botloft", a `shared\`); e "Modelo do Chefe". Criada, o app abre o chat do chefe. - **Chefe:** uma coroa ao lado do nome na barra lateral e nos cartões da crew, e "Chefe" no cabeçalho do bot, com a dica "Lidera : planeja o trabalho e sugere bots novos". O menu do bot tem "Tornar chefe da equipe" ou "Deixar de ser chefe".