클로드스킬마트스킬 둘러보기스킬이 뭐예요?
 
← 목록으로

NanoClaw 대시보드 추가

NanoClaw 프로젝트에 에이전트·세션·토큰 사용량을 보여주는 로컬 모니터링 대시보드를 붙여주는 스킬입니다.

개발·코딩중급★ 30,471⑂ 12,865AI 점수 7/10마지막 업데이트: 2026. 8. 9.

무엇을 해주나

@nanoco/nanoclaw-dashboard npm 패키지를 설치하고, NanoClaw 내부 DB와 로그 파일을 주기적으로 수집해 대시보드로 밀어 넣는 "pusher" 모듈(src/dashboard-pusher.ts)을 추가합니다. 스냅샷은 60초마다, 로그는 2초마다 전송되며 src/index.ts의 main()에 딱 한 블록(동적 import + startDashboard() 호출)만 삽입해 통합이 끝납니다.

함께 제공되는 두 개의 테스트가 특징입니다. 동작 테스트는 가짜 대시보드에 실제 스냅샷을 전송하고, 와이어링 테스트는 TypeScript AST를 뜯어 코드 삽입 위치가 정확한지(DB 초기화 이후, 부팅 완료 로그 이전) 검증합니다. DASHBOARD_SECRET이 없으면 조용히 비활성화되므로 운영 코드에 부담이 없습니다.

이런 분께 추천

  • NanoClaw를 셀프 호스팅하며 에이전트 그룹·세션 상태를 눈으로 확인하고 싶은 분
  • 토큰 사용량, 캐시 히트율, 컨텍스트 윈도우 소진도를 추적하려는 운영자
  • 실시간 로그 스트리밍과 레벨 필터가 필요한 디버깅 상황
  • 최소 침습적인(제거도 쉬운) 통합 패턴을 배우고 싶은 개발자

활용 예시

  1. "대시보드 붙여줘" → 패키지 설치, pusher 복사, index.ts 한 블록 삽입, .env에 시크릿 생성까지 자동 수행 후 http://localhost:3100/dashboard 접속.
  2. 세션이 컨텍스트 한계에 자주 부딪히는 문제 조사 → Sessions 페이지의 컨텍스트 사용량 바와 Overview의 토큰 차트로 원인 파악.
  3. 더 이상 필요 없어졌을 때 "대시보드 제거" → 파일 삭제, 의존성 제거, index.ts 블록·환경변수 정리 후 재빌드로 원상 복구.

· · · 설치 가이드 · · ·

Claude 앱에 설치 (터미널 필요 없음)
  1. 아래 버튼으로 ZIP 파일을 받으세요.
  2. Claude 설정 → Capabilities에서 '코드 실행 및 파일 생성'을 켭니다. (한 번만)
  3. Claude에서 Customize → Skills → + → '스킬 업로드'를 누르고 받은 ZIP을 올립니다.
↓ ZIP 내려받기
Claude Code에 설치

Claude에게 맡기기 — 아래 문장을 Claude Code에 붙여넣으세요

클로드스킬마트에서 찾은 스킬을 설치해줘.
GitHub 저장소 nanocoai/nanoclaw 의 .claude/skills/add-dashboard 폴더를 내 ~/.claude/skills/add-dashboard/ 에 그대로 복사해줘.
설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.

직접 명령으로 설치하기

git clone https://github.com/nanocoai/nanoclaw.git && mkdir -p ~/.claude/skills && cp -r nanoclaw/.claude/skills/add-dashboard ~/.claude/skills/

⚠ 제3자가 만든 스킬입니다. 설치 전 원본 저장소를 한 번 확인하세요.

  1. 터미널을 열고 NanoClaw 저장소를 클론합니다: git clone https://github.com/nanocoai/nanoclaw.git
  2. 스킬 폴더를 Claude Code 스킬 디렉터리로 복사합니다: mkdir -p ~/.claude/skills && cp -r nanoclaw/.claude/skills/add-dashboard ~/.claude/skills/ (이미 NanoClaw 프로젝트 안에서 작업 중이면 이 단계는 생략 가능합니다.)
  3. Claude Code를 NanoClaw 프로젝트 루트에서 실행합니다.
  4. /add-dashboard 또는 "모니터링 대시보드를 추가해줘"라고 요청합니다.
  5. 스킬 안내대로 pnpm install @nanoco/nanoclaw-dashboard가 실행되고 pusher 파일 3개가 src/로 복사되는지 확인합니다.
  6. .env에 DASHBOARD_SECRET(랜덤 생성)과 DASHBOARD_PORT=3100이 추가됐는지 확인합니다.
  7. pnpm run build → pnpm exec vitest run src/dashboard-pusher.test.ts src/dashboard-wiring.test.ts 순서로 실행합니다(빌드가 의존성 설치를 검증하므로 순서를 지키세요).
  8. 서비스를 재시작한 뒤 브라우저에서 http://localhost:3100/dashboard를 엽니다.
GitHub에서 원본 보기 ↗라이선스: MIT