From 11987a8311cbebd4472798db17ad6efcb410ec7f Mon Sep 17 00:00:00 2001
From: OpenCode Agent <>
Date: Mon, 17 Aug 2026 15:19:06 +0000
Subject: [PATCH] fix: use SDK instead of direct React imports

---
 dashboard/dist/index.js | 154 +++++++++++++++++-----------------------
 1 file changed, 66 insertions(+), 88 deletions(-)

diff --git a/dashboard/dist/index.js b/dashboard/dist/index.js
index 5daf332..7099044 100644
--- a/dashboard/dist/index.js
+++ b/dashboard/dist/index.js
@@ -1,17 +1,22 @@
-(function() {
+(function () {
+  "use strict";
+
   const SDK = window.__HERMES_PLUGIN_SDK__;
-  const { useState, useEffect, useCallback } = React;
+  const { React } = SDK;
+  const { useState, useEffect, useCallback } = SDK.hooks;
+  const { Card, CardHeader, CardTitle, CardContent, Button } = SDK.components;
+  const fetchJSON = SDK.fetchJSON;
 
   function SSHXPage() {
     const [link, setLink] = useState(null);
-    const [status, setStatus] = useState("idle"); // idle | loading | running | error
+    const [status, setStatus] = useState("idle");
     const [error, setError] = useState(null);
 
-    const startSSHX = useCallback(async () => {
+    const startSSHX = useCallback(async function () {
       setStatus("loading");
       setError(null);
       try {
-        const res = await SDK.fetchJSON("/api/plugins/sshx-link/start");
+        const res = await fetchJSON("/api/plugins/sshx-link/start");
         if (res.link) {
           setLink(res.link);
           setStatus("running");
@@ -25,9 +30,9 @@
       }
     }, []);
 
-    const stopSSHX = useCallback(async () => {
+    const stopSSHX = useCallback(async function () {
       try {
-        await fetch("/api/plugins/sshx-link/stop", { method: "POST" });
+        await fetchJSON("/api/plugins/sshx-link/stop");
         setLink(null);
         setStatus("idle");
       } catch (err) {
@@ -35,9 +40,9 @@
       }
     }, []);
 
-    const checkStatus = useCallback(async () => {
+    const checkStatus = useCallback(async function () {
       try {
-        const res = await SDK.fetchJSON("/api/plugins/sshx-link/status");
+        const res = await fetchJSON("/api/plugins/sshx-link/status");
         if (res.status === "running" && res.link) {
           setLink(res.link);
           setStatus("running");
@@ -45,88 +50,61 @@
       } catch (_) {}
     }, []);
 
-    useEffect(() => { checkStatus(); }, [checkStatus]);
+    useEffect(function () {
+      checkStatus();
+    }, [checkStatus]);
 
-    return (
-      <div style={{ padding: "2rem", maxWidth: 600, margin: "0 auto" }}>
-        <h1 style={{ fontSize: "1.5rem", fontWeight: 600, marginBottom: "1rem" }}>
-          SSHX Shared Terminal
-        </h1>
-        <p style={{ color: "#888", marginBottom: "1.5rem" }}>
-          Start a shared terminal session. Others can join via the link.
-        </p>
+    if (status === "running" && link) {
+      return React.createElement(Card, null,
+        React.createElement(CardHeader, null,
+          React.createElement(CardTitle, null, "SSHX Shared Terminal")
+        ),
+        React.createElement(CardContent, null,
+          React.createElement("p", {
+            className: "text-sm text-green-500",
+            style: { fontWeight: 600, marginBottom: "0.5rem" }
+          }, "Running"),
+          React.createElement("a", {
+            href: link,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            style: {
+              color: "#60a5fa",
+              fontSize: "1.1rem",
+              wordBreak: "break-all",
+              textDecoration: "underline"
+            }
+          }, link),
+          React.createElement("div", { style: { marginTop: "1rem" } },
+            React.createElement(Button, {
+              onClick: stopSSHX,
+              variant: "destructive"
+            }, "Stop")
+          )
+        )
+      );
+    }
 
-        {status === "running" && link ? (
-          <div style={{
-            background: "#1a1a2e",
-            border: "1px solid #0f3460",
-            borderRadius: 8,
-            padding: "1.5rem",
-            marginBottom: "1rem"
-          }}>
-            <p style={{ color: "#4ade80", fontWeight: 600, marginBottom: "0.5rem" }}>
-              Running
-            </p>
-            <a
-              href={link}
-              target="_blank"
-              rel="noopener noreferrer"
-              style={{
-                color: "#60a5fa",
-                fontSize: "1.1rem",
-                wordBreak: "break-all",
-                textDecoration: "underline"
-              }}
-            >
-              {link}
-            </a>
-            <div style={{ marginTop: "1rem" }}>
-              <button
-                onClick={stopSSHX}
-                style={{
-                  background: "#dc2626",
-                  color: "#fff",
-                  border: "none",
-                  borderRadius: 6,
-                  padding: "0.5rem 1rem",
-                  cursor: "pointer",
-                  fontWeight: 500
-                }}
-              >
-                Stop
-              </button>
-            </div>
-          </div>
-        ) : (
-          <button
-            onClick={startSSHX}
-            disabled={status === "loading"}
-            style={{
-              background: status === "loading" ? "#555" : "#2563eb",
-              color: "#fff",
-              border: "none",
-              borderRadius: 6,
-              padding: "0.7rem 1.5rem",
-              cursor: status === "loading" ? "not-allowed" : "pointer",
-              fontWeight: 500,
-              fontSize: "1rem"
-            }}
-          >
-            {status === "loading" ? "Starting..." : "Start SSHX"}
-          </button>
-        )}
-
-        {error && (
-          <p style={{ color: "#f87171", marginTop: "1rem" }}>
-            Error: {error}
-          </p>
-        )}
-      </div>
+    return React.createElement(Card, null,
+      React.createElement(CardHeader, null,
+        React.createElement(CardTitle, null, "SSHX Shared Terminal")
+      ),
+      React.createElement(CardContent, null,
+        React.createElement("p", {
+          className: "text-sm text-muted-foreground",
+          style: { marginBottom: "1rem" }
+        }, "Start a shared terminal session. Others can join via the link."),
+        error && React.createElement("p", {
+          className: "text-sm text-red-500",
+          style: { marginBottom: "1rem" }
+        }, "Error: " + error),
+        React.createElement(Button, {
+          onClick: startSSHX,
+          disabled: status === "loading"
+        }, status === "loading" ? "Starting..." : "Start SSHX")
+      )
     );
   }
 
-  // Register the tab component
-  if (window.__HERMES_PLUGINS__) {
-    window.__HERMES_PLUGINS__.register("sshx-link", SSHXPage);
-  }
+  window.__HERMES_PLUGINS__.register("sshx-link", SSHXPage);
 })();