feat: Add configuration management endpoints and UI integration

- Introduced API endpoints for retrieving, validating, and applying configurations.
- Enhanced the Settings.vue component with a configuration editor using vue-monaco-editor for JSON editing.
- Implemented validation error handling and display for configuration changes.
- Added support for hot-reloading configuration changes without server restarts for certain fields.
- Updated internal data structures to support configuration management.

This feature improves the flexibility and usability of configuration management within the MCPProxy.

Author: Dumbris

.gitignore

@@ -111,4 +111,5 @@ build-info.json
 .gocache/
 mcpproxy-tray
 config.db.backup.*
-node_modules/
+node_modules/
+certs/

frontend/package-lock.json

@@ -13,10 +13,18 @@
     "test:ui": "vitest --ui",
     "coverage": "vitest run --coverage"
   },
-  "keywords": ["mcpproxy", "vue", "typescript", "daisyui", "control-panel"],
+  "keywords": [
+    "mcpproxy",
+    "vue",
+    "typescript",
+    "daisyui",
+    "control-panel"
+  ],
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@guolao/vue-monaco-editor": "^1.5.5",
+    "monaco-editor": "^0.53.0",
     "pinia": "^2.3.1",
     "vue": "^3.5.21",
     "vue-router": "^4.5.1"

frontend/package.json

@@ -1,4 +1,4 @@
-import type { APIResponse, Server, Tool, SearchResult, StatusUpdate, SecretRef, MigrationAnalysis, ConfigSecretsResponse, GetToolCallsResponse, GetToolCallDetailResponse, GetServerToolCallsResponse } from '@/types'
+import type { APIResponse, Server, Tool, SearchResult, StatusUpdate, SecretRef, MigrationAnalysis, ConfigSecretsResponse, GetToolCallsResponse, GetToolCallDetailResponse, GetServerToolCallsResponse, GetConfigResponse, ValidateConfigResponse, ConfigApplyResult } from '@/types'
 
 // Event types for API service
 export interface APIAuthEvent {
@@ -347,6 +347,25 @@ class APIService {
     return this.request<GetServerToolCallsResponse>(url)
   }
 
+  // Configuration management endpoints
+  async getConfig(): Promise<APIResponse<GetConfigResponse>> {
+    return this.request<GetConfigResponse>('/api/v1/config')
+  }
+
+  async validateConfig(config: any): Promise<APIResponse<ValidateConfigResponse>> {
+    return this.request<ValidateConfigResponse>('/api/v1/config/validate', {
+      method: 'POST',
+      body: JSON.stringify(config)
+    })
+  }
+
+  async applyConfig(config: any): Promise<APIResponse<ConfigApplyResult>> {
+    return this.request<ConfigApplyResult>('/api/v1/config/apply', {
+      method: 'POST',
+      body: JSON.stringify(config)
+    })
+  }
+
   // Utility methods
   async testConnection(): Promise<boolean> {
     try {

frontend/src/services/api.ts

@@ -130,4 +130,37 @@ export interface GetServerToolCallsResponse {
   server_name: string
   tool_calls: ToolCallRecord[]
   total: number
+}
+
+// Configuration management types
+export interface ValidationError {
+  field: string
+  message: string
+}
+
+export interface ConfigApplyResult {
+  success: boolean
+  applied_immediately: boolean
+  requires_restart: boolean
+  restart_reason?: string
+  validation_errors?: ValidationError[]
+  changed_fields?: string[]
+}
+
+export interface GetConfigResponse {
+  config: any  // The full configuration object
+  config_path: string
+}
+
+export interface ValidateConfigRequest {
+  config: any
+}
+
+export interface ValidateConfigResponse {
+  valid: boolean
+  errors?: ValidationError[]
+}
+
+export interface ApplyConfigRequest {
+  config: any
 }