azcomputerguru/guru-connect
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

Add native viewer option to Connect button

Browse Source
This commit is contained in:
Mike Swanson
2025-12-29 21:15:35 -07:00
parent 3fc4e1f96a
commit 0c3435fa99
1 changed files with 139 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
server/static/dashboard.html
View File

@@ -330,6 +330,52 @@
}
.chat-send:hover { opacity: 0.9; }
.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>
</head>
<body>
@@ -528,6 +574,41 @@
</div>
</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">&times;</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 -->
<div class="modal-overlay" id="chatModal">
<div class="modal">
@@ -843,10 +924,65 @@
'</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) {
// Open viewer in new window
const viewerUrl = "/viewer.html?session_id=" + sessionId;
window.open(viewerUrl, "viewer_" + sessionId, "width=1280,height=800,menubar=no,toolbar=no,location=no,status=no");
const machine = machines.find(m => m.id === sessionId);
connectSessionId = sessionId;
connectMachineName = machine?.agent_name || sessionId.slice(0, 8);
connectMachineNameEl.textContent = connectMachineName;
nativeCommandContainer.style.display = "none";
connectModal.classList.add("active");
}
async function disconnectMachine(sessionId, machineName) {