[RFC] Improved Web UI Flow View

[mhils]

I've been thinking how we can improve the mitmweb flow view UX. In particular, I'd like to address the following points:

1. Ability to view request + response at the same time. This is very useful for replay. This likely means we need add a vertical layout (as opposed to the current horizontal one). We can likely make this configurable without too much effort.
2. Make interactive contentviews available in mitmweb.
3. A bag of quality-of-life improvements, such as colored URL parts.

Here's a quick mockup with some of the ideas:

I'm not a UX designer, so critical feedback and additional suggestions are highly welcome! If you have suggestions for improving mitmweb, please comment below. 😃

Potential Improvements

Small and self-contained (great for new contributors)

• Show reason phrase for HTTP/2 and /3. Not everyone knows status code by heart. Implementation-wise, write a script in ./web/gen that converts https://github.com/mitmproxy/mitmproxy/blob/main/mitmproxy/net/http/status_codes.py to TypeScript. Ideally we add some indicator in the UI that this is not transmitted for h2/h3.
• Colorize response status line background by status code.
• Highlight different URL parts in the request line. This approach from StackOverflow here looks reasonable.
• Add a dedicated "Query" pane for query editing.

Major refactors

• New Layout with extra pane for response. Split existing request/response panes into headers and body?
• Upgrade to the latest CodeMirror (web: Upgrade to CodeMirror 6 #7709)
• Integrate interactive contentviews.

[jeromesegura]

Very excited to see this thread! mitmproxy is a great tool, and I feel like mitmweb could make it even better. My experience with proxies and debuggers in general goes back to Fiddler Classic (and then Everywhere), as well as ZAP proxy. For both of those, I made heavy customizations around the UI for the needs of security researchers. See EKFiddle and FiddleZAP. I am continuing the tradition with fiddleitm.

I think one of the most important parts of the UI is to give users great visibility into the flows for both request / response. In your mock up the view is Fiddler's Wide Layout mode. It has Default (on the right hand side similar to the current mitmweb implementation) and Stacked (horizontal and below the flows/sessions but stacked instead of side by side). I think the Wide view, which is in your mock up is the best mode.

Flow specific UI: Right now we can mark a flow using one of the pre-assigned colors or we can also use an emoji. It would nice to have the ability to change the color for the entire selected flow (text color and background color). Here's an example with Fiddler:

It really makes the flows pop.

Contextual menu: To interact with flows, the user currently needs to select a flow, and then use one of the options from the menu. Note: you can also use keyboard shortcut. However, there is no right-click functionality. I still have the reflex to right click and expect a menu to show :-D. For illustration, here's what it looks like with Fiddler:

A default set of actions could be hardcoded, but to make it even more powerful, add-ons could further customize that menu. I did that previously with Fiddler and it's a great way to expose features for custom add-ons.

I could go on with many more ideas, but I'm aware of the amount of work required already for other features. Although I have previously coded (C#, Java) customizations, my coding skills are not exactly amazing :-D. But in terms of workflows or mockups, I'm very eager to help.

[sleeyax]

I've been a long-time user and fan of mitmproxy, but over the years I’ve felt the web UI lagging behind. Recently, I decided to go down the rabbit hole and reimagine mitmweb with a new architecture and more modern UI/UX practices. What started as a personal project has evolved quite a bit - here’s a quick showcase:

Click to expand

mitmwebnext_showcase_quick_overview.mp4

Links:

• Quick showcase: https://youtu.be/O_u8_lxn_rA
• Full real-time walkthrough: https://youtu.be/5cBCouydg1I

I originally built this for myself and a small circle of friends and followers on my X profile, where I’ve also been sharing my progress. But after seeing this issue, I started wondering - is there room for collaboration or upstream interest in this direction?

The changes are substantial* and I’d be happy to share details on the tech stack, design goals, and progress so far. That said, I didn’t want to overwhelm you with this - just wanted to feel out whether this could be aligned with upstream plans, or if I should continue developing it as a separate fork.

* It's almost a rewrite of the frontend but bootstrapped in its own directory without touching (most of) the original mitmweb code - especially core logic like the redux 'ducks' as you like to call them.

Open to any thoughts!

---

P.S. I also sent a message on Slack hoping for some direct core dev contact but the channel is clearly unresponsive.

[fwdekker-pc]

Feedback

Showing request and response next to each other: Yes! That'd be a great improvement :) Though I'm not sure if I like putting the remaining tabs behind a ">>". I'd suggest putting the tab buttons on two lines, and only adding a ">>" if that doesn't fit.

You also suggest limiting the height of the URL field to 3 lines. Makes sense, but then I'd like to be able to change the height by dragging the bottom, like with a typical HTML textarea. I'd like to see that with most fields, actually. Sometimes I have very long cookies, and I cannot see the value without having to scroll back and forth, or copying the value into an external editor.

Indicators

I'd also like to suggest adding loading indicators. When working with large flow files (>100k flows), I may have a filter with 0 matches. If I adjust the filter, it still shows 0 matches, but is this because there's actually 0 matches, or because the filter is still running? The filter takes half a minute or more sometimes. A loading indicator inside the search bar would be very useful here.

Highlighting and marking

In my current workflow, I typically combine multiple flow files into one, and use markers to distinguish them. I'd love it if I could make the entire row coloured, as @jeromesegura suggested. That would make it far easier for me to see what's what.

I'd also like to suggest the ability to create multiple highlight filters. Sometimes I need to understand how two kinds of network messages relate to each other, and having two different highlighters would be very helpful there. If a line matches multiple filters, maybe assign a striped background?

I have to admit I'm not sure what the best way to combine the two above features is: Allowing both custom pre-processed full-line colouring, and continuing to support the highlighter without it conflicting with the custom assigned colours.

Other suggestions

I also like the right-click suggestion by @jeromesegura!

The demo by @sleeyax looks impressive! I want to add that for me such an overhaul (where you migrate to different libraries) is not necessary per sé. As long as it just works :)