skill-forge-hub 1.0.7 → 1.2.0

package/prompt-pouch/resources/reference.html

@@ -3,7 +3,7 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<meta name="sf-template" content="prompt-pouch@2">
+<meta name="sf-template" content="prompt-pouch@9">
 <meta name="pouch-id" content="REF-POUCH-0000">
 <title>锦囊 Prompt Pouch — 提示词管理台</title>
 <style>
@@ -113,7 +113,7 @@ html,body{ height:100%; }
 body{
   background:var(--bg); /* 主体纯色：光晕/160° 渐变移入 fixed 氛围层 body::before——避免背景传播到画布后滚动出现上下颜色断层（html,body 锁 height:100% 时 body 背景只覆盖第一屏，跨浏览器传播行为不一致）；四层氛围与光晕层均 fixed 覆盖视口，滚动恒定 */
   color:var(--text);
-  font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,'PingFang SC','Microsoft YaHei',monospace;
+  font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;
   min-height:100%;
 }
 
@@ -200,12 +200,13 @@ header{
 /* 侧栏 */
 aside{ width:200px; flex:0 0 auto;
   display:flex; flex-direction:column;
-  position:sticky; top:80px; align-self:flex-start;
-  height:calc(100vh - 100px);
+  align-self:flex-start; /* 自然流式随页面整体滚动：说明卡完整展示，页面滚到底即可读完 */
 }
-/* 侧栏分组滚动区：收藏 + 分组局部滚动，分组下方紧跟「＋ 新建分组」，滚动流末尾附「锦囊用法」说明——滚动区占满「全部」与侧栏底缘之间的剩余屏幕高度（最大占满屏幕），说明被顶出首屏（滚到底可见）；窄滚动条 */
+/* 侧栏分组滚动区：收藏 + 分组局部滚动——滚动区最大高度 = 视口高度减去顶栏、「全部」行与底部「锦囊用法」说明卡（完整展示不裁剪），分组再多说明卡也完整可见；窄滚动条 */
 .nav-scroll{
-  flex:1 1 auto; min-height:0; overflow-y:auto;
+  flex:0 0 auto; min-height:0;
+  max-height:calc(100vh - 360px);
+  overflow-y:auto;
   margin:0 -4px 0 0; padding-right:4px;
   scrollbar-width:thin; scrollbar-color:var(--border) transparent;
 }
@@ -231,8 +232,8 @@ aside{ width:200px; flex:0 0 auto;
 }
 .nav-item.on .cnt{ color:var(--gold); background:var(--gold-dim); }
 .side-tip{
-  flex:0 0 auto;
-  margin:16px 4px 0 0; padding:12px 14px; border-radius:10px; /* margin-right 补偿 nav-scroll 负 margin（-4px）的右侧裁切，虚线边框完整不裁；滚动流末尾，分组多时被顶出首屏 */
+  flex:0 0 auto; /* 完整展示不裁剪：分组滚动区为其留出空间，侧栏随页面整体滚动即可读完 */
+  margin:12px 0 0 0; padding:12px 14px 14px; border-radius:10px;
   border:1px dashed var(--border); font-size:11px; line-height:1.9; color:var(--muted);
 }
 .side-tip b{ color:var(--gold); font-weight:700; }
@@ -246,13 +247,38 @@ main{ flex:1; min-width:0; }
   font-weight:900;
 }
 .bar .total{ font-size:12px; color:var(--muted); }
-.sort-box{ margin-left:auto; display:flex; align-items:center; gap:6px; font-size:11px; color:var(--muted); }
-.sort-box select{
+.sort-box{ margin-left:auto; display:flex; align-items:center; gap:6px; font-size:11px; color:var(--muted); position:relative; }
+.sort-sel{
+  display:flex; align-items:center; gap:7px;
   background:var(--panel2); border:1px solid var(--border); color:var(--text);
   font-family:inherit; font-size:12px; letter-spacing:1px;
-  border-radius:999px; padding:5px 12px; outline:none; cursor:pointer;
-}
-.sort-box select:focus{ border-color:var(--gold); }
+  border-radius:999px; padding:5px 13px; outline:none; cursor:pointer;
+  transition:border-color .15s ease;
+}
+.sort-sel:hover,.sort-sel.open{ border-color:var(--gold); }
+.sort-arrow{ font-size:9px; color:var(--gold); line-height:1; transition:transform .2s ease; }
+.sort-sel.open .sort-arrow{ transform:rotate(180deg); }
+.sort-menu{
+  position:absolute; top:calc(100% + 6px); right:0; z-index:130;
+  display:flex; flex-direction:column; gap:2px; min-width:136px;
+  background:var(--panel2); border:1px solid var(--border); border-radius:12px;
+  padding:5px; box-shadow:0 12px 32px rgba(0,0,0,.45);
+  animation:sortMenuIn .16s ease;
+}
+.sort-menu[hidden]{ display:none; }
+@keyframes sortMenuIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
+.sort-opt{
+  display:flex; align-items:center; gap:8px; width:100%;
+  background:transparent; border:none; border-radius:8px;
+  color:var(--text); font-family:inherit; font-size:12px; letter-spacing:1px;
+  padding:7px 10px; cursor:pointer; text-align:left;
+  transition:background .12s ease,color .12s ease;
+}
+.sort-opt:hover{ background:var(--gold-dim); color:var(--gold); }
+.sort-check{ width:14px; font-size:11px; color:var(--gold); opacity:0; flex:0 0 auto; }
+.sort-opt.on{ color:var(--gold); font-weight:600; }
+.sort-opt.on .sort-check{ opacity:1; }
+[data-theme="light"] .sort-menu{ box-shadow:0 10px 28px rgba(30,31,34,.16); }
 .sort-status{
   font-size:12px; color:var(--muted);
   display:flex; align-items:center; gap:10px;
@@ -521,9 +547,10 @@ footer.open .ht-arrow{ transform:rotate(180deg); }
 }
 /* 页面直写：侧栏分组管理 / 提示词表单 / toast */
 .nav-add{
-  display:flex; align-items:center; justify-content:center; gap:6px;
-  margin-top:10px; padding:10px 14px; border-radius:10px; cursor:pointer;
-  font-size:13px; letter-spacing:1px; color:var(--gold);
+  flex:0 0 auto; /* 「全部」行右侧迷你 + 图标（新建分组），行内不占独立高度 */
+  width:22px; height:22px; margin-left:6px;
+  display:flex; align-items:center; justify-content:center;
+  border-radius:6px; cursor:pointer; font-size:14px; line-height:1; color:var(--gold);
   border:1px dashed var(--border); background:var(--gold-dim);
   transition:all .18s ease; user-select:none;
 }
@@ -636,13 +663,16 @@ footer.open .ht-arrow{ transform:rotate(180deg); }
       <span class="tag-filter" id="tagFilterChip" style="display:none"><span class="tf-ico">🏷</span><b id="tagFilterName"></b><button class="tf-x" id="tagFilterClear" title="清除标签过滤">✕</button></span>
       <button class="btn primary" id="btnAddItem">＋ 新增提示词</button>
       <div class="sort-box">
-        <label for="sortSel">排序</label>
-        <select id="sortSel" title="切换卡片排序方式">
-          <option value="added">最新添加</option>
-          <option value="recent">最近使用</option>
-          <option value="freq">使用频率</option>
-          <option value="manual">手动顺序</option>
-        </select>
+        <label>排序</label>
+        <button class="sort-sel" id="sortSel" type="button" title="切换卡片排序方式">
+          <span class="sort-sel-txt" id="sortTxt">最新添加</span><span class="sort-arrow">▾</span>
+        </button>
+        <div class="sort-menu" id="sortMenu" hidden>
+          <button class="sort-opt on" data-mode="added" type="button"><span class="sort-check">✓</span>最新添加</button>
+          <button class="sort-opt" data-mode="recent" type="button"><span class="sort-check">✓</span>最近使用</button>
+          <button class="sort-opt" data-mode="freq" type="button"><span class="sort-check">✓</span>使用频率</button>
+          <button class="sort-opt" data-mode="manual" type="button"><span class="sort-check">✓</span>手动顺序</button>
+        </div>
       </div>
       <div class="sort-status" id="sortStatus">
         <button class="btn" id="btnSortCmd" disabled>📋 复制变更指令</button>
@@ -812,6 +842,9 @@ footer.open .ht-arrow{ transform:rotate(180deg); }
   var searchClear = document.getElementById('searchClear');
   var sortStatus = document.getElementById('sortStatus');
   var sortSel = document.getElementById('sortSel');
+  var sortMenu = document.getElementById('sortMenu');
+  var sortTxt = document.getElementById('sortTxt');
+  var SORT_LABELS = { added:'最新添加', recent:'最近使用', freq:'使用频率', manual:'手动顺序' };
   var btnSortCmd = document.getElementById('btnSortCmd');
   var btnMarkSaved = document.getElementById('btnMarkSaved');
   var bkStatus = document.getElementById('bkStatus');
@@ -944,16 +977,15 @@ footer.open .ht-arrow{ transform:rotate(180deg); }
     var html = '';
     var all = state.data.prompts.length;
     var favN = state.data.prompts.filter(function(p){ return p.favorite; }).length;
-    html += '<div class="nav-item' + (state.curGroup==='all'?' on':'') + '" data-g="all"><span class="icon">🗂️</span>全部<span class="cnt">' + all + '</span></div>';
+    html += '<div class="nav-item' + (state.curGroup==='all'?' on':'') + '" data-g="all"><span class="icon">🗂️</span>全部<span class="cnt">' + all + '</span><span class="nav-add" id="navAdd" title="新建分组">＋</span></div>';
     html += '<div class="nav-scroll">';
     html += '<div class="nav-item' + (state.curGroup==='fav'?' on':'') + '" data-g="fav"><span class="icon">⭐</span>收藏<span class="cnt">' + favN + '</span></div>';
     state.data.groups.forEach(function(g){
       var n = state.data.prompts.filter(function(p){ return p.group === g.id; }).length;
       html += '<div class="nav-item' + (state.curGroup===g.id?' on':'') + '" data-g="' + g.id + '" draggable="true" title="拖拽调整分组顺序"><span class="icon">' + g.icon + '</span><span class="g-name">' + escapeHtml(g.name) + '</span><span class="cnt">' + n + '</span><span class="g-ops"><button class="g-edit" title="编辑分组">✎</button><button class="g-del" title="删除分组">🗑</button></span></div>';
     });
-    html += '<div class="nav-add" id="navAdd">＋ 新建分组</div>';
-    html += '<div class="side-tip"><b>锦囊用法</b><br>· 页面直接增删改：＋ 新建分组 / ＋ 新增提示词 / ✎ 编辑 / 🗑 删除（授权目录即写即存）<br>· 也可对 AI 说「把 XX 加到写作输出分组」<br>· 顶栏切换排序；⇄ 移组、拖卡片排序自动保存；拖分组条调整分组顺序<br>· 点卡片标签按标签筛选（再点取消）；标签悬停 ✕ 删 / ＋ 加；⤓ 导出 / ⤒ 导入 JSON 备份<br>· ⭐ 收藏常用 · 复制次数在卡片右上角</div>';
     html += '</div>';
+    html += '<div class="side-tip"><b>锦囊用法</b><br>· 页面直接增删改：＋ 新建分组 / ＋ 新增提示词 / ✎ 编辑 / 🗑 删除（授权目录即写即存）<br>· 也可对 AI 说「把 XX 加到写作输出分组」<br>· 顶栏切换排序；⇄ 移组、拖卡片排序自动保存；拖分组条调整分组顺序<br>· 点卡片标签按标签筛选（再点取消）；标签悬停 ✕ 删 / ＋ 加；⤓ 导出 / ⤒ 导入 JSON 备份<br>· ⭐ 收藏常用 · 复制次数在卡片右上角</div>';
     sideNav.innerHTML = html;
     sideNav.querySelectorAll('.nav-item').forEach(function(el){
       el.addEventListener('click', function(){
@@ -1001,7 +1033,7 @@ footer.open .ht-arrow{ transform:rotate(180deg); }
       });
     });
     var addBtn = sideNav.querySelector('#navAdd');
-    if (addBtn) addBtn.addEventListener('click', function(){ openGroupForm(null); });
+    if (addBtn) addBtn.addEventListener('click', function(e){ e.stopPropagation(); openGroupForm(null); });
   }
 
   function render(){
@@ -1198,7 +1230,12 @@ footer.open .ht-arrow{ transform:rotate(180deg); }
     persistUserState();
     scheduleBackup();
   }
-  function syncSortUI(){ if (sortSel) sortSel.value = state.sortMode; }
+  function syncSortUI(){
+    if (sortTxt) sortTxt.textContent = SORT_LABELS[state.sortMode] || SORT_LABELS.added;
+    if (sortMenu) sortMenu.querySelectorAll('.sort-opt').forEach(function(o){
+      o.classList.toggle('on', o.getAttribute('data-mode') === state.sortMode);
+    });
+  }
   function ensureManual(){
     if (state.sortMode === 'manual') return;
     state.sortMode = 'manual';
@@ -1279,10 +1316,30 @@ footer.open .ht-arrow{ transform:rotate(180deg); }
       if (!gpopEl.contains(e.target) && !onAnchor){ closeGpop(); }
     }
   });
-  sortSel.addEventListener('change', function(){
-    state.sortMode = sortSel.value;
+  function toggleSortMenu(force){
+    if (!sortMenu) return;
+    var willOpen = (force !== undefined) ? force : sortMenu.hidden;
+    sortMenu.hidden = !willOpen;
+    sortSel.classList.toggle('open', willOpen);
+  }
+  sortSel.addEventListener('click', function(e){
+    e.stopPropagation();
+    toggleSortMenu();
+  });
+  sortMenu.addEventListener('click', function(e){
+    var opt = e.target.closest('.sort-opt');
+    if (!opt) return;
+    state.sortMode = opt.getAttribute('data-mode');
     persistUserState();
     render();
+    syncSortUI();
+    toggleSortMenu(false);
+  });
+  document.addEventListener('click', function(e){
+    if (!sortMenu.hidden){
+      var onSel = e.target.closest && e.target.closest('#sortSel');
+      if (!sortMenu.contains(e.target) && !onSel){ toggleSortMenu(false); }
+    }
   });
 
   /* ---------- 模板插值（{{变量}} / {变量}） ---------- */
@@ -1448,6 +1505,7 @@ footer.open .ht-arrow{ transform:rotate(180deg); }
         if (next === null) return false;
         return bkWrite('prompts.json', 'data', JSON.stringify(next, null, 2)).then(function(){
           state.data = next;
+          syncMirror(next);
           applyUserState();
           state.dirty = false; state.moves = [];
           persistUserState(); refreshDirtyUI();
@@ -1484,6 +1542,7 @@ footer.open .ht-arrow{ transform:rotate(180deg); }
         });
         return bkWrite('prompts.json', 'data', JSON.stringify(latest, null, 2)).then(function(){
           state.data = latest;
+          syncMirror(latest);
           applyUserState();
           state.dirty = false; state.moves = [];
           persistUserState(); refreshDirtyUI();
@@ -1868,6 +1927,7 @@ footer.open .ht-arrow{ transform:rotate(180deg); }
     if (e.key === 'Escape'){
       closeFillPanel();
       closeGpop();
+      toggleSortMenu(false);
       closeItemForm();
       closeGroupForm();
       document.getElementById('bkMask').classList.remove('open');
@@ -2030,6 +2090,19 @@ if (!/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(POUC
       });
     });
   }
+  /* 数据镜像：localStorage 存全量数据快照（file:// 下 IndexedDB 偶发不可用时兜底恢复，键按 pouch-id 隔离） */
+  function syncMirror(data){
+    try{ localStorage.setItem(SF_NS + '-mirror', JSON.stringify(data)); }catch(e){}
+  }
+  function readMirror(){
+    try{
+      var raw = localStorage.getItem(SF_NS + '-mirror');
+      if (!raw) return null;
+      var d = JSON.parse(raw);
+      if (d && d.groups && d.prompts) return d;
+    }catch(e){}
+    return null;
+  }
   /* 备份文件读：backup/ 优先，读不到回退根目录旧文件（旧目录结构兼容） */
   function readBk(name){
     return bkRead(name, 'backup').then(function(text){
@@ -2122,6 +2195,7 @@ if (!/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(POUC
         try{ localStorage.removeItem(SF_NS + '-bk-declined'); }catch(e){}
         idbSet('bkHandle', bkDirHandle);
         updateBkUI();
+        reloadFromDirIfNeeded();
         return true;
       })
       .catch(function(){ pendingAuth = false; updateBkUI(); return false; });
@@ -2168,6 +2242,43 @@ if (!/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(POUC
       pendingAuth = false;
     }).catch(function(){});
   }
+  /* file:// 直开补洞：fetch 被浏览器拦截读不到数据文件时，授权目录后直读 data/prompts.json 替换示例/快照 */
+  function reloadFromDirIfNeeded(){
+    if (!bkDirHandle || bootMode === 'live') return;
+    readPouch().then(function(text){
+      if (text === null) return;
+      var data = JSON.parse(text);
+      state.data = data;
+      idbSet('lastData', data);
+      syncMirror(data);
+      bootMode = 'live';
+      cacheBadge.style.display = 'none';
+      applyUserState();
+      renderNav(); render();
+      toast('✓ 已直读 data/prompts.json，你的分组与提示词已载入');
+    }).catch(function(){});
+  }
+  /* 「🔓 恢复数据」：已授权过目录但刷新后权限需重新确认（file:// 权限不跨会话持久）→ 一键 requestPermission 后直读，免重新选目录 */
+  function restoreAuth(){
+    if (!bkDirHandle || typeof bkDirHandle.requestPermission !== 'function') return;
+    bkDirHandle.requestPermission({ mode: 'readwrite' }).then(function(st){
+      if (st === 'granted'){
+        pendingAuth = false; updateBkUI();
+        reloadFromDirIfNeeded();
+      } else {
+        toast('未获授权：点「💾 授权目录」重新选择目录', true);
+      }
+    }).catch(function(){ toast('权限恢复失败，请重新授权目录', true); });
+  }
+  function updateBootBadge(){
+    if (bootMode === 'live' || !bkDirHandle || !bootRendered) return;
+    var link = ' <a id="bootRestore" style="cursor:pointer;text-decoration:underline">🔓 恢复数据</a>';
+    cacheBadge.innerHTML = (bootMode === 'cache'
+      ? '⚠️ 快照模式：当前显示上次快照，目录权限需确认后直读最新数据'
+      : '📌 示例模式：检测到曾授权过目录，点击确认权限即可载入你的数据') + link;
+    cacheBadge.style.display = '';
+    document.getElementById('bootRestore').addEventListener('click', restoreAuth);
+  }
   btnBkEnable.addEventListener('click', function(){
     if (bkDirHandle && !pendingAuth){
       writeBackupNow().then(function(ok){ toast(ok ? '✓ 备份完成 · backup/pouch-backup.json' : '备份失败，请重新授权目录', !ok); });
@@ -2179,7 +2290,7 @@ if (!/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(POUC
     }
     if (bkDirHandle && pendingAuth){
       bkDirHandle.requestPermission({ mode: 'readwrite' }).then(function(st){
-        if (st === 'granted'){ pendingAuth = false; updateBkUI(); writeBackupNow(); }
+        if (st === 'granted'){ pendingAuth = false; updateBkUI(); writeBackupNow(); reloadFromDirIfNeeded(); }
         else bkStatus.textContent = '未获授权，备份暂停';
       }).catch(function(){});
       return;
@@ -2191,6 +2302,7 @@ if (!/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(POUC
         idbSet('bkHandle', bkDirHandle);
         updateBkUI();
         writeBackupNow();
+        reloadFromDirIfNeeded();
       })
       .catch(function(){});
   });
@@ -2204,6 +2316,7 @@ if (!/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(POUC
         idbSet('bkHandle', bkDirHandle);
         updateBkUI();
         writeBackupNow();
+        reloadFromDirIfNeeded();
       })
       .catch(function(){});
   });
@@ -2267,6 +2380,7 @@ if (!/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(POUC
     // 先把当前状态固化进备份（目录备份滚入 .prev.json / 快照环记一份），再应用所选备份
     (bkDirHandle ? writeBackupNow() : writeSnapNow()).then(function(){
       state.data = snap.data;
+      syncMirror(snap.data);
       applyUserStateFrom(snap.userState || {});
       state.dirty = false; state.moves = [];
       persistUserState();
@@ -2303,7 +2417,7 @@ if (!/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(POUC
     render();
     if (bootMode === 'cache') cacheBadge.style.display = '';
     if (bootMode === 'demo'){
-      cacheBadge.textContent = '📌 示例模式：未读到 data/prompts.json，当前展示系统自带示例提示词（file:// 直开或数据文件尚未生成）。经 HTTP 打开页面并生成数据文件后即为你的提示词，示例可随时删除。';
+      cacheBadge.textContent = '📌 示例模式：未读到 data/prompts.json，当前展示系统自带示例。若你有自己的数据文件：点顶部「💾 授权目录」选 prompt-pouch.html 所在文件夹即可直读载入；或经 HTTP 打开页面（file:// 直开会被浏览器拦截文件读取）。';
       cacheBadge.style.display = '';
     }
   }
@@ -2319,26 +2433,49 @@ if (!/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(POUC
     .then(function(data){
       state.data = data;
       idbSet('lastData', data);
+      syncMirror(data);
       bootMode = 'live';
       firstRender();
     })
     .catch(function(){
-      idbGet('lastData').then(function(cached){
-        if (cached){
-          state.data = cached;
-          bootMode = 'cache';
-          firstRender();
-        } else {
-          state.data = DEFAULT_POUCH;
-          bootMode = 'demo';
-          firstRender();
-        }
+      // file:// 场景：fetch 被浏览器拦截 → 已授权目录则直读 data/prompts.json（File System Access API）
+      return dirHandleReady.then(function(){
+        return readPouch().then(function(text){
+          if (text !== null) return JSON.parse(text);
+          throw new Error('no-fs');
+        });
+      }).then(function(data){
+        state.data = data;
+        idbSet('lastData', data);
+        syncMirror(data);
+        bootMode = 'live';
+        firstRender();
+      }).catch(function(){
+        idbGet('lastData').then(function(cached){
+          if (cached){
+            state.data = cached;
+            bootMode = 'cache';
+            firstRender();
+          } else {
+            var mirror = readMirror();
+            if (mirror){
+              state.data = mirror;
+              bootMode = 'cache';
+              firstRender();
+            } else {
+              state.data = DEFAULT_POUCH;
+              bootMode = 'demo';
+              firstRender();
+            }
+          }
+        });
       });
     });
   // 本地态并行：可用则应用收藏与排序并刷新备份区（不阻塞数据展示）
+  var dirHandleReady = idbOpen().then(function(){ return loadDirHandle(); }).catch(function(){});
   idbOpen()
     .then(loadLocalState)
-    .then(loadDirHandle)
+    .then(function(){ return dirHandleReady; })
     .catch(function(){})
     .then(function(){
       applyUserState();
@@ -2346,6 +2483,7 @@ if (!/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(POUC
       refreshDirtyUI();
       if (bootRendered){ renderNav(); render(); }
       updateBkUI();
+      updateBootBadge();
     });
 })();