SLOPSHOPPER

session-hud

A live HUD above the prompt: time, tool calls, files edited, context and cost

newbandguard
v0.1.0MITupdated 2026-10-09ivtrade777/coding-tips-mods/session-hud
A shopper browsing a rack in a slop shop
Preview · a replayed session in a sandbox
claude · ~/work/app · session-hud
› fix the failing auth test and add an audit log call ⏺ Read(src/auth.ts) ⎿ Read 6 lines ⏺ Update(src/auth.ts) ⎿ Added 2 lines, removed 1 line ⏺ Bash(bun test) ⎿ 3 pass, 1 fail ● Done. refresh now rejects expired claims and logs an audit event. ✻ Worked for 42s · done 4:20 PM HUD ⏱ 30m 🔧 9 tools 📝 3 files 🧠 ▰▰▰▰▰▱▱▱▱▱ 49% 😎 💸 $0.42 ────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── › ? for shortcuts

Draws

Band
HUD ⏱ 30m 🔧 9 tools 📝 3 files 🧠 ▰▰▰▰▰▱▱▱▱▱ 49% 😎 💸 $0.42
README

Coding Tips: 3 Claude Code Mods (take them)

From the video "3 Claude Code Mods I Built in 5 Minutes (Take Them)".

ModWhat it does
spinner-quipsReplaces the spinner word with a joke ("Blaming the intern", "Googling the error"…) and counts tool calls
safety-netBlocks rm -rf, git push --force, git reset --hard and DROP TABLE, and shows a warning
session-hudA live HUD above the prompt: time, tool calls, files edited, context bar, cost, and a mood 😎 😅 🥵

Needs Claude Code v2.1.287 or newer (Desktop app v2.1.286+).

Install (inside Claude Code)

/plugin marketplace add ivtrade777/coding-tips-mods
/plugin install spinner-quips@coding-tips-mods
/plugin install safety-net@coding-tips-mods
/plugin install session-hud@coding-tips-mods
/reload-plugins

Install only the ones you want.

Or try all three for one session, without installing

git clone https://github.com/ivtrade777/coding-tips-mods.git
claude --plugin-dir ./coding-tips-mods

Make them yours

Each mod is one short file: <mod>/hooks/register.ts (or .tsx). Change the jokes in spinner-quips, add your own dangerous commands to safety-net, or new stats to session-hud, then run /reload-plugins.

Before you install any mod

Mods are not sandboxed: they run with your permissions. Read the code (each mod is one short file in hooks/) and check what it does:

claude plugin validate ./session-hud

Tests: claude plugin test ./safety-net

Not affiliated with or endorsed by Anthropic. MIT licence.

Source 1 files
hooks/register.tsx 50 lines
1import type { Register } from 'claude-code'
2
3const EDIT_TOOLS = new Set(['Edit', 'Write', 'MultiEdit', 'NotebookEdit'])
4
5let tools = 0
6const files = new Set<string>()
7
8function bar(percent: number) {
9  const full = Math.round(percent / 10)
10  return '▰'.repeat(full) + '▱'.repeat(10 - full)
11}
12
13function mood(percent: number) {
14  if (percent < 50) return '😎'
15  if (percent < 80) return '😅'
16  return '🥵'
17}
18
19export const register: Register = on => {
20  // Count every tool call, and remember which files Claude edits
21  on('tool.call', ($, e, next) => {
22    tools += 1
23    if (EDIT_TOOLS.has(e.tool) && 'file_path' in e && typeof e.file_path === 'string') {
24      files.add(e.file_path)
25    }
26    $.ui.invalidate('ui.render')
27    return next(e)
28  })
29
30  // Draw the HUD in the band above the prompt
31  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
32    if (e.props.hasSurvey) return next(e)
33
34    const { Box, Text } = $.ui.resolve(e)
35    const usage = await $.session.usage()
36    const minutes = Math.floor(((await $.clock.now()) - usage.startedAt) / 60000)
37    const percent = Math.round(usage.context.percent ?? 0)
38    const cost = usage.cost ? `$${usage.cost.usd.toFixed(2)}` : '-'
39
40    return (
41      <Box>
42        <Text color="cyan" bold>HUD </Text>
43        <Text>⏱ {minutes}m  🔧 {tools} tools  📝 {files.size} files  </Text>
44        <Text color={percent < 80 ? 'cyan' : 'red'}>🧠 {bar(percent)} {percent}% </Text>
45        <Text>{mood(percent)}  💸 {cost}</Text>
46      </Box>
47    )
48  })
49}
50