Files

T

root 538876ac16 docs: infrastructure gap assessment + project updates

- infrastructure-gap-assessment: full audit doc
- project-log: recent completions
- hotnow, hotnow-phase1, ops-portal-runcloud-design-brief, schoolcart PTA docs
- intelsight and schoolcart updates

2026-08-05 07:34:35 -04:00

56 KiB

Raw Permalink Blame History

Ops Portal Redesign — RunCloud-Inspired Design Brief

Author: Hermes Agent (Research + Design Synthesis) Date: 2026-08-01 Target: ops.itpropartner.com (IT Pro Partner Operations Portal) Reference: RunCloud Server Management Dashboard (v1 classic + v2 beta) Status: Design Brief / Implementation Spec

Executive Summary
RunCloud UI Research Findings
Current Ops Portal Analysis
Proposed Design System
Layout Architecture
Component Patterns to Adopt
Page-by-Page Redesign Specifications
Functionality Gaps & New Features
Implementation Phases
CSS Custom Properties Reference

1. Executive Summary

This design brief provides a comprehensive specification for rebuilding the IT Pro Partner Operations Portal (ops.itpropartner.com) with a design language inspired by RunCloud's server management dashboard. RunCloud's UI has evolved through two major design languages (v1 dark classic and v2 modern), and both provide rich patterns applicable to our Ops Portal.

Key transformation: Move from a top-nav, full-width dark layout to a sidebar-first layout with a dark sidebar, content zone, rich data visualization cards, tabbed settings pages, global search, and batch-action capabilities.

Primary goals:

Adopt RunCloud's professional dark admin aesthetic with sidebar navigation
Introduce visual resource monitoring (donut charts, sparklines, progress bars)
Add global search across all servers, services, and resources
Implement batch actions (restart multiple services, run backups across servers)
Build visual configuration editors for server/service settings
Maintain mobile responsiveness and the existing auth integration with auth.itpropartner.com

2. RunCloud UI Research Findings

2.1 Methodology

Research was conducted through:

Web searches for RunCloud dashboard screenshots, reviews, and walkthroughs
Vision analysis of official RunCloud documentation screenshots (disk usage, server health, SSH config)
Extraction of RunCloud's blog announcements about Dashboard v2 beta
Third-party review articles describing UI patterns
Comparison with similar admin panels (Plesk, cPanel, ServerAvatar)

2.2 RunCloud Classic Dashboard (v1 — manage.runcloud.io)

The classic dashboard served as RunCloud's primary interface and is characterized by:

Color Palette (Classic Dark Theme):

Element	Hex Code	Usage
Page background	`#141824`	Main content area background
Card surfaces	`#1E2232`–`#222738`	Elevated cards, stat panels
Sidebar background	`#0E1119`–`#131621`	Deepest layer, sidebar
Primary accent	`#3B82F6`	Active nav, selected tabs, buttons, badges
Chart line / donut	`#2DD4BF` (teal/cyan)	Sparklines, donut fills, area charts
Success / Healthy	`#22C55E`	Status badges, healthy indicators
Warning	`#F59E0B` (amber)	Warning badges, high-usage bars
Danger / Error	`#EF4444`	Error states, critical alerts
Primary text	`#FFFFFF`	Headings, metric values
Secondary text	`#94A3B8`	Labels, descriptions
Muted text	`#64748B`	Helper text, breadcrumbs
Border / divider	`#2D3344`	Card borders, gridlines
Sidebar icon color	`#A0AEC0`	Inactive nav items
Sidebar active bg	`rgba(59,130,246,0.12)`	Active navigation row

Layout Structure:

Fixed left sidebar (~220px) + fluid main content area
Top bar: RunCloud logo + global search (Ctrl+K) + notification bell + chat bubble + user avatar
Breadcrumb trail: Servers > server-name > Section
Page title: Large bold white heading with subtitle in gray

Stat Cards (4-column grid):

Each card: dark elevated surface (~#1E2232), generous rounded corners (10–12px), 20–24px padding
Left side: large bold metric value (28–36px), label in small gray (12–14px), colored status badge
Right side: visual element — donut chart, sparkline, or horizontal progress bar
Donut chart: thin ring (6–8px), teal/cyan fill, dark track, center transparent
Sparkline: miniature area chart, teal stroke + gradient fill, no axes
Progress bar: rounded bar, dark track, amber fill at warning, rounded caps

Time Range Tabs:

Pill-shaped tab group: 1 Hour | 3 Hours | 6 Hours | 12 Hours | 1 Day | 3 Days | 7 Days
Active tab: blue fill (#3B82F6) with white text
Inactive: outlined, dark, gray text
Font: 13–14px, medium weight

Detail Panel (full-width chart):

Full-width card below stat cards
Large line/area chart with dark background, subtle horizontal gridlines
Teal line with gradient fill, dot markers at data points
X-axis: time labels, Y-axis: percentage range
Below chart: small I/O metric blocks with inline sparklines

Sidebar Details:

Deepest dark (#0E1119–#131621)
Collapsible sections: "Servers" (with chevron), "Team", "Settings"
Active server shown under "Servers" section with submenu items
Active item: 3–4px blue (#3B82F6) left border indicator + lighter background
Icons: 24px stroke-based icons in #A0AEC0 (active #FFFFFF)
Font: Inter, 14px, regular weight
Row height: ~44px, 16px left padding
Hover state: rgba(255,255,255,0.05) background
"New" badge: small blue pill with white text (10–11px)
Bottom section: plan indicator + Upgrade button (green) + user identity

2.3 RunCloud Dashboard v2 Beta (new.runcloud.io — 2024)

The v2 redesign introduced a significant shift while maintaining some core patterns:

Key Changes in v2:

Accent color changed from blue to purple: #7C4DFF (vibrant purple)
Content area shifted to light background: #FFFFFF (cards white with shadows)
Sidebar remained dark: #1B2432
Cards: White background, no border, box-shadow for elevation
- Shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06)
- Border-radius: 8px (0.5rem), padding: 24px
Global Search: Prominently placed with Ctrl+K shortcut, search across servers, apps, databases
Server Tags: Color-coded tags for organizing servers
Web Applications: Top-level menu showing apps across all servers
Recently Viewed: Quick-access to recent servers and web apps
Tabbed Settings: Server settings consolidated with tab navigation (SSH keys, login notification, session, config)
Toggle Switches: Replacing checkboxes — track #CBD5E0 (off) → #7C4DFF (on), 44×24px, fully rounded
Input Fields: 40px height, 1px #E2E8F0 border, 6px radius, focus #7C4DFF + 3px glow
Primary Buttons: #7C4DFF bg, white text, 6px radius, 10px 24px padding, hover darkens to #6B3DE0
Typography: Inter font family, 14px body, 20px page titles, 12px helper text
Laravel/WordPress Features: One-click artisan commands, staging, cloning, Canvas interface
Improved Activity Logs: Sorted by date with better visibility
Teams: Redesigned flow with email invitations

2.4 Functional Patterns from RunCloud

Server Management:

One-click actions: Start, Stop, Restart, Console, Edit
Status dots: green (running) / red (stopped) on server cards
Resource graphs: CPU, RAM, Disk with time-range selection
File Manager: web-based with zip/unzip capabilities
Log Viewer: tail logs in-browser
SSH configuration: tabbed interface (Settings / Authentication)
Central SSH utilities in one page with tabs

Web Application Management:

App Library: categorized cards for one-click installs
Git deployment: informative integration setup
Database management: visual interface
Cron job creation: floating modal/panel
.env file editor: quick shortcut
Deployment script editor

Navigation Patterns:

Collapsible sidebar sections
Breadcrumb trail for deep navigation
Global search (Ctrl+K)
Active item: colored left border + subtle background
Sidebar collapses to icon-only on narrow screens
Server list with tags for organization

Settings Pages:

Tabbed navigation within settings (no page reload)
Labels above form inputs
Toggle switches for boolean settings
Save button right-aligned at bottom of card
Inline validation with error messages below inputs
Disabled states: gray background + not-allowed cursor

3. Current Ops Portal Analysis

3.1 Existing Architecture

Served from: /var/www/ops/ via Caddy on Core (152.53.192.33) Auth: Separate auth service at auth.itpropartner.com (JWT-based) Data: Fetches live data from /data/ops-status.json

Files:

css/ops.css — 1027-line single stylesheet
js/utils.js — 230-line shared utility functions
js/app.js — Dashboard-specific logic
nav.html — Shared navigation partial (not using SSI currently, nav duplicated across pages)
10 HTML pages: index, services, servers, network, backups, cron, config, logs, audit, cost

3.2 Current Design System

Color Palette:

Variable	Value	Usage
`--bg-body`	`#0F1628`	Page background
`--bg-card`	`#1E293B`	Card backgrounds, nav bar
`--bg-elevated`	`#1A2337`	(defined but underused)
`--bg-hover`	`#2A3A52`	Hover states
`--border-card`	`#2A3A4E`	Card and element borders
`--border-active`	`#3D506E`	Active/hover borders
`--accent`	`#F59E0B`	Amber/orange — primary accent
`--accent-hover`	`#D97706`	Darker amber
`--text-primary`	`#F1F5F9`	Main text
`--text-secondary`	`#94A3B8`	Secondary text
`--text-muted`	`#64748B`	Muted/helper text
`--green`	`#22C55E`	Success/healthy
`--amber`	`#F59E0B`	Warning (same as accent)
`--red`	`#EF4444`	Error/danger
`--teal`	`#14B8A6`	Info accent
`--blue`	`#3B82F6`	Info/secondary accent

Current Layout:

Top nav bar (ops-nav): sticky, full-width, 56px height, blur backdrop
- Brand logo (left), hamburger toggle (mobile), nav links (center), logout (right)
- Mobile: hamburger opens dropdown below nav
- Desktop (>768px): horizontal inline links with bottom-border active indicator
Content: page-wrapper max-width 1440px, centered, padding: 20-28px
Cards: --bg-card background, 1px --border-card border, 12px radius, 20px padding, light shadow
Health Grid: auto-fit, minmax(140px, 1fr), large metric values (1.8rem), uppercase labels
Tables: Full-width, sticky headers, clickable rows, hover highlight
Buttons: Primary (amber fill), outline, danger, success variants, 6px radius
Status dots: Colored with glow effect (green glow, red glow)
Badges: Pill-shaped, colored backgrounds with matching text
Resource bars: 8px height, rounded, with label + percentage
Toasts: Slide-in from right, colored left border
Confirm dialog: Modal overlay with blur backdrop

Typography:

System font stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif
Page titles: 1.4rem (mobile) → 1.6rem (desktop), bold, amber, letter-spacing -0.02em
Card headers: 0.78rem, uppercase, letter-spacing 0.06em, muted
Body: 0.82rem in tables, 0.85rem in alerts

Current Navigation (10 links): Dashboard, Services, Servers, Network, Backups, Cron Jobs, Config, Logs, Audit, Costs

3.3 Strengths of Current Design

Clean dark theme with consistent CSS custom properties
Mobile-responsive with hamburger menu
JWT-based auth with login overlay
Good component library: cards, tables, badges, toasts, modals, resource bars
Live data fetching with refresh
Status indicators with glow effects
Good color semantics (green=ok, amber=warning, red=error)

3.4 Weaknesses to Address

No sidebar: Top nav limits vertical space and feels dated compared to modern admin panels
No global search: Cannot search across servers, services, or logs
Tables are text-heavy: Servers and services use plain tables instead of visual cards with metrics
No resource visualization: Missing charts, sparklines, donut indicators
No batch actions: Cannot restart multiple services or trigger multiple backups at once
No visual config editors: Config page is likely read-only or text-based
Nav duplicated across pages: nav.html is manually included, not server-side included
Logs are probably raw text: No filtering, search, or log-level coloring
No server grouping/tagging: All servers in flat list
Limited dashboard interactivity: Time-range selection for metrics missing

4. Proposed Design System

4.1 Color Palette (RunCloud-Inspired Dark Theme)

We will adopt a hybrid approach: keep the dark theme (matching our infrastructure aesthetic), but adopt RunCloud's richer color system and the purple or blue accent.

Recommended palette — dark content area with rich accent:

CSS Variable	Hex Code	Usage
`--bg-sidebar`	`#0B0E14`	Sidebar background (deepest layer)
`--bg-sidebar-hover`	`#1A1F2E`	Sidebar item hover
`--bg-sidebar-active`	`rgba(59,130,246,0.12)`	Sidebar active item bg
`--bg-body`	`#111620`	Main content area background
`--bg-card`	`#1A1F2E`	Card surfaces
`--bg-card-hover`	`#21273A`	Card hover state
`--bg-input`	`#151A26`	Input/select backgrounds
`--bg-elevated`	`#1E2335`	Dropdowns, tooltips, elevated surfaces
`--border-default`	`#262D3F`	Card and input borders
`--border-active`	`#3B82F6`	Focus/active borders
`--border-subtle`	`#1E2538`	Dividers, subtle separators
`--accent-primary`	`#3B82F6`	Primary accent (blue) — buttons, active nav, links
`--accent-primary-hover`	`#2563EB`	Darker blue hover
`--accent-primary-glow`	`rgba(59,130,246,0.20)`	Focus rings, glows
`--accent-secondary`	`#7C4DFF`	Purple accent — alternative actions, secondary highlights
`--accent-chart`	`#2DD4BF`	Teal/cyan — charts, sparklines, donut fills
`--accent-chart-alt`	`#818CF8`	Indigo — secondary chart color
`--text-primary`	`#F1F5F9`	Primary text, headings
`--text-secondary`	`#94A3B8`	Secondary text, descriptions
`--text-muted`	`#64748B`	Muted/helper text, placeholders
`--text-sidebar`	`#9CA3AF`	Sidebar nav text (inactive)
`--text-sidebar-active`	`#FFFFFF`	Sidebar nav text (active)
`--green`	`#22C55E`	Success, healthy, running
`--green-bg`	`rgba(34,197,94,0.12)`	Success backgrounds
`--amber`	`#F59E0B`	Warning, degraded
`--amber-bg`	`rgba(245,158,11,0.12)`	Warning backgrounds
`--red`	`#EF4444`	Error, stopped, critical
`--red-bg`	`rgba(239,68,68,0.12)`	Error backgrounds
`--blue`	`#3B82F6`	Info, neutral
`--blue-bg`	`rgba(59,130,246,0.12)`	Info backgrounds
`--teal`	`#2DD4BF`	Chart accent
`--teal-bg`	`rgba(45,212,191,0.12)`	Chart accent backgrounds

Note on accent choice: We're adopting blue (#3B82F6) as the primary accent (matching RunCloud classic's proven palette) with purple (#7C4DFF) as a secondary accent and teal (#2DD4BF) for data visualization. This gives us:

Blue: Navigation, primary actions, links, selected states
Purple: Secondary actions, special features, "New" badges
Teal: All charts, sparklines, donut fills, metric visualization
Green/Amber/Red: Status semantics (unchanged from current)

4.2 Typography

Usage	Font	Size	Weight	Notes
Page title	Inter	24px (1.5rem)	700	Letter-spacing: -0.02em
Section heading	Inter	14px (0.875rem)	700	Uppercase, letter-spacing: 0.05em
Card metric value	Inter	32px (2rem)	800	Tabular figures, letter-spacing: -0.03em
Card label	Inter	12px (0.75rem)	600	Uppercase, letter-spacing: 0.06em
Body text	Inter	14px (0.875rem)	400	Line-height: 1.5
Table cell	Inter	13px (0.8125rem)	400	Tabular figures
Table header	Inter	11px (0.6875rem)	600	Uppercase, letter-spacing: 0.06em
Sidebar item	Inter	14px (0.875rem)	500	Line-height: 1.2
Badge / tag	Inter	11px (0.6875rem)	600	Uppercase, letter-spacing: 0.04em
Button text	Inter	14px (0.875rem)	600	—
Helper / caption	Inter	12px (0.75rem)	400	—
Code / mono	JetBrains Mono	13px (0.8125rem)	400	For IPs, commands, config

Font loading strategy:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

With fallback: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif

4.3 Spacing & Sizing

Token	Value	Usage
`--space-xs`	4px	Tight gaps, icon padding
`--space-sm`	8px	Element gaps, small padding
`--space-md`	12px	Card internal gaps, input gaps
`--space-lg`	16px	Section gaps, card padding
`--space-xl`	24px	Card padding, section margins
`--space-2xl`	32px	Page margins, large gaps
`--radius-sm`	6px	Inputs, buttons, small elements
`--radius-md`	8px	Cards, panels, dialogs
`--radius-lg`	12px	Main cards, stat panels
`--radius-full`	9999px	Pills, badges, toggle switches

4.4 Shadows & Elevation

Token	Value	Usage
`--shadow-sm`	`0 1px 2px rgba(0,0,0,0.3)`	Cards (subtle elevation)
`--shadow-md`	`0 4px 12px rgba(0,0,0,0.4)`	Elevated cards, dropdowns
`--shadow-lg`	`0 8px 24px rgba(0,0,0,0.5)`	Modals, dialogs
`--shadow-glow-blue`	`0 0 12px rgba(59,130,246,0.15)`	Active/focus glows
`--shadow-glow-green`	`0 0 12px rgba(34,197,94,0.15)`	Status dot glows
`--shadow-glow-red`	`0 0 12px rgba(239,68,68,0.15)`	Error glows

5. Layout Architecture

5.1 Global Shell

┌──────────────────────────────────────────────────────────────┐
│ ┌──────────┐ ┌──────────────────────────────────────────────┐│
│ │          │ │  TOP BAR: Logo + Global Search + Notif + User ││
│ │ SIDEBAR  │ ├──────────────────────────────────────────────┤│
│ │          │ │                                              ││
│ │  Logo    │ │  BREADCRUMB TRAIL                            ││
│ │  ──────  │ │  PAGE TITLE + ACTIONS                        ││
│ │  Search  │ │                                              ││
│ │  ──────  │ │  ┌──────────────────────────────────────┐   ││
│ │  Nav 1 ▸ │ │  │                                      │   ││
│ │  Nav 2   │ │  │        MAIN CONTENT ZONE              │   ││
│ │  Nav 3   │ │  │  (Cards, Tables, Charts, Forms)       │   ││
│ │  Nav 4   │ │  │                                      │   ││
│ │  Nav 5   │ │  └──────────────────────────────────────┘   ││
│ │  ──────  │ │                                              ││
│ │  Section │ │                                              ││
│ │  ──────  │ │                                              ││
│ │  User    │ │                                              ││
│ └──────────┘ └──────────────────────────────────────────────┘│
└──────────────────────────────────────────────────────────────┘

Sidebar: Fixed, 240px width (desktop), collapsible to 64px (icon-only) Top Bar: 56px height, spans the full width of the content area (right of sidebar) Main Content: Scrollable, fills remaining viewport, max-width 1400px with auto margins

5.2 Sidebar Specification

┌──────────────────┐
│ [Logo] ITPP  [◀] │  ← Logo + collapse toggle
├──────────────────┤
│ 🔍 Quick search  │  ← In-sidebar search (or cmd+k global)
├──────────────────┤
│                  │
│ 📊 Dashboard     │  ← Active: blue left border + light bg
│                  │
│ DASHBOARD        │  ← Section header (collapsible)
│ 📈 Overview      │
│ 📋 Activity      │
│                  │
│ INFRASTRUCTURE   │
│ 🖥 Servers    [5]│  ← With count badge
│ ⚙ Services   [12]│
│ 🌐 Network       │
│ 💾 Backups       │
│ ⏰ Cron Jobs     │
│                  │
│ MANAGEMENT       │
│ 📝 Config        │
│ 📄 Logs          │
│ ✓ Audit          │
│ 💰 Costs         │
│                  │
├──────────────────┤
│ 👤 admin@itpp... │  ← User identity
│ ⚙ Settings       │
│ 🚪 Sign Out      │
└──────────────────┘

Sidebar behavior:

Default: 240px wide, full text + icons
Collapsed: 64px wide, icons only, tooltips on hover
Mobile (<768px): Hidden behind hamburger, slides in as overlay
Sections: Collapsible with chevron indicators
Active item: 3px blue left border + rgba(59,130,246,0.10) background + white text
Hover: #1A1F2E background, white text
Count badges: Small pill on right side of nav items
Server sub-list: Expandable tree showing individual server names with status dots

5.3 Top Bar Specification

┌──────────────────────────────────────────────────────────────┐
│ 🔍 Search servers, services, logs...        [Ctrl+K]    🔔 💬 👤│
└──────────────────────────────────────────────────────────────┘

Elements (right-aligned):

Global search: Ctrl+K shortcut, ⌘ on Mac
Notification bell: with unread count badge
User avatar: initials on colored circle, dropdown for Settings / Sign Out

5.4 Content Zones

Each page follows this vertical layout within the content area:

Breadcrumb row: Home > Section > Subsection (12px, muted, with chevron separators)
Page header: Title (24px bold white) + description (14px gray) + action buttons (right-aligned)
Summary bar (optional): Quick stats in a horizontal pill row
Main content: Cards, tables, charts — scrollable
Footer (optional): "Last updated: ..." timestamp

5.5 Responsive Breakpoints

Breakpoint	Width	Sidebar	Content	Layout Changes
Mobile	< 768px	Hidden (hamburger overlay)	Full width	Cards stack 1-col, tables become cards
Tablet	768–1023px	Collapsed (64px, icons only)	Fluid	Cards 2-col, sidebar icons with tooltips
Desktop	≥ 1024px	Full (240px)	Max 1400px centered	Full layout, 4-col card grids
Wide	≥ 1440px	Full (240px)	Max 1400px centered	Extra whitespace on sides

6. Component Patterns to Adopt

6.1 Stat/Metric Cards

Pattern from RunCloud: Each server or resource card shows a large metric value, a label, a status badge, and a visual indicator.

Specification:

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);       /* 12px */
  padding: var(--space-xl);              /* 24px */
  display: flex;
  align-items: center;
  gap: var(--space-lg);                  /* 16px */
  transition: border-color 0.2s ease;
}
.stat-card:hover {
  border-color: var(--border-active);
}
.stat-card .stat-left {
  flex: 1;
  min-width: 0;
}
.stat-card .stat-value {
  font-size: 2rem;                       /* 32px */
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat-card .stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-top: 4px;
}
.stat-card .stat-visual {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stat-card .stat-status {
  margin-top: 8px;
}

6.2 Donut Chart (for disk usage, pass rates)

Lightweight SVG donut chart — no library needed.

<svg viewBox="0 0 64 64" class="donut-chart">
  <circle cx="32" cy="32" r="28" fill="none"
          stroke="var(--border-default)" stroke-width="6"/>
  <circle cx="32" cy="32" r="28" fill="none"
          stroke="var(--accent-chart)" stroke-width="6"
          stroke-dasharray="176 176"           <!-- 2πr = 175.93 -->
          stroke-dashoffset="97.7"             <!-- offset based on % -->
          stroke-linecap="round"
          transform="rotate(-90 32 32)"/>
  <text x="32" y="36" text-anchor="middle"
        fill="var(--text-primary)" font-size="11" font-weight="700">
    44.5%
  </text>
</svg>

6.3 Sparkline (mini area chart)

SVG-based sparkline for CPU, load, request rate trends.

<svg viewBox="0 0 80 32" class="sparkline" preserveAspectRatio="none">
  <defs>
    <linearGradient id="sparkGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="var(--accent-chart)" stop-opacity="0.3"/>
      <stop offset="100%" stop-color="var(--accent-chart)" stop-opacity="0"/>
    </linearGradient>
  </defs>
  <path d="M0,28 L5,26 L10,22 L15,24 L20,18 L25,20 L30,14 L35,16
           L40,10 L45,12 L50,8 L55,10 L60,6 L65,8 L70,4 L75,6 L80,5"
        fill="url(#sparkGrad)" stroke="var(--accent-chart)"
        stroke-width="1.5" stroke-linejoin="round"/>
  <path d="M0,28 L5,26 ... L80,5"
        fill="none" stroke="var(--accent-chart)"
        stroke-width="1.5" stroke-linejoin="round"/>
</svg>

6.4 Progress/RAM Bar (with color thresholds)

.progress-bar {
  height: 10px;
  background: var(--bg-body);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.progress-bar .fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.6s ease, background 0.3s ease;
}
.fill-low    { background: var(--green); }      /* 0-50% */
.fill-medium { background: var(--amber); }      /* 50-80% */
.fill-high   { background: var(--red); }        /* 80-100% */

With label row above: [Label] [Percentage]

6.5 Time Range Selector

Pill-shaped tab group for filtering metric time ranges.

<div class="time-tabs">
  <button class="time-tab active">1H</button>
  <button class="time-tab">3H</button>
  <button class="time-tab">6H</button>
  <button class="time-tab">12H</button>
  <button class="time-tab">1D</button>
  <button class="time-tab">3D</button>
  <button class="time-tab">7D</button>
</div>

.time-tabs {
  display: inline-flex;
  gap: 4px;
  background: var(--bg-body);
  border-radius: var(--radius-md);
  padding: 3px;
}
.time-tab {
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.time-tab:hover { color: var(--text-primary); }
.time-tab.active {
  background: var(--accent-primary);
  color: #FFFFFF;
}

6.6 Resource Usage Card (Server Card)

Replaces current plain server table with visual cards:

┌─────────────────────────────────────┐
│ 🟢 Core (152.53.192.33)    netcup  │
│ ─────────────────────────────────── │
│ CPU  ████████░░░░  12%             │
│ RAM  ██████████████████░░  82%  ⚠  │
│ Disk ██████░░░░░░░░  31%           │
│                                     │
│ Services: 8 running, 0 stopped      │
│ Uptime: 47d 12h                     │
│ ─────────────────────────────────── │
│ [View] [SSH] [Restart] [Monitor]    │
└─────────────────────────────────────┘

6.7 Server List with Status Dots (Sidebar Tree)

🖥 Servers              [5]
  ├─ 🟢 Core (152.53.192.33)
  ├─ 🟢 App1 (192.168.x.x)
  ├─ 🟡 DB1 (192.168.x.x)       ← Warning
  ├─ 🔴 WPHost (192.168.x.x)    ← Down
  └─ 🟢 Monitor (192.168.x.x)

6.8 Tabbed Settings Pages

<div class="settings-card">
  <div class="tab-bar">
    <button class="tab active">General</button>
    <button class="tab">SSH</button>
    <button class="tab">Firewall</button>
    <button class="tab">Monitoring</button>
  </div>
  <div class="tab-content">
    <!-- Form fields here -->
  </div>
  <div class="settings-actions">
    <button class="btn btn-primary">Save Changes</button>
  </div>
</div>

.tab-bar {
  display: flex;
  border-bottom: 1px solid var(--border-default);
  margin-bottom: 24px;
}
.tab {
  padding: 10px 20px;
  border: none;
  background: none;
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.15s ease;
  margin-bottom: -1px;
}
.tab:hover { color: var(--text-primary); }
.tab.active {
  color: var(--accent-primary);
  border-bottom-color: var(--accent-primary);
  font-weight: 600;
}

6.9 Toggle Switches

.toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle .slider {
  position: absolute;
  inset: 0;
  background: #374151;
  border-radius: 9999px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.toggle .slider::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  left: 2px;
  bottom: 2px;
  background: #FFFFFF;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.toggle input:checked + .slider {
  background: var(--accent-primary);
}
.toggle input:checked + .slider::before {
  transform: translateX(20px);
}
.toggle input:focus-visible + .slider {
  box-shadow: 0 0 0 3px var(--accent-primary-glow);
}

Triggered by Ctrl+K or clicking the search bar. Overlay with:

┌─────────────────────────────────────────┐
│ 🔍 Search servers, services, logs...    │
│                                         │
│ ─── SERVERS ─────────────────────────── │
│ 🖥 Core (152.53.192.33)          netcup │
│ 🖥 App1 (192.168.x.x)            hetzner│
│                                         │
│ ─── SERVICES ────────────────────────── │
│ ⚙ caddy.service                running │
│ ⚙ sshd.service                 running │
│                                         │
│ ─── RECENT ──────────────────────────── │
│ 📄 Core system logs                     │
│ 📊 Server health metrics                │
└─────────────────────────────────────────┘

Fuzzy search across: server names, IPs, service names, log entries, config keys, backup names.

6.11 Toast Notifications (Refined)

Current toast design is good — enhance with:

Progress bar for auto-dismiss
Action button (e.g., "Undo" for batch actions)
Stack limit (max 3 visible)
Sound optional for critical alerts

6.12 Empty States

<div class="empty-state">
  <div class="empty-icon">
    <svg><!-- server icon --></svg>
  </div>
  <h3>No servers connected</h3>
  <p>Connect your first server to start monitoring.</p>
  <button class="btn btn-primary">Add Server</button>
</div>

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)

Create new ops.css with the full design system (CSS custom properties)
Build sidebar component (HTML + CSS + JS)
Build top bar with global search trigger
Create page shell template (sidebar + top bar + content zone)
Set up CSS grid layout for content area
Implement responsive breakpoints and mobile sidebar
Add Inter + JetBrains Mono fonts

Phase 2: Core Components (Week 2–3)

Build stat card component (with donut chart variant)
Build sparkline chart component (SVG-based)
Build progress bar component (with thresholds)
Build time range selector tabs
Build tabbed settings component
Build toggle switch component
Build global search modal (UI only)
Build breadcrumb component

Phase 3: Dashboard Redesign (Week 3–4)

Rebuild Dashboard page with new stat cards
Add server mini-cards with CPU/RAM bars
Add sparkline charts for CPU and Network I/O
Implement time range filtering for dashboard metrics
Polish audit log and cron job widgets

Phase 4: Content Pages (Week 4–6)

Rebuild Servers page with card grid
Add server search/filter/sort
Add batch action capability
Rebuild Services page with filter and batch actions
Rebuild Backups page with visual indicators
Rebuild Logs page with log viewer and filters
Rebuild Config page with tabbed settings and toggles
Rebuild Network, Audit, Cron, Costs pages with refreshed UI

Phase 5: Advanced Features (Week 6–8)

Implement global search backend (fuzzy search across data)
Add server detail page (/server.html)
Implement server tags system
Add notification system (bell + dropdown + toast on alerts)
Add dark/light theme toggle
Mobile bottom tab bar
Performance optimization and final polish

10. CSS Custom Properties Reference

Complete CSS custom properties for the new design system:

: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

Dark theme retained — matches infrastructure/admin tooling conventions and existing brand
Blue primary accent over amber — RunCloud's blue is more professional and less "warning-like"; purple available as secondary
Teal for data visualization — distinct from UI accent to avoid confusion with interactive elements
Sidebar over top nav — modern admin panel standard, better use of horizontal space on wide screens
Inter font — RunCloud's choice, excellent legibility, good tabular figures for metrics
SVG-based charts — no library dependency, lightweight, themeable via CSS variables
Single-file architecture retained — each page is a self-contained HTML file with shared CSS/JS, no build step required
Progressive enhancement — all pages usable without JS, enhanced with JS for interactivity

End of Design Brief

56 KiB Raw Permalink Blame History Unescape Escape

Ops Portal Redesign — RunCloud-Inspired Design Brief

Table of Contents

1. Executive Summary

2. RunCloud UI Research Findings

2.1 Methodology

2.2 RunCloud Classic Dashboard (v1 — manage.runcloud.io)

2.3 RunCloud Dashboard v2 Beta (new.runcloud.io — 2024)

2.4 Functional Patterns from RunCloud

3. Current Ops Portal Analysis

3.1 Existing Architecture

3.2 Current Design System

3.3 Strengths of Current Design

3.4 Weaknesses to Address

4. Proposed Design System

4.1 Color Palette (RunCloud-Inspired Dark Theme)

4.2 Typography

4.3 Spacing & Sizing

4.4 Shadows & Elevation

5. Layout Architecture

5.1 Global Shell

5.2 Sidebar Specification

5.3 Top Bar Specification

5.4 Content Zones

5.5 Responsive Breakpoints

6. Component Patterns to Adopt

6.1 Stat/Metric Cards

6.2 Donut Chart (for disk usage, pass rates)

6.3 Sparkline (mini area chart)

6.4 Progress/RAM Bar (with color thresholds)

6.5 Time Range Selector

6.6 Resource Usage Card (Server Card)

6.7 Server List with Status Dots (Sidebar Tree)

6.8 Tabbed Settings Pages

6.9 Toggle Switches

6.10 Global Search Modal

6.11 Toast Notifications (Refined)

6.12 Empty States

7. Page-by-Page Redesign Specifications

7.1 Dashboard (index.html) — Highest Priority

7.2 Servers Page — Major Upgrade

7.3 Services Page

7.4 Backups Page

7.5 Network Page

7.6 Logs Page — Major Upgrade

7.7 Config Page

7.8 Cron Jobs Page

7.9 Audit Page

7.10 Costs Page

8. Functionality Gaps & New Features

8.1 Global Search (Priority: HIGH)

8.2 Batch Actions (Priority: HIGH)

8.3 Visual Resource Monitoring (Priority: HIGH)

8.4 Visual Configuration Editors (Priority: MEDIUM)

8.5 Server Dashboard (Per-Server Detail Page) (Priority: MEDIUM)

8.6 Server Tags (Priority: MEDIUM)

8.7 Notifications & Alerting (Priority: LOW)

8.8 Dark/Light Theme Toggle (Priority: LOW)

8.9 Mobile Optimizations (Priority: MEDIUM)

9. Implementation Phases

Phase 1: Foundation (Week 1–2)

Phase 2: Core Components (Week 2–3)

Phase 3: Dashboard Redesign (Week 3–4)

Phase 4: Content Pages (Week 4–6)

Phase 5: Advanced Features (Week 6–8)

10. CSS Custom Properties Reference

Appendix A: RunCloud Reference URLs

Appendix B: Existing Ops Portal Reference

Appendix C: Key Design Decisions

56 KiB

Raw Permalink Blame History