Add hostname toggle functionality to Request Breakdown

Adds the ability to expand the hostname breakdown section from the default top 10 to show all hostnames, improving usability for traces with many different domains.

Features:
- Default view shows top 10 hostnames for better performance and readability
- Toggle button to expand/collapse between "top 10" and "all hostnames" views
- Dynamic status text indicating current view and total hostname count
- Styled toggle button matching the page gradient theme with hover effects
- Responsive design with mobile-friendly stacked layout
- State management to preserve user's view preference during session

Benefits:
- Faster initial load by limiting displayed rows
- On-demand access to complete hostname data when needed
- Better UX for traces with many hostnames while maintaining performance

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/components/RequestBreakdown.module.css

@@ -156,6 +156,28 @@
   font-size: 14px;
   text-align: center;
   font-style: italic;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 15px;
+}
+
+.toggleButton {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border: none;
+  padding: 6px 12px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-style: normal;
+}
+
+.toggleButton:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
 }
 
 /* Responsive Design */
@@ -231,4 +253,14 @@
   .progressBar {
     height: 4px;
   }
+
+  .moreInfo {
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .toggleButton {
+    padding: 8px 16px;
+    font-size: 13px;
+  }
 }

src/components/RequestBreakdown.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react'
+import { useMemo, useState } from 'react'
 import { useDatabaseTraceData } from '../hooks/useDatabaseTraceData'
 import { processHTTPRequests } from './httprequestviewer/lib/httpRequestProcessor'
 import { addRequestPostProcessing } from './httprequestviewer/lib/requestPostProcessor'
@@ -34,6 +34,7 @@ interface CategoryBreakdown {
 
 const RequestBreakdown: React.FC<RequestBreakdownProps> = ({ traceId }) => {
   const { traceData, loading, error } = useDatabaseTraceData(traceId)
+  const [showAllHostnames, setShowAllHostnames] = useState(false)
 
   const httpRequests = useMemo(() => {
     if (!traceData) return []
@@ -389,7 +390,7 @@ const RequestBreakdown: React.FC<RequestBreakdownProps> = ({ traceId }) => {
             <span>Response Time %</span>
             <span>Avg Response Time</span>
           </div>
-          {hostnameBreakdown.slice(0, 10).map(item => (
+          {(showAllHostnames ? hostnameBreakdown : hostnameBreakdown.slice(0, 10)).map(item => (
             <div key={item.name} className={styles.tableRow}>
               <span className={styles.categoryName}>{item.name}</span>
               <span>{item.count}</span>
@@ -428,7 +429,27 @@ const RequestBreakdown: React.FC<RequestBreakdownProps> = ({ traceId }) => {
         </div>
         {hostnameBreakdown.length > 10 && (
           <div className={styles.moreInfo}>
-            Showing top 10 of {hostnameBreakdown.length} hostnames
+            {showAllHostnames ? (
+              <>
+                Showing all {hostnameBreakdown.length} hostnames
+                <button 
+                  onClick={() => setShowAllHostnames(false)}
+                  className={styles.toggleButton}
+                >
+                  Show Top 10 Only
+                </button>
+              </>
+            ) : (
+              <>
+                Showing top 10 of {hostnameBreakdown.length} hostnames
+                <button 
+                  onClick={() => setShowAllHostnames(true)}
+                  className={styles.toggleButton}
+                >
+                  Show All Hostnames
+                </button>
+              </>
+            )}
           </div>
         )}
       </div>