openclacky 1.5.21 → 1.5.22

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

@@ -11,7 +11,8 @@
 // it shows for every session regardless of agent profile. All I/O goes through
 // WorkspaceStore.
 //
-// Depends on: WorkspaceStore, Clacky.ext, I18n, Modal, CodeEditor.
+// Depends on: WorkspaceStore, Clacky.ext, Composer, I18n, Modal, CodeEditor,
+// ImageZoom.
 // ───────────────────────────────────────────────────────────────────────────
 "use strict";
 
@@ -143,6 +144,30 @@ const WorkspaceView = (() => {
     '<path fill="#c3ccd4" d="M9.7 1.5v3.3H13z"/>'
   );
 
+  const ICON_TEXT = svgWrap(
+    '<path fill="#90a4ae" d="M3.5 1.5h6.2L13 4.8v9.2a1 1 0 0 1-1 1H3.5a1 1 0 0 1-1-1v-11a1 1 0 0 1 1-1z"/>' +
+    '<path fill="#c3ccd4" d="M9.7 1.5v3.3H13z"/>' +
+    '<path d="M4.8 7.5h5.4M4.8 9.9h5.4M4.8 12.3h3.4" stroke="#fff" stroke-width="1.1" stroke-linecap="round"/>'
+  );
+
+  const ICON_PDF = svgWrap(
+    '<rect x="1" y="1" width="14" height="14" rx="3" fill="#e5383b"/>' +
+    `<text x="8" y="10.4" text-anchor="middle" ${ICON_FONT} font-size="5.6" font-weight="700" letter-spacing="-0.2" fill="#fff">PDF</text>`
+  );
+
+  // Office-style tile: a lettered square overlapping a tinted page
+  function officeIcon(label, color) {
+    return svgWrap(
+      `<path fill="${color}" opacity="0.35" d="M5.5 1.5h6.2L14.5 4.3v9.7a.9.9 0 0 1-.9.9H5.5a.9.9 0 0 1-.9-.9V2.4a.9.9 0 0 1 .9-.9z"/>` +
+      `<rect x="1" y="4" width="9" height="9" rx="1.6" fill="${color}"/>` +
+      `<text x="5.5" y="11.1" text-anchor="middle" ${ICON_FONT} font-size="7" font-weight="800" fill="#fff">${label}</text>`
+    );
+  }
+
+  const ICON_WORD = officeIcon("W", "#2b579a");
+  const ICON_EXCEL = officeIcon("X", "#217346");
+  const ICON_PPT = officeIcon("P", "#d24726");
+
   const ICON_VIDEO = svgWrap(
     '<rect x="1.5" y="3" width="13" height="10" rx="2" fill="#5c8ee6"/>' +
     '<path d="m6.5 5.8 4 2.2-4 2.2z" fill="#fff"/>'
@@ -186,7 +211,11 @@ const WorkspaceView = (() => {
     gif: imgIcon("#a074c4"), webp: imgIcon("#a074c4"), ico: imgIcon("#a074c4"), bmp: imgIcon("#a074c4"),
     mp4: ICON_VIDEO, webm: ICON_VIDEO, mov: ICON_VIDEO,
     mp3: ICON_AUDIO, wav: ICON_AUDIO, ogg: ICON_AUDIO, aac: ICON_AUDIO, flac: ICON_AUDIO, m4a: ICON_AUDIO,
-    pdf: boxIcon("P", "#e04b4b"),
+    pdf: ICON_PDF,
+    doc: ICON_WORD, docx: ICON_WORD, odt: ICON_WORD, rtf: ICON_WORD, wps: ICON_WORD,
+    xls: ICON_EXCEL, xlsx: ICON_EXCEL, ods: ICON_EXCEL, numbers: ICON_EXCEL,
+    ppt: ICON_PPT, pptx: ICON_PPT, odp: ICON_PPT, key: ICON_PPT,
+    txt: ICON_TEXT, log: ICON_TEXT,
     zip: boxIcon("Z", "#dba15d"), tar: boxIcon("Z", "#dba15d"), gz: boxIcon("Z", "#dba15d"),
     "7z": boxIcon("Z", "#dba15d"), rar: boxIcon("Z", "#dba15d"), dmg: boxIcon("Z", "#dba15d"), iso: boxIcon("Z", "#dba15d"),
     lock: ICON_LOCK,
@@ -312,6 +341,16 @@ const WorkspaceView = (() => {
       node.appendChild(children);
       row.addEventListener("click", () => toggleDir(entry, caret, children, icon, openFile));
     } else {
+      row.draggable = true;
+      row.addEventListener("dragstart", (e) => {
+        if (!e.dataTransfer || typeof Composer === "undefined" ||
+            typeof Composer.beginWorkspaceFileDrag !== "function") {
+          e.preventDefault();
+          return;
+        }
+        const started = Composer.beginWorkspaceFileDrag(e.dataTransfer, chatAttachment(entry));
+        if (!started) e.preventDefault();
+      });
       row.addEventListener("click", () => openFile(entry));
     }
 
@@ -505,6 +544,15 @@ const WorkspaceView = (() => {
     }
   }
 
+  function chatAttachment(entry) {
+    return {
+      type: "file",
+      name: entry.name,
+      path: Workspace.absPath(entry.path),
+      size: entry.size,
+    };
+  }
+
   // Hand the file to the composer, which stages it and focuses the input. The
   // absolute path is what the agent ultimately reads, so resolve it here where
   // the session's working directory is known.
@@ -513,11 +561,7 @@ const WorkspaceView = (() => {
       console.error("add to chat failed: Sessions.attachWorkspaceFile is unavailable");
       return;
     }
-    Sessions.attachWorkspaceFile({
-      name: entry.name,
-      path: Workspace.absPath(entry.path),
-      size: entry.size,
-    });
+    Sessions.attachWorkspaceFile(chatAttachment(entry));
   }
 
   async function toggleDir(entry, caret, children, iconEl, openFile) {
@@ -542,7 +586,8 @@ const WorkspaceView = (() => {
       highlightActiveRow();
     } catch (err) {
       console.error("workspace load failed:", err);
-      children.innerHTML = `<div class="wt-error">${t("workspace.error")}</div>`;
+      children.replaceChildren();
+      renderLoadError(children, err);
     }
   }
 
@@ -563,6 +608,52 @@ const WorkspaceView = (() => {
     }
   }
 
+  // A session outlives its working dir all the time (deleted temp clone,
+  // removed workspace, renamed folder). The API flags that case with a code;
+  // "Failed to load files" alone leaves the user with nothing to act on, so
+  // name the cause and offer the folder picker the status bar already owns.
+  function isDirGone(err) {
+    const code = err && err.code;
+    return code === "working_dir_missing" || code === "directory_missing";
+  }
+
+  function renderLoadError(container, err) {
+    if (!isDirGone(err)) {
+      container.innerHTML = `<div class="wt-error">${t("workspace.error")}</div>`;
+      return;
+    }
+    const workingDirGone = err.code === "working_dir_missing";
+    const card = el("div", "wt-error-card");
+    const title = el("div", "wt-error-card-title");
+    title.textContent = t(workingDirGone ? "workspace.dirMissingTitle" : "workspace.dirGoneTitle");
+    const desc = el("div", "wt-error-card-desc");
+    desc.textContent = t(workingDirGone ? "workspace.dirMissingDesc" : "workspace.dirGoneDesc");
+    card.appendChild(title);
+    card.appendChild(desc);
+
+    if (workingDirGone) {
+      const fullPath = Workspace.state.workingDir || "";
+      const pathEl = el("div", "wt-error-card-path");
+      // A full path in a 168px-wide pane hides the segment that differs from
+      // other checkouts, which is the one worth reading.
+      pathEl.textContent = fullPath.length > 44 ? `…${fullPath.slice(-43)}` : fullPath;
+      pathEl.title = fullPath;
+      card.appendChild(pathEl);
+
+      const action = el("button", "btn-card-grid-action wt-error-card-action");
+      action.type = "button";
+      action.textContent = t("workspace.dirMissingAction");
+      // Reuse the status-bar picker's click: it owns the dialog, the PATCH and
+      // the "this folder no longer exists" wording for a missing bound path.
+      action.addEventListener("click", () => {
+        const statusBarDir = document.getElementById("sib-dir");
+        if (statusBarDir) statusBarDir.click();
+      });
+      card.appendChild(action);
+    }
+    container.replaceChildren(card);
+  }
+
   async function loadRoot(tree, openFile, opts) {
     if (!tree || !Workspace.state.hasSession()) return;
     // A different working dir (session switch) shares no history with what is
@@ -578,7 +669,9 @@ const WorkspaceView = (() => {
       entries = await Workspace.fetchEntries("");
     } catch (err) {
       console.error("workspace load failed:", err);
-      if (firstLoad) tree.innerHTML = `<div class="wt-error">${t("workspace.error")}</div>`;
+      // Rows that stay on screen after the dir disappeared claim files exist
+      // where they don't; a transient failure keeps the listing it already has.
+      if (firstLoad || isDirGone(err)) renderLoadError(tree, err);
       return false;
     }
     reconcileEntries(tree, entries, openFile);
@@ -680,12 +773,6 @@ const WorkspaceView = (() => {
 
   const VIEWER_ASIDE_WIDTH = 700;
 
-  // Image zoom is expressed against the picture's own pixels, so 100% always
-  // means "one screen pixel per image pixel" whatever the pane is doing.
-  const IMAGE_MIN_ZOOM = 0.1;
-  const IMAGE_MAX_ZOOM = 8;
-  const IMAGE_ZOOM_STEP = 1.25;
-
   // Open files outlive a reload: the strip is rebuilt from a per-session record
   // in localStorage, so refreshing the page (or coming back to a session) lands
   // on the same files. Paths only — every tab body is fetched from disk again.
@@ -806,38 +893,45 @@ const WorkspaceView = (() => {
 
     const content = el("div", "wv-content");
 
-    function actionBtn(icon, title, cls) {
+    // `key` is the i18n lookup so a language switch can rewrite the hint
+    // after the toolbar has already been built.
+    function actionBtn(icon, key, cls) {
       const btn = el("button", "wv-action" + (cls ? " " + cls : ""));
       btn.type = "button";
-      btn.title = title;
-      btn.setAttribute("aria-label", title);
+      btn.setAttribute("data-tooltip", t(key));
+      btn.setAttribute("data-i18n-tooltip", key);
+      btn.setAttribute("aria-label", t(key));
       btn.innerHTML = icon;
       return btn;
     }
 
-    const toggleTreeBtn = actionBtn(ICON_PANEL_LEFT, t("workspace.toggleTree"));
+    const toggleTreeBtn = actionBtn(ICON_PANEL_LEFT, "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");
+    const mobileBackBtn = actionBtn(ICON_ARROW_LEFT, "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 saveBtn     = actionBtn(ICON_SAVE, t("modal.save"));
+    const previewBtn  = actionBtn(ICON_EYE, "workspace.preview");
+    const splitBtn    = actionBtn(ICON_COLUMNS, "workspace.splitPreview");
+    const copyBtn     = actionBtn(ICON_COPY, "workspace.copyContent");
+    const saveBtn     = actionBtn(ICON_SAVE, "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 setOpenHint = (hint) => {
+      openMainBtn.setAttribute("data-tooltip", hint);
+      openMainBtn.setAttribute("aria-label", hint);
+    };
+    setOpenHint(t("workspace.openDefault"));
     const openIconEl = el("span", "wv-main-app-icon");
     openIconEl.innerHTML = ICON_EXTERNAL;
     const openLabel = el("span");
@@ -849,7 +943,7 @@ const WorkspaceView = (() => {
       if (!tab) return;
       await openWithSystem(tab.entry);
     });
-    const openArrowBtn = actionBtn(ICON_CHEVRON_DOWN, t("workspace.openWith"));
+    const openArrowBtn = actionBtn(ICON_CHEVRON_DOWN, "workspace.openWithMenu");
     openArrowBtn.addEventListener("click", (e) => {
       e.stopPropagation();
       const tab = activeTab();
@@ -904,7 +998,8 @@ const WorkspaceView = (() => {
 
         const close = el("span", "wv-tab-close");
         close.innerHTML = ICON_CLOSE;
-        close.title = t("workspace.closeTab");
+        close.setAttribute("data-tooltip", t("workspace.closeTab"));
+        close.setAttribute("data-i18n-tooltip", "workspace.closeTab");
 
         btn.appendChild(label);
         btn.appendChild(dot);
@@ -952,7 +1047,7 @@ const WorkspaceView = (() => {
       if (tab && tab.id === _openIconTabId) return;
       _openIconTabId = tab ? tab.id : null;
       openIconEl.innerHTML = ICON_EXTERNAL;
-      openMainBtn.title = t("workspace.openDefault");
+      setOpenHint(t("workspace.openDefault"));
       if (!tab) return;
       Workspace.fetchDefaultApp(tab.entry).then((app) => {
         if (!app || _openIconTabId !== tab.id) return;
@@ -963,7 +1058,7 @@ const WorkspaceView = (() => {
           if (_openIconTabId === tab.id) openIconEl.innerHTML = ICON_EXTERNAL;
         });
         openIconEl.replaceChildren(img);
-        openMainBtn.title = t("workspace.openWith", { app: app.name });
+        setOpenHint(t("workspace.openWith", { app: app.name }));
       }).catch(() => { /* keep generic icon */ });
     }
 
@@ -991,7 +1086,7 @@ const WorkspaceView = (() => {
 
     function disposeTab(tab) {
       if (tab.editor) tab.editor.destroy();
-      if (tab.zoomObserver) tab.zoomObserver.disconnect();
+      if (tab.zoomController) tab.zoomController.destroy();
       if (tab.imageUrl) URL.revokeObjectURL(tab.imageUrl);
       if (tab.mediaEl) {
         tab.mediaEl.pause();
@@ -1237,139 +1332,25 @@ const WorkspaceView = (() => {
       viewport.appendChild(img);
 
       const bar = el("div", "wv-zoom-bar");
-      const outBtn = actionBtn(ICON_ZOOM_OUT, t("workspace.zoomOut"), "wv-zoom-btn");
+      const outBtn = actionBtn(ICON_ZOOM_OUT, "workspace.zoomOut", "wv-zoom-btn");
       const level = el("span", "wv-zoom-level");
-      const inBtn = actionBtn(ICON_ZOOM_IN, t("workspace.zoomIn"), "wv-zoom-btn");
-      const fitBtn = actionBtn(ICON_ZOOM_FIT, t("workspace.zoomFit"), "wv-zoom-btn");
+      const inBtn = actionBtn(ICON_ZOOM_IN, "workspace.zoomIn", "wv-zoom-btn");
+      const fitBtn = actionBtn(ICON_ZOOM_FIT, "workspace.zoomFit", "wv-zoom-btn");
       bar.append(outBtn, level, inBtn, fitBtn);
       pane.append(viewport, bar);
 
-      // The picture keeps its natural size and is scaled by transform, so the
-      // number in the bar is a pixel ratio rather than a share of the pane.
-      // `fit` is the scale that shows all of it; the buttons, the wheel and the
-      // double click all move away from there.
-      let scale = 1;
-      let fit = 1;
-      let x = 0;
-      let y = 0;
-
-      function fitScale() {
-        const vw = viewport.clientWidth;
-        const vh = viewport.clientHeight;
-        // A pane inside a hidden tab measures as zero, and a zero ratio would
-        // park the picture at an invisible size — stay neutral until it is real.
-        if (!vw || !vh) return 1;
-        const nw = img.naturalWidth || vw;
-        const nh = img.naturalHeight || vh;
-        return Math.min(1, vw / nw, vh / nh);
-      }
-
-      function pan(offsetX, offsetY) {
-        // Nothing to reveal beyond the edges, so an image narrower than the
-        // pane stays centred instead of being dragged off into a corner.
-        const maxX = Math.max(0, (img.naturalWidth * scale - viewport.clientWidth) / 2);
-        const maxY = Math.max(0, (img.naturalHeight * scale - viewport.clientHeight) / 2);
-        x = Math.max(-maxX, Math.min(maxX, offsetX));
-        y = Math.max(-maxY, Math.min(maxY, offsetY));
-      }
-
-      function render() {
-        pan(x, y);
-        img.style.transform = "translate(" + x + "px, " + y + "px) scale(" + scale + ")";
-        level.textContent = Math.round(scale * 100) + "%";
-        outBtn.disabled = scale <= IMAGE_MIN_ZOOM + 1e-6;
-        inBtn.disabled = scale >= IMAGE_MAX_ZOOM - 1e-6;
-      }
-
-      // Zoom around a point (pane centre by default) so the pixels under the
-      // cursor stay put instead of the picture drifting toward a corner.
-      function zoomAt(target, px, py) {
-        const next = Math.max(IMAGE_MIN_ZOOM, Math.min(IMAGE_MAX_ZOOM, target));
-        if (next === scale) return;
-        const k = next / scale;
-        x = px - k * (px - x);
-        y = py - k * (py - y);
-        scale = next;
-        render();
-      }
-
-      function anchorOf(ev) {
-        const rect = viewport.getBoundingClientRect();
-        return [ev.clientX - (rect.left + rect.width / 2), ev.clientY - (rect.top + rect.height / 2)];
-      }
-
-      function reset() {
-        fit = fitScale();
-        scale = fit;
-        x = 0;
-        y = 0;
-        render();
-      }
-
-      const atFit = () => Math.abs(scale - fit) < 1e-6;
-
-      // A double click is the shortcut for "show me the real pixels" — or, for a
-      // picture that already fits, for "closer than that".
-      const closerTarget = () => (fit < 1 ? 1 : fit * 2);
-
-      inBtn.addEventListener("click", () => zoomAt(scale * IMAGE_ZOOM_STEP, 0, 0));
-      outBtn.addEventListener("click", () => zoomAt(scale / IMAGE_ZOOM_STEP, 0, 0));
-      fitBtn.addEventListener("click", reset);
-
-      // A picture has nothing to scroll, so the wheel belongs to the zoom —
-      // including the pinch gesture a trackpad reports as ctrl+wheel. The
-      // damping keeps one mouse notch (±100) near a quarter turn while the many
-      // small deltas a trackpad sends add up to a glide instead of a jump.
-      viewport.addEventListener("wheel", (ev) => {
-        ev.preventDefault();
-        const anchor = anchorOf(ev);
-        zoomAt(scale * Math.exp(-ev.deltaY * 0.002), anchor[0], anchor[1]);
-      }, { passive: false });
-
-      viewport.addEventListener("dblclick", (ev) => {
-        ev.preventDefault();
-        if (atFit()) {
-          const anchor = anchorOf(ev);
-          zoomAt(closerTarget(), anchor[0], anchor[1]);
-        } else {
-          reset();
-        }
-      });
-
-      let drag = null;
-      viewport.addEventListener("pointerdown", (ev) => {
-        if (ev.button) return;
-        drag = { id: ev.pointerId, x: ev.clientX, y: ev.clientY };
-        viewport.classList.add("is-panning");
-        viewport.setPointerCapture(ev.pointerId);
-        ev.preventDefault();
-      });
-      viewport.addEventListener("pointermove", (ev) => {
-        if (!drag || ev.pointerId !== drag.id) return;
-        pan(x + ev.clientX - drag.x, y + ev.clientY - drag.y);
-        drag.x = ev.clientX;
-        drag.y = ev.clientY;
-        img.style.transform = "translate(" + x + "px, " + y + "px) scale(" + scale + ")";
+      const zoomController = ImageZoom.create({
+        viewport,
+        image: img,
+        onChange(state) {
+          level.textContent = Math.round(state.scale * 100) + "%";
+          outBtn.disabled = !state.canZoomOut;
+          inBtn.disabled = !state.canZoomIn;
+        },
       });
-      const endDrag = (ev) => {
-        if (!drag || ev.pointerId !== drag.id) return;
-        drag = null;
-        viewport.classList.remove("is-panning");
-      };
-      viewport.addEventListener("pointerup", endDrag);
-      viewport.addEventListener("pointercancel", endDrag);
-
-      img.addEventListener("load", reset);
-      if (img.complete) reset();
-      render();
-
-      // Dragging the aside or the window changes the fit ratio, and a tab that
-      // was opened in the background only finds its real size once it is shown —
-      // so refit on every new size, but leave a deliberate zoom alone.
-      const observer = typeof ResizeObserver === "function"
-        ? new ResizeObserver(() => { if (atFit()) reset(); })
-        : null;
-      if (observer) observer.observe(viewport);
+      inBtn.addEventListener("click", zoomController.zoomIn);
+      outBtn.addEventListener("click", zoomController.zoomOut);
+      fitBtn.addEventListener("click", zoomController.reset);
 
       return {
         id: entry.path,
@@ -1382,7 +1363,7 @@ const WorkspaceView = (() => {
         previewEl: null,
         editor: null,
         imageUrl: url,
-        zoomObserver: observer,
+        zoomController,
       };
     }
 
@@ -1669,7 +1650,8 @@ const WorkspaceView = (() => {
     searchInput.setAttribute("aria-label", t("workspace.search"));
     const searchClear = el("button", "wt-search-clear");
     searchClear.type = "button";
-    searchClear.title = t("workspace.closeTab");
+    searchClear.setAttribute("data-tooltip", t("workspace.closeTab"));
+    searchClear.setAttribute("data-i18n-tooltip", "workspace.closeTab");
     searchClear.innerHTML = ICON_CLOSE;
     searchWrap.appendChild(searchIcon);
     searchWrap.appendChild(searchInput);
@@ -1677,7 +1659,8 @@ const WorkspaceView = (() => {
 
     const refresh = el("button", "wt-bar-btn");
     refresh.type = "button";
-    refresh.title = t("workspace.refresh");
+    refresh.setAttribute("data-tooltip", t("workspace.refresh"));
+    refresh.setAttribute("data-i18n-tooltip", "workspace.refresh");
     refresh.innerHTML = '<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="M21 12a9 9 0 1 1-2.64-6.36"/><polyline points="21 3 21 9 15 9"/></svg>';
     bar.appendChild(searchWrap);
     bar.appendChild(refresh);
@@ -1923,8 +1906,15 @@ const WorkspaceView = (() => {
     return true;
   }
 
-  // autoOpenWithSystem is exported for the regression harness.
-  return { mount, openFile, autoOpenWithSystem };
+  // autoOpenWithSystem is exported for the regression harness; the icon
+  // helpers are reused by the git panel so both trees show the same file
+  // glyphs.
+  return {
+    mount, openFile, autoOpenWithSystem,
+    fileIcon: fileIconSvg,
+    iconFolder: ICON_FOLDER,
+    iconFolderOpen: ICON_FOLDER_OPEN,
+  };
 })();
 
 if (window.Clacky) Clacky.WorkspaceView = WorkspaceView;