Version Display in the "Connected" Badge and Advanced Cache Busting System

New Features Implemented

1. Version Display in the "Connected" Badge

What has been implemented:

• The "Connected" badge now also displays the component version (e.g., "✓ Connected v2.0.0")
• The version is dynamically loaded from the backend via WebSocket
• ​​Multilingual support for the version badge

Files modified:

• frontend/panel.js: Added version display in the badge
• frontend/frontend.js: Added version display in the badge
• websocket_api.py: New ai_automation_builder/get_version endpoint
• const.py: Added WS_TYPE_GET_VERSION constant

How it works:

1. When the frontend component starts, the /get_version endpoint is automatically called
2. The backend reads the version from manifest.json
3. The version is displayed next to the "Connected" badge
4. If loading fails, a fallback version is used

2. Advanced Cache Busting System

Issue fixed:

Users had to manually clear their browser cache with each component update.

Implemented Solution:

• Automatic Cache Busting: All frontend files include version parameters in the URL
• Content-Based Hash: In addition to the version, an MD5 hash is generated for more effective cache busting
• Dynamic Update: The version is read from manifest.json on each restart
• Automatic Replacement: JS files are automatically updated with the current version

Files Modified:

• __init__.py: Full cache busting and intelligent file copy system
• websocket_api.py: Endpoint for dynamically getting the version
• frontend/panel.js: Dynamic version loading
• frontend/frontend.js: Dynamic version loading

How it works:

1. When Home Assistant restarts:

• The component reads the version from manifest.json
• Generates an MD5 hash based on the version
• Copies the frontend files to www/community/ai_automation_builder/
• Replaces hardcoded versions in JS files
• Adds cache-busting parameters to CSS/JS imports

2. Panel Registration:

• The module URL includes the version and hash: panel.js?v=2.0.0&h=a1b2c3d4
• This forces the browser to download the new version

3. In the Frontend:

• Components load the version dynamically via WebSocket
• ​​The UI automatically updates with the correct version

Advantages:

• ✅ No manual cache cleaning: The browser automatically downloads new files
• ✅ Intelligent cache busting: Only when the version actually changes
• ✅ Compatibility: Works with all browsers and companion apps
• ✅ Performance: Files are cached correctly between versions
• ✅ Debugging: Easy to identify Which version is in use?

Example generated URL:

Before: /local/community/ai_automation_builder/panel.js
After: /local/community/ai_automation_builder/panel.js?v=2.0.0&h=a1b2c3d4

3. WebSocket Endpoint for Version

New endpoint:

• Command: ai_automation_builder/get_version
• Parameters: None
• Response:

{
"version": "2.0.0",
"component_name": "AI Automation Builder",
"timestamp": 1642678800
}

Usage:

const result = await this.callWebSocket('ai_automation_builder/get_version', {});
console.log('Component version:', result.version);

User Instructions

To test the new features:

1. Update the component to the new version
2. Restart Home Assistant completely
3. Open the AI ​​Automation Builder panel
4. Verify that the badge shows "✓ Connected v2.0.0" (or current version)
5. It is no longer necessary to clear your browser cache

If you encounter problems:

1. Check the Home Assistant logs for errors
2. Verify that the files have been copied to config/www/community/ai_automation_builder/
3. Verify that the panel URL includes the version parameters
4. If necessary, restart Home Assistant a second time

Notes for developers:

• The version is automatically read from manifest.json
• To change the version, only edit manifest.json
• The cache-busting system is activated automatically
• The logs show the file copying and updating process