agentgui 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +213 -0
- package/acp-launcher.js +348 -0
- package/bin/gmgui.cjs +70 -0
- package/database.js +447 -0
- package/install.sh +147 -0
- package/package.json +23 -0
- package/server.js +412 -0
- package/static/app.js +925 -0
- package/static/index.html +201 -0
- package/static/rippleui.css +208 -0
- package/static/styles.css +1432 -0
- package/static/theme.js +72 -0
|
@@ -0,0 +1,201 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>GMGUI - Chat with CLI Agents</title>
|
|
7
|
+
<link rel="stylesheet" href="rippleui.css">
|
|
8
|
+
<link rel="stylesheet" href="styles.css">
|
|
9
|
+
</head>
|
|
10
|
+
<body>
|
|
11
|
+
<div id="app" class="app">
|
|
12
|
+
<!-- Left Sidebar -->
|
|
13
|
+
<aside class="sidebar" id="sidebar">
|
|
14
|
+
<div class="sidebar-header">
|
|
15
|
+
<button class="sidebar-toggle" onclick="toggleSidebar()" title="Toggle sidebar">
|
|
16
|
+
<span class="toggle-icon">×</span>
|
|
17
|
+
</button>
|
|
18
|
+
</div>
|
|
19
|
+
|
|
20
|
+
<button class="new-chat-btn" onclick="showNewChatModal()">
|
|
21
|
+
<span class="icon">+</span> New Chat
|
|
22
|
+
</button>
|
|
23
|
+
|
|
24
|
+
<div class="chat-history-section">
|
|
25
|
+
<h3 class="history-title">Today</h3>
|
|
26
|
+
<div class="chat-list" id="chatList"></div>
|
|
27
|
+
</div>
|
|
28
|
+
|
|
29
|
+
<div class="sidebar-footer">
|
|
30
|
+
<button class="settings-btn" onclick="switchTab('settings')">
|
|
31
|
+
<span class="icon">⚙️</span> Settings
|
|
32
|
+
</button>
|
|
33
|
+
</div>
|
|
34
|
+
</aside>
|
|
35
|
+
|
|
36
|
+
<!-- Main Content -->
|
|
37
|
+
<main class="main-content">
|
|
38
|
+
<!-- Connection Status Indicator -->
|
|
39
|
+
<div class="connection-status connected" id="connectionStatus">
|
|
40
|
+
<span class="status-dot"></span>
|
|
41
|
+
<span class="status-text">Connected</span>
|
|
42
|
+
</div>
|
|
43
|
+
|
|
44
|
+
<div class="chat-container">
|
|
45
|
+
<!-- Chat messages area -->
|
|
46
|
+
<div class="chat-messages" id="chatMessages">
|
|
47
|
+
<div class="welcome-section">
|
|
48
|
+
<h2>Hi, what's your plan for today?</h2>
|
|
49
|
+
<div class="agent-selection">
|
|
50
|
+
<div id="agentCards" class="agent-cards"></div>
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
54
|
+
|
|
55
|
+
<!-- Chat input area -->
|
|
56
|
+
<div class="chat-input-section">
|
|
57
|
+
<div class="input-wrapper">
|
|
58
|
+
<textarea
|
|
59
|
+
id="messageInput"
|
|
60
|
+
class="chat-input"
|
|
61
|
+
placeholder="Send message, upload files (📎)..."
|
|
62
|
+
rows="1"
|
|
63
|
+
></textarea>
|
|
64
|
+
<div class="input-actions">
|
|
65
|
+
<button class="action-btn" onclick="triggerFileUpload()" title="Upload files">
|
|
66
|
+
<span class="icon">📎</span>
|
|
67
|
+
</button>
|
|
68
|
+
<button class="action-btn send-btn" id="sendBtn" onclick="sendMessage()" title="Send message">
|
|
69
|
+
<span class="icon">→</span>
|
|
70
|
+
</button>
|
|
71
|
+
<input type="file" id="fileInput" style="display: none;" onchange="handleFileUpload()" multiple />
|
|
72
|
+
</div>
|
|
73
|
+
</div>
|
|
74
|
+
</div>
|
|
75
|
+
</div>
|
|
76
|
+
|
|
77
|
+
</main>
|
|
78
|
+
|
|
79
|
+
<!-- Settings Panel (hidden by default) -->
|
|
80
|
+
<div id="settingsPanel" class="settings-panel" style="display: none;">
|
|
81
|
+
<div class="settings-content">
|
|
82
|
+
<div class="settings-header">
|
|
83
|
+
<h2>Settings</h2>
|
|
84
|
+
<button class="close-btn" onclick="switchTab('chat')">×</button>
|
|
85
|
+
</div>
|
|
86
|
+
|
|
87
|
+
<div class="setting-group">
|
|
88
|
+
<label>
|
|
89
|
+
<input type="checkbox" id="autoScroll" checked />
|
|
90
|
+
Auto-scroll Chat
|
|
91
|
+
</label>
|
|
92
|
+
</div>
|
|
93
|
+
|
|
94
|
+
<div class="setting-group">
|
|
95
|
+
<label for="connectTimeout">Connection Timeout (seconds)</label>
|
|
96
|
+
<input type="number" id="connectTimeout" value="30" class="input" />
|
|
97
|
+
</div>
|
|
98
|
+
|
|
99
|
+
<div class="setting-group">
|
|
100
|
+
<label for="screenshotFormat">Screenshot Format</label>
|
|
101
|
+
<select id="screenshotFormat" class="input">
|
|
102
|
+
<option value="png">PNG</option>
|
|
103
|
+
<option value="jpg">JPEG</option>
|
|
104
|
+
</select>
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
</div>
|
|
108
|
+
</div>
|
|
109
|
+
|
|
110
|
+
<!-- Modal for new chat options -->
|
|
111
|
+
<div id="newChatModal" class="modal">
|
|
112
|
+
<div class="modal-content" style="max-width: 400px;">
|
|
113
|
+
<div class="modal-header">
|
|
114
|
+
<h3>New Chat</h3>
|
|
115
|
+
<button onclick="closeNewChatModal()" class="btn-close">×</button>
|
|
116
|
+
</div>
|
|
117
|
+
<div class="modal-body" style="gap: 1rem; flex-direction: column; padding: 2rem;">
|
|
118
|
+
<button class="chat-option-btn" onclick="createChatInWorkspace()">
|
|
119
|
+
<span class="chat-option-icon">💬</span>
|
|
120
|
+
<div class="chat-option-content">
|
|
121
|
+
<div class="chat-option-title">Chat in this workspace</div>
|
|
122
|
+
<div class="chat-option-desc">Default chat mode</div>
|
|
123
|
+
</div>
|
|
124
|
+
</button>
|
|
125
|
+
<button class="chat-option-btn" onclick="createChatInFolder()">
|
|
126
|
+
<span class="chat-option-icon">📁</span>
|
|
127
|
+
<div class="chat-option-content">
|
|
128
|
+
<div class="chat-option-title">Chat in folder</div>
|
|
129
|
+
<div class="chat-option-desc">Contextualize chat to a specific folder</div>
|
|
130
|
+
</div>
|
|
131
|
+
</button>
|
|
132
|
+
</div>
|
|
133
|
+
</div>
|
|
134
|
+
</div>
|
|
135
|
+
|
|
136
|
+
<!-- Modal for folder browser -->
|
|
137
|
+
<div id="folderBrowserModal" class="modal">
|
|
138
|
+
<div class="modal-content" style="max-width: 600px; height: 500px;">
|
|
139
|
+
<div class="modal-header">
|
|
140
|
+
<h3>Select a Folder</h3>
|
|
141
|
+
<button class="btn-close" onclick="closeFolderBrowser()">×</button>
|
|
142
|
+
</div>
|
|
143
|
+
<div class="modal-body" style="flex-direction: column; gap: 0; padding: 0;">
|
|
144
|
+
<div style="padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); display: flex; gap: 0.5rem; align-items: center;">
|
|
145
|
+
<input type="text" id="folderPath" class="input" placeholder="/home or ~" style="flex: 1; margin: 0;" />
|
|
146
|
+
<button onclick="browseFolders()" class="btn btn-primary" style="margin: 0;">Browse</button>
|
|
147
|
+
</div>
|
|
148
|
+
<div id="folderBrowserList" style="flex: 1; overflow-y: auto; padding: 0; border: none;"></div>
|
|
149
|
+
</div>
|
|
150
|
+
<div class="modal-footer">
|
|
151
|
+
<button onclick="confirmFolderSelection()" class="btn btn-primary">Select</button>
|
|
152
|
+
<button onclick="closeFolderBrowser()" class="btn btn-secondary">Cancel</button>
|
|
153
|
+
</div>
|
|
154
|
+
</div>
|
|
155
|
+
</div>
|
|
156
|
+
|
|
157
|
+
<!-- Modal for delete confirmation -->
|
|
158
|
+
<div id="deleteConfirmModal" class="modal">
|
|
159
|
+
<div class="modal-content" style="max-width: 400px;">
|
|
160
|
+
<div class="modal-header">
|
|
161
|
+
<h3>Delete Chat</h3>
|
|
162
|
+
<button class="btn-close" onclick="app.closeDeleteConfirmDialog()">×</button>
|
|
163
|
+
</div>
|
|
164
|
+
<div class="modal-body" style="flex-direction: column; gap: 1rem; text-align: center;">
|
|
165
|
+
<p style="margin: 0; color: var(--text-primary);">Are you sure you want to delete this chat?</p>
|
|
166
|
+
<p style="margin: 0; font-size: 0.875rem; color: var(--text-tertiary);">This action cannot be undone.</p>
|
|
167
|
+
</div>
|
|
168
|
+
<div class="modal-footer">
|
|
169
|
+
<button class="btn-confirm btn btn-danger">Delete</button>
|
|
170
|
+
<button class="btn-cancel btn btn-secondary">Cancel</button>
|
|
171
|
+
</div>
|
|
172
|
+
</div>
|
|
173
|
+
</div>
|
|
174
|
+
|
|
175
|
+
<!-- Modal for screenshot preview -->
|
|
176
|
+
<div id="screenshotModal" class="modal">
|
|
177
|
+
<div class="modal-content">
|
|
178
|
+
<div class="modal-header">
|
|
179
|
+
<h3>Screenshot Captured</h3>
|
|
180
|
+
<button onclick="closeScreenshotModal()" class="btn-close">×</button>
|
|
181
|
+
</div>
|
|
182
|
+
<div class="modal-body">
|
|
183
|
+
<img id="screenshotImage" src="" alt="Screenshot" style="max-width: 100%; max-height: 60vh; border-radius: 0.5rem;" />
|
|
184
|
+
</div>
|
|
185
|
+
<div class="modal-footer">
|
|
186
|
+
<button onclick="sendScreenshot()" class="btn btn-success">Send to Agent</button>
|
|
187
|
+
<button onclick="downloadScreenshot()" class="btn btn-secondary">Download</button>
|
|
188
|
+
<button onclick="closeScreenshotModal()" class="btn btn-secondary">Close</button>
|
|
189
|
+
</div>
|
|
190
|
+
</div>
|
|
191
|
+
</div>
|
|
192
|
+
|
|
193
|
+
<!-- Loading overlay -->
|
|
194
|
+
<div id="loadingOverlay" class="loading-overlay">
|
|
195
|
+
<div class="spinner"></div>
|
|
196
|
+
</div>
|
|
197
|
+
|
|
198
|
+
<script src="theme.js"></script>
|
|
199
|
+
<script src="app.js"></script>
|
|
200
|
+
</body>
|
|
201
|
+
</html>
|
|
@@ -0,0 +1,208 @@
|
|
|
1
|
+
/* Ripple UI - Minimal CSS Framework */
|
|
2
|
+
|
|
3
|
+
::-webkit-scrollbar {
|
|
4
|
+
width: 8px;
|
|
5
|
+
height: 8px;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
::-webkit-scrollbar-track {
|
|
9
|
+
background: #f1f5f9;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
::-webkit-scrollbar-thumb {
|
|
13
|
+
background: #cbd5e1;
|
|
14
|
+
border-radius: 4px;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
::-webkit-scrollbar-thumb:hover {
|
|
18
|
+
background: #94a3b8;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
/* Utility classes */
|
|
22
|
+
.text-center {
|
|
23
|
+
text-align: center;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.text-right {
|
|
27
|
+
text-align: right;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.text-left {
|
|
31
|
+
text-align: left;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.text-bold {
|
|
35
|
+
font-weight: 700;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.text-muted {
|
|
39
|
+
color: #6b7280;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.mt-1 { margin-top: 0.25rem; }
|
|
43
|
+
.mt-2 { margin-top: 0.5rem; }
|
|
44
|
+
.mt-3 { margin-top: 0.75rem; }
|
|
45
|
+
.mt-4 { margin-top: 1rem; }
|
|
46
|
+
.mt-5 { margin-top: 1.25rem; }
|
|
47
|
+
.mt-6 { margin-top: 1.5rem; }
|
|
48
|
+
|
|
49
|
+
.mb-1 { margin-bottom: 0.25rem; }
|
|
50
|
+
.mb-2 { margin-bottom: 0.5rem; }
|
|
51
|
+
.mb-3 { margin-bottom: 0.75rem; }
|
|
52
|
+
.mb-4 { margin-bottom: 1rem; }
|
|
53
|
+
.mb-5 { margin-bottom: 1.25rem; }
|
|
54
|
+
.mb-6 { margin-bottom: 1.5rem; }
|
|
55
|
+
|
|
56
|
+
.p-1 { padding: 0.25rem; }
|
|
57
|
+
.p-2 { padding: 0.5rem; }
|
|
58
|
+
.p-3 { padding: 0.75rem; }
|
|
59
|
+
.p-4 { padding: 1rem; }
|
|
60
|
+
.p-5 { padding: 1.25rem; }
|
|
61
|
+
.p-6 { padding: 1.5rem; }
|
|
62
|
+
|
|
63
|
+
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
|
|
64
|
+
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
|
|
65
|
+
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
|
|
66
|
+
.px-4 { padding-left: 1rem; padding-right: 1rem; }
|
|
67
|
+
|
|
68
|
+
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
|
|
69
|
+
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
|
|
70
|
+
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
|
|
71
|
+
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
|
|
72
|
+
|
|
73
|
+
.flex {
|
|
74
|
+
display: flex;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.flex-col {
|
|
78
|
+
flex-direction: column;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.flex-row {
|
|
82
|
+
flex-direction: row;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.items-center {
|
|
86
|
+
align-items: center;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.justify-between {
|
|
90
|
+
justify-content: space-between;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.justify-center {
|
|
94
|
+
justify-content: center;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.justify-end {
|
|
98
|
+
justify-content: flex-end;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.gap-1 { gap: 0.25rem; }
|
|
102
|
+
.gap-2 { gap: 0.5rem; }
|
|
103
|
+
.gap-3 { gap: 0.75rem; }
|
|
104
|
+
.gap-4 { gap: 1rem; }
|
|
105
|
+
|
|
106
|
+
.w-full {
|
|
107
|
+
width: 100%;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.h-full {
|
|
111
|
+
height: 100%;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.rounded {
|
|
115
|
+
border-radius: 0.5rem;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.rounded-lg {
|
|
119
|
+
border-radius: 0.75rem;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.rounded-full {
|
|
123
|
+
border-radius: 9999px;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.border {
|
|
127
|
+
border: 1px solid #e5e7eb;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.border-t {
|
|
131
|
+
border-top: 1px solid #e5e7eb;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.border-b {
|
|
135
|
+
border-bottom: 1px solid #e5e7eb;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.border-r {
|
|
139
|
+
border-right: 1px solid #e5e7eb;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.border-l {
|
|
143
|
+
border-left: 1px solid #e5e7eb;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.shadow {
|
|
147
|
+
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.shadow-md {
|
|
151
|
+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.shadow-lg {
|
|
155
|
+
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.bg-white {
|
|
159
|
+
background-color: white;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.bg-gray-50 {
|
|
163
|
+
background-color: #f9fafb;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.bg-gray-100 {
|
|
167
|
+
background-color: #f3f4f6;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.bg-gray-200 {
|
|
171
|
+
background-color: #e5e7eb;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.bg-blue-50 {
|
|
175
|
+
background-color: #eff6ff;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.bg-blue-100 {
|
|
179
|
+
background-color: #dbeafe;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.bg-green-50 {
|
|
183
|
+
background-color: #f0fdf4;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
.bg-red-50 {
|
|
187
|
+
background-color: #fef2f2;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.text-gray-600 {
|
|
191
|
+
color: #4b5563;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.text-gray-700 {
|
|
195
|
+
color: #374151;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.text-blue-600 {
|
|
199
|
+
color: #2563eb;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
.text-green-600 {
|
|
203
|
+
color: #16a34a;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.text-red-600 {
|
|
207
|
+
color: #dc2626;
|
|
208
|
+
}
|