@happyvertical/smrt-chat 0.55.15 → 0.55.17

package/dist/svelte/components/agent/AgentSessionPanel.svelte

@@ -46,7 +46,7 @@ const statusLabel: Record<string, string> = {
 };
 </script>
 
-<aside class="session-panel" aria-label={t(M['chat.agent_session_panel.sessions'])}>
+<aside class="session-panel" aria-label={t(M['chat.agent_session_panel.sessions'])} data-smrt-component="AgentSessionPanel">
   <div class="session-panel__header">
     <h2 class="session-panel__title">Sessions</h2>
     {#if onnewsession}
@@ -130,13 +130,15 @@ const statusLabel: Record<string, string> = {
 </aside>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .session-panel {
     display: flex;
     flex-direction: column;
     height: 100%;
     width: 280px;
-    background: var(--smrt-color-surface-container, #f0f0f4);
-    border-right: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
+    background: var(--smrt-color-surface-container);
+    border-right: 1px solid var(--smrt-color-outline-variant);
     overflow: hidden;
   }
 
@@ -144,14 +146,14 @@ const statusLabel: Record<string, string> = {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: var(--smrt-spacing-4, 16px);
-    border-bottom: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
+    padding: var(--smrt-spacing-4);
+    border-bottom: 1px solid var(--smrt-color-outline-variant);
     flex-shrink: 0;
   }
 
   .session-panel__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;
   }
 
@@ -160,55 +162,55 @@ const statusLabel: Record<string, string> = {
     width: 36px;
     height: 36px;
     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);
     transition: opacity var(--smrt-duration-short2, 150ms);
   }
 
   .session-panel__header :global(.session-panel__new-btn:hover) {
-    background: var(--smrt-color-primary, #005ac1);
+    background: var(--smrt-color-primary);
     opacity: 0.85;
   }
 
   .session-panel__list {
     flex: 1;
     overflow-y: auto;
-    padding: var(--smrt-spacing-2, 8px);
+    padding: var(--smrt-spacing-2);
     display: flex;
     flex-direction: column;
-    gap: var(--smrt-spacing-1, 4px);
+    gap: var(--smrt-spacing-1);
   }
 
   .session-panel__item {
     display: flex;
     align-items: flex-start;
-    gap: var(--smrt-spacing-3, 12px);
+    gap: var(--smrt-spacing-3);
     width: 100%;
-    padding: var(--smrt-spacing-3, 12px);
+    padding: var(--smrt-spacing-3);
     border: none;
     background: transparent;
-    border-radius: var(--smrt-radius-medium, 8px);
+    border-radius: var(--smrt-radius-medium);
     cursor: pointer;
     text-align: left;
-    color: var(--smrt-color-on-surface, #1a1c1e);
+    color: var(--smrt-color-on-surface);
     transition: background var(--smrt-duration-short2, 150ms);
   }
 
   .session-panel__item:hover {
-    background: var(--smrt-color-surface-container-high, #e6e6ea);
+    background: var(--smrt-color-surface-container-high);
   }
 
   .session-panel__item--active {
-    background: var(--smrt-color-secondary-container, #d7e3f7);
+    background: var(--smrt-color-secondary-container);
   }
 
   .session-panel__item--active:hover {
-    background: var(--smrt-color-secondary-container, #d7e3f7);
+    background: var(--smrt-color-secondary-container);
   }
 
   .session-panel__item:focus-visible {
-    outline: 2px solid var(--smrt-color-primary, #005ac1);
+    outline: 2px solid var(--smrt-color-primary);
     outline-offset: -2px;
   }
 
@@ -216,7 +218,7 @@ const statusLabel: Record<string, string> = {
     flex: 1;
     display: flex;
     flex-direction: column;
-    gap: var(--smrt-spacing-1, 4px);
+    gap: var(--smrt-spacing-1);
     min-width: 0;
   }
 
@@ -224,7 +226,7 @@ const statusLabel: Record<string, string> = {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: var(--smrt-spacing-2, 8px);
+    gap: var(--smrt-spacing-2);
   }
 
   .session-panel__item-name {
@@ -236,64 +238,64 @@ const statusLabel: Record<string, string> = {
 
   .session-panel__item-date {
     font: var(--smrt-typography-label-small-font, 500 0.6875rem/1 sans-serif);
-    color: var(--smrt-color-outline, #74777f);
+    color: var(--smrt-color-outline);
     flex-shrink: 0;
   }
 
   .session-panel__item-meta {
     display: flex;
     align-items: center;
-    gap: var(--smrt-spacing-2, 8px);
+    gap: var(--smrt-spacing-2);
   }
 
   .session-panel__item-status {
     font: var(--smrt-typography-label-small-font, 500 0.6875rem/1 sans-serif);
-    padding: var(--smrt-spacing-1, 4px) var(--smrt-spacing-2, 8px);
-    border-radius: var(--smrt-radius-full, 9999px);
-    background: var(--smrt-color-surface-variant, #e1e2ec);
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    padding: var(--smrt-spacing-1) var(--smrt-spacing-2);
+    border-radius: var(--smrt-radius-full);
+    background: var(--smrt-color-surface-variant);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .session-panel__item-status--active {
-    background: var(--smrt-color-success-container, #e8f5e9);
-    color: var(--smrt-color-on-success-container, #2e7d32);
+    background: var(--smrt-color-success-container);
+    color: var(--smrt-color-on-success-container);
   }
 
   .session-panel__item-status--closed {
-    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);
   }
 
   .session-panel__item-status--expired {
-    background: var(--smrt-color-error-container, #ffdad6);
-    color: var(--smrt-color-on-error-container, #410002);
+    background: var(--smrt-color-error-container);
+    color: var(--smrt-color-on-error-container);
   }
 
   .session-panel__item-count {
     font: var(--smrt-typography-label-small-font, 500 0.6875rem/1 sans-serif);
-    color: var(--smrt-color-outline, #74777f);
+    color: var(--smrt-color-outline);
   }
 
   .session-panel__item-tools {
     display: flex;
     flex-wrap: wrap;
-    gap: var(--smrt-spacing-1, 4px);
-    margin-top: var(--smrt-spacing-1, 4px);
+    gap: var(--smrt-spacing-1);
+    margin-top: var(--smrt-spacing-1);
   }
 
   .session-panel__tool-chip {
     font-size: var(--smrt-typography-label-small-size, 0.625rem);
     font-weight: var(--smrt-typography-weight-medium, 500);
-    padding: var(--smrt-spacing-1, 4px) var(--smrt-spacing-2, 8px);
-    border-radius: var(--smrt-radius-small, 4px);
-    background: var(--smrt-color-surface-container-highest, #dddde1);
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    padding: var(--smrt-spacing-1) var(--smrt-spacing-2);
+    border-radius: var(--smrt-radius-small);
+    background: var(--smrt-color-surface-container-highest);
+    color: var(--smrt-color-on-surface-variant);
     white-space: nowrap;
   }
 
   .session-panel__tool-chip--more {
-    background: var(--smrt-color-primary-container, #d6e3ff);
-    color: var(--smrt-color-on-primary-container, #001a41);
+    background: var(--smrt-color-primary-container);
+    color: var(--smrt-color-on-primary-container);
   }
 
   .session-panel__empty {
@@ -306,7 +308,7 @@ const statusLabel: Record<string, string> = {
 
   .session-panel__empty-text {
     font: var(--smrt-typography-body-small-font, 0.8125rem/1.4 sans-serif);
-    color: var(--smrt-color-outline, #74777f);
+    color: var(--smrt-color-outline);
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -318,4 +320,5 @@ const statusLabel: Record<string, string> = {
       transition: none;
     }
   }
+}
 </style>

package/dist/svelte/components/agent/ToolCallDisplay.svelte

@@ -89,7 +89,7 @@ function formatDuration(ms: number | undefined): string {
 }
 </script>
 
-<div class="tool-call tool-call--{effectiveStatus}" aria-label={t(M['chat.tool_call_display.tool_call'], { toolName: toolCall.toolName })}>
+<div class="tool-call tool-call--{effectiveStatus}" aria-label={t(M['chat.tool_call_display.tool_call'], { toolName: toolCall.toolName })} data-smrt-component="ToolCallDisplay">
   <!-- raw-primitive-allow: full-width disclosure trigger with aria-expanded and aria-controls toggling an externally-rendered collapsible panel, wrapping rich content (status dot, name, duration, status label, rotating chevron); structural accordion header no Button primitive owns -->
   <button
     class="tool-call__header"
@@ -189,97 +189,99 @@ function formatDuration(ms: number | undefined): string {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .tool-call {
-    border: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
-    border-radius: var(--smrt-radius-medium, 8px);
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-medium);
     overflow: hidden;
     font-family: var(--smrt-font-family, system-ui);
   }
 
   .tool-call--pending {
-    border-left: 3px solid var(--smrt-color-outline, #74777f);
+    border-left: 3px solid var(--smrt-color-outline);
   }
 
   .tool-call--running {
-    border-left: 3px solid var(--smrt-color-primary, #005ac1);
+    border-left: 3px solid var(--smrt-color-primary);
   }
 
   .tool-call--success {
-    border-left: 3px solid var(--smrt-color-success, #1e8e3e);
+    border-left: 3px solid var(--smrt-color-success);
   }
 
   .tool-call--error {
-    border-left: 3px solid var(--smrt-color-error, #b3261e);
+    border-left: 3px solid var(--smrt-color-error);
   }
 
   .tool-call--awaiting-confirmation {
-    border-left: 3px solid var(--smrt-color-tertiary, #7d5260);
+    border-left: 3px solid var(--smrt-color-tertiary);
   }
 
   .tool-call--applied {
-    border-left: 3px solid var(--smrt-color-success, #1e8e3e);
+    border-left: 3px solid var(--smrt-color-success);
   }
 
   .tool-call__header {
     display: flex;
     align-items: center;
-    gap: var(--smrt-spacing-2, 8px);
+    gap: var(--smrt-spacing-2);
     width: 100%;
-    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
+    padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
     border: none;
-    background: var(--smrt-color-surface-container-low, #f7f7fb);
+    background: var(--smrt-color-surface-container-low);
     cursor: pointer;
     text-align: left;
-    color: var(--smrt-color-on-surface, #1a1c1e);
+    color: var(--smrt-color-on-surface);
     font: inherit;
     transition: background var(--smrt-duration-short2, 150ms);
   }
 
   .tool-call__header:hover {
-    background: var(--smrt-color-surface-container, #f0f0f4);
+    background: var(--smrt-color-surface-container);
   }
 
   .tool-call__header:focus-visible {
-    outline: 2px solid var(--smrt-color-primary, #005ac1);
+    outline: 2px solid var(--smrt-color-primary);
     outline-offset: -2px;
   }
 
   .tool-call__status-dot {
     width: 8px;
     height: 8px;
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     flex-shrink: 0;
   }
 
   .tool-call--pending .tool-call__status-dot {
-    background: var(--smrt-color-outline, #74777f);
+    background: var(--smrt-color-outline);
   }
 
   .tool-call--running .tool-call__status-dot {
-    background: var(--smrt-color-primary, #005ac1);
+    background: var(--smrt-color-primary);
     animation: pulse 1.5s ease-in-out infinite;
   }
 
   .tool-call--success .tool-call__status-dot {
-    background: var(--smrt-color-success, #1e8e3e);
+    background: var(--smrt-color-success);
   }
 
   .tool-call--error .tool-call__status-dot {
-    background: var(--smrt-color-error, #b3261e);
+    background: var(--smrt-color-error);
   }
 
   .tool-call--awaiting-confirmation .tool-call__status-dot {
-    background: var(--smrt-color-tertiary, #7d5260);
+    background: var(--smrt-color-tertiary);
   }
 
   .tool-call--applied .tool-call__status-dot {
-    background: var(--smrt-color-success, #1e8e3e);
+    background: var(--smrt-color-success);
   }
 
   .tool-call__applied-fallback {
     margin: 0;
     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);
   }
 
   .tool-call__name {
@@ -295,22 +297,22 @@ function formatDuration(ms: number | undefined): string {
   .tool-call__header-right {
     display: flex;
     align-items: center;
-    gap: var(--smrt-spacing-2, 8px);
+    gap: var(--smrt-spacing-2);
     flex-shrink: 0;
   }
 
   .tool-call__duration {
     font: var(--smrt-typography-label-small-font, 500 0.6875rem/1 sans-serif);
-    color: var(--smrt-color-outline, #74777f);
+    color: var(--smrt-color-outline);
   }
 
   .tool-call__status-label {
     font: var(--smrt-typography-label-small-font, 500 0.6875rem/1 sans-serif);
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .tool-call__chevron {
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
     transition: transform var(--smrt-duration-short2, 150ms);
   }
 
@@ -319,33 +321,33 @@ function formatDuration(ms: number | undefined): string {
   }
 
   .tool-call__body {
-    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px) var(--smrt-spacing-3, 12px);
+    padding: var(--smrt-spacing-2) var(--smrt-spacing-3) var(--smrt-spacing-3);
     display: flex;
     flex-direction: column;
-    gap: var(--smrt-spacing-2, 8px);
-    border-top: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
-    background: var(--smrt-color-surface, #fefbff);
+    gap: var(--smrt-spacing-2);
+    border-top: 1px solid var(--smrt-color-outline-variant);
+    background: var(--smrt-color-surface);
   }
 
   .tool-call__section {
     display: flex;
     flex-direction: column;
-    gap: var(--smrt-spacing-1, 4px);
+    gap: var(--smrt-spacing-1);
   }
 
   .tool-call__section-label {
     font: var(--smrt-typography-label-small-font, 500 0.6875rem/1 sans-serif);
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
     text-transform: uppercase;
-    letter-spacing: var(--smrt-typography-label-small-tracking, 0.5px);
+    letter-spacing: var(--smrt-typography-label-small-tracking);
   }
 
   .tool-call__json {
     margin: 0;
-    padding: var(--smrt-spacing-2, 8px);
-    border-radius: var(--smrt-radius-small, 4px);
-    background: var(--smrt-color-surface-container-low, #f7f7fb);
-    color: var(--smrt-color-on-surface, #1a1c1e);
+    padding: var(--smrt-spacing-2);
+    border-radius: var(--smrt-radius-small);
+    background: var(--smrt-color-surface-container-low);
+    color: var(--smrt-color-on-surface);
     font-family: var(--smrt-font-family-mono, 'SF Mono', 'Fira Code', 'Cascadia Code', monospace);
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
     line-height: var(--smrt-typography-body-small-line-height, 1.5);
@@ -357,30 +359,30 @@ function formatDuration(ms: number | undefined): string {
   }
 
   .tool-call__json--result {
-    background: var(--smrt-color-success-container, #f1f8e9);
-    color: var(--smrt-color-on-success-container, #33691e);
+    background: var(--smrt-color-success-container);
+    color: var(--smrt-color-on-success-container);
   }
 
   .tool-call__json--error {
-    background: var(--smrt-color-error-container, #ffdad6);
-    color: var(--smrt-color-on-error-container, #410002);
+    background: var(--smrt-color-error-container);
+    color: var(--smrt-color-on-error-container);
   }
 
   .tool-call__running {
     display: flex;
     align-items: center;
-    gap: var(--smrt-spacing-2, 8px);
-    padding: var(--smrt-spacing-2, 8px);
+    gap: var(--smrt-spacing-2);
+    padding: var(--smrt-spacing-2);
     font: var(--smrt-typography-body-small-font, 0.8125rem/1.4 sans-serif);
-    color: var(--smrt-color-primary, #005ac1);
+    color: var(--smrt-color-primary);
   }
 
   .tool-call__spinner {
     width: 16px;
     height: 16px;
-    border: 2px solid var(--smrt-color-primary-container, #d6e3ff);
-    border-top-color: var(--smrt-color-primary, #005ac1);
-    border-radius: var(--smrt-radius-full, 9999px);
+    border: 2px solid var(--smrt-color-primary-container);
+    border-top-color: var(--smrt-color-primary);
+    border-radius: var(--smrt-radius-full);
     animation: spin 0.8s linear infinite;
   }
 
@@ -407,11 +409,12 @@ function formatDuration(ms: number | undefined): string {
 
     .tool-call__spinner {
       animation: none;
-      border-top-color: var(--smrt-color-primary, #005ac1);
+      border-top-color: var(--smrt-color-primary);
     }
 
     .tool-call--running .tool-call__status-dot {
       animation: none;
     }
   }
+}
 </style>

package/dist/svelte/components/assistant/AssistantChoiceCards.svelte

@@ -75,7 +75,7 @@ const { t } = useI18n();
     role="group"
     aria-label={set.title}
     aria-busy={making ? 'true' : undefined}
-    onkeydown={(event) => onkeydown(event, set)}
+    onkeydown={(event) => onkeydown(event, set)} data-smrt-component="AssistantChoiceCards"
   >
     <p class="assistant-dock-choices-title">{set.title}</p>
     {#if making}
@@ -168,14 +168,16 @@ const { t } = useI18n();
 {/each}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .assistant-dock-choices {
     display: grid;
     gap: 0.5rem;
     margin: 0.5rem 0;
     padding: 0.75rem;
-    border: 1px solid var(--smrt-color-outline-variant, #c4c6cf);
+    border: 1px solid var(--smrt-color-outline-variant);
     border-radius: 0.75rem;
-    background: var(--smrt-color-surface-container-low, #f7f7fb);
+    background: var(--smrt-color-surface-container-low);
   }
 
   .assistant-dock-choices-title {
@@ -199,10 +201,10 @@ const { t } = useI18n();
     width: 100%;
     min-height: 44px;
     padding: 0.35rem;
-    border: 2px solid var(--smrt-color-outline-variant, #c4c6cf);
+    border: 2px solid var(--smrt-color-outline-variant);
     border-radius: 0.6rem;
-    background: var(--smrt-color-surface, #fff);
-    color: var(--smrt-color-on-surface, #1a1c1e);
+    background: var(--smrt-color-surface);
+    color: var(--smrt-color-on-surface);
     font: inherit;
     text-align: left;
     cursor: pointer;
@@ -210,12 +212,12 @@ const { t } = useI18n();
 
   .assistant-dock-choice:hover:not(:disabled),
   .assistant-dock-choice:focus-visible {
-    border-color: var(--smrt-color-primary, #3558d6);
+    border-color: var(--smrt-color-primary);
   }
 
   .assistant-dock-choice.chosen {
-    border-color: var(--smrt-color-primary, #3558d6);
-    background: var(--smrt-color-primary-container, #dde3ff);
+    border-color: var(--smrt-color-primary);
+    background: var(--smrt-color-primary-container);
   }
 
   .assistant-dock-choice:disabled:not(.chosen) {
@@ -228,7 +230,7 @@ const { t } = useI18n();
     aspect-ratio: 4 / 3;
     object-fit: cover;
     border-radius: 0.4rem;
-    background: var(--smrt-color-surface-container, #eceef4);
+    background: var(--smrt-color-surface-container);
   }
 
   .assistant-dock-choice-label {
@@ -237,7 +239,7 @@ const { t } = useI18n();
   }
 
   .assistant-dock-choice-description {
-    color: var(--smrt-color-on-surface-variant, #44474e);
+    color: var(--smrt-color-on-surface-variant);
     font-size: var(--smrt-typography-body-small-size, 0.78rem);
   }
 
@@ -255,7 +257,7 @@ const { t } = useI18n();
     position: sticky;
     inset-block-end: 0;
     padding-block: 0.25rem;
-    background: var(--smrt-color-surface-container-low, #f7f7fb);
+    background: var(--smrt-color-surface-container-low);
   }
 
   .assistant-dock-choices-commit :global(button) {
@@ -272,7 +274,7 @@ const { t } = useI18n();
   }
 
   .assistant-dock-choices-error {
-    color: var(--smrt-color-error, #b3261e);
+    color: var(--smrt-color-error);
   }
 
   .assistant-dock-choice-pending {
@@ -281,16 +283,16 @@ const { t } = useI18n();
     align-content: start;
     min-height: 44px;
     padding: 0.35rem;
-    border: 2px dashed var(--smrt-color-outline-variant, #c4c6cf);
+    border: 2px dashed var(--smrt-color-outline-variant);
     border-radius: 0.6rem;
-    color: var(--smrt-color-on-surface-variant, #44474e);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .assistant-dock-choice-placeholder {
     width: 100%;
     aspect-ratio: 4 / 3;
     border-radius: 0.4rem;
-    background: var(--smrt-color-surface-container, #eceef4);
+    background: var(--smrt-color-surface-container);
     animation: assistant-dock-choice-pulse 1.4s ease-in-out infinite;
   }
 
@@ -305,5 +307,5 @@ const { t } = useI18n();
       animation: none;
     }
   }
-
+}
 </style>