fix: use SDK instead of direct React imports

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 (
+    if (status === "running" && link) {
-      <div style={{ padding: "2rem", maxWidth: 600, margin: "0 auto" }}>
+      return React.createElement(Card, null,
-        <h1 style={{ fontSize: "1.5rem", fontWeight: 600, marginBottom: "1rem" }}>
+        React.createElement(CardHeader, null,
-          SSHX Shared Terminal
+          React.createElement(CardTitle, null, "SSHX Shared Terminal")
-        </h1>
+        ),
-        <p style={{ color: "#888", marginBottom: "1.5rem" }}>
+        React.createElement(CardContent, null,
-          Start a shared terminal session. Others can join via the link.
+          React.createElement("p", {
-        </p>
+            className: "text-sm text-green-500",
-
+            style: { fontWeight: 600, marginBottom: "0.5rem" }
-        {status === "running" && link ? (
+          }, "Running"),
-          <div style={{
+          React.createElement("a", {
-            background: "#1a1a2e",
+            href: link,
-            border: "1px solid #0f3460",
+            target: "_blank",
-            borderRadius: 8,
+            rel: "noopener noreferrer",
-            padding: "1.5rem",
+            style: {
-            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),
-              {link}
+          React.createElement("div", { style: { marginTop: "1rem" } },
-            </a>
+            React.createElement(Button, {
-            <div style={{ marginTop: "1rem" }}>
+              onClick: stopSSHX,
-              <button
+              variant: "destructive"
-                onClick={stopSSHX}
+            }, "Stop")
-                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>
       );
     }
 
-  // Register the tab component
+    return React.createElement(Card, null,
-  if (window.__HERMES_PLUGINS__) {
+      React.createElement(CardHeader, null,
-    window.__HERMES_PLUGINS__.register("sshx-link", SSHXPage);
+        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")
+      )
+    );
   }
+
+  window.__HERMES_PLUGINS__.register("sshx-link", SSHXPage);
 })();