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

app/components/RunDisplay.test.ts

@@ -10,8 +10,8 @@
 vi.mock('./RunPanel.vue', () => ({
   default: {
     name: 'RunPanel',
-    template: '<div class="run-panel-mock">{{ runId }}</div>',
-    props: ['runId', 'url', 'status', 'durationInMs', 'cacheHeaders'],
+    template: '<div class="run-panel-mock">{{ runId }}-{{ showRawHeaders }}</div>',
+    props: ['runId', 'url', 'status', 'durationInMs', 'cacheHeaders', 'enableDiffOnHover', 'showRawHeaders'],
   },
 }))
 
@@ -74,8 +74,58 @@
 
     const runPanels = wrapper.findAll('.run-panel-mock')
     expect(runPanels).toHaveLength(2)
-    expect(runPanels[0]?.text()).toBe('test-run-1')
-    expect(runPanels[1]?.text()).toBe('test-run-2')
+    expect(runPanels[0]?.text()).toBe('test-run-1-false')
+    expect(runPanels[1]?.text()).toBe('test-run-2-false')
+  })
+
+  it('shows raw headers toggle when runs exist', () => {
+    const wrapper = mount(RunDisplay, {
+      props: {
+        runs: mockRuns,
+        error: null,
+        loading: false,
+        onClear: vi.fn(),
+      },
+    })
+
+    const toggleLabel = wrapper.find('.toggle-raw-headers-label')
+    expect(toggleLabel.exists()).toBe(true)
+    expect(toggleLabel.text()).toBe('Show raw headers')
+
+    const checkbox = wrapper.find('.toggle-raw-headers-checkbox')
+    expect(checkbox.exists()).toBe(true)
+    expect((checkbox.element as HTMLInputElement).checked).toBe(false)
+  })
+
+  it('hides raw headers toggle when no runs exist', () => {
+    const wrapper = mount(RunDisplay, {
+      props: {
+        runs: [],
+        error: null,
+        loading: false,
+        onClear: vi.fn(),
+      },
+    })
+
+    expect(wrapper.find('.toggle-raw-headers-label').exists()).toBe(false)
+  })
+
+  it('passes showRawHeaders prop to run panels when toggled', async () => {
+    const wrapper = mount(RunDisplay, {
+      props: {
+        runs: mockRuns,
+        error: null,
+        loading: false,
+        onClear: vi.fn(),
+      },
+    })
+
+    const checkbox = wrapper.find('.toggle-raw-headers-checkbox')
+    await checkbox.setValue(true)
+
+    const runPanels = wrapper.findAll('.run-panel-mock')
+    expect(runPanels[0]?.text()).toBe('test-run-1-true')
+    expect(runPanels[1]?.text()).toBe('test-run-2-true')
   })
 
   it('shows clear button when runs exist', () => {

app/components/RunDisplay.vue

@@ -7,6 +7,8 @@ defineProps<{
   loading: boolean
   onClear: () => void
 }>()
+
+const showRawHeaders = ref(false)
 </script>
 
 <template>
@@ -25,12 +27,27 @@ defineProps<{
       {{ error }}
     </div>
 
+    <div
+      v-if="runs.length > 0"
+      class="controls-container"
+    >
+      <label class="toggle-raw-headers-label">
+        <input
+          v-model="showRawHeaders"
+          type="checkbox"
+          class="toggle-raw-headers-checkbox"
+        />
+        <span class="toggle-raw-headers-text">Show raw headers</span>
+      </label>
+    </div>
+
     <div class="flex-btwn run-panels">
       <RunPanel
         v-for="(run, i) in runs"
         v-bind="run"
         :key="i"
         :enable-diff-on-hover="runs.length > 1"
+        :show-raw-headers="showRawHeaders"
       />
     </div>
 
@@ -60,12 +77,40 @@ defineProps<{
 .run-panels {
   flex-wrap: wrap;
   align-items: stretch;
+  margin-top: 1em;
 }
 
 .run-panels>* {
   flex: 1 1 20em;
 }
 
+.controls-container {
+  display: flex;
+  justify-content: center;
+  padding: 1em 0;
+  border-bottom: 1px solid #e5e7eb;
+  margin-bottom: 1em;
+}
+
+.toggle-raw-headers-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+  cursor: pointer;
+  font-size: 0.9em;
+  user-select: none;
+}
+
+.toggle-raw-headers-checkbox {
+  width: 1.2em;
+  height: 1.2em;
+  cursor: pointer;
+}
+
+.toggle-raw-headers-text {
+  color: #374151;
+}
+
 .reset-container {
   text-align: center;
   background-color: inherit;

app/components/RunPanel.test.ts

@@ -0,0 +1,105 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import RunPanel from './RunPanel.vue'
+
+// Mock the components that RunPanel uses
+vi.mock('./CacheAnalysis.vue', () => ({
+  default: {
+    name: 'CacheAnalysis',
+    template: '<div class="cache-analysis-mock">Cache Analysis</div>',
+  },
+}))
+
+vi.mock('./RawCacheHeaders.vue', () => ({
+  default: {
+    name: 'RawCacheHeaders',
+    template: '<div class="raw-cache-headers-mock">Raw Cache Headers</div>',
+  },
+}))
+
+const mockProps = {
+  runId: 'test-run-id',
+  url: 'https://example.com',
+  status: 200,
+  durationInMs: 150,
+  cacheHeaders: {
+    'cache-control': 'max-age=3600',
+    'etag': '"abc123"',
+  },
+  enableDiffOnHover: false,
+  showRawHeaders: false,
+}
+
+describe('RunPanel', () => {
+  it('renders basic information correctly', () => {
+    const wrapper = mount(RunPanel, {
+      props: mockProps,
+      global: {
+        stubs: {
+          NuxtLink: {
+            template: '<a :href="to"><slot /></a>',
+            props: ['to'],
+          },
+        },
+      },
+    })
+
+    expect(wrapper.text()).toContain('https://example.com')
+    expect(wrapper.text()).toContain('HTTP 200 (150 ms)')
+    expect(wrapper.find('.cache-analysis-mock').exists()).toBe(true)
+  })
+
+  it('renders permalink correctly', () => {
+    const wrapper = mount(RunPanel, {
+      props: mockProps,
+      global: {
+        stubs: {
+          NuxtLink: {
+            template: '<a :href="to"><slot /></a>',
+            props: ['to'],
+          },
+        },
+      },
+    })
+
+    const permalink = wrapper.find('.run-permalink')
+    expect(permalink.exists()).toBe(true)
+    expect(permalink.attributes('href')).toBe('/run/test-run-id')
+    expect(permalink.text()).toBe('🔗 Permalink')
+  })
+
+  it('hides raw headers when showRawHeaders prop is false', () => {
+    const wrapper = mount(RunPanel, {
+      props: { ...mockProps, showRawHeaders: false },
+      global: {
+        stubs: {
+          NuxtLink: {
+            template: '<a :href="to"><slot /></a>',
+            props: ['to'],
+          },
+        },
+      },
+    })
+
+    expect(wrapper.find('.raw-cache-headers-mock').exists()).toBe(false)
+  })
+
+  it('shows raw headers when showRawHeaders prop is true', () => {
+    const wrapper = mount(RunPanel, {
+      props: { ...mockProps, showRawHeaders: true },
+      global: {
+        stubs: {
+          NuxtLink: {
+            template: '<a :href="to"><slot /></a>',
+            props: ['to'],
+          },
+        },
+      },
+    })
+
+    expect(wrapper.find('.raw-cache-headers-mock').exists()).toBe(true)
+  })
+})

app/components/RunPanel.vue

@@ -6,6 +6,7 @@ const props = defineProps<{
   durationInMs: number
   cacheHeaders: Record<string, string>
   enableDiffOnHover: boolean
+  showRawHeaders: boolean
 }>()
 </script>
 
@@ -29,7 +30,10 @@ const props = defineProps<{
       :cache-headers="props.cacheHeaders"
       :enable-diff-on-hover="props.enableDiffOnHover"
     />
-    <RawCacheHeaders :cache-headers="props.cacheHeaders" />
+    <RawCacheHeaders
+      v-if="props.showRawHeaders"
+      :cache-headers="props.cacheHeaders"
+    />
   </div>
 </template>