[Open Source] Claude HUD 快到了！專案、資源、工具，掌握倒數計時！

掌握你的 AI 助手：Claude HUD 讓你對 Claude Code 瞭若指掌

大家好！今天要介紹一個超棒的工具，讓你在使用 Anthropic 的 Claude Code 時，可以更深入地了解 AI 助手的運作，提升你的生產力。這個工具就叫做 Claude HUD（Head-Up Display），它就像是你的 Claude Code 的儀表板，讓你隨時掌握它的狀態、正在做什麼，以及還剩下多少資源。

什麼是 Claude HUD？為什麼你需要它？

想像一下，你正在使用 Claude Code 撰寫程式碼、除錯或是進行其他複雜的任務。你輸入指令，Claude 開始工作，但你只能乾等著，不知道它在想什麼、做到哪裡了、或是還剩下多少「彈藥」可以用。這時候，Claude HUD 就像你的透視鏡，讓你看到以下資訊：

• 專案路徑： 知道你在哪個專案下工作，方便你管理多個專案。
• 上下文（Context）使用狀況： 就像你的記憶體，顯示 Claude 還有多少上下文可以用。當上下文快滿了，你就要小心了，這會影響到 Claude 的表現。
• 工具活動： 看到 Claude 正在讀取、編輯或搜尋檔案，讓你了解它的工作流程。
• Agent 追蹤： 如果你使用 Agent，可以看到有哪些子 Agent 在執行，它們都在做什麼。
• 待辦事項進度： 追蹤任務完成的進度，讓你保持效率。

總之，Claude HUD 讓你對 Claude Code 的內部運作有更清楚的掌握，你可以：

• 更有效地利用資源： 避免上下文超載，確保 Claude 能夠高效地完成任務。
• 更清楚地了解流程： 知道 Claude 在做什麼，方便你調整指令或進行干預。
• 更好地掌握進度： 知道任務完成了多少，讓你更有效率地安排時間。

如何安裝與設定 Claude HUD？

安裝 Claude HUD 非常簡單，只需要幾個步驟：

Step 1：新增 Marketplace

在 Claude Code 裡面，輸入以下指令：

/plugin marketplace add jarrodwatts/claude-hud

Step 2：安裝外掛

/plugin install claude-hud

⚠️ Linux 使用者請注意：

在 Linux 系統上，/tmp 資料夾通常是一個獨立的檔案系統 (tmpfs)，這可能會導致外掛安裝失敗，出現類似以下的錯誤訊息：

EXDEV: cross-device link not permitted

解決方法： 在安裝外掛之前，先設定 TMPDIR：

mkdir -p ~/.cache/tmp && TMPDIR=~/.cache/tmp claude

然後，在同一個終端機視窗中執行安裝指令。這是一個 Claude Code 平台的限制。

Step 3：設定狀態列 (statusline)

/claude-hud:setup

完成！重啟 Claude Code 以載入新的 statusLine 設定，HUD 就會顯示出來。

核心功能：快速上手

Claude HUD 的核心概念非常簡單，它會在你的 Claude Code 介面底部顯示一行或多行資訊，包含你最關心的內容。

預設顯示 (2 行)

[Opus | Max] │ my-project git:(main*)
Context █████░░░░░ 45% │ Usage ██░░░░░░░░ 25% (1h 30m / 5h)

• 第一行： 模型名稱、專案名稱（或 Bedrock）、專案路徑、Git 分支。
• 第二行： 上下文使用進度條（綠 → 黃 → 紅）和使用率限制。

可選顯示（可透過 /claude-hud:configure 啟用）

◐ Edit: auth.ts | ✓ Read ×3 | ✓ Grep ×2        ← 工具活動
◐ explore [haiku]: Finding auth code (2m 15s)    ← Agent 狀態
▸ Fix authentication bug (2/5)                   ← 待辦事項進度

• 工具活動： 顯示 Claude 正在使用的工具，例如讀取檔案、編輯檔案等。
• Agent 狀態： 顯示 Agent 正在進行的工作。
• 待辦事項進度： 顯示任務完成的進度。

自訂設定：打造你的專屬 HUD

你可以透過 /claude-hud:configure 指令來自訂 HUD 的顯示方式。

• 預設設定： 選擇一個預設配置（Full/Essential/Minimal），然後微調個別元素。
  • Full（完整）： 顯示所有資訊 — 工具、Agent、待辦事項、Git、使用率、時長。
  • Essential（基本）： 顯示活動行 + Git 狀態，減少資訊干擾。
  • Minimal（最小）： 核心顯示 — 僅顯示模型名稱和上下文進度條。
• 隨時自訂： 啟用/停用個別元素，調整 Git 顯示風格，切換配置。
• 預覽： 在儲存變更之前，先預覽 HUD 的顯示效果。

手動設定

進階設定，例如自訂顏色和閾值，則可以透過直接編輯設定檔來實現：~/.claude/plugins/claude-hud/config.json。

設定選項

以下是一些常用的設定選項：

支援的顏色名稱：red, green, yellow, magenta, cyan, brightBlue, brightMagenta。

使用限制（Pro/Max/Team）

對於 Claude Pro、Max 和 Team 訂閱者，預設會啟用使用率顯示。它會在第二行與上下文進度條一起顯示你的速率限制消耗。

7 天百分比會在超過 display.sevenDayThreshold (預設為 80%) 時出現：

Context █████░░░░░ 45% │ Usage ██░░░░░░░░ 25% (1h 30m / 5h) | ██████████ 85% (2d / 7d)

若要停用，請將 display.showUsage 設定為 false。

需求：

• Claude Pro、Max 或 Team 訂閱（不適用於 API 使用者）
• 來自 Claude Code 的 OAuth 憑證（在您登入時自動建立）

疑難排解： 如果使用率沒有顯示：

• 確認你使用 Pro/Max/Team 帳戶登入（不是 API 金鑰）
• 檢查 display.showUsage 在設定中是否未設定為 false
• API 使用者看不到使用率顯示（他們有 pay-per-token，而不是速率限制）
• AWS Bedrock 模型顯示 Bedrock 並隱藏使用限制（使用率在 AWS 中管理）
• 非預設 ANTHROPIC_BASE_URL / ANTHROPIC_API_BASE_URL 設定會跳過使用率顯示，因為 Anthropic OAuth 使用 API 可能不適用
• 如果你位於 proxy 之後，請設定 HTTPS_PROXY (或 HTTP_PROXY/ALL_PROXY) 和可選的 NO_PROXY
• 對於高延遲環境，請使用 CLAUDE_HUD_USAGE_TIMEOUT_MS (毫秒) 增加使用 API 逾時時間

設定範例

{
  "lineLayout": "expanded",
  "pathLevels": 2,
  "elementOrder": ["project", "tools", "context", "usage", "environment", "agents", "todos"],
  "gitStatus": {
    "enabled": true,
    "showDirty": true,
    "showAheadBehind": true,
    "showFileStats": true
  },
  "display": {
    "showTools": true,
    "showAgents": true,
    "showTodos": true,
    "showConfigCounts": true,
    "showDuration": true
  },
  "colors": {
    "context": "cyan",
    "usage": "cyan",
    "warning": "yellow",
    "usageWarning": "magenta",
    "critical": "red"
  },
  "usage": {
    "cacheTtlSeconds": 120,
    "failureCacheTtlSeconds": 30
  }
}

顯示範例

1 層（預設）： [Opus] │ my-project git:(main)

2 層： [Opus] │ apps/my-project git:(main)

3 層： [Opus] │ dev/apps/my-project git:(main)

帶有未提交指示器： [Opus] │ my-project git:(main*)

帶有領先/落後： [Opus] │ my-project git:(main ↑2 ↓1)

帶有檔案統計資料： [Opus] │ my-project git:(main* !3 +1 ?2)

• ! = 修改過的檔案，+ = 新增/已暫存，✘ = 刪除，? = 未追蹤
• 數量為 0 的會被省略，以保持顯示更清晰

常見問題與解決方案

設定未生效？

• 檢查 JSON 語法錯誤：無效的 JSON 會默默地回復預設值。
• 確保數值有效：pathLevels 必須是 1、2 或 3；lineLayout 必須是 expanded 或 compact。
• 刪除設定並執行 /claude-hud:configure 重新產生。

Git 狀態遺失？

• 確認你在 Git 倉庫中。
• 檢查設定檔中 gitStatus.enabled 沒有設定為 false。

工具/Agent/待辦事項行遺失？

• 這些預設是隱藏的 — 在設定檔中啟用 showTools、showAgents、showTodos。
• 它們也只會在有活動時才會出現。

設定後 HUD 沒有出現？

• 重啟 Claude Code 以載入新的 statusLine 設定。
• 在 macOS 上，完全退出 Claude Code，然後在你的終端機中再次執行 claude。

總結

Claude HUD 是一個非常實用的工具，它可以幫助你更好地掌握 Claude Code，提升你的工作效率。透過了解上下文使用狀況、工具活動、Agent 狀態和待辦事項進度，你可以更有效地利用 Claude 的能力，並在專案中取得更好的成果。

趕快試試吧！相信你會發現它對你的工作流程有很大的幫助！

參考閱讀

https://github.com/jarrodwatts/claude-hud

About the Author

n8n n8n

Administrator

View All Posts