feat: run tool button

create skeleton landing page
resolve comments
2026-01-11 16:38:15 -05:00 · 2025-07-11 05:44:36 +00:00 · 2025-07-09 22:02:39 +00:00 · 2025-07-09 21:57:53 +00:00 · 2025-07-09 21:57:48 +00:00
13 changed files with 898 additions and 0 deletions
--- a/cmd/root.go
+++ b/cmd/root.go
@@ -185,6 +185,7 @@ func NewCommand(opts ...Option) *Command {
 	flags.StringVar(&cmd.prebuiltConfig, "prebuilt", "", "Use a prebuilt tool configuration by source type. Cannot be used with --tools-file. Allowed: 'alloydb-postgres', 'bigquery', 'cloud-sql-mysql', 'cloud-sql-postgres', 'cloud-sql-mssql', 'postgres', 'spanner', 'spanner-postgres'.")
 	flags.BoolVar(&cmd.cfg.Stdio, "stdio", false, "Listens via MCP STDIO instead of acting as a remote HTTP server.")
 	flags.BoolVar(&cmd.cfg.DisableReload, "disable-reload", false, "Disables dynamic reloading of tools file.")
+	flags.BoolVar(&cmd.cfg.UI, "ui", false, "Launches the Toolbox UI web server.")

 	// wrap RunE command so that we have access to original Command object
 	cmd.RunE = func(*cobra.Command, []string) error { return run(cmd) }
@@ -765,6 +766,9 @@ func run(cmd *Command) error {
 			return errMsg
 		}
 		cmd.logger.InfoContext(ctx, "Server ready to serve!")
+		if cmd.cfg.UI {
+			cmd.logger.InfoContext(ctx, "Toolbox UI is up and running at: http://localhost:5000/ui")
+		}

 		go func() {
 			defer close(srvErr)
--- a/go.mod
+++ b/go.mod
@@ -18,6 +18,7 @@ require (
 	github.com/go-chi/chi/v5 v5.2.2
 	github.com/go-chi/httplog/v2 v2.1.1
 	github.com/go-chi/render v1.0.3
+	github.com/go-goquery/goquery v1.0.1
 	github.com/go-playground/validator/v10 v10.27.0
 	github.com/go-sql-driver/mysql v1.9.3
 	github.com/goccy/go-yaml v1.18.0
@@ -60,7 +61,9 @@ require (
 	github.com/GoogleCloudPlatform/grpc-gcp-go/grpcgcp v1.5.3 // indirect
 	github.com/GoogleCloudPlatform/opentelemetry-operations-go/detectors/gcp v1.27.0 // indirect
 	github.com/GoogleCloudPlatform/opentelemetry-operations-go/internal/resourcemapping v0.53.0 // indirect
+	github.com/PuerkitoBio/goquery v1.10.3 // indirect
 	github.com/ajg/form v1.5.1 // indirect
+	github.com/andybalholm/cascadia v1.3.3 // indirect
 	github.com/apache/arrow/go/v15 v15.0.2 // indirect
 	github.com/cenkalti/backoff/v5 v5.0.2 // indirect
 	github.com/cespare/xxhash/v2 v2.3.0 // indirect
--- a/go.sum
+++ b/go.sum
@@ -661,6 +661,8 @@ github.com/GoogleCloudPlatform/opentelemetry-operations-go/internal/resourcemapp
 github.com/GoogleCloudPlatform/opentelemetry-operations-go/internal/resourcemapping v0.53.0/go.mod h1:cSgYe11MCNYunTnRXrKiR/tHc0eoKjICUuWpNZoVCOo=
 github.com/JohnCGriffin/overflow v0.0.0-20211019200055-46fa312c352c/go.mod h1:X0CRv0ky0k6m906ixxpzmDRLvX58TFUKS2eePweuyxk=
 github.com/OneOfOne/xxhash v1.2.2/go.mod h1:HSdplMjZKSmBqAxg5vPj2TmRDmfkzw+cTzAElWljhcU=
+github.com/PuerkitoBio/goquery v1.10.3 h1:pFYcNSqHxBD06Fpj/KsbStFRsgRATgnf3LeXiUkhzPo=
+github.com/PuerkitoBio/goquery v1.10.3/go.mod h1:tMUX0zDMHXYlAQk6p35XxQMqMweEKB7iK7iLNd4RH4Y=
 github.com/ajg/form v1.5.1 h1:t9c7v8JUKu/XxOGBU0yjNpaMloxGEJhUkqFRq0ibGeU=
 github.com/ajg/form v1.5.1/go.mod h1:uL1WgH+h2mgNtvBq0339dVnzXdBETtL2LeUXaIv25UY=
 github.com/ajstarks/deck v0.0.0-20200831202436-30c9fc6549a9/go.mod h1:JynElWSGnm/4RlzPXRlREEwqTHAN3T56Bv2ITsFT3gY=
@@ -668,6 +670,8 @@ github.com/ajstarks/deck/generate v0.0.0-20210309230005-c3f852c02e19/go.mod h1:T
 github.com/ajstarks/svgo v0.0.0-20180226025133-644b8db467af/go.mod h1:K08gAheRH3/J6wwsYMMT4xOr94bZjxIelGM0+d/wbFw=
 github.com/ajstarks/svgo v0.0.0-20211024235047-1546f124cd8b/go.mod h1:1KcenG0jGWcpt8ov532z81sp/kMMUG485J2InIOyADM=
 github.com/andybalholm/brotli v1.0.4/go.mod h1:fO7iG3H7G2nSZ7m0zPUDn85XEX2GTukHGRSepvi9Eig=
+github.com/andybalholm/cascadia v1.3.3 h1:AG2YHrzJIm4BZ19iwJ/DAua6Btl3IwJX+VI4kktS1LM=
+github.com/andybalholm/cascadia v1.3.3/go.mod h1:xNd9bqTn98Ln4DwST8/nG+H0yuB8Hmgu1YHNnWw0GeA=
 github.com/antihax/optional v1.0.0/go.mod h1:uupD/76wgC+ih3iEmQUL+0Ugr19nfwCT1kdvxnR2qWY=
 github.com/apache/arrow/go/v10 v10.0.1/go.mod h1:YvhnlEePVnBS4+0z3fhPfUy7W1Ikj0Ih0vcRo/gZ1M0=
 github.com/apache/arrow/go/v11 v11.0.0/go.mod h1:Eg5OsL5H+e299f7u5ssuXsuHQVEGC4xei5aX110hRiI=
@@ -784,6 +788,8 @@ github.com/go-fonts/stix v0.1.0/go.mod h1:w/c1f0ldAUlJmLBvlbkvVXLAD+tAMqobIIQpmn
 github.com/go-gl/glfw v0.0.0-20190409004039-e6da0acd62b1/go.mod h1:vR7hzQXu2zJy9AVAgeJqvqgH9Q5CA+iKCZ2gyEVpxRU=
 github.com/go-gl/glfw/v3.3/glfw v0.0.0-20191125211704-12ad95a8df72/go.mod h1:tQ2UAYgL5IevRw8kRxooKSPJfGvJ9fJQFa0TUsXzTg8=
 github.com/go-gl/glfw/v3.3/glfw v0.0.0-20200222043503-6f7a984d4dc4/go.mod h1:tQ2UAYgL5IevRw8kRxooKSPJfGvJ9fJQFa0TUsXzTg8=
+github.com/go-goquery/goquery v1.0.1 h1:kpchVA1LdOFWdRpkDPESVdlb1JQI6ixsJ5MiNUITO7U=
+github.com/go-goquery/goquery v1.0.1/go.mod h1:W5s8OWbqWf6lG0LkXWBeh7U1Y/X5XTI0Br65MHF8uJk=
 github.com/go-jose/go-jose/v4 v4.0.5 h1:M6T8+mKZl/+fNNuFHvGIzDz7BTLQPIounk/b9dw3AaE=
 github.com/go-jose/go-jose/v4 v4.0.5/go.mod h1:s3P1lRrkT8igV8D9OjyL4WRyHvjB6a4JSllnOrmmBOA=
 github.com/go-kit/log v0.1.0/go.mod h1:zbhenjAZHb184qTLMA9ZjW7ThYL0H2mk7Q6pNt4vbaY=
@@ -885,6 +891,7 @@ github.com/google/go-cmp v0.5.6/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/
 github.com/google/go-cmp v0.5.7/go.mod h1:n+brtR0CgQNWTVd5ZUFpTBC8YFBDLK/h/bpaJ8/DtOE=
 github.com/google/go-cmp v0.5.8/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY=
 github.com/google/go-cmp v0.5.9/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY=
+github.com/google/go-cmp v0.6.0/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY=
 github.com/google/go-cmp v0.7.0 h1:wk8382ETsv4JYUZwIsn6YpYiWiBsYLSJiTsyBybVuN8=
 github.com/google/go-cmp v0.7.0/go.mod h1:pXiqmnSA92OHEEa9HXL2W4E7lf9JzCmGVUdgjX3N/iU=
 github.com/google/gofuzz v1.0.0/go.mod h1:dBl0BpW6vV/+mYPU4Po3pmUjxk6FQPldtuIdl/M65Eg=
@@ -1178,6 +1185,10 @@ golang.org/x/crypto v0.0.0-20200622213623-75b288015ac9/go.mod h1:LzIPMQfyMNhhGPh
 golang.org/x/crypto v0.0.0-20210421170649-83a5a9bb288b/go.mod h1:T9bdIzuCu7OtxOm1hfPfRQxPLYneinmdGuTeoZ9dtd4=
 golang.org/x/crypto v0.0.0-20210921155107-089bfa567519/go.mod h1:GvvjBRRGRdwPK5ydBHafDWAxML/pGHZbMvKqRZ5+Abc=
 golang.org/x/crypto v0.0.0-20211108221036-ceb1ce70b4fa/go.mod h1:GvvjBRRGRdwPK5ydBHafDWAxML/pGHZbMvKqRZ5+Abc=
+golang.org/x/crypto v0.13.0/go.mod h1:y6Z2r+Rw4iayiXXAIxJIDAJ1zMW4yaTpebo8fPOliYc=
+golang.org/x/crypto v0.19.0/go.mod h1:Iy9bg/ha4yyC70EfRS8jz+B6ybOBKMaSxLj6P6oBDfU=
+golang.org/x/crypto v0.23.0/go.mod h1:CKFgDieR+mRhux2Lsu27y0fO304Db0wZe70UKqHu0v8=
+golang.org/x/crypto v0.31.0/go.mod h1:kDsLvtWBEx7MV9tJOj9bnXsPbxwJQ6csT/x4KIN4Ssk=
 golang.org/x/crypto v0.39.0 h1:SHs+kF4LP+f+p14esP5jAoDpHU8Gu/v9lFRK6IT5imM=
 golang.org/x/crypto v0.39.0/go.mod h1:L+Xg3Wf6HoL4Bn4238Z6ft6KfEpN0tJGo53AAPC632U=
 golang.org/x/exp v0.0.0-20180321215751-8460e604b9de/go.mod h1:CJ0aWSM057203Lf6IL+f9T1iT9GByDxfZKAQTCR3kQA=
@@ -1239,6 +1250,9 @@ golang.org/x/mod v0.6.0-dev.0.20220419223038-86c51ed26bb4/go.mod h1:jJ57K6gSWd91
 golang.org/x/mod v0.7.0/go.mod h1:iBbtSCu2XBx23ZKBPSOrRkjjQPZFPuis4dIYUhu/chs=
 golang.org/x/mod v0.8.0/go.mod h1:iBbtSCu2XBx23ZKBPSOrRkjjQPZFPuis4dIYUhu/chs=
 golang.org/x/mod v0.9.0/go.mod h1:iBbtSCu2XBx23ZKBPSOrRkjjQPZFPuis4dIYUhu/chs=
+golang.org/x/mod v0.12.0/go.mod h1:iBbtSCu2XBx23ZKBPSOrRkjjQPZFPuis4dIYUhu/chs=
+golang.org/x/mod v0.15.0/go.mod h1:hTbmBsO62+eylJbnUtE2MGJUyE7QWk4xUqPFrRgJ+7c=
+golang.org/x/mod v0.17.0/go.mod h1:hTbmBsO62+eylJbnUtE2MGJUyE7QWk4xUqPFrRgJ+7c=
 golang.org/x/mod v0.25.0 h1:n7a+ZbQKQA/Ysbyb0/6IbB1H/X41mKgbhfv7AfG/44w=
 golang.org/x/mod v0.25.0/go.mod h1:IXM97Txy2VM4PJ3gI61r1YEk/gAj6zAHN3AdZt6S9Ww=
 golang.org/x/net v0.0.0-20180724234803-3673e40ba225/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
@@ -1298,6 +1312,11 @@ golang.org/x/net v0.6.0/go.mod h1:2Tu9+aMcznHK/AK1HMvgo6xiTLG5rD5rZLDS+rp2Bjs=
 golang.org/x/net v0.7.0/go.mod h1:2Tu9+aMcznHK/AK1HMvgo6xiTLG5rD5rZLDS+rp2Bjs=
 golang.org/x/net v0.8.0/go.mod h1:QVkue5JL9kW//ek3r6jTKnTFis1tRmNAW2P1shuFdJc=
 golang.org/x/net v0.9.0/go.mod h1:d48xBJpPfHeWQsugry2m+kC02ZBRGRgulfHnEXEuWns=
+golang.org/x/net v0.10.0/go.mod h1:0qNGK6F8kojg2nk9dLZ2mShWaEBan6FAoqfSigmmuDg=
+golang.org/x/net v0.15.0/go.mod h1:idbUs1IY1+zTqbi8yxTbhexhEEk5ur9LInksu6HrEpk=
+golang.org/x/net v0.21.0/go.mod h1:bIjVDfnllIU7BJ2DNgfnXvpSvtn8VRwhlsaeUTyUS44=
+golang.org/x/net v0.25.0/go.mod h1:JkAGAh7GEvH74S6FOH42FLoXpXbE/aqXSrIQjXgsiwM=
+golang.org/x/net v0.33.0/go.mod h1:HXLR5J+9DxmrqMwG9qjGCxZ+zKXxBru04zlTvWlWuN4=
 golang.org/x/net v0.41.0 h1:vBTly1HeNPEn3wtREYfy4GZ/NECgw2Cnl+nK6Nz3uvw=
 golang.org/x/net v0.41.0/go.mod h1:B/K4NNqkfmg07DQYrbwvSluqCJOOXwUjeb/5lOisjbA=
 golang.org/x/oauth2 v0.0.0-20180821212333-d2e6202438be/go.mod h1:N/0e6XlmueqKjAGxoOufVs8QHGRruUQn6yWY3a++T0U=
@@ -1347,6 +1366,10 @@ golang.org/x/sync v0.0.0-20220722155255-886fb9371eb4/go.mod h1:RxMgew5VJxzue5/jJ
 golang.org/x/sync v0.0.0-20220819030929-7fc1605a5dde/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.0.0-20220929204114-8fcdb60fdcc0/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.1.0/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sync v0.3.0/go.mod h1:FU7BRWz2tNW+3quACPkgCx/L+uEAv1htQ0V83Z9Rj+Y=
+golang.org/x/sync v0.6.0/go.mod h1:Czt+wKu1gCyEFDUtn0jG5QVvpJ6rzVqr5aXyt9drQfk=
+golang.org/x/sync v0.7.0/go.mod h1:Czt+wKu1gCyEFDUtn0jG5QVvpJ6rzVqr5aXyt9drQfk=
+golang.org/x/sync v0.10.0/go.mod h1:Czt+wKu1gCyEFDUtn0jG5QVvpJ6rzVqr5aXyt9drQfk=
 golang.org/x/sync v0.15.0 h1:KWH3jNZsfyT6xfAfKiz6MRNmd46ByHDYaZ7KSkCtdW8=
 golang.org/x/sync v0.15.0/go.mod h1:1dzgHSNfp02xaA81J2MS99Qcpr2w7fw1gpm99rleRqA=
 golang.org/x/sys v0.0.0-20180830151530-49385e6e1522/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
@@ -1428,8 +1451,14 @@ golang.org/x/sys v0.4.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.5.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.7.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.8.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.12.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.17.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
+golang.org/x/sys v0.20.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
+golang.org/x/sys v0.28.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
 golang.org/x/sys v0.33.0 h1:q3i8TbbEz+JRD9ywIRlyRAQbM0qF7hu24q3teo2hbuw=
 golang.org/x/sys v0.33.0/go.mod h1:BJP2sWEmIv4KK5OTEluFJCKSidICx8ciO85XgH3Ak8k=
+golang.org/x/telemetry v0.0.0-20240228155512-f48c80bd79b2/go.mod h1:TeRTkGYfJXctD9OcfyVLyj2J3IxLnKwHJR8f4D8a3YE=
 golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
 golang.org/x/term v0.0.0-20210927222741-03fcf44c2211/go.mod h1:jbD1KX2456YbFQfuXm/mYQcufACuNUgVhRMnK/tPxf8=
 golang.org/x/term v0.2.0/go.mod h1:TVmDHMZPmdnySmBfhjOoOdhjzdE1h4u1VwSiw2l1Nuc=
@@ -1438,6 +1467,11 @@ golang.org/x/term v0.4.0/go.mod h1:9P2UbLfCdcvo3p/nzKvsmas4TnlujnuoV9hGgYzW1lQ=
 golang.org/x/term v0.5.0/go.mod h1:jMB1sMXY+tzblOD4FWmEbocvup2/aLOaQEp7JmGp78k=
 golang.org/x/term v0.6.0/go.mod h1:m6U89DPEgQRMq3DNkDClhWw02AUbt2daBVO4cn4Hv9U=
 golang.org/x/term v0.7.0/go.mod h1:P32HKFT3hSsZrRxla30E9HqToFYAQPCMs/zFMBUFqPY=
+golang.org/x/term v0.8.0/go.mod h1:xPskH00ivmX89bAKVGSKKtLOWNx2+17Eiy94tnKShWo=
+golang.org/x/term v0.12.0/go.mod h1:owVbMEjm3cBLCHdkQu9b1opXd4ETQWc3BhuQGKgXgvU=
+golang.org/x/term v0.17.0/go.mod h1:lLRBjIVuehSbZlaOtGMbcMncT+aqLLLmKrsjNrUguwk=
+golang.org/x/term v0.20.0/go.mod h1:8UkIAJTvZgivsXaD6/pH6U9ecQzZ45awqEOzuCvwpFY=
+golang.org/x/term v0.27.0/go.mod h1:iMsnZpn0cago0GOrHO2+Y7u7JPn5AylBrcoWkElMTSM=
 golang.org/x/text v0.0.0-20170915032832-14c0d48ead0c/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
 golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
 golang.org/x/text v0.3.1-0.20180807135948-17ff2d5776d2/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
@@ -1454,6 +1488,10 @@ golang.org/x/text v0.6.0/go.mod h1:mrYo+phRRbMaCq/xk9113O4dZlRixOauAjOtrjsXDZ8=
 golang.org/x/text v0.7.0/go.mod h1:mrYo+phRRbMaCq/xk9113O4dZlRixOauAjOtrjsXDZ8=
 golang.org/x/text v0.8.0/go.mod h1:e1OnstbJyHTd6l/uOt8jFFHp6TRDWZR/bV3emEE/zU8=
 golang.org/x/text v0.9.0/go.mod h1:e1OnstbJyHTd6l/uOt8jFFHp6TRDWZR/bV3emEE/zU8=
+golang.org/x/text v0.13.0/go.mod h1:TvPlkZtksWOMsz7fbANvkp4WM8x/WCo/om8BMLbz+aE=
+golang.org/x/text v0.14.0/go.mod h1:18ZOQIKpY8NJVqYksKHtTdi31H5itFRjB5/qKTNYzSU=
+golang.org/x/text v0.15.0/go.mod h1:18ZOQIKpY8NJVqYksKHtTdi31H5itFRjB5/qKTNYzSU=
+golang.org/x/text v0.21.0/go.mod h1:4IBbMaMmOPCJ8SecivzSH54+73PCFmPWxNTLm+vZkEQ=
 golang.org/x/text v0.26.0 h1:P42AVeLghgTYr4+xUnTRKDMqpar+PtX7KWuNQL21L8M=
 golang.org/x/text v0.26.0/go.mod h1:QK15LZJUUQVJxhz7wXgxSy/CJaTFjd0G+YLonydOVQA=
 golang.org/x/time v0.0.0-20181108054448-85acf8d2951c/go.mod h1:tRJNPiyCQ0inRvYxbN9jk5I+vvW/OXSQhTDSoE431IQ=
@@ -1528,6 +1566,8 @@ golang.org/x/tools v0.1.12/go.mod h1:hNGJHUnrk76NpqgfD5Aqm5Crs+Hm0VOH/i9J2+nxYbc
 golang.org/x/tools v0.3.0/go.mod h1:/rWhSS2+zyEVwoJf8YAX6L2f0ntZ7Kn/mGgAWcipA5k=
 golang.org/x/tools v0.6.0/go.mod h1:Xwgl3UAJ/d3gWutnCtw505GrjyAbvKui8lOU390QaIU=
 golang.org/x/tools v0.7.0/go.mod h1:4pg6aUX35JBAogB10C9AtvVL+qowtN4pT3CGSQex14s=
+golang.org/x/tools v0.13.0/go.mod h1:HvlwmtVNQAhOuCjW7xxvovg8wbNq7LwfXh/k7wXUl58=
+golang.org/x/tools v0.21.1-0.20240508182429-e35e4ccd0d2d/go.mod h1:aiJjzUbINMkxbQROHiO6hDPo2LHcIPhhQsa9DLh0yGk=
 golang.org/x/tools v0.33.0 h1:4qz2S3zmRxbGIhDIAgjxvFutSvH5EfnsYrRBj0UI0bc=
 golang.org/x/tools v0.33.0/go.mod h1:CIJMaWEY88juyUfo7UbgPqbC8rU2OqfAV1h2Qp0oMYI=
 golang.org/x/xerrors v0.0.0-20190717185122-a985d3407aa7/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
--- a/internal/server/config.go
+++ b/internal/server/config.go
@@ -55,6 +55,8 @@ type ServerConfig struct {
 	Stdio bool
 	// DisableReload indicates if the user has disabled dynamic reloading for Toolbox.
 	DisableReload bool
+	// UI indicates if Toolbox UI endpoints (/ui) are available
+	UI bool
 }

 type logFormat string
--- a/internal/server/server.go
+++ b/internal/server/server.go
@@ -330,6 +330,13 @@ func NewServer(ctx context.Context, cfg ServerConfig) (*Server, error) {
 		return nil, err
 	}
 	r.Mount("/mcp", mcpR)
+	if cfg.UI {
+		webR, err := webRouter()
+		if err != nil {
+			return nil, err
+		}
+		r.Mount("/ui", webR)
+	}
 	// default endpoint for validating server is running
 	r.Get("/", func(w http.ResponseWriter, r *http.Request) {
 		_, _ = w.Write([]byte("🧰 Hello, World! 🧰"))
--- a/internal/server/static/assets/mcptoolboxlogo.png
+++ b/internal/server/static/assets/mcptoolboxlogo.png
--- a/internal/server/static/css/style.css
+++ b/internal/server/static/css/style.css
@@ -0,0 +1,231 @@
+body {
+    display: flex;
+    height: 100vh;
+    margin: 0;
+    font-family: 'Trebuchet MS';
+    background-color: #f8f9fa;
+}
+
+.left-nav {
+    flex: 0 0 200px;
+    background-color: #fff;
+    box-shadow: 4px 0px 12px rgba(0, 0, 0, 0.15);
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    padding: 15px;
+    align-items: center;
+}
+
+.second-nav {
+    flex: 0 0 250px;
+    background-color: #fff;
+    box-shadow: 4px 0px 12px rgba(0, 0, 0, 0.15);
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    padding: 15px;
+    align-items: center;
+}
+
+.nav-logo {
+    width: 100%;
+    margin-bottom: 20px;
+}
+
+.nav-logo img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+}
+
+.left-nav ul {
+    font-family: 'Verdana';
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    width: 100%;
+}
+
+.left-nav ul li {
+    margin-bottom: 5px;
+}
+
+.left-nav ul li a {
+    display: flex; 
+    align-items: center; 
+    padding: 12px;
+    text-decoration: none;
+    color: #333;
+    border-radius: 0;
+}
+
+.left-nav ul li a:hover {
+    background-color: #e9e9e9;
+    border-radius: 35px;
+}
+
+.left-nav ul li a.active {
+    background-color: #d0d0d0;
+    font-weight: bold;
+    border-radius: 35px;
+}
+
+.main-content-area {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.top-bar {
+    background-color: #fff;
+    padding: 30px 30px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    border-bottom: 1px solid #eee;
+}
+
+.top-bar span {
+    font-weight: bold;
+    font-size: 1.2em;
+    font-family: 'Trebuchet MS';
+    color: #333;
+}
+
+.content {
+    padding: 20px;
+    flex-grow: 1;
+    overflow-y: auto;
+}
+
+.tool-button {
+    /* --- Mimicking .left-nav ul li a styles --- */
+    display: flex;
+    align-items: center;
+    padding: 12px;
+    text-decoration: none;
+    color: #333;
+    background-color: transparent; /* Reset default button background */
+    border: none;              /* Reset default button border */
+    border-radius: 0;          /* Start with sharp corners */
+    width: 100%;
+    text-align: left;
+    cursor: pointer;
+    font-family: inherit; /* Inherit 'Verdana' from ul */
+    font-size: inherit;   /* Inherit font size */
+
+    /* Transition to match a tags */
+    transition: background-color 0.1s ease-in-out, border-radius 0.1s ease-in-out;
+}
+
+.tool-button:hover {
+    /* Mimic .left-nav ul li a:hover */
+    background-color: #e9e9e9;
+    border-radius: 35px;
+}
+
+.tool-button:focus {
+    outline: none;
+    /* Optional: You might want a subtle focus indicator, e.g.
+    box-shadow: 0 0 0 2px rgba(208, 208, 208, 0.5); */
+}
+
+.tool-button.active {
+    /* Mimic .left-nav ul li a.active */
+    background-color: #d0d0d0;
+    font-weight: bold;
+    border-radius: 35px;
+}
+
+.tool-button.active:hover {
+    background-color: #d0d0d0; /* Keep active color when hovered */
+}
+#secondary-panel-content ul {
+    list-style: none; /* This is the main property to remove bullet points */
+    padding: 0;      /* Reset default browser padding on the ul */
+    margin: 0;       /* Reset default browser margin on the ul */
+    width: 100%;     /* Ensure it takes full width if needed */
+}
+
+.tool-details-grid {
+    display: grid;
+    grid-template-columns: 2fr 1fr; /* 2/3 for info, 1/3 for params */
+    gap: 20px;
+    margin-bottom: 20px;
+}
+
+.tool-info {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+}
+
+.tool-params {
+    background-color: #f9f9f9;
+    padding: 15px;
+    border-radius: 4px;
+    border: 1px solid #ddd;
+}
+
+.tool-box {
+    background-color: #fff;
+    padding: 15px;
+    border-radius: 4px;
+    border: 1px solid #eee;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+}
+
+.tool-box h5 {
+    margin-top: 0;
+    margin-bottom: 8px;
+    font-weight: bold;
+}
+
+.param-item {
+    margin-bottom: 12px;
+}
+
+.param-item label {
+    display: block;
+    margin-bottom: 4px;
+    font-weight: 500;
+}
+
+.param-item input[type="text"],
+.param-item input[type="number"],
+.param-item select {
+    width: calc(100% - 12px);
+    padding: 6px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+.run-tool-btn {
+    padding: 10px 15px;
+    background-color: #4285f4; /* Google Blue */
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 1em;
+    margin-top: 10px;
+}
+
+.run-tool-btn:hover {
+    background-color: #357ae8;
+}
+
+.tool-response {
+    width: 100%;
+    margin-top: 20px;
+}
+
+.tool-response textarea {
+    width: calc(100% - 24px);
+    min-height: 150px;
+    padding: 12px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-family: monospace;
+}
--- a/internal/server/static/index.html
+++ b/internal/server/static/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Toolbox UI</title>
+    <link rel="stylesheet" href="/ui/css/style.css">
+</head>
+<body>
+    <nav class="left-nav">
+        <div class="nav-logo">
+            <img src="/ui/assets/mcptoolboxlogo.png" alt="App Logo">
+        </div>
+        <ul>
+            <li><a href="/ui/sources">Sources</a></li>
+            <li><a href="/ui/authservices">Auth Services</a></li>
+            <li><a href="/ui/tools">Tools</a></li>
+            <li><a href="/ui/toolsets">Toolsets</a></li>
+        </ul>
+    </nav>
+
+    <div class="main-content-area", align="center">
+        <div class="top-bar">
+        </div>
+        <main class="content">
+            <h1>Homepage</h1>
+        </main>
+    </div>
+</body>
+</html>
--- a/internal/server/static/js/toolDisplay.js
+++ b/internal/server/static/js/toolDisplay.js
@@ -0,0 +1,255 @@
+// helper function to create form inputs for parameters
+function createParamInput(param, toolId) {
+    const paramItem = document.createElement('div');
+    paramItem.className = 'param-item';
+
+    const label = document.createElement('label');
+    const inputId = `param-${toolId}-${param.name}`;
+    label.setAttribute('for', inputId);
+    label.textContent = param.label;
+    paramItem.appendChild(label);
+
+    let inputElement;
+    if (param.type === 'select') {
+        inputElement = document.createElement('select');
+        param.options.forEach(optionValue => {
+            const option = document.createElement('option');
+            option.value = optionValue;
+            option.textContent = optionValue;
+            if (optionValue === param.defaultValue) {
+                option.selected = true;
+            }
+            inputElement.appendChild(option);
+        });
+    } else if (param.type === 'textarea') { // Handle textarea for arrays
+        inputElement = document.createElement('textarea');
+        inputElement.rows = 3;
+        inputElement.value = param.defaultValue || '';
+        if (param.valueType && param.valueType.startsWith('array')) {
+             inputElement.placeholder = 'E.g., ["item1", "item2"] or [1, 2, 3]';
+        }
+    } else { // text, number, etc.
+        inputElement = document.createElement('input');
+        inputElement.type = param.type;
+        inputElement.value = param.defaultValue || '';
+    }
+    // Common properties
+    inputElement.id = inputId;
+    inputElement.name = param.name;
+    paramItem.appendChild(inputElement);
+    return paramItem;
+}
+
+function displayResults(results, responseArea, prettify) {
+    if (results === null || results === undefined) {
+        // responseArea.value = ''; // Keep placeholder or old error message
+        return;
+    }
+    try {
+        if (prettify) {
+            responseArea.value = JSON.stringify(JSON.parse(results.result), null, 2);
+        } else {
+            responseArea.value = JSON.stringify(JSON.parse(results.result));
+        }
+    } catch (error) {
+        console.error("Error stringifying results:", error);
+        responseArea.value = "Error displaying results.";
+    }
+}
+
+// function to run the tool (calls API version of endpoint)
+async function handleRunTool(toolId, form, responseArea, parameters, prettifyCheckbox, updateLastResults) {
+    responseArea.value = 'Running tool...';
+    updateLastResults(null); // Clear last results before new run
+    const formData = new FormData(form);
+    const typedParams = {};
+
+    for (const param of parameters) {
+        const rawValue = formData.get(param.name);
+
+        if (rawValue === null || rawValue === undefined || rawValue === '') {
+            if (param.required) {
+                 console.warn(`Required parameter ${param.name} is missing.`);
+            }
+            typedParams[param.name] = null;
+            continue;
+        }
+
+        const valueType = param.valueType;
+
+        try {
+            if (valueType && valueType.startsWith('array<')) {
+                const elementType = valueType.substring(6, valueType.length - 1);
+                let parsedArray;
+                try {
+                    parsedArray = JSON.parse(rawValue);
+                } catch (e) {
+                    throw new Error(`Invalid JSON format for ${param.name}. ${e.message}`);
+                }
+
+                if (!Array.isArray(parsedArray)) {
+                    throw new Error(`Input for ${param.name} must be a JSON array (e.g., ["a", "b"]).`);
+                }
+
+                if (elementType === 'number') {
+                    typedParams[param.name] = parsedArray.map((item, index) => {
+                        const num = Number(item);
+                        if (isNaN(num)) {
+                            throw new Error(`Invalid number "${item}" found in array for ${param.name} at index ${index}.`);
+                        }
+                        return num;
+                    });
+                } else if (elementType === 'boolean') {
+                    typedParams[param.name] = parsedArray.map(item => item === true || String(item).toLowerCase() === 'true');
+                } else { // string or other types
+                    typedParams[param.name] = parsedArray;
+                }
+            } else {
+                switch (valueType) {
+                    case 'number':
+                        const num = Number(rawValue);
+                        if (isNaN(num)) {
+                            throw new Error(`Invalid number input for ${param.name}: ${rawValue}`);
+                        }
+                        typedParams[param.name] = num;
+                        break;
+                    case 'boolean':
+                        typedParams[param.name] = rawValue === 'true';
+                        break;
+                    case 'string':
+                    default:
+                        typedParams[param.name] = rawValue;
+                        break;
+                }
+            }
+        } catch (error) {
+            console.error('Error processing parameter:', param.name, error);
+            responseArea.value = `Error for ${param.name}: ${error.message}`;
+            return; // Stop processing
+        }
+    }
+
+    console.log('Running tool:', toolId, 'with typed params:', typedParams);
+    try {
+        const response = await fetch(`/api/tool/${toolId}/invoke`, {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify(typedParams)
+        });
+        if (!response.ok) {
+            const errorBody = await response.text();
+            throw new Error(`HTTP error ${response.status}: ${errorBody}`);
+        }
+        const results = await response.json();
+        updateLastResults(results); // Update the stored results
+        displayResults(results, responseArea, prettifyCheckbox.checked); // Display formatted results
+    } catch (error) {
+        console.error('Error running tool:', error);
+        responseArea.value = `Error: ${error.message}`;
+        updateLastResults(null); // Clear results on error
+    }
+}
+
+// renders the tool display area
+export function renderToolInterface(tool, containerElement) {
+    containerElement.innerHTML = '';
+    const toolId = tool.id;
+
+    let lastResults = null; // Store the most recent successful result object
+
+    // Function to update lastResults, closure to keep it private to this scope
+    const updateLastResults = (newResults) => {
+        lastResults = newResults;
+    };
+
+    const gridContainer = document.createElement('div');
+    gridContainer.className = 'tool-details-grid';
+
+    const toolInfoContainer = document.createElement('div');
+    toolInfoContainer.className = 'tool-info';
+
+    const nameBox = document.createElement('div');
+    nameBox.className = 'tool-box tool-name';
+    nameBox.innerHTML = `<h5>Name:</h5><p>${tool.name}</p>`;
+    toolInfoContainer.appendChild(nameBox);
+
+    const descBox = document.createElement('div');
+    descBox.className = 'tool-box tool-description';
+    descBox.innerHTML = `<h5>Description:</h5><p>${tool.description}</p>`;
+    toolInfoContainer.appendChild(descBox);
+
+    gridContainer.appendChild(toolInfoContainer);
+
+    const paramsContainer = document.createElement('div');
+    paramsContainer.className = 'tool-params tool-box';
+    paramsContainer.innerHTML = '<h5>Parameters:</h5>';
+    const form = document.createElement('form');
+    form.id = `tool-params-form-${toolId}`;
+
+    tool.parameters.forEach(param => {
+        form.appendChild(createParamInput(param, toolId));
+    });
+    paramsContainer.appendChild(form);
+
+    const runButton = document.createElement('button');
+    runButton.className = 'run-tool-btn';
+    runButton.textContent = 'Run Tool';
+    paramsContainer.appendChild(runButton);
+
+    gridContainer.appendChild(paramsContainer);
+    containerElement.appendChild(gridContainer);
+
+    // Response Area
+    const responseContainer = document.createElement('div');
+    responseContainer.className = 'tool-response tool-box';
+
+    const responseHeader = document.createElement('h5');
+    responseHeader.textContent = 'Response:';
+    responseContainer.appendChild(responseHeader);
+
+    // Prettify Checkbox
+    const prettifyId = `prettify-${toolId}`;
+    const prettifyLabel = document.createElement('label');
+    prettifyLabel.setAttribute('for', prettifyId);
+    prettifyLabel.textContent = 'Prettify JSON';
+    prettifyLabel.style.display = 'inline-block';
+    prettifyLabel.style.marginLeft = '10px';
+    prettifyLabel.style.verticalAlign = 'middle';
+    prettifyLabel.style.cursor = 'pointer';
+
+    const prettifyCheckbox = document.createElement('input');
+    prettifyCheckbox.type = 'checkbox';
+    prettifyCheckbox.id = prettifyId;
+    prettifyCheckbox.checked = true; // Default to pretty
+    prettifyCheckbox.style.verticalAlign = 'middle';
+    prettifyCheckbox.style.cursor = 'pointer';
+
+    const prettifyDiv = document.createElement('div');
+    prettifyDiv.style.marginBottom = '5px';
+    prettifyDiv.appendChild(prettifyCheckbox);
+    prettifyDiv.appendChild(prettifyLabel);
+    responseContainer.appendChild(prettifyDiv);
+
+    const responseAreaId = `tool-response-area-${toolId}`;
+    const responseArea = document.createElement('textarea');
+    responseArea.id = responseAreaId;
+    responseArea.readOnly = true;
+    responseArea.placeholder = 'Results will appear here...';
+    responseArea.style.width = 'calc(100% - 12px)';
+    responseArea.rows = 10;
+    responseContainer.appendChild(responseArea);
+
+    containerElement.appendChild(responseContainer);
+
+    // Event Listeners
+    prettifyCheckbox.addEventListener('change', () => {
+        if (lastResults) {
+            displayResults(lastResults, responseArea, prettifyCheckbox.checked);
+        }
+    });
+
+    runButton.addEventListener('click', (event) => {
+        event.preventDefault();
+        handleRunTool(toolId, form, responseArea, tool.parameters, prettifyCheckbox, updateLastResults);
+    });
+}
--- a/internal/server/static/js/tools.js
+++ b/internal/server/static/js/tools.js
@@ -0,0 +1,156 @@
+import { renderToolInterface } from "./toolDisplay.js";
+
+document.addEventListener('DOMContentLoaded', () => {
+    const toolDisplayArea = document.getElementById('tool-display-area');
+    const secondaryPanelContent = document.getElementById('secondary-panel-content');
+
+    if (!secondaryPanelContent || !toolDisplayArea) {
+        console.error('Required DOM elements not found.');
+        return;
+    }
+
+    /**
+     * Fetches the list of tools from the API and renders them in the secondary panel.
+     */
+    async function loadTools() {
+        secondaryPanelContent.innerHTML = '<p>Fetching tools...</p>';
+        try {
+            // This endpoint should list tools, the structure you provided seems to be for a single tool
+            const response = await fetch('/api/toolset');
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const apiResponse = await response.json();
+            renderToolList(apiResponse);
+        } catch (error) {
+            console.error('Failed to load tools:', error);
+            secondaryPanelContent.innerHTML = '<p class="error">Failed to load tools. Please try again later.</p>';
+        }
+    }
+
+    /**
+     * Renders the list of tools in the secondary navigation panel.
+     * @param {object} apiResponse - The parsed JSON response from the API.
+     */
+    function renderToolList(apiResponse) {
+        secondaryPanelContent.innerHTML = '';
+
+        if (!apiResponse || typeof apiResponse.tools !== 'object' || apiResponse.tools === null) {
+            console.error('Error: Expected an object with a "tools" property, but received:', apiResponse);
+            secondaryPanelContent.textContent = 'Error: Invalid response format from toolset API.';
+            return;
+        }
+
+        const toolsObject = apiResponse.tools;
+        const toolNames = Object.keys(toolsObject);
+
+        if (toolNames.length === 0) {
+            secondaryPanelContent.textContent = 'No tools found.';
+            return;
+        }
+
+        const ul = document.createElement('ul');
+        toolNames.forEach(toolName => {
+            const li = document.createElement('li');
+            const button = document.createElement('button');
+            button.textContent = toolName;
+            button.dataset.toolname = toolName;
+            button.classList.add('tool-button');
+            button.addEventListener('click', handleToolClick);
+            li.appendChild(button);
+            ul.appendChild(li);
+        });
+        secondaryPanelContent.appendChild(ul);
+    }
+
+    /**
+     * Handles the click event on a tool button in the secondary panel.
+     * @param {MouseEvent} event - The click event.
+     */
+    function handleToolClick(event) {
+        const toolName = event.target.dataset.toolname;
+        if (toolName) {
+            const currentActive = secondaryPanelContent.querySelector('.tool-button.active');
+            if (currentActive) {
+                currentActive.classList.remove('active');
+            }
+            event.target.classList.add('active');
+            fetchToolDetails(toolName);
+        }
+    }
+
+    /**
+     * Fetches details for a specific tool from the API and renders the UI.
+     * @param {string} toolName - The name of the tool.
+     */
+    async function fetchToolDetails(toolName) {
+        toolDisplayArea.innerHTML = '<p>Loading tool details...</p>';
+
+        try {
+            const response = await fetch(`/api/tool/${encodeURIComponent(toolName)}`);
+            if (!response.ok) {
+                 throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const apiResponse = await response.json();
+
+            if (!apiResponse.tools || !apiResponse.tools[toolName]) {
+                throw new Error(`Tool "${toolName}" data not found in API response.`);
+            }
+            const toolObject = apiResponse.tools[toolName];
+
+            const toolInterfaceData = {
+                id: toolName,
+                name: toolName,
+                description: toolObject.description || "No description provided.",
+                parameters: (toolObject.parameters || []).map(param => {
+                    let inputType = 'text'; // Default HTML input type
+                    let options;
+                    const apiType = param.type ? param.type.toLowerCase() : 'string';
+                    let valueType = 'string'; // Data type for API payload
+                    let label = param.description || param.name;
+
+                    if (apiType === 'integer' || apiType === 'number') {
+                        inputType = 'number';
+                        valueType = 'number';
+                    } else if (apiType === 'boolean') {
+                        inputType = 'select';
+                        options = ['true', 'false'];
+                        valueType = 'boolean';
+                    } else if (apiType === 'array') {
+                        inputType = 'textarea'; // Use textarea for array inputs
+                        const itemType = param.items && param.items.type ? param.items.type.toLowerCase() : 'string';
+                        valueType = `array<${itemType}>`;
+                        label += ' (JSON Array string)'; // Hint to the user
+                    } else if (param.enum && Array.isArray(param.enum)) {
+                        inputType = 'select';
+                        options = param.enum;
+                        valueType = 'string';
+                    }
+                    console.log(param.name, inputType, label, apiType, valueType)
+
+                    return {
+                        name: param.name,
+                        type: inputType,    // For HTML input element type
+                        valueType: valueType, // For API request payload type
+                        label: label,
+                        required: param.required || false,
+                        options: options,
+                        defaultValue: param.default,
+                    };
+                })
+            };
+
+            console.log("Transformed toolInterfaceData:", toolInterfaceData);
+
+            renderToolInterface(toolInterfaceData, toolDisplayArea);
+
+        } catch (error) {
+            console.error(`Failed to load details for tool "${toolName}":`, error);
+            toolDisplayArea.innerHTML = `<p class="error">Failed to load details for ${toolName}. ${error.message}</p>`;
+        }
+    }
+
+
+    // Initial load of tools list
+    loadTools();
+});
--- a/internal/server/static/tools.html
+++ b/internal/server/static/tools.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Page Three</title>
+    <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+    <nav class="left-nav">
+        <div class="nav-logo">
+            <img src="/ui/assets/mcptoolboxlogo.png" alt="App Logo">
+        </div>
+        <ul>
+            <li><a href="/ui/sources">Sources</a></li>
+            <li><a href="/ui/authservices">Auth Services</a></li>
+            <li><a href="/ui/tools" class="active">Tools</a></li>
+            <li><a href="/ui/toolsets">Toolsets</a></li>
+        </ul>
+    </nav>
+
+    <aside class="second-nav">
+        <h4>My Tools</h4>
+        <div id="secondary-panel-content">
+            <p>Fetching tools...</p>
+        </div>
+    </aside>
+
+    <div class="main-content-area">
+        <div class="top-bar">
+            <span>Toolbox UI Inspector</span>
+        </div>
+        <main class="content" id="tool-display-area">
+            <h1>Welcome to the Main Page</h1>
+            <p>This is the main content area. Click a tab on the left to navigate.</p>
+        </main>
+    </div>
+    <script type="module" src="js/tools.js"></script>
+</body>
+</html>
--- a/internal/server/web.go
+++ b/internal/server/web.go
@@ -0,0 +1,53 @@
+package server
+
+import (
+	"bytes"
+	"embed"
+	"fmt"
+	"io"
+	"io/fs"
+	"net/http"
+
+	"github.com/go-chi/chi/v5"
+	"github.com/go-chi/chi/v5/middleware"
+)
+
+//go:embed all:static
+var staticContent embed.FS
+
+// webRouter creates a router that represents the routes under /ui
+func webRouter() (chi.Router, error) {
+	r := chi.NewRouter()
+	r.Use(middleware.StripSlashes)
+
+	// direct routes for html pages to provide clean URLs
+	r.Get("/", func(w http.ResponseWriter, r *http.Request) { serveHTML(w, r, "static/index.html") })
+	r.Get("/tools", func(w http.ResponseWriter, r *http.Request) { serveHTML(w, r, "static/tools.html") })
+
+	// handler for all other static files/assets
+	staticFS, _ := fs.Sub(staticContent, "static")
+	r.Handle("/*", http.StripPrefix("/ui", http.FileServer(http.FS(staticFS))))
+
+	return r, nil
+}
+
+func serveHTML(w http.ResponseWriter, r *http.Request, filepath string) {
+	file, err := staticContent.Open(filepath)
+	if err != nil {
+		http.Error(w, "File not found", http.StatusNotFound)
+		return
+	}
+	defer file.Close()
+
+	fileBytes, err := io.ReadAll(file)
+	if err != nil {
+		http.Error(w, fmt.Sprintf("Error reading file: %v", err), http.StatusInternalServerError)
+		return
+	}
+
+	fileInfo, err := file.Stat()
+	if err != nil {
+		return
+	}
+	http.ServeContent(w, r, fileInfo.Name(), fileInfo.ModTime(), bytes.NewReader(fileBytes))
+}
--- a/internal/server/web_test.go
+++ b/internal/server/web_test.go
@@ -0,0 +1,77 @@
+package server
+
+import (
+	"io"
+	"net/http"
+	"net/http/httptest"
+	"strings"
+	"testing"
+
+	"github.com/go-goquery/goquery"
+)
+
+func TestWebEndpoint(t *testing.T) {
+	router, err := webRouter()
+	if err != nil {
+		t.Fatalf("Failed to create webRouter: %v", err)
+	}
+
+	ts := httptest.NewServer(router)
+	defer ts.Close()
+
+	testCases := []struct {
+		name            string
+		method          string
+		path            string
+		wantStatus      int
+		wantContentType string
+		wantPageTitle   string
+	}{
+		{
+			name:            "web index page GET",
+			method:          http.MethodGet,
+			path:            "/",
+			wantStatus:      http.StatusOK,
+			wantContentType: "text/html; charset=utf-8",
+			wantPageTitle:   "Toolbox UI",
+		},
+	}
+	for _, tc := range testCases {
+		t.Run(tc.name, func(t *testing.T) {
+			url := ts.URL + tc.path
+			req, err := http.NewRequest(tc.method, url, nil)
+			if err != nil {
+				t.Fatalf("Failed to create request: %v", err)
+			}
+
+			resp, err := http.DefaultClient.Do(req)
+			if err != nil {
+				t.Fatalf("Failed to send request: %v", err)
+			}
+			defer resp.Body.Close()
+
+			body, err := io.ReadAll(resp.Body)
+			if err != nil {
+				t.Fatalf("Failed to read response body: %v", err)
+			}
+
+			if resp.StatusCode != tc.wantStatus {
+				t.Errorf("Unexpected status code: got %d, want %d, body: %s", resp.StatusCode, tc.wantStatus, string(body))
+			}
+
+			if contentType := resp.Header.Get("Content-Type"); contentType != tc.wantContentType {
+				t.Errorf("Unexpected Content-Type header: got %s, want %s", contentType, tc.wantContentType)
+			}
+
+			doc, err := goquery.NewDocumentFromReader(strings.NewReader(string(body)))
+			if err != nil {
+				t.Fatalf("Failed to parse HTML: %v", err)
+			}
+			gotPageTitle := doc.Find("title").Text()
+
+			if gotPageTitle != tc.wantPageTitle {
+				t.Errorf("Unexpected page title: got %q, want %q", gotPageTitle, tc.wantPageTitle)
+			}
+		})
+	}
+}
Author	SHA1	Message	Date
Alex Talreja	decff260fb	feat: run tool button	2025-07-11 05:44:36 +00:00
Alex Talreja	dd61496420	create skeleton landing page	2025-07-09 22:02:39 +00:00
Alex Talreja	9cd494b18a	resolve comments	2025-07-09 21:57:53 +00:00
Alex Talreja	005a1e624c	feat: launch web server with --web-ui flag	2025-07-09 21:57:48 +00:00