Dev.to AI 🤖 Ai 👁 0 📖 3 min read

I turned my Claude Code sessions into an RPG campaign (and it guards my .env)

Long Claude Code sessions turn into a wall of text. Lots of tools run, files change, subagents go off on their own, and after an hour I often had no idea what the session was trying to achieve anymore. So I built Hero J

I turned my Claude Code sessions into an RPG campaign (and it guards my .env)

Long Claude Code sessions turn into a wall of text. Lots of tools run, files change, subagents go off on their own, and after an hour I often had no idea what the session was trying to achieve anymore.

So I built Hero Journey, a mod for Claude Code that turns the session into a small RPG campaign. It's open source (MIT), in beta, and built for the Claude Code desktop app first.

Repo: https://github.com/soulrocha/Claude-code-hero-journey

Hero Journey stage: the Illusionist working on a screen, with the session objective below

The idea: glance and know

Every action Claude takes gets a class, played by Clawd, the Claude Code crab, in pixel art. The Mage reads files, the Rune Caster writes code, the Witcher runs the tests, the King commits and opens the PR. There are 19 classes, chosen from the tool plus the file or command: npm test is the Witcher, azure-pipelines.yml is the Artificer, git push is the King.

That sounds like decoration, but it changes how you read a session. You stop reading every tool row and start glancing at who is acting. When the Witcher stumbles, something failed.

What it does

There are eight modules, each one can be turned off:

  • Logbook: the class Clawd on every tool row, with the result on the right ("1.0s ✓", "+12 −3 ✓", "failed ✗").
  • Band above the prompt: one line with who is acting and on which file, the plan's step trail, or "Your turn" when Claude is idle.
  • Pane (/hero): a stage with the class at work in its own scene, the session objective, and the plan, subagents and inventory only when they exist.
  • Campaign: the first message sets the objective, each message opens a chapter, and the turn closes it.
  • Turn receipt: one line under the answer with who acted most, the number of actions, lines added and removed, and failures.
  • Protected-file guard: a red dragon stops Claude before it touches .env, pipelines, production appsettings, keys, certificates or Terraform state. It works even in auto mode, also for terminal commands that would write those files, and it fails closed.
  • Resources: the Backpack shows how full the context is before Claude Code compacts on its own. Mana and Vigor show the 5-hour and weekly usage windows, with a live countdown.
  • Grimoire: saves your progress (the task in a file, plus an optional handoff to another agent), and keeps decisions and project rules where they belong. Nothing is written until you click Seal.

The red dragon guard stopping an edit to .env

Zero tokens by default

This was a hard rule from the start. Drawing, git reads, timers and the receipt never call the model. Only three buttons spend tokens, and only when you click them: compact now, recalibrate the objective (through Haiku), and an optional "summarize with Haiku" in the grimoire.

How it's built

Claude Code mods are plugins made of function hooks: each hook receives an engine event (tool.call, turn.complete, prompt.submit, session.measure…), decides, and passes it on. The UI is TSX rendered into the app's own slots: the tool row, the area above the prompt, a side pane, and the question dialog.

A few things I learned along the way:

  • One file has to wire everything. The engine only follows its $ interface into functions declared in the same file, so all hooks live in register.tsx, and each module keeps its pure logic in <module>.ts and its screen in view.tsx.
  • Prototype with what the engine draws. My first demo was an HTML prototype with free CSS, and the real HUD looked nothing like it. The art is now SVG text animated with CSS and SMIL, no scripts, because that's what the desktop's Svg element renders.
  • Test in the real engine. There are 115 tests that run inside Claude Code itself (claude plugin test), on the desktop and terminal surfaces, including a regression test for every bug found in review.

Try it

In the Claude Code desktop app (2.1.295 or later):

/plugin install hero-journey --marketplace soulrocha/Claude-code-hero-journey

Then type /hero. Every option can stay empty. The HUD speaks English and Brazilian Portuguese, and has an "epic" quest-log style and a sober one.

It's a beta: the desktop app comes first, and terminal (CLI) support comes after. Bug reports and ideas for new classes are very welcome in the issues. And if it makes your sessions a bit more fun, a ⭐ helps other people find it.

A fan project, not affiliated with Anthropic. Clawd is Claude Code's mascot; here it only got hats and gear.

📰 Read the original article on Dev.to AI

Originally published by Dev.to AI. Aggregated on AIWithGhost for educational purposes — full credit and traffic to the original publisher.