@happyvertical/smrt-chat 0.55.16 → 0.55.17

package/dist/index.js

@@ -1,5 +1,5 @@
 import { c as ChatThread, d as ChatParticipant, f as ChatMessage, i as clientRequestMessageId, l as ChatRoom, n as ChatService, o as VoiceSessionCollection, p as AgentSession, s as VoiceSession, t as ChatClientRequestConflictError, u as ChatReaction } from "./chunks/ChatService-DjGf2AoJ.js";
-import { A as MAX_CLIENT_TOOLS, B as RUNTIME_REPORT_DEFINE_FUNCTION_NAME, C as SESSION_CONTINUATIONS_FIELD, D as runAssistantTurn, E as createSessionContinuationStore, F as classifyToolError, G as RUNTIME_REPORT_RUN_TOOL_SLUG, H as RUNTIME_REPORT_LIST_FUNCTION_NAME, I as invokeManifestTool, J as createRuntimeReportTools, K as RUNTIME_REPORT_SOURCES_FUNCTION_NAME, L as manifestToolToAITool, M as MAX_CLIENT_TOOL_SCHEMA_BYTES, N as appendClientToolResults, O as CLIENT_TOOL_RESULT_GUIDANCE, P as buildManifestToolCatalog, R as runToolLoop, S as DEFAULT_CONTINUATION_TTL_MS, T as createMemoryContinuationStore, U as RUNTIME_REPORT_LIST_TOOL_SLUG, V as RUNTIME_REPORT_DEFINE_TOOL_SLUG, W as RUNTIME_REPORT_RUN_FUNCTION_NAME, _ as runPersonaConversationTurn, a as MAX_CHAT_STREAM_CONTENT_LENGTH, b as CONTINUATION_CLAIM_TTL_MS, c as encodeChatStreamEvent, d as conversationPersonaFromAgentPersona, f as conversationPersonaFromResolved, g as resolveConversationInstructions, h as recallPersonaMemory, i as DEFAULT_CHAT_STREAM_HEARTBEAT_MS, j as MAX_CLIENT_TOOL_RESULT_CHARS, k as DEFAULT_MAX_STEPS, l as runChatConversationStream, m as principalBindingFor, n as ChatStreamError, o as MAX_CHAT_STREAM_MESSAGES, p as formatRecalledMemory, q as RUNTIME_REPORT_SOURCES_TOOL_SLUG, r as ChatStreamUnauthorizedError, s as createChatStreamHandler, t as ChatStreamBadRequestError, u as bindPersonaToSession, v as ASSISTANT_TURN_GENERIC_ERROR, w as createAssistantTurnResponse, x as DEFAULT_ASSISTANT_TURN_HEARTBEAT_MS, y as AssistantTurnUserError, z as sanitizeClientToolDeclarations } from "./chunks/chat-stream-j6VuNo3t.js";
+import { A as MAX_CLIENT_TOOLS, B as RUNTIME_REPORT_DEFINE_FUNCTION_NAME, C as SESSION_CONTINUATIONS_FIELD, D as runAssistantTurn, E as createSessionContinuationStore, F as classifyToolError, G as RUNTIME_REPORT_RUN_TOOL_SLUG, H as RUNTIME_REPORT_LIST_FUNCTION_NAME, I as invokeManifestTool, J as createRuntimeReportTools, K as RUNTIME_REPORT_SOURCES_FUNCTION_NAME, L as manifestToolToAITool, M as MAX_CLIENT_TOOL_SCHEMA_BYTES, N as appendClientToolResults, O as CLIENT_TOOL_RESULT_GUIDANCE, P as buildManifestToolCatalog, R as runToolLoop, S as DEFAULT_CONTINUATION_TTL_MS, T as createMemoryContinuationStore, U as RUNTIME_REPORT_LIST_TOOL_SLUG, V as RUNTIME_REPORT_DEFINE_TOOL_SLUG, W as RUNTIME_REPORT_RUN_FUNCTION_NAME, _ as runPersonaConversationTurn, a as MAX_CHAT_STREAM_CONTENT_LENGTH, b as CONTINUATION_CLAIM_TTL_MS, c as encodeChatStreamEvent, d as conversationPersonaFromAgentPersona, f as conversationPersonaFromResolved, g as resolveConversationInstructions, h as recallPersonaMemory, i as DEFAULT_CHAT_STREAM_HEARTBEAT_MS, j as MAX_CLIENT_TOOL_RESULT_CHARS, k as DEFAULT_MAX_STEPS, l as runChatConversationStream, m as principalBindingFor, n as ChatStreamError, o as MAX_CHAT_STREAM_MESSAGES, p as formatRecalledMemory, q as RUNTIME_REPORT_SOURCES_TOOL_SLUG, r as ChatStreamUnauthorizedError, s as createChatStreamHandler, t as ChatStreamBadRequestError, u as bindPersonaToSession, v as ASSISTANT_TURN_GENERIC_ERROR, w as createAssistantTurnResponse, x as DEFAULT_ASSISTANT_TURN_HEARTBEAT_MS, y as AssistantTurnUserError, z as sanitizeClientToolDeclarations } from "./chunks/chat-stream-D1xCl9IM.js";
 import { i as matchesToolAllowList, n as encodeAssistantTurnEvent, r as readAssistantTurnStream, t as AssistantTurnStreamError } from "./chunks/assistant-turn-events-BbZUf-Ju.js";
 import { a as createServerDataSurfaceBridge, i as createDataSurfaceCommandBridge, n as DEFAULT_DATA_SURFACE_BRIDGE_TTL_MS, r as createDataSurfaceBridge, t as DATA_SURFACE_BRIDGE_VERSION } from "./chunks/data-surface-bridge-BJomMxjS.js";
 import { HELPER_CLEARED_PREFERENCES, HELPER_PREFERENCES_VERSION, helperPreferenceFields, isHelperClearedPreferences, parseHelperPreferences } from "./helper-preferences.js";

package/dist/manifest.json

@@ -2,7 +2,7 @@
   "version": "1.0.0",
   "timestamp": 0,
   "packageName": "@happyvertical/smrt-chat",
-  "packageVersion": "0.55.16",
+  "packageVersion": "0.55.17",
   "objects": {
     "@happyvertical/smrt-chat:AgentSessionCollection": {
       "name": "agentsessioncollection",

package/dist/smrt-knowledge.json

@@ -3,12 +3,12 @@
   "sensitiveFieldsExcluded": true,
   "generatedAt": "1970-01-01T00:00:00.000Z",
   "packageName": "@happyvertical/smrt-chat",
-  "packageVersion": "0.55.16",
+  "packageVersion": "0.55.17",
   "sourceManifestPath": "dist/manifest.json",
   "agentDocPath": "AGENTS.md",
   "sourceHashes": {
-    "manifest": "69f1ffcb2c18121bfb0222b5181c8a535397ec2ad850dc5c45d2b69af3781a84",
-    "packageJson": "f8421f356ae43131bc1c25f25a517353edd9eb905b9b2af1830c0a3248f5e227",
+    "manifest": "498b75e2f02ef874fce024d083f0f34dbd04adef9c08331450fd41e4d31574a6",
+    "packageJson": "b966760e4d64621cbdd38e76fe3defc29425a356fb20fa5486f70c32c77cca86",
     "agents": "aa720d6aa1fa097a61d56b1dab61b7857a8d4ee41920443aa1f085016488f90a",
     "moduleDoc:agents/dev-workbench.md": "f07a428519e8cca4a46371da0a3b33b9c8d3102f1d9056e4c8efba3c0b702048",
     "moduleDoc:agents/overview-tools.md": "752a4afb6b57a2e9224f3c65a98b0deb23cda87371f01ac0566f0887e9bb12da",

package/dist/svelte/components/agent/AgentChat.svelte

@@ -92,7 +92,7 @@ $effect(() => {
 });
 </script>
 
-<div class="agent-chat" aria-label={t(M['chat.agent_chat.conversation'])}>
+<div class="agent-chat" aria-label={t(M['chat.agent_chat.conversation'])} data-smrt-component="AgentChat">
   <Form class="agent-chat__input-bar" onsubmit={(e) => handleSubmit(e)}>
     {#if !isActive}
       <div class="agent-chat__inactive-notice">
@@ -200,7 +200,7 @@ $effect(() => {
 </div>
 
 <!-- Diff Modal -->
-<dialog bind:this={diffDialog} class="diff-dialog">
+<dialog bind:this={diffDialog} class="diff-dialog" data-smrt-component="AgentChat">
   <div class="diff-dialog__header">
     <h4>{t(M['chat.agent_chat.field_changes'])}</h4>
     <Button variant="ghost" size="sm" class="diff-dialog__close" type="button" onclick={closeDiff}>✕</Button>
@@ -218,21 +218,23 @@ $effect(() => {
 </dialog>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .agent-chat {
     display: flex;
     flex-direction: column;
     height: 100%;
-    background: var(--smrt-color-surface, #fefbff);
-    color: var(--smrt-color-on-surface, #1a1c1e);
+    background: var(--smrt-color-surface);
+    color: var(--smrt-color-on-surface);
   }
 
   .agent-chat__messages {
     flex: 1;
     overflow-y: auto;
-    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
+    padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
     display: flex;
     flex-direction: column-reverse;
-    gap: var(--smrt-spacing-2, 8px);
+    gap: var(--smrt-spacing-2);
   }
 
   .agent-chat__msg {
@@ -255,35 +257,35 @@ $effect(() => {
 
   .agent-chat__tool-row {
     width: 100%;
-    padding: var(--smrt-spacing-1, 4px) 0;
+    padding: var(--smrt-spacing-1) 0;
   }
 
   .agent-chat__bubble {
     display: flex;
     flex-direction: column;
-    gap: var(--smrt-spacing-1, 4px);
-    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
-    border-radius: var(--smrt-radius-lg, 12px);
+    gap: var(--smrt-spacing-1);
+    padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
+    border-radius: var(--smrt-radius-lg);
     word-break: break-word;
     font-size: var(--smrt-typography-body-medium-size, 0.8125rem);
     line-height: var(--smrt-typography-body-medium-line-height, 1.45);
   }
 
   .agent-chat__bubble--user {
-    background: var(--smrt-color-primary-container, #d6e3ff);
-    color: var(--smrt-color-on-primary-container, #001a41);
-    border-bottom-right-radius: var(--smrt-radius-sm, 4px);
+    background: var(--smrt-color-primary-container);
+    color: var(--smrt-color-on-primary-container);
+    border-bottom-right-radius: var(--smrt-radius-sm);
   }
 
   .agent-chat__bubble--agent {
-    background: var(--smrt-color-surface-container-high, #e6e6ea);
-    color: var(--smrt-color-on-surface, #1a1c1e);
-    border-bottom-left-radius: var(--smrt-radius-sm, 4px);
+    background: var(--smrt-color-surface-container-high);
+    color: var(--smrt-color-on-surface);
+    border-bottom-left-radius: var(--smrt-radius-sm);
   }
 
   .agent-chat__msg--system .agent-chat__bubble {
-    background: var(--smrt-color-surface-variant, #e1e2ec);
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    background: var(--smrt-color-surface-variant);
+    color: var(--smrt-color-on-surface-variant);
     font-style: italic;
     text-align: center;
   }
@@ -294,7 +296,7 @@ $effect(() => {
 
   .agent-chat__msg-time {
     font-size: var(--smrt-typography-label-small-size, 0.5625rem);
-    color: var(--smrt-color-outline, #74777f);
+    color: var(--smrt-color-outline);
     align-self: flex-end;
     line-height: 1;
   }
@@ -309,25 +311,25 @@ $effect(() => {
 
   .agent-chat__empty-text {
     font-size: var(--smrt-typography-body-medium-size, 0.8125rem);
-    color: var(--smrt-color-outline, #74777f);
+    color: var(--smrt-color-outline);
   }
 
   /* :global() targets the Form primitive's rendered <form> (see #1589 scoping trap). */
   :global(.agent-chat__input-bar) {
     display: flex;
     align-items: flex-end;
-    gap: var(--smrt-spacing-2, 8px);
-    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
-    background: var(--smrt-color-surface, #fefbff);
+    gap: var(--smrt-spacing-2);
+    padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
+    background: var(--smrt-color-surface);
     flex-shrink: 0;
   }
 
   .agent-chat__inactive-notice {
     flex: 1;
     text-align: center;
-    padding: var(--smrt-spacing-2, 8px);
+    padding: var(--smrt-spacing-2);
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
-    color: var(--smrt-color-outline, #74777f);
+    color: var(--smrt-color-outline);
     font-style: italic;
   }
 
@@ -346,49 +348,49 @@ $effect(() => {
     width: 34px;
     height: 34px;
     padding: 0;
-    background: var(--smrt-color-primary, #005ac1);
-    color: var(--smrt-color-on-primary, #ffffff);
-    border-radius: var(--smrt-radius-full, 9999px);
+    background: var(--smrt-color-primary);
+    color: var(--smrt-color-on-primary);
+    border-radius: var(--smrt-radius-full);
     flex-shrink: 0;
     transition: opacity 150ms;
   }
 
   :global(.agent-chat__input-bar .agent-chat__send-btn:not(:disabled):hover) {
-    background: var(--smrt-color-primary, #005ac1);
+    background: var(--smrt-color-primary);
     opacity: 0.85;
   }
 
   .applied-badge {
     display: inline-flex;
     align-items: center;
-    padding: var(--smrt-spacing-1, 4px) var(--smrt-spacing-2, 8px);
+    padding: var(--smrt-spacing-1) var(--smrt-spacing-2);
     font-size: var(--smrt-typography-label-small-size, 0.6875rem);
     font-weight: var(--smrt-typography-weight-semibold, 600);
-    color: var(--smrt-color-on-success-container, #16a34a);
-    background: var(--smrt-color-success-container, #f0fdf4);
-    border: 1px solid var(--smrt-color-success, #bbf7d0);
-    border-radius: var(--smrt-radius-full, 9999px);
+    color: var(--smrt-color-on-success-container);
+    background: var(--smrt-color-success-container);
+    border: 1px solid var(--smrt-color-success);
+    border-radius: var(--smrt-radius-full);
   }
 
   .field-update-block {
     display: flex;
     align-items: center;
-    gap: var(--smrt-spacing-2, 8px);
-    padding: var(--smrt-spacing-1, 4px) 0;
+    gap: var(--smrt-spacing-2);
+    padding: var(--smrt-spacing-1) 0;
   }
 
   .markdown-block {
     display: flex;
     flex-direction: column;
-    gap: var(--smrt-spacing-2, 8px);
-    padding: var(--smrt-spacing-1, 4px) 0;
+    gap: var(--smrt-spacing-2);
+    padding: var(--smrt-spacing-1) 0;
   }
 
   .markdown-block__content {
     margin: 0;
-    padding: var(--smrt-spacing-3, 12px);
-    border-radius: var(--smrt-radius-lg, 12px);
-    background: color-mix(in srgb, var(--smrt-color-surface-container-low, #f4f2f6) 85%, white);
+    padding: var(--smrt-spacing-3);
+    border-radius: var(--smrt-radius-lg);
+    background: color-mix(in srgb, var(--smrt-color-surface-container-low) 85%, white);
     overflow-x: auto;
     white-space: pre-wrap;
     word-break: break-word;
@@ -399,30 +401,30 @@ $effect(() => {
   /* :global() pierces into each Button's rendered <button> (see #1589). */
   .field-update-block :global(.diff-btn),
   .markdown-block :global(.diff-btn) {
-    padding: var(--smrt-spacing-1, 4px) var(--smrt-spacing-2, 8px);
+    padding: var(--smrt-spacing-1) var(--smrt-spacing-2);
     font-size: var(--smrt-typography-label-small-size, 0.625rem);
     font-weight: var(--smrt-typography-weight-semibold, 600);
-    border: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
-    border-radius: var(--smrt-radius-full, 9999px);
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-full);
     background: none;
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .field-update-block :global(.diff-btn:hover),
   .markdown-block :global(.diff-btn:hover) {
-    background: var(--smrt-color-surface-variant, #e1e2ec);
-    color: var(--smrt-color-primary, #005ac1);
+    background: var(--smrt-color-surface-variant);
+    color: var(--smrt-color-primary);
   }
 
   .diff-dialog {
     border: none;
-    border-radius: var(--smrt-radius-lg, 12px);
+    border-radius: var(--smrt-radius-lg);
     padding: 0;
     width: min(420px, 90vw);
     max-height: 60vh;
     box-shadow: var(--smrt-elevation-5, 0 8px 32px color-mix(in srgb, var(--smrt-color-shadow) 18%, transparent));
-    background: var(--smrt-color-surface, #fefbff);
-    color: var(--smrt-color-on-surface, #1a1c1e);
+    background: var(--smrt-color-surface);
+    color: var(--smrt-color-on-surface);
   }
 
   .diff-dialog::backdrop {
@@ -433,8 +435,8 @@ $effect(() => {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: var(--smrt-spacing-3, 12px) var(--smrt-spacing-4, 16px);
-    border-bottom: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
+    padding: var(--smrt-spacing-3) var(--smrt-spacing-4);
+    border-bottom: 1px solid var(--smrt-color-outline-variant);
   }
 
   .diff-dialog__header h4 {
@@ -447,23 +449,23 @@ $effect(() => {
   .diff-dialog__header :global(.diff-dialog__close) {
     background: none;
     font-size: var(--smrt-typography-body-large-size, 1rem);
-    color: var(--smrt-color-outline, #74777f);
-    padding: var(--smrt-spacing-1, 4px) var(--smrt-spacing-2, 8px);
-    border-radius: var(--smrt-radius-sm, 4px);
+    color: var(--smrt-color-outline);
+    padding: var(--smrt-spacing-1) var(--smrt-spacing-2);
+    border-radius: var(--smrt-radius-sm);
   }
 
   .diff-dialog__header :global(.diff-dialog__close:hover) {
-    background: var(--smrt-color-surface-variant, #e1e2ec);
+    background: var(--smrt-color-surface-variant);
   }
 
   .diff-dialog__body {
-    padding: var(--smrt-spacing-3, 12px) var(--smrt-spacing-4, 16px);
+    padding: var(--smrt-spacing-3) var(--smrt-spacing-4);
     overflow-y: auto;
     max-height: calc(60vh - 60px);
   }
 
   .diff-field {
-    margin-bottom: var(--smrt-spacing-3, 12px);
+    margin-bottom: var(--smrt-spacing-3);
   }
 
   .diff-field:last-child {
@@ -476,17 +478,17 @@ $effect(() => {
     font-weight: var(--smrt-typography-weight-semibold, 600);
     text-transform: uppercase;
     letter-spacing: var(--smrt-typography-label-small-tracking, 0.04em);
-    color: var(--smrt-color-outline, #74777f);
-    margin-bottom: var(--smrt-spacing-1, 4px);
+    color: var(--smrt-color-outline);
+    margin-bottom: var(--smrt-spacing-1);
   }
 
   .diff-field__value {
     margin: 0;
-    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
+    padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
     line-height: var(--smrt-typography-body-small-line-height, 1.5);
-    background: var(--smrt-color-surface-container-low, #f7f7fb);
-    border-radius: var(--smrt-radius-md, 8px);
+    background: var(--smrt-color-surface-container-low);
+    border-radius: var(--smrt-radius-md);
     white-space: pre-wrap;
     word-break: break-word;
     font-family: inherit;
@@ -495,20 +497,20 @@ $effect(() => {
   }
 
   .agent-chat__thinking {
-    padding: var(--smrt-spacing-3, 12px) var(--smrt-spacing-4, 16px);
+    padding: var(--smrt-spacing-3) var(--smrt-spacing-4);
   }
 
   .thinking-dots {
     display: inline-flex;
-    gap: var(--smrt-spacing-1, 4px);
+    gap: var(--smrt-spacing-1);
     align-items: center;
   }
 
   .thinking-dots span {
     width: 6px;
     height: 6px;
-    border-radius: var(--smrt-radius-full, 9999px);
-    background: var(--smrt-color-outline, #74777f);
+    border-radius: var(--smrt-radius-full);
+    background: var(--smrt-color-outline);
     animation: thinking-bounce 1.2s ease-in-out infinite;
   }
 
@@ -530,4 +532,5 @@ $effect(() => {
       animation: none;
     }
   }
+}
 </style>

package/dist/svelte/components/agent/AgentSelector.svelte

@@ -21,7 +21,7 @@ const { agents, onselect }: Props = $props();
 const { t } = useI18n();
 </script>
 
-<div class="agent-selector" aria-label={t(M['chat.agent_selector.select_an_agent'])}>
+<div class="agent-selector" aria-label={t(M['chat.agent_selector.select_an_agent'])} data-smrt-component="AgentSelector">
   <h3 class="agent-selector__title">{t(M['chat.agent_selector.title'])}</h3>
 
   <div class="agent-selector__grid" role="listbox" aria-label={t(M['chat.agent_selector.available_agents'])}>
@@ -63,36 +63,38 @@ const { t } = useI18n();
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .agent-selector {
     display: flex;
     flex-direction: column;
-    gap: var(--smrt-spacing-4, 16px);
-    padding: var(--smrt-spacing-4, 16px);
+    gap: var(--smrt-spacing-4);
+    padding: var(--smrt-spacing-4);
   }
 
   .agent-selector__title {
     font: var(--smrt-typography-title-medium-font, 600 1rem/1.25 sans-serif);
-    color: var(--smrt-color-on-surface, #1a1c1e);
+    color: var(--smrt-color-on-surface);
     margin: 0;
   }
 
   .agent-selector__grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-    gap: var(--smrt-spacing-3, 12px);
+    gap: var(--smrt-spacing-3);
   }
 
   .agent-selector__card {
     display: flex;
     align-items: flex-start;
-    gap: var(--smrt-spacing-3, 12px);
-    padding: var(--smrt-spacing-4, 16px);
-    background: var(--smrt-color-surface-container-low, #f7f7fb);
-    border: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
-    border-radius: var(--smrt-radius-large, 12px);
+    gap: var(--smrt-spacing-3);
+    padding: var(--smrt-spacing-4);
+    background: var(--smrt-color-surface-container-low);
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-large);
     cursor: pointer;
     text-align: left;
-    color: var(--smrt-color-on-surface, #1a1c1e);
+    color: var(--smrt-color-on-surface);
     position: relative;
     transition:
       background var(--smrt-duration-short2, 150ms),
@@ -101,13 +103,13 @@ const { t } = useI18n();
   }
 
   .agent-selector__card:hover:not(:disabled) {
-    background: var(--smrt-color-surface-container, #f0f0f4);
-    border-color: var(--smrt-color-primary, #005ac1);
+    background: var(--smrt-color-surface-container);
+    border-color: var(--smrt-color-primary);
     box-shadow: var(--smrt-elevation-1, 0 1px 3px rgba(0, 0, 0, 0.1));
   }
 
   .agent-selector__card:focus-visible {
-    outline: 2px solid var(--smrt-color-primary, #005ac1);
+    outline: 2px solid var(--smrt-color-primary);
     outline-offset: -2px;
   }
 
@@ -120,18 +122,18 @@ const { t } = useI18n();
     flex: 1;
     display: flex;
     flex-direction: column;
-    gap: var(--smrt-spacing-1, 4px);
+    gap: var(--smrt-spacing-1);
     min-width: 0;
   }
 
   .agent-selector__card-name {
     font: var(--smrt-typography-title-small-font, 600 0.875rem/1.25 sans-serif);
-    color: var(--smrt-color-on-surface, #1a1c1e);
+    color: var(--smrt-color-on-surface);
   }
 
   .agent-selector__card-desc {
     font: var(--smrt-typography-body-small-font, 0.8125rem/1.4 sans-serif);
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
     display: -webkit-box;
     -webkit-line-clamp: 2;
     line-clamp: 2;
@@ -144,22 +146,22 @@ const { t } = useI18n();
     top: 8px;
     right: 8px;
     font: var(--smrt-typography-label-small-font, 500 0.6875rem/1 sans-serif);
-    color: var(--smrt-color-outline, #74777f);
-    background: var(--smrt-color-surface-variant, #e1e2ec);
-    padding: var(--smrt-spacing-1, 4px) var(--smrt-spacing-2, 8px);
-    border-radius: var(--smrt-radius-full, 9999px);
+    color: var(--smrt-color-outline);
+    background: var(--smrt-color-surface-variant);
+    padding: var(--smrt-spacing-1) var(--smrt-spacing-2);
+    border-radius: var(--smrt-radius-full);
   }
 
   .agent-selector__empty {
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: var(--smrt-spacing-10, 40px);
+    padding: var(--smrt-spacing-10);
   }
 
   .agent-selector__empty-text {
     font: var(--smrt-typography-body-medium-font, 0.875rem/1.4 sans-serif);
-    color: var(--smrt-color-outline, #74777f);
+    color: var(--smrt-color-outline);
   }
 
   @media (max-width: 480px) {
@@ -173,4 +175,5 @@ const { t } = useI18n();
       transition: none;
     }
   }
+}
 </style>