feat: Auto-connect WebMCP without agent intervention

- Add requestToken() and autoConnect() functions to request tokens directly from WebMCP server
- Add /api/webmcp-request-token endpoint to proxy token requests (for HTTPS/Traefik)
- Add webmcpHttp endpoint configuration for direct WebMCP HTTP API access
- Update App.vue to auto-connect on load with polling fallback
- Add kill-ports script to clear ports 4101, 4102, 4103, 4105 before starting

server/routes/index.ts

@@ -1,7 +1,7 @@
 import { optionsResponse, notFoundResponse } from '../utils/cors'
 import { handleHistory } from './history'
 import { handleConfig, handleHealth } from './config'
-import { handleWebMCPToken } from './webmcp'
+import { handleWebMCPToken, handleWebMCPRequestToken } from './webmcp'
 import { handleComponents, handleComponentById, handleComponentUsage } from './components'
 import { handleThemes, handleActiveTheme, handleDesignTokens, handleThemeById, handleThemeExport } from './themes'
 import { handleCanvas, handleCanvasById, handleToolbarCanvas, handleDefaultCanvas, handleCanvasComponents, handleCanvasComponentById } from './canvas'
@@ -38,12 +38,18 @@ export async function handleRequest(req: Request): Promise<Response> {
     if (res) return res
   }
 
-  // WebMCP Token
+  // WebMCP Token (for polling - legacy)
   if (path === '/api/webmcp-token') {
     const res = await handleWebMCPToken(req)
     if (res) return res
   }
 
+  // WebMCP Request Token (direct request to WebMCP server)
+  if (path === '/api/webmcp-request-token') {
+    const res = await handleWebMCPRequestToken(req)
+    if (res) return res
+  }
+
   // Claude Code status (thinking/idle)
   if (path === '/api/claude-status') {
     const res = await handleClaudeStatus(req)

server/routes/webmcp.ts

@@ -1,8 +1,41 @@
 import { jsonResponse, errorResponse } from '../utils/cors'
 
+// WebMCP server URL (localhost since they run on same machine)
+const WEBMCP_URL = 'http://localhost:4102'
+
 // WebMCP token storage (in-memory)
 let pendingWebMCPToken: { token: string; createdAt: Date } | null = null
 
+// Request token directly from WebMCP server
+export async function handleWebMCPRequestToken(req: Request) {
+  if (req.method !== 'POST') {
+    return errorResponse('Method not allowed', 405)
+  }
+
+  try {
+    const res = await fetch(`${WEBMCP_URL}/token`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' }
+    })
+
+    if (!res.ok) {
+      console.error('[WebMCP] Failed to request token from server:', res.status)
+      return errorResponse('Failed to request token', res.status)
+    }
+
+    const data = await res.json()
+    if (data.success && data.token) {
+      console.log('[WebMCP] Token obtained from server')
+      return jsonResponse({ success: true, token: data.token })
+    }
+
+    return errorResponse('Invalid response from WebMCP', 500)
+  } catch (e) {
+    console.error('[WebMCP] Error requesting token:', e)
+    return errorResponse('WebMCP server not available', 503)
+  }
+}
+
 export async function handleWebMCPToken(req: Request) {
   if (req.method === 'GET') {
     if (pendingWebMCPToken) {