openclacky 1.5.19 → 1.5.21

data/lib/clacky/web/app.js

@@ -55,7 +55,10 @@ const PANELS = [
   "channels-panel",
   "mcp-panel",
   "extensions-panel",
+  "data-management-panel",
   "trash-panel",
+  "archive-panel",
+  "backup-panel",
   "profile-panel",
   "billing-panel",
   "settings-panel",
@@ -194,6 +197,8 @@ const Router = (() => {
       return { view: "extensions", params: { detailId: mExtDetail[1], source } };
     }
     if (path === "trash")             return { view: "trash",    params: {} };
+    if (path === "archive")           return { view: "archive",  params: {} };
+    if (path === "backup")            return { view: "backup",   params: {} };
     if (path === "profile")           return { view: "profile",  params: {} };
     // Legacy: #memories redirects to #profile (memories are now merged into
     // the profile panel). Kept so bookmarks / external links don't 404.
@@ -213,17 +218,41 @@ const Router = (() => {
   // Sidebar items managed by Router (keyed by view name → element id).
   // Router is the single authority for active highlight — modules must NOT
   // add/remove the "active" class on these elements themselves.
+  // The three data-management views share one rail entry: they are tabs of a
+  // single page, so any of them highlights the same sidebar item.
   const SIDEBAR_ITEMS = {
     tasks:    "tasks-sidebar-item",
     skills:   "skills-sidebar-item",
     channels: "channels-sidebar-item",
     mcp:      "mcp-sidebar-item",
     extensions: "extensions-sidebar-item",
-    trash:    "trash-sidebar-item",
+    trash:    "data-management-sidebar-item",
+    archive:  "data-management-sidebar-item",
+    backup:   "data-management-sidebar-item",
     profile:  "profile-sidebar-item",
     billing:  "billing-sidebar-item",
   };
 
+  // Tabs of the data-management page, in display order. The view name is also
+  // the tab's hash route and its panel id prefix.
+  const DATA_MANAGEMENT_TABS = ["archive", "trash", "backup"];
+
+  // Show the data-management page with `tab` selected. Every tab keeps its own
+  // panel element (module-owned body), only visibility is toggled here.
+  function _showDataManagementTab(tab) {
+    const page = $("data-management-panel");
+    if (page) page.style.display = "flex";
+    DATA_MANAGEMENT_TABS.forEach(name => {
+      const panel = $(name + "-panel");
+      if (panel) panel.style.display = name === tab ? "flex" : "none";
+      const btn = $("tab-dm-" + name);
+      if (btn) {
+        btn.classList.toggle("active", name === tab);
+        btn.setAttribute("aria-selected", String(name === tab));
+      }
+    });
+  }
+
   // Remove active highlight from all Router-managed sidebar items.
   function _clearSidebarActive() {
     Object.values(SIDEBAR_ITEMS).forEach(id => {
@@ -258,6 +287,7 @@ const Router = (() => {
       Sessions._cacheActiveAndDeselect();
     }
     Sessions.updateInfoBar(null);  // hide info bar when leaving any session
+    Sessions.updateChatHeader(null);  // and clear the header title
     // Clear all sidebar highlights and settings button active state
     _clearSidebarActive();
     const btnSettings = $("btn-settings");
@@ -380,11 +410,25 @@ const Router = (() => {
 
       case "trash":
         _setHash("trash");
-        $("trash-panel").style.display = "flex";
+        _showDataManagementTab("trash");
         Trash.onPanelShow();
         Sessions.renderList();
         break;
 
+      case "archive":
+        _setHash("archive");
+        _showDataManagementTab("archive");
+        Archive.onPanelShow();
+        Sessions.renderList();
+        break;
+
+      case "backup":
+        _setHash("backup");
+        _showDataManagementTab("backup");
+        Backup.onPanelShow();
+        Sessions.renderList();
+        break;
+
       case "profile":
         _setHash("profile");
         $("profile-panel").style.display = "flex";
@@ -403,7 +447,7 @@ const Router = (() => {
         _setHash("settings");
         $("settings-panel").style.display = "";
         if (btnSettings) btnSettings.classList.add("active");
-        Settings.open();
+        Settings.open(params);
         Sessions.renderList();
         break;
 
@@ -460,6 +504,16 @@ const Router = (() => {
     _apply(view, params).catch(err => console.error("Router._apply failed:", err));
   });
 
+  // The data-management tab bar is navigation, nothing more: a tab click means
+  // the same thing as navigating to that view, so the Router owns the handler.
+  const dmTabs = $("data-management-tabs");
+  if (dmTabs) {
+    dmTabs.addEventListener("click", (e) => {
+      const tab = e.target.closest("[data-dm-tab]");
+      if (tab) Router.navigate(tab.dataset.dmTab);
+    });
+  }
+
   // Extensions request navigation via a CustomEvent so ext.js has no direct
   // dependency on Router. Detail is { view, params } — same shape as navigate().
   document.addEventListener("clacky:ext:navigate", (e) => {
@@ -811,9 +865,13 @@ $("sidebar-overlay").addEventListener("click", _closeSidebar);
   const handle = $("sidebar-resize-handle");
   if (!sidebar || !handle) return;
 
-  const MIN_W = 12;  // rem
+  const MIN_W = 14.5;  // rem
   const MAX_W = 32;  // rem
   const baseFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+  // The width lives on #app so the header's session divider tracks the same
+  // edge as the sidebar (see the Sidebar section in app.css).
+  const appRoot = $("app");
+  const setWidth = (rem) => appRoot.style.setProperty("--sidebar-width", rem + "rem");
 
   let startX = 0;
   let startW = 0;
@@ -823,7 +881,7 @@ $("sidebar-overlay").addEventListener("click", _closeSidebar);
   if (saved) {
     const w = parseFloat(saved);
     if (w >= MIN_W && w <= MAX_W) {
-      sidebar.style.setProperty("--sidebar-width", w + "rem");
+      setWidth(w);
     }
   }
 
@@ -844,7 +902,7 @@ $("sidebar-overlay").addEventListener("click", _closeSidebar);
     if (!handle.classList.contains("active")) return;
     const dx = (e.clientX - startX) / baseFontSize;
     const newW = Math.min(MAX_W, Math.max(MIN_W, startW + dx));
-    sidebar.style.setProperty("--sidebar-width", newW + "rem");
+    setWidth(newW);
   });
 
   document.addEventListener("mouseup", () => {
@@ -962,18 +1020,28 @@ window.bootAfterBrand = async function() {
 })();
 
 // ── Image Lightbox ────────────────────────────────────────────────────────────
-// Global lightbox: click any .msg-image-thumb to open; click backdrop or ✕ or
-// press ESC to close.
+// Global lightbox: click a sent image or a pending attachment thumbnail to
+// open; click backdrop or ✕ or press ESC to close.
 (function () {
+  const IMAGE_SELECTOR = ".msg-image-thumb, .img-preview-thumb";
   let _overlay = null;
 
   function _open(src, alt) {
     if (_overlay) return;
     _overlay = document.createElement("div");
     _overlay.className = "img-lightbox";
-    _overlay.innerHTML =
-      `<span class="img-lightbox-close" title="Close">✕</span>` +
-      `<img src="${src}" alt="${alt || "image"}">`;
+
+    const close = document.createElement("span");
+    close.className = "img-lightbox-close";
+    close.title = "Close";
+    close.textContent = "✕";
+
+    const image = document.createElement("img");
+    image.src = src;
+    image.alt = alt || "image";
+
+    _overlay.appendChild(close);
+    _overlay.appendChild(image);
 
     // Click on backdrop or ✕ → close
     _overlay.addEventListener("click", function (e) {
@@ -994,9 +1062,10 @@ window.bootAfterBrand = async function() {
     if (e.key === "Escape") _close();
   });
 
-  // Event delegation: any click on .msg-image-thumb anywhere in the page
+  // Event delegation covers sent images and local image attachments waiting
+  // in either composer. File cards and reference chips are intentionally out.
   document.addEventListener("click", function (e) {
-    if (e.target.classList.contains("msg-image-thumb")) {
+    if (e.target.matches(IMAGE_SELECTOR)) {
       _open(e.target.src, e.target.alt);
     }
   });

data/lib/clacky/web/components/chat-navigator.js

@@ -306,18 +306,24 @@
   function syncMessages() {
     if (!messages || sessionId !== Sessions.activeId) return;
     const byId = new Map(items.map((item, index) => [item.id, index]));
+    const byTask = new Map();
     const liveByTime = new Map();
     items.forEach((item, index) => {
+      if (item.taskId) byTask.set(String(item.taskId), index);
       if (!item.archived && item.created_at) liveByTime.set(String(item.created_at), index);
     });
     loaded = [];
     messages.querySelectorAll(".msg-user-wrap").forEach(el => {
       const bubble = el.querySelector(".msg-user");
       let index = byId.get(bubble?.dataset.roundId);
+      // Compression re-keys rounds without re-rendering bubbles; task ids survive it.
+      if (index === undefined) index = byTask.get(bubble?.dataset.taskId);
       // Only optimistic live bubbles need a timestamp fallback. Archived
       // targets always use source locators, never synthetic timestamps.
       if (index === undefined && bubble?.dataset.editable !== "false") index = liveByTime.get(bubble?.dataset.createdAt);
-      if (index !== undefined) loaded.push({ index, el });
+      if (index === undefined) return;
+      if (items[index].taskId) bubble.dataset.taskId = String(items[index].taskId);
+      loaded.push({ index, el });
     });
     _updateActive();
   }
@@ -379,6 +385,7 @@
         const identity = source.identities?.[offset] || null;
         return { id: JSON.stringify([source.key, offset, source.version, identity]),
           bookmarkKey: _bookmarkKey(source, offset, identity),
+          taskId: source.task_ids?.[offset] || identity?.[1] || null,
           archived: !source.identities, created_at: identity?.[0] };
       }));
       const validBookmarks = new Set(items.map(item => item.bookmarkKey));

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

@@ -73,14 +73,16 @@
 
   const IMAGE_EXTS  = new Set(["png","jpg","jpeg","gif","bmp","webp","svg","ico","tiff","tif","avif"]);
   const PDF_EXTS    = new Set(["pdf"]);
+  const VIDEO_EXTS  = new Set(["mp4","webm","mov"]);
+  const AUDIO_EXTS  = new Set(["mp3","wav","ogg","aac","flac","m4a"]);
   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",
+    // media formats without reliable browser-native playback
+    "avi","mkv","wmv","weba","aiff",
     // fonts
     "ttf","otf","woff","woff2","eot",
     // system / misc
@@ -106,6 +108,8 @@
     const ext = filename.split(".").pop().toLowerCase();
     if (IMAGE_EXTS.has(ext))  return "image";
     if (PDF_EXTS.has(ext))   return "pdf";
+    if (VIDEO_EXTS.has(ext)) return "video";
+    if (AUDIO_EXTS.has(ext)) return "audio";
     if (BINARY_EXTS.has(ext)) return "binary";
     if (TABLE_EXTS.has(ext))  return "table";
     return "text";

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

@@ -67,7 +67,7 @@ const MentionAC = (() => {
   async function _fetchSessions(before) {
     // Cron/scheduled-task sessions are noise here — exclude them from references.
     const params = new URLSearchParams({ limit: "20", exclude_type: "cron" });
-    if (before) params.set("before", before);
+    if (before) { params.set("before", before.before); params.set("before_id", before.before_id); }
     const url = `/api/sessions?${params}`;
     const res = await fetch(url);
     if (!res.ok) throw new Error(`HTTP ${res.status}`);
@@ -303,18 +303,7 @@ const MentionAC = (() => {
       const sessions = data.sessions || [];
       _chatsHasMore = !!data.has_more;
       _items = _items.concat(sessions.map((s) => ({ kind: "session", id: s.id, name: s.name || s.id })));
-      if (sessions.length) {
-        // Cursor must come from a non-pinned session: pinned sessions sit at
-        // the top regardless of age, so an old pinned row would otherwise push
-        // the cursor too far back and leave the next page empty.
-        const oldest = sessions.reduce((min, s) => {
-          if (s.pinned) return min;
-          const t = s.updated_at || s.created_at;
-          if (!t) return min;
-          return (!min || t < min) ? t : min;
-        }, null);
-        if (oldest) _chatsCursor = oldest;
-      }
+      if (data.next_cursor) _chatsCursor = data.next_cursor;
       _renderChatItems(listWrap, reset);
     } catch (err) {
       if (_mode !== "chats" || req !== _chatsReq) return;

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

@@ -182,14 +182,18 @@ const ModelPicker = (() => {
     ratio.textContent = price.label;
     el.appendChild(ratio);
     const vars = { in: price.in, out: price.out };
-    let tipKey = "sib.price.tip";
+    // Bedrock GPT carries a 20% markup over list, so the standard-price claim
+    // would be wrong for these rows.
+    let tipKey = name.startsWith("abs-gpt-") ? "sib.price.tip.abs" : "sib.price.tip";
     if (price.discount) {
       const badge = document.createElement("span");
       badge.className = "sib-model-discount";
       badge.textContent = I18n.t("sib.discount.tag", _discountVars(price.discount));
       el.appendChild(badge);
       Object.assign(vars, _discountVars(price.discount));
-      tipKey = "sib.price.tip.discounted";
+      // A discount on a vendor-owned lane (Vertex) is a promo, not evidence
+      // of a third-party channel feeding us below list.
+      tipKey = price.discount.reason === "promo" ? "sib.price.tip.promo" : "sib.price.tip.discounted";
     }
     el.setAttribute("data-tooltip", I18n.t(tipKey, vars));
     return true;
@@ -209,27 +213,6 @@ const ModelPicker = (() => {
     return m.provider_name;
   }
 
-  // [label, value] pairs for the picker header: which provider serves the live
-  // model, and which model that is. The list below spans every provider, so
-  // without this the rows read as if they were choosing a provider.
-  function pickerHeadBits(models, currentId, subInfo) {
-    const current = (models || []).find((m) => m.id === currentId);
-    if (!current) return [];
-
-    const label = (key, fallback) =>
-      (typeof I18n !== "undefined") ? I18n.t(key) : fallback;
-    const overridden =
-      subInfo && subInfo.current && subInfo.current !== subInfo.cardModel
-        ? subInfo.current
-        : null;
-
-    const bits = [];
-    const provider = providerLabel(current);
-    if (provider) bits.push([label("sib.picker.provider", "Provider"), provider]);
-    bits.push([label("sib.picker.current", "Current model"), overridden || current.model]);
-    return bits;
-  }
-
   // Render one latency cell based on a cached result.
   //   undefined    → empty slot
   //   { ok:true }  → "812ms" in green/amber/red per threshold
@@ -326,8 +309,6 @@ const ModelPicker = (() => {
       priceEl.className = "sib-model-price";
       rightBox.appendChild(priceEl);
 
-      _decorateAutoRow(row, name, rightBox);
-
       if (name === cardDefault) {
         const tag = document.createElement("span");
         tag.className = "sib-submodel-default-tag";
@@ -336,6 +317,11 @@ const ModelPicker = (() => {
       }
       row.appendChild(rightBox);
 
+      // The variant panel is where the economy-first alias is explained: here
+      // the name stands alone, unlike the dropdown rows that lead with the
+      // provider.
+      if (/^auto$/i.test(name || "")) _decorateAutoRow(row, name, rightBox);
+
       row.addEventListener("click", (ev) => {
         ev.stopPropagation();
         const passName = (name === cardDefault) ? null : name;
@@ -555,6 +541,8 @@ const ModelPicker = (() => {
   // Attaches the economy-first tag and its hover card — or nothing at all when
   // the alias is pinned to a concrete model, where the row already reads as a
   // normal model and the routing hint would contradict what is selected.
+  // Settings' model rows are the only caller: dropdown rows lead with the
+  // provider now and leave no room for the tag.
   function _decorateAutoRow(row, modelName, box) {
     if (!/^auto$/i.test(modelName || "")) return;
     const tag = document.createElement("span");
@@ -583,9 +571,13 @@ const ModelPicker = (() => {
   //   models           [{id, model, type, remark, base_url, api_key_masked, ...}]
   //   currentId        id of the currently-selected model
   //   onSelect(model)  selection callback (required)
-  //   mediaCaps        {vision, image, video, audio} — enables vision badge + footer
-  //   subInfo          {options, current, cardModel} — enables sub-model panel
+  //   mediaCaps        {vision, image, video, audio} — enables the generation footer
+  //   subInfo          {options, current, cardModel} — the live sub-model list
+  //                    of the session's current row
   //   onSwitchSubModel (name|null, displayName) — required when subInfo given
+  //   onSwitchRowSubModel (model, name, displayName) — required to offer the
+  //                    switcher on rows other than the current one; the host
+  //                    switches the session onto that model first
   //   onBenchmark      async () => [{model_id, ok, ttft_ms, error}] — enables ⚡
   //   onAddModel       () => void — enables the "Add Model" entry
   //   onConfigureMedia () => void — required when mediaCaps given
@@ -593,45 +585,12 @@ const ModelPicker = (() => {
     const {
       models, currentId, onSelect,
       mediaCaps, subInfo, onSwitchSubModel,
-      onBenchmark, onAddModel, onConfigureMedia,
+      onSwitchRowSubModel, onBenchmark, onAddModel, onConfigureMedia,
     } = opts;
 
     container.innerHTML = "";
     _hideAutoTip();
 
-    // Header: names the surface and states the live provider/model, so the
-    // list below is not mistaken for a provider chooser.
-    const head = document.createElement("div");
-    head.className = "sib-picker-head";
-
-    const title = document.createElement("div");
-    title.className = "sib-picker-title";
-    title.textContent = (typeof I18n !== "undefined") ? I18n.t("sib.picker.title") : "Choose model";
-    head.appendChild(title);
-
-    const headBits = pickerHeadBits(models, currentId, subInfo);
-    if (headBits.length) {
-      const sub = document.createElement("div");
-      sub.className = "sib-picker-sub";
-      headBits.forEach(([label, value], i) => {
-        if (i) {
-          const sep = document.createElement("span");
-          sep.className = "sib-picker-sub-sep";
-          sep.textContent = "·";
-          sub.appendChild(sep);
-        }
-        const labelEl = document.createElement("span");
-        labelEl.textContent = label + " ";
-        const valueEl = document.createElement("span");
-        valueEl.className = "sib-picker-sub-value";
-        valueEl.textContent = value;
-        sub.appendChild(labelEl);
-        sub.appendChild(valueEl);
-      });
-      head.appendChild(sub);
-    }
-    container.appendChild(head);
-
     // Top action bar: "Add Model" hugs the left edge, the benchmark chip the
     // right (both pinned by the `order` rules on .sib-model-bench). The bar
     // only exists when at least one of the two actions is wired up.
@@ -693,8 +652,6 @@ const ModelPicker = (() => {
       const left = document.createElement("span");
       left.className = "sib-model-name";
 
-      const nameLine = document.createElement("span");
-      nameLine.className = "sib-model-name-main";
       // When a non-default quick-switch model is active, show only that
       // model's name (avoid the long "main → quick-switch" truncated string).
       const hasActiveOverride =
@@ -702,40 +659,49 @@ const ModelPicker = (() => {
         subInfo && subInfo.current &&
         subInfo.current !== subInfo.cardModel;
       const displayName = hasActiveOverride ? subInfo.current : m.model;
-      nameLine.appendChild(vendorBadge(displayName));
-      const nameText = document.createElement("span");
-      nameText.className = "sib-model-name-text";
-      nameText.textContent = displayName;
-      nameLine.appendChild(nameText);
-      left.appendChild(nameLine);
-
-      // Vision status for the active model only.
-      if (m.id === currentId && mediaCaps && mediaCaps.vision) {
-        const ok = !!mediaCaps.vision.configured;
-        const vis = document.createElement("span");
-        vis.className = "sib-model-vision " + (ok ? "is-ok" : "is-missing");
-        vis.textContent = ok ? I18n.t("sib.vision.ok") : I18n.t("sib.vision.missing");
-        vis.title = ok ? I18n.t("sib.vision.okTip") : I18n.t("sib.vision.missingTip");
-        nameLine.appendChild(vis);
-      }
 
-      // 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();
       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) {
+      // so a row never leads with an empty first line.
+      const providerName = provider || host;
+
+      // The list spans every service, so each row leads with the provider the
+      // model runs through and keeps the model itself as the detail line.
+      // Endpoints no preset claims have no provider to show, so those rows keep
+      // the model on the lead line.
+      const headLine = document.createElement("span");
+      headLine.className = "sib-model-name-main";
+      const headText = document.createElement("span");
+      headText.className = "sib-model-name-text";
+      headText.textContent = providerName || displayName;
+      headLine.appendChild(headText);
+      if (!providerName) headLine.insertBefore(vendorBadge(displayName), headText);
+      left.appendChild(headLine);
+
+      // Detail line: the model badge and name, followed by the user's own
+      // remark. The endpoint host and the masked key are technical details:
+      // they stay out of the line and live in the tooltip instead.
+      if (providerName || remark) {
         left.classList.add("has-sub");
         const subLine = document.createElement("span");
         subLine.className = "sib-model-name-sub";
-        subLine.textContent = identityBits.join(" · ");
+        if (providerName) {
+          subLine.appendChild(vendorBadge(displayName));
+          const subText = document.createElement("span");
+          subText.className = "sib-model-name-text";
+          subText.textContent = displayName;
+          subLine.appendChild(subText);
+        }
+        if (remark) {
+          const remarkEl = document.createElement("span");
+          remarkEl.className = "sib-model-name-remark";
+          remarkEl.textContent = remark;
+          subLine.appendChild(remarkEl);
+        }
         left.appendChild(subLine);
       }
       const tipBits = [provider, host, remark, m.api_key_masked].filter(Boolean);
@@ -748,9 +714,20 @@ const ModelPicker = (() => {
       const right = document.createElement("span");
       right.className = "sib-model-right";
 
-      if (/^auto$/i.test(m.model || "") && !hasActiveOverride) {
-        // Pinned to a concrete sub-model → no tag and no routing tooltip.
-        _decorateAutoRow(opt, m.model, right);
+      // Shortcut to the provider's own console, where the balance is topped up
+      // and the key is managed. Hover-only (see .sib-topup-btn) so it does not
+      // compete with the model name, and an anchor rather than a button so
+      // open-in-new-tab keeps working; the row's own click is suppressed.
+      if (m.website_url) {
+        const topUp = document.createElement("a");
+        topUp.className = "sib-topup-btn";
+        topUp.href = m.website_url;
+        topUp.target = "_blank";
+        topUp.rel = "noopener";
+        topUp.textContent = I18n.t("sib.topup");
+        topUp.title = I18n.t("sib.topup.tip", { provider: providerName || displayName });
+        topUp.addEventListener("click", (ev) => ev.stopPropagation());
+        right.appendChild(topUp);
       }
 
       if (m.id === currentId) {
@@ -779,12 +756,17 @@ const ModelPicker = (() => {
         right.appendChild(lat);
       }
 
-      const hasSubModels =
-        m.id === currentId &&
-        subInfo && subInfo.options &&
-        subInfo.options.length > 1;
-
-      if (hasSubModels && onSwitchSubModel) {
+      // Every row offers its own switcher: the list comes from the row's
+      // provider. The session's current row keeps the live list (it may
+      // already be pinned to a variant), the others use the list the server
+      // sends with the model.
+      const isCurrentRow = m.id === currentId;
+      const rowSubModels =
+        isCurrentRow && subInfo && subInfo.options && subInfo.options.length
+          ? subInfo.options
+          : (m.sub_models || []);
+
+      if (rowSubModels.length > 1 && onSwitchSubModel) {
         const toggleBtn = document.createElement("button");
         toggleBtn.type = "button";
         toggleBtn.className = "sib-submodel-toggle";
@@ -796,9 +778,22 @@ const ModelPicker = (() => {
           '</svg>';
         right.appendChild(toggleBtn);
 
+        const rowSubInfo = {
+          options: rowSubModels,
+          current: isCurrentRow && subInfo ? subInfo.current : null,
+          cardModel: m.model
+        };
+        // Picking a variant on a row other than the session's current one has
+        // to run the session on that model first — a sub-model is pinned under
+        // the card, so the host owns that order.
+        const switchVariant = (name, displayName) => {
+          if (isCurrentRow || !onSwitchRowSubModel) return onSwitchSubModel(name, displayName);
+          onSwitchRowSubModel(m, name, displayName);
+        };
+
         toggleBtn.addEventListener("click", (ev) => {
           ev.stopPropagation();
-          _toggleSubmodelPanel(container, opt, toggleBtn, subInfo, onSwitchSubModel);
+          _toggleSubmodelPanel(container, opt, toggleBtn, rowSubInfo, switchVariant);
         });
       }
 

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

@@ -414,8 +414,18 @@ const Onboard = (() => {
     el.className   = "setup-test-result" + (msg ? " result-fail" : "");
   }
 
+  // Platform returns raw RFC 8628 codes (access_denied / expired_token); never
+  // surface those to users — map the status to a translated sentence instead.
+  function _deviceErrorText(status) {
+    switch (status) {
+      case "denied":   return I18n.t("onboard.device.error.denied");
+      case "expired":
+      case "consumed": return I18n.t("onboard.device.error.expired");
+      default:         return I18n.t("onboard.device.error.failed");
+    }
+  }
+
   async function _startDeviceLogin() {
-    const zh = _selectedLang === "zh";
     _setDeviceError("");
 
     const w = window.open("about:blank", "_blank");
@@ -430,13 +440,11 @@ const Onboard = (() => {
 
     if (!data || !data.ok) {
       if (w && !w.closed) w.close();
-      _setDeviceError((data && data.error) || (zh ? "无法发起登录，请稍后重试。" : "Could not start login. Please try again."));
+      _setDeviceError(I18n.t("onboard.device.error.startFailed"));
       return;
     }
 
     const url = data.verification_uri_complete || data.verification_uri;
-    const codeEl = $("setup-device-usercode");
-    if (codeEl) codeEl.textContent = data.user_code || "—";
     const link = $("setup-device-link");
     if (link && url) link.href = url;
 
@@ -452,8 +460,6 @@ const Onboard = (() => {
   }
 
   async function _pollDevice(deviceCode, intervalMs) {
-    const zh = _selectedLang === "zh";
-
     while (_devicePolling) {
       await new Promise(r => setTimeout(r, intervalMs));
       if (!_devicePolling) return;
@@ -480,10 +486,7 @@ const Onboard = (() => {
       // denied / expired / consumed / error
       _devicePolling = false;
       _showDevicePending(false);
-      const msg = data.status === "denied"
-        ? (zh ? "授权已被拒绝。" : "Authorization was denied.")
-        : (zh ? "授权已过期，请重新登录。" : "Authorization expired. Please try again.");
-      _setDeviceError(data.error || msg);
+      _setDeviceError(_deviceErrorText(data.status));
       return;
     }
   }