@opensearch-project/agent-health 0.1.0 → 0.2.0

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.
@@ -0,0 +1,469 @@
1
+ <!DOCTYPE html>
2
+ <!--
3
+ * Copyright OpenSearch Contributors
4
+ * SPDX-License-Identifier: Apache-2.0
5
+ -->
6
+ <html lang="en">
7
+ <head>
8
+ <meta charset="UTF-8">
9
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
10
+ <title>First Run Experience - Improved IA</title>
11
+ <style>
12
+ * {
13
+ margin: 0;
14
+ padding: 0;
15
+ box-sizing: border-box;
16
+ }
17
+
18
+ body {
19
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
20
+ background: #0b1120;
21
+ color: #e5e7eb;
22
+ line-height: 1.6;
23
+ padding: 48px 24px;
24
+ }
25
+
26
+ .container {
27
+ max-width: 1200px;
28
+ margin: 0 auto;
29
+ }
30
+
31
+ /* Hero Section */
32
+ .hero {
33
+ text-align: center;
34
+ margin-bottom: 64px;
35
+ }
36
+
37
+ .hero-icon {
38
+ width: 64px;
39
+ height: 64px;
40
+ margin: 0 auto 24px;
41
+ background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
42
+ border-radius: 50%;
43
+ display: flex;
44
+ align-items: center;
45
+ justify-content: center;
46
+ }
47
+
48
+ .hero-icon svg {
49
+ width: 32px;
50
+ height: 32px;
51
+ color: white;
52
+ }
53
+
54
+ .hero h1 {
55
+ font-size: 36px;
56
+ font-weight: 700;
57
+ margin-bottom: 16px;
58
+ color: #ffffff;
59
+ }
60
+
61
+ .hero-subtitle {
62
+ font-size: 18px;
63
+ color: #9ca3af;
64
+ margin-bottom: 32px;
65
+ max-width: 600px;
66
+ margin-left: auto;
67
+ margin-right: auto;
68
+ }
69
+
70
+ .cta-buttons {
71
+ display: flex;
72
+ align-items: center;
73
+ justify-content: center;
74
+ gap: 12px;
75
+ }
76
+
77
+ .cta-button {
78
+ display: inline-flex;
79
+ align-items: center;
80
+ gap: 8px;
81
+ background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
82
+ color: white;
83
+ padding: 14px 28px;
84
+ border-radius: 8px;
85
+ font-size: 16px;
86
+ font-weight: 600;
87
+ text-decoration: none;
88
+ border: none;
89
+ cursor: pointer;
90
+ transition: transform 0.2s, box-shadow 0.2s;
91
+ }
92
+
93
+ .cta-button:hover {
94
+ transform: translateY(-2px);
95
+ box-shadow: 0 8px 24px rgba(59, 130, 246, 0.4);
96
+ }
97
+
98
+ .cta-button svg {
99
+ width: 20px;
100
+ height: 20px;
101
+ }
102
+
103
+ .cta-button-outline {
104
+ display: inline-flex;
105
+ align-items: center;
106
+ gap: 8px;
107
+ background: transparent;
108
+ color: #e5e7eb;
109
+ padding: 14px 28px;
110
+ border-radius: 8px;
111
+ font-size: 16px;
112
+ font-weight: 600;
113
+ text-decoration: none;
114
+ border: 1px solid #2d3748;
115
+ cursor: pointer;
116
+ transition: background 0.2s, border-color 0.2s;
117
+ }
118
+
119
+ .cta-button-outline:hover {
120
+ background: rgba(59, 130, 246, 0.1);
121
+ border-color: #3b82f6;
122
+ }
123
+
124
+ .cta-button-outline svg {
125
+ width: 20px;
126
+ height: 20px;
127
+ }
128
+
129
+ .helper-text {
130
+ margin-top: 12px;
131
+ font-size: 14px;
132
+ color: #6b7280;
133
+ }
134
+
135
+ /* Cards Grid */
136
+ .cards-grid {
137
+ display: grid;
138
+ grid-template-columns: 1fr 1fr;
139
+ gap: 32px;
140
+ margin-bottom: 48px;
141
+ }
142
+
143
+ @media (max-width: 768px) {
144
+ .cards-grid {
145
+ grid-template-columns: 1fr;
146
+ }
147
+ }
148
+
149
+ .card {
150
+ background: #1a1f2e;
151
+ border: 1px solid #2d3748;
152
+ border-radius: 12px;
153
+ padding: 32px;
154
+ }
155
+
156
+ .card-title {
157
+ font-size: 20px;
158
+ font-weight: 600;
159
+ margin-bottom: 12px;
160
+ color: #ffffff;
161
+ }
162
+
163
+ .card-subtitle {
164
+ font-size: 14px;
165
+ color: #9ca3af;
166
+ margin-bottom: 24px;
167
+ }
168
+
169
+ /* Left Card - Workflow */
170
+ .workflow-steps {
171
+ display: flex;
172
+ align-items: center;
173
+ gap: 16px;
174
+ margin-bottom: 32px;
175
+ position: relative;
176
+ }
177
+
178
+ .workflow-icon {
179
+ width: 48px;
180
+ height: 48px;
181
+ border-radius: 50%;
182
+ display: flex;
183
+ align-items: center;
184
+ justify-content: center;
185
+ flex-shrink: 0;
186
+ }
187
+
188
+ .workflow-icon.trace {
189
+ background: rgba(59, 130, 246, 0.2);
190
+ color: #3b82f6;
191
+ }
192
+
193
+ .workflow-icon.evaluate {
194
+ background: rgba(139, 92, 246, 0.2);
195
+ color: #8b5cf6;
196
+ }
197
+
198
+ .workflow-icon.improve {
199
+ background: rgba(168, 85, 247, 0.2);
200
+ color: #a855f7;
201
+ }
202
+
203
+ .workflow-icon svg {
204
+ width: 24px;
205
+ height: 24px;
206
+ }
207
+
208
+ .workflow-arrow {
209
+ color: #4b5563;
210
+ font-size: 20px;
211
+ flex-shrink: 0;
212
+ }
213
+
214
+ /* U-shaped return arrow */
215
+ .workflow-return-arrow {
216
+ position: absolute;
217
+ bottom: -40px;
218
+ left: 24px;
219
+ right: 24px;
220
+ height: 40px;
221
+ border: 2px dashed #4b5563;
222
+ border-top: none;
223
+ border-radius: 0 0 20px 20px;
224
+ }
225
+
226
+ .workflow-return-arrow::before {
227
+ content: '↑';
228
+ position: absolute;
229
+ left: -8px;
230
+ top: -12px;
231
+ color: #4b5563;
232
+ font-size: 20px;
233
+ }
234
+
235
+ .workflow-details {
236
+ margin-top: 72px;
237
+ display: flex;
238
+ flex-direction: column;
239
+ gap: 20px;
240
+ }
241
+
242
+ .workflow-item {
243
+ display: flex;
244
+ gap: 12px;
245
+ }
246
+
247
+ .workflow-item-icon {
248
+ width: 20px;
249
+ height: 20px;
250
+ flex-shrink: 0;
251
+ margin-top: 2px;
252
+ }
253
+
254
+ .workflow-item-icon.trace { color: #3b82f6; }
255
+ .workflow-item-icon.evaluate { color: #8b5cf6; }
256
+ .workflow-item-icon.improve { color: #a855f7; }
257
+
258
+ .workflow-item-content h3 {
259
+ font-size: 15px;
260
+ font-weight: 600;
261
+ margin-bottom: 4px;
262
+ color: #ffffff;
263
+ }
264
+
265
+ .workflow-item-content p {
266
+ font-size: 14px;
267
+ color: #9ca3af;
268
+ }
269
+
270
+ .card-footer {
271
+ margin-top: 32px;
272
+ padding-top: 24px;
273
+ border-top: 1px solid #2d3748;
274
+ font-size: 14px;
275
+ color: #9ca3af;
276
+ font-style: italic;
277
+ }
278
+
279
+ /* Right Card - Features */
280
+ .features-list {
281
+ display: flex;
282
+ flex-direction: column;
283
+ gap: 20px;
284
+ }
285
+
286
+ .feature-item {
287
+ display: flex;
288
+ gap: 12px;
289
+ }
290
+
291
+ .feature-icon {
292
+ width: 20px;
293
+ height: 20px;
294
+ color: #10b981;
295
+ flex-shrink: 0;
296
+ margin-top: 2px;
297
+ }
298
+
299
+ .feature-content h3 {
300
+ font-size: 15px;
301
+ font-weight: 600;
302
+ margin-bottom: 4px;
303
+ color: #ffffff;
304
+ }
305
+
306
+ .feature-content p {
307
+ font-size: 14px;
308
+ color: #9ca3af;
309
+ }
310
+
311
+ .card-link {
312
+ margin-top: 24px;
313
+ padding-top: 24px;
314
+ border-top: 1px solid #2d3748;
315
+ font-size: 14px;
316
+ color: #9ca3af;
317
+ text-align: center;
318
+ }
319
+
320
+ .card-link a {
321
+ color: #3b82f6;
322
+ text-decoration: none;
323
+ font-weight: 500;
324
+ }
325
+
326
+ .card-link a:hover {
327
+ text-decoration: underline;
328
+ }
329
+ </style>
330
+ </head>
331
+ <body>
332
+ <div class="container">
333
+ <!-- Hero Section -->
334
+ <div class="hero">
335
+ <div class="hero-icon">
336
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
337
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
338
+ </svg>
339
+ </div>
340
+
341
+ <h1>Welcome to Agent Health</h1>
342
+ <p class="hero-subtitle">
343
+ Make your AI agents measurable, reliable, and production-ready.
344
+ </p>
345
+
346
+ <div class="cta-buttons">
347
+ <button class="cta-button">
348
+ Configure Your Cluster
349
+ </button>
350
+
351
+ <button class="cta-button-outline">
352
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
353
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
354
+ </svg>
355
+ Explore with Sample Data
356
+ </button>
357
+ </div>
358
+
359
+ <p class="helper-text">
360
+ Explore a fully configured environment with real traces and benchmarks.
361
+ </p>
362
+ </div>
363
+
364
+ <!-- Cards Grid -->
365
+ <div class="cards-grid">
366
+ <!-- Left Card: The Workflow -->
367
+ <div class="card">
368
+ <h2 class="card-title">The Workflow</h2>
369
+ <p class="card-subtitle">Improve your agents through a simple loop:</p>
370
+
371
+ <div class="workflow-steps">
372
+ <div class="workflow-icon trace">
373
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
374
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 13h4l3-9 4 18 3-9h4" />
375
+ </svg>
376
+ </div>
377
+ <span class="workflow-arrow">→</span>
378
+ <div class="workflow-icon evaluate">
379
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
380
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
381
+ </svg>
382
+ </div>
383
+ <span class="workflow-arrow">→</span>
384
+ <div class="workflow-icon improve">
385
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
386
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
387
+ </svg>
388
+ </div>
389
+ <div class="workflow-return-arrow"></div>
390
+ </div>
391
+
392
+ <div class="workflow-details">
393
+ <div class="workflow-item">
394
+ <svg class="workflow-item-icon trace" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
395
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 13h4l3-9 4 18 3-9h4" />
396
+ </svg>
397
+ <div class="workflow-item-content">
398
+ <h3>Trace</h3>
399
+ <p>See exactly what your agent did.</p>
400
+ </div>
401
+ </div>
402
+
403
+ <div class="workflow-item">
404
+ <svg class="workflow-item-icon evaluate" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
405
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
406
+ </svg>
407
+ <div class="workflow-item-content">
408
+ <h3>Evaluate</h3>
409
+ <p>Measure quality, cost, and performance.</p>
410
+ </div>
411
+ </div>
412
+
413
+ <div class="workflow-item">
414
+ <svg class="workflow-item-icon improve" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
415
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
416
+ </svg>
417
+ <div class="workflow-item-content">
418
+ <h3>Improve</h3>
419
+ <p>Prevent regressions with structured test cases.</p>
420
+ </div>
421
+ </div>
422
+ </div>
423
+ </div>
424
+
425
+ <!-- Right Card: Key Features -->
426
+ <div class="card">
427
+ <h2 class="card-title">Key Features</h2>
428
+ <p class="card-subtitle">Explore a fully-configured environment with real benchmarks and traces</p>
429
+
430
+ <div class="features-list">
431
+ <div class="feature-item">
432
+ <svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
433
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
434
+ </svg>
435
+ <div class="feature-content">
436
+ <h3>Performance Trends</h3>
437
+ <p>Pass rate, latency, and cost over time.</p>
438
+ </div>
439
+ </div>
440
+
441
+ <div class="feature-item">
442
+ <svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
443
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
444
+ </svg>
445
+ <div class="feature-content">
446
+ <h3>Benchmark Results</h3>
447
+ <p>Side-by-side evaluation across agents.</p>
448
+ </div>
449
+ </div>
450
+
451
+ <div class="feature-item">
452
+ <svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
453
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
454
+ </svg>
455
+ <div class="feature-content">
456
+ <h3>Trace Diagnostics</h3>
457
+ <p>Step-by-step execution visibility.</p>
458
+ </div>
459
+ </div>
460
+ </div>
461
+
462
+ <div class="card-link">
463
+ Ready to connect your own data? <a href="#">Configure your cluster</a>
464
+ </div>
465
+ </div>
466
+ </div>
467
+ </div>
468
+ </body>
469
+ </html>