@happyvertical/smrt-agents 0.55.15 → 0.55.17

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.
Files changed (13) hide show
  1. package/dist/index.js +1 -1
  2. package/dist/index.js.map +1 -1
  3. package/dist/manifest.json +1 -1
  4. package/dist/smrt-knowledge.json +3 -3
  5. package/dist/svelte/components/AgentAdminPanel.svelte +11 -8
  6. package/dist/svelte/components/AgentAdminTabs.svelte +15 -12
  7. package/dist/svelte/components/AgentDashboard.svelte +9 -6
  8. package/dist/svelte/components/AgentRunHistory.svelte +17 -14
  9. package/dist/svelte/components/AgentScheduleForm.svelte +6 -3
  10. package/dist/svelte/components/AgentScheduleList.svelte +24 -21
  11. package/dist/svelte/components/AgentSettingsForm.svelte +5 -2
  12. package/dist/svelte/components/AgentSettingsShell.svelte +19 -16
  13. package/package.json +12 -12
package/dist/manifest.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "version": "1.0.0",
3
3
  "timestamp": 0,
4
4
  "packageName": "@happyvertical/smrt-agents",
5
- "packageVersion": "0.55.15",
5
+ "packageVersion": "0.55.17",
6
6
  "objects": {
7
7
  "@happyvertical/smrt-agents:Agent": {
8
8
  "name": "agent",
package/dist/smrt-knowledge.json CHANGED
@@ -3,12 +3,12 @@
3
3
  "sensitiveFieldsExcluded": true,
4
4
  "generatedAt": "1970-01-01T00:00:00.000Z",
5
5
  "packageName": "@happyvertical/smrt-agents",
6
- "packageVersion": "0.55.15",
6
+ "packageVersion": "0.55.17",
7
7
  "sourceManifestPath": "dist/manifest.json",
8
8
  "agentDocPath": "AGENTS.md",
9
9
  "sourceHashes": {
10
- "manifest": "7a9d2e279673a0bf921be8793aa647e5e251386b6b762245b8f48059589286c1",
11
- "packageJson": "20d4c7a51500adac5d5acd9a493f51c7ab13b514bbc381d3aecb670d20f95452",
10
+ "manifest": "fb5d19a93d06d12b052205ea0c43f4e72d3b4839b2ec2798dc1e901682bdaae8",
11
+ "packageJson": "243d4d276367349696982965555de1041ba3d34be832ff840144f3b0f36c8a45",
12
12
  "agents": "178635896412caad1ff05c2c9d28a4b70dac91f4a531a1d4fb9fb5c084000b2a"
13
13
  },
14
14
  "exports": [
package/dist/svelte/components/AgentAdminPanel.svelte CHANGED
@@ -66,7 +66,7 @@ async function handleSave(newConfig: unknown) {
66
66
  readonly={readonly || !onSave}
67
67
  />
68
68
  {:else}
69
- <div class="no-panel">
69
+ <div class="no-panel" data-smrt-component="AgentAdminPanel">
70
70
  <div class="no-panel-icon">⚙️</div>
71
71
  <p class="no-panel-message">
72
72
  {t(M['ui.agent_admin_panel.no_panel_message'])} <code>{agentClass}.{slotId}</code>
@@ -78,6 +78,8 @@ async function handleSave(newConfig: unknown) {
78
78
  {/if}
79
79
 
80
80
  <style>
81
+ @layer smrt.reset, smrt.structure, smrt.theme;
82
+ @layer smrt.theme {
81
83
  .no-panel {
82
84
  display: flex;
83
85
  flex-direction: column;
@@ -85,9 +87,9 @@ async function handleSave(newConfig: unknown) {
85
87
  justify-content: center;
86
88
  padding: 3rem 2rem;
87
89
  text-align: center;
88
- background: var(--smrt-color-surface-container-low, #f8fafc);
89
- border: 1px dashed var(--smrt-color-outline-variant, #e2e8f0);
90
- border-radius: var(--smrt-radius-medium, 8px);
90
+ background: var(--smrt-color-surface-container-low);
91
+ border: 1px dashed var(--smrt-color-outline-variant);
92
+ border-radius: var(--smrt-radius-medium);
91
93
  min-height: 200px;
92
94
  }
93
95
 
@@ -100,13 +102,13 @@ async function handleSave(newConfig: unknown) {
100
102
  .no-panel-message {
101
103
  margin: 0 0 0.5rem 0;
102
104
  font-size: var(--smrt-typography-body-large-size, 0.9375rem);
103
- color: var(--smrt-color-on-surface-variant, #64748b);
105
+ color: var(--smrt-color-on-surface-variant);
104
106
  }
105
107
 
106
108
  .no-panel-message code {
107
- background: var(--smrt-color-surface-container-high, #e2e8f0);
109
+ background: var(--smrt-color-surface-container-high);
108
110
  padding: var(--smrt-spacing-1, 0.125rem) var(--smrt-spacing-2, 0.375rem);
109
- border-radius: var(--smrt-radius-small, 4px);
111
+ border-radius: var(--smrt-radius-small);
110
112
  font-family: var(--smrt-font-family-mono, 'SF Mono', Monaco, Consolas, monospace);
111
113
  font-size: var(--smrt-typography-body-medium-size, 0.875rem);
112
114
  }
@@ -114,6 +116,7 @@ async function handleSave(newConfig: unknown) {
114
116
  .no-panel-hint {
115
117
  margin: 0;
116
118
  font-size: var(--smrt-typography-body-medium-size, 0.8125rem);
117
- color: var(--smrt-color-on-surface-variant, #94a3b8);
119
+ color: var(--smrt-color-on-surface-variant);
118
120
  }
121
+ }
119
122
  </style>
package/dist/svelte/components/AgentAdminTabs.svelte CHANGED
@@ -111,7 +111,7 @@ async function handleSave(config: unknown) {
111
111
  }
112
112
  </script>
113
113
 
114
- <div class="agent-admin-tabs">
114
+ <div class="agent-admin-tabs" data-smrt-component="AgentAdminTabs">
115
115
  <div class="tabs-nav" role="tablist" aria-label={t(M['ui.agent_admin_tabs.tablist_label'])} bind:this={tablistEl}>
116
116
  {#each sortedSlots as [slotId, slot]}
117
117
  <!-- raw-primitive-allow: tab control in a hand-rolled ARIA tablist with roving tabindex and bind:this keyboard navigation, driving externally-rendered aria-controls panels; this is a tab role (not a standard action button) and adopting the Tabs primitive would require restructuring the slot/panel wiring -->
@@ -169,6 +169,8 @@ async function handleSave(config: unknown) {
169
169
  </div>
170
170
 
171
171
  <style>
172
+ @layer smrt.reset, smrt.structure, smrt.theme;
173
+ @layer smrt.theme {
172
174
  .agent-admin-tabs {
173
175
  display: flex;
174
176
  flex-direction: column;
@@ -178,7 +180,7 @@ async function handleSave(config: unknown) {
178
180
  .tabs-nav {
179
181
  display: flex;
180
182
  gap: 0.25rem;
181
- border-bottom: 1px solid var(--smrt-color-outline-variant, #e2e8f0);
183
+ border-bottom: 1px solid var(--smrt-color-outline-variant);
182
184
  padding-bottom: 0;
183
185
  }
184
186
 
@@ -189,7 +191,7 @@ async function handleSave(config: unknown) {
189
191
  padding: 0.75rem 1rem;
190
192
  border: none;
191
193
  background: transparent;
192
- color: var(--smrt-color-on-surface-variant, #64748b);
194
+ color: var(--smrt-color-on-surface-variant);
193
195
  font-size: var(--smrt-typography-label-large-size, 0.875rem);
194
196
  font-weight: var(--smrt-typography-weight-medium, 500);
195
197
  cursor: pointer;
@@ -201,12 +203,12 @@ async function handleSave(config: unknown) {
201
203
  }
202
204
 
203
205
  .tab-button:hover:not(:disabled) {
204
- color: var(--smrt-color-on-surface, #334155);
206
+ color: var(--smrt-color-on-surface);
205
207
  }
206
208
 
207
209
  .tab-button.active {
208
- color: var(--smrt-color-primary, #3b82f6);
209
- border-bottom-color: var(--smrt-color-primary, #3b82f6);
210
+ color: var(--smrt-color-primary);
211
+ border-bottom-color: var(--smrt-color-primary);
210
212
  }
211
213
 
212
214
  .tab-button:disabled {
@@ -215,7 +217,7 @@ async function handleSave(config: unknown) {
215
217
  }
216
218
 
217
219
  .tab-button:focus-visible {
218
- outline: 2px solid var(--smrt-color-primary, #3b82f6);
220
+ outline: 2px solid var(--smrt-color-primary);
219
221
  outline-offset: 2px;
220
222
  }
221
223
 
@@ -256,11 +258,11 @@ async function handleSave(config: unknown) {
256
258
  .slot-description {
257
259
  margin: 0 0 1rem 0;
258
260
  padding: 0.75rem 1rem;
259
- background: var(--smrt-color-primary-container, #f0f9ff);
260
- border-left: 3px solid var(--smrt-color-primary, #3b82f6);
261
- border-radius: 0 var(--smrt-radius-md, 8px) var(--smrt-radius-md, 8px) 0;
261
+ background: var(--smrt-color-primary-container);
262
+ border-left: 3px solid var(--smrt-color-primary);
263
+ border-radius: 0 var(--smrt-radius-md) var(--smrt-radius-md) 0;
262
264
  font-size: var(--smrt-typography-body-medium-size, 0.875rem);
263
- color: var(--smrt-color-on-primary-container, #1e40af);
265
+ color: var(--smrt-color-on-primary-container);
264
266
  }
265
267
 
266
268
  .no-slots {
@@ -268,11 +270,12 @@ async function handleSave(config: unknown) {
268
270
  align-items: center;
269
271
  justify-content: center;
270
272
  min-height: 200px;
271
- color: var(--smrt-color-on-surface-variant, #64748b);
273
+ color: var(--smrt-color-on-surface-variant);
272
274
  font-size: var(--smrt-typography-body-medium-size, 0.9375rem);
273
275
  }
274
276
 
275
277
  .no-slots p {
276
278
  margin: 0;
277
279
  }
280
+ }
278
281
  </style>
package/dist/svelte/components/AgentDashboard.svelte CHANGED
@@ -63,7 +63,7 @@ const stats = $derived.by(() => {
63
63
  });
64
64
  </script>
65
65
 
66
- <div class="agent-dashboard" class:loading>
66
+ <div class="agent-dashboard" class:loading data-smrt-component="AgentDashboard">
67
67
  <!-- Stats Overview -->
68
68
  <section class="agent-dashboard__stats">
69
69
  <div class="stats-grid">
@@ -174,6 +174,8 @@ const stats = $derived.by(() => {
174
174
  </div>
175
175
 
176
176
  <style>
177
+ @layer smrt.reset, smrt.structure, smrt.theme;
178
+ @layer smrt.theme {
177
179
  .agent-dashboard {
178
180
  width: 100%;
179
181
  display: flex;
@@ -213,20 +215,20 @@ const stats = $derived.by(() => {
213
215
 
214
216
  .stat-card__label {
215
217
  font: var(--smrt-typography-body-small-font, 0.875rem / 1.25 sans-serif);
216
- color: var(--smrt-color-on-surface-variant, #43474e);
218
+ color: var(--smrt-color-on-surface-variant);
217
219
  margin-top: var(--smrt-spacing-xs, 0.25rem);
218
220
  }
219
221
 
220
222
  .stat-card--active .stat-card__value {
221
- color: var(--smrt-color-tertiary, #006c4f);
223
+ color: var(--smrt-color-tertiary);
222
224
  }
223
225
 
224
226
  .stat-card--running .stat-card__value {
225
- color: var(--smrt-color-primary, #005ac1);
227
+ color: var(--smrt-color-primary);
226
228
  }
227
229
 
228
230
  .stat-card--error .stat-card__value {
229
- color: var(--smrt-color-error, #ba1a1a);
231
+ color: var(--smrt-color-error);
230
232
  }
231
233
 
232
234
  .agent-dashboard__section {
@@ -247,10 +249,11 @@ const stats = $derived.by(() => {
247
249
  .empty-state {
248
250
  padding: var(--smrt-spacing-lg, 1.5rem);
249
251
  text-align: center;
250
- color: var(--smrt-color-on-surface-variant, #43474e);
252
+ color: var(--smrt-color-on-surface-variant);
251
253
  }
252
254
 
253
255
  .empty-state p {
254
256
  margin: 0 0 var(--smrt-spacing-md, 1rem) 0;
255
257
  }
258
+ }
256
259
  </style>
package/dist/svelte/components/AgentRunHistory.svelte CHANGED
@@ -43,7 +43,7 @@ function handleEntryKeydown(entry: AgentRunHistoryEntry, event: KeyboardEvent) {
43
43
  }
44
44
  </script>
45
45
 
46
- <div class="run-history-container">
46
+ <div class="run-history-container" data-smrt-component="AgentRunHistory">
47
47
  <table class="run-history" class:loading>
48
48
  <thead class="run-history__head">
49
49
  <tr>
@@ -117,6 +117,8 @@ function handleEntryKeydown(entry: AgentRunHistoryEntry, event: KeyboardEvent) {
117
117
  </div>
118
118
 
119
119
  <style>
120
+ @layer smrt.reset, smrt.structure, smrt.theme;
121
+ @layer smrt.theme {
120
122
  .run-history-container {
121
123
  width: 100%;
122
124
  overflow-x: auto;
@@ -127,7 +129,7 @@ function handleEntryKeydown(entry: AgentRunHistoryEntry, event: KeyboardEvent) {
127
129
  border-collapse: collapse;
128
130
  border-spacing: 0;
129
131
  font: var(--smrt-typography-body-medium-font, 0.875rem / 1.25 sans-serif);
130
- background: var(--smrt-color-surface, #ffffff);
132
+ background: var(--smrt-color-surface);
131
133
  }
132
134
 
133
135
  .run-history.loading {
@@ -136,7 +138,7 @@ function handleEntryKeydown(entry: AgentRunHistoryEntry, event: KeyboardEvent) {
136
138
  }
137
139
 
138
140
  .run-history__head {
139
- background: var(--smrt-color-surface-container, #f3f4f6);
141
+ background: var(--smrt-color-surface-container);
140
142
  }
141
143
 
142
144
  .run-history__head th {
@@ -144,16 +146,16 @@ function handleEntryKeydown(entry: AgentRunHistoryEntry, event: KeyboardEvent) {
144
146
  font-weight: var(--smrt-typography-weight-semibold, 600);
145
147
  text-align: left;
146
148
  white-space: nowrap;
147
- border-bottom: 1px solid var(--smrt-color-outline-variant, #c4c6cf);
149
+ border-bottom: 1px solid var(--smrt-color-outline-variant);
148
150
  }
149
151
 
150
152
  .run-history__body tr {
151
- border-bottom: 1px solid var(--smrt-color-outline-variant, #c4c6cf);
153
+ border-bottom: 1px solid var(--smrt-color-outline-variant);
152
154
  transition: background-color var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
153
155
  }
154
156
 
155
157
  .run-history__body tr:hover:not(.run-history__row--loading):not(.run-history__row--empty) {
156
- background: var(--smrt-color-surface-container-low, #f9fafb);
158
+ background: var(--smrt-color-surface-container-low);
157
159
  cursor: pointer;
158
160
  }
159
161
 
@@ -177,7 +179,7 @@ function handleEntryKeydown(entry: AgentRunHistoryEntry, event: KeyboardEvent) {
177
179
  }
178
180
 
179
181
  .run-history__cell--date {
180
- color: var(--smrt-color-on-surface-variant, #43474e);
182
+ color: var(--smrt-color-on-surface-variant);
181
183
  white-space: nowrap;
182
184
  }
183
185
 
@@ -191,13 +193,13 @@ function handleEntryKeydown(entry: AgentRunHistoryEntry, event: KeyboardEvent) {
191
193
  }
192
194
 
193
195
  .error-text {
194
- color: var(--smrt-color-error, #ba1a1a);
196
+ color: var(--smrt-color-error);
195
197
  font: var(--smrt-typography-body-small-font, 0.75rem / 1.25 sans-serif);
196
198
  cursor: help;
197
199
  }
198
200
 
199
201
  .no-error {
200
- color: var(--smrt-color-on-surface-variant, #43474e);
202
+ color: var(--smrt-color-on-surface-variant);
201
203
  }
202
204
 
203
205
  .run-history__cell--loading,
@@ -211,15 +213,15 @@ function handleEntryKeydown(entry: AgentRunHistoryEntry, event: KeyboardEvent) {
211
213
  align-items: center;
212
214
  justify-content: center;
213
215
  gap: var(--smrt-spacing-sm, 0.5rem);
214
- color: var(--smrt-color-on-surface-variant, #43474e);
216
+ color: var(--smrt-color-on-surface-variant);
215
217
  }
216
218
 
217
219
  .run-history__spinner {
218
220
  width: 20px;
219
221
  height: 20px;
220
- border: 2px solid var(--smrt-color-outline-variant, #c4c6cf);
221
- border-top-color: var(--smrt-color-primary, #005ac1);
222
- border-radius: var(--smrt-radius-full, 9999px);
222
+ border: 2px solid var(--smrt-color-outline-variant);
223
+ border-top-color: var(--smrt-color-primary);
224
+ border-radius: var(--smrt-radius-full);
223
225
  animation: spin 0.8s linear infinite;
224
226
  }
225
227
 
@@ -230,6 +232,7 @@ function handleEntryKeydown(entry: AgentRunHistoryEntry, event: KeyboardEvent) {
230
232
  }
231
233
 
232
234
  .run-history__empty {
233
- color: var(--smrt-color-on-surface-variant, #43474e);
235
+ color: var(--smrt-color-on-surface-variant);
234
236
  }
237
+ }
235
238
  </style>
package/dist/svelte/components/AgentScheduleForm.svelte CHANGED
@@ -274,6 +274,8 @@ function handleCronPreset(preset: string) {
274
274
  </Card>
275
275
 
276
276
  <style>
277
+ @layer smrt.reset, smrt.structure, smrt.theme;
278
+ @layer smrt.theme {
277
279
  .schedule-form-shell :global(.schedule-form) {
278
280
  padding: var(--smrt-spacing-sm, 0.5rem) 0;
279
281
  }
@@ -303,12 +305,12 @@ function handleCronPreset(preset: string) {
303
305
  .form-field label {
304
306
  font-weight: var(--smrt-typography-weight-medium, 500);
305
307
  font: var(--smrt-typography-body-medium-font, 0.875rem / 1.25 sans-serif);
306
- color: var(--smrt-color-on-surface, #1a1c1e);
308
+ color: var(--smrt-color-on-surface);
307
309
  }
308
310
 
309
311
  .form-field small {
310
312
  font: var(--smrt-typography-body-small-font, 0.75rem / 1.25 sans-serif);
311
- color: var(--smrt-color-on-surface-variant, #43474e);
313
+ color: var(--smrt-color-on-surface-variant);
312
314
  }
313
315
 
314
316
  .cron-presets {
@@ -324,6 +326,7 @@ function handleCronPreset(preset: string) {
324
326
  gap: var(--smrt-spacing-sm, 0.5rem);
325
327
  margin-top: var(--smrt-spacing-lg, 1.5rem);
326
328
  padding-top: var(--smrt-spacing-md, 1rem);
327
- border-top: 1px solid var(--smrt-color-outline-variant, #c4c6cf);
329
+ border-top: 1px solid var(--smrt-color-outline-variant);
328
330
  }
331
+ }
329
332
  </style>
package/dist/svelte/components/AgentScheduleList.svelte CHANGED
@@ -75,7 +75,7 @@ function handleRunNow(schedule: AgentScheduleData, event: Event) {
75
75
  }
76
76
  </script>
77
77
 
78
- <div class="schedule-list-container">
78
+ <div class="schedule-list-container" data-smrt-component="AgentScheduleList">
79
79
  <table class="schedule-list" class:loading>
80
80
  <thead class="schedule-list__head">
81
81
  <tr>
@@ -200,6 +200,8 @@ function handleRunNow(schedule: AgentScheduleData, event: Event) {
200
200
  </div>
201
201
 
202
202
  <style>
203
+ @layer smrt.reset, smrt.structure, smrt.theme;
204
+ @layer smrt.theme {
203
205
  .schedule-list-container {
204
206
  width: 100%;
205
207
  overflow-x: auto;
@@ -210,7 +212,7 @@ function handleRunNow(schedule: AgentScheduleData, event: Event) {
210
212
  border-collapse: collapse;
211
213
  border-spacing: 0;
212
214
  font: var(--smrt-typography-body-medium-font, 0.875rem / 1.25 sans-serif);
213
- background: var(--smrt-color-surface, #ffffff);
215
+ background: var(--smrt-color-surface);
214
216
  }
215
217
 
216
218
  .schedule-list.loading {
@@ -219,7 +221,7 @@ function handleRunNow(schedule: AgentScheduleData, event: Event) {
219
221
  }
220
222
 
221
223
  .schedule-list__head {
222
- background: var(--smrt-color-surface-container, #f3f4f6);
224
+ background: var(--smrt-color-surface-container);
223
225
  }
224
226
 
225
227
  .schedule-list__head th {
@@ -227,16 +229,16 @@ function handleRunNow(schedule: AgentScheduleData, event: Event) {
227
229
  font-weight: var(--smrt-typography-weight-semibold, 600);
228
230
  text-align: left;
229
231
  white-space: nowrap;
230
- border-bottom: 1px solid var(--smrt-color-outline-variant, #c4c6cf);
232
+ border-bottom: 1px solid var(--smrt-color-outline-variant);
231
233
  }
232
234
 
233
235
  .schedule-list__body tr {
234
- border-bottom: 1px solid var(--smrt-color-outline-variant, #c4c6cf);
236
+ border-bottom: 1px solid var(--smrt-color-outline-variant);
235
237
  transition: background-color var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
236
238
  }
237
239
 
238
240
  .schedule-list__body tr:hover:not(.schedule-list__row--loading):not(.schedule-list__row--empty) {
239
- background: var(--smrt-color-surface-container-low, #f9fafb);
241
+ background: var(--smrt-color-surface-container-low);
240
242
  cursor: pointer;
241
243
  }
242
244
 
@@ -265,14 +267,14 @@ function handleRunNow(schedule: AgentScheduleData, event: Event) {
265
267
 
266
268
  .agent-id {
267
269
  margin-left: var(--smrt-spacing-xs, 0.25rem);
268
- color: var(--smrt-color-on-surface-variant, #43474e);
270
+ color: var(--smrt-color-on-surface-variant);
269
271
  font-family: var(--smrt-font-family-mono, ui-monospace, monospace);
270
272
  font: var(--smrt-typography-body-small-font, 0.75rem / 1.25 sans-serif);
271
273
  }
272
274
 
273
275
  .agent-method {
274
276
  margin-left: var(--smrt-spacing-xs, 0.25rem);
275
- color: var(--smrt-color-on-surface-variant, #43474e);
277
+ color: var(--smrt-color-on-surface-variant);
276
278
  font-family: var(--smrt-font-family-mono, ui-monospace, monospace);
277
279
  font: var(--smrt-typography-body-small-font, 0.75rem / 1.25 sans-serif);
278
280
  }
@@ -290,20 +292,20 @@ function handleRunNow(schedule: AgentScheduleData, event: Event) {
290
292
  display: block;
291
293
  font-family: var(--smrt-font-family-mono, ui-monospace, monospace);
292
294
  font: var(--smrt-typography-body-small-font, 0.75rem / 1.25 sans-serif);
293
- color: var(--smrt-color-on-surface-variant, #43474e);
295
+ color: var(--smrt-color-on-surface-variant);
294
296
  }
295
297
 
296
298
  .schedule-list__cell--date {
297
- color: var(--smrt-color-on-surface-variant, #43474e);
299
+ color: var(--smrt-color-on-surface-variant);
298
300
  white-space: nowrap;
299
301
  }
300
302
 
301
303
  .last-run.success {
302
- color: var(--smrt-color-tertiary, #006c4f);
304
+ color: var(--smrt-color-tertiary);
303
305
  }
304
306
 
305
307
  .last-run.failed {
306
- color: var(--smrt-color-error, #ba1a1a);
308
+ color: var(--smrt-color-error);
307
309
  }
308
310
 
309
311
  .schedule-list__cell--rate {
@@ -315,15 +317,15 @@ function handleRunNow(schedule: AgentScheduleData, event: Event) {
315
317
  }
316
318
 
317
319
  .success-rate.good {
318
- color: var(--smrt-color-tertiary, #006c4f);
320
+ color: var(--smrt-color-tertiary);
319
321
  }
320
322
 
321
323
  .success-rate.warning {
322
- color: var(--smrt-color-secondary, #00639b);
324
+ color: var(--smrt-color-secondary);
323
325
  }
324
326
 
325
327
  .success-rate.bad {
326
- color: var(--smrt-color-error, #ba1a1a);
328
+ color: var(--smrt-color-error);
327
329
  }
328
330
 
329
331
  .schedule-list__cell--runs {
@@ -332,7 +334,7 @@ function handleRunNow(schedule: AgentScheduleData, event: Event) {
332
334
  }
333
335
 
334
336
  .running-indicator {
335
- color: var(--smrt-color-primary, #005ac1);
337
+ color: var(--smrt-color-primary);
336
338
  font-size: var(--smrt-typography-label-medium-size, 0.75rem);
337
339
  }
338
340
 
@@ -356,15 +358,15 @@ function handleRunNow(schedule: AgentScheduleData, event: Event) {
356
358
  align-items: center;
357
359
  justify-content: center;
358
360
  gap: var(--smrt-spacing-sm, 0.5rem);
359
- color: var(--smrt-color-on-surface-variant, #43474e);
361
+ color: var(--smrt-color-on-surface-variant);
360
362
  }
361
363
 
362
364
  .schedule-list__spinner {
363
365
  width: 20px;
364
366
  height: 20px;
365
- border: 2px solid var(--smrt-color-outline-variant, #c4c6cf);
366
- border-top-color: var(--smrt-color-primary, #005ac1);
367
- border-radius: var(--smrt-radius-full, 9999px);
367
+ border: 2px solid var(--smrt-color-outline-variant);
368
+ border-top-color: var(--smrt-color-primary);
369
+ border-radius: var(--smrt-radius-full);
368
370
  animation: spin 0.8s linear infinite;
369
371
  }
370
372
 
@@ -375,6 +377,7 @@ function handleRunNow(schedule: AgentScheduleData, event: Event) {
375
377
  }
376
378
 
377
379
  .schedule-list__empty {
378
- color: var(--smrt-color-on-surface-variant, #43474e);
380
+ color: var(--smrt-color-on-surface-variant);
379
381
  }
382
+ }
380
383
  </style>
package/dist/svelte/components/AgentSettingsForm.svelte CHANGED
@@ -169,6 +169,8 @@ async function handleSubmit() {
169
169
  </Form>
170
170
 
171
171
  <style>
172
+ @layer smrt.reset, smrt.structure, smrt.theme;
173
+ @layer smrt.theme {
172
174
  :global(.agent-settings-form) {
173
175
  display: grid;
174
176
  gap: var(--smrt-spacing-5, 1.25rem);
@@ -190,12 +192,12 @@ async function handleSubmit() {
190
192
  }
191
193
 
192
194
  small {
193
- color: var(--smrt-color-on-surface-variant, #64748b);
195
+ color: var(--smrt-color-on-surface-variant);
194
196
  }
195
197
 
196
198
  .error {
197
199
  margin: 0;
198
- color: var(--smrt-color-error, #b91c1c);
200
+ color: var(--smrt-color-error);
199
201
  font-size: var(--smrt-typography-body-medium-size, 0.875rem);
200
202
  line-height: var(--smrt-typography-body-medium-line-height, 1.25rem);
201
203
  letter-spacing: var(--smrt-typography-body-medium-tracking, 0.015625rem);
@@ -205,4 +207,5 @@ async function handleSubmit() {
205
207
  display: flex;
206
208
  justify-content: flex-end;
207
209
  }
210
+ }
208
211
  </style>
package/dist/svelte/components/AgentSettingsShell.svelte CHANGED
@@ -116,7 +116,7 @@ async function handleSave(slotId: string, config: unknown) {
116
116
  }
117
117
  </script>
118
118
 
119
- <div class="agent-settings-shell" class:single-agent={agents.length === 1}>
119
+ <div class="agent-settings-shell" class:single-agent={agents.length === 1} data-smrt-component="AgentSettingsShell">
120
120
  {#if agents.length > 1}
121
121
  <aside class="agents-sidebar">
122
122
  <h3 class="sidebar-title" id="{idBase}-agents-title">Agents</h3>
@@ -190,6 +190,8 @@ async function handleSave(slotId: string, config: unknown) {
190
190
  </div>
191
191
 
192
192
  <style>
193
+ @layer smrt.reset, smrt.structure, smrt.theme;
194
+ @layer smrt.theme {
193
195
  .agent-settings-shell {
194
196
  display: grid;
195
197
  grid-template-columns: 220px 1fr;
@@ -202,10 +204,10 @@ async function handleSave(slotId: string, config: unknown) {
202
204
  }
203
205
 
204
206
  .agents-sidebar {
205
- background: var(--smrt-color-surface-container-low, #f8fafc);
206
- border-radius: var(--smrt-radius-medium, 8px);
207
+ background: var(--smrt-color-surface-container-low);
208
+ border-radius: var(--smrt-radius-medium);
207
209
  padding: var(--smrt-spacing-4, 1rem);
208
- border: 1px solid var(--smrt-color-outline-variant, #e2e8f0);
210
+ border: 1px solid var(--smrt-color-outline-variant);
209
211
  }
210
212
 
211
213
  .sidebar-title {
@@ -215,8 +217,8 @@ async function handleSave(slotId: string, config: unknown) {
215
217
  font-weight: var(--smrt-typography-weight-semibold, 600);
216
218
  text-transform: uppercase;
217
219
  letter-spacing: var(--smrt-typography-label-medium-tracking, 0.05em);
218
- color: var(--smrt-color-on-surface-variant, #64748b);
219
- border-bottom: 1px solid var(--smrt-color-outline-variant, #e2e8f0);
220
+ color: var(--smrt-color-on-surface-variant);
221
+ border-bottom: 1px solid var(--smrt-color-outline-variant);
220
222
  }
221
223
 
222
224
  .agents-list {
@@ -233,7 +235,7 @@ async function handleSave(slotId: string, config: unknown) {
233
235
  padding: 0.625rem 0.75rem;
234
236
  border: none;
235
237
  background: transparent;
236
- border-radius: var(--smrt-radius-md, 8px);
238
+ border-radius: var(--smrt-radius-md);
237
239
  cursor: pointer;
238
240
  text-align: left;
239
241
  width: 100%;
@@ -243,11 +245,11 @@ async function handleSave(slotId: string, config: unknown) {
243
245
  }
244
246
 
245
247
  .agent-button:hover {
246
- background: var(--smrt-color-surface-container-high, #e2e8f0);
248
+ background: var(--smrt-color-surface-container-high);
247
249
  }
248
250
 
249
251
  .agent-button.active {
250
- background: var(--smrt-color-primary, #3b82f6);
252
+ background: var(--smrt-color-primary);
251
253
  }
252
254
 
253
255
  .agent-button.active .agent-class,
@@ -258,12 +260,12 @@ async function handleSave(slotId: string, config: unknown) {
258
260
  .agent-class {
259
261
  font-size: var(--smrt-typography-title-small-size, 0.875rem);
260
262
  font-weight: var(--smrt-typography-weight-semibold, 600);
261
- color: var(--smrt-color-on-surface, #1e293b);
263
+ color: var(--smrt-color-on-surface);
262
264
  }
263
265
 
264
266
  .agent-name {
265
267
  font-size: var(--smrt-typography-body-small-size, 0.75rem);
266
- color: var(--smrt-color-on-surface-variant, #64748b);
268
+ color: var(--smrt-color-on-surface-variant);
267
269
  }
268
270
 
269
271
  .agent-content {
@@ -273,7 +275,7 @@ async function handleSave(slotId: string, config: unknown) {
273
275
  .agent-header {
274
276
  margin-bottom: 1.5rem;
275
277
  padding-bottom: 1rem;
276
- border-bottom: 1px solid var(--smrt-color-outline-variant, #e2e8f0);
278
+ border-bottom: 1px solid var(--smrt-color-outline-variant);
277
279
  }
278
280
 
279
281
  .agent-title {
@@ -286,7 +288,7 @@ async function handleSave(slotId: string, config: unknown) {
286
288
  .agent-subtitle {
287
289
  margin: 0.25rem 0 0;
288
290
  font-size: var(--smrt-typography-body-medium-size, 0.9375rem);
289
- color: var(--smrt-color-on-surface-variant, #64748b);
291
+ color: var(--smrt-color-on-surface-variant);
290
292
  }
291
293
 
292
294
  .no-agents {
@@ -298,7 +300,7 @@ async function handleSave(slotId: string, config: unknown) {
298
300
  text-align: center;
299
301
  background: var(--smrt-color-surface-variant);
300
302
  border: 1px dashed var(--smrt-color-outline-variant);
301
- border-radius: var(--smrt-radius-md, 8px);
303
+ border-radius: var(--smrt-radius-md);
302
304
  min-height: 300px;
303
305
  }
304
306
 
@@ -311,13 +313,14 @@ async function handleSave(slotId: string, config: unknown) {
311
313
  .no-agents-message {
312
314
  margin: 0 0 0.5rem 0;
313
315
  font-size: var(--smrt-typography-body-large-size, 1rem);
314
- color: var(--smrt-color-on-surface-variant, #64748b);
316
+ color: var(--smrt-color-on-surface-variant);
315
317
  }
316
318
 
317
319
  .no-agents-hint {
318
320
  margin: 0;
319
321
  font-size: var(--smrt-typography-body-medium-size, 0.875rem);
320
- color: var(--smrt-color-on-surface-variant, #94a3b8);
322
+ color: var(--smrt-color-on-surface-variant);
321
323
  max-width: 400px;
322
324
  }
325
+ }
323
326
  </style>