Merge pull request #4 from itsflaid/codex/render-ai-markdown

Render AI markdown cleanly in the terminal

Author: devmap-agent

docs/for-me-personal/DEBUG.md

@@ -606,46 +606,45 @@ test satu pertanyaan.
 
 ---
 
-## 12. `package-lock.json` Mencemari Statistik Snapshot
+## 12. Jawaban AI Menampilkan Markdown Mentah di Terminal
 
 **Tanggal:** 2026-06-12
 
 **Status:** Selesai.
 
 ### Gejala
 
-Tarball DevMap dipasang pada project Express sementara dengan source sekitar
-dua baris, tetapi `devmap analyze` melaporkan 875 baris.
+Jawaban `devmap ask` menampilkan marker seperti `**bold**`, backtick, dan table
+pipe secara literal. Tabel lebar terpotong oleh terminal dan sulit dipindai.
 
 ### Akar Masalah
 
-Scanner hanya mengabaikan extension `.lock` dan nama yang berakhir dengan
-`-lock.yaml`. File npm `package-lock.json` dan `npm-shrinkwrap.json` tidak cocok
-dengan aturan tersebut sehingga ikut masuk `fileIndex`, fingerprint, dan
-statistik line.
+Konten AI langsung dikirim ke `output.codeBlock()`. Helper tersebut cocok untuk
+source preview, tetapi tidak memahami struktur Markdown yang dihasilkan model.
 
 ### Solusi
 
-- Tambahkan allowlist nama lockfile package manager yang harus diabaikan:
-  `package-lock.json`, `npm-shrinkwrap.json`, `pnpm-lock.yaml`, `yarn.lock`,
-  `bun.lock`, dan `bun.lockb`.
-- Pertahankan package manager detection melalui pemeriksaan file langsung pada
-  project root.
-- Tambahkan automated regression test untuk seluruh lockfile yang didukung.
+- Tambahkan pure utility `renderTerminalMarkdown()`.
+- Render heading, prose, list, fenced code, dan inline formatting.
+- Ubah Markdown table menjadi record vertikal.
+- Bungkus text berdasarkan lebar terminal.
+- Gunakan renderer hanya untuk jawaban AI `ask` dan interpretation `analyze`.
+- Pertahankan `codeBlock()` untuk static source context.
 
 ### Verifikasi
 
-- Automated analyzer test lulus untuk enam nama lockfile.
-- Tarball dibangun ulang dan dipasang pada project sementara.
-- Snapshot tidak memiliki `package-lock.json` di `fileIndex`.
-- Project tetap terdeteksi memakai package manager npm.
-- Statistik turun menjadi 3 file dan 9 baris untuk fixture E2E.
+- Unit test mencakup heading, inline marker, list, table, wrapping, dan code
+  fence.
+- Integration test memastikan output `ask` dan cached `analyze` tidak
+  menampilkan marker Markdown mentah.
+- Preview manual dengan contoh database menghasilkan blok `users` dan `rooms`
+  yang terbaca tanpa table pipe.
 
 ### Pelajaran
 
-Deteksi package manager membutuhkan keberadaan lockfile, tetapi static scanner
-tidak perlu membaca kontennya. Metadata project dan source analysis harus
-memiliki aturan akses yang berbeda.
+AI response dan source preview adalah dua jenis output berbeda. AI response
+memerlukan semantic rendering, sedangkan source code harus dipertahankan
+literal.
 
 ---
 

docs/for-me-personal/PROGRESS.md

@@ -17,25 +17,22 @@ Terakhir diperbarui: 2026-06-12
 - Automated test mencakup warning terminal, snapshot persistence, framework
   fallback, dan keberhasilan pembuatan snapshot.
 
-### Tarball End-to-End
-
-- Tarball `devmap-0.1.0.tgz` berhasil dibuat dan hanya berisi `dist/`,
-  `package.json`, `README.md`, dan `LICENSE`.
-- Tarball berhasil dipasang pada project Express sementara dengan npm.
-- `devmap analyze`, `devmap ask`, dan `devmap doctor` berhasil dijalankan dari
-  package terpasang.
-- `npm exec --package <tarball> -- devmap --version` dan `--help` berhasil tanpa
-  global install.
-- `devmap init` tanpa API key gagal secara aman dengan exit code `1`, pesan
-  actionable, dan tidak membuat config parsial.
-- Verifikasi AI live belum dijalankan karena sesi testing tidak memiliki
-  `GROQ_API_KEY`.
-- E2E menemukan `package-lock.json` ikut dipindai sebagai source. Filter scanner
-  sekarang mengabaikan lockfile npm, pnpm, Yarn, dan Bun.
-- Snapshot E2E setelah perbaikan mendeteksi Express, npm, route `/health`, dan
-  tidak memasukkan `package-lock.json`.
-- Kesiapan launch checklist PRD saat ini diperkirakan 17 dari 24 item, sekitar
-  71%. Core implementation diperkirakan sekitar 85%.
+### Terminal Markdown Rendering
+
+- Jawaban AI dari `devmap ask` dan architecture interpretation dari
+  `devmap analyze` sekarang dirender sebagai output terminal yang terstruktur.
+- Heading memakai accent aqua dan separator.
+- Marker Markdown inline seperti bold, italic, strikethrough, link, dan
+  backtick tidak lagi tampil mentah.
+- Ordered dan unordered list mempertahankan indentasi yang mudah dipindai.
+- Markdown table diubah menjadi record vertikal agar tetap terbaca pada
+  terminal sempit.
+- Prose dibungkus berdasarkan `process.stdout.columns` dengan minimum width
+  yang aman.
+- Fenced code tetap ditampilkan sebagai source block dan static context tidak
+  diproses sebagai Markdown.
+- Automated test mencakup heading, inline formatting, list, table, wrapping,
+  fenced code, serta integrasi `ask` dan cached `analyze`.
 
 ## Update 2026-06-11
 
@@ -117,7 +114,7 @@ Terakhir diperbarui: 2026-06-12
 - Availability selected model ikut diperiksa.
 - Snapshot dibedakan menjadi valid, missing, corrupt, dan unsupported schema.
 - API key dan raw stack trace tidak pernah ditampilkan.
-- Automated test saat ini berjumlah 36 dan seluruhnya lulus.
+- Automated test saat ini berjumlah 38 dan seluruhnya lulus.
 
 ### Distribusi npm
 

docs/for-me-personal/TEST.md

@@ -102,8 +102,8 @@ Saat ini test mencakup:
 Hasil minimum yang diharapkan:
 
 ```text
-tests 36
-pass 36
+tests 38
+pass 38
 fail 0
 ```
 
@@ -144,11 +144,42 @@ npx -p node@20 node packages\cli\node_modules\tsx\dist\cli.mjs packages\cli\test
 Hasil minimum yang diharapkan untuk keduanya:
 
 ```text
-tests 36
-pass 36
+tests 38
+pass 38
 fail 0
 ```
 
+## Testing Terminal Markdown Renderer
+
+Jalankan unit dan integration test terkait:
+
+```powershell
+pnpm --filter devmap exec tsx --test test/markdown-terminal.test.ts test/ask-command.test.ts test/analyze-ai.test.ts
+```
+
+Pastikan:
+
+- heading tidak menampilkan marker `##`;
+- bold, italic, dan inline code tidak menampilkan marker Markdown mentah;
+- ordered dan unordered list tetap memiliki indentasi;
+- table diubah menjadi blok vertikal tanpa karakter pipe;
+- prose dibungkus sesuai lebar terminal;
+- fenced code tetap terbaca sebagai code block;
+- jawaban `ask` dan architecture `analyze` memakai renderer;
+- static source context tetap ditampilkan literal.
+
+Manual test dengan AI live:
+
+```powershell
+devmap ask "Jelaskan struktur database dalam tabel dan alur utama aplikasi"
+```
+
+Hasil yang diharapkan:
+
+- tidak ada `**bold**`, backtick, atau table pipe mentah;
+- tabel tetap terbaca pada terminal VS Code yang sempit;
+- output tidak melewati lebar terminal secara berlebihan.
+
 ## Testing AI Client Tanpa API Call
 
 Automated test AI memakai fake `fetch` dan mock `AiClient`, sehingga tidak

packages/cli/src/commands/analyze.ts

@@ -112,7 +112,7 @@ async function printOrGenerateInterpretation(
 ): Promise<void> {
   if (snapshot.ai && !options.fresh) {
     output.section("Architecture");
-    output.codeBlock(snapshot.ai.architecture);
+    output.markdown(snapshot.ai.architecture);
     output.note(formatAiMetadata(snapshot.ai.model, snapshot.ai.usage, true));
     return;
   }
@@ -154,7 +154,7 @@ async function printOrGenerateInterpretation(
 
     await saveSnapshot(projectRoot, updatedSnapshot);
     output.section("Architecture");
-    output.codeBlock(interpretation.content);
+    output.markdown(interpretation.content);
     output.note(formatAiMetadata(
       interpretation.model,
       interpretation.usage,

packages/cli/src/commands/ask.ts

@@ -87,7 +87,7 @@ export async function askCommand(
     });
 
     output.section("Answer");
-    output.codeBlock(answer.content);
+    output.markdown(answer.content);
     output.note(formatUsage(answer.model, answer.usage));
   } catch (error) {
     if (!(error instanceof DevmapError)) {