sandbox bump

web/src/components/ChatPanel.vue

@@ -59,6 +59,8 @@ let toolCallMessageId: string | null = null
 let lastSentMessageId: string | null = null
 let streamingBuffer = ''
 const isAgentProcessing = ref(false)
+const isStopHovered = ref(false)
+const isStopPressed = ref(false)
 
 const addToolCallBubble = (label: string) => {
   removeToolCallBubble()
@@ -653,10 +655,26 @@ onUnmounted(() => {
         v-if="isAgentProcessing"
         slot="send-icon"
         @click.stop="stopAgent"
-        class="stop-btn"
+        @mouseenter="isStopHovered = true"
+        @mouseleave="isStopHovered = false; isStopPressed = false"
+        @mousedown="isStopPressed = true"
+        @mouseup="isStopPressed = false"
+        :style="{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: '100%',
+          height: '100%',
+          cursor: 'pointer',
+          borderRadius: '6px',
+          transition: 'transform 0.1s ease, box-shadow 0.15s ease',
+          transform: isStopPressed ? 'scale(0.88)' : isStopHovered ? 'scale(1.12)' : 'scale(1)',
+          boxShadow: isStopPressed ? '0 0 4px rgba(242,54,69,0.25)' : isStopHovered ? '0 0 10px rgba(242,54,69,0.5)' : 'none',
+        }"
       >
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18">
-          <rect x="4" y="4" width="16" height="16" rx="2" fill="currentColor"/>
+          <rect x="4" y="4" width="16" height="16" rx="2"
+            :fill="isStopPressed ? '#c41e2e' : isStopHovered ? '#ff5566' : '#f23645'"/>
         </svg>
       </div>
     </vue-advanced-chat>
@@ -664,29 +682,6 @@ onUnmounted(() => {
 </template>
 
 <style scoped>
-.stop-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  color: #f23645;
-  border-radius: 6px;
-  transition: color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
-  cursor: pointer;
-}
-
-.stop-btn:hover {
-  color: #ff4d5e;
-  transform: scale(1.1);
-  box-shadow: 0 0 8px rgba(242, 54, 69, 0.4);
-}
-
-.stop-btn:active {
-  color: #c41e2e;
-  transform: scale(0.92);
-  box-shadow: 0 0 4px rgba(242, 54, 69, 0.2);
-}
 
 .chat-container {
   height: 100% !important;