Skip to content

Commit e6554f8

Browse files
openhands-agentopenhands-agent
committed
Add agent-server API key support and server status monitoring
- Add agent-server API key field to settings modal - Create ServerStatus component with real-time health checks - Implement server connectivity and LLM configuration validation - Add auto-refresh functionality for status monitoring - Update settings interface to include agentServerApiKey - Add comprehensive error handling and user guidance - Include CSS styling with light/dark mode support Co-authored-by: openhands <openhands@all-hands.dev>
1 parent bdf2eeb commit e6554f8

File tree

7 files changed

+689
-6
lines changed

7 files changed

+689
-6
lines changed

‎example/src/App.css‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,32 @@
1+
:root {
2+
/* Color variables for light mode */
3+
--card-bg: #ffffff;
4+
--border-color: #e0e0e0;
5+
--border-light: #f0f0f0;
6+
--text-primary: #333333;
7+
--text-secondary: #666666;
8+
--primary-color: #646cff;
9+
--hover-bg: #f5f5f5;
10+
--code-bg: #f8f9fa;
11+
--error-color: #d32f2f;
12+
--warning-color: #f57c00;
13+
--info-bg: #e3f2fd;
14+
--info-border: #2196f3;
15+
--info-text: #1976d2;
16+
17+
/* Dark mode variables */
18+
--card-bg-dark: #2a2a2a;
19+
--border-color-dark: #404040;
20+
--border-light-dark: #353535;
21+
--text-primary-dark: #ffffff;
22+
--text-secondary-dark: #cccccc;
23+
--hover-bg-dark: #3a3a3a;
24+
--code-bg-dark: #1e1e1e;
25+
--info-bg-dark: #1a237e;
26+
--info-border-dark: #3f51b5;
27+
--info-text-dark: #90caf9;
28+
}
29+
130
#root {
231
max-width: 1280px;
332
margin: 0 auto;

‎example/src/App.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212

1313
// Import settings components
1414
import { SettingsModal } from './components/SettingsModal'
15+
import { ServerStatus } from './components/ServerStatus'
1516
import { useSettings } from './contexts/SettingsContext'
1617

1718
function App() {
@@ -73,10 +74,13 @@ function App() {
7374
<ul>
7475
<li><strong>Agent Server URL:</strong> {settings.agentServerUrl}</li>
7576
<li><strong>Model:</strong> {settings.modelName}</li>
76-
<li><strong>API Key:</strong> {settings.apiKey ? '***configured***' : 'not set'}</li>
77+
<li><strong>LLM API Key:</strong> {settings.apiKey ? '***configured***' : 'not set'}</li>
78+
<li><strong>Agent Server API Key:</strong> {settings.agentServerApiKey ? '***configured***' : 'not set'}</li>
7779
</ul>
7880
</div>
7981

82+
<ServerStatus settings={settings} />
83+
8084
<div className="card">
8185
<h2>SDK Import Status</h2>
8286
<p className="status">{sdkStatus}</p>

‎example/src/components/ServerStatus.css‎

Lines changed: 242 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,242 @@
1+
.server-status {
2+
background: var(--card-bg);
3+
border: 1px solid var(--border-color);
4+
border-radius: 8px;
5+
padding: 1.5rem;
6+
margin: 1rem 0;
7+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
8+
}
9+
10+
.status-header {
11+
display: flex;
12+
justify-content: space-between;
13+
align-items: center;
14+
margin-bottom: 1rem;
15+
padding-bottom: 0.5rem;
16+
border-bottom: 1px solid var(--border-color);
17+
}
18+
19+
.status-header h3 {
20+
margin: 0;
21+
color: var(--text-primary);
22+
font-size: 1.1rem;
23+
font-weight: 600;
24+
}
25+
26+
.status-controls {
27+
display: flex;
28+
align-items: center;
29+
gap: 1rem;
30+
}
31+
32+
.auto-refresh-toggle {
33+
display: flex;
34+
align-items: center;
35+
gap: 0.5rem;
36+
font-size: 0.9rem;
37+
color: var(--text-secondary);
38+
cursor: pointer;
39+
user-select: none;
40+
}
41+
42+
.auto-refresh-toggle input[type="checkbox"] {
43+
margin: 0;
44+
}
45+
46+
.refresh-button {
47+
background: none;
48+
border: 1px solid var(--border-color);
49+
border-radius: 4px;
50+
padding: 0.25rem 0.5rem;
51+
cursor: pointer;
52+
font-size: 1rem;
53+
transition: all 0.2s ease;
54+
}
55+
56+
.refresh-button:hover:not(:disabled) {
57+
background: var(--hover-bg);
58+
border-color: var(--primary-color);
59+
}
60+
61+
.refresh-button:disabled {
62+
opacity: 0.6;
63+
cursor: not-allowed;
64+
}
65+
66+
.status-items {
67+
display: flex;
68+
flex-direction: column;
69+
gap: 0.75rem;
70+
}
71+
72+
.status-item {
73+
display: flex;
74+
justify-content: space-between;
75+
align-items: flex-start;
76+
padding: 0.5rem 0;
77+
border-bottom: 1px solid var(--border-light);
78+
}
79+
80+
.status-item:last-child {
81+
border-bottom: none;
82+
}
83+
84+
.status-label {
85+
display: flex;
86+
align-items: center;
87+
gap: 0.5rem;
88+
font-weight: 500;
89+
color: var(--text-primary);
90+
min-width: 140px;
91+
}
92+
93+
.status-icon {
94+
font-size: 0.9rem;
95+
width: 1rem;
96+
text-align: center;
97+
}
98+
99+
.status-value {
100+
text-align: right;
101+
color: var(--text-secondary);
102+
max-width: 60%;
103+
word-break: break-word;
104+
}
105+
106+
.url-value {
107+
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
108+
font-size: 0.85rem;
109+
background: var(--code-bg);
110+
padding: 0.25rem 0.5rem;
111+
border-radius: 4px;
112+
border: 1px solid var(--border-light);
113+
}
114+
115+
.error-text {
116+
color: var(--error-color);
117+
font-weight: 500;
118+
}
119+
120+
.warning-text {
121+
color: var(--warning-color);
122+
font-weight: 500;
123+
}
124+
125+
.status-help {
126+
margin-top: 1.5rem;
127+
padding: 1rem;
128+
background: var(--info-bg);
129+
border: 1px solid var(--info-border);
130+
border-radius: 6px;
131+
font-size: 0.9rem;
132+
}
133+
134+
.status-help p {
135+
margin: 0 0 0.5rem 0;
136+
color: var(--info-text);
137+
font-weight: 500;
138+
}
139+
140+
.status-help ul {
141+
margin: 0;
142+
padding-left: 1.5rem;
143+
color: var(--text-secondary);
144+
}
145+
146+
.status-help li {
147+
margin-bottom: 0.25rem;
148+
}
149+
150+
/* Responsive design */
151+
@media (max-width: 768px) {
152+
.server-status {
153+
padding: 1rem;
154+
margin: 0.5rem 0;
155+
}
156+
157+
.status-header {
158+
flex-direction: column;
159+
align-items: flex-start;
160+
gap: 0.5rem;
161+
}
162+
163+
.status-controls {
164+
align-self: flex-end;
165+
}
166+
167+
.status-item {
168+
flex-direction: column;
169+
align-items: flex-start;
170+
gap: 0.25rem;
171+
}
172+
173+
.status-label {
174+
min-width: auto;
175+
}
176+
177+
.status-value {
178+
text-align: left;
179+
max-width: 100%;
180+
}
181+
}
182+
183+
/* Dark mode adjustments */
184+
@media (prefers-color-scheme: dark) {
185+
.server-status {
186+
background: var(--card-bg-dark);
187+
border-color: var(--border-color-dark);
188+
}
189+
190+
.status-header {
191+
border-bottom-color: var(--border-color-dark);
192+
}
193+
194+
.status-header h3 {
195+
color: var(--text-primary-dark);
196+
}
197+
198+
.auto-refresh-toggle {
199+
color: var(--text-secondary-dark);
200+
}
201+
202+
.refresh-button {
203+
border-color: var(--border-color-dark);
204+
color: var(--text-primary-dark);
205+
}
206+
207+
.refresh-button:hover:not(:disabled) {
208+
background: var(--hover-bg-dark);
209+
border-color: var(--primary-color);
210+
}
211+
212+
.status-item {
213+
border-bottom-color: var(--border-light-dark);
214+
}
215+
216+
.status-label {
217+
color: var(--text-primary-dark);
218+
}
219+
220+
.status-value {
221+
color: var(--text-secondary-dark);
222+
}
223+
224+
.url-value {
225+
background: var(--code-bg-dark);
226+
border-color: var(--border-light-dark);
227+
color: var(--text-primary-dark);
228+
}
229+
230+
.status-help {
231+
background: var(--info-bg-dark);
232+
border-color: var(--info-border-dark);
233+
}
234+
235+
.status-help p {
236+
color: var(--info-text-dark);
237+
}
238+
239+
.status-help ul {
240+
color: var(--text-secondary-dark);
241+
}
242+
}

0 commit comments

Comments
 (0)