claude-code-dashboard 0.1.0__tar.gz

claude_code_dashboard-0.1.0/.github/pull_request_template.md

@@ -0,0 +1,14 @@
+## Summary
+
+<!-- 簡述這個 PR 做了什麼 -->
+
+## Why
+
+<!-- 動機、對應的 Issue（例如 Closes #123） -->
+
+## Test Plan
+
+<!-- 如何驗證這個變更 -->
+
+- [ ] `uv run claude-dash --plan max5` 正常運作
+- [ ] 相關功能手動測試通過

claude_code_dashboard-0.1.0/.github/workflows/publish.yml

@@ -0,0 +1,115 @@
+# PyPI 發佈工作流程
+#
+# 觸發方式（二擇一）：
+#   A. 推送 v* tag → 自動發佈到 PyPI（正式版）
+#   B. 手動觸發 → 可選擇發佈到 TestPyPI 或 PyPI
+#
+# 使用前需設定 GitHub Secrets：
+#   - PYPI_API_TOKEN        : PyPI 的 API Token
+#   - TEST_PYPI_API_TOKEN   : TestPyPI 的 API Token
+#
+# 發版流程：
+#   1. 修改 pyproject.toml 中的 version（例如 "0.2.0"）
+#   2. git commit -m "release: v0.2.0"
+#   3. git tag v0.2.0 && git push origin main --tags
+#   4. GitHub Actions 自動觸發發佈到 PyPI
+#
+# 測試發佈：到 Actions 頁面手動觸發，選擇 testpypi。
+
+name: Publish to PyPI
+
+on:
+  push:
+    tags:
+      - "v*"
+
+  workflow_dispatch:
+    inputs:
+      target:
+        description: "發佈目標"
+        required: true
+        type: choice
+        options:
+          - testpypi
+          - pypi
+        default: testpypi
+
+jobs:
+  publish:
+    name: Build & Publish
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install uv
+        uses: astral-sh/setup-uv@v4
+
+      - name: Set up Python
+        run: uv python install 3.12
+
+      # 取得版本號供後續步驟使用
+      - name: Get version
+        id: version
+        run: |
+          VERSION=$(grep '^version' pyproject.toml | head -1 | sed 's/.*"\(.*\)".*/\1/')
+          echo "version=${VERSION}" >> "$GITHUB_OUTPUT"
+
+      # 驗證 tag 版號與 pyproject.toml 一致（僅 tag 觸發時檢查）
+      - name: Verify tag matches version
+        if: startsWith(github.ref, 'refs/tags/v')
+        run: |
+          TAG="${GITHUB_REF#refs/tags/v}"
+          TOML="${{ steps.version.outputs.version }}"
+          if [ "${TAG}" != "${TOML}" ]; then
+            echo "::error::Tag v${TAG} does not match pyproject.toml version ${TOML}"
+            echo "Please ensure the tag matches: git tag v${TOML}"
+            exit 1
+          fi
+          echo "Version check passed: v${TAG} == ${TOML}"
+
+      - name: Build package
+        run: uv build
+
+      # Tag 觸發 → 發佈到 PyPI
+      - name: Publish to PyPI (tag)
+        if: startsWith(github.ref, 'refs/tags/v') && github.event_name == 'push'
+        run: uv publish
+        env:
+          UV_PUBLISH_TOKEN: ${{ secrets.PYPI_API_TOKEN }}
+
+      # 手動觸發 → TestPyPI
+      - name: Publish to TestPyPI (manual)
+        if: github.event_name == 'workflow_dispatch' && inputs.target == 'testpypi'
+        run: uv publish --publish-url https://test.pypi.org/legacy/
+        env:
+          UV_PUBLISH_TOKEN: ${{ secrets.TEST_PYPI_API_TOKEN }}
+
+      # 手動觸發 → PyPI
+      - name: Publish to PyPI (manual)
+        if: github.event_name == 'workflow_dispatch' && inputs.target == 'pypi'
+        run: uv publish
+        env:
+          UV_PUBLISH_TOKEN: ${{ secrets.PYPI_API_TOKEN }}
+
+      - name: Summary
+        run: |
+          V="${{ steps.version.outputs.version }}"
+          if [ "${{ github.event_name }}" = "push" ]; then
+            TARGET="pypi"
+          else
+            TARGET="${{ inputs.target }}"
+          fi
+
+          if [ "${TARGET}" = "testpypi" ]; then
+            echo "### ✅ Published v${V} to TestPyPI" >> $GITHUB_STEP_SUMMARY
+            echo "" >> $GITHUB_STEP_SUMMARY
+            echo "Install: \`pip install -i https://test.pypi.org/simple/ claude-code-dashboard==${V}\`" >> $GITHUB_STEP_SUMMARY
+          else
+            echo "### ✅ Published v${V} to PyPI" >> $GITHUB_STEP_SUMMARY
+            echo "" >> $GITHUB_STEP_SUMMARY
+            echo "Install: \`pip install claude-code-dashboard==${V}\`" >> $GITHUB_STEP_SUMMARY
+          fi

claude_code_dashboard-0.1.0/.gitignore

@@ -0,0 +1,24 @@
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.egg-info/
+dist/
+build/
+
+# Virtual environments
+.venv/
+venv/
+
+# IDE
+.idea/
+.vscode/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+
+# uv
+.python-version

claude_code_dashboard-0.1.0/CONTRIBUTING.md

@@ -0,0 +1,138 @@
+# Contributing
+
+感謝你有興趣貢獻 Claude Dashboard！
+
+<br>
+
+## 開發流程
+
+### 分支規範
+
+| 分支 | 用途 |
+|---|---|
+| `main` | 穩定版本，所有發版從此分支進行 |
+| `feature/*` | 新功能開發（例如 `feature/dark-mode`） |
+| `fix/*` | Bug 修復（例如 `fix/card-truncation`） |
+
+### 提交 Pull Request
+
+1. 從 `main` 建立功能分支
+2. 完成開發後發起 PR 到 `main`
+3. PR 標題簡潔描述變更內容（例如「Add dark mode support」）
+4. PR 描述中說明：
+   - **做了什麼**：變更摘要
+   - **為什麼**：動機或對應的 Issue
+   - **如何測試**：驗證方式
+
+> **發版權限**：僅專案維護者可以打 tag 與觸發 PyPI 發佈。
+
+<br>
+
+## 開發環境
+
+```bash
+cd claude-code-dashboard
+uv sync                         # 建立 .venv 並安裝相依套件
+uv run claude-dash --plan max5  # 直接執行
+```
+
+<br>
+
+## 新增 Agent 狀態
+
+1. 在 `constants.py` 新增 `STATE_XXX` 常數與 `STATE_DISPLAY` 項目
+2. 在 `sprites.py` 新增對應的像素網格（2 幀）與 `SPRITE_FRAMES` 項目
+3. 在 `agent_parser.py` 的 `parse_agent_state()` 中新增判斷邏輯
+
+<br>
+
+## 新增工具顯示格式
+
+在 `constants.py` 的 `TOOL_DISPLAY` 字典中新增項目，
+並在 `agent_parser.py` 的 `_format_tool_status()` 中新增對應的參數萃取邏輯。
+
+<br>
+
+## GitHub 設定（維護者）
+
+### GitHub Secrets
+
+Repository → Settings → **Secrets and variables** → Actions。
+
+| Secret 名稱 | 用途 |
+|---|---|
+| `TEST_PYPI_API_TOKEN` | [TestPyPI](https://test.pypi.org/manage/account/#api-tokens) 的 API Token |
+| `PYPI_API_TOKEN` | [PyPI](https://pypi.org/manage/account/#api-tokens) 的 API Token |
+
+### Repository 保護規則
+
+Repository → Settings → **Rules** → Rulesets → New ruleset。
+
+**1. Branch 保護 (`main`)**
+
+- **Target**:
+  - Branches matching `main`
+- **Bypass list**:
+  - Maintain
+  - Repository admin (Always allow)
+- **Rules**:
+  - **Require a pull request before merging**
+  - **Block force pushes**
+  - **Restrict deletions**
+
+**2. Tag 保護 (`v*`)**
+
+- **Target**:
+  - Tags → Tag targeting criteria 填 `v*`
+- **Bypass list**:
+  - Maintain
+  - Repository admin (Always allow)
+- **Rules**:
+  - **Restrict creations**
+  - **Restrict deletions**
+  - **Block force pushes**
+
+> `workflow_dispatch`（手動觸發 Actions）預設僅 write 權限以上的人可操作，無需額外設定。
+
+<br>
+
+## 發佈到 PyPI
+
+### 發版流程
+
+所有發版操作在 `main` 分支上進行。
+
+### 測試發佈（TestPyPI）
+
+先透過手動觸發 GitHub Actions 發到 TestPyPI 驗證：
+
+1. 修改 `pyproject.toml` 中的 `version`（遵循 [Semantic Versioning](#版本號規則semantic-versioning)）
+2. Commit & Push 到 `main`
+3. 到 GitHub Actions 頁面 → "Publish to PyPI" → **Run workflow** → 選擇 `testpypi`
+4. 驗證安裝：
+   ```bash
+   pip install -i https://test.pypi.org/simple/ claude-code-dashboard==0.2.0
+   ```
+
+### 正式發佈（PyPI）
+
+確認 TestPyPI 沒問題後，打 tag 觸發正式發佈：
+
+```bash
+git tag v0.2.0
+git push origin v0.2.0
+# GitHub Actions 偵測到 v* tag 後自動發佈到 PyPI
+```
+
+> **注意**：CI 會驗證 tag 版號與 `pyproject.toml` 中的 `version` 是否一致，不一致時發佈會失敗。
+
+
+### 版本號規則（Semantic Versioning）
+
+| 變更類型 | 版本號 | 範例 |
+|---|---|---|
+| Bug 修復、微調 | Patch `x.y.Z` | `0.1.0` → `0.1.1` |
+| 新功能、不影響既有 API | Minor `x.Y.0` | `0.1.1` → `0.2.0` |
+| 重大變更、不相容修改 | Major `X.0.0` | `0.9.0` → `1.0.0` |
+
+> **注意**：PyPI 不允許重新上傳相同版本號。發佈出錯時必須遞增版本號。

claude_code_dashboard-0.1.0/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Claude Dashboard Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

claude_code_dashboard-0.1.0/PKG-INFO

@@ -0,0 +1,296 @@
+Metadata-Version: 2.4
+Name: claude-code-dashboard
+Version: 0.1.0
+Summary: Terminal dashboard for Claude Code: token usage + agent status with pixel sprites
+Project-URL: Homepage, https://github.com/linziyou0601/claude-code-dashboard
+Project-URL: Repository, https://github.com/linziyou0601/claude-code-dashboard
+Author-email: linziyou0601 <qqq23939889@gmail.com>
+License-Expression: MIT
+License-File: LICENSE
+Classifier: Development Status :: 4 - Beta
+Classifier: Environment :: Console
+Classifier: Intended Audience :: Developers
+Classifier: License :: OSI Approved :: MIT License
+Classifier: Programming Language :: Python :: 3
+Classifier: Programming Language :: Python :: 3.9
+Classifier: Programming Language :: Python :: 3.10
+Classifier: Programming Language :: Python :: 3.11
+Classifier: Programming Language :: Python :: 3.12
+Classifier: Topic :: Utilities
+Requires-Python: >=3.9
+Requires-Dist: claude-monitor<4,>=3.1.0
+Description-Content-Type: text/markdown
+
+# Claude Code Dashboard
+
+Claude Code Dashboard 是一個終端介面（TUI）工具，整合兩大功能於同一畫面：
+
+1. **Token 用量面板** — 直接延用 [claude-monitor (ccm)](https://github.com/Maciek-roboblog/Claude-Code-Usage-Monitor) 的即時用量介面，顯示費用、Token 消耗量、燃燒率、預測等
+2. **Agent 狀態面板** — 受 [Pixel Agents](https://github.com/pablodelucca/pixel-agents) 啟發，以像素精靈動畫顯示每個 Claude Code 工作階段的即時狀態
+
+![Claude Code Dashboard](./claude-dash-demo.gif)
+
+<br>
+
+## 功能特色
+
+- **即時刷新** — 畫面以 2 Hz 更新，資料依指定間隔掃描
+- **像素精靈動畫** — 5 種狀態各有兩幀動畫，使用 Unicode Braille 字元渲染（無需圖片協議支援）
+- **多工作階段偵測** — 同一專案可同時顯示多個 Agent（自動編號 #1, #2, ...）
+- **檔案式偵測** — 以 JSONL mtime 判斷工作階段存活，支援 macOS / Linux / Windows
+- **ccm 原生整合** — Token 面板直接呼叫 ccm 的 `DisplayController`，顯示效果完全一致
+- **跨終端相容** — 純 Unicode 文字輸出，VS Code 終端、iTerm2、Terminal.app 皆可使用
+
+<br>
+
+## 專案架構
+
+```
+claude-code-dashboard/
+├── pyproject.toml
+├── README.md
+├── LICENSE
+├── .gitignore
+└── src/
+    └── claude_code_dashboard/
+        ├── __init__.py
+        ├── __main__.py
+        ├── cli.py                    # CLI 引數解析（argparse）
+        ├── constants.py              # 全域常數（門檻值、預設值、顯示設定）
+        ├── app.py                    # 主迴圈（Rich Live 即時刷新）
+        ├── token_panel.py            # Token 面板（封裝 ccm DisplayController）
+        ├── agent_scanner.py          # 工作階段掃描（JSONL mtime 偵測）
+        ├── agent_parser.py           # JSONL 解析（推斷 Agent 狀態）
+        ├── agent_panel.py            # Agent 面板（精靈卡片渲染）
+        └── sprites.py                # 像素精靈定義與 Braille 渲染引擎
+```
+
+### 模組依賴關係
+
+```mermaid
+graph TD
+    CLI["cli.py<br/><i>CLI 引數解析</i>"] --> APP["app.py<br/><i>Rich Live 主迴圈</i>"]
+    APP --> TP["token_panel.py<br/><i>Token 面板</i>"]
+    APP --> AP["agent_panel.py<br/><i>Agent 面板</i>"]
+    TP --> CCM["claude_monitor<br/><i>外部套件</i>"]
+    AP --> PARSE["agent_parser.py<br/><i>JSONL 解析</i>"]
+    AP --> SCAN["agent_scanner.py<br/><i>工作階段掃描</i>"]
+    AP --> SPRITE["sprites.py<br/><i>Braille 渲染</i>"]
+    PARSE --> CONST["constants.py<br/><i>全域常數</i>"]
+    AP --> CONST
+    SCAN --> CONST
+
+    style CCM stroke:#999,stroke-dasharray: 5 5
+```
+
+### Agent 偵測流程
+
+```mermaid
+flowchart TD
+    A["掃描 ~/.claude/projects/\*/\*.jsonl"] --> B{"mtime 在時限內？"}
+    B -- 否 --> Z["跳過"]
+    B -- 是 --> C{"mtime < 30 秒？"}
+    C -- 是 --> D["✅ 視為存活"]
+    C -- 否 --> E["❌ 視為非活躍"]
+    D --> J["讀取 JSONL 尾端 32KB"]
+    E --> J
+    J --> K{"有 tool_use<br/>無 tool_result？"}
+    K -- 是 --> L{"非豁免工具<br/>且超過 7 秒？"}
+    L -- 是 --> M["⏳ 等待授權"]
+    L -- 否 --> N["✍ 工作中"]
+    K -- 否 --> O{"最後為純文字？"}
+    O -- 是 --> P{"超過 5 秒？"}
+    P -- 是 --> Q["💬 等待輸入"]
+    P -- 否 --> R["🧠 思考中"]
+    O -- 否 --> S["💤 閒置"]
+```
+
+### 各模組職責
+
+| 模組 | 職責 |
+|------|------|
+| `cli.py` | 定義 CLI 參數、進入點 |
+| `app.py` | Rich Live 主迴圈，組合所有面板 |
+| `token_panel.py` | 封裝 ccm 的 `DisplayController`，產生 Token 用量面板 |
+| `agent_scanner.py` | 掃描 `~/.claude/projects/` 的 JSONL 檔案，以 mtime 判斷存活 |
+| `agent_parser.py` | 讀取 JSONL 尾端 32KB，推斷工具使用狀態與 Agent 狀態 |
+| `agent_panel.py` | 將工作階段與狀態組合為 Rich Panel 卡片 |
+| `sprites.py` | 定義 14×12 像素網格，轉換為 Unicode Braille 字元 |
+| `constants.py` | 所有門檻值、計時器、顏色、預設值的集中管理 |
+
+<br>
+
+## 安裝方式
+
+### 前置需求
+
+- **macOS / Linux / Windows**（需先安裝 [Claude Code](https://code.claude.com/docs/en/setup)）
+- **Python 3.9+**
+- **[uv](https://docs.astral.sh/uv/)** — 新一代 Python 套件管理器（以 Rust 實作，速度極快）
+- **[claude-monitor](https://github.com/Maciek-roboblog/Claude-Code-Usage-Monitor)** (ccm) — Token 用量追蹤（安裝時自動安裝）
+
+> **什麼是 uv？**
+>
+> [uv](https://docs.astral.sh/uv/) 是 Astral 開發的 Python 套件管理器，用來取代 `pip`、`venv`、`pipx` 等工具。
+> 它會自動管理虛擬環境與相依套件，安裝速度比 pip 快 10–100 倍。
+>
+> - `uv tool install <pkg>` — 將套件安裝為全域命令列工具（類似 `npm install -g`）
+> - `uv run <cmd>` — 在專案的虛擬環境中執行命令（類似 `npx`）
+> - `uv pip install <pkg>` — 傳統 pip 的加速替代方案
+>
+> 安裝 uv：`curl -LsSf https://astral.sh/uv/install.sh | sh`
+
+### 方法一：uv tool install（推薦）
+
+將 `claude-code-dashboard` 安裝為全域命令列工具，自動建立隔離的虛擬環境
+
+從 PyPI 安裝（推薦）：
+
+```bash
+uv tool install claude-code-dashboard
+```
+
+或從本機原始碼安裝：
+
+```bash
+cd claude-code-dashboard
+uv tool install .
+```
+
+安裝完成後，在任何目錄都可直接執行（全名或縮寫皆可）：
+
+```bash
+claude-dash --plan max5
+# 或
+ccd --plan max5
+```
+
+更新到最新版：
+
+```bash
+uv tool upgrade claude-code-dashboard
+```
+
+### 方法二：uv run（開發用途）
+
+不安裝，直接在專案目錄中執行。uv 會自動建立 `.venv` 並安裝相依套件
+
+```bash
+cd claude-code-dashboard
+uv run claude-dash --plan max5
+# 或 uv run ccd --plan max5
+```
+
+### 方法三：pip install（傳統方式）
+
+```bash
+cd claude-code-dashboard
+python -m venv .venv && source .venv/bin/activate
+pip install .
+claude-dash --plan max5
+# 或 ccd --plan max5
+```
+
+<br>
+
+## 使用方式
+
+**名稱對照**：本專案使用三個名稱，語境不同請對應使用。
+
+| 語境 | 名稱 | 範例 |
+|------|------|------|
+| PyPI 套件 / 專案目錄 | **claude-code-dashboard** | `pip install claude-code-dashboard`、`cd claude-code-dashboard` |
+| 指令（全名） | **claude-dash** | `claude-dash --plan max5` |
+| 指令（縮寫） | **ccd** | `ccd --plan max5` |
+
+### 基本使用
+
+以下範例以 `claude-dash` 為例，亦可改用縮寫 `ccd`：
+
+```bash
+# 顯示所有面板（Token + Agent），使用 max5 方案
+claude-dash --plan max5
+
+# 僅顯示 Agent 面板
+claude-dash --view agents
+
+# 僅顯示 Token 面板
+claude-dash --view tokens
+```
+
+### CLI 參數一覽
+
+| 參數 | 預設值 | 說明 |
+|------|--------|------|
+| `--plan` | `max5` | Token 方案等級：`pro` / `max5` / `max20` / `custom` |
+| `--timezone` | `Asia/Taipei` | IANA 時區名稱 |
+| `--view` | `all` | 顯示面板：`all` / `tokens` / `agents` |
+| `--refresh` | `10` | 資料刷新間隔（秒） |
+| `--idle-timeout` | `10` | 隱藏閒置超過 N 分鐘的 Agent |
+| `--max-agents` | `0` | 最多顯示的 Agent 卡片數量（0=不限） |
+| `--show-all` | `false` | 顯示 30 分鐘內的所有工作階段 |
+| `--no-sprites` | `false` | 停用像素精靈，改用純文字模式 |
+| `--version` | — | 顯示版本號 |
+
+### 使用範例
+
+```bash
+# 快速刷新，顯示所有工作階段
+claude-dash --plan max5 --refresh 5 --show-all
+
+# 純文字模式（適合螢幕閱讀器或低解析度終端）
+claude-dash --view agents --no-sprites
+
+# 僅顯示最多 4 個 Agent
+claude-dash --max-agents 4
+
+# 使用不同時區
+claude-dash --timezone America/New_York
+```
+
+<br>
+
+## 運作原理
+
+### Token 面板
+
+直接匯入 ccm 的 `DisplayController.create_data_display()` 方法，該方法回傳一個 Rich `Group` 可渲染物件。這表示 Token 面板的顯示效果與 `ccm --view realtime` **完全相同**，無需重新實作任何邏輯。
+
+### 像素精靈渲染
+
+使用 **Unicode Braille 字元**（U+2800–U+28FF）實現終端機中的「像素級」繪圖：
+
+- 每個 Braille 字元編碼 2×4 的點陣矩陣（8 個像素點）
+- 比一般方塊字元精細 **8 倍**
+- 14×12 像素的精靈網格渲染為 7 字元寬 × 3 行高
+- 每個 2×4 區塊以「多數決」選出代表顏色
+- 支援 7 種顏色（膚色、頭髮、上衣、褲子、強調色、家具、特效）
+- 每種狀態有 2 幀動畫，以 0.5 秒間隔交替
+
+> **為什麼不用 Sixel / Kitty 圖片協議？**
+> 因為 VS Code 內建終端不支援任何圖片協議。Braille 字元是純 Unicode 文字，在所有終端都能正確顯示。
+
+<br>
+
+## 開發與發佈
+
+詳見 [CONTRIBUTING.md](CONTRIBUTING.md)。
+
+<br>
+
+## 致謝
+
+本專案的靈感與技術基礎來自以下開源專案：
+
+- **[claude-monitor (ccm)](https://github.com/Maciek-roboblog/Claude-Code-Usage-Monitor)** — Token 用量面板直接呼叫 ccm 的 API，感謝 Maciej 提供優秀的 Token 追蹤工具（MIT License）
+- **[Pixel Agents](https://github.com/pablodelucca/pixel-agents)** — Agent 狀態偵測的啟發式邏輯與像素精靈概念源自此 VS Code 擴充套件，感謝 Pablo De Lucca 的創意（MIT License）
+
+<br>
+
+## 授權條款
+
+本專案採用 [MIT License](LICENSE) 授權。
+
+![Python](https://img.shields.io/badge/Python-3.9%2B-blue?style=for-the-badge)
+![PyPI](https://img.shields.io/pypi/v/claude-code-dashboard?style=for-the-badge)
+![License](https://img.shields.io/badge/License-MIT-green?style=for-the-badge)