為什麼需要視覺化記憶？

雖然我們可以使用 get_observations 與 timeline 在終端機中透過文字查詢記憶，但在面對累積了數百條記憶的複雜專案時，文字日誌會顯得不夠直觀。我們很難看出：

• 「哪些記憶節點是被最頻繁引用的核心決策？」
• 「歷史變更提案之間的關聯與演進軌跡是怎樣的？」

為了解決這一問題，Claude-Mem 內置了一個輕量級的 Web Viewer UI。它能將本地的 SQLite 記憶庫，直接轉化為互動式的 3D 拓撲圖與網頁控制面板，讓開發者直觀地管理 AI 的大腦。

啟動與訪問 Web Viewer

要在本地啟動視覺化面板，您只需在專案終端機中執行：

npx claude-mem start

這會啟動 worker 服務，並在終端機印出 Web Viewer 的本地存取網址，直接在瀏覽器開啟即可。

Web Viewer 的三大核心功能區

 ┌────────────────────────────────────────────────────────┐
 │                      Claude-Mem Web UI                 │
 ├───────────────────────────┬────────────────────────────┤
 │                           │                            │
 │   1. 3D 記憶關係圖譜       │   2. 歷史時間軸軌跡        │
 │      (Memory Graph)       │      (Timeline Stream)     │
 │                           │                            │
 ├───────────────────────────┴────────────────────────────┤
 │   3. 敏感記憶管理與一鍵擦除面板 (Forgets Panel)          │
 └────────────────────────────────────────────────────────┘

1. 3D 記憶關係圖譜 (Interactive Memory Graph)

• 節點與大小：畫面中央會呈現一個由 Force-directed 演算法驅動的關係圖。藍色節點代表記憶項目，綠色節點代表受影響的代碼檔案。節點越大，代表它被 AI 檢索和調用的次數越頻繁。
• 關係鏈接：當您點擊某個記憶節點（如 obs_1002），系統會高亮顯示它所關聯的所有代碼檔案（如 PlcConnection.cs），幫助您一眼看出當前的架構規則約束了哪些代碼。

2. 歷史時間軸軌跡 (Timeline Stream)

在右側面板中，會以絲滑的時間軸流（Stream）形式展示歷史開發軌跡。您可以像刷社交媒體一樣，向下滾動查看「上週二 AI 幫忙修改了哪裡，達成了什麼共識，以及當時的編譯錯誤日誌」。

3. 一鍵擦除面板 (Forget Panel)

在底部的表格中，列出了所有快取的記憶項。如果您發現某條記憶已經過期（例如之前的 Redis 鎖設定已經被廢棄），或者意外包含敏感字元，可以直接點擊右側的 [Forget] 按鈕，這會同步觸發本地 SQLite 的 Vacuum 擦除，確保安全。