Fix UI: Clear Chat button overlap and add local testing

- Replace ha-button with native button element to fix z-index issues
- Add proper positioning and z-index to header and clear button
- Improve button styling with native CSS properties
- Add local frontend testing environment
  - tests/frontend/test_panel.html for standalone testing
  - tests/frontend/serve.py as simple HTTP server
- Update README with local testing instructions

This fixes the issue where the Clear Chat button was overlapping
with other UI elements in the header.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: sbenodiz

README.md

@@ -229,6 +229,32 @@ Please check out our [contribution guidelines](CONTRIBUTING.md) for detailed inf
 
 For security issues, please review our [security policy](SECURITY.md).
 
+### Local Frontend Testing
+
+You can test the frontend UI locally without deploying to Home Assistant:
+
+1. **Start the local test server:**
+   ```bash
+   cd tests/frontend
+   python3 serve.py
+   ```
+
+2. **Open your browser:**
+   Navigate to `http://localhost:8000/test_panel.html`
+
+3. **Test the interface:**
+   The test page provides a mock Home Assistant environment where you can test UI changes, styling, and component behavior without needing a full Home Assistant installation.
+
+**Test files location:**
+- `tests/frontend/test_panel.html` - Standalone test page
+- `tests/frontend/serve.py` - Simple HTTP server for testing
+
+This is particularly useful for:
+- Testing CSS changes and styling
+- Verifying UI layout and responsiveness
+- Debugging frontend JavaScript issues
+- Quick iteration on visual changes
+
 ### CI/CD Workflows
 
 This project uses GitHub Actions to ensure code quality and reliability:

custom_components/ai_agent_ha/frontend/ai_agent_ha-panel.js

@@ -54,27 +54,31 @@ class AiAgentHaPanel extends LitElement {
         font-size: 20px;
         font-weight: 500;
         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        position: relative;
+        z-index: 100;
       }
       .clear-button {
         margin-left: auto;
-        --mdc-theme-primary: var(--error-color);
-        --mdc-theme-on-primary: #fff;
-        --mdc-typography-button-font-size: 13px;
-        --mdc-button-height: 32px;
-        --mdc-button-padding: 0 12px;
+        border: none;
         border-radius: 16px;
         background: var(--error-color);
         color: #fff;
+        cursor: pointer;
         transition: all 0.2s ease;
         display: flex;
         align-items: center;
         gap: 6px;
-        padding: 0 12px;
+        padding: 8px 16px;
         font-weight: 500;
+        font-size: 13px;
         box-shadow: 0 1px 2px rgba(0,0,0,0.08);
         min-width: unset;
         width: auto;
-        height: 32px;
+        height: 36px;
+        flex-shrink: 0;
+        position: relative;
+        z-index: 101;
+        font-family: inherit;
       }
       .clear-button:hover {
         background: var(--error-color);
@@ -882,14 +886,14 @@ class AiAgentHaPanel extends LitElement {
       <div class="header">
         <ha-icon icon="mdi:robot"></ha-icon>
         AI Agent HA
-        <ha-button
+        <button
           class="clear-button"
           @click=${this._clearChat}
-          .disabled=${this._isLoading}
+          ?disabled=${this._isLoading}
         >
           <ha-icon icon="mdi:delete-sweep"></ha-icon>
           <span>Clear Chat</span>
-        </ha-button>
+        </button>
       </div>
       <div class="content">
         <div class="chat-container">

custom_components/ai_agent_ha/manifest.json

@@ -21,5 +21,5 @@
     "requirements": [
         "aiohttp>=3.8.0"
     ],
-    "version": "0.99.5"
+    "version": "0.99.6"
 }

tests/frontend/serve.py

@@ -0,0 +1,33 @@
+#!/usr/bin/env python3
+"""Simple HTTP server for testing the AI Agent HA panel locally."""
+import http.server
+import socketserver
+import os
+
+PORT = 8000
+
+# Change to the project directory
+os.chdir(os.path.dirname(os.path.abspath(__file__)))
+
+class MyHTTPRequestHandler(http.server.SimpleHTTPRequestHandler):
+    def end_headers(self):
+        # Add CORS headers for local testing
+        self.send_header('Access-Control-Allow-Origin', '*')
+        self.send_header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS')
+        self.send_header('Access-Control-Allow-Headers', '*')
+        super().end_headers()
+
+    def do_OPTIONS(self):
+        self.send_response(200)
+        self.end_headers()
+
+Handler = MyHTTPRequestHandler
+
+with socketserver.TCPServer(("", PORT), Handler) as httpd:
+    print(f"Server running at http://localhost:{PORT}/")
+    print(f"Open http://localhost:{PORT}/test_panel.html to test the panel")
+    print("Press Ctrl+C to stop the server")
+    try:
+        httpd.serve_forever()
+    except KeyboardInterrupt:
+        print("\nServer stopped.")

tests/frontend/test_panel.html

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Agent HA Panel Test</title>
+    <style>
+        :root {
+            --primary-background-color: #fafafa;
+            --secondary-background-color: #e5e5e5;
+            --card-background-color: #ffffff;
+            --primary-color: #03a9f4;
+            --primary-text-color: #212121;
+            --secondary-text-color: #727272;
+            --text-primary-color: #ffffff;
+            --divider-color: #e0e0e0;
+            --error-color: #db4437;
+            --error-background-color: #fce4ec;
+            --app-header-background-color: #03a9f4;
+            --app-header-text-color: #ffffff;
+            --accent-color: #ff9800;
+            --info-color: #2196f3;
+            --success-color: #4caf50;
+        }
+        body {
+            margin: 0;
+            padding: 0;
+            font-family: "Roboto", "Noto", sans-serif;
+        }
+    </style>
+    <script type="module" src="../../custom_components/ai_agent_ha/frontend/ai_agent_ha-panel.js"></script>
+</head>
+<body>
+    <ai_agent_ha-panel id="panel"></ai_agent_ha-panel>
+
+    <script>
+        // Mock hass object for testing
+        const mockHass = {
+            callService: async (domain, service, data) => {
+                console.log('Mock service call:', domain, service, data);
+                return { success: true };
+            },
+            callWS: async (data) => {
+                console.log('Mock WebSocket call:', data);
+                if (data.type === 'config_entries/get') {
+                    return [
+                        {
+                            domain: 'ai_agent_ha',
+                            title: 'AI Agent HA (Llama)',
+                            data: { ai_provider: 'llama' }
+                        }
+                    ];
+                }
+                return {};
+            },
+            connection: {
+                subscribeEvents: (callback, eventType) => {
+                    console.log('Mock event subscription:', eventType);
+                    return () => {};
+                }
+            }
+        };
+
+        // Set the mock hass object on the panel
+        const panel = document.getElementById('panel');
+        panel.hass = mockHass;
+    </script>
+</body>
+</html>