openclacky 1.2.6 → 1.2.7

data/lib/clacky/web/sessions.js

@@ -1396,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);
+              }
             }
           }
         }
@@ -2335,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 => {
@@ -2393,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
@@ -3343,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();
@@ -3359,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;
 
@@ -3431,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 = (() => {
@@ -3458,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);
       });
@@ -3579,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`, {
@@ -3611,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 ───────────────────────────

data/lib/clacky/web/settings.js

@@ -6,6 +6,11 @@ const Settings = (() => {
   let _models = [];
   // Provider presets loaded from server
   let _providers = [];
+  // Provider id selected in the model edit modal (null when "Custom" or unset).
+  // Used to opt the request into anthropic_format=true when the user picks
+  // the Anthropic provider; other providers leave the flag unset and let the
+  // backend's runtime inference decide.
+  let _modalSelectedProviderId = null;
 
   // ── Public API ──────────────────────────────────────────────────────────────
 
@@ -52,9 +57,14 @@ const Settings = (() => {
   }
 
   function _getProviderName(model) {
-    if (!model.base_url) return I18n.t("settings.models.provider.custom");
-    const url = model.base_url.trim().replace(/\/+$/, "");
-    const provider = _providers.find(p => {
+    const p = _findProviderByBaseUrl(model.base_url);
+    return p ? p.name : I18n.t("settings.models.provider.custom");
+  }
+
+  function _findProviderByBaseUrl(baseUrl) {
+    if (!baseUrl) return null;
+    const url = String(baseUrl).trim().replace(/\/+$/, "");
+    return _providers.find(p => {
       const candidates = [p.base_url].concat(
         Array.isArray(p.endpoint_variants) ? p.endpoint_variants.map(v => v.base_url) : []
       ).filter(Boolean);
@@ -62,14 +72,15 @@ const Settings = (() => {
         const norm = String(c).replace(/\/+$/, "");
         return url === norm || url.startsWith(norm + "/");
       });
-    });
-    return provider ? provider.name : I18n.t("settings.models.provider.custom");
+    }) || null;
   }
 
   function _renderCard(container, model, index) {
     const isDefault = model.type === "default";
     const isLite    = model.type === "lite";
-    const providerName = _getProviderName(model);
+    const provider  = _findProviderByBaseUrl(model.base_url);
+    const providerName = provider ? provider.name : I18n.t("settings.models.provider.custom");
+    const websiteUrl   = provider && provider.website_url;
     const displayName = model.model || I18n.t("settings.models.unnamed");
 
     const card = document.createElement("div");
@@ -84,7 +95,7 @@ const Settings = (() => {
           ${isLite ? `<span class="badge badge-lite">${I18n.t("settings.models.badge.lite")}</span>` : ""}
         </div>
         <div class="model-card-grid-provider">${_esc(providerName)}</div>
-        ${model.model ? `<div class="model-card-grid-model">${_esc(model.model)}</div>` : ""}
+        ${model.api_key_masked ? `<div class="model-card-grid-model">${_esc(model.api_key_masked)}</div>` : ""}
         <div class="model-card-grid-status">
           <span class="model-test-result" data-index="${index}"></span>
         </div>
@@ -107,6 +118,12 @@ const Settings = (() => {
           <span>${I18n.t("settings.models.btn.delete")}</span>
         </button>` : ""}
       </div>
+      ${websiteUrl ? `<div class="model-card-grid-footer">
+        <a class="model-card-grid-link" href="${_esc(websiteUrl)}" target="_blank" rel="noopener noreferrer">
+          ${I18n.t("settings.models.link.topUp")}
+          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17L17 7"/><path d="M8 7h9v9"/></svg>
+        </a>
+      </div>` : ""}
     `;
 
     container.appendChild(card);
@@ -150,7 +167,11 @@ const Settings = (() => {
       document.getElementById("model-modal-default-field").style.display = "none";
 
       // Set provider dropdown value
-      const providerName = _getProviderName(model);
+      const matched = _findProviderByBaseUrl(model.base_url);
+      // Preserve an explicit anthropic_format=true even if base_url is custom:
+      // the user may have configured a self-hosted Anthropic-compatible proxy.
+      _modalSelectedProviderId = matched ? matched.id : (model.anthropic_format ? "anthropic" : null);
+      const providerName = matched ? matched.name : I18n.t("settings.models.provider.custom");
       const providerValue = document.getElementById("model-modal-provider-value");
       providerValue.textContent = providerName;
       providerValue.classList.remove("placeholder");
@@ -164,6 +185,7 @@ const Settings = (() => {
       document.getElementById("model-modal-set-default").checked = true;
 
       // Reset provider dropdown
+      _modalSelectedProviderId = null;
       const providerValue = document.getElementById("model-modal-provider-value");
       providerValue.textContent = I18n.t("settings.models.placeholder.provider");
       providerValue.classList.add("placeholder");
@@ -208,6 +230,10 @@ const Settings = (() => {
         const value = option.dataset.value;
         const text = option.dataset.label || option.textContent.trim();
 
+        // Track the picked provider so test/save can flag anthropic_format=true
+        // when the user explicitly picks Anthropic. Empty / "custom" → null.
+        _modalSelectedProviderId = (value && value !== "custom") ? value : null;
+
         const providerValue = document.getElementById("model-modal-provider-value");
         providerValue.textContent = text;
         providerValue.classList.toggle("placeholder", !value);
@@ -256,15 +282,18 @@ const Settings = (() => {
     _showTestResult(index, null, "");
 
     try {
+      const body = {
+        model: model.model,
+        base_url: model.base_url,
+        api_key: model.api_key_masked,
+        index
+      };
+      if (model.anthropic_format) body.anthropic_format = true;
+
       const testRes = await fetch("/api/config/test", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          model: model.model,
-          base_url: model.base_url,
-          api_key: model.api_key_masked,
-          index
-        })
+        body: JSON.stringify(body)
       });
       const testData = await testRes.json();
       _showTestResult(index, testData.ok, testData.message);
@@ -285,15 +314,25 @@ const Settings = (() => {
 
     saveBtn.disabled = true;
 
+    // Anthropic protocol is opted in only when the user picks the Anthropic
+    // provider in the modal. Other providers leave the flag absent so the
+    // backend's runtime inference (provider preset + model api overrides)
+    // decides — preserving e.g. OpenRouter's per-model anthropic-messages
+    // routing for Claude sub-models.
+    const anthropic_format = _modalSelectedProviderId === "anthropic";
+
     // Step 1: Test first
     saveBtn.textContent = I18n.t("settings.models.btn.testing");
     _showModalTestResult(null, "");
 
     try {
+      const testBody = { model, base_url, api_key, index };
+      if (anthropic_format) testBody.anthropic_format = true;
+
       const testRes = await fetch("/api/config/test", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ model, base_url, api_key, index })
+        body: JSON.stringify(testBody)
       });
       const testData = await testRes.json();
       _showModalTestResult(testData.ok, testData.message);
@@ -317,7 +356,7 @@ const Settings = (() => {
     const existing = isNew ? {} : (_models[index] || {});
     const hasId = !!existing.id;
 
-    const payload = { model, base_url, anthropic_format: false };
+    const payload = { model, base_url, anthropic_format };
     if (isNew) {
       if (document.getElementById("model-modal-set-default").checked) {
         payload.type = "default";
@@ -886,7 +925,10 @@ const Settings = (() => {
       model:            card.querySelector(`[data-key="model"]`).value.trim(),
       base_url:         card.querySelector(`[data-key="base_url"]`).value.trim(),
       api_key:          card.querySelector(`[data-key="api_key"]`).value.trim(),
-      anthropic_format: false,
+      // The inline card form has no provider picker — preserve whatever the
+      // model was saved with. The modal flow is the only place where the
+      // user can flip this flag.
+      anthropic_format: !!_models[index]?.anthropic_format,
       type:             _models[index]?.type ?? null
     };
   }

data/lib/clacky/web/workspace.js

@@ -0,0 +1,204 @@
+// Workspace panel — lazy file tree for the active session's working directory.
+// Lists one directory level at a time via GET /api/sessions/:id/files,
+// expands/collapses folders in place, and downloads files on click via
+// POST /api/file-action.
+"use strict";
+
+const Workspace = (() => {
+  const STORAGE_KEY = "clacky.workspace.open";
+
+  let _sessionId   = null;
+  let _workingDir  = null;
+  let _open        = false;
+
+  const $ = (id) => document.getElementById(id);
+  const t = (key) => (typeof I18n !== "undefined" ? I18n.t(key) : key);
+
+  const ICON_FOLDER = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" 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>';
+  const ICON_FILE   = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>';
+  const ICON_CARET  = '<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>';
+
+  function formatSize(bytes) {
+    if (bytes == null) return "";
+    if (bytes < 1024) return `${bytes} B`;
+    const units = ["KB", "MB", "GB", "TB"];
+    let n = bytes / 1024, i = 0;
+    while (n >= 1024 && i < units.length - 1) { n /= 1024; i++; }
+    return `${n < 10 ? n.toFixed(1) : Math.round(n)} ${units[i]}`;
+  }
+
+  async function fetchEntries(relPath) {
+    const url = `/api/sessions/${encodeURIComponent(_sessionId)}/files?path=${encodeURIComponent(relPath || "")}`;
+    const resp = await fetch(url);
+    if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
+    const data = await resp.json();
+    return data.entries || [];
+  }
+
+  function renderEntries(entries) {
+    const frag = document.createDocumentFragment();
+    if (!entries.length) {
+      const empty = document.createElement("div");
+      empty.className = "wt-empty";
+      empty.textContent = t("workspace.empty");
+      frag.appendChild(empty);
+      return frag;
+    }
+    for (const entry of entries) {
+      frag.appendChild(buildNode(entry));
+    }
+    return frag;
+  }
+
+  function buildNode(entry) {
+    const node = document.createElement("div");
+    node.className = "wt-node";
+
+    const row = document.createElement("div");
+    row.className = "wt-row";
+    row.title = entry.name;
+
+    const caret = document.createElement("span");
+    caret.className = "wt-caret" + (entry.type === "dir" ? "" : " leaf");
+    if (entry.type === "dir") caret.innerHTML = ICON_CARET;
+
+    const icon = document.createElement("span");
+    icon.className = "wt-icon";
+    icon.innerHTML = entry.type === "dir" ? ICON_FOLDER : ICON_FILE;
+
+    const name = document.createElement("span");
+    name.className = "wt-name";
+    name.textContent = entry.name;
+
+    row.appendChild(caret);
+    row.appendChild(icon);
+    row.appendChild(name);
+
+    if (entry.type === "file") {
+      const size = document.createElement("span");
+      size.className = "wt-size";
+      size.textContent = formatSize(entry.size);
+      row.appendChild(size);
+    }
+
+    node.appendChild(row);
+
+    if (entry.type === "dir") {
+      const children = document.createElement("div");
+      children.className = "wt-children";
+      children.style.display = "none";
+      node.appendChild(children);
+      row.addEventListener("click", () => toggleDir(entry, caret, children));
+    } else {
+      row.addEventListener("click", () => downloadFile(entry));
+    }
+
+    return node;
+  }
+
+  async function toggleDir(entry, caret, children) {
+    const isOpen = caret.classList.contains("open");
+    if (isOpen) {
+      caret.classList.remove("open");
+      children.style.display = "none";
+      return;
+    }
+    caret.classList.add("open");
+    children.style.display = "";
+    if (children.dataset.loaded === "1") return;
+
+    children.innerHTML = `<div class="wt-loading">${t("workspace.loading")}</div>`;
+    try {
+      const entries = await fetchEntries(entry.path);
+      children.innerHTML = "";
+      children.appendChild(renderEntries(entries));
+      children.dataset.loaded = "1";
+    } catch (err) {
+      console.error("workspace load failed:", err);
+      children.innerHTML = `<div class="wt-error">${t("workspace.error")}</div>`;
+    }
+  }
+
+  async function downloadFile(entry) {
+    const fullPath = _workingDir.replace(/\/+$/, "") + "/" + entry.path;
+    try {
+      const resp = await fetch("/api/file-action", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ path: fullPath, action: "download" })
+      });
+      if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
+      const blob = await resp.blob();
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = entry.name;
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      URL.revokeObjectURL(url);
+    } catch (err) {
+      console.error("download failed:", err);
+      if (typeof Modal !== "undefined") Modal.toast(t("workspace.downloadFailed"), "error");
+    }
+  }
+
+  async function loadRoot() {
+    const tree = $("workspace-tree");
+    if (!tree || !_sessionId) return;
+    tree.innerHTML = `<div class="wt-loading">${t("workspace.loading")}</div>`;
+    try {
+      const entries = await fetchEntries("");
+      tree.innerHTML = "";
+      tree.appendChild(renderEntries(entries));
+    } catch (err) {
+      console.error("workspace load failed:", err);
+      tree.innerHTML = `<div class="wt-error">${t("workspace.error")}</div>`;
+    }
+  }
+
+  function applyOpenState() {
+    const panel = $("workspace-panel");
+    const opener = $("btn-workspace-open");
+    if (!panel) return;
+    const hasSession = !!_sessionId;
+    panel.classList.toggle("collapsed", !(_open && hasSession));
+    if (opener) opener.style.display = (!_open && hasSession) ? "" : "none";
+  }
+
+  function setOpen(open) {
+    _open = open;
+    try { localStorage.setItem(STORAGE_KEY, open ? "1" : "0"); } catch (_) {}
+    applyOpenState();
+    if (open) loadRoot();
+  }
+
+  return {
+    init() {
+      try { _open = localStorage.getItem(STORAGE_KEY) === "1"; } catch (_) { _open = false; }
+
+      const close   = $("btn-workspace-close");
+      const opener   = $("btn-workspace-open");
+      const refresh  = $("btn-workspace-refresh");
+      if (close)   close.addEventListener("click", () => setOpen(false));
+      if (opener)  opener.addEventListener("click", () => setOpen(true));
+      if (refresh) refresh.addEventListener("click", () => loadRoot());
+
+      applyOpenState();
+    },
+
+    // Called from Sessions.updateInfoBar whenever the active session changes.
+    onSession(session) {
+      const newId  = session ? session.id : null;
+      const newDir = session ? session.working_dir : null;
+      const changed = newId !== _sessionId || newDir !== _workingDir;
+      _sessionId  = newId;
+      _workingDir = newDir;
+      applyOpenState();
+      if (changed && _open && _sessionId) loadRoot();
+    }
+  };
+})();
+
+document.addEventListener("DOMContentLoaded", () => Workspace.init());
+window.Workspace = Workspace;