Add native viewer option to Connect button
This commit is contained in:
@@ -330,6 +330,52 @@
|
|||||||
}
|
}
|
||||||
.chat-send:hover { opacity: 0.9; }
|
.chat-send:hover { opacity: 0.9; }
|
||||||
.chat-send:disabled { opacity: 0.5; cursor: not-allowed; }
|
.chat-send:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||||
|
|
||||||
|
/* Connect Options Modal */
|
||||||
|
.connect-options { padding: 20px; }
|
||||||
|
.connect-option {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
padding: 16px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
background: hsl(var(--muted));
|
||||||
|
border: 1px solid hsl(var(--border));
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
.connect-option:hover { border-color: hsl(var(--primary)); background: hsla(var(--primary), 0.1); }
|
||||||
|
.connect-option-icon { font-size: 24px; width: 40px; text-align: center; }
|
||||||
|
.connect-option-info { flex: 1; }
|
||||||
|
.connect-option-title { font-weight: 600; margin-bottom: 4px; }
|
||||||
|
.connect-option-desc { font-size: 12px; color: hsl(var(--muted-foreground)); }
|
||||||
|
|
||||||
|
.native-command {
|
||||||
|
margin-top: 16px;
|
||||||
|
padding: 12px;
|
||||||
|
background: hsl(222.2 84% 2%);
|
||||||
|
border: 1px solid hsl(var(--border));
|
||||||
|
border-radius: 6px;
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 12px;
|
||||||
|
word-break: break-all;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.native-command code { color: hsl(142, 76%, 50%); }
|
||||||
|
.copy-btn {
|
||||||
|
position: absolute;
|
||||||
|
top: 8px;
|
||||||
|
right: 8px;
|
||||||
|
padding: 4px 8px;
|
||||||
|
font-size: 11px;
|
||||||
|
background: hsl(var(--primary));
|
||||||
|
color: hsl(var(--primary-foreground));
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.copy-btn:hover { opacity: 0.9; }
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@@ -528,6 +574,41 @@
|
|||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
<!-- Connect Options Modal -->
|
||||||
|
<div class="modal-overlay" id="connectModal">
|
||||||
|
<div class="modal" style="max-width: 450px;">
|
||||||
|
<div class="modal-header">
|
||||||
|
<div class="modal-title">Connect to <span id="connectMachineName">Machine</span></div>
|
||||||
|
<button class="modal-close" id="connectClose">×</button>
|
||||||
|
</div>
|
||||||
|
<div class="connect-options">
|
||||||
|
<div class="connect-option" id="connectWeb">
|
||||||
|
<div class="connect-option-icon">🌐</div>
|
||||||
|
<div class="connect-option-info">
|
||||||
|
<div class="connect-option-title">Web Viewer</div>
|
||||||
|
<div class="connect-option-desc">Opens in browser. Most keys work, but Win key and Alt+Tab are captured by your OS.</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="connect-option" id="connectNative">
|
||||||
|
<div class="connect-option-icon">🖥️</div>
|
||||||
|
<div class="connect-option-info">
|
||||||
|
<div class="connect-option-title">Native Viewer</div>
|
||||||
|
<div class="connect-option-desc">Full keyboard capture including Win key, Alt+Tab, and Ctrl+Alt+Del.</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="nativeCommandContainer" style="display: none;">
|
||||||
|
<div class="native-command">
|
||||||
|
<button class="copy-btn" onclick="copyNativeCommand()">Copy</button>
|
||||||
|
<code id="nativeCommandText"></code>
|
||||||
|
</div>
|
||||||
|
<p style="margin-top: 12px; font-size: 12px; color: hsl(var(--muted-foreground));">
|
||||||
|
Run this command in PowerShell or CMD where guruconnect-viewer.exe is located.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Chat Modal -->
|
<!-- Chat Modal -->
|
||||||
<div class="modal-overlay" id="chatModal">
|
<div class="modal-overlay" id="chatModal">
|
||||||
<div class="modal">
|
<div class="modal">
|
||||||
@@ -843,10 +924,65 @@
|
|||||||
'</div>';
|
'</div>';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Connect modal state
|
||||||
|
let connectSessionId = null;
|
||||||
|
let connectMachineName = null;
|
||||||
|
|
||||||
|
const connectModal = document.getElementById("connectModal");
|
||||||
|
const connectClose = document.getElementById("connectClose");
|
||||||
|
const connectWeb = document.getElementById("connectWeb");
|
||||||
|
const connectNative = document.getElementById("connectNative");
|
||||||
|
const nativeCommandContainer = document.getElementById("nativeCommandContainer");
|
||||||
|
const nativeCommandText = document.getElementById("nativeCommandText");
|
||||||
|
const connectMachineNameEl = document.getElementById("connectMachineName");
|
||||||
|
|
||||||
|
connectClose.addEventListener("click", () => {
|
||||||
|
connectModal.classList.remove("active");
|
||||||
|
nativeCommandContainer.style.display = "none";
|
||||||
|
});
|
||||||
|
|
||||||
|
connectModal.addEventListener("click", (e) => {
|
||||||
|
if (e.target === connectModal) {
|
||||||
|
connectModal.classList.remove("active");
|
||||||
|
nativeCommandContainer.style.display = "none";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
connectWeb.addEventListener("click", () => {
|
||||||
|
if (connectSessionId) {
|
||||||
|
const viewerUrl = "/viewer.html?session_id=" + connectSessionId;
|
||||||
|
window.open(viewerUrl, "viewer_" + connectSessionId, "width=1280,height=800,menubar=no,toolbar=no,location=no,status=no");
|
||||||
|
connectModal.classList.remove("active");
|
||||||
|
nativeCommandContainer.style.display = "none";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
connectNative.addEventListener("click", () => {
|
||||||
|
if (connectSessionId) {
|
||||||
|
const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
|
||||||
|
const serverUrl = protocol + "//" + window.location.host + "/ws/viewer";
|
||||||
|
const cmd = `guruconnect-viewer.exe -i ${connectSessionId} -s ${serverUrl}`;
|
||||||
|
nativeCommandText.textContent = cmd;
|
||||||
|
nativeCommandContainer.style.display = "block";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function copyNativeCommand() {
|
||||||
|
const cmd = nativeCommandText.textContent;
|
||||||
|
navigator.clipboard.writeText(cmd).then(() => {
|
||||||
|
const btn = document.querySelector(".copy-btn");
|
||||||
|
btn.textContent = "Copied!";
|
||||||
|
setTimeout(() => btn.textContent = "Copy", 2000);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
function connectToMachine(sessionId) {
|
function connectToMachine(sessionId) {
|
||||||
// Open viewer in new window
|
const machine = machines.find(m => m.id === sessionId);
|
||||||
const viewerUrl = "/viewer.html?session_id=" + sessionId;
|
connectSessionId = sessionId;
|
||||||
window.open(viewerUrl, "viewer_" + sessionId, "width=1280,height=800,menubar=no,toolbar=no,location=no,status=no");
|
connectMachineName = machine?.agent_name || sessionId.slice(0, 8);
|
||||||
|
connectMachineNameEl.textContent = connectMachineName;
|
||||||
|
nativeCommandContainer.style.display = "none";
|
||||||
|
connectModal.classList.add("active");
|
||||||
}
|
}
|
||||||
|
|
||||||
async function disconnectMachine(sessionId, machineName) {
|
async function disconnectMachine(sessionId, machineName) {
|
||||||
|
|||||||
Reference in New Issue
Block a user