From accdc4fc5349023135e3af43d167bbefdded0a6f Mon Sep 17 00:00:00 2001
From: lekt8 <lewistham9x@gmail.com>
Date: Mon, 8 Jun 2026 01:23:44 +0800
Subject: [PATCH] Add hover tooltips for clipped model names (#1982) (#1985)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Long model names are truncated with ellipsis in two places with no way to see
the full name: the model-picker dropdown items and the chat-header model
indicator. Add a native title tooltip carrying the full name to both — the
dropdown item's name span (nameSpan.title = m.display) and the header label
(label.title = the full model id; empty for the 'Select model' placeholder).

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 static/js/modelPicker.js         |  6 ++++++
 tests/test_model_name_tooltip.py | 26 ++++++++++++++++++++++++++
 2 files changed, 32 insertions(+)
 create mode 100644 tests/test_model_name_tooltip.py

diff --git a/static/js/modelPicker.js b/static/js/modelPicker.js
index 3c57a80e4..a0e7095c6 100644
--- a/static/js/modelPicker.js
+++ b/static/js/modelPicker.js
@@ -328,6 +328,9 @@ function _initModelPickerDropdown() {
       const nameSpan = document.createElement('span');
       nameSpan.className = 'mp-model-name';
       nameSpan.textContent = m.display;
+      // Long model names are clipped with ellipsis — expose the full name on
+      // hover so the suffix/variant tag is still discoverable (#1982).
+      nameSpan.title = m.display;
       row.appendChild(nameSpan);
       if (m.stale) {
         const badge = document.createElement('span');
@@ -735,6 +738,9 @@ export function updateModelPicker() {
   }
 
   const displayName = modelId ? modelId.split('/').pop() : 'Select model';
+  // The header indicator clips long names with ellipsis; show the full model
+  // identifier on hover (#1982). No tooltip on the "Select model" placeholder.
+  label.title = modelId || '';
   const logo = modelId ? providerLogo(modelId) : null;
   if (logo) {
     label.innerHTML = '<span class="model-picker-logo">' + logo + '</span> ' + displayName;
diff --git a/tests/test_model_name_tooltip.py b/tests/test_model_name_tooltip.py
new file mode 100644
index 000000000..e1f1bdf7b
--- /dev/null
+++ b/tests/test_model_name_tooltip.py
@@ -0,0 +1,26 @@
+"""Regression for issue #1982 — long model names are clipped with ellipsis in
+two surfaces (the model-picker dropdown items and the chat-header model
+indicator) with no tooltip, so the suffix/variant tag is undiscoverable.
+
+The fix adds a `title` (native hover tooltip) carrying the full name to both
+render sites in static/js/modelPicker.js. The module pulls in browser globals so
+it can't be imported under node; this guards the two title assignments at source.
+"""
+import re
+from pathlib import Path
+
+SRC = (Path(__file__).resolve().parent.parent / "static/js/modelPicker.js").read_text(encoding="utf-8")
+
+
+def test_dropdown_item_has_title_tooltip():
+    # The dropdown item name span must carry a title with the full display name.
+    assert re.search(r"nameSpan\.title\s*=\s*m\.display", SRC), \
+        "dropdown model-name span needs a title tooltip (#1982)"
+
+
+def test_header_indicator_has_title_tooltip():
+    # updateModelPicker must set the header label's title to the full model id
+    # (empty for the 'Select model' placeholder).
+    body = SRC[SRC.index("export function updateModelPicker()"):]
+    assert re.search(r"label\.title\s*=\s*modelId\b", body), \
+        "header model indicator needs a title tooltip (#1982)"