Mindwalk:コードベース全体を3Dマップで可視化

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

Transcript

00:00:00この2年間、私たちはコードベースをAIエージェントに任せ、
00:00:05好きなように書き換えさせ、それを大量のコードをスクロールしてレビューしてきました。
00:00:09ついに誰かがそれに愛想を尽かし、真逆のツールを作りました。
00:00:14エージェントがコード内を移動する様子を3Dで観察できるツールです。
00:00:17名前はMindWalkといいます。
00:00:18これはコードを可視化し、生き生きと表現するための、より優れた方法かもしれません。
00:00:23Graphifyのようなツールもありますが、それらと比べてどうでしょうか?
00:00:30さて、ここからがMindWalkが解決しようとしている本当の問題です。
00:00:34エージェントのログは、何を実行し何を編集したかという「結果」は教えてくれます。
00:00:38しかし、タスクをどのように理解したかは教えてくれません。
00:00:41どのファイルが関連していると判断したのか?
00:00:441行も変更しないうちに、どこを見回していたのか?
00:00:47自分の領域にとどまっていたのか、それともリポジトリの半分をこっそり探っていたのか?
00:00:51そういったことすべてです。
00:00:52エージェントの思考プロセスは、トランスクリプトでは見えなくなってしまいます。
00:00:55消えてしまうのです。
00:00:56ワークフローをスピードアップするコーディングツールがお好きなら、ぜひチャンネル登録をお願いします。
00:00:59新しい動画を随時公開しています。
00:01:01では、その思考が見える状態がどういうものかお見せしましょう。
00:01:04ここに先ほど実行したClaude Codeセッションのプロジェクトがあります。
00:01:08これをインストールし(Go言語のGoとかけていますが)、ビルドすることができます。
00:01:14このコマンドでMindWalkを起動すると、コードベース全体が
00:01:20ダークな3D都市としてレンダリングされます。
00:01:21各ファイルがビルになっていて、コード量が多いほど高くそびえ立ちます。
00:01:26そしてセッションの再生ボタンを押します。
00:01:29このライトに注目してください。
00:01:31エージェントが少し目を通しただけのファイルは、緑色(苔のような緑)に光ります。
00:01:36実際にじっくり読み込んだ時は青、編集を加えた時は琥珀色になります。
00:01:41タイムラインを前後にドラッグすることで、エージェントがコード内をどのように辿ったかを
00:01:46文字通り追跡できます。
00:01:48これはClaude CodeやCodexがすでにディスクに書き出しているセッションログを読み込むだけの1つのGoバイナリと、
00:01:54ブラウザで3D表示するためのThree.jsシーンで構成されています。
00:01:58この色による言語化こそが、真の工夫です。
00:02:01寒色はエージェントが閲覧していたことを意味し、
00:02:03暖色は変更を加えていたことを意味します。
00:02:06タイムラインにもマークがついています。
00:02:07小さなシンボルによって、サブエージェントが起動した場所、コンテキストウィンドウが圧縮された場所、
00:02:14そして新しい指示を出して割り込んだ場所が正確にわかります。
00:02:17これで、どこに向かっているのかが常に把握できるようになります。
00:02:20しかし、私が本当に重要だと思うのはここからです。
00:02:22「見た目がかっこいい」という段階を過ぎた後の話です。
00:02:24analyzeコマンドを実行すると、ローカルのClaudeやCodexを使って
00:02:29セッション全体に対する評価が行われ、実行内容にグレードが付けられます。
00:02:33エージェントは編集を始める前に十分な調査を行ったか?
00:02:37スコープ内にとどまっていたか?
00:02:38脱線しなかったか?
00:02:40自分の作業を検証する手間をかけたか?
00:02:42そして、これらの指摘事項はすべて、タイムライン上の該当する瞬間へ直接飛べるクリック可能なリンクになっています。
00:02:47まさにエージェントに対するコードレビューです。
00:02:49また、セッションの再生ログがなくても、mapコマンドを使えば
00:02:54事前設定なしでリポジトリを単体で3D都市としてレンダリングできます。これも非常に面白い機能です。
00:02:59さて、ここからが本題です。
00:03:00このツールがHacker Newsで公開された時、一番多かったコメントは実に率直なものでした。
00:03:06皆さんもきっと疑問に思っているでしょう。
00:03:08「確かにすごくかっこいいけど、実際に使うだろうか?」
00:03:10「具体的に何のために使うのか?」と。
00:03:12中には反論すらしない人もいました。
00:03:14「実用的な目的はない。
00:03:16でも楽しいし、すべてのものに理由が必要なわけじゃない」といった意見です。
00:03:19また、ある人は小さな変更についての鋭い指摘を残しました。
00:03:23普通のgit diffを見た方が、エージェントの3Dツアーを眺めるより単純に早いという指摘です。
00:03:28言いたいことはよくわかります。
00:03:29実際、これはまだ出たばかりです。
00:03:31バージョン0.3ですからね。
00:03:32Claude CodeとCodexのログにしか対応していません。
00:03:34Cursorをメインで使っている場合、まだセッションの再生はできません。
00:03:38そこで疑問が生じます。「これは一体誰のためのツールなのか?」
00:03:41単なるお楽しみ要素なのか?
00:03:42例えばモデルを比較したい時、Claudeがタスクをどう探索するかと
00:03:45Codexのやり方の違いを見たい場合があります。
00:03:48これは他では得られない、非常に興味深い視点を与えてくれます。
00:03:51エージェントによる大規模で広範囲な変更に向き合っていて、平坦なdiffだけでは何が起きたか
00:03:56全容を把握できない場合、この3Dウォークスルーと評価レポートはかなり使えます。
00:04:01内容を分解して分かりやすくしてくれます。
00:04:02ですが、たった2行の修正ならどうでしょうか。
00:04:04diffを読めば十分ですよね。
00:04:05MindWalkが既存のレビューツールに取って代わるとは思いません。
00:04:09しかし、従来のツールでは視覚化できなかった「エージェントの実行過程」の感覚を
00:04:14掴むのには役立つかもしれません。
00:04:15そしてそれこそが、私たちが試してみる価値のある部分です。
00:04:19私たちは、AIが書いたものを理解する手法を開発するよりも遥かに早いスピードで、
00:04:24マシンにコードを書かせる方法を教えてしまいました。
00:04:25MindWalkは、Graphify(グラフィファイ)のように…
00:04:29発音はこれで合っていると思いますが、
00:04:31そのギャップを埋めるための本格的な第一歩となるかもしれません。単に残されたキー入力の跡だけでなく、
00:04:36エージェントがコードベース全体をどう推論したかを視覚的に理解させてくれます。
00:04:40まだ削り出しの初期段階ですが、まさに適切な問題に焦点を当てています。
00:04:43ぜひ触ってみて、役立つかどうか確認してみてください。
00:04:46このようなコーディングのコツやテクニックが気に入っていただけたら、ぜひBetterStackチャンネルの登録をお願いします。
00:04:50それでは、また別の動画でお会いしましょう。

Key Takeaway

MindWalkは、AIエージェントがコードベースをどのように探索・推論・変更したかを3D都市マップとタイムラインで視覚化し、コードレビューと評価を効率化します。

Highlights

  • AIエージェントのコードベース閲覧・編集プロセスをダークな3D都市としてレンダリングするツール「MindWalk」が登場しました。

  • 閲覧のみのファイルは寒色(緑や青)、変更を加えたファイルは暖色(琥珀色)で表示し、建物の高さでコード量の多さを表現します。

  • Goバイナリ1つとThree.jsシーンで構成され、Claude CodeやCodexのセッションログを直接読み込んで再生できます。

  • 「analyze」コマンドを実行すると、ローカルのLLMがエージェントの探索調査や検証の手間を評価し、グレード付けを行います。

  • 単体での「map」コマンドを使用すれば、事前設定なしでリポジトリ全体を3D都市としてレンダリング可能です。

Timeline

エージェントの思考プロセスにおける視覚化の課題

  • 従来のログやトランスクリプトでは、エージェントの最終成果物しか確認できません。
  • 編集前のファイル参照行動や探索範囲など、思考プロセスの可視化が必要です。

AIエージェントへのコード記述依頼が増える中、スクロールによる大量のコードレビューは作業上の課題となっています。実行ログからは結果のみが判明し、1行も変更していない段階でどこを参照していたかや、コンテキストの把握方法は追跡できません。

MindWalkの機能と3D視覚化の仕組み

  • ファイルを建物に見立てた3D都市としてコードベースを表現します。
  • 閲覧・編集のアクションに応じてファイルの色が変化します。
  • タイムラインのマークによりサブエージェントの起動や割り込み位置を追跡できます。

GoバイナリとThree.jsで構築されたMindWalkは、Claude CodeやCodexのセッションログを読み込みます。コード量に応じて建物の高さが変わり、軽微な参照は緑、熟読は青、編集は琥珀色と色分けされます。タイムライン上のシンボルでサブエージェントの起動やコンテキスト圧縮の発生地点を正確に把握可能です。

自動評価分析とスタンドアロンマップ表示

  • 「analyze」コマンドでエージェントの行動パターンをグレード評価できます。
  • 評価結果から該当するタイムラインの瞬間へ直接ジャンプが可能です。
  • 「map」コマンドによりログなしでもリポジトリを3D可視化できます。

分析機能ではローカルモデルを用いて、エージェントの十分な事前調査、スコープ維持、検証手順の有無を採点します。指摘箇所はクリック可能なリンクでタイムラインに紐づくため、該当箇所へ素早くアクセスできます。さらに、セッション再生なしで単一リポジトリを3D都市化する機能も備えています。

実用性と適用シーンの考察

  • 小規模な変更には従来のgit diffによる確認が適しています。
  • モデルごとの探索手法の比較や大規模変更の把握に効果を発揮します。
  • コード生成のスピードと人間の理解スピードのギャップを埋める役割を果たします。

数行の修正であれば従来のgit diffの方が迅速ですが、大規模な変更やClaudeとCodexの探索行動の違いを比較する際に有用です。バージョン0.3時点では対応ログが限定的であるものの、AIがコードを推論する過程を直感的に把握する手段を提供します。

Community Posts

View all posts