@thisisjeron/openclaw-better-gateway 1.0.0

package/README.md

@@ -0,0 +1,122 @@
+# OpenClaw Better Gateway
+
+An OpenClaw plugin that enhances the gateway web UI with automatic WebSocket reconnection and quality-of-life improvements.
+
+## Features
+
+✅ **Auto-Reconnect** — WebSocket disconnects are automatically recovered (up to 10 attempts)  
+✅ **Connection Status Indicator** — Visual feedback showing connection state  
+✅ **Network Awareness** — Detects online/offline and reconnects when back  
+✅ **Drop-in Enhancement** — Same gateway UI, just better  
+
+## Installation
+
+### From npm (coming soon)
+```bash
+openclaw plugins install @thisisjeron/openclaw-better-gateway
+```
+
+### From source
+```bash
+git clone https://github.com/ThisIsJeron/openclaw-better-gateway.git
+cd openclaw-better-gateway
+npm install && npm run build
+openclaw plugins install -l .
+```
+
+## Usage
+
+After installation and gateway restart, access the enhanced UI at:
+```
+https://your-gateway/better-gateway/
+```
+
+### Endpoints
+
+| Path | Description |
+|------|-------------|
+| `/better-gateway/` | Enhanced gateway UI with auto-reconnect |
+| `/better-gateway/help` | Installation instructions & bookmarklet |
+| `/better-gateway/inject.js` | Standalone script for manual injection |
+
+## Configuration
+
+In your OpenClaw config (`openclaw.json`):
+
+```json
+{
+  "plugins": {
+    "entries": {
+      "better-gateway": {
+        "enabled": true,
+        "reconnectIntervalMs": 3000,
+        "maxReconnectAttempts": 10
+      }
+    }
+  }
+}
+```
+
+## How It Works
+
+The plugin:
+1. Proxies the original gateway UI from `/` 
+2. Injects an auto-reconnect script that wraps WebSocket
+3. Serves the enhanced version at `/better-gateway/`
+
+When a WebSocket connection drops unexpectedly, the script automatically attempts to reconnect instead of showing "please refresh" errors.
+
+## Roadmap
+
+### Phase 1: Core Stability ✅
+- [x] Auto-reconnect on WebSocket disconnect
+- [x] Connection status indicator
+- [x] Network online/offline detection
+- [x] Configurable retry attempts and intervals
+
+### Phase 2: Enhanced UX
+- [ ] Session state recovery after gateway restart
+- [ ] Smarter reconnection (exponential backoff)
+- [ ] Toast notifications for connection events
+- [ ] Persist UI state across reconnects
+
+### Phase 3: Customization
+- [ ] Theme support (dark/light/custom)
+- [ ] Custom CSS injection
+- [ ] Widget system for dashboard additions
+- [ ] User preferences storage
+
+### Phase 4: Power Features
+- [ ] Multi-gateway dashboard
+- [ ] Session comparison view
+- [ ] Performance metrics overlay
+- [ ] Keyboard shortcuts
+- [ ] Command palette
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Build
+npm run build
+
+# Run tests
+npm test
+
+# Watch mode
+npm run dev
+```
+
+## Contributing
+
+PRs welcome! Please include tests for new features.
+
+## License
+
+MIT
+
+---
+
+Built with 🐾 by [ThisIsJeron](https://github.com/ThisIsJeron) and Clawd

package/dist/index.d.ts

@@ -0,0 +1,36 @@
+import { IncomingMessage, ServerResponse } from "node:http";
+interface PluginConfig {
+    reconnectIntervalMs: number;
+    maxReconnectAttempts: number;
+}
+interface PluginApi {
+    registerHttpHandler: (handler: (req: IncomingMessage, res: ServerResponse) => Promise<boolean>) => void;
+    logger: {
+        info: (msg: string) => void;
+        warn: (msg: string) => void;
+        error: (msg: string) => void;
+        debug: (msg: string) => void;
+    };
+    dataDir: string;
+    pluginConfig: PluginConfig;
+}
+declare const _default: {
+    id: string;
+    name: string;
+    configSchema: {
+        parse(raw: unknown): PluginConfig;
+        uiHints: {
+            reconnectIntervalMs: {
+                label: string;
+                placeholder: string;
+            };
+            maxReconnectAttempts: {
+                label: string;
+                placeholder: string;
+            };
+        };
+    };
+    register(api: PluginApi): void;
+};
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,cAAc,EAA0B,MAAM,WAAW,CAAC;AAQpF,UAAU,YAAY;IACpB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,oBAAoB,EAAE,MAAM,CAAC;CAC9B;AAED,UAAU,SAAS;IACjB,mBAAmB,EAAE,CACnB,OAAO,EAAE,CAAC,GAAG,EAAE,eAAe,EAAE,GAAG,EAAE,cAAc,KAAK,OAAO,CAAC,OAAO,CAAC,KACrE,IAAI,CAAC;IACV,MAAM,EAAE;QACN,IAAI,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;QAC5B,IAAI,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;QAC5B,KAAK,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;QAC7B,KAAK,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;KAC9B,CAAC;IACF,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,YAAY,CAAC;CAC5B;;;;;mBAgJc,OAAO,GAAG,YAAY;;;;;;;;;;;;kBAqBrB,SAAS,GAAG,IAAI;;AA1BhC,wBA2JE"}

package/dist/index.js

@@ -0,0 +1,266 @@
+import { request as httpRequest } from "node:http";
+import { readFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { dirname, join } from "node:path";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const DEFAULT_CONFIG = {
+    reconnectIntervalMs: 3000,
+    maxReconnectAttempts: 10,
+};
+let injectScript = null;
+function loadInjectScript() {
+    if (injectScript === null) {
+        const scriptPath = join(__dirname, "inject.js");
+        injectScript = readFileSync(scriptPath, "utf-8");
+    }
+    return injectScript;
+}
+function generateConfigScript(config) {
+    return `window.__BETTER_GATEWAY_CONFIG__ = ${JSON.stringify({
+        reconnectIntervalMs: config.reconnectIntervalMs,
+        maxReconnectAttempts: config.maxReconnectAttempts,
+    })};`;
+}
+function generateLandingPage(config, gatewayHost) {
+    const script = loadInjectScript();
+    const bookmarklet = `javascript:(function(){${encodeURIComponent(script.replace(/\n/g, " "))}})()`;
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Better Gateway</title>
+  <style>
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      max-width: 800px;
+      margin: 40px auto;
+      padding: 20px;
+      background: #1a1a2e;
+      color: #eee;
+    }
+    h1 { color: #00d4ff; }
+    h2 { color: #888; margin-top: 2em; }
+    code {
+      background: #2d2d44;
+      padding: 2px 6px;
+      border-radius: 4px;
+      font-size: 0.9em;
+    }
+    pre {
+      background: #2d2d44;
+      padding: 16px;
+      border-radius: 8px;
+      overflow-x: auto;
+    }
+    .bookmarklet {
+      display: inline-block;
+      background: #00d4ff;
+      color: #1a1a2e;
+      padding: 12px 24px;
+      border-radius: 8px;
+      text-decoration: none;
+      font-weight: bold;
+      margin: 10px 0;
+    }
+    .bookmarklet:hover { background: #00b8e6; }
+    .status {
+      display: inline-block;
+      padding: 4px 12px;
+      border-radius: 4px;
+      font-size: 0.85em;
+    }
+    .status.ok { background: #2d5a27; color: #7fff7f; }
+    .feature { margin: 8px 0; padding-left: 20px; }
+    .feature::before { content: "✓ "; color: #00d4ff; }
+  </style>
+</head>
+<body>
+  <h1>🔌 Better Gateway</h1>
+  <p>Auto-reconnect enhancement for OpenClaw Gateway UI</p>
+  
+  <h2>Features</h2>
+  <div class="feature">Automatic WebSocket reconnection on disconnect</div>
+  <div class="feature">Visual connection status indicator</div>
+  <div class="feature">Network online/offline detection</div>
+  <div class="feature">Configurable retry attempts (${config.maxReconnectAttempts} max)</div>
+  <div class="feature">Reconnect interval: ${config.reconnectIntervalMs}ms</div>
+
+  <h2>Option 1: Bookmarklet</h2>
+  <p>Drag this to your bookmarks bar, then click it when on the Gateway UI:</p>
+  <p><a class="bookmarklet" href="${bookmarklet}">⚡ Better Gateway</a></p>
+  
+  <h2>Option 2: Console Injection</h2>
+  <p>Open DevTools (F12) on the Gateway UI and paste:</p>
+  <pre>fetch('/better-gateway/inject.js').then(r=>r.text()).then(eval)</pre>
+  
+  <h2>Option 3: Userscript (Tampermonkey)</h2>
+  <p>Create a new userscript with:</p>
+  <pre>// ==UserScript==
+// @name         Better Gateway
+// @match        ${gatewayHost}/*
+// @grant        none
+// ==/UserScript==
+
+fetch('/better-gateway/inject.js').then(r=>r.text()).then(eval);</pre>
+
+  <h2>Script URL</h2>
+  <p><code>/better-gateway/inject.js</code></p>
+  
+  <hr style="margin: 40px 0; border-color: #333;">
+  <p style="color: #666; font-size: 0.85em;">
+    <a href="https://github.com/ThisIsJeron/openclaw-better-gateway" style="color: #00d4ff;">GitHub</a> · 
+    Config: reconnect=${config.reconnectIntervalMs}ms, maxAttempts=${config.maxReconnectAttempts}
+  </p>
+</body>
+</html>`;
+}
+function generateUserscript(config, gatewayUrl) {
+    const script = loadInjectScript();
+    return `// ==UserScript==
+// @name         Better Gateway - Auto Reconnect
+// @namespace    https://github.com/ThisIsJeron/openclaw-better-gateway
+// @version      1.0.0
+// @description  Adds automatic WebSocket reconnection to OpenClaw Gateway UI
+// @match        ${gatewayUrl}/*
+// @grant        none
+// ==/UserScript==
+
+window.__BETTER_GATEWAY_CONFIG__ = ${JSON.stringify({
+        reconnectIntervalMs: config.reconnectIntervalMs,
+        maxReconnectAttempts: config.maxReconnectAttempts,
+    })};
+
+${script}`;
+}
+export default {
+    id: "better-gateway",
+    name: "Better Gateway",
+    configSchema: {
+        parse(raw) {
+            const config = raw || {};
+            return {
+                reconnectIntervalMs: config.reconnectIntervalMs ?? DEFAULT_CONFIG.reconnectIntervalMs,
+                maxReconnectAttempts: config.maxReconnectAttempts ?? DEFAULT_CONFIG.maxReconnectAttempts,
+            };
+        },
+        uiHints: {
+            reconnectIntervalMs: {
+                label: "Reconnect Interval (ms)",
+                placeholder: "3000",
+            },
+            maxReconnectAttempts: {
+                label: "Max Reconnect Attempts",
+                placeholder: "10",
+            },
+        },
+    },
+    register(api) {
+        const config = { ...DEFAULT_CONFIG, ...(api.pluginConfig || {}) };
+        api.logger.info(`Better Gateway loaded (reconnect: ${config.reconnectIntervalMs}ms, max: ${config.maxReconnectAttempts})`);
+        api.registerHttpHandler(async (req, res) => {
+            const url = new URL(req.url || "/", `http://${req.headers.host}`);
+            const pathname = url.pathname;
+            if (!pathname.startsWith("/better-gateway")) {
+                return false;
+            }
+            const hostHeader = req.headers.host || "localhost:18789";
+            const gatewayHost = `http://${hostHeader}`;
+            // Serve the inject script
+            if (pathname === "/better-gateway/inject.js") {
+                const script = loadInjectScript();
+                const configuredScript = `${generateConfigScript(config)}\n${script}`;
+                res.writeHead(200, {
+                    "Content-Type": "application/javascript",
+                    "Content-Length": Buffer.byteLength(configuredScript),
+                    "Cache-Control": "no-cache",
+                });
+                res.end(configuredScript);
+                api.logger.debug("Served inject.js");
+                return true;
+            }
+            // Serve userscript download
+            if (pathname === "/better-gateway/userscript.user.js") {
+                const userscript = generateUserscript(config, gatewayHost);
+                res.writeHead(200, {
+                    "Content-Type": "application/javascript",
+                    "Content-Length": Buffer.byteLength(userscript),
+                    "Content-Disposition": "attachment; filename=better-gateway.user.js",
+                });
+                res.end(userscript);
+                api.logger.debug("Served userscript");
+                return true;
+            }
+            // Serve landing/help page at /better-gateway/help
+            if (pathname === "/better-gateway/help") {
+                const html = generateLandingPage(config, gatewayHost);
+                res.writeHead(200, {
+                    "Content-Type": "text/html",
+                    "Content-Length": Buffer.byteLength(html),
+                });
+                res.end(html);
+                api.logger.debug("Served help page");
+                return true;
+            }
+            // Enhanced gateway UI - proxy ALL /better-gateway/* paths to internal gateway
+            // Strip /better-gateway prefix and proxy the rest
+            const internalPort = 18789;
+            let targetPath = pathname.replace(/^\/better-gateway/, "") || "/";
+            if (url.search) {
+                targetPath += url.search;
+            }
+            const proxyReq = httpRequest({
+                hostname: "127.0.0.1",
+                port: internalPort,
+                path: targetPath,
+                method: req.method || "GET",
+                family: 4, // Force IPv4
+                headers: {
+                    ...req.headers,
+                    "Host": "127.0.0.1:18789",
+                },
+            }, (proxyRes) => {
+                const contentType = proxyRes.headers["content-type"] || "";
+                const chunks = [];
+                proxyRes.on("data", (chunk) => chunks.push(chunk));
+                proxyRes.on("end", () => {
+                    let body = Buffer.concat(chunks).toString("utf-8");
+                    // If it's HTML, inject our script and fix relative URLs
+                    if (contentType.includes("text/html")) {
+                        const injectTag = `<script>${generateConfigScript(config)}\n${loadInjectScript()}</script>`;
+                        // Add <base href="/"> to make relative URLs resolve from root
+                        const baseTag = `<base href="/">`;
+                        if (body.includes("<head>")) {
+                            body = body.replace("<head>", `<head>${baseTag}`);
+                        }
+                        if (body.includes("</head>")) {
+                            body = body.replace("</head>", `${injectTag}</head>`);
+                        }
+                        else if (body.includes("</body>")) {
+                            body = body.replace("</body>", `${injectTag}</body>`);
+                        }
+                        else {
+                            body = body + injectTag;
+                        }
+                    }
+                    const headers = {
+                        "Content-Type": contentType,
+                        "Content-Length": Buffer.byteLength(body),
+                    };
+                    res.writeHead(proxyRes.statusCode || 200, headers);
+                    res.end(body);
+                    api.logger.debug("Served enhanced gateway UI");
+                });
+            });
+            proxyReq.on("error", (err) => {
+                api.logger.error(`Proxy error: ${err.message}`);
+                res.writeHead(502, { "Content-Type": "text/plain" });
+                res.end("Failed to fetch gateway UI");
+            });
+            proxyReq.end();
+            return true;
+        });
+    },
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/inject.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=inject.d.ts.map

package/dist/inject.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inject.d.ts","sourceRoot":"","sources":["../src/inject.js"],"names":[],"mappings":""}

package/dist/inject.js

@@ -0,0 +1,181 @@
+(function () {
+  "use strict";
+
+  const config = window.__BETTER_GATEWAY_CONFIG__ || {
+    reconnectIntervalMs: 3000,
+    maxReconnectAttempts: 10,
+  };
+
+  let reconnectAttempts = 0;
+  let statusIndicator = null;
+  let originalWebSocket = window.WebSocket;
+  let activeConnections = new Set();
+  let currentState = "connected";
+
+  function createStatusIndicator() {
+    if (statusIndicator) return statusIndicator;
+
+    statusIndicator = document.createElement("div");
+    statusIndicator.id = "better-gateway-status";
+    statusIndicator.style.cssText = `
+      position: fixed;
+      bottom: 12px;
+      left: 12px;
+      padding: 8px 14px;
+      border-radius: 6px;
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+      font-size: 13px;
+      font-weight: 500;
+      z-index: 999999;
+      transition: all 0.3s ease;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+      cursor: pointer;
+      user-select: none;
+    `;
+
+    // Click handler - refresh on failed/disconnected, or force reconnect
+    statusIndicator.addEventListener("click", function () {
+      if (currentState === "failed" || currentState === "disconnected") {
+        window.location.reload();
+      } else if (currentState === "connected") {
+        // Show a brief "all good" feedback
+        const original = statusIndicator.innerHTML;
+        statusIndicator.innerHTML = `<span style="margin-right: 6px;">✓</span>All systems go!`;
+        setTimeout(function () {
+          statusIndicator.innerHTML = original;
+        }, 1500);
+      }
+    });
+
+    // Hover effect
+    statusIndicator.addEventListener("mouseenter", function () {
+      statusIndicator.style.transform = "scale(1.05)";
+      statusIndicator.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.25)";
+    });
+    statusIndicator.addEventListener("mouseleave", function () {
+      statusIndicator.style.transform = "scale(1)";
+      statusIndicator.style.boxShadow = "0 2px 8px rgba(0, 0, 0, 0.15)";
+    });
+
+    document.body.appendChild(statusIndicator);
+    return statusIndicator;
+  }
+
+  function updateStatus(state, message) {
+    currentState = state;
+    const indicator = createStatusIndicator();
+
+    const styles = {
+      connected: {
+        background: "#10b981",
+        color: "#ffffff",
+        icon: "●",
+      },
+      disconnected: {
+        background: "#ef4444",
+        color: "#ffffff",
+        icon: "●",
+        clickHint: " (click to refresh)",
+      },
+      reconnecting: {
+        background: "#f59e0b",
+        color: "#ffffff",
+        icon: "↻",
+      },
+      failed: {
+        background: "#6b7280",
+        color: "#ffffff",
+        icon: "↻",
+        clickHint: " (click to refresh)",
+      },
+    };
+
+    const style = styles[state] || styles.disconnected;
+    indicator.style.background = style.background;
+    indicator.style.color = style.color;
+    
+    const displayMessage = message + (style.clickHint || "");
+    indicator.innerHTML = `<span style="margin-right: 6px;">${style.icon}</span>${displayMessage}`;
+    indicator.title = state === "connected" ? "Click for status" : "Click to refresh page";
+
+    if (state === "connected") {
+      setTimeout(function () {
+        indicator.style.opacity = "0.7";
+      }, 2000);
+    } else {
+      indicator.style.opacity = "1";
+    }
+  }
+
+  function wrapWebSocket(OriginalWebSocket) {
+    function BetterWebSocket(url, protocols) {
+      const ws = new OriginalWebSocket(url, protocols);
+      const wrappedWs = ws;
+
+      activeConnections.add(wrappedWs);
+
+      ws.addEventListener("open", function () {
+        reconnectAttempts = 0;
+        updateStatus("connected", "Connected");
+      });
+
+      ws.addEventListener("close", function (event) {
+        activeConnections.delete(wrappedWs);
+
+        if (!event.wasClean && reconnectAttempts < config.maxReconnectAttempts) {
+          reconnectAttempts++;
+          updateStatus(
+            "reconnecting",
+            "Reconnecting (" + reconnectAttempts + "/" + config.maxReconnectAttempts + ")..."
+          );
+
+          setTimeout(function () {
+            try {
+              new BetterWebSocket(url, protocols);
+            } catch (e) {
+              console.error("[BetterGateway] Reconnection failed:", e);
+            }
+          }, config.reconnectIntervalMs);
+        } else if (reconnectAttempts >= config.maxReconnectAttempts) {
+          updateStatus("failed", "Connection failed");
+        } else {
+          updateStatus("disconnected", "Disconnected");
+        }
+      });
+
+      ws.addEventListener("error", function () {
+        updateStatus("disconnected", "Connection error");
+      });
+
+      return ws;
+    }
+
+    BetterWebSocket.prototype = OriginalWebSocket.prototype;
+    BetterWebSocket.CONNECTING = OriginalWebSocket.CONNECTING;
+    BetterWebSocket.OPEN = OriginalWebSocket.OPEN;
+    BetterWebSocket.CLOSING = OriginalWebSocket.CLOSING;
+    BetterWebSocket.CLOSED = OriginalWebSocket.CLOSED;
+
+    return BetterWebSocket;
+  }
+
+  window.WebSocket = wrapWebSocket(originalWebSocket);
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", function () {
+      updateStatus("connected", "Ready");
+    });
+  } else {
+    updateStatus("connected", "Ready");
+  }
+
+  window.addEventListener("online", function () {
+    updateStatus("connected", "Back online");
+  });
+
+  window.addEventListener("offline", function () {
+    updateStatus("disconnected", "Offline");
+  });
+
+  console.log("[BetterGateway] Auto-reconnect enabled", config);
+})();

package/dist/inject.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inject.js","sourceRoot":"","sources":["../src/inject.js"],"names":[],"mappings":"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"}

package/openclaw.plugin.json

@@ -0,0 +1,23 @@
+{
+  "id": "better-gateway",
+  "name": "Better Gateway",
+  "version": "1.0.0",
+  "description": "Enhanced gateway UI with auto-refresh and WebSocket reconnection",
+  "main": "dist/index.js",
+  "configSchema": {
+    "type": "object",
+    "properties": {
+      "reconnectIntervalMs": {
+        "type": "number",
+        "default": 3000,
+        "description": "WebSocket reconnection interval in milliseconds"
+      },
+      "maxReconnectAttempts": {
+        "type": "number",
+        "default": 10,
+        "description": "Maximum number of reconnection attempts before giving up"
+      }
+    },
+    "required": []
+  }
+}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@thisisjeron/openclaw-better-gateway",
+  "version": "1.0.0",
+  "description": "OpenClaw plugin that enhances the gateway UI with auto-reconnect and connection monitoring",
+  "type": "module",
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "tsc && cp src/inject.js dist/inject.js",
+    "dev": "tsc --watch",
+    "clean": "rm -rf dist",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "openclaw",
+    "openclaw-plugin",
+    "gateway",
+    "websocket",
+    "auto-reconnect"
+  ],
+  "author": "ThisIsJeron",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ThisIsJeron/openclaw-better-gateway.git"
+  },
+  "bugs": {
+    "url": "https://github.com/ThisIsJeron/openclaw-better-gateway/issues"
+  },
+  "homepage": "https://github.com/ThisIsJeron/openclaw-better-gateway#readme",
+  "files": [
+    "dist",
+    "openclaw.plugin.json",
+    "README.md"
+  ],
+  "dependencies": {},
+  "devDependencies": {
+    "@types/node": "^20.14.0",
+    "jsdom": "^26.0.0",
+    "typescript": "^5.5.0",
+    "vitest": "^3.0.0"
+  },
+  "openclaw": {
+    "extensions": ["dist/index.js"]
+  }
+}