The Office

the-office

**htop for AI agents.** Real-time dashboard for observing Claude Code agents across all your projects.


---

What it does

• Live agent tree — every Claude Code agent on your machine, grouped by project; subagents nested under their parent
• Works without hooks — JSONL file watcher discovers agents and infers status automatically (~500ms lag); hooks give real-time updates
• Token & cost panel — model, context window fill %, input/output/cache tokens, cost, and turn duration per agent
• Agent detail — current tool, tool history with timing, and conversation snapshot (initial task / latest ask / latest response)
• Event stream — live feed of every hook event as it fires
• Mock mode — develop and demo without Claude Code running (?mock=true)

Download

Grab the latest installer from [Releases](https://github.com/Resip10/the-office/releases):

• Windows — The-Office-Setup-x.x.x.exe
• macOS — The-Office-x.x.x-arm64.dmg
• Linux — The-Office-x.x.x.AppImage

On first launch the app lives in your system tray. Use the tray menu to install or remove Claude Code hooks — the dashboard works without them via JSONL file watching. Updates are applied in the background.

Dev setup

git clone https://github.com/Resip10/the-office.git
cd the-office
npm install
npm run dev        # server :7777 + client :5173

Configure hooks manually (dev only)

Add to `~/.claude/settings.json` — the desktop app does this automatically for non-dev users:

{
  "hooks": {
    "SessionStart":        [{"hooks": [{"type": "command", "command": "curl -s -X POST http://localhost:7777/api/events -H 'Content-Type: application/json' -d @- 2>/dev/null || true"}]}],
    "SessionEnd":          [{"hooks": [{"type": "command", "command": "curl -s -X POST http://localhost:7777/api/events -H 'Content-Type: applicati