Improve fluency score view: larger spider chart labels and collapsible demo panel

[Copilot]

Spider chart axis labels were too small to read comfortably. Demo mode panel (debug-only) was always expanded, creating visual clutter.

Changes

Spider chart readability

• Increased axis label font size from 11px to 14px in renderRadarChart()

Demo panel collapse/expand

• Added demoPanelExpanded state (default: false)
• Added expand/collapse button (▶/▼) in panel header
• Applied .demo-hidden class to hide actions and sliders when collapsed
• Applied .demo-collapsed class to header for minimal appearance when collapsed

// New state variable
let demoPanelExpanded = false; // Hidden by default

// Expand button wired to toggle state
document.getElementById('demo-expand-toggle')?.addEventListener('click', () => {
  demoPanelExpanded = !demoPanelExpanded;
  renderLayout(data);
});

CSS additions

• .demo-expand-btn: Transparent button with hover scale effect
• .demo-hidden: display: none !important utility
• .demo-panel-header.demo-collapsed: Removes padding/border when collapsed

Debug-mode gating unchanged—panel only appears when debugger is attached.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Fluency score view improvements</issue_title>
<issue_description>On the fluency view, I want to make these adjustments:

• Make the text size bigger on the spider plot: very hard to read the different axis as is
• Add an option to open/close the demo mode panel, and hide it by default. Of course this things is only visible when an active debugger is attached.</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Fluency score view improvements #245

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.