openclacky 1.5.2 → 1.5.4

data/lib/clacky/web/sessions.js

@@ -59,6 +59,10 @@ const Sessions = (() => {
   // Flushed in _fetchHistory after the fragment is appended to the DOM.
   let   _pendingStdoutLines = null; // string[] | null
 
+  // ── Chat section collapse ──────────────────────────────────────────────────
+  const _CHAT_COLLAPSE_KEY = "clacky_chat_section_collapsed";
+  let   _chatCollapsed     = localStorage.getItem(_CHAT_COLLAPSE_KEY) === "1";
+
   // ── Markdown renderer ──────────────────────────────────────────────────
   //
   // Renders assistant message text as Markdown HTML using the marked library.
@@ -433,6 +437,25 @@ const Sessions = (() => {
     }
   }
 
+  function _initSectionCollapse() {
+    const chatHeader  = document.getElementById("chat-section-header");
+    const sessionList = document.getElementById("session-list");
+    if (!chatHeader || !sessionList) return;
+
+    if (_chatCollapsed) {
+      sessionList.classList.add("chat-section-collapsed");
+      chatHeader.classList.add("chat-header-collapsed");
+    }
+
+    chatHeader.addEventListener("click", e => {
+      if (e.target.closest(".sidebar-divider-actions")) return;
+      _chatCollapsed = !_chatCollapsed;
+      localStorage.setItem(_CHAT_COLLAPSE_KEY, _chatCollapsed ? "1" : "0");
+      sessionList.classList.toggle("chat-section-collapsed", _chatCollapsed);
+      chatHeader.classList.toggle("chat-header-collapsed", _chatCollapsed);
+    });
+  }
+
   function _initEmptyHint() {
     const messages = RenderTarget.outer();
     if (!messages) return;
@@ -551,7 +574,7 @@ const Sessions = (() => {
   const MAX_IMAGE_SIZE        = 5 * 1024 * 1024;   // 5 MB — hard reject before compression
   const MAX_IMAGE_BYTES_SEND  = 512 * 1024;         // 512 KB — target after compression
   const MAX_IMAGE_LONG_EDGE   = 1920;               // px — scale down if larger
-  const MAX_FILE_BYTES = 32 * 1024 * 1024;  // 32 MB
+  const MAX_FILE_BYTES = 300 * 1024 * 1024;  // 300 MB
   const ACCEPTED_IMAGE_TYPES = ["image/png", "image/jpeg", "image/gif", "image/webp"];
 
   function _isAcceptedImage(file) {
@@ -662,7 +685,7 @@ const Sessions = (() => {
 
   function _addGenericFile(file) {
     if (file.size > MAX_FILE_BYTES) {
-      alert(I18n.t("chat.file.tooLarge", { name: file.name, max: "32 MB" }));
+      alert(I18n.t("chat.file.tooLarge", { name: file.name, max: "300 MB" }));
       return;
     }
     // Upload file to server via HTTP — only the path is returned, no base64 in memory
@@ -2314,6 +2337,15 @@ const Sessions = (() => {
     find: id => _sessions.find(s => s.id === id)
               || _extraSessions.find(s => s.id === id),
 
+    /** Return the next available "Session N" name based on loaded sessions. */
+    nextDefaultName() {
+      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);
+      return "Session " + (maxN + 1);
+    },
+
     // 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
@@ -2355,6 +2387,9 @@ const Sessions = (() => {
     init() {
       _initNewMessageBanner();
       _initEmptyHint();
+
+      _initSectionCollapse();
+
       _initNewSessionControls();
       _initComposer();
       _initSearch();
@@ -2438,11 +2473,7 @@ const Sessions = (() => {
     // 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);
+        name = Sessions.nextDefaultName();
       }
 
       const res  = await fetch("/api/sessions", {
@@ -2494,6 +2525,28 @@ const Sessions = (() => {
       _drafts.delete(id);
     },
 
+    /** Clear project_id from all sessions that belong to a deleted project. */
+    clearProjectId(projectId) {
+      _sessions.forEach(s => {
+        if (s.project_id === projectId) s.project_id = null;
+      });
+    },
+
+    /** Remove all sessions belonging to a deleted project from local memory. */
+    removeByProjectId(projectId) {
+      for (let i = _sessions.length - 1; i >= 0; i--) {
+        if (_sessions[i].project_id === projectId) _sessions.splice(i, 1);
+      }
+    },
+
+    /**
+     * Public wrapper so Projects.renderSection() can reuse the same item
+     * renderer without duplicating session-item DOM/event logic.
+     */
+    renderSessionItem(container, s) {
+      _renderSessionItem(container, s);
+    },
+
     /** Load the next page of older sessions (unified time cursor). */
     async loadMore() {
       if (_loadingMore || !_hasMore) return;
@@ -2517,7 +2570,7 @@ const Sessions = (() => {
           return (!min || t < min) ? t : min;
         }, null);
 
-        const params = new URLSearchParams({ limit: "20", exclude_type: "cron" });
+        const params = new URLSearchParams({ limit: "15", exclude_type: "cron" });
         if (oldest)          params.set("before", oldest);
         if (_filter.q)       params.set("q",    _filter.q);
         if (_filter.date)    params.set("date", _filter.date);
@@ -2560,7 +2613,7 @@ const Sessions = (() => {
       Sessions.renderList();
 
       try {
-        const params = new URLSearchParams({ limit: "20", type: "cron" });
+        const params = new URLSearchParams({ limit: "15", type: "cron" });
         if (_cronBefore) params.set("before", _cronBefore);
 
         const res  = await fetch(`/api/sessions?${params}`);
@@ -2798,6 +2851,7 @@ const Sessions = (() => {
           Sessions.remove(id);
           if (id === Sessions.activeId) Router.navigate("welcome");
           Sessions.renderList();
+          Projects.renderSection();
         } else {
           const data = await res.json().catch(() => ({}));
           console.error("Failed to delete session:", data.error || res.status);
@@ -2806,6 +2860,7 @@ const Sessions = (() => {
             Sessions.remove(id);
             if (id === Sessions.activeId) Router.navigate("welcome");
             Sessions.renderList();
+            Projects.renderSection();
           }
         }
         // Server also broadcasts session_deleted WS event; Sessions.remove() is idempotent
@@ -2906,7 +2961,10 @@ const Sessions = (() => {
 
       // ── Sidebar list always shows the full session set, sorted ───────
       // Search/filter no longer touches this list — it lives in the overlay.
-      const visible = [..._sessions].sort(byPinnedAndTime);
+      // Sessions assigned to a project are shown in the project section below.
+      const visible = [..._sessions]
+        .filter(s => !s.project_id)
+        .sort(byPinnedAndTime);
 
       // ── Split cron vs non-cron for folding ───────────────────────────
       const isCronView      = _cronView;
@@ -2954,8 +3012,6 @@ const Sessions = (() => {
         // Normal list view, no cron sessions
         visible.forEach(s => _renderSessionItem(list, s));
       }
-
-      // Empty state fallback
       if (list.children.length === 0) {
         list.innerHTML = `<div class="session-empty">${I18n.t("sessions.empty")}</div>`;
       }
@@ -3009,6 +3065,7 @@ const Sessions = (() => {
         if (res.ok) {
           Sessions.patch(sessionId, { name: newName });
           Sessions.renderList();
+          Projects.renderSection();
         } else {
           console.error("Rename failed:", await res.text());
         }
@@ -3076,7 +3133,13 @@ const Sessions = (() => {
       const iconRename = `<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 1 1 3 3L7 19l-4 1 1-4z"/></svg>`;
       const iconTrash = `<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>`;
 
+      // Pin option is only shown for sessions that are NOT in a project
       const pinLabel = session.pinned ? I18n.t("sessions.actions.unpin") : I18n.t("sessions.actions.pin");
+      const pinItemHtml = `
+        <div class="session-actions-menu-item" data-action="pin">
+          <span class="session-actions-menu-icon">${iconPin}</span>
+          <span class="session-actions-menu-label">${escapeHtml(pinLabel)}</span>
+        </div>`;
 
       const menu = document.createElement("div");
       menu.className = "session-actions-menu";
@@ -3085,10 +3148,7 @@ const Sessions = (() => {
           <span class="session-actions-menu-icon">${iconFork}</span>
           <span class="session-actions-menu-label">${escapeHtml(I18n.t("sessions.actions.fork"))}</span>
         </div>
-        <div class="session-actions-menu-item" data-action="pin">
-          <span class="session-actions-menu-icon">${iconPin}</span>
-          <span class="session-actions-menu-label">${escapeHtml(pinLabel)}</span>
-        </div>
+        ${pinItemHtml}
         <div class="session-actions-menu-item" data-action="rename">
           <span class="session-actions-menu-icon">${iconRename}</span>
           <span class="session-actions-menu-label">${escapeHtml(I18n.t("sessions.actions.rename"))}</span>
@@ -3167,6 +3227,7 @@ const Sessions = (() => {
           // Update local state
           session.pinned = newPinnedState;
           Sessions.renderList();
+          Projects.renderSection();
         } else {
           console.error("Toggle pin failed:", await res.text());
         }
@@ -3190,6 +3251,7 @@ const Sessions = (() => {
         if (res.ok) {
           Sessions.remove(sessionId);
           Sessions.renderList();
+          Projects.renderSection();
           // If deleted session was active, switch to welcome
           if (sessionId === _activeId) {
             Router.navigate("welcome");
@@ -4704,18 +4766,13 @@ const Sessions = (() => {
         });        return dirs;
       }
 
-      // Build a tree node for a directory entry
-      function buildDirNode(entry, depth) {
+      // Build a flat list row for a directory entry (Finder-style)
+      function buildDirNode(entry, _depth) {
         const node = document.createElement("div");
         node.className = "dp-node";
-        node.dataset.depth = depth; // Store depth for child expansion
 
         const row = document.createElement("div");
         row.className = "dp-row";
-        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";
@@ -4725,192 +4782,266 @@ const Sessions = (() => {
         name.className = "dp-name";
         name.textContent = entry.name;
 
-        row.appendChild(caret);
         row.appendChild(icon);
         row.appendChild(name);
         node.appendChild(row);
 
-        const children = document.createElement("div");
-        children.className = "dp-children";
-        children.style.display = "none";
-        node.appendChild(children);
-
-        // Single-click: select directory (show path) + expand/collapse
+        // Single-click: select this directory
         let clickTimer = null;
         row.addEventListener("click", (e) => {
           e.stopPropagation();
           if (clickTimer) { clearTimeout(clickTimer); clickTimer = null; }
           clickTimer = setTimeout(() => {
             clickTimer = null;
-            // Select this directory
-            modal.querySelectorAll(".dp-row.selected").forEach(el => el.classList.remove("selected"));
+            listContainer.querySelectorAll(".dp-row.selected").forEach(el => el.classList.remove("selected"));
             row.classList.add("selected");
             selectedPath = entry.absPath;
-            pathInput.value = entry.absPath;
-            // Also expand/collapse
-            toggleExpand(entry, caret, children);
-          }, 250);
+            refreshBreadcrumb(entry.absPath);
+          }, 200);
         });
 
         // Double-click: enter directory (navigate into it)
         row.addEventListener("dblclick", (e) => {
           e.stopPropagation();
           if (clickTimer) { clearTimeout(clickTimer); clickTimer = null; }
-          // Enter this directory - reload tree with this as root
-          loadTreeForPath(entry.absPath, entry.absolute);
+          navigateTo(entry.absPath, true);
         });
 
-        // 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;
       }
 
-      async function toggleExpand(entry, caret, children) {
-        const isOpen = caret.classList.contains("open");
-        if (isOpen) {
-          caret.classList.remove("open");
-          children.style.display = "none";
-          return;
+      // Create modal overlay
+      const overlay = document.createElement("div");
+      overlay.className = "modal-overlay";
+
+      // Create modal content — Finder-style layout
+      const modal = document.createElement("div");
+      modal.className = "modal-content dp-modal";
+
+      // ── Toolbar ──────────────────────────────────────────────────────
+      const toolbar = document.createElement("div");
+      toolbar.className = "dp-toolbar";
+
+      // Back / Forward buttons
+      const backBtn = document.createElement("button");
+      backBtn.className = "dp-nav-btn";
+      backBtn.title = t("sib.dir.back", "后退");
+      backBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>`;
+      backBtn.disabled = true;
+
+      const fwdBtn = document.createElement("button");
+      fwdBtn.className = "dp-nav-btn";
+      fwdBtn.title = t("sib.dir.forward", "前进");
+      fwdBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>`;
+      fwdBtn.disabled = true;
+
+      const navBtns = document.createElement("div");
+      navBtns.className = "dp-nav-btns";
+      navBtns.appendChild(backBtn);
+      navBtns.appendChild(fwdBtn);
+
+      // Breadcrumb
+      const breadcrumb = document.createElement("div");
+      breadcrumb.className = "dp-breadcrumb";
+
+      toolbar.appendChild(navBtns);
+      toolbar.appendChild(breadcrumb);
+      modal.appendChild(toolbar);
+
+      // ── Column header ─────────────────────────────────────────────────
+      const colHeader = document.createElement("div");
+      colHeader.className = "dp-col-header";
+      const colName = document.createElement("span");
+      colName.className = "dp-col-name";
+      colName.textContent = t("sib.dir.colName", "名称");
+      // Hidden files toggle (right side of header)
+      const hiddenToggle = document.createElement("label");
+      hiddenToggle.className = "dp-hidden-toggle";
+      const hiddenCheckbox = document.createElement("input");
+      hiddenCheckbox.type = "checkbox";
+      hiddenCheckbox.checked = false;
+      const hiddenLabelText = document.createElement("span");
+      hiddenLabelText.textContent = t("sib.dir.showHidden", "显示隐藏文件");
+      hiddenToggle.appendChild(hiddenCheckbox);
+      hiddenToggle.appendChild(hiddenLabelText);
+      colHeader.appendChild(colName);
+      colHeader.appendChild(hiddenToggle);
+      modal.appendChild(colHeader);
+
+      // ── List container ────────────────────────────────────────────────
+      const listContainer = document.createElement("div");
+      listContainer.className = "dp-list";
+      listContainer.innerHTML = `<div class="dp-loading">${t("sib.dir.loading", "加载中...")}</div>`;
+      modal.appendChild(listContainer);
+
+      // ── Footer ────────────────────────────────────────────────────────
+      const footer = document.createElement("div");
+      footer.className = "dp-footer";
+
+      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>`;
+
+      const footerActions = document.createElement("div");
+      footerActions.className = "dp-footer-actions";
+
+      const cancelButton = document.createElement("button");
+      cancelButton.className = "btn btn-secondary";
+      cancelButton.textContent = t("sib.dir.cancel", "取消");
+      cancelButton.onclick = () => { overlay.remove(); resolve(null); };
+
+      const confirmButton = document.createElement("button");
+      confirmButton.className = "btn btn-primary";
+      confirmButton.textContent = t("sib.dir.confirm", "确认");
+      confirmButton.onclick = () => { overlay.remove(); resolve(selectedPath || null); };
+
+      footerActions.appendChild(cancelButton);
+      footerActions.appendChild(confirmButton);
+      footer.appendChild(newFolderBtn);
+      footer.appendChild(footerActions);
+      modal.appendChild(footer);
+
+      overlay.appendChild(modal);
+      document.body.appendChild(overlay);
+
+      // ── History stack for back/fwd ────────────────────────────────────
+      const history = [];
+      let historyIndex = -1;
+
+      function refreshNavBtns() {
+        backBtn.disabled = historyIndex <= 0;
+        fwdBtn.disabled  = historyIndex >= history.length - 1;
+      }
+
+      // Build breadcrumb from an absolute path
+      function refreshBreadcrumb(absPath) {
+        breadcrumb.innerHTML = "";
+        if (!absPath) return;
+        const parts = absPath.replace(/\/+$/, "").split("/");
+        // parts[0] is "" for absolute paths starting with /
+        parts.forEach((part, i) => {
+          if (i === 0 && part === "") {
+            // Root "/"
+            const seg = document.createElement("span");
+            seg.className = "dp-bc-seg";
+            seg.textContent = "/";
+            seg.addEventListener("click", () => navigateTo("/", true));
+            breadcrumb.appendChild(seg);
+            return;
+          }
+          if (!part) return;
+          const sep = document.createElement("span");
+          sep.className = "dp-bc-sep";
+          sep.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>`;
+          const seg = document.createElement("span");
+          seg.className = "dp-bc-seg";
+          seg.textContent = part;
+          const targetPath = parts.slice(0, i + 1).join("/") || "/";
+          seg.addEventListener("click", () => navigateTo(targetPath, true));
+          // Last segment = current dir, styled differently
+          if (i === parts.length - 1) {
+            seg.classList.add("dp-bc-current");
+            // Add folder icon before last segment
+            const folderIcon = document.createElement("span");
+            folderIcon.className = "dp-bc-folder-icon";
+            folderIcon.innerHTML = ICON_FOLDER_SVG;
+            breadcrumb.appendChild(sep);
+            breadcrumb.appendChild(folderIcon);
+          } else {
+            breadcrumb.appendChild(sep);
+          }
+          breadcrumb.appendChild(seg);
+        });
+        // Always scroll to show the rightmost (current) segment
+        requestAnimationFrame(() => { breadcrumb.scrollLeft = breadcrumb.scrollWidth; });
+      }
+
+      // Core navigation function
+      async function navigateTo(dirPath, absolute = true, pushHistory = true) {
+        listContainer.innerHTML = `<div class="dp-loading">${t("sib.dir.loading", "加载中...")}</div>`;
+        listContainer.querySelectorAll(".dp-row.selected").forEach(el => el.classList.remove("selected"));
+
+        // Push to history
+        if (pushHistory) {
+          // Trim forward history
+          history.splice(historyIndex + 1);
+          history.push(dirPath);
+          historyIndex = history.length - 1;
+          refreshNavBtns();
+        }
+
+        selectedPath = dirPath;
+        refreshBreadcrumb(dirPath);
+
+        const useAbsolute = absolute || sessionLess || dirPath.startsWith("/");
+        let relPath = dirPath;
+        if (!sessionLess && !useAbsolute && rootDir && (dirPath === rootDir || dirPath.startsWith(rootDir + "/"))) {
+          relPath = dirPath.substring(rootDir.length).replace(/^\/+/, "");
         }
-        caret.classList.add("open");
-        children.style.display = "flex";
-        if (children.dataset.loaded === "1") return;
-        children.innerHTML = `<div class="dp-loading">${t("sib.dir.loading", "加载中...")}</div>`;
+
         try {
-          const dirs = await fetchDirs(entry.path, entry.absolute);
-          children.innerHTML = "";
+          const dirs = await fetchDirs(relPath, useAbsolute);
+          // After first relative load, rootDir is now known — refresh breadcrumb + selectedPath
+          if (rootDir && dirPath === "") {
+            const effectivePath = currentDir && (currentDir === rootDir || currentDir.startsWith(rootDir + "/"))
+              ? currentDir
+              : rootDir;
+            selectedPath = effectivePath;
+            refreshBreadcrumb(effectivePath);
+            history[historyIndex] = effectivePath;
+          }
+          listContainer.innerHTML = "";
           if (dirs.length === 0) {
-            children.innerHTML = `<div class="dp-empty">${t("sib.dir.empty", "空目录")}</div>`;
+            listContainer.innerHTML = `<div class="dp-empty">${t("sib.dir.empty", "空目录")}</div>`;
           } else {
-            const parentNode = children.parentElement;
-            const parentDepth = parseInt(parentNode?.dataset?.depth) || 0;
-            const childDepth = parentDepth + 1;
             const frag = document.createDocumentFragment();
-            dirs.forEach(d => frag.appendChild(buildDirNode(d, childDepth)));
-            children.appendChild(frag);
-          }          children.dataset.loaded = "1";
+            dirs.forEach(d => frag.appendChild(buildDirNode(d, 0)));
+            listContainer.appendChild(frag);
+          }
         } catch (err) {
           console.error("dir picker load failed:", err);
-          children.innerHTML = `<div class="dp-error">${t("sib.dir.loadError", "加载失败")}</div>`;
+          listContainer.innerHTML = `<div class="dp-error">${t("sib.dir.loadError", "加载失败")}</div>`;
         }
       }
 
-      // Create modal overlay
-      const overlay = document.createElement("div");
-      overlay.className = "modal-overlay";
+      // Back / Forward
+      backBtn.addEventListener("click", () => {
+        if (historyIndex <= 0) return;
+        historyIndex--;
+        refreshNavBtns();
+        navigateTo(history[historyIndex], true, false);
+      });
+      fwdBtn.addEventListener("click", () => {
+        if (historyIndex >= history.length - 1) return;
+        historyIndex++;
+        refreshNavBtns();
+        navigateTo(history[historyIndex], true, false);
+      });
 
-      // Create modal content
-      const modal = document.createElement("div");
-      modal.className = "modal-content";
-      modal.style.maxWidth = "520px";
-      modal.style.maxHeight = "80vh";
-      modal.style.display = "flex";
-      modal.style.flexDirection = "column";
-
-      // Title
-      const title = document.createElement("div");
-      title.className = "modal-title";
-      title.textContent = sessionLess
-        ? t("sessions.modal.dirpicker.title", "选择工作目录")
-        : t("sib.dir.changePrompt", "切换工作目录");
-      modal.appendChild(title);
-
-      // Modal body
-      const body = document.createElement("div");
-      body.className = "modal-body";
-      body.style.flex = "1";
-      body.style.overflow = "hidden";
-      body.style.display = "flex";
-      body.style.flexDirection = "column";
-      body.style.gap = "8px";
-
-      // Quick presets (will be populated with absolute paths after first API call)
-      const presets = document.createElement("div");
-      presets.className = "dp-presets";
-      body.appendChild(presets);
-
-      // "Up one level" button — navigates to the parent of the current path.
-      const upBtn = document.createElement("button");
-      upBtn.className = "btn btn-secondary btn-sm dp-up-btn";
-      upBtn.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"><polyline points="18 15 12 9 6 15"/></svg><span>${t("sib.dir.up", "上一级")}</span>`;
-      function parentOf(p) {
-        const trimmed = (p || "").replace(/\/+$/, "");
-        if (!trimmed || trimmed === "/" ) return null;
-        const idx = trimmed.lastIndexOf("/");
-        if (idx < 0) return null;
-        return idx === 0 ? "/" : trimmed.substring(0, idx);
-      }
-      function refreshUpBtn() {
-        const parent = parentOf(pathInput.value);
-        upBtn.disabled = !parent;
-      }
-      upBtn.addEventListener("click", () => {
-        const parent = parentOf(pathInput.value);
-        if (!parent) return;
-        selectedPath = parent;
-        pathInput.value = parent;
-        modal.querySelectorAll(".dp-row.selected").forEach(el => el.classList.remove("selected"));
-        loadTreeForPath(parent, true);
+      // Hidden files toggle
+      hiddenCheckbox.addEventListener("change", () => {
+        showHidden = hiddenCheckbox.checked;
+        navigateTo(selectedPath || currentDir, 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>`;
+      // New folder — inserts an editable placeholder row at the top of the list
       newFolderBtn.addEventListener("click", () => beginCreateFolder());
 
       function beginCreateFolder() {
-        const parentDir = (pathInput.value || "").trim();
+        const parentDir = (selectedPath || "").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";
@@ -4919,29 +5050,14 @@ const Sessions = (() => {
         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);
-        }
+        // Drop stubs and prepend
+        const emptyEl = listContainer.querySelector(".dp-empty, .dp-loading, .dp-error");
+        if (emptyEl) emptyEl.remove();
+        listContainer.insertBefore(placeholder, listContainer.firstChild);
 
         startInlineEdit(nameSpan, t("sib.dir.newFolderDefault", "New Folder"), {
           onCommit: async (newName) => {
@@ -4960,8 +5076,6 @@ const Sessions = (() => {
                 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,
@@ -4969,14 +5083,12 @@ const Sessions = (() => {
                 absolute: true,
                 type:     "dir"
               };
-              const realNode = buildDirNode(realEntry, depth);
+              const realNode = buildDirNode(realEntry, 0);
               placeholder.replaceWith(realNode);
-              // Auto-select the new folder so the path input updates.
-              modal.querySelectorAll(".dp-row.selected").forEach(el => el.classList.remove("selected"));
+              listContainer.querySelectorAll(".dp-row.selected").forEach(el => el.classList.remove("selected"));
               realNode._dpRow.classList.add("selected");
               selectedPath = data.path;
-              pathInput.value = data.path;
-              refreshUpBtn();
+              refreshBreadcrumb(data.path);
             } catch (err) {
               alert(t("sib.dir.mkdirError", "Failed to create folder: {{msg}}").replace("{{msg}}", err.message || String(err)));
               placeholder.remove();
@@ -4986,10 +5098,7 @@ const Sessions = (() => {
         });
       }
 
-      // ── 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).
+      // ── Inline rename editor (shared by mkdir) ────────────────────────
       function startInlineEdit(nameSpan, initialValue, { onCommit, onCancel }) {
         const input = document.createElement("input");
         input.type = "text";
@@ -4998,39 +5107,21 @@ const Sessions = (() => {
         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);
-
+        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); }
-          }
+          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); }
@@ -5038,341 +5129,31 @@ const Sessions = (() => {
         input.addEventListener("blur", () => finish(true));
       }
 
-      function setupPresets() {
-        presets.innerHTML = "";
-        presets.appendChild(upBtn);
-        const presetDirs = sessionLess
-          ? [
-              { 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: 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;
-          btn.addEventListener("click", () => {
-            selectedPath = p.value;
-            pathInput.value = p.value;
-            modal.querySelectorAll(".dp-row.selected").forEach(el => el.classList.remove("selected"));
-            loadTreeForPath(p.value, p.absolute);
-          });
-          presets.appendChild(btn);
-        });
-        // "+ New folder" trailing action on the same toolbar.
-        presets.appendChild(newFolderBtn);
-      }
-
-      // Path input
-      const pathContainer = document.createElement("div");
-      pathContainer.className = "dp-path-container";
-      const pathInput = document.createElement("input");
-      pathInput.type = "text";
-      pathInput.className = "dir-picker-input";
-      pathInput.spellcheck = false;
-      pathInput.autocomplete = "off";
-      pathInput.setAttribute("autocapitalize", "off");
-      pathInput.value = currentDir;
-      pathInput.placeholder = t("sib.dir.inputPlaceholder", "输入或选择目录路径");
-      pathContainer.appendChild(pathInput);
-
-      // Autocomplete dropdown
-      const autocomplete = document.createElement("div");
-      autocomplete.className = "dp-autocomplete";
-      autocomplete.style.display = "none";
-      pathContainer.appendChild(autocomplete);
-
-      body.appendChild(pathContainer);
-
-      // Show hidden files toggle
-      const hiddenToggle = document.createElement("label");
-      hiddenToggle.className = "dp-hidden-toggle";
-      const hiddenCheckbox = document.createElement("input");
-      hiddenCheckbox.type = "checkbox";
-      hiddenCheckbox.checked = false;
-      const hiddenLabelText = document.createElement("span");
-      hiddenLabelText.textContent = t("sib.dir.showHidden", "显示隐藏文件");
-      hiddenToggle.appendChild(hiddenCheckbox);
-      hiddenToggle.appendChild(hiddenLabelText);
-      body.appendChild(hiddenToggle);
-
-      // Tree container
-      const treeContainer = document.createElement("div");
-      treeContainer.className = "dp-tree";
-      treeContainer.style.flex = "1";
-      treeContainer.style.overflow = "auto";
-      treeContainer.innerHTML = `<div class="dp-loading">${t("sib.dir.loading", "加载中...")}</div>`;
-      body.appendChild(treeContainer);
-
-      modal.appendChild(body);
-
-      // Buttons
-      const buttonContainer = document.createElement("div");
-      buttonContainer.className = "modal-buttons";
-
-      const cancelButton = document.createElement("button");
-      cancelButton.className = "btn btn-secondary";
-      cancelButton.textContent = t("sib.dir.cancel", "取消");
-      cancelButton.onclick = () => {
-        overlay.remove();
-        resolve(null);
-      };
-
-      const confirmButton = document.createElement("button");
-      confirmButton.className = "btn btn-primary";
-      confirmButton.textContent = t("sib.dir.confirm", "确认");
-      confirmButton.onclick = () => {
-        const dir = pathInput.value.trim();
-        overlay.remove();
-        resolve(dir || null);
-      };
-
-      buttonContainer.appendChild(cancelButton);
-      buttonContainer.appendChild(confirmButton);
-      modal.appendChild(buttonContainer);
-
-      overlay.appendChild(modal);
-      document.body.appendChild(overlay);
-
-      // Sync pathInput changes to selectedPath
-      pathInput.addEventListener("input", () => {
-        selectedPath = pathInput.value;
-        modal.querySelectorAll(".dp-row.selected").forEach(el => el.classList.remove("selected"));
-        refreshUpBtn();
-      });
-
-      // Load tree for a given path
-      async function loadTreeForPath(dirPath, absolute = false) {
-        treeContainer.innerHTML = `<div class="dp-loading">${t("sib.dir.loading", "加载中...")}</div>`;
-        if (dirPath) { pathInput.value = dirPath; selectedPath = dirPath; }
-        // Session-less mode browses absolute paths directly via /api/dirs;
-        // skip the working-directory-relative path math.
-        const useAbsolute = sessionLess || absolute || (dirPath.startsWith("/") && (!rootDir || !(dirPath === rootDir || dirPath.startsWith(rootDir + "/"))));
-        // Convert absolute path to relative path for API
-        let relPath = dirPath;
-        if (!sessionLess && !useAbsolute && rootDir && (dirPath === rootDir || dirPath.startsWith(rootDir + "/"))) {
-          relPath = dirPath.substring(rootDir.length).replace(/^\/+/, "");
-        }
-        try {
-          const dirs = await fetchDirs(relPath, useAbsolute);
-          // Update presets and pathInput with absolute paths after first API call
-          if (rootDir && presets.children.length === 0) {
-            setupPresets();
-            // Update pathInput to show absolute path
-            if (rootDir !== currentDir && !(currentDir === rootDir || currentDir.startsWith(rootDir + "/"))) {
-              pathInput.value = rootDir;
-              selectedPath = rootDir;
-            }
-          }
-          treeContainer.innerHTML = "";
-          if (dirs.length === 0) {
-            treeContainer.innerHTML = `<div class="dp-empty">${t("sib.dir.empty", "空目录")}</div>`;
-          } else {
-            const frag = document.createDocumentFragment();
-            dirs.forEach(d => frag.appendChild(buildDirNode(d, 0)));
-            treeContainer.appendChild(frag);
-          }
-          refreshUpBtn();
-        } catch (err) {
-          console.error("dir picker load failed:", err);
-          treeContainer.innerHTML = `<div class="dp-error">${t("sib.dir.loadError", "加载失败")}</div>`;
-        }
-      }
-      // Session-less mode: start browsing from the requested default (e.g.
-      // ~/clacky_workspace). The backend walks up to the nearest existing
-      // ancestor if it doesn't exist yet, while pathInput keeps the original.
-      if (sessionLess && currentDir) {
-        const wanted = currentDir;
-        loadTreeForPath(currentDir, true).then(() => {
-          pathInput.value = wanted;
-          selectedPath = wanted;
-          refreshUpBtn();
-        });
+      // ── Initial load ───────────────────────────────────────────────────
+      // session-less: browse absolute paths from currentDir (or "/" fallback)
+      // sessionful: load relative root first so rootDir is populated, then
+      //             navigate to currentDir if it's provided.
+      if (sessionLess) {
+        const startDir = currentDir || "/";
+        navigateTo(startDir, true);
       } else {
-        loadTreeForPath("");
-      }
-
-      hiddenCheckbox.addEventListener("change", () => {
-        showHidden = hiddenCheckbox.checked;
-        const cur = pathInput.value.trim();
-        const absolute = sessionLess || cur.startsWith("/");
-        loadTreeForPath(cur, absolute);
-      });
-
-      // ── Autocomplete logic ──────────────────────────────────────────────
-      let autocompleteTimer = null;
-      let activeIndex = -1;
-
-      function hideAutocomplete() {
-        autocomplete.style.display = "none";
-        autocomplete.innerHTML = "";
-        activeIndex = -1;
-      }
-
-      function showAutocomplete(items) {
-        autocomplete.innerHTML = "";
-        if (!items.length) { hideAutocomplete(); return; }
-
-        items.forEach((item, i) => {
-          const row = document.createElement("div");
-          row.className = "dp-ac-item";
-          if (i === activeIndex) row.classList.add("active");
-
-          const icon = document.createElement("span");
-          icon.className = "dp-ac-icon";
-          icon.innerHTML = ICON_FOLDER_SVG;
-
-          const name = document.createElement("span");
-          name.className = "dp-ac-name";
-          name.textContent = item.name;
-
-          row.appendChild(icon);
-          row.appendChild(name);
-
-          row.addEventListener("mousedown", (e) => {
-            e.preventDefault(); // prevent blur
-            // Construct full path: keep parent path from input, append selected item name
-            const inputVal = pathInput.value;
-            const lastSlash = inputVal.lastIndexOf("/");
-            const fullPath = lastSlash >= 0
-              ? inputVal.substring(0, lastSlash + 1) + item.name
-              : item.name;
-            pathInput.value = fullPath;
-            selectedPath = fullPath;
-            hideAutocomplete();
-            loadTreeForPath(fullPath);
-          });
-          row.addEventListener("mouseenter", () => {
-            activeIndex = i;
-            autocomplete.querySelectorAll(".dp-ac-item").forEach((el, j) => {
-              el.classList.toggle("active", j === i);
-            });
-          });
-
-          autocomplete.appendChild(row);
-        });
-        autocomplete.style.display = "";
-      }
-
-      async function fetchSuggestions(inputVal) {
-        if (!inputVal) { hideAutocomplete(); return; }
-
-        // Determine parent dir and prefix
-        const lastSlash = inputVal.lastIndexOf("/");
-        let parentPath, prefix;
-        if (lastSlash > 0) {
-          parentPath = inputVal.substring(0, lastSlash);
-          prefix = inputVal.substring(lastSlash + 1).toLowerCase();
-        } else if (lastSlash === 0) {
-          parentPath = "/";
-          prefix = inputVal.substring(1).toLowerCase();
-        } else {
-          parentPath = "";
-          prefix = inputVal.toLowerCase();
-        }
-
-        // Determine if we need absolute mode (path outside working directory)
-        const isAbsolute = parentPath.startsWith("/") && (!rootDir || !(parentPath === rootDir || parentPath.startsWith(rootDir + "/")));
-        let relPath = parentPath;
-        if (!isAbsolute && rootDir && (parentPath === rootDir || parentPath.startsWith(rootDir + "/"))) {
-          relPath = parentPath.substring(rootDir.length).replace(/^\/+/, "");
-        }
-
-        try {
-          const dirs = await fetchDirs(relPath, isAbsolute);
-          const filtered = prefix
-            ? dirs.filter(d => d.name.toLowerCase().startsWith(prefix))
-            : dirs;
-          showAutocomplete(filtered.slice(0, 15)); // limit to 15 items
-        } catch (_) {
-          hideAutocomplete();
-        }
-      }
-
-      pathInput.addEventListener("input", () => {
-        selectedPath = pathInput.value;
-        modal.querySelectorAll(".dp-row.selected").forEach(el => el.classList.remove("selected"));
-        clearTimeout(autocompleteTimer);
-        autocompleteTimer = setTimeout(() => fetchSuggestions(pathInput.value.trim()), 200);
-      });
-
-      pathInput.addEventListener("blur", () => {
-        // Delay to allow mousedown on suggestion
-        setTimeout(hideAutocomplete, 150);
-      });
-
-      pathInput.addEventListener("focus", () => {
-        if (pathInput.value.trim()) fetchSuggestions(pathInput.value.trim());
-      });
-
-      // Keyboard navigation in autocomplete
-      const pathIme = IME.track(pathInput);
-      pathInput.addEventListener("keydown", (e) => {
-        const items = autocomplete.querySelectorAll(".dp-ac-item");
-        if (!items.length || autocomplete.style.display === "none") {
-          if (e.key === "Enter") {
-            if (pathIme.isComposing(e)) return;
-            e.preventDefault();
-            // Navigate to typed path without closing modal
-            const dir = pathInput.value.trim();
-            if (dir) {
-              selectedPath = dir;
-              hideAutocomplete();
-              loadTreeForPath(dir);
-            }
-          }
-          return;
-        }
-
-        if (e.key === "ArrowDown") {
-          e.preventDefault();
-          activeIndex = Math.min(activeIndex + 1, items.length - 1);
-          items.forEach((el, i) => el.classList.toggle("active", i === activeIndex));
-          items[activeIndex]?.scrollIntoView({ block: "nearest" });
-        } else if (e.key === "ArrowUp") {
-          e.preventDefault();
-          activeIndex = Math.max(activeIndex - 1, 0);
-          items.forEach((el, i) => el.classList.toggle("active", i === activeIndex));
-          items[activeIndex]?.scrollIntoView({ block: "nearest" });
-        } else if (e.key === "Enter") {
-          if (pathIme.isComposing(e)) return;
-          e.preventDefault();
-          if (activeIndex >= 0 && items[activeIndex]) {
-            // Select the highlighted suggestion
-            const evt = new MouseEvent("mousedown", { bubbles: true });
-            items[activeIndex].dispatchEvent(evt);
-          } else {
-            // Navigate to typed path without closing modal
-            const dir = pathInput.value.trim();
-            if (dir) {
-              selectedPath = dir;
-              hideAutocomplete();
-              loadTreeForPath(dir);
+        // First load relative root to get rootDir from API, then optionally
+        // re-navigate to the actual currentDir.
+        navigateTo("", false).then ? navigateTo("", false) : navigateTo("", false);
+        if (currentDir) {
+          // After rootDir is known, breadcrumb + selectedPath already set by navigateTo.
+          // If currentDir differs from rootDir, do a second navigate.
+          setTimeout(() => {
+            if (currentDir && currentDir !== rootDir) {
+              navigateTo(currentDir, currentDir.startsWith("/"));
             }
-          }
-        } else if (e.key === "Escape") {
-          hideAutocomplete();
+          }, 100);
         }
-      });
+      }
 
       overlay.addEventListener("keydown", (e) => {
-        if (e.key === "Escape") {
-          if (autocomplete.style.display !== "none") {
-            hideAutocomplete();
-          } else {
-            cancelButton.click();
-          }
-        }
+        if (e.key === "Escape") cancelButton.click();
       });
-
       overlay.addEventListener("click", (e) => {
         if (e.target === overlay) cancelButton.click();
       });