Présentation HN : Haystack – un IDE pour explorer et éditer du code sur un canevas infini
(haystackeditor.com)- Haystack est présenté comme un outil de revue de code qui lit à la fois l’historique des discussions et les changements d’une PR, afin de ne transmettre aux relecteurs que les modifications qui nécessitent réellement un jugement humain
- Les PR propres sont fusionnées automatiquement, tandis que les PR risquées sont classées comme à examiner, avec pour objectif un flux proche de « human code review time to zero »
- Dans l’exemple de PR,
tenancyInit()etcacheWarmup()sont parallélisés avecPromise.all(), ce qui réduit le démarrage à froid d’environ 4 secondes à 2,4 secondes, mais revient sur une décision antérieure concernant l’ordre d’exécution - Haystack trouve, dans l’historique des discussions, la justification selon laquelle
cacheWarmupdoit s’exécuter aprèstenancyInit, puis constate dans un sandbox 31 plantages sur 50 démarrages - La PR problématique est transmise à
@maya, qui avait défini l’ordre initial ; la décision de conception cassée et les résultats d’échec sont joints à la PR pour réduire le temps nécessaire au jugement de revue
Un flux pour sélectionner automatiquement les PR à relire
- Haystack lit l’historique des discussions et les changements de chaque PR afin d’en évaluer le risque
- Les PR risquées sont exécutées de bout en bout pour validation, et les relecteurs ne sont sollicités que lorsqu’un jugement humain est nécessaire
- L’écran montre Haystack en train de trier 16 PR
- Des PR dans plusieurs langages sont listées : TypeScript, JavaScript, C, Python, Ruby, Go, C++, etc.
- Chaque PR est affichée avec l’état
analyzing
Exemple de changement risqué : parallélisation du bootstrap d’un service
- L’exemple de PR
platform#3120 feat: parallelize service bootstrapmodifie le processus en parallélisant les étapes de bootstrap du service - Le code existant exécute d’abord
tenancyInit(), puiscacheWarmup()de façon séquentielle - Le nouveau code exécute les deux tâches simultanément avec
Promise.all([tenancyInit(), cacheWarmup()]) - D’après la description de la PR, le démarrage à froid avait atteint environ 4 secondes, et tombe à environ 2,4 secondes après parallélisation
- Tous les tests existants passent, ce qui donne en apparence une amélioration de performance facile à approuver
Une décision de conception révélée par l’historique des discussions
- Haystack lit l’historique derrière la PR et découvre que le changement revient sur une décision de conception antérieure
@mayaavait exigé quetenancyInitse termine d’abord, afin quecacheWarmupne lise pas une configuration vide- La suite de tests ne contient aucun cas vérifiant cet ordre d’exécution, ce qui permet à la régression de passer les tests
- La revue Haystack ajoute les informations suivantes à la PR
- La décision conservée dans l’historique des discussions
- Le comportement que la PR actuelle modifie réellement
- La raison pour laquelle les tests passent
Vérification à l’exécution et résultats d’échec
- Haystack ne s’arrête pas à la lecture du code : il exécute directement les changements
- Comme l’historique des discussions indique une condition de concurrence liée au timing absente des tests, il démarre le service 50 fois dans un sandbox
- Dans 31 cas sur 50,
cacheWarmuplit une configuration vide avant la fin detenancyInit - Le service lève alors une exception dès la première requête et plante
- Haystack QA affiche dans la PR la raison de l’exécution, les tests effectués et le point de rupture
Le point où une revue humaine est nécessaire
- Haystack ne fusionne pas automatiquement cette PR et recommande d’impliquer
@maya, qui avait défini l’ordre d’exécution initial - La PR affiche à la fois la décision de conception cassée et les résultats de démarrage échoués
- L’écran de revue propose des options comme « Request review », « Chat with @maya » et « Doesn’t need review »
- Le flux de Haystack vise à fusionner automatiquement la plupart des PR et à transmettre uniquement les changements risqués, comme dans cet exemple, à la bonne personne
1 commentaires
Avis de Hacker News
Je ne suis pas sûr des fonctionnalités d’IA, mais l’idée de travailler sur du code dans un canvas et d’utiliser en parallèle une UI de diagramme de flux, c’est quelque chose que j’attends depuis longtemps
Je fais surtout du traitement de données, et je dessine beaucoup de diagrammes de flux pour expliquer des pipelines ou les comprendre moi-même
Une UI de développement dans cette direction pourrait être utile pour gérer des codebases difficiles à manipuler, créées par des personnes qui ne viennent pas de l’informatique
https://www.ni.com/en/shop/labview.html
La documentation visuelle deviendrait beaucoup plus simple
Vraiment cool. Quand on va vers une méthode ou une déclaration, j’aime le fait que cela n’ouvre pas tout le fichier dans un onglet secondaire défilé jusqu’à la définition, mais affiche seulement le fragment de code pertinent
Je dois souvent comparer l’endroit où une méthode est appelée et sa définition, et je perds souvent la méthode que j’étais en train de lire, ce qui est assez frustrant
C’est bien de pouvoir “épingler” une méthode sur le côté et la parcourir dans une vue épinglée sans risquer de faire défiler tout le fichier par erreur
Après un bref essai, malheureusement, c’était très centré sur la souris, et en suivant des méthodes à l’intérieur d’autres méthodes je me suis retrouvé avec trop de fenêtres flottantes à gérer
S’il y avait des flèches ou des lignes permettant de suivre quelle fenêtre est la fenêtre “parente”, il serait plus facile de créer une sorte de diagramme de flux
J’ai quelques réserves personnelles, mais je suis content de voir une autre manière de penser dans ce domaine, et je leur souhaite de réussir
Je trouve bénéfique d’avoir une certaine idée de ce qui se trouve où dans le code
On pourrait finir par travailler pendant des années sur un projet en ne regardant que de petits morceaux, sans savoir ce que font réellement les fichiers
Le code source mêlé de commentaires et de texte, et une version joliment mise en page, avec texte formaté et hyperliens de navigation
http://literateprogramming.com/
Je suis curieux de savoir ce que vous imaginez comme point de référence pour la “fenêtre parente”
Voulez-vous pouvoir définir une fenêtre précise comme ancre, ou souhaitez-vous qu’une heuristique trouve ce genre d’ancre ?
Félicitations pour le lancement. En ce moment je vais dans la direction complètement opposée, ce qui m’aide à moins me sentir submergé quand je saute partout à cause de ma concentration et de mes tendances ADHD
Une seule fenêtre, tout minimiser, et surtout supprimer l’exploration arborescente
Si je dois aller vers un fichier, j’utilise le menu des éléments récents d’IntelliJ ou je saute vers un marqueur de fichier
Cela signifie que je dois me souvenir des marqueurs de fichier et avoir l’intention d’y aller. J’utilise le plugin IdeaVim pour les raccourcis vim
Pour moi, cette manière de faire rend la programmation beaucoup plus concentrée et agréable
Cela fait partie d’une évolution où je suis passé du multi-écran au grand écran, puis revenu à un écran unique
Pour les codebases volumineuses et matures comme celles mentionnées, j’utilise un LLM comme guide
D’après mon expérience, les LLM font pas mal d’erreurs et d’hypothèses même avec un seul fichier
D’après mon expérience, quand je demande à un LLM où se trouve le flux d’une fonctionnalité, il me donne de bons points d’entrée, mais je dois souvent comprendre moi-même les détails, et parfois il pointe vers un endroit lié, mais différent de ce que je cherchais
Intéressant. Quelques notes
Obsidian a une fonctionnalité similaire appelée “Canvas”, donc ce workflow pourrait être une source d’inspiration
Pour moi, en tant qu’outil autonome, ce n’est pas utile ; il me le faut sous forme de plugin Idea
Ce que j’aime le moins, c’est la création de la mise en page. J’aimerais qu’il y ait une IA qui prenne un patch Git ou une correction de bug et crée une mise en page adaptée
Le partage des mises en page devrait être très simple
Ce serait bien d’intégrer l’historique Git comme une autre dimension. Ce serait encore mieux avec le diff et les annotations blame directement dans l’éditeur
Il existe des données utilisables pour entraîner l’IA : les commits Git
Ce serait bien aussi d’intégrer le débogage comme une autre dimension, ainsi que les données du profiler
On récupère donc tel quel ce que celui-ci fournit
Si vous utilisez les outils de la famille Idea, il ne semble pas y avoir de solution pour l’instant
Cela faisait longtemps que je voulais essayer quelque chose comme ça. Y a-t-il un moyen de recevoir les mises à jour ?
J’attends surtout, même pour un premier essai, une option pour désactiver les fonctions d’IA
La possibilité de zoomer à l’intérieur d’une fonction et de masquer le reste du fichier est particulièrement intéressante. Il y a eu étonnamment beaucoup de moments où j’ai voulu quelque chose comme ça
On pourrait aussi l’utiliser pour faire glisser facilement sur le côté les fonctions sur lesquelles on travaille dans un même fichier, et ainsi réorganiser virtuellement un fichier unique
Au-delà de l’interface d’édition, je pense qu’il y a beaucoup d’occasions de visualisation dans un éditeur
On pourrait visualiser les interactions entre mon code et les dépendances tierces, le graphe de dépendances/d’appels de mon code ou une partie de celui-ci, des graphes de dépendances au niveau des classes ou des modules, ou encore des graphes d’appels imbriqués permettant de descendre jusqu’au graphe des appels internes d’un objet
Dans tous ces cas, pouvoir passer sans friction de la visualisation à l’édition est la killer feature vers laquelle cet outil semble tendre
Le simple fait d’intégrer du graphisme dans l’éditeur ouvre la voie à beaucoup d’autres visualisations intéressantes : heatmaps de fréquence de modification du code, heatmaps de performance du code, suivi de l’usage des variables, etc.
https://adamtornhill.com/articles/crimescene/codeascrimescen...
Enfin, si vous n’avez pas lu The Programmer's Brain, ce podcast vaut au moins le détour
https://se-radio.net/2021/06/episode-462-felienne-on-the-pro...
Il y a beaucoup d’idées d’édition liées au fonctionnement de notre cerveau, mais je n’ai pas encore vu d’éditeur bien les prendre en charge
Comme vous avez déjà fait un pas dans cette direction, il y a peut-être encore beaucoup d’occasions à saisir
Je vais réfléchir à la meilleure façon de faire, et à terme nous pousserons les mises à jour directement dans le produit
Nous sommes justement en train d’ajouter l’opt-out de copilot
Les idées ici sont bonnes, et j’aimerais en discuter de certaines avec vous. Si cela vous va, je vous enverrai un e-mail/DM
Plus généralement, j’aimerais échanger avec plusieurs personnes, et vous pouvez envoyer vos retours à feedback@haystackeditor.com
J’aime vraiment la façon de naviguer de fonction en fonction, de fichier en fichier, puis de revenir en arrière
Pour que ce soit encore plus utile, ce serait bien d’avoir un panneau d’historique de navigation, comme l’historique d’un navigateur
Quand on passe d’un fichier à une fonction, il afficherait une liste et permettrait d’avancer/reculer, ou de sauter directement à n’importe quel point de l’historique de navigation, sans devoir fouiller péniblement parmi les fenêtres ouvertes
L’historique de navigation dont je parle ici est totalement distinct de l’historique d’édition
Annuler/rétablir une modification ne devrait pas faire avancer ou reculer l’historique de navigation, et inversement
Bien sûr, il pourrait y avoir des raccourcis clavier pour parcourir l’historique de navigation
Super. C’est lié à Code Bubbles : https://dl.acm.org/doi/abs/10.1145/1753326.1753706
« Nous n’enregistrons pas votre code et ne le conservons pas dans des logs. Nous envoyons des extraits de code à OpenAI comme entrée du copilot de navigation. Nous ajouterons bientôt une option pour désactiver cela. »
Quand cette option sera là, j’aimerais y jeter un œil
Ouvrez la palette de commandes (CMD+SHIFT+P) et utilisez la commande « Opt out of navigational copilot »
Windows/Linux seront aussi pris en charge bientôt
À noter également : nous n’envoyons des données à OpenAI que lorsqu’un diagnostic indique qu’une fonction inexistante est appelée
J’ai publié un article comparant le temps de navigation entre un éditeur basé sur un canevas (Code Bubbles), un éditeur traditionnel à onglets (Eclipse) et un éditeur basé sur un carrousel que j’ai conçu (Patchworks)
Nous avons constaté que le canevas offrait trop de liberté
https://austinhenley.com/pubs/Henley2014CHI_Patchworks.pdf
Avec le recul, je n’utilise même plus vraiment les onglets dans VS Code, parce que j’ai trop de fichiers ouverts
Je regarde simplement un fichier à la fois, et quand je dois changer, je cherche avec Cmd-P ou je passe d’un fichier récent à l’autre
Ça fonctionne bien, mais il faut toujours garder en tête les noms des fichiers/répertoires
Trouver une méthode aurait été beaucoup moins problématique avec une vue d’ensemble triée par ordre alphabétique
Si cela vous va, j’aimerais en discuter, et je vous enverrai un e-mail
J’ai 4 à 6 panneaux de code répartis sur plusieurs espaces de travail, et je passe de l’un à l’autre avec SPC TAB chiffre
Pour bien utiliser l’outil, un écran large suffisant est aussi pratiquement nécessaire
L’essentiel est de s’habituer à manipuler les fichiers horizontalement plutôt que verticalement
Cette façon de penser verticale est assez profondément enracinée dans la manière dont on écrivait ses premiers Hello World
Félicitations pour le lancement. Ça ressemble à un excellent outil, bien réalisé, et j’ai hâte de l’essayer.
Cela me fait penser à une fonctionnalité que je voulais depuis longtemps et que j’ai essayé de bricoler manuellement plusieurs fois, sans jamais parvenir à en faire quelque chose de partageable : déplier un chemin d’exécution du code dans un seul script ou fichier source.
J’aimerais pouvoir poser quelque chose comme un point d’arrêt, cliquer sur un bouton « unravel », et obtenir un fichier unique qui montre toutes les actions effectuées jusqu’à ce point.
Idéalement, ce fichier pourrait même être exécuté comme un script autonome.
En substance, ce serait la même vue que celle fournie par un débogueur pas à pas, mais au lieu de référencer plusieurs fichiers et plusieurs couches, je voudrais tout voir du début à la fin dans un seul fichier.
À mon avis, quand les gens se concentrent sur des détails d’implémentation précis plutôt que sur les besoins, les paramètres et les résultats, beaucoup de choses se perdent dans la transmission.
Je suis curieux de savoir pourquoi vous voulez cette implémentation, et quelle fonctionnalité ou quel objectif elle doit remplir.