Skip to content

Commit fd93514

Browse files
Bobby CookeBobby Cooke
authored andcommitted
Client v2.4.0 - UI enhancements. Dark Mode, task queuing, cancel/modify queued tasks, change agent & dashboard background images, change agent font+fontSize+fontColor, zoom, dashboard functionality enhancements, Agent command history option to prevent laggy agent window statups, agent window now shows loading when loading command history
1 parent 1c06ac1 commit fd93514

File tree

19 files changed

+3147
-247
lines changed

19 files changed

+3147
-247
lines changed

client/agent-settings.html

Lines changed: 546 additions & 0 deletions
Large diffs are not rendered by default.

client/agent.html

Lines changed: 238 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -2,35 +2,41 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta name="theme-color" content="#1e1e1e">
7+
<meta name="msapplication-navbutton-color" content="#1e1e1e">
8+
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
9+
<meta name="apple-mobile-web-app-capable" content="yes">
510
<title>Agent Terminal</title>
611
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400&display=swap" rel="stylesheet">
712
<style>
813
body {
914
font-family: 'Fira Code', monospace;
1015
margin: 0;
11-
padding: 20px;
16+
padding: 20px 20px 20px 20px;
1217
background-color: #1e1e1e;
1318
color: #c5c5c5;
14-
height: calc(100vh - 40px); /* Adjust height to add bottom margin */
19+
height: 100vh;
1520
display: flex;
1621
flex-direction: column;
1722
overflow: hidden; /* Prevent body from scrolling */
23+
box-sizing: border-box;
1824
}
1925
h1 {
2026
font-size: 24px;
2127
color: #06883e;
2228
margin: 0 0 20px 0;
2329
}
2430
.console {
25-
background-image: url('./assets/images/agent.png');
31+
/* background-image: url('./assets/images/agent.png'); */
2632
background-size: contain; /* Fit the image within the element */
2733
background-repeat: no-repeat; /* Prevent repeating */
2834
background-position: center; /* Center the image */
2935
height: 100vh; /* Full viewport height */
3036
width: 100%;
31-
background-color: #191919;
37+
background-color: transparent;
3238
color: #ffffff;
33-
padding: 10px;
39+
padding: 10px 10px 10px 10px;
3440
flex-grow: 1;
3541
overflow: auto;
3642
border-radius: 4px;
@@ -40,6 +46,22 @@
4046
position: relative;
4147
white-space: pre-wrap;
4248
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
49+
box-sizing: border-box;
50+
}
51+
.console::-webkit-scrollbar {
52+
width: 12px;
53+
}
54+
.console::-webkit-scrollbar-track {
55+
background: #1a1a1a;
56+
border-radius: 6px;
57+
}
58+
.console::-webkit-scrollbar-thumb {
59+
background: #333333;
60+
border-radius: 6px;
61+
border: 2px solid #1a1a1a;
62+
}
63+
.console::-webkit-scrollbar-thumb:hover {
64+
background: #555555;
4365
}
4466
.input {
4567
display: flex;
@@ -87,88 +109,95 @@
87109
color: #ffffff;
88110
}
89111
table.vampire-matrix {
90-
width: 100%; /* Make the table consume the entire window width */
91-
border-collapse: collapse;
92-
background-color: #1c1c1c;
93-
box-shadow: 0 0 10px rgba(0, 255, 64, 0.5);
94-
}
112+
width: 100%; /* Make the table consume the entire window width */
113+
border-collapse: collapse;
114+
background-color: #030303;
115+
box-shadow: none;
116+
}
95117

96-
table.vampire-matrix th,
97-
table.vampire-matrix td {
98-
border: 1px solid #333;
99-
padding: 10px 15px;
100-
text-align: left;
101-
vertical-align: middle;
102-
word-wrap: break-word; /* Ensure content wraps within the cell */
103-
}
118+
table.vampire-matrix th,
119+
table.vampire-matrix td {
120+
border: 1px solid #333;
121+
padding: 10px 15px;
122+
text-align: left;
123+
vertical-align: middle;
124+
word-wrap: break-word; /* Ensure content wraps within the cell */
125+
}
104126

105-
table.vampire-matrix thead th {
106-
background-color: #333;
107-
color: #fff;
108-
font-size: 1.1em;
109-
}
127+
table.vampire-matrix thead th {
128+
background-color: #0a0a0a;
129+
color: #fff;
130+
font-size: 1.1em;
131+
}
110132

111-
table.vampire-matrix tbody tr {
112-
transition: background-color 0.3s;
113-
}
133+
table.vampire-matrix tbody tr {
134+
transition: background-color 0.3s;
135+
}
114136

115-
table.vampire-matrix tbody tr:hover {
116-
background-color: #2a2a2a;
117-
}
137+
table.vampire-matrix tbody tr:hover {
138+
background-color: #080808;
139+
}
118140

119-
table.vampire-matrix tbody tr:nth-child(even) {
120-
background-color: #232323;
121-
}
141+
table.vampire-matrix tbody tr:nth-child(even) {
142+
background-color: #050505;
143+
}
122144

123-
table.vampire-matrix tbody tr:nth-child(odd) {
124-
background-color: #1a1a1a;
125-
}
145+
table.vampire-matrix tbody tr:nth-child(odd) {
146+
background-color: #020202;
147+
}
126148

127-
table.vampire-matrix td {
128-
color: #fff; /* Change text color to white */
129-
}
149+
table.vampire-matrix td {
150+
color: #fff; /* Change text color to white */
151+
}
130152

131-
table.vampire-matrix th {
132-
border-bottom: 2px solid #444;
133-
}
153+
table.vampire-matrix th {
154+
border-bottom: 2px solid #444;
155+
}
156+
157+
table.vampire-matrix tbody td:first-child {
158+
border-left: 2px solid #444;
159+
}
134160

135-
table.vampire-matrix tbody td:first-child {
136-
border-left: 2px solid #444;
137-
}
161+
table.vampire-matrix tbody td:last-child {
162+
border-right: 2px solid #444;
163+
}
138164

139-
table.vampire-matrix tbody td:last-child {
140-
border-right: 2px solid #444;
141-
}
165+
tr {
166+
height: 20px;
167+
max-height: 20px; /* Set your desired max-height here */
168+
overflow: hidden;
169+
}
170+
tr > td {
171+
max-height: inherit; /* Apply max height to each cell */
172+
overflow: hidden; /* Ensure content overflow is hidden in each cell */
173+
}
142174

143-
tr {
144-
height: 20px;
145-
max-height: 20px; /* Set your desired max-height here */
146-
overflow: hidden;
147-
}
148-
tr > td {
149-
max-height: inherit; /* Apply max height to each cell */
150-
overflow: hidden; /* Ensure content overflow is hidden in each cell */
151-
}
175+
@media (prefers-color-scheme: dark) {
176+
body {
177+
background-color: #0a0a0a;
178+
}
179+
}
152180
</style>
153181
</head>
154182
<body>
155183
<!-- <h1>Agent Terminal</h1> -->
184+
156185
<div class="agentstatus" id="agentstatus">
157-
<table id="agentTable" class="vampire-matrix" height="20px">
158-
<tbody>
159-
<tr>
160-
<td>Agent ID</td>
161-
<td>Hostname</td>
162-
<td>Username</td>
163-
<td>Process</td>
164-
<td>PID</td>
165-
<td>IP</td>
166-
<td>Arch</td>
167-
<td>Platform</td>
168-
<td>Checkin</td>
169-
</tr>
170-
</tbody>
171-
</table>
186+
<table id="agentTable" class="vampire-matrix" height="20px">
187+
<tbody>
188+
<tr id="agentDataRow">
189+
<td>Loading..</td>
190+
<td>-</td>
191+
<td>-</td>
192+
<td>-</td>
193+
<td>-</td>
194+
<td>-</td>
195+
<td>-</td>
196+
<td>-</td>
197+
<td>-</td>
198+
</tr>
199+
</tbody>
200+
</table>
172201
</div>
173202
<div class="console" id="consoleOutput"></div>
174203
<div class="input">
@@ -178,5 +207,143 @@
178207
<div id="commandDropdown"></div>
179208
</div>
180209
<script src="agent.js"></script>
210+
<script>
211+
// Function to apply font settings to this agent window
212+
function applyFontSettings(settings) {
213+
console.log('=== APPLYING FONT SETTINGS ===');
214+
console.log('Settings received:', settings);
215+
216+
const elementsToStyle = [
217+
document.body,
218+
document.getElementById('consoleOutput'),
219+
document.getElementById('consoleInput'),
220+
...document.querySelectorAll('.vampire-matrix td'),
221+
...document.querySelectorAll('.vampire-matrix th'),
222+
...document.querySelectorAll('.vampire-matrix')
223+
];
224+
225+
console.log('Elements to style:', elementsToStyle.length);
226+
227+
elementsToStyle.forEach((element, index) => {
228+
if (element) {
229+
console.log(`Styling element ${index}:`, element.tagName, element.className);
230+
if (settings.fontFamily) {
231+
element.style.fontFamily = settings.fontFamily;
232+
console.log(`Set fontFamily to: ${settings.fontFamily}`);
233+
}
234+
if (settings.fontSize) {
235+
element.style.fontSize = settings.fontSize + 'px';
236+
console.log(`Set fontSize to: ${settings.fontSize}px`);
237+
}
238+
if (settings.fontColor) {
239+
element.style.color = settings.fontColor;
240+
console.log(`Set fontColor to: ${settings.fontColor}`);
241+
}
242+
}
243+
});
244+
245+
// Apply zoom if specified
246+
if (settings.zoom && settings.zoom !== 1.0) {
247+
console.log('Applying zoom:', settings.zoom);
248+
const elementsToZoom = [
249+
document.getElementById('consoleOutput'),
250+
document.querySelector('.agentstatus')
251+
];
252+
253+
elementsToZoom.forEach(element => {
254+
if (element) {
255+
element.style.transform = `scale(${settings.zoom})`;
256+
element.style.transformOrigin = 'top left';
257+
console.log('Applied zoom to:', element.id || element.className);
258+
}
259+
});
260+
}
261+
262+
// Apply agent background image if specified
263+
if (settings.agentBackgroundImage) {
264+
console.log('Applying agent background image:', settings.agentBackgroundImage);
265+
document.body.style.backgroundImage = `url('${settings.agentBackgroundImage}')`;
266+
document.body.style.backgroundSize = 'cover';
267+
document.body.style.backgroundRepeat = 'no-repeat';
268+
document.body.style.backgroundPosition = 'center';
269+
document.body.style.backgroundAttachment = 'fixed';
270+
} else {
271+
console.log('Clearing agent background image');
272+
document.body.style.backgroundImage = '';
273+
document.body.style.backgroundSize = '';
274+
document.body.style.backgroundRepeat = '';
275+
document.body.style.backgroundPosition = '';
276+
document.body.style.backgroundAttachment = '';
277+
}
278+
279+
console.log('=== FONT SETTINGS APPLIED ===');
280+
}
281+
282+
// Handle font settings from separate settings window
283+
ipcRenderer.on('apply-font-settings', (event, settings) => {
284+
console.log('=== RECEIVED APPLY-FONT-SETTINGS IPC ===');
285+
console.log('Event:', event);
286+
console.log('Settings:', settings);
287+
applyFontSettings(settings);
288+
});
289+
290+
// Load saved settings on page load
291+
window.addEventListener('DOMContentLoaded', () => {
292+
// Load settings from customize.js file
293+
ipcRenderer.invoke('get-customize-settings').then(settings => {
294+
if (settings) {
295+
console.log('Loading customize settings from file:', settings);
296+
applyFontSettings(settings);
297+
}
298+
}).catch(error => {
299+
console.error('Error loading customize settings:', error);
300+
});
301+
});
302+
303+
// Add test keyboard shortcut (F5 to test applying settings)
304+
document.addEventListener('keydown', (event) => {
305+
if (event.key === 'F5') {
306+
event.preventDefault();
307+
console.log('=== F5 PRESSED - TESTING SETTINGS ===');
308+
const testSettings = {
309+
fontFamily: "'Courier New', monospace",
310+
fontSize: 20,
311+
fontColor: "#ff0000",
312+
zoom: 1.2
313+
};
314+
console.log('Applying test settings:', testSettings);
315+
applyFontSettings(testSettings);
316+
}
317+
318+
// Zoom hotkeys for agent window
319+
if (event.ctrlKey && (event.key === '+' || event.key === '=')) {
320+
event.preventDefault();
321+
// Get current settings and increase zoom
322+
ipcRenderer.invoke('get-customize-settings').then(settings => {
323+
if (settings) {
324+
const newZoom = Math.min(2.0, (settings.zoom || 1.0) + 0.1);
325+
const updatedSettings = { ...settings, zoom: newZoom };
326+
applyFontSettings(updatedSettings);
327+
// Save updated settings
328+
ipcRenderer.send('apply-agent-settings', updatedSettings);
329+
}
330+
});
331+
}
332+
333+
if (event.ctrlKey && event.key === '-') {
334+
event.preventDefault();
335+
// Get current settings and decrease zoom
336+
ipcRenderer.invoke('get-customize-settings').then(settings => {
337+
if (settings) {
338+
const newZoom = Math.max(0.5, (settings.zoom || 1.0) - 0.1);
339+
const updatedSettings = { ...settings, zoom: newZoom };
340+
applyFontSettings(updatedSettings);
341+
// Save updated settings
342+
ipcRenderer.send('apply-agent-settings', updatedSettings);
343+
}
344+
});
345+
}
346+
});
347+
</script>
181348
</body>
182349
</html>

0 commit comments

Comments
 (0)