From 53db53792e77976be02aff3d0203542e2515ced5 Mon Sep 17 00:00:00 2001
From: anti <samuel@securejump.cl>
Date: Mon, 20 Apr 2026 19:10:09 -0400
Subject: [PATCH] =?UTF-8?q?feat(web):=20MazeNET=20scaffold=20=E2=80=94=20t?=
 =?UTF-8?q?okens,=20route,=20nav,=20stub=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 decnet_web/src/App.tsx                        |   2 +
 decnet_web/src/components/Layout.tsx          |   1 +
 decnet_web/src/components/MazeNET/MazeNET.css |  29 +++
 decnet_web/src/components/MazeNET/MazeNET.tsx |  15 ++
 decnet_web/src/index.css                      | 176 ++++++++++++++----
 5 files changed, 188 insertions(+), 35 deletions(-)
 create mode 100644 decnet_web/src/components/MazeNET/MazeNET.css
 create mode 100644 decnet_web/src/components/MazeNET/MazeNET.tsx

diff --git a/decnet_web/src/App.tsx b/decnet_web/src/App.tsx
index 50bdefc2..fe2c8e95 100644
--- a/decnet_web/src/App.tsx
+++ b/decnet_web/src/App.tsx
@@ -12,6 +12,7 @@ import Bounty from './components/Bounty';
 import RemoteUpdates from './components/RemoteUpdates';
 import SwarmHosts from './components/SwarmHosts';
 import AgentEnrollment from './components/AgentEnrollment';
+import MazeNET from './components/MazeNET/MazeNET';
 
 function isTokenValid(token: string): boolean {
   try {
@@ -62,6 +63,7 @@ function App() {
         <Routes>
           <Route path="/" element={<Dashboard searchQuery={searchQuery} />} />
           <Route path="/fleet" element={<DeckyFleet />} />
+          <Route path="/mazenet" element={<MazeNET />} />
           <Route path="/live-logs" element={<LiveLogs />} />
           <Route path="/bounty" element={<Bounty />} />
           <Route path="/attackers" element={<Attackers />} />
diff --git a/decnet_web/src/components/Layout.tsx b/decnet_web/src/components/Layout.tsx
index 5ee38f56..f0101292 100644
--- a/decnet_web/src/components/Layout.tsx
+++ b/decnet_web/src/components/Layout.tsx
@@ -43,6 +43,7 @@ const Layout: React.FC<LayoutProps> = ({ children, onLogout, onSearch }) => {
         <nav className="sidebar-nav">
           <NavItem to="/" icon={<LayoutDashboard size={20} />} label="Dashboard" open={sidebarOpen} />
           <NavItem to="/fleet" icon={<Server size={20} />} label="Decoy Fleet" open={sidebarOpen} />
+          <NavItem to="/mazenet" icon={<Network size={20} />} label="MazeNET" open={sidebarOpen} />
           <NavItem to="/live-logs" icon={<Terminal size={20} />} label="Live Logs" open={sidebarOpen} />
           <NavItem to="/bounty" icon={<Archive size={20} />} label="Bounty" open={sidebarOpen} />
           <NavItem to="/attackers" icon={<Activity size={20} />} label="Attackers" open={sidebarOpen} />
diff --git a/decnet_web/src/components/MazeNET/MazeNET.css b/decnet_web/src/components/MazeNET/MazeNET.css
new file mode 100644
index 00000000..cd0e4ab7
--- /dev/null
+++ b/decnet_web/src/components/MazeNET/MazeNET.css
@@ -0,0 +1,29 @@
+.maze-stub {
+  height: 100%;
+  min-height: calc(100vh - var(--topbar-h));
+  margin: -28px -32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.maze-stub-inner {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.maze-stub-title {
+  font-size: var(--fs-page);
+  letter-spacing: var(--ls-title);
+  font-weight: 700;
+  color: var(--violet);
+  filter: drop-shadow(var(--violet-glow));
+}
+
+.maze-stub-sub {
+  font-size: var(--fs-mini);
+  letter-spacing: var(--ls-nav);
+  text-transform: uppercase;
+}
diff --git a/decnet_web/src/components/MazeNET/MazeNET.tsx b/decnet_web/src/components/MazeNET/MazeNET.tsx
new file mode 100644
index 00000000..a06e16e6
--- /dev/null
+++ b/decnet_web/src/components/MazeNET/MazeNET.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import './MazeNET.css';
+
+const MazeNET: React.FC = () => {
+  return (
+    <div className="maze-stub bg-scangrid">
+      <div className="maze-stub-inner">
+        <div className="maze-stub-title">MAZENET</div>
+        <div className="maze-stub-sub fx-dim">coming online…</div>
+      </div>
+    </div>
+  );
+};
+
+export default MazeNET;
diff --git a/decnet_web/src/index.css b/decnet_web/src/index.css
index ce0a4219..e98ec26a 100644
--- a/decnet_web/src/index.css
+++ b/decnet_web/src/index.css
@@ -1,27 +1,114 @@
 @import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
 
 :root {
-  --background-color: #000000;
-  --text-color: #00ff41;
-  --accent-color: #ee82ee;
-  --secondary-color: #0d1117;
-  --border-color: #30363d;
-  --matrix-green-glow: 0 0 10px rgba(0, 255, 65, 0.5);
-  --violet-glow: 0 0 10px rgba(238, 130, 238, 0.5);
+  /* ── Brand ─────────────────────────────────────── */
+  --bg:              #000000;
+  --matrix:          #00ff41;
+  --violet:          #ee82ee;
+  --panel:           #0d1117;
+  --border:          #30363d;
+  --alert:           #ff4141;
+
+  /* Back-compat names used across the codebase */
+  --background-color: var(--bg);
+  --text-color:       var(--matrix);
+  --accent-color:     var(--violet);
+  --secondary-color:  var(--panel);
+  --border-color:     var(--border);
+
+  /* ── Foreground opacities ──────────────────────── */
+  --fg-1: var(--matrix);
+  --fg-2: rgba(0, 255, 65, 0.80);
+  --fg-3: rgba(0, 255, 65, 0.60);
+  --fg-4: rgba(0, 255, 65, 0.40);
+
+  /* ── Tinted surfaces ───────────────────────────── */
+  --matrix-tint-5:   rgba(0, 255, 65, 0.05);
+  --matrix-tint-10:  rgba(0, 255, 65, 0.10);
+  --matrix-tint-30:  rgba(0, 255, 65, 0.30);
+  --violet-tint-10:  rgba(238, 130, 238, 0.10);
+  --alert-tint-10:   rgba(255, 65, 65, 0.10);
+
+  /* ── Glows ─────────────────────────────────────── */
+  --matrix-glow:       0 0 10px rgba(0, 255, 65, 0.5);
+  --matrix-green-glow: var(--matrix-glow);   /* back-compat */
+  --violet-glow:       0 0 10px rgba(238, 130, 238, 0.5);
+  --matrix-glow-lg:    0 0 20px rgba(0, 255, 65, 0.4);
+  --shadow-panel:      0 0 20px rgba(0, 0, 0, 0.5);
+
+  /* ── Grid texture ──────────────────────────────── */
+  --grid-line: rgba(0, 255, 65, 0.05);
+  --grid-size: 20px;
+
+  /* ── Type ──────────────────────────────────────── */
+  --font-mono: 'Ubuntu Mono', 'SF Mono', Menlo, Consolas, monospace;
+
+  --fs-micro:   0.6rem;
+  --fs-mini:    0.7rem;
+  --fs-tiny:    0.75rem;
+  --fs-small:   0.8rem;
+  --fs-body:    0.85rem;
+  --fs-ui:      0.9rem;
+  --fs-base:    1rem;
+  --fs-head:    1.2rem;
+  --fs-page:    1.5rem;
+  --fs-hero:    1.8rem;
+  --fs-display: 2.5rem;
+
+  --lh-default: 1.5;
+
+  --ls-tight:   0;
+  --ls-label:   1px;
+  --ls-nav:     2px;
+  --ls-title:   4px;
+  --ls-brand:   10px;
+
+  /* ── Spacing ───────────────────────────────────── */
+  --space-1:  4px;
+  --space-2:  8px;
+  --space-3:  12px;
+  --space-4:  16px;
+  --space-5:  20px;
+  --space-6:  24px;
+  --space-8:  32px;
+  --space-10: 40px;
+
+  /* ── Radii ─────────────────────────────────────── */
+  --radius-0: 0;
+  --radius-1: 2px;
+  --radius-2: 4px;
+  --radius-pill: 999px;
+
+  /* ── Layout ────────────────────────────────────── */
+  --sidebar-open:    240px;
+  --sidebar-closed:   70px;
+  --topbar-h:         64px;
+
+  /* ── Motion ────────────────────────────────────── */
+  --ease: cubic-bezier(0.4, 0, 0.2, 1);
+  --dur-quick: 0.2s;
+  --dur-base:  0.3s;
+  --dur-slow:  1s;
+
+  --blink-dur: 2s;
+  --pulse-dur: 1s;
+  --spin-dur:  1.5s;
 }
 
-* {
+*, *::before, *::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }
 
 body {
-  font-family: 'Ubuntu Mono', monospace;
-  background-color: var(--background-color);
-  color: var(--text-color);
-  line-height: 1.5;
+  font-family: var(--font-mono);
+  background-color: var(--bg);
+  color: var(--matrix);
+  line-height: var(--lh-default);
   overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: geometricPrecision;
 }
 
 input, button, textarea, select {
@@ -31,45 +118,64 @@ input, button, textarea, select {
 button {
   cursor: pointer;
   background: transparent;
-  border: 1px solid var(--text-color);
-  color: var(--text-color);
+  border: 1px solid var(--matrix);
+  color: var(--matrix);
   padding: 8px 16px;
   transition: all 0.3s ease;
 }
 
 button:hover {
-  background: var(--text-color);
-  color: var(--background-color);
-  box-shadow: var(--matrix-green-glow);
+  background: var(--matrix);
+  color: var(--bg);
+  box-shadow: var(--matrix-glow);
 }
 
 input {
-  background: #0d1117;
-  border: 1px solid var(--border-color);
-  color: var(--text-color);
+  background: var(--panel);
+  border: 1px solid var(--border);
+  color: var(--matrix);
   padding: 8px 12px;
 }
 
 input:focus {
   outline: none;
-  border-color: var(--text-color);
-  box-shadow: var(--matrix-green-glow);
+  border-color: var(--matrix);
+  box-shadow: var(--matrix-glow);
 }
 
-/* Custom scrollbar */
-::-webkit-scrollbar {
-  width: 8px;
+/* ── Primitive animations ──────────────────────── */
+@keyframes decnet-blink {
+  0%, 100% { opacity: 1; text-shadow: var(--matrix-glow); }
+  50%      { opacity: 0.5; }
+}
+@keyframes decnet-pulse {
+  from { opacity: 0.5; }
+  to   { opacity: 1;   }
+}
+@keyframes decnet-spin {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
 }
 
-::-webkit-scrollbar-track {
-  background: var(--background-color);
+.fx-blink { animation: decnet-blink var(--blink-dur) infinite; }
+.fx-pulse { animation: decnet-pulse var(--pulse-dur) infinite alternate; }
+.fx-spin  { animation: decnet-spin  var(--spin-dur)  linear infinite; }
+
+.fx-matrix-text { color: var(--matrix); }
+.fx-violet-text { color: var(--violet); filter: drop-shadow(var(--violet-glow)); }
+.fx-matrix-glow { text-shadow: var(--matrix-glow); }
+.fx-dim { opacity: 0.5; }
+
+.bg-scangrid {
+  background-color: var(--bg);
+  background-image:
+    linear-gradient(var(--grid-line) 1px, transparent 1px),
+    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
+  background-size: var(--grid-size) var(--grid-size);
 }
 
-::-webkit-scrollbar-thumb {
-  background: var(--secondary-color);
-  border: 1px solid var(--border-color);
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: var(--border-color);
-}
+/* ── Scrollbar ─────────────────────────────────── */
+::-webkit-scrollbar              { width: 8px; height: 8px; }
+::-webkit-scrollbar-track        { background: var(--bg); }
+::-webkit-scrollbar-thumb        { background: var(--panel); border: 1px solid var(--border); }
+::-webkit-scrollbar-thumb:hover  { background: var(--border); }