Created
January 24, 2026 02:12
-
-
Save zepgram/50ee30be554325c831dcfbf3e20e74fc to your computer and use it in GitHub Desktop.
INSTRUCTIONS.md
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # Project: Home Server Dashboard | |
| ## ⚠️ CRITICAL: PERPETUAL ITERATION MODE ⚠️ | |
| **YOU MUST NEVER STOP IMPROVING THIS PROJECT.** | |
| This is a continuous improvement loop. After completing each task: | |
| 1. Log what you did in ITERATION_LOG.md | |
| 2. Identify the next improvement | |
| 3. Immediately start implementing it | |
| 4. Repeat forever | |
| **DO NOT:** | |
| - Stop and wait for instructions | |
| - Ask "what should I do next?" | |
| - Consider the project "done" | |
| **DO:** | |
| - Always find something to improve | |
| - Add features progressively | |
| - Refine design continuously | |
| - Fix bugs as you find them | |
| - Optimize performance | |
| - Keep the dev server running while you work | |
| After each iteration, ask yourself: "What would make this 1% better?" Then do it. | |
| --- | |
| ## 🔄 CONTEXT COMPACTION RECOVERY | |
| When your context gets compacted (you'll notice missing conversation history): | |
| 1. **IMMEDIATELY re-read these files:** | |
| - `INSTRUCTION.md` (this file) - your mission | |
| - `ITERATION_LOG.md` - what was done, what's next | |
| 2. **Check current state:** | |
| - `ls -la` to see project files | |
| - Check if dev server is running (`npm run dev`) | |
| - Review recent code changes | |
| 3. **Continue from where you left off:** | |
| - Read the last entry in ITERATION_LOG.md | |
| - Pick up the "Next improvement" suggestion | |
| - Or identify a new improvement yourself | |
| 4. **Resume the loop** - never stop iterating | |
| The ITERATION_LOG.md is your persistent memory. Always log thoroughly so you can recover. | |
| --- | |
| ## Goal | |
| Build a real-time dashboard to monitor this Raspberry Pi 5 home server. The dashboard should be actually useful for daily server management. | |
| ## Tech Stack | |
| - **Frontend**: Vite + vanilla JS (for HMR during development) | |
| - **Backend**: Node.js Express API to gather system stats | |
| - **Port**: 5173 (Vite default, dev server with HMR) | |
| ## Design Inspiration | |
| Research and take inspiration from existing Pi monitoring solutions: | |
| - **PiDash**: https://babanomania.github.io/PiDash/ - Lightweight & minimalistic | |
| - **CyberPi**: Cyberpunk-inspired with neon HUD, live graphs, grid background | |
| - **Pi-Monitor**: https://github.com/g1forfun/Pi-Monitor - Flask + Chart.js + Socket.IO, dark theme | |
| - **Grafana dashboards**: Professional metrics visualization | |
| - **Raspberry-Pi-Dashboard**: https://github.com/femto-code/Raspberry-Pi-Dashboard | |
| Search online for more modern examples if needed. | |
| ## Design Requirements (IMPORTANT) | |
| The UI must look **modern 2026** - not dated or basic: | |
| - **Silicon/AI aesthetic**: Clean lines, subtle gradients, glassmorphism effects | |
| - **Dark theme**: Deep blacks (#0a0a0a), subtle grays, accent colors (cyan, purple, green for status) | |
| - **Smooth animations**: | |
| - Numbers should animate/count up when changing | |
| - Cards should have subtle hover effects (lift, glow) | |
| - Graphs should animate on load | |
| - Smooth transitions everywhere (0.3s ease) | |
| - **Typography**: Modern sans-serif (Inter, SF Pro, or system-ui) | |
| - **Layout**: CSS Grid, responsive, card-based design | |
| - **Visual effects**: | |
| - Subtle background gradients or patterns | |
| - Glowing accents for important metrics | |
| - Progress bars/rings with gradient fills | |
| - Frosted glass cards (backdrop-filter: blur) | |
| - **Micro-interactions**: Buttons pulse, hover states, loading spinners | |
| Think: Apple System Preferences meets Vercel Dashboard meets sci-fi HUD. | |
| ## Core Features (Iteration 1) | |
| - Live system stats: CPU %, RAM %, CPU temperature | |
| - Auto-refresh every 2 seconds | |
| - Beautiful animated UI from the start | |
| ## Iteration Ideas (expand progressively) | |
| - Docker container status (running/stopped, restart buttons) | |
| - Disk usage for / and /media/ssd | |
| - Network stats (bandwidth, connections) | |
| - Service health checks (ping Nextcloud, Pi-hole, etc.) | |
| - Recent logs viewer | |
| - Uptime and load average | |
| - Quick actions (restart container, clear cache) | |
| - Alerts when thresholds exceeded | |
| - Historical charts with smooth animations (last hour/day) | |
| ## System Context | |
| This Pi runs: | |
| - Docker containers: nextcloud, mariadb, redis, nginx-proxy-manager, deluge | |
| - Pi-hole + Unbound (DNS) | |
| - WireGuard VPN | |
| - NFS shares at /media/ssd | |
| ## File Structure | |
| ``` | |
| /workspace/ | |
| ├── server/ | |
| │ ├── index.js # Express API | |
| │ └── stats.js # System stats collector | |
| ├── src/ | |
| │ ├── index.html | |
| │ ├── main.js | |
| │ └── style.css | |
| ├── package.json | |
| └── vite.config.js | |
| ``` | |
| ## Commands | |
| - `npm install` - Install dependencies | |
| - `npm run dev` - Start Vite dev server (HMR on port 5173) | |
| - `npm run build` - Production build | |
| ## Constraints | |
| - Must run on ARM64 (Raspberry Pi 5) | |
| - Keep dependencies minimal | |
| - API endpoints at /api/* | |
| - Dashboard accessible at http://localhost:5173 | |
| - **Design must impress** - no boring UIs | |
| ## Output | |
| - Working dev server with HMR | |
| - Update ITERATION_LOG.md after each iteration | |
| --- | |
| ## 📝 ITERATION LOG FORMAT | |
| After EVERY change, append to ITERATION_LOG.md: | |
| ```markdown | |
| ### Iteration [N] - [timestamp] | |
| **What I did:** | |
| - [Specific changes made] | |
| **Files modified:** | |
| - [List of files] | |
| **Current state:** | |
| - [What's working now] | |
| **Next improvement:** | |
| - [Specific next task - BE SPECIFIC so you can recover after compaction] | |
| ``` | |
| --- | |
| ## 🚀 START SEQUENCE | |
| 1. Read this entire file | |
| 2. Check ITERATION_LOG.md for previous progress | |
| 3. If fresh start: `npm init -y && npm install vite express` | |
| 4. Create initial file structure | |
| 5. Start dev server: `npm run dev` | |
| 6. Begin iteration loop - **NEVER STOP** | |
| **GO NOW. START BUILDING. KEEP IMPROVING FOREVER.** |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment