host-colors
Colors the bar above the prompt and the footer by the machine's hostname, so sessions on different hosts look different.
newbandspinnerprocess
Colors the bar above the prompt and the footer by the machine's hostname, so sessions on different hosts look different.
A Claude Code mod that colors the bar above the prompt and the footer mode row by the machine's hostname. Each host gets its own color, so you can tell sessions apart at a glance.
/plugin install host-colors --marketplace sshamilton/claude-modsAnswer y to add the marketplace, then pick the user scope.
Edit the HOST_COLORS table at the top of hooks/register.tsx. Keys are lower-case hostnames. Values are terminal color names or hex strings. A host not in the table gets a stable color hashed from its name.
claude plugin validate .
claude plugin test .
claude --plugin-dir "$PWD"hooks/register.tsx 75 lines1import { atom, read, update } from 'claude-code'
2import type { Register } from 'claude-code'
3
4import type { HostInfo } from '../types'
5
6// Hostname (lower-cased) to color. Edit this table to taste.
7// A color is a terminal color name or a hex string such as "#ff8800".
8const HOST_COLORS: Record<string, string> = {
9 pliny: '#2fbf71',
10 msi: '#d94fd1',
11}
12
13// Hosts not in the table get a stable color picked from this list.
14const FALLBACK_COLORS = ['cyan', 'yellow', 'blue', 'red', 'green', 'magenta'] as const
15
16const RULE = '━'.repeat(400)
17
18const host = atom({ plugin: 'host-colors', key: 'host' } as const, null)
19
20function pickColor(name: string): string {
21 const known = HOST_COLORS[name.toLowerCase()]
22 if (known) return known
23 let hash = 0
24 for (const ch of name) hash = (hash * 31 + ch.charCodeAt(0)) >>> 0
25 return FALLBACK_COLORS[hash % FALLBACK_COLORS.length] ?? 'cyan'
26}
27
28export const register: Register = on => {
29 on('session.start', async ($, e, next) => {
30 let name = 'unknown-host'
31 try {
32 const { exitCode, stdout } = await $.process.run(['hostname'], { timeoutMs: 5000 })
33 const short = stdout.trim().split('.')[0]
34 if (exitCode === 0 && short) name = short
35 } catch {
36 // keep the fallback name
37 }
38 const info: HostInfo = { name, color: pickColor(name) }
39 await update($, host, () => info)
40 return next(e)
41 })
42
43 // The bar above the prompt: a full-width colored rule carrying the host name.
44 on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
45 const info = await read($, host)
46 if (e.props.hasSurvey || info === null) return next(e)
47
48 const { Box, Text } = $.ui.resolve(e)
49 return (
50 <Box flexDirection="column">
51 <Text color={info.color} bold wrap="truncate">
52 ━━ {info.name} {RULE}
53 </Text>
54 </Box>
55 )
56 })
57
58 // The footer row: the engine's own mode labels, led by a colored host tag.
59 on('ui.render', { component: 'SessionMode' }, async ($, e, next) => {
60 const info = await read($, host)
61 const drawn = await next(e)
62 if (info === null) return drawn
63
64 const { Box, Text } = $.ui.resolve(e)
65 return (
66 <Box flexDirection="row" gap={1}>
67 <Text color={info.color} bold>
68 ⬢ {info.name}
69 </Text>
70 {drawn}
71 </Box>
72 )
73 })
74}
75types/index.d.ts 8 lines1export type HostInfo = { name: string; color: string }
2
3declare module 'claude-code' {
4 interface PluginState {
5 'host-colors': { host: HostInfo | null }
6 }
7}
8