Enhance all breakdown sections (Resource Type, Status Code, Hostname) with:
- Clickable column headers for sorting by any field
- Visual sort indicators: neutral (⇅), ascending (▲), descending (▼)
- Interactive tooltips showing current sort state and available actions
- Default sort by request count in descending order
- Toggle between ascending/descending by clicking same column
- Consistent styling with brand colors and hover effects
- Proper flexbox layout for icon positioning
All 8 columns are sortable: name, count, count %, size, size %,
response time, response time %, and average response time.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Move RequestBreakdown.tsx and module CSS into RequestBreakdown/ directory:
- RequestBreakdown.tsx → RequestBreakdown/index.tsx
- RequestBreakdown.module.css → RequestBreakdown/RequestBreakdown.module.css
- Update all import paths to work with new directory structure
- Maintain existing functionality with cleaner organization
All RequestBreakdown-related components now co-located for better maintainability.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Extract breakdown sections into separate components for better maintainability:
- ResourceTypeBreakdown: handles resource type analysis and visualization
- StatusCodeBreakdown: handles status code analysis and visualization
- HostnameBreakdown: handles hostname analysis with toggle functionality
- RequestDataSummary: statistics cards component (previously extracted)
- BreakdownTableHeader: shared table header component (previously extracted)
Main RequestBreakdown component reduced from ~420 to ~90 lines with improved separation of concerns.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Enhances the visual presentation and usability of the Request Breakdown page with improved typography and column constraints.
Changes:
- Update header colors (h2, h3) from #333 to white for better contrast against dark backgrounds
- Fix category column text wrapping with intelligent word breaking and proper line height
- Add table layout constraints to prevent horizontal overflow
- Improve mobile typography with responsive font sizing for category names
- Add hyphenation support for long hostnames and domain names
Benefits:
- Better accessibility and readability with higher contrast headers
- Prevents table layout issues with long hostnames
- Maintains responsive design across all screen sizes
- Professional appearance with consistent text handling
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
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>
Changes progress bar fill color from green gradient to the purple-blue gradient used in the overview statistics cards for consistent visual design across the Request Breakdown page.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Enhances the breakdown tables with comprehensive percentage analysis across three dimensions: request count, data size, and response time.
Features:
- Size Percentage column showing data transfer distribution
- Response Time Percentage column showing performance impact distribution
- Visual progress bars for all percentage columns (Count %, Size %, Response Time %)
- Updated grid layout to accommodate 8-column structure
- Responsive design updates for mobile compatibility
- Clear column headers with abbreviated labels for better readability
This enables three-dimensional analysis to identify:
- Categories with high request counts but low data usage
- Categories consuming disproportionate bandwidth
- Performance bottlenecks with high cumulative response times
- Optimization opportunities across all metrics
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Introduces new breakdown page that provides detailed statistics and visualizations for HTTP request data analysis across multiple dimensions.
Features:
- Overall statistics dashboard (total requests, size, success rate, cache hit rate)
- Resource type breakdown with visual progress bars
- Status code analysis by HTTP status categories
- Hostname breakdown showing top 10 domains
- Total and average response time metrics
- Responsive design with mobile-friendly layouts
- Added to main navigation as "Request Breakdown" tab
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Corrects CSV export to properly include timing data by accessing nested timing properties and calculating derived values like DNS time, connection time, and data rate. Headers now include units (μs, bytes, bytes/sec) for clarity.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Enables users to download filtered HTTP request data as CSV files with comprehensive data including timing, sizes, CDN analysis, and queue analysis.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Replace getTotalResponseTimeColor() inline styles with getTotalResponseTimeClass() CSS classes
- Add CSS overrides in RequestRowDetails.module.css to remove background colors from status classes
- Ensure danger, warning, and success indicators only affect text color, not background
- Maintain consistent component background styling throughout expanded details
- Use \!important declarations to override inherited status class background properties
- Preserve semantic color meanings (green=success, orange=warning, red=danger) for text only
Technical changes:
- Import getTotalResponseTimeClass instead of getTotalResponseTimeColor in RequestRowDetails.tsx
- Add CSS rules targeting .detailListItem and .timingHighlighted with status classes
- Set background-color: transparent \!important for all status class combinations
- Apply color variables (--color-success, --color-warning, --color-danger) to text only
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Create ColumnSettings component with collapsible panel and organized column groups
- Implement localStorage persistence for column visibility preferences across sessions
- Add default visible columns: expand, url, start time, total response time, data rate, content-length
- Group columns by category: Basic, Connection, Timing, Performance, Advanced
- Provide bulk actions: Show All, Hide All, Reset to Defaults
- Add conditional rendering for all table headers and cells based on visibility state
- Update RequestRowDetails to dynamically calculate colSpan based on visible columns
- Create responsive grid layout for column settings with hover effects
- Use CSS modules with App.css variables for consistent theming
- Implement type-safe column management with proper TypeScript interfaces
Features:
- 🎛️ Gear icon toggle button for easy access to column settings
- 📁 Logical grouping of related columns for better organization
- 💾 Automatic persistence of user preferences in localStorage
- 🎯 Clean default view showing only essential columns
- 🔧 Flexible customization allowing users to show exactly what they need
- 📱 Responsive design that adapts to different screen sizes
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Extract connectionId from Chrome DevTools trace data in ResourceSendRequest and ResourceReceiveResponse events
- Create connectionUtils to assign sequential connection numbers (1, 2, 3...) based on chronological first-seen order
- Add Connection # and Request # columns between URL and Start Time in requests table
- Implement request numbering within each connection ordered by start time
- Add comprehensive tooltips explaining connection behavior across HTTP versions:
* HTTP/1.1: Traditional connections with 6-connection limit per domain
* HTTP/2: Single connection with multiplexing capability
* HTTP/3: QUIC stream groupings instead of TCP connections
- Update HTTPRequest interface with connectionId, connectionNumber, and requestNumberOnConnection fields
- Integrate connection processing into HTTPRequestViewer pipeline
- Update RequestRowDetails colSpan to accommodate new columns
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add CSS rules to disable filter brightness effects on expanded request rows
- Prevent RequestRowDetails from inheriting tbody tr:hover lightening behavior
- Maintain intended background color and remove unwanted border changes on hover
- Apply hover overrides to both row and cell elements for complete coverage
- Ensure expanded row details maintain consistent appearance during interaction
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add comprehensive header layout with appHeader, headerLeft, and backButton classes
- Implement prominent navigation buttons with hover effects and active state indicators
- Add app title with proper typography styling using CSS variables
- Create navButton class with blue primary color scheme, transitions, and shadow effects
- Add active state visual feedback with bottom border triangle indicator
- Use CSS variables from App.css for consistent theming and maintainability
- Improve responsive layout with flexbox positioning and proper spacing
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add getPriorityIcon() function with visual priority indicators:
🔥 VeryHigh, 🔺 High, 🟡 Medium, 🔹 Low, 🐢 VeryLow
- Display priority icons in both table rows and detail view
- Add priorityCell CSS class with fixed width and no-wrap styling
- Update tooltip to show icon legend for all priority levels
- Enhance table hover effects with brightness filter and dashed borders
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add dark theme variables and standardized status classes to App.module.css
- Convert RequestRowSummary to use CSS modules with success/warning/danger classes
- Replace inline styles with class-based styling for better theme compatibility
- Enhance RequestRowDetails header display with monospace font and hover tooltips
- Implement proper header name/value layout with grid system and overflow handling
- Remove deprecated CSS files and consolidate styling approach
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add Data Rate column between Duration and Size in HTTP requests table
- Implement formatDataRate function that prefers content-length over transfer size
- Add color coding for data rate: green (≥1 MB/s), yellow (100 KB/s - 1 MB/s), red (<100 KB/s)
- Add comprehensive tooltip definition for data rate column
- Reorder columns: Server Latency → Duration → Total Response Time → Data Rate → Size
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Reorder table headers: URL now appears after Priority, before Start Time
- Update RequestRowSummary component to match new column order
- Improved table layout with URL positioned earlier for better visibility
- Maintains all existing functionality and styling
New column order:
Expand | Method | Status | Type | Priority | URL | Start Time | Queue Time | DNS | Connection | Server Latency | Duration | Total Response Time | Size | Content-Length | Protocol | CDN | Cache
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Change Duration from network transfer time to client-side time
- Duration = Total Response Time - Server Latency
- This includes queuing, DNS, connection, SSL, and download time
- Excludes server processing time, giving clearer client-side optimization insights
- Add downloadTime field for pure response body transfer time
- Update tooltip definition to reflect new calculation meaning
Mathematical verification:
- Total Response Time = Queue + DNS + Connection + SSL + Server + Download
- Server Latency = Server processing time only
- Duration = Total - Server = Queue + DNS + Connection + SSL + Download
This provides more meaningful client-side performance metrics for optimization.
Duration now represents time the browser spends vs. time the server spends.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Change calculation from lastDataTimestamp - sendRequest.ts to lastDataTimestamp - timing.start
- timing.start includes the earliest request event (ResourceWillSendRequest) with queuing
- sendRequest.ts only starts from ResourceSendRequest which skips queuing time
- Total response time now correctly represents wall clock time from request initiation to completion
- Fixes issue where total response time was incorrectly shorter than individual request duration
- Maintains fallback to sendRequest timestamp if timing.start unavailable
This resolves the discrepancy where total response time (3.4ms) was impossibly faster
than request duration (87.2ms) for request ID CFE45B40FA39328019033E8AC78DB909.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Use React.lazy() and Suspense for BabylonViewer and BabylonTimelineViewer
- Reduce main bundle size from 7.4MB to 336KB (95% reduction)
- Split Babylon.js into separate chunk loaded only when 3D views are selected
- Add ThreeDViewerLoading component with spinner for better UX
- Babylon.js libraries now load on-demand when user clicks 3D view toggles
Bundle optimization results:
- Main bundle: 336KB (was 7.4MB)
- Babylon chunk: 7MB (lazy-loaded)
- BabylonViewer: 3.6KB (lazy-loaded)
- BabylonTimelineViewer: 6.6KB (lazy-loaded)
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Extend path routing to support /[traceid]/[view]/[3dview] format
- Add 'network' and 'timeline' as 3D view parameters in URL
- Update HTTPRequestViewer to sync 3D view state with URL
- Handle browser back/forward navigation for 3D views
- Ensure only one 3D view is active at a time
- URLs now reflect selected 3D visualization state for sharing
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Create centralized tooltip definitions with TooltipType enum
- Add comprehensive tooltip content for 31 different field types
- Include Lighthouse relationships, calculations, and documentation links
- Implement click-to-open modal system with rich content display
- Refactor Tooltip component to use enum-based content lookup
- Update RequestsTable and RequestDebugger to use simplified enum syntax
- Add Modal component with keyboard shortcuts and backdrop dismiss
- Maintain type safety with proper TypeScript interfaces
- Clean up component props by centralizing all tooltip content
Benefits:
- Single source of truth for all tooltip definitions
- Improved maintainability and consistency
- Type-safe enum usage prevents errors
- Reduced code duplication across components
- Enhanced UX with detailed modal explanations
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Create new BabylonTimelineViewer with swimlane-based layout
- Add dual-box system: gray server time (50% opacity) + blue network time boxes
- Implement yellow queue time visualization with 25% opacity
- Add host-based swimlanes with alternating left/right positioning sorted by earliest request time
- Create timeline grid lines with adaptive time labels (microseconds/milliseconds/seconds)
- Add UniversalCamera with WASD keyboard navigation from behind timeline (z: -10)
- Implement vertical gradient coloring for stacked overlapping requests
- Extract reusable timeline label creation function
- Position hostname labels below ground level (y: -1) for cleaner visualization
- Support both 3D Network View (radial) and 3D Timeline View (swimlanes) as modal overlays
- Add SSIM.js integration for intelligent screenshot similarity analysis
- Enhance CDN detection with comprehensive Akamai patterns and improved accuracy
- Add server latency calculation and color-coded display
- Add content-length header extraction and color-coded display
- Move 3D viewer from main nav to HTTP requests page with modal interface
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
