Merge pull request #17 from kubit-ui/fix/message-safe-zone

fix(messages): ensure productivity and event messages respect safe zone

Author: hectoruch

CHANGELOG.md

@@ -6,6 +6,21 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to
 [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.5.1] - 2025-11-21
+
+### 🐛 Bug Fixes
+
+- **Message Safe Zone Validation** - Fixed issue where productivity messages (reminders and metrics) and event-triggered messages were displaying outside of Kubito's safe zone, causing text overflow at container edges
+  - Added safe zone validation to `showEventMessage()` to prevent productivity messages from appearing at edges
+  - Refactored `showMessage()` to include safe zone check for consistent behavior across all message types
+  - Removed redundant safe zone validation from `setupRandomMessages()` timer
+  - Centralized safe zone logic in message display methods for better maintainability
+  - All messages now respect the safe zone (center 70% of container with 15% margin on each side)
+
+### 📚 Documentation
+
+- **README.md Updates** - Enhanced documentation with demo GIF as visual demonstration of extension functionality
+
 ## [2.5.0] - 2025-11-19
 
 ### ✨ Added

README.md

@@ -6,6 +6,10 @@
 > **Meet Kubito, your coding companion that brings joy to your development
 > workspace!**
 
+<p align="left">
+  <img src="media/demo-extension.gif" alt="Kubito Demo" width="600">
+</p>
+
 ## ✨ What Kubito Does
 
 - 🤖 **Walks Around**: Kubito walks back and forth in your Explorer
@@ -84,26 +88,17 @@ Enhance your coding workflow with intelligent reminders and metrics:
 
 Kubito speaks your language! All messages, reminders, and productivity features
 are fully localized in:
-
-### Western Languages
-
 - 🇪🇸 **Spanish** (Español) - Native support
 - 🇺🇸 **English** - Native support
 - 🇫🇷 **French** (Français) - Native support
 - 🇩🇪 **German** (Deutsch) - Native support
 - 🇵🇹 **Portuguese** (Português) - Native support
 - 🇮🇹 **Italian** (Italiano) - Native support
 - 🇳🇱 **Dutch** (Nederlands) - Native support
-
-### Eastern Languages
-
 - 🇯🇵 **Japanese** (日本語) - Full localization
 - 🇰🇷 **Korean** (한국어) - Full localization
 - 🇨🇳 **Chinese Simplified** (中文简体) - Full localization
 - 🇷🇺 **Russian** (Русский) - Full localization
-
-### Additional Languages
-
 - 🇵🇱 **Polish** (Polski) - Full localization
 - 🇸🇦 **Arabic** (العربية) - Full localization (RTL supported)
 - 🇹🇷 **Turkish** (Türkçe) - Full localization

media/demo-extension.gif

@@ -1010,14 +1010,14 @@ class KubitoController implements IKubitoAnimator, IAnimationState {
         const timeSinceLastLanding = Date.now() - this.lastLandingTime;
         const isInLandingCooldown = timeSinceLastLanding < KUBITO_CONFIG.POST_JUMP_COOLDOWN;
 
-        // Show messages when not jumping, not in jump cooldown, not in landing cooldown, and in safe zone
+        // Show messages when not jumping, not in jump cooldown, not in landing cooldown
         // Messages only appear during PAUSED state
+        // Safe zone validation is done in showMessage() method
         if (
           !this.isJumping &&
           !isInJumpCooldown &&
           !isInLandingCooldown &&
-          this.kubitoState === KubitoState.PAUSED &&
-          this.isInSafeZone()
+          this.kubitoState === KubitoState.PAUSED
         ) {
           this.showRandomMessage();
         }
@@ -1148,6 +1148,11 @@ class KubitoController implements IKubitoAnimator, IAnimationState {
       return;
     }
 
+    // Don't show messages if Kubito is not in safe zone
+    if (!this.isInSafeZone()) {
+      return;
+    }
+
     // Cancel any active random message timer
     if (this.messageInterval) {
       clearTimeout(this.messageInterval);
@@ -1172,6 +1177,11 @@ class KubitoController implements IKubitoAnimator, IAnimationState {
       return;
     }
 
+    // Don't show messages if Kubito is not in safe zone
+    if (!this.isInSafeZone()) {
+      return;
+    }
+
     this.forceShowMessage(message);
   }