feat: add proxy request support to http-dump UI#277
Merged
butschster merged 2 commits intomasterfrom Apr 4, 2026
Merged
Conversation
Display proxied HTTP requests with full URL, response body with syntax highlighting (JSON/HTML/XML/CSS/JS), status code badges, duration, proxy label, and HTML preview via sandboxed iframe. Add 6 mock files and 8+ Storybook stories covering all scenarios.
📸 Storybook ScreenshotsScreenshots for 41 changed components in this PR. Entities/HttpDump/HttpBodyViewJson Body
Empty Json Object
Html Body
Xml Body
Plain Text Body
Large Json Body
Entities/HttpDump/HttpDumpHeaderRegular Dump
Proxy Success
Proxy 4 Xx
Proxy Connection Error
Entities/HttpDump/HttpDumpPageDefault
With Pdf
Proxy Json Response
Proxy Html Response
Proxy Xml Response
Proxy Binary Response
Proxy 4 Xx Error
Proxy Connection Error
Entities/HttpDump/HttpRequestPanelWith Query And Headers
Proxy Post With Json Body
Proxy Form Body
Entities/HttpDump/HttpResponsePanelJson Response
Html Response
Xml Response
Binary Response
Error Response
Entities/HttpDump/PreviewCardDefault
Proxy Json
Proxy Html
Proxy Error
Proxy 4 Xx
Shared/CodeSnippetDefault
Object
HTML String
PHP String
Shared/JsonTreeViewDefault
Simple Array
Primitive String
Empty Object
Deeply Nested
Widgets/LayoutBaseDefault
Auto-generated from Storybook stories of changed |
…omposable extraction - Extract shared computed logic into useHttpDumpEvent composable (28 properties) - Decompose monolithic http-dump-page into tab layout: Response / Request / Raw - Add sticky HttpDumpHeader with method, status code text, copy cURL/URL actions - Add HttpRequestPanel with new Request Body section (form-urlencoded as table) - Add HttpResponsePanel with status bar, response body, response headers - Add HttpBodyView with Raw/Pretty/Tree toggle for JSON, Preview/Source for HTML - Add JsonTreeView shared component (recursive, collapsible, click-to-copy path) - Add click-to-copy on TableBaseRow with hover-reveal icon - Add replayHttpDump API function to use-events-requests - Preview card: status left-border color, URI truncation with tooltip - Fix background not extending with content (layout-base overflow-y, min-h-full) - Fix code-snippet missing border - Add Vite polling for Docker HMR (CHOKIDAR_USEPOLLING) - Add EventDetailSection #actions slot for inline controls - Add Storybook stories for all new components (28+ variants)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Extends the http-dump entity to display proxied HTTP requests with full request/response data, syntax-highlighted response bodies, and visual indicators for proxy origin.
Why
The server now supports an HTTP proxy module that captures traffic as http-dump events with additional
response,proxy, andduration_msfields. The frontend needs to display this data.How
HttpDumpResponse,proxy,duration_ms,error,responsefieldsTesting
vue-tsc --noEmit— no type errorseslint— cleanEntities/HttpDump/PreviewCardandEntities/HttpDump/HttpDumpPageto see all variants