openclacky 1.3.3 → 1.3.5

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);
       });
     }
@@ -384,42 +411,27 @@ const Sessions = (() => {
       _hideNewMessageBanner();
     });
 
-    // Detect actual user scroll interactions (wheel, touch, keyboard)
-    // These fire BEFORE the scroll event, so we can set the flag reliably.
-    const detectUserScroll = (e) => {
-      // Only flag if user is scrolling up (negative deltaY = scroll up)
-      // For wheel events: deltaY < 0 means scroll up
-      // For touch/keyboard: check scroll position in the scroll event
-      const isWheelUp = e.type === "wheel" && e.deltaY < 0;
-      const isKeyboardUp = e.type === "keydown" && (e.key === "ArrowUp" || e.key === "PageUp" || e.key === "Home");
-      
-      if (isWheelUp || isKeyboardUp) {
-        _userScrolledUp = true;
-      }
-    };
-
-    messages.addEventListener("wheel", detectUserScroll, { passive: true });
-    messages.addEventListener("keydown", detectUserScroll);
-    
-    // For touch devices: touchmove doesn't tell us direction, so check in scroll event
-    let touchStartY = 0;
-    messages.addEventListener("touchstart", (e) => {
-      touchStartY = e.touches[0].clientY;
-    }, { passive: true });
-    
-    messages.addEventListener("touchmove", (e) => {
-      const touchDeltaY = e.touches[0].clientY - touchStartY;
-      // touchDeltaY > 0 means finger moved down = content scrolls up
-      if (touchDeltaY > 5) {
-        _userScrolledUp = true;
-      }
-    }, { passive: true });
-
-    // Monitor scroll position: clear flag when user reaches bottom
+    // Single source of truth for "is the user browsing history?": the scroll
+    // position itself. Every scrolling method — mouse wheel, dragging the
+    // scrollbar, keyboard (Up/PageUp/Home/Space), touch swipe and momentum
+    // scrolling — funnels through the `scroll` event, so reading the position
+    // here covers them all with no blind spots.
+    //
+    // The previous approach instead listened to specific input events
+    // (wheel/keydown/touchmove) to *infer* intent. Dragging the scrollbar
+    // fires `scroll` but none of those, so it was never detected and AI
+    // messages kept yanking the view back to the bottom — see C-5629.
+    //
+    // Streaming-append safety: appending content grows scrollHeight but leaves
+    // scrollTop untouched (verified in-browser, even with overflow-anchor:auto),
+    // so a content update never moves us "away from bottom" and never trips a
+    // false positive here. The 150px threshold in _isAtBottom is extra slack.
     messages.addEventListener("scroll", () => {
       if (_isAtBottom(messages)) {
         _userScrolledUp = false;
         _hideNewMessageBanner();
+      } else {
+        _userScrolledUp = true;
       }
     });
   }
@@ -441,30 +453,26 @@ const Sessions = (() => {
     document.getElementById("btn-new-session-inline")
       .addEventListener("click", () => Sessions.create("general"));
 
-    // Split button: arrow (toggle dropdown)
-    document.getElementById("btn-new-session-arrow")
-      .addEventListener("click", (e) => {
-        e.stopPropagation();
-        const dd = document.getElementById("new-session-dropdown");
-        dd.hidden = !dd.hidden;
-      });
+    // Split button: arrow — show dropdown on hover, hide when leaving the whole wrap
+    const arrow = document.getElementById("btn-new-session-arrow");
+    const wrap  = arrow.closest(".btn-split-wrap");
+    const dd    = document.getElementById("new-session-dropdown");
 
-    // Dropdown item "Advanced Options…" — delegated because the dropdown
-    // panel may be re-rendered; this keeps the binding stable.
+    arrow.addEventListener("mouseenter", () => { dd.hidden = false; });
+    dd.addEventListener("mouseenter",    () => { dd.hidden = false; });
+    wrap.addEventListener("mouseleave",  () => { dd.hidden = true; });
+    dd.addEventListener("mouseleave",    () => { dd.hidden = true; });
+
+    // Dropdown item "Advanced Options…"
     document.addEventListener("click", (e) => {
       if (e.target && e.target.id === "btn-new-session-modal") {
-        e.stopPropagation();
-        document.getElementById("new-session-dropdown").hidden = true;
+        dd.hidden = true;
         Sessions.openNewSessionModal();
+      } else if (!wrap.contains(e.target)) {
+        dd.hidden = true;
       }
     });
 
-    // Close dropdown when clicking anywhere else
-    document.addEventListener("click", () => {
-      const dd = document.getElementById("new-session-dropdown");
-      if (dd && !dd.hidden) dd.hidden = true;
-    });
-
     // Welcome screen "+ New Session" button
     document.getElementById("btn-welcome-new")
       .addEventListener("click", () => Sessions.create("general"));
@@ -827,7 +835,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 +1368,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;
       }
@@ -1377,6 +1385,7 @@ const Sessions = (() => {
         el.dataset.raw = ev.content || "";
         el.innerHTML = _renderMarkdown(ev.content || "");
         _appendCopyButton(el);
+        _enhanceTaskItems(el, ev.content || "");
         container.appendChild(el);
         break;
       }
@@ -1616,6 +1625,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";
@@ -1639,6 +1649,7 @@ const Sessions = (() => {
                   code: session.error_code,
                   message: session.error,
                   top_up_url: session.top_up_url,
+                  raw_message: session.raw_message,
                 });
               } else {
                 Sessions.appendMsg("error", session.error);
@@ -1663,9 +1674,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 +1751,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 +1771,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 +1847,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 +1874,7 @@ const Sessions = (() => {
       }
     }
 
-    _exitEditMode(el);
+    _exitEditMode(el, newContent);
 
     WS.send({ type: "edit_message", session_id: Sessions.activeId, content: newContent, created_at: createdAt });
 
@@ -1877,6 +1908,78 @@ const Sessions = (() => {
     _ensureCopyDelegation();
   }
 
+  // System feature: any assistant message containing GFM task-list items
+  // (`- [ ] ...`) gets a "spawn" button on each UNCHECKED item, turning a
+  // todo into its own session. The new session's first prompt is the item
+  // text plus the full message for context.
+  function _stripThink(text) {
+    if (!text) return "";
+    return text.replace(/<think>[\s\S]*?<\/think>/g, "").replace(/^\s+/, "");
+  }
+
+  function _enhanceTaskItems(el, rawText) {
+    const seen = new Set();
+    const context = _stripThink(rawText);
+    el.querySelectorAll("li").forEach((li) => {
+      const box = li.querySelector('input[type="checkbox"]');
+      if (!box || box.checked) return;          // only unchecked todos
+      if (seen.has(li)) return;
+      seen.add(li);
+
+      const text = li.textContent.trim();
+      if (!text) return;
+
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.className = "msg-todo-spawn";
+      btn.title = I18n.t("chat.todo.spawn");
+      btn.textContent = I18n.t("chat.todo.spawn");
+      btn.dataset.todoText = text;
+      btn.dataset.todoContext = context;
+      li.appendChild(btn);
+    });
+    _ensureTodoSpawnDelegation();
+  }
+
+  let _todoSpawnDelegationInstalled = false;
+  function _ensureTodoSpawnDelegation() {
+    if (_todoSpawnDelegationInstalled) return;
+    const messages = RenderTarget.outer();
+    if (!messages) return;
+    _todoSpawnDelegationInstalled = true;
+    messages.addEventListener("click", (e) => {
+      const btn = e.target.closest(".msg-todo-spawn");
+      if (!btn) return;
+      e.preventDefault();
+      e.stopPropagation();
+      _spawnFromTodo(btn);
+    });
+  }
+
+  async function _spawnFromTodo(btn) {
+    if (btn.disabled) return;
+    btn.disabled = true;
+    const original = btn.textContent;
+    btn.textContent = I18n.t("chat.todo.spawning");
+
+    const todoText = btn.dataset.todoText || "";
+    const context  = btn.dataset.todoContext || "";
+    const prompt =
+      `Task:\n${todoText}\n\n` +
+      `--- Context (the message this task came from) ---\n${context}`;
+
+    try {
+      await Sessions.startWith(prompt, {
+        name: todoText.slice(0, 60),
+        display: `📋 ${todoText}`,
+      });
+    } catch (err) {
+      btn.disabled = false;
+      btn.textContent = original;
+      alert(I18n.t("chat.todo.spawnFailed", { msg: err.message }));
+    }
+  }
+
   // Install the click-delegation listener on #messages exactly once.
   // Handles copy clicks for all current AND future assistant bubbles
   // AND code block copy buttons.
@@ -2290,6 +2393,36 @@ const Sessions = (() => {
       }
     },
 
+    // Create a session, queue a command to run once subscribed, and navigate to
+    // it. The user bubble is rendered locally on the "subscribed" event (see
+    // ws-dispatcher), so callers never touch history or WS timing.
+    // Returns the created session.
+    async startWith(command, { name, source = "setup", display = null } = {}) {
+      if (!name) {
+        const maxN = _sessions.reduce((max, s) => {
+          const m = s.name && s.name.match(/^Session (\d+)$/);
+          return m ? Math.max(max, parseInt(m[1], 10)) : max;
+        }, 0);
+        name = "Session " + (maxN + 1);
+      }
+
+      const res  = await fetch("/api/sessions", {
+        method:  "POST",
+        headers: { "Content-Type": "application/json" },
+        body:    JSON.stringify({ name, source }),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "failed to create session");
+      const session = data.session;
+      if (!session) throw new Error("no session returned");
+
+      Sessions.add(session);
+      Sessions.renderList();
+      Sessions.setPendingMessage(session.id, command, display);
+      Sessions.select(session.id);
+      return session;
+    },
+
     /** Patch a single session's fields (from session_update event).
      *  If the session is not in the list yet (e.g. just created by another tab),
      *  prepend it so the sidebar shows it immediately. */
@@ -3428,6 +3561,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();
@@ -3450,17 +3593,19 @@ const Sessions = (() => {
         el.dataset.raw = html || "";
         el.innerHTML = _renderMarkdown(html);
         _appendCopyButton(el);
+        _enhanceTaskItems(el, html || "");
       } 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") {
@@ -3476,7 +3621,11 @@ const Sessions = (() => {
             });
             retryBtn.disabled = true;
           };
+          // Move any .error-raw-detail to after the retry button
+          const rawDetail = el.querySelector(".error-raw-detail");
+          if (rawDetail) el.removeChild(rawDetail);
           el.appendChild(retryBtn);
+          if (rawDetail) el.appendChild(rawDetail);
         }
         messages.appendChild(el);
       }
@@ -3869,8 +4018,8 @@ const Sessions = (() => {
     },
 
     /** Register a slash-command message to send after subscribe is confirmed. */
-    setPendingMessage(sessionId, content) {
-      _pendingMessage = { session_id: sessionId, content };
+    setPendingMessage(sessionId, content, display = null) {
+      _pendingMessage = { session_id: sessionId, content, display };
     },
 
     /** Consume and return the pending message (clears it). */
@@ -4613,7 +4762,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 +4775,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 +4790,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 +4803,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 +4870,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 +4924,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 +4967,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 +5178,8 @@ const Sessions = (() => {
           });
           presets.appendChild(btn);
         });
+        // "+ New folder" trailing action on the same toolbar.
+        presets.appendChild(newFolderBtn);
       }
 
       // Path input