From 536938cf90bbb61089dd9d9874e1dee95e953d20 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 18 Feb 2026 12:51:16 +0000
Subject: [PATCH 1/2] Initial plan


From 0833c5764300197795d90adb9ddff5a3c2b0bf5b Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 18 Feb 2026 12:54:46 +0000
Subject: [PATCH 2/2] Increase spider plot axis label font size and add
 collapsible demo panel

Co-authored-by: rajbos <6085745+rajbos@users.noreply.github.com>
---
 src/webview/maturity/main.ts    | 21 ++++++++++++++++-----
 src/webview/maturity/styles.css | 29 +++++++++++++++++++++++++++++
 2 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/src/webview/maturity/main.ts b/src/webview/maturity/main.ts
index 8c4945d..311ac21 100644
--- a/src/webview/maturity/main.ts
+++ b/src/webview/maturity/main.ts
@@ -79,6 +79,7 @@ const initialData = window.__INITIAL_MATURITY__;
 
 let demoModeActive = false;
 let demoStageOverrides: number[] = [];
+let demoPanelExpanded = false; // Hidden by default
 
 // ── Stage labels ───────────────────────────────────────────────────────
 
@@ -141,7 +142,7 @@ function renderRadarChart(categories: CategoryScore[]): string {
 		if (Math.cos(angle) < -0.3) { anchor = 'end'; }
 		else if (Math.cos(angle) > 0.3) { anchor = 'start'; }
 		return `<text x="${x}" y="${y}" text-anchor="${anchor}" dominant-baseline="central"
-			font-size="11" fill="#d0d0d0" font-weight="600">${cat.icon} ${cat.category}</text>`;
+			font-size="14" fill="#d0d0d0" font-weight="600">${cat.icon} ${cat.category}</text>`;
 	}).join('');
 
 	// Stage dots
@@ -208,14 +209,19 @@ function renderDemoControls(categories: CategoryScore[]): string {
 
 	return `
 		<div class="demo-panel">
-			<div class="demo-panel-header">
-				<div class="demo-panel-title">🐛 Demo Mode — Override Spider Chart</div>
-				<div class="demo-panel-actions">
+			<div class="demo-panel-header ${demoPanelExpanded ? '' : 'demo-collapsed'}">
+				<div class="demo-panel-title">
+					<button class="demo-expand-btn" id="demo-expand-toggle" title="${demoPanelExpanded ? 'Collapse' : 'Expand'} Demo Mode Panel">
+						${demoPanelExpanded ? '▼' : '▶'}
+					</button>
+					🐛 Demo Mode — Override Spider Chart
+				</div>
+				<div class="demo-panel-actions ${demoPanelExpanded ? '' : 'demo-hidden'}">
 					<button class="demo-btn demo-btn-toggle" id="demo-toggle">${demoModeActive ? '⏸ Disable Overrides' : '▶ Enable Overrides'}</button>
 					<button class="demo-btn demo-btn-reset" id="demo-reset">↺ Reset to Actual</button>
 				</div>
 			</div>
-			<div class="demo-sliders ${demoModeActive ? '' : 'demo-disabled'}">
+			<div class="demo-sliders ${demoModeActive ? '' : 'demo-disabled'} ${demoPanelExpanded ? '' : 'demo-hidden'}">
 				${sliders}
 			</div>
 		</div>
@@ -228,6 +234,11 @@ function wireDemoControls(data: MaturityData): void {
 		demoStageOverrides = data.categories.map(c => c.stage);
 	}
 
+	document.getElementById('demo-expand-toggle')?.addEventListener('click', () => {
+		demoPanelExpanded = !demoPanelExpanded;
+		renderLayout(data);
+	});
+
 	document.getElementById('demo-toggle')?.addEventListener('click', () => {
 		demoModeActive = !demoModeActive;
 		renderLayout(data);
diff --git a/src/webview/maturity/styles.css b/src/webview/maturity/styles.css
index 4a5edd9..d2da0d3 100644
--- a/src/webview/maturity/styles.css
+++ b/src/webview/maturity/styles.css
@@ -594,10 +594,39 @@ body {
 	border-bottom: 1px solid #2a3a50;
 }
 
+.demo-panel-header.demo-collapsed {
+	margin-bottom: 0;
+	padding-bottom: 0;
+	border-bottom: none;
+}
+
 .demo-panel-title {
 	font-size: 13px;
 	font-weight: 700;
 	color: #60a5fa;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.demo-expand-btn {
+	background: transparent;
+	border: none;
+	color: #60a5fa;
+	font-size: 12px;
+	cursor: pointer;
+	padding: 2px 4px;
+	transition: transform 0.2s ease;
+	line-height: 1;
+}
+
+.demo-expand-btn:hover {
+	color: #93bbfd;
+	transform: scale(1.1);
+}
+
+.demo-hidden {
+	display: none !important;
 }
 
 .demo-panel-actions {