diff --git a/custom_components/google_assistant_entity_console/manifest.json b/custom_components/google_assistant_entity_console/manifest.json
index 964b0ed..f74658c 100644
--- a/custom_components/google_assistant_entity_console/manifest.json
+++ b/custom_components/google_assistant_entity_console/manifest.json
@@ -8,5 +8,5 @@
   "iot_class": "local_polling",
   "config_flow": true,
   "requirements": [],
-  "version": "1.8.0"
+  "version": "1.9.0"
 }
diff --git a/custom_components/google_assistant_entity_console/static/app.js b/custom_components/google_assistant_entity_console/static/app.js
index 778390e..8cf7189 100644
--- a/custom_components/google_assistant_entity_console/static/app.js
+++ b/custom_components/google_assistant_entity_console/static/app.js
@@ -152,7 +152,28 @@ async function fetchEntities() {
 
 // Event listeners setup
 function setupEventListeners() {
-    if (searchInput) searchInput.addEventListener('input', applyFilters);
+    if (searchInput) {
+        searchInput.addEventListener('input', () => {
+            const clearBtn = document.getElementById('clearSearchBtn');
+            if (clearBtn) {
+                clearBtn.style.display = searchInput.value ? 'flex' : 'none';
+            }
+            applyFilters();
+        });
+    }
+
+    const clearSearchBtn = document.getElementById('clearSearchBtn');
+    if (clearSearchBtn) {
+        clearSearchBtn.addEventListener('click', () => {
+            if (searchInput) {
+                searchInput.value = '';
+                clearSearchBtn.style.display = 'none';
+                searchInput.focus();
+                applyFilters();
+            }
+        });
+    }
+
     if (roomFilter) roomFilter.addEventListener('change', applyFilters);
     if (exposedOnlyCheckbox) exposedOnlyCheckbox.addEventListener('change', applyFilters);
     if (groupingType) groupingType.addEventListener('change', applyFilters);
@@ -232,8 +253,33 @@ function setupEventListeners() {
 }
 
 function updateStats() {
-    totalEntitiesEl.textContent = entities.length;
-    exposedEntitiesEl.textContent = entities.filter(e => e.should_expose).length;
+    if (totalEntitiesEl) totalEntitiesEl.textContent = entities.length;
+    if (exposedEntitiesEl) exposedEntitiesEl.textContent = entities.filter(e => e.should_expose).length;
+
+    const pendingAdd = entities.filter(e => e.should_expose && !e.yaml_exposed).length;
+    const pendingRemove = entities.filter(e => !e.should_expose && e.yaml_exposed).length;
+    const pendingTotal = pendingAdd + pendingRemove;
+
+    const pendingEntitiesStat = document.getElementById('pendingEntitiesStat');
+    if (pendingEntitiesStat) pendingEntitiesStat.textContent = pendingTotal;
+
+    const pendingChangesBadge = document.getElementById('pendingChangesBadge');
+    if (pendingChangesBadge) {
+        if (pendingTotal > 0) {
+            pendingChangesBadge.style.display = 'inline-block';
+            pendingChangesBadge.textContent = `${pendingTotal} Pending`;
+        } else {
+            pendingChangesBadge.style.display = 'none';
+        }
+    }
+
+    if (rebuildBtn) {
+        if (pendingTotal > 0) {
+            rebuildBtn.classList.add('pulse-highlight');
+        } else {
+            rebuildBtn.classList.remove('pulse-highlight');
+        }
+    }
 }
 
 function populateRoomFilter(uniqueRooms) {
@@ -315,6 +361,15 @@ function applyFilters() {
         
         return matchesQuery && matchesDomain && matchesRoom && matchesExposed && matchesGroupedLights && matchesUnavailable;
     });
+
+    const matchCountEl = document.getElementById('filterMatchCount');
+    if (matchCountEl) {
+        if (!query && room === 'all' && !exposedOnly && selectedDomains.size === 0) {
+            matchCountEl.textContent = `${entities.length} items`;
+        } else {
+            matchCountEl.textContent = `${filteredEntities.length} of ${entities.length}`;
+        }
+    }
     
     renderTable();
 }
@@ -484,7 +539,8 @@ function renderTable() {
     if (filteredEntities.length === 0) {
         entityTableBody.innerHTML = `
             <tr>
-                <td colspan="4" style="text-align: center; color: var(--text-muted); padding: 3rem 0;">
+                <td colspan="4" style="text-align: center; color: var(--on-surface-variant); padding: 3rem 0;">
+                    <i class="fa-solid fa-magnifying-glass" style="font-size: 1.5rem; opacity: 0.5; margin-bottom: 0.5rem; display: block;"></i>
                     No entities match the active filters.
                 </td>
             </tr>
@@ -495,6 +551,13 @@ function renderTable() {
     entityTableBody.innerHTML = '';
     
     const isDomainGrouping = (groupingType && groupingType.value === 'domain');
+    const isFlatGrouping = (groupingType && groupingType.value === 'flat');
+    
+    if (isFlatGrouping) {
+        const ents = [...filteredEntities].sort((a, b) => a.entity_id.localeCompare(b.entity_id));
+        ents.forEach(e => renderEntityRow(e));
+        return;
+    }
     
     if (isDomainGrouping) {
         // Group by Domain -> Floor & Room
@@ -702,6 +765,15 @@ function renderTable() {
     }
 }
 
+window.copyEntityId = function(entityId, event) {
+    if (event) event.stopPropagation();
+    navigator.clipboard.writeText(entityId).then(() => {
+        showToast(`Copied ${entityId}`, 'success');
+    }).catch(() => {
+        showToast(`Copied ${entityId}`, 'success');
+    });
+};
+
 function renderEntityRow(e) {
     const tr = document.createElement('tr');
     tr.className = 'entity-row';
@@ -711,9 +783,9 @@ function renderEntityRow(e) {
     
     // Aliases rendering with direct click-to-remove and inline "Add" button
     const aliasBadges = validAliases.map(a => `
-        <span class="badge alias-badge" style="display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.5rem;">
+        <span class="alias-badge">
             ${a}
-            <i class="fa-solid fa-xmark" onclick="removeAliasDirectly('${e.entity_id}', '${a.replace(/'/g, "\\'")}', event)" style="cursor: pointer; font-size: 0.75rem; color: var(--on-surface-variant); transition: color 0.15s;" onmouseover="this.style.color='var(--danger)'" onmouseout="this.style.color='var(--on-surface-variant)'" title="Remove nickname"></i>
+            <i class="fa-solid fa-xmark alias-delete-btn" onclick="removeAliasDirectly('${e.entity_id}', '${a.replace(/'/g, "\\'")}', event)" title="Remove nickname"></i>
         </span>
     `).join(' ');
     
@@ -724,43 +796,50 @@ function renderEntityRow(e) {
     // Expose status badge (directly togglable on click)
     let exposeBadge = '';
     if (e.yaml_exposed && e.should_expose) {
-        exposeBadge = `<span class="badge badge-exposed" onclick="toggleExposeDirectly('${e.entity_id}', event)" title="Click to toggle exposure"><i class="fa-solid fa-circle-check" style="margin-right: 0.3rem;"></i>Exposed</span>`;
+        exposeBadge = `<span class="badge badge-exposed" onclick="toggleExposeDirectly('${e.entity_id}', event)" title="Click to toggle exposure" style="cursor: pointer;"><i class="fa-solid fa-circle-check" style="margin-right: 0.3rem;"></i>Exposed</span>`;
     } else if (e.should_expose && !e.yaml_exposed) {
-        exposeBadge = `<span class="badge badge-pending-expose" onclick="toggleExposeDirectly('${e.entity_id}', event)" title="Click to toggle exposure"><i class="fa-solid fa-circle-pause" style="margin-right: 0.3rem;"></i>Pending Add</span>`;
+        exposeBadge = `<span class="badge badge-pending-expose" onclick="toggleExposeDirectly('${e.entity_id}', event)" title="Click to toggle exposure" style="cursor: pointer;"><i class="fa-solid fa-circle-pause" style="margin-right: 0.3rem;"></i>Pending Add</span>`;
     } else if (!e.should_expose && e.yaml_exposed) {
-        exposeBadge = `<span class="badge badge-pending-remove" onclick="toggleExposeDirectly('${e.entity_id}', event)" title="Click to toggle exposure"><i class="fa-solid fa-circle-minus" style="margin-right: 0.3rem;"></i>Pending Remove</span>`;
+        exposeBadge = `<span class="badge badge-pending-remove" onclick="toggleExposeDirectly('${e.entity_id}', event)" title="Click to toggle exposure" style="cursor: pointer;"><i class="fa-solid fa-circle-minus" style="margin-right: 0.3rem;"></i>Pending Remove</span>`;
     } else {
-        exposeBadge = `<span class="badge badge-not-exposed" onclick="toggleExposeDirectly('${e.entity_id}', event)" title="Click to toggle exposure">No</span>`;
+        exposeBadge = `<span class="badge badge-not-exposed" onclick="toggleExposeDirectly('${e.entity_id}', event)" title="Click to toggle exposure" style="cursor: pointer;">No</span>`;
     }
     
     tr.innerHTML = `
         <td>
             <div class="entity-info-wrapper">
-                <div class="entity-name-wrapper" style="display: inline-flex; align-items: center; gap: 0.4rem;">
-                    <i class="fa-solid ${getEntityIcon(e.domain)}" style="color: ${e.unavailable ? 'var(--on-surface-variant)' : 'var(--primary)'}; margin-right: 0.15rem; font-size: 0.95rem;"></i>
-                    <div class="entity-name"><strong>${e.display_name}</strong></div>
-                    ${e.unavailable ? '<span class="badge" style="background: rgba(220, 53, 69, 0.12); color: #e44c5a; font-size: 0.7rem; font-weight: 600; padding: 0.1rem 0.35rem; display: inline-flex; align-items: center; gap: 0.2rem; border-radius: 4px; border: 1px solid rgba(220, 53, 69, 0.25);" title="Entity is currently offline or unavailable in Home Assistant"><i class="fa-solid fa-circle-exclamation"></i>Unavailable</span>' : ''}
-                    <button class="inline-edit-name-btn" onclick="openEditNameInline('${e.entity_id}', event)" title="Rename Entity" style="background: none; border: none; cursor: pointer; font-size: 0.75rem; padding: 0.2rem;">
-                        <i class="fa-solid fa-pencil"></i>
-                    </button>
+                <div class="entity-icon-badge">
+                    <i class="fa-solid ${getEntityIcon(e.domain)}" style="color: ${e.unavailable ? 'var(--on-surface-variant)' : 'var(--primary)'};"></i>
+                </div>
+                <div class="entity-text-block">
+                    <div class="entity-name-row">
+                        <span class="entity-name" title="${e.display_name}">${e.display_name}</span>
+                        ${e.unavailable ? '<span class="badge-unavailable" title="Offline / Unavailable in Home Assistant">Unavailable</span>' : ''}
+                        <button class="inline-edit-name-btn" onclick="openEditNameInline('${e.entity_id}', event)" title="Rename Entity" style="background: none; border: none; cursor: pointer; font-size: 0.75rem; padding: 0.15rem; color: var(--on-surface-variant);">
+                            <i class="fa-solid fa-pencil"></i>
+                        </button>
+                    </div>
+                    <div class="entity-id-row">
+                        <span class="entity-id-badge" onclick="copyEntityId('${e.entity_id}', event)" title="Click to copy entity ID">${e.entity_id}</span>
+                        ${e.area ? `<span style="font-size: 0.72rem; color: var(--on-surface-variant);"><i class="fa-solid fa-door-open" style="font-size: 0.65rem; margin-right: 0.2rem;"></i>${e.area}</span>` : ''}
+                    </div>
                 </div>
-                <div class="entity-id-subtext">${e.entity_id}</div>
             </div>
         </td>
         <td class="inline-aliases-cell">
             <div class="aliases-wrapper">
                 <div class="aliases-badges-list">${aliasBadges || '<span class="no-aliases">None</span>'}</div>
                 <button class="inline-add-alias-btn" onclick="openQuickAliasModal('${e.entity_id}', event)" title="Add nickname">
-                    <i class="fa-solid fa-plus"></i>
+                    <i class="fa-solid fa-plus"></i> Add
                 </button>
-                <button class="inline-add-alias-btn ai-suggest-single-btn" onclick="generateSingleEntityNickname('${e.entity_id}', event)" title="AI Suggest Nicknames (Room-Aware)" style="color: var(--primary); margin-left: 0.25rem;">
+                <button class="ai-suggest-single-btn" onclick="generateSingleEntityNickname('${e.entity_id}', event)" title="AI Suggest Nicknames (Room-Aware)">
                     <i class="fa-solid fa-wand-magic-sparkles"></i>
                 </button>
             </div>
         </td>
         <td style="text-align: center;">${exposeBadge}</td>
         <td class="action-cell">
-            <button class="action-btn" onclick="addToBlocklistDirectly('${e.entity_id}', event)" title="Block / Permanently Hide" style="color: var(--danger);">
+            <button class="action-btn" onclick="addToBlocklistDirectly('${e.entity_id}', event)" title="Block / Permanently Hide">
                 <i class="fa-solid fa-eye-slash"></i>
             </button>
         </td>
diff --git a/custom_components/google_assistant_entity_console/static/index.html b/custom_components/google_assistant_entity_console/static/index.html
index a13b141..6fdebac 100644
--- a/custom_components/google_assistant_entity_console/static/index.html
+++ b/custom_components/google_assistant_entity_console/static/index.html
@@ -20,31 +20,34 @@
 <body>
     <div class="app-container">
         <!-- Header -->
-        <header>
+        <header class="app-header">
             <div class="logo">
-                <img src="/google_assistant_entity_console/static/logo.png" style="width: 32px; height: 32px; border-radius: 8px; margin-right: 0.6rem; flex-shrink: 0;" alt="Google Assistant Entity Console Logo">
+                <img src="/google_assistant_entity_console/static/logo.png" alt="Google Assistant Entity Console Logo">
                 <div class="logo-text">
-                    <h1>Google Assistant</h1>
+                    <div style="display: flex; align-items: center; gap: 0.5rem;">
+                        <h1>Google Assistant</h1>
+                        <span id="pendingChangesBadge" class="badge-pending-header" style="display: none;">0 Pending</span>
+                    </div>
                     <span id="appVersion">Entity Console</span>
                 </div>
             </div>
-            <div class="header-actions" style="display: flex; gap: 0.75rem;">
+            <div class="header-actions">
                 <button id="openAiSettingsBtn" class="btn btn-secondary">
                     <i class="fa-solid fa-robot"></i>
                     <span>AI Settings</span>
                 </button>
                 <button id="manageBlocklistBtn" class="btn btn-secondary">
                     <i class="fa-solid fa-ban"></i>
-                    <span>Manage Blocklist</span>
+                    <span>Blocklist</span>
                 </button>
                 <button id="rebuildBtn" class="btn btn-primary">
                     <i class="fa-solid fa-file-code"></i>
-                    <span>Rebuild Config</span>
+                    <span>Sync & Rebuild</span>
                 </button>
             </div>
         </header>
 
-        <!-- Stats Overview -->
+        <!-- KPI Stats Ribbon -->
         <section class="stats-container">
             <div class="stat-card">
                 <div class="stat-icon"><i class="fa-solid fa-list-check"></i></div>
@@ -54,64 +57,80 @@ <h2 id="totalEntities">0</h2>
                 </div>
             </div>
             <div class="stat-card">
-                <div class="stat-icon success"><i class="fa-solid fa-eye"></i></div>
+                <div class="stat-icon success"><i class="fa-solid fa-cloud-arrow-up"></i></div>
                 <div class="stat-content">
                     <span class="stat-label">Exposed to Google</span>
                     <h2 id="exposedEntities">0</h2>
                 </div>
             </div>
-            <div class="stat-card">
+            <div class="stat-card" id="pendingStatCard">
+                <div class="stat-icon warning"><i class="fa-solid fa-clock-rotate-left"></i></div>
+                <div class="stat-content">
+                    <span class="stat-label">Pending Sync</span>
+                    <h2 id="pendingEntitiesStat">0</h2>
+                </div>
+            </div>
+            <div class="stat-card config-card">
                 <div class="stat-icon info"><i class="fa-solid fa-file-code"></i></div>
                 <div class="stat-content">
                     <span class="stat-label">Active YAML Config</span>
-                    <h2 id="configFile" style="font-size: 1.1rem; line-height: 1.8;">Loading...</h2>
+                    <h2 id="configFile">Loading...</h2>
                 </div>
             </div>
         </section>
 
-        <!-- Information Alert Bar -->
-        <div class="info-alert-bar">
-            <i class="fa-solid fa-circle-info"></i>
-            <span>The <strong>Exposed Status</strong> is determined by the active Google Assistant YAML configuration file. Toggling exposure updates the Home Assistant registry and marks the entity as <strong>Pending Add</strong> or <strong>Pending Remove</strong> until you click <strong>Sync & Rebuild</strong>.</span>
-        </div>
-
-        <!-- Filter & Search Controls -->
+        <!-- Sticky Controls Toolbar -->
         <section class="controls-container">
-            <div class="search-box">
-                <i class="fa-solid fa-magnifying-glass"></i>
-                <input type="text" id="searchInput" placeholder="Search by name, ID or nickname...">
-            </div>
-            <div class="filters">
-                <select id="roomFilter" class="filter-select">
-                    <option value="all">All Rooms</option>
-                </select>
-                <select id="groupingType" class="filter-select">
-                    <option value="location">Group by Floor & Room</option>
-                    <option value="domain">Group by Domain</option>
-                </select>
-                <div class="toggle-container">
-                    <label class="switch-toggle">
-                        <input type="checkbox" id="exposedOnlyCheckbox">
-                        <span class="slider"></span>
-                    </label>
-                    <span class="toggle-label">Exposed Only</span>
+            <div class="controls-primary-row">
+                <div class="search-box">
+                    <i class="fa-solid fa-magnifying-glass search-icon"></i>
+                    <input type="text" id="searchInput" placeholder="Search by entity name, ID, or nickname..." autocomplete="off">
+                    <button id="clearSearchBtn" class="clear-search-btn" title="Clear search" style="display: none;">
+                        <i class="fa-solid fa-xmark"></i>
+                    </button>
+                    <span id="filterMatchCount" class="match-count-badge"></span>
+                </div>
+                <div class="filters-group">
+                    <div class="select-wrapper">
+                        <i class="fa-solid fa-door-open select-icon"></i>
+                        <select id="roomFilter" class="filter-select">
+                            <option value="all">All Rooms</option>
+                        </select>
+                    </div>
+                    <div class="select-wrapper">
+                        <i class="fa-solid fa-layer-group select-icon"></i>
+                        <select id="groupingType" class="filter-select">
+                            <option value="location">Floor & Room</option>
+                            <option value="domain">Domain</option>
+                            <option value="flat">No Grouping</option>
+                        </select>
+                    </div>
+                    <div class="toggle-pill">
+                        <label class="switch-toggle">
+                            <input type="checkbox" id="exposedOnlyCheckbox">
+                            <span class="slider"></span>
+                        </label>
+                        <span class="toggle-label">Exposed Only</span>
+                    </div>
+                    <button id="toggleAdvancedFiltersBtn" class="btn btn-secondary btn-icon-text">
+                        <i class="fa-solid fa-sliders"></i>
+                        <span>Filters</span>
+                        <span id="activeFilterBadge" class="filter-badge" style="display: none;">0</span>
+                    </button>
                 </div>
-                <button id="toggleAdvancedFiltersBtn" class="btn btn-secondary" style="padding: 0.5rem 1rem; border-radius: 12px; font-size: 0.85rem; height: 38px;">
-                    <i class="fa-solid fa-sliders"></i> Advanced Filters
-                </button>
             </div>
             
             <!-- Collapsible Advanced Filters Drawer -->
-            <div id="advancedFiltersDrawer" style="display: none; width: 100%; border-top: 1px solid var(--border); margin-top: 1rem; padding-top: 1rem; flex-direction: column; gap: 1rem;">
-                <div style="display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center;">
-                    <div class="toggle-container">
+            <div id="advancedFiltersDrawer" class="advanced-filters-drawer" style="display: none;">
+                <div class="advanced-filters-toggles">
+                    <div class="toggle-pill">
                         <label class="switch-toggle">
                             <input type="checkbox" id="hideGroupedLightsCheckbox">
                             <span class="slider"></span>
                         </label>
                         <span class="toggle-label">Hide Grouped Lights</span>
                     </div>
-                    <div class="toggle-container">
+                    <div class="toggle-pill">
                         <label class="switch-toggle">
                             <input type="checkbox" id="hideUnavailableCheckbox">
                             <span class="slider"></span>
@@ -119,29 +138,31 @@ <h2 id="configFile" style="font-size: 1.1rem; line-height: 1.8;">Loading...</h2>
                         <span class="toggle-label">Hide Unavailable</span>
                     </div>
                 </div>
-                <div style="display: flex; flex-direction: column; gap: 0.5rem; width: 100%;">
-                    <span style="font-size: 0.8rem; font-weight: 500; color: var(--on-surface-variant);">Include Domains / Types</span>
-                    <div id="domainChipsContainer" style="display: flex; flex-wrap: wrap; gap: 0.5rem; width: 100%;">
+                <div class="domain-filters-section">
+                    <div class="domain-filters-header">
+                        <span class="section-title">Include Domains / Types</span>
+                    </div>
+                    <div id="domainChipsContainer" class="domain-chips-container">
                         <!-- Rendered dynamically as active/inactive chips -->
                     </div>
                 </div>
             </div>
         </section>
 
-        <!-- Main Content (Table) -->
-        <main class="table-container">
+        <!-- Main Content (Scrollable Data Grid) -->
+        <main class="table-container" id="tableContainer">
             <table id="entityTable">
                 <thead>
                     <tr>
-                        <th width="45%">Entity</th>
-                        <th width="35%">Nicknames / Aliases</th>
-                        <th width="15%" style="text-align: center;">Exposed Status</th>
-                        <th width="5%" style="text-align: center;">Actions</th>
+                        <th style="width: 40%;">Entity</th>
+                        <th style="width: 35%;">Nicknames / Aliases</th>
+                        <th style="width: 15%; text-align: center;">Exposed Status</th>
+                        <th style="width: 10%; text-align: center;">Actions</th>
                     </tr>
                 </thead>
                 <tbody id="entityTableBody">
                     <tr>
-                        <td colspan="5" class="loading-state">
+                        <td colspan="4" class="loading-state">
                             <div class="spinner"></div>
                             <span>Loading Home Assistant registry...</span>
                         </td>
diff --git a/custom_components/google_assistant_entity_console/static/panel.js b/custom_components/google_assistant_entity_console/static/panel.js
index 37b472d..3a17943 100644
--- a/custom_components/google_assistant_entity_console/static/panel.js
+++ b/custom_components/google_assistant_entity_console/static/panel.js
@@ -18,6 +18,14 @@ if (!customElements.get('google-assistant-entity-console-panel')) {
     }
 
     connectedCallback() {
+      this.style.display = 'block';
+      this.style.position = 'absolute';
+      this.style.top = '0';
+      this.style.left = '0';
+      this.style.width = '100%';
+      this.style.height = '100%';
+      this.style.overflow = 'hidden';
+      this.style.boxSizing = 'border-box';
       window.addEventListener('message', this._messageListener);
     }
 
@@ -37,6 +45,7 @@ if (!customElements.get('google-assistant-entity-console-panel')) {
         this._iframe.style.height = '100%';
         this._iframe.style.border = '0';
         this._iframe.style.display = 'block';
+        this._iframe.style.overflow = 'hidden';
         this.appendChild(this._iframe);
       }
       // Update the src only once
diff --git a/custom_components/google_assistant_entity_console/static/style.css b/custom_components/google_assistant_entity_console/static/style.css
index c96f09b..e1d057b 100644
--- a/custom_components/google_assistant_entity_console/static/style.css
+++ b/custom_components/google_assistant_entity_console/static/style.css
@@ -1,8 +1,8 @@
-/* Material Design 3 / Material You styling variables */
+/* Material Design 3 / Home Assistant styling variables */
 :root {
     --bg-color: var(--primary-background-color, #111318);
     --surface: var(--card-background-color, var(--secondary-background-color, #1a1c22));
-    --surface-variant: var(--clear-background-color, var(--app-header-background-color, #2e3036));
+    --surface-variant: var(--clear-background-color, var(--app-header-background-color, #242730));
     --primary: var(--primary-color, #a8c7fa);
     --primary-container: var(--light-primary-color, var(--primary-color, #00458f));
     --on-primary-container: var(--text-primary-color, #d6e2ff);
@@ -22,7 +22,11 @@
     --danger-container: var(--error-color, #93000a);
     --on-danger-container: var(--text-primary-color, #ffdad6);
     
-    --border: var(--divider-color, var(--border-color, #44474e));
+    --warning: #f59e0b;
+    --warning-container: #4a3400;
+    --on-warning-container: #ffcb66;
+    
+    --border: var(--divider-color, var(--border-color, rgba(255, 255, 255, 0.1)));
     --font-main: var(--paper-font-common-font-family, Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif);
 }
 
@@ -32,79 +36,110 @@
     padding: 0;
 }
 
-body {
+html, body {
+    height: 100%;
+    max-height: 100vh;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
     background-color: var(--bg-color);
     font-family: var(--font-main);
     color: var(--on-surface);
-    min-height: 100vh;
-    padding: 2rem;
-    overflow-x: hidden;
 }
 
+/* Full-height App Flex Shell */
 .app-container {
-    max-width: 1200px;
-    margin: 0 auto;
     display: flex;
     flex-direction: column;
-    gap: 1.5rem;
+    height: 100vh;
+    width: 100%;
+    max-width: 100%;
+    margin: 0;
+    padding: 0.85rem 1.5rem 0.5rem 1.5rem;
+    box-sizing: border-box;
+    gap: 0.65rem;
+    overflow: hidden;
 }
 
 /* Header */
-header {
+.app-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 1.25rem 1.75rem;
+    padding: 0.65rem 1.25rem;
     background-color: var(--surface);
     border: 1px solid var(--border);
-    border-radius: 20px;
+    border-radius: 14px;
+    flex-shrink: 0;
 }
 
 .logo {
     display: flex;
     align-items: center;
-    gap: 1rem;
+    gap: 0.85rem;
 }
 
-.logo-icon {
-    font-size: 2.2rem;
-    color: var(--primary);
+.logo img {
+    width: 32px;
+    height: 32px;
+    border-radius: 8px;
+    flex-shrink: 0;
 }
 
 .logo-text h1 {
-    font-size: 1.35rem;
+    font-size: 1.2rem;
     font-weight: 700;
     letter-spacing: -0.2px;
     line-height: 1.1;
+    color: var(--on-surface);
 }
 
-.logo-text span {
-    font-size: 0.8rem;
+.logo-text span#appVersion {
+    font-size: 0.72rem;
     text-transform: uppercase;
-    letter-spacing: 1.5px;
+    letter-spacing: 1.2px;
     color: var(--on-surface-variant);
     font-weight: 500;
 }
 
+.badge-pending-header {
+    background-color: var(--warning-container);
+    color: var(--on-warning-container);
+    border: 1px solid #7a5900;
+    padding: 0.15rem 0.55rem;
+    border-radius: 100px;
+    font-size: 0.7rem;
+    font-weight: 700;
+    letter-spacing: 0.5px;
+    text-transform: uppercase;
+}
+
+.header-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+}
+
 /* Buttons */
 .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: 0.5rem;
-    padding: 0.65rem 1.5rem;
+    gap: 0.45rem;
+    padding: 0.5rem 1.1rem;
     font-family: var(--font-main);
-    font-size: 0.9rem;
+    font-size: 0.85rem;
     font-weight: 500;
-    border-radius: 100px; /* MD3 pill shape button */
+    border-radius: 100px;
     border: none;
     cursor: pointer;
     transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
+    white-space: nowrap;
 }
 
 .btn-primary {
     background-color: var(--primary);
-    color: #003062; /* On Primary dark text */
+    color: #003062;
 }
 
 .btn-primary:hover {
@@ -118,41 +153,51 @@ header {
 
 .btn-secondary {
     background-color: transparent;
-    color: var(--primary);
-    border: 1px solid var(--outline);
+    color: var(--on-surface);
+    border: 1px solid var(--border);
 }
 
 .btn-secondary:hover {
-    background-color: rgba(168, 199, 250, 0.08);
+    background-color: var(--surface-variant);
+    color: var(--primary);
+    border-color: var(--primary);
+}
+
+.btn-icon-text {
+    padding: 0.45rem 0.85rem;
+    height: 34px;
 }
 
-/* Stats Overview */
+/* KPI Stats Ribbon */
 .stats-container {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-    gap: 1rem;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 0.65rem;
+    flex-shrink: 0;
 }
 
 .stat-card {
     background-color: var(--surface);
     border: 1px solid var(--border);
-    border-radius: 16px;
-    padding: 1.25rem;
+    border-radius: 12px;
+    padding: 0.55rem 0.85rem;
     display: flex;
     align-items: center;
-    gap: 1rem;
+    gap: 0.75rem;
+    min-width: 0;
 }
 
 .stat-icon {
-    width: 3rem;
-    height: 3rem;
+    width: 2.2rem;
+    height: 2.2rem;
     background-color: var(--surface-variant);
-    border-radius: 100px;
+    border-radius: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 1.3rem;
+    font-size: 1.1rem;
     color: var(--primary);
+    flex-shrink: 0;
 }
 
 .stat-icon.success {
@@ -160,6 +205,11 @@ header {
     color: var(--on-success-container);
 }
 
+.stat-icon.warning {
+    background-color: var(--warning-container);
+    color: var(--on-warning-container);
+}
+
 .stat-icon.info {
     background-color: var(--info-container);
     color: var(--on-info-container);
@@ -168,57 +218,84 @@ header {
 .stat-content {
     display: flex;
     flex-direction: column;
+    min-width: 0;
 }
 
 .stat-label {
-    font-size: 0.8rem;
+    font-size: 0.72rem;
     color: var(--on-surface-variant);
     font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .stat-content h2 {
-    font-size: 1.5rem;
+    font-size: 1.25rem;
     font-weight: 700;
+    line-height: 1.2;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.stat-card.config-card h2 {
+    font-size: 0.92rem;
+    line-height: 1.4;
+    font-family: monospace;
 }
 
-/* Filters & Search Controls */
+/* Sticky Filter & Search Toolbar */
 .controls-container {
     background-color: var(--surface);
     border: 1px solid var(--border);
-    border-radius: 20px;
-    padding: 1rem 1.5rem;
+    border-radius: 12px;
+    padding: 0.55rem 0.85rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.65rem;
+    flex-shrink: 0;
+    position: relative;
+    z-index: 10;
+}
+
+.controls-primary-row {
     display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
     align-items: center;
-    gap: 1.25rem;
+    justify-content: space-between;
+    gap: 0.85rem;
+    flex-wrap: wrap;
 }
 
 .search-box {
     position: relative;
     flex: 1;
-    min-width: 280px;
+    min-width: 250px;
+    display: flex;
+    align-items: center;
 }
 
-.search-box i {
+.search-box .search-icon {
     position: absolute;
-    left: 1rem;
-    top: 50%;
-    transform: translateY(-50%);
+    left: 0.85rem;
     color: var(--on-surface-variant);
     pointer-events: none;
+    font-size: 0.85rem;
 }
 
 .search-box input {
     width: 100%;
-    padding: 0.75rem 1rem 0.75rem 2.5rem;
+    padding: 0.5rem 4.5rem 0.5rem 2.2rem;
     background-color: var(--surface-variant);
     border: 1px solid transparent;
-    border-radius: 12px;
+    border-radius: 10px;
     color: var(--on-surface);
     font-family: var(--font-main);
-    font-size: 0.95rem;
+    font-size: 0.88rem;
     transition: all 0.2s;
+    height: 36px;
 }
 
 .search-box input:focus {
@@ -227,41 +304,89 @@ header {
     background-color: var(--surface-variant);
 }
 
-.filters {
+.clear-search-btn {
+    position: absolute;
+    right: 3.5rem;
+    background: none;
+    border: none;
+    color: var(--on-surface-variant);
+    cursor: pointer;
+    padding: 0.25rem;
+    font-size: 0.85rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+}
+
+.clear-search-btn:hover {
+    color: var(--on-surface);
+}
+
+.match-count-badge {
+    position: absolute;
+    right: 0.6rem;
+    font-size: 0.72rem;
+    font-weight: 500;
+    color: var(--on-surface-variant);
+    pointer-events: none;
+    white-space: nowrap;
+}
+
+.filters-group {
     display: flex;
     align-items: center;
-    gap: 1.25rem;
+    gap: 0.65rem;
     flex-wrap: wrap;
 }
 
+.select-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+.select-icon {
+    position: absolute;
+    left: 0.7rem;
+    color: var(--on-surface-variant);
+    pointer-events: none;
+    font-size: 0.8rem;
+}
+
 .filter-select {
-    padding: 0.75rem 1.25rem;
+    padding: 0.45rem 0.85rem 0.45rem 2rem;
     background-color: var(--surface-variant);
     border: 1px solid transparent;
-    border-radius: 12px;
+    border-radius: 10px;
     color: var(--on-surface);
     font-family: var(--font-main);
-    font-size: 0.95rem;
+    font-size: 0.85rem;
     outline: none;
     cursor: pointer;
     transition: all 0.2s;
+    height: 36px;
 }
 
 .filter-select:focus {
     border-color: var(--primary);
 }
 
-.toggle-container {
-    display: flex;
+.toggle-pill {
+    display: inline-flex;
     align-items: center;
-    gap: 0.75rem;
+    gap: 0.5rem;
+    background-color: var(--surface-variant);
+    padding: 0.25rem 0.75rem;
+    border-radius: 10px;
+    height: 36px;
 }
 
 .switch-toggle {
     position: relative;
     display: inline-block;
-    width: 3.2rem;
-    height: 1.8rem;
+    width: 2.6rem;
+    height: 1.4rem;
 }
 
 .switch-toggle input {
@@ -277,7 +402,7 @@ header {
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: var(--surface-variant);
+    background-color: var(--surface);
     transition: .2s cubic-bezier(0.2, 0, 0, 1);
     border-radius: 100px;
     border: 1px solid var(--outline);
@@ -286,10 +411,10 @@ header {
 .slider:before {
     position: absolute;
     content: "";
-    height: 1.2rem;
-    width: 1.2rem;
-    left: 4px;
-    bottom: 3px;
+    height: 0.95rem;
+    width: 0.95rem;
+    left: 3px;
+    bottom: 2px;
     background-color: var(--outline);
     transition: .2s cubic-bezier(0.2, 0, 0, 1);
     border-radius: 50%;
@@ -301,51 +426,143 @@ input:checked + .slider {
 }
 
 input:checked + .slider:before {
-    transform: translateX(20px);
+    transform: translateX(18px);
     background-color: var(--primary);
 }
 
 .toggle-label {
-    font-size: 0.95rem;
+    font-size: 0.82rem;
+    font-weight: 500;
+    color: var(--on-surface);
+    white-space: nowrap;
+    user-select: none;
+}
+
+.filter-badge {
+    background-color: var(--primary);
+    color: #003062;
+    padding: 0.1rem 0.4rem;
+    border-radius: 100px;
+    font-size: 0.7rem;
+    font-weight: 700;
+    margin-left: 0.25rem;
+}
+
+/* Collapsible Advanced Filters Drawer */
+.advanced-filters-drawer {
+    width: 100%;
+    border-top: 1px solid var(--border);
+    padding-top: 0.65rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.65rem;
+}
+
+.advanced-filters-toggles {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.85rem;
+    align-items: center;
+}
+
+.domain-filters-section {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+    width: 100%;
+}
+
+.domain-filters-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.section-title {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--on-surface-variant);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.domain-chips-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+    width: 100%;
+}
+
+.domain-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.3rem 0.65rem;
+    border-radius: 100px;
+    font-size: 0.78rem;
     font-weight: 500;
+    cursor: pointer;
+    border: 1px solid var(--border);
+    background-color: var(--surface-variant);
+    color: var(--on-surface-variant);
+    transition: all 0.15s ease;
+    user-select: none;
+}
+
+.domain-chip:hover {
     color: var(--on-surface);
+    border-color: var(--primary);
+}
+
+.domain-chip.active {
+    background-color: var(--primary-container);
+    color: var(--on-primary-container);
+    border-color: var(--primary);
 }
 
-/* Table styling */
+/* Scrollable Data Grid Table Viewport */
 .table-container {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
     background-color: var(--surface);
     border: 1px solid var(--border);
-    border-radius: 20px;
-    padding: 1.25rem;
-    overflow-x: auto;
+    border-radius: 14px;
+    padding: 0;
+    position: relative;
 }
 
-table {
+#entityTable {
     width: 100%;
-    border-collapse: collapse;
+    border-collapse: separate;
+    border-spacing: 0;
     text-align: left;
 }
 
-th {
-    padding: 1rem;
-    font-size: 0.85rem;
-    text-transform: uppercase;
-    letter-spacing: 1px;
+#entityTable thead th {
+    position: sticky;
+    top: 0;
+    z-index: 6;
+    background-color: var(--surface-variant);
     color: var(--on-surface-variant);
-    border-bottom: 1px solid var(--border);
+    padding: 0.65rem 1rem;
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.75px;
+    border-bottom: 2px solid var(--border);
     font-weight: 600;
 }
 
 td {
-    padding: 1rem;
-    font-size: 0.95rem;
+    padding: 0.65rem 1rem;
+    font-size: 0.88rem;
     border-bottom: 1px solid var(--border);
     color: var(--on-surface);
     vertical-align: middle;
 }
 
 .entity-row td {
-    padding: 0.6rem 0.85rem;
+    padding: 0.5rem 0.85rem;
 }
 
 tr:last-child td {
@@ -356,94 +573,273 @@ tr {
     transition: background 0.15s;
 }
 
-tr:hover td {
-    background-color: rgba(255, 255, 255, 0.02);
+.entity-row:hover td {
+    background-color: rgba(255, 255, 255, 0.03);
 }
 
-/* Custom Badges (MD3 Chips) */
-.badge {
-    display: inline-flex;
-    align-items: center;
-    padding: 0.25rem 0.75rem;
-    border-radius: 8px;
-    font-size: 0.8rem;
-    font-weight: 500;
-    letter-spacing: 0.25px;
-    cursor: pointer;
-    transition: opacity 0.15s;
+/* Sticky Group Header Rows */
+.domain-header-row td,
+.room-header-row td {
+    position: sticky;
+    top: 35px;
+    z-index: 5;
+    background-color: var(--surface-variant);
+    border-bottom: 1px solid var(--border);
+    padding: 0.5rem 1rem !important;
 }
 
-.badge:hover {
-    opacity: 0.85;
+.domain-header-cell {
+    font-weight: 700;
+    font-size: 0.88rem;
+    color: var(--primary);
+    vertical-align: middle;
 }
 
-.badge-exposed {
-    background-color: var(--success-container);
-    color: var(--on-success-container);
+.room-header-cell {
+    font-weight: 600;
+    font-size: 0.85rem;
+    color: var(--on-surface);
+    vertical-align: middle;
 }
 
-.badge-not-exposed {
-    background-color: var(--surface-variant);
-    color: var(--on-surface-variant);
-    border: 1px solid var(--border);
+/* Entity Column */
+.entity-info-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
 }
 
-.alias-badge {
+.entity-icon-badge {
+    width: 2.2rem;
+    height: 2.2rem;
+    border-radius: 50%;
     background-color: var(--surface-variant);
-    color: var(--on-surface);
-    border: 1px solid var(--border);
-    margin-right: 0.25rem;
-    margin-bottom: 0.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.95rem;
+    color: var(--primary);
+    flex-shrink: 0;
 }
 
-/* Merged Entity Info Column */
-.entity-info-cell {
-    vertical-align: middle;
+.entity-text-block {
+    display: flex;
+    flex-direction: column;
+    gap: 0.15rem;
+    min-width: 0;
 }
 
-.entity-info-wrapper {
+.entity-name-row {
     display: flex;
-    flex-direction: column;
-    gap: 0.2rem;
+    align-items: center;
+    gap: 0.4rem;
 }
 
 .entity-name {
-    font-size: 0.95rem;
+    font-size: 0.9rem;
     font-weight: 600;
     color: var(--on-surface);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
-.inline-edit-name-btn {
-    opacity: 0.2;
-    transition: opacity 0.15s, color 0.15s;
+.entity-id-row {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
 }
 
-.entity-name-wrapper:hover .inline-edit-name-btn {
-    opacity: 1;
-    color: var(--primary) !important;
+.entity-id-badge {
+    font-family: monospace;
+    font-size: 0.75rem;
+    color: var(--on-surface-variant);
+    background-color: var(--surface-variant);
+    padding: 0.1rem 0.4rem;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: color 0.15s;
 }
 
-.entity-id-subtext {
+.entity-id-badge:hover {
+    color: var(--primary);
+}
+
+.badge-unavailable {
+    background-color: rgba(255, 180, 171, 0.15);
+    color: var(--danger);
+    padding: 0.1rem 0.35rem;
+    border-radius: 4px;
+    font-size: 0.7rem;
+    font-weight: 600;
+}
+
+/* Nicknames / Aliases Column */
+.aliases-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    flex-wrap: wrap;
+}
+
+.aliases-badges-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.3rem;
+}
+
+.alias-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+    background-color: var(--surface-variant);
+    color: var(--on-surface);
+    border: 1px solid var(--border);
+    padding: 0.2rem 0.55rem;
+    border-radius: 8px;
     font-size: 0.8rem;
+    font-weight: 500;
+}
+
+.alias-delete-btn {
+    cursor: pointer;
     color: var(--on-surface-variant);
+    font-size: 0.75rem;
+    display: flex;
+    align-items: center;
 }
 
-.room-cell {
-    font-weight: 500;
+.alias-delete-btn:hover {
+    color: var(--danger);
+}
+
+.inline-add-alias-btn {
+    background-color: var(--surface-variant);
+    border: 1px dashed var(--outline);
+    color: var(--on-surface-variant);
+    border-radius: 6px;
+    padding: 0.2rem 0.55rem;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+    cursor: pointer;
+    font-size: 0.75rem;
+    transition: all 0.2s;
+    white-space: nowrap;
+}
+
+.inline-add-alias-btn:hover {
+    background-color: var(--primary-container);
+    color: var(--on-primary-container);
+    border-color: var(--primary);
+}
+
+.ai-suggest-single-btn {
+    background: none;
+    border: 1px solid var(--border);
+    color: var(--primary);
+    border-radius: 50%;
+    width: 1.5rem;
+    height: 1.5rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    font-size: 0.75rem;
+    transition: all 0.2s;
+}
+
+.ai-suggest-single-btn:hover {
+    background-color: var(--primary-container);
+    color: var(--on-primary-container);
+    border-color: var(--primary);
+}
+
+.inline-alias-input-container {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    background-color: var(--surface-variant);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: 0.15rem 0.25rem;
+}
+
+.inline-alias-input {
+    background: transparent;
+    border: none;
     color: var(--on-surface);
+    font-family: var(--font-main);
+    font-size: 0.82rem;
+    padding: 0.1rem 0.3rem;
+    outline: none;
+    width: 120px;
 }
 
-.domain-header-row {
-    background-color: transparent;
-    border-bottom: 1px solid var(--border);
+.inline-alias-submit-btn,
+.inline-alias-cancel-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 0.75rem;
+    padding: 0.2rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
 }
 
-.domain-header-cell {
-    padding: 0.5rem 1rem !important;
-    vertical-align: middle;
+.inline-alias-submit-btn {
+    color: var(--success);
 }
 
-/* Action controls */
+.inline-alias-cancel-btn {
+    color: var(--danger);
+}
+
+/* Exposed Status Column */
+.status-cell-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.35rem;
+}
+
+.badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.2rem 0.6rem;
+    border-radius: 6px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    letter-spacing: 0.25px;
+    cursor: default;
+    white-space: nowrap;
+}
+
+.badge-exposed {
+    background-color: var(--success-container);
+    color: var(--on-success-container);
+}
+
+.badge-not-exposed {
+    background-color: var(--surface-variant);
+    color: var(--on-surface-variant);
+    border: 1px solid var(--border);
+}
+
+.badge-pending-expose {
+    background-color: var(--warning-container);
+    color: var(--on-warning-container);
+    border: 1px solid #7a5900;
+}
+
+.badge-pending-remove {
+    background-color: var(--danger-container);
+    color: var(--on-danger-container);
+}
+
+/* Actions Column */
 .action-cell {
     text-align: center;
 }
@@ -453,22 +849,22 @@ tr:hover td {
     border: none;
     color: var(--on-surface-variant);
     cursor: pointer;
-    font-size: 1.1rem;
+    font-size: 1rem;
     transition: all 0.2s;
-    width: 2.2rem;
-    height: 2.2rem;
-    border-radius: 100px;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
     display: inline-flex;
     align-items: center;
     justify-content: center;
 }
 
 .action-btn:hover {
-    color: var(--primary);
+    color: var(--danger);
     background-color: var(--surface-variant);
 }
 
-/* Modal Window */
+/* Modal Dialogs */
 .modal {
     display: none;
     position: fixed;
@@ -478,27 +874,28 @@ tr:hover td {
     width: 100%;
     height: 100%;
     overflow: auto;
-    background-color: rgba(0, 0, 0, 0.7);
+    background-color: rgba(0, 0, 0, 0.65);
+    backdrop-filter: blur(6px);
 }
 
 .modal-content {
     background-color: var(--surface);
     border: 1px solid var(--border);
-    margin: 10% auto;
-    padding: 1.75rem;
+    margin: 6vh auto;
+    padding: 1.5rem;
     width: 100%;
-    max-width: 500px;
-    border-radius: 24px;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+    max-width: 540px;
+    border-radius: 20px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
     display: flex;
     flex-direction: column;
-    gap: 1.25rem;
+    gap: 1rem;
     animation: slideDown 0.2s cubic-bezier(0.2, 0, 0, 1);
 }
 
 @keyframes slideDown {
     from {
-        transform: translateY(-20px);
+        transform: translateY(-16px);
         opacity: 0;
     }
     to {
@@ -512,17 +909,17 @@ tr:hover td {
     justify-content: space-between;
     align-items: center;
     border-bottom: 1px solid var(--border);
-    padding-bottom: 0.75rem;
+    padding-bottom: 0.65rem;
 }
 
 .modal-header h2 {
-    font-size: 1.25rem;
+    font-size: 1.15rem;
     font-weight: 600;
     color: var(--on-surface);
 }
 
 .close-modal {
-    font-size: 1.3rem;
+    font-size: 1.25rem;
     cursor: pointer;
     color: var(--on-surface-variant);
 }
@@ -531,28 +928,35 @@ tr:hover td {
     color: var(--on-surface);
 }
 
+.modal-body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.85rem;
+    max-height: 70vh;
+    overflow-y: auto;
+}
+
 .form-group {
     display: flex;
     flex-direction: column;
-    gap: 0.4rem;
-    margin-bottom: 1rem;
+    gap: 0.35rem;
 }
 
 .form-group label {
-    font-size: 0.85rem;
+    font-size: 0.82rem;
     font-weight: 500;
     color: var(--on-surface-variant);
 }
 
 .form-input {
     width: 100%;
-    padding: 0.65rem 0.85rem;
+    padding: 0.6rem 0.8rem;
     background-color: var(--surface-variant);
     border: 1px solid transparent;
     border-radius: 8px;
     color: var(--on-surface);
     font-family: var(--font-main);
-    font-size: 0.95rem;
+    font-size: 0.9rem;
     outline: none;
     transition: all 0.2s;
 }
@@ -562,60 +966,16 @@ tr:hover td {
 }
 
 .form-input:disabled {
-    background-color: rgba(255, 255, 255, 0.02);
-    color: var(--on-surface-variant);
+    opacity: 0.6;
     cursor: not-allowed;
 }
 
-.alias-badges-container {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.4rem;
-    min-height: 20px;
-    margin-bottom: 0.25rem;
-}
-
-.alias-badge-edit {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.4rem;
-    background-color: var(--primary-container);
-    color: var(--on-primary-container);
-    padding: 0.25rem 0.6rem;
-    border-radius: 8px;
-    font-size: 0.82rem;
-}
-
-.alias-badge-edit i {
-    cursor: pointer;
-    font-size: 0.75rem;
-}
-
-.alias-badge-edit i:hover {
-    color: var(--danger);
-}
-
-.alias-input-wrapper {
-    display: flex;
-    gap: 0.5rem;
-}
-
-.alias-input-wrapper input {
-    flex: 1;
-}
-
-.toggle-group {
-    background-color: var(--surface-variant);
-    padding: 0.85rem 1rem;
-    border-radius: 12px;
-}
-
 .modal-actions {
     display: flex;
     justify-content: flex-end;
-    gap: 0.75rem;
+    gap: 0.65rem;
     border-top: 1px solid var(--border);
-    padding-top: 1rem;
+    padding-top: 0.85rem;
 }
 
 /* Spinner and loading states */
@@ -625,13 +985,13 @@ tr:hover td {
 }
 
 .spinner {
-    width: 2rem;
-    height: 2rem;
+    width: 1.8rem;
+    height: 1.8rem;
     border: 3px solid rgba(255, 255, 255, 0.1);
     border-top-color: var(--primary);
     border-radius: 50%;
     animation: spin 0.8s infinite linear;
-    margin: 0 auto 0.75rem;
+    margin: 0 auto 0.65rem;
 }
 
 @keyframes spin {
@@ -640,21 +1000,22 @@ tr:hover td {
 
 .toast {
     position: fixed;
-    bottom: 2rem;
-    right: 2rem;
+    bottom: 1.5rem;
+    right: 1.5rem;
     background-color: var(--surface);
     border: 1px solid var(--border);
     border-left: 4px solid var(--primary);
-    padding: 0.85rem 1.25rem;
-    border-radius: 12px;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+    padding: 0.75rem 1.15rem;
+    border-radius: 10px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
     z-index: 2000;
     display: flex;
     align-items: center;
-    gap: 0.75rem;
+    gap: 0.65rem;
     transform: translateY(100px);
     opacity: 0;
     transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
+    font-size: 0.85rem;
 }
 
 .toast.show {
@@ -670,197 +1031,12 @@ tr:hover td {
     border-left-color: var(--danger);
 }
 
-/* Floor & Room Group Header Styles (Material Design 3 Collapsible) */
-.floor-header-row {
-    background-color: var(--surface-variant);
-    border-bottom: 1px solid var(--border);
-}
-
-.floor-header-cell {
-    padding: 0.75rem 1rem !important;
-    font-weight: 700;
-    font-size: 0.95rem;
-    color: var(--primary);
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    vertical-align: middle;
-}
-
-.room-header-row {
-    background-color: transparent;
-    border-bottom: 1px solid var(--border);
-}
-
-.room-header-cell {
-    padding: 0.65rem 1.25rem !important;
-    font-weight: 600;
-    font-size: 0.9rem;
-    color: var(--on-surface);
-    border-left: 3px solid var(--primary);
-    vertical-align: middle;
-}
-
-/* Info Alert Bar */
-.info-alert-bar {
-    background-color: var(--info-container);
-    border-left: 4px solid var(--info);
-    padding: 0.85rem 1.25rem;
-    border-radius: 12px;
-    display: flex;
-    align-items: flex-start;
-    gap: 0.75rem;
-    font-size: 0.88rem;
-    line-height: 1.4;
-    color: var(--on-info-container);
-}
-
-.info-alert-bar i {
-    color: var(--info);
-    font-size: 1rem;
-    margin-top: 0.1rem;
-}
-
-/* Pending Sync Status Badges */
-.badge-pending-expose {
-    background-color: #563e00;
-    color: #ffde9e;
-    border: 1px solid #7a5900;
-}
-
-.badge-pending-remove {
-    background-color: var(--danger-container);
-    color: var(--on-danger-container);
-}
-
-/* Inline Aliases / Nicknames Styling */
-.aliases-wrapper {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    flex-wrap: wrap;
-}
-
-.aliases-badges-list {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.25rem;
-}
-
-.no-aliases {
-    color: var(--on-surface-variant);
-    font-size: 0.85rem;
-    font-style: italic;
-}
-
-.inline-add-alias-btn {
-    background-color: var(--surface-variant);
-    border: 1px dashed var(--outline);
-    color: var(--on-surface-variant);
-    border-radius: 50%;
-    width: 1.5rem;
-    height: 1.5rem;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    font-size: 0.75rem;
-    transition: all 0.2s;
-}
-
-.inline-add-alias-btn:hover {
-    background-color: var(--primary);
-    color: #003062;
-    border-color: var(--primary);
-    transform: scale(1.05);
-}
-
-.ai-suggest-single-btn {
-    border-style: solid;
-    color: var(--primary);
-}
-
-.ai-suggest-single-btn:hover {
-    background-color: var(--primary-container);
-    color: var(--on-primary-container);
-    border-color: var(--primary);
-}
-
-.inline-alias-input-container {
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
-    background-color: var(--surface-variant);
-    border: 1px solid var(--border);
-    border-radius: 6px;
-    padding: 0.15rem 0.25rem;
-}
-
-.inline-alias-input {
-    background: transparent;
-    border: none;
-    color: var(--on-surface);
-    font-family: var(--font-main);
-    font-size: 0.85rem;
-    padding: 0.1rem 0.3rem;
-    outline: none;
-    width: 110px;
-}
-
-.inline-alias-submit-btn,
-.inline-alias-cancel-btn {
-    background: none;
-    border: none;
-    cursor: pointer;
-    font-size: 0.75rem;
-    padding: 0.2rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 4px;
-    transition: background 0.15s;
-}
-
-.inline-alias-submit-btn {
-    color: var(--success);
-}
-
-.inline-alias-submit-btn:hover {
-    background-color: rgba(61, 220, 132, 0.15);
-}
-
-.inline-alias-cancel-btn {
-    color: var(--danger);
-}
-
-.inline-alias-cancel-btn:hover {
-    background-color: rgba(255, 180, 171, 0.15);
-}
-
-/* Domain Filter Chips */
-.domain-chip {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.35rem;
-    padding: 0.35rem 0.8rem;
-    border-radius: 100px;
-    font-size: 0.8rem;
-    font-weight: 500;
-    cursor: pointer;
-    border: 1px solid var(--border);
-    background-color: var(--surface);
-    color: var(--on-surface-variant);
-    transition: all 0.2s ease;
-    user-select: none;
-}
-
-.domain-chip:hover {
-    background-color: var(--surface-variant);
-    color: var(--on-surface);
-}
-
-.domain-chip.active {
-    background-color: var(--primary-container);
-    color: var(--on-primary-container);
-    border-color: var(--primary);
+/* Responsive adjustments */
+@media (max-width: 900px) {
+    .stats-container {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    .app-container {
+        padding: 0.5rem 0.75rem;
+    }
 }
-
diff --git a/docs/screenshots/console-overview.png b/docs/screenshots/console-overview.png
new file mode 100644
index 0000000..81faf26
Binary files /dev/null and b/docs/screenshots/console-overview.png differ
diff --git a/docs/screenshots/console-search-filtered.png b/docs/screenshots/console-search-filtered.png
new file mode 100644
index 0000000..57f3011
Binary files /dev/null and b/docs/screenshots/console-search-filtered.png differ
diff --git a/docs/superpowers/plans/2026-10-13-google-entity-console-redesign.md b/docs/superpowers/plans/2026-10-13-google-entity-console-redesign.md
new file mode 100644
index 0000000..560357d
--- /dev/null
+++ b/docs/superpowers/plans/2026-10-13-google-entity-console-redesign.md
@@ -0,0 +1,304 @@
+# Google Assistant Entity Console Redesign Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Fix the 150px iframe viewport cutoff bug and modernize the Google Assistant Entity Console into a full-height, responsive UI with sticky search/filter toolbar and sticky group headers.
+
+**Architecture:** Configure `<google-assistant-entity-console-panel>` with host block/100% styles in `panel.js`; restructure `index.html` and `style.css` into a 100vh flexbox container with fixed top bar, sticky controls, and internally scrollable table; enhance `app.js` with sticky headers, live counters, and inline alias chips.
+
+**Tech Stack:** JavaScript (ES6+), HTML5, CSS3 (CSS Variables, Flexbox, Sticky Positioning, FontAwesome 6), Home Assistant Custom Component Panel.
+
+## Global Constraints
+
+- Preserve all existing API endpoints and backend compatibility in `views.py`.
+- Preserve the `postMessage` token refresh mechanism (`REQUEST_HA_TOKEN` / `HA_TOKEN_UPDATE`).
+- Do not introduce breaking changes to existing localStorage/sessionStorage keys (`ha_token`, filter selections).
+- Support both Home Assistant Dark and Light themes through native HA CSS variables.
+- Strictly prevent double scrollbars: outer container is `overflow: hidden;`, table container is `overflow-y: auto;`.
+
+---
+
+### Task 1: Fix Viewport Container & Panel Mounting in `panel.js`
+
+**Files:**
+- Modify: `custom_components/google_assistant_entity_console/static/panel.js:20-41`
+
+**Interfaces:**
+- Consumes: Home Assistant custom panel lifecycle (`connectedCallback`, `set hass`).
+- Produces: Fully expanded, full-height custom element and iframe without falling back to 150px.
+
+- [ ] **Step 1: Inspect current `panel.js` code and identify missing styles**
+
+Verify current contents in `custom_components/google_assistant_entity_console/static/panel.js`. Note that `connectedCallback` and `set hass` do not apply styles to `this`.
+
+- [ ] **Step 2: Add host element full-height styling and iframe layout styling**
+
+In `panel.js`, update `connectedCallback`:
+```javascript
+connectedCallback() {
+  this.style.display = 'block';
+  this.style.position = 'absolute';
+  this.style.top = '0';
+  this.style.left = '0';
+  this.style.width = '100%';
+  this.style.height = '100%';
+  this.style.overflow = 'hidden';
+  this.style.boxSizing = 'border-box';
+  window.addEventListener('message', this._messageListener);
+}
+```
+And in `set hass(hass)`:
+```javascript
+if (!this._iframe) {
+  this._iframe = document.createElement('iframe');
+  this._iframe.style.width = '100%';
+  this._iframe.style.height = '100%';
+  this._iframe.style.border = '0';
+  this._iframe.style.display = 'block';
+  this._iframe.style.overflow = 'hidden';
+  this.appendChild(this._iframe);
+}
+```
+
+- [ ] **Step 3: Verify syntax in node/browser**
+
+Run: `node -c custom_components/google_assistant_entity_console/static/panel.js`
+Expected: Exits with code 0 without syntax errors.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add custom_components/google_assistant_entity_console/static/panel.js
+git commit -m "fix(console): prevent 150px height collapse in panel.js"
+```
+
+---
+
+### Task 2: Modernize HTML Shell & Sticky Toolbar Markup in `index.html`
+
+**Files:**
+- Modify: `custom_components/google_assistant_entity_console/static/index.html:20-155`
+
+**Interfaces:**
+- Consumes: CSS classes and DOM IDs used by `app.js`.
+- Produces: Semantic layout containing fixed header, compact stats ribbon, pinned filter toolbar, and scrollable table container.
+
+- [ ] **Step 1: Refactor header and action buttons**
+
+Update `<header>` in `index.html`:
+- Retain logo and title.
+- Add pending changes badge element (`<span id="pendingChangesBadge" class="badge-pending" style="display: none;">0 Pending</span>`).
+- Organize action buttons: `AI Settings`, `Manage Blocklist`, `Sync & Rebuild`.
+
+- [ ] **Step 2: Restructure KPI stats ribbon**
+
+Streamline `.stats-container` to be a compact horizontal strip:
+- Total Entities (`#totalEntities`)
+- Exposed to Google (`#exposedEntities`)
+- Pending Sync (`#pendingEntitiesCount`)
+- Active YAML Config (`#configFile`)
+
+- [ ] **Step 3: Update sticky filter toolbar structure**
+
+Refactor `.controls-container`:
+- Search box with input `#searchInput`, clear button `#clearSearchBtn`, and match counter `#filterMatchCount`.
+- Filter row containing `#roomFilter`, `#groupingType`, `#exposedOnlyCheckbox`, and `#toggleAdvancedFiltersBtn`.
+- Advanced filters drawer `#advancedFiltersDrawer` with `#hideGroupedLightsCheckbox`, `#hideUnavailableCheckbox`, and `#domainChipsContainer`.
+
+- [ ] **Step 4: Update table container markup**
+
+Ensure `#entityTable` is wrapped in `<main class="table-container" id="tableContainer">` with sticky table header `<thead>`:
+- Entity (40%)
+- Nicknames / Aliases (35%)
+- Exposed Status (15%)
+- Actions (10%)
+
+- [ ] **Step 5: Verify HTML validity**
+
+Check closing tags and IDs match those expected by `app.js`.
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add custom_components/google_assistant_entity_console/static/index.html
+git commit -m "feat(console): modernize HTML shell structure and sticky toolbar"
+```
+
+---
+
+### Task 3: Overhaul CSS for 100vh Flex Shell & Sticky Elements in `style.css`
+
+**Files:**
+- Modify: `custom_components/google_assistant_entity_console/static/style.css`
+
+**Interfaces:**
+- Consumes: CSS variables from Home Assistant theme (`--primary-background-color`, `--card-background-color`, etc.).
+- Produces: Zero-scroll body, sticky toolbar, sticky table headers, sticky group headers, and Material 3 cards.
+
+- [ ] **Step 1: Set up root and viewport shell styles**
+
+In `style.css`:
+```css
+html, body {
+  height: 100%;
+  max-height: 100vh;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  background-color: var(--primary-background-color, #111318);
+  font-family: var(--font-main);
+  color: var(--primary-text-color, #e2e2e9);
+}
+
+.app-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  width: 100%;
+  max-width: 100%;
+  margin: 0;
+  padding: 1rem 1.5rem 0.5rem 1.5rem;
+  box-sizing: border-box;
+  gap: 0.75rem;
+  overflow: hidden;
+}
+```
+
+- [ ] **Step 2: Add styles for header, compact stats ribbon, and sticky toolbar**
+
+Style:
+- `header`: compact padding (`0.75rem 1.25rem`), border radius, flex-wrap responsive.
+- `.stats-container`: compact flex row, high-density cards (`padding: 0.5rem 1rem`).
+- `.controls-container`: pinned with `position: relative`, `background: var(--surface)`, `border-radius: 12px`, `padding: 0.75rem 1rem`.
+
+- [ ] **Step 3: Add styles for scrollable table container and sticky headers**
+
+Style:
+```css
+.table-container {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background-color: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  position: relative;
+}
+
+#entityTable {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+}
+
+#entityTable thead th {
+  position: sticky;
+  top: 0;
+  z-index: 5;
+  background-color: var(--surface-variant);
+  border-bottom: 2px solid var(--border);
+  padding: 0.75rem 1rem;
+}
+
+.domain-header-row td,
+.room-header-row td {
+  position: sticky;
+  top: 41px;
+  z-index: 4;
+  background-color: var(--surface-variant);
+  border-bottom: 1px solid var(--border);
+}
+```
+
+- [ ] **Step 4: Style modern alias chips, toggles, badges, and modals**
+
+Style:
+- `.alias-chip` with hover delete button `✕`.
+- `.btn-add-alias` inline button.
+- Status badges: `.badge-exposed`, `.badge-unexposed`, `.badge-pending-add`, `.badge-pending-remove`.
+- Modal backdrop blur: `backdrop-filter: blur(6px); background: rgba(0, 0, 0, 0.6);`.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add custom_components/google_assistant_entity_console/static/style.css
+git commit -m "feat(console): overhaul CSS for 100vh flex shell and sticky headers"
+```
+
+---
+
+### Task 4: Enhance Interactive Controls & Rendering in `app.js`
+
+**Files:**
+- Modify: `custom_components/google_assistant_entity_console/static/app.js`
+
+**Interfaces:**
+- Consumes: Entity data from `/google_assistant_entity_console/entities` and state tracking.
+- Produces: Dynamic match counts, sticky group rendering, inline alias add/delete, and pending badges.
+
+- [ ] **Step 1: Add live match counter and search clear handler**
+
+In `app.js`:
+- In `applyFilters()`, calculate filtered entity count vs total entities and update `#filterMatchCount` (e.g. `Showing 42 of 180 entities`).
+- Connect `#clearSearchBtn` click event to clear `#searchInput` and re-apply filters.
+
+- [ ] **Step 2: Update table and group row rendering**
+
+In `renderTable()`:
+- Update `.domain-header-cell` and `.room-header-cell` markup to include entity count pills and clean collapsible chevron styling.
+- When rendering entity rows in `renderEntityRow(e)`:
+  - Add inline `+ Add` alias button that turns into an input on click.
+  - Add quick copy button for `entity_id`.
+  - Display pending status badges (`Pending Add` or `Pending Remove`) and update the pending counter in header.
+
+- [ ] **Step 3: Update pending state tracker and Rebuild button badge**
+
+Track total pending additions and removals:
+- Update `#pendingChangesBadge` visibility and text.
+- If pending count > 0, highlight `#rebuildBtn` to indicate unsaved YAML changes.
+
+- [ ] **Step 4: Verify JavaScript syntax**
+
+Run: `node -c custom_components/google_assistant_entity_console/static/app.js`
+Expected: Exits with code 0 without syntax errors.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add custom_components/google_assistant_entity_console/static/app.js
+git commit -m "feat(console): enhance interactive table rendering and pending state"
+```
+
+---
+
+### Task 5: Cache Busting Version Bump & End-to-End Verification
+
+**Files:**
+- Modify: `custom_components/google_assistant_entity_console/manifest.json`
+- Modify: `custom_components/google_assistant_entity_console/__init__.py`
+
+**Interfaces:**
+- Consumes: HA component registration.
+- Produces: Incremented cache-busting version `1.9.0` so browsers load updated assets without stale cache.
+
+- [ ] **Step 1: Bump version in manifest.json**
+
+Change `"version": "1.8.0"` to `"version": "1.9.0"`.
+
+- [ ] **Step 2: Restart / reload custom component or HA container**
+
+Run docker command or reload integration to ensure Home Assistant serves the new files.
+
+- [ ] **Step 3: End-to-end verification via Chrome DevTools or curl**
+
+Verify:
+- Panel HTML and assets return HTTP 200 with new version query strings.
+- DOM renders full-height without 150px clipping.
+- Filter toolbar and sticky headers remain pinned during scroll.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add custom_components/google_assistant_entity_console/manifest.json custom_components/google_assistant_entity_console/__init__.py
+git commit -m "chore(console): bump version to 1.9.0 for asset cache busting"
+```
diff --git a/docs/superpowers/specs/2026-10-13-google-entity-console-redesign.md b/docs/superpowers/specs/2026-10-13-google-entity-console-redesign.md
new file mode 100644
index 0000000..3b0feb6
--- /dev/null
+++ b/docs/superpowers/specs/2026-10-13-google-entity-console-redesign.md
@@ -0,0 +1,153 @@
+# Google Assistant Entity Console — UI Rework & Layout Fix Specification
+
+- **Date**: 2026-10-13
+- **Component**: `custom_components/google_assistant_entity_console`
+- **Target URL Path**: `/google_assistant_entity_console`
+- **Status**: Approved Design
+
+---
+
+## 1. Problem Statement & Root Cause
+
+### 1.1 The Viewport Cut-off Bug
+In Home Assistant, the custom panel registered via `async_register_built_in_panel` mounts `<google-assistant-entity-console-panel>` into `<ha-panel-custom>`.
+- In `panel.js`, the custom element `GoogleAssistantEntityConsolePanel` does not specify host styling (`display: block; width: 100%; height: 100%`).
+- By default, custom HTML elements are `display: inline;`.
+- The child `iframe` has `height: 100%`. Under standard CSS specifications, a child percentage height inside an element with unresolved/inline height falls back to the browser intrinsic default iframe height of **150px**.
+- As a consequence, the console UI renders inside a 150px window, clipping everything immediately below the top header cards.
+
+### 1.2 UX Limitations in Current Design
+- **Rigid Centered Width**: `index.html` wraps the entire app in `max-width: 1200px`, creating giant empty side gutters on widescreen displays and cramped columns on medium viewports.
+- **Lost Controls on Scroll**: As users scroll down hundreds of smart home entities, the search input, room filter, and grouping controls scroll out of view, forcing constant scrolling up and down.
+- **Column Density & Wrapping**: Nickname chips and status badges cause uneven row heights without clear horizontal boundaries.
+- **Hardcoded Theme Fallbacks**: Dark-mode colors with hardcoded dark hex values cause poor contrast or visual seams when Home Assistant runs custom or light themes.
+
+---
+
+## 2. Architectural Design
+
+```
++-----------------------------------------------------------------------------------+
+| Host: <google-assistant-entity-console-panel> (display: block; width/height: 100%)|
+| Child: <iframe src="index.html"> (width: 100%; height: 100%; border: 0)          |
++-----------------------------------------------------------------------------------+
+| iframe contents (100vh flexbox container, overflow: hidden):                     |
+|                                                                                   |
+|  [Header & Action Bar]                                          (fixed height)    |
+|    - Logo + Title ("Google Assistant Entity Console")                             |
+|    - Pending Changes Badge                                                        |
+|    - AI Settings | Manage Blocklist | Sync & Rebuild Actions                      |
+|                                                                                   |
+|  [Compact KPI Stats Ribbon]                                     (fixed height)    |
+|    - Total Entities | Exposed | Unexposed | Active YAML config                    |
+|                                                                                   |
+|  [Sticky Filter & Search Toolbar]                               (sticky / pinned) |
+|    - Search input (live debounce, clear button, match counter)                   |
+|    - Room filter dropdown | Grouping selector | Exposed Only toggle               |
+|    - Advanced Filters drawer toggle (Hide Grouped, Hide Unavailable, Domain chips)|
+|                                                                                   |
+|  [Scrollable Data Grid Viewport]                                (flex: 1, auto)   |
+|    +---------------------------------------------------------------------------+  |
+|    | Sticky Table Header: [Entity] [Nicknames/Aliases] [Exposed Status][Actions|  |
+|    | Sticky Group Banner: Living Room (8 entities)                 [AI Assist] |  |
+|    |   - light.ceiling_light | [Living Room Light (x)] [+ Add] | [ON] [Exposed]|  |
+|    |   - switch.coffee_maker | [Coffee (x)]            [+ Add] | [OFF][Not Exp]|  |
+|    | Sticky Group Banner: Kitchen (5 entities)                     [AI Assist] |  |
+|    |   ...                                                                     |  |
+|    +---------------------------------------------------------------------------+  |
+|                                                                                   |
+|  [Modals: AI Settings, AI Assist, Blocklist, Restart Confirmation]                |
++-----------------------------------------------------------------------------------+
+```
+
+---
+
+## 3. Detailed Component Specifications
+
+### 3.1 Host Panel Mounting (`panel.js`)
+- Enforce full parent expansion in `connectedCallback`:
+  ```javascript
+  this.style.display = 'block';
+  this.style.width = '100%';
+  this.style.height = '100%';
+  this.style.position = 'absolute';
+  this.style.top = '0';
+  this.style.left = '0';
+  this.style.right = '0';
+  this.style.bottom = '0';
+  this.style.overflow = 'hidden';
+  this.style.boxSizing = 'border-box';
+  ```
+- Ensure `_iframe` styles are set to `width: 100%; height: 100%; border: none; display: block; overflow: hidden;`.
+- Maintain bidirectional `postMessage` token refresh handshake (`REQUEST_HA_TOKEN` / `HA_TOKEN_UPDATE`).
+
+### 3.2 Viewport Shell & Theme Integration (`style.css` & `index.html`)
+- **Container Structure**:
+  - `html, body`: `height: 100%; max-height: 100vh; margin: 0; padding: 0; overflow: hidden; background: var(--primary-background-color, #111318); font-family: var(--paper-font-common-font-family, Roboto, sans-serif); color: var(--primary-text-color, #e2e2e9);`.
+  - `.app-container`: `display: flex; flex-direction: column; height: 100vh; width: 100%; max-width: 100%; margin: 0; padding: 1.25rem 2rem 0.5rem 2rem; box-sizing: border-box; gap: 0.75rem;`.
+- **Theme Variables**:
+  - Surface backgrounds: `var(--card-background-color, #1a1c22)` and `var(--secondary-background-color, #22252c)`.
+  - Borders and dividers: `var(--divider-color, rgba(255, 255, 255, 0.12))`.
+  - Accents: `var(--primary-color, #a8c7fa)`, `var(--success-color, #3ddc84)`, `var(--error-color, #ffb4ab)`.
+
+### 3.3 Header & Sticky Filter Toolbar
+- **Header**:
+  - Sleek top bar with app icon, title, active YAML config file tag, and action buttons (`AI Settings`, `Blocklist`, `Sync & Rebuild`).
+  - Rebuild button dynamically pulses or shows a badge when there are unsaved pending exposure additions or removals.
+- **KPI Stats Ribbon**:
+  - Compact cards with clean typography and subtle icons: Total Entities, Exposed to Google, Pending Changes, Active YAML file.
+- **Sticky Controls Toolbar**:
+  - Pinned directly above the table container.
+  - Search input with clear button and live counter (`Showing X of Y entities`).
+  - Room dropdown selector, Grouping mode (`Floor & Room`, `Domain`, `Flat List`).
+  - Toggle switches: `Exposed Only`, `Pending Changes Only`.
+  - Advanced filters button with collapsible drawer for domain chips (`light`, `switch`, `climate`, `sensor`, etc.) and exclusion toggles (`Hide Grouped Lights`, `Hide Unavailable`).
+
+### 3.4 Entity Data Grid & Interactions (`app.js`)
+- **Sticky Column Headers**: Table header remains visible at `top: 0` inside the scroll container.
+- **Sticky Group Rows**:
+  - Domain or Room headers stick at `top: 38px` with clear contrast and high z-index while scrolling within that group.
+  - Group header contains fold/unfold chevron, group title, entity count badge, and a group-level `AI Assist` launcher.
+- **Interactive Row Columns**:
+  1. **Entity**: Domain icon badge, friendly name (bold), entity_id chip with copy-to-clipboard, optional `unavailable` warning indicator.
+  2. **Nicknames & Aliases**:
+     - Chips with delete button (`✕`).
+     - Inline `+ Add` button that turns into an input field on click (adds on Enter or blur).
+     - Per-entity AI sparkle button for room-aware alias generation.
+  3. **Exposed Status**:
+     - Modern toggle switch.
+     - State pill: `Exposed`, `Not Exposed`, `Pending Add` (amber), `Pending Remove` (orange).
+  4. **Actions**:
+     - Quick shortcut to add entity pattern to regex blocklist.
+
+### 3.5 Modals & Dialogs
+- Backdrop blur (`backdrop-filter: blur(6px); background: rgba(0, 0, 0, 0.6)`).
+- Centered cards with header, scrollable body (`max-height: 70vh; overflow-y: auto`), and pinned action bar.
+- Supported Modals:
+  - **AI Settings Modal**: OpenAI / HA agent selector, endpoint and key inputs, model fetcher, prompt template editors, prompt variable legend.
+  - **AI Assist Modal**: Exposure analysis with intent input, live generation spinner, review list with checkboxes, and batch apply.
+  - **Blocklist Modal**: Regex pattern list with delete buttons and add input.
+  - **Restart Confirmation Modal**: Missing include instruction card with one-click copy, confirmation buttons.
+
+---
+
+## 4. Deliverables & Files to Modify
+
+1. `custom_components/google_assistant_entity_console/static/panel.js`
+   - Fix host element positioning, width, height, and display properties.
+2. `custom_components/google_assistant_entity_console/static/index.html`
+   - Modernize shell structure, header actions, stats ribbon, sticky toolbar, and table wrapper.
+3. `custom_components/google_assistant_entity_console/static/style.css`
+   - Complete layout overhaul for 100vh viewport shell, sticky toolbar, sticky table headers/groups, MD3 chips and inputs, modal backdrops.
+4. `custom_components/google_assistant_entity_console/static/app.js`
+   - Enhance table rendering for sticky groups, live filter counters, inline alias adding, and pending badges.
+5. Cache busting version bump in `custom_components/google_assistant_entity_console/manifest.json` and `views.py`.
+
+---
+
+## 5. Verification Plan
+- Verify `<google-assistant-entity-console-panel>` expands to full height without collapsing to 150px.
+- Verify scrolling: ensure the filter toolbar stays pinned while scrolling through hundreds of entities.
+- Verify sticky group headers stick properly underneath the table header during scroll.
+- Verify search, filtering, alias adding/removing, exposure toggling, and rebuild modal workflows operate smoothly.
+- Test in both dark and light modes for contrast and legibility.