openclacky 1.5.13 → 1.5.15

data/lib/clacky/web/components/code-editor.js

@@ -17,24 +17,208 @@
   const LANG_MAP = {
     markdown: () => CM.markdown({ base: CM.markdownLanguage }),
     md:       () => CM.markdown({ base: CM.markdownLanguage }),
+    python:   () => CM.python(),
+    javascript: () => CM.javascript(),
+    jsx:      () => CM.jsx(),
+    typescript: () => CM.typescript(),
+    tsx:      () => CM.tsx(),
+    html:     () => CM.html(),
+    css:      () => CM.css(),
+    json:     () => CM.json(),
+    sql:      () => CM.sql(),
+    xml:      () => CM.xml(),
+    rust:     () => CM.rust(),
+    java:     () => CM.java(),
+    cpp:      () => CM.cpp(),
+    php:      () => CM.php(),
+    ruby:     () => CM.ruby(),
+    go:       () => CM.go(),
+    shell:    () => CM.shell(),
+    yaml:     () => CM.yaml(),
+    toml:     () => CM.toml(),
+    dockerfile: () => CM.dockerfile(),
+  };
+
+  // Extension → language id. Keyed by lowercase extension (no leading dot).
+  const EXT_LANG = {
+    md: "markdown", markdown: "markdown", mdx: "markdown",
+    py: "python", pyw: "python",
+    js: "javascript", mjs: "javascript", cjs: "javascript",
+    jsx: "jsx",
+    ts: "typescript", mts: "typescript", cts: "typescript",
+    tsx: "tsx",
+    html: "html", htm: "html",
+    css: "css",
+    json: "json", jsonc: "json",
+    sql: "sql",
+    xml: "xml", svg: "xml", xsd: "xml", xsl: "xml", plist: "xml",
+    rs: "rust",
+    java: "java",
+    c: "cpp", h: "cpp", cpp: "cpp", cc: "cpp", cxx: "cpp", hpp: "cpp", hxx: "cpp", hh: "cpp",
+    php: "php", php3: "php", php4: "php", php5: "php", phtml: "php",
+    rb: "ruby", rbw: "ruby", gemspec: "ruby", rake: "ruby", ru: "ruby",
+    go: "go",
+    sh: "shell", bash: "shell", zsh: "shell", ksh: "shell",
+    yaml: "yaml", yml: "yaml",
+    toml: "toml",
+    vue: "html", svelte: "html",
+  };
+
+  // Whole filename (no extension) → language id.
+  const FILENAME_LANG = {
+    dockerfile: "dockerfile",
+    gemfile: "ruby", rakefile: "ruby", vagrantfile: "ruby", guardfile: "ruby",
+    podfile: "ruby", berksfile: "ruby", brewfile: "ruby",
   };
 
   const IMAGE_EXTS  = new Set(["png","jpg","jpeg","gif","bmp","webp","svg","ico","tiff","tif","avif"]);
-  const BINARY_EXTS = new Set(["zip","gz","7z","tar","dmg","pdf","xls","xlsx","doc","docx","exe","rar","ttf","mov","mp4","mp3","db","db3","sqlite","sqlite3","dat","wasm","bin","so","dylib","dll"]);
+  const PDF_EXTS    = new Set(["pdf"]);
+  const BINARY_EXTS = new Set([
+    // archives
+    "zip","gz","7z","tar","dmg","rar","tgz","iso","jar","war",
+    // office docs (previewed via the "open with app" fallback instead)
+    "xls","xlsx","doc","docx","ppt","pptx","pot","pps","ppsx","dot",
+    "odt","ods","odp","wps","et","dps","key","numbers","pages",
+    // media
+    "mov","mp4","mp3","avi","mkv","wmv","weba","flac","wav","m4a","aac","aiff",
+    // fonts
+    "ttf","otf","woff","woff2","eot",
+    // system / misc
+    "exe","msi","db","db3","sqlite","sqlite3","dat","wasm","bin","so","dylib","dll",
+    "class","pyc","psd","ai","eps","indd","sketch","fig",
+  ]);
+
+  // Sample size matches the server-side 512-byte sniff; the ratio tolerates a
+  // few stray replacement chars in otherwise valid text.
+  const SNIFF_SAMPLE_CHARS = 512;
+  const SNIFF_REPLACEMENT_RATIO = 0.1;
+
+  const TABLE_EXTS = new Set(["csv","tsv"]);
+
+  // Rendering a full <table> forces the browser to lay out every cell to resolve
+  // column widths, so cost grows with cells rather than lines. Measured in Chrome:
+  // 1000x20 (20k cells) ~73ms, 3000x20 (60k cells) ~231ms.
+  const TABLE_MAX_ROWS = 1000;
+  const TABLE_MAX_CELLS = 50000;
 
   function _fileKind(filename) {
     if (!filename) return "text";
     const ext = filename.split(".").pop().toLowerCase();
     if (IMAGE_EXTS.has(ext))  return "image";
+    if (PDF_EXTS.has(ext))   return "pdf";
     if (BINARY_EXTS.has(ext)) return "binary";
+    if (TABLE_EXTS.has(ext))  return "table";
     return "text";
   }
 
+  // BINARY_EXTS can only list what we thought of, so unlisted binaries still
+  // reach the text branch and render as noise. Mirrors the server-side sniff in
+  // Utils::FileProcessor.binary_file_path?: a NUL byte means "not text". Decoding
+  // already turned invalid sequences into U+FFFD, so a high density of those is
+  // the same signal for encodings that carry no NUL.
+  function _looksBinary(text) {
+    if (!text) return false;
+    const head = text.slice(0, SNIFF_SAMPLE_CHARS);
+    if (head.indexOf("\u0000") >= 0) return true;
+    let replacements = 0;
+    for (let i = 0; i < head.length; i++) {
+      if (head.charCodeAt(i) === 0xFFFD) replacements++;
+    }
+    return replacements / head.length > SNIFF_REPLACEMENT_RATIO;
+  }
+
+  function _tableDelimiter(filename) {
+    const ext = (filename || "").split(".").pop().toLowerCase();
+    return ext === "tsv" ? "\t" : ",";
+  }
+
+  // RFC 4180: quoted fields may contain the delimiter, newlines and "" escapes.
+  function _parseDelimited(text, delimiter, maxRows) {
+    const rows = [];
+    let row = [];
+    let field = "";
+    let quoted = false;
+    let i = 0;
+    const limit = typeof maxRows === "number" ? maxRows : Infinity;
+
+    const endRow = () => {
+      row.push(field);
+      field = "";
+      rows.push(row);
+      row = [];
+    };
+
+    while (i < text.length) {
+      const ch = text[i];
+      if (quoted) {
+        if (ch === '"') {
+          if (text[i + 1] === '"') { field += '"'; i += 2; continue; }
+          quoted = false; i++; continue;
+        }
+        field += ch; i++; continue;
+      }
+      if (ch === '"' && field === "") { quoted = true; i++; continue; }
+      if (ch === delimiter) { row.push(field); field = ""; i++; continue; }
+      if (ch === "\r") { i += text[i + 1] === "\n" ? 2 : 1; endRow(); if (rows.length >= limit) return rows; continue; }
+      if (ch === "\n") { i++; endRow(); if (rows.length >= limit) return rows; continue; }
+      field += ch; i++;
+    }
+    if (field !== "" || row.length) endRow();
+    return rows;
+  }
+
+  // Returns { table, rows, cols, truncated }. Cells are set via textContent so
+  // untrusted file data can never be interpreted as markup.
+  function _renderTable(text, filename) {
+    const delimiter = _tableDelimiter(filename);
+    const rows = _parseDelimited(text, delimiter, TABLE_MAX_ROWS + 1);
+
+    let truncated = rows.length > TABLE_MAX_ROWS;
+    if (truncated) rows.length = TABLE_MAX_ROWS;
+
+    const cols = rows.reduce((max, r) => (r.length > max ? r.length : max), 0);
+    if (cols > 0) {
+      const maxRowsByCells = Math.max(1, Math.floor(TABLE_MAX_CELLS / cols));
+      if (rows.length > maxRowsByCells) {
+        rows.length = maxRowsByCells;
+        truncated = true;
+      }
+    }
+
+    const table = document.createElement("table");
+    if (rows.length) {
+      const thead = document.createElement("thead");
+      const headTr = document.createElement("tr");
+      rows[0].forEach((cell) => {
+        const th = document.createElement("th");
+        th.textContent = cell;
+        headTr.appendChild(th);
+      });
+      thead.appendChild(headTr);
+      table.appendChild(thead);
+
+      const tbody = document.createElement("tbody");
+      for (let r = 1; r < rows.length; r++) {
+        const tr = document.createElement("tr");
+        for (let c = 0; c < cols; c++) {
+          const td = document.createElement("td");
+          td.textContent = rows[r][c] == null ? "" : rows[r][c];
+          tr.appendChild(td);
+        }
+        tbody.appendChild(tr);
+      }
+      table.appendChild(tbody);
+    }
+    return { table: table, rows: rows.length, cols: cols, truncated: truncated };
+  }
+
   function _detectLanguage(filename) {
     if (!filename) return null;
-    const ext = filename.split(".").pop().toLowerCase();
-    const map = { md: "markdown", markdown: "markdown" };
-    return map[ext] || null;
+    const base = filename.split(/[\\/]/).pop().toLowerCase();
+    if (FILENAME_LANG[base]) return FILENAME_LANG[base];
+    const dot = base.lastIndexOf(".");
+    if (dot < 0) return null;
+    return EXT_LANG[base.slice(dot + 1)] || null;
   }
 
   function _isDark() {
@@ -76,7 +260,7 @@
       extensions.push(CM.oneDark);
     }
 
-    const langFn = LANG_MAP[opts.language || "markdown"];
+    const langFn = opts.language ? LANG_MAP[opts.language] : null;
     if (langFn) extensions.push(langFn());
 
     if (opts.readOnly) {
@@ -261,7 +445,9 @@
     open,
     createInline,
     fileKind: _fileKind,
+    looksBinary: _looksBinary,
     detectLanguage: _detectLanguage,
     renderMarkdown: _renderMarkdownHtml,
+    renderTable: _renderTable,
   };
 })(window);

data/lib/clacky/web/components/composer.js

@@ -124,8 +124,10 @@ const Composer = (() => {
 
   // Extract mention chips as plain data objects, in document order.
   // file/directory → { type, name, path }; session → { type, name, session_id }.
+  // Quote chips ride on the same chip mechanics (atomic, skipped by text()) but
+  // are not mentions — quote-select.js reads them off the DOM itself.
   function chips(el) {
-    return Array.from(el.querySelectorAll("." + CHIP_CLASS)).map((c) => {
+    return Array.from(el.querySelectorAll("." + CHIP_CLASS + ":not(.quote-chip)")).map((c) => {
       const type = c.dataset.mentionType || "";
       const out = { type: type, name: c.dataset.name || "" };
       if (type === "session") {

data/lib/clacky/web/components/datepicker.js

@@ -45,12 +45,12 @@ const DatePicker = (() => {
   function _ensurePopup() {
     if (_popup) return;
     _popup = document.createElement("div");
-    _popup.className = "dp-popup";
+    _popup.className = "dpk-popup";
     _popup.hidden = true;
     document.body.appendChild(_popup);
 
     _popup.addEventListener("click", (e) => {
-      const nav = e.target.closest(".dp-nav");
+      const nav = e.target.closest(".dpk-nav");
       if (nav) {
         e.stopPropagation();
         _month += parseInt(nav.dataset.dir);
@@ -61,10 +61,10 @@ const DatePicker = (() => {
       }
       const day = e.target.closest("[data-date]");
       if (day) { _pick(day.dataset.date); return; }
-      if (e.target.closest(".dp-btn-clear")) {
+      if (e.target.closest(".dpk-btn-clear")) {
         clear(_anchor); _dispatch(); _close(); return;
       }
-      if (e.target.closest(".dp-btn-today")) {
+      if (e.target.closest(".dpk-btn-today")) {
         const t = new Date();
         _pick(_toISO(t.getFullYear(), t.getMonth(), t.getDate()));
       }
@@ -80,31 +80,31 @@ const DatePicker = (() => {
     const firstWeekday = new Date(_year, _month, 1).getDay();
     const daysInMonth  = new Date(_year, _month + 1, 0).getDate();
 
-    let html = `<div class="dp-header">
-      <button class="dp-nav" data-dir="-12" type="button">&#8810;</button>
-      <button class="dp-nav" data-dir="-1" type="button">&#8249;</button>
-      <span class="dp-title">${loc.title(_year, _month, loc.months)}</span>
-      <button class="dp-nav" data-dir="1" type="button">&#8250;</button>
-      <button class="dp-nav" data-dir="12" type="button">&#8811;</button>
+    let html = `<div class="dpk-header">
+      <button class="dpk-nav" data-dir="-12" type="button">&#8810;</button>
+      <button class="dpk-nav" data-dir="-1" type="button">&#8249;</button>
+      <span class="dpk-title">${loc.title(_year, _month, loc.months)}</span>
+      <button class="dpk-nav" data-dir="1" type="button">&#8250;</button>
+      <button class="dpk-nav" data-dir="12" type="button">&#8811;</button>
     </div>
-    <div class="dp-grid">`;
+    <div class="dpk-grid">`;
 
-    loc.days.forEach(d => { html += `<div class="dp-dow">${d}</div>`; });
+    loc.days.forEach(d => { html += `<div class="dpk-dow">${d}</div>`; });
     for (let i = 0; i < firstWeekday; i++) html += `<div></div>`;
 
     for (let d = 1; d <= daysInMonth; d++) {
       const iso = _toISO(_year, _month, d);
-      const cls = ["dp-day",
-        iso === selVal ? "dp-day--selected" : "",
-        (_year === tY && _month === tM && d === tD) ? "dp-day--today" : "",
+      const cls = ["dpk-day",
+        iso === selVal ? "dpk-day--selected" : "",
+        (_year === tY && _month === tM && d === tD) ? "dpk-day--today" : "",
       ].filter(Boolean).join(" ");
       html += `<button class="${cls}" data-date="${iso}" type="button">${d}</button>`;
     }
 
     html += `</div>
-    <div class="dp-footer">
-      <button class="dp-btn-clear" type="button">${loc.clear}</button>
-      <button class="dp-btn-today" type="button">${loc.today}</button>
+    <div class="dpk-footer">
+      <button class="dpk-btn-clear" type="button">${loc.clear}</button>
+      <button class="dpk-btn-today" type="button">${loc.today}</button>
     </div>`;
 
     _popup.innerHTML = html;
@@ -171,7 +171,7 @@ const DatePicker = (() => {
       _open(trigger);
       return;
     }
-    if (_popup && !_popup.hidden && !e.target.closest(".dp-popup")) _close();
+    if (_popup && !_popup.hidden && !e.target.closest(".dpk-popup")) _close();
   });
 
   window.addEventListener("scroll", _position, true);

data/lib/clacky/web/components/mentions.js

@@ -528,18 +528,15 @@ const MentionAC = (() => {
 
   // ── show / hide ────────────────────────────────────────────────────────
 
-  function _createOverlay() {
-    _removeOverlay();
-    const overlay = document.createElement("div");
-    overlay.id = "mention-overlay";
-    overlay.style.cssText = "position: fixed; inset: 0; z-index: 998; background: transparent;";
-    overlay.addEventListener("click", hide);
-    document.body.appendChild(overlay);
-  }
-
-  function _removeOverlay() {
-    const overlay = document.getElementById("mention-overlay");
-    if (overlay) overlay.remove();
+  // Dismiss on outside press. A DOM overlay would have to out-stack the menu,
+  // which breaks whenever an ancestor forms a stacking context (the mobile
+  // #welcome.new-session-page is position:fixed), so listen on document.
+  function _onOutsidePointerDown(e) {
+    const menu = _menuEl();
+    const input = _inputEl();
+    if (menu && menu.contains(e.target)) return;
+    if (input && input.contains(e.target)) return;
+    hide();
   }
 
   function open(mode) {
@@ -552,7 +549,7 @@ const MentionAC = (() => {
     else if (_mode === "files") _renderFiles();
     else if (_mode === "chats") _renderChats();
     _visible = true;
-    _createOverlay();
+    document.addEventListener("pointerdown", _onOutsidePointerDown, true);
   }
 
   function hide() {
@@ -564,7 +561,7 @@ const MentionAC = (() => {
     const menu = _menuEl();
     if (menu) menu.style.display = "none";
     _unwrapAtMarker();
-    _removeOverlay();
+    document.removeEventListener("pointerdown", _onOutsidePointerDown, true);
   }
 
   function _toggle() {

data/lib/clacky/web/components/model-picker.js

@@ -36,7 +36,8 @@ const ModelPicker = (() => {
       svg: '<path d="M16.5376 0.0307374L14.3326 3.13223C14.1617 3.37577 13.9331 3.57415 13.6667 3.71001C13.4004 3.84586 13.1045 3.91504 12.8048 3.9115H0.787598V0.015152H16.5376V0.0307374Z"/><path d="M31.5 0.0321655L12.6 26.5273H0L18.9 0.0321655H31.5Z"/><path d="M14.9624 26.5272L17.1832 23.4101C17.3564 23.1689 17.5856 22.9723 17.8513 22.8368C18.1171 22.7012 18.4119 22.6306 18.7109 22.6308H30.7124V26.5272H14.9624Z"/>' },
     { re: /gemini/i,             label: "G", color: "#3B78E7",
       svg: '<path d="M11.04 19.32Q12 21.51 12 24q0-2.49.93-4.68.96-2.19 2.58-3.81t3.81-2.55Q21.51 12 24 12q-2.49 0-4.68-.93a12.3 12.3 0 0 1-3.81-2.58 12.3 12.3 0 0 1-2.58-3.81Q12 2.49 12 0q0 2.49-.96 4.68-.93 2.19-2.55 3.81a12.3 12.3 0 0 1-3.81 2.58Q2.49 12 0 12q2.49 0 4.68.96 2.19.93 3.81 2.55t2.55 3.81"/>' },
-    { re: /gpt|openai/i,         label: "O", color: "#10A37F" },
+    { re: /gpt|openai/i,         label: "G", color: "#000",
+      svg: '<path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z"/>' },
     { re: /minimax/i,            label: "M", color: "#F2402A",
       svg: '<path style="fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round" d="M4 9.5V14.5M8 6V18M12 3V21M16 6V18M20 9.5V14.5"/>' },
     { re: /qwen|tongyi/i,        label: "Q", color: "#615CED" },
@@ -67,6 +68,21 @@ const ModelPicker = (() => {
     return el;
   }
 
+  // Disclosure caret shared by the clickable status-bar fields (model name,
+  // working dir, reasoning effort). Those render as plain text, so a hover
+  // tint alone stays invisible to anyone who does not already know they open
+  // a picker — this is the only persistent affordance.
+  function caret() {
+    const el = document.createElement("span");
+    el.className = "sib-caret";
+    el.setAttribute("aria-hidden", "true");
+    el.innerHTML =
+      '<svg viewBox="0 0 16 16" width="9" height="9" aria-hidden="true">' +
+      '<path d="M4 6.5L8 10.5L12 6.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>' +
+      '</svg>';
+    return el;
+  }
+
   // Fetches ratios for names not yet cached. Rows simply stay blank when
   // the request fails (offline, unknown model).
   async function loadPriceRatios(names) {
@@ -89,6 +105,20 @@ const ModelPicker = (() => {
     return _priceCache.get(name) || null;
   }
 
+  // Provider label for a row: the preset name resolved server-side (same
+  // rules the rest of the app uses), localised when the preset ships a
+  // name_key. Returns "" for endpoints with no known provider — those rows
+  // fall back to the raw host.
+  function providerLabel(m) {
+    if (!m || !m.provider_name) return "";
+    const key = m.provider_name_key;
+    if (key && typeof I18n !== "undefined") {
+      const translated = I18n.t(key);
+      if (translated && translated !== key) return translated;
+    }
+    return m.provider_name;
+  }
+
   // Render one latency cell based on a cached result.
   //   undefined    → empty slot
   //   { ok:true }  → "812ms" in green/amber/red per threshold
@@ -239,7 +269,7 @@ const ModelPicker = (() => {
     panel.style.visibility = "hidden";
 
     const dropRect = container.getBoundingClientRect();
-    const btnRect = btn.getBoundingClientRect();
+    const btnRect = (btn || anchorRow).getBoundingClientRect();
     const panelRect = panel.getBoundingClientRect();
     const gap = 6;
     const margin = 8;
@@ -265,7 +295,16 @@ const ModelPicker = (() => {
 
     _activeSubmodelAnchor = anchorRow;
     anchorRow.classList.add("submodel-open");
-    btn.setAttribute("aria-expanded", "true");
+    if (btn) btn.setAttribute("aria-expanded", "true");
+  }
+
+  // Open the quick-switch panel anchored to any element. The session info bar
+  // caret uses this to reach the same panel without opening the full picker.
+  function toggleSubmodelPanel(anchorEl, subInfo, onSwitchSubModel) {
+    const panel = document.getElementById("sib-submodel-panel");
+    if (!panel) return false;
+    _toggleSubmodelPanel(anchorEl, anchorEl, null, subInfo, onSwitchSubModel);
+    return panel.style.display !== "none";
   }
 
   // ── Benchmark runner ────────────────────────────────────────────────────
@@ -396,11 +435,6 @@ const ModelPicker = (() => {
     }
 
     // Model rows.
-    const _nameCounts = models.reduce((acc, m) => {
-      acc[m.model] = (acc[m.model] || 0) + 1;
-      return acc;
-    }, {});
-
     models.forEach(m => {
       const opt = document.createElement("div");
       opt.className = "sib-model-option";
@@ -436,22 +470,27 @@ const ModelPicker = (() => {
         nameLine.appendChild(vis);
       }
 
-      // Distinguish rows that would otherwise look identical.
+      // Provider line: which service the model runs through (plus the user's own
+      // remark). Rendered on every row so two rows with the same model name are
+      // never ambiguous. The endpoint host and the masked key are technical
+      // details: they stay out of the line and live in the tooltip instead.
       const remark = (m.remark || "").trim();
-      if (remark || _nameCounts[m.model] > 1) {
+      const host = (() => {
+        try { return new URL(m.base_url).host; } catch { return m.base_url || ""; }
+      })();
+      const provider = providerLabel(m);
+      // Unknown endpoints (no matching provider preset) fall back to the host
+      // so a row never renders an empty second line.
+      const identityBits = [provider || host, remark].filter(Boolean);
+      if (identityBits.length) {
         left.classList.add("has-sub");
-        const host = (() => {
-          try { return new URL(m.base_url).host; } catch { return m.base_url || ""; }
-        })();
-        const subBits = [remark, host, m.api_key_masked].filter(Boolean);
-        if (subBits.length) {
-          const subLine = document.createElement("span");
-          subLine.className = "sib-model-name-sub";
-          subLine.textContent = subBits.join(" · ");
-          left.appendChild(subLine);
-          opt.title = `${m.model} · ${subBits.join(" · ")}`;
-        }
+        const subLine = document.createElement("span");
+        subLine.className = "sib-model-name-sub";
+        subLine.textContent = identityBits.join(" · ");
+        left.appendChild(subLine);
       }
+      const tipBits = [provider, host, remark, m.api_key_masked].filter(Boolean);
+      if (tipBits.length) opt.title = `${m.model} · ${tipBits.join(" · ")}`;
 
       opt.appendChild(left);
 
@@ -468,10 +507,12 @@ const ModelPicker = (() => {
         right.appendChild(check);
       }
 
-      if (m.type === "default") {
+      if (m.type === "default" || m.type === "lite") {
         const badge = document.createElement("span");
         badge.className = `model-badge ${m.type}`;
-        badge.textContent = m.type;
+        // Reuses the Settings badge labels so both surfaces stay in sync.
+        const labelKey = `settings.models.badge.${m.type}`;
+        badge.textContent = (typeof I18n !== "undefined") ? I18n.t(labelKey) : m.type;
         right.appendChild(badge);
       }
 
@@ -519,9 +560,11 @@ const ModelPicker = (() => {
 
   return {
     vendorBadge,
+    caret,
     loadPriceRatios,
     getPrice,
     populate,
     closeSubmodelPanel,
+    toggleSubmodelPanel,
   };
 })();