Claude Code · plugin mods
Everything you need to read a Claude Code mod: how it loads, how it draws a pane, and the TypeScript underneath. Scroll down.
A mod is a small bundle. The engine reads a config file, loads one TypeScript file, and that file wires up everything.
A Claude Code plugin that changes the app's interface or behaviour, like your subagent-spend.
A side panel a mod draws beside the chat, like your Usage window.
One TypeScript file exporting register, which attaches code to engine events.
Small config file telling the engine which hooks module file to load.
The function a hooks module exports; it adds every hook when the mod loads.
Follow one number, your usage, from the API response to a bar on screen.
Free call returning context fill and rate limits from the last API response.
Your plan's usage cap per window, here 5-hour and weekly percentages.
A clickable element; onPress is the code that runs when clicked.
A stored value a pane reads; changing it makes the pane redraw.
A function the engine runs when its event fires, like a tool call or prompt.
Something the engine announces, such as session.measure, ui.render or tool.call.
Event fired when usage figures move; the mod stores them for the pane.
The event that asks a mod what to draw inside a pane.
You write TypeScript. The checker catches mistakes. What actually runs is plain JavaScript.
const used: number = 62; const label: string = "Context"; const hot: boolean = used > 80; const days: number[] = [1, 2]; // JSX: tags that describe what to draw return <Box>{label}</Box>;
The : number label is a type annotation.
JavaScript with types added, checked before running, then stripped to plain JavaScript.
The programming language browsers and many tools run; TypeScript compiles into it.
The TypeScript checker; it finds type mistakes before the code ever runs.
TypeScript file endings; .tsx also allows JSX tags inside the code.
HTML-like tags such as <Box> written inside code to describe what to draw.
Kinds of values, such as number, string, boolean, lists, or object shapes.
The : number label after a name, saying which type it holds.
Jump back to any term. Colour shows the chapter: clay is anatomy, blue is data flow, green is language.