@kevin5251984/guild 0.2.18 → 0.2.20

package/src/public/chat.html

@@ -8,7 +8,7 @@
     <link rel="icon" href="/favicon-32.png" type="image/png" sizes="32x32" />
     <link rel="icon" href="/favicon-16.png" type="image/png" sizes="16x16" />
     <title>Guild — 大廳</title>
-    <link rel="stylesheet" href="/chat.css?v=press-enamel" />
+    <link rel="stylesheet" href="/chat.css?v=quest-nest" />
     <script src="/i18n.js"></script>
     <script src="/md.js"></script>
   </head>
@@ -167,12 +167,7 @@
                       <a class="model-choice" href="/settings" data-i18n="model.settings">狀態欄</a>
                     </div>
                   </div>
-                  <select id="model-reasoning" hidden>
-                    <option value="minimal" data-i18n="reason.min">最低</option>
-                    <option value="low" data-i18n="reason.low">低</option>
-                    <option value="medium" data-i18n="reason.mid">中</option>
-                    <option value="high" data-i18n="reason.high">高</option>
-                  </select>
+                  <select id="model-reasoning" hidden></select>
                   <input type="checkbox" id="model-fast" hidden />
                 </div>
               </div>
@@ -266,6 +261,13 @@
     </div>
     <script>
       const COLORS = ["#7c6af7", "#5b8def", "#2ea887", "#e07a3d", "#d4537e"];
+      const SEAT_HUE = {
+        infra: "#5b8def",
+        pm: "#2ea887",
+        rd: "#e07a3d",
+        design: "#7c6af7",
+        marketing: "#d4537e",
+      };
       const CHANNEL_ROSTER_CAP = 6;
       function isGeneralChannel(ch) {
         return Boolean(ch && (ch.id === "channel-general" || ch.name === "general"));
@@ -321,6 +323,8 @@
       };
 
       function hue(key) {
+        const seat = SEAT_HUE[String(key).toLowerCase()];
+        if (seat) return seat;
         let n = 0;
         for (const ch of String(key)) n = (n + ch.charCodeAt(0) * 17) % COLORS.length;
         return COLORS[n];
@@ -341,6 +345,15 @@
         const glyph = Array.from(String(name).replace(/\s+/g, ""))[0] || "?";
         return glyph;
       }
+      function portraitUrl(bot) {
+        const url = bot && typeof bot.portrait === "string" ? bot.portrait.trim() : "";
+        return url.indexOf("/generated/") === 0 ? url : "";
+      }
+      function avatarFace(bot) {
+        const src = portraitUrl(bot);
+        if (src) return '<img alt="" src="' + escapeHtml(src) + '">';
+        return escapeHtml(initials((bot && (bot.name || bot.handle)) || "?"));
+      }
       function escapeHtml(value) {
         return String(value)
           .replace(/&/g, "&amp;")
@@ -1027,14 +1040,48 @@
         }
         return out;
       }
+      function deferredHandles(text) {
+        const raw = String(text || "");
+        const out = [];
+        const add = (name) => {
+          const key = String(name || "").toLowerCase();
+          if (key && out.indexOf(key) < 0) out.push(key);
+        };
+        const scan = raw.replace(/```[\s\S]*?```/g, " ");
+        const cue =
+          /(?:完成後|通過後|最後(?:才|由)?|才需要|才叫|才交)[^@\n]{0,24}@([A-Za-z0-9_-]+)/gi;
+        const bare =
+          /(?:完成後|才需要|才叫)\s*(?:call|ask|由)\s*`?@?([A-Za-z0-9_-]+)`?/gi;
+        let row;
+        while ((row = cue.exec(scan))) add(row[1]);
+        while ((row = bare.exec(scan))) add(row[1]);
+        const later =
+          /^[ \t]*(?:\d+[.)、]\s*|[-*•]\s+)(?:通過後|最後|然後|之後|完成後)\s*`?@([A-Za-z0-9_-]+)`?/i;
+        const lines = raw.split(/\r?\n/);
+        for (let i = 0; i < lines.length; i++) {
+          const hit = lines[i].match(later);
+          if (hit) add(hit[1]);
+        }
+        return out;
+      }
       function summonedBotIds(text) {
         const raw = String(text || "");
+        const deferred = new Set(deferredHandles(raw));
+        const members = new Set(
+          state.kind === "channel"
+            ? ((currentChannel() && currentChannel().memberIds) || [])
+            : state.kind === "dm"
+              ? [state.id]
+              : [],
+        );
         const known = new Map(
-          (state.bots || []).map((bot) => [String(bot.handle).toLowerCase(), bot.id]),
+          (state.bots || [])
+            .filter((bot) => !members.size || members.has(bot.id))
+            .map((bot) => [String(bot.handle).toLowerCase(), bot.id]),
         );
         const out = [];
-        const push = (id) => {
-          if (id && !out.includes(id)) out.push(id);
+        const push = (id, handle) => {
+          if (id && !deferred.has(handle) && !out.includes(id)) out.push(id);
         };
         let fence = false;
         const lines = raw.split(/\r?\n/);
@@ -1051,11 +1098,21 @@
           if (!m) continue;
           const names = m[1].match(/@([A-Za-z0-9_-]+)/g) || [];
           for (let n = 0; n < names.length; n++) {
-            push(known.get(names[n].slice(1).toLowerCase()));
+            const handle = names[n].slice(1).toLowerCase();
+            push(known.get(handle), handle);
           }
         }
         if (out.length) return out;
-        return mentionedBotIds(raw).slice(0, 1);
+        return mentionedBotIds(raw)
+          .filter((id) => {
+            const bot = (state.bots || []).find((row) => row.id === id);
+            return (
+              bot &&
+              (!members.size || members.has(id)) &&
+              !deferred.has(String(bot.handle).toLowerCase())
+            );
+          })
+          .slice(0, 1);
       }
       function lastBotAuthor() {
         const msgs = state.messages || [];
@@ -1128,6 +1185,12 @@
           hour12: true,
         });
       }
+      function formatMsgWhen(iso) {
+        const day = formatMsgDay(iso);
+        const clock = formatMsgClock(iso);
+        if (day && clock) return day + " " + clock;
+        return clock || day || "";
+      }
       function formatMsgDay(iso) {
         if (!iso) return "";
         const when = new Date(iso);
@@ -1229,7 +1292,20 @@
       }
       function botModelMeta(bot) {
         const model = botModelLabel(bot) || "—";
-        const reason = reasonLabel((modelCfg && modelCfg.reasoning) || "medium");
+        const spec = (() => {
+          const ref = botModelRef(bot);
+          if (!ref) return null;
+          const hit = allModels().find(
+            (row) => row.provider === ref.provider && row.model === ref.model,
+          );
+          return (hit && hit.reasoning) || null;
+        })();
+        const reasonVal = clampEffort(
+          modelCfg && modelCfg.reasoning,
+          spec,
+          Boolean(modelCfg && modelCfg.fast),
+        );
+        const reason = reasonVal ? reasonLabel(reasonVal) : "—";
         const provider = botProviderLabel(bot) || "—";
         return model + " · " + reason + " · " + provider;
       }
@@ -1266,11 +1342,15 @@
         const foot = opts.party
           ? opts.party
           : "<em>" + escapeHtml(opts.preview || "") + "</em>";
-        return (
-          '<li><a class="nav-row' +
+        const cls =
+          "nav-row" +
           (opts.on ? " on" : "") +
           (opts.unread ? " unread" : "") +
           (opts.notice ? " notice" : "") +
+          (opts.branch ? " nav-branch" : "");
+        const inner =
+          '<a class="' +
+          cls +
           '" href="' +
           opts.href +
           '">' +
@@ -1282,8 +1362,9 @@
           right +
           "</span>" +
           foot +
-          "</span></a></li>"
-        );
+          "</span></a>";
+        if (opts.bare) return inner;
+        return "<li>" + inner + "</li>";
       }
       function partyStackHtml(members) {
         const bots = Array.isArray(members) ? members : [];
@@ -1293,7 +1374,7 @@
               '<span class="avatar" style="background:' +
               hue(bot.handle) +
               '">' +
-              escapeHtml(initials(bot.name)) +
+              avatarFace(bot) +
               "</span>",
           )
           .join("");
@@ -1343,31 +1424,93 @@
       }
       function renderNav() {
         const q = document.getElementById("filter").value.toLowerCase();
-        const channels = state.channels
-          .filter((ch) => !q || ch.name.toLowerCase().includes(q))
+        const all = state.channels || [];
+        const byId = new Map(all.map((ch) => [ch.id, ch]));
+        const kidsOf = (id) =>
+          all.filter((ch) => ch.parentId === id).slice().sort(byUpdatedAtDesc);
+        const visible = new Set();
+        for (const ch of all) {
+          const hit = !q || String(ch.name || "").toLowerCase().includes(q);
+          if (!hit) continue;
+          let walk = ch;
+          while (walk) {
+            visible.add(walk.id);
+            walk = walk.parentId ? byId.get(walk.parentId) : null;
+          }
+        }
+        function channelBusy(ch) {
+          return Boolean(
+            (state.busyRoom &&
+              state.busyRoom.kind === "channel" &&
+              state.busyRoom.id === ch.id) ||
+              (state.serverLive || []).some(
+                (row) => row.kind === "channel" && row.id === ch.id,
+              ),
+          );
+        }
+        function channelUpdated(ch) {
+          let latest = ch.updatedAt ? Date.parse(ch.updatedAt) : 0;
+          for (const kid of kidsOf(ch.id)) {
+            const child = channelUpdated(kid);
+            const ts = child ? Date.parse(child) : 0;
+            if (ts > latest) latest = ts;
+          }
+          return Number.isFinite(latest) && latest > 0
+            ? new Date(latest).toISOString()
+            : ch.updatedAt;
+        }
+        function branchTree(parentId) {
+          return kidsOf(parentId)
+            .filter((ch) => visible.has(ch.id))
+            .map((ch) => {
+              const nested = branchTree(ch.id);
+              const row = navRowHtml({
+                bare: true,
+                branch: true,
+                href: "#c/" + encodeURIComponent(ch.id),
+                on: state.kind === "channel" && state.id === ch.id,
+                notice: true,
+                name: "↳ " + ch.name,
+                updatedAt: ch.updatedAt,
+                party: partyStackHtml(ch.members),
+                busy: channelBusy(ch),
+                unread: state.unread.has(roomKey("channel", ch.id)),
+              });
+              return nested
+                ? "<li>" + row + '<ul class="nav-branches">' + nested + "</ul></li>"
+                : "<li>" + row + "</li>";
+            })
+            .join("");
+        }
+        const roots = all
+          .filter((ch) => !ch.parentId && visible.has(ch.id))
           .slice()
-          .sort(byUpdatedAtDesc);
-        document.getElementById("channels").innerHTML = channels
+          .sort((a, b) =>
+            byUpdatedAtDesc(
+              { updatedAt: channelUpdated(a) },
+              { updatedAt: channelUpdated(b) },
+            ),
+          );
+        document.getElementById("channels").innerHTML = roots
           .map((ch) => {
-            const busy = Boolean(
-              (state.busyRoom &&
-                state.busyRoom.kind === "channel" &&
-                state.busyRoom.id === ch.id) ||
-                (state.serverLive || []).some(
-                  (row) => row.kind === "channel" && row.id === ch.id,
-                ),
-            );
-            const unread = state.unread.has(roomKey("channel", ch.id));
-            return navRowHtml({
+            const nested = branchTree(ch.id);
+            const row = navRowHtml({
+              bare: true,
               href: "#c/" + encodeURIComponent(ch.id),
               on: state.kind === "channel" && state.id === ch.id,
               notice: true,
               name: ch.name,
-              updatedAt: ch.updatedAt,
+              updatedAt: channelUpdated(ch),
               party: partyStackHtml(ch.members),
-              busy: busy,
-              unread: unread,
+              busy: channelBusy(ch),
+              unread: state.unread.has(roomKey("channel", ch.id)),
             });
+            return (
+              '<li class="nav-quest">' +
+              row +
+              (nested ? '<ul class="nav-branches">' + nested + "</ul>" : "") +
+              "</li>"
+            );
           })
           .join("");
         const bots = state.bots
@@ -1391,7 +1534,7 @@
                 '<span class="avatar" style="background:' +
                 hue(bot.handle) +
                 '">' +
-                escapeHtml(initials(bot.name)) +
+                avatarFace(bot) +
                 "</span>",
               name: bot.name,
               updatedAt: bot.updatedAt,
@@ -1426,7 +1569,7 @@
           '" style="background:' +
           hue(bot.handle) +
           '">' +
-          escapeHtml(initials(bot.name)) +
+          avatarFace(bot) +
           '</button><span class="who"><strong>' +
           escapeHtml(bot.name) +
           "</strong><em>@" +
@@ -1445,9 +1588,9 @@
           document.getElementById("subtitle").textContent = "";
           wrap.hidden = true;
           document.getElementById("members-pop").hidden = true;
-          av.textContent = bot ? initials(bot.name) : "?";
           av.style.background = bot ? hue(bot.handle) : "#333";
           av.classList.remove("hash-av");
+          av.innerHTML = bot ? avatarFace(bot) : "?";
           if (bot) {
             av.setAttribute("href", "#");
             av.setAttribute("data-bot-id", bot.id);
@@ -1480,7 +1623,7 @@
               '<span class="avatar" style="background:' +
               hue(bot.handle) +
               '">' +
-              escapeHtml(initials(bot.name)) +
+              avatarFace(bot) +
               "</span>",
           )
           .join("");
@@ -1624,7 +1767,7 @@
             '" style="background:' +
             hue(bot.handle) +
             '">' +
-            escapeHtml(initials(bot.name)) +
+            avatarFace(bot) +
             "</button>",
           head:
             '<div class="msg-head"><button type="button" class="name"' +
@@ -1848,23 +1991,28 @@
         rail.innerHTML = you
           .map((el) => {
             const id = el.getAttribute("data-id") || "";
+            const when = formatMsgWhen(el.getAttribute("data-at") || "");
             const preview = youPromptPreview(el);
             const top = Math.max(
               6,
               Math.min(track - 6, ((el.offsetTop + el.offsetHeight / 2) / total) * track),
             );
+            const label = [when, preview].filter(Boolean).join(" · ");
             return (
               '<button type="button" class="prompt-tick" data-prompt-jump="' +
               escapeHtml(id) +
               '" style="top:' +
               top +
-              'px"' +
+              'px" aria-label="' +
+              escapeHtml(t("promptJump") + (label ? " · " + label : "")) +
+              '"><span class="prompt-tip">' +
+              (when
+                ? '<time class="prompt-tip-when">' + escapeHtml(when) + "</time>"
+                : "") +
               (preview
-                ? ' data-preview="' + escapeHtml(preview) + '"'
+                ? '<span class="prompt-tip-text">' + escapeHtml(preview) + "</span>"
                 : "") +
-              ' aria-label="' +
-              escapeHtml(t("promptJump") + (preview ? " · " + preview : "")) +
-              '"></button>'
+              "</span></button>"
             );
           })
           .join("");
@@ -1988,6 +2136,15 @@
                     '">' +
                     t("retry") +
                     "</button>" +
+                  (state.kind === "channel" &&
+                  !msg.queued &&
+                  String(msg.id || "").indexOf("pending-") !== 0
+                    ? '<button type="button" data-branch="' +
+                      escapeHtml(msg.id) +
+                      '">' +
+                      t("branch") +
+                      "</button>"
+                    : "") +
                   (msg.queued
                     ? ""
                     : '<button type="button" class="danger" data-msg-del="' +
@@ -2003,6 +2160,8 @@
                   (msg.queued ? " queued" : msg.steer ? " steer" : "") +
                   '" data-id="' +
                   escapeHtml(msg.id) +
+                  '" data-at="' +
+                  escapeHtml(stamp) +
                   '">' +
                   clock +
                   body +
@@ -2021,7 +2180,7 @@
                 '" style="background:' +
                 hue(handle || name) +
                 '">' +
-                escapeHtml(initials(name)) +
+                (bot ? avatarFace(bot) : escapeHtml(initials(name))) +
                 "</button>";
               const head =
                 '<div class="msg-head"><button type="button" class="name"' +
@@ -2122,6 +2281,30 @@
         await loadWorkspace();
         if (state.kind === "channel") await loadMessages();
       }
+      async function closeBranch(id, ch) {
+        if (!id) return;
+        if (!confirm(t("branch.closeConfirm", { name: (ch && ch.name) || id }))) {
+          return;
+        }
+        const merge = confirm(t("branch.closeMerge"));
+        const res = await fetch(
+          "/channels/" + encodeURIComponent(id) + "/close",
+          {
+            method: "POST",
+            headers: { "content-type": "application/json" },
+            body: JSON.stringify({ merge: merge }),
+          },
+        );
+        const body = await res.json().catch(() => ({}));
+        if (!res.ok) throw new Error(body.error || t("branch.closeFailed"));
+        const parentId = (ch && ch.parentId) || body.parentId || "channel-general";
+        if (state.kind === "channel" && state.id === id) {
+          state.id = parentId;
+          setHash();
+        }
+        await loadWorkspace();
+        if (state.kind === "channel") await loadMessages();
+      }
 
 
       function roomMessagesUrl(kind, id, suffix) {
@@ -2471,6 +2654,29 @@
         renderThread();
         renderNav();
       }
+      async function branchFromMessage(id) {
+        if (state.kind !== "channel" || !state.id) return;
+        const msg = state.messages.find((item) => item.id === id);
+        if (!msg) return;
+        const def = String(msg.body || "")
+          .replace(/\s+/g, " ")
+          .trim()
+          .slice(0, 28);
+        const typed = window.prompt(t("branch.name"), def || "");
+        if (typed === null) return;
+        const name = typed.trim() || def;
+        const res = await fetch(
+          "/channels/" + encodeURIComponent(state.id) + "/branches",
+          {
+            method: "POST",
+            headers: { "content-type": "application/json" },
+            body: JSON.stringify({ messageId: id, name: name || undefined }),
+          },
+        );
+        const body = await res.json().catch(() => ({}));
+        if (!res.ok) throw new Error(body.error || "branch failed");
+        location.hash = "#c/" + encodeURIComponent(body.id);
+      }
       async function retryMessage(id, body) {
         if (canStopHere()) {
           stopTurn();
@@ -2499,6 +2705,7 @@
         const payload = {};
         if (typeof body === "string") payload.body = body;
         if (botIds.length === 1) payload.assigneeId = botIds[0];
+        if (botIds.length) payload.mentions = botIds;
         await postChat(
           messagesUrl(id) + "/retry",
           payload,
@@ -2688,6 +2895,12 @@
             await retryMessage(retry.getAttribute("data-retry"));
             return;
           }
+          const branchBtn = event.target.closest("[data-branch]");
+          if (branchBtn) {
+            event.preventDefault();
+            await branchFromMessage(branchBtn.getAttribute("data-branch"));
+            return;
+          }
           const del = event.target.closest("[data-msg-del]");
           if (del) {
             event.preventDefault();
@@ -2807,7 +3020,11 @@
         const nameEl = document.getElementById("channel-md-name");
         nameEl.value = ch ? ch.name : "";
         nameEl.disabled = locked;
-        document.getElementById("channel-md-del").hidden = locked;
+        const del = document.getElementById("channel-md-del");
+        const branched = Boolean(ch && ch.parentId);
+        del.hidden = locked;
+        del.setAttribute("data-i18n", branched ? "branch.close" : "channel.delete");
+        del.textContent = t(branched ? "branch.close" : "channel.delete");
         channelMdDialog.showModal();
       }
       const botMemoryDialog = document.getElementById("bot-memory");
@@ -2997,7 +3214,8 @@
       document.getElementById("channel-md-del").addEventListener("click", async () => {
         const ch = currentChannel();
         try {
-          await deleteChannel(state.id, ch && ch.name);
+          if (ch && ch.parentId) await closeBranch(state.id, ch);
+          else await deleteChannel(state.id, ch && ch.name);
           channelMdDialog.close();
         } catch (err) {
           alert(err.message);
@@ -4385,11 +4603,13 @@
         if (!pending) return;
         const fromCands = (cands || []).map((bot) => bot.id).filter(Boolean);
         const fromReply = replyAuthorId(pending.replyTo);
-        const botIds = fromCands.length
-          ? fromCands
+        const botIds = summoned.length
+          ? summoned
           : fromReply
             ? [fromReply]
-            : botsFromSend(pending.raw) || [];
+            : fromCands.length
+              ? fromCands
+              : botsFromSend(pending.raw) || [];
         const assigneeId = botIds.length === 1 ? botIds[0] : "";
         const ids = botIds;
         const split = splitSendTargets(ids);
@@ -4432,6 +4652,7 @@
         if (replyTo) payload.replyTo = replyTo;
         if (attachments.length) payload.attachments = attachments;
         if (assigneeId) payload.assigneeId = assigneeId;
+        if (botIds && botIds.length) payload.mentions = botIds;
         if (here) {
           state.messages = state.messages.concat([
             {
@@ -4481,7 +4702,7 @@
               '"><span class="avatar sm" style="background:' +
               hue(bot.handle) +
               '">' +
-              escapeHtml(initials(bot.name)) +
+              avatarFace(bot) +
               '</span><span class="assign-copy"><strong>' +
               escapeHtml(bot.name) +
               "</strong><span>@" +
@@ -4547,8 +4768,15 @@
           openAssign(cands, { raw: raw, packed: packed, replyTo: replyTo });
           return;
         }
-        const botIds = botsFromSend(raw);
-        const assigneeId = cands.length === 1 ? cands[0].id : "";
+        const fromReply = replyAuthorId(replyTo);
+        const botIds = summoned.length
+          ? summoned
+          : fromReply
+            ? [fromReply]
+            : botsFromSend(raw);
+        const assigneeId = summoned.length === 1
+          ? summoned[0]
+          : fromReply || (cands.length === 1 ? cands[0].id : "");
         await flushSend(raw, packed, replyTo, botIds, assigneeId);
       });
       function asLibList(value) {
@@ -5165,6 +5393,7 @@
               group: p.name || p.id,
               ready: Boolean(p.ready),
               kind: p.kind || "key",
+              reasoning: m.reasoning || null,
             });
           }
         }
@@ -5178,10 +5407,45 @@
         return hit ? hit.name : ref.model;
       }
       function reasonLabel(value) {
+        if (value === "none") return t("reason.none");
         if (value === "minimal") return t("reason.min");
         if (value === "low") return t("reason.low");
+        if (value === "medium") return t("reason.mid");
         if (value === "high") return t("reason.high");
-        return t("reason.mid");
+        if (value === "xhigh") return t("reason.xhigh");
+        if (value === "max") return t("reason.max");
+        return value || t("reason.mid");
+      }
+      function activeReasoningSpec() {
+        const ref = activeModelRef();
+        if (!ref) return null;
+        const hit = allModels().find(
+          (row) => row.provider === ref.provider && row.model === ref.model,
+        );
+        return (hit && hit.reasoning) || null;
+      }
+      function effortChoices(spec) {
+        const raw = spec && spec.supportedEfforts;
+        if (!raw || !raw.length) return [];
+        return spec.mandatory
+          ? raw.filter((key) => key !== "none")
+          : raw.slice();
+      }
+      function clampEffort(want, spec, fast) {
+        const choices = effortChoices(spec);
+        if (!choices.length) return "";
+        if (fast) {
+          if (choices.indexOf("low") >= 0) return "low";
+          if (choices.indexOf("minimal") >= 0) return "minimal";
+          return choices[choices.length - 1];
+        }
+        if (want && choices.indexOf(want) >= 0) return want;
+        if (spec.defaultEffort && choices.indexOf(spec.defaultEffort) >= 0) {
+          return spec.defaultEffort;
+        }
+        if (choices.indexOf("high") >= 0) return "high";
+        if (choices.indexOf("medium") >= 0) return "medium";
+        return choices[0];
       }
       function speedLabel() {
         return modelCfg.fast ? t("speed.fast") : t("speed.normal");
@@ -5283,25 +5547,44 @@
         }
         document.getElementById("model-results").innerHTML =
           html || '<p class="model-empty">' + t("noModels") + "</p>";
-        document.getElementById("model-reasoning").value = modelCfg.reasoning || "medium";
         document.getElementById("model-fast").checked = Boolean(modelCfg.fast);
-        const reason = reasonLabel(modelCfg.reasoning || "medium");
+        const spec = activeReasoningSpec();
+        const choices = effortChoices(spec);
+        const reasonVal = clampEffort(
+          modelCfg.reasoning,
+          spec,
+          Boolean(modelCfg.fast),
+        );
+        const reasonSel = document.getElementById("model-reasoning");
+        reasonSel.innerHTML = choices
+          .map(
+            (value) =>
+              '<option value="' +
+              value +
+              '">' +
+              reasonLabel(value) +
+              "</option>",
+          )
+          .join("");
+        if (reasonVal) reasonSel.value = reasonVal;
+        const reasonRow = document.querySelector('.model-nav [data-sheet="reasoning"]');
+        if (reasonRow) reasonRow.hidden = !choices.length;
+        if (!choices.length) {
+          const pane = document.getElementById("model-sheet-reasoning");
+          if (pane && !pane.hidden) showModelSheet("models");
+        }
+        const reason = choices.length ? reasonLabel(reasonVal) : "";
         const speed = speedLabel();
         const name = displayName(current);
         document.getElementById("model-btn-label").textContent = current
-          ? name + " " + reason
+          ? name + (reason ? " " + reason : "")
           : name;
         document.getElementById("model-row-model").textContent = name;
-        document.getElementById("model-row-reason").textContent = reason;
+        document.getElementById("model-row-reason").textContent = reason || "—";
         document.getElementById("model-row-speed").textContent = speed;
-        document.getElementById("model-reason-list").innerHTML = [
-          ["minimal", t("reason.min")],
-          ["low", t("reason.low")],
-          ["medium", t("reason.mid")],
-          ["high", t("reason.high")],
-        ]
-          .map(([value, label]) => {
-            const on = (modelCfg.reasoning || "medium") === value ? " on" : "";
+        document.getElementById("model-reason-list").innerHTML = choices
+          .map((value) => {
+            const on = reasonVal === value ? " on" : "";
             const tick = on ? '<span class="tick">✓</span>' : "";
             return (
               '<button type="button" class="model-choice' +
@@ -5309,7 +5592,7 @@
               '" data-reason="' +
               value +
               '">' +
-              label +
+              reasonLabel(value) +
               tick +
               "</button>"
             );
@@ -5537,7 +5820,9 @@
               ? '<span class="traj-av" style="background:' +
                 hue(bot.handle) +
                 '">' +
-                escapeHtml(glyph) +
+                (portraitUrl(bot)
+                  ? '<img alt="" src="' + escapeHtml(portraitUrl(bot)) + '">'
+                  : escapeHtml(glyph)) +
                 "</span>"
               : '<span class="traj-av you">' + escapeHtml(glyph) + "</span>";
             return (