Mindwalk: เครื่องมือแสดงภาพการทำงานของ AI ช่วยเขียนโค้ดบนแผนที่ 3 มิติ 🗺️

Mindwalk: เครื่องมือแสดงภาพการทำงานของ AI ช่วยเขียนโค้ดบนแผนที่ 3 มิติ 🗺️เคยสงสัยไหมว่า AI ช่วยเขียนโค้ด (Coding Agent) ทำความเข้าใจโค้ดของคุณอย่างไร? บันทึกการทำงาน (Session Log) บอกได้แค่ว่ามันทำอะไรไปบ้าง แต่ไม่สามารถบอกได้เลยว่ามันมองเห็นส่วนไหนของโค้ดสำคัญ หรือสำรวจไปที่ไหนก่อนที่จะลงมือทำ การอ่านไฟล์ JSONL เป็นเส้นตรงอาจไม่ตอบคำถามเหล่านี้ได้ทั้งหมดMindwalk คือเครื่องมือที่จะเปลี่ยนการทำงานที่ซับซ้อนของ AI ให้กลายเป็นภาพที่เข้าใจง่ายบนแผนที่ 3 มิติของโปรเจกต์โค้ดของคุณ 💡Mindwalk ทำงานอย่างไร?ลองนึกภาพว่าฐานข้อมูลโค้ดของคุณคือ "แผนที่กลางคืน" และการทำงานของ AI คือ "แสงสว่างที่เคลื่อนที่ไปบนแผนที่นั้น"การทำงานที่มองเห็นได้: เมื่อ AI ค้นหา อ่าน หรือแก้ไขโค้ด ส่วนนั้นๆ บนแผนที่จะสว่างขึ้นทันที ส่วนอื่นๆ ที่ AI ไม่ได้แตะต้องจะยังคงมืดอยู่ ทำให้คุณเห็นภาพรวมความเข้าใจของ AI ต่อโปรเจกต์ได้ในพริบตาความเป็นส่วนตัวสูงสุด: Mindwalk ทำงานแบบ Local โดยใช้เพียง Binary ของ Go เพียงตัวเดียวในการอ่านข้อมูล Session Log จาก Claude Code และ Codex โดยไม่ต้องส่งข้อมูลใดๆ ออกนอกเครื่องของคุณเลยความปลอดภัย: ตัวติดตั้งจะทำการตรวจสอบ Binary กับ Checksums.txt ก่อนติดตั้งให้คุณการติดตั้งและใช้งานเบื้องต้นเมื่อรัน Mindwalk โดยไม่มีอาร์กิวเมนต์ มันจะสแกนหาโปรเจกต์ของคุณที่ ~/.claude/projects และ ~/.codex/sessions จากนั้นจะเปิด UI บนเว็บเบราว์เซอร์ของคุณเองรูปแบบการแสดงผลที่น่าสนใจTree / Terrain views: แสดงผลโค้ดในรูปแบบแผนผังต้นไม้แบบรัศมี (Radial Tree) หรือ Treemap ที่ความสว่างของแต่ละไฟล์จะบ่งบอกถึงความลึกและความถี่ที่ไฟล์นั้นถูกใช้งานTouch states: แต่ละไฟล์จะแสดงสถานะการ "สัมผัส" ที่ลึกที่สุด:เขียวมอส (Moss Green): มองเห็น (Seen)ขาวนวล (Moon White): อ่าน (Read)ส้มอบอุ่น (Warm Amber): แก้ไข (Edited)ดำ (Dark): ยังไม่ได้เข้าถึง (Unvisited)Playback deck: คุณสามารถเลื่อน (Scrub) หรือเล่น (Play) การทำงานของ AI ย้อนหลังได้บนกราฟแบบ Bucket Histogram โดยแถบกราฟจะไล่สีจากเย็นไปอุ่น:สีเย็น (Cool): การสังเกตการณ์ เช่น การค้นหา, การอ่าน, การรันคำสั่งสีอุ่น (Warm): การเปลี่ยนแปลง เช่น การแก้ไข, การตรวจสอบโค้ดทำให้เห็นภาพรวมของช่วงเวลาที่ AI ทำการแก้ไขโค้ดได้อย่างชัดเจนTimeline marks: สัญลักษณ์ต่างๆ บน Timeline จะช่วยให้คุณกระโดดไปยังจุดที่น่าสนใจได้ทันที:◇ : การย่อข้อมูลบริบท (Context compactions)○ : การเปิดใช้งาน Subagent› : การโต้ตอบกับผู้ใช้ (User turns)Inspector: คลิกที่ไฟล์เพื่อดูประวัติการเข้าถึง หรือคลิกที่แถวประวัติการเข้าถึงเพื่อเลื่อน Playhead ไปยังช่วงเวลานั้นๆคำสั่งคีย์บอร์ดที่ช่วยให้การทำงานลื่นไหลSpace: เล่น / หยุด← / →: เลื่อนทีละสเต็ป (กด Shift ค้างไว้เพื่อเลื่อน 10 สเต็ป)Home / End: สิ้นสุดการทำงานS: ปรับความเร็วE: ไปยังการแก้ไขครั้งถัดไปX: ไปยังข้อผิดพลาดครั้งถัดไปM: ไปยัง Mark ครั้งถัดไป⌘B: แถบ Sessionเบื้องหลังการทำงานที่แบ่งแยกอย่างชัดเจนMindwalk ประกอบด้วยส่วนสำคัญ 2 ส่วนที่แยกออกจากกันอย่างชัดเจน:Trace: คือ Session Log ที่ถูกปรับให้เป็นลำดับเหตุการณ์การ "สัมผัส" ไฟล์ (File-touch events) โดยมี Adapter สำหรับแต่ละรูปแบบของ AgentCitymap: คือการจัดวางโครงสร้างของ Repository แบบ Deterministic ซึ่งหมายความว่า Repository แบบเดียวกันจะให้แผนที่แบบเดียวกันเสมอ ทำให้สามารถเปรียบเทียบการทำงานข้าม Session ได้ส่วนเหล่านี้จะถูกเชื่อมต่อด้วย Local Go Server และแสดงผลผ่าน Frontend ที่สร้างด้วย React/Three.jsการพัฒนาและมีส่วนร่วมหากคุณสนใจในการพัฒนา Mindwalk สามารถส่ง Issues และ Pull Requests ได้ตามต้องการหลักการสำคัญในการพัฒนา:รักษากรอบการทำงาน: Adapter จะไม่รู้เรื่องการแสดงผล, การสร้าง Citymap จะไม่ขึ้นกับการเล่นย้อนหลัง, และ Server ทำหน้าที่เพียงเชื่อมต่อส่วนต่างๆการจัดรูปแบบโค้ด: ใช้ gofmt สำหรับโค้ด Go และอย่าแก้ไขไฟล์ internal/server/static ด้วยตนเอง ให้สร้างใหม่ด้วย make buildการอัปเดต Schema: เมื่อมีการเปลี่ยนแปลงรูปแบบ JSON ของ Trace หรือ Citymap ให้ทำการอัปเดต Schema และ Test ที่เกี่ยวข้องใน Commit เดียวกันMindwalk เป็นเครื่องมือที่น่าสนใจสำหรับนักพัฒนาที่ต้องการทำความเข้าใจการทำงานของ AI ช่วยเขียนโค้ดในระดับที่ลึกขึ้น ช่วยให้มองเห็นภาพรวมและปรับปรุงกระบวนการทำงานร่วมกับ AI ได้อย่างมีประสิทธิภาพ#Mindwalk #CodingAgent #CodeVisualization #AI #DeveloperToolshttps://github.com/cosmtrek/mindwalk