cc-pulse 1.0.2 → 1.2.0

package/README.md

@@ -1,38 +1,19 @@
-# claude-pulse
+# cc-pulse
 
-A real-time statusline for [Claude Code](https://docs.anthropic.com/en/docs/claude-code).
-
-![claude-pulse statusline](assets/demo.png)
-
-## Why
-
-- **Context & cost** — context window %, input/output/cache token breakdown, cost with burn rate, session duration
-- **MCP server health** — connection status for every server: connected, disconnected, disabled, or erroring
-- **Hook monitoring** — all hooks by event type, with broken path detection
-- **Git at a glance** — branch, new/modified/deleted file counts
-- **Fully customizable** — every component is independently configurable with multiple display styles
-
-## What You Get
+[![npm version](https://img.shields.io/npm/v/cc-pulse)](https://www.npmjs.com/package/cc-pulse)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
 
-Five lines of information, updated on every message:
-
-| Line | What it shows |
-|------|---------------|
-| **Identity** | Project name + working directory |
-| **Git** | Current branch + file changes (new, modified, deleted) |
-| **Engine** | Model, remaining % until compaction, token cost, session duration |
-| **MCP** | Server connections with health status (connected, disconnected, disabled, error) |
-| **Hooks** | Active hooks by event type, with broken path detection |
+A real-time statusline for [Claude Code](https://docs.anthropic.com/en/docs/claude-code).
 
-Context goes from green to red as it approaches compaction. Cost goes from green to red. Failed MCP servers and broken hooks are highlighted immediately.
+![cc-pulse statusline](assets/demo.png)
 
-## Install
+## 🚀 Quick Start
 
 ```bash
 npm install -g cc-pulse
 ```
 
-Add to your Claude Code settings (`~/.claude/settings.json`):
+Add to `~/.claude/settings.json`:
 
 ```json
 {
@@ -43,104 +24,115 @@ Add to your Claude Code settings (`~/.claude/settings.json`):
 }
 ```
 
-Restart Claude Code. The statusline appears above the input area.
+Restart Claude Code — the statusline appears above the input area.
 
-<details>
-<summary><strong>Install from source</strong></summary>
+## ✨ Features
 
-```bash
-git clone https://github.com/ali-nr/claude-pulse.git
-cd claude-pulse
-bun install
-bun run build
-```
+| Feature | Description |
+|---------|-------------|
+| **→Compact indicator** | Shows remaining % until auto-compaction — colors shift from green to red as you approach the limit |
+| **Token breakdown** | Input ↓, output ↑, and cache ⟳ tokens at a glance |
+| **Cost tracking** | Session cost with color coding ($1 yellow, $2 orange, $5+ red) |
+| **MCP health** | Live connection status for all MCP servers |
+| **Hook monitoring** | Active hooks by event type, with broken path detection |
+| **Git status** | Branch name + new/modified/deleted file counts |
 
-Use the full path in settings: `"command": "node /path/to/claude-pulse/dist/cli.js"`
+## 📊 What You Get
 
-</details>
+Five lines of information, updated on every message:
+
+![cc-pulse statusline](assets/demo.png)
 
-## Customize
+| Line | Content |
+|------|---------|
+| **Identity** | Project name + working directory |
+| **Git** | Branch + file changes (new, modified, deleted) |
+| **Engine** | Tier, model, context remaining, tokens, cost, duration |
+| **MCP** | Server count + individual status (✓ connected, ✗ disconnected, ○ disabled) |
+| **Hooks** | Hook count by event type, with broken path warnings |
 
-Create `~/.config/claude-pulse/config.json` to override defaults. You only need to include what you want to change.
+## ⚙️ Configuration
+
+Create `~/.config/claude-pulse/config.json` to customize. Only include what you want to change.
 
 <details>
-<summary><strong>Layout</strong></summary>
+<summary><strong>Context Window</strong></summary>
 
-The 5-line structure is fixed. You can enable/disable lines and change separators:
+The `→Compact` indicator shows remaining space until auto-compaction. When it reaches 0%, Claude compacts the conversation.
 
 ```json
 {
-  "lines": {
-    "hooks": { "enabled": false },
-    "engine": { "separator": " | " }
+  "components": {
+    "context": {
+      "style": "bar",
+      "showTokens": true,
+      "thresholds": { "warn": 70, "critical": 85, "danger": 95 }
+    }
   }
 }
 ```
 
-| Line | Key | Can toggle |
-|------|-----|------------|
-| Identity | — | No (fixed branding) |
-| Git | `git` | Yes |
-| Engine | `engine` | Yes |
-| MCP | `mcp` | Yes |
-| Hooks | `hooks` | Yes |
+| Style | Example |
+|-------|---------|
+| `bar` (default) | `→Compact ●●●●●●○○○○ 58%` |
+| `compact` | `→Compact 58%` |
+| `detailed` | `→Compact 116.0k/200.0k (58%)` |
+| `both` | `●●●●●●○○○○ free:116.0k used:84.0k` |
+
+**Color thresholds** — as remaining % drops:
+- **Green**: > 30% remaining (safe)
+- **Yellow**: 30% remaining (warn)
+- **Orange**: 15% remaining (critical)
+- **Red + 🔴**: 5% remaining (danger)
 
 </details>
 
 <details>
-<summary><strong>Context window</strong></summary>
+<summary><strong>Subscription Tier</strong></summary>
 
-Shows remaining space until auto-compaction triggers. When it reaches 0%, Claude will compact the conversation.
+Set your plan manually (auto-detection isn't reliable):
 
 ```json
 {
   "components": {
-    "context": {
-      "style": "compact",
-      "showTokens": true,
-      "showRate": false,
-      "thresholds": { "warn": 70, "critical": 85, "danger": 95 }
+    "tier": {
+      "override": "max"
     }
   }
 }
 ```
 
-| Style | Example |
-|-------|---------|
-| `compact` | `→Compact 58%` |
-| `bar` | `●●●●●●○○○○ 58%` |
-| `detailed` | `116.0k/200.0k (58%)` |
-| `both` | `●●●●●●○○○○ free:116.0k used:84.0k` |
-
-Enable `showTokens` to see `↓input ↑output ⟳cache` breakdown.
+Options: `"pro"`, `"max"`, `"api"`
 
 </details>
 
 <details>
-<summary><strong>MCP servers</strong></summary>
+<summary><strong>MCP Servers</strong></summary>
 
 ```json
 {
   "components": {
     "mcp": {
       "showNames": true,
-      "showOnlyProblems": true,
+      "showOnlyProblems": false,
       "maxDisplay": 4
     }
   }
 }
 ```
 
-- `showNames: true` — list each server with status icon
-- `showOnlyProblems: true` — hide MCP line when everything is healthy
-- Failed/disconnected servers always show in red
+| Option | Effect |
+|--------|--------|
+| `showNames: true` | List each server with status |
+| `showOnlyProblems: true` | Hide line when all servers healthy |
+| `maxDisplay: 4` | Limit servers shown ("+N more" for rest) |
 
 | Icon | Status |
 |------|--------|
-| `✓` | Connected |
-| `✗` | Disconnected |
-| `○` | Disabled |
-| `▲` | Error |
+| ✓ | Connected |
+| ✗ | Disconnected (red) |
+| ○ | Disabled |
+| ▲ | Error |
 
 </details>
 
@@ -160,11 +152,11 @@ Enable `showTokens` to see `↓input ↑output ⟳cache` breakdown.
 
 | Setting | Result |
 |---------|--------|
-| Both `true` (default) | `⚡Hooks 8 Submit:3 timezone-context,best-practices Post:2 lint-check` |
-| `showNames: false` | `⚡Hooks 8 Submit:3 Post:2 Start:2 End:1` |
+| Both `true` | `⚡Hooks 8 Submit:3 timezone-context,best-practices` |
+| `showNames: false` | `⚡Hooks 8 Submit:3 Post:2 End:1` |
 | Both `false` | `⚡Hooks 8` |
 
-Broken hooks (invalid file paths) always show in red with `▲`.
+Broken hooks (invalid paths) show in red with ▲.
 
 </details>
 
@@ -182,54 +174,61 @@ Broken hooks (invalid file paths) always show in red with `▲`.
 }
 ```
 
-Colors change automatically: green < $1, yellow $1-$2, peach $2-$5, red > $5. Burn rate appears after the session is longer than 1 minute.
+Color thresholds: green < $1, yellow $1-$2, orange $2-$5, red > $5
 
 </details>
 
 <details>
-<summary><strong>Subscription tier</strong></summary>
+<summary><strong>Layout</strong></summary>
 
-Disabled by default. There's no official way to detect your plan, so set it manually:
+The 5-line structure is fixed. You can toggle lines and change separators:
 
 ```json
 {
-  "components": {
-    "tier": {
-      "enabled": true,
-      "override": "max"
-    }
+  "lines": {
+    "hooks": { "enabled": false },
+    "engine": { "separator": " | " }
   }
 }
 ```
 
-Options: `"pro"`, `"max"`, `"api"`.
+| Line | Key | Toggleable |
+|------|-----|------------|
+| Identity | — | No (branding) |
+| Git | `git` | Yes |
+| Engine | `engine` | Yes |
+| MCP | `mcp` | Yes |
+| Hooks | `hooks` | Yes |
 
 </details>
 
 <details>
-<summary><strong>Other components</strong></summary>
+<summary><strong>All Components</strong></summary>
 
 | Component | Key Options |
 |-----------|-------------|
 | `model` | `showIcon: true` adds emoji per model |
 | `session` | `showDuration: true`, `showId: false` |
-| `cache` | Shows cache hit rate percentage |
-| `linesChanged` | Shows `+added -removed` lines changed |
-| `time` | `format: "12h"` or `"24h"`, `showTimezone: true` |
+| `cache` | Shows cache hit rate |
+| `linesChanged` | Shows `+added -removed` |
+| `time` | `format: "12h"/"24h"`, `showTimezone: true` |
 
 All components accept `"enabled": false` to hide them.
 
 </details>
 
-## Development
+## 🛠️ Development
 
 ```bash
-bun install          # Install dependencies
-bun run build        # Build to dist/
-bun run lint         # Run Biome linter
-bun run dev          # Watch mode
+git clone https://github.com/ali-nr/claude-pulse.git
+cd claude-pulse
+bun install
+bun run build
+bun test
 ```
 
+Use full path in settings: `"command": "node /path/to/claude-pulse/dist/cli.js"`
+
 ## License
 
 MIT

package/dist/cli.js

@@ -12,7 +12,7 @@ var __export = (target, all) => {
 // package.json
 var package_default = {
   name: "cc-pulse",
-  version: "1.0.2",
+  version: "1.2.0",
   description: "A customizable, real-time statusline for Claude Code",
   type: "module",
   bin: {
@@ -100,40 +100,35 @@ function renderContext(input, config, theme) {
   const ctx = input.context_window;
   const thresholds = config.thresholds ?? { warn: 70, critical: 85, danger: 95 };
   const usedPercent = ctx?.used_percentage ?? 0;
-  const remainingPercent = 100 - usedPercent;
   let color = theme.green;
   let indicator = "";
-  if (remainingPercent <= 100 - thresholds.danger) {
+  if (usedPercent >= thresholds.danger) {
     color = theme.red;
     indicator = " \uD83D\uDD34";
-  } else if (remainingPercent <= 100 - thresholds.critical) {
+  } else if (usedPercent >= thresholds.critical) {
     color = theme.peach;
     indicator = " ⚠️";
-  } else if (remainingPercent <= 100 - thresholds.warn) {
+  } else if (usedPercent >= thresholds.warn) {
     color = theme.yellow;
   }
-  const label = config.label ?? "→Compact";
+  const label = config.label ?? "Used";
   const style = config.style ?? "bar";
   let display;
-  if (style === "compact") {
-    display = `${Math.round(remainingPercent)}%`;
+  if (style === "percent") {
+    display = `${Math.round(usedPercent)}%`;
   } else if (style === "detailed" && ctx) {
     const totalUsed = ctx.total_input_tokens + ctx.total_output_tokens;
     const windowSize = ctx.context_window_size;
-    const freeTokens = Math.max(0, windowSize - totalUsed);
-    display = `${formatTokens(freeTokens)}/${formatTokens(windowSize)} (${Math.round(remainingPercent)}%)`;
+    display = `${formatTokens(totalUsed)}/${formatTokens(windowSize)} (${Math.round(usedPercent)}%)`;
   } else if (style === "bar" || style === "both") {
     const windowSize = ctx?.context_window_size || 200000;
     const totalUsed = (ctx?.total_input_tokens || 0) + (ctx?.total_output_tokens || 0);
-    const freeTokens = Math.max(0, windowSize - totalUsed);
-    const remaining = Math.round(remainingPercent / 10);
-    const depleted = 10 - remaining;
-    const bar = `${color}${"●".repeat(remaining)}${theme.reset}${"○".repeat(depleted)}`;
-    const freeLabel = `${color}free:${formatTokens(freeTokens)}${theme.reset}`;
-    const usedLabel = `${theme.overlay0}used:${formatTokens(totalUsed)}${theme.reset}`;
-    display = style === "both" ? `${bar} ${freeLabel} ${usedLabel}` : `${bar} ${color}${Math.round(remainingPercent)}%${theme.reset}`;
+    const used = Math.round(usedPercent / 10);
+    const free = 10 - used;
+    const bar = `${color}${"●".repeat(used)}${theme.reset}${"○".repeat(free)}`;
+    display = style === "both" ? `${bar} ${color}${formatTokens(totalUsed)}${theme.reset} ${theme.overlay0}/ ${formatTokens(windowSize)}${theme.reset}` : `${bar} ${color}${Math.round(usedPercent)}%${theme.reset}`;
   } else {
-    display = `${Math.round(remainingPercent)}%`;
+    display = `${Math.round(usedPercent)}%`;
   }
   let tokenInfo = "";
   if (config.showTokens && ctx) {
@@ -157,7 +152,7 @@ function renderContext(input, config, theme) {
     }
   }
   let hint = "";
-  if (config.showCompactHint && remainingPercent <= 20) {
+  if (config.showCompactHint && usedPercent >= 80) {
     hint = " \uD83D\uDCA1/compact";
   }
   const labelStr = label ? `${label} ` : "";
@@ -719,29 +714,73 @@ function parseMcpOutput(output) {
   return servers;
 }
 // src/components/model.ts
+function parseModelId(modelId) {
+  const id = modelId.toLowerCase();
+  const newFormat = id.match(/^claude-(\w+)-(\d+)-(\d+)-\d+$/);
+  if (newFormat) {
+    const [, family, major, minor] = newFormat;
+    return { family, version: `${major}.${minor}` };
+  }
+  const newFormatNoMinor = id.match(/^claude-(\w+)-(\d+)-\d{8}$/);
+  if (newFormatNoMinor) {
+    const [, family, major] = newFormatNoMinor;
+    return { family, version: major };
+  }
+  const oldFormat = id.match(/^claude-(\d+)-(\d+)-(\w+)-\d+$/);
+  if (oldFormat) {
+    const [, major, minor, family] = oldFormat;
+    return { family, version: `${major}.${minor}` };
+  }
+  const oldFormatNoMinor = id.match(/^claude-(\d+)-(\w+)-\d+$/);
+  if (oldFormatNoMinor) {
+    const [, major, family] = oldFormatNoMinor;
+    return { family, version: major };
+  }
+  return null;
+}
 function renderModel(input, config, theme) {
   if (config.enabled === false) {
     return { text: "" };
   }
+  const modelId = input.model?.id ?? "";
   const displayName = input.model?.display_name ?? "";
-  const modelName = displayName.toLowerCase();
   const icons = config.icons ?? { opus: "\uD83E\uDDE0", sonnet: "\uD83C\uDFB5", haiku: "⚡" };
   const showIcon = config.showIcon !== false;
   let icon = "\uD83E\uDD16";
   let color = theme.text;
   let modelLabel = displayName;
-  if (modelName.includes("opus")) {
-    icon = icons.opus;
-    color = theme.mauve;
-    modelLabel = "Opus";
-  } else if (modelName.includes("sonnet")) {
-    icon = icons.sonnet;
-    color = theme.blue;
-    modelLabel = "Sonnet";
-  } else if (modelName.includes("haiku")) {
-    icon = icons.haiku;
-    color = theme.green;
-    modelLabel = "Haiku";
+  const parsed = parseModelId(modelId);
+  if (parsed) {
+    const family = parsed.family;
+    const version = parsed.version;
+    if (family === "opus") {
+      icon = icons.opus;
+      color = theme.mauve;
+      modelLabel = `Opus ${version}`;
+    } else if (family === "sonnet") {
+      icon = icons.sonnet;
+      color = theme.blue;
+      modelLabel = `Sonnet ${version}`;
+    } else if (family === "haiku") {
+      icon = icons.haiku;
+      color = theme.green;
+      modelLabel = `Haiku ${version}`;
+    }
+  } else {
+    const modelName = displayName.toLowerCase();
+    if (modelName.includes("opus")) {
+      icon = icons.opus;
+      color = theme.mauve;
+      modelLabel = "Opus";
+    } else if (modelName.includes("sonnet")) {
+      icon = icons.sonnet;
+      color = theme.blue;
+      modelLabel = "Sonnet";
+    } else if (modelName.includes("haiku")) {
+      icon = icons.haiku;
+      color = theme.green;
+      modelLabel = "Haiku";
+    }
   }
   const label = config.label !== undefined ? config.label : modelLabel;
   const iconStr = showIcon ? `${icon} ` : "";
@@ -794,6 +833,124 @@ function renderSession(input, config, theme) {
   const text = `${labelPart}${parts.join(" ")}`;
   return { text };
 }
+// src/components/skills.ts
+import { existsSync as existsSync4, readdirSync, readFileSync as readFileSync4 } from "node:fs";
+import { homedir as homedir5 } from "node:os";
+import { join as join4 } from "node:path";
+function renderSkills(config, theme) {
+  if (config.enabled === false) {
+    return { text: "" };
+  }
+  const summary = getSkillsSummary();
+  const label = config.label ?? "Skills";
+  const showNames = config.showNames !== false;
+  const showCount = config.showCount !== false;
+  const maxDisplay = config.maxDisplay ?? Infinity;
+  if (summary.total === 0) {
+    const text2 = `${theme.mauve}\uD83C\uDFAF ${label} ${theme.overlay0}0${theme.reset}`;
+    return { text: text2 };
+  }
+  const validNames = summary.skills.filter((s) => s.valid).map((s) => s.name ?? s.folder).slice(0, maxDisplay);
+  const brokenNames = summary.skills.filter((s) => !s.valid).map((s) => s.folder);
+  const parts = [];
+  if (showCount) {
+    parts.push(`${theme.mauve}${summary.valid}${theme.reset}`);
+  }
+  if (showNames && validNames.length > 0) {
+    const displayNames = validNames.join(",");
+    const overflow = summary.valid > maxDisplay ? `+${summary.valid - maxDisplay}` : "";
+    parts.push(`${theme.flamingo}${displayNames}${overflow ? ` ${theme.overlay0}${overflow}` : ""}${theme.reset}`);
+  }
+  let brokenStr = "";
+  if (summary.broken > 0) {
+    const brokenDisplay = brokenNames.length <= 2 ? brokenNames.join(",") : `${summary.broken} broken`;
+    brokenStr = ` ${theme.red}▲${brokenDisplay}${theme.reset}`;
+  }
+  const text = `${theme.mauve}\uD83C\uDFAF ${label}${theme.reset}${parts.length ? ` ${parts.join(" ")}` : ""}${brokenStr}`;
+  return { text };
+}
+function getSkillsSummary() {
+  const skills = [];
+  const userSkillsPath = join4(homedir5(), ".claude", "skills");
+  scanSkillsDirectory(userSkillsPath, skills);
+  const projectSkillsPath = join4(process.cwd(), ".claude", "skills");
+  scanSkillsDirectory(projectSkillsPath, skills);
+  const seen = new Set;
+  const deduped = [];
+  for (const skill of skills.reverse()) {
+    if (!seen.has(skill.folder)) {
+      seen.add(skill.folder);
+      deduped.push(skill);
+    }
+  }
+  const valid = deduped.filter((s) => s.valid).length;
+  const broken = deduped.filter((s) => !s.valid).length;
+  return {
+    skills: deduped.reverse(),
+    valid,
+    broken,
+    total: deduped.length
+  };
+}
+function scanSkillsDirectory(dirPath, skills) {
+  if (!existsSync4(dirPath))
+    return;
+  try {
+    const entries = readdirSync(dirPath, { withFileTypes: true });
+    for (const entry of entries) {
+      if (!entry.isDirectory())
+        continue;
+      const skillInfo = validateSkill(dirPath, entry.name);
+      skills.push(skillInfo);
+    }
+  } catch {}
+}
+function validateSkill(skillsDir, folder) {
+  const skillPath = join4(skillsDir, folder);
+  const skillMdPath = join4(skillPath, "SKILL.md");
+  if (!existsSync4(skillMdPath)) {
+    return { folder, valid: false, error: "missing_file" };
+  }
+  try {
+    const content = readFileSync4(skillMdPath, "utf-8");
+    const frontmatter = parseFrontmatter(content);
+    if (!frontmatter) {
+      return { folder, valid: false, error: "invalid_frontmatter" };
+    }
+    if (!frontmatter.name || !frontmatter.description) {
+      return { folder, valid: false, error: "missing_fields" };
+    }
+    return { folder, valid: true, name: frontmatter.name };
+  } catch {
+    return { folder, valid: false, error: "invalid_frontmatter" };
+  }
+}
+function parseFrontmatter(content) {
+  const lines = content.split(`
+`);
+  if (lines[0]?.trim() !== "---") {
+    return null;
+  }
+  let endIndex = -1;
+  for (let i = 1;i < lines.length; i++) {
+    if (lines[i]?.trim() === "---") {
+      endIndex = i;
+      break;
+    }
+  }
+  if (endIndex === -1) {
+    return null;
+  }
+  const result = {};
+  for (let i = 1;i < endIndex; i++) {
+    const line = lines[i];
+    const match = line?.match(/^(\w+):\s*["']?(.+?)["']?\s*$/);
+    if (match) {
+      result[match[1]] = match[2];
+    }
+  }
+  return result;
+}
 // src/components/system.ts
 function formatTokens2(tokens) {
   if (tokens >= 1e6) {
@@ -840,9 +997,9 @@ function renderSystem(input, config, theme) {
   return { text };
 }
 // src/components/tier.ts
-import { existsSync as existsSync4, readFileSync as readFileSync4 } from "node:fs";
-import { homedir as homedir5 } from "node:os";
-import { join as join4 } from "node:path";
+import { existsSync as existsSync5, readFileSync as readFileSync5 } from "node:fs";
+import { homedir as homedir6 } from "node:os";
+import { join as join5 } from "node:path";
 var cachedTier = null;
 var cacheTime = 0;
 var CACHE_TTL3 = 30000;
@@ -870,10 +1027,10 @@ function detectTier() {
   if (cachedTier && now - cacheTime < CACHE_TTL3) {
     return cachedTier;
   }
-  const claudeJsonPath = join4(homedir5(), ".claude.json");
+  const claudeJsonPath = join5(homedir6(), ".claude.json");
   try {
-    if (existsSync4(claudeJsonPath)) {
-      const content = readFileSync4(claudeJsonPath, "utf-8");
+    if (existsSync5(claudeJsonPath)) {
+      const content = readFileSync5(claudeJsonPath, "utf-8");
       const data = JSON.parse(content);
       if (data.oauthAccount?.hasExtraUsageEnabled) {
         cachedTier = "max";
@@ -924,12 +1081,12 @@ function renderTime(config, theme) {
   return { text };
 }
 // src/config.ts
-import { existsSync as existsSync5, readFileSync as readFileSync5 } from "node:fs";
-import { homedir as homedir6 } from "node:os";
-import { join as join5 } from "node:path";
+import { existsSync as existsSync6, readFileSync as readFileSync6 } from "node:fs";
+import { homedir as homedir7 } from "node:os";
+import { join as join6 } from "node:path";
 var CONFIG_PATHS = [
-  join5(homedir6(), ".config", "claude-pulse", "config.json"),
-  join5(homedir6(), ".claude-pulse.json")
+  join6(homedir7(), ".config", "claude-pulse", "config.json"),
+  join6(homedir7(), ".claude-pulse.json")
 ];
 var FIXED_LINES = [
   { name: "identity", enabled: true, components: ["name", "cwd"], separator: " " },
@@ -941,7 +1098,8 @@ var FIXED_LINES = [
     separator: " │ "
   },
   { name: "mcp", enabled: true, components: ["mcp"], separator: " │ " },
-  { name: "hooks", enabled: true, components: ["hooks"], separator: " │ " }
+  { name: "hooks", enabled: true, components: ["hooks"], separator: " │ " },
+  { name: "skills", enabled: true, components: ["skills"], separator: " │ " }
 ];
 var DEFAULT_CONFIG = {
   theme: "catppuccin",
@@ -956,7 +1114,7 @@ var DEFAULT_CONFIG = {
     },
     context: {
       enabled: true,
-      label: "→Compact",
+      label: "Used",
       style: "bar",
       showRate: false,
       showTokens: true,
@@ -1003,6 +1161,12 @@ var DEFAULT_CONFIG = {
     },
     cache: {
       enabled: true
+    },
+    skills: {
+      enabled: true,
+      label: "Skills",
+      showCount: true,
+      showNames: true
     }
   },
   interactive: {
@@ -1015,9 +1179,9 @@ var DEFAULT_CONFIG = {
 };
 function loadConfig() {
   for (const configPath of CONFIG_PATHS) {
-    if (existsSync5(configPath)) {
+    if (existsSync6(configPath)) {
       try {
-        const content = readFileSync5(configPath, "utf-8");
+        const content = readFileSync6(configPath, "utf-8");
         const userConfig = JSON.parse(content);
         return mergeConfig(DEFAULT_CONFIG, userConfig);
       } catch {}
@@ -14662,7 +14826,7 @@ var ModelConfigSchema = exports_external.object({
 var ContextConfigSchema = exports_external.object({
   enabled: exports_external.boolean().optional(),
   label: exports_external.string().optional(),
-  style: exports_external.enum(["bar", "percent", "both", "detailed", "compact"]).optional(),
+  style: exports_external.enum(["bar", "percent", "both", "detailed"]).optional(),
   showRate: exports_external.boolean().optional(),
   showCompactHint: exports_external.boolean().optional(),
   showTokens: exports_external.boolean().optional(),
@@ -14746,6 +14910,13 @@ var CacheConfigSchema = exports_external.object({
   showHitRate: exports_external.boolean().optional(),
   showTokensSaved: exports_external.boolean().optional()
 });
+var SkillsConfigSchema = exports_external.object({
+  enabled: exports_external.boolean().optional(),
+  label: exports_external.string().optional(),
+  showCount: exports_external.boolean().optional(),
+  showNames: exports_external.boolean().optional(),
+  maxDisplay: exports_external.number().optional()
+});
 var ComponentConfigsSchema = exports_external.object({
   tier: TierConfigSchema.optional(),
   model: ModelConfigSchema.optional(),
@@ -14762,7 +14933,8 @@ var ComponentConfigsSchema = exports_external.object({
   status: exports_external.object({ enabled: exports_external.boolean().optional() }).optional(),
   linesChanged: LinesChangedConfigSchema.optional(),
   hooks: HooksConfigSchema.optional(),
-  cache: CacheConfigSchema.optional()
+  cache: CacheConfigSchema.optional(),
+  skills: SkillsConfigSchema.optional()
 });
 var LineOverrideSchema = exports_external.object({
   enabled: exports_external.boolean().optional(),
@@ -14772,7 +14944,8 @@ var LinesConfigSchema = exports_external.object({
   git: LineOverrideSchema.optional(),
   engine: LineOverrideSchema.optional(),
   mcp: LineOverrideSchema.optional(),
-  hooks: LineOverrideSchema.optional()
+  hooks: LineOverrideSchema.optional(),
+  skills: LineOverrideSchema.optional()
 });
 var PulseConfigSchema = exports_external.object({
   theme: exports_external.string(),
@@ -14920,6 +15093,8 @@ function renderComponent(name, input, config2, theme) {
       return renderHooks(config2.components.hooks ?? {}, theme);
     case "cache":
       return renderCache(input, config2.components.cache ?? {}, theme);
+    case "skills":
+      return renderSkills(config2.components.skills ?? {}, theme);
     default:
       return { text: "" };
   }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "cc-pulse",
-	"version": "1.0.2",
+	"version": "1.2.0",
 	"description": "A customizable, real-time statusline for Claude Code",
 	"type": "module",
 	"bin": {