Update app.py

app.py

@@ -1,4 +1,4 @@
-# app.py  (Shiny for Python UI + Starlette JSON API, shared persistence)
+# app.py  (Shiny for Python UI + Starlette JSON API, shared "published" board + local drafts)
 
 from __future__ import annotations
 
@@ -17,7 +17,7 @@ from starlette.routing import Mount, Route
 
 
 # -----------------------------------------------------------------------------
-# Shared persistence (server-side JSON file)
+# Shared persistence for PUBLISHED cards (server-side JSON)
 # -----------------------------------------------------------------------------
 
 def _pick_state_dir() -> Path:
@@ -37,24 +37,7 @@ 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": [],
-        "how_it_works": "",
-        "use_cases": "",
-        "link": "",
-    }
+SERVER_PASSWORD = (os.environ.get("password") or "").strip()
 
 
 def _normalize_tags(x) -> list[str]:
@@ -64,7 +47,7 @@ def _normalize_tags(x) -> list[str]:
         x = [t.strip() for t in x.split(",")]
     if not isinstance(x, list):
         return []
-    out = []
+    out: list[str] = []
     for t in x:
         if t is None:
             continue
@@ -74,14 +57,23 @@ def _normalize_tags(x) -> list[str]:
     return out
 
 
+def _new_published_card(payload: dict) -> dict:
+    return {
+        "id": str(uuid4())[:12],
+        "model": str(payload.get("model") or "").strip(),
+        "tags": _normalize_tags(payload.get("tags")),
+        "how_it_works": str(payload.get("how_it_works") or ""),
+        "use_cases": str(payload.get("use_cases") or ""),
+        "link": str(payload.get("link") or "").strip(),
+    }
+
+
 def _normalize_state(obj: dict) -> dict:
     if not isinstance(obj, dict):
         obj = {}
-
     version = obj.get("version", 0)
     if not isinstance(version, int):
         version = 0
-
     cards = obj.get("cards", [])
     if not isinstance(cards, list):
         cards = []
@@ -90,30 +82,16 @@ def _normalize_state(obj: dict) -> dict:
     for c in cards:
         if not isinstance(c, dict):
             continue
-
-        model = c.get("model", c.get("title", ""))
-        how_it_works = c.get("how_it_works", c.get("how", ""))
-        use_cases = c.get("use_cases", c.get("use", ""))
-        link = c.get("link", c.get("resource_url", ""))
-
-        tags = (
-            c.get("tags")
-            if "tags" in c
-            else c.get("categories", c.get("tag", c.get("model_tags", [])))
-        )
-        tags = _normalize_tags(tags)
-
         normalized.append(
             {
                 "id": str(c.get("id") or str(uuid4())[:12]),
-                "model": "" if model is None else str(model),
-                "tags": tags,
-                "how_it_works": "" if how_it_works is None else str(how_it_works),
-                "use_cases": "" if use_cases is None else str(use_cases),
-                "link": "" if link is None else str(link),
+                "model": str(c.get("model") or c.get("title") or ""),
+                "tags": _normalize_tags(c.get("tags") or c.get("categories") or []),
+                "how_it_works": str(c.get("how_it_works") or c.get("how") or ""),
+                "use_cases": str(c.get("use_cases") or c.get("use") or ""),
+                "link": str(c.get("link") or c.get("resource_url") or ""),
             }
         )
-
     return {"version": version, "cards": normalized}
 
 
@@ -121,8 +99,7 @@ def _read_state_sync() -> dict:
     if not STATE_PATH.exists():
         return {"version": 0, "cards": []}
     try:
-        obj = json.loads(STATE_PATH.read_text(encoding="utf-8"))
-        return _normalize_state(obj)
+        return _normalize_state(json.loads(STATE_PATH.read_text(encoding="utf-8")))
     except Exception:
         return {"version": 0, "cards": []}
 
@@ -147,33 +124,22 @@ 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)
-    """
+def _check_password(request: Request, payload: dict | None = None) -> bool:
     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")
+    provided = request.headers.get("X-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
+# API: published cards only
+#   GET  /api/cards          -> list published
+#   POST /api/cards          -> publish a new card (requires password)
+#   DELETE /api/cards/{id}   -> delete published (requires password)
 # -----------------------------------------------------------------------------
 
 async def api_cards(request: Request) -> Response:
@@ -181,12 +147,23 @@ 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()
+        try:
+            payload = await request.json()
+        except Exception:
+            payload = {}
+
+        if not isinstance(payload, dict) or not _check_password(request, payload):
+            return _json({"error": "Unauthorized"}, status_code=401)
+
+        # Create published card from payload
+        card = _new_published_card(payload)
+
+        # Basic "filled out" guard server-side (model required)
+        if not card["model"]:
+            return _json({"error": "Model is required"}, status_code=400)
 
         state = await get_state()
-        state["cards"].append(_new_card())
+        state["cards"].append(card)
         state["version"] += 1
         await set_state(state)
         return _json(state)
@@ -204,44 +181,20 @@ 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()
+        # admin delete
+        if not _check_password(request):
+            return _json({"error": "Unauthorized"}, status_code=401)
 
         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:
-            return _json({"error": "Invalid JSON"}, status_code=400)
-
-        if not isinstance(payload, dict):
-            return _json({"error": "Invalid payload"}, status_code=400)
-
-        allowed = {"model", "tags", "how_it_works", "use_cases", "link"}
-        for k in allowed:
-            if k not in payload:
-                continue
-            if k == "tags":
-                cards[idx]["tags"] = _normalize_tags(payload.get("tags"))
-            else:
-                cards[idx][k] = "" if payload[k] is None else str(payload[k])
-
-        state["version"] += 1
-        await set_state(state)
-        return _json(state)
-
     return _json({"error": "Method not allowed"}, status_code=405)
 
 
 # -----------------------------------------------------------------------------
-# Shiny UI (client uses fetch() to call the API above)
+# Shiny UI (client-side drafts + server-side published)
 # -----------------------------------------------------------------------------
 
 app_ui = ui.page_fluid(
@@ -254,10 +207,11 @@ app_ui = ui.page_fluid(
           --cardBg:#ffffff;
           --muted:#6b778c;
           --headerBg:#f3f6fb;
+          --good:#167d3a;
         }
         body { background: #f3f6fb; }
 
-        /* Top bar: filters left (compact), + right */
+        /* Top bar: Filters UI moved into it */
         .topbar{
           background: linear-gradient(0deg, var(--navy2), var(--navy));
           padding: 12px 14px;
@@ -276,6 +230,7 @@ app_ui = ui.page_fluid(
           min-width: 0;
           flex: 1 1 auto;
         }
+
         #filter-btn, #clear-filters{
           border-radius: 12px;
           padding: 9px 12px;
@@ -320,11 +275,7 @@ app_ui = ui.page_fluid(
           white-space: nowrap;
           user-select:none;
         }
-        .pill .x{
-          cursor:pointer;
-          font-weight: 900;
-          opacity: .9;
-        }
+        .pill .x{ cursor:pointer; font-weight: 900; opacity: .9; }
 
         #add-btn{
           background: white;
@@ -339,7 +290,6 @@ app_ui = ui.page_fluid(
           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;
@@ -380,7 +330,6 @@ app_ui = ui.page_fluid(
           min-height: 0;
         }
 
-        /* Header with title + tags + delete */
         .card-header{
           background: var(--headerBg);
           display:flex;
@@ -398,7 +347,8 @@ app_ui = ui.page_fluid(
           flex: 1 1 auto;
           min-width: 0;
         }
-        .title-input{
+
+        .title-input, .title-text{
           flex: 1 1 auto;
           min-width: 140px;
           border: none;
@@ -416,6 +366,7 @@ app_ui = ui.page_fluid(
           background: rgba(255,255,255,.85);
           border: 1px solid #d8e1ee;
         }
+        .title-text{ font-weight: 950; }
 
         .tag-bar{
           display:flex;
@@ -427,7 +378,6 @@ app_ui = ui.page_fluid(
           padding-bottom: 2px;
         }
         .tag-bar::-webkit-scrollbar{ display:none; }
-
         .tag-chip{
           border: 1px solid #d8e1ee;
           background: #fff;
@@ -442,10 +392,7 @@ app_ui = ui.page_fluid(
           cursor:pointer;
           white-space: nowrap;
         }
-        .tag-chip .rm{
-          font-weight: 950;
-          opacity: .6;
-        }
+        .tag-chip .rm{ font-weight: 950; opacity: .6; }
         .tag-add{
           border: 1px dashed #cfd9ea;
           background: transparent;
@@ -457,6 +404,39 @@ app_ui = ui.page_fluid(
           white-space:nowrap;
         }
 
+        .hdr-right{
+          display:flex;
+          align-items:center;
+          gap: 8px;
+          flex: 0 0 auto;
+        }
+
+        .draft-badge{
+          font-size: 11px;
+          font-weight: 950;
+          padding: 6px 10px;
+          border-radius: 999px;
+          background: #fff7ed;
+          border: 1px solid #fed7aa;
+          color: #9a3412;
+          user-select:none;
+        }
+
+        .post-btn{
+          border-radius: 12px;
+          padding: 8px 12px;
+          font-weight: 950;
+          border: 1px solid rgba(0,0,0,.08);
+          background: #eaf7ef;
+          color: var(--good);
+          cursor:pointer;
+          white-space:nowrap;
+        }
+        .post-btn:disabled{
+          opacity: .55;
+          cursor: not-allowed;
+        }
+
         .del-btn{
           border: none;
           background: transparent;
@@ -508,6 +488,7 @@ app_ui = ui.page_fluid(
           overflow: auto;
           line-height: 1.25;
         }
+        textarea[readonly]{ background:#f8fafc; }
 
         .card-footer{
           padding: 12px;
@@ -524,6 +505,7 @@ app_ui = ui.page_fluid(
           outline: none;
           background: white;
         }
+        input[readonly]{ background:#f8fafc; }
         .resource-link{
           display:inline-block;
           margin-top: 8px;
@@ -539,7 +521,7 @@ app_ui = ui.page_fluid(
           color: #41516b;
         }
 
-        /* Popover (filters + tag add) */
+        /* Popovers */
         .pop{
           position: fixed;
           background: white;
@@ -595,7 +577,42 @@ app_ui = ui.page_fluid(
           margin-top: 8px;
         }
 
-        /* Delete modal */
+        /* Password modal for POST */
+        .pw-backdrop{
+          position: fixed;
+          inset: 0;
+          background: rgba(0,0,0,.35);
+          display:flex;
+          align-items:center;
+          justify-content:center;
+          z-index: 999999;
+        }
+        .pw-dialog{
+          width: min(520px, calc(100vw - 28px));
+          background: white;
+          border-radius: 14px;
+          box-shadow: 0 10px 30px rgba(0,0,0,.25);
+          padding: 14px 14px 12px 14px;
+          display:block;
+        }
+        .pw-dialog h3{ margin: 0 0 8px 0; font-size: 16px; }
+        .pw-muted{ color: var(--muted); font-size: 13px; margin-bottom: 10px; }
+        .pw-actions{ display:flex; gap: 10px; justify-content:flex-end; margin-top: 12px; }
+        .btn{
+          border-radius: 12px;
+          padding: 9px 12px;
+          font-weight: 850;
+          cursor:pointer;
+          border: 1px solid #d8e1ee;
+          background: #ffffff;
+        }
+        .btn-primary{
+          background:#eaf7ef;
+          border-color:#bbf7d0;
+          color: var(--good);
+        }
+
+        /* Admin delete modal (published only) */
         .del-backdrop{
           position: fixed;
           inset: 0;
@@ -626,14 +643,6 @@ app_ui = ui.page_fluid(
           gap: 8px;
         }
         .del-actions{ display:flex; gap: 10px; justify-content:flex-end; margin-top: 12px; }
-        .btn{
-          border-radius: 12px;
-          padding: 9px 12px;
-          font-weight: 850;
-          cursor:pointer;
-          border: 1px solid #d8e1ee;
-          background: #ffffff;
-        }
         .btn-danger{
           border: 1px solid #fecdd3;
           background: #fff1f2;
@@ -657,6 +666,8 @@ app_ui = ui.page_fluid(
     ui.tags.script(
         r"""
         (() => {
+          const DRAFTS_KEY = "model_cards_drafts_v1";
+
           const grid = document.getElementById("grid");
           const addBtn = document.getElementById("add-btn");
           const errBox = document.getElementById("err");
@@ -672,14 +683,12 @@ app_ui = ui.page_fluid(
             "NLP","Computer Vision","Recommender","Anomaly Detection"
           ];
 
-          const state = { version: null, cards: [] };
-          const saveTimers = new Map();
+          const state = { version: null, published: [] };
+          let drafts = loadDrafts();
+          const saveTimers = new Map(); // draftId -> timeout for local save
           const filterTags = new Set();
           let openPop = null;
 
-          // password cached in-memory (not localStorage)
-          let sessionPassword = null;
-
           function showErr(msg){
             if(!msg){ errBox.style.display="none"; errBox.textContent=""; return; }
             errBox.style.display="block";
@@ -715,25 +724,41 @@ app_ui = ui.page_fluid(
             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 uid(){
+            return "draft_" + (Date.now().toString(36) + Math.random().toString(36).slice(2, 8));
+          }
+
+          function loadDrafts(){
+            try{
+              const raw = localStorage.getItem(DRAFTS_KEY);
+              const arr = JSON.parse(raw || "[]");
+              if(!Array.isArray(arr)) return [];
+              return arr.map(d => ({
+                id: String(d.id || uid()),
+                model: String(d.model || ""),
+                tags: Array.isArray(d.tags) ? d.tags.map(String) : [],
+                how_it_works: String(d.how_it_works || ""),
+                use_cases: String(d.use_cases || ""),
+                link: String(d.link || "")
+              }));
+            }catch(e){
+              return [];
+            }
+          }
+
+          function saveDrafts(){
+            localStorage.setItem(DRAFTS_KEY, JSON.stringify(drafts));
           }
 
           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));
+            for(const c of state.published){ (c.tags || []).forEach(t => set.add(String(t))); }
+            for(const d of drafts){ (d.tags || []).forEach(t => set.add(String(t))); }
+            return Array.from(set).sort((a,b)=>a.localeCompare(b));
           }
 
           function closePop(){
-            if(openPop){
-              openPop.remove();
-              openPop = null;
-            }
+            if(openPop){ openPop.remove(); openPop = null; }
           }
 
           function openPopoverNear(anchorEl, html){
@@ -791,7 +816,7 @@ app_ui = ui.page_fluid(
             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
+              if(tags.has(f)) return true; // OR
             }
             return false;
           }
@@ -835,28 +860,67 @@ app_ui = ui.page_fluid(
           }
 
           // ------------------------------------------------------------
-          // Delete modal (3 checks; final check is password)
+          // POST modal (password only shown on Post)
           // ------------------------------------------------------------
-          async function doDelete(cardId, password){
-            const data = await api(`/api/cards/${encodeURIComponent(cardId)}`, {
-              method: "DELETE",
-              headers: { "X-Password": password }
+          function openPostModal(draft, onConfirm){
+            closePop();
+
+            const backdrop = document.createElement("div");
+            backdrop.className = "pw-backdrop";
+            backdrop.innerHTML = `
+              <div class="pw-dialog" role="dialog" aria-modal="true">
+                <h3>Post this card?</h3>
+                <div class="pw-muted">This will publish the card for everyone to see.</div>
+
+                <label style="margin:8px 0 4px; color:#1f2a44; font-weight:900;">Password</label>
+                <input type="password" id="pw" value="" />
+
+                <div class="pw-actions">
+                  <button class="btn" id="cancel" type="button">Cancel</button>
+                  <button class="btn btn-primary" id="confirm" type="button" disabled>Post</button>
+                </div>
+              </div>
+            `;
+            document.body.appendChild(backdrop);
+
+            const pw = backdrop.querySelector("#pw");
+            const cancel = backdrop.querySelector("#cancel");
+            const confirmBtn = backdrop.querySelector("#confirm");
+
+            function updateEnabled(){
+              confirmBtn.disabled = ((pw.value || "").trim().length === 0);
+            }
+            pw.addEventListener("input", updateEnabled);
+
+            function close(){ backdrop.remove(); }
+            cancel.addEventListener("click", (e) => { e.preventDefault(); close(); });
+            backdrop.addEventListener("click", (e) => { if(e.target === backdrop) close(); });
+
+            confirmBtn.addEventListener("click", async (e) => {
+              e.preventDefault();
+              const p = (pw.value || "").trim();
+              if(!p) return;
+              try{
+                await onConfirm(p);
+              } finally {
+                close();
+              }
             });
-            state.version = data.version;
-            state.cards = data.cards;
-            showErr("");
-            renderActiveFilters();
-            render();
+
+            pw.focus();
           }
 
-          function openDeleteModal(cardId){
+          // ------------------------------------------------------------
+          // Optional: admin delete published (password + 2 checks)
+          // ------------------------------------------------------------
+          function openDeletePublishedModal(cardId, onConfirm){
             closePop();
 
             const backdrop = document.createElement("div");
             backdrop.className = "del-backdrop";
             backdrop.innerHTML = `
               <div class="del-dialog" role="dialog" aria-modal="true">
-                <h3>Delete card?</h3>
+                <h3>Delete published card?</h3>
                 <div class="del-muted">This is permanent and affects everyone viewing this Space.</div>
 
                 <div class="del-checks">
@@ -896,85 +960,96 @@ app_ui = ui.page_fluid(
               e.preventDefault();
               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));
+              try{
+                await onConfirm(p);
+              } finally {
+                close();
               }
-              close();
             });
 
             pw.focus();
           }
 
           // ------------------------------------------------------------
-          // Cards rendering
+          // Draft helpers
           // ------------------------------------------------------------
+          function draftFilled(d){
+            const hasModel = (d.model || "").trim().length > 0;
+            const hasSome = ((d.how_it_works || "").trim() || (d.use_cases || "").trim() || (d.link || "").trim() || (d.tags||[]).length > 0);
+            return hasModel && !!hasSome;
+          }
+
           function render(){
-            const visible = (state.cards || []).filter(passesFilter);
+            const visibleDrafts = drafts.filter(passesFilter);
+            const visiblePublished = state.published.filter(passesFilter);
 
-            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>`;
+            if(drafts.length === 0 && state.published.length === 0){
+              grid.innerHTML = `<div class="empty"><b>No cards yet.</b><div>Click the ＋ to add a draft, then Post to publish.</div></div>`;
               return;
             }
-            if(visible.length === 0){
+
+            if(visibleDrafts.length === 0 && visiblePublished.length === 0){
               grid.innerHTML = `<div class="empty"><b>No matches.</b><div>Adjust filters to see cards.</div></div>`;
               return;
             }
 
             grid.innerHTML = "";
 
-            visible.forEach((c) => {
+            // ---- Drafts first (private) ----
+            visibleDrafts.forEach((d) => {
               const card = document.createElement("div");
               card.className = "card";
-              card.dataset.id = c.id;
+              card.dataset.id = d.id;
 
-              const modelText = (c.model || "").trim();
-              if(modelText.length > 0) card.classList.add("has-title");
+              const modelText = (d.model || "").trim();
+              if(modelText) card.classList.add("has-title");
 
-              let tags = Array.isArray(c.tags) ? c.tags.map(String) : [];
+              let tags = Array.isArray(d.tags) ? d.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" />
+                    <input class="title-input" type="text" value="${escapeHtml(d.model)}" placeholder="Model" />
                     <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 class="hdr-right">
+                    <span class="draft-badge">Draft</span>
+                    <button class="post-btn" type="button" ${draftFilled(d) ? "" : "disabled"}>Post</button>
+                    <button class="del-btn" type="button" title="Delete draft">×</button>
+                  </div>
                 </div>
 
                 <div class="card-main">
                   <div class="panel">
                     <label>How it Works</label>
-                    <textarea class="how">${escapeHtml(c.how_it_works)}</textarea>
+                    <textarea class="how">${escapeHtml(d.how_it_works)}</textarea>
                   </div>
                   <div class="panel">
                     <label>Use Cases</label>
-                    <textarea class="use">${escapeHtml(c.use_cases)}</textarea>
+                    <textarea class="use">${escapeHtml(d.use_cases)}</textarea>
                   </div>
                 </div>
 
                 <div class="card-footer">
                   <label>Link</label>
-                  <input type="text" class="link" value="${escapeHtml(c.link)}" />
+                  <input type="text" class="link" value="${escapeHtml(d.link)}" />
                   <div class="linkwrap"></div>
                 </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 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");
+              const postBtn = card.querySelector(".post-btn");
+              const delBtn = card.querySelector(".del-btn");
 
               function updateLink(){
                 const url = (linkEl.value || "").trim();
@@ -983,10 +1058,16 @@ app_ui = ui.page_fluid(
                   : "";
               }
 
-              function updateTitleStyle(){
-                const has = (titleEl.value || "").trim().length > 0;
-                card.classList.toggle("has-title", has);
-                if(tagBar) tagBar.style.display = has ? "flex" : "none";
+              function updateTitleAndPost(){
+                const hasTitle = (titleEl.value || "").trim().length > 0;
+                card.classList.toggle("has-title", hasTitle);
+                tagBar.style.display = hasTitle ? "flex" : "none";
+
+                // update draft object + post enabled
+                const updated = getDraft(d.id);
+                if(updated){
+                  postBtn.disabled = !draftFilled(updated);
+                }
               }
 
               function renderTags(){
@@ -999,64 +1080,52 @@ app_ui = ui.page_fluid(
                     e.preventDefault();
                     e.stopPropagation();
                     tags = tags.filter(x => x !== t);
+                    setDraftField(d.id, "tags", tags);
                     renderTags();
-                    scheduleSave({ tags });
                     renderActiveFilters();
+                    updateTitleAndPost();
                   });
                   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(extra) Object.assign(payload, extra);
-
-                try{
-                  const data = await api(`/api/cards/${encodeURIComponent(c.id)}`, {
-                    method: "PUT",
-                    body: JSON.stringify(payload),
-                  });
-                  state.version = data.version;
-                  state.cards = data.cards;
-                  showErr("");
-                  updateLink();
-                  updateTitleStyle();
-                }catch(e){
-                  showErr(String(e.message || e));
-                }
+              function getDraft(id){
+                return drafts.find(x => x.id === id) || null;
+              }
+
+              function setDraftField(id, key, value){
+                const i = drafts.findIndex(x => x.id === id);
+                if(i === -1) return;
+                drafts[i] = { ...drafts[i], [key]: value };
+                saveDrafts();
               }
 
-              function scheduleSave(extra = null){
-                updateLink();
-                updateTitleStyle();
-                const existing = saveTimers.get(c.id);
+              function scheduleDraftSave(){
+                const existing = saveTimers.get(d.id);
                 if(existing) clearTimeout(existing);
-                saveTimers.set(c.id, setTimeout(() => saveNow(extra), 350));
+                saveTimers.set(d.id, setTimeout(() => {
+                  setDraftField(d.id, "model", titleEl.value || "");
+                  setDraftField(d.id, "how_it_works", howEl.value || "");
+                  setDraftField(d.id, "use_cases", useEl.value || "");
+                  setDraftField(d.id, "link", linkEl.value || "");
+                  setDraftField(d.id, "tags", tags);
+                  updateLink();
+                  updateTitleAndPost();
+                }, 150));
               }
 
-              // Tag adding popover with suggestions + custom
               function openTagPopover(){
                 if(!(titleEl.value || "").trim()) return;
-
                 const all = tagUniverse().filter(t => !tags.includes(t));
-
                 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>${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 => {
@@ -1064,9 +1133,10 @@ app_ui = ui.page_fluid(
                     const t = btn.getAttribute("data-tag");
                     if(!t) return;
                     if(!tags.includes(t)) tags = [...tags, t];
+                    setDraftField(d.id, "tags", tags);
                     renderTags();
-                    scheduleSave({ tags });
                     renderActiveFilters();
+                    updateTitleAndPost();
                   });
                 });
 
@@ -1077,9 +1147,10 @@ app_ui = ui.page_fluid(
                   if(!t) return;
                   if(!tags.includes(t)) tags = [...tags, t];
                   customInput.value = "";
+                  setDraftField(d.id, "tags", tags);
                   renderTags();
-                  scheduleSave({ tags });
                   renderActiveFilters();
+                  updateTitleAndPost();
                 }
                 addCustom.addEventListener("click", addCustomTag);
                 customInput.addEventListener("keydown", (e) => {
@@ -1088,26 +1159,136 @@ app_ui = ui.page_fluid(
                 customInput.focus();
               }
 
-              // events
-              [titleEl, howEl, useEl, linkEl].forEach(el => el.addEventListener("input", () => scheduleSave()));
-              tagAddBtn.addEventListener("click", (e) => { e.preventDefault(); e.stopPropagation(); openTagPopover(); });
+              // Post draft to published (password prompt happens here)
+              postBtn.addEventListener("click", async () => {
+                const current = getDraft(d.id);
+                if(!current || !draftFilled(current)) return;
+
+                openPostModal(current, async (password) => {
+                  try{
+                    const payload = {
+                      password,
+                      model: current.model,
+                      tags: current.tags || [],
+                      how_it_works: current.how_it_works,
+                      use_cases: current.use_cases,
+                      link: current.link,
+                    };
+
+                    const data = await api("/api/cards", {
+                      method: "POST",
+                      body: JSON.stringify(payload),
+                      headers: { "X-Password": password },
+                    });
+
+                    // remove draft locally on success
+                    drafts = drafts.filter(x => x.id !== current.id);
+                    saveDrafts();
+
+                    // update published
+                    state.version = data.version;
+                    state.published = data.cards;
+
+                    showErr("");
+                    renderActiveFilters();
+                    render();
+                  }catch(e){
+                    showErr(String(e.message || e));
+                  }
+                });
+              });
 
-              delBtn.addEventListener("click", (e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                openDeleteModal(c.id);
+              // Delete draft (local only)
+              delBtn.addEventListener("click", () => {
+                if(!confirm("Delete this draft? (This is only on your computer.)")) return;
+                drafts = drafts.filter(x => x.id !== d.id);
+                saveDrafts();
+                renderActiveFilters();
+                render();
               });
 
+              [titleEl, howEl, useEl, linkEl].forEach(el => el.addEventListener("input", scheduleDraftSave));
+              tagAddBtn.addEventListener("click", (e) => { e.preventDefault(); e.stopPropagation(); openTagPopover(); });
+
               updateLink();
-              updateTitleStyle();
               renderTags();
+              updateTitleAndPost();
+              grid.appendChild(card);
+            });
+
+            // ---- Published next (shared, read-only) ----
+            visiblePublished.forEach((c) => {
+              const card = document.createElement("div");
+              card.className = "card";
+              card.dataset.id = c.id;
+
+              const modelText = (c.model || "").trim();
+              if(modelText) card.classList.add("has-title");
+
+              const tags = Array.isArray(c.tags) ? c.tags.map(String) : [];
+
+              card.innerHTML = `
+                <div class="card-header">
+                  <div class="header-left">
+                    <div class="title-text">${escapeHtml(c.model || "")}</div>
+                    <div class="tag-bar" style="display:${modelText ? "flex" : "none"};">
+                      ${tags.map(t => `<span class="tag-chip" style="cursor:default;">${escapeHtml(t)}</span>`).join("")}
+                    </div>
+                  </div>
+                  <div class="hdr-right">
+                    <button class="del-btn" type="button" title="Admin delete">×</button>
+                  </div>
+                </div>
+
+                <div class="card-main">
+                  <div class="panel">
+                    <label>How it Works</label>
+                    <textarea readonly>${escapeHtml(c.how_it_works || "")}</textarea>
+                  </div>
+                  <div class="panel">
+                    <label>Use Cases</label>
+                    <textarea readonly>${escapeHtml(c.use_cases || "")}</textarea>
+                  </div>
+                </div>
+
+                <div class="card-footer">
+                  <label>Link</label>
+                  <input readonly value="${escapeHtml(c.link || "")}" />
+                  <div class="linkwrap"></div>
+                </div>
+              `;
+
+              const linkWrap = card.querySelector(".linkwrap");
+              const delBtn = card.querySelector(".del-btn");
+              const url = (c.link || "").trim();
+              linkWrap.innerHTML = url
+                ? `<a class="resource-link" href="${escapeAttr(url)}" target="_blank" rel="noopener noreferrer">Open link</a>`
+                : "";
+
+              // Admin delete (optional)
+              delBtn.addEventListener("click", () => {
+                openDeletePublishedModal(c.id, async (password) => {
+                  try{
+                    const data = await api(`/api/cards/${encodeURIComponent(c.id)}`, {
+                      method: "DELETE",
+                      headers: { "X-Password": password },
+                    });
+                    state.version = data.version;
+                    state.published = data.cards;
+                    showErr("");
+                    renderActiveFilters();
+                    render();
+                  }catch(e){
+                    showErr(String(e.message || e));
+                  }
+                });
+              });
+
               grid.appendChild(card);
             });
           }
 
-          // ------------------------------------------------------------
-          // Top bar filter controls
-          // ------------------------------------------------------------
+          // Top bar filters
           filterBtn.addEventListener("click", (e) => {
             e.preventDefault();
             e.stopPropagation();
@@ -1121,34 +1302,15 @@ app_ui = ui.page_fluid(
             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));
-            }
+          // Add draft (no password)
+          addBtn.addEventListener("click", () => {
+            drafts.unshift({ id: uid(), model:"", tags:[], how_it_works:"", use_cases:"", link:"" });
+            saveDrafts();
+            render();
           });
 
-          // ------------------------------------------------------------
-          // Polling refresh
-          // ------------------------------------------------------------
-          async function refresh(){
+          // Poll published board
+          async function refreshPublished(){
             try{
               const active = document.activeElement;
               const isTyping = active && (active.tagName === "INPUT" || active.tagName === "TEXTAREA");
@@ -1157,7 +1319,7 @@ app_ui = ui.page_fluid(
               const data = await api("/api/cards", { method: "GET" });
               if(data.version !== state.version){
                 state.version = data.version;
-                state.cards = data.cards;
+                state.published = data.cards || [];
                 showErr("");
                 renderActiveFilters();
                 render();
@@ -1168,10 +1330,10 @@ app_ui = ui.page_fluid(
           }
 
           (async () => {
-            await refresh();
+            await refreshPublished();
             renderActiveFilters();
             render();
-            setInterval(refresh, 2500);
+            setInterval(refreshPublished, 2500);
           })();
         })();
         """
@@ -1187,7 +1349,7 @@ app_shiny = App(app_ui, shiny_server)
 
 routes = [
     Route("/api/cards", endpoint=api_cards, methods=["GET", "POST"]),
-    Route("/api/cards/{card_id}", endpoint=api_card_id, methods=["PUT", "DELETE"]),
+    Route("/api/cards/{card_id}", endpoint=api_card_id, methods=["DELETE"]),
     Mount("/", app=app_shiny),
 ]