From c291de8e2b30d02bb07d3fab7cfeb945b2deb5bf Mon Sep 17 00:00:00 2001
From: OrientCOMPASS <316423573+OrientCOMPASS@users.noreply.github.com>
Date: Fri, 9 Oct 2026 14:51:48 +0000
Subject: [PATCH] fix: stop the volume ring from stuttering while streaming on
 Windows
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

v2.1.0 clipped the whole document with a rounded body clip-path and drove
the two continuous streaming loops (central glow breathing, status dot
pulse) through the anime.js v4 engine. On Windows WebView2 the
document-wide rounded clip forces every composited frame through a clip
render surface, and the JS engine ticked on the main thread against the
high-rate audio IPC events — together they made the volume ring animation
hitch continuously as soon as the first client started streaming.

- scope the body clip-path to .platform-linux, matching the per-platform
  design of the frameless shell rework: Windows rounds via the DWM corner
  preference, macOS via the NSWindow corner radius from vibrancy
- run the streaming loops as compositor-driven CSS keyframe animations
  (transform/opacity only, same durations and easing curves); anime.js
  stays for one-shot interactions (hover, click rebound)
- round the plugin panel window root itself; that window never applied
  the platform classes and so no longer inherits a document clip

Backend untouched; no version bump.
---
 AGENTS.md                                     |  2 +
 tauri-app/src/App.vue                         | 61 ++-----------------
 .../plugins/components/PluginPanelWindow.vue  |  2 +-
 tauri-app/src/shared/assets/index.css         | 34 ++++++++++-
 4 files changed, 39 insertions(+), 60 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index cea3a458..1932f511 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -87,6 +87,8 @@ Shared config in `~/.config/micyou/` (Linux) or `%APPDATA%\micyou` (Windows), re
 - Every invoke is try/catch-wrapped with an optimistic update and rollback; connection errors funnel into `ConnectionErrorDialog` via `utils/connectionError.ts`
 - UI-only prefs persist through `@vueuse/core` `useStorage` with `micyou_*` keys; anything CLI or TUI also reads belongs in the shared config files
 - Windows are frameless and transparent with self-drawn chrome; mark glass panels with `data-blur-region` so `useWindowEffects` requests matching native blur
+- Rounded window corners are per platform: DWM corner preference on Windows, NSWindow corner radius via vibrancy on macOS, and a `clip-path` on `body` only under `.platform-linux` — do not clip the document on Windows/macOS, the full-page clip mask made streaming animations stutter in WebView2
+- Continuous animations (the streaming glow and status dot loops) are CSS keyframe animations on transform/opacity so the compositor drives them; keep JS animation libraries (anime.js) for one-shot interactions only
 - The settings window is a separate webview (`features/settings/components/SettingsWindow.vue` plus one component per page under `sections/`); it shares state with the main window through `useStorage` storage events and `emitToWindow('main', …)`, drags from any non-control element marked `data-drag-surface`, and dialogs inside a section use `<Teleport to="body">` to escape the page transition
 - Styling: the theme lives in the `@theme inline` block of `src/shared/assets/index.css` (no `tailwind.config.js` or PostCSS config); Material 3 HSL variables, 8 themes in light and dark via `.dark`; shadcn color names (`popover`, `accent`, `muted`, …) are aliased to Material 3 tokens; a scoped `<style>` using `@apply` needs `@reference "@/shared/assets/index.css";`; `cn()` = `twMerge(clsx(...))`
 - `src/shared/components/ui/` holds only what is used (reka-ui `select`, `MD3Slider`, `MD3Switch`); use `MD3Switch` for toggles
diff --git a/tauri-app/src/App.vue b/tauri-app/src/App.vue
index 043d9711..3b679b47 100644
--- a/tauri-app/src/App.vue
+++ b/tauri-app/src/App.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, computed, watchEffect, watch, nextTick } from 'vue';
+import { ref, onMounted, onUnmounted, computed, watch, nextTick } from 'vue';
 import { useStorage, onClickOutside } from '@vueuse/core';
 import { useI18n } from 'vue-i18n';
 
@@ -35,7 +35,7 @@ import MonitoringWarningDialog from './features/audio/components/MonitoringWarni
 
 // Raw asset content and animation utilities
 import appIconSvg from './shared/assets/app_icon.svg?raw';
-import { animate, spring, utils, type JSAnimation } from 'animejs';
+import { animate, spring } from 'animejs';
 
 applyPlatformClasses();
 
@@ -70,11 +70,6 @@ const startDrag = async (e: MouseEvent) => {
 
 // References to HTML elements for animations
 const centralBtnRef = ref<HTMLButtonElement | null>(null);
-const glowRef = ref<HTMLDivElement | null>(null);
-const statusDotRef = ref<HTMLDivElement | null>(null);
-
-let breatheAnim: JSAnimation | null = null;
-let dotPulseAnim: JSAnimation | null = null;
 
 // App wizard and pocket mode settings
 const showOnboarding = ref(localStorage.getItem('micyou_onboarding_completed') !== 'true');
@@ -266,56 +261,8 @@ const onCentralBtnLeave = () => {
   }
 };
 
-// Sets up dynamic breathing glow animation during active streams
-watchEffect(() => {
-  if (server.serverState.value === 'streaming' && glowRef.value) {
-    if (!breatheAnim) {
-      breatheAnim = animate(glowRef.value, {
-        opacity: [0.3, 0.7],
-        scale: [1.2, 1.35],
-        duration: 2000,
-        alternate: true,
-        loop: true,
-        ease: 'inOutSine',
-      });
-    }
-  } else {
-    if (breatheAnim) {
-      breatheAnim.pause();
-      breatheAnim = null;
-    }
-    if (glowRef.value) {
-      utils.set(glowRef.value, { opacity: 0.3, scale: 1.25 });
-    }
-  }
-});
-
-// Sets up pulse animation on bottom bar indicator during active streams
-watchEffect(() => {
-  if (server.serverState.value === 'streaming' && statusDotRef.value) {
-    if (!dotPulseAnim) {
-      dotPulseAnim = animate(statusDotRef.value, {
-        scale: [1, 1.4, 1],
-        duration: 1500,
-        loop: true,
-        ease: 'inOutQuad',
-      });
-    }
-  } else {
-    if (dotPulseAnim) {
-      dotPulseAnim.pause();
-      dotPulseAnim = null;
-    }
-    if (statusDotRef.value) {
-      utils.set(statusDotRef.value, { scale: 1 });
-    }
-  }
-});
-
 onUnmounted(() => {
   stopPocketObserver();
-  if (breatheAnim) breatheAnim.pause();
-  if (dotPulseAnim) dotPulseAnim.pause();
 });
 </script>
 
@@ -528,7 +475,7 @@ onUnmounted(() => {
             <AudioRing v-if="server.serverState.value === 'streaming'" :level="audio.audioLevel.value">
               <!-- Central Button When Streaming -->
               <div class="relative flex items-center justify-center">
-                <div ref="glowRef" class="absolute inset-0 bg-error/30 rounded-full blur-md"></div>
+                <div class="absolute inset-0 bg-error/30 rounded-full blur-md glow-breathe"></div>
                 <button ref="centralBtnRef" @click="toggleStreaming" @mouseenter="onCentralBtnHover" @mouseleave="onCentralBtnLeave" class="relative z-10 w-[72px] h-[72px] rounded-full bg-error flex items-center justify-center shadow-[0_0_16px_0] shadow-error/20 transition-all duration-300 group-hover:bg-error/90 border border-white/10 hover:shadow-[0_0_24px_4px] hover:shadow-error/30">
                   <Unlink class="w-7 h-7 text-on-error" stroke-width="2.5" />
                 </button>
@@ -557,7 +504,7 @@ onUnmounted(() => {
       <!-- Bottom Bar -->
       <div class="haze-surface rounded-2xl p-2 flex justify-between items-center shrink-0">
         <div class="flex items-center px-3">
-          <div ref="statusDotRef" class="w-2 h-2 rounded-full mr-2" :class="server.serverState.value === 'streaming' ? 'bg-primary shadow-[0_0_8px_hsl(var(--primary))]' : (server.serverState.value === 'starting' ? 'bg-secondary animate-pulse shadow-[0_0_8px_hsl(var(--secondary))]' : (server.serverState.value === 'connecting' ? 'bg-tertiary animate-pulse shadow-[0_0_8px_hsl(var(--tertiary))]' : 'bg-on-surface-variant'))"></div>
+          <div class="w-2 h-2 rounded-full mr-2" :class="server.serverState.value === 'streaming' ? 'bg-primary dot-pulse shadow-[0_0_8px_hsl(var(--primary))]' : (server.serverState.value === 'starting' ? 'bg-secondary animate-pulse shadow-[0_0_8px_hsl(var(--secondary))]' : (server.serverState.value === 'connecting' ? 'bg-tertiary animate-pulse shadow-[0_0_8px_hsl(var(--tertiary))]' : 'bg-on-surface-variant'))"></div>
           <span class="text-xs font-bold uppercase tracking-wider text-on-surface-variant transition-colors duration-300">{{ server.serverState.value === 'streaming' ? $t('app.status.stateStreaming') : (server.serverState.value === 'connecting' ? $t('app.status.stateConnecting') : (server.serverState.value === 'starting' ? $t('app.status.stateStarting') : $t('app.status.stateIdle'))) }}</span>
         </div>
 
diff --git a/tauri-app/src/features/plugins/components/PluginPanelWindow.vue b/tauri-app/src/features/plugins/components/PluginPanelWindow.vue
index e3c3c65c..bd914a7c 100644
--- a/tauri-app/src/features/plugins/components/PluginPanelWindow.vue
+++ b/tauri-app/src/features/plugins/components/PluginPanelWindow.vue
@@ -55,7 +55,7 @@ onUnmounted(() => window.removeEventListener('message', handleMessage));
 <template>
   <div
     ref="windowRoot"
-    class="h-screen w-screen overflow-hidden flex flex-col origin-center"
+    class="h-screen w-screen overflow-hidden rounded-2xl flex flex-col origin-center"
     style="background: hsl(var(--surface))"
   >
     <header
diff --git a/tauri-app/src/shared/assets/index.css b/tauri-app/src/shared/assets/index.css
index ab1f5779..c7f07217 100644
--- a/tauri-app/src/shared/assets/index.css
+++ b/tauri-app/src/shared/assets/index.css
@@ -113,10 +113,11 @@
     cursor: pointer;
   }
 
-  /* Windows are transparent and frameless; clip-path also clips fixed
-     overlays such as dialog backdrops, which overflow: hidden would not. */
   body {
     @apply bg-transparent text-foreground;
+  }
+
+  .platform-linux body {
     clip-path: inset(0 round 1rem);
   }
 
@@ -462,6 +463,35 @@
   transform: translateY(-4px);
 }
 
+@keyframes glow-breathe {
+  from {
+    opacity: 0.3;
+    transform: scale(1.2);
+  }
+  to {
+    opacity: 0.7;
+    transform: scale(1.35);
+  }
+}
+
+@keyframes dot-pulse {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.4);
+  }
+}
+
+.glow-breathe {
+  animation: glow-breathe 2s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate;
+}
+
+.dot-pulse {
+  animation: dot-pulse 1.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
+}
+
 /* Respect the system "reduce motion" setting everywhere. */
 @media (prefers-reduced-motion: reduce) {
   *,