openclacky 1.3.3 → 1.3.4

data/lib/clacky/web/sessions.js

@@ -124,6 +124,16 @@ const Sessions = (() => {
 
     let html;
     if (typeof marked !== "undefined") {
+      // Restore KTX placeholders that ended up inside code regions back to
+      // their original literal — those weren't math, just text that happened
+      // to look like math (C-5635). Marked alone decides what's a code region.
+      const restoreMathInCode = (s) =>
+        s.replace(/\u0000KTX(\d+)\u0000/g, (_, i) => {
+          const m = math[+i];
+          if (m) m.disabled = true;     // suppress later KaTeX render
+          return m ? m.raw : "";
+        });
+
       const renderer = new marked.Renderer();
       renderer.link = function({ href, title, text }) {
         const titleAttr = title ? ` title="${title}"` : "";
@@ -132,6 +142,7 @@ const Sessions = (() => {
       // Override code block rendering: apply syntax highlighting + header with
       // language label and copy button.
       renderer.code = function({ text: code, lang }) {
+        code = restoreMathInCode(code);
         const language = (lang || "").split(/\s+/)[0]; // strip extra info after lang
         const highlighted = _highlightCode(code, language);
         const displayLang = language || "text";
@@ -152,6 +163,10 @@ const Sessions = (() => {
           `</div>`
         );
       };
+      // Inline code: same restoration, then plain <code> with HTML escaping.
+      renderer.codespan = function({ text }) {
+        return `<code>${escapeHtml(restoreMathInCode(text))}</code>`;
+      };
       try {
         html = marked.parse(prepared, { breaks: true, gfm: true, renderer });
       } catch (_) {
@@ -163,7 +178,11 @@ const Sessions = (() => {
     }
 
     if (math.length) {
-      html = html.replace(/\u0000KTX(\d+)\u0000/g, (_, i) => _renderMath(math[+i]));
+      html = html.replace(/\u0000KTX(\d+)\u0000/g, (_, i) => {
+        const m = math[+i];
+        if (!m || m.disabled) return "";   // already restored by renderer
+        return _renderMath(m);
+      });
     }
     return html;
   }
@@ -187,22 +206,30 @@ const Sessions = (() => {
 
   // Pull $$...$$, \[...\], $...$, \(...\) out of `text` and replace each with a
   // sentinel placeholder so marked won't mangle the LaTeX source. The matched
-  // segments are pushed (with display flag) onto `out` for later KaTeX rendering.
+  // segments are pushed onto `out` as { body, display, raw } for later KaTeX
+  // rendering or — if the placeholder ends up landing inside a code block /
+  // code span — restoration to the original literal by the renderer (C-5635).
+  //
+  // Why no code-block detection here: we don't want a second, parallel notion
+  // of "what counts as code" living next to marked's. Instead we extract math
+  // unconditionally, then let marked be the single arbiter — its
+  // renderer.code / renderer.codespan hooks restore any placeholder that
+  // turns out to be inside a code region (see _markedParse).
   function _extractMath(text, out, placeholder) {
     // Order matters: longest/most-specific delimiters first.
     const patterns = [
-      { re: /\$\$([\s\S]+?)\$\$/g,        display: true  },
-      { re: /\\\[([\s\S]+?)\\\]/g,    display: true  },
-      { re: /\\\(([\s\S]+?)\\\)/g,    display: false },
+      { re: /\$\$([\s\S]+?)\$\$/g,                                        display: true,  wrap: (b) => `$$${b}$$`     },
+      { re: /\\\[([\s\S]+?)\\\]/g,                                          display: true,  wrap: (b) => `\\[${b}\\]`   },
+      { re: /\\\(([\s\S]+?)\\\)/g,                                          display: false, wrap: (b) => `\\(${b}\\)`   },
       // Inline $...$: avoid $$, escaped \$, and prevent crossing newlines/blanks.
-      { re: /(^|[^\$])\$(?!\s)([^\$\n]+?)(?<!\s)\$(?!\d)/g, display: false, hasPrefix: true },
+      { re: /(^|[^\$])\$(?!\s)([^\$\n]+?)(?<!\s)\$(?!\d)/g, display: false, hasPrefix: true, wrap: (b) => `$${b}$` },
     ];
     let result = text;
-    for (const { re, display, hasPrefix } of patterns) {
+    for (const { re, display, hasPrefix, wrap } of patterns) {
       result = result.replace(re, (m, a, b) => {
         const body = hasPrefix ? b : a;
         const idx  = out.length;
-        out.push({ body, display });
+        out.push({ body, display, raw: wrap(body) });
         return (hasPrefix ? a : "") + placeholder(idx);
       });
     }
@@ -827,7 +854,7 @@ const Sessions = (() => {
     _imageSeq = 0;
     _renderAttachmentPreviews();
 
-    WS.send({ type: "message", session_id: Sessions.activeId, content, files });
+    WS.send({ type: "message", session_id: Sessions.activeId, content, files, lang: I18n.lang() });
 
     // Disable any pending feedback cards — user has replied (either by clicking
     // an option button or by typing directly). The backend has already consumed
@@ -1360,11 +1387,11 @@ const Sessions = (() => {
         bubbleHtml += escapeHtml(ev.content || "");
         el.innerHTML = bubbleHtml;
         if (ev.created_at) el.dataset.createdAt = ev.created_at;
-        _appendMsgTime(el, ev.created_at);
         const wrap = document.createElement("div");
         wrap.className = "msg-user-wrap";
         wrap.appendChild(el);
         _appendUserActionBar(el, wrap);
+        _appendMsgTime(wrap, ev.created_at);
         container.appendChild(wrap);
         break;
       }
@@ -1616,6 +1643,7 @@ const Sessions = (() => {
         // If no more history remains, insert a "beginning of conversation" marker at the top.
         // Remove any existing marker first to avoid duplicates.
         messages.querySelector(".history-start-marker")?.remove();
+        _refreshEditButtons(messages);
         if (!state.hasMore) {
           const marker = document.createElement("div");
           marker.className = "history-start-marker";
@@ -1663,9 +1691,11 @@ const Sessions = (() => {
     if (!createdAt) return I18n.t("sessions.untitled") || "Untitled";
     const d   = new Date(createdAt);
     const now = new Date();
-    const diffDays = Math.floor((now - d) / 86400000);
     const pad = n => String(n).padStart(2, "0");
     const hhmm = `${pad(d.getHours())}:${pad(d.getMinutes())}`;
+    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+    const dDay  = new Date(d.getFullYear(), d.getMonth(), d.getDate());
+    const diffDays = Math.round((today - dDay) / 86400000);
     if (diffDays === 0) return `Today ${hhmm}`;
     if (diffDays === 1) return `Yesterday ${hhmm}`;
     return `${d.getMonth() + 1}/${d.getDate()} ${hhmm}`;
@@ -1738,12 +1768,18 @@ const Sessions = (() => {
 
     const editBtn = document.createElement("button");
     editBtn.type = "button";
-    editBtn.className = "msg-user-action-btn";
+    editBtn.className = "msg-user-action-btn msg-edit-btn";
     editBtn.setAttribute("aria-label", I18n.t("chat.edit"));
     editBtn.title = I18n.t("chat.edit");
     editBtn.innerHTML = EDIT_SVG;
-    editBtn.addEventListener("click", (e) => {
+    editBtn.addEventListener("click", async (e) => {
       e.stopPropagation();
+      const ok = await Modal.confirmOnce(
+        "clacky-edit-warn-dismissed",
+        I18n.t("chat.edit.warn"),
+        I18n.t("chat.edit.warnSkip")
+      );
+      if (!ok) return;
       _enterEditMode(el);
     });
 
@@ -1752,6 +1788,13 @@ const Sessions = (() => {
     wrap.appendChild(bar);
   }
 
+  function _refreshEditButtons(container) {
+    const btns = Array.from(container.querySelectorAll(".msg-edit-btn"));
+    btns.forEach((btn, i) => {
+      btn.style.display = i === btns.length - 1 ? "" : "none";
+    });
+  }
+
   function _extractUserBubbleText(el) {
     const clone = el.cloneNode(true);
     clone.querySelectorAll(".msg-user-actions, .msg-time").forEach(n => n.remove());
@@ -1821,9 +1864,14 @@ const Sessions = (() => {
     });
   }
 
-  function _exitEditMode(el) {
+  function _exitEditMode(el, newContent) {
     el.classList.remove("editing");
-    el.innerHTML = el.dataset.originalHtml || "";
+    if (newContent) {
+      el.dataset.originalHtml = escapeHtml(newContent);
+      el.innerHTML = escapeHtml(newContent);
+    } else {
+      el.innerHTML = el.dataset.originalHtml || "";
+    }
   }
 
   function _submitEdit(el, newContent) {
@@ -1843,7 +1891,7 @@ const Sessions = (() => {
       }
     }
 
-    _exitEditMode(el);
+    _exitEditMode(el, newContent);
 
     WS.send({ type: "edit_message", session_id: Sessions.activeId, content: newContent, created_at: createdAt });
 
@@ -3428,6 +3476,16 @@ const Sessions = (() => {
       }
     },
 
+    stampLastUserBubble(createdAt) {
+      const messages = RenderTarget.outer();
+      const wraps = messages.querySelectorAll(".msg-user-wrap");
+      if (!wraps.length) return;
+      const el = wraps[wraps.length - 1].querySelector(".msg-user");
+      if (el) el.dataset.createdAt = createdAt;
+      const dedup = _renderedCreatedAt[_activeId] || (_renderedCreatedAt[_activeId] = new Set());
+      dedup.add(createdAt);
+    },
+
     appendMsg(type, html, { time } = {}) {
       // Starting a new assistant/user/info message: close any open tool group
       if (type !== "tool") Sessions.collapseToolGroup();
@@ -3453,14 +3511,15 @@ const Sessions = (() => {
       } else {
         el.innerHTML = html;
       }
-      if (type === "user" && time) _appendMsgTime(el, time);
 
       if (type === "user") {
         const wrap = document.createElement("div");
         wrap.className = "msg-user-wrap";
         wrap.appendChild(el);
         _appendUserActionBar(el, wrap);
+        if (time) _appendMsgTime(wrap, time);
         messages.appendChild(wrap);
+        _refreshEditButtons(messages);
       } else {
         // For error messages, add a retry button
         if (type === "error") {
@@ -4613,7 +4672,7 @@ const Sessions = (() => {
   // ── Tree-based directory picker ─────────────────────────────────────────
   const ICON_FOLDER_SVG = '<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_CARET_SVG  = '<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 showDirectoryPicker(currentDir, sessionId, titleText) {
+  function showDirectoryPicker(currentDir, sessionId) {
     return new Promise((resolve) => {
       const t = (key, fallback) => {
         const s = I18n.t(key);
@@ -4626,7 +4685,8 @@ const Sessions = (() => {
 
       let selectedPath = currentDir;
       let rootDir = ""; // absolute path of the session's working directory
-      let homeDir = ""; // user home, used as the "working directory" preset when session-less
+      let homeDir = ""; // user home, used as a quick preset
+      let defaultDir = ""; // default workspace from agent_config (or fallback)
       let showHidden = false;
 
       // Fetch directory entries from API, returns dirs with absolute paths
@@ -4640,6 +4700,7 @@ const Sessions = (() => {
           const data = await resp.json();
           rootDir = data.root || rootDir;
           homeDir = data.home || homeDir;
+          defaultDir = data.default || defaultDir;
           const dirs = (data.entries || []).filter(e => e.type === "dir");
           dirs.forEach(d => { d.absPath = d.path; d.absolute = true; });
           return dirs;
@@ -4652,6 +4713,8 @@ const Sessions = (() => {
         const data = await resp.json();
         // Only update rootDir in relative mode; absolute mode would overwrite it with "/"
         if (!absolute) rootDir = data.root || rootDir;
+        homeDir = data.home || homeDir;
+        defaultDir = data.default || defaultDir;
         const dirs = (data.entries || []).filter(e => e.type === "dir");
         // Convert relative paths to absolute
         dirs.forEach(d => {
@@ -4717,6 +4780,12 @@ const Sessions = (() => {
           // Enter this directory - reload tree with this as root
           loadTreeForPath(entry.absPath, entry.absolute);
         });
+
+        // Make the row addressable for inline-edit invoked elsewhere
+        // (e.g. from the "+ New folder" button placing its placeholder).
+        node._dpEntry = entry;
+        node._dpName  = name;
+        node._dpRow   = row;
         return node;
       }
 
@@ -4765,10 +4834,9 @@ const Sessions = (() => {
       // Title
       const title = document.createElement("div");
       title.className = "modal-title";
-      title.textContent = titleText
-        || (sessionLess
-          ? t("sessions.modal.dirpicker.title", "选择工作目录")
-          : t("sib.dir.changePrompt", "切换工作目录"));
+      title.textContent = sessionLess
+        ? t("sessions.modal.dirpicker.title", "选择工作目录")
+        : t("sib.dir.changePrompt", "切换工作目录");
       modal.appendChild(title);
 
       // Modal body
@@ -4809,18 +4877,206 @@ const Sessions = (() => {
         loadTreeForPath(parent, true);
       });
 
+      // ── "+ New folder" ────────────────────────────────────────────────
+      // Drops an editable placeholder row at the top of the current view
+      // and POSTs to the backend on commit. Confirm = Enter / blur, cancel
+      // = Escape. The placeholder is purely visual; nothing is created on
+      // disk until the user commits a non-empty name.
+      const newFolderBtn = document.createElement("button");
+      newFolderBtn.className = "btn btn-secondary btn-sm dp-newfolder-btn";
+      newFolderBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg><span>${t("sib.dir.newFolder", "新建文件夹")}</span>`;
+      newFolderBtn.addEventListener("click", () => beginCreateFolder());
+
+      function beginCreateFolder() {
+        const parentDir = (pathInput.value || "").trim();
+        if (!parentDir.startsWith("/")) {
+          alert(t("sib.dir.mkdirError", "Failed to create folder: {{msg}}").replace("{{msg}}", "invalid parent path"));
+          return;
+        }
+
+        // Locate the parent node in the current tree, if it's rendered.
+        // The path input may point at any expanded descendant of the
+        // tree root, so we can't assume parentDir == tree root.
+        // Walk every rendered .dp-node and match by entry.absPath.
+        let parentNode = null;
+        treeContainer.querySelectorAll(".dp-node").forEach(n => {
+          if (parentNode) return;
+          if (n._dpEntry && n._dpEntry.absPath === parentDir) parentNode = n;
+        });
+
+        // Pick where to insert + what depth the placeholder lives at.
+        // - Tree root (parentDir is the root) → depth 0, host = treeContainer
+        // - Rendered subtree              → depth = parent.depth + 1,
+        //                                    host = parent's .dp-children
+        let host, depth, parentRow, parentCaret, parentChildren;
+        if (parentNode) {
+          parentRow      = parentNode._dpRow;
+          parentCaret    = parentRow.querySelector(".dp-caret");
+          parentChildren = parentNode.querySelector(":scope > .dp-children");
+          depth          = (parseInt(parentNode.dataset.depth, 10) || 0) + 1;
+          host           = parentChildren;
+        } else {
+          depth = 0;
+          host  = treeContainer;
+        }
+
+        // Build a placeholder node and seed it with an inline editor.
+        const placeholder = document.createElement("div");
+        placeholder.className = "dp-node dp-node-pending";
+        placeholder.dataset.depth = depth;
+
+        const row = document.createElement("div");
+        row.className = "dp-row dp-row-editing";
+        row.style.paddingLeft = `${depth * 16 + 8}px`;
+
+        const caret = document.createElement("span");
+        caret.className = "dp-caret";
+        caret.innerHTML = ICON_CARET_SVG;
+
+        const icon = document.createElement("span");
+        icon.className = "dp-icon";
+        icon.innerHTML = ICON_FOLDER_SVG;
+
+        const nameSpan = document.createElement("span");
+        nameSpan.className = "dp-name";
+
+        row.appendChild(caret);
+        row.appendChild(icon);
+        row.appendChild(nameSpan);
+        placeholder.appendChild(row);
+
+        // If we're inserting under a parent node, make sure the parent is
+        // visually expanded so the user sees the placeholder. Mark the
+        // children container as loaded so we don't trigger a refetch on
+        // first toggleExpand (we'll keep our placeholder + inserted node).
+        if (parentNode) {
+          parentCaret.classList.add("open");
+          parentChildren.style.display = "flex";
+          // Drop "loading" / "empty" / "error" stub if present.
+          const stub = parentChildren.querySelector(".dp-empty, .dp-loading, .dp-error");
+          if (stub) stub.remove();
+          parentChildren.dataset.loaded = "1";
+          parentChildren.insertBefore(placeholder, parentChildren.firstChild);
+        } else {
+          // Root level: drop the empty/loading/error stub, then prepend.
+          const emptyEl = treeContainer.querySelector(":scope > .dp-empty, :scope > .dp-loading, :scope > .dp-error");
+          if (emptyEl) emptyEl.remove();
+          treeContainer.insertBefore(placeholder, treeContainer.firstChild);
+        }
+
+        startInlineEdit(nameSpan, t("sib.dir.newFolderDefault", "New Folder"), {
+          onCommit: async (newName) => {
+            const trimmed = (newName || "").trim();
+            if (!trimmed) { placeholder.remove(); return; }
+            try {
+              const resp = await fetch("/api/dirs/mkdir", {
+                method:  "POST",
+                headers: { "Content-Type": "application/json" },
+                body:    JSON.stringify({ parent: parentDir, name: trimmed })
+              });
+              const data = await resp.json().catch(() => ({}));
+              if (!resp.ok || !data.ok) {
+                alert(t("sib.dir.mkdirError", "Failed to create folder: {{msg}}")
+                  .replace("{{msg}}", data.error || `HTTP ${resp.status}`));
+                placeholder.remove();
+                return;
+              }
+              // Replace placeholder with a real, fully-wired node so it can
+              // be expanded / right-clicked exactly like any sibling.
+              const realEntry = {
+                name:     data.name,
+                path:     data.path,
+                absPath:  data.path,
+                absolute: true,
+                type:     "dir"
+              };
+              const realNode = buildDirNode(realEntry, depth);
+              placeholder.replaceWith(realNode);
+              // Auto-select the new folder so the path input updates.
+              modal.querySelectorAll(".dp-row.selected").forEach(el => el.classList.remove("selected"));
+              realNode._dpRow.classList.add("selected");
+              selectedPath = data.path;
+              pathInput.value = data.path;
+              refreshUpBtn();
+            } catch (err) {
+              alert(t("sib.dir.mkdirError", "Failed to create folder: {{msg}}").replace("{{msg}}", err.message || String(err)));
+              placeholder.remove();
+            }
+          },
+          onCancel: () => placeholder.remove()
+        });
+      }
+
+      // ── Inline rename editor (shared by mkdir + rename) ───────────────
+      // Replaces a name span with an <input> seeded by `initialValue`,
+      // commits on Enter/blur, cancels on Escape. The caller wires the
+      // backend round-trip via onCommit (it receives the new name string).
+      function startInlineEdit(nameSpan, initialValue, { onCommit, onCancel }) {
+        const input = document.createElement("input");
+        input.type = "text";
+        input.className = "dp-name-input";
+        input.value = initialValue;
+        input.spellcheck = false;
+        input.autocomplete = "off";
+        input.setAttribute("autocapitalize", "off");
+
+        // Stop click-through so editing doesn't trigger row selection /
+        // expand / collapse.
+        ["click", "dblclick", "mousedown"].forEach(ev =>
+          input.addEventListener(ev, (e) => e.stopPropagation())
+        );
+
+        // Replace span with input. Track via parent so we can swap back.
+        const parent = nameSpan.parentNode;
+        parent.replaceChild(input, nameSpan);
+        // Defer focus until the next tick so the caller's surrounding DOM
+        // mutations (e.g. inserting a placeholder row) finish first.
+        setTimeout(() => {
+          input.focus();
+          input.select();
+        }, 0);
+
+        let finished = false;
+        const finish = (commit) => {
+          if (finished) return;
+          finished = true;
+          const value = input.value;
+          if (input.parentNode === parent) parent.replaceChild(nameSpan, input);
+          if (commit) {
+            try { onCommit && onCommit(value); } catch (e) { console.error(e); }
+          } else {
+            try { onCancel && onCancel(); } catch (e) { console.error(e); }
+          }
+        };
+
+        // Enter commits; Escape cancels. Use IME.bindEnter so that the
+        // Enter that confirms a Chinese / Japanese / Korean IME candidate
+        // does NOT commit the rename. Mirrors Sessions._startRename.
+        IME.bindEnter(input, () => finish(true));
+        input.addEventListener("keydown", (e) => {
+          if (e.key === "Escape") { e.preventDefault(); finish(false); }
+        });
+        input.addEventListener("blur", () => finish(true));
+      }
+
       function setupPresets() {
         presets.innerHTML = "";
         presets.appendChild(upBtn);
         const presetDirs = sessionLess
           ? [
-              { value: homeDir, text: t("sib.dir.home", "主目录"), absolute: true },
-              { value: "/", text: t("sib.dir.root", "根目录"), absolute: true }
+              { value: defaultDir, text: t("sib.dir.default", "默认工作目录"), absolute: true },
+              { value: homeDir,    text: t("sib.dir.home",    "主目录"),       absolute: true },
+              { value: "/",        text: t("sib.dir.root",    "根目录"),       absolute: true }
             ]
           : [
-              { value: rootDir, text: t("sib.dir.current", "当前工作目录"), absolute: false },
-              { value: "/", text: t("sib.dir.root", "根目录"), absolute: true }
-            ];        presetDirs.forEach(p => {
+              { value: defaultDir, text: t("sib.dir.default", "默认工作目录"), absolute: true },
+              { value: "/",        text: t("sib.dir.root",    "根目录"),       absolute: true }
+            ];
+        presetDirs.forEach(p => {
+          // Skip preset whose absolute path isn't known yet (defensive: the
+          // backend always returns it, but a malformed deploy shouldn't render
+          // a button that navigates to "").
+          if (!p.value) return;
           const btn = document.createElement("button");
           btn.className = "btn btn-secondary btn-sm";
           btn.textContent = p.text;
@@ -4832,6 +5088,8 @@ const Sessions = (() => {
           });
           presets.appendChild(btn);
         });
+        // "+ New folder" trailing action on the same toolbar.
+        presets.appendChild(newFolderBtn);
       }
 
       // Path input