Fix restore version

CHANGELOG.md

@@ -11,6 +11,67 @@ Sections:
 
 ---
 
+## [0.6.1] - 2026-01-18
+
+### Fixed
+- Restored integrations now correctly report the restored version instead of the latest installed version.
+- Update availability is correctly recalculated after restoring a backup, allowing updates to be applied again.
+- Improved restore compatibility with backups created before version metadata was introduced.
+
+## [0.6.0] - 2026-01-18
+
+### Added
+- Restore feature with selection of the last available backups (up to 5 per domain).
+- New API endpoints to list and restore backups:
+  - `GET /api/bcs/backups?repo_id=...`
+  - `POST /api/bcs/restore?repo_id=...&backup_id=...`
+
+### Safety
+- Restoring a backup triggers a “restart required” prompt to apply the recovered integration state.
+
+### Notes
+- This is a major release milestone consolidating install/update/uninstall, backup/rollback, and restore workflows.
+
+## [0.5.11] - 2026-01-18
+
+### Added
+- Automatic backup of existing custom components before install or update.
+- Backup retention with a configurable limit per domain.
+
+### Safety
+- Automatic rollback is triggered if an install or update fails after a backup was created.
+
+## [0.5.10] - 2026-01-17
+
+### Added
+- Store view controls: Filter and Sort dropdowns alongside the existing Category selector.
+
+### Fixed
+- Search input focus is preserved while typing (cursor no longer jumps out after re-render).
+
+## [0.5.9] - 2026-01-17
+
+### Changed
+- README is now collapsible with a preview by default (Show more / Show less).
+- Improved mobile readability by keeping long README content contained without affecting the page layout.
+
+## [0.5.8] - 2026-01-17
+
+### Changed
+- Mobile UI layout stabilized to prevent horizontal shifting.
+- README rendering no longer expands the page width on mobile devices.
+- Tables and code blocks inside README now scroll within their container.
+- Floating action buttons removed to avoid UI overlap on small screens.
+- Header icon buttons improved for better visibility in light and dark mode.
+
+## [0.5.7] - 2026-01-17
+
+### Changed
+- Mobile UI improvements: removed floating action buttons to prevent overlay issues.
+- Improved responsive layout to avoid horizontal overflow (badges, URLs, descriptions).
+- README rendering on mobile is more stable (better wrapping and image scaling).
+- Header icon buttons are more readable in both light and dark mode.
+
 ## [0.5.6] - 2026-01-17
 
 ### Added

bcs.yaml

@@ -4,7 +4,7 @@ description: >
   Supports GitHub, GitLab, Gitea and Bahmcloud repositories with
   a central index, UI panel and API, similar to HACS but independent.
 
-category: Store
+category: integration
 
 author: Bahmcloud
 maintainer: Bahmcloud

custom_components/bahmcloud_store/__init__.py

@@ -39,6 +39,8 @@ async def async_setup(hass: HomeAssistant, config: dict) -> bool:
         BCSInstallView,
         BCSUpdateView,
         BCSUninstallView,
+        BCSBackupsView,
+        BCSRestoreView,
         BCSRestartView,
     )
 
@@ -49,6 +51,8 @@ async def async_setup(hass: HomeAssistant, config: dict) -> bool:
     hass.http.register_view(BCSInstallView(core))
     hass.http.register_view(BCSUpdateView(core))
     hass.http.register_view(BCSUninstallView(core))
+    hass.http.register_view(BCSBackupsView(core))
+    hass.http.register_view(BCSRestoreView(core))
     hass.http.register_view(BCSRestartView(core))
 
     await async_register_panel(
@@ -56,7 +60,7 @@ async def async_setup(hass: HomeAssistant, config: dict) -> bool:
         frontend_url_path="bahmcloud-store",
         webcomponent_name="bahmcloud-store-panel",
         # IMPORTANT: bump v to avoid caching old JS
-        module_url="/api/bahmcloud_store_static/panel.js?v=102",
+        module_url="/api/bahmcloud_store_static/panel.js?v=103",
         sidebar_title="Bahmcloud Store",
         sidebar_icon="mdi:store",
         require_admin=True,

custom_components/bahmcloud_store/core.py

@@ -30,6 +30,8 @@ DOMAIN = "bahmcloud_store"
 SIGNAL_UPDATED = f"{DOMAIN}_updated"
 RESTART_REQUIRED_ISSUE_ID = "restart_required"
 
+BACKUP_META_FILENAME = ".bcs_backup_meta.json"
+
 
 class BCSError(Exception):
     """BCS core error."""
@@ -90,6 +92,10 @@ class BCSCore:
         self._install_lock = asyncio.Lock()
         self._installed_cache: dict[str, Any] = {}
 
+        # Phase F2: backups before install/update
+        self._backup_root = Path(self.hass.config.path(".bcs_backups"))
+        self._backup_keep_per_domain: int = 5
+
     async def async_initialize(self) -> None:
         """Async initialization that avoids blocking file IO."""
         self.version = await self._read_manifest_version_async()
@@ -482,6 +488,311 @@ class BCSCore:
                 return candidate
         return None
 
+    async def _ensure_backup_root(self) -> None:
+        """Create backup root directory if needed."""
+        def _mkdir() -> None:
+            self._backup_root.mkdir(parents=True, exist_ok=True)
+
+        await self.hass.async_add_executor_job(_mkdir)
+
+    def _build_backup_meta(self, repo_id: str, domain: str) -> dict[str, object]:
+        """Build metadata for backup folders so restores can recover the stored version."""
+        inst = self.get_installed(repo_id) or {}
+        return {
+            "repo_id": repo_id,
+            "domain": domain,
+            "installed_version": inst.get("installed_version") or inst.get("ref"),
+            "installed_manifest_version": inst.get("installed_manifest_version"),
+            "ref": inst.get("ref") or inst.get("installed_version"),
+            "created_at": time.strftime("%Y-%m-%dT%H:%M:%S"),
+        }
+
+    async def _backup_domain(self, domain: str, *, meta: dict[str, object] | None = None) -> Path | None:
+        """Backup an existing domain folder.
+
+        Returns the created backup path, or None if the domain folder does not exist.
+        """
+        dest_root = Path(self.hass.config.path("custom_components"))
+        target = dest_root / domain
+
+        if not target.exists() or not target.is_dir():
+            return None
+
+        await self._ensure_backup_root()
+
+        ts = time.strftime("%Y%m%d_%H%M%S")
+        domain_root = self._backup_root / domain
+        backup_path = domain_root / ts
+
+        def _do_backup() -> None:
+            domain_root.mkdir(parents=True, exist_ok=True)
+            if backup_path.exists():
+                shutil.rmtree(backup_path, ignore_errors=True)
+            shutil.copytree(target, backup_path, dirs_exist_ok=True)
+            # Store backup metadata (kept inside backup folder; removed from target after restore).
+            if meta:
+                try:
+                    meta_path = backup_path / BACKUP_META_FILENAME
+                    meta_path.write_text(json.dumps(meta, ensure_ascii=False, indent=2), encoding='utf-8')
+                except Exception:
+                    pass
+
+            # Retention: keep only the newest N backups per domain.
+            try:
+                backups = [p for p in domain_root.iterdir() if p.is_dir()]
+                backups.sort(key=lambda p: p.name, reverse=True)
+                for old in backups[self._backup_keep_per_domain :]:
+                    shutil.rmtree(old, ignore_errors=True)
+            except Exception:
+                # Never fail install/update because of retention cleanup.
+                pass
+
+        await self.hass.async_add_executor_job(_do_backup)
+        _LOGGER.info("BCS backup created: domain=%s path=%s", domain, backup_path)
+        return backup_path
+
+    async def _restore_domain_from_backup(self, domain: str, backup_path: Path) -> None:
+        """Restore a domain folder from a backup."""
+        dest_root = Path(self.hass.config.path("custom_components"))
+        target = dest_root / domain
+
+        def _restore() -> None:
+            if not backup_path.exists() or not backup_path.is_dir():
+                return
+            if target.exists():
+                shutil.rmtree(target, ignore_errors=True)
+            shutil.copytree(backup_path, target, dirs_exist_ok=True)
+            try:
+                meta_file = target / BACKUP_META_FILENAME
+                if meta_file.exists():
+                    meta_file.unlink(missing_ok=True)
+            except Exception:
+                pass
+
+            # Do not leave backup metadata inside the restored integration folder.
+            try:
+                meta_p = target / BACKUP_META_FILENAME
+                if meta_p.exists():
+                    meta_p.unlink()
+            except Exception:
+                pass
+
+            # Do not leave backup metadata inside the live integration folder.
+            try:
+                m = target / BACKUP_META_FILENAME
+                if m.exists():
+                    m.unlink()
+            except Exception:
+                pass
+
+        await self.hass.async_add_executor_job(_restore)
+        _LOGGER.info("BCS rollback applied: domain=%s from=%s", domain, backup_path)
+
+    async def list_repo_backups(self, repo_id: str) -> list[dict[str, Any]]:
+        """List available backup sets for an installed repository.
+
+        Returns a list of items sorted newest->oldest:
+        {"id": "YYYYMMDD_HHMMSS", "label": "YYYY-MM-DD HH:MM:SS", "complete": bool, "domains": [...] }
+
+        A backup set is considered *complete* if the timestamp exists for all
+        domains of the repository.
+        """
+        inst = self.get_installed(repo_id) or {}
+        domains = inst.get("domains") or []
+        if not isinstance(domains, list) or not domains:
+            return []
+
+        dom_list = [str(d) for d in domains if str(d).strip()]
+        if not dom_list:
+            return []
+
+        # Collect timestamps per domain.
+        per_domain: dict[str, list[str]] = {}
+        for d in dom_list:
+            per_domain[d] = await self._list_domain_backup_ids(d)
+
+        # Build a map id -> domains where it exists
+        id_map: dict[str, set[str]] = {}
+        for d, ids in per_domain.items():
+            for bid in ids:
+                id_map.setdefault(bid, set()).add(d)
+
+        all_domains = set(dom_list)
+        items: list[dict[str, Any]] = []
+        for bid, present in id_map.items():
+            complete = present == all_domains
+            label = self._format_backup_id(bid)
+            meta = await self._read_backup_meta(dom_list[0], bid)
+            ver = None
+            if isinstance(meta, dict):
+                ver = meta.get("installed_version") or meta.get("ref")
+            if ver:
+                label = f"{label} ({ver})"
+            items.append({"id": bid, "label": label, "complete": complete, "domains": sorted(present), "installed_version": str(ver) if ver else None})
+
+        # Sort newest first by id (lexicographic works for timestamp format).
+        items.sort(key=lambda x: str(x.get("id") or ""), reverse=True)
+
+        # Keep newest 5 entries overall (UI expects up to 5).
+        return items[: self._backup_keep_per_domain]
+
+    async def restore_repo_backup(self, repo_id: str, backup_id: str) -> dict[str, Any]:
+        """Restore a previously created backup set for a repository."""
+        repo_id = str(repo_id or "").strip()
+        backup_id = str(backup_id or "").strip()
+        if not repo_id:
+            raise BCSInstallError("Missing repo_id")
+        if not backup_id:
+            raise BCSInstallError("Missing backup_id")
+
+        inst = self.get_installed(repo_id)
+        if not inst:
+            raise BCSInstallError("Repository is not installed")
+
+        domains = inst.get("domains") or []
+        if not isinstance(domains, list) or not domains:
+            raise BCSInstallError("No installed domains found")
+
+        dom_list = [str(d) for d in domains if str(d).strip()]
+        if not dom_list:
+            raise BCSInstallError("No installed domains found")
+
+        # Ensure the backup exists for all domains.
+        missing: list[str] = []
+        for d in dom_list:
+            p = self._backup_root / d / backup_id
+            if not p.exists() or not p.is_dir():
+                missing.append(d)
+        if missing:
+            raise BCSInstallError(f"Selected backup is not available for all domains: missing={missing}")
+
+        async with self._install_lock:
+            _LOGGER.info("BCS restore started: repo_id=%s backup_id=%s domains=%s", repo_id, backup_id, dom_list)
+
+            # Safety: create a new backup of current state before restoring.
+            for d in dom_list:
+                try:
+                    await self._backup_domain(d)
+                except Exception:
+                    _LOGGER.debug("BCS pre-restore backup failed for domain=%s", d, exc_info=True)
+
+            # Apply restore.
+            for d in dom_list:
+                await self._restore_domain_from_backup(d, self._backup_root / d / backup_id)
+
+            # Update stored installed version to the restored one (so UI shows the restored state).
+            #
+            # Backups created before 0.6.1 may not have metadata. For those legacy backups we fall back to:
+            # 1) version from the backup's manifest.json (best-effort), else
+            # 2) a synthetic marker (restored:<backup_id>) so the UI reflects a restored state and updates
+            #    remain available.
+            restored_meta = await self._read_backup_meta(dom_list[0], backup_id)
+            restored_version: str | None = None
+            restored_manifest_version: str | None = None
+
+            if isinstance(restored_meta, dict):
+                rv = restored_meta.get("installed_version") or restored_meta.get("ref")
+                if rv is not None and str(rv).strip():
+                    restored_version = str(rv).strip()
+                mv = restored_meta.get("installed_manifest_version")
+                if mv is not None and str(mv).strip():
+                    restored_manifest_version = str(mv).strip()
+
+            # Legacy backups (no meta): try to read manifest.json version from the backup folder.
+            if not restored_manifest_version:
+                restored_manifest_version = await self._read_backup_manifest_version(dom_list[0], backup_id)
+
+            # Use manifest version as a fallback display value if we don't have the exact installed ref.
+            if not restored_version and restored_manifest_version:
+                restored_version = restored_manifest_version
+
+            # Last resort: ensure the installed version changes so the UI does not keep showing the newest version.
+            if not restored_version:
+                restored_version = f"restored:{backup_id}"
+
+            repo = self.get_repo(repo_id)
+            repo_url = getattr(repo, "url", None) or ""
+
+            await self.storage.set_installed_repo(
+                repo_id=repo_id,
+                url=repo_url,
+                domains=dom_list,
+                installed_version=restored_version,
+                installed_manifest_version=restored_manifest_version,
+                ref=restored_version,
+            )
+
+            await self._refresh_installed_cache()
+            self._mark_restart_required()
+            self.signal_updated()
+
+            _LOGGER.info("BCS restore complete: repo_id=%s backup_id=%s", repo_id, backup_id)
+            return {"ok": True, "repo_id": repo_id, "backup_id": backup_id, "domains": dom_list, "restored_version": restored_version, "restart_required": True}
+
+    async def _read_backup_meta(self, domain: str, backup_id: str) -> dict[str, Any] | None:
+        """Read backup metadata for a domain backup.
+
+        Metadata is stored inside the backup folder and will be removed from the
+        live folder after restore.
+        """
+        try:
+            p = self._backup_root / domain / backup_id / BACKUP_META_FILENAME
+            if not p.exists():
+                return None
+            txt = await self.hass.async_add_executor_job(p.read_text, 'utf-8')
+            data = json.loads(txt)
+            return data if isinstance(data, dict) else None
+        except Exception:
+            return None
+
+
+    async def _read_backup_manifest_version(self, domain: str, backup_id: str) -> str | None:
+        """Best-effort: read manifest.json version from a legacy backup (no metadata)."""
+
+        def _read() -> str | None:
+            try:
+                p = self._backup_root / domain / backup_id / 'manifest.json'
+                if not p.exists():
+                    return None
+                data = json.loads(p.read_text(encoding='utf-8'))
+                v = data.get('version')
+                return str(v) if v else None
+            except Exception:
+                return None
+
+        return await self.hass.async_add_executor_job(_read)
+
+    async def _list_domain_backup_ids(self, domain: str) -> list[str]:
+        """List backup ids for a domain (newest->oldest)."""
+        domain = str(domain or "").strip()
+        if not domain:
+            return []
+
+        root = self._backup_root / domain
+
+        def _list() -> list[str]:
+            if not root.exists() or not root.is_dir():
+                return []
+            ids = [p.name for p in root.iterdir() if p.is_dir()]
+            ids.sort(reverse=True)
+            return ids
+
+        ids = await self.hass.async_add_executor_job(_list)
+        return ids[: self._backup_keep_per_domain]
+
+    @staticmethod
+    def _format_backup_id(backup_id: str) -> str:
+        """Format backup id YYYYMMDD_HHMMSS -> YYYY-MM-DD HH:MM:SS."""
+        s = str(backup_id or "").strip()
+        if len(s) != 15 or "_" not in s:
+            return s
+        try:
+            d, t = s.split("_", 1)
+            return f"{d[0:4]}-{d[4:6]}-{d[6:8]} {t[0:2]}:{t[2:4]}:{t[4:6]}"
+        except Exception:
+            return s
+
+
     async def _copy_domain_dir(self, src_domain_dir: Path, domain: str) -> None:
         dest_root = Path(self.hass.config.path("custom_components"))
         target = dest_root / domain
@@ -613,65 +924,120 @@ class BCSCore:
 
             _LOGGER.info("BCS install started: repo_id=%s ref=%s zip_url=%s", repo_id, ref, zip_url)
 
-            with tempfile.TemporaryDirectory(prefix="bcs_install_") as td:
-                tmp = Path(td)
-                zip_path = tmp / "repo.zip"
-                extract_dir = tmp / "extract"
-                extract_dir.mkdir(parents=True, exist_ok=True)
+            installed_domains: list[str] = []
+            backups: dict[str, Path] = {}
 
-                await self._download_zip(zip_url, zip_path)
-                await self._extract_zip(zip_path, extract_dir)
-
-                cc_root = self._find_custom_components_root(extract_dir)
-                if not cc_root:
-                    raise BCSInstallError("custom_components folder not found in repository ZIP")
-
-                installed_domains: list[str] = []
-                for domain_dir in cc_root.iterdir():
-                    if not domain_dir.is_dir():
-                        continue
-                    manifest = domain_dir / "manifest.json"
-                    if not manifest.exists():
-                        continue
-
-                    domain = domain_dir.name
-                    await self._copy_domain_dir(domain_dir, domain)
-                    installed_domains.append(domain)
-
-                if not installed_domains:
-                    raise BCSInstallError("No integrations found under custom_components/ (missing manifest.json)")
-
-            installed_manifest_version = await self._read_installed_manifest_version(installed_domains[0])
-            installed_version = ref
-
-            await self.storage.set_installed_repo(
-                repo_id=repo_id,
-                url=repo.url,
-                domains=installed_domains,
-                installed_version=installed_version,
-                installed_manifest_version=installed_manifest_version,
-                ref=ref,
-            )
-            await self._refresh_installed_cache()
-
-            self._mark_restart_required()
-
-            _LOGGER.info(
-                "BCS install complete: repo_id=%s domains=%s installed_ref=%s manifest_version=%s",
-                repo_id,
-                installed_domains,
-                installed_version,
-                installed_manifest_version,
-            )
-            self.signal_updated()
-            return {
-                "ok": True,
+            inst_before = self.get_installed(repo_id) or {}
+            backup_meta = {
                 "repo_id": repo_id,
-                "domains": installed_domains,
-                "installed_version": installed_version,
-                "installed_manifest_version": installed_manifest_version,
-                "restart_required": True,
+                "installed_version": inst_before.get("installed_version") or inst_before.get("ref"),
+                "installed_manifest_version": inst_before.get("installed_manifest_version"),
+                "ref": inst_before.get("ref") or inst_before.get("installed_version"),
             }
+            created_new: set[str] = set()
+
+            try:
+                with tempfile.TemporaryDirectory(prefix="bcs_install_") as td:
+                    tmp = Path(td)
+                    zip_path = tmp / "repo.zip"
+                    extract_dir = tmp / "extract"
+                    extract_dir.mkdir(parents=True, exist_ok=True)
+
+                    await self._download_zip(zip_url, zip_path)
+                    await self._extract_zip(zip_path, extract_dir)
+
+                    cc_root = self._find_custom_components_root(extract_dir)
+                    if not cc_root:
+                        raise BCSInstallError("custom_components folder not found in repository ZIP")
+
+                    dest_root = Path(self.hass.config.path("custom_components"))
+
+                    for domain_dir in cc_root.iterdir():
+                        if not domain_dir.is_dir():
+                            continue
+                        manifest = domain_dir / "manifest.json"
+                        if not manifest.exists():
+                            continue
+
+                        domain = domain_dir.name
+                        target = dest_root / domain
+
+                        # Backup only if we are going to overwrite an existing domain.
+                        if target.exists() and target.is_dir():
+                            m = dict(backup_meta)
+                            m["domain"] = domain
+                            bkp = await self._backup_domain(domain, meta=m)
+                            if bkp:
+                                backups[domain] = bkp
+                        else:
+                            created_new.add(domain)
+
+                        await self._copy_domain_dir(domain_dir, domain)
+                        installed_domains.append(domain)
+
+                    if not installed_domains:
+                        raise BCSInstallError("No integrations found under custom_components/ (missing manifest.json)")
+
+                installed_manifest_version = await self._read_installed_manifest_version(installed_domains[0])
+                installed_version = ref
+
+                await self.storage.set_installed_repo(
+                    repo_id=repo_id,
+                    url=repo.url,
+                    domains=installed_domains,
+                    installed_version=installed_version,
+                    installed_manifest_version=installed_manifest_version,
+                    ref=ref,
+                )
+                await self._refresh_installed_cache()
+
+                self._mark_restart_required()
+
+                _LOGGER.info(
+                    "BCS install complete: repo_id=%s domains=%s installed_ref=%s manifest_version=%s",
+                    repo_id,
+                    installed_domains,
+                    installed_version,
+                    installed_manifest_version,
+                )
+                self.signal_updated()
+                return {
+                    "ok": True,
+                    "repo_id": repo_id,
+                    "domains": installed_domains,
+                    "installed_version": installed_version,
+                    "installed_manifest_version": installed_manifest_version,
+                    "restart_required": True,
+                }
+
+            except Exception as e:
+                # Roll back any domains we touched.
+                _LOGGER.error("BCS install failed, attempting rollback: repo_id=%s error=%s", repo_id, e)
+
+                dest_root = Path(self.hass.config.path("custom_components"))
+
+                # Restore backed-up domains.
+                for domain, bkp in backups.items():
+                    try:
+                        await self._restore_domain_from_backup(domain, bkp)
+                    except Exception:
+                        _LOGGER.debug("BCS rollback failed for domain=%s", domain, exc_info=True)
+
+                # Remove newly created domains if the install did not complete.
+                for domain in created_new:
+                    try:
+                        target = dest_root / domain
+                        def _rm() -> None:
+                            if target.exists() and target.is_dir():
+                                shutil.rmtree(target, ignore_errors=True)
+                        await self.hass.async_add_executor_job(_rm)
+                    except Exception:
+                        _LOGGER.debug("BCS cleanup failed for new domain=%s", domain, exc_info=True)
+
+                # Re-raise as install error for clean API response.
+                if isinstance(e, BCSInstallError):
+                    raise
+                raise BCSInstallError(str(e)) from e
 
     async def update_repo(self, repo_id: str) -> dict[str, Any]:
         _LOGGER.info("BCS update started: repo_id=%s", repo_id)

custom_components/bahmcloud_store/manifest.json

@@ -1,7 +1,7 @@
 {
   "domain": "bahmcloud_store",
   "name": "Bahmcloud Store",
-  "version": "0.5.6",
+  "version": "0.6.1",
   "documentation": "https://git.bahmcloud.de/bahmcloud/bahmcloud_store",
   "platforms": ["update"],
   "requirements": [],

custom_components/bahmcloud_store/panel/panel.js

@@ -15,16 +15,20 @@ class BahmcloudStorePanel extends HTMLElement {
 
     this._search = "";
     this._category = "all";
-    this._provider = "all"; // all|github|gitea|gitlab|other|custom
+    this._filter = "all"; // all|installed|not_installed|updates|custom
+    this._sort = "az"; // az|updates_first|installed_first
 
     this._detailRepoId = null;
     this._detailRepo = null;
-
     this._readmeLoading = false;
     this._readmeText = null;
     this._readmeHtml = null;
     this._readmeError = null;
 
+    // README UX (E2)
+    this._readmeExpanded = false;
+    this._readmeCanToggle = false;
+
     this._refreshing = false;
 
     this._installingRepoId = null;
@@ -32,6 +36,15 @@ class BahmcloudStorePanel extends HTMLElement {
     this._uninstallingRepoId = null;
     this._restartRequired = false;
     this._lastActionMsg = null;
+
+    // Phase F2.1: restore from backups
+    this._restoreOpen = false;
+    this._restoreRepoId = null;
+    this._restoreLoading = false;
+    this._restoreOptions = [];
+    this._restoreSelected = "";
+    this._restoring = false;
+    this._restoreError = null;
   }
 
   set hass(hass) {
@@ -171,6 +184,90 @@ class BahmcloudStorePanel extends HTMLElement {
     }
   }
 
+
+
+  async _openRestore(repoId) {
+    if (!this._hass) return;
+    if (!repoId) return;
+    if (this._installingRepoId || this._updatingRepoId || this._uninstallingRepoId) return;
+
+    this._restoreRepoId = repoId;
+    this._restoreOpen = true;
+    this._restoreLoading = true;
+    this._restoreError = null;
+    this._restoreOptions = [];
+    this._restoreSelected = "";
+    this._update();
+
+    try {
+      const resp = await this._hass.callApi("get", `bcs/backups?repo_id=${encodeURIComponent(repoId)}`);
+      const list = Array.isArray(resp?.backups) ? resp.backups : [];
+      this._restoreOptions = list;
+      const firstComplete = list.find((x) => x && x.complete);
+      const firstAny = list[0];
+      const pick = firstComplete || firstAny;
+      if (pick && pick.id) this._restoreSelected = String(pick.id);
+
+      if (!list.length) {
+        this._restoreError = "No backups found for this repository.";
+      }
+    } catch (e) {
+      this._restoreError = e?.message ? String(e.message) : String(e);
+    } finally {
+      this._restoreLoading = false;
+      this._update();
+    }
+  }
+
+  _closeRestore() {
+    this._restoreOpen = false;
+    this._restoreRepoId = null;
+    this._restoreLoading = false;
+    this._restoreError = null;
+    this._restoreOptions = [];
+    this._restoreSelected = "";
+    this._restoring = false;
+    this._update();
+  }
+
+  async _restoreSelectedBackup() {
+    if (!this._hass) return;
+    if (!this._restoreRepoId) return;
+    const bid = String(this._restoreSelected || "").trim();
+    if (!bid) return;
+    if (this._restoring) return;
+
+    const chosen = (this._restoreOptions || []).find((x) => String(x?.id) === bid);
+    if (chosen && chosen.complete === false) {
+      this._restoreError = "Selected backup is not available for all domains of this repository.";
+      this._update();
+      return;
+    }
+
+    const ok = window.confirm("Restore selected backup? This will overwrite the installed files under /config/custom_components and requires a restart.");
+    if (!ok) return;
+
+    this._restoring = true;
+    this._restoreError = null;
+    this._update();
+
+    try {
+      const resp = await this._hass.callApi("post", `bcs/restore?repo_id=${encodeURIComponent(this._restoreRepoId)}&backup_id=${encodeURIComponent(bid)}`, {});
+      if (!resp?.ok) {
+        this._restoreError = this._safeText(resp?.message) || "Restore failed.";
+      } else {
+        this._restartRequired = !!resp.restart_required;
+        this._lastActionMsg = "Restore finished. Restart required.";
+        this._closeRestore();
+      }
+    } catch (e) {
+      this._restoreError = e?.message ? String(e.message) : String(e);
+    } finally {
+      this._restoring = false;
+      await this._load();
+    }
+  }
+
   async _restartHA() {
     if (!this._hass) return;
     try {
@@ -201,6 +298,7 @@ class BahmcloudStorePanel extends HTMLElement {
       this._readmeText = null;
       this._readmeHtml = null;
       this._readmeError = null;
+      this._readmeExpanded = false;
       this._update();
       return;
     }
@@ -265,6 +363,8 @@ class BahmcloudStorePanel extends HTMLElement {
     this._readmeText = null;
     this._readmeHtml = null;
     this._readmeError = null;
+    this._readmeExpanded = false;
+    this._readmeCanToggle = false;
 
     this._update();
     this._loadReadme(repoId);
@@ -282,15 +382,23 @@ class BahmcloudStorePanel extends HTMLElement {
       if (resp?.ok && typeof resp.readme === "string" && resp.readme.trim()) {
         this._readmeText = resp.readme;
         this._readmeHtml = typeof resp.html === "string" && resp.html.trim() ? resp.html : null;
+
+        const lines = resp.readme.split(/\r?\n/).length;
+        this._readmeCanToggle = lines > 24 || resp.readme.length > 1600;
+        this._readmeExpanded = !this._readmeCanToggle;
       } else {
         this._readmeText = null;
         this._readmeHtml = null;
         this._readmeError = this._safeText(resp?.message) || "README not found.";
+        this._readmeCanToggle = false;
+        this._readmeExpanded = false;
       }
     } catch (e) {
       this._readmeText = null;
       this._readmeHtml = null;
       this._readmeError = e?.message ? String(e.message) : String(e);
+      this._readmeCanToggle = false;
+      this._readmeExpanded = false;
     } finally {
       this._readmeLoading = false;
       this._update();
@@ -302,7 +410,7 @@ class BahmcloudStorePanel extends HTMLElement {
 
     root.innerHTML = `
       <style>
-        :host { display:block; min-height:100%; --bcs-accent:#1E88E5; }
+        :host { display:block; min-height:100%; --bcs-accent:#1E88E5; max-width:100%; overflow-x:hidden; }
 
         .mobilebar{
           position:sticky; top:0; z-index:50;
@@ -317,13 +425,15 @@ class BahmcloudStorePanel extends HTMLElement {
         .iconbtn{
           width:40px; height:40px; border-radius:14px;
           display:flex; align-items:center; justify-content:center;
-          border:1px solid var(--divider-color);
-          background: var(--card-background-color);
+          /* Ensure icon visibility on app header (light & dark modes) */
+          color: var(--app-header-text-color, var(--primary-text-color));
+          border: 1px solid rgba(255,255,255,0.35);
+          background: rgba(255,255,255,0.16);
           cursor:pointer; user-select:none;
         }
         .iconbtn:hover{ filter:brightness(0.98); }
 
-        .wrap{ max-width:1200px; margin:0 auto; padding:16px; }
+        .wrap{ max-width:1200px; margin:0 auto; padding:16px; overflow-x:hidden; }
 
         .tabs{ display:flex; gap:10px; flex-wrap:wrap; margin:8px 0 16px; }
         .tab{
@@ -336,9 +446,12 @@ class BahmcloudStorePanel extends HTMLElement {
 
         .grid{ display:grid; gap:12px; grid-template-columns: repeat(1, minmax(0, 1fr)); }
         @media (min-width: 900px){ .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+        /* Prevent grid children from forcing horizontal overflow (mobile) */
+        .grid > *{ min-width:0; }
 
         .grid2{ display:grid; gap:12px; grid-template-columns: 1fr; }
         @media (min-width: 1024px){ .grid2{ grid-template-columns: 1.2fr .8fr; } }
+        .grid2 > *{ min-width:0; }
 
         .card{
           padding:14px 14px;
@@ -346,10 +459,11 @@ class BahmcloudStorePanel extends HTMLElement {
           background: var(--card-background-color);
           border:1px solid var(--divider-color);
           box-shadow: 0 1px 0 rgba(0,0,0,.04);
+          overflow:hidden;
         }
 
-        .row{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
-        .muted{ color: var(--secondary-text-color); }
+        .row{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
+        .muted{ color: var(--secondary-text-color); overflow-wrap:anywhere; word-break:break-word; }
         .small{ font-size: 12px; }
         .badge{
           padding:6px 10px;
@@ -358,7 +472,10 @@ class BahmcloudStorePanel extends HTMLElement {
           background: rgba(30,136,229,.06);
           color: var(--primary-text-color);
           font-size: 12px;
-          white-space:nowrap;
+          white-space:normal;
+          max-width:55%;
+          overflow:hidden;
+          text-overflow:ellipsis;
         }
 
         .filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
@@ -389,6 +506,22 @@ class BahmcloudStorePanel extends HTMLElement {
         }
         button:disabled{ opacity: .55; cursor: not-allowed; }
 
+        .modalOverlay{
+          position:fixed; inset:0; z-index:999;
+          background: rgba(0,0,0,0.45);
+          display:flex; align-items:center; justify-content:center;
+          padding:16px;
+        }
+        .modal{
+          width: min(520px, 100%);
+          background: var(--card-background-color);
+          border:1px solid var(--divider-color);
+          border-radius:18px;
+          padding:16px;
+          box-shadow: 0 10px 30px rgba(0,0,0,0.25);
+        }
+        .modalTitle{ font-size:16px; font-weight:700; }
+
         .err{
           margin:12px 0;
           padding:12px 14px;
@@ -397,36 +530,6 @@ class BahmcloudStorePanel extends HTMLElement {
           background: rgba(255, 82, 82, .08);
         }
 
-        .fabs{
-          position: fixed;
-          right: 16px;
-          bottom: 16px;
-          display:flex;
-          flex-direction:column;
-          gap:10px;
-          z-index: 60;
-        }
-        .fabbtn{
-          width:54px; height:54px;
-          border-radius:18px;
-          border:1px solid var(--divider-color);
-          background: var(--card-background-color);
-          display:flex; align-items:center; justify-content:center;
-          cursor:pointer;
-          box-shadow: 0 8px 18px rgba(0,0,0,.12);
-          user-select:none;
-          font-size: 18px;
-          padding: 0;
-        }
-        .fabbtn.primary{
-          border-color: rgba(30,136,229,.35);
-          background: rgba(30,136,229,.10);
-        }
-        .fabbtn:disabled{
-          opacity: .55;
-          cursor: not-allowed;
-        }
-
         pre.readme{
           padding: 12px;
           border-radius: 14px;
@@ -437,7 +540,10 @@ class BahmcloudStorePanel extends HTMLElement {
           line-height: 1.4;
         }
 
+        /* Markdown can contain very wide content (tables/images). Keep it within the viewport. */
+        .md{ overflow-wrap:anywhere; word-break:break-word; max-width:100%; min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch; }
         .md :is(h1,h2,h3){ margin-top: 12px; }
+        .md img{ max-width:100%; height:auto; }
         .md code{
           padding: 2px 5px;
           border-radius: 8px;
@@ -454,14 +560,65 @@ class BahmcloudStorePanel extends HTMLElement {
         .md table{
           width:100%;
           border-collapse: collapse;
-          overflow:auto;
+          overflow-x:auto;
+          overflow-y:hidden;
+          -webkit-overflow-scrolling: touch;
           display:block;
+          max-width:100%;
         }
+        .readmeWrap{
+          margin-top:12px;
+          max-width:100%;
+          border:1px solid var(--divider-color);
+          border-radius:14px;
+          padding:12px;
+          background: rgba(0,0,0,.02);
+          position:relative;
+          overflow:hidden;
+        }
+        .readmeWrap.collapsed{
+          max-height:260px;
+        }
+        @media (min-width: 1024px){
+          .readmeWrap.collapsed{ max-height:340px; }
+        }
+        .readmeWrap.collapsed::after{
+          content:"";
+          position:absolute;
+          left:0; right:0; bottom:0;
+          height:64px;
+          background: linear-gradient(to bottom, rgba(0,0,0,0), var(--card-background-color));
+          pointer-events:none;
+        }
+        .readmeWrap.expanded{
+          max-height:70vh;
+          overflow:auto;
+          -webkit-overflow-scrolling:touch;
+        }
+        .readmeActions{
+          display:flex; justify-content:flex-end;
+          margin-top:10px;
+        }
+        button.link{
+          border:1px solid transparent;
+          background: transparent;
+          color: var(--bcs-accent);
+          padding:8px 10px;
+        }
+        button.link:hover{
+          border-color: rgba(30,136,229,.25);
+          background: rgba(30,136,229,.06);
+        }
+
         .md th, .md td{
           border: 1px solid var(--divider-color);
           padding: 8px;
           text-align:left;
+          max-width:100%;
+          overflow-wrap:anywhere;
+          word-break:break-word;
         }
+
       </style>
 
       <div class="mobilebar">
@@ -488,7 +645,7 @@ class BahmcloudStorePanel extends HTMLElement {
         <div id="content"></div>
       </div>
 
-      <div id="fabs"></div>
+
     `;
 
     root.getElementById("menuBtn").addEventListener("click", () => this._toggleMenu());
@@ -515,6 +672,25 @@ class BahmcloudStorePanel extends HTMLElement {
     const root = this.shadowRoot;
     if (!root) return;
 
+    // Preserve focus & cursor position for inputs that trigger a re-render (e.g. search).
+    // Without this, mobile browsers may drop focus after each keystroke.
+    const active = root.activeElement;
+    const restore = {
+      id: active && active.id ? String(active.id) : null,
+      start: null,
+      end: null,
+    };
+    try {
+      if (active && (active.tagName === "INPUT" || active.tagName === "TEXTAREA")) {
+        if (typeof active.selectionStart === "number" && typeof active.selectionEnd === "number") {
+          restore.start = active.selectionStart;
+          restore.end = active.selectionEnd;
+        }
+      }
+    } catch (_) {
+      // ignore
+    }
+
     const subtitle = root.getElementById("subtitle");
     if (subtitle) subtitle.textContent = this._view === "detail" ? "Details" : this._view[0].toUpperCase() + this._view.slice(1);
 
@@ -528,8 +704,7 @@ class BahmcloudStorePanel extends HTMLElement {
     setActive("tabAbout", this._view === "about");
 
     const content = root.getElementById("content");
-    const fabs = root.getElementById("fabs");
-    if (!content || !fabs) return;
+    if (!content) return;
 
     const err = this._error
       ? `<div class="err"><strong>Error:</strong> ${this._esc(this._error)}</div>`
@@ -537,13 +712,11 @@ class BahmcloudStorePanel extends HTMLElement {
 
     if (this._loading) {
       content.innerHTML = `${err}<div class="card">Loading…</div>`;
-      fabs.innerHTML = "";
       return;
     }
 
     if (!this._data?.ok) {
       content.innerHTML = `${err}<div class="card">No data. Please refresh.</div>`;
-      fabs.innerHTML = "";
       return;
     }
 
@@ -553,14 +726,30 @@ class BahmcloudStorePanel extends HTMLElement {
     else if (this._view === "about") html = this._renderAbout();
     else if (this._view === "detail") html = this._renderDetail();
 
-    content.innerHTML = `${err}${html}`;
-    fabs.innerHTML = this._view === "detail" ? this._renderFabs() : "";
+    const modal = this._renderRestoreModal();
+    content.innerHTML = `${err}${html}${modal}`;
 
     if (this._view === "store") this._wireStore();
     if (this._view === "manage") this._wireManage();
     if (this._view === "detail") {
       this._wireDetail(); // now always wires buttons
-      this._wireFabs();
+    }
+
+    this._wireRestoreModal();
+
+    // Restore focus and cursor for the search field after re-render.
+    if (restore.id && this._view === "store") {
+      const el = root.getElementById(restore.id);
+      if (el && (el.tagName === "INPUT" || el.tagName === "TEXTAREA")) {
+        try {
+          el.focus({ preventScroll: true });
+          if (restore.start !== null && restore.end !== null && typeof el.setSelectionRange === "function") {
+            el.setSelectionRange(restore.start, restore.end);
+          }
+        } catch (_) {
+          // ignore
+        }
+      }
     }
   }
 
@@ -601,16 +790,40 @@ class BahmcloudStorePanel extends HTMLElement {
         const cat = this._safeText(r?.category) || "";
         if (this._category !== "all" && this._category !== cat) return false;
 
-        const prov = this._safeText(r?.provider) || "other";
-        if (this._provider !== "all") {
-          if (this._provider === "custom" && r?.source !== "custom") return false;
-          if (this._provider !== "custom" && prov !== this._provider) return false;
-        }
+        const latest = this._safeText(r?.latest_version);
+        const installed = this._asBoolStrict(r?.installed);
+        const installedVersion = this._safeText(r?.installed_version);
+        const updateAvailable = installed && !!latest && (!installedVersion || latest !== installedVersion);
+
+        if (this._filter === "installed" && !installed) return false;
+        if (this._filter === "not_installed" && installed) return false;
+        if (this._filter === "updates" && !updateAvailable) return false;
+        if (this._filter === "custom" && r?.source !== "custom") return false;
+
         return true;
       })
       .sort((a, b) => {
         const an = (this._safeText(a?.name) || "").toLowerCase();
         const bn = (this._safeText(b?.name) || "").toLowerCase();
+
+        const alatest = this._safeText(a?.latest_version);
+        const ainstalled = this._asBoolStrict(a?.installed);
+        const ainstalledVersion = this._safeText(a?.installed_version);
+        const aupdate = ainstalled && !!alatest && (!ainstalledVersion || alatest !== ainstalledVersion);
+
+        const blatest = this._safeText(b?.latest_version);
+        const binstalled = this._asBoolStrict(b?.installed);
+        const binstalledVersion = this._safeText(b?.installed_version);
+        const bupdate = binstalled && !!blatest && (!binstalledVersion || blatest !== binstalledVersion);
+
+        if (this._sort === "updates_first") {
+          if (aupdate !== bupdate) return aupdate ? -1 : 1;
+          return an.localeCompare(bn);
+        }
+        if (this._sort === "installed_first") {
+          if (ainstalled !== binstalled) return ainstalled ? -1 : 1;
+          return an.localeCompare(bn);
+        }
         return an.localeCompare(bn);
       });
 
@@ -618,8 +831,6 @@ class BahmcloudStorePanel extends HTMLElement {
       new Set(repos.map((r) => this._safeText(r?.category)).filter((c) => !!c))
     ).sort();
 
-    const providers = ["github", "gitlab", "gitea", "other"];
-
     const cards = filtered
       .map((r) => {
         const id = this._safeId(r?.id);
@@ -663,10 +874,17 @@ class BahmcloudStorePanel extends HTMLElement {
           <option value="all">All categories</option>
           ${categories.map((c) => `<option value="${this._esc(c)}" ${this._category === c ? "selected" : ""}>${this._esc(c)}</option>`).join("")}
         </select>
-        <select id="prov">
-          <option value="all">All providers</option>
-          <option value="custom" ${this._provider === "custom" ? "selected" : ""}>Custom</option>
-          ${providers.map((p) => `<option value="${p}" ${this._provider === p ? "selected" : ""}>${p.toUpperCase()}</option>`).join("")}
+        <select id="filter">
+          <option value="all" ${this._filter === "all" ? "selected" : ""}>All</option>
+          <option value="installed" ${this._filter === "installed" ? "selected" : ""}>Installed</option>
+          <option value="not_installed" ${this._filter === "not_installed" ? "selected" : ""}>Not installed</option>
+          <option value="updates" ${this._filter === "updates" ? "selected" : ""}>Updates available</option>
+          <option value="custom" ${this._filter === "custom" ? "selected" : ""}>Custom repos</option>
+        </select>
+        <select id="sort">
+          <option value="az" ${this._sort === "az" ? "selected" : ""}>A–Z</option>
+          <option value="updates_first" ${this._sort === "updates_first" ? "selected" : ""}>Updates first</option>
+          <option value="installed_first" ${this._sort === "installed_first" ? "selected" : ""}>Installed first</option>
         </select>
       </div>
 
@@ -683,7 +901,8 @@ class BahmcloudStorePanel extends HTMLElement {
 
     const q = root.getElementById("q");
     const cat = root.getElementById("cat");
-    const prov = root.getElementById("prov");
+    const filter = root.getElementById("filter");
+    const sort = root.getElementById("sort");
 
     if (q) {
       q.addEventListener("input", (e) => {
@@ -697,9 +916,15 @@ class BahmcloudStorePanel extends HTMLElement {
         this._update();
       });
     }
-    if (prov) {
-      prov.addEventListener("change", (e) => {
-        this._provider = e?.target?.value || "all";
+    if (filter) {
+      filter.addEventListener("change", (e) => {
+        this._filter = e?.target?.value || "all";
+        this._update();
+      });
+    }
+    if (sort) {
+      sort.addEventListener("change", (e) => {
+        this._sort = e?.target?.value || "az";
         this._update();
       });
     }
@@ -752,7 +977,14 @@ class BahmcloudStorePanel extends HTMLElement {
             <div class="muted small">Rendered Markdown</div>
           </div>
 
-          <div id="readmePretty" class="md" style="margin-top:12px;"></div>
+          <div class="readmeWrap ${this._readmeExpanded ? "expanded" : "collapsed"}">
+            <div id="readmePretty" class="md"></div>
+          </div>
+          ${this._readmeCanToggle ? `
+          <div class="readmeActions">
+            <button class="link" id="btnReadmeToggle">${this._readmeExpanded ? "Show less" : "Show more"}</button>
+          </div>
+          ` : ``}
 
           <details>
             <summary>Show raw Markdown</summary>
@@ -786,6 +1018,7 @@ class BahmcloudStorePanel extends HTMLElement {
     const installBtn = `<button class="primary" id="btnInstall" ${installed || busy ? "disabled" : ""}>${busyInstall ? "Installing…" : installed ? "Installed" : "Install"}</button>`;
     const updateBtn = `<button class="primary" id="btnUpdate" ${!updateAvailable || busy ? "disabled" : ""}>${busyUpdate ? "Updating…" : updateAvailable ? "Update" : "Up to date"}</button>`;
     const uninstallBtn = `<button class="primary" id="btnUninstall" ${!installed || busy ? "disabled" : ""}>${busyUninstall ? "Uninstalling…" : "Uninstall"}</button>`;
+    const restoreBtn = `<button class="primary" id="btnRestore" ${!installed || busy ? "disabled" : ""}>Restore</button>`;
 
     const restartHint = this._restartRequired
       ? `
@@ -838,6 +1071,7 @@ class BahmcloudStorePanel extends HTMLElement {
               ${installBtn}
               ${updateBtn}
               ${uninstallBtn}
+              ${restoreBtn}
             </div>
 
             ${restartHint}
@@ -854,7 +1088,9 @@ class BahmcloudStorePanel extends HTMLElement {
     const btnInstall = root.getElementById("btnInstall");
     const btnUpdate = root.getElementById("btnUpdate");
     const btnUninstall = root.getElementById("btnUninstall");
+    const btnRestore = root.getElementById("btnRestore");
     const btnRestart = root.getElementById("btnRestart");
+    const btnReadmeToggle = root.getElementById("btnReadmeToggle");
 
     if (btnInstall) {
       btnInstall.addEventListener("click", () => {
@@ -877,10 +1113,26 @@ class BahmcloudStorePanel extends HTMLElement {
       });
     }
 
+    if (btnRestore) {
+      btnRestore.addEventListener("click", () => {
+        if (btnRestore.disabled) return;
+        if (this._detailRepoId) this._openRestore(this._detailRepoId);
+      });
+    }
+
+    
+
     if (btnRestart) {
       btnRestart.addEventListener("click", () => this._restartHA());
     }
 
+    if (btnReadmeToggle) {
+      btnReadmeToggle.addEventListener("click", () => {
+        this._readmeExpanded = !this._readmeExpanded;
+        this._update();
+      });
+    }
+
     const mount = root.getElementById("readmePretty");
     if (!mount) return;
 
@@ -896,6 +1148,45 @@ class BahmcloudStorePanel extends HTMLElement {
     }
   }
 
+  _wireRestoreModal() {
+    const root = this.shadowRoot;
+    if (!root) return;
+
+    const overlay = root.getElementById("restoreOverlay");
+    if (!overlay) return;
+
+    // Click outside modal closes it
+    overlay.addEventListener("click", (ev) => {
+      if (ev.target === overlay) this._closeRestore();
+    });
+
+    const sel = root.getElementById("restoreSelect");
+    if (sel) {
+      try {
+        if (this._restoreSelected) sel.value = String(this._restoreSelected);
+      } catch (_) {}
+      sel.addEventListener("change", () => {
+        this._restoreSelected = String(sel.value || "");
+      });
+    }
+
+    const btnCancel = root.getElementById("btnRestoreCancel");
+    if (btnCancel) {
+      btnCancel.addEventListener("click", () => this._closeRestore());
+    }
+
+    const btnApply = root.getElementById("btnRestoreApply");
+    if (btnApply) {
+      btnApply.addEventListener("click", () => {
+        if (btnApply.disabled) return;
+        const v = root.getElementById("restoreSelect")?.value;
+        if (v) this._restoreSelected = String(v);
+        this._restoreSelectedBackup();
+      });
+    }
+  }
+
+
   _postprocessRenderedMarkdown(container) {
     if (!container) return;
     try {
@@ -907,75 +1198,52 @@ class BahmcloudStorePanel extends HTMLElement {
     } catch (_) {}
   }
 
-  _renderFabs() {
-    const r = this._detailRepo;
-    if (!r) return "";
 
-    const repoId = this._safeId(r?.id);
-    const installed = this._asBoolStrict(r?.installed);
-    const latest = this._safeText(r?.latest_version);
-    const installedVersion = this._safeText(r?.installed_version);
+  _renderRestoreModal() {
+    if (!this._restoreOpen) return "";
 
-    const busy = this._installingRepoId === repoId || this._updatingRepoId === repoId || this._uninstallingRepoId === repoId;
-    const updateAvailable = installed && !!latest && (!installedVersion || latest !== installedVersion);
+    const opts = Array.isArray(this._restoreOptions) ? this._restoreOptions : [];
+    const disabled = this._restoreLoading || this._restoring || !opts.length;
 
-    const installDisabled = installed || busy;
-    const updateDisabled = !updateAvailable || busy;
-    const uninstallDisabled = !installed || busy;
+    const optionsHtml = opts
+      .map((o) => {
+        const id = this._safeText(o?.id) || "";
+        const label = this._safeText(o?.label) || id;
+        return `<option value="${this._esc(id)}">${this._esc(label)}</option>`;
+      })
+      .join("");
+
+    const msg = this._restoreLoading
+      ? "Loading backups…"
+      : this._restoreError
+      ? this._safeText(this._restoreError)
+      : opts.length
+      ? "Select a backup to restore. This will overwrite files under /config/custom_components and requires a restart."
+      : "No backups found.";
 
     return `
-      <div class="fabs">
-        <button class="fabbtn primary" id="fabOpen" title="Open repository">↗</button>
-        <button class="fabbtn" id="fabReload" title="Reload README">⟳</button>
-        <button class="fabbtn" id="fabInstall" title="${installDisabled ? (installed ? "Already installed" : "Installing…") : "Install"}" ${installDisabled ? "disabled" : ""}>＋</button>
-        <button class="fabbtn" id="fabUpdate" title="${updateDisabled ? (!installed ? "Not installed" : "No update available") : "Update"}" ${updateDisabled ? "disabled" : ""}>↑</button>
-        <button class="fabbtn" id="fabUninstall" title="${uninstallDisabled ? (!installed ? "Not installed" : "Busy") : "Uninstall"}" ${uninstallDisabled ? "disabled" : ""}>✕</button>
-        <button class="fabbtn" id="fabInfo" title="About">i</button>
+      <div class="modalOverlay" id="restoreOverlay">
+        <div class="modal">
+          <div class="modalTitle">Restore from backup</div>
+          <div class="muted" style="margin-top:8px;">${this._esc(msg)}</div>
+
+          <div style="margin-top:14px;">
+            <label class="muted small" for="restoreSelect">Backup</label><br/>
+            <select id="restoreSelect" ${disabled ? "disabled" : ""} style="width:100%; margin-top:6px;">
+              ${optionsHtml}
+            </select>
+          </div>
+
+          <div class="row" style="margin-top:16px; justify-content:flex-end; gap:10px;">
+            <button id="btnRestoreCancel">Cancel</button>
+            <button class="primary" id="btnRestoreApply" ${disabled ? "disabled" : ""}>${this._restoring ? "Restoring…" : "Restore"}</button>
+          </div>
+        </div>
       </div>
     `;
   }
 
-  _wireFabs() {
-    const root = this.shadowRoot;
-    const r = this._detailRepo;
-    if (!r) return;
 
-    const url = this._safeText(r?.url);
-    const repoId = this._safeId(r?.id);
-
-    const open = root.getElementById("fabOpen");
-    const reload = root.getElementById("fabReload");
-    const install = root.getElementById("fabInstall");
-    const update = root.getElementById("fabUpdate");
-    const uninstall = root.getElementById("fabUninstall");
-    const info = root.getElementById("fabInfo");
-
-    if (open) open.addEventListener("click", () => url && window.open(url, "_blank", "noreferrer"));
-    if (reload) reload.addEventListener("click", () => this._detailRepoId && this._loadReadme(this._detailRepoId));
-
-    if (install) {
-      install.addEventListener("click", () => {
-        if (install.disabled) return;
-        this._installRepo(repoId);
-      });
-    }
-
-    if (update) {
-      update.addEventListener("click", () => {
-        if (update.disabled) return;
-        this._updateRepo(repoId);
-      });
-    }
-
-    if (uninstall) {
-      uninstall.addEventListener("click", () => {
-        if (uninstall.disabled) return;
-        this._uninstallRepo(repoId);
-      });
-    }
-
-    if (info) info.addEventListener("click", () => { this._view = "about"; this._update(); });
-  }
 
   _renderManage() {
     const repos = Array.isArray(this._data.repos) ? this._data.repos : [];

custom_components/bahmcloud_store/panel/styles.css

@@ -1,10 +1,24 @@
 body { font-family: system-ui, sans-serif; margin:0; }
 .wrap { padding: 16px; max-width: 1000px; margin: 0 auto; }
 .card { border: 1px solid #ddd; border-radius: 10px; padding: 12px; margin: 10px 0; }
-.row { display:flex; justify-content:space-between; gap: 12px; align-items: flex-start; }
+.row { display:flex; justify-content:space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; min-width:0; }
 .badge { border: 1px solid #bbb; border-radius: 999px; padding: 2px 8px; font-size: 12px; height: fit-content; }
 .muted { color: #666; font-size: 13px; margin-top: 4px; }
 .actions { display:flex; gap: 8px; margin-top: 10px; }
 button { padding: 8px 12px; cursor:pointer; }
 button[disabled] { opacity: 0.6; cursor: not-allowed; }
 a { color: inherit; }
+
+/* Basic markdown safety (in case styles.css is used by older panels) */
+.md { max-width: 100%; overflow-x: auto; }
+.md table { display:block; max-width:100%; overflow-x:auto; }
+.md img { max-width: 100%; height: auto; }
+
+/* README UX (E2): collapsible preview (standalone page only) */
+.readmeWrap{ border:1px solid #ddd; border-radius:10px; padding:12px; background: #f7f7f7; max-width:100%; }
+.readmeWrap.collapsed{ max-height:260px; overflow:hidden; position:relative; }
+.readmeWrap.collapsed::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:56px; background: linear-gradient(to bottom, rgba(247,247,247,0), #f7f7f7); pointer-events:none; }
+.readmeWrap.expanded{ max-height:70vh; overflow:auto; }
+.readmeActions{ display:flex; justify-content:flex-end; margin-top:10px; }
+button.link{ border:none; background:transparent; padding:6px 10px; color:#1E88E5; }
+button.link:hover{ text-decoration:underline; }

custom_components/bahmcloud_store/views.py

@@ -355,6 +355,53 @@ class BCSUninstallView(HomeAssistantView):
             return web.json_response({"ok": False, "message": str(e) or "Uninstall failed"}, status=500)
 
 
+
+
+class BCSBackupsView(HomeAssistantView):
+    url = "/api/bcs/backups"
+    name = "api:bcs_backups"
+    requires_auth = True
+
+    def __init__(self, core: Any) -> None:
+        self.core: BCSCore = core
+
+    async def get(self, request: web.Request) -> web.Response:
+        repo_id = request.query.get("repo_id")
+        if not repo_id:
+            return web.json_response({"ok": False, "message": "Missing repo_id"}, status=400)
+
+        try:
+            backups = await self.core.list_repo_backups(repo_id)
+            return web.json_response({"ok": True, "repo_id": repo_id, "backups": backups}, status=200)
+        except Exception as e:
+            _LOGGER.exception("BCS list backups failed: %s", e)
+            return web.json_response({"ok": False, "message": str(e) or "List backups failed"}, status=500)
+
+
+class BCSRestoreView(HomeAssistantView):
+    url = "/api/bcs/restore"
+    name = "api:bcs_restore"
+    requires_auth = True
+
+    def __init__(self, core: Any) -> None:
+        self.core: BCSCore = core
+
+    async def post(self, request: web.Request) -> web.Response:
+        repo_id = request.query.get("repo_id")
+        backup_id = request.query.get("backup_id")
+        if not repo_id:
+            return web.json_response({"ok": False, "message": "Missing repo_id"}, status=400)
+        if not backup_id:
+            return web.json_response({"ok": False, "message": "Missing backup_id"}, status=400)
+
+        try:
+            result = await self.core.restore_repo_backup(repo_id, backup_id)
+            return web.json_response(result, status=200)
+        except Exception as e:
+            _LOGGER.exception("BCS restore failed: %s", e)
+            return web.json_response({"ok": False, "message": str(e) or "Restore failed"}, status=500)
+
+
 class BCSRestartView(HomeAssistantView):
     url = "/api/bcs/restart"
     name = "api:bcs_restart"