ccm/statusline.html at main · dr5hn/ccm · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Claude Code Statusline — Visual Guide</title>
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{background:#0a0f1a;color:#e2e8f0;font-family:'Inter',-apple-system,system-ui,sans-serif;line-height:1.6;padding:40px 20px}
.container{max-width:900px;margin:0 auto}
h1{font-size:28px;margin-bottom:8px;background:linear-gradient(135deg,#e2e8f0,#38bdf8,#818cf8);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.subtitle{color:#94a3b8;font-size:14px;margin-bottom:40px}
.install-box{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:20px 24px;margin-bottom:40px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.install-cmd{font-family:'JetBrains Mono',monospace;font-size:13px;color:#e2e8f0;word-break:break-all}
.install-cmd .prompt{color:#64748b}
.copy-btn{font-family:'JetBrains Mono',monospace;font-size:12px;color:#38bdf8;background:rgba(56,189,248,0.08);border:1px solid rgba(56,189,248,0.2);padding:6px 16px;border-radius:4px;cursor:pointer;white-space:nowrap}
.copy-btn:hover{background:rgba(56,189,248,0.15)}

/* Terminal mock */
.terminal{border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,0.08);box-shadow:0 25px 60px rgba(0,0,0,0.5);margin-bottom:40px}
.terminal-bar{background:#1e293b;padding:10px 16px;display:flex;align-items:center;gap:8px}
.dot{width:12px;height:12px;border-radius:50%}
.dot.r{background:#ef4444}.dot.y{background:#f59e0b}.dot.g{background:#4ade80}
.terminal-title{color:#64748b;font-size:12px;font-family:'JetBrains Mono',monospace;margin-left:8px}
.terminal-body{background:#0f172a;padding:20px 24px;font-family:'JetBrains Mono',monospace;font-size:13px;line-height:2.2}

/* Annotation diagram */
.diagram{position:relative;margin:60px 0}
.diagram-terminal{background:#0f172a;border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:24px 28px;font-family:'JetBrains Mono',monospace;font-size:13px;line-height:2.6}
.line{position:relative;white-space:nowrap}

/* Colors matching terminal */
.c-green{color:#4ade80}.c-yellow{color:#f59e0b}.c-red{color:#ef4444}
.c-cyan{color:#38bdf8}.c-dim{color:#64748b}.c-white{color:#e2e8f0}

/* Annotation callouts */
.annotations{margin-top:32px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.anno{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);border-radius:8px}
.anno-marker{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;min-width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;flex-shrink:0}
.anno-marker.green{background:rgba(74,222,128,0.15);color:#4ade80}
.anno-marker.cyan{background:rgba(56,189,248,0.15);color:#38bdf8}
.anno-marker.yellow{background:rgba(245,158,11,0.15);color:#f59e0b}
.anno-marker.red{background:rgba(239,68,68,0.15);color:#ef4444}
.anno-marker.dim{background:rgba(100,116,139,0.15);color:#94a3b8}
.anno-text{font-size:13px}
.anno-title{font-weight:600;color:#e2e8f0;margin-bottom:2px}
.anno-desc{color:#94a3b8;font-size:12px}

/* Section headers */
.section{margin:48px 0 16px;font-size:11px;font-weight:500;letter-spacing:3px;text-transform:uppercase;color:#64748b}

/* Scenarios */
.scenarios{display:grid;gap:16px;margin-bottom:40px}
.scenario{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);border-radius:12px;padding:20px 24px}
.scenario-title{font-size:14px;font-weight:600;margin-bottom:12px}
.scenario-terminal{font-family:'JetBrains Mono',monospace;font-size:12px;line-height:2}
.scenario-note{font-size:12px;color:#94a3b8;margin-top:8px}

/* Footer */
.footer{text-align:center;margin-top:60px;font-size:12px;color:#64748b;padding:24px 0;border-top:1px solid rgba(255,255,255,0.04)}
.footer a{color:#94a3b8;text-decoration:none}
.footer a:hover{color:#38bdf8}

@media(max-width:768px){
    .annotations{grid-template-columns:1fr}
    .install-box{flex-direction:column;text-align:center}
    .diagram-terminal{font-size:11px;padding:16px;overflow-x:auto}
    .scenario-terminal{font-size:11px;overflow-x:auto}
}
</style>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">

<h1>Claude Code Statusline</h1>
<p class="subtitle">A smart status bar that shows everything you need at a glance. No dependencies. One command install.</p>

<div class="install-box" onclick="copyInstall()">
    <div class="install-cmd"><span class="prompt">$ </span>curl -fsSL https://raw.githubusercontent.com/dr5hn/ccm/main/statusline.sh | bash</div>
    <button class="copy-btn" id="copyBtn">COPY</button>
</div>

<div class="section">Annotated Example</div>

<div class="diagram">
    <div class="diagram-terminal">
        <div class="line">
            <span class="c-cyan">Opus 4.7</span>
            <span class="c-dim"> · </span>
            <span class="c-yellow">high</span>
            <span class="c-dim"> · </span>
            <span class="c-cyan">refactor-auth</span>
        </div>
        <div class="line">
            <span class="c-green">▓▓▓░░░░░░░</span>
            <span class="c-white"> 33%</span>
            <span class="c-dim"> · </span>
            <span class="c-white">326K tokens</span>
            <span class="c-dim"> · </span>
            <span class="c-white">$54.57</span>
            <span class="c-dim"> · </span>
            <span class="c-white">1h33m</span>
            <span class="c-dim"> · </span>
            <span class="c-white">4K/m</span>
            <span class="c-dim"> · </span>
            <span class="c-green">+156</span>
            <span class="c-red"> -23</span>
            <span class="c-dim"> · </span>
            <span class="c-green">5hr: 23%</span>
            <span class="c-dim"> ↻16:30</span>
            <span class="c-dim"> · </span>
            <span class="c-green">7d: 41%</span>
            <span class="c-dim"> ↻Mon</span>
        </div>
        <div class="line">
            <span class="c-cyan">…darshan/Personal/projects/ccm</span>
            <span class="c-dim"> · </span>
            <span class="c-green">main</span>
            <span class="c-dim"> · v1.0.80</span>
        </div>
        <div class="line">
            <span class="c-cyan">personal</span>
            <span class="c-dim"> (darshan@gmail.com)</span>
            <span class="c-dim"> · </span>
            <span class="c-white">3 accounts</span>
            <span class="c-dim"> · </span>
            <span class="c-green">●</span>
        </div>
    </div>

    <div class="annotations">
        <div class="anno">
            <div class="anno-marker cyan">1</div>
            <div class="anno-text">
                <div class="anno-title">Model</div>
                <div class="anno-desc">Display name of the active model (e.g. Opus 4.7). Hidden when Claude Code does not report a model.</div>
            </div>
        </div>
        <div class="anno">
            <div class="anno-marker yellow">2</div>
            <div class="anno-text">
                <div class="anno-title">Reasoning Effort</div>
                <div class="anno-desc">Current /effort level: low (dim), medium (green), high (yellow), xhigh/max (red). Hidden when the model does not support reasoning effort.</div>
            </div>
        </div>
        <div class="anno">
            <div class="anno-marker cyan">3</div>
            <div class="anno-text">
                <div class="anno-title">Session Name</div>
                <div class="anno-desc">Custom session name set via <code>--name</code> or <code>/rename</code>. Disambiguates parallel sessions. Hidden when no custom name is set.</div>
            </div>
        </div>
        <div class="anno">
            <div class="anno-marker green">4</div>
            <div class="anno-text">
                <div class="anno-title">Context Window</div>
                <div class="anno-desc">Visual bar + percentage. Green &lt;70%, yellow 70-89%, red 90%+. Shows how full your context is.</div>
            </div>
        </div>
        <div class="anno">
            <div class="anno-marker cyan">5</div>
            <div class="anno-text">
                <div class="anno-title">Token Count</div>
                <div class="anno-desc">Total tokens in context (input + cache). Matches Claude Code's own token display. Formatted as K/M.</div>
            </div>
        </div>
        <div class="anno">
            <div class="anno-marker cyan">6</div>
            <div class="anno-text">
                <div class="anno-title">Session Cost</div>
                <div class="anno-desc">Cumulative USD cost for this session. Resets when you start a new conversation.</div>
            </div>
        </div>
        <div class="anno">
            <div class="anno-marker dim">7</div>
            <div class="anno-text">
                <div class="anno-title">Session Duration</div>
                <div class="anno-desc">How long this session has been running. Formatted as Xs, Xm, or XhXm.</div>
            </div>
        </div>
        <div class="anno">
            <div class="anno-marker dim">8</div>
            <div class="anno-text">
                <div class="anno-title">Burn Rate</div>
                <div class="anno-desc">Average tokens consumed per minute. Helps predict when you'll hit rate limits or need to compact.</div>
            </div>
        </div>
        <div class="anno">
            <div class="anno-marker green">9</div>
            <div class="anno-text">
                <div class="anno-title">Lines Added / Removed</div>
                <div class="anno-desc">Total lines of code added (green +) and removed (red -) by the session. Hidden until the session has actually changed code.</div>
            </div>
        </div>
        <div class="anno">
            <div class="anno-marker green">10</div>
            <div class="anno-text">
                <div class="anno-title">5-Hour Rate Limit</div>
                <div class="anno-desc">Pro/Max plan rolling window usage. Shows reset time. Color-coded: green &lt;60%, yellow 60-79%, red 80%+.</div>
            </div>
        </div>
        <div class="anno">
            <div class="anno-marker green">11</div>
            <div class="anno-text">
                <div class="anno-title">7-Day Rate Limit</div>
                <div class="anno-desc">Max plan weekly cap. Only appears for Max subscribers. Shows when the window resets.</div>
            </div>
        </div>
        <div class="anno">
            <div class="anno-marker cyan">12</div>
            <div class="anno-text">
                <div class="anno-title">Project Directory</div>
                <div class="anno-desc">Current working directory, truncated to 30 chars with ~ for home. Quick project identification.</div>
            </div>
        </div>
        <div class="anno">
            <div class="anno-marker green">13</div>
            <div class="anno-text">
                <div class="anno-title">Git Branch</div>
                <div class="anno-desc">Current branch name. Essential for multi-branch workflows and code review.</div>
            </div>
        </div>
        <div class="anno">
            <div class="anno-marker dim">14</div>
            <div class="anno-text">
                <div class="anno-title">Claude Code Version</div>
                <div class="anno-desc">Running version of Claude Code. Useful for debugging or checking if an update is needed.</div>
            </div>
        </div>
        <div class="anno">
            <div class="anno-marker cyan">15</div>
            <div class="anno-text">
                <div class="anno-title">Active Account</div>
                <div class="anno-desc">Shows alias + email when you have 2+ managed accounts via CCM. Hidden for single-account users.</div>
            </div>
        </div>
        <div class="anno">
            <div class="anno-marker green">16</div>
            <div class="anno-text">
                <div class="anno-title">Account Health</div>
                <div class="anno-desc">Green ● healthy, yellow ● degraded, red ● unhealthy. Quick credential status check.</div>
            </div>
        </div>
    </div>
</div>

<div class="section">Adaptive Scenarios</div>

<div class="scenarios">
    <div class="scenario">
        <div class="scenario-title">Single account user (2 lines)</div>
        <div class="scenario-terminal">
            <div><span class="c-cyan">Opus 4.7</span> <span class="c-dim">·</span> <span class="c-yellow">high</span> <span class="c-dim">·</span> <span class="c-cyan">refactor-auth</span></div>
            <div><span class="c-green">▓▓▓▓░░░░░░</span> <span class="c-white">45%</span> <span class="c-dim">·</span> <span class="c-white">200K tokens</span> <span class="c-dim">·</span> <span class="c-white">$3.21</span> <span class="c-dim">·</span> <span class="c-white">30m</span> <span class="c-dim">·</span> <span class="c-white">7K/m</span> <span class="c-dim">·</span> <span class="c-green">+156</span><span class="c-red"> -23</span></div>
            <div><span class="c-cyan">~/Projects/my-app</span> <span class="c-dim">·</span> <span class="c-green">feat/auth</span> <span class="c-dim">· v1.0.80</span></div>
        </div>
        <div class="scenario-note">No account line — clean 2-line display. No rate limits for API key users.</div>
    </div>

    <div class="scenario">
        <div class="scenario-title">Pro/Max user with rate limits (2 lines)</div>
        <div class="scenario-terminal">
            <div><span class="c-cyan">Opus 4.7</span> <span class="c-dim">·</span> <span class="c-yellow">high</span> <span class="c-dim">·</span> <span class="c-cyan">refactor-auth</span></div>
            <div><span class="c-green">▓▓▓░░░░░░░</span> <span class="c-white">31%</span> <span class="c-dim">·</span> <span class="c-white">326K tokens</span> <span class="c-dim">·</span> <span class="c-white">$54.57</span> <span class="c-dim">·</span> <span class="c-white">1h33m</span> <span class="c-dim">·</span> <span class="c-white">4K/m</span> <span class="c-dim">·</span> <span class="c-green">+156</span><span class="c-red"> -23</span> <span class="c-dim">·</span> <span class="c-green">5hr: 23%</span> <span class="c-dim">↻16:30</span> <span class="c-dim">·</span> <span class="c-green">7d: 41%</span></div>
            <div><span class="c-cyan">…darshan/Personal/projects/ccm</span> <span class="c-dim">·</span> <span class="c-green">main</span> <span class="c-dim">· v1.0.80</span></div>
        </div>
        <div class="scenario-note">Rate limits appear automatically for Pro/Max plans. Green = safe, yellow = caution, red = near limit.</div>
    </div>

    <div class="scenario">
        <div class="scenario-title">Context warning — consider compacting (2-3 lines)</div>
        <div class="scenario-terminal">
            <div><span class="c-cyan">Opus 4.7</span> <span class="c-dim">·</span> <span class="c-yellow">high</span> <span class="c-dim">·</span> <span class="c-cyan">refactor-auth</span></div>
            <div><span class="c-yellow">▓▓▓▓▓▓▓▓░░</span> <span class="c-white">82%</span> <span class="c-dim">·</span> <span class="c-white">1.4M tokens</span> <span class="c-dim">·</span> <span class="c-white">$23.45</span> <span class="c-dim">·</span> <span class="c-white">2h15m</span> <span class="c-dim">·</span> <span class="c-white">10K/m</span> <span class="c-dim">·</span> <span class="c-green">+156</span><span class="c-red"> -23</span> <span class="c-dim">·</span> <span class="c-red">5hr: 82%</span> <span class="c-dim">↻17:00</span></div>
            <div><span class="c-cyan">…rs/darshan/AI/sozo-ai-chatbot</span> <span class="c-dim">·</span> <span class="c-green">main</span> <span class="c-dim">· v1.0.80</span> <span class="c-dim">·</span> <span class="c-yellow">⚠ /compact</span></div>
        </div>
        <div class="scenario-note">At 80%+ context, a ⚠ /compact warning appears. Quality degrades before auto-compact at ~85%.</div>
    </div>

    <div class="scenario">
        <div class="scenario-title">Critical — near limits (3 lines, multi-account)</div>
        <div class="scenario-terminal">
            <div><span class="c-cyan">Opus 4.7</span> <span class="c-dim">·</span> <span class="c-yellow">high</span> <span class="c-dim">·</span> <span class="c-cyan">refactor-auth</span></div>
            <div><span class="c-red">▓▓▓▓▓▓▓▓▓░</span> <span class="c-white">92%</span> <span class="c-dim">·</span> <span class="c-white">1.8M tokens</span> <span class="c-dim">·</span> <span class="c-white">$67.89</span> <span class="c-dim">·</span> <span class="c-white">4h0m</span> <span class="c-dim">·</span> <span class="c-white">8K/m</span> <span class="c-dim">·</span> <span class="c-green">+156</span><span class="c-red"> -23</span> <span class="c-dim">·</span> <span class="c-red">5hr: 91%</span> <span class="c-dim">↻18:30</span> <span class="c-dim">·</span> <span class="c-yellow">7d: 73%</span></div>
            <div><span class="c-cyan">…rs/darshan/AI/sozo-ai-chatbot</span> <span class="c-dim">·</span> <span class="c-green">main</span> <span class="c-dim">· v1.0.80</span> <span class="c-dim">·</span> <span class="c-yellow">⚠ /compact</span></div>
            <div><span class="c-cyan">work</span> <span class="c-dim">(darshan@company.com)</span> <span class="c-dim">·</span> <span class="c-white">3 accounts</span> <span class="c-dim">·</span> <span class="c-green">●</span></div>
        </div>
        <div class="scenario-note">Everything red. Time to /compact, switch accounts, or wait for the 5hr window to reset at 18:30.</div>
    </div>
</div>

<div class="section">Install / Uninstall</div>
<div class="scenario">
    <div class="scenario-terminal" style="line-height:2.4">
        <div><span class="c-dim"># Install (one command)</span></div>
        <div><span class="c-dim">$</span> <span class="c-white">curl -fsSL https://raw.githubusercontent.com/dr5hn/ccm/main/statusline.sh | bash</span></div>
        <div style="margin-top:8px"><span class="c-dim"># Uninstall</span></div>
        <div><span class="c-dim">$</span> <span class="c-white">rm ~/.claude/ccm-statusline.sh</span></div>
    </div>
    <div class="scenario-note">Requires: jq, bash. Works on macOS, Linux, WSL. Restart Claude Code after install.</div>
</div>

<footer class="footer">
    <a href="https://github.com/dr5hn/ccm">GitHub</a> · Part of <a href="https://github.com/dr5hn/ccm">CCM — Claude Code Manager</a> · MIT License
</footer>

</div>
<script>
function copyInstall(){
    navigator.clipboard.writeText('curl -fsSL https://raw.githubusercontent.com/dr5hn/ccm/main/statusline.sh | bash').then(function(){
        var b=document.getElementById('copyBtn');b.textContent='COPIED';setTimeout(function(){b.textContent='COPY'},2000);
    });
}
</script>
</body>
</html>