WizerdBaChe

DIT Dialogue Is Teacher — AI skill for Claude Code

AI community

把 AI coding agent（Claude Code / Codex）的執行軌跡轉成可學習的結構化節點視圖.

How to install DIT Dialogue Is Teacher

This entry records only its repository, not the path inside it, so there is no exact command to give. Open WizerdBaChe/DIT_Dialogue_Is_Teacher and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What DIT Dialogue Is Teacher does

把 AI coding agent（Claude Code / Codex）的執行軌跡轉成可學習的結構化節點視圖.

Alternatives in AI

Graphify — AI coding assistant skill (Claude Code, Codex, OpenCode, OpenClaw, Factory Droid, Trae) 20.9k ★
Codeburn — Free, local tool to track AI coding token usage and cost across 37 tools and agents (Claude Code, Cursor, Code 9.7k ★
AI Coding Guide Zh — Claude Code + OpenClaw + Codex 中文教程 39篇完整教程 + 1张速查卡 80万+内容量 1500+实操示例 AI Coding / Agent 三线学习路径 5.8k ★

README

xi: 1 what: 使用者導向的產品入口 README——把 AI coding agent 的 .jsonl 執行紀錄轉成可學習的結構化節點視圖 (the user-facing product README turning an AI coding agent's .jsonl transcript into a learnable structured node view) tags: [dit, entry, readme] aliases: [專案入口, 使用者說明, 對話即教師, README, project overview]

🎓 DIT — Dialogue Is Teacher（對話即教師）

把 AI coding agent（如 Claude Code、Codex）的執行軌跡，轉成**可學習**的結構化節點視圖—— 讓你從「一直按同意」升級成「看懂這次到底是怎麼做出來的」。

[![build](https://img.shields.io/badge/build-passing-brightgreen)]() [![stack](https://img.shields.io/badge/stack-Vite%20%2B%20React%20%2B%20TypeScript-blue)]() [![privacy](https://img.shields.io/badge/privacy-local--first-success)]() [![status](https://img.shields.io/badge/status-R12%20pending%20acceptance-yellow)]() [![license](https://img.shields.io/badge/license-MIT-blue)](LICENSE)

**Language / 語言：[繁體中文](#繁體中文) ・ [English](#english)**

繁體中文

這是什麼？

當你用 Claude Code、Codex 之類的 AI coding agent 寫程式時，agent 會留下一份完整的執行紀錄（`.jsonl`）——它想了什麼、呼叫了什麼工具、結果如何。這份紀錄理論上看得到，但實際上是**一長串密密麻麻的文字與指令**，你大概只會不斷按「批准」，事後也很少有人回頭去看。

結果就是：用了一堆 AI agent，**技能卻沒有跟著長**。你只學會了「怎麼下指令」，沒學會「這次的解法到底為什麼是對的、下次遇到類似問題該怎麼做」。

**DIT 做的事情很單純**：讀進一份 Claude Code 或 Codex 的 session（`.jsonl`），把它解析、降噪、結構化，重新畫成一個你**看得懂、學得到東西**的儀表板——而不是另一個「給工程師除錯用」的 tracing 工具。

DIT 的目標讀者是「想學會技術的使用者」，不是「想除錯 agent 行為的開發者」。這是它跟 LangGraph Studio、Agent Prism 這類 observability 工具最大的不同。

為什麼要做這個

現況	問題
Raw log 是為「即時互動」設計的	資訊密度高、噪音多（重試、失敗、冗長輸出），不是為「事後複盤」設計
現有的 agent tracing 工具	給開發者除錯用，呈現「發生了什麼」，不解釋「為什麼、下次該怎麼做」
一般人的應對方式	自己回頭翻 log、靠記憶、或乾脆放棄理解（純黑箱使用）

DIT 想驗證的核心假設很簡單：**只要把一條雜亂的執行軌跡，降噪、結構化、分層呈現出來，使用者就能更快看懂「這次任務的骨架」**——這件事甚至不需要額外的 AI 講解就已經有價值；AI 講解層是錦上添花，不是必要條件。

核心功能

🔍 多來源解析：讀取單一 session 檔案，在瀏覽器內完全本地解析，不需要任何後端。目前支援：
- Claude Code（~/.claude/projects/<專案>/*.jsonl）
- Codex CLI（~/.codex/sessions/rollout-*.jsonl）——自動辨識工具真實名稱、去重巢狀事件、過濾掉 Codex 特有的子代理協調雜訊與自動核准審查（auto-review）轉述，只留下有教學價值的內容。
- 丟一個不是 session 的檔案會給你看得懂的「無法辨識輸入格式」訊息，不會白屏。
🧹 **確定