diff --git a/CHANGELOG.md b/CHANGELOG.md index d4d9b511..306fb1af 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ For summary details and quick references, see [README.md](README.md). | Version | Release Date | Summary of Key Changes | | :--- | :--- | :--- | +| **`v4.30.0`** | 2026-08-22 | feat(ui): comprehensive aesthetic UI overhaul implementing stark monochrome mode, vibrant neon green/orange dark mode accents, cyan/blue light mode accents, and mobile responsive flex refactoring for toolbar dropdowns and stat grids | | **`v4.29.0`** | 2026-08-22 | Security fixes: resolved CodeQL alerts for log forging, path injection, cleartext sensitive info storage, and missing X-Frame-Options headers. | | **`v4.28.0`** | 2026-08-22 | chore(repo): large repository health sweep refactoring backend, frontend, auth, secrets, CI, and rewriting all documentation guides | | **`v4.27.2`** | 2026-08-22 | refactor(reqs): normalize requirement taxonomy IDs across all C#, Vitest, and Playwright test suites to eliminate `REQ-` prefixes and strictly enforce standard category codes (`AUTH-`, `UI-`, `DB-`, `GUARD-`) | diff --git a/README.md b/README.md index fcfcd56f..9a2bb17f 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # MCP Router Gateway & Semantic Proxy -![Version](https://img.shields.io/badge/version-v4.29.0-orange?style=for-the-badge) +![Version](https://img.shields.io/badge/version-v4.30.0-orange?style=for-the-badge) ![.NET 10.0](https://img.shields.io/badge/.NET-10.0-512BD4?style=for-the-badge&logo=dotnet&logoColor=white) ![MCP Spec](https://img.shields.io/badge/MCP%20Spec-2026--07--28-0052CC?style=for-the-badge) ![Tests](https://img.shields.io/badge/tests-620%20passing-2ea44f?style=for-the-badge) @@ -207,6 +207,7 @@ For complete release history and version logs, see [**CHANGELOG.md**](CHANGELOG. | Version | Release Date | Summary of Key Changes | | :--- | :--- | :--- | +| **`v4.30.0`** | 2026-08-22 | feat(ui): comprehensive aesthetic UI overhaul implementing stark monochrome mode, vibrant neon green/orange dark mode accents, cyan/blue light mode accents, and mobile responsive flex refactoring for toolbar dropdowns and stat grids | | **`v4.29.0`** | 2026-08-22 | Security fixes: resolved CodeQL alerts. | | **`v4.28.0`** | 2026-08-22 | chore(repo): large repository health sweep refactoring backend, frontend, auth, secrets, CI, and rewriting all documentation guides | | **`v4.27.2`** | 2026-08-22 | refactor(reqs): normalize requirement taxonomy IDs across all C#, Vitest, and Playwright test suites to eliminate `REQ-` prefixes and strictly enforce standard category codes (`AUTH-`, `UI-`, `DB-`, `GUARD-`) | @@ -226,6 +227,7 @@ Our core modules maintain high code coverage and automated CI quality gates on p | Module | Line Coverage | Branch Coverage | Status | | :--- | :--- | :--- | :--- | +| **`v4.30.0`** | 2026-08-22 | feat(ui): comprehensive aesthetic UI overhaul implementing stark monochrome mode, vibrant neon green/orange dark mode accents, cyan/blue light mode accents, and mobile responsive flex refactoring for toolbar dropdowns and stat grids | | **Core Session** | 92.4% | 88.1% | 🟢 Passing | | **Routing Engine** | 89.7% | 85.3% | 🟢 Passing | | **Controllers** | 94.2% | 91.0% | 🟢 Passing | diff --git a/frontend/src/components/servers/StatsCard.tsx b/frontend/src/components/servers/StatsCard.tsx index 9efc9f89..4d1aeb12 100644 --- a/frontend/src/components/servers/StatsCard.tsx +++ b/frontend/src/components/servers/StatsCard.tsx @@ -11,21 +11,21 @@ export const StatsCard: React.FC = () => { return (
-
+
Total Servers - {total} + {total}
-
+
Connected - {connected} + {connected}
-
+
Failed / Error - {failed} + {failed}
-
+
Disabled - {disabled} + {disabled}
); diff --git a/frontend/src/shared/stores/useUserStore.ts b/frontend/src/shared/stores/useUserStore.ts index a330bc16..55b0a000 100644 --- a/frontend/src/shared/stores/useUserStore.ts +++ b/frontend/src/shared/stores/useUserStore.ts @@ -12,7 +12,7 @@ export interface UserStore { export const useUserStore = create((set) => ({ user: null, - version: '4.29.0', // fallback default + version: '4.30.0', // fallback default isLoadingUser: false, loadUser: async () => { set({ isLoadingUser: true }); diff --git a/frontend/src/styles/components.css b/frontend/src/styles/components.css index f400c7dc..6040a45e 100644 --- a/frontend/src/styles/components.css +++ b/frontend/src/styles/components.css @@ -94,6 +94,7 @@ background: var(--primary); border-color: var(--primary); box-shadow: 0 0 10px var(--primary-glow); + color: var(--btn-primary-text); } .btn-primary:hover { background: rgb(var(--primary-rgb) / 0.85); @@ -128,6 +129,8 @@ font-size: var(--font-size-md); cursor: pointer; padding: 6px; + min-width: 44px; + min-height: 44px; border-radius: var(--radius-sm); transition: all var(--transition-fast); display: inline-flex; diff --git a/frontend/src/styles/dashboard.css b/frontend/src/styles/dashboard.css index 174991ef..3534bef8 100644 --- a/frontend/src/styles/dashboard.css +++ b/frontend/src/styles/dashboard.css @@ -1,7 +1,7 @@ /* System Stats Grid */ .stats-grid { display: grid; - grid-template-columns: 1fr 1fr; + grid-template-columns: repeat(4, 1fr); gap: 15px; } @@ -9,7 +9,7 @@ background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-lg); - padding: var(--space-5); + padding: var(--space-3); text-align: center; display: flex; flex-direction: column; @@ -175,11 +175,11 @@ /* Tables styling */ .table-container { overflow-x: auto; - width: 100%; + } table { - width: 100%; + border-collapse: collapse; font-size: var(--font-size-sm); text-align: left; @@ -222,3 +222,91 @@ tr:last-child td { font-size: var(--font-size-2xl); color: var(--primary); } + +/* Server Controls Toolbar */ +.server-controls-toolbar { + display: flex; + flex-wrap: wrap; + gap: var(--space-4); + align-items: center; + justify-content: space-between; + margin-bottom: var(--space-5); + background: var(--bg-card); + padding: var(--space-4); + border-radius: var(--radius-lg); + border: 1px solid var(--border-color); +} + +.search-box { + position: relative; + flex: 1; + min-width: 250px; + display: flex; + align-items: center; +} + +.search-icon { + position: absolute; + left: 12px; + color: var(--text-muted); +} + +.search-box input { + + padding: 10px 36px; + border-radius: var(--radius-md); + border: 1px solid var(--border-color); + background: var(--bg-input); + color: var(--text-main); + font-size: var(--font-size-md); + min-height: 44px; /* WCAG Touch Target AAA */ +} + +.search-box input:focus { + border-color: var(--primary); + outline: none; + box-shadow: 0 0 0 2px rgb(var(--primary-rgb) / 0.2); +} + +.btn-clear-search { + position: absolute; + right: 8px; + min-width: 28px; + min-height: 28px; +} + +.toolbar-actions { + + display: flex; + flex-wrap: wrap; + align-items: center; + gap: var(--space-4); +} + +.select-group { + display: flex; + align-items: center; + gap: var(--space-2); +} + +.select-group label { + font-size: var(--font-size-sm); + color: var(--text-muted); + font-weight: var(--font-weight-medium); +} + +.select-group select { + padding: 8px 12px; + border-radius: var(--radius-md); + border: 1px solid var(--border-color); + background: var(--bg-input); + color: var(--text-main); + font-size: var(--font-size-sm); + min-height: 44px; /* WCAG Touch Target AAA */ + cursor: pointer; +} + +.select-group select:focus { + border-color: var(--primary); + outline: none; +} diff --git a/frontend/src/styles/layout.css b/frontend/src/styles/layout.css index c2b69d5f..05df5ac6 100644 --- a/frontend/src/styles/layout.css +++ b/frontend/src/styles/layout.css @@ -21,6 +21,7 @@ body { /* Background shapes */ .background-decor { + pointer-events: none; position: absolute; top: 0; left: 0; @@ -31,6 +32,8 @@ body { } .circle { + max-width: 100vw; + max-height: 100vh; position: absolute; border-radius: var(--radius-full); filter: blur(120px); @@ -39,22 +42,24 @@ body { } [data-theme="light"] .circle { + max-width: 100vw; + max-height: 100vh; opacity: 0.05; } .circle-1 { top: -10%; right: 10%; - width: 500px; - height: 500px; + width: 50vmin; + height: 50vmin; background: var(--primary); } .circle-2 { bottom: -10%; left: -5%; - width: 600px; - height: 600px; + width: 60vmin; + height: 60vmin; background: var(--secondary); } diff --git a/frontend/src/styles/responsive.css b/frontend/src/styles/responsive.css index 24801637..742db9a2 100644 --- a/frontend/src/styles/responsive.css +++ b/frontend/src/styles/responsive.css @@ -247,4 +247,42 @@ width: 100%; justify-content: center; } + + /* Server Controls Toolbar (Mobile) */ + .server-controls-toolbar { + flex-direction: column; + align-items: stretch; + } + + .search-box { + width: 100%; + min-width: 100%; + } + + .toolbar-actions { + width: 100%; + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-3); + } + + .toolbar-actions .btn { + width: 100%; + justify-content: center; + } + + .select-group { + flex-direction: column; + align-items: flex-start; + gap: 2px; + } + + .select-group select { + width: 100%; + } + + /* Stats Grid (Mobile) */ + .stats-grid { + grid-template-columns: 1fr 1fr; + } } diff --git a/frontend/src/styles/toasts.css b/frontend/src/styles/toasts.css index e516688f..69353bc8 100644 --- a/frontend/src/styles/toasts.css +++ b/frontend/src/styles/toasts.css @@ -1,7 +1,7 @@ /* Toast Container */ #toast-container { position: fixed; - top: var(--space-5); + bottom: var(--space-5); right: var(--space-5); z-index: var(--z-toast); display: flex; @@ -70,6 +70,8 @@ } .toast-close { + min-width: 44px; + min-height: 44px; background: transparent; border: none; color: var(--text-muted); diff --git a/frontend/src/styles/variables.css b/frontend/src/styles/variables.css index fdd946d0..8fc416e6 100644 --- a/frontend/src/styles/variables.css +++ b/frontend/src/styles/variables.css @@ -1,25 +1,28 @@ :root { - /* Base Colors - Material You Dark */ - --bg-dark: #09090b; - --bg-card: #18181b; - --bg-code: #09090b; - --bg-input: rgba(255, 255, 255, 0.03); + /* Base Colors - Monochrome Dark */ + --bg-dark: #000000; + --bg-card: #0a0a0a; + --bg-code: #0a0a0a; + --bg-input: rgba(255, 255, 255, 0.06); --border-color: #27272a; --border-hover: #3f3f46; - --primary: #f97316; /* Orange */ - --primary-rgb: 249, 115, 22; - --primary-glow: rgba(249, 115, 22, 0.15); + /* Vibrant Accents */ + --primary: #00c853; /* Vibrant Green */ + --primary-rgb: 0, 200, 83; + --primary-glow: rgba(0, 200, 83, 0.25); - --secondary: #eab308; /* Yellow */ - --secondary-rgb: 234, 179, 8; + --secondary: #ff5f1f; /* Neon Orange */ + --secondary-rgb: 255, 95, 31; - --accent: #14b8a6; /* Teal */ - --accent-rgb: 20, 184, 166; + --accent: #eab308; /* Yellow 500 */ + --accent-rgb: 234, 179, 8; - --text-main: #fafafa; + --text-main: #ffffff; --text-muted: #a1a1aa; + --btn-primary-text: #ffffff; + /* Statuses */ --status-online: #22c55e; --status-offline: #ef4444; @@ -40,7 +43,7 @@ /* Typography */ --font-family-base: 'Outfit', sans-serif; --font-family-code: 'JetBrains Mono', monospace; - --font-size-xs: 11px; + --font-size-xs: 12px; --font-size-sm: 13px; --font-size-md: 14px; --font-size-lg: 15px; @@ -89,32 +92,35 @@ } [data-theme="light"] { - /* Base Colors - Material You Light */ - --bg-dark: #f4f4f5; - --bg-card: #ffffff; + /* Base Colors - Monochrome Light */ + --bg-dark: #f4f4f5; /* Slight off-white for body */ + --bg-card: #ffffff; /* Pure white for cards */ --bg-code: #e4e4e7; - --bg-input: rgba(0, 0, 0, 0.03); + --bg-input: rgba(0, 0, 0, 0.04); --border-color: #e4e4e7; --border-hover: #d4d4d8; --card-shadow: var(--shadow-sm); - --primary: #ea580c; /* Orange */ - --primary-rgb: 234, 88, 12; - --primary-glow: rgba(234, 88, 12, 0.1); + /* Vibrant Accents */ + --primary: #2563eb; /* Blue 600 */ + --primary-rgb: 37, 99, 235; + --primary-glow: rgba(37, 99, 235, 0.15); - --secondary: #ca8a04; /* Yellow */ - --secondary-rgb: 202, 138, 4; + --secondary: #0891b2; /* Cyan 600 */ + --secondary-rgb: 8, 145, 178; - --accent: #0d9488; - --accent-rgb: 13, 148, 136; + --accent: #8b5cf6; /* Violet 500 */ + --accent-rgb: 139, 92, 246; - --text-main: #09090b; - --text-muted: #71717a; + --text-main: #000000; + --text-muted: #52525b; + --btn-primary-text: #ffffff; + /* Statuses */ --status-online: #16a34a; --status-offline: #dc2626; - /* Semantic States (Adjusted for Light Mode if needed, else same) */ + /* Semantic States */ --color-info: #2563eb; --color-info-rgb: 37, 99, 235; --color-success: #16a34a; diff --git a/mcp-router.csproj b/mcp-router.csproj index 925ece6b..e3ad9f31 100644 --- a/mcp-router.csproj +++ b/mcp-router.csproj @@ -4,9 +4,9 @@ net10.0 enable enable - 4.29.0 - 4.29.0.0 - 4.29.0.0 + 4.30.0 + 4.30.0.0 + 4.30.0.0 true true $(NoWarn);1591