feat(web): backend service integration

- [x] Add create server method
- [x] Add remove server method

Author: 0xmad

internal/web/domain/server.go

@@ -50,11 +50,11 @@ func (h *APIHandlers) RegisterRoutes(mux *http.ServeMux /* or other router type
 	// For GET requests on server details, tools
 	mux.HandleFunc("GET /api/mcp/servers/", h.routeServerGetRequests)
 
-	// For PUT requests (update server)
-	mux.HandleFunc("PUT /api/mcp/servers/", h.routeServerPutRequests)
+	// For update requests (update server)
+	mux.HandleFunc("POST /api/mcp/servers/update/", h.routeServerUpdateRequests)
 
-	// For DELETE requests (remove server)
-	mux.HandleFunc("DELETE /api/mcp/servers/", h.routeServerDeleteRequests)
+	// For delete requests (remove server)
+	mux.HandleFunc("POST /api/mcp/servers/remove/", h.routeServerDeleteRequests)
 
 	// For POST requests (rediscover tools)
 	mux.HandleFunc("POST /api/mcp/servers/", h.routeServerPostRequests)
@@ -67,9 +67,6 @@ func (h *APIHandlers) RegisterRoutes(mux *http.ServeMux /* or other router type
 	mux.HandleFunc("GET /api/docs/openapi.yaml", h.ServeOpenAPISpec)
 	mux.HandleFunc("GET /api/docs", h.ServeSwaggerUI)
 	mux.HandleFunc("GET /api/docs/", h.ServeSwaggerUI)
-
-	// Root handler - REMOVED to avoid conflict with redirect in app.go
-	// mux.HandleFunc("/", h.rootHandler)
 }
 
 // HealthCheck handles GET /api/health
@@ -82,7 +79,7 @@ func (h *APIHandlers) HealthCheck(w http.ResponseWriter, _ *http.Request) {
 // routeServerGetRequests handles GET requests for server-specific paths and routes to appropriate handlers
 func (h *APIHandlers) routeServerGetRequests(w http.ResponseWriter, r *http.Request) {
 	// Extract server ID and subpath
-	serverID, subpath, err := parseServerPath(r.URL.Path)
+	serverID, subpath, err := parseServerPath(r.URL.Path, "/api/mcp/servers/")
 	if err != nil {
 		http.Error(w, err.Error(), http.StatusBadRequest)
 		return
@@ -104,7 +101,7 @@ func (h *APIHandlers) routeServerGetRequests(w http.ResponseWriter, r *http.Requ
 // routeServerPostRequests handles POST requests for server-specific paths and routes to appropriate handlers
 func (h *APIHandlers) routeServerPostRequests(w http.ResponseWriter, r *http.Request) {
 	// Extract server ID and subpath
-	serverID, subpath, err := parseServerPath(r.URL.Path)
+	serverID, subpath, err := parseServerPath(r.URL.Path, "/api/mcp/servers/")
 	if err != nil {
 		http.Error(w, err.Error(), http.StatusBadRequest)
 		return
@@ -123,20 +120,20 @@ func (h *APIHandlers) routeServerPostRequests(w http.ResponseWriter, r *http.Req
 	}
 }
 
-// routeServerPutRequests handles PUT requests for server-specific paths
-func (h *APIHandlers) routeServerPutRequests(w http.ResponseWriter, r *http.Request) {
-	serverID, subpath, err := parseServerPath(r.URL.Path)
+// routeServerUpdateRequests handles PUT requests for server-specific paths
+func (h *APIHandlers) routeServerUpdateRequests(w http.ResponseWriter, r *http.Request) {
+	serverID, subpath, err := parseServerPath(r.URL.Path, "/api/mcp/servers/update/")
 	if err != nil {
 		http.Error(w, err.Error(), http.StatusBadRequest)
 		return
 	}
 
 	switch subpath {
 	case "":
-		// PUT /api/mcp/servers/:id - Update server name/url
+		// POST /api/mcp/servers/update/:id - Update server name/url
 		h.UpdateMCPServer(w, r, serverID)
 	case "status":
-		// PUT /api/mcp/servers/:id/status - Update server connection status
+		// POST /api/mcp/servers/update/:id/status - Update server connection status
 		h.UpdateMCPServerStatus(w, r, serverID)
 	default:
 		http.NotFound(w, r)
@@ -145,15 +142,15 @@ func (h *APIHandlers) routeServerPutRequests(w http.ResponseWriter, r *http.Requ
 
 // routeServerDeleteRequests handles DELETE requests for server-specific paths (Recommended structure)
 func (h *APIHandlers) routeServerDeleteRequests(w http.ResponseWriter, r *http.Request) {
-	serverID, subpath, err := parseServerPath(r.URL.Path)
+	serverID, subpath, err := parseServerPath(r.URL.Path, "/api/mcp/servers/remove/")
 	if err != nil {
 		http.Error(w, err.Error(), http.StatusBadRequest)
 		return
 	}
 
 	switch subpath {
 	case "":
-		// DELETE /api/mcp/servers/:id - Remove server
+		// POST /api/mcp/servers/remove/:id - Remove server
 		h.RemoveMCPServer(w, r, serverID)
 	default:
 		http.NotFound(w, r)
@@ -162,9 +159,9 @@ func (h *APIHandlers) routeServerDeleteRequests(w http.ResponseWriter, r *http.R
 
 // parseServerPath extracts the server ID and subpath from a URL path
 // Returns serverID, subpath, error
-func parseServerPath(path string) (int64, string, error) {
-	// Extract path after /api/mcp/servers/
-	path = path[len("/api/mcp/servers/"):]
+func parseServerPath(path string, prefix string) (int64, string, error) {
+	// Extract path after prefix
+	path = path[len(prefix):]
 
 	// Split the remaining path
 	parts := splitPath(path)
@@ -189,42 +186,37 @@ func parseServerPath(path string) (int64, string, error) {
 
 // --- MCP Server Handlers ---
 
-type addServerRequest struct {
-	Name string `json:"name"`
-	URL  string `json:"url"`
-}
-
 // AddMCPServer handles POST /api/mcp/servers
 func (h *APIHandlers) AddMCPServer(w http.ResponseWriter, r *http.Request) {
-	var req addServerRequest
-	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
-		http.Error(w, fmt.Sprintf("Invalid request body: %v", err), http.StatusBadRequest)
+	// Parse form data
+	if err := r.ParseForm(); err != nil {
+		h.logger.Error().Err(err).Msg("Failed to parse form data")
+		http.Redirect(w, r, "/error?error=Form parse error", http.StatusSeeOther)
 		return
 	}
 
-	if req.Name == "" || req.URL == "" {
-		http.Error(w, "Server name and URL are required", http.StatusBadRequest)
+	name := r.FormValue("name")
+	url := r.FormValue("url")
+
+	if name == "" || url == "" {
+		http.Redirect(w, r, "/error?error=Missing name or url", http.StatusSeeOther)
 		return
 	}
 
-	newServer, err := h.backendService.AddMCPServer(req.Name, req.URL)
+	_, err := h.backendService.AddMCPServer(name, url)
 	if err != nil {
 		h.logger.Error().Err(err).Msg("Error adding MCP server via API")
-		// TODO: Check error type for user-friendly messages (e.g., duplicate URL)
-		if err.Error() == fmt.Sprintf("MCP server with URL '%s' already exists", req.URL) {
-			http.Error(w, err.Error(), http.StatusConflict) // 409 Conflict
+
+		if err.Error() == fmt.Sprintf("MCP server with URL '%s' already exists", url) {
+			http.Redirect(w, r, "/error?error=Server already exists", http.StatusSeeOther)
 			return
 		}
-		http.Error(w, fmt.Sprintf("Failed to add server: %v", err), http.StatusInternalServerError)
+
+		http.Redirect(w, r, "/error?error=Internal server error", http.StatusSeeOther)
 		return
 	}
 
-	w.Header().Set("Content-Type", "application/json")
-	w.WriteHeader(http.StatusCreated) // 201 Created
-	if err := json.NewEncoder(w).Encode(newServer); err != nil {
-		h.logger.Error().Err(err).Msg("Error encoding added server response")
-		// Header already sent, can't change status code
-	}
+	http.Redirect(w, r, "/success", http.StatusSeeOther)
 }
 
 // ListMCPServers handles GET /api/mcp/servers - Returns full JSON
@@ -345,22 +337,22 @@ func (h *APIHandlers) UpdateMCPServer(w http.ResponseWriter, r *http.Request, se
 	}
 }
 
-// RemoveMCPServer handles DELETE /api/mcp/servers/:id
+// RemoveMCPServer handles POST /api/mcp/servers/:id
 func (h *APIHandlers) RemoveMCPServer(w http.ResponseWriter, r *http.Request, serverID int64) {
-	// ID is now parsed in routeServerDeleteRequests
 	err := h.backendService.RemoveMCPServer(serverID)
+
 	if err != nil {
 		h.logger.Error().Err(err).Int64("serverId", serverID).Msg("Error removing MCP server via API")
-		// Check if error is "not found" vs other internal errors
-		if strings.Contains(err.Error(), "not found") { // Basic check
-			http.Error(w, err.Error(), http.StatusNotFound)
+
+		if strings.Contains(err.Error(), "not found") {
+			http.Redirect(w, r, "/error?error=Server not found", http.StatusSeeOther)
 		} else {
-			http.Error(w, "Failed to remove server", http.StatusInternalServerError)
+			http.Redirect(w, r, "/error?error=Failed to remove server", http.StatusSeeOther)
 		}
 		return
 	}
 
-	w.WriteHeader(http.StatusNoContent) // 204 No Content on successful delete
+	http.Redirect(w, r, "/success", http.StatusSeeOther)
 }
 
 // --- Tool Management Handlers ---

internal/web/handlers/api.go

@@ -5,19 +5,21 @@ import (
 	"fmt"
 	"net/http"
 
+	"github.com/co-browser/agent-browser/internal/backend"
 	"github.com/co-browser/agent-browser/internal/log"
 	"github.com/co-browser/agent-browser/internal/web/templates"
 )
 
 // UIHandler holds dependencies for UI handlers.
 type UIHandler struct {
-	log log.Logger
+	backendService backend.Service
+	log            log.Logger
 }
 
 // NewUIHandler creates a handler for serving the main UI page.
 // It now requires a logger.
-func NewUIHandler(logger log.Logger) http.Handler {
-	h := &UIHandler{log: logger}
+func NewUIHandler(bs backend.Service, logger log.Logger) http.Handler {
+	h := &UIHandler{backendService: bs, log: logger}
 	mux := http.NewServeMux()
 
 	mux.HandleFunc("/", h.serveIndex)
@@ -30,24 +32,17 @@ func NewUIHandler(logger log.Logger) http.Handler {
 
 // serveIndex handles requests for the main UI page.
 func (h *UIHandler) serveIndex(w http.ResponseWriter, r *http.Request) {
+	// Call backend service directly to get the list of servers
+	servers, listServersError := h.backendService.ListMCPServers()
+
+	if listServersError != nil {
+		h.log.Error().Err(listServersError).Msg("failed to fetch MCP server list")
+		http.Error(w, "failed to load server list", http.StatusInternalServerError)
+		return
+	}
+
 	err := templates.IndexPage(templates.IndexPageProps{
-		Servers: []domain.ServerItem{
-			{
-				ID:   "1",
-				Name: "Server Alpha",
-				IP:   "192.168.1.10",
-			},
-			{
-				ID:   "2",
-				Name: "Server Beta",
-				IP:   "192.168.1.11",
-			},
-			{
-				ID:   "3",
-				Name: "Server Charlie",
-				IP:   "192.168.1.12",
-			},
-		},
+		Servers: servers,
 	}).Render(r.Context(), w)
 
 	if err != nil {

internal/web/handlers/ui.go

@@ -12,17 +12,15 @@ import (
 )
 
 // NewMux creates the main HTTP ServeMux.
-func NewMux(params struct {
-	fx.In
-
-	UIHandler  http.Handler `name:"uiHandler"`
-	APIHandler http.Handler `name:"apiHandler"`
-}) *http.ServeMux {
+func NewMux(
+	UIHandler http.Handler,
+	APIHandlers http.Handler,
+) *http.ServeMux {
 	mux := http.NewServeMux()
 	// Define routes here
 	mux.Handle("/metrics", promhttp.Handler())
-	mux.Handle("/", params.UIHandler)
-	mux.Handle("/api/", params.APIHandler)
+	mux.Handle("/", UIHandler)
+	mux.Handle("/api/", APIHandlers)
 
 	return mux
 }

internal/web/server.go

@@ -43,7 +43,7 @@ css addServerFormButton() {
 templ AddServerForm() {
 	<section class={ addServerForm() } data-testid="add-server-form">
 		<h2>Add New Server</h2>
-		<form method="POST" action="/api/create">
+		<form method="POST" action="/api/mcp/servers">
 			<div class={ addServerFormField() }>
 				<label class={ addServerFormFieldLabel() } for="name">
 					Server Name:
@@ -53,22 +53,20 @@ templ AddServerForm() {
 					id="name"
 					type="text"
 					name="name"
-					pattern="^[a-zA-Z0-9]([a-zA-Z0-9-_]{0,62}[a-zA-Z0-9])?$"
 					placeholder="Enter server name"
 					required
 				/>
 			</div>
 			<div class={ addServerFormField() }>
-				<label class={ addServerFormFieldLabel() } for="ip">
-					IP Address:
+				<label class={ addServerFormFieldLabel() } for="url">
+					URL Address:
 				</label>
 				<input
 					class={ addServerFormFieldInput() }
-					id="ip"
+					id="url"
 					type="text"
-					pattern="^((25[0-5]|2[0-4][0-9]|1?[0-9]{1,2})\.){3}(25[0-5]|2[0-4][0-9]|1?[0-9]{1,2})$"
-					name="ip"
-					placeholder="Enter ip address"
+					name="url"
+					placeholder="Enter URL address"
 					required
 				/>
 			</div>

internal/web/templates/blocks/add_server_form.templ

@@ -1,7 +1,9 @@
 package blocks
 
 import (
-	"github.com/co-browser/agent-browser/internal/web/domain"
+	"fmt"
+
+	"github.com/co-browser/agent-browser/internal/backend/models"
 	"github.com/co-browser/agent-browser/internal/web/templates/components"
 )
 
@@ -44,7 +46,7 @@ css serverListItemName() {
 	font-weight: bold;
 }
 
-css serverListItemIP() {
+css serverListItemURL() {
 	display: block;
 	font-size: 0.9em;
 	font-style: italic;
@@ -64,7 +66,7 @@ css serverListItemRemove() {
 	border-radius: 4px;
 }
 
-templ Servers(servers []domain.ServerItem) {
+templ Servers(servers []models.MCPServer) {
 	<section class={ serverSection() }>
 		<div class={ serverSectionHeader() }>
 			<h2 class={ serverTitle() }>MCP servers</h2>
@@ -78,14 +80,14 @@ templ Servers(servers []domain.ServerItem) {
 	</section>
 }
 
-templ Server(server domain.ServerItem) {
+templ Server(server models.MCPServer) {
 	<li class={ serverListItem() }>
 		<div class={ serverListItemWrapper() }>
 			<strong class={ serverListItemName() }>{ server.Name }</strong>
-			<div class={ serverListItemIP() }>{ server.IP }</div>
+			<div class={ serverListItemURL() }>{ server.URL }</div>
 		</div>
-		<form method="POST" action="/api/remove">
-			<input type="hidden" name="id" value={ server.ID }/>
+		<form method="POST" action={ templ.SafeURL(fmt.Sprintf("/api/mcp/servers/remove/%d", server.ID)) }>
+			<input type="hidden" name="id" value={ fmt.Sprintf("%d", server.ID) }/>
 			@components.Button(components.ButtonProps{Label: "Remove", Type: "submit", Class: serverListItemRemove()})
 		</form>
 	</li>

internal/web/templates/blocks/servers.templ

@@ -1,8 +1,8 @@
 package components
 
 type LinkProps struct {
-	Name string
-	Href templ.SafeURL
+	Name  string
+	Href  templ.SafeURL
 	Class templ.CSSClass
 }