openclacky 1.3.2 → 1.3.4

data/lib/clacky/web/sessions.js

@@ -29,6 +29,12 @@ const Sessions = (() => {
   // Search results live in their own list, rendered into the overlay's
   // #session-search-results — they NEVER replace the sidebar session list.
   let   _searchResults     = [];
+  // Sessions resolved by id but not in the paged sidebar list — e.g. landed
+  // here via search-result click, URL deep link, share link, browser
+  // back/forward, or external notification jump. Acts as a local cache for
+  // `findOrFetch`. Excluded from sidebar render and from the loadMore cursor
+  // so the pagination of `_sessions` stays correct.
+  const _extraSessions     = [];
   // Active search result split when _filter.q is non-empty:
   // { nameIds: Set<id>, contentIds: Set<id>, contentLoaded: bool }
   let   _searchSplit       = null;
@@ -118,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}"` : "";
@@ -126,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";
@@ -146,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 (_) {
@@ -157,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;
   }
@@ -181,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);
       });
     }
@@ -821,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
@@ -1353,8 +1386,13 @@ const Sessions = (() => {
         }
         bubbleHtml += escapeHtml(ev.content || "");
         el.innerHTML = bubbleHtml;
-        _appendMsgTime(el, ev.created_at);
-        container.appendChild(el);
+        if (ev.created_at) el.dataset.createdAt = 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;
       }
 
@@ -1605,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";
@@ -1652,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}`;
@@ -1694,6 +1735,169 @@ const Sessions = (() => {
     el.appendChild(span);
   }
 
+  // ── User message action bar (copy + edit) ───────────────────────────────
+
+  const COPY_SVG = `<svg class="msg-user-copy-icon" viewBox="0 0 16 16" width="14" height="14" aria-hidden="true">` +
+    `<path fill="currentColor" d="M10 1H4a2 2 0 0 0-2 2v8h1.5V3a.5.5 0 0 1 .5-.5h6V1zm3 3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm.5 10a.5.5 0 0 1-.5.5H6a.5.5 0 0 1-.5-.5V6a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v8z"/>` +
+  `</svg>` +
+  `<svg class="msg-user-copy-icon-check" viewBox="0 0 16 16" width="14" height="14" aria-hidden="true">` +
+    `<path fill="currentColor" d="M13.5 3.5 6 11 2.5 7.5 1 9l5 5 9-9z"/>` +
+  `</svg>`;
+
+  const EDIT_SVG = `<svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true">` +
+    `<path fill="currentColor" d="M11.013 1.427a1.75 1.75 0 0 1 2.474 0l1.086 1.086a1.75 1.75 0 0 1 0 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 0 1-.927-.928l.929-3.25c.081-.286.235-.547.445-.758l8.61-8.61zm1.414 1.06a.25.25 0 0 0-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 0 0 0-.354l-1.086-1.086zM11.189 6.25 9.75 4.81l-6.286 6.287a.25.25 0 0 0-.064.108l-.558 1.953 1.953-.558a.249.249 0 0 0 .108-.064l6.286-6.286z"/>` +
+  `</svg>`;
+
+  function _appendUserActionBar(el, wrap) {
+    el.dataset.originalHtml = el.innerHTML;
+
+    const bar = document.createElement("div");
+    bar.className = "msg-user-actions";
+
+    const copyBtn = document.createElement("button");
+    copyBtn.type = "button";
+    copyBtn.className = "msg-user-action-btn";
+    copyBtn.setAttribute("aria-label", I18n.t("chat.copy"));
+    copyBtn.title = I18n.t("chat.copy");
+    copyBtn.innerHTML = COPY_SVG;
+    copyBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      const text = _extractUserBubbleText(el);
+      _copyTextAndFlash(copyBtn, text);
+    });
+
+    const editBtn = document.createElement("button");
+    editBtn.type = "button";
+    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", 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);
+    });
+
+    bar.appendChild(copyBtn);
+    bar.appendChild(editBtn);
+    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());
+    return (clone.textContent || "").trim();
+  }
+
+  function _enterEditMode(el) {
+    if (el.classList.contains("editing")) return;
+    el.classList.add("editing");
+
+    const originalHtml = el.dataset.originalHtml || "";
+    const originalText = (() => {
+      const tmp = document.createElement("div");
+      tmp.innerHTML = originalHtml;
+      tmp.querySelectorAll(".msg-user-actions, .msg-time, .msg-pdf-badge, img").forEach(n => n.remove());
+      return (tmp.textContent || "").trim();
+    })();
+
+    el.innerHTML = "";
+
+    const wrap = document.createElement("div");
+    wrap.className = "msg-user-edit-wrap";
+
+    const textarea = document.createElement("textarea");
+    textarea.className = "msg-user-edit-textarea";
+    textarea.value = originalText;
+    textarea.rows = 1;
+
+    const actions = document.createElement("div");
+    actions.className = "msg-user-edit-actions";
+
+    const cancelBtn = document.createElement("button");
+    cancelBtn.type = "button";
+    cancelBtn.className = "msg-user-edit-cancel";
+    cancelBtn.textContent = I18n.t("chat.cancel");
+    cancelBtn.addEventListener("click", () => _exitEditMode(el));
+
+    const sendBtn = document.createElement("button");
+    sendBtn.type = "button";
+    sendBtn.className = "msg-user-edit-send";
+    sendBtn.textContent = I18n.t("chat.send");
+    sendBtn.addEventListener("click", () => _submitEdit(el, textarea.value.trim()));
+
+    textarea.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        _submitEdit(el, textarea.value.trim());
+      }
+      if (e.key === "Escape") _exitEditMode(el);
+    });
+
+    textarea.addEventListener("input", () => {
+      textarea.style.height = "auto";
+      textarea.style.height = textarea.scrollHeight + "px";
+    });
+
+    actions.appendChild(cancelBtn);
+    actions.appendChild(sendBtn);
+    wrap.appendChild(textarea);
+    wrap.appendChild(actions);
+    el.appendChild(wrap);
+
+    requestAnimationFrame(() => {
+      textarea.style.height = textarea.scrollHeight + "px";
+      textarea.focus();
+      textarea.setSelectionRange(textarea.value.length, textarea.value.length);
+    });
+  }
+
+  function _exitEditMode(el, newContent) {
+    el.classList.remove("editing");
+    if (newContent) {
+      el.dataset.originalHtml = escapeHtml(newContent);
+      el.innerHTML = escapeHtml(newContent);
+    } else {
+      el.innerHTML = el.dataset.originalHtml || "";
+    }
+  }
+
+  function _submitEdit(el, newContent) {
+    if (!newContent) return;
+    if (!Sessions.activeId) return;
+
+    const createdAt = el.dataset.createdAt || null;
+
+    const messages = el.closest("#messages, .messages");
+    if (messages) {
+      const wrap = el.parentElement;
+      let sibling = wrap ? wrap.nextSibling : el.nextSibling;
+      while (sibling) {
+        const next = sibling.nextSibling;
+        sibling.remove();
+        sibling = next;
+      }
+    }
+
+    _exitEditMode(el, newContent);
+
+    WS.send({ type: "edit_message", session_id: Sessions.activeId, content: newContent, created_at: createdAt });
+
+    if (messages) messages.scrollTop = messages.scrollHeight;
+  }
+
   // ── Copy button for assistant messages ──────────────────────────────────
   //
   // Each assistant bubble gets a small copy button in its top-right corner.
@@ -2017,7 +2221,41 @@ const Sessions = (() => {
     get all()        { return _sessions; },
     get activeId()   { return _activeId; },
     get searchOpen() { return _searchOpen; },
-    find: id => _sessions.find(s => s.id === id),
+    find: id => _sessions.find(s => s.id === id)
+              || _extraSessions.find(s => s.id === id),
+
+    // Async variant of `find`: when not found in memory, falls back to
+    // GET /api/sessions/:id which returns the on-disk session merged with
+    // any live in-memory state (see SessionRegistry#snapshot in
+    // session_registry.rb). Resolved rows are cached in `_extraSessions`
+    // so subsequent synchronous `find` calls hit too. Returns null on
+    // 404 / network error.
+    //
+    // Use this in code paths where missing-id should NOT silently fail
+    // (Router navigation: search clicks, URL deep links, share links,
+    // browser back/forward, notification jumps). For tight synchronous
+    // paths (WS dispatch, status updates) keep using `find`.
+    async findOrFetch(id) {
+      if (!id) return null;
+      const local = _sessions.find(s => s.id === id)
+                 || _extraSessions.find(s => s.id === id);
+      if (local) return local;
+      try {
+        const resp = await fetch(`/api/sessions/${encodeURIComponent(id)}`);
+        if (!resp.ok) return null;
+        const data = await resp.json();
+        if (!data || !data.session) return null;
+        // Race guard: another caller may have hydrated meanwhile.
+        if (!_sessions.find(s => s.id === id)
+            && !_extraSessions.find(s => s.id === id)) {
+          _extraSessions.push(data.session);
+        }
+        return data.session;
+      } catch (e) {
+        console.error("Sessions.findOrFetch failed:", e);
+        return null;
+      }
+    },
 
     // Composer entry point — called by Skill autocomplete keydown handler
     // (in app.js) when the user presses Enter without an active completion.
@@ -3238,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();
@@ -3263,28 +3511,34 @@ const Sessions = (() => {
       } else {
         el.innerHTML = html;
       }
-      if (type === "user" && time) _appendMsgTime(el, time);
 
-      // For error messages, add a retry button
-      if (type === "error") {
-        const retryBtn = document.createElement("button");
-        retryBtn.className = "retry-btn";
-        retryBtn.textContent = I18n.t("chat.retry");
-        retryBtn.onclick = () => {
-          if (!_activeId) return;
-          // Send "continue" or "继续" based on user's language preference
-          const retryMessage = I18n.lang() === "zh" ? "继续" : "continue";
-          WS.send({ 
-            type: "message", 
-            session_id: _activeId, 
-            content: retryMessage 
-          });
-          retryBtn.disabled = true; // Disable button after clicking (keep it visible)
-        };
-        el.appendChild(retryBtn);
+      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") {
+          const retryBtn = document.createElement("button");
+          retryBtn.className = "retry-btn";
+          retryBtn.textContent = I18n.t("chat.retry");
+          retryBtn.onclick = () => {
+            if (!_activeId) return;
+            WS.send({
+              type: "message",
+              session_id: _activeId,
+              content: I18n.t("chat.continue")
+            });
+            retryBtn.disabled = true;
+          };
+          el.appendChild(retryBtn);
+        }
+        messages.appendChild(el);
       }
-
-      messages.appendChild(el);
       // User messages: force scroll to bottom (user just sent a message)
       // Assistant/info: conditional scroll (preserve position if user is viewing history)
       if (type === "user") {
@@ -4431,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
@@ -4445,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;
@@ -4457,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 => {
@@ -4522,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;
       }
 
@@ -4613,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;
@@ -4636,6 +5088,8 @@ const Sessions = (() => {
           });
           presets.appendChild(btn);
         });
+        // "+ New folder" trailing action on the same toolbar.
+        presets.appendChild(newFolderBtn);
       }
 
       // Path input