Mindwalk: Lihat Seluruh Basis Kode Anda Sebagai Peta 3D

BBetter Stack
컴퓨터/소프트웨어AI/미래기술

Transcript

00:00:00Selama dua tahun, kita menyerahkan basis kode kita ke agen AI dan membiarkan mereka menulis ulang
00:00:05apa pun yang mereka suka, lalu meninjau hasilnya hanya dengan menggulirkan deretan kode yang panjang.
00:00:09Seseorang akhirnya muak dengan hal itu dan membuat kebalikannya, cara untuk benar-benar melihat
00:00:14agen bergerak menelusuri kode Anda dalam bentuk 3D.
00:00:17Namanya MindWalk.
00:00:18Nah, ini bahkan bisa jadi cara yang lebih baik untuk memvisualisasikan kode kita dan menjadikannya lebih hidup.
00:00:23Kita punya alat seperti Graphify, lalu bagaimana perbandingannya?
00:00:30Nah, inilah masalah sebenarnya yang ingin diselesaikan oleh MindWalk.
00:00:34Log agen kita memberi tahu apa yang dilakukannya, menjalankan ini, mengedit itu.
00:00:38Yang tidak pernah diberitahukannya adalah bagaimana ia memahami tugas tersebut.
00:00:41Berkas mana saja yang diangganya relevan?
00:00:44Ke mana ia mencari-cari sebelum mengubah satu baris pun?
00:00:47Apakah ia tetap di jalurnya atau diam-diam memeriksa separuh repositori?
00:00:51Semua hal itu.
00:00:52Pemikiran agen yang sebenarnya agak tidak terlihat dalam sebuah transkrip.
00:00:55Hilang begitu saja.
00:00:56Jika Anda menyukai alat koding untuk mempercepat alur kerja, pastikan untuk subscribe.
00:00:59Kami selalu merilis video baru setiap saat.
00:01:01Jadi, izinkan saya memperlihatkan seperti apa tampilannya saat tidak hilang.
00:01:04Saya punya proyek di sini dari sesi Claude Code yang saya jalankan sebelumnya.
00:01:08Saya bisa memasang Go ini, tanpa bermaksud bergurau, lalu mengembangkannya.
00:01:14Sekarang saya bisa menjalankan MindWalk dengan perintah ini, dan seluruh basis kode saya dirender sebagai
00:01:20kota 3D yang gelap.
00:01:21Setiap berkas adalah gedung, dan makin banyak kodenya, makin tinggi gedungnya.
00:01:26Lalu saya menekan tombol putar pada sesi tersebut.
00:01:29Perhatikan nyala lampunya di sini.
00:01:31Sebuah berkas menyala hijau lumut saat agen sekadar meliriknya.
00:01:36Biru saat agen benar-benar membaca fokus, dan oranye saat melakukan editan.
00:01:41Dan saya bisa menggeser garis waktu maju mundur dan secara harfiah melacak jalur yang dilalui agen
00:01:46di dalam kode ini.
00:01:48Ini adalah satu binary Go yang cukup membaca log sesi yang sudah ditulis oleh Claude Code dan Codex
00:01:53ke disk Anda.
00:01:54Plus tampilan Three.js di peramban Anda untuk bentuk 3D-nya.
00:01:58Bahasa warna itulah kunci utamanya di sini.
00:02:01Warna dingin berarti agen sedang melihat-lihat.
00:02:03Warna hangat berarti agen sedang mengubah kode.
00:02:06Garis waktunya juga diberi penanda.
00:02:07Simbol-simbol kecil memperlihatkan dengan tepat di mana sub-agen mulai berjalan, di mana jendela konteks dipadatkan,
00:02:14dan di mana Anda menyela dengan instruksi baru.
00:02:17Jadi sekarang Anda selalu tahu ke mana tujuan Anda.
00:02:20Tapi inilah bagian yang menurut saya benar-benar penting.
00:02:22Setelah Anda melewati tahap “ini kelihatan keren”, kan?
00:02:24Ada perintah analyze yang menjalankan penilai pada seluruh sesi menggunakan Claude lokal
00:02:29atau Codex Anda, dan menilai alur kerja yang baru saja dilaluinya.
00:02:33Apakah agen melakukan penelusuran yang cukup sebelum mulai mengedit?
00:02:37Oke, apakah agen tetap pada cakupannya?
00:02:38Apakah agen melantur?
00:02:40Apakah agen menyempatkan diri untuk memverifikasi pekerjaannya sendiri?
00:02:42Dan setiap temuan itu berupa tautan yang bisa diklik langsung menuju ke momen tersebut di garis waktu.
00:02:47Itu adalah peninjauan kode untuk sang agen.
00:02:49Dan jika Anda tidak memiliki tayangan ulang sesi sama sekali, ada perintah map yang akan merender repositori apa pun
00:02:54sebagai kota 3D dengan sendirinya tanpa penyiapan apa pun, yang merupakan fitur yang sangat keren.
00:02:59Oke, nah, mari kita lihat.
00:03:00Ketika proyek ini diluncurkan di Hacker News, komentar teratas cukup jujur,
00:03:06karena Anda mungkin juga menanyakan hal yang sama.
00:03:08Ini sangat keren, tapi apakah saya benar-benar akan menggunakannya?
00:03:10Untuk apa saya benar-benar menggunakannya?
00:03:12Dan beberapa orang bahkan tidak membantahnya.
00:03:14Merek berkata seperti, ini tidak punya tujuan nyata.
00:03:16Ini menyenangkan, dan tidak semua hal butuh alasan.
00:03:19Seseorang akhirnya melayangkan kritik yang tepat untuk perubahan kecil.
00:03:23Penggunaan git diff biasa jauh lebih cepat daripada menyaksikan agen melakukan tur 3D ini.
00:03:28Saya paham.
00:03:29Jadi, ini masih sangat baru.
00:03:31Ini versi 0.3.
00:03:32Ini hanya membaca log Claude Code dan Codex.
00:03:34Jika Anda menggunakan Cursor, Anda belum bisa memutar ulang sesi Anda.
00:03:38Hal ini membawa saya pada pertanyaan, untuk siapa sebenarnya alat ini?
00:03:41Apakah ini cuma untuk bersenang-senang?
00:03:42Nah, jika Anda membandingkan model, Anda ingin melihat bagaimana Claude melakukan eksplorasi.
00:03:45Suatu tugas dibandingkan dengan cara kerja Codex.
00:03:48Ini adalah sudut pandang keren yang tidak bisa Anda dapatkan di tempat lain.
00:03:51Jika Anda menghadapi perubahan agen yang sangat besar dan meluas, dan diff biasa tidak memberi Anda
00:03:56gambaran tentang apa yang terjadi, tur 3D ini ditambah laporan penilai sangatlah keren.
00:04:01Fitur itu membedahnya.
00:04:02Tapi untuk perbaikan dua baris, ayolah.
00:04:04Cukup baca diff.
00:04:05Saya tidak berpikir MindWalk akan menggantikan alat peninjau kita yang mana pun.
00:04:09Tapi alat ini ada di sini, mungkin, untuk memberi Anda gambaran tentang alur kerja yang tidak pernah dirancang oleh alat kita
00:04:14untuk benar-benar diperlihatkan.
00:04:15Dan itulah bagian yang bisa kita coba-coba di sini.
00:04:19Kita mengajari mesin kita untuk menulis kode jauh lebih cepat daripada membuat cara untuk memahami
00:04:24apa yang mereka tulis.
00:04:25MindWalk, seperti Graphify, Graphify, Graphify.
00:04:29Oke, sepertinya pelafalan saya sudah benar.
00:04:31Ini bisa menjadi langkah serius pertama untuk menjembatani celah tersebut, memungkinkan Anda melihat bagaimana agen benar-benar bernalar
00:04:36di seluruh basis kode, bukan sekadar ketukan tombol yang ditinggalkannya saat membangun kode tersebut.
00:04:40Ini masih kasar, masih awal, dan menyasar masalah yang sangat tepat.
00:04:43Tapi cobalah, lihat apakah ini benar-benar membantu Anda.
00:04:46Jika Anda menyukai tips dan trik koding seperti ini, pastikan untuk subscribe ke kanal BetterStack.
00:04:50Sampai jumpa di video lainnya.

Key Takeaway

MindWalk memvisualisasikan cara agen AI bernalar dan menjelajahi repositori melalui pemetaan kota 3D interaktif berbasis log Claude Code dan Codex.

Highlights

  • MindWalk merepresentasikan repositori kode sebagai kota 3D interaktif berbasis Three.js, di mana berkas berupa gedung dan jumlah kode menentukan tingginya.

  • Alat berbasis satu biner Go ini membaca log sesi lokal milik Claude Code dan Codex tanpa memerlukan proses penyiapan rumit.

  • Indikator warna memetakan aktivitas agen AI: hijau lumut untuk pemindaian awal, biru untuk pembacaan fokus, dan oranye untuk pengubahan kode.

  • Fitur analisis bawaan menilai performa eksplorasi, cakupan kerja, serta proses verifikasi agen menggunakan Claude lokal atau Codex.

  • Pemeriksaan git diff tradisional jauh lebih cepat untuk perubahan dua baris, sementara visualisasi 3D ini berguna untuk peninjauan perubahan besar yang meluas.

Timeline

Masalah Keterbukaan Alur Pikir Agen AI

  • Proses peninjauan kode buatan AI biasanya terbatas pada pemeriksaan baris teks yang panjang.
  • Log agen standar hanya mencatat perintah eksekusi tanpa memperlihatkan pemahaman struktur tugas.
  • MindWalk memvisualisasikan pergerakan agen di dalam kode untuk memperlihatkan berkas yang relevan sebelum pengubahan terjadi.

Pengembangan perangkat lunak dengan agen AI sering membiarkan agen mengubah basis kode tanpa visibilitas penuh atas jalur pemikirannya. Log biasa tidak menampilkan berkas yang diperiksa agen sebelum melakukan modifikasi. MindWalk memecahkan masalah ini dengan menampilkan proses navigasi agen secara visual.

Mekanisme Visualisasi 3D dan Bahasa Warna

  • Aplikasi berjalan melalui satu biner Go yang merepresentasikan repositori sebagai kota 3D di peramban menggunakan Three.js.
  • Setiap berkas ditampilkan sebagai gedung dengan tinggi yang sebanding dengan jumlah baris kode.
  • Skema warna membedakan jenis interaksi agen dari warna dingin hingga warna hangat.

MindWalk membaca log sesi Claude Code dan Codex yang tersimpan di disk lokal. Sistem warna hijau lumut menandakan pemindaian sekilas, biru menunjukkan pembacaan fokus, dan oranye menandakan editan aktif. Penanda pada garis waktu juga mencatat interupsi pengguna, pemadatan jendela konteks, dan alokasi sub-agen.

Fitur Analisis Performa dan Pemetaan Tanpa Log

  • Perintah analisis mengevaluasi kedalaman eksplorasi dan verifikasi mandiri agen.
  • Hasil penilain menyediakan tautan langsung ke titik waktu spesifik di dalam garis waktu.
  • Perintah pemetaan merender struktur repositori apa pun menjadi kota 3D tanpa memerlukan tayangan ulang sesi.

Perintah analisis memanfaatkan LLM lokal seperti Claude atau Codex untuk mengevaluasi apakah agen melantur atau melakukan penelusuran yang cukup sebelum menulis kode. Tautan interaktif menghubungkan temuan evaluasi langsung ke momen kejadian. Tanpa adanya log sesi, perintah pemetaan tetap dapat menampilkan repositori sebagai model kota 3D.

Batasan dan Kasus Penggunaan yang Sesuai

  • Pemeriksaan git diff biasa lebih cepat dibanding pemutaran ulang 3D untuk modifikasi kode berskala kecil.
  • MindWalk versi 0.3 saat ini belum mendukung sesi dari lingkungan Cursor.
  • Visualisasi ini paling efektif untuk membandingkan strategi model atau meninjau perombakan arsitektur berskala besar.

Penggunaan alat ini kurang efisien untuk perbaikan kode sederhana yang hanya melibatkan beberapa baris. Namun, untuk perubahan kompleks yang tersebar di banyak berkas, visualisasi ini membantu memahami bagaimana agen menelusuri basis kode. Alat ini mengisi celah antara kecepatan penulisan kode oleh AI dan pemahaman manusia terhadap proses tersebut.

Community Posts

View all posts