openclacky 1.2.5 → 1.2.7

data/lib/clacky/web/i18n.js

@@ -81,6 +81,14 @@ const I18n = (() => {
       "sessions.actions.downloadHint": "for debugging",
       "sib.dir.tooltip":         "Click to change directory",
       "sib.dir.changePrompt":    "Change working directory:",
+      "workspace.title":         "Workspace",
+      "workspace.expand":        "Open workspace",
+      "workspace.collapse":      "Collapse workspace",
+      "workspace.refresh":       "Refresh",
+      "workspace.empty":         "This folder is empty",
+      "workspace.loading":       "Loading…",
+      "workspace.error":         "Failed to load files",
+      "workspace.downloadFailed": "Download failed",
       "sib.model.tooltip":       "Click to switch model",
       "sib.model.tooltip.busy":  "Model switching is disabled while the agent is responding",
       "sib.signal.tooltip":      "Recent LLM latency",
@@ -507,6 +515,7 @@ const I18n = (() => {
       "settings.models.btn.saved":         "Saved ✓",
       "settings.models.btn.testing":       "Testing…",
       "settings.models.btn.test":          "Test",
+      "settings.models.link.topUp":        "Top up / Manage account",
       "settings.models.btn.edit":          "Edit",
       "settings.models.btn.delete":        "Delete",
       "settings.models.btn.cancel":        "Cancel",
@@ -664,12 +673,26 @@ const I18n = (() => {
       "billing.byModel":         "By Model",
       "billing.model":           "Model",
       "billing.cost":            "Cost",
-      "billing.dailyUsage":      "Daily Usage",
+      "billing.dailyUsage":      "Usage Details",
       "billing.period.day":      "Today",
       "billing.period.week":     "This Week",
       "billing.period.month":    "This Month",
       "billing.period.year":     "This Year",
       "billing.period.all":      "All Time",
+      "billing.clearData":       "Clear Data",
+      "billing.clearToday":      "Clear Today",
+      "billing.clearAll":        "Clear All",
+      "billing.allModels":       "All Models",
+      "billing.cacheHit":        "Cache Hit",
+      "billing.inputCacheHit":   "Input (Cache Hit)",
+      "billing.inputCacheMiss":  "Input (Cache Miss)",
+      "billing.output":          "Output",
+      "billing.tokenUsage":      "Token Usage",
+      "billing.costTrend":       "Cost Trend",
+      "billing.noData":          "No data available",
+
+      "error.insufficient_credit": "Insufficient LLM credit. Please top up your account to continue.",
+      "error.insufficient_credit.action": "Top up",
     },
 
     zh: {
@@ -739,6 +762,14 @@ const I18n = (() => {
       "sessions.actions.downloadHint": "用于调试",
       "sib.dir.tooltip":         "点击切换工作目录",
       "sib.dir.changePrompt":    "切换工作目录：",
+      "workspace.title":         "工作区",
+      "workspace.expand":        "打开工作区",
+      "workspace.collapse":      "收起工作区",
+      "workspace.refresh":       "刷新",
+      "workspace.empty":         "此文件夹为空",
+      "workspace.loading":       "加载中…",
+      "workspace.error":         "加载文件失败",
+      "workspace.downloadFailed": "下载失败",
       "sib.model.tooltip":       "点击切换模型",
       "sib.model.tooltip.busy":  "Agent 回复中，暂时无法切换模型",
       "sib.signal.tooltip":      "最近一次 LLM 响应延迟",
@@ -1164,6 +1195,7 @@ const I18n = (() => {
       "settings.models.btn.saved":         "已保存 ✓",
       "settings.models.btn.testing":       "测试中…",
       "settings.models.btn.test":          "测试",
+      "settings.models.link.topUp":        "充值 / 账户管理",
       "settings.models.btn.edit":          "编辑",
       "settings.models.btn.delete":        "删除",
       "settings.models.btn.cancel":        "取消",
@@ -1321,12 +1353,26 @@ const I18n = (() => {
       "billing.byModel":         "按模型",
       "billing.model":           "模型",
       "billing.cost":            "费用",
-      "billing.dailyUsage":      "每日用量",
+      "billing.dailyUsage":      "使用详情",
       "billing.period.day":      "今日",
       "billing.period.week":     "本周",
       "billing.period.month":    "本月",
       "billing.period.year":     "今年",
       "billing.period.all":      "全部",
+      "billing.clearData":       "清除数据",
+      "billing.clearToday":      "清除今日",
+      "billing.clearAll":        "全部清除",
+      "billing.allModels":       "所有模型",
+      "billing.cacheHit":        "缓存命中",
+      "billing.inputCacheHit":   "输入（命中缓存）",
+      "billing.inputCacheMiss":  "输入（未命中缓存）",
+      "billing.output":          "输出",
+      "billing.tokenUsage":      "Token 用量",
+      "billing.costTrend":       "费用趋势",
+      "billing.noData":          "暂无数据",
+
+      "error.insufficient_credit": "LLM（大模型）余额不足，请充值后继续使用。",
+      "error.insufficient_credit.action": "去充值",
     }
   };
 

data/lib/clacky/web/index.html

@@ -313,6 +313,8 @@
     <!-- Chat panel -->
     <div id="chat-panel" style="display:none">
 
+      <!-- Chat column (messages + info bar + input) -->
+      <div id="chat-main">
       <div id="messages"></div>
       <!-- New message notification banner -->
       <div id="new-message-banner" class="new-message-banner" style="display:none">
@@ -334,6 +336,7 @@
         <span id="sib-model-wrap">
           <span id="sib-model" class="sib-model-clickable" title="Click to switch model"></span>
           <div id="sib-model-dropdown" class="sib-model-dropdown" style="display:none"></div>
+          <div id="sib-submodel-panel" class="sib-submodel-panel" style="display:none"></div>
         </span>
         <span class="sib-sep sib-sep-after-model">│</span>
         <span id="sib-reasoning-wrap">
@@ -381,7 +384,7 @@
         <div id="image-preview-strip" style="display:none"></div>
         <div id="input-bar">
           <!-- Hidden file picker -->
-          <input type="file" id="image-file-input" accept="image/png,image/jpeg,image/gif,image/webp,application/pdf,application/zip,application/x-zip-compressed,application/gzip,application/x-gzip,application/x-tar,application/x-compressed-tar,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/msword,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.presentationml.presentation,application/vnd.ms-powerpoint,text/csv,application/csv,text/markdown,text/plain,.csv,.md,.markdown,.txt,.log,.tar,.gz,.tgz,.tar.gz" multiple style="display:none">
+          <input type="file" id="image-file-input" accept="image/png,image/jpeg,image/gif,image/webp,*/*" multiple style="display:none">
           <button id="btn-attach" title="Attach file (image, pdf, docx, md, tar.gz…) — drag & drop / Ctrl+V also work">
             <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
               <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66L9.41 17.41a2 2 0 0 1-2.83-2.83l8.49-8.48"/>
@@ -397,6 +400,35 @@
           <button id="btn-interrupt" style="display:none" title="Stop"></button>
         </div>
       </div>
+      </div><!-- /#chat-main -->
+
+      <!-- ── WORKSPACE PANEL (right) ──────────────────────────────────── -->
+      <aside id="workspace-panel" class="collapsed">
+        <div id="workspace-header">
+          <span id="workspace-title" data-i18n="workspace.title">Workspace</span>
+          <div class="workspace-header-actions">
+            <button id="btn-workspace-refresh" class="workspace-icon-btn" data-i18n-title="workspace.refresh" title="Refresh">
+              <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M23 4v6h-6"/><path d="M1 20v-6h6"/>
+                <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>
+              </svg>
+            </button>
+            <button id="btn-workspace-close" class="workspace-icon-btn" data-i18n-title="workspace.collapse" title="Collapse">
+              <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M9 18l6-6-6-6"/>
+              </svg>
+            </button>
+          </div>
+        </div>
+        <div id="workspace-tree" role="tree"></div>
+      </aside>
+
+      <!-- Collapsed-state opener tab -->
+      <button id="btn-workspace-open" data-i18n-title="workspace.expand" title="Open workspace" style="display:none">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
+        </svg>
+      </button>
     </div>
 
     <!-- ── CREATOR PANEL ─────────────────────────────────────────────── -->
@@ -1250,6 +1282,7 @@
 <script src="/ws.js"></script>
 <script src="/ws-dispatcher.js"></script>
 <script src="/sessions.js"></script>
+<script src="/workspace.js"></script>
 <script src="/datepicker.js"></script>
 <script src="/tasks.js"></script>
 <script src="/skills.js"></script>

data/lib/clacky/web/sessions.js

@@ -492,57 +492,12 @@ const Sessions = (() => {
   const MAX_IMAGE_LONG_EDGE   = 1920;               // px — scale down if larger
   const MAX_FILE_BYTES = 32 * 1024 * 1024;  // 32 MB
   const ACCEPTED_IMAGE_TYPES = ["image/png", "image/jpeg", "image/gif", "image/webp"];
-  const ACCEPTED_DOC_TYPES   = [
-    "application/pdf",
-    "application/zip",
-    "application/x-zip-compressed",
-    "application/gzip",
-    "application/x-gzip",
-    "application/x-tar",
-    "application/x-compressed-tar",
-    "application/vnd.openxmlformats-officedocument.wordprocessingml.document", // .docx
-    "application/msword",                                                        // .doc
-    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",        // .xlsx
-    "application/vnd.ms-excel",                                                  // .xls
-    "application/vnd.openxmlformats-officedocument.presentationml.presentation", // .pptx
-    "application/vnd.ms-powerpoint",                                             // .ppt
-    "text/csv",                                                                  // .csv
-    "application/csv",                                                           // .csv (some browsers)
-    "text/markdown",                                                             // .md
-    "text/x-markdown",                                                           // .md (some browsers)
-    "text/plain",                                                                // .md / .txt (many browsers report this)
-  ];
-
-  // Extension-based fallback for files whose MIME type is missing or unreliable.
-  // Browsers frequently report "" or "application/octet-stream" for .md / .tar.gz.
-  const ACCEPTED_DOC_EXTENSIONS = [
-    ".pdf", ".zip",
-    ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx",
-    ".csv",
-    ".md", ".markdown", ".txt", ".log",
-    ".tar", ".gz", ".tgz", ".tar.gz", ".rar", ".7z"
-  ];
-
-  function _hasAcceptedDocExt(filename) {
-    const lower = (filename || "").toLowerCase();
-    return ACCEPTED_DOC_EXTENSIONS.some(ext => lower.endsWith(ext));
-  }
-
-  function _isAcceptedDoc(file) {
-    if (!file) return false;
-    if (file.type && ACCEPTED_DOC_TYPES.includes(file.type)) return true;
-    return _hasAcceptedDocExt(file.name);
-  }
 
   function _isAcceptedImage(file) {
     if (!file) return false;
     return ACCEPTED_IMAGE_TYPES.includes(file.type);
   }
 
-  function _isAcceptedFile(file) {
-    return _isAcceptedImage(file) || _isAcceptedDoc(file);
-  }
-
   function _docTypeIcon(mimeType, filename) {
     const lower = (filename || "").toLowerCase();
     if (mimeType === "application/pdf" || lower.endsWith(".pdf")) return "📄";
@@ -552,11 +507,11 @@ const Sessions = (() => {
         lower.endsWith(".tar") || lower.endsWith(".gz") || lower.endsWith(".tgz") || lower.endsWith(".tar.gz") ||
         lower.endsWith(".rar") || lower.endsWith(".7z")) return "🗜️";
     if ((mimeType && mimeType.includes("wordprocessingml")) || mimeType === "application/msword" ||
-        lower.endsWith(".doc") || lower.endsWith(".docx")) return "📝";
+        lower.endsWith(".doc") || lower.endsWith(".docx") || lower.endsWith(".wps")) return "📝";
     if ((mimeType && mimeType.includes("spreadsheetml")) || mimeType === "application/vnd.ms-excel" ||
-        lower.endsWith(".xls") || lower.endsWith(".xlsx")) return "📊";
+        lower.endsWith(".xls") || lower.endsWith(".xlsx") || lower.endsWith(".et")) return "📊";
     if ((mimeType && mimeType.includes("presentationml")) || mimeType === "application/vnd.ms-powerpoint" ||
-        lower.endsWith(".ppt") || lower.endsWith(".pptx")) return "📋";
+        lower.endsWith(".ppt") || lower.endsWith(".pptx") || lower.endsWith(".dps")) return "📋";
     if (mimeType === "text/csv" || mimeType === "application/csv" || lower.endsWith(".csv")) return "📊";
     if (mimeType === "text/markdown" || mimeType === "text/x-markdown" ||
         lower.endsWith(".md") || lower.endsWith(".markdown")) return "📝";
@@ -649,16 +604,10 @@ const Sessions = (() => {
   }
 
   function _addAttachmentFile(file) {
-    // Route by content category. Images must match known image MIME types
-    // (MIME is reliable for images). Documents fall back to extension-based
-    // detection because browsers frequently report "" or "application/octet-stream"
-    // for .md / .tar.gz files.
     if (_isAcceptedImage(file)) {
       _addImageFile(file);
-    } else if (_isAcceptedDoc(file)) {
-      _addGenericFile(file);
     } else {
-      alert(`Unsupported file: ${file.name}\nSupported: images (PNG/JPG/GIF/WEBP), PDF, Office (DOC/XLS/PPT), ZIP, TAR, TAR.GZ, MD, TXT, CSV`);
+      _addGenericFile(file);
     }
   }
 
@@ -848,27 +797,20 @@ const Sessions = (() => {
     inputArea.addEventListener("drop", (e) => {
       e.preventDefault();
       inputArea.classList.remove("drag-over");
-      const files = Array.from(e.dataTransfer.files).filter(_isAcceptedFile);
+      const files = Array.from(e.dataTransfer.files);
       if (files.length === 0) return;
       files.forEach(_addAttachmentFile);
     });
 
-    // Paste handler — images and accepted docs from the clipboard.
     document.getElementById("user-input").addEventListener("paste", (e) => {
       const items = Array.from(e.clipboardData?.items || []);
-      // Any file-kind item that's an image, or a document whose type/name
-      // passes our doc filter. Must check name via getAsFile() for .md/.tar.gz
-      // (browsers often leave item.type empty for these).
-      const attachItems = items.filter(it => {
-        if (it.kind !== "file") return false;
-        if (ACCEPTED_IMAGE_TYPES.includes(it.type)) return true;
-        if (ACCEPTED_DOC_TYPES.includes(it.type))   return true;
-        const f = it.getAsFile && it.getAsFile();
-        return f ? _hasAcceptedDocExt(f.name) : false;
-      });
+      const attachItems = items.filter(it => it.kind === "file");
       if (attachItems.length === 0) return;
       e.preventDefault();
-      attachItems.forEach(it => _addAttachmentFile(it.getAsFile()));
+      attachItems.forEach(it => {
+        const f = it.getAsFile && it.getAsFile();
+        if (f) _addAttachmentFile(f);
+      });
     });
   }
 
@@ -1454,8 +1396,15 @@ const Sessions = (() => {
               // showProgress() with the authoritative started_at, which is the
               // single source of truth for first-visit sessions (no cached state).
             } else if (session.status === "error" && session.error) {
-              // Show the stored error message at the end of history
-              Sessions.appendMsg("error", session.error);
+              if (window.renderErrorEvent) {
+                window.renderErrorEvent({
+                  code: session.error_code,
+                  message: session.error,
+                  top_up_url: session.top_up_url,
+                });
+              } else {
+                Sessions.appendMsg("error", session.error);
+              }
             }
           }
         }
@@ -2393,6 +2342,7 @@ const Sessions = (() => {
     /** Update the session info bar below the chat header with current session metadata. */
     updateInfoBar(s) {
       this._lastSession = s;
+      if (window.Workspace) Workspace.onSession(s);
       if (!s) {
         // Hide all spans when no session
         ["sib-id", "sib-status", "sib-dir", "sib-mode", "sib-model", "sib-reasoning", "sib-tasks", "sib-cost"].forEach(id => {
@@ -2451,15 +2401,21 @@ const Sessions = (() => {
       const sibModelWrap = $("sib-model-wrap");
       const sibModel = $("sib-model");
       if (sibModel) {
-        sibModel.textContent = s.model || "";
-        // Store current session ID on the model element for later use
+        const subModel = s.sub_model;
+        const cardModel = s.card_model;
+        const display = subModel
+          ? `${subModel}`
+          : (s.model || "");
+        sibModel.textContent = display;
         sibModel.dataset.sessionId = s.id;
         if (s.model_id) {
           sibModel.dataset.modelId = s.model_id;
         } else {
           delete sibModel.dataset.modelId;
         }
-        // Disable model switching while the agent is responding
+        if (cardModel) sibModel.dataset.cardModel = cardModel; else delete sibModel.dataset.cardModel;
+        if (subModel) sibModel.dataset.subModel = subModel; else delete sibModel.dataset.subModel;
+        sibModel.dataset.subModelOptions = JSON.stringify(s.sub_model_options || []);
         const busy = s.status === "running";
         sibModel.classList.toggle("sib-model-disabled", busy);
         sibModel.title = busy
@@ -3401,8 +3357,16 @@ const Sessions = (() => {
       if (_isOpen) {
         dropdown.style.display = "none";
         _isOpen = false;
+        _closeSubmodelPanel();
       } else {
-        await _populateModelDropdown(modelEl.dataset.sessionId, modelEl.dataset.modelId || null);
+        let subOptions = [];
+        try { subOptions = JSON.parse(modelEl.dataset.subModelOptions || "[]"); } catch (_) {}
+        const subInfo = {
+          options: Array.isArray(subOptions) ? subOptions : [],
+          current: modelEl.dataset.subModel || null,
+          cardModel: modelEl.dataset.cardModel || null
+        };
+        await _populateModelDropdown(modelEl.dataset.sessionId, modelEl.dataset.modelId || null, subInfo);
         
         // Calculate position relative to the model element (fixed positioning)
         const rect = modelEl.getBoundingClientRect();
@@ -3417,15 +3381,17 @@ const Sessions = (() => {
     }
 
     // Close dropdown when clicking outside
-    if (_isOpen && !e.target.closest(".sib-model-dropdown")) {
+    if (_isOpen && !e.target.closest(".sib-model-dropdown") && !e.target.closest(".sib-submodel-panel")) {
       const dropdown = $("sib-model-dropdown");
       if (dropdown) dropdown.style.display = "none";
       _isOpen = false;
+      _closeSubmodelPanel();
     }
   });
 
   // Populate dropdown with available models
-  async function _populateModelDropdown(sessionId, currentModelId) {
+  async function _populateModelDropdown(sessionId, currentModelId, subInfo) {
+    subInfo = subInfo || { options: [], current: null, cardModel: null };
     const dropdown = $("sib-model-dropdown");
     if (!dropdown) return;
 
@@ -3489,6 +3455,13 @@ const Sessions = (() => {
         nameLine.textContent = m.model;
         left.appendChild(nameLine);
 
+        if (m.id === currentModelId && subInfo.current && subInfo.current !== subInfo.cardModel) {
+          const overrideLine = document.createElement("span");
+          overrideLine.className = "sib-model-name-override";
+          overrideLine.textContent = `→ ${subInfo.current}`;
+          left.appendChild(overrideLine);
+        }
+
         if (_nameCounts[m.model] > 1) {
           left.classList.add("has-sub");
           const host = (() => {
@@ -3516,17 +3489,36 @@ const Sessions = (() => {
           right.appendChild(badge);
         }
 
-        // Latency cell — populated from _benchCache on open, updated live
-        // when a benchmark run completes. Empty slot keeps row heights stable
-        // so the list doesn't visually jump mid-benchmark.
         const lat = document.createElement("span");
         lat.className = "sib-model-latency";
         _fillLatencyCell(lat, _benchCache[m.id]);
         right.appendChild(lat);
 
+        const hasSubModels =
+          m.id === currentModelId &&
+          subInfo.options &&
+          subInfo.options.length > 1;
+
+        if (hasSubModels) {
+          const toggleBtn = document.createElement("button");
+          toggleBtn.type = "button";
+          toggleBtn.className = "sib-submodel-toggle";
+          toggleBtn.title = "Switch sub-model";
+          toggleBtn.setAttribute("aria-expanded", "false");
+          toggleBtn.innerHTML =
+            '<svg viewBox="0 0 16 16" width="11" height="11" aria-hidden="true">' +
+            '<path d="M6 3.5L10.5 8 6 12.5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>' +
+            '</svg>';
+          right.appendChild(toggleBtn);
+
+          toggleBtn.addEventListener("click", (ev) => {
+            ev.stopPropagation();
+            _toggleSubmodelPanel(opt, toggleBtn, sessionId, subInfo);
+          });
+        }
+
         opt.appendChild(right);
 
-        // Switch by id (stable across reorders/edits). Keep model name for UI update.
         opt.addEventListener("click", () => _switchModel(sessionId, m.id, m.model));
         dropdown.appendChild(opt);
       });
@@ -3637,14 +3629,15 @@ const Sessions = (() => {
   }
 
   // Switch session model via API
-  // modelId — stable runtime id (required by backend)
-  // modelName — display name, used for optimistic UI update
+  // Switch the session's current card. modelId is the stable runtime id,
+  // modelName is for optimistic display.
   async function _switchModel(sessionId, modelId, modelName) {
     const dropdown = $("sib-model-dropdown");
     if (dropdown) {
       dropdown.style.display = "none";
       _isOpen = false;
     }
+    _closeSubmodelPanel();
 
     try {
       const res = await fetch(`/api/sessions/${sessionId}/model`, {
@@ -3669,6 +3662,144 @@ const Sessions = (() => {
       alert("Failed to switch model: " + e.message);
     }
   }
+
+  // Pin (or clear) the session's sub-model. Pass modelName=null to clear.
+  // displayName is what we optimistically show in the status bar.
+  async function _switchSubModel(sessionId, modelName, displayName) {
+    const dropdown = $("sib-model-dropdown");
+    if (dropdown) {
+      dropdown.style.display = "none";
+      _isOpen = false;
+    }
+    _closeSubmodelPanel();
+
+    try {
+      const res = await fetch(`/api/sessions/${sessionId}/submodel`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ model_name: modelName })
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "Unknown error");
+
+      const sibModel = $("sib-model");
+      if (sibModel) {
+        sibModel.textContent = displayName || "";
+        sibModel.dataset.subModel = modelName || "";
+      }
+    } catch (e) {
+      console.error("Failed to switch sub-model:", e);
+      alert("Failed to switch sub-model: " + e.message);
+    }
+  }
+
+  let _activeSubmodelAnchor = null;
+
+  function _closeSubmodelPanel() {
+    const panel = $("sib-submodel-panel");
+    if (panel) panel.style.display = "none";
+    if (_activeSubmodelAnchor) {
+      const btn = _activeSubmodelAnchor.querySelector(".sib-submodel-toggle");
+      if (btn) btn.setAttribute("aria-expanded", "false");
+      _activeSubmodelAnchor.classList.remove("submodel-open");
+      _activeSubmodelAnchor = null;
+    }
+  }
+
+  function _toggleSubmodelPanel(anchorRow, btn, sessionId, subInfo) {
+    const panel = $("sib-submodel-panel");
+    const dropdown = $("sib-model-dropdown");
+    if (!panel || !dropdown) return;
+
+    if (panel.parentElement !== document.body) {
+      document.body.appendChild(panel);
+    }
+
+    const isOpen = panel.style.display !== "none" && _activeSubmodelAnchor === anchorRow;
+    if (isOpen) {
+      _closeSubmodelPanel();
+      return;
+    }
+
+    _renderSubmodelPanel(panel, sessionId, subInfo);
+
+    // Reset any prior position so measurements are accurate.
+    panel.style.left = "0px";
+    panel.style.top = "0px";
+    panel.style.display = "block";
+    panel.style.visibility = "hidden";
+
+    const dropRect = dropdown.getBoundingClientRect();
+    const btnRect = btn.getBoundingClientRect();
+    const panelRect = panel.getBoundingClientRect();
+    const gap = 6;
+    const margin = 8;
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+
+    // Prefer right of dropdown; flip to left if we'd overflow viewport.
+    let left = dropRect.right + gap;
+    if (left + panelRect.width > vw - margin) {
+      left = dropRect.left - panelRect.width - gap;
+    }
+    // If still off-screen on the left, clamp inside viewport.
+    if (left < margin) left = margin;
+
+    // Vertically align to the chevron button, but clamp inside viewport.
+    let top = btnRect.top - 6;
+    if (top + panelRect.height > vh - margin) {
+      top = vh - margin - panelRect.height;
+    }
+    if (top < margin) top = margin;
+
+    panel.style.left = `${left}px`;
+    panel.style.top = `${top}px`;
+    panel.style.visibility = "";
+
+    _activeSubmodelAnchor = anchorRow;
+    anchorRow.classList.add("submodel-open");
+    btn.setAttribute("aria-expanded", "true");
+  }
+
+  function _renderSubmodelPanel(panel, sessionId, subInfo) {
+    panel.innerHTML = "";
+
+    const header = document.createElement("div");
+    header.className = "sib-submodel-panel-header";
+    header.textContent = "Sub-model";
+    panel.appendChild(header);
+
+    const cardDefault = subInfo.cardModel;
+    subInfo.options.forEach(name => {
+      const row = document.createElement("div");
+      row.className = "sib-submodel-row";
+      row.dataset.subModel = name;
+
+      const isActive = subInfo.current
+        ? name === subInfo.current
+        : name === cardDefault;
+      if (isActive) row.classList.add("current");
+
+      const nameEl = document.createElement("span");
+      nameEl.className = "sib-submodel-row-name";
+      nameEl.textContent = name;
+      row.appendChild(nameEl);
+
+      if (name === cardDefault) {
+        const tag = document.createElement("span");
+        tag.className = "sib-submodel-default-tag";
+        tag.textContent = "default";
+        row.appendChild(tag);
+      }
+
+      row.addEventListener("click", (ev) => {
+        ev.stopPropagation();
+        const passName = (name === cardDefault) ? null : name;
+        _switchSubModel(sessionId, passName, name);
+      });
+      panel.appendChild(row);
+    });
+  }
 })();
 
 // ── Session Info Bar Working Directory Switcher ───────────────────────────