privateboard 0.1.0 → 0.1.3

package/public/room-settings.css

@@ -183,13 +183,15 @@
   .rs-config-row { grid-template-columns: 1fr; gap: 6px; }
 }
 
-/* Tone + intensity chip rows · explicit grid columns (4 / 3) so the
+/* Tone + intensity chip rows · explicit grid columns (5 / 3) so the
    chips always sit in a single row at content width. flex-wrap was
    the prior approach but allowed chips to fold onto a second line on
-   tight viewports — the user wants them locked to one row. */
+   tight viewports — the user wants them locked to one row. Tone count
+   bumped from 4 → 5 when `research` and `critique` were added; if
+   you add more modes, bump this number too. */
 .rs-mode-grid {
   display: grid;
-  grid-template-columns: repeat(4, max-content);
+  grid-template-columns: repeat(5, max-content);
   gap: 3px;
 }
 .rs-intensity-chips {
@@ -439,7 +441,7 @@
 /* Section label · matches the new composer's mono micro-type kicker.
    No leading lime bullet — the inline count chip carries enough
    visual weight, and dropping the bullet lets the labels sit flush
-   left like the rest of the prototype's section heads. */
+   left like the rest of the app's section heads. */
 .rs-label {
   font-size: 9px;
   font-weight: 700;

package/public/room-settings.js

@@ -16,10 +16,12 @@
       "Co-creator. Directors stand with you and push the idea outward — yes-and a contribution, name a concrete adjacent variant (\"what if we instead…\"), borrow pieces from another director's turn into new combinations. May end with one curious question, never a defense-demanding one.",
     constructive:
       "Sympathetic interrogator. They want you to win, but only via the strongest version. Each turn picks ONE load-bearing assumption and proposes the candidate stronger version that would stand. Disagreement is allowed, but every objection comes packaged with a forward path.",
+    research:
+      "Collaborative inquiry. The room mines the materials in front of it (your brief, web-search results, prior turns) for what's actually there. Each turn must cite a specific source piece, label it OBSERVATION / INFERENCE / SPECULATION, then extract the insight your lens makes salient. Defaults web search ON when a Brave key is configured.",
     debate:
       "Peer reviewer. Each turn opens by steelmanning your strongest claim (\"the strongest read of your point is…\") and only then attacks THAT version — naming a specific risk, demanding evidence, exposing the trade-off you're hiding. Sharp but professional. Skipping the steelman is a protocol violation.",
-    "no-mercy":
-      "Hostile reviewer. Default: you're wrong until proved otherwise. Points at vague terms / hand-waved mechanisms, says \"this is wrong because X\" flat — no hedge. Refuses undefined terms. Attacks the argument as half-baked / wrong, never the person. Forbidden hedge words: perhaps / maybe / could be / might.",
+    critique:
+      "Review board. The room audits a finished deliverable systematically — each turn names the dimension being audited (logic / evidence / scope / risk / etc.), surfaces 2–3 specific flaws labelled BLOCKER · MAJOR · MINOR, points at the load-bearing piece, and indicates the direction a fix would lie. At least one BLOCKER or MAJOR per turn is mandatory.",
   };
 
   /** Intensity tooltips · what each pick does to the directors' default
@@ -29,8 +31,8 @@
       "Long-form thinking aloud. Directors take the room slowly — pause to think, surface caveats, sit with ambiguity rather than rushing to resolve. Best for novel / ambiguous problems where premature conclusions cost more than slow ones.",
     sharp:
       "No hedging. Directors land each turn on a load-bearing claim and back it with the load-bearing reason. They cut the qualifying language (\"perhaps,\" \"could be,\" \"in some cases\") in favour of clear, falsifiable statements. Default for most rooms.",
-    brutal:
-      "No prisoners. Directors say what they actually think with zero softening — including \"this is wrong\" / \"this won't work because\" without preamble. Trades politeness for signal. Use when you're tired of being agreed with and want the strongest disagreements surfaced fast.",
+    terse:
+      "Telegraphic. One paragraph, often one sentence. Directors cut every warm-up, every diplomatic packaging, every \"I think\" — they state the conclusion and only justify if pressed. NOTE · this is the LENGTH dial, not the harshness dial. Whether a director pushes back hard or builds with you is set by Tone (brainstorm vs critique etc); Terse only decides how long they take saying it.",
   };
 
   /** Generic info popover · single floating element, hover-driven.
@@ -146,8 +148,8 @@
   const NAMES = {};
 
   // Baseline state — synced from window.app.currentRoom each time the
-  // overlay opens. The fallback values keep the prototype usable in
-  // standalone preview (where window.app is absent).
+  // overlay opens. The fallback values keep the page usable in standalone
+  // preview (where window.app is absent).
   const ROOM_STATE = {
     title: "the minimum viable structure of a data flywheel",
     topic: "I want to build an AI assistant for enterprise HR teams — automated resume screening + interview guides. Does this idea hold up under three-director scrutiny?",
@@ -201,8 +203,9 @@
   const MODES = [
     { v: "brainstorm",   label: "Brainstorm",   desc: "yes-and" },
     { v: "constructive", label: "Constructive", desc: "push & sharpen" },
+    { v: "research",     label: "Research",     desc: "mine the material" },
     { v: "debate",       label: "Debate",       desc: "find holes" },
-    { v: "no-mercy",     label: "No Mercy",     desc: "tear apart" }
+    { v: "critique",     label: "Critique",     desc: "audit the deliverable" }
   ];
 
 
@@ -335,9 +338,9 @@
                     <span class="rs-chip-label">Sharp</span>
                     <span class="rs-chip-info rs-info-trigger" data-info-title="Sharp" data-info-body="${escape(INTENSITY_TIPS.sharp)}" tabindex="-1" aria-label="What 'Sharp' means">i</span>
                   </button>
-                  <button type="button" class="rs-chip rs-chip-mini" data-rs-intensity-pick="brutal">
-                    <span class="rs-chip-label">Brutal</span>
-                    <span class="rs-chip-info rs-info-trigger" data-info-title="Brutal" data-info-body="${escape(INTENSITY_TIPS.brutal)}" tabindex="-1" aria-label="What 'Brutal' means">i</span>
+                  <button type="button" class="rs-chip rs-chip-mini" data-rs-intensity-pick="terse">
+                    <span class="rs-chip-label">Terse</span>
+                    <span class="rs-chip-info rs-info-trigger" data-info-title="Terse" data-info-body="${escape(INTENSITY_TIPS.terse)}" tabindex="-1" aria-label="What 'Terse' means">i</span>
                   </button>
                 </div>
               </div>
@@ -536,7 +539,7 @@
   }
 
   function renderIntensity() {
-    // Intensity is now a 3-chip row (Calm / Sharp / Brutal) instead of
+    // Intensity is now a 3-chip row (Calm / Sharp / Terse) instead of
     // a slider · highlight the active chip. The hint line above shows
     // "currently: <value>" so the picked state stays self-evident.
     const cur = effective("intensity");
@@ -693,7 +696,10 @@
     renderConfirmState();
   }
   function stageIntensity(next) {
-    if (!["calm", "sharp", "brutal"].includes(next)) return;
+    // Accept legacy `brutal` from any code path that still emits it
+    // (cached HTML, third-party clients) and normalize to `terse`.
+    if (next === "brutal") next = "terse";
+    if (!["calm", "sharp", "terse"].includes(next)) return;
     STAGED.intensity = next === ROOM_STATE.intensity ? null : next;
     renderIntensity();
     renderConfirmState();
@@ -998,7 +1004,7 @@
         const rect = bar.getBoundingClientRect();
         if (rect.width <= 0) return "sharp";
         const ratio = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
-        return ratio < 0.33 ? "calm" : ratio < 0.67 ? "sharp" : "brutal";
+        return ratio < 0.33 ? "calm" : ratio < 0.67 ? "sharp" : "terse";
       };
       bar.addEventListener("pointerdown", (e) => {
         e.preventDefault();

package/public/themes.css

@@ -45,12 +45,25 @@
 }
 
 :root {
-  --font-human: "Human Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
+  /* CJK fallback chain · PingFang SC anchors every stack so Chinese
+     glyphs always render as PingFang on macOS rather than falling
+     through to whatever `system-ui` resolves to (Songti / Microsoft
+     YaHei / Source Han depending on platform). Latin fonts stay
+     FIRST so mixed CN/EN prose still picks Human Sans / Inter / Agent
+     for English glyphs and only Chinese characters land on PingFang
+     via per-glyph fallback. */
+  --font-human: "Human Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
+                "PingFang SC", "PingFang TC", "Hiragino Sans GB", "Microsoft YaHei",
+                "Source Han Sans CN", "Noto Sans CJK SC",
+                system-ui, sans-serif;
   /* Agent italic-faced font. ui-sans-serif is a CSS generic keyword
      (must be unquoted) and resolves to the OS default sans-serif before
      hitting -apple-system / system-ui — gives a clean italic synth on
      systems where the bundled "Agent" face fails to load. */
-  --font-agent: "Agent", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
+  --font-agent: "Agent", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
+                "PingFang SC", "PingFang TC", "Hiragino Sans GB", "Microsoft YaHei",
+                "Source Han Sans CN", "Noto Sans CJK SC",
+                system-ui, sans-serif;
   /* --sans defaults to the human face — chat input, topic question,
      replies, and live notes use it unless an agent override applies. */
   --sans: var(--font-human);

package/public/user-settings.css

@@ -175,7 +175,7 @@
 }
 .us-pane-tag {
   font-family: var(--mono);
-  font-size: 10px;
+  font-size: 14px;
   font-weight: 700;
   letter-spacing: 0.2em;
   text-transform: uppercase;
@@ -321,6 +321,17 @@
   letter-spacing: -0.003em;
   width: 100%;
 }
+/* API-key masking · the input is `type="text"` so browsers don't pop
+   up "Save password?" when the user types a key and navigates away.
+   `-webkit-text-security: disc` shows dots instead of the actual
+   characters — visually equivalent to a password field, but invisible
+   to password managers. Toggle (eye button) just removes this class.
+   `text-security` is the standard property name; only Safari + Chrome
+   actually implement it under the `-webkit-` prefix today. */
+.us-input-masked {
+  -webkit-text-security: disc;
+  text-security: disc;
+}
 .us-input::placeholder { color: var(--text-faint, #3A382F); }
 /* When a key is on file, we surface a 4+4 masked preview AS the
    placeholder. Default placeholder colour is the dim "hint" tier,
@@ -394,7 +405,7 @@
 .us-theme-info { min-width: 0; }
 .us-theme-name {
   font-family: var(--mono);
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 700;
   color: var(--text, #C8C5BE);
   letter-spacing: -0.005em;
@@ -442,7 +453,7 @@
 }
 .us-key-label {
   font-family: var(--mono);
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 700;
   color: var(--text, #C8C5BE);
   letter-spacing: -0.003em;
@@ -656,6 +667,24 @@
 }
 .us-foot .us-done:hover { border-color: var(--lime, #6FB572); color: var(--lime, #6FB572); }
 
+/* Right-side cluster · website link + Done button. */
+.us-foot-right {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+.us-foot .us-website {
+  font-family: var(--mono);
+  font-size: 9.5px;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--text-soft, #8E8B83);
+  text-decoration: none;
+  transition: color 0.12s;
+}
+.us-foot .us-website:hover { color: var(--lime, #6FB572); }
+
 @media (max-width: 600px) {
   .user-settings-overlay { padding: 12px; }
   .us-head { padding-left: 14px; padding-right: 14px; }
@@ -806,7 +835,7 @@
   flex: 0 0 auto;
 }
 .us-model-name {
-  font-size: 12.5px;
+  font-size: 14px;
   color: var(--text, #C8C5BE);
   font-weight: 600;
   letter-spacing: -0.005em;
@@ -876,7 +905,7 @@
 .us-agent-row:last-child { border-bottom: none; }
 .us-agent-name-col { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; }
 .us-agent-name {
-  font-size: 12px;
+  font-size: 14px;
   color: var(--text, #C8C5BE);
   font-weight: 600;
   white-space: nowrap;
@@ -1055,7 +1084,7 @@
 .us-models-row:last-child { border-bottom: none; }
 .us-models-name {
   font-family: var(--mono, "Inter", system-ui, sans-serif);
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 700;
   color: var(--text, #C8C5BE);
   letter-spacing: -0.005em;
@@ -1130,7 +1159,7 @@
 }
 .us-models-default-name {
   font-family: var(--mono, "Inter", system-ui, sans-serif);
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 700;
   color: var(--text, #C8C5BE);
   letter-spacing: -0.005em;
@@ -1215,7 +1244,7 @@
 .us-default-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
 .us-default-row-name {
   font-family: var(--mono, "Inter", system-ui, sans-serif);
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 700;
   color: var(--text, #C8C5BE);
   letter-spacing: -0.005em;

package/public/user-settings.js

@@ -156,48 +156,12 @@
     } catch (e) { /* swallow · UI is optimistic */ }
   }
 
-  /** Pick a provider's "primary" model · used when the user clicks
-   *  "Set as default" on a provider row. We prefer the user's already-
-   *  picked model for that provider (if reachable), otherwise we fall
-   *  back to a curated primary, otherwise the first reachable model
-   *  from that provider in the registry. */
-  const PRIMARY_BY_PROVIDER = {
-    anthropic:  "opus-4-7",
-    openai:     "gpt-5-5",
-    google:     "gemini-3-flash",
-    xai:        "grok-4-3",
-    deepseek:   "deepseek-v4-pro",
-    openrouter: "opus-4-7",
-  };
-  function primaryModelForProvider(provider) {
-    const snap = modelsSnapshot();
-    const reachable = (snap && snap.reachable) || [];
-    // 1. Curated primary, if reachable.
-    const curated = PRIMARY_BY_PROVIDER[provider];
-    if (curated && reachable.find((m) => m.modelV === curated && m.provider === provider)) {
-      return curated;
-    }
-    // 2. First reachable model from that provider.
-    const first = reachable.find((m) => m.provider === provider);
-    return first ? first.modelV : null;
-  }
-  /** Look up which provider currently owns the saved default model. */
-  function currentDefaultProvider() {
-    const snap = modelsSnapshot();
-    if (!snap || !snap.defaultModelV) return null;
-    const m = (snap.reachable || []).find((x) => x.modelV === snap.defaultModelV);
-    return m ? m.provider : null;
-  }
-  /** Click handler for the per-row "Set as default" button. Picks the
-   *  provider's primary model + persists it as defaultModelV. The row
-   *  re-renders so the badge moves. */
-  async function setProviderAsDefault(provider) {
-    const modelV = primaryModelForProvider(provider);
-    if (!modelV) return;
-    await saveDefaultModel(modelV);
-    // Re-render the keys section so every LLM row updates its badge.
-    if (currentSection === "keys") renderSection("keys");
-  }
+  // Provider→primary-model helpers (`primaryModelForProvider`,
+  // `currentDefaultProvider`, `setProviderAsDefault`) lived here to
+  // power the per-row "set as default" button on the API Key pane.
+  // That button + its companion bottom-of-pane Default Model picker
+  // were removed in favour of the dedicated "Default Model" sidebar
+  // pane (single source of truth). Helpers deleted as dead code.
 
   // Set / clear a single provider key. The server applies the trim+empty-=delete
   // semantic; we mirror the resulting meta into our local cache.
@@ -500,35 +464,29 @@
     const placeholder = has
       ? (preview || "••••••••")
       : p.placeholder;
-    // Default-provider tag · only meaningful for LLM providers.
-    // We compute it from the saved defaultModelV's owning provider.
-    // The "Set as default" CTA only appears on LLM rows that are
-    // configured AND not the current default. Skill rows (Brave) are
-    // never default-eligible — they're search, not a model.
-    const isLlm = p.group === "llm";
-    const isDefault = isLlm && currentDefaultProvider() === p.id;
-    const canSetDefault = isLlm && has && !isDefault && !!primaryModelForProvider(p.id);
-    const labelExtras = isDefault
-      ? ' <span class="badge us-key-default-badge">default</span>'
-      : "";
+    // Default-model selection lives entirely in the dedicated
+    // "Default Model" sidebar pane. The previous in-row "default"
+    // badge + "set as default" button on each LLM provider was a
+    // duplicate UX that also competed with the bottom-of-pane
+    // "Default model" picker · all three controls did the same
+    // thing. The single source of truth is now the sidebar pane.
     return `
-      <div class="us-key-row${isDefault ? " is-default" : ""}" data-provider="${p.id}">
+      <div class="us-key-row" data-provider="${p.id}">
         <div class="us-key-head">
-          <div class="us-key-label">${escape(p.label)}${labelExtras}</div>
+          <div class="us-key-label">${escape(p.label)}</div>
           <div class="us-key-status ${has ? "on" : "off"}" data-status>${has ? "● configured" : "○ not set"}</div>
-          ${canSetDefault ? `<button type="button" class="us-key-set-default" data-set-default-provider="${p.id}" title="Use ${escape(p.label)} as the default model provider for new agents">set as default</button>` : ""}
           ${removable ? `<button type="button" class="us-key-remove" data-remove-provider="${p.id}" title="Remove">✕</button>` : ""}
         </div>
         <div class="us-key-hint">${escape(p.hint)}</div>
         <div class="us-input-wrap">
           <input
-            type="password"
-            class="us-input${has ? " has-preview" : ""}"
+            type="text"
+            class="us-input us-input-masked${has ? " has-preview" : ""}"
             data-key-input
             name="bk-${p.id}"
             placeholder="${escape(placeholder)}"
             value=""
-            autocomplete="new-password"
+            autocomplete="off"
             data-lpignore="true"
             data-1p-ignore="true"
             data-form-type="other"
@@ -659,43 +617,15 @@
       `;
     }).join("");
 
-    let defaultBlock = "";
-    const def = cache.defaultModelV;
-    if (reachable.length >= 2) {
-      const optgroups = providers.map((p) => {
-        const models = byProvider.get(p);
-        return `<optgroup label="${escape(providerLabel(p))}">${
-          models.map((m) => `<option value="${escape(m.modelV)}"${m.modelV === def ? " selected" : ""}>${escape(m.displayName)}</option>`).join("")
-        }</optgroup>`;
-      }).join("");
-      defaultBlock = `
-        <div class="us-models-default">
-          <div class="us-models-default-label">Default model</div>
-          <div class="us-models-default-hint">new agents inherit this. when an agent's model goes unreachable, it falls back here too.</div>
-          <div class="us-input-wrap us-models-default-wrap">
-            <select class="us-input us-models-default-select" data-default-model>${optgroups}</select>
-          </div>
-        </div>
-      `;
-    } else {
-      const m = reachable[0];
-      defaultBlock = `
-        <div class="us-models-default">
-          <div class="us-models-default-label">Default model</div>
-          <div class="us-models-default-static">
-            <span class="us-models-default-name">${escape(m.displayName)}</span>
-            <span class="us-models-default-note">only reachable model</span>
-          </div>
-        </div>
-      `;
-    }
-
+    // Default-model selection moved to the sidebar's "Default Model"
+    // pane · the previous bottom-of-pane select duplicated that flow.
+    // The Available Models block is now read-only (which models are
+    // reachable + how they route), nothing else.
     return `
       <div class="us-key-group us-key-group-models">
         <div class="us-key-group-tag">Available models</div>
         <div class="us-key-group-deck">${reachable.length} model${reachable.length === 1 ? "" : "s"} reachable across ${providers.length} provider${providers.length === 1 ? "" : "s"}. <code>direct</code> uses the provider key, <code>OR</code> routes through OpenRouter.</div>
         <div class="us-models-list">${blocks}</div>
-        ${defaultBlock}
       </div>
     `;
   }
@@ -807,61 +737,10 @@
     const slot = paneEl.querySelector("[data-models-summary]");
     if (!slot) return;
     slot.innerHTML = modelsSummaryHTML();
-    // Also refresh each LLM row's default-state UI · the "set as
-    // default" button only appears once a model from that provider
-    // becomes reachable, which happens after the user pastes a key
-    // and refreshModels() resolves. Walk the rows and patch the
-    // default-related controls in place so we don't disturb the
-    // input field the user is typing into.
-    const defaultProvider = currentDefaultProvider();
-    paneEl.querySelectorAll(".us-key-row").forEach((row) => {
-      const id = row.dataset.provider;
-      const p = PROVIDERS.find((x) => x.id === id);
-      if (!p || p.group !== "llm") return;
-      const meta = _keysMeta[id];
-      const has = !!(meta && meta.configured);
-      const isDefault = defaultProvider === id;
-      const canSet = has && !isDefault && !!primaryModelForProvider(id);
-      // Toggle .is-default on the row.
-      row.classList.toggle("is-default", isDefault);
-      // Sync the badge in the label.
-      const label = row.querySelector(".us-key-label");
-      if (label) {
-        const existing = label.querySelector(".us-key-default-badge");
-        if (isDefault && !existing) {
-          label.insertAdjacentHTML("beforeend", ' <span class="badge us-key-default-badge">default</span>');
-        } else if (!isDefault && existing) {
-          existing.remove();
-          // Cleanup adjacent whitespace text node so we don't accumulate
-          // spaces over time.
-          const next = label.lastChild;
-          if (next && next.nodeType === 3 && /\s+/.test(next.nodeValue || "")) next.remove();
-        }
-      }
-      // Sync the "set as default" button.
-      const head = row.querySelector(".us-key-head");
-      if (head) {
-        const existing = head.querySelector("[data-set-default-provider]");
-        if (canSet && !existing) {
-          // Insert just before the remove button (or at the end).
-          const btn = document.createElement("button");
-          btn.type = "button";
-          btn.className = "us-key-set-default";
-          btn.dataset.setDefaultProvider = id;
-          btn.title = `Use ${p.label} as the default model provider for new agents`;
-          btn.textContent = "set as default";
-          btn.addEventListener("click", async (e) => {
-            e.preventDefault();
-            await setProviderAsDefault(id);
-          });
-          const removeBtn = head.querySelector("[data-remove-provider]");
-          if (removeBtn) head.insertBefore(btn, removeBtn);
-          else head.appendChild(btn);
-        } else if (!canSet && existing) {
-          existing.remove();
-        }
-      }
-    });
+    // Default-model state lives in the sidebar's "Default Model"
+    // pane · this refresh used to also patch each LLM row's
+    // badge / "set as default" button, but those controls were
+    // removed to eliminate the duplicate flow.
   }
 
   /* Avatar generation · same flow as the agent profile's regenerate
@@ -903,7 +782,10 @@
 
           <footer class="us-foot">
             <span class="saved">changes save automatically</span>
-            <button type="button" class="us-done">[ Done ]</button>
+            <div class="us-foot-right">
+              <a class="us-website" href="/home.html" target="_blank" rel="noopener">website ↗</a>
+              <button type="button" class="us-done">[ Done ]</button>
+            </div>
           </footer>
 
         </div>
@@ -971,7 +853,6 @@
         if (typeof window.app.renderUserBlock === "function") window.app.renderUserBlock();
       } else {
         document.querySelectorAll(".sidebar-foot .user-name").forEach((el) => { el.textContent = (u.name || "Kay").toUpperCase(); });
-        document.querySelectorAll(".sidebar-foot .user-menu .name").forEach((el) => { el.textContent = u.name || "Kay"; });
       }
     }
 
@@ -1011,11 +892,18 @@
   }
 
   function wireKeysSection() {
+    // Show/hide toggle · the input is permanently `type="text"` so
+    // browsers don't trigger their "Save password?" popup when the
+    // user navigates away from a typed-in key (e.g., clicking another
+    // sidebar tab in user prefs). Masking is done via the CSS
+    // `-webkit-text-security: disc` rule on `.us-input-masked` —
+    // visually identical to a password input but invisible to
+    // password managers. Toggle = add/remove the masking class.
     paneEl.querySelectorAll("[data-key-eye]").forEach((btn) => {
       btn.addEventListener("click", (e) => {
         e.preventDefault();
         const input = btn.parentElement.querySelector("input");
-        if (input) input.type = input.type === "password" ? "text" : "password";
+        if (input) input.classList.toggle("us-input-masked");
       });
     });
 
@@ -1041,21 +929,10 @@
       });
     });
 
-    // Set this provider as the default · picks the provider's primary
-    // model and persists it as defaultModelV. The badge moves to the
-    // newly-default row on re-render.
-    paneEl.querySelectorAll("[data-set-default-provider]").forEach((btn) => {
-      btn.addEventListener("click", async (e) => {
-        e.preventDefault();
-        const id = btn.dataset.setDefaultProvider;
-        await setProviderAsDefault(id);
-      });
-    });
-
-    // Default-model picker · persists to /api/prefs.
-    paneEl.querySelectorAll("[data-default-model]").forEach((sel) => {
-      sel.addEventListener("change", () => { saveDefaultModel(sel.value); });
-    });
+    // 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
+    // they duplicated that flow.
 
     // Auto-save: every keystroke / paste persists immediately, no Save button.
     // We debounce slightly so we don't fire a server PUT on every character —
@@ -1124,6 +1001,26 @@
     // wireKeysSection again.
     fetchKeyMeta().then(() => {
       if (currentSection !== "keys") return;
+
+      // After-onboarding sync · the bootstrap fetchKeyMeta ran before
+      // the user wrote their first key (during onboarding). When the
+      // user opens settings without a page refresh, _keysMeta was
+      // empty at first render, so activeProviders was derived without
+      // the just-configured provider — and the keys tab paints with
+      // no row for it (e.g. "no OpenRouter section visible until
+      // refresh"). Detect that drift here and rebuild the section
+      // when a configured provider is missing its row. Inline pill
+      // refresh below handles the simpler case where the row already
+      // exists and only its `● configured` state needs flipping.
+      const missingActive = LLM_PROVIDER_IDS.filter(
+        (id) => _keysMeta[id] && _keysMeta[id].configured && !activeProviders.includes(id),
+      );
+      if (missingActive.length > 0) {
+        activeProviders = null;
+        rerenderKeysSection();
+        return;
+      }
+
       paneEl.querySelectorAll(".us-key-row").forEach((row) => {
         const provider = row.dataset.provider;
         const meta = _keysMeta[provider];
@@ -1179,6 +1076,13 @@
     if (window.app && typeof window.app.refreshKeys === "function") {
       window.app.refreshKeys();
     }
+    // If an agent profile is open, its skill rows have data-key-
+    // configured cached from first paint. Re-fetch so the web-search
+    // toggle no longer shows the "configure key" prompt after the
+    // user added the Brave key here.
+    if (typeof window.refreshAgentProfileSkills === "function") {
+      window.refreshAgentProfileSkills();
+    }
   }
 
   function init() {