Claude Code + CMUX: O Terminal Definitivo para Programação com IA

BBetter Stack
Computing/SoftwareInternet Technology

Transcript

00:00:00Este é o Cmux, um terminal feito para agentes de codificação que lhes dá a habilidade de abrir
00:00:04e controlar um navegador, criar subagentes em painéis diferentes, enviar notificações personalizadas
00:00:09e muito mais através de um CLI e uma API de socket.
00:00:13Mas com tantos outros agentes de terminal como Warp, Solotam e Dmux, o que torna o Cmux tão
00:00:19especial?
00:00:20Inscreva-se no canal e vamos conferir.
00:00:24Apesar do nome, o Cmux não tem nada a ver com o tmux; é um app nativo para Mac construído sobre
00:00:30a libghosty que usa um navegador webkit e o bun-split para o layout, como abas, painéis e
00:00:36assim por diante.
00:00:37Mas a verdadeira mágica está na forma como o agente se comunica com o app.
00:00:41Deixe-me mostrar.
00:00:42Após instalar e configurar o Cmux, vemos um terminal de aparência comum que
00:00:46suporta abas, divisões de tela (splits) verticais ou horizontais, e podemos ter abas dentro
00:00:53dessas divisões se quisermos também.
00:00:55Com o Cmux instalado, também temos acesso ao CLI do Cmux, que nos dá opções
00:01:00para várias coisas, como criar novos workspaces e painéis divididos, exibir informações como
00:01:06logs e progresso na barra lateral e até usar comandos compatíveis com o tmux.
00:01:11Tudo isso graças ao Unix socket do Cmux, do qual falaremos mais tarde.
00:01:15Mas vamos fazer algo interessante.
00:01:16Primeiro, vou limpar isso e abrir o Claude Code. Podemos ver que ele
00:01:20mudou o título da barra lateral; vou mudar o modelo para o Haiku para não gastar
00:01:25tokens desnecessários.
00:01:26Então, vou pedir ao Claude para usar o CLI do Cmux para abrir o navegador em um novo painel,
00:01:30navegar até o google.com, digitar “hello world” no campo de busca e pesquisar.
00:01:36Ao dar enter, o Claude começará a agir.
00:01:38Aqui ele está aprendendo a usar o Cmux.
00:01:40Ele abriu a nova aba no Google.
00:01:42E vamos ver se ele realiza a busca.
00:01:44Ok, ele está começando a processar.
00:01:45E ele pesquisou por “hello world”.
00:01:47A busca foi feita perfeitamente.
00:01:49E eu posso até pedir para ele clicar em links.
00:01:51Digamos que eu queira clicar neste link do IMDb aqui, posso dizer: “clique no link hello
00:01:55world do IMDb”.
00:01:57E o Claude fará exatamente isso.
00:01:59O que é muito legal é que, mesmo dentro deste navegador em painel dividido, tenho acesso às
00:02:04ferramentas de desenvolvedor, o que ajuda a debugar as páginas em que estou trabalhando.
00:02:07Tudo isso é feito com comandos de navegador similares à API do navegador de agentes da Cells.
00:02:12O benefício dessa visualização lado a lado de navegador e terminal é que o agente pode
00:02:16navegar pelo browser, fazer testes e enviar os resultados, que você vê
00:02:20como desenvolvedor em tempo real.
00:02:21Vamos tentar outra coisa.
00:02:22Vou fechar esta aba e limpar todas estas informações.
00:02:25Vou pedir ao Claude para criar duas instâncias de si mesmo em painéis divididos: uma para entender
00:02:30o projeto e outra para analisar o código deste projeto.
00:02:33E quando terminarem, devem devolver as informações para a instância principal do Claude
00:02:38e então fechar os painéis.
00:02:39Ao dar enter, ele cria dois painéis e abre o Claude em ambos.
00:02:45Agora vemos ele dando instruções, o que é incrível de ver em tempo real.
00:02:50Os painéis que não estão selecionados ficam escuros, então podemos clicar neles para
00:02:53destacá-los.
00:02:54Vou acelerar esta parte do vídeo, pois vai demorar um pouco.
00:02:57Agora que ambas as divisões terminaram, o Claude as fechou automaticamente e obteve informações
00:03:02da primeira instância aqui e da segunda instância logo abaixo, o que é muito bacana.
00:03:07Você pode imaginar muitos usos para isso, como verificar permissões em diferentes subagentes
00:03:11para garantir que eles não fiquem travados.
00:03:12Mas um problema com a demonstração que acabei de fazer é que, sempre que um deles recebia uma
00:03:16notificação ou precisava da minha ajuda, não havia uma forma fácil de eu saber.
00:03:21Mas, felizmente, o Cmux facilita isso.
00:03:23Vamos tentar outra coisa.
00:03:24Em uma nova sessão do Claude Code, vou dar um comando para criar uma nova instância do
00:03:28Claude em um painel dividido usando o Cmux e, naquele painel, pedir para ele estudar e sugerir
00:03:33melhorias de código para este projeto.
00:03:36Ao terminar, ele deve escrever uma notificação apropriada usando o Cmux e disparar um alerta visual para chamar minha
00:03:40atenção.
00:03:41O comando ativa uma borda azul piscante no painel especificado.
00:03:45Enquanto isso acontece, vou criar um novo workspace e rodar o
00:03:48Open Code aqui.
00:03:49A beleza do Cmux é que, por ser um CLI, ele pode rodar com qualquer estrutura de agente.
00:03:54Assim que termino de abrir o Open Code, vemos que temos uma notificação do Cmux.
00:03:58Ao clicar no sino, vemos que a análise paralela começou, então ainda não terminou.
00:04:03Mas se eu clicar na notificação, ele me mostra o painel direito que contém a informação.
00:04:07Ele não fez exatamente o que pedi, então vou dizer para ele repetir.
00:04:10E enquanto isso, vamos voltar ao Open Code e fazer o que eu pretendia
00:04:13originalmente: usar o CLI do Cmux para adicionar o nome da branch do projeto e usar
00:04:19um ícone apropriado ao lado do nome dessa branch.
00:04:21Vou dar enter e deixá-lo trabalhar. Vemos outra notificação
00:04:25do Cmux dizendo que a análise paralela começou, e parece que desta vez começou
00:04:29corretamente.
00:04:30Podemos até ver a mensagem dentro da barra lateral.
00:04:32Agora que terminou,
00:04:33vou pedir para fechar o painel dividido e limpar o texto da barra lateral.
00:04:36Vemos aqui que ele adicionou o nome da branch com um ícone apropriado; antes
00:04:40eu disse “SF icons”, mas na verdade eu quis dizer “SF symbol”, e fico feliz que ele tenha entendido.
00:04:45E aqui vemos que ele fechou o painel e removeu o texto que estava na barra lateral.
00:04:49Todos esses exemplos foram bem simples, mas espero que deem um vislumbre das
00:04:52coisas poderosas que o terminal Cmux pode fazer quando um agente tem controle sobre ele.
00:04:57E eu nem mostrei recursos incríveis como poder usar uma barra de
00:05:00progresso, adicionar cores personalizadas ao workspace, usar os agentes para renomear abas,
00:05:05exibir todas as opções na paleta de comandos e o fato de que o Cmux pode ler e aplicar sua
00:05:10configuração do Ghosty.
00:05:11Usei o Cmux sem nenhum hook ou skill e desativei o sandbox no Claude Code porque
00:05:16eu teria recebido este erro, mas recomendo fortemente que você obtenha as skills de core
00:05:20e browser para o Cmux feitas pelo criador, e também o configure com hooks do Claude Code para enviar
00:05:26notificações automaticamente ou até escrever um script personalizado.
00:05:29Tudo isso torna o Cmux muito mais útil, mas eu gostaria que houvesse uma forma mais fácil de configurar
00:05:33isso do zero, em vez de ter que copiar e colar manualmente as skills e notificações
00:05:38nos lugares certos.
00:05:39Assim como o skills.sh detecta automaticamente qual estrutura de agente você tem e aplica
00:05:43a skill no diretório correto, eu gostaria que o Cmux fizesse o mesmo para ajudar na
00:05:48configuração completa.
00:05:49Mas o Cmux já é uma ferramenta fantástica e tenho certeza de que um script de setup pode ser adicionado depois.
00:05:53Gostei muito do fato de ser um app nativo para Mac, o que é bom para memória e desempenho,
00:05:58e o fato de o CLI se comunicar com o app via JSON através de Unix sockets, o que
00:06:02torna a comunicação rápida e simples.
00:06:04Falando em rápido e simples, você sabia que existe um banco de dados 138 vezes mais rápido que o
00:06:10SQLite escrito em Rust chamado StoolLab? Você pode aprender tudo sobre ele neste vídeo do
00:06:17Andris.

Key Takeaway

O Cmux redefine a experiência de desenvolvimento com IA ao fornecer um terminal nativo onde agentes podem interagir diretamente com navegadores, interfaces de comando e sistemas de notificação em tempo real.

Highlights

Cmux é um terminal nativo para Mac baseado na biblioteca Ghosty, integrando navegador WebKit e o runtime Bun.

A ferramenta permite que agentes de IA, como o Claude Code, controlem o navegador e criem subagentes em painéis divididos.

Possui uma CLI e uma API de socket Unix que permite a comunicação rápida entre o agente e a interface do usuário.

O sistema de notificações visuais, como bordas piscantes e ícones na barra lateral, melhora o monitoramento de tarefas paralelas.

Suporta a execução de múltiplos fluxos de trabalho simultâneos através de workspaces e divisões de tela customizáveis.

Timeline

Introdução ao Cmux e Arquitetura

O vídeo inicia apresentando o Cmux como um terminal inovador projetado especificamente para agentes de codificação. Diferente do tmux tradicional, ele é um aplicativo nativo para macOS construído com a biblioteca Ghosty e utiliza o motor WebKit para renderizar um navegador interno. O apresentador destaca que a principal vantagem reside na habilidade do agente em controlar elementos de interface como abas e painéis. Esta seção explica que o layout é gerenciado pelo Bun-split, garantindo uma performance fluida. É estabelecida a premissa de que o diferencial do Cmux é a forma como o agente de IA se comunica nativamente com o terminal.

Interface e Integração com Claude Code

Neste segmento, vemos a demonstração prática da interface que suporta divisões de tela verticais e horizontais complexas. O apresentador utiliza o Claude Code para comandar a abertura de um navegador em um painel lateral e realizar buscas no Google de forma automatizada. É mostrado como o Claude consegue interagir com elementos da página web, como clicar em links específicos do IMDb. A integração permite que o desenvolvedor utilize as ferramentas de inspeção (DevTools) dentro do próprio terminal para depuração. Essa visualização lado a lado é crucial para que o agente execute testes e o usuário acompanhe o progresso instantaneamente.

Subagentes em Paralelo e Automação de Tarefas

O vídeo explora a capacidade do Cmux de gerenciar instâncias recursivas da IA para acelerar a análise de projetos. O usuário solicita que o Claude crie dois subagentes em painéis distintos: um para entender a estrutura do projeto e outro para analisar o código técnico. Uma vez que as tarefas são concluídas, os subagentes devolvem os relatórios para a instância principal e fecham os painéis automaticamente. Esta funcionalidade demonstra o poder da computação paralela orientada a agentes dentro de um único ambiente de terminal. O sistema escurece painéis inativos para manter o foco visual do desenvolvedor na tarefa principal.

Sistemas de Notificação e Workspaces

O apresentador aborda o problema de monitorar agentes que rodam em segundo plano e apresenta a solução de notificações do Cmux. É demonstrado o uso de alertas visuais, como uma borda azul piscante e ícones de sino na barra lateral, para indicar a conclusão de tarefas. O exemplo prático envolve pedir melhorias de código enquanto o usuário trabalha em outro workspace com o Open Code. O Cmux permite que o agente altere metadados da interface, como adicionar ícones de branch do sistema (SF Symbols) aos títulos dos painéis. Esta orquestração via CLI garante que o desenvolvedor nunca perca o contexto de processos longos.

Recursos Adicionais e Considerações Finais

Na conclusão, são mencionados recursos avançados como barras de progresso customizadas, cores de workspace e a capacidade de ler configurações do Ghosty. O autor sugere o uso de "skills" e "hooks" específicos para automatizar ainda mais o envio de notificações e scripts personalizados. Embora aponte que a configuração inicial poderia ser mais automatizada, ele elogia o desempenho do app nativo e a velocidade da API JSON via Unix sockets. O vídeo encerra reforçando que o controle total do agente sobre o terminal abre portas para um novo patamar de produtividade. Por fim, há uma breve menção ao banco de dados StoolLab como uma alternativa rápida ao SQLite.

Community Posts

View all posts