feat: support WEB browser

README.md

@@ -2,13 +2,14 @@
 
 [![Sponsor](https://img.shields.io/badge/Sponsor-❤-ea4aaa?style=flat-square&logo=github)](https://github.com/sponsors/mickamy)
 
-Real-time SQL traffic viewer — proxy daemon + TUI client.
+Real-time SQL traffic viewer — proxy daemon + TUI / Web client.
 
 sql-tap sits between your application and your database (PostgreSQL, MySQL, or TiDB), capturing every query and
 displaying it in an interactive terminal UI. Inspect queries, view transactions, and run EXPLAIN — all without changing
 your application code.
 
-![demo](./docs/demo.gif)
+![tui](./docs/tui.gif)
+![web](./docs/web.png)
 
 ## Installation
 
@@ -103,13 +104,31 @@ Flags:
   -listen    client listen address (required)
   -upstream  upstream database address (required)
   -grpc      gRPC server address for TUI (default: ":9091")
+  -http      HTTP server address for web UI (e.g. ":8080")
   -dsn-env   env var holding DSN for EXPLAIN (default: "DATABASE_URL")
   -version   show version and exit
 ```
 
 Set `DATABASE_URL` (or the env var specified by `-dsn-env`) to enable EXPLAIN support. Without it, the proxy still
 captures queries but EXPLAIN is disabled.
 
+### Web UI
+
+Add `--http=:8080` to serve a browser-based viewer:
+
+```bash
+DATABASE_URL="postgres://user:pass@localhost:5432/db?sslmode=disable" \
+  sql-tapd --driver=postgres --listen=:5433 --upstream=localhost:5432 --http=:8080
+```
+
+Open `http://localhost:8080` in your browser to view queries in real-time. The web UI supports:
+
+- Real-time query stream via SSE
+- Click to inspect query details
+- EXPLAIN / EXPLAIN ANALYZE
+- Text filter
+- Copy query (with or without bound args)
+
 ### sql-tap
 
 ```
@@ -229,9 +248,10 @@ sql-tap includes a workaround that detects and discards these split sequences. A
                      │  captures queries     │
                      │  via wire protocol    │
                      └───────────┬───────────┘
-                                 │ gRPC stream
+                                 │ gRPC stream / SSE
                      ┌───────────▼───────────┐
                      │  sql-tap (TUI)        │
+                     │  Browser  (Web UI)    │
                      └───────────────────────┘
 ```
 

cmd/sql-tapd/main.go

@@ -9,6 +9,7 @@ import (
 	"os"
 	"os/signal"
 	"syscall"
+	"time"
 
 	_ "github.com/go-sql-driver/mysql"
 	_ "github.com/jackc/pgx/v5/stdlib"
@@ -20,6 +21,7 @@ import (
 	"github.com/mickamy/sql-tap/proxy/mysql"
 	"github.com/mickamy/sql-tap/proxy/postgres"
 	"github.com/mickamy/sql-tap/server"
+	"github.com/mickamy/sql-tap/web"
 )
 
 var version = "dev"
@@ -37,6 +39,7 @@ func main() {
 	upstream := fs.String("upstream", "", "upstream database address (required)")
 	grpcAddr := fs.String("grpc", ":9091", "gRPC server address for TUI")
 	dsnEnv := fs.String("dsn-env", "DATABASE_URL", "environment variable holding DSN for EXPLAIN")
+	httpAddr := fs.String("http", "", "HTTP server address for web UI (e.g. :8080)")
 	showVersion := fs.Bool("version", false, "show version and exit")
 
 	_ = fs.Parse(os.Args[1:])
@@ -51,12 +54,12 @@ func main() {
 		os.Exit(1)
 	}
 
-	if err := run(*driver, *listen, *upstream, *grpcAddr, *dsnEnv); err != nil {
+	if err := run(*driver, *listen, *upstream, *grpcAddr, *dsnEnv, *httpAddr); err != nil {
 		log.Fatal(err)
 	}
 }
 
-func run(driver, listen, upstream, grpcAddr, dsnEnv string) error {
+func run(driver, listen, upstream, grpcAddr, dsnEnv, httpAddr string) error {
 	ctx, stop := signal.NotifyContext(context.Background(), syscall.SIGINT, syscall.SIGTERM)
 	defer stop()
 
@@ -100,6 +103,26 @@ func run(driver, listen, upstream, grpcAddr, dsnEnv string) error {
 		}
 	}()
 
+	// HTTP server (optional)
+	if httpAddr != "" {
+		httpLis, err := lc.Listen(ctx, "tcp", httpAddr)
+		if err != nil {
+			return fmt.Errorf("listen http %s: %w", httpAddr, err)
+		}
+		webSrv := web.New(b, explainClient)
+		go func() {
+			log.Printf("HTTP server listening on %s", httpAddr)
+			if err := webSrv.Serve(httpLis); err != nil {
+				log.Printf("http serve: %v", err)
+			}
+		}()
+		defer func() {
+			shutdownCtx, cancel := context.WithTimeout(context.Background(), 5*time.Second)
+			defer cancel()
+			_ = webSrv.Shutdown(shutdownCtx)
+		}()
+	}
+
 	// Proxy
 	var p proxy.Proxy
 	switch driver {

example/compose.yaml

@@ -56,13 +56,15 @@ services:
     ports:
       - "5433:5433"
       - "9091:9091"
+      - "8080:8080"
     environment:
       DATABASE_URL: postgres://postgres:postgres@postgres:5432/db?sslmode=disable
     command:
       - --driver=postgres
       - --listen=:5433
       - --upstream=postgres:5432
       - --grpc=:9091
+      - --http=:8080
     depends_on:
       postgres:
         condition: service_healthy
@@ -74,13 +76,15 @@ services:
     ports:
       - "3307:3307"
       - "9092:9092"
+      - "8081:8081"
     environment:
       DATABASE_URL: "mysql:mysql@tcp(mysql:3306)/db"
     command:
       - --driver=mysql
       - --listen=:3307
       - --upstream=mysql:3306
       - --grpc=:9092
+      - --http=:8081
     depends_on:
       mysql:
         condition: service_healthy
@@ -92,13 +96,15 @@ services:
     ports:
       - "3309:3309"
       - "9093:9093"
+      - "8082:8082"
     environment:
       DATABASE_URL: "mysql:mysql@tcp(mysql9:3306)/db"
     command:
       - --driver=mysql
       - --listen=:3309
       - --upstream=mysql9:3306
       - --grpc=:9093
+      - --http=:8082
     depends_on:
       mysql9:
         condition: service_healthy
@@ -129,13 +135,15 @@ services:
     ports:
       - "4001:4001"
       - "9094:9094"
+      - "8083:8083"
     environment:
       DATABASE_URL: "root@tcp(tidb:4000)/db"
     command:
       - --driver=tidb
       - --listen=:4001
       - --upstream=tidb:4000
       - --grpc=:9094
+      - --http=:8083
     depends_on:
       tidb-init:
         condition: service_completed_successfully