From ccfcb14ef1b837ed6f752ae4f27e0ef88a5b18da Mon Sep 17 00:00:00 2001
From: zousar <zousar.shaker@epicgames.com>
Date: Mon, 16 Feb 2026 16:39:44 -0700
Subject: Added custom page for cook.artifacts

---
 src/zenserver/frontend/html/zen.css | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

(limited to 'src/zenserver/frontend/html/zen.css')

diff --git a/src/zenserver/frontend/html/zen.css b/src/zenserver/frontend/html/zen.css
index cc53c0519..34c265610 100644
--- a/src/zenserver/frontend/html/zen.css
+++ b/src/zenserver/frontend/html/zen.css
@@ -172,6 +172,24 @@ a {
 	}
 }
 
+/* expandable cell ---------------------------------------------------------- */
+
+.zen_expand_icon {
+	cursor:                 pointer;
+	margin-right:           0.5em;
+	color:                  var(--theme_g1);
+	font-weight:            bold;
+	user-select:            none;
+}
+
+.zen_expand_icon:hover {
+	color:                  var(--theme_ln);
+}
+
+.zen_data_text {
+	user-select:            text;
+}
+
 /* toolbar ------------------------------------------------------------------ */
 
 .zen_toolbar {
-- 
cgit v1.2.3


From cae12611580c6c28b1362fa28181b8f388516a47 Mon Sep 17 00:00:00 2001
From: zousar <zousar.shaker@epicgames.com>
Date: Thu, 19 Feb 2026 13:55:44 -0700
Subject: icon and header logo changes

---
 src/zenserver/frontend/html/zen.css | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

(limited to 'src/zenserver/frontend/html/zen.css')

diff --git a/src/zenserver/frontend/html/zen.css b/src/zenserver/frontend/html/zen.css
index 34c265610..702bf9aa6 100644
--- a/src/zenserver/frontend/html/zen.css
+++ b/src/zenserver/frontend/html/zen.css
@@ -365,6 +365,20 @@ a {
 		margin:			auto;
 		user-select:	none;
 		position:		relative;
+		display:		flex;
+		align-items:	center;
+		gap:			0.8em;
+
+		#zen_icon {
+			width:		3em;
+			height:		3em;
+		}
+
+		#zen_text {
+			font-size:	2em;
+			font-weight:	bold;
+			letter-spacing:	0.05em;
+		}
 
 		#go_home {
 			width:		100%;
@@ -379,7 +393,7 @@ a {
 		filter:			drop-shadow(0 0.15em 0.1em var(--theme_p2));
 	}
 
-	#ue_logo {
+	#epic_logo {
 		position:		absolute;
 		top:			1em;
 		right:			0;
-- 
cgit v1.2.3


From 0763d09a81e5a1d3df11763a7ec75e7860c9510a Mon Sep 17 00:00:00 2001
From: Stefan Boberg <stefan.boberg@epicgames.com>
Date: Wed, 4 Mar 2026 14:13:46 +0100
Subject: compute orchestration (#763)

- Added local process runners for Linux/Wine, Mac with some sandboxing support
- Horde & Nomad provisioning for development and testing
- Client session queues with lifecycle management (active/draining/cancelled), automatic retry with configurable limits, and manual reschedule API
- Improved web UI for orchestrator, compute, and hub dashboards with WebSocket push updates
- Some security hardening
- Improved scalability and `zen exec` command

Still experimental - compute support is disabled by default
---
 src/zenserver/frontend/html/zen.css | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

(limited to 'src/zenserver/frontend/html/zen.css')

diff --git a/src/zenserver/frontend/html/zen.css b/src/zenserver/frontend/html/zen.css
index 702bf9aa6..a80a1a4f6 100644
--- a/src/zenserver/frontend/html/zen.css
+++ b/src/zenserver/frontend/html/zen.css
@@ -80,6 +80,33 @@ input {
 	}
 }
 
+/* service nav -------------------------------------------------------------- */
+
+#service_nav {
+	display:			flex;
+	justify-content:	center;
+	gap:				0.3em;
+	margin-bottom:		1.5em;
+	padding:			0.3em;
+	background-color:	var(--theme_g3);
+	border:				1px solid var(--theme_g2);
+	border-radius:		0.4em;
+
+	a {
+		padding:			0.3em 0.9em;
+		border-radius:		0.3em;
+		font-size:			0.85em;
+		color:				var(--theme_g1);
+		text-decoration:	none;
+	}
+
+	a:hover {
+		background-color:	var(--theme_p4);
+		color:				var(--theme_g0);
+		text-decoration:	none;
+	}
+}
+
 /* links -------------------------------------------------------------------- */
 
 a {
-- 
cgit v1.2.3


From b37b34ea6ad906f54e8104526e77ba66aed997da Mon Sep 17 00:00:00 2001
From: Stefan Boberg <stefan.boberg@epicgames.com>
Date: Mon, 9 Mar 2026 17:43:08 +0100
Subject: Dashboard overhaul, compute integration (#814)

- **Frontend dashboard overhaul**: Unified compute/main dashboards into a single shared UI. Added new pages for cache, projects, metrics, sessions, info (build/runtime config, system stats). Added live-update via WebSockets with pause control, sortable detail tables, themed styling. Refactored compute/hub/orchestrator pages into modular JS.
- **HTTP server fixes and stats**: Fixed http.sys local-only fallback when default port is in use, implemented root endpoint redirect for http.sys, fixed Linux/Mac port reuse. Added /stats endpoint exposing HTTP server metrics (bytes transferred, request rates). Added WebSocket stats tracking.
- **OTEL/diagnostics hardening**: Improved OTLP HTTP exporter with better error handling and resilience. Extended diagnostics services configuration.
- **Session management**: Added new sessions service with HTTP endpoints for registering, updating, querying, and removing sessions. Includes session log file support. This is still WIP.
- **CLI subcommand support**: Added support for commands with subcommands in the zen CLI tool, with improved command dispatch.
- **Misc**: Exposed CPU usage/hostname to frontend, fixed JS compact binary float32/float64 decoding, limited projects displayed on front page to 25 sorted by last access, added vscode:// link support.

Also contains some fixes from TSAN analysis.
---
 src/zenserver/frontend/html/zen.css | 809 +++++++++++++++++++++++++++++-------
 1 file changed, 663 insertions(+), 146 deletions(-)

(limited to 'src/zenserver/frontend/html/zen.css')

diff --git a/src/zenserver/frontend/html/zen.css b/src/zenserver/frontend/html/zen.css
index a80a1a4f6..a968aecab 100644
--- a/src/zenserver/frontend/html/zen.css
+++ b/src/zenserver/frontend/html/zen.css
@@ -2,66 +2,202 @@
 
 /* theme -------------------------------------------------------------------- */
 
+/* system preference (default) */
 @media (prefers-color-scheme: light) {
 	:root {
-		--theme_g0:	#000;
-		--theme_g4:	#fff;
-		--theme_g1:	color-mix(in oklab, var(--theme_g0), var(--theme_g4) 45%);
-		--theme_g2:	color-mix(in oklab, var(--theme_g0), var(--theme_g4) 80%);
-		--theme_g3:	color-mix(in oklab, var(--theme_g0), var(--theme_g4) 96%);
-
-		--theme_p0:	#069;
-		--theme_p4:	hsl(210deg 40% 94%);
+		--theme_g0:	#1f2328;
+		--theme_g1:	#656d76;
+		--theme_g2:	#d0d7de;
+		--theme_g3:	#f6f8fa;
+		--theme_g4:	#ffffff;
+
+		--theme_p0:	#0969da;
+		--theme_p4:	#ddf4ff;
 		--theme_p1:	color-mix(in oklab, var(--theme_p0), var(--theme_p4) 35%);
 		--theme_p2:	color-mix(in oklab, var(--theme_p0), var(--theme_p4) 60%);
 		--theme_p3:	color-mix(in oklab, var(--theme_p0), var(--theme_p4) 85%);
 
 		--theme_ln:	var(--theme_p0);
-		--theme_er:	#fcc;
+		--theme_er:	#ffebe9;
+
+		--theme_ok:		#1a7f37;
+		--theme_warn:	#9a6700;
+		--theme_fail:	#cf222e;
+
+		--theme_bright:			#1f2328;
+		--theme_faint:			#6e7781;
+		--theme_border_subtle:	#d8dee4;
 	}
 }
 
 @media (prefers-color-scheme: dark) {
 	:root {
-		--theme_g0:	#ddd;
-		--theme_g4:	#222;
-		--theme_g1:	color-mix(in oklab, var(--theme_g0), var(--theme_g4) 35%);
-		--theme_g2:	color-mix(in oklab, var(--theme_g0), var(--theme_g4) 65%);
-		--theme_g3:	color-mix(in oklab, var(--theme_g0), var(--theme_g4) 88%);
-
-		--theme_p0:	#479;
-		--theme_p4:	#333;
+		--theme_g0:	#c9d1d9;
+		--theme_g1:	#8b949e;
+		--theme_g2:	#30363d;
+		--theme_g3:	#161b22;
+		--theme_g4:	#0d1117;
+
+		--theme_p0:	#58a6ff;
+		--theme_p4:	#1c2128;
 		--theme_p1:	color-mix(in oklab, var(--theme_p0), var(--theme_p4) 35%);
 		--theme_p2:	color-mix(in oklab, var(--theme_p0), var(--theme_p4) 60%);
 		--theme_p3:	color-mix(in oklab, var(--theme_p0), var(--theme_p4) 85%);
 
-		--theme_ln:	#feb;
-		--theme_er:	#622;
+		--theme_ln:	#58a6ff;
+		--theme_er:	#1c1c1c;
+
+		--theme_ok:		#3fb950;
+		--theme_warn:	#d29922;
+		--theme_fail:	#f85149;
+
+		--theme_bright:			#f0f6fc;
+		--theme_faint:			#6e7681;
+		--theme_border_subtle:	#21262d;
 	}
 }
 
+/* manual overrides (higher specificity than media queries) */
+:root[data-theme="light"] {
+	--theme_g0:	#1f2328;
+	--theme_g1:	#656d76;
+	--theme_g2:	#d0d7de;
+	--theme_g3:	#f6f8fa;
+	--theme_g4:	#ffffff;
+
+	--theme_p0:	#0969da;
+	--theme_p4:	#ddf4ff;
+	--theme_p1:	color-mix(in oklab, var(--theme_p0), var(--theme_p4) 35%);
+	--theme_p2:	color-mix(in oklab, var(--theme_p0), var(--theme_p4) 60%);
+	--theme_p3:	color-mix(in oklab, var(--theme_p0), var(--theme_p4) 85%);
+
+	--theme_ln:	var(--theme_p0);
+	--theme_er:	#ffebe9;
+
+	--theme_ok:		#1a7f37;
+	--theme_warn:	#9a6700;
+	--theme_fail:	#cf222e;
+
+	--theme_bright:			#1f2328;
+	--theme_faint:			#6e7781;
+	--theme_border_subtle:	#d8dee4;
+}
+
+:root[data-theme="dark"] {
+	--theme_g0:	#c9d1d9;
+	--theme_g1:	#8b949e;
+	--theme_g2:	#30363d;
+	--theme_g3:	#161b22;
+	--theme_g4:	#0d1117;
+
+	--theme_p0:	#58a6ff;
+	--theme_p4:	#1c2128;
+	--theme_p1:	color-mix(in oklab, var(--theme_p0), var(--theme_p4) 35%);
+	--theme_p2:	color-mix(in oklab, var(--theme_p0), var(--theme_p4) 60%);
+	--theme_p3:	color-mix(in oklab, var(--theme_p0), var(--theme_p4) 85%);
+
+	--theme_ln:	#58a6ff;
+	--theme_er:	#1c1c1c;
+
+	--theme_ok:		#3fb950;
+	--theme_warn:	#d29922;
+	--theme_fail:	#f85149;
+
+	--theme_bright:			#f0f6fc;
+	--theme_faint:			#6e7681;
+	--theme_border_subtle:	#21262d;
+}
+
+/* theme toggle ------------------------------------------------------------- */
+
+#zen_ws_toggle {
+	position:			fixed;
+	top:				16px;
+	right:				60px;
+	z-index:			10;
+	width:				36px;
+	height:				36px;
+	border-radius:		6px;
+	border:				1px solid var(--theme_g2);
+	background:			var(--theme_g3);
+	color:				var(--theme_g1);
+	cursor:				pointer;
+	display:			flex;
+	align-items:		center;
+	justify-content:	center;
+	font-size:			18px;
+	line-height:		1;
+	transition:			color 0.15s, background 0.15s, border-color 0.15s;
+	user-select:		none;
+}
+
+#zen_ws_toggle:hover {
+	color:				var(--theme_g0);
+	background:			var(--theme_p4);
+	border-color:		var(--theme_g1);
+}
+
+#zen_theme_toggle {
+	position:			fixed;
+	top:				16px;
+	right:				16px;
+	z-index:			10;
+	width:				36px;
+	height:				36px;
+	border-radius:		6px;
+	border:				1px solid var(--theme_g2);
+	background:			var(--theme_g3);
+	color:				var(--theme_g1);
+	cursor:				pointer;
+	display:			flex;
+	align-items:		center;
+	justify-content:	center;
+	font-size:			18px;
+	line-height:		1;
+	transition:			color 0.15s, background 0.15s, border-color 0.15s;
+	user-select:		none;
+}
+
+#zen_theme_toggle:hover {
+	color:				var(--theme_g0);
+	background:			var(--theme_p4);
+	border-color:		var(--theme_g1);
+}
+
 /* page --------------------------------------------------------------------- */
 
-body, input {
-	font-family:	consolas, monospace;
-	font-size:		11pt;
+body, input, button {
+	font-family:	-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+	font-size:		14px;
 }
 
 body {
 	overflow-y:			scroll;
 	margin:				0;
+	padding:			20px;
 	background-color:	var(--theme_g4);
 	color:				var(--theme_g0);
 }
 
-pre {
-	margin:				0;
+pre, code {
+	font-family:	'SF Mono', 'Cascadia Mono', Consolas, 'DejaVu Sans Mono', monospace;
+	font-size:		13px;
+	margin:			0;
 }
 
 input {
 	color:				var(--theme_g0);
 	background-color:	var(--theme_g3);
 	border:				1px solid var(--theme_g2);
+	border-radius:		4px;
+	padding:			4px 8px;
+}
+
+button {
+	color:				var(--theme_g0);
+	background:			transparent;
+	border:				none;
+	cursor:				pointer;
 }
 
 * {
@@ -69,12 +205,10 @@ input {
 }
 
 #container {
-	max-width:				130em;
-	min-width:				80em;
+	max-width:				1400px;
 	margin:					auto;
 
 	> div {
-		margin:				0.0em 2.2em 0.0em 2.2em;
 		padding-top:		1.0em;
 		padding-bottom:		1.5em;
 	}
@@ -84,20 +218,22 @@ input {
 
 #service_nav {
 	display:			flex;
-	justify-content:	center;
-	gap:				0.3em;
-	margin-bottom:		1.5em;
-	padding:			0.3em;
+	align-items:		center;
+	gap:				4px;
+	margin-bottom:		16px;
+	padding:			4px;
 	background-color:	var(--theme_g3);
 	border:				1px solid var(--theme_g2);
-	border-radius:		0.4em;
+	border-radius:		6px;
 
 	a {
-		padding:			0.3em 0.9em;
-		border-radius:		0.3em;
-		font-size:			0.85em;
+		padding:			6px 14px;
+		border-radius:		4px;
+		font-size:			13px;
+		font-weight:		500;
 		color:				var(--theme_g1);
 		text-decoration:	none;
+		transition:			color 0.15s, background 0.15s;
 	}
 
 	a:hover {
@@ -130,28 +266,37 @@ a {
 	}
 
 	h1 {
-		font-size:			1.5em;
+		font-size:			20px;
+		font-weight:		600;
 		width:				100%;
+		color:				var(--theme_bright);
 		border-bottom:		1px solid var(--theme_g2);
+		padding-bottom:		0.4em;
+		margin-bottom:		16px;
 	}
 
 	h2 {
-		font-size:			1.25em;
-		margin-bottom:		0.5em;
+		font-size:			16px;
+		font-weight:		600;
+		margin-bottom:		12px;
 	}
 
 	h3 {
-		font-size:			1.1em;
+		font-size:			14px;
+		font-weight:		600;
 		margin:				0em;
-		padding:			0.4em;
-		background-color:	var(--theme_p4);
-		border-left:		5px solid var(--theme_p2);
-		font-weight:		normal;
+		padding:			8px 12px;
+		background-color:	var(--theme_g3);
+		border:				1px solid var(--theme_g2);
+		border-radius:		6px 6px 0 0;
+		color:				var(--theme_g1);
+		text-transform:		uppercase;
+		letter-spacing:		0.5px;
 	}
 
-	margin-bottom:	3em;
+	margin-bottom:	2em;
 	> *:not(h1) {
-		margin-left:	2em;
+		margin-left:	0;
 	}
 }
 
@@ -161,23 +306,36 @@ a {
 .zen_table {
 	display:				grid;
 	border:					1px solid var(--theme_g2);
-	border-left-style:		none;
+	border-radius:			6px;
+	overflow:				hidden;
 	margin-bottom:			1.2em;
+	font-size:				13px;
 
 	> div {
 		display: contents;
 	}
 
-	> div:nth-of-type(odd) {
+	> div:nth-of-type(odd) > div {
+		background-color:	var(--theme_g4);
+	}
+
+	> div:nth-of-type(even) > div {
 		background-color:	var(--theme_g3);
 	}
 
 	> div:first-of-type {
-		font-weight:		bold;
-		background-color:	var(--theme_p3);
+		font-weight:		600;
+		> div {
+			background-color:	var(--theme_g3);
+			color:				var(--theme_g1);
+			text-transform:		uppercase;
+			letter-spacing:		0.5px;
+			font-size:			11px;
+			border-bottom:		1px solid var(--theme_g2);
+		}
 	}
 
-	> div:hover {
+	> div:not(:first-of-type):hover > div {
 		background-color:	var(--theme_p4);
 	}
 
@@ -187,16 +345,17 @@ a {
 	}
 
 	> div > div {
-		padding:			0.3em;
-		padding-left:		0.75em;
-		padding-right:		0.75em;
+		padding:			8px 12px;
 		align-content:		center;
-		border-left:		1px solid var(--theme_g2);
+		border-left:		1px solid var(--theme_border_subtle);
 		overflow:			auto;
 		overflow-wrap:		break-word;
-		background-color:	inherit;
 		white-space: 		pre-wrap;
 	}
+
+	> div > div:first-child {
+		border-left:		none;
+	}
 }
 
 /* expandable cell ---------------------------------------------------------- */
@@ -215,6 +374,8 @@ a {
 
 .zen_data_text {
 	user-select:            text;
+	font-family:			'SF Mono', 'Cascadia Mono', Consolas, 'DejaVu Sans Mono', monospace;
+	font-size:				13px;
 }
 
 /* toolbar ------------------------------------------------------------------ */
@@ -223,6 +384,7 @@ a {
 	display:			flex;
 	margin-top:			0.5em;
 	margin-bottom:		0.6em;
+	font-size:			13px;
 
 	> div {
 		display:		flex;
@@ -270,15 +432,16 @@ a {
 		z-index:				-1;
 		top:					0;
 		left:					0;
-		width:						100%;
+		width:					100%;
 		height:					100%;
 		background:				var(--theme_g0);
 		opacity:				0.4;
 	}
 
 	> div {
-		border-radius:			0.5em;
-		background-color:		var(--theme_g4);
+		border-radius:			6px;
+		background-color:		var(--theme_g3);
+		border:					1px solid var(--theme_g2);
 		opacity:				1.0;
 		width:					35em;
 		padding:				0em 2em 2em 2em;
@@ -289,10 +452,11 @@ a {
 	}
 
 	.zen_modal_title {
-		font-size:				1.2em;
+		font-size:				16px;
+		font-weight:			600;
 		border-bottom:			1px solid var(--theme_g2);
 		padding:				1.2em 0em 0.5em 0em;
-		color:					var(--theme_g1);
+		color:					var(--theme_bright);
 	}
 
 	.zen_modal_buttons {
@@ -302,16 +466,19 @@ a {
 
 	> div {
 			margin:				0em 1em 0em 1em;
-			padding:			1em;
+			padding:			10px 16px;
 			align-content:		center;
-			border-radius:		0.3em;
-			background-color:	var(--theme_p3);
+			border-radius:		6px;
+			background-color:	var(--theme_p4);
+			border:				1px solid var(--theme_g2);
 			width:				6em;
 			cursor:				pointer;
+			font-weight:		500;
+			transition:			background 0.15s;
 		}
 
 		> div:hover {
-			background-color:	var(--theme_p4);
+			background-color:	var(--theme_p3);
 		}
 	}
 
@@ -329,15 +496,18 @@ a {
 	top:					0;
 	left:					0;
 	width:					100%;
-	height:					0.5em;
+	height:					4px;
+	border-radius:			2px;
+	overflow:				hidden;
 
 	> div:first-of-type {
 		/* label */
 		padding:			0.3em;
-		padding-top:		0.8em;
-		background-color:	var(--theme_p4);
+		padding-top:		8px;
+		background-color:	var(--theme_g3);
 		width:				max-content;
-		font-size:			0.8em;
+		font-size:			12px;
+		color:				var(--theme_g1);
 	}
 
 	> div:last-of-type {
@@ -347,7 +517,8 @@ a {
 		left:				0;
 		width:				0%;
 		height:				100%;
-		background-color:	var(--theme_p1);
+		background-color:	var(--theme_p0);
+		transition:			width 0.3s ease;
 	}
 
 	> div:nth-of-type(2) {
@@ -357,7 +528,7 @@ a {
 		left:				0;
 		width:				100%;
 		height:				100%;
-		background-color:	var(--theme_p3);
+		background-color:	var(--theme_g3);
 	}
 }
 
@@ -366,67 +537,25 @@ a {
 #crumbs {
 	display:			flex;
 	position:			relative;
-	top:				-1em;
+	top:				-0.5em;
+	font-size:			13px;
+	color:				var(--theme_g1);
 
 	> div {
 		padding-right:	0.5em;
 	}
 
 	> div:nth-child(odd)::after {
-		content:		":";
-		font-weight:	bolder;
-		color:			var(--theme_p2);
+		content:		"/";
+		color:			var(--theme_g2);
+		padding-left:	0.5em;
 	}
 }
 
-/* branding ----------------------------------------------------------------- */
-
-#branding {
-	font-size:			10pt;
-	font-weight:		bolder;
-	margin-bottom:		2.6em;
-	position:			relative;
-
-	#logo {
-		width:			min-content;
-		margin:			auto;
-		user-select:	none;
-		position:		relative;
-		display:		flex;
-		align-items:	center;
-		gap:			0.8em;
+/* banner ------------------------------------------------------------------- */
 
-		#zen_icon {
-			width:		3em;
-			height:		3em;
-		}
-
-		#zen_text {
-			font-size:	2em;
-			font-weight:	bold;
-			letter-spacing:	0.05em;
-		}
-
-		#go_home {
-			width:		100%;
-			height:		100%;
-			position:	absolute;
-			top:		0;
-			left:		0;
-		}
-	}
-
-	#logo:hover {
-		filter:			drop-shadow(0 0.15em 0.1em var(--theme_p2));
-	}
-
-	#epic_logo {
-		position:		absolute;
-		top:			1em;
-		right:			0;
-		width:			5em;
-		margin:			auto;
-	}
+zen-banner {
+	margin-bottom:		24px;
 }
 
 /* error -------------------------------------------------------------------- */
@@ -437,26 +566,23 @@ a {
 	z-index:				1;
 	color:					var(--theme_g0);
 	background-color:		var(--theme_er);
-	padding:				1.0em 2em 2em 2em;
+	padding:				12px 20px 16px 20px;
 	width:					100%;
-	border-top:				1px solid var(--theme_g0);
+	border-top:				1px solid var(--theme_g2);
 	display:				flex;
+	gap:					16px;
+	align-items:			center;
+	font-size:				13px;
 
 	> div:nth-child(1) {
-		font-size:			2.5em;
-		font-weight:		bolder;
-		font-family:		serif;
-		transform:			rotate(-13deg);
-		color:				var(--theme_p0);
-	}
-
-	> div:nth-child(2) {
-		margin-left:		2em;
+		font-size:			24px;
+		font-weight:		bold;
+		color:				var(--theme_fail);
 	}
 
 	> div:nth-child(2) > pre:nth-child(2) {
-		margin-top:			0.5em;
-		font-size:			0.8em;
+		margin-top:			4px;
+		font-size:			12px;
 		color:				var(--theme_g1);
 	}
 }
@@ -468,18 +594,144 @@ a {
 	min-width:		15%;
 }
 
+/* sections ----------------------------------------------------------------- */
+
+.zen_sector {
+	position:			relative;
+}
+
+.dropall {
+	position:			absolute;
+	top:				16px;
+	right:				0;
+	font-size:			12px;
+	margin:				0;
+}
+
+/* stats tiles -------------------------------------------------------------- */
+
+.stats-tiles {
+	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+}
+
+.stats-tile {
+	cursor:				pointer;
+	transition:			border-color 0.15s, background 0.15s;
+}
+
+.stats-tile:hover {
+	border-color:		var(--theme_p0);
+	background:			var(--theme_p4);
+}
+
+.stats-tile-detailed {
+	position:			relative;
+}
+
+.stats-tile-detailed::after {
+	content:			"details \203A";
+	position:			absolute;
+	bottom:				12px;
+	right:				20px;
+	font-size:			11px;
+	color:				var(--theme_g1);
+	opacity:			0.6;
+	transition:			opacity 0.15s;
+}
+
+.stats-tile-detailed:hover::after {
+	opacity:			1;
+	color:				var(--theme_p0);
+}
+
+.stats-tile-selected {
+	border-color:		var(--theme_p0);
+	background:			var(--theme_p4);
+	box-shadow:			0 0 0 1px var(--theme_p0);
+}
+
+.stats-tile-selected::after {
+	content:			"details \2039";
+	opacity:			1;
+	color:				var(--theme_p0);
+}
+
+.tile-metrics {
+	display:			flex;
+	flex-direction:		column;
+	gap:				12px;
+}
+
+.tile-columns {
+	display:			flex;
+	gap:				24px;
+}
+
+.tile-columns > .tile-metrics {
+	flex:				1;
+	min-width:			0;
+}
+
+.tile-metric .metric-value {
+	font-size:			16px;
+}
+
+.tile-metric-hero .metric-value {
+	font-size:			28px;
+}
+
 /* start -------------------------------------------------------------------- */
 
 #start {
-	.dropall {
-		text-align:	right;
-		font-size:	0.85em;
-		margin:		-0.5em 0 0.5em 0;
-	}
 	#version {
-		color:		var(--theme_g1);
+		color:		var(--theme_faint);
 		text-align: center;
-		font-size:	0.85em;
+		font-size:	12px;
+		margin-top:	24px;
+	}
+}
+
+/* info --------------------------------------------------------------------- */
+
+#info {
+	.info-tiles {
+		grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+	}
+
+	.info-tile {
+		overflow:			hidden;
+	}
+
+	.info-props {
+		display:			flex;
+		flex-direction:		column;
+		gap:				1px;
+		font-size:			13px;
+	}
+
+	.info-prop {
+		display:			flex;
+		gap:				12px;
+		padding:			4px 0;
+		border-bottom:		1px solid var(--theme_border_subtle);
+	}
+
+	.info-prop:last-child {
+		border-bottom:		none;
+	}
+
+	.info-prop-label {
+		color:				var(--theme_g1);
+		min-width:			140px;
+		flex-shrink:		0;
+		text-transform:		capitalize;
+	}
+
+	.info-prop-value {
+		color:				var(--theme_bright);
+		word-break:			break-all;
+		margin-left:		auto;
+		text-align:			right;
 	}
 }
 
@@ -496,6 +748,8 @@ a {
 /* tree --------------------------------------------------------------------- */
 
 #tree {
+	font-size:					13px;
+
 	#tree_root > ul {
 		margin-left:			0em;
 	}
@@ -507,29 +761,33 @@ a {
 	li > div {
 		display:				flex;
 		border-bottom:			1px solid transparent;
-		padding-left:			0.3em;
-		padding-right:			0.3em;
+		padding:				4px 6px;
+		border-radius:			4px;
 	}
 	li > div > div[active] {
 		text-transform:			uppercase;
+		color:					var(--theme_p0);
+		font-weight:			600;
 	}
 	li > div > div:nth-last-child(3) {
 		margin-left:			auto;
 	}
 	li > div > div:nth-last-child(-n + 3) {
-		font-size:				0.8em;
+		font-size:				12px;
 		width:					10em;
 		text-align:				right;
+		color:					var(--theme_g1);
+		font-family:			'SF Mono', 'Cascadia Mono', Consolas, monospace;
 	}
 	li > div > div:nth-last-child(1) {
 		width:					6em;
 	}
 	li > div:hover {
 		background-color:		var(--theme_p4);
-		border-bottom:			1px solid var(--theme_g2);
+		border-bottom:			1px solid var(--theme_border_subtle);
 	}
 	li a {
-		font-weight:			bolder;
+		font-weight:			600;
 	}
 	li::marker {
 		content:				"+";
@@ -562,3 +820,262 @@ html:has(#map) {
 		}
 	}
 }
+
+/* ========================================================================== */
+/* Shared classes for compute / dashboard pages                               */
+/* ========================================================================== */
+
+/* cards -------------------------------------------------------------------- */
+
+.card {
+	background:			var(--theme_g3);
+	border:				1px solid var(--theme_g2);
+	border-radius:		6px;
+	padding:			20px;
+}
+
+.card-title {
+	font-size:			14px;
+	font-weight:		600;
+	color:				var(--theme_g1);
+	margin-bottom:		12px;
+	text-transform:		uppercase;
+	letter-spacing:		0.5px;
+}
+
+/* grid --------------------------------------------------------------------- */
+
+.grid {
+	display:			grid;
+	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+	gap:				20px;
+	margin-bottom:		24px;
+}
+
+/* metrics ------------------------------------------------------------------ */
+
+.metric-value {
+	font-size:			36px;
+	font-weight:		600;
+	color:				var(--theme_bright);
+	line-height:		1;
+}
+
+.metric-label {
+	font-size:			12px;
+	color:				var(--theme_g1);
+	margin-top:			4px;
+}
+
+/* section titles ----------------------------------------------------------- */
+
+.section-title {
+	font-size:			20px;
+	font-weight:		600;
+	margin-bottom:		16px;
+	color:				var(--theme_bright);
+}
+
+/* html tables (compute pages) ---------------------------------------------- */
+
+table {
+	width:				100%;
+	border-collapse:	collapse;
+	font-size:			13px;
+}
+
+th {
+	text-align:			left;
+	color:				var(--theme_g1);
+	padding:			8px 12px;
+	border-bottom:		1px solid var(--theme_g2);
+	font-weight:		600;
+	text-transform:		uppercase;
+	letter-spacing:		0.5px;
+	font-size:			11px;
+}
+
+td {
+	padding:			8px 12px;
+	border-bottom:		1px solid var(--theme_border_subtle);
+	color:				var(--theme_g0);
+}
+
+tr:last-child td {
+	border-bottom:		none;
+}
+
+.total-row td {
+	border-top:			2px solid var(--theme_g2);
+	font-weight:		600;
+	color:				var(--theme_bright);
+}
+
+/* status badges ------------------------------------------------------------ */
+
+.status-badge {
+	display:			inline-block;
+	padding:			2px 8px;
+	border-radius:		4px;
+	font-size:			11px;
+	font-weight:		600;
+}
+
+.status-badge.active,
+.status-badge.success {
+	background:			color-mix(in srgb, var(--theme_ok) 15%, transparent);
+	color:				var(--theme_ok);
+}
+
+.status-badge.inactive {
+	background:			color-mix(in srgb, var(--theme_g1) 15%, transparent);
+	color:				var(--theme_g1);
+}
+
+.status-badge.failure {
+	background:			color-mix(in srgb, var(--theme_fail) 15%, transparent);
+	color:				var(--theme_fail);
+}
+
+/* health dots -------------------------------------------------------------- */
+
+.health-dot {
+	display:			inline-block;
+	width:				10px;
+	height:				10px;
+	border-radius:		50%;
+	background:			var(--theme_g1);
+}
+
+.health-green {
+	background:			var(--theme_ok);
+}
+
+.health-yellow {
+	background:			var(--theme_warn);
+}
+
+.health-red {
+	background:			var(--theme_fail);
+}
+
+/* inline progress bar ------------------------------------------------------ */
+
+.progress-bar {
+	width:				100%;
+	height:				8px;
+	background:			var(--theme_border_subtle);
+	border-radius:		4px;
+	overflow:			hidden;
+	margin-top:			8px;
+}
+
+.progress-fill {
+	height:				100%;
+	background:			var(--theme_p0);
+	transition:			width 0.3s ease;
+}
+
+/* stats row (label + value pair) ------------------------------------------- */
+
+.stats-row {
+	display:			flex;
+	justify-content:	space-between;
+	margin-bottom:		12px;
+	padding:			8px 0;
+	border-bottom:		1px solid var(--theme_border_subtle);
+}
+
+.stats-row:last-child {
+	border-bottom:		none;
+	margin-bottom:		0;
+}
+
+.stats-label {
+	color:				var(--theme_g1);
+	font-size:			13px;
+}
+
+.stats-value {
+	color:				var(--theme_bright);
+	font-weight:		600;
+	font-size:			13px;
+}
+
+/* detail tag (inline badge) ------------------------------------------------ */
+
+.detail-tag {
+	display:			inline-block;
+	padding:			2px 8px;
+	border-radius:		4px;
+	background:			var(--theme_border_subtle);
+	color:				var(--theme_g0);
+	font-size:			11px;
+	margin:				2px 4px 2px 0;
+}
+
+/* timestamp ---------------------------------------------------------------- */
+
+.timestamp {
+	font-size:			12px;
+	color:				var(--theme_faint);
+}
+
+/* inline error ------------------------------------------------------------- */
+
+.error {
+	color:				var(--theme_fail);
+	padding:			12px;
+	background:			var(--theme_er);
+	border-radius:		6px;
+	margin:				20px 0;
+	font-size:			13px;
+}
+
+/* empty state -------------------------------------------------------------- */
+
+.empty-state {
+	color:				var(--theme_faint);
+	font-size:			13px;
+	padding:			20px 0;
+	text-align:			center;
+}
+
+/* header layout ------------------------------------------------------------ */
+
+.header {
+	display:			flex;
+	justify-content:	space-between;
+	align-items:		center;
+	margin-bottom:		24px;
+}
+
+/* history tabs ------------------------------------------------------------- */
+
+.history-tabs {
+	display:			flex;
+	gap:				4px;
+	background:			var(--theme_g4);
+	border-radius:		6px;
+	padding:			2px;
+}
+
+.history-tab {
+	background:			transparent;
+	color:				var(--theme_g1);
+	font-size:			12px;
+	font-weight:		600;
+	padding:			4px 12px;
+	border-radius:		4px;
+	text-transform:		uppercase;
+	letter-spacing:		0.5px;
+}
+
+.history-tab:hover {
+	color:				var(--theme_g0);
+}
+
+.history-tab.active {
+	background:			var(--theme_g2);
+	color:				var(--theme_bright);
+}
-- 
cgit v1.2.3