privateboard 0.1.9 → 0.1.11

package/public/new-agent.css

@@ -1193,6 +1193,66 @@
   cursor: progress;
 }
 .na-avatar-regen-mark { font-size: 11px; color: var(--lime); line-height: 1; }
+/* Model picker chip · sits in the avatar column right under the
+   regen button, so the user sees the active model the moment they
+   open the modal (the foot-bottom placement was almost invisible).
+   Sized to match .na-avatar-regen so the two reads as a paired
+   control set: regen the face, switch the model. Same .cmp-dd
+   markup as the AI composer's chip — these overrides only adjust
+   the surface fit (padding / type scale / alignment). */
+.new-agent-overlay .na-avatar-model {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 12px;
+  font-size: 10px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  border: 0.5px solid var(--line-bright);
+  background: transparent;
+  color: var(--text-soft);
+  cursor: pointer;
+  transition: border-color 0.12s, color 0.12s, background 0.12s;
+  max-width: 220px;
+}
+.new-agent-overlay .na-avatar-model:hover {
+  border-color: var(--lime);
+  color: var(--lime);
+}
+.new-agent-overlay .na-avatar-model.open {
+  border-color: var(--lime);
+  color: var(--lime);
+  background: var(--bg);
+}
+.new-agent-overlay .na-avatar-model .cmp-dd-label {
+  color: var(--text-faint);
+  font-weight: 500;
+  letter-spacing: 0.14em;
+}
+.new-agent-overlay .na-avatar-model .cmp-dd-value {
+  color: var(--text);
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: none;
+  font-size: 11px;
+  /* Long model names (e.g. "Claude Opus 4.7 · 1M context") truncate
+     instead of wrapping the chip into a second line. */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 140px;
+}
+.new-agent-overlay .na-avatar-model.open .cmp-dd-value { color: var(--lime); }
+.new-agent-overlay .na-avatar-model .cmp-dd-chevron {
+  color: var(--text-faint);
+  font-size: 9px;
+  line-height: 1;
+  transition: transform 0.12s;
+}
+.new-agent-overlay .na-avatar-model.open .cmp-dd-chevron {
+  color: var(--lime);
+  transform: rotate(180deg);
+}
 /* Vibe caption · the LLM's one-line description that seeded the avatar. */
 .na-avatar-vibe {
   font-family: var(--mono);

package/public/new-agent.js

@@ -27,6 +27,10 @@
     { provider: "xai", models: [
       { v: "grok-4-3",      name: "Grok 4.3",      deck: "flagship · 1M ctx" },
       { v: "grok-4-1-fast", name: "Grok 4.1 Fast", deck: "fast · 256k ctx" }
+    ]},
+    { provider: "deepseek", models: [
+      { v: "deepseek-v4-pro",   name: "DeepSeek V4 Pro", deck: "reasoning · open weights" },
+      { v: "deepseek-v4-flash", name: "DeepSeek Lite",   deck: "V4 Flash · fast · 1M ctx" }
     ]}
   ];
   const ALL_MODELS = MODEL_GROUPS.flatMap((g) => g.models);
@@ -55,6 +59,34 @@
     }[c]));
   }
 
+  function t(k, vars) {
+    return (window.I18n && window.I18n.t(k, vars)) || k;
+  }
+
+  function applyNewAgentI18n() {
+    if (!modal) return;
+    modal.querySelectorAll("[data-i18n-na-html]").forEach((el) => {
+      const key = el.getAttribute("data-i18n-na-html");
+      if (key) el.innerHTML = t(key);
+    });
+    modal.querySelectorAll("[data-i18n-na]").forEach((el) => {
+      const key = el.getAttribute("data-i18n-na");
+      if (key && !el.hasAttribute("data-i18n-na-html")) el.textContent = t(key);
+    });
+    modal.querySelectorAll("[data-i18n-na-placeholder]").forEach((el) => {
+      const key = el.getAttribute("data-i18n-na-placeholder");
+      if (key) el.setAttribute("placeholder", t(key));
+    });
+    modal.querySelectorAll("[data-i18n-na-title]").forEach((el) => {
+      const key = el.getAttribute("data-i18n-na-title");
+      if (key) el.setAttribute("title", t(key));
+    });
+    modal.querySelectorAll("[data-i18n-na-aria]").forEach((el) => {
+      const key = el.getAttribute("data-i18n-na-aria");
+      if (key) el.setAttribute("aria-label", t(key));
+    });
+  }
+
   /* ───── 8-bit avatar generator ─────
      Pure function: same seed → same avatar.
      placeholder=true returns a neutral grey silhouette.
@@ -122,16 +154,16 @@
       <div class="new-agent-overlay" id="new-agent-overlay" role="dialog" aria-modal="true" aria-hidden="true">
         <div class="new-agent-modal" role="document">
           <div class="na-classification">
-            <span><span class="dot">●</span> directors · new</span>
-            <span class="right">// shape the role</span>
+            <span><span class="dot">●</span> <span data-i18n-na="na_class_left"></span></span>
+            <span class="right" data-i18n-na="na_class_right"></span>
           </div>
 
           <header class="na-head">
             <div>
-              <div class="na-step-num">// new <span class="hl">director</span> · manual setup</div>
-              <div class="na-step-title">shape the role</div>
+              <div class="na-step-num" data-i18n-na-html="na_step_kicker_html"></div>
+              <div class="na-step-title" data-i18n-na="na_step_title"></div>
             </div>
-            <button type="button" class="na-close" aria-label="Close">✕</button>
+            <button type="button" class="na-close" data-i18n-na-aria="na_close_aria" aria-label="">✕</button>
           </header>
 
           <div class="na-body">
@@ -143,7 +175,23 @@
                 </div>
                 <button type="button" class="na-avatar-regen" data-na-regen>
                   <span class="na-avatar-regen-mark">◆</span>
-                  <span class="na-avatar-regen-label">generate 8-bit avatar</span>
+                  <span class="na-avatar-regen-label" data-i18n-na="na_avatar_regen"></span>
+                </button>
+                <!-- Model picker · reuses the cmp-dd chip + dropdown
+                     machinery from the AI agent composer's model
+                     dropdown. Reads + writes app.loadAgentComposerModel
+                     so the user's last-picked model is shared across
+                     both flows. Sized up via .na-avatar-model in
+                     new-agent.css to match the regen button's visual
+                     weight (the toolbar-sized chip is too small to
+                     notice in a full-screen modal). The popover is
+                     opened by app.openComposerDropdown via the
+                     document-level [data-cmp-dropdown] click delegate
+                     in app.js. -->
+                <button type="button" class="cmp-dd na-avatar-model" data-cmp-dropdown="agent-model" data-i18n-na-title="na_field_model">
+                  <span class="cmp-dd-label" data-i18n-na="na_field_model"></span>
+                  <span class="cmp-dd-value" data-cmp-dd-value="agent-model"></span>
+                  <span class="cmp-dd-chevron">▾</span>
                 </button>
                 <div class="na-avatar-vibe" data-na-vibe></div>
               </div>
@@ -152,42 +200,35 @@
 
                 <div class="na-field">
                   <label class="na-field-label">
-                    <span>Name</span>
+                    <span data-i18n-na="na_field_name"></span>
                     <span class="na-field-meta"><span class="na-name-count">0</span>/32</span>
                   </label>
                   <div class="na-input-wrap na-name-wrap">
-                    <input type="text" class="na-name-input" placeholder="Aurelia · The Long-Cycle Strategist" maxlength="32">
+                    <input type="text" class="na-name-input" data-i18n-na-placeholder="na_name_ph" placeholder="" maxlength="32">
                   </div>
-                  <div class="na-field-hint">handle: <span class="na-handle-preview">/new_agent</span></div>
+                  <div class="na-field-hint"><span data-i18n-na="na_hint_handle"></span> <span class="na-handle-preview">/new_agent</span></div>
                 </div>
 
                 <div class="na-field">
                   <label class="na-field-label">
-                    <span>Intro</span>
+                    <span data-i18n-na="na_field_intro"></span>
                     <span class="na-field-meta"><span class="na-desc-count">0</span>/280</span>
                   </label>
                   <div class="na-textarea-wrap intro">
-                    <textarea class="na-desc-input" placeholder="One or two sentences · how this director shows up in a room. Reads everything on a hundred-year scale. Knows which patterns repeat and which never do." maxlength="280"></textarea>
+                    <textarea class="na-desc-input" data-i18n-na-placeholder="na_intro_ph" placeholder="" maxlength="280"></textarea>
                   </div>
-                  <div class="na-field-hint">becomes their public bio</div>
+                  <div class="na-field-hint" data-i18n-na="na_hint_bio"></div>
                 </div>
 
                 <div class="na-field">
                   <label class="na-field-label">
-                    <span>Instruction</span>
-                    <span class="na-field-meta"><span class="na-instr-count">0</span> chars · markdown</span>
+                    <span data-i18n-na="na_field_instruction"></span>
+                    <span class="na-field-meta"><span class="na-instr-count">0</span> · <span data-i18n-na="na_instr_meta"></span></span>
                   </label>
                   <div class="na-textarea-wrap tall">
-                    <textarea class="na-instr-input" spellcheck="false" placeholder="### Role
-You are __, the room's __. Your job is to ___.
-
-### Voice
-Demand ___. Don't ___. Cite ___ when ___.
-
-### Boundaries
-When the room ___, raise an objection."></textarea>
+                    <textarea class="na-instr-input" spellcheck="false" data-i18n-na-placeholder="na_instr_ph" placeholder=""></textarea>
                   </div>
-                  <div class="na-field-hint">applies to every room they join · skills, rules and model are configured later in the profile</div>
+                  <div class="na-field-hint" data-i18n-na="na_hint_instr"></div>
                 </div>
 
               </div>
@@ -195,12 +236,12 @@ When the room ___, raise an objection."></textarea>
           </div>
 
           <footer class="na-foot">
-            <div class="na-foot-meta">configure skills · rules · model after creation</div>
+            <div class="na-foot-meta" data-i18n-na="na_foot_meta"></div>
             <div class="na-foot-actions">
-              <button type="button" class="na-cancel">cancel</button>
+              <button type="button" class="na-cancel" data-i18n-na="na_cancel"></button>
               <button type="button" class="na-create" disabled>
                 <span class="na-create-mark">◆</span>
-                <span>create director</span>
+                <span data-i18n-na="na_create"></span>
               </button>
             </div>
           </footer>
@@ -229,13 +270,13 @@ When the room ___, raise an objection."></textarea>
     const addBtn = modal && modal.querySelector("[data-na-rule-add]");
     if (!list) return;
     if (rulesState.length === 0) {
-      list.innerHTML = `<li class="na-rule-empty">no rules yet · directors will follow only their instruction</li>`;
+      list.innerHTML = `<li class="na-rule-empty">${escape(t("na_rule_empty"))}</li>`;
     } else {
       list.innerHTML = rulesState.map((body, i) => `
         <li class="na-rule" data-rule-idx="${i}">
           <span class="na-rule-num">${i + 1}</span>
-          <input type="text" class="na-rule-input" placeholder="never preface · cite the load-bearing claim with **bold** · ..." maxlength="120" value="${escape(body)}">
-          <button type="button" class="na-rule-rm" data-na-rule-rm="${i}" title="Remove">✕</button>
+          <input type="text" class="na-rule-input" placeholder="${escape(t("na_rule_ph"))}" maxlength="120" value="${escape(body)}">
+          <button type="button" class="na-rule-rm" data-na-rule-rm="${i}" title="${escape(t("na_rule_rm"))}">✕</button>
         </li>
       `).join("");
     }
@@ -282,9 +323,9 @@ When the room ___, raise an objection."></textarea>
         `);
       } else {
         slots.push(`
-          <button type="button" class="na-skill-slot empty" data-na-skill-slot="${i}" title="Install ability">
+          <button type="button" class="na-skill-slot empty" data-na-skill-slot="${i}" title="${escape(t("na_skill_install"))}">
             <span class="na-skill-icon">+</span>
-            <span class="na-skill-name">empty</span>
+            <span class="na-skill-name">${escape(t("na_skill_empty"))}</span>
           </button>
         `);
       }
@@ -363,9 +404,9 @@ When the room ___, raise an objection."></textarea>
 
   function getProviderStatus(provider) {
     const keys = (typeof window.boardroomKeys === "function" ? window.boardroomKeys() : {}) || {};
-    if (keys[provider])    return { label: "direct",          cls: "direct" };
-    if (keys.openrouter)   return { label: "via openrouter",  cls: "via" };
-    return                       { label: "no key",            cls: "none" };
+    if (keys[provider])    return { label: t("na_key_direct"),         cls: "direct" };
+    if (keys.openrouter)   return { label: t("na_key_via"),            cls: "via" };
+    return                       { label: t("na_key_none"),           cls: "none" };
   }
 
   function refreshProviderStatus() {
@@ -391,10 +432,37 @@ When the room ___, raise an objection."></textarea>
     paintAvatar();
     refreshAll();
 
+    // Paint the model dropdown's current label · the chip uses the
+    // same agent-model state as the AI composer (loadAgentComposerModel),
+    // so re-opening the overlay reflects the user's last pick.
+    paintModelLabel();
+
     overlay.classList.add("open");
     overlay.setAttribute("aria-hidden", "false");
     document.body.style.overflow = "hidden";
     setTimeout(() => modal.querySelector(".na-name-input").focus(), 80);
+    applyNewAgentI18n();
+    refreshProviderStatus();
+  }
+
+  /** Read the user's current agent-model selection (shared with the
+   *  AI composer) and paint it into the overlay's `cmp-dd-value` span.
+   *  Falls back to a dash when app or its model resolver isn't ready. */
+  function paintModelLabel() {
+    const span = modal && modal.querySelector('[data-cmp-dd-value="agent-model"]');
+    if (!span) return;
+    let label = "—";
+    try {
+      if (window.app && typeof window.app.loadAgentComposerModel === "function") {
+        const v = window.app.loadAgentComposerModel();
+        if (v) {
+          label = (typeof window.app.modelLabel === "function")
+            ? (window.app.modelLabel(v) || v)
+            : v;
+        }
+      }
+    } catch (_) { /* keep dash */ }
+    span.textContent = label;
   }
 
   function close() {
@@ -511,8 +579,8 @@ When the room ___, raise an objection."></textarea>
     }
 
     if (btn) btn.disabled = true;
-    const originalLabel = labelEl?.textContent || "generate 8-bit avatar";
-    if (labelEl) labelEl.textContent = "thinking…";
+    const originalLabel = labelEl?.textContent || t("na_avatar_regen");
+    if (labelEl) labelEl.textContent = t("na_avatar_thinking");
 
     try {
       const res = await fetch("/api/avatar/generate", {
@@ -595,6 +663,9 @@ When the room ___, raise an objection."></textarea>
     // Initial paint of placeholder
     paintAvatar();
 
+    document.addEventListener("boardroom:locale", applyNewAgentI18n);
+    applyNewAgentI18n();
+
     // Create — POST to /api/agents and refresh the sidebar's agents list.
     modal.querySelector(".na-create").addEventListener("click", async () => {
       const create = modal.querySelector(".na-create");
@@ -603,20 +674,16 @@ When the room ___, raise an objection."></textarea>
       const name = modal.querySelector(".na-name-input").value.trim();
       const bio = modal.querySelector(".na-desc-input").value.trim();
       const instruction = modal.querySelector(".na-instr-input").value.trim();
-      // Default model · resolved from the user's current key set via
-      // the shared /api/models cache (`defaultModelV` field). Without
-      // this, new agents were always born with `opus-4-7` even when
-      // the user only had a direct OpenAI key — the agent would then
-      // hit `NoKeyError` on every turn until the user manually
-      // changed its model. The cache may not have loaded yet (very
-      // first interaction); we fall back to `opus-4-7` only as a
-      // last resort and leave the runtime resolver to fix it up.
+      // Model · the foot dropdown writes the user's pick to the shared
+      // agent-composer model state (loadAgentComposerModel). It
+      // already does the reachability + default-resolver fallback
+      // chain (server defaultModelV → first reachable → DEFAULT_AGENT_MODEL),
+      // so this just reads it back. Hard fallback to "opus-4-7" only
+      // covers the edge case where window.app isn't initialized.
       let modelV = "opus-4-7";
-      const cache = (typeof window.boardroomModels === "function") ? window.boardroomModels() : null;
-      if (cache && typeof cache.defaultModelV === "string" && cache.defaultModelV) {
-        modelV = cache.defaultModelV;
-      } else if (cache && Array.isArray(cache.reachable) && cache.reachable.length > 0) {
-        modelV = cache.reachable[0].modelV;
+      if (window.app && typeof window.app.loadAgentComposerModel === "function") {
+        const picked = window.app.loadAgentComposerModel();
+        if (picked) modelV = picked;
       }
 
       // Avatar → data URL. If the user never clicked "regenerate", we
@@ -631,9 +698,8 @@ When the room ___, raise an objection."></textarea>
       const avatarPath = "data:image/svg+xml;utf8," + encodeURIComponent(svg);
 
       // Lock the button while the request is in flight.
-      const orig = create.textContent;
       create.disabled = true;
-      create.textContent = "[ creating… ]";
+      create.innerHTML = `<span class="na-create-mark">◆</span><span>${escape(t("na_creating"))}</span>`;
 
       try {
         const res = await fetch("/api/agents", {
@@ -658,9 +724,11 @@ When the room ___, raise an objection."></textarea>
         } catch (_) { /* */ }
         close();
       } catch (e) {
-        alert("Couldn't create the director: " + (e && e.message ? e.message : e));
+        const msg = e && e.message ? e.message : String(e);
+        alert(t("na_create_fail", { msg }));
         create.disabled = false;
-        create.textContent = orig;
+        create.innerHTML = `<span class="na-create-mark">◆</span><span data-i18n-na="na_create"></span>`;
+        applyNewAgentI18n();
       }
     });
   }

package/public/room-settings.js

@@ -124,6 +124,7 @@
    *  new model the catalog doesn't know about yet). */
   const MODEL_LABELS = {
     "sonnet-4-6":     "Sonnet 4.6",
+    "opus-4-6":       "Opus 4.6",
     "opus-4-7":       "Opus 4.7",
     "opus-4-6":       "Opus 4.6",
     "opus-4-6-fast":  "Opus 4.6 Fast",
@@ -138,9 +139,9 @@
     "gemini-3-1-flash": "Gemini 3.1 Flash Lite",
     "grok-4-3":       "Grok 4.3",
     "grok-4-1-fast":  "Grok 4.1 Fast",
-    "grok-4-3":       "Grok 4.3",
     "grok-4-20":      "Grok 4.20",
     "deepseek-v4-pro": "DeepSeek V4 Pro",
+    "deepseek-v4-flash": "DeepSeek Lite",
   };
   function modelLabelFor(v) {
     if (!v) return "";

package/public/user-settings.css

@@ -343,6 +343,43 @@
   min-width: 0;
 }
 
+/* Preferences → Other · EN / Zh (moved off the sidebar chrome) */
+.us-pane-body .locale-switch {
+  display: inline-flex;
+  align-items: center;
+  padding: 1px;
+  border: 1px solid var(--line-bright, rgba(255, 255, 255, 0.09));
+  border-radius: 3px;
+  background: var(--panel-2, #151514);
+}
+.us-pane-body .locale-switch .locale-btn {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: var(--text-dim);
+  font-family: var(--mono);
+  font-size: 10px;
+  font-weight: 600;
+  padding: 3px 8px;
+  cursor: pointer;
+  border-radius: 2px;
+  line-height: 1.2;
+}
+.us-pane-body .locale-switch .locale-btn:hover { color: var(--text-soft); }
+.us-pane-body .locale-switch .locale-btn.active {
+  background: var(--panel-3);
+  color: var(--lime, #6fb572);
+}
+.us-locale-deck {
+  margin: 10px 0 0;
+  padding: 0;
+  max-width: 420px;
+  font-size: 11px;
+  color: var(--text-faint, #3a382f);
+  letter-spacing: 0.02em;
+  line-height: 1.5;
+}
+
 /* User avatar block */
 .us-avatar-row {
   display: flex;
@@ -639,6 +676,20 @@
   border-color: var(--red, #B5706A);
   color: var(--red, #B5706A);
 }
+/* Locked variant · the only configured LLM key cannot be removed —
+   the boardroom would land in a "no usable carrier" state and every
+   director / chair / brief writer would fail. Renders dimmed and
+   non-interactive; the title attribute carries the explanation
+   ("Add another LLM key first — at least one must remain
+   configured."). The user-facing path to "delete this key" is to
+   add another LLM provider first, then come back to this row. */
+.us-key-remove.is-locked,
+.us-key-remove.is-locked:hover {
+  cursor: not-allowed;
+  opacity: 0.45;
+  border-color: var(--line-bright, #2A2A26);
+  color: var(--text-faint, #3A382F);
+}
 
 /* "Set as default" CTA · sits next to the remove button on configured
    non-default LLM rows. Quiet outline by default, flips to lime on
@@ -1352,6 +1403,23 @@
   margin: -4px 0 6px;
 }
 
+.us-ws-backend-radios {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14px 22px;
+}
+.us-ws-backend-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--text-soft, #8E8B83);
+  cursor: pointer;
+}
+.us-ws-backend-label span {
+  color: var(--text, #C8C5BE);
+}
+
 /* ─── Available models summary + default picker ───
    Lives at the bottom of the API Key section. Pure-list layout —
    no shadows, no left accents. Provider tag + flat per-model rows