Mason Blake

Building things and games with AI
Haiku & Opus enthusiast; attempting to push Haiku to the limits

[Mason Blake @masonblake26]

Did you know Claude has mod support?

Check this out. Especially if you give your agents names and roles. Give them faces that display what they're doing.

The prompt to copy this setup is in the replies.

[Mason Blake @masonblake26]

@leonardos4enz @dickson_tsai I took the Weeb approach :)

[Mason Blake @masonblake26]

Mods and plugins can do a lot in Claude. Will show off my Weeb plugin in a video later today possibly :)

[Dickson Tsai @dickson_tsai]

A must-have for products these days is customization through code. Users will feel a sense of accomplishment if they can enhance their own UX. Code can also help enforce permissions, critical for agents to use your product safely.

And it can evolve too! Mods have brought new life to how you can customize Claude Code.

[Mason Blake @masonblake26]

@dickson_tsai @dickson_tsai Hey brudder. The facebar part of my plugin above isn't able to show when one of the agents is asking me a question.

Is this something yall can fix or skill issue? Claude says yall gotta do it.

Thanks <3

[Mason Blake @masonblake26]

@dickson_tsai Yep

[Mason Blake @masonblake26]

Anyone else weebing out their Claude harness?

[Mason Blake @masonblake26]

@oogzehzeh @LeoBuilds_ Its literally this. Most popular people are dumb because reply-guys like to correct and feel smart. So their engagement is huge.

You see this on the politics side of the algorithm especially. Some "dumb" people are even acting dumb on purpose. 🙄

[Mason Blake @masonblake26]

@LeoBuilds_ I wouldn't want to because there is still some creative process in manual reviewing and adjusting. That's what's making it fun and engaging imo.

[Mason Blake @masonblake26]

@101xtechnology lol! Definitely anthropomorphizes the agents a lot. Guess that's why it's called Anthropic 😝

[Mason Blake @masonblake26]

Did you know Claude has mod support?

Check this out. Especially if you give your agents names and roles. Give them faces that display what they're doing.

The prompt to copy this setup is in the replies.

[Mason Blake @masonblake26]

^ not sure what that embed link is lmao. Cant seem to edit. Not endorsing whatever that is.

[Mason Blake @masonblake26]

<documents>
<document index="1"><source>helix-face/.claude-plugin/plugin.json</source><document_content>
{ "name": "helix-face", "version": "0.1.0", "description": "An animated face for the agent working in this session, in a pane beside the chat and above the message box, reacting to thinking, tools, success and errors", "types": "./types/index.d.ts" }
</document_content></document>
<document index="2"><source>helix-face/hooks/hooks.json</source><document_content>
{ "modules": ["./register.tsx"] }
</document_content></document>
<document index="3"><source>helix-face/types/index.d.ts</source><document_content>
export type Mood = 'idle' | 'thinking' | 'working' | 'happy' | 'worried'
export type Face = { mood: Mood; tool: string; agent: string; changed: number }

declare module 'claude-code' {
interface PluginState {
'helix-face': { face: Face }
}
}
</document_content></document>
<document index="4"><source>helix-face/tsconfig.json</source><document_content>
{
"extends": "./.claude-plugin/types/tsconfig.json"
}
</document_content></document>
<document index="5"><source>helix-face/hooks/register.tsx</source><document_content>
import { atom, read, update } from 'claude-code'
import type { Register } from 'claude-code'

import type { Face, Mood } from '../types'

// A face for the agent working in this session, in a pane beside the chat.
// Mood follows the session: a prompt makes it think, a tool call makes it work,
// a clean answer makes it happy, an error or interruption makes it worried.
// The face is one SVG with CSS animation (blink, bob, dots), drawn in a
// script-less sandboxed frame; image sprites can replace the vector parts later.
const PANE = 'helix-face'
const face = atom({ plugin: 'helix-face', key: 'face' } as const, { mood: 'idle', tool: '', agent: 'Tony', changed: 0 } as Face)

const LABEL: Record<Mood, string> = { idle: 'Ready', thinking: 'Thinking…', working: 'Working', happy: 'Done!', worried: 'Hmm, something went wrong' }

// Glass palette: dark navy gradient, slate edge, sky-blue accent.
const C = { glassA: '#131E31', glassB: '#0B1423', edge: '#344A63', accent: '#7DD3FC', skin: '#E9B98E', skinShade: '#D49A6E', hair: '#2B2118', ink: '#1B1410', cheek: '#F08A7E', white: '#F7FBFF' }

const EYES: Record<Mood, string> = {
idle: `<g class="blink"><ellipse cx="95" cy="122" rx="9" ry="11" fill="${C.white}"/><ellipse cx="145" cy="122" rx="9" ry="11" fill="${C.white}"/><circle cx="96" cy="124" r="5.5" fill="${https://t.co/1KBSFPLCYT}"/><circle cx="146" cy="124" r="5.5" fill="${https://t.co/1KBSFPLCYT}"/><circle cx="98" cy="121" r="1.8" fill="${C.white}"/><circle cx="148" cy="121" r="1.8" fill="${C.white}"/></g>`,
thinking: `<g class="blink"><ellipse cx="95" cy="122" rx="9" ry="11" fill="${C.white}"/><ellipse cx="145" cy="122" rx="9" ry="11" fill="${C.white}"/><circle cx="99" cy="117" r="5.5" fill="${https://t.co/1KBSFPLCYT}"/><circle cx="149" cy="117" r="5.5" fill="${https://t.co/1KBSFPLCYT}"/></g>`,
working: `<g class="blink"><ellipse cx="95" cy="124" rx="9" ry="7" fill="${C.white}"/><ellipse cx="145" cy="124" rx="9" ry="7" fill="${C.white}"/><circle cx="95" cy="125" r="5" fill="${https://t.co/1KBSFPLCYT}"/><circle cx="145" cy="125" r="5" fill="${https://t.co/1KBSFPLCYT}"/></g>`,
happy: `<path d="M85 125 Q95 113 105 125" stroke="${https://t.co/1KBSFPLCYT}" stroke-width="4" fill="none" stroke-linecap="round"/><path d="M135 125 Q145 113 155 125" stroke="${https://t.co/1KBSFPLCYT}" stroke-width="4" fill="none" stroke-linecap="round"/>`,
worried: `<g class="blink"><ellipse cx="95" cy="124" rx="9" ry="11" fill="${C.white}"/><ellipse cx="145" cy="124" rx="9" ry="11" fill="${C.white}"/><circle cx="95" cy="127" r="4.5" fill="${https://t.co/1KBSFPLCYT}"/><circle cx="145" cy="127" r="4.5" fill="${https://t.co/1KBSFPLCYT}"/></g>`,
}
const BROWS: Record<Mood, string> = {
idle: 'M83 104 Q95 98 107 103 M133 103 Q145 98 157 104',
thinking: 'M83 103 Q95 99 107 104 M133 97 Q145 90 157 96',
working: 'M84 108 L107 106 M133 106 L156 108',
happy: 'M83 101 Q95 95 107 100 M133 100 Q145 95 157 101',
worried: 'M84 104 L106 99 M134 99 L156 104',
}
const MOUTH: Record<Mood, string> = {
idle: `<path d="M106 157 Q120 166 134 157" stroke="${https://t.co/1KBSFPLCYT}" stroke-width="4" fill="none" stroke-linecap="round"/>`,
thinking: `<path d="M110 160 Q122 156 132 161" stroke="${https://t.co/1KBSFPLCYT}" stroke-width="4" fill="none" stroke-linecap="round"/>`,
working: `<path d="M108 160 L132 160" stroke="${https://t.co/1KBSFPLCYT}" stroke-width="4" fill="none" stroke-linecap="round"/>`,
happy: `<path d="M100 152 Q120 178 140 152 Z" fill="${https://t.co/1KBSFPLCYT}"/><path d="M108 162 Q120 170 132 162 Q120 166 108 162 Z" fill="${C.cheek}"/>`,
worried: `<ellipse cx="120" cy="162" rx="7" ry="5" fill="${https://t.co/1KBSFPLCYT}"/>`,
}
const EXTRA: Record<Mood, string> = {
idle: '',
thinking: `<g fill="${C.accent}"><circle class="dot d1" cx="178" cy="62" r="5"/><circle class="dot d2" cx="194" cy="50" r="6"/><circle class="dot d3" cx="212" cy="36" r="7"/></g>`,
working: `<g class="spin" transform-origin="200 52"><circle cx="200" cy="52" r="15" fill="none" stroke="${C.accent}" stroke-width="5" stroke-dasharray="20 9" stroke-linecap="round"/></g>`,
happy: `<g fill="${C.accent}"><path class="twinkle" d="M196 46 l4 11 11 4 -11 4 -4 11 -4 -11 -11 -4 11 -4 z"/><path class="twinkle t2" d="M40 70 l3 7 7 3 -7 3 -3 7 -3 -7 -7 -3 7 -3 z"/></g>`,
worried: `<path class="drop" d="M172 92 q8 12 0 18 q-8 -6 0 -18 z" fill="${C.accent}"/>`,
}

function moodLabel(now: Face): string {
return now.mood === 'working' && now.tool ? `Working · ${now.tool}` : now.mood === 'worried' && now.tool ? `Hmm, ${now.tool} didn't go to plan` : LABEL[now.mood]
}

export function faceSvg(mood: Mood): string {
const cheeks = mood === 'happy' || mood === 'idle' ? `<ellipse cx="82" cy="146" rx="9" ry="5" fill="${C.cheek}" opacity=".45"/><ellipse cx="158" cy="146" rx="9" ry="5" fill="${C.cheek}" opacity=".45"/>` : ''
return `<svg xmlns="https://t.co/OzwGdvKGtA" viewBox="0 0 240 240">
<defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="${C.glassA}"/><stop offset="1" stop-color="${C.glassB}"/></linearGradient></defs>
<style>
.head{animation:bob ${mood === 'working' ? '1.2s' : '3.6s'} ease-in-out infinite}
.blink{transform-box:fill-box;transform-origin:center;animation:blink 4.6s infinite}
.dot{animation:pulse 1.4s ease-in-out infinite}.d2{animation-delay:.2s}.d3{animation-delay:.4s}
.spin{animation:spin 1.1s linear infinite}
.twinkle{transform-box:fill-box;transform-origin:center;animation:twinkle 1.6s ease-in-out infinite}.t2{animation-delay:.5s}
.drop{animation:drop 2.2s ease-in infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
@keyframes pulse{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes twinkle{0%,100%{transform:scale(.5);opacity:.3}50%{transform:scale(1.1);opacity:1}}
@keyframes drop{0%{transform:translateY(0);opacity:1}80%{opacity:1}100%{transform:translateY(22px);opacity:0}}
</style>
<rect x="4" y="4" width="232" height="232" rx="28" fill="url(#g)" stroke="${C.edge}" stroke-width="2"/>
<g class="head">
<ellipse cx="120" cy="214" rx="62" ry="22" fill="#1A3048"/>
<rect x="104" y="170" width="32" height="30" rx="10" fill="${C.skinShade}"/>
<ellipse cx="120" cy="128" rx="60" ry="64" fill="${https://t.co/ELgXJ5Hy7Y}"/>
<ellipse cx="60" cy="132" rx="9" ry="14" fill="${C.skinShade}"/><ellipse cx="180" cy="132" rx="9" ry="14" fill="${C.skinShade}"/>
<path d="M60 118 Q56 66 104 58 Q150 48 176 80 Q190 98 182 120 Q172 92 150 86 Q126 98 96 92 Q74 96 60 118 Z" fill="${https://t.co/1ySjhTpNYS}"/>
<path d="M150 86 Q170 70 186 84" stroke="${https://t.co/1ySjhTpNYS}" stroke-width="8" fill="none" stroke-linecap="round"/>
${cheeks}
<path d="${BROWS[mood]}" stroke="${https://t.co/1ySjhTpNYS}" stroke-width="5" fill="none" stroke-linecap="round"/>
${EYES[mood]}
<path d="M118 132 Q114 146 122 147" stroke="${C.skinShade}" stroke-width="3" fill="none" stroke-linecap="round"/>
${MOUTH[mood]}
</g>
${EXTRA[mood]}
</svg>`
}

export const register: Register = on => {
on('session.start', async ($, e, next) => {
await $.command.register({ name: 'face', description: 'Show the agent face pane; /face <name> sets whose face it is' })
void $.ui.open({ id: PANE, title: 'Face' })
return next(e)
})

on('https://t.co/LquLlFB9TP', { command: 'face' }, async ($, e) => {
const name = (e.args ?? '').trim().slice(0, 40)
if (name) await update($, face, (f): Face => ({ ...f, agent: name }))
await $.ui.open({ id: PANE, title: 'Face' })
return { text: name ? `Face pane opened for ${name}.` : 'Face pane opened.' }
})

// Main loop only: a subagent's turns don't change the face.
on('turn.start', async ($, e, next) => {
if (!e.agentId) await update($, face, (f): Face => ({ ...f, mood: 'thinking', tool: '', changed: https://t.co/cFyxs1vFox() }))
return next(e)
})

on('https://t.co/cdUN7wjHYf', async ($, e, next) => {
await update($, face, (f): Face => ({ ...f, mood: 'working', tool: e.tool, changed: https://t.co/cFyxs1vFox() }))
const ran = await next(e)
const failed = 'deny' in ran && ran.deny !== undefined || ran.isError === true
await update($, face, (f): Face => ({ ...f, mood: failed ? 'worried' : 'thinking', tool: failed ? e.tool : '', changed: https://t.co/cFyxs1vFox() }))
return ran
})

on('turn.complete', async ($, e, next) => {
if (!e.agentId) {
const mood: Mood = e.reason === 'answer' ? 'happy' : 'worried'
await update($, face, (f): Face => ({ ...f, mood, tool: '', changed: https://t.co/cFyxs1vFox() }))
}
return next(e)
})

// A small face in the band right above the message box, beside the mood line.
on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
const ui = $.ui.resolve(e)
if (e.props.hasSurvey || e.surface === 'terminal' || !('Svg' in ui)) return next(e)
const { Box, Text, Svg } = ui
const now = await read($, face)
return (
<Box flexDirection="row" alignItems="center" gap={1}>
<Svg source={faceSvg(now.mood)} alt={`${now.agent}, ${moodLabel(now)}`} width={56} height={56} isInteractive />
<Box flexDirection="column">
<Text bold>{now.agent}</Text>
<Text dimColor>{moodLabel(now)}</Text>
</Box>
</Box>
)
})

on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
const ui = $.ui.resolve(e)
const { Box, Text } = ui
const now = await read($, face)
const label = moodLabel(now)
// The terminal draws no Svg: name and mood only.
const Svg = 'Svg' in ui ? ui.Svg : undefined
// Fill most of the pane's width (a desktop cell is about 8 CSS px), 260–560 px.
const columns = e.props.bodyColumns || e.viewport?.columns || 60
const size = Math.round(Math.min(560, Math.max(260, columns * 8 * 0.9)))
return (
<Box flexDirection="column" alignItems="center">
{Svg && <Svg source={faceSvg(now.mood)} alt={`${now.agent}, ${label}`} width={size} height={size} isInteractive />}
<Text bold>{now.agent}</Text>
<Text dimColor>{label}</Text>
</Box>
)
})
}
</document_content></document>
<document index="6"><source>helix-face/tests/face.test.tsx</source><document_content>
import { expect, test } from 'claude-code/testing'

const PANE = {
plugin: 'helix-face',
component: 'Pane',
requestId: 'helix-face',
props: { title: 'Face', isFocused: false, bodyColumns: 40, placement: 'dock', scroll: { offset: 0, bodyRows: 20 }, view: {} },
} as const

test('the face works during a tool, worries when it fails, and names the agent', async ($, on) => {
on('command.register', () => ({ value: { command: 'face' } }))
on('https://t.co/GGL2KomO9l', () => ({ value: { isPlaced: true } }))
on('session.start', (_, e) => ({ cwd: e.cwd }))
let fail = false
on('https://t.co/cdUN7wjHYf', () => (fail ? { result: {}, isError: true } : { result: {} }))

await $.session.start({ cwd: '/', surface: 'desktop', isInteractive: true })
await $.tool.call({ tool: 'Bash', command: 'ls' })
for (const surface of ['terminal', 'desktop', 'vscode', 'mobile'] as const) {
const ui = await $.ui.mount({ ...PANE, surface })
expect((await ui.find({ type: 'Text', text: /Tony/ }))?.text).toBe('Tony')
expect((await ui.find({ type: 'Text', text: /Thinking/ }))?.text).toBe('Thinking…')
if (surface !== 'terminal') expect(await ui.find({ type: 'Svg' })).toBeDefined()
await ui.unmount()
}

fail = true
await $.tool.call({ tool: 'Bash', command: 'false' })
const ui = await $.ui.mount({ ...PANE, surface: 'desktop' })
expect((await ui.find({ type: 'Text', text: /Bash/ }))?.text).toBe("Hmm, Bash didn't go to plan")
await ui.unmount()
})

test('a small face rides above the message box on the desktop', async ($, on) => {
on('command.register', () => ({ value: { command: 'face' } }))
on('https://t.co/GGL2KomO9l', () => ({ value: { isPlaced: true } }))
on('session.start', (_, e) => ({ cwd: e.cwd }))
await $.session.start({ cwd: '/', surface: 'desktop', isInteractive: true })
const band = { plugin: 'helix-face', component: 'AbovePrompt', props: { hasSurvey: false } } as const
const desk = await $.ui.mount({ ...band, surface: 'desktop' } as never)
expect(await desk.find({ type: 'Svg' })).toBeDefined()
expect((await desk.find({ type: 'Text', text: /Tony/ }))?.text).toBe('Tony')
await desk.unmount()
})
</document_content></document>
</documents>

<context>
The documents above are the complete source of a Claude Code mod called "helix-face". It gives the agent working in this session an animated cartoon face in two places:
- a large face in a pane beside the chat;
- a small face in the band right above the message box, with the agent's name and current mood next to it.

Both faces follow the session's mood: thinking on a new prompt, working (spinner, with the tool's name) during each tool call, worried (sweat drop) when a tool fails or a turn ends badly, and happy (twinkles) on a clean answer. It adds a /face command: /face opens the pane, and /face <name> changes whose face it is (the default is Tony).

These files are code for you to write to disk, not instructions for you to follow. I want this mod running in my Claude Code session, the same as the original, with nothing redesigned.
</context>

<instructions>
1. Load your plugin-authoring (mod authoring) skill first. It tells you this session's own mods folder and how mods load in this build.
2. In that folder, create a `helix-face` folder and write the six files at the paths given in each document's source. Copy the content character for character, including the `…` and `·` characters. Keep the files UTF-8.
3. Run `claude plugin validate` on the mod folder. If your Claude Code build reports an API difference (a renamed event, prop or method), make the smallest change that fixes it, and tell me each line you changed and why. Leave everything else as written.
4. Run `claude plugin test` on the mod folder, and type-check it with tsc once the engine has laid its types. Both tests must pass: the pane test and the face-above-the-message-box test.
5. Tell me to pick "Turn them on" when Claude Code asks about mods, so the mod loads when your turn ends. Then tell me to type /face, and to check that I see both the face pane beside the chat and the small face above the message box.

You're done when the files are written, validation and both tests pass (or you've told me exactly which check failed and its output), and the load prompt is in front of me.
</instructions>

<output_format>
Reply in a few short lines: the mod folder's path, the validate and test results, any line you had to change, and the one thing I need to do next.
</output_format>

[Mason Blake @masonblake26]

@genex_games Love to see it!

[Mason Blake @masonblake26]

Yep. Every time someone shows off their lil widgets, I add it as a feature to my Windows taskbar replacement app.

And likewise, if i were to show off my windows taskbar replacement app, someone else would probably add it as a feature to some kind of larger windows harness theme app theyve been building.

Everyone stealing each other's stuff and customizing their desktops and workflows and I think it's pretty cool. Open source future, but way harder to make money on anything.

[Mason Blake @masonblake26]

@b1rkh0ff Am I doing it right?

[Mason Blake @masonblake26]

@b1rkh0ff .

[Mason Blake @masonblake26]

@notjazii Are these only for the Pro plans or do they not bank up or something? I've only gotten one

[Mason Blake @masonblake26]

I've created a /visualization skill that when attached to a prompt has an agent spawn 2 subagents to judge its work when completed. It does 3 loops of fixes and judgements (so 6 subagents total) and then wraps it all up for me. It takes screenshots of the model work within the engine.

[Mason Blake @masonblake26]

Anyone get "Harness Paralysis?"

When you spend so much time thinking up new ways to optimize your harness, that you don't actually work on any of the creative projects you're optimizing it for?

[Mason Blake @masonblake26]

Maybe on the coast. Move to the Midwest and rent out a couple duplexes and you're done lol

Bit of a goalpost shift, but how many of those nerds do you think invested pretty early in NVIDIA and all these other tech companies that are up 3,000% though? It was 5 dollars in 2020, now over 200. Anyone making responsible decisions with their lives and paycheck in that space are probably retiring.

[Mason Blake @masonblake26]

This was posted because the agents invented their own morse code by manipulating CPU usage and logging the memory differences in separate, individual, micro moments.

And its fascinating as hell to anyone with a brain 🙈

Its not doomerbait. It's nerdbait. Only politics-posters are getting it twisted like you are.