oh-my-hi 0.2.4 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.claude-plugin/marketplace.json +3 -4
- package/.claude-plugin/plugin.json +8 -0
- package/CHANGELOG.md +44 -0
- package/CLAUDE.md +91 -0
- package/GUIDE.md +56 -13
- package/README.md +13 -12
- package/SPEC.md +42 -22
- package/package.json +5 -1
- package/scripts/generate-dashboard.mjs +384 -114
- package/scripts/parsers/skills.mjs +4 -0
- package/scripts/parsers/usage.mjs +461 -48
- package/skills/omh/SKILL.md +2 -1
- package/templates/app.js +802 -183
- package/templates/dashboard.html +1 -1
- package/templates/locales/en.json +45 -5
- package/templates/locales/ko.json +45 -5
- package/templates/styles.css +223 -9
- package/test/build.test.mjs +130 -0
- package/test/cache.test.mjs +396 -0
- package/test/plugin.test.mjs +214 -0
- package/test/web-ui.test.mjs +230 -0
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
{
|
|
2
|
+
"$schema": "https://anthropic.com/claude-code/marketplace.schema.json",
|
|
2
3
|
"name": "oh-my-hi",
|
|
3
|
-
"
|
|
4
|
-
"description": "Claude Code harness insights dashboard"
|
|
5
|
-
},
|
|
4
|
+
"description": "Claude Code harness insights dashboard",
|
|
6
5
|
"owner": {
|
|
7
6
|
"name": "Jae Sung Park",
|
|
8
7
|
"email": "alberto.park@gmail.com"
|
|
@@ -11,7 +10,7 @@
|
|
|
11
10
|
{
|
|
12
11
|
"name": "oh-my-hi",
|
|
13
12
|
"description": "Visual dashboard for Claude Code harness — usage/token analysis of skills, agents, plugins, hooks, memory, MCP servers, rules, and principles",
|
|
14
|
-
"version": "0.
|
|
13
|
+
"version": "0.4.0",
|
|
15
14
|
"author": {
|
|
16
15
|
"name": "Jae Sung Park",
|
|
17
16
|
"email": "alberto.park@gmail.com"
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "oh-my-hi",
|
|
3
|
+
"description": "Visual dashboard for Claude Code harness — usage/token analysis of skills, agents, plugins, hooks, memory, MCP servers, rules, and principles",
|
|
4
|
+
"author": {
|
|
5
|
+
"name": "Jae Sung Park",
|
|
6
|
+
"email": "alberto.park@gmail.com"
|
|
7
|
+
}
|
|
8
|
+
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,49 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [0.4.0] - 2026-04-02
|
|
4
|
+
|
|
5
|
+
### Added
|
|
6
|
+
- **Incremental cache**: Transcript parse results cached as gzipped append-only segments. Only changed files are re-parsed on subsequent runs
|
|
7
|
+
- **Progressive loading**: Cold start shows 7-day preview immediately, then loads full data in background with partial banner notification
|
|
8
|
+
- **Lightweight mode** (`--data-only`): Uses mtime-index for change detection without loading full cache. Writes plain JSON pending files merged on next `/omh` run
|
|
9
|
+
- **Data/shell separation**: `data.js` (data) separated from `index.html` (shell). Shell rebuilt only on version change, data updated independently
|
|
10
|
+
- **Update check**: `/omh --update` to check and install latest version. Auto-check runs once per day on `/omh` with 24h cache
|
|
11
|
+
- **Migration detection**: Auto-rebuilds on version upgrade with informational message
|
|
12
|
+
- **Cache minification**: Key shortening + string interning (model, context, sessionId) reduces cache size ~80%
|
|
13
|
+
- **Mtime-index**: Lightweight change detection file with relative paths and common prefix compression
|
|
14
|
+
|
|
15
|
+
### Changed
|
|
16
|
+
- `--data-only` now runs in lightweight mode (no full cache load, no dashboard rebuild)
|
|
17
|
+
- Stop hook collects data only (~0.15s), dashboard updates via `data.js`
|
|
18
|
+
- Help page: removed install section (redundant for installed users), update via `--update` parameter
|
|
19
|
+
- `findSkillFiles` excludes `node_modules`, `.git`, `temp_git_*`, `temp_local_*` directories
|
|
20
|
+
|
|
21
|
+
### Fixed
|
|
22
|
+
- `findSkillFiles` hanging when plugin cache contains `node_modules` directories
|
|
23
|
+
|
|
24
|
+
## [0.3.0] - 2026-04-01
|
|
25
|
+
|
|
26
|
+
### Added
|
|
27
|
+
- **Cost trend charts**: Daily/weekly/monthly cost trend with area gradient (Token: Cost page)
|
|
28
|
+
- **Token budget**: Configurable daily/weekly/monthly spending thresholds with progress bars and chart grid lines (localStorage-persisted)
|
|
29
|
+
- **Session deep dive**: Clickable top sessions table → detailed view with timeline, models, skills/agents/MCP used (`#session/{id}`)
|
|
30
|
+
- **Period comparison**: Compare toggle (⚖) overlays previous period data on stat cards and trend chart
|
|
31
|
+
- **Unused items cleanup**: MCP servers added to unused detection; cleanup tip shown when >3 unused items
|
|
32
|
+
- **Cache efficiency tips**: Contextual insight cards for low hit rate, high creation/read ratio, no-cache sessions
|
|
33
|
+
- **Test suite**: 55 tests covering build output, web-ui templates, plugin structure, and parameter behavior (`npm test`)
|
|
34
|
+
- **CLAUDE.md**: Project-level instructions for contributors and AI assistants
|
|
35
|
+
|
|
36
|
+
### Changed
|
|
37
|
+
- Token sub-menu restructured into 3 pages: Cost (`#tokens-cost`), Prompt (`#tokens-prompt`), Session (`#tokens-session`)
|
|
38
|
+
- Task category and tool context charts moved from Analysis to Token Overview
|
|
39
|
+
- Old `#tokens-analysis` route auto-redirects to `#tokens-prompt`
|
|
40
|
+
- Session detail sidebar keeps Session menu highlighted
|
|
41
|
+
|
|
42
|
+
### Fixed
|
|
43
|
+
- Marketplace plugin discovery: added `.claude-plugin/plugin.json`, aligned `marketplace.json` with official schema
|
|
44
|
+
- Install command in README and Help: `oh-my-hi@oh-my-hi-marketplace` → `oh-my-hi@oh-my-hi`
|
|
45
|
+
- Budget save/clear no longer scrolls page to top
|
|
46
|
+
|
|
3
47
|
## [0.2.4] - 2026-04-01
|
|
4
48
|
|
|
5
49
|
### Fixed
|
package/CLAUDE.md
ADDED
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
# Oh-My-Hi
|
|
2
|
+
|
|
3
|
+
Claude Code plugin — harness configuration & token usage dashboard.
|
|
4
|
+
|
|
5
|
+
## Tech Stack
|
|
6
|
+
|
|
7
|
+
- Node.js (ESM), vanilla JS frontend (no framework)
|
|
8
|
+
- esbuild for CSS/JS minification
|
|
9
|
+
- billboard.js for charts (bundled inline, no CDN)
|
|
10
|
+
- Single-file HTML output (`file://` compatible)
|
|
11
|
+
|
|
12
|
+
## Build & Test
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
npm run build # Generate output/index.html + data.json (--data-only)
|
|
16
|
+
npm test # Run all tests (build, web-ui, plugin)
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
Build entry: `node scripts/generate-dashboard.mjs` — full mode generates `index.html` (shell) + `data.js` (data) + cache segments. `--data-only` runs lightweight mode (mtime check → parse changes → update data.js).
|
|
20
|
+
|
|
21
|
+
### Build Gotcha
|
|
22
|
+
|
|
23
|
+
Running without `node_modules` causes `__BB_JS__ is not defined` errors. Since v0.2.4 dependencies auto-install, but verify `npm install` first when building manually.
|
|
24
|
+
|
|
25
|
+
## File Structure
|
|
26
|
+
|
|
27
|
+
```
|
|
28
|
+
scripts/generate-dashboard.mjs # Build script (entry point)
|
|
29
|
+
scripts/parsers/*.mjs # 15 data parsers
|
|
30
|
+
templates/dashboard.html # HTML shell with placeholders
|
|
31
|
+
templates/app.js # Frontend JS (~3700 lines)
|
|
32
|
+
templates/styles.css # All CSS
|
|
33
|
+
templates/locales/{en,ko}.json # i18n (en default, ko supported)
|
|
34
|
+
templates/work-types.json # Task category schema (25 types)
|
|
35
|
+
skills/omh/SKILL.md # Plugin skill definition
|
|
36
|
+
.claude-plugin/marketplace.json # Marketplace metadata
|
|
37
|
+
.claude-plugin/plugin.json # Plugin metadata
|
|
38
|
+
test/*.test.mjs # Tests (Node test runner)
|
|
39
|
+
output/ # Generated artifacts (gitignored)
|
|
40
|
+
data.js # Minified data for browser
|
|
41
|
+
cache/ # Incremental cache (gzip segments + mtime index)
|
|
42
|
+
pending/ # Lightweight mode deltas (plain JSON)
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## Dashboard Pages
|
|
46
|
+
|
|
47
|
+
| Page | Hash | Sub-menu of |
|
|
48
|
+
|------|------|-------------|
|
|
49
|
+
| Harness Overview | `#overview` | — |
|
|
50
|
+
| Token Overview | `#tokens` | — |
|
|
51
|
+
| Token: Cost | `#tokens-cost` | Tokens |
|
|
52
|
+
| Token: Prompt | `#tokens-prompt` | Tokens |
|
|
53
|
+
| Token: Session | `#tokens-session` | Tokens |
|
|
54
|
+
| Session Detail | `#session/{id}` | Tokens > Session |
|
|
55
|
+
| Structure | `#structure` | — |
|
|
56
|
+
| Help | `#help` | — |
|
|
57
|
+
| Category / Detail | `#{key}` / `#{key}/{name}` | Sidebar |
|
|
58
|
+
|
|
59
|
+
## Release Workflow
|
|
60
|
+
|
|
61
|
+
Execute in order when a version bump is requested:
|
|
62
|
+
|
|
63
|
+
1. `npm test` — abort on failure
|
|
64
|
+
2. **Semver bump** — update package.json + .claude-plugin/marketplace.json simultaneously
|
|
65
|
+
3. **CHANGELOG.md** — add new version section with changes
|
|
66
|
+
4. **SPEC.md** / **GUIDE.md** — sync if structure or features changed
|
|
67
|
+
5. **Commit & push** — commit message format: `vX.Y.Z: {summary}`
|
|
68
|
+
6. **Git tag** — create `git tag vX.Y.Z` and push
|
|
69
|
+
7. **npm publish** — prompt user for OTP
|
|
70
|
+
|
|
71
|
+
## Code Conventions
|
|
72
|
+
|
|
73
|
+
- Rendering pattern: build HTML string → `content.innerHTML = html` → `bindContentActions()` → draw charts
|
|
74
|
+
- Adding a new page: register route in `applyHash()` → add branch in `renderContent()` → add menu in `renderSidebar()` → write render function
|
|
75
|
+
- i18n: use `t(key)` function; add new keys to both en.json and ko.json
|
|
76
|
+
- Charts: `bb.generate({ bindto, data, ... })` via billboard.js API
|
|
77
|
+
- State persistence via localStorage: `harness-theme`, `harness-lang`, `harness-period`, `harness-budget`, `harness-compare`
|
|
78
|
+
|
|
79
|
+
## Skill Spec Compliance
|
|
80
|
+
|
|
81
|
+
SKILL.md follows the [Agent Skills Specification](https://agentskills.io/specification):
|
|
82
|
+
- `name` must be lowercase alphanumeric + hyphens, matching the parent directory name
|
|
83
|
+
- `description` is required (1-1024 chars), should describe what + when
|
|
84
|
+
- `argument-hint` is a Claude Code extension (not in agentskills.io spec, but harmless)
|
|
85
|
+
- Keep SKILL.md body under 500 lines; move detailed content to `references/` or `scripts/`
|
|
86
|
+
|
|
87
|
+
## Distribution
|
|
88
|
+
|
|
89
|
+
- **npm**: `npm publish` (package name: `oh-my-hi`)
|
|
90
|
+
- **Marketplace**: git-based (`netil/oh-my-hi`)
|
|
91
|
+
- **Install**: `claude plugin marketplace add netil/oh-my-hi` → `claude plugin install oh-my-hi`
|
package/GUIDE.md
CHANGED
|
@@ -21,9 +21,12 @@ Filter all usage data by time period:
|
|
|
21
21
|
| **30d** | Last 30 days (today inclusive) |
|
|
22
22
|
| **All** | All collected data since first session |
|
|
23
23
|
| **📅** | Custom date range picker |
|
|
24
|
+
| **⚖** | Compare toggle — overlays previous period data on stat cards and trend chart (7d/30d only) |
|
|
24
25
|
|
|
25
26
|
Hover over a non-active button to preview the date range in a tooltip. The active range is shown below the buttons.
|
|
26
27
|
|
|
28
|
+
**Compare mode**: When ⚖ is active, each stat card shows the previous period value below the current value, and the token trend chart overlays the previous period as a gray line. "Previous period" means the same-length window immediately before the current one (e.g., 7d selected → compares last 7 days vs. the 7 days before that).
|
|
29
|
+
|
|
27
30
|
### Search
|
|
28
31
|
|
|
29
32
|
Type to filter sidebar items by name. Matches are highlighted across all categories.
|
|
@@ -48,7 +51,7 @@ The landing page showing a high-level summary of your harness activity.
|
|
|
48
51
|
| **Popular Skills** | Top 5 most-used skills ranked by call count. |
|
|
49
52
|
| **Activity Heatmap** | GitHub-style calendar heatmap of daily activity intensity. |
|
|
50
53
|
| **Recent Activity** | Timeline of the 10 most recent skill, agent, and command invocations. |
|
|
51
|
-
| **Unused Items** | Skills and
|
|
54
|
+
| **Unused Items** | Skills, agents, and MCP servers that were registered but never called in the selected period. When more than 3 items are unused, a cleanup tip is shown suggesting how to reduce context loading. |
|
|
52
55
|
|
|
53
56
|
---
|
|
54
57
|
|
|
@@ -58,15 +61,28 @@ Token usage analytics across all Claude Code sessions.
|
|
|
58
61
|
|
|
59
62
|
| Section | Description |
|
|
60
63
|
|---------|-------------|
|
|
61
|
-
| **Stat Cards** | Total tokens, input tokens, output tokens, cache tokens — each with period-over-period change. |
|
|
62
|
-
| **Estimated Cost** | Total cost, daily average cost, and per-model cost cards. Based on Anthropic API token pricing (not actual CLI subscription billing). |
|
|
63
|
-
| **Cost Calculation** | Expandable section with the pricing formula, collapsible model pricing table (per 1M tokens), and a link to [anthropic.com/pricing](https://www.anthropic.com/pricing). |
|
|
64
|
+
| **Stat Cards** | Total tokens, input tokens, output tokens, cache tokens — each with period-over-period change. In compare mode, previous period values are also shown. |
|
|
64
65
|
| **Model Distribution** | Donut chart of token usage by model. |
|
|
65
|
-
| **Daily Token Usage** |
|
|
66
|
+
| **Daily Token Usage** | Area chart of daily token consumption trend. In compare mode, previous period is overlaid as a gray line. |
|
|
66
67
|
| **Token Activity** | Calendar heatmap of daily token usage intensity. |
|
|
68
|
+
| **Tokens by Task Category** | Horizontal bar chart grouping token usage by auto-classified work type (code editing, documentation, planning, etc.). |
|
|
69
|
+
| **Token Usage by Tool** | Horizontal bar chart of tokens attributed to specific skills, agents, or tools (top 10). |
|
|
67
70
|
| **Token Usage by Model** | Table breakdown: input, output, cache, total tokens, and estimated cost per model. |
|
|
68
71
|
| **Token Insights** | Auto-generated analysis cards covering cache efficiency, response efficiency, model usage, cost breakdown, daily patterns, and peak hours. |
|
|
69
72
|
|
|
73
|
+
---
|
|
74
|
+
|
|
75
|
+
### 💰 Tokens > Cost
|
|
76
|
+
|
|
77
|
+
Cost analysis and budget tracking.
|
|
78
|
+
|
|
79
|
+
| Section | Description |
|
|
80
|
+
|---------|-------------|
|
|
81
|
+
| **Stat Cards** | Total cost, daily average cost, and per-model cost cards. Based on Anthropic API token pricing (not actual CLI subscription billing). |
|
|
82
|
+
| **Cost Budget** | Configurable daily/weekly/monthly spending thresholds. Set values and click Save — stored in browser localStorage. Progress bars show current spending vs. budget, with warnings at 80% and exceeded amount + percentage at 100%+. |
|
|
83
|
+
| **Cost Trend Charts** | Three area gradient charts (daily in orange, weekly in purple, monthly in green). When a budget is set, a blue dashed grid line marks the threshold. |
|
|
84
|
+
| **Cost Calculation** | Expandable section with the pricing formula, collapsible model pricing table (per 1M tokens), and a link to [anthropic.com/pricing](https://www.anthropic.com/pricing). |
|
|
85
|
+
|
|
70
86
|
#### Cost Calculation Formula
|
|
71
87
|
|
|
72
88
|
```
|
|
@@ -78,19 +94,40 @@ Prices are per 1M tokens (USD), sourced from Anthropic's official API pricing. C
|
|
|
78
94
|
|
|
79
95
|
---
|
|
80
96
|
|
|
81
|
-
###
|
|
97
|
+
### 💬 Tokens > Prompt
|
|
82
98
|
|
|
83
|
-
|
|
99
|
+
Prompt and response analysis.
|
|
84
100
|
|
|
85
101
|
| Section | Description |
|
|
86
102
|
|---------|-------------|
|
|
87
|
-
| **Tokens by Task Category** | Horizontal bar chart grouping token usage by auto-classified work type (code editing, documentation, planning, etc.). Categories are derived from skill/agent descriptions and saved in `task-categories.json` for customization. |
|
|
88
|
-
| **Token Usage by Tool** | Horizontal bar chart of tokens attributed to specific skills, agents, or tools (top 10). |
|
|
89
103
|
| **Prompt Statistics** | Total prompts, average prompt length (chars), short prompt ratio (≤100 chars), long prompt ratio (≥500 chars). |
|
|
90
104
|
| **Response Latency** | Average, median (P50), 95th percentile (P95), and max response time (human→assistant interval). |
|
|
91
|
-
| **Session Analysis** | Total sessions, average messages per session, average session duration, longest session. |
|
|
92
105
|
| **Hourly Token Distribution** | Bar chart of token usage by hour of day (24h). |
|
|
93
|
-
| **Cache Efficiency** | Fresh input, cache read, cache creation token counts with percentages and overall cache hit rate. |
|
|
106
|
+
| **Cache Efficiency** | Fresh input, cache read, cache creation token counts with percentages and overall cache hit rate. Followed by contextual tips: low hit rate warnings, high creation/read ratio detection, and session-level cache usage analysis. |
|
|
107
|
+
|
|
108
|
+
---
|
|
109
|
+
|
|
110
|
+
### 📋 Tokens > Session
|
|
111
|
+
|
|
112
|
+
Session-level usage analysis.
|
|
113
|
+
|
|
114
|
+
| Section | Description |
|
|
115
|
+
|---------|-------------|
|
|
116
|
+
| **Stat Cards** | Total sessions, average messages per session, average session duration, longest session. |
|
|
117
|
+
| **Top Sessions** | Table of up to 20 sessions ranked by token usage. Shows date (with day of week), total tokens, estimated cost, duration, and models used. Click any row to open the session detail view. |
|
|
118
|
+
|
|
119
|
+
#### Session Detail (`#session/{id}`)
|
|
120
|
+
|
|
121
|
+
Clicking a session row navigates to a dedicated detail page:
|
|
122
|
+
|
|
123
|
+
| Section | Description |
|
|
124
|
+
|---------|-------------|
|
|
125
|
+
| **Stat Cards** | Total tokens, estimated cost, duration, message count for this session. |
|
|
126
|
+
| **Models Used** | Badges for each model used during the session with call counts. |
|
|
127
|
+
| **Skills / Agents / MCP** | Badges showing which skills, agents, and MCP servers were invoked. |
|
|
128
|
+
| **Activity Timeline** | Chronological table of every token entry: time, model, context, input/output/cache tokens, and cost. |
|
|
129
|
+
|
|
130
|
+
Use the "← Back to Sessions" button to return to the session list.
|
|
94
131
|
|
|
95
132
|
---
|
|
96
133
|
|
|
@@ -156,8 +193,14 @@ Toggle via the theme button in the sidebar footer. Preference is persisted in `l
|
|
|
156
193
|
|
|
157
194
|
Stat cards with a change percentage compare the selected period against the immediately preceding period of equal length. For example, 7d compares the last 7 days vs. the 7 days before that.
|
|
158
195
|
|
|
196
|
+
Enable the ⚖ compare toggle in the sidebar to see explicit previous period values on stat cards and a gray overlay line on the token trend chart. Compare mode is available for 7d and 30d periods (disabled for All and custom ranges).
|
|
197
|
+
|
|
159
198
|
### Data Refresh
|
|
160
199
|
|
|
161
|
-
Run `/omh --data-only` to
|
|
200
|
+
Run `/omh --data-only` to collect the latest data without rebuilding the dashboard. The data file (`data.js`) is updated incrementally — only changed transcript files are re-parsed.
|
|
201
|
+
|
|
202
|
+
Enable auto-refresh with `/omh --enable-auto` to collect data on every session end. Bookmark `output/index.html` and refresh the page anytime to see the latest data.
|
|
203
|
+
|
|
204
|
+
### Update
|
|
162
205
|
|
|
163
|
-
|
|
206
|
+
Run `/omh --update` to check for and install the latest version. An update check also runs automatically once per day when you use `/omh`.
|
package/README.md
CHANGED
|
@@ -31,17 +31,9 @@ claude plugin install oh-my-hi
|
|
|
31
31
|
|
|
32
32
|
```bash
|
|
33
33
|
/plugin marketplace add netil/oh-my-hi
|
|
34
|
-
/plugin install oh-my-hi@oh-my-hi
|
|
34
|
+
/plugin install oh-my-hi@oh-my-hi
|
|
35
35
|
```
|
|
36
36
|
|
|
37
|
-
> Run the same commands to update to the latest version.
|
|
38
|
-
|
|
39
|
-
> **⚠️ Update caveat:** Due to a [known issue](https://github.com/anthropics/claude-code/issues/37252) in Claude Code's plugin system, `plugin install` may not detect new versions from the cached marketplace. If the update is not applied, pull the marketplace manually first:
|
|
40
|
-
> ```bash
|
|
41
|
-
> git -C "${CLAUDE_CONFIG_DIR:-$HOME/.claude}/plugins/marketplaces/oh-my-hi" pull origin main
|
|
42
|
-
> ```
|
|
43
|
-
> Then run the install command again.
|
|
44
|
-
|
|
45
37
|
## Usage
|
|
46
38
|
|
|
47
39
|
Run in Claude Code:
|
|
@@ -57,9 +49,10 @@ This will parse your harness data, build the dashboard, and open it in your brow
|
|
|
57
49
|
| Command | Description |
|
|
58
50
|
|---------|-------------|
|
|
59
51
|
| `/omh` | Full build — parse data, build web-ui, open in browser |
|
|
60
|
-
| `/omh --data-only` |
|
|
52
|
+
| `/omh --data-only` | Lightweight data collection (skip dashboard build) |
|
|
61
53
|
| `/omh --enable-auto` | Auto-rebuild on session end (registers Stop hook) |
|
|
62
54
|
| `/omh --disable-auto` | Disable auto-rebuild |
|
|
55
|
+
| `/omh --update` | Check and install latest version |
|
|
63
56
|
| `/omh --status` | Check auto-rebuild status |
|
|
64
57
|
| `/omh <path>` | Build with specific project paths only |
|
|
65
58
|
|
|
@@ -71,7 +64,15 @@ Enable automatic data refresh so the dashboard stays up to date:
|
|
|
71
64
|
/omh --enable-auto
|
|
72
65
|
```
|
|
73
66
|
|
|
74
|
-
This registers a Stop hook that
|
|
67
|
+
This registers a Stop hook that collects data whenever a Claude Code session ends. The dashboard data (`data.js`) is updated incrementally — just refresh the browser tab to see the latest data.
|
|
68
|
+
|
|
69
|
+
### Update
|
|
70
|
+
|
|
71
|
+
```
|
|
72
|
+
/omh --update
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
Checks for new versions and updates the plugin. An update check also runs automatically once per day when using `/omh`.
|
|
75
76
|
|
|
76
77
|
## Guide
|
|
77
78
|
|
|
@@ -82,7 +83,7 @@ See **[GUIDE.md](GUIDE.md)** for a detailed walkthrough of each dashboard sectio
|
|
|
82
83
|
1. **Parse** — Reads your Claude Code config directory for skills, agents, plugins, hooks, memory, MCP servers, rules, principles, commands, teams, plans, and usage transcripts
|
|
83
84
|
2. **Analyze** — Extracts token usage, prompt stats, response latency, activity patterns from `.jsonl` transcripts
|
|
84
85
|
3. **Classify** — Auto-categorizes token usage into work types (code editing, docs, planning, etc.) based on skill/agent descriptions. Saves to `task-categories.json` for user customization
|
|
85
|
-
4. **Build** — Generates
|
|
86
|
+
4. **Build** — Generates `index.html` (shell with CSS/JS) + `data.js` (minified data). Data is separated from the shell so that only data needs updating on refresh
|
|
86
87
|
5. **Open** — On macOS, reuses an existing browser tab if found (AppleScript). On Windows/Linux, opens a new tab
|
|
87
88
|
|
|
88
89
|
## i18n
|
package/SPEC.md
CHANGED
|
@@ -39,7 +39,15 @@ oh-my-hi/
|
|
|
39
39
|
│ └── ko.json # Korean locale
|
|
40
40
|
└── output/ # Generated artifacts
|
|
41
41
|
├── data.json # Raw data (for programmatic access)
|
|
42
|
-
|
|
42
|
+
├── data.js # Minified data for browser (let DATA = ...)
|
|
43
|
+
├── index.html # Dashboard shell (CSS+JS+locales, loads data.js)
|
|
44
|
+
├── cache/
|
|
45
|
+
│ ├── mtime-index.json # File path → mtime mapping (relative paths)
|
|
46
|
+
│ ├── base-*.json.gz # Compacted cache (after 50 segments)
|
|
47
|
+
│ ├── seg-*.json.gz # Incremental cache segments
|
|
48
|
+
│ └── .update-check # npm registry check cache (24h TTL)
|
|
49
|
+
└── pending/
|
|
50
|
+
└── *.json # Lightweight mode deltas (plain JSON)
|
|
43
51
|
```
|
|
44
52
|
|
|
45
53
|
## CLI Parameters
|
|
@@ -47,9 +55,10 @@ oh-my-hi/
|
|
|
47
55
|
| Parameter | Description |
|
|
48
56
|
|-----------|-------------|
|
|
49
57
|
| `/omh` | Full build: parse data → build web-ui → open/refresh browser |
|
|
50
|
-
| `--data-only` |
|
|
58
|
+
| `--data-only` | Lightweight data collection — parse changed files, update data.js (skip full build) |
|
|
51
59
|
| `--enable-auto` | Register Stop hook for auto-rebuild on session end |
|
|
52
60
|
| `--disable-auto` | Remove Stop hook |
|
|
61
|
+
| `--update` | Check npm registry and install latest version |
|
|
53
62
|
| `--status` | Show auto-refresh hook status |
|
|
54
63
|
| `<path> [path...]` | Include only specified project paths |
|
|
55
64
|
| `--help` | Show help |
|
|
@@ -57,18 +66,24 @@ oh-my-hi/
|
|
|
57
66
|
## Build Pipeline
|
|
58
67
|
|
|
59
68
|
```
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
69
|
+
Full mode (/omh):
|
|
70
|
+
1. Detect scopes (global + projects)
|
|
71
|
+
2. Load cache segments + merge pending files
|
|
72
|
+
3. Parse changed transcript files (incremental via mtime/size cache)
|
|
73
|
+
4. Save cache segment (gzipped, append-only) + mtime index
|
|
74
|
+
5. Build task categories (description-based classification → task-categories.json)
|
|
75
|
+
6. Generate data.json + data.js (minified for browser)
|
|
76
|
+
7. Generate index.html (only on version change or first run):
|
|
77
|
+
- dashboard.html template + __STYLES__ + __APP_JS__ + __LOCALE_DATA__ + billboard.js
|
|
78
|
+
- Data loaded via <script src="data.js"> (not inlined)
|
|
79
|
+
8. Open/refresh browser + async update check (24h cache)
|
|
80
|
+
|
|
81
|
+
Lightweight mode (--data-only, Stop hook):
|
|
82
|
+
1. Load mtime-index.json (~34KB) for change detection
|
|
83
|
+
2. Parse only changed transcript files
|
|
84
|
+
3. Save pending file (plain JSON, no gzip)
|
|
85
|
+
4. Update data.js by merging into existing data.json
|
|
86
|
+
5. Rebuild index.html only if missing or version changed
|
|
72
87
|
```
|
|
73
88
|
|
|
74
89
|
## Data Sources (13 parsers)
|
|
@@ -138,9 +153,12 @@ Built at build time in `generate-dashboard.mjs`. Persisted in `task-categories.j
|
|
|
138
153
|
|
|
139
154
|
| Page | Hash | Content |
|
|
140
155
|
|------|------|---------|
|
|
141
|
-
| Harness Overview | `#overview` | Stats cards, category distribution donut, daily trend, popular skills, activity heatmap, recent activity, insights, unused items |
|
|
142
|
-
| Token Overview | `#tokens` | Token stats, model distribution donut, trend chart, activity heatmap, model table, insights |
|
|
143
|
-
| Token
|
|
156
|
+
| Harness Overview | `#overview` | Stats cards, category distribution donut, daily trend, popular skills, activity heatmap, recent activity, insights, unused items (incl. MCP servers + cleanup tips) |
|
|
157
|
+
| Token Overview | `#tokens` | Token stats, model distribution donut, trend chart, activity heatmap, task category bar, tool context bar, model table, insights |
|
|
158
|
+
| Token: Cost | `#tokens-cost` | Cost cards, budget config + progress bars, cost trend charts (daily/weekly/monthly with budget grid lines), cost formula |
|
|
159
|
+
| Token: Prompt | `#tokens-prompt` | Prompt stats, response latency, hourly distribution, cache efficiency + tips |
|
|
160
|
+
| Token: Session | `#tokens-session` | Session stats, top sessions table (clickable) |
|
|
161
|
+
| Session Detail | `#session/{id}` | Session stat cards, models/skills/agents/MCP badges, activity timeline table |
|
|
144
162
|
| Structure | `#structure` | Component flow SVG, file tree |
|
|
145
163
|
| Help | `#help` | Parameters table, data parsing reference, token/activity reference |
|
|
146
164
|
| Category Overview | `#{categoryKey}` | Total count, usage stats, all items list |
|
|
@@ -154,8 +172,10 @@ configFiles, skills, agents, plugins, hooks, memory, mcpServers, rules, principl
|
|
|
154
172
|
|
|
155
173
|
## Key Architectural Decisions
|
|
156
174
|
|
|
157
|
-
1. **Data
|
|
158
|
-
2. **
|
|
159
|
-
3. **
|
|
160
|
-
4. **
|
|
161
|
-
5. **
|
|
175
|
+
1. **Data separated from shell**: `index.html` is the dashboard shell (CSS/JS/locales), `data.js` holds the data. Shell is rebuilt only on version change; data is updated independently via `<script src="data.js">` (works with `file://` protocol).
|
|
176
|
+
2. **Incremental cache**: Transcript parse results cached as gzipped segments (append-only). Only changed files are re-parsed. Compaction merges segments when count exceeds 50.
|
|
177
|
+
3. **Lightweight mode**: `--data-only` (Stop hook) uses a mtime-index for change detection without loading full cache. Writes plain JSON pending files, updates `data.js` by merging into existing `data.json`.
|
|
178
|
+
4. **Progressive loading**: On cold start, shows 7-day preview immediately, then loads full data in background.
|
|
179
|
+
5. **Persistent category mapping**: `task-categories.json` auto-generated at every build from `work-types.json` schema.
|
|
180
|
+
6. **Auto-update check**: `/omh` queries npm registry asynchronously (3s timeout, 24h cache). Notifies when new version is available.
|
|
181
|
+
7. **AppleScript tab reuse**: macOS-only optimization. Searches all browser windows/tabs for URL match.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "oh-my-hi",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.0",
|
|
4
4
|
"description": "Claude Code harness insights dashboard",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -16,6 +16,10 @@
|
|
|
16
16
|
"insights",
|
|
17
17
|
"analytics"
|
|
18
18
|
],
|
|
19
|
+
"scripts": {
|
|
20
|
+
"test": "node --test test/*.test.mjs",
|
|
21
|
+
"build": "node scripts/generate-dashboard.mjs --data-only"
|
|
22
|
+
},
|
|
19
23
|
"homepage": "https://github.com/netil/oh-my-hi",
|
|
20
24
|
"dependencies": {
|
|
21
25
|
"billboard.js": "^3.18.0",
|