tokengolf 0.5.0 → 0.5.2

package/CHANGELOG.md

@@ -7,6 +7,7 @@ TokenGolf patch notes — what changed, what it measures, and why the mechanic e
 ## [Unreleased]
 
 ### Changed
+- **Design D HUD** — StatusLine HUD redesigned with `██` accent bar, inline `▓░` progress bars for budget and context, no separator lines. 1 line when context <50%, 2 lines when context visible. Accent bar turns red when budget >75%. Matches Design D across all UI surfaces.
 - **Design D block accent UI** — All bordered boxes replaced with left-only `██` block accent bars. Eliminates persistent right-border misalignment caused by emoji/unicode width differences across terminals. Color-coded: yellow for won, red for died, gray for neutral.
 - ScoreCard, StatsView, ActiveRun, StartRun components all use custom Ink `borderStyle` with `left: '██'`, no right/top/bottom borders
 - session-end.js ANSI scorecard uses `██` prefix per line with `─` horizontal separators

package/CLAUDE.md

@@ -347,10 +347,13 @@ Nine hooks in `hooks/` directory, installed via `tokengolf install`. Most comple
 ### `StatusLine` (`statusline.sh`)
 - Bash script; uses `TG_SESSION_JSON=... python3 - "$STATE_FILE" <<'PYEOF'` pattern to avoid heredoc/stdin conflict
 - Receives live session JSON (cost, context %, model) via stdin
-- Shows: quest/mode | tier emoji + cost [/budget pct%] | [efficiency rating] | [🪶/🎒/📦 ctx%] | model label | [floor]
+- **Design D accent bar**: `██` prefix on each line, color-coded (yellow normal, red when budget >75%)
+- Line 1: `██ ⛳ quest  $cost/budget ▓▓▓░░░ pct%  RATING  model  F1/5`
+- Line 2 (always shown when context data available): `██ 🧠 ▓▓▓▓░░░ ctx% 🪶/🎒/📦`
+- Budget progress bar: `▓` filled, `░` empty, 11 chars wide. Red when >75%, yellow otherwise
+- Context progress bar: `▓░` 10 chars wide. Green (50–74%), yellow (75–89%), red (90%+); hidden below 50%
 - Model label: `⚔️ Sonnet`, `⚔️ Sonnet·High`, `🏹 Haiku`, `🧙 Opus·Max`, etc. Effort appended only when explicitly set in settings.json (medium omitted — it's the default)
-- Context load: 🪶 green (50–74%), 🎒 yellow (75–89%), 📦 red (90%+); hidden below 50%
-- Separator lines (`───────────────`) above and below HUD row
+- Always 2 lines when context data is available from Claude Code
 - statusLine config must be an object: `{type:"command", command:"...statusline.sh", padding:1}`
 
 ### Hook installation

package/README.md

@@ -253,16 +253,13 @@ Budget presets are model-calibrated — Haiku Diamond is $0.15, Opus Diamond is
 After `tokengolf install`, a status line appears in every Claude Code session showing quest, cost, efficiency, context load, and model class.
 
 ```
- ───────────────
- ⛳ add pagination to /users | 🥈 $0.54/$1.50 36% | EFFICIENT | ⚔️ Sonnet | Floor 2/5
- ───────────────
+██ ⛳ add pagination to /users  $0.54/1.50 ▓▓▓▓░░░░░░░ 36%  EFFICIENT  ⚔️ Sonnet  F2/5
 
- ───────────────
- ⛳ refactor auth middleware | 🥈 $0.82/$4.00 21% | LEGENDARY | 🪶 52% | 🧙 Opus | Floor 3/5
- ───────────────
+██ ⛳ refactor auth middleware  $0.82/4.00 ▓▓░░░░░░░░░ 21%  LEGENDARY  🧙 Opus  F3/5
+██ 🧠 ▓▓▓▓▓░░░░░ 52% 🪶
 ```
 
-Context indicators: **🪶** green (50–74%) · **🎒** yellow (75–89%) · **📦** red (90%+). **💤** replaces ⛳ if the previous session fainted.
+Budget bar turns red above 75%. Context bar (line 2) appears at 50%+: **🪶** green · **🎒** yellow · **📦** red. Accent `██` turns red in danger. **💤** replaces ⛳ when fainted.
 
 ---
 

package/dist/cli.js

@@ -847,7 +847,8 @@ function hudLine({ quest, model, cost, budget, ctxPct, effort, fainted, floor })
     modelEmoji = "?";
   }
   const labelParts = [`${modelEmoji} ${modelName}`];
-  if (effort) labelParts.push(effort.charAt(0).toUpperCase() + effort.slice(1));
+  if (effort && effort !== "medium")
+    labelParts.push(effort.charAt(0).toUpperCase() + effort.slice(1));
   const modelLabel = labelParts.join("\xB7");
   let tierEmoji;
   if (cost < 0.1) tierEmoji = "\u{1F48E}";
@@ -855,8 +856,7 @@ function hudLine({ quest, model, cost, budget, ctxPct, effort, fainted, floor })
   else if (cost < 1) tierEmoji = "\u{1F948}";
   else if (cost < 3) tierEmoji = "\u{1F949}";
   else tierEmoji = "\u{1F4B8}";
-  const sep = ` ${DIM}|${RESET} `;
-  let costStr, ratingStr;
+  let costStr, ratingStr, accent;
   if (budget) {
     const pct = cost / budget * 100;
     let rating, rc;
@@ -876,28 +876,42 @@ function hudLine({ quest, model, cost, budget, ctxPct, effort, fainted, floor })
       rating = "BUSTED";
       rc = R;
     }
-    costStr = `${tierEmoji} $${cost.toFixed(4)}/$${budget.toFixed(2)} ${pct.toFixed(0)}%`;
-    ratingStr = `${rc}${rating}${RESET}`;
+    accent = pct > 75 ? R : Y;
+    const barW = 11;
+    const barFilled = Math.min(barW, Math.round(pct / 100 * barW));
+    const barEmpty = barW - barFilled;
+    const bar = `${accent}${"\u2593".repeat(barFilled)}${"\u2591".repeat(barEmpty)}${RESET}`;
+    costStr = `${DIM}$${RESET}${cost.toFixed(2)}${DIM}/${budget.toFixed(2)}${RESET} ${bar} ${pct.toFixed(0)}%`;
+    ratingStr = `  ${rc}${rating}${RESET}`;
   } else {
-    costStr = `${tierEmoji} $${cost.toFixed(4)}`;
-    ratingStr = null;
+    accent = Y;
+    costStr = `${tierEmoji} $${cost.toFixed(2)}`;
+    ratingStr = "";
   }
-  let ctxStr = null;
-  if (ctxPct != null) {
-    if (ctxPct >= 90) ctxStr = `${R}\u{1F4E6} ${ctxPct}%${RESET}`;
-    else if (ctxPct >= 75) ctxStr = `${Y}\u{1F392} ${ctxPct}%${RESET}`;
-    else if (ctxPct >= 50) ctxStr = `${G}\u{1FAB6} ${ctxPct}%${RESET}`;
+  let ctxLine = null;
+  if (ctxPct != null && ctxPct >= 50) {
+    const ctxW = 10;
+    const ctxFilled = Math.min(ctxW, Math.round(ctxPct / 100 * ctxW));
+    const ctxEmpty = ctxW - ctxFilled;
+    let ctxColor, ctxIcon;
+    if (ctxPct >= 90) {
+      ctxColor = R;
+      ctxIcon = "\u{1F4E6}";
+    } else if (ctxPct >= 75) {
+      ctxColor = Y;
+      ctxIcon = "\u{1F392}";
+    } else {
+      ctxColor = G;
+      ctxIcon = "\u{1FAB6}";
+    }
+    const ctxBar = `${ctxColor}${"\u2593".repeat(ctxFilled)}${"\u2591".repeat(ctxEmpty)}${RESET}`;
+    ctxLine = ` ${accent}\u2588\u2588${RESET} \u{1F9E0} ${ctxBar} ${ctxPct}% ${ctxIcon}`;
   }
   const icon = fainted ? "\u{1F4A4}" : "\u26F3";
-  const prefix = `${BOLD}${C}${icon}${RESET}`;
-  const parts = [`${prefix} ${quest}`, costStr];
-  if (ratingStr) parts.push(ratingStr);
-  if (ctxStr) parts.push(ctxStr);
-  parts.push(`${C}${modelLabel}${RESET}`);
-  if (budget && floor) parts.push(`Floor ${floor}`);
-  return `${DIM} \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500${RESET}
-${parts.join(sep)}
-${DIM} \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500${RESET}`;
+  let line1 = ` ${accent}\u2588\u2588${RESET} ${icon} ${quest}  ${costStr}${ratingStr}  ${modelLabel}`;
+  if (budget && floor) line1 += `  ${DIM}F${floor}${RESET}`;
+  return ctxLine ? `${line1}
+${ctxLine}` : line1;
 }
 function runDemo() {
   console.log("");
@@ -1782,8 +1796,50 @@ function installHooks() {
   }
   const existing = settings.statusLine;
   const existingCmd = typeof existing === "string" ? existing : existing?.command ?? null;
-  const alreadyOurs = existingCmd === STATUSLINE_PATH || existingCmd === WRAPPER_PATH;
-  if (!alreadyOurs && existingCmd) {
+  const isTgStatusline = (cmd) => cmd && (cmd.includes("tokengolf/hooks/statusline") || cmd.includes("tokengolf\\hooks\\statusline"));
+  const alreadyOurs = isTgStatusline(existingCmd);
+  if (alreadyOurs) {
+    let userStatusline = null;
+    if (existingCmd.includes("statusline-wrapper")) {
+      try {
+        const wrapperContent = fs4.readFileSync(existingCmd, "utf8");
+        const lines = wrapperContent.split("\n").filter((l) => l.includes('echo "$SESSION_JSON"'));
+        for (const line of lines) {
+          const match = line.match(/echo "\$SESSION_JSON" \| (.+?)( 2>|$)/);
+          if (match && !isTgStatusline(match[1])) {
+            userStatusline = match[1];
+            break;
+          }
+        }
+      } catch {
+      }
+    }
+    if (userStatusline) {
+      fs4.writeFileSync(
+        WRAPPER_PATH,
+        [
+          "#!/usr/bin/env bash",
+          "SESSION_JSON=$(cat)",
+          `echo "$SESSION_JSON" | ${userStatusline} 2>/dev/null || true`,
+          `echo "$SESSION_JSON" | bash ${STATUSLINE_PATH}`
+        ].join("\n") + "\n"
+      );
+      fs4.chmodSync(WRAPPER_PATH, 493);
+      settings.statusLine = {
+        type: "command",
+        command: WRAPPER_PATH,
+        padding: existing?.padding ?? 1
+      };
+      console.log("  \u2713 statusLine       \u2192 updated paths (kept your existing statusline)");
+    } else {
+      settings.statusLine = {
+        type: "command",
+        command: STATUSLINE_PATH,
+        padding: existing?.padding ?? 1
+      };
+      console.log("  \u2713 statusLine       \u2192 updated to current install path");
+    }
+  } else if (existingCmd) {
     fs4.writeFileSync(
       WRAPPER_PATH,
       [
@@ -1800,15 +1856,13 @@ function installHooks() {
       padding: 1
     };
     console.log("  \u2713 statusLine       \u2192 wrapped your existing statusline + tokengolf HUD");
-  } else if (!alreadyOurs) {
+  } else {
     settings.statusLine = {
       type: "command",
       command: STATUSLINE_PATH,
       padding: 1
     };
     console.log("  \u2713 statusLine       \u2192 live HUD in every Claude session");
-  } else {
-    console.log("  \u2713 statusLine       \u2192 already installed");
   }
   fs4.writeFileSync(CLAUDE_SETTINGS, JSON.stringify(settings, null, 2));
   console.log("  \u2713 SessionStart     \u2192 injects run context into Claude");

package/docs/index.html

@@ -1145,33 +1145,22 @@
           <div class="term" data-glow="cyan">
             <div class="term-header">tokengolf demo hud</div>
             <pre>
-<span class="t-dim"> ───────────────</span>
-<span class="t-b t-cyan">⛳</span> Flow <span class="t-dim">|</span> 💎 $0.0034 <span class="t-dim">|</span> <span class="t-cyan">⚔️ Sonnet</span>
-<span class="t-dim"> ───────────────</span>
+<span class="border-yellow">██</span> ⛳ Flow  💎 $0.0034  ⚔️ Sonnet
 
-<span class="t-dim"> ───────────────</span>
-<span class="t-b t-cyan">⛳</span> add pagination to /users <span class="t-dim">|</span> 🥈 $0.5400/$1.50 36% <span class="t-dim">|</span> <span class="t-cyan">EFFICIENT</span> <span class="t-dim">|</span> <span class="t-cyan">⚔️ Sonnet</span> <span class="t-dim">|</span> Floor 2/5
-<span class="t-dim"> ───────────────</span>
+<span class="border-yellow">██</span> ⛳ add pagination to /users  <span class="t-dim">$</span>0.54<span class="t-dim">/1.50</span> <span class="t-yellow">▓▓▓▓░░░░░░░</span> 36%  <span class="t-cyan">EFFICIENT</span>  ⚔️ Sonnet  <span class="t-dim">F2/5</span>
 
-<span class="t-dim"> ───────────────</span>
-<span class="t-b t-cyan">⛳</span> implement SSO with SAML <span class="t-dim">|</span> 🥈 $0.4100/$2.00 21% <span class="t-dim">|</span> <span class="t-magenta">LEGENDARY</span> <span class="t-dim">|</span> <span class="t-cyan">⚔️ Sonnet·High</span> <span class="t-dim">|</span> Floor 1/5
-<span class="t-dim"> ───────────────</span>
+<span class="border-yellow">██</span> ⛳ implement SSO with SAML  <span class="t-dim">$</span>0.41<span class="t-dim">/2.00</span> <span class="t-yellow">▓▓░░░░░░░░░</span> 21%  <span class="t-magenta">LEGENDARY</span>  ⚔️ Sonnet·High  <span class="t-dim">F1/5</span>
 
-<span class="t-dim"> ───────────────</span>
-<span class="t-b t-cyan">⛳</span> refactor auth middleware <span class="t-dim">|</span> 🥈 $0.8200/$4.00 21% <span class="t-dim">|</span> <span class="t-magenta">LEGENDARY</span> <span class="t-dim">|</span> <span class="t-green">🪶 52%</span> <span class="t-dim">|</span> <span class="t-cyan">🧙 Opus</span> <span class="t-dim">|</span> Floor 3/5
-<span class="t-dim"> ───────────────</span>
+<span class="border-yellow">██</span> ⛳ refactor auth middleware  <span class="t-dim">$</span>0.82<span class="t-dim">/4.00</span> <span class="t-yellow">▓▓░░░░░░░░░</span> 21%  <span class="t-magenta">LEGENDARY</span>  🧙 Opus  <span class="t-dim">F3/5</span>
+<span class="border-yellow">██</span> 🧠 <span class="t-green">▓▓▓▓▓░░░░░</span> 52% 🪶
 
-<span class="t-dim"> ───────────────</span>
-<span class="t-b t-cyan">⛳</span> fix N+1 query in dashboard <span class="t-dim">|</span> 🥈 $0.4600/$0.50 92% <span class="t-dim">|</span> <span class="t-yellow">CLOSE CALL</span> <span class="t-dim">|</span> <span class="t-yellow">🎒 78%</span> <span class="t-dim">|</span> <span class="t-cyan">🏹 Haiku</span> <span class="t-dim">|</span> Floor 4/5
-<span class="t-dim"> ───────────────</span>
+<span class="border-red">██</span> ⛳ fix N+1 query in dashboard  <span class="t-dim">$</span>0.46<span class="t-dim">/0.50</span> <span class="t-red">▓▓▓▓▓▓▓▓▓▓░</span> 92%  <span class="t-yellow">CLOSE CALL</span>  🏹 Haiku  <span class="t-dim">F4/5</span>
+<span class="border-red">██</span> 🧠 <span class="t-yellow">▓▓▓▓▓▓▓▓░░</span> 78% 🎒
 
-<span class="t-dim"> ───────────────</span>
-<span class="t-b t-cyan">⛳</span> migrate postgres schema <span class="t-dim">|</span> 🥉 $2.4100/$2.00 121% <span class="t-dim">|</span> <span class="t-red">BUSTED</span> <span class="t-dim">|</span> <span class="t-cyan">⚔️ Sonnet</span> <span class="t-dim">|</span> Floor 2/5
-<span class="t-dim"> ───────────────</span>
+<span class="border-red">██</span> ⛳ migrate postgres schema  <span class="t-dim">$</span>2.41<span class="t-dim">/2.00</span> <span class="t-red">▓▓▓▓▓▓▓▓▓▓▓</span> 121%  <span class="t-red">BUSTED</span>  ⚔️ Sonnet  <span class="t-dim">F2/5</span>
 
-<span class="t-dim"> ───────────────</span>
-<span class="t-b t-cyan">💤</span> write test suite for payments <span class="t-dim">|</span> 🥉 $1.2200/$3.00 41% <span class="t-dim">|</span> <span class="t-cyan">EFFICIENT</span> <span class="t-dim">|</span> <span class="t-green">🪶 67%</span> <span class="t-dim">|</span> <span class="t-cyan">⚔️ Sonnet</span> <span class="t-dim">|</span> Floor 2/5
-<span class="t-dim"> ───────────────</span></pre>
+<span class="border-yellow">██</span> 💤 write test suite for payments  <span class="t-dim">$</span>1.22<span class="t-dim">/3.00</span> <span class="t-yellow">▓▓▓▓▓░░░░░░</span> 41%  <span class="t-cyan">EFFICIENT</span>  ⚔️ Sonnet  <span class="t-dim">F2/5</span>
+<span class="border-yellow">██</span> 🧠 <span class="t-green">▓▓▓▓▓▓▓░░░</span> 67% 🪶</pre>
           </div>
           <div class="demo-label">
             <strong>Live HUD</strong> appears in every Claude Code session. Shows quest, cost, efficiency rating, context load, and model class at a glance.

package/hooks/statusline.sh

@@ -22,7 +22,7 @@ except: pass
 ctx_pct = (session.get('context_window') or {}).get('used_percentage') or None
 quest   = (run.get('quest') or 'Flow')[:32]
 budget  = run.get('budget')
-floor   = f"{run.get('floor',1)}/{run.get('totalFloors',5)}"
+floor   = f"F{run.get('floor',1)}/{run.get('totalFloors',5)}"
 sm = session.get('model') or {}; m = (sm.get('id','') or run.get('model','') if isinstance(sm,dict) else sm or run.get('model','')).lower()
 # opusplan must be checked before opus (opusplan contains 'opus' as substring)
 if   'opusplan' in m: model, model_emoji = 'Paladin', '⚜️'
@@ -38,11 +38,11 @@ fast    = run.get('fastMode', False)
 fainted = run.get('fainted', False)
 
 label_parts = [f'{model_emoji} {model}']
-if effort: label_parts.append(effort.capitalize())
+if effort and effort != 'medium': label_parts.append(effort.capitalize())
 if fast: label_parts.append('⚡Fast')
 model_label = '·'.join(label_parts)
 
-R, B, G, Y, M, C, DIM, RESET = '\033[31m','\033[34m','\033[32m','\033[33m','\033[35m','\033[36m','\033[2m','\033[0m'
+R, G, Y, M, C, DIM, RESET = '\033[31m','\033[32m','\033[33m','\033[35m','\033[36m','\033[2m','\033[0m'
 BOLD = '\033[1m'
 
 if   cost < 0.10: tier_emoji = '💎'
@@ -51,6 +51,7 @@ elif cost < 1.00: tier_emoji = '🥈'
 elif cost < 3.00: tier_emoji = '🥉'
 else:             tier_emoji = '💸'
 
+# Accent bar color: red in danger, yellow otherwise
 if budget:
     pct = cost / budget * 100
     if   pct <= 25:  rating, rc = 'LEGENDARY',  M
@@ -58,24 +59,39 @@ if budget:
     elif pct <= 75:  rating, rc = 'SOLID',      G
     elif pct <= 100: rating, rc = 'CLOSE CALL', Y
     else:            rating, rc = 'BUSTED',     R
-    cost_str   = f"{tier_emoji} ${cost:.4f}/${budget:.2f} {pct:.0f}%"
-    rating_str = f"{rc}{rating}{RESET}"
+    accent = R if pct > 75 else Y
+    # Budget progress bar
+    bar_w = 11
+    bar_filled = min(bar_w, int(pct / 100 * bar_w + 0.5))
+    bar_empty = bar_w - bar_filled
+    bar = f"{accent}{'▓' * bar_filled}{'░' * bar_empty}{RESET}"
+    cost_str = f"{DIM}${RESET}{cost:.2f}{DIM}/{budget:.2f}{RESET} {bar} {pct:.0f}%"
+    rating_str = f"  {rc}{rating}{RESET}"
 else:
-    cost_str   = f"{tier_emoji} ${cost:.4f}"
-    rating_str = None
+    accent = Y
+    cost_str = f"{tier_emoji} ${cost:.2f}"
+    rating_str = ''
 
-sep = f" {DIM}|{RESET} "
-ctx_str = None
+# Context bar (line 2, always shown)
+ctx_line = None
 if ctx_pct is not None:
-    if   ctx_pct >= 90: ctx_str = f"{R}📦 {ctx_pct:.0f}%{RESET}"
-    elif ctx_pct >= 75: ctx_str = f"{Y}🎒 {ctx_pct:.0f}%{RESET}"
-    elif ctx_pct >= 50: ctx_str = f"{G}🪶 {ctx_pct:.0f}%{RESET}"
+    ctx_w = 10
+    ctx_filled = min(ctx_w, int(ctx_pct / 100 * ctx_w + 0.5))
+    ctx_empty = ctx_w - ctx_filled
+    if   ctx_pct >= 90: ctx_color, ctx_icon = R, '📦'
+    elif ctx_pct >= 75: ctx_color, ctx_icon = Y, '🎒'
+    else:               ctx_color, ctx_icon = G, '🪶'
+    ctx_bar = f"{ctx_color}{'▓' * ctx_filled}{'░' * ctx_empty}{RESET}"
+    ctx_line = f" {accent}██{RESET} 🧠 {ctx_bar} {ctx_pct:.0f}% {ctx_icon}"
 
-prefix = f"{BOLD}{C}{'💤' if fainted else '⛳'}{RESET}"
-parts = [f"{prefix} {quest}", cost_str]
-if rating_str: parts.append(rating_str)
-if ctx_str: parts.append(ctx_str)
-parts.append(f"{C}{model_label}{RESET}")
-if budget: parts.append(f"Floor {floor}")
-print('\n' + f'{DIM} ───────────────{RESET}' + '\n' + sep.join(parts) + '\n' + f'{DIM} ───────────────{RESET}')
+# Line 1: accent bar + quest + cost bar + rating + model + floor
+icon = '💤' if fainted else '⛳'
+parts = [f" {accent}██{RESET} {icon} {quest}  {cost_str}{rating_str}  {model_label}"]
+if budget: parts.append(f"  {DIM}{floor}{RESET}")
+line1 = ''.join(parts)
+
+# Output (leading blank line separates from any existing statusline above)
+print()
+print(line1)
+if ctx_line: print(ctx_line)
 PYEOF

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tokengolf",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "Gamify your Claude Code sessions. Flow mode tracks you. Roguelike mode trains you.",
   "type": "module",
   "bin": {
@@ -17,7 +17,8 @@
     "format": "prettier --write src/ hooks/",
     "format:check": "prettier --check src/ hooks/",
     "version": "git add CHANGELOG.md",
-    "postversion": "git push && git push --tags"
+    "postversion": "git push && git push --tags",
+    "postpublish": "./scripts/update-homebrew.sh"
   },
   "dependencies": {
     "@inkjs/ui": "^2.0.0",

package/src/lib/demo.js

@@ -25,7 +25,8 @@ function hudLine({ quest, model, cost, budget, ctxPct, effort, fainted, floor })
   }
 
   const labelParts = [`${modelEmoji} ${modelName}`];
-  if (effort) labelParts.push(effort.charAt(0).toUpperCase() + effort.slice(1));
+  if (effort && effort !== 'medium')
+    labelParts.push(effort.charAt(0).toUpperCase() + effort.slice(1));
   const modelLabel = labelParts.join('·');
 
   let tierEmoji;
@@ -35,8 +36,7 @@ function hudLine({ quest, model, cost, budget, ctxPct, effort, fainted, floor })
   else if (cost < 3.0) tierEmoji = '🥉';
   else tierEmoji = '💸';
 
-  const sep = ` ${DIM}|${RESET} `;
-  let costStr, ratingStr;
+  let costStr, ratingStr, accent;
 
   if (budget) {
     const pct = (cost / budget) * 100;
@@ -57,29 +57,47 @@ function hudLine({ quest, model, cost, budget, ctxPct, effort, fainted, floor })
       rating = 'BUSTED';
       rc = R;
     }
-    costStr = `${tierEmoji} $${cost.toFixed(4)}/$${budget.toFixed(2)} ${pct.toFixed(0)}%`;
-    ratingStr = `${rc}${rating}${RESET}`;
+    accent = pct > 75 ? R : Y;
+    // Budget progress bar
+    const barW = 11;
+    const barFilled = Math.min(barW, Math.round((pct / 100) * barW));
+    const barEmpty = barW - barFilled;
+    const bar = `${accent}${'▓'.repeat(barFilled)}${'░'.repeat(barEmpty)}${RESET}`;
+    costStr = `${DIM}$${RESET}${cost.toFixed(2)}${DIM}/${budget.toFixed(2)}${RESET} ${bar} ${pct.toFixed(0)}%`;
+    ratingStr = `  ${rc}${rating}${RESET}`;
   } else {
-    costStr = `${tierEmoji} $${cost.toFixed(4)}`;
-    ratingStr = null;
+    accent = Y;
+    costStr = `${tierEmoji} $${cost.toFixed(2)}`;
+    ratingStr = '';
   }
 
-  let ctxStr = null;
-  if (ctxPct != null) {
-    if (ctxPct >= 90) ctxStr = `${R}📦 ${ctxPct}%${RESET}`;
-    else if (ctxPct >= 75) ctxStr = `${Y}🎒 ${ctxPct}%${RESET}`;
-    else if (ctxPct >= 50) ctxStr = `${G}🪶 ${ctxPct}%${RESET}`;
+  // Context bar (line 2, only shown when >= 50%)
+  let ctxLine = null;
+  if (ctxPct != null && ctxPct >= 50) {
+    const ctxW = 10;
+    const ctxFilled = Math.min(ctxW, Math.round((ctxPct / 100) * ctxW));
+    const ctxEmpty = ctxW - ctxFilled;
+    let ctxColor, ctxIcon;
+    if (ctxPct >= 90) {
+      ctxColor = R;
+      ctxIcon = '📦';
+    } else if (ctxPct >= 75) {
+      ctxColor = Y;
+      ctxIcon = '🎒';
+    } else {
+      ctxColor = G;
+      ctxIcon = '🪶';
+    }
+    const ctxBar = `${ctxColor}${'▓'.repeat(ctxFilled)}${'░'.repeat(ctxEmpty)}${RESET}`;
+    ctxLine = ` ${accent}██${RESET} 🧠 ${ctxBar} ${ctxPct}% ${ctxIcon}`;
   }
 
+  // Line 1: accent bar + quest + cost bar + rating + model + floor
   const icon = fainted ? '💤' : '⛳';
-  const prefix = `${BOLD}${C}${icon}${RESET}`;
-  const parts = [`${prefix} ${quest}`, costStr];
-  if (ratingStr) parts.push(ratingStr);
-  if (ctxStr) parts.push(ctxStr);
-  parts.push(`${C}${modelLabel}${RESET}`);
-  if (budget && floor) parts.push(`Floor ${floor}`);
+  let line1 = ` ${accent}██${RESET} ${icon} ${quest}  ${costStr}${ratingStr}  ${modelLabel}`;
+  if (budget && floor) line1 += `  ${DIM}F${floor}${RESET}`;
 
-  return `${DIM} ───────────────${RESET}\n${parts.join(sep)}\n${DIM} ───────────────${RESET}`;
+  return ctxLine ? `${line1}\n${ctxLine}` : line1;
 }
 
 const SCENARIOS = [

package/src/lib/install.js

@@ -149,9 +149,59 @@ export function installHooks() {
 
   const existing = settings.statusLine;
   const existingCmd = typeof existing === 'string' ? existing : (existing?.command ?? null);
-  const alreadyOurs = existingCmd === STATUSLINE_PATH || existingCmd === WRAPPER_PATH;
+  // Detect any tokengolf statusline (from any install path — npm, homebrew, project dir)
+  const isTgStatusline = (cmd) =>
+    cmd &&
+    (cmd.includes('tokengolf/hooks/statusline') || cmd.includes('tokengolf\\hooks\\statusline'));
+  const alreadyOurs = isTgStatusline(existingCmd);
+
+  if (alreadyOurs) {
+    // Check if existing wrapper has a non-TG statusline we should preserve
+    let userStatusline = null;
+    if (existingCmd.includes('statusline-wrapper')) {
+      try {
+        const wrapperContent = fs.readFileSync(existingCmd, 'utf8');
+        const lines = wrapperContent.split('\n').filter((l) => l.includes('echo "$SESSION_JSON"'));
+        // Find the line that calls a non-tokengolf statusline
+        for (const line of lines) {
+          const match = line.match(/echo "\$SESSION_JSON" \| (.+?)( 2>|$)/);
+          if (match && !isTgStatusline(match[1])) {
+            userStatusline = match[1];
+            break;
+          }
+        }
+      } catch {}
+    }
 
-  if (!alreadyOurs && existingCmd) {
+    if (userStatusline) {
+      // Re-wrap: preserve user's statusline + update tokengolf path
+      fs.writeFileSync(
+        WRAPPER_PATH,
+        [
+          '#!/usr/bin/env bash',
+          'SESSION_JSON=$(cat)',
+          `echo "$SESSION_JSON" | ${userStatusline} 2>/dev/null || true`,
+          `echo "$SESSION_JSON" | bash ${STATUSLINE_PATH}`,
+        ].join('\n') + '\n'
+      );
+      fs.chmodSync(WRAPPER_PATH, 0o755);
+      settings.statusLine = {
+        type: 'command',
+        command: WRAPPER_PATH,
+        padding: existing?.padding ?? 1,
+      };
+      console.log('  ✓ statusLine       → updated paths (kept your existing statusline)');
+    } else {
+      // Direct install — no user statusline to preserve
+      settings.statusLine = {
+        type: 'command',
+        command: STATUSLINE_PATH,
+        padding: existing?.padding ?? 1,
+      };
+      console.log('  ✓ statusLine       → updated to current install path');
+    }
+  } else if (existingCmd) {
+    // User has a non-TG statusline — wrap it
     fs.writeFileSync(
       WRAPPER_PATH,
       [
@@ -168,15 +218,14 @@ export function installHooks() {
       padding: 1,
     };
     console.log('  ✓ statusLine       → wrapped your existing statusline + tokengolf HUD');
-  } else if (!alreadyOurs) {
+  } else {
+    // No existing statusline — install directly
     settings.statusLine = {
       type: 'command',
       command: STATUSLINE_PATH,
       padding: 1,
     };
     console.log('  ✓ statusLine       → live HUD in every Claude session');
-  } else {
-    console.log('  ✓ statusLine       → already installed');
   }
 
   fs.writeFileSync(CLAUDE_SETTINGS, JSON.stringify(settings, null, 2));