Clawdbot Dashboard

A modern, feature-rich dashboard for Clawdbot that visualizes your workspace, skills, tasks, memory, and analytics.

✨ Features

📊 Dashboard

• Real-time workspace statistics
• Memory size tracking
• Daily logs counter
• Installed skills overview
• Interactive tips carousel

📈 Analytics

• Memory growth charts
• Daily logs analytics
• Workspace health status
• Data sources overview

🛠️ Skills Browser

• Browse all installed skills
• Filter by category
• View full SKILL.md content
• Skill metadata display

✅ Tasks & Crons

• Display Heartbeat checklist
• Show all cron jobs
• Schedule information
• Status tracking

🎯 Goals

• Track achievements
• Milestone progress
• Goal visualization

💭 Memory

• Browse MEMORY.md
• Full Markdown rendering
• Rich formatting support

🚀 Quick Start

# Install
clawdbot skills install clawdbot-dashboard

# Start
cd ~/.clawdbot/skills/clawdbot-dashboard
npm start

# Open browser
open http://localhost:5173

🏗️ Architecture

Backend (Node.js + Express):

• Port: 5174
• Reads from Clawdbot workspace (/Users/[user]/clawd/)
• REST API for all data
• 20-60s caching for performance

Frontend (React + Vite):

• Port: 5173
• Modern UI with Tailwind CSS
• Dark mode support
• Real-time updates

Data Sources (Clawd-native):

• MEMORY.md — Long-term memory
• HEARTBEAT.md — Daily checklist
• memory/YYYY-MM-DD.md — Daily logs
• skills/*/SKILL.md — Skill metadata
• Cron jobs via clawdbot cron list

📦 What's Included

clawdbot-dashboard/
├── backend/
│   ├── index.js          (Express server + API)
│   └── cache.js          (Cache system)
├── frontend/
│   ├── src/
│   │   ├── App.tsx       (Main layout + navigation)
│   │   ├── pages/        (Dashboard, Analytics, Skills, Tasks, etc.)
│   │   ├── components/   (Reusable UI components)
│   │   └── services/     (API client)
│   └── package.json
├── package.json
├── SKILL.md              (This file)
├── README.md
└── QUICKSTART.md

🎨 Pages

• Dashboard — Overview with stats & tips
• Analytics — Growth charts & workspace health
• Skills Browser — Browse installed skills
• Tasks — Heartbeat checklist + cron jobs
• Goals — Achievements & milestones
• Memory — Markdown memory viewer

⚙️ Configuration

No configuration needed! The dashboard auto-detects your Clawdbot workspace.

Customization (Optional)

Edit frontend/src/App.tsx to:

• Change sidebar colors
• Add new pages
• Customize theme
• Modify refresh rates

🔧 Development

# Install dependencies
cd clawdbot-dashboard
npm install
cd frontend && npm install && cd ..

# Start dev servers
npm run dev

# Backend: http://localhost:5174
# Frontend: http://localhost:5173

📊 API Endpoints

• GET /api/stats — Workspace statistics
• GET /api/memory — MEMORY.md content
• GET /api/tasks — Heartbeat + crons
• GET /api/goals — Goals data
• GET /api/skills — Installed skills
• GET /api/skills/:id/content — Skill SKILL.md content
• GET /api/tips — Tips carousel

🌙 Dark Mode

Click the theme toggle in the sidebar footer. Preference saved to browser.

🚀 Performance

• Cache system: 20-60s refresh per endpoint
• Lazy loading: Pages load on demand
• Minimal deps: Only React, Express, Tailwind
• Zero external data: All local workspace files

📝 License

MIT — Use freely, modify as needed

🤝 Contributing

Ideas or improvements? Open an issue or PR on GitHub!

Made for Clawdbot. Works with any workspace. Zero setup needed. 🤖