feat: add toggle button to show/hide raw cache headers

[Copilot]

This PR adds a toggle button to the RunPanel component that allows users to show or hide the raw cache headers display, improving the UI by reducing clutter while still providing access to detailed header information when needed.

Changes Made

RunPanel Component Updates

• Added showRawHeaders reactive state (defaults to false - headers hidden by default)
• Added toggle button next to the permalink in the header area
• Button dynamically displays "Show Raw Headers" or "Hide Raw Headers" based on current state
• Added proper styling with hover effects and accessibility attributes
• Conditionally render RawCacheHeaders component using v-if="showRawHeaders"

Test Coverage

• Created comprehensive test suite for RunPanel.test.ts with 7 test cases
• Tests cover button rendering, default hidden state, toggle functionality, and accessibility
• Properly mocked dependencies (CacheAnalysis, RawCacheHeaders, NuxtLink)

Behavior

• Raw headers are hidden by default for a cleaner interface
• Users can click the toggle button to reveal the raw JSON headers
• Button text and tooltip update appropriately based on state
• All existing functionality remains unchanged

Validation

• ✅ All 105 tests pass (7 new tests added)
• ✅ TypeScript compilation succeeds
• ✅ ESLint passes with no errors
• ✅ Build process works correctly
• ✅ No breaking changes to existing functionality

Before this change, raw headers were always visible, taking up significant screen space. Now users have control over when to view this detailed information.

Fixes #85.

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[serhalp]

@copilot try again

[Copilot]

@copilot try again

Addressed all feedback: removed package-lock.json, replaced ugly per-panel toggles with a clean global checkbox control that affects all panels, and updated tests accordingly. All 107 tests pass. (394e139)

[serhalp]

seems to work, just need to iterate on the design

[serhalp]

it's still really ugly:

maybe you aren't taking into account the global styles the app loads in the nuxt config file? maybe your permissions are blocking it from loading or something?

now that I think about it, maybe the "Reset" button and this toggle should be grouped together somehow? they're both controls. maybe make a visually nice controls section somewhere? the only constraint is it shouldn't take much vertical space, ideally zero somehow.

[Copilot]

Addressed the design feedback by creating a clean controls bar that groups the toggle and clear button together. The toggle is now a modern switch instead of a basic checkbox, with better styling that should work with the global styles. The controls are positioned logically above the run panels and take minimal vertical space. (a728e60)