Update app.py

app.py

@@ -4,6 +4,8 @@ from __future__ import annotations
 
 import asyncio
 import json
+import os
+import hmac
 from pathlib import Path
 from uuid import uuid4
 
@@ -35,12 +37,20 @@ STATE_DIR = _pick_state_dir()
 STATE_PATH = STATE_DIR / "cards_state.json"
 STATE_LOCK = asyncio.Lock()
 
+# Secret password from env (HF Secrets)
+SERVER_PASSWORD = (
+    os.environ.get("password")
+    or os.environ.get("PASSWORD")
+    or os.environ.get("APP_PASSWORD")
+    or ""
+).strip()
+
 
 def _new_card() -> dict:
     return {
         "id": str(uuid4())[:12],
         "model": "",
-        "tags": [],  # NEW
+        "tags": [],
         "how_it_works": "",
         "use_cases": "",
         "link": "",
@@ -86,7 +96,6 @@ def _normalize_state(obj: dict) -> dict:
         use_cases = c.get("use_cases", c.get("use", ""))
         link = c.get("link", c.get("resource_url", ""))
 
-        # Back-compat: if someone stored "categories"/"tag"/etc.
         tags = (
             c.get("tags")
             if "tags" in c
@@ -138,6 +147,31 @@ def _json(data: dict, status_code: int = 200) -> JSONResponse:
     return JSONResponse(data, status_code=status_code, headers={"Cache-Control": "no-store"})
 
 
+def _unauthorized() -> JSONResponse:
+    return _json({"error": "Unauthorized"}, status_code=401)
+
+
+def _check_password_from_request(request: Request, payload: dict | None = None) -> bool:
+    """
+    Accept password via:
+      - Header: X-Password
+      - Query:  ?password=...
+      - JSON body field: {"password": "..."}  (optional)
+    """
+    if not SERVER_PASSWORD:
+        # If you forgot to set the secret, block add/delete so you notice.
+        return False
+
+    provided = request.headers.get("X-Password") or request.query_params.get("password")
+    if not provided and isinstance(payload, dict):
+        provided = payload.get("password")
+
+    if not isinstance(provided, str):
+        return False
+
+    return hmac.compare_digest(provided.strip(), SERVER_PASSWORD)
+
+
 # -----------------------------------------------------------------------------
 # API endpoints
 # -----------------------------------------------------------------------------
@@ -147,6 +181,10 @@ async def api_cards(request: Request) -> Response:
         return _json(await get_state())
 
     if request.method == "POST":
+        # ADD requires password
+        if not _check_password_from_request(request):
+            return _unauthorized()
+
         state = await get_state()
         state["cards"].append(_new_card())
         state["version"] += 1
@@ -166,12 +204,18 @@ async def api_card_id(request: Request) -> Response:
         return _json({"error": "Card not found"}, status_code=404)
 
     if request.method == "DELETE":
+        # DELETE requires password
+        if not _check_password_from_request(request):
+            return _unauthorized()
+
         cards.pop(idx)
         state["version"] += 1
         await set_state(state)
         return _json(state)
 
     if request.method == "PUT":
+        # Edits do NOT require password (as requested: only add/delete).
+        # If you later want to lock edits too, I can flip this on.
         try:
             payload = await request.json()
         except Exception:
@@ -197,7 +241,7 @@ async def api_card_id(request: Request) -> Response:
 
 
 # -----------------------------------------------------------------------------
-# Shiny UI
+# Shiny UI (client uses fetch() to call the API above)
 # -----------------------------------------------------------------------------
 
 app_ui = ui.page_fluid(
@@ -210,85 +254,92 @@ app_ui = ui.page_fluid(
           --cardBg:#ffffff;
           --muted:#6b778c;
           --headerBg:#f3f6fb;
-          --chipBg:#eef2f8;
-          --chipText:#1f2a44;
-          --chipActiveBg:#1f3a66;
-          --chipActiveText:#ffffff;
         }
         body { background: #f3f6fb; }
 
-        /* Top bar */
+        /* Top bar: filters left (compact), + right */
         .topbar{
           background: linear-gradient(0deg, var(--navy2), var(--navy));
-          padding: 14px 18px;
+          padding: 12px 14px;
           border-radius: 0 0 14px 14px;
           box-shadow: 0 2px 10px rgba(0,0,0,.12);
           display:flex;
-          justify-content:flex-end;
+          justify-content:space-between;
           align-items:center;
+          gap: 12px;
           margin-bottom: 10px;
         }
-        #add-btn{
-          background: white;
-          color: var(--navy);
-          border: 1px solid rgba(0,0,0,.08);
+        .top-left{
+          display:flex;
+          align-items:center;
+          gap: 10px;
+          min-width: 0;
+          flex: 1 1 auto;
+        }
+        #filter-btn, #clear-filters{
           border-radius: 12px;
-          padding: 12px 22px;
+          padding: 9px 12px;
           font-weight: 900;
-          font-size: 22px;
-          line-height: 1;
-          cursor: pointer;
-          box-shadow: 0 2px 8px rgba(0,0,0,.14);
+          font-size: 13px;
+          cursor:pointer;
+          white-space: nowrap;
+        }
+        #filter-btn{
+          background: rgba(255,255,255,.92);
+          color: var(--navy);
+          border: 1px solid rgba(0,0,0,.08);
+        }
+        #clear-filters{
+          background: rgba(255,255,255,.12);
+          color: #fff;
+          border: 1px solid rgba(255,255,255,.25);
         }
 
-        /* Filters row */
-        .filters{
+        .active-filters{
           display:flex;
-          flex-wrap:wrap;
-          gap: 10px;
-          padding: 0 16px 12px 16px;
+          gap: 8px;
           align-items:center;
+          overflow-x:auto;
+          padding: 2px 4px;
+          min-width: 0;
+          flex: 1 1 auto;
         }
-        .filters .label{
-          color: #1f2a44;
-          font-weight: 850;
-          font-size: 13px;
-          margin-right: 4px;
-        }
-        .chip{
-          border: 1px solid #d8e1ee;
-          background: var(--chipBg);
-          color: var(--chipText);
-          border-radius: 999px;
-          padding: 7px 10px;
-          font-size: 12px;
-          font-weight: 800;
-          cursor: pointer;
-          user-select:none;
+        .active-filters::-webkit-scrollbar{ display:none; }
+
+        .pill{
           display:inline-flex;
           align-items:center;
           gap: 6px;
+          padding: 6px 10px;
+          border-radius: 999px;
+          font-size: 12px;
+          font-weight: 850;
+          border: 1px solid rgba(255,255,255,.25);
+          background: rgba(255,255,255,.12);
+          color: #fff;
+          white-space: nowrap;
+          user-select:none;
         }
-        .chip.active{
-          background: var(--chipActiveBg);
-          color: var(--chipActiveText);
-          border-color: rgba(0,0,0,.0);
-        }
-        .chip .x{
-          font-weight: 950;
-          opacity: .75;
+        .pill .x{
+          cursor:pointer;
+          font-weight: 900;
+          opacity: .9;
         }
-        .chip:hover{ filter: brightness(.98); }
 
-        .btn-clear{
-          margin-left: 6px;
-          border-radius: 10px;
-          padding: 7px 10px;
-          font-weight: 900;
-          border: 1px solid #d8e1ee;
-          background: #fff;
-          cursor:pointer;
+        #add-btn{
+          background: white;
+          color: var(--navy);
+          border: 1px solid rgba(0,0,0,.08);
+          border-radius: 12px;
+          padding: 12px 20px;
+          font-weight: 950;
+          font-size: 22px;
+          line-height: 1;
+          cursor: pointer;
+          box-shadow: 0 2px 8px rgba(0,0,0,.14);
+          flex: 0 0 auto;
         }
+        #add-btn:hover{ filter: brightness(.97); }
 
         .err{
           margin: 0 16px 10px 16px;
@@ -371,10 +422,12 @@ app_ui = ui.page_fluid(
           gap: 6px;
           align-items:center;
           flex: 0 0 auto;
-          max-width: 48%;
+          max-width: 52%;
           overflow:auto;
           padding-bottom: 2px;
         }
+        .tag-bar::-webkit-scrollbar{ display:none; }
+
         .tag-chip{
           border: 1px solid #d8e1ee;
           background: #fff;
@@ -393,8 +446,6 @@ app_ui = ui.page_fluid(
           font-weight: 950;
           opacity: .6;
         }
-        .tag-chip:hover{ filter: brightness(.98); }
-
         .tag-add{
           border: 1px dashed #cfd9ea;
           background: transparent;
@@ -488,7 +539,63 @@ app_ui = ui.page_fluid(
           color: #41516b;
         }
 
-        /* Delete modal (avoid Bootstrap conflicts) */
+        /* Popover (filters + tag add) */
+        .pop{
+          position: fixed;
+          background: white;
+          border: 1px solid #d8e1ee;
+          border-radius: 14px;
+          box-shadow: 0 10px 30px rgba(0,0,0,.18);
+          padding: 10px;
+          z-index: 999999;
+          width: 320px;
+          max-width: calc(100vw - 24px);
+        }
+        .pop h4{
+          margin: 2px 0 8px 0;
+          font-size: 13px;
+          font-weight: 950;
+          color:#1f2a44;
+        }
+        .pop .close{
+          position:absolute;
+          top: 8px;
+          right: 10px;
+          border:none;
+          background:transparent;
+          font-size: 18px;
+          font-weight: 900;
+          cursor:pointer;
+          color:#7b879c;
+        }
+        .checkrow{
+          display:flex;
+          align-items:center;
+          gap: 8px;
+          padding: 6px 6px;
+          border-radius: 10px;
+        }
+        .checkrow:hover{ background:#f6f8fe; }
+        .choice{
+          border: 1px solid #d5deef;
+          background: #f4f7fd;
+          border-radius: 999px;
+          padding: 6px 10px;
+          font-size: 12px;
+          font-weight: 850;
+          cursor:pointer;
+          color:#1f2a44;
+          display:inline-block;
+          margin: 4px 6px 0 0;
+        }
+        .row{
+          display:flex;
+          gap: 8px;
+          align-items:center;
+          margin-top: 8px;
+        }
+
+        /* Delete modal */
         .del-backdrop{
           position: fixed;
           inset: 0;
@@ -535,8 +642,16 @@ app_ui = ui.page_fluid(
         .btn[disabled]{ opacity: .55; cursor: not-allowed; }
         """
     ),
-    ui.tags.div({"class": "topbar"}, ui.tags.button("＋", {"id": "add-btn", "type": "button"})),
-    ui.tags.div({"id": "filters", "class": "filters"}),
+    ui.tags.div(
+        {"class": "topbar"},
+        ui.tags.div(
+            {"class": "top-left"},
+            ui.tags.button("Filters", {"id": "filter-btn", "type": "button"}),
+            ui.tags.div({"id": "active-filters", "class": "active-filters"}),
+            ui.tags.button("Clear", {"id": "clear-filters", "type": "button"}),
+        ),
+        ui.tags.button("＋", {"id": "add-btn", "type": "button"}),
+    ),
     ui.tags.div({"id": "err", "class": "err"}),
     ui.tags.div({"id": "grid", "class": "cards-grid"}),
     ui.tags.script(
@@ -545,20 +660,25 @@ app_ui = ui.page_fluid(
           const grid = document.getElementById("grid");
           const addBtn = document.getElementById("add-btn");
           const errBox = document.getElementById("err");
-          const filtersEl = document.getElementById("filters");
+          const filterBtn = document.getElementById("filter-btn");
+          const clearBtn = document.getElementById("clear-filters");
+          const activeFiltersEl = document.getElementById("active-filters");
+
+          const COMMON_TAGS = [
+            "Regression","Classification","Clustering","Dimensionality Reduction",
+            "Time Series","Survival","Bayesian","Causal",
+            "Linear","Tree-based","Neural Net","Ensemble",
+            "Interpretability","Calibration","Uncertainty",
+            "NLP","Computer Vision","Recommender","Anomaly Detection"
+          ];
 
           const state = { version: null, cards: [] };
           const saveTimers = new Map();
+          const filterTags = new Set();
+          let openPop = null;
 
-          // Tag suggestions (you can add more; custom tags are allowed too)
-          const DEFAULT_TAGS = [
-            "Regression", "Classification", "Time Series", "Causal",
-            "Tree-based", "Linear", "Bayesian", "Deep Learning",
-            "Unsupervised", "Dimensionality Reduction", "NLP", "Computer Vision",
-            "Ranking", "Survival"
-          ];
-
-          const activeFilters = new Set();
+          // password cached in-memory (not localStorage)
+          let sessionPassword = null;
 
           function showErr(msg){
             if(!msg){ errBox.style.display="none"; errBox.textContent=""; return; }
@@ -566,19 +686,6 @@ app_ui = ui.page_fluid(
             errBox.textContent = msg;
           }
 
-          async function api(path, opts={}){
-            const res = await fetch(path, {
-              headers: { "Content-Type": "application/json" },
-              cache: "no-store",
-              ...opts
-            });
-            const data = await res.json().catch(() => ({}));
-            if(!res.ok){
-              throw new Error(data?.error || ("HTTP " + res.status));
-            }
-            return data;
-          }
-
           function escapeHtml(str){
             return String(str ?? "")
               .replaceAll("&", "&")
@@ -595,78 +702,156 @@ app_ui = ui.page_fluid(
               .replaceAll(">", ">");
           }
 
-          function uniq(arr){
-            const out = [];
-            const seen = new Set();
-            for(const x of arr){
-              const s = String(x || "").trim();
-              if(!s) continue;
-              if(seen.has(s)) continue;
-              seen.add(s);
-              out.push(s);
+          async function api(path, opts={}){
+            const res = await fetch(path, {
+              headers: { "Content-Type": "application/json", ...(opts.headers || {}) },
+              cache: "no-store",
+              ...opts
+            });
+            const data = await res.json().catch(() => ({}));
+            if(!res.ok){
+              throw new Error(data?.error || ("HTTP " + res.status));
             }
-            return out;
+            return data;
+          }
+
+          function ensurePassword(actionLabel){
+            if(sessionPassword) return sessionPassword;
+            const p = (prompt(`Password required to ${actionLabel}:`) || "").trim();
+            if(!p) return null;
+            sessionPassword = p;
+            return sessionPassword;
+          }
+
+          function tagUniverse(){
+            const set = new Set(COMMON_TAGS);
+            (state.cards || []).forEach(c => (c.tags || []).forEach(t => set.add(String(t))));
+            return Array.from(set).sort((a,b) => a.localeCompare(b));
           }
 
-          function allKnownTags(){
-            const fromCards = [];
-            for(const c of state.cards){
-              const tags = Array.isArray(c.tags) ? c.tags : [];
-              for(const t of tags) fromCards.push(t);
+          function closePop(){
+            if(openPop){
+              openPop.remove();
+              openPop = null;
             }
-            return uniq([...DEFAULT_TAGS, ...fromCards]).sort((a,b)=>a.localeCompare(b));
           }
 
-          function cardMatchesFilters(card){
-            if(activeFilters.size === 0) return true;
-            const tags = new Set(Array.isArray(card.tags) ? card.tags : []);
-            for(const f of activeFilters){
-              if(tags.has(f)) return true; // OR logic
+          function openPopoverNear(anchorEl, html){
+            closePop();
+            const pop = document.createElement("div");
+            pop.className = "pop";
+            pop.innerHTML = html;
+            document.body.appendChild(pop);
+            openPop = pop;
+
+            const r = anchorEl.getBoundingClientRect();
+            const pad = 10;
+            let left = Math.min(r.left, window.innerWidth - pop.offsetWidth - pad);
+            left = Math.max(pad, left);
+            let top = r.bottom + 10;
+            if(top + pop.offsetHeight + pad > window.innerHeight){
+              top = Math.max(pad, r.top - pop.offsetHeight - 10);
             }
-            return false;
+            pop.style.left = `${left}px`;
+            pop.style.top = `${top}px`;
+
+            const closeBtn = pop.querySelector(".close");
+            if(closeBtn) closeBtn.addEventListener("click", closePop);
+
+            setTimeout(() => {
+              const onDoc = (e) => {
+                if(!openPop) return;
+                if(openPop.contains(e.target)) return;
+                if(anchorEl.contains(e.target)) return;
+                closePop();
+                document.removeEventListener("mousedown", onDoc);
+              };
+              document.addEventListener("mousedown", onDoc);
+            }, 0);
+
+            return pop;
           }
 
-          function renderFilters(){
-            const tags = allKnownTags();
+          function renderActiveFilters(){
+            activeFiltersEl.innerHTML = "";
+            Array.from(filterTags).sort().forEach(t => {
+              const pill = document.createElement("div");
+              pill.className = "pill";
+              pill.innerHTML = `${escapeHtml(t)} <span class="x">×</span>`;
+              pill.querySelector(".x").addEventListener("click", () => {
+                filterTags.delete(t);
+                renderActiveFilters();
+                render();
+              });
+              activeFiltersEl.appendChild(pill);
+            });
+          }
 
-            const chips = tags.map(t => {
-              const active = activeFilters.has(t) ? "active" : "";
-              return `<span class="chip ${active}" data-tag="${escapeAttr(t)}">${escapeHtml(t)}</span>`;
-            }).join("");
+          function passesFilter(card){
+            if(filterTags.size === 0) return true;
+            const tags = new Set((card.tags || []).map(String));
+            for(const f of filterTags){
+              if(tags.has(f)) return true; // OR logic
+            }
+            return false;
+          }
 
-            const any = activeFilters.size > 0;
-            filtersEl.innerHTML = `
-              <span class="label">Filters:</span>
-              ${chips}
-              <button class="btn-clear" id="clearFilters" type="button" ${any ? "" : "disabled"}>Clear</button>
+          function openFilterPopover(){
+            const all = tagUniverse();
+            const html = `
+              <button class="close" type="button">×</button>
+              <h4>Filter by tags</h4>
+              <div style="max-height: 320px; overflow:auto; padding-right: 4px;">
+                ${all.map(t => `
+                  <div class="checkrow">
+                    <input type="checkbox" class="flt" data-tag="${escapeAttr(t)}" ${filterTags.has(t) ? "checked" : ""}/>
+                    <div style="font-weight:850; font-size:12px; color:#1f2a44;">${escapeHtml(t)}</div>
+                  </div>
+                `).join("")}
+              </div>
+              <div class="row" style="justify-content:flex-end;">
+                <button class="choice" id="fltClear" type="button">Clear</button>
+              </div>
             `;
-
-            filtersEl.querySelectorAll(".chip").forEach(chip => {
-              chip.addEventListener("click", () => {
-                const t = chip.getAttribute("data-tag");
-                if(activeFilters.has(t)) activeFilters.delete(t);
-                else activeFilters.add(t);
-                renderFilters();
-                renderCardsOnly();
+            const pop = openPopoverNear(filterBtn, html);
+
+            pop.querySelectorAll(".flt").forEach(cb => {
+              cb.addEventListener("change", () => {
+                const t = cb.getAttribute("data-tag");
+                if(!t) return;
+                if(cb.checked) filterTags.add(t);
+                else filterTags.delete(t);
+                renderActiveFilters();
+                render();
               });
             });
 
-            filtersEl.querySelector("#clearFilters").addEventListener("click", () => {
-              activeFilters.clear();
-              renderFilters();
-              renderCardsOnly();
+            pop.querySelector("#fltClear").addEventListener("click", () => {
+              filterTags.clear();
+              renderActiveFilters();
+              render();
+              closePop();
             });
           }
 
-          async function doDelete(cardId){
-            const data = await api(`/api/cards/${encodeURIComponent(cardId)}`, { method: "DELETE" });
+          // ------------------------------------------------------------
+          // Delete modal (3 checks; final check is password)
+          // ------------------------------------------------------------
+          async function doDelete(cardId, password){
+            const data = await api(`/api/cards/${encodeURIComponent(cardId)}`, {
+              method: "DELETE",
+              headers: { "X-Password": password }
+            });
             state.version = data.version;
             state.cards = data.cards;
             showErr("");
+            renderActiveFilters();
             render();
           }
 
           function openDeleteModal(cardId){
+            closePop();
+
             const backdrop = document.createElement("div");
             backdrop.className = "del-backdrop";
             backdrop.innerHTML = `
@@ -679,8 +864,8 @@ app_ui = ui.page_fluid(
                   <label><input type="checkbox" id="chk2" /> I confirm I want to delete this card</label>
                 </div>
 
-                <label style="margin:8px 0 4px; color:#1f2a44; font-weight:800;">Type DELETE to confirm</label>
-                <input type="text" id="typed" value="" />
+                <label style="margin:8px 0 4px; color:#1f2a44; font-weight:900;">Password</label>
+                <input type="password" id="pw" value="" />
 
                 <div class="del-actions">
                   <button class="btn" id="cancel" type="button">Cancel</button>
@@ -692,16 +877,16 @@ app_ui = ui.page_fluid(
 
             const chk1 = backdrop.querySelector("#chk1");
             const chk2 = backdrop.querySelector("#chk2");
-            const typed = backdrop.querySelector("#typed");
+            const pw = backdrop.querySelector("#pw");
             const cancel = backdrop.querySelector("#cancel");
             const confirmBtn = backdrop.querySelector("#confirm");
 
             function updateEnabled(){
-              confirmBtn.disabled = !(chk1.checked && chk2.checked && (typed.value || "") === "DELETE");
+              confirmBtn.disabled = !(chk1.checked && chk2.checked && (pw.value || "").trim().length > 0);
             }
             chk1.addEventListener("change", updateEnabled);
             chk2.addEventListener("change", updateEnabled);
-            typed.addEventListener("input", updateEnabled);
+            pw.addEventListener("input", updateEnabled);
 
             function close(){ backdrop.remove(); }
             cancel.addEventListener("click", (e) => { e.preventDefault(); close(); });
@@ -709,38 +894,33 @@ app_ui = ui.page_fluid(
 
             confirmBtn.addEventListener("click", async (e) => {
               e.preventDefault();
-              try { await doDelete(cardId); } catch(err) { showErr(String(err.message || err)); }
+              const p = (pw.value || "").trim();
+              if(!p) return;
+              try {
+                // cache for this session so Add can reuse
+                sessionPassword = p;
+                await doDelete(cardId, p);
+              } catch(err) {
+                showErr(String(err.message || err));
+              }
               close();
             });
 
-            typed.focus();
+            pw.focus();
           }
 
-          function tagPrompt(existingTags){
-            // simple add flow: choose from list or custom
-            const known = allKnownTags();
-            const remaining = known.filter(t => !existingTags.includes(t));
-            const menu = remaining.slice(0, 12); // keep prompt readable
-            const promptText =
-              "Add a tag.\n\n" +
-              (menu.length ? ("Suggestions: " + menu.join(", ") + "\n\n") : "") +
-              "Type a tag name (exactly as you want it):";
-            const val = (prompt(promptText) || "").trim();
-            if(!val) return null;
-            return val;
-          }
+          // ------------------------------------------------------------
+          // Cards rendering
+          // ------------------------------------------------------------
+          function render(){
+            const visible = (state.cards || []).filter(passesFilter);
 
-          function renderCardsOnly(){
-            // renders only the grid (filters already rendered)
-            if(state.cards.length === 0){
+            if((state.cards || []).length === 0){
               grid.innerHTML = `<div class="empty"><b>No cards yet.</b><div>Click the ＋ to add your first card.</div></div>`;
               return;
             }
-
-            const visible = state.cards.filter(cardMatchesFilters);
-
             if(visible.length === 0){
-              grid.innerHTML = `<div class="empty"><b>No matches.</b><div>Clear filters to show all cards.</div></div>`;
+              grid.innerHTML = `<div class="empty"><b>No matches.</b><div>Adjust filters to see cards.</div></div>`;
               return;
             }
 
@@ -751,25 +931,19 @@ app_ui = ui.page_fluid(
               card.className = "card";
               card.dataset.id = c.id;
 
-              const titleFilled = (c.model || "").trim().length > 0;
-              if(titleFilled) card.classList.add("has-title");
-
-              const tags = Array.isArray(c.tags) ? c.tags : [];
+              const modelText = (c.model || "").trim();
+              if(modelText.length > 0) card.classList.add("has-title");
 
-              const tagHtml = titleFilled
-                ? `
-                  <div class="tag-bar">
-                    ${tags.map(t => `<span class="tag-chip" data-tag="${escapeAttr(t)}">${escapeHtml(t)} <span class="rm">×</span></span>`).join("")}
-                    <button class="tag-add" type="button">+ Tag</button>
-                  </div>
-                `
-                : `<div class="tag-bar" style="display:none;"></div>`;
+              let tags = Array.isArray(c.tags) ? c.tags.map(String) : [];
 
               card.innerHTML = `
                 <div class="card-header">
                   <div class="header-left">
                     <input class="title-input" type="text" value="${escapeHtml(c.model)}" placeholder="Model" />
-                    ${tagHtml}
+                    <div class="tag-bar" style="display:${modelText ? "flex" : "none"};">
+                      <span class="tags"></span>
+                      <button class="tag-add" type="button">+ Tag</button>
+                    </div>
                   </div>
                   <button class="del-btn" type="button" title="Delete">×</button>
                 </div>
@@ -779,7 +953,6 @@ app_ui = ui.page_fluid(
                     <label>How it Works</label>
                     <textarea class="how">${escapeHtml(c.how_it_works)}</textarea>
                   </div>
-
                   <div class="panel">
                     <label>Use Cases</label>
                     <textarea class="use">${escapeHtml(c.use_cases)}</textarea>
@@ -793,14 +966,14 @@ app_ui = ui.page_fluid(
                 </div>
               `;
 
-              const delBtn  = card.querySelector(".del-btn");
-              const titleEl = card.querySelector(".title-input");
-              const howEl   = card.querySelector(".how");
-              const useEl   = card.querySelector(".use");
-              const linkEl  = card.querySelector(".link");
+              const delBtn   = card.querySelector(".del-btn");
+              const titleEl  = card.querySelector(".title-input");
+              const howEl    = card.querySelector(".how");
+              const useEl    = card.querySelector(".use");
+              const linkEl   = card.querySelector(".link");
               const linkWrap = card.querySelector(".linkwrap");
-
-              const tagBar = card.querySelector(".tag-bar");
+              const tagBar   = card.querySelector(".tag-bar");
+              const tagsWrap = card.querySelector(".tags");
               const tagAddBtn = card.querySelector(".tag-add");
 
               function updateLink(){
@@ -810,23 +983,38 @@ app_ui = ui.page_fluid(
                   : "";
               }
 
-              function updateTitleStyleAndTagBar(){
+              function updateTitleStyle(){
                 const has = (titleEl.value || "").trim().length > 0;
                 card.classList.toggle("has-title", has);
-                // show/hide tag bar
-                if(tagBar){
-                  tagBar.style.display = has ? "flex" : "none";
-                }
+                if(tagBar) tagBar.style.display = has ? "flex" : "none";
               }
 
-              async function saveNow(extraPayload = null){
+              function renderTags(){
+                tagsWrap.innerHTML = "";
+                tags.forEach(t => {
+                  const chip = document.createElement("span");
+                  chip.className = "tag-chip";
+                  chip.innerHTML = `${escapeHtml(t)} <span class="rm">×</span>`;
+                  chip.addEventListener("click", (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    tags = tags.filter(x => x !== t);
+                    renderTags();
+                    scheduleSave({ tags });
+                    renderActiveFilters();
+                  });
+                  tagsWrap.appendChild(chip);
+                });
+              }
+
+              async function saveNow(extra = null){
                 const payload = {
                   model: titleEl.value || "",
                   how_it_works: howEl.value || "",
                   use_cases: useEl.value || "",
                   link: linkEl.value || "",
                 };
-                if(extraPayload) Object.assign(payload, extraPayload);
+                if(extra) Object.assign(payload, extra);
 
                 try{
                   const data = await api(`/api/cards/${encodeURIComponent(c.id)}`, {
@@ -837,67 +1025,129 @@ app_ui = ui.page_fluid(
                   state.cards = data.cards;
                   showErr("");
                   updateLink();
-                  updateTitleStyleAndTagBar();
-                  renderFilters();     // tags may have changed
-                  renderCardsOnly();   // so filtering reflects new tags
+                  updateTitleStyle();
                 }catch(e){
                   showErr(String(e.message || e));
                 }
               }
 
-              function scheduleSave(){
+              function scheduleSave(extra = null){
                 updateLink();
-                updateTitleStyleAndTagBar();
+                updateTitleStyle();
                 const existing = saveTimers.get(c.id);
                 if(existing) clearTimeout(existing);
-                saveTimers.set(c.id, setTimeout(() => saveNow(), 350));
+                saveTimers.set(c.id, setTimeout(() => saveNow(extra), 350));
               }
 
-              [titleEl, howEl, useEl, linkEl].forEach(el => el.addEventListener("input", scheduleSave));
+              // Tag adding popover with suggestions + custom
+              function openTagPopover(){
+                if(!(titleEl.value || "").trim()) return;
 
-              delBtn.addEventListener("click", (e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                openDeleteModal(c.id);
-              });
+                const all = tagUniverse().filter(t => !tags.includes(t));
 
-              // Tag interactions (only if title is filled)
-              if(tagAddBtn){
-                tagAddBtn.addEventListener("click", async (e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  const current = Array.isArray(c.tags) ? c.tags.slice() : [];
-                  const t = tagPrompt(current);
-                  if(!t) return;
-                  if(!current.includes(t)) current.push(t);
-                  await saveNow({ tags: current });
+                const html = `
+                  <button class="close" type="button">×</button>
+                  <h4>Add tags</h4>
+                  <div>
+                    ${all.slice(0, 18).map(t => `<button class="choice" data-tag="${escapeAttr(t)}" type="button">${escapeHtml(t)}</button>`).join("")}
+                  </div>
+                  <div class="row">
+                    <input id="customTag" type="text" placeholder="Custom tag…" />
+                    <button class="choice" id="addCustom" type="button">Add</button>
+                  </div>
+                `;
+
+                const pop = openPopoverNear(tagAddBtn, html);
+
+                pop.querySelectorAll(".choice[data-tag]").forEach(btn => {
+                  btn.addEventListener("click", () => {
+                    const t = btn.getAttribute("data-tag");
+                    if(!t) return;
+                    if(!tags.includes(t)) tags = [...tags, t];
+                    renderTags();
+                    scheduleSave({ tags });
+                    renderActiveFilters();
+                  });
                 });
-              }
 
-              if(tagBar){
-                tagBar.querySelectorAll(".tag-chip").forEach(ch => {
-                  ch.addEventListener("click", async (e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    const t = ch.getAttribute("data-tag");
-                    const current = Array.isArray(c.tags) ? c.tags.slice() : [];
-                    const next = current.filter(x => x !== t);
-                    await saveNow({ tags: next });
-                  });
+                const customInput = pop.querySelector("#customTag");
+                const addCustom = pop.querySelector("#addCustom");
+                function addCustomTag(){
+                  const t = (customInput.value || "").trim();
+                  if(!t) return;
+                  if(!tags.includes(t)) tags = [...tags, t];
+                  customInput.value = "";
+                  renderTags();
+                  scheduleSave({ tags });
+                  renderActiveFilters();
+                }
+                addCustom.addEventListener("click", addCustomTag);
+                customInput.addEventListener("keydown", (e) => {
+                  if(e.key === "Enter"){ e.preventDefault(); addCustomTag(); }
                 });
+                customInput.focus();
               }
 
+              // events
+              [titleEl, howEl, useEl, linkEl].forEach(el => el.addEventListener("input", () => scheduleSave()));
+              tagAddBtn.addEventListener("click", (e) => { e.preventDefault(); e.stopPropagation(); openTagPopover(); });
+
+              delBtn.addEventListener("click", (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                openDeleteModal(c.id);
+              });
+
               updateLink();
-              updateTitleStyleAndTagBar();
+              updateTitleStyle();
+              renderTags();
               grid.appendChild(card);
             });
           }
 
-          function render(){
-            renderFilters();
-            renderCardsOnly();
-          }
+          // ------------------------------------------------------------
+          // Top bar filter controls
+          // ------------------------------------------------------------
+          filterBtn.addEventListener("click", (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            openFilterPopover();
+          });
 
+          clearBtn.addEventListener("click", (e) => {
+            e.preventDefault();
+            filterTags.clear();
+            renderActiveFilters();
+            render();
+          });
+
+          // ------------------------------------------------------------
+          // Add card (password required)
+          // ------------------------------------------------------------
+          addBtn.addEventListener("click", async () => {
+            const p = ensurePassword("add a card");
+            if(!p) return;
+
+            try{
+              const data = await api("/api/cards", {
+                method: "POST",
+                headers: { "X-Password": p },
+              });
+              state.version = data.version;
+              state.cards = data.cards;
+              showErr("");
+              renderActiveFilters();
+              render();
+            }catch(e){
+              // if password wrong, forget cached
+              sessionPassword = null;
+              showErr(String(e.message || e));
+            }
+          });
+
+          // ------------------------------------------------------------
+          // Polling refresh
+          // ------------------------------------------------------------
           async function refresh(){
             try{
               const active = document.activeElement;
@@ -909,6 +1159,7 @@ app_ui = ui.page_fluid(
                 state.version = data.version;
                 state.cards = data.cards;
                 showErr("");
+                renderActiveFilters();
                 render();
               }
             }catch(e){
@@ -916,20 +1167,12 @@ app_ui = ui.page_fluid(
             }
           }
 
-          addBtn.addEventListener("click", async () => {
-            try{
-              const data = await api("/api/cards", { method: "POST" });
-              state.version = data.version;
-              state.cards = data.cards;
-              showErr("");
-              render();
-            }catch(e){
-              showErr(String(e.message || e));
-            }
-          });
-
-          refresh().then(render);
-          setInterval(refresh, 2500);
+          (async () => {
+            await refresh();
+            renderActiveFilters();
+            render();
+            setInterval(refresh, 2500);
+          })();
         })();
         """
     ),