WIP: add real data mode to graph debug playground

Connect the graph debug playground to live zenstore API data via
project/oplog URL parameters. Builds a path prefix tree from the
indexer as the entry point for navigating large oplogs (1M+ entries).

- dual-mode: no params = existing synthetic mode, with params = real data
- prefix tree built from indexer.enum_all(), shown as group nodes
- group nodes expand into sub-groups or individual entries
- entry nodes fetch deps via CBO API with legacy fallback
- dep IDs resolved via indexer.lookup_id() with hex fallback
- async expansion with loading pulse animation
- has_deps pre-check for children (same pattern as graph.js)

Still TODO: testing with live data, edge cases, polish.

Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

1 files changed, 207 insertions, 62 deletions

diff --git a/src/zenserver/frontend/html/zen.css b/src/zenserver/frontend/html/zen.css
index ad64bef85..6e54adc87 100644
--- a/src/zenserver/frontend/html/zen.css
+++ b/src/zenserver/frontend/html/zen.css
@@ -489,71 +489,74 @@ a {
 			text-decoration: underline;
 		}
 	}
-	.zen_minigraph {
-		position:			relative;
-		display:			flex;
-		height:				20em;
-		canvas {
-			flex:			1;
-			min-width:		0;
-			border:			1px solid var(--theme_g2);
-			cursor:			grab;
-		}
-		canvas:active {
-			cursor:			grabbing;
-		}
-		.minigraph_splitter {
-			width:						4px;
-			cursor:						col-resize;
-			background-color:			var(--theme_g2);
-			flex-shrink:				0;
-			&:hover, &.active {
-				background-color:		var(--theme_p1);
-			}
-		}
-		.minigraph_props {
-			width:						18em;
-			flex-shrink:				0;
-			border:						1px solid var(--theme_g2);
-			border-left:				none;
-			padding:					0.5em 0.6em;
-			font-size:					0.85em;
-			overflow-y:					auto;
-			.minigraph_props_empty {
-				color:					var(--theme_g1);
-				padding:				1em 0;
-				text-align:				center;
-			}
-			.minigraph_props_row {
-				display:				flex;
-				padding:				0.15em 0;
-			}
-			.minigraph_props_label {
-				color:					var(--theme_g1);
-				min-width:				8em;
-			}
-			.minigraph_props_row > span:last-child {
-				overflow:				hidden;
-				text-overflow:			ellipsis;
-				white-space:			nowrap;
-			}
+}
+
+/* minigraph (shared by entry + artifactdeps) ------------------------------- */
+
+.zen_minigraph {
+	position:			relative;
+	display:			flex;
+	height:				20em;
+	canvas {
+		flex:			1;
+		min-width:		0;
+		border:			1px solid var(--theme_g2);
+		cursor:			grab;
+	}
+	canvas:active {
+		cursor:			grabbing;
+	}
+	.minigraph_splitter {
+		width:						4px;
+		cursor:						col-resize;
+		background-color:			var(--theme_g2);
+		flex-shrink:				0;
+		&:hover, &.active {
+			background-color:		var(--theme_p1);
 		}
 	}
-	.minigraph_legend {
-		display:					flex;
-		gap:						1.5em;
-		margin-top:					0.5em;
+	.minigraph_props {
+		width:						18em;
+		flex-shrink:				0;
+		border:						1px solid var(--theme_g2);
+		border-left:				none;
+		padding:					0.5em 0.6em;
 		font-size:					0.85em;
-		> div {
+		overflow-y:					auto;
+		.minigraph_props_empty {
+			color:					var(--theme_g1);
+			padding:				1em 0;
+			text-align:				center;
+		}
+		.minigraph_props_row {
 			display:				flex;
-			align-items:			center;
-			gap:					0.3em;
+			padding:				0.15em 0;
 		}
-		.legend_swatch {
-			width:					1.5em;
-			height:					0.3em;
-			display:				inline-block;
+		.minigraph_props_label {
+			color:					var(--theme_g1);
+			min-width:				8em;
 		}
+		.minigraph_props_row > span:last-child {
+			overflow:				hidden;
+			text-overflow:			ellipsis;
+			white-space:			nowrap;
+		}
+	}
+}
+.minigraph_legend {
+	display:					flex;
+	gap:						1.5em;
+	margin-top:					0.5em;
+	font-size:					0.85em;
+	> div {
+		display:				flex;
+		align-items:			center;
+		gap:					0.3em;
+	}
+	.legend_swatch {
+		width:					1.5em;
+		height:					0.3em;
+		display:				inline-block;
 	}
 }
 
@@ -629,13 +632,13 @@ html:has(#map) {
 
 /* graph -------------------------------------------------------------------- */
 
-html:has(#graph) {
+html:has(#graph), html:has(#graph-debug-playground) {
 	height: 100%;
-	body, #container, #graph {
+	body, #container, #graph, #graph-debug-playground {
 		height:						100%;
 	}
 }
-#graph {
+#graph, #graph-debug-playground {
 	#graph_view {
 		position:					relative;
 		display:					flex;
@@ -650,8 +653,18 @@ html:has(#graph) {
 			cursor:					grabbing;
 		}
 	}
+	#graph_splitter {
+		width:						4px;
+		cursor:						col-resize;
+		background-color:			var(--theme_g2);
+		flex-shrink:				0;
+		&:hover, &.active {
+			background-color:		var(--theme_p1);
+		}
+	}
 	#graph_entries {
 		width:						22em;
+		flex-shrink:				0;
 		border:						1px solid var(--theme_g2);
 		border-left:				none;
 		display:					flex;
@@ -736,6 +749,7 @@ html:has(#graph) {
 	}
 	#graph_legend {
 		display:					flex;
+		align-items:				flex-start;
 		gap:						1.5em;
 		margin-top:					0.5em;
 		font-size:					0.85em;
@@ -749,5 +763,136 @@ html:has(#graph) {
 			height:					0.3em;
 			display:				inline-block;
 		}
+		.legend_pill {
+			cursor:				pointer;
+			user-select:		none;
+			padding:			0.1em 0.5em;
+			border-radius:		0.6em;
+			border:				1px solid var(--theme_g2);
+			color:				var(--theme_g1);
+			font-size:			0.9em;
+			&:hover {
+				border-color:	var(--theme_p1);
+				color:			var(--theme_g0);
+			}
+			&.active {
+				background-color: var(--theme_p0);
+				border-color:	var(--theme_p0);
+				color:			var(--theme_g4);
+			}
+		}
+		#graph_readme {
+			margin-left:			auto;
+			position:				relative;
+			.graph_readme_toggle {
+				cursor:				pointer;
+				color:				var(--theme_g1);
+				user-select:		none;
+				&:hover {
+					color:			var(--theme_g0);
+				}
+			}
+			.graph_readme_body {
+				display:			none;
+				position:			absolute;
+				right:				0;
+				bottom:				1.6em;
+				width:				max-content;
+				background-color:	var(--theme_g3);
+				border:				1px solid var(--theme_g2);
+				border-radius:		6px;
+				box-shadow:			2px 4px 12px rgba(0,0,0,0.3);
+				padding:			0.6em 0.8em;
+				color:				var(--theme_g1);
+				line-height:		1.5;
+				z-index:			100;
+				b {
+					color:			var(--theme_g0);
+					font-weight:	normal;
+				}
+				p {
+					margin:			0.3em 0;
+				}
+			}
+			&.open .graph_readme_body {
+				display:			block;
+			}
+		}
+	}
+}
+
+/* loading overlay --------------------------------------------------------- */
+
+#graph-debug-playground .graph_loading {
+	position:						absolute;
+	top:							50%;
+	left:							50%;
+	transform:						translate(-50%, -50%);
+	color:							var(--theme_g1);
+	font:							11px consolas, monospace;
+	z-index:						100;
+	pointer-events:					none;
+}
+
+/* stress overlay ----------------------------------------------------------- */
+
+#graph-debug-playground #stress_overlay {
+	position:						absolute;
+	top:							8px;
+	left:							8px;
+	z-index:						500;
+	background-color:				rgba(0, 0, 0, 0.8);
+	color:							#4f4;
+	font:							11px consolas, monospace;
+	padding:						8px 12px;
+	border-radius:					6px;
+	pointer-events:					none;
+	max-height:						50%;
+	overflow-y:						auto;
+	white-space:					pre;
+	.stress_current {
+		color:						#ff4;
+	}
+	.stress_pass {
+		color:						#4f4;
+	}
+	.stress_fail {
+		color:						#f44;
+	}
+	.stress_summary {
+		color:						#fff;
+		border-top:					1px solid rgba(255, 255, 255, 0.3);
+		margin-top:					4px;
+		padding-top:				4px;
+	}
+}
+
+/* graph context menu ------------------------------------------------------ */
+
+.graph_ctxmenu {
+	position:						absolute;
+	z-index:						1000;
+	background-color:				var(--theme_g3);
+	border:							1px solid var(--theme_g2);
+	border-radius:					6px;
+	box-shadow:						2px 4px 12px rgba(0,0,0,0.3);
+	padding:						4px 0;
+	font:							11px consolas, monospace;
+	user-select:					none;
+	.graph_ctxmenu_item {
+		padding:					6px 14px;
+		cursor:						pointer;
+		white-space:				nowrap;
+		color:						var(--theme_g0);
+		&:hover {
+			background-color:		var(--theme_p3);
+		}
+	}
+	.graph_ctxmenu_disabled {
+		padding:					6px 14px;
+		white-space:				nowrap;
+		color:						var(--theme_g1);
+		opacity:					0.4;
+		pointer-events:				none;
 	}
 }