privateboard 0.1.20 → 0.1.21

package/public/user-settings.js

@@ -28,6 +28,7 @@
 
   const PROVIDERS = [
     { id: "openrouter", label: "OpenRouter",  hint: "default · routes any model · sk-or-…",         placeholder: "sk-or-v1-…",  group: "llm" },
+    { id: "bai",        label: "B.AI",        hint: "aggregator · GPT-5, Claude 4.7, Gemini 3 · sk-…", placeholder: "sk-…",         group: "llm" },
     { id: "anthropic",  label: "Anthropic",   hint: "Claude · Sonnet 4.6, Opus 4.7, Haiku 4.5",      placeholder: "sk-ant-…",     group: "llm" },
     { id: "openai",     label: "OpenAI",      hint: "GPT · gpt-5, gpt-5 mini, gpt-4o",                placeholder: "sk-…",         group: "llm" },
     { id: "google",     label: "Google",      hint: "Gemini · 2.5 Pro, 2.5 Flash",                    placeholder: "AIza…",        group: "llm" },
@@ -770,6 +771,15 @@
             // never lands in "no usable carrier" state. Unconfigured rows
             // (or non-LLM providers) bypass the lock — removing them
             // doesn't reduce working-key count.
+            //
+            // ALWAYS emit `data-remove-provider` (even when locked) so the
+            // click delegate's selector matches in both states. The lock
+            // is expressed via `disabled` + `.is-locked` only · this lets
+            // `refreshLockButtons()` flip the state in place without
+            // re-rendering or re-binding any listeners. Without this, a
+            // locked-then-unlocked button would have no click handler
+            // attached (the original `[data-remove-provider]` selector
+            // wouldn't have matched it at wire-time).
             const isLLM = p.group === "llm";
             const isConfigured = !!(_keysMeta[p.id] && _keysMeta[p.id].configured);
             const llmConfiguredCount = LLM_PROVIDER_IDS.filter(
@@ -777,7 +787,7 @@
             ).length;
             const lock = isLLM && isConfigured && llmConfiguredCount <= 1;
             return lock
-              ? `<button type="button" class="us-key-remove is-locked" disabled title="Add another LLM key first — at least one must remain configured.">✕</button>`
+              ? `<button type="button" class="us-key-remove is-locked" data-remove-provider="${p.id}" disabled title="Add another LLM key first — at least one must remain configured.">✕</button>`
               : `<button type="button" class="us-key-remove" data-remove-provider="${p.id}" title="Remove">✕</button>`;
           })()}
         </div>
@@ -851,7 +861,7 @@
     ensureActiveProviders();
     // Anthropic is temporarily excluded from the "+ add provider"
     // chips · only sonnet-4-6 is direct-routable on the Anthropic SDK
-    // right now (opus / haiku are openrouterOnly), so adding an
+    // right now (opus / haiku are viaUniversalOnly), so adding an
     // Anthropic key alone unlocks just one model — confusing UX. Once
     // the registry has ≥ 2 direct-routable Claude models, drop the
     // exclusion. Existing users who already configured Anthropic still
@@ -920,24 +930,34 @@
      Lives at the bottom of the API Key section. Hidden when the
      user has no keys configured. Re-fetched after every key
      write so the route badges and reachable count stay accurate. */
-  const PROVIDER_ORDER = ["anthropic", "openai", "google", "xai", "deepseek", "openrouter"];
+  const PROVIDER_ORDER = ["anthropic", "openai", "google", "xai", "deepseek", "zhipu", "moonshot", "openrouter", "bai"];
   const PROVIDER_LABEL = {
     anthropic: "Anthropic",
     openai:    "OpenAI",
     google:    "Google",
     xai:       "xAI",
     deepseek:  "DeepSeek",
+    zhipu:     "Zhipu",
+    moonshot:  "Moonshot",
     openrouter:"OpenRouter",
+    bai:       "B.AI",
   };
   function providerLabel(p) { return PROVIDER_LABEL[p] || p; }
 
   function routeBadgeHTML(m) {
     const d = !!(m.routes && m.routes.direct);
     const o = !!(m.routes && m.routes.openrouter);
-    if (d && o) return `<span class="us-models-route">direct · OR</span>`;
-    if (d) return `<span class="us-models-route">direct</span>`;
-    if (o) return `<span class="us-models-route">OR</span>`;
-    return "";
+    const b = !!(m.routes && m.routes.bai);
+    // Compose a short label · "direct" wins display when present;
+    // when both universal carriers are reachable show "OR · B.AI"
+    // so the user knows fallback coverage. The adapter prefers
+    // direct → B.AI → OR; the badge mirrors that ordering.
+    const parts = [];
+    if (d) parts.push("direct");
+    if (b) parts.push("B.AI");
+    if (o) parts.push("OR");
+    if (parts.length === 0) return "";
+    return `<span class="us-models-route">${parts.join(" · ")}</span>`;
   }
 
   function modelsSummaryHTML() {
@@ -948,7 +968,11 @@
         <div class="us-models-loading">measuring reach…</div>
       </div>`;
     }
-    if (!cache.hasAnyKey) return "";
+    // Defensive · trust `reachable.length` over `hasAnyKey`. See the
+    // same pattern in `defaultModelSectionHTML` · keeps the block
+    // visible when the server reports a stale `hasAnyKey: false` but
+    // ships a populated reachable list (B.AI-only users on an
+    // un-restarted backend hit exactly this case).
     const reachable = (cache.reachable || []);
     if (reachable.length === 0) return "";
 
@@ -1002,26 +1026,37 @@
      provider + a deck per model row + the active route badge. */
   function defaultModelSectionHTML() {
     const cache = modelsSnapshot();
-    if (!cache || !cache.hasAnyKey) {
+    // Defensive gating · the picker should render whenever at least
+    // one model is reachable. We deliberately do NOT short-circuit on
+    // `!cache.hasAnyKey` alone: an older server (pre-B.AI-fix to
+    // `hasAnyModelKey()`) can report `hasAnyKey: false` for a user
+    // whose only key is B.AI, even though every `reachable[i]` arrives
+    // populated with a working bai route. Trust `reachable.length` as
+    // the real signal · cache absent or empty → loading / no-key copy;
+    // cache present + reachable empty → key-but-no-route copy.
+    if (!cache) {
       return `
         <div class="us-pane-head">
           <div class="us-pane-tag">▸ Default Model</div>
-          <div class="us-pane-deck">no LLM key configured yet — add one in <a href="#" data-jump-keys class="us-link">API Key</a> first, then come back to pick a default.</div>
+          <div class="us-pane-deck">measuring reach…</div>
         </div>
       `;
     }
     const reachable = cache.reachable || [];
     if (reachable.length === 0) {
+      const noKey = !cache.hasAnyKey;
       return `
         <div class="us-pane-head">
           <div class="us-pane-tag">▸ Default Model</div>
-          <div class="us-pane-deck">your configured keys don't reach any model right now. Check the key values, or add another carrier in <a href="#" data-jump-keys class="us-link">API Key</a>.</div>
+          <div class="us-pane-deck">${noKey
+            ? `no LLM key configured yet — add one in <a href="#" data-jump-keys class="us-link">API Key</a> first, then come back to pick a default.`
+            : `your configured keys don't reach any model right now. Check the key values, or add another carrier in <a href="#" data-jump-keys class="us-link">API Key</a>.`}</div>
         </div>
       `;
     }
 
     // Group reachable models by provider, ordered by PROVIDER_ORDER
-    // (anthropic / openai / google / xai / deepseek / openrouter).
+    // (anthropic / openai / google / xai / deepseek / zhipu / moonshot / openrouter / bai).
     const byProvider = new Map();
     for (const m of reachable) {
       if (!byProvider.has(m.provider)) byProvider.set(m.provider, []);
@@ -1283,10 +1318,16 @@
     });
 
     // Remove a provider row (server-side delete clears its key too).
-    paneEl.querySelectorAll("[data-remove-provider]").forEach((btn) => {
+    // The handler binds to EVERY `.us-key-remove` regardless of locked
+    // state · in-handler `disabled` check is the gate. Pairs with
+    // `refreshLockButtons()` below: flipping a button's lock state in
+    // place doesn't strand it without a listener.
+    paneEl.querySelectorAll(".us-key-remove").forEach((btn) => {
       btn.addEventListener("click", async (e) => {
         e.preventDefault();
+        if (btn.disabled || btn.classList.contains("is-locked")) return;
         const id = btn.dataset.removeProvider;
+        if (!id) return;
         activeProviders = activeProviders.filter((p) => p !== id);
         await setProviderKey(id, ""); // clears server-side
         await refreshModels();
@@ -1294,6 +1335,40 @@
       });
     });
 
+    // Recompute every `.us-key-remove` button's lock state against the
+    // current `_keysMeta`. Called after a successful key PUT so adding
+    // a second LLM key immediately un-locks the first row's ✕ — the
+    // old flow only repainted the typed-into row's status pill, so the
+    // sibling rows kept their stale "locked" disabled state until the
+    // user closed and reopened the panel.
+    function refreshLockButtons() {
+      if (!paneEl) return;
+      const llmConfiguredCount = LLM_PROVIDER_IDS.filter(
+        (id) => _keysMeta[id] && _keysMeta[id].configured,
+      ).length;
+      paneEl.querySelectorAll(".us-key-row").forEach((row) => {
+        const provider = row.dataset.provider;
+        const p = PROVIDERS.find((x) => x.id === provider);
+        if (!p) return;
+        const btn = row.querySelector(".us-key-remove");
+        if (!btn) return;
+        const isLLM = p.group === "llm";
+        const isConfigured = !!(_keysMeta[p.id] && _keysMeta[p.id].configured);
+        const wantsLocked = isLLM && isConfigured && llmConfiguredCount <= 1;
+        const hasLocked = btn.classList.contains("is-locked");
+        if (wantsLocked === hasLocked) return;
+        if (wantsLocked) {
+          btn.classList.add("is-locked");
+          btn.disabled = true;
+          btn.title = "Add another LLM key first — at least one must remain configured.";
+        } else {
+          btn.classList.remove("is-locked");
+          btn.disabled = false;
+          btn.title = "Remove";
+        }
+      });
+    }
+
     // Default-model controls live in the sidebar's "Default Model"
     // pane only · the previous in-row "set as default" button and
     // the bottom-of-pane Default Model picker were removed because
@@ -1331,6 +1406,12 @@
         await refreshModels();
         refreshModelsSummary();
         syncWsBackendPicker();
+        // After a successful key write, `_keysMeta[provider]` is fresh
+        // (setProviderKey mirrors the server response into the cache).
+        // Repaint every row's ✕ in-place so adding a second LLM key
+        // immediately unlocks the first row's delete button · the old
+        // flow waited for a close+reopen.
+        refreshLockButtons();
       }, 220);
       debounceMap.set(row, timer);
     }

package/public/voice-onboarding.css

@@ -41,9 +41,9 @@
   width: 100%;
   max-width: 620px;
   max-height: calc(100vh - 48px);
-  background: var(--panel, #131312);
-  border: 0.5px solid var(--line-strong, #3A3A35);
-  color: var(--text, #C8C5BE);
+  background: var(--panel);
+  border: 0.5px solid var(--line-strong);
+  color: var(--text);
   animation: vonb-rise 0.18s ease-out;
   display: flex;
   flex-direction: column;
@@ -69,7 +69,7 @@
   position: absolute;
   width: 10px;
   height: 10px;
-  border: 1.5px solid var(--lime, #6FB572);
+  border: 1.5px solid var(--lime);
   pointer-events: none;
 }
 .vonb-modal::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
@@ -77,13 +77,13 @@
 
 /* ─── Classification strip ─── */
 .vonb-classification {
-  background: var(--panel-2, #1A1A18);
-  border-bottom: 0.5px solid var(--line-bright, #2A2A26);
+  background: var(--panel-2);
+  border-bottom: 0.5px solid var(--line-bright);
   padding: 5px 14px;
   font-size: 8px;
   letter-spacing: 0.22em;
   text-transform: uppercase;
-  color: var(--lime, #6FB572);
+  color: var(--lime);
   font-weight: 700;
   display: flex;
   justify-content: space-between;
@@ -91,7 +91,7 @@
 }
 .vonb-classification .dot { display: inline-block; margin-right: 4px; }
 .vonb-classification .right {
-  color: var(--text-faint, #3A382F);
+  color: var(--text-faint);
   letter-spacing: 0.12em;
 }
 
@@ -102,13 +102,13 @@
   gap: 12px;
   align-items: start;
   padding: 14px 16px 12px;
-  border-bottom: 0.5px dashed var(--line-bright, #2A2A26);
+  border-bottom: 0.5px dashed var(--line-bright);
 }
 .vonb-head-text { min-width: 0; }
 .vonb-head .meta {
   font-family: var(--mono);
   font-size: 9px;
-  color: var(--text-dim, #5C5A52);
+  color: var(--text-dim);
   text-transform: uppercase;
   letter-spacing: 0.18em;
   margin-bottom: 4px;
@@ -118,7 +118,7 @@
   align-items: center;
 }
 .vonb-head .meta .live {
-  color: var(--lime, #6FB572);
+  color: var(--lime);
   font-weight: 700;
 }
 .vonb-head .meta .live::before {
@@ -135,21 +135,21 @@
 .vonb-head .title {
   font-size: 16px;
   font-weight: 700;
-  color: var(--text, #C8C5BE);
+  color: var(--text);
   letter-spacing: -0.01em;
   line-height: 1.3;
   font-family: var(--font-human, system-ui, sans-serif);
 }
 .vonb-head .title::before {
   content: "▸ ";
-  color: var(--lime, #6FB572);
+  color: var(--lime);
   font-family: var(--mono);
 }
 .vonb-head .close-btn {
   width: 24px; height: 24px;
   background: transparent;
-  border: 0.5px solid var(--line-bright, #2A2A26);
-  color: var(--text-dim, #5C5A52);
+  border: 0.5px solid var(--line-bright);
+  color: var(--text-dim);
   font-size: 12px;
   cursor: pointer;
   font-family: var(--mono);
@@ -157,8 +157,8 @@
   transition: all 0.12s;
 }
 .vonb-head .close-btn:hover {
-  border-color: var(--lime, #6FB572);
-  color: var(--lime, #6FB572);
+  border-color: var(--lime);
+  color: var(--lime);
 }
 
 /* ─── Body · banner + deck ─── */
@@ -172,7 +172,7 @@
   position: relative;
   height: 240px;
   background: var(--bg);
-  border: 0.5px solid var(--line, #1F1E1A);
+  border: 0.5px solid var(--line);
   overflow: hidden;
   display: flex;
 }
@@ -196,26 +196,26 @@
   font-family: var(--font-human, system-ui, sans-serif);
   font-size: 14px;
   line-height: 1.55;
-  color: var(--text-soft, #8E8B83);
+  color: var(--text-soft);
   margin: 0;
 }
 .vonb-theme-label {
   font-family: var(--mono);
   font-size: 10px;
   letter-spacing: 0.14em;
-  color: var(--text-dim, #5C5A52);
+  color: var(--text-dim);
   text-transform: uppercase;
   display: flex;
   gap: 10px;
   align-items: baseline;
 }
 .vonb-theme-label .v-name {
-  color: var(--lime, #6FB572);
+  color: var(--lime);
   font-weight: 700;
   letter-spacing: 0.18em;
 }
 .vonb-theme-label .v-deck {
-  color: var(--text-dim, #5C5A52);
+  color: var(--text-dim);
 }
 
 /* ─── Foot · single CTA ─── */
@@ -225,13 +225,13 @@
   justify-content: flex-end;
   align-items: center;
   gap: 12px;
-  border-top: 0.5px dashed var(--line-bright, #2A2A26);
+  border-top: 0.5px dashed var(--line-bright);
 }
 .vonb-btn {
   padding: 8px 18px;
   background: transparent;
-  border: 0.5px solid var(--line-bright, #2A2A26);
-  color: var(--text-soft, #8E8B83);
+  border: 0.5px solid var(--line-bright);
+  color: var(--text-soft);
   font-family: var(--mono);
   font-size: 11px;
   letter-spacing: 0.14em;
@@ -240,18 +240,18 @@
   transition: all 0.12s;
 }
 .vonb-btn:hover {
-  border-color: var(--lime, #6FB572);
-  color: var(--lime, #6FB572);
+  border-color: var(--lime);
+  color: var(--lime);
 }
 .vonb-btn.primary {
-  background: var(--lime, #6FB572);
-  border-color: var(--lime, #6FB572);
-  color: var(--bg, #0A0A0A);
+  background: var(--lime);
+  border-color: var(--lime);
+  color: var(--bg);
   font-weight: 700;
 }
 .vonb-btn.primary:hover {
   filter: brightness(1.06);
-  color: var(--bg, #0A0A0A);
+  color: var(--bg);
 }
 
 /* ─── Body scroll lock while overlay open ─── */
@@ -277,7 +277,7 @@ body.vonb-locked {
   width: 100%;
   height: 100%;
   overflow: hidden;
-  background-color: var(--floor-bg, #2A2C32);
+  background-color: var(--floor-bg);
   background-image:
     radial-gradient(ellipse at 50% 50%,
       transparent 28%,
@@ -338,7 +338,7 @@ body.vonb-locked {
   shape-rendering: crispEdges;
   z-index: 1;
 }
-.vonb-banner .vrp-stage .rt-chair--mod { color: var(--cyan, #6A9B97); }
+.vonb-banner .vrp-stage .rt-chair--mod { color: var(--cyan); }
 .vonb-banner .vrp-stage .rt-bubble {
   position: absolute;
   top: 0;

package/public/voice-replay.css

@@ -27,8 +27,8 @@
   z-index: 9300;
   width: 380px;
   max-width: calc(100vw - 32px);
-  background: var(--panel, #131312);
-  border: 0.5px solid var(--lime-dim, #2D5532);
+  background: var(--panel);
+  border: 0.5px solid var(--lime-dim);
   color: var(--text);
   font-family: var(--mono);
   box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
@@ -44,7 +44,7 @@
   align-items: center;
   justify-content: space-between;
   padding: 8px 12px;
-  background: var(--panel-2, #1A1A18);
+  background: var(--panel-2);
   border-bottom: 0.5px solid var(--line);
 }
 .vr-kicker {
@@ -55,7 +55,7 @@
   font-weight: 700;
   letter-spacing: 0.18em;
   text-transform: uppercase;
-  color: var(--lime, #6FB572);
+  color: var(--lime);
 }
 .vr-kicker-glyph {
   font-family: var(--font-human);
@@ -85,7 +85,7 @@
 }
 .vr-collapse { font-size: 14px; padding-bottom: 4px; }
 .vr-collapse:hover,
-.vr-close:hover { border-color: var(--lime, #6FB572); color: var(--lime, #6FB572); }
+.vr-close:hover { border-color: var(--lime); color: var(--lime); }
 
 .vr-body {
   padding: 14px 14px 14px;
@@ -129,7 +129,7 @@
   width: 5px;
   height: 5px;
   border-radius: 50%;
-  background: var(--lime, #6FB572);
+  background: var(--lime);
   animation: vr-inline-pulse 1.6s ease-in-out infinite;
 }
 @keyframes vr-inline-pulse {
@@ -163,7 +163,7 @@
 }
 .vr-spinner-dot {
   width: 7px; height: 7px;
-  background: var(--lime, #6FB572);
+  background: var(--lime);
   border-radius: 50%;
   opacity: 0.35;
   animation: vr-spinner 1.2s ease-in-out infinite;
@@ -257,7 +257,7 @@
   overflow: hidden;
   /* Subtle quote feel · italic, faint left border accent. */
   font-style: italic;
-  border-left: 0.5px solid var(--lime-dim, #2D5532);
+  border-left: 0.5px solid var(--lime-dim);
   padding-left: 8px;
 }
 
@@ -283,7 +283,7 @@
 }
 .vr-progress-fill {
   height: 100%;
-  background: var(--lime, #6FB572);
+  background: var(--lime);
   transition: width 0.24s ease-out;
 }
 .vr-progress-pct {
@@ -316,8 +316,8 @@
   transition: border-color 0.12s, color 0.12s, background 0.12s;
 }
 .vr-btn:hover {
-  border-color: var(--lime, #6FB572);
-  color: var(--lime, #6FB572);
+  border-color: var(--lime);
+  color: var(--lime);
 }
 .vr-btn-speed {
   min-width: 38px;
@@ -348,15 +348,15 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border: 0.5px solid var(--lime, #6FB572);
-  color: var(--lime, #6FB572);
+  border: 0.5px solid var(--lime);
+  color: var(--lime);
   font-size: 16px;
   line-height: 1;
   align-self: flex-start;
 }
 .vr-key-icon-done {
-  background: var(--lime, #6FB572);
-  color: var(--bg, #0A0A0A);
+  background: var(--lime);
+  color: var(--bg);
 }
 .vr-key-text {
   display: flex;
@@ -385,9 +385,9 @@
 }
 .vr-cta {
   appearance: none;
-  background: var(--lime, #6FB572);
-  color: var(--bg, #0A0A0A);
-  border: 0.5px solid var(--lime, #6FB572);
+  background: var(--lime);
+  color: var(--bg);
+  border: 0.5px solid var(--lime);
   padding: 6px 12px;
   font-family: var(--mono);
   font-size: 10px;
@@ -398,8 +398,8 @@
   transition: background 0.12s, color 0.12s;
 }
 .vr-cta:hover {
-  background: var(--bg, #0A0A0A);
-  color: var(--lime, #6FB572);
+  background: var(--bg);
+  color: var(--lime);
 }
 .vr-ghost {
   appearance: none;
@@ -423,8 +423,8 @@
   font-family: var(--font-human, var(--mono));
   font-size: 11px;
   line-height: 1.45;
-  color: var(--red, #B5706A);
-  border: 0.5px solid var(--red, #B5706A);
+  color: var(--red);
+  border: 0.5px solid var(--red);
   background: var(--panel-2);
 }
 
@@ -525,10 +525,10 @@
 [data-message-id].is-streaming::before {
   /* Top-left + top-right corners. */
   background-image:
-    linear-gradient(to right,  var(--text-soft, #8E8B83) 16px, transparent 16px),
-    linear-gradient(to bottom, var(--text-soft, #8E8B83) 16px, transparent 16px),
-    linear-gradient(to left,   var(--text-soft, #8E8B83) 16px, transparent 16px),
-    linear-gradient(to bottom, var(--text-soft, #8E8B83) 16px, transparent 16px);
+    linear-gradient(to right,  var(--text-soft) 16px, transparent 16px),
+    linear-gradient(to bottom, var(--text-soft) 16px, transparent 16px),
+    linear-gradient(to left,   var(--text-soft) 16px, transparent 16px),
+    linear-gradient(to bottom, var(--text-soft) 16px, transparent 16px);
   background-position:
     top    left,   /* TL horizontal */
     top    left,   /* TL vertical   */
@@ -546,10 +546,10 @@
 [data-message-id].is-streaming::after {
   /* Bottom-left + bottom-right corners. */
   background-image:
-    linear-gradient(to right, var(--text-soft, #8E8B83) 16px, transparent 16px),
-    linear-gradient(to top,   var(--text-soft, #8E8B83) 16px, transparent 16px),
-    linear-gradient(to left,  var(--text-soft, #8E8B83) 16px, transparent 16px),
-    linear-gradient(to top,   var(--text-soft, #8E8B83) 16px, transparent 16px);
+    linear-gradient(to right, var(--text-soft) 16px, transparent 16px),
+    linear-gradient(to top,   var(--text-soft) 16px, transparent 16px),
+    linear-gradient(to left,  var(--text-soft) 16px, transparent 16px),
+    linear-gradient(to top,   var(--text-soft) 16px, transparent 16px);
   background-position:
     bottom left,
     bottom left,
@@ -592,14 +592,14 @@
   align-items: center;
   gap: 6px;
   padding: 3px 8px 3px 7px;
-  background: var(--bg, #0A0A0A);
-  border: 0.5px solid var(--lime, #6FB572);
+  background: var(--bg);
+  border: 0.5px solid var(--lime);
   font-family: var(--mono);
   font-size: 8px;
   font-weight: 700;
   letter-spacing: 0.18em;
   text-transform: uppercase;
-  color: var(--lime, #6FB572);
+  color: var(--lime);
   pointer-events: none;
   box-shadow: 0 2px 12px rgba(111, 181, 114, 0.25);
   animation: vr-np-rise 0.18s ease-out;
@@ -612,7 +612,7 @@
 .vr-np-dot {
   width: 5px;
   height: 5px;
-  background: var(--lime, #6FB572);
+  background: var(--lime);
   border-radius: 50%;
   animation: vr-np-dot-pulse 1.1s ease-in-out infinite;
 }