HN Show: Haystack – IDE para explorar e editar código em uma tela infinita

• O Haystack é apresentado como uma ferramenta de code review que lê tanto o histórico de conversas quanto as alterações de um PR, encaminhando aos revisores apenas as mudanças que realmente exigem julgamento humano
• PRs limpos são mesclados automaticamente, enquanto PRs arriscados são classificados como candidatos à triagem, com o objetivo de chegar perto de um fluxo com “human code review time to zero”
• O PR de exemplo paralelizou tenancyInit() e cacheWarmup() com Promise.all(), reduzindo o cold start de cerca de 4 segundos para 2,4 segundos, mas revertendo uma decisão anterior sobre a ordem de execução
• O Haystack encontra no histórico de conversas a justificativa de que cacheWarmup deve ser executado depois de tenancyInit e confirma, em um sandbox, 31 crashes em 50 inicializações
• O PR problemático é encaminhado para @maya, que definiu a ordem original, e a decisão de projeto quebrada junto com os resultados de falha são anexados ao PR para reduzir o tempo de julgamento na revisão

---

Fluxo para fazer triagem automática de reviews de PR

• O Haystack lê o histórico de conversas e as alterações de todos os PRs para avaliar o risco
• PRs arriscados são executados e validados de ponta a ponta, envolvendo revisores apenas quando o julgamento humano é necessário
• A tela mostra o Haystack fazendo a triagem de 16 PRs
  • São listados PRs em várias linguagens, como TypeScript, JavaScript, C, Python, Ruby, Go e C++
  • Cada PR aparece com o status analyzing

Exemplo de alteração arriscada: paralelização do bootstrap do serviço

• O PR de exemplo platform#3120 feat: parallelize service bootstrap é uma alteração que paraleliza as etapas de bootstrap do serviço
• O código anterior executava tenancyInit() e, em seguida, cacheWarmup() de forma sequencial
• O código alterado executa as duas tarefas ao mesmo tempo com Promise.all([tenancyInit(), cacheWarmup()])
• Segundo a descrição do PR, o cold start havia aumentado para cerca de 4 segundos e, após a paralelização, caiu para cerca de 2,4 segundos
• Como todos os testes existentes passam, à primeira vista parece uma melhoria de desempenho fácil de aprovar

Decisão de projeto revelada pelo histórico de conversas

• O Haystack lê o histórico por trás do PR e descobre que a alteração reverte uma decisão de projeto anterior
• @maya havia exigido que tenancyInit terminasse primeiro para evitar que cacheWarmup lesse uma configuração vazia
• A suíte de testes não tinha nenhum item que verificasse essa ordem de execução, então a regressão passou nos testes
• O Haystack review anexa as seguintes informações ao PR
  • A decisão registrada no histórico de conversas
  • O comportamento que o PR atual realmente altera
  • O motivo pelo qual os testes passaram

Validação em execução e resultados de falha

• O Haystack não para na leitura do código: ele executa a alteração diretamente
• Quando o histórico de conversas aponta para uma condição de corrida de timing ausente nos testes, ele inicializa o serviço 50 vezes em um sandbox
• Em 31 das 50 execuções, cacheWarmup leu uma configuração vazia antes da conclusão de tenancyInit
• Como resultado, o serviço lançou uma exceção na primeira requisição e travou
• O Haystack QA mostra no PR o motivo da execução, os testes realizados e o ponto quebrado

Onde a revisão humana é necessária

• O Haystack não mescla automaticamente esse PR e recomenda envolver @maya, que definiu a ordem original de execução
• O PR exibe a decisão de projeto quebrada junto com os resultados de inicialização com falha
• A tela de revisão oferece opções como “Request review”, “Chat with @maya” e “Doesn’t need review”
• O fluxo do Haystack se concentra em mesclar automaticamente a maioria dos PRs e encaminhar apenas alterações arriscadas, como a do exemplo, para a pessoa adequada

[GN⁺]

Comentários do Hacker News

• Não sei bem sobre os recursos de IA, mas a ideia de trabalhar com código em um canvas e usar junto uma UI de fluxograma é algo que eu queria havia muito tempo
  Trabalho principalmente com processamento de dados e desenho muitos fluxogramas para explicar pipelines ou para eu mesmo entendê-los
  Uma UI de desenvolvimento nessa linha parece útil para lidar com codebases difíceis de manejar feitas por pessoas sem formação em CS

  • Você está pensando em algo como o LabView?
    https://www.ni.com/en/shop/labview.html
  • Seria parecido com o jeito que o BlueJ faz isso em Java?
  • Fico curioso se o problema que você encontrou está mais para visualizar fluxo de dados ou para visualizar fluxo de controle
  • Seria legal poder rascunhar diagramas e código juntos no mesmo canvas
    Acho que isso tornaria a documentação visual muito mais fácil

• Muito legal. Quando se vai para um método ou declaração, gostei do fato de mostrar só os trechos de código relevantes, em vez de abrir a aba auxiliar com o arquivo inteiro rolado até a definição
  Eu frequentemente perco o método que estava lendo porque preciso comparar onde o método é chamado com a definição, e isso é bem frustrante
  É bom poder “fixar” um método ao lado e examiná-lo sem acabar rolando o arquivo inteiro por engano nessa visão fixada
  Depois de testar um pouco, infelizmente achei a experiência muito centrada no mouse e, ao seguir métodos dentro de outros métodos, acabei com janelas flutuantes demais para gerenciar
  Se houvesse setas ou linhas para rastrear qual janela é a janela “pai”, ficaria mais fácil montar uma espécie de fluxograma
  Tenho minhas ressalvas pessoais, mas é bom ver uma forma diferente de pensar nessa área, e espero que tenha sucesso

  • Entendo por que isso agrada, mas no longo prazo acho que o efeito líquido pode ser negativo
    Acho útil ter ao menos alguma noção de onde as coisas ficam no código
    Será que não dá para passar anos em um projeto trabalhando só com pequenos fragmentos e acabar sem saber o que os arquivos realmente fazem?
  • Programação literária implementa isso em 1D, ou seja, no modo de rolagem vertical, e oferece duas visualizações
    Há o código-fonte original, misturado com comentários e texto, e há um código bem diagramado, com texto formatado e hyperlinks para navegação
    http://literateprogramming.com/
  • Sim, precisamos trabalhar para facilitar mais a navegação por teclado
    Fico curioso sobre o que você imagina como ponto de referência para a “janela pai”
    Você quer poder designar uma janela específica como âncora, ou prefere que alguma heurística encontre essa âncora?

• Parabéns pelo lançamento. Hoje em dia estou indo totalmente na direção oposta, porque isso me ajuda a reduzir a sensação de sobrecarga de ficar pulando de um lado para outro por causa de foco e tendências de ADHD
  Uma janela, minimizar tudo e, mais importante, eliminar a navegação em árvore
  Se preciso ir até um arquivo, uso o menu de itens recentes do Intellij ou salto com marcadores de arquivo
  Isso significa que preciso lembrar dos marcadores de arquivo e ter a intenção de ir até lá. Uso o plugin IdeaVim pelos atalhos do vim
  Para mim, esse jeito torna programar muito mais focado e prazeroso
  Faz parte da mudança de ter saído de múltiplas telas para widescreen e depois voltado para uma única tela
  Em codebases grandes e maduras como as que você mencionou, uso LLMs como guia

  • Como você usa isso? Também queria entender o que você considera uma codebase grande e madura
    Na minha experiência, LLMs cometem bastante erros e suposições mesmo olhando apenas um único arquivo
  • Entendo. Fico curioso sobre como você usa LLMs como guia
    Pela minha experiência, quando pergunto a um LLM onde está o fluxo de uma funcionalidade, ele costuma apontar bem o ponto de entrada, mas os detalhes eu frequentemente preciso descobrir por conta própria, e às vezes ele aponta para algo relacionado, mas diferente do que eu estava procurando

• Interessante. Tenho algumas observações
  O Obsidian tem um recurso parecido chamado “Canvas”, então pode valer a pena olhar esse fluxo de trabalho como referência
  Para mim, como ferramenta independente, não tem utilidade; eu preciso disso como plugin do Idea
  A parte que eu mais odeio é montar o layout. Seria ótimo se houvesse uma IA que recebesse um patch do Git ou uma correção de bug e montasse um layout correspondente
  Compartilhar layouts deveria ser algo muito fácil
  Seria bom integrar o histórico do Git como outra dimensão. Seria ótimo ter diff e marcações de blame dentro do editor
  Existe dado que pode ser usado no treinamento da IA, ou seja, commits do Git
  Também seria bom integrar debugging como outra dimensão, além de dados de profiler

  • Pelo vídeo de demonstração, parece que não é standalone, e sim que roda dentro do VSCode
    Nesse caso, você obtém o que é oferecido ali
    Se você usa ferramentas da linha Idea, por enquanto não parece haver um jeito
  • A ferramenta parece boa e eu gostaria de testá-la no trabalho. Como uso Android/Kotlin, deixo mais um voto por integração com IDEA

• Faz tempo que eu queria experimentar algo assim. Existe alguma forma de receber atualizações?
  Especialmente no início, eu estava esperando por uma opção para desativar os recursos de IA
  Gostei especialmente da função de ampliar para dentro de uma função e ocultar o restante do arquivo. Já me peguei querendo isso um número surpreendente de vezes
  Também parece que daria para usar isso como uma forma de reorganizar virtualmente um único arquivo, puxando facilmente para o lado as funções em que você está trabalhando naquele momento
  Além da interface de edição, acho que há muitas oportunidades de visualização dentro do editor
  A interação entre meu código e dependências de terceiros, o grafo de dependências/chamadas do meu código ou partes dele, o grafo de dependências em nível de classe ou módulo, e grafos de chamadas aninhados com drill-down até chamadas internas de objetos seriam possíveis
  Em todos esses casos, o grande diferencial parece ser conseguir transitar sem atrito entre visualização e edição, que é o que essa ferramenta parece buscar
  Só de colocar gráficos no editor já abre espaço para visualizações ainda mais interessantes, como mapas de calor da frequência de mudanças no código, mapas de calor de desempenho do código, rastreamento de uso de variáveis etc.
  https://adamtornhill.com/articles/crimescene/codeascrimescen...
  Por fim, se você ainda não leu The Programmer's Brain, vale ao menos ouvir este podcast
  https://se-radio.net/2021/06/episode-462-felienne-on-the-pro...
  Há muitas ideias de edição relacionadas à forma como nosso cérebro funciona, e ainda não vi isso ser bem apoiado nos editores
  Como vocês já deram um passo nessa direção, talvez existam ainda mais oportunidades

  • Infelizmente, ainda não criamos uma forma inteligente de se inscrever para receber atualizações
    Vou pensar na melhor maneira de fazer isso e, no fim, vamos enviar atualizações diretamente dentro do produto
    Estou adicionando agora mesmo o opt-out do copilot
    As ideias aqui são boas, e eu gostaria de discutir algumas delas com você. Se não houver problema, vou mandar um email/DM
    No geral, quero conversar com mais pessoas, e vocês podem enviar feedback para [e-mail]

• Gosto muito do jeito de navegar de função para função, de arquivo para arquivo, e depois voltar
  Para ficar ainda mais útil, seria bom ter uma janela de histórico de navegação, como o histórico de visitas de um navegador
  Seria ótimo ver uma lista dos deslocamentos entre arquivos e funções, e poder ir para frente e para trás ou saltar direto para qualquer ponto do histórico sem ter que revirar as janelas abertas
  O histórico de navegação de que estou falando é completamente separado do histórico de edição
  Desfazer/refazer edições não deve mover o histórico de navegação para frente ou para trás, e o contrário também vale
  Claro, pode haver atalhos de teclado para percorrer o histórico de navegação

  • Boa ideia. Vou pensar na melhor forma de implementar isso

• Muito legal. Tem relação com Code Bubbles: https://dl.acm.org/doi/abs/10.1145/1753326.1753706

  • Sim, Bubbles é excelente. Gosto especialmente do conceito de minimapa

• “Não salvamos nem registramos seu código. Enviamos trechos de código para a Open AI como entrada do copilot de navegação. Em breve adicionaremos uma opção para desativar isso.”
  Quando essa opção existir, quero testar

  • Adicionamos o opt-out do copilot de navegação no Mac
    Basta abrir a paleta de comandos (CMD+SHIFT+P) e usar o comando “Opt out of navigational copilot”
    Windows/Linux também serão suportados em breve
    Também vale observar que os dados só são enviados para a Open AI quando há um diagnóstico indicando que uma função inexistente está sendo chamada
  • Tive a mesma reação. Tenho disposição para apoiar o desenvolvimento desse tipo de ferramenta, mas preferiria uma forma mais direta
  • Concordo. Isso deveria ter sido opt-in desde o começo
  • Do jeito que está agora, seria difícil experimentar isso na empresa

• Publiquei um artigo comparando o tempo de navegação entre um editor baseado em canvas (Code Bubbles), um editor tradicional baseado em abas (Eclipse) e um editor baseado em carrossel que eu projetei (Patchworks)
  O resultado foi que o canvas tem liberdade demais
  https://austinhenley.com/pubs/Henley2014CHI_Patchworks.pdf

  • Interessante. Nunca pensei tão a fundo sobre a disposição espacial de uma IDE
    Olhando para trás, percebo que nem no VS Code eu uso mais abas. Porque mantenho arquivos demais abertos
    Acabo vendo só um arquivo por vez e, quando preciso trocar, procuro com Cmd-P ou navego entre arquivos recentes
    Funciona bem, mas exige que eu mantenha sempre os nomes de arquivos/diretórios na cabeça
  • Li só um pouco do artigo, mas pela discussão sobre o Eclipse, parece que os participantes teriam sido bem mais eficientes se o tivessem usado como IDE, em vez de usá-lo mais como um editor com múltiplas abas
    Encontrar métodos provavelmente teria sido muito menos problemático com uma visualização de estrutura em ordem alfabética
  • Muito interessante. Eu fiquei em dúvida entre grade e canvas, mas no fim escolhi canvas porque achei que, na prática, seria mais fácil para navegação
    Se tudo bem, gostaria de conversar e vou mandar um email
  • Interessante. O Patchworks se parece um pouco com a forma como configuro o Doom Emacs
    Mantenho de 4 a 6 painéis de código espalhados por vários workspaces e alterno entre eles com SPC TAB número
  • Excelente análise. Para mim, seja uma abordagem baseada em canvas ou em carrossel, isso sempre reduz a carga de ter que manter na cabeça uma quantidade considerável de dados cognitivos ao lidar com codebases muito grandes
    Na prática, também é necessário ter uma tela widescreen razoável para usar a ferramenta direito
    O principal é se acostumar a lidar com arquivos na horizontal, e não na vertical
    Essa forma vertical de pensar está bem enraizada na maneira como escrevíamos nosso primeiro Hello World

• Parabéns pelo lançamento. Parece uma ferramenta excelente e bem implementada, e estou animado para experimentar.
  Isso me lembra um recurso que eu queria havia muito tempo e até tentei criar manualmente algumas vezes, mas nunca consegui transformar em algo compartilhável: desenrolar um caminho de código em um único script ou arquivo-fonte.
  Seria ótimo poder definir algo como um breakpoint e apertar um botão “unravel” para gerar um único arquivo mostrando tudo o que acontece até aquele ponto.
  Idealmente, seria ainda melhor se esse arquivo pudesse ser executado como um script único.
  Essencialmente, é a mesma visão que um depurador passo a passo oferece, mas em vez de ficar referenciando vários arquivos e várias camadas, eu gostaria de ver tudo em um único arquivo, do começo ao fim.

  • Por que isso é necessário? Que problema você está tentando resolver? Qual é o resultado desejado?
    Acho que, quando as pessoas se concentram em detalhes específicos de implementação em vez de requisitos, parâmetros e resultados, muita coisa se perde na comunicação.
    Fico curioso para saber por que você quer essa implementação e que função ou objetivo ela precisa cumprir.