@silver886/mcp-proxy 0.1.3 → 0.2.0

package/static/style.css

@@ -0,0 +1,208 @@
+* {
+   box-sizing: border-box;
+   margin: 0;
+   padding: 0;
+}
+
+body {
+   font-family:
+      system-ui,
+      -apple-system,
+      sans-serif;
+   background: #0f172a;
+   color: #e2e8f0;
+   min-height: 100vh;
+   display: flex;
+   align-items: center;
+   justify-content: center;
+}
+
+.card {
+   background: #1e293b;
+   border-radius: 12px;
+   padding: 2rem;
+   max-width: 480px;
+   width: 100%;
+   box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
+}
+
+/* Tablet / small desktop: wider card, more breathing room. */
+@media (min-width: 768px) {
+   .card {
+      max-width: 720px;
+      padding: 2rem 2.5rem;
+   }
+}
+
+/* Desktop and up: stepped breakpoints so workstation-class displays
+   (1080p, 1440p, 4K) actually use their horizontal room instead of leaving
+   the host/server grids capped at 960px with a sea of empty space. The
+   inner grids are auto-fit, so growing the card naturally lets more host
+   rows / server groups sit side-by-side without per-grid changes. The
+   .desc paragraph has its own 65ch cap so prose stays readable even when
+   the card is very wide. */
+@media (min-width: 1280px) {
+   .card {
+      max-width: 1100px;
+   }
+}
+
+@media (min-width: 1600px) {
+   .card {
+      max-width: 1400px;
+      padding: 2.25rem 3rem;
+   }
+}
+
+/* 1080p workstation territory. */
+@media (min-width: 1920px) {
+   .card {
+      max-width: 1700px;
+   }
+}
+
+/* 1440p / entry-level 4K — let the card stretch but cap so the grids
+   don't end up so wide that one server group spans 600px+ of dead space. */
+@media (min-width: 2560px) {
+   .card {
+      max-width: 2100px;
+      padding: 2.5rem 3.5rem;
+   }
+}
+
+/* True 4K (3840px+). Cap here — going wider just hurts scan distance more
+   than it adds layout value. */
+@media (min-width: 3200px) {
+   .card {
+      max-width: 2600px;
+   }
+}
+
+h1 {
+   font-size: 1.25rem;
+   margin-bottom: 0.25rem;
+}
+
+.desc {
+   color: #94a3b8;
+   font-size: 0.875rem;
+   margin: 1rem 0;
+   max-width: 65ch;
+}
+
+label {
+   display: block;
+   font-size: 0.875rem;
+   font-weight: 500;
+   margin-bottom: 0.375rem;
+   margin-top: 1rem;
+}
+
+input,
+select {
+   width: 100%;
+   padding: 0.625rem 0.75rem;
+   border-radius: 8px;
+   border: 1px solid #334155;
+   background: #0f172a;
+   color: #e2e8f0;
+   font-size: 0.9rem;
+}
+
+input:focus,
+select:focus {
+   outline: none;
+   border-color: #38bdf8;
+   box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25);
+}
+
+/* Live "fail early" validation. Two selectors layered:
+     - :not(:placeholder-shown):invalid — fires the moment the user types
+       something that violates a constraint (pattern / type=url /
+       setCustomValidity). It skips the empty case because :placeholder-shown
+       matches when the field is empty (every input here defines a
+       placeholder), so we don't paint a freshly-rendered required field red
+       before the user has even touched it.
+     - :user-invalid — covers the post-submit case where the user pressed
+       Discover with required fields still empty. :placeholder-shown wouldn't
+       have filtered those, so we still want them flagged at that point.
+   setCustomValidity (the duplicate-id cross-field check) plugs into the
+   same :invalid machinery, so styling is uniform across native and custom
+   failures. */
+input:not(:placeholder-shown):invalid,
+input:user-invalid {
+   border-color: #ef4444;
+   box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
+}
+
+button {
+   margin-top: 1.5rem;
+   width: 100%;
+   padding: 0.75rem;
+   border: none;
+   border-radius: 8px;
+   background: #2563eb;
+   color: white;
+   font-size: 0.95rem;
+   font-weight: 600;
+   cursor: pointer;
+   transition: background 0.15s;
+}
+
+button:hover {
+   background: #1d4ed8;
+}
+
+button:disabled {
+   opacity: 0.5;
+   cursor: not-allowed;
+}
+
+.hint {
+   font-size: 0.75rem;
+   color: #64748b;
+   margin-top: 0.25rem;
+}
+
+.banner {
+   border-radius: 8px;
+   padding: 1rem;
+   margin-top: 1rem;
+   text-align: center;
+}
+
+.banner.ok {
+   background: #065f46;
+   border: 1px solid #10b981;
+   color: #d1fae5;
+}
+
+.banner.error {
+   background: #7f1d1d;
+   border: 1px solid #ef4444;
+   color: #fecaca;
+}
+
+.banner.warning {
+   background: #78350f;
+   border: 1px solid #f59e0b;
+   color: #fde68a;
+}
+
+.spinner {
+   display: inline-block;
+   width: 16px;
+   height: 16px;
+   border: 2px solid rgba(255, 255, 255, 0.3);
+   border-top-color: white;
+   border-radius: 50%;
+   animation: spin 0.6s linear infinite;
+   vertical-align: middle;
+   margin-right: 0.5rem;
+}
+
+@keyframes spin {
+   to {
+      transform: rotate(360deg);
+   }
+}

package/mcp/dist/host.js

@@ -1,307 +0,0 @@
-#!/usr/bin/env node
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const node_fs_1 = require("node:fs");
-const node_child_process_1 = require("node:child_process");
-const node_crypto_1 = require("node:crypto");
-const cloudflared_1 = require("cloudflared");
-const protocol_js_1 = require("./shared/protocol.js");
-// A session manages one MCP server child process + request/response matching
-class McpSession {
-    name;
-    timeout;
-    process;
-    stdoutBuffer = new protocol_js_1.LineBuffer();
-    pending = new Map();
-    notifications = [];
-    destroyed = false;
-    constructor(name, config, timeout) {
-        this.name = name;
-        this.timeout = timeout;
-        console.log(`[${name}] Spawning: ${config.command} ${config.args.join(" ")}`);
-        this.process = (0, node_child_process_1.spawn)(config.command, config.args, {
-            stdio: ["pipe", "pipe", "pipe"],
-            env: { ...process.env, ...config.env },
-            shell: config.shell ?? false,
-        });
-        this.process.stdout.on("data", (chunk) => {
-            const lines = this.stdoutBuffer.push(chunk.toString("utf-8"));
-            for (const line of lines) {
-                this.handleLine(line);
-            }
-        });
-        this.process.stderr.on("data", (chunk) => {
-            console.error(`[${name}] stderr: ${chunk.toString("utf-8").trimEnd()}`);
-        });
-        this.process.on("exit", (code) => {
-            console.log(`[${name}] Process exited (code=${code})`);
-            this.destroyed = true;
-            // Reject all pending
-            for (const [, p] of this.pending) {
-                clearTimeout(p.timer);
-                p.resolve((0, protocol_js_1.jsonRpcError)(protocol_js_1.ErrorCode.PROCESS_EXITED, `code=${code}`));
-            }
-            this.pending.clear();
-        });
-        this.process.on("error", (err) => {
-            console.error(`[${name}] Process error: ${err.message}`);
-            this.destroyed = true;
-        });
-    }
-    handleLine(line) {
-        // Try to extract the id to match with a pending request
-        let parsed;
-        try {
-            parsed = JSON.parse(line);
-        }
-        catch {
-            return; // Not valid JSON, skip
-        }
-        // If it has an id and matches a pending request, resolve it
-        if (parsed.id !== undefined && this.pending.has(parsed.id)) {
-            const p = this.pending.get(parsed.id);
-            clearTimeout(p.timer);
-            this.pending.delete(parsed.id);
-            p.resolve(line);
-            return;
-        }
-        // Otherwise it's a notification — queue it
-        this.notifications.push(line);
-    }
-    sendRequest(jsonRpcLine) {
-        if (this.destroyed || !this.process.stdin?.writable) {
-            return Promise.resolve((0, protocol_js_1.jsonRpcError)(protocol_js_1.ErrorCode.PROCESS_NOT_RUNNING));
-        }
-        // Extract id for matching
-        let id;
-        try {
-            id = JSON.parse(jsonRpcLine).id;
-        }
-        catch {
-            // If we can't parse, just send it and hope for the best
-        }
-        this.process.stdin.write(jsonRpcLine + "\n");
-        if (id === undefined) {
-            // It's a notification from client — no response expected
-            return Promise.resolve("");
-        }
-        return new Promise((resolve) => {
-            const timer = setTimeout(() => {
-                this.pending.delete(id);
-                resolve((0, protocol_js_1.jsonRpcError)(protocol_js_1.ErrorCode.REQUEST_TIMEOUT, undefined, id));
-            }, this.timeout);
-            this.pending.set(id, { resolve, timer });
-        });
-    }
-    drainNotifications() {
-        const n = this.notifications;
-        this.notifications = [];
-        return n;
-    }
-    get serverName() {
-        return this.name;
-    }
-    get isAlive() {
-        return !this.destroyed;
-    }
-    destroy() {
-        if (this.destroyed)
-            return;
-        this.destroyed = true;
-        if (!this.process.killed)
-            this.process.kill();
-    }
-}
-function sendSessionMismatchError(res, session, serverName) {
-    res.writeHead(400, { "Content-Type": "application/json" });
-    res.end(JSON.stringify({ error: `Session belongs to server '${session.serverName}', not '${serverName}'` }));
-}
-// Main server
-class HostAgent {
-    config;
-    sessions = new Map();
-    timeout;
-    authToken;
-    constructor(configPath, timeout) {
-        const raw = (0, node_fs_1.readFileSync)(configPath, "utf-8");
-        this.config = JSON.parse(raw);
-        this.timeout = timeout;
-        this.authToken = (0, node_crypto_1.randomBytes)(32).toString("base64url"); // 256-bit token
-    }
-    get port() {
-        return this.config.port ?? protocol_js_1.DEFAULT_PORT;
-    }
-    start() {
-        const host = this.config.host ?? protocol_js_1.DEFAULT_HOST;
-        const server = (0, protocol_js_1.createServer)((req, res) => this.handleRequest(req, res));
-        server.listen(this.port, host, () => {
-            console.log(`MCP Host Agent listening on http://${host}:${this.port}`);
-            console.log(`Available servers: ${Object.keys(this.config.servers).join(", ")}`);
-            console.error(`Auth token: ${this.authToken}`);
-        });
-    }
-    async handleRequest(req, res) {
-        // Auth: validate Bearer token (constant-time comparison)
-        const auth = req.headers.authorization ?? "";
-        const expected = `Bearer ${this.authToken}`;
-        const authBuf = Buffer.from(auth);
-        const expectedBuf = Buffer.from(expected);
-        const authorized = authBuf.length === expectedBuf.length && (0, node_crypto_1.timingSafeEqual)(authBuf, expectedBuf);
-        if (!authorized) {
-            res.writeHead(401, { "Content-Type": "application/json" });
-            res.end(JSON.stringify({ error: "Unauthorized" }));
-            return;
-        }
-        // GET / — list available servers
-        if (req.method === "GET" && req.url === "/") {
-            res.writeHead(200, { "Content-Type": "application/json" });
-            res.end(JSON.stringify({
-                service: "mcp-proxy-host",
-                servers: Object.keys(this.config.servers),
-            }));
-            return;
-        }
-        // Route: /servers/:name
-        const match = req.url?.match(/^\/servers\/([^/?]+)/);
-        if (!match) {
-            res.writeHead(404, { "Content-Type": "application/json" });
-            res.end(JSON.stringify({ error: "Not found. Use /servers/<name>" }));
-            return;
-        }
-        const serverName = match[1];
-        const serverConfig = this.config.servers[serverName];
-        if (!serverConfig) {
-            res.writeHead(404, { "Content-Type": "application/json" });
-            res.end(JSON.stringify({
-                error: `Unknown server: ${serverName}`,
-                available: Object.keys(this.config.servers),
-            }));
-            return;
-        }
-        // POST /servers/:name — MCP request
-        if (req.method === "POST") {
-            await this.handleMcpPost(req, res, serverName, serverConfig);
-            return;
-        }
-        // GET /servers/:name — SSE for server notifications
-        if (req.method === "GET") {
-            this.handleSse(req, res, serverName);
-            return;
-        }
-        // DELETE /servers/:name — close session
-        if (req.method === "DELETE") {
-            const sessionId = req.headers["mcp-session-id"];
-            if (sessionId && this.sessions.has(sessionId)) {
-                const session = this.sessions.get(sessionId);
-                if (session.serverName !== serverName) {
-                    sendSessionMismatchError(res, session, serverName);
-                    return;
-                }
-                session.destroy();
-                this.sessions.delete(sessionId);
-            }
-            res.writeHead(200, { "Content-Type": "application/json" });
-            res.end(JSON.stringify({ ok: true }));
-            return;
-        }
-        res.writeHead(405);
-        res.end();
-    }
-    async handleMcpPost(req, res, serverName, serverConfig) {
-        const body = await (0, protocol_js_1.readBody)(req);
-        let sessionId = req.headers["mcp-session-id"];
-        // Get or create session
-        let session;
-        if (sessionId && this.sessions.has(sessionId)) {
-            session = this.sessions.get(sessionId);
-            if (session.serverName !== serverName) {
-                sendSessionMismatchError(res, session, serverName);
-                return;
-            }
-            if (!session.isAlive) {
-                // Session dead — clean up and create new
-                this.sessions.delete(sessionId);
-                sessionId = undefined;
-            }
-        }
-        if (!sessionId || !this.sessions.has(sessionId)) {
-            sessionId = (0, node_crypto_1.randomBytes)(16).toString("hex");
-            session = new McpSession(serverName, serverConfig, this.timeout);
-            this.sessions.set(sessionId, session);
-        }
-        else {
-            session = this.sessions.get(sessionId);
-        }
-        // Forward request
-        const response = await session.sendRequest(body);
-        if (!response) {
-            // Client notification — no response body
-            res.writeHead(202, { "Mcp-Session-Id": sessionId });
-            res.end();
-            return;
-        }
-        res.writeHead(200, {
-            "Content-Type": "application/json",
-            "Mcp-Session-Id": sessionId,
-        });
-        res.end(response);
-    }
-    handleSse(req, res, serverName) {
-        const sessionId = req.headers["mcp-session-id"];
-        const session = sessionId ? this.sessions.get(sessionId) : undefined;
-        if (session && session.serverName !== serverName) {
-            sendSessionMismatchError(res, session, serverName);
-            return;
-        }
-        res.writeHead(200, {
-            "Content-Type": "text/event-stream",
-            "Cache-Control": "no-cache",
-            Connection: "keep-alive",
-            ...(sessionId ? { "Mcp-Session-Id": sessionId } : {}),
-        });
-        res.write(": connected\n\n");
-        if (!session) {
-            req.on("close", () => { });
-            return;
-        }
-        // Poll for notifications and send them
-        const interval = setInterval(() => {
-            if (!session.isAlive) {
-                clearInterval(interval);
-                res.end();
-                return;
-            }
-            const notifications = session.drainNotifications();
-            for (const n of notifications) {
-                res.write(`data: ${n}\n\n`);
-            }
-        }, 100);
-        req.on("close", () => clearInterval(interval));
-    }
-}
-function startTunnel(port) {
-    const tunnel = cloudflared_1.Tunnel.quick(`http://localhost:${port}`);
-    tunnel.once("url", (url) => {
-        console.log(`\n  Tunnel URL: ${url}`);
-        console.log(`\n  Enter this URL in the setup page when configuring the proxy.\n`);
-    });
-    tunnel.on("error", (err) => {
-        console.error("Tunnel error:", err.message);
-    });
-    process.on("SIGINT", () => {
-        tunnel.stop();
-        process.exit(0);
-    });
-}
-function main() {
-    const configPath = (0, protocol_js_1.getArg)("--config") ?? "config.json";
-    const timeout = parseInt((0, protocol_js_1.getArg)("--timeout") ?? "120000", 10); // 2min default for long tool calls
-    const useTunnel = process.argv.includes("--tunnel");
-    const agent = new HostAgent(configPath, timeout);
-    agent.start();
-    if (useTunnel) {
-        console.log("Starting Cloudflare tunnel...");
-        startTunnel(agent.port);
-    }
-}
-main();