fix: use SDK instead of direct React imports
This commit is contained in:
OpenCode Agent
parent
6aaf913366
commit
11987a8311
|
|
@ -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>
|
||||
|
||||
{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={{
|
||||
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}
|
||||
</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>
|
||||
}
|
||||
}, link),
|
||||
React.createElement("div", { style: { marginTop: "1rem" } },
|
||||
React.createElement(Button, {
|
||||
onClick: stopSSHX,
|
||||
variant: "destructive"
|
||||
}, "Stop")
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
// Register the tab component
|
||||
if (window.__HERMES_PLUGINS__) {
|
||||
window.__HERMES_PLUGINS__.register("sshx-link", SSHXPage);
|
||||
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")
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
window.__HERMES_PLUGINS__.register("sshx-link", SSHXPage);
|
||||
})();
|
||||
|
|
|
|||
Loading…
Reference in New Issue