openclacky 1.5.13 → 1.5.15

data/lib/clacky/web/features/workspace/view.js

@@ -16,7 +16,7 @@
 "use strict";
 
 const WorkspaceView = (() => {
-  const t = (key) => (typeof I18n !== "undefined" ? I18n.t(key) : key);
+  const t = (key, vars) => (typeof I18n !== "undefined" ? I18n.t(key, vars) : 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_FOLDER_OPEN = '<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="m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"/></svg>';
@@ -27,6 +27,11 @@ const WorkspaceView = (() => {
   const ICON_SAVE    = '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>';
   const ICON_EYE     = '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>';
   const ICON_CLOSE   = '<svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg>';
+  const ICON_CHEVRON_DOWN = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>';
+  const ICON_EXTERNAL = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>';
+  const ICON_PANEL_LEFT = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="9" y1="3" x2="9" y2="21"/></svg>';
+  const ICON_ARROW_LEFT = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5"/><path d="m12 19-7-7 7-7"/></svg>';
+  const ICON_COLUMNS = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="12" y1="3" x2="12" y2="21"/></svg>';
 
   function el(tag, cls) {
     const d = document.createElement(tag);
@@ -192,7 +197,7 @@ const WorkspaceView = (() => {
 
   // ── File tree ───────────────────────────────────────────────────────────
 
-  const treeState = { activePath: null, treeEl: null, indexPromise: null };
+  const treeState = { activePath: null, treeEl: null, indexPromise: null, loadPromise: null };
 
   function highlightActiveRow() {
     const tree = treeState.treeEl;
@@ -357,6 +362,94 @@ const WorkspaceView = (() => {
     if (existing) existing.remove();
   }
 
+  function showOpenWithMenu(anchorBtn, entry) {
+    closeOpenWithMenu();
+
+    const menu = el("div", "wt-context-menu session-context-menu wv-open-menu");
+    const appendAction = (iconSvg, label, onClick) => {
+      const item = el("div", "session-actions-menu-item");
+      const iconEl = el("span", "session-actions-menu-icon");
+      iconEl.innerHTML = iconSvg;
+      const labelEl = el("span", "session-actions-menu-label");
+      labelEl.textContent = label;
+      item.appendChild(iconEl);
+      item.appendChild(labelEl);
+      item.addEventListener("click", () => {
+        closeOpenWithMenu();
+        onClick();
+      });
+      menu.appendChild(item);
+    };
+    appendAction(ICON_FOLDER, t("workspace.revealInFinder"), () => revealFile(entry));
+    appendAction(ICON_DOWNLOAD, t("workspace.download"), () => downloadFile(entry));
+
+    document.body.appendChild(menu);
+    menu.addEventListener("contextmenu", (ev) => ev.preventDefault());
+    menu.style.position = "fixed";
+    const fitMenu = () => {
+      const r = anchorBtn.getBoundingClientRect();
+      const mr = menu.getBoundingClientRect();
+      if (mr.right > window.innerWidth - 8) {
+        menu.style.left = "auto";
+        menu.style.right = "8px";
+      }
+      if (mr.bottom > window.innerHeight - 8) {
+        menu.style.top = (Math.max(8, r.top - mr.height - 4)) + "px";
+      }
+    };
+    const r = anchorBtn.getBoundingClientRect();
+    menu.style.top = (r.bottom + 4) + "px";
+    menu.style.left = r.left + "px";
+    requestAnimationFrame(fitMenu);
+
+    setTimeout(() => {
+      document.addEventListener("click", closeOpenWithMenu, { once: true });
+    }, 0);
+
+    Promise.all([
+      Workspace.fetchOpenWithApps(entry),
+      Workspace.fetchDefaultApp(entry)
+    ]).then(([apps, defaultApp]) => {
+      if (!document.body.contains(menu)) return;
+      if (apps.length) {
+        const frag = document.createDocumentFragment();
+        apps.forEach((app) => {
+          const isDefault = defaultApp && defaultApp.path === app.path;
+          const item = el("div", "session-actions-menu-item" + (isDefault ? " wv-open-menu-item--default" : ""));
+          if (isDefault) item.title = t("workspace.openDefault");
+          const iconEl = el("span", "session-actions-menu-icon wv-open-app-icon");
+          const img = document.createElement("img");
+          img.alt = "";
+          img.src = "/api/app-icon?path=" + encodeURIComponent(app.path);
+          img.addEventListener("error", () => { img.remove(); });
+          iconEl.appendChild(img);
+          const labelEl = el("span", "session-actions-menu-label");
+          labelEl.textContent = app.name;
+          item.appendChild(iconEl);
+          item.appendChild(labelEl);
+          item.addEventListener("click", async () => {
+            closeOpenWithMenu();
+            try {
+              await Workspace.openWithApp(entry, app.path);
+            } catch (err) {
+              console.error("open_with failed:", err);
+              Modal.toast(t("workspace.openWithFailed") + ": " + err.message, "error");
+            }
+          });
+          frag.appendChild(item);
+        });
+        frag.appendChild(el("div", "wv-open-menu-separator"));
+        menu.insertBefore(frag, menu.firstChild);
+        fitMenu();
+      }
+    }).catch(() => { /* not macOS or scan failed — reveal/download still work */ });
+  }
+
+  function closeOpenWithMenu() {
+    const existing = document.querySelector(".wv-open-menu");
+    if (existing) existing.remove();
+  }
+
   async function copyPath(entry) {
     const fallback = Workspace.state.workingDir.replace(/\/+$/, "") + "/" + entry.path.replace(/^\/+/, "");
     let target = fallback;
@@ -441,29 +534,86 @@ const WorkspaceView = (() => {
     }
   }
 
+  // Reveal a path in the tree: expand every parent folder on the way down and
+  // mark the file's row active, so a file opened from a chat link shows where it
+  // lives instead of staying hidden inside a collapsed folder. A level's rows
+  // only exist once its parent has been fetched, so the walk is sequential.
+  async function revealTreePath(relPath) {
+    const tree = treeState.treeEl;
+    if (!tree || !relPath) return;
+    // Files outside the working dir have no row to reveal.
+    if (relPath.startsWith("/") || relPath.startsWith("~") || /^[A-Za-z]:/.test(relPath)) return;
+    if (treeState.loadPromise) await treeState.loadPromise;
+
+    const parts = relPath.split("/").filter(Boolean);
+    for (let depth = 0; depth < parts.length - 1; depth++) {
+      const dirPath = parts.slice(0, depth + 1).join("/");
+      const row = tree.querySelector(`.wt-row[data-path="${CSS.escape(dirPath)}"]`);
+      const children = row && row.parentElement ? row.parentElement.querySelector(".wt-children") : null;
+      if (!children) return;
+      const caret = row.querySelector(".wt-caret");
+      if (!caret || caret.classList.contains("open")) continue;
+      await toggleDir(
+        { name: parts[depth], path: dirPath, type: "dir" },
+        caret,
+        children,
+        row.querySelector(".wt-icon"),
+        _activeViewer && _activeViewer.openTab
+      );
+    }
+    setActiveFilePath(relPath);
+  }
+
   // ── Inline tabbed viewer ────────────────────────────────────────────────
 
-  // The tree + viewer split needs horizontal room; widen the aside once when
-  // the first file is opened (still user-resizable afterwards).
-  function ensureAsideWidth() {
-    const aside = document.getElementById("session-aside");
-    if (!aside) return;
-    let w = 0;
-    try {
-      w = parseFloat(getComputedStyle(aside).getPropertyValue("--session-aside-width")) || 0;
-    } catch (_e) { w = 0; }
-    const target = 620;
-    if (w < target) {
-      aside.style.setProperty("--session-aside-width", target + "px");
-      try { localStorage.setItem("clacky.aside.width", String(target)); } catch (_e) { /* non-fatal */ }
-    }
+  const VIEWER_ASIDE_WIDTH = 700;
+
+  // Active viewer instance (one per mounted Files tab). Kept at module level
+  // so openFile() — called from chat file:// link clicks — can reach the
+  // viewer without waiting for a DOM query or a custom event round-trip.
+  let _activeViewer = null;
+  // Unsubscriber for the active mount's refresh listeners. The aside can
+  // re-mount the Files tab without running the previous teardown (new-session
+  // page / same-session re-render), so the next mount releases these first to
+  // avoid stacking duplicate reloads.
+  let _activeOff = null;
+
+  // Binary formats the viewer cannot render are handed straight to the OS
+  // default application, so clicking a .docx link opens Word instead of parking
+  // the user on a "can't preview this" page with a button they still have to
+  // press. Extensions the system would run or mount rather than display stay
+  // behind the fallback page: clicking a link is not consent to run a program.
+  const NO_AUTO_OPEN_EXTS = new Set([
+    "exe", "msi", "dmg", "iso", "jar", "war", "app", "command",
+    "sh", "bash", "zsh", "bat", "cmd", "ps1", "scpt", "workflow",
+    "so", "dylib", "dll", "class", "pyc", "bin", "wasm",
+  ]);
+
+  // Only reached for entries CodeEditor classified as binary, so an extension
+  // missing here means the OS opens it in a viewer rather than running it.
+  function autoOpenWithSystem(filename) {
+    const ext = (filename || "").split(".").pop().toLowerCase();
+    return !!ext && !NO_AUTO_OPEN_EXTS.has(ext);
   }
 
-  function createViewer(onTabsChanged) {
+  function createViewer(onTabsChanged, onToggleTree, onShowMobileTree) {
     const tabs = [];
     let activeId = null;
+    let releaseAsideWidth = null;
     const notify = () => { if (onTabsChanged) onTabsChanged({ count: tabs.length, activeId }); };
 
+    function ensureAsideWidth() {
+      if (releaseAsideWidth || !window.Clacky || !Clacky.Aside || !Clacky.Aside.requestWidth) return;
+      releaseAsideWidth = Clacky.Aside.requestWidth(VIEWER_ASIDE_WIDTH);
+    }
+
+    function restoreAsideWidth() {
+      if (!releaseAsideWidth) return;
+      const release = releaseAsideWidth;
+      releaseAsideWidth = null;
+      release();
+    }
+
     const root = el("div", "wv-viewer");
 
     const tabbar = el("div", "wv-tabbar");
@@ -477,19 +627,63 @@ const WorkspaceView = (() => {
       const btn = el("button", "wv-action" + (cls ? " " + cls : ""));
       btn.type = "button";
       btn.title = title;
+      btn.setAttribute("aria-label", title);
       btn.innerHTML = icon;
       return btn;
     }
 
+    const toggleTreeBtn = actionBtn(ICON_PANEL_LEFT, t("workspace.toggleTree"));
+    toggleTreeBtn.classList.add("wv-toggle-tree", "active");
+    toggleTreeBtn.addEventListener("click", () => {
+      const hidden = onToggleTree ? onToggleTree() : false;
+      toggleTreeBtn.classList.toggle("active", !hidden);
+    });
+
+    const mobileBackBtn = actionBtn(ICON_ARROW_LEFT, t("workspace.backToFiles"), "wv-mobile-back");
+    mobileBackBtn.addEventListener("click", () => {
+      if (onShowMobileTree) onShowMobileTree();
+    });
+
     const previewBtn  = actionBtn(ICON_EYE, t("workspace.preview"));
+    const splitBtn    = actionBtn(ICON_COLUMNS, t("workspace.splitPreview"));
     const copyBtn     = actionBtn(ICON_COPY, t("workspace.copyContent"));
-    const downloadBtn = actionBtn(ICON_DOWNLOAD, t("workspace.download"));
     const saveBtn     = actionBtn(ICON_SAVE, t("modal.save"));
+
+    // Split button shown for binary (non-previewable) tabs: text part opens
+    // with the OS default app, the chevron opens the "open with" dropdown.
+    const openGroup = el("div", "wv-action-group");
+    const openMainBtn = el("button", "wv-action wv-action--open");
+    openMainBtn.type = "button";
+    openMainBtn.title = t("workspace.openDefault");
+    const openIconEl = el("span", "wv-main-app-icon");
+    openIconEl.innerHTML = ICON_EXTERNAL;
+    const openLabel = el("span");
+    openLabel.textContent = t("workspace.open");
+    openMainBtn.appendChild(openIconEl);
+    openMainBtn.appendChild(openLabel);
+    openMainBtn.addEventListener("click", async () => {
+      const tab = activeTab();
+      if (!tab) return;
+      await openWithSystem(tab.entry);
+    });
+    const openArrowBtn = actionBtn(ICON_CHEVRON_DOWN, t("workspace.openWith"));
+    openArrowBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      const tab = activeTab();
+      if (!tab) return;
+      showOpenWithMenu(openArrowBtn, tab.entry);
+    });
+    openGroup.appendChild(openMainBtn);
+    openGroup.appendChild(openArrowBtn);
+
+    actionsEl.appendChild(toggleTreeBtn);
     actionsEl.appendChild(previewBtn);
+    actionsEl.appendChild(splitBtn);
     actionsEl.appendChild(copyBtn);
-    actionsEl.appendChild(downloadBtn);
+    actionsEl.appendChild(openGroup);
     actionsEl.appendChild(saveBtn);
 
+    tabbar.appendChild(mobileBackBtn);
     tabbar.appendChild(tabsEl);
     tabbar.appendChild(actionsEl);
 
@@ -498,6 +692,19 @@ const WorkspaceView = (() => {
 
     const activeTab = () => tabs.find((x) => x.id === activeId) || null;
 
+    // Hand a file to the OS default application. Returns whether it worked so
+    // callers can decide what to tell the user.
+    async function openWithSystem(entry) {
+      try {
+        await Workspace.openWithDefault(entry);
+        return true;
+      } catch (err) {
+        console.error("open failed:", err);
+        Modal.toast(t("workspace.openWithFailed") + ": " + err.message, "error");
+        return false;
+      }
+    }
+
     function rebuildTabbar() {
       tabsEl.replaceChildren();
       tabs.forEach((tab) => {
@@ -538,12 +745,39 @@ const WorkspaceView = (() => {
 
     function updateActions() {
       const tab = activeTab();
+      openGroup.style.display     = tab ? "" : "none";
       previewBtn.style.display  = tab && tab.kind === "text" && tab.isMd ? "" : "none";
+      splitBtn.style.display    = tab && tab.kind === "text" && tab.isMd ? "" : "none";
       copyBtn.style.display     = tab && tab.kind === "text" ? "" : "none";
       saveBtn.style.display     = tab && tab.kind === "text" ? "" : "none";
-      downloadBtn.style.display = tab ? "" : "none";
       previewBtn.classList.toggle("active", !!(tab && tab.previewMode));
+      splitBtn.classList.toggle("active", !!(tab && tab.splitMode));
       saveBtn.classList.toggle("dirty", !!(tab && tab.dirty));
+      refreshOpenIcon();
+    }
+
+    // Swap the main "Open" button icon to the default app's logo (asynchronous;
+    // falls back to the generic external-link icon). Guarded by tab id so a
+    // slow response never clobbers a newer tab.
+    let _openIconTabId = null;
+    function refreshOpenIcon() {
+      const tab = activeTab();
+      if (tab && tab.id === _openIconTabId) return;
+      _openIconTabId = tab ? tab.id : null;
+      openIconEl.innerHTML = ICON_EXTERNAL;
+      openMainBtn.title = t("workspace.openDefault");
+      if (!tab) return;
+      Workspace.fetchDefaultApp(tab.entry).then((app) => {
+        if (!app || _openIconTabId !== tab.id) return;
+        const img = document.createElement("img");
+        img.alt = "";
+        img.src = "/api/app-icon?path=" + encodeURIComponent(app.path);
+        img.addEventListener("error", () => {
+          if (_openIconTabId === tab.id) openIconEl.innerHTML = ICON_EXTERNAL;
+        });
+        openIconEl.replaceChildren(img);
+        openMainBtn.title = t("workspace.openWith", { app: app.name });
+      }).catch(() => { /* keep generic icon */ });
     }
 
     function activate(id) {
@@ -579,6 +813,7 @@ const WorkspaceView = (() => {
       } else {
         rebuildTabbar();
       }
+      if (tabs.length === 0) restoreAsideWidth();
       notify();
     }
 
@@ -600,12 +835,24 @@ const WorkspaceView = (() => {
       }
     }
 
-    function togglePreview(tab) {
-      tab.previewMode = !tab.previewMode;
-      tab.el.dataset.mode = tab.previewMode ? "preview" : "edit";
-      if (tab.previewMode && tab.editor) {
+    function applyMode(tab) {
+      tab.el.dataset.mode = tab.splitMode ? "split" : (tab.previewMode ? "preview" : "edit");
+      if ((tab.previewMode || tab.splitMode) && tab.editor) {
         tab.previewEl.innerHTML = CodeEditor.renderMarkdown(tab.editor.getContent());
       }
+    }
+
+    function togglePreview(tab) {
+      tab.previewMode = !tab.previewMode;
+      tab.splitMode = false;
+      applyMode(tab);
+      updateActions();
+    }
+
+    function toggleSplit(tab) {
+      tab.splitMode = !tab.splitMode;
+      tab.previewMode = false;
+      applyMode(tab);
       updateActions();
     }
 
@@ -627,6 +874,7 @@ const WorkspaceView = (() => {
         dirty: false,
         isMd,
         previewMode: false,
+        splitMode: false,
         previewEl: null,
         editor: null,
         imageUrl: null,
@@ -646,6 +894,9 @@ const WorkspaceView = (() => {
             tab.dirty = true;
             syncDirty(tab);
           }
+          if (tab.splitMode && tab.previewEl) {
+            tab.previewEl.innerHTML = CodeEditor.renderMarkdown(tab.editor.getContent());
+          }
         },
         onSave: () => doSave(tab),
       });
@@ -673,42 +924,147 @@ const WorkspaceView = (() => {
       };
     }
 
+    function buildPdfTab(entry, url) {
+      const pane = el("div", "wv-pane wv-pane--pdf");
+      const frame = document.createElement("iframe");
+      frame.title = entry.name;
+      frame.src = url;
+      pane.appendChild(frame);
+      return {
+        id: entry.path,
+        entry,
+        kind: "pdf",
+        el: pane,
+        dirty: false,
+        isMd: false,
+        previewMode: false,
+        previewEl: null,
+        editor: null,
+        imageUrl: null,
+      };
+    }
+
+    async function buildFallbackTab(entry) {
+      const pane = el("div", "wv-pane wv-pane--fallback");
+
+      const icon = el("div", "wv-fallback-icon");
+      icon.innerHTML = fileIconSvg(entry.name);
+
+      const name = el("div", "wv-fallback-name");
+      name.textContent = entry.name;
+
+      const hint = el("div", "wv-fallback-hint");
+      hint.textContent = t("workspace.fallbackHint");
+
+      const subhint = el("div", "wv-fallback-subhint");
+      subhint.textContent = t("workspace.fallbackSubHint");
+
+      pane.appendChild(icon);
+      pane.appendChild(name);
+      pane.appendChild(hint);
+      pane.appendChild(subhint);
+
+      return {
+        id: entry.path,
+        entry,
+        kind: "binary",
+        el: pane,
+        subhintEl: subhint,
+        dirty: false,
+        isMd: false,
+        previewMode: false,
+        previewEl: null,
+        editor: null,
+        imageUrl: null,
+      };
+    }
+
+    function buildTableTab(entry, text) {
+      const pane = el("div", "wv-pane wv-pane--table");
+      const scroller = el("div", "wv-table-scroll");
+
+      const result = CodeEditor.renderTable(text, entry.name);
+      scroller.appendChild(result.table);
+      pane.appendChild(scroller);
+
+      if (result.truncated) {
+        const note = el("div", "wv-table-note");
+        note.textContent = t("workspace.tableTruncated").replace("%{rows}", result.rows);
+        pane.appendChild(note);
+      }
+
+      return {
+        id: entry.path,
+        entry,
+        kind: "table",
+        el: pane,
+        dirty: false,
+        isMd: false,
+        previewMode: false,
+        splitMode: false,
+        previewEl: null,
+        editor: null,
+        imageUrl: null,
+      };
+    }
+
     async function openTab(entry) {
-      ensureAsideWidth();
       const existing = tabs.find((x) => x.id === entry.path);
       if (existing) {
         activate(existing.id);
         return;
       }
       const kind = CodeEditor.fileKind(entry.name);
-      if (kind === "binary") {
-        Modal.toast(t("workspace.previewUnsupported"), "info");
-        return;
-      }
       let tab = null;
+      let handOff = false;
       try {
         if (kind === "image") {
           const blob = await Workspace.fetchFileBlob(entry);
           tab = buildImageTab(entry, URL.createObjectURL(blob));
+        } else if (kind === "pdf") {
+          tab = buildPdfTab(entry, "/api/local-image?path=" + encodeURIComponent(Workspace.absPath(entry.path)));
+        } else if (kind === "binary") {
+          // The extension already says the browser cannot render this, so the
+          // OS application the user was going to pick is launched below without
+          // making them click a second time. Files that only look binary once
+          // their bytes are sniffed are left alone: that is a damaged or
+          // mislabelled file, not a format the system has a viewer for.
+          handOff = autoOpenWithSystem(entry.name);
+          tab = await buildFallbackTab(entry);
+        } else if (kind === "table") {
+          const text = await Workspace.fetchFileText(entry);
+          tab = CodeEditor.looksBinary(text) ? await buildFallbackTab(entry) : buildTableTab(entry, text);
         } else {
           const text = await Workspace.fetchFileText(entry);
-          tab = buildTextTab(entry, text);
+          tab = CodeEditor.looksBinary(text) ? await buildFallbackTab(entry) : buildTextTab(entry, text);
         }
       } catch (err) {
         console.error("preview failed:", err);
-        Modal.toast(t("workspace.previewFailed"), "error");
+        Modal.toast(t("workspace.previewFailed") + ": " + err.message, "error");
         return;
       }
+      if (tabs.length === 0) ensureAsideWidth();
       tabs.push(tab);
       content.appendChild(tab.el);
       activate(tab.id);
       notify();
+
+      // Nothing to show in the pane, so skip the extra click and launch the
+      // application the user was going to pick anyway.
+      if (handOff) {
+        const opened = await openWithSystem(tab.entry);
+        if (opened && tab.subhintEl) tab.subhintEl.textContent = t("workspace.openedInSystem");
+      }
     }
 
     previewBtn.addEventListener("click", () => {
       const tab = activeTab();
       if (tab && tab.isMd) togglePreview(tab);
     });
+    splitBtn.addEventListener("click", () => {
+      const tab = activeTab();
+      if (tab && tab.isMd) toggleSplit(tab);
+    });
     copyBtn.addEventListener("click", async () => {
       const tab = activeTab();
       if (!tab || !tab.editor) return;
@@ -719,16 +1075,13 @@ const WorkspaceView = (() => {
         Modal.toast(t("workspace.copyFailed"), "error");
       }
     });
-    downloadBtn.addEventListener("click", () => {
-      const tab = activeTab();
-      if (tab) downloadFile(tab.entry);
-    });
     saveBtn.addEventListener("click", () => {
       const tab = activeTab();
       if (tab) doSave(tab);
     });
 
     function destroy() {
+      restoreAsideWidth();
       tabs.forEach((tab) => {
         if (tab.editor) tab.editor.destroy();
         if (tab.imageUrl) URL.revokeObjectURL(tab.imageUrl);
@@ -767,6 +1120,7 @@ const WorkspaceView = (() => {
     const onUp = () => {
       if (!dragging) return;
       dragging = false;
+      handle.classList.remove("active");
       document.body.style.cursor = "";
       document.body.style.userSelect = "";
       document.removeEventListener("mousemove", onMove);
@@ -780,6 +1134,7 @@ const WorkspaceView = (() => {
       dragging = true;
       startX = e.clientX;
       startW = treePane.getBoundingClientRect().width;
+      handle.classList.add("active");
       document.body.style.cursor = "col-resize";
       document.body.style.userSelect = "none";
       document.addEventListener("mousemove", onMove);
@@ -833,10 +1188,22 @@ const WorkspaceView = (() => {
     });
     tree.addEventListener("mouseleave", () => updateIndentGuides(null));
 
-    const viewer = createViewer(({ count, activeId }) => {
-      root.classList.toggle("has-open-files", count > 0);
-      setActiveFilePath(activeId);
-    });
+    const viewer = createViewer(
+      ({ count, activeId }) => {
+        root.classList.toggle("has-open-files", count > 0);
+        if (activeId) root.classList.remove("mobile-tree-visible");
+        if (!count) root.classList.remove("mobile-tree-visible");
+        setActiveFilePath(activeId);
+      },
+      () => {
+        const hidden = root.classList.toggle("tree-hidden");
+        return hidden;
+      },
+      () => {
+        root.classList.add("mobile-tree-visible");
+      }
+    );
+    _activeViewer = viewer;
 
     // ── File search ─────────────────────────────────────────────────────
 
@@ -951,10 +1318,9 @@ const WorkspaceView = (() => {
     });
 
     refresh.addEventListener("click", () => {
-      treeState.indexPromise = null;
       searchInput.value = "";
       showTree();
-      loadRoot(tree, viewer.openTab);
+      reloadTree();
     });
 
     treePane.appendChild(bar);
@@ -969,22 +1335,87 @@ const WorkspaceView = (() => {
     root.appendChild(viewer.root);
     container.appendChild(root);
 
-    loadRoot(tree, viewer.openTab);
+    // One entry point for (re)loading the root listing. openFile() waits on the
+    // same promise before revealing a path, so a link clicked while the tree is
+    // still loading does not miss its row.
+    function reloadTree() {
+      treeState.indexPromise = null;
+      treeState.loadPromise = loadRoot(tree, viewer.openTab);
+    }
+
+    reloadTree();
+
+    // The tree is otherwise loaded only once per mount. Reload it when the
+    // working directory changes (status-bar dir switch) and when the agent
+    // finishes a task (it may have created/edited files under the dir).
+    if (_activeOff) _activeOff();
+    const offSessionChanged = Workspace.on("workspace:sessionChanged", () => {
+      reloadTree();
+    });
+    const offTaskComplete = Workspace.on("workspace:taskCompleted", (payload) => {
+      if (payload && payload.sessionId === Workspace.state.sessionId) {
+        reloadTree();
+      }
+    });
+    const offAll = () => { offSessionChanged(); offTaskComplete(); };
+    _activeOff = offAll;
+
     return {
       destroy() {
+        if (_activeOff === offAll) {
+          offAll();
+          _activeOff = null;
+        }
         clearTimeout(searchTimer);
         treeState.treeEl = null;
         treeState.activePath = null;
         treeState.indexPromise = null;
+        treeState.loadPromise = null;
         lastGuidedRow = null;
+        if (_activeViewer === viewer) _activeViewer = null;
         viewer.destroy();
       },
     };
   }
 
-  return { mount };
+  // Convert an absolute path (from a file:// link in chat) into a tree-style
+  // entry. Paths inside the working directory become relative so tab
+  // de-duplication matches tabs opened from the tree; paths outside stay
+  // absolute (the store treats absolute paths as-is).
+  function toEntry(absPath) {
+    const wd = (Workspace.state.workingDir || "").replace(/\/+$/, "");
+    const name = absPath.split("/").pop() || absPath;
+    if (wd && absPath.startsWith(wd + "/")) {
+      return { name, path: absPath.slice(wd.length + 1), type: "file", size: 0 };
+    }
+    return { name, path: absPath, type: "file", size: 0 };
+  }
+
+  // Open a file:// link target in the Files tab of the session aside.
+  // Returns true when the viewer handled it; false lets the caller fall back
+  // to the system open action. HTML files open in the preview panel instead
+  // (rendered as a page, not shown as source).
+  function openFile(absPath) {
+    if (!absPath || !Workspace.state.hasSession()) return false;
+    const entry = toEntry(absPath);
+    if (/\.html?$/i.test(entry.name) && window.Clacky && Clacky.Preview) {
+      return Clacky.Preview.open(entry.path);
+    }
+    if (window.Clacky && Clacky.Aside) Clacky.Aside.open();
+    const tabBtn = document.querySelector('.aside-tab[data-tab="files"]');
+    if (tabBtn) tabBtn.click();
+    if (!_activeViewer) return false;
+    _activeViewer.openTab(entry);
+    revealTreePath(entry.path);
+    return true;
+  }
+
+  // autoOpenWithSystem is exported for the regression harness.
+  return { mount, openFile, autoOpenWithSystem };
 })();
 
+if (window.Clacky) Clacky.WorkspaceView = WorkspaceView;
+
 // Files is a built-in tab: visible for every session, after ext-studio
 // publish (20) and before git (30) / time-machine (40).
 if (window.Clacky && Clacky.ext) {