# Add Dashboard

Add a monitoring dashboard to NanoClaw.

- Repository: https://github.com/nanocoai/nanoclaw (31069 stars)
- Category: Engineering
- License: MIT
- Last updated: 2026-10-30
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add nanocoai/nanoclaw --skill add-dashboard -g -a claude-code -y`
Codex: `npx skills add nanocoai/nanoclaw --skill add-dashboard -g -a codex -y`
Cursor: `npx skills add nanocoai/nanoclaw --skill add-dashboard -g -a cursor -y`
Gemini CLI: `npx skills add nanocoai/nanoclaw --skill add-dashboard -g -a gemini-cli -y`

## Description

Add a monitoring dashboard to NanoClaw. Installs @nanoco/nanoclaw-dashboard and a pusher that sends periodic JSON snapshots.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# /add-dashboard, NanoClaw Dashboard

Adds a local monitoring dashboard showing agent groups, sessions, channels, users, token usage, context windows, message activity, and real-time logs.

## Architecture

```
NanoClaw (pusher)              Dashboard (npm package)
┌──────────┐    POST JSON      ┌──────────────┐
│ collects │ ────────────────→ │ /api/ingest  │
│ DB data  │   every 60s       │ in-memory    │
│ tails    │ ────────────────→ │ /api/logs/   │
│ log file │   every 2s        │   push       │
└──────────┘                   │ serves UI    │
                               └──────────────┘
```

## Steps

### 1. Install the npm package

```bash
pnpm install @nanoco/nanoclaw-dashboard
```

### 2. Copy the pusher module and its tests

Copy all three resource files into `src/`. The tests ship with the skill and run against the composed project, they're how you confirm the skill works and is wired in correctly.

```
.claude/skills/add-dashboard/resources/dashboard-pusher.ts       → src/dashboard-pusher.ts
.claude/skills/add-dashboard/resources/dashboard-pusher.test.ts  → src/dashboard-pusher.test.ts
.claude/skills/add-dashboard/resources/dashboard-wiring.test.ts  → src/dashboard-wiring.test.ts
```

- `dashboard-pusher.test.ts`, behavior: starts the pusher, posts a real snapshot to a fake dashboard.
- `dashboard-wiring.test.ts`, the code edit in step 3: asserts (via the TS AST) that `index.ts` dynamically imports `./dashboard-pusher.js` and `await`s `startDashboard()` as colocated statements of `main()`, after DB init and before the boot-complete log. Delete or misplace the edit and this goes red.

### 3. Wire into src/index.ts

This is the skill's one integration point, and it's deliberately minimal and self-contained: all the startup logic lives in `dashboard-pusher.ts`, and the import is **colocated** with the call so the whole edit is a single block in one place, there's no separate top-of-file import to add (or to remember to remove).

The rest: https://github.com/nanocoai/nanoclaw/blob/HEAD/.claude/skills/add-dashboard/SKILL.md