@vnl-works/agentjoy-react 0.1.2 → 0.1.4

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/dist/styles.css CHANGED
@@ -1,137 +1,409 @@
1
- .ajw-root {
2
- --ajw-primary: var(--aj-primary, #4F46E5);
3
- --ajw-border: #E5E7EB;
4
- --ajw-text: #111827;
5
- --ajw-muted: #6B7280;
1
+ /* AgentJoy React Widget styles
2
+ - Pure CSS (no PostCSS required)
3
+ - Uses CSS variables so hosts can theme easily.
4
+ */
5
+
6
+ .ajw-wrap {
6
7
  --ajw-bg: #ffffff;
7
- --ajw-card: #ffffff;
8
- font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
9
- color: var(--ajw-text);
10
- }
8
+ --ajw-fg: #0f172a;
9
+ --ajw-muted: #475569;
10
+ --ajw-border: #e2e8f0;
11
+ --ajw-accent: #4f46e5;
12
+ --ajw-success: #16a34a;
13
+ --ajw-warning: #d97706;
14
+ --ajw-danger: #dc2626;
11
15
 
12
- .ajw-card {
16
+ font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji",
17
+ "Segoe UI Emoji";
18
+ color: var(--ajw-fg);
19
+ background: var(--ajw-bg);
13
20
  border: 1px solid var(--ajw-border);
14
- border-radius: 14px;
15
- background: var(--ajw-card);
21
+ border-radius: 12px;
16
22
  overflow: hidden;
17
23
  }
18
24
 
19
- .ajw-header {
20
- display: flex;
21
- gap: 10px;
22
- align-items: center;
23
- padding: 12px 14px;
24
- border-bottom: 1px solid var(--ajw-border);
25
- background: #fafafa;
25
+ @media (prefers-color-scheme: dark) {
26
+ .ajw-wrap {
27
+ --ajw-bg: #0b1220;
28
+ --ajw-fg: #e5e7eb;
29
+ --ajw-muted: #9ca3af;
30
+ --ajw-border: rgba(255, 255, 255, 0.12);
31
+ --ajw-accent: #7c3aed;
32
+ --ajw-success: #22c55e;
33
+ --ajw-warning: #f59e0b;
34
+ --ajw-danger: #ef4444;
35
+ }
26
36
  }
27
37
 
28
- .ajw-logo {
29
- width: 28px;
30
- height: 28px;
31
- border-radius: 8px;
32
- background: var(--ajw-primary);
33
- display: flex;
34
- align-items: center;
35
- justify-content: center;
36
- color: white;
37
- font-weight: 700;
38
- overflow: hidden;
39
- flex: none;
38
+ .ajw-header {
39
+ padding: 12px 12px 10px;
40
+ border-bottom: 1px solid var(--ajw-border);
40
41
  }
41
42
 
42
43
  .ajw-title {
43
- font-weight: 700;
44
44
  font-size: 14px;
45
- line-height: 1.1;
45
+ font-weight: 700;
46
46
  }
47
+
47
48
  .ajw-sub {
49
+ margin-top: 4px;
48
50
  font-size: 12px;
49
51
  color: var(--ajw-muted);
50
- margin-top: 2px;
51
52
  }
52
53
 
53
- .ajw-actions { margin-left: auto; display:flex; gap: 8px; align-items:center; }
54
- .ajw-btn {
54
+ .ajw-pill {
55
+ font-size: 11px;
56
+ padding: 2px 8px;
57
+ border-radius: 999px;
58
+ border: 1px solid var(--ajw-border);
59
+ color: var(--ajw-muted);
60
+ }
61
+
62
+ .ajw-pill-running,
63
+ .ajw-pill-open {
64
+ color: var(--ajw-success);
65
+ border-color: rgba(34, 197, 94, 0.35);
66
+ }
67
+
68
+ .ajw-pill-reconnecting,
69
+ .ajw-pill-connecting {
70
+ color: var(--ajw-warning);
71
+ border-color: rgba(245, 158, 11, 0.35);
72
+ }
73
+
74
+ .ajw-pill-error,
75
+ .ajw-pill-failed {
76
+ color: var(--ajw-danger);
77
+ border-color: rgba(239, 68, 68, 0.35);
78
+ }
79
+
80
+ .ajw-actions {
81
+ display: flex;
82
+ flex-wrap: wrap;
83
+ gap: 8px;
84
+ padding: 10px 12px;
85
+ border-bottom: 1px solid var(--ajw-border);
86
+ }
87
+
88
+ .ajw-btn,
89
+ .ajw-btn-link {
90
+ font: inherit;
91
+ font-size: 12px;
92
+ padding: 7px 10px;
93
+ border-radius: 10px;
55
94
  border: 1px solid var(--ajw-border);
95
+ background: transparent;
96
+ color: var(--ajw-fg);
97
+ cursor: pointer;
98
+ text-decoration: none;
99
+ display: inline-flex;
100
+ align-items: center;
101
+ gap: 6px;
102
+ }
103
+
104
+ .ajw-btn:hover,
105
+ .ajw-btn-link:hover {
106
+ border-color: rgba(79, 70, 229, 0.35);
107
+ }
108
+
109
+ .ajw-btn:active {
110
+ transform: translateY(1px);
111
+ }
112
+
113
+ .ajw-toolbar {
114
+ display: flex;
115
+ gap: 8px;
116
+ padding: 10px 12px;
117
+ border-bottom: 1px solid var(--ajw-border);
118
+ align-items: center;
119
+ flex-wrap: wrap;
120
+ }
121
+
122
+ .ajw-search {
123
+ flex: 1;
124
+ min-width: 200px;
125
+ font: inherit;
126
+ font-size: 12px;
127
+ padding: 8px 10px;
56
128
  border-radius: 10px;
57
- background: white;
58
- padding: 6px 10px;
129
+ border: 1px solid var(--ajw-border);
130
+ outline: none;
131
+ background: transparent;
132
+ color: var(--ajw-fg);
133
+ }
134
+
135
+ .ajw-search:focus {
136
+ border-color: rgba(79, 70, 229, 0.5);
137
+ box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
138
+ }
139
+
140
+ .ajw-filters {
141
+ display: flex;
142
+ gap: 6px;
143
+ flex-wrap: wrap;
144
+ }
145
+
146
+ .ajw-chip {
147
+ font: inherit;
59
148
  font-size: 12px;
149
+ padding: 7px 10px;
150
+ border-radius: 999px;
151
+ border: 1px solid var(--ajw-border);
152
+ background: transparent;
153
+ color: var(--ajw-muted);
60
154
  cursor: pointer;
61
155
  }
62
- .ajw-btnPrimary {
63
- border-color: var(--ajw-primary);
64
- background: var(--ajw-primary);
65
- color: white;
156
+
157
+ .ajw-chip-active {
158
+ color: var(--ajw-fg);
159
+ border-color: rgba(79, 70, 229, 0.6);
160
+ background: rgba(79, 70, 229, 0.08);
66
161
  }
67
162
 
68
- .ajw-body { padding: 12px 14px; }
163
+ .ajw-count {
164
+ font-size: 12px;
165
+ color: var(--ajw-muted);
166
+ }
69
167
 
70
- .ajw-progressRow { display:flex; align-items:center; gap: 10px; }
168
+ .ajw-progress {
169
+ padding: 10px 12px;
170
+ border-bottom: 1px solid var(--ajw-border);
171
+ }
71
172
 
72
- .ajw-progressBar {
173
+ .ajw-bar {
73
174
  height: 8px;
74
- background: #F3F4F6;
175
+ background: rgba(148, 163, 184, 0.2);
75
176
  border-radius: 999px;
76
177
  overflow: hidden;
77
- flex: 1;
78
178
  }
79
- .ajw-progressBar > div {
179
+
180
+ .ajw-bar-fill {
80
181
  height: 100%;
182
+ background: var(--ajw-accent);
81
183
  width: 0%;
82
- background: var(--ajw-primary);
83
184
  }
84
185
 
85
186
  .ajw-xp {
187
+ margin-top: 6px;
86
188
  font-size: 12px;
87
189
  color: var(--ajw-muted);
88
- white-space: nowrap;
190
+ }
191
+
192
+ .ajw-persona {
193
+ display: flex;
194
+ gap: 10px;
195
+ padding: 10px 12px;
196
+ border-bottom: 1px solid var(--ajw-border);
197
+ align-items: flex-start;
198
+ }
199
+
200
+ .ajw-avatar {
201
+ width: 30px;
202
+ height: 30px;
203
+ border-radius: 999px;
204
+ display: grid;
205
+ place-items: center;
206
+ background: rgba(79, 70, 229, 0.12);
207
+ }
208
+
209
+ .ajw-bubble {
210
+ font-size: 12px;
211
+ line-height: 1.4;
212
+ color: var(--ajw-fg);
213
+ background: rgba(148, 163, 184, 0.12);
214
+ border: 1px solid var(--ajw-border);
215
+ border-radius: 12px;
216
+ padding: 8px 10px;
217
+ flex: 1;
89
218
  }
90
219
 
91
220
  .ajw-events {
92
- margin-top: 12px;
221
+ position: relative;
222
+ overflow: auto;
223
+ padding: 10px 12px;
224
+ }
225
+
226
+ .ajw-skeleton-line {
227
+ height: 10px;
228
+ border-radius: 8px;
229
+ background: rgba(148, 163, 184, 0.18);
230
+ margin-bottom: 10px;
231
+ }
232
+
233
+ .ajw-error {
234
+ border: 1px solid rgba(239, 68, 68, 0.35);
235
+ background: rgba(239, 68, 68, 0.06);
236
+ border-radius: 12px;
237
+ padding: 10px;
238
+ }
239
+
240
+ .ajw-error-title {
241
+ font-weight: 700;
242
+ font-size: 13px;
243
+ margin-bottom: 6px;
244
+ }
245
+
246
+ .ajw-error-detail {
247
+ font-size: 12px;
248
+ color: var(--ajw-muted);
249
+ margin-bottom: 10px;
250
+ }
251
+
252
+ .ajw-ev {
253
+ border: 1px solid var(--ajw-border);
254
+ border-radius: 12px;
255
+ padding: 10px;
256
+ margin-bottom: 10px;
257
+ background: rgba(148, 163, 184, 0.06);
258
+ }
259
+
260
+ .ajw-ev-warning {
261
+ border-color: rgba(245, 158, 11, 0.35);
262
+ background: rgba(245, 158, 11, 0.06);
263
+ }
264
+
265
+ .ajw-ev-error,
266
+ .ajw-ev-run-failed {
267
+ border-color: rgba(239, 68, 68, 0.35);
268
+ background: rgba(239, 68, 68, 0.06);
269
+ }
270
+
271
+ .ajw-ev-artifact-ready {
272
+ border-color: rgba(79, 70, 229, 0.35);
273
+ background: rgba(79, 70, 229, 0.06);
274
+ }
275
+
276
+ .ajw-ev-top {
93
277
  display: flex;
94
- flex-direction: column;
278
+ justify-content: space-between;
95
279
  gap: 8px;
96
- max-height: 360px;
97
- overflow: auto;
98
- padding-right: 4px;
280
+ align-items: center;
281
+ margin-bottom: 6px;
282
+ }
283
+
284
+ .ajw-ev-type {
285
+ font-size: 12px;
286
+ font-weight: 700;
99
287
  }
100
288
 
101
- .ajw-event {
102
- border-left: 3px solid var(--ajw-border);
103
- background: #FAFAFA;
289
+ .ajw-ev-right {
290
+ display: flex;
291
+ align-items: center;
292
+ gap: 6px;
293
+ }
294
+
295
+ .ajw-ev-ts {
296
+ font-size: 11px;
297
+ color: var(--ajw-muted);
298
+ font-variant-numeric: tabular-nums;
299
+ }
300
+
301
+ .ajw-iconbtn {
302
+ font: inherit;
303
+ font-size: 12px;
304
+ width: 28px;
305
+ height: 28px;
104
306
  border-radius: 10px;
105
- padding: 10px 10px 10px 12px;
307
+ border: 1px solid var(--ajw-border);
308
+ background: transparent;
309
+ color: var(--ajw-muted);
310
+ cursor: pointer;
311
+ }
312
+
313
+ .ajw-iconbtn:hover {
314
+ color: var(--ajw-fg);
315
+ border-color: rgba(79, 70, 229, 0.35);
106
316
  }
107
- .ajw-eventWarning { border-left-color: rgba(180,83,9,0.8); }
108
- .ajw-eventError { border-left-color: rgba(185,28,28,0.8); }
109
- .ajw-eventSystem { border-left-color: rgba(79,70,229,0.7); }
110
317
 
111
- .ajw-eventMsg { font-size: 13px; font-weight: 600; }
112
- .ajw-eventMeta { font-size: 12px; color: var(--ajw-muted); margin-top: 4px; display:flex; gap:10px; flex-wrap: wrap; }
113
- .ajw-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
318
+ .ajw-ev-msg {
319
+ font-size: 12px;
320
+ line-height: 1.45;
321
+ margin-bottom: 8px;
322
+ }
114
323
 
115
- .ajw-persona {
324
+ .ajw-ev-tool {
325
+ border-top: 1px dashed var(--ajw-border);
326
+ padding-top: 8px;
327
+ margin-top: 8px;
328
+ font-size: 12px;
329
+ color: var(--ajw-muted);
330
+ }
331
+
332
+ .ajw-ev-tool-name {
333
+ font-weight: 700;
334
+ color: var(--ajw-fg);
335
+ margin-bottom: 4px;
336
+ }
337
+
338
+ .ajw-ev-tool-io {
339
+ font-size: 12px;
340
+ color: var(--ajw-muted);
341
+ }
342
+
343
+ .ajw-ev-artifacts {
344
+ border-top: 1px dashed var(--ajw-border);
345
+ padding-top: 8px;
346
+ margin-top: 8px;
347
+ }
348
+
349
+ .ajw-ev-artifact {
116
350
  display: flex;
117
351
  gap: 8px;
118
- align-items: flex-start;
352
+ align-items: baseline;
353
+ font-size: 12px;
354
+ margin-top: 6px;
119
355
  }
120
- .ajw-avatar {
121
- width: 26px;
122
- height: 26px;
123
- border-radius: 10px;
124
- background: rgba(79,70,229,0.12);
125
- display:flex;
126
- align-items:center;
127
- justify-content:center;
128
- flex: none;
356
+
357
+ .ajw-ev-artifact-label {
358
+ color: var(--ajw-muted);
359
+ font-weight: 700;
360
+ min-width: 84px;
129
361
  }
130
- .ajw-bubble {
131
- background: white;
362
+
363
+ .ajw-ev-artifact a {
364
+ color: var(--ajw-accent);
365
+ text-decoration: none;
366
+ word-break: break-all;
367
+ }
368
+
369
+ .ajw-ev-artifact a:hover {
370
+ text-decoration: underline;
371
+ }
372
+
373
+ .ajw-ev-artifact code {
374
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
375
+ font-size: 11px;
376
+ padding: 2px 6px;
377
+ border-radius: 8px;
132
378
  border: 1px solid var(--ajw-border);
133
- border-radius: 12px;
134
- padding: 9px 10px;
135
- font-size: 13px;
136
- font-weight: 600;
379
+ background: rgba(148, 163, 184, 0.12);
380
+ }
381
+
382
+ .ajw-ev-detail {
383
+ margin-top: 8px;
384
+ font-size: 12px;
385
+ color: var(--ajw-muted);
386
+ white-space: pre-wrap;
387
+ }
388
+
389
+ .ajw-float {
390
+ position: absolute;
391
+ right: 12px;
392
+ bottom: 12px;
393
+ font: inherit;
394
+ font-size: 12px;
395
+ padding: 8px 10px;
396
+ border-radius: 999px;
397
+ border: 1px solid rgba(79, 70, 229, 0.35);
398
+ background: rgba(79, 70, 229, 0.08);
399
+ color: var(--ajw-fg);
400
+ cursor: pointer;
401
+ }
402
+
403
+ .ajw-compact .ajw-ev {
404
+ padding: 8px;
405
+ }
406
+
407
+ .ajw-compact .ajw-ev-msg {
408
+ margin-bottom: 6px;
137
409
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vnl-works/agentjoy-react",
3
- "version": "0.1.2",
3
+ "version": "0.1.4",
4
4
  "description": "AgentJoy embedded widget SDK (React)",
5
5
  "license": "MIT",
6
6
  "main": "dist/index.js",
package/dist/index.css DELETED
@@ -1,171 +0,0 @@
1
- /* src/styles.css */
2
- .ajw-root {
3
- --ajw-primary: var(--aj-primary, #4F46E5);
4
- --ajw-border: #E5E7EB;
5
- --ajw-text: #111827;
6
- --ajw-muted: #6B7280;
7
- --ajw-bg: #ffffff;
8
- --ajw-card: #ffffff;
9
- font-family:
10
- ui-sans-serif,
11
- system-ui,
12
- -apple-system,
13
- Segoe UI,
14
- Roboto,
15
- Helvetica,
16
- Arial,
17
- "Apple Color Emoji",
18
- "Segoe UI Emoji";
19
- color: var(--ajw-text);
20
- }
21
- .ajw-card {
22
- border: 1px solid var(--ajw-border);
23
- border-radius: 14px;
24
- background: var(--ajw-card);
25
- overflow: hidden;
26
- }
27
- .ajw-header {
28
- display: flex;
29
- gap: 10px;
30
- align-items: center;
31
- padding: 12px 14px;
32
- border-bottom: 1px solid var(--ajw-border);
33
- background: #fafafa;
34
- }
35
- .ajw-logo {
36
- width: 28px;
37
- height: 28px;
38
- border-radius: 8px;
39
- background: var(--ajw-primary);
40
- display: flex;
41
- align-items: center;
42
- justify-content: center;
43
- color: white;
44
- font-weight: 700;
45
- overflow: hidden;
46
- flex: none;
47
- }
48
- .ajw-title {
49
- font-weight: 700;
50
- font-size: 14px;
51
- line-height: 1.1;
52
- }
53
- .ajw-sub {
54
- font-size: 12px;
55
- color: var(--ajw-muted);
56
- margin-top: 2px;
57
- }
58
- .ajw-actions {
59
- margin-left: auto;
60
- display: flex;
61
- gap: 8px;
62
- align-items: center;
63
- }
64
- .ajw-btn {
65
- border: 1px solid var(--ajw-border);
66
- border-radius: 10px;
67
- background: white;
68
- padding: 6px 10px;
69
- font-size: 12px;
70
- cursor: pointer;
71
- }
72
- .ajw-btnPrimary {
73
- border-color: var(--ajw-primary);
74
- background: var(--ajw-primary);
75
- color: white;
76
- }
77
- .ajw-body {
78
- padding: 12px 14px;
79
- }
80
- .ajw-progressRow {
81
- display: flex;
82
- align-items: center;
83
- gap: 10px;
84
- }
85
- .ajw-progressBar {
86
- height: 8px;
87
- background: #F3F4F6;
88
- border-radius: 999px;
89
- overflow: hidden;
90
- flex: 1;
91
- }
92
- .ajw-progressBar > div {
93
- height: 100%;
94
- width: 0%;
95
- background: var(--ajw-primary);
96
- }
97
- .ajw-xp {
98
- font-size: 12px;
99
- color: var(--ajw-muted);
100
- white-space: nowrap;
101
- }
102
- .ajw-events {
103
- margin-top: 12px;
104
- display: flex;
105
- flex-direction: column;
106
- gap: 8px;
107
- max-height: 360px;
108
- overflow: auto;
109
- padding-right: 4px;
110
- }
111
- .ajw-event {
112
- border-left: 3px solid var(--ajw-border);
113
- background: #FAFAFA;
114
- border-radius: 10px;
115
- padding: 10px 10px 10px 12px;
116
- }
117
- .ajw-eventWarning {
118
- border-left-color: rgba(180, 83, 9, 0.8);
119
- }
120
- .ajw-eventError {
121
- border-left-color: rgba(185, 28, 28, 0.8);
122
- }
123
- .ajw-eventSystem {
124
- border-left-color: rgba(79, 70, 229, 0.7);
125
- }
126
- .ajw-eventMsg {
127
- font-size: 13px;
128
- font-weight: 600;
129
- }
130
- .ajw-eventMeta {
131
- font-size: 12px;
132
- color: var(--ajw-muted);
133
- margin-top: 4px;
134
- display: flex;
135
- gap: 10px;
136
- flex-wrap: wrap;
137
- }
138
- .ajw-mono {
139
- font-family:
140
- ui-monospace,
141
- SFMono-Regular,
142
- Menlo,
143
- Monaco,
144
- Consolas,
145
- "Liberation Mono",
146
- "Courier New",
147
- monospace;
148
- }
149
- .ajw-persona {
150
- display: flex;
151
- gap: 8px;
152
- align-items: flex-start;
153
- }
154
- .ajw-avatar {
155
- width: 26px;
156
- height: 26px;
157
- border-radius: 10px;
158
- background: rgba(79, 70, 229, 0.12);
159
- display: flex;
160
- align-items: center;
161
- justify-content: center;
162
- flex: none;
163
- }
164
- .ajw-bubble {
165
- background: white;
166
- border: 1px solid var(--ajw-border);
167
- border-radius: 12px;
168
- padding: 9px 10px;
169
- font-size: 13px;
170
- font-weight: 600;
171
- }