No servers connected
Connect your first server to start monitoring.
```
---
## 7. Page-by-Page Redesign Specifications
### 7.1 Dashboard (index.html) — Highest Priority
**Current:** Health grid (5 items), Quick Actions (3 cards), Server table, Cron table, Audit log.
**Redesign:**
```
┌──────────────────────────────────────────────────────────┐
│ 🏠 Dashboard │
│ System health, recent activity, and quick actions │
│ [Refresh] │
├──────────────────────────────────────────────────────────┤
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ Servers │ │Services │ │ Disk │ │ RAM │ │
│ │ 5 │ │ 12 ok │ │ 31% │ │ 62% │ │
│ │ 4 up │ │ 0 fail │ │ [████░░]│ │ [█████░]│ │
│ │ 1 warn │ │ │ │ Healthy│ │ Warning │ │
│ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │
│ │
│ ┌──────────────────────┐ ┌──────────────────────┐ │
│ │ CPU Load (1H) │ │ Network I/O │ │
│ │ [ sparkline ] │ │ [ sparkline ] │ │
│ │ 0.87 avg | 2.1 peak │ │ 1.2 MB/s ↓ | 0.8 ↑ │ │
│ └──────────────────────┘ └──────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ Servers Overview [All →]│ │
│ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐│ │
│ │ │🟢 Core │ │🟢 App1 │ │🟡 DB1 │ │🟢 Monitor││ │
│ │ │CPU: 12% │ │CPU: 8% │ │CPU: 67% │ │CPU: 3% ││ │
│ │ │RAM: 62% │ │RAM: 45% │ │RAM: 82%⚠│ │RAM: 22% ││ │
│ │ │[View] │ │[View] │ │[View] │ │[View] ││ │
│ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘│ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────┐ ┌──────────────────────┐ │
│ │ Recent Audit Log │ │ Scheduled Jobs │ │
│ │ 12:34 backup ok │ │ ⏰ hermes-backup ✓ │ │
│ │ 11:20 caddy reload │ │ ⏰ lynis-scan ✓ │ │
│ │ 09:15 deploy app1 │ │ ⏰ s3-sync ⚠ │ │
│ │ [View All] │ │ [View All] │ │
│ └──────────────────────┘ └──────────────────────┘ │
└──────────────────────────────────────────────────────────┘
```
**New features:**
- Server mini-cards with CPU/RAM bars and status dots
- Sparkline charts for CPU load and network I/O
- Time range selector for metric detail views
- Quick-jump from audit entries to affected resources
- Collapsible sections for less-used widgets
### 7.2 Servers Page — Major Upgrade
**Current:** Plain HTML table: Name, Type, IP, Status, Provider.
**Redesign:** Card grid with rich server cards.
Each server card:
```
┌──────────────────────────────────────┐
│ 🟢 Core netcup │
│ 152.53.192.33 │
│ ──────────────────────────────────── │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ CPU │ │ RAM │ │ Disk │ │
│ │ [donut] │ │ [bar] │ │ [donut] │ │
│ │ 12% │ │ 62% │ │ 31% │ │
│ └─────────┘ └─────────┘ └─────────┘ │
│ │
│ Services: 8 running • Uptime: 47d │
│ ──────────────────────────────────── │
│ [Details] [SSH] [Restart] [Logs] │
└──────────────────────────────────────┘
```
**New features:**
- **Search/filter:** Bar above grid to filter servers by name, IP, provider, status, tags
- **Server tags:** Color-coded tags for grouping (e.g., "production", "staging", "web", "db")
- **Batch actions:** Checkbox on each card → batch restart, batch update, batch backup trigger
- **Sort options:** By name, CPU, RAM, disk, uptime, status
- **View toggle:** Grid view (cards) vs. List view (compact table)
- **Server grouping:** Group by provider, tag, or status
- **Quick actions on hover:** SSH, Restart, View Logs without navigating
### 7.3 Services Page
**Current:** Individual service cards with status dot, name, status text, action buttons.
**Redesign:**
```
┌──────────────────────────────────────────────────────────┐
│ ⚙ Services [+ Add Filter]│
│ ┌──────────────────────────────────────────────────────┐ │
│ │ 🔍 Filter services... [All ▾] [Server: All ▾] │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────┐ ┌─────────────────────┐ │
│ │ 🟢 caddy │ │ 🟢 sshd │ │
│ │ Core · web server │ │ Core · ssh daemon │ │
│ │ Uptime: 47d 12h │ │ Uptime: 47d 12h │ │
│ │ [Restart] [Logs] │ │ [Restart] [Logs] │ │
│ └─────────────────────┘ └─────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ Batch Actions: [Select All] [Restart Selected (3)] │ │
│ └──────────────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────┘
```
**New features:**
- Filter by service name, server, status (running/stopped/failed)
- Group by server with collapsible sections
- Batch restart/stop of selected services
- Service dependency visualization
- Last log excerpt shown inline (last 3 lines)
### 7.4 Backups Page
**Current:** Bucket cards with name, status, details.
**Redesign:**
- Visual backup health indicator (donut showing % of successful recent backups)
- Timeline view of last N backups per target
- Backup size trend sparkline
- "Backup Now" button per target with confirmation
- Batch trigger all backups
- Last backup duration and transfer speed
### 7.5 Network Page
**Current:** Network-related data display.
**Redesign:**
- Network topology mini-map (server nodes + connections)
- Per-server network I/O sparklines
- Open ports table with security indicators
- DNS health check results
- SSL certificate expiry countdown widgets
- Tailscale/ WireGuard peer status list
### 7.6 Logs Page — Major Upgrade
**Current:** Likely raw log display or simple list.
**Redesign:**
```
┌──────────────────────────────────────────────────────────┐
│ 📄 Logs │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ Server: [All ▾] Service: [All ▾] Level: [All ▾] │ │
│ │ 🔍 Search logs... [Live ▾] │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ 12:34:56 INFO caddy TLS handshake from 1.2.3.4 │
│ 12:34:55 WARN sshd Failed password for root │
│ 12:34:54 ERROR app1 500 GET /api/status │
│ 12:34:53 INFO cron job 'backup' completed (OK) │
│ │
│ [Load older] [Auto-scroll ✓]│
└──────────────────────────────────────────────────────────┘
```
**New features:**
- Log level coloring (ERROR=red, WARN=amber, INFO=blue, DEBUG=gray)
- Server and service filter dropdowns
- Free-text search with regex support
- Live tail mode (WebSocket or polling)
- Time range picker
- Export logs to file
- Log entry click → expand details (full stack trace, context)
### 7.7 Config Page
**Current:** Config data display.
**Redesign:** Tabbed settings page with visual configuration editors.
```
┌──────────────────────────────────────────────────────────┐
│ 📝 Configuration │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ [General] [SSH] [Firewall] [Monitoring] [Backups] │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ Server Configuration Core │ │
│ │ ──────────────────────────────────────────────────── │ │
│ │ Hostname [core.itpropartner.com ] │ │
│ │ Timezone [America/Chicago ▾ ] │ │
│ │ │ │
│ │ SSH Port [22 ] │ │
│ │ Root Login [◉] Off ○ On │ │
│ │ Password Auth [○] Off ◉ On │ │
│ │ │ │
│ │ Firewall │ │
│ │ ☑ 22/tcp (SSH) │ │
│ │ ☑ 80/tcp (HTTP) │ │
│ │ ☑ 443/tcp (HTTPS) │ │
│ │ ☐ 8080/tcp (Alt HTTP) │ │
│ │ │ │
│ │ [Save Changes] [Reset] │ │
│ └──────────────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────┘
```
### 7.8 Cron Jobs Page
**Current:** Plain table.
**Redesign:**
- Visual schedule indicators (clock-like UI showing next run time)
- Job dependency graph
- Manual trigger button per job
- Last N run results with duration sparklines
- Enable/disable toggles per job
- "Create Cron Job" button with modal form
### 7.9 Audit Page
**Current:** List of audit entries.
**Redesign:**
- Filterable by action type, target, result, date range
- Timeline visualization
- Actor identification (which user/system triggered each action)
- Export audit log
- Audit statistics (actions per day, failure rate)
### 7.10 Costs Page
**Current:** Cost data display.
**Redesign:**
- Monthly cost trend chart (area chart)
- Per-provider cost breakdown (stacked bar or donut)
- Per-server cost allocation
- Projected monthly cost based on current usage
- Cost anomaly detection alerts
---
## 8. Functionality Gaps & New Features
### 8.1 Global Search (Priority: HIGH)
- **`Ctrl+K` / `⌘K`** shortcut to open search modal
- Fuzzy search across: servers (name, IP, provider), services, log entries, config keys, cron jobs, backups
- Results grouped by category with icons
- Recent searches saved locally
- Keyboard navigation (arrow keys + Enter)
### 8.2 Batch Actions (Priority: HIGH)
- Checkbox selection on servers, services, backups
- Batch restart services across servers
- Batch trigger backups
- Batch enable/disable cron jobs
- Confirmation dialog with summary of affected items
- Progress indicator for long-running batch operations
### 8.3 Visual Resource Monitoring (Priority: HIGH)
- Donut charts for disk usage per server
- Sparklines for CPU load, memory, network I/O
- Progress bars with color thresholds
- Time range selector (1H, 3H, 6H, 12H, 1D, 3D, 7D)
- Auto-refresh with configurable interval (15s, 30s, 1m, 5m, off)
- Click sparkline → expand to detailed chart modal
### 8.4 Visual Configuration Editors (Priority: MEDIUM)
- Tabbed settings pages (SSH, Firewall, Monitoring, Backups, Notifications)
- Toggle switches for boolean settings
- Dropdown selects for enumerated values
- Input validation with inline errors
- "Save Changes" with loading state and success toast
- "Reset to defaults" with confirmation
- Config diff view showing changes before save
### 8.5 Server Dashboard (Per-Server Detail Page) (Priority: MEDIUM)
- New page: `/server.html?name=core`
- Tabs: Overview, Services, Logs, Config, Backups
- Overview: CPU/RAM/Disk graphs, service status list, recent logs
- One-click actions: Restart, SSH, View Logs, Edit Config
### 8.6 Server Tags (Priority: MEDIUM)
- Color-coded tags for organizing servers (e.g., "production" = green, "staging" = amber, "database" = blue)
- Filter sidebar by tags
- Bulk tag assignment
- Custom tag creation
### 8.7 Notifications & Alerting (Priority: LOW)
- Notification bell in top bar with dropdown
- Alert rules: CPU > 90%, disk > 85%, service down, backup failed
- In-app toast + optional email notification
- Alert history page
### 8.8 Dark/Light Theme Toggle (Priority: LOW)
- Toggle in user menu or sidebar footer
- Persisted to localStorage
- Light theme uses RunCloud v2 color scheme (white content area, dark sidebar)
### 8.9 Mobile Optimizations (Priority: MEDIUM)
- Bottom tab bar on mobile (instead of collapsed sidebar)
- Swipe gestures for navigation
- Touch-friendly card actions (larger tap targets)
- Pull-to-refresh on dashboard
- Responsive charts and tables (cards replace tables on mobile)
---
## 9. Implementation Phases
### Phase 1: Foundation (Week 1–2)
1. Create new `ops.css` with the full design system (CSS custom properties)
2. Build sidebar component (HTML + CSS + JS)
3. Build top bar with global search trigger
4. Create page shell template (sidebar + top bar + content zone)
5. Set up CSS grid layout for content area
6. Implement responsive breakpoints and mobile sidebar
7. Add Inter + JetBrains Mono fonts
### Phase 2: Core Components (Week 2–3)
8. Build stat card component (with donut chart variant)
9. Build sparkline chart component (SVG-based)
10. Build progress bar component (with thresholds)
11. Build time range selector tabs
12. Build tabbed settings component
13. Build toggle switch component
14. Build global search modal (UI only)
15. Build breadcrumb component
### Phase 3: Dashboard Redesign (Week 3–4)
16. Rebuild Dashboard page with new stat cards
17. Add server mini-cards with CPU/RAM bars
18. Add sparkline charts for CPU and Network I/O
19. Implement time range filtering for dashboard metrics
20. Polish audit log and cron job widgets
### Phase 4: Content Pages (Week 4–6)
21. Rebuild Servers page with card grid
22. Add server search/filter/sort
23. Add batch action capability
24. Rebuild Services page with filter and batch actions
25. Rebuild Backups page with visual indicators
26. Rebuild Logs page with log viewer and filters
27. Rebuild Config page with tabbed settings and toggles
28. Rebuild Network, Audit, Cron, Costs pages with refreshed UI
### Phase 5: Advanced Features (Week 6–8)
29. Implement global search backend (fuzzy search across data)
30. Add server detail page (`/server.html`)
31. Implement server tags system
32. Add notification system (bell + dropdown + toast on alerts)
33. Add dark/light theme toggle
34. Mobile bottom tab bar
35. Performance optimization and final polish
---
## 10. CSS Custom Properties Reference
Complete CSS custom properties for the new design system:
```css
:root {
/* ===== SURFACES ===== */
--bg-sidebar: #0B0E14;
--bg-sidebar-hover: #1A1F2E;
--bg-sidebar-active: rgba(59, 130, 246, 0.10);
--bg-body: #111620;
--bg-card: #1A1F2E;
--bg-card-hover: #21273A;
--bg-input: #151A26;
--bg-elevated: #1E2335;
/* ===== BORDERS ===== */
--border-default: #262D3F;
--border-active: #3B82F6;
--border-subtle: #1E2538;
/* ===== ACCENTS ===== */
--accent-primary: #3B82F6;
--accent-primary-hover: #2563EB;
--accent-primary-glow: rgba(59, 130, 246, 0.20);
--accent-secondary: #7C4DFF;
--accent-chart: #2DD4BF;
--accent-chart-alt: #818CF8;
/* ===== TEXT ===== */
--text-primary: #F1F5F9;
--text-secondary: #94A3B8;
--text-muted: #64748B;
--text-sidebar: #9CA3AF;
--text-sidebar-active: #FFFFFF;
/* ===== SEMANTIC COLORS ===== */
--green: #22C55E;
--green-bg: rgba(34, 197, 94, 0.12);
--green-glow: rgba(34, 197, 94, 0.25);
--amber: #F59E0B;
--amber-bg: rgba(245, 158, 11, 0.12);
--red: #EF4444;
--red-bg: rgba(239, 68, 68, 0.12);
--red-glow: rgba(239, 68, 68, 0.25);
--blue: #3B82F6;
--blue-bg: rgba(59, 130, 246, 0.12);
--teal: #2DD4BF;
--teal-bg: rgba(45, 212, 191, 0.12);
--purple: #7C4DFF;
--purple-bg: rgba(124, 77, 255, 0.12);
/* ===== SPACING ===== */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 12px;
--space-lg: 16px;
--space-xl: 24px;
--space-2xl: 32px;
/* ===== RADIUS ===== */
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-full: 9999px;
/* ===== SHADOWS ===== */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
--shadow-glow-blue: 0 0 12px rgba(59, 130, 246, 0.15);
--shadow-glow-green: 0 0 12px rgba(34, 197, 94, 0.15);
--shadow-glow-red: 0 0 12px rgba(239, 68, 68, 0.15);
/* ===== TYPOGRAPHY ===== */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
/* ===== LAYOUT ===== */
--sidebar-width: 240px;
--sidebar-collapsed: 64px;
--topbar-height: 56px;
/* ===== TRANSITIONS ===== */
--transition-fast: 0.15s ease;
--transition-base: 0.2s ease;
--transition-slow: 0.3s ease;
}
```
---
## Appendix A: RunCloud Reference URLs
- RunCloud Homepage: https://runcloud.io/
- Dashboard v2 Beta Blog: https://runcloud.io/blog/dashboard-v2-beta
- Server Health Docs: https://runcloud.io/docs/understanding-server-health-load-memory-disk
- Disk Space Usage Docs: https://runcloud.io/docs/disk-space-usage
- SSH Hardening Docs: https://runcloud.io/docs/ssh-service-hardening-on-runcloud
- Classic Dashboard: https://manage.runcloud.io
- New Dashboard v2: https://new.runcloud.io
- Third-party Review: https://responsiveweb.nz/blog/post/runcloud-server-management-review
- Third-party Review: https://wpjohnny.com/runcloud-cloud-based-vps-webhosting-control-panel-review/
## Appendix B: Existing Ops Portal Reference
- Production URL: https://ops.itpropartner.com
- Server: Core (152.53.192.33)
- Document root: `/var/www/ops/`
- Web server: Caddy
- Auth: JWT via auth.itpropartner.com
- Data source: `/data/ops-status.json`
- Existing CSS: `/var/www/ops/css/ops.css` (1027 lines)
- Existing JS: `/var/www/ops/js/utils.js` (230 lines), `/var/www/ops/js/app.js`
- Pages: index, services, servers, network, backups, cron, config, logs, audit, cost
## Appendix C: Key Design Decisions
1. **Dark theme retained** — matches infrastructure/admin tooling conventions and existing brand
2. **Blue primary accent** over amber — RunCloud's blue is more professional and less "warning-like"; purple available as secondary
3. **Teal for data visualization** — distinct from UI accent to avoid confusion with interactive elements
4. **Sidebar over top nav** — modern admin panel standard, better use of horizontal space on wide screens
5. **Inter font** — RunCloud's choice, excellent legibility, good tabular figures for metrics
6. **SVG-based charts** — no library dependency, lightweight, themeable via CSS variables
7. **Single-file architecture retained** — each page is a self-contained HTML file with shared CSS/JS, no build step required
8. **Progressive enhancement** — all pages usable without JS, enhanced with JS for interactivity
---
*End of Design Brief*