feat: support TUI (#26)

Author: sigoden

Cargo.lock

@@ -44,6 +44,11 @@ tokio-rustls = { version = "0.26.0", default-features = false, features = ["ring
 tokio-stream = { version = "0.1.14", default-features = false, features = ["sync"] }
 tokio-tungstenite = { version = "0.23.1", features = ["rustls", "rustls-tls-webpki-roots"] }
 url = "2.5.0"
+crossterm = "0.28.1"
+ratatui = { version = "0.28.1", features = ["unstable-rendered-line-info"] }
+unicode-width = "0.2.0"
+log = "0.4.22"
+simplelog = "0.12.2"
 
 [dev-dependencies]
 async-http-proxy = { version = "1.2.5", features = ["runtime-tokio"] }

Cargo.toml

@@ -11,10 +11,23 @@ A lightweight proxy for capturing HTTP(S) and WS(S) traffic.
 - Support forward/reverse proxy
 - Support filtering
 - Support HTTP/HTTPS/WS/WSS protocols
-- Integrate web interface
+- Integrate terminal user interface (TUI)
+- Integrate web user interface (WebUI)
 - Integrate certificates installation webapp
 - Capture req/res bodies in a non-blocking, streaming manner
 - Export in Markdown, cURL, or HAR formats
+- Written in Rust, offering a single executable with no external dependencies
+
+## Screenshots
+
+**Terminal User Inferace**
+![proxyfor-tui](https://github.com/user-attachments/assets/01db8ada-0b0c-4ddc-bc3f-045cfdb67d64)
+
+**Web User Inferace**
+![proxyfor-webui](https://github.com/user-attachments/assets/b13ffe34-69e5-4513-b904-243c391528b2)
+
+**Dump all traffics**
+![proxyfor-dump](https://github.com/user-attachments/assets/eca3b38c-c2e9-404e-8990-e34feee7ae3c)
 
 ## Installation
 
@@ -34,7 +47,7 @@ docker run -v ~/.proxyfor:/.proxyfor -p 8080:8080 --rm sigoden/proxyfor --web
 
 Download from [Github Releases](https://github.com/sigoden/proxyfor/releases), unzip and add proxyfor to your $PATH.
 
-## Usage
+## Proxy Type
 
 ### Forward Proxy
 
@@ -45,8 +58,6 @@ $ proxyfor
 $ curl -x http://127.0.0.1:8080 httpbin.org/ip
 ```
 
-![forwarding-proxy](https://github.com/sigoden/proxyfor/assets/4012553/c40cc1be-b9e9-4846-9702-ad3610719b08)
-
 ### Reverse Proxy
 
 The client directly requests `http://127.0.0.1:8080`.
@@ -58,16 +69,6 @@ $ proxyfor https://httpbin.org
 $ curl http://127.0.0.1:8080/ip
 ```
 
-## Web Interface
-
-Proxyfor provides a web-based user interface that allows you to interactively inspect the HTTP traffic. All traffic is kept in memory, which means that it’s intended for small-ish samples.
-
-```sh
-$ proxyfor --web
-```
-
-![proxyfor-webui](https://github.com/sigoden/proxyfor/assets/4012553/fef38f0c-ff7d-4b90-a9f0-a8c10c44c38c)
-
 ## Command Line
 
 ```
@@ -80,46 +81,54 @@ Options:
   -l, --listen <ADDR>         Listening ip and port address [default: 0.0.0.0:8080]
   -f, --filters <REGEX>       Only inspect http(s) traffic whose `{method} {uri}` matches the regex
   -m, --mime-filters <VALUE>  Only inspect http(s) traffic whose content-type matches the value
-  -w, --web                   Enable web interface
+  -W, --web                   Enable user-friendly web interface
+  -T, --tui                   Eenter TUI
+  -D, --dump                  Dump all traffics
   -h, --help                  Print help
   -V, --version               Print version
 ```
 
-Change the ip and port.
+### Choosing User Interface
+
+You can select different interfaces with the following commands:
 
 ```sh
-proxyfor -l 18080
-proxyfor -l 127.0.0.1
-proxyfor -l 127.0.0.1:18080
+proxyfor                   # Enter TUI
+proxyfor --web             # Serve WebUI
+proxyfor --dump            # Dump all traffics
+proxyfor --web --tui       # Serve WebUI + Enter TUI
+proxyfor --web --dump      # Serve WebUI + Dump all traffics
+proxyfor > proxyfor.md     # Dump all traffics to markdown file
 ```
 
-Enable web interface with `-w/--web`
+###  Changing IP and Port
+
+You can specify different listening addresses:
 
 ```sh
-proxyfor --web
+proxyfor -l 18080
+proxyfor -l 127.0.0.1
+proxyfor -l 127.0.0.1:18080
 ```
 
-Use `-f/--filters` to filter traffic by matching `{method} {uri}`.
+### Filtering Traffic
+
+Filter traffic by setting method and URI:
 
 ```sh
 proxyfor -f httpbin.org/ip -f httpbin.org/anything
 proxyfor -f '/^(get|post) https:\/\/httpbin.org/'       
 ```
 
-Use `-m/--mime-filters` to filter traffic by content-type.
+Filter traffic based on content type:
 
 ```sh
 proxyfor -m application/json -m application/ld+json
 proxyfor -m text/
 ```
 
-Pipe it to a markdown file, then view the captured traffic using your favorite editor/IDE with syntax highlighting, folding, search capabilities.
-
-```sh
-proxyfor > proxyfor.md
-```
 
-## Certificates
+## CA Certificates
 
 Proxyfor can decrypt encrypted traffic on the fly, as long as the client trusts proxyfor’s built-in certificate authority. Usually this means that the proxyfor CA certificate has to be installed on the client device.
 

README.md

@@ -190,7 +190,6 @@
 
         tbody .col-type {
             font-size: 8px;
-            text-align: center;
         }
 
         .col-size {
@@ -317,25 +316,27 @@
             <div data-tab="ws" class="tab hidden">Websocket</div>
             <div data-tab="err" class="tab hidden">Error</div>
             <div class="toolbox">
-                <div class="dropdown export-dropdown">
-                    <button class="dropbtn">Export▾</button>
-                    <div class="dropdown-content">
-                        <a data-kind="markdown">Export all as Markdown</a>
-                        <a data-kind="curl">Export all as cURL</a>
-                        <a data-kind="har">Export all as HAR</a>
-                    </div>
-                </div>
                 <div class="dropdown copy-dropdown">
                     <button class="dropbtn">Copy▾</button>
                     <div class="dropdown-content">
                         <a data-kind="markdown">Copy as Markdown</a>
                         <a data-kind="curl">Copy as cURL</a>
                         <a data-kind="har">Copy as HAR</a>
+                        <a data-kind="req-body">Copy Request Body</a>
                         <a data-kind="res-body">Copy Response Body</a>
                     </div>
                 </div>
+                <div class="dropdown export-dropdown">
+                    <button class="dropbtn">Export▾</button>
+                    <div class="dropdown-content">
+                        <a data-kind="markdown">Export all as Markdown</a>
+                        <a data-kind="curl">Export all as cURL</a>
+                        <a data-kind="har">Export all as HAR</a>
+                    </div>
+                </div>
                 <div class="certificate">
-                    <a href="/__proxyfor__/certificate/" target="_blank" title="Install CA certificate for HTTPS Proxy">Certificate</a>
+                    <a href="/__proxyfor__/certificate/" target="_blank"
+                        title="Install CA certificate for HTTPS Proxy">Certificate</a>
                 </div>
             </div>
         </div>
@@ -392,7 +393,7 @@
          */
 
         /**
-         * @typedef {"markdown"|"curl"|"har"|"res-body"} CopyKind
+         * @typedef {"markdown"|"curl"|"har"|"req-body"|"res-body"} CopyKind
          */
 
         /**
@@ -686,19 +687,10 @@
             if (!currentTraffic) {
                 return;
             }
-            if (kind == "res-body") {
-                if (currentTraffic.res_body) {
-                    let text = "";
-                    if (currentTraffic.res_body.encode == "base64") {
-                        let contentType = getContentType(currentTraffic.res_headers);
-                        text = `data:${contentType};base64,${currentTraffic.res_body.value}`;
-                    } else {
-                        text = currentTraffic.res_body.value;
-                    }
-                    if (text) {
-                        ClipboardJS.copy(text);
-                    }
-                }
+            if (kind == "req-body") {
+                copyBody(currentTraffic.req_body)
+            } else if (kind == "res-body") {
+                copyBody(currentTraffic.res_body)
             } else {
                 fetch(getTrafficEndpoint(selectedTrafficId) + `?${kind}`)
                     .then(res => res.text())
@@ -986,6 +978,23 @@
             return value.startsWith('x-') ? value.substring(2) : value;
         }
 
+        /**
+         * @param {BodyData} body
+         */
+        function copyBody(body) {
+            if (!body) return;
+            let text = "";
+            if (body.encode == "base64") {
+                let contentType = getContentType(headers);
+                text = `data:${contentType};base64,${body.value}`;
+            } else {
+                text = body.value;
+            }
+            if (text) {
+                ClipboardJS.copy(text);
+            }
+        }
+
         function base64ToBlob(base64String, contentType) {
             const byteCharacters = atob(base64String);
             const byteArrays = [];
@@ -1006,34 +1015,36 @@
 
         }
 
-        function formatSize(bytes) {
-            if (bytes === null) return "";
-            if (bytes === 0) return "0";
+        function formatSize(len) {
+            if (len === null) return "";
+            if (len === 0) return "0";
             const prefix = ["b", "kb", "mb", "gb", "tb"];
             let i = 0;
             for (; i < prefix.length; i++) {
-                if (Math.pow(1024, i + 1) > bytes) {
+                if (Math.pow(1024, i + 1) > len) {
                     break;
                 }
             }
             let precision;
-            if (bytes % Math.pow(1024, i) === 0) precision = 0;
+            if (len % Math.pow(1024, i) === 0) precision = 0;
             else precision = 1;
-            return (bytes / Math.pow(1024, i)).toFixed(precision) + prefix[i];
+            return (len / Math.pow(1024, i)).toFixed(precision) + prefix[i];
         }
 
-        function formatTimeDelta(milliseconds) {
-            let time = milliseconds;
-            if (time === null) return "";
-            if (time === 0) return "0";
+        function formatTimeDelta(delta) {
+            if (delta === null) return "";
+            if (delta === 0) return "0";
+            if (delta > 1000 && delta < 10000) {
+                return (delta / 1000.0).toFixed(2) + "s";
+            }
             const prefix = ["ms", "s", "min", "h"];
             const div = [1000, 60, 60];
             let i = 0;
-            while (Math.abs(time) >= div[i] && i < div.length) {
-                time = time / div[i];
+            while (Math.abs(delta) >= div[i] && i < div.length) {
+                delta = delta / div[i];
                 i++;
             }
-            return Math.round(time) + prefix[i];
+            return Math.round(delta) + prefix[i];
         }
 
         function formatDate(date) {

assets/index.html

@@ -1,7 +1,11 @@
+#[macro_use]
+extern crate log;
+
 pub mod cert;
 pub mod filter;
 pub mod server;
+pub mod state;
 pub mod traffic;
+pub mod tui;
 
 mod rewind;
-mod state;