diff --git a/custom_components/bahmcloud_store/panel/panel.js b/custom_components/bahmcloud_store/panel/panel.js
new file mode 100644
index 0000000..092e27b
--- /dev/null
+++ b/custom_components/bahmcloud_store/panel/panel.js
@@ -0,0 +1,602 @@
+class BahmcloudStorePanel extends HTMLElement {
+ constructor() {
+ super();
+ this.attachShadow({ mode: "open" });
+
+ this._hass = null;
+
+ this._view = "store";
+ this._data = null;
+ this._loading = true;
+ this._error = null;
+
+ this._customAddUrl = "";
+ this._customAddName = "";
+
+ this._search = "";
+ this._category = "all";
+
+ this._detailRepoId = null;
+ this._detailRepo = null;
+
+ this._readmeLoading = false;
+ this._readmeText = null;
+ this._readmeHtml = null;
+ this._readmeError = null;
+ }
+
+ set hass(hass) {
+ this._hass = hass;
+ if (!this._rendered) {
+ this._rendered = true;
+ this._render();
+ this._load();
+ }
+ }
+
+ async _load() {
+ if (!this._hass) return;
+
+ this._loading = true;
+ this._error = null;
+ this._update();
+
+ try {
+ const data = await this._hass.callApi("get", "bcs");
+ this._data = data;
+ } catch (e) {
+ this._error = e?.message ? String(e.message) : String(e);
+ } finally {
+ this._loading = false;
+ this._update();
+ }
+ }
+
+ _isDesktop() {
+ return window.matchMedia && window.matchMedia("(min-width: 1024px)").matches;
+ }
+
+ _toggleMenu() {
+ if (this._isDesktop()) return;
+ try {
+ this.dispatchEvent(new Event("hass-toggle-menu", { bubbles: true, composed: true }));
+ return;
+ } catch (_) {}
+ this._error = "Unable to open the sidebar on this client. Use the back button.";
+ this._update();
+ }
+
+ _goBack() {
+ if (this._view === "detail") {
+ this._view = "store";
+ this._detailRepoId = null;
+ this._detailRepo = null;
+ this._readmeText = null;
+ this._readmeHtml = null;
+ this._readmeError = null;
+ this._update();
+ return;
+ }
+ try {
+ history.back();
+ } catch (_) {
+ window.location.href = "/";
+ }
+ }
+
+ _openRepoDetail(repoId) {
+ const repos = Array.isArray(this._data?.repos) ? this._data.repos : [];
+ const repo = repos.find((r) => r.id === repoId);
+ if (!repo) return;
+
+ this._view = "detail";
+ this._detailRepoId = repoId;
+ this._detailRepo = repo;
+
+ this._readmeText = null;
+ this._readmeHtml = null;
+ this._readmeError = null;
+
+ this._update();
+ this._loadReadme(repoId);
+ }
+
+ async _loadReadme(repoId) {
+ if (!this._hass) return;
+ this._readmeLoading = true;
+ this._readmeError = null;
+ this._update();
+
+ try {
+ const resp = await this._hass.callApi("get", `bcs/readme?repo_id=${encodeURIComponent(repoId)}`);
+
+ 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;
+ } else {
+ this._readmeText = null;
+ this._readmeHtml = null;
+ this._readmeError = resp?.message || "README not found.";
+ }
+ } catch (e) {
+ this._readmeText = null;
+ this._readmeHtml = null;
+ this._readmeError = e?.message ? String(e.message) : String(e);
+ } finally {
+ this._readmeLoading = false;
+ this._update();
+ }
+ }
+
+ _render() {
+ const root = this.shadowRoot;
+
+ root.innerHTML = `
+
+
+
+
+
+
←
+
+
Bahmcloud Store
+
BCS — loading…
+
+
+
+
+
+
+
+
Store
+
Manage repositories
+
Settings / About
+
+
+
+
+
Loading…
`;
+ this._restoreFocusState(focusState);
+ return;
+ }
+
+ if (!this._data) {
+ content.innerHTML = `No data.
`;
+ this._restoreFocusState(focusState);
+ return;
+ }
+
+ if (this._view === "store") {
+ content.innerHTML = this._renderStore();
+ this._wireStore();
+ this._restoreFocusState(focusState);
+ return;
+ }
+
+ if (this._view === "manage") {
+ content.innerHTML = `Manage view is unchanged in this patch.
`;
+ this._restoreFocusState(focusState);
+ return;
+ }
+
+ if (this._view === "about") {
+ content.innerHTML = this._renderAbout();
+ this._restoreFocusState(focusState);
+ return;
+ }
+
+ content.innerHTML = this._renderDetail();
+ this._wireDetail();
+ this._restoreFocusState(focusState);
+ }
+
+ _renderStore() {
+ const repos = Array.isArray(this._data.repos) ? this._data.repos : [];
+ const categories = Array.from(new Set(repos.map(r => (r.category || "").toLowerCase()).filter(Boolean))).sort();
+
+ const filtered = repos
+ .filter((r) => {
+ const q = (this._search || "").trim().toLowerCase();
+ if (!q) return true;
+ const hay = `${r.name || ""} ${r.description || ""} ${r.url || ""} ${r.owner || ""}`.toLowerCase();
+ return hay.includes(q);
+ })
+ .filter((r) => {
+ if (this._category === "all") return true;
+ return (r.category || "").toLowerCase() === this._category;
+ });
+
+ const options = [
+ ``,
+ ...categories.map((c) => ``),
+ ].join("");
+
+ const rows = filtered.map((r) => {
+ const badge = r.source === "custom"
+ ? `Custom`
+ : `Index`;
+
+ const desc = r.description || "No description available.";
+ const creator = r.owner ? `Creator: ${r.owner}` : "Creator: -";
+ const latest = r.latest_version ? `Latest: ${r.latest_version}` : "Latest: unknown";
+ const metaSrc = r.meta_source ? `Meta: ${r.meta_source}` : null;
+
+ const lineBits = [creator, latest, metaSrc].filter(Boolean);
+
+ return `
+
+
+
+
${this._esc(r.name)}
+
${this._esc(desc)}
+
${this._esc(lineBits.join(" · "))}
+
+ ${badge}
+
+
+
+
+
+ ${rows || `No repositories configured.
`}
+ `;
+ }
+
+ _wireStore() {
+ const root = this.shadowRoot;
+ const search = root.getElementById("searchInput");
+ const cat = root.getElementById("categorySelect");
+
+ if (search) {
+ search.addEventListener("input", (e) => {
+ this._search = e.target.value;
+ this._update();
+ });
+ }
+
+ if (cat) {
+ cat.addEventListener("change", (e) => {
+ this._category = String(e.target.value || "all");
+ this._update();
+ });
+ }
+
+ for (const card of root.querySelectorAll("[data-repo]")) {
+ card.addEventListener("click", () => {
+ const id = card.getAttribute("data-repo");
+ if (id) this._openRepoDetail(id);
+ });
+ }
+ }
+
+ _renderDetail() {
+ const r = this._detailRepo;
+ if (!r) return `Repository not found.
`;
+
+ const badge = r.source === "custom"
+ ? `Custom`
+ : `Index`;
+
+ const desc = r.description || "No description available.";
+ const latest = r.latest_version ? `Latest: ${r.latest_version}` : "Latest: unknown";
+
+ const infoBits = [
+ r.owner ? `Creator: ${r.owner}` : "Creator: -",
+ latest,
+ r.provider ? `Provider: ${r.provider}` : null,
+ r.meta_source ? `Meta: ${r.meta_source}` : null,
+ ].filter(Boolean);
+
+ const readmeBlock = this._readmeLoading
+ ? `Loading README…
`
+ : this._readmeText
+ ? `
+
+
README
+
+
+
+ Show raw Markdown
+
+
${this._esc(this._readmeText)}
+
+
+
README
+
${this._esc(this._readmeError || "README not found.")}
+
+
+
+
+
+
${this._esc(r.name)}
+
${this._esc(desc)}
+
${this._esc(infoBits.join(" · "))}
+
+
+ ${badge}
+
+
+
+ ${readmeBlock}
+
+
+
+
+
Installation & Updates
+
Buttons will be enabled in a later version.
+
+
+
Markdown rendering is not available. Please use "Show raw Markdown".
`;
+ }
+ }
+
+ _renderAbout() {
+ return `
+
+
Settings / About
+
BCS version: ${this._esc(this._data.version || "-")}
+