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

app/components/RunPanel.test.ts

@@ -0,0 +1,179 @@
+/**
+ * @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,
+}
+
+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('shows toggle button for raw headers', () => {
+    const wrapper = mount(RunPanel, {
+      props: mockProps,
+      global: {
+        stubs: {
+          NuxtLink: {
+            template: '<a :href="to"><slot /></a>',
+            props: ['to'],
+          },
+        },
+      },
+    })
+
+    const toggleButton = wrapper.find('.toggle-raw-headers')
+    expect(toggleButton.exists()).toBe(true)
+    expect(toggleButton.text()).toBe('Show Raw Headers')
+  })
+
+  it('hides raw headers by default', () => {
+    const wrapper = mount(RunPanel, {
+      props: mockProps,
+      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 toggle button is clicked', async () => {
+    const wrapper = mount(RunPanel, {
+      props: mockProps,
+      global: {
+        stubs: {
+          NuxtLink: {
+            template: '<a :href="to"><slot /></a>',
+            props: ['to'],
+          },
+        },
+      },
+    })
+
+    const toggleButton = wrapper.find('.toggle-raw-headers')
+    await toggleButton.trigger('click')
+
+    expect(wrapper.find('.raw-cache-headers-mock').exists()).toBe(true)
+    expect(toggleButton.text()).toBe('Hide Raw Headers')
+  })
+
+  it('hides raw headers when toggle button is clicked twice', async () => {
+    const wrapper = mount(RunPanel, {
+      props: mockProps,
+      global: {
+        stubs: {
+          NuxtLink: {
+            template: '<a :href="to"><slot /></a>',
+            props: ['to'],
+          },
+        },
+      },
+    })
+
+    const toggleButton = wrapper.find('.toggle-raw-headers')
+
+    // Click to show
+    await toggleButton.trigger('click')
+    expect(wrapper.find('.raw-cache-headers-mock').exists()).toBe(true)
+    expect(toggleButton.text()).toBe('Hide Raw Headers')
+
+    // Click to hide
+    await toggleButton.trigger('click')
+    expect(wrapper.find('.raw-cache-headers-mock').exists()).toBe(false)
+    expect(toggleButton.text()).toBe('Show Raw Headers')
+  })
+
+  it('updates button title attribute based on state', async () => {
+    const wrapper = mount(RunPanel, {
+      props: mockProps,
+      global: {
+        stubs: {
+          NuxtLink: {
+            template: '<a :href="to"><slot /></a>',
+            props: ['to'],
+          },
+        },
+      },
+    })
+
+    const toggleButton = wrapper.find('.toggle-raw-headers')
+
+    // Initial state
+    expect(toggleButton.attributes('title')).toBe('Show raw headers')
+
+    // After clicking to show
+    await toggleButton.trigger('click')
+    expect(toggleButton.attributes('title')).toBe('Hide raw headers')
+
+    // After clicking to hide again
+    await toggleButton.trigger('click')
+    expect(toggleButton.attributes('title')).toBe('Show raw headers')
+  })
+})

app/components/RunPanel.vue

@@ -7,6 +7,12 @@ const props = defineProps<{
   cacheHeaders: Record<string, string>
   enableDiffOnHover: boolean
 }>()
+
+const showRawHeaders = ref(false)
+
+const toggleRawHeaders = () => {
+  showRawHeaders.value = !showRawHeaders.value
+}
 </script>
 
 <template>
@@ -15,21 +21,33 @@ const props = defineProps<{
 
     <div class="flex-btwn">
       <small>HTTP {{ props.status }} ({{ props.durationInMs }} ms)</small>
-      <NuxtLink
-        :to="`/run/${props.runId}`"
-        class="run-permalink"
-        title="Share this run"
-        target="_blank"
-      >
-        🔗 Permalink
-      </NuxtLink>
+      <div class="panel-actions">
+        <button
+          class="toggle-raw-headers"
+          :title="showRawHeaders ? 'Hide raw headers' : 'Show raw headers'"
+          @click="toggleRawHeaders"
+        >
+          {{ showRawHeaders ? 'Hide Raw Headers' : 'Show Raw Headers' }}
+        </button>
+        <NuxtLink
+          :to="`/run/${props.runId}`"
+          class="run-permalink"
+          title="Share this run"
+          target="_blank"
+        >
+          🔗 Permalink
+        </NuxtLink>
+      </div>
     </div>
 
     <CacheAnalysis
       :cache-headers="props.cacheHeaders"
       :enable-diff-on-hover="props.enableDiffOnHover"
     />
-    <RawCacheHeaders :cache-headers="props.cacheHeaders" />
+    <RawCacheHeaders
+      v-if="showRawHeaders"
+      :cache-headers="props.cacheHeaders"
+    />
   </div>
 </template>
 
@@ -48,6 +66,26 @@ const props = defineProps<{
   align-self: start;
 }
 
+.panel-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+}
+
+.toggle-raw-headers {
+  background: none;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 0.25em 0.5em;
+  font-size: 0.7em;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.toggle-raw-headers:hover {
+  background-color: rgba(59, 130, 246, 0.1);
+}
+
 .run-permalink {
   align-self: flex-end;
   font-size: 0.7em;