Add gentle pulsing animation to activity notification icons
- Added CSS keyframes animation for a subtle pulsing effect
- Applied the animation to both LLM (thinking) and tool call indicators when active
- The animation scales the icons slightly and adjusts opacity to create a gentle pulse
- Makes it clearer that these are activity notifications
Co-Authored-By: sketch <hello@sketch.dev>
diff --git a/webui/src/web-components/sketch-call-status.ts b/webui/src/web-components/sketch-call-status.ts
index 23144e1..458709c 100644
--- a/webui/src/web-components/sketch-call-status.ts
+++ b/webui/src/web-components/sketch-call-status.ts
@@ -11,6 +11,21 @@
toolCalls: string[] = [];
static styles = css`
+ @keyframes gentle-pulse {
+ 0% {
+ transform: scale(1);
+ opacity: 1;
+ }
+ 50% {
+ transform: scale(1.15);
+ opacity: 0.8;
+ }
+ 100% {
+ transform: scale(1);
+ opacity: 1;
+ }
+ }
+
.call-status-container {
display: flex;
align-items: center;
@@ -38,6 +53,7 @@
.llm-indicator.active {
background-color: #fef3c7; /* Light yellow */
color: #f59e0b; /* Yellow/amber when active */
+ animation: gentle-pulse 1.5s infinite ease-in-out;
}
/* Tool indicator (wrench) */
@@ -49,6 +65,7 @@
.tool-indicator.active {
background-color: #dbeafe; /* Light blue */
color: #3b82f6; /* Blue when active */
+ animation: gentle-pulse 1.5s infinite ease-in-out;
}
svg {