fraim-framework 2.0.122 → 2.0.124

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,568 @@
1
+ :root {
2
+ color-scheme: light;
3
+ --visa-blue: #1434cb;
4
+ --visa-gold: #f7b600;
5
+ --ink: #10233f;
6
+ --muted: #607089;
7
+ --surface: #ffffff;
8
+ --surface-muted: #f6f8fc;
9
+ --surface-strong: #edf2ff;
10
+ --surface-soft: rgba(255, 255, 255, 0.72);
11
+ --line: #d8e1f0;
12
+ --success: #12785e;
13
+ --danger: #a22738;
14
+ --shadow: 0 22px 48px rgba(16, 35, 63, 0.08);
15
+ --shadow-soft: 0 12px 28px rgba(16, 35, 63, 0.06);
16
+ }
17
+
18
+ * {
19
+ box-sizing: border-box;
20
+ }
21
+
22
+ html,
23
+ body {
24
+ min-height: 100%;
25
+ }
26
+
27
+ body {
28
+ margin: 0;
29
+ font-family: "Segoe UI", Inter, Arial, sans-serif;
30
+ color: var(--ink);
31
+ background:
32
+ linear-gradient(180deg, rgba(20, 52, 203, 0.08), rgba(20, 52, 203, 0) 16%),
33
+ linear-gradient(135deg, rgba(247, 182, 0, 0.12), rgba(247, 182, 0, 0) 22%),
34
+ #f4f7fc;
35
+ overflow-x: hidden;
36
+ overflow-y: auto;
37
+ }
38
+
39
+ button,
40
+ input,
41
+ textarea {
42
+ font: inherit;
43
+ }
44
+
45
+ a {
46
+ color: var(--visa-blue);
47
+ }
48
+
49
+ .app-shell {
50
+ max-width: 1480px;
51
+ margin: 0 auto;
52
+ padding: 18px 24px 28px;
53
+ min-height: 100dvh;
54
+ display: grid;
55
+ grid-template-rows: auto 1fr;
56
+ gap: 18px;
57
+ }
58
+
59
+ .app-header {
60
+ display: grid;
61
+ grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
62
+ gap: 18px;
63
+ align-items: stretch;
64
+ }
65
+
66
+ .brand-lockup {
67
+ padding: 18px 0 8px;
68
+ display: grid;
69
+ gap: 4px;
70
+ }
71
+
72
+ .brand-title {
73
+ font-size: 32px;
74
+ line-height: 1.05;
75
+ font-weight: 800;
76
+ color: var(--ink);
77
+ }
78
+
79
+ .brand-subtitle,
80
+ .section-label,
81
+ .helper-text,
82
+ .muted {
83
+ color: var(--muted);
84
+ }
85
+
86
+ .section-label {
87
+ font-size: 12px;
88
+ font-weight: 700;
89
+ letter-spacing: 0;
90
+ text-transform: uppercase;
91
+ }
92
+
93
+ .section-label {
94
+ display: inline-flex;
95
+ align-items: center;
96
+ gap: 8px;
97
+ }
98
+
99
+ h1,
100
+ h2,
101
+ p {
102
+ margin: 0;
103
+ }
104
+
105
+ .topbar-card,
106
+ .card {
107
+ background: var(--surface-soft);
108
+ backdrop-filter: blur(16px);
109
+ border: 1px solid var(--line);
110
+ border-radius: 8px;
111
+ box-shadow: var(--shadow);
112
+ }
113
+
114
+ .topbar-card {
115
+ width: 100%;
116
+ padding: 16px 18px;
117
+ display: flex;
118
+ gap: 16px;
119
+ align-items: start;
120
+ justify-content: space-between;
121
+ }
122
+
123
+ .workspace-card {
124
+ align-self: stretch;
125
+ }
126
+
127
+ .workspace-section {
128
+ display: grid;
129
+ gap: 10px;
130
+ }
131
+
132
+ .workspace-section-inline {
133
+ min-width: 0;
134
+ flex: 1 1 auto;
135
+ }
136
+
137
+ .employee-picker,
138
+ .category-picker,
139
+ .template-chips,
140
+ .project-actions,
141
+ .composer-actions {
142
+ display: flex;
143
+ flex-wrap: wrap;
144
+ gap: 10px;
145
+ }
146
+
147
+ .employee-chip,
148
+ .category-chip,
149
+ .template-chip,
150
+ .secondary-button,
151
+ .primary-button {
152
+ border-radius: 7px;
153
+ border: 1px solid var(--line);
154
+ padding: 10px 14px;
155
+ background: rgba(255, 255, 255, 0.9);
156
+ color: var(--ink);
157
+ cursor: pointer;
158
+ transition: border-color 120ms ease, background 120ms ease, transform 120ms ease, box-shadow 120ms ease;
159
+ }
160
+
161
+ .employee-chip:hover,
162
+ .category-chip:hover,
163
+ .template-chip:hover,
164
+ .secondary-button:hover,
165
+ .primary-button:hover {
166
+ transform: translateY(-1px);
167
+ }
168
+
169
+ .employee-chip.active,
170
+ .category-chip.active,
171
+ .template-chip.active {
172
+ border-color: var(--visa-blue);
173
+ background: var(--surface-strong);
174
+ box-shadow: inset 0 0 0 1px rgba(20, 52, 203, 0.08);
175
+ }
176
+
177
+ .employee-chip.unavailable {
178
+ opacity: 0.55;
179
+ }
180
+
181
+ .primary-button {
182
+ background: var(--visa-blue);
183
+ border-color: var(--visa-blue);
184
+ color: #fff;
185
+ font-weight: 700;
186
+ box-shadow: 0 12px 24px rgba(20, 52, 203, 0.2);
187
+ }
188
+
189
+ .primary-button:disabled,
190
+ .secondary-button:disabled {
191
+ opacity: 0.45;
192
+ cursor: not-allowed;
193
+ }
194
+
195
+ .workspace {
196
+ display: grid;
197
+ grid-template-columns: 340px minmax(0, 1fr);
198
+ gap: 18px;
199
+ align-items: start;
200
+ }
201
+
202
+ .workspace-intro {
203
+ grid-column: 1 / -1;
204
+ padding: 18px 20px;
205
+ display: grid;
206
+ grid-template-columns: minmax(0, 1fr) auto;
207
+ gap: 18px;
208
+ align-items: end;
209
+ }
210
+
211
+ .workspace-intro-copy,
212
+ .workspace-intro-actions {
213
+ display: grid;
214
+ gap: 10px;
215
+ }
216
+
217
+ .workspace-intro-actions {
218
+ justify-items: end;
219
+ }
220
+
221
+ .job-panel,
222
+ .interaction-panel {
223
+ display: grid;
224
+ gap: 18px;
225
+ }
226
+
227
+ .job-panel {
228
+ align-content: start;
229
+ }
230
+
231
+ .interaction-panel {
232
+ align-content: start;
233
+ }
234
+
235
+ .panel-head {
236
+ display: grid;
237
+ gap: 18px;
238
+ padding: 18px;
239
+ }
240
+
241
+ .panel-copy {
242
+ display: grid;
243
+ gap: 10px;
244
+ }
245
+
246
+ .panel-intro {
247
+ font-size: 18px;
248
+ line-height: 1.5;
249
+ color: var(--ink);
250
+ }
251
+
252
+ .panel-title {
253
+ font-size: 24px;
254
+ line-height: 1.1;
255
+ }
256
+
257
+ .project-path {
258
+ min-width: 230px;
259
+ background: rgba(255, 255, 255, 0.78);
260
+ border: 1px solid var(--line);
261
+ border-radius: 7px;
262
+ padding: 0 14px;
263
+ box-shadow: none;
264
+ }
265
+
266
+ .project-path summary {
267
+ list-style: none;
268
+ display: flex;
269
+ align-items: center;
270
+ justify-content: space-between;
271
+ gap: 12px;
272
+ padding: 12px 0;
273
+ cursor: pointer;
274
+ font-weight: 600;
275
+ }
276
+
277
+ .project-path summary::-webkit-details-marker {
278
+ display: none;
279
+ }
280
+
281
+ .project-path-preview {
282
+ min-width: 0;
283
+ max-width: 180px;
284
+ overflow: hidden;
285
+ text-overflow: ellipsis;
286
+ white-space: nowrap;
287
+ color: var(--muted);
288
+ font-size: 13px;
289
+ font-weight: 500;
290
+ }
291
+
292
+ .project-path-body {
293
+ display: grid;
294
+ gap: 12px;
295
+ padding: 0 0 16px;
296
+ }
297
+
298
+ .text-input,
299
+ .composer {
300
+ width: 100%;
301
+ border: 1px solid var(--line);
302
+ border-radius: 7px;
303
+ background: var(--surface-muted);
304
+ padding: 11px 12px;
305
+ color: var(--ink);
306
+ }
307
+
308
+ .composer {
309
+ min-height: 140px;
310
+ resize: vertical;
311
+ line-height: 1.5;
312
+ }
313
+
314
+ .job-list-card {
315
+ padding: 16px;
316
+ display: grid;
317
+ gap: 14px;
318
+ }
319
+
320
+ .job-list {
321
+ display: grid;
322
+ gap: 8px;
323
+ overflow: visible;
324
+ align-content: start;
325
+ }
326
+
327
+ .job-list button {
328
+ width: 100%;
329
+ text-align: left;
330
+ border-radius: 7px;
331
+ border: 1px solid var(--line);
332
+ background: rgba(255, 255, 255, 0.88);
333
+ padding: 13px 14px;
334
+ cursor: pointer;
335
+ box-shadow: none;
336
+ transition: border-color 120ms ease, transform 120ms ease, background 120ms ease;
337
+ }
338
+
339
+ .job-list button:hover {
340
+ transform: translateY(-1px);
341
+ border-color: rgba(20, 52, 203, 0.32);
342
+ }
343
+
344
+ .job-list button.active {
345
+ border-color: var(--visa-blue);
346
+ background: var(--surface-strong);
347
+ }
348
+
349
+ .job-title {
350
+ font-weight: 700;
351
+ margin-bottom: 5px;
352
+ }
353
+
354
+ .job-intent {
355
+ color: var(--muted);
356
+ line-height: 1.45;
357
+ font-size: 14px;
358
+ }
359
+
360
+ .job-outcomes {
361
+ display: grid;
362
+ gap: 8px;
363
+ margin: 0;
364
+ padding-left: 18px;
365
+ color: var(--muted);
366
+ }
367
+
368
+ .interaction-card {
369
+ padding: 18px;
370
+ display: grid;
371
+ gap: 18px;
372
+ }
373
+
374
+ .run-toolbar {
375
+ display: flex;
376
+ align-items: start;
377
+ justify-content: space-between;
378
+ gap: 18px;
379
+ padding-bottom: 18px;
380
+ border-bottom: 1px solid rgba(216, 225, 240, 0.8);
381
+ }
382
+
383
+ .selected-job-summary {
384
+ display: grid;
385
+ gap: 14px;
386
+ min-width: 0;
387
+ }
388
+
389
+ .run-toolbar-actions {
390
+ display: flex;
391
+ align-items: center;
392
+ }
393
+
394
+ .interaction-body {
395
+ display: grid;
396
+ grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.9fr);
397
+ gap: 18px;
398
+ align-items: start;
399
+ }
400
+
401
+ .conversation-column {
402
+ display: grid;
403
+ gap: 14px;
404
+ }
405
+
406
+ .interaction-head {
407
+ display: grid;
408
+ gap: 18px;
409
+ }
410
+
411
+ .timeline {
412
+ min-height: 420px;
413
+ max-height: 540px;
414
+ overflow: auto;
415
+ display: grid;
416
+ gap: 12px;
417
+ padding: 4px;
418
+ align-content: start;
419
+ border: 1px solid var(--line);
420
+ border-radius: 8px;
421
+ background: rgba(247, 249, 253, 0.72);
422
+ }
423
+
424
+ .message {
425
+ border: 1px solid var(--line);
426
+ border-radius: 7px;
427
+ padding: 14px 16px;
428
+ background: rgba(255, 255, 255, 0.88);
429
+ }
430
+
431
+ .message.manager {
432
+ background: #eef3ff;
433
+ border-color: #c9d8ff;
434
+ }
435
+
436
+ .message.employee {
437
+ background: #ffffff;
438
+ }
439
+
440
+ .message.system {
441
+ background: #f7f9fd;
442
+ }
443
+
444
+ .message-meta {
445
+ display: flex;
446
+ justify-content: space-between;
447
+ gap: 12px;
448
+ margin-bottom: 8px;
449
+ font-size: 12px;
450
+ color: var(--muted);
451
+ }
452
+
453
+ .message-role {
454
+ font-weight: 700;
455
+ color: var(--visa-blue);
456
+ }
457
+
458
+ .message-text {
459
+ white-space: pre-wrap;
460
+ line-height: 1.55;
461
+ }
462
+
463
+ .manager-tools {
464
+ display: grid;
465
+ gap: 14px;
466
+ padding: 16px;
467
+ border-radius: 8px;
468
+ background: rgba(247, 249, 253, 0.72);
469
+ border: 1px solid var(--line);
470
+ }
471
+
472
+ .template-row {
473
+ display: grid;
474
+ gap: 8px;
475
+ }
476
+
477
+ .composer-label {
478
+ font-weight: 600;
479
+ }
480
+
481
+ .micro-manage {
482
+ padding: 0 18px;
483
+ box-shadow: var(--shadow-soft);
484
+ }
485
+
486
+ .micro-manage summary {
487
+ padding: 16px 0;
488
+ cursor: pointer;
489
+ font-weight: 700;
490
+ }
491
+
492
+ .micro-manage-body {
493
+ padding: 0 0 18px;
494
+ max-height: 240px;
495
+ overflow: auto;
496
+ display: grid;
497
+ gap: 8px;
498
+ font-family: Consolas, "Courier New", monospace;
499
+ font-size: 12px;
500
+ color: var(--muted);
501
+ }
502
+
503
+ .micro-row {
504
+ padding: 10px 12px;
505
+ border-radius: 7px;
506
+ background: var(--surface-muted);
507
+ border: 1px solid var(--line);
508
+ white-space: pre-wrap;
509
+ }
510
+
511
+ @media (max-width: 1080px) {
512
+ html,
513
+ body {
514
+ min-height: 100%;
515
+ }
516
+
517
+ .app-shell {
518
+ min-height: 100dvh;
519
+ }
520
+
521
+ .workspace,
522
+ .app-header,
523
+ .interaction-body,
524
+ .workspace-intro {
525
+ grid-template-columns: 1fr;
526
+ }
527
+
528
+ .topbar-card,
529
+ .run-toolbar {
530
+ display: grid;
531
+ }
532
+
533
+ .project-path {
534
+ min-width: 0;
535
+ }
536
+
537
+ .workspace-intro-actions {
538
+ justify-items: start;
539
+ }
540
+ }
541
+
542
+ @media (max-width: 768px) {
543
+ .app-shell {
544
+ padding: 18px 16px 16px;
545
+ }
546
+
547
+ .brand-title {
548
+ font-size: 28px;
549
+ }
550
+
551
+ .interaction-head {
552
+ display: grid;
553
+ }
554
+
555
+ .workspace,
556
+ .app-header {
557
+ gap: 18px;
558
+ }
559
+
560
+ .timeline {
561
+ min-height: 280px;
562
+ max-height: 380px;
563
+ }
564
+
565
+ .panel-intro {
566
+ font-size: 16px;
567
+ }
568
+ }