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-app-shell.ts b/webui/src/web-components/sketch-app-shell.ts
index a4dfeee..b356535 100644
--- a/webui/src/web-components/sketch-app-shell.ts
+++ b/webui/src/web-components/sketch-app-shell.ts
@@ -566,6 +566,13 @@
// Update state if we received it
if (state) {
+ // Ensure we're using the latest call status to prevent indicators from being stuck
+ if (state.outstanding_llm_calls === 0 && state.outstanding_tool_calls.length === 0) {
+ // Force reset containerState calls when nothing is reported as in progress
+ state.outstanding_llm_calls = 0;
+ state.outstanding_tool_calls = [];
+ }
+
this.containerState = state;
this.title = state.title;
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 {